Sprint 03 ⛅️ - JuulVrasdonk/ilojo-bar GitHub Wiki

(Tweede Pinksterdag)

Ik begon de Dinsdag met het aanpassen van de volgorde van de componenten. Ik kwam er tijdens het aanpassen achter dat door de aanpassingen een aantal scheurlijnen niet meer klopte (vooral op het begin en het einde). Met wat inzichtelijk denkwerk had ik uitgetekend welke verhalen nu wel of juist geen verhaal moesten hebben.

Dinsdag heb ik ook de images die ik vorige Vrijdag had georganiseerd ingeladen met het <Image /> . Dit is meegeleverd component in het standaardpakket van Next. Dit component zorgt voor een aantal welkome optimalisatie's, waaronder het converten naar een .webp filetype (als het mogelijk is). Omdat onze website het natuurlijk goed moet doen in Nigeria waren dit soort optimalisatie vanuit Next erg welkom. Deze optimalisatie's tackelen al een van grote hordes. Namelijk, het inladen van afbeeldingen.

In Next laad je Images zo in:

<Image
    alt="Ilojo bar top view"
    src={architectTop}
    layout="responsive"
/>

Nadat ik alle images erin had gezet ben ik verder gegaan met het invoegen van de papierscheuren aan het einde van de verhalen. Eerst wilde ik aan het einde van ieder dezelfde papierscheur-svg inladen. En deze doormiddel van een gradiënt vloeiend laten overlopen in de achtergrondkleur van de verhalen.

Op deze manier:

.papergradient {
     background-image: linear-gradient(180deg, #FFFDFA 58.7%, rgba(255, 253, 250, 0) 96.78%);
}

Hierin is .papergradient een div die ik over <Image /> heen leg.

Ik kreeg met deze techniek alleen niet helemaal het resultaat dat we wilden. Ik besloot de scheuren allemaal apart te maken in Figma, zodat de scheuren er natuurlijke uitzagen en beter overliepen.

Op Woensdag had ik een code review met Joost. Hierin vertelde hij dat we beter 1 component konden gebruiken om alle verhalen in de main te laden. Ik snapte niet zo goed wat hij bedoelde. We spraken af om er later samen nog ff naar te kijken. Verder heb ik gewerkt aan wat kleine styling dingetjes. Maar niets noemenswaardigs. Woensdag was geen goede dag voor mij.

Op Vrijdag was ik niet op school. Ik zou hierdoor het tweede gesprek met Femke missen. Maar gelukkig had Femke zich ook vergist in het tijdstip waardoor het gesprek werd verplaatst naar de volgende Maandag.