This page was designed to last. read more
I like to keep things simple and small, and this website is no exception. Here's what went into it.
Being a fan of plain-text and WYSIWYM, I tried to mimic the look of a markdown file. I used ReMarkdown for the styling, though I inlined the main styles and heavily modified them to match my opinionated take on markdown and keep the whole package as small as possible.
I used the standard monospace font, as I prioritize the loading speed over the specific font you see. However, to keep things readable, I have limited the width to 80 characters, at least on a desktop.
The site logo was made using toilet, an ASCII art generator. The font used is toilet's mono12 font. The first few versions of the site directly used the ASCII characters in a markdown code block, but I ran into rendering issues with some fonts. The second (current) version used goat to make an svg, and svgo to optimize and minify it.
In the footer, I have included the path of the current page, as well as the file size after minification using html-minifier and compression by zstd. Some parts of this site, such as the audio time calculation at the top of this page, needed some additional calculation which was does by shell arithmetic.
All such apparently dynamic elements are generated statically and replaced during the build process. During the build process, pandoc converts all my Markdown files into HTML. A script then iterates through all files to using sed to replace symbols such as {{FILENAME}} with appropriate information.
This process does face the chicken-and-egg problem, where the size is changed when it is written to the page. I could probably iterate a few times until the size converges, but that would be overkill for such an insignificant portion of the webpage. Currently the estimate overshoots by a few dozen bytes every time, but that is an acceptable trade-off for me.
This site is developed on a private repo and deployed on Cloudflare pages to get as little latency as possible.