The book makes the assumption that you’re already somewhat familiar with programming and the JavaScript language in particular. Instead of wasting time with absolute basics, it dives right in to Node. The first two chapters explain what exactly Node is, and how the the event loop works. It covers the differences between synchronous and asynchronous tasks, illustrating the reason you want to avoid blocking I/O. The next two chapters deal with sockets, serializing data and message queues. Other sections deal with databases (using CouchDB as an example), unit tests, building and consuming RESTful APIs and single-page web apps.

If you work your way through the examples in the book, you’ll end up building a reasonably complex web app and batch-importing a bunch of data from Project Gutenberg.

Node.js the Right Way is the best introduction to Node that I’ve seen so far. It’s concise enough it won’t take up a lot of your time, covers things more thorougly than a 500-word blog post or hour-long screencast, and there’s no magic “just copy and paste this, I’m not going to bother explaining it.” You should come out of it knowing where to go to keep learning. It’s easy enough to think “I used Express for this, and Grunt for that. Maybe I should search for more information about those tools.”

It also includes a templating system that makes it possible to allow the addition and editing of items, a pagination plugin, and a plugin that adds fuzzy search. (Also, they get bonus points for using characters from The Secret of Monkey Island as an example.)

The script looks very promising, though there is one caveat about the file size claim: the minified version is 5kb when served with gzip compression. If, for whatever reason, your server is not configured to do so, then it’s more to the order of 15kb. Still small, but not quite as amazingly so.

List.js [listjs.com]

What can you do if you don’t like either option?

Jason Mayes hacked together a clever bit of JavaScript that loads up one of the new Twitter widgets, scrapes the content out, and reformats it into nicer unstyled HTML. Then you can style it however you want in your stylesheet.

I’m using this right now on my personal blog, since Twitter’s new widgets don’t look very good when they’re crammed into a narrow sidebar.

The process required to add the new uploader is a bit different, but not too much more difficult. I was able to adapt the old tutorial a little, so it shouldn’t be too hard to replace some code in an existing project and get the new uploader instead of the old.

For the sake of simplicity, let’s start with the same HTML snippet as in the old tutorial. This goes along with the rest of the HTML for your admin page, or wherever in the admin you’re trying to add an upload field.

<label for="upload_image">
	<input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
	<input id="upload_image_button" class="button" type="button" value="Upload Image" />
	<br />Enter a URL or upload an image
</label>

Now we need to load up the necessary JavaScript files.

add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
	if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
		wp_enqueue_media();
		wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
		wp_enqueue_script('my-admin-js');
	}
}

We bind the my_admin_scripts() function to the admin_enqueue_scripts hook, and enqueue both the media scripts and our own JavaScript file. Also, the scripts will only be loaded if the current page is equal to “my_plugin_page,” which you would of course replace with the slug your admin menu has.

Now for the complicated part: the script that hooks into the uploader. Continuing with the above example, it would be named my-admin.js.

jQuery(document).ready(function($){


	var custom_uploader;


	$('#upload_image_button').click(function(e) {

		e.preventDefault();

		//If the uploader object has already been created, reopen the dialog
		if (custom_uploader) {
			custom_uploader.open();
			return;
		}

		//Extend the wp.media object
		custom_uploader = wp.media.frames.file_frame = wp.media({
			title: 'Choose Image',
			button: {
				text: 'Choose Image'
			},
			multiple: false
		});

		//When a file is selected, grab the URL and set it as the text field's value
		custom_uploader.on('select', function() {
			attachment = custom_uploader.state().get('selection').first().toJSON();
			$('#upload_image').val(attachment.url);
		});

		//Open the uploader dialog
		custom_uploader.open();

	});


});

When the button is clicked, it creates a new instance of the wp.media object and configures it to only accept a single file, since the text field can only hold one file URL. Then it binds a function to the selection action, which gets the file attributes when an image is chosen and sets the #upload_image text field value to the file’s URL.

Providing everything went as expected, you should have a form field that will accept an arbitrary URL, or allow the user to upload one.

The first, and probably most important, step was to implement an AJAX data source. The plugin supports this out of the box, but the documentation page doesn’t have an example. It’s easy enough. You pass a function that takes the query and hands it off to one of jQuery’s magic asynchronous request functions, like so:

$(document).ready(function() {
	$("#searchfield").typeahead({
		minLength: 3,
		source: function(query, process) {
			$.post('/search/typeahead', { q: query, limit: 8 }, function(data) {
			 	process(JSON.parse(data));
			});
		}
	});
});

Your request URL needs to respond with a JSON array of strings, which the typeahead library will process. The variables “q” and “limit” are sent along with the POST request in this example, and a PHP back-end returns the relevant data in response.

["Electric Light Orchestra", "Elvis Costello", "Eric Clapton"]

Once I had the asynchronous search working, I decided that it would be better if the user was taken to the search page as soon as they selected a suggested item, rather than having them click a search button. So I hooked in to the updater method, which runs whenever an item is selected.

$(document).ready(function() {
	$("#searchfield").typeahead({
		minLength: 3,
		source: function(query, process) {
			$.post('/search/typeahead', { q: query, limit: 8 }, function(data) {
			 	process(JSON.parse(data));
			});
		},
		updater: function (item) {
			document.location = "/search?q=" + encodeURIComponent(item);
			return item;
		}
	});
});

It’s just a simple matter of intercepting the selected item and jumping to a new page, passing the search string in the query. As far as I can tell, updater is not documented at all on the Bootstrap site.

