Archive

Archive for January, 2008

The top 55 best front-end development RSS feeds

January 31st, 2008
Comments Off

I've put together all the feeds and blogs that I follow that cover front-end development.
Here is the OPML file: front-end-development-feeds.xml.opml

feeds.pngAll the classics like Ajaxian and A List Apart are in here.. but also more technical ninja developers like John Resig, Hedgerwow and Peter Michaux.

If you currently use a RSS aggregator (like Bloglines, Google Reader, or Netvibes) you can import this file right in.
iGoogle won't take an OPML file but you can do each RSS feed individiually.

You can also preview what's in it here: http://www.bloglines.com/public/molecular-frontend-feeds

Paul Irish javascript

Graceful Degredation of Your Firebug-specific Code

January 27th, 2008
4 comments 
// code yanked from the Yahoo media player. Thanks, Yahoo.
if (! ("console" in window) || !("firebug" in console)) {
    var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml", "group"
                 , "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];
    window.console = {};
    for (var i = 0; i < names.length; ++i) window.console[names[i]] = function() {};
}

Paul Irish javascript

concatenate()

January 26th, 2008
5 comments

Updated 2008.01.28: Great idea from Marc and Hendrik. Very slick.

function concatenate(){
  // return arguments.join('');                      // won't work. arguments is not a real array.
  // return [].splice.call(arguments,0).join('');    // old 'n busted
     return Array.prototype.join.call(arguments,''); // new hotness
}
 
concatenate('good',2,'go');
// ==> 'good2go'

Paul Irish javascript

The Refresh CSS Bookmarklet -or- How to iterate quickly when debugging CSS

January 21st, 2008
8 comments

firebugscreen.PNGFirebug is my tool of choice to fiddle with CSS. I'll edit the elements on the page, and then copy my changes back to the .css file. Then save.

If you're in a webapp, refreshing the page could take a while, so here's a great way to reload the freshest copies of the stylesheets. Drag this bookmarklet link to your toolbar:

>>> Refresh CSS <<<

Clicking it will modify any <link rel="stylesheet"> tags and append a timestamp at the end of each href attribute, thereby dropping the cache and grabbing a new one. It's quick and beautiful.

Paul Irish front-end development

You must restart your system

January 20th, 2008
3 comments

In the 10 years that I've seen dialogs like these, I've always clicked "No" or "Restart Later" and the software ALWAYS works. The software installs indicate it's mandatory, but never is it functionally mandatory. Not TortoiseSVN, ISO mounting utilities, not even Microsoft Office; it always works without a reboot.

So why is this pattern so widely adopted?

Paul Irish hmm!

Automate firing of onload events

January 14th, 2008
8 comments

I've often had to set up onload events that execute for only a single page. I've both hardcoded those function calls right into the markup and I've done page detection in a shared js file (parsing the current URL, ew!). Neither solution is rather pretty. The below solution keeps things unobtrusive.

Set up the body tag with an ID that identifies the page, such as:

<body id="homepage">

Over in your javascript, set up your page init code in an object literal:

var siteNameSpace  = {
   homepage : {
      onload : function(){
         // do this stuff.
      }
   },
   contact : {
      onload : function(){
         // onload stuff for contact us page
      }
    }
};

Your document ready code executes for the same for all pages:
jQuery:

$(document).ready( siteNameSpace[ document.body.id ].onload );

Prototype:

Event.observe(window, 'load', siteNameSpace[ document.body.id ].onload );

YUI:

YAHOO.util.Event.onDOMReady( siteNameSpace[ document.body.id ].onload );

However this will fail if that object (and onload function) are not defined.
But you can fix it with a little more code..

//jQuery version
$(document).ready( 
  function(){
    var NS = window.siteNameSpace, bID = document.body.id;
    if(NS && NS[ bID ] && (typeof NS[ bID ].onload === 'function')){
      NS[ bID ].onload();
    } 
  }
);
2009.03.11 I've put this technique on steroids, now. Check out Markup-based unobtrusive comprehensive DOM-ready execution

Paul Irish javascript

Javascript CSS Selector Engine Timeline

January 13th, 2008
15 comments

I'm interested in understanding all the selector engine code. In order to watch the development from the most basic to the quickest, I wanted to gather all the data points. Take a look, as you can see, Jack Slocum was definitely right when he said "selector processing power has gone from Pinto power to a Mustang GT 500."

Update: Added Base2, CssQuery1.0. Corrected jQuery launch date.
Update: Added Dojo 0.9, NWMatcher.

(Drag to navigate timeline)


Leave a comment if I left anything out.

Paul Irish javascript