About Me
I am a web developer with over 18 years experience. I create high-scale, high-performance web apps and websites, and have worked across many products including ecommerce, social, PWA and AMP pages, to name but a few. I am extremely experienced in front-end technologies and progressive enhancement, and I like to take advantage of the latest advances in browser APIs such as Service Workers to maximise user engagement and satisfaction. I am truly passionate about development and I enjoy creating intuitive, performant, innovative user interfaces and breaking down complex problems into manageable and easily understood solutions.
Key Skills
| Javascript |
|
| HTML/CSS |
|
| Server |
|
| Tools |
|
| Reporting |
|
Employment
Dennis Publishing - Front End Developer (Contract)Nov 2016 - Jan 2018
BuyaCar
One of Dennis’ most important subsidiaries is BuyaCar (BAC), which sells new and used cars online. The backend is in Drupal behind a Varnish cache, due to dynamic nature of the site, most features have to built with Javascript and a React-esque library, Riot JS. My projects for BAC have included:
Search Page
An API driven search page with its filters built on HTML naming conventions. There are no hard coded requirements, as long as the API follows the schema, filters can be added and removed as needed without intervention. The page follows browser conventions as closely as possible to provide as native an implementation as possible, these include using the History API so URLs change dynamically and are in turn, fully shareable, along with native controls where possible for mobile. To achieve SEO visibility, it also dynamically creates fully compliant JSON+LD entries to allow indexing. GA ecommerce Product List tracking allows to fully track list visibility and conversion.
Forms
When users have decided on a car, they need to submit their details to BAC, these forms used to be hard coded and inflexible, I built a form system based on a JSON feed and HTML5 Constraint Validation API. This enables forms to be created quickly and dynamically by creating a JSON object and avoids the need for manually creating Javascript validation libraries. Using Regular Expressions in the HTML pattern attribute, CSS and native browser validation can do the heavy lifting of validation, specific input types enable mobile users to fill out the form quickly and autocomplete hints enable the browser to complete the majority of the form. These forms have increased conversion by 20% with desktop and mobile user’s time to completion is roughly the same.
Car Deal Page Gallery
A performant responsive gallery built with Riot JS. If CSS Scroll Snap support is detected on mobile, scrolling between images is handled by the browser’s native scroll giving a more natural feel. Also for mobile users, an enhanced full page gallery is available, with double tap to zoom and pinch to zoom support. Alongside nice features such as disabling page zooming when open which can lead to UI elements disappearing and the page being in a different state than when the gallery was opened. Also on this page I implemented Vehicle microdata.
Build to Order Options Page
When ordering a new car, a user can select various options, what colour they want for example, but of course you can’t have two colours for the same car. The combination of options is effectively limitless and this is before “Packs” are included, which can change multiple options of the car in one go. The complexity grows as more options are added and conflicts between options escalate, my task was to create the logic to work out and prevent conflicts, then when a conflict does arrive, present the user with an understandable dialog as to which options they choose.
Other Dennis projects
Performance
One of the first projects I worked on for Dennis was improving the front-end performance, this including auditing sites and delivering front end best practice such as how assets are loaded and perceived performance.
For one site, The Week, which has four million unique visitors a month, this resulted in:
| HTML | 31% reduction | CSS | 63% reduction |
| JS | 46% reduction | Fonts | 23% reduction |
| Page load time | ~1 second from 2.2 seconds ~55% reduction | ||
These optimisations reduced data served by 1.39 Terabytes (or 1,430 Gigabytes) per month. The reduction in page load time saved users 56 days NOT waiting for the page to load per month.
To demonstrate the final results, here is a before and after video of The Week loading on a regular 3G network connection.
During this audit, I also noticed that JS performance seemed sluggish, looking into it I discovered one of the libraries used was implementing a bind polyfill that was overwriting the browser's native method, slowing down all Dennis sites, this polyfill was 4500% slower!
Spotter - Lead Developer (Side Project)2015 - Present
Spotter is a side project I work on with former colleagues in my spare time. It an affiliate based business providing gyms and personal trainers access to thousands of fitness related products which they can recommend to their clients. Once their clients buy the recommended products, the trainer in turn receives a share of the commision.
It is a mobile optimised Progressive Web App built in React and browserify. Being the only front-end developer on the project allows me to promote and implement the latest technologies such as Service Workers, Web App Manifests, Web Share API among others to further the business. Airtable, GTM and Mixpanel are used for reporting.
Top10 Hotels - Lead Developer2013 - 2016
In 2013 Top10 pivoted into the hotel market, my role as a Lead Front End Developer involved creating a fast, performant, responsive, scalable website using the latest technologies. Server side was initially built in Python, with Backbone serving the client views. As Node matured, the decision was made to be an isomorphic application, with the same code running on the client and server.
Due to the nature of our partner APIs, Top10 relied on fast continuous polling and DOM manipulation which has inherent performance issues, when Facebook released React, the virtual DOM was an ideal fit for what we wanted to achieve and we implemented it in 2014.
Performance and accessibility were huge aspects of Top10, shortly after moving to React, we noticed performance on older devices was slow and after one sprint had achieved a constant 60fps even on original iPads.
As the business grew so did the need for tooling, I was involved in many internal projects which could use the latest technology. Tools were built in Express.js, Angular, Scala’s Play Framework and Wordpress among others.
Top10 Hotels was breaking even, when at the end of 2015 it was decided that due to the reliance on partners Booking.com and Expedia (who had purchased competitor Trivago), along with Google and Amazon entering the space, that expanding the business would become increasingly difficult and the decision was made to close Top10 Hotels.
Top10 Lists - Senior Developer2011 - 2013
Top10 Lists was a startup company whose mission was to enable users to create their “Top 10 Lists”, such as “Top 10 Films” or “Top 10 Bands”. It was an API driven site based on Freebase data to provide structured data for users, built in Node and Backbone.js. In 2011 we were approached by Spotify to work on their upcoming WebKit based app platform, in 2 months we had a Spotify app ready and was in the Spotify App Finder on launch. The app was a huge success generating over 200,000 users with over 1 million songs recommended.
uSwitch Communications - Front End Developer2010 - 2011
I joined Top10 at the start of 2010, until they were acquired by uSwitch in 2011. My role involved working on their incredibly successful price comparison product, including Speedtest and StreetStats.
Dennis Publishing2008 - 2010
I worked across Dennis Publishing’s magazine portfolio at the time, included Maxim, Auto Express, Men’s Fitness and MacUser among others. Advertising work included clients such as Intel, Microsoft, EA, Dell and O2 to name a few.
Miscellaneous Projects
Facebook Messenger Bot2018
When working on this site and implementing the Facebook Messenger intergration, implementing a Messenger bot piqued my interest. I implemented a "Get Started" bot, I will add to its repartee as I get more data as to what people are asking. You can try it by clicking the link below and then clicking "Get Started" in Messenger.
Contact Robert Daly via Facebook Messenger
USN Sport2016
A project that needed results quickly, USN hired me to optimise their website for mobile. Applying best practice and responsive design in a week’s work, the result improved their mobile conversion by 300%.
Roskilde Festival App2013
Roskilde Festival is a music festival outside Copenhagen, Denmark. As a personal project I built a webapp where users can login via Facebook and connect with their friends. Features of the app, included find your friends, create events, festival planner, interactive map, news, tweets, offline availability (using appcache at the time), English/Danish language. After a brief Google Adwords campaign, it ended up with over 200 users.
Call of Duty Elite App - iOS / Android2012
For the launch of Call of Duty: Modern Warfare 3, Activision and Infinity Ward contracted out to Ideaworks a custom Phonegap project for stat-tracking, replays, equipment loadouts among other functionality. I was brought on as a senior front-end consultant and implemented load out logic, stat reporting, performance improvements for older mobile devices and other features.