Matt Snider JavaScript Resource

I went through today and revisited my first article, Development Tools. With the advent of new browser versions and the plethora new development tools, plus improvements on existing tools, it was definitely time to take another look. Most notably, I mention two new browsers IE 8 and FireFox 3, development tools for those browsers, and development tools for Opera and Safari 3.

I have also spent some time working on the Visual Graphing tool, adding a title and the ability to subscribe to Custom Events. I have created a new test page, where I will keep my most up-to-date beta code-base, and will be updating it occasionally.

http://blogs.pathf.com/agileajax/2007/09/javascript-styl.html

Brian Dillard composed a list of different style-guides, which are more a list of best practices and coding conventions. Most of the article isn’t all that relevant. If you jump to the bottom you’ll find the following list of style guides:

• Dojo Style Guide
• Ajaxian commentary on Dojo style guide
• Crockford style guide, part 1
• Crockford style guide, part 2
• Ajaxian commentary on Crockford style guide
• Mozilla style guide

There is a lot to read and these articles are somewhat dense, but if you find the time to read and understand them, you will only become a better JavaScript developer.

I finally had some time/need to explore a new JavaScript compressor and had been hearing good things about the YUI compressor, so I took a look at it. The YUI compressor not only compresses (slightly better than JSMin) but claims to do some safe obfuscation. Altogether it claims to save an additional 18% over JSMin (5-10% over rhino), which is about what I experienced in my testing today. That is a substantial savings when your project uses over 200kb of JavaScript, such as Mint. I am pleased to say that I have now, not only met my 250kb library file goal, but surpassed it by another 30kb, by only switching my compression technology.

YUI compressor is a JAVA jar that requires JAVA 1.4. If you have JAVA in your classpath, you can use the following command:

java -jar pathToJar/yuicompressor-2.2.jar ––charset UTF-8 -o pathToOutput/filename pathToInput

If you use ant to build, then you might find the following helpful:

<java jar=”pathToJar/yuicompressor-2.2.jar” fork=”true” failonerror=”true” output=”pathToOutput/filename”>
	<arg value=”––charset” />
	<arg value=”UTF-8″ />
	<arg value=”pathToInput/filename” />
</java>

One important thing to note is that if you don’t include the “––charset <charset>” option, the compressor with print

“\n[INFO] Using charset UTF-8″

at the beginning of each file, which will break your JavaScript.

Additional Documentation

Another Great Post by Agile Ajax:

Useful OO JavaScript resources

