Daily checkout

Ik had geen zin om al die dagen op de pagina te verwerken.

Vandaag ben ik begonnen het opstellen van de sprint planning. Ik heb de repository geforked en ik heb de projectboard gekoppeld aan mijn nieuwe repository en eventueel issues toegevoegd of aangepast. Vervolgens ben ik samen met de de studenten die dezelfde opdrachtgever hebben een sidemap gemaakt en een wireframe. Ook ben ik samen bezig geweest met de workshop over de huistijl en hebben we de allerlei elementen verzamelt in de interface inventory. We hebben een gezamelijke stylesheet gemaakt en daarin zijn we begonnen met dicusseren over welke stijl we gaan aanhouden.

Drie dingen die ik geleerd heb:

• Wat een styleguide is
• Custom properties in css
• Herkennen van de huistijl

Bronnen:

• Custom variables

Vandaag ben ik samen met de team de styleguide om gaan zetten in de stylesheet. Dit hebben we gedaan met custom properties. Ook hebben we de repo van de gezamelijke stylesheet gelink taan onze persoonlijke projecten zodat we allemaal dezelfde styling gebruiken.

Bronnen:

• Custom variables

Vandaag heb ik met de studenten die dezelfde opdrachtgever hebben als mij code reviews uitgevoerd op de styleguide van de andere projectgroepjes. Vervolgens hebben we feedback geschreven en deze als issue doorgevoerd op de repository. Ook hebben we als groep feedback gekregen in issues. De hebben we vervolgens afgehandeld.

Waar we op hebben gelet:

• Indeling van de stylesheet
• Consistente naamgeving
• Custom properties
• Herhaling van code

Welke code wil ik meenemen, die ik heb gezien:

In de workshop van de custom variabelen in css zag ik dat er gebruik werd gemaakt van & om bijvoorbeeld :hover te nesten zodat het niet apart geschreven hoeft te worden. Zie de code hieronder:

Vandaag heb ik de workshop gevolgt over de gestalt wetten. Vervolgens ben ik bezig geweets met het voorbereiden van een presentatie over de wet: common region. Hiervoor heb ik gekeken naar juiste en onjuiste manieren van deze principe die is toegepast om bestaande websites. Vervolgens heb ik dit gepresenteerd aan twee andere studenten. Die de law of proximenty en similarity hebben gepresenteerd. Link of foto naar figma bestaand link info website: https://www.grupomenta.com/blog/law-of-common-region-gestalt-laws-of-perceptual-organization nog een link: https://lawsofux.com/law-of-common-region/ nog een link: https://www.nngroup.com/articles/common-region/

Vandaag heb ik de opdracht geoptimaliseerd voor de sprint review. Ik heb wat media queries aangepast. Ook ben ik begonnen met de het maken van de readme.

Mijn code vraag:

• Ik had een vraag over de html attribuut popover. als ik mijn code door de validator haal krijg ik foutmeldingen. De leraar heeft gekeken waarom door te zoeken of er errors zijn in dit attribuut. maar niks gevonden. ik mag de popover gewoon gebruiken

Vandaag is de sprint review van sprint 4. hier heb ik de lessons pagina gedemonstreerd. Zie issueboard tumi mundo voor feedback van opdrachtgever.

Vandaag heb ik een kampvuursessie gehouden met een aantal studenten en hebben een retrospetive gedaan om de samenwerking. Ook heb ik gewerkt aan het bewijsmateriaal voor portflow. en hebben we een connected commits tekening gemaakt.

Vandaag heb ik weer de nieuwe omgeving opgezet van sprint 5. Ik heb onder andere de nieuwe repository forken en het opstellen van de nieuwe issues in de projectboard. Ik heb samen met een aantal studenten een simpele overzicht gemaakt met alle belangrijke momenten van de aankomende drie weken. ook hebben we een workshop gevolgt over interactie en hebben we een opdrachtje gemaakt over feedback en feedforward. Ik ben vervolgens begonnen met het maken van userstorys en het maken van wireframes en wireflows van de interactieve elementen die ik wil maken.

js fundamentals

• Ik heb de eerste 2 lessen afgerond

links

• link naar user story
• link naar user story

