Logs - DaanKetelaars/ilojo-bar Wiki

Lees de logs van Juul hier:

Logs van Daan:

Week 1

Deze week zijn Juul en ik begonnen aan ons gezamenlijke project voor de meesterproef. Samen zijn wij ingedeeld voor het project Ilojo Bar. Hier is het idee om een digitaal monument te gaan maken. Maandag hebben we contact gehad met Femke van Zeijl, zij is journaliste en al sinds 2012 actief in Lagos, Nigeria. Femke is samen met de stichting Legacy aan de gang gegaan om meer aandacht te schenken aan de Ilojo Bar. Deze bar heeft ontzettend veel verhalen en word ook gezien als een stukje geschiedenis van Lagos, maar ook van Nigeria. Aan ons de taak dus, om dit digitaal op te pakken. Wij hebben dinsdag via zoom met de andere teams gesproken met Femke. Hier werden wij gebriefd door haar en hebben wij ook een beter beeld gekregen over het project. De dag erna hebben wij een debriefing geschreven op basis van deze briefing. Op deze manier kunnen we voor ons zelf even op een rijtje zetten hoe wij het project zien. Femke had hier en daar nog wel wat kleine aan en opmerkingen, maar in grote lijnen was het voor iedereen duidelijk.

Nu is het aan ons om een concept te gaan bedenken en zoveel mogelijk klaar te krijgen voor volgende week vrijdag wanneer wij Femke weer spreken! Woensdag hebben wij ook een handige workshop gehad van Joost over het gebruik van een Headless CMS. Voor ons project is dit heel handig omdat de opdrachtgever graag wil dat er verhalen toegevoegd kunnen worden. Hier zou een CMS erg mee helpen om dit gemakkelijk te kunnen verwerken. Naast de meesterproef was er ook tijd om langs te gaan bij DEPT voor de weekly mingle. Het was tof om een keer binnen te stappen bij DEPT en te zien hoe zo'n enorme agency te werk gaat. Jammer dat we niet gebruikt mochten maken van de bar voor een klein biertje, maar voor de rest was deze weekly mingle zeker geslaagd!

Week 2

Na de eerste week zijn Juul en ik begonnen met conceptualiseren. Door het gesprek met onze opdrachtgever hebben wij nu een beter beeld gekregen. Hiermee kunnen wij een concept gaan bedenken en zo een ontwerp neerzetten. Om daarna door te gaan naar de bouw. Juul en ik hadden wel beide voor ogen om iets te gaan doen in storytelling. We zijn eerst wat voorbeelden gaan zoeken, we hadden wel een vaag idee in ons hoofd. Op de website Awwwards kwamen we wat voorbeelden tegen die wel leken op ons idee.

Voor ons concept wilden wij echt de verhalen die Femke geschreven heeft hun eigen karakter mee geven. Ook wilde wij wel iets grafisch doen en een visuele website gaan bouwen. Naast dit hadden wij ook nog in ons hoofd om iets met 3D te gaan doen. Bijna de hele groep wel. Uiteindelijk zijn Juul en ik gegaan voor een zelfde soort idee als de “Elukash” website. Alsof je in een soort fotoboek zit, je scrollt er door heen. Langzaam komen er foto’s in beeld schuiven, misschien meer een tafel. Deze stijl zou ook passen bij toch het historische onderwerp. Voordat we echt een concept konden gaan schetsen of ontwerpen was het wachten op het beeld van Femke. Zij zou namelijk wat meer sturen, voornamelijk 3D tekeningen van de Ilojo Bar. Zoals ik al aangaf was er veel aanspraak om iets met 3D te doen. Zo zou je toch echt het gebouw tot leven kunnen brengen. We moeten kijken wat we met die tekeningen kunnen doen, misschien iemand die daar iets van kan bouwen. Een rustige week wel, veel ideeën, weinig actie. Vanaf volgende week kunnen we echt goed aan de slag. Aan het einde van de week zijn we natuurlijk naar onze weekly mingle geweest, dit was bij de Voorhoede. Hier hebben wij een kleine workshop gehad in design systems en hoe deze ook tegenwoordig gebruikt worden in de Front-end wereld. Via die manier kun je namelijk veel gemakkelijker en effectiever werken. Helemaal als team.

Hieronder nog wat screenshots van ons concept:

Week 3

2 weken zijn wij al onderweg. Deze week kunnen wij echt gaan vlammen. We hebben alles binnen van Femke en kunnen nu ons idee/concept gaan uitwerken in een ontwerp. Dit willen we wel redelijk snel gedaan hebben. Want wij hebben gekozen voor Next.JS als framework. Juul en ik zullen tijdens onze afstudeerstages hier gebruik van maken, daarom willen wij nu al een duik in het diepen nemen tijdens de meesterproef. Ook bied Next veel opties die ons in een later stadium veel werk zal schelen. Denk dan vooral aan het optimaliseren van verschillende zaken. Ook is veelal al voor je gedaan, zo hoef je geen routing op te zetten. Het is al server-side, geen bestand wat je moet aanmaken zoals bij express om al je server-side functies in te regelen. En uiteindelijk is het ook super tof haha, denken wij.

