Welkom.

Dit is Jamie's Learning Journal en portfolio, waar ik mijn projecten, ervaringen en groeiproces deel.

Front-end developer en designer uit Alkmaar, Noord-Holland, met een passie voor het bouwen van gebruiksvriendelijke en visueel aantrekkelijke website.

Maandag 1 september 2025

Vandaag was mijn eerste dag van school. Ik heb mijn klas (1J) leren kennen en gingen gelijk aan de slag met het ontwerpen van een visitie kaartje.

Scrum

Bij FDND gebruiken we voor de fasering van opdrachten een projectmethodiek (Scrum) die in de beroepspraktijk standaard is. Scrum hanteert een projectcyclus die de development-lifecycle (DLC) wordt genoemd. Voor deze opdracht gingen we door alle fases van de Development-Lifecycle; analyseren, ontwerpen, bouwen, integreren en testen.

Visite kaartje

Ik ben blij met mijn visitie kaartje ik heb een paspoort gemaakt die je kan open klappen met een hover. Ik heb hier geleerd hoe ik backface-visibility moet gebruiken. Ook had ik feedback gekregen op mijn dark/light mode functie. Je kan namelijk de :has() selector gebruiken in CSS. Niet eens Javascript.

Dinsdag 2 september 2025

Vandaag ben ik veel met selectors gaan werken. Ik merk dat het veel overzichterlijker is dat als je andere selectors gebruikt in plaats van alleen classes en id's. Ik gebruik nu veel nth-type-of(). Ik had een CSS game gespeeld waarmee je allemaal nieuwe selectors leerde kennen. Een paar die ik heb geleerd:

NTH of type selectors

Ik heb heel wat selectors geleerd, twee die uitsprongen voro mij is een selector waarbij de formula alle elementen selecteerd vanaf een bepaalde plek. Bijvoorbeeld :nth-of-type(An+b) En een selector die je met een attribuut kan selecteren. Bijvoorbeeld a[href^="https"], selecteerd alle elementen waarbij de href begint met https.

Ik heb ook geleerd dat je tegenwoordig css kan nesten. Dit maakt het zoveel duidelijker om CSS te schrijven.

Polypane

In de bronnen van deze dag las ik ook over Polypane, Polypane is een webbrowser speciaal gemaakt voor developers, vooral front-end en UI/UX-designers. In plaats van één venster zoals Chrome of Firefox, toont Polypane meerdere viewports tegelijk. Bijvoorbeeld mobiel, tablet en desktop naast elkaar. Allemaal perfect gesynchroniseerd. Ik wil er meer mee werken in de toekomst.

Woensdag 3 september

Woensdag heb ik een les gehad over breakdown schetsen.

Breakdown schetsen

Dit is een wireframe met annotaties voor de HTML, CSS en/of JS. Het is een methode die frontenders vaak gebruiken om te onderzoeken wat voor techniek nodig is om een ontwerp te realiseren in code. Hier heb ik een voorbeeld van een breakdown schets in mijn issue.

Donderdag 4 september 2025

De afgelopen dagen hadden we ons erg verdiept in HTML en CSS. Wat ook een belangerijke taal is in de front-ender wereld is Javascript. Javascript brengt de functionaliteit en interactie in een website. Ik ben gaan leren op learn javascript, en heb hier de eerste les over basic functies geleerd. Zoals + en *.

Vrijdag 5 september 2025

Vandaag stond in het teken van feedback vragen en reflecteren in Portflow. Ik ben bij een klasgenoot gaan vragen om feedback en daar heeft hij een issue van gemaakt, waar interessante dingen uit zijn gekomen.

Iteratief werken

Iteratief werken betekent herhalend werken. Ik kan dit bijvoorbeeld doen met issues en/of commits.

Ook hadden wij onze eerste EXPO. Alle eerste en tweede jaars lieten zien wat ze gemaakt hadden de afgelopen week.

Maandag 8 september 2025

Sprint planning

Vandaag hadden we een sprint planning van een nieuwe opdracht, de squadpage. Dit deden we in groepjes. Ik zat met 2 andere studenten. We hadden gelijk samen een Figma bestand gemaakt en begonnen daar in te schetsen.

Team Canvas

Als je in een team gaat werken, is het belangrijk om afspraken te maken over de samenwerking, zodat alle teamleden goed op één lijn zitten. Daarvoor is de team-canvas.