Vandaag heb ik gewerkt aan javascript zelfstudie en ik heb de drie stappen plan geoefend. Ook ben ik verder gegaan met de wireframes voor de opdracht van de opdrachtgever. Ik volg de lessen van js fundamentals maar ik heb ook een boek waaruit ik leer.

js fundamentals les 6

links

• link aantekeningen javascript
• link aantekeningen javascript DOM

Vandaag ben ik bezig geweest met de workshop over de 3 stappenplan. Ik heb gekeken naar de comments, de stappenplan en de console. Ook ben ik bezig geweest met de interaction opdracht die ik wil gaan maken.

js fundamentals les 7

links

• link aantekeningen javascript
• link aantekeningen javascript DOM

Bij welke critera hoort deze deeltaak. Deze deeltaak behoort tot metodisch handelen en probleemoplossend denken. Welke ui events kun je nog meer toepassen voor de opdracht van de opdrachtgever: de button animaties en een slider voor de form in mijn pagina.

Hoeveel van de 10 experimenten heb ik gedaan: 5

links

• link aantekeningen javascript
• link aantekeningen javascript DOM

Vandaag was de js challenge over view transitions

links

• link aantekeningen javascript
• link aantekeningen javascript DOM

Vandaag heb ik de workshop over de user testing gevolgt. vervolgens ben ik begonnen met het maken van een scenario voor de testen die op mijn interactie wordt uitgevoerd. Vervolgens heb ik 2 user tests gekregen bij medestudenten. Ook heb ik twee reviews gedaan bij twee studenten. Ik heb ook een review gekregen van Koop.
Vandaag zou er ook een we love web van Werner Hiemstra, digital product designer van Soda studio. hij was er niet dus Justus Sturkenboom had een presentatie gegeven.

Vandaag luister ik naar een presentatie over digital gardening.het gaat over hoe je jouw eigen stukje van het internet kunt bouwen en onderhouden. Net zoals een echte tuin moet je er aandacht aan besteden: je voegt nieuwe ideeën toe, verwijdert wat niet meer belangrijk is en zorgt dat het groeit. Het is een plek waar jouw kennis en creativiteit samenkomen.

Justus begint zijn verhaal met zijn liefde voor het web. Hij vertelt hoe het vroeger voelde als een magische plek vol mogelijkheden. Iedereen kon iets maken of ontdekken. Maar tegenwoordig voelt dat anders. Sociale media en grote platforms hebben het web veranderd. De vrijheid en creativiteit van vroeger is er niet meer door de eindeloze stroom van posts en algoritmes.

Justus gaat terug naar zijn jeugd. Het begon allemaal in 1987, toen hij negen jaar oud was. Hij speelde met Lego en treinen, totdat zijn vader een computer kocht. Dit was een ncr computer. Justus ontdekte hoe het werkte en begon zelfs kleine aanpassingen te maken. Hij speelde spelletjes zoals Aldo en leerde code schrijven in BASIC. In 1994, toen internet langzaam bekender werd, fietste hij van Amersfoort naar Utrecht om via de universiteit sneller internet te gebruiken. Met een doosje floppies downloadde hij informatie en ontdekte hij de eerste websites. Later, in 1998, ging hij it studeren en begon hij met het bouwen van websites. Alles werd toen nog handmatig gedaan met HTML. Maar in 2004 veranderde alles. Sociale media zoals Hyves kwamen op en later platforms zoals Facebook en TikTok. Mensen hoefden niet meer zelf een website te maken. Alles was voorgekauwd: je hoefde alleen maar een profiel aan te maken en wat foto's te uploaden.

alles heeft vooral te maken hebben met The Stream. Dit is die eindeloze stroom van posts, videos en berichten die we dagelijks op sociale media zien. Het voelt alsof je urenlang door van alles en nog wat scrollt, maar in werkelijkheid bepalen algoritmes wat je ziet. Grote bedrijven zoals Google, Facebook en TikTok hebben de controle. Het probleem? Het web is niet meer van ons. plaats van dat we zelf iets maken of delen, worden we passieve gebruikers. Onze tijd en aandacht worden verkocht aan adverteerders. Dat is niet wat het internet ooit was.

