Journal

Sprint 1: Your Tribe

Datum: 4/9/24

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 2 breakdown schets 3

Sprint 1: Your Tribe

Datum: 5/9/24

Ik heb mijn pop up werkend kunnen krijgen. Maar nu is mijn profile picture op de verkeerde plaats.

mijn website is nu ook responsive voor telefoons. Op een telefoon heeft de list van porgramming skills nu een verkeerde volgorde.

Ik ben begonnen met een flip functie mbv JavaScript. Als ik de visitekaart click wil ik de hele kaart laten omdraaien.

Wat maakt JavaScript verschillend met html en css? met JavaScript kan je meer functionaliteit toevoegen aan je web pagina.

Wat wil ik nog uitzoeken:

  • profile picture op de juiste plaats krijgen
  • programming skills list aanpassen voor telefoons
  • JavaScript flip functie werkend krijgen
  • op telefoon wil ik de flip functie uitzetten

Sprint 1: Your Tribe

Datum: 8/9/24

Vandaag heb ik gewerkt aan mijn I love web Ik heb de structuur ingedeelt 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.

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.

Verwijzingen:

Home pagina versie 1

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 individueel breakdown schets squad page samengevoegd squad 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 ingedeelt. 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 geeft 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 queery 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

Ik heb vandaag gewerkt aan een campus pagina voor de squad page. hierin willen we locatien van amtelcampus 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 toetevoegen met die van Dylan. Maar omdat ik met header, article, ul, en li ging werken, onstond er een problemen met onze css. Ik moet nu mijn html en css aanpassen zodat ik het later makelijker kan samenvoegen met de code van mijn teammates.

Verwijzingen:

campus pagina

Sprint 1: Your Tribe

Datum: 13/9/24

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 will ook aan mijn afbeeldingen page beginnen.

Sprint 1: Your Tribe

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

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.

Verwijzingen:

Foto pagina v1

Sprint 1: Your Tribe

Datum: 16/9/24

Ik heb met figma gewerkt. Nu heb ik mijn squad page na gemaakt. 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

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 aangpast 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

Vandaag heb ik de campus pagina voor onze squad page af gemaakt. 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.

Verwijzingen:

Squad page final

Sprint 1: Your Tribe

Datum: 19/9/24

Vandaag heb ik het laaste 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

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 indelen, zodat de pagina sneller laadt.

Verwijzingen:

link naar mijn picture vault visitekaart link naar mijn picture vault i love web link naar mijn picture vault squad page

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 na bouw. 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.

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 elemente n 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 gedaan?

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 toegangelijkheid 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 als de focus duidelijk is. door de tabben door mijn website heb ik gekeken als 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 huis stijl styles guide makeen Ik heb vandaag geleerd dat elk bedrijf een eigen huis stijl 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 gerdaan om ervoor te zorgen dat iedereen binnen de 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 gamaakt. hiervoor hebben we de huis stijl van radio veronica overgenomen. we hadden door, dat het overzetten van 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 als we een andere typografie zullen gebruiken voor de mobiele versie van de desktop. nu hebben we alleen een style sheet voor de desktop versie 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 rede waarom ik heb voorgesteld om het in de ReadMe bij te houden is; de ReadMe is makkelijker om de afpraken op te zoeken, omdat we vaker in de repositoiry bezig zijn. afspraken

Sprint 4: Look and Feel

Datum: 12/11/24

vandaag heb ik breakdowmn 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 laaste

  • sprint
  • mobiel:
    • alle radiozenders in 1 oogopzicht
  • desktop:
    • 1 list voor de tijd lijn
    • 1 list voor de week dagen

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 genomenen 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 gekopieert en geplakt op een figuur, en het daarna tot een group gemaakt.

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 ik en Julia verder gaan werken aan onze gezaamlijke stylesheet. we hebben nieuwe namen bedacht voor sommige classes. we hebben nu alle kleuren als variable opgeslagen in een class en we hebben aparte classes voor het veranderen van color, background-color, font-size enz. dus we hebben altijd 2 classes nodig om iet te veranderen. github gezaamlijke stylesheet

Voorbeeld

