[{"data":1,"prerenderedAt":296},["ShallowReactive",2],{"all-posts":3},[4,87,155,219],{"id":5,"title":6,"body":7,"date":77,"description":78,"extension":79,"meta":80,"navigation":81,"path":82,"seo":83,"slug":84,"stem":85,"__hash__":86},"content/drankidee-optimaliseren.md","Hoe afbeeldingen op Drankidee.nl zijn geoptimaliseerd",{"type":8,"value":9,"toc":73},"minimal",[10,14,29,42,51,59,70],[11,12,6],"h1",{"id":13},"hoe-afbeeldingen-op-drankideenl-zijn-geoptimaliseerd",[15,16,17],"p",{},[18,19,20,21,28],"strong",{},"Een van mijn grootste en meest bezochte websites, ",[22,23,27],"a",{"href":24,"rel":25},"https://drankidee.nl",[26],"nofollow","Drankidee"," heeft de potentie om veel data de wereld in te slingeren. Elk cocktailrecept heeft een of meerdere afbeeldingen, dus er worden veel afbeeldingen getoond op de website. Hoe zorg je er voor dat dataverkeer wordt beperkt, terwijl de beleving hoog wordt gehouden?",[15,30,31,32,35,36,41],{},"Afbeeldingen zijn belangrijk op receptenwebsites, zo ook op ",[22,33,27],{"href":24,"rel":34},[26]," en ",[22,37,40],{"href":38,"rel":39},"https://studentenrecepten.com",[26],"StudentenRecepten.com",". Omdat Drankidee op Laravel is gebouwd, is het mogelijk gebruik te maken van open-source packages die problemen makkelijk oplossen. Want waarom het wiel opnieuw uitvinden? Omdat de server VPS waar de website op draait maar zo veel capaciteit heeft, is er redelijk snel voor gekozen afbeeldingen op een andere manier op te slaan. Gelukkig is dit makkelijk te doen met Laravel, en omdat Google Cloud goed geprijsd is bij weinig data, is er voor gekozen om afbeeldingen van de cocktails op te slaan op Google Cloud Storage (GCS).",[15,43,44,45,50],{},"Zelf een storage-framework bouwen is natuurlijk erg veel gedoe. Daarom is er voor gekozen om gebruik te maken van ",[22,46,49],{"href":47,"rel":48},"https://spatie.be/docs/laravel-medialibrary/v11/introduction",[26],"Laravel Media Library",", een package van het Belgische bureau Spatie dat afbeeldingen kan koppelen aan items in je database, en daar meteen manipulaties op kan uitvoeren, super handig! Een afbeelding van een cocktail is namelijk al snel een paar MB groot, en als op elke pagina 15+ afbeeldingen te zien zijn, loopt je datagebruik dus snel op.",[15,52,53,54,58],{},"Om dit te voorkomen is gebruik gemaakt van de mogelijk om afbeeldingen te \"conversen\", ofwel aan te passen. Zodra een afbeelding is geüpload, wordt er een job naar een queue gestuurd, die er voor zorgt dat de administratoren niet hoeven te wachten tot alle conversions plaats hebben gevonden. Hierdoor is het beheren van de website razendsnel, terwijl de afbeeldingen wél geoptimaliseerd worden. Helemaal handig is de functie ",[55,56,57],"code",{},"getAvailableUrl()",", die er voor zorgt dat bij afbeeldingen die nog niet geconverteerd zijn, het origineel wordt getoond. Zo is er altijd een afbeelding beschikbaar.",[15,60,61,62,65,66,69],{},"Afbeeldingen worden omgezet naar verschillende formaten. Een ",[55,63,64],{},"header","-formaat, die extra breed is, om boven aan een receptenpagina te laten zien, en een ",[55,67,68],{},"thumbnail","-formaat, dat getoond wordt als er een kleine afbeelding voldoende is. Deze conversies worden in kwaliteit en formaat omlaag gehaald, om er voor te zorgen dat er zo min mogelijk MB's worden verstuurd, zonder de kwaliteit merkbaar te verlagen. Door afbeeldingen vervolgens via Cloudflare naar eindgebruikers te sturen, worden ze ook lokaal gecached, om het internetverkeer nog meer te drukken.",[15,71,72],{},"Op deze manier is er geprobeerd het internetverkeer van Drankidee.nl te beperken tot een minimum. Originele afbeeldingen worden alleen nog intern gebruikt (en zelfs daar eigenlijk niet). Alleen verkleinde en gecropte afbeeldingen zijn op de front-end nog te zien, en dat is te merken in de prestaties van de server. De server zendt nu minder verkeer uit, en is dus sneller en kan meer dingen tegelijk doen.",{"title":74,"searchDepth":75,"depth":75,"links":76},"",2,[],"2025-05-10","Een van mijn grootste en meest bezochte websites, Drankidee heeft de potentie om veel data de wereld in te slingeren. Elk cocktailrecept heeft een of meerdere afbeeldingen, dus er worden veel afbeeldingen getoond op de website. Hoe zorg je er voor dat dataverkeer wordt beperkt, terwijl de beleving hoog wordt gehouden?","md",{},true,"/drankidee-optimaliseren",{"title":6,"description":78},"hoe-afbeeldingen-bij-cocktailrecepten-op-drankidee-zijn-geoptimaliseerd","drankidee-optimaliseren","SbfK8tthk99A2rmGow6qjRD6EKsGAO4dBh98U21HjTI",{"id":88,"title":89,"body":90,"date":149,"description":99,"extension":79,"meta":150,"navigation":81,"path":151,"seo":152,"slug":153,"stem":94,"__hash__":154},"content/een-eigen-receptenwebsite.md","Een Eigen Receptenwebsite",{"type":8,"value":91,"toc":147},[92,95,100,126,135,138],[11,93,89],{"id":94},"een-eigen-receptenwebsite",[15,96,97],{},[18,98,99],{},"Receptenwebsites zijn vaak verschrikkelijk om te gebruiken. Lange verhalen, veel, heel veel reclames en oneindig lang scrollen om bij het recept te komen. Of ingrediënten niet kunnen afstrepen of niet kunnen toevoegen aan jouw favoriete boodschappen-app. Dat moet anders kunnen! Daarom heb ik StudentenRecepten.com ontwikkeld, een site vol met goedkope, lekkere en makkelijke recepten zonder al te veel reclames en onderbrekingen.",[15,101,102,103,107,108,113,114,119,120,125],{},"Op ",[22,104,106],{"href":38,"rel":105},[26],"studentenrecepten.com"," vindt je alleen recepten die ik, of iemand anders in mijn studentenhuis, hebben gekookt. Zo weten we zeker dat het recept lekker is en goed gaat vallen bij andere studenten. De site is gebaseerd op de klassieke receptensites, zoals ",[22,109,112],{"href":110,"rel":111},"https://ah.nl/allerhande",[26],"de allerhande",", ",[22,115,118],{"href":116,"rel":117},"https://jumbo.com/recepten",[26],"Jumbo",", maar ook minder bekende sites als ",[22,121,124],{"href":122,"rel":123},"https://gewoonwateenstudentjesavondseet.nl",[26],"GewoonWatEenStudentjeSavondsEet",".",[15,127,128,129,134],{},"De website is gemaakt met Nuxt 3, en draait op de achtergrond op ",[22,130,133],{"href":131,"rel":132},"http://directus.io",[26],"Directus",", een headless CMS dat je in staat stelt om snel iets op te zetten, zonder je eigen back-end te schrijven. Afbeeldingen en andere bestanden worden hier ook in opgeslagen, zodat alles op een plek staat. Hosting gaat door Cloudflare, om caching- én veiligheidsredenen.",[15,136,137],{},"Wat je misschien meteen opvalt, zijn de afbeeldingen op de website. Het maken van kwalitatief goede foto's blijkt bijzonder lastig, daarom is er al redelijk snel gekozen om afbeeldingen te laten genereren door OpenAI. Dit gaat volautomatisch, als er een recept aan Directus wordt toegevoegd wordt er meteen een afbeelding gegenereerd op basis van de omschrijving van het recept. Mochten we er ooit de tijd en resources voor hebben, is het makkelijk onze eigen foto's te uploaden, er worden dan geen foto's gegenereerd. Recepten worden echter nooit gegenereerd door AI, aangezien dat gewoon niet betrouwbaar is. Je kan er van uit gaan dat elk recept is geschreven én getest door een échte student, van vlees en bloed.",[15,139,140,141,146],{},"We hopen dat steeds meer studenten de website weten te vinden, omdat we ervan overtuigd zijn dat het een groot gat vult in de markt. Dus zoek je nog een recept? Kijk dan eens op de ",[22,142,145],{"href":143,"rel":144},"https://studentenrecepten.com/recepten",[26],"recepten-pagina van StudentenRecepten.com",". En deel de site vooral met je mede-studenten (of niet-studenten die gewoon op zoek zijn naar goede, goedkope recepten).",{"title":74,"searchDepth":75,"depth":75,"links":148},[],"2025-03-08",{},"/een-eigen-receptenwebsite",{"title":89,"description":99},"mijn-eigen-receptenwebsite-voor-studenten","2Rt91LTP8ho_7uqU9DoRnC1EEKKNPgZPOk3R0jpZ2UM",{"id":156,"title":157,"body":158,"date":211,"description":212,"extension":79,"meta":213,"navigation":81,"path":214,"seo":215,"slug":216,"stem":217,"__hash__":218},"content/first-post-welcome.md","Mijn eerste échte eigen portfolio-website",{"type":8,"value":159,"toc":209},[160,163,168,187,200],[11,161,157],{"id":162},"mijn-eerste-échte-eigen-portfolio-website",[15,164,165],{},[18,166,167],{},"Een paar jaar geleden heb ik mijn eerste eigen portfolio-website gemaakt, puur om iets te hebben. Er was echter veel\nmee mis, hij was niet mobile-friendly, hij schaalde niet goed en het was lastig de site te updaten. Daar moest iets aan\nveranderen!",[15,169,170,171,176,177,182,183,186],{},"Ik heet je dan ook van harte welkom op mijn vernieuwde portfolio-website. Hij is nu makkelijker te updaten, ik kan nu\nartikelen schrijven (met ",[22,172,175],{"href":173,"rel":174},"https://content.nuxt.com/",[26],"Nuxt Content","\nen ",[22,178,181],{"href":179,"rel":180},"https://github.com/tailwindlabs/tailwindcss-typography",[26],"Tailwind Typography",", hij is eindelijk mobile-friendly en er\nzijn wat recente projecten aan toegevoegd (zoals ",[22,184,40],{"href":38,"rel":185},[26],"). Ook zijn de\npackages eindelijk geupdate, want dat was ook wel weer eens nodig. De site draait nog steeds op Cloudflare Pages, en\nwordt bij elke update gerenderd en statisch gehost.",[15,188,189,190,193,194,199],{},"Hoewel de website vooral bedoeld is om mensen te linken naar de verschillende projecten die ik heb, zal ik ook af en toe\nposten over projecten die ik heb. Op deze website ga je zo nu en dan ook een artikel vinden over een update\nvan ",[22,191,27],{"href":24,"rel":192},[26],", hoe ik een nieuw pretpark heb toegevoegd\naan ",[22,195,198],{"href":196,"rel":197},"https://themeparkplanner.com",[26],"ThemeparkPlanner"," of een ander artikel waarvan ik denk dat het interessant kan zijn.",[15,201,202,203,208],{},"Dus kom af en toe terug, en klik op de ",[22,204,207],{"href":205,"rel":206},"https://arendz.nl",[26],"homepagina"," vooral eens door naar de verschillende projecten\ndie ik heb draaien op dat moment.",{"title":74,"searchDepth":75,"depth":75,"links":210},[],"2025-02-02","Een paar jaar geleden heb ik mijn eerste eigen portfolio-website gemaakt, puur om iets te hebben. Er was echter veel\\nmee mis, hij was niet mobile-friendly, hij schaalde niet goed en het was lastig de site te updaten. Daar moest iets aan\\nveranderen!",{},"/first-post-welcome",{"title":157,"description":167},"welkom-bij-mijn-nieuwe-eigen-website","first-post-welcome","Ige_GZJKqefWTpwHT6Bwi49vXeJJmEQoezJ4S-rDx4M",{"id":220,"title":221,"body":222,"date":287,"description":288,"extension":79,"meta":289,"navigation":81,"path":290,"seo":291,"slug":293,"stem":294,"__hash__":295},"content/themeparkplanner-introductie.md","Hoe werkt ThemeparkPlanner.com achter de schermen?",{"type":8,"value":223,"toc":282},[224,227,237,242,245,248,256,259,263,266,269,272,276],[11,225,221],{"id":226},"hoe-werkt-themeparkplannercom-achter-de-schermen",[15,228,229],{},[18,230,231,232,236],{},"Als pretparkliefhebber met soms vrije tijd is het verleidelijk allemaal analyses te doen op wachttijden van attracties\nin pretparken en waterparken. Maar het verkrijgen van deze data is moeilijker dan gedacht, hier\nis ",[22,233,235],{"href":196,"rel":234},[26],"ThemeparkPlanner.com"," uit ontstaan.",[238,239,241],"h2",{"id":240},"wachttijden-attracties-shows-en-meer","Wachttijden, attracties, shows en meer",[15,243,244],{},"De meeste pretparken hebben tegenwoordig een eigen app met wachttijden, attracties, restaurants en showtijden. Maar om\nvoor elk park een eigen app te downloaden, met een andere format en interface, is erg veel gedoe. Daarom is er nu\nThemeparkPlanner.com, een site waarop van de grootste pretparken wereldwijd alle informatie omtrent attracties,\nwachttijden, showtijden en méér te vinden is.",[15,246,247],{},"Om te beginnen, er is een front-end en een back-end. De back-end communiceert met de API's van de verschillende parken,\nde front-end communiceert alleen maar met bronnen die zelf worden beheerd. Zo is het zeker dat de front-end geen rare\ndingen tegenkomt, omdat de back-end dit al afvangt.",[15,249,250,251,125],{},"Alle openbare API's worden opgevraagd via een eigen back-end. Deze back-end standaardiseert de output, zodat de data\nmakkelijk gebruikt kan worden in verschillende front-ends. De data is op te halen via een openbare API, waarvan de\ndocumentatie te vinden is op ",[22,252,255],{"href":253,"rel":254},"https://tp.arendz.nl/api",[26],"tp.arendz.nl",[15,257,258],{},"Om de website nóg nuttiger te maken, worden historische wachttijden opgeslagen voor enkele pretparken. Op deze manier is\nhet mogelijk te onderzoeken op welk moment van de dag je bepaalde attracties moet bezoeken, en op welke momenten het\nhandig is bepaalde attracties over te slaan. Met behulp van deze data wordt momenteel ook gewerkt aan de planner,\nwaarover je hieronder meer leest.",[238,260,262],{"id":261},"pretpark-planner-voor-een-dagje-uit","Pretpark Planner voor een dagje uit",[15,264,265],{},"De planner is de volgende stap van ThemeparkPlanner (what's in a name). Met de planner is het mogelijk door te geven\nwelke attracties en shows je wilt bezoeken. Op basis van historische data beveelt de website vervolgens aan in welke\nvolgorde je de lijst het beste kan afhandelen, en zie je in één oogopslag welke points of interest je als volgende moet\nbezoeken.",[15,267,268],{},"Omdat de website toegang heeft tot je huidige locatie, is het ook mogelijk om attracties, restaurants en shows in de\nbuurt aan gebruikers aan te raden. Zo is het advies voor iedereen hoogst persoonlijk, en krijgt iedereen alleen\naanbevelingen te zien die relevant zijn voor hen.",[15,270,271],{},"Volgende stappen voor de planner zijn het nog beter analyseren van historische data, om nóg betere aanbevelingen te\nkunnen doen, en andere factoren (zoals weer, feestdagen en vakanties) ook mee te nemen in de berekening. Ook is er het\nidee om analyses van wachttijden zichtbaar te maken, zodat websitebezoekers te zien krijgen waarom bepaalde attracties\nwél of niet worden gekozen.",[238,273,275],{"id":274},"conclusie","Conclusie",[15,277,278,279,125],{},"Zoals je kan lezen gebeurt er genoeg achter de schermen van ThemeparkPlanner. Van de Nuxt.js front-end tot de NestJS\nback-end die wachttijden en informatie ophaalt, en de analyses die worden gedaan op de wachttijden, er gaat een hoop\nschuil achter de schermen van ",[22,280,235],{"href":196,"rel":281},[26],{"title":74,"searchDepth":75,"depth":75,"links":283},[284,285,286],{"id":240,"depth":75,"text":241},{"id":261,"depth":75,"text":262},{"id":274,"depth":75,"text":275},"2024-12-03","Als pretparkliefhebber met soms vrije tijd is het verleidelijk allemaal analyses te doen op wachttijden van attracties\\nin pretparken en waterparken. Maar het verkrijgen van deze data is moeilijker dan gedacht, hier\\nis ThemeparkPlanner.com uit ontstaan.",{},"/themeparkplanner-introductie",{"title":221,"description":292},"Als pretparkliefhebber met soms vrije tijd is het verleidelijk allemaal analyses te doen op wachttijden van attracties\nin pretparken en waterparken. Maar het verkrijgen van deze data is moeilijker dan gedacht, hier\nis ThemeparkPlanner.com uit ontstaan.","hoe-werkt-themeparkplanner-com-precies","themeparkplanner-introductie","0M-ocorNLaKPDHhF1GWuRoOwlfpUqy0l7hdbeNmHqKo",1774284150727]