(or, How this blog is written)

I’ve written and published a few posts already; so, to maintain momentum and for future reference, I figured I might as well document the process. Here are the steps I follow:

  1. Think about what I want to say. While this is an essential part of any writing, it's perhaps even more important when writing by hand; for the simple reason that the medium offers very limited editing capability as compared to a text editor. I’m using a reMarkable 2 which allows for erasure, but for major revisions I still have to go through multiple drafts, each written from scratch. I quite like that. Posts hitherto have not been edited, or only slightly; on this blog, I want to thoughtfully embrace imperfection.

  2. Write! I use the medium-stroked fineliner tool. Before I start, I enable the "lined-small-with-margin" template, which helps prevent skew of the handwriting (it is important later on). When done, I switch back to blank background.

  3. Prepare the images. With the reMarkable companion app, I download the blog document to my Mac as a PDF. I then use ImageMagick to produce PNGs:

    $ convert -density 600 blog.pdf blog.png

    This gives me one PNG per page (600dpi, 8bpp). The resolution is a bit high, leading to quite fat images (~400 KB per page), but they look crisp – particularly on retina displays. I’ll continue experimenting with optimizing the images. pngquant helps somewhat, but not much.

    Anyway, I then manually crop the images, leaving tiny margins, and when it's a multi-page post I combine the images into one:

    $ convert -append blog*.png new-post.png

  4. HTML-ize and add links. There's no static site generator – the HTMLs are written manually (dare I say “by hand”?) They’re really simple: an <img> element with the post content, a few others for the header and navigation, and some <meta> tags. Oh, yeah, and links.

    Here’s how they’re done: the post container <article> is positioned relatively, and the <a>s under it are styled as position: absolute; so they overlap the image, being blue rectangles on top of it. But they also have mix-blend-mode: screen; making the text underneath visible and coloured. An example:

        <article class="post">
          <img src="post.png">
          <a style="left: 60%; top: 40%; width: 15%; height: 5%;" href="https://target.url"></a>

    The left/top/width/height attributes need to be percentages, not pixels, since the images can be resized to cater for different screen sizes. I generate them by uploading the image to pixspy.com, making a selection, and evaluating a simple JS snippet in the browser console that produces the desired CSS.

    Unfortunately, the mix-blend-mode trick doesn’t work in the more WCAG-friendly case where the <img> is a direct child of <a>, as in the navigation links. For those, I’m using the filter attribute, but it’s unwieldy.

  5. Prepare a transcript. Did you know that macOS’s Preview automatically OCRs handwriting? I discovered it by accident, and it greatly speeds up the process. I just need to correct the errors (stemming from my poor penmanship).

  6. Update the index. This is a bit tedious since I need to re-generate all links as above (I want the pasts to be listed reverse-chronologically, newest first). Fortunately, reMarkable supports cut-and-paste, so I don't have to rewrite everything each time.

  7. Publish! Nothing fancy here, just rsync the directory to the Scaleway instance that hosts this blog.