Toch was er wel nog 1 dingetje hierover. Vorige week hebben wij ons eerste design en code review gehad. Hier waren de meningen wat verdeeld over het gebruik van Next.JS. De website is uiteindelijk voor gebruikers in Nigeria, die minder internet hebben, mindere telefoons en ook mindere browsers. Dit is niet ideaal. Daarom gaven sommige docenten ons het advies om eerder alles in basis HTML/CSS/JS te doen. Via die manier een website neer te zetten die qua progressive enhancement en performance heel sterk staat. Heel tof om te doen, maar Juul en ik wilden toch heel graag verder met Next.JS. Uiteindelijk hebben wij nog een paar andere docenten gesproken, die raden ons weer aan om met Next verder te gaan. Heel lastig dit, maar Juul en ik hebben voet bij stuk gezet en ons eigen plan getrokken. Wel iedereens advies meegenomen, maar uiteindelijk naar ons zelf geluisterd en vooral naar onze wensen. En die van de opdrachtgever/gebruiker. Hieruit kwam dat Next dé beste keuze was. Goed, genoeg over Next.

Wij hebben het design afgerond, dit ook deze week getoond aan onze opdrachtgever. Daarnaast hebben wij ook breakdown schetsen gemaakt. Omdat we met nieuwe technieken werken wilde wij het zo makkelijk mogelijk maken om ons design over te zetten. Via deze manier kunnen wij zo heel gemakkelijk alles erin zetten. Ook moeten wij gaan nadenken over het koppelen van Prismic en Next.JS. Nog even terugkomen op het gesprek met Femke. Zij was erg tevreden en vond de stijl super leuk. Toch gaf zij aan om te kijken naar de indeling van de verhalen. Die eindigt nu namelijk wat minder leuk voor een bepaalde familie waarvan een familielid aansprakelijk is voor de sloop. Zij gaf ons hier de vrijheid in, maar wilden dit toch even meegeven. Uiteindelijk hebben Juul en ik alles vanuit onze breakdown schets in Next gezet. Vorige week hadden wij al de basis voor Next opgezet. Nu is het plan dat Juul zich bezig gaat houden met het visuele omzetten van ons design naar Next. Ik pak de taak op om ons CMS te koppelen met Next. Zoals gewoonlijk zijn we weer naar de weekly mingle geweest. Deze keer Build in Amsterdam. De stageplek van Juul, heel tof bedrijf. Ik volg ze al een hele tijd. Ben altijd wel onder de indruk geweest van hun werk. Met de weekly nerd van Fenna kreeg ik al een kleine indruk van wat ze allemaal doen daar. Als ik niet al een stage plek had, had ik graag daar gesolliciteerd. Folkert-Jan van Build in heeft ons nog getrakteerd op een kleine workshop scroll animaties. Geheel vanilla. Wel tof om te zien dat je toch wat wiskunde en reken werk gebruikt. Wat ik wel meeneem, is hoe hij zijn animaties eerst uitschets. Zo krijg je een beter beeld wat er precies moet gaan gebeuren.

Nou, een geslaagde week. Al zeg ik het zelf.

Hieronder wat screenshots van ons design & breakdown schetsen:

Week 4

De één na laatste week is aangebroken. In deze week zijn Juul en ik voornamelijk bezig geweest met de code. Juul meer met het visuele gedeelte en ik met de data. Ik ben in het begin van de week verder gegaan met het implementeren van Prismic in onze Next setup. Ik hoorde via andere klasgenoten wel wat dingen die mij lieten twijfelen om verder te gaan met Prismic als CMS. Ook nam Prismic veel tijd in beslag, er was niet super veel documentatie te vinden. Als je dan wat documentatie had was het of oud, of net niet wat voor ons project nodig was. Ik heb uiteindelijk het besluit genomen om te gaan voor een ander headless CMS. Namelijk GraphCMS. Nathan kwam hiermee en hij was ook wel degene die aangaf wat voor flaws er in Prismic zaten. Ik zag dat GraphCMS een betere documentatie had voor Next en dat het van GraphQL was. Het interface was ook prettiger, helemaal voor onze klant die niet zo technisch is als wij.

Uiteindelijk ben ik hiermee bezig geweest, heb veel tutorials gekeken en het is uiteindelijk gelukt om GraphCMS te koppelen met Next. Toch kwamen Juul en ik er achter, dat onze aanpak in het CMS en code uiteindelijk niet soepel zou gaan werken. Helemaal omdat de vraag van de opdrachtgever is om de sections/stories te kunnen verschuiven. De volgorde mag niet vast staan, dit moet anders neergezet kunnen worden. Juul en ik hebben na het gesprek met onze opdrachtgever contact gezocht met Joost. Hij had hier kennis van en heeft ons uiteindelijk goed op weg geholpen. Dit hebben we in een teams call gedaan. Hierna hebben Juul en ik alles omgegooid. Wij hadden eerst meerdere story components en pagina’s. Het was handiger om hier 1 van te maken en dan binnen het CMS het zo neerzetten dat je wel die aparte verhalen hebt. Na wat zoek werk is dit ons gelukt. Nu heb je een story component, hierin worden de elementen geladen die nodig zijn. Titel, subtitel, broodtekst en plaatjes. Femke kan via deze component meerdere verhalen aanmaken, een beetje zoals posts in Wordpress. In de CSS zorg je er dan voor dat de verhalen visueel verschillend zijn en hun eigen karakter hebben. Deze manier is veel geschikter en schaalbaar.

