Building the log
“Shipped it. Who noticed?”
Every week I ship a lot: castmd, cc4.marketing, a few Chrome extensions. Then it goes quiet. Nobody knows what changed, and after a while I forget too.
Build Log is my attempt to fix that. Every time I ship, I put out an issue. This one is about building this very page.
Video transcript · 2:13
Hey there, my name is Tri. And this is the very first issue of Build Log, and I make a handful of small products, for example castmd, cc4.marketing, and then a bunch of Chrome extensions. Every week I also build and ship quite a lot of things, but usually, once it ships, I just leave it there. Quiet. Nobody hears about it, and I let it be.
So I tried doing what a tech company does, and wrote some release notes, made it look like a newspaper, with a date, an issue number, and its own editions, and I talk to you from a small corner of the screen, kind of like a news anchor. And now here it is, the very page you are reading.
This issue is about the page I'm building right here, and I built it with Claude Code. I also tried out a lot of different combinations, a lot of font styles, and in the end I settled on Fraunces as the main font for the whole page. I tweaked a few small things too, like turning the icon into a hammer and adding some colors, but okay, enough of that. This is a place to build things, not to goof around.
And I write these log notes in a mixed style, a bit of Hemingway's voice, combined with Simplified Technical English for the technical parts of each issue, so that the terms stay as simple as possible, and easy for anyone to follow. After that, I also tested the responsive layout on phones and on tablets.
From now on, every single time I ship something, I'll put out a new issue. Some issues will be long, like a full release, and some will be short, just a few minutes of talking. Each issue gets its own page, and I'll post it right away, without much editing. If you'd like to see what I'm going to build next, you can drop by my site at mtri.me/log. And if there's a product you'd like me to talk about first, just message me. See you in the next issue.
Learning from a newspaper
A newspaper has a date, an issue number and a writer. Build Log uses the same structure. Each issue has a number, a product name and a short video. The writer talks from a corner of the screen.
Nine fonts, one pick
I needed a bold serif font with full Vietnamese support. I compared nine free fonts. FrauncesGlossaryA free serif font on Google Fonts, with a softness (SOFT) axis and Vietnamese support.Full glossary → 800 reads best in large headings. Subheadings use Fraunces 400. Body text uses Newsreader.
Small details
A few small details. Each one is a decision.
The icon is a hammer
I tried three icons: a hammer, a pickaxe, and a hammer and sickle. At 22px, the hammer and sickle is hard to read. The hammer is the clearest. This is also a place to build, so no hammer and sickle.
Three screen sizes
The page has three sizes: desktop, tablet and phone. The breakpoints are 1024px and 600px. Below 1024px, the mastheadGlossaryThe top of a newspaper's front page: the name, the date, the issue number.Full glossary → details scroll sideways. Images and text stack in one column. The round video moves to the right corner and gets smaller.
Six faces
I work solo, so every feature has the same one person behind it. If every shipped by line used one photo, the page would repeat itself. I drew six avatars with CodexGlossaryOpenAI's coding agent that runs in the terminal. I use it to generate images through a ChatGPT plan.Full glossary →: ink brush, mecha, cartoon, ukiyo-eGlossaryJapanese woodblock prints from the 17th to 19th centuries. Bold outlines, flat colors.Full glossary →, risographGlossaryA Japanese stencil printer. It prints one color per pass, so images have grain and slight misregistration.Full glossary →, pixel. Each credit line picks an avatar by its position on the page. The order is fixed, so every page load looks the same.
Two writing rules
The story parts use short sentences, after HemingwayGlossaryErnest Hemingway, the American writer. Short sentences, strong verbs, few adjectives.Full glossary →. The technical parts follow ASD-STE100GlossarySimplified Technical English, the European aerospace industry's standard for technical writing. Short sentences, active voice, one meaning per word.Full glossary →: one idea per sentence, under 25 words, one word per concept.
Video on R2
The round video in the corner is a 720×720 mp4 file on Cloudflare R2GlossaryCloudflare's file storage, compatible with Amazon S3. R2 does not charge for bandwidth when viewers download files.Full glossary →. Captions are a VTTGlossaryWebVTT, the caption file format for web video. Each line has a start time and an end time.Full glossary → file. The English audio is my own reading of a translated script, timed sentence by sentence to the original Vietnamese take. The page does not use YouTube.
Onelastthing
The original video is one take. No cuts, no reshoots. I talked longer than the script. Next time I will keep it shorter.
