jvinhit//lab

Search posts

Type to search across journal entries.

navigate open esc close

FileSystem/Series

// Series

32 series — each meant to be read in order, part by part.

Lộ trình tiếng Việt 20 phần biến một project TaskFlow từ HTTP API đầu tiên thành back-end production bằng NestJS 11 và TypeScript strict. Chặng nền tảng giải thích controller, provider, dependency injection, module graph, request lifecycle, config và logging bằng mental model có thể debug. Chặng REST và data thiết kế contract, validation, OpenAPI, PostgreSQL, Prisma, transaction, concurrency, idempotency cùng kiến trúc ports-and-adapters. Chặng chất lượng hoàn thiện authentication, refresh-token rotation, authorization theo policy và tenant, security baseline, testing nhiều tầng, profiling, Fastify, cache và rate limit. Chặng cuối thêm BullMQ, outbox, WebSocket/SSE, GraphQL, microservices/gRPC, OpenTelemetry, health check, graceful shutdown, Docker và CI/CD. Mỗi bài có lab tiếp nối, lệnh chạy, test, failure mode, bài tập và acceptance criteria; capstone cuối series tạo trải nghiệm triển khai một hệ thống NestJS hoàn chỉnh thay vì chỉ học decorator rời rạc.

Read series >

Lộ trình tiếng Việt 15 phần đi từ mental model của browser platform tới một component library có thể dùng trong HTML thuần, React và Vue. Chặng đầu làm rõ Custom Elements, lifecycle, upgrade, public API, render và state bằng JavaScript không framework. Chặng tiếp theo đào sâu Shadow DOM, composed tree, slots, CSS encapsulation, theming, events, focus, accessibility và form-associated custom elements với ElementInternals. Sau checkpoint vanilla, series chuyển sang testing trên browser thật và Lit: reactive properties, template bindings, directives, update lifecycle, controllers và kiến trúc state. Hai phần cuối xử lý performance, security, Declarative Shadow DOM, SSR, packaging, type, versioning và interoperability. Một Mini Kanban accessible nối các quyết định kỹ thuật xuyên suốt series.

Read series >

Lộ trình tiếng Việt 42 phần gom toàn bộ nội dung TypeScript của blog vào một series duy nhất. Chặng Production Engineering dựng mental model về soundness, strict config, narrowing và inference; đào sâu conditional types, infer, mapped types, tuple, template-literal DSL, recursion và union algebra; rồi đưa chúng qua runtime boundary, async contract, module, declaration, kiến trúc, monorepo, migration và capstone typed SDK. Chặng Type Challenges gồm 12 bài luyện type-level programming từ năm khối nền tảng tới parser, state machine và typed path utility. Chặng cuối áp dụng TypeScript vào 10 design pattern thực chiến như Factory, Builder, Strategy, Observer, Decorator, Adapter, Command, State, Proxy và Dependency Injection.

Read series >

Lộ trình tiếng Việt gồm 26 phần dành cho kỹ sư muốn hiểu Node.js như một nền tảng production, không chỉ như công cụ dựng API. Series đi từ V8, libuv, event loop, HTTP và Express 5 đến data layer, security, testing, performance, delivery và modular monolith; đào sâu PostgreSQL, Prisma, Redis, NestJS, queue, GraphQL, gRPC, realtime và OpenTelemetry; rồi chuyển sang volume thực chiến về overload control, stream dữ liệu lớn, production diagnostics, multi-tenant SaaS, webhook/payment và một capstone game day. Mỗi phần dùng TypeScript, giải thích mental model trước API, phân tích trade-off và failure mode, kèm tiêu chí vận hành, bài tập cùng tài liệu chính thức để biến kiến thức thành quyết định kỹ thuật.

Read series >

Series tiếng Việt 10 phần giúp bạn nối một domain thật tới đúng hạ tầng mà không làm gián đoạn website hay email. Lộ trình bắt đầu bằng mental model tách registrar, authoritative DNS, hosting, CDN và origin; sau đó làm chủ delegation, record A/AAAA/CNAME/MX/TXT/CAA, TTL và cách kiểm tra bằng dig. Phần thực hành đi qua đổi nameserver từ Hostinger sang Cloudflare đúng thứ tự DNSSEC, giữ Cloudflare DNS nhưng host website ở Hostinger, gắn custom domain cho GitHub Pages và Cloudflare Pages, trỏ domain vào VPS qua Nginx, rồi cấu hình Cloudflare proxy với Full (strict). Cuối series là email DNS với SPF/DKIM/DMARC và runbook migration không downtime, có acceptance test, rollback cùng quy trình debug từ NS/DS tới TLS, HTTP và application.

Read series >

