Writing from the workshop
164 articles on the parts that actually hurt.
You're watching window to detect element size changes. ResizeObserver watches the element itself.
A `window` resize listener only fires when the viewport changes. ResizeObserver fires whenever the element's own box changes — from content loading, parent reflow, container queries, or anything else.
Jul 26, 2026 · 4 min
You use a setTimeout to trigger CSS entry animations. @starting-style makes it unnecessary.
Before `@starting-style`, the moment an element entered the DOM was invisible to CSS — transitions had no 'before' state to interpolate from. The at-rule gives you one, natively, with no JavaScript required.
Jul 25, 2026 · 4 min
You still write finally { resource.close() }. The using keyword does it automatically.
The Explicit Resource Management proposal adds a `using` declaration that calls cleanup the moment a scope exits — normal return, early return, or throw. No more try/finally boilerplate for timers, event listeners, connections, or any other resource you need to release.
Jul 24, 2026 · 4 min
You've been doing Set math by hand. JavaScript finally shipped .union(), .intersection(), and friends.
Set has always been missing its obvious operations. ES2025 adds `.union()`, `.intersection()`, `.difference()`, `.symmetricDifference()`, and three boolean predicates — native methods that used to require four lines of spread syntax each.
Jul 23, 2026 · 4 min
You keep escaping the Promise constructor. Promise.withResolvers does it right.
The 'deferred promise' pattern — storing resolve and reject outside the constructor so you can call them later — is a daily JavaScript idiom that's always felt awkward. ES2024 added a one-liner for it.
Jul 22, 2026 · 5 min
You're rethrowing errors and losing context. Error.cause fixes that.
Every time you catch an error and rethrow a new one without forwarding the original, you lose the stack trace, the error type, and everything useful about what actually went wrong. ES2022 added `Error.cause` to fix exactly this.
Jul 21, 2026 · 4 min
TypeScript Generics: The Complete Guide (with Cheat Sheet)
Learn TypeScript generics from the ground up — generic functions, constraints, defaults, and classes — with worked examples and a copy-paste cheat sheet.
Jul 20, 2026 · 15 min
Your scroll listener fires on every pixel. IntersectionObserver fires when visibility actually changes.
Detecting whether an element is in the viewport by listening to scroll events runs an expensive layout calculation on every frame. `IntersectionObserver` is the browser-native alternative — it fires only when visibility changes, off the main thread, with no scroll handler involved.
Jul 19, 2026 · 4 min
You're using Floating UI to position your tooltip. The browser does it natively now.
CSS Anchor Positioning is Baseline 2026 — it lets any element declare itself an anchor and any floating element position relative to it in pure CSS. No JavaScript, no layout math, no ResizeObserver wiring.
Jul 18, 2026 · 5 min
Your margin-left doesn't exist in Arabic. CSS logical properties fix that.
Physical CSS properties like `margin-left` and `padding-right` break silently when a layout needs to support right-to-left languages. Logical properties replace the physical axis with a writing-mode-aware model — one codebase, every direction.
Jul 17, 2026 · 5 min
Your CSS Grid cards look misaligned. subgrid is the fix you didn't know existed.
CSS Grid controls your outer container, but its children can't participate in the same tracks. `subgrid` closes that gap — nested elements align to the parent grid's rows and columns without padding hacks, fixed heights, or JavaScript measurements.
Jul 16, 2026 · 5 min
Your .sort() is mutating state. JavaScript finally gave you the fix.
The classic array methods — sort, reverse, splice — mutate the original array, silently breaking React state updates and surprising anyone who forgot to spread first. ES2023 added four immutable counterparts: toSorted, toReversed, toSpliced, and with.
Jul 15, 2026 · 5 min