Accessibility
Web accessibility smoke testing
At my work, we struggle with constant turnover of full-stack developers working on the frontend who haven’t been trained in accessibility best practices. We’re limited in what we can teach them due to our team’s capacity so we came up with six quick checks for developers to complete in a web browser before submitting a PR.
Two smoke tests will uncover critical and high accessibility issues that will prevent some customers from using the webpage. Accessibility issues discovered during smoke testing should be resolved before release; otherwise we end up deploying real access barriers into production.
A11y 101 – 3.3.8 Accessible Authentication (Minimum)
Authentication should be a door, not a puzzle.
Offer multiple paths. Let password managers work. Skip CAPTCHA when possible. Support biometrics, magic links, and token-based verification. Make recovery obvious and accessible.
If your login flow can only be completed by someone with perfect memory, perfect vision, and perfect motor control, it’s not secure. It’s exclusive.
Build authentication that opens doors, not locks them.
Designing Accessible Keyboard Focus States With CSS
Removing CSS focus outlines can make keyboard navigation difficult or impossible. Here’s what WCAG requires and how to style focus states accessibly.
State of Ecommerce Accessibility 2026
An audit of 59,400 ecommerce product pages. 64% had at least one automatically detected accessibility failure rated critical.
Improving accessibility with CSS media queries
There are some newly supported but underutilized CSS media queries that can be leveraged to improve accessibility without having to scrap the design and starting over—by considering user preferences.
The user preferences that can be targeted with media queries control contrast, motion, color schemes and transparency. These can be configured in the accessibility or display settings of the operating system.
CSS
117 CSS Text Effects & Animations — Free Copy & Paste
117 free CSS text effects and text animations: glitch, neon, gradient, typewriter, 3D and more. Pure CSS, no JavaScript. Copy & paste the code.
Input Range Slider with Custom Shapes
Building on a previous idea, here is a more generic implementation of range sliders with custom shapes and tooltips. No JavaScript and a lot of cool CSS features (border-shape, shape(), Scroll-Driven Animations, @property, etc.)
CSS in 2026: Modules, Tailwind, CSS-in-JS, and More
Compare native CSS, CSS Modules, Tailwind, CSS-in-JS, and zero-runtime styling in 2026, with examples and performance trade-offs.
Sumi.css
A minimalist CSS framework. Write plain, semantic HTML and it looks finished. Add a class only when you want something specific.
Fit height to background pattern size with calc-size()
How to use CSS’s calc-size() function to make an element’s height fit a repeating background pattern.
The key idea is to use calc-size(auto, round(up, size, var(--base))) to calculate an element’s natural height and round it up to the next multiple of the pattern’s size. This keeps the element’s height aligned with the background pattern without setting a fixed height.
Embracing Playful Imperfection With The CSS random() Function
Design systems thrive on consistency, so where does randomness fit in? Through playful demos of organic typography, bouncing letters, and splayed cards, Brecht De Ruyte shows how the new CSS random() function brings a little imperfection to the web without JavaScript libraries or preprocessor loops that generate hundreds of lines of static CSS.
HTML
Introducing the HTML-in-Canvas API origin trial
For years, web developers have had to make a tough architectural choice when building complex, highly-interactive visual applications on the web/ Should you lean on the DOM for its rich semantic features or render directly to the <canvas> element for low-level graphics performance?
With the new experimental HTML-in-Canvas API—available now in origin trial—you don't have to choose. This API lets you draw DOM content directly into a 2D canvas or a WebGL/WebGPU texture while keeping the UI interactable, accessible, and hooked up to your favorite browser features. By combining HTML with low-level graphics processing, you can create experiences that were previously impossible.
JavaScript
What Is a Hydration Mismatch Error and How Do You Fix It?
Understanding hydration mismatch errors and what to do about them.
Coss UI-Svelte (unofficial)
This project is an unofficial port of Coss UI for Svelte.
This port is what I’ve always wanted for Svelte: one unified, full-featured component library. It builds on the upstream Coss components and extends them with contributions from Shadcn, MapCN, Bits UI, Origin UI and third-party contributors.
In a nutshell, everything needed to build a serious application, plus:
- Modern design: clean, contemporary styling with layered shadows and softly rounded surfaces.
- Responsive by default: widgets and layouts adapt to any screen size, with swipe and touch gestures built in.
- Ready to use: 70 components and 700+ blocks and particles, including forms, fieldsets and skeletons. Spend your time on application logic, not on rebuilding the basics.
- Solid foundation: powered by Shards UI, a Svelte port of Base UI.
- Intuitive out of the box: sensible defaults, so components behave the way you expect.
This work is not affiliated with coss.com and therefore unofficial.
How to Gaslight JavaScript Programmers
In JavaScript, an object's observable properties don't necessarily reveal everything it can do. A Proxy can make an object behave differently from what its visible structure suggests. Learn how JavaScript Proxy objects can hide, invent, or manipulate object properties and behavior.
<rich-input> – A Rich Input Field
A rich input field that acts like a regular <input type="text">, enhanced with contextual keyword-based autocompletion (keyword:value) and in-input highlighting powered by <datalist>, the OpaqueRange API, and the CSS Custom Highlight API.
Unload event deprecated in Chrome
Chrome has completed deprecating the unload event as of Chrome 155. Going forward, by default, unload handlers no longer fire for Chrome and other Chromium-based browsers. This was a years-long effort to remove an API that is increasingly unreliable and shouldn't be depended on by websites and web developers.
Building an Isolated Preview for AI-Generated HTML
How to safely preview AI-generated HTML using sandboxed iframes and Content Security Policy (CSP). It demonstrates how to prevent untrusted code from accessing sensitive data, navigating away from the page, or sending data to external servers, while still allowing the preview to function.
UX
UI Micro Interactions and AI Prompts
Explore 113 interactive UI micro interactions for buttons, forms, selection controls, modals, navigation, and more. Preview each behavior and copy its implementation prompt with TypeUI Creative.