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