It’s been three years since I created this site. One of the main purposes of the site is “ project fiddling and accountability ”. Like last year’s post , the moment of truth is upon us… How did I stac

Just Build It... After I started at Microsoft in 2016, I built my own HTML portfolio website instead of using a template. The template I had been using was gorgeous and interactive but I hadn't built

Lighthouse is a website auditing tool that helps developers with opportunities and diagnostics to improve the user experience of their sites. Lighthouse 11 is available immediately on the command line

February 6, 2023 2:18 pm In Every Layout, we wrote about The Stack . It’s a marriage of Heydon’s Lobotomised Owl selector and my method of managing Flow and Rhythm with CSS Custom Properties . .stack

If you’ve ever worked on sites with lots of long-form text — especially CMS sites where people can enter screeds of text in a WYSIWYG editor — you’ve likely had to write CSS to manage the vertical spa

You can’t have a white favicon, because, in a lot of situations, you won’t be able to see the dang thing at all. Here’s a default Chrome tab while macOS is in Light mode. I made the favicon #eee here

Over the last decade, hamburger buttons have become the de facto standard to expand larger menus on smaller devices. They are so ubiquitous that most users immediately know what their purpose is, when

Forms on the web are an opportunity to make big improvements to the user experience with very little effort. The effort can be as little as sprinkling in a smattering of humble HTML attributes. But the result can be a turbo-charged experience for the user, allowing them to sail through their task.…

The :has() pseudo-class is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took the State of CSS survey . The ability to write selectors upsid

In the recent refresh of my website’s design I implemented different theming options. It’s now possible to choose between six different color schemes when reading my blog. The need for more than just

Daily Tips Two years ago, I wrote about how the alert(), prompt(), and confirm() methods were being deprecated. At the time, I lamented that there wasn’t a great replacement for any of them. That’s no longer the case. Today, I wanted to give you a primer on the dialog element. Let’s dig in! The…

9 Comments In response to Giovani Camara. Hi, Giovani! For example, if you delete a product, we can replace it with a message saying “XYZ was deleted,” then we could write code to focus the newly injected message. If you present a message, understand that unless that message appears where the…

W hatever the word is for the opposite of heartwarming, it certainly applies to the story of Ruth and Peter Jaffe. The elderly couple from Ealing, north London, made headlines last week after being ch

Two approaches to asset pipelines As outlined by Max Bock in his infamous blogpost about asset pipelines , there are two main ways to transform your assets source files (SCSS and JS mainly) into produ

I have this web page to display the books I've read . Book covers often bring back memories and it's been great to scroll past them on my own page. It's also an opportunity to play around with book da

Spoiler : This is available as an Eleventy theme over on GitHub. Read on to explore key concepts about developing using Eleventy Edge. A new feature with Eleventy v2 (currently in beta) is Eleventy Ed

A little thing happened on the way to publishing the CSS :has() selector to the ol’ Almanac. I had originally described :has() as a “forgiving” selector, the idea being that anything in its argument i

Home All articles Toolbelt worthy, powerful, and stable CSS you can use today. Mar 15, 2023 Adam Argyle Twitter GitHub Glitch Homepage On this page I believe every front-end developer should know how

It’s still summer, so I’m doing a bit of Hot HTML Summer housekeeping based on what I learned from taking the web.dev Learn HTML course. Earlier in the summer I wrote a series of posts, one for each lesson in the course. In the I included a list of things to check on and update as necessary. I’ve…

6 August 2023 Disabling paste is usually done in the name of security. For example, let’s say the user has to type their email address twice. Using 2 separate inputs means a mismatch can be caught. But that doesn’t work if they paste an error from the first input into the second. But disabling paste…

“The industry changes so quickly! It’s hard to keep up with everything.” I’ve been mostly out of touch with the industry over the last couple years, only working on smaller front-end projects, and not

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. This post covers the Template, slot, and shadow module of Learn HTML. Each section below…

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course . I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HT

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. This post covers the Dialog module of Learn HTML. Each section below corresponds to a…

The last time I wrote about deploying to GitHub Pages , it was essentially a tutorial on how to use Travis CI for deployment to GitHub Pages. Travis, unfortunately, discontinued their free plan but Gi

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. This post covers the Other inline text elements module of Learn HTML. Each section below…

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. This post covers the Focus module of Learn HTML. Each section below corresponds to a…

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. This post covers the Details and summary module of Learn HTML. Each section below…

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. This post covers the HTML APIs module of Learn HTML. Each section below corresponds to a…

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. This post covers the Audio and Video module of Learn HTML. Each section below corresponds…

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. This post covers the Images module of Learn HTML. Each section below corresponds to a…

Daily Tips I recently had someone email me asking about how to load HTML from another page with vanilla JavaScript, so that’s what we’re going to look at today. Let’s dig in! Progressive enhancement Using JavaScript to load HTML from another page is great progressive enhancement. Let’s imagine you…

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer. This post covers the Forms module of Learn HTML. Each section below corresponds to a…

Back when the web was young, it wasn’t yet clear what the rules were. Like, could you really just link to something without asking permission? Then came some legal rulings to establish that, yes, on t