jvinhit//lab

Search posts

Type to search across journal entries.

↑ ↓ navigate ↵ open esc close

FileSystem/Archive

// Journal_Archive

415 entries total — 24 series + 40 standalone.

Series

All series >
TanStack Query (React Query) — từ Zero đến Production Series tiếng Việt đưa bạn từ "fetch dữ liệu bằng useEffect + useState" đến làm chủ server state với TanStack Query (React Query) v5 một cách chuyên nghiệp. Bắt đầu với mental model — vì sao server state khác client state và vì sao không nên tự viết fetch tay — rồi cài đặt QueryClient, Provider và Devtools cho query đầu tiên. Tiếp đó đào sâu useQuery (status vs fetchStatus, loading/error/empty), staleTime/gcTime và vòng đời cache, hệ query key phân cấp cùng API client validate bằng zod và queryOptions. Bạn sẽ học dependent/parallel queries, pagination và useInfiniteQuery cho infinite scroll, mutations với invalidate, optimistic update (onMutate/rollback) và quản lý cache thủ công, rồi error handling, retry, Suspense và tối ưu hiệu năng (select, structural sharing, prefetch). Kết thúc bằng phần testing với MSW + React Testing Library và một capstone build feature CRUD hoàn chỉnh. Mỗi bài có code TypeScript/React 19 chạy được và bài tập thực hành. 18 parts
  1. 01 TanStack Query · Phần 1 — Mental Model & Cài đặt
  2. 02 TanStack Query · Phần 2 — useQuery sâu & vòng đời cache
  3. 03 TanStack Query · Phần 3 — Query keys, zod & queryOptions
  4. 04 TanStack Query · Phần 4 — Pagination & useInfiniteQuery
  5. 05 TanStack Query · Phần 5 — Mutations & Invalidation
  6. 06 TanStack Query · Phần 6 — Optimistic Updates & quản lý cache
  7. 07 TanStack Query · Phần 7 — Errors, Retry, Suspense & Performance
  8. 08 TanStack Query · Phần 8 — Testing & Capstone
  9. 09 TanStack Query · Phần 9 — QueryClient & Defaults sâu
  10. 10 TanStack Query · Phần 10 — SSR, Next.js App Router & Hydration
  11. 11 TanStack Query · Phần 11 — Prefetching & tích hợp Router nâng cao
  12. 12 TanStack Query · Phần 12 — QueryClient như một store: thao tác cache chủ động
  13. 13 TanStack Query · Phần 13 — Offline-first & Persistence sâu
  14. 14 TanStack Query · Phần 14 — Realtime: WebSocket, SSE & cache
  15. 15 TanStack Query · Phần 15 — Mutation nâng cao
  16. 16 TanStack Query · Phần 16 — Hiệu năng render sâu
  17. 17 TanStack Query · Phần 17 — Type-safety đỉnh cao
  18. 18 TanStack Query · Phần 18 — Kiến trúc production & Migration (Capstone)
Service Workers & PWA — từ Zero đến Production Series tiếng Việt đưa bạn từ "service worker là cái gì" đến chỗ tự tin xây dựng một Progressive Web App offline-first chạy thật. Bắt đầu với mental model — service worker là một network proxy chạy nền, vòng đời (lifecycle) và vì sao nó khác Web Worker — rồi đào sâu lifecycle (install, activate, waiting, skipWaiting, clients.claim, update flow) và cách debug trong DevTools. Tiếp đó là chặn request với fetch event và respondWith, Cache API cùng các caching strategy kinh điển (cache-first, network-first, stale-while-revalidate), kiến trúc app shell offline-first và trang fallback, rồi advanced caching (versioning, cleanup, expiration, opaque/CORS). Phần sau là các năng lực nâng cao của nền tảng: Background Sync để retry request thất bại bằng hàng đợi IndexedDB, Push Notifications với Push API + VAPID, và Workbox để giảm boilerplate (precaching, routing, vite-plugin-pwa) — kết bằng capstone build một PWA hoàn chỉnh: manifest, install prompt, update UX, testing và deploy. Mỗi bài có ví dụ code chạy được và bài tập thực hành kèm hướng dẫn. 20 parts
  1. 01 Service Workers · Phần 1 — Mental model & "Hello Service Worker"
  2. 02 Service Workers · Phần 2 — Lifecycle: install, waiting, activate & update
  3. 03 Service Workers · Phần 3 — Fetch event & chặn request
  4. 04 Service Workers · Phần 4 — Cache API & caching strategies
  5. 05 Service Workers · Phần 5 — Offline-first & app shell
  6. 06 Service Workers · Phần 6 — Advanced caching: versioning, cleanup & giới hạn
  7. 07 Service Workers · Phần 7 — Background Sync & hàng đợi offline
  8. 08 Service Workers · Phần 8 — Push Notifications
  9. 09 Service Workers · Phần 9 — Workbox: viết SW production trong vài dòng
  10. 10 Service Workers · Phần 10 — Capstone: build PWA offline-first hoàn chỉnh
  11. 11 Service Workers · Phần 11 — Web App Manifest & Install nâng cao
  12. 12 Service Workers · Phần 12 — Update flows mastery
  13. 13 Service Workers · Phần 13 — Navigation Preload
  14. 14 Service Workers · Phần 14 — Streaming responses
  15. 15 Service Workers · Phần 15 — Storage, quota & persistence
  16. 16 Service Workers · Phần 16 — Clients API & messaging hai chiều
  17. 17 Service Workers · Phần 17 — Background Fetch & Periodic Sync nâng cao
  18. 18 Service Workers · Phần 18 — Bảo mật service worker
  19. 19 Service Workers · Phần 19 — Hiệu năng & gỡ lỗi chuyên sâu
  20. 20 Service Workers · Phần 20 — Patterns nâng cao & tích hợp framework (Capstone 2)
