Journal

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