Behind is.slippi.ranked.today, a lil countdown site

TLDR a

I made a thing: is.slippi.ranked.today. Slippi is a connection service for the game Super Smash Bros Melee. This website displays how long you have to wait until Slippi's ranked mode is free.

I'm quite pleased with the results and what I accomplished in an evening.

FRESH a

I shared the site five days after the new mode was released, so the idea was still fresh in people's minds. It's thrilling to strike while the iron is hot. There's no stronger motivation to ship than "I need to finish and share this ASAP before the topic becomes irrelevant, or before someone else releases their version first 1."

My other projects have a stale vibe: tinkering at my own pace, no deadlines, no onlookers. So this was a nice change of pace.

I'm reminded of two examples about shipping quickly:

All the covid-counting websites during the pandemic. Imagine spending weeks or months obsessing over the implementation while losing precious time and data. Or imagine waiting years, only to find covid isn't cool anymore and covid-counting sites are no longer needed. I'm sure the most useful sites were released early in the pandemic just because they existed first.
There was a HackerNews thread of personal blogs. Someone quickly hacked together a blogroll based on that thread and released it two days later (dm.hn). The following comment was so relatable:
Looks great and congrats on shipping. If it were up to me I'd still be deliberating the best framework and design to use for this, and how I can pipe the comments through chatgpt to extract the category, keywords and do things that make it the best blogroll ever.

And then I would have just thought it's too much work for nothing and that'd be the end of it :P

So it's important to develop this skill of shipping quickly, and to fight scope creep and analysis paralysis. Hopefully I can finish more projects and posts with this mindset. Maybe I need deadlines.

Or maybe I just need to share my work. This was the first time I posted something to reddit. And surprise! is.slippi.ranked.today stayed at the top of the subreddit for a day. That was a nice feeling.

I usually wouldn't write about shipping. Finishing software is a worn-out trope. Social media feels icky. Self-promotion feels icky. But if someone releases code in the forest and no one is around to hear it, does it make a sound?

I'm fine if nobody sees my projects since they make me happy and solve my own problems. I'm just happier when other people appreciate my work too.

Anyways, onto some implementation details:

SIDE-QUESTS a

I have a bucket list of web novelties and todos I'd like to accomplish one day. This project accomplished most of them!

The whole site is just an index.html under 14kB in size. No other files or assets. This is optimal because the site fits in a single TCP packet; or in other words, just one round trip between the server and the user; aka, it's speedy. Here's the article where I learned about the 14kB threshold.
Fun URL. I've been enamored with what.happens.when.computer for years just because the URL is so cool. Hopefully is.slippi.ranked.today evokes the same feeling.
Also regarding inspiration: I love sites that answer yes/no questions, like doihavejavascriptenabled.com or the legendary arepublixchickentendersubsonsale.com. The premise is so straightforward; it's too dumb to fail. EDIT - I just learned these are called single-serving sites.
I finally got around to using <noscript>, @media (prefers-color-scheme: dark), and <meta tag="description">. Just a few no-brainer elements that I've neglected in other experiments.
Inline emoji favicons. Most websites serve image files for the browser tab icon. But you can inline the favicon inside HTML, like this blank one: <link rel="icon" href="data:,">

And you can set the favicon with JavaScript:
```
document.querySelector("link[rel~='icon']").href = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='1em' font-size='80'>✔️</text></svg>"
```
SVG icons are a recent invention, and they don't work on Safari yet. But they're still cool for hobby projects. Shoutouts to emojicon.dev.
I'm on a quest to master web layouts. is.slippi.ranked.today has two simple but effective layouts: a 100svh cover page of centered content, and a list of FAQs.

Other 100svh cover pages lack affordances to indicate that there's extra content when you scroll (example). I like my solution: an inviting anchor link that bridges the two sections with position:absolute; margin-block-end:1em.
I'm also on a quest to improve my copywriting. Normally, my writing feels awkward and infintely editable, but this was the first time my writing felt natural and finished. Granted, it was only a handful of sentences...
Localization always nags me. As a bare minimum, I wrote units of measurement from an international perspective (eg. "$5 USD" instead of "$5", and "8AM UTC" instead of "4AM EST"). In the future, I'd like to learn how to grab a user's locale so I can format dates properly.

TOOLS a

I didn't learn any new tools. That's unusual for me - I'm usually a generalist that dives into a new project and learns whatever tools are necessary. Or I'll explore some promising new tool to expand my toolbox. That's slow, though.

Using familiar tools helped me stay in flow state. There were no surprises on this project. I was comfortable. Again, an obvious cliche - know your tools - but still a new experience for me (ironically about the importance of repeated experience).

This is my comfort zone for creating a simple static site: Host it on Netlify, auto-deploying with each git push. Purchase the domain with Porkbun. Write vanilla HTML, CSS, and JS. And use utopia.fyi for spacing and sizing.

I also use a custom livereload script that auto-refreshes the page as I edit. A tight feedback loop is really important. I'll share the script after I iron out some wrinkles.

Hopefully this momentum translates to my next projects! I'm still working on notebook love, fmin, and a handful of written posts. Who knows what I'll finish next. Stay tuned with RSS.

FOOTNOTES a

1 This countdown timer is not very useful or new. In fact, there's already a countdown timer included in the Slippi desktop client. is.slippi.ranked.today only offers two unique benefits - it's viewable from mobile, and it has a list of upcoming free days. I just make the site sound important because I'm proud of it.