Later in de week kwamen wij er alleen niet helemaal uit hoe wij de data konden gebruiken vanuit ons CMS in Next. Alles stond perfect in het CMS, maar nog niet in Next. Wij laden nu namelijk data in via server-side (Next is server-side). Alleen wij hebben onze data ook nodig in client-side components. Next heeft hier niet een gemakkelijk oplossing voor, je kan dat niet even zomaar omzetten. Robert gaf al aan om een context provider te maken, hier ben ik mee bezig geweest. Toch hebben wij Joost weer even om advies gevraagd. Dit was ook de eerste keer voor ons en voor mij met de context provider. Joost heeft ons weer wat op weg geholpen en duidelijkheid gegeven. 20 min na dit gesprek had ik de context provider opgelost en konden wij data versturen naar onze clients-side components. He he… het echt werk kon nu eindelijk beginnen. Het inladen van de data, alles koppelen en beginnen met het stijlen van de sections. Dit is wel wat voor volgende week.

Hier leg ik nog meer uit over de context provider die wij nu gebruiken:

Week 5

De laatste week, nog even knallen om alles af te krijgen. De meeste technische zaken zijn geregeld, nu is het vooral styling en animatie werk. Juul en ik hebben tijdens ons project al vaker een opdeling gehad van onze website. Deze hebben wij weer erbij gepakt, dan weten we wie welk verhaal maakt en ontwerpt. Omdat bij onze opdracht mobiel erg belangrijk was hebben wij voor nu ons project mobile first en only gemaakt. In onze vervolg stappen kunnen wij dan aangeven dat hij nog volledig responsive gemaakt moet worden. Toch was het lastig om alles lekker te laten lopen op mobiel. Ons design is erg grafisch en er gebeurt veel. Juul kwam met het idee om display: flex; te gebruiken. Dan met order de volgorde te bepalen van de content in de sections. Dit gaf ons de kans om onze verhalen gemakkelijker te stijlen zoals ons design. Nadat wij dit soort basis css gedaan hadden zijn we dus ons lijstje afgelopen. Juul deed zijn sections en ik die van mij.

Nadat we klaar waren zijn wij verder gegaan met de animaties. Ik heb mij gefocust op de animaties van de plaatjes en wat text animaties. Juul heeft wat speciale effecten toegevoegd, zoals het “grain” effect. Uiteindelijk heb ik ook nog een smooth scroll scriptje toegevoegd die ik nog had vanuit een ander project en een scriptje voor ons headings. Het laatste scriptje zorgt ervoor dat elk 2de en 3de woord van onze headings een ander lettertype heeft. Dit hadden wij ook in ons design staan, nu wij niet echt statisch onze content kunnen aanpassen of hele specifieke dingen. Moet het even op deze manier en zijn alle headings het zelfde daarin. Misschien ook wel beter, geeft wat meer structuur en hiërarchie in het ontwerp.

Juul kwam op het laatst nog met 1 klein ding, dit ging om hoe wij onze images hadden neergezet. Dit deden wij met position: absolute; en dan via top, bottom, left en right positioneerden wij de afbeeldingen. Dit werkte soms niet heel lekker, uiteindelijk zijn we voor een aanpak gegaan waar alleen afbeeldingen die position: absolute; nodig hebben dit krijgen. De rest krijgt dit niet. En als er absolute afbeeldingen zijn dan dient er 1 relative te zijn. Dit zorgt voor een soort “schild” zoals Juul heel mooi zei. Dan kunnen we namelijk de absolute afbeeldingen goed neerzetten en krijgen we ook geen problemen met de flex orders. Na dit hebben wij alles gedeployed via Vercel. Vercel is het bedrijf wat Next ontworpen en bedacht heeft. Via Vercel kun je dus heel gemakkelijk je Next app deployen. Dit hebben wij ook gedaan omdat anders onze performance heel laag zou zijn. Tijdens npm run build voert Next al zijn slimme features uit, deze zorgen ervoor dat je Next app optimaal geoptimaliseerd wordt. Zo gingen wij van een performance van 63 naar 100. Groot verschil. Wij hebben nog wel wat kleine dingen aangepast om onze lighthouse score zo goed en hoog mogelijk te krijgen. Gewoon wat simpele dingen die Google je altijd aanraad om te doen. Uiteindelijk is dit dan het eindresultaat van mij en Juul. Waar wij en ik ook heel erg trots op ben.

Bekijk hem hier (op mobiel).