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

Tin vắn

• Netlify thử nghiệm dịch vụ Netlify Blobs, cho phép người dùng lưu trữ dữ liệu dạng “khóa - giá trị” trong ứng dụng. Điểm khác biệt so với các dịch vụ khác là “giá trị” ở đây có thể là bất cứ gì: dữ liệu không cấu trúc, JSON, hay tập tin binary. Netlify Blobs có thể được sử dụng trong quá trình build, trong hàm serverless, hoặc edge functions. Cách sử dụng cũng khá đơn giản, không cần cài đặt hay gì hết.

  import { getStore } from '@netlify/blobs'
  
  export default async (req) => {
    const store = getStore('media')
  
    const form = await req.formData()
    const file = form.get('file')
  
    await store.set('file:name', 'abc.webp')
    await store.set('file:content', file)
  }
  

• Prettier 3.1 giới thiệu cờ thử nghiệm --experimental-ternaries để định dạng toán tử hai ngôi (ternary operator hay ? :) khi sử dụng lồng nhau. Trước phiên bản 3.1 chúng nằm cùng một cột, qua 3.1 sẽ được đẩy vào trong, nhìn thuận mắt hơn hẳn. Nhưng mình vẫn nghĩ không nên sử dụng ? : lồng nhau. Tính năng này có thể sẽ ra mắt chính thức vào cuối năm nay. Ngoài ra Prettier 3.1 cũng mang đến hỗ trợ cho cú pháp mới @if @else @switch @case của Angular 17.

  // prettier-ignore
  // Prettier 3.0
  const message =
    i % 3 === 0 && i % 5 === 0
      ? "fizzbuzz"
      : i % 3 === 0
      ? "fizz"
      : i % 5 === 0
      ? "buzz"
      : String(i);
  
  // prettier-ignore
  // Prettier 3.1
  const message =
    i % 3 === 0 && i % 5 === 0
      ? "fizzbuzz"
      : i % 3 === 0
        ? "fizz"
        : i % 5 === 0
          ? "buzz"
          : String(i);
  

  Một tin lề đường khác là Prettier đang được treo giải thưởng $22.5k để viết lại bằng Rút 🦀 Ngoài chuyện bắt trend thì mình không biết viết lại để làm gì, khi bản thân tác giả James Long cũng không nghĩ Prettier “quá chậm”.

• Vite phát hành phiên bản 5.0, nâng cấp lên Rollup 4, không hỗ trợ CJS khi gọi require('vite') nữa, và một vài thay đổi khác. Yêu cầu phải sử dụng tối thiểu Node.js 18.

• Node.js phiên bản 21.2.0 bổ sung import.meta.dirname và import.meta.filename, tương tự như __dirname và __filename của những ngày xưa cũ.

Mới thấy trên quầy

Một vài thư viện/ công cụ/ dự án hữu ích mà bọn mình mới phát hiện 😛

• Automerge là thư viện chứa các cấu trúc dữ liệu để xây dựng ứng dụng hợp tác thời gian thực, ưu tiên local-first. Automerge được thiết kế để không phụ thuộc vào giao thức mạng được sử dụng, dù đó là client-server (WebSocket), mạng ngang hàng peer-to-peer (WebRTC), hay hoàn toàn local như Bluetooth.

• loro-dev/loro: Không hẹn mà gặp, lại là một thư viện để làm app hợp tác thời gian thực nữa. Loro là một thư viện khác hỗ trợ CRDT (Conflict-free Replicated Data Types). Loro nhìn nhận chịu ảnh hưởng của Automerge.

• gilbarbara/react-joyride: là một thư viện React giúp bạn làm kiểu tour trong ứng dụng. Kiểu mới có tính năng này mới nè, click vô đây đi, blah blah blah.

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

• Minimalist Affordances: Making the right tradeoffs: Lea Verou chia sẻ những suy nghĩ về thiết kế mới của hộp soạn thảo trên Github, và khi nào nên dừng đánh đổi trải nghiệm người dùng cho tính thẩm mỹ. Bài viết rất đáng đọc, không chỉ nói về UX mà còn đề cập đến một số khái niệm không phải UX cũng rất thú vị.

• HTML First là tập hợp 3 quy tắc của Tony Ennis để xây dựng ứng dụng web dễ dàng và nhanh hơn, đồng thời nâng cao khả năng tiếp cận bằng cách 1/ tận dụng những tính năng hiện đại của các trình duyệt 2/ tận dụng các thuộc tính HTML 3/ tận dụng khả năng xem mã nguồn (View Source) của trình duyệt. Dĩ nhiên là không thể áp dụng những quy tắc này một cách mù quáng mà cần phải dựa vào tính chất của từng dự án khác nhau nữa rồi.

• My Journey to 3x Faster Builds: Trimming Barrel File Imports: Bài viết ngắn của Ramana Venkata chia sẻ kinh nghiệm cắt thời gian build của một dự án Vite sử dụng Material UI từ 26s xuống 8s bằng cách import trực tiếp Material icons.

• Accessibility Myths Debunked tập hợp những nhận định sai lầm về a11y và giải thích chúng. Là người viết web, nhiệm vụ của chúng ta là làm cho website có thể tiếp cận tới càng nhiều người càng tốt ha.

• 67 Weird Debugging Tricks Your Browser Doesn’t Want You to Know: Ngoài cái tựa bài nghe hơi trịch thượng và câu view thì bài viết này cũng được: giới thiệu một số thủ thuật để sử dụng developer tools của các trình duyệt hiệu quả hơn. Mình hay xài copy().

Kết

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