Writing & Notes

Vì sao chart của một platform giao dịch không thể dùng widget free, và cả pipeline từ tick đến candle: custom datafeed, Web Worker fetch hàng chục nghìn candle, backend nấu candle trong Node — rồi hai bên phối hợp optimize quanh một nhận xét duy nhất: candle đã đóng là bất biến.

tRPC là gì, tại sao một monorepo NestJS + React bỏ sạch REST controller để chạy tRPC: express adapter, context xác thực JWT, procedure chain, router factory co-located với service, hooks React Query sinh tự động từ file router — và cái giá phải trả.

Mình ngồi cả hai phía bàn phỏng vấn Tech Lead: vòng leadership & behavioral trượt thường không phải vì thiếu kỹ năng, mà vì câu chuyện thiếu bối cảnh và thiếu cái giá. Kèm cách kể STAR có số liệu, ADR và trade-off, xử lý bất đồng, quản lý tech debt, mentoring mid lên senior, văn hoá code review, thương lượng scope, incident ownership, và mấy câu hỏi nên hỏi ngược lại.

Vòng frontend system design cho vị trí Lead: khi nào KHÔNG nên dùng micro-frontend, Module Federation vs iframe vs route-based, monorepo với build cache, design system governance, chiến lược data fetching, strangler migration và observability — qua ca 6 team, build 25 phút, release phải xếp hàng.

Session hay JWT, refresh token rotation, cookie flags, CSRF, XSS và CSP, OAuth2/OIDC với PKCE, BFF pattern — bảy câu hỏi Auth & Security mình hay gặp ở vòng Fullstack Senior, kèm ví dụ Go và React.

Bên dưới framework, trình duyệt thật ra đang làm gì? Sáu nhóm câu hỏi browser internals mình hay gặp ở vòng Frontend Senior: critical rendering path, layout/paint/composite, layout thrashing, streaming SSR và hydration, memory leak, cách debug bằng DevTools và tối ưu INP.

Vòng TypeScript của level Senior không hỏi định nghĩa: generics có constraint, conditional/mapped/template literal types, infer, narrowing và discriminated union, satisfies, type-safe API client và form, và cách tránh any mà không đánh đổi sự thực dụng.

Mỗi feature của Next.js ra đời để giải một vấn đề cụ thể. Bài này đi theo trình tự đó: CSR waterfall → vấn đề gì, SSR cổ điển → vấn đề gì, streaming → vấn đề gì, RSC → vấn đề gì. Bắt đầu từ câu hỏi nền tảng mà nhiều người bỏ qua: tại sao React SSR được, khi react-dom-server không hề chứa Fiber.

Vòng JavaScript level Mid hỏi gì: thứ tự log của event loop (macrotask/microtask), closure, this, prototype, async/await và Promise combinators — có bài tập đoán output kèm lời giải, và lý do ứng viên 'biết' vẫn trượt.

Trên React 19: đi hết một đường từ lúc gọi setState tới lúc pixel đổi màu — Fiber là đơn vị công việc, Lanes là hệ thống ưu tiên 31 bit, Scheduler cắt lát main thread mỗi 5ms. Kèm hooks nhìn từ trong, ba pha của commit, và những gì React 19 thật sự đổi ở tầng này.

Bài toán thật của SSR là bài toán round-trip. Đi từng vòng waterfall của CSR, tới byte thật trên đường truyền khi stream — <!--$?-->, template B:0, $RC() — rồi tới lần render thứ hai mà ít người tính vào: hydration. Kèm bảng chọn CSR/SSR/streaming/SSG/ISR/PPR theo đúng chi phí.

CPU utilization chỉ 40% mà p99 latency nổ: cgroup CFS quota bị vét hết trong vài mili giây đầu mỗi period. GOMAXPROCS, cơ chế throttling, và cách Go 1.25 tự đọc CPU limit của container.

Một event đi từ goroutine Go tới component React mất bao lâu, tắc ở đâu? Ghi lại ca SSE một chiều: vì sao mình chọn nó thay WebSocket, cách bounded channel giữ client chậm khỏi kéo sập server, và cách hai đầu contract khỏi lệch nhau.

Mười cái bẫy ngữ nghĩa trong Go mà middle hay trả lời sai: typed nil trong interface, slice aliasing, biến vòng lặp, select ngẫu nhiên, map race, goroutine leak — kèm chuyện chúng nổ ra thế nào trên production.

Phỏng vấn React deep technical ở vòng senior thường xoay quanh đúng mười câu: setState và batching, stale closure, useEffect, race condition khi fetch, useMemo, useCallback, useRef, context, concurrent rendering — kèm cách trả lời suy ra từ mental model thay vì học thuộc API.

Rate limiter phân tán bằng Go, kể lại theo một buổi phỏng vấn system design: hỏi gì trước khi vẽ, vì sao token bucket thắng fixed window, Lua script atomic trên Redis thay cho kiểu đọc-rồi-ghi, kiến trúc hai tầng giảm round-trip, và mấy cạm bẫy production thật.

