🌐 Frontend Dev

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.

Zod: TypeScript-First Schema Validation

Zod creates a single source of truth for your data's shape, providing both runtime validation and static TypeScript type inference from one definition. Use it to parse API inputs or form data, ensuring data is correct and typed.

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.

Redux: Actions are Events, Reducers are Event Handlers

Redux Actions are events describing *what* happened (e.g., 'task added'), while Reducers are functions that specify *how* state changes in response. This pattern is central to managing global state. The biggest footgun is mutating state directly in a reducer.

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.

Vuex: A Central Store for Your App's State

Vuex acts as a global warehouse for your app's shared data, letting any component access state without complex prop-drilling. It's for large apps where components need to sync up. The footgun: For new projects, use Pinia, Vue's new official state library.

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.

Using Angular Services for Simple State Management

An Angular service acts like a central data store. Components subscribe to it for data, rather than owning state, keeping data consistent across views. It's ideal for sharing user info or cart contents.

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.

ITCSS: Structuring CSS from General to Specific

ITCSS organizes CSS from generic to specific, like an inverted triangle. It's for large projects to prevent specificity wars and make code predictable. The main footgun is not enforcing the layer order, which leads back to styling chaos and defeats the system.

Angular HttpClient: Your App's API Connector

Angular's HttpClient turns network requests into RxJS Observables. Use it to fetch data or submit forms. The footgun: a request is never sent until you subscribe to the Observable it returns, a common mistake for beginners.

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.

Critical CSS: Render Above-the-Fold Content Instantly

Critical CSS accelerates rendering by inlining styles for above-the-fold content directly in the HTML. This lets the browser paint the visible page immediately, while the full stylesheet loads asynchronously.

SvelteKit's `load` Function: Pre-fetch Data for Pages

Think of SvelteKit's load function as a gatekeeper for your page, fetching data *before* it renders. It's used to grab data from an API or route params, like fetching a blog post. The footgun: load in +page.js runs on both server and client.

The Fetch API's Request Object

The Fetch API's Request object is a blueprint for an HTTP call, bundling URL, method, headers, and body. It's key for intercepting traffic in service workers or building reusable fetches. The main footgun: its body is a stream that can only be read once.

State Normalization: Treat Your Store Like a Database

Treat your Redux state like a database. Instead of nesting related data, flatten it into separate 'tables' keyed by ID. This simplifies updates and prevents unnecessary re-renders. The footgun is storing API data as-is, creating update bugs.

Design Tokens: A Standardized Language for Your UI

Design tokens are named variables for your UI's visual properties, stored in a central format like JSON. They enable consistent branding and theming across platforms (web, iOS) and tools (Figma, code).