Vandaag heb ik mijn NodeJS geüpdatet op mijn Macbook. Dit was nog een gedoe, aangezien mijn NodeVersionManager nog in mijn $PATH naar een oude versie ging. Dit heb ik met Krijn samen uitgezocht.
Daarnaast heb ik mijn visitekaartje gekopieerd van Sprint 1, in de Liquid-bestanden. Ook hebben we tijdens de workshop gespeeld met de FDND API en onze eigen data geüpdatet.
Vandaag heb ik een breakdown schets gemaakt:
Meer over dit issue is hier te lezen:
Daarnaast heb ik een project board gemaakt voor deze sprint. Die is hier te bekijken:
Als laatste heb ik mijn CSS genest en mijn JavaScript code omgezet naar Vanilla ten opzichte van de site uit Sprint 1. Als extra heb ik een play-functie ingebouwd voor mijn Spotify Wrapped op mijn feitjes-artikel.
De site is hier te bekijken. De eerste weergave kan even duren (max. 60 seconden):
Vandaag heb ik de rest van mijn visitekaartje dynamisch gemaakt met JSON uit de database.
Hier een stuk code waarin ik mijn werkervaring dynamisch per entry in een table plaats:
<table class="table-primary" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Periode</th>
<th>Werkervaring</th>
</tr>
</thead>
<tbody>
{% for werkervaring in custom.werkervaringen %}
{% if werkervaring.functie %}
<tr>
{% if werkervaring.periode %}
<td>{{ werkervaring.periode }}</td>
{% else %}
<td>Onbekende periode</td>
{% endif %}
<td>{{ werkervaring.functie }} bij
{% if werkervaring.link %}
<a class="link-werkervaring" target="_blank" href="{{ werkervaring.link }}">
{% endif %}
{{ werkervaring.bedrijf }}
{% if werkervaring.link %}
</a>
{% endif %}
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
Ook heb ik hier gebruik gemaakt van flow tags.
Vandaag heb ik drie mensen beoordeeld op HTML, CSS en JS:
Zelf ben ik ook beoordeeld.
Hierna heb ik van de feedback issues gemaakt en de reviewers erin vermeld.
Vandaag heb ik meer particles toegevoegd zodat mijn structuur overzichtelijker is.
Vandaag heb ik met mijn nieuwe groepje, bestaande uit: Karima, Halima en mijzelf, geëxperimenteerd met sorteren en het toepassen van filters m.b.v. de Directus FDND API.
Daarna hebben we allemaal schetsen gemaakt voor leuke ideeën om de data van de studenten te filteren en te sorteren.
Ik heb uiteindelijk besloten om idee 4 (de bijmodus) uit te werken.
Ik denk ook dat ik idee 5 (gerechtfilter) erin ga verwerken, mits genoeg mensen deze dataset invullen zodra deze is aangemaakt.
Vandaag heb ik een Hi-Fi ontwerp gemaakt van mijn uitwerking van de squad pagina.
Hierna heb ik feedback gevraagd aan een klasgenoot (Clarice). Ik was benieuwd wat andere mensen nog als feedback hadden.
Zij gaf aan dat de website qua kleurenstelling nog iets minder zakelijk mag, en dat dit te bereiken is door een ander kleurenpallet te kiezen. Ik ben voor rood gegaan. Beiden vonden we dat het er al een stuk beter uitziet nu.
Vandaag heb ik een wireflow van de gerecht-filter functionaliteiten gemaakt en de mobiele versie van de gerechtfilter uitgewerkt in de liquid-bestanden en JS.
Vandaag heb ik de puntjes op de i gezet met de applicatie.
Ik heb voor desktop de gerechtfilter op een andere manier aangepakt dan op mobiel (zoals in mijn wireflow). Voor de gerechten-checkbox heb ik gebruik gemaakt van de :has selector.
Voor toegankelijkheid heb ik het aria-label in JS aangepast wanneer het receptenfilter geopend is.
Vandaag heb ik samen met Halima en Karima twee mensen beoordeeld:
Vandaag kregen we een talk van de bedenker van Polypane, Kilian Valkhof.
De maker van Polypane ontwikkelde deze browser voor developers zonder investeerders. Zijn motto: "Alles bouwt voort op wat je eerder hebt gedaan."
Zijn technische reis begon met FrontPage 2000. Op zijn twaalfde verdiende hij geld met een website vol banners. Elke klik leverde 15 cent op. Hij maakte ook een pagina met de PABO-catalogus.
Hij runde 14 jaar een eigen bedrijf. In die tijd leerde hij veel nieuwe programmeertalen en technologieën kennen. De term "responsive design" bestaat inmiddels al 15 jaar.
Hij ontwikkelde verschillende tools:
In mei 2019 lanceerde hij Polypane 1.0, vanaf nul opgebouwd. De browser kreeg zes jaar lang elke maand een nieuwe versie. Polypane is grotendeels gebouwd met JavaScript en gebruikt veel technieken, zoals React state, Inter Process Communication, message bus, message ports en het Chrome DevTools-protocol.
Zijn side-projects zijn:
Vandaag hebben we met ons groepje gezamenlijk een nieuwe schets gemaakt en de taken verdeeld d.m.v. issues.
Vandaag heb ik ervoor gezorgd dat de links naar de gefilterde pagina's werken.
Ook heb ik een beginnetje gemaakt aan de lessen van learnjavascript.online voor de deeltaak.
Hier heb ik in les 2 wat nieuws geleerd. Dit heb ik toegepast in mijn I love Web website.
Hier zijn schermafbeeldingen van de les:Vandaag hebben we onze opdracht uitgelegd gekregen in een meeting van Triple. Nills en Shyanta waren aanwezig namens Triple.
Ik heb mijn eigen debriefing geschreven:
Vandaag heb ik het HTML Prototype afgerond van de hoofdpagina.
Vandaag heb ik het HTML Prototype afgerond voor de stationpagina.
Vandaag heb ik een presentatie bijgewoond van Cassie Evans over GSAP, een krachtige animatiebibliotheek voor het web. Cassie liet zien hoe je met GSAP eenvoudig animaties maakt en optimaliseert.
gsap.to('.box', { x: 200 }); verplaatst een element.De presentatie was erg inspirerend, vooral de voorbeelden waarin GSAP werd gebruikt om interactieve en speelse animaties te maken. Ik wil hier verder mee experimenteren en kijken hoe ik dit in mijn eigen projecten kan toepassen.
Vandaag heb ik de desktopversie gemaakt van home en stationpagina
Vandaag heb ik geexperimenteerd met data filteren/sorteren met Directus en Template filters in Liquid
Ik heb gekozen voor de Liquid filters:
We hebben een nieuwe indeling van de studio en het aquarium. De studio is voor stil werken met elkaar en het aquarium is voor kletsen en spelletjes. De pingpongtafel is in aantocht.
Hieronder zijn de drie stappen van Progressive Enhancement (een code strategie waarmee je ervoor kunt zorgen dat je website het altijd doet):
Kan je bedenken waarom de roltrap een goede metafoor is voor Progressive Enhancement? Teken op het whiteboard hoe de roltrap een voorbeeld van Progressive Enhancement is. Wat gebeurt er in stap 1, 2 en 3?
Houd rekening met:
Daarna hebben we onze leertaak geforkt en gecloned, issues van de vorige sprint getransferred naar de nieuwe repository. Vervolgens hebben we een nieuwe planning gemaakt voor alles wat ons deze sprint te wachten staat.
We gaan met ons groepje overleggen wat we kunnen maken waarbij je gegevens in jullie Directus database aan moet passen of toe moet voegen.
Hierna moeten we een snelle schets maken over wat je kan doen.
Ik heb een idee om per DJ likes te verzamelen, en het DJ Overzicht te sorteren op Likes of alfabetisch (Standaard)
Meer mensen aan onze tafel willen graag likes maken en we denken dat het haalbaar is door een like attribuut toe te voegen aan de Directus structuur.
Hierna hebben we samen onze Directus database geanalyseerd, en voor zichzelf mogelijke problemen en knelpunten genoteerd die je verwacht voor jouw idee.
De knelpunten die ik zie met mijn idee, is dat er nu niet de mogelijkheid is om likes te geven aan Users (Deejays).
{
"users": [
{
"id": 34,
"mh_users_id": {
"sort": null,
"id": 20,
"status": "draft",
"full_name": "Barry Paf",
"date_updated": null,
"date_created": "2024-10-07T09:04:53.041Z",
"cover": "1d3c4caa-2b25-463a-b71c-940a319e5924",
"user_created": "73ac9577-6d00-4fb2-ab53-5313fe572d09",
"user_updated": null
},
"mh_show_id": {
"radiostation": 3,
"sort": null,
"id": 33,
"body": null,
"name": "De Barry Paf Show",
"status": "published",
"date_updated": "2024-12-11T14:17:37.852Z",
"date_created": "2024-10-07T09:04:53.039Z",
"headermobile": "0c6844da-e7c6-4f71-8704-c9394dd37e07",
"headerdesktop": "6169ea03-4081-4869-b3da-222d51f40478",
"user_created": "73ac9577-6d00-4fb2-ab53-5313fe572d09",
"user_updated": "73ac9577-6d00-4fb2-ab53-5313fe572d09",
"thumbnail": "f3b76db1-53cf-4d77-b0eb-eb5d25d9af31",
"users": [34]
}
}
]
}
Ik heb dit probleem bij een docent aangekaart (Krijn). Krijn gaat een Messages table toevoegen aan onze databasegroep om ervoor te zorgen dat iedereen zijn eigen POSTS-requests kan maken doormiddel van een POST. Iedereen kan met een zelfgemaakte Syntax voor de For: waarde bedenken, en deze gebruiken voor de request.
{
"id": 10,
"created": "2025-02-24T10:40:28.884Z",
"from": "Radio Veronica",
"text": "5",
"for": "Dylan / Likes for UserID / 2"
}
Hierna bedacht ik nog een knelpunt. hoe kan ik het verschil ontdekken tussen iemand die de DJ al heeft geliked, en wie nog niet.
Ik heb hierover gebrainstormt en het volgende hiervoor bedacht:
In dat geval moet er een soort login komen, waar er dus ook herkend kan worden welk persoon de like heeft gegeven. Dan zou elke like apart in de database moeten staa, we gaan immers ook POSTEN en niet UPDATEN. Dan had boenstaande manier ook niet gewerkt.
{
"id": 10,
"created": "2025-02-24T10:40:28.884Z",
"from": "UserLoggedin / DivaniNL",
"text": "Like",
"for": "Like for UserID / 2"
},
{
"id": 11,
"created": "2025-02-24T10:40:28.884Z",
"from": "UserLoggedin / Ju5tu5",
"text": "Like",
"for": "Like for UserID / 2"
}
Ik heb een tool gevonden om beter te kunnen testen. Ik heb een plugin gedownload voor Figma: Stark - Contrast & Accessibility Checker. Deze heb ik hier gevonden:
Hiermee kan je in je Ontwerp live je WCAG kleuren contrasten checken en worden er suggesties getoond. Hieronder is te zien dat ik de mogelijkheden onderzoek.
Vandaag hebben we geleerd hoe belangrijk het is om UI states goed te verwerken in je project. Duidelijke states zorgen voor betere feedback en feedforward, waardoor gebruikers altijd weten wat er gebeurt.
Er zijn vijf belangrijke UI states die je in een project kunt verwerken:
Voor een empty state is het belangrijk om gebruikers verder te helpen. Bijvoorbeeld: als een zoekopdracht geen resultaten oplevert, kun je alternatieve artikelen tonen of een suggestie geven.
Een successtate hoeft niet altijd groots te zijn, zoals een animatie bij Tikkie. Soms is een subtiele bevestiging voldoende, zoals de blauwe vinkjes in WhatsApp die aangeven dat een bericht is gelezen.
Door deze UI states goed te implementeren, maak je je interface niet alleen gebruiksvriendelijker, maar ook intuïtiever!
Vraag een familielid (zoals een ouder, opa, oma, oom of tante) of ze weleens een website hebben geprobeerd te gebruiken die niet werkte op hun apparaat. Misschien klaagde je vader ooit dat "die site het nooit doet" op zijn oude laptop, of riep je oma gefrustreerd dat "alles verdwenen is" toen ze iets probeerde op haar telefoon.
Neem je onderzoek en de anekdote maandag mee naar de les, zodat je er iets over kunt vertellen!
Spreker: Ischa Gast
Werkt bij: Schiphol
Quote: "Liefde voor toegankelijkheid"