Learning Journal

Maandag 2 september

Leervragen:

1. Hoe zet je een project op met frameworks?
2. Wat is svelte(kit) en hoe kan ik het gebruiken?
3. Wanneer gebruik je svelte(kit)?
4. Hoe render je data uit een Headless CMS door middel van framework?
5. Hoe kan ik complexere JavaScript gebruiken?

Team Canvas

https://github.com/user-attachments/assets/f73bbf96-51a6-44db-b13d-dbb1a4c05121

Project board

Dinsdag 3 september

Sveltekit opzetten

create-svelte

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

create a new project in the current directory

npm create svelte@latest

create a new project in my-app

npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or yarn), start a development server:

npm run dev

or start the server and open the app in a new browser tab

npm run dev -- --open

Code conventies

• Inspringen: Na elk code-element inspringen voor duidelijkheid.
• Comments: Comments toevoegen om de code te verduidelijken, vooral in JavaScript en waar nodig in CSS.
• CSS-structuur: Generieke CSS plaats ik bovenaan.
• Naamgeving: Gebruik maken van '-' tussen woorden in.

Woensdag 4 september

Sveltekit

Sveltekit is een library geschreven in svelte (geoptimaliseerde html, css, js gecombineerd) gemaakt voor het ontwikkelen van websites. (snel en overzichtelijk websites)

SSR, SPA, MPA, SSG, meta framework → (svelte)kit

PE → form: enhanced is true

• folder based routing
• get en post request worden ‘onder water’ afgehandeld
• elke route heeft o.a. een server component (view) bestand
• data wordt geexporteerd van het server bestand naar het svelte component

Sveltekit deelt code slim op de client en op de server (hydration)

De website werkt echter ook als er geen js beschikbaar is in de browser

Wij beginnen in de ssr-only mode, door client side rendering uit te zetten.

Sveltekit error oplossen

export let csr = false

Donderdag 5 september

Basic design en profile card gebouwd

https://github.com/user-attachments/assets/d4f8040b-762e-4ddf-a700-c8b995fafb9d

Vrijdag 6 september

Feedback ontvangen squadpage zie hier en hier. Vervolgens nieuwe plannen gemaakt.

Ook heb ik feedback gegeven aan eerstejaars.

• Issue 1
• Issue 2
• Issue 3
• Issue 4

Maandag 8 september

Componenten hergebruiken helpt om consistent en efficiënt te ontwerpen. Als een component op een plek wordt aangepast, wordt het overal aangepast.

In de componenten en op artboards kun je ook auto layout toepassen.

Dinsdag 9 september

Ik wilde vanilla JavaScript in mijn Svelte-project gebruiken, maar kreeg een internal error. Ik besefte dat de JavaScript op een andere manier geschreven moest worden. Op Medium las ik over de juiste methoden hiervoor. De onMount-functie zou gebruikt moeten worden.

Woensdag 10 september

Creative coding with SvelteKit

Progressive enhancement is een strategie in webdesign die webinhoud centraal stelt. Het maakt basisfunctionaliteit toegankelijk voor iedereen, terwijl gebruikers met moderne browsers een verbeterde versie krijgen.

Creative coding === progressive enhancement (← zou zo moeten zijn) === content first

Progressive enhancement: content first

(Dit stappenplan gebruiken voor alle SvelteKit-projecten)

1. Maak een tijdelijke kopie van de folder van de squadpage repo.
2. Installeer een schone installatie van SvelteKit voor de squadpage.
3. Voeg in /routes/+page.js deze regel code toe: export let csr = false (dit kan je aanpassen).
4. Kopieer de code uit /lib/fetch-node.js van je laatste Node.js-project van sprint 12.
5. Importeer deze functie in /routes/+page.server.js.
6. Controleer of alles correct is geïmplementeerd aan de hand van het voorbeeld.
7. Copy-paste de toegevoegde Svelte-code terug in /route/+page.svelte.

Creative coding with CSS

Creative coding with JavaScript

Svelte heeft standaard animatie-elementen.

SvelteKit zorgt ervoor dat je requests en responses niet zelf hoeft uit te voeren, maar dat SvelteKit dit voor je doet.

Dom-elementen herkent SvelteKit niet direct; gebruik daarom onMount (een component lifecycle-functie).

Een pagina in SvelteKit is een component. Je kunt in JavaScript de CSS manipuleren (bijv. animeren met custom properties).

In de HTML kun je iets binden aan de JavaScript.

Zie ook Svelte-transitions op de officiële Svelte-site.

Maandag 16 september

Epics en Stories

Project management

Epics zijn een handige manier om werk te organiseren en een hiërarchie te creëren. Het idee is om werk op te splitsen in opleverbare stukken, zodat grote projecten kunnen worden afgerond en klanten op regelmatige basis waarde krijgen. Epics helpen teams om overzicht te behouden en werk in beheersbare stukken te verdelen.

Epics kunnen worden onderverdeeld in stories. User stories zijn gerichter en beschrijven specifieke functionaliteiten of gebruikersbehoeften.

Structuur: Epic → Stories → User Stories → Taken

MoSCoW Prioriteringsmodel

Het MoSCoW-model wordt gebruikt om prioriteiten te stellen tijdens projecten:

• Must have: Dit moet af zijn op de deadline. Als het niet af is, is het project gefaald.
• Should have: Dit zou af moeten zijn. Het project zou incompleet zijn zonder deze items.
• Could have: Dit kan worden toegevoegd als er tijd over is.
• Won't have: Goede ideeën die nuttig zijn, maar momenteel geen prioriteit hebben.

Planning Poker Workshop

Tijdens de Planning Poker workshop hebben we als team alle taken een numerieke waarde toegekend, gebaseerd op hun moeilijkheidsgraad en geschatte duur. Dit gaf ons beter inzicht in de complexiteit van het project en de benodigde tijdsinvestering.

Dinsdag 17 september

Vandaag heb ik een nieuw profile card design gemaakt en gebouwd.

Woensdag 18 september

De achtergrondafbeelding was niet zichtbaar. Dit heb ik opgelost door mijn styling naar de static map te verplaatsen. Zie de details in deze commit.

Code Refactoring

Code refactoring: Het herschrijven van code volgens best practices zoals duidelijke conventies, goede semantiek, het verwijderen van commented code, geen overbodige console.log() statements en correcte tabs.

ReadMe bestand: Belangrijke onderdelen:

1. Kenmerken
2. Livelink
3. Screenshot
4. Instructies
5. Installatiehandleiding
6. CMS uitleg
7. Bronnen
8. Badges van gebruikte technologieën

Donderdag 19 september

Vandaag heb ik een performance- en toegankelijkheidstest uitgevoerd voor de profilecard. Dit zijn enkele resultaten:

Ik heb een nieuwe functie gemaakt die zowel de naald- als de vinylanimatie bevat. Deze worden gestart door een bestaande knop. Zie de commit voor meer informatie.

Vrijdag 20 september

Vandaag heb ik voortgangsgesprekken gevoerd met CMD-studenten en een nieuwe Lighthouse-test uitgevoerd. Helaas is de performance gedaald van 98 naar 79 voor toegankelijkheid na de laatste merge. Zie deze link voor meer details.

Om de score te verbeteren, moeten we:

• Afbeeldingen optimaliseren qua formaat;
• Afbeeldingen leveren in moderne formaten zoals WebP en AVIF;
• Blokkerende bronnen verwijderen;
• JavaScript verkleinen.

Maandag 23 september

Het gebruik van JAMstack, met JavaScript en API's, maakt het mogelijk om een modulaire architectuur te implementeren. Het voordeel hiervan is dat verschillende delen van een website of webapplicatie kunnen worden gebouwd en onderhouden door verschillende teams. Dit maakt het veel eenvoudiger om websites en webapplicaties te ontwikkelen en te onderhouden.

Enkele populaire headless CMS'en zijn: Directus, Prismic en WordPress.

Site generators die je kunt gebruiken zijn: mdBook en Eleventy.

Verlies je hoofd.

Fabrique; Qatar Museums Project

Voorkeursstack:

• SvelteKit
• Directus

Leervragen:

