All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4247 bites
Page 190
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.
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.
TypeScript's Module Resolution Strategy
TypeScript's moduleResolution is the compiler's search plan for finding files behind import statements. It's crucial when mixing module types (ESM/CJS) or targeting Node.js vs. the browser. The footgun is assuming the default node works for modern ESM.
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.
Speed Up Builds with TypeScript Project References
Treat your codebase like a set of independent packages. Project References let you split a large project into smaller, interconnected pieces, dramatically speeding up builds by only recompiling what's changed.
TypeScript's `declare`: A Promise to the Compiler
declare promises the TypeScript compiler a value exists, even if it can't see the source. This lets you use untyped JavaScript libraries or browser APIs without errors.
TypeScript: Type-Only Imports and Exports
Use import type to tell the compiler an import is only for type-checking and should be erased from the final JavaScript. This prevents tools like Babel from generating unwanted runtime code when compiling files in isolation.
Triple-Slash Directives: Compiler Hints in Comments
Triple-slash directives are compiler instructions inside comments, telling TypeScript about file dependencies. They're mostly seen in older projects or for global types, as modern import statements are preferred.
Module Augmentation: Adding Types to External Libraries
Module augmentation is like monkey-patching for types, letting you add definitions to external modules. Use it to add a user property to Express's Request object.
export = : TypeScript's CommonJS Export Syntax
Think of export = as TypeScript's version of module.exports. It replaces a module's entire export with a single value, like a class or function. It's used for compatibility with CommonJS modules. The footgun is mixing it with standard exports.
Shipping TypeScript Types in package.json
The types field in package.json tells TypeScript where to find your package's type definitions. Use it when publishing a library to enable autocompletion for users. The footgun is putting type dependencies in devDependencies instead of dependencies.
Identifying JS Library Structure for TypeScript Types
To type a JS library, first identify its structure: module, global, or UMD. This dictates your .d.ts file's shape. You'll check docs for import/require or <script> usage. The footgun is misidentifying a UMD library, leading to incorrect import types.
TypeScript Namespaces: The Original Module System
TypeScript namespaces bundle related code under a single global name, preventing name collisions. They are useful for older projects or UMD library types, but the footgun is using them in modern apps; prefer standard ES modules.