Practical example of jQuery 1.5’s deferred.when() and .then()

"“Fun with jQuery Templating and AJAX” by Dan Wellman is a generally interesting article, but I found the code in the “Getting the Data” block especially interesting – see how each get function RETURNS the $.ajax function call, which can then be called inside a when() function, vastly simplifying the workflow (there’s an error in the listed code – getTweets() is supposed to return the ajax function, not simply execute it).

http://net.tutsplus.com/tutorials/javascript-ajax/fun-with-jquery-templating-and-ajax/

Even more interesting is this pattern, suggested by commenter Eric Hynds (whose blog has now been added to my Google Reader list):

http://net.tutsplus.com/tutorials/javascript-ajax/fun-with-jquery-templating-and-ajax/comment-page-1/#comment-357637

$.when( $.get('./tmpl/person.tmpl'), $.getJSON('path/to/data') )
   .then(function( template, data ){
      $.tmpl( template, data ).appendTo( "#people" );
   });

The deferred.done() and then() methods will take as arguments the results from each function called in the when() function – in order – i.e. the output of the get will map to template, and the output from the getJson will be mapped to data.  This is pretty sweet!

Perhaps a simpler to observe example of the behavior is shown here: http://jsfiddle.net/austegard/ZaFVg/ - no prize for correct guesses as to the result of this…

/* Hello and World are both treated as resolved deferreds - they 
can be replaced with any function, like a $.get, etc */
$.when( "Hello", "World" ).then(
   function(x, y){ alert(x + " " + y); }
);

Scandinavia in 6 words or less

From the very interesting mashup of what you get when you cross Google Suggests with a Venn diagram, here is Scandinavia:

About right, if you ask me.

Random Info Chart - DC Schools Test Results

Google public data explorer has a slew of interesting datasets, including test scores for DC schools.  It goes to show that you can’t judge every DC school with a single statement, other than perhaps to state that the achievement gap between good and bad DC schools is far too wide:

The Squrl Lives!

I gave up on my homegrown url-shortening exercise, squrl.us, about a year and a half ago – it started as an experiment in MVC, which I tried to port to server side js, but lack of time and interest got the better of it.  So I shut it down.

