• They come prefilled with poo
• They have very sharp fingernails
• They don’t just sleep and cry – they spend a lot of time awake
• They spend an inordinate amount of time and energy straining to fart
• Adults have very big peculiar heads

Ben Cherry explains that HashBangs are necessary, though not pretty, temporary workarounds to the lack of pushState support, which is part of the HTML5 spec.
http://www.adequatelygood.com/2011/2/Thoughts-on-the-Hashbang

Dan Webb explains that this temporary workaround goes against the fundamental rule that “cool URIs don’t change”, and that they are bad for the web in general.
http://danwebb.net/2011/5/28/it-is-about-the-hashbangs

When we discuss this sort of thing, we’re talking about the web in general, not about any Twitter pages, URLs, sites or strategy. Our personal sites are for personal opinions.

Dan and Ben have strong points, but I think the Internet is sufficiently large as to accommodate a variety of architectures. While building one way may simply be better, for excellent reasons, than another way, one is often forced to choose the lesser route due to external constraints.

New Twitter is a good example: a clientside application built using JavaScript. Besides the obvious UI upgrade, there was also a desire to reduce the load on our servers, and leverage our own API. This enabled us to concentrate resources on scaling and bugfixing the API in the backend (good for everyone), while letting frontend developers iterate quickly against an agreed specification. It was a win-win architecture.

The result is an application which needs to allow navigation without server calls. Thus the hashbang in the URL. It’s a necessary consequence of the requirements of the project.

Dan does raise some excellent points that the hashbangs cause problems. Returning to a hypothetical example, we might still have reasons not to rearchitect back to the classical page-request method. So we should address the problems Dan raises directly.

1 Spiders should execute JavaScript

There’s essentially no reason why a spider shouldn’t be executing some form of JavaScript. It’s mature enough. We’re using JavaScript to write out our content, and so the spider should be able to execute our JavaScript before it evaluates our DOM for content. It merely needs to know when the page is ready for this to happen.

2 Ajax pages need a ‘Page Loaded’ event

Spiders and search indexers can and do sometimes implement JavaScript runtimes. However, even in this case there’s no well recognised way to say ‘this is a redirect’ or ‘this content is not found’ in a way that non-humans will understand.

We just need this specification. Let us have a way to signal HTTP response code equivalents like 404, 500 and “Page complete” through manipulation of the DOM with JavaScript.

3 Hashbangs are a fallback

The original hashbang proposal from Google aliases hashbanged urls to _escaped_fragment_ querystring parameters, allowing it to read the content of hashbanged urls as a server-side rendered page. I don’t believe this is a good system.

For a start, our linked URLs should be ‘cool’. It is only JavaScript that should add the hashbang, in browsers that need it. For example:

<a href="/kpk">Kenneth</a>
<script>if ($.browser.msie) $('a').click(function(){location.hash='!'+this.href;return false});</script>

When Google reads this link, it should request ‘/kpk’. As our page is a clientside app, the server will respond with a redirect to ‘/’, then a pushState back to ‘/kpk’, before rendering the content to the DOM. If we can then trigger a ‘page loaded’ event, Google can start reading our content.

4 Hashbangs should be invisible

A hashbang is a temporary workaround for the lack of pushState. While our links should only be hashbanged for the non-pushState browsers, Google may still find a hashbang in a URL. As such, Google should regard it as invisible. The URL it saves should be the URL without a hashbang.

For example,
Spider finds link to http://twitter.com/#!kpk
Spider saves link as http://twitter.com/kpk
Spider finds link to http://twitter.com/#!kpk/mentions?page=10
Spider saves link as http://twitter.com/kpk/mentions?page=10

This lets us switch to Cool URLs with pushState when and where it becomes available. It lets us use canonical urls. And should we choose to revert to a client/server model later on, we are able to do so.

5 Hashbangs should be eternally supported

Once you hashbang, you can’t go back.

Once a URL is made visible, you should be committed to maintaining that link forever. Fortunately, hashbanged URLs are easy to replace, if they’ve been designed invisibly. If you don’t use hashbangs anymore, just render them invisible with this script on your homepage:

<script>if (location.hash.charAt(1)=='!') location.replace(location.hash.substr(2));></script>

So, in summary, I suggest we (or rather, Google, as the authority over content reading) should accept the clientside application on its own terms, rather than as an alias to a server-side application. For while the client-server model has certain inherent advantages, there will still be occasions when a clientside application is more appropriate.

We can support that by changing the rules on interpreting hashbangs, and by introducing a DOM element controlled by JavaScript that describes the page status.

Today’s is a tribute to the almighty Matrix. Although they sadly never made any sequels, and the effects have been copied so often they now seem cliché, it was an outstanding film of its time.

So here it is: a Twitter List timeline, shown as a Matrixy matrix:
http://kenneth.kufluk.com/matrix/

Initially, I wanted to have the tweets scrolling down the page using CSS animations. Sadly, my machine got completely overwhelmed with only a few streams. I would’ve turned to my friend the canvas, but our display screens are something like 1900×800 and slow, which makes full-screen canvas too jerky. So I just rendered a large set of absolutely positioned divs, one for each character.

Reading the text is a bit tricky. I supposed that in an ideal world, the tweets would stream upwards, but I didn’t want to deviate so far from the original. And so the tweets stream down the screen, and are mostly unreadable. I have tried reversing the text, but that simply makes them harder to read. English is not a language designed for reading bottom to top.

The image in the background is taken from a png. I draw it to a hidden canvas, but draw it scaled to the same dimensions (pixels) as the grid (characters). Then, I work out the visibility (brightness+opacity) of each (now-pixellated) pixel. This is added to the “bg_opacity” property of the grid cell, which is combined with the opacity of the current character to give the effect.

It’s quite easy to swap out the list and the image, and to tune the character size, just by editing variables at the top of the script.

The code is, naturally, on Github:
https://github.com/kennethkufluk/Twitter-Matrix

Have a play, have a tinker. Let me know how I could improve the effect, and improve the performance.

Update:

I jiggled the code around a bit.  Instead of absolutely positioning each character, and setting their content and opacity each time, I now insert a row of characters at a time.  The row has spans for setting each char’s opacity.  The bird image is now a translucent canvas overlay.

Performance is significantly better, and you can use Inspector without crashing the browser, but the layering doesn’t seem to work reliably in Chrome.  I’m not sure why.  So sometimes you just don’t see the bird.

And when you see super-wide Unicode characters, it can upset the grid a bit.  I haven’t worried about that.

Update 2

I took away “-webkit-transform-style: preserve-3d;” from the body tag, and the z-indexed layers now work properly.

Kenneth > Hi. I expected installation yesterday evening, but no engineer arrived. Please can you confirm appointment time?

Ely > Hello Kenneth_, Thank you for contacting Comcast Live Chat Support. My name is Ely. Please give me one moment to review your information.

Ely > It’s nice to have you in chat! I always remain committed and determined to deliver the best customer service experience this day to you, as a valued customer of Comcast. Before anything else, I would like to thank you for giving me the opportunity to help and resolve your issue today through this chat. Despite the issue, I still honestly hope you’re doing fine, Kenneth.

Ely > Let me begin this conversation by letting you know how sorry I am for the trouble you are experiencing right now. I have been through this, myself. I understand what you are going through and this has not been a simple inconvenience on your part. To completely brighten up your day, let me tell you that this issue and your satisfaction are my top priorities for today.

Ely > I understand that you were supposed to have an installation yesterday but no one came. Is that correct, Kenneth?

Kenneth_ > yes

Ely > I see. I understand the importance of being able to confirm your installation of your services. I do apologize for the incovnience that this has caused you. I can definitely take care of this for you today.

Ely > While pulling up your account, let me share with you one of our FREE services. Comcast.net: your gateway to a world of online entertainment. Enjoy full access to Comcast.net where you can share photos, listen to your favorite music, shop, and play games. Check TV listings and access over 13,000 news and entertainment videos from Fox Sports, E!, and more.

Ely > So how are you doing today, Kenneth?

Kenneth_ > No, stop being chatty and marketing.

Ely > I apologize about that, Kenneth. I will refrain now. But yes let us go ahead and confirm your installation.

Ely > So your installation was indeed supposed to be 12/14 at 4-6PM.

Kenneth_ > Ok, so what happened? No phone call, no email, no engineer.

Ely > I do apologize about that, Kenneth. I am afraid I am not to sure either on what happened for there are no pertinent information here in your account either left by the local office that were supposed to be handling the installation.

Kenneth_ > and there’s no pertinent information on the account? how can that happen?
Kenneth_ > I mean, I’m a new customer, and already I’m unhappy. How is this a good way to do business?

