Có gì hot? Tuần 29/30/31/32 - 2023

Hello mọi người, cả tháng qua mình đi nghỉ hè nên không viết được gì. Giờ mình đã trở lại rồi đây 😅

Tính năng mới của nền tảng web trong tháng 7

Trong tháng 7 vừa qua, chúng ta có các phiên bản trình duyệt mới: Safari 16.6, Firefox 115, và Chrome 115.

Chrome 115 mang đến animation-timeline: scroll(), giúp bạn thực hiện các hiệu ứng chuyển động tùy thuộc vào vị trí thanh cuộn (scroll-driven animations). Một ví dụ thực tế là tạo chuyển động cho thanh trạng thái đọc (reading status bar) khi đang xem một bài báo chẳng hạn. Bạn có thể tìm hiểu thêm thông qua bài viết này. Hiện tại chỉ có thể dùng trên Edge và Chrome 115.

Phiên bản Chrome mới cũng hỗ trợ sử dụng nhiều giá trị cho thuộc tính display trong CSS. Trước giờ chúng ta đã quen với display: block | grid | flex …;, giờ đây bạn có thể dùng display: block flow; hay display: inline grid;. Còn chúng khác nhau ra sao thì hãy chờ bài viết khác của Ehkoo nhe. Firefox 70 và Safari 15 đã hỗ trợ tính năng này.

Tuần này học gì: Lấy danh sách múi giờ bằng JavaScript

Một ngày đẹp trời nọ bạn cần phải làm một dropdown để người dùng chọn múi giờ. Câu hỏi đặt ra là làm sao để có danh sách các múi giờ đây? Cách đơn giản gọn nhẹ nhất là tìm đâu đó trên mạng, copy - paste là xong. Ngựa hơn là tìm một package trên npm, chẳng hạn như cái này hay này.

Nhưng bạn có thể lấy ngay danh sách múi giờ theo cơ sở dữ liệu IANA có sẵn trong hệ thống bằng đoạn code sau:

const timezones = Intl.supportedValuesOf('timeZone')

for (const tz of timezones) {
  console.log(tz)
}
// "Africa/Abidjan", "Africa/Accra",
// "Africa/Addis_Ababa", "Africa/Algiers", …

Xịn nhất là timezones ở trên đã được sắp xếp sẵn. Phương thức tĩnh Intl.supportedValuesOf(key) cũng hỗ trợ những giá trị khác cho key như:

• calendar: Danh sách các lịch trong hệ thống, ví dụ như gregory (là Dương lịch chúng ta thường dùng), buddhist, chinese…
• collation: Tập hợp các collation, quy định cách so sánh hai ký tự trong một ngôn ngữ.
• currency: Cái tên nói lên tất cả: các hệ thống tiền tệ
• numberingSystem: Các hệ số đếm
• unit: Các đơn vị đo lường như “acre”, “bit”, “byte”, “celsius”…

Bạn có thể dùng Intl.supportedValuesOf() trên tất cả trình duyệt, và cả trên Node.js từ phiên bản 18.

Tin vắn

• Microsoft giới thiệu TypeChat, một thư viện sử dụng định nghĩa kiểu dữ liệu (type definitions) trong dự án, kết hợp với mô hình ngôn ngữ lớn (large language model - LLM) hay “AI” để tạo kết quả JSON dựa vào yêu cầu của người dùng. Đại loại là người dùng nói gì đó -> TypeChat trả về JSON.

• Radix UI, thư viện headless components dành cho React được ngàn người mến vạn người thương, vừa ra mắt tính năng Theme, cho phép bạn thay đổi giao diện toàn bộ ứng dụng chỉ với với vài thiết lập. Không hề kém cạnh, shadcn/ui cũng ra tính năng tương tự.

• Netlify đóng cửa server Discord của The Jamstack Community, đặt ra câu hỏi liệu JAMStack thực sự có giá trị và còn liên quan trong thế giới web ngày nay nữa không, hay tất cả chỉ là chiêu trò marketing.

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 😛

• clauderic/dnd-kit là thư viện giúp bạn xây dựng tính năng kéo-thả trong ứng dụng React. Tính năng nổi bật bao gồm dung lượng nhỏ gọn, khoảng 13kB gzipped, có thể dùng trong nhiều tình huống khác nhau, hỗ trợ a11y, đồng thời có khả năng mở rộng.

• google/typograms được phát triển bởi Google, là một định dạng ảnh (text/typogram) gọn nhẹ dùng để vẽ biểu đồ hay hình minh họa trong các tài liệu kỹ thuật. Ý tưởng chính là kết hợp các ký tự thường dùng trong hình vẽ ASCII như | + > ^ * o # v < sau đó render thành SVG.

• primocms/primo là một CMS có kiến trúc monolithic như Wordpress, Drupal, được viết bằng Svelte. Primo giúp tạo nội dung trang theo từng khối, hỗ trợ kéo thả, đa ngôn ngữ, và cho phép nhiều người cùng chỉnh sửa một trang theo thời gian thực. Phía bên dưới Primo dựa vào Supabase để quản lý người dùng, lưu trữ dữ liệu và tập tin tĩnh, và có thể được triển khai lên Netlify/ Vercel thông qua Github Actions.

• tygzy/silicon là một thư viện CSS không sử dụng class. Nếu bạn chỉ cần một giao diện đơn giản, nhìn không tới nỗi, gắn vô là chạy thì đây.

• badrap/valita lại là một thư viện để kiểm tra dữ liệu viết bằng TypeScript.

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

• Nielsen Norman Group Study Guides Articles & Videos: Nielsen Norman thì rất nổi tiếng trong lĩnh vực nghiên cứu UX rồi. Đây là tập hợp những bài viết để bạn bắt đầu tìm hiểu về các chủ đề như Lean UX & Agile, Mobile UX, UX Writing, và rất nhiều đề tài khác nữa.

• Adapting typography to user preferences with CSS: Adam Argyle giới thiệu các kỹ thuật tùy chỉnh variable font dựa vào thiết lập từ hệ thống của người dùng. Chẳng hạn như người dùng muốn có độ tương phản cao thì chúng ta chỉnh font đậm lên một chút.

• 5 Inconvenient Truths about TypeScript: Stefan Baumgartner, tác giả của quyển TypeScript in 50 Lessons, chia sẻ 5 sự thật khó nghe về TypeScript.

• Tailwind, and the death of web craftsmanship: Jeff Sandberg chia sẻ những bất lợi khi sử dụng Tailwind, và giải pháp thay thế.

• If Web Components are so great, why am I not using them?: Dave Rupert đưa ra vài lý do vì sao Web Components vẫn chưa được sử dụng rộng rãi trong cộng đồng. Một phần cũng vì marketing chưa tốt, một phần là do quá low-level.

• Three common types of test automation: Một series về kiểm thử tự động trên web.dev được viết bởi Ramona Schwering. Trong bài viết này bạn sẽ được giới thiệu về unit, integration, và end-to-end testing. Sau đó đừng nên bỏ qua Pyramid or Crab? Find a testing strategy that fits và Defining test cases and priorities.

Kết

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