dothiscookingthing.de – Relaunch of the cooking blog for my wife

[Markus Thomas]

Hi everyone,

a while back, I introduced the food blog I built for my wife here on the forums (original post).

As the site has grown continuously over the years, it was time for a comprehensive relaunch: a fresh responsive look, streamlined editorial workflows, and a modern technical architecture under the hood – 100% bespoke, without any page builder compromises. The new version is now live at dothiscookingthing.de.

Here is a quick look behind the scenes and the tech stack we used:

1. Backend & CMS Architecture

On the backend side, ProcessWire shines as the flexible, tailor-made CMF we all love:

• Custom Page Classes (usePageClasses = true😞

  Instead of packing business logic into template files, we use dedicated Custom Page Classes (e.g. RecipeItemPage, TagPage, etc.). This keeps the codebase modular and maintainable – perfect for generating structured data automatically (Schema.org JSON-LD for recipes, including prep/cook times and nutrition facts).

• Functions API (useFunctionsAPI = true😞

  Keeps the template and component code concise, readable, and clean.

• Custom Content Architecture with Repeater Matrix:

  The homepage and other content pages utilize Repeater Matrix to manage sections flexibly while adhering to a strict, structured layout. Every block (hero banners, dynamic feeds for popular or hidden-gem recipes, ingredient showcases, action teasers, etc.) has its own dedicated PHP render template, meticulously aligned with our typography and design system.

2. Frontend, Interactivity & User Experience

For the frontend, our primary focus was on blazing-fast performance, accessibility, and thoughtful micro-interactions:

• Tailwind CSS v4:

  Built with the new Tailwind v4 CLI, using custom design tokens via @theme (bold typography with Jost for headlines and Inter for ingredients and body copy).

• Reactive Features with Alpine.js:

  • Dynamic Serving Calculator: Visitors can scale ingredient quantities up or down depending on the desired number of servings directly on recipe pages.

  • Bookmark / Favorites Feature: Users can save recipes for later. Clicking the bookmark trigger sets off a subtle animation on the bookmarks icon in the main navigation, giving immediate visual feedback.

  • Custom Dialog & Toast Containers: No native browser alert/confirm dialogues; everything uses unobtrusive, custom UI notifications styled to match the site.

• HTMX for Asynchronous Interactions:

  Used selectively where dynamic updates make sense without loading a heavy JavaScript framework – for instance, driving the live search.

• Locomotive Scroll:

  Provides a smooth, contemporary scrolling experience across the entire site.

• PWA & Offline Support:

  A lightweight service worker handles caching and ensures dependable performance, especially on mobile devices right in the kitchen.

3. Editorial Experience

Making day-to-day content creation seamless for my wife was a top priority:

• Clean, structured separation of ingredients, preparation steps, nutritional values, and metadata in ProcessWire fields.

• Deep cross-linking: Alongside traditional categories and tags, we built an ingredients glossary (Zutaten-Lexikon) that automatically connects related recipes.

• A customized admin theme tailored to keep adding and editing recipes fast, clean, and intuitive.

Conclusion & Feedback

ProcessWire has once again proven how future-proof and adaptable it is: Content structures that evolved over years were seamlessly migrated into modern classes and templates without having to rebuild everything from scratch.

Feel free to check it out: dothiscookingthing.de

We’d love to hear your thoughts, feedback, or any questions about the technical implementation!

[Peter Knight]

schnitzel with creamy mushroom sauce 🤤 

But seriously, very nice work.

I like:
-  how you can approach it from either a recipe or ingredient path
- The portions widget which updates the ingredients is really nice touch
- all the info I need is cleanly laid out

 

[ottogal]

Really outstanding cooking site!

One tiny irritation I found with the Locomotive Scroll: Visiting e.g. the page /zutaten/ananas/ , when you start to scroll down, the aside elements would not scroll with the article first. In case of a long article, the asides don't scroll unless you approach the end of the article.
To a user trying to read the aside content first, it seams not scrollable. 

[Markus Thomas]

@ottogal Thanks a lot for the feedback!

I've just updated the CSS breakpoint for the layout. The right sidebar is now only displayed side-by-side on larger desktop screens; on medium and smaller viewports, it gracefully drops below the main content.

[bernhard]

Very nice site! 🙂 

I have some feedback from browsing around a little bit (just some little details):

• 1 / 2 / 3 Portionen -> very cool! But I clicked on he plus multiple times and it didnt change the Zutaten-List, because after the first click it changes from "Portion" to "Portionen" which moves the plus to the left, so if you click on the same spot it's not any more increasing the number 🙂 
• this sidebar:
  
  -> the €€€€ doesn't mean anything to me. is that expensive or cheap? as far as I understand it is all 4 of 4, means most expensive? so 1/4 would be one violet € and 3 gray ones? I only understood that when I looked above to the dots, so that would be my guess. I think a tooltip would already help to quickly grasp what it means.
• It would probably be nice to have a way to show only easy recipes. The first statement on the frontpage is "Verdammt gutes Essen. Auch, wenn du bisher nur die Mikrowelle beherrschst." --> ok, give me some easy meals! But then I land on recipies and all are "aufwändig" and take 90min, which would take 89min longer than the microwave 😄😉 So I think if you target that audience it might make sense to make it easier to find easy/quick recipes or else maybe I misunderstood your focus?
• I clicked through the slider elements and for a short time they were black during transition/loading of the next image.
• I know it's hard and always a compromise, but text is a bit hard to read here:
  
  Maybe adding text-shadow?
  
  Not really great either...
• I really like the color schema of the website, but I'm a bit confused about these two elements:
  
  Any reason why they are blueish? For me this looks a little like some leftovers from a theme that used blue as base color before changing everything to violet. Also the sharp corners are strange as everything else is rounded, but that was probably because of the left border, which would look ugly with radius?
  Ok I see now that some other hover-effects and elements are also blueish. I think I'd prefer if they were violet as the logo is also black/violet. Not a big deal of course 🙂  

congrats again!

[Markus Thomas]

@bernhard Thanks a lot for taking the time to test the site so thoroughly and sharing this helpful feedback!

Regarding the portion counter, the shifting plus button has already been addressed so that the click area stays completely stable now.

The price scale is a classic case of developer blindness because it felt self-explanatory when building it. Adding a clear tooltip here is a great suggestion that will be implemented soon.

You make a very good point about the headline and matching recipes. We are already preparing an additional MoodFood category that specifically covers quick and simple everyday dishes.

I will take a closer look at the brief black flash during the slider transition, which i think is likely related to image lazy loading.

Legibility on that heroimage has also been improved by darkening the underlying overlay so that the white text stands out better.

The bluish tones and rectangular edges on those elements are entirely intentional, as they are meant to act as distinct contrasting accents across the design.

Thanks again for the sharp eyes and the kind words!