Page 13 - JavaScript

The window resize event was the first, but flawed, approach to size-dependent JavaScript. ResizeObserver watches individual DOM elements directly, regardless of whether the window changes, a sidebar panel opens, or a parent element grows dynamically.

Class names originating from a headless CMS field, an MDX file, or an npm component library often sit outside the reach of the Tailwind scanner. Anyone who does not understand why content scanning fails right there loses time chasing mysteriously missing CSS, even though the class is visibly sitting in the markup.

Symbol.iterator is the best known well known symbol, but far from the only one. This article shows how Symbol.toPrimitive, Symbol.hasInstance and Symbol.toStringTag precisely control the behavior of custom objects during type conversion, instanceof checks and debug output, and how custom symbols enable collision free object keys.

An appointment shifts by an hour, a month is suddenly displayed wrong, a report shows a duplicated date on the night of a clock change. Timezones and dates are one of the areas of JavaScript where small misunderstandings create large, hard to reproduce bugs. This article shows the concrete pitfalls and how to reliably avoid them.

Arrays are the most widely used data structure in JavaScript, yet only a handful of developers know the full scope of modern array methods. From flatMap through findLast to the non-mutating ES2023 methods toSorted and toReversed: this article shows which method is right for which job and how to avoid the typical performance pitfalls.

A form gets submitted right when the connection drops. Instead of showing an error and discarding the input, the Background Sync API remembers the action and reliably replays it once the network returns, even if the tab has long been closed.

Nuxt DevTools is not a browser extension, it is a panel embedded directly in the dev server, making modules, component graph, server routes, assets and build times visible without switching between terminal, editor and extension. Anyone maintaining Nuxt 3 projects finds the root cause of many issues faster than through scattered log output.

String.split(' ') fails on emoji, Chinese characters, and composed characters. Intl.Segmenter splits text in a language aware, rule compliant way, with no external library at all.

A pricing table with a toggle between monthly and yearly billing is standard for SaaS products and subscription models, because it makes the yearly discount directly visible and eases the purchase decision. With Alpine.js you build a pricing table that recalculates amounts reactively, shows discount badges and highlights the recommended plan, entirely without a page reload and without server side logic in the frontend.

Import Maps solve a problem ES modules have had in the browser since day one: a bare specifier such as import { render } from "preact" simply does not resolve natively unless something rewrites the path first. With an Import Map the browser itself carries out that resolution, and scopes even allow different versions for different parts of the same application, with no Webpack or Vite required.