TypeScript &amp; Web APIs

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.

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.

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.

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.

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.

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.

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.

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.

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.

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 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 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.

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.

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.

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.

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.

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.

Declaration Files: How TypeScript Knows Your Library's Shape

A .d.ts file is a type-only blueprint for existing JavaScript code, describing its shape without any implementation. This is how TypeScript provides type-checking for third-party libraries or browser APIs. The footgun is adding logic to them; it's ignored.

easy1 min read

DefinitelyTyped: Type Definitions for JavaScript Libraries

@types packages from DefinitelyTyped are instruction manuals for JavaScript libraries, letting TypeScript understand their shapes. You install them for JS libs that lack their own types, enabling autocompletion.