Hoe link je bestanden vanuit je public map?

Met / kan je bestanden linken. En acher / het de bestandsnaam

Wanneer moet je je server herstarten?

Als je wat hebt aangepast in server.js

Wat moet je doen om je server te herstarten?

control c in terminal om server te stoppen en dan npm start om het weer op te starten

Heb je syntax highlighting voor liquid code staan?

Ik denk het niet

Hoe open je de terminal met je keyboard?

control +, en je kan het ook rechtsboven bij de 4 icoontjes de tweede van links aanklikken.

Wat staat er in de node_modules map?

Mapjes met heel veel mapjes en informatie die ik niet begrijp

Welke liquid filters heb je al gebruikt?

Zolang ik weet heb ik nog geen filters gebruikt

Bronnen:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

https://directus.io/docs/guides/connect/query-parameters

https://nodejs.org/en/learn/getting-started/introduction-to-nodejs

https://liquidjs.com/tutorials/intro-to-liquid.html

https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction

https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction

Hoe zou je Liquid beschrijven?

Soort HTLM, maar dan net wat anders

Wat kun je met Liquid filters doen?

Een variabele filteren dus bijvoorbeeld een woord hoofdletters maken met | uppercase

Kun je Liquid code in de browser zien als je de HTML broncode bekijkt?

nope

Waar wordt Liquid code uitgevoerd?

in de server

Wat is en route?

Doormiddel van een route ga je naar een andere pagina

Wat hebben routes met bestandsnamen te maken?

Je de juiste bestandsnaam koppelen zodat de route werkt, als het een ander naam heeft werkt hij niet

Wat doet JSON.parse()?

Dat zet string om in een object

Bronnen:

The Liquid Template Language

Liquid Filters

Liquid Tags

Liquid If

Liquid For

Neem belangrijke bronnen van vandaag voer in je learning journal, deze ga je nog vaker nodig hebben!

Noteer de filters op de APi voor later...

https://github.com/fdnd-task/connect-your-tribe-squad-page/blob/main/docs/squad-page-ontwerpen.md

https://directus.io/docs/guides/connect/filter-rules

https://directus.io/docs/guides/connect/query-parameters#search

Wat is een query parameter?

Een query parameter is een onderdeel van een URL, beginnend na een vraagteken ( ?), dat extra informatie aan een server doorgeeft om webpagina-inhoud te filteren, sorteren of definiëren.

Voorbeeld -> ?filter[fav_animal}=Lente

https://fdnd.directus.app/items/person/?filter[bio][_contains]=frontend

Op wat voor soort data kun je for loops gebruiken?

Voornameljik op lijsten/arrays. Dus als je meerdere dingen hebt, zoals studenten, squads of producten. Dan kan je met een loop alles laten zien zonder alles 1 voor 1 te typen.

Welke Liquid filters heb je al gebruikt?

Alleen de | upcase

Wat versta je jij onder URL design, en nette URLs??

URL die je goed kan lezen en begrijpen -> /squad/1j

Wat vind jij lelijke URLs?

URLS die heel lang zijn en onduidelijk -> /squad?id=13&ref=abc&session=092

https://web.dev/articles/url-parts

Wat heb je geleerd tijdens deze code review? Het kan zowel door code van iemand anders die jij hebt gereviewd of door de feedback die je hebt ontvangen

Ik was even vergeten dat je voor en navigatie je een <nav> kan gebruiken en met daarin in <ul> tjes en <li> tjes. En een belangrijke was goed feedback en feedforward toe te passen op je website

Hoe is het om volgende week opnieuw te beginnen met een gezamelijke squadpage?

Wel weer even wennen, want je gaat natuurlijk in een reposetory werken met zijn allen.

Wat wil je graag meenemen uit jouw huidige squadpage? Waar ben je trots op?

Ik ben wel trots op de filter bij je favoriete dier. Dat als je op een bepaalde dieren emoji klikt je dan de mensen ziet die die emoji hebben gekozen.

Leg je tekening over HTTP en hoe de browser in jouw project werkt met Directus communiceert uit in je Learning Journal.

De browser doet een GET request naar de server (server.js - node.js) vervolgens doet de server een GET request naar de database (directus.app). De database doet vervolgens een response terug naar de server en hij zet dan de data om in JSON. De server doet dan weer een response naar de browser en zet het om in HTML door naar de browser.

Bij -server-side- rendering gebeurt de fetch én de render op de server — de browser krijgt kant-en-klare HTML Bij -client-side- rendering doet de browser zelf de fetch en de render via JavaScript