Dinsdag 9 september 2025

Vandaag had ik mijn eerste CSS challange les van Sanne. Deze challange ging over grids. Met grids kan je eenvoudig rijen en kolommen maken, ideaal voor overzichtelijke en symmetrische layouts. Ook is het met responsiveness heel toegankelijk.

Wat heb ik geleerd?

grid-auto-flow: dense; Dit vult de lege plekken. grid-row-start en grid-column-start; Bepaalt waar een element begint.

En waar ik zelf leuk vind om mee te werken zijn grid-template-areas. Hiermee kan je makkelijk grids aan elementen geven. Ik heb hier een voorbeeld hoe ik dit in een toekomstige opdracht heb geimplementeerd.

Woensdag 10 september 2025

Vandaag had ik een les over Media querries en breakpoints. Hoe je devtools kan gebruiken om responsive formaten te zien (Wat ik al wist). Daarna zijn we in code media querries gaan gebruiken.

Wat heb ik geleerd?

@media screen alleen voor schermen. @media print alleen voor print (bijvoorbeeld bij afdrukken) en @media speech voor screen readers.

Maar in moderne CSS hoef je screen meestal niet meer te gebruiken, want browsers passen media queries standaard toe op schermen.

Donderdag 11 september 2025

Vandaag wilde ik verder werken met de learn javascript lessen omdat ik daar beter in wil worden. Ik heb de chapter over strings gemaakt.

Wat heb ik geleerd?

Je kunt strings maken met " (dubbele aanhalingstekens) of ' (enkele aanhalingstekens). Bijvoorbeeld: "Hallo" of 'Hallo'. .lengthis een property die de lengte van een string geeft. "Hallo".length geeft 5.

.toUpperCase() is een functie die de string omzet naar hoofdletters. "Hallo".toUpperCase() wordt "HALLO". .toLowerCase() is een functie die de string omzet naar kleine letters. "HALLO".toLowerCase() wordt "hallo".

Haakjes () zijn verplicht bij functies (zoals .toUpperCase()), maar niet bij eigenschappen zoals .length, omdat die al vooraf berekend is.

Vierkante haakjes [index] gebruik je om een specifiek character uit een string te halen. "Hallo"[0] geeft "H". De index begint bij 0. De .at() methode kun je ook gebruiken om een teken op een bepaalde index te lezen, en die kan ook negatieve waarden gebruiken. "Hallo".at(-1) geeft "o" (laatste teken).

Een substring is een deel van een string. string.substring(indexStart, indexEnd) wordt gebruikt om een gedeelte van de string terug te geven. indexStart: het begin, indexEnd: het einde "Hallo".substring(1, 4) geeft "all". Het indexEnd argument is optioneel, dus je kunt het weglaten. "Hallo".substring(2) geeft "llo".

De + operator wordt gebruikt om: twee getallen op te tellen, bijvoorbeeld 2 + 3 = 5 twee strings samen te voegen (concatenatie), bijvoorbeeld "Hi " + "daar" = "Hi daar".

Interpolatie

Een template string maak je met backticks in plaats van aanhalingstekens. `Hallo Wereld`. Template strings kunnen over meerdere regels gaan. Template strings ondersteunen interpolatie, wat betekent dat je variabelen erin kunt gebruiken met ${variablen}. Op de onderstaande foto zie je hoe ik interpolatie in een string gebruik.

Vrijdag 12 september 2025

Vandaag hadden we een code/design review dag, wij hebben als groepje feedback gegeven. Ik heb geleerd wat een HTML validator is en doet.

We Love Web

We hebben ook onze eerste We love Web gehad van Tolga. Tolga Doganer is een front-end developer bij Funda en ex-student van FDND. Hij liet ons in een presentatie zien hoe zijn process was tot Funda kwam. Wat ik interresant vond is hoe hij vertelde dat hij verantwoordelijk was over een bepaald stuk van een website waar alleen hij aan werkte.

Maandag 15 september 2025

In vandaags workshop werd uitgelegd wat visuele hiërarchie is en hoe je dit kan toepassen in je ontwerp.

Visuele hiërarchie is belangrijk in webdesign. Het vertelt mensen waar ze moeten kijken en welke dingen op het scherm het belangrijkst zijn.

Visuele Hiërarchie

