I’ve been using the blog as a way to keep busy, keep active and get my mind off a good number of things, so a bunch of things have changed recently and I’ll take this opportunity to make an inventory, for the sake of my memory. So, ordered in Reverse Boredom Order, the changes have been

Build system

Part of my “Save David’s SSD” movement included removing as much file processing away from my computer as possible, so I finally took the time to setup a remote box and a CI process to test, build, deploy (staging / production) - the usual - the blog. Best (however long that took me in hours) I ever spent.

Underlying platform

TLDR:

Upgraded Jekyll to 4.0
Upgraded Sprockets to 4.0 (and jekyll-assets to the unreleased 4.0 version)

The blog’s current form uses Jekyll and the 4.0 version has been out for a while but I haven’t been able to upgrade until now. Reason is I’ve been using Sprockets to manage my assets - via the lovely jekyll-assets gem and moving everything to Sprockets 4.0 took a little bit of messing around to get to work. In the process I made a bit of a gem upgrade / spring cleaning, which is nice too.

Images images images

Since I have a complete Asset pipeline at my disposal it seemed wrong not to abuse the privilege, so I’ve replaced all / most image tags with srcset options, which basically offers the browser with image density/resolution options so that it can download the most appropriate one for the user at the time. I’ve been putting off having some dynamic image processor in front of this - I’m taking the static blog thing for it’s word - so that means that I’m now generating a few versions of each image (in the original format and webp - 5 versions plus the original, which the pipeline also compresses and massages).

I’ve also added loading='lazy' to every image tag, which sadly is not wide spread yet so I also added a billion javascript lines to cover for the browsers that don’t implement lazy loading natively via lazysizes.

And finally, having more pictures in the pipeline means rmagick’s legendary performance issues finally came into full view so I had to do some work to get rid of it completely. For one all the assets are now processed with libvips - massive massive difference compared to imagemagick - and then, because I’m generating a bit more colormaps for the game galleries (that’s coming next), I had to replace all the rmagick code with a mogrified version via minimagick - I’ll have to update the blog post to reflect those changes.

<figure id="post-header-david-s-photo-november" class="ink-image post-excerpt">
  <picture class="lazy-bones " style="padding-bottom: 50.0%">
    <source 
      data-srcset="/assets/2eabc6-c9efa3c37cdc0d7f820971fc4c27c9bc1540d57b4ec7bce5f8ea0758e0a4f5e4219063f75af5225f699f626cd9ae04c9c73a8a373c0031faf35326e8b72828fc.webp 2048w" 
      type="image/webp" 
      media="(min-width:1025px)" 
      data-aspectratio="1600/800" 
      srcset="/assets/2eabc6-c9efa3c37cdc0d7f820971fc4c27c9bc1540d57b4ec7bce5f8ea0758e0a4f5e4219063f75af5225f699f626cd9ae04c9c73a8a373c0031faf35326e8b72828fc.webp 2048w" 
    >

    <source 
      data-srcset="/assets/199964-49bf533a49f0d82c22cff65990a82d1fcaac2724ed9c799589b7ddb5e168eb56564b3bd71b3742a630b6f1ba3dd50c56e082a738a3e16048ef5e6493e344260c.webp 1024w" 
      type="image/webp" 
      media="(max-width:1024px)" 
      data-aspectratio="1600/800" 
      srcset="/assets/199964-49bf533a49f0d82c22cff65990a82d1fcaac2724ed9c799589b7ddb5e168eb56564b3bd71b3742a630b6f1ba3dd50c56e082a738a3e16048ef5e6493e344260c.webp 1024w"
    >

    <source 
      data-srcset="/assets/34a41e-2d03e23baa850c0d17d6572b043155d4fe246da329445acfb96c6d998917276eb5a5b92a1b53ef6b58eb32f21c2c25efde57108eaf50ab306db10704d58efec7.webp 640w" 
      type="image/webp" 
      media="(max-width:640px)" 
      data-aspectratio="1600/800" 
      srcset="/assets/34a41e-2d03e23baa850c0d17d6572b043155d4fe246da329445acfb96c6d998917276eb5a5b92a1b53ef6b58eb32f21c2c25efde57108eaf50ab306db10704d58efec7.webp 640w"
    >

    <source 
      data-srcset="/assets/e3bdbd-0f30307e4cc620e9299d69ddc2ccf0502d2d77ae2d787a33bdb23b1740bf3efd3f5becd586df19598d5566e94761ac5cc0faeb7e60d80601ad5f1a10be0f6d7e.jpg 1024w" 
      media="(max-width:1024px)" 
      data-aspectratio="1600/800" 
      srcset="/assets/e3bdbd-0f30307e4cc620e9299d69ddc2ccf0502d2d77ae2d787a33bdb23b1740bf3efd3f5becd586df19598d5566e94761ac5cc0faeb7e60d80601ad5f1a10be0f6d7e.jpg 1024w"
    >

    <source 
      data-srcset="/assets/2679a1-b01048addfac7d1f255ce54adbe78afe325ae22ac00c75da6b3dea5b99bda4008cd629b9832c9c3eb42dbc74d80fe01343cc0cf667e4b8b2b897e607947c1216.jpg 640w" 
      media="(max-width:640px)" 
      data-aspectratio="1600/800" 
      srcset="/assets/2679a1-b01048addfac7d1f255ce54adbe78afe325ae22ac00c75da6b3dea5b99bda4008cd629b9832c9c3eb42dbc74d80fe01343cc0cf667e4b8b2b897e607947c1216.jpg 640w"
    >
    
    <img 
      data-src="/assets/post-headers/extra-large/37-210-davids-photo-november-d6fd90594a962132dbc04e1530e36447b8a033899c0832b7846f3d6cf1cd1e5cfba8d21ac5a11fe1ffeb028809dd48e7b8a383d0bc3d84a9a6bf93778852e22c.jpg" 
      loading="lazy" 
      alt="" 
      class=" lazyloaded" 
      width="1600" 
      height="800" 
      data-aspectratio="" 
      src="/assets/post-headers/extra-large/37-210-davids-photo-november-d6fd90594a962132dbc04e1530e36447b8a033899c0832b7846f3d6cf1cd1e5cfba8d21ac5a11fe1ffeb028809dd48e7b8a383d0bc3d84a9a6bf93778852e22c.jpg">
  </picture>
  <figcaption id="post-header-caption" class="over-top">
    <h1 class="post-title">David's Photo November</h1>
    <p class="post-meta">Dec 4, 2016</p>
  </figcaption>
