Frontend

Software Engineering / 22 Sep 2026 / 7 min read

Request Sequence Guards Reject Late UI Responses

Request Sequence Guards Reject Late UI Responses Interactive interfaces often issue a new request before the previous one has finished. Search boxes, filters, route changes, autocomplete fields, and detail panels all create this pattern. Network completion order is not guaranteed to match the order in which the user changed state. That mismatch can produce a subtle race. Request A starts first, request B starts second, B completes first, and the interface renders B. If A then completes and its callback writes without checking context, the screen moves backward to data associated with the older intent.

Software Engineering Frontend

CSS / 19 Sep 2026 / 8 min read

Runtime Class Composition Is Not CSS Generation

A function that returns a class string and a compiler that emits CSS solve different problems, even when both eventually produce a `class` attribute in the browser. That distinction matters when a Tailwind component recipe starts like this: const button = tv({ base: 'inline-flex rounded-md', variants: { color: { success: 'bg-green-500 hover:bg-green-700', }, disabled: { true: 'pointer-events-none opacity-50', }, }, compoundVariants: [ { color: 'success', disabled: true, class: 'bg-green-300 hover:bg-green-300', }, ], }); It is tempting to expect a build step to turn that recipe into a semantic selector such as:

CSS Tailwind CSS

CSS / 04 Sep 2026 / 10 min read

Debug CSS z-index with Stacking Contexts

A z-index bug often looks irrational. You give a menu z-index: 9999, yet a header still covers it. Increasing the number to 999999 changes nothing. The natural conclusion is that z-index is unreliable. It is not. The mistake is usually comparing numbers that belong to different stacking contexts. A stacking context is a local coordinate system for painting overlapping elements. Descendants are ordered inside that context, and then the entire context participates as one unit in its parent’s stacking order. A child with a huge z-index cannot escape a parent that is painted below a sibling context.

CSS z-index

CSS / 02 Sep 2026 / 6 min read

Practical Conditional Styling with the CSS :has() Selector

CSS traditionally selects an element from information about that element or its ancestors. The :has() relational pseudo-class adds a different capability: an element can match according to relative selectors evaluated from that element. This makes many parent-aware and sibling-aware styles possible without adding state classes solely for presentation. The useful mental model is not “select the parent,” but “select this element if a related element matches a condition.” Read :has() from the outside in Consider a card that should use a different layout when it contains a direct image child:

CSS Selectors

CSS / 02 Sep 2026 / 4 min read

Individual CSS Transform Properties for Maintainable UI Motion

For years, CSS transforms were commonly written as one transform declaration: .card { transform: translateY(-4px) scale(1.02); } That works, but it couples every transform operation to one property. A component that needs to change only its translation must either reproduce the existing scale or overwrite it.

CSS Transforms

CSS / 02 Sep 2026 / 4 min read

CSS Logical Properties for International and Reusable Layouts

Traditional CSS often describes layout with physical directions: left, right, top, and bottom. That is intuitive until the same component must work in a right-to-left language or a different writing mode. Logical properties describe layout relative to the flow of text. Instead of saying “left padding,” you can say “padding at the inline start.” The browser maps that intent to the correct physical edge. Think in block and inline axes CSS logical layout uses two axes:

CSS Logical Properties

CSS / 01 Sep 2026 / 5 min read

CSS Cascade Layers for Predictable Specificity

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.

CSS Cascade Layers

CSS / 01 Sep 2026 / 5 min read

Container Queries for Component-Level Responsive CSS

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:

CSS Responsive Design

JavaScript / 01 Sep 2026 / 5 min read

Cancel Fetch Requests and Prevent Stale UI Updates with AbortController

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: 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.

JavaScript Fetch API