Visuele hiërarchie kun je op verschillende manieren bereiken, zoals grootte van tekst of elementen, gebruik van kleur en contrast, en witruime en positie van elementen op het scherm.

De 3 niveau's van visuele hiërarchie volgens de “The inverted pyramid of writing”, belangrijkste informatie, belangrijke details en achtergrondinformatie

Divergeren en Convergeren

Ik heb deze les veel figma variaties gemaakt, door te experimenteren en verschillende variaties te maken en te bespreken met je team kom je tot nieuwe ontwerp-ideeën. Dat noemen we divergeren en convergeren. Tijdens het divergeren maak je veel variaties, tijdens het convergeren ga je de variaties bespreken en maak je keuzes om tot een nieuw ontwerp te komen.

Dinsdag 16 september 2025

Vandaags challange ging over Transform & Transitions.

De eigenschap transform verandert de vorm, positie of grootte van een element zonder dat het de layout van de pagina beïnvloedt (dus andere elementen schuiven niet mee).

De eigenschap transition bepaalt hoe snel en vloeiend een verandering van een CSS eigenschap verloopt bijvoorbeeld als iets van kleur verandert of verplaatst wordt met transform.

Wat heb ik geleerd?

transform: translate(100px, 50px) rotate(270deg) scale(2) skew(30deg);

translate() Verplaatst een element op de x- en/of y-as, zonder dat het de andere elementen beïnvloedt.

rotate() Draait een element om zijn middenpunt (of een ander “origin”-punt dat je kunt instellen).

scale() Vergroot of verkleint het element.

skew() Vervormt het element onder een bepaalde hoek, alsof je het scheef duwt.

Woensdag 17 september 2025

Als je een project oplevert, bijvoorbeeld voor een klant of een opdrachtgever, is het belangrijk dat je Repository er professioneel uitziet. Hiervoor kun je de Readme gebruiken. De Readme is het eerste wat iemand ziet op GitHub. In de Readme kan je uitleggen wat je hebt gemaakt. Je kan screenshots toevoegen en vertellen wie de website hebben gemaakt. In de README van deze repository kan je zien hoe ik dat geimplementeerd hebt.

Donderdag 18 september 2025

Vandaag ging ik weer een chapter doen op learn javascript. Het stond vandaag in het teken van Numbers.

Wat heb ik geleerd?

Van getal naar string omzetten gebruik je value.toString().

NaN betekent “Not a Number”. Het verschijnt wanneer iets dat eigenlijk een getal zou moeten zijn, geen geldig getal oplevert.

Van string naar getal omzetten gebruik je Number.parseInt(value, 10) Number.parseInt() is de naam van de functie die je aanroept. De 10 is de radix, oftewel het getallenstelsel dat gebruikt wordt. 10 betekent decimaal stelsel (normale getallen). Als je dit niet opgeeft, kan JavaScript verkeerde aannames doen, zoals het lezen van een getal als octaal (basis 8). Daarom altijd 10 meegeven!

De rest operator (%) geeft de rest van een deling tussen twee getallen. Bijvoorbeeld: 10 % 3; // 1. Want 10 gedeeld door 3 = 3 * 3 = 9, en 1 blijft over dat is de rest.

Vrijdag 19 september 2025

Vandaag was de afsluiting van de eerste sprint! We gingen een retrospect doen. Terugkijken op de afgelopen 2/3 weken, wat we hadden geleerd en wat we beter kunnen doen de aankomende sprint.

We hadden ook een nieuwe EXPO waar we onze squad page met alle eerste en tweede jaars deelde.

Maandag 22 september 2025

De eerste dag van de nieuwe sprint, dat betekent een sprint planning maken. Je begint een project altijd met een Sprint planning, dan weet je wat de planning is, wat we de komende weken gaan doen en wat er van je wordt verwacht.

Het overlegplatform van associate degrees

In deze sprint gingen we aan de slag met opdrachtgevers. We gingen gelijk aan de slag, want ze stonden gelijk al in het lokaal om kennis mee te maken. Ik heb uiteindelijk gekozen voor het overlegplatform in associate. Dit sprak me het meest aan omdat ik zelf ook een associate degree doe.

Debriefing en Briefing

Nadat we hadden gekozen hadden we een briefing van onze opdracht gever. Het briefingproces bestaat uit twee delen: een briefing van de opdrachtgever en een debriefing. De debriefing is noodzakelijk voor de opdrachtgever om na te gaan of duidelijk is overgekomen wat diegene voor ogen had. Maar ook voor mij, om te controleren of ik alles goed hebt begrepen.

