9. Wiki gemeentevoorbeeld.nl - TessaViergever/frameless.io GitHub Wiki

Voor het bijhouden van mijn werk, processen en lessen in gemeentevoorbeeld.nl

Analyseren

πŸ“… Week 5

Sprint 1, week 1.

Yolijn heeft taken voor een sprint van 2 weken klaargezet in het project board. Marwa en ik hebben deze taken verdeeld. Ik pak de taken van het klachtenformulier en zij pakt de mijn omgeving taken.

We hebben het op deze manier gedaan omdat ik met Yolijn had besproken dat klachten een optie voor mij zou kunnen zijn en ik al was begonnen met inventariseren. Ik heb de website van de gemeente Utrecht als voorbeeld genomen hiervoor. Ik had volgens de logica van GU al issues aangemaakt en deze kwamen voor een groot deel overeen met wat Yolijn klaar had gezet.

Daarnaast heeft Marwa al een formulier gedaan in GV als eerdere taak (verhuizing doorgeven) dus mijn omgeving is voor haar een uitdaging. We hebben dagelijks contact na de standup, mocht een van ons eerder klaar zijn dan de ander, kunnen we elkaar helpen of nieuwe issues bedenken om op te pakken. Als een van ons er niet uitkomt, helpen we elkaar. We hebben ook afgesproken dat het een optie is om in de tweede week van deze sprint nog van strategie te veranderen en samen aan 1 taak te werken. Tot slot hebben we samen gekeken in welke map we moeten werken. Dit was even zoeken maar omdat de contact pagina in /wmebv stond en onze pagina's daarop aansluiten, kwamen tot de conclusie dat we het beste in die map aan de slag konden gaan.

Productpagina klachtenformulier

Ik ben begonnen met Issue #418. Het aanmaken van een klachtenformulier productpagina. In de issue zelf heb ik subtaken gemaakt en houd ik mijn process bij. Ik weet nog niet helemaal of ik dit de meest handige manier van werken vind, maar losse issues aanmaken voor subtaken op hetzelfde project board vind ik erg onoverzichtelijk. Vandaar dat ik voor deze optie ben gegaan, zo kan ik namelijk wel duidelijk zien dat het bij deze issue hoort.

Omdat dit project nieuw is voor mij, heb ik eerst rondgekeken in de mappen. Hoe is de structuur opgebouwd? In welke map moet ik werken? Waar staat de css? etc. Dit vond ik erg verwarrend maar ik kon niet goed plaatsen of het project onoverzichtelijk was of dat mijn kennis nog niet voldoende was om hier een goede inschatting over te maken.

Daarom ben ik begonnen met informatie opzoeken over de tech stack van dit project. Zo ben ik gestart met een React course op Frontend Masters. Dit project maakt namelijk gebruik van React, Next.js en typescript, met geen van deze heb ik eerder gewerkt. Ook heb ik informatie opgezocht over deze technieken. Wat ik ook heb gedaan om mezelf bekend te maken met deze nieuwe tools, is een PR van Marwa bekeken van verhuizing doorgeven. Welke syntax gebruikt ze? Hoe roept ze componenten aan? etc.

🌐 TypeScript documentatie 🌐 MDN | Getting started with React 🌐 Next documentatie

πŸ“… Week 6

Sprint 1, week 2.

Marwa en ik zijn erachter gekomen dat we toch niet in de /wmebv moeten zijn. Rowan vertelde ons dat /wmebv een project was waar niet langer aan gewerkt wordt en dat het dus niet de bedoeling is om hier nieuwe mappen in te zetten. We hebben daarom ons werk verplaatst naar /app. We hebben wel pagina's nodig uit de /wmebv. Bijv voor de stappen om in te loggen met DigiD. We moeten even uitzoeken of we die pagina's kunnen gebruiken, of dat we deze kunnen kopieren en in onze map zetten of dat we wellicht zelf nieuwe pagina's hiervoor moeten opzetten.

Ontwerpen

πŸ“… Week 5

Sprint 1, week 1.

Productpagina klachtenformulier

Voor de productpagina heb ik zelf geen ontwerp hoeven maken. Deze stond al klaar in Figma en volgt de logica van de website van Gemeente Utrecht.