Reconciliation heuristic O(n) của React: vì sao key là identity chứ không phải để tắt warning, khi nào state bị gắn nhầm phần tử, và cách đo chi phí re-render trước khi rải memo khắp codebase.

Bóc internals ba thế hệ build tool: vòng đời make-seal-emit của webpack, transform pipeline và Environment API của Vite, cầu nối Rust với JavaScript bên trong Rspack, và cách Rsbuild xếp lớp plugin lên trên — kèm cách đo để không tự lừa mình.

Một booking tour chạm vào năm hệ thống khác nhau, và một trong đó là API bên thứ ba không ai kiểm soát được. Chuyển sang saga có compensation, viết step bằng workflow engine của Medusa v2, và phần đau nhất: idempotency.

Phỏng vấn senior fullstack hay xoáy vào ba chỗ: Goroutine, Channel, Mutex trong Go; câu hỏi System Design; và vòng behavior. Đây là cách mình trả lời, kèm một câu chuyện STAR có số liệu.

Bên trong J.A.R.V.I.S.: runtime ReAct viết bằng Go 1.25+, định tuyến multi-agent trước khi gọi LLM, chạy parallel tool execution bằng errgroup, bộ nhớ 3 tầng (Vector + Graph + Redis), và streaming SSE qua Fastify gateway.

Storefront tour/vé vừa cần SEO vừa cần tải nhanh: cách mình chia Server Components và Client Components, và cách dùng Suspense để streaming phần dữ liệu chậm nhất trang — khối giá quy đổi theo tỷ giá thực.

Một lớp abstraction cho Stripe, Adyen, LINE Pay, KakaoPay, Toss: thêm payment provider mới mà không phải sửa logic đặt hàng ở core — kèm chuyện webhook idempotency và job reconciliation chạy mỗi 15 phút.

3h07 sáng, alert p99 latency vượt 15s: hai transaction lock ngược thứ tự gây deadlock trên PostgreSQL, client retry sau 3 giây thành double-charge. Cách bọn mình chữa bằng Idempotency-Key và thứ tự lock theo account_id.

Code xong đúng hạn là điều kiện cần, chưa đủ. Checklist 4 trục mình tự chấm — Technical Depth, System Thinking, Ownership & Communication, Mentorship — kèm ví dụ thật qua Bolt Technologies, Cognisian và SmileViet.

Đề bài system design mình gặp nhiều nhất khi phỏng vấn, cũng là bài toán mình làm hằng ngày: booking tour/vé máy bay chịu flash-sale mà không overselling. Đi qua framework 4 bước, seat-lock có TTL, và idempotency key.

Đánh giá bàn nâng hạ, màn hình chuẩn màu, bàn phím cơ công thái học và các thói quen nhỏ duy trì năng lượng làm việc bền vững.

Sự cố giá tour hiển thị sai cho khách sau khi admin cập nhật giá qua CMS, và cách mình thiết kế lại cơ chế invalidate cache theo hướng event-driven thay vì chỉ dựa vào TTL.

Hai webhook thanh toán đến gần như cùng lúc khiến một booking bị ghi tiền hai lần. Cách mình truy vết qua log, tái hiện bằng Promise.all, rồi đẩy ràng buộc xuống database bằng unique constraint và advisory lock.

Dashboard y tế ~150 biểu đồ query thẳng vào Postgres, mỗi chart chờ 1.5 giây. Chuyển sang StarRocks, thêm materialized view với partition theo tháng: p95 xuống ~250ms, tức giảm hơn 80% độ trễ.

Một ngày của Senior Engineer bị xé thành bao nhiêu mẩu? Cách block giờ deep work, chỗ context switching ăn mất năng lượng, và mấy dấu hiệu burnout mình tự theo dõi.

Cursor để viết code, Claude Code để giao task có phạm vi rõ, Gemini CLI cho context khổng lồ — kèm ranh giới mình tự đặt: chỗ nào để AI tự động hoá, chỗ nào tự tay kiểm soát logic nghiệp vụ.

Socket đổ về hơn 20,000 ticks/giây thì main thread chết trước cái chart. Cách tụi mình tách aggregate candle và indicator sang Web Worker, dùng transferable objects để khỏi copy dữ liệu, và double-buffering để không xé hình khi render.

Vì sao chọn Radix Primitives làm nền cho component library nội bộ, cách Shadcn/UI sinh code thẳng vào repo, và cách admin dashboard lẫn storefront override --primary, --radius bằng CSS variables. Kèm chuyện dark mode và versioning khi các app không nâng cấp cùng lúc.

Ba nguyên nhân re-render thừa, cách đo Core Web Vitals (LCP/INP/CLS) bằng lab data lẫn field data, và lúc nào useMemo/useCallback thật sự có ích — kèm con số trước/sau từ dashboard ~150 chart.

Repo đông người cùng viết Tailwind thì UI bắt đầu trôi: mỗi người một sắc xám, một giá trị padding hơi lệch. Cách tụi mình kéo lại là design tokens tập trung, giới hạn arbitrary values, và @apply có kiểm soát — để giao diện vẫn nhất quán khi scale.