Chris’ Corner: Web Components

Show keystrokes on a website with the <show-keystrokes> custom element

Đối với các nhà làm screencast và live demo, thành phần web mở nguồn <show-keystrokes> giúp hiển thị phím tắt và phím điều hướng ngay trên màn hình, giải quyết vấn đề các ứng dụng macOS bị chặn bởi chính sách bảo mật doanh nghiệp. Component này sử dụng Popover API và CSS Anchor Positioning để render ở lớp top-layer và theo dõi con trỏ, tự động đảo vị trí khi cần thiết. Với kích thước chỉ 1.9kB sau minify, <show-keystrokes> có thể nhúng qua một script tag và tự điều chỉnh nhãn phím modifier giữa macOS/Windows/Linux cùng theme sáng/tối. Đáng chú ý là dự án còn cung cấp bookmarklet và extension Chrome cho phép inject vào mọi site, kể cả những site có CSP strict.

Lập trình viên nên đọc bài này để tìm hiểu về thành phần web tùy chỉnh <show-keystrokes> giúp hiển thị phím tắt màn hình một cách linh hoạt cho các bài trình diễn và video hướng dẫn.

Malicious npm packages evade install-script defenses at runtime

Chiến dịch npm với package 'indexed-btree' cho thấy tấn công chuỗi cung ứng đang phát …

Out-of-Order HTML Streaming Moves from JS Frameworks into the Browser

Out-of-order HTML streaming, một kỹ thuật cho phép người dùng xem và tương tác với trang web trước khi nó tải hoàn toàn, đang di chuyển từ các framework JavaScript vào trình duyệt. Các trình duyệt hiện tại đang tích hợp tính năng này thông qua API như Speculation Rules API để thực hiện streaming nội dung hiệu quả hơn. Việc chuyển giao xử lý này giúp tăng tốc độ hiển thị trang web lên đến 40% so với cách truyền thống. Các lập trình viên nên tìm hiểu kỹ vì đây là bước tiến quan trọng trong việc tối ưu hóa hiệu năng web. Điều đáng học là cách browser tự động phân thứ tự nội dung mà không cần sự can thiệp của framework.

Lập trình viên nên đọc bài này để cập nhật về kỹ thuật Out-of-Order HTML Streaming đang chuyển từ framework JavaScript vào trình duyệt, giúp tăng tốc độ tải trang và cải thiện trải nghiệm người dùng.

pnpm 12.6

pnpm 12.6 giới tính tính năng tự động loại bỏ sự trùng lặp dependency và relocatable packages. Phiên bản này sử dụng thuật toán pnpm-lock.yaml để phát hiện các bản sao lưu của cùng một dependency trong node_modules. Hệ quả là kích thước bundle giảm đáng kể, ví dụ dự án với 100 dependency có thể chỉ chiếm 50MB thay vì 200MB như trước. Điều đáng học là cơ chế hoisting của pnpm 12.6 cho phép các package được tái sắp xếp mà không phá vỡ cấu trúc cây dependency. Phiên bản mới cũng hỗ trợ tốt hơn với workspace và monorepo, giúp lập trình viên quản lý code phức tạp hiệu quả hơn.

Phiên bản pnpm 12.6 tự động loại bỏ trùng lặp dependency và hỗ trợ tái định vị, giúp tối ưu hóa dự án và giảm thiểu dung lượng lưu trữ.

Issue #803: JavaScript desktop apps in under 10MB — JavaScript Weekly

Bối cảnh của vấn đề là kích thước ứng dụng desktop JavaScript thường quá lớn, vượt quá 10MB. Nguyên nhân kỹ thuật là do việc đóng gói các dependency như Node.js và các module của Electron làm tăng đáng kể kích thước ứng dụng. Hệ quả là người dùng phải mất nhiều thời gian tải xuống và tiêu tốn không gian lưu trữ trên thiết bị. Điều đáng học là các giải pháp như NW.js, GoJS hay sử dụng Bun giúp giảm kích thước xuống còn dưới 10MB bằng cách tối ưu hóa việc đóng gói và dependency management.

Bài viết này hướng dẫn tạo ứng dụng desktop JavaScript nhỏ gọn dưới 10MB, giúp tối ưu hóa hiệu năng và trải nghiệm người dùng.

Ship cleaner packages (without the ./dist or ./src folder) by publishing a subfolder to NPM

Để tránh lộ thư mục dist/ hoặc src/ trong các đường dẫn import công khai, kỹ thuật này hướng dẫn việc xuất bản chỉ nội dung thư mục build (như ./dist) lên NPM với tư cách là gốc package bằng lệnh npm publish ./dist. Phương pháp này đòi hỏi thư mục phải chứa package.json, README và LICENSE riêng, nên cần script postbuild để sao chép và điều chỉnh đường dẫn package.json. Các biện pháp phòng ngừa được đề xuất để tránh vô tình chạy npm publish thông thường, cùng với lệnh dry-run và npm pack để kiểm tra tarball trước khi xuất bản thực tế.

Phương pháp xuất bản chỉ thư mục build lên NPM giúp tránh rò rỉ thông tin triển khai và giữ cho package sạch sẽ.

ESLint v10.11.0 released

ESLint phiên bản 10.11.0 đã được phát hành, đây là công cụ linting có khả năng mở rộng và cấu hình để phát hiện và báo cáo các mẫu mã trong JavaScript. Phiên bản mới này tập trung vào cải thiện hiệu suất và trải nghiệm người dùng với các tính năng mới như auto-fix cho nhiều quy tắc phổ biến. ESLint giúp duy trì chất lượng code một cách dễ dàng nhờ hệ thống quy tắc linh hoạt và khả năng tùy chỉnh cao. Với hơn 50 quy tắc tích hợp sẵn và hỗ trợ plugins từ cộng đồng, ESLint trở thành công cụ không thể thiếu cho các dự án JavaScript quy mô lớn.

Lập trình viên nên đọc bài này để cập nhật các tính năng mới và cải tiến trong ESLint v10.11.0 giúp nâng cao chất lượng code JavaScript.