Farrahton

Ik kan het kort houden door de harde waarheid te zeggen: in principe zijn alle vakken aan bod gekomen, want ik heb al mijn kennis opgedaan tijdens deze minor. Alleen dat zou toch eens een flauwe reflectie zijn. Daarom gaan we alsnog de vakken langs.

CSS To The Rescue is het vak dat mij heeft geïntroduceerd met CSS. Ik wist toentertijd niet eens waarom je classes en ID’s gebruikte, dus de selectors met nth-of-type en dergelijk waren mijn eerste benaderingen. In dit project heb ik deze hier en daar wel toegepast. Toen we nog per pagina een apart CSS-bestand hadden, vond ik dit makkelijker toe te passen en deed ik het met veel plezier. Op het moment dat ik besefte dat we er één geheel bestand van moesten maken, ging ik helaas toch meer vertrouwen op het gebruik van classes en ID’s. Niet getreurd ik heb alsnog andere dingen vanuit het vak toegepast. Het leerdoel experimenten met voor mij nieuwe css-technieken bijvoorbeeld was de counter-reset, stroke properties, en natuurlijk de classes en ID’s! Ook ben ik dit keer gelijk al bezig geweest met responsiveness in plaats van dat het een achteraf ding was waar ik geïntimideerd en bang van werd. Custom properties zijn ook mijn beste vrienden geworden. Het maakt het zoveel makkelijker om je aan een huisstijl te houden.

WAFS is het vak waar ik voor het eerst met JavaScript ging werken. CSS had nog wel wat dingen die ik herkende van Adobe programma’s, maar JavaScript was een compleet nieuwe wereld. Voor de meesterproef heb ik de empty state en error state uit de UI stack toegepast. De empty state is er één die vooral belangrijk is in dit project, omdat de gebruiker de goals pagina beïnvloed en een lege pagina simpelweg lelijk en ongebruiksvriendelijk kan zijn. De error state is toegevoegd, omdat de URLS persoonlijke informatie bevatten en op het moment dat iemand denkt oh die pagina bevatte goals ik kan er dan vast wel even snel naartoe browsen met alleen dat achter de URL, het mis kan gaan. Alhoewel de kans klein is, omdat onze app voor de rest een heel duidelijke user flow heeft. Tijdens WAFS hebben wij allemaal geleerd om structuur in je code aan te brengen door bijvoorbeeld modules te maken. Vanwege de fijne overzichtelijkheid die dit brengt, is dit ook in de meesterproef van pas gekomen. Al helemaal vanwege de vele bestanden/functies die we hebben. Bovendien maakte dit het samenwerken makkelijker, omdat het merge conflicten scheelden wanneer we allebei in een ander bestand konden werken. Parameters waren ook nieuw voor mij en heb ik na mijn eerste kennismaking ermee zeker meer ingezet. Fetchen uit een API en dit renderen in HTML heb ik ook geleerd en weer toegepast tijdens de meesterproef.

Door Progressive Web App beheer ik zelfs server side rendering skills. De meerwaarde hiervan snap ik ook, zoals te zien is in de design rationale. Tussentijds heb ik rekening gehouden met lighthouse optimalisaties, zoals niet te grote afbeeldingen en critical CSS zoals fonts te inlinen om de performance te verbeteren. Ik heb dit keer vanwege het gebrek aan tijd niet zelf de service worker ingezet, maar ik kan wel vertellen dat ik deze taak op mij had willen nemen als er meer tijd was. Uiteraard heb ik wel de code nagelopen om te kijken of ik alles begrijp. Iets waar ik persoonlijk ook veel van heb geleerd tijdens dit project, aangezien het niveauverschil tussen een Creative Business student en een ICT-student wat betreft techniek ontzettend groot is. Ik heb zelfs het gevoel dat ik door het samenwerken meer heb geleerd dan wanneer ik alleen te werk was gegaan. Soms vond ik het lastig wanneer Lisanne code schreef die ik in de eerste instantie niet zelf op die manier had aangepakt. Dit had echter ook weer een groot voordeel, omdat ik alle context om deze nieuwe code heen wel begreep. Het werd daardoor veel begrijpelijker dan bijvoorbeeld een stackoverflow voorbeeld.

