Accessibility
Implementing Accessible SVG Elements
Master SVG accessibility: Learn techniques for ARIA roles, testing, and creating inclusive graphics that work for everyone.
We need to talk about your accessibility statement
Having an accessibility statement in itself is saying a lot, but only if the statement is telling the truth and in the right way.
5.15 Million Reasons to Settle Web Accessibility Lawsuits Quickly
Popular fast-fashion retailer Fashion Nova agreed to a $5.15 million web accessibility settlement in Alcazar v. Fashion Nova, underscoring the steep cost of dragging out an accessibility lawsuit. Most cases settle for under $10,000—so what went wrong here, and what can companies learn?
To the best of our knowledge, the Fashion Nova $5.15M settlement is the second largest publicly known web accessibility settlement, only behind the pioneering National Federation of the Blind (NFB) v. Target Corp. class settlement from 2008. In that case, Target agreed to establish a $6 million fund for blind customers (focused on California class members) and to make its website accessible, including monitoring and training by the NFB. Target settlement also paid $3.7 million in attorneys’ fees to plaintiffs’ counsel and, importantly, contained no reversion of funds to the defendant.
CSS
Public CSS Custom Properties in the Shadow DOM
Naturally there is a lot to talk about with respect to styling custom elements and web components. This article won‘t dive into all the ways to style a component and/or open up stylistic configuration of your web components. This article is going to focus specifically on using CSS Custom properties and things to think about when you create them for your component consumers or when you are using them internally in your components.
There are two main categories of usage to discuss:
- Public CSS properties meant for usage externally by consumers
- “Private” CSS properties meant to be used internally to make styles easier to implement
There are lots of articles already describing private CSS variables and naming schemes and such, so this article will focus on the public side of CSS properties.
Responsive video is (almost) easy now
How to serve high-quality, vertical and horizontal video variants and break free from platforms like YouTube.
It's time for modern CSS to kill the SPA
Native CSS transitions have quietly killed the strongest argument for client-side routing. Yet people keep building terrible apps instead of performant websites.
CSS Hyphens, Words, Syllables, and Languages
There's a newish CSS feature called hyphens that specifies how you want words to be hyphenated when the text wraps.
But if you use it, you're going to need to make sure you're also correctly identifying the language. And to understand why that matters, we need to talk about words and syllables.
Responsive infinite logo marquee
With the powerful shape() function and the new sibling-index()/sibling-count() functions, we can create an infinite logo marquee using a few lines of code.
- Responsive (It doesn't depend on the container width)
- Works with any number of images
- Easy to control using CSS variables
- No magic numbers
Creating a scroll-spy with 2 lines of CSS
scroll-target-group is a new CSS feature that lets you create scroll-spy table of contents with basically 2 lines of CSS.
Note: this article describes a new CSS feature which is currently only shipped in Chrome 140 (current Canary, stable next month) at the time of this writing.
JavaScript
es-toolkit
es-toolkit is a modern JavaScript utility library that offers a collection of powerful functions for everyday use.
Compared to alternatives like lodash, es-toolkit provides a significantly smaller bundle size (up to 97% less) and 2-3 times faster runtime performance. This is achieved through a modern implementation that leverages the latest JavaScript features.
es-toolkit comes with built-in TypeScript types and has been rigorously tested, ensuring 100% test coverage for maximum reliability.
Vanilla JavaScript support for Tailwind Plus (formerly Tailwind UI)
Every UI block in Tailwind Plus is now fully functional, accessible, and interactive, even if you don't use a framework like React or Vue.
Logical assignment operators in JavaScript: small syntax, big wins
Logical assignment operators (||=, &&=, ??=) streamline conditional assignments in JavaScript, making your code cleaner, safer, and easier to read, especially in modern front-end workflows.
Lenis ("smooth" in latin) is a lightweight, robust, and performant smooth scroll library
Designed by @darkroom.engineering to be simple to use and easy to integrate into your projects. It's built with performance in mind and is optimized for modern browsers. It's perfect for creating smooth scrolling experiences on your website such as WebGL scroll syncing, parallax effects, and much more, see Demo and Showcase.
EsJS - Lenguaje de programación en Español
Escribe código en Español y ejecútalo en JavaScript.
EsJS puede ser utilizado tanto del lado del Servidor como del Cliente, gracias a su conversión a JavaScript.
Web Components: Working With Shadow DOM
Web Components are more than just Custom Elements. Shadow DOM, HTML Templates, and Custom Elements each play a role. In this article, Russell Beswick demonstrates how Shadow DOM fits into the broader picture, explaining why it matters, when to use it, and how to apply it effectively.
Make any website load faster with 6 lines of JavaScript
Ever clicked a link and had the next page appear almost instantly? That magical, speedy experience is becoming easier to achieve thanks to the Chrome Speculation Rules API. This new browser feature helps make navigation feel instant with just a few lines of JavaScript.
The Chrome Speculation Rules API allows developers to declaratively tell the browser which pages to preload and prerender, providing a near-instant loading experience.