Page 7 - JavaScript

Dependency injection reverses control over how dependencies are created, instead of letting every class instantiate its own collaborators. With no Angular or NestJS in sight, this article shows how constructor injection, a minimal DI container and clean lifecycle management enable loose coupling and easy testability in plain JavaScript.

Race conditions in async UI code happen when a request started later but answering faster overtakes a request started earlier but answering more slowly. Sequence numbers, AbortController and clean state handling prevent users from seeing stale data that no longer matches the current input.

Native Web Components solve encapsulation and reusability at the browser level, but do not bring declarative reactivity of their own. Alpine.js as a complement to Web Components fills exactly that gap: x-data controls behavior outside a Custom Element, while attributes and events cleanly structure communication across the Shadow DOM boundary.

Monorepo JS tooling solves a problem that becomes unavoidable as the number of packages in a project grows: shared dependencies, repeated build steps, and versioning across multiple packages. Workspaces in npm, pnpm and yarn lay the foundation, while Turborepo and Nx build on top of them as task runners and drastically cut build time through caching.

Scroll event listeners for visibility checks are outdated and expensive. The Intersection Observer delivers viewport notifications without blocking the main thread, without layout thrashing, and with configurable thresholds, the modern solution for lazy loading, scroll animations and infinite scroll.

Modern Magento stores built with Hyvä Theme and Alpine.js render large parts of their content in the browser, yet Google crawls, renders, and indexes that content in separate, time-shifted phases. This article explains how the Web Rendering Service works, which mistakes make client-side rendered pages invisible, and how URL Inspection and clean hydration timing ensure Googlebot truly sees everything.

Building TypeScript projects with Webpack forces a core tradeoff: full type checking during the build or maximum compile speed. This article shows how ts-loader, babel-loader, and fork-ts-checker-webpack-plugin work together, how to structure a type-safe webpack.config.ts, and when switching to esbuild, swc, Vite, or Rspack actually pays off.

The classic JavaScript style API only knows strings: style.width returns "320px" no matter whether it is a length, an angle, or a plain number, and any calculation with it starts with parsing and ends with rebuilding a string. The CSS Typed OM replaces that with real, typed objects that can be added, multiplied, and converted between units directly, without the detour through text.

Managing multiple Vue applications and shared packages in one repository quickly becomes slow and confusing without task orchestration. Turborepo brings incremental caching, parallel task execution and declarative pipeline definitions that reduce build times in Vue monorepos from minutes to seconds.

Users routinely open web apps in several browser tabs at once. The Broadcast Channel API elegantly solves the resulting synchronization problem: logout, theme switching, session updates and state changes are sent instantly to every open tab, entirely without a server, without WebSocket, without polling.