Toàn bộ bài viết, ghi chép và hướng dẫn — tìm kiếm, lọc theo chủ đề và cấp độ, hoặc duyệt theo năm.
Hoặc đọc theo chuỗiThế nào là secret, file .env và token CI dài hạn thực sự bị lộ ra sao, làm gì trong giờ đầu tiên sau khi lộ, so sánh các kho secret, GitHub Actions OIDC sang AWS và GCP thay cho key tĩnh, xoay vòng secret không downtime, và validate env có kiểu trong monorepo Turborepo.
Link preview, webhook, import ảnh từ URL và upload file trông như tính năng nhàm chán, nhưng cứ xuất hiện trong báo cáo sự cố. Vì sao blocklist SSRF thất bại, fetch an toàn trong Node với undici và pin IP, IMDSv2, và pipeline upload: presigned S3, magic bytes, sharp, domain riêng, quét bất đồng bộ.
Cách đọc bundle analyzer năm 2026 (next analyze, rollup-plugin-visualizer, source-map-explorer), tree shaking thật sự hoạt động thế nào với ESM, sideEffects, barrel file và CommonJS, những cái bẫy quen thuộc như moment và lodash, dependency trùng lặp, polyfill, và đặt ngân sách bundle trong CI với size-limit.
Mô hình cross-origin của trình duyệt từ gốc: Same-Origin Policy chặn gì, CORS nới lỏng gì và không bao giờ bảo vệ gì, preflight và credentials, bug cache vì thiếu Vary: Origin, allowlist nguy hiểm, rồi CORP, COEP, COOP, Fetch Metadata và SameSite — kèm cấu hình NestJS và Next.js làm cho đúng.
Mô hình mối đe doạ thực tế cho ứng dụng đặt LLM giữa tool và dữ liệu riêng tư: prompt injection trực tiếp và gián tiếp, lethal trifecta, và các design pattern giữ thiệt hại trong tầm kiểm soát, đối chiếu với OWASP Top 10 for LLM Applications.
Đi qua cả mười rủi ro của OWASP API Security Top 10 (2023) bằng NestJS: kiểm tra quyền sở hữu trong scoped repository, DTO whitelist, định hình response, policy kiểu CASL, rate limit theo chi phí, business flow idempotent, fetch chống SSRF và ma trận phân quyền trong e2e test.
JWS khác JWE thế nào, những claim bắt buộc phải kiểm tra, alg: none, nhầm lẫn RS256/HS256, kid injection, lạm dụng jku — và cách pin thuật toán với jose, xoay khoá JWKS không làm ai bị logout, thu hồi token và test verifier bằng chính những token độc.
Đi từng request HTTP của luồng authorization code + PKCE, phân biệt state, nonce, ID token và access token, vì sao implicit flow đã chết, và cách dựng Backend-for-Frontend trong Next.js để token không bao giờ xuống trình duyệt — kèm refresh rotation, logout và các lỗ hổng mình gặp thật.
Cách mình chạy threat modeling thực tế cho một team sản phẩm: bốn câu hỏi, vẽ DFD với trust boundary, đi STRIDE từng phần tử trên một hệ thống thật có SPA, API, Postgres, S3, webhook thanh toán và admin panel, chấm rủi ro đơn giản, biến threat thành ticket và giữ threat model sống trong repo.
MCP không phải phép màu, chỉ là một giao thức JSON-RPC được thiết kế tốt. Bài này giải thích host, client, server, các primitive và transport theo spec 2026-07-28, rồi dựng một server TypeScript chỉ đọc cho dữ liệu đơn hàng: thiết kế tool, phân trang, test bằng Inspector, OAuth cho remote server và những lỗ hổng bảo mật cần chặn.
Từ định nghĩa metric chính xác đến từng tử số, mẫu số và cửa sổ thời gian, qua tracking plan và danh tính người dùng, tới SQL PostgreSQL thật cho funnel, cohort retention, DAU/WAU/MAU, window function, múi giờ Asia/Ho_Chi_Minh và A/B test có kiểm tra SRM.
Một PRD tốt không dài, nó rõ. Bài này đi qua cấu trúc PRD, cách viết requirement kiểm thử được, NFR đo được theo ISO 25010 (hiệu năng p95, SLO, bảo mật, Nghị định 13 và luật dữ liệu cá nhân, WCAG 2.2 AA), truy vết từ mục tiêu đến test, kèm một PRD mẫu hoàn chỉnh.
Event Storming là cầu nối giữa phân tích nghiệp vụ và thiết kế phần mềm. Bài này đi qua ba cấp độ workshop, ngữ pháp sticky note, cách điều phối, một ví dụ đặt lịch khám thật, cách tìm bounded context, context mapping và biến kết quả thành aggregate, command, event trong NestJS.
BPMN không phải để vẽ cho đẹp hồ sơ dự án mà để tìm ra chỗ quy trình đang lãng phí: handoff, vòng làm lại, thời gian chờ. Bài này đi qua tập con ký hiệu đủ dùng, các lỗi mô hình hoá hay gặp, một ví dụ as-is/to-be về phê duyệt mua hàng có số đo, và cách đi từ mô hình tới state machine, workflow engine và user story.
Khi nào nên chạy model ngay trên máy người dùng và khi nào không, built-in AI của Chrome đã ship tới đâu, Transformers.js, ONNX Runtime Web và WebLLM trên WebGPU/WASM, chạy inference trong Web Worker, cache trọng số model và UX cho lần tải đầu tiên.
Một user story tốt không nằm ở câu chữ “As a… I want… so that…” mà ở cuộc trò chuyện và các ví dụ đi kèm. Bài này đi qua 3C, INVEST với ví dụ xấu và tốt, story mapping, các pattern chia nhỏ story, acceptance criteria dạng rule và example, Gherkin viết đúng cách, Example Mapping và cách biến AC thành test tự động.
Yêu cầu được nói ra hiếm khi là nhu cầu thật. Bài này đi qua bộ công cụ của business analyst dành cho kỹ sư: bản đồ stakeholder, kỹ thuật phỏng vấn, shadowing, Jobs-to-be-Done, prototype, assumption log, phân loại yêu cầu kiểu BABOK, và một case study duyệt hoá đơn B2B ở công ty Việt Nam.
Năm 2026 trình duyệt đã có sẵn những primitive mà trước đây phải nhờ Floating UI, Radix hay thư viện animation. Bài này đi qua popover, invoker commands, anchor positioning và View Transitions: chúng làm gì, kết hợp ra sao, hỗ trợ tới đâu và chỗ nào vẫn nên dùng thư viện.
Micro-frontends giải quyết bài toán tổ chức — nhiều team deploy độc lập — chứ không phải bài toán kỹ thuật. Bài này so sánh năm cách ghép frontend, đi sâu vào Module Federation 2.0 (shared singleton, version skew, manifest, type, fallback) và chỉ ra khi nào một monorepo Turborepo là câu trả lời tốt hơn.
Web Worker không phải phép màu cho mọi trang chậm. Bài này đi qua khi nào đáng chuyển việc sang worker, cái giá của structured clone, transferable, SharedArrayBuffer và COOP/COEP, tự viết RPC kiểu Comlink, cấu hình bundler, worker pool, huỷ việc bằng AbortSignal, ví dụ thật và các lựa chọn thay thế như scheduler.yield.
Cài Sentry mới là bước đầu. Bài này đi qua cách mình dựng frontend observability thật sự: lab và field data, thu RUM bằng web-vitals attribution, gửi beacon không mất, sampling, source map riêng tư, nhóm lỗi nhiễu, nối trace với backend qua traceparent, lọc PII, dashboard p75 và deploy marker.
Conditional type và infer, key remapping, template literal type biến "/users/:id/posts/:postId" thành params có type, một fetch client suy ra từ route map, lỗi có type, branded ID, satisfies và const type parameter, cầu nối Zod để type không nói dối — và khi nào nên dừng.
Khi phần tử native không còn đủ, ARIA là một bản hợp đồng bạn phải giữ. Accessibility tree và cách tính accessible name, roving tabindex hay aria-activedescendant, dựng combobox và tabs từng bước, live region thực sự lên tiếng, focus khi đổi route và cách kiểm thử tất cả.
Một thiết kế xác thực trung thực cho API NestJS và frontend Next.js: khi nào dùng session, khi nào dùng JWT, cách xoay vòng refresh token có phát hiện tái sử dụng, đăng nhập bằng passkey với SimpleWebAuthn, và các guard, rate limit, CSRF đi kèm.
Dữ liệu từ server không thuộc về bạn — bạn chỉ giữ một bản sao có hạn dùng. Bài này đi sâu TanStack Query v5 theo góc nhìn cache: thiết kế query key, staleTime và gcTime, invalidation, optimistic update có rollback, Suspense, hydration với Next.js App Router, infinite query và khi nào không nên dùng nó.
Chuyện gì xảy ra với một tính năng LLM khi traffic thật đổ về: độ trễ thật sự đến từ đâu, bộ đếm token và chi phí theo từng tính năng kèm ngân sách theo tenant, cấu trúc prompt để tận dụng prompt caching của provider, exact và semantic caching, routing model, cắt gọt context, batch API, gọi song song, retry có fallback và circuit breaker, và dashboard mình theo dõi.
"use client" không đánh dấu loại component mà đánh dấu điểm bắt đầu của client graph. Bài này dựng lại mô hình tư duy cho RSC trong Next.js 16: thứ gì đi qua ranh giới, data fetching đặt ở đâu, waterfall, streaming và những lỗi khiến bundle phình hoặc lộ dữ liệu.
Streaming HTML hoạt động thế nào ở tầng giao thức, cách đặt Suspense boundary, tránh waterfall, selective hydration, Partial Prerendering trong Next.js 16, tác động lên TTFB, LCP và CLS, những proxy âm thầm buffer stream và cách xử lý lỗi khi status 200 đã được gửi đi.
Cách dựng background job trong NestJS 12 với BullMQ 6 sao cho không bao giờ lặng lẽ mất việc và không bao giờ trừ tiền khách hai lần: at-least-once và idempotency, transactional outbox, retry có phân loại lỗi, dead-letter, rate limit, graceful shutdown và observability.
Coding agent thật sự giúp được team frontend ở đâu và âm thầm hỏng ở đâu, cách cho chúng context bằng AGENTS.md và task nhỏ, lên plan trước khi code, vòng lặp kiểm chứng, review PR do AI viết, rủi ro supply chain như slopsquatting, và những kỹ năng nào quan trọng hơn với kỹ sư mid và senior.
Hook headless với prop getter, compound component dùng context, asChild và render prop, useControllableState cho controlled và uncontrolled, bàn phím và ARIA như một phần của API, cái giá của polymorphism trong TypeScript, và khi nào nên dùng Radix, React Aria hay Base UI thay vì tự viết.
Hiểu NestJS làm gì bên dưới — thứ tự middleware, guard, interceptor, pipe, filter; DI, scope và durable provider; dynamic module — để tổ chức một API lớn thành modular monolith sạch sẽ, có error model nhất quán, request context và graceful shutdown.
Xây golden dataset từ usage thật, kiểm tra deterministic trước, LLM-as-judge với rubric và các bias của nó, so sánh pairwise, chạy eval trong CI khi đổi prompt hay model, theo dõi chi phí và độ trễ cùng chất lượng, tín hiệu online, tracing, và cách tránh overfit bộ eval.
Next.js 16 bỏ kiểu cache ngầm của App Router cũ: mọi thứ dynamic theo mặc định, bạn tự chọn chỗ cần cache bằng use cache. Bài này đi qua static shell và dynamic hole, cache key, cacheLife, cacheTag với updateTag, revalidateTag, refresh, và một trang sản phẩm e-commerce làm từ đầu đến cuối.
Từ Nx s1ngularity, chalk/debug đến Shai-Hulud, TanStack và ChainDrop: các vụ tấn công npm thực sự đã làm gì, npm và GitHub đã thay đổi những gì, và một hệ phòng thủ nhiều lớp — install, CI, publish — áp dụng thẳng vào một monorepo Bun + Turborepo.
Tool calling thật ra là một vòng lặp do code của bạn điều khiển. Bài này đi qua cách định nghĩa tool bằng schema, agent loop có giới hạn bước, xử lý args sai, message list với part có kiểu, stream args dở dang, render tool call thành component và bắt người dùng xác nhận trước những tool có side effect.
Cơ chế snapshot và cây pseudo-element của View Transitions, startViewTransition trong SPA, transition giữa hai document, view-transition-name, view-transition-class và types, shared element từ danh sách sang trang chi tiết, reduced motion, những bẫy hiệu năng, và cách dùng component ViewTransition của React trong Next.js 16.
Demo RAG thì ai cũng dựng được trong một buổi chiều; làm cho nó trả lời đúng mới là phần khó. Bài này đi qua một pipeline RAG viết bằng TypeScript trên PostgreSQL/pgvector: chunking theo cấu trúc, hybrid search gộp bằng RRF trong một câu SQL, reranking, phân quyền trước khi xếp hạng, trích dẫn và cách đo chất lượng bằng con số.
Phần frontend mà các tutorial chat AI hay bỏ qua: chọn transport, tự parse SSE với event bị cắt giữa chunk, Route Handler giữ API key và huỷ ngược lên upstream, state theo message parts, gom render theo requestAnimationFrame, markdown tăng dần an toàn, autoscroll, accessibility và xử lý lỗi.
Một ô gợi ý tìm kiếm trông đơn giản nhưng gom đủ mọi bài toán khó của frontend: race condition, debounce, cache, trạng thái không nhấp nháy, WAI-ARIA combobox, gõ tiếng Việt bằng IME và cách test. Bài này xây từng phần bằng React + TypeScript.
Cách mình thiết kế và xây UI cho những tính năng mà mỗi lần chạy lại ra một kết quả khác: ngân sách độ trễ và streaming, gợi ý có thể chấp nhận, sửa hoặc bỏ qua với state model có type, undo và preview, nguồn trích dẫn trung thực, feedback nối vào analytics, xử lý lỗi và accessibility.
Ba chỉ số Google dùng để đo trải nghiệm thật của người dùng — đo thế nào, được tính ra sao, vì sao ảnh hưởng SEO, và quy trình cụ thể để tìm đúng nguyên nhân rồi sửa.
Phần frontend khi gửi file cho LLM: file input, kéo thả và paste, nhận diện loại file bằng magic bytes, thu nhỏ ảnh và xoá EXIF ngay trên trình duyệt, ảnh HEIC từ iPhone, PDF, ghi âm bằng MediaRecorder, upload qua presigned URL có progress và huỷ, dọn object URL, accessibility và những gì server vẫn phải kiểm tra.
Hiểu đúng mô hình event loop của trình duyệt — task, microtask, khung hình — qua các bài đoán thứ tự output, rồi dùng nó để giải thích vì sao UI bị đơ và cách chia nhỏ, nhường main thread, đẩy việc sang Web Worker.
React escape giúp bạn rất nhiều, nhưng không phải tất cả. Bài này đi qua những lỗ hổng XSS vẫn lọt qua React, cách dựng CSP nghiêm ngặt bằng nonce trong Next.js, Trusted Types, CSRF thời SameSite, chuyện lưu token ở đâu và cách chặn clickjacking.
Khi nào state nên nằm trong URL thay vì useState hay cache server, cách parse và validate search params bằng schema, push hay replace, debounce ô tìm kiếm, đồng bộ với App Router của Next.js 16, nuqs, và những rắc rối về nút Back và SEO.
Tự tay viết một virtual list bằng React + TypeScript: toán windowing với số liệu cụ thể, overscan, chiều cao thay đổi với prefix sum và binary search, đo bằng ResizeObserver, chống giật khi scroll, accessibility — và khi nào không nên virtualize.
Cách mình xây tính năng sản phẩm trên LLM mà kết quả là JSON có kiểu: chế độ structured output của các API, định nghĩa schema bằng Zod, xử lý refusal và output bị cắt, retry kèm sửa lỗi, version prompt trong code, kỳ vọng đúng về temperature và cách thiết kế schema mà model làm tốt.
React Compiler thực sự làm gì, các Rules of React nó dựa vào, ESLint plugin, rollout từng phần bằng annotation mode và "use no memo", xử lý useMemo/useCallback cũ, cách kiểm chứng nó chạy, các lý do bail out thường gặp, thư viện bên thứ ba và chi phí build.
Vì sao mình bắt đầu ghi lại những gì học được khi làm việc, định dạng đơn giản mình dùng, và cách ghi chép dần thành bài viết.
Vì sao CSS của dự án lớn luôn trượt dần về !important, cách @layer thay đổi luật thắng thua của cascade, những bẫy như style không nằm trong layer và !important bị đảo ngược, @scope với donut scope và proximity, các gotcha của native nesting, và lộ trình đưa một codebase cũ vào layer.
Chia token thành ba tầng, đặt tên theo mục đích, làm light/dark theme với prefers-color-scheme và lựa chọn của người dùng mà không bị nháy, color-scheme, map token vào @theme của Tailwind v4, kiểm tra contrast và những lỗi hay gặp.
Signals theo dõi dependency thế nào, vì sao push-pull cho cập nhật không bị glitch, Solid, Preact, Angular và Vue dùng chúng ra sao, đề xuất TC39 đang ở đâu, React Compiler thay đổi được gì, và những cái bẫy khi chạy production — kèm một bản cài đặt signal nhỏ bằng TypeScript.
Ứng dụng frontend dễ vỡ khi ta thiết kế từng trang một. Một cẩm nang ngắn để vẽ state, luồng dữ liệu và quyền sở hữu trước khi vẽ UI.
Font ảnh hưởng LCP và CLS ra sao, chọn font-display thế nào, preload font quan trọng, subset với unicode-range cho tiếng Việt, variable font, tự host hay dùng CDN, chỉnh metric font fallback và next/font trong Next.js.
Cập nhật lạc quan kèm rollback, outbox lưu trong IndexedDB, idempotency key, retry khi có mạng lại, các chiến lược giải quyết xung đột, hiển thị trạng thái đồng bộ và cách test kịch bản offline.
Thiết kế pipeline CI cho monorepo frontend dùng Bun và Turborepo: các bước cần có, cache dependency và kết quả build, chỉ chạy package bị ảnh hưởng, preview cho từng PR, required checks và giữ secrets an toàn.
Vì sao ước lượng gần như luôn sai, cách chia nhỏ công việc theo trạng thái, accessibility, responsive và i18n, dùng khoảng và độ tự tin thay cho một con số, khi nào cần spike, cách nói chuyện với PM và cách so sánh ước lượng với thực tế để giỏi dần lên.
Ba app Next.js, năm package dùng chung, một lockfile. Ghi chép về ranh giới, caching và những sai lầm mình sẽ tránh lần sau.
Conditional breakpoint, logpoint, DOM breakpoint, XHR/fetch breakpoint, các tiện ích console như debug(), monitorEvents(), $0, copy(), tab Network, Performance và local overrides — cùng quy trình bốn bước mình dùng để tìm ra nguyên nhân thay vì đoán.
Cache-Control, ETag, tên file có hash, s-maxage và stale-while-revalidate ở CDN, service worker, staleTime trong TanStack Query — mỗi lớp cache làm gì, nên đặt header thế nào cho từng loại tài nguyên, và những lỗi khiến người dùng thấy dữ liệu cũ.
Từ showModal(), top layer, ::backdrop đến quản lý focus, gắn nhãn, khoá cuộn, đóng khi bấm nền và dialog lồng nhau — kèm một component React nhỏ và cách tự kiểm tra bằng bàn phím và screen reader.
Không phải test càng nhiều càng tốt. Bài này là cách mình chia việc giữa unit, integration và e2e, viết test theo hành vi với Testing Library, mock network ở ranh giới, dùng Playwright, xử lý test chập chờn, và hiểu đúng con số coverage.
Feature flag giúp tách deploy khỏi release, nhưng dùng sai thì thành nợ kỹ thuật và giao diện nhấp nháy. Bài này đi qua bốn loại flag, đánh giá flag ở server hay client, định nghĩa flag có kiểu bằng TypeScript, rollout dần, A/B test và quy trình dọn flag.
Hướng dẫn thực tế giúp giảm lượng JavaScript tải ban đầu bằng cách kết hợp lazy loading theo route và theo component.
Lên senior không phải là code nhanh hơn hay biết nhiều framework hơn. Đó là chuyển từ hoàn thành task sang chịu trách nhiệm cho kết quả. Bài này là những hành vi cụ thể, một bảng tự đánh giá, và các cái bẫy mình từng rơi vào.
React 19 đưa form về gần với HTML hơn: prop action, trạng thái pending, cập nhật optimistic và Server Actions. Bài này đi qua cách mình dựng một form đăng ký đầy đủ — validate hai phía, trả lỗi theo field, accessible, và chạy được cả trước khi JavaScript tải xong.
Điều gì khiến component render lại, vì sao re-render không đồng nghĩa với cập nhật DOM, cách đo bằng React DevTools Profiler, chi phí thật của memo/useMemo/useCallback, tách context, đặt state đúng chỗ, key trong danh sách, và React Compiler thay đổi bức tranh thế nào.
Vì sao media query theo viewport không còn đủ cho component tái sử dụng, cách dùng container-type, container có tên, đơn vị cqi, kết hợp clamp() và :has(), kèm một card responsive hoàn chỉnh và chiến lược fallback.
Phân loại lỗi trước khi xử lý, hiểu error boundary bắt được gì và không bắt được gì, retry đúng cách với backoff và jitter, tách thông báo cho người dùng khỏi log cho developer, và báo cáo lỗi mà không làm lộ dữ liệu cá nhân.
Review nên nhìn gì trước, viết comment sao cho người nhận học được thay vì tự ái, giữ PR nhỏ, xử lý bất đồng — và để máy lo phần format để con người tập trung vào thứ quan trọng.
Chọn định dạng nào, srcset và sizes giúp trình duyệt chọn ảnh ra sao, khi nào lazy và khi nào eager, giữ chỗ để tránh CLS, CDN ảnh, art direction với picture và cách dùng next/image trong Next.js 16.
Hiểu normal flow, block và inline, flexbox (một chiều, từ nội dung ra) và grid (hai chiều, từ layout vào), intrinsic sizing, vì sao min-width: 0 cứu flex item bị tràn — để viết layout bằng hiểu biết thay vì thử từng thuộc tính.
Vì sao isLoading, isError và data cùng tồn tại là mầm mống của bug, cách mô hình hoá UI bằng trạng thái và sự kiện, một state machine có type bằng useReducer cho luồng submit form, và khi nào nên dùng thư viện statechart.
Discriminated union, exhaustive switch với never, satisfies, branded type, as const và validate ở biên hệ thống — những pattern mình dùng hằng ngày vì chúng bắt được bug thật, kèm cả lúc nên dừng lại không type thêm nữa.
Những lợi ích về tốc độ và trải nghiệm phát triển hằng ngày khiến Bun trở thành trình quản lý gói mình chọn.
Vì sao sở hữu mã nguồn component tốt hơn cài một hộp đen — và shadcn/ui chọn đúng mức trừu tượng ở đâu.