Ufuk's Weekly Nerd Blog

In de minor WDD wil ik mij focussen op het leren en maken van interactieve web applicaties met nadruk op interactieve.

Reflectie: hier heb ik mijzelf goed aan kunnen houden, vrijwel alles wat ik binnen deze minor heb gebouwd is interactief op HCD na. Bij WAFS zelf had ik een 2D BIT-like platform game gemaakt waar je mij kon besturen met de pijltjes. Voor CSS heb ik een Build a Character simulatie gemaakt met puur CSS, deze heeft interactiviteit van animaties tot feedforward vanuit een menu. Voor Browser Tech heb ik een interactieve formulier gemaakt die conditioneel vragen wel en niet toond aan de hand van de gebruiker zijn antwoorden. Voor API had ik wishlist project gemaakt waar je zelf items vanuit een API kan zoeken, filteren en wishlisten.

Ik ben geïnteresseerd in het verbeteren van mijn kwaliteit van code en professionele (werk)wijze. Het is belangrijk voor mij dat ik goed voorbereid ben voor de stage na de minor.

Reflectie: Mijn kwaliteit code is verbetert binnen deze Minor, zo heb ik voor CSS dingen zoals Nesting, Layer's en architectuur geleerd, maar ook herbruikbaarheid. Mijn HTML code kwaliteit is ook verbetert, vooral door het vak Browser Tech, waar progressive enhancement een must is, is semantische en clean code zeer belangrijk. Zo heb ik geleerd om eerst functionaliteiten te ontleden en de logica er voor te bedenken voordat ik maar wat probeer. Ook heb ik voor zowel HTML als CSS en JavaScript aardig wat nieuwe kennis op kunnen doen. Ik heb ook geleerd beter te plannen en hoe ik documentatie beter kan schrijven wat ik onder professioneel werkwijze zie.

Mijn voorkeur gaat uit naar het leren schrijven van clean code en het goed gebruiken van ES6, ook wil ik graag mijn CSS kennis wat uitbreiden met name de pseudo selectors zoals :has, :after etc.

Reflectie: Ik heb zeker wat cleaner leren coden, omdat ik nu wat meer ervaring heb opgedaan, sta ik wat sterker in mijn schoenen en is het makkelijker met het bedenken van goede class namen of variabelen en wanneer ik bijvoorbeeld moet camelCasen of kebab-casen. Voorheen stagneerde ik bij dat soort momenten. Voor ES6 heb ik wat kennis geleerd waardoor ik code nu korter kan schrijven dan voorheen, bijvoorbeeld het () => {}, of "items: items" naar "items,". Ik ben goed opweg naar het worden van een developer. De pseudo selectors heb ik veel mogen gebruiken bij het vak CSS To The Rescue, inmiddels heb ik dit ook onder de knie. Hier heb ik met Sanne ontzettend veel mogen sparren om mijn CSS vaardigheden te verbeteren. Ik heb van workshops tot aan experimentele CSS met Chrome Canary gebruikt om mijn kennis en vaardigheden uit te breiden.

Voor animatie zou ik ook graag mijn GSAP kennis en vaardigheid willen uitbreiden

Reflectie: Ik heb minder Motion-Design gedaan dan ik dacht dat ik zou doen. Wel heb ik nu meer CSS kennis om te zeggen dat ik niet specifiek GSAP wil leren, maar de logica van motion effects/design, want als ik de logica weet dan kan ik het repliceren, of het nou met CSS, GSAP of intersectionObserver. Ik had de mogelijkheid om wat meer motion design te leren als ik bij het VAK CSSTTR had gekozen voor de film opdracht, maar ik heb CSS geprioritiseerd, omdat mijn interesses daar meer neigde.

Achteraf heb ik mij best goed aan de leerdoelen kunnen houden en heb ik veel relevante kennis opgedaan in het proces daarvan. In deze korte 3 maanden tijd ben ik zeker verbeterd als developer maar ook als teamgenoot, engineer en student.

Update: Ik heb GSAP gebruikt voor de WeeklyNerd site om stagger animaties te creëren en ik heb een horizontal scroll kunnen creëren.