• Hoe gebruik ik externe bibliotheken?
• Hoe kan ik complexere JavaScript gebruiken?

Briefing Voorbereiden

Vragen voor Marko:

• Wat is de aanleiding van deze opdracht?
• Wat voor API moeten we gebruiken?
• Maakt het uit in welk framework we werken?
• Hebben jullie een huisstijl waar we ons aan moeten houden?
• Wat is het hoofddoel van de website?
• Zijn er specifieke functies die jullie op de site willen hebben?
• Hoe willen jullie dat de gebruiker de website ervaart?
• Wie zijn de eindgebruikers van de website?
• Is het een must om alle features op de website te hebben?
• In hoeverre mogen wij afwijken van het ontwerp?

Dinsdag 24 september

Briefing @ Fabrique

Bekijk de briefing

Debrief

Woensdag 25 september

Intersection Observer.

Centraal een div plaatsen:

                <body>
                    <div></div>
                </body>
            

Filteren met de Directus API:

Donderdag 26 september

Infinite Scroll / Canvas Research

Er is een infinite scroll plugin, een JavaScript-plugin die automatisch de volgende pagina toevoegt, zodat gebruikers niet een volledige pagina hoeven te laden. Dit laadt nieuwe content wanneer je aan het einde van de pagina komt.

• Gebruik geen <canvas>, dat zegt niet veel.
• Geen muiswiel om te zoomen.
• Gebruik transformaties zoals translate en scale.
• Gebruik viewportTransform om panning en zoom bij te houden.
• Panning: Het verplaatsen van de inhoud van de canvas door het bijhouden van muisbewegingen en het updaten van de coördinaten van de canvas.
• Zooming: In- en uitzoomen met behulp van het muiswiel, waarbij de scale-factor wordt aangepast om de weergave te vergroten of te verkleinen.
• fabric.js
• konva.js

Masonry Infinite Grid

Infinite Canvas Gids

Canvas Panning en Zooming

• Afbeeldingen inladen en daarna herhalen?
• Vraag: Hoe willen we zoomen? Met behulp van knoppen?

Vrijdag 27 september

Voortgangsgesprekken met CMD-studenten

Dirk: Goed gebruik van custom properties. De Read.me is niet af; alt-tekst is leeg. Er zijn nog kleine aanpassingen aan de HTML nodig.

Lotte: JavaScript-like button; vragen over dark en light mode.

Emma: Nog niet begonnen aan de tweede pagina; de eerste pagina is ook niet af. Geen JavaScript (menu); geen custom properties. Media queries in de footer gebruiken; divs in de footer omzetten naar articles en divs naar ul's.

Jannie: Goed gebruik van custom properties. Styling aanpassen is nodig; weet niet of alle CSS ook echt iets doet en gaat er nog naar kijken. Ook nog niet zo ver met de tweede pagina.

Caia: Goed gebruik van custom properties en is best ver. Nog een aantal surface plane-elementen toevoegen. Dark-mode kleuren worden in de JavaScript aangepast in plaats van in de CSS; dit moet veranderen.

Joy: Lettertype wordt niet herkend; li in de footer; surface plane nog niet af: hamburger menu. Geen custom properties en niets in de Read.me.

Jilke: Is best ver; kleine JavaScript-fout; goed gebruik van custom properties; lettertype in de body wordt vaak herhaald; Read.me is niet compleet.

Feedback van medestudenten:

Gegeven feedback:

Bekijk de issue

Ontvangen feedback:

Bekijk de issue

Feedback van Krijn en Charley:

• Klein beginnen: eerst de view en dan infinite.
• Wat is de core functionaliteit?
• User story: Als gebruiker wil ik 30 afbeeldingen zien.
• Enhancement = infinite.
• Moscow toepassen.
• Poker! voor infinite scroll.
• Pull requests afspraken.
• Mergen.
• Let op dingen die geen eind hebben (niet infinite researchen).
• Maak navigatie.
• Practical scroll snapping.

Zaterdag: HTML

Zondag: CSS/JS

Maandag 30 september

Hygraph biedt interessante mogelijkheden. Meer informatie vind je in dit artikel: Implement Federated Content in Hygraph and Svelte.

