All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8668 bites
Page 249
Shadow DOM: Encapsulating Styles and Structure
Shadow DOM walls off a component's HTML and CSS from the rest of the page. Like a browser's <video> player, its internal controls are isolated, preventing your site's CSS from breaking them.
Angular Component Styles: Scoped by Default
Angular styles are scoped to their component by default, preventing one component's styles from accidentally breaking another. This lets you build reusable UI pieces without style conflicts. The footgun is using ::ng-deep, which breaks this isolation.
Svelte Scoped Styles: CSS That Can't Leak
Svelte styles are like house rules; they only apply inside that component and don't affect the neighbors. This is the default for any <style> tag in a .svelte file, preventing CSS conflicts.
Vue Scoped CSS: Keep Your Styles Local
Vue's Scoped CSS prevents styles from leaking out of a component. It adds a unique data attribute to your component's HTML and rewrites CSS to target it, ensuring styles only apply locally.
Svelte Derived Stores: Reactive Values from Other Stores
A Svelte derived store is like a spreadsheet formula for your state. It listens to other stores and automatically computes a new value whenever they change. The footgun is trying to write to it—it's read-only; you must update its sources instead.
Pinia: Vue State Management That Feels Like Components
Pinia makes global Vue state feel like a component's local data. Create small, independent, type-safe stores for sharing data like user sessions or settings, avoiding complex prop drilling.
Vue Watchers: Running Code on State Changes
Vue watchers are tripwires for your data. When a specific piece of state changes, a watcher executes code, like fetching data from an API. Use them for side effects, not for deriving new values. The footgun is using a watcher where a computed property would.
ngOnChanges: Reacting to Input Property Changes
The ngOnChanges hook is a property watcher for child components, firing when a parent changes an @Input() value. It's used to trigger logic when specific data changes.
Svelte Stores: State for Async Streams & Legacy Apps
Svelte Stores are objects for sharing reactive state. While Svelte 5's runes ($state) are now preferred for simple state sharing, stores remain ideal for complex async streams or when you need manual control over updates.
Vue Computed Properties: Derived Values for Cleaner Templates
A Vue computed property is a reactive 'formula' that derives its value from other data. Use it to move complex logic out of your templates, keeping them clean and readable.
ref() vs. reactive(): Vue's Two Flavors of Reactivity
ref() is a box for any value (primitive or object) that you must access with .value. reactive() is a proxy for objects only, which you access directly. Use ref() for single values, reactive() for grouping data. The footgun: reactive() fails on primitives.
Svelte's Reactive Assignments with `$: `
Think of Svelte's $: as a magic label that automatically re-runs code when its inputs change. It's used to create derived values, like $: sum = a + b. The footgun: the compiler only tracks direct dependencies, not those hidden inside function calls.
Svelte Lifecycle: Mount, Destroy, and Tick
Svelte 5 simplifies the component lifecycle to just two events: creation (onMount) and destruction (onDestroy). Use onMount for DOM setup and return a cleanup function from it. The cleanup only works if the main callback is synchronous, not async.
Angular Component Lifecycle Hooks
Angular's lifecycle hooks are callbacks for a component's life events: creation, updates, and destruction. Use ngOnInit for one-time setup after inputs are ready, and ngOnChanges to react to input changes. The footgun: don't use the constructor for setup.
Vue Lifecycle Hooks: Running Code at the Right Time
Vue lifecycle hooks are your cues to run code at specific moments in a component's life. Use onMounted to fetch data or onUnmounted to clean up timers. The main footgun is that hooks must be registered synchronously during setup, not in an async callback.
Svelte's `{@html}` and `{@debug}`: When to Use Them
Svelte's {@html} and {@debug} offer powerful but risky escapes. {@html} renders raw HTML strings, while {@debug} acts like a debugger statement in your markup. Use them for trusted content and dev-time inspection.
Vue Dynamic Components: Swap Components on the Fly
Use Vue's <component :is="..."> element to render different components based on a state variable, like swapping views in a tabbed interface. The footgun: components are destroyed on switch; use <KeepAlive> to preserve their state and avoid losing user…
Vue Template Refs: Reaching Past the Virtual DOM
Vue template refs give you a direct handle to a DOM element, bypassing the declarative model. This is for tasks like programmatically focusing an input or initializing a 3rd-party library. The main footgun: the ref is null until the component has mounted.
*ngFor trackBy: Smarter DOM Updates in Angular
*ngFor's trackBy tells Angular how to uniquely identify items in a list. This prevents it from destroying and recreating the entire list in the DOM on every data update, instead allowing it to reuse existing elements.
Vue List Rendering: Why `key` is Not Optional
Think of key as a license plate for each item in a list. Without it, Vue just repaints items in order. With key, Vue tracks and preserves each item's state across re-renders. This is vital for dynamic lists with stateful components, like form inputs.