I don’t think it’s a good idea to leave

console.log

statements in production code, it’s a good idea to prevent your site from breaking if you accidentally do. I include this condition in the first script that loads on the page of most of my projects

if (typeof console == "undefined") {
    window.console = {
        log: function () {}
    };
}

This JavaScript simply defines an empty function if the console is not available in the browser so stray log statements don’t break production for your valuable customers.

In a recent project I wanted to be able to dynamically set a production flag in JavaScript. Doing so would allow me to keep my production analytics free from dev and staging environment events. Because my dev and staging environments don’t run on a .com domain extension I was able to go with this simple script

    var de = document.location.hostname.split('.');
    de = de[de.length - 1];
    window.prod = (de == 'com') ? true : false;

Then when I need code to only respond when in production it’s as easy as

    if(window.prod) {
        // do awesomeness
    }

Splitting up the domain in JavaScript to set the production flag has been working well and I’m quite happy with it so far. If you have suggestions or want to share what you have done, please share in the comments below.

ADD A Z-INDEX TO YOUR ABSOLUTELY POSITIONED ELEMENTS!

While building a web app, I ran into an issue with Chrome and Safari having a strange rendering issue when animating absolutely positioned elements. In testing it worked fine in IE and Firefox so I thought I was going crazy.

Come to find out, if I added a z-index to the absolutely positioned elements that I was animating the issue went away. I was able to figure out the issue after finding this StackOverflow.com answer at

http://stackoverflow.com/questions/10522054/weird-rendering-bug-in-desktop-webkit-safari-chrome-with-absolutely-positioned

after doing a google search for “webkit animate absolutely positioned elements rendering bug”

tldr;

Run in terminal:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --v=1&
tail -f ~/Library/Application\ Support/Google/Chrome/chrome_debug.log

If you are wondering how to know just about everything that Google Chrome is doing, you can enable verbose logging to a file. If you are running on a Mac, you can follow similar steps to launch Google Chrome in verbose logging mode.

• Make sure Google Chrome is not already running
• Open Terminal
• Find path to Google Chrome that most closely resembles the following

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome

• Once verified, launch Google chrome with verbose logging flag by running verified path with flags

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-logging --v=1

• Find logging file, chrome_debug.log, that most likely lives at

~/Library/Application\ Support/Google/Chrome

• Watch the file for updates using tail or some other application

tail -f ~/Library/Application\ Support/Google/Chrome/chrome_debug.log

This is using Google Chrome version 21

Google Chrome Logging

Google Chrome logging to Terminal

Web Resources:

http://www.chromium.org/for-testers/enable-logging
http://peter.sh/experiments/chromium-command-line-switches/
http://superuser.com/q/157484/2861