Page Inspect

David Darnes - Designer, Front-end Developer & Writer specialising in Design Systems, Eleventy, Ghost & Jamstack

# David Darnes
Pronunciation of my name                   ## Designer, Front-end Developer & Writer



Bluesky Mastodon LinkedIn GitHub CodePen Design Systems Webring RSS

For over 15 years, I've been providing my skills in **front-end development**, **design** and **technical writing** to clients such as **Shopify**, **zeroheight**, **Nordhealth**, **Google**, **Buffer**, **Netlify**, **Ghost**, **Octopus Energy**, **Stackbit** and many more. Check out **my work** and **articles**. If you like what you see **get in touch**.

### Work

A small selection of projects I've worked on with my clients and for open source

- ## Nord Design System

Currently working full time on Nord Design System. We use modern technologies such as Web Components and CSS Custom Properties to provide the wider design and development team everything they need to design and build products such as Provet Cloud, Diarium, Navisec Health and many more.
- ## Seccl Technology

I was commissioned by Seccl to completely rebuild their marketing website using modern Jamstack technology. This involved the use of Netlify, Eleventy cutting edge front-end techniques.
- ## Ghost Developer Expert

Due to my strong experience in Ghost I've become an an official Developer Expert on the platform. Check out my official developer page and example of Ghost sites I've built
- ## Eleventy Starter Ghost

The Eleventy Starter for Ghost is designed to help developers build sites using the Ghost Content API and the popular Static Site Generator Eleventy. The starter uses nunjucks to expose Ghost site data as well as rendering pages, posts, tags and author pages.
- ## Anchor Themes

Anchor Themes is a site I created to showcase the best themes available for Anchor CMS. I designed, built and manage the site so that people can easily browse and use themes for Anchor CMS.
- ## Alembic theme for Jekyll

Alembic is a theme that has the ability to be used straight out of the box as well as a strong basis for any type of content based site.
- ## Garth theme for Jekyll

Garth has been available on RubyGems.org since June 2016 and has been downloaded over 20,000 times. It has continued to be one of the most popular independent open source Jekyll themes.

### Blog

Articles about web design, development and some personal ones thrown in

- ## ShopTalk Show: Web Components and Design Systems
Monday 24th March 2025

Got invited to chat with Chris Coyier and Dave Rupert on my favourite podcast, ShopTalk Show! We talked about Nord Design System, my open source Web Components and a few other things I've learned in my line of work. Also snuck in a special intro and outro.
- ## Is 2025 the Year of the ‘Design Engineer’?
Monday 13th January 2025

What is a Design Engineer and is it the right name? Let's explore this role and it's contributions to Design Systems.
- ## Add Design System Releases to Any Website with zeroheight
Wednesday 18th December 2024

Add your design system's release history and link to those releases with this tutorial and the new zeroheight API
- ## bluesky-replies Web Component
Friday 6th December 2024

The bluesky-post Web Component allows you to turn a regular link to a Bluesky post into an embeddable list of replies to that post, including metadata such as reply count, repost count, likes and more.
- ## You’re Not Creating Enough Prototypes
Friday 29th November 2024

The true value of using design systems to create prototypes and how they impact testing, quantification and assessment of your products.
- ## duration-property Web Component
Wednesday 13th November 2024

A Web Component to surface the duration of an audio or video as a CSS Custom Property
- ## The Lowdown on Dropdowns in HTML & CSS
Thursday 7th November 2024

A run down of all the new features coming to HTML and CSS that will be game changers for dropdowns and ergo user interfaces.
- ## bluesky-post Web Component
Tuesday 29th October 2024

The bluesky-post Web Component allows you to turn a regular link to a Bluesky post into an embeddable post quote including metadata such as reply count, repost count, likes and more.
- ## What WordPress Can Teach Us About Open-Source in Design Systems
Monday 28th October 2024

What can the recent situation with the WordPress community teach us about how we use open-source in design systems?
- ## Adoption Tracking With GitHub Actions
Thursday 17th October 2024

Track adoption with our new GitHub Action and monitor your design system’s React components across your applications automatically!
- ## WordPress Alternatives
Wednesday 9th October 2024

Alternative WordPress options that you can drop onto a server and get running with
- ## Web Components: Little Bits
Monday 7th October 2024

My talk about using Web Components to sprinkle a little fun onto my website, and how well they work in Design Systems
- ## A Desk of Stickers
Wednesday 28th August 2024

This desk has followed me for almost my whole 15-year career, and I didn't even pay for it. Please allow me to digress for a moment about a battered IKEA tabletop.
- ## How to Track Adoption in Your Design System
Thursday 22nd August 2024

