Website Usability Articles

I found a great collection of no-nonsense, scientificly tested Usability papers released once or twice a year. A must read for any software or website designer!

http://www.surl.org/usabilitynews/archives.asp

for -> in loops with JavaScripts

I love for loops... don't think I could live without them! The problem with JavaScript is that you don't always have a numerically indexed array of elements that you need to loop through. These are often referred to as Associative Arrays. JavaScript simply treats them as Objects. They are VERY simple to use and usually easy to loop through... simply use the for -> loop syntax:

var fruitColorArr = {
'red':'apple',
'yellow':'banana',
'green':'lime'
};
for(var i in fruitColorArr){
alert(fruitColorArr[i]+"'s are "+i);
}

This will result in three alerts:
"apple's are red", "banana's are yellow", and "lime's are green".

Simple right? Wrong!!! There is a little problem called prototyping that can destroy this whole scenario! Let's imagine someone added the following JavaScript to their page to supplement the Object object:

Object.prototype.test = function(){alert('hi');}

It's a great feature of JavaScript and attests to it's amazing flexibility.... It gives us the power to call:

fruitColorArr.test();

And have it alert "hi".

The problem arises when you try to then run the for in loop on the fruitColorArr... We get the following alerts:

"apple's are red",
"banana's are yellow",
"lime's are green",
"function () {
alert("hi");
}'s are new"

Seems relatively harmless for this example, but it can be disastrous in a larger application, not to mention really hard to tack down!

So how do you work around it??? Test everything!!!

If you know the type of element you are expecting, test for it! If you are expecting a string, use the following:

for(var i in myArr){
if(typeof(myArr[i]) == 'string'){
/* loop code goes here */
}
}

If you are not sure what type of element to expect, at least test to make sure what you have is not a function.... At the very least, I use the following:

for(var i in myArr){
if(typeof(myArr[i]) != 'function'){
/* loop code goes here */
}
}

By doing this, you can be sure that no matter where your code is used, it will not cause strange behavior!

Speed up your website

The creators at Yahoo have done it once again! What started as 13 rules became 14, the 23, and now 34 best practices for speeding up your website. This is a GREAT article and a MUST READ for any web developer. These 34 items are sorted into 7 categories. Some are pretty advanced and require changes in your server configuration, but many of them are simple changes in your practices that can have a profound change on the the speed of your website, or at least the perceived speed, which is just as important.