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

Astro 2.0 🚀

Như kiểu “11ty gọi, Astro trả lời” vậy, tuần này Astro chính thức ra phiên bản 2.0 luôn. Nếu đây là lần đầu bạn nghe đến Astro thì đây là một framework để xây dựng website với lời hứa “ship less JavaScript”. Astro vừa như một static site generator, nhưng cũng có thể tạo ứng dụng web tương tác bằng kiến trúc hòn đảo 🏝️ (island architecture). Trong năm 2022 thì mình cũng làm kha khá vài dự án với Astro và rất thích trải nghiệm lập trình viên mà nó đem lại. Hãy xem phiên bản 2.0 có gì hot nhe 😃

Đầu tiên là Content Collections API. Từ nay bạn có thể gom những tập tin Markdown thuộc cùng một chủ đề lại với nhau, và tạo thành từng collection bên trong thư mục src/content. Như trong trường hợp của Ehkoo thì có thể tạo src/content/post và src/content/newsletter.

Sau đó bạn có thể dùng hàm defineCollection() để định nghĩa schema bằng Zod cho các collections đó. Astro sẽ tự động tạo ra khai báo kiểu dữ liệu cho bạn. Điều này giúp đảm bảo “type safe” cho nội dung của các tập tin Markdown, điều mà chưa có framework nào làm ☺️ Astro cũng giới thiệu hai API mới là getCollection() và getEntryBySlug() để lấy dữ liệu từ một collection bất kỳ.

Một cập nhật khác đáng chú ý là chế độ Hybrid Rendering. Trước đây Astro hỗ trợ hai chế độ: hoạt động như một SSG để tạo ra tập tin HTML tĩnh, hoặc bật SSR và dùng một trong những adapter như Cloudflare, Deno, Netlify, Node.js, Vercel. Phiên bản 2.0 giới thiệu Hybrid Rendering giúp bạn tùy chọn tập tin nào có thể render tĩnh trong quá trình build. Sử dụng bằng cách thêm vào export const prerender = true; trong file Astro là được.

Cuối cùng là những cập nhật “linh tinh” khác như:

• Một giao diện mới cho trang thông báo lỗi
• Hot Module Reloading (HMR) nhanh hơn
• Nâng cấp lên Vite 4.0
• Một thư mục .astro để chứa các metadata cho dự án, và bạn nên thêm thư mục này vào .gitignore
• Và một roadmap để chúng ta có thể theo dõi quá trình phát triển của Astro.

Tổng kết: Sau bao năm làm việc với React và cảm thấy hơi mệt/ ngộp vì những thay đổi gần đây thì Astro như làn gió mới, làm cho mình cảm thấy lập trình web thú vị trở lại. Dĩ nhiên Astro không phải là “viên đạn bạc” phù hợp cho tất cả dự án, nhưng nếu website của bạn nặng về nội dung (CMS, documentation, blog, v.v.) thì hãy thử qua Astro nhé 😃.

Nhắn nhủ: Bạn có muốn Ehkoo viết một bài giới thiệu chi tiết về Astro hông? Để lại bình luận ở đây nha.

Tin vắn

• TypeScript ra bản 5.0 thử nghiệm: Có vẻ như bản 5.0 sẽ hỗ trợ decorators theo chuẩn mới, cải tiến khi làm việc với các dự án dùng ESM, thêm hỗ trợ cho JSDoc, và nhiều tính năng khác mà mọi người có thể đọc chi tiết trong link nha.

• Shoelace chính thức ra 2.0: Sau 2 năm phát triển (từ tháng 01/2020) thì phiên bản 2.0 của Shoelace đã hoàn thành. So với các thư viện UI khác, Shoelace chọn xây dựng bằng Web Components, giúp cho việc tích hợp vào các dự án dễ dàng hơn, dù bạn sử dụng React, Vue, hay Solid, v.v. hay không dùng gì cả. Đơn giản là vì Web Components là tiêu chuẩn chung của web, và đã được các trình duyệt hỗ trợ đầy đủ. Shoelace có thể xem như một “starter kit” để bạn xây dựng design system của riêng mình mà không phải lo lắng về a11y chẳng hạn.

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 😛

• shadcn/ui: Cái này hay với đẹp nè. Tập hợp những components được xây dựng bằng Radix UI và Tailwind CSS. Bạn có thể xem demo ở đây. Không nhất thiết phải xài cho dự án nhưng rất có giá trị tham khảo và học hỏi.

• motiondivision/motionone: U là trời, lại một thư viện nữa để làm animation. Motion One sử dụng Web Animation API, lại nhỏ gọn hơn Greensock nhưng mạnh mẽ không kém nhe.

• Mokshit06/typewind: (lại) một thư viện TypeScript binding cho Tailwind 😮‍💨

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

• So your designer wants stuff to overlap: Hui Jing giới thiệu 4 cách để làm các elements nằm đè lên nhau bằng CSS: margin với giá trị âm, absolute, translate, và grid.

• Things I want to see in JavaScript and Frontend development in 2023: Paul Armstrong gợi ý vài điều nên thay đổi trong năm 2023, chẳng hạn như tạm biệt axios và chuyển qua xài fetch.

• The Power of CSS Blend Modes: Một vài thử nghiệm về cách dùng CSS blend modes có thể làm bạn “nổ đầu” 🤯

• Rethinking the Component API: Nhóm phát triển Excalidraw chia sẻ cách họ tổ chức và xây dựng React components.

• The truth about CSS selector performance: Bài viết hơi bị xịn luôn đến từ blog của Microsoft Edge 😲 Trước giờ cứ nhớ là thay vì .class thì nên thêm thẻ HTML vào trước, ví dụ như div.class để tăng tốc độ xử lý CSS. Nhưng thực tế có như vậy không? Patrick Brosset sẽ giải đáp cho bạn.

• Building a Serverless E-commerce Store with Stripe, Netlify, & 11ty: Một bài hướng dẫn xây dựng trang e-commerce bằng JAMStack nè.

• 🎥 Andrew Clark on the Creation of Redux: Andrew Clark, thành viên nòng cốt của React, chia sẻ góc nhìn về việc phát triển Redux, những ảnh hưởng của nó trong hệ sinh thái React, và tương lai sẽ như thế nào.

Kết

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