JavaScript Tool Kit

Andrew Alba • March 3, 2009

html

I have put together a "tool” kit of sorts to help anyone who is just starting out with scripting with javascript. I used javascript sparingly the first few years that I was scripting web applications and sites and it wasn't until the last year that I really became infatuated with the scripting language.

My understanding of javascript has increased as I have scoured google.com looking for functions and frameworks to fulfill my page or project needs, but I still feel there is a lot more to learn. I have decided to create this list to help anyone who might just be starting out and needs some direction.

  1. Pick up a copy of "DOM Scripting: Web Design with JavaScript and the Document Object Model” by Jeremy Keith. This book is not easy enough to understand, but it also reminds new javascript users about graceful degradation. Before using any framework, I used many of the scripts in the book religiously. (find the book at http://www.friendsofed.com/book.html?isbn=9781590595336)
  2. Use good web developer tools. Depending on your browser, make sure you are using web developer tools and checking for errors. Firebug is very popular for Firefox browser, but I still prefer the Web Developer tool bar. Microsoft offers a web developer tool bar for free download as well, but this does not have any javascript debugging included. You will need to enable javascript debugging in the IE browser and I would suggest downloading the Microsoft Debugging tool. (Firefox Web Developer: https://addons.mozilla.org/en-US/firefox/addon/60, Firefox Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843 and Microsoft Script Debugger: http://www.microsoft.com/Downloads/details.aspx?familyid=2F465BE0-94FD-4569-B3C4-DFFDF19CCD99&displaylang=en)
  3. Never depend on javascript. Good mark up will always gracefully degrade so that the end product is accessible and usable.
  4. Use the javascript validator at http://jslint.com. Douglas Crockford knows his javascript and his validator (even though it is strict) will help you write good script.
  5. Once your javascript validates, you can minify your script using one of the many javascript compressor/minification tools available. I have used http://javascriptcompressor.com/ with the Base62 encode and shrink variables checked and it has worked well. Another that I just started using is Closure Compiler found here: http://code.google.com/closure/compiler/
  6. Once you are comfortable with javascript, use a framework to speed development. There are several frameworks available such as Jquery, YUI, Prototype, Dojo, Mootools, etc. Find the framework that best suits your needs and learn to use it.

I hope this toolkit will help you create accessible and usable applications. I might add to it as I think of more, but this is a great start (I know I wish I would have had it to start with).