Voordat ik een gesprek heb bereid ik me goed voor op het gesprek, zodat ik weet welke vragen ik moet stellen. Na de briefing stuur je de opdrachtgever een debriefing, waarin je in eigen woorden opschrijft wat jij denkt dat de opdracht inhoudt.

Dinsdag 23 september 2025

Op dinsdag hebben we weer onze vaste CSS challange dag, waar je je voor kunt aanmelden. Vandaag stond op de planning: gradients. Iets waar ik al wat vanaf weet. Ik heb me daarom niet veel verdiept in de makkelijke dingen, maar meer in de onderdelen waarin ik beter kan worden, zoals: repeat gradients, animaties van gradients en de verschillende properties die je op gradients kunt toepassen. Hieronder wat voorbeelden.

Radial Gradient

closest-side de cirkel stopt zodra hij de dichtstbijzijnde kant van de div raakt. Dus de cirkel is vrij klein. closest-corner de cirkel stopt bij de dichtstbijzijnde hoek van de div. De cirkel is iets groter dan bij closest-side. farthest-side de cirkel stopt bij de verste kant van de div. De cirkel is nu groter, omdat hij tot de verste rand gaat. farthest-corner de cirkel stopt bij de verste hoek van de div. Dit is de grootste cirkel die in de div past.

Conic Gradient

(repeating-)conic-gradient Een conic gradient is een CSS gradient die rond een punt draait, alsof je een taart of klok maakt. In plaats van dat de kleuren van het midden naar buiten lopen (zoals bij radial-gradient), lopen de kleuren langs een cirkel rondom het middelpunt.

Waar ben ik trots op?

Waar ik trots op ben is de laatste opdracht van deze les die ik af heb kunnen maken. Ik wil een paar dingen uitleggen omdat het best complex is.

Ik heb een variable gemaakt zodat ik niet overal de waarde 10vmin hoef te herhalen. Ik kan deze later ook overal in 1 keer aanpassen.

closest-side circle Dit bepaalt de vorm en grootte van de gradient. circle betekent dat het een cirkelvormige gradient is. closest-side zorgt ervoor dat de straal van de cirkel stopt bij de dichtstbijzijnde rand van het element.

De gradient maakt afwisselende zwarte en witte ringen:

black calc(100% - var(--cirkel-size)) calc(100% - .5 * var(--cirkel-size)) De ring begint bij 100% - var(--cirkel-size) en eindigt bij 100% - 0.5 * var(--cirkel-size)van de straal. white calc(100% - .5 * var(--cirkel-size)) calc(100% ) Dit is de witte ring direct erna. Loopt van 100% - 0.5 * var(--cirkel-size) tot 100% van de straal. Door repeating herhaalt dit patroon zich oneindig naar buiten.

Nu alleen nog laten animaren, dit heb ik met @keyframes gedaan.

Deze @keyframes animatie verandert de achtergrondgrootte van een element: 0% = het begin van de animatie: de achtergrond vult het hele element (100% 100%). 100% = het einde van de animatie: de achtergrond wordt iets groter dan het element, met extra ruimte van 2 * var(--cirkel-size) in zowel breedte als hoogte.

Woensdag 24 september 2025

Vandaag hebben wij een workshop gehad over prototyping, hoe je een idee kan uit schetsen op verschillende manieren.

Sidemap

Dit geeft een gestructureerde overzicht van alle pagina's op een webiste, je schetst dit als een soort van boom met takken.

Wireframe

Een Wireframe is een schematische tekening van een pagina. Met een Wireframe kun je (snel) schetsen hoe een pagina er uit kan komen te zien, wat belangrijk is, welke onderdelen waar komen te staan, wat in de viewport staat en wat de interactieve elementen zijn. Je kan een Wireframe LoFi (low fidelity) of meer HiFi (high fidelity) maken, met meer detail en kleuren. Voor een HiFi Wireframe kun je goed prototype software gebruiken, zoals Figma. Door LoFi Wireframes te schetsen kan je snel verschillende layouts uitproberen, ideeën visualiseren, bespreken en aanpassen.

Wireflow

