W3Tweaks

JavaScript Closures: Every Use Case Explained (Live Demos)

Sat, 13 Jun 2026 19:00:00 GMT

JavaScript closures explained with live, runnable demos. Backpack mental model, lexical scoping, the var-vs-let loop trap, 5 production patterns (counter, currying, memoize, once, module), the over-capture memory leak, stale closures in React useEffect and async setInterval, #private class fields vs closures, WeakMap memoization for object keys, interview questions (debounce/curry/compose), arrow vs regular vs .bind() for this, and WeakRef + using for cleanup.

Intersection Observer API: Scroll, Lazy Load & Scrollspy

Sat, 13 Jun 2026 18:00:00 GMT

The complete Intersection Observer API guide — threshold, rootMargin, isIntersecting vs intersectionRatio, scroll reveal, lazy load, infinite scroll, scrollspy. Plus CSS scroll-driven animations (animation-timeline: view()) as the modern alternative, content-visibility composition, IntersectionObserver v2 trackVisibility for ad viewability, the sticky header sentinel pattern, React useInView and Vue useIntersectionObserver hooks, Next.js/Astro SSR guards, jsdom polyfill, the Observer family comparison, takeRecords(), and Element.checkVisibility().

CSS pointer-events: inert, Click-Through, disabled & SVG

Sat, 13 Jun 2026 17:00:00 GMT

The complete CSS pointer-events guide — click-through overlays, tooltip flicker fix, disabled button (with the inert-attribute alternative), child re-enable inside disabled parent, the ghost click trap, cursor:not-allowed vs pointer-events:none, SVG hit areas including bounding-box, dialog ::backdrop, map/canvas HUD overlays, transition-behavior: allow-discrete, and the touch-action manipulation companion.

IndexedDB Tutorial: idb, Cursors, Bulk Insert & Sync

Fri, 12 Jun 2026 20:30:00 GMT

The complete IndexedDB tutorial — live demo, async/await with the idb library, bulk insert performance (100x faster), cross-tab sync via BroadcastChannel, Service Worker offline-first pattern, storing Blobs and Files, compound indexes, Dexie vs idb decision table, TypeScript DBSchema, transaction auto-close trap, version migrations, and Safari ITP eviction.

CSS :focus-visible: Keyboard Focus, WCAG & inert

Fri, 12 Jun 2026 20:00:00 GMT

The complete CSS :focus-visible guide — :focus vs :focus-visible vs :focus-within, 8 visual patterns, the two-tone indicator, WCAG 2.4.7 + 2.4.11 compliance, forced-colors High Contrast Mode, the sticky-header scroll-padding-top fix, inert and

Web Share API: navigator.share, Files & Fallbacks

Fri, 12 Jun 2026 19:00:00 GMT

The complete Web Share API guide — navigator.share + navigator.canShare for text, URLs and files, AbortError handling, the transient activation trap, Permissions-Policy headers, the text+url duplicate-link bug, iOS Safari vs Android Chrome quirks, PWA share targets with service worker file receivers, SSR-safe feature detection for Next.js/Astro, and the progressive 3-tier fallback chain.

HTML5 Video Custom Controls: Media API, Captions & PiP

Thu, 11 Jun 2026 18:45:00 GMT

Build HTML5 video custom controls — Media API, TimeRanges buffered progress, textTracks captions, ::cue styling, Picture-in-Picture, Fullscreen with Safari quirks, Media Session API for Bluetooth/lock-screen, playsinline iOS fix, autoplay policy detection, codec selection (AV1/VP9/H.264), MediaError handling, IntersectionObserver autoplay, MediaCapabilities + requestVideoFrameCallback.

CSS @supports: Feature Detection & Progressive Enhancement

Thu, 11 Jun 2026 18:00:00 GMT

The complete CSS @supports guide — feature queries, not/and/or operators, selector() for :has(), the new at-rule() function for @layer detection, Tailwind supports-[] arbitrary variant, OKLCH and View Transitions detection, the @supports inside @container pattern, CSS.supports() JavaScript API, and the double-negation gotcha.

structuredClone: JavaScript Deep Copy (Stop JSON.parse)

Thu, 11 Jun 2026 17:30:00 GMT

The complete guide to structuredClone() — JavaScript deep copy without JSON.parse(JSON.stringify()) limits. Live tester runs spread, JSON, structuredClone, and lodash cloneDeep across 9 data types. Plus the polyfill for structuredClone is not defined errors, Symbol-key drop, descriptor loss, Immer/Mutative for React state, benchmarks, and WinterCG runtime parity.

