Accessibility
WCAG 2.3.1 Flash Test: How to Test Websites for Seizure Hazards
The most thorough and practical guide for testing 3-flash compliance on websites. Learn how to run step-by-step visual audits, compare desktop vs mobile layouts, and use our free analysis tool.
Free Photosensitive Epilepsy Video Checker — WCAG 2.3.1, Ofcom & Trace24 Scanner
Upload your video and instantly analyze it for WCAG 2.3.1, Ofcom 2017, and Trace24 flash violations. Free, private, client-side browser analysis. No signup required.
Bend, Do Not Break: Building Resilient Accessibility Programs
A passing audit measures a system on its best day, in a stable environment, with the people who built it still in the room.
None of those conditions last.
Accessibility resilience parallels general resilience engineering: the capacity of a system to maintain its accessibility under stress, absorb change without degradation, and recover quickly when things go sideways.
Conformance is a point-in-time measurement.
Resilience is what determines whether that measurement still means anything eighteen months later.
CSS
Scroll Type: CSS-only scroll-driven typography
Features a Native CSS Scroll-Driven Animation combined with a variable font to create a typography effect where text "comes into focus" as the user scrolls down the page.
Balancing flex items with flex-wrap: balance
Oftentimes, when working with flexbox and wrapping is enabled, you might end up in a situation where the items are wrapping, but at some point, only one item is wrapping (an orphan item).
This often causes web designers and developers to trigger a media query to avoid that behavior, which is not ideal at all and can break easily if the content changes.
Controlling when CSS custom properties are computed
When and how CSS custom properties are calculated might not be what you expect, and it has a big impact on your styles.
Multiple-column layout, rows, rules, and floats
Recently implemented in Chrome are two of my top asks for CSS—the concept of rows in multiple-column layout, and gap decorations for rows and columns in grid, flexbox, and multicol.
Rows (using column-wrap) provide a way to use multicol on the web without risking scrolling up and down to read if the columns become taller than the viewport. Gap decorations mean that, for multicol, you can now add a rule between these new rows.
Hover Proximity Using Modern CSS
You can always easily style :hover, but what if you want the NEXT item to have styling too? Or, just a smidge harder, the PREVIOUS item. How about multiple in any direction?
3D CSS Guide: perspective, preserve-3d and translateZ
I lost a penguin race in Super Mario 64 before I understood the camera. That's the leap from painted-on depth to real 3D, and CSS makes it with six properties.
The broadcast squeezeback, rebuilt with CSS Grid and WebVTT
Demonstrates how to recreate the TV “squeezeback” effect on the web using CSS Grid and WebVTT. It uses animated grid tracks to resize the video and reveal additional content, while WebVTT cues act as a timeline for triggering different layouts during playback.
It also explores related techniques such as extracting video colors with <canvas> and handling interactive content like forms within the animated layout.
HTML
What's in a tag name? JavaScript, apparently
I started this post as a simple question about what are valid tag name characters and it turned into a reminder that browsers are far more lenient than you would expect. A tag name can become an JS payload, a URL, or even fresh markup.
The lesson is that unusual HTML and seemingly harmless properties such as localName, part, and classList can become unexpected sources of hiding payloads and transformations that can bypass blocklists and WAF signatures.
Building an Accordion the Browser Can Search
Build an FAQ that stays findable when it's collapsed, learn which hiding technique to pick by who should still reach the content, and let <details name> and hidden="until-found" hand discovery back to the browser.
JavaScript
Process Huge Image Batches in the Browser Without Freezing the UI
Use Web Workers, OffscreenCanvas, and the Canvas API to resize and compress large image batches locally without uploading the original files.
The browser can do much more image processing than we sometimes give it credit for.
glyphed.js - Animated SVG handwriting for the web
Renders text as animated hand-drawn SVG. Each letter is a real monoline glyph path (not a font), drawn in with a stroke animation as its word scrolls into view — with per-letter randomness (rotation, baseline drift, scale, and multiple hand-drawn variants per character) so the same word never renders identically twice.
- Zero dependencies, ESM, TypeScript strict, ~small
- Full a–z, A–Z, 0–9, and punctuation (. , ! ? ' - & ( ) — " \ { } [ ] * = + @ :`) coverage
- Scroll-triggered draw-in animation via
IntersectionObserver, or static fully-drawn output - Styleable with one CSS custom property (
--hw-color)
Demo here.
The Structured Clone Algorithm: What JavaScript Can and Cannot Move Between Boundaries
JavaScript's structured clone algorithm preserves cycles, shared references, and many built-in types, but it still rejects or transforms values when data crosses a boundary.
Why not build frontend frameworks on raw HTML, CSS or JS?
It is possible: No endless dependencies, no dev environment setup, no build step, no Web Components required, minimal boilerplate, minimal lock-in. Raw HTML, CSS and JS have everything needed and are web standards, unlike custom syntaxes.
toast-queue — Accessible, customizable toast notifications
Framework-agnostic, customizable, and built on modern web APIs with progressive enhancement and graceful fallbacks.
The Email Verification API
A new proposal aims to enable email verification directly within the browser.
Telixon - Phone numbers for JavaScript
Phone-number parser, formatter, and validator for JavaScript and TypeScript.
form-saver: A web component that stores (and restores) values within the form it wraps
It is designed for crash recovery and interrupted sessions:
- Saves form field values to localStorage as users type.
- Restores values when the page is loaded again.
- Clears saved values after a successful submit flow.
- Optionally retains selected fields after submit.
UX
AI-Generated Images Can Perform as Well as Stock Photography
When users didn’t know whether an image was AI-generated, the images we tested did not create any perception penalty compared to stock photos.
Miscellaneous
CSVtoTable: Simple command-line utility to convert CSV, TSV and Excel files into a single self-contained HTML page with search, filters, and sorting
CSVtoTable converts CSV, TSV, and Excel files into interactive HTML tables.
- Single native binary with embedded frontend assets
- Standalone HTML output that works offline, with data, styles and scripts inlined by default
- CSV, TSV, and Excel (
.xlsx) input, gzip archives included - Local files, URLs, standard input, or several files combined into one table
- BOM and UTF-16 detected automatically;
--encoding,--delimiter,--quotecharfor the rest - Search, per-column filters with clearable chips, sorting, pagination, and virtual scrolling
- Copy, CSV, JSON, and print exports, plus column show/hide
- Markdown or raw HTML page title and description, inline or read from a file
- Five colour themes, switchable in the page or fixed with
--theme - Themes are just CSS variables, so you can define your own with
--cssand it joins the picker --cssand--jsinline your own stylesheet and script, with the live table API exposed- Self-unpacking output: the frontend ships gzipped, roughly halving every file
--splitinto separately cacheable assets instead, or--servea preview over HTTP- Mobile-responsive layout
Table demo here.