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

Vercel Storage, Next.js 13.4, và những dịch vụ khác

Hồi thứ hai tuần này, Vercel đã công bố các giải pháp lưu trữ dữ liệu mới trên nền tảng, trong một nỗ lực làm cho cuộc đời lập trình viên dễ thở hơn (hay tìm cách dụ dỗ tham gia xong không thoát ra được).

Vercel KV

Là một cơ sở dữ liệu dạng khóa - giá trị (key - value) tương thích với Redis. Bạn có thể dùng Vercel KV để xây dựng các tính năng như giới hạn dung lượng sử dụng (rate limit), quản lý session, hay bất cứ trạng thái nào phù hợp. Cách sử dụng thì rất đơn giản.

import kv from '@vercel/kv'

export async function getPrefs() {
  const prefs = await kv.get('prefs')
  return prefs || {}
}

export async function updatePrefs(prefs: Record<string, string>) {
  return kv.set('prefs', prefs)
}

Với gói Hobby bạn được gửi 30,000 request mỗi tháng. Vercel KV sử dụng dịch vụ của Upstash bên dưới.

Vercel Postgres

Tiếp theo là Vercel Postgres, mang đến một cơ sở dữ liệu Postgresql ngay tại edge. Với Vercel Postgres, lập trình viên frontend có được cơ hội để viết SQL ngay trong component, mở ra một chân trời mới để nâng cao kỹ năng, chờ tới ngày nhảy qua viết backend luôn cho nhẹ nợ.

import { sql } from '@vercel/postgres'
import { redirect } from 'next/navigation'

async function create(formData: FormData) {
  'use server'
  const { rows } = await sql`
    INSERT INTO products (name)
    VALUES (${formData.get('name')})
  `
  redirect(`/product/${rows[0].slug}`)
}

export default function Page() {
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  )
}

Vercel Postgres được thiết kế để tích hợp nhẹ nhàng với Next.js App Router và Server Components, đồng thời cũng có thể dùng cho Nuxt và SvelteKit. Với gói Hobby bạn có thể sử dụng 60 giờ tính toán. Dịch vụ này sử dụng Neon bên dưới.

Vercel Blob

Cuối cùng là Vercel Boob Blob, cho phép bạn lưu trữ các tập tin tĩnh giống như Amazon S3 vậy. Sử dụng Cloudflare R2 bên dưới, bạn có thể dùng Vercel Blob để chứa các tập tin người dùng upload, hoặc chứa các tập tin tự tạo ra, hay làm gì khác thì tùy bạn. Hiện tại Vercel Blob đang trong trạng thái Private Beta. Website của Vercel không nói rõ bạn có thể lưu được bao nhiêu GB dữ liệu, nhưng chắc xài nhiều quá thì trả thêm tiền thôi.

import { put } from '@vercel/blob'

export const runtime = 'edge'

export async function PUT(request: Request) {
  const { url } = await put('avatars/user-12345.png', request.body, { access: 'public' })

  return Response.json({ url })
}

Các giải pháp này được quảng cáo là “server-first” và “edge-first”. Cũng hông rõ nghĩa là gì, nhưng chắc là nhanh như điện. Ottomated làm một bảng so sánh giá cả các dịch vụ Vercel được bán lại với giá mua trực tiếp. Xem thử coi bạn muốn xài bên nào ha.

Bên cạnh đó thì Next.js cũng ra phiên bản 13.4, đánh dấu App Router đã trở nên ổn định, đồng thời đính kèm bản beta của Turbopack và bản alpha cho Server Actions.

Mém quên, tuần qua cũng xuất hiện thêm Vercel Spaces và Visual Editing từ Vercel.

Tin vắn

• Qwik cuối cùng cũng ra phiên bản 1.0.

• Trong khi đó Angular lại ra bản 16 với quá trời tính năng.

• Deno phát hành phiên bản 1.33, đồng thời “nhá hàng” phiên bản 2.0

• WebContainers của Stackblitz cuối cùng cũng có thể chạy trên Safari, iOS, và iPadOS 🥳

• Slack cũng đu trend với Slack GPT 🤷‍♂️

• Hồi tháng 11 năm ngoái Ehkoo có đưa tin Remix về với vòng tay của Shopify thì mới đây công ty mẹ quyết định cắt 20% nhân sự. Xui sao anh Logan McAnsh của team Remix cũng nằm trong số phải ra đi. Chưa biết ảnh hưởng thế nào tới team Remix.

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 😛

• mjmlio/mjml là một thư viện xịn xò giúp bạn tạo email responsive dễ dàng.

• lovell/sharp: thư viện để xử lý ảnh siêu nhanh trên node.js. Hỗ trợ chuyển hình từ JPEG, PNG, WebP, AVIF và TIFF sang định dạng và kích thước nhỏ hơn để có thể tải nhanh hơn.

• Evercoder/culori: thư viện JavaScript giúp chuyển đổi và xử lý tất cả hệ màu được quy định trong CSS Colors Level 4.

• AllThingsSmitty/css-protips: 26 tuyệt chiêu CSS giúp bạn nâng trình, sử dụng các tính năng CSS hiện đại.

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

• JS private class fields considered harmful: Lea Verou, tác giả của Color.js, chia sẻ vì sao các trường/ thuộc tính riêng tư (private fields/ properties) của một lớp lại ảnh hưởng tới chuyện cài đặt reactivity bằng Proxy. Cá nhân mình thì thấy vì chỉ vì không xài được với Vue mà phải sửa cả một thư viện thì không đáng lắm.

• I want to talk about WebGPU: Đâu đó ba tuần trước Ehkoo có nhắc đến Chrome bắt đầu hỗ trợ WebGPU từ phiên bản 113 thì hôm nay bạn đọc qua thử bài rất chi tiết của andi nói về lịch sử của graphic APIs, và cách sử dụng WebGPU nha.

• Blur camera background: Ngày xưa phải biết chụp hình xóa phông thì mới gọi là nhiếp ảnh gia, còn bây giờ chỉ cần gọi đến Background Blur API là bạn có thể làm mờ phông nền khi sử dụng camera trên web rồi. Công nghệ đỉnh ghê.

• Why I Like Using Maps (and WeakMaps) for Handling DOM Nodes: Tìm hiểu về cách dùng Map/ WeakMap trong JavaScript thông qua bài viết của Alex MacArthur.

Kết

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