<link rel="prefetch" href="/images/big.jpeg">

With the href being the target content and the rel attribute triggering the prefetching mechanism. Pretty simple. I've already implemented it here on my gallery pages.

One thing I would like to see, and this is hinted at on the above linked Mozilla FAQ page, is prefetching performed automatically on anchor (<a>) tags with rel attribute set appropriately. In my mind that would be any anchor with a rel attribute of next, but the prefetch value would be fine as well. Personally, if that were supported I wouldn't have any (or very little) work to do to take advantage of this feature and in a general sense it would build on what people are already doing using prev, next and toc rel attributes on gallery links.

*it was scrapped because I hated the idea of forcing bandwidth usage on people with metered accounts. Since this is a browser based mechanism, it should be relatively painless for people in that situation to control whether or not content is prefetched.

We'll see how it goes.

With that short into out of the way I wanted to start off with a bit of JavaScript that I really appreciate, namely using a JavaScript Object as the argument for a function when multiple options are possible.

//Here's what a function call looks like

document.getElementById("myObject").onclick = doSomething(
//here's the object
	{
		//I'm using 3 options here
		file: "/_assets/images/object.jpg",
		messageText: "Objects sure are swell",
		newUrl: "/object.php"
	}
);

//and here's a snippet of the function definition
function doSomething( options ) {
//here we either use the arguments supplied in the call
//or  fall back to defaults.
//notice how the order is off and how callback
//was never supplied in the function call
	options = {
		file: options.file || "",
		callback : options.callback || function(){},
		newUrl: options.newUrl || "http://www.google.com/",
		messageText: options.messageText || "You love Objects"
    };
//stuff happens
};

Why do I like this? Two things:

1. I don't need to remember the order of arguments and I don't need to supply blank arguments if I'm not using one. I can't tell you the number of times I've messed up the order of arguments and cased an error which I then had to do a couple of minutes of research to fix. I still do it with the addClass, removeClass, hasClass, toggleClass suite I use pretty much every time I write JavaScript and that's only two arguments. If I converted those to a single Object it would be grand since I know I'd remember obj (my default Object argument name) and className.

   …and forget about remembering where to put unused arguments. That's the pits.

2. It's conceptually much clearer. Organizationally it's much cleaner to me (especially the way the defaults are spelled out right at the top of the function) and the Object labels take any guesswork out of the arguments when the function is called. I know exactly what I'm doing when I call a function defined this way. Compare the Object pattern to this classic:

   "MM_swapImage('Image1','','/img/newImg.jpg',1)"

   Quick, without referring to anything else, what's going on there?

   Sure, the first is the image name and the third is the image name, but what are the other two? Off-hand I'd have no idea and that's one of the most common blocks of code on the internet. Compare that to an object version:

   swapImage( {
   	target: 'Image1',
   	swapFrame: "",
   	fileName: '/img/newImg.jpg',
   	preload : 1
   });

   That brings clarity, right? Stunning clarity for me as I never knew what that always-blank second argument was.

And there you have it, the first installment. There will be a lot of CSS and HTML in this series as well, so if they float your boat as well please keep your eyes peeled.