Category: Website

A while ago I published this post about a better figure shortcode for Hugo that enabled lazy loading. Today, I bring you yet another update on the same shortcode. This time around, the focus is on leveraging the HTML picture element, which enables alternative versions of the same image in different formats, leaving the browser to decide which one to use. You can serve the same image in, for instance, JPEG-XL and plain old JPEG at the same time. The browser will read the tag, and select the appropriate image depending on its capabilities. If you use a JPEG-XL-capable browser (Thorium, Pale Moon, Basilisk, Waterfox, LibreWolf, Firefox Nightly), you will be served the smaller JPEG-XL version, otherwise you will get the plain JPEG version.

Just a short note. I have moved this site from Codeberg Pages to nearlyfreespeech.net. By the time you are reading this the move should already be finished. This hosting service is dirt-cheap for low-traffic static sites like mine. Right now, my estimated total sits at $0.31 per month, which is $3.72 per year. Less than the cheapest price per month offered by most other hosting providers. But they also only offer starting packages allocating many more resources than what is needed for simple static websites.

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.

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.

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.

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.