More Usable Recipes

Link post

Instead of a recipe book I keep a web page. Whenever I make something and think I’ll make it again, I add it. It’s public since I generally make things public by default, though it’s terse since it’s intended as a reference for someone (me!) who already knows what to make. Recipes looked something like:

I’ve now updated them so I can check things off as I go:

Since I author in HTML, I didn’t want to turn my tidy source from:

<li>2 eggs (or 2T flax and 5T water)
<li>2/3 oil
<li>1C greek yoghurt
<li>1/4 cup milk, more if needed

Into something ugly like:

<li><label><input type=checkbox></input>
    2 eggs (or 2T flax and 5T water)</label>
<li><label><input type=checkbox></input>
    2/3 oil</label>
<li><label><input type=checkbox></input>
    1C greek yoghurt</label>
<li><label><input type=checkbox></input>
    1/4 cup milk, more if needed</label>

Instead, I’ve added a little JS to each page that does this at display time:

for (const li of
     document.getElementsByTagName(“li”)) {
  li.innerHTML =
     “<label><input type=checkbox></input>” +
     li.innerText + “</label>”;
  }
}

I’ve also added a bit of CSS for extra vertical space for the checkbox but only on devices like phones where big sloppy fingers need it:

<style>
@media (pointer:coarse) {
  input {
    margin-top: 1em;
    margin-bottom: 1em;
  }
}
</style>

I haven’t actually cooked anything since changing this, but I think I’ll like it.