tom haynes



I’ve been working on prototyping a new interface for browsing movies called FilmGrid. Here are some of the things I’ve been doing to make the design and development process smoother, faster, and more fun.


I’m using jQuery, but also TouchSwipe for detecting swipes on iPad and boxy for dialog boxes. Not having to write all this code myself is clearly a Good Thing.

I’ve also been making use of the Module pattern to make my JavaScript cleaner, more readable, and easier to refactor. My $(document).ready() function is less than ten lines of code and easily readable.

Google App Engine

GAE is great because I can develop locally, but also push a copy to Google-hosted servers with one line ( update .). That makes it super-simple to show other people the prototype. I can get feedback from someone over IM, make a change, upload it, and have them look again, all in five minutes.

GAE also can also host multiple versions of the same app at the same time. So I can have a stable version and another one for playing around with new ideas.


I’m using git for version control and hosting the source on GitHub. Even though I’m not actively collaborating with anyone on this project, having my code publicly available inspires me to write better and more readable code. It’s also really satisfying to code a new feature or fix a bug, and then commit it — it’s like checking something off a checklist.

Real content, but not necessarily live content

When I started laying out FilmGrid I just had a bunch of rectangles that represented movies. Not only was that ugly and uninspiring but it didn’t really give me a feel for how FilmGrid would actually work. Grabbing a bunch of random movies would have fixed the ugliness problem but FilmGrid’s layout is deliberate: adjacent movies are related, like browsing in a library or Blockbuster. So I wrote a script to fetch movies from themoviedb and put them in a JSON object. It’s a little slow, but I only have to run it once, and it populates the grid with appropriate content.