HTML & CSS

WebAssembly là gì và ứng dụng thực tế — Demo xử lý ảnh so sánh JS vs Wasm

1 ngày 0 5 5 phút đọc

Demo

WebAssembly (Wasm) là công nghệ cho phép chạy code gần tốc độ native ngay trong browser — từ xử lý ảnh, video, đến game engine và scientific computing. Đến 2026, Wasm đã trở thành công...

Speed Test đơn giản với HTML, CSS Animation và JavaScript

2 ngày 0 3 9 phút đọc

Demo

Speed test là tính năng "ăn tiền" trong các trang landing page công nghệ, hosting, hoặc đơn giản là để khoe kỹ năng front-end. Tin vui là: chỉ với JavaScript thuần, một chút CSS animation,...

Dark Mode Toggle với HTML, CSS và JavaScript — 5 mẫu từ cơ bản đến nâng cao

5 ngày 0 4 8 phút đọc

Demo

Dark mode không còn là "nice-to-have" — nó là yêu cầu cơ bản của mọi giao diện hiện đại. Tin vui là: chỉ với CSS variables và một chút JavaScript, bạn có thể xây dựng...

Drag & Drop File Upload với HTML5, CSS và JavaScript — 5 mẫu từ cơ bản đến nâng cao

6 ngày 0 2 8 phút đọc

Demo

Drag & drop file upload là tính năng không thể thiếu trong mọi app hiện đại — từ upload avatar đến gửi tài liệu. Tin vui là: chỉ với HTML5 Drag & Drop API, File...

Hướng dẫn tạo hiệu ứng VIP cao cấp cho Init Manga

3 tuần 0 5 12 phút đọc

Một trong những chi tiết giúp website manga trở nên nổi bật hơn chính là hiệu ứng dành riêng cho thành viên VIP. Thay vì chỉ đổi màu nickname hoặc thêm badge đơn giản, nhiều...

Tại sao “Tối Ưu Hiệu Suất” kiểu cũ đang phá hủy trải nghiệm người dùng?

12/02/2026 0 53 18 phút đọc

Bạn có bao giờ vào một website và thấy nó hiện lên như một trang HTML thô từ thập niên 90, trắng xóa không có gì, rồi từ từ CSS mới tải vào? Hoặc click...

Tại sao Smooth Scroll bằng JavaScript đang phá nát trải nghiệm người dùng?

02/02/2026 0 13 12 phút đọc

Mở bất kỳ theme WordPress cao cấp nào, đều thấy smooth scroll được quảng cáo như một tính năng đáng tự hào. Nhiều developer nghĩ rằng override scroll behavior mặc định của browser bằng JavaScript...

loading=”lazy” và Script Lazy Load: Khi Nào Nên Dùng Cái Gì?

16/01/2026 0 10 4 phút đọc

Lazy loading hình ảnh là một trong những kỹ thuật tối ưu hiệu năng quan trọng nhất cho website hiện nay, đặc biệt với blog, news site và các trang nội dung dài. Tuy nhiên,...

Hiệu ứng Magnetic Hover: Nút và chữ “hút” con trỏ chuột bằng JavaScript thuần

11/01/2026 0 95 4 phút đọc

Demo

Magnetic Hover là một hiệu ứng UI hiện đại trong đó nút bấm hoặc chữ sẽ có cảm giác “bị hút” về phía con trỏ chuột khi người dùng di chuyển gần đến. Hiệu ứng...

ARIA Roles Used Incorrectly: Lỗi dùng sai ARIA và cách tránh “over-engineering accessibility”

10/01/2026 0 5 4 phút đọc

Lỗi ARIA roles used incorrectly là một lỗi accessibility thuộc nhóm “cao cấp”, thường xuất hiện ở các website được build bởi dev có kinh nghiệm nhưng… quá tay. Ý định ban đầu là tốt:...

Buttons Do Not Have an Accessible Name: Lỗi nút không có tên truy cập và cách khắc phục đúng chuẩn

