Daily Tips Today, I wanted to quickly share how I built Kelp’s toggle switch component with a single HTML attribute and CSS (no JavaScript required). Let’s dig in! The [role="switch"] attribute The [role="switch"] attribute is functionality identical to [role="checkbox"] (the implicit role a…
Juan Fernandes
There’s the old adage “nobody gets fired for buying IBM”. Or to put it more broadly, “everyone else is doing it.” It’s dispiriting how often this explanation is given as justification for a dubious design decision, from home-page carousels to cookie banners. Nic Chan has written a great post about…
30 November 2025 I will answer this question, but it’s best explained by telling you about the post I wrote on LinkedIn last week: Github’s Design System has banned toast messages. Toast messages are little messages that appear on top of the UI to give you feedback about an action you just took.…
If you’ve ever needed to limit an element’s line count without resorting to JavaScript, the line-clamp CSS property can help. It’s a handy way to rein in user-created content, keep cards neatly aligned, or prevent text from breaking a layout. In simple terms, line-clamp limits the number of lines in…
Daily Tips Last week, I wrote about my experience working with the team at Cloud Four, and in particular some of their great practices around PR management. Today, I wanted to talk specifically about a habit my friend Gerardo Rodriguez got me into: reviewing your own pull request. It’s pretty…
No doubt this has been written about before, but I used this approach yesterday and it’s cool so I’m writing about it too. Like any good website, I have a pile of links in the footer of this one. Most of the links are to internal pages. A handful of them are to external sites. It’s never bothered me…
19 May 2024 Last week I posted this on LinkedIn: I tell my students to avoid select boxes. Because it’s often better to go for radios. But they often say “But it’ll make the page long”. Yep, but that doesn’t necessarily mean it’s bad UX. See below for the page I designed to let users select a…
Daily Tips One of the weirdest “debates” I seem to perpetually have with framework-enthusiastic developers is whether or not a is “just as good” as a . Spoiler: it’s not. Let’s dig in. The problem Among the React crowd, and also among people who seem to enjoy HTMX, I see a lot this… What’s wrong…
Daily Tips Something I’ve seeing more and more of with my clients is code that’s repeated in multiple places, but written in a way that it has to be manually duplicated every time. It’s particularly prevalent in JS-heavy apps. Let’s dig in! HTML Components Sometimes, it’s two UI components that do…
The year is 2005. You're blasting a pirated mp3 of "Feel Good Inc" and chugging vanilla coke while updating your website. It’s just a simple change, so you log on via FTP, edit your style.css file, hit save - and reload the page to see your changes live. Did that story resonate with you? Well then…
This is one of those cases where circumstances at my job led to needing to document expected behavior in order to create “synthetic” links via JavaScript. Sometimes this sort of thing is regrettably unavoidable. A large part of the effort was capturing all the different actions you can perform with…
UX design patents are elements that you can reuse and utilize to solve usability problems when designing the user experience of your website or app. Unlike UI patterns, they are not physical; instead, they are the ways through which you provide certain experiences or handle particular situations,…
oklch is a newer color model that is designed to be perceptually uniform. This means that colors are much more accurate in terms of how humans perceive them and it makes working with them much easier. Color Models Before being able to understand how oklch differs from the other color models, it is…
28 May 2023 My plugin for Markdown-It: CodeWrap Table of Contents I’ve just released a plugin for Markdown-It. I wanted to have tighter control over how my code blocks were displayed on my site, adding a "Copy" button as well. Maybe it’s over-engineered. Maybe it’s a niche need. But I certainly…
Friday 12 Sept 2025 Play Synthesised Audio CSS “resets” are boilerplate code designed to remove or normalize browser defaults. They provide solid foundation to build bespoke CSS upon. When utilised correctly they should be unobtrusive. Any quirks being ones of personal taste and flair. These quirks…
Daily Tips Today, I wanted to share how I built my own DIY Netlify that I use to host over a dozen sites for just $10/month, with way more control and much faster build times. Let’s dig in! The Netlify Revolution A few years back, Netlify helped usher in the era of static site generators by offering…
Daily Tips With modal components, it’s common/expected to prevent the background from scrolling. However, if your page was long enough that there were visible scrollbars, they disappear when you set overflow to hidden, which causes the layout to shift horizontally. Sometimes it’s hard to see behind…
I have my operating system configured to use visible scrollbars, a feature prominently elevated in macOS’ System Settings high enough that it would seem to imply some level of common usage (even though it’s not a default). I don’t necessarily prefer the behavior this feature enables but I use it as…
Daily Tips I’ve worked on so many projects recently that were more complicated than they needed to be because they used JavaScript to generate HTML. JavaScript is… Slower to load Slower to run More prone to breaking Harder to read and reason about Doesn’t actually look like the final output It’s…
29 August 2025 In season 8, episode 12 of The Simpsons, Bart presses a button on a talking bear display. The bear asks “Only who can prevent forest fires?” Bart presses “You”. The bear replies “You pressed ‘you’ referring to ‘me’ – that is incorrect. The correct answer is you”. This is a common…
Let’s see if I can make this short and sweet… okay so you may be like me and jump between the local build and the live (or “production”) versions of your website. How many times have you refreshed your local version for several minutes only to finally realise the changes weren’t showing up because…
In 1999, Microsoft vanquishes Netscape in the browser war, Google starts to show up competing search engines, Blogger launches, and Napster loudly arrives to shake up our culture. By | September 3, 2025 | Tags: Dot-com, Yearly Reviews, 1999 1999 Napster software running on Windows 98; photo by…
Daily Tips For years, I’ve used a BEM-like approach to authoring my CSS. With Kelp, I decided to go a different direction and use semantic classes. The result has been a lot less CSS that’s simpler and more predictable to write. Today, I wanted to quickly share how it works and why I love it so…
Almost two years ago, I published an article about text-wrap: balance and how useful it is. I thought about revisiting the topic with a more solid exploration and examples that include different values of text-wrap. The problem Any web page consists of content. As designers and developers, we don’t…
I was thinking about something I wrote yesterday when I was talking about styling underlines on links: For a start, you can adjust the distance of the underline from the text using text-underline-offset. If you’re using a generous line-height, use a generous distance here too. For some reason, I…
Blog and all that malarkey August 7th, 2025 Over the past two years, I’ve noticed a significant drop-off in the number of enquiries from local(ish) businesses coming through Google. I wondered whether that might be down to the fact that the opinionated design isn’t to everyone’s taste, so I tried…
We shouldn’t rely on colour alone to indicate that something is interactive. Take links, for example. Sure, you can give them a different colour to the surrounding text, but you shouldn’t stop there. Make sure there’s something else that distinguishes them. You could make them bold. Or you could…
Daily Tips Yesterday, we looked at why styling Web Component elements in the shadow DOM sucks, and I shared five different approaches you can use. Today, we’re going to look at the first of those in-depth: inline CSS. Let’s dig in! The example we’ll be using Let’s imagine we’ve got a element, like…
Daily Tips I often say that the Shadow DOM is an antipattern. I tend to catch a lot of shit for it, because for years the JS framework cult positioned the Shadow DOM as the killer feature of Web Components. But one of the biggest challenges the Shadow DOM creates for Web Components is around…
Tuesday 5 Nov 2024 Play Synthesised Audio Have you ever added this CSS? What’s the deal with that? I’ve always tried to avoid this CSS because a long time ago Dmitry Fadeyev asked us to Please Stop “Fixing” Font Smoothing. The antialiasing mode is not a “fix” for subpixel rendering – in most cases…
The `` and `` elements are getting an upgrade Published on 01 Nov 2024 Form controls are notoriously difficult to style, something the web community has been talking about for years. In 2019, when I was still at Microsoft, I had been working with Greg Whitworth to start evangelizing the work that…
Published on November 2, 2024 Cascade layers recently reached the completely arbitrary “baseline widely available” milestone, which means they have been available across all modern browsers for more than 30 months now. Cascade layers Baseline widely available chrome: supported edge: supported…
While you are working on a UI/UX design project, I have developed a set of practical tips for designing a clickable button that helps me maintain design standards throughout the process. Published inB
14th October 2024 The thing about magazines—physical, printed magazines, I mean—is it’s very easy to skip past content. Between your thumb and gravity, weeks of editorial work can be precipitately dismissed in fractions of a second. Flip, flip, flip, flip, flip. “Where the hell is my doctor? My…
In Penn & Teller’s Masterclass (no. 12 “Principles of Performing”) they explain how one of their favorite ways to design a magic trick is to come up with an idea and then act it out as if they already know how to do it. Here’s Penn: We still start with an idea for a trick, how we want the whole…
Content warning: This blog post references domestic abuse and violence but doesn’t go into specific detail. I’m not an expert in that topic at all, so I may not use the preferred terminology in all instances. Sorry. Last year (oh how time flies), we launched the GOV.UK Design System’s Exit this Page…
This is a post in a series about building my new website, check out the previous post in this series. A note from the present day Hi, it’s present-day Nic here. I feel bad that this draft has been sitting in my posts for the better part of a year! I had pretty much drafted the complete text back…
≡ By Joel Dare - Written July 14, 2025 Imagine a web page that loads instantly, deploys effortlessly, and never needs a security update. I’m using pure HTML and CSS to accomplish all that and to build things in a fraction of the time. Building HTML pages is easy As software engineers, I think we…
Our little content site etch.co was built with Next.js until we recently migrated it to Eleventy. Even though no features were changed or removed the statistics show a dramatically different result: Statistic Next.js 11ty Lighthouse performance score 76 97 Homepage Kilobytes of JavaScript 2,161KB…
Daily Tips I love for...of loops! I find them nice and simple. They’re more clear than an old-school forloop, and in my opinion easier to read than an Array.prototype.forEach() method (or the NodeList equivalent). But sometimes, you need the index of the item you’re looping over, and the for...of…
No articles.