🌐 Frontend Dev

React Refs: An Escape Hatch for DOM Manipulation

A ref is an escape hatch to directly access a DOM node, bypassing React's declarative state flow. Use it for imperative actions like focusing an input or scrolling to an element. The footgun: overusing refs can conflict with React's rendering.

CSS `will-change`: A Performance Hint, Not a Magic Wand

will-change tells the browser which properties you'll animate, letting it optimize rendering ahead of time. Use it to fix jank in complex transitions, but never apply it preemptively—overuse wastes memory and can make performance worse.

Callback Hell: Navigating JavaScript's Async Pyramid

Callback Hell is the 'pyramid of doom' structure from nesting async functions. It happens when chaining I/O tasks like API calls, where each step depends on the last. The footgun is writing async code as if it runs sequentially, creating unreadable nests.

React.memo: Skip Unnecessary Component Renders

React.memo tells a component to skip re-rendering if its props are the same as last time. Use it to prevent costly renders when a parent updates. The footgun is passing new objects or functions as props, which breaks the default shallow comparison.

Hardware Acceleration: Getting Smooth CSS Animations

Use the GPU for smooth CSS animations by sticking to transform and opacity. This avoids costly CPU work like layout recalculations, keeping frame rates high. The footgun is animating properties like width or left, which cause jank.

Angular Template-Driven Forms: Logic in the HTML

Angular Template-Driven Forms put form logic directly in your HTML template. Using two-way data binding with [(ngModel)], they're great for simple scenarios like login or contact forms.

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.

React.lazy: Load Components On Demand

React.lazy tells your app: "Don't download this component's code until it's needed." It's a core tool for code splitting. Use it for below-the-fold content or modals to speed up initial load. The footgun: forgetting <Suspense> will crash your app.

CSS transform-style: Let Children Live in 3D Space

The transform-style property decides if an element's children are flattened onto its 2D plane or share a 3D space. Use preserve-3d to create nested 3D objects. Beware: properties like opacity < 1 or overflow will break the 3D context and flatten it.

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.

React Suspense: Manage Loading States Declaratively

React Suspense lets you declare a loading UI instead of manually toggling isLoading state. You wrap a component that fetches data and provide a fallback, letting React handle the switch. The footgun is that re-fetching can jarringly show the fallback again.

CSS Motion Path: Animate on a Curve

Think of offset-path as drawing a track for an element to follow. Use it for non-linear UI animations, like an icon following a curve. The footgun: the path itself doesn't cause motion; you must also animate offset-distance to move the element.

Component v-model: Two-Way Binding with defineModel

v-model on a component creates a two-way binding, letting a parent and child share and update data. The defineModel() macro is the modern way to enable this for custom form inputs. The footgun is that a default value can de-sync parent/child state.

TypeScript Generics: Writing Functions That Adapt to Types

TypeScript generics create functions with type placeholders, capturing an input's type to inform the output's. This is vital for reusable components that work on various data types.

React DevTools Profiler: Find Performance Bottlenecks

The React Profiler records how long components take to render, helping you find performance bottlenecks. Use it to diagnose slow interactions and see which components re-render too often.

Scroll-driven Animations: Animate on Scroll, Not Time

Scroll-driven animations link an animation's progress to a scrollbar's position, not a clock. This is great for progress bars that fill as you scroll or elements that fade in as they enter the viewport. The main pitfall is confusing timeline types.

Angular's Built-in Form Validators

Angular's built-in validators are pre-made rules for your forms. Use them to easily check for required fields, min/max length, and valid email formats. The footgun is confusing required for text inputs with requiredTrue, which is only for checkboxes.

List Virtualization: Render the Window, Not the World

Virtualization renders only the visible "window" of a long list, not the entire dataset. It's essential for performance in feeds or tables with thousands of rows.

OOCSS: Reusable Styles for Maintainable CSS

Treat CSS styles like building blocks. Object-Oriented CSS (OOCSS) separates an element's visual 'skin' (colors, borders) from its 'structure' (width, height). This lets you create reusable classes, reducing duplication for faster, maintainable stylesheets.