Een digitale tuin is een eigen plek op het internet waar jij alles kunt verzamelen wat voor jou belangrijk is. Net als een echte tuin is het een werk in uitvoering: je voegt nieuwe ideeën toe, werkt oude informatie bij en blijft het verbeteren. Een digitale tuin hoeft niet perfect te zijn. Het mag er chaotisch uitzien en onaf zijn. Het is een plek waar jouw creativiteit en ideeën groeien, zonder dat je je hoeft te conformeren aan de strakke sjablonen van sociale media.

zes belangrijke principes om een gode digitale tuin te maken:

Topografie boven tijdlijnen In een tuin draait het niet om wanneer iets is gemaakt, maar om hoe alles met elkaar verbonden is.

Altijd blijven groeien Net als een echte tuin is een digitale tuin nooit af. Je blijft nieuwe dingen toevoegen, aanpassen en verbeteren.

Imperfectie is oké Het hoeft niet perfect te zijn. Half-afgemaakte ideeën mogen zichtbaar zijn. Het proces is net zo belangrijk als het resultaat.

Speels en persoonlijk Maak je digitale tuin uniek. Laat het een plek zijn die echt bij jou past en waar je jouw interesses op een creatieve manier kunt laten zien.

Diverse inhoud Een digitale tuin is meer dan alleen tekst. Voeg videos, podcasts, tekeningen of zelfs experimenten toe. Alles wat je inspireert, kan een plek krijgen.

Blijf eigenaar van je werk Bewaar jouw tuin op een plek die van jou is, zoals een eigen website. Vertrouw niet op sociale media, want als die verdwijnen, ben je alles kwijt.

links naar de 2 users die ik feedback heb gegeven

• student 1
• student 2
• Link naar mijn user story
• Link naar feedback van Koop

Vandaag heb ik de workshop navigeren en labels gevolgt. hierbij heb ik een aantal opdrachten uitgevoerd op bestaan webpagina als nu en nos. Ik heb geleerd over de termen straatnaambordjes en bewegwijzering. Ook heb ik geleerd over iconen en labels. Hier heb ik een aantal oefeningen gedaan. Aan het einde van de worskop heb ik mijn testresultaten gepresenteerd aan een 2de jaars student en heb ik ook wat feedforward en feedback gekregen. zie issues 3 leervragen over navigeren en labels - Hoe maak je een knop toegankelijk zonder een label - Waarom is het belangrijk om duidelijke iconen te hebben - Waarom is het belangrijk om labels te gebruiken. wat wil ik laten zien aan de opdrachtgever aanstaande sprint-review - De uitklapbare form - Het maken van de playlistcard

links naar de 2 users die ik feedback heb gegeven

• student 1
• student 2
• Link naar mijn user story
• Link naar feedback van Koop

Vandaag ben ik verder gegaan met de feedback punten die ik heb gekregen. De feedback punten die ik heb opgelost zijn: - pijlen voor het links en rechts scrollen - de playlist card wordt nu als eerst weergegeven in de rij inplaats van als laatste - De form sluit automatisch als de form gesubmit wordt - De pijl icon om de form te sluiten is nu een kruis icon

links naar de issues met de commits

• issue-1
• issue-2
• issue-3
• issue-4

Vandaag ben ik begonnen met het voorbereiden van de sprint-review door het afmaken van de kleine dingentjes over de code en ik ben bezig geweest met de readme maken Ook heb ik al bedacht welke vragen ik eventueel wil gaan stellen. Ook heb ik de workshop gevolgt hoe je het beste de interactie kan presenteren aan de opdrachtgever. Het is handig om dit te doen met video's van de interactie. Tijdens de workshop hebben we ook de readme's van drie andere studenten van de 2e jaars bekeken. We hebben daarbij gekeken naar

links naar werk

• Readme
• item-1
• item-2
• item-3

Vandaag heb ik de sprint-review van sprint 5 gehad. Hierbij heb ik mijn interactieve element gepresenteerd aan de opdrachtgever. Ik heb de interactie gedemonstreerd en heb alle vertelt over de feedforward van de interactie. Ik heb vervolgens geen feedback gekregen. De opdrachtgever was tevreden met hoe het werkte en uitzag. De form moet wel responsive zijn voor de desktop versie. Deze is nu wel overzichtelijk en bruikbaar maar ziet er uitgerekt uit.

links naar werk

• Readme

Vandaag hebben we de reotrospective gedaan voor sprint 5 en hebben we feedback gekregen over probleem oplossend denken.

