Everything in TypeScript & Web APIs, page 9
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.
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.
Service Worker Registration: Claiming Your Control Scope
Registering a service worker is like assigning a security guard (your script) to a specific area (the scope) of your site for offline support. The footgun: by default, a worker can only control its own directory, not the whole site.
Web Workers: Keep Your UI Responsive During Heavy Tasks
A Web Worker is like a background helper, running heavy JavaScript tasks in a separate thread so your UI never freezes. Use it for complex calculations or data fetching. The main footgun: workers cannot directly manipulate the DOM.
The `popstate` Event: Handling Browser History Navigation
The popstate event lets your app react to browser back/forward clicks. It's key for SPAs to update views without a full reload. The main footgun: the event fires before the document is fully updated, so your handler might read a stale DOM.
Manipulate Browser History with pushState and replaceState
Make a single-page app feel like a multi-page site. pushState changes the URL without a full page reload, creating a new browser history entry. This is essential for SPAs to enable shareable links and a working back button.
Cache API: Manual Control Over Network Responses
The Cache API is a key-value store for network requests you control directly, unlike the browser's automatic HTTP cache. Use it in service workers for offline support or to pre-cache app assets.
IndexedDB Versioning: The 'upgradeneeded' Gatekeeper
IndexedDB uses a version number to manage schema changes. Incrementing the version in indexedDB.open() triggers a special upgradeneeded event, which is the only context where you can create or modify object stores and indexes.
IndexedDB Cursors: Iterate Large Datasets Efficiently
An IndexedDB cursor is a pointer for walking through records one by one, avoiding loading a whole dataset into memory. Use it to efficiently process large browser databases.
IndexedDB Indexes: Fast Queries in the Browser
An IndexedDB index is like a book's index, letting you quickly find records by a specific property without scanning the entire dataset. It's essential for fast queries on non-primary keys, like looking up a user by email.
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.
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