Recent content in Home on Ricard Torres
I’m constantly tinkering with ways to make publishing Hugo blogs even smoother, and today I swapped the long, tedious npm console commands for quick shortcuts in VS Code’s command palette. While I still have to hit a few keys, the new shortcuts are shorter, easier to recall, and I can just arrow‑select them—no more memorizing long command chains. This small tweak keeps my workflow…
I’ve always liked to sprinkle emojis into my blog posts, but my Mac isn’t up‑to‑date, so I keep missing the newest ones like . A quick Google search turns up a handful of picker sites, yet none support the latest emoji specification (Unicode 17.0). Since the data lives on GitHub, I figured I could just fetch the JSON, add a text field with an input listener, and filter the array—easy enough, but…
I’m continuing to push automation on my Hugo site so I can avoid repetitive, error‑prone tasks. Every time I write a new post, I can either copy the last markdown file and manually scrub it or start from a clean template…
I just moved my site to Hugo and started adding a bunch of scripts to keep things tidy. Using Prettier to format Markdown and a validator to catch frontmatter typos has become routine, but I still worry about stray or outdated metadata. To make sure I never forget, I hooked a script into Husky’s pre‑commit…
I asked my Mastodon followers whether to move my 16‑year‑old WordPress blog to Hugo. I already own four Hugo sites and love its speed, security, and zero‑database setup. WordPress feels bloated with features I never touch, and my comment traffic is negligible—most discussions now happen on social media…
It is quite surprising there’s no out-of-the-box cron job to delete workflow runs from a Gitea repository at admin level or instance-wide. I am not interested in old workflow runs (CI/CD) and want to keep my database and server lean ♻️ After checking the docs and GitHub issues and asking AI , the conclusion is there’s only one way to do this: API calls to delete single workflows 🤷
The whole AI token economy is quite ridiculous. At my company, we’re just now shifting from " unlimited tokens, use as much as possible, ship faster! " to " here’s your small budget, use with care ". Before, we were able to use Claude Opus models; now our best-in-slot is GPT Terra, which is fast and cheap, but it’s obviously not as powerful. I find Terra failing to execute…
After Moving most of my GitHub repos to a self hosted Gitea the next step was to ensure my data would be safe from disaster. backup-gitea.sh runs on macOS, asks Gitea to create a dump inside its Docker container on the Ubuntu VPS, and downloads the resulting ZIP archive to ~/Downloads on the Mac. How it works A unique archive name is generated from the UTC timestamp and the script’s process…
For years I’ve been a heavy GitHub user, which doesn’t mean I’m a power user 🤓 I had 100 repositories, some of them static, some of them deployed to GitHub Pages for hosting, and some of them with CI/CD workflows (building sites with custom Node scripts, or building Hugo sites). It has always been very simple, nothing more than hosting static files and building. 🗑️ I first…
I was not expecting the migration to be this easy. This won’t be writing a step by step guide, if you’re looking for that check Matt’s guide: https://mattburke.dev/migrating-native-mastodon-install-to-docker What I want to share is how easy the whole process was. Also, notes for me, for the future. My setup is a single-user instance, which gives you a bit more of a relaxed…
Woke up today with a brand new WordPress release . For a while now, I have been zero excited about new versions; I’m only interested in performance improvements. New features I couldn’t care less. The system already does what I need it to do: write posts and publish them with 1 click. This is exactly what got broken for most of my sites. I own half a dozen WordPress installs, and for…
On my photography blog, I always add a Gallery Block and always configure it in the same way: 1 column, no image cropping, and link to the media file. Turns out you can define this gallery block default within your WordPress theme (or a plugin, if you don’t want to change your theme). There’s no clear documentation on this but using a combination of the handbook and the GitHub block…
I have 4 Hugo CMS blogs ( Anime , Manga , KDramas , and a private wiki), all of which have a very similar setup (the theme is practically the same). It’s Hugo , so you know it’s just plain Markdown files. It’s super cool. If you don’t know Hugo, give it a try. I host the source code for this site on GitHub and build the site using GitHub Actions . Then, I simply pull the…
I don’t know you, a programmer/developer/coder, who uses AI , but where I’ve seen you truly excel is at creating scripts for previously done manual tasks 👨💻 I love to automate my work; you probably do too. If we can let the machines work for us, let’s take advantage. Here’s an example of what I mean: For years, in my current project, every few months, the design agency…
💡 What am I trying to do? I want to improve the tracking rate of my self-hosted Matomo install by (yes) circumventing low-level browser or network ad blockers. ⚠️ Disclaimer I do not need or want any visitor’s personal information, I do not intend to do fingerprinting. I just need to know what posts are people reading, if they come from search engines, direct traffic from social networks,…
Did you know you can leverage all this large language models to help you open better pull requests? If you’re the only developer in your team or want to double check your code before letting your colleagues review it, this is a great use of AI . How to use AI to review your PR My current setup is: VSCode for IDE Copilot Chat : set in “Agent Mode” Model : (at the time of this…
I had to dig through many blog posts and forums to find a straightforward answer that would work with the latest Hugo (at this time 0.149.0). Shortcode The best way, recommended by Hugo maintainer, is to create a shortcode. Create the shortcode themes/xxxxx/layouts/_shortcodes/include.html Content of the shortcode include.html should simply have this: {{ $file := .Get 0 }} {{ $page :=…
Why turn off thumbnails? I’m using AVIF files generated locally on my Mac before uploading to my blog, the images are compressed and already have my desired size. Out of the box WordPress attempts to create a smaller version (even when the Settings > Media are all set to 0 size). I suspect this trick used to work before, but not anymore. This code has been tested successfully in WordPress…
I have my own virtual server (VPS) with netcup (not sponsored). I have been enjoying the rather low price for about two years. A few weeks ago I went to their price page and noticed my plan no longer existed. In its place a cheaper and more SSD capacity plan was available. 😡 Not letting your customers know It’s so dirty they improved their plans to be cheaper and said nothing to its…
For a long time I’ve tried to code my own “workout” solutions to track my sessions, be it creating a timer app, listing workouts, or just tracking my daily exercise. The other day I had an epiphany and thought I could use GitHub Issues in combination with GitHub Actions to create a daily routine using GitHub as my backend. It’s quite simple, seriously. How does it work? Using GitHub Actions…
Here’s a quick snippet to allow you change the HTML of a page before Cypress fires your tests. In an ideal world you would want to have different server side rendered HTML pages and you would just call page-1.html and page-2.html but in my case the component I’m trying to test inherits a configuration from a central location. It is simply not possible for me to amend that central…
The other day I wanted to post several links and posts on Mastodon . I didn’t want to flood my followers’ timeline with my face several times in a row. So I thought, I’d love to have a way to schedule posts on Mastodon 🤔 So far there doesn’t seem to be a way to do it out of the box and I haven’t read this feature being actively worked on. I used to use it a lot back…
After starting to host my own private Mastodon instance it became clear that disk usage was going to be problem. I eventually moved all the assets to an S3 compatible Object Storage. Now I’m moving away from Backblaze B2 as a S3 provider to Scaleway . I wanted to highlight why and how I did it, which is trivial when you know what to do Why? It’s funny that all came down to a currency…
The current (4.0.2) Mastodon profile page is bad . Bad because it requires JavaScript to load. If you want to go back in time and look at your own posts it’s not convenient, it’s just slow. I find myself wanting to find old posts to re-share or revisit often. So I decided to first build a sitemap.xml to send to Google . The idea was to leverage Google ’s search engine powers to…
The out of the box Mastodon does not come with sitemap.xml generation built-in. If you want to push a user’s sitemap to Google or other search engines here’s how to do it. 💡 My setup is meant to be for a single-user Mastodon instance. 🤔 Why? It’s simple, I don’t have Elastic Search set up in my Mastodon instance and want to have a way to search my posts.
Here my highlights of the VPS move last week. You will see a lot of cons which are negated by the fact that pricing and hardware is that much better deal. For context, I have been a Linode customer for like 10 years. The customer service has been good, the dashboard is nice and they have many features you might want/need (object storage…). Now, if you just need a VPS and no fancy…
⚠️ I have written a follow-up post moving from B2 to Scaleway as Object Storage provider. This post is still valid, the only thing is I’m not longer using B2, which might be perfectly fine for your needs 👍 When I installed my private personal Mastodon instance y quickly noticed Mastodon has storage issues, so I tried to improve it by setting up a bunch of cron jobs to purge cached files.
A Webmention enables enables cross-site conversations. Letting site A know that site B is mentioning them (be it via link, a like, a re-post… there are many times of mentions). One of the cool use cases is to link your Fediverse account ( Mastodon, in my case ) with your blog. So every time you share a link from your blog and people react to it, these reactions (comments, or likes) will…
Mastodon’s built-in CLI gives you the availability to clean attachments and previews from remote accounts, purging the disk cache. This is fantastic and you couldn’t possibly survive with out it. My current crontab (in the mastodon user, not root) that runs every night at 3AM: 0 3 * * * /bin/bash /home/mastodon/purge-media.sh As of Mastodon 4.1.0 , we have new available commands to…
⚠️ Read this before deep diving I’ve been dealing with Mastodon’s high disk usage for the last week. Have a read before installing your own Mastodon instance. I would recommend checking out Pleroma and Akkoma before taking a decision. They have way less system requirements than Mastodon. EDIT November 8th Self-hosting That’s right, I know have ricard.social as my Mastodon home.…
Two years ago I created a small site to track what movies and shows I watch . I did it with Gatbsy because well, it was a new thing for me and I wanted to experiment with Jamstack . The idea is to create a new Markdown file for each movie or tv episode watched. A TV show season has 10 episodes, then I have 10 files. Using GraphQL I would query the files and show those on the site. Neat!
🚫 Problem Having to manually 😴 create unique images for Social Media ( Open Graph ) for your new blog posts. ✅ Solution Let’s use Node.js to engineer a script to take care of this for us 😎 ❤️ Generated image This is the final result, a dynamically generated image: 🤔 How does this work? A part from playing with the file system (fs) module from Node.js, the actual image creation will be…
So you’re learning about Critical Rendering Path , you have already optimized your WordPress theme’s stylesheet but still there are WordPress core CSS files that you want to lazy load. I have a present for you 🎁 One of several techniques is to load the stylesheet using media="print" which tells the browser this file is meant for print view and not when regular browsing the page. The…
The following snippet will list your Hugo site pages ordered by last modification date. You simply have to reverse it and limit to your liking. Shortcode themes/YOUR_THEME/layouts/shortcodes/last-edited-pages.html <h2>Recently Edited</h2> {{ $byLastMod := .Site.Pages.ByLastmod }} {{ $recent := ($byLastMod | last 5).Reverse }} <ul> {{ range $recent }} <li> <a href="{{ .Permalink }}">{{ .Title…
For static generated sites I’m loving more everyday Hugo . It’s speed and zero JavaScript dependency (unlike Gatsby ) is just what the doctor ordered. I have a private wiki for my, well, not public notes. The first version was done with WordPress ( I even open sourced the theme ). It worked okay, nice writing experience , one click publish/update. My problem with WordPress (and I do…
If you read books you have perhaps heard about Goodreads.com , the site has book reviews, season awards, and more. The most interesting part is that you can track you read, currently reading and want to read books. Yes, you could use a notepad or a spreadsheet 🤷♂️ but using the site is nice. You can review the books you read, rate them and so on. 🔒 Owning your data They key thing is not to give…
One of my daily morning routines is to scan several news sites and read headlines to see if anything piques my interest. Or at least to have a vague recollection of topics happening nowadays. I go to Hacker News , The Verge , The Guardian … and others. A mixed bag, really of tech and world news. Because of the mind of an engineer… I wanted to optimize the time spent doing this. How? Glad you asked…
You don’t need me explaining you how important it is to defer scripts for performance. If your application doesn’t need render-blocking scripts you should simply defer them. Most of the WordPress blogs/sites do not need render blocking scripts, for toggling menu visibility, swapping emojis for SVG’s, embed media… All these can be deferred no problem. The script below will…
Out of the box doesn’t seem to be possible 🙁 BUT! I’ve found a workaround that works almost as nicely 🎉 There are paid apps out there, but we as developers should do it ourselves 👨🏻💻 To learn from it and to feel like a hacker. 💡 Create a bash script I want to able to go quickly to a site from anywhere on my Mac. Sure that’s what bookmarks are for, but you need to focus on…
If you need to do more than one GraphQL StaticQuery in Gatbsy you can assign each query to a name. Then simply access data.yourName and you’re ready to go. Here’s a full example of how I use it on my reviews site : import React from "react" import { StaticQuery , graphql } from "gatsby" const TotalTime = () => ( < StaticQuery query = { graphql ` { movies : allMarkdownRemark ( filter :…
I build my reviews site using Gatsby . It’s cool, the graphql is powerful but there’s something that was buggering me. Why does my static site need client-side JavaScript ? There’s no reason for it. Gatsby will argue about faster route changing this way, sure. For a high-traffic site where users visit multiple pages on the same visit, it makes sense. Not my case. Astonishingly…
If you’d prefer to show the Docusaurus docs section as a homepage instead of the regular landing page, you can use the snippet below. There are several ways to do this. From a simply server redirect, to the a hacky JavaScript redirect to the much desired official approach down below. Official solution: configure the docs plugin Follow these 3 steps: 1. Set a document with a slug / Create the…
For a while now I thought that preloading your custom fonts was the way to go. In my defense in the past that was the recommended approach. < link rel = "preload" href = "/fonts/cookie-v12-latin-regular.woff2" as = "font" type = "font/woff2" crossorigin = "anonymous" /> < link rel = "preload" href = "/fonts/raleway-v18-latin-regular.woff2" as = "font" type = "font/woff2" crossorigin = "anonymous"…
It has been ages since I needed to write MySQL queries. I barely remember the basics. I found myself perplexed after learning DELETE does not allow you to specify a limit. I thought it simply acted as a SELECT but the results instead of being returned where deleted. It seems you need to nest 2 queries in order to fool MySQL. This seems overkill but it does the job.
Before you eye roll me 🙄 after saying PHP , hear me out. 💬 What’s your current RSS reader? Please tell me you still use RSS 🙏, you should, everybody should. I used to use Feedly and there was nothing wrong with it. At least for my use: Open it from time to time. Get my unread items. Read items. That’s it. I don’t really use categories, sharing or other features.
You know me, I love to use WordPress not only as a blog but as a full fledged CMS and lately as an app backend using the WordPress REST API . So today I want to share a proof of concept creating a Vue.js app to create a Kanban board. Why? I want to keep track of my weekly tasks at work and for personal use. At the end of the week I usually have to report highlights of the past days, this is a…
You know I’m a huge WordPress fan and I rely on it whenever I need a CMS. At this point pretty much everything is possible, don’t want to mess with PHP ? Sure, use it headless with GraphQL and Next.js or the provided out of the REST API . Today I won’t be using any of the edge use cases listed above but the regular WordPress capabilities on a simply hand-crafted theme, using the…
If you want to extend the WordPress Tag Cloud Widget with your own custom CSS class, you can easily use the wp_generate_tag_cloud_data filter like so: function extend_tag_cloud($tag_data) { return array_map ( function ( $item ) { $item['class'] .= ' your-custom-class'; return $item; }, (array) $tag_data ); } add_filter( 'wp_generate_tag_cloud_data', 'extend_tag_cloud'); Docs: filter:…
One of the best optimizations you can add to your static site generated with Hugo is purging unused CSS . Today we’ll be using the veteran PurgeCSS with the out of the box PostCSS support from Hugo. Did you know Tailwind CSS uses PurgeCSS as well? From 80kb to 10kb For my Hugo project I reduced this much the size of the CSS output. Which is amazing. How to do it? Create a package.json…
The WordPress REST API is a very neat thing. I’m using it to pull my To-Do list into my Firefox Start Page , which I find totally awesome 🤩 If you’re using custom post meta data is not as straight forward. For some reason the meta data is not exposed by default when you query posts via the REST API. Or at least didn’t work for my meta data, perhaps I did store them wrong 🤪
