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

Có gì mới trong Safari 17?

Safari 17.0 dành cho iOS 17 và iPadOS 17 đang trong giai đoạn thử nghiệm công khai (public beta) trên các hệ điều hành macOS Ventura, Monterey, và Sonoma. Phiên bản này dự kiến sẽ được phát hành vào ngày 26 tháng 9 sắp tới.

Cùng xem qua những tính năng mới sẽ xuất hiện nhe.

Về HTML

• Hỗ trợ thẻ <search>: Safari 17 hỗ trợ thẻ HTML <search> dùng để đánh dấu một phần trong trang sẽ thực hiện tính năng tìm kiếm.. Hiện tại chỉ có Safari và Firefox 118 hỗ trợ thẻ này, nên bạn được khuyến khích dùng <search role="search"> để các trình duyệt khác vẫn có thể hiểu được.

• Hỗ trợ thuộc tính popover, cung cấp nền tảng để xây dựng các tính năng như overlay, popup, popover, và dialog. Một ví dụ đơn giản:

<button popovertarget="info-box" popovertargetaction="show">More info</button>

<article id="info-box" popover="auto">
  <h2>Additional Information</h2>
  <p>Here’s something I wanted to tell you.</p>
  <button popovertarget="info-box" popovertargetaction="hide">Close</button>
</article>

Bên cạnh đó chúng ta cũng có các JavaScript API mới: showPopover(), hidePopover(), và togglePopover() để tương tác với popover.

• Hỗ trợ sử dụng thẻ <hr> bên trong <select>: Bằng cách này bạn có thể tạo một đường gạch ngang để phân chia các lựa chọn bên trong thẻ <select>, giống như vầy:

<select>
  <option value="pizza">Pizza</option>
  <option value="hamburger">Hamburger</option>
  <hr />
  <option value="sushi">Ice cream</option>
  <option value="pasta">Cake</option>
</select>

Về CSS

• Cải thiện font-size-adjust: Thuộc tính này đã có mặt từ Safari 16.4, giúp giải quyết trường hợp kích thước font không đồng nhất khi kết hợp nhiều font khác nhau, chẳng hạn như sans serif với monospace, trong cùng một đoạn văn bản. font-size-adjust hoạt động bằng cách chỉnh x-height của các kí tự theo một tỉ lệ (ratio) được bạn quy định. Trong Safari 17, thay vì phải khai báo tỉ lệ đó, bạn có thể font-size-adjust: from-font để trình duyệt tự động tính toán dựa vào font chính đang được sử dụng và canh lại cho phù hợp. Ngoài ra font-size-adjust còn hỗ trợ cú pháp 2 giá trị:

• Safari 17 mang đến hai giá trị mới cho text-transform: full-width và full-size-kana giúp tùy chỉnh cách hiển thị tiếng Trung, Nhật, Hàn trên web.

• Hỗ trợ @supports font-format() và @supports font-tech() để kiểm tra định dạng và công nghệ font trước khi áp dụng CSS. Ngoài ra còn nâng cấp cú pháp cho @font-face: hỗ trợ khai báo tech(), size-adjust().

• Mang đến @counter-style, giúp tự định nghĩa hệ thống đánh thứ tự riêng.

• Hỗ trợ thuộc tính hyphens và hyphenate-character để thực hiện ngắt chữ dựa vào ngôn ngữ của văn bản.

• Sửa các lỗi về tính tiếp cận khi dùng display:contents.

• Hỗ trợ 4 giá trị mới của Media Queries cấp 4: overflow-block, overflow-inline để kiểm tra cách thiết bị xử lý khi nội dung bị tràn, update để kiểm tra tốc độ làm tươi (refresh rate) của thiết bị, scripting để kiểm tra thiết bị có hỗ trợ JavaScript hay không.

Ngoài ra còn nhiều cải tiến khác liên quan tới image-set(), :has(), và container queries.

Về JavaScript

• Hỗ trợ Storage API, cho phép một tên miền có thể lưu trữ nhiều hơn 1GB.

• Hỗ trợ WebGL khi dùng Offscreen Canvas, cho phép thực hiện tính toán 3D. Ngoài ra còn cho phép sử dụng hình SVG khi gọi CanvasRenderingContext2D.drawImage().

