🌐 Frontend Dev

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.

TypeScript Mixins: Building Classes from Reusable Parts

A mixin is a function that takes a class and returns a new one with added features, like bolting on a turbocharger. Use it to share behavior (e.g., logging) across unrelated classes.

intermediate1 min read

useRouter: Programmatic Navigation in Next.js

The useRouter hook gives you a router object to programmatically control navigation. Use it for event-driven redirects, like sending a user to their dashboard after a successful login.

CSS object-fit: Control How Images Fill a Box

object-fit tells an image how to behave inside a container with a different aspect ratio, preventing distortion. Use it for responsive hero images or product grids. The default is fill, which stretches the image; you almost always want cover or contain.

Protected Routes: Server Gates, Not Hidden Links

A protected route is a server-enforced gate, not a hidden link. In Next.js, middleware or server components validate sessions before HTML ships, which matters for dashboards and billing.

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.

Type-Safe DOM Selection in TypeScript

TypeScript knows DOM types but can't guarantee an element exists. Selecting an element returns Type | null, forcing you to handle the null case. This prevents runtime errors when your script runs before the DOM element loads.

CSS clamp(): Fluid Sizing in One Line

The CSS clamp() function sets a value that scales between a minimum and maximum, like a thermostat for CSS properties. It's ideal for fluid typography, letting font-size grow with the viewport but not beyond set limits.

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.

Media Queries: CSS That Adapts to the User's Device

Instead of one-size-fits-all CSS, media queries let your styles react to the user's device. They are used to change layouts for different screen widths, orientations, or display resolutions. The footgun is only testing for width, ignoring other factors.

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.

Accessing data-* Attributes with `dataset`

The dataset property is a live map of an element's data-* attributes. It automatically converts HTML data-user-id to element.dataset.userId in JS, perfect for storing state. The footgun: name conversion is lossy; HTML attributes are always lowercased.

FormData: Package Form Data for HTTP Requests

The FormData API is a digital shipping container for your form's data, packaging input into a format HTTP requests understand. Use it to send forms, including files, with fetch() without manually setting headers.

Intrinsic Web Design: Components That Style Themselves

Intrinsic Web Design lets components style themselves based on their container, not the whole page. Instead of just viewport media queries, use container queries to make a component adapt to a wide content area or a narrow sidebar, making it truly reusable.

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.

The DOM's Inheritance Chain: EventTarget > Node > Element

Every HTML element is a stack of types: an EventTarget for events, a Node for tree structure, and an Element for common attributes. This lets you write type-safe DOM code, knowing a div has properties from all its ancestors.

React Hook Form: Faster Forms with Less Code

React Hook Form builds performant forms by using uncontrolled inputs, avoiding re-renders on every keystroke. It's ideal for complex forms where managing state with useState becomes slow. The main footgun: overuse of watch() can negate performance gains.

CSS Transitions: Animating State Changes

CSS transitions turn abrupt style changes into smooth animations. Instead of a button's color snapping on hover, it fades gracefully. Use this for visual feedback on state changes like :hover or when adding classes with JavaScript.

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.