Skip to main content
Menu

Colophon, or how this site was made

Posted under #webdev

By Prathamesh Pai

Before we begin, if you don’t know it already, a colophon is the part of a book that contains the publising information - edition, date, place, typefaces etc.

Web developers and designers are a funny breed. Part artist, part technologist and almost always a nerd/geek. We’re usually proud of the little things that we do that don’t really matter and like sharing details about it.

Note: All opinions are subjective and not meant to discredit your favourite framework/language/typeface/colour/editor/device/junk food.

Back-end

There is no back-end :) This website was created using the Jekyll static site generator with a host of custom plugins I wrote using the Ruby programming language. Why Jekyll, isn’t it old fashioned? Everyone seems to be using one of the new JavaScript SSGs these days. I love Jekyll’s simplicity and I’ve been using it for over a decade, so I know how it works. Also, Ruby is much much much more fun to code in than Javascript. I am not a fan of the JavaScript everywhere approach anyway.

There was a previous edition of this site for which I had written my own SSG using Python, but it was getting too tedious to maintain. Jekyll just works.

Front-end

Plain, handcoded HTML and CSS of course. No SASS, Tailwind or any kind of build tool. I wouldn’t have it any other way. I have not had to use JavaScript anywhere on this website (except for one small line that’s not critical to the functionality). Not because I dislike JavaScript, but I didn’t need it at all. Modern HTML and CSS can do a lot of things without having to resort to JS. This might change in the future if I add something that needs the use of JS (and this page will be updated to reflect that).

Typography

My favourite element of design. I have used 3 typefaces on this website:

  1. Merriweather, a Transitional Serif by Eben Sorkin for the body text.
  2. Chunk, a quirky Slab Serif by Meredith Mandel for the headings.
  3. The default monospace typeface of your device for extras, so depending on your device Menlo, Cascadia, Segoe UI, Ubuntu, Roboto or something similar.

Why a serif typeface for body text? Why not? Everyone seems to have switched to sans-serif for body text for this ultra modern, clean and minimalistic feel. I needed a typeface with some character while still being very readable and had set myself a challenge to use only typefaces with an open font license. Merriweather is beautiful, until I get bored with it :)

Editors

Vim is my code editor of choice, with a few selected plugins and a config file that has evolved over 2 decades. Not Neovim, just plain vim. Has worked for me for years, so why change now? I feel like a deer in the headlights in any other editor. Don’t need a language server, heavy code completion or anything fancy. Vim works just fine.

All the pages and posts are written in Markdown using the wonderful Zettlr editor.

Etc

Annoying as Apple has become, I have been a user since 2004. Far too long for me to change now. I currently use an “old” Macbook Air M1 and an Mac Mini M4.

For image editing I used my Affinity 2 apps (still using the old ones that I paid for before Affinity became free). Might change to something else if the old apps stop working as I am sceptical of Canva’s plans for Affinty. Open to suggestions if you have any (need not be open source, but has to be a one time license, so no Adobe).

Most of my development time is spent in a terminal. Ghostty works great for me out of the box, with TMUX and Vim.

Hosting

The site is hosted on a DigitalOcean droplet running Ubuntu Server.

:wq