Leedoelen Minor Jop

Over mijn blog

Dit blog heb ik gemaakt om alle processen van de vakken en samenvattingen van de sprekers bij te houden. In dit artikel vind je vooral een samenvatting van mijn leerdoelen, leerproces en belangrijkste dingen die ik heb geleerd deze minor.

Over de minor

Het doel van de minor is natuurlijk om zo veel mogelijk te leren. Daarbij hebben we een aantal gesprekken gehad tijdens de minor over wat je uit de vakken hebt gehaald, wat je uit de weekly nerds hebt gehaald, en vroegen ze je ook om leerdoelen voor delen van de minor op te stellen.

Leerdoelen aan het begin van de minor

Aan het begin van de minor moest je vertellen wat je wilde leren bij deze minor. Ik wilde graag ontdekken wat er nog meer mogelijk was op het web dan dat ik al wist. En ik wilde ook graag een website maken die echt af is. En dan bedoel ik een mooie UI, goede UX, toegankelijk, responsive, goede performance, nette code, getest, en een duidelijk doel op de website. Dit is natuurlijk erg optimistisch als je vakken volgt waar je iets maakt dat gefocused is op een deel van deze dingen, en ook nog maar vier weken lang zijn. Ook wilde ik graag websites maken om op mijn portfolio te zetten.

Uiteindelijk is dit best goed gelukt. Ik heb heel veel nieuwe dingen geleerd over het web en zijn mogelijkheden. Ik heb bijvoorbeeld geleerd hoe je je website een PWA maakt en zo kan installeren op je apparaat. Hoe je push notificaties kan sturen en een chat kan maken met behulp van server sent events. Ik heb meer geleerd over browser api's, backend en browsers. Ook heb ik veel nieuwe selectoren en mogelijkheden die css aanbiedt geleerd. Ik heb kunnen testen met iemand die een bepreking heeft en iets speciaal voor haar kunnen maken. Ik heb in een team een mooie UI kunnen neerzetten. De UX en toegankelijkheid heb ik kunnen optimaliseren bij een website om een belastings formulier in te kunnen vullen op welk apparaat en welke browser dan ook.

Dus al met al heb ik die leerdoelen kunnen behalen.

Leerdoelen voor de meersterproef

De meesterproef is waar al onze skills die we hebben geleerd uit de vakken, samen kwamen in een opdracht voor een echte opdrachtgever. Voor deze opdracht moesten we vertellen waar je op dit moment staat en daarvoor duidelijke leerdoelen opstellen.

Waar ik nu sta

Ik ben deze minor er achter gekomen dat ik een technische front-end developer ben. Ik ben visueel niet heel sterk en creatief (wel creatief in oplossingen bedenken) maar wil wel graag een mooie website maken. Ik heb een designer nodig die mij een design geeft waar ik mij aan kan houden. Dit heb ik echter nog nooit echt gedaan, en zo gaat het in het bedrijfsleven wel z'n gang. Ook sta op het punt om mijn brede basis kennis (HTML, CSS, JS, Node en geen frameworks) meer naar de professionele wereld te vormen met de stage in zicht, en wil mij hier al een beetje op voor bereiden. Daarom zou ik graag wat technieken die ze daar gebruiken ook al willen gebruiken zoals object oriented programming, het MVC model voor de backend en builders.

Mijn leerdoelen voor de meesterproef waren:

• Ik wil leren om een design van de designer te coderen, en de realtie van de frontend developer en de designer te oefenen met input van beide kanten over wat er gemaakt moet worden en de grenzen breder te maken over wat er mogelijk is.
• Ik wil leren om builders te kunnen gebruiken en/of dingen zoals static site generators te kunnen gebruiken voor performance upgrades.
• Ik wil object oriented programming leren te gebruiken om zo functies te koppelen aan components en de code overzichtelijk te maken.
• Ik wil het kunnen gebruiken en opzetten van het MVC model voor de backend leren.

Ik wilde dit leren omdat ik dit allemaal nog nooit heb gedaan, en dit veel wordt gebruikt in de professionele wereld. Ook heb ik het een aantal keer voorbij zien komen tijdens het zoeken naar een stage en staan deze dingen al langer op mijn lijstje.

Uiteindelijk kreeg ik een opdracht waar ik idt niet allemaal kon doen. Dit kwam bijvoorbeeld omdat er geen backend nodig was. Ik heb dus mijn leerdoelen moeten aanpassen en dat zijn deze geworden:

