Frontend

Fast user interfaces frequently start requests that become irrelevant before they finish. A search box may issue a request for ca, then cat, then catalog. If the oldest request finishes last, it can overwrite the newest results. AbortController gives JavaScript a standard way to cancel Fetch requests and other APIs that accept an AbortSignal. The basic cancellation pattern Create a controller and pass its signal to fetch: Copy const controller = new AbortController(); const request = fetch('/api/profile', { signal: controller.signal, }); controller.abort(); Once aborted, the fetch promise rejects. Cancellation is therefore part of normal control flow and should be handled deliberately.

Media queries answer a viewport-level question: how wide is the browser? Reusable components often need a different answer: how much space does this component have where it was placed? CSS container queries solve that problem. A card can render compactly in a sidebar and switch to a horizontal layout in a wide content area without knowing either page layout in advance. Why viewport breakpoints leak layout assumptions Consider a reusable article card. A media query might switch it to two columns when the viewport exceeds 900 pixels:

Specificity problems often appear gradually. A stylesheet starts with simple class selectors, then an override needs a more specific selector, then another rule adds an ID or !important, and eventually changing one component requires understanding a long chain of accidental precedence. Cascade layers give authors a separate way to express priority. Instead of making selectors stronger, you define which groups of rules are allowed to win. What a cascade layer changes CSS already resolves conflicts using several inputs, including origin, importance, layer order, specificity, and source order. @layer adds an explicit ordering step for normal author rules.