Intermediate everything in TypeScript & Web APIs, page 5
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.
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.
The Service Worker Lifecycle: Register, Install, Activate
A service worker is a background proxy that lets your app work offline. Its lifecycle—register, install, activate—governs how it takes control of pages. The biggest footgun: a new worker waits for old clients to close before activating, delaying updates.
Choosing the Right Client-Side Storage
Client-side storage turns the browser into a mini-database for faster loads and offline access. It's used for remembering user preferences or caching assets.
IndexedDB Transactions: The Gatekeepers of Data
An IndexedDB transaction is a short-lived container for all database operations, ensuring data integrity. Use it for any read or write. The main footgun: transactions auto-commit if idle, so you must queue all requests synchronously without waiting.
IndexedDB Object Stores: Your Browser's NoSQL Table
An IndexedDB Object Store is like a NoSQL table in your browser, holding JavaScript objects by key. Use it for offline data like to-do lists or cached API responses. The main footgun: you can only create stores during a database version upgrade.
IndexedDB: A NoSQL Database in Your Browser
Think of IndexedDB as a NoSQL database in the browser, built for large structured data that localStorage can't handle. It's ideal for offline apps or caching large assets. The footgun: browsers can evict your data, so it's not permanent storage.
HTTP Cookies: State for a Stateless Web
Think of a cookie as a server's nametag for your browser. Since HTTP is stateless, this nametag helps the server remember you across requests for logins, shopping carts, or personalization. The main footgun is security: always use security flags.
TypeScript's Optional Chaining (`?.`)
Optional chaining (?.) lets you safely access nested properties without crashing on null or undefined. Use it to replace verbose && checks when traversing deep objects. The footgun is that it only checks the value to its left, not the entire chain.
TypeScript: Modify Properties with Mapped Type Modifiers
Mapped type modifiers let you add or remove readonly and ? from a type's properties. Use them to create a fully required type from an optional one, or a mutable version of a readonly object. The footgun: remember the - prefix to *remove* modifiers.
AbortController: Cancel In-Flight Web Requests
AbortController is a remote kill switch for web requests. You create a controller, pass its signal to a fetch call, and can then call abort() to cancel it. Use it to stop requests when a user navigates away. The footgun is forgetting this signal.
URLSearchParams: Safely Build and Parse URL Queries
Think of URLSearchParams as a structured object for a URL's query string, saving you from messy string manipulation. Use it to read incoming parameters or build a query for a fetch request. The footgun: get() only returns the first value for a key.
TypeScript `infer`: Create a Self-Typing Fetch Wrapper
Use TypeScript's infer to build one fetch wrapper that automatically knows the correct request/response types for every endpoint. It's essential for type-safe calls to APIs with a defined schema.
The Headers Object: A Safer Way to Manage HTTP Headers
The Headers object is a specialized map for HTTP headers that handles sanitization for you. Use it with the Fetch API to build requests or read response headers. The footgun: headers from a fetch() response are immutable and will throw an error if you try.
Typing `fetch` Responses in TypeScript
The fetch promise resolves to a generic Response, not your typed data. You must first parse the body with .json(), then assert the type of the resulting data. This is essential for all API calls.
TypeScript Generics: Writing Functions That Adapt to Types
TypeScript generics create functions with type placeholders, capturing an input's type to inform the output's. This is vital for reusable components that work on various data types.
The Promise Constructor: Wrapping Old Callbacks
The Promise constructor turns old callback-style functions into modern promises you can await. Use it to "promisify" APIs like setTimeout that don't return promises. The footgun is wrapping already-promise-based code, creating unnecessary complexity.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles