A few weeks ago, Sue Zoldak (@SueZoldak) approached me with a challenge. She showed me a few Flash-based live tweet sites and asked, “Can you do this?” A developer’s pride permits nothing else but an answer in the affirmative, and so, for the last three weeks, between the usual apps and websites, I devoted what little time was left to this endeavor. A word of caution before reading further: there are points where I bury the needle on the nerd meter. Please forgive me, but this does intend to be a technical account of the work.

Before I could even begin to code, there were a few questions that needed to be answered. Previously working with few aspects of the Twitter search API, I was not well-versed in its use. How far back did it search? How can I search for new tweets and old tweets at the same time? What happens to my page when Twitter fail-whales? And after I had all of the tweets I wanted, how do I efficiently present them to users?

Despite my awkward jab at the social giant, their API is very well-documented. Twitter supports what is called a REST API, which offers, among other things, a method to search for tweets. The ‘GET Search’ method allows one to request tweets from a specified user or from a specified hash-tag. Unfortunately, a less documented note about this API is that search returns tweets from only the past few days. There is no readily documented way to search all tweets – understandable considering the amount of tweets out there.

And to my question about fail-whales during an API call: well, Twitter just does its usual routine and … fails. This is not the type of response I’d like to see, but no one is perfect.

In order to support the project’s primary duty as a live-tweet display, it was decided that the web-app would have two search modes: ‘new tweets only’ and ‘all tweets.’ By setting the mode to ‘new tweets only,’ the code, every second, gets the first 50 tweets in the search API. If there are new tweets found, it puts those in a queue to be displayed in order of discovery. If there are no new tweets, the algorithm simply gives up on that specific search. When the queue is exhausted on the front-end, the app just hangs until more new tweets are found.

The other search method, ‘all tweets,’ is more complicated. It, like the other method, constantly searches for new tweets, but if no new tweets are found, it asks for the next 50 tweets. If no tweets are found there, it jumps to the next 50 tweets and continues this process until there are no more tweets to discover. During this walk through the search pages, it is regularly checking the front page of the search for the newest tweets.

Beyond this alternating list position method is one more level: a backup cache. Because the app will eventually run out of tweets from the search, there needed to be a way to continue to present tweets even if no new tweets are found.  The answer was a backup cache. Anytime the algorithm enqueues a tweet, it also adds the tweet to a cache. This cache, never exhaustible like a queue, is a last resort to supply tweets to the ‘all tweets’ algorithm.

The next challenge was how to present these tweets.  Despite my limited experience using the HTML5 <canvas> tag, I felt that should be my first research step as the technology undoubtedly offered interesting typography effects useful to this project. The honest answer is just the opposite. The <canvas> tag offers superior graphics capabilities in terms of primitive shapes, but it does not give us anything new with typography that standard HTML and CSS doesn’t already offer.

Skipping past the <canvas> tag, I set out animating the tweets. Using jQuery’s built-in animation functions, I was able to construct three core slide animations. The first was easy: cross-fade. Using the combination of two <div> tags labeled tweet_a and tweet_b, it was easy to fill the next empty box with the next tweet and use jQuery’s fadeToggle() feature to hide one while showing the other. ‘Slide’ is the second transition. This is done by setting the next tweet’s CSS top property to the height of the window and calling jQuery’s animate() function to move that tweet to the center of the window and the old tweet’s top property to the inverse (negative) of it’s own height to hide it from view. The last transition, aptly titled ‘Poof,’ is a combination of the two previous functions. It cross-fades while sliding the old tweet off of the page.

More than animated tweets, this app is visually customizable. Users may change the colors and background image as they see fit using the ‘Advanced’ view. In the future, I intend to add more (better) features such as other transitions and other style controls along with the ability to save the customized views as a visual ‘theme’ of sorts.

This project is only at version 1, and there is much more to be done! Please tweet me suggestions or comments at @johnjones4!

Recent Posts By John E. Jones

• Mobile Strategy Doesn't End with Your Website - April 29th, 2013
• Really Simple Syndication (d. 2013) - March 14th, 2013
• Watch Your Websites Carefully - December 13th, 2012
• Washington Post Unveils API - September 6th, 2012
• The New Frontier of Mobile Apps with Mitt Romney’s VP Announcement - August 13th, 2012