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

*Cover bị sai năm trong hai số Bản tin trước mà không ai nhắn cho mình sửa lại. Buồn lắm 🥲 Cảm ơn bạn @hoanghung123vn đã thông báo nha.

Remix ra phiên bản 1.11.0

Remix, đối thủ “đáng gờm” của Next.js, vừa phát hành phiên bản 1.10.0 hồi tuần rồi. Chưa kịp xem có gì hay thì tuần này lại có ngay 1.11.0 😳 Cùng xem nhé.

• Xịn nhất chắc phải là tính năng defer để hỗ trợ SSR streaming của React 18. Kết hợp với <Await> và React.Suspense, bạn có thể quyết định phần dữ liệu nào là cần thiết và nên được ưu tiên tải trước, và phần dữ liệu nào có thể “từ từ tải sau cũng được”. Tính ra cũng khá là hay 🤔

• Thêm vào gói @remix-run/css-bundle để đóng gói CSS. Trong khi các bundlers khác tự động chèn tập tin CSS cho bạn, gói này cung cấp hàm cssBundleHref() để xài chung với export function links(), giúp bạn quyết định tập tin CSS nào sẽ được tải ở trang hiện tại. Hiện bạn có thể đính kèm tập tin CSS thông thường, CSS modules, hay thư viện @vanilla-extract. Lưu ý là tính năng này vẫn đang trong giai đoạn thử nghiệm nha.

• Bạn cũng có thể dùng thử quy ước mới trong Remix v2 để khai báo các routes.

• Gói @remix-run/router được xây dựng lại để không phụ thuộc vào framework. Gói này sẽ bao gồm các API giúp bạn tải và thao tác (mutate) dữ liệu. Đây như là một bước đệm để “dụ dỗ” những ai đang xài react-router nhảy qua Remix (và ngược lại).

• Giới thiệu hàm shouldRevalidate() để quyết định khi nào thì xóa cache trong hàm tải dữ liệu.

• Hooks mới: useNavigation(), useNavigationType(), useRevalidator(), useRouteLoaderData()

Tóm lại: Liệu bạn có xài Remix thay cho Next.js không? Mình là “hên xui” đó.

Tin vắn

• Dự án Servo khởi động lại. Servo bắt đầu năm 2012 là một dự án nghiên cứu của Mozilla nhằm xây dựng một engine cho trình duyệt web bằng Rust. Đến năm 2020 thì Mozilla sa thải nhóm phát triển do khó khăn tài chính. Lần này, việc phát triển Servo sẽ do Igalia, một công ty phần mềm ở Tây Ban Nha đã có đóng góp vào WebKit, đảm nhiệm.

• Daniel Roe, trưởng dự án mới của Nuxt, vừa chia sẻ những dự tính trong năm 2023. Đầu tiên sẽ là một website và logo mới tại địa chỉ https://nuxt.com/, sau đó tập hợp tất cả repo có liên quan về với nuxt/nuxt, tập trung phát triển các modules như nuxt/image, nuxt/auth, nuxt/font, và nuxt/script, cuối cùng là cải thiện trải nghiệm của lập trình viên thông qua Nuxt DevTools và bộ CLI. Nuxt cũng hướng tới phát hành thường xuyên hơn, với các bản patch sửa lỗi mỗi tuần, và một phiên bản minor mỗi tháng.

• 11ty ra phiên bản thử nghiệm cho 2.0, được giới thiệu là build nhanh, xài ít packages hơn, và hỗ trợ WebC, định dạng web component chỉ trong một tập tin duy nhất.

• Radix UI, thư viện headless UI dành cho React được “nhà nhà yêu mến, người người yêu thương”, vừa giới thiệu thêm component Menubar, cho phép Accordion nằm ngang, và đặt nội dung của Select bên dưới nút trigger.

• Một vài thư viện/ công cụ cũng vừa nâng semver:

  • esbuild 0.17.0
  • bun 0.5.0
  • parcel 2.8.3

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 phát hiện 😛

• uiplaybook.dev: Bao gồm các mô tả tính năng và những điểm cần cần lưu ý khi xây dựng các UI components như Button, Tooltip, Notification, v.v.

• GROQ: viết tắt của Graph-Relational Object Queries, là một sản phẩm mã nguồn mở của Sanity.io, giúp bạn truy vấn trên tài liệu JSON. Có vẻ giống như jq nhưng khác một chút vậy.

• ghoullier/awesome-template-literal-types: Tập hợp những bài viết và ví dụ hữu ích về template literal trong TypeScript.

• corsproxy.io giúp bạn thêm CORS headers vào bất cứ URL nào để có thể vượt qua phần kiểm tra CORS của trình duyệt. Rất tiện khi bạn muốn xài API “của ai đó” mà người ta không bật CORS.

• Structura.js là một thư viện TypeScript giúp bạn tạo các giá trị bất biến (immutable) bằng cú pháp vạn biến (mutable). Structura.js khá giống với Immer.js nhưng nhanh hơn và hỗ trợ đóng băng (freeze) objects tại thời điểm biên dịch, nhờ vào TypeScript.

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

• Speeding up the JavaScript ecosystem - module resolution: Marvin Hagemeister, thành viên của Preact, quay lại với series tăng tốc hệ sinh thái của JavaScript. Lần này sẽ là cải thiện tốc độ phân giải modules.

• Functional Reactive Programming with SolidJS and fp-ts: Bài viết rất chi tiết của Kajetan Świątek giới thiệu những khái niệm căn bản của lập trình reactive. Bạn sẽ được hướng dẫn xây dựng một ứng dụng nhỏ để tìm kiếm trên Wikipedia với SolidJS, TypeScript, fp-ts, zod, và ts-pattern.

• Disentangling Frameworks: 2023 rồi và liệu bạn có cần dùng CSS frameworks như Bootstrap hay Tailwind nữa không? Có thể, nhưng thay vì bỏ thời gian và công sức vào học một framework, có lẽ tốt hơn nên dùng năng lượng đó để học CSS cho bài bản vì “The platform always wins.”

• Our top Core Web Vitals recommendations for 2023: Nhóm DevRel của Chrome giới thiệu những “từ viết tắt” cần được chú trọng về hiệu năng của web trong năm 2023.

• 📚 Learn Accessibility là khóa học a11y của web.dev. Bạn sẽ được dẫn dắt qua từng khái niệm cơ bản, cũng như các kỹ thuật để nâng cao khả năng tiếp cận (accessibility) khi xây dựng websites/ ứng dụng web.

Kết

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