• RegExp: hỗ trợ sử dụng cờ v để match các thuộc tính Unicode, đồng thời cho phép thực hiện các phép tính tập hợp trên nhóm các ký tự. Ngoài ra Safari 17 cũng cho phép đặt trùng tên cho các nhóm bắt ký tự.

• Các thao tác mới trên Set: .intersection() để thực hiện phép giao, .union() cho phép hợp, .difference() để tìm các phần tử khác nhau, .isSubsetOf() và .isSuperSetOf() để kiểm tra tập hợp con/ cha. Ngoài ra còn có .symmetricDifference() và .isDisjointFrom() mà mình chưa kịp coi hai phương thức này làm gì.

• Hỗ trợ URL.canParse(), và nâng cấp hai phương thức .has() và .delete() của URLSearchParams.

• Cho phép sử dụng đường dẫn tương đối khi tạo đối tượng WebSocket, ví dụ như new WebSocket('/updates').

• Hỗ trợ Gamepad API.

Về Media

• Hỗ trợ JPEG XL, là một định dạng ảnh hiện đại bên cạnh WebP hay AVIF. Khi nén một hình JPEG sang JPEG XL thì dung lượng giảm xuống khoảng 20%, trong khi nén một ảnh từ định dạng gốc thì dung lượng giảm đi tới 60%.

• Bên cạnh đó Safari 17.0 cũng hỗ trợ ảnh HEIC, là định dạng của hình được chụp bằng camera iPhone, cũng như hình được lưu trên iCloud Photos. Thay đổi này giúp bạn có thể hiển thị hình HEIC trực tiếp trên Safari, Safari View Controller, và WKWebView mà không cần phải chuyển đổi qua định dạng khác.

• Về phía video, Safari 17.0 đính kèm codec để giải mã định dạng AV1; thay thế Media Source Extensions APIs bằng Managed Media Source để tự động thay đổi nguồn khi stream video, tùy thuộc vào điều kiện của mạng nhanh hay chậm.

Khác

• Với Safari 17 trên macOS Sonoma, bạn có thể thêm bất cứ website nào vào Dock. Các web app này có thể gửi tin nhắn thông báo, hiển thị badge, v.v. giống như ứng dụng thông thường vậy.

• Cải thiện các công cụ cho developers: Menu Develop đưa danh sách các thiết bị đã kết nối lên trên và nổi bật hơn; phần Feature Flags được thiết kế lại, chia các tính năng theo nhóm như Animation, CSS, HTML, JavaScript, Media, v.v. và mỗi tính năng sẽ có một trong bốn trạng thái: Stable, Testable, Preview, và Developer; chế độ Responsive Web Design cũng được thay đổi và thêm vào tính năng mở trang trong Simulator.

• Về tính năng của trình duyệt: hỗ trợ sử dụng nhiều hồ sơ (profiles) khi duyệt web; Private Browsing được nâng cấp để ngăn chặn các kỹ thuật theo dõi mới; hỗ trợ Apple Pay thông qua Payment Request API, v.v.

Tin vắn

• Codec của WebP dính lỗi bảo mật nghiêm trọng: Lỗi bảo mật CVE-2023-4863 liên quan đến tràn bộ nhớ heap của libwebp vừa được phát hiện, không chỉ ảnh hưởng đến tất cả trình duyệt hay các ứng dụng làm bằng Electron mà ngay cả ứng dụng desktop như Gimp, Inkscape, LibreOffice, v.v. hoặc ứng dụng Android/ Flutter cũng dính chưởng. libwebp được dùng để hỗ trợ hiển thị ảnh định dạng WebP trong ứng dụng. So với JPG hay PNG thì hình WebP có dung lượng nhỏ hơn nhiều mà chất lượng tương đương, thành ra WebP đang rất phổ biến trên Internet. Google cho biết đã thấy dấu vết của việc tin tặc khai thác lỗi bảo mật này. Hiện tại người dùng nên cập nhật tất cả trình duyệt/ ứng dụng lên phiên bản mới nhất.

