19th August 2024 It was a sunny day (in the Southern Hemisphere, possibly?) in October 2014 when HTML5 was officially released. I remember it like it was yesterday. The crowds, the bunting, the endless fireworks and firework-related maimings. And who could forget “Hypertext Chicken”: the spicy,…

As of last month, Firefox 128’s support of the relative color syntax means we’ve now got support across the board. I’m excited about that as it’s an extremely powerful way to manipulate colors in CSS. Plus it was part of Interop this year so that is further proof that is trucking along nicely. The…

I’ve been going buildless—or as Brad crudely puts it, raw-dogging websites on a few projects recently. Not just obviously simple things like Clearleft’s Browser Support page, but sites like: The Clearleft podcast Patterns Day UX London They also have 0 dependencies. Funnily enough, many build tools…

2nd August 2024 First alphabetically and first in importance is the HTML element. The element is what makes the World Wide Web a Web that is both Worldly and Wide. It puts the dub, the dub, AND the dub in the dub dub dub. Sometimes, the is referred to as a hyperlink, or simply a link. But it is…

3rd August 2024Proxying an Image CDN with Cloudflare workers A short intro and code on how you can use Cloudflare workers on Cloudflare's free tier to proxy an image CDN like Cloudinary, CloudImage or Imgix. Using this you can load optimised images via the primary origin, support the Vary header for…

Anchor links (also called jump links) are an easy way to provide in-page navigation. For example, a table of contents could use anchor links to take readers straight to various sections in a page. They’re super easy to set up, but sprinkle a little CSS on top and you can really make them shine.…

Why are my live regions not working? Posted on Wednesday, 1 May 2024 by Patrick H. Lauke in Design and development Live regions have a reputation for being "flaky" and inconsistent. While this can be attributed in part to shortcomings in current implementations, the problem can also be caused by…

14th July 2024Simple, fast build tooling with live reload for a non-framework website I found a nice build tooling setup that can be integrated into non-framework websites where some part isn't controlled by the build tool. WordPress, Craft, Kirby or other CMS' are a good example. My setup uses…

30 June 2024 A couple of weeks ago I appeared as a guest on the Complimentary podcast hosted by Katie Langerman and Anthony Hobday. One of the topics that we talked about was the idea of using toggle switches (over radio buttons and checkboxes). Like I said in the podcast there are definitely some…

I recently took an existing codebase and ported it over to Eleventy. The main purpose was to recreate the website with existing markdown files and CSS. Creating the collections and templates was the bulk of the work, but I also needed the CSS to work. The documentation describes some methods for…

Wednesday 12 Jun 2024 Play Synthesised Audio Please accept my half-hearted apology for the awkward title. Web Components are hot right now but the name is considered harmful according to Mayank. I think Mayank makes a strong argument, but I also want the brand recognition and “SEO juice”, so I’m…

‍Cintia Romero is a Sr. Product Designer at Gestalt, which is Pinterest's design system. In addition to creating components and writing documentation, she dedicates her time to community engagement. She regularly interacts with design system users inside and outside Pinterest, develops educational…

My phone rang today. I didn’t recognise the number so although I pressed the big button to answer the call, I didn’t say anything. I didn’t say anything because usually when I get a call from a number I don’t know, it’s some automated spam. If I say nothing, the spam voice doesn’t activate. But…

I've been doing some client performance work lately. It's a Next.js project, and it looks like Google's INP update has punished it. Organic search rankings are tanking. I thought it would be a quick gig because there was a ton of low-hanging fruit. After fixing, waiting and constantly checking the…

Securing Buy-In for Your Design System: A Lifecycle Approach Discover how to secure stakeholder buy-in for a design system at every stage, from pre-building to post-launch, and transform your product development process. Nezar Mansour , Content Writer Apr 3, 2024 Foundations The introduction of a…

May 13, 2024 The Times You Need A Custom @property Instead Of A CSS Variable About The Author Preethi is a web developer and writer. She jots down mostly on front-end development, especially designing with CSS. Preethi is also a chai addict and strongly … More about Preethi ↬ Email Newsletter Weekly…