The often overlooked side of working on a design system is validating the work itself to stakeholders. In this article, I’ll run through all the tools currently available to provide you with adoption data for your design files, code packages, and documentation.
- ## heading-anchors Web Component
Monday 19th August 2024

A Web Component to generate anchor links for headings.
- ## live-filter Web Component
Friday 16th August 2024

A Web Component for filtering items using a text input.
- ## Awesome Standalones
Wednesday 31st July 2024

Reviving one of the most popular Web Components directory on GitHub
- ## Lightning talk at All Day Hey!
Monday 29th July 2024

My "Building tabs in Web Components" talk from All Day Hey! in Leeds
- ## zeroheight x Storybook: Design system workflow tips
Tuesday 2nd July 2024

I was joined by Rosie from our Product Team and Varun from Chromatic (Storybook) about the features and benefits of using Storybook with zeroheight.
- ## Live Code Examples in Your Design System With StackBlitz
Wednesday 26th June 2024

Having code examples in your design system for developers is super valuable, but do you know what’s even more helpful? Code examples that can be edited, forked, and reshared! In this post, I’ll show you how to provide experience using StackBlitz.
- ## Pixel Pioneers 2024 Highlights
Monday 24th June 2024

For those who couldn’t make Pixel Pioneers this year, here’s a roundup of the interesting stuff I learned from attending the long-running web development conference in Bristol, UK.
- ## The Case for Web Components
Wednesday 19th June 2024

A free downloadable whitepaper containing explanations, experience, resources, articles, and expert recommendations that’ll equip you with the skills to create versatile Web Components
- ## code-pen Web Component
Tuesday 18th June 2024

A Web Component for opening code blocks in CodePen.
- ## From Design to Code (and Back Again) with zeroheight and StackBlitz
Tuesday 11th June 2024

Garrison Snelling from StackBlitz invited me to a livestream, during which we discussed the benefits of providing code examples in design system documentation and what's possible with zeroheight and StackBlitz.
- ## Color contrast with Web Components
Wednesday 5th June 2024

Want to show the contrast levels of two colours? Try out this Web Component I’ve made!
- ## contrast-details Web Component
Wednesday 5th June 2024

Use the contrast-details Web Component to present colour contrast information of two colours.
- ## Blogroll
Friday 17th May 2024

A list of blogs I follow in my RSS reader
- ## random-source Web Component
Wednesday 15th May 2024

The random-source Web Component allows you to cycle randomly through different audio or video sources, utilising existing HTML elements and providing an elegant fallback experience.
- ## For the Design System Developers out there
Tuesday 14th May 2024

Are you looking for early access to developer features coming to zeroheight? Sign up here
- ## Use zeroheight design tokens directly in your codebase
Monday 13th May 2024

Bring your zeroheight design tokens directly into your development projects using our Tokens Manager features.
- ## My travel coffee brewer
Saturday 11th May 2024

Whenever I travel and I question whether the location will have good coffee nearby I take my Munieq Tetra Drip coffee filter. If you're looking for an ultra portable coffee brewing kit I'd recommend this.
- ## Ideas for my dream CMS
Monday 29th April 2024

After listening to Chris, Dave and Matt talk about their ideal CMS setup on Shop talk I felt it was an ideal time to share my ideal CMS features as well as some context around why I'm more interested in them than I should be.
- ## Date pickers are hard, whodathunk it
Thursday 25th April 2024

Due to the new job I've given myself permission to consume even more design systems related content. In doing so I listened to a recent Syntax FM episode featuring the folks from Shoelace, now Web Awesome, where they talked about joining up with Font Awesome and their Kickstarter
- ## link-peek Web Component
Monday 15th April 2024

The link-peek Web Component allows you to turn a regular anchor link to a rich preview (also known as an 'unfurled' link) to show description, meta image, website name and more using a JSON API.
- ## A crude way to find and follow Thread users from Mastodon
Friday 5th April 2024

There are a handful of people I'm interested in on Threads that I want to follow from my Mastodon account, so to zero in on this awkward intersect I've used the following very crude method
- ## mastodon-post Web Component
Monday 19th February 2024

The mastodon-post Web Component allows you to turn a regular link to a Mastodon post into an embeddable post quote including metadata such as reply count, boost count, favourites and more.
- ## sample-input Web Component
Monday 8th January 2024

It's great that can upload audio and video files with the input element, but browsers don't make it very easy for the user to preview that file. The sample-input component allows you to use audio and video elements to preview an audio or video file that's been uploaded to an input.
- ## play-button Web Component
Thursday 4th January 2024

