Sprint 05 🏁😰 - JuulVrasdonk/ilojo-bar GitHub Wiki

Maandag begon ik met het vervangen van de statische content in header naar de dynamische content uit het CMS. In eerste instantie wilde ik in api een nieuwe getHeaderContent() functie aanmaken. Waarin ik een nieuwe GraphQL call kon doen om alleen de content uit de header op te vragen. Dit bleek alleen niet helemaal in onze structuur te passen. We geven namelijk de data uit de API door via een context provider. In deze context provider geven we een functie door, in ons geval getAllStories(). Vervolgens kunnen wij de data die deze functie returned gebruiken. Ik heb geprobeerd om twee functies mee te geven in de context provider. Ik heb ook geprobeerd om twee getStaticProps() functies aan te maken in index.js. Dit werkte allemaal niet. En na een uur proberen heb ik besloten om de content van de header ook maar in de getAllStories() functie mee te geven.

Dinsdag was eindelijk de dag waarop ik aan de animaties kon gaan werken. Ik vind animatie en interactie de leukste dingen om te ontwerpen en te maken. Ik wilde me gaan buigen over het animeren van de body text. Als inspiratie wilde ik dit effect namaken.

Ik wilde dat op deze manier doen:

allBodyText.forEach(paragraph => {
     const paragraphString = paragraph.innerHTML;
     const singleWord = paragraphString.split(' ')
     const wrapped = []

     singleWord.forEach(word => {
         const wrappedWord = `<span class="karaoke">${word}</span>`;
         wrapped.push(wrappedWord)
     })
     paragraph.innerHTML = wrapped.join(' ')

     const myObserver = new IntersectionObserver(elements => {
         if (elements[0].intersectionRatio !== 0) {
             console.log("The element is in view!");
             // console.log(elements[0].target);

             const inviewWrapped = document.querySelectorAll(`p > span`);

             let i = 0

             // console.log(inviewWrapped[1]);
             setInterval(() => {
                 inviewWrapped[i++].classList.add('read');
                 // console.log(inviewWrapped[i++]);

             }, 100)


         } else {
             console.log("The element is out of view")
         }
     })


     myObserver.observe(paragraph);
 })

Met deze code werkte het highliten van de woorden alleen niet helemaal op scroll. Op het moment dat een blokje tekst de viewport in kwam, begon een setInterval de woorden te highliten. Ik kwam er hier achter dat het op deze manier alleen maar storend was. En dat deze interactie alleen werkte als de gebruiker zelf de volledige controle had.

Uiteindelijk vonden Daan en ik het ook te veel beweging worden als we naast de animaties van de heading en de images ook nog de body text lieten animeren. We hebben er dus uiteindelijk voor gekozen om de body tekst niet te animeren.

Op Woensdag hebben we ons vooral gefocust op het optimaliseren van de performance. Eerst hadden we onze performance getest in Lighthouse. Die gaf 36 als score voor de performance aan. Lighthouse gaf aan dat het grain effect dat ik over de pagina heb gelegd voor een flinke deuk in onze performance zorgde. Dit effect maakte namelijk gebruik van een GIFje. Toen we dit GIFje weghaalde schoot de performance al naar 50. Nog steeds bij lange na niet het gewenste resultaat. Na wat Googlen kwamen we erachter dat we ons project gewoon moest 'builden' met npm run build. Hiermee vertellen we Next dat we de versie van de website die we nu hebben, naar een geoptimaliseerde 'live' versie wel ombouwen. In deze versie bouwt Next een aantal hele chille optimalisatie's in. Zo zorgt Next automatisch voor de caching en minified alle bestanden. Ook haalt Next, de overige code die in het 'standaard-Next-pakket' zitten en niet worden gebruikt, weg. Na het builden hebben we onze site op Vercel gezet. Bekijk hem hier (op mobiel)..