A Fire-BUG

During my recent development on a client’s website I bumped into a problem where some of the javascript code i wrote was not processed at all in Firefox when I had the Firebug developer tool open. It left me baffled for a few minutes and in this special case my way of debugging was actually making things worse because it turned out that the script was not executed with the debug lines in the code (do you see the irony in here?). As soon as I commented out the debug lines the code was doing its magic again. After all that I had a quick google on the topic and here’s what I’ve found:
I use console.log() for debugging quite a lot especially if I work on a live site because it does not cause the same distraction as an alert popup does. However, without Firebug enabled in Firefox console.log() will consider the rest of the code following this line as broken because it will be looking for Firebug that is closed. If one opens Firebug and refreshes the page the script will start working again. A suggested workaround for this is to wrap the debug line in an if statement as the following:

if(window.console && window.console.firebug):
    console.log('Debug information goes here');
endif;

If you plan on using console.log() on multiple occasions during development you might want to consider writing a function for it.

HTML element identifiers: classes and ids

When they (w3c) say that id must be a unique identifier they are not kidding, you know. As obvious as it sounds it is an easy mistake to make to end up with multiple html elements sharing the exact same id when you have dynamically generated content (common case when using any of the cms platforms out there).
As a recent experience I ended up with a category page where the container elements had different ids (as they should) but the nested elements had the same ids as other children elements of a different container element as illustrated in the simplified example below:

Most of the time you would not even notice it because browsers nowadays are clever enough to cope with the issues this type of invalid markup can cause but as soon as it gets to testing the site in Internet Explorer ( especially version 7 and 8 ) you will notice a similar expression on your face to the one you would expect to see on a tourist’s who is about to be eaten by a goonch catfish on the bank of Kali River. Should you encounter similar behaviour first make sure that your website has a valid markup and replace duplicated ids with classes.
If you use jQuery for achieving better user experience you will find that .parent(), .parents(), the child selector (parent > child), descendant selector (“ancestor descendant”), :first, :first-child and other selectors of the kind will soon become your best friends.