Book review: The Art & Science Of JavaScript

A while ago I received a book which I had anticipated to have the chance to read: The Art & Science Of JavaScript.

Introduction

First time I heard about it was when Dan Webb mentioned it in his talk at @media JavaScript and we discussed it shortly afterwards; he really made me curious about the book. While some JavaScript books, usually with one or perhaps two authors, build things from scratch where each chapter is taking a concept further to the end chapter summarizing it all, this one is completely different. In this book each author has one chapter each, to write about widely different topics totally unrelated to each other. It doesn't have any ambition to have one single and huge story line, but is instead basically a JavaScript goodie bag. :-) It seems like everyone of the author has found a topic which amuses them, and just went off on respective subject. It's a bit like:

Hey, canvas seems cool, let's delve into that.

The authors are:

The book itself

Let's just briefly start with some hardware talk: SitePoint create beautiful books, with nice colors, pictures and conventions to make the reading as smooth and enjoyable as possible for you, dear reader. One thing baffled me, though, and that was that for each chapter, there's no information about who has actually written it; not in the table of contents nor at the beginning of each chapter. The chapter contents themselves offer some clues, and knowing some of the authors, I had a pretty good grasp about who had written what, but I still find it weird.

The chapters

The book consists of seven chapters, each written by a different author, and vary from table-scripting to canvas coding and metaprogramming with JavaScript. I thought I'd briefly cover each chapter below and my take on it.

1. Fun with Tables

This chapter starts with explaining that you can access elements with document.getElementById. "Oh, man, I'm in for a long boring ride", I thought, but it quickly evolved into some advanced scripting with table elements, such as client-side sorting and drag and drop support. Having spent way too much work with tables and their "magic" throughout the years, I generally refrain from them, and will continue to do so. However, if you're bound to create an advanced table for an intranet or so, this is definitely the chapter to read to get some inspiration.

2. Creating Client-side badges

Chris Heilmann was written a number of blog posts and articles about how to create and control client-side badges to present in your, or any other, web site. What I like about Chris' writing is that unobtrusiveness and accessibility is heavily emphasized, leading to better practices and better code. This chapter is a good introduction to implement something in the above-mentioned manner, and it also contains an explanation of how JSON can help you get content cross-domain (since that is not possible using XMLHttpRequest). It also takes failed connections to third party content providers into account, which is a simple yet important thing to take into consideration.

3. Vector Graphics with canvas

To be honest, I haven't really had any real-world scenario where using the canvas element has been an alternative option as a solution, but it is indeed a highly interesting technology, offering vector-based coding on the client side. This chapter starts with coding simple drawing lines, and then delves into creating pie charts and assorted shapes. What about Internet Explorer then, which doesn't support the canvas element? The fantastic solution ExplorerCanvas, by fellow Swede Emil A Eklund (now with Google), is mentioned and it is a script which transforms your canvas code into Vector Markup Language, VML, which works in IE.

4. Debugging and Profiling with Firebug

