Thủ Thuật Front-End

Ảnh minh họa: Danh sách các class UIkit thường

Danh sách các class UIkit thường dùng nhất – Cheat Sheet cho Developer

05/05/2025 0 10 2 phút đọc

UIkit là một framework CSS hiện đại, nhẹ và linh hoạt – rất phù hợp để xây dựng giao diện cho blog, portfolio, landing page và cả theme WordPress. Dưới đây là danh sách các...

Ảnh minh họa: Tối ưu srcset và Lazyload hình

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

05/05/2025 0 12 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...

Ảnh minh họa: Các thư viện JavaScript nhẹ thay

Các thư viện JavaScript nhẹ thay thế jQuery phổ biến

06/05/2025 0 22 2 phút đọc

jQuery từng là chuẩn mực để thao tác DOM, xử lý sự kiện và AJAX trong JavaScript. Tuy nhiên, với sự phát triển của JavaScript hiện đại (ES6+), nhiều thư viện nhẹ hơn đã ra...

Ảnh minh họa: Những thuộc tính CSS ít người

Những thuộc tính CSS ít người biết nhưng cực kỳ hữu dụng

09/05/2025 0 28 3 phút đọc

CSS ngày càng mạnh mẽ, không chỉ dừng lại ở việc tô màu và căn lề. Dưới đây là những thuộc tính CSS ít được sử dụng rộng rãi nhưng lại mang đến sức mạnh...

GSAP – Thư viện tạo hoạt ảnh mượt mà cho website hiện đại

10/05/2025 0 31 4 phút đọc

GSAP (GreenSock Animation Platform) là một thư viện JavaScript mạnh mẽ giúp bạn tạo các hiệu ứng động siêu mượt, chuyên nghiệp và tương thích cao trên mọi trình duyệt. Đây là công cụ được...

Ảnh minh họa: Tạo mini game Quiz nhiều câu

Tạo mini game Quiz nhiều câu hỏi bằng JavaScript thuần

10/05/2025 0 21 3 phút đọc

Muốn tạo một trò chơi nhỏ ngay trên bài viết WordPress để kiểm tra kiến thức hoặc tăng tương tác? Bài viết này sẽ hướng dẫn bạn cách tạo một hệ thống quiz nhiều câu...

Ảnh minh họa: Các pseudo-class nâng cao trong CSS

Các pseudo-class nâng cao trong CSS ít được biết đến nhưng cực kỳ hữu dụng

10/05/2025 0 13 3 phút đọc

Ngoài những pseudo-class phổ biến như :hover, :focus, CSS còn cung cấp hàng loạt pseudo-class nâng cao rất mạnh mẽ, giúp kiểm soát trạng thái phần tử theo cách linh hoạt hơn – thậm chí...

Ảnh minh họa: Tự tạo file JavaScript hiển thị

Tự tạo file JavaScript hiển thị icon SVG siêu nhẹ cho web/app: Dễ như trở bàn tay

05/09/2025 0 37 9 phút đọc

Demo

Bạn muốn bỏ các thư viện icon cồng kềnh và tự chủ hoàn toàn về biểu tượng trong dự án web/app? Bài viết này là một hướng dẫn thực chiến kết hợp giải thích và...

Ảnh minh họa: Debounce và Throttle: khác nhau thế

Debounce và Throttle: khác nhau thế nào?

09/09/2025 0 13 4 phút đọc

Demo

Trong giao diện web, một số sự kiện bắn “liên thanh” như input, scroll, resize, mousemove. Nếu gọi logic nặng (ví dụ: tìm kiếm API, tính toán, DOM update) theo từng sự kiện, hiệu năng...

Ảnh minh họa: Web Speech API: Chuyển giọng nói

Web Speech API: Chuyển giọng nói thành text ngay trên web

09/09/2025 0 115 8 phút đọc

Demo

Web Speech API cho phép trình duyệt nhận diện giọng nói và trả về văn bản theo thời gian thực. Bạn có thể build tính năng voice search, nhập liệu bằng giọng nói, hay trợ...

Ảnh minh họa: Geolocation API: Lấy vị trí người

Geolocation API: Lấy vị trí người dùng chỉ với vài dòng JS

09/09/2025 0 24 7 phút đọc

Demo

Geolocation API cho phép trình duyệt cung cấp vị trí hiện tại của người dùng (vĩ độ/kinh độ) sau khi họ cấp quyền. Bạn có thể xây tính năng “tìm cửa hàng gần nhất”, tự...

Ảnh minh họa: Floating Label Form với UIkit: Label

Floating Label Form với UIkit: Label bay lên khi nhập, gọn đẹp và dễ đọc

13/09/2025 0 9 4 phút đọc

Demo

Floating Label giúp trường nhập liệu gọn gàng: nhãn nằm trong ô khi trống và trượt lên phía trên khi người dùng nhập. Kỹ thuật này cải thiện khả năng quét thông tin, tiết kiệm...

Ảnh minh họa: Glassmorphism Card bằng CSS và UIkit:

Glassmorphism Card bằng CSS và UIkit: Trong suốt, mờ nền và nổi bật nội dung

13/09/2025 0 73 5 phút đọc

Demo

Glassmorphism tạo cảm giác mặt kính: nền mờ, bề mặt trong suốt và viền sáng nhẹ. Phong cách này giúp nội dung nổi bật trên ảnh nền hoặc gradient mà vẫn giữ được độ sang...

Ảnh minh họa: CSS Nesting chính thức: Viết CSS

CSS Nesting chính thức: Viết CSS gọn như SCSS mà không cần preprocessor

21/09/2025 0 4 3 phút đọc

Trong nhiều năm, lập trình viên front-end phải dựa vào SCSS, LESS hoặc PostCSS để viết CSS theo dạng “lồng” (nesting). Điều này giúp code gọn, dễ đọc và quản lý component rõ ràng hơn....

Ảnh minh họa: CSS Color Level 4: Tận dụng

CSS Color Level 4: Tận dụng màu sắc hiện đại (lab, lch, color-mix)

23/09/2025 0 14 4 phút đọc

Demo

Trước đây, CSS chỉ xoay quanh các hệ màu quen thuộc như HEX, RGB hay HSL. Chúng đủ dùng nhưng thiếu độ chính xác về màu sắc, nhất là khi hiển thị trên màn hình...