Journal

Sprint 1: Your Tribe

Datum: 4/9/24

wat heb ik vandaag gedaan?

vandaag heb ik een breakdown schets gemaakt dat is een schets van de website die ik wil bouwen. met daarin elementen die ik zou kunnen gebruiken.

Ik heb ook gewerkt aan mijn visitekaartje. Ik heb een list toegevoegd mbv. dt en dd Deze tags waren in de template code. Ik heb ze nu aangepast en op een nieuwe manier ingedeelt m.b.v. een ul.

Wat wil ik nog uitzoeken:

in mijn list als ik hover over text wil ik een pop up tevoorschijn laten komen. In die pop up wil ik vertellen hoe ik de programeertaal heb geleerd en hoe goed ik ben daarin

Verwijzingen:

breakdown schets 1 en 2breakdown schets 3

Sprint 1: Your Tribe

Datum: 8/9/24

wat heb ik vandaag gedaan?

Vandaag heb ik gewerkt aan mijn I love web. Ik heb de structuur ingedeeld. Ik wil nog niet teveel zetten omdat ik weet dat ik meer zal leren over html en css. Ik wil niet vanaf het begin iets hebben dat moeilijk te lezen is, daarom heb ik het voor nu simpel gehouden.

Ik heb nu een home pagina, en een semester pagina waar alle sprints voor semester 1 staan. Ik kan nu mijn day journal bijhouden en foto's toevoegen.

Wat wil ik nog doen?

Ik ben van plan om elke dag screenshots te maken voor een time vault, zodat ik kan zien hoe de website door de dagen heen veranderd.

Sprint 1: Your Tribe

Datum: 9/9/24

Wat hebben we gedaan?

team gemaakt met Dylan en Colin voor de squad page groeps opdracht. op miro doelen en regels voor het project gemaakt

iedereen heeft een paar breakdown schetsen gemaakt. Daarna hebben we overlegd en geprobeerd om de ideeën van elkaar te combineren voor een final versie van de breakdown schetsen

Daarna ben ik alvast begonnen met het bouwen van de squad page. Ik heb nu de grid layout voor onze foto's.

Verwijzingen:

breakdown schets squad page individueelbreakdown schets squad page samengevoegdsquad page versie 1

Sprint 1: Your Tribe

Datum: 10/9/24

wat heb ik geleerd?

Ik heb geleerd waarvoor ik grid kan gebruiken en hoe ik grid beter kan indelen. 2 dingen interessant? Ik heb voorheen alleen met grid-template-columns grid-template-rows gewerkt. Daarna heb ik alles individuëel ingedeeld. Maar nu weet ik dat ik met grid-template-areas, hetzelfde makkelijker kan doen.

Ik ging heel vaak div gebruiken in mijn code, Maar ik heb nu door dat dat bijna niet nodig is. i.p.v een div te gebruiken geef ik nu een class aan het element waar ik mee werk.

wat wil ik nog doen?

een pagina maken waar ik al mijn foto's kan laten zien. en dan kan ik vanuit mijn journal naar de foto's linken, waar dat nodig is.

Sprint 1: Your Tribe

Datum: 11/9/24

wat heb ik geleerd?

Responsive maken voor telefoon en tablets met mediaqueries

dingen die ik interessant vond?

Je kan media query nesten i.p.v helemaal onderaan in je code. Zo kan je code overzichtelijk blijven.

Waaraan heb je gewerkt vandaag?

Vandaag hebt ik aan een layout voor een foto collage gewerkt met grid. De indeling is af. Ik heb met mijn team foto's gemaakt rond Hva amstel campus. De foto's zijn in de meeste gevallen te klein voor de grid vakjes die ik nu heb. De grid moet ik nu aanpassen naar de formaat van de foto's.

Ik heb ook gewerkt aan een side scroller. Ik heb geprobeerd het zonder JavaScript te maken, dat was wel gelukt. Maar ik kreeg het niet op de juiste plek. Uiteindelijk heb ik wel JavaScript gebruikt, maar mijn JavaScript is wel heel simpel gebleven.

Verwijzingen:

Side scroller

Sprint 1: Your Tribe

Datum: 12/9/24

Waaraan heb ik gedaan vandaag?

Ik heb vandaag gewerkt aan een campus pagina voor de squad page. hierin willen we locatien van amstelcampus met openingstijden en locaties van de HvA gebouwen en toevoegen.

Ik moet meer met class gaan werken, vooral als je samen gaat werken met anderen. Ik probeerde vandaag mijn code toe te voegen met die van Dylan. Maar omdat ik met header, article, ul, en li ging werken, ontstonden er problemen met onze css. Ik moet nu mijn html en css aanpassen zodat ik het later makkelijker kan samenvoegen met de code van mijn teammates.

Verwijzingen:

campus pagina

ideeen voor mijn eigen i love web: vasilis.nl

Sprint 1: Your Tribe

Datum: 13/9/24

Wat heb ik gedaan vandaag?

Vandaag heb ik gewerkt aan de opmaak van mijn squad page. Ik had met de html checker 2 problemen gevonden in mijn code, die heb ik ook gelijk opgelost.

Wat wil ik nog doen?

Ik wil mijn css voor I love web aanpassen, zodat alles aangepast wordt met class naam i.p.v de tag naam. Ik wil ook aan mijn afbeeldingen page beginnen.

Sprint 1: Your Tribe

Datum: 14/9/24 en 15/9/24

Wat heb ik gedaan vandaag?

Ik heb vandaag mijn html class names gegeven. Nu zal ik geen problemen meer hebben als ik bijvoorbeeld een nieuwe grid of tabel een andere stijl wil geven.

Ik heb een web pagina gemaakt waar ik mijn foto's kan laten zien. Deze pagina is af, ik moet alleen nog foto's toevoegen.

Sprint 1: Your Tribe

Datum: 16/9/24

Wat heb ik gedaan vandaag?

Ik heb met figma gewerkt. Nu heb ik mijn squad page nagemaakt. wat ik nog moet doen is, nieuwe versies met verschillende kleuren en lettertypes maken. Ik heb geleerd hoe ik met figma kan werken. Nu weet ik dat figma heel handig is om verschillende concepten te maken, en ze met elkaar vergelijken.

Sprint 1: Your Tribe

Datum: 17/9/24

Wat heb ik gedaan vandaag?

We zijn bezig geweest met mergen voor de squad page. Vandaag heb ik aan de campus pagina gewerkt. De informatie die op de pagina komt heb ik al toegevoegd. Ik ben nog niet helemaal tevreden met de stijl van mijn grid, daar zal ik morgen verder aan werken. De kleuren moeten ook nog aangepast worden, maar daarvoor moet ik nog overleggen met Dylan en Colin.

Verwijzingen:

Campus pagina v1

Vandaag hadden we ook een CSS college. Daarna hadden we 2 oefeningen met css transities en transformaties. De eerste heb ik af, met de tweede moet ik nog beginnen.

Sprint 1: Your Tribe

Datum: 18/9/24

Wat heb ik gedaan vandaag?

Vandaag heb ik de campus pagina voor onze squad page afgemaakt. Er was een klein probleem in mijn grid, waardoor een stuk tekst niet te zien was. Dat is nu opgelost. Ik had ook een probleem met de foto's, ze waren niet allemaal even groot. Dat heb ik kunnen oplossen met min-width, min-height en object-fit: cover. Ik heb ook aan de tabellen op de detailpagina gewerkt, die zijn ook af. Als laatst had ik vandaag de campus pagina ook responsive gemaakt.

Wat wil ik nog doen?

Er zijn een paar foto's op de detailpagina die in de breedte zijn gemaakt. Op die plekken hebben we portretfoto's nodig. Morgen zal ik een paar nieuwe foto's maken.

Sprint 1: Your Tribe

Datum: 19/9/24

Wat heb ik gedaan vandaag?

Vandaag heb ik het laatste probleem met visitekaartje opgelost. De terugflip werkte niet, omdat backface-visibility op hidden stond, waardoor ik niet opnieuw kon klikken om de kaart terug te draaien. Nu heb ik in JavaScript een timer van 4 seconden ingesteld. Na die 4 seconden draait mijn visitekaartje automatisch terug. De transities heb ik ook wat vloeiender gemaakt op mijn visitekaartje. Als laatste heb ik mijn I love web aangevuld met foto's en daily check-outs.

Verwijzingen:

Visitekaart final

Sprint 1: Your Tribe

Datum: 20/9/24

Wat heb ik gedaan vandaag?

Vandaag heb ik de foto's op mijn Picture Vault-pagina beter geordend. Ik heb ook alle foto's en screenshots die ik nog miste toegevoegd. Daarnaast heb ik links vanuit mijn journal naar de Picture Vault toegevoegd. Ik ben nog niet helemaal tevreden met de indeling van de Picture Vault-pagina. Ik ben van plan om een paar foto's te verwijderen en de rest per sprint in te delen, zodat de pagina sneller laadt.

Sprint 1: Your Tribe

Datum: 21/9/24

Wat heb ik gedaan vandaag?

Ik heb vandaag nieuwe fotopagina's gemaakt. In plaats van één pagina met alle foto's, heb ik nu één pagina per opdracht (visitekaart, I love web, squad page). Ik heb ook meteen de links van mijn journalpagina naar de foto's gemaakt. Hiervoor heb ik 'id' tags gebruikt.

Sprint 2: The Client

Datum: 23/9/24

Wat heb je gedaan?

Ik heb Mediahuis gekozen als mijn project. Mediahuis is een bedrijf met meerdere radiozenders. Het frontend bedrijf Triple heeft de opdracht aangenomen en bevindt zich inmiddels in de laatste fase van het project. Triple is mijn opdrachtgever, en zij willen dat ik hun website nabouw. Vervolgens moet ik er iets creatiefs aan toevoegen of aanpassen. Dit kan een nieuwe interactie, een andere stijl, of een aangepaste layout zijn.

3 dingen die ik heb gedaan?

Ik heb een project uitgekozen. Ik heb geleerd hoe ik me moet voorbereiden op een briefing. Ik weet nu wat een debriefing is en hoe ik die moet aanpakken.

2 leervragen voor deze week

Hoe kan ik deze week de website van Veronica, een zender van Mediahuis, op een semantisch correcte manier namaken?

Verwijzingen:

Triple repository

Sprint 2: The Client

Datum: 25/9/24

Wat heb ik vandaag gedaan?

Vandaag heb ik prototypes gemaakt. Dit is onderverdeeld in sitemaps, wireframes en wireflows. Daarna heb ik High Fidelity (HiFi) prototypes gemaakt, die kunnen worden gemaakt met programma's als Figma.