Most likely, each and everyone of you are using Firebug (and if you aren't, you should. Now!). This part of the book covers general debugging and profiling, and I think it had one or two things which I had overlooked. One thing bothered me, though, and that was that the author suggested to leave in the ultra-lite edition for all web browsers, just in cause you still left a console call in there somewhere. I definitely disagree with this: either have a deploy script that removes such things, or just use your editor to find and remove such occurrences. Shipping something with superfluous code is just a case of patching, instead of fixing the actual problem.

5. Metaprogramming with JavaScript

This chapter is golden. Dan Webb is da man! What he does here is brilliant, and he completely breaks down JavaScript and explains how it actually works. How to check what an object consists of, what an object actually is and using closures to get proper contexts to work in. And by doing all of this, he reveals how truly powerful JavaScript is, and how you can use what some consider to be its shortcomings to instead create truly marvelous things. Such a thing as self-learning code is great, and it will make your code run considerably faster. It does turn into a little Prototype-pimping at the end, but it's ok, since it still is on topic with the nature of the chapter, and it's actually show-casing how it all could be used in larger real-world situations.

6. Building a 3D Maze with CSS and JavaScript

To start with, this chapter is most likely something that you will never ever have to consider. That being said, it is mightily impressive how James is building a 3D maze game with just JavaScript and CSS. I thought he'd resort to canvas and some heavy scripting to tweak vectors, but this is just CSS. What he does is using how borders are rendered in web browsers, and completely adapts them to create paths and corridors. Doing things like this sincerely shows that the sky is (perhaps) the limit.

7. Flickr and Google Maps mashups

In the concluding chapter of the book, Simon offers a basic introduction of creating nice widgets with Google Maps and Flickr. It kind of revisits the concepts in the Client-side Badge chapter with getting external content through JSON, but I believe people who have, for instance, never created something with Google Maps will appreciate this explanation of how to start out with it. Something slightly disappointing, though, is that he occasionally uses inline styling and events on HTML elements. Maybe it's just to show how something can be achieved, but as we ll know, people copy-and-paste code, meaning that it will spread like wildfire. Another thing is that his usage of filter in the CSS for Internet Explorer is the old version of having filters in IE 4-5.0, where there's a much more improved, performance-wise, option since IE 5.5. However, all in all, it is a nice chapter going through the steps necessary to create a compelling presentation of maps and pictures together; two of my favorite things!

Summary

Usually when I have read a book, I give it away, since I want to spread the knowledge, and that it is, most of the times, not of much use to me anymore. However, with this one it's hard: this book is a keeper! If, for no other reason, to dig down into Dan's excellent chapter when I feel I have to exercise the cogs in my brain. :-) If you want something to read, that will show and introduce you to concepts you're not normally getting in contact with in your everyday lives, this is definitely a recommended read!
Posted in Developing,JavaScript,Reviews/tests,Technology |

8 Comments

  • Thanks for the great review Robert! One thing — the description of who authored which chapter is listed in the preface, under the "What's Covered In This Book?" section. We'll definitely take your feedback into account though, and try and make this information more obvious in future reprints and other books that follow the same authoring approach.

    It was a really fun book to work on, and we're all very proud of it.

    Cheers

    Matt

  • [...] Book review: The Art & Science Of JavaScript – Robert’s talk – Web development and Internet tr… Rober Nyman reviews “The Art & Science Of Javascript” (tags: book article review js javascript) [...]

  • Stefan Van Reeth says:

    Why on earth this publisher spends money on advertising? Just give Robert a copy ;).

    Serously, judging by what I read here I think this book sounds mighty interesting. Thx for pointing it out.

  • Teddy Zetterlund says:

    I haven't had time to read much more than Dan Webb's chapter about metaprogramming in JavaScript but I can say this. Dan Webb's chapter only, makes this book worth every penny!

  • Robert Nyman says:

    Matthew,

    Thanks, I'm glad you liked it, and thanks for publishing a very interesting book! Looking through the preface I found information about the authors, but it just felt a bit hidden away.

    Stefan,

    Ha ha! As mentioned in this post, if for no other reason, get it to read Dan Webb's excellent chapter.

    Teddy,

    Yes, it definitely does make it worth it. :-)

  • Hi Robert, thanks for your feedback. As you may have guessed, I am the party responsible for the firebug chapter. I agree the author attributions could have been clearer in the text.

    Regarding live use of firebug lite, I guess it's a matter of attitude and context. For the small projects I work on, I find it's just easier and more agile to leave it in. It makes quick changes safer. Not so much for a large production site where you have significant QA effort prior to each release.

  • Robert Nyman says:

    Michael,

    Thanks for reading!

    I agree that it's definitely a matter of context, although in general, my stance is that code used for logging and development error checking doesn't really belong in a deployment environment.

    Personally, I'd prefer breakpoints and similar to check code live instead.

  • [...] a bit disappointed that there was no real eye-opener; not anything like Dan Webb’s chapter in The Art & Science of JavaScript. Most likely, however, this is due to me having adapted the ideas and mindsets described above from [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>