BRONNEN

https://expressjs.com/en/5x/api.html#app.post.method

https://github.com/fdnd-task/connect-your-tribe-squad-page/blob/main/docs/user-generated-content.md#get-vs-post

Op welke momenten zou jij de stand-up willen inzetten? Waar helpt het bij?

Ik zou de stand-up elke ochtend van een nieuwe werkdag in zetten. Het helpt elkaar nameljk om een overzicht te hebben hoever iedereen is en waar hij/zij zich mee bezig houdt de afgelopen dagen en wat er die dag gaat gebeuren. Zo houd iedereen zich elkaar op de hoogte en weet iedereen wat de status is.

Hoe ga je de squadpage presenteren vrijdag? Wat is jouw rol hierin?

Iedereen vertelt over zijn eigen stukje wat hij/zij gedaan heeft. Julian begint en vervolgens neem ik het over en vertel wat over het stukje waar je een commenet kan achter laten.

1. Ik kan uitleggen wat NodeJS, Express en Liquid zijn, hoe die samenwerken, en hoe ik daarmee lokaal een server kan maken 😅

2. Ik weet wat het doel van package.json is, heb met npm packages geïnstalleerd en weet hoe ik die gebruik in mijn server code 😅

3. Ik kan met commando’s in de terminal een NodeJS project starten en stoppen, en kan uitleggen wanneer herstarten nodig is 🥞

4. Ik heb een strategie voor debuggen in NodeJS, en weet hoe ik console.log() in kan zetten en uit kan lezen op de server 🤓

5. Ik weet wat URLs zijn, en kan de verschillende onderdelen van een URL benoemen en gebruiken 😅

6. Ik weet wat in Express routes en route parameters zijn, en ik kan zelf een nieuwe route aanmaken volgens mijn eigen URL ontwerp 🤓🥞

7. Ik weet wat de request en response argumenten zijn binnen een route callback functie in Express, en welke ik waarvoor kan gebruiken 😅

8. Ik weet wat een query parameter is, hoe ik die kan gebruiken in server-side code, en hoe ik die via links en formulieren kan veranderen 😅🤓

9. Ik snap wat HTTP is, kan het verschil tussen GET en POST methods uitleggen, en snap dat mijn NodeJS code zowel server als client isn 😅

10. Ik weet wat een REST API is, wat valide JSON data is en kan JSON data fetchen van verschillende API endpoints 😅

11. k kan data uit een REST API filteren, sorteren of doorzoeken door query parameters aan te passen 😅🤓

12. Ik kan uitleggen wat Liquid doet, wat een view is, wat server-side rendering inhoudt en hoe ik data aan een view meegeef om dynamische HTML te renderen 😅🤓

13. Ik weet hoe ik in Liquid partials kan maken en gebruiken, en data mee kan geven aan partials 🤓

14. Ik weet hoe ik verschillende Liquid filters toe kan passen en waar ik kan vinden hoe ze werken 🤓

15. Ik heb een strategie voor het debuggen van dynamische data in Liquid views met het json filter 😅

16. Ik weet wat control flow in Liquid is, en hoe ik if en for loops kan gebruiken in een Liquid view 🤓

17. Ik weet wat variabelen, objects, functions, keywords, arrays, strings, statements en expressions zijn in JavaScript 😅

18. Ik snap wat de async en await keywords doen in JavaScript code, en wat die te maken hebben met promises 😅

19. Ik begrijp het verschil tussen client-side JS en server-side JS en kan uitleggen waarom JS in browsers onbetrouwbaarder is dan NodeJS 😅

20. Ik kan gebruikers via een formulier data met een POST naar mijn server laten sturen, dit bewaren in een variabele en gebruiken in views 😅

21. Ik kan naar de server gePOSTe formulier data bewaren in een REST API en weet die weer terug te vinden via een filter 😅

22. Ik weet hoe ik Content First en mock data in kan zetten om snel een HTML prototype te maken met server-side code 🫣

23. Ik weet hoe ik verschillende UI states uit de UI stack kan verwerken in mijn views, en hoe ik daarin feedforward en feedback mix 🫣

24. Ik weet dat ik niet weet hoeveel verschillende devices, operating systems, browsers, versies en varianten daarvan er in gebruik zijn en wat dat betekent voor testen 🫣

25. Ik weet wat Progressive Enhancement betekent, en ken minimaal vijf strategieën om dat toe te passen in mijn HTML, CSS en JS, waaronder feature detection 🫣