Minify Your Web Page

If you're optimizing the performance of your website, you should try minifying your Javascript. What I mean is get rid of all the comments, line breaks and other whitespace. You will find a significant difference in the file size for larger Javascript files. Using JsMin can automate the minification of your Javascript but you really ought to read the documentation that they provide before using it. Get JsMin here - you can get both the .EXE executable and the source code.

You might want to try server-side compression configuration so the web server can compress the content before sending it to the browser. Caching is also something you can optimize to work in your favor.

PS: The Google home page is heavily minified - they even use short variable names!

IE and Firefox: onKeyPress

MS Internet Explorer and Firefox handle the keyPress event differently - MS IE only fires the event for non-special characters while Firefox fires the event for all key presses.

IE returns the key that caused the event in event.keyCode. Firefox uses event.which and event.keyCode; if you want to handle special keys, you can read the value from event.keyCode (event.which is 0 for *most* special keys) or you can stick with event.which for the most part.

Javascript: Implicit variables are global

Unlike the case in some programming languages, using implicit declaration for a variable in Javascript makes it global. Take a look at the code below:

function foo() {
x = 3;
}

function foo2() {
alert(x);
}

Function foo() *appears* to have a variable 'x' declared within it's scope. Looks can be deceiving, as they say. Unless there is a var declaration, this x is visible globally so if we ran foo() followed by foo2(), foo2() would display an alert dialog with the number 3.

I guess it doesn't really matter much as the code runs within the browser sandbox but you would expect trouble if it were a server-side application and your developers were unaware of this little nuance.

Credits: I have Michael Freidgeim to thank for this bit of info as I read about it from his blog.

Javascript: Warn If Overflow

I recently came across a requirement to provide a warning to the user if the text entered in a text box exceeds the display area in a DIV, and found and old script I cooked up for it. An issue with setting the maximum length for the text box is that the 'W' and 'i' characters don't occupy the same space width variable-width fonts. I though it would be possible to measure the width of the text when the text is placed within a container using the offsetWidth property and I wrote up a little function:

function getSize() {
var divNitinz = document.getElementById('divNitinz');
var txtName = document.getElementById('txtName');
divNitinz.style.display = 'inline';
divNitinz.innerHTML = txtName.value;
var txtWidth = divNitinz.offsetWidth;
divNitinz.style.display = 'none';
return txtWidth;
}

I then created another function to get this value and compare it with the DIV in which I wanted to display the text and that looks like this:

function checkSize() {
var divDisplay = document.getElementById('divDisplay');
var txtName = document.getElementById('txtName');
if (divDisplay.offsetWidth <>
alert('Text overflow');
divDisplay.innerHTML = 'Text width: ' + getSize() + ' Display width: ' + divDisplay.offsetWidth;
} else {
divDisplay.innerHTML = txtName.value;
window.status = 'Text width: ' + getSize() + ' Display width: ' + divDisplay.offsetWidth;
}
}

My HTML is pretty simple:

    <form>

  <input type="text" name="txtName" id="txtName" onkeyup="checkSize();" />
  <input type="text" name="txtName" id="txtName" onkeyup="checkSize();" />

   <span id="divNitinz" style="display: none;"></span>
  <div id="divDisplay" style="width: 120px; background-color: #FFFF99;"></div>
  <input type="button" onclick="checkSize();" value="check" name="btnCheck" />
</form>

You've probably noticed the setTimeout that I've defined on the onkeydown event. I use it to get the text after the key has taken effect. I tried the onkeypress event before using onkeydown and the difference is the keypress event doesn't occur when you press backspace while the keydown event does, which makes it the better of the two.

If you've got any enhancements to this script or a better way to do detect overflow, let me know and I'll post it up here.

Javascript Libraries

If you're planning to revamp your site with some Javascript and AJAX, you might want to take a look at jQuery, ExtJS, Mochikit and Dojo libraries. They're the more popular of the lot.

jQuery is a really good place to start if you just want a little help with client side scripting for adding event handlers and using 'selectors' but don't want to go all the way with custom dialog boxes and other user interface elements.

ExtJs is often featured for its widgets. It can give you a cool Office 2007-like or Vista-like look and it's pretty comprehensive.

I haven't spent much time with Mochikit and Dojo, but I do find Mochikit's logging pane quite handy for client-side logging. It's for those times when you don't have access to a debugger (VS2008, in my case).