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

Tuần này học gì: Tìm ngày đầu tiên trong tuần với Intl.Locale#getWeekInfo()

Bạn có biết có một vài miền địa phương (locale) chọn ngày đầu tiên của tuần là Chủ nhật chứ không phải thứ Hai? Nói đâu xa chính là Hợp chủng quốc Huê Kỳ với locale en-US nè. Thay vì phải ghi nhớ hay hard-coding thông tin này, chúng ta có thể dùng ngay phương thức getWeekInfo() của lớp Intl.Locale.

new Intl.Locale('en-US').getWeekInfo()
// { firstDay: 7, weekend: [6, 7], minimalDays: 1 }

new Intl.Locale('en-GB').getWeekInfo()
// { firstDay: 1, weekend: [6, 7], minimalDays: 1 }

new Intl.Locale('vi').getWeekInfo()
// { firstDay: 1, weekend: [6, 7], minimalDays: 1 }

Phương thức getWeekInfo() trả về một đối tượng có các thuộc tính:

• firstDay: Ngày đầu tiên của tuần, với thứ Hai có giá trị là 1, thứ Ba là 2, v.v. cho đến Chủ nhật là 7.

• weekend: Một mảng số nguyên chỉ định ngày nào trong tuần được xem là cuối tuần, ví dụ như thứ Bảy với Chủ nhật sẽ là [6, 7].

• minimalDays: Giá trị số quy định số ngày tối thiểu để tính tuần đầu tiên của một tháng hay năm. Ví dụ nếu minimalDays = 1 và ngày 1 tháng 1 là Chủ nhật thì tuần 1 của năm đó sẽ được tính, nhưng nếu minimalDays = 7 thì tuần 1 sẽ được tính từ ngày 2.

🚨 Lưu ý: Hiện tại (tháng 7 năm 2023) thì chưa có trình duyệt nào hỗ trợ phương thức này hết, nhưng Chrome và Safari có thuộc tính Intl.Locale#weekInfo cũng trả về kết quả tương tự, nên cho chắc ăn thì chúng ta có thể viết thế này:

function getWeekInfo(locale) {
  const lc = new Intl.Locale(locale)

  return lc.getWeekInfo?.() ?? lc.weekInfo
}

Bạn có thể dùng thông tin của getWeekInfo() khi tự xây dựng component như date picker hay calendar chẳng hạn.

Tin vắn

• Microsoft vừa thông báo phát hành phiên bản 5.2 beta cho TypeScript. Tin này không vắn lắm nên chắc tuần sau mình lên bài chi tiết những tính năng hay ho sẽ xuất hiện. Cùng chờ nhé.

• Prisma, ORM thế hệ mới dành cho Node.js hay TypeScript, vừa lên phiên bản 5.0. Phiên bản này nâng cấp hiệu suất của Prisma khi sử dụng trên môi trường serverless như AWS Lambda. Thay vì sử dụng một giao thức giống giống như GraphQL để tương tác giữa Prisma client và bộ nguồn truy vấn, Prisma 5 chuyển sang sử dụng JSON để giảm thời gian khởi động và thực thi. Đồng thời thay đổi này còn giúp giảm đi phân nửa số lượng gói phụ thuộc cho Prisma client. Ngoài ra Prisma còn thực hiện mở kết nối và/ hoặc chuyển đổi schema một cách song song thay vì tuần tự như trước đây.

• WasmEdge, nền tảng chạy WebAssembly gọn nhẹ với hiệu suất cao, vừa phát hành phiên bản 0.13.0

• Phiên bản Web Components của Material Design đã hoàn thiện bản beta và sẽ ra mắt phiên bản 1.0 vào quý 3 năm nay. Theo như roadmap ở đây, chúng ta sẽ có 22 components như Button, Checkbox, Dialog, Select, v.v. Dự án này sẽ hỗ trợ hai phiên bản gần nhất của tất cả trình duyệt.

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 😛

• TSOptics/optics: là một thư viện quản lý trạng thái dành cho các ứng dụng TypeScript, sử dụng khái niệm optics giúp thao tác trên các đối tượng lồng nhau (nested objects) dễ dàng.

• Effect-TS/effect: Trong khi đó, Effect lại là kiểu dữ liệu Effect<Requirements, Error, Value> giúp bạn đóng gói logic trong ứng dụng TypeScript. Cũng khó mà giải thích ngắn gọn được nên bạn xem video (9:04) ở đây cho nhanh.

• radix-vue/shadcn-vue: Bản port của shadcn-ui dành cho Vue. Cứ cái gì mới mới nổi nổi của React là sẽ có bản port cho Vue hà.

• thedevdojo/pines: Pines UI là một tập hợp các components như Accordion, Banner, Date Picker, Dropdown Menu, v.v. được DevDojo phát triển cho Alpine và Tailwind.

• Demystifying React Server Components with NextJS 13 App Router: Một ứng dụng demo cho RSC với Next.js 13. Dành cho những bạn đã có kinh nghiệm với React nhưng không/ chưa biết về RSC. Hoặc những bạn đã nhảy tàu lên RSC và muốn tìm hiểu thêm về nó.

• neon-bindings/neon: Rust bindings cho các modules của Node.js, vì một ứng dụng JavaScript văn minh, an toàn.

• unsuckjs.com: là một tập hợp những thư viện JavaScript nhỏ gọn để tích hợp dần dần (progressively enhance) vào ứng dụng web, thay vì sử dụng “đao to búa lớn” như React, Vue, hay Angular.

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

• From Hacks to Elegance: Transforming a Card Component with Modern CSS Wizardry: Nils Binder sử dụng những tính năng “mới keng xà beng” của CSS như Cascade Layers, Container Queries, và subgrid để xây dựng lại một component Card. Nếu đây là lần đầu tiên bạn nghe đến những khái niệm này thì đừng bỏ qua bài viết trên nha.

• Should I change the default HTML font-size to 62.5%?: Một CSS hack từ xa lắc xa lơ để chuyển 1rem thành 10px giúp tính toán kích thước từ pixel qua rem dễ dàng hơn. Nhưng bây giờ đã là 2023 và bạn có nên làm như vậy không? Bài viết của Grace Snow sẽ đưa ra những lý do nên và không nên để bạn tự quyết định.

• Beyond Browsers: The Longterm Future of JavaScript Standards: Bài viết của Mary Branscombe trên The New Stack đưa ra một góc nhìn tổng quan khi JavaScript trên những môi trường không phải trình duyệt như Node, Bun, hay Cloudflare Worker, và vai trò của WinterCG (Web-interoperable Runtimes Community Group), một tổ chức trung gian để nâng cao tính tương thích giữa các runtime với nhau.

Kết

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