AI for Developers — LLMs, Agents & Coding The complete AI path for developers in one series: from the history of AI and how LLMs work (tokens, sampling, embeddings, prompting) to choosing models, RAG and fine-tuning, building agents (tool use, architecture, patterns, MCP), and finally coding day-to-day with AI agents and Cursor — hands-on and hype-free. 42 parts
  1. 01 Lịch sử AI — Từ Perceptron 1958 đến Coding Agents 2026
  2. 02 Prompting Fundamentals — Từ câu hỏi mơ hồ đến instruction LLM thực sự hiểu
  3. 03 Prompt Engineering for Agents — Messages, Personas, Few-Shot & Structured Output
  4. 04 Tokens — Đơn vị tính tiền và đơn vị suy nghĩ của LLM
  5. 05 Tokens & Context Windows — The Hard Budget Every AI Agent Must Respect
  6. 06 Tokenization, Temperature, Top-p, Top-k — Mechanics bên dưới mọi LLM
  7. 07 Sampling for Agents: Temperature, Top-p, Top-k — When Randomness Helps or Hurts
  8. 08 Stopping Criteria & Output Control — When Generation Ends and What to Do About It
  9. 09 Vector Embeddings — Đi sâu vào "DNA của ý nghĩa" trong LLM
  10. 10 LLM Models Comparison — Claude, GPT, Gemini, Llama — dùng cái nào cho task nào
  11. 11 Choosing an LLM for Agents: A Durable Framework Beyond Leaderboards
  12. 12 Open-source LLM Ecosystem 2026 — Llama, Mistral, DeepSeek, Qwen và cách run local
  13. 13 Multimodal LLM — Cách AI thực sự "thấy" image, "nghe" audio, "xem" video
  14. 14 AI Hallucination — Tại sao LLM "bịa" và 6 tầng phòng thủ cho dev
  15. 15 LLM Cost Optimization — 10 patterns giảm hóa đơn 50-95% không mất quality
  16. 16 AI Safety & Alignment — RLHF, Constitutional AI, Jailbreak, và defense thực tế cho dev
  17. 17 Evaluating LLMs & Agents: Golden Sets, Metrics, LLM-as-Judge, and Regression in CI
  18. 18 Fine-tuning vs Prompting vs RAG: A Decision Framework for Adapting LLMs
  19. 19 RAG — Retrieval Augmented Generation từ A đến Z cho dev
  20. 20 Fine-tuning LLM — Khi nào cần, khi nào không, và cách thực sự làm
  21. 21 Context Engineering & Agent Memory — Packing the Window Without Losing the Thread
  22. 22 Function Calling & Tool Use — JSON Schema, the Agent Loop, Parallel Calls & Security
  23. 23 Agent Architecture — Bên trong 1 AI agent là gì
  24. 24 Agent Patterns: ReAct, Reflection & Planning — From One LLM Call to a Production Loop
  25. 25 Orchestrator Pattern — Điều phối multi-agent cho dự án lớn
  26. 26 MCP (Model Context Protocol) - Kiến trúc chi tiết
  27. 27 Working with Coding Agents — Từ autocomplete đến "đồng nghiệp" AI
  28. 28 Coding Agent Mastery — Tư duy, prompt và patterns làm việc hiệu quả
  29. 29 AI Coding Agent — Master Mindset Guide (2026)
  30. 30 AI Developer Mindset — Think in Prompts, Rules & Skills
  31. 31 Hiểu Codebase mới bằng AI — Từ "Day 1 panic" đến làm chủ trong 1 tuần
  32. 32 Developing Features với AI — Plan, Scaffold, Build, Polish
  33. 33 Finding and Fixing Bugs với AI — Debug workflow không bị dắt mũi
  34. 34 Reviewing & Testing Code với AI — Kỹ năng survival của dev kỷ nguyên agent
  35. 35 Customizing AI Agent — Biến Cursor thành cộng sự biết rõ việc của bạn
  36. 36 Config Files cho Coding Agent — Từ CLAUDE.md đến .mdc, MCP và Commands
  37. 37 Cursor Rules — Enforce coding standard tự động cho AI agent
  38. 38 Cursor Skills — Hướng dẫn toàn tập cho người mới
  39. 39 Cursor Sub-agents — Delegate task nặng, giữ context window sống sót
  40. 40 Handoff Skill — bàn giao context & tài liệu sống cho agent
  41. 41 Putting It All Together — 1 feature từ ticket đến deploy với AI agent
  42. 42 Frontend in the AI Era (2026) — What to Learn, What to Drop, How to Survive
Vite from Zero to Pro Master Vite 8 from the ground up — every part ships a real config and a live, interactive demo. Start with the native-ESM mental model and your first project, then the vite.config.ts anatomy, the dev server and on-demand transform, dependency pre-bundling, HMR internals, CSS and static assets, glob imports, env vars and modes, the Rollup-compatible plugin API, production builds with Rolldown, library mode plus the SSR/Environment API, and finish with performance tuning, a capstone config, and migrating off Webpack/CRA. 12 parts
  1. 01 Vite · Part 1 — The Mental Model & Your First Project
  2. 02 Vite · Part 2 — vite.config.ts Anatomy
  3. 03 Vite · Part 3 — The Dev Server & Native ESM
  4. 04 Vite · Part 4 — Dependency Pre-bundling
  5. 05 Vite · Part 5 — HMR Deep Dive
  6. 06 Vite · Part 6 — CSS Handling
  7. 07 Vite · Part 7 — Static Assets & Glob Imports
  8. 08 Vite · Part 8 — Env Vars & Modes
  9. 09 Vite · Part 9 — Plugins
  10. 10 Vite · Part 10 — Production Builds with Rolldown
  11. 11 Vite · Part 11 — Library Mode + SSR & the Environment API
  12. 12 Vite · Part 12 — Performance, Capstone & Migration