Wat moet ik doen voor aanstaande vrijdag?

Voor aanstaande vrijdag moet ik semantisch correcte HTML-code schrijven voor de website die ik wil gaan bouwen.

Wat wil ik zelf nog doen?

Wat ik zelf nog wil doen, is mijn HiFi-prototype in Figma afmaken en breakdown-schetsen maken in mijn wireframes.

Sprint 2: The Client

Datum: 27/9/24

Stel drie vragen over wat je hebt geleerd over HTML:

Waarom wil je geen div in je HTML? Waarvoor zou je wel een div kunnen gebruiken?

Vandaag heb ik met Dylan code reviews geschreven voor:

Code review Amber Code review Fatima Code review Clarice Code review Cederik

Wat heb ik geleerd over HTML:

Wat ik heb geleerd over HTML is dat een section en article verplicht een h element nodig hebben. Ik heb niet overal bepaalde elementen nodig, meestal is het parent-element al genoeg. In mijn geval heb ik dan geen section nodig om mijn article in te delen, omdat ze al in de main staan.

Sprint 2: The Client

Datum: 30/9/24

Wat heb je vandaag gedaan?

Vandaag heb ik geleerd wat de verschillen zijn tussen flow, grid, flexbox, positioned, float, multi-column en table layout.

Wat heb je vandaag geleerd?

Vandaag heb ik geleerd dat HTML-elementen standaard een layout hebben, die je met CSS kunt veranderen. Ik heb geoefend met layouts zoals grid, float en flow.

De layouts die ik zal gebruiken voor de client website zijn

Grid, flex en position. Ik gebruik grid voor de grote indeling van mijn website, flex om de elementen in de grid areas te plaatsen, en position voor kleine aanpassingen.

Verwijzingen:

link naar de layout deeltaak

Sprint 2: The Client

Datum: 07/10/24

Drie Codeconventies van Vandaag:

Indenten van HTML-code zorgt voor een duidelijke hiërarchie en verbetert de leesbaarheid.
Het nesten van CSS-selectors zorgt voor beter leesbaarheid, en je kan direct zien wat de parent en child elementen zijn.
CSS op dezelfde volgorde als HTML structuur voor eenvoudiger onderhoud.
Nesten van media queries dit laat zien hoe de stijl verandert bij verschillende schermformaten.

Twee Punten om de Leesbaarheid van HTML en CSS te Verbeteren:

Witruimtes tussen HTML-elementen zorgt voor ademruimte en overzichtelijkheid.
Class names gebruiken om verschillen tussen dezelfde elementen te zien.

Conventies om te Implementeren in Mijn Eigen Code:

Ik zal CSS-selectors nesten voor betere leesbaarheid en duidelijkheid.
Ook blijf ik zorgen dat mijn HTML en CSS in dezelfde volgorde zijn voor betere organisatie.

Sprint 2: The Client

Datum: 09/10/24

Doel van de Sprint Review

Het doel van een sprint review is om de opdrachtgever te laten zien wat je deze sprint gedaan hebt en om feedback te krijgen. Ook informeer je de opdrachtgever over wat je in de komende sprint zal doen.

Drie leervragen over de Les van Vandaag:

Hoe verwerk je feedback van een sprint review?
Wat laat je zien tijdens een sprint review?
Hoe schrijf je een ReadMe?

Wat Doe je na een Sprint Review

Na een sprint review verwerk je de feedback door nieuwe issues aan te maken.

Sprint 3: All human

Datum: 14/10/24

Wat heb je vandaag gedaan en geleerd?

Vandaag heb ik geleerd dat er regels zijn voor websites die ervoor zorgen dat accessibility-tools goed kunnen functioneren. Ik heb ook geleerd wat een Lighthouse-test is en hoe ik deze kan uitvoeren.
De Lighthouse-test kan niet alles testen, daarom zijn handmatige testen ook nodig. Ik heb de A11y-test gebruikt om te controleren of mijn website toegankelijk is.

Schrijf op wat je nog moet doen voor WCAG van woensdag

Voor de WCAG van woensdag moet ik nog de handmatige testen uitvoeren en mijn bevindingen opschrijven.

Sprint 3: All human

Datum: 16/10/24

Wat heb je vandaag gedaan en geleerd?

Vandaag heb ik een WCAG-audit gepresenteerd voor de Koffiesalon, het café waar ik werk. Daarnaast heb ik een user experience-workshop gedaan en gewerkt aan mijn "I Love Web"-project, waarin ik een nieuwe HTML-structuur heb opgezet voor betere toegankelijkheid.

Drie dingen die ik heb geleerd:

hoe een website toegankelijker gemaakt kan worden door goede HTML met juiste labels, alt-attributen en een heldere heading-structuur.
Screen readers moeilijk kunnen navigeren zonder ARIA-attributen.
En hoe ik Polypane kan gebruiken voor het testen van toegankelijkheid.

Beschrijf alle 6 onderwerpen uit de workshop en noteer welke je toe kan passen in je opdracht

Links:

een anchor tag kan je gebruiken om veel te doen: verwijzen naar een andere site, een id op dezelfde pagina, of om iets te laten downloaden. een anchor tag biedt meer functies aan dan een button

Afbeeldingen:

img heeft een passende alt attribute nodig, omdat het dan een stuk tekst laat zien als het niet ingeladen wordt. En zodat een screen reader kan aangeven wat voor soort foto daar staat.

Labels voor invoervelden:

als er een label om een input veld is, dan kan de gebruiker makkelijk op de input veld klikken. de gebruiker kan op de tekst van de input veld klikken en beland in de input veld, of tikt de checkbox aan. als er geen label was dan zou de gebruiker precies moeten klikken op het kleine input veld.

Informatie en accordeons:

accordeons kunnen informatie bevatten die alleen te zien is als er op iets geklikt word. bijvoorbeeld 'meer info' als hierop geklikt wordt komt er een stuk tekst eronder met uitleg.

Pop-ups:

een pop up is iets dat op de website tevoor schijn komt. dit kan gebruikt worden voor inloggen, een formulier invullen of als advertenties.

Headings:

heading worden gebruikt om de pagina een structuur te geven, net als een inleiding van een boek. h1 is je tietel h2 een onderdeel van de h1 h3 gaat dieper op h2 in h2 een ander onderdeel van h1
Ik kan links, afbeeldingen en headings toepassen in de website van de opdrachtgever

Sprint 3: All human

Datum: 18/10/24

Wat heb je vandaag gedaan en geleerd?

Ik heb samen met Amber code reviews geschreven voor de projecten van Robin, Colin, Fatima en Iris. Hier zijn de links naar de reviews:
Robin Colin Fatima Iris

Daarnaast heb ik feedback gevraagd op mijn design bij de twee mentoren.

Mijn designs waren duidelijk en er waren weinig verbeterpunten nodig.

Neem de uitbreiding van de checklist code-review toegankelijkheid over in je learning log en leg kort uit hoe je deze getest hebt.

Het contrast tussen achtergrond en tekst: ik had witte tekst op een lichtblauwe achtergrond, wat er voor mij duidelijk uitzag. Met een contrast checker heb ik gezien dat het contrast te laag is.

Sommige HTML elementen hebben verplicht een bepaalde child element nodig, zoals:

Section en article moeten een h element bevatten, ul en ol hebben li elementen nodig.

Kijken of de focus duidelijk is.

Door de tabben door mijn website heb ik gekeken of het duidelijk is waarop de tab nu gefocust is.

Sprint 3: All human

Datum: 21/10/24

Wat heb je vandaag geleerd?

Niet iedereen ziet hetzelfde, als frontender moet je rekening houden daarmee.

Ik heb vandaag uitgevonden wat keyframes zijn in CSS.

Ik zocht naar een manier om animaties uit te voeren op mijn articles. Met keyframes kan ik de article eerst uit beeld plaatsen, en daarna in beeld brengen met een transform.
Keyframes in mijn code

Sprint 3: All human

Datum: 23/10/24

3 dingen die je vandaag hebt gedaan

Ik heb mijn laptop zonder muis of trackpad gebruikt en keyboard shortcuts opgezocht. Daarnaast heb ik een sprint review voorbereid voor morgen met de opdrachtgever.
Ik heb uitgezocht wat de JavaScript Intersection Observer is en hoe deze werkt, voor mijn I Love Web.
Intersection observer in mijn code

Beschrijf 2 verbeteringen die je in je readme hebt gemaakt

Ik heb een QR-code toegevoegd, zodat de website makkelijker op een telefoon bekeken kan worden. Ik heb ook uitgelegd hoe de website werkt, zodat gebruikers beter begrijpen wat het al kan doen.

Schrijf 1 ding die je anders gaat aanpakken tijdens de komende sprint

Op 1 issue concentreren, niks ernaast doen. Ik heb vaker gehad waar ik een nieuw probleem tegen kwam terwijl ik al bezig was met een issue. Dan probeer ik het nieuw probleem eerst op te lossen, daarna ga ik verder met de vorige issue. Als ik daarna een commit push, en de issue eraan link, is er veel veranderd dat niet met die issue te maken had. Ik zal komende sprint nieuwe issues maken i.p.v het gelijk op te lossen.

Sprint 4: Look and Feel

Datum: 11/11/24

Documenteer wat je vandaag hebt gedaan

Vandaag hebben we de styleguide deeltaak gehad. Hiervoor moeten we eerst een style guide maken met de team die dezelfde opdrachtgever heeft. Daarmee kunnen we een style guide maken, waarmee we deze sprint verder zullen werken.
De style guide en style sheet die ik met Julia en Robin heb gemaakt
Style guide
Style sheet

3 dingen die je hebt geleerd

Elk bedrijf heeft een huisstijl.
Styles guide maken.
Ik heb vandaag geleerd dat elk bedrijf een eigen huisstijl heeft. Als frontender moeten wij rekening houden hiermee. Voor elk project wordt er eerst een stijle sheet gemaakt m.b.v een style guide. Dit wordt gedaan om ervoor te zorgen dat iedereen binnen het team dezelfde stijl gebruikt.

Hoe pak je met je team deze opdracht aan?

