The making of chrlsbr.me - Part 1: Code

February 15, 2021

If you read my first blog post two years ago, I mentioned this website was powered by Eleventy, with NetlifyCMS to manage the pages and articles, and some connection to Google Sheets to manage the comments. But as I explained last week, I was seduced by the idea of not having any build pipeline nor dependency to manage, so this website is now entirely written manually using HTML, CSS and a tiny bit of JavaScript (for the dark mode).

There's no more headless CMS, each new page is created by duplicating an existing one and changing its content. If I need to change some part of the page template, I perform a search and replace in all the files, using regular expression if needed. Since I enjoy using markdown, I prepare my draft in a markdown editor (I'm currently testing Mark Text) and once it's ready, I copy the content as HTML and paste it inside the <article> tag.

I collect the comments using Netlify Forms and manually copy and paste them in the dedicated <aside> section. I also decided to manually create a RSS (atom) file and update it for each new article I write, article that I also add to the blog page.

The website is still hosted on Netlify: the source files of this website are versioned with Git, so that for each update, I only need to commit and push the changes to Github. Netlify picks the changes and deploys the new version instantly.

CSS

A quick word on the CSS code: it's not very long and not really optimized. For instance I duplicate all the code related to the dark mode so it works for both:

people choosing their operating system to be dark (using the (prefers-color-scheme: dark) media query)
people manually setting the theme to dark with the switch I provide.

Since I chose to use variable fonts, I load them using WOFF2 files. Since one of the font I decided to use didn't provide a variable WOFF2 file, I had to transform the given variable TTF file into a variable WOFF2 file. I used the great tutorial by Henry Desroches for this. You can check if a font file is a variable font file using Wakamai Fondue: if there's a big section called "Variable" you're good to go. The font I use for the headings variates on the weight and optical size axes. I control the values on these axes using font-variation-settings, for example font-variation-settings: "wght" 675, "opsz" 30; for heading level one.

I wanted to alternate the texture of my logo between oblique stripes and polka dots. To do this, I used an inline SVG with two clipping masks (SVG <clipPath>, not be confused with CSS clip-path). Then in the CSS code, I animate their respective opacities using keyframes.

I only used one width-related media query to place the page header and footer on the left sidebar for larger display sizes. With CSS grid, it's fairly easy to achieve: I created two columns at the body level (grid-template-columns: minmax(10rem, 35%) 1fr;) and explicitly declared grid areas for the body direct children, for example grid-area: 1 / 1 / 2 / 2; for the header.