Page 17 - JavaScript

Without the key modifier, Alpine confuses DOM elements with the wrong record in x-for lists as soon as entries are inserted, removed, or reordered. A stable, unique key solves this diffing problem and prevents focus jumps, wrong animations, and swapped form state.

Mocks only tell you whether the frontend handles an assumed API response correctly, not whether that assumption still holds. Contract testing with Pact.js closes exactly that gap: the frontend defines its expectations as an executable contract, and the backend automatically verifies whether it actually fulfills that contract.

Shadow DOM encapsulates styles so completely by default that global Tailwind CSS never reaches a Web Component in the first place. With Constructable Stylesheets, adoptedStyleSheets and the ::part selector, this encapsulation can be opened up deliberately without giving up Shadow DOM's isolation guarantees. This article shows concrete patterns for Custom Elements that use Tailwind CSS consistently without shipping their CSS multiple times.

A 2 MB JavaScript bundle is not rare, but it is almost always avoidable. Bundle analysis with Rollup and Vite makes invisible problems visible: tree-shaking gaps, duplicate dependencies, unnecessary polyfills, and provides the foundation for targeted optimization.

obj.hasOwnProperty(key) looks harmless, but it breaks with null prototype objects and with overridden prototype methods. Object.hasOwn(obj, key) is the static, robust alternative that avoids exactly these pitfalls and should be the default choice for property checks in modern code.

Since ES2022, static class blocks allow real, multi step initialization logic for static class fields, including access to private fields and regular error handling. This article shows why the feature became necessary, how the syntax works in detail, and where it makes a practical difference.

Anyone who has turned an asynchronous data stream into an array with manual loops and push calls knows the race conditions and the awkward error handling that come with it. Array.fromAsync solves exactly this problem: a single built in method that collects async iterables, generators and mixed promise lists in the correct order into an array.

Vue Capacitor connects an existing Vue application to a native runtime without splitting the codebase apart. Camera, geolocation, push notifications, and filesystem access are reached through one unified JavaScript API, while the app ships as a real iOS and Android binary to each store.

Nullish Coalescing (??) and Optional Chaining (?.) are the most important additions to JavaScript since ES2020. They replace fragile && chains and || fallbacks with precise, readable operators, with the crucial difference that they react only to null and undefined, not to every falsy value.

Custom elements come with four lifecycle callbacks that look simple at first glance but carry a number of non obvious timing guarantees and pitfalls in practice. This article covers connectedCallback, disconnectedCallback, attributeChangedCallback, and adoptedCallback in detail, including the often forgotten observedAttributes and the reentrancy trap.