Een Wireflow toont een aantal schermen van een interactie. Het is nuttig om uit te denken wat een gebruiker te zien krijgt als die iets op een pagina doet, zoals een formulier versturen of met een carrousel verschillende plaatjes of producten bekijken.

Donderdag 25 september 2025

Vandaag ben ik weer met learn javascript lessen bezig geweest. Vandaag chapter ging over Variablen.

Wat heb ik geleerd?

Wanneer je een variabele voor het eerst gebruikt in JavaScript, moet je deze declareren met let of const. Gebruik let voor variabelen waarvan je de waarde later nog wilt wijzigen (dus als je deze opnieuw wilt toewijzen). Gebruik const voor variabelen waarvan je de waarde niet meer wilt wijzigen nadat ze zijn ingesteld. Variabelen die met const zijn gedeclareerd, kun je niet opnieuw toewijzen, dus je mag geen = gebruiken naast die variabelenaam na de declaratie. Als je var ziet, komt dat uit een oudere versie van JavaScript. Je kunt het vervangen door let (of soms const, als de variabele niet opnieuw wordt toegewezen).

Vrijdag 26 september 2025

Vandaag was er een code/design review maar ik was niet aanwezig.

Maandag 29 september 2025

Normal flow of Flow Layout is de manier waarop block- en inline elementen op een pagina worden weergegeven voordat er wijzigingen met CSS worden aangebracht.

Dat is wat je ziet als je “kale” HTML in de browser bekijkt, en als je gekleurde randen om verschillende elementen zou zetten. Elk element is een rechthoekige “box”. In Flow Layout staan block level boxen onder elkaar, en inline level boxen naast elkaar. Met CSS kun je met verschillende modes een layout kan maken.

Layouts

Flexbox: Ideaal voor 1 dimensionale layouts (rij of kolom).

CSS Grid: 2 dimensionele layout (rijen en kolommen). Heel goed met complexe pagina layouts. Kan complete templates definiëren

Floats: Ouderwetse methode, oorspronkelijk niet bedoeld voor layouts. Werd vroeger gebruikt voordat Flexbox/Grid bestonden. Nu vooral gebruikt voor tekst om afbeeldingen te laten “floaten”

Positionering: static (default) absolute, relative, fixed,sticky Niet bedoeld als hoofdlayout, maar nuttig voor exacte plaatsing en overlays

Multi-column layout: Handig voor magazine achtige kolommen met tekst met display: masonry;

Dinsdag 30 september 2025

Vandaag had ik een CSS challange over flexbox. Flexbox is iets wat ik heel fijn vind om mee te werken.

Wat heb ik geleerd?

flex-grow bepaalt hoeveel extra ruimte een item mag innemen als er ruimte over is. flex-shrink bepaalt hoeveel een item mag krimpen als er te weinig ruimte is. flex-basis is de begingrootte voordat groei/krimp berekend wordt. flex De shorthand combineert alles: flex: grow shrink basis;

Woensdag 1 oktober 2025

Vandaag ben ik er voor gaan zorgen dat verschillende schermformaten een andere layout krijgen. Responsive Design. Ook heb ik geleerd hoe breakpoints werken, en hoe ik media queries op een handige manier in kunt zetten.

Breakpoints

Het is eigenlijk heel makkelijk. Stephen Hay beschrijft dit zo in zijn boek, Responsive Design Workflow: Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! Op een klein scherm beginnen dus, je scherm groter maken totdat het lelijk wordt. En dat is het moment waarop je een breakpoint nodig hebt.

Deze basisregels voor goed leesbare teksten kun je toepassen op je ontwerp: Tekst is minimaal 16px groot De regelafstand van langere teksten is 1.4 (140%) De optimale lengte van de regels is 10–12 woorden

Media queries

Op kleine schermen gebruik je vaak één kolom voor je hele layout. De standaard Flow Layout met een max-width werkt hier heel goed voor. Dit noemen we ook wel de One Column Layout. Zodra je meer ruimte op je scherm hebt, kun je meerdere kolommen naast elkaar gaan zetten, met andere Layout Modes. Sommige elementen zullen over meerdere kolommen lopen (zoals een header of footer), sommige elementen zul je gaan opsplitsen. Ook hierbij gelden nog steeds de vuistregels voor leesbare teksten. We gebruiken het Mobile First principe, te zien aan de min-width media query