Now, thanks to bit.ly Pro, squrl.us is back!  Just too bad I can’t get the cool logo Sean made for me up on the site… :-(

Seadragon.com is now Zoom.it

Microsoft Live Labs recently rebranded their SeaDragon public Deep Zoom service ‘Zoom It’ and put it at http://zoom.it

They now have an API for Silverlight, .NET and JavaScript, allowing you to submit the url of your image to deep zoom, returning the url for your Deep Zoom Image (DZI). Or, for the non-programmatic approach, you can simply submit your url through the browser at http://zoom.it (the same way you could previoously through seadragon.com).

Completed DZIs are given a very short, incremental url, e.g. http://zoom.it/10ms, and you also get the embed code to put the image on your own site, like so:

The embed code for the above is exceedingly simple:

<script src="http://zoom.it/l6BK.js?width=auto&height=400px"></script>

Fun with 1000 Rolling Stone covers, AndreaMosaic and the Deep Zoom Composer

UPDATE 08/11/2011: See post about the new archive, now also for the iPad here: archive.rollingstone.com – another feather in our cap

Having finished helping Rolling Stone magazine put their archive online (our company, AIS, together with Bondi Digital, did the Silverlight-based archive portion (more on the project later, potentially), another company did the main site), I decided to get artsy by generating a mosaic of the latest issue cover, by using thumbnails of some 1000 previous covers.

AndreaMosaic worked beautifully in creating the mosaic, and even pre-generating the starting point for a Deep Zoom image.  I opened that in Deep Zoom Composer, and generated both a Silverlight and an Seadragon Ajax version of the composite.  I then uploaded the whole shebang to my public s3 bucket.

It all took a bit of fiddling to get right, but if I had to do it again I could probably do the whole thing in 5-10 minutes…  It’s that easy. (Seriously, this blog post is taking longer…)

• Seadragon version
• Silverlight version

Of course, now that I’m putting in all the links in this post, I realize I could have simply hosted this at seadragon.com…  Oops.

UPDATE:Since MS is so kind to do the processing for me, I figured I might as well create a bigger version of this. The following is around 180MP, made up of 3000 tiles, each 300px tall... Click the full screen button in the embedded viewer for the best effect.

Update, May 12th: ...and here's the latest 2-page cover:

More complicated JavaScript string tokenizer – and Twitter Conversations

(I'm not sure when I started using the term tokenizer - "formatter" may be more common...)

I’ve experimented in the past with a C# string.Format() alternative that would allow property names as tokens rather than the numeric index based tokens that string.Format() uses.  Hardly a unique approach, and many others did it better.

Here’s another first-draft ‘tokenizer’, this time in JavaScript:

String.prototype.format = function(tokens) {
///<summary>
///This is an extension method for strings, using string or numeric tokens (e.g. {foo} or {0}) to format the string.
///<summary>
///<param name="tokens">One or more replacement values
///if a single object is passed, expects to match tokens with object property names, 
///if a single string, number or boolean, replaces any and all tokens with the string
///if multiple arguments are passed, replaces numeric tokens with the arguments, in the order passed
///</param>
///<returns>the string with matched tokens replaced</returns>
  var text = this;
  try  {
    switch (arguments.length) {
      case 0: {
        return this;
      };
      case 1: 
      {
        switch (typeof tokens) {
          case "object":
          {
            //loop through all the properties in the object and replace tokens matching the names
            var token;
            for (token in tokens) {
              if (!tokens.hasOwnProperty(token) || typeof tokens[token] === 'function') {
                break;
              }
              //else
              text = text.replace(new RegExp("\\{" + token + "\\}", "gi"), tokens[token])
            }
            return text;
          };
        case "string":
        case "number":
        case "boolean":
          {
            return text.replace(/{[a-z0-9]*}/gi, tokens.toString());
          };
        default:
            return text;
        };
      };
      default:
      {
        //if multiple parameters, assume numeric tokens, where each number matches the argument position
        for (var i = 0; i < arguments.length; i++) {
          text = text.replace(new RegExp("\\{" + i + "\\}", "gi"), arguments[i].toString());
        }
        return text;
      };
    };
  } catch (e) {
    return text;
  }
};

The comment (in VS Intellisense format) is pretty self-explanatory, note that it doesn’t allow any special formatting as String.Format does, nor does it even support escaping {}‘s – in general it is quite crude.

That said, when used within it’s limitations it works - below are a couple of actual usage scenarios, both from my ongoing Twitter Conversations experiment:

var url = "http://search.twitter.com/search.json?q=from:{p1}+to:{p2}+OR+from:{p2}+to:{p1}&since={d1}&until={d2}&rpp=50".format({ 
  p1: $("#p1").attr("value"), 
  p2: $("#p2").attr("value"),
  d1: $("#d1alt").attr("value"), 
  d2: $("#d2alt").attr("value")
});

and

$.getJSON(url + "&callback=?", function(data) {
  $.each(data.results, function(i, result) {
    content = ' \
<p> \
	<a href="http://twitter.com/{from_user}"><img src="{profile_image_url}" />{from_user}</a> \
	(<a href="http://twitter.com/{from_user}/statuses/{id}">{created_at}</a>): \
	{text} \
</p>'.format(result);

The working Twitter Conversations sample is here, as you can tell it’s really just a wrapper around the Twitter Search API.

Twitter Conversations: More fun with Yahoo Pipes

<Preface>
Lets imagine that you can’t actually do all of this directly in Twitter Search like this:
http://search.twitter.com/search?q=from:jaketapper+to:senjohnmccain+OR+from:senjohnmccain+to:jaketapper&since=2009-06-16&until=2009-06-16&rpp=50
</Preface>

(Now contrived) How To follows:

I stumbled upon an impromptu (or so they claim) twitter interview between Jake Tapper (@jaketapper) of ABC and Sen. John McCain (@senjohnmccain).  Unfortunately, short of following both of them, it was hard to get a gist of the actual conversation – I tried the Conversation view on Twitter Search, and a couple of other services, like Tweader (appears broken) and Quotably (dead).

Twitter Search has an advanced search/allows parameters to specify searching for tweets from one person to another, but that only gives you half a conversation.  And as far as I can tell, Twitter search doesn’t allow multiple from:/to: pairs.  Enter Yahoo Pipes’ union module:

This module merges up to five separate sources of items into a single list of items.

Since Twitter Search results can be had in both Atom and RSS flavor, this means we’re good to go:

<interlude> 
…and this is where I discovered that you could indeed do duplex conversation searches in twitter search, so the rest of this will be short…
</interlude>

See http://pipes.yahoo.com/austegard/twitterconversations; click View Source or Clone to play with it (requires Yahoo id).