David Darnes - Designer, Front-end Developer & Writer specialising in Design Systems, Eleventy, Ghost & Jamstack
Designer, Front-end Developer & Writer specialising in Design Systems, Eleventy, Ghost & Jamstack| darn.es
Designer, Front-end Developer & Writer specialising in Design Systems, Eleventy, Ghost & Jamstack| darn.es
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.| darn.es
A Web Component to surface the duration of an audio or video as a CSS Custom Property| darn.es
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.| darn.es
Alternative WordPress options that you can drop onto a server and get running with| darn.es
My talk about using Web Components to sprinkle a little fun onto my website, and how well they work in Design Systems| darn.es
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.| darn.es
A Web Component to generate anchor links for headings.| darn.es
A Web Component for filtering items using a text input.| darn.es
Reviving one of the most popular Web Components directory on GitHub| darn.es
My "Building tabs in Web Components" talk from All Day Hey! in Leeds| darn.es
A free downloadable whitepaper containing explanations, experience, resources, articles, and expert recommendations that’ll equip you with the skills to create versatile Web Components| darn.es
A Web Component for opening code blocks in CodePen.| darn.es
A list of blogs I follow in my RSS reader| darn.es
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.| darn.es
Are you looking for early access to developer features coming to zeroheight? Sign up here| darn.es
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.| darn.es
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.| darn.es
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| darn.es
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| darn.es
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.| darn.es
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.| darn.es
Survived.| darn.es
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).| darn.es
Use the contrast-details Web Component to present colour contrast information of two colours.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
The following tutorial explains how to use a GitHub repo directory, or folder, as if it were an npm package.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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!| darn.es
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.| darn.es
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?| darn.es
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?| darn.es
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.| darn.es
Just a brief JavaScript trick to get anchor links added to your Jekyll blog post headings.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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?”.| darn.es
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...| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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.| darn.es
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...| darn.es
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.| darn.es
Hear me out on this one, I've got a short but sensible list as to why.| darn.es
