Archives
All the articles I've archived.
P1: Testing pyramid: Unit, Integration, E2E khác nhau ở đâu
Ba tầng của testing pyramid trong frontend, tiêu chí chọn viết loại test nào cho từng tình huống, và sai lầm phổ biến khi viết quá nhiều E2E test.
Redux: Store, Action, Reducer và Redux Toolkit
Ba nguyên tắc cốt lõi của Redux, cách viết Redux thuần và Redux Toolkit, kết nối component qua useSelector/useDispatch, xử lý async với createAsyncThunk, và so sánh với Context/React Query.
Optimistic Updates với React Query
Optimistic Update là gì, cách triển khai với useMutation qua onMutate/onError/onSettled, lưu snapshot để rollback, và khi nào nên/không nên dùng.
Component Lifecycle trong React: Mounting, Updating, Unmounting
Ba giai đoạn vòng đời component React: Mounting, Updating, Unmounting, đối chiếu class lifecycle method với useEffect, và cạm bẫy memory leak khi quên cleanup.
Validate Form với React Hook Form và Zod
Dùng Zod định nghĩa schema validate, kết nối vào React Hook Form qua zodResolver, sinh type TypeScript tự động từ schema, và các đánh đổi khi chọn thời điểm validate.
Controlled và Uncontrolled Components trong React
Controlled và Uncontrolled Component khác nhau ở đâu, khi nào nên dùng cách nào, cạm bẫy khi chuyển đổi giữa chừng, và cách xây một component hỗ trợ cả hai kiểu.
Hooks nâng cao: useReducer, useRef, useLayoutEffect
useReducer khi state phức tạp, useRef để giữ giá trị mutable không gây re-render, useLayoutEffect khi cần đo/chỉnh DOM trước khi trình duyệt paint, kèm ví dụ minh họa cho từng hook.
Tối ưu hiệu năng trong React
Vì sao component re-render, cách dùng React.memo/useMemo/useCallback đúng chỗ, vì sao Context gây re-render toàn bộ consumer, key trong danh sách, code splitting và virtualization.
Compound Components Pattern trong React
Compound Components Pattern giải quyết vấn đề gì, cách triển khai bằng Context và Static Properties, lợi ích so với props drilling, và đánh đổi cần lưu ý.
Container và Presentational Components trong React
Container (Smart) và Presentational (Dumb) Component là gì, lợi ích khi tách UI khỏi logic, và vì sao pattern này chuyển dần sang dùng custom hook sau khi React có Hooks.
Scope trong JavaScript: Global, Function và Block
Giải thích Global Scope, Function Scope, Block Scope, Temporal Dead Zone, Scope Chain và Shadowing trong JavaScript, cùng lý do nên ưu tiên let/const hơn var.
Higher-Order Function trong JavaScript
Higher-Order Function là gì, vì sao chỉ tồn tại được nhờ first-class function, các ví dụ quen thuộc như map/filter/reduce, và ứng dụng thực tế như compose, decorator, middleware.
TypeScript: Interface và Type khác nhau ở đâu
So sánh interface và type trong TypeScript: declaration merging, extends vs intersection, khả năng của type mà interface không có, và quy tắc chọn trong thực tế.
Từ khóa `this` trong JavaScript: Cách xác định giá trị
Giải thích cách xác định giá trị của this trong JavaScript qua 4 rule: Default Binding, Implicit Binding, Explicit Binding, new Binding, và cách Arrow Function xử lý this khác biệt.
Closure trong JavaScript: Cơ chế và ứng dụng thực tế
Giải thích cơ chế Closure trong JavaScript dựa trên Lexical Scope, cạm bẫy thường gặp trong vòng lặp, các ứng dụng thực tế và rủi ro memory leak.
Event Loop: Call Stack, Task Queue và Microtask Queue
Giải thích ngắn gọn cơ chế Event Loop trong JavaScript: Call Stack, Web APIs, Task Queue, Microtask Queue và thứ tự thực thi thực tế.
Thu hồi JWT: Cái giá của việc chọn stateless
JWT vốn được thiết kế để không cần tra cứu server mỗi request, vậy làm sao thu hồi một thứ mà bản chất là không thể thu hồi? Bài viết trình bày các cách tiếp cận và cái giá phải trả cho mỗi cách.
ABAC: Attribute-Based Access Control khi RBAC không còn đủ
ABAC quyết định quyền dựa trên attribute của subject, resource, action và environment thay vì role cố định. Bài viết trình bày khái niệm ABAC, cách triển khai với CASL trong NestJS, và lộ trình migrate dần từ RBAC.
RBAC: Từ lý thuyết đến triển khai production
RBAC gồm ba khái niệm cốt lõi: User, Role, Permission. Bài viết trình bày các cạm bẫy thường gặp khi triển khai RBAC thực tế, từ hard-code role trong code, thiết kế schema, cho tới permission check nhiều lớp và giới hạn của RBAC thuần.
Xây dựng Button Component theo pattern shadcn/ui
Hướng dẫn xây dựng một component React tái sử dụng được theo pattern shadcn/ui: định nghĩa variant bằng cva, merge class an toàn với cn(), forward ref, và compose linh hoạt với asChild/Slot.