Retro View Counter

Yet another Page View counter!

It's far from the most ground-breaking thing I've done, but I did put my spin on it. To preface, I'm running my portfolio site via a Next.js application behind Apache, and I've manually implemented some Web Vitals, so before I even add a single line of code I have two pools of data tracking both when a page was accessed, and the path of the accessed page. With this in mind, I felt no need to add some form of database or additional tracking, and went with using the existing web vitals as my data source.

Why not the Apache Logs? Well, those track every request, including bots and web crawlers, and I had no intention of counting those as "views."

Parsing & Counting

As I'm gziping previous logs, I need to both read the latest JSON file manually, and unzip the the files using zlib, after which I count visits from individual IP addresses that are at least 5 seconds apart.

Retro LCD Display

What brought this feature back to my mind was seeing Josh W Comeau's counter on their blog sites, and it was exactly what I wanted. So after opening up DevTools and figuring out how it worked, I reimplemented it as a React component on my own site, and made it so the counter would only make a request to my newly created views import whenever it was in view.

After figuring out how the style was done, all I needed to do was create a mapping from the character I wanted to represent, to an array of seven booleans - one for each segment of the seven-segment display - indicating if that segment was on, or off.