Styling audio and video elements can be a bit of a pain, especially across browsers. At the same time current solutions are either hacky CSS or overly engineered JavaScript. The play-button component allows you to play, and pause, audio and video with a single button element.
- ## What I did in 2023
Sunday 31st December 2023

Survived.
- ## storage-form Web Component
Friday 22nd December 2023

storage-form is a Web Component to allow regular form elements to interact with the browsers local storage. This can be really useful when building websites or small applications that need to be able to store data for later use, such as website viewing preferences (also known as light/dark mode).
- ## is-playing Web Component
Tuesday 19th December 2023

is-playing is a Web Component that checks if an audio or video element is playing content and applies a playing attribute to itself and the element that is playing.
- ## Web Component GitHub starter template
Friday 15th December 2023

I made an open source GitHub template to help me spin up new Web Components, and I thought you might find it useful as well.
- ## share-button Web Component
Tuesday 12th December 2023

share-button is a Web Component that turns a regular button element into a button that can invoke the native sharing options within the OS.
- ## Design Systems & Web Components: what works & what doesn't
Thursday 5th October 2023

I was invited by the Netherlands Government Digital Services to speak at their Design Systems Week on the topic of using Web Components in design systems.
- ## Post previews with Ghost, Eleventy & Netlify
Wednesday 18th January 2023

A while back, I updated my Eleventy plugin for Ghost so you get more data from your Ghost instance, including the ability to retrieve draft posts. Here's how I used it to preview draft posts using Eleventy and Netlify.
- ## How Nordhealth uses Custom Properties in Web Components
Wednesday 17th August 2022

The benefits of using Custom Properties in design systems and component libraries.
- ## Web Components & Lit
Friday 8th July 2022

Phil Hawksworth from Netlify invited me and Jack Franklin from Google to talk about Web Components and Lit in a YouTube livestream. It was great to share experiences and perspectives of using Lit and the current web components landscape
- ## You should add a generator tag to your Eleventy site
Wednesday 29th June 2022

Hear me out on this one, I've got a short but sensible list as to why.
- ## Building tabs in Web Components
Wednesday 29th June 2022

Part of my role at Nordhealth is to design, develop and expand upon our ever increasing roster of Web Components within the Nord Design System. One of my most recent contributions is arguably one component, but actually comprises of three Web Components. We're talking about tabs.
- ## Using Display-P3 colour
Wednesday 15th June 2022

I wanted really bright colours on my site, but in order to do that I needed to delve into a rabbit hole of using Display-P3 colour in CSS. Here's how I did it.
- ## Using a GitHub repo directory as an npm package
Wednesday 12th January 2022

The following tutorial explains how to use a GitHub repo directory, or folder, as if it were an npm package.
- ## First monthly update for Nord Design System
Monday 20th December 2021

This was my first monthly update as part of the Nordhealth Design System team. I go into detail on our CSS Framework and the recently completed command menu web component.
- ## My home desk setup
Wednesday 11th August 2021

After posting a picture of my desk covered in stickers I was asked to submit my desk setup to setups.co. Check out what I use for my remote working setup.
- ## How to use Schema.org Markup for Your E-Commerce Sites
Thursday 27th May 2021

In this article I’ll dive into Schema.org, a tool for annotating web pages to provide search engines with more meaning about the content. You’ll better understand how we can use schema markup for e-commerce websites allowing people to find your products.
- ## Add a Formspree Form to Your Static Sites
Tuesday 9th March 2021

In this tutorial we’re going to look at a hassle-free way of adding dynamic, flexible forms to your static websites.
- ## Jekyll alternatives: The benefits to JavaScript static site generators
Tuesday 29th December 2020

Jekyll paved the way for an entire ecosystem of static site generators to flourish, but what do these new JavaScript SSGs offer over Jekyll? Let’s find out!
- ## Blogging on the Jamstack with DropInBlog, Netlify & Eleventy
Tuesday 24th November 2020

In this tutorial, I’ll show you how to switch from using client-side JavaScript to power your DropInBlog blog to using it as a fully functioning ‘headless blog’, with the assisted power of Eleventy and Netlify on the Jamstack.
- ## What is Eleventy?
Tuesday 3rd November 2020

I was kindly invited onto the Smashing Podcast to talk with Drew McLellan about Eleventy. Follow the link to listen.
- ## Switching to Netlify DNS
Tuesday 28th July 2020

If you’re onboard with Netlify then maybe you should switch your custom domains to their platform as well. In this tutorial I’ll show you how to move your custom domain to Netlify DNS and how to link it with a project on Netlify.
- ## Let’s Learn Ghost on the Jamstack! Livestream Q & A
Tuesday 14th April 2020

