Sprint 14

23-9

• Jamstack voor API’s en workframes
• Headless CMS bij. Directus

Notes

Ga verder met de js oefeningen, ga aan de slag met de digital garden.

Mentor

• Mentor van H1

24-9

Vandaag heb ik geprobeerd aan portflow bewijslast erin te zetten.

30-9

Vormgeving

• Structuur
• Routing
• Error handeling
• Loading data
• Binding
• Lib
• Componenten

Structuur

Projectnaam

• -Src
• —Lib
• ---server// alle files die informatie hebben of gebruiken die niet in de client mogen
• —Routes
• ---+error.svelte // vangt errors op en geeft een custom pagina
• ---+page.svelte
• ---+layout.svelte // vaste layout
• —App.html
• -Static// dingen zoals favicons/svg’s/webp
• -.gitignore // files die erin staan gaan niet mee met de pushes van github.
• -.env// gevoelige informatie bijv. API wachtwoord (Komt in gitignore)
• -.env.example // voorbeeld van wat er in je .env file moet zitten (komt wel in github)
• -package.json // hier staan de files in die je nodig hebt om de applicatie te draaien.
• -svelte.config.js // voor hosting dus aanpassen als je naar n andere hosting gaat
• -vite.config.js // tool om projecten te runnen.

Routing

Laat dit na checken want dit moet goed gaan in het begin van het project.

frameworks

let name= ‘world’ input bind:value={name} p {name} p

zodra je in de input iets typt wordt de p name, de nieuwe text

$: shout = name + “rocks”

$: zorgt dat het reageert dus elke keer als naam veranderd wordt shout geupdate.

Lib

Header.svelte // Naam van een component begin je altijd met een hoofdletter Footer.svelte

In page.server.js: import {Header, Footer} from “$lib” In index.js: export {default as Header} from “Header.svelte” export {default as Footer} from “Footer.svelte”