WEB Apis
28 bites tagged WEB Apis — interview questions with model answers, and 60-second explainers.
Dedicated vs Shared vs Service Workers compared
Dedicated worker serves one page for offloading CPU; Shared worker is one instance across same-origin contexts via ports; Service worker is a network proxy for caching and push, event-driven and killable. Browser worker types and roles.
Firefox 151 Ships Web Serial API for Hardware
Firefox 151 ships Web Serial API support, letting web apps talk directly to microcontrollers, 3D printers, and USB power meters without native installers. You can flash firmware and read sensors straight from the browser, so test your hardware workflows in…
Create a CustomEvent with typed detail and a type-safe listener
Tests TypeScript generics with DOM events. Strong answer: generic CustomEvent wrapper, typed detail, listener typed via generic param. Red flag: using any for detail or casting event.target instead of parameterizing the event type.
How do you programmatically play, pause, and dynamically set a video source?
Your grasp of HTMLMediaElement's imperative API and the play() Promise. Query the video, attach play() and pause() to buttons, and set src or swap source children then call load(). Treating play() as synchronous or changing src without load().
Design a Service Worker caching strategy for a news app
Cache First for the app shell, Stale-While-Revalidate for static assets, and Network First for article APIs. Matching resources to caching patterns and justifying speed vs freshness. One strategy everywhere or ignoring cache quotas.
How do you query IndexedDB products by price range?
Tests IndexedDB indexing and range query APIs. You need a price index created in onupgradeneeded, then IDBKeyRange.bound(50, 100) with index.getAll or openCursor. Red flag: fetching all records and filtering in JavaScript.
How do you add a new index to an existing IndexedDB store?
Tests production schema migration discipline. Bump the integer version in open(), handle onupgradeneeded before onsuccess, use event.oldVersion for incremental changes, and guard against duplicate index creation.
Write an IndexedDB add function with transaction error handling
Tests IndexedDB request-transaction lifecycle and event-driven error propagation. Answers open a transaction, call add(), and wire onsuccess/onerror on the request plus onabort/onerror on the transaction. Red flag: ignoring onabort or duplicate-key throws.
Design a type-safe generic localStorage wrapper in TypeScript
Generic getItem<T> returns T|null via JSON.parse, setItem<T> stringifies, and a key-to-type map enforces safety. Preserving compile-time types across localStorage's string-only API.
When does fetch trigger a CORS preflight, and what POST is complex?
Tests whether you know the simple-request boundary. A strong answer names the three safe POST content-types and gives a cross-origin POST with application/json plus a custom header like Authorization.
Create a generic fetchJson wrapper with typed response and error handling
Generic T parameter, optional RequestInit, throw if !res.ok, return res.json() as Promise<T>. marrying TypeScript generics to fetch for typed responses and runtime error handling. using any or omitting the ok check.
How would you modify fetch to handle HTTP error statuses?
Verify response.ok in then and throw if false, then catch network failures separately. awareness that fetch resolves on HTTP errors and needs manual status checking.
How would you prevent search-as-you-type race conditions with AbortController?
Abort the previous request before each new keystroke, pass the fresh signal into fetch, and ignore the AbortError. Canceling stale fetches to keep the UI consistent.
How do you type-safely check an LI click and read data-id?
Tests TypeScript narrowing with DOM event delegation. A strong answer uses closest to walk up from event.target, checks result with instanceof HTMLLIElement, then reads dataset.id. Red flag: casting event.target directly without handling nested child elements.
Strategies to type querySelector results as HTMLInputElement
Tests whether you know safe ways to narrow querySelector's Element or null to HTMLInputElement. A strong answer compares type assertions with generic querySelector calls, and insists on null checks. Red flag: asserting without runtime validation.
What is the click event's type and how to reference the button?
Handler receives a MouseEvent. Use event.currentTarget for the attached button, since event.target may be a nested child. DOM event inheritance and currentTarget versus target.
What is getElementById's return type and the check needed for .value?
Tests strict null awareness: getElementById returns HTMLElement or null, so null-check first. Strong answers note HTMLElement lacks .value, requiring narrowing to HTMLInputElement. Red flag: assuming a valid element is always returned.
What are the key differences between NodeList and HTMLCollection?
Tests DOM snapshot vs live binding: querySelectorAll returns a static NodeList, getElementsByTagName returns a live HTMLCollection. Strong answers note childNodes is a live NodeList and warn against caching length during DOM mutation.
What is the fundamental difference between window and document?
Window is the browser tab and global scope; document is the object-oriented DOM representation of the loaded page. Your mental model of the browser runtime layers.
What is NextResponse.json() and how does it differ from standard Response?
NextResponse.json() auto-serializes and sets the application/json header; standard Response needs manual JSON.stringify and headers. Knowledge of Next.js helpers over the Web Response API.
Build a dynamic table of contents from article h2 tags
Query h2s with querySelectorAll, assign ids, map to anchor links, append a nav list. Basic DOM querying and dynamic element creation in vanilla JS. Importing jQuery or a framework for a six-line native task.
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.
currentTarget vs. target: Who's Listening vs. Who Shouted
event.currentTarget is the element listening for an event, while event.target is the element that triggered it. This is vital for event delegation patterns. Be careful: currentTarget is only valid inside the handler and becomes null afterward.
The DOM's Inheritance Chain: EventTarget > Node > Element
Every HTML element is a stack of types: an EventTarget for events, a Node for tree structure, and an Element for common attributes. This lets you write type-safe DOM code, knowing a `div` has properties from all its ancestors.
Get WEB Apis bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.