DOM Manipulation

Copy Text to the Clipboard

Every dashboard, share modal, and code-block UI eventually needs a copy button. The modern path is `navigator.clipboard.writeText`, but it requires a secure context and a user gesture, so a robust helper falls back to a hidden `<textarea>` when the API is unavailable. This snippet covers the modern call, the legacy fallback, and a copy-with-toast helper that wraps both behind a single async function.

Read a URL Query Parameter

Reading `?q=hello` is a one-liner with `URLSearchParams`, but the helpers around it (multi-value params, defaults, type coercion, updating without reload) are where most apps end up duplicating code. This snippet covers the basic read, a typed-default helper, and a setter that updates the URL with `history.replaceState` so the back button keeps working. Use it for filters, search inputs, and shareable links.

Trigger a File Download from a Blob

Generating a CSV, JSON export, or screenshot client-side and saving it without a server round-trip is a five-line trick: build a `Blob`, mint an object URL, click a hidden `<a download>`, and revoke the URL. This snippet covers the canonical helper, a JSON export wrapper, and the cleanup pattern that prevents memory leaks during long-running sessions.

Check if an Element Is in the Viewport

Lazy-loading images, animating sections on enter, and infinite scroll all start with the same question: is this element on screen? The classic answer was a scroll handler plus `getBoundingClientRect`, but `IntersectionObserver` is now the right tool: passive, batched, and rate-limited by the browser. This snippet covers the synchronous bounds check, the async observer-based watcher, and a one-shot helper that resolves once a target enters the viewport.

Event Delegation and Event Bus Quiz

Practice DOM event delegation, build a minimal pub/sub event bus, and roll your own dispatcher so cross-component communication stays decoupled.

Controlled vs Uncontrolled Components Quiz

Four checks on the controlled / uncontrolled split for React form inputs, including the file-input edge case and the warning React emits when you flip between defaultValue and value.

React Portals, Fragments, and StrictMode Quiz

Three drills on three small but tested React features: portals (with their event bubbling quirk), fragments, and what StrictMode does in development.

React Synthetic Events and Event Pooling Quiz

Three drills on React's SyntheticEvent wrapper, how delegation works, and the difference between the React 16 pooling era and React 17+ behavior.

JavaScript Cross-Browser Event Target: Two Approaches Quiz

Two seeded approaches to read the event target across browsers (event.target plus legacy event.srcElement, and a delegated table cell editor), plus two companions on currentTarget and composedPath.

React Controlled vs Uncontrolled Components: Two Explanations Quiz

Two explanations of controlled vs uncontrolled inputs with concrete code, plus companions on `defaultValue` and on extending the controlled idea beyond form inputs.