Dit is de standaardtoestand. Het betekent dat de gebruiker geen voorkeur heeft opgegeven voor verminderde beweging. De browser gaat er dan vanuit dat normale animaties en bewegingen geen problemen veroorzaken.

En @media (prefers-reduced-motion: reduce)

betekent -> “De gebruiker heeft aangegeven dat hij/zij minder beweging wil.”

Deze mediaquery werkt als iemand op zijn apparaat heeft ingesteld dat hij minder beweging wil zien. Je kunt dit gebruiken om drukke animaties uit te zetten of te vervangen door rustigere overgangen.

https://css-tricks.com/almanac/rules/m/media/prefers-reduced-motion/

Het is dus toegangelijker om -> @media (prefers-reduced-motion:no-preference) te gebruiken. Dit is namelijk toegankelijkheid by default. Je maakt iets dat in toegankelijk en gebruikelijk is voor iedereen, dus ook bijvoorbeeld mensen die visuele problemen, motorische beperkingen of gevoeligheid voor beweging hebben.

"Toegankelijkheid by default" (toegankelijkheid als standaard) betekent dat producten, diensten, websites en apps vanaf het begin van het ontwerpproces zo zijn ingericht dat ze voor iedereen, inclusief mensen met een beperking, bruikbaar zijn. Het is de proactieve benadering waarbij toegankelijkheid een basisvereiste is in plaats van een achteraf toegevoegde aanpassing.

Vragenlijst zelftest 20-02-26

Ik kan uitleggen wat NodeJS, Express en Liquid zijn, hoe die samenwerken, en hoe ik daarmee lokaal een server kan maken 🤓
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 🥞

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

met control c stop je het project en met npm start start je hem weer. Je moet hem altijd herstarten als je veranderingen in je server.js hebt gedaan,

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

Ik weet wat concole.log doet maar vind het nog wel lastig wat je dan exact mot loggen

https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/blob/1bc8e087cb1b4c2da7edc7a983ce6649d9c41d8f/server.js#L157

Ik weet wat URLs zijn, en kan de verschillende onderdelen van een URL benoemen en gebruiken 🤓
Ik weet wat in Express routes en route parameters zijn, en ik kan zelf een nieuwe route aanmaken volgens mijn eigen URL ontwerp 🥞

https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/blob/1bc8e087cb1b4c2da7edc7a983ce6649d9c41d8f/server.js#L99-L112

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

https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/blob/1bc8e087cb1b4c2da7edc7a983ce6649d9c41d8f/server.js#L114-L127

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 😅

is dit het? https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/blob/1bc8e087cb1b4c2da7edc7a983ce6649d9c41d8f/server.js#L114-L127

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

Met GET kan je de data ophalen en met POST kan je data gaat posten.

GET https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/blob/1bc8e087cb1b4c2da7edc7a983ce6649d9c41d8f/server.js#L195-L202

POST https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/blob/1bc8e087cb1b4c2da7edc7a983ce6649d9c41d8f/server.js#L182-L192

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

dit? https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/blob/1bc8e087cb1b4c2da7edc7a983ce6649d9c41d8f/server.js#L88-L89

Ik kan data uit een REST API filteren, sorteren of doorzoeken door query parameters aan te passen 🥞

https://github.com/lynnvdbo/connect-your-tribe-squad-page/blob/cf2e728bff4fbc0ec6ec21c8b12e769ed75285d0/server.js#L85-L101

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 🤓

https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/tree/main/views

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

https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/tree/main/views/partials

Ik weet hoe ik verschillende Liquid filters toe kan passen en waar ik kan vinden hoe ze werken 🥞

https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/blob/1bc8e087cb1b4c2da7edc7a983ce6649d9c41d8f/views/artikel.liquid#L46

bron https://liquidjs.com/filters/overview.html

Ik heb een strategie voor het debuggen van dynamische data in Liquid views met het json filter 🤓
Ik weet wat control flow in Liquid is, en hoe ik if en for loops kan gebruiken in een Liquid view 😅🤓

Geen idee wat control flow in Liquid is

if en for loops https://github.com/lynnvdbo/connect-your-tribe-squad-page/blob/cf2e728bff4fbc0ec6ec21c8b12e769ed75285d0/views/bijnaam.liquid#L37-L49

Ik weet wat variabelen, objects, functions, keywords, arrays, strings, statements en expressions zijn in JavaScript 😅🤓
Ik snap wat de async en await keywords doen in JavaScript code, en wat die te maken hebben met promises 🤓

je kan geen await gebruiken zonder async

https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/blob/1bc8e087cb1b4c2da7edc7a983ce6649d9c41d8f/server.js#L115-L119

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

client-side js wordt uitgevoerd in de webbrowser van de gebruiker en server-side js wordt op de server (Node.js) uitgevoerd

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

https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/blob/1bc8e087cb1b4c2da7edc7a983ce6649d9c41d8f/server.js#L154-L179

Ik kan naar de server gePOSTe formulier data bewaren in een REST API en weet die weer terug te vinden via een filter 😅
Ik weet hoe ik Content First en mock data in kan zetten om snel een HTML prototype te maken met server-side code 🤓

https://github.com/lynnvdbo/the-web-is-for-everyone-interactive-functionality/blob/1bc8e087cb1b4c2da7edc7a983ce6649d9c41d8f/server.js#L8-L43

Ik weet hoe ik verschillende UI states uit de UI stack kan verwerken in mijn views, en hoe ik daarin feedforward en feedback mix 😅
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 😅
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 😅

CSS Cascade

Feature detection in CSS: @supports

Media Queries in CSS: @media

Feature detection in JS

Verberg UI waar je JS voor nodig hebt, en toon deze met JS

Gebruik binnen HTML zelf Progressive Enhancement

Polyfills