colophon
how it's built
hand-written html, css and a little javascript. no framework, no build step, no bundler, no package manager, no dependencies. the repository is the website: what's in the folder is what deploys, through cloudflare pages. view source; it's meant to be read.
the stylesheets are six small files linked in order, never @imported, because @import hides each file from the browser until its parent has loaded. the server also sends them as early hints, so the browser starts fetching before the html arrives.
type and colour
everything is set in merriweather, by sorkin type, self-hosted: two cuts, latin and latin-ext, roman and italic. everything is lowercase. the palette is greys. there are exactly two accent colours, a highlighter yellow for things worth marking and a gold that marks a featured post. there is one shadow on the whole site, and almost no animation.
what a page weighs
measured from the files in the repository, gzipped at level 9. cloudflare may send brotli, which is a little smaller. the font is cached for a year after the first visit.
| page | html | css | js | with font |
|---|---|---|---|---|
| home | 6.9 kb | 15.4 kb | 3.6 kb | 121.2 kb |
| d's labs | 5.0 kb | 15.4 kb | 3.2 kb | 118.9 kb |
| an explainer | 4.8 kb | 16.1 kb | 2.5 kb | 118.6 kb |
| a reflection | 2.4 kb | 15.4 kb | 2.5 kb | 115.6 kb |
| now | 2.3 kb | 15.4 kb | 2.5 kb | 115.5 kb |
the font is 95.3 kb and is the heaviest thing on a first visit. lighthouse scores aren't recorded yet; when i run them on a throttled phone profile, they go here.
what it refuses to do
- track you across sites. analytics is cloudflare web analytics: no cookies, no fingerprinting, no ad network.
- load a font or a stylesheet from a third party. the one outside script is cloudflare's analytics beacon.
- animate for decoration, scroll-jack, or move anything you didn't ask to move.
- need javascript to be read. every demo leaves a readable page without it.
small things
- press
`on any page for a terminal. typehelp. curl -L dharun.devreturns the site as plain text, 72 columns wide.- every explainer has a plain-text twin, for reading or quoting.
- posts print as clean essays.
- humans.txt, llms.txt, security.txt, an atom feed and a changelog feed.
- there's a lock on the home page. it's a toy, and the source says so.