Caplin has for a long time pushed the limits of native browser technology, and with HTML5 it seems clear that its time has come. The Caplin HTML5 Hackathon was run in order to develop new HTML5 features to be used in our Caplin Trader front end.
The Hackathon was an enormous success, and each of demos produced an idea or a result that will be taken forward. There wasn’t a single disappointing entry – some were cunningly innovative, all of them were interesting and stimulating, and the best ones were truly excellent.
A total of 13 teams, each comprised of up to three people, entered and worked hard (some even throughout the night!) over a 24 hour period. Pizza, Red Bull, and a quiet snooze room were all provided to fuel the teams. The whole company gathered to watch the team’s presentations from 3pm the following day.
Hackathon Runners Up
Team 404 focused their efforts on how CSS3 could be used in Caplin Trader. Andy Lyons, Priyank Vyas and Ruth Schembri wanted to identify areas of the application which relied on images and used CSS3 to replace them. The team made use of features such as rounded borders, gradients, drop shadows and image transitions. The key benefits in this approach are that it drastically reduces time spent creating graphical assets in Photoshop, it loads faster, it’s scalable and is very quick and easy to change.
There were four (yes, four!) winning teams who came out with equally impressive results.
Team TDD Prototyping
My entry (as team TDD Prototyping) investigated the drag and drop API, which allows drag/drop interactions within the browser window, between two different browser windows, and to/from external applications such as Excel.
Team of two “Team Bonza” (Marc McIntyre and Justin Sorbello) wowed the judges with their examples of sparklines within real-time grids which could be expanded (and collapsed) into full size charts embedded within the grid.
Breach of Protocol
Last, but certainly not least, “Breach of Protocol” (Dominic Morris and Adam Iley) teamed up and implemented WebSockets connectivity for Caplin Trader. Unfortunately their fantastic achievement is likely to be temporarily impacted by the announcement yesterday that Firefox 4 has disabled WebSockets due to a security issue.
There were three one person-teams who deserve special recognition.
Henrik Vendelbo presented “Re-thinking UI Delivery” where he re-thought a trading web application in classic HTML5/AJAX terms and presented an app that ran and displayed equally well in a desktop browser and a tablet. CSS3 was used to present information spatially, leveraging our innate visualness. The layout was one big continuous page/canvas, with the workflow shifting the user around the page and automatically adapting to browser window size changes on the desktop, and rotation on a tablet.
Weisheng Liu went on to present “HTML5 charting from scratch” which used SVG to build real-time charts based on the price data coming from Liberator. The chart zoomed in and out automatically and was easily resized using the resizable div (a new feature in CSS 3).
Finally, congratulations to Damon Smith – for (on his first day at Caplin!) delivering a very cool graphical panel transition feature using the HTML5 Canvas objects – on opening/closing, the panel spun off in the distance.
The winners each received a driving experience day at Great Tew in Oxford, where they will get a chance to get behind the wheel of not just one, but four different supercars including the Italian thoroughbred Ferrari 360, the track-inspired Porsche GT3, the stunning Lamborghini Gallardo, and the turbo charged Subaru Impreza WRX.
Thanks to all who participated – looking forward to the next Caplin Hackathon!