Case Study

I initially hit this trivia API because LevelUpTuts told me it was a good way to absorb good patterns in Svelte. It certainly was and I learned all about Svelte's templating, the way it handles async/await (and how you are still free to go down the baremetal JS path if needed), transitions galore, all of the syntactic sugar that is heaped onto the markup, and perhaps the most dead-simple approach to state-management via stores.

Never Stop Leveling up

Anyone who interacted with the original version of this project was met with a VERY simple trivia game. First thing, I tracked the API and added the ability for users to choose their category. This immediately brought state-management, and the organization of different views, to the forefront and I was not prepared for the amount of debugging that awaited my asynchronous calls.

With only a few strands of hair remaining, the categories and quiz pages were synced and easily interchangeable. Cool, but it didn't look particularly tasty and no amount of transitions were going to make 20+ categories dumped into the viewport appetizing. I leaned on css-grid and the ol' repeat(auto-fit, minmax(100px, 1fr)) to save my bacon (not that I eat bacon) and inject little buttons responsively based on the width of the container. Next, I threw some p5js particles into the mix because that always helps tip the mood to groove. At the time, figuring out how to use p5 in Svelte was - like it is for a newbie with every framework - uncomfortable. Had to make a separate component that passed my sketch into a new instance of a p5 object, and frankly, I was heartbroken that I couldn't just willy-nilly use functions inside of setup() and draw() but I got used to the "normal" way of calling methods. Growth is hard but I suppose worth it.

And just like that, I had a functioning, but marginally useless, game! You know, the kind that rarely ever sees the light of day.

Riding the Upcycle

I accidentally let this web-app out of the basement to show a seasoned dev, and was met with the type of nudge that moves mountains and minds.

Why not just slap a new face on it to make it look more professional?

Wait... You can just do that? Pick up an old toy and clean it off rather than just shilling out coin for something new to throw away. Well I cloned the project, installed the deps, realized it was all kinds of broken, and ported the components to a new clean instance of Svelte. It all worked and I got to gutting all of the old CSS, burning the old navbar sketch to the ground, and staring up at the sky and waiting for the answer of what to replace it all with.

I started with a full page background - the only sensible thing to do.. - and retrofitted the particle system to spit out color and size modulated question marks instead of interconnected, resource-hogging vector points (I saved those for later, when sweet victory was tasted after three correct answers). Then, keeping with the retro theme, I made everything monospaced, added a boring - yet somehow overly flashy - menu state, and updated my store (and all of the functions that affected state).

I'm sure, as always, this project is incomplete but seriously... sometimes it's better to just "slap a new face it."