# Công cụ, và nơi chúng chạy

> Ngôn ngữ, framework, API trình duyệt và công cụ build mà ChabuLab dùng, và cách mỗi sản phẩm chạy như một Worker riêng trên Cloudflare dưới chabulab.com.

Công cụ mới và nhanh cho từng việc. Thư viện luôn theo phiên bản ổn định mới nhất, và mọi sản phẩm chạy trên mạng lưới của Cloudflare, gần người dùng nhất.

## Ngôn ngữ và framework

Một ngôn ngữ cho web, ngôn ngữ gốc cho Mac.

- **TypeScript 7:** Mọi dự án web, kiểm tra kiểu bằng trình biên dịch gốc mới
- **React 19:** Trang web, bảng điều khiển và trò chơi
- **TanStack:** Start, Router, Query, Form và Table
- **Svelte 5:** Công cụ trình duyệt gọn nhẹ xử lý media nặng
- **Expo · React Native:** LexiLoop trên web, Android và iOS từ một mã nguồn
- **Swift:** Ribbon, với AppKit và SwiftUI

## Giao diện

Thành phần nền tảng dễ tiếp cận, khoác hệ thống thiết kế riêng của từng sản phẩm.

- **Tailwind CSS 4:** Lớp tiện ích trên nền token thiết kế
- **Radix · shadcn/ui:** Thành phần dễ tiếp cận, tạo kiểu lại từ đầu
- **OKLCH tokens:** Màu đồng đều giữa nền sáng và tối
- **Commissioner · Literata:** Phông biến thiên tự lưu trữ, đủ tiếng Việt
- **Motion:** Chuyển động ngắt được giữa chừng trong trò chơi
- **Lucide:** Một bộ biểu tượng nhất quán

## Ngay trong trình duyệt

Thứ cho phép xử lý hàng giờ âm thanh và video mà không tải lên một byte nào.

- **WebCodecs:** Mã hoá và giải mã bằng phần cứng, có phương án WASM dự phòng
- **Web Audio:** Trộn âm, đo độ lớn (EBU R128) và giới hạn âm
- **Mediabunny:** Đóng gói MP3, AAC, FLAC, WAV và MP4
- **WebGL2:** Hiệu ứng ảnh, có dự phòng WebGL1
- **OPFS · IndexedDB:** Xuất tệp dài và tự lưu dự án
- **Web Workers:** Việc nặng chạy ngoài luồng chính

## Build và chất lượng

Công cụ nhanh nhất hiện có, để kiểm tra chạy sau mỗi thay đổi.

- **Vite 8:** Build và máy chủ phát triển, chạy trên Rolldown
- **pnpm 12:** Không gian làm việc, mỗi thư viện một phiên bản
- **oxlint · oxfmt:** Kiểm tra mã và định dạng viết bằng Rust
- **Vitest:** Kiểm thử đơn vị và tích hợp
- **Playwright:** Chụp màn hình ở ba khổ, kiểm tra bố cục
- **Lighthouse:** Đánh giá hiệu năng, khả năng tiếp cận và SEO

## Máy chủ và dữ liệu

Dịch vụ nhỏ, có kiểu chặt chẽ, chạy ở biên mạng.

- **Hono:** API trên Workers
- **Drizzle ORM:** SQL có kiểu và di chuyển dữ liệu
- **Zod:** Kiểm tra dữ liệu ở mọi ranh giới
- **Passkeys:** Đăng nhập WebAuthn, không mật khẩu

## Nội dung và khả năng tìm thấy

Trang mà con người, công cụ tìm kiếm và AI agent đều đọc được.

- **Prerendered HTML:** Mọi trang là HTML tĩnh, đọc được không cần JavaScript
- **Markdown twins · llms.txt:** Bản Markdown của mọi trang cho AI agent
- **JSON-LD:** Dữ liệu có cấu trúc, được kiểm tra trong test
- **unified · Shiki:** Markdown thành HTML, tô màu mã lúc build
- **Takumi:** Ảnh xem trước mạng xã hội, tạo lúc build

## Trên Cloudflare

Tên miền được mua qua Cloudflare, nên DNS, chứng chỉ và hosting nằm chung một tài khoản. Mỗi sản phẩm là một Worker với địa chỉ riêng, triển khai và quay lui độc lập.

### chabulab.com được nối như thế nào

Yêu cầu tới trung tâm dữ liệu gần nhất của Cloudflare, rồi tới Worker sở hữu địa chỉ đó. Route theo đường dẫn luôn được ưu tiên hơn Worker sở hữu cả tên miền con, nhờ vậy blog nằm gọn trong chabulab.com và mỗi trò chơi nằm trong trang trò chơi.

- `chabulab.com`: Trang này và The Stash (Static Assets)
- `chabulab.com/blogs/*`: Blog, Worker riêng (Static Assets)
- `ribbon.chabulab.com`: Trang của Ribbon (Static Assets)
- `ribbon.chabulab.com/v1/*`: API bản quyền (D1, Rate Limiting)
- `games.chabulab.com`: Trang trò chơi (Static Assets)
- `games.chabulab.com/four-fold/*`: Tứ Quý, Worker riêng (Static Assets)
- `lexiloop.chabulab.com`: LexiLoop trên web (Static Assets)
- `tools.chabulab.com`: Trang công cụ (Static Assets)
- `tools.chabulab.com/convert/*`: Chuyển đổi tệp, Worker riêng (Static Assets)

### Sản phẩm Cloudflare đang dùng

- **Registrar · DNS:** Tên miền theo giá gốc, DNS trên cùng mạng lưới
- **Workers:** Mọi trang web và API, triển khai độc lập
- **Static Assets:** Trang dựng sẵn phục vụ từ biên mạng
- **D1:** SQL cho bản quyền và nhật ký kiểm tra
- **Rate Limiting:** Giới hạn tần suất cho mọi API công khai
- **Email Routing:** hello@chabulab.com và các địa chỉ khác
- **Analytics Engine:** Phân tích truy cập không cookie, tách người và bot (đang bật)
- **Workers Logs:** Theo dõi vận hành mọi Worker