Flavorstats

Wohoo, the canvas loads the layout from a JSON file now! Welp, not the whole layout, but you can change what data it should display for the Projects and Devlogs section. The “Layout” currently doesn’t do anything tho, you’d need to manually change the JSON right now. But I’ll implement that next!
I basically made a function that pulls the id from the layout and then uses data from the translation file to show the correct information.
The structure of the translations is:

"id":
    "label",
    "unit",
    "time based?"
]

I need to know if it’s time based so I can properly return the time with the correct unit, so I don’t end up showing the user something like 8993 seconds or 0.2 hours lol.

I’m so bad at explaining stuff lmao, but at least it’s working!!

I’ve added a preview modal, and a general modal component now.
The function to generate a card doesn’t directly handle the downloading anymore, instead, I just return the canvas element.
I struggled a bit to add that canvas element there as React apparently didn’t like the fact that I wanted to add a HTML canvas element there. I’m using some hacky solution I found on Stackoverflow to solve this problem, so instead of directly adding that HTML element, I’m instead appending it to an already existing one later on, that works for some reason
I’m gonna try to add customization options like changing the layout now!

Worked on mobile compatibility, not perfect but it works just fine!
I’ve also commented out the AI-Usage part for now, as it might confuse people. It’s just displaying the percentage of projects that have an AI-declaration, I obviously don’t know how much AI one actually used lol.

Final touches for the first ship!
Project is deployed on Netlify now. Had to do some trickery to make the back-end available as it’s running on my Raspberry Pi next to me lol. It takes the backend information from an .env file now.
I’ve also made some small improvements so stuff looks great on chromium-based browsers.
There’s also a banner banner now!! Made that in Figma, not anything special but better than nothing!

But most importantly, a favicon!!!

Made lots of rather small changes, but they’re really noticeable!
I tried making the overall experience smoother by adding stuff like progress bars and small animations like the site fade-in. I’ve also added a Demo, in case the API is down or I’m getting rate-limited.
Oh, and I’ve added a timeout for the Search results request, after 15 seconds, it’ll abort the request and throw an error.

Added a placeholder image for profile pictures that are still loading or fail to load, meaning that the image loading doesn’t look as weird anymore!
Also scaled the canvas by 2x so it’s not that blurry.
And most importantly, pluralization!! Implemented a function that takes a number and a string, e.g. pluralize(10, "devlog"). If the number !== 0, it’ll add an s to the end of the string and return both again.
Took some time to implement the function everywhere, but now it works!
Weirdly, there is something that causes the Top Project’s description to wrap too early in the canvas, I think that might be because I restructured stuff before and probably use the wrong font size to calculate the width, will check!

The heatmap has been added!! This took less time than I initially imagined honestly. Not perfect though. I just entered some random id and stumbled upon this user (7436), the canvas is a little screwed here lol. I should wrap long names and make sure that long strings don’t overflow! And I should set a minimum width for the heatmap in the canvas!
Anyways, the logic of the heatmap is pretty similar to the one I made before. But this time I also need to calculate the coordinates because… canvas

Small, but important update! If the top project’s descriptions is shorter than three lines, the height of the card will adjust accordingly. Was a bit weird to implement as I had a fixed size before, but I figured it out eventually. Also fixed a bug that’d break the canvas if the description had less than three lines.
Now to the heatmap!!

Well, thirty minutes or so just didn’t track, so the logged time of 16 minutes is not correct. It’d probably be 46 minutes, not too sure.
I finished most of the devlogs part now. Was able to do this pretty fast using the drawCard() function I created and talked about in an earlier devlogs. Also made the code a little bit easier to read, don’t want to kill my eyes…
Just need to implement the Heatmap now, will see how that goes.
I also wrote a README, that’s the thing that took 16 minutes lol. Includes some basic information about the project, how it works, some images and a license notice.

Working with canvases requires some patience, everything takes so much longer… ;-;
The drawCard() function can also take a custom width and height now. This way I created a card for the top project. There’s no such thing as simple text-wrapping when using canvases, so I had to check widths and stuff like that to somehow make it possible lol.
Explaining it in detail would be quite time-consuming, so if you want to see the logic behind it, you can check this part of the code: utils.js (ll. 72-127)

Didn’t do anything yesterday because I was hella sick. Worked on a function to draw a card today, it works! To draw a card, I simply need to call the drawCard() function with following parameters: Canvas Context, x, y, line1, line 2 (the lines are optional).

Bahahaha okay, this doesn’t look like two and a half hours of work, but it is!!
Canvas is not easy… not for me at least. It’s so annoying to work with. This alone took quite long to do.
To round the image, I needed to save the state, draw a circular arc, turn it into a clipping region and, draw the image and then restore the state again so the clipping region isn’t there anymore. It’s just so annoying to deal with 😭
For the Card thingies I’ll definitely create a function to easily draw those instead of having to do the same shit again every single time, we’ll see how that goes…
I also needed adjust the back-end to respond with the base64 encoded string instead of the image url so I won’t run into CORS issues in the front-end.

