AMP website improvements

Since my previous blog post a lot of changes happened in the back-end and in the front-end of the website. Back-end changes:

• I moved from Netlify + GitHub hosting back-end to GitLab. The main reaosn is that GitHub has an extremely restrictive policy about supported Jekyll plugins and their versions. So far I was playing along, but when I tried to upgrade to Jekyll 4.0 I realized it’s not possible with GitHub. That’s not a deal-breaker, however I’m also introducing pagination, and the standard jekyll-paginate plugin is not even lame, but not even actively developed any more. And that’s what GitHub lists as supported. Since technically my featurettes and resume cards are blog items as well, I needed a paginator which supports category filtering. It turns out that GitLab not only supports many static website generators besides Jekyll (like Hugo - this is why I originally moved to Netlify), but doesn’t have any limits on the Gems and thor versions I use.
• So now I’m with GitLab. Another advantage of GitLab hosting is that the build of the page and the associated CI/CD pipeline is not a black box (as kind of it is with GitHub), but you have a full control over it. Although Netlify’s pipeline is also not a black-box, I like that GitLab offers the repository, the CI/CD build, and the hosting at the same place.
• GitLab does not support app, dev, and page TLDs (Top Level Domains) yet, so my domain remained with Google Domains as a registrar. But CloudFlare manages my DNS entries for my custom domain.
• I use CloudFlare for my website and I use the AMP Real URL feature along with Rocket Loader. Turning on these features was a simple button click. I will have to revisit the latter one to ensure it doens’t do any harm, since AMP is all about async and deferral anyway.

Front-end changes:

• I provided scaled down versions of the two carousel banners in the size of 1140, 1024, 768, and 412. These are common resolutions. I also confined the carousel to not be full width, but would remain in the content column, so on large screens it would not be as large. The banner load takes some time, so I have some incentive to maybe drop it all together or move it to the about page.
• I decided to move from IBM Plex Sans to Roboto. My primary goal was and always be as better readability as possible. My candidates were IBM Plex Sans, Ventura, or Roboto. Roboto is extremely well readable and also so widely used, that possibly the viewer client already has it before the browser will get it from my hosting. For example it’s the default font for Chrome OS and Android. I still use 300, 400, 500, and 700 weight versions and I only have standard Latin character set to minimize the size. I don’t think I’ll use any Latin Extended characters. I still host my own, because what Google pulls in has too much unnecessary fluff. I also added a ttf hosted font file set.
• With the GitLab hosting it was possible to use jekyll-paginate-v2. This offers category based pre-filtering, pagination trail, and other features to name a few. I always like to contribute back. The pagination controls are amp-sidebar instances. They needed some slight color tuning changes.
• I redesigned the footer menu: the items are now icons and a StackOverflow (StackExchange) flair was added. That flair disappears on extra small screens and a StackOverflow icon takes its place. That trick required some pull-in from the Bootstrap4 CSS files.

The journey continues and I’ll perform some measurements soon. Remember that the target is a 100 / 100 / 100 / 100 score.