More Usable Recipes |
January 18th, 2024 |
| cooking, tech |
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 C 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 C 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.
Comment via: facebook, lesswrong, mastodon, substack

