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

Tuần này học gì: Ghi chép nhỏ về Request và Response

Đúng là phải bắt tay vào làm mới học và nhớ được đó mọi người. Tuần rồi mình quậy thử với Cloudflare Pages và Worker/ Function mới thấy có những tác vụ khi làm với web framework như Express hay Fastify thì có sẵn hết rồi, đến khi chuyển qua xài hàng tiêu chuẩn như Request và Response thì thấy khác khác.

Đầu tiên là đọc dữ liệu từ POST requests gửi dưới client lên. Trong Express thì chúng ta có thể dùng middleware express.json() và express.urlencoded() để parse dữ liệu POST. Chuyển qua xài lớp Request thì bạn có thể dùng:

const formBody = await Request.formData()
const jsonBody = await Request.json()

Có qua thì phải có lại, lớp Response cũng có những phương thức tĩnh giúp chúng ta trả về JSON.

Response.json(data, { status, statusText, headers })

hoặc thực hiện chuyển trang (redirection).

Response.redirect(url, status)

Xài Response.redirect nhưng ví dụ mình muốn gửi thêm headers khi thực hiện redirect thì sao? Bạn phải tạo một đối tượng Response kèm theo header Location.

const headers = {
  'Set-Cookie': 'a=z; MaxAge=86400; Path=/; HttpOnly; Secure',
  Location: '/welcome',
}
const res = new Response(body, { status: 301, headers })

Tạm vậy đó.

Tin vắn

• Bản khảo sát The State of WebAssembly 2023 vừa công bố kết quả. Theo như bài phân tích của Colin Eberhardt đăng trên blog Scott Logic thì Rust vẫn là lựa chọn đầu tiên khi làm việc với Web Assembly, theo sau là JavaScript, C++, Go, v.v. Swift và Zig, mặc dù xuất hiện/ hỗ trợ wasm sau nhưng cũng đang rất được ưa thích. Wasm được sử dụng nhiều nhất trong các ứng dụng web, theo sau là chạy trên các hàm serverless. Ngoài ra Wasm còn được dùng trong ứng dụng desktop, hay ngay cả trong game. Có vẻ như lời hứa “write once, run anywhere” năm nào của Java đang được Web Assembly hiện thực hóa.

• Material Design 3 chính thức ra mắt phiên bản Web, sử dụng Web Component.

• TanStack Query phát hành phiên bản 5.0. Đây là thư viện quản lý trạng thái bất đồng bộ đa nền tảng được rất nhiều người yêu thích. Nghe hoành tráng ha, nhưng chủ yếu là dùng để quản lý chuyện gửi và nhận dữ liệu từ server. TanStack Query rất tiện khi có sẵn quản lý trạng thái loading, lỗi, và tự động thử lại khi gửi requests thất bại, vân vân và mây mây. Nâng cấp lên phiên bản 5.0 có vẻ nhẹ nhàng, nhưng bạn nên đọc qua hướng dẫn để không bị lỗi nhe.

• Node.js phát hành phiên bản 20.8.1 ngày 13 tháng 10 vừa qua, chủ yếu để sửa các lỗi bảo mật. Bên cạnh đó Node.js 21 cũng ra lò. Phiên bản này nâng cấp lên engine V8 11.8, phiên bản WebStreams ổn định, giới thiệu cờ --experimental-websocket để sử dụng WebSocket client có sẵn, cùng với cờ --experimental-default-type=module để tự động nhận các tập tin .js là ES module, và những cải tiến khác cho test runner.

• Ngoài ra chúng ta cũng có Astro 3.3 mang đến component <Picture /> xịn hơn, chuyển sang xài thư viện shikiji thay cho shiki để tô màu mã nguồn. shikiji được phát triển bởi @antfu và chỉ sử dụng ESM.

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 😛

• honkit/honkit: là công cụ thay thế cho Gitbook, hiện đã ngưng phát triển. HonKit giúp bạn tạo sách, tài liệu kỹ thuật, hay bất cứ nội dung gì bạn có thể nghĩ ra bằng Markdown hoặc AsciiDoc

• Zed là một ứng dụng soạn thảo mới được phát triển bởi nhóm tác giả của Atom và Tree-sitter. Cũng như các trình soạn thảo khác, Zed bao gồm những tính năng tô màu code, tự động canh hàng, hỗ trợ Language Server Protocol cho tính năng gợi ý code, nhảy đến khai báo, refactoring, v.v. nhưng gọn nhẹ, xài ít bộ nhớ, và hiệu năng cao hơn. Zed còn có chế độ Vim, tích hợp terminal, và một cơ chế chia sẻ + hợp tác với các thành viên trong cùng một dự án. Vì còn khá mới nên Zed chỉ hỗ trợ một số theme + ngôn ngữ nhất định, cũng như chưa có extension hay những tính năng cần thiết khác như Format On Save… nhưng cũng đáng để thử đó mọi người. Mình đang viết những dòng này trên Zed đây.

• OrbStack là ứng dụng quản lý Docker containers cho MacOS. OrbStack có thể thay thế Docker Desktop, nhanh hơn mà lại gọn nhẹ, ít tốn tài nguyên hơn. OrbStack có nhiều gói thành viên, nếu chỉ xài cho mục đích cá nhân thôi thì miễn phí. Câu hỏi là làm frontend cần chi chạy Docker? Cũng hên xui nếu như dự án của bạn có backend với frontend chung một repo ha.

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

• Introducing Enhance Music: Bài viết của Cole Peters về những kinh nghiệm khi xây dựng Enhance Music hoàn toàn bằng HTML với càng ít JavaScript càng tốt. Bài khá đầy đủ và chi tiết, là một ví dụ cụ thể khi thực hiện cải tiến từ từ (progressive enhancement).

• The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache: Bài viết của Harry Roberts, tác giả của InuitCSS nổi tiếng một thời. Harry so sánh hiệu suất khi gửi tập tin JavaScript và CSS từ server xuống client thông qua HTTP 1 hoặc 2, cùng những lời khuyên để cache tài nguyên. Bài viết còn giới thiệu thêm vài chữ C nữa như Connection và Client.

• We migrated to SQL. Our biggest learning? Don’t use Prisma: Bài viết của Mehul Mohan trên Codedamn chia sẻ kinh nghiệm đau thương khi sử dụng Prisma, ORM thế hệ mới viết bằng TypeScript dành cho Node.js. Đại loại là Prisma có những quyết định về mặt thiết kế lạ kỳ làm ảnh hưởng tới hiệu năng, kích thước to bự không phù hợp khi deploy lên môi trường serverless, xài chung với PlanetScale là “cặp đôi hoàn cảnh”, vân vân và mây mây.

• Bringing Javascript to WebAssembly for Shopify Functions: Das Surma ghi lại những gì Shopify làm để chạy JavaScript trên nền tảng WebAssembly cho Shopify Functions. Tại sao ư? Vì Shopify Functions trước giờ chỉ hỗ trợ Rust mà thôi.

• 🎥 Kilian Valkhof - Stop using JS for that: Moving features to CSS and HTML (35:52): Video của Kilian Valkhof nói về những tính năng như accordions, auto-suggest, smooth scrolling, dialogs hoàn toàn có thể cài đặt bằng HTML/ CSS mà không cần dùng JavaScript.

Kết

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