• Ik wil leren om een design van de designer te coderen, en de realtie van de frontend developer en de designer te oefenen met input van beide kanten over wat er gemaakt moet worden en de grenzen breder te maken over wat er mogelijk is.
• Ik wil object oriented programming leren te gebruiken om zo functies te koppelen aan components en de code overzichtelijk te maken.
• Ik wil leren om Figma te kunnen gebruiken om meer te kunnen itereren op het mogelijke design voordat we iets gaan coderen en dat steeds later moeten aanpassen.

Reflectie Meesterproef

Tijdens dit zes weken durende project voor een echte klant heb ik veel kunnen leren. In een groep van drie hebben we iets moois neergezet waar we trots op kunnen zijn. Het doel van dit project was om een volledige user interface te maken gebaseerd op een onderzoek over sociale netwerken. Deze website kan dan later worden gebruikt om les mee te geven voor de minor des & mis informatie.

Wij moesten een al gemaakt prototype dat bestond uit een canvas gekoppeld aan een paar functies in de javascript uitbreiden tot een van zichzelf sprekende user interface waar de gebruikers zelf een sociaal netwerk kunnen simuleren. Meer over deze opdracht en het proces hier.

Eigen niveau van de meesterproef

Ik vond mijn eigen niveau erg goed en hoog liggen. Met de taakverdeling kreeg ik de verantwoordlijkheid om Rick zijn functies (vooral de step maar ook sommige andere functies zoals groepen berekenen en belangrijkste persoon berekenen) te implementeren in ons project. Dit was nog even een uitdaging want Rick had code geschreven die het tegenovergestelde werkte dan dat van onze. Verder ben ik bezig geweest om dit beter te maken en laten werken. Denk bijvoorbeeld aan het laten zien van de most important person en filteren op links. Maar ook de data laden op de mobiel op de juiste momenten zodat het altijd up to date blijft en niet irriteerd met steeds opnieuw plaatjes laden. Ook heb ik genoeg gecodeerd aan het design, hebben we samen met het groepje voldoende geitereerd op het design waarbij we allemaal nieuwe versies gingen maken op basis van de feedback die we hadden gekregen. Ook heb ik mijn groepsleden geholpen en feedback gegeven wanneer dat nodig was.

Ik ben het meest trots op de simulatie. Deze heb ik werkend gekregen, geoptimaliseerd en waterdicht en inzichtelijk kunnen krijgen in de loop van deze zes weken. Steeds kwam er weer iets tevoorschijn dat beter kan, over het hoofd gezien was en in de toekomst kan worden toegevoegd. Het mooiste vind ik ook dat hij volledig samen werkt met de mobiel. Dit was een logische brei waar ik erg van hou en mijn tanden graag in wil zetten. Verder heb ik er veel van geleerd, met name op objet oriented niveau. Waar figma goed voor is en hoe je het moet gebruiken en als basis kan gebruiken wanneer je het design van figma codeerd.

Als ik kijk volgens de vakken rubrics welke vakken bij de meesterproef naar voren zijn gekomen zijn dat: WAFS en API (content fetchen voor de nodes), CSS to the rescue (spelen met anchor positioning om de data voor de nodes altijd bij de node op de goeie plek zichtbaar te hebben), Browser tech (de website is progressive enhanced en werkt (en getest) op chrome, firefox en safari) en HCD (we hebben de website getest met de doelgroep en verbeterd of genoteerd in de documentatie wat beter moet worden gemaakt).

Wel is de website niet echt toegankelijk voor mensen met een beperkt zicht en ook niet responsive, dit wat niet de opdracht en daarom ook niet een aandachtspunt voor de eerste versie.

Leerdoelen van de meesterproef

De drie leerdoelen die ik had opgesteld waren:

• Ik wil leren om een design van de designer te coderen, en de realtie van de frontend developer en de designer te oefenen met input van beide kanten over wat er gemaakt moet worden en de grenzen breder te maken over wat er mogelijk is.
• Ik wil object oriented programming leren te gebruiken om zo functies te koppelen aan components en de code overzichtelijk te maken.
• Ik wil leren om Figma te kunnen gebruiken om meer te kunnen itereren op het mogelijke design voordat we iets gaan coderen en dat steeds later moeten aanpassen.

De eerste heb ik kunnen vervullen aan het begin van het proces. Joppe (een teamlid) had al snel een design in figma kunnen bouwen waardoor we snel een redelijke UI konden laten zien in ons volgende gesprek met de klant. Ook als de klant aanpassingen wilde in latere gesprekken heb ik dit volgens het design kunnen nabouwen. Je kan namelijk in figma makkelijk alle afmeting kopieeren. Dit is erg handig als je in een team werkt. Figma doelt dan als een soort stylesheet waar je alles vandaan kan halen. Ook heb ik natuurlijk samen met mijn groepsleden "designers" kunnen bespreken hoe we het design beter te kunnen maken door het hele proces door. Hierbij gaf ik feedback en input op het design en kon ik dit onderbouwen met gemaakte prototypes en door mij veranderde designs in figma.

