Bộ Web Dev Toolbox mà không ai nói cho bạn biết

Ai cũng đang nói về React, Tailwind, hay các trợ lý viết code AI... nhưng lại chẳng ai nhắc đến những API trình duyệt và công cụ lập trình đã được tích hợp sẵn – và lại còn cực kỳ ít người sử dụng.

Nếu bạn lập trình mà không dùng mấy thứ này, bạn đang tốn công sức cho kết quả tệ hơn — ai lại muốn vậy?

Để tôi chỉ cho bạn thấy một số công cụ "ngủ quên" trong lập trình web hiện đại:

1. Navigator Clipboard API (Tạm biệt những nút copy lỗi thời)

Đừng dùng document.execCommand('copy') như đang sống ở năm 2008 nữa.

Hãy dùng cách này:

navigator.clipboard.writeText('Copied!');

Hầu hết trình duyệt hiện đại đều hỗ trợ. Gọn gàng hơn, đáng tin cậy hơn, và hỗ trợ bất đồng bộ (async)!

2. View Transitions API (Chuyển trang siêu mượt – Không cần framework)

Muốn chuyển trang hay chuyển component mượt như bơ?

🔥 Thử đoạn này:

document.startViewTransition(() => {
  // Change the DOM here
});

Hỗ trợ trên các trình duyệt nền Chromium. Bạn không cần dùng React để có hiệu ứng đẳng cấp như vậy.

3. Phát hiện bất ngờ: Tab Performance trong DevTools

Đa số dev chỉ quanh quẩn với tab Console hoặc Elements.

Nhưng tab Performance mới là nơi chứa kho báu thật sự.

Bạn có thể:

• Xem thời gian render
• Theo dõi thay đổi bố cục (layout shifts)
• Xác định chính xác các tác vụ chạy lâu (long tasks)

💡 Thành thạo tab này, bạn sẽ triệt tiêu độ trễ và cải thiện UX như dân chuyên nghiệp.

4. BroadcastChannel API – Giao tiếp giữa các tab dễ dàng

Muốn gửi dữ liệu giữa các tab đang mở?

const channel = new BroadcastChannel('app-data');
channel.postMessage({ type: 'UPDATE' });

Không cần localStorage polling hay mấy cách vòng vo — cái này nhanh, hiện đại, và cực kỳ bị đánh giá thấp.

5. Đừng quên Intl – Sức mạnh định dạng tích hợp sẵn

Tại sao phải cài thư viện để định dạng tiền tệ hay ngày tháng khi trình duyệt đã có?

new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(1999.99); // → "$1,999.99"

Hoặc định dạng ngày theo chuẩn địa phương. Tích hợp sẵn, siêu nhanh và chính xác bất ngờ.

6. CSS :has() Selector — Selector cha đã xuất hiện

Trước đây CSS không thể chọn phần tử cha dựa vào con. Giờ thì được rồi.

.card:has(img) {
  border: 1px solid lime;
}

Giờ bạn có thể style phần tử dựa vào phần tử con bên trong — như phép thuật vậy. Đã được hỗ trợ trong các trình duyệt hiện đại!

7. Không cần Backend: Dùng GitHub Issues như một CMS

Nghe kỳ quặc — nhưng mạnh mẽ. Dùng GitHub Issues + fetch để tạo blog hay CMS siêu nhẹ:

fetch('https://api.github.com/repos/yourname/yourrepo/issues')

Bạn sẽ nhận được markdown, tiêu đề, metadata — không cần cơ sở dữ liệu. Lý tưởng cho các side project.

8. CSS scroll-snap — Hiệu ứng cuộn kiểu TikTok

.scroll-container {
  scroll-snap-type: y mandatory;
}

.item {
  scroll-snap-align: start;
}

Các section dính cố định, carousel, slider — tất cả làm bằng CSS thuần, không cần JavaScript.

Hy vọng một số mẹo vặt hữu ích này sẽ giúp bạn tiến bộ hơn trong con đường lập trình!