In This Chapter

Cleaning up with JSLint

Playing with JSFiddle

Making it pretty with JSbeautifier

Making your JavaScript files smaller

“Never underestimate the power of a simple tool.”

— Craig Bruce

JavaScript has more libraries, resources, and helpful tools for working with it than for any other programming language. This chapter introduces ten of the best resources for helping you write more and better JavaScript.

Don’t forget to visit the website to check out the online exercises relevant to this chapter!

JSLint

JSLint, created by JavaScript super-genius Douglas Crockford, is a code checker that is designed to tell you where your code has problems — and not just the kind of problems that would generate errors.

JSLint, shown in Figure 21-1, will tell you about things that thousands of JavaScript programmers do all the time, but that are problematic for one reason or another. If your code passes JSLint’s tests, it’s probably some pretty good code.

JSFiddle.net

JSFiddle, shown in Figure 21-2, is an online program for running web applications in a test environment. When you go to JSFiddle.net, the first thing you see is a grid with four panes:

• One for HTML
• One for CSS
• One for JavaScript
• One for Results

Enter the appropriate type of code into any of the first three boxes and press the Run button, and the results will be displayed in the Results pane.

With JSFiddle, you can even save your fiddles and email the urls to other people to check out.

JSBin

JSBin (see Figure 21-3) is a code-sharing site that allows you to write code while other people watch you. Whether you have exhibitionist tendencies, you’re teaching a junior developer, or you’re collaborating with other programmers on a project, the functionality in JSBin can be very helpful for working out bugs, getting feedback, and sharing code.

javascriptcompressor.com

The smaller your JavaScript files are, the faster they’ll load. JavaScriptCompressor.com, shown in Figure 21-4, has a window where you can drop your JavaScript. When you press Compress, a new version that’s functionally the same as your original code, but compressed, shows up in the lower window. Not only does the compressed code take up less disk space and bandwidth, it’s also obfuscated, to hide its inner secrets from prying eyes.

jsbeautifier.org

JSBeautifier (see Figure 21-5) is an online tool that takes your sloppy JavaScript and makes it pretty. Some of the techniques that it uses to beautify code include

• Inserting new lines
• Breaking lines of chained code
• Inserting spaces before conditional statements
• Making indentations standard throughout the script

JavaScript RegEx generator

JavaScript Lab’s JavaScript RegEx Generator (www.jslab.dk/tools.regex.php ), shown in Figure 21-6, is a user-friendly form for pointing and clicking your way to writing regular expressions. Simply click some buttons, enter text to match, set some options, and your regular expression shows up at the bottom.

JSONformatter

The JSON formatter and validator (http://jsonformatter.curiousconcept.com), shown in Figure 21-7, allows you to paste in unformatted JSON code, such as the code you would get from copying from the Chrome Developer Tools. It then makes the code pretty and makes sure that it’s valid.

jshint.com

JShint (see Figure 21-8) is a tool that helps you detect errors and potential problems in your JavaScript. In addition, it will give you useful information about your JavaScript code as you write it.

Mozilla Developer Network

The Mozilla Developer Network’s JavaScript section (https://developer.mozilla.org/en-US/docs/Web/JavaScript) is an essential resource for information about everything having to do with JavaScript. Its JavaScript resources, shown in Figure 21-9, include reference material, tutorials, articles, and demos for programmers at every level.

Douglas Crockford

Douglas Crockford is a hero to many JavaScript programmers. His website (http://javascript.crockford.com), shown in Figure 21-10, has a great collection of free videos on every aspect of JavaScript. These videos are essential to a programmer who is looking to move past beginner and into the more advanced levels of JavaScript expertise.