Recent posts

  1. After adding the h-card, the second step in joining the IndieWeb was to mark up all of the content with the h-entry microformat which is often used with content intended to be syndicated, e.g. blog posts.

    Microformats are the secret sauce of structured data on the web. They breathe life into your content, making it more interpretable for both people and machines. Among these microformats, h-entry …

    Show more
    21:54 (+0200)
  2. Following the guidelines on IndieWebify.Me, one of the first steps when joining IndieWeb is to create a homepage h-card which describes your profile in a simple and open format for the web.

    I have added it to my profile card, which can be verified here with the following structure:

      u-photo: avatar url
      p-name: Bojan …
    Show more
    22:50 (+0200)
  3. While I was finalizing the /changelog page I was thinking about how cool it would be to add some sort of a data visualization because… I <3 data vis. So, the first thing that bumped into my head was a calendar heatmap like the one on the GitHub profiles for activity. Lurking around the internet I found this amazing library called Cal-Heatmap which does exactly what I wanted.

    It took …

    Show more
    • calendar heatmap visualization
    23:12 (+0200)
  4. Initially, this website had a hamburger menu which I wasn’t the biggest fan of, then I removed it and implemented the desktop version of the menu but with the ability to scroll on mobile, and now… I went back to the hamburger menu.

    The reasons for this change are:

    • The header takes less space on mobile having a single icon in the row with the heading, instead of a whole new row. …
    Show more
    22:23 (+0200)
  5. Previously, all change log posts were always prefixed with “added”, “fixed”… etc, which made it hard to differentiate changes. Now, with the addition of color-coded types, the changelog becomes much more user-friendly where each change type is assigned a specific color, providing visual cues that make it easier to distinguish between different types of changes.

    Show more
    23:21 (+0200)
  6. I had a lot of fun implementing a progress visualization for my now page posts, allowing me to track and visualize the time spent on each task.

    Using a dynamic dot-based visualization, inspired by Jira boards, I can now visually represent the progress of my tasks and showcase the time invested in each one. This helps me stay organized, monitor productivity, and gain valuable insights into my …

    Show more
    • Jira-like dot-based progress visualization
    21:34 (+0200)
  7. Welcome to my personal check-ins section! Here, I am thrilled to share some of my favorite places and experiences with you. From charming cafes to breathtaking natural landscapes, this is where you can discover the hidden gems that have captured my heart.

    21:46 (+0200)
  8. I have added a profile card component for those who end up on my home page and wonder “Who is this?”. The description will probably get updated, and the cover is only visible on a desktop, as I wanted the keep it as simple as possible on mobile.

    • Profile card
    22:59 (+0200)
  9. This website is built on top of the Tailwind CSS framework which most of the time works great, but having the base font size by default set to 16 pixels it seemed in this project too chunky on mobile.

    After doing some tests and comparisons with other websites and apps, I found out that 14 pixels is the sweet spot on mobile, while on bigger screens it fits betters with the default 16 pixels.

    Not …

    Show more
    19:27 (+0200)