Hardcore IndieWeb: Run your own website 100% independently for only $0.01/day

How to Create Accessible Modals and Pop-ups Using HTML, CSS, and Minimal JavaScript

Tạo modal và pop-up có thể phức tạp do yêu cầu nhiều boilerplate code. Bài viết hướng dẫn cách xây dựng chúng bằng HTML, CSS và JavaScript tối thiểu, tập trung vào khả năng truy cập (accessibility).

Lập trình viên nên đọc bài này để học cách thiết kế các modal và pop-up thân thiện với người dùng và người bị khuyết tật, giúp cải thiện trải nghiệm người dùng và tuân thủ các tiêu chuẩn Accessibility (ADA, WCAG) mà không cần phải viết nhiều mã phức tạp.

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 họa đặc tả ARIA dành cho nhà phát triển trình duyệt và công nghệ hỗ trợ. Việc lạm dụng ARIA (kể cả dùng LLM dựa trên APG) đang khiến web kém tiếp cận hơn, khi dữ liệu từ WebAIM cho thấy tỷ lệ lỗi tiếp cận tăng theo mức độ sử dụng ARIA.

Lập trình viên nên đọc bài này để tránh rủi ro khi sử dụng ARIA sai cách, vì việc áp dụng không đúng quy tắc không chỉ làm giảm khả năng tương tác của người dùng có nhu cầu đặc biệt mà còn khiến các công cụ hỗ trợ (như máy đọc màn hình) hoạt động không hiệu quả, làm web trở nên khó tiếp cận hơn.

Roux’s New Component Library

Thoughtbot đã bổ sung thư viện component HTML vào Roux, framework CSS của họ, nhằm cung cấp nền tảng vững chắc cho các dự án mà không phụ thuộc vào Tailwind hay React. Thư viện này được xây dựng bằng HTML/CSS thuần, ưu tiên khả năng truy cập và đánh dấu ngữ nghĩa, đồng thời hỗ trợ sao chép-dán mã trực tiếp từ trang tài liệu.

Lập trình viên nên đọc để khám phá cách Roux kết hợp CSS và HTML thành một thư viện thành phần UI đơn giản, dễ sử dụng, đồng thời đáp ứng tốt tính khả dụng và phong cách thiết kế theo tiêu chuẩn Thoughtbot, giúp tiết kiệm thời gian và nâng cao chất lượng dự án.

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.

Issue #748: The select element, sized just right — Frontend Focus

Số 748 của Frontend Focus giới thiệu nhiều chủ đề công nghệ web, bao gồm hướng dẫn chi tiết của Jake Archibald về cách điều chỉnh kích thước cho các thẻ select tùy chỉnh bằng calc-size(), phần tử usermedia mới của Google sắp ra mắt trong Chrome 151, bài nói về các mẫu UI CSS hiện đại, triển khai dark mode theo tiêu chuẩn web, hướng dẫn về API View Transitions, kỹ thuật render WebGL không cần GPU, và nghiên cứu thú vị về giới hạn gamut màu hiển thị.

Lập trình viên frontend nên đọc bài này để khám phá cách tối ưu hóa giao diện người dùng với các giải pháp hiện đại như calc-size() cho select element, khám phá tính năng mới của Chrome như usermedia và API mới như View Transitions để nâng cao hiệu suất và tính tương tác của ứng dụng web.

Creating a Progress Bar with Tailwind

Tạo thanh tiến trình (progress bar) đơn giản bằng TailwindCSS rất dễ dàng nhờ cú pháp tiện lợi của framework. Bài hướng dẫn ngắn này sẽ chỉ cách xây dựng thanh tiến trình tương tự ví dụ minh họa.

Lập trình viên nên đọc bài này để khám phá cách đơn giản và hiệu quả sử dụng Tailwind CSS để xây dựng các thành phần UI như progress bar chỉ với các lớp CSS, giúp tiết kiệm thời gian và code mà vẫn đảm bảo tính chuyên nghiệp.

Use cases for aria-expanded

Without reading dry documentation, finding the correct use for aria roles can be a challenge, so Steve Frenzel is here to break down the often mis-used aria-expanded.