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 moreFollowing 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:
h-card:
u-uid: https://bojanvidanovic.com
u-url: https://bojanvidanovic.com
u-photo: avatar url
p-name: Bojan …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 …
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:
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 moreI 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 moreWelcome 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.
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.
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 …
This cool feature to track my activities that involves GPS tracking and visulalize them with a various informations.
