Photo by Microsoft Edge / Unsplash

Less Annoying Recipes - Dynamic Recipe Grid

Recipes Sep 9, 2026

Have you ever been frustrated when trying to use an online recipe? Paragraphs of text, walls of ads, page refreshes that make you lose your place, all while your hands are busy attempting to cook? Say goodbye to those days with Less Annoying Recipes, the no-bloat, grid-based, open-source project designed to give me practice with interactive front-ends and give you access to my real recipes. Below, I have also linked the resources you need to make your recipes less annoying too!

Inspiration

While looking for a better way to display my recipes, I came across the following dynamic grid template on Twitter that had been created using Claude:

I loved the look and functionality of this approach, but there were a handful of problems that needed solving if I wanted to make it truly user (and writer) friendly:

  1. Intelligibility - While Claude is decent at writing human-readable code and adding instructive comments, parsing or modifying what each line of code does was difficult, especially for a JavaScript novice like me.
  2. Scalability - In the above example, each detail is hard-coded. More importantly, the styles are hard-coded too, including the table dimensions. My goal was to make sure the only things the user had to define were the details from the recipe itself (ingredients, steps, times, etc.)
  3. Ease of Maintenance - Understandably, the demo above has every page element, style, and line of JavaScript code defined in a single HTML file. My goal was to split each into separate files to make updates across existing recipes much easier.

Comparable Example

Before building a true template, I wanted to see whether I could achieve a similar result for the same recipe after fixing the problems above. The following is my attempt at that:

This page is a work in progress. More updates coming shortly

Tags

Rowan Bixler

Recommended for you