Intermediate concepts in Frontend Dev, page 4
Integrating Sass/SCSS in Next.js
Next.js has built-in Sass support, letting you use variables, mixins, and nesting. Import .scss files for component-scoped styles or global stylesheets. The main footgun: you must install the sass package yourself; it's not included by default.
Emotion: Component-Scoped Styles in JavaScript
Emotion lets you write CSS directly in your JavaScript, keeping styles and logic colocated. It's ideal for dynamic, component-scoped styles in React that avoid global conflicts.
TypeScript Class Access Modifiers
Access modifiers are like privacy settings for class members, controlling what code can see them. Use public (default), private (class-only), and protected (class and subclasses) to enforce encapsulation.
Relative CSS Units: rem vs. em
Relative CSS units like rem and em tie element sizes to font size for scalable UIs. rem is relative to the root font size, providing consistency. em is relative to the parent, causing sizes to compound. The footgun is accidentally nesting em units.
Viewport Units: Sizing Against the Browser Window
Viewport units (vw/vh) size elements relative to the browser window, not their parent container. 1vw is 1% of the viewport's width. Use them for full-screen hero sections or typography that scales with the browser. A common footgun: 100vw causes overflow.
ref() vs. reactive(): Vue's Two Flavors of Reactivity
ref() is a box for any value (primitive or object) that you must access with .value. reactive() is a proxy for objects only, which you access directly. Use ref() for single values, reactive() for grouping data. The footgun: reactive() fails on primitives.
Nested Routes: Composing UI with <Outlet>
Nested routes build layouts with shared UI, like a sidebar. The <Outlet> component is a placeholder for changing content, perfect for dashboards. The footgun is forgetting the <Outlet> in the parent route; child routes will match the URL but won't render.
The <picture> Element: Art Direction for Images
The <picture> element provides art-direction for images, letting the browser pick the best source file. It's used to serve different images for various screen sizes, resolutions, or formats, improving performance and user experience.
Vue Computed Properties: Derived Values for Cleaner Templates
A Vue computed property is a reactive 'formula' that derives its value from other data. Use it to move complex logic out of your templates, keeping them clean and readable.
Next.js Dynamic Routes: Pages on Demand
Think of dynamic routes as a page template. You create one file like [slug].js to generate unlimited unique pages for things like blog posts or products. The footgun is forgetting to handle non-existent slugs, which can crash your app.
srcset and sizes: Responsive Images in HTML
Give the browser a menu of images with srcset and tell it how much screen space the image will take with sizes. The browser then picks the most efficient option for the user's device. The footgun is forgetting sizes, which makes the browser assume 100vw.
Svelte Stores: State for Async Streams & Legacy Apps
Svelte Stores are objects for sharing reactive state. While Svelte 5's runes ($state) are now preferred for simple state sharing, stores remain ideal for complex async streams or when you need manual control over updates.
useRouter: Programmatic Navigation in Next.js
The useRouter hook gives you a router object to programmatically control navigation. Use it for event-driven redirects, like sending a user to their dashboard after a successful login.
CSS object-fit: Control How Images Fill a Box
object-fit tells an image how to behave inside a container with a different aspect ratio, preventing distortion. Use it for responsive hero images or product grids. The default is fill, which stretches the image; you almost always want cover or contain.
ngOnChanges: Reacting to Input Property Changes
The ngOnChanges hook is a property watcher for child components, firing when a parent changes an @Input() value. It's used to trigger logic when specific data changes.
The DOM's Inheritance Chain: EventTarget > Node > Element
Every HTML element is a stack of types: an EventTarget for events, a Node for tree structure, and an Element for common attributes. This lets you write type-safe DOM code, knowing a div has properties from all its ancestors.
React Hook Form: Faster Forms with Less Code
React Hook Form builds performant forms by using uncontrolled inputs, avoiding re-renders on every keystroke. It's ideal for complex forms where managing state with useState becomes slow. The main footgun: overuse of watch() can negate performance gains.
Strongly-Typed Event Listeners in TypeScript
TypeScript turns addEventListener's magic strings into a compile-time checked dictionary. It knows a button has a "click" event, preventing typos and inferring the event object's type.
Formik: Taming React Form State
Formik is a state machine for your React forms, managing values, errors, and visited fields without providing UI. Use it to avoid boilerplate for validation and submission. The footgun is fighting its design by trying to integrate it with global state stores.
Zod: Validate Data, Infer Types
Zod acts as a bouncer for your data, validating it against a schema you define and inferring TypeScript types automatically. It's essential for validating API inputs or form submissions. The main footgun is forgetting to enable "strict": true in your tsconfig.
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