Sprint 13

2-09

Eerste dag van sprint 13.

Data toevoegen:

<script>
	let name = 'Svelte';
</script>

Binnen de curly braces kan je alle javascript toevoegen die je wilt <h1>Hello {name.toUpperCase()}!</h1>

Dit kun je ook gebruiken voor element attributen

<script>
	let src = '/image.gif';
</script>

<img src={src}/>

Belangrijk dat de website toegankelijk is img heeft bv een alt attribuut nodig Je kan curly braces ook binnen een attribuut gebruiken alt="{name} dances."

Attributen en waarden hebben vaak dezelfde waarde hebben src={src}

Svelte heeft hier een afkorting voor <img {src} alt="{name} dances." />

Je kunt verschillende componenten en documenten toevoegen aan je opmaak

Component names are always capitalised, to distinguish them from HTML elements.

Je kunt een stuk html tekst toevoegen door

{@html string}

Te gebruiken

Click button:

reactive declarations zien er zo uit $: doubled = count * 2;

{count} doubled is {doubled}

Maakt na een keer klikken -> 1 keer verdubbeld 2, 2 keer is verdubbeld 4 etc.

You can even put the $: in front of things like if blocks:

The full list of modifiers: preventDefault — calls event.preventDefault() before running the handler. Useful for client-side form handling, for example. stopPropagation — calls event.stopPropagation(), preventing the event reaching the next element passive — improves scrolling performance on touch/wheel events (Svelte will add it automatically where it's safe to do so) nonpassive — explicitly set passive: false capture — fires the handler during the capture phase instead of the bubbling phase once — remove the handler after the first time it runs self — only trigger handler if event.target is the element itself trusted — only trigger handler if event.isTrusted is true, meaning the event was triggered by a user action rather than because some JavaScript called element.dispatchEvent(...) You can chain modifiers together, e.g. on:click|once|capture={...}.

transition is applied, and any parameters that were passed in — and returns a transition object which can have the following properties: delay — milliseconds before the transition begins duration — length of the transition in milliseconds easing — a p => t easing function (see the chapter on tweening) css — a (t, u) => css function, where u === 1 - t tick — a (t, u) => {...} function that has some effect on the node

npm create svelte@latest

node.js Runt javascript Fetch haal tinformatie uit een externe server op (machine van het internet) Apiurl haalt op uit de database Renderen: inladen van dat combineren met html en dan doorsturen (data meegeven aan de view) Get request ga je naar een server toe

Belangrijkste dingen sveltekit/svelte

Set functies die het makkelijk maken om js te schrijven in een sever (svelte) Svelte kan een applicatie generen met html css js Svelte kit is een webframework voor svelte

Sveltekit: meta framework, ssr, spa, mpa, ssg, web standerds, PE, accessibility

Je zet client site rendering uit door: +page.js in de root van de route folder

Svelte: csr, lightweight, compiler, component framework, scoped styling, reactive state,

Directus:

In de routes maak je een map met goeie naam In die map maak je een nieuwe pagina met +page.svelte

Componenten maak je door In src map components te maken In deze map zet je een bepaald component

In je +page.svelte roep je in script aan met import de functie En dan buiten script roep je de functie aan met de bedachte naam

3-09

4-09

5-09

<script>
    import Card from '$lib/Card.svelte';

    /** @type {import('./$types').PageData} */
    export let data;

    // Check if the data has been received and is an array
    console.log('Received data in +page.svelte:', data);
</script>

<!-- Only render if we have people in the data -->
{#if data.people}
    {#each data.people as person}
        <Card {person}></Card>
    {/each}
{:else}
    <!-- This will show if no people are available -->
    <p>No data available</p>
{/if}

<script>
    export let person;
</script>

<article>
    <h2>{person.name}</h2>
    <p>{person.bio}</p>
</article>

6-09

9–09

13-09

16-09

Pokerplanning Moscow Mark twain To change your life you need to change your priorities

Van epic, langs (user)stories, naar taken Handige manier om werk op te organiseren en een hiërarchie te creëren. Het idee is om werk op te splitsen in opleverbare stukken.

Voorbeelden van epic: Een nieuwe e-commerce website lanceren voor … De website van … verbeteren Een nieuwe website lanceren voor … De website van … optimaliseren voor zoekmachines

Voorbeelden van stories: Een nieuwe e-commerce website lanceren voor …

De website van … verbeteren

Voorbeelden van user-stories: Een nieuwe e-commerce website lanceren voor …

Voorbeelden van taken: Als bezoeker wil ik producten in mijn winkelmandje kunnen doen om overzicht te houden wat ik aanschaf

Planning poker Fibonatischn reeks ? - 0 - 1 - 2 - 3 - 5 - 8 - 13 - 21 - oneindig

Techniek voor het schatten, vooral gebruikt voor timeboxing in agile principes. Leden van de groep geven schatting door genummerde kaarten op tafel te leggen of een getal op te schrijven in plaats van dit hardop te zeggen. De kaarten worden omgedraaid en de schattingen worden vervolgens besproken. Door de cijfers te verbergen, kan cognitieve bias van verankering vermeden worden, waarbij het eerste hardop gesproken cijfer ene precedent schept voor volgende schattingen.

Moscow Must haves: Moet af op de deadline -> niet af is het project gefaald Should haves: Best wel af moeten -> project is jammer als het niet af is Could haves: Dit kan -> als er tijd over is Want to have but will not have this time around: Dit zijn goede ideeën en nuttig om te noteren maar we komen er nu niet aantoe

17-09

Verder werken aan groepsopdracht Op school cards gemaakt

18-09

Hoe lever ik een project op ? Readme In readme cms uitleggen -> hoe vragen aan opdrachtgever Code conventies Live zetten / publiceren Huisstijl -> in readme (pdf) Gestructureerde code / Refactoring

Refactored code: Gestructureerde code (conventies), semantiek, geen commented code, geen console.log, goede tabs

Readme: kenmerken Live link Screenshots Instructies (uitleg over het gebruik) Installatiehandleiding Cms uitleg Huisstijl (of waar die te vinden is) Bijdragen? (Hints voor volgende developers teams) Gebruikte bronnen Badges met gebruikte technologie

Live zetten: GitHub pages,

Donderdag 19 sep

Vrijdag 20 sep

Niveaumatrix bespreken Kampvuursessie Bewijslast in portflow zetten

Wat betekend de indicator Waarom is dit goede bewijslast Heb je nog leervragen met betrekking op deze indicator