Vragenlijst Sprint 12 - 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 3 
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. In liquid zou ik debuggen met {{ variable \ json }} 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  3 
Ik kan data uit een REST API filteren of sorteren Zie hier een voorbeeld hoe ik de REST API filter met _embedded. Op deze manier heb ik meerdere velden kunnen verkrijgen.  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. 3 
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. 3 
Ik kan met een client-side fetch een werkend formulier verrijken Ik heb een contactformulier op de case detailpagina gemaakt. Na het verzenden van de gegevens krijg je een loading state te zien. Dit heb ik met client-side js gemaakt. Zie hier een voorbeeld van mijn code. 2 
Ik kan multi-page en single-page view transitions inzetten en aanpassen Voorbeeldvan een multi-page transition in mijn code.  2 
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 heb bijvoorbeeld een 'hide menu on scroll' toegevoegd met client side js. Dit zorgt ervoor dat een gebruiker tijdens het scrollen op mobiel de header verdwijnt wat het voor de gebruiker prettiger maakt. Voorbeeld in mijn code. 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. 3 
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 Ik heb gewerkt met branches en pull requests. Binnen de pull requests wordt er feedback gegeven en uiteindelijk gemerched naar de main. 2 
Ik weet hoe ik formulieren pro-actief kan valideren met client-side code Met :valid en :invalid toegevoegd. Voorbeeld in mijn code. Maar nog niet met client side js 1 
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. 3 
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. . 3 
Ik kan UI states in meerdere lagen van progressive enhancement inzetten om de UX te verbeteren Dit heb ik bijvoorbeeld op mijn contactformulier en de bookmark functionaliteit. Deze hebben allebei 3 verschillende UI states: ideal, loading en succes state. 3 
Ik kan een UI leuker en prettiger maken, zonder de core functionaliteit uit het oog te verliezen Dit heb ik bijvoorbeeld op mijn contactformulier toegepast. Als client side js aan staat dan wordt tijdens het verzenden van de gegevens een coole loading state toegevoegd. Zodra clients side js uitstaat blijft de 'core functionaliteit: het verzenden van gegevens' behouden. 3 
Ik kan scroll-driven animations inzetten om de UI beter te maken Ik heb een scroll driven animation toegepast op de projecten cards. Voorbeeld in mijn code. 3 
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** ⚠️