Latest Posts
Notes, hands-on takeaways, and knowledge sharing across frontend development, backend engineering, cloud services, and system design
Kubernetes Under the Hood: How the Control Plane and Node Components Split the Work
A breakdown of the Control Plane components — API Server, etcd, Scheduler, and Controller Manager — plus the Node-side kubelet and kube-proxy, so you can see exactly what happens behind a single kubectl apply.
From URL to Pixels: What Really Happens Behind the Scenes
A full breakdown of what happens between hitting Enter and seeing a page — DNS lookup, the TCP/TLS handshake, how the request crosses the Load Balancer and Nginx to reach your server, and how the HTML pipeline turns the response into pixels.
Cloud Infrastructure: Building a Three-Tier Architecture with EC2, S3, and RDS
Starting from a single server that does everything, this post breaks the stack apart into frontend, application, and data tiers, mapped onto AWS's EC2, S3, and RDS — and explains why this old-school pattern is still the default today.
AWS Networking Services: How Do VPC, Security Group, NACL, ELB, and Route 53 Divide the Work?
From carving out your own private network to resolving a domain name to the right place—understand how VPC subnets and routing work, what separates Security Group from NACL as two layers of firewall, how ELB spreads traffic across your backend, and how Route 53 handles DNS resolution.
AWS Management Tools: How CloudWatch, CloudTrail, Config, CloudFormation, and EventBridge Divide the Work
From "what's happening in the system" to "who changed what setting" to "how do we automate deployment and response" — here's how CloudWatch, CloudTrail, AWS Config, CloudFormation, and EventBridge each solve a different piece of the puzzle.
AWS Security Services: How Do IAM, Secrets Manager, KMS, ACM, WAF, Shield, and Cognito Divide the Work?
From "who can do what" to "how you defend against incoming traffic," understand what line of defense each AWS security service—IAM, Cognito, Secrets Manager, KMS, ACM, WAF, and Shield—actually holds.
AWS Database Services: How Do You Choose Between RDS, Aurora, DynamoDB, and Neptune?
From relational databases to graph and time-series stores, learn what problem each AWS database service—RDS, Aurora, DynamoDB, ElastiCache, Neptune, DocumentDB, Keyspaces, and Timestream—actually solves, and when you should reach for it.
Slimming Down Your Bundle: Tree-Shaking, Code Splitting, and Bundle Analysis
Measure first, optimize second. We'll look at why tree-shaking sometimes silently fails, where code splitting actually pays off, and how to use analysis tools to find the dependencies that are really weighing you down.
AWS Storage Services: How Do You Choose Between S3, EBS, EFS, Snow Family, FSx, and Storage Gateway?
From a disk dedicated to a single machine to shipping physical devices full of data, this walks through what actually separates S3, EBS, EFS, FSx, Storage Gateway, and Snow Family — and when each one makes sense.
AWS Compute Services: How Do You Choose Between EC2, ECS, EKS, and Lambda?
From renting a VM to not thinking about servers at all — a walkthrough of EC2, ECS, EKS, and Lambda, what makes each one different, and how to pick the right one.
Browser Caching Strategies Explained: Cache-Control, ETag, and Service Worker
How Cache-Control, ETag, and Service Worker split the work of caching, so your site loads fast without leaving users stuck on stale content.
Sharding: How Databases Scale Horizontally
Using a restaurant-chain analogy, this post explains how sharding splits data across multiple machines, compares common sharding strategies and their tradeoffs, and covers the problems that show up once you've sharded.
Caching: Put Data Closer, Get Speed — and New Problems
Starting from a database that can't keep up with repeated queries, this post breaks down how caching trades an extra storage layer for speed, plus the read/write strategies like Cache-Aside and Write-Through, and the consistency-vs-performance tradeoffs behind eviction and invalidation.
Replication: Copying Your Database, Without Sacrificing Performance or Consistency
Starting from the fact that a single database can neither handle heavy traffic nor survive a failure, this post digs into how replication spreads data across multiple machines to ease that load, and the consistency tradeoffs behind leader-follower architecture, synchronous vs. asynchronous replication, and failover.
Scalability: How a System Goes From Falling Over to Getting Sturdier as It Grows
Starting from a site that crashes the moment traffic spikes, this post digs into what scalability actually means, and the tradeoffs behind common approaches like vertical scaling, horizontal scaling, caching, and database sharding.
Idempotency: Why Retrying an API Call Should Not Break Things
Starting from a real-world network retry scenario, this post breaks down what idempotency actually means, why distributed systems cannot avoid it, and how to design APIs that survive being called more than once using an idempotency key.
The CAP Theorem — Why Distributed Systems Can't Have It All
A bank-branch deposit scenario that breaks down what Consistency, Availability, and Partition Tolerance actually mean, why "pick two" is misleading, and how to actually choose in practice.
From Docker to Production: Multi-Stage Builds, Slim Images, and Security Best Practices
Take a Dockerfile that merely "works on my machine" and rewrite it into one you can ship to production with confidence, covering multi-stage builds, image slimming, and the most common security traps.
Docker Compose in Practice: Networks, Volumes, and Environment Variables
A complete docker-compose.yml walkthrough for how containers talk to each other over a network, how volumes keep your data alive, and where environment variables belong so they don't leak or get mixed up.
CSR vs. SSR vs. SSG: How Rendering Strategies Really Differ
Starting from how a browser actually gets a page, this breaks down when each of CSR, SSR, and SSG produces HTML, what it costs you, and how to pick the right one for your project.
Docker Layers and Build Cache: How to Write a Dockerfile That Doesn't Rebuild Everything Every Time
Understand how Docker layers and the build cache actually work, then use instruction ordering, multi-stage builds, and BuildKit cache mounts to cut build times from minutes to seconds.
How Docker actually works under the hood: namespaces, cgroups, and union filesystems
Starting from the common misconception that a container is just a lightweight VM, this post breaks down the three Linux kernel technologies Docker actually depends on — how a container gets isolated, how its resources get capped, and how its filesystem gets layered together.
CSP: Building the Browser's Last Line of Defense with Content Security Policy
How Content Security Policy's allowlist model works, the directives you'll actually use, how nonces and hashes handle inline scripts, and the pitfalls that trip people up in practice
XSS: Cross-Site Scripting in the Browser
How XSS lets attackers run malicious scripts in someone else's browser, the differences between Stored, Reflected, and DOM-based XSS, and what frontend and backend both need to do to actually stop it
Rendering Long Lists: Why Thousands of Rows Feel Slow, and How Virtualization Works
Start with what too many DOM nodes actually cost in style, layout, paint, and memory, then see how windowing (virtualization) renders only what's visible, and build a fixed-height virtual list yourself.
CSRF: How Cross-Site Request Forgery Actually Works
An explanation of why browsers attach your login credentials to requests without you knowing, how CSRF attacks actually work, and how to put defenses like CSRF tokens and SameSite cookies into practice
React State Management: Context, Props, or an External Store?
Start from the pain of prop drilling, see what Context actually fixes and what it leaves unsolved, and learn to recognize when it's time to reach for an external store.
Rendering and Performance: When to Reach for useMemo, useCallback, and React.memo
Understand what a React re-render actually is, then use three common performance-optimization mistakes to figure out when useMemo, useCallback, and React.memo actually earn their keep.
React Hooks Fundamentals: useState and the useEffect Dependency Array
Understand closures to see why useState needs functional updates, and what the useEffect dependency array is actually comparing.
Core Web Vitals: What Drives LCP, INP, and CLS, and How to Fix Them
Starting from the gap between Lighthouse and CrUX numbers, we'll look at where LCP, INP, and CLS each get stuck, and what to do about it.
Strategy: Pulling Algorithms Out So Behavior Stays Swappable
Starting from a sprawling if-else discount calculator, see how the Strategy Pattern packages each algorithm into an interchangeable strategy object — and where the line falls between it and the State Pattern.
Debounce, Throttle, and requestAnimationFrame
Find out why scroll, resize, input, and mousemove can drag down performance, and learn when to reach for debounce, throttle, or requestAnimationFrame, and how to implement each one.
Mediator: Untangling Communication Between Objects
Starting from a situation where objects call each other directly and the relationships turn into a tangled mess, see how the Mediator Pattern centralizes communication logic through a single mediator, and how it differs from the Observer Pattern.
Observer: Subscriptions and State-Change Notifications
Starting from a scenario where one object's state change needs to notify multiple interested parties, see how the Observer Pattern decouples publishers from subscribers — and how it relates to the browser's native event system and Pub/Sub.
Decorator: Extending an Object's Behavior at Runtime Without Touching Its Class
Starting from the trap of subclass explosion, this piece breaks down how the Decorator Pattern stacks behavior onto an object layer by layer, and clears up how it differs from JavaScript's own @decorator syntax.
Facade: Hiding Complex Subsystems Behind One Unified Interface
Starting from a checkout flow that has to wire together several subsystems, this piece breaks down how the Facade Pattern wraps messy internals behind one simplified interface, and how it differs from the Adapter Pattern.
Factory: Encapsulating and Abstracting Object Creation
Starting from `new` calls scattered across a codebase, see how the Factory Pattern centralizes object creation logic — and learn to tell Simple Factory, Factory Method, and Abstract Factory apart.
Singleton: Guaranteeing One Global Instance, and What It Costs You
From hand-rolling a Singleton, to the traps it sets in multi-threaded and async environments, to why it gets called an anti-pattern — here's what this pattern actually buys you, and what it takes away.
JavaScript's this: who is it actually pointing at?
A walkthrough of the four binding rules for this and the priority order between them, plus why arrow functions don't get to decide their own this — so you can look at any snippet and know exactly what this points to.
Vue's Virtual DOM and Diff Algorithm: How PatchFlags and Static Hoisting Speed Up Rendering
A deep dive into how Vue 3's diff algorithm works under the hood — how the compiler tags dynamic nodes with PatchFlags, skips static content with static hoisting, and makes every update touch only what actually changed.
Building component-level responsive design with Container Queries
Starting from the limits of media queries and the old JS-based hacks for watching element size, this post walks through how Container Queries work, how to write @container syntax, and when to reach for it instead of page-level responsive thinking.
Teaching TypeScript to Read Your Mind: Type Narrowing and Type Guards
A breakdown of how typeof, instanceof, in, and custom type guards let TypeScript shrink a union type inside a conditional — paired with discriminated unions to write safe code without sprinkling type assertions everywhere.
Conditional Types and Template Literal Types: Making TypeScript Compute Your Types
How Conditional Types branch at the type level, how infer pulls values out of nested types, and how Template Literal Types build new string literal types from templates — so you can write TypeScript types that are more precise and infer themselves automatically.
Generics 101: Reusable Functions and Types Without Sacrificing Type Safety
Starting from the pain of copy-pasting a function for every type it needs to support, this walks through how generics let functions and types stay both reusable and type-safe — no trade-off required.
TypeScript's interface vs. type: What's Actually Different?
Break down the real differences between interface and type — declaration merging, extension syntax, and union types — and build a decision framework so you're not just guessing every time.
CORS: The Browser's Cross-Origin Resource Sharing Mechanism
An explanation of why browsers block cross-origin requests, how CORS actually works, and a walkthrough of preflight requests, common header configurations, and debugging techniques
Vue Component Communication: When to Use props, emit, provide/inject, and Store
Break down how props, emit, provide/inject, and a Store each solve component communication in Vue, and walk away with a practical framework for picking the right tool based on how two components are related.
Vue 3 Reactivity: Why Proxy Replaced Object.defineProperty
Starting from the built-in limits of Vue 2's Object.defineProperty, this post breaks down why Vue 3 rewrote its reactivity system around Proxy, and exactly which long-standing pain points that change fixed.
CSS Architecture Strategies: From BEM to Tailwind CSS and UnoCSS
A comparison of how BEM, CSS Modules, Tailwind CSS, and UnoCSS each tackle naming collisions and scoping, to help you figure out which strategy fits a large project.
DOM Render Pipeline: From HTML String to Pixels on Screen
A breakdown of how browsers turn an HTML string into pixels on screen, and why some resources block rendering (parser-blocking)
ref vs. reactive: The Difference, the Internals, and When to Use Each
Break down how ref and reactive are actually implemented under the hood in Vue 3, understand why destructuring a reactive object kills its reactivity, and walk away with a practical framework for picking the right API for the job.
A Mental Model for the JavaScript Event Loop
Build a rock-solid mental model for the call stack, Web APIs, macrotasks, and microtasks — so you never get confused about when a line of code actually runs.
A Complete Guide to Promises and Async/Await
Starting from the pain of callback hell, break down Promise's three states and chainable .then, see how async/await wraps asynchronous code in a synchronous-looking syntax, and walk away with practical patterns for error handling and running things in parallel.
Understanding JavaScript Closures: Why Can a Function Remember Outer Variables?
Break down how JavaScript closures work through the classic loop trap, understand how functions "remember" variables in their lexical scope, and learn to use them for real-world patterns like counters and data privacy.
Why top/left animations stutter but transform/opacity stay silky smooth
A look at the browser's rendering pipeline to explain why top/left animations tend to drop frames, and how pairing transform and opacity with will-change gets your animation onto the GPU for genuinely smooth CSS.
Hoisting: What's Actually Getting Hoisted
A deep dive into how hoisting really works — why var comes back undefined, why let and const throw instead, and why you can call a function before you've even written it.
var vs let vs const: Which One Should You Actually Use?
Breaking down how var, let, and const really differ — scope, hoisting, the temporal dead zone — and building a practical rule of thumb for which one to reach for.
CSS Specificity and the Cascade: Who Actually Wins?
A walkthrough of the order the browser uses to resolve style conflicts — how specificity is calculated, the three layers of the cascade, and whether you should ever reach for !important.
Resource Hints
Break down what dns-prefetch, preconnect, prefetch, preload, and prerender actually do and how much priority each one gets, so you know exactly which one fits which situation instead of throwing all of them onto every page.
async & defer
What happens by default when the browser's HTML parser hits a <script> tag, and how the async and defer attributes each change when a script downloads and runs — so you know which one to reach for.
Semantic HTML tags
Starting from a page built entirely out of <div>s, this walks through what semantic tags are actually for, when to reach for each one, and how they affect accessibility tools and SEO.