Category: Website

Hello, Codeberg Pages

Moving this site from Gitlab Pages to Codeberg Pages

6 minute read

In their own words, taken from the docs, “Codeberg is a democratic community-driven, non-profit software development platform operated by Codeberg e.V. and centered around Codeberg.org, a Gitea-based software forge.”. Essentially, it is a non-profit platform run on donations for sharing free and open source software by providing a collaborative VCS environment based on Gitea. One good day I decided to move all my open source repositories from GitLab over to Codeberg, and that includes the hosting of this very website. This is the story of this migration.

HTML lazy image loading

Adding lazy image loading to Hugo's figure shortcode

3 minute read

The HTML <img /> tag has this handy attribute loading="lazy" that enables lazy image loading, so that images are only loaded whenever the user scrolls all the way down to their position. This makes page loading super-fast, and reduces the amount of wasted bandwidth, especially when browsing from page to page. In the past this was achieved by a few lines of custom JavaScript code, but it is supported by all major browsers, both for PC and mobile. It should always be used unless there’s a very good reason not to, to the point where it can probably be argued that it should be the default behavior of images.

Create your static photo gallery with thumbsup

Do not post your photos in online services that do not respect your rights, create your own static HTML photo gallery for your website with thumbsup

4 minute read

It is nowadays commonplace to upload your valued photos to online services that don’t respect your rights like Flickr, Google Photos or Instagram. While these sites have a social component that may help you build an audience and have a wider reach, usually their terms and conditions are abusive to end users. In this post I’ll be discussing how to create your own static HTML photo gallery that you can host on your website using thumbsup, a static gallery generator written in Python that produces totally customizable photo galleries. You can host your high resolution photos in your private server and have the gallery link to them. The photo gallery on this very site is generated using this method.

7 minute read

Search functionality in a small website like mine is usually arguably useless. I, for once, never even care to check whether a specific website offers it. I find a post that interests me via a search engine or aggregator, navigate to the page, read the post and then leave. However, I am not against local, serverless indexing and searching, even though most search engines provide site-specific searches. That is why I moved the search function of this website to a local, JavaScript-based implementation. How to do it? Read on.

Website dark theme

How to implement a dark theme for your website, plus a small discussion on the recent redesign that aims at simplifying the experience

5 minute read

If you are like me and you like your user interfaces to be as dark as possible, you have the dark mode preference of your browser enabled. You may have noted that this site has now a dark mode which is activated by default. This is done by querying the prefers-color-scheme setting in the browser. This post describes how this is done, and it discusses a few tweaks I have implemented design-wise to simplify things and remove useless visual elements.

New simpler design

New less bloated website design

1 minute read

I’ve once again changed the design of the site to make it cleaner, more simple and above all, less bloated. I’ve removed a bunch of javascript code (for instance, MathJax is no longer loaded by the main template but by the actual pages that really need it). Also, I’ve simplified the color palette settling on a black on white scheme with green for links and titles. Old (left) and new (right) design side-by-side.

Website design by myself. See the privacy policy.
All content on this site is licensed under CC-BY-NC-SA 4.0.