Webpack from Zero to Pro Master Webpack 5 config from the ground up — every part ships a real config and a live, interactive demo. Start with the bundler mental model and your first build, then the config anatomy, loaders and plugins, the dev server with HMR and source maps, code splitting and lazy loading, tree shaking and production mode, long-term caching with contenthash, bundle analysis and performance, advanced resolve plus authoring your own loader and plugin, Module Federation for micro-frontends, and a production capstone with migration tips. 12 parts
  1. 01 Webpack · Part 1 — The Mental Model & Your First Build
  2. 02 Webpack · Part 2 — The Config Anatomy
  3. 03 Webpack · Part 3 — Loaders
  4. 04 Webpack · Part 4 — Plugins
  5. 05 Webpack · Part 5 — Dev Server, HMR & Source Maps
  6. 06 Webpack · Part 6 — Code Splitting & Lazy Loading
  7. 07 Webpack · Part 7 — Tree Shaking & Production Mode
  8. 08 Webpack · Part 8 — Caching & Long-Term Caching
  9. 09 Webpack · Part 9 — Bundle Analysis & Performance
  10. 10 Webpack · Part 10 — Advanced Resolve + Authoring Your Own Loader & Plugin
  11. 11 Webpack · Part 11 — Module Federation
  12. 12 Webpack · Part 12 — Production Capstone + Migration
Build Chrome Extensions — Zero to Pro (Manifest V3) Go from "I want to build a browser extension" to shipping one on the Chrome Web Store. Every part has real config and a live, interactive simulator. Start with the Manifest V3 mental model and your first "load unpacked" extension, then the manifest deep dive, the component architecture (popup, service worker, content scripts, options), content-script injection and isolated worlds, the event-driven background service worker, messaging across contexts, chrome.storage, UI surfaces and the action API, permissions and security, the powerful APIs (tabs, scripting, contextMenus, commands, notifications), a pro Vite + CRXJS + TypeScript + React build, and finally publishing, auto-update, and cross-browser — with a capstone extension. 12 parts
  1. 01 Build Chrome Extensions · Part 1 — The Manifest V3 Mental Model & Your First Extension
  2. 02 Build Chrome Extensions · Part 2 — The Manifest, Deep Dive
  3. 03 Build Chrome Extensions · Part 3 — Architecture & the Component Model
  4. 04 Build Chrome Extensions · Part 4 — Content Scripts
  5. 05 Build Chrome Extensions · Part 5 — The Background Service Worker
  6. 06 Build Chrome Extensions · Part 6 — Messaging Across Contexts
  7. 07 Build Chrome Extensions · Part 7 — Storage
  8. 08 Build Chrome Extensions · Part 8 — UI Surfaces & the Action API
  9. 09 Build Chrome Extensions · Part 9 — Permissions & Security
  10. 10 Build Chrome Extensions · Part 10 — The Powerful APIs
  11. 11 Build Chrome Extensions · Part 11 — Pro Tooling & Build (Vite + CRXJS + TS + React)
  12. 12 Build Chrome Extensions · Part 12 — Publish, Auto-Update, Cross-Browser & Capstone
Web Security for Frontend Devs The security essentials every frontend developer must know — each part shows a real threat, vulnerable code, then the fix. 27 parts
  1. 01 Web Security for Frontend Devs · Part 1 — The Browser Security Model & Same-Origin Policy
  2. 02 Web Security for Frontend Devs · Part 2 — Cross-Site Scripting (XSS)
  3. 03 Web Security for Frontend Devs · Part 3 — Content Security Policy (CSP)
  4. 04 Web Security for Frontend Devs · Part 4 — CSRF & SameSite Cookies
  5. 05 Web Security for Frontend Devs · Part 5 — Auth Tokens & Secure Storage
  6. 06 Web Security for Frontend Devs · Part 6 — CORS Explained
  7. 07 Web Security for Frontend Devs · Part 7 — Clickjacking & Framing
  8. 08 Web Security for Frontend Devs · Part 8 — Secure Headers & HTTPS/TLS
  9. 09 Web Security for Frontend Devs · Part 9 — Secrets, Data Leakage & Supply-Chain
  10. 10 Web Security for Frontend Devs · Part 10 — Input Validation, Open Redirects & a Frontend Threat Model
  11. 11 Web Security for Frontend Devs · Part 11 — Prototype Pollution
  12. 12 Web Security for Frontend Devs · Part 12 — DOM Clobbering
  13. 13 Web Security for Frontend Devs · Part 13 — Strict CSP & CSP Bypasses
  14. 14 Web Security for Frontend Devs · Part 14 — postMessage & Cross-Window Exploits
  15. 15 Web Security for Frontend Devs · Part 15 — JWT & Token Attacks
  16. 16 Web Security for Frontend Devs · Part 16 — Web Cache Deception & Open-Redirect Chaining
  17. 17 Web Security for Frontend Devs · Part 17 — Supply-Chain Attacks via npm install
  18. 18 Web Security for Frontend Devs · Part 18 — Reverse Tabnabbing & window.opener
  19. 19 Web Security for Frontend Devs · Part 19 — Clipboard & Autofill Attacks
  20. 20 Web Security for Frontend Devs · Part 20 — Cross-Origin Isolation: COOP, COEP & CORP
  21. 21 Web Security for Frontend Devs · Part 21 — XS-Leaks: Cross-Site Leaks & Side Channels
  22. 22 Web Security for Frontend Devs · Part 22 — HTML Sanitization & Mutation XSS (mXSS)
  23. 23 Web Security for Frontend Devs · Part 23 — iframe Sandboxing & Third-Party Widget Isolation
  24. 24 Web Security for Frontend Devs · Part 24 — OAuth 2.0 & OIDC for SPAs: PKCE & the BFF Pattern
  25. 25 Web Security for Frontend Devs · Part 25 — Cross-Site WebSocket Hijacking (CSWSH)
  26. 26 Web Security for Frontend Devs · Part 26 — Subresource Integrity (SRI)
  27. 27 Web Security for Frontend Devs · Part 27 — Trusted Types: Killing DOM-XSS by Construction
