Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
How to structure translation keys for dynamic localized strings
Tests ICU MessageFormat and safe interpolation. Outline: one key per sentence with named placeholders; sanitize variables pre-format; use pattern-level plural and select. Red flag: concatenating fragments or injecting raw user input into templates.
Replace a hardcoded error message with a scalable copy system
Tests decoupling UI copy from code via key-based i18n. Move the string into a JSON namespace, wire through i18next, load dynamically, and lint against hardcoded strings. Manual find-and-replace without keys or fallback is a red flag.
Describe the technical steps for displaying and enforcing a cookie consent banner.
Tests privacy-first frontend architecture. Outline: check consent record, render banner if absent, classify scripts as essential or non-essential, persist choice, and inject tracking only after explicit opt-in.
How would you track which headline wins in an A/B test?
Tests end-to-end experiment instrumentation across the stack. Outline: deterministically bucket users, serve variant A or B, emit click events, and aggregate by variant.
Track a 'Request a Demo' button click
End-to-end click instrumentation. A strong answer covers: a DOM listener on the button, a custom event name like request_demo, and a payload with page path and button ID. Using pageview tracking instead of an explicit event.
How do you handle UI text pluralization with ICU Message Format?
This tests i18n depth beyond adding an 's'. A strong answer names ICU MessageFormat, lists the six CLDR plural cases, and notes translators provide strings per case. Red flag: hard-coding suffixes or simple if/else logic that breaks in Polish or Arabic.
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.
How would you instrument a CTA button and describe its event payload?
This tests basic event instrumentation and payload design. Mention a click listener, a gtag call with an event name, and parameters like button_text and page_path. A red flag is a bare event name with no parameters or mixing pageviews and clicks.
Describe how you'd implement an A/B test for a landing page headline
Mention deterministic bucketing, anti-flicker rendering, tracking with variant IDs, and sample-size planning. Experiment integrity beyond DOM swaps. Swapping headlines client-side after paint biases data and hurts UX.
How would you track clicks on headlines and calls-to-action?
This tests DOM event handling and basic telemetry design. A strong answer covers event delegation with addEventListener, data attributes for element IDs, and a payload with timestamp and page context.
How would you A/B test sign-up button copy and measure results?
This tests basic experimental design. A strong answer covers: random assignment, serving variant copy, tracking impressions and conversions, and measuring lift. A red flag is sequential testing or vanity metrics like clicks without sign-ups.
How do you build a performant visualization for millions of time-series points?
Tests end-to-end data reduction: backend bucket downsampling like LTTB preserves visual shape, frontend uses level-of-detail rendering and viewport culling. Red flag: naive every-Nth sampling that drops peaks or sending raw millions to the browser.
How do you track page views in a Single Page Application?
This tests SPA analytics beyond classic page loads. A strong answer covers History API pushState and popstate events, framework router hooks like useEffect or afterEach, and beaconing views. A red flag is relying only on window.load or polling URL changes.
Atlassian: DESIGN.md trades depth for portability
Google's DESIGN.md cuts AI slop by giving agents portable brand context, but Atlassian found portability costs token efficiency and sophistication versus structured models. Weigh portability against depth for AI design workflows.
How would you capture UTM parameters for attribution?
This tests your grasp of the data lifecycle from capture to persistence. A good answer covers client-side parsing, cookie storage, and linking anonymous data to a user record upon sign-up. A red flag is forgetting to persist the data server-side.
Describe the client-side event for an 'Add to Cart' button
Tests your knowledge of standard analytics schemas (like GA4) and designing payloads for business analysis. A great answer names the 'add_to_cart' event, details the 'items' array with product data, and mentions user/session context.
Strategy for Visualizing Millions of Time-Series Points
Tests your strategy for balancing performance and visual fidelity with large datasets. Propose backend downsampling with an algorithm like LTTB to preserve peaks, then discuss multi-resolution data fetching on the frontend.
Explain pre-attentive attributes in data visualization
Tests designing high-signal UIs. Define pre-attentive attributes as visual cues processed instantly (e.g., color, size, shape). Apply one to make key data 'pop' in a dense chart.
Track an 'Export to CSV' button's usage and outcomes
This tests your ability to design a robust event schema, not just track a click. A great answer uses one custom event name with a 'status' parameter ('initiated', 'success', 'failure'). A red flag is suggesting multiple event names for one action.
How would you capture and persist UTM parameters for attribution?
Tests your grasp of state management and data persistence for analytics. A good answer covers capturing UTMs with JS, persisting them in a cookie, and associating them with a user record on the server during a conversion event.
Describe the client-side event for an 'Add to Cart' button
This tests your ability to design analytics events for future analysis. Name a standard event like `add_to_cart` and list item parameters (`item_id`, `price`, `quantity`).
Visualize Millions of Time-Series Data Points
Tests your ability to handle large datasets by combining backend downsampling (like LTTB) with frontend multi-resolution fetching and canvas rendering. A red flag is suggesting naive sampling (every Nth point) or focusing only on frontend libraries.
Design a client-side event batching system for a high-traffic app
This tests your grasp of frontend performance and data reliability. Outline a batching strategy (timer/size), then explain using `visibilitychange` with `navigator.sendBeacon()` to prevent data loss on unload. A red flag is suggesting synchronous XHR.
How do you track page views in a Single Page Application?
This tests your grasp of SPA routing mechanics. A great answer covers both programmatic navigation (using router hooks) and browser history events (`popstate`), explaining why both are necessary.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.