One of my favourite sessions at All Day Hey conference last month was Jack Franklin’s talk Abstractions, complexities and off-ramps . As web applications grow larger, they inevitably fall prey to comp
Popovers are commonly positioned relative to their invoker (if they have one). When we use the popover attribute , anchoring is tricky, as these popovers are in the top layer, away from the context of
Have you heard about #CSS @scope? It’s an upcoming way to scope the reach of your CSS selectors, allowing you to move away from methodologies such as BEM because you no longer need to name those in-be
9 July 2023 Since 2016 I’ve used, created and contributed to multiple design systems. I’ve seen what works and what doesn’t. By “doesn’t” I mean designers don’t trust it. And as a result they don’t us
In yesterday’s article on loading HTML from another page , I talked about progressively enhancing a link into a button. Let’s imagine you have a dialog modal that loads some HTML. You might keep all t
Better form UX with the CSS property `field-sizing` One of the more painful experiences I've encountered on the web is filling out a form input that is fixed width. Whatever I've typed becomes cutoff
How many times have you been in the discovery process with a client when they say something like "And of course, we'll need to be able to edit the content on our own." If you're anything like me, you
Time to First Byte (TTFB) is a metric that reflects how quickly a browser can connect and download data from your servers. By tracking TTFB timings across your site, you can detect any slowdowns or is
Whenever I do a full audit for a website, I have almost 40 individual, highly granular, form-related checks. Those checks can be boiled down to the following 6 high level goals. 1. General Structure C
Thanks to the Scroll-Driven Animations Level 1 Specification it is now possible to drive CSS/WAAPI animations by scroll . Not included in that spec are Scroll-Triggered Animations: animations that run
Sadly, I'm not too good at documenting what I'm sometimes building in the little free time that I have. At the end of last year, I implemented an interesting feature on this site, but never wrote abou
Last time I wrote "this page is a repository consisting of some thrown-together and latenight-written code". Some tests should ensure that I don't break to much when I'm, cleaning up the code. Here's
The gotchas of CSS Nesting CSS & HTML ,13 June 2023, 3 minute read Quickly deploy preview environments to the cloud! AWS, GCP & Azure support. It's OSS - try it now. Ads by EthicalAds I've written bef
Updated January 12, 2024 , originally posted January 11, 2024 ; This post is part of RSS Club , rewarding those who still use RSS to read and/or share content. These posts are embargoed from my regula
I get sites not having an “RSS” for “Feed” link on their website while actually having an RSS feed. I don’t like it, but I get it. Maybe they picked an off-the-shelf theme that doesn’t have that. Mayb
You might think that when you bet on the web platform and rely on native HTML features, your website will be completely accessible. Unfortunately, this assumption is wrong in many cases. If you want t
17 December 2023 Giving context to a blogroll Garrit Franke’s recent post, titled “Roast my site”, motivated me to write about something that has always bugged me with personal sites: the grocery-styl
In typography, an orphan or widow is a single word on its own line. It can look particularly unpleasing with headings, and is hard to “plan for” on the web, where people view your site on a wide range
Rachel Andrew shared a snippet of good news for CSS layout on her blog the other day: it’ll soon be possible to vertically centre an element inside a parent without the parent needing to be a flex or
I kicked 2023 off with a pretty big change in my professional life as I transitioned roles at Squiz . Before 2023, I had been a Lead Developer , working on projects for clients in the Services team an
I have used Sass for a very long time within marketing departments, design system teams, and on many solo projects. My standout reasons as expanded upon in this post were: file organization list and m
In my new free course for beginners, Learn JavaScript, , I talk briefly about how powerful the developer console is, and why I think it’s ones of the best features of working in the front end. Today,
Implement Auth0 in any app in just 5 minutes. Sign up free and save time with Auth0. ads via Carbon Is there a good reason why we’re defining global custom properties on :root/html and not on body?” I
A friend showed me something of a design spec they were charged with pulling off: The requirements: … when I click on any of them it expands at the top to full width and the rest of the cards re-arran
When we design web forms, we always try to minimize the chance of users making mistakes. With that intention, we try to prevent users from taking actions that can cause errors. And disabling the submi
Homepage Contact Goodbye GPG, Hello SSH Key Signing Monday 27 Mar 2023 I was using a GPG key to sign Git commits but I’ve now swiched to an SSH key. GPG keys are a pain to manage on macOS. Going full
I'm not a font person. I have neither the skills nor the patience to get into font fiddling. But I do notice and appreciate a site with beautiful font combinations. Web fonts also come with challenges
Have you ever wished there is a native way in CSS to make two lines headlines consistent in the number of words per line? As a designer, I spot that a lot when dealing with varying content lengths whi
Interaction to Next Paint (INP) is a performance metric that assesses how well your page handles visitor interactions. Every time a visitor clicks a button or taps the screen, your page should be read
As far as I see, it's time to ditch hsl() and use oklch() for color palettes and design systems. Why's that? For me, it boils down to two reasons. New devices and monitors can display colors that aren
Working on an Image Optimization tutorial for CloudCannon (using Eleventy) , I stumbled into what I think is a neat little trick for automated image optimization. There are three kinds of optimization
I just saw Stefan Bohacek made a WordPress plugin for Mastodon embeds . As Dave noted , the for a Mastodon embed is very big, the resources aren’t cached across instances. With Stefan’s plugi
Removing list styles without affecting semantics. posted on 06.11.2023 Some people, I guess primarily developers and not actual users, don’t like the fact that Safari removes list semantics of lists t
I’m a fan of the general advice of use subdomains , particularly for all those little projects we all cook up and want to put somewhere with a domain name we own and control. Subdomains instead of top
At the Jamstack ZHUZH , we had a lovely panel discussion on the current and future status of the Jamstack ecosystem. Some stakeholders and detractors have declared the Jamstack “dead,” in part evidenc
November 20, 2023 By James O'Halloran TL;DR TinaCMS is now fully open-source and easier to self-host. We also built a Next.js + TinaCMS demo site that can be hosted entirely on Vercel. Earlier this ye
In his video “Secret Mechanisms of CSS” , Josh explains (among other things) how width and height work in CSS. I loved his explanation so much, I am going to re-write it here for my own benefit. Hopef
Inspired by my home for stories , I decided to build a home for all the projects , side projects, and weird ideas I’ve chased over the years in a new Jekyll collection. It ended up being a project in
I scheduled this post, isn't that cute? I find I have very little energy to write blog posts during the week, but occasionally I sit down on the weekend to write something and have a few ideas that tu
Earlier this month, Jeremy Keith posed the question: “How green is my server?” . As Jeremy notes, it’s surprisingly hard to get that information! So how do you ensure that you’re hosting your website