Modern Bundlers & TypeScript: Transpile, Don't Check
Modern bundlers like Vite prioritize speed by only transpiling TypeScript files, not type-checking them. This enables sub-50ms updates during development. The footgun: your dev server won't report type errors; you must run `tsc --noEmit` separately.
Media Source Extensions: The Engine for Web Streaming
MSE lets you build streaming video players in JavaScript by feeding media chunks to a `<video>` element, instead of a single file URL. It's the foundation for adaptive streaming like DASH/HLS.
RTCPeerConnection: Direct Browser-to-Browser Links
Think of an RTCPeerConnection as a direct phone line between two browsers. It's the core of WebRTC, enabling peer-to-peer video and data streams. The footgun: it doesn't find peers; you must use a separate signaling server to broker the initial handshake.
WebGL Textures: From Image File to GPU Pixels
WebGL textures are images uploaded to the GPU for fast access when "painting" 3D models. They're used to apply detailed surfaces like brick patterns. The footgun: images must be CORS-approved, and non-power-of-two dimensions break mipmapping in WebGL1.
Web Audio API: A Modular Synth for Your Browser
The Web Audio API treats sound as a modular graph. You connect sources (files, oscillators) to effects (filters) and a destination (speakers) for precise, low-latency control. It's ideal for games and music apps.
MediaRecorder API: Capture Audio and Video in the Browser
The MediaRecorder API is a VCR for your browser, capturing a MediaStream from a camera or screen into a file. Use it for in-browser video recorders or voice memo apps. The footgun: recorded data arrives as Blob objects in an event, not as a direct.
WebGL Uniforms: Global State for Shaders
WebGL uniforms are global constants for your shaders, set once per frame from JavaScript to provide the same value to every vertex and pixel. Use them for scene-wide data like a camera's projection matrix. The footgun: changing a uniform is a CPU-to-GPU call.
WebGL Buffers: Telling the GPU How to Read Your Data
WebGL's vertexAttribPointer is the map you give the GPU to read vertex data from a buffer. It tells your shader how to parse a flat byte array into attributes like position. This is how you link CPU data to the GPU before drawing.
WebGL Shaders: Your Direct Line to the GPU
WebGL shaders are small programs written in GLSL that run directly on the GPU, bypassing the CPU for massively parallel graphics tasks. They are essential for all WebGL rendering, positioning vertices and coloring pixels.
WebGL Rendering Context: Your GPU's API on Canvas
The WebGL rendering context is your JavaScript's command center for drawing on a `<canvas>` with the GPU. You use it for 3D games or complex data visualizations. The context can be lost, so always check `isContextLost()` before rendering a new frame.
Canvas drawImage: Projecting Pixels onto a Canvas
drawImage is a versatile projector for your canvas, letting you place, scale, and even slice images before drawing them. It's used for rendering game sprites from a sprite sheet, displaying video frames, or compositing images.
Managing Canvas State with save() and restore()
Think of save() and restore() as checkpoints for your canvas. `save()` pushes the current drawing state (styles, transforms) onto a stack, and `restore()` pops it back off. Use this to temporarily apply a transformation to just one element.
Requesting Camera and Mic Access with getUserMedia
getUserMedia asks for camera/mic access in the browser. It's used for video chats or photo booths and returns a Promise with the media stream. Footgun: The promise can hang forever if the user ignores the prompt, so your app must handle that state.
Canvas 2D Context: The API for Drawing on the Web
The Canvas 2D Context is your digital paintbrush and ruler for drawing on a web page. You get this object from a `<canvas>` element to draw shapes, text, and images for data visualizations or simple games. The key footgun: it's a state machine.
HTMLMediaElement: The Remote Control for Browser Media
HTMLMediaElement is the shared "remote control" API for `<audio>` and `<video>` tags, letting you programmatically play, pause, and seek. Use it for custom players or syncing animations. Footgun: Browsers often block `autoplay`, so never assume it will work.
Web Push API: Engage Users When Your App is Closed
The Web Push API lets servers send messages to users even when your site is closed. A service worker receives these pushes, making it ideal for notifications. The main footgun: the subscription endpoint is a secret key that must be protected.
Background Sync API: Send Data When the Network Returns
The Background Sync API lets your app defer work until the network is back. You register a task, and the browser wakes your service worker to run it when connectivity returns. Use it to reliably send data submitted while offline, like form posts or chat.
Transferable Objects: Zero-Copy Data for Web Workers
Transferable Objects move resource ownership between contexts, like threads, instead of copying data. This enables fast, 'zero-copy' transfers for large memory blocks. Use it with `postMessage()` to send an `ArrayBuffer` to a Web Worker.
Shared Workers: One Background Script for Multiple Tabs
A SharedWorker is a single background script shared across multiple tabs or windows from the same origin. Use it to manage a single WebSocket connection or sync state between pages. The footgun: each tab must call `port.start()` on its own message port.
Intercept Network Requests with the `fetch` Event
The `fetch` event turns your Service Worker into a programmable network proxy. Use it to intercept outgoing requests to serve assets from a cache for offline support or to synthesize custom responses.