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.
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.
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.
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.
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.
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.
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.
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()`.
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.
The Promise Constructor: Wrapping Old Callbacks
The `Promise` constructor turns old callback-style functions into modern promises you can `await`. Use it to "promisify" APIs like `setTimeout` that don't return promises. The footgun is wrapping already-promise-based code, creating unnecessary complexity.
The Promise Object: A Placeholder for Future Values
A Promise is an IOU for a value from an async operation, like a network request. It's a placeholder that will eventually hold a result or an error. Use it for fetching data or reading files. The footgun: always add a `.catch()` to handle failures.
currentTarget vs. target: Who's Listening vs. Who Shouted
event.currentTarget is the element listening for an event, while event.target is the element that triggered it. This is vital for event delegation patterns. Be careful: currentTarget is only valid inside the handler and becomes null afterward.
The FormData API: From HTML Forms to Typed Objects
FormData serializes an HTML form into key/value pairs for `fetch`. In TypeScript, its main footgun is that `get()` returns a generic `string | File | null`, requiring you to validate and cast the data before using it safely.
The DOM's Inheritance Chain: EventTarget > Node > Element
Every HTML element is a stack of types: an EventTarget for events, a Node for tree structure, and an Element for common attributes. This lets you write type-safe DOM code, knowing a `div` has properties from all its ancestors.
Accessing data-* Attributes with `dataset`
The `dataset` property is a live map of an element's `data-*` attributes. It automatically converts HTML `data-user-id` to `element.dataset.userId` in JS, perfect for storing state. The footgun: name conversion is lossy; HTML attributes are always lowercased.
History API: Change URLs Without Page Reloads
The History API lets you manipulate browser session history, enabling single-page app (SPA) routing without full page reloads. It's used to create "virtual" pages by changing the URL and state.
Smooth Animations with requestAnimationFrame
Sync your code to the browser's repaint cycle for smooth, efficient animations with `requestAnimationFrame`. Use it for any visual change over time, like moving an element or running a game loop.
The JavaScript Event Loop: Asynchronicity on a Single Thread
The event loop is a queue that lets single-threaded JavaScript handle asynchronous tasks without blocking. It processes callbacks from Web APIs like `fetch` or `setTimeout` one at a time. The footgun: `setTimeout(fn, 0)` doesn't run instantly, just next.
DOM Traversal: Navigating the HTML Tree
DOM traversal is navigating a family tree of HTML nodes. You move between elements using properties like `parentNode` and `nextSibling`. This is key for finding elements relative to a known start point.
DOM Manipulation: Treating Your Webpage Like a Live Object
The DOM is a live tree of your webpage's HTML. DOM manipulation is how JavaScript changes that tree—adding, removing, or updating elements. This is key for all interactive web development. The footgun: direct, frequent manipulation is slow.