#dom

Can’t touch the DOM? Reach for :has() to style any element

Thư viện component bên thứ ba thường hạn chế tùy chỉnh style, nhưng CSS pseudo-selector :has() giúp vượt qua rào cản này bằng cách cho phép style linh hoạt mà không cần JavaScript.

Lập trình viên nên đọc bài này để khám phá cách sử dụng :has() để tận dụng CSS để điều chỉnh phong cách các thành phần bên thứ ba mà không cần phụ thuộc vào JavaScript, giúp tối ưu hóa hiệu suất và giảm phụ thuộc vào thư viện bên ngoài.

How to Make a Static HTML Page Editable in the Browser with Vanilla JavaScript

Cách biến trang HTML tĩnh thành có thể chỉnh sửa trực tiếp trong trình duyệt bằng JavaScript thuần, giúp đơn giản hóa quy trình cập nhật nội dung như sơ yếu lý lịch hay menu.

Lập trình viên nên đọc bài này để khám phá cách tự động hóa và tối ưu hóa quá trình chỉnh sửa nội dung HTML đơn giản bằng JavaScript nguyên sinh, giúp tiết kiệm thời gian và tránh rắc rối khi phát triển các trang tĩnh cần tương tác người dùng.

css custom highlight api javascript Tutorial

Learn how to build high-performance syntax highlighting without wrapper DOM elements using the CSS Custom Highlight API JavaScript interfaces and Range objects.

The Intersection Observer API

Bài viết hướng dẫn chi tiết về Intersection Observer API, bao gồm các khái niệm như entries, thresholds, rootMargin, kỹ thuật lazy loading, infinite scroll, scrollspy, theo dõi visibility, cùng những lỗi thường gặp. API này giúp tối ưu hiệu suất khi xử lý sự kiện cuộn trang.

Một lập trình viên nên đọc bài này để hiểu cách sử dụng Intersection Observer API hiệu quả để tối ưu hóa hiệu suất, quản lý các thành phần scroll, và tránh những lỗi thường gặp khi triển khai lazy loading hoặc scrollspy.

Understanding React Internals (Part 1): From the Browser to React — Why React Exists

Bài viết giới thiệu về cơ chế hoạt động bên trong của React, giải thích lý do tồn tại của thư viện này thông qua quá trình từ trình duyệt đến React. Tác giả chia sẻ kinh nghiệm sử dụng React trong hai năm và nhấn mạnh tầm quan trọng của việc hiểu internals.

Nếu bạn đang làm việc với React nhưng chưa hiểu cơ chế hoạt động sâu bên trong từ trình duyệt đến thư viện, bài này sẽ giúp bạn hiểu rõ hơn về cách React tạo hiệu suất và tính linh hoạt cho ứng dụng của mình.

Recreating Stimulus: how data-controller works under the hood

Learn about ES6 classes, Maps, MutationObserver and WeakMaps by building Stimulus' controller system from scratch.

From Code to Pixels: The Rendering Pipeline

Bài viết giải thích quy trình rendering pipeline của trình duyệt, từ lúc nhận dữ liệu mạng đến khi hiển thị pixel trên màn hình. Nó tập trung vào cách trình duyệt biến đổi dữ liệu thành hình ảnh người dùng nhìn thấy.

Lập trình viên web nên đọc bài này để hiểu rõ cách máy tính chuyển đổi dữ liệu từ mã nguồn thành hình ảnh thực tế trên màn hình, giúp tối ưu hóa hiệu suất, thiết kế UI hiệu quả và debug nhanh các vấn đề liên quan đến giao diện.