Editor's Pick
Origin UI - Beautiful UI components built with Tailwind CSS and React
An extensive collection of copy-and-paste components for quickly building app UIs. Free, open-source, and ready to drop into your projects.
Accessibility
Meeting European Accessibility Act (EAA) Standards: A Developer’s Checklist
Ensure your digital products meet the EAA standards before the June 2025 deadline. This guide provides a practical checklist for developers to audit, fix, and maintain accessibility compliance while improving user experience.
Setting up a screen reader testing environment on your computer
When you're designing and developing for accessibility, performing manual testing using a screen reader is important to catch and fix accessibility issues that cannot be caught by automated accessibility testing tools. In this article, which is a modified, text-only excerpt from the Practical Accessibility course, we're going to walk through the process of setting up your screen reader testing environment, from downloading virtualization software if you need it, to installing screen readers, and setting up keyboard configuration. We’ll also learn what screen reader and browser combinations are most relevant for your testing work.
Accessible Color Palette Generator
This is a tool to automate the generation of accessible enterprise UI color palettes. It draws inspiration from Radix UI's custom color palette tool, but its color generation rules are mostly based on those I laid out in a Medium article I wrote, which I followed up with a retrospective on creating this tool. Check it out on GitHub.
CSS
BritCSS: Fixes CSS to use non-bastardised spellings.
Permits using English (traditional) spellings for CSS properties, rather than English (simplified).
Because this is implemented with a client-side script. You can use this to properise the CSS of any page.
This is best paired with British PHP.
Organizing Design System Component Patterns With CSS Cascade Layers
I enjoy organizing code and find cascade layers a fantastic way to organize code explicitly as the cascade looks at it. The neat part is, that as much as it helps with "top-level" organization, cascade layers can be nested, which allows us to author more precise styles based on the cascade and inheritance.
How to Use attr() in CSS for Columns, Colors, and Font-Size
I’ve personally put “advanced attr() usage” on my CSS wishlists for years and years. All the sudden we’re seeing support for it start to drop! Props to the Chrome gang and others for shipping and highlighting this wonderfulness.
Perfectly center an uppercase text
Are you tired of the unwanted spaces above and below your text? One line of code can fix this and you can have a perfect centering for your uppercase text.
Also has another interesting one in case you have lowercase text without ascenders or descenders.
Reimagining Fluid Typography
For many years, it has been ‘best practice’ to use relative units (especially em and rem) for sizing text. That’s great! But after playing around with my user preferences, I think we can improve on the common approaches.
Better Anchor Positioning with position-area
position-area might be my favorite part of the CSS Anchor Positioning spec, with a ton of features packed in to make things just… work. But there’s no magic here, just a few key parts that work well.
HTML
Why does target=”_blank” have an underscore in front?
It’s simple - developers needed a way to explicitly tell the browser to open the link in a new tab, free of frame semantics. The underscore signifies a special value rather than a frame name.
Lazy loading hidden images
A few years ago, browsers implemented a standard way of lazy loading images. The standard was a huge boon because it was straightforward to use and less code than JavaScript solutions. Unfortunately, when it was released, it didn’t support a couple of common use cases. Now it does.
To lazy load an image, all you have to do is add loading="lazy" to an image element and the browser knows not to load it until the image is about to be visible in the viewport.
JavaScript
Origin UI - Beautiful UI components built with Tailwind CSS and React
An extensive collection of copy-and-paste components for quickly building app UIs. Free, open-source, and ready to drop into your projects.
use-sound: A React Hook for playing sound effects
This library only works with React DOM, but @remigallego created an alternative for React Native! Check out react-native-use-sound.
The tutorial includes many demos, as well as instructions for finding and preparing sound effects. It's a great place to start.
SVAR - Feature Rich Svelte UI Components
SVAR offers lightweight and flexible UI components for Svelte developers. Built to help you create fast, clean web apps efficiently. Open source, fully customizable, and written entirely in Svelte.
ReactLens - Advanced Web Analytics for React Apps
Track and optimize your React applications with ReactLens, the ultimate analytics tool for developers, featuring real-time metrics and actionable insights.
Solved by StyleObserver: Element.matchContainer()
Martin Winkler published a package that polyfills Element.matchContainer to get notified in script when a Container Query matches/unmatches. Under the hood, it uses a StyleObserver.
Element.matchContainer() is to @container what Window.matchMedia() is to the @media query CSS feature.
A Mere Mortal's Introduction to JIT Vulnerabilities in JavaScript Engines
My goal with this blog post is to provide a clear, gentle introduction to the role of JIT compilers in JavaScript engines, some types of security vulnerabilities that might arise from the use of JIT compilers, and tooling to use to aid in analyzing these bugs. Hopefully, this will help others consider that this topic isn’t as impossibly difficult as it might appear. This is not intended to be a comprehensive guide to JIT exploitation; this blog is just trying to make a complex topic more approachable and friendly so that others feel confident enough to dive deeper.
WebGL Fundamentals
WebGL (Web Graphics Library) is often thought of as a 3D API. People think "I'll use WebGL and magic I'll get cool 3d". In reality WebGL is just a rasterization engine. It draws points, lines, and triangles based on code you supply. Getting WebGL to do anything else is up to you to provide code to use points, lines, and triangles to accomplish your task.
UX
In Defense of Text Labels
I’m a firm believer in text labels.
Interfaces are over-stuffed with icons. The more icons we have to scan over, the more brain power we put toward making sense of them rather than using the tools they represent. This slows us down, not just once, but over and over again.
While it may feel duplicative to add a text label, the reality is that few icons are self-sufficient in communicating meaning.
Miscellaneous
Architectures of modern Front-end applications
Business requirements can be different and change frequently in the process, so it’s important to create an architecture that is flexible, scalable and maintainable. It’s also key that everyone, like team members and clients, understands the project clearly. To avoid extensive documentation, frequent meetings, and continuous refinements, we employ the following architectural approaches. This post explores the advantages of popular architectures and helps you choose the best solution to meet your unique requirements.