The Index: Issue #191

Animating text as Handrawn with CSS - Mostly nerdless

Hướng dẫn tạo hiệu ứng chữ viết tay xuất hiện dần cho tiêu đề bằng CSS và kỹ thuật clip-path.

Lập trình viên nên đọc bài này để khám phá cách tạo hiệu ứng chữ như vẽ tay bằng CSS, giúp nâng cao kỹ năng thiết kế UI và tối ưu hóa hiệu suất với những giải pháp sáng tạo và hiệu quả.

Old icons

Bài viết hồi tưởng về những biểu tượng ứng dụng đầu tiên trên Mac từ thập niên 1980, với phong cách thiết kế đặc trưng như pixel art đen trắng 32×32, hình chữ nhật nghiêng và motif bàn tay, được Apple cùng các nhà phát triển bên thứ ba như Aldus, Quark và THINK sử dụng. Nó cũng liên hệ những hạn chế thiết kế thời kỳ đó với các tranh luận hiện nay về "squircle jail" và sự thiếu vắng tính biểu cảm trong thiết kế icon trên macOS ngày nay.

Lập trình viên nên đọc bài này để hiểu cách thiết kế giao diện người dùng (UI) truyền thống của MacOS 1980s không chỉ là nghệ thuật pixel, mà còn là nền tảng cho những nguyên tắc thiết kế hiện đại, giúp họ tìm lại sự đơn giản và biểu tượng rõ ràng trong thời đại thiết kế phức tạp hiện nay.

How to create awesome staggered animations in CSS

CSS hiện đại hỗ trợ tạo hiệu ứng staggered animation (hoạt ảnh so le) trực tiếp bằng các …

Get Ready For the Powerful CSS border-shape Property!

Thuộc tính CSS sắp ra mắt border-shape cho phép định hình toàn bộ phần tử đồng thời giữ nguyên border, box-shadow và outline, khắc phục hạn chế của clip-path. Tính năng này hỗ trợ đa dạng hiệu ứng như border dạng shape, background cắt gọt, hoạt ảnh, hiện chỉ khả dụng trên Chrome.

Lập trình viên nên đọc bài này để khám phá cách border-shape trong CSS sẽ giải quyết vấn đề tạo các hiệu ứng trang trí (border, shadow) theo hình dạng tự do mà không cần cắt bỏ bằng clip-path, mở rộng khả năng tạo UI sáng tạo và hiệu ứng động hình với các ví dụ thực tế.

Five pre-flight checks for your dashboard

Trước khi triển khai dashboard, cần kiểm tra năm yếu tố quan trọng: khả năng hiển thị trên nhiều kích thước màn hình (đặc biệt mobile), hỗ trợ thao tác cảm ứng, khả năng truy cập (accessibility), hiệu suất xử lý dữ liệu, và phản hồi tức thì khi người dùng tương tác. Những vấn đề này dễ bị bỏ qua nếu chỉ test trên desktop với chuột, trong khi người dùng thực tế có thể truy cập từ nhiều thiết bị và phương thức nhập liệu khác nhau.

Lập trình viên nên đọc bài này để tránh bỏ qua những lỗi nhỏ nhưng có thể làm giảm hiệu suất, khả năng tiếp cận và trải nghiệm người dùng trên các thiết bị khác nhau—đặc biệt là trên mobile—trong khi vẫn tập trung vào thiết kế ban đầu.

What’s new in Web UI (Google I/O 2026)

Bài chia sẻ tại Google I/O 2026 giới thiệu các tính năng mới cho Web UI như scroll-triggered animations, scoped view transitions, UI components và primitives CSS/HTML. Demo có sẵn trên CodePen, kèm bài viết chi tiết trên Chrome for Developers.

Lập trình viên nên đọc để cập nhật những công cụ UI hiện đại mới nhất từ Google, giúp tối ưu hóa giao diện web với các tính năng mới như chuyển tiếp hiển thị và hoạt động nhảy trượt, giúp cải thiện trải nghiệm người dùng và hiệu suất phát triển.

Why default Tailwind is not always an accessible choice

Tailwind CSS mặc định dùng breakpoint dựa trên rem, khiến layout thay đổi bất ngờ khi …