I recently joined Jason Lengstorf on his Twitch show Learn With Jason. I didn’t get around to answering all the questions from the live chat. Thankfully with the power of Twitch Chat Reply I was able to go back in time and pull out all the questions. Here’s a somewhat brief Q & A on those questions.
- ## Building a Netlify Build Plugin
Monday 2nd March 2020

Netlify Build Plugins let you tap into the different phases in the build process that happen on Netlify. After being invited to the beta I spent some time figuring out what I could do and built a plugin of my own.
- ## Page translations and multi-language selects
Sunday 23rd February 2020

Multi-language sites are straight up hard to do. You would think there’s standard HTML spec stuff to handle this kinda stuff? Well there is!
- ## Minimum viable analytics
Sunday 23rd February 2020

I recently switched all my personal project sites to Netlify. I’d like to share how I made the move, my experiences, and the tooling I use to manage domains and track analytics.
- ## How to use Ghost with Jekyll
Saturday 10th August 2019

Someone made an interesting query recently that I couldn’t help but take on as a challenge: Is there any way to use Ghost with Jekyll?
- ## Eleventy and Ghost
Wednesday 7th August 2019

My full write up on the official Ghost changelog blog on what's possible with Ghost and Eleventy
- ## Use Eleventy to generate a Ghost blog
Friday 31st May 2019

Last night I had a thought: What if I could source a Ghost blog from the Ghost Content API and then generate a static blog all inside of Eleventy?
- ## 5 excellent examples of progressive web applications
Friday 15th March 2019

Chrome 73 has just landed with the ability to install PWAs, but what is a PWA? Well as you’ve probably read in the title, PWA stands for Progressive Web Application.
- ## Experiments in augmented reality with Apple’s ARKit
Wednesday 30th January 2019

ARKit is a development platform created by Apple to allow developers to use augmented reality on iOS devices. We can use ARKit to create virtual objects, images and even working user interfaces that look like they are right in front of you.
- ## Coding a festive puzzle game with modern front-end techniques
Wednesday 12th December 2018

T’is the season, by which I mean the season where some of us have down-time to do a little practical learning with code. And what better way to learn this time of year than by making a toy you can actually play with.
- ## 5 tips for a happier front-end Development Team
Monday 29th October 2018

During my time at Simpleweb I’ve learnt an incredible amount of tools, techniques, practices and general front-end development knowledge. In this article I’d like to share just a few of the things I’ve learnt that will hopefully make your front-end work easier, more productive or more enjoyable.
- ## Dropping the mic on Netlify in 20 minutes
Wednesday 15th August 2018

Alright, so I didn’t actually drop the mic on Netlify; I dropped a site on it. Netlify Drop is a tool where you can grab a folder containing a site or app or whatever and drop it straight into the Netlify hosting platform.
- ## Making your first Jekyll theme: Part 2
Tuesday 16th January 2018

In Part 1, I gave an overview of creating themes for Jekyll and a few tips for when you’re developing your own theme. In this second part, I’m going to give a full step-by-step guide to developing your own Jekyll theme gem.
- ## Making your first Jekyll theme: Part 1
Monday 2nd October 2017

By nature, any well structured site that has easily editable content is ‘themeable’ — a layer, or skin, that presents content in the way the owner or creator intended; Jekyll is no different. Pages, posts and any other form of formatted content can be segregated from the templating files.
- ## Adding heading links to your Jekyll blog
Monday 24th July 2017

Just a brief JavaScript trick to get anchor links added to your Jekyll blog post headings.
- ## What do we look for in a CMS?
Monday 6th March 2017

I posed this question in several forms on Twitter to get feedback from the community. After some consideration, polls and great discussion, I came up with a list of aspects that people consider when looking for a CMS.
- ## My worst job interview
Thursday 19th January 2017

My worst job interview didn’t get me very far; not even into their office. It was just a phone call. It was a brief and kind of upsetting moment in my early career. Allow me to explain why I think this was my worst interview.
- ## How to create a Jekyll theme gem
Tuesday 18th October 2016

One of Jekyll’s noteworthy new features is the ability create official themes in the form of Ruby gems. These themes can be installed by a Jekyll user to style their static blog or website with ease, leaving them to manage their content.
- ## Adding Siteleaf to a GitHub Pages site
Wednesday 24th August 2016

I’ve been using Siteleaf a lot recently, for both my day job and personal projects. In light of this, I decided to create a screencast of myself going through the process of adding Siteleaf to a pre-existing site running on GitHub Pages. As additional reference, I’ve documented the process below.
- ## I put CSS in my HTML and nothing exploded
Monday 15th August 2016

