Chris Burnell

• ⬇️Download PDF
• 📧Email
• GitHub
• LinkedIn
• npm

Summary Permalink ¶

Front End Developer / Design Systems Engineer with 18 years of experience, specialising in web & front end development (CSS in particular), design systems, software and platform engineering, learning and mentorship, technical writing and speaking, and conference/event organisation.

Work roles have involved creating design systems and tools to enable teams to build maintainable and performant websites, with an uncompromising focus on accessibility and user experience. These also included lead roles in building the front end and CMS architecture for small to enterprise clients, chiefly in the higher education and government sectors, as I oversaw the project lifecycle and acted as their primary technical contact.

Passionate about the open web, having published over 160 technical articles, and author of open-source software used by thousands of developers worldwide. Actively involved in the web community with many years of experience in organising conferences and meet-ups.

---

Professional Experience Permalink ¶

• Built, maintained, and published a library of React components to enable developers to build accessible and customised client websites quickly that have been fully-tested and are production-ready.

• Responsible for keeping track of web standards and keeping my team up-to-date on how we can use stable, new technologies to simplify and enhance the library of components.

• Lead Developer and primary technical contact for 8 key clients, defining their complete technical implementation and standard of quality, with a focus on higher-education and government websites.

• Formulated learning packages as Chapter Lead to grow the front end knowledge of over 30 developers, which catalysed adoption of best practices and expertise.

• Managed a team of two developers, enabling them to pursue and succeed in career goals and development.

• Established a robust design system for projects which reduced development times by over 50% and enabled both technical and non-technical stakeholders to understand and participate in dialogue about the complex intersection between design and development.

• Implemented modern web standards by redefining best practices, which led to higher code quality and reduced context-switching for developers working across multiple projects.

• Lead Developer for the UK’s largest project of 2021, coordinating cross-functional stakeholders and making use of modern CSS for stronger art direction capabilities that improved the project’s reflection of the client’s brand identity.

• Mentored a Junior Developer for 20 hours a week over the course of a 6-week project and was able to deliver the project in 50% of the estimated time and achieved perfect Lighthouse and WCAG AA scores.

• Contributed to both the front end and content management implementations for client work and was the key advisor for expertise on front end development, particularly to do with CSS, and was consulted on dozens of projects for this knowledge.

• Volunteered to facilitate the standardisation of the global company boilerplate, authored the project’s documentation, and incorporated new features as a key feedback channel for developers. This boilerplate is used by over 100 projects globally.

• Single-handedly developed the UK’s first design system which is now used by more than 10 enterprise-level projects, leading to more coherent codebases and a significant reduction in bugs and turnaround time for ad hoc work.

• Primary front end development advisor for the University’s Main Website and Bayes Business School.

• Collaborated with the Digital Marketing and Design teams to oversee the redesign and development of the University’s websites to reflect its major brand refresh.

• Overhauled the University’s Clearing Website to simplify the user journey and automate backend processes required for incoming applications, reducing processing times and dependence on staff. This led to significant cost and time savings for the University, and continues to be used to this day.

• Built both the front end and content management implementations for client work, specialising particularly in cross-browser compatibility.

• Set up and organised learning initiatives for developers, including Implementor Scrum, an opportunity for developers to explore best practices and emerging web technologies in a casual group setting.

---

Community Experience Permalink ¶

• Organised 8 annual, not-for-profit conferences, showcasing over 60 speakers with over 150+ in-person attendees each year.

• Liaised with speakers, sponsors, and venues, and handled logistics for running in-person and online conferences.

• Sourced sponsorship to fund the events and enable under-represented groups to attend for free.

• Built and maintained the conference websites, including a design refresh in 2018 and codebase refresh in 2021, as well as extensive work with APIs to automate many organisational tasks for the conference.

Annual conference websites: 2018, 2019, 2021, 2022, 2023, 2024, 2025, 2026

Launched a web development blog and have since created 25 web projects and published over 160 highly technical articles about accessibility, design systems, performance, CSS, JavaScript, Node.js, web standards, and musings on the web. Maintaining my own VPS infrastructure has given me experience in Linux system administration, database management (MySQL/PostgreSQL), authentication systems (OAuth/OIDC), and DevOps practices that have complemented my front-end expertise.

Popular Pages & Posts

• clamp() Calculator
  A simple online tool for calculating and container-based clamped values for use in CSS.

• Sassy Lobotomised Owl
  Managing spacing between elements and components on your page can be a tiring task if undertaken manually. This is where the lobotomised owl comes in: a short, simple snippet of CSS that simplifies this whole process for you. In this article I’ll explain how I make use of it in a more dynamic way using a SCSS mixin.

• Web Components from Early 2024
  I’ve been having a lot of fun creating reusable Web Components, so here are three that I’ve built and been using this so far this year.

• How I shaved 1.5 minutes off my Eleventy build time
  I had a revelation earlier today that solved a long-standing performance issue I’ve been having with the initial build of my Eleventy website, and here’s how it saved me a bunch of time!

• Lost in Time
  A list of reasons to include the time and timezone in Date strings and some JavaScript functions I use to consume and format them.

Author of open-source software, including CSS libraries, design system tools, and native web components, accumulating over 55,000 downloads and having been used in building key enterprise client websites across my professional career.

Popular Projects

• 💬eleventy-cache-webmentions (26 ★ on GitHub · 18,900+ npm downloads)
  A plugin for the popular static site generator, Eleventy, that allows the caching of Webmentions and makes them available to use throughout one’s website.

• 🐋Bowhead (4 ★ on GitHub · 8,000+ npm downloads)
  A SCSS framework for integrating design tokens into a CSS codebase with support for CSS Variables. This project has been a key component for 6 client websites during my time at Squiz.

• 📈<svg-sparkline> (21 ★ on GitHub · 4,200+ npm downloads)
  A Web Component for building an SVG Sparkline.

• 🕦<relative-time> (37 ★ on GitHub · 3,900+ npm downloads)
  A Web Component to display a relative time.