S4W2 · Look and feel

Workshop Sketchnoting

maandag 21 november 2022

Nadat de rook was opgetrokken van afgelopen week ging ik met nieuwe energie en een optimistische blik deze week te gemoed. Geen tijd om bij de pakken neer te zitten maar doorgaan. We begonnen deze week met een workshop Sketchnoting. Oftewel gedachtes visueel en grafisch vastleggen op papier. Wat deze opdracht speciaal maakte was het doel om ons proces van afgelopen sprints in beeld te brengen door middel van een metafoor.

Na de workshop kwamen we met alle aanwezigen van het project samen om de week te bespreken. Wie ging wat op zich nemen deze week. Hier gingen we iedereen persoonlijk langs.

Differentiatie

dinsdag 22 november 2022

Vandaag tijdens deze differentiatie dag kregen we een uitleg hoe je makkelijk kan samenwerken en code kan pushen in Github zonder merge conflicten te krijgen. Ook vertelde ze hoe je slim en efficiënt kan coderen om overschrijvingen kan voorkomen en hiërarchie kan toepassen. Bijvoorbeeld voor het opmaken van een header: .page-header .page-header__nav .page-header__nav__item toe te kennen om een universele structuur aan te brengen zodat andere developers makkelijk kunnen instappen in jouw geschreven code.

Workshop CSS voor styleguides

woensdag 23 november 2022

Woensdag startten we de dag met het college over custom properties, container queries en structuur. Custom properties had ik nog niet goed door dat het staat voor var() values om herhaling te voorkomen. Don't Repeat Yourself of Write Everything Twice (DRY & WET methode) hangt over deze methode en zorgt ervoor dat wij developers efficiënter kunnen coderen om twee redenen. Een vanwege het feit dat het minder typen is en twee dat we alle instellingen op een locatie hebben staan zodat we sneller en dynamischer aanpassingen kunnen maken.

Voor de deeltaak Styleguide had ik Tim geholpen de navigatie op de styleguide responsive weten te maken. Op mobiel en tablet wilden we de items horizontaal laten scrollen wat minder moeite kost. De dilemma was dat de items niet op een lijn wilden staan. Hier liep hij tegenaan maar ik wist hem hiermee te helpen om de parent element de volgende properties te geven: display: flex om de onderliggende elementen flexibel te maken en flex-direction: column in te stellen dat alle items op een kolom te krijgen. Dit werkte!

Tot slot heb ik geprobeerd mijn pagina (layout.html) af te krijgen. Voor vandaag hadden alle vier de elementen een voortoning moeten krijgen hoe het visueel eruit ziet per apparaat en hoe het is opgebouwd in html en css.

Differentiatie

donderdag 24 november 2022

Donderdag werkte ik vanuit huis vanwege een tandarts afspraak. 's Middags koos ik voor de user story 'donkere modus'. Eerst paste ik een knop toe die wisselde tussen de twee modussen. In mijn inspector zag ik dat die de class dark-theme aan de body toegevoegde, maar had verder geen effect op de website.

Code/Design-review over CSS & We ♥ Web met Mikey Casalaina

vrijdag 25 november 2022

Vrijdag hielden we de laatste code/design review voor de retrospect waar ik zeven issues bij mensen van andere projecten had geschoten om hun product beter te maken. Issues waren voornamelijk vormgeving-gericht. Zo ontbraken er faviconen op sites, maakten men nog gebruik van absolute eenheden i.p.v. relatieve waardes.

Later namen we deel aan een "We love web" sessie van Mikey Casalaina over custom wallpapers en maakte hij een wallpaper van een banaan met bewegende ogen. Hij codeerde dit live en ik adviseerde hem in css aspect-ratio: 1/1; te gebruiken om een element vierkant te maken. Dit is een functie in css waar hij niet vanaf wist. Hij maakte dit door middel van Svelte; een framework om efficiënter websites te ontwikkelen. Het viel mij op dat Svelte puur te gebruiken is met html, css en javascript. Best grappig, omdat nadat het resultaat stond ik riep dat het op de Mona Lisa leek. De banaan keek je altijd aan en het maakte niet uit vanuit welke hoek.

Ik sloot de dag af met advies van Krijn over het gebruik van custom properties. De manier hoe ik kleur had gegeven was niet de juiste manier en dat ontdekte ik vanwege de ontwikkeling van de donkere modus van de tool. Ik werd mij ervan bewust dat ik de kleur opnieuw moest gaan toepassen in mijn bestand. Ik ben toen direct op papier naamgeving gaan verzinnen om een universele en semantische betekenis te geven aan de waarde zodat ie binair gebruikt kan worden tussen deze twee modussen.