Tuesday, February 12, 2013

jQuery Object Quacks like an Array Duck

jQuery Array-like Object


I'm sure you've heard of the old saying, "If it looks like a duck, swims like a duck, and quacks like a duck, then it probably is a duck".

Well, a simular statement could be said about the jQuery Object. If the jQuery Object looks like an array, indexes like an array, console.logs like an array, then it probably is an array... err, well, but in this case it's NOT an array!

Let's unpack this a little more and see what sense we can make out of it. The following snippet of code invokes the jQuery Function and performs a selection from the DOM and then accesses the returned jQuery Object to locate the DOM element at index 2, which feels an awful lot like an array.


Upon further examination in the console the jQuery Object is indeed an object (not an array) as indicated by the $.type() utility method.


Note: You might notice that I am using the lesser known $.type() utility method to determine the type of the variable. I am not using the typeof operator because it evaluates to "object" for both arrays and objects. The $.type() method returns much more useful data http://api.jquery.com/jquery.type/

Something of interest in the above screenshot is the grayed out __proto__ property. That is where all the jQuery goodness (functionality) can be found such as .fadeOut(), .on(), .addClass(), and all the other methods jQuery provides.

After some digging in the jQuery source code I came across the following merge method where the array results of the DOM selection gets copied over to the jQuery Object. In addition to mapping over these values jQuery also provides a .length property and a .splice() method which enables itself to mimic an array.


Making a Custom Array-like Object


So, what about making our own custom array-like object!?! The following small snippet of JavaScript defines an object and then assigns a set of key/value pairs. In order to mimic an array we need to add a .length property and expose a .splice() method borrowed from the array.


The following is a screenshot of what is console.logged after executing the above code snippet. You will see that our array_like object is treated as if it were an array just the like jQuery Object... yay!


Note: If we take off the .length property or the .splice() method then the custom object will no longer appear as an array in the console. They are both necessary.

Conclusion


So, inductive reasoning might be a good thing most of the time, but in this case the Duck Test failed us. You can play around with the code snippets above by looking at the following JSFiddle.

Tuesday, February 05, 2013

Animating a Twitter BootStrap Icon with CSS3

Introduction


So, I was already using Twitter Bootstrap on a project recently and I had a refresh icon that I wanted to use a button. The markup for my icon looked very much like the following snippet...


The previous markup renders as the following...



That is all fine and dandy, however, I thought it would be neat if the refresh icon would rotate when the clicked until that action was complete.

To implement this feature I decided to use a CSS3 animation.

Note: At the time of writing this CSS3 animation is currently supported in IE10, Firefox 16+, Chrome 23+, Safari 5.1+, Opera 12.1+, iOS 3.2+, Android 2.1+, & Blackberry 7.0+ Reference: Can I Use?

CSS3 Animation


If you don't already know about CSS3 Animation you can pick up a primer at the following locations...


I ended up using the following CSS to get the animation to work...


Note: You may have noticed that I'm not using vendor prefixes in the above CSS. For this demo I am using only the standard prefix-free styles and using Lea Verou's -prefix-free library to dynamically add the vendor prefixed styles at runtime. Now, you may or may not want to use this library for production, but it sure makes it nice for blog posts and jsFiddles!

The above CSS defines a class named icon-refresh-animate that assigns the animation, how long it should take, how many times it should iterate, and what type of algorithm to use. The class references the rotateThis keyframes which defines what the beginning and end state of the animation should look like. In this case the animation will rotate the element from 0 degrees to 360 degrees.

Once I got the CSS3 situated, I moved on to writing some JavaScript to wire up the animation. The following code snippet adds the icon-refresh-animation class to the icon when the anchor is clicked. Once the class has been added the animation begins. Then the code kicks off a window.setTimeout to simulate some kind of asynchronous action and when complete the class is removed, therefore stoping the animation.


You can interact with the final solution in the following jsFiddle. You'll need to click the icon in order to kick off the 2 second animation.



Conclusion


So, instead of looking for a GIF to animate your icon, why don't you try taking your ordinary element and make them come alive with a little CSS3 spice. Who needs animated GIFs anyway?

Now, get going and get your baby ninja talents to work. Okay, I admit animated GIFs are cool, but not for rotating your icons ;)

Monday, February 04, 2013

FluentConf Advanced jQuery Training & Session

FluentConf 2013


Last year I was unable to attend FluentConf, but I'm honored to be on the Program Committee this year. In addition I'll be leading a 3 hour Advanced jQuery workshop and presenting a session on JavaScript.

Training Workshop

Advanced jQuery Techniques


On Tuesday, 05/28/2013 at 9:00am I will lead a workshop on Advanced jQuery Techniques. This workshop will be last 3 hours long and will contain a combination of both lecture and lab.

If you would like to attend this workshop you can add it to your schedule. You can view all of the other workshops from the FluentConf website.

Join appendTo’s Elijah Manor for a dive into advanced topics surrounding the front-end with jQuery. Utilize the jQuery library in the context of large-scale applications by learning how to dramatically improve performance, increase maintainability and reusability, and write cleaner and more concise code. Learn how to adopt a style that is maintainable and scalable while keeping simplicity as a core tenant for successful web development.

JavaScript Session

Angry Birds of Modern JavaScript Development


On Wednesday, 05/29/2013 at 1:45pm I will present a session titled Angry Birds of Modern JavaScript Development.

This is not your ordinary session, I've tried to mix things up by having each Angry Bird represent an area of JavaScript along with its strengths. Some topics covered include code organization, events and messaging, MV* frameworks, prototyping and mocking, design patterns, linting, and build systems. The goal is to defeat the pigs and by doing so produce highly tested quality JavaScript code.

A diabolical herd of pigs stole all of the front-end architecture from an innocent flock of birds and now they want it back! A team of special agent hero birds will attack these despicable pigs until they recover what is rightfully theirs, front-end architecture!

The Red Birds attacks with the force of their trusty IIFE, the basic building block of all privacy. The Blue Bird follows in his footsteps and triggers events and messages that scatter to infiltrate the pig’s castle. The Yellow Bird comes with a Require.JS speed booster and dynamically injects scripts against those pesky swine. The Black Bird is soon to follow and he provides a much more organized approach to fighting these porkers and introduces the Backbone.js bomb to their dismay. The White Bird appears to be seemingly harmless, but when it pulls out it’s strict coding style and bursts of quality checks the hogs are sure to squeal. The Green Bird can reach all of those hard to reach places and will mock and spy those stealing swine right where it hurts! The Orange Bird starts out small with a simple template, but then expands itself into a DOM blast that will surely send the message that the birds mean business. The Big Brother is not too far behind and he is pulling out the big guns with his finite state machine and other proven design patterns of destruction. The Mighty Eagle pulls up the ranks with a superior weapon of them all, a suite of tools that can organize and deploy all the other birds into battle against their soon to be be vanquished foe.

appendTo Virtual Live Trainings


In addition to the previous FluentConf workshop and session I also lead Virtual Live Trainings for appendTo.

If your company is interested in a private remote training experience on JavaScript, jQuery, Backbone.js, Underscore.js, RequireJS, or other web technologies please e-mail training@appendto.com for more information.

Here are some of the benefits of a Virtual Live Training (VLT)
  • Virtual Live Trainings can be located worldwide. I've performed numerous trainings both in the United States and overseas.
  • Virtual Live Trainings are cheaper than our On-Site Trainings because there is no additional cost for travel or hotel fees.
  • Virtual Live Trainings are well suited for 1/2 day trainings over a week duration enabling the students to gradually absorb the knowledge and also remain productive at their day job.
  • Virtual Live Trainings can be scheduled quicker than an On-Site Training since there is no travel involved.
  • Virtual Live Trainings get the same content and labs as an On-Site Training and to make it feel more personable I stream video of myself as well as my screen.