Page 8 - JavaScript

Anyone who registers a separate event listener for every list item is building a memory and performance trap. Event delegation uses event bubbling and lets a single listener handle events on any number of elements, including ones that are only added to the DOM dynamically later on.

Source maps translate minified, bundled production code back into readable original source, but production follows different rules than local development: the maps must be deployed safely so attackers cannot extract unminified business logic from them, while error tracking systems such as Sentry still need to reconstruct real stack traces from the minified code.

Anyone who deep copies an entire object or array on every state update wastes memory and CPU time. Structural sharing solves this problem: on update, a persistent data structure rebuilds only the changed path and shares every unchanged subtree with the old version instead of duplicating it.

Mutable state is the most common source of hard-to-find bugs in JavaScript applications. Immutability patterns make state changes explicit, enable change detection through reference comparison, and prevent shared state from being modified in unexpected places, from Object.freeze all the way to Records and Tuples.

requestAnimationFrame is the only correct way to implement animations in the browser. Anyone using setTimeout or setInterval is fighting the rendering cycle instead of working with it. This article shows how rAF works, how to build a robust render loop, and which traps destroy the frame rhythm.

The Network Information API provides information about connection type, estimated bandwidth and an enabled data saver mode through navigator.connection, letting applications dynamically adjust image quality, prefetching and video resolution. The once parallel Battery Status API was removed from most browsers for privacy reasons, and this article gives both APIs a realistic place and shows practical alternatives.

A service worker is not an optional feature, it is the foundation for apps that give users a complete experience even with a poor or missing connection. Thinking Offline-First means building apps that are faster, more reliable and more installable than classic web applications.

Few concepts in JavaScript cause as much confusion as this binding. A method works perfectly when called directly and suddenly returns undefined when passed as a callback. This article shows where this binding typically breaks, how to debug it systematically and which fix actually fits which situation.

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.

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.