Journal

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.