🌐 Frontend Dev

Conditional Types: Ternary Logic for Your Types

Conditional types are like a ternary operator for your type system, choosing a type based on a condition (T extends U ? X : Y). They're used with generics to make a function's return type depend on its input, avoiding cumbersome function overloads.

useSyncExternalStore: Safely Read from External State

useSyncExternalStore lets your React components safely subscribe to data outside of React's state. Use it to connect to state libraries like Zustand or browser APIs. The main footgun: your getSnapshot function must return an immutable, cached value.

CSS minmax(): Flexible Sizing for Grid Tracks

The minmax() function gives a grid track a minimum and maximum size, like a rubber band that stretches but won't snap. Use it in CSS Grid to create columns that grow with the viewport but never shrink below a readable width.

Angular Two-Way Binding: [(ngModel)]

Think of [(ngModel)] as a walkie-talkie for data, syncing a component property with a template view. It's used in forms where user input immediately updates a variable, and vice-versa. The footgun is overusing it, which creates tangled data flows.

TypeScript: Build New String Types with Template Literals

Template literal types are a factory for new string types, built from existing string literals and unions. They are perfect for generating permutations, like creating 'propChanged' event names from an object's keys.

useDebugValue: Label Your Custom Hooks in DevTools

useDebugValue attaches a readable label to your custom hooks in React DevTools. Instead of just seeing raw state, you can display a meaningful string like "Online". The footgun is overusing it; reserve it for complex, shared library hooks.

CSS aspect-ratio: Maintain Shape in Responsive Layouts

The aspect-ratio property sets a box's width-to-height ratio, making it maintain its shape as its container resizes. It's ideal for responsive video embeds or uniform grid items. The footgun: it has no effect if both width and height are fixed values.

Vue List Rendering: Why `key` is Not Optional

Think of key as a license plate for each item in a list. Without it, Vue just repaints items in order. With key, Vue tracks and preserves each item's state across re-renders. This is vital for dynamic lists with stateful components, like form inputs.

TypeScript: Typing Function Inputs and Outputs

Think of function types as a contract defining what data goes in and what comes out. This is core to TypeScript, ensuring functions are called correctly. The footgun is relying on return type inference, which can hide bugs if logic changes unexpectedly.

Typing React Component Props with TypeScript

Use TypeScript to define a 'contract' for your component's props with an interface or type. This catches bugs by ensuring data passed to a component has the correct shape. The footgun: files with JSX must use the .tsx extension.

CSS Grid: auto-fit vs. auto-fill

Create responsive grids without media queries. auto-fill creates as many columns as fit, leaving empty ones. auto-fit collapses empty columns, letting content stretch to fill the space. The footgun is using auto-fill when you want items to grow.

*ngFor trackBy: Smarter DOM Updates in Angular

*ngFor's trackBy tells Angular how to uniquely identify items in a list. This prevents it from destroying and recreating the entire list in the DOM on every data update, instead allowing it to reuse existing elements.

CSS Subgrid: Aligning Nested Grids

CSS Subgrid lets a nested grid borrow its parent's column or row tracks, solving the classic problem of aligning items inside components. This ensures elements within multiple cards, for example, line up perfectly.

Vue Template Refs: Reaching Past the Virtual DOM

Vue template refs give you a direct handle to a DOM element, bypassing the declarative model. This is for tasks like programmatically focusing an input or initializing a 3rd-party library. The main footgun: the ref is null until the component has mounted.

TypeScript Classes: Blueprints for Typed Objects

A TypeScript class is a blueprint for creating objects, adding type safety to JavaScript's object-oriented patterns. Use them for core data structures like a User. The main footgun is forgetting to initialize properties, which strict mode flags as an error.

Global vs. Component CSS in React/Next.js

Treat CSS like any other module. Import global styles (like resets or Tailwind) once in your app's entry point. For component-specific styles, import a CSS Module file directly into your component to keep styles scoped and prevent conflicts.

CSS Container Queries: Style Components, Not Just Pages

Container queries let components respond to their own size, not the viewport's. Use them for cards or sidebars that must adapt to different layouts. The footgun: you must first declare a parent as a "containment context" with container-type for it to work.

Vue Dynamic Components: Swap Components on the Fly

Use Vue's <component :is="..."> element to render different components based on a state variable, like swapping views in a tabbed interface. The footgun: components are destroyed on switch; use <KeepAlive> to preserve their state and avoid losing user…

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.