Easy everything in Frontend Dev, page 5
Write a TypeScript async/await function that requests webcam access and handles errors
This tests async/await error handling for getUserMedia and stream attachment. A good answer uses try/catch, sets video.srcObject, and branches on NotAllowedError and NotFoundError. A red flag is omitting catch or using src instead of srcObject.
Get canvas 2D context and draw a filled circle
This tests Canvas API coordinates and context acquisition. A strong answer selects the canvas, calls getContext("2d"), uses path functions for circles, sets color style, and fills. A red flag is ignoring the top-left origin or using SVG instead.
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().
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?
Cite Web Workers, instantiate new Worker(url), and communicate via postMessage and onmessage.
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.
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?
SessionStorage dies with its tab; localStorage survives restarts and shares across tabs. Example: checkout form versus theme preference.
Create a User type alias from a function return type
Use typeof to grab the function type, then ReturnType to extract the return object shape.
Describe a common use for Partial<T> and explain Required<T>
Partial fits PATCH updates where only some fields arrive; Required strips optionality to enforce all properties.
Explain Pick versus Omit with User examples
Pick keeps listed keys; Omit drops them. Show User with id, name, email; derive Pick<User,"name"|"email"> and Omit<User,"id">.
Explain generic constraints and provide a length-constrained generic example
Explain that extends requires properties; show T extends { length: number }; give a generic function signature.
Refactor a function using generics to accept any array type
It tests generic type parameters for preserving element types through a function boundary. Answer: declare T, accept T[], return T, and let the compiler infer the element type from the call site.
Write a createUser function that POSTs JSON via fetch
Precise fetch configuration for JSON POST requests. A strong answer names method POST, headers Content-Type application/json, and body JSON.stringify(data) with return typing. Red flag: passing the raw object as body or omitting headers.
How would you modify fetch to handle HTTP error statuses?
Verify response.ok in then and throw if false, then catch network failures separately.
Write a fetch call and log JSON from the Response
This tests async HTTP literacy and fetch's two-stage promise resolution. A strong answer awaits fetch, then awaits response.json(), logs result, and notes fetch does not throw on 4xx/5xx.
How do you wrap a callback-based API into a Promise?
This tests Promise constructor mechanics and callback migration. A strong answer returns a new Promise, calls the legacy function, maps success to resolve and errors to reject.
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.
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.
Create a Person class using TypeScript parameter properties
This tests TypeScript parameter properties: constructor access modifiers auto-declare and initialize fields. A strong answer gives class Person { constructor(public name: string, private age: number) {} } and notes it removes manual this.name = name…
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