Đã đăng vào Thứ Năm, 2:51 SA 3 phút đọc

10 Mẹo Web Dev mà ngay cả Dev kỳ cựu cũng thường bỏ lỡ

Bạn nghĩ mình đã biết hết về phát triển web? Nghĩ lại đi. Hầu hết lập trình viên — kể cả những người có kinh nghiệm — đều bỏ lỡ những mẹo đơn giản nhưng mạnh mẽ có thể tăng hiệu suất, giảm bug, và giúp dự án của bạn trơn tru hơn bao giờ hết.

Từ những điều ít ai để ý trong JavaScript đến các API của trình duyệt và "phép thuật" CSS bị lãng quên, chúng ta sẽ khám phá 10 mẹo lập trình web mà hầu như dev nào cũng không biết.

1. `:has()` trong CSS

Cái bộ chọn cha huyền thoại mà ta từng mơ đến? Giờ thì có rồi.

article:has(h1) {
  border: 2px solid lime;
}

Giờ bạn có thể style phần tử cha dựa vào con của nó! Tạm biệt các đoạn JavaScript rối rắm. Trình duyệt hiện đại đang dần hỗ trợ, hãy để mắt tới nhé.

2. Web Share API – Chia sẻ gốc, không cần plugin

Muốn người dùng chia sẻ bài viết hoặc sản phẩm mà không cần nút chia sẻ lằng nhằng?

navigator.share({
  title: 'Check this out!',
  url: window.location.href
});

Thế là xong! Hỗ trợ trên hầu hết trình duyệt di động và giúp app của bạn trông như app native.

3. AbortController – Hủy fetch request như dân chuyên

Bạn có biết có thể hủy một request fetch()? Nhiều dev không biết đâu. Dưới đây là cách làm:

const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });
// cancel it if needed
controller.abort();

Không còn rò rỉ bộ nhớ hay spinner treo mãi. Xịn chưa?

4. `prefers-color-scheme` – Dark Mode thông minh

Cho người dùng tự chọn dark mode – hoàn toàn tự động:

@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}

Không cần JavaScript. CSS sạch sẽ.

5. HTTP Headers – Những thứ bạn nên quan tâm

Bạn biết Content-Type, nhưng còn Permissions-Policy thì sao?

Permissions-Policy: geolocation=(), camera=()

Kiểm soát tốt hơn quyền truy cập app — đây là cú đấm mạnh về bảo mật.

6. Custom Events – Giao tiếp giữa components mà không cần framework

Bỏ qua Redux hoặc những logic phức tạp. Dùng CustomEvent gốc:

const event = new CustomEvent('userLoggedIn', { detail: { id: 42 } });
window.dispatchEvent(event);

Rồi lắng nghe ở bất kỳ đâu trong app. Rất modular và gọn gàng.

7. Clipboard API – Sao chép mà không cần mánh

Bỏ qua textarea ẩn và .execCommand() lỗi thời:

navigator.clipboard.writeText('Copied!')

Gọn gàng. Đơn giản. Và hoạt động tốt trên hầu hết trình duyệt hiện đại.

8. Intersection Observer – Ưu việt hơn scroll event

Muốn kích hoạt gì đó khi phần tử vào tầm nhìn (ví dụ lazy load, animation)? Đừng dùng scroll event — nặng lắm.

const observer = new IntersectionObserver(callback);
observer.observe(document.querySelector('#myElement'));

Tối ưu hiệu suất và UX.

9. Preload + Preconnect – Tăng tốc "vô hình"

Cải thiện tốc độ load mà không phải sửa JS hay CSS. Chỉ cần thêm vào <head>:

<link rel="preload" href="/styles.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">

Những dòng nhỏ, nhưng mang lại hiệu quả lớn.

10. `structuredClone()` – Deep Clone "chuẩn bài" mà không cần JSON hack

Không cần JSON.parse(JSON.stringify(obj)) nữa – vì cách đó không clone được function, Date...

Giờ đây chỉ cần:

const deepCopy = structuredClone(originalObject);

Hy vọng những thủ thuật trên sẽ giúp ích cho các bạn trong con đường lập trình của mình!

development

1. :has() trong CSS