Web development reference material

Here are some useful cheat sheets for web developers

RichFaces: open a pop-up window

This thread was helpful for me to create a button that opens a new window. However, I had to move the script into onclick part of the button, instead of creating a separate jsFunction.

jslint plusplus

Today, my coworker asked why he can’t use ++ operators. I responded that jslint’s plusplus configuration ban it. He certainly was annoyed by such change in the configuration. A quick look into the reasoning behind the ban reveals the following statement from Douglas Crockford’s JSLint – JavaScript: The Good Parts:

The ++ (increment) and — (decrement) operators have been known to contribute to bad code by encouraging excessive trickiness. They are second only to faulty architecture in enabling viruses and other security menaces. The JSLint option plusplus prohibits the use of these operators.

Perhaps this ban is necessary for folks who have shown tendencies to develop obscure code in an attempt to deceive or trick others. At the same time, it also bans simple usages such as the one shown below:

var a = 0;
for (var i = 0; i < 5; i++) {
  a = a + i;
}  

In order to pass jslint, the for loop may have to look like the following:

var a = 0,
    i;
for (i = 0; i < 5; i = i + 1) {
    a = a + i;
}

Without ++ operators, code will no longer looks the same or as elegant as it used to be. Now that I have my 30 sec on this topic, life goes on with working code!

Workarounds for IE 8 and Ext JS

For the last couple days I ran into JavaScript errors with toolbars for Ext JS. One of the issues is clearly documented here. I just added hideMode:'offsets' to the toolbar definition and the error went away. The other one, I had to add enableOverflow: false option to the toolbar to avoid hitting Object required error in IE.

Facebook phone number exporter

I came across this script and it worked for me. This is a good time saver!

JSLint – set exception options

I worked with JSLint today to clean up my local code. While cleaning, I encountered a parameter name that had underscore in its name. JSLint didn’t like this and complained. Since this parameter name was used to communicate with the server and could not be changed, I needed to set an exception in the JavaScript file. This led me to the options section of this page. All I had to do was adding the following line at the beginning of the JavaScript file and JSLint stopped complained about the issue:

/*jslint sub: true */

JavaScript trick

This might be useful trick to upload and display an image.

Configure tab sequencing on a modal window

mmusson’s code post in this thread works well for me.

Buggy FireBug

I have a page with Javascript loaded from different directories. For one reason, the Javascripts source loaded from one of the directories did not display. This means I could not use the debugger to insert break points directly. The Firbug version was 1.3.3. Initially, I was able to get the source code to show after randomly clicked around, i.e. click on Yslow and switch back to script tab. Unfortunately, it was not a reliable workaround. Eventually, an idea came to me to work around the issue: insert a runtime error. A runtime error can be as simple as referencing a non-existing function. Make sure you don’t introduce syntax error, which will stop the browser from reading the source code. With the new runtime error, Firebug will show an error in the console and provide a link to the source code. Once I could see the source code, I added break points at the lines that I was actually interested and removed the artificial runtime error from the source code before reloaded the page.

createDelegate in ExtJS

createDelegate is an interesting way to pass a function object with a scope object. This is very useful for using callback functions. For more information, see this screencast.