prose&const logo Code and musings by Darshak Parikh

The Making of This Site

TL;DR: I moved from WordPress to a superfast static site. Here’s the source code.

This is not my first site. I’ve had a WordPress blog hosted on this domain since 2013. And I recommend WordPress to anyone who wants their own site but cannot write HTML and CSS.

Then why did I move away from it? Because I can. As an experienced web developer, I was itching to write my own site by hand. Reasons being:

  • I wanted to tune the performance and accessibility in very specific ways.
  • I wanted it to be a static site, which makes it inherently faster than WordPress.
  • I wanted to add personal style and navigation that was only possible if I wrote the code myself.

And thus began my hunt for the right tools.

Static Site Generator

A static site generator is a program which takes your content and puts it into nice-looking HTML pages. You can then host these on any static web server. No back end needed.

There’s no shortage of such generators on the internet. But I needed something that could build my site in milliseconds, even on my low-end hardware. This led me to two choices: Hugo and Zola.

After trying them both for a while, I decided to go with Zola for its relative simplicity and ease of learning.

I knew I’d miss out on the huge community that comes with Hugo. But thanks to Zola’s excellent documentation and forum, I rarely felt stuck. The number of community themes was irrelevant to me since I planned to write my own.

One day, I landed on a post on taniarascia.com from a web search. The site looked so clean that I decided to explore it, and was floored by how fast the navigation was. Unvisited pages opened as if they were stored offline. Something was fishy.

I dug around the site to find a post about how it was made (much like this one). It uses Gatsby, which turns the site into a single-page application. Each page load is a JSON call, and even that is likely preloaded by the current page.

I had no intention of switching away from Zola, but I wanted this superpower. I remembered seeing a GitHub repo that can do something similar to a site using traditional navigation. I peeped into my Pensieve (read: Firefox history) and came out with Turbolinks. (Update: Now using Turbo, the successor to Turbolinks.)

This library hijacks all same-origin hyperlinks on your site and fetches them in the background. Then, without causing a full page reload, it swaps out the <body> and merges the <head>, making navigation blazing fast. This way, you can still use old-school hyperlinks and your site will behave like a single-page application.

The best part about Turbo that there’s nothing to configure. Load it in a <script> and it starts working. And if a browser doesn’t support JavaScript, links work like they always have. Everybody wins!

Which brings me to—

Progressive Enhancement

It shouldn’t take a read-through of Resilient Web Design to understand the importance of progressive enhancement. My site had to work on everything from a command-line browser to a full-blown Firefox.

And that’s easy. Use accessible, semantic markup, and serve it without any client-side DOM manipulation. Everything else is an addition. Even CSS.

Snazzy Underlines

I was itching to use the new underline styles now possible with pure CSS. At the time of writing, they only fully work on Firefox. How do I not break over 90% of the web for some snazzy effect I felt like adding?

Feature queries to the rescue.

CSS supports the @supports at-rule to detect whether the browser supports a declaration. Then you can write separate styles for supporting and non-supporting browsers.

The only problem is IE support. It doesn’t support @supports, so I don’t support it.

Fine, I’ll stop saying ‘support’.

Keyboard Navigation

You can navigate the menus and lists on some pages using arrow keys and Vim-style HJKL keys. You’re welcome.

This is a feature that games and CLI apps offer out of the box but is rare on the web. I wrote some JavaScript to enable it where it makes sense.

This is another progressive enhancement. You can still click the links as usual, with or without JavaScript.

Design

I felt I should let my retrogaming interest ooze into my site, so I originally designed it to look like a game straight out of 1990.

The font I’d have used for headings and menus was Press Start 2P.

This is also why I wanted keyboard navigation: to emulate a game controller.

Old design

That dream did not last long.

I picked the brilliant Recursive font for body text. I tried it on headings too, and it looked so good that I dropped the whole blockiness idea and used Recursive for everything.

Update 2020-09-28

After publishing the site online, I found myself writing about serious topics, and Recursive didn’t seem to fit the image of “serious”. But I was cautious about adding multiple fonts since Recursive offered so much in one font resource.

After reading some typography advice from Erik D. Kennedy and Jeremiah Shoaf, I decided to try a few different approaches to font selection. Some experimentation with Google Fonts and many iterations led me to what you see today: serious, but not too much so.

I even added a nice light color scheme, which looks even better than the dark one with the new typography.

Update 2020-10-03

I rebranded from Dubious Disc to prose&const and refreshed the home page and navigation styles. Again, I applied the UI design lessons learnt from the two brilliant folks mentioned above.

Moreover, I no longer have to compete for search results with Pokémon.

Performance

Google Lighthouse report with a Performance score of 100

Need I say more?

Final thoughts

While this lacks many common features, I am happy with the result. It’s fast, responsive, privacy-respecting, open source, and most importantly, it’s mine. It is exactly how I want it to be.

I recommend this to anyone who knows HTML and CSS (and has the time): if you want to make a site, write it yourself. Not only does it give you street cred and bragging rights, it is also more satisfying and rewarding. And of course, you learn a lot along the way.