Accessibility
The Frontend Casebook
Visual case studies for frontend and agent UI engineering.
Hey — pick a case below or start with the flagship. I'll hint as you scroll.
Your path
Sign in-
-
Accessibility
aria-live for Form Errors
-
Accessibility
autocomplete for Password Managers
-
Accessibility
Contrast Is Not Enough
-
Accessibility
:focus-visible vs outline: none
-
Accessibility
One h1, Logical Headings
-
Accessibility
Escape Closes, Tab Cycles
-
Accessibility
prefers-reduced-motion Contracts
-
Accessibility
sr-only Without Hiding Focus
-
Accessibility
Skip Link on First Tab
-
Accessibility
th scope for Data Tables
-
Accessibility
44px Touch Targets on Mobile
-
Advanced Frontend
Bundle Budgets as CI Gates (Not Slide Decks)
-
Advanced Frontend
Million-Row Export Without Freezing Chrome
-
Advanced Frontend
Shipping a Design System v3 Without Breaking 40 Apps
-
Advanced Frontend
Edge SSR and the Cold Start Users Feel
-
Advanced Frontend
Feature Flags and UI Flicker on First Paint
-
Advanced Frontend
RTL Layout Regressions Nobody Caught in CI
-
Advanced Frontend
When Micro-Frontends Stop Sharing a Design System
-
Advanced Frontend
Shared Chunks Across 12 Packages in a Monorepo
-
Advanced Frontend
SPA OAuth: PKCE, Silent Refresh, and Tab Sync
-
Advanced Frontend
RUM Dashboards Devs Actually Open During Incidents
-
Advanced Frontend
Islands vs Full Hydration on Marketing Pages
-
Advanced Frontend
WebSocket Dashboards and Backpressure
-
Agent Architecture
Agent Cards and Discovery (A2A)
-
Agent Architecture
Streaming Agent UI Panels (Generative UI)
-
Agent Architecture
Plan → Act → Observe Loops
-
Agent Architecture
Per-Session Cost Caps in the UI
-
Agent Architecture
Golden-File Evals for UI Agent Outputs
-
Agent Architecture
Approval Gates Before Production Actions
-
Agent Architecture
Local MCP over stdio: Env and Secrets
-
Agent Architecture
MCP: Host, Client, and Server Roles
-
Agent Architecture
Sliding Memory vs Summarize-and-Compact
-
Agent Architecture
Multi-Agent Handoffs Users Can Follow
-
Agent Architecture
Trace Spans in the Agent Debug Panel
-
Agent Architecture
Sandboxing Untrusted Tool Output
-
Agent Architecture
Parallel Subagents and Race Conditions
-
Agent Architecture
Tool Schemas the UI Can Render
-
Agentic Ai
Plan-Act-Observe Agent Loop
-
Agentic Ai
Context Window Budget for FE Tasks
-
Agentic Ai
Socratic Debug Coach (Don't Paste Yet)
-
Agentic Ai
Evals for UI Diff Suggestions
-
Agentic Ai
When to Graduate to Hosted Mastery (L2)
-
Agentic Ai
Human-in-the-Loop Before Deploy
-
Agentic Ai
MCP Tools vs Giant Prompts
-
Agentic Ai
Paste Error, Zero Learning (Anti-pattern)
-
Agentic Ai
Prompt Injection Meets XSS
-
Agentic Ai
RAG on Your Design System Docs
-
Agentic Ai
Skills vs Rules in Cursor
-
Agentic Ai
Structured Output for UI Generation
-
Agentic Ai
Subagents for Parallel FE Tasks
-
Ai Frontend Integration
Diff Review Before Merge (Copilot Pattern)
-
Ai Frontend Integration
Third-Party AI Widgets and Data Boundaries
-
Ai Frontend Integration
Confidence Thresholds Before Auto-Apply
-
Ai Frontend Integration
Client-Side vs Server-Side Embedding Search
-
Ai Frontend Integration
Degraded Mode When the Model Is Down
-
Ai Frontend Integration
Rendering Model Markdown Safely in React
-
Ai Frontend Integration
Image Upload + Preview in Agent UIs
-
Ai Frontend Integration
Untrusted User Content in Agent Prompts
-
Ai Frontend Integration
Rate Limit UX: Cooldowns Beat Error Toasts
-
Ai Frontend Integration
Streaming Tokens Without Layout Thrash
-
Ai Frontend Integration
JSON Schema → Form Fields (Structured Output)
-
Ai Frontend Integration
Showing Context Budget Without Anxiety
-
Ai Frontend Integration
Tool-Call Panels Users Trust
-
Ai Frontend Integration
Push-to-Talk vs Always-On Mic UX
-
Animation Motion
transform/opacity vs layout properties
-
Animation Motion
When to Reach for GSAP
-
Animation Motion
FLIP Technique for List Reorder
-
Animation Motion
Lottie vs CSS: Weight Budget
-
Animation Motion
@media (prefers-reduced-motion)
-
Animation Motion
Parallax Without Vestibular Harm
-
Animation Motion
rAF Throttle for Scroll Handlers
-
Animation Motion
Scroll-Driven Animations (CSS)
-
Animation Motion
Spring vs ease for UI Feedback
-
Animation Motion
Staggered List Entrance
-
Animation Motion
View Transitions API on Static Nav
-
Animation Motion
will-change: Use Sparingly
-
Browser Dom
Capture vs Bubble: Who Wins?
-
Browser Dom
Custom Elements Lifecycle
-
Browser Dom
dialog.showModal vs Custom Modals
-
Browser Dom
One Listener, Thousand Rows
-
Browser Dom
Focus Traps That Don't Trap Keyboard Users
-
Browser Dom
inert on Background When Modal Open
-
Browser Dom
IntersectionObserver for Lazy UI
-
Browser Dom
MutationObserver vs Polling
-
Browser Dom
passive: true and Scroll Jank
-
Browser Dom
Popover API vs Div Hacks
-
Browser Dom
ResizeObserver Loop Limit
-
Browser Dom
Shadow DOM for Widget Isolation
-
Build Tooling
Bundle Analyzer: Find the Chunk
-
Build Tooling
Build-Time Env vs Runtime Config
-
Build Tooling
esbuild vs webpack for Dev Speed
-
Build Tooling
ESLint Flat Config Migration
-
Build Tooling
GitHub Actions for Static Pages
-
Build Tooling
Pre-commit Hooks Without Rage
-
Build Tooling
Remote Cache in Monorepos
-
Build Tooling
Prettier vs ESLint Boundaries
-
Build Tooling
Source Maps in Production (Safely)
-
Build Tooling
Static Site, Zero Backend (L0)
-
Build Tooling
sideEffects: false and Tree Shaking
-
Build Tooling
strict: true Gradually
-
Css Layout
aspect-ratio for Media Layout
-
Css Layout
Container Queries for Real Components
-
Css Layout
Dropdown Under the Modal
-
Css Layout
flex: min-width: 0 Saves Dashboards
-
Css Layout
CSS Grid fr Unit Traps
-
Css Layout
The One Pixel That Broke the Layout
-
Css Layout
Logical Properties for RTL-Ready UI
-
Css Layout
Margin Collapse Surprises
-
Css Layout
Scroll Snap Without Trapping Users
-
Css Layout
Subgrid for Design System Rows
-
Css Layout
100vh on Mobile (Address Bar)
-
Css Layout
Z-Index Is Not Magic
-
Javascript
Ghost Updates and Race Conditions
-
Javascript
async/await Looks Sequential (It Isn't)
-
Javascript
Closures and Stale State in Handlers
-
Javascript
The Event Loop: One Thread, Many Queues
-
Javascript
Iterator Protocol in Plain English
-
Javascript
Why microtasks run before paint
-
Javascript
Optional Chaining in UI Trees
-
Javascript
Promise Chains That Swallow Errors
-
Javascript
structuredClone vs JSON in Workers
-
Javascript
TDZ Bugs That Only Show in Production
-
Javascript
Four Rules of `this` (Without Memorizing)
-
Javascript
WeakMap for DOM Metadata (Safely)
-
Networking
Cache-Control on Static Assets
-
Networking
Why Your OPTIONS Request Matters
-
Networking
Debounce vs Throttle in Search
-
Networking
ETags and 304 Not Modified
-
Networking
fetch + AbortController: Cancel Ghost Requests
-
Networking
GraphQL Overfetch in the Browser
-
Networking
Idempotent Retries on POST
-
Networking
Offline Queue When Tab Returns
-
Networking
Cursor Pagination vs Offset
-
Networking
SSE vs WebSocket for Live UI
-
Networking
stale-while-revalidate for Shells
-
Networking
WebSocket Reconnect with Backoff
-
Patterns Ux
Command Palette for Power Users
-
Patterns Ux
Dark Mode via Design Tokens
-
Patterns Ux
Dense Tables: Virtualize or Paginate
-
Patterns Ux
Empty States With One Clear Action
-
Patterns Ux
Multi-Step Wizard State Machine
-
Patterns Ux
Infinite Scroll vs Paginated Footer
-
Patterns Ux
Checklist Onboarding With Progress
-
Patterns Ux
Three-Tier Pricing Layout
-
Patterns Ux
Drawer Nav Without Scroll Lock Bugs
-
Patterns Ux
When Skeletons Beat Spinners (Product)
-
Patterns Ux
Toast Stacks That Don't Bury the UI
-
Patterns Ux
Undo Instead of "Are You Sure?"
-
Performance Cwv
content-visibility for Long Pages
-
Performance Cwv
Critical CSS on Static Sites
-
Performance Cwv
Third-Party Scripts and Main Thread
-
Performance Cwv
The Layout Shift You Forgot (Fonts)
-
Performance Cwv
Lazy Loading the Wrong Image
-
Performance Cwv
INP and the 200ms Long Task
-
Performance Cwv
LCP Is Often Text, Not Your Hero Image
-
Performance Cwv
preconnect vs preload for Fonts
-
Performance Cwv
Prefetch Hints Without Waste
-
Performance Cwv
When Lighthouse Lies (RUM vs Lab)
-
Performance Cwv
Service Worker Stale Shell
-
Performance Cwv
Virtualize vs Paginate Dense Tables
-
Psychology Perception
Pretty UI Feels More Usable
-
Psychology Perception
Anchoring in Pricing UIs
-
Psychology Perception
Banner Blindness and CTA Blindness
-
Psychology Perception
When Filters Paralyze Dashboards
-
Psychology Perception
How Long Waits Feel (Chronoception)
-
Psychology Perception
Fake Progress Bars and Trust
-
Psychology Perception
Loss Aversion in Destructive Actions
-
Psychology Perception
Optimistic UI and Perceived Speed
-
Psychology Perception
Peak-End Rule in Loading UX
-
Psychology Perception
Progressive Disclosure vs Hamburger Hell
-
Psychology Perception
Why Skeleton Screens Beat Spinners
-
Psychology Perception
Von Restorff: Make Errors Visible
-
React
Context Without a Re-render Storm
-
React
Controlled vs Uncontrolled Forms
-
React
Error Boundaries That Actually Recover
-
React
Two Trees: Hydration Explained
-
React
Keys Are Identity, Not Index
-
React
When Lifting State Creates Cascades
-
React
When React.memo Makes Things Worse
-
React
Optimistic UI When the Server Says No
-
React
Portals and the Missing Layer
-
React
useImperativeHandle Escape Hatches
-
React
Server vs Client Component Boundary
-
React
Stale Closures in useEffect
-
React
Suspense Boundary Granularity
-
React
Why useEffect Ran Twice (Strict Mode)
-
Security
Third-Party AI Widgets and Data Leak
-
Security
frame-ancestors and Clickjacking
-
Security
CSP Without Breaking Your Static Site
-
Security
SameSite Cookies and CSRF
-
Security
DOM Clobbering via id/name
-
Security
PKCE for SPA OAuth
-
Security
postMessage: Always Check origin
-
Security
Prototype Pollution in deep merge
-
Security
Secrets in the Client Bundle (Never)
-
Security
SRI for Third-Party Scripts
-
Security
Dependency Trust and lockfiles
-
Security
innerHTML and the XSS Trap
-
State Architecture
Derived State Anti-Pattern
-
State Architecture
Event Bus vs Props (When to Stop)
-
State Architecture
Feature-Sliced Folders (Static Site Scale)
-
State Architecture
State Machines for Wizards
-
State Architecture
IndexedDB for Offline Read Models
-
State Architecture
Prop Drilling vs Composition
-
State Architecture
localStorage Quota and Privacy
-
State Architecture
Module Federation Boundaries
-
State Architecture
Version Fields for Optimistic Lock
-
State Architecture
Normalized State for Lists
-
State Architecture
Single Writer for Shared State
-
State Architecture
URL as Source of Truth for Filters
-
Testing Quality
axe in CI Without Noise
-
Testing Quality
Storybook as Living Docs
-
Testing Quality
MSW for Contract-First FE
-
Testing Quality
Line Coverage vs Risk Coverage
-
Testing Quality
One E2E Smoke per Critical Path
-
Testing Quality
Fake Timers vs Real Timers
-
Testing Quality
Mutation Testing: When Worth It
-
Testing Quality
Playwright Trace on Failure
-
Testing Quality
Property Tests for Parsers
-
Testing Quality
When Snapshot Tests Smell
-
Testing Quality
Query Like a User, Not a DOM Tourist
-
Testing Quality
Visual Regression for Design Systems
-
Accessibility
Fitts's Law and Tap Target Sizing
-
Patterns Ux
Hick's Law: Why More Nav Items Slow Users Down
-
Patterns Ux
Miller's Rule: Chunking Long Forms
-
Psychology Perception
The 400ms Rule: Doherty Threshold
-
Patterns Ux
Gestalt: Spacing Is Syntax
-
Psychology Perception
Cognitive Load and Error Recovery UX
No live cases in this track yet.
Inside the Casebook
New cases every few weeks — patterns from production UI engineering. Double opt-in, easy unsubscribe.
No spam. Unsubscribe anytime. Emails sent via Buttondown.
RSS feed