jlelse's Blog

Thoughts, stories and ideas

Dev

Welcome to the Dev section of my blog with development related articles.

"sans-serif" only

in Dev

I used to use system fonts for my blog theme, but I rethought this decision and converted to the following font-family in my CSS: font-family: sans-serif; Right, that’s just sans-serif. This should choose the default sans serif font, which is configurable in most browsers. By choosing sans-serif only, I give the reader the option to decide for themselves which font to choose. If I use the system fonts, I ignore the user’s preferences and force a specific font on them, which they may not have set as default for good reasons.

Read more

Backup a dockerized Postgres database with Resticker

in Dev

I got the question how to solve the problem that when backing up the storage of a dockerized Postgres database (using Resticker) it could be that the backup is corrupt because the database is still running. This is an addition to my post of how to backup Docker volumes using resticker. I had exactly the same problem. I wanted to backup a Postgres database running in a Docker container without having to stop the database or have a corrupt backup.

Read more

Use Telegram as a notification service with Go

in Dev

Telegram is my favorite messenger for chatting. There are many reasons for this. But Telegram is also very suitable to use it as a notification service for your own projects. For example I get a daily overview of the number of page views of my blogs, but also notifications about new Webmentions, or likes and announcements via ActivityPub are sent to me via Telegram. That I use Telegram is because the Bot API is so easy to use.

Read more

How I use the Speech Synthesis API on my blog

in Dev

I just added the feature to my blog that allows you to have any article read to you. For some articles I already add an MP3 file with a natural sounding pronunciation, but now it is also possible to get articles read aloud that don’t have an MP3 file (if the browser and operating system support this). There is an experimental SpeechSynthesis API in some browsers (Firefox and Chrome support the function).

Read more

Find broken links on your website with muffet

in Dev

Today I wanted to check if my blog contains some broken links and it actually did. I used the Go-based tool muffet which crawls a website and checks for HTTP errors when following links. To speed up the process, I started a local Hugo server and used the following command for muffet (after installing it): muffet -e ".*jlelse\.blog.*" -e ".*indieauth\.com.*" -e ".*aperture.*" -e ".*quill\.p3k\.io.*" -e ".*addtoany\.com.*" -t 60 -c 10 -f -x -s http://localhost:1313/ Using -e you can exclude sites using regular expressions, -t sets the timeout and -c sets the number of concurrent connections.

Read more

Using the Google Text-to-Speech API to create audio versions for blog posts

in Dev
Reply to: A question by Ashwíṅ Víshnú

Ashwíṅ Víshnú asked how I created the audio version for my latest post. Here’s a way how you can use the Google Text-to-Speech API to create MP3s from text. A simple way to try this API without a Google Cloud account is to follow these steps: Open this page in a new (private) Firefox tab. Open the Web Developer tools and go to the Network tab. On the page enter the text to synthesize into the text area and choose your config.

Read more

Pure CSS Lightbox in Hugo theme

in Dev

Hugo themes have the option to override the default rendering of Markdown images by using “Markdown Render Hooks” since version 0.62.0. By creating a file in layouts/_default/_markup named render-image.html it is possible to use a custom template for rendered images. This gives a lot of flexibility. I just used that flexibility to create a lightbox with pure CSS (without using JavaScript, like many lightbox implementations do). After clicking (or tapping) on an content image, you will see it filling the browser view.

Read more

Adding ActivityStreams representations to Hugo

in Dev

I promised and people already asked, so here is the first part of the documentation about how I enabled ActivityPub support on my Hugo-based blog: The first step to enable ActivityPub support, was to get Hugo to generate ActivityStreams representations for posts and the ActivityPub actor. I did this by adding a custom output format and published the code as a Hugo module on Codeberg. See the README file there to learn about how to use it.

Read more

How I automatically create my blogroll

in Dev

I just updated my blogroll and thought that it might be a great idea to share my workflow to do exactly that.

I use Miniflux a lot. Using Miniflux, I read all the blogs and get all the news, get updates from all the YouTubers and even subscribe to some Mastodon accounts (fediverse microblogs). I use multiple categories to sort the feeds. One of those categories is “Blogs” with all the blogs, which I also list on my blogroll.

Read more

Use system fonts to make your site load faster

in Dev
Reply to: How To Self-Host Your Web Fonts

Although it’s great to self-host your web fonts instead of using a service like Google Fonts (that may decrease the privacy of your site’s visitors, because Google can log IP addresses and other stuff), it’s probably not necessary to use web fonts at all. Every PC or tablet or phone has a lot of fonts already pre-installed, which are more than perfect for displaying your website (unless you take a lot of care about corporate design or your personal brand and require a specific font).

Read more

Jan-Lukas Else