Dit is de eerste keer dat ik werk met een ontwerp dat al klaarstaat in Figma. Ik vond het wel een fijne rode draad om te hebben. Veel componenten zijn in Figma zo opgebouwd als hoe het in code komt te staan.

// πŸ’‘ Ik heb geleerd dat je het Figma ontwerp niet klakkeloos kunt volgen. Niet alles komt overeen, bijv. de namen van componenten. Bijna alle componenten heb ik kunnen importeren (zie bouwen) op basis van de namen in Figma. Echter niet ieder component leek te bestaan (bijv. PreFooterNavLink).

Bouwen

πŸ“… Week 5

Sprint 1, week 1.

Productpagina klachtenformulier

Mijn eerste stap was het aanmaken van een .tsx bestand. Wat ik eerst niet doorhad, is dat dit bestand altijd "page.tsx" moet zijn. In eerste instantie had ik het bestand "productpagina-klachtenformulier.tsx" genoemd. Toen ik zag dat alle andere mappen enkel "page.tsx" bestanden bevatte, heb ik dit aangepast. Het .tsx bestand heb ik in een folder geplaatst met de naam "productpagina klachtenformulier". Op deze manier is duidelijk waar de "page.tsx" over gaat.

// πŸ’‘ Ik heb geleerd dat een TSX bestand het mogelijk maakt om HTML in TypeScript te schrijven. In de React course op FM werd uitgelegd dat JSX het mogelijk maakt om HTML in JavaScript te schrijven. Op FDND hebben we hier EJS voor gebruikt dus dit concept herkende ik. Omdat ik wist dat we TS gebruiken bij GV en in andere mappen .tsx bestanden zag staan, had ik snel door dat TSX de TypeScript variant was van JSX.

Op de contactpagina heb ik de URL aangepast zodat deze linkt naar mijn productenpagina klachtenformulier.

Om te testen of alles werkt zoals ik wil/verwacht heb ik eerst de content van een andere pagina uit de map /wmebv gebruikt op mijn pagina. De content werd getoond en op de juiste url. Op dit punt heb ik mijn eerste commit voor GV gedaan.

Vanuit deze opzet ben ik gaan bouwen naar het ontwerp. Ik heb gekeken uit welke componenten het Figma ontwerp is opgebouwd en onderzocht of ik deze kon importeren. Een aantal waren snel gelukt, andere kon ik niet vinden. Daar heb ik tijdelijk HTML elementen voor gebruikt, dit werkt ook maar is niet de gewenste oplossing. Hier heb ik subtaken voor aangemaakt binnen issue #418.

Tijdens het rondneuzen in Marwa's "verhuizing doorgeven" PR, kwam ik er toevallig achter dat zij uit een andere React library importeerde. Haar componenten begonnen namelijk niet met "Utrecht", die van mij wel en dit vond ik vreemd. Dit heb ik aan haar voorgelegd en samen hebben we de puzzel opgelost. Zij heeft een pagina uit de folder /meldingen als voorbeeld genomen, daar werden de componenten vanuit from '@utrecht/component-library-react'; ingeladen. De pagina die ik als voorbeeld nam, importeerde vanuit from '@utrecht/web-component-library-react';. Vanuit deze library kon ik de componenten wel inladen en heb ik de tijdelijke HTML vervangen door de juiste componenten.

Het is niet gelukt om ieder compontent te vinden. Ik weet niet of er wellicht nog een andere library is, dat de naamgeving vanuit Figma verkeerd is of dat dit component simpelweg niet bestaat en nog gebouwd moet worden. Deze heb ik als subtaak laten staan in issue #418.

πŸ“… Week 6

Sprint 1, week 2.

Productpagina klachtenformulier

De componenten uit de web component library heb ik zo veel mogelijk vervangen door componenten uit de component library. Vanuit de documentatie van NLDS leek me dit een betere optie.