Het tweede leerdoel over object oriented programming heb ik zeker laten zien in dit project. Samen met Joppe wilde ik object oriented programming leren. Aan het begin van het project hebben we eerst wat research gedaan waardoor we meteen konden beginnen om het concept in objects uit te denken. Aan het begin hadden we de Node, Person en Post, Edge class bedacht. Daarvan zijn person en post een super van de Node. We begonnen er uiteindelijk niet de eerste week mee. Dit kwam omdat we elke week iets moesten laten zien aan de klant en wat we kregen van de klant was ook niet object oriented geschreven. We gingen dus eerst de makkelijkste dingen gingen tackelen. In week 2/3 zijn we begonnen met het omschrijven van de javascript. We hebben eerst alle functies die we hadden verdeeld over de classes, en daarna error voor error alles werkend kunnen krijgen. Dit was nog wel even een uitdaging maar uiteindelijk wel gelukt. Maar het grootste leerpunt komt nog. Dat is namelijk als je object oriented aan het schrijven bent, moet je alle dingen daarna ook object oriented schrijven. Dit zorgt voor consistentie en overzichtelijkheid in je main file. Maar dit hebben we dus niet gedaan. De classes Cursor, FileHandler, Onboarding, UserData en WebData zijn uiteindelijk nog in elkaar geknutseld en dit werkt erg goed. Op het einde van dit project hebben we nog hard gewerkt om ook een class te maken voor the telefoon maar die was zo dieb genest in de app.js dat het onmogelijk was om dit nog te doen voor de oplevering.

Hoe meer we met de klant spraken en onze nieuwe inzichten en designs lieten zien, hoe meer we ook ons design soms moesten aanpassen. Hierbij heb ik vooral geleerd hoe figma in elkaar zit, waar figma goed voor is en hoe je makkelijk designs kan aanpassen. Ik ben erchter gekomen dat figma alleen goed werkt als je een design hebt dat snel even aangepast moet worden. Tijdens een klant gesprek hoor je dan bijvoorbeeld dat hij het iets anders wilt, en in figma kan je dan heel makkelijk even het element van boven naar onder slepen om te kijken of de klant dat beter vindt. Verder zal ik figma niet gaan gebruiken en ook niet aanraadden om te designen. Dit kan je veel beter doen met schetsen, codepens en prototypes.

Mijn belangrijkste bevindingen van de weekly nerds

De sprekers die ik het meest interessant vond waren Kilian, Nils en Jeremy. Kilian had het over het niet gebruiken van Javascript als het ook met HTML en CSS kan. Hier was ik het zeker mee eens ook al vind ik het schrijven van Javascript juist super leuk. Daarbij noemde hij selectoren die nieuw voor mij waren zoals :has(), maar ook elementen zoals dialog en datalist. Daarna zei Kilian ook nog dat je niet steeds hetzelfde als dat je de vorige keer had gebruikt moet gebruiken maar juist moet kijken of er een nieuwe betere en snellere manier is. Dit is belangrijk omdat de technieken echt ontzettend snel vooruit gaan en voor je het weet een betere manier is om iets te doen. Dit bleef wel even hangen want het project voor deze minor had ik namelijk met Javascript een input gemaakt met opties waar je uit kon kiezen, en als je in de input aan het typen was zocht hij door die opties en kreeg je er steeds minder te zien. Dit kon dus veel makkelijker met een datalist.

Nils had het over layouts. Dat we alsmaar alles centreren op de websites en het veel leuker kunt maken om zoals op posters te designen. Hij liet voorbeelden zien die er heel visueel aantrekkelijk uitzagen en ook nog responsive waren. Dit opende mijn ogen en inspireerde mij om dus ook zo te denken en te kijken naar design. Maar ik ben niet heel visueel sterk en vindt het nog lastig om zulke layouts te bedenken, met dit in mijn achterhoofd geeft dit mij zeker meer inspiratie.

Jeremy had het vooral over de controle geven aan de browser. Browsers hebben namelijk heel veel natuurlijke gedragskenmerken en om daar zo veel mogelijk uit te halen met zo min mogelijk werk, moet je losjes zijn in de waardes die je mee geeft in de css op je website. Hier was ik het ook mee eens en ik vind ook dat websites er niet altijd perfect uit te hoeven zien, maar wel altijd goed moeten werken. Door zo te denken scheelt het tijd om de css te schrijven voor je website en dat vind ik juist wel fijn.