10/01/2026 0 4 4 phút đọc

Lỗi Buttons do not have an accessible name xuất hiện rất nhiều trong các website hiện đại, đặc biệt là những giao diện dùng icon button, custom UI hoặc JavaScript framework. Với người dùng chuột,...

Images Do Not Have Alternate Text: Lỗi thiếu alt text và cách viết alt đúng chuẩn Accessibility

10/01/2026 0 5 5 phút đọc

Lỗi Images do not have alternate text là một trong những lỗi accessibility lâu đời nhất, nhưng đến nay vẫn xuất hiện đều đặn trên rất nhiều website. Ảnh hiển thị bình thường, layout không...

Heading Elements Are Not in a Sequentially-Descending Order: Lỗi thứ tự heading và cách sửa đúng chuẩn Semantic

10/01/2026 0 6 5 phút đọc

Lỗi Heading elements are not in a sequentially-descending order là một lỗi accessibility rất “dev-style”: không làm vỡ giao diện, không ảnh hưởng CSS, nhưng lại phá nát cấu trúc ngữ nghĩa của trang. Với...

Form Elements Do Not Have Associated Labels: Lỗi form không có label và cách khắc phục chuẩn Accessibility

10/01/2026 0 10 4 phút đọc

Lỗi Form elements do not have associated labels là một trong những lỗi accessibility nghiêm trọng nhưng lại xuất hiện rất thường xuyên trên website hiện đại. Form nhìn vẫn đẹp, vẫn dùng được với...

Links Do Not Have a Discernible Name: Lỗi link không có tên rõ ràng và cách khắc phục đúng chuẩn

10/01/2026 0 6 4 phút đọc

Lỗi Links do not have a discernible name là một vấn đề accessibility rất hay bị bỏ qua vì nó không ảnh hưởng đến giao diện. Với người dùng bình thường, link vẫn bấm được,...

Elements Do Not Have Sufficient Color Contrast: Lỗi tương phản màu phổ biến và cách khắc phục đúng chuẩn

10/01/2026 0 4 5 phút đọc

Lỗi Elements do not have sufficient color contrast là một trong những vấn đề accessibility xuất hiện nhiều nhất khi audit website bằng Lighthouse, axe hoặc theo tiêu chuẩn WCAG. Điều trớ trêu là giao...

Lỗi “Document Does Not Have a Main Landmark” là gì và cách khắc phục chuẩn Accessibility

10/01/2026 0 17 4 phút đọc

Lỗi Document does not have a main landmark là một cảnh báo phổ biến trong các công cụ audit accessibility như Lighthouse, axe hoặc WAVE. Vấn đề này xảy ra khi trang HTML không xác...

Hiệu ứng rọi đèn theo chuột cho chữ bằng CSS Mask (Spotlight Text Effect)

10/01/2026 1 67 4 phút đọc

Demo

Hiệu ứng chữ sáng theo vị trí con trỏ chuột (spotlight text effect) là một kỹ thuật UI hiện đại, thường được sử dụng trong hero section, landing page hoặc banner thương hiệu. Khi người...

Tạo hiệu ứng mưa lì xì ngày Tết bằng HTML, CSS và JavaScript

06/01/2026 0 166 4 phút đọc

Demo

Lì xì là biểu tượng quen thuộc của may mắn, tài lộc và khởi đầu suôn sẻ trong dịp Tết. Hiệu ứng mưa lì xì rơi nhẹ trên website tạo cảm giác vui vẻ, thu...

Tạo hiệu ứng lồng đèn bay ngày Tết bằng HTML, CSS và JavaScript

06/01/2026 0 114 4 phút đọc

Demo

Lồng đèn bay là một hình ảnh mang nhiều ý nghĩa trong văn hóa Á Đông, tượng trưng cho ước nguyện, bình an và khởi đầu tốt đẹp. Khi được đưa vào website dịp Tết,...