ajaxlights

Awesome 3D rendering engine for the canvas tag by Peter Nederlof. Very impressive. Here’s a short screencast of it in action - note that this is a *web page* with *no flash*.

Maxime Haineault has created a new UI for picking time - I can totally see this as a new web-born UI practice much like the Lightbox.

EtherPad has made it possible to collaborate on writing JavaScript code in the browser!

This is the first in an intended series of small snippets of unobtrusive javascript patterns.

What?

How to effortlessly and unobtrusively have a loading spinner appear on each ajax call with jQuery.

Why?

There are a number of reasons why, and they fall in a number of different categories

• UI - You should always keep your user aware of what’s going on. In this case that something is loading.
• Development - unobtrusive code degrades well by definition, and the effortless part explains itself.

// Create closure
jQuery(function($){
	// Create img dom element and insert it into our document
	var loading = $('<img alt="loading" src="/images/loading.gif" />')
	.appendTo(document.body).hide();
	// Make the image appear during ajax calls
	$(window).ajaxStart(loading.show);
	$(window).ajaxStop(loading.hide);
});

What? How to make your code look pretty on your blog with minimal effort. Meaning language appropriate highlighting without even specifying which programming language the code is in. Why? Because

/**
* A miss manners guest
* @constructor
* @param {Object} params The parameters object. All other parameters are named properties of this object
* @param {String} name The guest name
* @param {String} gender The guest gender. 'male' or 'female'
* @param {String} interest The guest interest. A single string. You should give guests interests so that some match up - this is what the rule engine bases their placemenet on.
* @param {String} color Hexadecimal value of the color to represent the guest with.
*/
MissManners.Guest = function(params) {
  this.name = params.name || this.Default.name;
  this.gender = params.gender ? params.gender.toLowerCase() : this.Default.gender;
  this.interest = params.interest ? params.interest.toLowerCase() : this.Default.interest;
  this.color = params.color || this.Default.color;
  this.id = 'MMGuest-' + MissManners.nextUniqueId++;
}

Looks infinitely better and is much more readable than

/**
* A miss manners guest
* @constructor
* @param {Object} params The parameters object. All other parameters are named properties of this object
* @param {String} name The guest name
* @param {String} gender The guest gender. 'male' or 'female'
* @param {String} interest The guest interest. A single string. You should give guests interests so that some match up - this is what the rule engine bases their placemenet on.
* @param {String} color Hexadecimal value of the color to represent the guest with.
*/
MissManners.Guest = function(params) {
this.name = params.name || this.Default.name;
this.gender = params.gender ? params.gender.toLowerCase() : this.Default.gender;
this.interest = params.interest ? params.interest.toLowerCase() : this.Default.interest;
this.color = params.color || this.Default.color;
this.id = 'MMGuest-' + MissManners.nextUniqueId++;
}

But this can be a pain to get right (you know if you’ve tried). There is an easy way, especially for all us WP bloggers. How? With wordpress, the easiest thing in the world. Just download Google Code Prettify for wordpress v1.1 to your wordpress wp-content/plugins directory with

curl -O http://www.deanlee.cn/downloads/google_code_prettify_v1.1.zip
unzip google_code_prettify_v1.1.zip

Then go to your wordpress plugins admin area at /wp-admin/plugins.php, and activate Google Code Prettify. The next time you write code, just wrap it in <pre class=”prettyprint”> /* your code here */ </pre> and the plugin takes care of the rest. Seriously - you don’t even have to specify the programming language your code is in. *Thank you!*