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.

published

22 Feb 2021

modified

22 Feb 2021

author

Nathaniel

tags

posts project missing dice