We hebben na de les besloten om er direct aan te werken. In een Figma-bestand hebben we een interface inventory gemaakt. Hier hebben we gezien dat iedereen een andere stijl had voor dezelfde elementen.
Daarna hebben we een style guide gemaakt. Hiervoor hebben we de huisstijl van Radio Veronica overgenomen. We hadden door dat het overzetten van de style guide naar een style sheet snel gedaan kon zijn, dus we hebben dat ook direct gedaan.
Thuis zal ik de classnames in het HTML zetten, met ook wat beschrijving.
We moeten nog een beslissing maken of we een andere typografie zullen gebruiken voor de mobiele versie van de desktop. Nu hebben we alleen een style sheet voor de desktopversie. We zullen eerst werken met de style sheet die we nu hebben, als het niet goed eruit ziet, zullen we bespreken hoe we een mobiele versie gaan maken.

Waar gaan we afspraken bijhouden?

We hebben besloten om onze afspraken in de ReadMe van look-and-feel-styleguide bij te houden. De reden waarom ik heb voorgesteld om het in de ReadMe bij te houden is; de ReadMe is makkelijker om de afspraken op te zoeken, omdat we vaker in de repository bezig zijn.
Afspraken

Sprint 4: Look and Feel

Datum: 12/11/24

Wat heb je vandaag gedaan?

Vandaag heb ik breakdown schetsen gemaakt voor een nieuwe mobiele en desktop website. In deze nieuwe designs heb ik rekening gehouden met wat de opdrachtgever als feedback had gegeven tijdens de laatste sprint:
  • Mobiel:
    • Alle radiozenders in 1 oogopzicht
  • Desktop:
    • 1 lijst voor de tijdlijn
    • 1 lijst voor de weekdagen

Wat heb je vandaag geleerd?

Ik heb vandaag ook een Figma-workshop gehad. Hier hebben we een bestaande template aangepast. Dit heb ik na de workshop ook gedaan voor mijn website. Ik heb de Figma van Triple genomen, elementen verplaatst, toegevoegd en veranderd. Ik had door dat in dit Figma gewerkt werd met frames en daarin nog meer frames, ik kon die elementen niet aanpassen (text en kleur). Ik heb voor nu de elementen binnen de frames gekopieerd en geplakt op een figuur, en het daarna tot een group gemaakt.

Wat ga je morgen doen?

Morgen ga ik beginnen met het bouwen van mijn HTML.

Sprint 4: Look and Feel

Datum: 13/11/24

Wat heb ik vandaag gedaan?

Robin is gestopt met de opleiding, dus Julia en ik gaan verder werken aan onze gezamenlijke stylesheet. We hebben nieuwe namen bedacht voor sommige classes. We hebben nu alle kleuren als variabelen opgeslagen in een class en we hebben aparte classes voor het veranderen van color, background-color, font-size, enz. Dus we hebben altijd twee classes nodig om iets te veranderen.
GitHub gezamenlijke stylesheet

Voorbeeld

Om de achtergrondkleur aan te passen, heb je eerst de class brand-primary nodig. Deze kan de background-color veranderen, maar zelf heeft deze geen kleur. Je hebt dan ook de background-color-veronica nodig, deze class heeft alleen de kleur. Als deze twee classes op één element staan, verandert de achtergrondkleur.

Als we de kleur willen veranderen, hoeft dit alleen in background-color-veronica gedaan te worden.
voorbeeld

Wat heb ik geleerd?

- Ik heb geleerd hoe ik gebruik kan maken van twee classes om één element aan te passen. Het is lastig om te begrijpen, maar als ik later iets wil aanpassen, is het een stuk makkelijker.

- Ik heb ook geleerd dat er een soort rank is tussen style attributes, ID's, classes en elementnamen. Als er een kleur is op een element en hetzelfde element krijgt met ID een andere kleur, dan wordt de kleur van de ID toegepast.

Sprint 4: Look and Feel

Datum: 18/11/24

Wat heb ik vandaag gedaan?

Vandaag heb ik een custom font gemaakt.

Font-family en Fallback

Ik heb geleerd dat er meerdere fonts op een website kunnen zijn. Met font-family krijg je een fallback, wat betekent dat als je laptop of browser de eerste font niet kan lezen, dan wordt de tweede font in de font-family gebruikt. Voorbeeld: font-family: "Times New Roman", Times, serif;

Absolute en Relative units in CSS

Ik heb geleerd dat er in CSS absolute en relative units zijn. Van de absolute units gebruiken we alleen px voor het web. Relative units zijn afhankelijk van een ander element.

Absolute length units

centimeters(cm): In CSS, 1cm is roughly 37.8 pixels, or about 25.2/64 of an inch.
millimeters(mm): In CSS, 1mm is roughly 3.78 pixels, or 1/10th of a centimeter.
inches(in): In CSS, 1in is roughly 96 pixels, or about 2.54cm.
points(pt): In CSS, 1pt is roughly 1.3333 pixels, or 1/72th of an inch.
picas(pc): In CSS, 1pc is roughly 16 pixels, or 1/6 of an inch.
pixels(px): meer over px

Relative length units

em: Relative to the font-size of the element (2em means 2 times the size of the current font) meer info
ex: Relative to the x-height of the current font (rarely used)
ch: Relative to the width of the "0" (zero) meer info
rem: Relative to font-size of the root element meer info
vw: Relative to 1% of the width of the viewport
vh: Relative to 1% of the height of the viewport
vmin: Relative to 1% of viewport's* smaller dimension
vmax: Relative to 1% of viewport's* larger dimension
%: The % unit sets the font-size relative to the current font-size

Meer info over CSS units

meer info over css units:
meer info over css units

Sprint 4: Look and Feel

Datum: 21/11/24

Wat heb ik gedaan?

- De layout voor de mobiele website afgemaakt
- JavaScript om alle details op display none te zetten als 1 open gaat
- JavaScript om de tijd, weekdagen player en de nav op beeld te brengen als 1 detail open gaat
- JavaScript om met een button een nav op beeld te laten sliden.

Start desktop layout

Ik heb een start gemaakt aan de desktop layout.

Wat wil ik morgen doen?

Verder gaan met de desktop layout, en proberen dat af te maken.

Sprint 4: Look and Feel

Datum: 22/11/24

Wat heb ik gedaan?

Scroll snap van Sanne toegepast met JavaScript voor de section scroll snap. Als er op een radiozender geklikt wordt, gaat het open en naar het midden.

Desktop layout

De desktop layout is af. Voor de desktop versie moet ik alleen nog de gezamenlijke stylesheet gebruiken voor de opmaak van de elementen.

Wat wil ik nog doen?

De scroll snap nog beter maken. De scroll snap gaat nu naar het midden. Ik wil dat het vlak onder de tijdlijn terechtkomt.

Programma kaartjes

De tekst in de programma kaartjes wil ik invullen zodat het overeenkomt met wat er nu is op de website van de radiozender.

Sprint 4: Look and Feel

Datum: 26/11/24

Gestalt Principles

De les van vandaag ging over gestalt Principles. Hier is een korte samenvatting daarover.

Law of Common Region

Een border om een element of een groep van elementen is een manier om common region te maken.

Common region helpt gebruikers om snel te zien wat bij elkaar hoort, en om de relatie te zien tussen elementen en sections. Een border om een groep van elementen laat zien dat ze bij elkaar horen, en het laat ook zien waar iets nieuws gaat beginnen.

Bijvoorbeeld

In mijn I love Web heb ik een background-color die langzaam over gaat naar een andere background-color. Dit heb ik gedaan om te laten zien dat we over gaan naar daily checkout van de volgende sprint.

Meer uitleg: Klik hier

Law of Proximity

Elementen die dichtbij elkaar staan worden door gebruikers waargenomen als een groep. In webdevelopment kan je dit doen door margins en padding toe te voegen zodat er meer of minder wit ruimte is tussen elementen. Dit helpt gebruikers om te zien wat bij elkaar hoort.

Voorbeeld

Een form met 12 input velden onder elkaar lijkt op veel werk om in te vullen, maar als we ze verdelen in 3 sections van 4 input velden dan lijkt het makkelijker.

Als proximity te groot is tussen elementen, dan kan het zijn dat bepaalde elementen, die belangrijk zijn, niet gezien worden omdat de whitespace te groot is.

Meer over Law of Proximity: Klik hier

Meer uitleg: Klik hier

Law of Similarity

Elementen die op elkaar lijken worden gezien als elementen die iets met elkaar te maken hebben. Elementen die anders eruit lijken worden gezien als of het om een ander onderwerp gaat.

Voorbeeld

h1, h2 en alineas geeft structuur aan je website. Het laat zien een paar alineas bij 1 titel/subtitel behoort. Dit zorgt voor overzichtelijkheid en helpt de gebruiker om de informatie snel te verwerken.

Meer over Law of Similarity: Klik hier

Meer uitleg: Klik hier

Sprint 4: Look and Feel

Datum: 28/11/24

Wat heb ik vandaag gedaan?

Ik heb een readme gemaakt. Hier in heb ik uitgelegd hoe de website nu werkt. ReadMe

Ik heb ook een website gemaakt voor het uitleggen van onze gezamenlijke stylesheet. Het heeft niet veel tekst omdat het bedoelt is om tijdens een presentatie uit te leggen. stylesheet uitleg

Sprint 5: Fix the Flow

Datum: 02/12/24

Wat heb je gedaan?

Sprint planning gemaakt. Begonnen met een road map in mijn project board. Ik heb de planning van sprint 5 overgenomen in mijn road map. Dit lijkt op een drukke sprint, dus ik heb ook gelijk toegevoegd dat ik tussen maandag en dinsdag schetsen, html first, en mobile first gedaan wilt hebben.

User story

Ik heb een user story en wireflow gemaakt, voor een javascript interactie die ik in deze sprint wil gaan maken. user story issue

Hoe ver ben je met de deeltaak JS fundamentals?

Ik heb de eerste gedaan over variables. Dit stukje ken ik al, ik zal door de eerste paar oefeningen heen gaan totdat ik wat moeilijkere opdrachten tegen kom.

Sprint 5: Fix the Flow

Datum: 04/12/24

Vandaag hadden we deze JavaScript workshop:

Vandaag hadden we deze JavaScript workshop: JS workshop Ik heb de interactie die ik wil maken al, en de schetsen en breakdown schet ook. Ik wil eerst de HTML en mobile first maken voordat ik met JavaScript begin.

Wat heb ik gedaan?

HTML first af HTML first issue mobile first af, zonder JS mobile first issue

Wat ga ik nu doen?

Beginnen met JavaScript, dit zijn de issues waar ik bij hou wat ik met JavaScript aan het doen ben. JS issue: mobile nav JS issue: remove hidden

Sprint 5: Fix the Flow

Datum: 05/12/24

Wat heb ik gedaan?

Ik heb mobile CSS afgemaakt en ook de classes van de gedeelde stylesheet in de HTML toegevoegd. mobile CSS