Vervolgens ben ik begonnen met styling van de componenten. Er was al styling meegekomen, ik weet niet precies waar die vandaan kwam. Wat ik begrepen had, is dat je een class op de componenten moest zetten om styling toe te kunnen passen. Omdat ik een andere pagina als opzet heb gebruikt, werd al een css bestand gelinkt. Hier stonden een aantal componenten al in die ik ook gebruikte maar het klopte gewoon allemaal net niet.

Het was me ook niet duidelijk hoe ik de juiste styling op de componenten kreeg. Moet ik iets importeren? Moet ik een bestaand css bestand gebruiken (bijv global?) Moet ik zelf een nieuw bestand aanmaken? Om hier meer duidelijkheid over te krijgen ben ik weer het project ingedoken om te kijken hoe dit bij andere componenten gedaan werd. Dit heeft echter enkel voor meer verwarring gezorgd. Er is zowel een global.css, als losse .css files. Het is niet consistent, zowel de structuur als inhoudelijk: sommige css files bevatten custom properties (dat is volgens mij hoe het werkt volgens NLDS) maar sommige bestanden hadden ook alleen gewone css rules.

Op een gegeven moment heb ik een spotlight class uit een css bestand op mijn spotlight component gezet.

Toen werd de styling toegepast zoals in het bestand stond maar dit kwam (voor mijn gevoel) totaal niet overeen met de GV huisstijl. Ook in het Figma ontwerp was de feel van de styling helemaal anders. Dit heb ik aan Marwa voorgelegd. Zij gaf aan dat zij eenzelfde component gebruikt heeft en hier styling bij kreeg die leek op mijn default styling. Echter kreeg haar component wel padding, die van mij niet. Haar css kwam uit een bestaand css bestand uit een andere map dan mijn css bestand. Het is nog niet gelukt om dit op te lossen, de subtaak staat open in issue #418.

Default styling?:

Nieuwe styling na gebruik van class uit bestaand css bestand:

Hoe het component er in Figma uitziet (Gemeente Utrecht):

Hoe het component er bij Marwa uitziet:

πŸ“… Week 9

BreadcrumbNav

Is het in BreadcrumbNav beter om BacklinkIcon of IconChevronRight te gebruiken? β†’ de feedback/hypothese van Yolijn: is een BacklinkIcon misschien een betere optie (semantisch)? Wellicht krijgt deze wel automatisch styling mee?

Dit is huidige status van BreadcrumbNav (IconChevronRight)

Wanneer ik BacklinkIcon gebruik lijkt deze inderdaad andere styling mee te krijgen dan IconChevronRight.

Echter lijkt deze me toch niet de beste optie. In het Figma ontwerp van Utrecht staat de pijl namelijk naar rechts (zoals IconChevronRight). Wanneer ik BacklinkIcon gebruik, is het precies andersom. Dat je bij een terug link de pijl naar links hebt staan vind ik logisch. Bij een Breadcrumb wil je laten zien via welke pagina's je op de huidige bent gekomen, daar vind ik een pijl naar rechts beter passen.

Het lijkt me de bedoeling dat ik hem op GV ook op deze manier toepas, daarom heb ik gekeken naar meldingen graffiti pagina visueel & code, opties van het component en storybook documentatie:

Hier heb ik ook ontdekt dat gebruik gemaakt kan worden van BreadcrumbNavSeparator, deze heb ik in mijn code ook toegepast.

Dit is nu de status van het BreadcrumbNav component op de klachtenpagina:

   <BreadcrumbNav label="Kruimelpad" className="utrecht-breadcrumb-nav__list">
        <BreadcrumbNavLink href="/" index={0} rel="home" className="breadcrumNav-link">
          Home
        </BreadcrumbNavLink>
        <BreadcrumbNavSeparator />
        <IconChevronRight className="voorbeeld-chevron-right-space" />
        <BreadcrumbNavSeparator />
        <BreadcrumbNavLink href="/wmebv#" index={1} rel="contact">
          Contact
        </BreadcrumbNavLink>
        <BreadcrumbNavSeparator />
        <IconChevronRight className="voorbeeld-chevron-right-space" />
        <BreadcrumbNavSeparator />
        <BreadcrumbNavLink href="" index={2} rel="up">
          Producten
        </BreadcrumbNavLink>
      </BreadcrumbNav>

