The Learning jQuery code browser

This year, Karl and I completed the third edition of Learning jQuery. We're very excited about the updates, which bring the book in line with the newest features of the library. We also used this opportunity to take our reader feedback into account. Exercises were added to the end of each chapter. The examples readers found confusing were elaborated on or rewritten. The biggest change, though, related to the structure of the second half of the book and the code examples therein.

Readers liked the first seven chapters of the earlier editions, which build up the basic concepts of the jQuery library. Each uses a self-contained web page, with all the code examples in the chapter relating to that page. In the second half of the book, though, all of the examples referred to the same fictional web site. While this gave a nice "real-world" feel to these examples, in practice readers were confused by multiple chapters requiring the same code base. It was also difficult for readers to view the effect of just one example in isolation from everything else that was going on. In addition, to accurately represent the code to the user, many pages at the end of the chapter needed to be devoted to code listings that were largely repetitive—pages that could instead be used for more explanatory prose.

To remedy this, the second half of the book was completely rewritten. Rather than being structured around concepts such as "tables" and "forms," the chapters now mirror the structure of the first half of the book, stepping through the basic jQuery building blocks, but this time from a more advances perspective. This approach allowed us once again to use small web pages for each chapter, with all code examples for a chapter working on the same content. What remained was the problem of handling the large code listings. A code download is provided with the book, so we felt a printed copy of all code was not particularly helpful to the reader. Instead, we wanted a way for the reader to be able to execute and experiment with the code at any stage of its development in a chapter. We also wanted to present this in a visually helpful way.

The result is the Learning jQuery Code Browser. This tool allows readers to view any listing in the book in the context of the rest of the code. They can see exactly which lines of code have changed, view the HTML and CSS the script applies to, and view the result of that code when run against the page. This tool was built quite quickly, and is hardly a paragon of engineering, but nonetheless readers have found it very useful already. Creating it required work in HTML, CSS, PHP, and JavaScript, including the incorporation of several third-party libraries. This makes it worthy of some study as an example. In an upcoming series of articles, I'll be breaking down the pieces and parts of the code browser, discussing how each component works. Topics will include:

• Building a flexible layout with jQuery splitters and accordions
• Combining HTML, CSS, and JavaScript on demand
• Simple navigation UI widgets
• Managing browser history and the back button
• Syntax highlighting with GeSHi
• Writing a simple "diff" script to highlight changed lines of code