SvelteKit Structuur

De structuur van SvelteKit is als volgt:

• src: Dit bevat alles wat SvelteKit moet uitvoeren, zoals pages en components.
• static: Vergelijkbaar met de public-map in Node.js, bevat dit bestanden zoals favicon, afbeeldingen, en CSS-variabelen. Downloads horen hier niet in, tenzij het een SVG is.
• app.html: Dit is een belangrijk bestand, het vormt het begin van de applicatie.
• routes: Dit bestand bevat je pagina's en is cruciaal voor de navigatie binnen de applicatie.
• lib: Hier staat de herbruikbare code die je kunt importeren vanuit de library.
• server: Dit bevat alleen server-side code, zoals een inlogsysteem en API-sleutels. Deze mogen niet in page.js, alleen in page.server.js.
• gitignore: Bestanden zoals .env (voor API-sleutels en wachtwoorden) en node.modules mogen niet naar Git. Het .env.example-bestand is handig zodat mensen begrijpen dat er een .env-bestand nodig is.
• package.json: Dit bestand bevat alles wat nodig is om het project uit te voeren (bijvoorbeeld de Svelte-library).
• svelte.config: Hierin staat de configuratie van SvelteKit.
• vite.config.js: Dit is een tool om het project uit te voeren; het fungeert als een builder.

SvelteKit Routing

SvelteKit heeft specifieke manieren om routing af te handelen. Een sitemap kan hierbij helpen, en er zijn zowel dynamische als statische routing mogelijkheden.

Error Handling

Een errorpagina wordt gemaakt met de route +error.svelte. De layout.svelte fungeert als sjabloon en kan geneste layouts bevatten. De errorpagina wordt gerenderd binnen de layout, net als page.svelte, wat handig is voor het genereren van foutmeldingen.

Loading Data

Bij het laden van gegevens aan de serverzijde is async verplicht. Voorbeeld:

• import PUBLIC_API_URL from '$env/static/public'
• const url = PUBLIC_API_URL + 'person/'
• const persons = await fetch(url)

Binding

Met de volgende code kun je een variabele aan een HTML-element binden:

$: maakt iets reactive, in plaats van let.

Components

Componenten worden in de library met een hoofdletter geschreven. Het index.js-bestand fungeert als shorthand voor je library.

In de layout kun je componenten importeren, bijvoorbeeld:

Handige Bronnen voor Infinite Canvas / Scroll Snapping

• YouTube Video over Infinite Scroll
• Masonry en Good Defaults
• Masonry Layout MDN
• CodePen Voorbeeld
• YouTube Video over Scroll Snapping

Dinsdag 1 oktober

Hygraph biedt nog steeds interessante mogelijkheden en informatie.

Woensdag 2 oktober

Dieter Rams: 10 Principes van Goed Ontwerp

Een goed ontwerp is:

1. innovatief
2. maakt een product nuttig
3. esthetisch
4. maakt een product begrijpelijk
5. onopvallend
6. eerlijk
7. langdurig
8. grondig tot in de kleinste details
9. milieuvriendelijk
10. zo min mogelijk

Vrijdag 4 oktober We Love Web - Nicolas Garnier

Creative developer met een scherp oog voor creativiteit.

Werkt met JS, XSS, WebGL, Processing, Unity, GenAI, LLM.

In de kern: code, animaties, interactiviteit.

Creëer anticipatie en verrassing; ondersteun het verhaal en zet de sfeer.

Betrek de gebruiker en los design- en technische uitdagingen op.

vita.com

lifeworld.wetransfer.com

Conclusie

Denk aan animaties en interacties als een uitbreiding van de oorspronkelijke intenties.

Wees open-minded en vraag om feedback.

Wees bereid om veel tijd aan het proces te besteden.

Toegankelijkheidstest gedaan bij Red Pers

Feedback ontvangen van Justus

• Footer tag
• Header tag
• Masonry-class veranderen naar ul
• artObject.svelte maken (component) <artObject art />
• Data hiding met SvelteKit
• Gemengde talen in CSS: leesmodus
• Stijl z-index in de layout

Maandag 7 oktober

Belangrijk: Niet op ID's stylen.

