Javascript

/* remove all default background images from jquery ui */ .ui-icon,.ui-widget-content .ui-icon, .ui-state-active .ui-icon, .ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active, .ui-state-default .ui-icon, .ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default, .ui-state-error .ui-icon,.ui-state-error-text .ui-icon, .ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error, .ui-state-highlight .ui-icon, .ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight, .ui-state-hover .ui-icon,.ui-state-focus .ui-icon, .ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus, .ui-widget-content, .ui-widget-header, .ui-widget-header .ui-icon, .ui-widget-overlay, .ui-widget-shadow { background-image: none; }

For most bottleneck debugging Chrome Inspector’s profiles view in invaluable until a bottleneck is identified and then it becomes a bit cumbersome. I like to have a quicker overview of the piece i’m working on optimizing. I use this small and easy timer snippet. var timer = { start: function() { timer.t = new Date().getTime(); }, log: function(str) { str = str ? str : 'Execution time: '; console.log(str + ((new Date().getTime()) - timer.t)); } }; //Example (function() { //... timer.start(); //... timer.log('first landmark passed: '); //... timer.log('second landmark passed: '); //... })();

// You can expand this out in any line below // but it makes things much more readable var ua = navigator.userAgent.toString().toLowerCase(); //Browsers var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/ var IE7 = (document.all && !window.opera && window.XMLHttpRequest && ua.indexOf('trident/4.0') == -1) ? true : false; var IE8 = (ua.indexOf('trident/4.0') != -1); var IE9 = ua.indexOf("trident/5")>-1; var IE10 = ua.indexOf("trident/6")>-1; var SAFARI = (ua.indexOf("safari") != -1) && (ua.indexOf("chrome") == -1); var FIREFOX = (ua.indexOf("firefox") != -1); var CHROME = (ua.indexOf("chrome") != -1); //Platforms var MAC = (ua.indexOf("mac")!=-1) ? true: false; var WINDOWS = (navigator.appVersion.indexOf("Win")!=-1) ? true : false; var LINUX = (navigator.appVersion.indexOf("Linux")!=-1) ? true : false; var UNIX = (navigator.appVersion.indexOf("X11")!=-1) ? true : false; var IOS = ((ua.indexOf("iphone")!=-1) || (ua.indexOf("ipod")!=-1) || (ua.indexOf("ipad")!=-1)) ? true : false; var ANDROID = ua.indexOf("android")!=-1) ? true: false; var BLACKBERRY = (ua.indexOf("blackberry")!=-1) ? true: false; //mobile browsers var OPERA_MINI = (ua.indexOf("opera mini")!=-1) ? true: false;

Change events on select elements don’t fire in IE8 when the user confirms the selection with the enter key until the user clicks elsewhere. If your users are waiting on something in particular to happen after updating the select this is a bit of a problem. Here’s my solution: // jQuery syntax for ease of reading var the_select = $("#my_select"); // this works great for most browsers the_select.change(function() { console.log('changed'); }); // if IE8 if ($.browser.msie && parseInt($.browser.version, 10) <= 8) { // get the keypress event the_select.keypress(function(e) { // if the user pushed enter if(e.keyCode === $.ui.keyCode.ENTER) { // manually trigger the change handler $(this).change() // blur afterwards isn't ideal but // it doesn't work correctly otherwise .blur(); } }); }

A quick review. Console.log() //how to print a log statement console.log('That thing you expected to happen is now happening!'); //how to break production sites in internet explorer console.log('anything'); //how to log safer function l(str){if(window.console&&console.log){console.log(str);}} l('I can forget this in my code base without breaking anything!'); Console.trace() //how to figure out what's calling what console.trace(); //console.trace example: function a() { console.trace(); } function b() { a(); } function c() { b(); } function d() { b(); } if (Math.random() < 0.5) { c(); } else { d(); } If you copy and paste that console.trace example into the Chrome Console you’ll get a full stack trace like this one: ...