jQuery + Twitter + a night of coding

Building a simple web mashup in 1 night..

I've always used prototype and scriptaculous to do JS stuff in the past. However I've been hearing a lot of good things about jQuery and i'd noticed that sites i'd seen using jQuery seemed to have much smoother animation etc.

So in the spirit of keeping an open mind (and continuing to learn.. something I don't find myself doing that often anymore) i set about building a simple JS based web app to test how jQuery would suit my programming etc..

After about 4 minutes of brainstorming, I found myself getting annoyed, and switched to my Tweetdeck to distract myself. In a semi-relevant aside, i have to say, tweetdeck makes my twitter usage about 100x as useful.. plug!

So i decided it would be cool to try knocking upa simple Ajax application that emulated Tweetdeck's searching features - using the search.twitter.com api (previously summize).

So i downloaded jQuery, and set up 3 simple div based columns to hold the tweets i was going to be grabbing. The beautiful thing i discovered with jQuery is it can cross domain ajax requests, so i can talk directly to the search.twitter.com api without having to write a proxy script on my server - cool!

The twitter search API has an option to return JSON data, which is really great for building an app like this, since we end up receiving the data and handling it all in JS with no decoding necessary.. too easy.

So, we have our 3 divs and at this point I started to get my hands dirty in jQuery (i'm not a complete beginner, but i never really used it extensively.. so i was keen to see how it was compared to prototype). Turns out, within 10 minutes of starting, i had fallen in love with jQuery's selectors, they are so much simpler and more flexible than prototype.. coupled with the style of programming that jQuery promotes, using it's each() method to map responses to all the results of a selection, it turns out that writing relatively complex JS applications is a piece of cake.

Below is the code listing for the guts of the application it is the response to the Ajax call, it receives the JSON response from the twitter search api and turns each tweet into a div and prepends it into the relevant column of data.

$.getJSON(url, function(json)
{

    // clean up old ones:
    $('#col'+x+' div.tweet:gt(10)').each(function(){$(this).fadeOut('slow')});

    $(json.results).reverse().each(function()
    {
        if($('#col'+x+' .tweets #tw'+this.id).length == 0)
        {

            var divstr = '<div id="tw'+this.id+'" class="tweet">'+\
            '<img width="48" height="48" src="'+this.profile_image_url+'" >'+\
            '<p class="text">'+this.text.linkify().linkuser().linktag()+\
            ' -&nbsp;<b><a href="http://twitter.com/'+this.from_user+'">'+\
            this.from_user+'</a></b></p></div>';

            window.twitter['last_id'+x] = this.id;

            $('#col'+x+' .tweets').prepend(divstr);
            $('#col'+x+' .tweets #tw'+this.id).hide();
            $('#col'+x+' .tweets #tw'+this.id+' img').hide();
            $('#col'+x+' .tweets #tw'+this.id+' img').fadeIn(4000);
            $('#col'+x+' .tweets #tw'+this.id).fadeIn('slow');

        }
    });
    setTimeout('fetch_tweets('+x+')', 3000);
});

There are a few more tricks in here, like linkify and linkuser, which have been prototyped into JS so that i can convert the links for twitter on the fly (if you're really interested, grab the JS source off the site and have a poke around).

So how did jQuery compare to Prototype? Once i got over my tendency to want to write Prototype JS into my files, i've actually come to prefer jQuery I find myself writing much prettier, more elegant code, without the iteration and procedural work I usually do in Prototype. jQuery is a definite winner, and i will slowly be moving all my sites over from using prototype to jQuery.

So i now had a single working HTML file that produced 3 twitter streams in ajax.. what should i do with this useless piece of concept code? I know, turn it into a site.. so at 4am I bought http://monitter.com as a domain to host my twitter monitor (if you can't get the play on words, give up now).. Fired up photoshop and created a simple logo, favicon and a couple of simple textures.. tidied up the CSS a bit, added in some update-your-browser.com ie6 messages and uploaded the files.. voila Monitter is born... check it out: http://monitter.com - tell your friends! be sure to give me feedback in the comments here.. and keep smiling.