Đang tải…

Ghi chép khi làm

Bài viết

Chỗ mình ghi lại những thứ mất kha khá thời gian mới hiểu ra — kèm code chạy được.

11bài viết

6chủ đề

37phút đọc

11 bài viết.

A dashboard layout drawn as a dashed outer box containing a page box. One arrow passes through the layout on first load; a second arrow, an RSC request, curves around the layout straight into the page.

Engineering

Layout không phải là hàng rào phân quyền

Đặt lệnh kiểm tra quyền trong layout của dashboard là điều rất tự nhiên. Next không render lại layout khi điều hướng phía client, và một request RSC có thể nhắm thẳng vào page segment.

15 tháng 8, 20263 phút đọc85

Two panels. On the left one shared IP bucket holds four people behind a single office NAT, three of them blocked. On the right each signed-in user has their own bucket keyed by user id.

Engineering

Giới hạn tốc độ theo người, thay vì theo IP

Chặn theo IP nghĩa là một văn phòng dùng chung NAT sẽ cùng nhau tiêu hết hạn mức. Và middleware thì không nhìn thấy Server Action.

13 tháng 8, 20263 phút đọc82

A filter diagram. Paragraph, heading, pre and a YouTube iframe pass through the allowlist; a script tag, a javascript: href and an iframe pointing at a relative admin path are stopped.

Engineering

dangerouslySetInnerHTML và cái danh sách cho phép

Chặn thẻ script là phần dễ. Phần khó là iframe, thuộc tính srcset, và scheme javascript: nằm trong href mà bạn quên mất.

11 tháng 8, 20263 phút đọc81

A diagram showing one POST to api.indexnow.org fanning out to Bing, Yandex, Naver, Seznam and Yep, while Google sits apart and is fed only by sitemap.xml.

Web

Google không tham gia IndexNow, vậy ai tham gia?

Indexing API của Google trả về 200 cho mọi URL bạn gửi, kể cả những URL nó sẽ không bao giờ dùng. Đó là cái bẫy tốn thời gian nhất trong mảng lập chỉ mục.

9 tháng 8, 20263 phút đọc81

Two rows of colour swatches. The top row, Tailwind's 500 step, varies in lightness from 0.86 down to 0.54. The bottom row holds every hue at lightness 0.52, so the set reads evenly.

Web

Vì sao thang -500 của Tailwind không đều, và cách sửa bằng OKLCH

amber-500 và indigo-500 cùng một bậc trên bảng màu. Đo ra thì độ sáng của chúng lệch nhau 0,27. Đó là lý do một hàng icon nhiều màu trông như nhiễu.

6 tháng 8, 20264 phút đọc80

A phone outline with an arc showing the area a thumb reaches comfortably in the lower half. The top corner where a header would sit is marked as out of reach; a four-slot dock with a centre orb sits along the bottom edge.

Web

Bỏ hẳn thanh nav trên cùng ở mobile

Điều hướng của site này trên điện thoại không có header. Chỉ có một thanh dock sát đáy màn hình, và quyết định khó nhất là con số 4.

4 tháng 8, 20264 phút đọc84

Nested boxes showing React cache wrapping unstable_cache wrapping Supabase, with a note that the inner layer serializes to JSON, so a Date becomes a string on the second request.

Engineering

Hai tầng cache của Next, và cái bug chỉ hiện ở request thứ hai

cache() và unstable_cache() nghe như hai tên gọi của một thứ. Chúng giải hai bài toán khác nhau, và trộn lẫn thì sinh ra một lỗi TypeError rất khó chịu.

2 tháng 8, 20263 phút đọc82

A diagram of a script-src directive. The deployed policy omits unsafe-eval and dynamic imports fail on the development server, where webpack wraps its chunks in eval; the development-only policy adds unsafe-eval back.

Engineering

CSP chặt tới mức chặn cả dev server của chính mình

Gỡ 'unsafe-eval' khỏi Content-Security-Policy là việc đúng. Nó cũng làm mọi dynamic import chết ở localhost, và bản deploy thì không sao cả.

28 tháng 7, 20263 phút đọc84

A diagram contrasting two ways of reading a query parameter. Reading searchParams on the server produces a route marked f, server-rendered on demand. Reading it with useUrlParam on the client keeps the route marked as a filled circle, prerendered to static HTML.

Web

Trang tĩnh vẫn đọc được ?tag= trên URL

Đọc searchParams ở server là cách nhanh nhất biến một trang prerender thành trang render theo yêu cầu. Đây là cách giữ được cả hai.

