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

Hàng Việt Nam chất lượng cao: vitest-preview

Hung Viet Nguyen, tác giả của jest-preview, vừa cho ra lò thư viện chị chị em em vitest-preview giúp bạn xem trước UI ngay trên trình duyệt trong khi đang viết tests bằng Vitest. vitest-preview được xây dựng trên nền của Vite nên tốc độ là không phải bàn rồi. Xịn xò chưa.

Hiện tại vitest-preview đã có ví dụ cho react-testing-library và vue-test-utils, nhưng nhìn chung chỉ cần vite và jsdom là đã có thể chạy được rồi.

Để tìm hiểu thêm, bạn có thể xem bài giới thiệu của tác giả ở đây. Đừng quên thả ⭐️ ủng hộ hàng Việt ha 👉 https://github.com/nvh95/vitest-preview.

Bạn có biết?

vitest là viết tắt của Vi + Test = Vietnamese Test = Thư viện test sinh ra cho người Việt

^ Cái này là mình nghe tác giả của vitest-preview nói nên không biết có đúng hông nha.

Next.js Conf, Next.js Conf, và Next.js Conf

Rần rần trên khắp mặt trận SoMe luôn. Next.js Conf vừa diễn ra online ngày 25 tháng 10 năm 2022 và khoe biết bao nhiêu là hàng nóng.

Đầu tiên phải nói đến TurboPack, tự nhận là “truyền nhân của Webpack”. Nghe cũng hợp lý vì Tobias Koppers, vốn là tác giả chính của Webpack, hiện đang là nhân viên của Vercel. Nhưng tác giả đã đính chính đây chỉ là chiêu marketing thôi.

Turbopack viết bằng Rust nên “cái gì cũng nhanh”:

• Thời gian khởi động siêu lẹ: Trong một dự án có 3000 modules, Turbopack mất 1.8 giây để khởi động, so với Vite 11.4 giây.

• Chạy development server hơn Webpack 700x lần, nhanh hơn Vite 10x lần.

Hóng 🍿

Dĩ nhiên, hễ nhắc tới Vite là Evan You nhảy dựng lên ngay. Evan lập tức lên tweet “sửa lưng” vụ “nhanh hơn Vite”. Nhưng thặc đáng tiếc, người ta cứ nói vậy thì anh làm được gì đây 🤷‍♂️

Turbopack sẽ không thay thế hoàn toàn cho Webpack mà cả hai dự án sẽ tồn tại song song, và Turbopack sẽ có khoảng 95% tính năng tương tự như Webpack.

Turbopack sẽ được dùng làm development server cho Next.js 13, đem đến HMR tốc độ nhanh như điện, hỗ trợ React Server Components, TypeScript, JSX, CSS, vân vân và mây mây.

Nhắc đến phiên bản Next.js 13, chúng ta cũng có:

• Phần docs được làm mới hoàn toàn và bạn có thể xem bản beta ở đây
• Code chính được chuyển vào thư mục app/ thay vì pages/
• Hỗ trợ Layouts giúp chia sẻ UI giữa các màn hình và giữ nguyên trạng thái (state) của app khi chuyển trang
• Thư viện next/image ổn định hơn, hỗ trợ lazy loading
• Thư viện mới @next/font giúp bạn tự host font luôn
• next/link không bắt bạn phải thêm thẻ <a> bên dưới <Link> nữa

Đáng chú ý nhất là Next.js 13 hỗ trợ cấu trúc Server Components của React. Theo quảng cáo thì Server Components sẽ giúp bạn giảm lượng JavaScript được gửi xuống client, giúp lần đầu tải trang sẽ nhanh hơn. Ngoài ra Next.js 13 còn mang đến một phương thức mới để fetch dữ liệu, được xây dựng trên nền của React Suspense.

Để giúp bạn chuyển từ 12 sang 13 dễ dàng hơn, @shadcn đã viết sẵn hướng dẫn này. Bạn cũng có thể triển khai Next.js 13 lên Netlify ngay hôm nay.

Đọc chi tiết hơn về những tính năng xịn xò của Next.js 13 ở đây.

Lại hóng 🍿

Sau khi Next.js 13 được giới thiệu thì giáo chủ Dan cũng lên tweet ngay nói về React Server Components.

Rồi thiên hạ trên Twitter cũng la làng team React ưu ái cho Next.js mà bỏ qua những meta-framework khác như Remix hay Gatsby. Ồ quao 😆

