HTML5 Hackathon – August 2011

We held a HTML5 hackathon on Aug 6-7 2011. AOL Ireland were kind enough to offer their premises to host the event. 19 people showed up for the event, with a varying mix of skills and experience – some students, some experienced developers with  no HTML5 experience and some folks with a bit more exposure to HTML5.

As is usual, prior to the event, we had a little bouncing around of ideas – there were not a huge amount of ideas put forward, but enough to get people thinking. When we met on Saturday morning, we went through the various things that folks might be interested in working on. There were about 10 ideas proposed – given the size of the crowd and the fact that teams of 2/3 people would find it a bit difficult to co-ordinate over such a short period of time, we only needed about 6/7 ideas. After asking which projects people would like to work on, we managed to whittle the initial list down to 7 easily. Thus, the teams and projects were decided on in about an hour and people got to work before lunch on Saturday.

The teams spent the next two days working quite intensively on their projects – all of the teams worked in a single space and there was a really good vibe about the room; everyone was working diligently, but there was no specific pressure which made for a good working environment. (On Sunday, Rob was doing DJ and his groovy tunes added to the ambiance). All of the teams then showed their wares on Sunday evening.

Most of the teams managed to do something interesting – at worst, all of the teams learnt something interesting about HTML5, with most of the emphasis on some of the new Javascript APIs. The projects that each of the teams worked on are listed below:

  • Music mixing system using the new HTML5 audio interface: the new audio interface is quite flexible (although its functionality is somewhat dependent on the browser in use). The interface provides for mixing of different audio samples within the browser and hence it is reasonably straightforward to develop a basic audio mixing. Marcin and Monika put together a tool which has a nice UI on top of this functionality and can be used to mix different sounds (eg different drum sounds) at different tempos and generate a backing beat for some music directly from the browser. Their tool works slightly differently in Chrome and Firefox (better timing in the former; some illustration of played out audio in the latter), so it’s worth trying it out in both. [Link to mixer];
  • A geotagged photo sharing application based on HTML5: In this application, Noel and Shane put together a PhoneGap based application in which a photo could be taken on a mobile app, geotagged and uploaded to a server. The server could then show photos taken on a map and photos taken nearby could be viewed. The app used PhoneGap to access camera functionality on the phone, as this is not covered by HTML5 as well as the Geolocation API to determine the phone’s location. The guys wrote a Java based backend which supported file upload and mapping of the locations. The guys plan to move it forward and should probably demo it at our next GTUG;
  • Client side Websockets based whiteboard application: The objective of this project was to build a websockets based whiteboard application, ideally one with no server. The team found, however, that it was necessary to have a simple server component which could be used to broadcast the websockets information to all the clients that were accessing the shared whiteboard. The team managed to develop a canvas based whiteboard on which it was possible to draw (with different colours) and add post its [Non network demo showing canvas functionality here – team working on making networked variant live];
  • Dublin Traffic Camera application: At one of our previous hackathons, Raphael and some of the guys worked on a Dublin Traffic Camera application – an application in which it was possible to see the state of the Dublin road network using the cameras mounted around the city and understand where there are congestion points. This work was developed further by enabling an individual to choose a set of cameras they are interested in (with a nice use of the Drag & Drop API), local storage of their preferences (using the Local Storage API) and some animation of the images to show the change in congestion with time [Demo/link?];
  • Traffic alerting and congestion detection application: This project involved the development of a HTML5 interface to a backend which had been previously developed. The backend supported live monitoring of traffic information to determine traffic congestion (by detecting slow moving traffic) and alerts of incidents on the road – a user can notify the system that there is an incident at a particular spot and users nearby can receive this via a notification. This project made use of the HTML5 Geolocation API on the front end to determine the device’s location and mongoGB on the backend to identify events proximate to the user [Demo/link];
  • Sync local filesystem with Google Storage: The last project was something of a hair-brained scheme that I had – I thought it was possible to use the Filesystem API to access the local filesystem and this could be synced with Google Storage using functionality in a browser. However, it turned out that the Filesystem API only affords access to a local sandbox. We did shift emphasis to a collaborative file sharing project for music applications, but the permissions on Google Storage looked a little more difficult to deal with than we had first considered. We did not get a lot done, but we managed to store content in the sandbox filesystem, read from it, control a HTML5 audio player and talk to Google Storage. However, we didn’t really get anything working which makes a nice demo.

Overall, everyone had great fun; some of the outputs were impressive and everybody learnt. One of the key takeaways was that it is still early days for HTML5 and there is still significant disparity between what the different browsers support. Another interesting point was that it is more likely that HTML5 will get traction first in the mobile space as devices are changed much more frequently meaning that there are a lot less legacy issues to deal with.

We’ll give a report on this event at our next meet – Aug 30th – and some of the guys will probably demonstrate what they managed to do.

Thanks again to AOL for providing a great venue and generally being great hosts.


About morphousmusings
Engineer, thinker, tinker, drinker, talker, walker, hiker, biker, liker, lover

5 Responses to HTML5 Hackathon – August 2011

  1. Good post. You’ve managed to reflect the atmosphere of the event very well.
    Regarding the whiteboard project I was involved in, just simple fix – instead of “echo” it should be “broadcast”.
    And the demo is here: but as the server is down it’s only the offline canvas functionality available at the moment. There is a plan to move serverside from jWebSocket to Node.js.

  2. Jos says:

    It was great fun guys! thanks to everybody involved in the organisation.

  3. The links the Dublin Traffic Camera are:
    First version, before the week-end:
    HTML5 version, still work-in-progress:


  4. Pingback: September 2011 GTUG Meet « Dublin GTUG blog

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: