Felix

Spent at least like one hour (not logged) trying to fix some weird issue I had with my backend. Turns out it was NodeJS being funky because I messed with some firewall settings recently lmao.
I also improved handling undefined and null responses.
For some reason, the Flavortown API returns null cookies for quite a lot of users now, so the cookie count may not be accurate sometimes.

You can edit the top project now! That was one of the suggestions someone had last ship, so thank you <3
This took quite a lot of restructuring stuff because I initially didn’t want to implement this lmao, but now it works! You can check out all the changes in commit ace77e6 if you like.
To my surprise, it was actually quite straightforward to implement, just took some time.
Oh, and a small change, the layout also saves if you exit the layout editor another way! I’ve added an optional Function argument to the Modal component, this way you can easily do stuff like this.

I did lots of smol UI/UX changes, but most importantly, there’s an option to select the file format of the final image now! This way you can instantly switch between PNG, JPEG, JPG and WEBP! This was fairly easy, as I can simply give the desired file format to the function.

I’ve made things a bit smoother with animations (though opening the MCSR statistics is still kinda clunky, but I’ll just keep it that way for now). Also debugged some issue with my backend as it failed to parse the JSON that Twitch returns. But now everything seems to be working fine again!

I’ve added another API endpoint to my backend! It pulls user data from MCSR’s API that I then use to display basic statistics on the site. I’ve also improved the header, it’s not that ugly centered h1 element anymore!

We’re so back!
The last devlog was quite some time ago, but ever since then I’ve added a favicon and og meta tags!
I needed to fix the backend today as MCSR changed something in their API that made my horrific code not work properly.
Before, their API always returned the streamers data at the first index of players array, but now it’s just at some random array, so I gotta actually check if the uuids match now. The site didn’t work for like at least a week lmao.

Yeah, implementing the JSON thingy was easy as I already had the base for that. Fully works now!
The editor doesn’t work on mobile though, it would just get to messy, so I’m straight-up making it download the card with default settings on mobile.
I’ve also added some extra information like the AI-Usage (I had that earlier, but removed it to avoid confusion, it’s optional now).
Oh, and avg. comments and likes get displayed with a decimal now, as they’re usually quite low.

Wohoo, the layout editor is making progress! My code is getting kinda messy, but it’s fine ;-;
Added like a selector thingy that allows you to change the card. Now I just need to save all that in a JSON and provide that to the canvas generator, should be fairly simple (I hope!!).

Made a (non-functional) layout editor!
I spend most of the time porting the canvas version of the card to actual React components so I can use them in my editor. I also have a separate CustomizableCard component now. It takes a state, setState, category and size. The state is just an ID for the stat, this way I don’t have to manually calculate the values again. I’m using the functions I created in the last devlog for this.
I really like how the hover animation for the customizable cards turned out!

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!

Added the ability to share presets!
I do this by saving all the data in an object, turning it into a base64 string and copying the url with the base64 string as a parameter. Figuring out how to create a safe base64 string that doesn’t conflict because of special symbols like / and + was kinda annoying to implement, but it works now!
I also added toasts through Toastify, notifying you when the url is copied to the clipboard.
When you open url with a shared preset as a parameter, it opens a dialog asking you if you want to import it!

Other than that, I also save the Custom ASCII-Art in the localStorage now, so that doesn’t get lost.

Polishing it more and more!

• I’m saving more stuff in the localStorage now, so things like your background color when exporting get saved now.
• When the user tries to remove the last color, it’ll just turn white
• The site doesn’t look weird on mobile now, I accidentally that meta tag in one of my commits lol
• The navbar sticks on top of the settings thingy on mobile, instead of the left side, where it cuts off
• The default color preset is the Rainbow Pride one now!

Some more cool stuff!
When seeing the color options for the first time, you’re granted with a Tip now! It tells you how to change and delete a color.
In addition to that, you can also toggle the text shadow now!
And all the settings you set, get saved in the localStorage now, so you don’t loose anything when reloading the site!!

I also tried to implement font sizes and struggled with that, but then I noticed that it’s kinda irrelevant as you can already set the scale of the Shonk when exporting it.

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.

