Concepts in Frontend Dev, page 15
user-event vs. fireEvent: Testing Real User Interactions
user-event tests how users actually interact with your UI, not just isolated DOM events. It simulates a full action sequence, like a click firing pointerdown, mousedown, and click. Use it to test component behavior from a user's perspective.
Sass Modules: Using @use for Clean, Scoped Styles
Think of @use as importing a JavaScript module. It loads Sass variables and mixins into a private namespace, preventing global style conflicts. Use it to structure large CSS codebases by breaking styles into logical partials.
Vue Dynamic Routes: Using Parameters
Dynamic routes use one component for many URLs, like a User page for /users/johnny and /users/jolyne. Define a path with a param like /users/:id and access its value via $route.params.id.
Jest Mocks: Spies for Your Functions
A Jest mock is a spy that watches a function, recording calls without running the original logic. This lets you isolate code under test, verify interactions like callbacks, and control return values. The footgun is assuming mocks run real logic—they don't.
Sass @extend: Inherit Styles, Not HTML Classes
@extend lets one selector inherit styles from another, grouping them in the final CSS without adding classes to your HTML. Use it for modifier classes to keep markup clean. The footgun: overusing it can generate long, complex selectors, bloating your CSS.
Nested Routes: Mapping URLs to Component Trees
Nested routes map URL segments to components inside other components, like a sub-page within a main layout. This is common for user dashboards with sections like 'profile' and 'settings'. The footgun is forgetting the child router outlet.
Handling Asynchronous UI with Testing Library
Your test shouldn't race your UI. Use async helpers to wait for elements to appear, disappear, or change after an event. This is crucial for testing components that fetch data. The footgun is forgetting await on findBy or waitFor calls.
PostCSS: The 'Babel for CSS' Transformer
PostCSS is like Babel for CSS, transforming styles with JavaScript plugins. Use it to add vendor prefixes, enable future CSS features, or lint styles. The footgun: it's not a preprocessor like Sass, but a tool that enhances CSS, often used alongside it.
Navigation Guards: Vue's Route Bouncers
Think of navigation guards as bouncers for your app's routes. They intercept route changes to check permissions or fetch data before rendering a page. The old next() callback is a trap; accidentally calling it twice can break navigation.
Snapshot Testing: Lock In Your UI's Rendered Output
Snapshot testing catches unintended UI changes by comparing a component's rendered output to a saved 'golden' version. Use it to ensure UIs don't break during refactors. The biggest footgun is blindly updating snapshots, which can approve bugs as correct.
Stylelint: Your CSS Guardian for Rules, Not Just Formatting
Stylelint is a linter that guards your CSS logic and conventions, not just its formatting. Use it to catch errors like misspelled properties or enforce team rules. The footgun is confusing it with a formatter; Stylelint enforces rules, Prettier handles style.
File-Based Routing: Your Filesystem is Your API
File-based routing makes your directory structure the single source of truth for your app's URLs. Creating a file at routes/about/+page.svelte automatically creates the /about page, no central config needed.
Cypress for End-to-End Testing in Next.js
Cypress is a framework for end-to-end testing of Next.js applications. It's presented as a primary option in the official docs, alongside tools like Playwright and Vitest, for automating tests that simulate real user interactions in a browser.
Sass Functions: Reusable Logic for Your Styles
Sass functions are like JavaScript functions for your CSS, letting you compute and return a single value. Use them to centralize complex logic, like generating a color palette. The footgun: don't use functions for side-effects; that's what mixins are for.
Angular: Reading URL Query Parameters
Angular gives you two ways to read URL query params: a static snapshot for the initial value, or a queryParams Observable for live updates. Use it for values like ?search=term.
MSW: Mock APIs at the Network Layer
Mock Service Worker intercepts API calls at the network level using a Service Worker, so your app makes real requests. Use it for consistent mocking in development, testing, and Storybook.
Sass Built-in Modules: Namespaced Power Tools
Think of Sass built-in modules as namespaced toolkits for color, math, and more. You explicitly import what you need, like using sass:color for theming. The footgun is relying on old global functions, which ties you to legacy Sass implementations.
Vue Route Animations: Animating Page Changes
Animate between pages by wrapping your router view in a <transition> component, giving your SPA the feel of a native app. This is used for sliding or fading effects during navigation.
Indexed Access Types: Look Up a Property's Type
Indexed access types let you look up a property's type on another type, like Person['age'] yielding number. Use them to create new types from existing ones, like getting an array element's type with MyArray[number].
cy.intercept: Control Network Traffic in Cypress Tests
cy.intercept acts like a programmable proxy in your Cypress tests, letting you watch, modify, or fake network requests. Use it to test loading states or error handling without a live backend. Footgun: intercepts are cleared before each test, not just once.
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