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

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.

TypeScript7: Mọi dự án web, kiểm tra kiểu bằng trình biên dịch gốc mới
React19: Trang web, bảng điều khiển và trò chơi
TanStack: Start, Router, Query, Form và Table
Svelte5: 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 CSS4: 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.

Vite8: Build và máy chủ phát triển, chạy trên Rolldown
pnpm12: 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.

Người truy cập

Biên mạng CloudflareDNS, TLS, bộ đệm, tường lửa

chabulab.comTrang này và The StashStatic Assets
chabulab.com/blogs/*Blog, Worker riêngStatic Assets
ribbon.chabulab.comTrang của RibbonStatic Assets
ribbon.chabulab.com/v1/*API bản quyềnD1Rate Limiting
games.chabulab.comTrang trò chơiStatic Assets
games.chabulab.com/four-fold/*Tứ Quý, Worker riêngStatic Assets
lexiloop.chabulab.comLexiLoop trên webStatic Assets
tools.chabulab.comTrang công cụStatic Assets
tools.chabulab.com/convert/*Chuyển đổi tệp, Worker riêngStatic 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