Lucikly there is a website called jsperf.com which allows you to test & compare different blocks of code against each other, and see the results of each – recording how fast each block ran in which browser. Here are some simple but handy tips.

Document Ready

http://jsperf.com/ready/2

When calling for jQuery to fire when the whole page has loaded – aka on document ready – there are a few options available to initiate this. The test shows that the quickest, by quite a way is:

A better .each() loop

http://jsperf.com/jquery-each-vs-quickeach

Looping through X amount of the same element can be quite time intensive, especially if you’re doing manipulation in each loop. The built in .each method does a decent job, but James Padolsey at jsperf has taken advantage of object caching to create a faster loop extension, called .quickEach:

CSS3 Selector vs Jquery

http://jsperf.com/jquery-css3-not-vs-not

Ok, so this is a test for the latest browsers (which you should be on anyway) but this test shows that using a CSS3 selector to help jQuery navigate the code is quicker than relying on the library itself.

Switch vs If/Else

http://jsperf.com/switch-if-else

Quite an interesting one, this. It seems that an if/else conditional block is faster, in all browsers, than a switch/case block – remember this if you’ve got a switch/case block in a loop.

jQuery selector vs normal javascript

http://jsperf.com/getelementbyid-vs-jquery-id/5

This is a bit obvious this one, but one that is often forgotten. This test proves that, if you can, using standard javascript is always preferable if you’re optimizing as it doesn’t require the loading of a large library before firing. Although jQuery is very useful for pretty much all web JS development, there is absolutely no excuse for using jQuery to just select a canvas element.

Impact – HTML5 Canvas & JavaScript Game Engine

Impact is, it claims, the “most awesomest way to create even more HTML 5 games” and at first glance, you’d be hard pressed to argue against that. The slick website demonstrating the engine shows a game created using the engine running on browsers both on desktops and on mobile. It also comes with its own dedicated level editor so people who are more design orientated are looked after as well.

The engine’s greatest strength is its well written and nicely presented documentation – with examples of each class in action. All this for just $99 is a steal – however there are free alternatives out there…

LimeJS HTML5 Game Framework

Available via Github, LimeJS is entirely free and open source – allowing you to build fast and (more importantly) native-experience games for multiple platforms. It has a decent community around it, however it does seem to suffer from the “too many cooks” issue and the documentation is poorly presented – offering little more than is absolutely necessary. As a free alternative, however, you’d be hard-pressed to find anything better suited for HTML5 game development.

JawsJS

More of an individual’s attempt to work with HTML5 canvas, JawsJS definitely has some legs. It has since been extended beyond the canvas and the developer promises plenty of updates in the following few months. Definitely one to watch.

GameQuery

Perhaps the one that interests me the most, GameQuery attempts to create a gaming engine based around the already fantastic jQuery framework. The developers are specifically promising that it will be easy, quick and stick to the jQuery philosophy. As an avid jQuery fan myself, this one has me excited. Supporting solid gaming features such as collision detection and animation and promising that beginners can develop basic 2D games – this could do for game development what jQuery did for carousels.

Check it out: on github or try out the demo.

The plugin takes 3 options allowing you to customize it to suit your needs; same domain links can be included as can list elements, and previously set target attributes can be overridden.

How to use

[box icon="code"]

$ ( “a” ).blankit( { option: value } );

[/box]

Options

[box icon="code]
// Any previously set targets will be overridden with the new _blank value.
override: (default: false)

// This will include any anchor tags that are in a list (usually menu element).
listitems: (default: false)

// This will include/exclude the internal links from having blank set as a target property.
samedomain: (default: false)
[/box]

Check it out & tell me your thoughts. Don’t forget you can also fork it and use it however you want. There is also more information on the plugin at plugins.jquery.com

[line]

If you enjoyed this post, why not subscribe to my feed or check me out on Twitter.

Right now, I’ve built demonstrations of :

• Shapes
• Animation
• Local Storage
• Mobile (using jQuery mobile)

As with most fancy HTML5/CSS3 stuff, the latest browsers are required so those of you with IE6/7 please consider upgrading your browser.

The code for these is available on Github so feel free to pull and use wherever/whenever.

So, to prove to myself that there was more to jQuery than content scrollers, I did some Google’ing and found 6 really unique jQuery plugins/extensions that are worth taking a look at.

6 – Face Detection (http://facedetection.jaysalvat.com/)

Brilliant jQuery tool for scanning pictures for faces and returning the locations. Fantastic when applied with a user membership or avatar system, allowing you to extend or improve your cropping tool.

5 – jMapping (http://vigetlabs.github.com/jmapping/)

jQuery extension for easily adding Google Maps to any page with extensive customisation options. Also very good at degrading gracefully. If you’re rolling out a store locator this could be a better alternative than using any WordPress plugins which are somewhat limited without hacking.

4 – JSZip (http://jszip.stuartk.co.uk/)

Nothing ground breaking here, just a useful library allowing you to compress and zip up files for download using the jQuery framework.

3 – Colortip (http://bit.ly/9o5QS5)

Tool tips are a fantastic tool for adding usability to a site, which may perhaps be confusing without.

2 – Fancy Sliding Form (http://bit.ly/bnkYUG)

Any library that makes it easier to deal with complex forms is worth the time to look. This makes it a lot simpler to create a tidy, one page form.

1 – Lettering (http://letteringjs.com/)

If you’re sick of seeing the same old Tahoma & Arial’s throughout the web, then this might be the plug-in for you. Taking the idea of custom fonts with CSS, this library offers down to the letter control over your typography and some of the examples on their site are breathtaking.

• CSS3 Transformations
• CSS3 Polaroids
• Starry Night in CSS3 – Scrolling Backgrounds
• Analogue Clock
• 3D Cube
• DJ Deck in CSS3 and jQuery
• jPong – Pong build in jQuery

(most of these work best in the latest browsers (Chrome, Safari 5, Firefox))

As you can see, you don’t have to limit yourself to building interactive animations in Flash that won’t work on iPhone/iPad, or having to build a platform-locked application (like an app on the app store). But remember:

“Similar to Flash, just because you can do it, doesn’t mean you always should.” @kuatofkuat

Finally, the guys who created jQuery (our lovable Javascript library!) have only gone and created jQuery Mobile, which will allow you to build a website – once – and it will work and look good on all mobile devices.

Check it out at http://jquerymobile.com/ and the demos http://jquerymobile.com/demos/1.0a1/ (try on any mobile device)