Dựng cái nhật ký
“Ship xong rồi, ai hay?”
Mỗi tuần mình ship nhiều thứ ví dụ: castmd, cc4.marketing, vài Chrome extension. Ship xong thì im lặng. Không ai biết cái gì đã đổi, mình cũng không nhớ.
Build Log là nỗ lực sửa chuyện đó. Mỗi lần ship, mình ra một số. Số này kể chuyện dựng chính trang này.
Lời trong video · 2:13
Chào, mình là Trí. Đây là số đầu tiên của Build Log, và mình có làm các sản phẩm nhỏ, ví dụ như castmd, cc4.marketing, rồi các Chrome extension. Mỗi tuần mình cũng build và ship nhiều thứ, nhưng thường ship xong thì mình để đó, im lặng, không ai hay biết.
Mình thử làm giống một công ty công nghệ, viết ra những bản release note, làm giống một tờ báo, có ngày, có số kỳ, và mình sẽ nói chuyện ở một góc nhỏ màn hình, giống một phát thanh viên. Và giờ nó ở đây, trang mà bạn đang xem.
Số này mình nói về chính trang mình đang build. Mình dựng nó với Claude Code. Mình thử nhiều kiểu kết hợp, nhiều kiểu font, cuối cùng chọn Fraunces làm font chính. Mình chỉnh vài chỗ nhỏ, như đổi icon thành cái búa, thêm vài màu nữa. Mà thôi, đây là chỗ để build, không phải để nhây.
Nhật ký này mình viết theo kiểu kết hợp: giọng Hemingway, cộng với Simplified Technical English cho phần kỹ thuật, để các thuật ngữ đơn giản và dễ hiểu. Sau đó mình test thêm phần responsive trên điện thoại và máy tính bảng.
Từ giờ, mỗi lần ship, mình sẽ ra một số. Có số dài như một bản release, cũng có số ngắn, nói vài phút. Mỗi số có trang riêng. Mình up lên luôn, không chỉnh sửa nhiều. Nếu bạn muốn xem mình làm gì tiếp, ghé trang của mình: mtri.me/log. Còn bạn muốn mình kể về sản phẩm nào trước, cứ nhắn mình. Hẹn số sau.
Học từ một tờ báo
Một tờ báo có ngày, có số kỳ, có người viết. Build Log dùng cấu trúc đó. Mỗi số có số thứ tự, tên sản phẩm và một video ngắn. Người viết nói chuyện ở góc màn hình.
Chín font, chọn một
Mình cần một font serif đậm, có đủ dấu tiếng Việt. Mình so chín font miễn phí. FrauncesThuật ngữFont serif miễn phí trên Google Fonts. Có trục độ mềm (SOFT) và hỗ trợ tiếng Việt.Tất cả thuật ngữ → 800 rõ nhất ở tiêu đề lớn. Tiêu đề phụ dùng Fraunces 400. Chữ thân bài dùng Newsreader.
Chi tiết nhỏ
Vài chi tiết nhỏ. Mỗi cái là một quyết định.
Icon mình chọn là cái búa
Mình đã thử ba icon: búa, cuốc, búa liềm. Ở cỡ 22px, búa liềm khó nhìn. Cái búa rõ nhất. Đây cũng là chỗ để build, nên không dùng búa liềm.
Ba khổ màn hình
Trang có ba kích thước: máy tính, tablet và điện thoại. Mốc chuyển là 1024px và 600px. Dưới 1024px, thông tin mastheadThuật ngữPhần đầu trang nhất của một tờ báo: tên báo, ngày, số kỳ.Tất cả thuật ngữ → chạy ngang. Ảnh và chữ xếp một cột. Video tròn dời sang góc phải và thu nhỏ.
Sáu cái mặt
Mình làm solo, nên tính năng nào cũng chỉ có 1 người. Nếu dòng ship bởi dùng một ảnh, trang lặp lại nhiều lần gây nhàm. Vẽ sáu avatar bằng CodexThuật ngữAgent lập trình của OpenAI, chạy trong terminal. Mình dùng nó để vẽ ảnh qua gói ChatGPT.Tất cả thuật ngữ →: mực tàu, mecha, cartoon, ukiyo-eThuật ngữTranh khắc gỗ Nhật Bản, thế kỷ 17 đến 19. Nét viền đậm, màu phẳng.Tất cả thuật ngữ →, risographThuật ngữMáy in stencil của Nhật. Mỗi màu in một lượt, nên hình có hạt và lệch màu nhẹ.Tất cả thuật ngữ →, pixel. Mỗi dòng credit lấy một avatar theo vị trí trên trang. Thứ tự cố định, nên mỗi lần tải trang đều giống nhau.
Hai nguyên tắc viết
Phần kể chuyện viết câu ngắn, theo HemingwayThuật ngữErnest Hemingway, nhà văn Mỹ. Ông viết câu ngắn, dùng động từ mạnh, bỏ tính từ thừa.Tất cả thuật ngữ →. Phần kỹ thuật viết theo ASD-STE100Thuật ngữSimplified Technical English. Chuẩn viết tài liệu kỹ thuật của ngành hàng không châu Âu. Câu ngắn, thể chủ động, mỗi từ chỉ có một nghĩa.Tất cả thuật ngữ →: mỗi câu một ý, dưới 25 từ, một khái niệm một từ.
Video trên R2
Video tròn ở góc là file mp4 720×720 trên Cloudflare R2Thuật ngữDịch vụ lưu file của Cloudflare, dùng được như Amazon S3. R2 không tính phí băng thông khi người xem tải file về.Tất cả thuật ngữ →. Phụ đề là file VTTThuật ngữWebVTT. Định dạng file phụ đề cho video trên web. Mỗi dòng có mốc thời gian bắt đầu và kết thúc.Tất cả thuật ngữ →. Trang không dùng YouTube.
Mộtđiềucuối
Video này quay một lần. Không cắt, không dựng lại. Mình nói dài hơn kịch bản. Lần sau mình sẽ nói ngắn hơn.
