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.
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.
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.
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.
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.
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.
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.
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.
*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.
Svelte Slot Props: Child Informs, Parent Renders
Svelte slot props let a child component pass data up to its parent's slot. This is key for reusable list components where the child provides data for each item, but the parent controls the rendering. The footgun: the `let:` directive goes on the component tag.
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.
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.
Angular's input() Function: Passing Data to Components
Angular's input() function lets a parent pass data to a child, defining the child's public API. Use it to configure a component, like passing a `value` to a slider. The footgun: the returned signal is read-only; the child cannot modify its own input.
Vite's Dependency Pre-Bundling
Vite's dev server pre-bundles dependencies to accelerate local development. It converts CommonJS modules to browser-native ESM and merges packages with many files into one, preventing massive HTTP request chains.
SvelteKit Hooks: Intercepting Requests and Events
SvelteKit Hooks are like middleware, letting you intercept requests and events to run app-wide logic. Use them for tasks like authentication checks, initializing DB clients, or custom routing.
Vite's Low-Level SSR API
Vite's SSR API lets you run Vite as a middleware inside your own Node.js server, giving you full control over rendering. It's for building custom SSR solutions, often with Express. The footgun: most apps should use a higher-level SSR plugin, not this API.