Worththetime.info

Something I've been working on has been worththetime.info, a live version [of an XKCD comic] that shows how. I think about that comic a lot, but it's a little weird because it's fixed to five years. So I made a version that lets you control the time window. For good measure, it lets you specify the number of people that are impacted. (The more people that you can affect, the more worth it is to spend upfront time making improvements.)

I had the idea for it the same week I was starting to explore 11ty and it struck me as a good case for 11ty. (It ended up being 1 page, so 11ty might even be overkill, lol).

a shell -> HTML rendered from stitched together Nunjucks templates by 11ty. This is where the copy lives.

the JS app - this has a form which controls the state and a table. As the user adjusts. It’s normal react code, but I chose to use [Preact because it’s much smaller than React] and that felt inline with 11ty’s goals.

Preact is great, here's my component for one of the table rows:

  function Row (props) {
    return html`
      <tr>
        <td>${props.label}</td>
        <td><${Cell} timeSaved=${Number(props.count)} frequency=${50} timePeriodInDays
        <td><${Cell} timeSaved=${Number(props.count)} frequency=${5} timePeriodInDays=
        <td><${Cell} timeSaved=${Number(props.count)} frequency=${1} timePeriodInDays=
        <td><${Cell} timeSaved=${Number(props.count)} frequency=${1/7} timePeriodInDay
        <td><${Cell} timeSaved=${Number(props.count)} frequency=${1/30.5}  timePeriodI
        <td><${Cell} timeSaved=${Number(props.count)} frequency=${1/365}  timePeriodIn
      </tr>
    `
  }

That looks a lot like React, plus it supports hooks, so it was pretty easy to switch over. The trickiest part is remembering to tag the markup with the html tag

This project languished for a while because I stuck on the styling. I did a bunch of wierd things to try and make it look good on mobile. But also the mishmash of tailwind inside JS template strings did feel a bit unwieldy. I just kept stalling on it whenver I sat down to work on it. I ended up coming across MVP.css, which had a nice look to it. In the FAQ there was this entry:

Why would I use this? If you just want to launch already.

Yes. that is how I was feeling. I like that this don’t have to think about what class names to give an an element. It works well here because the site is so small that, with one exception, we don’t need classes. It's also pretty easy to customize because the author added list of variables. I ended up doing a bit of adjustments to do things like make the footer take up the full width of the screen, but those felt good & the file was only ~500 bytes.

I think I can even further with making it smaller & load faster. Right now the site is loading Preact and MVP.css from UNPKG (which I did for expediency’s sake), but I think it’d be possible to bundle everything together. It doesn’t have tests & because it doesn't there's some cleanup that I've put off doing. I’d like to make it a progressive webapp because it seems like it’d be fun to do! But overall, I'm happy with it, it was a good opportunity to try out some tools I'd been meaning to. I figure I spent about 20 hours working on it, so assuming I spare a minute of time, as long I use it once a day for the next 3 years it will have been worth it!