Accessibility
How to Minimize Legal Risks in Accessibility Compliance
I’ve been doing accessibility work long enough that I can confidently say, you cannot avoid lawsuits about accessibility. What you can do is minimize your risk. If you do not have an accessibility effort going on in your company, start one. This guide will help you prioritize where you should be looking first. If you have a program going, this can help focus your efforts into where most lawsuits look first.
Accessible Time Format
This is a test to see how screen readers treat time with a colon (hh:mm) versus a period (hh.mm).
Conclusion: Hours and minutes should be formatted on the web using a colon (hh:mm). Had no idea time with a period is even a thing. Also a nice reminder to use the <time> element.
Understanding Focus Indicators for Web Accessibility
Master focus indicator design for web accessibility. Learn WCAG-compliant techniques for clear visual feedback and keyboard navigation.
CSS
Subgrid: how to line up elements to your heart’s content
Subgrid is not new, but the recent State of CSS survey results showed that it was something that was still confusing to people, so we thought we’d circle back and show an easy way to understand what’s happening. It’s been supported by the major browsers for a while now, so it’s safe to use.
Single-colour gradients
Gradients are generally for going from one colour to another, so the idea of a single-colour gradient might seem a bit useless, but there are a few good use cases for them.
Apple has a private CSS property to add Liquid Glass effects to web content
Apple has a custom CSS property named -apple-visual-effect. Not only does it allow the use of Liquid Glass in iOS 26 (via values like -apple-system-glass-material) all versions support using standard materials with values like -apple-system-blur-material-thin.
What Can We Actually Do With corner-shape?
At the time of writing, only Chrome 139 and above supports corner-shape, which must be used with the border-radius property or/and any of the related individual properties (i.e., border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius).
Features of your font you had no idea about
In the previous article (Quick guide to web typography for developers) we covered the basic steps to improve the typography in your apps. Today I’d like to expand a bit more on the topic of fonts and what you can get out of a high-quality font (paid or free). High-quality fonts often come with a full bag of goodies, it will be unwise to not use what the type designer gifted (or sold) to us.
100 ways to center an element horizontally and vertically
Centering in CSS is pretty easy nowadays. We have numerous methods to do it, but how many exactly? I did the count, and I was able to reach 100 different ways.
The list includes old and obsolete methods (that you should not use), but it was a fun exercise trying to enumerate all the possibilities.
Centering horizontally and vertically
Do you still think centering in CSS is hard? Find below 100 different methods to center a single element inside a container.
Follow-the-leader pattern with CSS anchor positioning
There’s a pattern I’ve been implementing lately that creates a little “follow-the-leader” effect using anchor positioning. And the technique is pretty neat too. It involves creating a single “follower” (positioned) element and dynamically updating it’s anchor on an event or state change. This could be in JavaScript (i.e. on click), or in CSS directly (i.e. on hover, focus/focus-within, updating the current-target, etc).
A refresh of Learn CSS with nine new modules
Our popular Learn CSS course has been updated with new modules covering the latest CSS features. While the four year-old course was still valid, it didn't include many of the exciting features that are available today:
- CSS nesting
- Container queries
- Custom properties
- Counters
- Cursors and pointers
- Anchor positioning
- Popover and dialog
- View transitions for SPAs
- Paths, shapes, clipping, and masking
CSS offset and animation-composition for Rotating Menus
Circular menu design exists as a space-saver or choice, and there’s an easy and efficient way to create and animate it in CSS using offset and animation-composition.
Is it Time to Un-Sass?
Many of the Sass features we've grown to love have made their way into native CSS in some shape or form. So, should we still use Sass? This is how developer Jeff Bridgforth is thinking about it.
HTML
Replace Your Animated GIFs with SVGs
No one loves dancing hamster GIFs more than I do. But all those animated frames can add up to files so large you don’t even see the dancing hamster. Your other tab has already loaded and you’ve followed the dopamine hits down another social media rabbit hole.
There’s an alternative for those giant animated GIFs: animated SVGs.
Along with much smaller file size you also get infinite scalability and the use of some — though, sadly, not all — media queries. Let’s take a look.
The picture element
Sometimes, designs have different images for large and small screen layouts. In those situations, it can be tempting to simply bring in multiple images and use a media query in your CSS to control when we see each one, but the <picture> element is purpose-built for these situations.
Use the <picture> element for when you are doing art direction, such as loading in a different crop on an image based on the size or orientation of the viewport.
If all you want to do is load in a larger version of the same image for higher dpi devices or for when the viewport is larger, you can simply use the srcset directly on an image instead.
JavaScript
BlazeDiff - Blazing-fast pixel-by-pixel image comparison with block-based optimization. 1.5x times faster than pixelmatch with zero memory allocation
A high-performance, pixel-perfect image comparison library for JavaScript. 1.5x faster than pixelmatch, with identical accuracy and output quality. It uses an innovative block-based algorithm to achieve blazing-fast pixel-by-pixel image diffing. Built on the foundation of pixelmatch but with significant optimizations, it's designed for visual testing, CI/CD pipelines, and any application requiring fast, accurate image comparison.
dagger.js
dagger.js is a zero‑build · zero‑API · zero third‑party dependencies · runtime‑only, lightweight, (MIT‑licensed) web front‑end framework that provides an intuitive and efficient all‑in‑one solution for building web applications.
dagger.js works declaratively. Add a single script tag to your entry HTML file and start developing immediately. With simple configuration you can define routes and resource modules, create and modify scoped data directly on HTML tag attributes, and attach lifecycle callbacks and user interaction events.
dagger.js frees developers from cumbersome scaffolding, build steps, and third‑party tool dependencies, allowing you to focus on business logic instead of low‑level implementation details.
In addition, dagger.js offers comprehensive support for Web Components, such as Shoelace.
Functional patterns don’t fit JavaScript: Embracing Model View Controller on the frontend
Modern frontend development is dominated by React and other functional-like patterns. There’s likely 1000s of frontend libraries that all attempt the same thing: Creating reusable components, embracing a functional pattern around immutable data structures. However, there is a huge problem with these libraries:
Javascript data structures are inherently not immutable.
This causes tons of issues that need careful crafting. Manipulating an object inside a useEffect can cause subtle bugs. There’s tons of potential solutions that “enforce” immutability: Immer, Redux, ImmutableJS - but they all require you to model your data around these tools. In some cases, these tools appear to fix the problems, but you will still end up with hidden gotchas.
I feel like all these functional-like frameworks try to make Javascript something it is not: A functional language with immutable datastructures.
UX
Rules for creating good-looking user interfaces, from a developer
Creating good-looking user interfaces has always been a struggle for me. If you’re in the same camp, this might help.
This system is about achieving the best possible design with the least amount of effort. There’s no need to know about the psychological impact of colors, which fonts are best for which purpose, golden ratios, etc. This is expert-level design knowledge that is just distracting if you’re not on that level. The key is to focus on the few important aspects, and not try to optimize every tiny detail.
For a long time I could tell when a design was good and that my own designs were bad, but I could never specify why my designs were bad. Now I can summarize it in two words: alignment and consistency