Designer, Front-end Developer & Writer specialising in Design Systems, Eleventy, Ghost & Jamstack
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.
What is a Design Engineer and is it the right name? Let's explore this role and it's contributions to Design Systems.
Add your design system's release history and link to those releases with this tutorial and the new zeroheight API
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.
The true value of using design systems to create prototypes and how they impact testing, quantification and assessment of your products.
A Web Component to surface the duration of an audio or video as a CSS Custom Property
A run down of all the new features coming to HTML and CSS that will be game changers for dropdowns and ergo user interfaces.
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 can the recent situation with the WordPress community teach us about how we use open-source in design systems?
Track adoption with our new GitHub Action and monitor your design system’s React components across your applications automatically!
Alternative WordPress options that you can drop onto a server and get running with
My talk about using Web Components to sprinkle a little fun onto my website, and how well they work in Design Systems
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.
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.
A Web Component to generate anchor links for headings.
A Web Component for filtering items using a text input.
Reviving one of the most popular Web Components directory on GitHub
My "Building tabs in Web Components" talk from All Day Hey! in Leeds
I was joined by Rosie from our Product Team and Varun from Chromatic (Storybook) about the features and benefits of using Storybook with zeroheight.
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.
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.
A free downloadable whitepaper containing explanations, experience, resources, articles, and expert recommendations that’ll equip you with the skills to create versatile Web Components
A Web Component for opening code blocks in CodePen.
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.
Want to show the contrast levels of two colours? Try out this Web Component I’ve made!
Use the contrast-details Web Component to present colour contrast information of two colours.
A list of blogs I follow in my RSS reader
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.
Are you looking for early access to developer features coming to zeroheight? Sign up here
Bring your zeroheight design tokens directly into your development projects using our Tokens Manager features.
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.
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.
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
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.
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
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.
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.
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.
Survived.
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 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.
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 is a Web Component that turns a regular button element into a button that can invoke the native sharing options within the OS.
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.
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.
The benefits of using Custom Properties in design systems and component libraries.
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
Hear me out on this one, I've got a short but sensible list as to why.
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.
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.