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

Tính năng mới trên nền tảng web

Tháng 3 vừa qua đón chào các phiên bản ổn định của Firefox 111, Chrome 111, và Safari 16.4. Cùng điểm qua những tính năng mới trên nền tảng web nào.

Firefox 111 thêm vào thuộc tính toàn cục autocapitalize và translate cho thẻ HTML. autocapitalize khi gán vào thẻ input sẽ quy định chữ được tự động viết hoa như thế nào khi nhập bằng bàn phím ảo. Các giá trị cho phép là: on / sentences tự động viết hoa đầu câu (mặc định), words viết hoa cho chữ cái đầu tiên của mỗi từ, characters tất cả chữ đều viết hoa, và off / none để tắt viết hoa tự động. autocapitalize sẽ không có hiệu lực với input[type=url | email | password]. Trong khi đó translate = yes | no giúp bạn quy định phần nội dung nào nên được dịch bởi các chương trình tự động, ví dụ như Google Translates. Chẳng hạn như <span translate="no">My Dung Co.</span> thì không nên dịch ra vậy 😆

Cũng trong phiên bản 111, Firefox mang đến Origin Private File System (OPFS). Nói cho ngắn gọn thì đây là một “ổ cứng” để tạo thư mục và tập tin dành riêng cho từng domain vậy. Bạn có thể dùng OPFS để đọc/ ghi files nhanh hơn, phù hợp cho các ứng dụng dùng Wasm. Tìm hiểu thêm về OPFS ở đây.

Trong khi đó Chrome 111 mang đến View Transitions API, giúp bạn thực hiện các chuyển động khi thay đổi trạng thái các trang của SPAs. Ngoài ra Chrome 111 còn hỗ trợ các màu bên ngoài sắc vực (gamut) RGB, cùng với hai hàm CSS mới color() và color-mix(), và hỗ trợ cú pháp “of S” cho :nth-child() và :nth-last-child().

Với Safari 16.4, trong bản tin tuần trước chúng ta cũng nói qua những tính năng mới rồi:

• Gửi tin thông báo (notifications) từ ứng dụng app đã được thêm vào Home Screen thông qua Push API, Notification API, và Service Worker. Đồng thời bạn cũng có thể dùng Badge API để hiển thị một nhãn đếm (badge) trên icon của ứng dụng.

• Giới thiệu các pseudo-class mới: :dir(), :user-valid, :user-invalid, :modal, :fullscreen.

• @property để định nghĩa kiểu giá trị cho biến CSS.

• Hỗ trợ CSS Typed OM, giúp JavaScript có thể đọc giá trị của CSS thành object với kiểu dữ liệu tương ứng, thay vì chỉ là string như trước đây.

Tin vắn

• Vercel đang thử nghiệm Vercel KV, một cơ sở dữ liệu dạng khóa-giá trị (key-value) chạy ở Edge. Sử dụng Redis của Upstash bên dưới.

• Storybook phát hành trước phiên bản 7.0, đem đến hỗ trợ Vite ngay từ đầu, không cần cài đặt cho NextJS và SvelteKit, cải thiện type safety, cũng như sửa vài lỗi khác.

• Rome phát hành phiên bản 12, hỗ trợ TypeScript 4.7 và 5.0, thêm các luật để lint, hỗ trợ tập tin JSON, nâng cấp tích hợp với VSCode. Quèo, nhưng có ai xài Rome hông?

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 😛

• oleggrishechkin/react-viewport-list: Là một thư viện nhẹ hều nhưng khá xịn để render một danh sách lớn (vài chục ngàn dòng hoặc hơn) bằng React. Hỗ trợ flexbox, scroll dọc/ ngang, v.v.

• daba.so: Giúp bạn import một tập tin JSON và chuyển thành database luôn 😮 Sau đó bạn có thể dùng gói npm i daba để thực hiện thêm/ xóa/ sửa/ truy vấn trên db này. Sắp tới sẽ hỗ trợ thêm functions, authentication, pages, email. Làm mình nhớ tới Supabase ghê. Hiện tại vẫn đang miễn phí.

• swup/swup: Thư viện giúp bạn làm hiệu ứng chuyển trang cho các ứng dụng multi-page.

• Phosphor Icons tập hợp hơn 1200 icons với 6 phong cách khác nhau: Thin, Light, Regular, Bold, Fill, và Duotone.

• code-hike/bright là một server component giúp tô màu cú pháp (syntax highlighting 🤣) cho React.

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

• Safari releases are development hell: Niềm vui của người này là nỗi đau của người khác. Safari 16.4 vừa được phát hành nhưng vô tình làm cho app của Construct không chạy được nữa.

• Release Notes for Safari Technology Preview 167: Hông có ý cà khịa tới bài trên đâu nha nhưng đây là những tính năng mới sẽ xuất hiện trong phiên bản Safari tiếp theo 🤪

• Improving CSS Shapes with Trigonometric Functions: Các trình duyệt đã hỗ trợ hàm lượng giác trong CSS từ vài tháng trước, nhưng áp dụng thực tế thì như thế nào? Đọc qua bài để tìm hiểu thêm nhe.

• React router’s data utilities are awkward in SPA’s: Tác giả chia sẻ những trải nghiệm khi xài React Router, bên cạnh React Query. Mình cũng đang xài stack y chang nên đọc thấy liên quan lắm.

Kết

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