Vandaag heb ik te horen gekregen welke opdrachtgever ik had en ben ik de werkomgeving aan het klaarzetten. Dit zijn de projectboard, forken van de repo en het opstellen en voorbereiden van de briefing met de opdrachtgever. Samen met de andere studenten hebben we een mindmap gemaakt om de briefing voor te bereiden.

Vandaag was de js challenge. Hier gingen we werken met de emoji generator en moesten we een creative oplossing voor een button. Ook hadden de studenten van informaat de breifing opgestuurd. Na de js challenge ben ik bezig geweest met maken van een breakdownschets en de eerste delen van html en de styleguide.

Vandaag was de workshop over mobile first development en het bepalen van breakpoints met media queries.

Vandaag was de code review voor de eerste versie. Dit ging voornamelijk over de html code en de stylesheets. De studenten van Informaat kregen een willekeurige team die ze moesten code reviewen. Vervolgens kregen we ook een korte gesprek met Koop over de voortgang van het project.

vandaag ging ik code reviews uitvoeren op andere studenten en kreeg ik ook feedback op mijn interactie. De issues zijn te vinden in de project board van Informaat.

Vandaag was er ook een We love Web waarin Dave Bitter ging spreken over AI voice interfaces.
Tijdens zijn presentatie vertelde Dave Bitter over een app die hij had gemaakt, genaamd Presi Parrot. Deze app zet spraak om in tekst. Dave begon zeven jaar geleden met het onderzoeken hoe je spraak naar tekst kunt omzetten. De app werkt met technologie van het web en maakt gebruik van moderne spraakherkenning-APIs.

Spraakherkenning is al lang in ontwikkeling, van de eerste pogingen in de jaren vijftig tot de slimme systemen zoals Alexa en Siri die we nu kennen. Tegenwoordig kun je makkelijk spraak omzetten naar tekst uit video's en audio. Presi Parrot werkt door eerst te checken of spraakherkenning beschikbaar is op je apparaat. De app kan ook de stem aanpassen, bijvoorbeeld door de toonhoogte te veranderen, zodat het persoonlijker aanvoelt. Ook kunnen er visuele effecten worden toegevoegd met technologie zoals 3js.

Een belangrijke functie van de app is dat het gebruik maakt van spraak-APIs, zoals die van Eleven Labs, die zorgen voor krachtige stemmen. Het nadeel is dat de data eerst naar de cloud moet, wat live gesprekken een beetje vertraagt. Toch zei Dave dat de gebruikerservaring altijd het belangrijkste is. Hij eindigde zijn presentatie door te benadrukken dat oude technieken een belangrijke basis zijn voor nieuwe innovaties en wees op projecten zoals Google's Project Fugu, die ervoor zorgen dat webapps steeds beter worden.

Vandaag heb ik de workshop coding conventions gevolgt. Dit ging over de de layout, inspringen, naamgeving etcc. van je html javascript en css files. Ik heb de coding convention toegevoegt aan mijn eigen code, en heb dit gecommit. Vervolgens ben ik ook bezig geweest met de eerste voorbereidingen voor het maken van de readme.

• Readme

Vandaag heb ik een poster designed voor de expo op vrijdag. Ik heb dit gedaan in een gezamelijke figma bestand. Ook ben ik verder gegaan met de readme. Alle commits van de readme zijn te zien in de readme issue in de projectboard. na school ben ik ook verder gegaan met de voorbereiding voor de sprint review.

Vandaag was de sprint review ik heb mijn pagina kunnen demonstreren. De opdrachtgever was tevreden met het geleverde werk, Wel heb ik een aantal feedback punten gekregen die ik de volgende keer kan toepassen. Zie de issue voor de feedback.

• Readme

Vandaag is de retrospetive van sprint 6. Tijdens de les gingen we bewijslast met 3 andere studenten vergelijken. Ook Was de expo voor de laatste projecten van de eerste en tweede jaar er. Hier ben ik gaan rondkijken naar het werk van andere studenten.

Vandaag heb ik de instructies van de sprintplanning uitgevoerd, Dit houdt in nodejs installeren en de nieuwe files in de repo bestuderen. Ook ben ik begonnen met het oefenen van json data. en Ben ik gaan kijken naar de code in de server.js. npm start is server starten npm update is packages updaten npm install is installeren node modules in je repo

