🌐 Frontend Dev

Typing `fetch` Responses in TypeScript

The fetch promise resolves to a generic Response, not your typed data. You must first parse the body with .json(), then assert the type of the resulting data. This is essential for all API calls.

Bundle Analysis: An X-Ray for Your App's Weight

Bundle analysis is an X-ray for your compiled JavaScript, showing which libraries contribute to your app's final size. Use it to diagnose slow loads by finding large or duplicated dependencies. The footgun: focus on gzipped size, not raw size.

CSS Custom Properties: Variables for Your Stylesheet

CSS Custom Properties are variables for your stylesheet. Define a value like --primary-color once on :root and reuse it with var(), making global theme changes easy. The main footgun: they only work for property values, not names or selectors.

Promise Cleanup with .finally()

Promise.finally() is the try...catch...finally for async code, guaranteeing logic runs after a promise settles. Use it to hide a loading spinner or close a network connection without duplicating code in .then() and .catch().

Next.js SSG: Pre-render Pages for Maximum Speed

Next.js's Static Site Generation (SSG) pre-renders pages into static HTML at build time, serving them instantly from a CDN. It's ideal for content that rarely changes, like blog posts, ensuring top performance. The main pitfall is serving stale data.

Utility-First CSS: Style Directly in Your Markup

Utility-first CSS styles elements with many small, single-purpose classes directly in your HTML. It's used for rapid prototyping and component-based systems. The footgun is creating verbose, repetitive markup by not extracting common patterns into components.

SvelteKit Form Actions: Server-Side Logic for Forms

SvelteKit Form Actions link HTML forms directly to server-side code, handling submissions without client-side boilerplate. They're perfect for logins or registrations and work without JavaScript.

Fetch API: Making Basic Network Requests

The Fetch API is like ordering from a catalog: you give it a URL and get a promise of delivery. It's used to load data from APIs without a page reload. The footgun: the promise resolves even on HTTP errors (like 404); you must check.

Tree Shaking: Shipping Only the Code You Use

Tree shaking is a build step that eliminates unused code from your final bundle. Bundlers like webpack use it to shrink JavaScript files by removing functions you import but never call.

SMACSS: A Naming Convention for CSS Scalability

SMACSS organizes CSS into five categories to prevent spaghetti code. It's a naming convention and thought process, not a library you install. It's used in large codebases where teams need a shared vocabulary for styling components.

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.

easy1 min read

Configuring Fetch Requests with `RequestInit`

RequestInit is the options object that customizes a fetch call beyond a simple GET. Use it to specify the HTTP method, send a request body, set headers, and control caching. A common footgun is sending a JSON body without setting the Content-Type header.

Measure Component Render Costs with <Profiler>

React's <Profiler> is a stopwatch for your components, measuring render times programmatically. Wrap any UI tree to log detailed performance metrics on every update, helping you pinpoint slow renders. The footgun: It's disabled in production by default.

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.

Angular Custom Validators: Beyond Built-in Rules

Custom validators let you define your own business logic for form inputs. Use them to check for unique usernames via an API or enforce complex password rules. The main footgun is forgetting async validators must return an Observable or Promise.

Fetch API Errors: Why a 404 is a 'Success'

A fetch() call only fails on network errors, not on HTTP errors like 404. You must check the response.ok property to see if the request was successful. The footgun is assuming a catch block will handle a 404; it won't.

ISR: Static Speed with Dynamic Freshness

ISR offers the speed of a static site with the freshness of a server-rendered one. It serves a cached page, then regenerates it in the background after a set time, making it ideal for blogs or e-commerce sites.

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.