Why MUI Avoids Theme Flash on First Load (Dark/Light Mode)New
How MUI applies the correct color scheme on the very first paint, and why other UI kits often flash light before switching to dark.
All posts
Deep Copy vs Shallow Copy in JavaScript
Understand the difference between shallow and deep copies, with examples and pitfalls.
Why setState Doesn’t Cause Hydration Errors
Understanding why calling setState after hydration doesn’t produce hydration mismatches in React/Next.js.
AbortController & AbortSignal
Everything you need to cancel async work in JS: fetch, streams, custom tasks, React patterns, Node notes, timeouts, races, and common pitfalls.
How useState Works Under the Hood (and Why It Needs use client)
Deep dive into React's useState, how it works internally, and why client components are required in Next.js App Router.
JavaScript Closures — A Simple Deep Dive
What closures are, how they work (lexical scope), and how to use them without pitfalls.
JavaScript Promises Explained
A simple but deep dive into how Promises work in JavaScript and why they matter.
JavaScript is Single-Threaded
Understand what it means when people say JS is single-threaded.
What is 'use client' in Next.js?
Understand 'use client' in Next.js App Router: what it means, when to use it, and how it works under the hood.
Next.js Page Router vs App Router
Understand the key differences between the old Page Router and the new App Router in Next.js.
JavaScript Event Bus 🚍 (JS + TypeScript)
A polished, practical event bus pattern with minimal JS, a strongly-typed TS version, wildcards, once-handlers, and React usage tips.
React Higher-Order Components (HOC)
Understand Higher-Order Components (HOCs) in React with examples, use cases, downsides, and a comparison to hooks.
JavaScript's Event Loop — Simple Guide (with SVG Timeline)
Event loop explained with a clean SVG timeline showing the actual execution order: Start → End → Promise → Timeout.
Microtask vs Macrotask in JavaScript — With Node.js vs Browser Notes
Understand microtasks and macrotasks across browsers and Node.js, including process.nextTick, setImmediate, and event loop phases.
Next.js App Router Caching — Cheat Sheet
A compressed reference of Next.js caching layers and controls (App Router).
React useRef vs useState — When to Use Which
A simple guide to understanding when to use useRef and useState in React, with examples, mental models, and a quick cheatsheet.
When Should You Use Dynamic Import in React/Next.js? (With Performance Comparison)
A practical guide to dynamic imports with real-world examples and a before/after bundle-size comparison using next-bundle-analyzer.
Git Rebase vs Git Merge — Simple Guide
Understand the difference between git rebase and git merge with analogies, ASCII diagrams, and visual commit history diagrams.
Frontend Design Patterns — A Practical Guide
A concise, example‑driven overview of the most useful frontend patterns for modern React/Next.js apps.
MVVM, Micro‑Frontends, and Domain‑Driven Frontend — A Practical Guide
Clear, practical explanations of MVVM, micro‑frontends, and domain‑driven design for modern React/Next.js teams, with examples, folder structures, and trade‑offs.
Event Bubbling vs Event Capturing in JavaScript
Understand how events travel through the DOM: bubbling (bottom-up) vs capturing (top-down) with simple examples and mental models.
Async vs Sync in JavaScript
Understand the difference between synchronous and asynchronous code in JavaScript with simple examples and analogies.
SOLID Principles Explained Simply
An easy-to-understand guide to SOLID principles for cleaner, more maintainable code.
What is Docker? The 2-minute mental model
Understand containers like folders for apps—portable and predictable.