sprint 8 ‐ server‐side rendering ‐ week 1 - julia-stevens/i-love-web GitHub Wiki

Sprint 8 - Server-Side Rendering

Week 1

Maandag 3 maart 2025

Sprintplanning

We zijn de sprint begonnen met het maken van een sprint planning

Briefing/Debriefing

Voor de voorbereiding van de briefing van de opdrachtgever, hebben we een mindmap gemaakt en daarop in kaart gebracht wat we al wel weten en wat nog niet:

Tijdens de briefing heb ik aantekeningen gemaakt en deze gebruikt tijdens het schrijven van de individuele debrief.

In deze issue heb ik alles rondom de briefing gedocumenteerd: https://github.com/julia-stevens/server-side-rendering-server-side-website/issues/1

Interface inventory

Vandaag hebben we ook gezamenlijk de interface inventory gemaakt, zie [Figma(https://www.figma.com/design/BfNlwlghQo4GKty5b9saOC/Oncollaboration?node-id=0-1&t=P8qR5i0ueChNkMp0-1)

Dinsdag 4 maart 2025

Vandaag ben ik aan de slag gegaan met het maken van schetsen en wireflows voor Oncollaboration. Dit heb ik allemaal gedocumenteerd in deze issues:

Woensdag 5 maart 2025

Tijdens de les heb ik geleerd hoe je verschillende databases kunt 'koppelen' in één Directus fetch, namelijk met bv .*.* Hiermee heb ik mijn code flink kunnen vereenvoudigen, aangezien de databases in één link al gekoppeld worden. Ik heb een variabele aangemaakt waarin ik de databases van de webinars, speakers, resources en categories koppel: const webinarFields = "?fields=*,speakers.*.*,resources.*.*,categories.*.*"

Routes aangemaakt

Ook heb ik gewerkt aan het aanmaken van de routes voor de detail pagina's van de webinars. In de index.liquid heb ik een a tag met de href die verwijst naar de slug van de webinar: <a href="/webinar/{{ webinar.slug }}">

In de server.js heb ik vervolgens een .get geschreven die de slug ophaald en de juiste webinar hierbij zoekt, aan de hand van de filter in de Directus link

app.get("/webinar/:slug", async function (request, response) {
  // Variabelen fetch link individuele webinar pagina
  const slug = request.params.slug
  const filter = `&filter={"slug":"${slug}"}` 
  
  const webinarResponse = await fetch(`${apiEndpoint}${apiWebinarEndpoint}${webinarFields}${filter}`)
  const webinarResponseJSON = await webinarResponse.json()

  const contouringResponse = await fetch(`${apiEndpoint}${apiContouringEndpoint}`)
  const contouringResponseJSON = await contouringResponse.json()


  response.render("webinar.liquid", { webinars: webinarResponseJSON.data, contourings: contouringResponseJSON.data })
})

Donderdag 6 maart 2025

Vandaag ben ik aan de slag gegaan met de styling van de pagina's en heb ik met name gewerkt aan de one column layout, dus aan de mobiele versie. Dit heb ik allemaal gedocumenteerd in:

Ook heb ik feedback gevraagd en gekregen van Krijn (prototype naar HTML)

Vrijdag 7 maart 2025

Code/design review

Gegegeven feedback
Ontvangen feedback

We love web

https://github.com/julia-stevens/i-love-web/wiki/We-love-Web#cassie-evans---gsap-07-03-25