Archive for June, 2009


Queue events that occur before JavaScript is loaded

One of the common recommendations for speeding up your website is to put your JavaScript at the bottom of your page instead of including it inside the head tag. The difference this simple placement can have is impressive, especially if you are dealing with sizable JavaScript libraries that are usually 50k at best.

One downside with putting your JavaScript at the bottom is that your fast clicking visitors may click on links that won’t work. The reason this happens is because the JavaScript that those links trigger hasn’t been downloaded yet. Usually those links will work on the second or third try, but it makes for a bad user experience and a poor first impression.

I decided to fix it by queuing up those user-triggered actions and replaying them as soon as the document is ready. I wrote a wrapper that I can use anytime I have code that depends on my JavaScript being downloaded and available.

The concept is simple. Instead of calling functions directly when a user triggers an action, I add the function call to a queue. When the document is ready, I loop through the queue and execute each of the actions in the order that they occurred. I put this code inline inside my head tag so it is available as soon possible. The rest of my JavaScript can then be included right before the closing body tag without worrying about this race condition between the browser and website visitor.

<script type="text/javascript">

var loaded = false;
var action_queue = new Array();

function when_ready(callback) {
    // skip the queue if the document has already loaded
    if (loaded == true)
        eval(callback);
    else {
        action_queue.push(callback);
    }
}

function dequeue_actions() {
    for (i in action_queue) {
        eval(action_queue[i]);
        delete(action_queue[i]); // cleanup after ourselves
    }
    loaded = true;
}

</script>

I then trigger dequeue_actions() as soon as the document is ready:

// using jQuery
$(document).ready(function(){
    dequeue_actions();
});

// this works too
onload = dequeue_actions;

You can then safely make function calls using when_ready(). For example:

<a onclick="select('foo')">foo</a>

becomes

<a onclick="when_ready('select(\'foo\')')">foo</a>

In my testing, the results have been very smooth with delays being almost unnoticeable. Of course, your experience will vary depending on the size of your document and how long it takes for your document to be ready.

This code is pure JavaScript and should work in every modern browser. I’ve tested it in IE6+, FF2+ and Safari 3+.

 9 comments

Reading GET variables with JavaScript

One of the things that isn’t immediately obvious in JavaScript is how to access GET variables. I’ve seen lots of different implementations for this around the web, but the majority of them are bulkier than they need to be. Here’s my favorite way to do it:

<script type="text/javascript">
    function $_GET(q,s) {
        s = s ? s : window.location.search;
        var re = new RegExp('&'+q+'(?:=([^&]*))?(?=&|$)','i');
        return (s=s.replace(/^?/,'&').match(re)) ? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1])) : undefined;
    }
</script>

What this gives you is a JavaScript implementation of PHP’s $_GET functionality.  I use a regular expression to keep the code to a minimum. Here is a simple example of how to use it:

// this code would print "hello world" if it was at http://localhost/index.php?var1=hello&var2=world
var var1 = $_GET('var1');
var var2 = $_GET('var2');
document.write(var1 + " " + var2);

Another thing I like about this implementation is that it makes it easy to parse GET variables from arbitrary search strings (ex “?var1=hello&var2=world”).  This is handy if you need to access GET variables from an HTML src parameter such as an image or script tag.

// get the src parameter and split it down to the search query string
var src = document.getElementById('example').src;
params = src.split('?');
var var1 = $_GET('var1','?'+params[1]);
Updated 01/14/11 with Kip Robinson’s improvements from the comments
 34 comments

Looking for a job? Don’t be this guy.

I just received this email:

Hi,

Please see my attached resume.
I’m very intelligent and creative. I have a very eclectic arsenals of skills for the solution of problems.
I’ve worked in numerous startups, including several of my own.

Reed

The sad thing is, I get an email like that just about every day. I thought I would share my response in hopes that it will help someone from making the same mistakes.

We’re not hiring right now, but here are a few free tips:

  • “I’m very intelligent and creative.” doesn’t come off as confident, it comes off as cocky
  • If you had spent 2 minutes looking at our site you would have known that my email address is josh@eventvue.com not careers, not jobs… just josh.
  • No mention about what excites you about EventVue? Keep in mind I get several resumes in my inbox EVERY DAY. It’s not hard to get my attention. Comment on my blog. Send me an engaging question. @me on twitter. I’ll respond. Just don’t send me something that has been copied and pasted to a dozen different companies.
  • “FW: about me” is your subject line? I’d work on that one a bit.
  • We’re a startup trying to build cutting edge stuff. The fact that you sent me an email from a Hotmail account communicates that you aren’t much of an early adopter. That’s too bad, because I bet you’re a smart guy.

I understand that startups are different.  Your career center probably didn’t tell you this stuff.  That’s why I am.

Update. Reed responded:

Don’t worry I’m very creative and intelligent. It’s not a boast. It’s who I am.

If you read my resume then you know that I’m also an internationally known composer.
I can write top level music in any style you can think of, including the most modern remix and such.
I attached a song from one of my Cds. All my Cds have been in or near the 10 ten the country on jazz radio.

I  have not only hotmail but gmail and facebook and twitter and others.

Anyway, I’ll keep your advice in mind.

I’ll check out your blog.

Not sure that helped, but at least now I know he’s a good composer.  The music was pretty.

 16 comments