Afbeeldingen in het dropdownmenu kunnen ook als achtergrondafbeeldingen worden gebruikt.

Dinsdag 8 oktober

Zie het artikel over SvelteKit 404-pagina's.

Een foutpagina is gemaakt.

Woensdag 9 oktober

Refactored code: Het maken van een versie-release; goede pull request strategie; componenten.

In de readme.md: changelog.

Testen kan ook worden opgenomen: performance, keyboard, screenreader, Lighthouse, kleurcontrast, WCAG, HTML validator, gebruikerstests, browsertests, device tests, linter.

Vraag wat de klant wil.

Sprint Review

Doel:

• Stel specifieke vragen voor feedback (van tevoren voorbereid).
• Demo:
  • Loop door de user stories van de sprint.
  • Laat de website zien naast het design.
  • Toon wat nog niet gelukt is aan de hand van het design.
  • Benadruk de punten waar je feedback op wilt ontvangen.
  • Wees enthousiast.
• Doe voorstellen om functionaliteiten te verbeteren (feedback geven aan de opdrachtgever).
• Bespreek de testresultaten.
• Plan voor de komende sprint.
• Oplevering van het werk.

Rollen:

• Presentator
• Feedbackverwerker / Notulist (issues)
• Cheerleader
• Timekeeper

Algemene opmerkingen:

Experimenteer met view transitions, tabben, dropdown die naar het canvas scrollt, en focus state. Denk aan toegankelijkheid met scroll timeline animaties en lazy loading.

Donderdag 10 oktober

Sprint Review met de opdrachtgever

• Het dropdown-menu is goed verwijderd; het stond niet in het ontwerp.
• Rechts naar links kunnen lezen.
• Filters container sticky, filters zelf niet sticky.
• Zij hebben geen library gebruikt, maar bouwen afbeeldingen met JS voor meer controle.
• Detailpagina: hun ontwerp heeft afbeelding rechts en info links (titel, logo, metadata). De afbeelding is sticky tot de tekst eindigt. Onderaan “you may also like”: random afbeeldingen.
• Footer moet uit de site worden gehaald.
• Afbeeldingen zijn niet allemaal even lang.
• Data voor de detailpagina krijgen we nog.
• Pijl om terug te navigeren (kan nog worden toegevoegd aan +error.page).
• Mooi hover effect op afbeeldingen voor meer info.
• Zoekbalk effect om te veranderen naar de filters; zoekbalk gaat naar een zoekpagina.
• Zoekpagina toont 4 resultaten met een “see more” knop; afbeeldingen zijn full height, alle lijstitems hebben dezelfde hoogte.
• !! Vraag waar de 'echte' API is; onze API is niet compleet !!

Naar Vercel deployen

Wat heb ik gedaan:

In de terminal: npm i -D @sveltejs/adapter-vercel

In svelte.config.js:

import adapter from '@sveltejs/adapter-vercel';

Door dit toe te voegen aan je project kun je Vercel-specifieke opties opgeven.

Vraag: Is deployment configuratie ook nodig?

In page.js:

In +layout.js:

Bronnen:

• SvelteKit Adapters

Vrijdag 11 oktober

Kampvuursessie

Wat ging er goed?

De taakverdeling was goed; iedereen wist wat te doen en hield elkaar op de hoogte van voortgang en obstakels. Alle taken zijn afgerond.

Wat kan er beter?

We moeten een beter plan ontwikkelen voor als iemand afwezig is. De planning poker is niet gedaan omdat het team niet compleet was.

Welke minpunten heb jij bij jezelf gezien bij de samenwerking?

In het begin vond ik het moeilijk dat we niet op hetzelfde tempo werkten. Later realiseerde ik me dat ik nog niet klaar was met mijn taak, wat leidde tot tijdsnood. Ik werkte ook aan twee dingen tegelijk, waardoor ik het overzicht verloor.

Meerdere pagina’s in SvelteKit:

• Maak een mapje in de routes met de naam van de pagina. De pagina heeft nog steeds de naam +page.svelte.

Maandag 14 oktober

Tech stack

Frontend fatigue

