Henry Tapia

Under Design, Featured, JavaScript, Personal, Technical

UPDATE: Webjam 8 vids are up. Check out the Turntubelist presentation at the end of this post.

UPDATE 2: TurnTubelist is now LIVE. Go now and play with it and let us know what you think. We are still tweaking it but we decided to get it up and out there. More details to come soon…

So Webjam 8 was the biggest and best so far by all accounts. There were brilliant presentations and competition was as tough as ever, but it was to Mr Speaker’s and my absolute delight to win first prize for TurnTubelist, a little pet project we’ve been mucking around with in our spare time. Props where due, Mr Speaker (aka Earle Castledine) presented brilliantly as always in his own inimitable style, not to mention his JavaScript prowess in turning a beer-idea into something well cool. When it’s available, I’ll also put up the vid of the presentation hereThe vid is now at the end of this post.

Mr Speaker at Webjam. Photo by Halans

TurnTubelist demo. Photo by Halans

Sneak-peek at TurnTubelist

TurnTubelist is a web application that lets you crossfade YouTube videos and build your own playlists for continual YouTube fun. It currently works entirely on the client-side using HTML, CSS and lots of JavaScript (mainly jQuery). It’s not up yet but we aim to put a beta up on the web really soon.

Earle has come up with some neat wizardry that hooks up to YouTube via their API, does some nice AJAX to search for YouTube vids without interrupting playback and stores your playlists in a cookie. Not to mention, the sliders, keyboard shortcuts and a whole bunch of other stuff.

I worked on the graphics, the user interaction design and got my hands dirty with some jQuery for a lot of the user interface bells and whistles. There’s still a lot of work and testing to be done, but I think it’s just about time to put it out there to get some feedback.

Stay tuned for when we launch the beta, this thing is a hell of a lot of fun to use if I do say so myself.

In the meantime here’s the presentation video:

[kml_flashembed movie="http://www.viddler.com/simple/14659a47/" width="400" height="320" /]