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

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 things wrong as many times as possible before your team goes on to build the “least wrong” thing. In…

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 misconceptions that float around in the sphere of web development, and persist no matter how often they’re…

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

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 intuitive it is, how easy it is to use, how easy it is to learn. But usability is just a small part of the user experience whole. When we…

17 October 2022 In 2021 I worked on a service that allows teacher training providers to set up interviews with trainees. As part of this, we wanted to find out the best way of allowing users to enter a time in the correct format. This is more challenging than you might think because: a time is made…

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. Include these tests to improve the accessibility of your features and assist your users in…

Daily Tips 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 shop. That includes building the digital store front with an integrated shopping cart and…

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

Daily Tips One of my readers asked me to write about indexedDB. It’s a big topic, so we’ll be looking at bits and pieces of it over the next few days. Let’s dig in! What is indexedDB? indexedDB is a type of database storage built right into the browser. It has a few advantages over cookies and local…

Blinking takes approximately 100–400 milliseconds. That’s fast, but it’s two to eight times longer than most people will accept when interacting with a rendering web page. Any longer than 50 milliseconds and visitors sense that a page is unresponsive, affecting their overall user experience. To…

Daily Tips Over the years, I’ve seen a lot of the same myths about vanilla JS pop up over-and-over again. Today, I wanted to debunk a few them. Let’s dig in! Myth 1: Vanilla JS doesn’t scale Oh no? It powers every single library and framework you use that allegedly does scale. Often, people who say…