Even if you are a relative newcomer to web development, if you have heard of the term Web Standards then you are probably also aware of the HTML Validator and CSS Validator. Both of these are tools provided by the World Wide Web Consortium (W3C, for short). While automation is no replacement for human discernment when carefully crafting code, when used wisely the W3C validators can be a great way to catch bugs that we might otherwise overlook (after all, nobody’s perfect). I can personally attest to having saved countless hours of manually picking through code by using automated help.
In web development, the term Web Standards typically refers to what has been affectionately dubbed the “holy trinity” by seasoned code veterans. These can be thought of as closely related, yet distinctly separate layers: data, presentation, and behavior (or “behaviour” for our non-US readers). These consist of the three core front-end languages: HTML, CSS, and JavaScript. One might assume that since HTML and CSS validation are already a priority to the W3C, JavaScript would be as well. Sadly, this is not the case.
Thankfully, others have risen to the challenge to help bridge this perceived gap in quality assurance and verification. In recent years, many helpful browser-based tools have hit the scene, the most popular of which are the Web Developer Toolbar and Firebug add-on extensions for Firefox. While these are indeed invaluable, the JavaScript tool I find myself using the most is Douglas Crockford’s JSLint…
Crockford is one of the world’s leading experts in JavaScript, and is employed by Yahoo as their lead JavaScript Architect. He created JSLint after seeing numerous developers frustrated with the inherent fluidity of the syntax. Coupled with inconsistencies in browser interpretation, this loosely typed methodology can often be difficult to master. Yet, properly understood, JavaScript can be quite a powerful language.
In a nutshell, JSLint is to JavaScript what the W3C’s validators are for HTML and CSS. By cutting and pasting JavaScript code into JSLint, you can check not only for outright errors, but also for scripting best practices. For instance, if you want to strictly check if something is true or false, you should use the triple equal sign (===) evaluator. A common mistake is using two equal signs, which will allow things that are truthy or falsey to pass. For instance, 1 will evaluate to true, and 0 will evaluate to false (read more).
Additionally, when declaring variables, JavaScript will let you get away with lazy declarations like: foobar = value. This is a bad habit, because it leaves the variable exposed in the global scope, allowing all functions have access to it. Unless that is your intention, the best way to declare a variable would be: var foobar = value. Using the var keyword ensures that a variable is available only within its parent function. Otherwise, your poor variable is as vulnerable as the mama deer in the movie Bambi. JSLint will make these types of suggestions for you, helping save potential headaches.
A huge passive benefit of JSLint is that it basically forces you to write well structured code. Much like XHTML requires tighter adherence to best practices than HTML, JavaScript that passes JSLint is nearly 100% perfect. This makes it incredibly easy to obfuscate that code using a compressor such as Dean Edward’s Packer utility.
This allows tremendous savings in overall size, helping pages to load and render faster than if you used an uncompressed file. For example, at the time of this writing, the jQuery library (version 1.2.1) is 77kb without compression, but after being minified by Packer, it weighs in at a lean 26kb. That amounts to a whopping 66% reduction. With gzip it can be reduced even further to 14kb, shaving 82% off the original size.
While it takes self discipline not to cut corners when writing your code, it is easy to see that diligence pays off in the end. Since JavaScript is interpreted by the browser at runtime (not compiled beforehand), every last bit of optimization counts. In no other programming language is the impact on user experience so immediate.
Whether you are a JavaScript newbie or guru, I think you will agree that JSLint is a valuable weapon in any scripter’s arsenal. I think of it like having Merlin look over your shoulder while trying to conjure up JavaScript magic. It is the second best thing to having Mr. Crockford check your JavaScript code in person. Once you make JSLint a regular part of your development process, you will wonder how you ever did without.