Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
Why is DI central to Angular architecture versus Vue's module system?
Tests architectural grasp of inversion of control. Angular DI enables hierarchical injectors, tree-shakable providers, and runtime substitution without direct imports unlike Vue modules. Red flag: calling DI mere convenience or claiming Vue matches Angular DI.
Compare and contrast Vue 3 and Svelte reactivity systems
Tests runtime versus compile-time trade-offs. Contrast Vue 3 Proxy interception with Svelte compile-time assignment transforms. Vue tracks dependencies dynamically during effects; Svelte resolves them at build. Red flag: claiming both use runtime Proxies.
What is the primary end-user benefit of Svelte's compiler-first approach?
Tests if you connect compiler architecture to user-facing performance. Strong answer: build-time work shrinks bundles and reduces browser overhead for faster loads on slow devices. Red flag: answering with developer ergonomics instead of runtime performance.
Virtual DOM Diffing: Minimal DOM Surgery
Virtual DOM diffing finds the smallest real DOM ops to sync a lightweight tree with new state. Frameworks batch rapid UI changes instead of repainting everything. The footgun is treating the diff as free; missing keys in lists force expensive reconciliation.
Angular JIT: Runtime Template Compilation
Angular JIT ships the compiler to the browser and builds components on the fly. It speeds up development rebuilds but pushes compilation cost to runtime. The footgun is deploying it to production, bloating bundles and hiding template errors until runtime.
Testing SvelteKit load Functions
A SvelteKit load function consumes a request event and returns page data. Unit test it by mocking the event object in Vitest, not by mounting the page. Never test it through component rendering, because load runs before the component initializes.
Apollo Client: GraphQL as Reactive State
Apollo Client turns your GraphQL API into reactive state that components read like a local cache. It shines when multiple views share overlapping data, but teams often footgun by sending one massive query instead of letting the cache normalize fragments.
Svelte Logic Blocks: Template Control Flow
Svelte logic blocks are compiler directives disguised as HTML comments that branch, loop, and await inside templates. You write {#if}, {#each}, and {#await} directly in markup.
How do you architect an automated performance and accessibility testing pipeline?
This tests operationalizing quality gates via automation, not manual checks. A strong answer covers Lighthouse CI in CI/CD, fail thresholds for CWV and WCAG, and a triage workflow assigning regressions to owners.
Describe heuristic evaluation and two heuristics that guide UI components
Tests if you bridge UX research and frontend decisions. Define heuristic evaluation as expert review against rules of thumb, cite two NN/G heuristics, and map each to a concrete component behavior. Red flag: listing heuristics without code impact.
Screen Reader Testing: Navigate UI Without Sight
Screen reader testing reveals gaps visual checks miss by turning your UI into audio. Run real tasks with only a keyboard and screen reader, checking headings and focus order. The footgun is treating axe passes as equivalent to a human listening through a flow.
How do you translate Figma Smart Animate into CSS or JS?
Convert easing to cubic-bezier or library curves, match ms values, animate transform and opacity, escalate layout shifts to JS. Bridging design tools to code with fidelity.
How would you architect a Figma-to-code icon system?
Tests design-to-code systems thinking. Strong answers cover Figma variables as source of truth, automated API exports into transformed versioned packages, and strict naming taxonomy. Red flag: manual SVG exports and developers editing assets by hand.
Discuss custom web font performance and loading strategies
Critical rendering path tradeoffs between speed and design fidelity. Strong answers match font-display to UX goals, combine preloading with subsetting, and quantify byte savings. Red flag: calling swap a free win while ignoring layout shift from reflow.
Translate Figma Auto Layout padding, direction, and spacing to Flexbox
Tests your ability to bridge design tools and CSS layout mechanics. Match direction to flex-direction, padding to gap or container padding, space-between to justify-content, and hug/fill to flex-grow or flex-shrink.
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 would you inspect a Figma text element for CSS properties?
Your Figma-to-CSS typography workflow. A good answer selects the layer, opens the Properties tab or Dev Mode, reads font family, weight, size, line height, and letter spacing, and uses Copy as code. Eyeballing instead of inspecting.
How would you optimize and implement a full-bleed responsive hero image?
Use srcset with AVIF/WebP, CSS object-fit cover, and width/height to prevent CLS. responsive image delivery and performance budgeting across breakpoints. serving one 4K JPEG as a background image with no size hints.
Assess WCAG AA contrast for light grey text on off-white
Tests your fluency in WCAG relative luminance and design collaboration. A strong answer extracts sRGB values, computes contrast ratio, checks 4.5:1 or 3:1 by text size, and suggests a darker tint preserving hue.
How do you apply progressive disclosure and hierarchy in complex data tables?
This tests layered UI decomposition. Strong answer: default to essential columns with horizontal dividers; disclose sort and filter on interaction; paginate at 48-56px row height; apply contrast and color cues sparingly.
How would you show system status during a multi-megabyte file upload?
Tests turning Nielsen's heuristic into concrete frontend patterns for uncertain waits. Cover granular progress like percent and bytes, distinct states for upload versus processing, time estimates, and error recovery.
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.
Matt Pocock's Free React TypeScript Tutorial
Matt Pocock's free React TypeScript tutorial teaches typing for hooks, props, events via hands-on exercises. Covers ComponentProps, useRef, and reading React's type defs to debug errors. Bookmark this if your team is adopting TypeScript.
In WebGL, what is the difference between attributes and uniforms?
Tests per-vertex versus per-draw-call data flow. Attributes vary per vertex from buffers; uniforms are constant per draw call. Cite vertex positions as attributes and an MVP matrix as uniform.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.