Om de achterground kleur aan te passen heb je eerst de class brand-primary nodig. dit kan de background-color veranderen, maar zelf heeft dit geen kleur. Je hebt dan ook de background-color-veronica nodig, deze class heeft alleen de kleur. Als deze 2 classes op 1 elememnt staan dan veranderd de achterground kleur. Als we de kleur willen veranderen dan hoeft dan alleen in background-color-veronica gedaan te worden. voorbeeld

wat heb ik geleerd.

- ik heb geleerd hoe ik gebruik kan maken van 2 classes om 1 element aan te passen. het is lastig om te begrijpen maar als ik later iets wil aan passen dan is het een stuk makkelijker
- ik heb ook geleerd dan er een soort rank is tussen style attribute, ID, classes en element namen. als er een kleur is op een element en dezelfde element krijgt met ID een andere kleur. dan wordt de kleur van de ID toegepast.

Sprint 4: Look and Feel

Datum: 18/11/24

vandaag heb ik een custom font gemaakt:

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?

ik heb geleerd dat er meerdere font op een website kunnen zijn. met font family heb krijg je een fallback dit betekent als je laptop/ browser de eerste font niet kan lezen, dan wordt de 2de font in de font family gebruikt. voorbeeld: font-family: "Times New Roman", Times, serif;

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 In CSS, vmin stands for viewport minimum. The vmin function is used to set the size of an element as a percentage of the minimum value between the viewport width or height. For example, if the viewport is 1000px wide and 800px high, if we set the width of an element to 30vmin, it will be 30% of the height. So 30% of 800px is 240px. vmax: Relative to 1% of viewport's* larger dimension In CSS, vmax stands for viewport maximum. The vmax function ranks elements as a percentage of the maximum value between the viewport width or height. For example, as shown above, an element of 30vmax would be 30% of the width, or 300px. %: The % unit sets the font-size relative to the current font-size

meer info over css units:

Sprint 4: Look and Feel

Datum: 21/11/24

wat heb ik gedaan?

- de layout voor mobiele de website afgemaakt
- javaScript om alle details op display none zetten als 1 open gaat
- javaScript om de tijd, week dagen player en de nav op beeld te bregen als 1 details open gaat
- javascript om met een button een nav op beeld te sliden.

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 toe gepast section scroll snap javaScript als er op een radiozender geklikt wordt dan gaat het open en naar het midden

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

wat wil ik nog doen?

scroll sanp nog beter maken de scroll snap gaat nu naar het midden. ik wil dat het vlak onder de tijdlijn terecht komt

De tekst in de programma kaartjes wil ik invullen zodat het overeen komt 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. voorbeeld in CSS:
  • border
  • border-radius
  • background-color
  • padding
  • box-shadow

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 bijelkaar behoren, 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

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 makkelijlker.

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 Meer uitleg

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 in CSS:
  • kleur
  • typografie
  • vorm en stijl

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 Meer uitleg

Sprint 4: Look and Feel

Datum: 28/11/24

wat heb ik vandaag gedaan?

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

Ik heb ook een website gemaakt voor het uitleggen van onze gezaamelijke stylesheet. it 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 mij road map. dit lijk 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: JS workshop ik heb de iteractie 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

ik heb mobile css af gemaakt en ook de classes van de gedeelde stylesheet in de HTML toegevoegd. mobile CSS

ik heb je javascript gechreven die de week dagen, tijdlijn, radio nav en de player op beeld brengen. JS issue: remove hidden

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

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: 17/12/24

wat heb ik gedaan vandaag?

readme geanalyseert, gekeken wat goed ging en wat beter kan. Anne Amber Tygo

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 betseden 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 maaken 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 studie punten behaalen FDND is een soort bedrijf, waar je van elkaar kan leeren 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 chellenges van 07-01-25 gevolgd, ik vindt 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

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

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.

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.

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

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

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 4: Look and Feel

Datum: 03/02/25

Workshop: Sprint planning

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

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

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

Daarna ben ik alvast begonnen met mijn nieuwe visitekaartje. breakdown schetsen en begin aan HTML en CSS opdracht redesign issue