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

Tin vắn

• Next.js ra bản 14. Được thông báo tại Next.js Conf năm nay, phiên bản này mang đến cập nhật cho Turbopack, hứa hẹn tăng tốc độ khởi động cũng như cập nhật code với rất nhiều phần trăm. Một điểm sáng/ tối/ lu mờ khác là Server Actions, hay con đường để viết code backend ngay trong React components. Theo thông báo thì Server Actions đã trở nên ổn định nhưng không rõ có nên dùng trên production không, vì App Router của Next.js sử dụng React phiên bản canary. Ngoài ra Next.js 14 còn thử nghiệm tính năng Partial Prerendering, sử dụng Suspense để tạo ra bộ khung của trang bằng HTML tĩnh, sau đó stream component từ server xuống để tạo nội dung động. Kết quả là “một mũi tên hai con nhạn”: trong tĩnh có động mà trong động có tĩnh luôn ☯️

• Astro cũng không kém cạnh, thảy ra bản 3.4 trong tuần này. Astro 3.4 giới thiệu Page Partials, là những phần HTML nho nhỏ chứ không phải một trang hoàn chỉnh, chủ yếu để xài chung với các thư viện như htmx hay Stimulus. Bên cạnh đó phiên bản này cũng thực hiện tối ưu hóa hình ảnh bằng cách chạy song song, giúp giảm thời gian build đối với các dự án nhiều hình. Cuối cùng là tính năng thử nghiệm Dev Overlay, cho phép kiểm tra các islands trong trang, như hình bên dưới:

  

• Trong một diễn biến khác, Yarn ra lò berry v4. Cải tiến rõ ràng nhất là tốc độ khi cài đặt các gói phụ thuộc, nghe nói là ngang ngửa pnpm. Ở bên dưới, Yarn 4 sử dụng API corepack của Node.js, cho phép bạn sử dụng nhiều phiên bản Yarn khác nhau. Do đó bạn cần phải có Node.js 18+ để dùng Yarn 4 nhe. Website của Yarn cũng được cập nhật nhìn xịn hơn hẳn.

• MDX phát hành phiên bản 3.0, hỗ trợ cú pháp ES2024 và await. Phiên bản này yêu cầu Node.js 16 hoặc mới hơn. Người dùng chỉ cần cập nhật các plugins lên phiên bản mới hơn là được.

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 😛

• naver/billboard.js: Thư viện vẽ biểu đồ của Naver, sử dụng D3 bên dưới.

• finos/perspective: Lại một thư viện vẽ biểu đồ khác, nhưng phù hợp để làm phân tích dữ liệu theo hướng tương tác. Perspective hỗ trợ streaming tập dữ liệu lớn, được viết bằng C++ và biên dịch ra WebAssembly.

• unjs/uqr: Thư viện giúp tạo mã QR cho terminal, sử dụng ký tự Unicode, hay SVG. Được phát triển bởi team unjs, có nhiều packages khác như unjs/nitro, unjs/h3, v.v. cũng hay lắm.

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

• Splitting within Selects: Safari 17 gần đây hỗ trợ sử dụng thẻ <hr> bên trong <select> để chia các lựa chọn thành từng nhóm. Adrian Roselli, chuyên gia về lĩnh vực accessibility, thử kiểm tra tính năng này trên các trình duyệt khác nhau và so sánh nó với thẻ <optgroup>.

• Web Components Will Outlive Your JavaScript Framework: Lời khẳng định chắc nịch từ Jake Lazaroff. Jake chia sẻ vì sao anh chọn Web Components khi viết bài giới thiệu về CRDT. Sử dụng Web Components chung với Markdown đảm bảo website của Jake vẫn chạy và dễ thay đổi, nếu một ngày không xài Astro nữa.

• CSS Findings From Photoshop Web Version: Ahmad Shadeed chia sẻ những điều thú vị khi khám phá CSS được sử dụng cho Photoshop phiên bản web.

• Don’t Use Fixed CSS height or width on Buttons, Links, or Any Other Text Containers: Lời khuyên hữu ích từ Ashlee M Boyer để tránh trường hợp chữ trong trang không đọc được khi người dùng phóng to/ thu nhỏ trang, hoặc làm những chuyện không ai ngờ tới khác.

• Why I Won’t Use Next.js: Bài viết mới đăng gần đây của Kent C. Dodds. Bỏ qua chuyện anh là cựu thành viên của team Remix và cái kết của bài không gì ngoài mục đích kêu mọi người mua khóa học, thì bài viết cũng chỉ ra những vấn đề với Next.js nói riêng và React nói chung. Dự đoán trong tương lai không xa Next.js sẽ trở thành một Angular mới.

Kết

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