Responsive game UI: bàn phím, cảm ứng và màn hình mobile
Gom phím và chạm vào cùng một action, rồi chỉnh vùng bấm, safe area và touch-action cho màn nhỏ.
// QUEST_LOG
Ghi chú kỹ thuật
Ghi chú kỹ thuật mình muốn tìm lại sau này: React, TypeScript, browser API và những mảnh nhỏ để làm game trên web.
LocalStorage: lưu trạng thái ứng dụng và game web
Đọc và ghi localStorage an toàn: JSON hỏng, phiên bản save, và những thứ không được lưu ở đây.
Quản lý state trong React: Context, Jotai và Zustand
Chọn useState, Context, Zustand hoặc Jotai theo tần suất đổi và phạm vi dùng, không theo độ phổ biến.
React và Next.js: khác biệt và cách lựa chọn
Phân biệt thư viện React với framework Next.js, rồi chọn SPA, App Router hoặc static export theo sản phẩm.
TanStack Query: quản lý server state đúng cách
Dùng TanStack Query v5 cho dữ liệu từ server: query key, staleTime, và chỗ không nên dùng nó.
Triển khai website tĩnh lên Cloudflare Pages
Cấu hình Next.js static export và các mục build của Cloudflare Pages, gồm những gì host tĩnh không chạy.
TypeScript trong React: các pattern hữu ích
Các kiểu hay dùng cho props React: union phân biệt, component generic, và satisfies cho cấu hình.
Web Audio API: tạo âm thanh tương tác trong trình duyệt
Tạo tiếng ngắn bằng AudioContext: chờ cử chỉ người dùng, nối gain, và tránh ramp tới 0.