Missing Dice
Tags: showdev, javascript, html, css
Published: 2021-02-22 17:32:32

View the project: [missingdice.com](https://missingdice.com/dice-roller/)

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](https://missingdice.com/dice-roller/). 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.