Sprint 8: Server-Side Rendering
Datum: 03/03/25
Wat heb je gedaan?
Ik heb Milledoni gekozen als mijn opdrachtgever. De briefing ontvangen en gelijk de debriefing geschreven.
De briefing voorbereid, de debriefing geschreven, en contact gehad met Milledoni via een WhatsApp-groepchat.
Hoe kan ik deze week de website voor Milledoni ontwikkelen volgens de richtlijnen van de briefing en de debriefing?
Verwijzingen:
Briefing & Debriefing Document FDND Milledoni GitHub Repository Milledoni Presentation Figma Design Milledoni Workshop van vandaag
Sprint 8: Server-Side Rendering
Datum: 04/03/25
Wat heb je gedaan?
Ik heb een interface inventory gemaakt.
De interface inventory is opgesteld en het template is beschikbaar voor gebruik.
Hoe kan ik deze week de interface inventory verder integreren in de ontwikkelingsworkflow?
Verwijzingen:
Interface Inventory Interface Inventory Template Styleguide
Sprint 8: Server-Side Rendering
Datum: 05/03/25
Wat heb je gedaan?
Vandaag heb ik gewerkt aan verschillende fetch URL's om data op te halen en te filteren via de Directus API. Ik heb een sitemap gemaakt en geleerd hoe ik fetch URL's kan gebruiken voor zowel algemene als gedetailleerde data, met behulp van filters om lege waarden te vermijden.
Ik heb verder gewerkt aan het begrijpen van hoe je data analyseert en hoe je velden kunt uitbreiden door gelinkte personen te tonen met hun gegevens, zoals namen, images, en andere velden. Ook heb ik gewerkt met base URL's om specifieke velden en gelinkte data te verkrijgen.
Hoe kan ik deze week verder werken met de Directus API om de data op een efficiënte manier te verwerken en presenteren?
Verwijzingen:
Workshop van vandaag: Data analyseren Sitemap maken Milledoni producten URL Index pagina fetch URL Details pagina fetch URL Andere URL voor tags Andere fetch URL met OR filter
Sprint 8: Server-Side Rendering
Datum: 07/03/25
Introductie tot GSAP
vandaag hadden we de we love web met cassie over de animatiebibliotheek GSAP (GreenSock Animation Platform) en geleerd hoe je deze kunt toepassen voor flexibele en krachtige webanimaties. GSAP biedt veel meer controle dan CSS-animaties, met onder andere tweens, timelines, en responsive matchMedia functionaliteiten.
Tweens en Timelines
GSAP gebruikt 'tweens' om individuele animaties te maken, bijvoorbeeld een element horizontaal verplaatsen. Timelines zorgen voor meer controle door meerdere animaties te sequencen zonder handmatig vertragingen te berekenen, iets wat CSS standaard niet ondersteunt.
GSAP Utils
GSAP bevat krachtige utiliteitsfuncties zoals random(), mapRange(), wrap() en pipe(), die animaties natuurlijker en dynamischer maken. Zo kun je eenvoudig willekeurige kleuren genereren of elementen eindeloos laten bewegen over het scherm.
Easing en Yoyo
Met easing kun je bepalen hoe een animatie versnelt of vertraagt. Dankzij progressie en yoyo-functionaliteit kun je animaties bijvoorbeeld laten terugkeren naar de startpositie of reageren op hoveracties met een in- en uitgaande animatie.
Responsieve animaties met matchMedia
GSAP ondersteunt matchMedia waarmee je animaties kunt afstemmen op mediaqueries zoals schermgrootte of pointer-type. Dit maakt het mogelijk om bijvoorbeeld bewegingsintensiteit aan te passen voor gebruikers met 'reduce motion'-instellingen.
Animatiecontrole
Met TimeScale kun je animaties versnellen of vertragen, vergelijkbaar met een videospeler. GSAP biedt ook helperfuncties die inspelen op veelvoorkomende uitdagingen, zoals animatie-pauses en interactie met sliders of knoppen.
Geavanceerde animatiefuncties
ScrollTrigger maakt het mogelijk om animaties te koppelen aan scrollacties, en met de Motion Path Helper kun je objecten langs een zelf getekend pad laten bewegen. Deze tools geven veel creatieve vrijheid bij het ontwerpen van interactieve ervaringen.
Samenwerking met Webflow
GSAP is recentelijk overgenomen door Webflow, wat de ontwikkeling en ondersteuning van de library heeft versterkt. Voorheen werd het onderhouden door slechts twee personen, maar nu is er meer ruimte voor groei en innovatie.
Voorbeelden en inspiratie
Op gsap.com/demos zijn er veel voorbeelden te vinden die laten zien hoe veelzijdig GSAP is. Deze demo’s zijn handig om inspiratie op te doen en zelf aan de slag te gaan met animaties.
Sprint 8: Server-Side Rendering
Datum: 07/03/25
Wat heb je gedaan?
Tijdens de workshop van vandaag heb ik gewerkt met data filtering en template filters in Directus. Ik heb verschillende experimenten uitgevoerd waarbij ik data filter op naam, geboortedatum en favoriete tags.
Workshop documentatie: Data Filtering & Template Filters
Experiment 1: Ik wil alle studenten gesorteerd op name Link
Experiment 2: Ik wil alle names van studenten die een name hebben die begint met de letter D Link
Experiment 3: Ik wil alle names van studenten die een name hebben die begint met de letter D of K Link
Experiment 4: Ik wil alle names en birthdates van studenten die een birthdate hebben ingevuld Link 1 Link 2
Sprint 8: Server-Side Rendering
Datum: 14/03/25
Ik heb geen probleem met de huidige indeling van de studio. Het kan soms druk zijn, maar als ik eenmaal bezig ben met coderen, lukt het me goed om geconcentreerd te blijven. Thuis studeren vind ik soms handiger, vooral omdat ik daar met twee schermen werk. Toch blijf ik liever in de studio als ik veel te doen heb, omdat ik daar het meeste gedaan krijg. Als ik 's middags moet werken, ga ik na de les naar huis.
Analyse van de studio
We hebben samen gekeken naar wat goed gaat in de studio en wat beter kan. Op het whiteboard hebben we dit overzicht gemaakt:
Wat gaat goed?
1. in de studio kunnen we samenwerken
2. Aquarium is lekker koel
3. Vier personen per tafel is een fijne bezetting
Wat kan beter?
1. Soms is er teveel geluid in de ruimte
2. De studio wordt soms te warm
3. Er is geen plek voor meer dan 4 personen per tafel
Nieuwe indeling voor studio en aquarium geschetsed
House rules voor een prettige werkomgeving
Ruim je plek op als je klaar bent