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