Code

My quest for a slimmer website is ongoing. The newest addition tackles responsive images. This technique allows the browser to select an optimal format for an image, for example a small image on a mobile phone and a larger one, on a desktop. The technique I use is based off of the works by Laura Kalbag, Adam Wills and Nils Norman Haukås. I use the same Hugo Image Processing techniques as in other parts of the Hugo Chaschper template, this time in a figure shortcut that overrides the Hugo internal one. ...

The Website Obesity Crisis is a wonderful talk about the sheer size that even simple websites have. Thanks to @stilkov for the pointer: 2025-01-06: There used to be a link to twitter here, but somewhere in the last few years since I deployed my blog the twitter API changed/broke/whatever. I have therfore removed the content. That led me to look at the size of this blog and it was scary: The weight of the front page of this humble blog is a whopping 5 MB. When looking for the culprits, I came across two problematic areas: ...

One of these “ohh - that’s a nice idea, I should totally also implement that” ideas. I stumbled upon the Dream Plus Hugo theme, that included a little badge that linked to a Travis CI build status. Using CI (Continous Integration) to check the sanity of the template seemed like a good thing to me, so I looked around on how various people do this. I found one template by Vicky Lai that included HTML checking. After a bit of fiddling around, to get the correct command line incantations going, and some more fixing of malformed HTML, the Hugo Chaschper template now is tested, the exampleSite is updated to include some “real” content and a number of niggling issues in the HTML have been fixed (missig alt image attributes, a malformed <script</script> tag). ...

The new version of the Chaschper template that I’m using to power this blog has gained a new capability: Image galleries. I started out with a gallery by VickyLai to see how to do that in general. From there I looked at How to Build a Responsive Image Gallery with Flexbox to do some basic layouting and Fluidbox to style the images and load larger versions. I didn’t quite like the way, the galleries were defined in the original example, so I came up with the following scheme: ...

I like Analytics on a website, I don’t want to use Google Analytics. That leaves me with only a few options, one it to run my own analytics software somewhere I control. Previously I used Piwik with good success, so it seems sensible to set that up. Piwik has been renamed to Matomo and I haven’t found a simple complete installer. Server Setup I know that I should use something like Ansible to set it up, but I’m doing it by hand for now. ...

I spent most of the time setting up this new blog deciding on which template to use. I settled on Casper-Two but had to make changes literally minutes after I started using it. I created a fork, hugo-chaschper and made the following changes: Cleaned up (HTML formatting) Removing the ‘caspertwo’ options (Casper-Two contains two ways of displaying single page content. I have started to remove the one I don’t use) Added support for IndieWeb and IndieAuth. I followed the post IndieWebify Your Hugo Website Support for Webmentions using code from Amits Blot Template and his description Re-surrect the original CSS file so that I can change it Reading time Better organisation of posts (internally) DRYed up display of article preview cards Things to do: ...