Building web components with the Custom Elements API. Covers autonomous elements, lifecycle callbacks, Shadow DOM, slots, CSS properties, and form integration.
Guides
Guides
In-depth guides for JavaScript developers.
- Building Web Components with Custom Elements: A Deep Dive
- How to Use the HTML Dialog Element for Native Modals
Build native modal dialogs with the HTML dialog element. Open, close, and control dialogs with JavaScript, plus backdrop styling and form integration.
- The Popover API: Floating UI menus, tooltips, and toasts
Build floating UI with the Popover API. Covers popover attribute, showPopover/hidePopover/togglePopover methods, beforetoggle events, and light-dismiss.
- View Transitions API: Smooth DOM Animations in JavaScript
Learn to animate between DOM states with the View Transitions API. Covers startViewTransition, CSS pseudo-elements, types, and cross-document transitions.
- Using the Broadcast Channel API for Cross-Tab Messaging
Share data between browser tabs, windows, and workers on the same origin with the Broadcast Channel API — a simpler one-to-many alternative to postMessage.
- The Navigation API: Intercepting Browser Navigations
Intercept and handle navigations in modern browsers with the Navigation API. Covers navigate events, currentEntry, NavigationHistoryEntry, and transitions.
- Screen Wake Lock API: Prevent Screen Dimming in JavaScript
Use the Screen Wake Lock API to keep a device screen awake. Request a wake lock, handle release events, and manage visibility changes so your app stays active.
- Getting started with Deno: a modern JavaScript and TypeScript runtime
Getting started with Deno, the secure JavaScript and TypeScript runtime. Covers installation, permissions, npm support, file I/O, testing, and web servers.
- Using the Gamepad API for Browser-Based Game Controllers
Connect game controllers to the browser with the Gamepad API. Read button presses, axis movement, handle connect/disconnect events, and add haptic feedback.
- The JavaScript Web Audio API: Audio Processing and Synthesis
Build synthesisers, visualisers, and audio effects with the JavaScript Web Audio API. Covers AudioContext, oscillators, GainNode, analyser, and worklet nodes.
- The Bun Runtime: A Fast All-in-One JavaScript Toolkit
The Bun runtime combines a package manager, bundler, and test runner into one fast toolchain for JavaScript and TypeScript projects.
- Getting Started with esbuild: Fast JavaScript Bundling
Getting started with esbuild to bundle JavaScript for speed. Use the CLI, the Node.js API, and watch mode to build projects faster than webpack or Rollup alone.
- Getting Started with Vite: Fast JavaScript Build Tool Setup
A getting started guide for Vite—set up a fast JavaScript project, use the dev server with hot module replacement, and build optimized production bundles.
- Intersection Observer Patterns
Practical patterns for using the Intersection Observer API: lazy loading, scroll animations, infinite scroll, and sticky section tracking.
- Module Federation in JavaScript
Share code between JavaScript applications at runtime. Module Federation lets you load remote modules dynamically without duplicating dependencies.
- Building a Progressive Web App
Turn your web app into a Progressive Web App. Add a manifest, register a Service Worker, and enable installability, offline support, and push notifications.
- WebGL Basics: Shaders, Buffers, and GPU Rendering
Learn WebGL basics: shaders, buffers, and GPU rendering in JavaScript. Covers context setup, drawing geometry, uniforms, animation loops, and common pitfalls.
- The Canvas API: Drawing 2D Graphics in the Browser
Learn how to draw 2D graphics in the browser with the HTML Canvas API, from basic shapes to pixel manipulation.
- WebRTC Fundamentals: Peer-to-Peer Media and Data in the Browser
Learn WebRTC fundamentals: build P2P connections with RTCPeerConnection, ICE, signaling, and data channels for real-time media and data exchange.
- The Temporal API for Dates and Times
A practical guide to JavaScript's Temporal API: immutable date/time types, clear timezone handling, and arithmetic that actually works.
- Error Handling Patterns and Custom Errors
Master error handling patterns in JavaScript: custom error classes, cause chaining, async error handling, and common gotchas that bite teams in production.
- JavaScript Iterator and Iterable Protocols
The JavaScript iterator protocol powers for...of, spread, and Array.from(). Learn how iterables and iterators work together to create custom iteration.
- Node.js Production Best Practices
Node.js production best practices: process management with PM2, graceful shutdown, structured logging, security hardening, and health checks.
- CSS Typed OM: Use Typed Values Instead of CSS Strings
Use CSS Typed OM to handle CSS values as typed JS objects. Covers attributeStyleMap, computedStyleMap, CSSUnitValue, CSSMathValue, and CSSTransformValue.
- The JavaScript Performance API
Learn JavaScript performance measurement with the browser Performance API: high-resolution timing, custom marks and measures, and real-time metric observation.
- AbortController Patterns in JavaScript
Master AbortController patterns for canceling fetch requests, building abortable async functions, and combining multiple abort signals in JavaScript.
- IndexedDB: A Client-Side Database for Structured Data
Store structured data in the browser with the IndexedDB client-side database API. Covers object stores, transactions, indexes, cursors, and version upgrades.
- The Intl API: Formatting and Localization
Learn how to use JavaScript's built-in Intl API to format dates, numbers, and text for different locales. Complete guide with practical examples.
- Service Workers and Offline Caching
Learn how to use Service Workers to cache resources, enable offline functionality, and implement different caching strategies for your web application.
- JavaScript structuredClone and Deep Copying
JavaScript structuredClone deep copies objects including Date, Map, Set, and BigInt; no JSON workarounds needed. Learn syntax, transferables, and pitfalls.
- Web Workers: Off the Main Thread
Learn how to use Web Workers to run JavaScript in background threads, keeping your UI responsive during heavy computations.
- Writing TypeScript Declaration Files for JavaScript Projects
A practical guide to writing TypeScript declaration files — add type safety to JavaScript code, extend existing types, and publish type definitions for npm
- Project References and Monorepos
Learn how to scale TypeScript projects with project references and monorepo architectures. Covers incremental builds and enterprise patterns.
- Async Iterators and for-await-of
Learn how async iterators work in JavaScript: iterate over async data sources using for-await-of and handle streams of data asynchronously
- JavaScript Promises: Microtasks, Chaining, and Errors
Master JavaScript Promises in depth, covering microtask queue ordering, promise states, chaining patterns, and common pitfalls with practical examples.
- Persistent WebSocket connections: a complete guide
A complete guide to persistent WebSocket connections: lifecycle, reconnection, broadcasting, authentication, and real-world patterns.
- File System Access API: Read and Write Local Files
The File System Access API lets web apps read and write files on the user's device. Covers file pickers, handles, streams, directories, and OPFS storage.
- Import Maps and Dependency Management
Learn how to use import maps to resolve bare module specifiers in the browser without a bundler, and how to manage multiple dependency versions.
- The Payment Request API: Browser-Native Checkout Made Simple
The Payment Request API provides a browser-native checkout flow. Create a PaymentRequest, show a payment sheet, handle the response, and fall back gracefully.
- How shadow DOM and web components encapsulate markup
Learn how Shadow DOM encapsulates structure and styles in web components, covering attachShadow, slots, and custom elements.
- SharedArrayBuffer and Atomics: Shared Memory in JavaScript
Learn SharedArrayBuffer and Atomics for shared memory in JavaScript. Build lock-free data structures with compare-and-exchange and producer-consumer patterns.
- The Streams API: readable, writable, and transform streams
Learn how JavaScript's Streams API lets you process data chunk-by-chunk. Covers ReadableStream, WritableStream, TransformStream, pipe chains and backpressure.
- The Web Animations API: Keyframe Animations in JavaScript
Learn to create, control, and compose web animations directly from JavaScript using keyframes, playback control, and the Animation object.
- JavaScript Closures Explained: A Complete Guide
Master JavaScript closures: how they capture variables by reference, enable data privacy and function factories, and fix event handler bugs
- JavaScript Destructuring: Objects, Arrays, and Patterns
Learn JavaScript destructuring patterns for objects and arrays — extract values cleanly with defaults, renaming, rest, and nesting. Practical examples included.
- Understanding the JavaScript Event Loop
Understanding JavaScript's event loop: how the call stack, task queue, and microtask queue schedule async operations in a single-threaded runtime.
- JavaScript Generators and Iterators
Understand JavaScript generators and iterators — functions that pause and resume, producing sequences on demand with yield and the iterator protocol.
- ES Modules in JavaScript: Import, Export, and Design
Master ES Modules in JavaScript with practical examples of import, export, dynamic imports, and module design patterns for cleaner project architecture.
- JavaScript Memory Management: A Practical Guide
Understand JavaScript memory: how garbage collection works, detect memory leaks with Chrome DevTools, use WeakRef and FinalizationRegistry for efficient code.
- Prototypes and Prototype Chain
Understand JavaScript's prototype chain, Object.create(), constructor functions, property shadowing, and how ES6 classes build on prototypal inheritance.
- Regular Expressions in JavaScript
Master regular expressions in JavaScript — learn regex syntax, flags, methods, and practical patterns for text manipulation and validation
- Proxy and Reflect in JavaScript
Learn how to use JavaScript's proxy and reflect APIs for metaprogramming — handler traps, validation, lazy loading, observability, and Reflect patterns.
- Using JavaScript Symbols for Unique Object Property Keys
JavaScript Symbols create unique property keys, avoid name collisions, and customize language behavior through well-known symbols and the global registry.
- JavaScript Tagged Template Literals: How Tag Functions Work
JavaScript tagged templates process template literals through custom tag functions. Learn raw string access, i18n, and SQL query building patterns
- Understanding WeakMap and WeakSet in JavaScript
Master WeakMap and WeakSet — garbage-collectible collections for memory-sensitive key-value storage and object tracking in JavaScript.