How I Built shivjm.name

Having previously explained the rationale behind shivjm.name, I’d now like to discuss the technical details. At the outset, I intended to rely only on Pug templates and no additional libraries, with a dash of CSS written directly in the page. I found this to be an awkward way to work, so I soon sought relief in the arms of the ever-reliable Eleventy. The tinycss plugin was just right for my purposes, notwithstanding the sub-optimal developer experience: as the resulting CSS is embedded in the page, changes won’t take effect until the Pug template is re-processed, such as after a save.

The basics

As you’d expect, I laid a foundation of semantic HTML. This was my first time using the Ruby elements, which are meant to display annotated text. They work well enough but the annotations seem to be very limited in their styling—for example, I’m unable to apply line-height, padding, or margin to them. At least I was able to specify a size and weight.

To keep the typography simple, I restricted myself to sans-serif fonts available on Google Fonts (which is still a rather large list). After narrowing it down to four candidates, I chose Mada, which is neither bland nor so distinct as to overpower the message, with regular letterforms and pleasing punctuation. I used the google webfonts helper tool to generate the required CSS and download the files so I could self-host them.

Marking the ‘incorrect’ names

I initially used list-style-type to place a cross before every ‘incorrect’ name:

CSS.incorrect {
  list-style-type: "❌ ";
}

But I thought it might be too easy for the reader to miss the crosses and see only a list of names that resemble mine, creating the impression that these are all in fact correct. Moreover, there’s no way to control the appearance of the crosses, which are merely Unicode characters, short of adding a font just for that purpose.

On the other hand, a regular strikethrough obscured the names themselves. I experimented with a few techniques before it struck hit me that I could use text-decoration-color with rgba to render a partially transparent strikethrough:

CSS.incorrect {
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.35);
}

I’m pleased with the effect, which I think unmistakably strikes out the items while leaving them reasonably easy to read:

A word on performance

The final page is 48.4 KB before compression, which includes 45 KB of precompressed fonts. Those proportions might be construed as an indictment of modern web development, but given that the text loads almost instantly, I am untroubled. The HTML weighs in at 3.5 KB, which I believe might even allow it to be sent within the very first TCP exchange, although that’s fading in relevance. (With the Brotli compression Netlify uses, the HTML is reduced to a minuscule 1.4 KB.)

What’s missing? Well, there’s no external CSS to download. No JavaScript or images. Just four HTTP requests: the page and the fonts. On a simulated 400 Kbps connection, the text appears within 350 milliseconds and the page finishes loading in under 1.4 seconds. As I keep saying, the most reliable way to build speedy websites is to stop fighting the web. It’s amazing how quickly your pages can load when you work with it instead.