Everything in Frontend Dev, page 2
Promise .catch() versus async/await try...catch
.catch() handles rejection for all preceding chain steps and reads functionally; try/catch reads synchronously and can scope errors per await, but only catches awaited rejections.
Implementing the Singleton pattern in TypeScript
Private constructor blocks new, a static private instance field caches it, static getInstance lazily creates and returns the one instance.
Understanding this in TypeScript
In TypeScript, this is determined by how a function is called, not where it is defined; arrow functions capture the enclosing this lexically, and TypeScript adds optional this parameters to type-check the expected context at compile time.
Purpose of Outlet in React Router v6 nested routes
Outlet renders the matched child route inside a parent layout, enabling shared chrome with swappable content; configure nested routes and place Outlet where children render.
Tearing and useSyncExternalStore in concurrent React
Tearing is inconsistent UI when an interruptible render reads a changed external store mid-pass; useSyncExternalStore subscribes and forces consistent snapshots, re-rendering synchronously on change.
Session auth in Next.js with API routes and middleware
Login route sets a signed httpOnly cookie, middleware validates the session at the edge and redirects, server components read the session.
localStorage vs httpOnly cookie for auth tokens
LocalStorage is JS-readable so XSS steals it; httpOnly cookies are JS-invisible blocking XSS theft but exposed to CSRF, mitigated by SameSite and tokens.
Testing a component that consumes React Context
Render inside the Context.Provider with a value, or omit it to exercise the default; use a custom render wrapper for reuse.
Runtime CSS-in-JS performance pitfalls in SSR Next.js
Runtime libs serialize styles per render, need style collection on the server, risk FOUC and double work in App Router.
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.
Multi-theme infrastructure for a component library
Style components against semantic tokens exposed as CSS custom properties, define per-theme token values, and switch at runtime via a data-theme attribute or class.
Monorepo tradeoffs for a design system
Monorepos give atomic cross-package changes, shared tooling, and easy local linking; drawbacks include build complexity, CI scaling, and tighter coupling.
Component variants with BEM modifier classes
A base block class holds shared styles, modifier classes (block--primary, block--destructive) layer only the differences, and you combine base plus one modifier.
Core tokens versus alias semantic tokens
Core tokens are raw values like blue-500; alias tokens reference cores with intent like color-action; semantic aliasing decouples meaning from raw value.
CSS transition versus animation
Transitions interpolate between two states triggered by a change; animations use keyframes for multi-step, looping, autonomous motion.
CSS Grid versus Flexbox fundamentals
Flexbox is one-dimensional (a single row or column), Grid is two-dimensional (rows and columns together); use Grid for page layout, Flexbox for a toolbar of items.
Brand color as a token and CSS custom property
Define a typed color token in JSON, generate a custom property like --color-brand-primary, then reference it with var().
Fixing brand color contrast at the system level
Build a tonal palette with known contrast steps, define semantic text-on-surface token pairs that pass AA, and enforce with automated contrast checks.
Distributing design tokens across web, iOS, and Android
Keep one source-of-truth JSON, transform with a tool like Style Dictionary, emit per-platform formats (CSS vars, Swift, XML) in CI.
Designing a Card component's configurable API
Expose content via composition (slots/children), expose constrained variants as enums, lock spacing and brand tokens.
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