S12 W2
maandag 12 juni 2023
Vandaag kreeg ik een workshop over creative coding. We kregen deze workshop na aanleiding van het tweedaags congres CSS Day. Laten we websites weer cool maken was het idee. We kregen de opdracht om eerst collages te maken en daaruit diverse schetsen te maken.
De eerste schetsen waren bedoelt voor een horrific carousel die ook vrij psychidelisch eruit zou zien.
Het tweede concept was een cheesy loader die niet draaide maar leek te druipen.
Tot slot had ik een loading screen geschetst in een risograph-achtige stijl. Het grappige was dat ik een tussendoortje had boven m'n vel papier waarmee ik van de kruimels het ruis-effect maakte.
Tot slot had ik vandaag de overview page vormgegeven in css. Het was mij nog niet gelukt om de afbeelding in te laden.
Deze maandag had ik aan de opdrachtgever Peter gevraagd om tussentijdse feedback en stuurde hem een mailtje. Antwoord heb ik alleen nog niet gekregen.
dinsdag 13 juni 2023
Tijdens deze differentiatie dag namen we contact met Robert Spier om ideeën te sparren. Hij had eerder ook al een podcast site gebouwd met teksten in json opmaak die oplichten wanneer de spreker die zin uitspraken. Het was vandaag een nuttige sessie, ook al was het niveau waarop dit gebouwd was beyond onze capaciteiten.
woensdga 14 juni 2023
De dag begon met een workshop over de zero state. We kregen de opdracht om een schets te maken.
Vervolgens maakte ik zes schetsen en schreef ik erbij wie de gebruiker is en wat de functie van de pagina is.
Deze schetsen schotelde ik voor aan mijn medestudenten Arexan en Jalal.
Vandaag had ik ook een dynamic layout toegepast op de overzichtspagina.
Hiervoor gebruikte ik display: flex, maakte ik de call-to-action cards een stuk langer en zette ik het parent element op flex-wrap: wrap;
donderdag 15 juni 2023
vrijdag 16 juni 2023
Afgelopen vrijdag had ik samen met Siem, Tristan, Luuk en Justin uit het tweede jaar onze code besproken wat iedereen op had gezet.
Tijdens deze feedback ronde deelde ik dat het nog niet lukte om de achtergrond dynamisch in te laden per show. Ik kreeg toen de oplossing om in de body een inline style attribuut te plaatsen. Dat had ik al en zag er zo uit in de code.
<body style: background-color: ;</body>Ik liet ze het json bestand zien en kreeg te horen dat het object hoofdletter gevoelig was. Ik paste dat toe en fixte daarmee de dynamsiche achtergrondkleur.
<body style="background-color: #<%= item.attributes.style.backgroundColor %>;">
Diezelfde middag had ik mijn site getest op een mobiel van de HvA. Deze bleef verrassend goed overeind.
Dit gold vooral voor de homepage, de detailpagina had zo z'n visuele afwijkingen.
Zo was de afbeelding te breed voor mobiel, maar dit loste ik makkelijk op om de width: 16em te maken.
Naast het testen op het low-key device, deed ik ook verschillende brillen op om te kijken hoe goed en hoe ver de site overeind bleef staan.
De bril met een omgekeerde Retinitis Pigmentosa:
De bril met een geel filter:
De bril met Macula degeneratie:
Overzicht van alle brillen die ik op heb gezet.