Wat heb ik gedaan?

Ik heb JavaScript geschreven die de weekdagen, tijdlijn, radio nav en de player op beeld brengen. JS issue: remove hidden

Wat heb ik gedaan?

Ik heb JavaScript geschreven voor het verwisselen van radiozender, maar er is nog een bug, waar soms de class 'hidden' niet weggehaald wordt. Als dit gebeurt dan is er geen programma te zien. JS issue: mobile nav

Wat ga ik nu doen?

Voor nu ben ik klaar met de mobiele versie, ik ga nu concentreren op CSS en JavaScript voor de desktop versie.

Sprint 5: Fix the Flow

Datum: 09/12/24

Hoeveel van de 10 experimenten heb je al gemaakt?

Ik heb 5 van de 10 af, deze heb ik nu gebruikt:
- mouseover
- click
- dblclick
- mousemove
en nog een click die samen werkt met e.ctrlkey. link naar de live site

Bij welk gedragscriterium past deze deeltaak en wat moet je nog doen om het te kunnen toevoegen aan portflow?

- Dit past bij methodisch handelen, omdat ik op basis van wat ik nu heb geleerd deze UI-events kan gebruiken op de volgende websites die ik ga maken.
- Dit past ook bij probleemoplossend vermogen, omdat ik tijdens het oefenen/uitzoeken van deze UI-events een creatieve manier heb gezocht om hiervan gebruik te maken.

Links:

UI events opdracht UI events keyboard events mouse events

Sprint 5: Fix the Flow

Datum: 10/12/24

Wat heb ik gedaan vandaag?

Ik heb een workshop over viewport transistion gevolgd. hier is een link naar waar ik heb geoefend met viewport transistion viewport transistion En ik heb de ui events deeltaak afgemaakt. deeltaak github

Sprint 5: Fix the Flow

Datum: 11/12/24

Wat heb je vandaag geleerd over HTML?

HTML heeft het attribuut required, zodat de gebruiker verplicht is om de velden in te vullen. Je kunt HTML-elementen strategisch gebruiken om je JavaScript-code eenvoudiger te maken.

Wat heb je vandaag geleerd over CSS?

Met CSS-selectoren kun je specifiek de eigenschappen van HTML-elementen aanpassen en bepalen hoe ze eruitzien of zich gedragen.

Wat ga je voor vrijdag nog toevoegen?

De functionaliteit van "section snap" verder verbeteren. "Same-time scroll" maken.

Welke functionaliteit wil je vrijdag laten testen?

Section snap en Same-time scroll.

Workshop van vandaag

Sprint 5: Fix the Flow

Datum: 16/12/24

3 studievragen over navigeren en label

(studievragen zijn moeilijke proefwerkvragen die je na vandaag kan beantwoorden)

Wat wil je laten zien bij de laatste sprint review?

PS: 07-01-2025 vergeten vragen te bedenken

Sprint 5: Fix the Flow

Datum: 19/12/24

Wat heb ik gedaan vandaag?

Ik heb vandaag de sprint review gehad, het ging best wel goed. Ik heb een issue gemaakt met de feedback van de opdrachtgever Feedback opdrachtgever Ik heb ook een Lighthouse-test en een screenreader-test uitgevoerd. Een aantal van de problemen die daarbij naar voren kwamen, heb ik direct geprobeerd op te lossen. Issue 16: testen

Sprint 6: The Startup

Datum: 06/01/25

De les van vandaag

Indicatroren waaraan ik extra aandacht wil besteden in deze sprint
1.1.3 - testen: wcag keyboard, lighthouse, screen reader
1.3.1 & 1.4.1 - samenwerken: briefing

Eerst individuele briefing geschreven en daarna een samengevoegde versie gemaakt. We hadden afgesproken om de individuele debriefing voor 8 uur op te sturen, daarna een samengevoegde versie te maken samengevoegde briefing Sprint planning gemaakt in een projectboard project hier staat wat ik vandaag heb gedaan issue: sprint planning

Checkout

Wat zijn je voornemens voor dit jaar? Voor dit studiejaar wil ik 60 studiepunten behalen. FDND is een soort bedrijf, waar je van elkaar kan leren en elkaar kan helpen. De plek om de beste frontender te worden... Studenten gaan soms vroeg weg en op dinsdag en donderdag zijn er weinig mensen. Wat heb jij nodig om langer te blijven werken bij FDND? Ik heb de JS challenges van 07-01-25 gevolgd, ik vind dat het nog bij het begin is van JS, dit begrijp ik al. Ik zou graag wat moeilijkere challenges willen.
Voor de donderdag waar we vragen kunnen stellen, ik zoek liever zelf uit hoe iets werkt, daarom heb ik niet vaak vragen die ik zou willen stellen.
En ik werk nu elke maandag en woensdag tot 23:00 uur, daarom ben ik vaak niet aanwezig bij deze lessen.

Sprint 6: The Startup

Datum: 07/01/25

Ik heb vandaag de JS challenge les gevolgd. JS repository

Ik heb schetsen gemaakt, en ik ben gelijk begonnen met HTML first voor de overzicht en details pagina schetsen

Sprint 6: The Startup

Datum: 12/01/25

Hier staan een paar tips en tricks voor responsiveness tips & tricks voor responsiveness

relative padding

dit doe je met de min() functie in CSS MDN: min()

responsive font-sizes

eerste tip, gebruik rem voor tekst.
rem: relative to the root font-size. op default is dat 16px
vb:
font-size: 1.5rem;
16 x 1.5 = 24px

tweede tip gebruik vw voor grote letters zoals headings:
vb:
font-size: 10vw;
dit zorgt ervoor dat de heading altijd 10% van de viewport width is

let op: op hele grote schermen is 10vw te groot.
maak dan ook gebruik van clamp, om een min en max aan te geven zodat het nooit te klein of te grootr zal zijn
vb:
font-size: clamp(1.8rem, 10vw, 5rem);

als je op je scherm inzoom of uitzoom maakt met ctrl + "-" of "+". dan verander de groote van de tekst niet.
omdat vw alleen kijkt naar de viewport

dit kan opgelost worden met calc()
vb:
font-size: clamp(1.8rem, calc(7vw + 1rem), 5rem);
nu wordt bde heading ook groter en kleiner bij in en uit zoomen

responsive images

met max-width: 100%;
hiermee zorg je ervoor de de image nooit groter is dan de grootte van het scherm

de image wordt nu gestretched als het scherm te klein is.
met:
height: auto;
zorg je ervoor dat de image dan altijd "normaal/goed" eruit ziet

als je images hebt met verschillende sizes, kan je aspect-ratio gebruiken om ze allemaal tot dezelfde size te maken.
vb:
aspect-ratio: 16 / 9; voor smartphone in landscape mode
aspect-ratio: 9 / 16; voor smartphone in portrait mode

het kan zijn dat dit je image ook stretched
met:
object-fit: cover;
kan je dan ervoor zorgen dat dat niet gebeurt. het kan zijn dat er een deel van de image afgesneden wordt.

gebruik dvh i.p.v vh

op smartphones heb je bovenaan een search bar die weg gaat als je scrolled.
dvh houdt rekeneing daarmee, vh niet

mobile nav

als je een nav op beeld wilt laten komen met een animatie dan kan je geen display none gebruiken.
wat je wel zou kunnen doen is met opacity werken.
vb een transition van opacity 0 naar opacity 1.
of met position absolute

deze 2 manieren zijn beide ontoegankelijk. Omdat je ze nogsteeds kan bereiken met tab ookal zijn ze van je scherm af.

je zou in HTML inert kunnen gebruiken. (inert prevents clicks and focus)
MDN: inert

hierdoor kan de gebruiker niet perongelijk op het element komen.
onthoud dat je dan in JavaScript deze attribute moet weg halen en terug plaatsen afhankelijk van de interactie je je probeert te maken.
dit kan zo:
vb
navbar.removeAttribute('inert')
navbar.setAttribute('inert')

Sprint 6: The Startup

Datum: 15/01/25

workshop Programming User Interaction

disney animatie principes interactive button gemaakt met disney principles

usefull sites

tranistion timing berekenen oklch kleuren voor transitions, omdat het een grotere kleuren palet heeft. waardoor je transition mooier lijkt oklch.com

3 nieuwe CSS properties die je nog niet kende

- Oklch is een nieuw kleurenmodel in CSS dat natuurlijke kleuren geeft en meer controle biedt over helderheid, verzadiging en tint dan RGB of hex.
- Cubic Bezier is een CSS-timingfunctie die de snelheid van een animatie bepaalt, zodat je kunt kiezen hoe de beweging versnelt of vertraagt.

beschrijf 2 animatie principes die je nog niet helemaal begrijpt

op deze website snap ik nog niet helemaal het verschil tussen "squash & stretch" en "secondary action". Bij een button lijken ze veel op elkaar, want allebei voegen ze extra beweging toe. Maar hoe ze precies anders zijn, begrijp ik nog niet.

beschrijf 1 animatie principe dat je toe gaat voegen aan je eigen I Love Web website.

ik wil eerst Anticipatie gebruiken door de achtergrond van het menu op beeld te krijgen. Daarna Timing gebruiken om de linkjes achter elkaar, met een kleine delay, op beeld te laten komen.

Sprint 6: The Startup

Datum: 16/01/25

tips & tricks

voor nav menu kan je inert gebruiken om ervoor te zorgen dat je niet met tab op elementen terecht komt die niet op screen zijn. bijvoorbeeld een nav die je van scherm weg schijf, om het later met een transitie terug te brengen. als het menu niet op screen is dan wil je dat de gebruiker niet perongeluk erbij komt.

wat doet inert:

haalt het element weg van de accessibility terecht. zorgt ervoor dat er niet naar het element ge-tabbed kan worden. het element wordt niet doorzichtig of gaat weg uit de DOM (het gaat niet op display: none)

menu gemaakt die ook werkt zonder js.

js geeft alle classes die het nodig heeft om op scherm te komen en om ervan weg te gaan. js geeft ook inert voor betere toegankelijkheid. ik heb een skip link button toegevoegd voor screen readers, zodat het gelijk naar de main content kan, en de nav skipt. hover op de linkjes en buttons gezet. accessdash interactions

Sprint 6: The Startup

Datum: 17/01/25

Code/Design User Testing

workshop voorbereiding testen hier heb ik bijgehouden wat ik heb gedaan voor user testing

I love web met Dave Bitter

Dave Bitter is een digital designer bij IO die AI-gedreven voice interfaces ontwikkelt voor het web, met focus op user experience en lage latency.

