Easy everything in Frontend Dev, page 10
Vuex: A Central Store for Your App's State
Vuex acts as a global warehouse for your app's shared data, letting any component access state without complex prop-drilling. It's for large apps where components need to sync up. The footgun: For new projects, use Pinia, Vue's new official state library.
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.
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.
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.
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'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.
Vue's v-model: Two-Way Binding Made Simple
v-model creates a two-way binding that synchronizes form inputs with your JavaScript data. Use it on any form element like an input or textarea. The footgun: it ignores initial HTML attributes; your JavaScript state is always the single source of truth.
Angular Structural Directives: Shape Your DOM
Structural directives shape your DOM by adding, removing, or manipulating HTML elements. Use *ngIf to show/hide a block or *ngFor to loop over a list. The footgun is forgetting the asterisk (*), which is critical syntactic sugar for a more complex template.
Vue's v-if vs. v-show: When to Use Which
v-if adds or removes elements from the DOM; v-show just hides them with CSS. Use v-if for conditions that rarely change (like admin access) and v-show for frequent toggles (like a dropdown menu), as it has a lower toggle cost.
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.
Vue Custom Events: Child-to-Parent Communication
Think of $emit as a child component sending a flare up to its parent. It's how children report actions upwards, reversing the top-down flow of props. Use it to trigger parent state changes, like closing a modal. The footgun: events don't bubble.
Svelte Props: Passing Data with `export let`
In Svelte, export let turns a variable into a prop, letting a parent component pass data down. It's how you pass a userName to a ProfileCard component. The footgun: forgetting export creates a private variable, not a prop, so data isn't received.
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.
Vue Component Props: Passing Data Downstream
Think of props as a component's 'arguments.' They let a parent pass data down to a child, making it reusable. Use them to pass dynamic data like a user's name to a profile card. The footgun: never mutate a prop directly inside the child component.
Vite's HMR API: Manually Controlling Hot Reloads
Vite's HMR API lets a module handle code changes without a full reload. While frameworks usually manage this, you can use it for custom tooling. The footgun: forgetting to wrap HMR code in if (import.meta.hot) will crash your production build.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles