data.json

 { "data": [
    {   
      "id": "1",
      "slug": "Simon-Riisnæs-Dagfinrud",
      "title": "Simon Riisnæs Dagfinrud",
      "presentor": "Simon Riisnæs Dagfinrud",
      "type": "Presentatie",

      "short-description": "",
      "date": "16-02-2024",
      "semester":"2",
      "description": "",
      "link_Github":""
  },
    {
      "id": "2",
      "slug": "Digital-gardening",
      "title": "Digital gardening",
      "presentor": "Justus Sturkenboom",
      "type": "Presentatie",
      "short-description": "Justus heeft ons meer vertelt over <code>digital gardening</code>, waarbij hij stapsgewijs laat weten hoe jij je eigen plekje claimt op het web.",
      "date": "15-03-2024",
      "semester":"2",
      "description": "<p>Justus heeft ons meer vertelt over </code>digital gardening</code>, waarbij hij stapsgewijs laat weten hoe jij je eigen plekje claimt op het web.</p><h2>Wat is Digital gardening?</h2><ul><li>Een authentieke manier van een website zonder het geprojecteerde beeld van andere websites</li><li>Freestylen</li></ul><h3>1. Iedere keer dat je web doorloopt ondek je nieuwe dingen</h3><ul><li>Typografie</li><li>Tijdlijn</li><li>Zorg dat concepten samenhangen</li></ul><h3>2. Continue groei</h3><ul><li>Het. is. nooit. af.</li></ul><h3>3. Imperfectie & publiek leren</h3><ul><li>Het hoeft niet perfect te zijn je mag de ontwikkeling laten zien.</li></ul><h3>4. Erg persoonlijk en origineel</h3><ul><li>Organiseer een tuin op jou ideeen</li></ul><h3>5. Samengaan van grote diverse inhoud</h3><ul><Li>claim jou plekje op het web</Li></ul><h3>6. onafhankelijheid</h3><ul><li>Wees de baas van je eigen data</li></ul><h3>Indieweb</h3><ul><li>oope -> Mijn link en het blijft mijn data</li><li>Pesos -> Data op eigen platform, word gedeeld op socials en platformen hebben machtiging op mijn data</li></ul>",
      "link_Github":""
  },
    {   
      "id": "3",
      "slug": "Gwen-Bogaert",
      "title": "Gwen Bogaert",
      "presentor": "Gwen Bogaert",
      "type": "Presentatie",
      "short_description": "Gwen Boagaert vertelt wat over haar eigen ervaringen in het werkveld en deelt werk van haarzelf",
      "date": "26-04-2024",
      "semester":"2",
      "description": "<img src='https://camo.githubusercontent.com/513bb4504c27a3cc8119f262976e212edd7b624f97e47bf0272b855e6c2ba474/68747470733a2f2f7777772e6461746f636d732d6173736574732e636f6d2f34393134392f313637313031333830382d67726f75703735372e6a70673f666d3d77656270'><p>Gwen Bogaert werkt bij <a href='https://antinomy.studio/'>Antinomy Studio</a>, waarbij ze wat van haar werk heeft gepresenteert. Hierbij heeft ze wat van haar eigen ervaring en werkwijze vertelt.</p><ul><li>tech stack: Terugvallen io verschillende applicaties</li><li>Porno iewl</li><li>Ze heeft door verschillende projecten nieuwe ervaringen gekregen</li><li>Daarnaast leert ze op nieuwe manieren samenwerken met anderen</li><li>Je leert elke keer iets nieuws</li></ul><img src='https://private-user-images.githubusercontent.com/144009778/337978230-a397aa62-1347-4630-899e-f38b86068c1e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc5NDEyMzMsIm5iZiI6MTcxNzk0MDkzMywicGF0aCI6Ii8xNDQwMDk3NzgvMzM3OTc4MjMwLWEzOTdhYTYyLTEzNDctNDYzMC04OTllLWYzOGI4NjA2OGMxZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjA5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwOVQxMzQ4NTNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01YWFiMTlkOWVmYmI0ODBkMzhiZTI5MjEwNGQwY2M3ZDIzNzc2OWIyNDI4NjgxMmE0NDcwNjE0ZmNlODA5NTA0JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.tfR8gnkBnJwNoiHfkRZ9MkWNQVNF0_m06ig20KAeVEI'><h2>Preformance</h2><p>Zorg dat de preformance altijd op gemiddelde wachttijd blijft, de reactie van mensen zullen niet veranderen. Pas je dus aan op de verwachtingen van anderen.</p>",
      "link_Github":"https://github.com/SamaraFellaDina/we-love-web-blog/wiki/3-%E2%80%90-Gwen-Bogaert"
  },
    {   
      "id": "4",
      "slug": "Minisymposium-over-toegankelijkheid",
      "title": "Minisymposium over toegankelijkheid",
      "presentor": "Docenten van de HVA",
      "type": "Symposium",
      "short-description": "We hadden een college in de officiele collegezaal van de HVA. Daar hebben wij verschillende lichtingen gehad over toegankelijkheid. Er waren ook tolkers aanwezig.",
      "date": "",
      "semester":"1",
      "description": "<p>We hadden een college in de officiele collegezaal van de HVA. Daar hebben wij verschillende lichtingen gehad over toegankelijkheid. Er waren ook tolkers aanwezig.</p><p>Een van de presentatoren was doof, dus zij ging in gebaren taal (met de tolkers die het vertaalde) wat voor hindernissen er zijn wanneer je doof door het leven gaat. Zo zijn er dingen besproken over de belfunctie, over contact met mensen en het gebruik van het web. Verder liet ze zien dat veel functies die voor de meeste gebruikers normaal zijn, voor haar erg lastig zijn. We hebben verder meer verdiept in gebarentaal, zo heb je verschillende talen en ook dialecten. Je hebt dus gewoon limburgse gebarentaal (it blew my mind). Het was een goede introductie over het onderwerp accesibility en het heeft mij gemotiveerd om verder te kijken en in andermans schoenen te gaan staan bij het gebruik van websites, maar ook andere dingen.</p>",
      "link_Github":"https://github.com/SamaraFellaDina/we-love-web-notes/wiki/1.-Minisymposium-over-toegankelijkheid"
  },
    {
      "id": "5",
      "slug": "Tim-Borst",
      "title": "Tim Borst",
      "presentor": "Tim Borst",
      "type": "Presentatie",
      "short-description": "Tim heeft zijn eigen geschiedenis verteld van toen hij klaar was met zijn CMD studie.",
      "date": "",
      "semester":"1",
      "description": "<h3>Wie is Tim Borst?</h3><p>Tim heeft zijn eigen geschiedenis verteld van toen hij klaar was met zijn CMD studie, tot en met nu. Hij is in 2006/2007 geslaagd en heeft zijn studie Communicatie Multimedia Design gehaald. Hij wou daarna erg graag het frontend vlak op, waarbij hij zijn eenmanszaak is gestart. Samen met een paar vrienden heeft hij een studio kunnen huren (die overgins erg goedkoop was). Hij heeft in het verhaal verteld dat hij eigenlijk altijd 'ja' zegt tegen een opdracht, waardoor hij ook veel klanten had. Hij en zijn vrienden hielpen elkaar met een opdracht en zagen elkaar expertises in. Uiteindelijk zijn ze samen een agency gestart wat uiteindelijk uitgroeide tot een middelgroot bedrijf. Ze hielpen bedrijven als Audi en meer. Hij heeft erg veel geleerd van de tijd. Nogmaals, hij en zijn collega's zeiden alleen maar ja, ja en ja. Hierdoor heeft hij ook dingen geleerd waar hij eerder geen verstand van had. Maar hij merkte daardoor ook dat hij steeds minder werk deed waarvan die hield. Hierdoor is hij in 2019 wegegaan bij het bedrijf wat die heeft opgericht met zijn vrienden en is hij weer voor zichzelf begonnen.</p><p>Tijdens deze reis is hij veel conflicten tegengekomen. Hij heeft geleerd ALTIJD een offerte te sturen naar een klant. En om eens een oogje te houden in de finacien. Hij vond het werk zo leuk dat hij soms de onderdelen die erbij kwamen kijken niet voor ogen had. Toch is hij erg blij dat die hier is gekomen en dit mooie werk heeft kunnen maken.</p><h4>Wat heeft hij besproken tijdens zijn lichting?</h4><p>Hij heeft erg veel verteld over zijn eigen leven. Over hoe hij is begonnen met van zijn studie, zijn werk maken. Hij heeft ook veel tips gegeven over hoe je voor jezelf begint. Hij heeft mij verder ook zien over dat het belangrijk is om ambitie te hebben voor je werk en ook een uitdaging durft aan te gaan. Hij heeft ook veel van zijn werk laten zien en verteld over met welke bedrijven hij heeft gewerkt.</p><h4>Wat heb je geleerd van zijn lichting?</h4><p>Hij heeft enorm veel werk laten zien van zichzelf, wat mij enorm veel motivatie gaf. Hij heeft ons ook veel verteld over dat het goed is om veel te leren tijdens het werk en het samenwerken met zijn collega's/vrienden. Ook vertelde hij dat hij soms meer visie moest hebben voor andere dingen als bijvoorbeeld de finacien, dat was ook erg goed om te weten. Door deze lichting kreeg ik een betere visie over hoe een toekomst na deze studie me kan bieden, naast de expertises die ik al beheers heb ik goed voor ogen hoe mijn eigen pad kan verlopen</p>",
      "link_Github":"https://github.com/SamaraFellaDina/we-love-web-notes/wiki/2.-Tim-Borst"
  },
    {   
      "id": "6",
      "slug": "Ischa-Gast",
      "title": "Ischa Gast",
      "presentor": "Ischa Gast",
      "type": "Presentatie",
      "short_description": "Ischa gast is een Frontend developer die werkt voor Schiphol. In deze presentatie verteld en verdiept hij in het onderdeel accessibility",
      "date": "",
      "semester":"1",
      "description": "<h3>Wie is Ischa Gast?</h3><p>Ischa gast is een Frontend developer die werkt voor Schiphol. In deze presentatie verteld en verdiept hij in het onderdeel accessibility</p><h4>Waarover vertelde hij?</h4><p>Hij verteld in zijn presentatie veel over accessibility. Zo verteld hij ook dat veel verschillende websites (maar ook andere dingens als de tram) Niet erg toegankelijk zijn. Er word niet veel rekening gehouden met andermans beperkingen en zo gaat hij dieper in op hoe dat voor een ander kan zijn. Hij laat bijvoorbeeld zien dat de Hema eigenlijk helemaal niet een goede screenreader heeft en alleen maar overal het woord link heeft staan. Zo kan iemand niet goed een screenreader gebruiken, omdat ze gewoon niet kunnen weten waarover het gaat. Hij gaat ook dieper in over dat eigenlijk iedereen een bepering heeft.</p><p>Uiteindelijk ging hij dieper in op toegankelijkheid op het web. Hij vertelde de volgende dingen:</p><ul><li>Wanneer je goede HTML code schrijft, wordt je site al gauw makkerlijker toegankelijk. Schrijf dut goede HTML!!!</li><li>Zorg dat je alle elementen goed benoemd, dus niet zoals HEMA alles 'link' noemen. (niet echt HEMA hoor 😡)</li><li>uiteindelijk laat hij zien dat ook de site van Bunq geen goed contrast heeft, dus dat is ook erg belangrijk voor een toegankelijke website. Zo worden kleuren als blauw, groen en oranje gecombineerd met wit, terwijl dit eigenlijk niet goed samen werkt.</li><li>Werk ook samen met de mensen waarvoor je dit doet. Het is dus goed om samen te werken met mensen met een beperking.</li><li>Zorg dat belangrijke informatie gemakkelijk te verkrijgen is voor iedereen. Denk aan dingen als je vliegtuig die vertraging heeft, is best onhandig als je anders 8 uur voor niks staat de wachten omdat een website niet duidelijk aangeeft.</li><li>Hij liet uiteindelijk websites zien die geen heading hadden, GEBRUIK GEWOON EEN GOEDE HEADING.</li></ul>",
      "link_Github": "https://github.com/SamaraFellaDina/we-love-web-notes/wiki/3.-Ischa-Gast"
    },
    {   
      "id": "7",
      "slug": " Lettertypes-en-andere-typografie",
      "title": " Lettertypes en andere typografie",
      "presentor": "Sanne",
      "type": "CSS challenge",
      "short_description": "Over het gebruiken van fonts op het web",
      "date": "",
      "semester":"1",
      "description": "<p>Kijk naar de volgende sites:</p><ul><li><a href='www.Ccs-tricks.com'>www.Ccs-tricks.com</a></li><li><a href ='www.Mdn.docs.com'>www.Mdn.docs.com</a></li><li><a href='https://www.fontsquirrel.com/'>Font-squirrel.com</a></li></ul><h3>Typografie</h3><p>Er zijn verschillende manieren om een font te gebruiken voor een website.</p><h4>Een font gebruiken die standaard in het systeem staat.</h4><ul><li>Denk aan fonts als Arial, Helvetica en zo verder. Het is alleen niet gegarandeerd of deze op alle computers staat, dus het is altijd handig om meerdere fall-back fonts te gebruiken</li><li>Wat is een Fall-Back? Het staat eigenlijk voor wanneer, voor welke reden dan ook jou systeem een font kan vinden. Dat die kijkt naar de eerst volgende optie.</li></ul><h4>Font van een server halen</h4><ul><li>Je kan een font halen van een site als <a href='https://newbird.com/google-fonts/'>googlefonts.com</a> of <a href='http://adobefonts.com/'>adobefonts.com</a>. Jou site moet deze data dan als volgende ophalen om het volgens in de gerefereerde code in te voegen.</li><li>Importeren. Je kan simpelweg door naar de informatie te gaan van een font de bijbehorende code vinden die je in je eigen code kan plakken, zo wordt het font van de externe server geimporteerd naar je eigen website. Let er wel op dat je deze code standaard bovenaan de code plaats, dat is dan het eerste wat wordt geladen</li></ul><h4>Welke type fonts importeer je?</h4><ul><li>De standaard type fonts die worden geimporteerd zijn de bold & de regular en daarvan ook de italic varianten.<ul><li>Regular heeft een font weight van 400</li><li>Bold heeft een font weight van 700</li></ul></li><li>Je hebt dus 4 verschillende fonts nodig om te importeren.</li><li>Daarnaast is het handig om de font-family in de body te plaatsen.</li></ul><h4>Fonts lokaal laten importeren</h4><ul><li>Vervolgens kan je ook een font laten importeren van een interne server. Wat betekend dat? Het houdt eigenlijk in dat je een font importeerd die in je eigen mappenstructuur staat. Denk dan aan fonts als New Hero of Roboto.<ul><li>Om dit font te kunnen importeren, maak je gebruik van een @font-face. Hierdoor wordt het font geimplenmenteerd in je eigen code.</li></ul><img src='https://github.com/SamaraFellaDina/we-love-web-notes/assets/144009778/03ce733f-dc1e-49d0-b330-49ed04e7b316'></li><li>Dit is ook wellicht de beste manier van het gebruiken van fonts.</li><li>Wanneer je het font importeerd, zorg dat hij bovenaan de code staat, dit is dan het eerste wat word geimporteerd van alles.</li><li>Het beste font-bestand wat je kan gebruiken is een woff(2) bestand, zorg er wel voor dat alle varierende bestanden hiervan ook in de code staan. Denk aan bestanden als WOFF, WOFF2, TFF en zo door. Dit is handig, omdat sommige computers verouderd zijn of verouderede browsers gebruiken, waardoor de kans bestaat dat het font misschien totaal niet laadt.</li><li>@font-face kan je meerdere links geven, zodat als het systeem het ene bestand niet kan laden, er meerdere opties zijn. Dit heeft te maken met de browserversie van de gebruiker.</li><img src='https://github.com/SamaraFellaDina/we-love-web-notes/assets/144009778/5618c7bc-c491-41e1-b87f-27357a881851'></ul><h5>Wat betekenen deze bestanden?</h5><h6>Woff & Woff2</h6><p>Is een gecomprimeerde versie van OTF (OpenType) & TTF (TrueType). Dit bestand heeft ook licentie info in het font zelf zitten. Denk aan informatie over het bedrijf en de maker van het font. Dit is wellicht ook een van de meest voordelige bestanden die je kan gebruiken voor je website. Niet alleen bevat het nuttige info in het font, het laadt dus ook erg snel.</p><h6>TTF</h6><p>Ookwel bekend als TrueType font.</p><h3>overige tips</h3><ul><li>Je kan verder ook van andere sites hun fonts downloaden. Hou er rekening mee dat deze fonts ook een licentie hebben en daardoor niet zomaar voor alles kan worden gebruikt.</li><li>Er bestaat ook een site waarbij je de verschillende bestanden kan downloaden van een font. Dus wanneer je alleen het TFF bestand hebt van het font, kan je via deze site ook de overige bestanden verkrijgen. Deze site is font-squirrel.com</li><li>Er zijn ook variabele fonts, waarbij je de dikte, grootte en andere dingen aan het font kan aanpassen.</li><li><a href='https://css-tricks.com/snippets/css/using-font-face-in-css/'>https://css-tricks.com/snippets/css/using-font-face-in-css/</a></li></ul>",
      "link_Github": "https://github.com/SamaraFellaDina/we-love-web-notes/wiki/4.-CSS-challenge-5-%E2%80%90-Lettertypes-en-andere-typografie"
   }, 
   {   
      "id": "8",
      "slug": "Yolijn-van-Der-kolk",
      "title": "Yolijn van Der kolk",
      "presentor": "Yolijn van Der kolk",
      "type": "Presentatie",
      "short_description": "Yolijn van Der kolk vertelt meer over design systems",
      "date": "",
      "semester":"1",
      "description": "<h3>Design systems</h3><ul><li>Design kits</li><li>Kijk bijvoorbeeld naar de styleguide van de bibliotheek.</li><li>Gebruikersonderzoek</li><li>samonalearning.design</li><li>lion-web-netify.app</li><li>NLdesignsystems.nl</li><li>google & adobe design systems</li><li>Er is een slack community die zich meer verdiept in NL design system</li></ul>",
      "link_Github": "https://github.com/SamaraFellaDina/we-love-web-notes/wiki/5.-Lichting-met-Yolijn-van-Der-kolk"
  },     
  {   
      "id": "9",
      "slug": "transitions-en-transforms",
      "title": "transitions & transforms",
      "presentor": "transitions & transforms",
      "type": "CSS challenge",
      "short_description": "Alles over Transitions en transform in css",
      "date": "",
      "semester":"1",
      "description": "<h3>Transitions</h3><p>Wat houdt transitions in? Dit zijn de properties die ervoor zorgen dat je een element kan laten in een <code>:hover</code> element. Het heet dan ook transities, omdat de vorm wijzig door bepaalde acties of triggers.</p><h4>De basics</h4><p>Voor Transitions heb je verschillende waarden die je er op kan gebruiken. Deze kunnen ook gedefineerd worden op de </code>x</code>, </code>y</code> en zelfs de </code>z</code> as. Je hebt de volgende 3 waardes:</p><ul><li></code>Rotate</code>: laat het element natuurlijk draaien</li><li><code>Translate</code>: Kan de plaats van een element defineren</li><li></code>Scale</code>: Bepaalt de grootte van het element</li></ul><p>Vervolgens kan je een </code>:hover</code> animatie ook defineren op duration, delay en zelfs timing-function. Wat houdt dat in</p><ul><li></code>transition-duration</code>: Bepaald hoe lang een animatie duurt wanneer je eroverheen hovert.</li><li><code>transition-delay</code>: Bepaald hoelang het duurt totdat de animatie afspeeld.</li><li></code>transition-timing-function</code>: Bepaald de flow van de animatie. Denk aan een ease, ease-in of een ease-out animatie bijvoorbeeld. Dit zijn animatieflows die ook in programma's als AfterEffect en PremierePro worden gebruikt. Verder heb je ook flows als linear, waarbij de animatie in een gelijk tempo de animatie laat verlopen. </li></ul><p>Je kan het </code>transition</code> element ook in een short-hand term bepalen.</p><img src='https://github.com/SamaraFellaDina/we-love-web-notes/assets/144009778/24ca9504-f1cd-45a5-a63b-341cb090df94'><p>Met de shorthand methode gaat de eerste waarde over de </code>transiton-duration</code>, bij de tweede waarde over <code>transition-delay</code> en de laatste over de </code>transition-timing-function</code>.</p><h4>Wat valt nog meer op?</h4><p>Je kan ook een custom timing-function geven aan een element. Je kan hem dus aanpassen, maar hoe doe je dat? Er werd een site laten zien genaamd <a href='https://matthewlein.com/tools/ceaser'>Ceaser</a>, waarbij gemakkelijk de code werd bepaald voor een transitie. Zo kan je uiteindelijk een custom transitie geven aan een animatie.</p>",
      "link_Github": "https://github.com/SamaraFellaDina/we-love-web-notes/wiki/6.-Css-challenge-transitions-&-transforms"
    },
    {   
      "id": "10",
      "slug": "Fenna-de-Wilde",
      "title": "Fenna de Wilde",
      "presentor": "Fenna de Wilde",
      "type": "Presentatie",
      "short_description": "Fenna de Wilde is een creative content developer en ze is nu al twee jaar werkzaam bij Bakken & Baeck.",
      "date": "",
      "semester":"1",
      "description": "<h3>Samenvatting presentatie</h3><p>Fenna de Wilde is een creative content developer en ze is nu al twee jaar werkzaam bij Bakken & Baeck. Hiervoor had je bij Build and Amsterdam gewerkt en dat was meer e-commerce. In totaal is ze al 4.5 jaar werkzaam in de wereld van frontend & design.</p><p>Tijdens de we-love-web liet ze meerdere sites zien waar zij aan had gewerkt. Er was zelfs een site bij die genomineerd was als website van het jaar.</p><p>Ze had recentelijk ook aan een crypto website gewerkt waarbij ze de branding van crypto zelf wilde veranderen. De website heet Phantom en zij wilden de site vriendelijker eruit laten zien. Zwart kan namelijk mensen afschrikken die niks begrijpen van cryptocurrency.</p><p>In het bedrijfsleven weten vrij weinig mensen af van toegankelijkheid. Dit moet eigenlijk wel zo zijn. Als een website niet voor iedereen toegankelijk is, dan heb je er niks aan. Een website gaat vooral over bruikbaarheid en gaat om de gebruiker.</p><ul><li>Fenna de Wilde is een creative content developer en ze is nu al twee jaar werkzaam bij Bakken & Baeck.<ul><li>Hiervoor had je bij Build and Amsterdam gewerkt en dat was meer e-commerce. In totaal is ze al 4.5 jaar werkzaam in de wereld van frontend & design.</li></ul></li><li>Tijdens de we-love-web liet ze meerdere sites zien waar zij aan had gewerkt. Er was zelfs een site bij die genomineerd was als website van het jaar.</li><li>Ze had recentelijk ook aan een crypto website gewerkt waarbij ze de branding van crypto zelf wilde veranderen.<ul><li>De website heet Phantom en zij wilden de site vriendelijker eruit laten zien. Zwart kan namelijk mensen afschrikken die niks begrijpen van cryptocurrency.De website heet Phantom en zij wilden de site vriendelijker eruit laten zien. Zwart kan namelijk mensen afschrikken die niks begrijpen van cryptocurrency.</li></ul></li><li>In het bedrijfsleven weten vrij weinig mensen af van toegankelijkheid.<ul><li>Dit moet eigenlijk zo: 'Als een website niet voor iedereen toegankelijk is, dan heb je er niks aan. Een website gaat vooral over bruikbaarheid en gaat om de gebruiker.'</li></ul></li><li>Toegankelijkheidsrichtlijnen<ul><li>Focus state voor keyboard gebruikers: Niet alle gebruikers bedienen een interface met een muis. Je kunt dan een focus state toevoegen door een :focus-visible te gebruiken.</li><li>Aria attributes: Ze geven aanvullende informatie aan hulptechnologieen over het gedrag en de structuur van je code.</li><li>Aria controls: Als een element het andere element controleert. Het element dat wordt gecontroleerd krijgt een id en het andere krijgt een aria-controls.</li></ul></li><li>Zorg ervoor dat je carrousels ook toegankelijk zijn. Dit is vrij lastig als je bijvoorbeeld erdoorheen wil tabben. De carrousels moeten een role=“group” hebben.</li><li>Vermijd het gebruik van li elementen voor je slides. Als je slides verbergt, zal het aangekondigde aantal li-items niet overeenkomen met het werkelijke aantal slides.</li><li>Er zijn dus veel verschillende toegankelijkheidsprincipes in code waar rekening mee gehouden moet worden. Dit kan uiteindelijk, wanneer dit goed uitgevoerd is, gecontroleerd worden aan de hand van toegankelijkheidstesten en als er nog iets mist kan dit in een iteratie nog aangepast worden.</li></ul><h4>Toegankelijkheidsrichtlijnen</h4><ul><li>Focus state voor keyboard gebruikers: Niet alle gebruikers bedienen een interface met een muis. Je kunt dan een focus state toevoegen door een :focus-visible te gebruiken.</li><li>Aria attributes: Ze geven aanvullende informatie aan hulptechnologieen over het gedrag en de structuur van je code.</li><li>Aria controls: Als een element het andere element controleert. Het element dat wordt gecontroleerd krijgt een id en het andere krijgt een aria-controls.</li><li>Zorg ervoor dat je carrousels ook toegankelijk zijn. Dit is vrij lastig als je bijvoorbeeld erdoorheen wil tabben. De carrousels moeten een role=“group” hebben.</li><li>Vermijd het gebruik van li elementen voor je slides. Als je slides verbergt, zal het aangekondigde aantal li-items niet overeenkomen met het werkelijke aantal slides.</li></ul><p>Er zijn dus veel verschillende toegankelijkheidsprincipes in code waar rekening mee gehouden moet worden. Dit kan uiteindelijk, wanneer dit goed uitgevoerd is, gecontroleerd worden aan de hand van toegankelijkheidstesten en als er nog iets mist kan dit in een iteratie nog aangepast worden.</p><h3>Wat heb ik uit deze presentatie gehaald?</h3><p>Ik ben zelf nog niet echt op het advanced niveau van Fenna, dus de dingen die ze uitlegden kwamen me wel bekend voor, maar ik zou er zelf nog niet mee kunnen werken. Wel vond ik het interessant om te zien hoe leerlingen die op CMD of een frontend opleiding hebben gezeten veel aandacht besteden aan toegankelijkheid, waarbij veel mensen in het daadwerkelijke werkveld niet eens echt weten wat toegankelijkheid inhoudt. Ik ben wel voor inclusie, dus ik vind het goed dat er nu steeds meer aandacht aan wordt besteed.</p>",
      "link_Github": "https://github.com/SamaraFellaDina/we-love-web-notes/wiki/8.-Lichting-met-Fenna-de-Wilde"
    },
    {   
      "id": "11",
      "slug": "Julia-Miocene",
      "title": "Julia Miocene",
      "presentor": "Julia Miocene",
      "type": "Presentatie",
      "short-description": "Julia Miocene is een product designer die specialiseert is in het maken van geanimeerde code en speelt hier veel mee.",
      "date": "",
      "semester":"1",
      "description": "<img src='https://private-user-images.githubusercontent.com/144009778/332064856-958058d6-c867-46d8-abbf-1c84b4f53dd9.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc5NDQzMzMsIm5iZiI6MTcxNzk0NDAzMywicGF0aCI6Ii8xNDQwMDk3NzgvMzMyMDY0ODU2LTk1ODA1OGQ2LWM4NjctNDZkOC1hYmJmLTFjODRiNGY1M2RkOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjA5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwOVQxNDQwMzNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT03MDhmNDhkMjFkNjMyYWM4MzYzN2FkZmYxZjI5YTJmNjkwNjU5ZGVmOGE2ZDQ4MTk4Nzc4NjhiNWE5NjIwN2Y2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.lxzNrM-SoiNYBI-jIYZ8VdnPyobnBynrmwqZaZgEMbM'><p><a href='https://miocene.io/'>Julia Miocene </a>is een product designer die specialiseert is in het maken van geanimeerde code en speelt hier veel mee. In haar presentatie laat ze een aantal voorbeelden zien waaraan ze heeft gewerkt. Mijn eerste impressie was dat ik het er zelf nogal gecompliceerd uit vond zien, aangezien ik veel met After Effects heb gewerkt wat heel erg anders werkt.</p><h3>Wie is Julia Miocene?</h3><p>Zij maakt veel boeiende css animaties voor verschillende bedrijven en haar doel bij het maken van deze animaties is om meer leven aan te brengen hieraan. Op <a href='https://codepen.io/miocene'>Codepen</a> vind je veel meer werk van haar waarmee zij experimenteert. Zoals het <a href='https://codepen.io/miocene/pen/PoRbQJM'>voorbeeld</a> hieronder.</p><img src='https://private-user-images.githubusercontent.com/144009778/332064599-2dfcd95f-c106-43bb-8bd4-379f7cbf4ebc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTc5NDQzMzMsIm5iZiI6MTcxNzk0NDAzMywicGF0aCI6Ii8xNDQwMDk3NzgvMzMyMDY0NTk5LTJkZmNkOTVmLWMxMDYtNDNiYi04YmQ0LTM3OWY3Y2JmNGViYy5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjA5JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYwOVQxNDQwMzNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hODAwNTFhNzljYzkyMWY0YjFhMWMyMGExNDgyZWYyMzNlOTY1M2RlMGIyYjhmMGRiZThkNWNjNDY4NWQ2MDNjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.pRBeU1BMKVKWcdBnruFAwopP6vqLeKDLAXKBfEkBg7g'><h3>Meer willen leren?</h3><p>Voor degenen die geïnteresseerd waren in het starten met CSS-animaties, raadde ze bronnen aan zoals Codepen.io/challenges, Cssbattle.dev, en 100daysCSS.com.</p>",
      "link_Github":"https://github.com/SamaraFellaDina/we-love-web-notes/wiki/9-%E2%80%90-Julia-Miocene"
  },
  {   
    "id": "12",
    "slug": "1‐Basic-functions",
    "title": "1 ‐ Basic functions",
    "presentor": "1 ‐ Basic functions",
    "type": "JS-fundamentals",
    "short_description": "Verdiepen in de wereld van JS-Fundamentals :)",
    "date": "05-05-2024",
    "semester":"2",
    "description":"<h2>Wat gebeurd hier?</h2><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/d3518e04-86c2-4f8a-ba20-8f01d4500a4a'><p>Wat hier gebeurd is dat deze moeten worden opgeteld <code>sum</code> verteld eigenlijk dat het samen kan worden opgeteld.</p><p>Hier word er verteld dat de code moet worden teruggebracht en bij elkaar opgeteld moet worden. <code>return</code> geeft eigenlijk aan dat de <code>function</code> moet eindigen d.m.v. het antwoord te geven. <code>return</code> eindigt en verlaat de <code>function</code></p><h2>Oefeningen</h2><p>Uiteindelijk heb ik de oefeningen gedaan en gebeurde het volgende.</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/8319cbf0-50e5-4ad6-bdec-a2e16eb5a922'><p>Mij werd ook geleerd hoe ik moest vermenigvuldigen</p>",
    "link_Github":"https://github.com/SamaraFellaDina/js-fundamentals/wiki/1-%E2%80%90-Basic-functions"
},
{   
  "id": "13",
  "slug": "2‐Strings",
  "title": "2 ‐ Strings",
  "presentor": "2 ‐ Strings",
  "type": "JS-fundamentals",
  "short_description": "Verdiepen in de wereld van JS-Fundamentals :)",
  "date": "05-05-2024",
  "semester":"2",
  "description":"<h2>Wat gebeurd hier?</h2><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/d3518e04-86c2-4f8a-ba20-8f01d4500a4a'><p>Wat hier gebeurd is dat deze moeten worden opgeteld <code>sum</code> verteld eigenlijk dat het samen kan worden opgeteld.</p><p>Hier word er verteld dat de code moet worden teruggebracht en bij elkaar opgeteld moet worden. <code>return</code> geeft eigenlijk aan dat de <code>function</code> moet eindigen d.m.v. het antwoord te geven. <code>return</code> eindigt en verlaat de <code>function</code></p><h2>Oefeningen</h2><p>Uiteindelijk heb ik de oefeningen gedaan en gebeurde het volgende.</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/8319cbf0-50e5-4ad6-bdec-a2e16eb5a922'><p>Mij werd ook geleerd hoe ik moest vermenigvuldigen</p><h2>Wat is een string?</h2><p>Simpel. Je plaatst het stuk tekst in de js, waarna je aangeeft dat het dus ook wellicht over een stuk tekst gaat.</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/80de949a-6854-41f0-8a09-e83a54a520d2'><p>Het <code>.length</code> element zorgt er ook voor dat <code>js</code> dit gaat zien als een <code>string</code>. Hier nog een voorbeeld.</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/ca4dae00-fb94-4c3f-8107-a3789ce42455'><h2>Basic string methods</h2><ul><li><code>.toLowerCase():</code> Zorgt ervoor dat de string alleen met lower case elementen naar voren komt.</li><li><code>.toUpperCase:</code> Zorgt ervoor dat alle elementen met een upper case word weergeven.</li></ul><p>Waarom krijgt dit element een <code>()</code>? Dit heeft er mee te maken je een actie aan het uitvoeren bent. Bij <code>.length</code> hoeft dit niet, omdat de waarde al is uitgevoerd.</p><h2>Samengevat</h2><ul><li>Je kan een <code>string</code> maken door gebruik te maken van <code>'</code> of <code>''</code>.</li><li><code>.length </code>is een element wat een string maakt van een tekst.</li><li><code>.toUpperCase</code> maakt je tekst alles in upper cas</li><li><code>.toLowerCase</code> maakt je tekst alles in lower case</li></ul>",
  "link_Github":"https://github.com/SamaraFellaDina/js-fundamentals/wiki/2-%E2%80%90-Strings"
},
{   
  "id": "14",
  "slug": "3‐Character-access",
  "title": "3 ‐ Character access",
  "presentor": "3 ‐ Character access",
  "type": "JS-fundamentals",
  "short_description": "Verdiepen in de wereld van JS-Fundamentals :)",
  "date": "05-05-2024",
  "semester":"2",
  "description":"<p>Je kan specifieke characters aanspreken in een <code>string</code>, door gebruik te maken van de <code>square brackets syntax []</code>. Je moet de <code>index</code> van het element kunnen aangeven welk character hij moet aanspreken.</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/05d3f714-181b-45cb-992c-88ff95e70e0f'>Dit kan je overgens ook makkelijk controleren met een <code>console.log</code>.<h2>Combineren met <code>.length</code></h2><p>Je kan er ook een formule van maken. Hieronder een voorbeeld:</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/d350e44b-b35f-4817-8389-66df098bd321'><h2>Het <code>.at(index)</code> element</h2><p>Recent is er een neiuwe manier om een character te kunnen lezen. Hieronder een voorbeeld:</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/dd79af4b-197c-40e0-9795-82d37e584a93'><h2>Samengevat</h2><ul> <li>Met <code>Square brackets [index]</code> Kan je specifieke elementen aanspreken in een string. </li> <li>De <code>index</code> begint bij 0, dus als je het eerste element wilt aanspreken begint het bij 0. </li> <li>Je kan de length combineren met de string om zo een andere character te krijgen </li> <li>de <code>.at()</code>methode zorgt ervoor dat je characters makkelijk kan aanspreken (kan zowel negatief als positief gebruikt worden). </li></ul>",
  "link_Github":"https://github.com/SamaraFellaDina/js-fundamentals/wiki/3-%E2%80%90-Character-access"
},
{   
  "id": "15",
  "slug": "4‐Substrings",
  "title": "4 ‐ Substrings",
  "presentor": "4 ‐ Substrings",
  "type": "JS-fundamentals",
    "short_description": "Verdiepen in de wereld van JS-Fundamentals :)",
  "date": "05-05-2024",
  "semester":"2",
  "description":"<h2>Wat is een <code>substring</code>?</h2><p>Is een deel van een <code>substring</code>. Na het kijken naar het voorbeeld werd het mij duidelijk. Wat er eigenlijk gebeurd is dat dit element naar de elementen van een <code>substring</code> gaat kijken.</p><h2>Voorbeeld in code</h2><h3>Eerste oefening</h3><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/65344c01-48b1-4cf9-8530-5c01d6c01aa0'><h4>Wat gebeurd hier?</h4><p>Wat hier eigenlijk gebeurd is dat de eerste lekker van de <code>substring</code> word overgeslagen en de rest word gelezen. De <code>substring</code> kijkt dus binnenin de <code>substring</code> en de <code>substring</code> is het gehele object.</p><h3>Tweede oefening</h3><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/389f80c6-2401-4f47-be6d-6c3f98e5b1fa'><p>Bij dit voorbeeld moest ik de text naar voren laten komen en er mochten maar 10 characters uit komen.</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/17f8739f-7526-4a4b-b6d8-c7970b3b9dab'><p>Deze text zegt eigenlijk dat de text terug moet komen, maar dat de <code>substring</code> maar 10 characters kan bevatten. Dit is bijvoorbeeld handig als mensen een bericht willen achterlaten of je iets wilt opsturen wat niet te lang mag zijn</p>",
  "link_Github":"https://github.com/SamaraFellaDina/js-fundamentals/wiki/4-%E2%80%90-Substrings"
},
{   
  "id": "16",
  "slug": "5‐Plus-operator",
  "title": "5 ‐ Plus operator",
  "presentor": "5 ‐ Plus operator",
  "type": "JS-fundamentals",
    "short_description": "Verdiepen in de wereld van JS-Fundamentals :)",
  "date": "05-05-2024",
  "semester":"2",
  "description":"<h2>Wat is een <code>plus operator</code>?</h2><p>Dit element zorgt ervoor dat bepaalde formules samenkomen, zoals <code>1 + 3</code> word 4. Dit kan ook met strings gedaan worden. zoals:</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/b9ea6b5b-38ca-4a85-961d-75a23adddcab'><p>Dit kan handig zijn bij het maken van bijvoorbeeld een voornaam en een achternaam samenvoegen</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/e6fea81e-88da-466b-8c31-2fbbd55259d1'><p>Je zou er ook variabele voor kunnen gebruiken om zo de naam naar voren te kunnen krijgen.</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/3f4db4f2-2039-421c-b6de-cb7ad44ca5fc'><h3>Oefening</h3><h4>Eerste oefening</h4><p>Deze had ik opzich al snel opgelost</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/e66b652a-5052-4fc1-9ecf-75f734e303e3'><p>Hierbij moet je namen samenvoegen door een <code>return</code> command te maken en de string een formule mee te geven van wat moet worden samengesteld.</p><h4>Tweede oefening</h4><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/14b47095-9880-4a66-a162-1228fd6f26df'><p>Ik vond deze wat lastiger maar ik ga het even uitleggen. Wat hier gebeurd is dat er van de text, maar 10 characters terug mogen komen maximaal en dat er ... puntjes aanwezig zijn</p>",
  "link_Github":"https://github.com/SamaraFellaDina/js-fundamentals/wiki/5-%E2%80%90-Plus-operator"
},
{   
  "id": "17",
  "slug": "6‐Template-strings",
  "title": "6 ‐ Template strings",
  "presentor": "6 ‐ Template strings",
  "type": "JS-fundamentals",
    "short_description": "Verdiepen in de wereld van JS-Fundamentals :)",
  "date": "05-05-2024",
  "semester":"2",
  "description":"<h2>Wat zijn <code>template strings</code>?</h2><p>Wanneer je een string wilt maken, gebruik je <code>''''</code>, maar ze ondersteunen geen <code>interpolation</code>. Waarbij je dus andere waardes invoegd in de string voor verschillende redenen.</p><p>Een <code>template string</code> kan dit wel</p><h3><code>Interpolation</code></h3><p>Een <code>template strings</code> ondersteund <code>Interpolation</code> waarbij waardes kunnen worden ingevoegd in andere strings.</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/ebccc492-06a4-40e7-b459-23a7dca9c7a8'><h3>Oefeningen</h3><h4>Eerste oefening</h4><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/4e6eb3f8-f664-4d2e-ade0-9fc2039a7748'><h5>Wat gebeurd hier?</h5><p>Hier word de naam samengevoegd met het bericht. Alleen deze waarde staat als name. Maar wanneer je het uitwerkt, staat er <code>Hello Sam</code> bijvoorbeeld</p><h4>Tweede oefening</h4><p>Na een oefening te hebben gemaakt, begreep ik het nog beter</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/dc5f9239-75b6-4153-ac9c-5b576ed9f4dc'><h5>Wat gebeurd hier?</h5> <p>Hier zie je dat de teksten die hij pakt, hij de eerste letter een hoofdletter geeft. Waarna hij de rest van de letters een lage letter geeft</p><h6><code>word[0].toUpperCase()</code></h6><ul><li><code>word[0]</code>: Pakt hij de eerste letter van de string</li><li><code>toUpperCase():</code> zorgt ervoor dat de letter een hoofdletter word.<ul><li>Vergeet de <code>()</code> niet, die was ik vergeten.</li></ul></li></ul>",
  "link_Github":"https://github.com/SamaraFellaDina/js-fundamentals/wiki/6-%E2%80%90-Template-strings"
},
{   
  "id": "18",
  "slug": "7‐Numbers",
  "title": "7 ‐ Numbers",
  "presentor": "7 ‐ Numbers",
  "type": "JS-fundamentals",
    "short_description": "Verdiepen in de wereld van JS-Fundamentals :)",
  "date": "05-05-2024",
  "semester":"2",
  "description":"<h2><h2>Getallen</h2><p>Voor grotere getallen worden er ookwel <code>separators</code> gebruikt. Die laten zien dat de nummer die groter zijn er overzichtelijker uitzien.</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/467700f6-2269-4bf3-a47d-14b84af3e600'> <p>Dus, wordt het zo gebruikt:</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/2dd81484-1ba1-47cb-8223-170ce180300d'><h2><code>toString()</code></h2><p>Dit is een command die van het nummer een string maakt om het in verschillende momenten goed te kunnen gebruiken.</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/8f521d13-d765-4229-9d5d-78028b824e87'><h2>wat is <code>NaN</code>?</h2><p><code>NaN</code> staat ookwel voor: <code>Not a Number</code>. Dit is om zelf te noteren en aan te geven dat dit nummer een andere functie heeft en waarschijnlijk een <code>.toString()</code> moet gebruiken.</p><h2>Oefening</h2><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/edfb2834-b7e3-415a-906a-d79061a1f150'><p>Hier zorg je ervoor dat het nummer wat is aangegeven als een <code>string</code> terugkomt.</p>",
  "link_Github":"https://github.com/SamaraFellaDina/js-fundamentals/wiki/7-%E2%80%90-Numbers"
},
{   
  "id": "19",
  "slug": "8‐Convert-string-to-number",
  "title": "8 ‐ Convert string to number",
  "presentor": "8 ‐ Convert string to number",
  "type": "JS-fundamentals",
    "short_description": "Verdiepen in de wereld van JS-Fundamentals :)",
  "date": "05-05-2024",
  "semester":"2",
  "description":"<p>Ook kan het andersom, je constateert een <code>string</code>, maar je wilt er een nummer van maken.</p><h2><code>Number.parseInt()</code></h2><p>Hiervoor heb je de <code>Number.parseInt()</code> methode voor nodig. deze verwacht 2 parameters van je.</p><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/cfdff209-f671-41e2-bbef-def57dcc70a3'><ol> <li>De eerste parameter <code>string</code>, zorgt ervoor dat de <code>string</code> veranderd in een nummer </li> <li>De tweede parameter <code>radix</code>, wordt gebruikt in de conversie. als er een hoeveelheid van 10 is, word het <code>[0, 9]</code>. </li></ol><p>Je kan deze twee parameters dan ook niet overslaan, anders weet het systeem niet hoe die moet tellen.</p><h2>Oefening</h2><img src='https://github.com/SamaraFellaDina/js-fundamentals/assets/144009778/82fb31c9-0668-4077-9e5a-219d01afabc9'><h3>Wat gebeurd hier?</h3><p><code>return Number.parseInt(age, 10) + 1</code>: brengt een nummer terug door het te parsen, waarbij een formule word bijgevoegd</p>",
  "link_Github":"https://github.com/SamaraFellaDina/js-fundamentals/wiki/8-%E2%80%90-Convert-string-to-number"
}
]}