Intermediate concepts in Frontend Dev, page 6
VeeValidate: Vue Forms Without the Boilerplate
VeeValidate manages the entire lifecycle of a Vue form—tracking values, validation, and submissions—so you don't write the state boilerplate. Use it for simple contact forms or complex wizards, especially with async validation. The footgun is mixing its APIs.
CSS Modules: Local Scope for Your Styles
CSS Modules treat your styles like local variables. Instead of a global stylesheet, each CSS file is scoped to the component that imports it, preventing name collisions in component-based apps.
CSS-in-JS: Scoped Styles via JavaScript
CSS-in-JS lets components own their styles in JavaScript, generating CSS and injecting it into the DOM at runtime. It prevents global namespace collisions in component frameworks. The footgun is runtime overhead and bigger bundles.
The Headers Object: A Safer Way to Manage HTTP Headers
The Headers object is a specialized map for HTTP headers that handles sanitization for you. Use it with the Fetch API to build requests or read response headers. The footgun: headers from a fetch() response are immutable and will throw an error if you try.
Styled Components: CSS-in-JS as Components
Think of your styles as React components. Styled Components uses JavaScript template literals to write CSS in your JS, creating components with encapsulated styles. It's ideal for building design systems where styles change based on props.
TypeScript `infer`: Create a Self-Typing Fetch Wrapper
Use TypeScript's infer to build one fetch wrapper that automatically knows the correct request/response types for every endpoint. It's essential for type-safe calls to APIs with a defined schema.
Tailwind CSS: Styling Directly in Your HTML
Tailwind CSS lets you build designs by composing utility classes like flex and pt-4 directly in your HTML. This avoids context-switching for rapid UI development. The main footgun is creating verbose, unreadable markup if not managed well.
URLSearchParams: Safely Build and Parse URL Queries
Think of URLSearchParams as a structured object for a URL's query string, saving you from messy string manipulation. Use it to read incoming parameters or build a query for a fetch request. The footgun: get() only returns the first value for a key.
Scoped CSS: Styling Components Without the Cascade Mess
@scope fences off your CSS, applying styles only within a specific part of the DOM. This lets you style a component without your rules leaking out or clashing with global styles.
AbortController: Cancel In-Flight Web Requests
AbortController is a remote kill switch for web requests. You create a controller, pass its signal to a fetch call, and can then call abort() to cancel it. Use it to stop requests when a user navigates away. The footgun is forgetting this signal.
Redux Toolkit: `createSlice` Bundles Your Redux Logic
createSlice bundles a piece of state, its reducers, and action creators into one unit, killing Redux boilerplate. Use it to organize your store by feature. The footgun: its "mutating" syntax only works here due to Immer, not in plain Redux.
Jotai Derived Atoms: Computed State from Other Atoms
Think of a derived atom like a spreadsheet formula: its value is computed from other atoms. Use it for reactive values like a cart total from item prices. The footgun: the get in your read function is reactive, but the get in your write function.
TanStack Query: Managing Server State, Not Client State
TanStack Query manages asynchronous server state, not client-side UI state. It treats server data as a cached resource. Use it to fetch, cache, and update remote data automatically. The footgun is using it for synchronous client state like form inputs.
Sass Mixins: Reusable Style Functions
Think of a Sass mixin as a function for CSS. It bundles style declarations you can reuse, avoiding repetitive code. Use it for common patterns like button styles or clearing floats. The footgun: mixins copy code everywhere, which can bloat your final CSS.
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.
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