Samenwerken Situatie: We werken in een team samen om een opdracht van de opdrachtgever te voltooien. Taak: Ik wil leren hoe ik efficiënt samen kan werken met een team aan hetzelfde project. Dit bevat dus ook dingen zoals mergen en merge conflicts, maar ook logica om de code van anderen samen te voegenen de professionele werkwijze om dit goed te laten verlopen.

Code standaarden afspreken, benoeming afspreken, code reviews, meetings en taakverdeling.

We hebben een volwaardige project kunnen afronden samen die werkend is. Merge conflicts waren minder dan verwacht doordat we goed te werk gingen met branches, pullen en pushen. We hebben ervoor gekozen om de standaarden met elkaar af te spreken. Zo hebben we gekozen voor PascalCase voor components, kebabCase bij css-classes en camelCase voor functies. De code reviews waren bijna dagelijks (vanaf week 3) en we hebben meetings gehad met de opdrachtgever, maar ook de docenten.

Voorheen had ik bij de hackathon gemerkt dat dit toch een belangrijk punt is die ik kan verbeteren, omdat daar een hoop tijd weg ging aan merge conflicts. Achteraf ben ik tevreden met de behaalde resultaat voor deze leerdoel. Ik heb en geleerd hoe ik beter samen kan werken met mijn teamgenoten en ik voel me wat meer zelfverzekerd omdat ik ervaring op doe.

Schaalbare applicatie maken Situatie: Een applicatie maken die 'futureproof' is en makkelijk te schalen is voor uitbreidingen. Ik wil toch wat meer kennis en ervaring hebben met JavaScript, ik heb het gevoel dat mijn HTML en CSS kunsten goed zijn verbeterd, en dat het nu de beurt is voor JavaScript, ik wil graag leren hoe ik functionaliteiten beter schaalbaar en herbruikbaar kan maken om een project makkelijk uit te breiden. Hiermee bedoel ik dus dynamische pagina's maken inplaats van statische, met het gebruik van bijvoorbeeld een CMS of API.

Herbruikbare componenten maken waar het kan en goede onderverdeling van atomic design. Actie: Ik heb een IconButton kunnen maken die op 7 verschillende plekken staan in andere variaties. Ook heb ik een Filterbar gemaakt die vanuit de database de filters dynamisch bepaalt, dit is handig dus voor het uitbreiden. Ik heb ook de detail pagina gemaakt die dynamisch is, de data op de detail pagina is ook vanuit de database en wordt conditioneel wel of niet getoond als het veld leeg is.

De applicatie heeft een mooie structurering en het is een stuk duidelijker voor me hoe ik te werk kan gaan met Atomic design. We hebben het ontwerp gedeconstrueerd en hiervan bepaald welke componenten er nou herbruikt kunnen worden. Ook heb ik een dynamische detail pagina gemaakt die data ophaalt vanuit de API, dit heb ik ook nog eens geoptimaliseerd door velden weg te laten als er geen content is.

Dit is het leerdoel waar ik eigenlijk het meest het geleerd qua theorie. Niet alleen omdat ik SvelteKit en TypeScript heb zitten leren, maar ook omdat deze logica universeel is en weinig verandert tussen de frameworks. De IconButton componenten hebben verschillende states en wordt bijvoorbeeld automatisch een anchor link als we de href atribute mee geven. Zo hoeven we niet opnieuw een anchor te maken of een ander component. Ik heb ook weer kunnen werken met wat data en merk dat ik comfortabel begin te worden met complexere data display, zoals link knoppen, regex etc.

Schaalbare applicatie maken

Een applicatie maken die 'futureproof' is en makkelijk te schalen is voor uitbreidingen. Ik wil toch wat meer kennis en ervaring hebben met JavaScript, ik heb het gevoel dat mijn HTML en CSS kunsten goed zijn verbeterd, en dat het nu de beurt is voor JavaScript, ik wil graag leren hoe ik functionaliteiten beter schaalbaar en herbruikbaar kan maken om een project makkelijk uit te breiden. Hiermee bedoel ik dus dynamische pagina's maken inplaats van statische, met het gebruik van bijvoorbeeld een CMS of API.

Herbruikbare componenten maken waar het kan en goede onderverdeling van atomic design.

