Accessibility
The Ultimate Mobile Accessibility Resource Guide
I tend to get asked a lot in my current role "Where the hell do I go for mobile accessibility information?!?". The hard truth is, it's not easy to find.
The resources and knowledge are all scattered across multiple different sites and experts. It can be hard to know where to start to look.
Does your navigation need an ARIA menu? Probably not
When building website navigation, it’s common for developers to reach for ARIA menu roles, thinking they provide a more accessible experience.
But this is often a misconception. ARIA menu roles are meant for true menus, like the File, Edit, and View drop-down menus you often see in Word, Google Docs. It’s not for standard site navigation.
In this post, we’ll explain what a true menu actually is, how it differs from traditional website navigation, and why that difference matters for people using keyboards and assistive technologies.
CSS
One CSS Property That Makes Numbers Look Instantly Better
When you’re working with fonts, especially for displaying numbers, there’s something called proportional spacing that can make a huge difference in how your numbers look when they’re animated.
To fix this issue, you can use the font-variant-numeric CSS property (which I recently stumbled upon) with the value tabular-nums.
View Transitions can swoop
Explains a technique for making CSS View Transitions move along curved “swooping” paths instead of the default straight-line animation. Browsers automatically generate keyframes for elements with view-transition-name, and by attaching an additional custom animation to the ::view-transition-group() pseudo-element, you can layer extra motion effects. The key trick is using individual transform properties like translate rather than the transform shorthand so the custom animation can combine with the browser’s built-in transition.
Making a Flappy Bird clone using pure HTML and CSS, no JavaScript
Apparently, I have little better to do with my life. I have created a clone of the lesser-known game Flappy Bird. This was made without any JavaScript—only HTML and CSS. In this blog post, I discuss how I made it.
You can play around with it here (this will not work on mobile).
Animated Dark Mode Transition with Modern CSS
Switching between dark and light modes can be pretty jarring - a wrong click can nearly blind you at night. While we can't prevent such accidents, we can give users' eyes a bit more time to adjust by animating the transition.
In this post I will explore several ways to implement the effect with modern CSS.
Using CSS animations as state machines to remember focus and hover states with CSS only
I discovered this CSS-only trick to store the past :focus or :hover state of any element. Without JavaScript, you can style elements depending on whether they were ever focused or hovered. Here's how it works.
A Squishy Button with a Hover/Click Effect
Using the shape() function to add a fancy shape to a button element.
Abusing Customizable Selects
Let’s go over a few demos using the new customizable <select> feature that may be wild, but also give us a great chance to learn new things in CSS.
HTML
What Are Secondary Keywords? (And How to Use Them)
Most pages that rank #1 for a keyword don’t just rank for that one term. They rank for hundreds—sometimes thousands—of related keywords.
Secondary keywords are how you capture that extra traffic. They’re the supporting terms that help your page rank for more searches without creating separate content for each variation.
In this guide, you’ll learn what secondary keywords are, how to find them, and how to use them to maximize your content’s reach.
JavaScript
WebHaptics – Haptic feedback for the mobile web
Haptic feedback for the mobile web. Supports React, Vue, and Svelte.
Invoker Commands API
The Invoker Commands API provides a way to declaratively assign behaviors to buttons, allowing control of interactive elements when the button is enacted (clicked or invoked via a keypress, such as the spacebar or return key).
From Fiber to Async React - The Missing Mental Model Behind Modern React
Almost a decade ago, React’s rendering algorithm was rebuilt, and with that it brought about new tools, ideas, and ways of building UI. But those tools arrived incrementally and were adopted in isolation, often framed as “optimizations” rather than part of a unified model. So are they truly independent ideas, or are they different expressions of the same underlying model made possible by the new rendering algorithm? In this article, we’ll explore this idea and learn what it means to embrace asynchronous work as a core concern of React.
SimpleCalendarJs - Modern JavaScript calendar component with zero dependencies. Month/week/day/list views, date & range pickers, drag & drop, dark mode. React/Vue/Angular wrappers included
A lightweight, zero-dependency JavaScript calendar component with internationalization support and framework wrappers for React, Vue, and Angular.
Features:
- Zero Dependencies - Pure vanilla JavaScript, no external libraries
- Four View Modes - Month, week, day, and list views with smooth transitions
- Picker Modes - Built-in date picker and date range picker modes for date selection
- Full Internationalization - Built on Intl.DateTimeFormat API for native locale support
- Framework Wrappers - Official React, Vue 3, and Angular components included
- Module System Support - Works as UMD (CommonJS, AMD, ES modules, or browser global)
- Dark Mode Ready - Automatic dark theme detection and support
- Async Event Loading - Fetch events dynamically with
async/awaitsupport - Drag & Drop - Move and resize events with mouse or touch
- Responsive Design - Adapts to any screen size
- Customizable Styling - CSS custom properties for easy theming
- Accessible - Semantic HTML with proper ARIA attributes
- Small Bundle Size - ~45KB minified JS + ~22KB CSS (~16KB total gzipped)
Progressive Web Apps (PWAs) Support
Support for PWA features varies significantly across operating systems and browsers. Chromium-based browsers (Chrome and Edge) on Windows offer the broadest support. macOS has improved with Safari's adoption of web app installation in Sonoma. Firefox does not support PWA installation on any desktop platform. Linux support depends heavily on the desktop environment.
This table lists high level features based on what I believe to be a native app-like experience. There are many more features of PWAs that are and are not supported by various OS/browser combinations. Maximiliano Firtman's website has a ton of updated info on these specifics.
Snice - A decorator-driven web component library with 130+ ready-to-use UI components. Zero dependencies, works anywhere
Write clean, reactive web components with TypeScript decorators. No framework. No virtual DOM. Just the platform, made elegant.
Frontend Memory Leaks: A 500-Repository Static Analysis and Five-Scenario Benchmark Study
You know the moment. You’re clicking through your SPA — navigating pages, filling out forms, switching tabs. Everything feels snappy. Then twenty minutes in, the UI starts stuttering. Scroll events lag. Animations drop frames. You open the Memory tab in DevTools and watch a heap line climb steadily — 200 MB, 300 MB, 400 MB — with no sign of leveling off.
That’s a memory leak. Not the dramatic kind that crashes on launch and gets fixed the same afternoon. The slow, silent kind. A missing cleanup return in a useEffect. A subscribe() that never gets an unsubscribe(). A watch() whose stop handle was never captured. Each one invisible during development, each one accumulating retained objects in production.
The short version: 86% of repos have at least one missing-cleanup pattern. The scan found 55,864 potential leak instances across 714,217 files. And every benchmark scenario showed the same result — roughly 8 KB of retained heap growth per cycle when cleanup is missing, versus near-zero growth when it’s handled properly.
Temporal: The 9-Year Journey to Fix Time in JavaScript
JavaScript's Date object has been a source of bugs for three decades. Temporal, which just reached Stage 4, is a modern replacement with immutable types, first-class time zone and calendar support, and nanosecond precision. This is the story of how Bloomberg, Igalia, and the TC39 community spent nine years turning an idea into a shipping standard.
Improve Animation Performance With requestAnimationFrame
When building modern web interfaces, smooth animations and responsive interactions are critical for user experience. If you’ve ever used setTimeout or setInterval for animations and noticed jank, dropped frames, or input lag, it’s time to understand requestAnimationFrame.
Svelte best practices
This document outlines some best practices that will help you write fast, robust Svelte apps. It is also available as a svelte-core-bestpractices skill for your agents.
Miscellaneous
theSVG - 3,847 Free Brand SVG Icons for Developers and Designers
Search, copy, and ship 3,847 brand SVG icons. Free, open-source library with npm packages, React components, CLI, CDN, and MCP server for AI assistants.