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 Semantic HTML module of Learn HTML. Each section below corresponds to…

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 Metadata 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 Document structure 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 Overview module of Learn HTML. Each section below corresponds to a…

RSS isn't dead. It isn't mainstream, but it's still a thriving protocol, especially among tech users. However, many people don't know what RSS feeds are or how to use them. Most browsers render RSS as raw XML files, which doesn't help users understand what it's all about: In this post, I'll explain…

Nothing says summer like sitting in a cool, shaded room while writing some HTML. Last fall when Estelle Weyl’s Learn HTML course was announced at Google’s web.dev I took a quick look and made a mental

18 June 2023 I’ve previously written about the problems with regular sticky menus. In response to those issues, some people suggest showing and hiding the menu as the user scrolls up and down. Bondir’s sticky menu appears and disappears as the user scrolls This seems smart because: the menu gets out…

The attributes of responsive s are pretty intense! Code language: HTML, XML (xml) You need to create/serve/cache multiple ver

Yesterday, I wrote about the grain of the web . Today, I wanted to talk about how to work with the grain of the web when building dynamic web apps with the Jamstack and static site generators. Let’s d

Best practices for container queries Published Jun 7, 2023 I’ve been playing around with container queries and so far, there is only one best practice that I would recommend. Whenever you use containe

11 June 2023 “Just whack a red asterisk next to each field and call it a day.” Back in 2008 I worked for a software house. We specialised in e-commerce sites for big organisations like Boots, Argos and Homebase. They had the usual forms. Registration, forgot password, sign in and checkout. We…

sebdd thoughts and inspiration on designing, programming, and writing for the web Menu Blog About Speaking Uses Reads Blogroll Now Newsletter Twitter Mastodon Pinboard Literal Telegram RSS #css #html #javascript #laravel #livewire #misc #mysql #programming #tech #writing

Leverage CSS :has() to select all siblings between to boundaries. ~ Creating a Sibling Scope Say you have markup like this: outside upper inside insid

Feature detecting :has() To feature detect browser support for the CSS :has() selector , you can use @supports(selector(…)) . When doing so, it is important to include a valid selector as its argument

14 May 2023 In 2009 I prototyped a form that disabled the submit button until all the answers were valid. The idea being: the best error is the one the user never sees. But disabled buttons takes this rule to the extreme. And as a result it can frustrate users or worse, cause them to give up…

Daily Tips The folks at my favorite website performance testing tool, WebPageTest, just introduced Carbon Control, a way to measure your site’s carbon footprint and run no-code experiments to find ways to improve. One of the big reasons I advocate for simpler, more performant websites is because the…

7 May 2023 Sticky menus (menus that stick to the edge of the viewport) are used to make them easy to access on long pages. But this fancy pattern hurts UX far more than it improves it. Here’s why: Problem #1: They constantly take up space They get in the way of the actual content. And it’s worse on…

Published at Dec 22 2022 Updated at Dec 22 2022 Reading time 2min Views 1390 Secureframe makes it fast and easy to get SOC 2, ISO 27001, HIPAA, PCI & GDPR (and more) compliant. ads via Carbon This pos

It’s been a while since I considered what unit I should use in media queries.In the past, I (and many others) have recommended using ems rather than px,because “it’s the only unit that performs consis

I wrote a blog about being device agnostic which is an idea about ensuring your data is not tied to one kind of device, or one manufacturer. I believe you should be able to export your data regularly

Daily Tips The Intersection Observer API can be used to observe and element and run a callback function when it enters or leaves the viewport (or another element). It runs asynchronously, and it’s far more performant than using a scroll event listener. Today and tomorrow, we’re going to look at how…

Since the mass exodus of Twitter after Elon bought it, I've felt unsettled in the Social Media world; like I'm sitting in someone else's house and can't quite be as comfortable as I would like to be.

CSS mix blend modes provide an easy, yet powerful way to create visually interesting designs. Too lazy to read? Visual effects galore The modes allow you to manipulate how elements interact with each

I've been thinking about my approach to frontend a lot recently and an analogy that comes up pretty consistently when talking about building user interfaces is that the frontend development process sh

Published at Dec 22 2022 Updated at Dec 26 2022 Reading time 2min Did Chris just publish a post and unveil the solution to a long-lasting CSS problem almost in a side sentence? It seems like it! What

The CSS Working Group gave that a thumbs-up a couple weeks ago . The super-duper conceptual proposal being that we can animate or transition from, say, display: block to display: none . It’s a bit of

Say your brand color is the orange #f06d06 . Now you need that color but with some opacity on it. One option is the 8-digit hex code. I find it hard to know which additional two characters are needed,

I wrote up some early thoughts on container style queries a little while back. It’s still early days. They’re already defined in the CSS Containment Module Level 1 specification (currently in Editor’s

return { statusCode: 302, headers: { 'Cache-Control': 'no-cache', Location: `/login/?redirect=${encodeURIComponent(redirect)}`, }, };

It’s the debate that is seemingly neverending: should designers learn to code? But why is that particular skill the only one that seems to garner attention? As with every blog post, tweet or podcast episode that has gone before the writing of this, the pros and cons are weighed up, and regardless of…

The web feels more bloated than ever. Everywhere I look, people are giving conference talks on how to jam even more JavaScript-driven UI components into what are mostly static websites and weird “thou

I’ve been using Sass for a decade, but recently, I’ve been wondering if it’s time to ditch it and move on. Let’s dig in! Why use Sass? Sass is a preprocessor for extension of CSS. What drew me to it o

Focus outlines (and their styling) have frequently been a point of contention between aesthetics and usability. On the one hand, focus outlines are incredibly important for navigation, particularly by

Let’s just get this out of the way: in bodies of text, links should always be underlined or highlighted in some way other than just color. For people with color-based vision disabilities, the contrast