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

Có gì mới trong Safari 16.4

iOS và iPadOS 16.4 đem đến hỗ trợ Web Push cho các trang web được thêm vào Home screen. Bằng cách sử dụng Push API, Notifications API, và Service Workers, lập trình viên có thể gửi thông báo đến người dùng từ ứng dụng web, y hệt như app bình thường. Bên cạnh đó chúng ta còn có Badging API để hiển thị một bộ đếm nhỏ phía trên icon của ứng dụng, giống như các app email hay Facebook.

Tiếp theo là rất nhiều tính năng CSS mới:

• Thêm thuộc tính margin-trim: block | inline để cắt bỏ phần margin chạm vào container theo trục block hoặc inline

• font-size-adjust giúp chỉnh cỡ chữ khi dùng nhiều font khác nhau, ví dụ như sans serif với monospace, trong cùng một văn bản

• Thêm hai đơn vị mới lh và rlh có giá trị của line-height hiện tại, tương tự như em với rem

• Bổ sung thêm các pseudo-classes mới: :dir(ltr | rtl) cho hướng viết chữ trong văn bản, :user-valid và :user-invalid để trang trí trạng thái của thẻ input khi đang kiểm tra dữ liệu nhập vào, không cần prefix cho :fullscreen nữa, v.v.

• Hỗ trợ thêm @property để định nghĩa kiểu đơn vị cho các biến CSS.

• Outline cũng được nâng cấp để đi theo giá trị của border-radius.

