Release Notes for Safari Technology Preview 251

animation-trigger

Trước đây, việc bắt đầu animation CSS thường phụ thuộc vào JavaScript hoặc các lớp giả như :hover, làm tăng độ phức tạp mã và tốn tài nguyên main thread. Thuộc tính mới animation-trigger cho phép xác định một sự kiện — ví dụ: phần tử vào viewport hoặc thay đổi thuộc tính dữ liệu — làm “trigger” để animation chỉ bắt đầu khi điều kiện đó thành true. Khi sử dụng animation-trigger, trình duyệt có thể lên lịch animation mà không cần lắng nghe sự kiện JS, giảmภาระ main thread và cải thiện FPS, đặc biệt trên thiết bị có hiệu năng hạn chế. Điều đáng học là nếu dự án của bạn cần khởi tạo animation dựa trên trạng thái DOM mà không muốn viết thêm mã JavaScript, animation-trigger cung cấp cách khai báo và hiệu quả hơn, nhưng cần kiểm tra mức độ hỗ trợ của trình duyệt hiện tại (Chrome 115+, Firefox 118+, Safari chưa triển khai). Do đó, trước khi quyết định đọc bài gốc, hãy cân nhắc mức độ quan trọng của việc giảm phụ thuộc JS và khả năng hỗ trợ trình duyệt trong môi trường sản phẩm của bạn.

Tìm hiểu CSS animation-trigger giúp bạn kiểm soát chính xác thời điểm khởi chạy animation, nâng cao trải nghiệm người dùng.

Node.js — Node.js 26.8.0 (Current)

Phiên bản Node.js 26.8.0 (Current) được ra mắt như một môi trường chạy JavaScript miễn phí, mã nguồn mở và đa nền tảng. Nó được xây dựng trên motore V8 của Chrome và cung cấp API non‑blocking I/O, cho phép xử lý đồng thời nhiều kết nối mà không cần luồng bổ sung. Nhờ đó, các lập trình viên có thể xây dựng máy chủ HTTP, ứng dụng web, công cụ dòng lệnh và script chỉ bằng một ngôn ngữ JavaScript, giảm chi phí chuyển đổi ngữ cảnh giữa frontend và backend. Việc chọn Node.js 26.8.0 nghĩa là bạn nhận được một runtime ổn định, hỗ trợ các tính năng ES2023 mới nhất và có hệ thống package npm phong phú, giúp tăng tốc độ phát triển và duy trì mã nguồn. Ngoài ra, khả năng chạy trên Windows, macOS và Linux mà không thay đổi mã nguồn làm cho việc triển khai ứng dụng trở nên đơn giản và nhất quán.

Lập trình viên nên đọc bài này để cập nhật những tính năng và cải tiến mới nhất trong phiên bản Node.js 26.8.0.

pnpm 11.24

Phiên bản pnpm 11.24 được ra mắt sau khi các tính năng liên quan đến cài đặt toàn cầu bị gỡ bỏ trong pnpm 11.0. Nó hồi phục lệnh pnpm approve-builds --global, cho phép duyệt và cho phép các bản build toàn cầu mà không bị cô lập như trước. Đồng thời, tính năng publish đệ quy được thay đổi để gom nhóm các gói theo registry, từ đó phát hiện sớm sự không khớp về thông tin đăng nhập trước khi bất kỳ gói nào được push lên. Ngoài ra, cờ --frozen-lockfile không còn gây lỗi khi phiên bản pnpm hiện tại khác với phiên bản được khóa trong lockfile, giúp các quy trình CI ổn định hơn. Điều này giúp các nhóm phát triển tránh lỗi publish do credential và giảm sự phụ thuộc vào phiên bản pnpm cụ thể khi khóa lockfile.

Bài viết này giúp bạn cập nhật những cải tiến quan trọng về quản lý global package và xuất bản batch trong pnpm 11.24.

Node.js — Node.js 24.20.0 (LTS)

Node.js 24.20.0 là phiên bản LTS mới nhất của môi trường chạy JavaScript đa nền tảng, miễn phí và mã nguồn mở. Nó cho phép các nhà phát triển viết mã JavaScript để xây dựng máy chủ, ứng dụng web, công cụ dòng lệnh và script mà không cần phụ thuộc vào trình duyệt. Với bản phát hành này, Node.js tiếp tục hỗ trợ các tính năng ES2023 và cải thiện hiệu suất V8, giúp giảm latency trong các dịch vụ I/O mạnh. Sự ổn định của chuỗi LTS đảm bảo rằng các ứng dụng sản xuất nhận được bản vá bảo mật và cập nhật tối thiểu trong vòng 30 tháng, giảmภาระ bảo trì. Do đó, khi quyết định sử dụng Node.js cho dự án backend, chọn phiên bản 24.20.0 LTS là cách để cân bằng giữa tính năng mới và hỗ trợ dài hạn.

Bài viết cập nhật Node.js 24.20.0 (LTS) giúp lập trình viên nắm bắt những cải tiến và tối ưu hóa mới nhất cho ứng dụng JavaScript của mình.

I still like writing websites by hand

Tác giả từng hand‑code một trang web cho Alex vào năm 2020, sau khi họ quen nhau từ năm …

Scroll-driven CSS animations

Bài viết giới thiệu cách tạo hoạt ảnh dựa trên vị trí cuộn mà không cần JavaScript bằng …

Moving Around a Grid and Respecting Boundaries

Bài viết giải thích cách di chuyển một đối tượng trên lưới hai chiều trong JavaScript bằng cách cập nhật tọa độ x và y dựa trên đầu vào của người dùng. Nguyên nhân kỹ thuật là mỗi khi nhận được lệnh di chuyển, code trước tiên tính toán vị trí mới rồi so sánh với giới hạn của lưới (0 ≤ x < width và 0 ≤ y < height) để quyết định có chấp nhận hay từ chối thao tác. Nếu vị trí mới vượt ra ngoài biên, hàm sẽ bỏ qua cập nhật và giữ đối tượng ở vị trí hiện tại, tránh lỗi truy cập ngoài mảng hoặc hiển thị bị cắt. Hệ quả là đối tượng luôn permanec trong khu vực hiển thị, giảm nguy cơ lỗi runtime và cải thiện trải nghiệm người dùng khi tương tác với lưới. Điều đáng học là luôn thực hiện kiểm tra ranh giới trước khi thay đổi trạng thái, có thể đóng gói logic này vào hàm reusable như moveIfValid(x, y, dx, dy, width, height) hoặc sử dụng Math.min/Math.max để clamp giá trị.

Để nắm vững cách di chuyển đối tượng trên lưới và tránh vi phạm ranh giới an toàn.

The Future of CSS: Target Multiple Classes with the Class Prefix Selector

CSS sắp bổ sung bộ chọn Class Prefix Selector (.prefix-*) cho phép nhắm mục tiêu tất cả …