7 jaar geleden maakte Dave Bitter de Presiparrot-app, een tool die je woorden omzet naar tekst. Toen was het iets dat nog heel weinig bestond.

Dave Bitter bouwde met zijn bedrijf AIVA, waarmee hij AI inzet voor voice interactions. Het werkt simpel: je praat, dat wordt omgezet naar tekst met de SpeechRecognition Web API, iets als ChatGPT geeft een antwoord, en dat wordt weer omgezet naar audio met de SpeechSynthesis Web API. Alles bij elkaar zorgt dit voor een soepele en natuurlijke voice-ervaring.

Dave heeft een SpeechSynthesis-demo gemaakt om te laten horen hoe slecht de audio klinkt. Om het makkelijker en fijner te maken, kun je gebruik maken van een SpeechSynthesizer. Wil je dit zelf proberen? Gebruik dan de gratis AI-powered SpeechSynthesis van ElevenLabs via deze link.

De audio is nu beter, maar er zijn nog steeds meerdere stappen die zorgen voor een slechte ervaring, zoals latency. De stappen die je laptop moet nemen voordat jij een reactie krijgt: je start op je desktop, stuurt iets naar ChatGPT, het antwoord gaat terug naar je laptop, van daaruit gaat het naar ElevenLabs voor SpeechSynthesis, en dan weer terug naar je laptop. Hoe langer het antwoord, hoe meer latency, en dat verpest de gebruikerservaring.
Een voorbeeld van hoe dit werkt:
fetch 1, play 1
fetch 2, play 2
fetch 3, play 3

Een manier om dit te versnellen, je kan fetchen terwijl je de vorige afspeelt:
fetch 1, play 1, fetch 2
play 2, fetch 3
play 3, fetch 4

Vaak wordt er gezegd:
performance over anything.
maar Dave vindt dat
"Nothing breaks the illusion more than high latency".
Hij zegt dit omdat als je te lang moet wachten, de ervaring verpest wordt.

Meer informatie over hoe Dave AIVA heeft gemaakt

Sprint 6: The Startup

Datum: 22/01/25

Tips voor ReadMe schrijven

tips voor ReadMe schrijven

ReadMe en Screenreader Test

Ik heb vandaag mijn readme afgemaakt en ook een screenreader-test gedaan. Sommige issues heb ik gelijk kunnen oplossen, maar een paar hebben meer tijd nodig. Helaas heb ik niet genoeg tijd om dit voor de sprint review aan te passen Accessdash ReadMe

Sprint 6: The Startup

Datum: 23/01/25

Sprint Review

Vandaag was de sprint review met de opdrachtgever. Mijn screenreader gaf geen geluid. Gelukkig mocht ik de laptop van Arman lenen om de toegankelijkheid van mijn hamburgermenu met de screenreader te laten zien.

Probleem met Geluid

Toen ik thuis kwam, merkte ik dat de YouTube-video's ook geen geluid gaven. Ik heb daarna gekeken naar mijn drivers en zag dat alle drivers die met geluid te maken hadden gedownload moesten worden. Ik had niet door dat ik deze drivers niet had, omdat ik de dag ervoor de screenreader-test had gedaan op een monitor met ingebouwde speakers.

Sprint Review Feedback

Maar apart van dit, was de sprint review goed verlopen. De ontvangen feedback heb ik in deze issue opgeschreven

Sprint 6: The Startup

Datum: 24/01/25

Laatste Lesdag en Expo

Vandaag was de laatste lesdag voor deze sprint. Na de les hadden we een expo. Thuis ben ik begonnen met het schrijven van de retrospects.

Retrospects en Nieuwe Interactie

Naast de retrospects die we voor sprint 6 moeten inleveren, wil ik ook 1.1.3 - Fix the Flow - Interactive Website opnieuw maken. Omdat ik deze sprint weer een interactie heb gemaakt, maar dit keer heb ik het beter laten testen. En doordat ik meer feedback heb gekregen, heb ik ook meer feedback verwerkt.

Sprint 6: The Startup

Datum: 25/01/25

Vandaag heb ik de retrospects afgemaakt. Deze week ga ik verder werken aan mijn I Love Web.

Sprint 7: Connect Your Tribe

Datum: 03/02/25

Workshop

Workshop: Sprint planning

JSON Oefening

Vandaag heb ik tijdens de les ook geoefend met JSON Tijdens deze workshop heb node js geinstalleerd en een hello world pagina gemaakt op http://localhost:3000/

Database en Visitekaartje

Op deze site kan ik info toevoegen aan een database. Uit deze database kan ik info halen en toevoegen aan mijn Visitekaartje voor sprint 7.

Projectboard

Ik heb ook een projectboard gemaakt met de planning van programma.fdnd erin.

Visitekaartje Ontwerp

Daarna ben ik alvast begonnen met mijn nieuwe visitekaartje. Breakdown schetsen en begin aan HTML en CSS. Opdracht, Redesign Issue

Sprint 7: Connect Your Tribe

Datum: 04/02/25

CSS Challenge

Css challenge van Sanne: Challenge has

Mijn Werk

Mijn werk: Codepen

Wat heb ik geleerd?

Vandaag heb ik de CSS challenge van Sanne gevolgd. Ik heb geleerd over :has() in CSS. Gisteren had ik mijn interactie al een deel gemaakt met JavaScript. Vandaag heb ik geprobeerd hetzelfde met :has() en checkboxes te maken in CSS.

Visitekaartje Redesign

Visitekaartje redesign sprint 7: Redesign Issue

Sprint 7: Connect Your Tribe

Datum: 05/02/25

Workshop: REST API en Json, Oefenen met Routes en Views

Workshop over REST API en Json: REST API en JSON

Tip

Als je niet meer weet hoe die property van het person object heet (was het nou birthdate of birth_date?), zet {{ person | json }} in je code, en bekijk het antwoord in je pagina.

Pro-tip

Zorg dat je tijdens het bouwen en debuggen standaard ergens op je pagina een custom made fixed positioned
Data
{{ person | json:4 }}
element hebt—dan kun je altijd even spieken in je data. Haal die alleen wel weg voordat je je werk live zet :)

If Else and For Each met Liquid in HTML

Meer over if else en for each met Liquid in HTML: Conditional Else en Iteration Tags

For Loop met If Statement

For loop met if statement om data uit een array te halen, en 1 voor 1 in een li plakken.

Sprint 7: Connect Your Tribe

Datum: 06/02/25

CSS Animatie Verbetering

Vandaag heb ik de CSS animatie mooier gemaakt, door eerst de achtergrond zonder tekst van buiten beeld naar de laatste plek te brengen met cubic bezier. En nadat die animatie klaar is, een fade in te doen voor de tekst.

Sprint 7: Connect Your Tribe

Datum: 07/02/25

Wat heb ik gedaan vandaag?

Vandaag hadden we code en design reviews, ik heb feedback gegeven aan: Brancovanbeek RenzoWille Naddybsx

Sprint 7: Connect Your Tribe

Datum: 10/02/25

Sprint Planning en Filter Sort in JSON Browser

Vandaag heb ik de sprint planning en filter sort in de JSON browser doorgenomen.

Links voor filteren, zoeken en sorteren

Ik heb de volgende links gebruikt voor filteren, sorteren en zoeken in de JSON browser: Filteren met bio bevat frontend Filteren op favoriete kleur Zoeken op frisbee

DLC - Convergeren en Divergeren

Door de DLC meerdere keren te doorlopen kan je stap voor stap een ontwerpprobleem, of ontwerpvraag, oplossen. Dit heet convergeren en divergeren. Meerdere ideeën uitwerken en analyseren, daarna keuzes maken om tot de beste oplossing te komen.

info over Sorteren, Filteren en Zoeken

Sorteren in JSON Browser Filteren in JSON Browser Zoeken in JSON Browser

Schetsen gemaakt

Ik heb vandaag ook verschillende schetsen gemaakt.

Sprint 7: Connect Your Tribe

Datum: 12/02/25

Wat heb ik gedaan?

Vandaag heb ik een nieuwe app.get route gemaakt voor een pagina met gefilterde informatie. In de URL heb ik filter en sort toegepast om specifieke data op te halen. Door filter en sort in de URL toe te passen, kan ik de data dynamisch ophalen en weergeven op de pagina.

Sprint 7: Connect Your Tribe

Datum: 14/02/25

Code & design review

Vandaag heb ik samen met Kim code- en designreviews geschreven voor: Dylan Branco Fatima Halima Karimna

Sprint 7: Connect Your Tribe

Datum: 14/02/25

We Love Web met Kilian Valkhof

Kilian Valkhof begon met websites bouwen toen hij 11 was, met een persoonlijke website gebouwd in Frontpage 2000. In de beginjaren was het internet anders en werkte het soms niet goed in alle browsers. Op 12-jarige leeftijd begon hij geld te verdienen met affiliate marketing en kreeg hij meer ervaring met HTML, CSS, JS en jQuery. Toen de iPhone uitkwam, werd responsive design belangrijk voor het web.

Start van een bedrijf en Tools

Op zijn 16e begon hij samen met medestudenten een bedrijf te runnen, en dit gaf hem veel ervaring in de jaren daarna. Hij bouwde verschillende tools en apps, zoals Trimage voor het optimaliseren van afbeeldingen, en F.lux voor het aanpassen van schermhelderheid.

Polypane Browser

In 2017 besloot hij Polypane te maken, een browser voor developers, omdat hij het frustrerend vond om websites op verschillende apparaten te testen. Hij ontwikkelde Polypane om deze processen te vereenvoudigen en tijd te besparen.

Polypane Groei

In 2018 kreeg hij een dochter, en in 2019 besloot hij fulltime aan Polypane te werken. Na de lancering van versie 1.0 op 14 mei 2019 was Polypane niet meer gratis, wat sommige mensen teleurstelde. Hij werkte hard aan nieuwe features, zoals dark mode en verbeterde lay-outs, en luisterde naar feedback van gebruikers.

Technologie en Side-projects

Polypane bevat nu veel functies die oorspronkelijk niet bestonden in andere browsers, zoals een eigen element inspector en tools om makkelijk grids en afbeeldingen te testen. Wat betreft technologie gebruikt Polypane Electron voor cross-platform apps, en de interface is gebouwd met React (hoewel hij nu misschien een andere keuze zou maken vanwege technische uitdagingen).

Polypane Cloud en Toekomst

Door aan Polypane te werken, kreeg hij ideeën voor side-projects, zoals Superposition.design (voor contrastproblemen in browsers) en Polypane Cloud (voor website-wide testing). Hij is ook bezig met een Polypane-versie voor iPad.

