Roux’s New Component Library

An animated radial gradient mask over text in CSS

Bài viết hướng dẫn tạo hiệu ứng mặt nạ (mask) gradient xuyên tâm hoạt ảnh trên văn bản …

The Shifting Line Between CSS States and JavaScript Events

CSS pseudo-classes ngày càng tương đồng với JavaScript event listeners, giúp xử lý trạng thái UI mà không cần viết JS. Bài viết so sánh các pseudo-classes phổ biến (:hover, :focus, :valid...) với sự kiện JavaScript tương ứng, đồng thời giới thiệu spec event-trigger mới (chưa được hỗ trợ) cho phép CSS lắng nghe sự kiện trực tiếp để kích hoạt animation.

Những kiến thức về sự tương đồng giữa các trạng thái CSS và sự kiện JavaScript giúp lập trình viên tối ưu hóa mã, giảm bớt sự phụ thuộc vào JavaScript và khám phá các tính năng tương lai của CSS để làm UI đẹp hơn, nhanh hơn và hiệu suất cao hơn.

How to Use the Screen Reader That's Built into Your iPhone

iPhone và iPad tích hợp sẵn trình đọc màn hình VoiceOver, giúp đọc to các yếu tố giao diện như văn bản, nút bấm, menu. Bài viết hướng dẫn ba cách kích hoạt VoiceOver (Settings, Siri, Accessibility Shortcut), năm cử chỉ điều hướng quan trọng cho nhà phát triển, cùng cách điều chỉnh tốc độ và giọng đọc.

Lập trình viên nên đọc bài này để hiểu cách kiểm tra tính khả dụng (accessibility) trên thiết bị iOS thực tế thông qua VoiceOver, giúp phát hiện và cải thiện trải nghiệm người dùng tàn tật trên ứng dụng của họ.

ARIA, anti-patterns, and you

ARIA Authoring Practices Guide (APG) không phải hướng dẫn tối ưu cho website mà chỉ minh …

Prop For That

Thư viện Prop For That của Adam Argyle cung cấp các CSS custom properties động, cho phép truy cập vào những thuộc tính CSS thông thường không thể truy xuất như vị trí con trỏ, tốc độ cuộn, trạng thái form hay thời gian hiện tại. Nhà phát triển chỉ cần thêm thuộc tính data vào HTML, sau đó sử dụng trực tiếp các biến CSS này trong stylesheet mà không cần viết JavaScript.

Lập trình viên nên đọc bài này để khám phá cách Prop For That giúp tối ưu hóa giao diện người dùng bằng cách kết nối trực tiếp CSS với dữ liệu động từ HTML mà không cần JavaScript, mở rộng khả năng tùy biến UI một cách đơn giản và hiệu quả.

Experimenting with random() in CSS

CSS sắp bổ sung hàm random() tạo giá trị ngẫu nhiên cho thuộc tính, hỗ trợ range min/max, step, và element-scoped để giữ nhất quán trên cùng phần tử. Demo ứng dụng gồm hiệu ứng bokeh, rơi cánh hoa anh đào, ảnh Polaroid xếp chồng, và bài thơ thị giác. Tính năng random-item() chưa có thể mô phỏng bằng random() + @property cùng style queries. Hiện chỉ Chromium 148+, Safari 26.2+ và Polypane 29+ hỗ trợ, Firefox chưa tương thích.

Lập trình viên muốn tận dụng thiết kế tương tác động lực và hiệu ứng sinh học trong UI ngay trên trình duyệt mà không cần phụ thuộc vào JavaScript để khám phá công cụ mới này.

When A Favicon Becomes The Entire Website

Tim Wehrle tạo ra một cách hack sáng tạo khi nhúng toàn bộ website HTML vào tệp favicon dưới dạng hình ảnh PNG bằng cách mã hóa các byte UTF-8 thành dữ liệu hình ảnh. Một payload HTML 208-byte cùng header PNG 4-byte vừa đủ trong favicon 9×9 pixel, sau đó dùng TypeScript để giải nén và hiển thị trang web trong trình duyệt. Dự án mã nguồn mở trên GitHub kèm demo trực tuyến.

Lập trình viên nên đọc bài này để khám phá cách áp dụng kỹ thuật mã hóa và giải mã dữ liệu trong thiết kế giao diện web, mở rộng khả năng tương tác và tối ưu hóa không gian lưu trữ cho các ứng dụng nhỏ gọn.