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

Updated February 20, 2025, 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 browser I think the time is right (or too late?) for me to try to capture a starting point for…

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 issue is a conversion issue. Not every conversion issue is a UX issue. Surely not! My brain…

Little Design Tip Relative rounded corners - March 1, 2023 If you’ve got a rounded corner on both the outside, and the inside of an element that both have the same value, it looks pretty weird. The re

February 20, 2023 4:47 pm I’ve been writing a new issue of The Index today and came across a bit of a spacing issue in our prose CSS rules. The image is bunched up against this heading The culprit CSS