I just read a good article by Dustin Diaz (formerly of YAHOO) about detecting where elements are in regards to scrolling and the viewport. It is simple and very powerful, so I thought I would share it with you. Also, I am overworked right now and have not had time to write any material of my own :(.

element-scroll-into-view

Before a craftsman can truly ply his trade, he must be equipped with the proper tools; Web Application Developers (WAD) are no exception. Below is a list of the tools that I have found to be most useful.

Firefox by Mozilla, Inc.

http://www.spreadfirefox.com/?q=affiliates&id=199155&t=218

You may think Firefox is just a browser, but as a WAD you need a W3C compliant browser and Firefox is the leading development environment. The browser complies with almost every web standard, which every web application should initially be built against, before attempting to support non-compliant browsers. In addition, there are numerous extensions that can be downloaded to aid in development; here are a few:

FireFox 3
http://www.mozilla.com/en-US/firefox/all-beta.html

Download the Beta for the next version of FireFox and begin updating your website to support it. As of writing this, YUI has some known issues with FF3, but I expect these errors to be fixed in version 2.5.2 or higher.

Firebug by Joe Hewitt
http://www.getfirebug.com/ or
https://addons.mozilla.org/firefox/1843/

For the Mozilla Firefox browser, FireBug is the most powerful tool in a WAPs arsenal. With FireBug you can monitor AJAX requests, view and edit live CSS, delve into the DOM, mark breakpoints and step through JavaScript, and monitor HTTP requests all in one place. Since the release of version 1.0, FireBug has become my defacto development tool.

Venkman (Mozilla JavaScript Debugger) by James Ross, Robert Ginda
https://addons.mozilla.org/firefox/216/

This was the original FireFox debugger, a precursor to Firebug, and is also great for marking breakpoints and stepping through JavaScript code. I used to experience an issue with this extension where closing and re-opening it, would crash the browser. I am not sure if this is still true, as I have not needed to use this extension for over a year. I used to occasionally use it as a backup for or in parallel with Firebug (you can set breakpoints in each tool during an AJAX call, if the callback function might be executed more than once).

Web Developer Toolkit (WDT) by Chris Pederick
https://addons.mozilla.org/firefox/60/ or
http://chrispederick.com/work/webdeveloper/

This toolbar is filled with a lot of little features that increase productivity. Some of the most helpful features that make this tool indispensable are: live cookie editing, outlining elements by tag type, and resizing to browser to support different resolutions. Spend some time and get to know the features, and I am sure you will find something that you cannot live without.

MeasureIt by Kevin Freitas
https://addons.mozilla.org/firefox/539/

If you ever need to do anything with layout this tool will allow you to quickly measure page elements and white spaces. Although, I almost always just use FireBug, there has been occasion when FireBug did not report accurately or it is far easier to instantly select the area I want to measure, instead of adding dimensions from FireBug.

View Source Chart (VSC) by Jennifer Madden
https://addons.mozilla.org/firefox/655/

This is much more powerful than the standard ‘view the page source’, as it is more readable and includes elements that were rendered by DOM scripting and AJAX. Especially, useful if you want to see if an invisible element was actually added to the DOM.

Y-Slow by Yahoo, Inc.
http://developer.yahoo.com/yslow/

This is a simple tool that analyzes web pages and determines which, well-documented changes, you can implement to drastically improve the performance of your Web Application.

Internet Explorer (IE) by Microsoft

If you hoped you could simply develop in FireFox and call it a day, I am afraid you are very wrong. Although, it is far more efficient to not develop cross-browser, compliant applications in IE, you will need to support IE before launching your Web Application, as IE is the largest market segment. And to make matters worse you also should support the last few versions of IE, as many IE users are average computer users and often corporate computer users are mandated to use IE because of company intranets.

Microsoft Script Debugger (MSD) by Microsoft
http://www.microsoft.com/downloads/details.aspx?FamilyID=2f465be0-94fd-4569-b3c4-dffdf19ccd99&DisplayLang=en
This is a must have for when you get to supporting IE (ideally, this will be one of the last steps in your development cycle). You can do a lot with script debugger, including JavaScript breakpoints and variable watching. Once you download the add-on, additional usage information can be found at:

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/sdbug/html/sdbug_1.asp

Fiddler by Microsoft
http://www.fiddlertool.com/fiddler/

See most network traffic in and out of your computer. This is useful for http request and AJAX monitoring in IE, although it seems to track more than just IE traffic.

Multiple IE (MIE) by Manfred Staudinger
http://tredosoft.com/Multiple_IE

You still need to support IE 6 for about 4-5 more years and this tool allows you to run an IE 6 instance without launching a virtual PC. With it you can see how your pages behave in IE 3, 4.01, 5.01, 5.5, and 6, without interfering with IE 7. The only problem I have ever encountered is a memory leak having to do with older IE versions and displaying elements with the opacity style.

IE Developer Toolbar
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

Although, it has a long way to go to replace the Web Developer Toolbar of FireFox, this is must-have tool for IE 6+. You can outline and hot-click on DOM nodes, view and navigate through the DOM, measure page elements, and more.

Internet Explorer 8 Beta

IE is getting closer complying with the standards every day. IE 8 is Microsoft’s challenge to FireFox, and the Beta looks better and better each week. By default IE 8 will be standards compliant, but Microsoft is introducing a new meta tag, to allow rendering in other versions of the browser (perhaps we will no longer need Multiple-IEs).

DebugBar for IE8
http://www.debugbar.com/download.php

This is the latest tool in your arsenal, combining IE Developer Toolbar and Microsoft Script Debugger to have a tool that is almost as powerful as FireBug. This finally makes IE develop efficient .

Other Tools

Opera 9 Developer Console
http://dev.opera.com/tools/

If you need to support Opera, you will occasionally run into JavaScript errors that are not triggered by other browsers. In better develop and debug in Opera, I have found this tool, incredibly useful.

Safari 3 Web Inspector
http://www.macosxhints.com/article.php?story=20030110063041629

This is part of Safari 3, and if you have not already upgraded, you will need it, in order to use this tool. This tool allows you to inspect the DOM, which is not as useful as tool in other browsers, but is very helpful if you want to support Safari. If you also need to support earlier version of Safari, I suggest you test and fix Safari 3 first, then run separate Safari versions installations and see if it is fixed, before trying to debug in those less hospitable versions.

JSLint by Douglas Crockford
http://www.jslint.com

Run JavaScript through Crockford’s tool before releasing to production and will help prevent many easy-to-overlook errors. Also, if your code validates with JSLint you can use a minimizing or obfuscation tool to reduce and protect your code.

JSMin by Douglas Crockford
http://www.crockford.com/javascript/jsmin.html

jsmin.exe < fileToCompress.js > fileToStoreCompressedJS.js

If you have more than 50k worth of JavaScript, then script downloading becomes an issue on dialup and some DSL modems (if you have more than 200k of JavaScript, then you might have issues on high-speed connections as well). To reduce script download times you can combine your JavaScript into fewer files, and then remove needless white spaces and comments from your production code. JSMin is a command-line application that usually reduces the file size by 33% and allows you to properly comment your development code-base, whilst hiding those comments from everybody else.

If you just have one JavaScript file or want to see an online compression tool, try:

http://www.brainjar.com/js/crunch/demo.html

CSSTidy
http://csstidy.sourceforge.net/

csstidy.exe < fileToCompress.css --template=highest > fileToStoreCompressedCSS.css

This is the CSS version of JSMin. Use this to remove needless white spaces and comments from your production code. Some online CSS minimizers are:
http://www.cssoptimiser.com/index.php
http://www.cssdrive.com/index.php/main/csscompressor/

YUI Compressor
target=”_blank”>http://developer.yahoo.com/yui/compressor/

YUI Compressor combines JavaScript and CSS compressor into one, easy-to-use tool. See the website above, for examples on how to use it. I now use this instead of both CSSTidy and JSMin.