Belang van Side-projects

Kilian benadrukt het belang van side-projects en dat je niet vast moet komen zitten in één carrièrepad. Hij heeft door het werken aan Polypane veel geleerd en blijft maandelijkse updates brengen voor het product, dat nu bijna 10 jaar oud is. Hij bedankt zijn klanten in release notes wanneer hun feedback wordt gebruikt.

Sprint 7: Connect Your Tribe

Datum: 24/02/25

Workshop: User Generated Content

Vandaag heb ik geleerd hoe ik een post route kan maken, zodat de gebruiker bijvoorbeeld iets kan posten op de website en het kan zien als een comment. De workshop was te vinden op: User Generated Content Workshop

Werk aan Issue

Ik heb gewerkt aan de volgende issue: Issue 3

Sprint 7: Connect Your Tribe

Datum: 26/02/25

Kleine aanpassingen en code review

Ik heb een paar kleine aanpassingen gemaakt bij de issue: Issue 3 en het daarna op review geplaatst.

Wat heb ik gedaan?

Mijn code en die van Kim samengevoegd, en daarna alle 'bugs' eruit gehaald. daarna heb ik Akiko ook geholpen om haar like button samen te voegen met wat ik en Kim al samen gevoegd hadden. Wij wouden een witte like button die rood word als het geklikt werd, dit is ons niet gelukt

Sprint 8: Server-Side Rendering

Datum: 03/03/25

Wat heb je gedaan?

Ik heb Milledoni gekozen als mijn opdrachtgever. De briefing ontvangen en gelijk de debriefing geschreven.

De briefing voorbereid, de debriefing geschreven, en contact gehad met Milledoni via een WhatsApp-groepchat.

Hoe kan ik deze week de website voor Milledoni ontwikkelen volgens de richtlijnen van de briefing en de debriefing?

Verwijzingen:

Briefing & Debriefing Document FDND Milledoni GitHub Repository Milledoni Presentation Figma Design Milledoni Workshop van vandaag

Sprint 8: Server-Side Rendering

Datum: 04/03/25

Wat heb je gedaan?

Ik heb een interface inventory gemaakt.

De interface inventory is opgesteld en het template is beschikbaar voor gebruik.

Hoe kan ik deze week de interface inventory verder integreren in de ontwikkelingsworkflow?

Verwijzingen:

Interface Inventory Interface Inventory Template Styleguide

Sprint 8: Server-Side Rendering

Datum: 05/03/25

Wat heb je gedaan?

Vandaag heb ik gewerkt aan verschillende fetch URL's om data op te halen en te filteren via de Directus API. Ik heb een sitemap gemaakt en geleerd hoe ik fetch URL's kan gebruiken voor zowel algemene als gedetailleerde data, met behulp van filters om lege waarden te vermijden.

Ik heb verder gewerkt aan het begrijpen van hoe je data analyseert en hoe je velden kunt uitbreiden door gelinkte personen te tonen met hun gegevens, zoals namen, images, en andere velden. Ook heb ik gewerkt met base URL's om specifieke velden en gelinkte data te verkrijgen.

Hoe kan ik deze week verder werken met de Directus API om de data op een efficiënte manier te verwerken en presenteren?

Verwijzingen:

Workshop van vandaag: Data analyseren Sitemap maken Milledoni producten URL Index pagina fetch URL Details pagina fetch URL Andere URL voor tags Andere fetch URL met OR filter

Sprint 8: Server-Side Rendering

Datum: 07/03/25

Introductie tot GSAP

vandaag hadden we de we love web met cassie over de animatiebibliotheek GSAP (GreenSock Animation Platform) en geleerd hoe je deze kunt toepassen voor flexibele en krachtige webanimaties. GSAP biedt veel meer controle dan CSS-animaties, met onder andere tweens, timelines, en responsive matchMedia functionaliteiten.

Tweens en Timelines

GSAP gebruikt 'tweens' om individuele animaties te maken, bijvoorbeeld een element horizontaal verplaatsen. Timelines zorgen voor meer controle door meerdere animaties te sequencen zonder handmatig vertragingen te berekenen, iets wat CSS standaard niet ondersteunt.

GSAP Utils

GSAP bevat krachtige utiliteitsfuncties zoals random(), mapRange(), wrap() en pipe(), die animaties natuurlijker en dynamischer maken. Zo kun je eenvoudig willekeurige kleuren genereren of elementen eindeloos laten bewegen over het scherm.

Easing en Yoyo

Met easing kun je bepalen hoe een animatie versnelt of vertraagt. Dankzij progressie en yoyo-functionaliteit kun je animaties bijvoorbeeld laten terugkeren naar de startpositie of reageren op hoveracties met een in- en uitgaande animatie.

Responsieve animaties met matchMedia

GSAP ondersteunt matchMedia waarmee je animaties kunt afstemmen op mediaqueries zoals schermgrootte of pointer-type. Dit maakt het mogelijk om bijvoorbeeld bewegingsintensiteit aan te passen voor gebruikers met 'reduce motion'-instellingen.

Animatiecontrole

Met TimeScale kun je animaties versnellen of vertragen, vergelijkbaar met een videospeler. GSAP biedt ook helperfuncties die inspelen op veelvoorkomende uitdagingen, zoals animatie-pauses en interactie met sliders of knoppen.

Geavanceerde animatiefuncties

ScrollTrigger maakt het mogelijk om animaties te koppelen aan scrollacties, en met de Motion Path Helper kun je objecten langs een zelf getekend pad laten bewegen. Deze tools geven veel creatieve vrijheid bij het ontwerpen van interactieve ervaringen.

Samenwerking met Webflow

GSAP is recentelijk overgenomen door Webflow, wat de ontwikkeling en ondersteuning van de library heeft versterkt. Voorheen werd het onderhouden door slechts twee personen, maar nu is er meer ruimte voor groei en innovatie.

Voorbeelden en inspiratie

Op gsap.com/demos zijn er veel voorbeelden te vinden die laten zien hoe veelzijdig GSAP is. Deze demo’s zijn handig om inspiratie op te doen en zelf aan de slag te gaan met animaties.

Sprint 8: Server-Side Rendering

Datum: 07/03/25

Wat heb je gedaan?

Tijdens de workshop van vandaag heb ik gewerkt met data filtering en template filters in Directus. Ik heb verschillende experimenten uitgevoerd waarbij ik data filter op naam, geboortedatum en favoriete tags.

Workshop documentatie: Data Filtering & Template Filters

Experiment 1: Ik wil alle studenten gesorteerd op name Link

Experiment 2: Ik wil alle names van studenten die een name hebben die begint met de letter D Link

Experiment 3: Ik wil alle names van studenten die een name hebben die begint met de letter D of K Link

Experiment 4: Ik wil alle names en birthdates van studenten die een birthdate hebben ingevuld Link 1 Link 2

Sprint 8: Server-Side Rendering

Datum: 14/03/25

Ik heb geen probleem met de huidige indeling van de studio. Het kan soms druk zijn, maar als ik eenmaal bezig ben met coderen, lukt het me goed om geconcentreerd te blijven. Thuis studeren vind ik soms handiger, vooral omdat ik daar met twee schermen werk. Toch blijf ik liever in de studio als ik veel te doen heb, omdat ik daar het meeste gedaan krijg. Als ik 's middags moet werken, ga ik na de les naar huis.

Analyse van de studio

We hebben samen gekeken naar wat goed gaat in de studio en wat beter kan. Op het whiteboard hebben we dit overzicht gemaakt:

Wat gaat goed?

1. in de studio kunnen we samenwerken 2. Aquarium is lekker koel 3. Vier personen per tafel is een fijne bezetting

Wat kan beter?

1. Soms is er teveel geluid in de ruimte 2. De studio wordt soms te warm 3. Er is geen plek voor meer dan 4 personen per tafel

Nieuwe indeling voor studio en aquarium geschetsed

House rules voor een prettige werkomgeving

Ruim je plek op als je klaar bent

Sprint 9: The Web is for Everyone

Datum: 17/03/25

Wat heb je gedaan?

Vandaag hadden we een workshop over user generated content. We leerden hoe we progressive enhancement kunnen toepassen door eerst de core functionaliteit te bepalen, te starten met eenvoudige technieken zoals HTML en mobile-first CSS, en daarna verder te verbeteren met JavaScript.

We bespraken ook wat een goede website maakt: hij moet responsief, toegankelijk, performant en progressively enhanced zijn. Ik heb daarnaast schetsen en een wireflow gemaakt voor een user story voor Milledoni.

Hoe kan ik de bookmark-functionaliteit voor Milledoni bouwen volgens het principe van progressive enhancement?

Verwijzingen:

Workshop User Generated Content Wireflow voor User Story Post URL voor Milledoni Bookmarklijst

Sprint 9: The Web is for Everyone

Datum: 19/03/25

Wat heb je gedaan?

Ik geleerd over UI states en bepaald welke ik ga toepassen op mijn project. Daarnaast heb ik een werkende form gebouwd met de POST-method. Hiermee kan een gebruiker een cadeau toevoegen aan een lijst of het verwijderen door opnieuw te klikken.

Ik zal de volgende UI states gebruiken: een loading state bij het openen van de detailpagina (door een loading circle te tonen), een empty state bij het eerste laden van de pagina (met een geblurde afbeelding die daarna scherp wordt), en een error state voor als de data niet laadt (met een foutmelding).

Hoe kan ik zorgen dat mijn interface op elk moment een bruikbare en toegankelijke state toont, ongeacht wat er met de data gebeurt?

Verwijzingen:

Uitleg over UI States

Sprint 9: The Web is for Everyone

Datum: 21/03/25

Wat heb je gedaan?

Ik heb mijn bookmark list interactie gepresenteerd tijdens de stand-up. Kyan uit 1H heb ik laten zien hoe ik met een POST items toevoeg aan de database. Daarnaast heb ik Renzo geholpen met het opzetten van zijn GET en POST routes. Ook heb ik een loader gemaakt die op beeld verschijnt nadat er op een link geklikt wordt.

De eerste issue ging over het verbeteren van de empty state en het toevoegen van een fallback voor als data niet beschikbaar is. De tweede issue richtte zich op het tonen van feedback aan de gebruiker na een actie (zoals toevoegen of verwijderen van een item).

Hoe kan ik mijn interacties nog intuïtiever maken voor gebruikers, zonder afbreuk te doen aan performance en toegankelijkheid?

Sprint 9: The Web is for Everyone

