Projects

• BBC Three

  Visit website

  

  BBC Three was moved from a television channel to an online proposition in February 2016. It’s built on Node and renders React components on the client and server. A few of my responsibilities:

  • Architecting a component based UI with React, PostCSS and SUIT CSS.
  • Building and maintaining a component library for reuse within the BBC.
  • Cross browser testing on a wide variety of devices, including screen readers
  • Unit testing React components with shallow rendering.
  • Optimising script loading with webpack and various other performance tweaks.

• SUIT CSS

  Visit website

  

  SUIT is styling methodology for component-based UI development that was created by Nicolas Gallagher and used at Twitter.

  I contribute as a core maintainer, triaging issues and working on new features. Some notable additions include:

  • Adding a cross browser tested Flexbox utilty
  • Re-factoring the existing Grid component to use Flexbox
  • Replacing Rework with PostCSS in the SUIT CSS preprocessor and adding additional features

• Shopa

  Visit website

  

  Shopa was a startup in East London, building an online social marketplace.

  I primarily worked on the front-end, including architecting and rebuilding the site to match a new design. This included:

  • Developing modular UI components with SUIT CSS
  • Structuring the JavaScript with Flight JS and webpack
  • Adding gulp into the Rails pipeline to build SUIT and Flight components

• Radio Times

  Visit website

  

  Led UI development on the re-build of the Radio Times website at BBC worldwide and later maintained it again whilst at Immediate Media.

  Starting over on the new site allowed use of various modern development practices at the time, such as parts of HTML5 and CSS3. The TV and Radio listings page was built with a collection of modular MooTools classes to power the navigation of the grid.

• Top Gear

  Visit website

  

  One of my main tasks on the Top Gear site was a complete re-build of the home page, as well as implementing a new global header and footer onto all other sections. I worked with another UI developer to completely architect the front-end code from scratch.

  As well as this project I was also responsible for maintaining the Top Gear WordPress blogs, which largely involved integrating new design features.

• Policy Expert

  Visit website

  

  Policy Expert is an insurance product from QMetric.

  It used a completely new design (sourced externally) developed with a mobile first responsive approach and used WordPress to power the content.

  We chose to use LESS and RequireJS as the main technologies and implemented as much of the SMACSS approach as possible. The site uses a fluid layout and uses media queries to tweak content positioning at various screen sizes.

• QMetric

  Visit website

  

  The QMetric site was originally designed and built by an external agency. However, due to the lack of responsive design and out of date front-end practices, I rebuilt the site as a side project.

  RequireJS was used on this project, not only for the ease of code organisation but also to conditionally load assets based on the device size such as the Google map on larger devices only. This helped with performance and usability.

  The source of the site is also viewable on GitHub.

• Interlopers

  Visit website

  

  Interlopers was started in 2004 out of my frustration at the lack of a decent community and resource to contribute to. It has grown to become one of the leading level design communities for Half-Life 2 and other Source powered games.

  I have been responsible for front-end development, content writing, community management and other general tasks. The site is written in PHP and is heavily integrated into phpBB.

• You & Your Wedding

  Visit website

  

  One of the first projects at Immediate Media to be have a mobile first responsive design.

  I came into the project early on and was tasked with re-factoring the front-end and setting a good foundation for the site.

  Working with another front-end developer, we structured a modular front-end, broken up into various Sass files that allowed easy re-use of code across the site. I also structured and wrote a lot of the JS, making use of the Primish library.