Semantic markup, native browser APIs, accessibility best practices, and modern HTML elements.
A practical map of what the browser already handles in forms: validation, state styling, sizing, focus, and autofill, with links to the deep dives.
Clarifies the distinct performance roles of the loading and decoding attributes on HTML images. Explains when to defer network requests versus when to defer main-thread image decoding.
Declarative Shadow DOM allows developers to attach a shadow root to a custom element using only HTML, bypassing the need for client-side JavaScript execution. This article explains how to use the shadowrootmode attribute on the <template> element to enable server-side rendering for web components. The key takeaway is how this approach eliminates layout shifts and flashes of unstyled content in component-heavy applications.
Not every image on a page deserves the same loading priority from the browser's default heuristics. Here's when to mark the hero image high, and when deprioritizing the rest helps LCP more.
role='search' bolted onto a plain form is one more attribute developers reliably forget to add. The new <search> element makes that semantic landmark the default instead of an opt-in extra.
Accordions used to mean reaching for a JavaScript library just to track which panel was open. The details name attribute groups them like radio inputs, with zero click handlers required.
Radix, Headless UI, and jQuery UI exist largely to paper over a missing browser primitive that finally shipped. <dialog> plus showModal() replaces most of that plumbing natively now.
aria-hidden alone doesn't stop keyboard focus, and tabindex='-1' has to be applied recursively to every focusable child by hand. inert replaces that whole stack with one HTML attribute.