Ik ben begonnen met het schetsen van ideeen voor de nieuwe visitekaartje. En ben ik vervolgens begonnen met de html en css code.

Workshop gevolgt over rest api en json. Ik heb geleerd hoe je nieuwe routes kunt maken met voor andere pagina'sen hoe je dit kunt koppelen aan views. En hoe ik met de liquid verschillende object en variabelen kan edited , zoals bij de date. Ook heb ik gebruik gemaakt van custom propertys en ben ik begonnen met het invoeren van deze custom data in mijn nieuwe visitekaartje en het verder stylen van de html.

Kilian heeft polypane gemaakt. Het wordt door 10 duizenden mensen gebruikt over de hele wereld. Hij maakte zijn eerste website met frontpage 2000. hij verdiente om zijn 12de jaar geld met zijn website aan de hand van add banners op de site, waarbij hij 15 cent per klik kreeg. nu is dat niet zo duur. Op 16 jarige leeftijd heeft hij zijn eigen bedrijf gestart. Hierin maakte hij websites voor andere. Hij heeft honderden websites gemaakt voor andere met de webtechnieken van toen. Hij ging testen met websites op verschillende telefoons van vroeger, toen kwam er de iphone, zei introduceerde responsive web design. Hij heeft verschillende libarys gemaakt om zijn werk makkelijker te maken, zoals: -trimage zijn eerste desktop applicatie om afbeeldingen te compressen - css libarys - grafieken maken met javascript - f.lux een commandlinetool in python gemaakt. het maakt je scherm geeler gelinkt aan de tijd van de dag. - fromscratch op aantekeningen in te bewaren om zonder opslaan te drukken. alles wat je typed wordt automatisch opgeslagen. Hij maakte steeds kleine projecten die hij steeds complexer maakte zodat hij zichzelf kon ontwikkelen. polypane 0.0 Vroeger gebruikte hij sketch om zijn wesites te designen. toen kwam er een nieuwe functie waarmee je pagina op verschillende schermgroottes kan laten zien. dat heb je tegenwoordig standaard in hedendaagse designtools. eerst gebruikte hij de eerste versie van polypane voor zichzelf. voor zijn eigen gemak. hij heeft gemerkt dat het zijn werk makkelijker maakte. in 2019 ging hij zijn browser delen met andere. dit was eerst op persoonlijk vlak en later kon je je in schrijven en vervolgens gebruiken.. met de feedback die hij kreeg kon hij polypane verbeteren. een feedback punt dat hij had gekregen was dat de vensters eerst niet alle ging mee scrollen. hij gebruikte zelf een andere tool waardoor dit wel mogelijk was. deze tool gebruikte niet idereen dus heeft Hijhet als functie verwerkt in polypane. ------ in 2019 was hij werkloos, dus had hij meer tijd om aan polypane te werken. op 14 mei heeft hij polypane 1.0 gelauncht. polypane was toen niet meer gratis. hij werd in het eerste jaar veel gekopieerd door andere mensen om hetzelfde te maken, maar zei stopte uiteindelijk. elke maand probeerde hij nieuwe features toe te voegen, zoals darkmode. hij vroeg heel vaak om feedback waardoor deze features onstonden. ook dacht hij wat mensen gingen denken wat handig zou zijn als feature. hij heeft veel features bedacht bijvoorbeeld voor: design, toegankelijkheid, controleren van toegankelijkheid, focus volgorde,console.img,json viewer, ondersteunen van extensions, browserview, een eigen element inspector( chrome kan alleen 1 tegelijk), errormessages, technieken gebruikt om polypane te maken - electron - interface is geschreven in react - heel veel javascript omdat hij veel van de browser moet namaken - communicatie binnen een desktop app - react state - inter process communication - message bus - message ports - chrome devtools protocol sideproject die hij heeft gemaakt. - smashinhmagazine ( alle styling van een website ophalen, bijvoorbeeld de kleuren, fonts, shadows , border etc..) - fix contrast (een extentie voor kleurcontrast) - polypane cloud () - polypane for ipad ( in progress) hij raad aan om side project te maken om te oefenen en werkuren in code te krijgen. hierdoor krijg je meer kennis. polypane is bijna 10 jaar oud. -------------------- hij heeft een tool waarmee hij kan zien welke schermen en buttons of functies het meest gebruikt worden, aan de hand daarvan maakt hij onder andere feedback

