Advanced everything in Frontend Dev, page 9
Using CSS Grid, how do repeat, auto-fit, and minmax create responsive columns?
Tests intrinsic sizing and responsive tracks without media queries. A strong answer gives repeat(auto-fit, minmax(250px, 1fr)), noting repeat generates tracks, auto-fit collapses empties, and minmax sets a floor with fractional growth.
Implement fluid typography from 16px to 24px across 400px–1200px in one declaration?
This tests clamp() fluency for viewport-relative type scaling without media queries. A strong answer states clamp(16px, calc(16px + 8 * (100vw - 400px) / 800), 24px) and explains the slope math. A red flag is multiple media queries or calc() without clamp().
What are CSS container queries and what problem do they solve?
This tests component-level responsive awareness. A strong answer states container queries style elements based on their container size, letting components adapt regardless of viewport. Red flag: believing media queries alone solve component context adaptation.
How can CSS aspect-ratio and modern layout properties prevent CLS?
Set width/height attributes, use CSS aspect-ratio for responsive scaling, and reserve container space with min-height.
How do min-content, max-content, and fit-content work in CSS Grid?
It tests intrinsic track sizing. A strong answer defines min-content as the smallest no-overflow width, max-content as widest no-wrap width, and fit-content as clamped max-content; then shows labels hugging longest word.
What problem does subgrid solve? Give a concrete example.
This tests whether you know nested grids create track contexts breaking cross-level alignment. A strong answer explains subgrid inherits parent tracks, using a card whose internals align to a global page grid.
How does color-scheme interact with user-agent stylesheets and prefers-color-scheme?
This tests the boundary between author CSS and browser chrome. color-scheme lets the UA recolor native UI like scrollbars and form controls automatically, while prefers-color-scheme styles custom components.
How do you create gradient text in CSS?
Set a gradient background-image, use background-clip: text to clip to glyphs, and color: transparent to reveal it.
Explain :is() vs :where() specificity and when to pick :where()
Tests whether you treat specificity as architecture, not just syntax. :where() has zero specificity; :is() adopts the most specific argument's weight. Choose :where() for base resets or utility classes designed to be overridden. Red flag: calling them equal.
Design System Dependency Update Automation
Automating dependency updates pushes design system releases to apps without manual pull requests. It matters when token changes must reach dozens of repositories at once. The footgun is automating bumps without visual regression, which silently breaks UI.
ISR: Static Speed for Dynamic Content
Incremental Static Regeneration (ISR) gives users a fast, static page while regenerating it in the background. It's ideal for e-commerce catalogs or blogs that update periodically.
SvelteKit Server-Only Modules: Keep Your Secrets Secret
SvelteKit's server-only modules are a firewall for your code, preventing sensitive data like API keys from ever being bundled for the browser. Use them for database clients or secret logic.
Angular TransferState: Avoid Double Data Fetching in SSR
TransferState is a key-value cache that bridges your Angular SSR server and the browser, preventing the client from re-fetching data the server already got. Use it to pass resolved API data from the server render to the client, avoiding wasted network calls.
Angular Incremental Compilation: Faster Rebuilds
Angular's incremental compilation avoids full rebuilds by tracking changes, making performance proportional to what you changed, not the whole app. It speeds up development by reusing analysis and skipping file generation for unchanged code.
Framework Reactivity: Coarse vs. Fine-Grained Updates
Frameworks sync UI and state differently. Coarse-grained systems like React re-run component code, while fine-grained systems like Vue (Proxies) or Angular (Signals) track dependencies to update only what's needed.
Partial Hydration: Interactive Islands in a Static Sea
Partial hydration makes sites faster by treating interactive UI as "islands" in a sea of static HTML, loading JavaScript only where needed. It's ideal for content-heavy pages. The biggest challenge is managing state between these isolated interactive islands.
Svelte's Legacy immutable={true} Optimization
The immutable={true} option was a contract with the Svelte 3/4 compiler: you promise to never mutate data, and it uses fast referential checks for updates. It was a performance boost for immutable patterns.
Angular's ChangeDetectorRef: Manually Triggering Updates
Angular's ChangeDetectorRef is your manual override for change detection. Use it when updates from outside Angular's zone (like third-party libraries) don't refresh the UI. The footgun is overuse, which can mask performance issues or cause lifecycle errors.
Svelte Preprocessors: Write in Any Language
A Svelte preprocessor is a translator, converting code like TypeScript or SCSS into plain JS and CSS before compilation. This lets you use advanced tooling in .svelte files. The footgun is forgetting to configure it, leading to syntax errors.
Vue Plugins: Add App-Wide Functionality
A Vue plugin packages reusable logic to add features across your entire app, like a global toolbox. Use them for routing, state management, or making custom functions globally available.
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