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

Có gì mới trong Safari 17 Beta?

Trong sự kiện WWDC23 vừa qua, Apple đã hé lộ những tính năng mới của Safari phiên bản 17 beta trên hệ điều hành macOS Sonoma. Cùng xem qua nhé.

Nổi bật nhất là khả năng “cài đặt” bất kỳ web app nào vào Dock thông qua menu File > Add to Dock. Web sau khi thêm vào sẽ được hệ điều hành hỗ trợ đầy đủ như những ứng dụng khác: có thể mở bằng Spotlight Search hay Launchpad, có thể sử dụng camera, microphone hay location nếu được cho phép, tự động điền mật khẩu từ iCloud Keychain hay ứng dụng thứ ba có sử dụng Credential Provider Extension API, gửi tin nhắn thông báo thông qua Web Push API. Safari sẽ tự động sao chép cookies (và chỉ cookies) của website khi nó được thêm vào Dock, giúp người dùng vẫn giữ trạng thái đăng nhập. Thomas Steiner có một bài viết giới thiệu qua tính năng này.

Với sự xuất hiện của Vision Pro, Safari cũng hỗ trợ thẻ HTML <model> để hiển thị các mẫu 3D. Cách sử dụng cũng tương tự như <img> hay <video> khi bạn đưa vào đường dẫn đến tập tin mẫu 3D thông qua thẻ <source>. <model> cũng có thêm thuộc tính interactive, cho biết người dùng có thể tương tác (“xoay qua xoay lại”) mẫu 3D hay không. Đi cùng với thẻ <model> là WebXR. Đây là công nghệ dựa trên WebGL, giúp bạn xây dựng ứng dụng web để người dùng “đắm chìm” trong không gian ảo.

Safari 17 hỗ trợ hai định dạng ảnh mới: JPEG XL và HEIC. JPEG XL sử dụng thuật toán “Modular Entropy Coding”, giúp cân bằng giữa chất lượng và kích thước ảnh. Theo đánh giá của Apple, hình JPEG XL có thể giảm tới 60% so với định dạng JPEG cũ. Trong khi đó, HEIC là định dạng rất thường gặp với hình chụp bằng điện thoại iPhone. Phiên bản này cũng mang đến những cải tiến khi làm việc với video: Managed Media Source API giúp lựa chọn định dạng video tốt nhất dựa vào điều kiện kết nối của người dùng, hỗ trợ USB camera trên iPadOS, nâng cấp WebRTC, v.v.

Về HTML, chúng ta sẽ có Popover API trong Safari 17. Đây sẽ là nền tảng để cài đặt overlay, popup, popover, hay dialog trong trang web. Safari 17 cũng cho phép sử dụng thẻ <hr> bên trong <select> giúp phân biệt giữa các lựa chọn dễ dàng hơn. Những cải tiến khác bao gồm thẻ <menu> được gán role=list, và cập nhật thêm cho a11y.

Về CSS, những tính năng mới bao gồm:

• Thêm hàm image-set() để chỉ định nhiều lựa chọn ảnh tùy thuộc vào độ phân giải hay khả năng hỗ trợ của trình duyệt.

• Hỗ trợ sử dụng list-style tùy chỉnh thông qua @counter-style

• Nâng cấp thuộc tính font-size-adjust, hỗ trợ giá trị from-font và cú pháp hai giá trị. Ngoài ra cũng hỗ trợ thuộc tính size-adjust khi khai báo @font-face. Bạn cũng có thể dùng @supports font-tech() hoặc @supports font-format() để kiểm tra trình duyệt có hỗ trợ một số công nghệ font mới, ví dụ như font màu (color fonts), hay không.

• Giới thiệu hai giá trị mới cho text-transform: full-width chuyển tất cả ký tự cho có độ dài bằng nhau, ứng dụng khi làm việc với tiếng Trung, Hàn, Nhật; full-size-kana là giá trị dành riêng cho chữ Kana trong tiếng Nhật.

• Hỗ trợ thêm Media Queries 4: @media (overflow-block: none | scroll | paged) và @media (overflow-inline: one | scroll)

• Và còn nhiều nữa

Về JavaScript và Web API, chúng ta có:

• Storage API: nâng giới hạn dung lượng của từng domain lên hơn 1GB. Chúng ta có thể kiểm tra quota bằng cách gọi await navigator.storage.estimate().

• Hai tính năng mới cho RegEx: “v flag with set notation + properties of strings” và “RegExp duplicate named capture groups” (xin lỗi mình làm biếng dịch quá, với lại cũng chưa hiểu lắm hai cái này là gì 😓).

• Rất nhiều phương thức mới cho Set: intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf(), isDisjointFrom().

• Thêm phương thức URL.canParse(tentativeURL, optionalBase) để kiểm tra một URL có hợp lệ không. Ngoài ra mở rộng tính năng cho hai phương thức has() và delete() của URLSearchParams.

• Hỗ trợ 3D context cho Offscreen Canvas, ngoài ra còn có Gamepad API 🕹️

Ngoài ra còn những thay đổi khác liên quan đến Developer Tool, bảo mật, hay tính năng của trình duyệt mà bạn có thể đọc thêm ở đây.

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 😛

• kaleidawave/ezno: Chương trình kiểm tra kiểu dữ liệu (type checker) dành cho JavaScript và viết bằng Rust. Không tương thích 100% với TypeScript đâu nha.

• Scroll-driven Animations: Giới thiệu về tính năng tạo chuyển động dựa vào sự kiện cuộn trang, cùng với rất nhiều demo. Vì đang là tính năng thử nghiệm nên bạn cần dùng Chrome 115 mới xem được.

• lume.land: Công cụ tạo website tĩnh bằng Deno 😳 Hỗ trợ Markdown, Nunjucks, Liquid, hay bất cứ template engine nào. Nhìn cũng khá đơn giản nhưng hơi ít tính năng.

• Starlight by Astro: Giúp bạn tạo trang documentation nhanh gọn lẹ bằng Astro. Tính năng đính kèm bao gồm tạo phần điều hướng, đa ngôn ngữ, hỗ trợ SEO, dark mode, code highlight, v.v. Hiện vẫn đang phát triển nhưng cũng đang nghía qua.

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

• Is React Having An Angular.js Moment?: François Zaninotto gợi nhớ lại khoảnh khắc khi Angular 2 tách ra khỏi Angular.js thành…Angular, chia cộng đồng ra làm hai vì hai phiên bản này không tương thích nhau. Liệu điều tương tự có diễn ra khi React sắp ra mắt Server Component hông?

• The origin private file system: Bài viết mới nhất trên web.dev giới thiệu về Origin Private File System (OPFS), một “ổ cứng ảo” để tạo thư mục và tập tin dành riêng cho từng domain.

• Be Careful Using ‘Menu’: Từ “menu” khi viết HTML có thể mang nhiều ý nghĩa khác nhau: là thẻ <menu>, hay <select>, hay ARIA combobox hoặc autocomplete. Đọc qua để biết và chọn đúng thuật ngữ nha.

• 300ms Faster: Reducing Wikipedia’s Total Blocking Time: Nicholas Ray chia sẻ kinh nghiệm khi giảm TBT của trang Wikimedia mobile bằng cách dọn dẹp bớt JavaScript.

• 📚 Your first WebGPU app: là khóa học dài 69 phút của Google Developers, giới thiệu căn bản về WebGPU.

Kết

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