We can hardly expect to celebrate with our usual joie de vivre, pulling crackers over a wobbly napkin-strewn table waiting for plates filled with myriad festive stodge, hot and cold, while our family plays the tradition games of ‘who can have the loudest conversation’.

Alas, we are stuck away from home and cannot partake. I am disappointment incarnate.

As a child, Christmas has a very tangible quality – the crinkly stockings stuffed with chocolate money, small toys and a tangerine. Waking up to the smell of the Christmas tree, heightened by the central heating and windows closed against the cold. Crisply wrapped presents to be opened and enjoyed, only to be ignored and forgotten the very next day. The only day of the year with no TV.

As an adult it becomes more awkward. It becomes more about meeting family. Relatives you haven’t seen since the last Christmas have somehow grown more distant. You have less in common, and talk is trapped down to roads and weather. And roads. And weather. You spend the day in with a vague sense of deja vu, as every conversation becomes a repeat from the year before.

But the English do Christmas. We just do. It’s like sprouts – it may not be any good, but we’re damn well going to celebrate it. It feels special.

The build-up starts in October – as we have no Thanksgiving, and Halloween is little distraction. George Michael mourns his last Christmas (you think he’d learn) from every pine-laden storefront. Oxford Street is inaccessible to all but the bravest buyer from mid-November. The weather gets colder – a lot colder – and the nights draw in. Sunset is at around 3pm, and it feels properly dark, all the time.

It’s not a religious thing. Christmas is a national event, not a religious one. It has two public holidays: Christmas Day and Boxing Day. We celebrate with Father Christmas, trees, gifts, mistletoe, snow, reindeer, holly, and food. Nothing religious, nor offensive, there.

So here we are in San Francisco, and you could argue that it’s the same. The shops have enormous wreathes on the front, and equally gigantic trees. We saw workers spend three days building the tree in Union Square. Building? Yes, building. They start with a normal tree, and the screw in extra branches to fill out the gaps and make it rounded. Shocked? It was like finding out there’s no Santa. But apart from shattering one 32-year-old’s illusions of trees, there’s no harm done. It looks good.

So there’s trees, and Santa, and elves, reindeer and all the rest. How is it different?

I’m not sure. There’s something missing.

“Happy Holidays” seems so disingenuous to me, an Englishman (or “Brit”, as they would have me). But that’s ok – it rarely gets mentioned. I remember that last Christmas I walked through St Pancras station, and they’d employed someone to spend all day dressed in Dickensian garb, to bow grandly and wish everyone in the station a very Merry Christmas. It felt real.

This just feels like a day off. Nobody has wished me a Merry Christmas here. We need that guy.

Tomorrow, Christmas Day, we’ll be headed to Safeway. It’ll be open, and so will Starbucks.
We’ll get our coffees, then go for a walk along the beach. In the sunshine.
We hope your Christmas is a bit more Christmassy.

From eight hours behind, and five thousand miles away, Merry Christmas to everyone!

@ev Also, it would be great if tweets updated automatically, and is it possible to have the favicon turn red when there’s new tweets? #AskEv

15th October 2010 8:41 pm via webReplyRetweetFavorite

@orismology

Dominic Mulligan

@orismology I don’t think it’s possible to make the favicon turn red. But we do change the page title and put the # in there. #AskEv

15th October 2010 8:45 pm via webReplyRetweetFavorite

@ev

Evan Williams

I’ve put together a quick greasemonkey script to change the favicon when new messages arrive. In #NewTwitter, it’s surprisingly easy to build simple scripts that add to the behaviour of the page.

