jQuery: Novice to Ninja

Sitepoint’s latest title is aimed at the average Front-end developer/designer and promises to teach her the intricate workings of the jQuery library. In fact, if we’re to go by the title, it promises to take her from “novice to ninja”. Let me be honest, I was originally skeptical of the book, but upon finding out that it was co-authored by the esteemed mrspeaker my mind was quickly changed.

As with any good book, the first chapter outlines what the subject matter is. The authors talk about jQuery itself and touch briefly on the DOM. You have to remember that this book is aimed at developers or designers that don’t really know that much about JavaScript, the DOM, or jQuery, so the book is accordingly written in such a way that it won’t confuse the pants off your typical photshop-wizz turned HTML/CSS guy.

So if you know JavaScript well, you might not enjoy this book — it will probably annoy you, simply because it doesn’t go into a huge amount of detail on what’s happening behind the scenes. But, for those that it’s aimed at, I think it does a pretty good job.

One thing that we have a problem with, in the jQuery community bubble, is the overzealous generation of redundant nomenclature. This book doesn’t fall short on this front. jQuery’s methods are referred to as “actions”.

The second chapter covers the most basic usages of jQuery, selecting stuff and doing stuff. It’s all innocent and simple — I like it. To keep the reader focused the authors have slipped in “A few tricks”. Among them is the popular add-a-class-on-mouseover, remove-it-on-mouseout.

Nearing the end of chapter two, the book has the following to say about the hover method:

“It requires two functions as parameters: one to handle the mouseover event, and one to handle the mouseout event.”

The book does claim to be 1.4-ready, so I think it’s only right to mention this. In jQuery 1.4 the hover method accepts either one or two parameters, and they don’t correspond to the mouse(over|out) events; they correspond to the mouse(enter|leave) events, although I guess they’re not totally incorrect on this because jQuery simulates these events using mouse(over|out) in non-supporting browsers, but it is nevertheless an oversight.

Not soon after that did I find what I consider to be a grievous anti-pattern:

$('.spoiler').hide();
$('<span class="revealer">Tell me!</span>')
    .insertBefore('.spoiler');
$('.revealer').click(function() {
    $(this).hide();
    $(this).next().fadeIn();
});

It seems that in their desperation to keep it simple, the authors have chosen to spare the readers of what would be some very good advice. When you add something to the DOM, and it doesn’t need to be referenced within a CSS StyleSheet, then giving it a class or ID, and then getting a reference to that element via that hook, is normally an almost-entirely redundant process. This would be a far better approach:

var spoilers = $('.spoiler').hide(),
    buttons = $('<span>Tell me!</span>').insertBefore(spoilers);
 
buttons.click(function() {
    $(this).hide().next().fadeIn();
});

Or, even:

$('.spoiler').hide().before(
    $('<span/>', {
        text: 'Tell me!',
        click: function(){
            $(this).hide().next().fadeIn();
        }
    })
);

If I was the author, I don’t know what I would have done in this situation… since it’s a teaching exercise, do you show the readers how it should be done, or do you show them in the simplest way possible, so as to not bulldoze them with complexities?

Moving on, the book is very cookbook’y and focuses heavily on an imagined client that has lots of strange requirements (quite typical of your average client). From the introduction to chapter three:

“The client is extremely happy […] he believes flashy animations will help boost sales.

‘I think it needs some of that Web 2.0 that I’ve been hearing about,’ he says confidently. ‘Can you make it look more like a Web 2.0?’

‘Errrm, indeed we can,’ you assure him, as he passes you his next wish list chock-full of exciting changes—a list that will allow us to move beyond simply hiding and showing, and closer to our goal of being a jQuery ninja.”

I have a soft spot for these kind of tongue-in-cheek introductions, they’re quite popular in other programming books too, and I think it does well to mentally elevate the reader — and to develop that all-important reader-author relationship.

Before you know it, you’re into the third chapter. Chapter three exhaustively covers animation. The detail is great and the authors even take the time touch on jQuery UI’s animation capabilities in addition to covering all of the core methods. I liked this chapter, — it seemed to cover pretty much everything, although I found myself disappointed with some of the code again:

$('<div id="navigation_blob"></div>').css({
    width: $('#navigation li:first a').width() + 10,
    height: $('#navigation li:first a').height() + 10
}).appendTo('#navigation');

Let’s introduce some basic optimisations:

var nav = $('#navigation'),
    firstAnchor = nav.find('li:first a');
 
$('<div id="navigation_blob"></div>').css({
    width: firstAnchor.width() + 10,
    height: firstAnchor.height() + 10
}).appendTo(nav);

Chapter four is all about images, and takes the reader through the process of creating a simple lightbox effect. It also shows you how to download and “install” your typical jQuery lightbox plugin (in this case, ColorBox). It continues to show you how to create a simple slideshow.

The bulk of this book was obviously written before 1.4 was released. I get the impression that, upon 1.4’s release, the authors quickly went through adding in some “actions” only made possible with 1.4. They covered the new way of creating elements in jQuery 1.4, which involves passing an object as the second argument to jQuery():

$('<div/>', {
    text: 'foo',
    click: function(){},
    id: 'muah'
});

The book had the following to say:

“If you use a jQuery method name like text, html, or val, it will use the jQuery methods to set the property. Everything else will be treated as an attribute, as done with the src property.”

This isn’t entirely accurate. jQuery only uses certain methods — not all of them. Methods available for usage in this way are specified under jQuery.attrFn.

Continuing…

Chapter five brings with it a lot of UI icing… tooltips, menus, tabs and accordions. The book takes the reader through the processes involved in creating these interface elements. Just like all the other chapters, chapter five is littered with little titbits of useful information. For example, it covers event propagation and default event actions in pretty decent detail.

The next chapter is probably my favourite — it covers code construction and best practices, including namespacing, encapsulation, commenting, DRY, templating and feature detection! I was pleasantly surprised to see these topics covered in a book like this. Their templating techniques were a little lacking — I would’ve liked to see some custom-typed <script> elements (like in Resig’s solution), or perhaps some templates stuffed into HTML comments.

Chapter six continues by explaining Ajax and showing the reader what jQuery offers in the way of Ajax/XHR utilities. You’re also taken through the process of creating an Ajax-driven image gallery among some other gems.

I’m going to stop outlining the chapters now… I’m bored, and you’re probably not getting much from that (heck, you could probably just look through the TOC). The rest of book covers forms, controls, dialogs, validation, lists, trees, tables, plugins, themes and some “advanced topics”. There’s also a hefty appendices that has bunch of useful information, including a brief JavaScript tutorial for those new to the language.

Just so we’re clear, this is a good book, and if you fit the bill of a front-end wizz that wants to pick up jQuery, then this book will easily deliver. There are a couple of oversights, but in a book over 400 pages long I’d say that’s pretty amazing! Earl Castledine and Craig Sharkie have done a pretty awesome job!

Thanks for reading! Please share your thoughts with me on Twitter. Have a great day!