The Index: Issue #200

This is a modern motherfucking website

Bối cảnh là sự phức tạp ngày càng tăng của các website hiện đại với nhiều thành phần phụ …

Detect when elements overlap with CSS

CSS anchor positioning và scroll-driven animations có thể được sử dụng để phát hiện khi hai phần tử chồng lên nhau. Giải pháp này tận dụng CSS anchor() để liên kết hai phần tử và theo dõi vị trí chúng tương đối với nhau. Khi các phần tử chồng chéo, CSS có thể kích hoạt animation để thay đổi thuộc tính như opacity hoặc background. Kỹ thuật này hiệu quả vì không cần JavaScript, chỉ dùng các thuộc tính CSS như scroll() và animation-timeline để xử lý sự kiện chồng chéo. Lập trình viên có thể học cách kết hợp CSS anchor với scroll-driven animations để tạo hiệu ứng tương tác phức tạp mà không cần code JS.

Phương pháp CSS mới này giúp bạn phát hiện chồng chéo phần tử mà không cần JavaScript, tối ưu hiệu năng ứng dụng web.

Improving site performance by shipping more CSS

Bối cảnh là một design system thực hiện những thay đổi lớn mà không làm gián đoạn hệ thống. …

Community Spotlight: Ionic Theme iOS 27

Bối cảnh: Community Spotlight giới thiệu ionic-theme-ios27, một theme mới dành cho ứng dụng Ionic. Nguyên nhân kỹ thuật: Theme này được xây dựng để mang giao diện thiết kế iOS 27 vào ứng dụng Ionic, đi k với hiệu ứng Liquid Glass độc đáo. Hệ quả: Lập trình viên có thể tạo ra các giao diện ấn tượng và hiện đại cho ứng dụng di động của mình. Điều đáng học: Theme này cung cấp sẵn các thành phần UI được tối ưu cho thiết kế iOS, giúp tiết kiệm thời gian phát triển mà vẫn đảm bảo tính nhất quán và thẩm mỹ cao.

Bài viết này giúp bạn cập nhật giao diện iOS 27 và hiệu ứng Liquid Glass cho ứng dụng Ionic một cách dễ dàng.

Cool Pokémon-Style Holographic Card Effect

Tác phẩm Kazehaya Fuyuka kết hợp Clip Studio Paint Pro và Adobe After Effects tạo hiệu ứng holographic card độc đáo. Ánh sáng chiếu vào card tạo hiệu ứng 3D sống động nhờ layered mask và tracking motion trong After Effects. Nguyên nhân kỹ thuật thành công là cách authors sử dụng divide blend mode và adjust layer để xử lý ánh phản chiếu. Cần học hỏi kỹ năng kết hợp giữa thiết kế 2D trong CSP và animation 3D trong AE. Phương pháp này tiết kiệm thời gian hơn so với hologram thực tế mà vẫn đạt hiệu ứng ấn tượng.

Bài này giúp lập trình viên tạo hiệu ứng thẻ hologram kiểu Pokémon bằng công cụ thiết kế đồ họa.

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 thấy đa số website không cần có toggle này. Nguyên nhân kỹ thuật nằm ở việc các trình duyệt hiện đã hỗ trợ prefers-color-scheme API, cho phép website tự động điều chỉnh theo hệ thống của người dùng mà không cần lưu trạng thái. Hệ quả là việc triển khai toggle không chỉ tốn tài nguyên mà còn gây ra trải nghiệm người dùng kém nhất quán khi chuyển thiết bị. Bài viết đáng học ở chỗ đề xuất phương pháp tiếp cận dựa trên user agent thay vì lưu trạng thái, giảm đến 76% code CSS cần thiết và tăng 42% hiệu suất.

Bài viết này giúp bạn hiểu tại sao hầu hết các trang web không cần nút chuyển đổi chế độ tối cố định.

Do you use :visited on links?

Trong CSS, thuộc tính :visited thường được thiết kế giống với link chưa truy cập nhưng cách tiếp cận này có thể ảnh hưởng bảo mật. Việc sử dụng :visited bị giới hạn nghiêm ngặt bởi trình duyệt - Firefox chỉ cho phép truy cập vào màu sắc của link trong khi Chrome hạn chế hơn nhiều. Hệ quả là các designer không thể tùy biến hoàn toàn giao diện cho link đã truy cập mà vẫn đảm bảo bảo mật. Bài viết này hữu ích để hiểu rõ những hạn chế kỹ thuật của :visited khi thiết kế giao diện web.

Tối ưu trải nghiệm người dùng bằng cách tận dụng :visited một cách hợp lý giúp bạn tạo ra giao diện web thông minh và dễ nhận biết hơn.