Vercel cũng nhân dịp này thông báo họ đã mua lại Splitbee, một công cụ analytics chú trọng vào tính riêng tư. Cho những bạn ở châu Âu quan tâm Splitbee có tuân theo GDPR không, thì có vẻ vẫn chưa nha (phần giải thích ở đây còn mù mờ lắm).

Tin vắn

• Cloudflare Pages hỗ trợ Next.js Edge Runtime: Vậy là bạn có thể deploy dự án Next.js lên Cloudflare Pages thay vì dùng Vercel rồi.

• Solid ra bản 1.6.0: Phiên bản “Lâu đài trên mây” 🏰☁️ chính thức hỗ trợ Partial Hydration, hay còn gọi là “islands”, giống như Astro, Iles, Solitude, v.v. Tuy nhiên cập nhật này chủ yếu dành cho tác giả của các meta-framework, chứ người dùng cuối có lẽ không cần quan tâm lắm.

• Chrome ra bản 107: Đáng chú ý là phiên bản này hỗ trợ chuyển động cho grid-template-rows và grid-template-columns. Bạn có thể đọc và xem ví dụ thêm ở đây. Bên cạnh đó còn có những cập nhật mới cho Screen Capture API, hỗ trợ thuộc tính rel cho thẻ <form>. Chi tiết hơn tại đây

• Node.js 19 ra lò, nâng cấp V8 lên 10.7, tự động bật header Keep-Alive cho HTTP(s)/1.1, hỗ trợ các APIs của WebCrypto, v.v. Node.js 19 phát hành đồng nghĩa với Node.js 18 sẽ chuyển qua trạng thái LTS.

• Deno ra v1.27: Hỗ trợ inlay hints, tăng cường tương thích với npm, hỗ trợ navigator.language, cải tiến deno task, v.v.

• SVGOMG được cập nhật: Sử dụng SVGO 3.0 và nhiều cải tiến đằng sau. Đây là công cụ rất hữu dụng giúp bạn tối ưu tập tin SVG, nhiều khi giảm đến 50% dung lượ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 😛

• Outstatic là một CMS tĩnh (static) dành cho Next.js. Outstatic sử dụng Git để lưu trữ nội dung nên bạn không cần phải dùng chung với một cơ sở dữ liệu nào cả.

• Nocodb là một dự án nguồn mở thay thế cho Airtable, giúp bạn chuyển đổi cơ sở dữ liệu MySQL, PostgreSQL, SQL Server, SQLite, hay MariaDB thành bảng tính thông minh.

• Restfox: HTTP client mà offline-first nghe cũng hơi ngộ ngộ nhỉ 😅 Nếu bạn muốn tìm giải pháp thay thế cho Postman thì nghía qua Restfox thử nhe.

• nachoaldamav/ultra: Một giải pháp nhanh hơn và nhẹ hơn cho npm. Hiện vẫn còn đang trong giai đoạn phát triển nên hãy cùng chờ xem.

• charmbracelet/vhs: Giúp bạn viết kịch bản và quay lại terminal thành tập tin GIFs. Hơi bị xịn để demo luôn.

• dudykr/stc: Donny, tác giả của swc, vừa phát hành một type checker cho TypeScript. Và dĩ nhiên được viết bằng Rút.

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

• Tìm hiểu về blending modes trong CSS: Thay vì chọn các blending modes trong CSS một cách ngẫu nhiên, hãy để Dan Hollick hướng dẫn bạn tiếp cận một cách khoa học hơn nhe.

• The HTTP crash course nobody asked for: Tác giả Amos [@fasterthanlime] khá nổi tiếng trong cộng đồng Rút 🦀 đã viết một bài nhập môn về HTTP rất dễ hiểu dành cho mọi người.

• How to Build a Blog with Fresh: Một bài hướng dẫn xây dựng blog bằng framework Trái chanh 🍋 và triển khai lên Deno Deploy.

• 🎥 CSS Day 2022 @ performance.now() Amsterdam: Hội thảo performance.now() 2022 vừa diễn ra từ ngày 27 - 28.10 tại Amsterdam. Nếu quan tâm về CSS thì bạn không nên bỏ qua playlist này. Đảm bảo học được khá nhiều điều á.

Kết

Tuần trước êm ả bao nhiêu thì tuần này quá trời tin tức luôn. Hi vọng mọi người không bị choáng ngộp thông tin 😅

Ngày càng có nhiều công cụ cho JS được viết bằng Rust, tới mức tác giả của ESLint còn phải suy nghĩ có nên nhảy tàu không. Riêng bạn thì sao? Bạn có định học Rust trong tương lai không?

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