Vragenlijst Sprint 10 - ambersr/i-love-web GitHub Wiki

Vraag Antwoord Punten
Ik begrijp het verschil tussen client-side JavaScript en server-side JavaScript en wanneer ik welke het handigst in kan zetten Client-side JavaScript is voor interacties. Voorbeeld client-side Server-side JavaScript draait op de server om gegevens te verwerken en terug te sturen naar de browser. Voorbeeld server-side 2 
Ik heb een strategie voor server-side JavaScript debuggen, voor client-side JavaScript debuggen, en voor Liquid code debuggen Zie hier een voorbeeld hoe ik debug in server-side JS. Ik heb geen voorbeeld van debuggen in Client-side JS maar dat zou ook met console.log() kunnen. 3 
Ik kan GET en POST routes aanmaken en request parameters gebruiken Voorbeeld in mijn code: GET route i.c.m parameter. Voorbeeld in mijn code: POST route i.c.m parameter 2 
Ik kan server-side JSON data fetchen uit een REST API Ik heb een JSON fetch functie deze gebruik ik om data uit een REST API om te zetten naar JSON. Voorbeeld in mijn code  2 
Ik kan data uit een REST API filteren of sorteren Zie hier een voorbeeld hoe ik de REST API messages filter op de waarde "watchlist Amber".  3 
Ik snap wat het async keyword doet in JavaScript code Async keyword zorgt ervoor dat de functie meteen verder gaat zonder te wachten en geeft altijd een promise terug. Voorbeeld hoe ik dit heb gebruikt in mijn code. 2 
Ik weet wat het doel is van een try/catch block en kan het gebruiken bij het parsen van JSON Als de functie niet uitgevoerd kan worden (try) dan wordt de catch uitgevoerd. Zie voorbeeld in mijn POST. 2 
Ik kan met een client-side fetch een werkend formulier verrijken Ik doe dit op mijn watchlist knop formulier. Het formulier wordt verstuurd via een fetch naar de server. Dit is de client-side actie (met JavaScript), en de server ontvangt de data zoals bij een normaal formulier, maar zonder de pagina opnieuw te laden. Op deze manier wordt de pagina bij het uitvoeren van het formulier niet volledig herladen. Zie hier een voorbeeld van mijn code. 2 
Ik kan multi-page en single-page view transitions inzetten en aanpassen Voorbeeld van een multi-page transition in mijn code. Ik heb nog g  1 
Ik kan verschillende manieren van responsive images uitleggen en toepassen Met het <picture> element laat je verschillende afbeeldingen tonen op basis van schermbreedte. Met srcset en sizes kiest de browser automatisch de best passende afbeelding. Zie hier hoe ik dit op mijn Directus afbeeldingen heb toegepast. 3 
Ik weet hoe ik de resultaten van een performance audit moet interpreteren en hoe ik performance problemen kan oplossen In deze issue heb ik een performance audit uitgevoerd en laat ik zien hoe ik de problemen heb opgelost. Ik deze uitgevoerd aan d.h.v een performance Lighthouse test. Hieruit kwamen een aantal problemen die ik in die issue heb aangepakt.  3 
Ik weet hoe ik met client-side JS de UX kan verbeteren, rekening houdend met progressive enhancement Ik doe dit bijvoorbeeld met de 'add to watchlist', ik heb met client-side JS een loading state toegevoegd zodra interactie aan het laden is. Op deze manier zorg ik ervoor dat het laden van de interactie sneller oogt (perceived performance). Zodra js niet werkt dan blijf de interactie werken maar wordt er geen animatie toegevoegd. Hierbij houd ik rekening met progressive enhancement. 2 
Ik weet hoe ik binnen HTML, CSS en client-side JS nieuwe technieken toe kan passen, rekening houdend met oudere browsers In CSS gebruik maken van @supports en fallback voor variabelen. Voorbeeld. In HTML gebruik maken van een <picture> met een source en als fallback een img meegegeven. Voorbeeld. In JS heb ik nog niet geëxperimenteerd hiermee. 2 
Ik weet wat objecten, arrays, strings, loops, variabelen, functies en parameters zijn, en kan die in JavaScript inzetten In JavaScript gebruik je variabelen om gegevens op te slaan, zoals strings (tekst), arrays (lijsten) en objecten (structuren met eigenschappen). Met loops herhaal je code, en met functies bundel je herbruikbare stukjes logica, waarbij je met parameters flexibel gegevens aan die functies meegeeft. 2 
Ik weet wat geavanceerdere concepten in JavaScript zijn, zoals closures, promises, callbacks, scope en de event loop Ik weet nog niet wat dit zijn. Ook nog niet bewust toegepast in mijn project. 0 
Ik kan via GitHub met feature branches werken, pull requests aanmaken, reviewen en mergen Nog niet mee gewerkt. Ik denk dat we hier in sprint 11 mee aan de slag gaan. 0 
Ik weet hoe ik formulieren pro-actief kan valideren met client-side code Nog niet mee gewerkt. Maar ik denk zoiezo met een required attribuut. 0 
Ik weet de eerste regel van ARIA, en wat dat betekent voor hoe ik HTML schrijf Dit betekent dat je bij voorkeur standaard HTML-elementen zoals , , of gebruikt, omdat die al automatisch toegankelijk zijn. Pas als er geen geschikt HTML-element bestaat, gebruik je ARIA om extra semantiek of toegankelijkheid toe te voegen.   3 
Ik weet wat layout shifts zijn, door wat ze veroorzaakt worden, hoe ik ze kan meten en hoe ik ze kan oplossen Layout shifts zijn onverwachte verschuivingen van content op een webpagina, vaak veroorzaakt door afbeeldingen zonder afmetingen, webfonts of dynamisch toegevoegde elementen. Je kan ze meten in bijvoorbeeld een Lighthouse performance test van DevTools. Deze zijn op te lossen door een expliciete width en height attribuut aan images mee te geven en een font een font-display: swap; mee te geven. 3 
Ik weet wat de Core Web Vitals zijn, hoe ik die kan meten, en hoe ik de cijfers moet interpreteren Core Web Vitals zijn drie belangrijke meetpunten van Google die de gebruikerservaring van een website beoordelen. Deze kan je hierin meten: Lighthouse, PageSpeed Insights, & Chrome DevTools. 2 
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 Technieken die ik hiervoor kan toepassen zijn: lazy loading toevoegen op afbeeldingen onder de beeldscherm vouw voorbeeld & gebruik maken van een <picture> met source zodat verschillende formaten op een juist beeldscherm worden ingeladen. Voorbeeld. Ontwerp vaardigheden: loading icon toevoegen tijdens het laden van een interactie zodat de interactie sneller oogt voor de gebruiker. Voorbeeld 3 
Ik kan UI states in meerdere lagen van progressive enhancement inzetten om de UX te verbeteren Dit doe ik met UI states. In mijn geval heb ik op mijn watchlist knop een ideal, loading en succes state toegevoegd. Zie hier hoe ik dit in een wireflow heb uitgewerkt. 2 
Ik kan een UI leuker en prettiger maken, zonder de core functionaliteit uit het oog te verliezen Dit heb ik bijvoorbeeld met de 'add to watchlist knop' gedaan. Als de formulier in werking wordt gezet dan krijg je een coole loading state. Ook als de JS uit staat blijft de knop werken en behoudt je de core functionaliteit van de knop, alleen werkt de animatie niet meer. 3 
Ik kan scroll-driven animations inzetten om de UI beter te maken Nog niet toegepast op mijn website. Dit zou denk ik in CSS kunnen met bijvoorbeeld position: sticky en dan @keyframes waarbij je een animatie in gang zet. Bron waar dit wordt toegelicht. 0 
Ik weet hoe ik verschillende vormen van feature detection in kan zetten in HTML, in CSS en in client-side JS In CSS kan dit met een @support. Zie hier hoe ik dat in mijn code doe. In HTML en JS heb ik nog niet geëxperimenteerd met feature detection.  1 
Totaal aantal punten   49 punten van 75 punten 

⚠️ **GitHub.com Fallback** ⚠️