</figure>

Post readability

When I published this post, a couple of Internet Friends - @isacosta and @lconfraria - pointed out just how horrible it was to read the posts and - thankfully for this caveman - pointed me in the right direction, so I went and tried to make it better.

Since I was there and because I’ve been doing this at night, it became very clear that I needed a dark mode, so I went and added that too.

New section - Arcade

This was a nice one I think, I like to play my games and while I don’t play often - days, WHOLE DAYS go by between me sitting down for 30m to play whatever - but the games I do play and that I enjoyed almost all have Photo Mode and up until now the most I’ve done was a couple of twitter threads, but that has zero lasting value so I thought I would open a section to put those in and give them a better resting place and that’s why I added the Arcade.

It’s a simple enough page, it’s a couple of lines of text and a bunch of pictures, but I wanted to do something nice(r) and since I already had the code to generate colormaps, I now generate colormaps for each picture, which I show in the form of a slideshow and generate a background for each picture based on it’s color pallette . I’m really happy with the way it came out and I think I’ve given the screenshots a nice home now.

Tweaks tweaks tweaks

I’ve been trying to tidy up things a bit, I’ve fixed a few bugs or just plain weird CSS I had. I’ve added a sidebar menu for smaller screens - it became very obvious I needed one when I added the new section - on top of all the image changes I talked about before.

It’s not perfect - and it’s hard for me to see what and where I should improve things , so if something offends you, please let me know, trust me, I need your help, it’s not on purpose :) . One thing I know I’ll need to have a proper bare knuckle fight with is - funny enough - the new slideshow / responsive image / lazy loading combo that I decided to put in which, in short, causes a very ugly and shameful reflow flicker each time a new image is loading.

On that, a couple of notes:

Firefox does it right - they recommend that you add width and height to your image - doesn’t matter if it’s the final display dimensions, as long as it reflects the image ratio that’s being loaded, Firefox will draw a nice placeholder based on that information and zero reflow occurs.
Chrome was supposed to do it right, but what worked in Firefox didn’t work in Chrome - the reflow was very obvious and until I added the JS library to lazy load even in browsers that don’t natively support things, it was my biggest nightmare.
WHEN I ADDED THE JS LIBRARY THOUGH ALL BROWSERS STARTED DISPLAYING THE REFLOW ISSUE , so now it’s a nightmare no matter where you look at it. I’ll need to fix this soon.

Anyway, I think that more or less sums it up, it’s been entertaining, this blog has been with me for almost 16 years - more as a way to keep busy than an actual writing repository - and it’s nice to see it move forward and it’s nice to take some stock now and then.

Please please please, take me seriously, if you’re visually inclined and you spot something that’s just wrong and can be improved, reach out, I’ll be super grateful.

40/363 - Blog Updates