When I first felt comfortable with front-end web development, I thought inline CSS was a filthy thing to do; something that could only be done in haste or from poor implementation. Thankfully, I’m a little wiser now and can understand that there is almost always a reason behind the implementation.
- ## My domain is my playground
Sunday 5th June 2016

Whenever I want to test or try something out, I do one of three things; I create a new pen on CodePen, push some files to a new Surge project, or I’ll try it out live on my personal site or blog. The last one in that list is my favourite thing to do.
- ## Jekyll Conf lightning talk
Monday 16th May 2016

Recently I was asked by CloudCannon to record a lightning talk for Jekyll Conf. It was a great opportunity to contribute to the Jekyll community. You can watch all the talks from the day on YouTube.
- ## How to create an open source portfolio
Sunday 27th March 2016

One really useful aspect of GitHub repos is that they allow us to host static websites thanks to GitHub Pages. But did you know that you can dynamically display all your GitHub repos on your website as well? In this tutorial I’m going to show you how to use that metadata to create a portfolio.
- ## Could GitHub make a CMS?
Tuesday 23rd February 2016

Following on from my previous article, I wanted to explore the idea of GitHub making a CMS. What would it be? How would it work? Why would they even do it? To break down this hypothetical concept, I’m going to use the Five Ws, otherwise known as “Who, What, Where, When and Why?”.
- ## Building a site entirely on github.com
Thursday 18th February 2016

Have you ever thought: What’s the minimum I need in order to build a site? I’ve thought about it quite a bit. So much so, I like to test my theories out in personal projects; in this case, my own portfolio site. However, I might have taken it a bit too far...
- ## My screencasting setup
Saturday 15th August 2015

A while ago I created a screencast series called ‘Baking Bread.li’, this was in preparation for a course for Tuts+ called ‘Building Websites with BaseKit’. In order to make the course I needed to get some equipment together.
- ## GitHub Pages & custom domains
Thursday 9th July 2015

I love GitHub Pages. So much so that I’ve created several websites using it. This site runs on it, and a few others. What I don’t love is setting up domain records. It’s up there with setting up email accounts and doing the dishes.
- ## I listen to too many podcasts
Tuesday 7th April 2015

I’ve had to take a break from listening to podcasts as all I’ve been doing in playing catch up with every single episode of them, rather than listening to episodes I actually want to hear.
- ## How to implement cross-browser SVG Sprites
Tuesday 28th October 2014

In this tutorial I’m going to demonstrate a basic implementation of some SVG icons, how to provide a fallback, and how to turn them into an SVG sprite.
- ## 5 ways to be a better front-end web developer
Thursday 28th August 2014

Frontend web development can be a confusing area to work in. With new techniques, tools and technologies appearing daily, it can be difficult to maintain your skills and understanding of the latest best practices.
- ## Anchor CMS – What is it?
Sunday 21st July 2013

Anchor is a lightweight CMS designed to be simple but effective. It was originally created by the mysterious web designer & developer Visual Idiot. It was born out of his frustration with current CMS platforms...
- ## Creating a theme for Anchor CMS
Wednesday 19th June 2013

We’re going to be making a custom theme for the ‘up and coming’ open source CMS, Anchor. Anchor is a super simple, lightweight and bullet fast content management system.
- ## Web Dev Conference 2012: Look back
Monday 19th November 2012

A week or so ago I attended WDC 2012 (Web Development Conference 2012), which was my first web design & development conference. And yes, I did put design, and you’ll see why in the following.
- ## Tracking time
Friday 7th September 2012

Not long ago I asked my Twitter followers what they suggest for a single person to track their time with. I was worried it might open up a can of worms, but I got an excellent response. Here’s what people suggested...
- ## Just get it done
Saturday 16th June 2012

The scenario is that you've set yourself the task of creating an app, plugin, blog, android or (in my case) personal portfolio website. And thats great, working on your own work is always fun. However it can be far too easy to get stuck in a rut.

### Subscribe to my newsletter

Enjoying what you've read so far? How about getting notified when I publish content in future? Use the form below to subscribe to receive articles, tutorials and code directly to your inbox:

Your email  Subscribe

What's going to happen when I click the button?

You'll be **instantly subscribed to my newsletter**, powered by Ghost. You can manage and unsubscribe at any time.

### Like what you see?

Get in touch if you're looking for help with **front-end development**, **design** or **technical writing**. Use the form below and I'll be in touch as soon as I can:

Your email  Your message Attachments Preview audio Send

Back to top

© David Darnes 1987 – 2025