Vragenlijst Sprint 12
Hieronder de vragenlijst van Sprint 10 met mijn antwoorden:
1. Ik begrijp het verschil tussen client-side JavaScript en server-side JavaScript en wanneer ik welke het handigst in kan zetten
Ik begrijp dit. Server Side Javascript code wordt gebruikt om data op te halen, een server op te starten, routes aan te maken en data door te geven aan views. Client-side JS is code die op een pagina getriggerd wordt binnen een view.
Voorbeeld van server-side scripting:
Voorbeeld van client-side scripting:
Punten: 3
2. Ik heb een strategie voor server-side JavaScript debuggen, voor client-side JavaScript debuggen, en voor Liquid code debuggen
Zeker, voor server-side en client-side debugging kan je content loggen in de console, of naar een testbestand schrijven.
Hier voorbeelden:
Loggen (server):
Loggen (client):
Liquid code debuggen:
In liquid kan je code debuggen op de volgende manier {{ variabele | json }}
Punten: 3
3.Ik kan GET en POST routes aanmaken en request parameters gebruiken
Ik kan dit. Ik heb in server.js GET en POST routes gemaakt met app.get en app.post
Ook kan ik request parameters gebruiken om de get te specificeren:
Punten: 3
4. Ik kan server-side JSON data fetchen uit een REST API
5. Ik kan data uit een REST API filteren of sorteren
Ik kan met de ?sort en ?filter filteren en sorteren. (op directus) Met filteren laat je alleen de data zien die voldoet aan een bepaalde eis. Met sorteren kan je de volgorde van de opgehaalde data aanpassen op basis van een voorwaarde.
Als je een andere REST-API raadpleegt dan moet je altijd even de documentatie lezen hjoe je dit kan doen.
Punten: 3
6. Ik snap wat het async keyword doet in JavaScript code
Het async keyword voert een functie uit waardoor de code even "gepauzeert" wordt totdat er een response is.
Punten: 3
7. Ik weet wat het doel is van een try/catch block en kan het gebruiken bij het parsen van JSON
Punten: 2
8. Ik kan met een client-side fetch een werkend formulier verrijken
Dit heb ik gedaan. Hiermee kan je een bijvoorbeeld een POST-Request uitvoeren zonder dat de pagina rtefreshed.
Punten: 2
9. Ik kan multi-page en single-page view transitions inzetten en aanpassen
Beide heb ik gedaan.
Multipage:
Single page(SPRINT 10):
Punten: 3
10. Ik kan verschillende manieren van responsive images uitleggen en toepassen[SPRINT 10]
Ook weet ik dat het kan met srcset, maar nog niet de moed gevonden om dit uit te zoeken.
In sprint 12 heb ik dit niet kunnen doen, omdat de rijksmuseum API dit niet supportte.
Punten: 2
11. Ik weet hoe ik de resultaten van een performance audit moet interpreteren en hoe ik performance problemen kan oplossen
Ik weet de drie manieren om performance te testen: Lighthouse, PageSpeed Insights, WebPageTest (waterfall).
Aan de hand van het probleem wat voort doet: langzaam ladende images, cls, geen moderne image types kan je een probleem verhelpen.
Vaak ligt het probleem bij grote afbeeldingen, grote scripts, dingen niet preloaden.
Ik heb het Performance probleem voor sprint 12 nog uitgebreiud geanalyseerd
Punten: 3
12. Ik weet hoe ik met client-side JS de UX kan verbeteren, rekening houdend met progressive enhancement
Ik weet wat hiermee bedoelt wordt,
Ik heb dit op meerdere plekken gedaan, hier 1 voorbeeld:
Ik heb als scroll snap wordt ondersteunt maar de css caroussel buttons niet, pijltjes toegevoegd aan de cvaroussel met JS:
Als scroll snap niet wordt ondersteund wordt de JS niet uitgevoerd Punten: 3
13. Ik weet hoe ik binnen HTML, CSS en client-side JS nieuwe technieken toe kan passen, rekening houdend met oudere browsers
Je moet allereerst met HTML en minimale CSS de Core Functionaliteit bouwen. Daarna kan je met CSS en JS feature detection aan, nieuwe functies toevoegen die de ervaring voor de gebruiker beter maakt, of mooier. Punten 2
14. Ik weet wat objecten, arrays, strings, loops, variabelen, functies en parameters zijn, en kan die in JavaScript inzetten.
Ja, Objecten lijken een beetje op arrays, behalve dat een object vaak de "key+value" structuur heeft en de syntax anders is. Een object is een lijst met properties. Een array is een lijst met waardes (integers, strings en booleans) Een string is een waarde die wordt gezien als een soort tekst, en heeft geen numerieke waarde, in tegenstelling tot een integer. Een loop is vanzelf sprekend, een stuk code wat loop Variabelen zijn keywords die een waarde hebben die veranderen kan. Functies zijn stukken code die je kan herhalen door de functie uit te voeren Parameters zijn variabelen die je met een functie kan meesturen
15. Ik weet wat geavanceerdere concepten in JavaScript zijn, zoals closures, promises, callbacks, scope en de event loop
Closures en Promises niet, Callbakcs zijn functies die je meegeeft aan een andere functie als een variabele. De scope is het gebied waarop code weet wat hij moet doen. Een variabele die in een functie wordt AANGEMAAKT, werkt bijvoorbeeld niet buiten de scope van de functie. De event loop is eigenlijk het proces wat de JS doorloopt om de code te lezen.
Punten: 2
16. Ik kan via GitHub met feature branches werken, pull requests aanmaken, reviewen en mergen
Je kan met feature brtanches in componeneten apart de DLC doorlopen zonder dat het de hoofdcode beinvloed. Als het getest is kan het gemerged worden naar de main branch.
Punten: 3
17. Ik weet hoe ik formulieren pro-actief kan valideren met client-side code
Dit zal waarschijnlijk iets te maken hebben met Regex + onchange, maar dit krijgen we volgende sprint.
Puntent: 0
18. Ik weet de eerste regel van ARIA, en wat dat betekent voor hoe ik HTML schrijf
Regel 1 van ARIA is volgensmij: gebruik geen ARIA als er al een andere methode in HTML is om het probleem op te lossen, bijvoorbeeld de <title> tag in SVG
Punten: 3
19. Ik weet wat layout shifts zijn, door wat ze veroorzaakt worden, hoe ik ze kan meten en hoe ik ze kan oplossen
Layoutshifts zijn irritant. Het zijn verschijnselen die plaats vinden als content verschuift na de FCP. Als je layout shifts oplost is de gebruikerservaring beter, aangezien er niet per ongeluk op iets anders geklikt kan worden.
Layout shifts kan je prima meten met lighthouse. Ook kan je onderzoeken wat er gebeurd door de throtteling op 3G te zetten, en als je bij lighthouse sorteert op CLS issues ligt hij het toe.
Punten: 3
20. Ik weet wat de Core Web Vitals zijn, hoe ik die kan meten, en hoe ik de cijfers moet interpreteren.
De core web vitals (LCP, TFI, CLS) zijn te meten met performance audits Bij een LCP is er vaak sprake van render blocking issues of grote afbeeldingen. Bij CLS worden er fonts niet gerenderd en/of afbeeldingen geplaatst zonder afmetingen.
Punten: 2
21. 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
Perceived performance is de gebruiker het gevoel geven dt er wat aan het gebeuren is. Op deze manier denkt de gebruiker niet van: "Nou, deze site loopt vast of is kapot". Dit kan je oplossen met dingen als een skeleton state, of een uitgebreidere loading state als de gebruiker echt even lang moet wachten. Hier kan je ook eventueel de progressie laten zien.
In het ontwerp kan je dit ook met een wireflow laten zien.
Punten: 3
22. Ik kan UI states in meerdere lagen van progressive enhancement inzetten om de UX te verbeteren
Je kan me4t client side, als het ondersteund wordt meerdere states toevoegen, zoals een loading state of een success state.
Punten: 3
23. Ik kan een UI leuker en prettiger maken, zonder de core functionaliteit uit het oog te verliezen
Als er een post is gemaakt wordt er een geluidje afgespeeld, maar zonder het geluidje werkt het nog steeds
Ook heb ik een view-transition toegepast( vraag 9)
Punten: 2
24. Ik kan scroll-driven animations inzetten om de UI beter te maken
Punten: 0
25. Ik weet hoe ik verschillende vormen van feature detection in kan zetten in HTML, in CSS en in client-side JS
In CSS moet dit met @supports, in JS check je de properties van de API of onderdelen van het document element.
In HTML heb ik geen idee hoe je feature detection doet, of wel maar kan ik er niet opkomen.
Punten: 3