Node Package Managers & the Supply Chain — Deep Dive Go from "I just run npm install" to understanding the entire dependency layer like a senior. Start with the mental model every package manager shares (resolve → fetch → link, package.json, semver, the registry, lockfiles), then go deep on npm, Yarn Classic (v1), Yarn Berry (v2–v4) with Plug'n'Play, and pnpm plus Bun — what each does differently and why. Then the parts most guides skip: lockfiles and integrity hashes, lifecycle scripts and node-gyp, how native modules ship prebuilt binaries, and the dependency supply chain — real-world attacks (typosquatting, dependency confusion, malicious postinstall, account takeover) and a hardened defense playbook. Ends with monorepos/workspaces and a capstone decision-and-migration guide. 12 parts
  1. 01 Node Package Managers · Part 1 — The Mental Model
  2. 02 Node Package Managers · Part 2 — npm in Depth
  3. 03 Node Package Managers · Part 3 — Yarn Classic (v1)
  4. 04 Node Package Managers · Part 4 — Yarn Berry (v2–v4) & Plug'n'Play
  5. 05 Node Package Managers · Part 5 — pnpm & the Content-Addressable Store (+ Bun)
  6. 06 Node Package Managers · Part 6 — Lockfiles, Determinism & Integrity
  7. 07 Node Package Managers · Part 7 — Lifecycle Scripts & node-gyp
  8. 08 Node Package Managers · Part 8 — Native Modules & Binary Distribution
  9. 09 Node Package Managers · Part 9 — Supply-Chain Attacks
  10. 10 Node Package Managers · Part 10 — Supply-Chain Defense
  11. 11 Node Package Managers · Part 11 — Monorepos & Workspaces
  12. 12 Node Package Managers · Part 12 — Capstone: Choose, Migrate, Harden
Tailwind, Radix & shadcn/ui — từ Zero đến Pro Series tiếng Việt giúp bạn thành thạo bộ công cụ styling React hiện đại — mỗi phần đều có config thật và một demo tương tác trực tiếp. Bắt đầu với tư duy nền tảng và cài đặt Tailwind CSS v4, rồi tới utility cốt lõi và layout, design token và theming, variant và kết hợp trạng thái, cách dựng component tái dùng cho đúng (clsx, tailwind-merge, cn, cva) cùng hệ sinh thái plugin. Tiếp đó đi headless và accessible với Radix UI primitives, áp dụng shadcn/ui (triết lý, CLI, components.json), theme và tùy biến nó, dựng form đã validate với react-hook-form + zod, và kết thúc bằng các mẫu chuyên nghiệp cùng capstone dashboard. 13 parts
  1. 01 Tailwind, Radix & shadcn/ui · Part 1 — The Mental Model & Setup (Tailwind v4)
  2. 02 Tailwind, Radix & shadcn/ui · Part 2 — Core Utilities & Layout
  3. 03 Tailwind, Radix & shadcn/ui · Part 3 — Design Tokens & Theming with @theme
  4. 04 Tailwind, Radix & shadcn/ui · Part 4 — Variants, States & Composition
  5. 05 Tailwind, Radix & shadcn/ui · Part 5 — Reusable Components: cn, clsx, tailwind-merge & cva
  6. 06 Tailwind, Radix & shadcn/ui · Part 6 — Plugins & the Ecosystem
  7. 07 Tailwind, Radix & shadcn/ui · Part 7 — Radix UI Primitives: Headless & Accessible
  8. 08 Tailwind, Radix & shadcn/ui · Part 8 — Radix Deep: Composition, asChild & State
  9. 09 Tailwind, Radix & shadcn/ui · Part 9 — shadcn/ui: Philosophy & Setup
  10. 10 Tailwind, Radix & shadcn/ui · Part 10 — Theming & Customizing shadcn
  11. 11 Tailwind, Radix & shadcn/ui · Part 11 — Forms with react-hook-form + zod
  12. 12 Tailwind, Radix & shadcn/ui · Part 12 — Pro Patterns & Dashboard Capstone
  13. 13 Tailwind CSS Variants — Hiểu một lần, dùng mãi
Đầu tư Cổ phiếu — từ Zero đến Tự tin A complete, bilingual, education-only path into stock investing — from "what even is a share?" to a written process you can actually follow. Start with the owner mindset and why markets exist, how exchanges, brokers and orders really work, then read the three financial statements and spot accounting games. Go deep on valuation (P/E, P/B, EV/EBITDA, ROE/ROIC) and the price lens (chart patterns, candlesticks, moving averages, RSI, MACD, volume). Then the parts that separate gamblers from investors: building a diversified portfolio, position sizing and risk management, the behavioral biases that wreck returns, long-term compounding with dividends and index funds/ETFs, reading macro and sector cycles, and a capstone that fuses fundamentals, technicals, risk and psychology into one repeatable checklist. Not financial advice. 10 parts
  1. 01 Đầu tư Cổ phiếu · Phần 1 — Tư duy nền tảng & vì sao đầu tư
  2. 02 Đầu tư Cổ phiếu · Phần 2 — Thị trường vận hành thế nào: sàn, lệnh & sổ lệnh
  3. 03 Đầu tư Cổ phiếu · Phần 3 — Đọc báo cáo tài chính & chất lượng lợi nhuận
  4. 06 Đầu tư Cổ phiếu · Phần 6 — Chỉ báo & động lượng: MA, RSI, MACD, khối lượng
  5. 07 Đầu tư Cổ phiếu · Phần 7 — Xây dựng danh mục: đa dạng hóa & phân bổ
  6. 08 Đầu tư Cổ phiếu · Phần 8 — Quản trị rủi ro & phân bổ tỷ trọng
  7. 09 Đầu tư Cổ phiếu · Phần 9 — Tài chính hành vi: thiên kiến & kỷ luật
  8. 10 Đầu tư Cổ phiếu · Phần 10 — Lãi kép dài hạn: cổ tức, DCA & quỹ chỉ số/ETF
  9. 11 Đầu tư Cổ phiếu · Phần 11 — Vĩ mô & ngành: lãi suất, chu kỳ, luân chuyển
  10. 12 Đầu tư Cổ phiếu · Phần 12 — Capstone: quy trình đầu tư của bạn