Eerlijk is eerlijk ik vond het soms wel lastig om met iemand te werken die veel meer kennis heeft en sneller is in coder. Ze schreef vaak heel veel code in korte tijd, waardoor ik het gevoel kreeg alsof ik weinig deed. Ik moest mijzelf eraan herinneren dat ik gewoon nog een beginner ben en dat ik wel degelijk veel heb gedaan, voornamelijk in het begin. Ik heb In het begin veel javascript opgezet. Het hele project door heb ik de user experience en user interface geregeld en met concept gekomen (boo @ tijd te kort om te implementeren) en enorm veel enthousiasme en leergierigheid getoond.

In het vak Browser Technologies heb ik met de templating engine handlebars gewerkt. Ik had toen een post request uitgevoerd en een if statement in HTML geschreven. Deze dingen zijn allebei teruggekomen in de meesterproef. Een ifCond daarentegen was nieuw voor mij en vond ik dan ook een hele mooie techniek. Het bracht dynamische content voor mij op een ander niveau. Het doorgronden van de core functionaliteit is ook iets waar ik bij stil heb gestaan. Voor SO-NUTS is het de vragenlijst kunnen invullen en doelen kunnen uitkiezen en bijhouden. Ik geef wel eerlijk toe, de progressive enhancement had beter gekund. Alleen ik wilde niet letterlijk mijn code kopiëren en plakken van de multi-step form die ik had gemaakt voor dit vak, waardoor ik het eigenlijk niet heb toegepast. Eén van de core functionaliteiten, namelijk een doel uitkiezen is dan ook met input type checkboxes gedaan. Als de JavaScript uitvalt, werkt dit dus nog steeds. Semantische HTML heb ik ook wederom opgelet. Hier en daar zijn er wel divs gebruikt, maar mij is verteld dat dit voor decoratie en dergelijk wel gebruikt mag worden.

Tijdens Human Centered Design hebben we van alles geleerd over toegankelijkheid, behoeftes, design principes en het testen met mensen en itereren van ontwerp. Iedere week heb ik samen met Winnie de user experience designer het ontwerp getest en op basis hiervan iteraties gemaakt wanneer nodig. Soms had ze alleen positieve feedback, maar ging ik toch verder te vragen of kijken hoe ze iets ervaart, zoals we geleerd hebben tijdens dit vak. Hierin is onder andere rekening gehouden met toegankelijkheid, zoals aria-labels voor buttons/linkjes. Vooral belangrijk wanneer er alleen een icoon is. Ook hebben de afbeeldingen natuurlijk alt-teksten voor mensen die blind zijn. De hele app is gebaseerd op behoeftes van mensen uit de doelgroep. Grotere knoppen en tekst, veel visueel, duidelijke onderscheid tussen dingen, inspelen op psychologische dingen zoals loss aversion, baby steps en kleuren, goede begeleiding over wat er te verwachten staat etc.

Voor Real Time Web kon je kiezen of je een eigen database ging opzetten. Ik wilde dit toen doen, maar vond het niet per se relevant/had andere prioriteiten. Daarom ben ik blij dat we nu met de meesterproef dit wel hebben gedaan. Lisanne had het begin gedaan, maar vervolgens ging ik het wel zelf proberen om te kijken of het mij ook gelukt zou zijn. Wat het geval was. Bovendien heb ik er zelf dingen aan toegevoegd zoals de iconen kolom, waarvoor ik eerst moest bedenken hoe ik afbeeldingen zou weergeven. Verder heb ik Real Time Web niet kunnen toepassen. Het had mij leuk geweest als we met sockets de challenge konden implementeren en een chat voor extra motivatie, maar wie weet komt dat nog in de toekomst.

Al in al, vond ik de meesterproef een heel mooie afronding van de minor. Ik heb veel toegepast en veel ook niet, maar door de herhaling heb ik écht het gevoel gekregen dat ik alles snap. Tijdens de sprints was het soms nog zo dat ik gewoon snel doorging en dingen nog wel een vergat, maar dat idee heb ik nu niet meer.