Now…what if a user doesn’t want to search for one of the suggestions? In its present form, the typeahead doesn’t give much choice. If it finds a suggestion, it’s automatically selected. While this is good for some situations, it might not make sense for some. My solution was to dynamically insert an additional item at the top of the suggestions list, matching the search query. The sorter function worked well for that, as it runs whenever the list is updated.

$(document).ready(function() {
	$("#searchfield").typeahead({
		minLength: 3,
		source: function(query, process) {
			$.post('/search/typeahead', { q: query, limit: 8 }, function(data) {
			 	process(JSON.parse(data));
			});
		},
		updater: function (item) {
			document.location = "/search?q=" + encodeURIComponent(item);
			return item;
		},
		sorter: function (items) {
			items.unshift(this.query);
			return items;
		}
	});
});

You just slip the query into the items array with unshift and return the array with no further tampering.

The sprite image is a long strip containing each frame of the animation. The stylesheet sets it as the background of a DIV, and the dimensions are set so you can only see one frame at a time. Then a script uses a timer loop to continuously shift down the line, resetting once it reaches the end. (A more complex version of this effect can be seen in this Google Doodle.)

It works just like the sprites traditionally used in video games. It’s more efficient to load one image from a slow data source, whether it’s a hard disk or an internet connection, and only show a piece of it at a time, than to load dozens of images and alternate between them. (It saves some overhead in other ways in a performance-minded environment like a game, as well.)

Why not just use an animated GIF?

Aside from the simple fact that it’s more fun, the Graphics Interchange Format has some limitations that make it unsuitable for certain applications. It doesn’t work very well at all for photographic images, and it only has very basic transparency support. JPEG is far better for photographs, and PNG for images with flatter colors.

There is another image format that supports animation, the animated PNG format (APNG), but support for it is sorely lacking. Most popular image editors don’t support it natively, and only a couple of browsers can display them without third-party extensions. Firefox/Gecko and Opera are about the extent of browser support for APNG. Internet Explorer can’t display them at all, and Chrome requires a third-party extension.

By using a sprite, you have an image format that fits your needs, and still have animation. Oh, and you can start and stop the animation at will, through JavaScript.

Implementation

For starters, you need an element to hold the sprite. I ended up using a DIV with an ID of “sprite.”

<div id="sprite"></div>

Then you need to style the element. (If it’s not already a block-level element like a DIV, you may need to add display:block.) It’s height should be the height of your sprite image, and the width should be the width of a single frame. My image is 200 pixels high, and a frame is 300 pixels wide.

#sprite {
width: 300px;
height: 200px;
margin: 30px auto;
background-image: url(sprite.png);
}

The most important part, of course, is the script. I’m using some jQuery, simply because it’s a convenient way to handle my button events. You could easily adapt it to work without, though.

$(document).ready(function(){

var frameWidth = 300;
var frameHeight = 200;
var spriteWidth = 5400;
var spriteHeight = 200;
var spriteElement = document.getElementById("sprite");

var curPx = 0;
var ti;

function animateSprite() {

spriteElement.style.backgroundPosition = curPx + 'px 0px';
curPx = curPx + frameWidth;

if (curPx >= spriteWidth) {
curPx = 0;
}

ti = setTimeout(animateSprite, 80);

}

animateSprite();

});

The block of variables at the top set the frame dimensions, the dimensions of the sprite image, and the element containing the sprite. Then a timer is set, firing once per 80 milliseconds, which runs the animateSprite() function. Every time the function runs, it sets the background offset to curPx, and adds the frame width to curPx, so the next frame will be displayed in the following iteration. If curPx reaches the last frame, it’s reset to zero, so the animation will wrap around.

As an added bonus, you can start and stop the animation at will through the script. I just added some click events to a couple of links for illustrative purposes.

$("#stop").click(function() {
clearTimeout(ti);
});

$("#start").click(function() {
ti = setTimeout(animateSprite, 80);
});

You can see the finished example in action here.

The clever demonstration, featured on the Mozilla Hacks blog, works on both desktops and mobile devices, in all it’s scrolling two-dimensional glory. It’s rendered on an HTML5 Canvas, uses WebSockets to stay in constant communication with the Node.js server, saves your progress with the local storage API, preloads the map in a different thread with Web Workers, plays sound with HTML5 Audio and even uses media queries to adapt to different devices. Oh, and the source code is all available on GitHub.

The game is largely exploring, hacking-and-slashing monsters along the way, while you collect achievements. It has chat, and you can find new items to replace your default gear, but no player-versus-player combat.

My laptop’s fans stayed far quieter than they would while playing a similar Flash game, which I would say says something about the level of optimization browsers have done when compared to OS X/Linux versions of Flash.

I think we’ll be seeing more games built this way in the near future, and 3D games once WebGL reaches the same level of maturity and browser support.

Its a nice long and informative article, and worth a look if you’re looking to do some performance optimization of web site. (Be sure to look into sprites after you’ve switched to loading JavaScript asynchronously!)

Thinking Async [CSS-Tricks]

Very cool. Now I just need to think of something to use it for…

Tinycon – Favicon Alert Bubbles [GitHub]

This is great for two scenarios. You can use it to experiment with a bit of CSS or JavaScript for brainstorming purposes, or you can use it if you need to ask someone for help. (It’s a lot easier to figure out what’s going wrong with someone’s code or markup if you can jump right in and start messing with the code.) Chris Coyier (of CSS-Tricks) uses it all the time to show off CSS experiments that will likely be used in future posts of his.