🌐 Frontend Dev

React's Stale Closure Problem in Hooks

A useEffect closure captures props and state from its render. If the effect doesn't re-run, its functions can operate on old, "stale" data. This surfaces in timers or socket listeners. The footgun is omitting dependencies, which causes these subtle bugs.

Stacking Multiple Backgrounds in CSS

Think of CSS backgrounds as a stack of transparent sheets where the first image listed is on top. This lets you layer logos over gradients or combine patterns without extra HTML. The footgun: the first image in the code is the frontmost on screen.

Angular @Output(): Child Components Reporting Up

An @Output() lets a child component tell its parent something happened, using an EventEmitter. It’s the standard way to handle events like button clicks that the parent needs to act on. The footgun is forgetting to actually .emit() the event.

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.

useLayoutEffect: Synchronous Effects Before Browser Paint

useLayoutEffect is useEffect's synchronous twin, running its code after DOM mutations but before the browser repaints. Use it to read DOM layout and re-render to prevent visual flickers, like positioning a tooltip. Its main footgun: it blocks rendering.

Variable Fonts: One File, Infinite Styles

Variable fonts pack an entire typeface's variations—from thin to bold, condensed to wide—into a single file. This avoids multiple HTTP requests for different font weights, giving you a continuous range of styles with CSS.

intermediate1 min read

Handling Basic DOM Events in Svelte

Svelte handles DOM events with on:eventname syntax in your markup, linking elements to functions in your script. This is for user interactions within a component, not for parent-child communication. The footgun is confusing this with custom component events.

useImperativeHandle: Expose a Custom Ref API

useImperativeHandle exposes a custom API via a ref, letting a parent call specific methods on a child. Instead of exposing an entire DOM node, you can provide a handle with methods like reset() or focus().

CSS Filter: Photoshop-like Effects in the Browser

The filter property brings Photoshop-like graphical effects directly into CSS. Use it for image adjustments like blur() or contrast(), or for complex shadows with drop-shadow(). The order of chained filters matters, as they are applied sequentially.

Vue Slots: Projecting Content into Components

Think of a Vue slot as a picture frame: the child component defines the frame, and the parent provides the picture. This is used for reusable layouts or buttons where the structure is fixed but the content is dynamic.

CSS Blend Modes: Photoshop Effects in the Browser

Think Photoshop layer effects, but in CSS. Blend modes define how overlapping element colors interact—multiplying or screening them for rich effects. Use them for text knockouts on images or complex background textures.

Angular Content Projection with ng-content

ng-content creates a "slot" in a component's template, letting you project parent content into it. Use this for reusable wrappers like cards or dialogs. The key footgun: never use @if on ng-content, as the content is always rendered, even if hidden.

TypeScript's `typeof`: Get a Type from a Value

TypeScript's typeof operator grabs the static type from a runtime value, like a variable. It's essential for utilities like ReturnType, letting you derive a type from a function's implementation without duplicating definitions.

React's Controlled vs. Uncontrolled Components

A controlled component is a form input whose value is driven by React state; an uncontrolled component lets the DOM manage its own state. Use controlled for instant validation or conditional logic.

CSS clip-path: Break Out of the Box

Use clip-path to create non-rectangular layouts by defining a visible region, like a cookie cutter for your elements. It's perfect for complex UI shapes like chevrons or circles without extra image files. The footgun: complex shapes have tricky syntax.

Vue Provide/Inject: Skip Prop Drilling

Vue's provide/inject lets an ancestor component share data directly with any descendant, avoiding the tedious 'prop drilling' chain. Use it for app-wide data like user info or theme settings. The footgun: providing a simple value is not reactive by default.

backdrop-filter: Styling What's Behind an Element

Think of backdrop-filter as frosted glass for your UI. It applies graphical effects like blur to the content *behind* an element. It's ideal for overlays like modals or navigation bars to improve legibility.

Svelte Context API: Avoid Prop-Drilling

Svelte's Context API lets a parent component provide data to any descendant, avoiding 'prop-drilling'. It's ideal for sharing app-wide state like user info or themes. The key footgun: calling getContext without a parent setContext will throw an error.

CSS Flexbox: Mastering the Main and Cross Axis

Flexbox treats layout as a one-dimensional problem: either a row or a column. All alignment rules operate along a 'main axis' and a perpendicular 'cross axis'. Use it for navbars or card components.