Series tiếng Việt (18 phần) đư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. Nửa đầu xây nền: mental model — vì sao server state khác client state và vì sao không nên tự viết fetch tay — cài đặt QueryClient/Provider/Devtools, đà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, dependent/parallel queries, pagination và useInfiniteQuery, mutations với invalidate, optimistic update (onMutate/rollback) và quản lý cache thủ công, error handling/retry/Suspense/performance, rồi testing với MSW + React Testing Library và một capstone CRUD hoàn chỉnh. Nửa sau lên production: QueryClient & defaults sâu, SSR/Next.js App Router & hydration, prefetching và tích hợp router, dùng QueryClient như một store để thao tác cache chủ động, offline-first & persistence, realtime với WebSocket/SSE, mutation nâng cao, tối ưu hiệu năng render, type-safety đỉnh cao, và kiến trúc production cùng lộ trình migrate v4 → v5. Mỗi bài có code TypeScript/React 19 chạy được và bài tập thực hành.

Read series >

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.

Read series >

Lộ trình 43 bài dành cho developer muốn hiểu AI từ gốc và dùng được trong công việc thật. Bắt đầu từ lịch sử AI, token, sampling, prompting và embeddings; tiếp tục với cách chọn model, RAG, fine-tuning, eval, safety và tối ưu chi phí; sau đó tự thiết kế agent với context, memory, tool use, patterns, orchestration và MCP; cuối cùng áp dụng vào coding hằng ngày — đọc codebase, build feature, debug, review, viết rules/skills, dùng sub-agent và bàn giao context. Nội dung ưu tiên mental model, trade-off, workflow có thể lặp lại và kiểm chứng, không chạy theo hype hay một model cụ thể.

Read series >

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.

Read series >

Series tiếng Việt đi dưới lớp vỏ của browser — runtime mà frontend engineer ship code vào mỗi ngày nhưng hiếm khi hiểu trọn. Chặng nền tảng 1–12 bắt đầu từ kiến trúc đa process (browser, renderer, GPU, network, sandbox và site isolation), lần theo navigation từ URL tới pixel, rồi đào sâu HTML parser/DOM, CSSOM, render tree, layout, paint, compositing, V8, event loop, memory/GC, networking, storage và security model. Chặng chuyên sâu 13–22 nối mental model đó với GPU/Viz và layer promotion, scrolling, frame scheduling, các tier tối ưu/deopt của V8, heap leak và detached DOM, accessibility tree, pipeline decode ảnh/video, worker + SharedArrayBuffer/Atomics, process model + BFCache — kết bằng capstone profiling có hệ thống trong DevTools. Mỗi phần nối internals với code và triệu chứng bạn thật sự gặp.

Read series >

Series tiếng Việt đưa bạn từ "trang chậm mà không biết tại sao" đến làm chủ hiệu năng web một cách có hệ thống. Chặng nền tảng 1–12 đi từ RAIL và Core Web Vitals (LCP, INP, CLS), lab vs field, Lighthouse/Performance/WebPageTest/CrUX/RUM và critical rendering path tới tối ưu LCP, INP, CLS, JavaScript bundle, ảnh/media, font, network/cache — rồi gom lại bằng capstone audit, performance budget và Lighthouse CI. Chặng chuyên sâu 13–22 tiếp tục với RUM attribution và sampling, resource hints/Fetch Priority/Early Hints/Speculation Rules, kiến trúc CSR–SSR–SSG–streaming, LoAF và main-thread scheduling, CSS rendering/containment, memory của phiên dài, HTTP/2–3 + compression/cache policy, third-party governance, guardrail ở quy mô tổ chức — kết bằng capstone điều tra triệu chứng tới nguyên nhân gốc. Mỗi phần có code, giới hạn hỗ trợ và cách đo lại.

Read series >

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.

Read series >

Lộ trình tiếng Việt, chỉ mang tính giáo dục, đưa bạn từ "cổ phiếu là gì" đến một quy trình có thể viết ra, kiểm chứng và lặp lại. Series bắt đầu với tư duy chủ sở hữu, cơ chế thị trường, báo cáo tài chính, định giá, kỹ thuật, danh mục, rủi ro, tâm lý, lãi kép và vĩ mô; sau đó đào sâu DCF, lợi thế cạnh tranh, phong cách đầu tư, thuế, phái sinh, thị trường quốc tế, bong bóng và gian lận. Volume phòng lab tiếp theo chuyển kiến thức thành năng lực thực hành: đọc trọn bộ BCTC, viết trading playbook, kiểm định lợi thế, thực thi lệnh, quản trị rủi ro và review hiệu suất. Không phải lời khuyên đầu tư và không bảo đảm lợi nhuận.

Read series >

