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

November 14, 2022 ; Now that it is a market differentiator to talk about accessibility in projects, that’s all many do — talk about it . In a sea of pop-dev noise, “accessibility” can be claimed with

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 st

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,

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 se

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

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

One of the best things about being a designer is that it’s your job to get things wrong. That isn’t to say that you can design anything you want without consequence. Your job as a designer is to get t

2.0.0 canaries have been available for quite some time, and creator Zach Leatherman has helpfully been updating the docs by adding labels to note when a feature became available. The 2.0.0 Beta releas

January 26, 2023 2:57 pm I saw a post on mastodon snarking at “the current state of web development” and it was a screenshot of a forum where someone was asking why nested s got progressively big

Published: October 28, 2022 Updated: November 11, 2022 Forgive the clickbait title; “never” is a strong word, but this is an important, and poorly understood topic. There are quite a few misconception

2022-10-27 #css Elise Hein compiled a few arguments in favor of using CSS attribute selectors more often. Two examples stood our for me. Consider existing attributes. Whenever we add state we should t

A recent project I worked on had a common design element across many pages: A cool-looking gradient background composed of multiple color “spotlights.” The colors of the spotlights varied from page to

The CSS :has() pseudo class is rolling out in many browsers with Chrome and Safari already fully supporting it. It’s often referred to it as “the parent selector” — as in, we can select style a parent

2022-10-28 #javascript Local storage tends to be the obvious place to persist data locally in a web application. We tend to grab straight for localStorage , but it’s not the only tool in our workbox.

Home All articles In CSS Grid, the grid-template-columns and grid-template-rows properties allow you to define line names and track sizing of grid columns and rows, respectively. Supporting interpolat

Published at Oct 22 2022 Updated at Oct 22 2022 Reading time 2min Not too long ago, I was looking into refactoring my site to go all in with CSS grid! I've been aiming for a classical centered blog la

By way of a post by Manuel Matuzović which is by way of a demo by Temani Afif . .wrapper { margin-inline: max(0px, ((100% - 64rem) / 2)); } You’d be doing yourself a favor to read Manuel’s breakdown o

17 October, 2022 UX is more than usability It is common for usability to be thought of as the whole user experience. The term is used to describe what a user thinks and feels about an interface; how i

Entering a time is challenging because: a time is made up of hours, minutes and a period (AM or PM) there are many different formats for the same time like ‘12am’ ‘24:00’, 12.00am’, ‘12a.m.’ and ‘00’

Sure your feature passed the unit tests, and QA says it's good to go - but is it? To really be sure, here are four types of tests that are best to consider critical to every feature from the start. In

I’m putting the finishing touches on a new Academy workshop , Web Apps , that will be available in January 2023. For the workshop, we’ll be building a complete ecommerce platform for a fictional photo

Components have been an often requested feature in Eleventy. While I do consider it an unanswered question whether or not components are the best starting point for new developers, it’s hard to argue

SVG is the best format for icons on a website, there is no doubt about that . It allows you to have sharp icons no matter the screen pixel density, you can change the styles of the SVG on hover and yo

I knew CSS blend modes could create some cool effects, but even so, a CodePen I saw recently left me shocked at what they’re capable of. Apple-Inspired Pride Clock This CodePen , by Scott Kellum , rea