Node.js Super Senior — 10 Phases + Deep Dives A production-ready, enterprise-grade path from "gà mờ" to Super Senior Node.js backend developer: ten core phases — core fundamentals, HTTP, Express, databases, auth & security, advanced patterns, DevOps, performance, testing, and enterprise architecture — then bonus deep dives into PostgreSQL, Prisma, and NestJS. Hands-on in TypeScript, with projects. 20 parts
  1. 01 Node.js Super Senior · Phase 1 — Core Fundamentals
  2. 02 Node.js Super Senior · Phase 2 — HTTP & Web Fundamentals
  3. 03 Node.js Super Senior · Phase 3 — Express.js Mastery
  4. 04 Node.js Super Senior · Phase 4 — Database Integration
  5. 05 Node.js Super Senior · Phase 5 — Authentication & Security
  6. 06 Node.js Super Senior · Phase 6 — Advanced Patterns & Packages
  7. 07 Node.js Super Senior · Phase 7 — DevOps & Deployment
  8. 08 Node.js Super Senior · Phase 8 — Performance & Optimization
  9. 09 Node.js Super Senior · Phase 9 — Comprehensive Testing
  10. 10 Node.js Super Senior · Phase 10 — Enterprise Architecture
  11. 11 Node.js Super Senior · Phase 11 — PostgreSQL Deep Dive
  12. 12 Node.js Super Senior · Phase 12 — Prisma ORM Deep Dive
  13. 13 Node.js Super Senior · Phase 13 — Redis in Depth
  14. 14 Node.js Super Senior · Phase 14 — NestJS Deep Dive
  15. 15 Node.js Super Senior · Phase 15 — Auth & Security Capstone: JWT, OAuth2 & RBAC
  16. 16 Node.js Super Senior · Phase 16 — Message Queues & Background Jobs
  17. 17 Node.js Super Senior · Phase 17 — GraphQL APIs
  18. 18 Node.js Super Senior · Phase 18 — Microservices & gRPC
  19. 19 Node.js Super Senior · Phase 19 — Realtime với WebSockets
  20. 20 Node.js Super Senior · Phase 20 — Observability với OpenTelemetry
Vue.js 3 — từ Zero đến Production Series tiếng Việt đưa bạn từ "Vue là gì" đến làm chủ Vue 3 hiện đại theo phong cách production: Composition API, TypeScript và Vite. Bắt đầu với mental model — reactivity là gì, Single-File Component, và vì sao Vue khác React — rồi cú pháp template và directive (v-bind, v-if, v-for, v-on, v-model), đào sâu hệ reactivity (ref, reactive, computed, watch/watchEffect và các bẫy thường gặp). Tiếp đó là component thực thụ (props, emits, slots, provide/inject), Composition API và composable để tái dùng logic, form và v-model tùy biến, định tuyến với Vue Router, quản lý state với Pinia, xử lý bất đồng bộ/Suspense/data fetching, dùng TypeScript đúng cách với Vue, tối ưu hiệu năng, và kết bằng phần testing (Vitest + Vue Test Utils) cùng một capstone. Mỗi phần có code chạy được và bài tập thực hành. 12 parts
  1. 01 Vue.js 3 · Phần 1 — Mental Model & App đầu tiên
  2. 02 Vue.js 3 · Phần 2 — Cú pháp Template & Directive
  3. 03 Vue.js 3 · Phần 3 — Reactivity Deep Dive
  4. 04 Vue.js 3 · Phần 4 — Component: Props, Emits, Slots & Provide/Inject
  5. 05 Vue.js 3 · Phần 5 — Composition API & Composable
  6. 06 Vue.js 3 · Phần 6 — Form & v-model (kể cả component tùy biến)
  7. 07 Vue.js 3 · Phần 7 — Vue Router
  8. 08 Vue.js 3 · Phần 8 — Pinia: Quản lý State
  9. 09 Vue.js 3 · Phần 9 — Async, Suspense & Data Fetching
  10. 10 Vue.js 3 · Phần 10 — TypeScript với Vue
  11. 11 Vue.js 3 · Phần 11 — Tối ưu Hiệu năng
  12. 12 Vue.js 3 · Phần 12 — Testing & Capstone
Next.js 16 from Zero to Senior Go from zero to senior on the latest Next.js (16): the App Router mental model, Server Components and data fetching, the new Cache Components & "use cache" model, Server Actions, route handlers and proxy, rendering, SEO, auth, then shipping and debugging production — hands-on, with exercises. 10 parts
  1. 01 Next.js 16 from Zero to Senior · Part 1 — Foundations & the App Router
  2. 02 Next.js 16 from Zero to Senior · Part 2 — Routing Deep Dive
  3. 03 Next.js 16 from Zero to Senior · Part 3 — Server Components & Data Fetching
  4. 04 Next.js 16 from Zero to Senior · Part 4 — Cache Components & the New Caching Model
  5. 05 Next.js 16 from Zero to Senior · Part 5 — Client Components & URL State
  6. 06 Next.js 16 from Zero to Senior · Part 6 — Server Actions & Forms
  7. 07 Next.js 16 from Zero to Senior · Part 7 — Route Handlers, APIs & Proxy
  8. 08 Next.js 16 from Zero to Senior · Part 8 — Rendering, Metadata, SEO & Assets
  9. 09 Next.js 16 from Zero to Senior · Part 9 — Auth, Sessions & Security
  10. 10 Next.js 16 from Zero to Senior · Part 10 — Production, Testing & Debugging
