Roog BBQ

Roog BBQ is waar twee van mijn hobbies samenkomen: web development en barbecue. Deze website is een blog met barbecue recepten, tips en tricks gebouwd in WordPress.

In het kort

Roog BBQ is een lopend project.
De volgende tools worden gebruikt tijdens de ontwikkeling van dit project:

WordPress
PHP
Laravel Mix
SASS
Tailwind CSS
JavaScript

Bezoek Roog BBQ

Back-end

De website is gebouwd op WordPress. Er is gekozen voor het Underscores starter thema die uitgebreid is met veel op maat gemaakte functionaliteit geschreven in PHP.

De Advanced Custom Fields plugin speelt een grote rol in de back-end voor custom post types en custom velden.

Front-end

Laravel Mix is gebruikt om front-end te compileren zoals SASS, JavaScript en thumbnail afbeeldingen.

Recentelijk is de website overgegaan van tradionele CSS naar Tailwind CSS. De heeft een besparing opgeleverd van zo'n 20% in de CSS bundle grootte.

Voor JavaScript functionaliteiten is gewone JavaScript gebruikt.

Recepten

Het recepten gedeelte van Roog BBQ is het meest ontwikkelde gedeelte. Het is gebouwd met een grote focus op UX, toegankelijkheid en SEO.

Ga naar recepten pagina

Belangrijkste kenmerken

Samenvatting: Recepten details bovenaan iedere recepten pagina.
Aanpasbare porties: Een aanpassing in de porties zorgt er voor dat ingrediënten worden herberekend.
Korte en lange omschrijvingen: Verwisselbare lange en korte bereiding omschrijvingen bij de bereidingsstappen.
Toon of verberg afbeeldingen: Toon of verberg afbeeldingen bij bereidingsstappen.
Markeer stappen of ingrediënten: Markeer stappen of ingrediënten als afgerond zodat je een duidelijk overzciht van de voortgang hebt.
Uitklap ingrediënten menu: Zodat je altijd toegang hebt tot de ingrediënten. Zelfs wanneer je verderop in de bereidingsstappen zit.
Gestructureerde data: Gestructureerde data wordt gegenereerd van alle recpten velden. Deze gestructureerde data wordt als JSON op iedere recepten pagina weergegeven.

Tijdlijn

Om alle kooksessies bij te houden heb ik een tijdlijn gemaakt. De tijdlijn wordt vanuit een custom post type gevoed.

Ga naar tijdlijn

Belangrijkste kenmerken

Meerdere datums: Er kunnen meerdere datums worden toegevoegd aan een tijdlijn item. Op deze manier kan een tijdlijn item meerdere keren aan de tijdlijn worden toegevoegd als een recept meerdere malen is gemaakt.
Links: Hyperlinks kunnen worden toegevoegd aan een tijdlijn item om naar een recept te linken.

Scroll naar boven