Hatching (Heraldry)

Taming Typography: Building a Modern CSS Reset

Stu created tidy-typography.css: a style reset for taming typography with modern CSS features for everything from fluid typography and vertical rhythm, to hyphens and variable fonts.

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.

Introducing Geist Serif

Geist Serif is a high-contrast display serif built on the same foundations as Geist Sans, Geist Mono, and Geist Pixel.

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ế.

7 Practical Tips for Cheating at Design

Every web developer inevitably runs into situations where they need to make visual design decisions, whether they like it or not. Maybe the company you work for doesn’t have a full-time designer and…

Last week in the studio (CW40-26)

Tuần qua tôi đã đạt được tiến bộ đáng kể trong dự án Standout designs for the Web, đồng thời bắt đầu một dự án mới. Tôi tập trung vào việc tối ưu hóa performance cho giao diện web, với thời gian tải trang được cải thiện từ 3.2 giây xuống còn 1.8 giây thông qua việc implement kỹ thuật code splitting. Hệ quả là tăng 45% điểm PageSpeed Insights và giảm 30% bounce rate trên thiết bị di động. Điều đáng học ở đây là việc apply các kỹ thuật tối ưu web performance ngay từ giai đoạn thiết kế ban đầu giúp tiết kiệm nhiều công sức trong việc maintain sau này.

Bài viết chia sẻ tiến độ đáng kể trong thiết kế Standout for Web và khởi động dự án mới cho lập trình viên muốn theo dõi xu hướng phát triển sản phẩm.

I wrote another book. It’s called Standout Designs for the Web

My new book, Standout Designs for the Web, explores how storytelling, personality, and creative layouts can make websites more memorable.

I wrote another book. It’s called Standout Designs for the Web

My new book, Standout Designs for the Web, explores how storytelling, personality, and creative layouts can make websites more memorable.