Datum: 23/03/25

Wat heb je gedaan?

Ik heb de loading bar afgemaakt. Issue 20 Nieuwe issue gemaakt vopor mn back button, omdat het nu terug gaat naar de home pagina en niet naar de vorige pagina. Issue 21

Sprint 9: The Web is for Everyone

Datum: 24/03/25

Wat heb je gedaan?

Ik heb gewerkt aan feature detection en geleerd hoe je code kunt gebruiken afhankelijk van de ondersteuning van de browser. Ik heb de @supports regel gebruikt om CSS-declaraties te specificeren die afhankelijk zijn van de browserondersteuning voor CSS-functies. Feature Detection, @supports

Ik heb een progressieve enhancement toegepast door de core functionaliteit eerst te maken en daarna de enhancements maken voor gebruikers van modernere browsers. Progressive Enhancement

Ik heb de code getest in verschillende browsers en ervoor gezorgd dat de basisfunctionaliteit werkt voor de meeste gebruikers, terwijl ik extra functionaliteit toevoeg voor gebruikers met moderne browsers. CodePen voorbeeld.

Verder heb ik de core functionaliteit voor tekst en audio getest en geoptimaliseerd, en een FAQ-sectie en carrousel gemaakt voor de deeltaak.

Sprint 9: The Web is for Everyone

Datum: 28/03/25

Wat heb je gedaan?

Tijdens de code en design review heb ik feedback gegeven aan Sebastiaan Saif Marcin

Sprint 9: We Love Web met Ischa Gast

Datum: 28/03/25

Toegankelijkheidsproblemen

Ischa bespreekt het belang van toegankelijkheid op het web voor mensen met verschillende beperkingen. Er wordt ingegaan op visuele, auditieve, cognitieve en ouderdomsbeperkingen en hoe deze de gebruikerservaring kunnen beïnvloeden. Bijvoorbeeld, te veel of te weinig contrast kan problematisch zijn voor visueel beperkte gebruikers.

Oplossingen voor Toegankelijkheid

Om websites toegankelijker te maken, is het belangrijk om goede HTML en koppenstructuur te gebruiken. Duidelijke linktekst is essentieel, evenals voldoende contrast. Ook moeten websites visuele feedback bieden voor de tabindex om navigatie met het toetsenbord te vergemakkelijken.

Voorbeeld van problemen

Ischa deelde een voorbeeld van een collega die moeite had met het boeken van een ticket op een website, omdat de hulplink moeilijk te vinden was, helemaal onderaan de pagina. Ook gaf Ischa het voorbeeld van een kleurblinde persoon die Coolblue niet goed kan gebruiken vanwege de kleurkeuzes, maar wel Bol.com, die betere contrasten biedt.

Screenreader en toegankelijkheid

Ischa benadrukt het belang van doorzichtige tekst voor screenreaders, zodat de inhoud wel leesbaar is voor mensen met een visuele beperking, maar niet zichtbaar voor normale gebruikers. Sven, die blind is, kan bijvoorbeeld op wedstrijdniveau gamen dankzij geluiden die elke beweging aangeven.

voorbeelden

Een voorbeeld werd gedeeld van Schiphol, waar een assistentiebutton niet effectief was voor dove mensen, aangezien de enige optie was om met iemand te praten. Daarnaast had de HEMA website geen visuele feedback voor de tabindex, waardoor het moeilijk was om met het toetsenbord te navigeren.

Zelfstandige benadering van Ischa

Ischa maakt zelf websites toegankelijk, zelfs wanneer de klant daar niet specifiek om vraagt, wat bijdraagt aan een meer inclusieve gebruikerservaring.

sprint 10: Sprint Planning en Reflecties

Datum: 14/4/25

Sprint Planning

De sprint planning is opgesteld in de project board.

Sprint 9 Feedback

De feedback uit sprint 9 is omgezet in losse issues:

Issues

Progressive Enhancement

Ik heb gekeken naar welke progressive enhancement-componenten ik in deze sprint wil maken. Mijn doel is om elke week één component te ontwikkelen:

Component issues

Workshop: Performance

De performance workshop is gevolgd.

Break the Web

Ik heb onderzoek gedaan voor de opdracht Break the Web:

Onderzoek en presentatie

Web Vitals Metrics

Web Vitals is een meetsysteem dat door Google is ontwikkeld om de snelheid en prestaties van websites inzichtelijk te maken.

Core Web Vitals

De Core Web Vitals zijn de drie belangrijkste statistieken die de gebruikerservaring meten op het gebied van performance:

De drie statistieken

  • Loading performance
  • Interactivity
  • Visual stability

Inzicht in gebruikerservaring

Deze statistieken geven inzicht in hoe goed de gebruikerservaring is tijdens het laden en gebruiken van de website.

Drie manieren om te testen

Lighthouse – Voor snel inzicht in de prestaties van je website op jouw apparaat.

PageSpeed Insights – Geeft inzicht in prestaties voor een breder publiek, met data van echte gebruikers.

WebPageTest (waterfall charts) – Biedt een diepgaande analyse van alles wat er in de browser gebeurt tijdens het laden van de pagina.

sprint 10: User Experience

Datum: 22/4/25

Workshop van vandaag

Workshop van vandaag: perceived performance

Cheating The UX manieren om de website sneller laten lijken voor de gebruiker

Visual time response

De volgende tijdsintervallen beschrijven hoe gebruikers reactietijd ervaren:

  • Instant response <300ms: Als een interactie niet langer duurt dan 300 miliseconden ervaart de gebruiker dat als 'instant response', de interface reageert direct. Dit geldt bijvoorbeeld voor button states zoals :hover en :focus.
  • Normal Delay 300ms - 2s: Als een interactie of het laden van content sneller gaat dan 2 seconden, is er geen extra feedback nodig. De gebruiker zal dan niet het gevoel krijgen dat iets te lang duurt.
  • System is thinking 2 - 5s: Als het laden van content langer duurt dan 2 seconden, dan zal je de gebruiker feedback moeten geven dat er iets gebeurt, zoals een loading spinner.
  • Do something extra >5s: Duurt een interactie of het laden van content langer dan 5 seconden? Dan zul je de gebruiker duidelijk moeten maken waarom iets zo lang duurt. Bijvoorbeeld bij het uploaden van content zorg je ervoor dat in de interface duidelijk is wat er gebeurt en hoe lang het nog duurt.

Illusies en slimme animaties

Ease-out animaties Gebruik Ease-out animaties als de interface direct moet reageren, zoals voor button states en het menu.

Ease-in animaties Gebruik Ease-in animaties voor het tonen van informatie zoals prompt, modal, succes states en error meldingen

Progress bar

Als je een progress bar naar het einde toe laat versnellen, zal de gebruiker het gevoel krijgen dat iets sneller is geladen.

sprint 10: User Experience

Datum: 23/4/25

DPR & Viewport

DPR betekent Device Pixel Ratio, dat is eigenlijk hoe scherp je scherm pixels weergeeft. Wil je weten wat jouw viewport of dpt is? Check dan even deze site: whatismyviewport.com . Super handig om te snappen hoe je site zich aan verschillende schermen aanpast.

Responsive Images

Als je een website bouwt, wil je natuurlijk dat je afbeeldingen er goed uitzien op elk apparaat zonder onnodig veel data te gebruiken. Deze gids dat uit: Responsive Images The Simple Way . Ook CSS heeft een tool hiervoor: image-set , daarmee kun je verschillende resoluties makkelijk instellen.

sprint 10: We Love Web met Niels Leenheer

Datum: 25/4/25

Introductie

Niels Leenheer werkt bij een bedrijf dat kassasystemen maakt voor kapsalons, maar hij is van oorsprongkelijk webdeveloper. Zijn achtergrond is half informatica en half kunstacademie. Vroeger werden webontwikkelaars vaak webmasters genoemd. Zijn eerste website bestond uit een afbeelding van He-Man en een noscript tag.

Eerste ervaringen met het web

De noscript tag toont content wanneer JavaScript niet beschikbaar is. Je kunt meerdere noscript tags plaatsen, maar een noscript binnen een andere telt als één. Deze tag is niet te stylen omdat hij niet gerenderd wordt als JavaScript uitstaat. De inhoud komt wel in de DOM maar blijft onzichtbaar. Dit maakt noscript een uniek HTML-element.

Resilience van HTML

HTML is tolerant voor fouten en blijft meestal werken ondanks onjuiste code. Browsers negeren onbekende of foutieve tags zonder foutmelding. Dit zorgt ervoor dat het web toegankelijk is. Javascript is minder tolerant en kan door fouten stoppen met werken.

Geschiedenis en fundamenten van het web

Tim Berners-Lee maakte de eerste browser die ook een editor was. Hiermee kon je websites maken en bekijken. Oude websites werken nog steeds omdat browsers onbekende tags negeren. Backwards compatibility is een kernprincipe van HTML. Zelfs browsers als Mosaic tonen nog steeds websites zonder CSS en JavaScript.

Verouderde en oude HTML-tags

Sommige oude tags zoals blink zijn verdwenen uit moderne browsers. Dit effect is nu alleen na te maken met CSS of JavaScript. De marquee tag wordt nog wel ondersteund maar nauwelijks gebruikt. Dit laat zien dat niet alle oude tags backward compatible zijn. De meeste oude tags worden wel netjes genegeerd.

Hoe werkt het parsen van HTML?

Browsers gebruiken een tokenizer en tree builder om HTML te verwerken. De tokenizer leest HTML teken voor teken en maakt tokens aan. De tree builder bouwt de DOM en vult ontbrekende tags aan. Verkeerd geneste tags worden gecorrigeerd door de browser. Zo zorgt de browser dat fouten niet zichtbaar zijn.

Aanbevelingen voor moderne webontwikkeling

Gebruik standaard HTML-elementen zoals button in plaats van custom elementen. Dit verbetert compatibiliteit en toegankelijkheid. Veel mensen delen content via platforms als Facebook en Instagram. Daardoor bepaalt een klein aantal bedrijven wat gebruikers zien. Dit maakt het web minder open dan vroeger.

Moderne uitdagingen in webontwikkeling

Frameworks en polyfills helpen nieuwe functies in oudere browsers te ondersteunen. Dit werkt echter alleen tot een bepaald punt. Het fundament van HTML zorgt dat oude content nog steeds zichtbaar is. Moderne browsers zijn tolerant en herstellen veel fouten. Zo blijft het web ook na tientallen jaren bruikbaar.

sprint 10: Nodemon opzetten

Datum: 23/4/25

