Cho Fable 5 tự polish giao diện blog: nó tự đóng thước trước khi cưa

Hello mọi người. Nếu bạn ghé blog mấy hôm nay và thấy nó mượt hơn bình thường một chút, thì đúng rồi đó, giao diện vừa được dọn lại từ đầu tới chân. Người dọn lần này khum phải mình. Ba cho chạy thử Claude Fable 5, model mới toanh, và đề bài nghe gọn mà khó: polish giao diện cho thật kỹ, cấm hỏi lại giữa chừng, tự kiểm tra lấy, làm xong phải có số liệu chứng minh. Mình ngồi kế bên coi nó làm từ đầu tới cuối, bài này là ghi chép lại những gì mình thấy.

Đo trước, sửa sau

Cái làm mình ngạc nhiên ngay từ đầu: Fable không nhảy vào sửa CSS liền. Việc đầu tiên nó làm là tự dựng một bộ đồ nghề kiểm tra. Giống ông thợ mộc kỹ tính, trước khi cưa tấm ván nào thì tự đóng cho mình một cây thước, vì thước có chuẩn thì đường cưa mới thẳng.

Bộ đồ nghề đó gồm ba món:

Một script chụp màn hình hàng loạt: 8 loại trang nhân với 7 cỡ màn hình, từ desktop 1440px xuống tới iPhone 390px, kèm luôn trạng thái hover, focus, mở menu. Mỗi vòng sửa xong là chụp lại đủ bộ, gần trăm tấm.
Một script Python so từng frame: nó quay chuyển động của trang (mở menu, rê chuột, cuộn bài) thành mấy chục frame liên tiếp, rồi dùng thư viện PIL so từng cặp frame kề nhau. Chỗ nào số điểm ảnh thay đổi vọt lên bất thường là chỗ đó có giật.
Một script đo web vitals trên bản build thật, giả lập mạng 3G chậm, đo CLS với LCP đàng hoàng chứ không đoán bằng mắt.

Dựng xong đồ nghề nó mới bắt đầu sửa. Sửa một lớp, build lại, chụp lại, so lại, đo lại. Lặp đúng cái vòng đó sáu lần.

Mấy thứ được cứu sống

Soi bằng máy nên lòi ra mấy chỗ mà mắt người nhìn hằng ngày không thấy:

Trang 404 từ hồi blog ra đời tới giờ là một trang trắng trơn, chữ dính sát mép màn hình, vì CSS cho nó chưa từng được viết. Giờ nó thành trang đàng hoàng, có dòng terminal báo “No such file or directory”, có mascot đứng suy tư.
Trang style-guide cũng vỡ từ lâu vì xài toàn class không tồn tại. Giờ thành nơi trưng đủ bộ token màu và component.
Ảnh OG để share Facebook, Zalo hóa ra trỏ vào một file chưa từng tồn tại. Nghĩa là bấy lâu nay share link đi đâu cũng trống hình. Fable tự vẽ luôn một tấm 1200x630 bằng Python cho khớp bộ nhận diện.
Gần 280 dòng CSS chết, di tích của mấy bản thiết kế cũ, được dọn sạch.

Phần ngon nhất: ngồi soi từng frame

Đây là chi tiết mình khoái nhất. Có một bug do chính Fable gây ra giữa chừng: nó thêm tính năng bấm ra ngoài thì đóng menu mobile, ai dè cái nút hamburger đổi icon ngay khoảnh khắc được bấm, trình duyệt liền coi cú bấm đó là “bấm ra ngoài”, menu vừa mở đã tự đóng. Bấm hoài menu không lên.

Cái hay nằm ở chỗ người phát hiện khum phải người. Bộ screenshot của nó báo động trước, tấm hình “menu đang mở” tự nhiên trống trơn. Nó tự gây bug, rồi tự bắt được bug bằng cây thước nó tự đóng. Tới đây thì mình chịu, làm việc kiểu này khó mà ẩu được.

Vụ font cũng vậy. Blog xài Be Vietnam Pro, trước giờ chở nguyên 6 file TTF nặng tổng cộng 810KB tới mọi người đọc. Fable cắt font lại, chỉ giữ ký tự Latin và tiếng Việt, nén sang woff2, còn đúng 96KB, nhẹ hơn 8 lần. Xong nó chưa tin liền, còn giả lập mạng 3G rồi quay lại từng frame lúc trang tải, để chắc chắn chữ không nháy font giữa chừng.

Con số sau cùng

Mấy con số này lấy thẳng từ log kiểm tra trong repo, không phải kể cho sướng miệng:

Font: 810KB xuống 96KB
CLS (độ xê dịch layout khi tải trang): 0.0537 xuống 0.0001, coi như đứng im
LCP trên mạng 3G giả lập: 2.08 giây xuống quanh 1.2 giây
Lỗi console: 0. Cuộn ngang ở mọi cỡ màn hình: 0
Đi hết trang chỉ bằng bàn phím: 24 điểm dừng, đủ 24 vòng focus

Riêng vụ CLS có một quyết định mình thấy thương. Ảnh bìa bài viết có tấm vuông, có tấm chữ nhật, cách dễ nhất để hết xê dịch là crop hết về một tỷ lệ. Fable thử crop, tự nhìn lại, thấy tấm mascot ngồi thiền bị cắt mất chân, nó bỏ phương án đó liền và chịu khó đi đường vòng xa hơn. Máy mà biết tiếc một bức hình, cũng ngộ.

Mấy dòng CSS đẹp thì giờ model nào cũng viết được. Cái đáng kể là cái nết tự nghi ngờ việc mình vừa làm: sửa một li cũng chụp lại, đo lại, so lại từng frame. Bộ đồ nghề đó giờ nằm luôn trong repo, lần sau ai sửa giao diện, kể cả mình, cũng phải qua cửa nó trước. Blog từ nay có trạm đăng kiểm riêng rồi đó ^^