Series tiếng Việt 28 phần dạy React như một runtime giữ UI đồng bộ với state, không phải danh sách API. Lộ trình bắt đầu từ UI-as-value, JSX, render/commit, identity, state queue, Effects và một mini renderer; sau đó suy ra cơ chế Hooks, closure, memoization, refs, reducer, custom hook và external store. Các chặng tiếp theo xử lý state ownership, Context, form, Suspense, error recovery, Actions, optimistic UI, React Compiler, concurrent scheduling, profiling, virtualization và feature architecture. Capstone cuối migrate một codebase React 18-era lên React 19.2 cùng Compiler 1.0 bằng test, trace và rollback gate có thể kiểm chứng.

Read series >

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.

Read series >

Series tiếng Việt 16 phần đi từ mental model container–codec–stream–packet–frame tới pipeline demux, decode, render, encode và mux. Bốn chặng lần lượt đào sâu timestamp, GOP, color/audio metadata; biến ffprobe và FFmpeg thành workflow inspect–render–cut–concat có kiểm chứng; giải thích progressive MP4, HTTP Range, HLS/ABR, MPEG-TS, MSE và WebCodecs; rồi kết bằng Chrome DevTools, playbook xử lý stall/decode/CORS, ad marker cùng playlist rewrite trên stream được phép kiểm soát, và một capstone Stream Lab end-to-end. Các lab thực hành dùng fixture tự tạo, phân biệt rõ stream copy với re-encode và ưu tiên bằng chứng thay vì đoán.

Read series >

Lộ trình tiếng Việt 25 phần đưa bạn từ scene đầu tiên tới năng lực thiết kế và vận hành một nền tảng 3D production. Ba chặng đầu xây mental model WebGL/Three.js, scene graph, camera, ánh sáng, PBR, glTF, animation, post-processing, interaction, physics và pipeline Blender–glTF–compression qua các demo thực hành. Chặng chuyên sâu đi xuống coordinate space, precision, depth, transparency và render target; sau đó đi lên cấp hệ thống với frame phases, fixed timestep, resource ownership, CPU/GPU profiling, adaptive quality, asset contract + CI, testing, observability, accessibility, context-loss recovery và chiến lược migrate WebGPU/TSL. Nội dung ưu tiên budget đo được, failure mode, decision rule và trade-off kiến trúc thay vì khẩu quyết tối ưu.

Read series >

Series tiếng Việt 10 phần giúp biến ý chí thành một cách luyện tập bền vững: hiểu vai trò và giới hạn của nỗ lực, bảo vệ sự tập trung, xây tính đều đặn và kỷ luật linh hoạt, học cách hồi phục và đổi khung sau trở ngại, biết khi nào nên kiên nhẫn hoặc điều chỉnh, quản lý năng lượng, rồi nối mục tiêu với vòng phản hồi và một thực hành hằng ngày đủ nhỏ để duy trì. Trọng tâm không phải “cố hơn bằng mọi giá”, mà là luyện có chủ đích, nhận phản hồi, nghỉ đúng lúc và sửa hệ thống theo thực tế.

Read series >

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.

Read series >

Lộ trình tiếng Việt theo hai chặng: 10 phần nền tảng giúp bạn làm chủ container, image, Dockerfile, storage, networking, Compose, hardening và debug; nhánh chuyên sâu đi xuống OCI runtime, namespace/cgroup, BuildKit và supply chain, Compose cho team/CI, rồi vào Kubernetes networking, scheduling, autoscaling, stateful storage, security, observability và incident response. Mỗi phần ưu tiên mental model, trade-off, failure mode, lab có thể tự phá–sửa và tài liệu chính thức để biến kiến thức thành năng lực vận hành production.

Read series >

Series tiếng Việt dạng handbook/cookbook cho developer làm việc trong terminal mỗi ngày: điều hướng file, đọc log, tìm code với rg/find, pipe và redirection, Git workflow, curl+jq để debug API, process/port/network debugging, Node package manager, Docker/SSH, và cách gom tất cả thành bash script tự động hóa an toàn.

Read series >

Series tiếng Việt giúp bạn chuyển từ VSCode sang Neovim một cách thực dụng, theo chuẩn 2025-2026: modal editing, Lua config, lazy.nvim, native LSP mới với vim.lsp.config/vim.lsp.enable, completion, formatter/linter, Treesitter, fuzzy finder, Git, terminal, debug/test, dotfiles và một capstone cấu hình hoàn chỉnh. Mỗi phần có cheatsheet, bài tập và checklist để luyện thành phản xạ thật.

Read series >

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.

Read series >

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.

Read series >

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.

Read series >

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.

Read series >

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.

Read series >

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.

Read series >

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.

Read series >

From your first script to production-grade automation — quoting, loops, functions, text processing, and robust error handling.

Read series >

Build network apps from the socket up with Node.js + TypeScript — TCP/UDP, DNS, HTTP, WebSockets, TLS, framing, scaling, and debugging.

Read series >