Auteur: Nino van der Vinden
De opdrachten: opdracht 1 en opdracht 2
Markdown is een simpele manier om HTML te schrijven.
Markdown cheat cheet: Hulp bij het schrijven van Markdown.
Nb. De standaardstructuur en de spartaanse opmaak van de README.md zijn helemaal prima. Het gaat om de inhoud van je procesverslag. Besteedt de tijd voor pracht en praal aan je website.
Nb. Door open toe te voegen aan een details element kun je deze standaard open zetten. Fijn om dat steeds voor de relevante stuk(ken) te doen.
- Tilt-shake functie
- Heineken Font
- Clamp uitleg
- Syntax
- Reduced Motion
- Clippy
- Liquid effect tutorial
- ChatGPT
- Flex none
- Array Splice
- Array Push
- animationend
- Focus & Blur event
Aan deze technieken/punten wil ik werken:
- Vormen stylen/animeren
- Lagen over elkaar animeren (parallax)
- "Realistische physics" / liquid effect
uitwerken bij afronden opdracht (voor week 4)
Mijn focus lag nooit echt op animeren gedurende mijn front-end loopbaan. Door deze opdracht heb ik meer inzichten hoe je op verschillende manieren met CSS animaties kunt maken. Door de voorgaande oefenopdrachten en uitleg in de les ging het maken van mijn eigen animatie redelijk soepel. Iets wat totaal nieuw was voor mij was de darkmode en reduced motion settings. Deze gaan heel useful zijn in de toekomst voor mij.
Wat ik in het begin lastig vond was het centeren van mijn logo na de animatie. De animatie begint met de Heineken ster die gecentered staat en vervolgens gepositioneerd wordt als before binnen de h1. Dit zorgde ervoor dat in theorie de h1 wel gecentered was maar omdat de before (ster) er nog voor kwam was het geheel niet gecentered. Dit heb ik opgelost met een animatie die na de ster rotation de positionering van het h1 element corrigeert. Dit heb ik getimed met een animation-delay zodat de overgang niet hakkerig is.
Iets wat niet gelukt is dat na de animatie alsnog gescrolled kan worden in Chrome responsive mode, ondanks dat er overflow: hidden op de body zit. Ik las dat dit een bug kon zijn van Chrome responsive mode.
Nog geen animaties.
De ster om een film in je favorieten te plaatsen animeren.
Data wordt niet opgeslagen bij een refresh.
Data opslaan in local storage.
Styling nog niet helemaal op orde.
Styling afmaken.
Ik had al eens eerder met een API gewerkt tijdens het vak Inleiding programmeren: https://build.drippin.it/weatherapp/. Tijdens dit project heb ik echter alleen data opgehaald.
Bij deze nieuwe opdracht voor FvD ben ik meer de diepte in gegaan door de focus te leggen op het opslaan van data naar een lijstje.
Waar ik lang tegen aan liep was het stylen van de buttons als er met de Tab key genavigeerd werd. Eerst probeerde ik het met de :focus
selector te realiseren. Dit werkte echter niet goed voor mijn use case omdat :focus ook getriggerd wordt on click en de styling was
alleen van toepassing bij het navigeren met de Tab key. Uiteindelijk ben ik gekomen bij het focus & blur event waarmee ik dit heb kunnen
oplossen.
