Recipes App
TLDR; In progress installable web app of recipes - viewable here.
I've recently been making a PWA. It's a collection of recipes. I was frustrated having to repeatedly look up amounts and methods for things - especially online where most of the food blog recipes are prefaced by pages of life stories and adverts.
I originally started keeping a couple of recipes as markdown files, synced online, but decided to try out formatting them nicely and organising together in an online location. A static site generator seemed like a perfect use case for displaying my collected recipes, and I'd been wanting to use 11ty for a bigger project than I had previously. As a PWA I can install it to my phone for quick (and offline) access. The recipes are available anywhere and can be shared with friends.
After adding a couple of recipes to a starter template, I started thinking more about possible ux improvements and benefits to having recipes as html instead of reading from a page. From this I developed a few features which I think are genuinely useful whilst cooking. For example:
- I remembered my partner saying one time that it would be useful to be able to change the amount of an ingredient and the other amounts needed would update, so this feature is done with a range input that appears when the ingredient is clicked.
- When you are in the process of cooking, reading the method, it is useful to be able to see the required amount of an ingredient without having to scroll up to the ingredients list - so this appears as a tooltip if you press the ingredient’s name.
- For certain recipes, like a long, time-dependent process like making bread, it is useful to have a checklist of where you are up to, along with times to remind you when you last did something. This time defaults to whenever you check the item as done, but you can edit it.
- I’ve implemented a basic recipe search where you can search by ingredients that you have (determined by data in the posts front-matter). This will hopefully be useful when there are more recipes!
Build/techinical notes
I like 11ty. Whilst initially I found it a bit confusing with templates, layouts and collections, it soon made sense and I appreciate the flexibility - your content can be markdown, nunjucks, whatever else, and transformed with javascript filters. The output is lean, fast HTML, configured however you want. For example, following a similar approach to search as Phil Hawksworth, I was able to easily create a JSON endpoint to fetch a generated list of ingredients for the search.
The search uses text input to allow partial matches, but with a datalist to allow easy selection of defined ingredients.
Turbolinks was new to me, but very easy integration speeds up page transitions and improves UX. It just had one issue where caching the homepage broke the JS search state.
It is the first time I’ve used Alpine JS and I’m impressed. It’s like ‘vue-lite’ with almost identical syntax, but lighter and simpler. You create component based functions (if needed) and just add the functionality via HTML attributes. It simplifies a lot of repetitive, basic JS like managing state across a page. Things like updating ingredients based on one range input becomes extremely easy.
This pairs well with nunjucks for templating - especially with nunjucks ‘components’. Like functions to include macros. Wrapping verbose, potentially repetitive markup with a simple include like editableAmount(120, 'ml').
Finally, without wanting to invest a lot of time in iconography, sourcing and including images and svgs, I decided to heavily use emojis 😎. It is easy, adds some ‘fun’ and extra hints about content types. Not applicable for client work which has to look a specific way, this appearance will bend to the device itself.
Conclusion
So far it’s been enjoyable, with lots of new tech and techniques, and hopefully will be genuinely useful over time. Liable to change, mainly it needs more content adding but all in good time!
Back to blog