Thủ thuật Front-end

amCharts – Thư viện biểu đồ JavaScript hiện đại

26/11/2024 0 34 2 phút đọc

Nếu bạn đang tìm kiếm một thư viện biểu đồ JavaScript hiện đại, dễ tuỳ biến và giao diện bắt mắt thì amCharts là lựa chọn đáng để thử.

Hiệu ứng Button Press 3D đẹp ná thở với CSS

29/11/2024 0 40 4 phút đọc

Demo

Muốn nút bấm trên giao diện trông "đã tay" hơn khi click? Với hiệu ứng Button Press 3D bằng CSS thuần, bạn có thể biến một nút bình thường thành một button có chiều sâu,...

Tích hợp tự động hoàn thành địa chỉ với Goong

08/12/2024 0 17 3 phút đọc

Bạn đang cần tính năng gợi ý địa chỉ khi người dùng nhập thông tin như khi đặt hàng, đăng ký tài khoản, cập nhật hồ sơ? Goong Autocomplete là một giải pháp đáng tin...

CSS Container Queries: Giải pháp cho giao diện linh hoạt thực sự

31/12/2024 0 18 3 phút đọc

Container Queries đang thay đổi cách chúng ta viết responsive layout. Không còn phụ thuộc vào kích thước trình duyệt, giờ đây bạn có thể áp dụng style dựa trên kích thước của chính phần...

Responsive Breakpoints nên dùng năm 2025

03/02/2025 0 8 6 phút đọc

Trong thời đại đa dạng thiết bị như hiện nay, việc chọn đúng breakpoints cho responsive design không chỉ ảnh hưởng đến trải nghiệm người dùng mà còn quyết định hiệu suất và khả năng...

Cách viết class CSS tái sử dụng cao: Utility-first, BEM hay Hybrid?

19/02/2025 0 8 3 phút đọc

Khi một dự án web phát triển lớn dần, việc tổ chức class CSS một cách rõ ràng, tái sử dụng cao và dễ bảo trì trở nên cực kỳ quan trọng. Ba phong cách...

So sánh hiệu năng giữa UIkit và Bootstrap 5 – Nên chọn gì năm 2025?

06/03/2025 0 10 4 phút đọc

Khi xây dựng giao diện web hiện đại, việc chọn framework CSS phù hợp có thể ảnh hưởng lớn đến hiệu năng và trải nghiệm người dùng. Hai trong số những framework phổ biến nhất...

Chèn biểu tượng chuyển động siêu mượt vào trang web của bạn với LottieFiles

10/03/2025 0 30 3 phút đọc

Demo

Muốn trang web của bạn thêm sinh động vào các dịp như Giáng Sinh, Tết, hay đơn giản là tạo trải nghiệm người dùng tốt hơn? Hãy thử LottieFiles – kho biểu tượng hoạt ảnh...

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

14/03/2025 0 80 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ỉ...

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

16/03/2025 0 102 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...

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

16/03/2025 0 43 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() để...

Thêm “Tính năng đọc tiếp” như Medium bằng vài dòng code

17/03/2025 0 9 3 phút đọc

Nếu bạn từng đọc bài viết trên Medium, bạn sẽ thấy sau vài đoạn đầu, bài viết bị làm mờ và hiển thị nút “Đọc tiếp”. Đây là một cách thông minh để thu hút...

Tối ưu preload / prefetch tài nguyên trong giao diện UIkit

01/04/2025 0 16 6 phút đọc

Trong quá trình xây dựng giao diện web, việc tối ưu hóa tải tài nguyên là một trong những yếu tố quan trọng để cải thiện hiệu suất và trải nghiệm người dùng. UIkit, với...

Chuyển đổi giao diện từ Bootstrap 3 sang UIkit – Checklist & Hướng dẫn

05/04/2025 0 13 5 phút đọc

Khi bạn quyết định chuyển đổi giao diện từ Bootstrap 3 sang UIkit, bạn sẽ trải qua một số bước nhất định để đảm bảo giao diện hoạt động tốt trên nền tảng mới mà...

Tạo hiệu ứng chuyển trang mượt mà không cần plugin (Page Transition)

09/04/2025 0 45 2 phút đọc

Hiệu ứng chuyển trang mượt mà giúp website trở nên liền mạch và chuyên nghiệp hơn. Thay vì để trình duyệt tải lại toàn bộ nội dung một cách thô ráp, bạn có thể áp...

Danh sách UIkit component tùy biến cao nhất – Tips nâng tầm giao diện

20/04/2025 0 6 4 phút đọc

UIkit là một framework nhẹ và mạnh mẽ dành cho các dự án frontend hiện đại. Một trong những điểm mạnh lớn nhất của UIkit là khả năng tùy biến linh hoạt nhờ vào hệ...

Tự tạo Dark Mode đơn giản, không phụ thuộc plugin

21/04/2025 0 25 3 phút đọc

Dark Mode (chế độ nền tối) không chỉ giúp bảo vệ mắt vào ban đêm mà còn tạo cảm giác hiện đại cho giao diện. Thay vì dùng plugin nặng nề, bạn có thể tự...

Tự viết lại đoạn jQuery cũ bằng JavaScript hiện đại (Vanilla JS)

23/04/2025 0 7 2 phút đọc

jQuery từng là tiêu chuẩn cho mọi project web nhờ cú pháp ngắn gọn và hỗ trợ trình duyệt tốt. Tuy nhiên, với ES6+ và trình duyệt hiện đại, bạn hoàn toàn có thể loại...

Tối ưu Google Fonts cho site WordPress siêu nhẹ (tự host, preload, font-display)

28/04/2025 0 15 5 phút đọc

Google Fonts là một trong những thư viện font phổ biến nhất, giúp các nhà phát triển dễ dàng tích hợp các font chữ đẹp vào website. Tuy nhiên, việc sử dụng Google Fonts không...

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

03/05/2025 0 24 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,...