Adoption Tracking With GitHub Actions 🔗
Track adoption with our new GitHub Action and monitor your design system’s React components across your applications automatically! [...]
David Darnes
Posts
WordPress Alternatives 🔗
Alternative WordPress options that you can drop onto a server and get running with [...]
Web Components: Little Bits 🔗
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 🔗
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 I [...]
How to Track Adoption in Your Design System 🔗
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 [...]
heading-anchors Web Component 🔗
A Web Component to generate anchor links for headings. [...]
live-filter Web Component 🔗
A Web Component for filtering items using a text input. [...]
Awesome Standalones 🔗
Reviving one of the most popular Web Components directory on GitHub [...]
Lightning talk at All Day Hey! 🔗
My "Building tabs in Web Components" talk from All Day Hey! in Leeds [...]
zeroheight x Storybook: Design system workflow tips 🔗
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 🔗
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 edite [...]
Pixel Pioneers 2024 Highlights 🔗
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 developm [...]
The Case for Web Components 🔗
A free downloadable whitepaper containing explanations, experience, resources, articles, and expert recommendations that’ll equip you with the skills [...]
code-pen Web Component 🔗
A Web Component for opening code blocks in CodePen. [...]
From Design to Code (and Back Again) with zeroheight and StackBlitz 🔗
Garrison Snelling from StackBlitz invited me to a livestream, during which we discussed the benefits of providing code examples in design system docum [...]
Color contrast with Web Components 🔗
Want to show the contrast levels of two colours? Try out this Web Component I’ve made! [...]
contrast-details Web Component 🔗
Use the contrast-details Web Component to present colour contrast information of two colours. [...]
random-source Web Component 🔗
The random-source Web Component allows you to cycle randomly through different audio or video sources, utilising existing HTML elements and providing [...]
For the Design System Developers out there 🔗
Are you looking for early access to developer features coming to zeroheight? Sign up here [...]
Use zeroheight design tokens directly in your codebase 🔗
Bring your zeroheight design tokens directly into your development projects using our Tokens Manager features. [...]
My travel coffee brewer 🔗
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 [...]
Ideas for my dream CMS 🔗
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 we [...]
Date pickers are hard, whodathunk it 🔗
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 epis [...]
link-peek Web Component 🔗
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 im [...]
A crude way to find and follow Thread users from Mastodon 🔗
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'v [...]
mastodon-post Web Component 🔗
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 co [...]
sample-input Web Component 🔗
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 s [...]
play-button Web Component 🔗
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 [...]
What I did in 2023 🔗
Survived. [...]
storage-form Web Component 🔗
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 we [...]
is-playing Web Component 🔗
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 th [...]
Web Component GitHub starter template 🔗
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 🔗
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 🔗
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 syst [...]
Post previews with Ghost, Eleventy & Netlify 🔗
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. Her [...]
How Nordhealth uses Custom Properties in Web Components 🔗
The benefits of using Custom Properties in design systems and component libraries. [...]
Web Components & Lit 🔗
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 sh [...]
You should add a generator tag to your Eleventy site 🔗
Hear me out on this one, I've got a short but sensible list as to why. [...]
Building tabs in Web Components 🔗
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 [...]
Using Display-P3 colour 🔗
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 [...]
Using a GitHub repo directory as an npm package 🔗
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 🔗
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 comman [...]
My home desk setup 🔗
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 se [...]
How to use Schema.org Markup for Your E-Commerce Sites 🔗
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 bette [...]
Add a Formspree Form to Your Static Sites 🔗
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 🔗
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 fin [...]
Blogging on the Jamstack with DropInBlog, Netlify & Eleventy 🔗
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 ‘head [...]
What is Eleventy? 🔗
I was kindly invited onto the Smashing Podcast to talk with Drew McLellan about Eleventy. Follow the link to listen. [...]
Switching to Netlify DNS 🔗
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 [...]
Let’s Learn Ghost on the Jamstack! Livestream Q & A 🔗
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. Thankful [...]
Building a Netlify Build Plugin 🔗
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 [...]
Page translations and multi-language selects 🔗
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 🔗
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 d [...]
How to use Ghost with Jekyll 🔗
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 🔗
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 🔗
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 🔗
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 W [...]
Experiments in augmented reality with Apple’s ARKit 🔗
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 objec [...]
Coding a festive puzzle game with modern front-end techniques 🔗
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 [...]
5 tips for a happier front-end Development Team 🔗
During my time at Simpleweb I’ve learnt an incredible amount of tools, techniques, practices and general front-end development knowledge. In this arti [...]
Dropping the mic on Netlify in 20 minutes 🔗
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 [...]
Making your first Jekyll theme: Part 2 🔗
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 t [...]
Making your first Jekyll theme: Part 1 🔗
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 [...]
Adding heading links to your Jekyll blog 🔗
Just a brief JavaScript trick to get anchor links added to your Jekyll blog post headings. [...]
What do we look for in a CMS? 🔗
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 [...]
My worst job interview 🔗
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 [...]
How to create a Jekyll theme gem 🔗
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 [...]
Adding Siteleaf to a GitHub Pages site 🔗
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 [...]
I put CSS in my HTML and nothing exploded 🔗
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 hast [...]
My domain is my playground 🔗
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 [...]
Jekyll Conf lightning talk 🔗
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 [...]
How to create an open source portfolio 🔗
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 dynamical [...]
Could GitHub make a CMS? 🔗
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 d [...]
Building a site entirely on github.com 🔗
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 o [...]
My screencasting setup 🔗
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 Base [...]
GitHub Pages & custom domains 🔗
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 d [...]
I listen to too many podcasts 🔗
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 listenin [...]
How to implement cross-browser SVG Sprites 🔗
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 🔗
Frontend web development can be a confusing area to work in. With new techniques, tools and technologies appearing daily, it can be difficult to maint [...]
Anchor CMS – What is it? 🔗
Anchor is a lightweight CMS designed to be simple but effective. It was originally created by the mysterious web designer & developer Visual Idiot. It [...]
Creating a theme for Anchor CMS 🔗
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 [...]
Web Dev Conference 2012: Look back 🔗
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 des [...]
Tracking time 🔗
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 worm [...]
Just get it done 🔗
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 grea [...]