Compact JavaScript for loop

This this if the iteration order doesn't matter. Try this:

for (var i = anArray.length; i--; ) {
   doSomething(anArray[i]);
}

It's smaller (by 1 character) and, in my opinion, more readable than:

var i = anArray.length;
while(i--) {
   doSomething(anArray[i]);
}

Enjoy!

Fast Javascript String Concatenation

There are many ways to join multiple strings together in JavaScript. The simplest one is by using the '+' operator. This is what almost everyone learns when they start programming in JavaScript:

'mac' + ' and ' + 'cheese'

The problem with this method is that some browser does not implement the '+' operator efficiently (in the case of IE, by using intermediate buffer) which makes the concatenation of many strings virtually impractical. The performance degradation is obvious when joining more than 10,000 strings.

The better way is to use array as buffer by storing each separate string as array elements and then use join() method on the array to get the resulting string. Some implementations of this method uses Array.length or Array.push to keep track of the next location to store the string:

var sb = [];
sb[sb.length] = 'mac';
sb[sb.length] = ' and ';
sb[sb.length] = 'cheese';
sb.join('');

or

var sb = [];
sb.push('mac');
sb.push(' and ');
sb.push('cheese');
sb.join('');

Both of these methods offer a magnitude of performance improverment over '+' operator, especially in IE. To go a little further, we can use a local variable to keep track of the last position. I get another 20 - 25% improvement over the above method in IE.

Update: IE8 now implements a faster string concatenation.

var sb = [], // Use this array as a string buffer
l = 0; // To keep track of the array length

sb[l++] = 'mac';
sb[l++] = ' and ';
sb[l++] = 'cheese';
sb.join('');

This method reduce the number of memory operations, in this case, Array.length or Array.push which, according to the spec, JavaScript runtime must traverse the prototype chain to look for length or push property, then executing a function call (in the case of push) as oppose to evaluation of local variable and one increment operation per string. Furthermore, your code will also be smaller.

A real-world experiment on elements of web 2.0

My recent post made an observation on the design elements of modern web. I was curious if I can actually create a design based on the observations made and the result is... (drum roll)... Phototinkr.com. A highly optimized online photo editor. Most of the design elements I recognized are applied to the UI design of the site.

The design principle of the application is based on Pareto principle, specifically, to analyze the photo editing tasks to find minimal set of editing options that suffice most of the editing requirements. For example, to place a text on the image, only three different sizes of text would satisfy most casual users.

Elements of web 2.0

From my observation, there seems to be a pattern in the modern web designs and here is a quick rundown of most common web 2.0 design elements:

• Be smooth: Use slight gradient filled color background
• High contrast: White is the color of choice for text-intensive area
• Well-rounded: Use of round corners is a must but don't over use it.
• Nice kuler: Color ideas can be found from one of the highest-rated color themes on kuler
• start small: De-capitalize the site name.
• Good prefix: Don't use i- or my- prefix. i- is already overused by Apple. The first introduction of my- to computing world I can recall is "My Computer" used in Microsoft Windows 95 (that's twelve years ago!) Luckily, e- was already outdated.
• Be information-savvy: put RSS, comments icons
• Consistent, consistent, consistent: Always be consistent in the design and user interaction. This seems to follow from the UI design best practices.

Program to obfuscate (and leave the rest to JavaScript interpreter?)

As many of you may know, different JavaScript coding constructs yield different compresssion ratio when compressed by a JavaScript obfuscator.

Are there any correlations between the compression ratio and other properties of the code? Specifically, will the constructs that yield the best compression ratio will also have the smallest size or the fastest running code?