Colophon

Technical website info

The source code repository of this site is hosted at GitLab, and the site's scaffolding and static HTML generation is powered by Jekyll. I used the Bootstrap framework to build the layout, which is compiled from Sass with custom CSS here and there. Minification is done using the Compress HTML Liquid template.

The base font used is Assistant, which lends itself to very clear readability via a desirable baseline to x-height ratio, low contrast, and comfortable kerning. Syntax highlighting for code blocks uses the Rouge color scheme, with Oxygen being used as the monospace font throughout the site.

Icons used for the header, footer, etc. are all SVG based, and are taken from the Feather icon set.

Since this entire site is static, blog comments are achieved using Utterances which stores them in a public GitHub repo. I'm a supporter of the IndieWeb, and my site's markup is compatible with microformats2. While comments are in place for regular users, Webmentions on my static site are fully enabled with a combination of Bridgy, Webmention.io, and Webmention.js.

The static site is built locally, unit tested, and optimized for production via custom NPM scripts. Once built, it's pushed to Netlify (via Netlify's CLI) where it is atomically deployed to the domain.

Cloudflare powers the DNS, HTTPS, WAF, Proxy Cache, etc. — the usual gamut of optimizations that Cloudflare is known for. BunnyCDN serves up CSS, images, and other static assets, while Cloudinary handles images specifically for the Bookshelf using image transformations that allow for smaller (compressed) book covers to be shown.

Analytics are garnered from both Goat Counter and Google Analytics even though I don't pay much attention to either (so I don't mind if they're adblocked). The site's uptime and domain/SSL health are monitored by UpDown.

• Uptime Stats — https://status.paramdeo.com
• Latest Deploy —

I optimize my website as best I can, and as long as I'm in the 90-100 percentile I'm fine. More important than metrics for me is the real-world performance when browsing; as you (hopefully) should have noticed.

My homepage has a spinner because it loads all the stylesheets, scripts, and fonts used throughout the site; the rest of the site's subsequent page loads are near-instantaneous due to those assets residing in the visitor's browser cache. I'm of the opinion that this is both an acceptable way to avoid a flash of unstyled content (FOUC) on the most important page of the site — which is also the page that's benchmarked with Google PageSpeed and GTMetrix.

In terms of caching, the control headers set on Netlify's backend are public,s-max-age=259200,max-age=86400,stale-while-revalidate=30 which provides a 24-hour local browser cache, a 72-hour proxy cache (via Cloudflare), and a 30-second revalidation window. I think these are sensible defaults given my level of traffic; and they'll be increased if need be as time goes on. Of note, all static assets served up by BunnyCDN are overwritten with 1-month cache-control headers, which comprise mainly of images and CSS. Purging is therefore done (automated, of course) when a new site deployment goes live.

The site uses Bootstrap and jQuery JS libraries, and both are delivered by cdnjs, since the odds of each already being cached in a visitor's browser (or at least the DNS resolution for cdnjs.com) is high enough for me not to deliver them from the site's origin.

Where possible, images are base64 encoded. This gives faster native rendering, reduces the number of HTTP requests, and makes use of the Brotli compression already in place.