Week 1

Project Setup

De eerste week ga ik kijken wat er allemaal te doen staat voor dit project. Om dit gestructureerd te kunnen doen houd ik onderstaande planning aan.

Openstaande taken (To-Do)

Verder heb ik alvast gekeken naar de taken die nog open staan en wat er nodig is om deze taken te realiseren. Dit zijn taken waar ik aan zal werken na de project setup.

Project Board

Vervolgens ben ik begonnen met het aanmaken van een projectboard. Een aantal taken heb ik gekopieerd van de projectboard van Sprint 18, dit zijn taken waar het vorige team niet aan toe zijn gekomen, waarmee ik verder ga werken. Ook heb ik extra taken aangemaakt wat betreft bugs die gefixt moeten worden, en kleine aanpassingen omtrent accessibility.

Web3forms

Een van de taken waarmee ik aan de slag moet, is het bouwen van een formulier. Door het invullen van deze formulier kan de gebruiker bijvoorbeeld feedback achterlaten of een vraag stellen. Hiervoor heb ik mij verdiept in web3forms.

Web3forms laat zien hoe je een formulier kan maken die gekoppeld is aan een e-mailadres. Het e-mailadres die je hieraan koppeld krijgt dat een unieke token. Deze token moet je implementeren bij een hidden input field zodat na het invullen van een formulier, de ingevulde velden terecht komen in de mailbox van het desbetreffende e-mailadres.

Na dieper in te gaan op de documentatie, heb ik een pagina gevonden waarbij zij de code zo hebben aangepast, dat het bruikbaar is in svelte projecten. Dit is perfect voor mijn project. Deze feature ga ik dus ook toevoegen.

Lightmode/Darkmode

Verder moest ik ook aan de slag met het bouwen van een thema switch. Ik heb mij verdiept in deze bron. Dit is een video die een voorbeeld laat zien van hoe je een thema switch zou kunnen bouwen.

In deze video maken zij gebruik van custom properties. Na het klikken van een button (de thema switch button), wordt er een class getoggled. Deze class zorgt ervoor dat de huidige custom properties overschreven worden en de aangegeven kleuren aangepast worden.

Onhandig

Dit lijkt op een erg handige manier, toch zijn er wat kleine dingen waar ik tegen aan zal lopen als ik de thema switch op een soortgelijke manier wil bouwen. De icoontjes, svg's, in de navbar zullen ook van kleur moeten veranderen. De icoontjes hebben oorspronkelijk een witte kleur, na de thema switch heeft de website een witte achtergrond waardoor de SVG's niet meer zichtbaar zijn.

Omdat deze manier van implementeren mij toch er handig leek, moest ik hiervoor een oplossing zoeken. Met dit probleem ben ik naar Cyd gegaan. Met dit artikel hebben wij mijn probleem samen opgelost. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Hiermee kan je attributen stylen, waaronder het attribuut 'fill' van een svg.

Bevindingen

1. Geen close button bij het toevoegen van een partner. Als een gebruiker hier per ongeluk op klikt, is er buiten de esc knop op je toetsenbord, geen manier om deze pop-up te sluiten.

2. Button een duidelijkere hover animatie geven. De transparantie van de text wordt een klein beetje verminderd, slecht ziende mensen zien hier niks van.

3. Contrast van de titel is niet goed geeft lighthouse aan.

4. Header elements staan niet op de juiste volgorde.

Week 11-20

Vervoerregio Amsterdam

Week 11

Deze week heb ik met Eliza de de website van vervoerregio amsterdam geanalyseerd. We hebben verschillende afspraken vastgesteld, zoals codeconventies, het teamcanvas en het projectbord nogmaals doorgenomen om te controleren wat er al is gedaan en wat er nog moet gebeuren. Eliza had zelf ook nog wat verbeterpunten, gebaseerd op basis van wat ze heeft geleerd bij CMD. Verder heb ik Eliza op de hoogte gesteld van de prioriteiten.

Team Canvas

...