Ik heb een IconButton kunnen maken die op 7 verschillende plekken staan in andere variaties. Ook heb ik een Filterbar gemaakt die vanuit de database de filters dynamisch bepaalt, dit is handig dus voor het uitbreiden. Ik heb ook de detail pagina gemaakt die dynamisch is, de data op de detail pagina is ook vanuit de database en wordt conditioneel wel of niet getoond als het veld leeg is.

De applicatie heeft een mooie structurering en het is een stuk duidelijker voor me hoe ik te werk kan gaan met Atomic design. We hebben het ontwerp gedeconstrueerd en hiervan bepaald welke componenten er nou herbruikt kunnen worden. Ook heb ik een dynamische detail pagina gemaakt die data ophaalt vanuit de API, dit heb ik ook nog eens geoptimaliseerd door velden weg te laten als er geen content is.

Dit is het leerdoel waar ik eigenlijk het meest het geleerd qua theorie. Niet alleen omdat ik SvelteKit en TypeScript heb zitten leren, maar ook omdat deze logica universeel is en weinig verandert tussen de frameworks. De IconButton componenten hebben verschillende states en wordt bijvoorbeeld automatisch een anchor link als we de href atribute mee geven. Zo hoeven we niet opnieuw een anchor te maken of een ander component. Ik heb ook weer kunnen werken met wat data en merk dat ik comfortabel begin te worden met complexere data display, zoals link knoppen, regex etc.

Database onder de knie krijgen Situatie: Er is nog weinig/gering data en dit moet aangevuld worden, onze opdrachtgever is niet technisch, maar kan wel bij de data en aanpassingen doorgeven voor ons. Als we geen datastructuur bepalen wordt het vrij lastig om dit project futureproof te maken, doordat de structuur van de huidige database niet bepaald fijn is om mee te werken. Dit kan ons limiteren in bijvoorbeeld kaart relaties, maar ook onderverdeling. Ik zou graag wat meer willen leren het structureren en implementeren van een CMS/database, Ik heb nog amper ervaring met een CMS en vind dit belangrijk voor mijn persoonlijke developer leerdoelen, vooral als toekomstige freelancer waarbij ik zelf de content van de klant zou moeten structureren. Ik wil over het algemeen een beter begrip hebben van professioneel informatie architectuur, dit bevat de logica, tot de aanpak en het schalen van het project met meer data.

We moeten de structuur bepalen van de database zodat we goede data terug krijgen. We moeten aan de hand van de UX en design bepalen welke velden we nodig hebben en welke velden we weg moeten laten.

We hebben contact opgenomen met Ronald die ons doorverwees naar Krijn. We hebben aan krijn gevraagd of we toegang kunnen krijgen tot de API en vragen ook of hij toegang heeft tot de CMS van Directus. Een CMS is handig omdat Ronald zijn .csv bestand er in zou kunnen stoppen en wij de nieuwe data direct zouden kunnen gebruiken. Vervolgens hebben we met Ronald bepaald welke velden er wel of niet in ons ontwerp hoort te zitten.

We hebben zeker zeggenschap gehad over de CMS en structurering van de data, de huidige database is alleen niet perfect. Dit komt doordat er velden zijn die in de toekomst verwijderd zullen worden, en wij de kaart relaties hierdoor niet konden verdelen. We hebben ons best gedaan om nog zo ver mogelijk met de huidige data te komen. Zo heb ik een failsafe gemaakt voor de bron links. Momenteel worden er 2 of meer links gestopt in hetzelfde veld, wat ongebruikelijk is en snel kan zorgen voor fouten. Maar hier hebben wij er dus voor gezorgd dat we met wat regex toch de links kunnen splitten en displayen. Hetzelfde geld ook voor de docenten gerelateerd aan het vak. Reflectie: Data structurering kan het best zo vroeg mogelijk aangepakt worden zodat je later niet tegen limitaties zit. Wel heb ik een beter begrip gekregen van hoe dit moet en weet ik voor de volgende keer beter hoe dit in zijn werking zou moeten gaan. Dingen zoals meerdere value's in 1 veld stoppen zal ik dus voortaan niet meer goedkeuren. Ik heb eindelijk een CMS aangeraakt en begrijp nu de mogelijkheden die zowel voor de klant als developer handig zijn.