Daily Tips Every piece of code is a potential vulnerability, really. Not just dependencies. But code that you don’t own, that’s outside your control, is particularly vulnerable. One of the big myths of using frameworks and libraries and cloud services is that you no longer have the “own” that piece…

Updated January 27, 2025, originally posted January 16, 2025; In my post Brief Note on Figure and Figcaption Support I demonstrate how, when encountering a figure with a screen reader, you won’t hear everything announced at once: No screen reader combo treats the caption as the accessible name nor…

Copying code from code blocks, without having to manually select it all first, is very handy convenience feature. But despite having published a ton of code snippets on this website, adding copy functionality wasn’t a top priority so far. A bit sad, considering that it can be done in less than an…

16 January 2025 – Baldur Bjarnason interim notes Accidentally wrote this while trying to figure things out, so I might as well publish it here. And, no, I didn’t bother to edit it, so expect fluff and rambling. Everywhere I look, it’s becoming more and more clear that a lot of job markets are in…

light-dark() makes it easy to build websites that respect the user's preferred color scheme while also providing the ability to override the color scheme without code duplication. Be sure to check out the demo at the bottom! Before we dive into light-dark(), let's take a quick detour to understand…

I keep hearing people worry that AI will take over software development, product development, writing, video production, and other areas. I'd be worried if you write low-quality, spammy, clickbait articles (AI can do that easily). If you write simple, boilerplate code for a big company, your job…

Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers by Alexander Muzenhardt published on Dec 27, 2024 Introduction Imagine you’re tasked with building a cool new feature for a product. You dive into the work with full energy, and just before the deadline, you manage to finish it.…

Cory LaViska of Shoelace fame posted this a few days ago: when building a component library, what component do you build first and why is it always button? It’s a similar question that starts Dan Mall’s talk he first performed at Clarity 2022. Dan argues that the button doesn’t provide impact to…

Our 10 most popular web performance articles of 2024 core web vitals javascript performance budgets metrics We love writing articles and blog posts that help folks solve real web performance and UX problems. Here are the ones you loved most in 2024. (The number one item may surprise you!) Some of…

I know I'm still a bit of a 11ty n00b, so I hope this isn't frowned upon in the community, but on rebuilding my blog using 11ty, I decided not to use the standard Bundle plugin that was added in v3.0.0. Instead, I decided to write a custom Shortcode to customise my CSS output. In this blog post, I…

Let’s say you don’t know JavaScript. Like, at all. You haven’t needed it. You’re a web designer and you’re focused largely on UI and UX. Your skills with design tools, HTML, CSS, and team communication have served you well. But you know what JavaScript is. It’s another part of the native web. It’s…

Daily Tips There’s not really a “wrong” way to build Web Components. But there are some approaches that are, in my opinion, antithetical to the spirit of them, and maybe miss the point of what makes them so great. Today, I wanted to talk about that in the context of a project that’s been getting a…

Anchor positioning in CSS enables us to position an element relative to an anchor element anywhere on the page. Prior to this we could only position an element relative to its closest positioned ancestor, which sometimes meant doing some HTML and CSS gymnastics or, more often than not, resorting to…

This guide is designed to help everyone with Markdown, even if they have never written it before. It is deliberately simple. There’s links to further resources and learning at the end of the article. I’m not going to spend ages explaining what Markdown is or how it works because there’s already…

Daily Tips Last week, we looked at different ways to setup the HTML in a Web Component. One of the challenges with running your code in the constructor() is that sometimes the custom element is created, but none of the nested HTML inside it is ready yet. We looked at a few different ways to fix…

Sometimes I look at this list of “slash pages” and I’m like ughkgh I love these, I should do like all of them. Then something stops me and I think I’ve figured out what it is. They seem more like blog post ideas to me than permanent (if occasionally updated) pages. For example /carry is one of the…

There've been some folks sharing their 2024 default apps; let me join the fun! Heads up! Some of this post's links are affiliate links. If this rubs you the wrong way, it's probably not for you. 🫣 Browsers My daily driver remains Firefox. Not because it's the best or fastest browser but because I…

Daily Tips One of my favorite ways to customize Web Components is with custom attributes. Since writing that last article, I’ve gotten some questions around using custom attributes in Web Components, and I’ve also see their popularity increase a fair bit. Let’s talk about some caveats and things to…