Discover gists

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

	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.

	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.

	<!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 = {},

	(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 lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Z-Index Example</title>
	<style>
	@font-face {
	font-family: 'Win95F';
	src: url('data:application/font-woff2;base64,d09GMk9UVE8AAB7IAAoAAAAAfLQAAB54AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAADYHcRQZgAIpcATYCJAOFAAQGP21ldGGCBAWHeQcgG/17FeyYl7gdUKg+MzYSIWwchCaAJ1GUTdZM2f+fEtQxhLpXsjlMOBl1rtM5kVqBMp1XeGh4M/bhm1fyGODBICrJYyX3cIpIfVYz8+zf7k/1poo76F5SyxV35u42RuK58Pyzv//2ufiSI5FINEWNWcddrlPZZr353F4vNRtmfpL6FyCmfDO+2gEHHHZoxKaa7jrsXaZOHea+XXQOfP8/9vs9cxcVqniikQnZQ7JE62SzSFJJlfXTq1/snkEVLh3bgX9wrpvZrHU6h4r8an+wJ/mf+G0eKltj8Y0CE6MTzFphsWCV6tY3xQxWaSyijN4a1jYsZYEPgty2j1NBvFO5ztS8L7nCE3R9JjsC1hSKoT3X3uY/v7/vz137WW3kOP6K38nIPwlujGIbNkGXOwLg//99U20JOQ0Yh4DD0LlU0bhPcFDIsBzy6t0Td7+5d9mjCFAJA0VwEQ4h4M07M9/hM0P5S4sBznkkVa5S5dxVIbUt2bl0SRWdWndyVbjrtXoXfWko9Ixf8mAlKsgL1qjQb5oCz6Y4siXFEeB8+MN2upYd8LuBdoR/31iLxhoVBZhAB3bnZRRIIKn3s59aH/bm9DqFEgRElDEz/m5qk9vHmEbteKX0j35isACCAoJ0hS2/QNAEEf

	function makeFilename(s){
	var filename =
	s.replace(/[^\.A-Za-z0-9\u30e0-\u9fcf\u3040-\u309f\u30a0-\u30ff]/gi, '');
	return (filename);
	};

	Hey Alex, there aren't any docs yet. Here's the info:

	simplenote://new?content=encodedContent&tag=encodedTag

	The parameters are optional. If omitted, Simplenote will open to a new, blank note.

	"""
	From this paper: http://acl.ldc.upenn.edu/acl2004/emnlp/pdf/Mihalcea.pdf

	I used python with nltk, and pygraph to do an implmentation of of textrank.

	for questions: http://twitter.com/voidfiles

	"""
	import nltk
	import itertools