System/Initialized
A frontend engineer and systems architect. This is my digital lab where I document my thoughts on modern web development, performance metrics, and architectural patterns.
Pinned_series_pick
Mổ xẻ nhịp giảm của VN-Index qua vĩ mô, lãi suất, margin, dòng vốn ngoại và vai trò của VIC–VHM; từ đó xây dựng khung hành động tỉnh táo cho giai đoạn tới.
Pinned_series_pick
Case study end-to-end: implement reading progress indicator cho blog Astro. Đi qua đủ 4 pha (Plan → Scaffold → Build → Polish), dùng Rules + Skills + Sub-agent, review AI output, debug 1 edge case thật. Khép lại series Coding Agents.
Pinned_series_pick
Speed up dev and build, assemble a production-grade capstone vite.config.ts from the whole series, and migrate off Webpack or CRA step by step — with the concept-by-concept translation table. With a capstone config & migration explorer.
Pinned_series_pick
Ghép mọi tầng nội bộ lại: đọc Performance panel và Perfetto, khoanh vùng jank theo process/thread/giai đoạn pipeline, rồi kiểm chứng bằng một quy trình có hệ thống.
Pinned_series_pick
Ghép mọi phần chuyên sâu thành khung chẩn đoán triệu chứng → metric → công cụ → cách sửa, từ field data tới nguyên nhân gốc xuyên mọi tầng.
Pinned_series_pick
Assemble every technique from the series into one battle-tested production config, with a copy-paste dev/prod split — then a clear-eyed guide to when and how to migrate to Vite or Rspack. With a config capstone builder.
Pinned_series_pick
Service worker trong Next.js/Astro/Angular, runtime caching cho API có auth & token refresh, hàng đợi analytics offline, feature flag & kill switch, và khi nào KHÔNG nên dùng service worker. Tổng kết 20 phần.
Pinned_series_pick
Xây mental model đầu tiên: component tạo React element, React giữ UI đồng bộ với state, còn DOM chỉ là output được commit vào browser.
Pinned_series_pick
Package and upload to the Chrome Web Store, pass review, version and auto-update, port to Firefox and Edge, and build a capstone "Reading Ruler" extension that ties the whole series together. With an interactive ship checklist.
Pinned_series_pick
Ghép toàn series thành Order Platform thực tế: invariant, API, PostgreSQL, payment webhook, outbox, stream export, overload, observability, rollout và incident drills.
Pinned_series_pick
Đóng gói NestJS thành image tối thiểu, chạy migration/release an toàn, dựng CI/CD quality gates, rollout/rollback và hoàn thiện TaskFlow portfolio capstone.
Pinned_series_pick
Tổng hợp series bằng lab end-to-end: tạo source, probe, encode ladder, đóng gói HLS MPEG-TS và fMP4, phát bằng hls.js, profile, fault injection và xuất debug report.
Pinned_series_pick
Khép series bằng Mini Kanban: chốt public contract, package ESM và types, Custom Elements Manifest, SemVer, npm pack, rồi kiểm chứng trong HTML, React và Vue.
Pinned_series_pick
Capstone chuyển hosting/DNS không downtime: hạ TTL đúng lúc, dual-run và đồng bộ dữ liệu, acceptance matrix, rollback threshold, rồi debug NS/DS/A/TLS/HTTP/app.
Pinned_series_pick
Capstone ghép toàn series: xây SDK HTTP có runtime validation, branded IDs, typed errors, cancellation, ESM exports, declaration tests, project references và release gates.
Pinned_series_pick
Capstone command line: khi nào viết script, template bash an toàn, strict mode, trap cleanup, require_cmd, dry-run, parse args đơn giản và project doctor script.
Pinned_series_pick
Gom toàn bộ series thành một setup Neovim hoàn chỉnh: cấu trúc file, plugin specs, keymaps, checklist cài đặt và cheatsheet dùng hằng ngày.
Pinned_series_pick
Gói 18 phần thành một query layer theo feature: cấu trúc thư mục, quy ước loading/error, devtools & logging cho production, lộ trình migrate v4 → v5, so sánh với RTK Query/SWR, và checklist production-ready.
Pinned_series_pick
The whole series in one place: a decision guide for picking a package manager, a safe migration playbook between managers, Corepack pinning, and an end-to-end hardened install workflow.
Pinned_series_pick
Tie it together: a cva-based variant system, a sortable/filterable data table with TanStack Table, a command palette with cmdk, toasts with sonner, and the composition patterns of a real dashboard. With a live capstone demo.
Pinned_series_pick
Khép lại series: test component với Vitest + Vue Test Utils (mount, kích sự kiện, mock store/router), test composable, vài lưu ý e2e với Playwright, rồi capstone gộp router + Pinia + form validate + data fetching.
Pinned_series_pick
Ship like a senior: performance budgets and bundle analysis, testing with Vitest and Playwright, deploying to Vercel and self-hosting with Docker (standalone output), debugging with the Next Devtools MCP, and a capstone project.
Pinned_series_pick
Turn the series into something useful: a furniture room planner. Build furniture from primitives, click-to-place, drag-to-move, recolor materials, repaint the room, and swing day to night — the pattern behind product configurators.
Pinned_series_pick
The finale: build a bar chart with no D3 and no Chart.js. Implement scales, nice ticks, axes, gridlines and responsive sizing by hand — so you finally understand what every charting library does for you. With a live, editable chart.
Pinned_series_pick
A complete, practical CSS Grid reference: tracks, the fr unit, minmax & auto-fit, template-areas, alignment, item placement, and every container/item property — with a live interactive demo.
Pinned_series_pick
Tie it together: a complete real-world config (SPA + API proxy + cache + TLS), reusable includes, Docker & Compose deploy, worker tuning, a debugging cheat-sheet for the errors you will actually hit, and a capstone project.
Pinned_series_pick
Playbook debug Docker theo evidence: status, logs, inspect, events, stats; xử lý exit code, OOM, port, cache, network và disk.
Pinned_series_pick
Deep dive into the JS event loop: call stack, macrotask vs microtask queues, await desugaring, timer clamping, rAF, and predictable console ordering.
Pinned_series_pick
Where to store session and auth tokens in the browser: httpOnly cookies vs localStorage vs in-memory, JWT pitfalls, OAuth PKCE + BFF for SPAs, Set-Cookie hardening, and strict TypeScript patterns — with exercises.
Pinned_series_pick
Capstone: getopts, usage(), script structure, logging, env config, and a production-grade backup script with traps and validation — plus best practices and when NOT to use bash. Bilingual exercises.
Pinned_series_pick
Gom chín phần thành một vòng thực hành có chế độ tối thiểu và tiêu chuẩn, coi hồi phục là lựa chọn đúng khi ốm, kèm bảng theo dõi 7 ngày.
Pinned_series_pick
Capstone: treat the network as unreliable — socket error codes, mandatory error handlers, timeouts at every layer, retries with backoff & jitter, reconnecting clients, and a layered debugging toolkit with Node.js + TypeScript.
Hướng dẫn TypeScript dùng LangChain cho prompt và structured output, LangGraph cho state, branch và loop; rồi debug từng node bằng streaming, trace, breakpoint và time travel.
A bilingual, hype-free guide for frontend developers in the AI era: what actually changed, the 2026 web tech landscape, new ways of working with agents, the skills that rise vs fade, and a concrete 30/60/90 survival playbook.
A bilingual master guide to AI coding agents in 2026 — the 5 layers of control (rules, permissions, commands, skills, sub-agents), local vs cloud, single-to-multi-agent progression, prompting, and cost/context management.
Viết một skill handoff giữ tài liệu sống trong notes/ (progress, handoff log, architecture) và update mỗi lần đổi code, để agent mới resume mà không explore lại. Build từng bước + cách nâng lên global skill.
Từ mindset đúng (agent là cộng sự, không phải autocomplete), công thức CARET cho prompt, chuyển spec thành task, đến 5 patterns thực chiến và anti-patterns khi làm việc với coding agent.
Hệ thống config files điều khiển coding agent (Claude Code + Cursor): CLAUDE.md, settings.json, .mdc rules, MCP servers, commands, sub-agents — ý nghĩa, cách dùng, và setup thực tế.
Tại sao 1 agent không đủ cho dự án lớn, cách dùng Orchestrator pattern với 6 kiểu điều phối (fan-out, validation chain, specialist routing...), setup thực tế, và anti-patterns cần tránh.
Mổ xẻ kiến trúc bên trong 1 AI agent: agent loop, tool use mechanics, 3 tầng memory, planning patterns (ReAct, Plan-and-Execute, Tree of Thoughts), multi-agent system, và 7 cạm bẫy phổ biến.
Vì sao hallucination là bản chất của next-token prediction chứ không phải bug: 4 cơ chế, taxonomy 6 dạng dev gặp, mô hình phòng thủ Swiss-cheese 6 tầng, vụ thật (luật sư, Air Canada, slopsquatting), và cân phòng thủ theo rủi ro.
Vì sao base model "biết mọi thứ nhưng vô kỷ luật", cách alignment thuần hoá nó (RLHF, Constitutional AI, DPO), jailbreak & prompt injection (= SQL injection cho ngôn ngữ tự nhiên), vụ thật, và defense-in-depth cho app của bạn.
Token là đơn vị compression, đơn vị suy nghĩ, và đơn vị tính tiền của LLM. Bài đi sâu BPE tokenization, tiếng Việt đắt 2-3x, thinking tokens, và framework chọn subscription vs API.
Rule là gì, khác Skill ra sao, 3 loại scope (alwaysApply / globs / manual), cấu trúc .mdc file, best practices viết rule ngắn-chất, và 6 rule mẫu sẵn dùng cho project TypeScript/frontend.
Skill là gì, khác prompt/rule ra sao, cách viết SKILL.md chuẩn, frontmatter, progressive disclosure, và những sai lầm phổ biến khi lần đầu tạo skill cho Cursor AI agent.
Sub-agent là gì, vì sao cần, các loại subagent trong Cursor (generalPurpose, explore, shell...), cách delegate đúng cách, pattern song song vs tuần tự, và những sai lầm làm parent agent "nổ" context.
Customization stack 5 tầng: Rules, Skills, MCP, Sub-agents, Hooks. Chiến lược progressive customization, khi nào team-share và khi nào giữ personal, và cách maintain để config không biến thành technical debt sau 6 tháng.
Workflow 4 pha để ship feature với AI agent: từ ticket mơ hồ đến PR merge. Nguyên tắc decomposition, spec-first, vertical slice, và những prompt template dùng đi dùng lại cho scaffold + review.
Cấu trúc debug với AI: reproduce trước, hypothesis sau, fix cuối. Kỹ thuật minimal repro, git bisect với AI, stacktrace decoding, heisenbug hunting, và lý do vì sao AI thường fix sai khi bạn chưa verify cause.
Fine-tuning vs prompt vs RAG — quyết định framework. 4 loại fine-tune (full, LoRA, QLoRA, instruction tuning), data preparation, cost analysis, và 6 cạm bẫy phổ biến (overfitting, catastrophic forgetting).
Hành trình 70 năm của AI qua 7 era: symbolic AI, expert systems, statistical learning, deep learning, transformer, LLM, đến reasoning + agentic. Mỗi era có winter và breakthrough — bài học cho dev hôm nay.
Mọi đòn bẩy chi phí LLM quy về 3 nhóm: đừng gọi model, gọi nhẹ hơn, rẻ hơn mỗi token. 10 pattern thực chiến (prompt cache, semantic cache, routing, distillation, batch, quantization, self-host), cost math, và ROI framework.
7 dimension đánh giá model LLM, so sánh thực chiến Claude/GPT/Gemini/Llama family đầu 2026, thinking model vs regular, open-source vs proprietary, và decision framework để chọn model đúng task theo chi phí + chất lượng.
3 tầng của prompt (system/user/assistant), 6 nguyên tắc viết prompt hiệu quả, sampling parameters (temperature, top-p, top-k, stopping criteria), personalization qua system prompt, multi-turn strategy, và template tái dùng cho dev.
4 cơ chế kỹ thuật mà dev nào dùng LLM cũng nên hiểu sâu: BPE tokenization step-by-step, math của temperature scaling, top-p (nucleus) vs top-k sampling, sampling pipeline hoàn chỉnh, và parameter cheatsheet.
Giải thích từ first principles cách một model chỉ hiểu token lại "thấy" được ảnh, "nghe" được tiếng: patch tokenization, CLIP, projection layer, 3 kiểu fusion, dataflow, trade-off, ví dụ production thật, và khi nào KHÔNG nên dùng.
Tổng quan ecosystem LLM open weight 2026: 5 family chính, công cụ chạy local (Ollama, LM Studio, vLLM, llama.cpp), quantization formats (GGUF/GPTQ/AWQ), license gotcha, và hardware budget từ laptop đến cluster.
Mổ xẻ RAG: indexing pipeline, embeddings, vector DB, chunking strategies, retrieval (dense/sparse/hybrid), reranking, 8 failure mode phổ biến, và quyết định khi nào dùng RAG vs long context vs fine-tuning.
Review code AI sinh ra sao cho không bị lừa, self-review trước PR, test pyramid với AI, generate test không phải generate coverage giả, flaky test hunting, và checklist review chi tiết dùng được ngay.
Chiến lược dùng AI để onboard codebase lớn: bird-eye view trước, entry-point mapping, dependency tracing, git history archaeology. So sánh với đọc code tuần tự và grep thủ công — thứ đã cũ từ 2023.
Mổ xẻ embedding từ Word2Vec đến text-embedding-3: hình học của ý nghĩa, distance metrics, evaluation MTEB, visualization (PCA/t-SNE/UMAP), multimodal CLIP, và 6 cạm bẫy practical (anisotropy, drift, dimensionality).
Coding agent khác autocomplete ở chỗ nào, agent loop (observe-think-act) hoạt động ra sao, 4 level autonomy, khi nào để agent tự chạy vs khi nào human-in-the-loop, và những sai lầm của dev mới chuyển sang workflow agent-based.
Tìm hiểu về MCP - chuẩn kết nối mở cho AI Agents như Claude, Cursor, Copilot: transport layer, JSON-RPC 2.0, primitives và sơ đồ kiến trúc đầy đủ.
ReAct, Reflection, and Planning for LLM agents — when to use each, guardrails against runaway loops, and links to tool use and orchestration.
How LLM function calling bridges models to the world: JSON Schema tools, the request→execute→result loop, parallel calls, validation, MCP, and security.
A senior engineer framework for model selection — capability tiers, context, modality, cost, privacy, tool use — plus routing, cascades, and why benchmarks lie.
Why eval is the hardest part of shipping agents — golden datasets, offline vs online metrics, LLM-as-judge rubrics, human agreement, and regression in CI.
When to prompt, retrieve, or fine-tune: knowledge vs behavior, data needs, cost, privacy, SFT/LoRA/DPO — and why most teams start with prompt + RAG.
How senior engineers pack system prompts, tools, history, RAG, and output reserve into a fixed context window — and manage memory when the budget breaks.
EOS tokens, max_tokens, stop sequences, and finish_reason handling for production LLM agents — streaming, truncation, and runaway cost guards.
Agent prompt design: messages/roles, personas, few-shot trade-offs, CoT vs reasoning models, JSON schemas, templates, injection guards, iteration.
How LLMs turn logits into tokens — temperature, top_p, top_k, penalties, seeds — and why agent builders tune sampling differently for tool calls vs brainstorming.
Tokens are the atomic unit of LLM memory and cost. Learn subword tokenization, context window math, and agent budgeting before you ship.
A bilingual guide on the developer mindset for working effectively with AI. From crafting prompts to defining rules and skills — the thinking framework that separates power users from casual prompters.
Build publishable libraries with Vite (lib mode, ESM + CJS, .d.ts types, externalized peer deps, the exports map) and understand SSR plus the Environment API — the multi-runtime build model. With a library & environments explorer.
What vite build produces: the dist/ structure, automatic code splitting, manualChunks and advancedChunks for vendor splitting, asset hashing, source maps, target and minification. With a build output explorer.
Mô hình đa tiến trình ở mức sâu: Site Isolation và OOPIF, Back/Forward Cache, prerender và Speculation Rules, cùng Page Lifecycle API quản lý tài nguyên giữa các tab.
The Rollup-compatible plugin API: the hooks that matter (resolveId, load, transform), enforce (pre/post) and apply (serve/build) ordering, and writing your own virtual-module plugin. With a plugin hook timeline.
Đa luồng thật trên web: Web Workers, transferable vs SharedArrayBuffer, Atomics để đồng bộ, và cross-origin isolation (COOP/COEP) mở khoá bộ nhớ chia sẻ cùng timer phân giải cao.
Ảnh đi từ byte tới pixel: fetch, decode đồng bộ/bất đồng bộ, raster/composite; cùng decoding="async", Image.decode(), createImageBitmap, OffscreenCanvas và video frames.
Accessibility tree được dẫn xuất từ DOM thế nào: role/name/state, thuật toán tính tên, ignored/inert nodes, API nền tảng và cách kiểm tra bằng DevTools/CDP.
Environment variables in Vite: import.meta.env, the .env file cascade and priority, the critical VITE_ prefix that gates what reaches the client, built-in vars, define vs env, and custom modes. With an env & mode resolver.
Điều tra rò rỉ bộ nhớ bằng heap snapshot, Comparison và retainer path; hiểu detached DOM, Oilpan/V8 GC, weak references và giới hạn của phép đo memory.
Bên trong máy ảo JS: Ignition, Sparkplug, Maglev, TurboFan, hidden class, inline cache, elements kind và deoptimization — cùng cách đọc chúng mà không tối ưu mò.
Browser tạo một frame như thế nào: cơ hội update rendering, rAF, style/layout, observers, paint và composite; cùng content-visibility, idle callback và Scheduler API.
Vì sao cuộn thường mượt kể cả khi JS bận: compositor scrolling, main-thread scrolling, passive listeners, scroll anchoring, và cơ chế của scroll-linked effects.
Import assets like code: the default URL form, the ?url / ?raw / ?worker queries, inlining small assets, public/ vs imported assets, and import.meta.glob for bulk imports. With an asset import explorer.
Đi sâu vào nửa sau pipeline render của Chromium: property trees/layers, tiling, software/GPU raster, compositor thread, Viz và fast path của transform/opacity.
Turn the foundational arc into a debugging superpower: read a DevTools Performance trace through processes, threads, the rendering pipeline and the event loop, then map symptoms to root causes.
The browser's defenses: the same-origin policy, CORS, Content Security Policy, cookie protections (SameSite/HttpOnly), the sandbox and site isolation, and how they combine to contain hostile code.
CSS in Vite with zero config: plain side-effect imports, scoped CSS Modules, built-in Sass/Less/Stylus, the ?inline query for Shadow DOM, automatic PostCSS, Lightning CSS, and code-split CSS in the build. With a CSS pipeline explorer.
Where the web stores data: cookie scope, Web Storage, IndexedDB, Cache API and service workers — sync/async trade-offs, quotas, partitioning and lifecycle.
The network stack from the browser's side: the resource fetch lifecycle, HTTP caching (Cache-Control, ETag, the disk/memory cache), connection reuse, HTTP/2 and HTTP/3, and request prioritization.
How browser memory is managed across V8 and Blink Oilpan: call frames, heaps, generational tracing GC, reachability, and practical leak diagnosis.
The model that ties JS to rendering: task sources and queues, microtask checkpoints, promises, rAF, long tasks, and cooperative scheduling.
How Hot Module Replacement swaps a single module without losing state: the import.meta.hot API, HMR boundaries and propagation, why some edits trigger a full reload, and framework Fast Refresh. With an HMR boundary lab.
Inside modern V8: parsing, Ignition bytecode, Sparkplug and Maglev tiering, TurboFan optimization, Maps, inline caches and evidence-based performance work.
The pixel pipeline: how styled DOM becomes layout geometry, paint records, raster tiles and compositor frames — why invalidation and animation cost depend on context.
How the browser parses CSS into the CSSOM, resolves origins, layers, specificity and scope, computes values, and builds the layout tree — including when stylesheets block rendering.
Why Vite pre-bundles node_modules into .vite/deps: collapsing hundreds of module requests into one, converting CommonJS to ESM, and caching it all. Plus optimizeDeps include/exclude and when to clear the cache. With a pre-bundle visualizer.
How the renderer turns a byte stream into the DOM tree: tokenization, tree construction, the preload scanner, why scripts block parsing, and how async/defer change the picture.
A bird's-eye walkthrough of everything that happens between pressing Enter and the first paint: URL parsing, DNS, TCP/TLS, the HTTP request, response handling, and handing bytes to the renderer.
Opening the series: the browser is not one program but many cooperating processes. Understand the browser/renderer/GPU/network split, sandboxing, site isolation, and the threads inside a renderer — the foundation for everything else.
How the dev server actually works: serving source over native ESM, rewriting bare and relative imports into fetchable URLs, transforming each file on request, and why navigation only fetches the new modules. With an on-demand request demo.
Giữ hiệu năng không trôi theo thời gian: ngân sách bundle với size-limit, treemap analysis, cổng CI ổn định, bisect hồi quy, scorecard, và văn hóa performance.
The Vite config top to bottom: defineConfig, plugins, root and base, resolve.alias, the dev server (port, open, proxy), define, css, and build options — plus config as a function of command and mode. With a live config builder.
Chế ngự analytics, ads, embed và tag manager: đo tác động bên thứ ba, facade pattern cho embed, Partytown để đẩy sang worker, lazy iframe, async/defer, và đặt budget cho third-party.
Tầng truyền tải ảnh hưởng tốc độ ra sao: HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC), head-of-line blocking, nén Brotli/Zstd, TLS 1.3 & 0-RTT, CDN/edge, và cache-control nâng cao.
Vì sao SPA chậm dần sau nhiều giờ: rò rỉ bộ nhớ, detached DOM, listener/timer không gỡ, đo bằng heap snapshot và measureUserAgentSpecificMemory, và giữ app nhẹ qua phiên dài.
Why Vite is fast: native ESM in dev means no bundling on startup, while production still bundles with Rolldown. Scaffold your first project, understand dev vs build, and see the two-strategy design. With a dev-startup race demo.
Nửa sau hiệu năng render: forced reflow / layout thrashing, content-visibility, CSS containment, kỷ luật will-change, selector cost, và animation chỉ chạm compositor để giữ 60fps.
Đào sâu INP: phân rã input delay / processing / presentation, Long Animation Frames (LoAF) để tìm thủ phạm, scheduler.postTask/yield, fallback đa trình duyệt, và Web Worker.
CSR, SSR, SSG, ISR, streaming SSR và islands/partial/progressive hydration ảnh hưởng LCP, INP, CLS, TTFB ra sao — và khung quyết định chọn kiến trúc render theo mục tiêu hiệu năng.
Rút ngắn đường tới byte quan trọng: preconnect/dns-prefetch, preload/modulepreload/prefetch, fetchpriority & Priority Hints, 103 Early Hints, và Speculation Rules cho prefetch/prerender.
Đo người dùng thật như senior: web-vitals Attribution để phân rã LCP/INP/CLS, lấy mẫu, percentile p75, gửi bằng sendBeacon, và CrUX API/BigQuery.
Combine all 11 parts into a real A–Z audit workflow, set concrete performance budgets, and block regressions with Lighthouse CI plus RUM alerts. Includes a full checklist.
The network layer matters: HTTP caching (Cache-Control, ETag, immutable), CDN and edge, Brotli/Zstandard/Gzip compression, HTTP/2-3, and service-worker strategies for offline cache.
Web fonts can slow LCP and cause CLS. Choose WOFF2, a deliberate font-display policy, selective preload, self-hosting, subsetting, and metric-compatible fallbacks.
Share code between independently deployed apps at runtime: hosts, remotes, exposes, remotes, and the shared singleton trick that stops React being downloaded twice. With a live federation visualizer.
Images are often the heaviest part of a page. Modern formats (AVIF/WebP), responsive images with srcset/sizes, lazy loading in the right places, decoding, and video/iframe optimization.
Client JavaScript is often costly because it must download, parse, compile, and execute. Measure bundles, split by route/component, tree-shake, lazy-load, and trim dependencies.
Layout jumps happen when content is inserted without reserving space. Set image/iframe dimensions, reserve space for dynamic content and ads, handle font swap, and use transform instead of layout changes.
How module resolution actually works (resolve, alias, extensions, modules, externals), then write a real custom loader and a custom plugin tapping compiler hooks. With a live loader & plugin lab.
Janky clicks mean the main thread is blocked. Chunk long tasks, yield with scheduler.yield/setTimeout, split urgent from non-urgent updates, and offload heavy computation to Web Workers.
Break LCP into TTFB, resource load delay, resource load duration, and element render delay; then fix discovery, priority, bytes, rendering, or delivery at the actual bottleneck.
The journey from HTML to pixels: DOM, CSSOM, render tree, layout, paint. Why CSS and JS block rendering, and resource hints (preload, preconnect, prefetch, defer, async) to control load order.
Measure right before you fix right. Lighthouse and the Performance tab for diagnosis (lab), CrUX and self-built RUM for real users (field), plus how to throttle to match typical hardware.
Measure what is actually in your bundle: webpack-bundle-analyzer treemaps, finding bloat and duplicates, performance budgets that fail the build, and prefetch/preload hints. With an interactive bundle analyzer.
The three metrics Google uses to score experience: LCP (loading), INP (interaction), CLS (layout stability). What each measures exactly, "good" thresholds, the p75 percentile, and measuring with web-vitals.
The file-naming strategy that lets browsers cache bundles for a year: [contenthash], deterministic moduleIds, extracting the runtime, and why splitting vendors keeps hashes stable. With an interactive contenthash cache simulator.
Opening the series: why performance is a feature, perceived vs actual performance, the RAIL model with human-perception time thresholds, and the "measure first, fix later" principle.
How Webpack drops unused exports: why ES modules are required, the role of sideEffects and usedExports, minification with Terser, and what mode: production turns on. With an interactive tree-shaking visualizer.
Stop shipping one giant bundle: dynamic import() for route-level lazy loading, splitChunks for vendor and shared code, runtimeChunk, and magic comments for naming and prefetching. With an interactive code-splitting visualizer.
The fast feedback loop: webpack-dev-server, Hot Module Replacement that preserves state, and choosing the right devtool source-map mode for development vs production. With an interactive HMR and source-map lab.
Where loaders transform individual files, plugins hook into the whole build — HtmlWebpackPlugin, DefinePlugin, MiniCssExtractPlugin, CopyWebpackPlugin — and how the tapable hook system works. With an interactive plugin lifecycle visualizer.
How Webpack transforms non-JS files into modules — babel-loader for TS/JSX, css-loader and style-loader, Sass, and built-in asset modules — plus why loader chains run right-to-left. With an interactive loader pipeline.
webpack.config.js from scratch — mode, entry, output, context, and resolve. Turn the zero-config magic into explicit configuration you control, including aliases and extensions. With an interactive config builder.
Cẩm nang Git nâng cao theo tình huống thực tế: tách commit bằng patch, chuyển thay đổi, làm nhiều branch song song, tìm commit gây lỗi và phục hồi lịch sử an toàn.
Mental model Git dành cho developer: HEAD và branch thực sự là gì, cách đọc revision, phân biệt reset/restore/revert, dùng reflog cứu lịch sử và workflow an toàn khi làm việc nhóm.
Why bundlers exist, the dependency graph Webpack builds from a single entry, the four core concepts (entry, output, loaders, plugins), and your first real build. With an interactive dependency-graph visualizer.
Chi phí khởi động service worker, cái bẫy fetch handler rỗng làm chậm mọi request, ngân sách precache, gộp request trùng (coalescing), tận dụng asset immutable, và bộ công cụ đo lường SW trong DevTools.
Field guide nối GDP, lạm phát, lãi suất và tỷ giá với nhu cầu, biên lợi nhuận, dòng tiền và định giá doanh nghiệp; kèm snapshot Việt Nam giữa năm 2026. Không phải lời khuyên đầu tư.
Fed funds, lợi suất Mỹ 2 năm/10 năm khác nhau ra sao; năm kênh truyền dẫn qua USD, tỷ giá, dòng vốn, lợi nhuận và định giá tới chứng khoán Việt Nam. Không phải lời khuyên đầu tư.
Giữ service ổn định khi dependency chậm hoặc traffic tăng: deadline, cancellation, concurrency budget, load shedding, retry, circuit breaker và graceful shutdown.
Xử lý upload, export và transform dữ liệu lớn với memory hữu hạn: stream.pipeline, highWaterMark, abort, size limit, integrity, cleanup và observability.
Điều tra Node.js bằng evidence: event-loop delay, CPU profile, heap snapshot, RSS/native memory, diagnostic report, trace correlation và controlled experiment.
Cô lập tenant xuyên HTTP, PostgreSQL RLS, cache, queue và object storage; kiểm soát authorization, noisy neighbor, migration, audit và incident response.
Xử lý webhook đáng tin cậy: raw-body signature, replay defense, inbox, duplicate/out-of-order event, payment state machine, reconciliation và audit.
Vì sao SW cần HTTPS và scope quan trọng, những gì tuyệt đối không được cache (Authorization, PII), toàn vẹn nội dung và CSP cho SW, rủi ro chuỗi cung ứng, và cách tránh cache poisoning biến SW thành lỗ hổng.
Why plain files stop scaling, and how to set up a modern extension project with Vite, CRXJS, TypeScript and React — HMR, bundling, npm packages, and a typed manifest. With an interactive build-pipeline visualizer.
Tải file lớn chạy nền với Background Fetch API có progress UI và sống sót khi đóng tab, cập nhật nội dung định kỳ bằng Periodic Background Sync, cùng permission, recordPayment-style UX và fallback.
Giao tiếp giữa trang và service worker: postMessage một chiều, MessageChannel để có phản hồi, BroadcastChannel cho nhiều tab, và Clients API (matchAll, openWindow, focus, navigate) để SW điều phối cửa sổ.
tabs, scripting, contextMenus, commands (keyboard shortcuts) and notifications — the toolkit that turns a toy into a real product. With an interactive API explorer.
Đo và xin dung lượng bền với StorageManager (estimate, persist), hiểu chính sách eviction best-effort vs persistent, pattern dùng IndexedDB trong service worker, và dọn cache theo LRU để không vượt quota.
The permission model: activeTab, optional permissions and runtime requests, host permissions, the content security policy, and how to write an extension that users install and reviewers trust. With an interactive permissions inspector.
Hiểu NestJS giải quyết bài toán gì, dựng TaskFlow API bằng NestJS 11 và TypeScript strict, rồi lần theo một request từ bootstrap tới controller.
Thiết kế controller mỏng, route REST có chủ đích, status/header/query/param đúng ngữ nghĩa và xây Tasks API in-memory có thể kiểm thử bằng curl.
Làm chủ provider token, custom provider, useClass/useValue/useFactory/useExisting, scope và cách thiết kế dependency có thể thay thế, kiểm thử.
Dùng module như public API của capability, kiểm soát provider visibility, tránh global/circular dependency và tạo dynamic module cấu hình rõ ràng.
Lần theo middleware, guard, interceptor, pipe, controller và exception filter; đặt auth, validation, logging và error mapping đúng tầng.
Validate environment lúc startup, chia config theo namespace, bảo vệ secret, chuẩn hóa structured logging và biến main.ts thành bootstrap có thể kiểm thử.
Thiết kế API contract có runtime validation, response serialization, pagination, versioning, stable error và OpenAPI để client có thể tích hợp an toàn.
Kết nối PostgreSQL bằng Prisma 7 driver adapter, quản lý schema/migration/client lifecycle và implement repository mà không để ORM rò vào domain.
Đưa business rule ra khỏi Nest/Prisma, thiết kế domain model và application use case, map adapter ở composition root, giữ modular monolith dễ test.
Thiết kế transaction boundary, optimistic concurrency, idempotency key và retry an toàn để TaskFlow đúng khi nhiều request chạy đồng thời.
Xây password login an toàn, access JWT có issuer/audience, global Passport guard, refresh session rotation/reuse detection và logout/revoke có state.
Thiết kế permission/policy/resource authorization, tenant isolation, chống IDOR và cấu hình Helmet, CORS, CSRF, rate limit, audit log đúng threat model.
Xây testing pyramid cho domain/use case/module/Prisma/HTTP, dùng Nest TestingModule, Supertest và Testcontainers, giữ test deterministic và cô lập.
Đo p95/p99, event loop, query và memory; thử Fastify đúng cách, thiết kế cache tenant-aware/invalidation và bảo vệ hệ thống khỏi overload.
Đưa tác vụ chậm sang BullMQ/Redis, thiết kế retry/backoff/dead letter, xử lý job idempotent và nối PostgreSQL transaction với queue qua outbox.
Chọn SSE hay WebSocket, xác thực connection, authorize room theo tenant, xử lý reconnect/replay/backpressure và broadcast qua nhiều Nest replica.
Thêm GraphQL adapter lên cùng use case, thiết kế schema/pagination/error/auth, giải N+1 bằng DataLoader và giới hạn depth/complexity/operation.
Tách Notification service có lý do, dùng RabbitMQ event at-least-once và gRPC nội bộ có deadline, version contract, idempotency, tracing và ownership dữ liệu.
Instrument traces/metrics/logs bằng OpenTelemetry, thiết kế low-cardinality RED metrics, liveness/readiness và shutdown drain HTTP/DB/queue an toàn.
Dùng ReadableStream và TransformStream trong service worker để ghép app shell từ cache với nội dung động từ mạng thành một response chảy dần — render tiến triển, cải thiện TTFB/LCP, và stream từ cache.
Vì sao việc khởi động service worker làm chậm navigation, và cách navigationPreload chạy request mạng song song với lúc SW thức dậy: bật preload, đọc preloadResponse, đặt header, và kết hợp với network-first.
The popup, options page, side panel, and the toolbar action (badge, icon, title): choosing the right surface, wiring each to storage, and the action API for ambient status. With an interactive mock browser.
Xử lý cập nhật service worker như production: skipWaiting an toàn vs prompt, bug "double reload" của controllerchange, lệch phiên bản giữa SW và asset, deploy nguyên tử, và kill switch để gỡ SW khi sự cố.
Làm chủ point/vector/direction, dot/cross, chuỗi local→screen, matrix và normal matrix, quaternion/slerp, project/unproject, depth precision, floating origin và reversed depth.
Mở pipeline renderer: render lists, draw calls, passes, depth test/write, z-fighting, transparency sorting, alpha strategies, render targets, MRT, color pipeline và playbook debug.
Design a Three.js runtime that survives remounts, hidden tabs, stale asset loads and context loss: explicit frame phases, fixed-step simulation, resource ownership, cancellation and testable lifecycle contracts.
Turn frame time into an engineering control loop: diagnose CPU versus GPU bottlenecks, budget draw/vertex/fragment/upload work, precompile variants, and ship adaptive quality with SLOs and rollout guardrails.
Treat every glTF as a versioned production contract: coordinate and naming rules, slot-aware KTX2, tier budgets, CI validation, immutable delivery, race-safe loading and provenance.
Make Three.js production systems testable and operable: deterministic clocks, browser/visual/perf tests, failure injection, privacy-safe telemetry, accessible canvas twins and incident SLOs.
Đánh giá WebGPU bằng dữ liệu, viết material bằng TSL, nhận diện blocker của ShaderMaterial/EffectComposer và rollout renderer mới mà không đặt production vào một cú cược lớn.
Dùng conditional type như type function: kiểm soát distribution, never/any/unknown, Extract/Exclude, giữ correlation cho event và SDK mà không làm type checker quá tải.
Làm chủ mapped type nâng cao: homomorphic mapping, modifiers, key remapping/filtering, string-number-symbol keys và API sinh từ schema mà vẫn giữ contract dễ kiểm thử.
Dùng variadic và labeled tuples để giữ nguyên parameter list qua partial application, Promise concurrency, constructor wrapper và function pipeline mà không rơi về any[].
Biến route, event topic và i18n placeholder thành contract có type bằng template literals, recursive infer và constrained infer—đồng thời giữ runtime parser cùng một grammar.
Viết recursive type có điểm dừng, depth fuel và seen set; chẩn đoán TS2589, đo chi phí bằng diagnostics/trace, và biết lúc nào nên chuyển sang code generation.
Dùng distributive conditional, mapped union và union-to-intersection để giữ correlation cho event/job API; tránh bẫy keyof union, union ordering và generic explosion.
Thiết kế inference như public contract: contextual typing, candidate collection, literal preservation, partial inference, NoInfer, higher-order API và type tests cho config, query, builder.
Dựng mental model từ file video tới màn hình: container, stream, packet, frame, demux, decode, render; phân biệt remux, transcode và kiểm chứng bằng FFmpeg.
Tách rõ decoder, encoder và renderer; hiểu software/hardware path, packet/frame queue, backpressure, latency và cách đo từng tầng bằng fixture FFmpeg tự tạo.
Hiểu time base, PTS/DTS, CFR/VFR, GOP, I/P/B-frame, seek và A/V sync; tự tạo fixture có B-frame và VFR rồi đọc timeline bằng ffprobe.
Phân tầng format/stream/frame metadata; đọc rotation, SAR/DAR, color tags, audio layout, language và disposition bằng fixture FFmpeg có hai audio track.
Hiểu scope và thứ tự option, chọn stream bằng -map, rồi phân biệt chính xác demux, decode, filter, encode, mux, remux và transcode trong một lệnh FFmpeg.
Xây renderer bằng filtergraph: scale, crop, pad, overlay, drawtext, burn subtitle và mix audio; đồng thời quản lý pad, timestamp, aspect ratio và encoding đầu ra.
Theo một file MP4 từ server vào thẻ video: moov/mdat, faststart, byte-range, MIME, CORS, autoplay, buffered/seekable và quy trình debug progressive playback.
Đọc master/media playlist HLS, hiểu ABR, keyframe alignment, MPEG-TS so với fMP4, rồi tự package một stream nhiều rendition bằng FFmpeg.
Chọn đúng giữa stream copy và cắt chính xác, nối bằng concat demuxer hoặc concat filter, rồi bảo toàn metadata, audio và subtitle mà không phá timeline.
Dùng ffprobe đọc format, stream, packet và frame dưới dạng JSON; sau đó rút gọn dữ liệu thành báo cáo đủ nhỏ để debug, review asset và tự động hóa pipeline.
Mổ file .ts từ sync byte 0x47 đến PID, PAT/PMT, PES, PCR, PTS/DTS và continuity counter; hiểu vì sao TS chịu lỗi tốt nhưng không thể cắt byte tùy ý.
Chọn giữa video element, Media Source Extensions và WebCodecs; tự append fMP4, quản lý SourceBuffer/backpressure và xử lý VideoFrame an toàn.
Dùng Network, Media, Sources, Performance và chrome://media-internals để lần request, buffer, decoder, frame drop; sau đó đóng gói HAR và FFmpeg report.
Chẩn đoán stall, màn hình đen, chỉ có tiếng, lệch A/V và seek hỏng bằng một quy trình đi từ HTTP, CORS, Range, MIME tới demux, decode, buffer và render.
Phân biệt CSAI/SSAI, đọc EXT-X-DATERANGE và SCTE-35, rồi rewrite HLS playlist trên fixture tự sở hữu; hiểu vì sao thay binary TS trực tiếp rất dễ vỡ.
Phân biệt Web Components, Custom Elements, Shadow DOM và template; xây kb-task-card đầu tiên theo hướng progressive enhancement bằng API gốc của trình duyệt.
Hiểu quy tắc đặt tên, CustomElementRegistry, cơ chế upgrade và lifecycle; làm kb-task-card an toàn khi detach, reconnect, di chuyển hoặc đổi document.
Thiết kế contract cho kb-task-card: attribute primitive, property có type, boolean reflection, method có chủ đích và CustomEvent để Kanban giao tiếp lỏng.
Dùng template, state ownership và targeted DOM updates để kb-task-card render idempotent, giữ focus/node identity và không biến dữ liệu ngoài thành innerHTML gây XSS.
Hiểu host, light DOM, shadow tree và composed tree; dùng slot mặc định, named slot, fallback và slotchange để xây kb-task-column có API composition rõ ràng.
Thiết kế ranh giới CSS cho Web Components bằng inheritance, custom properties, :host, ::slotted, ::part, exportparts và constructable stylesheets có fallback.
Xây kb-priority-picker tham gia HTML form như control gốc: submit value, validation, labels, disabled, reset và state restoration bằng ElementInternals.
Kiểm thử public contract của Accessible Mini Kanban trên browser thật: lifecycle, upgrade, attribute/property, event, slot, keyboard và form trước khi refactor sang Lit.
Làm chủ event phases, bubbles, composed, cancelable, retargeting và focus; xây kb-task-card có semantics, accessible name và keyboard contract đúng nền tảng.
Hiểu Lit 3 như lớp render và reactivity trên Web Components; viết lại kb-task-card mà vẫn giữ nguyên public contract, accessibility và contract test.
Thiết kế state ownership cho Mini Kanban bằng reactive properties, immutable updates, Lit controllers, @lit/context và @lit/task có chống race/abort.
Đưa Mini Kanban tới production: đo performance, giữ DOM ổn định, đặt ranh giới bảo mật và progressive-enhance SSR bằng Declarative Shadow DOM.
chrome.storage in depth: local vs sync vs session, quotas and item limits, the onChanged event for reactive UIs, storage as the single source of truth, and migrating data shapes between versions. With an interactive storage explorer.
Từ alert tới nguyên nhân: logs, metrics, traces, events, kubectl debug, SLO và quy trình incident có evidence, rollback và postmortem.
Hiểu đúng registrar, nameserver, DNS zone, hosting, origin và CDN; sau đó trỏ tên miền theo runbook có thể kiểm tra và rollback.
Đọc và sửa DNS zone như một kỹ sư vận hành: record types, apex, delegation, TTL, cache, negative caching, verification và rollback.
Runbook chuyển domain đăng ký tại Hostinger sang Cloudflare authoritative DNS: audit web và mail, xử lý DNSSEC, verify, rollback an toàn.
Gắn apex và www vào GitHub Pages đúng thứ tự: verify ownership, bind repository, publish DNS, cấp HTTPS và rollback không tạo takeover.
Giữ DNS ở Cloudflare nhưng chạy website trên Hostinger: chọn đúng A/CNAME, bảo toàn email, bật proxy có chủ đích và rollback an toàn.
Deploy Astro lên Cloudflare Pages bằng Git integration, tách production/preview, gắn apex hoặc subdomain, kiểm chứng và rollback deployment.
Runbook production để trỏ domain về VPS: kiểm kê DNS, khóa port, đặt Nginx trước app loopback, cấp TLS công khai, test bằng curl --resolve và rollback an toàn.
Hiểu DNS-only và Proxied, triển khai Full (strict), chọn public cert hay Origin CA, khóa origin, giữ client IP đúng và debug lỗi Cloudflare 521–526.
Bảo toàn email khi đổi DNS/hosting: inventory MX, gộp đúng một SPF, lấy DKIM từ provider, rollout DMARC theo RFC 9989, kiểm CAA và rollback không mất mail.
Mổ xẻ web app manifest đầy đủ: maskable icons, shortcuts, share_target, display_override, launch_handler, file/protocol handlers, rồi điều khiển install bằng beforeinstallprompt và xử lý đặc thù iOS.
Workbook thực chiến giúp bạn đọc trọn bộ BCTC hợp nhất: đối chiếu số liệu, phân tích 5 năm, kiểm tra chất lượng lợi nhuận, chuẩn hóa và viết memo. Không phải lời khuyên đầu tư.
Biến một ý tưởng giao dịch thành playbook có thể kiểm chứng: thị trường, bối cảnh, setup, trigger, entry, invalidation, exit, sizing và điều kiện không giao dịch. Không phải lời khuyên đầu tư.
Nhận diện trend, range, volatility và breadth; phân vai cho từng timeframe; xây regime dashboard và tránh đổi khung thời gian để hợp thức hóa một lệnh sai.
Thiết kế backtest point-in-time, mô phỏng tín hiệu và execution, xử lý bias, costs, out-of-sample, robustness và tiêu chí quyết định keep/revise/retire.
Hiểu order book, spread, queue, partial fill, adverse selection, slippage và market impact; xây execution plan và transaction-cost analysis cho trader.
Từ stop từng lệnh đến risk book: exposure, correlation cluster, factor, drawdown, liquidity, stress test, risk budget và quy trình deleveraging.
Xây event calendar, expectations map, scenario tree, gap-risk sizing và playbook trước–trong–sau báo cáo kết quả kinh doanh cùng các sự kiện doanh nghiệp.
Thiết kế nhật ký giao dịch có dữ liệu, đo expectancy, drawdown, attribution, execution và process; xây review ngày–tuần–tháng để cải thiện có kiểm soát.
Ghép mandate, data, playbook, regime, backtest, execution, portfolio risk, event calendar, journal và governance thành hệ điều hành giao dịch cá nhân.
Lộ trình học Neovim 2025-2026: mental model, setup hiện đại, kỹ năng cần luyện, stack plugin nên dùng và cách đi từ gà mờ đến pro.
Dựng cấu hình Neovim sạch từ đầu: init.lua, options, keymaps, autocommands, leader key, backup config và health check.
Học ngôn ngữ thao tác text của Vim: modes, operators, motions, text objects, registers, macros và bài tập luyện phản xạ.
Không lạc trong project lớn: hiểu file, buffer, window, tab, quickfix, arglist và workflow mở/sửa nhiều file trong Neovim.
Cài lazy.nvim, chia plugin specs, hiểu lazy-loading, dependencies, opts/config, lockfile, update và cách không biến config thành mớ rối.
Setup LSP hiện đại với vim.lsp.config, vim.lsp.enable, nvim-lspconfig, mason-lspconfig, diagnostics, keymaps và blink.cmp stable.
Tách rõ formatter, linter, LSP và Treesitter: setup conform.nvim, nvim-lint, parser/highlight, format-on-save và checklist debug.
Thay Command Palette của VSCode bằng picker, live grep, quickfix, LSP references, symbols, rename và workflow refactor an toàn.
Dựng workflow hằng ngày trong Neovim: gitsigns, terminal tích hợp, test runner, debug mindset, quickfix và khi nào nên dùng shell.
Map thói quen VSCode sang Neovim: explorer, command palette, terminal, search, multicursor, snippets, settings, extensions và lộ trình 30 ngày.
Giữ Neovim nhanh và bền: profiling, checkhealth, lockfile, update plugin, backup, sync dotfiles, debug config và chống plugin bloat.
Ghép cả series thành một PWA production: web app manifest, install prompt, update UX chuẩn, offline + background sync + push, checklist testing/debugging, Lighthouse và deploy. Tổng kết toàn bộ kiến thức.
Kết hợp runtime, type, artifact và consumer tests; migrate legacy theo boundary, kiểm Type SemVer, nâng compiler bằng canary và vận hành governance không nghẽn delivery.
How isolated pieces talk: one-shot sendMessage, long-lived connect ports, the return-true async trap, broadcasting to tabs, and externally_connectable. With an interactive messaging playground.
Command line cho môi trường thật: ssh config, scp, rsync, tail log remote, docker ps/logs/exec/cp/stats, compose up/logs/exec/down và checklist debug container.
Typing toàn trình từ queryFn tới component: queryOptions & DataTag suy luận type, generic query factory tái dùng, skipToken thay cho enabled, kết hợp zod infer, và xoá sạch as khỏi lớp data.
Workflow Node/package manager trong terminal: node/npm/pnpm version, corepack, npm run, pnpm exec/dlx, npm ci, frozen lockfile, env vars, npm ls và pnpm why.
Workbox của Google gói gọn mọi thứ đã học: precaching tự động, routing, strategies, expiration, background sync. Hai chế độ generateSW và injectManifest, tích hợp build qua vite-plugin-pwa.
Vì sao v5 mặc định tracked queries, tinh chỉnh notifyOnChangeProps, dùng useQueries cho danh sách động, cơ chế structural sharing bên trong và viết structuralSharing tuỳ chỉnh, cùng cách cô lập subscription để chặn re-render thừa.
Scale TypeScript bằng build graph rõ: composite projects, tsc -b, declaration boundaries, incremental build, diagnostics và cách giảm type instantiation cost.
Debug máy dev bằng CLI: ps, pgrep, kill, lsof, ss/netstat, nc, top/htop, env, PATH, command -v, df/du và recipe xử lý port bị chiếm.
Reference học và làm thật cho Tailwind v4: bản đồ utility, recipe layout/component, @theme design tokens, shadcn semantic tokens, gotchas và checklist debug production.
Làm chủ mutation ở mức production: mutationKey & setMutationDefaults, theo dõi mutation đang chạy bằng useMutationState, scope chạy tuần tự, optimistic update trải nhiều query, xử lý toàn cục ở MutationCache và hàng đợi offline.
The event-driven heart of MV3: the lifecycle (install, wake, idle, terminate), why there is no persistent state, alarms vs setTimeout, and registering listeners correctly. With a live lifecycle simulator.
Debug HTTP API bằng terminal: curl GET/POST, headers, auth, status code, redirects, timeout, verbose mode, lưu response và jq để đọc/lọc JSON.
Gửi thông báo đẩy ngay cả khi tab đóng: Push API + Notifications API, xin quyền đúng cách, VAPID keys, đăng ký PushSubscription, server gửi push, event push và notificationclick.
Tulip mania, dot-com, khủng hoảng 2008 và các vụ gian lận kiểu Enron/Wirecard — giải phẫu bong bóng, red flag gian lận (dòng tiền vs lợi nhuận, bên liên quan, đổi kiểm toán) và bài học. Không phải lời khuyên đầu tư.
Ghép dữ liệu realtime với React Query: đẩy sự kiện vào cache bằng setQueryData thay vì invalidate, quyết định patch vs invalidate, gom sự kiện, một query làm kênh subscription, và cập nhật từng phần an toàn type.
Dùng TypeScript để bảo vệ dependency direction: domain, ports/adapters, capability interfaces, composition root, anti-corruption layer và compile-time architecture tests.
Git CLI hằng ngày cho developer: status, diff, add -p, commit, log, branch/switch, stash, restore, rebase/pull, review trước khi push và rollback an toàn.
Harden workload Kubernetes bằng RBAC tối thiểu, Pod Security Restricted, Secret an toàn, NetworkPolicy, image bất biến và audit drill.
Đa dạng hoá toàn cầu, rủi ro tỷ giá (hedged vs unhedged), ADR/GDR, ETF quốc tế, home bias và thuế xuyên biên giới — kèm ví dụ số về tác động tỷ giá lên lợi nhuận. Không phải lời khuyên đầu tư.
Giữ cache qua reload với persistQueryClient + persister sync/async, kiểm soát buster và maxAge, lọc dữ liệu nhạy cảm khi dehydrate, hàng đợi paused mutations chạy lại khi online, và đồng bộ cache đa tab.
Ghép command thành workflow: stdin/stdout/stderr, pipe, >, >>, 2>, tee, command substitution, xargs, while read và pattern xử lý file hàng loạt an toàn.
Gửi lại request thất bại khi có mạng trở lại với Background Sync API, xây hàng đợi bằng IndexedDB, xử lý event sync và retry, Periodic Background Sync, cùng fallback cho trình duyệt không hỗ trợ.
Options (call/put, payoff, premium), hợp đồng tương lai VN30, margin/đòn bẩy, chứng quyền có bảo đảm (CW), và rủi ro thanh lý/cháy tài khoản — kèm cảnh báo rủi ro mạnh và biểu đồ payoff. Không phải lời khuyên đầu tư.
Đọc-ghi cache trực tiếp với getQueryData/setQueryData và bản số nhiều getQueriesData/setQueriesData, invalidate bằng predicate và refetchType, cancelQueries/removeQueries, rồi subscribe vào cache để đồng bộ chéo.
Ship package TypeScript đáng tin: declaration emit, exports map, public type surface, type tests, API Extractor mindset và semver cho thay đổi inference.
Inject JavaScript and CSS into web pages: match patterns, run_at timing, the isolated world, injecting your own UI, and the gotchas of touching someone else’s DOM. With an interactive injection lab.
Tìm kiếm codebase như senior: rg cho nội dung, find/fd cho file, glob/exclude, context lines, file list, null separator và recipe tìm config/TODO/symbol.
Fibonacci retracement/extension, đám mây Ichimoku, price action (hỗ trợ/kháng cự, breakout, retest), volume profile và phân tích đa khung thời gian — nâng cấp lăng kính giá từ Phần 5–6. Không phải lời khuyên đầu tư.
Tải data trước theo ý định người dùng: prefetch on hover/focus/viewport, ensureQueryData vs prefetchQuery, prefetchInfiniteQuery, route loader (React Router & TanStack Router) và cách triệt tiêu request waterfall.
Các lệnh đọc file và log hằng ngày: cat, less, head, tail -f, wc, file, du, df, sort, uniq, cut, diff và cách inspect output không mở editor.
Cache versioning đúng cách, dọn cache cũ khi activate, giới hạn số lượng và expiration, quota & eviction, opaque response và cạm bẫy CORS, cùng cách tránh "cache độc" làm kẹt người dùng ở bản cũ.
Phí giao dịch, thuế bán cổ phiếu 0.1% ở Việt Nam, thuế cổ tức, và vì sao chi phí nhỏ ăn mòn lãi kép khủng khiếp qua 20 năm — kèm bài toán turnover vs buy-and-hold. Không phải lời khuyên đầu tư.
Chạy React Query trên server: prefetch rồi truyền cache xuống client bằng dehydrate + HydrationBoundary, dùng QueryClient đúng cách trong React Server Components, và streaming data với gói next-experimental.
Hiểu runtime module trước compiler: NodeNext vs Bundler, package type/exports, import type, file extension, dual-package hazard và cách debug resolution.
Nền tảng terminal cho developer: prompt, cwd, command/args/flags, exit code, path, ls/cd/pwd, tạo-di chuyển-copy-xóa file, shortcut và bài tập.
Các lớp tài sản ngoài cổ phiếu — REITs, trái phiếu (yield, duration, lãi suất), vàng/hàng hóa, tiền mặt — tương quan của chúng và vai trò trong phân bổ đa tài sản. Không phải lời khuyên đầu tư.
Cấu hình QueryClient ở mức senior: defaultOptions cho queries/mutations, QueryCache & MutationCache với onError/onSuccess toàn cục, networkMode, structuralSharing, và setQueryDefaults theo từng nhóm key.
Bonus track: instead of remembering to sanitize at every sink, Trusted Types makes the browser reject raw strings at innerHTML, eval, and script.src — values must come from a registered policy. Enforce vs report-only, with a live simulator.
How the popup, content script, service worker and options page relate — what each one can and cannot do, why they are isolated, and the data-flow that ties them together. With an interactive context map.
Ghép mọi thứ thành app mở được khi mất mạng: kiến trúc app shell, xử lý navigation request, trang offline fallback, offline cho ảnh/API, và phát hiện trạng thái online/offline cho UX.
Dividend yield vs tăng trưởng cổ tức, payout ratio, dividend aristocrats, sức mạnh lãi kép của DRIP, yield trap, và góc nhìn tổng lợi nhuận. Không phải lời khuyên đầu tư.
Test hook query/mutation bằng Vitest + React Testing Library + MSW (mock ở tầng network), kiểm thử optimistic rollback, rồi ghép tất cả thành một feature CRUD hoàn chỉnh.
Thiết kế lỗi và async flow có kiểu: unknown catch, Result, AbortSignal, timeout, retry, Promise concurrency và idempotency thay vì Promise<any>.
Bonus track: when a CDN is compromised, the script you ship to every user silently changes. SRI pins a cryptographic hash so the browser refuses to run tampered code — the mechanism, the crossorigin requirement, and a live hash simulator.
Every manifest.json key that matters: action, permissions vs host_permissions, content_scripts, background, icons, web_accessible_resources, commands and side_panel — with an interactive manifest builder.
Hai trường phái đầu tư lớn — định nghĩa, lịch sử hiệu suất, GARP, value trap vs growth trap, và khi nào hợp với ai. Không phải lời khuyên đầu tư.
Cấu hình retry thông minh, ném lỗi lên Error Boundary với throwOnError, dùng useSuspenseQuery cho loading khai báo, và tối ưu hiệu năng với select, structural sharing và prefetching.
Bonus track: the WebSocket handshake carries the victim cookies and the browser never applies CORS to it — so any site can open an authenticated socket if the server skips the Origin check. The mechanism, the defenses, and a live simulator.
Start from zero: what a browser extension really is, the four moving parts, the Manifest V3 model, and shipping a working "Hello World" extension you load unpacked in under 10 minutes. With a live anatomy explorer.
Làm chủ Kubernetes storage: PV/PVC/StorageClass/CSI, StatefulSet, topology-aware provisioning, backup, restore và failure drill.
Làm chủ Cache API (open, put, match, addAll) và năm caching strategy kinh điển: cache-first, network-first, stale-while-revalidate, cache-only, network-only. Biết chọn strategy đúng cho từng loại tài nguyên.
Năm loại moat — network effects, switching costs, lợi thế chi phí, tài sản vô hình/thương hiệu, quy mô hiệu quả — và cách nhìn ra moat ngay trong các con số (ROIC và biên cao, bền). Không phải lời khuyên đầu tư.
Cập nhật UI tức thì trước khi server phản hồi với onMutate (cancel + snapshot + patch), tự động rollback khi lỗi, dùng setQueryData/getQueryData và query filters để thao tác cache chính xác.
Biến unknown từ API, storage và env thành domain value đáng tin: parse at the edge, schema evolution, branded types, DTO mapping và contract versioning.
Bonus track: why the implicit flow is dead, how Authorization Code + PKCE stops code interception, why PKCE does nothing for token storage, and the BFF pattern that keeps tokens out of the browser. With a live PKCE simulator.
How workspaces work across npm, Yarn, pnpm and Bun: a single install for many packages, the workspace: protocol, filtered task running, hoisting trade-offs, and pairing with Turborepo or Nx.
Tự dựng một mô hình DCF từng bước (FCFF/FCFE, WACC, terminal value, độ nhạy), rồi DDM (Gordon growth), residual income và sum-of-the-parts. Không phải lời khuyên đầu tư.
Ghi dữ liệu (tạo/sửa/xoá) bằng useMutation, hiểu vòng đời onMutate/onSuccess/onError/onSettled, và sau khi ghi thì invalidate đúng query để UI tự đồng bộ với server.
Bonus track: every third-party widget you embed can submit forms, open popups, even navigate your whole tab. How the sandbox attribute flips that to deny-by-default, the allow-scripts + allow-same-origin footgun, and a safe pattern.
A concrete defense playbook: ignore-scripts by default, audit, npm provenance and sigstore, scoped tokens with 2FA, minimum release age, SBOMs, lockfile linting, and a hardened CI install.
Trái tim của service worker: event fetch và respondWith. Đọc Request, tạo Response, hiểu request mode/destination, xử lý lỗi mạng, khi nào nên và không nên chặn, đặt nền cho mọi caching strategy.
Hợp nhất cả series thành một quy trình lặp lại được: checklist trước khi mua, quy tắc phân bổ & rủi ro, kế hoạch theo dõi và bán, nhật ký, và các sai lầm người mới cần tránh. Không phải lời khuyên đầu tư.
The hardest UI, done right: one zod schema as the single source of truth, react-hook-form for performant state, and shadcn Form components for accessible, type-safe, validated forms. With a live form lab.
Chuyển trang mượt không nhấp nháy với placeholderData keepPreviousData, rồi dựng infinite scroll thực thụ bằng useInfiniteQuery với getNextPageParam, fetchNextPage và IntersectionObserver.
Thiết kế generic API để compiler suy luận từ input, dùng constraints, const type parameters, overload đúng chỗ và tránh conditional type làm public API khó hiểu.
Bonus track: why escaping, blacklists, and naive sanitizers fail on untrusted HTML, how mutation XSS resurrects payloads when the parser re-reads your clean string, and the right tools: DOMPurify and the native Sanitizer API.
How attackers get code into your node_modules: typosquatting, dependency confusion, malicious postinstall payloads, maintainer account takeover, and protestware — dissected through real npm incidents.
Bức tranh lớn làm dịch chuyển mọi cổ phiếu cùng lúc: lãi suất và vì sao chúng định giá mọi thứ, lạm phát, chu kỳ kinh tế, luân chuyển ngành, và top-down vs bottom-up. Không phải lời khuyên đầu tư.
How the CSS-variable theme works, building light/dark, generating a brand theme, customizing a copied component, and the registry system for sharing your own. With a live theme generator.
Thiết kế query key phân cấp chống gõ sai, viết apiFetch validate dữ liệu tại biên bằng zod để any không lọt vào app, gói query bằng queryOptions tái dùng, và làm dependent/parallel queries.
Bonus track: how an attacker site asks the victim browser one yes/no question about another site — via frame counting, error events, and timing — without reading any response. The oracles, the defenses, a live simulator, and labs.
How packages ship prebuilt native binaries: node-pre-gyp, prebuild/prebuildify, and the modern per-platform optionalDependencies pattern used by esbuild and SWC — plus the security risk of postinstall binary downloads.
Mổ xẻ trọn vòng đời service worker: install, waiting, activate; vì sao SW mới bị "kẹt" ở waiting; skipWaiting và clients.claim; cơ chế update; controllerchange; và cách debug lifecycle trong DevTools.
Vì sao thời gian thắng canh thời điểm: lãi kép, cổ tức và DRIP, trung bình giá (DCA), chi phí ăn mòn lợi nhuận, và lý do quỹ chỉ số/ETF chi phí thấp đánh bại phần lớn nhà đầu tư chủ động. Không phải lời khuyên đầu tư.
Why shadcn is "not a component library", how the CLI and components.json work, and adding your first components — the moment Tailwind, Radix and cva/cn click into one workflow. With a live component gallery.
Phân biệt status vs fetchStatus, xử lý đầy đủ loading/error/empty, hiểu chính xác staleTime vs gcTime, các trigger refetch, và đi qua vòng đời một cache entry theo dòng thời gian.
Dùng control-flow analysis, type predicate, assertion function và discriminated union để biến trạng thái bất hợp lệ thành không thể biểu diễn.
Bonus track: why Spectre forced browsers to disable SharedArrayBuffer and precise timers, and how COOP + COEP + CORP let you safely re-unlock them. The headers, the gotchas when COEP breaks your CDN, a live simulator, and labs.
Thiết kế background jobs có thể vận hành: BullMQ, delivery semantics, idempotency, transactional outbox, retry có jitter, dead-letter workflow, backpressure và graceful shutdown.
Thiết kế GraphQL như một API contract: schema, resolver lifecycle, nullability, DataLoader, cursor pagination, authorization, query-cost control, schema evolution và observability.
Chọn polling, SSE hay WebSocket từ product contract; triển khai delivery, reconnect, authentication, presence, backpressure, scale-out và graceful draining với Node.js.
Tách service có kiểm soát: bounded context, data ownership, gRPC/Protobuf, deadline propagation, retry budget, outbox, saga, mTLS, observability và chiến lược migration.
Xây observability từ user journey: SLI/SLO, error budget, structured logs, metrics cardinality, distributed traces, sampling, Collector topology và incident workflow.
Why npm install can compile C++ on your machine: lifecycle scripts (preinstall/install/postinstall), what node-gyp does, the N-API native addon model, and why postinstall is both essential and dangerous.
Vì sao nhà đầu tư thông minh vẫn thua: loss aversion, FOMO, neo giá, hiệu ứng đám đông, overconfidence, recency bias — và cách dựng hệ thống bảo vệ bạn khỏi chính mình. Không phải lời khuyên đầu tư.
Go pro with Radix: controlled vs uncontrolled state, the asChild slot pattern to merge behavior onto your own components, and Tabs/Switch/Tooltip/Popover composition — the toolkit before shadcn ties it together. With a live composition lab.
Mở màn series: server state là gì và vì sao nó khác client state, vì sao đừng tự viết fetch + useEffect + useState, rồi cài QueryClient + Provider + Devtools và viết useQuery đầu tiên.
Bắt đầu Vue 3 đúng cách: reactivity là gì và vì sao nó là trái tim của Vue, Single-File Component, dựng project với Vite, và viết app đầu tiên với <script setup> + Composition API.
Bộ công cụ khai báo UI của Vue: interpolation, v-bind cho attribute, v-if vs v-show, v-for và vì sao cần key, v-on với event modifier, class/style binding động, và v-model ràng buộc hai chiều.
Mở nắp capo reactivity của Vue 3: ref vs reactive, track/trigger qua Proxy, computed được cache thế nào, watch vs watchEffect, các bẫy mất reactivity (destructure, toRefs), và shallowRef/readonly.
Giao tiếp giữa component trong Vue 3: truyền dữ liệu xuống bằng defineProps (typed), bắn sự kiện lên bằng defineEmits, tùy biến nội dung qua slot (named & scoped), và chia sẻ xuyên tầng với provide/inject.
Trích logic có trạng thái thành hàm useXxx() tái dùng được: anatomy của một composable, quy ước đặt tên/trả về, dọn dẹp với lifecycle, nhận tham số reactive, và vì sao composable thắng mixin.
Làm chủ form trong Vue 3: v-model trên mọi loại input và modifier, defineModel để dựng v-model cho component của bạn, nhiều v-model trên một component, và validate form với zod sạch sẽ.
State dùng chung toàn app với Pinia: setup store theo Composition API, state/getters/actions, dùng store trong component và router, giữ reactivity khi destructure với storeToRefs, và vì sao Pinia thay thế Vuex.
Định tuyến client-side với Vue Router 4: cấu hình route, route động và param, RouterLink/RouterView, điều hướng programmatic, nested route & layout, lazy-load để chia bundle, và navigation guard bảo vệ trang.
Xử lý bất đồng bộ trong Vue 3: pattern fetch có loading/error/empty, async component với <Suspense> và async setup, error boundary qua onErrorCaptured, race condition, và khi nào nên dùng TanStack Query để cache server state.
Dùng TypeScript đúng cách với Vue 3: type props/emits/slots, generic component, template ref đã ép kiểu, type cho composable và Pinia store, ép kiểu provide/inject, và những bẫy type thường gặp.
Làm Vue 3 nhanh: hiểu khi nào component re-render, v-once và v-memo, shallowRef cho dữ liệu lớn, lazy-load component và route, ảo hóa danh sách dài, KeepAlive, và đọc bundle để cắt code thừa.
Bonus track: pastejacking rewrites what you copy, the 2024–25 ClickFix wave tricks users into pasting malware into a terminal, and hidden form fields harvest autofill data. The mechanisms, defenses, a live lab, and exercises.
Giới thiệu và hướng dẫn cơ bản về oxlint: cài đặt, file config, categories, plugins, type-aware linting, migrate từ ESLint, kèm so sánh thẳng với ESLint, Biome và Prettier.
How resolution actually picks versions, what an SRI integrity hash guarantees, why Corepack pins the package manager per repo, and how lockfile poisoning attacks work.
Mở màn series: service worker thực sự là gì, vì sao nó tồn tại, kiến trúc network proxy chạy nền, khác biệt với Web Worker, scope, yêu cầu HTTPS, và đăng ký service worker đầu tiên của bạn.
Quy tắc giữ bạn ở lại cuộc chơi: cắt lỗ, bội số R, rủi ro tối đa mỗi lệnh, toán về drawdown, kỳ vọng (expectancy), và vì sao bảo toàn vốn quan trọng hơn tìm mã thắng. Không phải lời khuyên đầu tư.
The second pillar: why headless components exist, installing Radix, the Root/Trigger/Portal/Content anatomy, and building a fully accessible Dialog and DropdownMenu styled with Tailwind. With a live anatomy + a11y demo.
Thiết kế tsconfig theo runtime và toolchain, bật strict flags có chủ đích, hiểu target/lib/module, noEmit, isolatedModules và những thay đổi quan trọng của TypeScript 6.
Bonus track: how a link you open can silently navigate your original tab to a phishing page via window.opener — why modern browsers mostly fixed it, where it still bites, and the safe-link defenses. With a live simulator and labs.
Hiểu scheduler, requests/limits, QoS, placement, topology spread, PDB và HPA v2; thực hành lỗi Pending, eviction và autoscaling.
How pnpm gets strictness, speed, and near-zero extra disk per project using a global content-addressable store — plus Bun's cache, linker choices, and security defaults.
Vì sao một danh mục lại quan trọng hơn một cổ phiếu lẻ: đa dạng hóa, tương quan, phân bổ tài sản, số lượng cổ phiếu nên giữ, và tái cân bằng. Không phải lời khuyên đầu tư.
Round out a pro setup: the typography plugin for prose, forms for sane inputs, tw-animate for enter/exit motion, and writing your own utilities and variants in v4 with @utility and @custom-variant. With a live plugin showcase.
Bonus track: how a single npm install can run attacker code on your machine — lifecycle scripts, transitive deps, git prepare, bin shadowing — the signals to audit, and a full layered defense. With a live install simulator and exercises.
The Yarn rewrite that deletes node_modules: how Plug'n'Play resolves imports from a .pnp.cjs map, zero-installs, the node-modules linker escape hatch, and a head-to-head of Yarn v1 vs v4.
Biến ba báo cáo tài chính thành các tỷ số định giá: P/E, P/B, P/S, EV/EBITDA, PEG, ROE/ROIC và tỷ suất cổ tức — cách tính, đọc "rẻ hay đắt" so với lịch sử & ngành, và những cái bẫy. Không phải lời khuyên đầu tư.
Đọc biểu đồ như tâm lý đám đông: hỗ trợ/kháng cự, xu hướng & đường xu hướng, giải phẫu nến Nhật và các mẫu hình kinh điển (hai đỉnh/đáy, vai-đầu-vai, cờ, tam giác), breakout/retest và bẫy giá. Không phải lời khuyên đầu tư.
Các chỉ báo kỹ thuật cốt lõi: đường trung bình động (SMA/EMA), RSI, MACD, Bollinger Bands, khối lượng, và phân kỳ — chúng đo gì, dùng sao cho đúng, và bẫy thường gặp. Không phải lời khuyên đầu tư.
The moment classes repeat you need components — and the professional toolchain shadcn itself uses: clsx for conditionals, tailwind-merge to resolve conflicts, the cn() helper, and cva for type-safe variants. With a live variant factory.
Hiểu TypeScript thực sự chứng minh gì: structural typing, excess-property check, any/unknown/never, variance, array covariance và các lỗ hổng soundness cần cô lập.
Advanced-track finale: how path-confusion caching serves a private response to an attacker, how unkeyed input poisons a shared cache, and how open redirects chain into OAuth token theft and CSP bypass. With a simulator and exercises.
What Yarn v1 fixed about 2016-era npm: deterministic installs, the yarn.lock format, parallel fetching and offline cache — and why it is now frozen in maintenance mode.
Ba báo cáo tài chính (KQKD, cân đối kế toán, lưu chuyển tiền tệ) liên kết với nhau ra sao, cách đọc báo cáo thường niên, và các dấu hiệu lợi nhuận "ảo". Không phải lời khuyên đầu tư.
Style on interaction and context: hover/focus/active/disabled, the group-* and peer-* patterns, and data-[state] styling — the exact mechanism Radix and shadcn rely on. With a live state explorer.
Advanced track: JWT attacks to recognize — alg:none, RS256→HS256 confusion, weak HMAC secrets, kid/jku injection, unchecked exp/aud/iss — why the browser must never trust a claim. With a forge/verify simulator and exercises.
The default package manager, demystified: package-lock.json anatomy, hoisting and phantom dependencies, npm ci vs npm install, lifecycle scripts, npx, .npmrc and scoped registries.
Sàn giao dịch (HOSE/HNX/UPCoM và quốc tế), công ty chứng khoán, sổ lệnh, bid/ask, các loại lệnh (market, limit, stop), khớp lệnh, T+ settlement, phí và thuế. Không phải lời khuyên đầu tư.
The heart of Tailwind v4: define your own colors, fonts, spacing and radius as design tokens with @theme — each token becomes a utility automatically. Plus the v4 way to do dark mode. With a live token studio.
Advanced track: how cross-window messaging goes wrong — missing or substring origin checks, postMessage-to-DOM-XSS, and targetOrigin "*" leaks to popups — and the exact-origin allowlist that fixes it. With a simulator and exercises.
Authenticate properly in the App Router: sessions vs JWTs, secure httpOnly cookies, a Data Access Layer, protecting pages and Server Actions, proxy.ts for redirects, and the security headers and practices every app needs.
What a package manager actually does under npm install — resolve, fetch, link — plus package.json, semver ranges, the registry, and why the lockfile is the most important file in your repo.
Bắt đầu từ con số 0: cổ phiếu thật sự là gì, vì sao thị trường tồn tại, tư duy "làm chủ doanh nghiệp", rủi ro vs lợi nhuận, và sức mạnh của lãi kép. Không phải lời khuyên đầu tư.
The utilities you reach for every day: spacing, sizing, typography and color, then the two layout engines — Flexbox and Grid — the Tailwind way, plus the mobile-first responsive system. With a live flex/grid builder.
Advanced track: why allowlist CSPs get bypassed — JSONP and gadgets on trusted CDNs, open redirects, base-uri hijacks, scriptless exfiltration — and how a nonce + strict-dynamic policy stops them. With a simulator and exercises.
A hands-on guide to running https://localhost in development: mkcert, OpenSSL self-signed, Caddy, Node/Vite/Next.js dev servers and Docker + nginx — per-OS steps, verified commands, a comparison table, checklist and troubleshooting.
Control how pages render (static, dynamic, PPR), generate metadata and OG images, ship sitemaps and robots, and use the built-in optimizations: next/image, next/font, and next/script — for fast, discoverable pages.
Start from zero: why utility-first CSS exists, the one idea that makes Tailwind click, and a complete v4 setup with Vite — install, @import, @theme, and your first composed component. With a live playground.
Advanced track: how injected id/name attributes overwrite the globals your JavaScript trusts — no script needed — why a script-blocking CSP does not stop it, and how to defend. With a live demo and exercises.
Build HTTP endpoints with route.ts, work with the async cookies() and headers(), stream responses, pick Node vs Edge runtime, handle webhooks and CORS, and use proxy.ts — the renamed middleware in Next.js 16.
Advanced track: how attacker __proto__ keys poison Object.prototype through unsafe merge and query parsing, the gadgets that turn pollution into XSS or auth bypass, and the defenses that stop both. With a live demo and exercises.
Theo một packet qua Pod, CNI, Service, EndpointSlice, CoreDNS và Gateway API; khóa traffic bằng NetworkPolicy và debug theo từng lớp.
Mutate data without API routes: Server Actions with "use server", progressive-enhancement forms, useActionState and useFormStatus, optimistic UI with useOptimistic, zod validation, and revalidating after a write.
Use the browser deliberately: when to add "use client", the server-to-client boundary and bundle cost, composition patterns, hydration, and using the URL as state with useRouter, usePathname, and useSearchParams.
The headline feature of Next.js 16: Cache Components. Enable cacheComponents, use the "use cache" directive, control TTL with cacheLife, invalidate with cacheTag + revalidateTag/updateTag, and ship instant pages with PPR.
Blender is a tool, glTF is a file, Three.js is the library. A field guide to the tools that make 3D assets — DCC, sculpting, CAD, procedural, scanning, AI, texturing, web editors and free marketplaces — and how each reaches Three.js.
Make a character move. Rigging and skinning explained, where clips come from (Blender, Mixamo), then drive a skinned glTF with AnimationMixer — cross-fade states, fire one-shot emotes, blend morph-target expressions — with a live demo.
A 3.7 MB helmet is brutal on mobile. Compress geometry with Draco/Meshopt, textures with KTX2, and clean structure with gltf-transform — often 5–10× smaller, no visible loss. Commands, decision tables, the loader hookup and the traps.
Turn taps into 3D intent. Raycast to pick the character or the ground, move with click-to-move, face the travel direction, and wire a tiny state machine that drives Idle ⇄ Walk ⇄ Run cross-fades — coexisting with OrbitControls. Live demo.
Fetch data the App Router way: async Server Components, avoiding request waterfalls with parallel fetching, streaming slow parts with Suspense, the server/client data handoff, and the dynamic-by-default model of Next.js 16.
Dùng Redis 8 có chủ đích: cache consistency, stampede control, Pub/Sub và Streams, rate limit atomic, distributed lock với fencing, session, BullMQ và vận hành production.
Thiết kế NestJS 11 như một runtime kiến trúc: module boundary, DI scope, request lifecycle, validation, policy guard, interceptor, error contract, Prisma 7, testing và graceful shutdown.
Thiết kế identity cho Node.js production: threat model, JWT validation, access/refresh token, atomic token-family rotation đa thiết bị, cookie/BFF, OIDC Authorization Code với state, nonce, PKCE và authorization theo resource.
Part 21 opens a bonus Motion & Scenes arc: direct a whole scene, not one element. Use SMIL syncbase timing (begin="other.end") to sequence sky, sun, clouds and title into a self-playing, looping scene — no JS clock. With a live demo.
Part 23: bring a character to life. Build a skeleton from nested <g> joints, rotate each around its pivot, and let transform inheritance swing the whole limb — then drive a wave and a walk cycle. With a live demo.
Part 24: hand the timeline to the reader. Use the Scroll-driven Animations API (scroll() and view()) to draw an SVG path as the page scrolls, with parallax layers for depth and a JS fallback. With a live scrollytelling demo.
Part 22: make anything travel along a curve. Master animateMotion, reuse a path with <mpath>, and use rotate="auto" so a traveler banks into the turn instead of sliding — plus the CSS offset-path equivalent. With a live demo.
The motion arc finale: ambient scenes that just live. Seamless parallax loops (translate a tile by its width, then wrap) and a lightweight requestAnimationFrame particle pool that recycles nodes. With a live demo.
Stop building everything from primitives. Model in Blender, export glTF/GLB, and load it with GLTFLoader. Export settings, scene-graph mapping, scale, units, PBR materials, and the pitfalls that bite — with a live model loader.
Turn flat cards into solid objects: master transform-style: preserve-3d and backface-visibility, understand the local coordinate system, then assemble six faces into a real, rotatable CSS cube — step by step. With a live cube builder demo.
The beginner-friendly start to real CSS 3D: the camera mental model, why nothing looks 3D until you add perspective, moving along the Z-axis with translateZ, the three rotation axes, and building your first flip card. With a live demo.
Make 3D respond to the human: a card that tilts toward the cursor in real time, layered parallax depth with translateZ, a moving glare highlight, and the will-change performance trick. Beginner-friendly, with a live tilt demo.
The production finish for CSS 3D: fake directional lighting so objects look solid, keep animations smooth on the GPU compositor, fix z-fighting, honor prefers-reduced-motion, add fallbacks, and debug 3D when it breaks. With a live demo.
Set 3D objects in motion: pure-CSS keyframe spins, arranging cards in a ring with rotateY and translateZ, building a real 3D carousel with prev/next and auto-rotate, and the idea behind Apple-style coverflow. With a live demo.
Master App Router routing: dynamic and catch-all segments, route groups, parallel and intercepting routes, layouts vs templates, loading/error/not-found, generateStaticParams, and the async params/searchParams of Next.js 16.
Hiểu đường đi của một tác vụ qua V8, libuv và event loop; từ đó kiểm soát concurrency, stream, worker thread, bộ nhớ và độ trễ production.
Thiết kế Express 5 như một request pipeline có thứ tự, validation boundary, error contract, proxy trust và graceful shutdown kiểm chứng được.
Theo một HTTP request từ wire tới Node.js handler, rồi thiết kế API contract có giới hạn, timeout, cache, streaming, CORS và graceful shutdown rõ ràng.
Thiết kế data layer đúng khi có concurrency: query shape, index, pool, transaction, pagination, repository, MongoDB và cache contract cho API.
Thiết kế ranh giới module, dependency injection, transaction, cache, queue và resilience để codebase Node.js tiếp tục thay đổi an toàn khi sản phẩm và đội ngũ cùng lớn lên.
Thiết kế authentication và API security theo threat model: password hashing, session/JWT, cookie, OAuth/OIDC, authorization và defense-in-depth.
Xây quy trình tối ưu Node.js dựa trên SLO, workload, percentile, profiling, event-loop health, query plan, worker pool, cache, memory và capacity thay vì phỏng đoán.
Thiết kế test portfolio theo rủi ro cho domain, HTTP, database, contract, dependency failure, concurrency và migration; đồng thời kiểm soát coverage, flakiness và thời gian phản hồi CI.
Biến source code thành một service vận hành được: image bất biến, config và secret, probe, graceful shutdown, migration, rollout, rollback, CI/CD và quan sát deployment.
Thiết kế modular monolith theo bounded context, giữ dependency rule bằng fitness function, ghi ADR và chỉ dùng outbox, saga, CQRS hay microservice khi constraint đòi hỏi.
Prisma ORM 7 từ cấu hình ESM, generated client và driver adapter tới migration an toàn, query có kiểm soát, transaction giữ invariant, pooling, observability và test production.
Thiết kế PostgreSQL 18 cho production: invariant trong schema, index theo workload, đọc EXPLAIN, transaction đúng khi đồng thời, keyset pagination, pooling, MVCC và vận hành từ Node.js.
Hướng dẫn Proxyman từ cơ bản đến pro: capture & decrypt HTTPS, filter nâng cao, Compose/Repeat, Breakpoint sửa request/response on the fly, Map Local/Remote, Scripting JS, throttling, mobile, và workflow thực chiến.
Start SVG the right way: what SVG really is, the coordinate system, the basic shapes, and the one concept that confuses everyone — viewBox. With a live pan/zoom playground you can drag.
Decode the path mini-language: moveto and lineto, the horizontal/vertical shortcuts, cubic and quadratic Béziers, smooth curves, and the dreaded elliptical arc. With a builder where you drag control points and watch d write itself.
Make SVG beautiful: fill and the two fill rules, the whole stroke family (width, linecap, linejoin, dasharray), then reusable linear/radial gradients and tiling patterns defined once in defs. With a live paint playground.
SVG text is real, selectable, accessible text living in the coordinate system. Master baseline positioning, text-anchor, multi-line and styled tspans, and the showpiece — flowing a label along any curve with textPath. With a live lab.
Move and reuse SVG: the transform attribute (translate/scale/rotate/skew), why transform order matters, grouping with <g>, transform-origin, and the power of nested coordinate systems with inner <svg>. With a live order-flipping sandbox.
Make SVG move: the famous self-drawing line with stroke-dasharray/stroke-dashoffset, CSS keyframes vs native SMIL <animate>/<animateTransform>, motion along a path with animateMotion, and when to pick which. With a scrubbable studio.
The SVG filter engine is a tiny image-processing pipeline. Learn feGaussianBlur, feOffset/feFlood/feComposite/feMerge for real drop shadows, a neon glow chain, and feColorMatrix for desaturation and tints — with a live filter playground.
The two ways to hide parts of a drawing: clipPath (a hard, binary cookie-cutter) and mask (soft, luminance-based transparency you can feather). When to use each, alpha vs luminance masks, and CSS clip-path — with a side-by-side lab.
Make SVG think: generate shapes from a data array, the essential screen→user coordinate mapping with getScreenCTM().inverse() for correct hit-testing, pointer events, tooltips, and a small interactive chart from scratch.
Ship SVG like a senior: optimize with SVGO, choose the right delivery (inline vs img vs sprite), build a symbol + use icon system themed with currentColor, make graphics accessible with title/desc/role/aria, and respect perf budgets.
Animate the d attribute itself: the golden rule of morphing (same command structure), interpolating coordinates, SMIL path animation, why circles fight stars, and how flubber resamples paths. With a scrubbable morph lab.
Build the loaders, percentage rings, and speedometers in every dashboard with one formula: stroke-dashoffset = circumference × (1 − percent). Plus the -90° start rotation, round caps, gradient rings, and a 270° gauge. With a live builder.
Make tiny, resolution-independent textures from a few numbers: repeating <pattern> tiles for hero backgrounds, an organic blob generator with smooth curves, and shipping SVG as a compact data-URI. With a live generator.
Ship SVG the React way: inline vs SVGR, the JSX attribute gotchas (className, strokeWidth), building typed icon components with props and currentColor, data-driven SVG, and refs for measuring paths. With a live props playground.
The grand finale: drive the viewBox with the mouse to build pan and zoom-toward-cursor navigation — the engine behind every web map. Drag-to-pan math, the zoom-to-point formula, non-scaling strokes, and choropleth regions. With a live map.
Go past title/desc: accessible names with role=img and aria-labelledby, the decorative-vs-meaningful decision, keyboard-focusable shapes, aria-live readouts, accessible charts backed by a real data table, and how to test. With a live demo.
Industrialize icons: turn a folder of .svg files into one cached <symbol> sprite with SVGO + svg-sprite, then use it via <use href>. External vs inline sprites, caching, currentColor theming, and framework integration. With a live demo.
When hand-rolled rAF and CSS stop scaling: what GSAP, anime.js, and Motion give you — timelines, stagger, scrubbing, MorphSVG, MotionPath — plus a decision table for CSS vs SMIL vs library. With a live timeline/stagger player.
How the browser actually paints SVG, why thousands of DOM nodes get slow, the real cost of filters and huge paths, transform vs cx/cy animation, and the exact signals that tell you to switch to canvas or WebGL. With a live FPS stress test.
Start Three.js the right way: what WebGL really is, the three pillars (Scene, Camera, Renderer), the render loop, and your first lit, orbiting mesh — with a live scene you can drag, zoom, and inspect.
The shape-and-surface toolkit: built-in geometries, the five core material types (Basic, Lambert, Phong, Standard, Physical) and when each earns its place — with a live gallery to mix geometry, material, metalness, and roughness.
Position, rotation, scale and the parent-child scene graph where children inherit transforms — plus Perspective vs Orthographic cameras and OrbitControls, with a live sun-earth-moon rig you can drive.
Make a scene look 3D: the five light types (directional, point, spot, ambient, hemisphere), when to use each, real-time shadow maps, and the performance cost seniors watch — with a live light rig you can drive.
Dress your surfaces: UV mapping, the PBR map set (albedo, normal, roughness, metalness, AO), color management done right, and environment maps that make metal reflect — with a live material you can build one map at a time.
Bring in real assets and make them move: loading glTF with Draco, the AnimationMixer / AnimationClip / AnimationAction trio, crossfading between clips, and frame-rate-independent playback — with a live mixer you can drive.
Add cinematic polish: how the EffectComposer renders your scene to a texture and runs full-screen passes (bloom, vignette, custom shaders), why pass order and OutputPass matter, and the performance budget — with a live bloom rig.
Build a first performance model: draw calls, triangles, pixels, instancing, merging, culling, LOD and resource ownership — then measure before choosing an optimization.
Turn a scene into a UI: how a Raycaster picks objects under the cursor, normalized device coordinates, hover and click handling, performance tips for picking, and dragging objects — with a live hover-and-select demo.
Drop below the built-in materials: the GPU pipeline, vertex vs fragment shaders, attributes/uniforms/varyings, writing a ShaderMaterial, animating it from JS, and extending built-ins with onBeforeCompile — with a live shader playground.
Tie it all together into a shippable mini-project: loading screens, ResizeObserver responsiveness, a render-loop architecture that scales, framework integration, debug tooling, and a real deployment checklist — with a full capstone demo.
Make things move on their own: the render-world / physics-world split, rigid bodies and colliders, the fixed-timestep loop, syncing meshes to bodies, friction and restitution, and when to reach for Rapier — with a live physics sandbox.
Start Next.js 16 from zero: what the framework really is, install it with Turbopack, understand the App Router file conventions, and grasp the single most important idea — Server Components by default. With exercises.
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.
Thiết kế workflow Compose lặp lại được với config đã resolve, merge/include, Watch, secrets/configs, CI validation và ranh giới production.
The real reasons a <video> goes fullscreen, refuses to autoplay, or stays silent on iPhone — and the exact playsinline + muted + autoplay recipe (plus a tap-to-play fallback) that fixes it. With a live demo.
Đào sâu Lit 3: reactive properties, năm kiểu binding, keyed list, built-in và custom directives, events, update lifecycle, styling, slots và controllers.
Checkpoint ghép Custom Elements, Shadow DOM, slots, public events, theming, accessibility, ElementInternals và Declarative Shadow DOM thành một toggle dùng được.
Bilingual 2026 guide: same-document SPA and cross-document MPA view transitions, pseudo-elements, shared elements, reduced motion, Astro/React integration, browser support, and fallbacks.
Hiểu BuildKit như DAG, dùng cache/secret/SSH mounts, build amd64+arm64, xuất cache CI và gắn SBOM/provenance vào image.
A bilingual comparison of frontend build tools (Webpack, Vite, Rollup, esbuild, Turbopack, SWC, Bun) and package managers (npm, Yarn, pnpm, Bun) — architecture, speed, disk usage, ecosystem, and when to use each.
Production-grade Nginx: HTTPS with a local self-signed cert (and Let's Encrypt), HTTP/2, gzip/brotli, response caching with proxy_cache, rate limiting, and the security headers every site needs — with exercises.
Đi từ docker run xuống OCI, containerd, runc, namespaces, cgroups v2, copy-on-write, PID 1 và rootless bằng các lab quan sát trực tiếp.
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.
Put Nginx in front of a real app: proxy_pass, the headers you must forward, upstream pools, load-balancing algorithms, health checks and failover, and WebSocket proxying — with a runnable Node demo and exercises.
The grammar behind every Nginx config: directives and contexts (main/events/http/server/location), how location matching really works, try_files, virtual hosts with server_name, and the safe reload workflow — with exercises.
Start Nginx from zero: what it really is (web server, reverse proxy, load balancer), the master/worker event-driven model, install it locally on macOS/Linux/Docker, and serve your first static site — with exercises.
Hiểu rõ cách GitHub Pages deploy site qua Actions, 3 loại storage tách biệt, các soft/hard limit thực tế, URL structure (user vs project vs custom domain), và khi nào nên migrate sang Cloudflare/Vercel.
Từ font-display, preconnect, preload, self-host, subsetting, variable fonts đến metric-compatible fallback — các kỹ thuật thực chiến giúp loại bỏ FOUT/FOIT và cải thiện LCP/CLS khi dùng webfont bên ngoài.
A bilingual, visual guide to common stock chart patterns (head & shoulders, double tops, triangles, flags, wedges) and candlestick signals (doji, hammer, engulfing, stars) — with inline diagrams and a live demo. Not financial advice.
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).
Part 12: turn the series into a real, fully-typed deep-get utility with autocompleted paths, then master the meta-skills — debugging types, recursion and performance limits, a one-page pattern cheat sheet, and a practice plan.
Part 11: the hardest entries, taken slowly. Build Currying, a dotted-path Get, and IsPalindrome by composing patterns from the whole series — proof that extreme types are just familiar tricks stacked. With toggle-to-reveal answers.
A bilingual guide to React Router v7: how Remix merged into it, the three additive modes (Declarative, Data, Framework), type-safe routing, migrating from v6 and Remix v2, and how Framework mode stacks up against Next.js.
Part 10: parse strings at the type level. Convert camelCase to kebab-case, fold a tuple into a nested object, and build a real printf format parser that walks a string as a state machine — each with a toggle-to-reveal answer.
Part 9: type utilities from real libraries. Split objects by required vs optional keys with GetRequired, RequiredKeys and OptionalKeys, then build a fluent, type-safe Chainable builder — each with a toggle-to-reveal answer.
A bilingual deep dive into Astro 5: the Islands architecture, .astro component anatomy, client directives, SSG vs SSR, Content Collections with Zod, routing, integrations, and View Transitions — using this blog's real config as examples.
Part 8: TypeScript has no + for numbers, so we count with tuple lengths. Build BuildTuple, Add, Subtract, GreaterThan and Fibonacci using the accumulator and tuple-length tricks — each with a toggle-to-reveal answer and explanation.
Part 7: string math at the type level. Build Trim, Replace, ReplaceAll, StartsWith/EndsWith and LengthOfString with template-literal pattern matching and recursion — each with a toggle-to-reveal answer and a step-by-step explanation.
Part 6: unions are not tuples. Turn a string into a union, recap distribution, extract the last member of a union, and build the famous UnionToTuple with the contravariance gadget — each with a toggle-to-reveal answer and explanation.
Part 5: peel one element off and loop. Build Push, Unshift, Reverse, Includes, Flatten and Join with recursion over tuples, learn the accumulator pattern, and understand the recursion depth limit — each with a toggle-to-reveal answer.
Part 4: capture pieces of a type with infer. Rebuild Parameters, Last and Pop, append arguments to functions, and learn constrained infer (infer N extends number) to parse numbers from strings — each with a toggle-to-reveal answer.
Part 3: the A extends B ? X : Y engine. Build If, IsNever, IsUnion and AnyOf, nail the distributive rule (and switch it off with [T]), and decode the Equal gadget behind every test — each with a toggle-to-reveal answer.
Part 2: master the mapped type. Rebuild Partial, Required, Mutable, Readonly 2, PartialByKeys, Merge and ReplaceKeys; add and remove the readonly/? modifiers; and key-remap with as — each with a toggle-to-reveal answer.
Đà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.
Why fine-grained reactivity will eventually replace diffing algorithms in modern frameworks — and what that means for the libraries you ship today.
Frontend validation đẹp nhưng dễ bypass. Bài này đào sâu magic number, cấu trúc PNG, detect executable bằng TypeScript, polyglot file, và defense in depth đúng cách.
Toàn cảnh SEO cho frontend engineer: cách Googlebot crawl & render 2-wave, robots.txt và sitemap, meta/OG/JSON-LD, canonical & hreflang, Web Vitals, spectrum CSR/SSR/SSG/ISR, vì sao SPA React dễ tàng hình và prerender giải quyết ra sao.
A bilingual deep-dive into loading placeholders: why they boost perceived performance and prevent layout shift, the types (spinner, skeleton, LQIP), and how to implement and orchestrate them in vanilla JS and React.
Đào sâu cách render danh sách dài: pagination vs infinite scroll vs virtual scroll, sentinel pattern với IntersectionObserver, fixed/variable-height windowing, bidirectional list (chat, feed), và mọi pitfall production.
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.
A comprehensive bilingual guide covering rendering, routing, caching in Next.js across versions 14, 15, and 16. Written in English with inline Vietnamese translations for language learners.
Bilingual deep-dive: signals vs Virtual DOM, the three primitives, a ~30-line vanilla runtime, push/pull glitch-free updates, Solid/Angular/Svelte/Vue/Preact/TC39, React compiler angle, pitfalls.
A bilingual, hands-on guide to TanStack Query v5: server vs client state, useQuery/useMutation, caching (staleTime vs gcTime), optimistic updates, pagination, strengths, weaknesses, and what you lose without it.
A bilingual walkthrough of classic type-challenges (easy → hard): Pick, Readonly, Exclude, Awaited, Omit, DeepReadonly, Permutation, Union to Intersection, CamelCase — each with a toggle-to-reveal answer and a detailed explanation.
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.
Senior guide to fluid CSS: clamp() interpolation math, type scales, dvh/svh/lvh, aspect-ratio, intrinsic keywords, zoom a11y, and container units.
Why not to hand-roll i18n formatting: Intl.NumberFormat, DateTimeFormat, PluralRules, Collator, Segmenter, performance, and timezone pitfalls.
How V8 garbage collection works, why leaks are reachability bugs, classic frontend leak patterns, WeakRef tradeoffs, and a DevTools hunting workflow.
A principal-level playbook for unit, integration, and e2e testing with Vitest, Testing Library, and Playwright—without a slow, flaky suite.
Senior deep-dive: Error object anatomy, what try/catch cannot catch, custom errors with cause, async patterns, global handlers, retries, and monitoring.
A principal-level guide to client-side storage APIs, quota/eviction, Service Worker caching strategies, background sync, and offline-first architecture patterns.
Stacking contexts, paint order, sticky pitfalls, and CSS anchor positioning — the senior guide to z-index scoping and popover layout without JavaScript.
A principal-level guide to choosing server push, full-duplex, P2P, and HTTP/3 transport on the frontend—with trade-offs, reconnection, and production scaling.
Master JS value vs reference semantics, shallow copy traps, structuredClone limits, immutable updates, Object.freeze, and Map/Set for predictable state.
Why the main thread breaks INP, how Web Workers and shared memory actually work, and when WASM beats JS — a principal engineer guide to browser multithreading.
Deep guide to animation-timeline, scroll() and view() timelines, animation-range, named timelines, performance vs JS listeners, a11y, and @supports fallbacks.
CSR, SSR, SSG, streaming, islands, and RSC — a principal-level map of where HTML is generated, what hydration costs, and how to choose.
Senior guide: transitions, animations, WAAPI, cubic-bezier/steps/linear(), compositor motion, @keyframes, @starting-style exits, and reduced motion.
A senior guide to the accessibility tree, ARIA authoring patterns, keyboard semantics, live regions, and pragmatic a11y testing for design systems.
Senior guide to event delegation with closest(), addEventListener options, DocumentFragment batching, read/write separation, and when virtualization wins.
How browsers resolve CSS in 2026: origin, @layer, (a,b,c) specificity, :is/:where/:has(), and architecture patterns that end specificity wars.
How the browser security model, XSS, CSP, isolation headers, and supply-chain controls form a layered defense for modern frontend systems.
Native HTML form validation deep-dive: ValidityState, setCustomValidity, async/cross-field patterns, ARIA errors, FormData — and why the server always wins.
Field data beats lab data — a principal-engineer playbook for measuring LCP, INP, and CLS in production and fixing what CrUX actually scores.
Why HSL fails for design systems, how OKLCH and color-mix() fix perceptual lightness and palettes, plus P3 gamut, relative colors, and fallbacks.
Parse, layout, paint, composite: critical path, main-thread contention, reflow thrashing, layer promotion, and engine changes in Blink, Gecko, and WebKit.
Đưa workload Kubernetes tới mức production-shaped với config, probes, resources, rollout và playbook debug sự cố bằng kubectl.
Client-side fetch resilience for seniors: HTTP gotchas, AbortController timeouts, exponential backoff, stale-response races, dedup, and a fetchJSON wrapper.
Senior deep dive: CSS custom properties vs Sass, cascade scoping, fallbacks, JS APIs, semantic theming, IACVT, and @property for gradient animation.
Từ một host tới cluster: kiến trúc Kubernetes, Pod, Deployment, Service, kubectl, kind và lần deploy ứng dụng đầu tiên.
Lexical scope, closures, the var-in-loop bug, memory tradeoffs, and this binding — with an interactive demo and real frontend patterns.
Animate elements as they enter and leave the DOM using @starting-style, transition-behavior allow-discrete, popovers and dialogs — no JavaScript animation library needed.
Deep dive into @container, container-type, cqi units, style queries, containment costs, and the gotchas senior engineers hit when replacing media queries.
Debounce vs throttle vs rAF — from-scratch implementations, leading/trailing/maxWait, passive listeners, scrollend, and React pitfalls.
Senior CSS Grid deep-dive: auto-fit vs auto-fill, subgrid, masonry proposals, dense packing, named areas, alignment — with an interactive demo.
Tối ưu và harden image với base nhỏ, cache, multi-stage, non-root, secret mount, .dockerignore và quét lỗ hổng.
Promise anatomy, sequential vs parallel pitfalls, all/allSettled/race/any semantics, cancellation, retries, concurrency pools, and error traps.
Flexbox vs Grid mental model for senior engineers: axes, flex shorthand, fr tracks, auto-fit vs auto-fill, intrinsic sizing, and production layout pitfalls.
Đào sâu Compose với interpolation, healthcheck, profiles, override files, scale và restart policy qua các lab có thể chạy.
Dựng ứng dụng nhiều container bằng compose.yaml: service, image/build, network, volume, dependency và workflow hằng ngày.
Theo dõi đường đi mạng Docker: bridge, DNS theo tên service, publish/expose port và kết nối ứng dụng với database.
Senior guide to choreographing CSS animations: staggering lists with custom-property delays, nth-child timing, sequencing multiple animations, and negative delays.
Làm chủ dữ liệu container với named volume, bind mount, tmpfs; thực hành PostgreSQL bền vững và quản lý cấu hình an toàn.
Tự build image với Dockerfile: instruction, layer/cache, multi-stage, .dockerignore, CMD/ENTRYPOINT và chiến lược tag.
Hiểu đúng container, image, layer và vòng đời docker run; so sánh với VM, thực hành container đầu tiên và các lệnh cốt lõi.
Senior guide to motion accessibility: the prefers-reduced-motion media query, opt-in vs global reset strategies, replacing motion with fades, matchMedia, and WCAG 2.3.3.
Plain CSS variables cannot interpolate. Learn the @property at-rule to register typed custom properties and animate gradient angles, colors, and numbers smoothly.
Tổng hợp toàn bộ cơ chế variant trong Tailwind CSS v4: hover, focus, responsive, dark mode, group, peer, has, data/aria, arbitrary variant và cách dùng trong Radix/shadcn.
Modern CSS finally animates display:none and height:auto. Learn transition-behavior allow-discrete, @starting-style, interpolate-size and calc-size with real examples.
Series finale: why client validation is UX not security, open-redirect fixes, DOM risks beyond XSS, postMessage hygiene, and a practical frontend threat-model checklist tying Parts 1–9 — with exercises.
There are no secrets in the browser: env vars, source maps, and third-party scripts leak. Plus npm supply-chain threats — lockfiles, audit, SRI, typosquatting — and practical defenses, with exercises.
Chi tiết P/E, P/B, EV/EBITDA, ROE, ROA, ROIC, cách đọc 3 báo cáo tài chính, kèm ví dụ tính toán và checklist đánh giá sức khỏe doanh nghiệp. Không phải lời khuyên đầu tư.
HTTPS/TLS, HSTS, mixed content, the production security-header stack (CSP, COOP/COEP, Permissions-Policy, SRI), static-host `_headers` examples, and audit tooling — with exercises.
A bilingual deep-dive into HTTP cookies: how Set-Cookie works, every attribute (Secure, HttpOnly, SameSite, Partitioned/CHIPS), reading them in JS, cookies vs storage, and the security threats (XSS, CSRF, fixation) with prevention.
A bilingual deep-dive into CORS: the Same-Origin Policy, simple vs preflight requests, every Access-Control header, credentials mode, which requests bypass CORS checks, and how to solve CORS in real web apps.
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.
Deep-dive vào WICG HTML-in-Canvas proposal: render HTML thật vào canvas/GPU texture, giữ nguyên accessibility và CSS. Kèm demo workflow editor thực tế với Canvas edges + HTML nodes.
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.
A bilingual deep-dive into source maps: what they are, how they work internally (VLQ encoding, mappings field), how to generate and configure them, and best practices for production debugging.
Clickjacking (UI redressing) tricks users into clicking your real UI through invisible iframes. Defend with CSP frame-ancestors, X-Frame-Options, safe embedding, and postMessage hygiene — with exercises.
Senior guide to fast CSS animations: the render pipeline, compositor-only properties, will-change tradeoffs, avoiding layout thrash, and DevTools measurement.
CORS is not a firewall for your API — it relaxes SOP so browsers can read cross-origin responses when the server opts in. Preflight, credentials, misconfigurations, and what CORS cannot fix — with exercises.
CSRF abuses the gap SOP leaves open: the browser sends cookies cross-origin but blocks reading the reply. SameSite cookies, anti-CSRF tokens, Origin checks, and layered defenses — with exercises.
Đ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.
Đào sâu các tầng cache giữa user và origin: cache headers, browser memory/disk/bfcache, CDN edge, reverse proxy, Service Worker, và mọi pitfall thường gặp.
How Content-Security-Policy contains XSS even when sanitization fails: directives, nonces, strict-dynamic, report-only rollout, Trusted Types, and a starter strict policy — with exercises.
Senior guide to animating CSS transforms: translate/scale/rotate, transform-origin, individual transform properties, 3D and perspective, and why transforms are cheap.
Cross-Site Scripting (XSS) for frontend devs: why it tops the threat list, stored vs reflected vs DOM-based, dangerous sinks, textContent vs DOMPurify, escaping contexts, Trusted Types, and defense-in-depth — with exercises.
The foundation every frontend dev must own: what an origin is, what the Same-Origin Policy protects (and what it does not), how cookies and credentials cross the wire, and the mental model for the whole series — with exercises.
Control access and wire your app for testability: the JS Proxy for reactivity/validation/lazy loading, Dependency Injection and Inversion of Control, the composition root, and choosing constructor injection over service-locator.
Make impossible states impossible: the State pattern, modeling UI/lifecycle with a finite state machine, type-safe transitions via discriminated unions, and why this kills "loading && error" bugs.
Turn actions into data: the Command pattern for dispatch, queues, and undo/redo, the Memento for snapshotting state, and how reducers (Redux-style) are commands in disguise.
Senior guide to CSS easing: keyword easings, reading cubic-bezier curves, steps() for sprites, and the linear() function for springs and bounces.
Tame third-party and legacy code: the Adapter that makes an incompatible API fit your interface, the Facade that hides a messy subsystem behind one entry point, and the anti-corruption layer that keeps vendor types out of your domain.
Add behavior without touching the original: the Decorator pattern via higher-order functions, wrapping a service to add caching/logging/retry, the middleware chain, and how TS decorators (and the new standard) compare.
Harden bash scripts with set -euo pipefail, traps, mktemp cleanup, die(), IFS, set -x debugging, ShellCheck, and idempotency — bilingual, with a comparison table and exercises.
Decouple "something changed" from "who reacts": the Observer pattern, a fully typed event emitter, the platform EventTarget, Pub/Sub via an event bus, and how signals/reactivity build on the same idea.
grep, sed, and awk for shell text processing: flags, substitution, field parsing, cut/sort/uniq/tr/wc pipelines — bilingual, with real log pipelines and exercises.
Swap an algorithm at runtime without touching its caller: the Strategy pattern, why a map of functions is the idiomatic TS form, replacing sprawling if/switch, and injecting behavior for testability.
Master bash I/O: stdin/stdout/stderr, > and >>, 2>&1 order traps, /dev/null, here-docs, pipes, tee, and read — bilingual, with a comparison table and exercises.
Construct complex objects step by step: fluent method chaining, immutable builders, the type-safe staged (phantom-type) builder that makes illegal states unrepresentable, and when an options object is enough.
A senior guide to CSS transitions: the transition model, animatable properties, transition-behavior allow-discrete, transitioning display:none, and pitfalls.
Indexed and associative bash arrays, string slicing, prefix/suffix removal, search/replace, case conversion, safe iteration, and parameter defaults — bilingual, with exercises.
Centralize object creation: factory functions over `new`, discriminated-union driven factories, the Abstract Factory for families of related objects, and where this beats classes in TypeScript.
Bash functions: define with name() or function, pass $1/$@, return exit codes not strings, capture output with $(), scope with local, source library files — bilingual, with exercises.
When (and when not) to share a single instance: the Singleton pattern, why ESM modules are already singletons, lazy init, the testability trap, and typed implementations — with exercises.
Master bash loops: for-in over lists and files, C-style for, while/until, safe line-by-line reading with IFS= and read -r, process substitution vs pipes, break/continue, and brace expansion — bilingual, with exercises.
Master bash conditionals: if runs on exit codes (0 = true), test vs [[ ]], file/string/numeric operators, && || short-circuit, and case patterns — bilingual, with exercises.
Master CSS @keyframes and the animation shorthand: longhand properties, fill-mode, direction, iteration, multiple animations, and animation vs transition.
Variables without spaces around =, quoting rules, ${var} braces, command and arithmetic expansion, positional args, defaults, export, and why "$var" beats bare $var — bilingual, with exercises.
Làm chủ infer từ ReturnType tới candidate resolution, variadic tuple, constrained infer, recursive extraction và các contract router, i18n, state machine trong production.
Start scripting from zero: what a shell really is, bash vs sh, the shebang line, making a script executable, the three ways to run it, echo vs printf, and exit codes — bilingual, with exercises.
An exploration of Module Federation, shared state management, and breaking down monolithic UI architectures for enterprise scale applications.
How SWC and Turbopack are fundamentally changing frontend tooling performance — a lap around the toolchain as of late 2024.
Biến một mục tiêu đáng làm thành hệ thống có thời gian, mức tối thiểu, định nghĩa hoàn thành, chỉ số dẫn và trễ, cùng quy tắc xem lại rõ ràng.
Phân biệt mệt tạm thời với kiệt sức nghề nghiệp, nhìn cả nguyên nhân cá nhân lẫn tổ chức, và đặt giới hạn để công việc có thể duy trì an toàn.
Kiên nhẫn không phải chờ một cú bứt phá chắc chắn sẽ đến: đặt thời hạn thử nghiệm, theo dõi chỉ số dẫn và trễ, rồi tiếp tục, điều chỉnh hoặc dừng.
Đổi khung không phải ép mình lạc quan: tách sự thật khỏi diễn giải, kiểm tra bằng chứng, chọn cách hiểu cân bằng và giữ ranh giới cần thiết.
Tách sự kiện khỏi bản sắc, nhận trách nhiệm, sửa hậu quả và thiết kế thử nghiệm tiếp theo — không cần biến mọi thất bại thành chiến thắng.
Kỷ luật thực dụng là quyết định trước, giảm ma sát và có phương án dự phòng — không phải tự ép mình bất kể sức khỏe hay hoàn cảnh.
Tính nhất quán đến từ một nhịp phù hợp, tín hiệu ổn định và phiên bản tối thiểu — không phải chuỗi ngày hoàn hảo.
Tập trung không phải tính cách bẩm sinh: hãy giảm chuyển ngữ cảnh, định nghĩa đầu ra và bảo vệ một khoảng làm việc cho điều quan trọng.
Nỗ lực là đòn bẩy bạn kiểm soát, nhưng chỉ phát huy khi đi cùng mục tiêu đáng làm, cách luyện phù hợp, phản hồi và điều chỉnh.
How Node handles thousands of connections on one thread, scaling with cluster and worker_threads, load balancers, timeouts, keep-alive, graceful shutdown, and client pooling — bilingual with TypeScript examples.
TCP is a byte stream with no message boundaries — learn delimiter vs length-prefix framing, stateful decoders, and backpressure with socket.write() and drain in Node.js + TypeScript, bilingual.
Why plaintext HTTP is unsafe, how TLS encrypts and authenticates, the handshake, certificates, self-signed dev certs, node:tls and node:https servers — bilingual with runnable TypeScript examples.
WebSockets for real-time push: HTTP limits, the upgrade handshake, ws server + client in Node.js + TypeScript, heartbeats, and when to use SSE/polling instead — bilingual with exercises.
HTTP is text over TCP: raw request/response anatomy, a minimal socket responder, node:http createServer, reading bodies, Content-Length vs chunked, keep-alive — bilingual with runnable TypeScript examples.
How DNS turns hostnames into IP addresses, the resolution chain from your app to authoritative servers, Node.js dns.lookup vs dns.resolve, record types, TTL caching, and dual-stack IPv4/IPv6 — bilingual, with runnable TypeScript examples.
UDP for Node.js + TypeScript: connectionless datagrams with node:dgram, when UDP beats TCP, the 65507-byte limit, no backpressure, and beginner pitfalls — bilingual, with runnable examples.
Open real TCP sockets in Node.js: the three-way handshake, echo server + client with createServer/createConnection, socket events, graceful close, and common pitfalls — bilingual with exercises.
The mental model every network programmer needs: the TCP/IP layers, IP addresses & ports, packets, and the client/server model — with a tiny Node.js + TypeScript demo, bilingual, plus exercises.