Frontend Dummies Blog
Learn new skills, improve your techniques and stay updated on the layer underneath the frameworks.
What's new
See allFrontend Roadmap, Tier 1: Beginner Deep Notes
The mental models and edge cases that separate someone who has used HTML, CSS, JS, forms, responsive design, and HTTP from someone who actually understands them. Part 1 of the Frontend Roadmap series.
Frontend Roadmap, Tier 2: Intermediate Deep Notes
Accessibility, state management, component design, media optimization, rendering strategies, fonts, testing, and deployment — the intermediate tier where most mid-level interviews actually live. Part 2 of the Frontend Roadmap series.
Frontend Roadmap, Tier 3: Advanced Deep Notes
Build systems, security, offline-first patterns, internationalization, maintainable CSS, performance internals, and design systems — the advanced tier where senior-level depth is tested. Part 3 of the Frontend Roadmap series.
Everything from the blog
12 articles
Frontend Roadmap, Tier 1: Beginner Deep Notes
The mental models and edge cases that separate someone who has used HTML, CSS, JS, forms, responsive design, and HTTP from someone who actually understands them. Part 1 of the Frontend Roadmap series.
#HTML#CSSFrontend Roadmap, Tier 2: Intermediate Deep Notes
Accessibility, state management, component design, media optimization, rendering strategies, fonts, testing, and deployment — the intermediate tier where most mid-level interviews actually live. Part 2 of the Frontend Roadmap series.
#Accessibility#State ManagementFrontend Roadmap, Tier 3: Advanced Deep Notes
Build systems, security, offline-first patterns, internationalization, maintainable CSS, performance internals, and design systems — the advanced tier where senior-level depth is tested. Part 3 of the Frontend Roadmap series.
#Security#PerformanceFrontend Roadmap, Tier 4: Expert Deep Notes
Local-first systems and CRDTs, monorepo tooling, server-driven UI, microfrontends, WebGL/WebGPU, WebAssembly, and browser internals — the expert tier where architecture and platform machinery meet. Part 4 of the Frontend Roadmap series.
#CRDTs#WebAssemblyWeb Fundamentals: Deep Notes
How the browser turns a URL into pixels: the rendering pipeline, the critical rendering path, the event loop, the CSS cascade and stacking contexts, and HTTP from caching to CORS to HTTP/3 — explained as mental models rather than definitions.
#Browser#HTTPJS Coding: Implementations & Concepts
The JavaScript utilities worth writing from scratch — debounce, throttle, the Promise combinators, array polyfills, call/apply/bind, deep clone, curry, memoize, an event emitter, retry with backoff, and a concurrency pool — plus the closures, this-binding and event-loop behaviour underneath them.
#JavaScript#ClosuresWeb Performance: Deep Notes
Core Web Vitals (LCP, INP, CLS), loading strategies (code splitting, tree shaking, resource hints, image optimization), runtime performance (layout thrashing, compositor animations, web workers, virtualization), and a structured debugging framework.
#Performance#Core Web VitalsWeb Security: Deep Notes
XSS (stored, reflected, DOM-based), CSRF, CORS and the Same-Origin Policy, auth token storage tradeoffs (HttpOnly cookies vs localStorage), and a set of quick-hit defenses — explained as layered mental models, not a checklist.
#Security#XSSHow Dynamic CSS Loading Cut My Bundle Size by 85%
Learn how I cut CSS bundle size by 85% and improved page load times by 50% using dynamic imports and automatic code splitting in Next.js—a simple pattern with massive performance impact.
#Performance#CSSPerformance Optimisation from First Principles
Understanding frontend performance optimization from the ground up - learn how browsers work and optimize your code accordingly.
#Performance#Frontend
Understanding the Critical Rendering Path
Understand how browsers render pages through the Critical Rendering Path. Learn to optimize DOM, CSSOM, render tree construction, and reduce time to first paint for faster websites.
#Critical Rendering Path#PerformanceSEO guide for Frontend Developers
A practical guide to crawling, indexing, meta tags, semantics, and Core Web Vitals so your pages rank and stay fast.
#SEO#Core Web Vitals