Three.js from Zero to Senior Go from "gà mờ" to senior on Three.js: the WebGL mental model and your first scene, geometries and materials, the scene graph and cameras, lights and shadows, PBR textures and environment maps, loading glTF models and the animation system, post-processing with the EffectComposer, performance and instancing, raycasting and interaction, and a production capstone covering loading, responsiveness, framework integration, and deployment. Every part ships a live, interactive 3D demo. 18 parts
  1. 01 Three.js from Zero to Senior · Part 1 — Foundations & Your First Scene
  2. 02 Three.js from Zero to Senior · Part 2 — Geometries, Materials & Meshes
  3. 03 Three.js from Zero to Senior · Part 3 — Transforms, Scene Graph & Cameras
  4. 04 Three.js from Zero to Senior · Part 4 — Lights & Shadows
  5. 05 Three.js from Zero to Senior · Part 5 — Textures & PBR Materials
  6. 06 Three.js from Zero to Senior · Part 6 — Loading Models & the Animation System
  7. 07 Three.js from Zero to Senior · Part 7 — Post-Processing & the EffectComposer
  8. 08 Three.js from Zero to Senior · Part 8 — Performance & Instancing
  9. 09 Three.js from Zero to Senior · Part 9 — Raycasting & Interaction
  10. 10 Three.js from Zero to Senior · Part 10 — Capstone: Production & Deployment
  11. 11 Three.js from Zero to Senior · Bonus Part 11 — Custom GLSL Shaders
  12. 12 Three.js from Zero to Senior · Bonus Part 12 — Physics with cannon-es
  13. 13 Three.js from Zero to Senior · Bonus Part 13 — Three.js in the Real World: an Interior Decorator
  14. 14 Three.js from Zero to Senior · Bonus Part 14 — Blender → glTF → Three.js: the Import Workflow
  15. 15 Three.js from Zero to Senior · Bonus Part 15 — The 3D Toolbox: Tools to Create Assets for Three.js
  16. 16 Three.js from Zero to Senior · Bonus Part 16 — Shrinking glTF: Draco, Meshopt & KTX2 with gltf-transform
  17. 17 Three.js from Zero to Senior · Bonus Part 17 — Rigging & Animation: AnimationMixer, Cross-Fades and Mixamo
  18. 18 Three.js from Zero to Senior · Bonus Part 18 — Interaction: Raycasting, Click-to-Move & a Character State Machine
SVG from Zero to Senior Master SVG end to end: the coordinate system and viewBox, the path language, painting with strokes/gradients/patterns, text, transforms and nested coordinate systems, animation (CSS + SMIL, line-drawing), filters, clipping and masking, interactive data-driven graphics with JavaScript, and finally production — optimization, sprites, accessibility and performance. Every part ships a live, interactive demo. 25 parts
  1. 01 SVG from Zero to Senior · Part 1 — Foundations & the viewBox
  2. 02 SVG from Zero to Senior · Part 2 — The <path> Element
  3. 03 SVG from Zero to Senior · Part 3 — Painting: Fill, Stroke, Gradients & Patterns
  4. 04 SVG from Zero to Senior · Part 4 — Text & textPath
  5. 05 SVG from Zero to Senior · Part 5 — Transforms, Groups & Nested Coordinate Systems
  6. 06 SVG from Zero to Senior · Part 6 — Animation: Line-Drawing, CSS & SMIL
  7. 07 SVG from Zero to Senior · Part 7 — Filters: Blur, Shadow, Glow & Color
  8. 08 SVG from Zero to Senior · Part 8 — Clipping & Masking
  9. 09 SVG from Zero to Senior · Part 9 — Interactive & Data-Driven SVG with JavaScript
  10. 10 SVG from Zero to Senior · Part 10 — Production: Optimization, Sprites & Accessibility
  11. 11 SVG from Zero to Senior · Part 11 — Path Morphing & Shape Interpolation
  12. 12 SVG from Zero to Senior · Part 12 — Progress Rings & Gauges
  13. 13 SVG from Zero to Senior · Part 13 — Generative Patterns & Backgrounds
  14. 14 SVG from Zero to Senior · Part 14 — SVG in React & JSX
  15. 15 SVG from Zero to Senior · Part 15 — Interactive Maps with Pan & Zoom
  16. 16 SVG from Zero to Senior · Part 16 — Accessibility Deep-Dive
  17. 17 SVG from Zero to Senior · Part 17 — The Icon Sprite Build Pipeline
  18. 18 SVG from Zero to Senior · Part 18 — Animation Libraries for SVG
  19. 19 SVG from Zero to Senior · Part 19 — Performance & Rendering Internals
  20. 20 SVG from Zero to Senior · Part 20 — Build a Chart From Scratch
  21. 21 SVG from Zero to Senior · Part 21 — Choreographing a Scene with SMIL
  22. 22 SVG from Zero to Senior · Part 22 — Motion Paths & Following a Curve
  23. 23 SVG from Zero to Senior · Part 23 — Character Rigging & Jointed Animation
  24. 24 SVG from Zero to Senior · Part 24 — Scroll-Driven SVG Storytelling
  25. 25 SVG from Zero to Senior · Part 25 — Ambient Looping & Particle Scenes