AbortController: Cancel Fetch Properly (With Live Demo)

Wed, 10 Jun 2026 19:30:00 GMT

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.

Native Lazy Loading: When loading=lazy Silently Fails

Wed, 10 Jun 2026 19:00:00 GMT

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.

CSS Dark Mode: prefers-color-scheme, light-dark, OKLCH

Wed, 10 Jun 2026 17:00:00 GMT

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.

Responsive Images & Modern Formats: AVIF, WebP, JXL Guide

Tue, 09 Jun 2026 20:30:00 GMT

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 Property: Complete Guide With Live Visualiser

Tue, 09 Jun 2026 19:00:00 GMT

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: Complete Guide

Tue, 09 Jun 2026 18:30:00 GMT

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.

Service Worker Offline First: Complete Tutorial With Simulator

Tue, 09 Jun 2026 00:00:00 GMT

This service worker offline first tutorial has an interactive simulator — pick a strategy, toggle offline, click Clear Cache, and watch cache-first / network-first / stale-while-revalidate behave live. Then handle the waiting trap with a New Version Available banner, queue offline POST writes with Background Sync, fix cache.addAll() atomicity, enable Navigation Preload for ~300ms cold-start savings, and work around iOS Safari quirks.

HTML Drag and Drop File Upload: The Complete Guide

Mon, 08 Jun 2026 23:00:00 GMT

Most drag-drop tutorials stop before the dragleave flickering bug that breaks every drop zone with child elements. Many still say Fetch can't show upload progress — false since Chrome 105+ (ReadableStream + duplex: 'half'). This guide covers the flicker counter fix, the modern Fetch + XHR upload progress comparison, folder uploads with webkitdirectory, image preview cleanup, magic byte detection, paste-from-clipboard, WCAG 2.5.7 dragging movements, drag-to-reorder, and the input.value reset gotcha.

CSS mask: Fade, Reveal & Shape Elements (Complete Guide)

Mon, 08 Jun 2026 21:30:00 GMT

CSS mask uses another image or gradient as a stencil for element visibility. Unlike clip-path's hard edges, mask creates soft fades, partial transparency, and graduated reveals. This guide covers the alpha vs luminance reality (not just black=visible), gradient masks, SVG icon recoloring with currentColor, scroll container edge fades, spotlight hover, wipe reveals, scroll-driven animation-timeline reveals, mask-composite + mask-border, and the -webkit-mask-composite naming mismatch that silently breaks Safari.

CSS mix-blend-mode: Blend Text, Images & Colors Like Photoshop

Sun, 07 Jun 2026 21:30:00 GMT

mix-blend-mode lets an element's pixels react to whatever is behind them — the same algorithms Photoshop uses. Remove white backgrounds from logos. Make text always readable (with the WCAG caveat nobody mentions). Build duotone photos in pure CSS or with Spotify-style SVG feColorMatrix. Plus the interaction matrix when mix-blend-mode silently stops working with opacity/filter/transform, plus-lighter/plus-darker (CSS Blending Level 2), animation behavior, glitch/chromatic-aberration patterns, and forced-colors fallbacks.

HTML contenteditable: Rich Text Editor Without Libraries

Sun, 07 Jun 2026 21:00:00 GMT

Every contenteditable tutorial shows bold/italic buttons and stops before the #1 bug: clicking the toolbar destroys the editor selection and formatting applies to nothing. This guide covers the fix, the modern beforeinput + inputType replacement for execCommand, the brand-new EditContext API (Chrome 121+), CJK composition events, XSS-safe paste sanitization with DOMPurify and the native Sanitizer API, iOS autocorrect destroying inline formatting, image paste handling, caret restoration with TreeWalker, and the complete decision framework for when to ditch contenteditable for TipTap/ProseMirror.

JavaScript Web Workers: Keep the UI Smooth While Running Heavy Code

Sun, 07 Jun 2026 20:30:00 GMT

Web Worker tutorials always need a separate worker.js file and a build tool. This one doesn't. Learn inline workers with Blob URLs (no separate file), a worker pool you build from scratch, transferable objects benchmark showing 100-300× speed difference, Comlink for ergonomic worker APIs, OffscreenCanvas for jank-free animations, SharedArrayBuffer + Atomics with the COOP/COEP headers you need, the structured clone gotchas, modern Vite/React syntax, and the exact threshold when workers hurt instead of help.

How to Add .env to .gitignore: The Complete Security Guide

