Building CandiData

This past weekend, my colleague and friend Sandy Smith participated in Election Hackathon 2012 (read his take of the hackathon). We built our first public Musketeers.me product, Candidata.me. This was my first hackathon, and it was exciting and exhausting to bring something to life in little more than 24 hours. Our idea combined a number of APIs to produce a profile for every candidate running for President or Congress in the United States. The seed of the idea was good enough that we were chosen among 10 projects to present it to the group at large on Sunday afternoon.

Under the Hood and Hooking Up with APIs

We used our own PHP framework, Treb, as our foundation. It provides routing by convention, controllers, db acccess, caching, and a view layer. Along the way, we discovered a small bug in our db helper function that failed because of the nuances of autoloading.

I quickly wrote up a base class for making HTTP Get requests to REST APIs. The client uses PHPs native stream functions for making the HTTP requests, which I’ve found easier to work with than the cURL extension. The latter is a cubmersome wrapper to the cURL fucntionality.  

To be good API clients, we cached the request responses in Memcached between an hour to a month, depending on how often we anticipated the API response to change.

Sandy also took on the tedious – but not thankless – task of creating a list of all the candidates that we imported into a simpl Mysql table. For each candidate, we could then pull in information such as

  • Polling data from Huffington Post’s Pollster API, which we then plotted using jqplot. Polls weren’t available for every race, so we had to manually match available polls to candidates.
  • Basic Biographical information from govtrack.us
  • Campaign Finance and Fact Checked statements from Washington Post’s APIs.
  • Latest News courtesy of search queries to NPR’s Story Api.
  • A simple GeoIP lookup on the homepage to populate the Congressional candidates when a user loads the page

Bootstrap for UI goodness.

I used this opportunity to check out Twitter’s Bootstrap framework. It let us get a clean design from the start, and we were able to use its classes and responsive grid to make the site look really nice on tablets and smartphones too. I found it a lot more feature filled than Skeleton, which is just a responsive CSS framework and lacks the advanced UI elements like navigation, drop downs, modals found in Bootstrap.

Improvements that we could make

We’ve already talked about a number of features we could add or rework to make the site better. Of course, given the shelf life this app will have after November 6th, we may not get to some of these.

  • Re-work the state navigation on the homepage so that it plays nice with the browser’s history. We did a simple ajax query on load, but a better way to do it would be to change the hash to contain the state “http://candidata.us/#VA”, and then pull in the list of candidates. This would also only initiate the geoip lookup if the hash is missing.
  • Add a simple way to navigate to opponents from a candidate’s page.
  • Allow users to navigate to other state races from a candidate’s page.
  • Get more candidate information, ideally something that can provide us Photos of each candidate. Other apps at the hackathon had this, but we didn’t find the API in time. Sunlight provides photos for Members of Congress.
  • Pull in statements made by a candidate via WaPo’s Issue API, maybe running it through the Trove API to pull out categories, people, and places mentioned in the statement.
  • Use the Trove API to organize or at least tag latest news stories and fact checks by Category.

Overall, I’m very happy with what we were able to build in 24 hours. The hackathon also exposed me to some cool ideas and approaches, particularly the visualizations done by some teams. I wish I’d had spent a little more time meeting other people, but my energy was really focused on coding most of the time.

Please check out CandiData.me and let me know what you think either via email or in the comments below.

Tips for working with jquery

I’m a fan of jQuery because it promotes unobtrusive markup and functionality and has a wealth of plugins to take care of common web development/ajax functionality. Marc Grabanski offers some tips for working with it effectively. I’ll need to look at livequery in some apps I’ve put together. If you need to attach events to elements, and re-attach the same events when parts of the page are updated, it should make keeping track of it all a lot easier. My tip for working with jQuery? Use Firefox with Firebug to inspect the page and debug ajax requests.

5 Tips for Better jQuery Code: jQuery, Tutorial

I’ve been coding using jQuery since shortly after it came out, and well — I’ve been using it almost every work day. Here is a few tips that have saved me time.

jQuery 1.1 – Slimmer and faster

Version 1.1 of my my preferred javascript library, jQuery, was released today.  They have a great motto – “write less, do more” and as far as I can tell, they live up to it.  The release notes claim speed improvements of 10-20x for selectors over those in 1.0.4.  The release includes some interesting new features – such as passing functions for an attribute or a css property.  The flexibility of that is mind-boggling, but it could also lead to some hard to maintain code in the wrong hands.

Why do I like jQuery over say prototype/Scriptaculous?  At a very basic level, it probably comes down to personal preference, jQuery was easier for me to grok.  But what first got me hooked was its straightforward use of selectors to work on DOM elements.

jQuery selectors are a combination of CSS 1-3, XPath, plus some custom code to glue it together. Essentially, the best parts from both of these query languages were taken, combined, and used to create the final jQuery expression language. If you already know CSS (which most web developers do) then you’re going to be fine.

OOP in Javascript examples

Andres at Web 2.0 Technologies has a very informative post about how to use object oriented techniques to implement a robust event broadcasting and listening in javascript.  Follow his advise an dmake your code more reusable.

 What do you want to invoke when the checkbox object changes state? If you’re programming it
in a non-reusable way, you can hard-code the action directly into the onclick event:
if (state==checked) do X; if (state==grayed_out) do y; etc. If you’re programming it
as a reusable component, you need a more flexible solution.