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

Chrome hỗ trợ WebGPU bắt đầu từ phiên bản 113

Google vừa thông báo giới thiệu WebGPU cho trình duyệt Chrome từ phiên bản 113. Được phát triển từ năm 2017 với sự hợp tác của các nhân viên đến từ Mozilla, Apple, Intel, và Microsoft, WebGPU là tập hợp những API mới tận dụng sức mạnh của các phần cứng hiện đại, cho phép ứng dụng web thực hiện render và tính toán tương tự như Direct3D 12, Metal, hay Vulkan.

So với WebGL, WebGPU ưu tiên hỗ trợ tính toán bằng GPU ngay từ đầu, giúp việc xây dựng các ứng dụng machine learning hay AI dễ dàng hơn. Không giống như WebGL là một wrapper của OpenGL, WebGPU tự thiết kế các lớp trừu tượng riêng, thân thiện với môi trường web, hỗ trợ Promises, đồng thời cung cấp thông báo lỗi rõ ràng, cụ thể.

Một vài ví dụ để dùng WebGPU như là:

• Nâng cấp hiệu năng của các thư viện như Babylon.js hay Three.js, đem đến những kỹ thuật render mới, đồng thời chuyển các tính toán nặng nề từ CPU sang GPU.

• Chuyển các game engine sang nền web, đồng thời cho phép chúng thực hiện những kỹ thuật render cao cấp hơn. Ví dụ cụ thể là khi xuất bản game làm bằng Unity lên WebGL, các thông số kỹ thuật thường được đặt ở mức thấp. Với WebGPU chúng ta có thể nâng lên những thiết lập cao hơn.

• Những ứng dụng nặng về tính toán như machine learning hay VR/AR có thể chuyển sang dùng GPU thay vì CPU như trước.

• Cải thiện các ứng dụng gọi điện từ xa. Chẳng hạn như Google Meet dùng ML để tách hình người dùng ra khỏi phông nền. Bằng cách sử dụng WebGPU, tính năng này có thể chạy nhanh và ít tốn năng lượng hơn, cho phép Google Meet (1) có thể chạy trên những thiết bị phổ thông (2) sử dụng những model phức tạp và đáng tin cậy.

Để tìm hiểu thêm về WebGPU, đừng quên xem qua tài liệu trên MDN hoặc WebGPU Explainer. Hiện tại bạn có thể dùng WebGPU trong Chrome 113 chạy trên các hệ điều hành ChromeOS, macOS, và Windows. Các nền tảng khác như Linux và Android sẽ được hỗ trợ cuối năm nay. Firefox và Safari cũng đang thực hiện cài đặt WebGPU cho trình duyệt của mình.

#TIL: Thuộc tính valueAsNumber và valueAsDate của thẻ <input>

Trước giờ cứ nghĩ đây là hai tính năng riêng của react-hook-form nhưng hóa ra hai thuộc tính này được trình duyệt hỗ trợ sẵn luôn.

Đại loại là valueAsNumber giống như vầy:

<input id="js-input" type="number" value="4" />

const input = document.getElementById('js-input')
console.log(input.value) // (string) '4'
console.log(input.valueAsNumber) // (number) 4

Theo đặc tả HTML thì input[type=number | range] sẽ trả về giá trị số, với input[type=datetime | date | month | week | time | datetime-local] thì giá trị sẽ được chuyển qua Date rồi đổi thành Unix timestamps ở milliseconds, còn với các input khác sẽ luôn trả về NaN.

valueAsDate cũng tương tự, nhưng kết quả sẽ là một đối tượng Date.

<input id="js-input" type="date" value="2022-02-01" />

const input = document.getElementById('js-input')
console.log(input.value) // (string) "2022-02-01"
console.log(input.valueAsNumber) // (number) 1643673600000
console.log(input.valueAsDate) // [object Date] Tue Feb 01 2022 02:00:00 GMT+0200 (Eastern European Standard Time)

Nói chung cũng tiện 😃

Tin vắn

• Directus vừa thông báo sẽ không tiếp tục cung cấp gói Community Cloud, a.k.a “đồ chùa”, nữa. Lý do thì không gì khác hơn ngoài chuyện tiền nong. Nếu bạn chưa biết, Directus hay được xài như headless CMS, gắn lên trên một cơ sở dữ liệu nào đó như PostgreSQL hay MySQL, và bùm, bạn có ngay REST/ GraphQL API để tha hồ chơi đùa.

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 😛

• system-fonts/modern-font-stacks: Bạn đã biết sử dụng font hệ thống app nhanh hơn? Repo này sử dụng những font có sẵn trong hệ điều hành để tạo thành từng stack theo phong cách khác nhau, giúp bạn dễ chọn font hơn nữa.

• nanostores/nanostores: nanostores cũng lâu rồi nhưng bữa nay mình giới thiệu lại 😝 Đây là một thư viện quản lý trạng trái không phụ thuộc vào framework, nhỏ gọn, lại hỗ trợ TypeScript.

• studio-freight/lenis: Smooth scrolling siêu nhẹ luôn, chỉ có 3.4KB gzipped.

• ellegantcss/ellegant: Một framework CSS cung cấp các components như Toggler, Switcher, Menu, Modal, v.v. chỉ bằng CSS thuần mà không dùng JavaScript.

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

• Build in-browser WordPress experiences with WordPress Playground and WebAssembly: Bạn có thể xài thử Wordpress (hay chạy PHP) ngay trên trình duyệt mà không cần cài đặt, tất cả là nhờ Wasm 🤯? Cùng nghía qua Wordpress Playround và xem nhóm phát triển học được gì khi xây dựng ứng dụng này.

• Modern HTML email (tables no longer required): Làm web responsive đã khó, làm email template còn khó hơn nhiều vì bao nhiêu là chương trình đọc email. Nghía qua thử bài viết của Ollie Williams để xem những cách làm email template mới nhe.

• On Endings: Why & How We Retired Elm at Culture Amp: Elm là ngôn ngữ lập trình giống giống với Haskell nhưng dành cho frontend, và nhận được rất nhiều lời khen ngợi vì trải nghiệm lập trình viên tốt. Thế nhưng vấn đề với Elm lại nằm ở cộng đồng.

• Rust-like error handling in TypeScript: Vừa TypeScript vừa Rust 🦀, còn gì thời thượng hơn.

• Slow and Steady: Converting Sentry’s Entire Frontend to TypeScript: Chia sẻ của nhóm phát triển Sentry khi đổi 1000+ tập tin sang TypeScript.

Kết

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