More in Frontend Dev — page 16
Explain Network First vs Cache First caching and when to use each
Tests matching caching strategy to asset freshness. Cache First serves static assets from the Cache API, falling back to network. Network First fetches fresh content, falling back to cache offline.
Describe the Service Worker lifecycle and cache versioning
Tests your grasp of the Service Worker lifecycle and cache versioning. A strong answer sequences register, install, activate, and fetch; notes install precaches assets while activate purges old caches and finalizes takeover.
Pass data to a Web Worker and transfer an ArrayBuffer efficiently
Tests postMessage clone versus transferable objects for zero-copy transfer. Good answers note postMessage copies by default, but ArrayBuffer can move via transfer list, neutering the original.
SPA back button: what event fires and how do you handle it?
Tests History API literacy. Strong answer: popstate event, PopStateEvent type, restore UI via event.state, and zero-delay setTimeout for DOM sync. Red flag: confusing popstate with pushState or using hashchange for modern History API routing.
What is a Service Worker's role and key PWA capability?
Tests understanding of the Service Worker as a network proxy and its core PWA benefit. A strong answer states it intercepts requests as a proxy and enables offline use via granular caching. Red flag: confusing it with Web Workers or DOM manipulation.
Which Web API offloads expensive work from the main UI thread?
WHAT IT TESTS: knowledge of moving CPU-heavy work off the main thread. ANSWER OUTLINE: cite Web Workers, instantiate new Worker(url), and communicate via postMessage and onmessage. RED FLAG: citing setTimeout or async/await, which still run on the main thread.
Programmatically change SPA URL without reload and what is state for?
This tests History API fluency. Answer: use pushState or replaceState to change the URL silently; the state object is serializable data tied to the history entry, surfaced through popstate on back or forward navigation.
Why access IndexedDB exclusively from a Web Worker?
Tests whether you know IndexedDB in workers keeps the main thread free from serialization and transaction overhead, while recognizing that postMessage copying and request-response coordination add real architectural complexity.
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.
Explain IndexedDB transactions and readonly vs readwrite modes
WHAT IT TESTS: Understanding of IndexedDB's transactional model and concurrency. ANSWER OUTLINE: Every operation needs a transaction; readonly allows concurrent readers, readwrite is exclusive; they auto-commit when idle.
Design a type-safe generic localStorage wrapper in TypeScript
WHAT IT TESTS: Preserving compile-time types across localStorage's string-only API. ANSWER OUTLINE: Generic getItem<T> returns T|null via JSON.parse, setItem<T> stringifies, and a key-to-type map enforces safety.
What are localStorage's capacity and synchronous blocking limitations?
This tests Web Storage API trade-offs and main-thread blocking. A strong answer notes synchronous calls block the main thread; cites a finite per-origin quota; and names IndexedDB for async needs. Red flag: calling it a database or ignoring UI freezes.
How do you store and retrieve a TypeScript object in localStorage?
This tests your knowledge of Web Storage string constraints and JSON serialization. A strong answer covers JSON.stringify on write, JSON.parse on read, and typing the result with a TypeScript interface.
What is the core difference between localStorage and sessionStorage?
WHAT IT TESTS: Tab isolation versus origin-wide persistence. ANSWER OUTLINE: sessionStorage dies with its tab; localStorage survives restarts and shares across tabs. Example: checkout form versus theme preference. RED FLAG: Claiming persistence time differs.
Write a generic CreateSetters<T> that maps properties to setter methods
This tests TypeScript mapped types with key remapping and template literals. It iterates keyof T, remaps via as set plus Capitalize of string and K, and types values as setter methods. Red flag: manually typing setters or omitting string and K in Capitalize.
Implement recursive DeepReadonly<T> for nested objects and arrays
Tests recursive mapped types and conditional type narrowing. A strong answer uses a conditional to split arrays into ReadonlyArray, objects into readonly mapped types, and leaves primitives untouched.
Write a generic PickByValue<T, V> type
Tests conditional types and mapped-type key remapping. Great answer: K in keyof T as T[K] extends V ? K : never with value T[K]. Red flag: writing V extends T[K] instead, which reverses the assignability check and includes wrong keys.
Implement the built-in NonNullable<T> utility type from scratch
Tests conditional type distribution and union filtering. A strong answer uses distributive conditional types to map null and undefined to never while preserving other union members.