Yahoo! Open Hack All Stars

After two years of waiting, Yahoo! finally set a date for their global hackathon*, the Yahoo! Open Hack All Stars, to bring together all their Open Hack and HackU winners from around the globe to compete against each other. I was part of a team of three (with Rory Tulk and Aran Donohue) that won the Canadian HackU event which was hosted at both the University of Toronto and the University of Waterloo in 2009.

The 2009 HackU event was memorable, if only because our team surprised Yahoo! who had put more time and resources and had more teams competing from Waterloo (a school better known for Computer Science because it’s the birthplace of the Blackberry). Our team was the only Toronto team to demo and we demoed over Skype from Aran’s cubicle. Our hack was a collaborative online document editor called Docuvine (later renamed Pagical) with a “live copy” feature that allowed you to pull in any web content that would automatically be kept up to date. For example, you could write a report that would always include the latest data from an online spreadsheet or the latest tweet from someone’s Twitter stream. This hack also ended up getting Aran and I an interview at YCombinator (which we didn’t end up getting selected for) but that’s a story for another time.

Back to the present, it ended up that only Rory and I could make it to the Open Hack All Stars event in NYC. Like the Startup Weekend event, Rory and I had just 24 hours to create some new and interesting software with the additional requirements that it should use Yahoo! technologies and target the digital media publishing space (because the Open Hack All Stars event was running in parallel with Yahoo’s Global Partner Summit whose attendees the finalists would demo to).

Given the rise of photo journalism online and the popularity of sites like Boston.com’s Big Picture, we decided to create a browser extension for Google Chrome that would automatically transform traditional newspapers’ homepages into a more photo-centric news experience. This would allow consumers to visually browse the latest news articles while still having the option of reading the full text coverage of each article. And all with no site changes or work required on the part of publishers.

We used YQL to fetch articles from sites, Readability to extract the article text and images and jQuery with the Masonry plugin to build our photo layout in a gratuitous but impressive animated sequence. The most time intensive part of our hack was converting the Readability library to work with arbitrary pages rather than just the current page. In an homage to how Readability makes sites easier to read and how we were attempting to make sites easier to visually browse, we called our extension Viewability.

For our demo, we used the National Post as our example publisher site. If you’re using Google Chrome, you can see it in action yourself by downloading and installing the Viewability extension and then visiting the National Post site. It currently only works on the National Post site but it wouldn’t be hard to add support for other sites. And, it can also be easily converted to work as a standard bookmarklet. For our demo though, I found that it worked faster as an extension but using web workers might solve that.

Below are screenshots of what the photo browsing layout and the single article view look like. The most impressive part is of course the animation (you can get some sense of how the animation worked without installing the extension by playing with this jQuery Masonry demo).

The photo browsing interface with captions and mouse over article snippets.

 

The full text article view users see when they click on a photo from the photo browsing interface.

 

In the end, Viewability was one of the top six finalists but didn’t come out on top. So it ended up being a nice all expenses paid trip to NYC (though outside of a late night bus tour, all the contestants spent 99% of their time in a hotel writing code – and loved it).

*Hack in the sense of building software and not the illegal breaking into computers sense.