Why jQuery Rocks

As a lazy developer, I love jQuery. I'll try to enumerate my top reasons:

1. It's among the smallest of the full featured javascript libraries. So I don't have to worry about adding a lot of overhead to my pages to use it. For example, minified and gzipped, jQuery is about 15k. Dojo is about 24k, which, I admit, it still pretty impressive.
2. jQuery does tons of cool stuff out of the box and doesn't require me to understand complex extension packages (moo tools and the Yahoo! User Interface Library are the most extreme examples I can think of).
3. I can call functions as soon as the DOM is ready. (What's the DOM?)
4. Simple, CSS style syntax for selecting elements combined with chainable functions allow me to write in 1 to 5 lines what used to take 12 to 50.
5. jQuery's also got some great plug ins.

Of course, not every plug in available is amazingly awesome or even a good fit for every project. In fact, some of the best, in my opinion, have a very narrow, targeted application. Today I was asked to create an image gallery from a collection of 50 shots taken at the graduate awards ceremony Friday night. In the past, we've used Flash to make our image galleries. I suck at Flash, so I'm sure it would take me all week to recreate something like that, even if I had a basic template to go by. I have no idea how long it took Ken (former webmaster, current director of public relations and therefore my boss) to generate something like that. But I figured I could whip up something similar in jQuery in an afternoon.

There are lots of image gallery plug ins for jQuery. I wanted one that looked impressive while being easy to navigate and not so flashy as to distract from the images themselves. I also wanted something that required nothing but a list of images identified by an ID or class. The idea there is, if someday move to a CMS, the end users could build a gallery by simply adding the class (or ID) to a list of images. That's the sort of thing we could easily cover in training. It helps that as of right now my favorite CMS is Drupal, which comes pre-packaged with jQuery.

I looked at slideViewer, but I like thumbnails. I looked at jqGalViewII but for this particular application I don't want to spend time generating my own thumbnails. Then I looked at Galleria and this seemed to be the best fit for my immediate needs.

It took about 15 minutes of code work to repurpose the key elements from the demo page for our needs. That includes time spent minifying the javascript and uploading the external files to the server. I changed a few color values in the CSS, altered the fonts slightly, linked in our images, and had a fully functional image gallery in less time than it took to crop the images. The only snag I ran into was the preloading function wasn't working properly in IE (curse you IE!). But updating the core jQuery library to the latest version fixed this bug pretty quickly. I should have done that earlier, but I've been focusing on the development server, not the “live” server.

I hope to incorporate some standard implementations of things like this into the redesign. I'm keeping the possibility of a future move to a CMS in mind, but there's plenty of other benefits to having a few well documented solutions like this. It saves me time. That's a good start. I also occasionally take a vacation or occasionally get sick. If something comes up and I'm unavailable, a quick HowTo on implementing a cookie cutter image gallery like this could be a real life saver. I need to experiment with managing a mix of image sizes and maybe port the auto-thumbnail feature from Galleria into jqGalViewII and then offer up both options in a tidy package. Since it's all open source, I can easily do that.

Here's hopin' I don't automate myself out of a job some day. :)