More Usable Recipes

[jefftk]

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.