Welke opdracht ga je doen en voor welke opties kies je qua uitwerking?
De opdracht die ik ga doen is "Magische vuurwerkshow". Qua opties valt er niet veel te kiezen, behalve dat ik geen 3D-vuurwerkshow zal maken. Dit omdat ik nog nooit heb geanimeerd met CSS, dus in 3D animeren lijkt mij nu, in verband met de tijdsdruk, geen goed idee.
Met welke CSS-technieken ga je als eerste aan de slag?
De eerste CSS-technieken waarmee ik aan de slag ga, zijn de verschillende animaties. Dit doe ik zodat ik meteen een basis heb, waarna ik het vuurwerk verder uit kan werken. Eerst ga ik de vuurpijl animeren, en daarna de explosie.
Waar liggen je (grootste) uitdagingen?
Mijn (grootste) uitdagingen liggen in de creativiteit, animatie, interactie en restricties (geen ID"s en classes). Uiteindelijk wil ik minimaal één creatieve ingeving in de vuurwerkshow verwerken. Met animatie en interactie heb ik hiervoor nog nooit gewerkt, dus dat is nieuw voor mij. Voorheen werkte ik ook altijd met classes, nooit met selectoren.
Neem schets(en) van je ontwerp op.
N.v.t.
Maak wellicht ook al een eerste breakdown-schets.
N.v.t.
Laat je voortgang zien (“praatje met plaatjes”).
In de tweede week begon ik aan de opdracht met het kopiëren van een voorbeeld op het internet. In het voorbeeld miste een vuurpijl, dus die maakte ik eerst zelf. Na een tijd begreep ik 90 procent van het voorbeeld en had ik dit verwerkt in mijn eigen code. Toen ik de laatste 10 procent maar niet bleef snappen, heb ik mijn eigen vuurwerk maar gemaakt.
Wat ging er soepel en wat was lastig?
Wat er soepel ging was de vuurpijl. Dit was snel klaar, omdat het een hele simpele animatie betreft. Bovendien staan er veel voorbeelden van een bewegende stip op het internet. Van een explosie zonder JavaScript kan ik helaas niet hetzelfde zeggen. Na het kopiëren van een voorbeeld dat ik enigszins begreep, probeerde ik elke regel code te begrijpen. Dit lukte helaas niet, dus toen maakte ik een zelfgemaakte explosie.
Welke experimenten heb je gedaan die die ‘mislukt’ zijn?
De experimenten die mislukt zijn, zijn zowel het bovenstaande voorbeeld als het maken van een explosie die óf in een ronde vorm óf op random posities uit elkaar spat. Na een tijd geconcentreerd bezig te zijn geweest, keek ik naar het resultaat en zag ik een symmetrische vierkante explosie. Toen ik dit voorlegde aan Vasilis, reageerde hij enthousiast en vond hij dit juist een ontzettend creatief idee: vierkant vuurwerk!
Heb je nieuwe inzichten hoe je de kracht CSS kunt benutten (of juist niet)?
Ik heb zeker nieuwe inzichten in hoe ik de kracht van CSS kan benutten. In deze korte twee weken heb ik al geleerd dat er vaak onnodig JavaScript gebruikt wordt, terwijl het in veel gevallen efficiënter is om CSS te gebruiken. Daarnaast dacht ik voorheen dat animaties altijd met JavaScript worden gemaakt. Nu leer ik dat CSS zeer capabel is om mee te animeren.
Neem wijzigingen aan je 1e plan op.
In eerste instantie wilde ik normaal vuurwerk maken, maar nu heb ik het plan veranderd: het vuurwerk wordt vierkant.
Waar liggen je (nieuwe) uitdagingen voor komende week?
(Nieuwe) uitdagingen voor de komende week zullen zijn: het responsive maken van de explosie, zodat het een vierkant blijft als het scherm smaller wordt, en het toevoegen van subexplosies zonder boilerplate code te schrijven.
Laat je voortgang zien (“praatje met plaatjes”).
In de voorjaarsvakantie heb ik veel van mijn tijd aan CSS to the Rescue besteed. Ik was niet trots op wat ik tot dan toe had, dus besloot ik om verschillende soort vuurwerk uit te proberen en de beste verder uit te werken. Na nog wat gerommeld te hebben met het vuurwerk dat gebaseerd was op een voorbeeld, heb ik dit idee maar links laten liggen. Voordat ik mij volledig stortte op het vuurwerk met de stipjes, dat ik helemaal zelf gemaakt had, besloot ik nog één nieuw vuurwerk uit te proberen. Hiervoor had ik middels een offset-path een spiraalvormig vuurwerk gecreëerd (werkt alleen niet in Safari). Toen ik de positionering hiervan niet kreeg zoals ik het wilde, besloot ik om het zelfgemaakte vuurwerk met de stipjes verder uit te werken. Hier heb ik allemaal subexplosies, kleuren, een maan, een verliefd koppel en een bonzend hartje boven het koppel aan toegevoegd. Het hartje boven het koppel verschijnt pas als hierop geklikt wordt. Het koppel is namelijk een checkbox. Daarnaast kreeg ik de tip van mijn familie dat het leuk zou zijn als het vuurwerk uiteindelijk ronddraait. Dit heb ik geïmplementeerd.
Wat ging er soepel en wat was lastig?
Wat er soepel ging was het maken van de maan en het verliefde koppel. Ik had vrij gemakkelijk bedacht hoe dit eruit moest komen te zien en het koste niet veel moeite om dit te maken. Wat lastig was, was ervoor zorgen dat het beginpunt van de spiraal het eindpunt van de vuurpeil was. Tijdens de voorjaarsvakantie kon ik dit probleem niet voorleggen aan anderen, dus heb ik dit idee links laten liggen en mij gestort op de stipjes.
Welke experimenten heb je gedaan die die ‘mislukt’ zijn?
De experimenten die mislukt zijn waren het vuurwerk dat gebaseerd was op een voorbeeld en het spiraalvormig vuurwerk. De eerstgenoemde heb ik gestaakt omdat ik na twee weken nog steeds niet precies wist hoe de code in elkaar zat. Daarop besloot ik dat het beter was om een (op dat moment) minder mooi vuurwerk uit te werken dan om nog meer aandacht aan iets te besteden dat ik niet kan uitleggen aan anderen.
Heb je nieuwe inzichten hoe je de kracht CSS kunt benutten (of juist niet)?
Ik heb zeker nieuwe inzichten in hoe ik de kracht van CSS kan benutten. Zo had ik nog niet eerder met een offset-path gewerkt, en was het maken van een checkbox in de vorm van een verliefd koppel helemaal nieuw voor mij. Ik vermoed dat ik dit niet in de toekomst zal gebruiken, omdat het werken met een button sneller en netter is, maar met een offset-path zou ik graag nou willen experimenteren. Hiermee zijn dingen mogelijk die met andere animation als onmogelijk worden gezien.
Neem wijzigingen aan je 1e plan op.
In het plan van vorige week had ik niet opgenomen dat er een achtegrond (de maan en het koppel) bij het vuurwerk zou komen. Ook wist ik nog niet op welke manier ik het vuurwerk wilde beinvloeden, maar nu wel: als het hartje verschijnt, wil ik dat het vuurwerk rood wordt.
Waar liggen je (nieuwe) uitdagingen voor komende week?
(Nieuwe) uitdagingen voor de komende week zullen zijn: ervoor zorgen dat het vuurwerk altijd opnieuw blijft afspelen. Dit is zo makkelijk nog niet, omdat de animation-delay enkel de eerste keer werkt. De tweede keer speelt alles dus tegelijkertijd af. Verder wil ik dat het vuurwerk rood wordt als de checkbox gechecked is (dus als het hartje boven het koppel verschijnt).
Laat je voortgang zien (“praatje met plaatjes”).
In de derde week heb ik de doelen van de week ervoor uitgewerkt. Zo heb ik ervoor gezorgd dat het vuurwerk rood wordt als de checkbox gechecked is (dus als het hartje boven het koppel verschijnt). Verder heb ik ervoor gezorgd dat het hele vuurwerk zich eindeloos opnieuw blijft afspelen. Ook luistert de website naar de voorkeuren van de gebruiker. De kleuren worden aangepast op light/dark mode en het vuurwerk blijft in de eindpositie stil staan als de gebruiker reduced motion aan heeft staan. Tenslotte heb ik alle code opnieuw doorgenopmen en opgeschoond waar dat mogelijk was. Het vuurwerk is nu in principe af.
Wat ging er soepel en wat was lastig?
Wat er soepel ging was het luisteren naar de voorkeuren van de gebruiker (light/dark mode en reduced motion). Het implementeren van de light mode bleek ook makkelijker dan vooraf gedacht. Wat er lastig was, was het omzetten van het koppel naar een checkbox, omdat ik het eerst probeerde een ID te gebruiken. Dit lukte niet, omdat ik dan een laag omhoog zou moeten om het vuurwerk aan te passen, en dit kan alleen nog in Safari Technology Preview. Ik wilde graag dat mijn vuurwerk op alle browsers correct eruit ziet, dus dan vervalt deze optie. Er zat niets anders op dan toch een ID te gebruiken, zodat het label onder de checkbox kon staan (in tegenstelling tot eromheen). Aan Vasilis heb ik gevraagd of dit oké was, en hij vond het prima, omdat er geen andere mogelijkheid is. Verder was het ervoor zorgen dat het vuurwerk eindeloos af blijft spelen een uitdaging. De animation-delay werkt enkel de eerste keer, de tweede keer speelt alles dus tegelijkertijd af. Na een tijd kwam ik erachter dat dit komt doordat er geen delay is na de animatie. Na wat zoeken op internet kwam ik erachter dat ik dit handmatig toe kan voegen aan de animaties door middel van keyframes. Er staat dus een animation-delay voor de animatie, en vervolgens duurt de animatie zo lang als de animatie zelf plus de tijd van alle animaties erna bij elkaar opgeteld. Als de animatie 1 seconde duurt, en er komt daarna nog een laatste animatie van 1 seconde, stoppen de keyframes op 50 procent. Dit was wel even puzzelen, maar uiteindelijk heb ik dit met wat vanilla wiskunde werkend gekregen.
Welke experimenten heb je gedaan die die ‘mislukt’ zijn?
Tijdens een voortgangsgesprek met Vasilis stelde hij voor om meerdere soorten vuurwerk te maken, of om hetzelfde vuurwerk op meerdere posities af te laten spelen. Het eerste zou mij te veel tijd kosten, maar met het tweede heb ik geëxperimenteerd. Helaas kreeg ik dit niet snel werkend, mede dankzij de ingewikkelde animation-delays die ik heb geïmplementeerd. Ik heb besloten om dit niet meer te werken in de vuurwerkshow, omdat dit mij meer tijd zou kosten dan ik nog heb.
Heb je nieuwe inzichten hoe je de kracht CSS kunt benutten (of juist niet)?
Ik heb zeker nieuwe inzichten in hoe ik de kracht van CSS kan benutten. Zo wist ik niet hoe er in de CSS naar gebruikersvoorkeuren als light/dark mode en reduced motion kunnen worden geluisterd. Dit blijkt veel makkelijker dan gedacht en zal ik in de toekomst nog vaak gebruiken.
Neem wijzigingen aan je 1e plan op.
In eerste instantie had ik helemaal niet stil gestaan bij gebruikersvoorkeuren als light/dark mode en reduced motion. Sinds wij hier uitleg over hebben gehad, wilde ik dit graag in de vuurwerkshow inplementeren.
Waar liggen je (nieuwe) uitdagingen voor komende week?
Omdat ik tijdens de voorjaarsvakantie heb doorgewerkt aan CSS to the Rescue, heb ik besloten om mij de volgende week enkel te richten op de puntjes op de i zetten. Daarnaast heb ik nog aardig wat te doen totdat de opdracht van Web App from Scratch af is, daar heb ik namelijk niet aan gewerkt tijdens de voorjaarsvakantie.
Bespreek je eindresultaat (“praatje met plaatjes”).
Het eindresultaat heb ik al vrijwel helemaal besproken in week 3. Het enige wat ik sindsdien nog heb aangepast, is dat het rode vuurwerk nu de vorm van hartjes heeft en de armen iets dunnner zijn gemaakt (na hierover feedback te hebben ontvangen).
Wat ging er soepel, wat was lastig en waar ben je trots op?
Waar ik veel tijd aan kwijt was, was het omzetten van het vuurwerk met stipjes naar hartjes. Het was voornamelijk experimenten met :before, kijken hoe ik dit in een animatie kon verwerken, en hoe ik dit op de meest compacte manier aan de code kon toevoegen.
Welke experimenten heb je gedaan die die ‘mislukt’ zijn?
Een experiment dat mislukt was, was het proberen om de hartjes altijd recht te laten staan, terwijl het grotere geheel draait. Ik heb dit even geprobeerd en hierover nagedacht, maar ik zou niet weten hoe ik dit kan implementeren in de code die ik heb (met alle ingewikkelde animation-delays en keyframes).
Heb je nieuwe inzichten hoe je de kracht CSS kunt benutten (of juist niet)?
Ik heb niet per se in de afgelopen week nieuwe inzichten opgedaan, maar wel gedurende dit vak. Ik heb geleerd dat er heel veel geanimeerd kan worden met CSS, dat ID's en classes niet altijd nodig zijn, dat een eindeloze loop met meerdere animaties mogelijk is, en dat er met één regel CSS geluisterd kan worden naar gebruikersvoorkeuren. Naast de lessen heb ik een aantal themasessies bijgewoond, waar ik veel nieuwe kennis heb mogen opdoen.
Waar wil je meer mee gaan doen?
Waar ik meer mee wil gaan doen zijn animaties. Hier had ik voorheen nooit mee gewerkt maar het is een simpele manier om een website er aantrekkelijker uit te laten zien. Ook merk ik nu al dat ik geen ID's en classes meer gebruik als ze niet nodig zijn (ook aangeroepen kunnen worden met een selector), iets wat ik voorheen nog wel deed. Tenslotte zou ik graag websites willen bouwen die rekening houden met light/dark mode en toegankelijkheid, door o.a. @media queries en aria-labels toe te passen.
Alle CodePens zijn te vinden op https://codepen.io/collection/mrOjQk.