yayayayay, did some stuff!!
You can now export the shonk as a fish script!! 🐟🐟🐟🐟🐟
The logic is pretty similar to the bash export thingy, but I had some problems with the Shebang (the thing at the beginning of a script to specify the interpreter, like #!/bin/bash) so that took some time to figure out.
I’ve also added the option to choose a font!! Currently there are 9 different monospaced ones, AND LOOK AT THAT BYTESIZED FONT, OMG, IT LOOKS SO CUTE!!!!
I HATE CANVAS BTW, I always have problems with fonts not being ready when the canvas is being rendered, but I figured out a whacky solution ig.

HELLO?? BIG SHONK HAS BEEN ADDED TO THE STORE!! 🚨🚨🚨
The categories work now! The code’s kinda messy but it does fulfill its job. I just created a category state and render the correct category component depending on its value. All the categories are stored in different components so it’s a bit easier to read.

Working on this project again!
I’m currently splitting the Settings up into different categories. I currently have three in mind: General, Colors, Text. The text one is completely new and will give you the ability to change stuff like the font and its size. I’ve only added the buttons, there is no logic yet lol.
Ever since the last ship, I’ve made some small changes like adding og meta tags and making the dropdown’s position (for the variants) absolute.

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.

Made several QOL changes!
The biggest one is probably the improved progress bar edges edges. Instead of the rough edges (second image), they are now smooth and don’t look ugly anymore (first picture)!
I’ve also changed the favicon so it matches the blue branding of the site.
And there’s a 404 page now, a pretty simple one!

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.

Branding!! Made a banner, an icon (welp, it’s just a little star lol) and a README. Also some tiny fixes and enhancements of course. The project’s licensed under MIT now. Will just have to add a favicon and some og meta tags but then I’ll be ready to ship!

The site is up and running and reachable under mcsrstreamfinder.netlify.app now!
I’m currently hosting the API on a Raspberry Pi. I set up correct and customizable CORS headers so you can reach the API from the site!
I also made it so you have to hover the Stream component for one second before it embeds the stream from Twitch. This took quite some time to do actually. I initially tried to start a timeout that executes the function to show the stream after one second and clear the timeout after the mouse leaves the Stream component, but that didn’t really work and often caused streams to still embed after the mouse already stopped hovering the component. In the end, I managed to fix that by using React states. It’s hard for me to explain so you can check the commit e90d930 if you want to see the logic.

Other than that I updated some css, fixed some small bugs and added env variables for the site so you can set the API URL through that.

You might ask yourself why the heck this devlog logs almost seven hours. I was SO LOCKED IN TODAY, all that time was logged today lmao. That’s not the only reason though, the only thing I worked on was the UI and UX. If you compare it with the last devlog it’s a day and night difference. Here’s a quick summary of what I did:

• Implementing the design I made in Figma
• Only list Divisions (in the filter options) that are currently streamed (that only took like five minutes though ;-;)
• Add a loading animation
• Add a fallback message if no streams were found (caused by filters or the API being down)
• Add a proper footer with links to the Credits, Source Code and myself lol
• Dynamically adjust the Stream component’s width and size to the size of the viewport so there’s no weird empty space on one side.

The last one was by far the most time-consuming one because I couldn’t figure out how to dynamically adjust the size (using flex-grow) while keeping both the thumbnail and the iframe (an embedded iframe of the twitch player in this case) the same size so the size wouldn’t change when hovering.
Finally I figured it out, by only making the image invisible (so it still takes up place) and setting the iframe’s positioning to absolute and setting the size to 100% it worked! I can’t really explain well what exactly I was trying to achieve and how I solved it so if you want to take a look at it you can check the commits on GitHub, especially bfd9eec
.

Could I have broken this down in more devlogs? Yeah, of course, but I WAS IN THE FLOW STATE!!!

Added sorting options now. You can sort by elo, viewers and duration. Wanted to add an option to sort by followers too but then I’d have to play around with more Twitch API endpoints and I don’t want to do that currently. You can also switch between Ascending and Descending order. I did this by simply using the sort() function on Arrays.
Was busy with other stuff the last two days so I didn’t do anything but now I can finally start working on the UI and UX pretty soon!

Three hours of pain but finally the filtering works correctly. You can select multiple filters now and it’ll only show you results that match those. I did that by removing all the streams from the Streams Array that do not contain any values from the filtering array. Idk, it’s hard to explain for me, if you want, you can check commit ff2bdb2 to understand the logic for yourself. Before cleaning up, half of the code was literally comments with failed attempts ;-;

Not that much progress sadly, I refactored some stuff so it’s more organized. There are filter options for Language and Division now, though you can only select one option at the moment. It works, but it’s really unpolished and still misses features like selecting multiple options, I’ll try to get that working tomorrow.

More work on the front-end! It correctly shows the rank division and elo with a fitting linear gradient now. Additionally, the elapsed time since the beginning of the stream gets calculated and displayed. Language tags also get translated into the actual name now. If you hover a stream card it embeds a Twitch player now so you can watch the stream for a little while and see if you like it. The only issue I’m having right now is that sometimes Twitch responds with undefined values (e.g. if the language is not specified), I’ll have to take some extra steps to debug this because most of the time all the streams don’t have any undefined data.

Worked on the Front-End. You can now view all the thumbnails and information about the stream. I also pull some more stuff from the Twitch API now and use the streams endpoint instead of the channels endpoint because the streams one covers all the data I pulled from the channels endpoint and gives some additional useful data like the thumbnail.
The CSS is very bare bones ofc, only did a rough structure for visualization, I’m gonna focus on displaying all the needed data first and work on the design afterwards.

I’ve been playing around in Figma for a while and am pretty satisfied with how the designed turned out. The Streams are just placeholders ofc and I’ll most likely add a footer or smth like that later on.

If you look closely at the screenshot of the last devlog you might see that the Minecraft player is completely different from the Twitch streamer. I thought that Twitch would return an array with the same order that I provided but that was not the case lmao. Eventually figured out how to work with that data and assign the Twitch statistics to the corresponding Minecraft player. The token should also get automatically renewed once it’s unvalid now.

Made an API endpoint to get all the MCSR users that are currently live on Twitch, additionally, it also pulls data about their stream from Twitch’s API. It works but it’s not very efficient as I request a new access token from Twitch on every request, I’ll have to see how I can improve that.
All this would’ve also taken like thirty minutes less if I wouldn’t have made a spelling mistake in my .env file (I wrote TWICH instead of TWITCH ;-;
It also took me a while to figure out that you can request data for multiple Twitch users with one request.

This is everything I need from the backend, now I only have structure the code, make it more efficient, secure and implement it in a usable front-end.

Fun with API’s! First time building an actual project with a backend.
Using NodeJS for this project. I made an endpoint to get all streamers that are currently streaming MCSR, it just pulls that data from MCSR’s API but cleans stuff up and structures it in a way I can work with easily. I also want to return the stream statistics (viewer count, username, tags and language) via that API, will have to work with Twitch’s API for that.

I also made a rough(!) design in Excalidraw (just a rough visualization of what I want to build) but first I’m gonna try to get the backend working!

Making the final touches. Fixed a few bugs and made some small but noticable changes. If you look at the bottom you can see a gradient now, I moved the button to create new entries to the top right now, before the button would sometimes cover the actions for the entries, and the modal doesn’t cover the full viewport on mobile anymore, I don’t really know why I decided to do that before lol. Other than that I only did some small QOL tweaks and added a few more safeguards.

Okay I figured out how to convert a JS Date object into a valid value string for an input element now and started to work on giving the user the ability to modify their attempts. It technically works but I find it really unintuitive and confusing, it also doesn’t seem like it’s possible to set a maximum and minimum time. I’ll discard the changes. But I do use the function to convert that Date object in one of my modals so it was worth it! I don’t think there’s much else to add so I’ll probably do some final touches and ship the project soon.

Updated the alien theme, most noticeably the font. Made some other tiny changes too, like actually using the font variables. Next, I want to make it so you’re able to modify your attempts. Last time I tried to do this I failed because I couldn’t figure out how to set the default value with the data of a Date object. Is definitely possible, might ask people for help though because I’m feeling kinda lazy right now. I’ll need to figure that out anyways because there is no indication that there’s a date/time input element when using iOS w/ Safari as there is no default value set.

Wrote a README with some guidance on how to add a new theme. Will most definitely add more images later on but for now it’s just the banner. The project is also licensed under MIT now!

Settings!!
Added the ability to choose a theme, including popular color schemes like Catppuccin and Rosé Pine, and… Alien?
You can also Import/Export your entries now. In addition to that I fixed bugs and made some QOL changes like usual.

Why this took five hours you may ask? It didn’t - I tried to implement a backend with authentication and a database to store all the entries. I learned stuff, like how to encrypt passwords with bcrypt, make endpoints with Express.js, what the heck salts are and all of that. In the end I did eventually give up on implementing it though, I couldn’t really figure things out, but I’ll most likely give it a shot in the future again!

Cleaned up some code (button are actually wrapped HTML button elements now…) and fixed small bugs. I spent most of the time trying to make it possible to edit the single attempts later on. I had an idea but ended up failing to set the default value & min/max value of a datetime-local input element using a JS Date object. I’ll try to figure that out in the future but right now I’m trying to implement authentication, it seems a simpler than I imagined, maybe I’m missing something though so ima have to see how it goes… I hope this works! Will share more details about that in the next devlog ofc, I only practiced auth outside of this project so it didn’t even count the time lol.

Cooked a banner in Figma, pretty happy with how it turned out. I used this really cool QR-Code generator called Mini QR (https://github.com/lyqht/mini-qr) which allowed me to create this cute QR-Code!
Not too sure about the URL, it might change later, haven’t deployed it anywhere yet.

Made an editing modal. Changing the name of the entry and permanently deleting it is possible now.
I also save the entries in an Array now. When I began working on this project, I saved them in an Object with the name as the key, then I decided to use id’s instead which resulted in a JSON structure like this:

{
    "0": {
        "name":"Haiii!",
        "attempts":[1769431804269]
    },
    "1": {
        "name":"Blub 🐟",
        "attempts":[1769431803548]
    }
}

Yea, that was stupid, it’s literally an inefficient Array lmao.

Made a confirmation component! Before starting a new attempt you have to confirm that you actually want to do that before any action is taken.

Pretty happy how the Modal turned out. Just need to add an exit button for mobile users/small screens but that should be done pretty easily. I really like this backdrop blur filter when the modal is open, never thought about that before seeing that Flavortown does it like that.
I also made a reusable Checkbox component which fits way better than anything I could do by customizing HTML’s checkbox element using CSS.

Worked on the Dashboard’s styling and added a proper button to add new entries now, it opens a modal which allows you to enter basic information. I want to add the option to enter previous attempts in the future.
Trying to implement a modal in Typescript was a little different compared to how I used to do it in Javascript so I struggled with that a bit.

The Entry Details site is mostly done now. Everything works and it’s a bit more structured than before. It also works on mobile. The only thing I struggled with was the fact that the browser renders:

element {
   overflow-x: hidden;
   overflow-y: visible;
}

as

element {
   overflow-x: hidden;
   overflow-y: auto;
}

for some weird reason. This caused a scrollbar to appear for the header. Didn’t know how I’d properly use text-overflow without only hiding the overflow on the x-axis (so the bottom wouldn’t be cut off) so I ended up looking at how YouTube did it and it turns out they just hid all the overflow and increased the line-height. Copied that and it works like a charm!

Okay the detailed information page is taking its form. That’s about what I imagined. Of course I still need to change some stuff regarding styling but the functionality is mostly done! Displaying the time in the correct format was definitely the hardest thing here.

7 hours… wtf 😭
Welp, it was a lot of pain. I was trying to implement the design for the progress bars in CSS and I just couldn’t figure out how to do so. It’s still not looking how I want it to look but it’s getting closer and one of my friends managed to recreate that in CSS so I’ll take a look at that and try to implement it too. I also made some other small changes of course but most of the time I was just trying to figure out how to do that design. I messed around a lot with the mix-blend-mode property in particular, it did NOT go well…

It renders a maximum of three progress bars so the site doesn’t get filled with those ^^

Entries are now stored with the help of id’s. I also started working on the detailed view where you can see all of your attempts and progress bars showing how long you’ve been sober. I showcased the design of that in my first devlog.

Styling makes a big difference! (obviously…)
Apart from that I save the attempts in an Array now so you can view all of your attempts later on.

You can actually view your progress now! If you want to understand the logic behind it you can check out the source code of the Entry component in the Repository. It basically subtracts the current time with the creation date of the entry and works with that to tell you how much time has passed.

You can add and remove entries now! First time using Typescript, I can see why one would prefer that over Javascript. I still need to get used to it though!
Currently saving the entries in the localStorage.
I’ll always give the user the option to do so but for this project I’m gonna try to implement a login system so you can retrieve your entries from everywhere and don’t have to worry about your data getting deleted.

Tried out a few designs and am pretty happy with this one. Quite simple, I don’t know how I’m at three hours already lmao (lemme be slow :p). Went for a mobile-first design because everyone says you should, so why not give it a shot ig.
The design is inspired by the Sobriety App and I obviously copied those progress bars from the “I am Sober” app.

Added a README, made a banner in Figma, fixed bugs and made some QOL changes. Also worked on an issue template for GitHub so you can easily suggest new flags. Spent two hours trying to rework that colorization algorithm for better results but failed horrendously and discarded all the changes.
Oh, there’s also a favicon now! Got it from the pixel safari ✨

YURI!!!!
You can insert custom ASCII-Art now (or whatever you want to colorize). Adding the custom variant wasn’t that hard to implement and didn’t take long, but fixing all the issues that were caused by selecting a preset color combination with an amount of colors that was greater than the amount of lines your custom ASCII-Art had was… painful (T_T). I figured it out eventually but it always feels so weird thinking about it for an hour and then only committing like 10 lines of code lmao.
Also did some other smol bug fixes and changes like usual.

Would say that I’m mostly done now, will just have to add a favicon, maybe a few more presets, a banner, a proper README aaaaaaand then I’m ready to ship I think!

You can export your Shonk into a bash script now!!
Thanks for the suggestion MeBadDev!
Took quite some time cuz I needed to figure out how to properly display rgb colors in bash. Also did a smol bug fix regarding the z-index of an element :3

Happy New Year!!!

Added a maximum of colors you can select based on the amount of lines the Shonk has.
And I fixed the font rendering finally!! Turns out it only worked on my Desktop and not on my mobile devices because I actually had the font installed on my pc and it didn’t get overridden because I made a typo in the FontFace (T_T)
Also fixed some other bugs, you can check out the commit history on GitHub if you’re interested!

Oh, and I’m using VSCodium instead of VSC now :3

I added credits for the ASCII-Art and worked with React Router for the first time! Was actually way easier than I imagined it to be. Also changed the default font because the old one was hardly readable. Not too sure if I’ll stick with that one though. There’s also a link to the repository in the footer now!

Oh and the year is almost over, or maybe it is already for you. Hope you’re havin’ a great start into 2026!!

Okay the colors are distributed more evenly now! Tried out a lot of different ways to do that and ended up in LibreOffice Calc to find out what the heck I needed to do. Finally figured it out after like 2.5 hours of pain… On the Screenshot you can see the old version on the right side and the new one on the left side (the one with the border around it!)

Also some smol changes/bug fixes, you can check out the commits on GitHub if ya wanna know more :3

Aaaaand, I just noticed that I didn’t even listen to music the whole time?! 😭

Added different shonk variants and some more presets!!
Why this took so long? I dunno (T_T)

Trying to make the site mobile responsive is pain… It’s better than before but the text in the HTML canvas is somehow thinner on mobile than on Desktop?? I’m guessing that it has something to do with the pixel density but I don’t know how to fix it (if you have any idea then please tell me 😭😭)
In addition to the site being a bit more responsive, I also added preset color combinations, I’ll probably add a few more in the future! Apart from that I tweaked some small stuff.
Overall I feel like I’m pretty darn slow. The seemingly simple project is about to hit 24 hours of logged time…
I’m almost there though, I’ll just make some minor QOL changes, add different Shonk variants (and maybe an option to insert your own) and… cry while trying to make the site mobile compatible and make the color distribution more even when… it can’t properly distribute them evenly (T_T)

Added download options. You can now change the scale and the background color of the PNG!!
I struggled a lot trying to export the canvas scaled and am still confused about that but it works now!
I also noticed that the JetBrains Mono font had ligatures by default so I disabled that, should look better now :3

You can download your Shonk now!!
I achieved this by transforming the preview from simple elements into a HTML canvas which I can easily transform into an image you can download. This took a while but it finally works! I’ll also try to add the option to either download it with a transparent background or the with the background my site uses (or a custom one, idk yet).

You can now remove colors either with middle or right click!! Also changed some stuff regarding how I store the selected colors but that took a lil while cuz I don’t have that many braincells :P

Also replaced HTML’s checkbox element with my own custom component now so I can style it properly. Also added pointer cursors to make the UX a bit more intuitive. Next I’m probably gonna add the ability to remove colors (and reorder them maybe? :3

Merry Christmas!!
Didn’t do all too much today. I made my own component as a replacement for HTML’s color input element tho, so I can implement the ability to delete colors more easily in the future.
I’m gonna do that for the “Loop” checkbox too so I can properly style that one.

And I didn’t even know that you can upload multiple attachments, I added one where you can see the colored Shonk with the “Loop” setting toggled on ^w^

It’s getting somewhere!
You can add as many colors as you want now!! (I should add a limit tho, that shouldn’t be too hard).
I still need to add the option to remove colors but I dunno how well I can do that with the default HTML input element I am using… Same goes for the Loop setting, I dunno how much I can actually customize it using CSS.
Yeaaaa and I still have to add the Download, the presets, the Shonk variant switcher and a lovely footer :3

This took wayyyy to loong but the basic functionality is done now. Just gotta let the user add any amount of colors themselves, add more Shonk variants, make preset color combinations (forgot about that in the Figma design) and make the customized Shonk downloadable!
Oh, and I actually have to implement the design I made in Figma, but that shouldn’t be too hard!