Download de nieuwste versie van Node.js (https://nodejs.org/en) op je laptop of computer.

Fork deze repository en Clone jouw fork naar je laptop.

Open de repository in Visual Studio Code (of een andere code editor).

Open de terminal in VSCode en installeer node in de repository:

  • npm install
  • npm install -D nodemon

Controleer of je deze code in je package.json hebt staan:

  • "scripts": {
  • "start": "node server.js",
  • "dev": "nodemon server.js"
  • }

Zodra de installatie klaar is, voer je het volgende commando uit om de website op localhost te starten:

Voor gewone start, waarbij je de server handmatig opnieuw moet opstarten bij wijzigingen:

  • npm start

Als je de server start met nodemon, wordt de server automatisch opnieuw gestart bij wijzigingen in server.js:

  • npm run dev

Na het starten zie je in de terminal een localhost-link. Klik erop of open deze in je browser.

Als je de server wilt stoppen, dan kan dat met deze command:

  • Ctrl + C

sprint 11: Pleasurable UI

Datum: 12/5/25

Workshop sprint planning

Workshop over sprint planning gedaan. Link naar de uitleg: sprint planning

wat heb ik gedaan? / ga ik doen?

Vandaag wil ik de single page view transition van deze workshop proberen te verwerken in mijn website: client-side scripting for UX

Mijn portflow van sprint 10 nog een keer overlezen en ingeleverd.

Samen met Nadia en Akiko de sprint planning gemaakt. Issue: sprint planning

Project board aangemaakt, deadlines aangegeven, must-have en nice-to-have verdeeld en issues toegewezen: project board

server js

Ik heb de fetch URL geschreven issue 28 , en de POST en GET routes gemaakt op een branch. Daarna een pull request aan gevraagd het team: pull request

sprint 11: Pleasurable UI

Datum: 13/5/25

Route voor favoriete pagina

Ik heb een route aangemaakt voor de favoriete pagina. Issue: issue 33

Opslaan en verwijderen van bookmarks

Een functie geschreven waarmee bookmarks opgeslagen of verwijderd kunnen worden. Issue: issue 38

Server DRY maken

De server is nu DRY geschreven omdat we herbruikbare functies hebben om POST en DELETE acties uit te voeren, en ook een functie om alle bookmarks op te halen.

sprint 11: Pleasurable UI

Datum: 14/5/25

Workshop over feature branches en pull requests

Vandaag hebben we gewerkt met feature branches en pull requests. Uitleg is hier te vinden: Feature Branches en Pull Requests

Issue opgelost

Ik heb een issue opgelost die Nadia voor mij had gemaakt: issue 41

sprint 11: Pleasurable UI

Datum: 15/5/25

Eigen issue en pull request

Ik heb gewerkt aan deze issue: Issue #5 . Na het afronden heb ik meteen een pull request gemaakt en de ontvangen feedback direct verwerkt.

Reviews op team pull requests

Ik heb ook pull requests van mijn teamleden gereviewd: Pull Request van Nadia en Pull Request van Akiko .

sprint 11: Pleasurable UI

Datum: 16/5/25

Code en design review

Samen met Nadia heb ik een code en design review geschreven voor bieb in bloei 1H .

Branch samengevoegd namens Akiko

Akiko was ziek, dus ik heb samen met Nadia haar branch code verwerkt en samengevoegd met onze code op de home pagina: Pull request 53 , Pull request 50 en Pull request 54 .

Documentatie

Ik heb alvast de server.js uitgelegd in de readme.

sprint 11: Pleasurable UI

Datum: 20/5/25

Figma prototypes gemaakt voor:

En begonnen met de html, basis css en js voor de carousel onderaan op de details pagina. Zie issue #15 .

sprint 11: Pleasurable UI

Datum: 21/5/25

Ik heb gewerkt in feature branches aan:

Ik moet nog de view transition van de home naar de details pagina maken.

kalok yeung insights: Over Kalok Yeung

Datum: 01/06/25

Over Kalok Yeung

Kalok Yeung is een designer die veel samenwerkt met front-end developers om het design van websites te verbeteren. Hij focust op gebruikservaring en hoe je interacties met de gebruiker emotioneel kunt versterken.

Oxytocine triggeren met design

Kalok legt uit dat je via design oxytocine kunt triggeren, een hormoon dat zorgt voor verbondenheid en vertrouwen. Dit bereik je bijvoorbeeld door zachte UI-elementen: afgeronde hoeken, voldoende witruimte tussen en binnen elementen. Dit zorgt voor een professionele en aangename uitstraling. Ook subtiele motion zoals hover effecten en overgang animaties verbetert de interactie en het gevoel bij de gebruiker.

Motion en soft UI

Beweging moet functioneel zijn en iets toevoegen aan de gebruikerservaring, niet alleen decoratief. Subtiele animaties bij klikken of hoveren maken interacties prettiger. Door herbruikbare elementen te gebruiken, kan je animaties consistent toepassen, bijvoorbeeld een animatie die een subtitel verandert van h2 naar h1 tijdens een view transition. Physics in animaties, zoals een natuurlijke vertraging bij het verslepen van een video-tijdlijn, zorgt voor een organisch gevoel.

Geluid in design

Geluid wordt vaak over het hoofd gezien, maar het kan een positieve impact hebben op de gebruikerservaring. Bijvoorbeeld subtiele geluiden bij het hoveren of klikken op buttons, of een tik-geluid bij het scrollen door een lijst. Deze geluiden versterken de beleving en maken de website memorabel.

Content en interactie

Om ervoor te zorgen dat mensen content lezen, is het belangrijk om tekst niet als grote blokken aan te bieden. Een chat-achtige interface werkt goed, waarbij vragen en antwoorden visueel gescheiden zijn. Ook interactieve filters, bijvoorbeeld op basis van hoe iemand zich voelt, maken content persoonlijker. Complexe processen kunnen simpel worden gemaakt, bijvoorbeeld door een camera op een bonnetje te richten en alleen relevante feedback te tonen, zoals prijs en currency

AI en creativiteit

Kalok gebruikt AI alleen voor het beantwoorden van e-mails, niet voor ontwerpen. Hij gelooft dat AI geen echte creativiteit kan vervangen omdat ontwerpen die door AI gemaakt worden vaak levenloos aanvoelen.

sprint 11: Pleasurable UI

Datum: 26/5/25

Voorbeeld ontwerp keuzes overbrengen:

Ik heb de sticky header issue aangenomen en afgemaakt:

Ik heb de structuur van de README gemaakt, de inhoudsopgave, en wat ik kon invullen heb ik al gedaan. Ik wacht nog op mergen omdat mijn code in branches staat, maar ik wacht nog op reviews voordat ik het naar de main kan mergen.

README

Sprint 12: Proof of Concept

Datum: 22/06/25

Briefing van Triple

Voor deze sprint werk ik samen met Triple . We hebben tijdens de briefing een opdracht gekregen waarin we een Pokédex website moeten maken met de PokeAPI . Triple leverde een Figma bestand en MoSCoW-lijst aan die als basis dienen voor het ontwerp en de planning. In de briefing werd duidelijk dat de must-haves prioriteit hebben.

Debriefing gestuurd

Na de briefing hebben we een debriefing gestuurd waarin we onze interpretatie van de opdracht bevestigden. Die vind je hier: Debriefing PDF

Eerste stappen

Ik heb meteen een projectboard aangemaakt waarin ik de must-have issues heb uitgewerkt. Daarna ben ik gestart met het maken van schetsen en een HTML-first aanpak voor de basisstructuur van de Pokédex: HTML-first issue

Sprint 12: Proof of Concept

Datum: 4/06/25

workshop over progressive enhancement

Programma jaar 2: elke maandag, woensdag en vrijdag van 13.30 tot 17.30 zijn er workshops en op één van die dagen in de ochtend (9.30) is er mentorship. Op dinsdag en donderdag werken we samen met eerstejaars studenten aan het project.

Styleguide en layout

Ik heb een styleguide gemaakt met daarin mijn keuzes voor kleuren en typografie. daarna heb ik de one column layout voor de indexpagina gemaakt.

pokeAPI

Daarna ben ik begonnen met het lezen van de documentatie van de PokeAPI Deze API werkt heel anders dan Directus: er zijn veel geneste endpoints en je moet vaak meerdere fetches doen om de juiste data op te halen.

Sprint 12: Proof of Concept

Datum: 5/06/25

server.js en data ophalen

Gisteren en vandaag heb ik gewerkt aan het opzetten van server.js: issue #5

code coventies

Hier is een samenvatting van codeconventies: wiki

Sprint 12: We love web met Hidde de Vries

Datum: 13/06/25

Display: Green gaat over klimaatverandering en wat je kunt doen om duurzamer te leven. Bijvoorbeeld: je telefoon voor meer jaren gebruiken of kleren laten uitdrogen. Tegelijkertijd zijn er minder duurzame acties zoals airco in de auto gebruiken.

Hidde is lid van de Web Sustainability Interest Group, die naast WCAG nu ook Web Sustainability Guidelines ontwikkelt. IT-emissies zijn groter dan die van vliegtuigen. Als internet een land was, zou het de 13e grootste uitstoter zijn.

De Web Sustainability Guidelines richten zich op user experience design, web development, hosting, infrastructuur en business strategie. Deze richtlijnen zijn gebaseerd op impact en helpen bij het verduurzamen van websites.

Duurzaamheid op het web hangt af van servers, die altijd aan staan en stroom verbruiken. Ook netwerken spelen een rol door alle uploads en downloads. Daarnaast zijn er de devices van gebruikers zoals laptops, telefoons en tablets.

Websites worden steeds groter, met een gemiddelde mediagrootte van 2678kb nu, tegenover 400kb tien jaar geleden.

Het verminderen van data, zoals afbeeldingen en videos, en lazy loading helpen om emissies te verlagen. Daarnaast is het belangrijk om een carbon budget te bespreken en acties te ondernemen als je erover gaat.

Eenvoudige websites zonder CSS en JavaScript kunnen onder de 0,5kb blijven. Gebruik liever web platform features in plaats van zware libraries. Ondersteun ook oudere devices door progressive enhancement toe te passen.

Kies voor groene hosting providers, dit kan je controleren via thegreenwebfoundation.org

Gebruik alleen noodzakelijke features, want AI verbruikt veel energie. Laat gebruikers zelf kiezen voor minder CO2-intensieve functies op je website.

Gebruik media queries zoals prefers-reduced-data om energie te besparen. Analyseer ook je fonts en CSS om onnodige data te vermijden. Dit helpt de website efficiënter en duurzamer te maken.