Lisanne

Tijdens de Meesterproef heb ik veel van de technieken die ik geleerd heb tijdens de minor kunnen toepassen. Enkele functies, zoals zelf een database opzetten in Supabase en deze gebruiken, heb ik mijzelf aangeleerd tijdens dit project. In de onderstaande alinea's heb ik beschreven welke vakken wel of niet aan bod zijn gekomen en waarom. Voor een uitgebreidere onderbouwing van de functies die ik heb geïmplementeerd en de keuzes die ik hierin heb gemaakt, verwijs ik u graag door naar mijn Product Biografie.

Web App From Scratch

Tijdens WAFS heb ik voor het eerst geleerd om JavaScript te schrijven, en deze vaardigheid heb ik veelzijdig kunnen toepassen in het project. Daarnaast heb ik modules toegepast. Voorheen maakte ik altijd gebruik van float, maar tijdens WAFS werd mij dit streng afgeleerd. In plaats daarvan moest ik flexbox leren, wat uiterst handig bleek en ik dan ook heb geïmplementeerd in alle pagina's. States kwamen ook aan bod tijdens dit vak, en in onze doelenpagina is een empty state verwerkt. Het werken met een API was voor mij niet nieuw, omdat ik dit al tijdens het themasemester Mobile Development had gedaan, maar hoe dit moet met een website wist ik nog niet.

CSS to the Rescue

Alhoewel de opdracht van CSSttR niet meteen op het project lijkt, zijn er toch een aantal punten die ik heb meegenomen hierin. Zo heb ik geen ID's en classes gebruikt als het ook mogelijk en schaalbaar was om een element met een selector aan te spreken. Daarnaast heb ik CSS-selectoren gebruikt in de query selectors om bijvoorbeeld alle aangevinkte checkboxes op te halen. Dat er zoveel mogelijk is met selectoren had ik zonder dit vak nooit geweten.

Progressive Web Apps

Van PWA heb ik echt ontzettend veel geleerd en kunnen toepassen tijdens dit project. Zo is het gedeployed op Heroku, is het grondig gedocumenteerd (dat leerde ik bij dit vak pas écht, omdat er geen eindgesprek was), wordt het meerendeel van de JavaScript server-side uitgevoerd, is er gebruik gemaakt van een templating engine: Handlebars, draait er een service worker en zijn er allerlei enhancements geïmplementeerd. Tijdens dit project heb ik de service worker nog complexer gemaakt, door zelf een caching strategie te schrijven. Het gaat nu in de volgorde: opgevraagde HTML van de webserver, opgevraagde HTML van de dynamic-cache, offline pagina van de core-cache. Alle ondersteunende bestanden (CSS, JavaScript, afbeeldingen en lettertypes) worden vanuit de core-cache geserveerd, om het netwerkverkeer te verminderen. Ook het uitvoeren van een server-side API-request en het werken met Node.js packages heb ik geleerd tijdens PWA en geïmplementeerd tijdens dit project.

Browser Technologies

Het basisprincipe van BT heb ik toegepast in het project: zoveel mogelijk doen met enkel HTML. Door de pagina's server-side te renderen, is de inhoud en werking van het project niet primair afhankelijk van client-side JavaScript. Voor de service worker en dynamic view height in CSS heb ik feature detection gebruikt.

Real-Time Web

Tijdens het project heb ik weinig kunnen toepassen uit RTW, omdat het simpelweg niet nodig was. Er waren geen pagina's waarop real-time data een aanvulling was op wat we al hadden, want anders had ik graag nog even met sockets gespeeld.

Human Centered Design

Het belangrijkste onderdeel van HCD was de communicatie met de persoon. Bij dit project hadden wij wekelijkse meetings met Winnie een technische docent en een ontwerper docent, die ons feedback gaven. Het was aan ons om te beslissen of wij dit gingen implementeren of niet. Daarnaast heb ik voor dit project hetzelfde gedaan als bij HCD: elke week de voortgang in een nieuwe branch zetten en pushen naar Heroku.