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.
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.
This was just a fun and simple animation showing all the HTML5 tags falling, kind of like the Matrix code.
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.
- The Hitchhikers Guide to the Directive
- Communicating Between Directives
- Increasing Productivity
- Don’t Guess it, Test it
- Test Driven Development with Grunt – Screencast
- Accessing Properties Methods Defined Under $rootScope from Controllers in Angular.js
- Effective Communication Skills
- Angular.js Cheatsheet
- How to Create Angular.js Services in 4 Different Ways
- Experiment with Angular.js and Jasmine using these plunks
- Angular.js Cheat Sheet
- $provide Methods / Building Up with AngularJS
- Angular Design Patterns Best Practices
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.
Here are links to the tabs I currently have open in Chrome, that would be of interest to other people anyways: