This Month in Ladybird

The best dark mode toggle is probably none • Lea Verou

Vấn đề về toggle dark mode hai trạng thái đã gây nhiều tranh cãi, nhưng nghiên cứu mới cho …

Is Minifying CSS Necessary? (2023)

Trong bối cảnh tối ưu hóa website, việc minifying CSS từng được coi là bắt buộc. …

This Month in Ladybird

Ladybird là một dự án trình duyệt mới được xây dựng từ đầu, nhằm mang lại trải nghiệm hiện …

pnpm 12.0

pnpm phiên bản 12.0 đã được phát hành là bản ổn định sau khi viết lại toàn bộ bằng Rust. Việc viết lại này nhằm cải thiện hiệu suất và độ tin cậy mà không thay đổi giao diện người dùng. Các lệnh, cờ, cấu hình và định dạng lockfile của pnpm 11 đều được giữ nguyên, nên nâng cấp không yêu cầu thay đổi dự án hiện có. Tài liệu chính thức đồng thời mô tả cách sử dụng cả hai phiên bản, giúp nhà phát triển có thể chọn phiên bản phù hợp. Bài học từ bản phát hành này là việc viết lại bằng Rust có thể mang lại lợi thế về hiệu suất, miễn là giữ nguyên tính tương thích ngược để giảm gánh nặng chuyển đổi cho người dùng.

Lập trình viên nên đọc bài này vì pnpm 12.0 được viết lại bằng Rust mang lại hiệu năng tốt hơn trong khi vẫn giữ nguyên toàn bộ cú pháp và định dạng file lock từ phiên bản trước.

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.

Scroll-driven CSS animations

Bài viết giới thiệu cách tạo hoạt ảnh dựa trên vị trí cuộn mà không cần JavaScript bằng cách sử dụng các tính năng mới của CSS. Nguyên nhân kỹ thuật là появление свойства animation-timeline cùng với các hàm scroll() và view() trong tiêu chuẩn CSS Scroll-driven Animations, cho phép liên kết timeline của hoạt ảnh trực tiếp với tiến trình cuộn trang. Hệ quả là các nhà phát triển có thể thực hiện các hiệu ứng parallax, reveal hoặc các hiệu ứng cuộn phức tạp chỉ bằng CSS, giảm phụ thuộc vào script và cải thiện hiệu suất render. Tuy nhiên, bài cũng nhắc kiểm tra mức độ hỗ trợ của trình duyệt hiện tại vì tính năng này mới chỉ được triển khai trong một số phiên bản mới nhất của các trình duyệt chính. Điều đáng học là trước khi áp dụng trong sản phẩm, cần xác định mức độ hỗ trợ và przygotować dự án fallback hoặc sử dụng polyfill để tránh trải nghiệm bị hỏng đối với người dùng trên trình duyệt cũ.

Hướng dẫn tạo hiệu ứng động dựa trên vị trí cuộn trang mà không cần JavaScript qua CSS mới nhất.

How we saved 100 terabytes of memory by optimizing 1.1.1.1’s DNS cache

Cloudflare’s 1.1.1.1 công khai DNS resolver duy trì một bộ nhớ cache lớn để xử lý hàng tỷ truy vấn mỗi ngày. Đội ngũ đã thực hiện năm tối ưu hoá cấp Rust trong bố cục mục cache: tái cấu trúc struct, sử dụng kiểu số nguyên gọn gàng, loại bỏ padding, áp dụng arena allocation và lưu trữ trước giá trị băm, giảm kích thước mỗi mục xuống 56 %. Khi mở rộng ra toàn bộ hạ tầng toàn cầu, việc này giải phóng khoảng 100 TB RAM, tạo thêm dung lượng cho các đợt lưu lượng cao và giảm chi phí vận hành. Bài học là việc kiểm soát bố cục dữ liệu và khai thác khả năng kiểm soát bộ nhớ của Rust có thể tiết kiệm tài nguyên lớn ngay cả ở các dịch vụ quy mô lớn. Đọc bài gốc sẽ cung cấp các con số cụ thể và hướng dẫn chi tiết từng bước để áp dụng các tối ưu hoá tương tự vào các cache khác.

Bài viết tiết lộ những tối ưu hóa cấp độ Rust giúp tiết kiệm 100 terabyte bộ nhớ cho cache DNS của Cloudflare.

Your React app doesn’t need all that JavaScript

React app thường tải một lượng JavaScript không cần thiết, gây ra hiệu năng kém. Nguyên nhân là do nhiều tính năng hoàn toàn có thể thực hiện bằng native browser features như :has() selector, Popover API, scroll-snap carousels và CSS animations. Hệ quả là app trở nên chậm, tốn tài nguyên và khó bảo trì. Đáng học ở đây là việc tối ưu bằng cách giảm phụ thuộc vào JavaScript, tận dụng các API trình duyệt hiện có. Phân tích cho thấy việc thay thế một số components React bằng CSS và DOM APIs giúp giảm tới 40% bundle size.

Bài viết này giúp bạn đơn giản hóa ứng dụng React bằng cách tận dụng các tính năng trình duyệt nguyên bản, giảm thiểu sự phụ thuộc vào JavaScript.