• Vercel vừa ra mắt v0.dev, một hệ thống tự sinh giao diện sử dụng AI. Người dùng có thể đưa vào một lời mô tả cho giao diện mong muốn, v0 sẽ sinh ra code React sử dụng Shadcn UI và Tailwind CSS để copy-paste nhanh gọn lẹ. v0 sử dụng chính mã nguồn nội bộ của Vercel, cùng với các dự án mã nguồn mở để rèn luyện dữ liệu. Tự nhận là “production-ready”, kết quả sinh ra của v0 vấp phải sự phản đối từ các chuyên gia a11y khi các mã này không đảm bảo tính tiếp cận. v0 hiện đang ở giai đoạn private alpha và bạn phải đăng ký vào danh sách chờ trước khi sử dụng thử.

• :has() vừa được cài đặt vào Firefox Nightly và sẽ xuất hiện trong phiên bản sắp tới 🥳

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

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

• kysely-org/kysely: thư viện xây dựng câu truy vấn (query builder) cho Node.js, lấy cảm hứng từ knex. Được viết bằng TypeScript nên hỗ trợ auto-complete khá ổn. kysely chủ yếu tập trung vào Node.js nhưng vẫn có thể chạy trên các môi trường JavaScript khác như Deno.

• routup/routup: thư viện routing gọn nhẹ, hỗ trợ TypeScript, không phụ thuộc framework/ runtime dành cho ứng dụng backend. Sử dụng giao diện chuẩn Request và Response của node, routup có thể chạy trên Node.js, Bun, hay Deno. Ngoài ra còn có thêm các plugins để hỗ trợ request body, cookie, rate limit, v.v. giống như middlewares của Express vậy.

• fx: Chương trình xử lý với JSON ngay trên dòng lệnh, hỗ trợ JSON streaming, JSON comments, và được viết bằng Go. So với jq, bạn có thể dùng fx để tương tác trực tiếp với dữ liệu bằng chuột và bàn phím. Ngoài ra fx còn hỗ trợ tìm kiếm với regex nữa, rất là tiện. Cách sử dụng khá đơn giản, ví dụ như $ curl … | fx.

• Deno by example: tập hợp các ví dụ được viết cho Deno, đi từ căn bản như in ra dòng lệnh, xử lý JSON/ TOML/ YAML/ CSV, đến các chủ đề về network, CLI, hệ thống tập tin, cơ sở dữ liệu, mã hóa, v.v.

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

• Buttons shouldn’t have a hand cursor (2016): Adam Silver giải thích vì sao các nút (buttons) trên giao diện web lúc mặc định lại không có con trỏ hình ngón tay (pointer cursor). Lý do là vì các nút có (và nên được) thiết kế sao cho nhìn chúng rõ ràng là một cái nút 👉 người dùng sẽ tự biết là nó click được. Trong khi đó các đường dẫn lại có hình thức không rõ ràng bằng, nên chúng được gán con trỏ ngón tay. Các hướng dẫn về UX của Microsoft hay Apple cũng khuyên dùng như rứa.

• Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not: Bramus Van Damme hướng dẫn cách kiểm tra một element có thể cuộn (scrollable) được không bằng cách dùng Scroll-Driven Animations. Mặc dù hơi dài dòng nhưng cuối cùng chúng ta cũng có giải pháp thuần CSS cho vấn đề này. Quá hay luôn.

• On AI, ML, LLMs and the future of software: Laurie Voss, đồng sáng lập npm, chia sẻ những suy nghĩ về AI, ML, LLMs và cách chúng ta sẽ phát triển phần mềm trong tương lai.

• We’re still not innovating with AI-generated UI.: Heather Buchel, lập trình viên frontend của AWS, nhận xét về sản phẩm v0.dev vừa ra mắt của Vercel. Bên cạnh những vấn đề về tính tiếp cận đã nói ở trên, Heather còn chia sẻ những suy nghĩ về hành vi của cộng đồng phát triển web trên Twitter.

• Building Low Level Components the Radix Way: Alex Kondov, tác giả của hai quyển sách Tao of Node và Tao of React, chia sẻ những ghi chú khi đọc mã nguồn của Radix, thư viện các component React cấp thấp đang rất được ưa chuộng.

Kết

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