jlelse's Blog

Thoughts, stories and ideas

πŸ‘¨β€πŸ’» Dev

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

How my blogroll gets generated (now completely automatic!)

Yesterday I teased a new post about how I automated my blogroll generation by writing a Go script and using the Miniflux API. Here it is.

Read more

Make your website more printable with @print CSS

I just added some CSS rules to my Hugo theme to make my blog more printable. Why and how does this work? Have you ever tried to print out your website? This often does not look optimal. Because even elements that are not very useful on a printout (menus etc.) are printed. Firefox allows to display the print view in the inspector (Ctrl + Shift + C) and of course there is also a print preview in most browsers.

Read more

Cache Hugo modules in Drone CI

Today I modified my theme to use Twemoji for emojis. To add the SVG files to the theme, I used a Hugo module mount in the config of my theme: module: imports: - path: github.com/twitter/twemoji mounts: - source: assets/svg target: static/twemoji/svg The problem now is that Hugo needs to download more then 3000 SVG files from GitHub when there is no cache. And because my blog builds on Drone CI, each time in a new container, there’s no cache and the build time increased by about 10 seconds.

Read more

"sans-serif" only

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

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

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

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

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

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

Jan-Lukas Else