24 tháng 7, 20264 phút đọc83

A grid of twelve numbered file cells representing everything one new module touches. Three are marked as caught by the type checker; nine are marked silent, including the Postgres CHECK constraint.

Engineering

Thêm một module chạm vào 12 file, và không file nào báo lỗi

Tính năng mới chạy ngon từ lần thử đầu. Ba tuần sau mới lộ ra là nó không có trong sitemap, không có trong tìm kiếm, và nút lưu thì âm thầm hỏng.

20 tháng 7, 20264 phút đọc84

TypeScript

Ngày Tôi Nhận Ra 90% Lập Trình Viên Đang Viết Code Sai (Và Tôi Cũng Từng Là Một Trong Số Đó)

Bạn không cần học thêm framework mới. Điều bạn cần là ngừng viết những dòng code khiến chính bản thân mình ghét sau vài tháng.

11 tháng 7, 20263 phút đọc740

Ghi chép khi làm

Bài viết

Chỗ mình ghi lại những thứ mất kha khá thời gian mới hiểu ra — kèm code chạy được.

11bài viết

6chủ đề

37phút đọc

11 bài viết.

Engineering

Layout không phải là hàng rào phân quyền

15 tháng 8, 20263 phút đọc85

Engineering

Giới hạn tốc độ theo người, thay vì theo IP

Chặn theo IP nghĩa là một văn phòng dùng chung NAT sẽ cùng nhau tiêu hết hạn mức. Và middleware thì không nhìn thấy Server Action.

13 tháng 8, 20263 phút đọc82

Engineering

dangerouslySetInnerHTML và cái danh sách cho phép

Chặn thẻ script là phần dễ. Phần khó là iframe, thuộc tính srcset, và scheme javascript: nằm trong href mà bạn quên mất.

11 tháng 8, 20263 phút đọc81

Web

Google không tham gia IndexNow, vậy ai tham gia?

Indexing API của Google trả về 200 cho mọi URL bạn gửi, kể cả những URL nó sẽ không bao giờ dùng. Đó là cái bẫy tốn thời gian nhất trong mảng lập chỉ mục.

9 tháng 8, 20263 phút đọc81

Web

Vì sao thang -500 của Tailwind không đều, và cách sửa bằng OKLCH

amber-500 và indigo-500 cùng một bậc trên bảng màu. Đo ra thì độ sáng của chúng lệch nhau 0,27. Đó là lý do một hàng icon nhiều màu trông như nhiễu.

6 tháng 8, 20264 phút đọc80

Web

Bỏ hẳn thanh nav trên cùng ở mobile

Điều hướng của site này trên điện thoại không có header. Chỉ có một thanh dock sát đáy màn hình, và quyết định khó nhất là con số 4.

4 tháng 8, 20264 phút đọc84

Engineering

Hai tầng cache của Next, và cái bug chỉ hiện ở request thứ hai

cache() và unstable_cache() nghe như hai tên gọi của một thứ. Chúng giải hai bài toán khác nhau, và trộn lẫn thì sinh ra một lỗi TypeError rất khó chịu.

2 tháng 8, 20263 phút đọc82

Engineering

CSP chặt tới mức chặn cả dev server của chính mình

Gỡ 'unsafe-eval' khỏi Content-Security-Policy là việc đúng. Nó cũng làm mọi dynamic import chết ở localhost, và bản deploy thì không sao cả.

28 tháng 7, 20263 phút đọc84

Web

Trang tĩnh vẫn đọc được ?tag= trên URL

Đọc searchParams ở server là cách nhanh nhất biến một trang prerender thành trang render theo yêu cầu. Đây là cách giữ được cả hai.

24 tháng 7, 20264 phút đọc83

Engineering

Thêm một module chạm vào 12 file, và không file nào báo lỗi

Tính năng mới chạy ngon từ lần thử đầu. Ba tuần sau mới lộ ra là nó không có trong sitemap, không có trong tìm kiếm, và nút lưu thì âm thầm hỏng.

20 tháng 7, 20264 phút đọc84

TypeScript

Ngày Tôi Nhận Ra 90% Lập Trình Viên Đang Viết Code Sai (Và Tôi Cũng Từng Là Một Trong Số Đó)

Bạn không cần học thêm framework mới. Điều bạn cần là ngừng viết những dòng code khiến chính bản thân mình ghét sau vài tháng.

11 tháng 7, 20263 phút đọc740