Series · 20 parts

Web Development in Practice

Practical web development for senior frontend engineers — the CSS, JavaScript, and browser-platform fundamentals behind production UI. From CSS performance and modern features, through core JavaScript (event loop, async, closures, fetch, events, memory, Intl) and the browser APIs that power real apps, to landing-page motion across CSS, vanilla JS, and React + Framer Motion.

01 Tối ưu performance CSS — deep dive từ render pipeline tới production

Đi sâu vào cách browser xử lý CSS, chi phí của Layout/Paint/Composite, critical CSS, containment, content-visibility, GPU acceleration, và mọi kỹ thuật giúp CSS không còn là nút thắt performance.
02 CSS Optimization by Level — From Junior to Principal

A progressive guide to CSS performance optimization structured by developer seniority. Each level builds on the previous — from writing clean selectors to architecting compositor-only animation pipelines.
03 Modern CSS Features You Should Be Using in 2026

A bilingual guide to the CSS features that have changed how we build UIs — container queries, :has(), native nesting, cascade layers, popover, anchor positioning, scroll-driven animations, and more.
04 JavaScript Event Loop Deep Dive — Microtasks, Macrotasks, and Real Browser Timing

Deep dive into the JS event loop: call stack, macrotask vs microtask queues, await desugaring, timer clamping, rAF, and predictable console ordering.
05 JavaScript Async Patterns — Promises, Combinators, AbortController & Concurrency

Promise anatomy, sequential vs parallel pitfalls, all/allSettled/race/any semantics, cancellation, retries, concurrency pools, and error traps.
06 Debounce, Throttle & rAF — rate-limiting high-frequency browser events

Debounce vs throttle vs rAF — from-scratch implementations, leading/trailing/maxWait, passive listeners, scrollend, and React pitfalls.
07 JavaScript Closures, Scope & this — Lexical Environments, Loop Bugs, and Binding Rules

Lexical scope, closures, the var-in-loop bug, memory tradeoffs, and this binding — with an interactive demo and real frontend patterns.
08 Robust Data Fetching — fetch(), AbortController, Retry, and the Stale-Response Race

Client-side fetch resilience for seniors: HTTP gotchas, AbortController timeouts, exponential backoff, stale-response races, dedup, and a fetchJSON wrapper.
09 Forms & the Constraint Validation API — Native Validation Done Right

Native HTML form validation deep-dive: ValidityState, setCustomValidity, async/cross-field patterns, ARIA errors, FormData — and why the server always wins.
10 Event Delegation & DOM Performance — Propagation, Batching, and Layout Thrashing

Senior guide to event delegation with closest(), addEventListener options, DocumentFragment batching, read/write separation, and when virtualization wins.
11 Immutable State in JavaScript — References, Cloning, structuredClone, and Change Detection

Master JS value vs reference semantics, shallow copy traps, structuredClone limits, immutable updates, Object.freeze, and Map/Set for predictable state.
12 JavaScript Error Handling & Resilience — try/catch Limits, Global Handlers, and Production Patterns

Senior deep-dive: Error object anatomy, what try/catch cannot catch, custom errors with cause, async patterns, global handlers, retries, and monitoring.
13 JavaScript Memory Management & Leak Hunting — V8 GC, DevTools, and Production Signals

How V8 garbage collection works, why leaks are reachability bugs, classic frontend leak patterns, WeakRef tradeoffs, and a DevTools hunting workflow.
14 JavaScript Intl API — Dates, Numbers, Currency & Locale-Aware Formatting Without Hand-Rolling

Why not to hand-roll i18n formatting: Intl.NumberFormat, DateTimeFormat, PluralRules, Collator, Segmenter, performance, and timezone pitfalls.
15 Observer APIs deep dive — MutationObserver, ResizeObserver và họ hàng trong browser

Đào sâu Observer pattern trong browser: MutationObserver theo dõi DOM, ResizeObserver bắt resize, IntersectionObserver, PerformanceObserver, ReportingObserver — concept, use case production, pitfall, memory cleanup.
16 JavaScript Generators & yield — A Practical Guide with 10 Use Cases

A bilingual deep-dive into generator functions and yield: the pausable-function mental model, core syntax, two-way communication, async generators, plus 10 real-world use cases and practice exercises.
17 Unicode, String, Buffer, Blob — Hiểu sâu binary và text trong JavaScript frontend

Vì sao `"🇻🇳".length === 4`? Bài này đào sâu Unicode code point, surrogate pair, grapheme cluster, và cách JS xử lý binary qua ArrayBuffer, TypedArray, DataView, Blob, TextEncoder — kèm use case frontend thực chiến.
18 What's New in ES2025 & ES2026 — The Complete Guide with Examples

A bilingual, example-driven tour of ECMAScript 2025 (Iterator Helpers, Set methods, Promise.try, RegExp.escape, import attributes, Float16Array) and ES2026 (explicit resource management with using, Array.fromAsync, Error.isError).
19 Landing Page Animations — CSS, Vanilla JS, and React + Framer Motion

Senior guide to landing-page motion: page-load orchestration, scroll reveal, stagger, parallax, gestures, and route transitions — with CSS, vanilla JS, and Framer Motion patterns plus library picks.
20 The Beacon API — Sending Data That Survives Page Unload

A practical guide to navigator.sendBeacon: why it exists, how it differs from fetch keepalive, the Content-Type/Blob trick, CORS and size limits, and the real-world use cases — analytics, web vitals, error logging, autosave.