Sun, 07 Jun 2026 19:00:00 GMT

The complete guide to adding .env to .gitignore. Covers the standard .env* block (Next.js / Vite / CRA), the rotate-FIRST recovery checklist, git filter-repo for rewriting history, GitHub Push Protection, gitleaks/TruffleHog pre-commit scanners, dotenvx encrypted-env, --skip-worktree vs --assume-unchanged, and the global gitignore pattern.

JavaScript Memory Leak Fix: 6 Patterns + DevTools Walkthrough

Sat, 06 Jun 2026 18:30:00 GMT

Every memory leak tutorial tells you to open DevTools without giving you actual leaks to practice on. This guide has 6 live triggerable leaks built into the demo — open DevTools alongside and watch memory grow in real time. Covers the three-snapshot technique, queryObjects() DevTools trick, observer-disconnect (ResizeObserver / IntersectionObserver), AbortController unified cleanup, performance.measureUserAgentSpecificMemory() for production, React useEffect cleanup, WeakMap/WeakRef + FinalizationRegistry caveats, and real KB-per-minute growth numbers.

Every HTML Input Type — Real-World Use Cases & Mobile Keyboard Guide

Sat, 06 Jun 2026 18:30:00 GMT

This is the complete HTML input types list with mobile keyboard hints, the pattern regex cookbook, enterkeyhint reference, autocomplete one-time-code for iOS, capture=environment for the rear camera, valueAsNumber/valueAsDate typed access, the datetime-local timezone offset trap, and linked date pickers. Most guides are reference lists — this one explains the decisions.

CSS filter & backdrop-filter: The Complete Visual Guide

Sat, 06 Jun 2026 17:30:00 GMT

