All 161 Frontend Tutorials

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.

How to cancel a fetch request properly — with a live search-race demo. Type fast and watch stale requests get cancelled in real time. Covers AbortController vs AbortSignal, debounce+abort for autocomplete, AbortSignal.timeout() one-liners, AbortSignal.any() composition, AbortSignal.throwIfAborted(), React useEffect cleanup, the single-use trap, custom abort reasons, memory leaks with abort listeners, and the libraries (TanStack Query, SWR, Axios, ky) that handle signals automatically.

loading=lazy looks foolproof — one attribute, defer offscreen images. But it produces no error when it fails. It silently delays your LCP if applied to the hero, does nothing on CSS backgrounds, causes layout shift without dimensions, hides images from Googlebot when paired with data-src libraries, and gets overridden silently by preload directives. Six silent failures plus WordPress auto-lazy, framework auto-lazy defaults, content-visibility, fetchpriority=low, NoScript fallback, AdSense iframes, and the picture+srcset+lazy combined pattern.

The complete CSS dark mode guide — prefers-color-scheme media query, the new light-dark() function with the color-scheme gotcha, OKLCH tokens with color-mix() for perceptual lightness scaling, Material 3 surface elevation, View Transitions API for the toggle animation, the SSR/SSG FOUC fix matrix (Next.js cookie pattern), Windows High Contrast Mode survival with forced-colors, meta theme-color for mobile chrome, Tailwind v4 @custom-variant dark, and cross-tab sync.

The complete responsive images guide — AVIF vs WebP file sizes, where JPEG XL stands now (Chrome 145 flag + Safari 17 default + Firefox 152 pref), the picture element with srcset and sizes done right, the 100vw sizes mistake that doubles your downloads, fetchpriority for LCP with decoding=async, placeholder strategies (BlurHash vs ThumbHash), CSS image-set for backgrounds, and the image CDN auto-format pattern that skips picture entirely.

CSS aspect-ratio is one line where the old padding-bottom hack needed five. It reserves space proportionally, eliminates layout shift, and works natively in every browser since 2021. This guide covers every value, the auto fallback for images, the gotchas with flexbox and content overflow, CSS custom-property patterns, Tailwind/Bootstrap equivalents, the @media (aspect-ratio) vs property disambiguation, view-transition interpolation, social-card cropping with object-position, and a complete common-ratios reference.

Promise.all vs allSettled vs race vs any explained with a live visualiser. Set four promise durations and outcomes, then watch all four methods settle differently in real time. Plus the patterns competitors skip: AbortSignal.timeout + AbortSignal.any for modern timeouts, concurrency pools to cap parallel requests, TypeScript narrowing for allSettled, Promise.withResolvers and Promise.try, the unhandled-rejection traps, and the await-Promise.all vs serial-await interview question answered.