Modern CSS Deep Dives The complete modern CSS path in one series: layout mental models (Flexbox, Grid, subgrid, container queries, fluid design), the cascade, custom properties and color, then animation (transitions, keyframes, easing, performance, accessible and scroll-driven motion), and finally pure-CSS 3D — perspective, preserve-3d objects, tilt and parallax, carousels, lighting and performance. 26 parts
  1. 01 Flexbox vs Grid — The Layout Mental Model Senior Frontend Engineers Actually Need
  2. 02 CSS Grid — The Complete Guide to Every Property (with an Interactive Demo)
  3. 03 Advanced CSS Grid — Subgrid, Masonry, auto-fit vs auto-fill, and Layout Patterns
  4. 04 CSS Container Queries — Component-Local Responsive Design Beyond Viewport Media Queries
  5. 05 CSS Fluid Responsive Design — clamp(), Viewport Units, Intrinsic Sizing, and the Breakpoint Exit
  6. 06 CSS Cascade, Layers & Specificity — The Full Resolution Order in 2026
  7. 07 CSS Custom Properties & @property — Runtime Theming, Cascade, and Typed Animation
  8. 08 Modern CSS Color: OKLCH, color-mix(), and Perceptually Uniform Design Tokens
  9. 09 CSS Stacking Contexts and Anchor Positioning: Why z-index 9999 Still Loses
  10. 10 CSS @keyframes & the animation Shorthand — A Senior Reference
  11. 11 CSS Transitions Deep Dive — Interpolation, allow-discrete, and the Gotchas
  12. 12 CSS Easing Functions — cubic-bezier(), steps(), and linear()
  13. 13 CSS Animations & Easing — Transitions, Keyframes, Timing Functions, and Motion That Feels Right
  14. 14 CSS Transforms for Animation — 2D, 3D, and the Compositor Win
  15. 15 CSS Animation Performance — The Compositor, will-change, and 60fps
  16. 16 Animating display and height:auto in CSS — allow-discrete & interpolate-size
  17. 17 Animating CSS Custom Properties with @property — Typed Houdini Variables
  18. 18 Staggered & Sequenced CSS Animations — Delays, --index, and Choreography
  19. 19 CSS Entry & Exit Animations with @starting-style
  20. 20 CSS Scroll-Driven Animations — Compositor-Native Scroll UX Without JavaScript (2026)
  21. 21 Accessible CSS Animation — Designing with prefers-reduced-motion
  22. 22 CSS 3D from Scratch · Part 1 — Perspective & the Z-axis
  23. 23 CSS 3D from Scratch · Part 2 — preserve-3d & Building Real Objects
  24. 24 CSS 3D from Scratch · Part 3 — Interactive Tilt & Parallax
  25. 25 CSS 3D from Scratch · Part 4 — 3D Motion & Carousels
  26. 26 CSS 3D from Scratch · Part 5 — Lighting, Performance & Accessibility
Web Development in Practice Practical web development for senior frontend engineers — the CSS, JavaScript, and browser-platform fundamentals behind production UI. From CSS performance and modern features, through core JavaScript (event loop, async, closures, fetch, events, memory, Intl) and the browser APIs that power real apps, to landing-page motion across CSS, vanilla JS, and React + Framer Motion. 20 parts
  1. 01 Tối ưu performance CSS — deep dive từ render pipeline tới production
  2. 02 CSS Optimization by Level — From Junior to Principal
  3. 03 Modern CSS Features You Should Be Using in 2026
  4. 04 JavaScript Event Loop Deep Dive — Microtasks, Macrotasks, and Real Browser Timing
  5. 05 JavaScript Async Patterns — Promises, Combinators, AbortController & Concurrency
  6. 06 Debounce, Throttle & rAF — rate-limiting high-frequency browser events
  7. 07 JavaScript Closures, Scope & this — Lexical Environments, Loop Bugs, and Binding Rules
  8. 08 Robust Data Fetching — fetch(), AbortController, Retry, and the Stale-Response Race
  9. 09 Forms & the Constraint Validation API — Native Validation Done Right
  10. 10 Event Delegation & DOM Performance — Propagation, Batching, and Layout Thrashing
  11. 11 Immutable State in JavaScript — References, Cloning, structuredClone, and Change Detection
  12. 12 JavaScript Error Handling & Resilience — try/catch Limits, Global Handlers, and Production Patterns
  13. 13 JavaScript Memory Management & Leak Hunting — V8 GC, DevTools, and Production Signals
  14. 14 JavaScript Intl API — Dates, Numbers, Currency & Locale-Aware Formatting Without Hand-Rolling
  15. 15 Observer APIs deep dive — MutationObserver, ResizeObserver và họ hàng trong browser
  16. 16 JavaScript Generators & yield — A Practical Guide with 10 Use Cases
  17. 17 Unicode, String, Buffer, Blob — Hiểu sâu binary và text trong JavaScript frontend
  18. 18 What's New in ES2025 & ES2026 — The Complete Guide with Examples
  19. 19 Landing Page Animations — CSS, Vanilla JS, and React + Framer Motion
  20. 20 The Beacon API — Sending Data That Survives Page Unload
Nginx from Zero to Production Master Nginx hands-on: install locally, understand the config model, build a reverse proxy and load balancer, add TLS, caching and rate limiting, then ship and debug a production setup. 5 parts
  1. 01 Nginx from Zero to Production · Part 1 — Fundamentals & Local Install
  2. 02 Nginx from Zero to Production · Part 2 — The Configuration Model
  3. 03 Nginx from Zero to Production · Part 3 — Reverse Proxy & Load Balancing
  4. 04 Nginx from Zero to Production · Part 4 — TLS, Security & Performance
  5. 05 Nginx from Zero to Production · Part 5 — Production Config & Debugging
TypeScript Type Challenges — Zero to Type Wizard Master type-level programming by solving the famous type-challenges, one concept at a time. Start with the five building blocks and a guided tour, then go deep on mapped types, conditional types and distribution, infer, recursion over tuples, union manipulation, template-literal string math, type-level arithmetic, the hard utility types, parsers and state machines, and a few extreme challenges — finishing with a capstone that turns it all into a reusable typed library. Every challenge shows the goal first, hides the answer behind a toggle, then explains the solution step by step. Solutions follow the canonical community approaches from the MIT-licensed type-challenges project. 11 parts
  1. 02 TS Type Challenges · Part 2 — Mapped Types
  2. 03 TS Type Challenges · Part 3 — Conditional Types & Distribution
  3. 04 TS Type Challenges · Part 4 — infer Mastery
  4. 05 TS Type Challenges · Part 5 — Recursion over Tuples
  5. 06 TS Type Challenges · Part 6 — Union Manipulation
  6. 07 TS Type Challenges · Part 7 — Template Literal Types
  7. 08 TS Type Challenges · Part 8 — Type-level Arithmetic
  8. 09 TS Type Challenges · Part 9 — Hard Utility Types
  9. 10 TS Type Challenges · Part 10 — Parsers & State Machines
  10. 11 TS Type Challenges · Part 11 — Extreme Challenges
  11. 12 TS Type Challenges · Part 12 — Capstone: A Typed Path Utility
