Missing Dice

View the project: missingdice.com

The last few months I've struggled greatly with my depression. In my depressed state I find work very difficult. I cannot concentrate, my creativity disappears, and — most importantly — the whole idea of work feels pointless.

So, while recovering from this episode, I chose to start a new project — somthing simple with low stakes.

I decided on making a website with tools for board game players — like online dice and countdown timers.

So, say someone wants to play backgammon, but they're missing dice, they'd go to this website and use virtual dice instead. Hardly an original idea, but I thought I could make it with some novel features.

I decided to start with a simple dice rolling tool, but it had to be better than the competition.

The competition

Rather than list all the competition and why they're good or bad. I'll just write some issues they share, and things I wanted to do better.

Look and Feel

The tools that come up when you google "roll dice" are mostly pretty ugly. So I could make something prettier.

Accessibility

This is a given. Unsurprisingly many of the other websites are not broadly accessible.

Page Speed / File Size

The first results that come up were made in the 90s and so have a pretty small file size. Between ~30kb and ~100kb.

So I chose the lower end as my budget. My tool needed to be less that 30kb. I'd also reduce the number of http requests, and some other speed optimizations. It had to be lighting fast.

No Javascript

Some of the results work without javascript. Not many people use the web without javascript, but for the few that do these websites have the edge.

In order to give the best experience to as many people as possible my site would need a fallback for people with javascript disabled.

Mobile

Amazingly some of these websites are not responsive on mobile. So mine would be.

Dark Mode

None of the competition websites support dark mode. So my site would be responsive to color scheme preferences. (as well as having some other interesting themes).

Trackers and Privacy

Like most of the web, the competition sites have tracking, and ads, and all that junk. I'd simply not do that. I've set up some basic server-side analytics and that's it.

The site

To see the result check out missingdice.com. It's still a work in progress.

Over the next few weeks I'll be writing more about things I learned making it. Including some novel features it has and how they work.

Including...

• a css and html only color scheme toggle button.
• a no javascript fallback built with netlify functions.
• svg background patterns with color inheritance.
• how to stop unwanted double-click zoom on iOs devices.
• how the button with the stripey shadow works.
• how to make a nice number input with a noscript fallback.
• a bunch of small data saving things I did to stay under the 30kb budget.

Let me know what you think of the project, what can be improved, and what tools you'd like to see on the site. Thanks for reading.