Page 5 - JavaScript

For phrases like '3 days ago' or 'in 2 hours' you no longer need an external library: Intl.RelativeTimeFormat handles localized relative time natively in the browser, including rounding logic for all common time units.

The Observer Pattern decouples a state holder from the pieces of code that need to react to its changes, with no direct references between them at all. From a minimal subject class through the native EventTarget interface to WeakRef-based cleanup, this article shows how to implement the Observer Pattern robustly in plain JavaScript.

Web Workers move CPU-heavy JavaScript tasks such as filtering and sorting large product lists into a separate thread, without blocking the main thread. This article explains how message passing and structured clone work, when transferable objects make the difference, how Comlink simplifies the API, and where the practical limits of Web Workers lie.

Angular Standalone Components remove the NgModule overhead from every feature, and Tailwind CSS removes the overhead from the stylesheet. Together they form an architecture where every component brings its own dependencies and its own appearance, without global class lists and without nested module declarations. This article covers setup, Signals integration, Reactive Forms and the content scanning pitfalls that occur particularly often in Angular projects.

A hand-rolled router usually ends up as a thicket of regex patterns meant to recognize exact URL paths and extract parameters, barely readable and error-prone around special characters. The URLPattern API solves exactly this problem declaratively and natively in the browser.

Without ElementInternals, a hand-built Custom Element could never truly participate in a form element: no automatic entry in FormData, no native validation, no :invalid styling. The ElementInternals API closes that gap through attachInternals(), setFormValue(), and setValidity(), turning an ordinary Custom Element into a full-fledged form control.

Cancellable async operations do not emerge from simply attaching an AbortController to a fetch call, they come from a deliberate architecture decision: every function that runs for a while accepts a cancellation signal from the start, guarantees cleanup, and passes the signal consistently through every layer.

Web Components that build their Shadow DOM in JavaScript inside connectedCallback often show a brief flash of unstyled content on first load. Declarative Shadow DOM instead describes the shadow root directly in the HTML via , so the browser constructs it during normal parsing, long before any JavaScript has even loaded.

A loop registers five buttons, every click logs the same number instead of the expected sequence. This pattern is called a stale closure, and it hits not just classic var loops but also modern event handlers and asynchronous code. This article shows where stale closures come from, why let often fixes the problem, and how to systematically debug the remaining cases.

x-bind reactively couples HTML attributes, CSS classes, and inline styles to the Alpine state, from the simple shorthand to the object syntax for conditional classes. Knowing the nuances helps you avoid broken boolean attributes, unnecessary re-evaluations, and broken ARIA bindings.