Docker, Compose & Kubernetes Containers from fundamentals to Compose and Kubernetes, ending with debugging real-world issues. 10 parts
  1. 01 Docker for Developers · Part 1 — Containers, Images & the Mental Model
  2. 02 Docker for Developers · Part 2 — Images & the Dockerfile
  3. 03 Docker for Developers · Part 3 — Persisting Data: Volumes, Bind Mounts & Env
  4. 04 Docker for Developers · Part 4 — Networking: Bridge, Ports & Service Discovery
  5. 05 Docker for Developers · Part 5 — Docker Compose Fundamentals
  6. 06 Docker for Developers · Part 6 — Compose in Depth: Env, Profiles, Healthchecks & Scaling
  7. 07 Docker for Developers · Part 7 — Optimizing & Securing Images
  8. 08 Docker for Developers · Part 8 — Debugging & Troubleshooting Docker
  9. 09 Docker for Developers · Part 9 — Kubernetes Fundamentals
  10. 10 Docker for Developers · Part 10 — Kubernetes in Practice & Debugging
Design Patterns in TypeScript The classic design patterns every senior web engineer should have at hand, explained with runnable TypeScript. 10 parts
  1. 01 Design Patterns in TypeScript · Part 1 — Singleton & the Module Pattern
  2. 02 Design Patterns in TypeScript · Part 2 — Factory & Abstract Factory
  3. 03 Design Patterns in TypeScript · Part 3 — Builder & Fluent APIs
  4. 04 Design Patterns in TypeScript · Part 4 — Strategy
  5. 05 Design Patterns in TypeScript · Part 5 — Observer & Pub/Sub
  6. 06 Design Patterns in TypeScript · Part 6 — Decorator & Middleware
  7. 07 Design Patterns in TypeScript · Part 7 — Adapter & Facade
  8. 08 Design Patterns in TypeScript · Part 8 — Command & Memento
  9. 09 Design Patterns in TypeScript · Part 9 — State & State Machines
  10. 10 Design Patterns in TypeScript · Part 10 — Proxy & Dependency Injection
Bash & Shell Scripting From your first script to production-grade automation — quoting, loops, functions, text processing, and robust error handling. 10 parts
  1. 01 Bash & Shell Scripting · Part 1 — The Shell, the Shebang & Your First Script
  2. 02 Bash & Shell Scripting · Part 2 — Variables, Quoting & Expansion
  3. 03 Bash & Shell Scripting · Part 3 — Conditionals: if, test, [[ ]] & Exit Codes
  4. 04 Bash & Shell Scripting · Part 4 — Loops: for, while, until & Reading Input
  5. 05 Bash & Shell Scripting · Part 5 — Functions, Arguments & Sourcing
  6. 06 Bash & Shell Scripting · Part 6 — Arrays & String Manipulation
  7. 07 Bash & Shell Scripting · Part 7 — I/O, Redirection & Pipes
  8. 08 Bash & Shell Scripting · Part 8 — Text Processing: grep, sed & awk
  9. 09 Bash & Shell Scripting · Part 9 — Robust Scripting & Error Handling
  10. 10 Bash & Shell Scripting · Part 10 — Real-World Automation & Best Practices
Effort, Focus & Grit A practical mindset series on effort, focus, consistency, discipline, resilience, and positivity — small daily practices that compound over time. 10 parts
  1. 01 Effort, Focus & Grit · Part 1 — Effort Beats Talent (Given Time)
  2. 02 Effort, Focus & Grit · Part 2 — Focus: Doing One Thing Deeply
  3. 03 Effort, Focus & Grit · Part 3 — Consistency: Small Habits That Compound
  4. 04 Effort, Focus & Grit · Part 4 — Discipline Over Motivation
  5. 05 Effort, Focus & Grit · Part 5 — Failure & Setbacks: Falling Forward
  6. 06 Effort, Focus & Grit · Part 6 — Positive Thinking & Reframing
  7. 07 Effort, Focus & Grit · Part 7 — Patience & the Long Game
  8. 08 Effort, Focus & Grit · Part 8 — Energy, Rest & Avoiding Burnout
  9. 09 Effort, Focus & Grit · Part 9 — Goals, Systems & Tracking Progress
  10. 10 Effort, Focus & Grit · Part 10 — A Resilient Daily Practice
Network Programming Build network apps from the socket up with Node.js + TypeScript — TCP/UDP, DNS, HTTP, WebSockets, TLS, framing, scaling, and debugging. 10 parts
  1. 01 Network Programming · Part 1 — Fundamentals: How Data Actually Travels
  2. 02 Network Programming · Part 2 — TCP Sockets: A Reliable Byte Stream
  3. 03 Network Programming · Part 3 — UDP & Datagrams: Fast and Connectionless
  4. 04 Network Programming · Part 4 — DNS & Addressing: From Names to IPs
  5. 05 Network Programming · Part 5 — HTTP From the Socket Up
  6. 06 Network Programming · Part 6 — WebSockets & Real-Time Communication
  7. 07 Network Programming · Part 7 — TLS & HTTPS: Encrypting the Wire
  8. 08 Network Programming · Part 8 — Streams, Backpressure & Message Framing
  9. 09 Network Programming · Part 9 — Concurrency & Scaling Network Servers
  10. 10 Network Programming · Part 10 — Robust Networking: Errors, Retries & Debugging

2026

2025

2024