Thủ thuật Front-end

Tổng hợp mẹo nhỏ và kỹ thuật hay trong HTML, CSS, JS giúp cải thiện hiệu suất giao diện, trải nghiệm người dùng và tăng tốc phát triển frontend.

Tối ưu srcset và Lazyload hình ảnh bằng UIkit

Tối ưu srcset và Lazyload hình ảnh bằng UIkit

2 tuần 0 5 6 phút đọc

Việc tối ưu hóa hình ảnh là một trong những yếu tố quan trọng để tăng tốc độ tải trang web và cải thiện trải nghiệm người dùng. UIkit cung cấp các công cụ tuyệt...

Giảm request bằng cách gom icon SVG dùng chung

Giảm request bằng cách gom icon SVG dùng chung

2 tuần 0 9 3 phút đọc

Trên các website hiện đại, icon SVG thường được sử dụng để thay thế icon ảnh PNG hoặc font-icon như Font Awesome. Tuy nhiên, nếu bạn nhúng mỗi SVG riêng lẻ cho từng biểu tượng,...

Thêm biểu tượng tùy chỉnh vào UIkit

Thêm biểu tượng tùy chỉnh vào UIkit

2 tháng 0 38 8 phút đọc

Tìm hiểu cách mở rộng hệ thống biểu tượng của UIkit bằng cách thêm các biểu tượng SVG tùy chỉnh bằng JavaScript. Hướng dẫn chi tiết cách tối ưu mã SVG, sử dụng UIkit.icon.add() để...

Nén SVG để tối ưu hóa dung lượng mã SVG

Nén SVG để tối ưu hóa dung lượng mã SVG

2 tháng 0 53 14 phút đọc

Dù SVG vốn nhẹ, bạn vẫn có thể giảm thêm dung lượng bằng cách loại bỏ các thông tin không cần thiết như comment, metadata… Điều này đặc biệt hữu ích nếu bạn sử dụng...

Hiển thị hình ảnh theo đúng tỉ lệ với CSS3

Hiển thị hình ảnh theo đúng tỉ lệ với CSS3

2 tháng 0 67 2 phút đọc Demo

Khi hiển thị ảnh với nhiều kích thước khác nhau, trang web dễ bị mất cân đối hoặc bố cục xô lệch. May mắn là CSS3 hỗ trợ thuộc tính aspect-ratio giúp bạn giữ tỉ...