Friday, February 27, 2009

jQuery and reimagining simple things

For the past several months, I've been using jQuery more and more in various ways. Every time I use it, I totally love it. It's so freeing not to use a library that is compact, flexible, powerful, cross-platform, and that doesn't require a crapload of programming paradigms or force a whole regime of programming on me.

This isn't meant to bash any other frameworks or libraries. But, I've used YUI and Prototype extensively, as well as toyed with Ext. I know that every library or framework has its strengths and weaknesses as well as its proponents and detractors. I don't intend to compare absolutely everything about these frameworks either. There are several posts which already do that sort of blow-by-blow comparison. Instead, I'd like to talk about how jQuery changed my perception of what's possible.

I've worked online for more than a decade - so I tend to think of a lot of thinking in a historical context. For example, menu navigation. Almost every site that I've built has some kind of nav bar with links. Usually, those navbars have hierarchical menus or drop down menus that let you move around. Usually I think of a simple HTML table that has a couple of boxes. Clicking on or mousing over each box opens the dropdown menu with the navigation items below. Yes, it's quite web 1.0-ish. But to be honest, it's a tried-and-true formula for getting something to work. You know it works absolutely everywhere.

After messing with jQuery and reading about it, that's all gone for me.

Want cool navigational menus? How about Kwicks? Here are just a few example pages that show you the power. Ok, so maybe you don't like that sort of boxy-bouncy type stuff. How about something a bit more subtle? Check out Bedrich Rios' demo of MooTools inspired navigational links. (Walkthrough of that demo is here.) Ok, so even that's too much? How about something really simple that even looks like the old-fashioned navbar menus? Check out this demo from kriesi. (Walkthrough of that hierarchical navbar is here.)

I like these examples because they really blow away the traditional way of thinking about menus. I had never considered a navbar that would expand horizontally when you mouse over the header you want. I hadn't really thought about small touches like the little bounce on mouseover to indicate visually that you've moused over the link. It's nice. It turns what used to be a totally hum-drum thing into something that's eye-catching and feels neat.

Moreover, I like these examples because the simplicity of the jQuery library lets these work with minimal javascript and without crazy javascript contortions. Sure, this is possible in lots of frameworks and you can (probably) drop in a single remote javascript file to handle it. But, just because you can, doesn't mean you should. Any client side programming language and framework enables you to do stuff like this. But, jQuery provides a way to do it elegantly.

Also, if you are utterly bored by the navigational menu examples, check out the 45 other examples from Smashing Magazine. Some of my navbar examples are taken from there, and some I've found elsewhere. Most importantly, take a quick look through the variety of examples there and you'll get a good sense for the flexibility and power of the jQuery library.

I can't wait to see what new cool super-charged stuff people create using libraries like jQuery.