Door Mobile First te werken, werk je met Progressive Enhancement, een belangrijk principe van het Web: je begint simpel op kleine schermen, en maakt het steeds complexer op schermen en browsers die meer aan kunnen.

Donderdag 2 oktober 2025

Vandaag ben ik weer bezig geweest met de learn javascript lessen. Ik heb deze keer de chapter conditions afgemaakt.

Dit is wat ik heb geleerds:

Met een if statement kun je een stuk code uitvoeren wanneer de statement waar (true) is.

De else statement kun je gebruiken om andere code uit te voeren wanneer de if condition niet waar (false) is.

Wanneer je een if/else statement hebt die twee verschillende resultaten teruggeeft, kun je het else gedeelte soms weglaten, omdat de code na de if automatisch wordt uitgevoerd als de waarde niet is voldaan.

Gebruik in JavaScript altijd drievoudige gelijkheidstekens (===) bij het vergelijken van twee waarden. Dat zorgt ervoor dat zowel de waarde als het type gelijk moeten zijn (bijv. 3 === "3" is false omdat het ene een getal is en het andere een string).

Wanneer je een boolean (true of false) wilt teruggeven vanuit een functie, kun je de remainder gebruiken door de vergelijking direct te retourneren, zonder een aparte if statement te gebruiken.

Vrijdag 3 oktober 2025

Vandaag was er een code/design review en een We Love Web expo maar ik was niet aanwezig.

Maandag 6 oktober 2025

Ik heb vandaag een rustige les over HTML. Het is de laatste tijd best veel geweest kwa code. Dus mijn files kunnen best onrustig geworden zijn. Dus ik heb mijn code gerefactord (herschreven), en het weer duidelijk gemaakt.

Dinsdag 7 oktober 2025

Ik zou vandaag normaal gesproken een CSS challange hebben over positionering, maar die ben ik niet bijgewoond.

Hier is toch een kleine samenvatting van wat ik in me vrije tijd heb geleerd hier over:

Position: static; Standaardwaarde voor alle elementen, het element staat in de normale document flow en top/left/bottom/right hebben geen effect.

Position: absolute;Element wordt uit de document flow gehaald en positie wordt bepaald t.o.v. het dichtstbijzijnde gepositioneerde parent.

Position: relative; Element blijft in de normale document flow. Je kunt het verplaatsen met top/left/bottom/right, maar de ruimte die het inneemt blijft behouden, handig als anker voor absoluut gepositioneerde kinderen en neemt geen ruimte meer in de layout in.

Position: sticky;Een mix van relative en fixed, start als een normaal element (relative). Wanneer je scrollt en een bepaalde scrollpositie (bijv. top: 0) bereikt, wordt het element vastplakken aan dat punt, alsof het fixed is. Super handig voor sticky headers of sidebars.

Position: fixed;Element is vastgepind aan de viewport. Scroll je, dan blijft het element op dezelfde plek staan. Meestal gebruikt voor navbar, floating buttons, banners.

Woensdag 8 oktober 2025

Tijdens de wrap-up gingen we bekijken wat we nog konden afmaken voor de Sprint Review, wat wilde ik donderdag (sprint review) laten zien en wat is daar nog voor nodig?

De Sprint Review is bedoeld als het officiële moment tijdens elke sprint, waarin je het gemaakte werk bespreekt met de opdrachtgever. De opdrachtgever geeft feedback naar aanleiding van het (deel)product dat gedemonstreerd is. Het maakt niet uit dat de opdracht nog niet af is, je kan altijd laten zien waar je aan hebt gewerkt en bespreken of jouw oplossing overeenkomt met de wensen van de opdrachtgever.

Donderdag 9 oktober 2025

Vandaag had ik mijn eerste sprint review van de opdracht gever, ik had deze met al de 1e en 2e jaars (ongeveer 11 personen totaal). Eerst gingen alle 1e jaars omstebeurt presenteren wat ze hadden gemaakt en als laatste de 2e jaars als groepje.

Elke keer als iemand gepresenteerd had, kregen ze feedback van de leerlingen en opdrachtgever. Netzoals ik. Hier heb ik issues van gemaakt.

Vrijdag 10 oktober 2025

Vandaag was er een retrospect en een We Love Web expo maar ik was niet aanwezig.

Maandag 13 oktober

Vandaag is sprint 3 begonnen! Dat begint altijd weer met een sprint planning. Deze sprint gaat over toegankelijk van een website.

