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.
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.
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.
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.
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.
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.
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.
Hallucination không phải bug mà là bản chất của next-token prediction. Bài đi sâu vào 4 cơ chế gây hallucinate, taxonomy 6 dạng dev thường gặp, và pyramid 6 tầng phòng thủ từ type-check đến human review.
Mổ xẻ alignment LLM: RLHF process step-by-step, Constitutional AI của Anthropic, DPO, jailbreak techniques (prompt injection, DAN, encoding attacks), red teaming, và checklist defense practical cho production AI app.
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.
Pattern thực chiến giảm chi phí LLM ở scale: prompt caching, semantic cache, model routing, distillation, batch API, quantization, streaming + early stop, và framework đo ROI khi self-host.
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.
Bên trong vision-language model (CLIP, ViT, patch tokenization), audio (Whisper, native audio LLM), video (Gemini 2.0+), 3 architecture pattern (early/late/cross fusion), use case practical, và 7 limitation cần biết.
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.
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.
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.
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.
How senior engineers pack system prompts, tools, history, RAG, and output reserve into a fixed context window — and manage memory when the budget breaks.
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).
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.
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.
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.
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.
Đà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.
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.
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.
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.
Deep dive into the JS event loop: call stack, macrotask vs microtask queues, await desugaring, timer clamping, rAF, and predictable console ordering.
Senior guide to choreographing CSS animations: staggering lists with custom-property delays, nth-child timing, sequencing multiple animations, and negative delays.
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.
Modern CSS finally animates display:none and height:auto. Learn transition-behavior allow-discrete, @starting-style, interpolate-size and calc-size with real examples.
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 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.
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.
Senior guide to fast CSS animations: the render pipeline, compositor-only properties, will-change tradeoffs, avoiding layout thrash, and DevTools measurement.
Đ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.
Senior guide to animating CSS transforms: translate/scale/rotate, transform-origin, individual transform properties, 3D and perspective, and why transforms are cheap.
Senior guide to CSS easing: keyword easings, reading cubic-bezier curves, steps() for sprites, and the linear() function for springs and bounces.
A senior guide to CSS transitions: the transition model, animatable properties, transition-behavior allow-discrete, transitioning display:none, and pitfalls.
Master CSS @keyframes and the animation shorthand: longhand properties, fill-mode, direction, iteration, multiple animations, and animation vs transition.
`infer` cho phép trích xuất type từ bất kỳ position nào trong type expression. Bài này đi từ ReturnType, Parameters cơ bản tới template literal parsing, recursive type, infer extends, và 5 use case thực chiến.
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.