DEV Community: Yordi Verkroost

Advent of Code 2025: Waking Up With Puzzles

Yordi Verkroost — Sat, 13 Dec 2025 17:51:46 +0000

Advent of Code has become a yearly thing for me. It’s a way to keep my algorithmic and data structure skills up, and something I look forward to every December. Over the years, I’ve used it to learn a new programming language: I’ve done editions in Elixir, Java, TypeScript, and others. But the last few years, including this one, I’ve just used Python.

Another important part of Advent of Code for me is the community: sharing solutions with people at work and posting about them on social media, interacting with other people and the way they solved the puzzles. That might actually be the most fun thing of this whole event.

I always try to get as far as possible in Advent of Code, but I do have one rule for myself: I should be able to solve the puzzle on the day it’s released. I know from experience that if I don’t, it can easily take over too much time, and in the worst case it can start to take over my life a bit. In that respect, the format this year was really nice. With only twelve days instead of the usual twenty-five, there was some breathing room in December again once the puzzles were done.

My mornings during Advent of Code follow a pretty fixed routine. The puzzles unlock at 6 AM local time for me, which gives me about an hour and a half before I need to go to work. I often say Advent of Code is the best alarm clock in the morning. Solving a puzzle wakes you up pretty quickly, and it fits nicely into my normal coffee routine. At the same time, Advent of Code does have the tendency to eat a bit too much from my sleep now and then, which is another reason why the shorter format worked so well for me this year. Luckily we did have one weekend (days 6 and 7) where I could catch up on some sleep.

This year, I wrote a blog post for each day. Writing about the puzzles added a lot to my understanding of them. Before I can explain a solution in writing, I really need to understand it myself. That’s one of the beautiful things about teaching and explaining things to other people: it forces you to learn as well. While writing the posts, I did struggle a bit with deciding what to include. Should I describe the full puzzle, including the background story that Advent of Code is famous for? Or should I mainly focus on the idea behind the puzzle, like a graph algorithm or some mathematical concept? In the end, the posts landed somewhere in the middle, with a bit of both.

Some days were quite hard. Day 9, where shapes had to fit into each other, and day 10, which involved integer programming, something I hadn’t implemented in code before. Those definitely stood out. But that’s also what Advent of Code is really about: learning new things by implementing them. On those harder days, I switched to use existing libraries instead of writing everything myself. I don’t really mind that. As a software developer, I use libraries all the time. I don’t need to implement everything by hand, as long as I understand what happens and what the general steps of the algorithm are.

This year I also consciously added AI to the mix (mainly the GitHub Copilot integration in VS Code). I wanted to see how much I could code in collaboration with AI, using it to suggest libraries or write small helper functions. The most important rule for myself was that I needed to understand all the code that was written. Used that way, AI felt less like a shortcut and more like a tool to think with. Like a developer you can talk to and discuss problems with.

There were also days that felt lighter. Day 11, for example, was a relatively clean and simple graph problem, and I got to a solution fairly quickly. Knowing how much I struggled with those kinds of problems in the past, moments like that make it clear where I came from and how much more comfortable these problems feel now.

Looking back at Advent of Code 2025 as a whole, it confirmed a lot of things for me. Explaining things is still a big part of how I learn. I’m fine using tools and libraries when that makes sense. And having clear boundaries, like a shorter event and solving puzzles on the day itself, helps keep Advent of Code fun instead of overwhelming.

Most of all, I still enjoy waking up early in December to solve a puzzle. And that’s probably the best reason to keep coming back, year after year.

Advent of Polygon Interactions

Yordi Verkroost — Tue, 09 Dec 2025 16:12:19 +0000

Number 9, turn me on dead man! And... grids again. While the first part of today's puzzle is easy to implement, the second part got me down the rabbit hole of the shapely library, GEOS computational geometry, DE-9IM matrices, ray-casting and all sorts of other wildly interesting theoretical mathematical knowledge.

Let's dive in!

Check out my full solution for day 9 at GitHub.

Part one

As input, we get a couple of coordinates in a grid that represent red tiles:

7,1
11,1
11,7
9,7
9,5
2,5
2,3
7,3

Our job is to find the biggest rectangle that can be made using any combination of two of these coordinates, where the coordinates represent the opposite edges of the rectangle. For example, the rectangle with edge coordinates 2,5 and 9,7 runs from coordinate 2,5 to 9,5 to 9,7 to 2,7 and then back to 2,5. In the full problem space, this rectangle would look like this:

..............
..............
..............
..............
..............
..OOOOOOOO....
..OOOOOOOO....
..OOOOOOOO....
..............