Het is de verantwoordelijkheid van een frontender dat een website voor verschillende mensen, met verschillende apparaten, in verschillende situaties, Toegankelijk is. Met goede code en een goed design kun je ervoor zorgen dat mensen met een (tijdelijke) beperking een website ook op een prettige manier kunnen bedienen.

Een goede toegankelijke website voldoet aan de Web Content Accessibility Guidelines (WCAG) van het W3C. The A11Y Project is een goede plek om te lezen over toegankelijkheid, daar staat ook een checklist waar een website aan moet voldoen, en waarmee je je eigen site kunt controleren.

Ik heb ook geleerd wat een lighthouse test is, die je in een Chrome browser kan uitvoeren. In de Devtools kun je Lighthouse gebruiken.

Dinsdag 14 oktokber

Vandaag had ik weer een CSS challenge, en een zeer interressante ook. Namelijk over kleur.

RGB

RGB is vrij vernieuwd, in de oude versie gebruikte je namelijk: color: rgb(255, 0, 0); met comma's. De nieuwe is: color: rgb(255 0 0 / .5); (Optioneel met transparantie). Dit is om meer consistentie in te bregen, want andere color functies hoeven dat ook niet.

HSL

HSL staat voor: Hue Saturation Lightness. Voor designers en developers is HSL prettig omdat je kleuren makkelijk kunt aanpassen. Wil je een kleur donkerder? → verlaag lightness. Wil je minder felle kleuren? → verlaag saturation. Wil je een andere tint? → verander hue In CSS wordt dat bijvoorbeeld zo gebruikt: color: hsl(270deg 100% 50%);

HEX

Een hex kleur begint altijd met een # en bestaat uit 6 cijfers/letters (soms 3). Bijvoorbeeld:color: #FF5733; De FF staat voor red, 57 voor green en 33 voor blue. Je zou ook transparantie kunnen toevoegen, dit doe je met een waarde van 2 cijfers of letters. Bijvoorbeeld: color: #FF573366. 00 → 0, 33 → 0.2, 66 → 0.4, 99 → 0.6, CC → 0.8 en FF → 1.

Display-P3

Display-P3 is een kleurprofiel dat steeds belangrijker wordt in moderne schermen en webdesign. Het is ontwikkeld door Apple, gebaseerd op de traditionele DCI-P3 (gebruikt in digitale cinema), maar aangepast voor beeldschermen. Display-P3 kan veel meer kleuren weergeven dan RGB Dit is een kleur met standaard RGB syntraxcolor: rgb(0 1 0); en dit is een display-p3 syntrax: color: color(display-p3 0 1 0);. Er is een duidelijk verschil.

oKLCH

oKLCH staat voor: Oklab (basis), K (geen echte betekenis, gebruikt als prefix), L (lightness), C (chroma) H (hue). Het is is een moderne, perceptueel uniforme kleurruimte die ontworpen is om kleuren op een manier te beschrijven die veel beter aansluit bij hoe mensen kleur zien en ervaren. Het wordt steeds populairder in o.a. webdesign en CSS-color-level 4. Je kan dit schrijven op bijvoorbeeld deze manier: color: oklch(0.6426 0.2426 25.67);

Gradients

In RGB of HSL krijgen gradients vaak een modderige of grijze middenkleur omdat de helderheid niet gelijkmatig verloopt. OKLCH is ontworpen zodat “lichtheid” overeenkomt met wat je oog als licht/donker ervaart. Dit kan je implenmenteren met: background-image: linear-gradient(90deg in okLCH, orange, pink);

Woensdag 15 oktober 2025

Als frontender heb je de verantwoordelijkheid om een goede gebruikerservaring voor eindgebruikers neer te zetten. Goede HTML helpt bij die goede User Experience (UX). En slechte HTML zorgt voor een slechte gebruikerservaring. Dat klinkt logisch, maar het Internet (en ook ChatGPT) staat vol met voorbeelden van slechte HTML. Ik heb gezien dat HTML veel biedt als basislaag. En met CSS als extra laag kan ik dit er vaak ook nog mooi uit laten zien. Dit noemen we Progressive Enhancement: zoek de simpelste techniek om iets voor elkaar te krijgen, en verrijk die pas daarna. HTML heeft meer dan 100 elementen, allemaal met hun eigen ingebouwde UX.

Ik ben verder gegaan met de issues die open stonden in mijn projectboard, zoals de feedback van de opdrachtgever.

Donderdag 16 oktober 2025

Vandaag wilde ik weer een hoofdstuk doen van de learn javascript lessen. Ik heb de chapter over array's gemaakt, die ik tot nu toe wel het moeilijkst vind.

Wat heb ik geleerd?

const data = [1, 2, 3] is een array die 3 getallen bevat. De eigenschap array.length geeft het aantal elementen in de array terug. Met array.push(x) kun je de variabele x toevoegen aan het einde van de array, en deze methode geeft daarna de nieuwe lengte van de array terug. Arrays die met const zijn gedefinieerd, zijn geen echte constanten omdat je de elementen erin kunt wijzigen, maar je kunt de array zelf niet opnieuw toewijzen; het blijft dus altijd een array. De methode .forEach(callback) loopt over elk item in de array. Een callback is hierbij een functie die als parameter wordt doorgegeven aan een andere functie. Het is handig om te beginnen met een console.log() binnen de .forEach() om te zien hoe de overgang van array naar individueel item werkt, totdat je eraan gewend bent. De .forEach() methode voert jouw callback uit voor elk item, waarbij de eerste parameter telkens het betreffende array item voorstelt. Het is aan te raden je arrays in het meervoud te noemen en de items binnen de .forEach() in het enkelvoud. Let er ook op dat je de return op de juiste plaats zet in functies die gebruikmaken van .forEach().

Vrijdag 17 oktober 2025

Deze week heb ik geleerd wat toegankelijkheid is en hoe ik een toegankelijkheidstest kunt uitvoeren. Daarnaast hebben we gekeken naar hoe je met HTML een goede User Experience (UX) neerzet als front-ender. Vandaag stond in het teken van feedback geven en krijgen. Ik heb feedback gekregen op mijn WCAG audit test op de website van mijn werk. Hier is de issue.

Maandag 27 oktober 2025

Vandaag stond in het teken van kleuren en contrasten. Je denkt misschien dat iedereen kleuren en contrasten op een zelfde manier ervaart zoals jij. Maar het ervaren van kleuren op een website wordt beïnvloed door omgevingsfactoren en hoe mensen kleuren waarnemen. Ik heb geleerd hoe ik in inspector kan testen op kleurenblindheid. Open Chrome Devtools → Click 3 dots → Select More tools → Select Rendering → Emulate vision deficiencies

Gebruik onderscheidende kleuren

Voor goed leesbare teksten, maar ook voor bijvoorbeeld de visuele hiërarchie is het onderscheid in kleuren belangrijk. Een hoog kleurcontrast valt meer op en weinig contrast zorgt ervoor dat teksten moeilijk te lezen zijn. Effectieve kleurcontrasten zijn complementaire kleuren. Dat zijn de kleuren die tegenover elkaar staan op de kleurencirkel (Behalve bij rood en groen).

Teksten op plaatjes

Teksten op een plaatje worden vaak gebruikt in webdesign. Maar je kan je misschien wel voorstellen dat het niet altijd goed te lezen is, omdat de kleurcontrasten onvoldoende zijn. Door het gebruiken van een overlay of semi-transparent gradient is een tekst beter leesbaar.

Kleurcontrasten testen

In de richtlijnen staat waar je kleurcontrasten aan moeten voldoen voor een goede toegankelijkheid. Hoe hoog of laag een kleurcontrast is, kan je zien aan de contrast ratio. Daarvoor wordt de voorgrondkleur vergeleken met de achtergrondkleur. Een hoog contrast voor normale teksten heeft bijvoorbeeld een contrast ratio van 9:1. Een te laag contrast is bijvoorbeeld 3:1. Voor contrasten worden 3 levels onderscheiden: A level: het minimale niveau waar het contrast aan moet voldoen AA level: een contrast niveau dat voor de meeste gebruikers toegankelijk is AAA level: het hoogste niveau, het is toegankelijk voor alle gebruikers Kleurcontrast kan je testen en beoordelen met behulp van de WCAG richtlijnen. Ik heb hiervoor de app Colour Contrast Analyser (CCA) gedownload.

Maandag 28 oktober 2025

Maandag 29 oktober 2025

Maandag 30 oktober 2025

Maandag 31 oktober 2025

Bronnen

Bronnen

Bronnen

Bronnen

Bronnen