About this blog

I want to write a blog and be proud of it. We all know that the difficult part in this task is the actual writing and that's the only thing that matters.
That's why I started by writing my own blog engine instead.
This must be the dev's way of procrastinating: reinvent the wheel because it's fun. And this article is the story of how I wrote my personal blog engine.

Reducing the noise to signal ratio

A lot of actual blog posts revolve around the web being to slow. Why should we download a multimegabytes sized webpage for just a paragraph of text ? Not just that: reducing the size of the assets can allow more people - limited by their connectivity - to access your website.

I came accross a very interesting blog post from Danluu. He's talking about his infortunate experiences with slow internet and that most of the websites are not designed in a way that allows for fast loading over an intermittent connection. This subject was (and still is) regularly discussed on hackernews.
There's also the article of idlewords, the one from Chris Zacharias, and Tim Kadlec.
This is a serious issue and I want my blog to be as lightweight as possible in that regard.

Another goal is about longevity and the process of writing itself. I want to write in my code editor since I use it all day. I don't need a lot of styling and don't want to write code: I should focus on the writing itself. That's why markdown is the best text format for me. It's easy to write, does not go in your way while writing and can be kept intact while changing from one blog engine to another if I ever want to.

In the end, this blog engine is just a 100 LOC python script that converts markdown files to html by respecting a directory tree and linking styles, fonts and some eventual javascript. You can find it on this github repo.

Pleasing to read

Let's talk about the styling.
I want it to be brief and that it produces something pleasing to read. I all to often go in reader view on firefox because it offers a standard view for the text (not tainted by the styling quirks of the website) and sometimes makes it readable at all.
If I'm not tempted to go to reader view then my goal is achieved !

I was also inspired by the bettermotherfuckingwebsite. The core thing to understand is that the textual web has a lot of qualities and only minimal styling is required to make it acceptable. Readability comes first from spacing, colors and size of the text.

So what's the styling of this blog ?

body {
    margin: 0px;
    background: #282828;
    font-family: 'Hack';
}

article {
    max-width: 100%;
    width: 55rem;
    line-height: 1.4rem;
    margin: 0 auto;
    color: #ebdbb2;
    padding: 1rem 4rem;
    box-sizing: border-box;
}

First we reduce the with of the column of text to make it more bearable to the eye, we reduce the contrast text-to-background a bit and increase the line height.
I don't use classes for the css because the structure of the page is very simple and it forces my HTML to be as semantic as possible.

I used the gruvbox color scheme to get some cohesion and because I find it beautiful.

I decided to handle small devices by justifying the text and increasing the text size a bit. I like having bigger text when the screen is smaller.

@media (max-width: 55rem) {
    article {
        padding: 1rem;
        font-size: 1.1rem;
        line-height: 1.5rem;
    }

    p {
        text-align: justify;
    }
}

And that's almost it ! I added some visual candy for the titles, the quotes and the code but these are not essential.
I try to keep only what adds a lot of value for me. One of my favorite quotes is from Antoine de Saint-Exupéry:

La perfection est atteinte, non pas lorsqu'il n'y a plus rien à ajouter, mais lorsqu'il n'y a plus rien à retirer.

In english it would be: "Perfection is attained, not when there's nothing to add, but when there's nothing to remove."
I tend to think that good software follows this rule.