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 an

2023-06-09 #html Thanks to my colleague Sam I recently learned about the form attribute on the element. By setting a form attribute, the button becomes a submit button for a form on the page

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

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 impro

7 May 2023 Designers use sticky menus (menus that stick to the edge of the viewport) to make them easy to access on long pages. But this fancy pattern hurts UX far more than it improves it. Here’s why

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

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 perfo

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 e

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

Updated June 9, 2022 , originally posted January 3, 2019 ; (added 10 December 2021) Now that one of the most popular CSS resource sites on the innertubes has implemented styled scrollbars in the brows

They are just better than their non-logical counterparts. Because: They are more, ahem , logical . They make CSS into a more coherent and interrelated system that is easier to learn and reason about.

I recently worked on a project that had a background image covering the entire body of the page. One of the differences was that the background also needed a colored overlay, in this case a black over

When I started to build my first website on Eleventy around 2019, I had to decide how to deal with the HTML, CSS, and JavaScript post-processing. By that time, I had gotten used to the convenience of

Simply saying the word “grid” conjures up strong and confusing feelings. Kinda like puberty! With so much history and so many different (and sometimes competing) paradigms, it’s no wonder conversation

I have Netlify linked to my GitHub account and set to perform an automatic build (deploy) every time I push a commit for my Hugo blog . Sometimes, the changes I make don’t need to be pushed live immed

Before you take the headline of this article at face value, take a moment to think about what it means. Believe it or not, I had a similar reaction to an Instagram post with text that read: Every UX i