YSlow is a Firefox plug-in which analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites. These rules are:
- Make Fewer HTTP Requests
- Use a Content Delivery Network
- Add an Expires Header
- Gzip Components
- Put CSS at the Top
- Move Scripts to the Bottom
- Avoid CSS Expressions
- Make JavaScript and CSS External
- Reduce DNS Lookups
- Minify JavaScript
- Avoid Redirects
- Remove Duplicate Scripts
- Configure ETags
Definitely worth checking out if you need to tweak every ounce of performance you can get on certain pages.
Igglo.co.uk has posted a collection of links for 15 interesting javascript scripts.
While none of the scripts are new they are all both nice and potentially useful for sprucing up your site or webapp. Some of the scripts aim at visual effects such as loading and fading an image or putting hot spots on a map, while others such as Lightbox are regularly mentioned on the irc channel. There are also updated versions of ubiquitous tools like a date picker calendar and auto complete.
These are not just snippets of code but full blown scripts, so you should get productive results from them right away, and all are free for anyone to use.
One of the most important features in JavaScript is the ability allow objects to inherit methods through the use of prototyping. Anyone who had a toolkit of JavaScript functions is well served by also putting to use prototypes to fill in the gaps where existing functions are missing, such as a simple String.trim() function.
A lot of prototyping toolkits exist, with Prototype (yeah, they stole the name) being the most popular one, but at 92KB, some consider Prototype a bit heavy for what they need. If you happen to be one of those people, then you may be interested in picking and choosing prototype methods from the following two resources.
The first is Svend Tofte’s Usefull Prototype Methods for JavaScript (sic). Svend’s collection of a dozen methods weighs in at a tiny 2KB, and it’s all modular enough that you can pick and choose the methods you like the most.
The second is Henlock’s Ten JavaScript Tools Everyone Should Have. I find his methods to be a bit more useful than Svend’s, and he mentions a few additional resources at the bottom of his page.
So what prototype methods are a must for you?
JavaScript Lint is an iteresting tool. You can check all your JavaScript source code for common mistakes without actually running the script or opening the web page.
Here are some common mistakes that JavaScript Lint looks for:
- Missing semicolons at the end of a line.
- Curly braces without an if, for, while, etc.
- Code that is never run because of a return, throw, continue, or break.
- Case statements in a switch that do not have a break statement.
- Leading and trailing decimal points on a number.
- A leading zero that turns a number into octal.
- Comments within comments.
- Ambiguity whether two adjacent lines are part of the same statement.
- Statements that don’t do anything.
JavaScript Lint also looks for the following less common mistakes:
- Regular expressions that are not preceded by a left parenthesis, assignment, colon, or comma.
- Statements that are separated by commas instead of semicolons.
- Use of increment (++) and decrement (–) except for simple statements such as “i++;” or “–i;”.
- Use of the void type.
- Successive plus (e.g. x+++y) or minus (e.g. x—y) signs.
- Use of labeled for and while loops.
- if, for, while, etc. without curly braces. (This check is disabled by default.)
JS Tidy is a simple form that allows you to paste a bunch of crummy or obfuscated JS code and have it formatted in a legible manner. This is pretty useful for those snippets you find that are all on one line or if you are trying to decipher the code behind Google’s latest toy.