frontend

Practical resources about frontend for software engineers.

63 results

Building Fast and Accessible User Interfaces

Frontend development is more than component libraries. Performance budgets, accessibility compliance, state management, and progressive enhancement determine whether users stay or leave.

This topic covers patterns for web components, state management strategies, accessibility audits with WCAG, and performance optimization techniques. Resources include both framework-agnostic principles and specific implementations for modern stacks.

intermediate

Reactive State Management with Svelte Stores

How to manage reactive state in Svelte using writable, readable, derived stores, and custom stores...

intermediate

Exhaustive Type Checking with Discriminated Unions

How to use TypeScript discriminated unions for exhaustive type checking, ensuring all cases are...

frontend typescript type-safety exhaustiveness
advanced

Build Reusable Utility Types with Generics

How to create reusable TypeScript utility types using conditional types, mapped types, template...

frontend typescript generics conditional-types
intermediate

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...

intermediate

WebSockets for Real-Time Communication

Build bidirectional real-time communication with WebSockets, handling connection management,...

beginner

Enable Brotli Compression in Nginx for Faster Asset Delivery

How to configure Brotli compression in Nginx to reduce transfer sizes for JavaScript, CSS, and HTML...

intermediate

SPA Performance: Code Splitting and Lazy Loading

Improve single-page application load times by splitting bundles at route and component level,...

intermediate

Abstract Factory for Cross-Platform UI Component Families

Create families of related objects without specifying concrete classes, enabling platform-specific...

intermediate

Bridge Pattern for Decoupling UI Components from Themes

Separate an abstraction from its implementation so both can vary independently using the Bridge...

intermediate

Composite Pattern for UI Component Trees in React

Use the Composite pattern to compose objects into tree structures, letting clients treat individual...

intermediate

Mediator Pattern for Loose Component Coupling in

Reduce chaotic dependencies between UI components by introducing a mediator that centralizes...

beginner

MVC Pattern in Modern Frontend Applications

Apply the Model-View-Controller pattern to React and Vue applications to separate data, UI, and...

beginner

Static Content Hosting Pattern

Deploy static files to a dedicated content delivery network or object storage to offload origin...

intermediate

Container-Presenter: Separate Data Logic from Rendering

How to separate data-fetching logic from rendering in React using the container-presenter pattern....

intermediate

CSS Architecture: Utility-First with Component-Scoped Layers

How to organize CSS with utility-first classes and component-scoped layers. Covers Tailwind CSS,...

intermediate

Custom Hook Composition

How to compose reusable logic with custom React hooks. Covers hook composition patterns, dependency...

advanced

Islands Architecture

How to ship interactivity only where needed using islands architecture. Covers Astro islands,...

intermediate

Optimistic Update: Update UI Immediately, Reconcile on

How to update UI immediately and reconcile on server response in React. Covers rollback on error,...

intermediate

Progressive Enhancement

How to build a functional HTML baseline and progressively enhance with JavaScript. Covers core...

advanced

State Machine UI: Finite State Machines for UI

How to model UI state transitions with finite state machines in React. Covers XState, statecharts,...

No results found.