Introducing Crictainment


Update: I’ve been working on transferring this into a native iPad app. See the newer post here

I want to introduce an app that I worked on this term for Yahoo!’s Hackathon. It’s called Crictainment and it’s a mobile web app that curates media related to cricket (you know, the sport).

Screenshots

I originally¬†presented at Yahoo!’s company-wide summer hack event (where it won best iPad Hack, yay go me!). It’s been open-source for a while but I actually haven’t talked much about it outside of work.

So what exactly does it do?

Crictainment is a mobile web app that pulls in cricket news, videos and photos from a half-dozen cricket sites and presents them to you in a curated manner.

What does it do?

Crictainment gathers news and views from popular cricket news sites and displays them all in a nice interface, optimized for the iPad. It allows you to read these articles without any distractions. Cricket sites are pretty badly designed so I made this.

In addition to the articles, the app also allows you to scroll through and watch videos and view recent photos. Check out the screenshots in the gallery above.

Why did I make it?

  • I’m a cricket fan
  • nothing in this app uses device-level capabilities so I wanted to test out JS performance on device
  • I could not finish a native app in the 24 hours that it took me to make this.
  • I was tired of visiting different sites to get different points of view.
  • I want an app that works cross-platform.
  • I wanted to experiment with HTML5 and mobile performance.

Technical Details

  • All HTML5/CSS/JS.
  • All open source.
  • MVC Architecture (rolled my own miniature framework using YUI3 custom modules)
  • YUI3 for widgets/scrolling
  • YQL/Pipes for pulling in data and feeds
  • Optimized for iPad (in terms of viewport, meta tags, etc.) Just add it to the iPad home screen and check it out.
  • “Native feel” when browsing the app. Animations are all CSS3-based.

Things may break in the future

This is a hack after all. I am doing quite a bit of scraping to get data off some of the sites since they don’t have RSS feeds or APIs. Also, since most of the work was done during a hackathon, I’m sure there could be errors that I’m not handling. Bugs should be anticipated, but I think I’m a decent coder so it should still work! You should open this on an iPad for the best experience. The desktop version is still a little iffy with the scrolling.

Leave a Reply

Your email address will not be published. Required fields are marked *