Có gì hot? Tuần 34 - 2023

Học gì trong tuần: yarn install --ignore-engines

Chuyện là dự án của mình cần cài thêm một thư viện nọ. Cài đặt xong chạy thử ở máy mình ngon lành, đến lúc gửi PR lên Github thì tự nhiên không cài được nữa. Dính ngay cái lỗi này:

The engine “node” is incompatible with this module. Expected version “^18 || ^20”. Got “16.20.2”

Hóa ra là do ở local mình xài Node.js v18, trong khi trên Github Actions thì mấy anh lại chỉ đang cài ở v16 thôi. Giờ phải làm sao hè?

Nếu xài Yarn 1, bạn có thể dùng cờ --ignore-engines khi chạy yarn install. Cờ này sẽ bỏ qua thuộc tính engine bên trong package.json và cứ cài đặt mặc kệ đời. Ngoài ra Yarn 1 còn có:

• --ignore-scripts: Cái này thì rõ ràng rồi, không chạy post- và pre-scripts.
• --ignore-platform: Không quan tâm thuộc tính os quy định về hệ điều hành trong package.json.
• --ignore-optional: Không quan tâm các gói tùy chọn.

So với npm và pnpm thì cả hai chỉ có --ignore-scripts và --no-optional mà thôi.

Một chuyện khác không liên quan là mình mới biết từ npm v6.14.18 có lệnh npm install-ci-test hay npm cit để cài đặt và chạy test trên CI. Ngoài ra còn có npm install-test hay npm it để cài đặt và chạy test ngay lập tức.

Tin vắn

• Moonbit ra mắt, giới thiệu một ngôn ngữ mới để phát triển ứng dụng Web Assembly. Moonbit hướng đến xây dựng một ngôn ngữ dễ học, dễ dùng, tốc độ biên dịch và thực thi nhanh. So với Rust/ C++, Moonbit đơn giản hơn, và tập tin wasm lại có hiệu năng cao hơn so với kết quả từ Golang. Đằng sau Moonbit là Hongbo Zhang, từng trong nhóm phát triển của ReScript (tên cũ ReasonML/BuckleScript).

• Mozilla Firefox qua mặt Google Chrome trong bài kiểm tra hiệu năng SunSpider, nhưng lại “hửi khói” khi chạy thử với JetStream.

• Một diễn biến khác, Google Chrome sẽ tự động chuyển tất cả trang web sang https://, ngay cả khi click vào một link bắt đầu bằng http://. Thay đổi này đang được thử nghiệm trong Chrome 115 và sẽ có mặt trong các phiên bản sau.

• Safari Technology Preview 177 có vẻ như sẽ mang đến Popover API, giúp tạo tooltips, popup, popover, v.v. ngay trong trình duyệt.

Mới thấy trên quầy

Một vài thư viện/ công cụ hữu ích mà bọn mình mới phát hiện 😛

• peterldowns/localias: Hơi bị xịn luôn, giúp bạn trỏ domain giống như frontend.test về một server đang chạy ở localhost, ví dụ như localhost:3000. Hỗ trợ HTTPS, CORS.

• pintariching/rustle: Hưởng ứng phong trào “nhà nhà xài Rút”, đây là compiler cho Svelte được viết bằng 🦀. Xài được hay không thì mình hông biết nhưng xem để tham khảo cũng được.

• barbajs/barba: 7kb gzipped gọn nhẹ giúp bạn tạo hiệu ứng chuyển động giữa các trang trong web.

• edmundhung/conform: Một thư viện nữa để xử lý form dành cho Remix và React Router.

• fkhadra/react-toastify: Thư viện để tạo toasts/ alerts/ notifications cho React. Hỗ trợ dark/ light/ color mode, gọn nhẹ dễ sử dụng và tùy chỉnh.

Đọc/ xem gì cuối tuần

• The ideal viewport doesn’t exist: Set Studio tổng kết từ 120 000 điểm dữ liệu và kết luận rất khó để có một viewport lý tưởng. Nhân tiện thì viewport là kích thước của trình duyệt, không phải là kích thước của màn hình.

• How we reduced the size of our JavaScript bundles by 33%: Dropbox vừa lên một bài về sử dụng Rollup để chia nhỏ và đóng gói ứng dụng web. Đọc bài này xong mình mới biết về web framework Edison cũng do Dropbox phát triển.

• Patterns for Reactivity with Modern Vanilla JavaScript: Marc Grabanski giới thiệu những cách để cài đặt reactivity bằng JavaScript thông qua các mẫu lập trình như PubSub, Observer, v.v. Bài khá dài nhưng rất chi tiết và nên đọc.

• Use web components for what they’re good at: Nolan Lawson chia sẻ kinh nghiệm sau vài năm làm việc với Web Components. Có một ý khá hay là các doanh nghiệp lớn thường chọn Web Components vì tính ổn định của nó, trong khi các công ty nhỏ hơn hay start-ups thì thích đu trend với các frameworks mới.

• The New CSS Math: round(): Dan Wilson giới thiệu về hàm round() trong CSS. Tiếc là ngoài Safari ra chưa có trình duyệt nào hỗ trợ hàm này.

Kết

Hẹn gặp lại các bạn trong tuần tiếp theo 👋