View Transitions API in Real Sites
The View Transitions API lets the browser animate between two DOM states. Wrap a DOM mutation in document.startViewTransition(callback) and Chrome will snapshot the before and afte…
Read article →IntersectionObserver Patterns Worth Knowing
IntersectionObserver tells you when an element enters or leaves the viewport. The classic use is lazy-loading images, but it covers infinite scroll, scroll-driven animations, and…
Read article →ResizeObserver for Layout-Aware Components
ResizeObserver fires when a watched element's content rect changes size. It is the right tool for component-level responsiveness when container queries do not cover the…
Read article →The Native dialog Element Has Arrived
The <dialog> element ships native modal behaviour: show() for non-modal, showModal() for blocking. The browser handles focus trapping, Escape to close, and the top layer…
Read article →The Popover API for Tooltips and Menus
The Popover API adds popover as an HTML attribute and popovertarget as a trigger. Click a button with popovertarget="menu" and the linked element becomes a…
Read article →Native Lazy Loading for Images and Iframes
Add loading="lazy" to any <img> or <iframe> below the fold and the browser defers loading until the element nears the viewport. No JavaScript required.Pair it…
Read article →Web Animations API for Scripted Motion
The Web Animations API gives JavaScript control over CSS animations with composition, playback, and timeline syncing. element.animate(keyframes, options) returns an Animation objec…
Read article →Designing Empty States You Will Actually Read
An empty state is a first impression for a feature. 'No data' is a missed opportunity — explain what the feature does, why it is…
Read article →Form Validation That Respects the User
Validate on blur, not on every keystroke. A user typing their email should not see 'invalid email' before they finish the @.Show errors inline, anchored…
Read article →Designing for Real Devices, Not Devtools
Devtools device emulation does not reproduce slow CPUs, OS keyboards, or 3G networks. Test on a 2018 mid-range Android occasionally — the experience differs sharply…
Read article →