Alex Kessinger voidfiles

We can waste hours talking about tools, it takes nothing to set me off, but I was prompted by a friend today to talk about tools:

So, I want to know your tool belt, maybe more focused on day to day use, so like reading articles, sharing/saving bookmarks, keeping information/doc save, sharing documents/file across your devices and anything you can think off that makes your life easier

I love tools and tooling, but before we talk about tools you should read the entirety of 43Folders it's the best tract every written about tools. It's not really about tools, it is, but not like you think. If you aren't going to read the site this will have to suffice as a paraphrase. As we move closer to tool nirvana. We realize that there is no such thing. What you really need to worry about is getting shit done.

From the about section on the site:

No Tourists, Please

In part two of before your scripts load series we are going to figure out how to use the techniques that Flickr uses to handle this problem. To recap, if we use an async JS loader, or even if we just put our script tags at the bottom of our pages we have a problem. The is potential for a user to interact with the page before the code loads. This means there might not be any code around to handle what the user just did.

Flickr uses something they call an actionQueue, and there code to do that is in a very tight, isolated bunch of code. With very little modification I think we could use that exact same piece of code. We are going to build a simple webpage that exercises the code. To start we need to make a few changes to the original code so that we could have multiple modules loading instead of just one.

Note: I am using QUnit to run the tests

The code:

https://gist.github.com/1398040

	<!DOCTYPE html>
	<html>
	<head>
	<title>Pre Script Loading Test</title>
	<!-- just getting this stuff out of the way -->
	<style type="text/css" media="screen">
	body {width: 750px;margin: 0 auto;}
	p { margin: 10px 0 5px 0;}
	.like-button{padding:5px 10px 5px 5px;border-radius:3px;background-color:#eee;color:#000;text-decoration:none;}
	.like-button .star{text-shadow:magenta 1px 1px,magenta 2px 2px,magenta 3px 3px;}

	<!DOCTYPE html>
	<html>
	<head>
	<title>Like Button</title>
	<!-- just getting this stuff out of the way -->
	<style type="text/css" media="screen">
	body {width: 750px;margin: 0 auto;}
	p { margin: 10px 0 5px 0;}
	.like-button{padding:5px 10px 5px 5px;border-radius:3px;background-color:#eee;color:#000;text-decoration:none;}
	.like-button .star{text-shadow:magenta 1px 1px,magenta 2px 2px,magenta 3px 3px;}

	(function(A) {
	var registered_ids = {},
	id_to_module_map = {},
	interim_actions = {},
	cleanup_actions = {},
	clicked_ids = {},
	queueing = {};

	function register_id(id, callbacks, required_module) {
	id = id.replace('', '.');

	<!DOCTYPE html>
	<html>
	<head>
	<title>Pre Script Loading Test</title>
	<script src="http://code.jquery.com/qunit/qunit-git.js" type="text/javascript"></script>
	<script type="text/javascript">
	var F = {};
	(function(F) {
	var registered_ids = {},
	id_to_module_map = {},

	Production Tear Down

	How does Flickr handle the problems of loading scripts asynchronously.

	If you are using an asynch loader, or even if you are just putting your scripts at the bottom of your DOM, you have a problem. In some cases your scripts will load after the user has clicked on something that requires there to be a javascript function to handle the click. It's possible you have a non-js flow, but if the user has JS we want them to use that flow, even if the JS hasn't loaded yet. You need some way of handling events before all of your scripts have finished loading.

	There are a number of ways we could do this, but it's helpful to look at a working implementation. This is going to be a two part series. First, we are going to look at how Flickr does this. In the second part, we can take the code that flickr uses and extract the main features so that anyone can use the code.

	In all of the code that Flickr loads before the body this is the part that matters to us.

	Production Tear Down

	How does flickr handle the problems of loading scripts asynchrounsly.

	Wether, or not you are using an asynch loader, or you are puting your script loading at the bottom of your dom you have a problem. In some cases your scripts will load after the user has clicked on something that requires there to be a javascript function to handle the click.

	If you have built out a fully accessible site you might have a non-js flow, but that is usually substandard if the user has javascript, and it just is taking to long for your scripts to load. What you need some way of handling events before all of your scripts have finished loading.

	First we I am going to take a look at how flickr does this, and then I want to break down a more generic way of doing this.

	<a href="#" class="Butt ywa-track fave-button fave" id="button-bar-fave" data-ywa-name="Favorites star" onclick="return F.actionQueue.queue_click(this.id);" tabindex="4">
	<span class="ie-hack"> </span>
	<span class="star">★</span>  Favorite
	</a>

	F.actionQueue.register('button-bar-fave', {
	interim: function(id) {
	var fave_button = document.getElementById(id);
	if (fave_button.className.search(/fave/) === -1) {
	fave_button.className = 'Butt ywa-track fave-button fave';
	} else {
	fave_button.className = 'Butt ywa-track fave-button';
	}
	},
	cleanup: function(id) {