Work

Some things I created or contributed to

A portfolio of websites/web applications that I've worked on over the years.

• 

  Co-op delivery

  • Working on shop.coop.co.uk, Co-op's delivery and click and collect service, using React, Redux, React Query, Azure functions, Imperva, Helm, Docker, GraphQL
  • Integrating the frontend and a backend-for-frontend (BFF) with internal Co-op APIs as well as with Algolia (search), Contentful (CMS), and the headless e-commerce platform Naveo
  • Writing many more tests (Jest, Testing Library) than in my previous roles!
  • Contributing to the Co-op Experience Library and shared frontend packages
  • Leading the engineering efforts of a team of up to five engineers and working with colleagues in product, delivery, and other stakeholders
• 

  London Transport Museum

  • This was a fantastic project working with a great team at LTM
  • I led a large part in avoiding and remediating accessibility issues on the site, and working with an external auditor
  • I led the development of various components that would feed back into CTI's Voyager product, including search, news, blogs, gated content and more
  • As a team we helped develop a web interface for the museum's collection, which saw a 33% increase in visits after our work
  • I worked on the frontend for a new donations system which led to a 20x increase in donations
• 

  London.gov.uk

  • Worked with the Greater London Authority on everything from their Drupal 7 site, follow up microsites, and their current recently launched Drupal 9 site
  • The GLA were a great team to work with and this (along with London Transport Museum) was amongst my favourite CTI projects
  • We took CTI Voyager and build a version of it for the GLA to allow them to share elements across multiple different Drupal sites
  • I created a special version of CTI's base theme (Rutherford) and added Storybook to replace Pattern Lab
  • Used Style Dictionary to create a design tokens system for the new GLA theme
  • I provided accessibility advice during the planning, design, and the start of the development phase
  • My last big bit of CTI work before I joined the Co-op — I wish I'd been able to spend more time on this project!
• 

  CTI Voyager

  • Largely created and led the development of Voyager, an internal Drupal distribution, theme, Composer template and set of custom modules that helps CTI deliver fantastic Drupal sites
  • Used as the base of all of CTI’s Drupal builds
  • Saves 2-3 sprints worth of work by packaging up configuration, modular functionality, a set of pre-built components that are easily re-skinned, patches for common Drupal bugs, and IDE configuration
  • Sets standards supported by automatic code linting, formatting, and documentation
  • I ensured it worked great in my two main areas of interest: accessibility and front-end performance
• 

  Durham University

  • Designing and building an HTML prototype of a complete website overhaul
  • The actual development was carried out by Terminal Four within their CMS platform
  • This introduced an interesting limitation – we had switched to a very declarative, markup-centric approach (Vue, Tailwind etc) but T4's templating system was much more set up for a 'here are some very specific CSS classes and some nested <ul> elements, now turn it into a megamenu' approach
  • I presented a section detailing our development approach as part of a team of around five in the succesful pitch for this large contract
• 

  Lasttramfrom.com

  • Scrapes (via a Netlify function) the Transport for Greater Manchester to show you the time of the last Manchester Metrolink tram home (sorry TFGM!)
  • Before I used serverless for this the scraping happened in a nightly run done by a Raspberry Pi in my flat – this got my residential IP banned from TFGM's website, oops!
  • Uses Nuxt, but I'd like to rebuild it in something next-generation like Solid, Svelte, or Qwik
  • An earlier version was (briefly) featured on the Buzfeed UK homepage
• 

  Manchester Metropolitan University

  • Used Drupal to develop functionality and implement designs produced by MMU's own designers
  • Worked alongside MMU's in-house developers to provide assistance and review code prior to releasing it on CTI's infrastructure
  • The project's internal stakeholders used corporate IT machines that still had IE11 as the default browser, which was a notable constraint, especially as one requirement was to have different colour themes, which would have been an ideal use for CSS custom properties.
• 

  Project NELSON

  • Prototyping a Vue.js inventory tracking app to be used by the Royal Navy onboard aircraft carriers
  • Used Vue, Webpack, Vuetify, and Vuex
  • Produced a set of reeusable components with a documentation site built with MkDocs and vue-styleguidist
  • I visited the HMS Queen Elizabeth docked at Portsmouth to observe user research and shared my work with a talk at the Manchester Vue.js meetup
  • I also almost tripped over a torpedo while in the bowels of an aircraft carrier
• 

  Report wreck material

  • Working with the Maritime and Coastguard Agency to prototype a GDS app for reporting wreck material and supporting its move into an Alpha and then Beta service
  • Designed and build a process using the GDS prototyping kit to collect details of collected material from shipwrecks, assisted in user research, and refined the prototype
  • Used Express, Node.js, Nunjucks, and Leaflet for mapping
  • The service passed its GDS Alpha service assessment on its first attempt, and I was involved in the presentation to the assessors
• 

  University of West London

  • Developed a new Drupal theme that incorporated Atomic Design, Pattern Lab, utility-first/atomic CSS (Tailwind), a more modern build process, standardised typographic and spacing scales, and provided (for the first time) a set of reusable components for CTI’s Drupal team. I named the theme after the Manchester-based atomic scientist Ernest Rutherford
  • I received feedback years later that the project's frontend still felt very maintainable and easy to dip back into
  • Built a progressively decoupled 'course' content type with Vue.js. This presented variants of courses in a dynamic, SPA-like way that didn’t compromise on editor experience, accessibility, or the shareability of URLs
  • I spoke about the progressively decoupled course page in Amsterdam at DrupalCon, my first non-UK conference presentation. My session was the most attended in my time slot (350+ delegates) and one (very kind) YouTube commenter wrote “Brilliant talk. If this guy made a 10 hour series on Drupal & Vue development I’d watch it ASAP”, while another equally kind commenter called it ‘stunning’.