Page 11 - JavaScript

Classic unit tests check individual, hand-picked examples. Property-based testing flips that around: instead of writing examples, you define properties that must hold for every valid input, then let fast-check generate thousands of random cases to uncover exactly the edge cases a human writing tests by hand tends to overlook.

Realistic code sharing between React web and React Native does not mean using the same components everywhere, it means deliberately separating what is platform agnostic from what cannot be. Business logic, types, API clients and validation share cleanly, interface components mostly do not. This article shows a working monorepo structure with real examples.

AbortSignal.timeout() replaces the manual setTimeout plus AbortController combination with a single expression, and AbortSignal.any() merges multiple cancellation sources into one signal. Together, both methods solve one of the most stubborn boilerplate problems in modern fetch based applications.

Asynchronous data loading is needed in almost every interactive widget. Alpine.js makes it surprisingly simple with async/await and x-data, but a fetch widget only becomes production ready once you add proper error handling, loading states, and abort logic.

Web Components are a group of native browser APIs for building encapsulated UI building blocks that work without a framework runtime. Custom Elements, Shadow DOM and HTML Templates enable components that work equally well in React, Vue, Angular and plain HTML, a strong fit for design systems that span team and stack boundaries.

Embedded third party content such as payment widgets, ad banners or comment systems runs in the same document as your own application and, without consistent isolation, poses a substantial security risk. The sandbox attribute on iframe elements and strict origin checking in postMessage communication enable genuine isolation without blocking the actual functionality of embedded widgets.

JavaScript is single-threaded, but not sequential. The Event Loop determines the execution order of synchronous code, Promises, timers and callbacks. Anyone who does not understand the difference between microtasks and macrotasks ends up writing asynchronous code that runs in a mysteriously wrong order.

The JSON roundtrip trick has been the standard for deep cloning in JavaScript for years, and for years it has been losing Date objects, Map, Set, undefined values and circular references. structuredClone() is the native solution that has been available in all modern engines since 2022 and handles all of that correctly.

Signals are a reactivity pattern that Vue, Solid, Preact and Angular implemented independently of each other, yet all rely on the same few building blocks. Anyone who understands how a minimal signals system built from getters, setters and automatic dependency tracking works can use reactivity in any vanilla JavaScript project, with no framework dependency at all.

The Alpine.js modifiers debounce and throttle prevent an event listener from firing unnecessarily on every single keystroke or every single scroll pixel. Understanding the difference between both throttling strategies lets you build live searches, scroll handlers and resize reactions that run noticeably more performant than unthrottled handlers.