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

Tin vắn

• Chromium giới thiệu Popover API, giúp bạn làm menu, tooltip, hay dialog ngay trên trình duyệt mà không cần dựa vào thư viện ngoài. Hiện tại chỉ có Chrome, Edge, và Safari Technical Preview là hỗ trợ tính năng này, Firefox thì chưa.

• Astro ra bản 2.5, cho phép chứa tập tin JSON và YAML trong thư mục src/content, bên cạnh tập tin Markdown. Chúng ta còn có một thiết lập mới compressHTML để nén tập tin HTML lại, mặc dù bạn có thể để web server làm chuyện này. Các component Astro cũng được thiết kế để có thể render song song, giúp tăng tốc độ build lên một chút. Phiên bản này cũng thử nghiệm hai tính năng: hybrid rendering để bật/tắt SSR trên từng trang, và API addClientDirective() dùng để viết integrations với Astro.

• Phiên bản 2.9.0 của Parcel mang đến những tính năng được mong chờ từ lâu: hỗ trợ hai trường exports và imports trong package.json, các trường baseUrl, paths, và moduleSuffixes của tsconfig.json, chuyển sang dùng minifier của SWC, giúp tăng tốc độ build, hỗ trợ tập tin .proxyrc.cjs, v.v.

• Bun giới thiệu Bun Bundler, trong giai đoạn thử nghiệm nhưng cho thấy đã nhanh hơn esbuild, rspack, và đồng bọn. Dĩ nhiên là trong thế giới JS, khi một công cụ nào đó quả quyết rằng nó nhanh nhất thì chúng ta chỉ nên nghe thôi chứ từ từ hãy tin nhe.

• shadcn/ui, thư viện UI gần đây được khá nhiều người ưa thích, vừa thêm vào ví dụ để xây dựng forms với react-hook-form và zod.

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 😛

• 18alantom/strawberry 🍓: Một web framework siêu nhỏ, chỉ có 3KB gzipped, nhưng võ công đầy mình: có sẵn reactivity, cho phép tạo components, không cần build, không phụ thuộc vào package khác, không VDOM, v.v.

• vanjs-org/van: là 🍦 chứ không phải 🚐, là một framework tạo UI siêu nhỏ khác, cũng hỗ trợ reactivity, không phụ thuộc, không build. Mình đang nghĩ những thư viện này chắc rất phù hợp khi dùng chung với Astro hay 11ty.

• microsoft/fluentui: Hệ thống thiết kế của Microsoft vừa ra bản 2.0. Bên cạnh Material Design của Google thì Fluent cũng khá phù hợp để thiết kế ứng dụng doanh nghiệp ha. Repo này chứa các components cho React và web components.

• microsoft/devicescript: Một sản phẩm khác từ Microsoft, DeviceScript là TypeScript cho các thiết bị IoT, thường có giới hạn về CPU và bộ nhớ. Đi kèm là một extension cho VSCode, hỗ trợ debugging và simulator.

• RedHatOfficial/Overpass: Overpass là một họ font lấy cảm hứng từ font Highway Gothic, được thiết kế bởi Delve Fonts. Hỗ trợ tiếng Việt, và có phiên bản monospace nữa.

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

• 11 HTML best practices for login & sign-up forms: Ứng dụng web nào cũng có form đăng nhập/ đăng ký, có gì lạ đâu. Nhưng Andrey Sitnik của Evil Martians đưa ra những điểm bạn cần lưu ý khi thiết kế các form này.

• Deploying AVIF for more responsive websites: web.dev giới thiệu về định dạng hình ảnh mới AVIF và trạng thái hỗ trợ trên các trình duyệt. So với WebP thì AVIF có dung lượng nhẹ hơn, giải mã nhanh hơn, hỗ trợ hình chuyển động (animated) nên có thể thay thế cho GIF.

• You Might Not Need React Query: Tóm tắt bài là nếu bạn bắt đầu dự án mới bằng Next.js hay Remix, sử dụng React Server Component (RSC) thì có thể bạn không cần React Query nữa. À mà nếu bạn chưa biết gì về RSC giống mình thì đọc qua bài React Server Components, Next.js App Router and examples của Addy Osmani nha.

• Why we’re bad at CSS: Mike Aparicio đưa ra 3 lý do vì sao hầu hết chúng ta viết CSS tệ, đồng thời gợi ý một phương pháp gọi là COOL CSS 😎

Kết

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