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.
Runners up also included James Turner, Ashish Jagtap and Andrew MacLeod, who, as “The Web Workers”, used Web Workers to show how browser GUI responsiveness can be significantly improved by using them for computationally intensive JavaScript operations. By offering some degree of native multi-threaded support, this closes the gap between JavaScript web applications and desktop applications.
Hackathon Winners!
There were four (yes, four!) winning teams who came out with equally impressive results.
Team Chainsaw
Team Chainsaw, consisting of Lawrence Owusu, Neal Dangerfield and Aleksei Loktionov used the HTML5 web database and web workers to output JavaScript logs (SL4B logs) in a secondary storage (Web database). This allows the user to retrieve the logs on demand, typically when an issue occurs and developers want to investigate the issue. I was really glad that this received the recognition that I felt it deserved from the judges as it wasn’t the most visually exciting usage of HTML5 features, however it solves a very real world problem elegantly (detailed logging is incredibly expensive within a real-time financial application).
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 Bonza
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.
Individual Commendations
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.
Winner’s Prizes
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!