β†’ Wat ik nu wil uitzoeken, is hoe ik de stijling zo kan krijgen als in het voorbeeld. Welke CSS class kan ik gebruiken? In welk bestand? etc

BreadcrumbNav styling

Na zelf onderzoek te hebben gedaan ben ik naar Robbert gegaan met mijn vraag. Hij heeft meegekeken in mijn code en daar kwamen we erachter dat ik het component niet helemaal goed toegepast had. Ik heb namelijk een zelfsluitende variant gebruikt en daar de icon tussen gezet. Ik had wel naar het voorbeeld gekeken maar niet gezien dat ik het component verkeerd toegepast had in mijn code. 🌐 voorbeeld

Het is een kleine aanpassing in code met een groot verschil op de pagina.

      <BreadcrumbNav label="Kruimelpad" className="breadcrumb-nav">
        <BreadcrumbNavLink href="/" index={0} rel="home">
          Home
        </BreadcrumbNavLink>
        <BreadcrumbNavSeparator>
          <IconChevronRight className="icon-chevron-right" />
        </BreadcrumbNavSeparator>
        <BreadcrumbNavLink href="/wmebv#" index={1} rel="contact">
          Contact
        </BreadcrumbNavLink>
        <BreadcrumbNavSeparator>
          <IconChevronRight className="icon-chevron-right" />
        </BreadcrumbNavSeparator>
        <BreadcrumbNavLink href="/404" index={2} rel="up">
          Producten
        </BreadcrumbNavLink>
      </BreadcrumbNav>

PreFooterNav

Eerder liep ik tegen het knelpunt aan dat een component in Figma niet bestond als component. Mijn oplossing was toen om dit component zelf op te bouwen op de pagina. Hier mocht ik deze week een los lokaal component van maken. Dit zijn de stappen die ik heb gezet.

  1. een nieuwe folder gemaakt in components (PreFooterNav)
  2. een pre-footer-nav.css en PreFooterNav.tsx file aangemaakt in de PreFooterNav folder
  1. het stukje code uit page.tsx gehaald en deze in PreFooterNav.tsx gezet
  2. de styling regels uit productpagina-klachtenformulier.css gehaald en in pre-footer-nav.css gezet
  3. code van andere componenten bekeken, vergeleken, aangepast en toegevoegd aan het nieuwe component (export etc.)
  4. extra imports gedaan die nodig waren (zoals. het .css bestand, icons uit Tabler en Link component uit Utrecht react library)
  1. in page.tsx heb ik het nieuwe PreFooterNav component geimporteerd en deze op de juiste plek in de code gezet
  1. tot slot heb ik getest of de pagina nog werkte zoals verwacht en dit was het geval, yay!

Styling PreFooterNav

Om het PreFooterNav component responsive te krijgen (en op het mobiele ontwerp te laten lijken) ben ik aan de slag gegaan in pre-footer-nav.css.

De huidige staat van de pagina op mobiel:

In eerste instantie had ik hier padding: 2em; voor gebruikt. Dit heb ik gedaan omdat de px waardes die in het Figma bestand stonden niets deden toen ik deze in de code had gezet.

Van Rowan had ik de feedback (op mijn draft PR) ontvangen dat ik spacing beter met een voorbeeld spacing token kon doen. Dit was weer een belangrijk stukje informatie waardoor het toepassen van de css op componenten me steeds duidelijker wordt.

Vervolgens heb ik in de Figma voorbeeld bibliotheek gezocht naar de tokens en deze bestudeerd.

Van Robbert heb ik de tip gekregen om mezelf de vraag te stellen of iets inline of block moet zijn zonder css. Op basis daarvan heb ik voor iedere plek waar ik "em" gebruikte, de tokens gekozen waarvan ik dacht dat het de beste match was.

In het code hieronder zie je hoe ik deze tokens ingezet heb om de pagina responsive te krijgen. Ook heb ik gelet op het maken van BEM classnames.

/* Media Queries */
@media screen and (max-width: 600px) {
  .voorbeeld-pre-footer {
    display: flex;
    flex-direction: column;
    gap: var(--voorbeeld-space-row-pig);
    padding: var(--voorbeeld-space-block-rabbit);
  }

  .voorbeeld-pre-footer-link:nth-of-type(2) {
    align-self: flex-end;
    justify-self: flex-end;
    gap: var(--voorbeeld-space-inline-mouse);
  }
}

