Interview questions in Frontend Dev, page 2
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.
How does Svelte update the DOM without a Virtual DOM?
This tests compile-time versus runtime framework architecture. A strong answer says Svelte compiles components into imperative JS that surgically updates the DOM when reactive state changes. A red flag is claiming it uses a hidden VDOM or dirty checking.
Key differences: type alias vs interface for object shapes
Tests your grasp of TypeScript extensibility and declaration merging. Contrast interfaces' extends and open merging against type aliases' unions, intersections, and primitives; prefer interfaces for public APIs and types for unions or mapped types.
What is a React Fragment and why use it over a div?
This tests JSX semantics and DOM hygiene. A strong answer says Fragments group children without wrapper nodes, preventing extra DOM and invalid HTML like divs in tables. A red flag is citing performance without mentioning DOM structure or semantics.
How would Angular vs Vue philosophies influence your large-scale architecture choice?
Tests mapping philosophy to team scale. Contrast Angular's opinionated batteries-included tooling and two-way binding with Vue's progressive incremental adoption and Composition API; pick Angular for standards or Vue for flexibility.
Create a generic getProperty using generics and keyof
Whether you can constrain a generic key with keyof and return the exact property type. Use T for the object and K extends keyof T for the key, returning T[K].
Explain prop drilling and why it's a problem
Tests coupling in deep React trees. Good answers define prop drilling as forwarding props through unused intermediaries, cite coupling and refactor pain, and name Context or composition as fixes. Red flag: calling props bad or jumping to Redux without Context.
How is CSS specificity calculated for a complex selector?
This tests ID-CLASS-TYPE algorithm fluency. A strong answer gives the three-column tally, counts IDs, classes or attributes, and types in order, and notes combinators add zero. A red flag is counting combinators or mixing inline styles into selector scores.
Svelte compiler downsides vs Vue and Angular runtime
Tests compile-time versus runtime trade-offs in large apps. Strong answers address dynamic component limits, plugin friction, build scalability, and migration cost. Red flag: claiming Svelte has no runtime or that dynamic components are impossible.
What is a type predicate? Write a custom type guard for User.
Tests if you know a type predicate is a compile-time narrowing hint requiring runtime validation. Great answers define parameter is Type, validate every User property, and demonstrate narrowing. Red flag: omitting runtime checks or using as casting.
Write the React.createElement() equivalent for this JSX
Tests JSX-to-JS compilation mechanics. Answer: createElement('a', {href: '/home', className: 'link'}, 'Go Home'). Children must be the third argument, not inside props. Red flag: nesting children in props or using an unquoted tag variable.
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.
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.
ng serve purpose and fundamental difference from ng build
Ng serve compiles in memory and serves via a dev server with live reload, while ng build writes output to dist/.
What is the fundamental difference between window and document?
Window is the browser tab and global scope; document is the object-oriented DOM representation of the loaded page.
How does React use keys in reconciliation? When do keys cause bugs?
Tests reconciliation identity semantics. Answer: keys give scoped identity for O(n) diffing; stable keys preserve state, but indices during reordering make React reuse DOM nodes wrongly, polluting state. Red flag: saying keys are 'just for performance'.
Why does create-vue ask about Pinia and Vitest during scaffolding?
Tests knowledge of Vue's lean core and modular tooling. Good answers note that create-vue conditionally installs deps, scaffolds folders like src/stores or tests/, and pre-configures Vite so you skip manual wiring.
What happens when you declare var globally versus let or const?
Knowledge that var creates a Window property while let and const do not. A good answer notes var adds window.x, let/const do not pollute the global object, yet both are globally scoped.
Can you pass a React component as a prop? Explain Render Props.
Tests React composition. Yes, functions and JSX are valid prop values. Strong answers explain inversion of control, contrast with children, and cite dynamic layouts. Red flag: conflating render props with HOCs or saying props only accept primitives.
Set paragraph text blue and background light grey, compare HEX, RGB, HSL
Set color and background-color; HEX is compact, RGB is explicit, HSL is intuitive for lightness/hue.
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