The following article is the first in an online series based on excerpts fom jQuery: Novice to Ninja, by Earle Castledine & Craig Sharkie (2010, SitePoint).
Even when cross-browser problems are relatively simple to handle, you always need to maintain a mental knowledge bank of them. When it’s 11:00 p.m. the night before a major project launch, you can only hope you recall why there’s a weird padding bug on a browser you forgot to test!
The jQuery team is keenly aware of cross-browser issues, and more importantly they understand why these issues occur. They have written this knowledge into the library—so jQuery works around the caveats for you. Most of the code you write will run exactly the same on all the major browsers, including everybody’s favorite little troublemaker: Internet Explorer 6.
This feature alone will save the average developer a lifetime of headaches. Of course, you should always aim to keep up to date with the latest developments and best practices in our industry—but leaving the task of hunting down obscure browser bugs to the jQuery Team (and they fix more and more with each new version) allows you more time to implement your ideas.
Making today’s technologies cross-browser compliant is all well and good, but jQuery also fully supports the upcoming CSS3 selector specification. Yes, even in Internet Explorer 6.0! You can gain a head start on the future by learning and using CSS3 selectors right now in your production code. Selecting elements you want to change lies at the heart of jQuery’s power, and CSS3 selectors give you even more tools to work with.
One noteworthy utility is the supports function, which tests to see if certain features are available on the current user’s browser. Traditionally, developers have resorted to browser sniffing—determining which web browser the end user is using, based on information provided by the browser itself—to work around known issues. This has always been an unsatisfying and error-prone practice. Using the jQuery supports utility function, you can test to see if a certain feature is available to the user, and easily build applications that degrade gracefully on older browsers, or those not standards-compliant.
jQuery has already been used to make some impressive widgets and effects, some of which were useful enough to justify inclusion in the core jQuery library itself. However, the jQuery team wisely decided that in order to keep the core library focused, they’d separate out higher-level constructs and package them into a neat library that sits on top of jQuery.
That library is called jQuery User Interface (generally abbreviated to just jQuery UI), and it comprises a menagerie of useful effects and advanced widgets that are accessible and highly customizable through the use of themes. Some of these features are illustrated in Figure 1.1, “A few jQuery UI widgets”.
Figure 1.1. A few jQuery UI widgets
Accordions, sliders, dialog boxes, date pickers, and more—all ready to be used right now! You could spend a bunch of time creating them yourself in jQuery (as these have been) but the jQuery UI controls are configurable and sophisticated enough that your time would be better spent elsewhere—namely implementing your unique project requirements rather than ensuring your custom date picker appears correctly across different browsers!
We’ll certainly be using a bunch of jQuery UI functionality as we progress through the book. We’ll even integrate some of the funky themes available, and learn how to create our own themes using the jQuery UI ThemeRoller tool.
The jQuery team has taken great care in making the jQuery library extensible. By including only a core set of features while providing a framework for extending the library, they’ve made it easy to create plugins that you can reuse in all your jQuery projects, as well as share with other developers. A lot of fairly common functionality has been omitted from the jQuery core library, and relegated to the realm of the plugin. Don’t worry, this is a feature, not a flaw. Any additional required functionality can be included easily on a page-by-page basis to keep bandwidth and code bloat to a minimum.
Thankfully, a lot of people have taken advantage of jQuery’s extensibility, so there are already hundreds of excellent, downloadable plugins available from the jQuery plugin repository, with new ones added all the time. A portion of this can be seen in Figure 1.2, “The jQuery plugin repository”.
Figure 1.2. The jQuery plugin repository
Whenever you’re presented with a task or problem, it’s worth checking first to see if there’s a plugin that might suit your needs. That’s because almost any functionality you might require has likely already been turned into a plugin, and is available and ready for you to start using. Even if it turns out that you need to do some work yourself, the plugin repository is often the best place to steer you in the right direction.
Keeping Markup Clean
Separating script behavior from page presentation is best practice in the web development game—though it does present its share of challenges. jQuery makes it a cinch to completely rid your markup of inline scripting, thanks to its ability to easily hook elements on the page and attach code to them in a natural, CSS-like manner. jQuery lacks a mechanism for adding inline code, so this separation of concerns leads to leaner, cleaner, and more maintainable code. Hence, it’s easy to do things the right way, and almost impossible to do them the wrong way!
And jQuery isn’t limited to meddling with a page’s existing HTML—it can also add new page elements and document fragments via a collection of handy functions. There are functions to insert, append, and prepend new chunks of HTML anywhere on the page. You can even replace, remove, or clone existing elements—all functions that help you to progressively enhance your sites, thus providing a fully featured experience to users whose browsers allow it, and an acceptable experience to everyone else.
Countless big players on the Web are jumping on the jQuery bandwagon: IBM, Netflix, Google (which both uses and hosts the jQuery library), and even Microsoft, which now includes jQuery with its MVC framework. With such a vast range of large companies on side, it’s a safe bet that jQuery will be around for some time to come—so the time and effort you invest in learning it will be well worth your while!
jQuery’s popularity has also spawned a large and generous community that’s surprisingly helpful. No matter what your level of skill, you’ll find other developers patient enough to help you out and work through any issues you have. This caring and sharing spirit has also spread out to the wider Internet, blossoming into an encyclopedia of high quality tutorials, blog posts, and documentation.
What’s the downside?
First, as far as size is concerned, jQuery is lightweight. The core jQuery library has always had a fairly small footprint—about 19KB for the basics, less than your average JPG image. Any extras your project needs (such as plugins or components from the jQuery UI library) can be added in a modular fashion—so you can easily count your bandwidth calories.
But enough talk: time for jQuery to put its money where its mouth is!
Check out the book and buy it online at jQuery: Novice to Ninja, by Earle Castledine & Craig Sharkie
Sporting a Masters in Information Technology and a lifetime of experience on the Web of Hard Knocks, Earle Castledine (aka Mr Speaker) holds an interest in everything computery. Raised in the wild by various 8-bit home computers, he settled in the Internet during the mid-nineties and has been living and working there ever since. As co-creator of the client-side opus TurnTubelist, as well as countless web-based experiments, Earle recognizes the Internet not as a lubricant for social change but as a vehicle for unleashing frivolous ECMAScript gadgets and interesting time-wasting technologies.