Intermediate everything in Frontend Dev, page 9
Explain the difference between microtask and macrotask queues
Macrotasks like setTimeout run one per tick; microtasks like Promises drain fully after each task before rendering.
What is the exact output and event sequence of this code?
Tests event loop priority between sync, microtasks, and macrotasks. A strong answer gives Start, End, Promise, Timeout; explains Promise.then is a microtask and setTimeout is a macrotask, microtasks draining before the next macrotask.
How do you derive a PATCH payload type from UserProfile?
Tests knowledge of TypeScript utility types for APIs. A great answer uses Partial<UserProfile> to make all fields optional in one line and connects it to PATCH subset semantics. Red flag: manually rewriting properties as optional or confusing PUT with PATCH.
How do you type a custom property on global window in TypeScript?
Tests declaration merging and global scope augmentation in TypeScript. Strong answer: declare global in a .ts file, a .d.ts with interface Window, or scoped declare const window. Red flag: any or ts-ignore instead of interface merging.
How do you globally add a property to a third-party ButtonProps interface?
Tests TypeScript declaration merging and module augmentation. A strong answer uses a .d.ts file that declares the same module and interface name to merge the missing property globally. Red flag: suggesting edits inside node_modules or local wrapper types.
How would you structure TypeScript code and exports for effective tree-shaking?
Tests ES module semantics and sideEffects for library authors. Great answers: emit ESM, set sideEffects:false, avoid stateful barrel files, and preserve import syntax. Red flag: saying ESM alone guarantees tree-shaking without mentioning side effects.
How do modern build tools handle TypeScript vs tsc?
Separating transpilation from type checking for speed. Great answer: fast native tooling strips TS per-file on demand via native ESM; browser loads only visited modules; tsc/ts-loader check/bundle the whole graph upfront.
What problem does esModuleInterop solve for CommonJS imports?
Tests CommonJS-to-ESM interop. A strong answer covers: default imports for CommonJS modules; runtime helpers checking __esModule and wrapping exports; and implicit allowSyntheticDefaultImports. Red flag: claiming it is purely type-level with no emit impact.
How would you use tsconfig.json to enable shorter path aliases?
This tests TypeScript module resolution. A strong answer sets compilerOptions.baseUrl, maps paths like @/* to src/*, and warns bundlers need matching aliases. A red flag is omitting baseUrl or claiming paths alone changes runtime resolution.
Use MediaRecorder to capture a canvas stream and download as WebM
Tests MediaRecorder lifecycle and blob assembly. Answer: canvas.captureStream() into new MediaRecorder with video/webm, start(), collect chunks via dataavailable, stop(), then build a Blob and object URL for download.
Explain the roles of vertex and fragment shaders in WebGL
Vertex shaders write gl_Position per vertex; fragment shaders write gl_FragColor per pixel.
Which video event signals completion, and how do you track playback time?
Tests HTMLMediaElement events and UI performance. Answer: use ended for replay; read currentTime on timeupdate but throttle updates or use requestAnimationFrame. Red flag: setInterval polling, currentTime===duration checks, or unthrottled state writes.
How do you create a smooth Canvas 2D loop with requestAnimationFrame?
Tests render pipeline timing. Outline: queue rAF per refresh; derive delta from timestamp for frame-rate independence; recurse each frame; cancel via cancelAnimationFrame. Red flag: claiming rAF locks 60fps, ignoring timestamp, or setInterval is fine.
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.
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
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
Generic getItem<T> returns T|null via JSON.parse, setItem<T> stringifies, and a key-to-type map enforces safety.
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