Oh, there’s a download button now!

Took longer than expected, but I’m done with the Heatmap now!
My clumsy brain made a Heatmap illustrating the amount of logged time on that day, but that’s absolute nonsense as I rather want illustrate the amount of devlogs posted on that day (actual coding time is not really possible without some separate Hackatime connection afaik). Now I’m illustrating the amount of devlogs posted on that day in addition with a tooltip telling you the exact amount and the hours spent. What took quite some time to do was filling the days where zero devlogs were posted/zero time was logged, but I figured that out after digging through some Stackoverflow posts!

Also, yes, the code is pretty darn unreadable, but I don’t really care that much lmao.

A lot more styling!
Added a Card component that can take two arguments. So you can either have one or two lines.
I didn’t really do much else besides styling though, but it’s obviously a huge difference. I struggled a little with implementing that ellipsis text overflow for the top project, but other than that it just took some time to do the styling.

Also!!! Did you know that you can have nested media queries in CSS?? I did not!!
So something like this is possible:

#element {
    display: grid;

    @media (max-width: 600px) {
        display: flex;
    }
}

I did not, but now that I do, it helps so much!!

Some styling, makes a big difference already!
Also calculating the participation years now. And the stuff is now measured in minutes/hours instead of seconds!
And the top project gets calculated now, I just sort the projects by their amount of likes on the devlogs and display the one with the most ones.
I’ll probably style everything now and work on the Heatmap afterwards, but I don’t think the Heatmap should be that hard to implement actually, I’m pretty sure I’ll be able to do that fairly easy.

I set up React Router so you can get the stats at /stats?user=:id now. Calculated some stuff like AI-Usage, ship percentage, average time, average words and stuff like that.
While doing all this I noticed how I often ran into Flavortown’s rate limits. That was probably caused because it somehow called the API twice at the same time, I fixed that.
The rate limit for projects being at 30 req/min kinda hinders me from pulling the ship rate and AI-Usage though, as I reach 30 requests pretty quick when making a request for every single project. I could just leave those two things out ig, but idk, I’ll see…

Mostly worked on design again. Added the Orpheus holding the Hack Club flag! Also a footer that with a link to the source code. Designed a Stats site in Figma, it’s pretty similar to the Card I designed in an earlier devlog, just with some more statistics and better labelling now!

More work on the back-end!
I started to work on the Design for the Statistics site and then noticed that the API doesn’t return the most used word yet, so I implement that!
I kinda struggled to do that because I had to create an Array with every single word that has been used, then create a Map with a word count pair and then sort it and return the top 10. That was way too much thinking for my tiny brain, but I eventually managed to figure it out!

So if you ever wondered, my top 10 words have been:
the: 265x | i: 140x | to: 130x | a: 99x | and: 97x | that: 74x | it: 69x | you: 62x | can: 49x | of: 46x

Worked on the front-end, you can search for users now! The results are sorted by the amount of cookies. They also show you the users profile picture and cookie amount so you can easily identify the correct one.
The functionality was quite easy to implement as I have the back-end ready now.

Went for Flavortown’s design as you can clearly see lmao, I think it looks great, especially that title thingy at the top!

The back-end should be mostly done now actually. I’m using Flavortown’s /users/:id, /projects/:project_id and /projects/:project_id/devlogs endpoints to fetch data about general user- and project-specific information. Took me some time to figure out how to calculate some stuff I need, but I ended up getting everything I want (unless I forgot something, I probably did)!

Next is gonna be the front-end, that’ll probably take some time lol.

Working on the back-end right now. You can search for users! This literally just pulls and returns the Array from Flavortown’s API, so nothing special lol. Have not, and probably wont implement pagination though as you shouldn’t get more than 100 results when searching for a user.
Also created a new React + Typescript project for the front-end using Vite. Cleaned up stuff there and initialized both the repository for the back-end and front-end.

I always used CommonJS for back-end stuff in the past because I saw people using that in like Tutorials and stuff, for this project I’m using ES6 though, I don’t understand why I would want to use CommonJS lol.

Created a design for the card I want to generate. This is solely the design though, there’s no functionality yet.
Went for the typical Flavortown colors and its general design language so the exported card has a similar and familiar design.
For this project, I’ll probably try to work with HTML canvasses again, so I can export the stuff as an image and scale it however I want. Seems a bit challenging as I don’t have a lot of experience with those, but I’m sure that I’ll be able to figure that out somehow.
Getting the information shouldn’t be too hard I suppose, except for the heatmap, that thing seems quite hard to do lol.