Frontend
450 bites tagged Frontend — interview questions with model answers, and 60-second explainers.
Using personas to drive technical decisions
Derive constraints like device, network, accessibility from personas; let them shape framework, payload shape, performance budgets. Connecting user context to engineering choices.
SVG icons versus icon fonts: technical trade-offs
SVG is vector markup, crisp, multicolor, accessible, and tree-shakeable; icon fonts ship as glyphs, risk anti-aliasing blur, accessibility hacks, and load-failure boxes. Advocate SVG for modern apps. Icon delivery trade-offs.
Limitations of Figma Dev Mode generated code
Dev Mode output is static, absolute-positioned, non-semantic, and ignores responsiveness, state, and your component system; use it for values and structure, then refactor to semantic, tokenized… Realistic handoff expectations.
What is JSX and how does the browser run it?
JSX is XML-like syntax compiled to React.createElement calls; it differs from HTML via className and camelCase; browsers never see JSX, only transpiled JS. Grasp of JSX as syntactic sugar.
Front-end performance budgets
A performance budget is an enforced limit on metrics like Core Web Vitals and bundle size, checked in CI to fail builds that regress. Performance governance.
Structuring Storybook stories for visual states
One named story per state with explicit args, plus argTypes and controls. organizing component documentation in an explorer. dumping every state into one story with manual prop toggling.
Clickable card: div onClick versus anchor tag
Use an a tag for navigation; it is focusable, keyboard-activatable, announced as a link, and supports open-in-new-tab; a div onClick loses all of that without manual ARIA work. semantic HTML and accessibility judgment.
Styling a parent with the :has() selector
:has() matches an element that contains or relates to a given selector, enabling upward styling; figure:has(figcaption) targets captioned figures. understanding of relational selection.
Native CSS nesting and the parent selector
Nest rules inside a block, descendant selectors combine implicitly, & references the parent and is required for compound or pseudo-class joins. knowledge of native nesting syntax.
Declaring and scoping CSS custom properties
Declare with --name, read with var(), :root makes it global while a class scopes it locally. understanding of custom property syntax and the cascade. thinking they behave like compile-time Sass variables.
Purpose of a design system for developers
A single source of truth of reusable components and tokens that ensures consistency, speeds delivery, and centralizes accessibility. why design systems exist. calling it just a component library or a style guide PDF.
Sass @mixin versus @extend
@mixin copies declarations into each caller, accepts arguments, and can duplicate code; @extend groups selectors sharing one rule via a comma list, reducing duplication but coupling selectors. how Sass features shape output.
What is nesting in Sass and its pitfall?
Nesting writes child rules inside parents mirroring structure, but deep nesting generates long descendant selectors with high specificity. ergonomic Sass authoring and its risks.
Sass variable versus CSS custom property
Sass $vars resolve at build time and vanish from output; CSS --vars live in the browser, cascade, inherit, and update at runtime. Use Sass for static config, custom properties for theming. compile-time versus runtime values.
What is a CSS pre-processor?
A pre-processor adds variables, nesting, mixins, functions, and partials, compiling its own syntax into plain CSS for the browser. basics of authoring tooling.
Using :is() and :where() to manage specificity
:is() groups selectors and takes its most specific argument's specificity, :where() does the same grouping but contributes zero specificity, ideal for easily overridable defaults. modern selector specificity control.
How custom properties enable dynamic theming
Custom properties cascade and resolve live, so redefining them on a scope or data attribute reskins everything via var(). runtime theming with CSS variables.
What are the two principles of OOCSS?
Separate structure from skin, and separate container from content; this lets visual themes and layout be mixed and reused independently. reusable CSS architecture thinking.
Explain the BEM naming convention
Block is a standalone component, Element is a child tied by double underscore, Modifier is a variant by double dash, keeping specificity flat. scalable CSS class naming.
What are CSS variable fonts?
One file encodes a continuous range along axes, cutting requests and bytes, controlled via font-weight, font-style, and font-variation-settings. modern web typography and performance.
What is a CSS containing block?
Containing block is the reference rectangle; static and relative use the nearest block ancestor's content box, absolute uses nearest positioned ancestor, fixed uses the viewport. how percentages and offsets are resolved in layout.
Pseudo-class versus pseudo-element in CSS
Pseudo-classes target an element in a state, pseudo-elements style a generated or sub-part using double colons, and ::before injects decorative content. precise CSS selector vocabulary.
Nuxt 4.4 Adds Custom Fetch Factories and Router v5
Nuxt 4.4 ships createUseFetch factories, Vue Router v5, and 28x faster dev route updates. Custom fetch instances with typed defaults cut API boilerplate, while the router upgrade drops unplugin-vue-router and clears the path for stable typed routes.
SvelteKit 2.56 overhauls remote functions, adds TypeScript 6.0
SvelteKit 2.56 overhauls remote functions with breaking changes to query refreshes, caching, and a new run() method, plus TypeScript 6.0 support. The Svelte CLI adds experimental community plugins. Audit your remote function calls before upgrading.
Get Frontend bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.