Master the Web. One Tutorial at a Time.

Every closures tutorial gives you the same one-line definition and a counter example. This one has live demos — watch a closure's 'backpack' keep variables alive after the outer function returns, run the var-vs-let-vs-IIFE loop trap, and execute five real patterns. Plus what most tutorials skip: #private class fields as the modern alternative, WeakMap memoization for object keys, stale closures in async setInterval (not just React), the interview-question toolkit (debounce + curry + compose), and WeakRef + Symbol.dispose for closure cleanup.

Most Intersection Observer tutorials give you a fade-in-on-scroll snippet and stop. This guide adds the CSS scroll-driven animations alternative (animation-timeline: view()), content-visibility composition, IntersectionObserver v2 for ad viewability, the sticky header sentinel pattern, React useInView and Vue useIntersectionObserver hooks, Next.js/Astro SSR guards, the jsdom polyfill, an Observer family comparison, takeRecords(), and Element.checkVisibility() — plus all four classic patterns and the threshold:1 trap.

pointer-events is a one-line CSS property that controls whether an element can be the target of mouse, touch, and pen interactions. Most guides stop at click-through overlays. This guide adds the inert attribute alternative for disabled subtrees, the disabled-attribute-vs-pointer-events table for native form controls, transition-behavior: allow-discrete for fade-in menus, dialog ::backdrop click-to-close, SVG bounding-box hit areas, map/canvas HUD click-through, the JS Pointer Events API disambiguation, and the senior-dev debugging anti-pattern.

Most IndexedDB tutorials stop at hello-world and never cover what makes the difference in production: the idb library by Jake Archibald, bulk insert performance (1 transaction vs many is ~100x faster), cross-tab sync with BroadcastChannel, the Service Worker offline-first pattern, storing Files and Blobs for offline upload queues, the transaction auto-close bug that silently breaks data in Safari and Firefox, compound indexes, Dexie/RxDB/PouchDB decision, and full TypeScript typing. With a live IndexedDB playground.

Removing outline:none without a replacement is one of the most common accessibility failures on the web. CSS :focus-visible shows a focus ring for keyboard users and hides it for mouse clicks — but most tutorials stop there. This guide adds the sticky-header scroll-padding-top trap, modern inert and <dialog> focus management, the :has(:focus-visible) modern keyboard-only parent highlight, accent-color for native form focus, why tap on mobile doesn't show a focus ring, cross-browser heuristic differences, and the WICG polyfill for legacy browsers.

navigator.share looks trivial — one method, a native share sheet. But it rejects with AbortError when the user simply cancels (which most tutorials mis-handle as a failure), canShare gives false positives for unknown keys, an await before share() can break it entirely, the text+url combination produces duplicate links on WhatsApp/X, Permissions-Policy headers can block it in iframes, Next.js/Astro break at build with ReferenceError, and PWA share-target file receivers need a 303 redirect in the service worker. This guide covers all of it.

Most HTML5 video tutorials build a played-progress bar and stop. They skip the buffered bar (TimeRanges), the textTracks captions API, ::cue styling, Picture-in-Picture, the Media Session API that handles Bluetooth headphone play/pause and lock-screen artwork, the playsinline iOS bug that breaks every custom player, autoplay policy detection, codec selection with the source media attribute, MediaError handling, and the modern MediaCapabilities + requestVideoFrameCallback APIs. This guide covers all of it.

CSS @supports is pure CSS feature detection — no JavaScript, no Modernizr. The modern Modernizr alternative is built into CSS itself. This guide covers @supports examples, the not/and/or operators, the selector() function (with the empty :has() gotcha), at-rule() for detecting @layer and @scope, Tailwind's supports-[] arbitrary variant, OKLCH and View Transitions detection, @supports inside @container for component-scoped gating, the double-negation parser quirk, and the CSS.supports() JavaScript API.

Most deep-copy guides stop at structuredClone vs JSON. This update covers what every competitor skips: the structuredClone is not defined polyfill for Node 16 / Jest / jsdom, Symbol-keyed properties silently dropped, property descriptors collapsing to plain values, why Immer or Mutative is the right choice for React state (NOT structuredClone), ES2023 non-mutating array methods that replace most clone calls, concrete 1KB/100KB/1MB benchmarks, and WinterCG runtime parity across Node, Bun, Deno, and Cloudflare Workers.