In the Thick of It with #TSATime

Posted Wednesday, December 1, 2010 at 12:08 p.m. by Chris Amico in Frameworks for Reporting , Lessons From... and Projects about JavaScript, journalism and programming

Taxi line to get out of DCA took longer than the security check to get in #tsatimeMon Nov 29 via Twitter for iPhone

By now, the uproar over invasive screenings at airports around the country is starting to feel like an old story, or a story that never was. The big story ended up being that it wasn't that big a story.

In the weeks leading up to Thanksgiving, it was *the* story (at least in the way there must always be a story designated as the story). To cover it, my colleagues at PBS NewsHour decided to ask those of us flying over the holiday weekend to tweet how long it took to get through security, especially on the busiest travel day of the year, when protesters were organizing a mass opt-out day that threatened to gum up what looked like an already over-taxed system.

I heard about the idea Monday. I was flying from DCA to LAX on Wednesday morning. Dog food would be eaten.

We built the widget embedded in this post in about 36 hours, using nothing but javascript and the Twitter Search API.

Backless

Here's something we learned from the oil ticker: Only build a database backend, or really anything that requires server-side code, if you must. Databases are great for storing data. Django is great for organizing it. I'm a fan of the full stack, but scaling web applications is something I'm still figuring out.

Flat pages, on the other hand, scale beautifully.

Backboned

Fortunately, javascript just keeps getting better and easier. Thank the good people who brought us jQuery, and the ridiculously smart folks at DocumentCloud.

Here's how #TSATime works: When a user loads a page, an Ajax call executes a Twitter search using JSONP (so we can do cross-domain calls). That search query includes a hash tag (#TSATime) and may or may not include a three-letter airport code (DCA, IAD, BWI, etc).

The response includes a refresh_url key, which is used for all subsequent queries, so we only grab new tweets. The page polls Twitter every 20 seconds, adding new tweets to the top of the stack.

Using Backbone.js, we can handle this in about 250 lines of uncompressed and much-commented javascript.

The trick here is the way Backbone does MVC. Tweets arrive with a full set of attributes, which fit nicely into a Backbone model. Each tweet has a view, with a template and a render method that returns a block of HTML.

A search result is a collection of tweets, with metadata pointing to the URL to query and methods to start and stop polling.

The tricky thing here is overriding Backbone.sync, the global function that tells Backbone how to interact with data on the server. In this case, our server is Twitter.

The one downside to doing this is (as noted in the code) that it makes the app read-only. We couldn't push anything back to Twitter (had we wanted to). We also didn't store any tweets for later analysis, though we could easily to that separately.

The Plural of Anecdote is Data

Or, as we used to call it, reporting. What I like about this project is the way it asks the obvious question underlying the basic assumption of the past week's news cycle: Is the extra TSA screening a problem? Certainly it is to some people, and I don't want to downplay the humiliation that some travelers have endured or overstate the effectiveness of full-body scanners and grabby pat-downs.

But lots of travelers (including myself and my wife) went through airport security in record time. At DCA, some passengers go through full-body scanners. Many (including us) went through ordinary metal detectors. The same was true at LAX.

Casting a wider net let us get more nuance than "Don't touch my junk", and gave us something closer to data than anecdotes and shouting.



Comments:

Comments are closed for this post. If you still have something to say, please email me.