Het eindresultaat op mobiel:

// πŸ’‘ Van Rowan heb ik geleerd dat wanneer ik IN DE CSS VAN EEN COMPONENT (in dit geval pre-footer-nav.css) styling op een te generiek class of element zet (zoals in dit geval a:first-of-type color:red;) dan komt deze styling via het component alsnog op de volledige pagina. Het is dus niet zo dat styling beperkt blijft in het component waaraan het CSS bestand gekoppeld is. Omdat je het component vervolgens op de pagina inlaadt, komt ook die styling op de pagina. Dit had ik niet verwacht, ik dacht dat je styling globaal kon meegeven aan alle pagina’s (via een globals.css of layout.css). En dan binnen een component de specifieke styling uit het bestand die je eraan koppelt.//

  • UnorderedListItem styling

Integreren

Bij Frameless wordt gewerkt met Git, bij FDND heb ik alleen GitHub Desktop gebruikt. Die mag ik hier ook gebruiken maar ik denk dat het van grote meerwaarde kan zijn als ik leer werken met de terminal. Meer bedrijven zullen hiermee werken en ik denk dat ik uiteindelijk sneller kan werken als ik dit onder de knie heb.

Om dit te bereiken ben ik gestart met een Git course op Frontend Masters. Ik merkte dat ik hier nog wat basis voor miste dus heb eerst wat onderzoek gedaan naar de basisconcepten van Git. Daarnaast probeer ik alleen met Git te werken, als ik hier niet uitkom zoek ik eerst zelf online naar oplossingen of vraag ik ChatGPT om hulp. Als dat niets oplevert vraag ik een van mijn collega's of ze met mee willen denken/kijken.

🌐 Git documentatie

πŸ“… Week 5 & 6

Productpagina klachtenformulier

Gedurende de sprint heb ik een aantal commits gedaan. Het is gelukt om dit zonder GitHub Desktop te doen. Van Marwa heb ik een aantal handige commands gekregen. Ook heb ik hulp gevraagd toen het niet lukte om mijn branch te updaten van main.

// Wat ik heb geleerd is dat je zowel de terminal in VSC als iTerm kan gebruiken. Zelf vind ik het wel prettig om vanuit de terminal in VSC te werken, dit voelt logischer omdat ik daar ook met code bezig ben.

Ook heb ik Gitmoji gebruikt bij mijn commits.

// πŸ’‘ Wat ik heb geleerd is dat ik mijn commits kleiner kan maken. Met GitHub desktop kon dat makkelijk achteraf (selecteren welke files je samen wil committen en deze een eigen message geven). Met Git is dit lastiger (of heb ik nog niet ontdekt hoe). Ook als het wel kan, lijkt me vaker en kleinere commits een goed idee: voor ieder klein stukje werk dat je doet kun je een commit doen met eigen message. Op die manier houd je goed bij welke stappen er gezet zijn. Als er dan iets mis gaat, kun je vaak precies zien waar. Gitmoji heeft me geholpen om dit inzicht te krijgen, ik was me niet bewust van de hoeveelheid verschillende soorten features waaraan gewerkt kan worden.

🌐 Gitmoji

πŸ“… Week 7

Productpagina klachtenformulier

Draft PR gemaakt met vraag om feedback.

Testen

Testen vooral in console van VSC.

πŸ“… Week 5 & 6

Productpagina klachtenformulier

  • snap ik hoe de koppeling werkt in React? -> getest of ik de pagina goed heb aangemaakt/gekoppeld door content andere pagina erop te zetten en kijken in de browser of deze laat zien wat ik verwacht te zien.
  • CSS files/tokes -> getest of css gekoppeld was, onderzocht wat verschillende css bestanden inladen doet met de styling in de browser. En wat verschillende tokens doen met de styling.
  • getest of de linkjes die ik heb aangepast (op contact pagina) naar de juiste pagina doorlinken (mijn nieuwe klachten formulier product pagina)