HTML & CSS

Accessibility (a11y) cơ bản mọi developer nên biết

11/10/2025 0 11 6 phút đọc

Accessibility (truy cập số) giúp mọi người — bao gồm người khuyết tật, người dùng di động, mạng chậm, thiết bị cũ — đều sử dụng được website. Bài viết này tóm tắt khái niệm,...

CSS Animation vs JavaScript Animation: Chọn bên nào cho hiệu năng cao nhất

08/10/2025 0 17 7 phút đọc

Hiệu ứng chuyển động là yếu tố không thể thiếu trong thiết kế web hiện đại. Tuy nhiên, không phải mọi animation đều được tạo ra như nhau. Một số được triển khai bằng CSS,...

Critical CSS – Tải trang nhanh hơn 2 giây

08/10/2025 0 16 12 phút đọc

Bạn có bao giờ truy cập một website và phải chờ đợi màn hình trắng xóa vài giây trước khi nội dung hiển thị? Đó chính là dấu hiệu của việc CSS chưa được tối...

CSS BEM naming convention cho người mới

02/10/2025 0 7 4 phút đọc

BEM (Block – Element – Modifier) là một quy tắc đặt tên class trong CSS giúp code rõ ràng, dễ đọc và dễ mở rộng. Với BEM, bạn có thể quản lý style cho các...

Hiệu ứng trên web và tác động đến hiệu năng thiết bị

02/10/2025 0 33 7 phút đọc

Hiệu ứng hình ảnh trên trang web là yếu tố quan trọng trong việc tạo trải nghiệm trực quan hấp dẫn cho người dùng. Tuy nhiên, nếu lạm dụng hoặc triển khai không đúng cách,...

Tại sao HTML5 “picture” và “source” là chìa khóa để tối ưu responsive image

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

Trong thiết kế web hiện đại, hình ảnh chiếm phần lớn dung lượng tải trang. Nếu không tối ưu, chúng có thể khiến website chậm chạp, ảnh hưởng trực tiếp đến trải nghiệm người dùng...

Closure trong JavaScript: Đơn giản hơn bạn nghĩ

26/09/2025 0 6 6 phút đọc

Closure nghe có vẻ hàn lâm, nhưng thực chất chỉ là khả năng một hàm “nhớ” môi trường nơi nó được tạo ra. Nhờ đó, bạn có thể giữ trạng thái riêng tư, viết API...

CSS Houdini: Khi dev có thể hack vào engine của trình duyệt

24/09/2025 0 6 4 phút đọc

Trong nhiều năm, CSS thường bị coi là “ngôn ngữ trang điểm” – mạnh nhưng giới hạn. Nếu trình duyệt không hỗ trợ thuộc tính nào đó, lập trình viên gần như bó tay hoặc...

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...

Has() selector: CSS giờ đã có parent selector

22/09/2025 0 6 4 phút đọc

:has() là relational pseudo-class cho phép chọn một phần tử dựa trên những gì nó chứa hoặc đứng kề. Nói nôm na, đây là “parent selector” mà cộng đồng chờ đợi nhiều năm: bạn có...

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....

Modern Object Cache trong WordPress: Redis Cluster, Relay & APCu Hybrid

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

Object Cache là một trong những kỹ thuật tăng tốc WordPress quan trọng nhất. Thay vì query MySQL lặp đi lặp lại, WordPress có thể lưu kết quả trong bộ nhớ (Redis, Memcached, APCu…) và...

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...

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...

Card 3D Hover Effect bằng CSS Perspective: Hiệu ứng nghiêng theo chuột mượt mà

12/09/2025 0 26 5 phút đọc

Demo

Hiệu ứng 3D hover giúp thẻ nội dung nghiêng nhẹ theo vị trí con trỏ chuột, tạo cảm giác chiều sâu và tương tác cao. Bài viết này hướng dẫn bạn xây dựng Card 3D...

Loading Skeleton: Giả lập nội dung như Facebook bằng HTML, CSS và JS

12/09/2025 0 15 4 phút đọc

Demo

Loading Skeleton là kỹ thuật hiển thị khung xám mô phỏng nội dung trong lúc dữ liệu thật đang tải về. Thay vì vòng xoay chờ, skeleton giữ nguyên bố cục, giúp người dùng cảm...

Giải thích đơn giản: async/await vs Promise trong JavaScript

10/09/2025 0 11 4 phút đọc

Demo

Promise và async/await là hai cách tiếp cận để xử lý bất đồng bộ trong JS. Về bản chất, async/await chỉ là cú pháp “đường tắt” (syntactic sugar) của Promise, giúp code dễ đọc hơn....

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ự...

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ợ...

Canvas API: Vẽ đồng hồ kim động bằng HTML5 Canvas

09/09/2025 0 21 5 phút đọc

Demo

Canvas API cho phép bạn vẽ đồ họa 2D ngay trong trình duyệt, từ hình cơ bản, biểu đồ, đến game mini. Bài này mình sẽ dựng một đồng hồ kim analog chạy thời gian...