Wow. It's been a while since the last post huh? For September, nothing was happening. For October though, too much stuff happened and I didn't quite have time to write them down. Now that most of those things are done, I can finally write a few blog posts about them!
This is the Brella Counter. It counts how many Brella players I have encountered while playing Splatoon 3. I don't want to repeat too much here, so I'm only gonna talk about features you may miss and technical stuff.
As you load into the page, you will be greeted by |4 images of Integrelle|. Did you just see them move? They are smiling! Don't worry. It's just |SVG magic|. Remind you that I'm a vector artist. The fun thing about vector graphics is that you can easily control it using code. I have given each of the image IDs for their eyes and mouths, and when the page loads, the JS randomizes them. |Reload a few times, and you'll see different combinations!|
While we're on the topic of images, take a look at the background as well. Do you recognize them? Yup! They are |opened umbrellas|. This is actually based on an transition generator I made, called Brella Transition. It can generate randomized top-down view of umbrellas opening and closing. I simply modified the code a little bit to put it on the website, and generate a static image instead of the animation.
Speaking of which, my website is also open source! Source code can be found on GitHub.
One popular question (I'm guessing) is "How did you make that". I have already put it on the website itself, but I think it's rather important so I'm repeating it.
This is done through stat.ink, a website designed to track the battles of players. I set up the bot that uploads my battle pretty long ago, and it has been consistently uploading my battles as I play. These data track a lot of stuff, including team members and opponents. Therefore, I just made a backend that automatically pulls from stat.ink, and count the Brellas from that.
After finishing the counter, I was looking at the network tab.
"Damn. The JS file is 250KB in size. That's too big!"
And that has caused me to go on a quest on optimizing the data transfer.
Before I made the size optimization though, I realized another problem. The website isn't very SEO (Search Engine Optimization) friendly. It also fails to provide metadata quickly for embeds. This was the first problem I addressed.
So I spent a couple days figuring out Server-Side Rendering (SSR) for React. The front-end was built using vite, but the back-end wasn't. I had to first combine the 2 packages into 1, so I can build JSX stuff into the back-end. It's just mostly moving things around.
The hardest part was actually RNG synchronization. Because the website also randomizes some colors, they render differently on server and client. This causes the problem of colors changing when the client hooks them.
To resolve this, I found a way to send a "seed" from server to client, along with other server data. Now it works perfectly! No more flashing colors!
With SEO out of the way, it was time to tackle the size problem.
The first thing I did to reduce the size was to get rid of some packages. Namely, I removed "tinycolor2" and "@svgdotjs/svg.js".
"tinycolor2" is a package I use to manipulate colors. I was using it to generate the random colors by randomly applying HUE rotation on a set color. To remove it, I created a separate file, and copied only the functions I'm using. That got rid of about 30KB of bundled JS.
As mentioned earlier, there are SVG manipulations of the Integrelle images, and they are done through "@svgdotjs/svg.js". This library is huge, so removing it would save a lot of bandwidth. It wasn't even that hard. I ended just using built-in JS of the browser to manipulate the SVG, by creating a "div" and loading the SVG code, and then apply different CSS styles on specific elements. Wallop! The bundled JS is now 150KB!
150KB was still too big in my opinion, but there was nothing else to remove! The only dependency left was React, and boi was it HUGE. So I looked for a lightweight alternative of React, and quickly found like-minded people.
Enter our lord and saviour: Preact!
It's meant to be a lightweight alternative of React, which was exactly what I was looking for. So I tried it. Converting React to Preact isn't that hard. You just change a few imports, swap out the Vite plugin and that's it.
And I hit compile...
It's amazing!
The bundled JS code has reduced 5x in size. The file is now just over 30KB! I'm so happy with the result.
With what I have learnt from using Preact, I decided to also change my blog site up. It had the same problems as the initial Brella Counter: non-SEO friendly and huge JS files. Do you feel like the website loads faster today? That's because I fixed it!
Here's a size comparison of the JS files from before and after. Look at that size reduction! It's even more significant than the Brella Counter. They are 50x smaller!
Anyway, I'm happy with what I learnt here. The blog should be much more accessible now! There will be more post coming this week. Stay tuned!