User experience // DX // Development principles → developer experience (nieuwe libraries)

de combinatie van user experience, contentmanagement-experience en developer-experience wegen mee bij de keuze voor een tech stack

Dinsdag 15 oktober

Sveltekit stores

Ik probeerde een lightmode te togglen, waarvan de button in een component zit en de class moet op de html of body komen te staan.

Zie commit

React opzetten

npm init react-app fabrique-react

cd fabrique-react

npm start → opent het project lokaal op http://localhost:3000

Woensdag 16 oktober

Jouw tech-stack: Over het presenteren van een argument

Wat is logica en waarom zou je het gebruiken?

• Logica wordt gebruikt in gesprekken, bij het bouwen van websites en om te filosoferen.
• Het helpt om beslissingen te structureren met behulp van logische operatoren zoals:
  • en (&&)
  • of (||)
  • als dan (if...else)
  • niet (!)
  • en lussen (forEach, for-loops)

Voor front-end ontwikkelaars vormt logica de basis van programmeerstructuren en gebruikersinteracties.

Het argumentatieproces

1. Formuleer een standpunt en selecteer argumenten

   1. Door onderzoek te doen, kun je een weloverwogen standpunt innemen.
   2. Bijvoorbeeld: je doet onderzoek naar de tech-stack.

   3. Conclusie: Je kunt nu een standpunt innemen.

      Inventariseer vervolgens argumenten die voor en tegen jouw standpunt spreken. Noteer ze en ken ze eenvoudige variabelen toe (bijv. a, b, c).

2. Maak een argumentatieschema

   Zorg ervoor dat je argumenten duidelijk en steekhoudend zijn. Het standpunt moet met overtuigende argumenten onderbouwd worden. Zet de argumenten in een argumentatieschema om overzicht te creëren.

   1. Enkelvoudige argumentatie: A → B
   2. Meervoudige argumentatie: A, B → C
   3. Nevenschikkende argumentatie: A + B → C
   4. Onderschikkende argumentatie: A → B → C

3. Beoordeel de aanvaardbaarheid van de argumenten

   Het argumentatieschema helpt om te bepalen of jouw onderbouwing sterk is. Stel jezelf drie vragen bij het beoordelen van de argumenten:

   1. Zijn de argumenten feitelijk correct?
   2. Zijn de argumenten voldoende uitgewerkt?
   3. Ondersteunen de argumenten het standpunt?
      1. (Zijn er genoeg argumenten? Zijn tegenargumenten weerlegd?)

4. Werk het argumentatieschema uit

   Gebruik het schema als leidraad bij het uitwerken van je argumentatie. Houd rekening met de volgende zaken:

   • Zorg voor een logische volgorde.
   • Plaats het standpunt aan het begin en herhaal het in de conclusie.
   • Gebruik een duidelijke alinea-indeling: elk losstaand argument krijgt een aparte alinea, argumenten die inhoudelijk bij elkaar horen worden in één alinea gegroepeerd.
   • Gebruik signaal- en verbindingswoorden om de samenhang in je tekst te bevorderen. (Zie Taalwinkel.nl voor meer tips.)

De keuze voor een tech-stack: een combinatie van UX, DX en CMX

Bij de keuze van een tech-stack spelen verschillende factoren een rol. Zowel de gebruikerservaring (UX), de ontwikkelaarservaring (DX) als de content management ervaring (CMX) zijn van belang.

• UX: toegankelijkheid, prestaties, progressieve verbetering, responsiviteit
• DX: documentatie, jobopportuniteiten, community, duidelijkheid, DRY-principe
• CMX: kracht, kosten, complexiteit, ondersteuning

Factoren bij het kiezen van een tech-stack:

1. Platform: Waar draait het? Vooral mobiel?
2. Type project: Campagnesite of document database?
3. Schaalbaarheid: Hoeveel bezoekers? 1/m of 20.000/s?
4. Prestaties: Heb je een performance budget? Bijv. max. 2,5 seconden laadtijd?
5. Teamexpertise: Kennis van ontwikkelaars en klanten?
6. Onderhoud: Hoeveel tijd kost onderhoud?
7. Kosten: Wat zijn de kosten?