CSS filter applies effects to an element — blur, grayscale, brightness, contrast, drop-shadow. CSS backdrop-filter applies those same effects to whatever is behind the element. This complete guide covers both properties, the filter-order gotcha, drop-shadow vs box-shadow, glassmorphism patterns (including Apple's Liquid Glass + dialog::backdrop modals), filter: url() for SVG-referenced effects like duotone and gooey blobs, prefers-reduced-transparency, @supports fallbacks, forced-colors mode, the iOS Safari fixed-position bug, and performance tiers.

Accessible Forms — Complex Fields for Screen Readers

Fri, 05 Jun 2026 21:00:00 GMT

Over 50% of WCAG failures are form-related. This guide covers what others miss: the fieldset legend verbosity problem, aria-describedby with multiple IDs, aria-errormessage vs aria-describedby (with current screen-reader support data), the 5-step submit error pattern with validation timing, WCAG 2.2 form criteria (Redundant Entry, Accessible Authentication, Target Size), Label in Name + Voice Control, autocomplete + inputmode + enterkeyhint reference, forced-colors mode, role=status for success, when NOT to build a custom select, and a correct accessible password toggle.

CSS clip-path: Create Any Shape — The Complete Guide

Fri, 05 Jun 2026 20:30:00 GMT

clip-path lets you cut any element into any shape — circles, hexagons, arrows, diagonals, chevrons — with pure CSS. No SVG files, no image masks, no extra HTML. This complete guide covers every value, animation patterns, the new shape()/rect()/xywh() functions, scroll-driven reveals with animation-timeline: view(), clip-path: url() for arbitrary SVG paths, the Clippy generator, hover/click area gotchas, @keyframes loops, and the wrong-tool bugs nobody demonstrates.

JavaScript Debounce vs Throttle: Real Difference With Live Numbers

Fri, 05 Jun 2026 19:30:00 GMT

Every debounce vs throttle article says 'throttle fires 30-50 times, debounce fires once' — but nobody shows it happening live. This tutorial has a firing-timeline visualiser that tracks every call with real millisecond timestamps, plus the leading edge pattern nobody explains, the rAF throttle nobody covers, the AbortController + debounce fetch pattern, React 18 useDeferredValue comparison, TypeScript signatures, and the wrong-tool bugs nobody demonstrates.

HTML Keyboard Navigation & Focus Management: Complete Guide

Thu, 04 Jun 2026 19:55:00 GMT

Most focus management tutorials still teach a 50-line JavaScript focus trap that the HTML inert attribute replaces in one line. They show skip link patterns with Chrome's bug still in place. They never explain when you still need aria-hidden alongside inert. This guide covers tabindex 0 vs -1, focus-visible vs focus, the WCAG 2.2 numeric focus indicator rules, aria-hidden vs inert, nested modals, roving tabindex vs aria-activedescendant, enterkeyhint for mobile keyboards, and SPA route focus management.

CSS scroll-snap: Build a CSS Carousel Without JavaScript

Thu, 04 Jun 2026 19:30:00 GMT

Build a CSS carousel without JavaScript in 5 lines of CSS. This complete guide covers every scroll-snap property, mandatory vs proximity, the new scrollsnapchange event, scroll-padding for sticky headers, the CSS Carousel API (::scroll-marker and ::scroll-button), scroll-driven animations paired with snap, the 100dvh fix for mobile, drag-to-scroll for desktop, keyboard accessibility, and 'scroll snap not working' troubleshooting.

JavaScript Event Loop Explained — Visual Interactive Demo

Thu, 04 Jun 2026 18:50:00 GMT

The JavaScript event loop is the engine behind every setTimeout, Promise, and async/await call you write. This guide is an interactive event loop visualizer — five step-by-step scenarios where you watch the call stack, microtask queue, and macrotask queue update in real time. Covers browser AND Node.js event loop phases, process.nextTick vs setImmediate, the scheduler.yield() API for INP optimization, and the MessageChannel trick React uses.

CSS @font-face: The Complete Guide to Loading Custom Fonts Right

Wed, 03 Jun 2026 19:50:00 GMT

Most @font-face tutorials cover the basics and say 'add font-display: swap'. That's not wrong, but it's about 20% of what you need to know. This guide covers all 5 font-display values, variable font axes, font-synthesis: none, the Font Loading API, font-variant-numeric, modern system font stacks, the adjusted fallback pattern that eliminates layout shift, unicode-range, FOIT/FOUT/FOFT, preload's LCP trade-off, and whether you should still use local() .

JavaScript async/await Not Working? 12 Mistakes That Break Your Code

Wed, 03 Jun 2026 19:30:00 GMT

async/await looks simple until it silently breaks — your function returns Promise {pending}, your forEach loop finishes before the data arrives, a 404 sails past your catch block, a search response from 2 seconds ago overwrites the one you wanted, or an error disappears with no trace. This guide shows 12 mistakes with the exact broken output, why it happens, and the precise fix.

Semantic HTML Guide — Every Element and What You're Getting Wrong

Wed, 03 Jun 2026 19:10:00 GMT

Every tutorial explains what semantic HTML is. Almost none explain that

wrapping a postal address is wrong, that must not contain author names, that HTML5's heading outline algorithm was never implemented by a single browser, or how the First Rule of ARIA quietly justifies the entire reason you should be reading this. This is the guide that covers what others miss — including vs , the
exclusive-accordion pattern, the SPA multi-
trick, //, vs , and on subtrees.

CSS Selectors You're Not Using (But Should Be)

Tue, 02 Jun 2026 20:45:00 GMT
You know div, .class, and #id. But CSS has dozens of selectors that replace JavaScript event listeners, eliminate helper classes, and handle UI state in pure CSS. This guide covers the underused ones actually worth learning — :has(), :focus-within, :user-valid, :nth-child(of selector), :where()'s zero-specificity trick, the :checked + ~ state machine, :target for routable UI, @scope, :defined, :dir(), and more.

ARIA Roles — The Practical Guide Developers Actually Need

Tue, 02 Jun 2026 19:54:00 GMT
79.4% of websites use ARIA — and those sites have 2× more accessibility errors than sites without it. ARIA is the most powerful accessibility tool in HTML and the most dangerous. This guide shows the patterns that go catastrophically wrong, the role=menu trap, the aria-live timing pitfall, the aria-hidden + focus silent-screen-reader footgun, role=presentation cascading, mobile screen reader divergence, and the DevTools tree-debug workflow nobody documents.

Build a JavaScript AI Agent From Scratch (No Framework)

Tue, 02 Jun 2026 19:30:00 GMT
Every AI agent tutorial uses Python, LangChain, or Mastra. This one doesn't. Build a complete ReAct agent from scratch in vanilla JavaScript — the actual while loop, Thought/Action/Observation cycle, memory, guardrails, parallel tool calls, hallucinated-tool-name protection, and a 20-line DIY observability trace, all in a streaming browser UI that shows the agent thinking in real time.

CSS Specificity Explained: The Complete Cascade Guide

Mon, 01 Jun 2026 21:20:00 GMT
You write a rule that should win. It doesn't. You add !important. Now something else breaks. Specificity fights are the most common source of CSS frustration — and most tutorials only teach half the picture. This guide covers the complete system, including :is(), :where(), @layer, CSS Nesting's hidden specificity trap, and how Tailwind, Vue scoped styles, and CSS Modules each handle specificity differently.

AI That Reads PDFs in JavaScript — Three Strategies

Mon, 01 Jun 2026 20:40:00 GMT
Every AI PDF tutorial uses Python and LangChain. This one doesn't. Learn three pure JavaScript strategies for making AI read PDFs — direct text extraction, GPT-4o Vision for scanned documents, and structured JSON extraction — all in a single browser file. Plus the PDF.js worker gotchas, the API-key-in-the-browser elephant, and a free Tesseract.js OCR fallback nobody documents.

HTML datalist — Native Autocomplete & Search UI Guide

Mon, 01 Jun 2026 19:47:00 GMT
Most datalist tutorials show three lines of HTML and stop. Nobody explains how to detect when a user actually picked from the list, how to show a friendly label while submitting a hidden ID, or which iOS Safari versions silently break the whole feature. This is that tutorial.

HTML5 Form Validation Without JavaScript — The Complete Guide

Sun, 31 May 2026 16:51:00 GMT
Every tutorial shows you required and pattern then stops. Nobody explains why :invalid turns inputs red before the user touches them, how to fix it with :user-invalid, how autofill silently breaks validation, or how to validate all 11 ValidityState conditions. This is that tutorial.

Vercel AI SDK in Plain JavaScript (No Next.js)

Sun, 31 May 2026 16:33:00 GMT
Every Vercel AI SDK tutorial assumes Next.js. This one doesn't. Learn how to use AI SDK Core in a plain Node.js script, build a minimal Express server that streams to vanilla HTML, switch providers with one line, and generate structured JSON with Zod — zero framework required.

CSS calc() Explained: Dynamic Values Without JS

Sun, 31 May 2026 15:41:00 GMT
You can't write width: 100% - 32px in plain CSS — the browser doesn't know what 100% minus 32 pixels equals until layout time. calc() defers that calculation to the browser, solving it at render time when both values are known. No JavaScript needed.

CSS object-fit & object-position: Stop Stretching

Sat, 30 May 2026 23:54:00 GMT
You have a card grid where every thumbnail should be the same height. You set width:100% and height:200px on the images — and they all stretch and distort. The fix is two words: object-fit: cover. This guide covers all 5 values, the focal-point trick with object-position, and why object-fit sometimes silently does nothing.

WebLLM: Run LLMs in the Browser with JavaScript

Sat, 30 May 2026 23:33:00 GMT
WebLLM uses WebGPU to run quantized Llama, Phi, Gemma, and Mistral models entirely inside your browser tab. No server, no API key, no data ever sent to the cloud. The model downloads once, caches in the browser, and runs at near-native GPU speed.

HTML details & summary — Beyond Basic Accordions

Sat, 30 May 2026 22:35:00 GMT
Most developers use details for a one-off toggle and move on. But the native details element has exclusive accordion behavior built into HTML, smooth animation via a pure CSS grid trick, and direct SEO impact through FAQ rich results. Here's everything it can do — zero JavaScript required.

The HTML Popover API — Complete Guide (No Libraries)

Fri, 29 May 2026 18:00:00 GMT
Popper.js, Floating UI, Tippy.js — developers reach for JS libraries just to position a tooltip. The native Popover API does it with a single HTML attribute. Here's everything it can do, from basic tooltips to a full command palette, with zero dependencies.

Build a RAG App in the Browser with JavaScript

Fri, 29 May 2026 17:45:00 GMT
RAG lets AI answer questions about your own documents by retrieving the most relevant passages before generating a response. This tutorial builds a complete in-browser RAG system in vanilla JavaScript — embeddings, vector search, and GPT generation all without a backend.

CSS ::before and ::after Pseudo-Elements Explained

Fri, 29 May 2026 17:33:00 GMT
Decorative arrows, tooltips, notification badges, quote marks, and animated underlines — without adding a single extra span or div to your HTML. This guide explains how ::before and ::after work, 8 real use cases, and the 5 reasons they silently stop showing.

The HTML dialog Element: Complete Guide

Thu, 28 May 2026 19:25:00 GMT
The native HTML dialog element handles focus trapping, accessibility, top-layer rendering, and the backdrop — all out of the box. Stop shipping Bootstrap modals and 200-line JS overlay hacks. Here's everything dialog can do, from basic modals to animated drawers.