back home
Back to Learning Journal

Sprint 16: week 2

2024-11-18

Dit is mijn learning journal van week 2 van sprint 16

18 november

Ik heb de navigatie nog een stuk verbeterd.

  • als je op de backdrop klikt sluit het menu
  • als je naar een andere pagina gaat, sluit het menu
    • dit gebeurt nu door een click event op het item, niet door dat er echt van pagina word veranderd
  • :focus-visible state toegevoegd

TODO:

  • menu sluiten wanneer op esc geklikt word
  • maybe: in plaats van menu sluiten door click event op list item, sluiten door veranderde url?
  • niet kunnen scrollen wanneer menu geopend is
  • atoms: generieker maken - data in de molecuul ophalen ?

Advanced Component Concepts

Structuur

Een component library is een verzameling generieke en herbruikbare componenten die je in een project kunt gebruiken. snellere ontwikkeling, consistentie in projecten, vergroot onderhoudbaarheid. Maar: vergroot kans op fouten, alles ziet er hetzelfde uit, meer chaos. Want: fout in 1 component die veel word gebruikt, is veel fouten.

Chaos bedwingen door..

  • Naamgeving componenten
  • Naamgeving van variaties van componenten
  • Naamgeving van properties binnen componenten
  • Metanaamgeving: componenten, patronen, etc
  • Indeling van de $lib folder

Metanaamgeving is een hierarchische benadering om het over bepaalde soorten componenten te hebben. In principe is alles component, maar hoe noem je:

  • geneste componenten
  • variaties op componenten
  • samengestelde componenten

Oplossingen

  1. Page-Section-Component

Pages: volledige pagina’s, specifieke context bestaand uit sections. bijvoorbeeld: homepage.

Sections: secties van een pagina die bestaan uit componenten, bijvoorbeeld: hero banner, footer, content-sectie.

Components: herbruikbare componenten, binnen de secties, bijvoorbeeld knoppen, formulieren, kaarten, etc. Word in meerdere secties gebruikt.

  1. Functional Layering

Inputs: componenten voor gebruikersinvoer, zoals knoppen of formulieren.

Display: componenten voor het weergeven van informatie.

Navigation: componenten voor navigatie, menu’s, breadcrumbs, skip-to-content.

Structural: layout-elementen, die structuur bieden, grids, containers.

  1. LEGO

Bricks: kleine, niet herbruikbare stukjes, zoals een icoon of tekstblok.

Blocks: herbruikbare basis componenten, een knop of afbeelding.

Assemblages: gecombineerde componenten, met een specifieke functie; formulier of kaart.

Constructions: complexe pagina-secties of templates; dashboard.

  1. Atomic Design

Atoms: basis bouwblokken van je pagina, HTML elementen: label, input, button.

Molecules: een groep atomen bij elkaar, een zoekformulier met een label, input en button.

Organism: een groep moleculen die samen eens ectie van je website vormen, een header balk met zoekformulier.

Templates: een groep organismen die samen een paginatype vormen, een overzichtspagina, of detailpagina.

Pages: ingevuld template met inhoud.

Bij atomic design is het fijn dat je container queries kan gebruiken op molecuul niveau, om zo makkelijk verschillende versies te creeëren.

  1. Presenter-Container

Presentational Components: UI-specifieke stateless componenten, die bepalen hoe data getoond word, bijvoorbeeld een afbeelding

Container components: componenten die de presentational components van data te voorzien en hun gedrag te bepalen

Compositions: combinatie van containers en presentational components die specifieke pagina-secties vormen.


Svelte 5

Svelte 5:

  • runes
  • snippets
  • event attributes

Runes

Runes hebben een $ prefix let message = $state('hi);

$props - properties . kan een fallback value meegeven. Renaming props, rest props, updating props.

Host

$host - custom events

snippet

met snipper minder dubbele code dan met if/else een component in een component?

in de snippet de html element zetten en met @render gebruiken

{if}
<a>
{@render snippet}
</a>
{else}
{@render snippet}
{/}

FDND: component library

  • utility classes
  • inline css
  • flex grow

Resources

Articles