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 themouseout
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!
James, nice review. I got the PDF of the book yesterday but have not started reading it yet. Typically, I try to read the books front-to-back; but it sounds like I might just be better of skipping ahead a few chapters.
James: please, write a book! I’m sure it would be the best jQuery publication out there.
Hmm, was tempted to buy this but not so sure now. Some of the chapters sound fantastic but others sound a bit too ‘beginnery’ for myself.
Good review James, and I’m with Jeremy, you need to write a book 😉
Jack.
@Ben, oddly, I found the first few chapters a little more interesting — there’s something soothing about reading stuff that you’ve already picked up. I guess it really depends on what you expect from a book like this — it’s been written for novices but there’s probably something in there for everyone.
@Jeremy, Ha! Not any time soon my friend, I think the jQuery book market is somewhat saturated at the moment.
@James,
Well, I have the PDF anyway, so I’ll give it a read through. I know what you’re saying about reading stuff you’ve already picked up. Not only does it drive the stuff home, I find that more often than not, I’ll find one or two tidbits that I either missed before or never saw before.
This sounds like a good book for me as I still have lots to learn and going over some of the more basic stuff first would also be a comfort to me too. Thank you for sharing this and really like your site too.
I was super excited about jQuery after reading chapter 1.
Unfortunately, the experience was soured by buggy code samples. The lightbox example in chapter 4 didn’t work straight out of the book. (This issue is covered on the book’s errata page)
Even more annoying was when I tried the simple modal dialog example from chapter 7. I downloaded the example source files from the sitepoint web site.
I found that the example doesn’t work in Chrome or IE8. The authors tout jQuery’s cross browser strengths in chapter 1 and then cripple their example code with Firefox/Firebug specific javascript and CSS.
Even after removing the Firebug console debug code, the modal dialog still won’t work in Chrome or IE8.
I’ve gotten into Chapter 4 – and I can’t for the life of me figure out how to fix the lightbox example script to make it work right.
Perhaps I’m missing something really obvious here…….
Checked the errata page but that doesn’t seem to make it work for me either.
Otherwise – since I’m new to jQuery – so far so good – I’m enjoying the book.
I figured it out – there were 4 console.log statements in there that didn’t belong.
Once I removed them – the lightbox example works at it should.
I’ll see what happens with other examples as I work through the book.
All-in-all, in my opinion anyway, it’s a pretty good book to start learning jQuery.
This solves so many problems I didn’t even realize I had. For eg., we have a portal for the company behind 15 different blogs, and this creates a great way to showcase the catalog.
This is a very good review. I’m not a beginner in web development anymore, however I am only starting with jQuery (raw JS is not so new to me anyway). I must say that the knowledge I have about CSS helps me a lot understanding the usage of jQuery. To me, as a jQuery rookie this book seems excellent. I don’t mind if the code is not optimally written in some parts. The most important thing for me right now is to be able to have a good first contact with jQuery basics, to be able to continue myself. This book is not about writing optimal code, but it aims on helping a jQuery rookie to make the first steps and continue by himself with the basic accumulated jQuery knowledge. the authors indeed did a wonderful job.
BTW, I would definitely suggest this book to everyone, even to the greatest experts. It is never a wrong thing to have a book like this in your arsenal.
Oh, BTW… I am not saying the code in this book is not written optimally. I leave the judgement to more expert JS / jQuery people. I only wanted to point out at some comments about the code in the book that the author of this blog made. It is only important for me how I am able to understand and follow the book. In this aspect, this book is one of the best books in the field of web development I’ve read so far. Not to mention a very nice design and organization of the code (which you can download).
I found this book pretty readable but again like one of the commenters above, I was extremely disappointed to find some of the examples didn’t work in Chrome or IE. It really put some doubt into the work I’ve done learning this stuff.