Tag: frontend
Browse 45 practical software engineering resources tagged with "frontend". Discover code recipes, design patterns, documentation templates, and in-depth guides to help you build, deploy, and maintain production-ready solutions involving frontend. Each resource is written for engineers who ship real systems, with copy-paste examples and practical trade-offs.
Frontend Engineering
Frontend engineering is the discipline of building fast, accessible, and maintainable user interfaces. It requires fluency in the DOM, component architecture, state management, performance, and design systems.
The resources in this collection cover React, Vue, Svelte, TypeScript, CSS, accessibility, and modern build tools. Each recipe is focused on patterns that hold up in real browsers and real teams.
Every resource includes clear explanations, copy-paste code, and practical warnings. Use them to make informed decisions, avoid production pitfalls, and speed up your delivery. If you are just getting started, read the beginner-friendly articles first; if you are experienced, jump straight to the advanced patterns and architecture guides. New resources are added regularly, so bookmark this page and check back for the latest patterns.
URL Encoding and Decoding
Master URL encoding in JavaScript and other languages with encodeURI, encodeURIComponent, plus-safe...
Container Queries for Component Responsiveness
How to use CSS container queries for component-level responsive layouts that adapt to their...
Design Tokens with CSS Custom Properties
How to build a design token system using CSS custom properties, including color scales, spacing,...
Dark Mode with prefers-color-scheme and CSS Variables
How to implement dark mode using CSS prefers-color-scheme media query, CSS custom properties, and...
Build Responsive Email Templates with MJML
Create cross-client responsive email templates with MJML, compile them with TypeScript, inject live...
JavaScript Event Loop
Understand how the JavaScript event loop works internally and how to write non-blocking code.
Form Validation with react-hook-form and Zod
Build type-safe forms in React using react-hook-form with Zod schema validation, including nested...
When to Use useMemo and useCallback
How and when to use React's useMemo and useCallback hooks for performance optimization, and when...
Virtualize Long Lists with react-window
How to render large lists efficiently in React using react-window for DOM virtualization, including...
Server-Side Rendering
Improve performance and SEO with server-side rendering using Next.js, Nuxt, Astro, and other...
Reactive State Management with Svelte Stores
How to manage reactive state in Svelte using writable, readable, derived stores, and custom stores...
Exhaustive Type Checking with Discriminated Unions
How to use TypeScript discriminated unions for exhaustive type checking, ensuring all cases are...
Build Reusable Utility Types with Generics
How to create reusable TypeScript utility types using conditional types, mapped types, template...
Data Fetching with Vue 3 Composition API
How to fetch and manage data in Vue 3 using the Composition API with ref, computed, watch, and...
WebSockets for Real-Time Communication
Build bidirectional real-time communication with WebSockets, handling connection management,...
Mock GraphQL Resolvers for Frontend Development
Set up mocked GraphQL resolvers with Apollo Server so frontend teams can develop against a fake API...
Real User Monitoring
Monitor actual user experiences with Core Web Vitals, session replay, and performance analytics to...
SPA Performance: Code Splitting and Lazy Loading
Improve single-page application load times by splitting bundles at route and component level,...
Web Performance Optimization
Improve Core Web Vitals, reduce bundle sizes, and optimize frontend performance with lazy loading,...
Vitest Snapshot Testing for React
How to use Vitest snapshot testing to catch unintended UI changes in React components, including...