Taking leaves from the books of Matt (Greasemonkey programming for #NewTwitter and Remy (Dynamic favicons), and using jQuery’s event delegation to capture the custom “newItemsCountChanged’ event generated within the page, I simply update a number in the favicon when messages are waiting. It’s displayed in a red circle, and when counts are more than a single digit, it just displays a ‘plus’.

    $(document).delegate('div', 'newItemsCountChanged', function(e, tweetcount) {
        // make icon and update
    });

A complication is that user scripts in Chrome are run in a separate context from the main page, meaning I have no access to jQuery, or the functions of the page. I overcame this by converting my function to a string and pasting it into the page as a script node. Hardly elegant, but it shouldn’t break the security model.

    var script = document.createElement("script");
    script.textContent = "(" + updateFavIcon.toString() + ")();";
    document.body.appendChild(script);

Why do this? Primarily to be able to be notified of updates when the tabs are pinned, and you can’t see the numbered update in the tab title. There are similar scripts available for Gmail and Google Calendar.

Why doesn’t it work in Firefox? I’m not sure. If anyone can debug, please let me know. Also, it’d be nice to capture DMs and @mentions too. Currently I’m just picking the number from the shown timeline.

To install, simply click this link. You do not need to install any Greasemonkey extension first – this will run natively!
http://kenneth.kufluk.com/greasemonkey/twitter-favicon.user.js
The “.user.js” identifies the script as installable in Chrome.

To remove, head to chrome://extensions and uninstall “Twitter Dynamic Icon”. If you find Twitter running slowly or oddly, please try removing this script first.

Source code here:

// ==UserScript==
// @name           Twitter Dynamic Icon
// @description    Changes the number on the Twitter favicon to reflect the current date, as per http://remysharp.com/2010/08/24/dynamic-favicons and http://userscripts.org/scripts/show/84382
// @version        1.0
// @author         KennethKufluk
// @namespace      ttp://kenneth.kufluk.com/blog/2010/11/dynamic-twitter-icon-with-greasemonkey-script-in-chrome/
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
// @include        http://twitter.com/*
// @include        https://twitter.com/*
// ==/UserScript==

(twitterLoaded = function() {
  if (document.body.className.match('loading')) {
    setTimeout(twitterLoaded, 5000);
  } else {
    var script = document.createElement("script");
    script.textContent = "(" + updateFavIcon.toString() + ")();";
    document.body.appendChild(script);
  }
})();
var updateFavIcon = function() {
  var canvas = document.createElement('canvas'),
    ctx,
    img = document.createElement('img'),
    link = document.createElement('link'),
    tweetcount = 0,
    head = document.getElementsByTagName('head')[0];

  if (canvas.getContext) {
    canvas.height = canvas.width = 16; // set the size
    ctx = canvas.getContext('2d');
    img.src = 'http://twitter.com/favicon.ico';

    //called on update to the displayed timeline
    $(document).delegate('div', 'newItemsCountChanged', function(e, tweetcount) {
      ctx.clearRect(0,0,16,16);
      ctx.drawImage(img, 0, 0);
      ctx.font = 'bold 10px "helvetica","Arial",sans-serif';
      ctx.textAlign = 'center';
			if (tweetcount>0) {
				// draw a circle
				ctx.fillStyle = '#FF0000';
				ctx.beginPath();
				ctx.arc(10, 10, 5, 0, Math.PI*2, true);
				ctx.closePath();
  			ctx.fill();
				// add the number
				ctx.fillStyle = '#F0EEDD';
				if (tweetcount>9) tweetcount = "+";
				ctx.fillText(tweetcount, 10, 13);
	    }
      link.setAttribute('type', 'image/png');
      link.setAttribute('rel', 'shortcut icon');
      link.setAttribute('href', canvas.toDataURL('image/png'));
      head.appendChild(link);
    });
  }
};

Please don't be too judgemental of the subject matter.

echo "track=basketball,football,baseball,footy,soccer" >tracking
curl -d @tracking http://stream.twitter.com/1/statuses/filter.json -uAnyTwitterUser:Password

That's an amazing rise.  I started university with a grant of around £700 a year and a "top-flight" bursary (provided to science students with better than AAB A-level grades) of £750 a year.  We've gone from that credit of £1500 a year to a charge of £7,000 a year in just ten years.

Naturally, the Americans, and numerous other countries, will be surprised by our concern.  A mere seven grand a year to attend some of the best universities in the world is a marginal sum, compared to the Ivy League.  Parents in the US start a college fund when their child is born.  The wealthiest parents can pay for the best education, spiced up by a few scholarship places and imported sportsmen.

But education in the UK is different, and proudly so.  For a start, like the health service, it's free.  We recognise that a good education is the basis of our economy, and the principle reason why such a geographically tiny country still has a great international standing.  But in the past ten years, something changed.  University has somehow become a right of passage, to which all are entitled, not just the rich, or smart.  The first I agree with – the second I will take issue with.  Money should not play a role in university attendance.  This is why the new fees can be paid entirely with credit.  But surely educational achievement should have some contribution?

The government aim has been for fifty percent of all school-leavers to attend university.  Fifty percent.  That's about the percentage of pupils at my secondary school who got five A-Cs at GCSE.  And that basically means that you can read, write and count to ten.  Should ALL of these pupils be attending universities?  and if so, what do they hope to achieve?

When you come right down to it, what do UK universities offer?

I would sum it up as the following:
- a qualification
- a chance to defer a decision about which career to follow
- a feeling of inclusion; that you are not 'left out' while others go away
– a chance to stay in academia

I might also add:
- the chance to drink vast quantities of low-price beer on credit
- the chance to get older by three years without working

What I think is sad about the above lists is what's missing.  I think many students are out to get 'a degree'.  A piece of paper.  A qualification which will let you claim a higher-paying job.  Employers are almost as much to blame.  We ask for a degree, sometimes a relevant degree, and we check our box on the form.  That is all.

And this works.  Why should I employ someone with a degree over someone without?  Because it's a good indication.
The trouble is that smart people go to university, but university doesn't make people smart.

IE won’t style owt if more than 31 stylesheets are loaded, but does IE8 really only style up to 24 and then stop? #fuckingbastardofacuntIE

8th September 2010 4:07 pm via TweetDeckReplyRetweetFavorite

@mattbee

Matt Bee

It reminded me that I’d asked him about this before: why on earth would you want to load >31 stylesheets? Apparently this is the fault of the Drupal CMS which attaches CSS to individual modules. Personally, if I was going beyond a dozen stylesheets, I’d seriously consider inline style at that point. Too many small files are an admin headache, and if you’re building tiny modules, then it might well be best to keep the styles with the HTML.

However, I grant that this problem exists, and that you could be put in a situation where it couldn’t be helped. For the sake of argument, you’re not using the CMS’s built-in CSS compiler because of the compile-time lag, and you’re not using Minify (which is really quick), because you don’t want to keep updating the CSS list, or something.

Either way, what you want is a workaround for the limit.

This doesn’t sound like a particularly hard problem, especially if you know the secret of IE: you can use @import statements in your stylesheets to import more. Each ‘document’ will only accept up to 32, so you have to group your stylesheets into groups of 32, and then import them.

Obviously we’re not going to do that by hand, and I’m not going to go googling for a javascript solution, because … because, well, I feel like writing one myself.

Here goes.

So, first up, let’s insert our script. I can imagine that all our CSS files are neatly loaded in the head of the document, and if that’s true, I can just add the script as the last line of the head, without needing to worry about any onload events:

...
<!--[if LT IE 9]> <script type="text/javascript" src="ie-css-limit.js"></script> <![endif]-->
</head>

Notice how I’ve also put it in Conditional Comments, so other browsers won’t be bothered.

It’s possible that your CSS isn’t in the head. If you’re associating the CSS with individual modules, and your CMS isn’t smart enough to group them all in the head, you might have stylesheet elements scattered throughout the document. In this case, we can place the script link in the same way as before, but we’ll add the defer attribute, so it only gets executed when the page loads. Note that this could confuse your page load order, so you could get some funny effects if you have other onload events relying on existing CSS styles.

...
<!--[if LT IE 9]> <script defer type="text/javascript" src="ie-css-limit.js"></script> <![endif]-->
</head>

Ok, we’re now loading a script. I guess we’d better write it.

What we want to do is rip all the link elements out of the document, and then re-import them using the @import trick from above.

First, let’s declare some variables.

//  a constant used to group stylesheets.  Twenty seems safe
var MAX_STYLESHEETS = 20;
//  get all the link elements in the document
var links = document.getElementsByTagName('LINK');
// a set of stylesheet URLs that we later want to import
var linkurls = [];

We’ll copy those links straight into an array. Otherwise when we removed stylesheets, the set will be reordered.

//  copy those links into an array
var linkarr = [];
for (var i=0;i<links.length;i++) linkarr.push(links[i]);

Ok, now let’s rip out the stylesheets and build our url array:

// Kill off our existing stylesheets
for (var i=0;i<linkarr.length;i++) {
var link = linkarr[i];
// if this isn't a stylesheet, ignore it (it could be a favicon)
if (!link || link.rel!='stylesheet') continue;
// add the href to our array
linkurls.push(link.href);
// remove the stylesheet
link.parentNode.removeChild(link);
}

And now we want to use our array to build groups of new import stylesheets:

// Create a new stylesheet full of imports
var newSS = document.createStyleSheet();
for (var i=0;i<linkurls.length;i++) {
newSS.addImport(link.href);
// if full, start a new import stylesheet
if (i % MAX_STYLESHEETS == 0) newSS = document.createStyleSheet();
}

Ok, so we glue all those bits together and stick it in our JavaScript file and bingo, we can load 20 * 31 = 620 stylesheets!

Ok, disclaimer time:

Chaining is the much-hyped process of calling multiple methods upon an object, all in one line.

$('#cup').addMilk().frothMilk().addEspresso();

It’s a simple trick to build into your functions: all you need to do is return ‘this’.

function baristaAction() {
   // do stuff
   return this
}

Most jQuery plugins do this to enable chaining, albeit with slightly different syntax. While potentially confusing, it’s simple enough and common enough to be quickly learnt.

$.fn.pluginAction = function() {
   // declare stuff
   return this.each(function() {
      // do stuff
   });
};

jQuery plugins look like this because the plugin has to act on a jQuery object, which is always an array of elements. Even when you specify an identifier, jQuery will return an array of length one, and you usually need to do your stuff on each element before returning the same set to the next function in the chain.

Using the approach above, this is clearly never going to work:

$('#cup').giveToCustomer().waitForCoffeeToBeDrunk().takeBackFromCustomer();

If we’re chaining, then none of these methods can wait for other actions to take place before returning. There’s no threading and sleeping in JavaScript.

The most common way to feign concurrency in JavaScript is to use the setTimeout and setInterval methods, particularly for animation. Asynchronicity is also found when waiting for another asset to load, for example JSON data, AJAX content or large images. These methods often use a callback function, placed either on the “onload” event of your data load, or after the setTimeout and setInterval managers have completed.

Our code could look like this:

$('#cup').giveToCustomer(function() {
    $(this).waitForCoffeeToBeDrunk(function() {
         $(this).takeBackFromCustomer();
    });
});

Nasty, right? Right? Nasty.

Let’s head away from the coffee and re-enter jQuery land.

In jQuery land, we find THIS code DOES work as expected:

$('#special-offer').show().hide().slideDown('slow').slideUp('fast');

Each action will take place in turn, the next only starting after the previous has completed.

So why are they so special?

jQuery manages this by maintaining a queue. Queues are a common programming concept: simply an array where you push new items on the end, and take them off the beginning.

var queue = [ ];
// add some items to the queue
queue.push(function() {
     //shave the woooorld
});
queue.push(function() {
     //make it a better face
});
// take an item off the queue and process it
var nextFunc = queue.shift();
nextFunc();

jQuery has built-in queues, so we don’t need to build our own like this.

For an example, here’s a really simple asynchronous method, which will make an object yellow for five seconds.

$.fn.makeYellowForFiveSeconds = function() {
    // I'm only using actions which act on jQuery objects, so I don't need to use 'each' as above.
    this.css( { 'background-color' : 'yellow', color : 'yellow' } );
    // reset the colour in five seconds time
    var that = this;
    setTimeout(function() {
        that.css( { 'background-color' : 'none', color : 'inherit' } );
    }, 5000);
    // action the next method in the chain
    return this;
};

If we use the above function like so

$('#some-element').makeYellowForFiveSeconds().hide();

We’ll probably never see the yellow. It’ll go yellow and disappear immediately. Five seconds later, the yellow disappears, and we won’t know that either because it’s already hidden. We need to recode to use the queue:

$.fn.makeYellowForFiveSeconds = function() {
    // I'm only using actions which act on jQuery objects, so I don't need to use 'each' as above.
    this.css( { 'background-color' : 'yellow', color : 'yellow' } );
    // reset the colour in five seconds time
    var that = this;
    this.queue(function() {
        setTimeout(function() {
            that.css( { 'background-color' : 'none', color : 'inherit' } );
            that.dequeue();
        }, 5000);
    });
    // action the next method in the chain
    return this;
};

Now when we execute again,

$('#some-element').makeYellowForFiveSeconds().hide();

It works as expected: the element appears yellow for five seconds, and only then disappears.
How did we get there? Well, we just popped an item on the jQuery ‘fx’ queue. Then, when our action was completed, we called ‘dequeue’ on the same jQuery object to allow the next animation to take place.

jQuery is very smart about queues. Each queue is tagged to the specific object, so queued actions on one item won’t hold up actions on another object. Of course if we wanted to do that, we’d just need to pick a common object to hold the queue, like the body. And equally, if we wanted to run two queues on a particular object, we can do that too, because both queue and dequeue will accept a queueName as first parameter. The default queue is ‘fx’, which is where the animation occurs.

jQuery’s queuing is powerful and smart. I used it in the mclaren.com website build, to coordinate actions. And of course, if you don’t like their implementation, you can always roll your own.