1.Ik kan uitleggenwat NodeJS is en waarvoorhet gebruikt wordt - 2 2.Ik weet wat het doel van package.json is en heb hier aanpassingen ingemaakt -1.5 3.Ik heb met npmpackages geïnstalleerd en gebruikt in het bestandserver.js -2 4.Ik kan met commando’s in de terminal een NodeJSproject stoppen en starten -3 5.Ik weet waarom ik mijn NodeJSproject regelmatig moet herstarten en kan dit uitleggen -2 6.Ik heb een strategie voor debuggen in NodeJS -1 7.Ik kan uitleggen wat Express.js doet en waarom het nodig is om met NodeJS eenwebsite te bouwen -1.5 8.Ik weet wat routes zijn en kan zelf een nieuweroute aanmaken -2.5 9.Ik weet wat request en response argumenten zijn ineen functie voorhet laden van data -3 10.Ik heb gebruik gemaakt van een request parameter om specifieke data te laden -0 11.Ik kan uitleggen wat Liquid doet en waaromhet nodig is om met Express.js een website te maken -1 12.Ik weet hoe ik data naar Liquid verstuur om dit te gebruiken bij het renderen van een pagina -1.5 13.Ik weet hoe ik Liquid filters toe kan passen en waar ik kan vinden hoe die werken -0 14.Ik heb een nieuwe route gemaakt en nieuwe data meegegeven aan een Liquid view -0 15.Ik weet waar een foreach loop voor gebruikt wordt en pas het toe in een Liquid view om HTML te renderen -2 16.Ik kan in Liquid een controle maken waarmee de avatar niet getoond wordt als deze niet in whois.fdnd.nl is ingevuld -2 17.Ik heb een strategie voor debuggen in Liquid -0 18.Ik kan data fetchen uit een REST API -2 19.Ik snap het verschil tussen HTTP requests van de methodes GET en POST -2 20.Ik kan data uit een REST API filteren of sorteren -2 21.Ik snap wat het async keyword doet in JavaScript code -1.5 22.Ik weet wat het doel is van een try/catch block en kan het gebruiken bij het parsen van JSON -1 23.Ik begrijp het verschil tussen client-side JavaScript en server-side JavaScript en wanneer ik welke het handigst in kan zetten -2 24.Ik kan formulierdata die is ge-POST opslaan ineen variabele op de server en gebruiken bijhet renderen van een pagina -0 25.Ik kan formulierdata die is ge-POST door middel van een POST of PATCHHTTP request opslaan in de REST API -0

-filters: -concat; hiermee kun je bijvoorbeeld meerdere arrays of waardes samenvoegen -at_least; hiermee kun je filteren op welk nummer groter is -floor; een kommagetal afronden -replace; een waarde veranderen met een andere waarde -remove; een waarde bijvoorbeeld in een zin weghalen

1. Ik kan uitleggen wat NodeJS is en waarvoor het gebruikt wordt
2. 🍗
3. Ik weet wat het doel van package.json is en heb hier aanpassingen in gemaakt
4. 🍗
5. Ik heb met npm packages geïnstalleerd en gebruikt in het bestand server.js
6. 🍗
7. Ik kan met commando’s in de terminal een NodeJS project stoppen en starten
8. 🍗
9. Ik weet waarom ik mijn NodeJS project regelmatig moet herstarten en kan dit uitleggen
10. 🍗
11. Ik heb een strategie voor debuggen in NodeJS
12. 🍗
13. Ik kan uitleggen wat Express.js doet en waarom het nodig is om met NodeJS een website te bouwen
14. 🍗
15. Ik weet wat routes zijn en kan zelf een nieuwe route aanmaken
16. 🤓
17. Ik weet wat request en response argumenten zijn in een functie voor het laden van data
18. 🍗
19. Ik heb gebruik gemaakt van een request parameter om specifieke data te laden
20. 🍗
21. Ik kan uitleggen wat Liquid doet en waarom het nodig is om met Express.js een website te maken
22. 🍗
23. Ik weet hoe ik data naar Liquid verstuur om dit te gebruiken bij het renderen van een pagina
24. 🍗
25. Ik weet hoe ik Liquid filters toe kan passen en waar ik kan vinden hoe die werken
26. 🤓
27. Ik heb een nieuwe route gemaakt en nieuwe data meegegeven aan een Liquid view
28. 🍗
29. Ik weet waar een foreach loop voor gebruikt wordt en pas het toe in een Liquid view om HTML te renderen
30. 🍗
31. Ik kan in Liquid een controle maken waarmee een image niet getoond wordt als deze niet in de database is ingevuld
32. 🫣
33. Ik heb een strategie voor debuggen in Liquid
34. 🫣
35. Ik kan data fetchen uit een REST API
36. 🍗
37. Ik snap het verschil tussen HTTP requests van de methodes GET en POST
38. 🍗
39. Ik kan data uit een REST API filteren of sorteren
40. 🤓
41. Ik snap wat het async keyword doet in JavaScript code
42. 🫣
43. Ik weet wat het doel is van een try/catch block en kan het gebruiken bij het parsen van JSON
44. 🤓
45. Ik begrijp het verschil tussen client-side JavaScript en server-side JavaScript en wanneer ik welke het handigst in kan zetten
46. 🫣
47. Ik kan formulier data die is ge-POST opslaan in een variabele op de server en gebruiken bij het renderen van een pagina
48. 🤓
49. Ik kan formulier data die is ge-POST door middel van een POST of PATCH HTTP request opslaan in de REST API
50. 🍗

1. Ik begrijp het verschil tussen client-side JavaScript en server-side JavaScript en wanneer ik welke het handigst in kan zetten
2. 3
3. Ik heb een strategie voor server-side JavaScript debuggen, voor client-side JavaScript debuggen, en voor Liquid code debuggen
4. 3
5. Ik kan GET en POST routes aanmaken en request parameters gebruiken
6. 3
7. Ik kan server-side JSON data fetchen uit een REST API
8. 3
9. Ik kan data uit een REST API filteren of sorteren
10. 2
11. Ik snap wat het async keyword doet in JavaScript code
12. 2
13. Ik weet wat het doel is van een try/catch block en kan het gebruiken bij het parsen van JSON
14. 3
15. Ik kan met een client-side fetch een werkend formulier verrijken
16. 2
17. Ik kan multi-page en single-page view transitions inzetten en aanpassen
18. 2
19. Ik kan verschillende manieren van responsive images uitleggen en toepassen
20. 3
21. Ik weet hoe ik de resultaten van een performance audit moet interpreteren en hoe ik performance problemen kan oplossen
22. 2
23. Ik weet hoe ik met client-side JS de UX kan verbeteren, rekening houdend met progressive enhancement
24. 3
25. Ik weet hoe ik binnen HTML, CSS en client-side JS nieuwe technieken toe kan passen, rekening houdend met oudere browsers
26. 2
27. Ik weet wat objecten, arrays, strings, loops, variabelen, functies en parameters zijn, en kan die in JavaScript inzetten
28. 2
29. Ik weet wat geavanceerdere concepten in JavaScript zijn, zoals closures, promises, callbacks, scope en de event loop
30. 2
31. Ik kan via GitHub met feature branches werken, pull requests aanmaken, reviewen en mergen
32. 3
33. Ik weet hoe ik formulieren pro-actief kan valideren met client-side code
34. 1.5
35. Ik weet de eerste regel van ARIA, en wat dat betekent voor hoe ik HTML schrijf
36. 3
37. Ik weet wat layout shifts zijn, door wat ze veroorzaakt worden, hoe ik ze kan meten en hoe ik ze kan oplossen
38. 3
39. Ik weet wat de Core Web Vitals zijn, hoe ik die kan meten, en hoe ik de cijfers moet interpreteren
40. 2
41. Ik weet hoe perceived performance invloed heeft op de beleving van een gebruiker, en ik heb de ontwerp- en code vaardigheden om die toe te passen
42. 3
43. Ik kan UI states in meerdere lagen van progressive enhancement inzetten om de UX te verbeteren
44. 2
45. Ik kan een UI leuker en prettiger maken, zonder de core functionaliteit uit het oog te verliezen
46. 3
47. Ik kan scroll-driven animations inzetten om de UI beter te maken
48. 3
49. Ik weet hoe ik verschillende vormen van feature detection in kan zetten in HTML, in CSS en in client-side JS
50. 3