Posts Tagged ‘javascript’

5 Of My Coolest jsFiddles That I’ve Made

I wanted to share some of my best jsFiddles because I have a lot of them, and they aren’t accessible in any one place. Here are some of my most favorite ones that I’ve made.

HTML5 Form from Mockup with Validation

I made this fiddle from a mockup I was given as part of an interview I had with a company. The requirements included:

  • Validating that the form didn’t submit if Name and Password inputs were empty.
  • Showing custom tooltip error messages for invalid fields.
  • Password must include an uppercase character and a number or a special character.
  • Error tooltips update on keyup once they meet any part of the validation.
  • The submit button must remain disabled until all fields are valid values.

Canvas Stopwatch

This was something I made so I could use it for another interview coding test I had to make that was to be completed within 1 hour.

Isobar Canvas Logo Animation

This is my previous company’s logo with some animation added to it. I drew out the letters in the word Isobar using a background grid layered with an image of the logo so I could trace it with canvas drawing points. The font used in the logo was slightly tweaked in various ways so it was not possible to use the text methods in canvas to just type in the word. I had to draw it manually line by line. The animation of the circles is done in such a way that makes it look like they are coming out of the top of the letters. Only 10 circles show at once and only for a certain amount of time before they disappear allowing a new one to be created.

Note: View the result tab to see the animation. Showing it by default makes the animation not work correctly.

Raining HTML5

This was just a fun and simple animation showing all the HTML5 tags falling, kind of like the Matrix code.

Currently Open Tabs: Resources For Using AngularJS

Although this list is not actually a complete or accurate list of my currently open tabs (I have since closed some, as well as, working on a page for DevTools docs), this is a list of tabs I have either open, or have opened at one time.

You may have noticed more and more recently, that Angular.js is growing in popularity among Front-end Developers. I’m personally a big fan of it, and I would like to share some more things which I’ve come to learn about it in the near future.

Until the, here’s a list of tabs which are mostly focused on developing with Angular.js, but a few others thrown into the mix as well.

Handy Tricks With Developer Tools

This is a comparison of the most popular MV* JavaScript Frameworks using Google Trends

You can tell that Angular.js has really picked up some momentum judging by this graph. I wonder how long this climb to most popular will continue.

My currently open tabs…

Here are links to the tabs I currently have open in Chrome, that would be of interest to other people anyways:

High-Performance, Garbage-Collector-Friendly Code

What’s a Closure?

Writing Fast, Memory-Efficient JavaScript

JavaScript design patterns – Part 2: Adapter, decorator, and factory

Developing WebKit – Get the code

Contributing to Chrome Developer Tools

WebKit Inspector on trunk

Grunt.js Workflow

HTML5Weekly #67

JavaScript Getters and Setters

Chrome Devtools Cheatsheet

Douglas Crockford: Programming Style & Your Brain

JavaScript and the DOM Series: Lesson 1