🌐 Frontend Dev

Design Systems: Stop Reinventing UI Components

A design system is a shared library of reusable UI components and rules, acting as a single source of truth for designers and developers. It ensures a consistent look across apps without rebuilding common elements.

The act Utility in React Testing Library

React Testing Library re-exports everything from DOM Testing Library and explicitly lists act as a core top-level API method alongside render and renderHook, making it available as a named export from the framework package without requiring a separate wrapper.

Router History vs. Hash Mode: URL Style and Server Setup

Router history mode determines your SPA's URL style. History mode uses clean URLs (/users) but needs server setup, while hash mode uses a hash symbol (/#/users) and works out-of-the-box.

Component Library: Your UI's LEGO Box

A component library is a box of pre-built UI LEGOs. Instead of building a button from scratch, you grab the official one, ensuring consistency and speed. It's essential for scaling design across teams.

Vue Router: Controlling Scroll Behavior

In a SPA, the browser doesn't manage scroll position; scrollBehavior is your manual override. Use it to scroll to top on new pages or restore position on back/forward. The footgun is forgetting savedPosition, breaking native back-button behavior.

Next.js: Pages Router vs. App Router

The App Router treats UI as a tree of components, while the older Pages Router treats it as a collection of separate pages. Use App Router for new projects to leverage layouts and Server Components.

Angular Services: Your App's Shared Toolbox

An Angular service is a shared toolbox for your app. Instead of components building their own tools (like an HTTP client), they request a single instance from the dependency injector.

next/link: Fast, Client-Side Navigation

next/link is an enhanced <a> tag for fast, client-side page transitions, preserving the SPA feel. It automatically prefetches linked pages for instant loading.

UI Patterns: Reusable Recipes for Interfaces

UI patterns are reusable recipes for common interface problems, like tabs or accordions. They create a shared language for building predictable, accessible components. The biggest footgun is creating a component that looks right but lacks accessible behaviors.

Angular Custom Pipes: Transform Data in Your Templates

An Angular custom pipe is a reusable formatting function for your templates. Use it for common display transformations like currency or date formatting, keeping your component logic clean. Footgun: Avoid slow logic; pipes run often and can kill performance.

easy1 min read

Next.js Route Groups: Invisible Folders for Routes

Route Groups are invisible folders for your Next.js routes, letting you organize files without changing the URL. Use them to apply a specific layout to a set of pages, like a marketing section vs. a user dashboard.

easy1 min read

Svelte Actions: Reusable DOM Logic

Svelte Actions let you run code when an element is mounted for direct DOM access. Use them to integrate third-party libraries or add custom events like swipe gestures.

next.config.js: Your Next.js App's Control Panel

Think of next.config.js as your app's control panel, letting you change Next.js's default behavior. Use it for redirects, environment variables, or image optimization. The biggest footgun: you must restart your dev server after making any changes.

Designing Durable Component APIs

The best component API is often no API. Design from the user's perspective by first writing the ideal usage snippet, a "dream-driven" approach. This ensures intuitive components that boost design system adoption.

Vue Custom Directives: For Low-Level DOM Access

Vue custom directives are for low-level DOM access. Use them for tasks like auto-focusing a dynamically inserted input. The footgun is using them for stateful logic or UI structure, where a composable or component is the right tool.

Server Components: Fetch Data Directly

Server Components let you fetch data directly using async/await, simplifying code by removing client-side useEffect hooks. Use this for initial page loads in Next.js to improve SEO and performance. The footgun: don't use client-side hooks or browser APIs.

W3C Design Tokens: A Standard Format for UI Decisions

A standard design token format is a universal translator for your UI's style, defining colors and spacing in a JSON structure any tool can read. It lets design tools and codebases pull from one source of truth.

Vue Composables: Reusable Stateful Logic

A Vue composable is a function for bundling reusable stateful logic, like tracking mouse position. Use it to share complex logic like API fetches across components. The footgun: each component gets a fresh, independent state, not a shared one.

Route Handlers: Your Next.js App's API Endpoints

Route Handlers are lightweight API endpoints built into your Next.js app. Use them to serve JSON or handle form posts. The footgun is confusing them with Server Components; Route Handlers return data, not rendered UI.