Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
How do you populate one overlay for three profiles using variables?
Tests Figma variables and advanced prototyping. Use Set variable actions on each profile to update a string variable bound to a single overlay's name, plus instance swap for the avatar, then open that overlay.
How do you export and optimize a Figma SVG for web?
This tests your design-to-code workflow. A strong answer covers: selecting the vector layer, adding an SVG export in the right sidebar, and running the output through SVGO to strip metadata and flatten transforms.
How do you migrate a breaking change in a mature design system?
This tests organizational change management at scale, not just code changes. A strong answer covers SemVer major versioning, beta testing with key consumers, phased deprecation timelines, and automated file audits.
What is a design system's purpose and how does it enforce consistency?
This tests if you see a design system as a single source of truth for design, not just a UI kit. A strong answer cites components and style guides that standardize output. Calling it only a Figma file without developer adoption is a red flag.
Generative AI Plugins in Figma
Figma AI plugins are a junior designer on demand: prompt for UI, copy, or images and get editable layers. Use them to unblock frames. Never ship raw output; generated layers break auto-layout and ignore accessibility, so treat them as scratchpads, not specs.
Dynamic Counter: State in Figma
A dynamic counter wires a number variable to a text layer, letting taps change the value. Use it for quantity steppers or pagination in prototypes. The footgun is skipping the text-to-variable binding, so clicks fire but the on-screen number never updates.
Handoff Plugins Bridge Figma to Code
Handoff plugins are automated translators between Figma and code, turning visual specs into tokens or components. They speed up design systems where manual inspection is a bottleneck. The footgun is treating generated output as production-ready without review.
Components: One Master, Many Instances
A component is a master spawning linked copies; edit it and all copies update instantly. Use them for buttons and cards that repeat so one edit flows everywhere. Detach instances or override everything and you kill reusability, forcing manual fixes.
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.
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.
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.
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().
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.
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.
How do you cancel pending fetches using AbortController?
Keep one AbortController, abort before each fetch, pass its signal, and swallow AbortError.
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.
Write a generic TypeScript handler for mixed form inputs?
Tests TypeScript DOM narrowing. Strong answer: union-type ChangeEvent, narrow target with instanceof or tag checks, branch on element.type to read .checked for checkboxes or .value otherwise. Red flag: casting to any or assuming all inputs use .value.
Explain Shadow DOM, encapsulation, and event propagation
Tests Web Components encapsulation and event retargeting. A strong answer covers shadow root/host/boundary, CSS scoping, open versus closed modes, and retargeting where events appear to come from the host element.
Ambient Module Declarations: Compile-Time Trust Falls
Ambient module declarations are compile-time trust falls: you tell TypeScript the shape of code it cannot see. Use them for untyped npm packages, CSS imports, or CDN scripts.
Next.js 16.2 adds agent-native dev tooling
Next.js 16.2 bundles version-matched docs with create-next-app, hitting 100% on framework evals versus 79% without. Browser errors now forward to terminal and a dev server lock file prevents agent confusion. Upgrade if you use AI coding agents.