Wednesday, November 23, 2011

My Top 5 jQuery Plugins

I've been increasingly working more with jQuery. For the uninitiated, jQuery is a great Javascript library which makes web pages do clever stuff quite easily. Its great for hiding and animating sections of a page for example.

The other great thing are the numerous plugins that are available for jQuery. If you need a clever image carousel  - for example - take your pick.

But in my recent experience I have found these 5 plugins really useful -
  • jQuery validation - great client side form validation plugin. Simple implementation via CSS classes and nice error messages.
  • jQuery UI - excellent library of extensions that includes a sexy date time picker and a great sortable list function which allows users to visually order elements, such as pages in a cms or links on a page.
  • Cycle Plugin - great for all sorts of image/content slideshows, carousels etc. So configurable it can be used for much more than simply rotating a few images. I use it regularly for any sections of page content that need animation, cycling, hiding or rotating. Handy pager functions and the fact it handles all the DOM (i.e. the HTML bits you are animating) smoothly really make this useful.
  • JRAC - short for jQuery resize and crop (I think). Just started using this but looks excellent. Allows you to offer cool cropping and resizing functionality to users uploading images. Still requires some nifty coding to do anything with the numbers it spits out, but definitely useful.
  • Uploadify - OK, not strictly a jQuery plugin, this is in fact a Flash based file uploader. It does have a jQuery library available to make implementation straightforward. Its very good, particularly its nice use of CSS and progress bar. Its looking increasingly likely that Flash's days on the web are numbered but until HTML 5 really rumbles in this is an excellent upload script.
I always thought that loading code from CDNs would be somehow slower than loading Javascript locally from the same site. Apparently I am wrong, so don't be shy to use jQuery, Microsoft and Google CDNs. These are code repositories maintained (and optimised) by these web giants and offer hot link friendly code resources with better performance than even your local site. Work that out.

On a related note we are starting to toy with HTML 5 at work and we found this great intro to using it. HTML 5 Boilerplate gives you a highly optimised starting point to begin building websites in the next generation of HTML.  Its written in part by a chap called Paul Irish who works on the Google Chrome team, so he should know a bit about rendering HTML and browsers.