The (brute-force) logic I used is to consider all possible combinations of two coordinates (without duplicates), calculate the area of the rectangle created from these coordinates and keep track of the largest area we encounter. Calculating the area of a single rectangle is done by multiplying the difference on the x-axis with the difference on the y-axis (making sure to be inclusive by adding one to the difference and to get a positive number using abs):

def area_size(x1: int, y1: int, x2: int, y2: int) -> int:
    return (abs(x1 - x2) + 1) * (abs(y1 - y2) + 1)

largest = 0
    for i in range(len(data)):
        for j in range(i + 1, len(data)):
            x1, y1 = data[i]
            x2, y2 = data[j]
            area = area_size(x1, y1, x2, y2)
            if area > largest:
                largest = area
    return largest

The result for part one is returning the largest rectangle area we've seen.

Part one done, no problems so far. But then came part two.

Part two

It appears that the order in the input for this puzzle matters. If we go from top to bottom through the list of coordinates, we can draw a line between each pair of coordinates that results in a closed shape. Using the example input and the example problems space, connecting all coordinates together results in the following shape, where each coordinate (#) from the input falls within this shape (completed using X's):

..............
.......#XXX#..
.......X...X..
..#XXXX#...X..
..X........X..
..#XXXXXX#.X..
.........X.X..
.........#X#..
..............

Given this closed shape, we need to find the largest rectangle from any combination of two input coordinates that is enclosed within this shape.

After trying a couple of mathematical solutions (and coming close by programming one that works fast enough for the sample input but not for the full input) I thought I reached my Waterloo. But as it goes with Advent of Code-puzzles, I couldn't let go and eventually found the Python library shapely. This library allows me to build polygon shapes based on coordinates, and as that's what we got as input this seemed to fit this puzzle perfectly. I could simple use Polygon(data), where data is a list of coordinates in the form [(7,1), (11,1), ..., (7,3)]: exactly the closed shape that is build from the input coordinates.

Having this polygon, we can build other polygons for each rectangle that is build using any combination of two input coordinates. Going back to the example from part one, the edge coordinates 2,5 and 9,7 can be used to create a new Polygon:

def poly_rectangle_area(x1: int, y1: int, x2: int, y2: int) -> Polygon:
    x_min, x_max = min(x1, x2), max(x1, x2)
    y_min, y_max = min(y1, y2), max(y1, y2)
    return Polygon([(x_min, y_min), (x_min, y_max), (x_max, y_max), (x_max, y_min)])

Now we have two polygon, we can use a neat function from the shapely library to check whether a rectangle is fully within the full shape area:

rectangle.within(poly_area)

If yes, we can calculate the area for this rectangle in the same way as in part one, keep track of the largest rectangle we encountered and finally return this largest number again, as the answer for part two. The full code for part two (calling other functions in the process) is as follows:

largest = 0
    poly_area = Polygon(data)
    for i in range(len(data)):
        for j in range(i + 1, len(data)):
            x1, y1 = data[i]
            x2, y2 = data[j]
            rectangle = poly_rectangle_area(x1, y1, x2, y2)
            if rectangle.within(poly_area):
                area = area_size(x1, y1, x2, y2)
                if area > largest:
                    largest = area
    return largest

The maths

Yes, I used libraries to help me with this problem. And yes, I do also want to understand the basics of what happens behind the scenes.

And boy, did I learn some things. I'll try to explain a bit of this below, both to get things straight for myself and maybe you'll get to know something new as well.

The shapely library uses GEOS, a C/C++ computational geometry library. The within() function runs in a three two stages:

Computing a "topological picture" of two shapes.
Using this picture to determine if one shape is within another.

In the first stage, GEOS builds a matrix that represents the relation between two shapes, let's call them A and B. For both shapes, it compares their interiors (all coordinates within the shape), their boundaries (all coordinates exactly on the edges of the shape) and their exteriors (all coordinates fully outside of the shape). This results in a 3x3 matrix like this one:

             B
         I     B     E
     +-----+-----+-----+
   I |     |     |     |
A    +-----+-----+-----+
   B |     |     |     |
     +-----+-----+-----+
   E |     |     |     |
     +-----+-----+-----+

Each of the cells in this matrix is filled with a character: 2 if the dimension of the intersection between the shapes is an area, 1 if the intersection is a line, 0 if the intersection is a single point and F if there is no intersection.

For example, the top-left column is set to 2 if the (full) interior of A is inside the interior of B. Another example: the top-center column is set to F if the interior of A does not touch the boundary of B.

Filling all of this matrix with 2, 1, 0 or F can result in something like this:

      B:   I    B    E
        +----+----+----+
A:  I   |  2 |  F |  F |
        +----+----+----+
    B   |  1 |  F |  F |
        +----+----+----+
    E   |  2 |  1 |  2 |
        +----+----+----+

We can also write this out in a flat, single-line form, going from left to right and top to bottom. For the above matrix, this flat form is:

2FF1FF212

Using this flat form, we can check if any interaction between these shapes is true (like the within we're interested in, but also interactions like contains, overlaps and touches). For within, the pattern we check might be something like this:

T*F**F***

Where T means this character should be non-empty, F means it should be empty and * means the character does not matter. In other words, after doing the hard work by generating the matrix (which contains a lot of other logic like ray-casting which I won't go into here) we can match on predefined patterns to eventually get the result for part two.

Advent of Code 2025 - Day 6

Yordi Verkroost — Sat, 06 Dec 2025 16:54:02 +0000

Today reminds me of how I did math in primary school. You know, putting two or more numbers below each other and then going from right to left, from digit to digit, to either add or multiply. Life was easy and peaceful back then. Much has changed since.

But I digress. Let's look at the puzzles.

Check out my full solution for day 6 at GitHub.

Part one

The first part gives us a few rows of numbers, and a last line with operations that are either addition (+) or multiplication (*). Our job is to apply these operations to those numbers, only not all numbers in one row, but all numbers in one column.

For example:

123 328  51 64 
 45 64  387 23 
  6 98  215 314
*   +   *   +

The result of the first column is 123 * 45 * 6, the result of the second column is 328 + 64 + 98, etcetera. We can solve this programatically by splitting each row into numbers (or operations), then iterating over all rows with numbers and either adding or multiplying all numbers at the current position, from left to right. In the code below, I've already added the first line into the columns variable, so I have a starting value for each column to begin with. That's why the for-loop starts at index position 1 (problems[1:]).

for line in problems[1:]:
    for i in range(len(columns)):
        if operations[i] == '+':
            columns[i] += line[i]
        elif operations[i] == '*':
            columns[i] *= line[i]

After iterating over all columns, the variable columns contains the result for each column. The sum of this result is the answer for part one.

sum(columns)

Part two

Without realising it at first, the input for today's puzzle is formatted in a specific way. There is whitespace between numbers and operators, but it is not homogenous. The number of spaces between numbers and operators differ, for reasons that become clear in part two. Let's check the example input again:

123 328  51 64 
 45 64  387 23 
  6 98  215 314
*   +   *   +

Instead of going from left to right and applying the operation from the last line to a column, we now need to walk through the rows from right to left, and digit by digit. Starting from the right, we need to read each column, generate a number from all digits in that column, until we reach a column where each position is a space. When we reach that space, we know we can apply the operation to the numbers we collected.

In the example, going from right to left, column by column (and from top to bottom), we end up with the numbers 4 (empty + empty + 4), 431 (4 + 3 + 1) and 623 (6 + 2 + 3). In the last column before the space in the last row, we see that the operator is +, meaning we need to add these numbers together: 4 + 431 + 623 = 1058.

In Python, we can use the range() function in combination with a for-loop to start at some value, decreasing a step in each iteration and continue up until some end value:

for i in range(len(problems[0]) - 1, -2, -1)

This for-loop says to start at a number that is equal to the length of the first row of numbers (problems[0]). As this length is the same for each row, we can essentially use any row to determine the start value. We subtract one because we're working with index positions in an array. The next number -2 is the end value (not including). I end the iteration at -1 instead of 0 to make sure that also the last operation at index position 0 is executed. The final number -1 means we subtract one in each step of the iteration.

Now we can simply walk through all columns with digits simultaneously from right to left. If we reach a column where all "digits" are empty spaces, or if we've reached the end (index -1), we know we can execute the next operation. Otherwise, we append all digits in the current column, cast the resulting string into an integer and add it to a list of numbers. This is the list of numbers we apply the operation to when we reach that empty space column.

The full iteration in code:

for i in range(len(problems[0]) - 1, -2, -1):
        if all(problem[i] == ' ' for problem in problems) or i == -1:
            operation = operations.pop()
            if operation == '+':
                total += sum(numbers)
            elif operation == '*':
                total += prod(numbers)
            numbers = []
        else:
            column = ''.join(problem[i] for problem in problems).strip()
            numbers.append(int(column))

The total we keep increasing within this for-loop is the result for part two.

Step-by-Step Guide: Posts by Month in Bear Blog

Yordi Verkroost — Fri, 13 Jun 2025 21:10:00 +0000

The default list of all blog posts on Bear blog works fine, but can get quite long and a bit unorganized when you've blogged for a long time and posted a lot of content.

I wrote a plugin that organizes your posts a little more neatly by year and month. For example, if you wrote five posts in June 2025, a header for this month is added to the default blog posts page with those five post titles displayed below it.

If you only came here to add this custom feature to your own Bear blog, follow the steps below.

Copy the following script:

<script src="https://cdn.jsdelivr.net/gh/froodooo/bear-plugins@0.0.44/bear/blog-posts.js"></script>

(See my bear-plugins GitHub repository for the latest release number)
From your Bear blog dashboard, click on your blog name, then on Settings, then on Header and footer directives, and paste the above script in the Footer directive.

... and you're done! Go to the blog overview page on your website. It now lists all blog posts from a specific month under its corresponding header.

The Technical Details

For those who are interested, the complete JavaScript code that makes this all happen can be found right here on my bear-plugins GitHub.

The code uses the <ul> element with the blog-posts class that is automatically injected on the default Bear blog posts overview page:

<ul class="blog-posts">

This unordered list contains child <li> elements, where each of these list items contains the date-time and title of a single blog post. The general structure of a single list item looks like this (using an example post from my blog):

<li>
  <span>
    <i>
      <time datetime="2025-06-09T06:00Z">
        Jun 9, 2025
      </time>
    </i>
  </span>
  <a href="/remembering-the-story/">Remembering the Story</a>
</li>

The JavaScript code collects the value of the datetime attribute for all blog posts and inserts it into a postsByMonth map. This map has a long month name and four-digit numeric year as its keys (for example, "June 2025") and all posts from that specific month as the keys' values:

posts.forEach(post => {
  const timeElement = post.querySelector('time');
  if (!timeElement) return;

  const date = new Date(timeElement.getAttribute('datetime'));
  const monthYear = formatMonthYear(date);

  if (!postsByMonth.has(monthYear)) {
    postsByMonth.set(monthYear, []);
  }
  postsByMonth.get(monthYear).push(post);
});

After this map has been created and filled with all posts, it is sorted by its keys, sorted in descending order (most recent month first):

const sortedMonths = Array.from(postsByMonth.keys()).sort((a, b) => {
  const dateA = new Date(a);
  const dateB = new Date(b);
  return dateB - dateA;
});

Finally, the newly sorted list of blog posts is put back into the unordered list with the blog-posts class I mentioned before:

sortedMonths.forEach(monthYear => {
  // Create and add month header
  const header = document.createElement('h2');
  header.textContent = monthYear;
  header.className = 'month-header';
  blogPostsList.appendChild(header);

  // Add posts for this month
  postsByMonth.get(monthYear).forEach(post => {
    blogPostsList.appendChild(post);
  });
});

Personalizing Your Website with Random Text Displays

Yordi Verkroost — Sat, 23 Nov 2024 07:30:28 +0000

The "Where to next?" section of my website includes a small story in the footer that helps visitors to explore semi-hidden pages and go on an adventure (inspired by Manuel). In it, I mention my favorite types of coffee, connecting to my page on Buy me a coffee. If you've paid close attention to this section, you might have noticed that the coffee types are randomly selected each time the page loads.

Here’s how I achieved that:

The HTML

The structure begins with this simple snippet:

I’m a huge <span id="random-coffee">caffè latte</span> fan, by the way.

The <span> element with the id random-coffee serves as the placeholder for displaying the coffee name. By default, it shows "caffè latte" in case JavaScript is disabled or unavailable.

The JavaScript

To make the magic happen, I added the following JavaScript code:

const coffees = ["caffè latte", "cappuccino", "flat white", "cortado", "latte macchiato"];
const randomCoffee = document.getElementById("random-coffee");
randomCoffee.innerText = coffees[Math.floor(Math.random() * coffees.length)];

Here’s a breakdown of the script:

Define the options:

The first line creates a list called coffees, listing five types of coffee. You can customize this list to include your own favorites or even replace it with types of tea or other beverages.
Locate the placeholder:

The second line uses the function document.getElementById() to locate the <span> element in the HTML by its unique id, random-coffee.
Randomize the selection:

The third line picks a random coffee type from the coffees array using the function Math.random() and updates the text content of the <span> element with the selected coffee.

That’s It!

This simple setup dynamically displays a different coffee name each time the page is loaded. It adds a little bit of randomness and personality to my site.

And now, if you’ll excuse me, I’m off to enjoy a warm and cozy caffè latte!

Step-by-Step Guide to Show Webmention Interactions on Bear Blog

Yordi Verkroost — Sat, 02 Nov 2024 13:33:23 +0000

This post shows how to use the Webmention.io API to display all the interactions people have had with your blog posts.

You’ll need two things to make this work:

Your website must be set up to use the Webmention.io service.
You’ll need a bit of custom JavaScript to show the interactions below each blog post.

Setting up Webmention.io itself is outside the scope of this post, as this website already provides detailed instructions.

Now, let’s move on to the custom JavaScript you’ll need.

The JavaScript Code

Below is the complete JavaScript code. I’ll explain how each part works after the code.

if (document.querySelector("body").classList.contains("post")) {
  function setContent(child) {
    switch (child["wm-property"]) {
      case "in-reply-to":
        return child.content?.text;
      case "like-of":
        return "liked this";
      case "repost-of":
        return "reposted this";
      default:
        return "interacted with this post in an unknown way";
    }
  }

  async function fetchInteractions(headerTitle) {
    const response = await fetch("https://webmention.io/api/mentions.jf2?target=" + document.URL);
    const data = await response.json();
    if (data && data.children.length > 0) {

      const interactions = document.createElement("div");
      interactions.innerHTML = `<h3>${headerTitle ?? "Interactions"}</h3>`;

      for (const child of data.children) {
        const interaction = document.createElement("div");

        interaction.innerHTML = `
              <p>
                  <strong><a href="${child.author.url}" target="_blank">${child.author.name}</a></strong>
                  <small> - ${new Date(child["wm-received"]).toLocaleString("en-US", {
          month: "short",
          day: "numeric",
          year: "numeric",
        })}</small>
              </p>
              <blockquote>${setContent(child)}</blockquote>
          `;

        interactions.appendChild(interaction);
      }

      const upvoteForm = document.getElementById("upvote-form");
      upvoteForm.parentNode.insertBefore(interactions, upvoteForm.nextSibling);
    }
  }

  fetchInteractions(document.currentScript.getAttribute("data-interactions"));
}

The main logic is in the fetchInteractions() function, which accepts one parameter: the text to display as the header for all interactions. By default, the header text is "Interactions," but you can customize it by setting a data-interactions attribute on the <script> tag.

At the top, there’s an if statement specific to Bear blog that ensures this code only runs on pages containing blog posts.

The fetchInteractions() function retrieves interactions specific to the current page using document.URL. The Webmention API endpoint used here is documented on the Webmention.io homepage.

A new div element is created (stored in the variable interactions) to hold all the interactions. For each child element in the retrieved data, a separate div is created with the details of a single interaction (stored in the variable interaction). This child data populates an HTML template displaying the author, date, and content of each interaction.

The setContent() function helps format the content based on the interaction type. It currently supports three types: replies (with text), likes, and reposts, each showing different text depending on the type.

Finally, in the fetchInteractions() function, the interactions element is inserted just below the upvote-form element, which is also specific to Bear blog.

And that's it! With this setup, you can easily show interactions on your blog posts. Happy blogging!

Step-by-Step Guide to Light/Dark Mode on Bear Blog

Yordi Verkroost — Sun, 27 Oct 2024 07:53:14 +0000

I recently implemented a light/dark-mode switch on my Bear blog using the prefers-color-scheme media feature combined with the light-dark() color function.

Here’s how I did it.

Step 1: Setting Up the CSS

CSS has gained some cool new features over the past few years, including the light-dark() color function. This function lets you specify two colors for any element—one for light mode and one for dark mode.

For instance, if you want your background to be white in light mode and black in dark mode, here’s how you’d set it up:

body {
  background-color: light-dark(#fff, #000);
}

I applied this approach to all elements with different color needs in light and dark modes.

Step 2: Adding the HTML

For the theme toggle, I used a single icon rather than a switch, radio buttons, or dropdown menu. The page loads with only the icon for switching to the opposite mode visible—since my default theme is dark, the dark-mode icon is initially hidden and the icon to switch to light-mode is visible.

The onclick event calls a switchMode() function, which handles toggling between light and dark themes (more on that later). Here’s the HTML setup:

<a id="preferdark" onclick="switchMode('dark')" style="display: none;">
  <!-- Icon for switching to dark mode. -->
</a>
<a id="preferlight" onclick="switchMode('light')">
  <!-- Icon for switching to light mode. -->
</a>

Step 3: Creating the JavaScript

The JavaScript handles two key tasks:

Switching between light and dark modes when the user clicks the icon.
Storing the user’s theme preference in localStorage to load it automatically on future visits.

The JavaScript is split into two parts: code in the <head> to set up the theme on page load and code in the <footer> to update elements after the page is fully loaded.

To add code to the <head> and <footer> on Bear, go to Settings > Header and footer directives.

`<head>` JavaScript Code

This code retrieves the previously saved theme from local storage, if available. Otherwise, it checks if the user’s browser or OS prefers a light or dark theme. If that information is not available, it defaults to dark mode. Then, it applies that mode to the :root element (i.e. the base element):

const storedScheme = localStorage.getItem("color-scheme");
const preferredScheme = storedScheme 
  ? storedScheme 
  : window && 
    window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: light)').matches ? "light" : "dark";

document.querySelector(':root').style.setProperty("color-scheme", preferredScheme);

`<footer>` JavaScript Code

This code shows the correct icon based on the preferredScheme variable that was set previously in the <head>. The switchMode() function updates the icon display, changes the :root color scheme, and saves the new preference in local storage:

document.querySelector("#preferlight").style.display = preferredScheme === "light" 
  ? "none" 
  : "";
document.querySelector("#preferdark").style.display = preferredScheme === "light" 
  ? "" 
  : "none";

function switchMode(mode) {
  document.getElementById("preferlight").style.display = mode === "light" 
  ? "none" 
  : "";
  document.getElementById("preferdark").style.display = mode === "light" 
  ? "" 
  : "none";
  document.querySelector(':root').style.setProperty("color-scheme", mode);
  localStorage.setItem("color-scheme", mode);
}

And that’s it—a light/dark mode switch for your Bear blog!

Step-by-Step Guide: Estimated Reading Time in Bear Blog

Yordi Verkroost — Wed, 03 Jul 2024 14:20:56 +0000

I'll be very short for those who just clicked this title and want results.

To show the estimated number of minutes it takes to read a blog post, add the following script to the footer directive of your Bear blog:

<script src="https://cdn.jsdelivr.net/gh/froodooo/bear-plugins@0.0.26/bear/reading-time.js" />

This shows the estimated reading time just below the post date, using 255 words per minute as an average reading speed. The placement and reading speed can be changed by adding the following data attributes to the script:

data-before-child: [number] (defaults to 4)
data-wpm: [number] (defaults to 255)

For example, to put the estimated reading time above the post date and set an average reading speed of 200 words per minute, use the following script:

<script src="https://cdn.jsdelivr.net/gh/froodooo/bear-plugins@0.0.26/bear/reading-time.js" data-before-child="3" data-wpm="200"/>

There you go, enjoy!

The code

For those who are interested, this is the full script that called in the custom footer directive of a Bear blog:

if (document.querySelector("body").classList.contains("post")) {
  const readingTime = Math.ceil(document.querySelector("main").innerText.trim().split(/\s+/).length / parseInt(document.currentScript.getAttribute("data-wpm") ?? 255));
  document
    .querySelector("main")
    .insertBefore(
      document.body.appendChild(
        Object.assign(
          document.createElement("p"), {
          className: "reading-time",
          innerHTML: `Reading time: ${readingTime} minute${readingTime > 1 ? "s" : ""}`
        })),
      document.querySelector("main").childNodes[parseInt(document.currentScript.getAttribute("data-before-child") ?? 4)]);
}

The first line makes sure that this code is only executed on blog post pages. Then, the average reading time in minutes is calculated by counting the words in the blog post (by splitting on the whitespace between words). The resulting value is rounded up. Then finally, a new paragraph is inserted on the page as a child of the tag with id main. A ternary operation makes sure that there is no "s" behind the word "minute" if the reading time is equal to 1 minute.

Why I Code

Yordi Verkroost — Wed, 19 Jun 2024 05:13:54 +0000

Some people write code to master a programming language or framework. They want to be the best Java, C, or Python programmer, knowing all the ins and outs of the language. They write code because they love the process. While others meditate, read, or go for a walk, they open their computers and start typing.

I'm not that kind of programmer. I never was, and probably never will be. I don't care much about the programming language I use, as long as it's easy to read and write. I have never searched for a job because the company used a certain programming language I liked. Hell, I never even started at a new job already knowing the language the company used. I don't care about getting certifications to show off my expertise. While I sometimes enjoy the flow of coding, it's not my ultimate goal.

I write code for the results it brings. I love seeing my most recently played song every time I reload my personal website. I enjoy adding functionalities that aren't natively implemented, like a search function on the Bear blogging platform. I find joy in teaching others how to code and seeing the spark in their eyes when a tough concept finally clicks.

Does this make me a non-typical programmer, someone who doesn't care much about the craft itself? Maybe. But in the long run, I don't mind. I code for my own reasons. And that's good enough.

Step-by-Step Guide: Random Post in Bear Blog

Yordi Verkroost — Tue, 18 Jun 2024 10:39:30 +0000

You might know the feeling. You've been writing for a while and have accumulated quite a few posts on your Bear blog. Then someone asks you which post they should read first. Of course, you know that you only write quality stuff, so the post you choose doesn't really matter.

In comes the Bear blog Random Post plugin!

Here is a step-by-step guide to implement this plugin on your own Bear blog:

Add the following HTML code to the page where you want to show the link to a random blog post:

<div id="random-post-all" style="display: none;">
  {{ posts }}
</div>

<span id="random-post" class="blurred">Random post: the post will show here when it's loaded.</span>

Add the following script code to the footer directive (Settings > Header and footer directives):
```
<script src="https://cdn.jsdelivr.net/gh/froodooo/bear-plugins@0.0.20/bear/random-post.js" data-prefix="" data-text=""></script>
```
Options:
- data-prefix: If set, this text is printed before the random blog post link. Otherwise, there is no prefix.
- data-text: If set, this text is printed as the link text. Otherwise, the blog post title is used as the link text.

... and you're done!

Read on if you want to know how this works or if you want to host the JavaScript directly on your Bear blog instead of via my GitHub.

The Code

The script that powers this random post plugin is the following:

if (document.querySelector("body").classList.contains("home")) {
  const randomBlogPost = document
    .querySelector(".blog-posts")
    .children[Math.floor(Math.random() * document.querySelector(".blog-posts").children.length)];
  document.querySelector('#random-post-all').remove();
  document.querySelector('#random-post').innerHTML = `${document.currentScript.getAttribute("data-prefix") ?? ""}<a href='${randomBlogPost.children[1].href}'>${document.currentScript.getAttribute("data-text") ?? randomBlogPost.children[1].text}</a>`;
  document.querySelector('#random-post').classList.remove("blurred");
}

The if statement ensures that this script only runs on your home page, and not anywhere else. When you put this entire script into your footer directive (in between <script></script> tags) and remove the if statement, the script will run on every page of your blog.

Inside the if statement, I use the embedded {{ post }} within an invisible div to retrieve all blog posts. Then a blog post is retrieved by randomly picking one from the full list. Finally, all blog posts are removed from the page and the element with the id #random-post is populated, using the data- attributes if they're set.

Step-by-Step Guide: Implementing Search in Bear Blog

Yordi Verkroost — Wed, 12 Jun 2024 05:17:19 +0000

Bear is an awesome platform designed for people who want to focus on blogging. It provides everything you need to write blog posts without distractions. Or "no-nonsense," as they say at Bear.

Since Bear is focused on just blogging, you might find it lacks some features that other platforms offer. That's the trade-off you make when prioritizing minimalism and speed. Luckily, with some development skills, you can easily add those features yourself!

One of these features is the ability to search through your blog posts on the blog overview page.

If you only came here to add this custom feature to your own Bear blog, follow the steps below.

Copy the following script: html <script src="https://cdn.jsdelivr.net/gh/froodooo/bear-plugins@0.0.5/bear/blog-search.js"></script> (See my bear-plugins GitHub repository for the latest release number)
From your Bear blog dashboard, click on your blog name, then on Settings, then on Header and footer directives, and paste the above script in the Footer directive.

... and you're done! Go to the blog overview page on your website. It now has a search input field at the top. This input field filters all your blog posts and only shows those whose titles contain your search query.

For everyone who want to know more or prefer to host the code themselves instead of using my GitHub repository, read on.

The Technical Details

Let's start with the content of blog-search.js. Take a look:

if (document.querySelector(".blog-posts") && document.body.classList.contains("blog")) {
  document.querySelector("main").insertBefore(
    Object.assign(
      document.createElement("input"), {
      type: "text",
      id: "searchInput",
      placeholder: "Search...",
      style: "display: block;",
      oninput: (event) => {
        document.querySelectorAll(".blog-posts li").forEach((post) => {
          post.style.display = post.textContent.toLowerCase().includes(event.target.value.toLowerCase()) ? "" : "none";
        })
      }
    }),
    document.querySelector(".blog-posts")
  );
}

Let me walk you through it.

The if statement checks if we're on a page that contains an element with the class blog-posts, which should be true for the blog overview page.

Next, we look for the <main> tag and add a text input field to it. We give this input field an id, a placeholder value, and an oninput event that triggers whenever someone types in the text field. When that happens, we take the search query and hide all blog titles that do not include this search query.

Instead of using my default script hosted on the jsDelivr CDN, you can copy and paste the full script in the footer directive of your Bear blog in between <script> tags.

One note about the code: you might have noticed the lack of variables that would increase readability. I chose to use as few custom variables as possible to avoid conflicts with variables in other scripts you might have included in your blog. Not using custom variables minimizes this risk.

If you have any questions or comments, please contact me via email or on Mastodon.

Kudos for the initial version of this code go to Herman, creator of Bear.

Show Your Recently Played Song using Netlify Functions and Last.fm

Yordi Verkroost — Tue, 11 Jun 2024 06:46:05 +0000

Netlify Functions (serverless functions) allow you to write simple JavaScript functions that Netlify turns into API endpoints. This is a handy service, especially for the use case I had in mind.

I wanted to show the last song I listened to on my website. The Spotify API has an endpoint that provides you with this information, but it requires a browser-based OAuth flow. Since I needed a server-to-server solution, I turned to the Last.fm API, which has a similar endpoint to retrieve your recent tracks and allows you to call this endpoint with an API key.

If you're new to Netlify Functions, they provide this excellent tutorial that guides you through setting up your first Functions project. If you're more advanced or want to figure things out for yourself, you can start by cloning this example Hello World project in combination with this more bare-bones documentation.

The Code

To retrieve my recent tracks from the Last.fm API, I wrote the following function:

import fetch from 'node-fetch'

export const handler = async () => {
    const LASTFM_API = 'https://ws.audioscrobbler.com'
    const API_KEY = process.env.LASTFM_API_KEY
    const USER = process.env.LASTFM_USER
    const ENDPOINT = `${LASTFM_API}/2.0/?method=user.getrecenttracks&user=${USER}&api_key=${API_KEY}&format=json&limit=1`

    const response = await fetch(ENDPOINT)
    const data = await response.json()

    const track = data.recenttracks.track[0]

    const result = {
        artist: track.artist['#text'],
        title: track.name,
        url: track.url
    }

    return {
        statusCode: 200,
        headers: {"Access-Control-Allow-Origin": process.env.CORS_ORIGIN},
        body: JSON.stringify(result)
    }
}

The first few lines define endpoint information, such as the root API URL, the endpoint path, and the API key required to retrieve the data. I stored this API key in an environment variable, which can be created in the settings of a Netlify Functions project.

Next, I call the Functions endpoint, extract the data I need, and reformat it into a new JSON object.

Then, on my website, I added a placeholder in HTML to hold the API response:

🎧 <span id="last-played" class="blurred">Last played: the song will show here when it's loaded.</span>

The span ID is necessary to find this element via JavaScript and replace the placeholder data.

There's also some CSS involved to blur this placeholder text initially until the Function data is collected:

.blurred {
    filter: blur(5px);
}

Finally, the following small script calls my Function and replaces the placeholder data:

fetch('https://bear-plugins.netlify.app/.netlify/functions/last-played')
  .then(res => res.json())
  .then((track) => {
    let lastPlayed = document.querySelector('#last-played');
    lastPlayed.innerHTML = `Last played: <a href='${track.url}' target='_blank'>${track.title} (${track.artist})</a>`;
    lastPlayed.classList.remove("blurred");
  });

This code calls the Function endpoint and uses the result to populate the previously mentioned span element with new data, which is textual information about the song's name and artist, plus a link to the song on Last.fm.

Final Result

At the moment of writing, you can view the final result at the bottom of my website homepage. The displayed song looks like this:

DEV Community: Yordi Verkroost

Advent of Code 2025: Waking Up With Puzzles

Advent of Polygon Interactions

Part one

Part two

The maths

Advent of Code 2025 - Day 6

Part one

Part two

Step-by-Step Guide: Posts by Month in Bear Blog

The Technical Details

Personalizing Your Website with Random Text Displays

The HTML

The JavaScript

That’s It!

Step-by-Step Guide to Show Webmention Interactions on Bear Blog

The JavaScript Code

Step-by-Step Guide to Light/Dark Mode on Bear Blog

Step 1: Setting Up the CSS

Step 2: Adding the HTML

Step 3: Creating the JavaScript

<head> JavaScript Code

<footer> JavaScript Code

Step-by-Step Guide: Estimated Reading Time in Bear Blog

The code

Why I Code

Step-by-Step Guide: Random Post in Bear Blog

The Code

Step-by-Step Guide: Implementing Search in Bear Blog

The Technical Details

Show Your Recently Played Song using Netlify Functions and Last.fm

The Code

Final Result

`<head>` JavaScript Code

`<footer>` JavaScript Code