• Hỗ trợ cú pháp màu tương đối (Relative Color Syntax), giống như vầy section { background: hsl(from #1357a6 h s l / 0.5); }.

• Cú pháp cho media queries cũng được cải thiện. Bên cạnh bạn có thể viết gọn thành @media (400px <= width < 900px), Safari hỗ trợ thêm các toán tử luận lý and, or, và not để có thể viết những queries như thế này @media ((40em < width) or (20em < height)) and (not (pointer: none)).

Bên cạnh đó:

• Web Component: Hỗ trợ Declarative Shadow DOM, giúp khai báo shadow DOM mà không cần dùng JavaScript

• HTML: Thêm vào thuộc tính loading="lazy" cho thẻ iframe, và cải thiện <input type="file"> để hiển thị thumbnail cho tập tin được chọn, và thêm vào sự kiện cancel.

• JavaScript: Hỗ trợ 128-bit SIMD cho Web Assembly, giới thiệu thêm nhiều phương thức mới Array.fromAsync(), Array#group, Array#groupToMap, String#isWellFormed, String#toWellFormed, v.v. Hỗ trợ Intl.DurationFormat.

• Những Web API mới: Offscreen Canvas, Fullscreen API, Screen Orientation API, Screen Wake Lock API, User Activation API

• Và rất nhiều cập nhật khác.

Astro 2.1

Tin này chắc từ hai tuần trước rồi mà hôm nay ngồi làm lại Ehkoo mình mới thấy 😅 Phiên bản 2.1 đem đến những tính năng mới như:

Giới thiệu component <Image>

Framework nào giờ cũng phải có một component <Image> hay sao á. Trước đây Astro đã có @astrojs/image với tính năng tương tự thì phiên bản này giới thiệu component Image từ gói astro:assets.

Bạn có thể sử dụng như sau:

---
import { Image } from "astro:assets"
import penguin from "~/assets/penguin.png"
---

<Image src={penguin} quality="high" alt="a high-quality penguin" />

<Image> cũng có thể được dùng chung với hình được đặt trên CDN như Cloudinary hay các host như Vercel.

Tính năng này hiện đang được thử nghiệm nên bạn phải bật bằng cờ --experimental-assets khi chạy Astro, hoặc đặt experimental.assets trong tập tin astro.config.(t|mj)s.

Hỗ trợ Markdoc, bên cạnh MDX và Markdown

Markdoc là sản phẩm của Stripe, giúp thêm vào tags, annotations, functions, v.v cho Markdown, giúp cho việc viết tài liệu kỹ thuật mạnh mẽ và thuận lợi hơn. Astro 2.1 thử nghiệm hỗ trợ Markdoc bên cạnh MDX và Markdown thuần túy.

Theo kiểm tra của Astro, render Markdoc nhanh hơn MDX gấp 3 lần. Bạn có thể thêm Makrdoc vào dự án bằng cách chạy lệnh npx astro add markdoc.

Tự động kiểm tra kiểu dữ liệu trong tập tin .astro

Astro 2.1 cũng đem đến lệnh astro check --watch, tương tự như tsc --watch, giúp bạn kiểm tra kiểu của dữ liệu bên trong thư mục src/content/.

Tin vắn

• Cloudflare thông báo hỗ trợ WASM cho Pages Functions: Tính năng Pages Functions của Cloudflare vừa cho phép sử dụng Wasm, bên cạnh JavaScript. Nghĩa là bạn có thể viết hàm serverless từ các ngôn ngữ khác như C/C++, Rust, hay Zig, và xuất ra tập tin Wasm để chạy trên edge. Hơi bị hay luôn.

• Vercel hỗ trợ triển khai ứng dụng xây dựng bằng Remix: Ai nói Next.js với Remix là đối thủ của nhau nè, mới đây Vercel đã hỗ trợ những tính năng nâng cao khi triển khai app Remix nha. Trong đó bao gồm: Streaming SRR với lựa chọn sử dụng Node.js hay Edge runtime tùy vào từng route, Advanced Caching cho phép dùng các chỉ thị như stale-while-revalidate hay stale-if-error trong header Cache-Control, API Routes và Data Mutations giúp xây dựng serverless API, cũng như hỗ trợ dùng action trong route.

• Turborepo viết lại bằng Rust: Từ phiên bản 1.7, Turborepo sẽ chuyển dần từ Go sang Rust. Một phần là do làm chung với team Turbopack, phần nữa là Rust đúng hơn Go (trong một số trường hợp), nhưng tụ chung vẫn là…thích.

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 😛

• mayank99/reset.css: Phiên bản reset của Mayank dành cho các trình duyệt hiện đại, sử dụng các tính năng mới của CSS. Hỗ trợ dark mode, .visually-hidden, system-ui fonts, v.v. Rất hữu ích để tham khảo.

• chakra-ui/ark: Thư viện headless UI được làm bằng Zag.js. Hỗ trợ React, Vue, Solid.

• crufters/actio: Một backend framework cho Node.js giúp bạn bắt đầu bằng monolith và chuyển sang microservice bất cứ lúc nào mà không phải thay đổi cấu trúc.

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

• Why We Added package.json Support to Deno: Ryan Dahl giải thích vì sao Deno hỗ trợ tập tin package.json, dù cho ban đầu nói là Deno sẽ không giống Node.js.

• From Web SQL to SQLite Wasm: the database migration guide: Bài hướng dẫn chuyển đổi từ Web SQL sang SQLite Wasm, nếu lỡ xui dự án của bạn có xài Web SQL.

• Jumping HTML tags. Another reason to validate your markup: Một bài viết rất hay của Vadim Makeev, nói về tầm quan trọng của việc viết HTML đúng chuẩn, và các framework như React, Angular, Vue, v.v. khác nhau thế nào trong việc phân tích và kiểm tra markup.

• React is hostile to the outside world: Bài viết của Mohamed Elsharnouby nói về chuyện tích hợp React với những thư viện JavaScript khác.

• Rethinking React best practices: Một bài viết tổng quan về React từ lúc chỉ là một thư viện làm giao diện đến khi trở thành một cấu trúc/ hệ sinh thái toàn diện.

• Common accessibility issues that you can fix today (2022): Những vấn đề về accessibility bạn có thể sửa ngay hôm nay, ví dụ như chữ không có độ tương phản, hình không có alt text, v.v.

Kết

Đầu tháng 4 giáo chủ Evan You của Vue “giỡn như thiệt”.

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