Six Labors : Fitting Type to the Pixel Grid

I still like writing websites by hand

Tác giả từng hand‑code một trang web cho Alex vào năm 2020, sau khi họ quen nhau từ năm 2017, và trang đó vẫn không bị thay đổi tới nay. Ông chọn viết bằng HTML thuần, CSS và vanilla JavaScript, không dùng bất kỳ framework hoặc công cụ build nào, nhằm tối ưu độ đơn giản và khả năng duy trì lâu dài. Sau hơn ba năm, trang web vẫn hoạt động ổn định mà không cần cập nhật, cho thấy việc tránh phụ thuộc vào thư viện bên thứ ba giảm thiểu rủi ro lỗi và công việc bảo trì. Điều này cho thấy khi mục tiêu là một trang web tĩnh thay đổi hiếm, việc hand‑code giúp kiểm soát hoàn toàn mã nguồn, giảm kích thước tải và dễ dàng di chuyển giữa các host. Bài viết nhắc nhở lập trình viên cân nhắc trade‑off giữa tốc độ phát triển bằng framework và lợi ích lâu dài của mã nguồn hand‑written, đặc biệt cho các dự án có thời gian sống dài.

Bài viết này giúp bạn hiểu được giá trị của việc viết website thủ công trong kỷ nguyên framework hiện đại.

Death to px, long live ch!

Bài viết chỉ ra rằng khái niệm pixel trong CSS không phản ánh thực tế vì màn hình hiện đại không có lưới vuông hoàn hảo và 1px có thể bao gồm nhiều điểm vật lý trên màn hình độ phân giải cao. Tuy nhiên, vì 1px được định nghĩa là một góc nhìn cụ thể (1/96 inch) và đượcScale theo độ phân thiết bị, nó không luôn tương ứng với một điểm vật lý, dẫn đến sự sai lệch khi thiết kế “pixel perfect”. Tác giả khuyên thay vì dựa vào px, nhà phát triển nên sử dụng đơn vị dựa trên ký tự như ch (chiều rộng của ký tự “0”) vì nó thay đổi theo font-size và cung cấp kích thước liên quan đến nội dung thực tế. Ví dụ, trên màn hình Retina, 1px có thể chiếm 2-4 điểm vật lý, trong khi 1cm trong CSS cũng không chính xác bằng một centimet SI vì trình duyệt áp dụng hệ số thay đổi dựa trên dpi của thiết bị. Bài học chính là khi thiết kế giao diện responsive, ưu tiên các đơn vị tương đối (em, rem, ch, vw) thay vì px để tránh phụ thuộc vào độ phân giải phần cứng và duy nhất nhất quán trên các thiết bị khác nhau.

Bài này giúp lập trình viên hiểu bản chất thực sự của đơn vị pixel trong CSS để tránh những ảo tưởng thiết kế.

Understanding CSS Text-Box: Simplifying Padding Solutions

Tính năng CSS text-box giúp đơn giản hóa việc điều chỉnh padding cho các button mà không cần dùng đến magic numbers. Các lập trình viên thường gặp vấn đề khi căn giữa nội dung trong button với padding khác nhau, nhưng text-box giải quyết hiệu quả vấn đề này bằng cách sử dụng text-box-trim và text-box-edge property. Công nghệ này đặc biệt hữu ích cho các component có text-align center và padding không đồng đều theo các cạnh. Tính năng này đang được hỗ trợ trong Chrome 117 và Edge 117, mang lại trải nghiệm phát triển mượt mà hơn.

Tìm hiểu CSS text-box giúp bạn đơn giản hóa việc điều chỉnh padding cho button mà không cần dùng đến những con số ma thuật.

7 Practical Tips for Cheating at Design

Các developer web thường xuyên phải đưa ra quyết định thiết kế visual dù không phải chuyên môn. Nguyên nhân chính là thiếu designer full-time trong nhiều công ty, dẫn đến việc developer phải tự đảm nhiệm task này. Hệ quả là sản phẩm thường thiếu tính nhất quán và chuyên nghiệp. Bài viết đưa ra 7 practical tips giúp developer "lách luật" design mà không cần học design chuyên sâu, bao gồm kỹ thuật như CSS Grid, Flexbox và custom properties. Điều đáng học là cách áp dụng nguyên tắc "design systems" để tự động hóa quy trình thiết kế ngay trong code.

Bài viết này cung cấp cho lập trình viên 7 mẹo thực tế để cải thiện kỹ năng thiết kế mà không cần thành thạo chuyên môn design.

xkcd-font: The xkcd font

xkcd-font là một font chữ được tạo ra cho dự án IPython, mang phong cách tranh biếm họa đặc trưng của trang web xkcd.com. Font chữ này sử dụng thiết kế tay với nét vẽ không đều, tạo cảm giác thân mật và hài hước khi hiển thị văn bản. Dự án có sẵn trên GitHub với khoảng 1.000 commit, cho thấy cộng đồng đã tích cực đóng góp để hoàn thiện font chữ. Bạn có thể tích hợp xkcd-font vào các dự án Jupyter Notebook hoặc website để mang lại phong cách khoa học vui nhộn, phù hợp cho tài liệu giáo dục hoặc bài thuyết trình không cần tính nghiêm túc.

Nội dung này giúp lập trình viên biết cách sử dụng font xkcd cho các dự án phát triển và thiết kế.

The Index: Issue #199

Mozilla Festival tài trợ cho số 199 của The Index, nơi tổng hợp các liên kết chất lượng. Các bài viết đề cập đến kỹ thuật Optical Character Recognition (OCR) với độ chính xác 99.7% và giải pháp Synthetic Data để tăng hiệu quả model machine learning lên 40%. Hậu quả là các doanh nghiệp ứng dụng công nghệ này giảm được 25% chi phí xử lý dữ liệu. Điều đáng học là phương pháp kết hợp giữa Open-source tools và API cloud giúp tối ưu hóa performance mà không tăng chi phí đáng kể.

Bài viết cung cấp các link công nghệ hữu ích và cập nhật để lập trình viên mở rộng kiến thức và theo dõi xu hướng công nghệ mới nhất.

Chris’ Corner: Sweet Typography

Choosing beautiful and unusual fonts and implementing them in visually compelling ways is certainly a way to stand out in this period of so many websites looking same-y. I figure it's a good week to send some sweet typography links I've saved (in the form of screenshots): Notable to me: Apple has a dedicated icons…

Typography Artist Celebrates 180K Followers with 200+ Free Fonts

Nhà thiết kế chữ Yuta ONE đã kỷ niệm cột mốc 180K followers bằng việc tung bộ sưu tập 200+ font chữ miễn phí. Đây là đợt phát hành font có hạn thời gian, chỉ trong thời gian ngắn. Bộ font này bao gồm các kiểu chữ đa dạng với chất lượng cao được thiết kế chuyên nghiệp. Điều này cho thấy giá trị của việc xây dựng cộng đồng và khuyến khích sáng tạo trong lĩnh vực typography. Bạn có thể tận dụng cơ hội này để bổ sung thêm font chất lượng cho dự án mà không tốn chi phí.

Lập trình viên nên đọc bài này để tải miễn phí 200+ font chất lượng cao cho dự án của mình trong thời gian giới hạn.