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

9 Comments This Article was mentioned on arush.io #a11y When I start reading a post / a… – Amanda Unvarnished; 16 November 2022 at 4:36 am. Permalink Thanks for the link to the VoiceOver command charts. i am starting with VoiceOver because it’s already on my devices as i begin this journey isral…

29th November 2022 I wrote down a quote recently from Hayley Hughes’ talk at Clarity 2022. She said “when you work on design systems, there are people that think they know what you do, but they have no clue.” What’s struck me about this is that it highlights an important change in the design systems…

Every UX Designer strives to put the user at the heart of the work they do. You’re probably familiar with those companies that are fully embracing a user-centred approach to their business; Duolingo, Spotify, Airbnb, Fitbit, Netflix, Apple. These companies are examples of the highest standard when…

I recently mentioned two things I wanted to do at this site. Remove the “Featured Projects” section from the homepage and figure out how to integrate my freelance work. My original thought was that I’

Writing effectively is a superpower, there is no denying it. As a software engineer, you write a lot . Most of the writing you do is for computers. Businesses, however, consist of people. Many of us w

Illustration by Aileen Jeffries I recently saw a tweet from Andy Bell that a progressively enhanced burger menu pattern was causing a poor Cumulative Layout Shift (CLS) metric score. Both the CLS metr

The Index: Issue #3 - February 27, 2023 Welcome back! The theme this week is whitespace and how it enhances both the look and feel of your design work, along with making the content much easier to dig

Style queries are an extended part of the containment spec which container queries also came from. TL;DR: they allow you to query for style features of a container and apply rules to its children. For

It’s astonishing how much influence a single company can have, even on the invisible part of the webdesign of your blog: the metadata. I still encounter countless sites—including my own, before cleani

by Salma Alam-Naylor ✨ I write code for your entertainment ✨ Watch me live 22 Nov 2022 3 min read Table of contents I'm really into retro-tech at the moment. And whilst I still haven't gotten round to

Home All articles All major browser engines now support last baseline alignment in CSS grid and flexbox. Feb 20, 2023 Rachel Andrew Twitter GitHub Glitch Homepage On this page Celebration This web fea

After a little break during the holidays I had some nice blogging momentum over at the Junk Drawer in the beginning of January. And then Covid finally caught up with me . Before that unfortunate momen

In CSS it’s possible to style elements based on the number of siblings they have by leveraging the nth-child selector . But what if you want to style the parent element based on the number of children

Until now, the tooling for Utopia has been predominantly developer-focused, but we know that's only half the story. To start to address this, we've created a pair of Figma plugins to help designers set out Utopian project foundations. To begin with, install the Utopia type + space calculator plugin…

FediLeventy Part 2 - comments and follower lists Yes, I'm calling it FediLeventy and there's nothing any of you can do to stop me. Yesterday, after publishing my post on implementing some features of

Photo by Xavi Cabrera on Unsplash For the past year or so, Birdie has been experimenting with micro frontend architecture. We have converted our primary front end application into smaller applications

Until recently there was no dedicated method in HTML to identify content as a subheading, subtitle, alternative title or tagline. Now there is. Previously, a common method for subheadings was to use a heading of lower rank, for example: All At Sea Over Ventriloquism Captain Dick's Logbook By Richard…

This article is the last part in a series on HTML includes. So far, we’ve looked at how to include external HTML using iframes , how to build a web component to fetch remote HTML , and how to combine

We rely on CSS Media Queries for selecting and styling elements based on a targeted condition. That condition can be all kinds of things but typically fall into two camps: (1) the type of media that’s