Congratulations!

[Valid Atom 1.0] This is a valid Atom 1.0 feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

Source: https://fronteers.nl/feeds/blog.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <feed xmlns="http://www.w3.org/2005/Atom" xml:base="https://www.fronteers.nl/">
  3.  <title>Fronteers blog</title>
  4.  <subtitle></subtitle>
  5.  <link href="https://www.fronteers.nl/feeds/blog.xml" rel="self"/>
  6.  <link href="https://www.fronteers.nl/"/>
  7.  <updated>2024-11-18T00:00:00Z</updated>
  8.  <id>https://www.fronteers.nl/</id>
  9.  <author>
  10.    <name>Fronteers</name>
  11.    <email>bestuur@fronteers.nl</email>
  12.  </author>
  13.  <entry>
  14.    <title>Oproep kandidaten voor algemeen bestuur</title>
  15.    <link href="https://www.fronteers.nl/nl/blog/2024/11/oproep-kandidaatstelling-bestuur"/>
  16.    <updated>2024-11-18T00:00:00Z</updated>
  17.    <id>https://www.fronteers.nl/nl/blog/2024/11/oproep-kandidaatstelling-bestuur</id>
  18.    <content xml:lang="nl" type="html">&lt;p&gt;Omdat de Algemene Ledenvergadering alweer in zicht is willen we met het huidige bestuur een oproep doen zodat Fronteers leden die zich graag kandidaat stellen voor een algemene bestuurspositie binnen Fronteers dit tijdig kunnen doen.&lt;/p&gt;
  19. &lt;p&gt;Als algemeen bestuurslid help je mee te beslissen over de toekomst van de vereniging, maar onze bestuursleden nemen ook een hands-on houding aan wanneer het komt op vlak van ideeën te verwezenlijken.&lt;/p&gt;
  20. &lt;p&gt;Qua tijdsbesteding varieert dat sterk per bestuurslid. Je hebt natuurlijk zelf in de hand of je wat meer tijd wil besteden. Maar er zijn wel maandelijkse bestuursvergaderingen waar je verwacht wordt aan deel te nemen.&lt;/p&gt;
  21. &lt;p&gt;Je kan je kandidaat stellen tot en met de dag van de ALV. Tijdens de ALV, zal het huidige bestuur nog een laatste oproep doen voor mensen die zich wensen kandidaat te stellen.
  22. Mensen die nadien een kandidaatstellingen insturen zullen moeten wachten tot de volgende ALV die in normale omstandigheden pas over een jaar zal doorgaan.&lt;/p&gt;
  23. &lt;p&gt;Indien je meer informatie wil over de ALV of het bestuur staan Claudia, Wim, Schepp en Jewwy je graag te woord via Slack of via &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;bestuur@fronteers.nl&lt;/a&gt;!&lt;/p&gt;
  24. </content>
  25.  </entry>
  26.  <entry>
  27.    <title>Meld je aan voor de ALV 2024</title>
  28.    <link href="https://www.fronteers.nl/nl/blog/2024/11/meld-je-aan-voor-de-alv-2024"/>
  29.    <updated>2024-11-18T00:00:00Z</updated>
  30.    <id>https://www.fronteers.nl/nl/blog/2024/11/meld-je-aan-voor-de-alv-2024</id>
  31.    <content xml:lang="nl" type="html">&lt;p&gt;Op &lt;strong&gt;vrijdagavond 29 november&lt;/strong&gt; organiseren we de jaarlijkse algemene ledenvergadering (ALV)!  Deze zal online doorgaan en start vanaf 19u30 en je moet je vooraf registreren om deel te kunnen nemen.&lt;/p&gt;
  32. &lt;p&gt;Tijdens de ALV nemen we als bestuur, vrijwilligers en leden samen de (financiële) staat van Fronteers door, en evalueren we hoe het gaat met de vereniging. Tot het begin van de vergadering kan elk lid een voorstel doen voor een agendapunt of een ter stemming te brengen onderwerp. De voorlopige agenda staat hieronder.&lt;/p&gt;
  33. &lt;p&gt;Op de planning staat al reeds het overlopen van de jaarstukken van de vereniging over 2023, de financiën over 2024 en de nieuwe begroting voor 2025. Deze stukken zullen enkele dagen voor de ALV naar alle aangemelde aanwezigen worden opgestuurd. Mocht je niet aanwezig kunnen zijn, maar deze informatie wel willen inzien: laat het ons weten! Notulen van de avond worden altijd zo snel mogelijk na de vergadering online gedeeld.&lt;/p&gt;
  34. &lt;p&gt;De planning:&lt;/p&gt;
  35. &lt;ul&gt;
  36. &lt;li&gt;Opening&lt;/li&gt;
  37. &lt;li&gt;Vaststelling agenda&lt;/li&gt;
  38. &lt;li&gt;Toelichting Congres commissie&lt;/li&gt;
  39. &lt;li&gt;Toelichting overige commissies&lt;/li&gt;
  40. &lt;li&gt;Jaarrekening 2023
  41. &lt;ul&gt;
  42. &lt;li&gt;Bevindingen kascommissie&lt;/li&gt;
  43. &lt;li&gt;Vaststellen jaarrekening&lt;/li&gt;
  44. &lt;/ul&gt;
  45. &lt;/li&gt;
  46. &lt;li&gt;Benoeming nieuwe kascommissie&lt;/li&gt;
  47. &lt;li&gt;Financiën 2024 (voorlopig)&lt;/li&gt;
  48. &lt;li&gt;Begroting 2025&lt;/li&gt;
  49. &lt;li&gt;Invulling bestuur&lt;/li&gt;
  50. &lt;li&gt;Rondvraag&lt;/li&gt;
  51. &lt;/ul&gt;
  52. &lt;p&gt;&lt;a href=&quot;https://tally.so/r/mKPlpz&quot;&gt;&lt;/a&gt;.&lt;/p&gt;
  53. &lt;div class=&quot;accent-block&quot;&gt;
  54.    &lt;a href=&quot;https://tally.so/r/mKPlpz&quot; target=&quot;_blank&quot; rel=&quot;nofollower noreferrer&quot;&gt;Gelieve je aan te melden via dit formulier&lt;/a&gt; (Enkel voor leden).
  55.    Indien dat niet wil werken kan je ook een mailtje sturen naar &lt;a href=&quot;mailto:secretaris@fronteers.nl&quot;&gt;secretaris@fronteers.nl&lt;/a&gt;
  56. &lt;/div&gt;
  57. </content>
  58.  </entry>
  59.  <entry>
  60.    <title>We hebben een nieuwe website!</title>
  61.    <link href="https://www.fronteers.nl/nl/blog/2024/10/nieuwe-website"/>
  62.    <updated>2024-10-23T00:00:00Z</updated>
  63.    <id>https://www.fronteers.nl/nl/blog/2024/10/nieuwe-website</id>
  64.    <content xml:lang="nl" type="html">&lt;p&gt;De website is gemaakt door een &lt;a href=&quot;https://www.fronteers.nl/nl/informatie/colofon&quot;&gt;grote groep vrijwilligers&lt;/a&gt; die gedurende de covid-19 pandemie online, en daarna in Utrecht, meerdere sessies bij elkaar zijn gekomen om aan de site te werken. De insteek was om het &lt;em&gt;samen&lt;/em&gt; te doen: een project te maken waarbij niet alleen het eindresultaat belangrijk was, maar het proces ernaartoe evengoed. Een manier om een keer met die ene collega die je via Fronteers kent samen te werken, ook als je daar normaal de kans niet snel toe hebt. En om van elkaar te leren, want we vinden kennisdeling heel belangrijk als vereniging.&lt;/p&gt;
  65. &lt;p&gt;Dit was ook de reden dat het wat langer heeft geduurd. Zo&#39;n sociaal project had natuurlijk te lijden onder de wereldwijde coronapandemie. Maar, wij van Fronteers geven het niet zo snel op, en het eindresultaat spreekt voor zich!&lt;/p&gt;
  66. &lt;p&gt;De nieuwe website is gebouwd met &lt;a href=&quot;https://www.11ty.dev/&quot;&gt;Eleventy&lt;/a&gt;, een static site generator ontwikkeld door Zach Leatherman. We hopen met de keuze voor Eleventy een systeem te hebben waar elke collega developer betrekkelijk eenvoudig zich in kan redden. Is het perfect? Nee. Is het foutloos? Verre van. Maar dat heeft ook een bepaalde charme. Als je iets ziet, kun je een &lt;a href=&quot;https://github.com/fronteers/website/issues/new/choose&quot;&gt;issue maken&lt;/a&gt; of een &lt;a href=&quot;https://github.com/fronteers/website/fork&quot;&gt;fork maken&lt;/a&gt; en zelf een wijziging voorstellen. En is dit nog nieuw voor je, dan is er vast wel een vrijwilliger die je eens wil helpen met hoe Git werkt, want dit is een mooie plek om het te oefenen.&lt;/p&gt;
  67. &lt;h2&gt;Maar wat kun je allemaal op deze nieuwe site?&lt;/h2&gt;
  68. &lt;ul&gt;
  69. &lt;li&gt;Je mag - mits je lid bent van de vereniging - zelf &lt;a href=&quot;https://github.com/fronteers/website/blob/main/docs/represent.md&quot;&gt;een profiel aanmaken&lt;/a&gt; waarop je jezelf laat zien. Er wordt dan naar gelinkt vanuit ons ledenoverzicht. Als we een aantal profielen hebben, kunnen we ook pagina&#39;s live zetten waarop je gevonden kan worden als werkzoekende, freelancer of als iemand die wel eens junioren wil mentoren.&lt;/li&gt;
  70. &lt;li&gt;Je kunt ook een blog schrijven en insturen. Schrijf je blog in Markdown (je kunt hiervoor &lt;a href=&quot;https://github.com/fronteers/website/blob/main/templates/blog-nl.md&quot;&gt;een sjabloon&lt;/a&gt; vinden op Github) en plaats het in de juiste map. Maak een pull-request en iemand van onze marketingcommissie kijkt je inzending na. Wordt je PR gemerged, dan sta je op de site! 👏&lt;/li&gt;
  71. &lt;li&gt;Heeft je bedrijf een vacature, dan kunnen je ontwikkelaars tot de vacature verloopt nog correcties doen in een proces dat minder afhankelijk is van 1 vrijwilliger. Shout out naar Bernard die &lt;em&gt;jarenlang&lt;/em&gt; voor ons de vacaturebank heeft gedaan! 🙏&lt;/li&gt;
  72. &lt;li&gt;De site is nu ook tweetalig. Waarmee we hopen ook Engelstalige expats te kunnen betrekken bij de vereniging.&lt;/li&gt;
  73. &lt;li&gt;Tot slot zijn onze &lt;a href=&quot;https://plausible.io/fronteers.nl&quot;&gt;website bezoekersstatistieken&lt;/a&gt; voor iedereen openbaar in te zien.&lt;/li&gt;
  74. &lt;/ul&gt;
  75. &lt;h2&gt;Openingsactie!&lt;/h2&gt;
  76. &lt;p&gt;Om de nieuwe website te lanceren hebben we een openingsactie! De rest van het jaar berekenen wij &lt;strong&gt;geen kosten&lt;/strong&gt; voor het &lt;a href=&quot;https://www.fronteers.nl/nl/werk-en-freelance/vacature-plaatsen/&quot;&gt;plaatsen van een vacature&lt;/a&gt;.&lt;/p&gt;
  77. &lt;h2&gt;Bedankjes&lt;/h2&gt;
  78. &lt;p&gt;Ten eerste bedanken wij natuurlijk de &lt;a href=&quot;https://github.com/fronteers/website/graphs/contributors&quot;&gt;vrijwilligers en passanten&lt;/a&gt; die in de afgelopen jaren een bijdrage hebben geleverd aan deze nieuwe website!&lt;/p&gt;
  79. &lt;p&gt;We worden gehost door Netlify die ons sponsort met een &lt;a href=&quot;https://www.netlify.com/legal/open-source-policy/&quot;&gt;Open Source Unlimited pakket&lt;/a&gt;.&lt;/p&gt;
  80. &lt;p&gt;Het design is gemaakt door Ready For Take-Off, die je kunt kennen van de designs van Fronteers Conference 2015, 2016 en 2017.&lt;/p&gt;
  81. </content>
  82.  </entry>
  83.  <entry>
  84.    <title>Nieuw bestuur van 2023</title>
  85.    <link href="https://www.fronteers.nl/nl/blog/2024/01/nieuw-bestuur-van-2023"/>
  86.    <updated>2024-01-03T00:00:00Z</updated>
  87.    <id>https://www.fronteers.nl/nl/blog/2024/01/nieuw-bestuur-van-2023</id>
  88.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 10 november vond de jaarlijkse ALV (algemene leden vergadering) online plaats. Zoals velen ondertussen waarschijnlijk al wisten, hebben Anneke Sinnema en Edwin Martin besloten om hun rollen in het bestuur niet te verlengen.
  89. Zowel Anneke als Edwin hebben een cruciale rol gespeeld voor Fronteers de afgelopen 6 jaar, Anneke als voorzitster en Edwin als secretaris.&lt;/p&gt;
  90. &lt;p&gt;Met de voorbije pandemie zal dit zeker niet makkelijk geweest zijn en dus wensen we hen beiden een toch wel zeer verdiende pauze toe. Beiden zullen nog altijd deel blijven uitmaken van Fronteers in de toekomst, maar dan in een andere rol.&lt;/p&gt;
  91. &lt;p&gt;De traditie met nieuwe mensen die zich kandidaat stelden werd inmiddels voortgezet en leden hadden de kans om hun stem uit te brengen. Het nieuwe bestuur bestaat uit Christian “Schepp” Schaefer, Jewwy Qadri, Wim van Iersel en Claudia Reynders.&lt;/p&gt;
  92. &lt;p&gt;In de weken opvolgend aan de ALV is het oude en het nieuwe bestuur samengekomen om de nieuwe rollen te verdelen en de uitkomst is als volgt:&lt;/p&gt;
  93. &lt;p&gt;&lt;em&gt;Wim van Iersel&lt;/em&gt; (banaan666) zet zijn rol als penningmeester voort nadat hij vorig jaar het stokje overnam van Sander Vink.Doordeweeks kun je Wim aan het werk vinden als webmaster/front-end developer voor Tilburg. Je kunt &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2022/11/nieuw-bestuurslid-wim-van-iersel&quot;&gt;Wim’s officiële introductie ook lezen op de Fronteers blog&lt;/a&gt;.&lt;/p&gt;
  94. &lt;p&gt;&lt;em&gt;Christian Schaefer&lt;/em&gt; (schepp), roepnaam “Schepp”, assisteert onze secretaris met documentatie en communicatie. Schepp heeft een vrij lange geschiedenis als Fronteers-lid en is een van de weinige Duitse leden. Na een paar jaar vrijwilligerswerk te hebben gedaan voor de conferentie, werd hij in 2019 eindelijk lid van de conferentiecommissie. Sinds 2010 is hij mede-presentator van een wekelijkse Duitse podcast over frontend-ontwikkeling, die nu de 600 afleveringen nadert. Schepp is ook mede-organisator van twee meetups: de lokale Düsseldorfse meetup Webworker NRW (2014 - gepauzeerd sinds 2020) en het online-only CSS Café (sinds 2020).&lt;/p&gt;
  95. &lt;p&gt;&lt;em&gt;Jewwy Qadri&lt;/em&gt; (Jewwy), volgt Edwin op als secretaris. Jewwy trad in 2019 toe tot de conferentiecommissie en maakte niet alleen deel uit van een prachtige editie, maar was ook zeer enthousiast om de boel opnieuw op te starten na de pandemie. Jewwy is sinds kort ook toegetreden tot de workshopcommissie waar hij nog meer mogelijkheden zoekt om mee te helpen organiseren. In zijn functie werkte Jewwy ruim tien jaar als front-end developer in de e-commerce sector, voordat hij onlangs bij een toegankelijkheids-adviesbureau aan de slag ging. Als hij niet met code bezig is of Fronteers vooruit helpt, scherpt hij zijn professionele bowling vaardigheden nog verder aan.&lt;/p&gt;
  96. &lt;p&gt;&lt;em&gt;Claudia Reynders&lt;/em&gt; (Claudia R) volgt Anneke op als voorzitter nadat ze sinds eind 2019 deel uitmaakte van de Belgische commissie als organisator van evenementen. Overdag werkt Claudia als community lead voor een Belgische codee school genaamd BeCode, waar ze de toekomst van nieuwe ontwikkelaars helpt vormgeven en hun curriculum beïnvloedt om belangrijke praktijken en kennis op te nemen.&lt;/p&gt;
  97. &lt;p&gt;We wensen jullie allemaal een prachtige start van het nieuwe jaar en kijken ernaar uit om de Fronteers-gemeenschap verder uit te bouwen!&lt;/p&gt;
  98. </content>
  99.  </entry>
  100.  <entry>
  101.    <title>ALV vanavond online</title>
  102.    <link href="https://www.fronteers.nl/nl/blog/2023/11/alv-vanavond-online"/>
  103.    <updated>2023-11-10T00:00:00Z</updated>
  104.    <id>https://www.fronteers.nl/nl/blog/2023/11/alv-vanavond-online</id>
  105.    <content xml:lang="nl" type="html">&lt;p&gt;De Algemene Ledenvergadering is verplaatst naar een online bijeenkomst. We maken hierbij gebruik van Slack. De vergadering start om 19:30 en stopt naar verwachting rond 21:30.&lt;/p&gt;
  106. &lt;p&gt;Leden van Fronteers die nu de ALV online is toch graag de ALV willen bijwonen kunnen zich aanmelden bij het bestuur. Dit kan via een e-mail naar &lt;a href=&quot;mailto:secretaris@fronteers.nl&quot;&gt;secretaris@fronteers.nl&lt;/a&gt; of via een DM naar Edwin Martin op Slack.&lt;/p&gt;
  107. &lt;p&gt;Wil je meedoen maar ben je nog niet lid van de Fronteers Slack? &lt;a href=&quot;https://join.slack.com/t/fronteersnl/shared_invite/zt-k3wyhquf-atZIftTxxCaPRpRlO744xg&quot;&gt;Meld je hier aan voor onze Slack&lt;/a&gt;. Als je je aanmeldt voegen wij je toe aan een besloten kanaal (#alv2023). Hier kun je de jaarstukken vinden en vooraf aan de ALV vragen stellen of agendapunten aandragen.&lt;/p&gt;
  108. </content>
  109.  </entry>
  110.  <entry>
  111.    <title>Kandidaat bestuur Fronteers: Claudia Reynders</title>
  112.    <link href="https://www.fronteers.nl/nl/blog/2023/11/kandidaat-bestuur-fronteers-claudia-reynders"/>
  113.    <updated>2023-11-08T00:00:00Z</updated>
  114.    <id>https://www.fronteers.nl/nl/blog/2023/11/kandidaat-bestuur-fronteers-claudia-reynders</id>
  115.    <content xml:lang="nl" type="html">&lt;p&gt;Aanstaande vrijdag vindt de jaarlijkse algemene ledenvergadering (ALV) van Fronteers plaats. Een van de onderdelen tijdens de ALV is de bestuursverkiezing. Kandidaat bestuurslid Claudia Reynders stelt zich voor!&lt;/p&gt;
  116. &lt;p&gt;Hoi ik ben Claudia Reynders, ondertussen al enkele jaren de drijfveer achter commissie België waar ik met heel veel passie meetups organiseer. Ik leerde Fronteers kennen ergens een goeie 10 jaar geleden dankzij een meetup in het Antwerpse.&lt;/p&gt;
  117. &lt;p&gt;Door me de laatste jaren voornamelijk in te zetten om de commissie en activiteiten in België terug op gang te trekken, voel ik me ook sterk betrokken bij de vereniging.&lt;/p&gt;
  118. &lt;p&gt;Zelf heb ik ook al best wat te danken aan Fronteers, zo heb ik door de jaren heen al enorm wat bijgeleerd, maar ook heel wat interessante mensen leren kennen. Zoals onlangs nog op Smashing Conference te Antwerpen! Zeker niet onbelangrijk is dat een aantal van de jobs in mijn carrière ook deels voortkomen uit dat deeltje netwerken en nieuwe connecties maken.&lt;/p&gt;
  119. &lt;p&gt;Ik wil ook nog even vermelden dat ik tot nu toe ook al best wat steun heb gehad aan mensen uit de online Fronteers community. Vooral Anneke heeft me de afgelopen jaren enorm geïnspireerd en gesteund. Daarom vind ik het ook jammer dat zij aftreedt, maar anderzijds is dat ook net wat me vandaag aanzet om me kandidaat te stellen als bestuurslid.&lt;/p&gt;
  120. &lt;h1&gt;Waar wil ik aan bijdragen?&lt;/h1&gt;
  121. &lt;p&gt;Fronteers heeft sinds het bestaan al veel verandering en verbetering gebracht dankzij de doelstelling van de vereniging en de mensen die zich tot nu toe daar hebben voor ingezet al die jaren.&lt;/p&gt;
  122. &lt;p&gt;De doelstelling:&lt;/p&gt;
  123. &lt;p&gt;&amp;quot;&lt;em&gt;De professionalisering van het beroep front-end web development. Daarbij streven wij naar erkenning, verbetering en ondersteuning van de (positie van) Nederlandstalige front-end webontwikkelaars.&lt;/em&gt;&amp;quot;&lt;/p&gt;
  124. &lt;p&gt;Maar sinds de start van de pandemie merken we allemaal wel dat Fronteers een stuk minder actief is geworden en daar zou ik graag verandering in willen brengen. Eerst en vooral door de meetups in Nederland terug op gang te trekken, waarna andere activiteiten hopelijk ook volgen. Om dit te kunnen verwezenlijken zijn er natuurlijk mensen nodig die zich daar mee achter willen zetten. Het huidige bestuur heeft al een aanzet gedaan om interesse op te wekken, nu moeten we enkel zien over te gaan op actie. 💪&lt;/p&gt;
  125. &lt;p&gt;Verder wil ik ook graag voortzetten waar Anneke al mee begonnen was: het inzetten op onderwerpen zoals diversiteit, toegankelijkheid, transparantie van het bestuur enz...&lt;/p&gt;
  126. &lt;p&gt;En zoals Anneke het zo mooi beschreef gisteren:&lt;/p&gt;
  127. &lt;p&gt;&amp;quot;Het glazen potje met kiezeltjes en stenen waar zand tussen gemixt zit, maar alles mooi samen doet hangen&amp;quot; en dat is eigenlijk ook wel hoe ik mezelf zie, als iemand die haar steentje wil bijdragen waar mogelijk en nodig. Dit zie ik zelf vrij breed, maar weet ook dat het soms ook enkel gaat om kennisoverdracht en ondersteuning, taken delegeren en helpen sturen.&lt;/p&gt;
  128. &lt;h1&gt;Wie ben ik en wat kan je van mij verwachten?&lt;/h1&gt;
  129. &lt;p&gt;Ik stel mezelf altijd voor als een &amp;quot;hearing impaired front-end designer with a focus on diversity, inclusion, accessibility and sustainability in tech&amp;quot;.&lt;/p&gt;
  130. &lt;p&gt;Ik heb best een brede achtergrond en ervaring in IT. Oorspronkelijk ben ik opgeleid als PHP developer, een job waar ik eigenlijk amper in gewerkt heb want al gauw werd het duidelijk dat ik meer affiniteit en plezier had aan front-end development. Daarna heb ik ook nog een tijdje als product manager gewerkt en me ook verder verdiept in UX design.&lt;/p&gt;
  131. &lt;p&gt;Momenteel werk ik parttime als &amp;quot;technical&amp;quot; career coach voor een non-profit die bootcamps organiseert. Dit houdt in dat ik mensen begeleid in hun carrière switch in web development e.d. .&lt;/p&gt;
  132. &lt;p&gt;Naast Fronteers en mijn werk ben ik in België ook actief met het bouwen van een community voor vrouwelijke programmeurs. Samen met een aantal vrijwilligers organiseren we meetups, sturen we maandelijks een nieuwsbrief uit en hebben we nog tal van andere activiteiten en initiatieven. In al die zaken ben ik op 1 of andere manier wel betrokken en help meestal ook om alles in goede banen te leiden. Dus ik denk dat ik wel wat ervaring te bieden heb. :-)&lt;/p&gt;
  133. </content>
  134.  </entry>
  135.  <entry>
  136.    <title>Meld je aan voor de ALV 2023</title>
  137.    <link href="https://www.fronteers.nl/nl/blog/2023/10/meld-je-aan-voor-de-alv-2023"/>
  138.    <updated>2023-10-19T00:00:00Z</updated>
  139.    <id>https://www.fronteers.nl/nl/blog/2023/10/meld-je-aan-voor-de-alv-2023</id>
  140.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdagavond 10 november houden we weer onze jaarlijkse algemene ledenvergadering (ALV)!&lt;/p&gt;
  141. &lt;p&gt;Het vindt &lt;em&gt;online&lt;/em&gt; plaats. Alle leden zijn hiervoor van harte uitgenodigd, en we hopen nieuwe bestuursleden te verwelkomen!&lt;/p&gt;
  142. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2023/10/meld-je-aan-voor-de-alv-2023#english&quot;&gt;English version&lt;/a&gt; below.&lt;/p&gt;
  143. &lt;p&gt;Tijdens de ALV nemen we als bestuur, vrijwilligers en leden samen de (financiële) staat van Fronteers door, en evalueren we hoe het gaat met de vereniging. Tot het begin van de vergadering kan elk lid een voorstel doen voor een agendapunt of een ter stemming te brengen onderwerp. De voorlopige agenda staat hieronder.&lt;/p&gt;
  144. &lt;p&gt;Wat in ieder geval zal worden behandeld zijn de jaarstukken van de vereniging over 2022, de financiën over 2023 en de nieuwe begroting voor 2024. Deze stukken zullen enkele dagen voor de ALV naar alle aangemelde aanwezigen worden opgestuurd. Mocht je niet aanwezig kunnen zijn, maar deze informatie wel willen inzien: laat het ons weten! Notulen van de avond worden altijd zo snel mogelijk na de vergadering online gedeeld.&lt;/p&gt;
  145. &lt;p&gt;Het is alweer drie jaar geleden dat bestuursleden Anneke en Edwin zijn herverkozen en dit jaar treden ze statutair weer af. Anneke stelt zich niet herkiesbaar. Edwin laat dit afhangen van de vorming van het nieuwe bestuur. Als dreigt dat het bestuur kleiner wordt dan drie personen, dan zal Edwin zich opnieuw verkiesbaar stellen.&lt;/p&gt;
  146. &lt;p&gt;Het mag duidelijk zijn: het bestuur zoekt versterking. Niet alleen voor de rol van voorzitter en secretaris, maar ook om het bestuur in het algemeen productiever te maken. Petra Knip heeft zich al kandidaat gesteld. Wil je je ook kandidaat stellen voor het bestuur? Laat het ons dan voor de ALV weten. Tijdens de ALV zal door de aanwezige leden voor nieuwe bestuursleden worden gestemd. Als lid kan je een aanwezig lid machtigen om voor je te stemmen.&lt;/p&gt;
  147. &lt;p&gt;Als bestuurslid help je mee de vereniging op de kaart te zetten en te houden. Je zorgt er voor dat commissies een zetje krijgen en dat vrijwilligers het zelfvertrouwen hebben om activiteiten te ontplooien voor de vereniging. We hebben de ambitie om weer vaker meetups en activiteiten te organiseren, zetten graag het Fronteerscongres voort, en zetten onze nieuwe website live. Anneke, Wim en Edwin staan je graag te woord via Slack of &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;bestuur@fronteers.nl&lt;/a&gt; als je ons hierin wilt helpen!&lt;/p&gt;
  148. &lt;ul&gt;
  149. &lt;li&gt;Opening&lt;/li&gt;
  150. &lt;li&gt;Vaststelling agenda&lt;/li&gt;
  151. &lt;li&gt;Toelichting Congres commissie&lt;/li&gt;
  152. &lt;li&gt;Toelichting Overige commissies&lt;/li&gt;
  153. &lt;li&gt;Jaarrekening 2022&lt;/li&gt;
  154. &lt;li&gt;Bevindingen kascommissie&lt;/li&gt;
  155. &lt;li&gt;Vaststellen jaarrekening&lt;/li&gt;
  156. &lt;li&gt;Benoeming nieuwe kascommissie&lt;/li&gt;
  157. &lt;li&gt;Financiën 2023 (voorlopig)&lt;/li&gt;
  158. &lt;li&gt;Begroting 2024&lt;/li&gt;
  159. &lt;li&gt;Invulling bestuur&lt;/li&gt;
  160. &lt;li&gt;Rondvraag&lt;/li&gt;
  161. &lt;/ul&gt;
  162. &lt;p&gt;Meld je aan door een email te sturen naar &lt;a href=&quot;mailto:secretaris@fronteers.nl&quot;&gt;secretaris@fronteers.nl&lt;/a&gt; of laat het Edwin weten op Slack.&lt;/p&gt;
  163. &lt;h1&gt;English version&lt;/h1&gt;
  164. &lt;p&gt;&lt;em&gt;On Friday evening, November 10, we will hold our annual general meeting (ALV) again! It takes place &lt;em&gt;online&lt;/em&gt; at 7:30 PM via the &lt;a href=&quot;https://join.slack.com/t/fronteersnl/shared_invite/zt-k3wyhquf-atZIftTxxCaPRpRlO744xg&quot;&gt;Fronteers Slack channel&lt;/a&gt;. All Fronteers members are cordially invited to this event, and we hope to welcome new board members!&lt;/em&gt;&lt;/p&gt;
  165. &lt;p&gt;During the AGM, the board, volunteers and members review the (financial) state of Fronteers together and evaluate how the association is doing. Until the beginning of the meeting, any member can make a proposal for an agenda item or a subject to be put to the vote. The provisional agenda is below.&lt;/p&gt;
  166. &lt;p&gt;What will in any case be discussed are the association&#39;s annual accounts for 2022, the finances for 2023 and the new budget for 2024. These documents will be sent to all registered attendees a few days before the AGM. If you are unable to attend, but would like to view this information, please let us know! Minutes of the evening are always shared online as soon as possible after the meeting.&lt;/p&gt;
  167. &lt;p&gt;It has been three years since board members Anneke and Edwin were re-elected and this year they are resigning by statute. Anneke is not standing for re-election. Edwin makes this depend on the formation of the new board. If there is a risk that the board will become smaller than three people, Edwin will stand for re-election.&lt;/p&gt;
  168. &lt;p&gt;It should be clear: the board is looking for reinforcement. Not only for the role of chairman and secretary, but also to make the board more productive in general. Petra Knip has already put herself forward as a candidate. Would you also like to stand as a candidate for the board? Then let us know before the AGM. During the AGM, the members present will vote for new board members. As a member you can authorize a member present to vote for you.&lt;/p&gt;
  169. &lt;p&gt;As a board member you help to put and keep the association on the map. You ensure that committees get a push and that volunteers have the self-confidence to develop activities for the association. We have the ambition to organize meetups and activities more often, would like to continue the Fronteers Congress, and are putting our new website live. Anneke, Wim and Edwin are happy to speak to you via Slack or &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;bestuur@fronteers.nl&lt;/a&gt; if you would like to help us with this!&lt;/p&gt;
  170. &lt;ul&gt;
  171. &lt;li&gt;Opening&lt;/li&gt;
  172. &lt;li&gt;Setting the agenda&lt;/li&gt;
  173. &lt;li&gt;Explanation of Congress committee&lt;/li&gt;
  174. &lt;li&gt;Explanation Other committees&lt;/li&gt;
  175. &lt;li&gt;Annual accounts 2022&lt;/li&gt;
  176. &lt;li&gt;Audit committee findings&lt;/li&gt;
  177. &lt;li&gt;Adopting annual accounts&lt;/li&gt;
  178. &lt;li&gt;Appointment of new audit committee&lt;/li&gt;
  179. &lt;li&gt;Finances 2023 (provisional)&lt;/li&gt;
  180. &lt;li&gt;Budget 2024&lt;/li&gt;
  181. &lt;li&gt;The Board&lt;/li&gt;
  182. &lt;li&gt;Any other business&lt;/li&gt;
  183. &lt;/ul&gt;
  184. &lt;p&gt;Register by sending an email to &lt;a href=&quot;mailto:secretaris@fronteers.nl&quot;&gt;secretaris@fronteers.nl&lt;/a&gt; or let Edwin know on Slack.&lt;/p&gt;
  185. </content>
  186.  </entry>
  187.  <entry>
  188.    <title>Vrijwilligersetentje groot succes</title>
  189.    <link href="https://www.fronteers.nl/nl/blog/2023/07/vrijwilligers-etentje-groot-succes"/>
  190.    <updated>2023-07-29T00:00:00Z</updated>
  191.    <id>https://www.fronteers.nl/nl/blog/2023/07/vrijwilligers-etentje-groot-succes</id>
  192.    <content xml:lang="nl" type="html">&lt;p&gt;On Thursday, July 27th, we dined at LE:EN in Utrecht with existing and new volunteers, discussing Fronteers. As previously mentioned in an earlier post, we were &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2023/07/vrijwilligers-gezocht&quot;&gt;seeking volunteers&lt;/a&gt; to help revitalize the association.&lt;/p&gt;
  193. &lt;p&gt;Well, we succeeded! Between the &amp;quot;Sprinkhaan Green Goddess&amp;quot;-without-Sprinkhaan and the Choco Pie, we went through the attendees. We now have (the beginning of) a workshop committee, a complete education committee, and a complete marketing and communication committee. Additionally, there are three potential candidates for the board whom we plan to introduce to the role before the General Assembly.&lt;/p&gt;
  194. &lt;p&gt;Furthermore, Fronteers still has an active committee in Belgium and the conference committee (currently considering the future of the Fronteers conference), as well as occasional volunteers who lend their expertise in areas such as accessibility or help with the website.&lt;/p&gt;
  195. &lt;p&gt;It would be ideal to add three more names to the &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2023/07/vrijwilligers-gezocht#:~:text=3%20mensen%20voor%20de%20workshopcommissie&quot;&gt;workshop committee&lt;/a&gt; and combine it with the activities committee, so we can organize several enjoyable and educational workshops and gatherings once again!&lt;/p&gt;
  196. </content>
  197.  </entry>
  198.  <entry>
  199.    <title>Vrijwilligers gezocht!</title>
  200.    <link href="https://www.fronteers.nl/nl/blog/2023/07/vrijwilligers-gezocht"/>
  201.    <updated>2023-07-19T00:00:00Z</updated>
  202.    <id>https://www.fronteers.nl/nl/blog/2023/07/vrijwilligers-gezocht</id>
  203.    <content xml:lang="nl" type="html">&lt;p&gt;De vereniging zoekt versterking. Hieronder zet ik uiteen wie we waarvoor zoeken! Lijkt het je leuk om ons te helpen in één van onderstaande rollen, neem dan contact op met het &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;bestuur&lt;/a&gt;.&lt;/p&gt;
  204. &lt;p&gt;Voor alle posities hieronder geldt het volgende:&lt;/p&gt;
  205. &lt;ul&gt;
  206. &lt;li&gt;wij denken aan gemiddeld MAX 2 uur per week (maar gaan hierbij ook uit van asynchroon online contact dat hier onder valt)&lt;/li&gt;
  207. &lt;li&gt;vrijwilliger zijn bij Fronteers hoort geen geld te kosten: reiskostenvergoeding, declareren bonnetjes wanneer nodig.&lt;/li&gt;
  208. &lt;li&gt;vrijwilligers krijgen 50% korting op hun lidmaatschap.&lt;/li&gt;
  209. &lt;/ul&gt;
  210. &lt;p&gt;Binnen elke commissie is er 1 persoon die de commissie voorzit. Deze:&lt;/p&gt;
  211. &lt;ul&gt;
  212. &lt;li&gt;communiceert met het bestuur&lt;/li&gt;
  213. &lt;li&gt;geeft aan als er nieuwe vrijwilligers nodig zijn&lt;/li&gt;
  214. &lt;li&gt;geeft aan als iemand stopt&lt;/li&gt;
  215. &lt;li&gt;communiceert tussen workshop, activiteiten en onderwijscommissie als er kans is om een gastspreker in te zetten voor workshop, meetup en gastles&lt;/li&gt;
  216. &lt;/ul&gt;
  217. &lt;h2&gt;3 mensen voor de workshopcommissie&lt;/h2&gt;
  218. &lt;div class=&quot;note&quot;&gt;Doel van de commissie: Faciliteren van kennisdeling)&lt;/div&gt;
  219. &lt;p&gt;We willen graag in het schooljaar 2023-2024 vier workshops organiseren. Bijvoorbeeld twee in Utrecht en twee in Amsterdam. Jules Ernst (accessibility) en Jad Joubran (JavaScript) zijn beschikbaar. Jeroen Reumkens (https://www.jeroenreumkens.nl/) is misschien een idee (creatief coden, animaties?). We willen graag onderwerpen voor junioren (introductie tot...) en senioren. Mogelijk vooraf een enquete doen/onderzoek om te kijken welke onderwerpen interessant zijn. Ouder idee: VIP developer overvliegen en die in twee of drie steden een workshop vragen te geven bij een gastbedrijf.&lt;/p&gt;
  220. &lt;ul&gt;
  221. &lt;li&gt;Aantal personen per workshop: 12 (plus workshop docent en vrijwilliger)&lt;/li&gt;
  222. &lt;li&gt;Perks: vrijwilliger doet kosteloos aan workshop mee&lt;/li&gt;
  223. &lt;/ul&gt;
  224. &lt;h2&gt;3 mensen voor de activiteitencommissie&lt;/h2&gt;
  225. &lt;div class=&quot;note&quot;&gt;Doel van de commissie: Kennisdeling, collega&#39;s helpen netwerken&lt;/div&gt;
  226. &lt;p&gt;We zouden het liefst in het schooljaar 2023-2024 vier activiteiten organiseren om de zichtbaarheid van Fronteers te vergroten. Wat voor activiteit en waar die plaatsvindt, daar zit veel vrijheid in. De online meetups die sinds begin coronatijd zijn opgezet vallen ook onder de activiteitencommissie. Deze staan nu maandelijks ingepland, maar we kunnen de frequentie wat verlagen en de marketing online verhogen. Idee: Een sessie organiseren met/bij een partij als IederIn, Bartiméus voor verhogen bewustzijn toegankelijkheid. Bedrijven zouden waarschijnlijk graag een &#39;werkbezoek&#39; hosten als we een vorm kunnen vinden om dit te doen zonder al te veel duidelijke &#39;reclame angle&#39;. Netwerkevents zoals een gezamenlijke fietstocht bijvoorbeeld in de lente en zomer. Ouder idee: VIP developer (zie idee bij workshopcommissie) vragen om te spreken op een meetup&lt;/p&gt;
  227. &lt;ul&gt;
  228. &lt;li&gt;Contact leggen met bedrijven die locatie willen sponsoren&lt;/li&gt;
  229. &lt;li&gt;Contact leggen met marketingcommissie over promotie van activiteit&lt;/li&gt;
  230. &lt;li&gt;Zelf aanwezig zijn op activiteit, of delegeren naar ander Fronteerslid (voor introductie van Fronteers)&lt;/li&gt;
  231. &lt;li&gt;Perks: Eigen zichtbaarheid, netwerken&lt;/li&gt;
  232. &lt;/ul&gt;
  233. &lt;h2&gt;2 mensen voor de voor onderwijscommissie&lt;/h2&gt;
  234. &lt;div class=&quot;note&quot;&gt;Doel van de commissie: Kennisdeling, professionaliseren van developers&lt;/div&gt;
  235. &lt;p&gt;Vroeger had Fronteers een onderwijscommissie, maar helaas is die al een tijdje inactief.
  236. Het zou interessant zijn voor Fronteers om opnieuw docenten en de beroepspraktijk met elkaar in contact te brengen, zodat nieuwe developers goed beslagen ten ijs komen bij hun eerste baan (brede kennis hebben van toegankelijkheid, performance en duurzaamheid). En daarnaast onderwijsinstellingen (Hogescholen en bootcamps) te helpen in hun contacten met potentiële (gast)docenten. Bovendien is het goed om studenten te helpen met netwerken zodat ze minder kwetsbaar zijn wanneer ze een &#39;DEI achtergrond&#39; hebben en (het komt helaas voor) te maken krijgen met lastige werksituaties.&lt;/p&gt;
  237. &lt;ul&gt;
  238. &lt;li&gt;Contact leggen met onderwijsinstellingen en bootcamps, eens op lokatie koffie drinken en kennismaken met docenten&lt;/li&gt;
  239. &lt;li&gt;Contact leggen met mogelijke gastdocenten die interessant zijn om voor te stellen aan onderwijsinstellingen&lt;/li&gt;
  240. &lt;li&gt;Kansen zien voor Fronteers. Bijvoorbeeld event lokaties (sponsoring door onderwijsinstelling) voor workshops of meetups, mogelijkheid tot koppelen van &#39;carrière mentoren&#39; (seniore collega&#39;s) met (net afgestudeerde) studenten, organiseren van een junior Jam Session&lt;/li&gt;
  241. &lt;/ul&gt;
  242. &lt;h2&gt;2 mensen voor de marketing- en communicatiecommissie&lt;/h2&gt;
  243. &lt;div class=&quot;note&quot;&gt;Doel van de commissie: Bekendheid van Fronteers vergroten en andere commissies ondersteunen&lt;/div&gt;
  244. &lt;ul&gt;
  245. &lt;li&gt;ophalen van content en versturen van een nieuwsbrief elke 2 maanden&lt;/li&gt;
  246. &lt;li&gt;content op de website up to date houden&lt;/li&gt;
  247. &lt;li&gt;gastschrijvers voor het blog benaderen&lt;/li&gt;
  248. &lt;li&gt;regelen en bedenken promotiemateriaal/swag&lt;/li&gt;
  249. &lt;li&gt;(regelen van) vertegenwoordiging op congressen (als sponsoren van een event opportuun is) en meetups (vergoeding reiskosten)&lt;/li&gt;
  250. &lt;li&gt;beheer van de Fronteers &#39;kluis&#39; (momenteel doet Jewwy dit 👌)&lt;/li&gt;
  251. &lt;li&gt;marketen van de mogelijkheid tot het plaatsen van vacatures bij Fronteers&lt;/li&gt;
  252. &lt;li&gt;kortingscodes regelen voor diensten/online cursussen/events buiten Fronteers gerelateerd aan webdevelopment&lt;/li&gt;
  253. &lt;/ul&gt;
  254. &lt;h2&gt;2 mensen voor het bestuur&lt;/h2&gt;
  255. &lt;div class=&quot;note&quot;&gt;Doel: voortbestaan van Fronteers garanderen, visie op de vereniging doorontwikkelen&lt;/div&gt;
  256. &lt;p&gt;Voorzitter Anneke is toe aan vervanging en om het voortbestaan van Fronteers te garanderen hebben we eigenlijk wat meer bestuursleden nodig. Op dit moment hebben we als rollen een voorzitter, een secretaris en een penningmeester. Het liefst komen hier twee bestuursleden bij die het bestuur ondersteunen op het punt van:&lt;/p&gt;
  257. &lt;ul&gt;
  258. &lt;li&gt;Vrijwilligersmanagement (bedankjes aan ex vrijwilligers, nieuwe vrijwilligers zoeken)&lt;/li&gt;
  259. &lt;li&gt;Contact met de commissie België zodat die zich ondersteund weet in middelen als marketing, vrijwilligersbedankjes, etc.&lt;/li&gt;
  260. &lt;li&gt;Contact met de verschillende commissies en ondersteuning (bewustzijn van budget, aanmoedigen van initiatieven, commissies aan elkaar linken)&lt;/li&gt;
  261. &lt;/ul&gt;
  262. &lt;h2&gt;1 persoon voor de Commissie België&lt;/h2&gt;
  263. &lt;p&gt;De &lt;a href=&quot;https://fronteersbe.github.io/&quot;&gt;commissie België&lt;/a&gt; bestaat nu uit drie personen (Claudia, Ibe, en Thomas) met Claudia als de kartrekker daar. Er wordt gezocht naar een vierde persoon om te helpen met het organiseren van activiteiten in Antwerpen, Limburg en Vlaams Brabant.&lt;/p&gt;
  264. &lt;h2&gt;Commissie Congres&lt;/h2&gt;
  265. &lt;p&gt;De huidige congrescommissie zal eerst moeten evalueren hoe mogelijk het men acht om in het komende jaar een evenement te plannen aangezien we helaas voor dit jaar het congres (wegens tegenvallende kaartverkoop) moesten annuleren.&lt;/p&gt;
  266. </content>
  267.  </entry>
  268.  <entry>
  269.    <title>Fronteers Conference is cancelled</title>
  270.    <link href="https://www.fronteers.nl/nl/blog/2023/07/fronteers-conference-is-cancelled"/>
  271.    <updated>2023-07-13T00:00:00Z</updated>
  272.    <id>https://www.fronteers.nl/nl/blog/2023/07/fronteers-conference-is-cancelled</id>
  273.    <content xml:lang="nl" type="html">&lt;p&gt;There will, unfortunately, be no Fronteers Conference this year.&lt;/p&gt;
  274. &lt;p&gt;With a very heavy heart, we have to inform you that we aren&#39;t able to hold our 14th conference.&lt;/p&gt;
  275. &lt;p&gt;Despite a big marketing push in the last few weeks, we needed to sell more tickets to make it possible for us to hold this year&#39;s conference. Unfortunately, we are still far from the break-even point, and projections suggest we won&#39;t be able to reach it. So we decided to cancel now before needing to make huge financial commitments to vendors like catering and the venue itself. The financial risk would have been too big to continue. We&#39;ve extremely sorry as you might already have booked flights or hotels, but the decision was unavoidable and certainly not made lightly.&lt;/p&gt;
  276. &lt;p&gt;Thank you so much for your support for everyone who bought a ticket! It really means a lot. And we are very sorry we can&#39;t keep our side of the deal. We will refund your ticket as soon as possible. We&#39;ve already instructed Tito to set things in motion, but it might take a few days to a week or two before the banks transfer the money back to you. We will keep an eye on the process to ensure everyone gets a full refund. If you have yet to receive your refund after two weeks, please let us know, and we&#39;ll try to find out what happened.&lt;/p&gt;
  277. &lt;p&gt;What this means for the future of the Fronteers Conference, we don&#39;t know. If something changes, we will definitely let you know.&lt;/p&gt;
  278. </content>
  279.  </entry>
  280.  <entry>
  281.    <title>Vrijwilligersdiner</title>
  282.    <link href="https://www.fronteers.nl/nl/blog/2023/06/vrijwilligersdiner"/>
  283.    <updated>2023-06-30T00:00:00Z</updated>
  284.    <id>https://www.fronteers.nl/nl/blog/2023/06/vrijwilligersdiner</id>
  285.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdagavond 27 juli gaan we met de vrijwilligers van Fronteers uit eten in Utrecht om de staat en de toekomst van Fronteers te bespreken. Maar we kunnen wel wat vers bloed gebruiken.&lt;/p&gt;
  286. &lt;p&gt;Wil jij ons helpen om de vereniging vernieuwd leven in te blazen? Graag nodigen we potentiële nieuwe vrijwilligers uit om op 27 juli aan te schuiven voor een kennismaking met onze verenigingscultuur!&lt;/p&gt;
  287. &lt;p&gt;Neem vòòr vrijdag 14 juli contact op met het bestuur als je mee wilt doen. Dit kan via Slack of via een &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;e-mail naar het bestuur&lt;/a&gt;.&lt;/p&gt;
  288. </content>
  289.  </entry>
  290.  <entry>
  291.    <title>Fronteers.nl websitebouwdag op zaterdag 29 april</title>
  292.    <link href="https://www.fronteers.nl/nl/blog/2023/04/fronteers-nl-websitebouwdag-op-zaterdag-29-april"/>
  293.    <updated>2023-04-20T00:00:00Z</updated>
  294.    <id>https://www.fronteers.nl/nl/blog/2023/04/fronteers-nl-websitebouwdag-op-zaterdag-29-april</id>
  295.    <content xml:lang="nl" type="html">&lt;p&gt;Op zaterdag 29 april gaan we weer in Utrecht verder samenwerken aan de nieuwe website van Fronteers. Iedereen die zin heeft om aan te haken is welkom. Ervaring met het werken aan de website is niet nodig, er lopen meerdere leden rond die je alles kunnen uitleggen.&lt;/p&gt;
  296. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/bijeenkomsten/2023/seven-zaal.webp&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  297. &lt;p&gt;Op zaterdag 25 maart gaan we in Utrecht verder samenwerken aan de nieuwe website van Fronteers. Iedereen die zin heeft om aan te haken is welkom. Ervaring met het werken aan de website is niet nodig, er lopen meerdere leden rond die je alles kunnen uitleggen.&lt;/p&gt;
  298. &lt;p&gt;Waarom organiseren we deze dag? Fronteers is nu al een tijd bezig met de nieuwe website, maar het vordert niet zo snel. We hopen met deze dag de site een flinke boost te geven. Misschien komt de site die dag wel af?&lt;/p&gt;
  299. &lt;p&gt;De dag houden we op zaterdag 29 april van 11:00 tot 17:00 uur. Voor drinken en een lunch wordt gezorgd. Ook als je korter langs wil komen ben je welkom.&lt;/p&gt;
  300. &lt;p&gt;De locatie is bij &lt;a href=&quot;https://www.google.com/maps/place/Restaurant+Seven/@52.0899045,5.115603,17z/data=!3m1!4b1!4m6!3m5!1s0x47c66f5b40a6e57d:0xae00eeee5182a113!8m2!3d52.0899045!4d5.1177917!16s%2Fg%2F11b7gxzjzx&quot;&gt;Seven&lt;/a&gt;, in het centrum van Utrecht, 6 minuten lopen vanaf Utrecht CS.&lt;/p&gt;
  301. &lt;p&gt;Restaurant Seven
  302. Mariaplaats 7
  303. 3511LH Utrecht&lt;/p&gt;
  304. &lt;p&gt;Wil je ook komen en ons helpen? Meld je dan aan door een mail te sturen naar &lt;a href=&quot;mailto:edwin.martin@fronteers.nl&quot;&gt;edwin.martin@fronteers.nl&lt;/a&gt;. Je hoeft alleen een laptop mee te nemen.&lt;/p&gt;
  305. &lt;p&gt;Wil je alvast een kijkje nemen? Op onze &lt;a href=&quot;https://github.com/fronteers/website&quot;&gt;GitHub-pagina&lt;/a&gt; is alle informatie te vinden.&lt;/p&gt;
  306. </content>
  307.  </entry>
  308.  <entry>
  309.    <title>Fronteers.nl websitebouwdag op zaterdag 25 maart</title>
  310.    <link href="https://www.fronteers.nl/nl/blog/2023/03/fronteers-nl-websitebouwdag-op-zaterdag-25-maart"/>
  311.    <updated>2023-03-20T00:00:00Z</updated>
  312.    <id>https://www.fronteers.nl/nl/blog/2023/03/fronteers-nl-websitebouwdag-op-zaterdag-25-maart</id>
  313.    <content xml:lang="nl" type="html">&lt;p&gt;Op zaterdag 25 maart gaan we in Utrecht verder samenwerken aan de nieuwe website van Fronteers. Iedereen die zin heeft om aan te haken is welkom. Ervaring met het werken aan de website is niet nodig, er lopen meerdere leden rond die je alles kunnen uitleggen.&lt;/p&gt;
  314. &lt;p&gt;Waarom organiseren we deze dag? Fronteers is nu al een tijd bezig met de nieuwe website, maar het vordert niet zo snel. We hopen met deze dag de site een flinke boost te geven. Misschien komt de site die dag wel af?&lt;/p&gt;
  315. &lt;p&gt;De dag houden we op zaterdag 25 maart van 11:00 tot 17:00 uur (wie wil kan tot 18:00 uur blijven). Voor drinken en een lunch wordt gezorgd. Ook als je korter langs wil komen ben je welkom.&lt;/p&gt;
  316. &lt;p&gt;De locatie is bij &lt;a href=&quot;https://www.google.com/maps/place/Restaurant+Seven/@52.0899045,5.115603,17z/data=!3m1!4b1!4m6!3m5!1s0x47c66f5b40a6e57d:0xae00eeee5182a113!8m2!3d52.0899045!4d5.1177917!16s%2Fg%2F11b7gxzjzx&quot;&gt;Seven&lt;/a&gt;, in het centrum van Utrecht, 6 minuten lopen vanaf Utrecht CS.&lt;/p&gt;
  317. &lt;p&gt;Restaurant Seven
  318. Mariaplaats 7
  319. 3511LH Utrecht&lt;/p&gt;
  320. &lt;p&gt;Wil je ook komen en ons helpen? Meld je dan aan door een mail te sturen naar &lt;a href=&quot;mailto:edwin.martin@fronteers.nl&quot;&gt;edwin.martin@fronteers.nl&lt;/a&gt;. Je hoeft alleen een laptop mee te nemen.&lt;/p&gt;
  321. &lt;p&gt;Wil je alvast een kijkje nemen? Op onze GitHub-pagina is alle informatie te vinden.&lt;/p&gt;
  322. </content>
  323.  </entry>
  324.  <entry>
  325.    <title>Fronteers Boekenclub 5 - The Programmer&#39;s Brain</title>
  326.    <link href="https://www.fronteers.nl/nl/blog/2023/03/fronteers-boekenclub-5-the-programmers-brain"/>
  327.    <updated>2023-03-10T00:00:00Z</updated>
  328.    <id>https://www.fronteers.nl/nl/blog/2023/03/fronteers-boekenclub-5-the-programmers-brain</id>
  329.    <content xml:lang="nl" type="html">&lt;p&gt;Bij de vijfde editie van de Fronteers Boekenclub lazen we &lt;a href=&quot;https://www.manning.com/books/the-programmers-brain&quot;&gt;“The Programmer’s Brain” van Felienne Hermans&lt;/a&gt;.&lt;/p&gt;
  330. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/fbc5-the-programmers-brain-felienne-hermans-200w.png&quot; alt=&quot;Omslag The Programmer&#39;s Brain: What every programmer needs to know about cognition&quot; /&gt;&lt;/p&gt;
  331. &lt;p&gt;“What every programmer needs to know about cognition”, zegt de ondertitel. Het is een beperkende titel, want het is een ontzettend interessant boek dat door heel veel meer mensen dan alleen programmeurs gelezen zou moeten worden.&lt;/p&gt;
  332. &lt;p&gt;Van ons zevenen was er maar 1 - Marrije - die zich geen programmeur zou willen noemen. Maar we hebben wel allemaal programmeerervaring. Programmeurs zijn net mensen, tenslotte; geen aparte categorie, niet slimmer of beter, niet gekker of eenkenniger.&lt;/p&gt;
  333. &lt;h2&gt;Over het boek&lt;/h2&gt;
  334. &lt;p&gt;Felienne - sommigen mogen [Fee-lie-nuh] zeggen - Hermans is &lt;a href=&quot;https://vu.nl/nl/nieuws/2022/felienne-hermans-nieuwe-hoogleraar-computer-science-education&quot;&gt;hoogleraar vakdidactiek van de informatica&lt;/a&gt; aan de VU in Amsterdam en daarnaast 1 dag in de week docent op een middelbare school in Rotterdam. Ze heeft de &lt;a href=&quot;https://hedycode.com/&quot;&gt;programmeertaal Hedy&lt;/a&gt; ontworpen, om kinderen al jong te leren programmeren.&lt;/p&gt;
  335. &lt;p&gt;Ze zei over leren programmeren: “Er zijn een paar redenen waardoor programmeren lastig is. Ten eerste moet je vaak heel veel tegelijk leren: de concepten van programmeren zoals invoer en uitvoer, of condities (de bekende if-then-else), maar ook de juiste schrijfwijze. Programmeertalen worden heel boos als je iets fout typt. Als je in Python een spatie op de verkeerde plek zet krijg je al een fout. Doordat je concepten en code tegelijk moet onthouden krijg je een cognitieve overload en onthoud je wat je leert niet zo goed.”&lt;/p&gt;
  336. &lt;p&gt;Het boek bestaat uit vier gedeelten; code lezen, over code denken, betere code schrijven, beter samenwerken. De aandachtige lezer vindt er oefeningen in, om code te lezen, te annoteren en te structureren. En tips. Wil je beter onthouden, gebruik dan &lt;a href=&quot;https://nl.wikipedia.org/wiki/Flashkaart&quot;&gt;flashcards&lt;/a&gt;, net als bij het leren van Franse woordjes.&lt;/p&gt;
  337. &lt;p&gt;Er staat een heel (goed) hoofdstuk in over hoe je dingen moet noemen. Zoals het spreekwoord zegt: “There are only two hard things in computer science: cache invalidation and naming things”. Welnu, er zijn onderzoeken genoeg gedaan naar wat ‘t beste werkt. Gebruik bijv. geen afkortingen. En liever CamelCase dan snake_case. Niet te lang, niet te kort. Consistentie is beter dan je soms wel, soms niet je aan conventies houden.&lt;/p&gt;
  338. &lt;p&gt;En verder lazen we nuttige hoofdstukken over hoe we leren, hoe werkgeheugen, korte-termijngeheugen en langetermijngeheugen samenwerken.&lt;/p&gt;
  339. &lt;p&gt;Bekijk een &lt;a href=&quot;https://www.youtube.com/watch?v=FJn6_dCp-BM&quot;&gt;presentatie door Felienne Hermans&lt;/a&gt; op YouTube.&lt;/p&gt;
  340. &lt;h2&gt;Wat we ervan vonden&lt;/h2&gt;
  341. &lt;h3&gt;Nina&lt;/h3&gt;
  342. &lt;p&gt;Ik zie mezelf als een programmeur die beter wil worden in programmeren. Het is een heel interessant boek, van hoog niveau, als een studieboek. Ik had het liever nog wat toegankelijker gehad.
  343. In dit werk vind ik het lastig dat je moet blijven leren. Door de aanmoediging in dit boek wil ik dat gestructureerder doen, met flashcards en herhalingen. Ik denk dat het dan langer blijft kleven. Dit boek leerde me dat oké is als je iets niet begrijpt; je mist gewoon nog kennis of informatie en daar kan iedereen aan werken.&lt;/p&gt;
  344. &lt;p&gt;&lt;em&gt;Oordeel: geen sterren&lt;/em&gt;, want ik heb het nog niet uit.&lt;/p&gt;
  345. &lt;h3&gt;Rosita&lt;/h3&gt;
  346. &lt;p&gt;Ik zie mezelf niet als ‘echte’ programmeur. Maar ik ben het natuurlijk wel, als ik werk met HTML, CSS, JavaScript en PHP. Ik heb het boek nog niet helemaal uit. Ik vond het Engels pittig, het wetenschappelijk jargon in het boek was soms een drempel. Maar wel een heel goed boek, confronterend. Ik heb in mijn opleiding geleerd om veel notities te maken, zodat je het aan anderen door kunt geven. Dat blijkt in werk als programmeur te helpen.
  347. Ik leer dagelijks. Ik had een JS cursus gedaan waar ik niks van snapte. Totdat ik een cursus deed die hetzelfde vertelde maar op een visuele manier, met betere handvatten. Toen snapte ik het beter. Dit boek helpt me beter begrijpen hoe mensen leren.&lt;/p&gt;
  348. &lt;p&gt;&lt;em&gt;Oordeel: 4 sterren&lt;/em&gt; - ook vanwege toegankelijk flink wat tekst, hoge informatiedichtheid&lt;/p&gt;
  349. &lt;h3&gt;Marrije&lt;/h3&gt;
  350. &lt;p&gt;Ik ben geen programmeur, echt niet. Mijn vader is programmeur. Ik ken BASIC van toen ik kind was. Verder ben ik projectmanager en informatie-architect. Ik vond dit een heel interessant en pittig boek. Voor mij waren de codevoorbeelden moeilijk toegankelijk. Het is meer een boek over hoe het brein werkt dan een boek over programmeurs. Ze legt heel duidelijk uit wat cognitive overload is; ik vond het geruststellend dat dit voor iedereen geldt. Goed is hoe ze laat zien hoe je code kunt annoteren, voor jezelf en voor anderen. Gewoon met pen en papier schetsen werkt heel goed. Daar leer je heel veel van, net als van flashcards gebruiken. Het is ook gewoon fijn om tactiel te werken. Dat helpt met begrijpen.&lt;/p&gt;
  351. &lt;p&gt;&lt;em&gt;Oordeel: 4,5 sterren&lt;/em&gt; - moeilijk maar de moeite waard.&lt;/p&gt;
  352. &lt;h3&gt;Jacqueline&lt;/h3&gt;
  353. &lt;p&gt;Ik dacht wel dat ik een programmeur was, totdat ik dit boek las. Ik kom echt vanuit een andere hoek, want de voorbeelden zijn erg technisch. Het is echt een studieboek. Wat ik heel leuk vond: het inzicht over hoe je leert. Focus is ook heel belangrijk. En de overload doordat je gestoord wordt. Het is niet gek om daarom bepaalde standaarden uit je hoofd te leren. Dit was een stimulans om toch echt te blijven studeren. Ik ga meer flashcards gebruiken; ik vond eerst dat dit iets voor op school was, maar nu weet ik dat me dit ook in m’n werk kan helpen. Dit boek kost tijd. En het zou interessant zijn om met een team te doen.&lt;/p&gt;
  354. &lt;p&gt;&lt;em&gt;Oordeel: 4 sterren&lt;/em&gt; - heel interessant, maar voelt wel als een studieboek&lt;/p&gt;
  355. &lt;h3&gt;Adam&lt;/h3&gt;
  356. &lt;p&gt;Ik vind mezelf wel een echte programmeur met 10 jaar ervaring in allerlei talen. Ik heb het als luisterboek geluisterd en als programmeur vind ik het echt het beste boek dat ik in tijden las. Beter zelfs dan ‘Clean Code’ van Uncle Bob. Veel geleerd, inspiratie voor de toekomst. Het was een eye-opener om te begrijpen waarom het moeilijk is om te schakelen tussen verschillende talen. En dat het nuttig is om afspraken te maken over conventies binnen een codebase. Het is nu ook helder voor me waarom je niet onmiddellijk een codebase kunt snappen. Commentaar in code is minder nuttig dan ik eerst dacht, dat patronen en namen zo belangrijk waren wist ik niet. Je hebt soms gewoon tijd nodig. Werkgevers die haast hebben, geven me geen goed gevoel. Ik moet het begrijpen. En dat kost tijd.&lt;/p&gt;
  357. &lt;p&gt;&lt;em&gt;Oordeel: 5 sterren&lt;/em&gt;&lt;/p&gt;
  358. &lt;h3&gt;Annemiek&lt;/h3&gt;
  359. &lt;p&gt;Wat is een programmeur? Ik weet het niet, maar als je iets met JavaScript doet ben je een programmeur. Ik ben een startende developer. Als ik niet begrijp in een codebase, dan raakt me dat. Daarom vond ik het nuttig om te lezen over het verschil tussen iets niet kunnen en iets niet weten. En dat je niet tegelijkertijd code kunt lezen en begrijpen. Wat een herkenning, en erkenning, ook dat mensen met taalgevoel betere programmeurs zijn, omdat het meer gaat om lezen dan om logica. Het was nuttig dat ze suggereerde om code eerst op te knippen en lijntjes te trekken. Het is ook goed om meer in teams naar code te kijken.
  360. Prima uitleg hoe hoe het brein werkt, met associaties, niet als een mappenstructuur.
  361. Goed dat ze zei dat je als je iets moet opzoeken dat je eerst even moet proberen het uit je geheugen kunt halen. Als oefening.&lt;/p&gt;
  362. &lt;p&gt;&lt;em&gt;Oordeel: 4,5 sterren&lt;/em&gt; - menselijk geschreven&lt;/p&gt;
  363. &lt;h3&gt;Paul&lt;/h3&gt;
  364. &lt;p&gt;Ik vrees dat ik al heel lang een programmeur ben, al ontken ik dat graag. Ik ben helemaal niet zo gesteld op logica en abstractie, ik ben een talenmens en klooi graag maar wat aan. Ik verwachtte dat het een saai boek zou zijn, maar het is echt een heel goed en interessant boek. Ik waardeerde heel erg dat Hermans aanstipte dat kunnen lezen belangrijker is dan goed zijn in logica. Het stuk over de diverse type variabelen vond ik ook erg interessant. Al met al ben ik heel blij verrast door dit boek.&lt;/p&gt;
  365. &lt;p&gt;&lt;em&gt;Oordeel: 4,5 sterren&lt;/em&gt; - ik heb veel geleerd en het boek overtrof mijn verwachtingen&lt;/p&gt;
  366. &lt;h2&gt;FBC6: dinsdag 11 april&lt;/h2&gt;
  367. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/fbc6-cathy-oneill-weapons-of-math-descruction-200w.png&quot; alt=&quot;Omslag van &#39;Weapons of Math Destruction&#39; door Cathy O&#39;Neill. Het ontwerp suggereert een explosie en je ziet een doodshoofd gevormd door nodes.&quot; /&gt;&lt;/p&gt;
  368. &lt;p&gt;Bij de zesde editie bespreken we &#39;&lt;a href=&quot;https://en.wikipedia.org/wiki/Weapons_of_Math_Destruction&quot;&gt;Weapons Of Math Destruction&lt;/a&gt;&#39; door Cathy O&#39;Neill, een boek uit 2016. De omineuze ondertitel luidt: &amp;quot;How Big Data Increases Inequality and Threatens Democracy&amp;quot;.&lt;/p&gt;
  369. &lt;p&gt;&amp;quot;WMDs, or Weapons of Math Destruction, are mathematical algorithms that supposedly take human traits and quantify them, resulting in damaging effects and the perpetuation of bias against certain groups of people.&amp;quot;&lt;/p&gt;
  370. &lt;p&gt;&lt;a href=&quot;https://www.meetup.com/fronteers-nl/events/292029379/&quot;&gt;Meld je aan via meetup.com&lt;/a&gt;.&lt;/p&gt;
  371. </content>
  372.  </entry>
  373.  <entry>
  374.    <title>Met korting naar CSS Day 2023</title>
  375.    <link href="https://www.fronteers.nl/nl/blog/2023/01/met-korting-naar-css-day-2023"/>
  376.    <updated>2023-01-20T00:00:00Z</updated>
  377.    <id>https://www.fronteers.nl/nl/blog/2023/01/met-korting-naar-css-day-2023</id>
  378.    <content xml:lang="nl" type="html">&lt;p&gt;Op 8 en 9 juni organiseert Web Conferences Amsterdam voor de negende keer &lt;a href=&quot;https://cssday.nl/&quot;&gt;CSS Day&lt;/a&gt;.&lt;/p&gt;
  379. &lt;p&gt;Zoals bij eerdere edities het geval was, krijgen Fronteers-leden korting op dit congres. Je betaalt 575 in plaats van 675 euro voor een kaartje voor beide dagen (alle bedragen exclusief BTW). Het aanbod is geldig voor mensen die op dit moment al lid zijn, en je kunt ervan gebruik maken door &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;een e-mail naar het bestuur&lt;/a&gt; te zenden. Je ontvangt dan een kortingscode waarmee je je kaart kunt kopen.&lt;/p&gt;
  380. &lt;p&gt;CSS Day vindt dit jaar plaats op donderdag 8 en vrijdag 9 juni in de &lt;a href=&quot;https://cssday.nl/2023/venue&quot;&gt;Zuiderkerk&lt;/a&gt; in Amsterdam.&lt;/p&gt;
  381. </content>
  382.  </entry>
  383.  <entry>
  384.    <title>Herfstblaadjes zien</title>
  385.    <link href="https://www.fronteers.nl/nl/blog/2022/12/herfstblaadjes-zien"/>
  386.    <updated>2022-12-24T00:00:00Z</updated>
  387.    <id>https://www.fronteers.nl/nl/blog/2022/12/herfstblaadjes-zien</id>
  388.    <content xml:lang="nl" type="html">&lt;figure class=&quot;simple-quote&quot;&gt;
  389.    &lt;div class=&quot;simple-quote_decorative-start&quot; aria-hidden=&quot;true&quot;&gt;{&lt;/div&gt;
  390.        &lt;div class=&quot;simple-quote-content&quot;&gt;
  391.            &lt;blockquote&gt;
  392. &lt;p&gt;[...] als we ons afvragen wat dit wij is, wat zien is en wat ding of wereld is, komen we terecht in een labyrint van moeilijkheden en tegenstrijdigheden. Wat Sint-Augustinus zei over de tijd — dat het voor iedereen volkomen bekend is, maar dat niemand van ons het aan de anderen kan uitleggen — moet ook van de wereld worden gezegd.&lt;/p&gt;
  393. &lt;p&gt;&lt;/p&gt;&lt;/blockquote&gt;
  394. &lt;figcaption class=&quot;simple-quote-author&quot;&gt;— Maurice Merleau-Ponty, Het Zichtbare en het Onzichtbare (1968)&lt;/figcaption&gt;
  395. &lt;/div&gt;
  396. &lt;div class=&quot;simple-quote_decorative-end&quot; aria-hidden=&quot;true&quot;&gt;}&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
  397. &lt;/figure&gt;
  398. &lt;p&gt;Afgelopen herfstvakantie was ons gezin op vakantie in de Duitse Eifel. Ons zoontje Sam was 16 maanden oud, en naast rondgesjouwd worden in de schouderdrager wilde hij graag ook zelf stukjes lopen. Sam houdt niet van schoenen, en wanneer hij deze (onder luid protest) wél aan moet, gaat hij liever kruipen dan lopen. Dus dan maar op blote voeten.&lt;/p&gt;
  399. &lt;figure class=&quot;figure&quot;&gt;
  400.    &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/afbeelding-job-1.jpeg&quot; alt=&quot;Een foto genomen op een asfalt bospad, dat zich uitstrekkend in de verte met een flauwe bocht naar rechts beweegt. Aan de linkerkant een heuvelrand, begroeid met bomen en struiken. Rechts een vangrail waarachter meer bomen te zien zijn. Het pad is bezaaid met herstbladeren. Een drietal personen, 2 volwassenen (man, vrouw) en een klein kind wandelen over het pad, met hun rug naar de camera. De man houdt het linkerhandje van het kind vast, in de rechterhand houdt het kind een herfstblaadje. De vrouw draagt een rode messenger-bag, donkere hoodie en spijkerbroek. De man draagt een platte pet, bruine jas en spijkerbroek. Het kind kijkt naar achter richting de camera, de volwassenen hebben hun blik op het kind gericht.&quot; /&gt;
  401.    &lt;figcaption class=&quot;figure__caption&quot;&gt;Aan de wandel op blote voeten. Foto: auteur.&lt;/figcaption&gt;
  402. &lt;/figure&gt;
  403. &lt;h2&gt;Blaadjes zien&lt;/h2&gt;
  404. &lt;p&gt;Tijdens deze wandelingen is elk gevallen herfstblaadje interessant. Voortdurend wordt het huidige opgeraapte blaadje verwisseld voor een ander blaadje dat de aandacht trekt. Sommige worden in stukjes gescheurd, andere blaadjes worden vluchtig bekeken en weer weggegooid.&lt;/p&gt;
  405. &lt;p&gt;Wandelingen verlopen langzaam op deze manier, maar om hem zo op zijn gemak bezig te zien met een veelvormigheid aan herfstblaadjes deed me wel afvragen: hoe ontvouwt de werkelijkheid zich voor Sam? Wat maakt juist die blaadjes interessant? Hoe ervaart hij de wereld om zich heen? En hoe heeft deze bewuste ervaring zich gevormd vanuit de “&lt;em&gt;great blooming, buzzing confusion”&lt;/em&gt; aan indrukken waarover de psycholoog William James in 1890 schreef?&lt;/p&gt;
  406. &lt;figure class=&quot;simple-quote&quot;&gt;
  407.    &lt;div class=&quot;simple-quote_decorative-start&quot; aria-hidden=&quot;true&quot;&gt;{&lt;/div&gt;
  408.        &lt;div class=&quot;simple-quote-content&quot;&gt;
  409.            &lt;blockquote&gt;
  410. &lt;p&gt;… any number of impressions, from any number of sensory sources, falling simultaneously on a mind which has not yet experienced them separately, will fuse into a single undivided object for that mind. The law is that all things fuse that can fuse, and nothing separates except what must. … The baby, assailed by eyes, ears, nose, skin, and entrails at once, feels it all as one great blooming, buzzing confusion; and to the very end of life, our location of all things in one space is due to the fact that the original extents or bignesses of all the sensations which came to our notice at once, coalesced together into one and the same space. There is no other reason than this why &#39;the hand I touch and see coincides spatially with the hand I immediately feel.&#39;&lt;/p&gt;
  411. &lt;p&gt;&lt;/p&gt;&lt;/blockquote&gt;
  412. &lt;figcaption class=&quot;simple-quote-author&quot;&gt;— William James, The Principles of Psychology (1890)&lt;/figcaption&gt;
  413. &lt;/div&gt;
  414. &lt;div class=&quot;simple-quote_decorative-end&quot; aria-hidden=&quot;true&quot;&gt;}&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
  415. &lt;/figure&gt;
  416. &lt;h2&gt;Ontwerpen keuren&lt;/h2&gt;
  417. &lt;p&gt;Vanuit mijn werk in digitale toegankelijkheid word ik soms gevraagd om een ontwerp te keuren. Vaak zijn dit ontwerpen van websites, af en toe een app. Meestal binnen omgevingen zoals &lt;em&gt;Figma&lt;/em&gt;, &lt;em&gt;Invision&lt;/em&gt; of &lt;em&gt;Adobe XD,&lt;/em&gt; maar ook in vroegere stadia zoals &lt;em&gt;creative exploration&lt;/em&gt; of abstracte wireframes. De manier waarop ik naar ontwerpen probeer te kijken doet me denken aan hoe Sam misschien wel naar de wereld kijkt.&lt;/p&gt;
  418. &lt;h2&gt;Zien&lt;/h2&gt;
  419. &lt;p&gt;In zijn onvoltooide werk “Gedachten” — Pensées — schrijft de wiskundige, natuurkundige en filosoof Blaise Pascal over twee manieren van het benaderen van de werkelijkheid: het meetkundige denken, “l’espirit de géométrie”, en het fijne inzicht, “l’espirit de finesse”.&lt;/p&gt;
  420. &lt;figure class=&quot;simple-quote&quot;&gt;
  421.    &lt;div class=&quot;simple-quote_decorative-start&quot; aria-hidden=&quot;true&quot;&gt;{&lt;/div&gt;
  422.        &lt;div class=&quot;simple-quote-content&quot;&gt;
  423.            &lt;blockquote&gt;
  424. &lt;p&gt;🇫🇷 Il y a beaucoup de différence entre l&#39;esprit de géométrie et l&#39;esprit de finesse. En l&#39;un les principes sont palpables, mais éloignés de l&#39;usage commun ; de sorte qu&#39;on a peine à tourner la tète de ce côté-là, manque d&#39;habitude : mais pour peu qu&#39;on s&#39;y tourne, on voit les principes à plein ; et il faudroit avoir tout à fait l&#39;esprit faux pour mal raisonner sur des principes si gros qu&#39;il est presque impossible qu&#39;ils échappent. 🇳🇱 Verschil tussen het meetkundige denken en het fijne inzicht. Bij het eerste zijn de beginselen tastbaar, doch liggen buiten het dagelijkse leven, zodat men moeite heeft zijn hoofd in die richting te wenden omdat men dat niet gewoon is: men hoeft er slechts op te letten en men ziet de beginselen duidelijk. En men zou al helemaal een onverstandig mens moeten zijn om verkeerd te redeneren vanuit beginselen, die zo alledaags zijn dat het haast onmogelijk is eraan voorbij te zien.&lt;/p&gt;
  425. &lt;p&gt;&lt;/p&gt;&lt;/blockquote&gt;
  426. &lt;figcaption class=&quot;simple-quote-author&quot;&gt;— Blaise Pascal, Pensées, (1669)&lt;/figcaption&gt;
  427. &lt;/div&gt;
  428. &lt;div class=&quot;simple-quote_decorative-end&quot; aria-hidden=&quot;true&quot;&gt;}&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
  429. &lt;/figure&gt;
  430. &lt;p&gt;De geometrische geest denkt voornamelijk vanuit principes, oorzaken, gevolgen, en verbanden. Geometrisch denken maakt scheidingen tussen zaken, deelt in vakken, tekent lijnen.&lt;/p&gt;
  431. &lt;p&gt;De verfijnde geest denkt voornamelijk vanuit intuïtie. Het ervaren van zaken die niet per definitie duidelijk zijn voor anderen. Verfijnd denken omvat en combineert.&lt;/p&gt;
  432. &lt;h2&gt;Bashō en Tennyson&lt;/h2&gt;
  433. &lt;p&gt;Dit verschil tussen meetkundig en verfijnd denken wordt prachtig uitgedrukt in de manier waarop de Japanse dichter Matsuo Bashō en de Britse dichter Lord Alfred Tennyson (19e eeuw) spreken over het zien van een bloem:&lt;/p&gt;
  434. &lt;figure class=&quot;simple-quote&quot;&gt;
  435.    &lt;div class=&quot;simple-quote_decorative-start&quot; aria-hidden=&quot;true&quot;&gt;{&lt;/div&gt;
  436.        &lt;div class=&quot;simple-quote-content&quot;&gt;
  437.            &lt;blockquote&gt;
  438. &lt;p&gt;🇯🇵 Yokoe mireba nazoena hana sakoe kakine kana 🇳🇱 Zie toch eens hoe het Herderstasje bij die heg in bloei staat; oh, kijk..!&lt;/p&gt;
  439. &lt;p&gt;&lt;/p&gt;&lt;/blockquote&gt;
  440. &lt;figcaption class=&quot;simple-quote-author&quot;&gt;— Matsuo Bashō (17e eeuw)&lt;/figcaption&gt;
  441. &lt;/div&gt;
  442. &lt;div class=&quot;simple-quote_decorative-end&quot; aria-hidden=&quot;true&quot;&gt;}&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
  443. &lt;/figure&gt;
  444. &lt;figure class=&quot;simple-quote&quot;&gt;
  445.    &lt;div class=&quot;simple-quote_decorative-start&quot; aria-hidden=&quot;true&quot;&gt;{&lt;/div&gt;
  446.        &lt;div class=&quot;simple-quote-content&quot;&gt;
  447.            &lt;blockquote&gt;
  448. &lt;p&gt;🇬🇧 Flower in the crannied wall, I pluck you out of the crannies, I hold you here,root and all, in my hand, Little flower — but if I could understand What you are, root and all, and all in all, I should know what God and man is. 🇳🇱 Bloem in de gebarsten muur, Ik pluk je de spleten uit. Hier houd ik je in mijn hand, wortel en al Klein bloemetje – kon ik maar bevatten wat je bent, wortel en al, en al in al, dan zou ik weten wat God en de mens is.&lt;/p&gt;
  449. &lt;p&gt;&lt;/p&gt;&lt;/blockquote&gt;
  450. &lt;figcaption class=&quot;simple-quote-author&quot;&gt;— Lord Alfred Tennyson (19e eeuw)&lt;/figcaption&gt;
  451. &lt;/div&gt;
  452. &lt;div class=&quot;simple-quote_decorative-end&quot; aria-hidden=&quot;true&quot;&gt;}&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
  453. &lt;/figure&gt;
  454. &lt;p&gt;In beide gedichten staat het zien van — de ervaring van, de ontmoeting met — een bloem centraal. Maar de manier waarop de schrijvers een bloem ervaren verschilt sterk. Er is verwondering te lezen in beide gedichten, maar waar Bashō aanschouwt en uitnodigt, begint Tennyson met geometrie: het pakken van de bloem en daaruit te willen analyseren om uiteindelijk te willen begrijpen.&lt;/p&gt;
  455. &lt;h2&gt;Niet zien&lt;/h2&gt;
  456. &lt;p&gt;Beide gedichten over de bloem veronderstellen de aanwezigheid van de bloem. Dat deze is waargenomen. En hoewel ik bij het keuren van een ontwerp me probeer te realiseren wat ik zie, is het weten wat ik &lt;em&gt;niet&lt;/em&gt; zie — en waarom — evenmin zo belangrijk. Denk bijvoorbeeld aan fenomenen zoals &lt;a href=&quot;https://en.wikipedia.org/wiki/Banner_blindness&quot;&gt;Banner Blindness&lt;/a&gt;.&lt;/p&gt;
  457. &lt;p&gt;Wat we waarnemen is al het product van onbewuste selecties: van alle optische zenuwsignalen die onze visuele cortex bereiken is er gewoonweg te veel om alles te verwerken. Er wordt geselecteerd op wat er voor ons relevant is, en dat wordt primair gestuurd vanuit onze &lt;em&gt;doelen&lt;/em&gt;.&lt;/p&gt;
  458. &lt;p&gt;Neem het beroemde experiment waarbij er een video getoond werd waarin twee groepen mensen elkaar een basketbal toespeelden. Een groep droeg donkere t-shirts, de andere groep witte. De toeschouwers hadden een doel: ze moesten het aantal keren tellen dat de bal tussen personen met een wit t-shirt werd gepasseerd. Halverwege de video liep er een vrouw in een gorilla-pak in beeld, richtte zich naar de camera, imiteerde een gorilla door zichzelf op de borst te slaan, en liep verder. De helft van de toeschouwers bleek later de “gorilla” niet te hebben gezien.&lt;/p&gt;
  459. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/afbeelding-job-2.png&quot; alt=&quot;Een scene van een ruimte: op de achtergrond 3 liften. Verspreid door de ruimte staan verscheidene mensen in witte en zwarte t-shirts. Twee mensen in witte t-shirts staan dichtbij de camera, naar elkaar toe gericht. De rechterpersoon is licht door de knieën gebogen en houdt een bruine basketbal vast. In het midden van de ruimte staat een persoon in een gorillapak, kijkend naar de camera.&quot; /&gt;&lt;/p&gt;
  460. &lt;p&gt;&lt;em&gt;Een frame uit &lt;a href=&quot;https://www.youtube.com/watch?v=vJG698U2Mvo&quot;&gt;de video die bij een van de selectieve-aandacht experimenten werd gebruikt&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
  461. &lt;figure class=&quot;simple-quote&quot;&gt;
  462.    &lt;div class=&quot;simple-quote_decorative-start&quot; aria-hidden=&quot;true&quot;&gt;{&lt;/div&gt;
  463.        &lt;div class=&quot;simple-quote-content&quot;&gt;
  464.            &lt;blockquote&gt;
  465. &lt;p&gt;Approximately half of observers fail to notice an ongoing and highly salient but unexpected event while they are engaged in a primary monitoring task. This extends the phenomenon of inattentional blindness by at least an order of magnitude in the duration of the event that can be missed.&lt;/p&gt;
  466. &lt;p&gt;&lt;/p&gt;&lt;/blockquote&gt;
  467. &lt;figcaption class=&quot;simple-quote-author&quot;&gt;— Daniel Simons &amp;amp; Christopher Chabris, Gorillas in our midst: Sustained inattention blindness for dynamic events (1999)&lt;/figcaption&gt;
  468. &lt;/div&gt;
  469. &lt;div class=&quot;simple-quote_decorative-end&quot; aria-hidden=&quot;true&quot;&gt;}&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
  470. &lt;/figure&gt;
  471. &lt;p&gt;De selectieve perceptie binnen ons bewustzijn fungeert als een zoeklicht — de fenomenoloog Edmund Husserl noemde dit het &lt;em&gt;Ichlicht,&lt;/em&gt; de “ik-lamp”: ons &lt;a href=&quot;https://plato.stanford.edu/entries/consciousness-intentionality/&quot;&gt;bewustzijn is altijd ergens op gericht&lt;/a&gt;, en daardoor zien we andere dingen niet, zoals het experiment demonstreert.&lt;/p&gt;
  472. &lt;p&gt;Het komt ook voor dat we meer in staat geraken om dingen waar te nemen doordat anderen dit doen. Een mooi voorbeeld hiervan is dat de ontdekking van de onverwachte planeet Uranus leidde tot meer ontdekkingen door een verschuiving van het mentaal kunnen kijken naar de werkelijkheid:&lt;/p&gt;
  473. &lt;figure class=&quot;simple-quote&quot;&gt;
  474.    &lt;div class=&quot;simple-quote_decorative-start&quot; aria-hidden=&quot;true&quot;&gt;{&lt;/div&gt;
  475.        &lt;div class=&quot;simple-quote-content&quot;&gt;
  476.            &lt;blockquote&gt;
  477. &lt;p&gt;It was William Herschel’s discovery of Uranus in 1781, for example, the first discovery of a hitherto unknown planet in several millennia, that made astronomers mentally ready to notice additional ones, 67 as evidenced by the exceptionally rapid successive discoveries of the hitherto undetected four largest asteroids by three different astronomers between 1801 and 1807.&lt;/p&gt;
  478. &lt;p&gt;&lt;/p&gt;&lt;/blockquote&gt;
  479. &lt;figcaption class=&quot;simple-quote-author&quot;&gt;— Eviatar Zerubavel, Hidden in Plain Sight (2015)&lt;/figcaption&gt;
  480. &lt;/div&gt;
  481. &lt;div class=&quot;simple-quote_decorative-end&quot; aria-hidden=&quot;true&quot;&gt;}&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
  482. &lt;/figure&gt;
  483. &lt;p&gt;Hoe de mogelijkheid tot &lt;em&gt;zien&lt;/em&gt; en &lt;em&gt;niet-zien&lt;/em&gt; door cultuur en opvoeding kan worden beïnvloed, wordt ook prachtig beschreven door de taalkundige en oud-missionair &lt;a href=&quot;https://en.wikipedia.org/wiki/Daniel_Everett&quot;&gt;Daniel Everett&lt;/a&gt; in het boek “Don’t Sleep, There Are Snakes”. Hierin vertelt hij over zijn leven bij de Amazoniaanse Pirahã stam:&lt;/p&gt;
  484. &lt;p&gt;Daniel Everett, _Don’t Sleep, There Are Snakes: Life and Language in the Amazonian Jungle (2008)&lt;/p&gt;
  485. &lt;p&gt;It was still around seventy-two degrees, though humid, far below the hundred-degree-plus heat of midday. I was rubbing the sleep from my eyes. I turned to Kohoi, my principal language teacher, and asked, &amp;quot;What&#39;s up?&amp;quot; He was standing to my right, his strong, brown, lean body tensed from what he was looking at.&lt;/p&gt;
  486. &lt;p&gt;&amp;quot;Don&#39;t you see him over there?&amp;quot; he asked impatiently. &amp;quot;Xigagai, one of the beings that lives above the clouds, is standing on the beach yelling at us, telling us he will kill us if we go to the jungle.&amp;quot;&lt;/p&gt;
  487. &lt;p&gt;&amp;quot;Where?&amp;quot; I asked. &amp;quot;I don&#39;t see him.&amp;quot;&lt;/p&gt;
  488. &lt;p&gt;&amp;quot;Right there!&amp;quot; Kohoi snapped, looking intently toward the middle of the apparently empty beach.&lt;/p&gt;
  489. &lt;p&gt;&amp;quot;In the jungle behind the beach?&amp;quot;&lt;/p&gt;
  490. &lt;p&gt;&amp;quot;No! There on the beach. Look!&amp;quot; he replied with exasperation.&lt;/p&gt;
  491. &lt;p&gt;In the jungle with the Pirahas I regularly failed to see wildlife they saw. My inexperienced eyes just weren&#39;t able to see as theirs did.&lt;/p&gt;
  492. &lt;p&gt;But this was different. Even I could tell that there was nothing on that white, sandy beach no more than one hundred yards away. And yet as certain as I was about this, the Pirahas were equally certain that there was something there. Maybe there had been something there that I just missed seeing, but they insisted that what they were seeing, Xigagaí, was still there.&lt;/p&gt;
  493. &lt;p&gt;Everyone continued to look toward the beach. I heard Kristene, my six-year-old daughter, at my side.&lt;/p&gt;
  494. &lt;p&gt;&amp;quot;What are they looking at, Daddy?&amp;quot;&lt;/p&gt;
  495. &lt;p&gt;&amp;quot;I don&#39;t know. I can&#39;t see anything.&amp;quot;&lt;/p&gt;
  496. &lt;h2&gt;Te veel zien&lt;/h2&gt;
  497. &lt;p&gt;De ervaring van Everett bij de Pirahā is vergelijkbaar met het probleem binnen AI en computerzicht: AI beeldherkenning is notoir slecht in het herkennen van zaken die voor de AI niet of onduidelijk bestaan. Net zoals Everett Xigagaí gewoonweg niet &lt;em&gt;kan&lt;/em&gt; zien (en de Pirahã vergelijkbaar verkeerssignalen en markeringen niet &lt;em&gt;zagen&lt;/em&gt; toen enkelen van hen met Everett naar een nabijgelegen stad reisden) is een AI engine niet in staat om dingen te zien die het model niet begrijpt of kent.&lt;/p&gt;
  498. &lt;p&gt;Dit “begrip van de wereld” probleem is onderdeel van het &lt;a href=&quot;https://plato.stanford.edu/entries/frame-problem/&quot;&gt;Frame Problem&lt;/a&gt;. De cognitief wetenschapper en filosoof &lt;a href=&quot;https://nl.wikipedia.org/wiki/Daniel_Dennett&quot;&gt;Daniel Dennett&lt;/a&gt; schrijft over de opgave om een AI systeem te bouwen wat op elk moment uit de werkelijkheid die het ervaart de &lt;em&gt;juiste&lt;/em&gt; patronen weet te herkennen, en conclusies te trekken zonder in eindeloze verwerking terecht te komen waarbij de juiste aannames over de wereld worden gebruikt. Dennett beschrijft op humoristische wijze hoe een voor mensen relatief &lt;a href=&quot;https://www.youtube.com/watch?v=cDA3_5982h8&quot;&gt;eenvoudige taak als een boterham smeren&lt;/a&gt; voor een AI een onoverkomelijk moeilijk probleem kan zijn. Hoe weet de AI (met zogenaamde &lt;a href=&quot;https://nl.wikipedia.org/wiki/Kunstmatige_algemene_intelligentie&quot;&gt;AGI&lt;/a&gt; - “algemene intelligentie”) dat het temperatuurverschil in de kamer waar het zich bevindt niet relevant is voor de opdracht die het moet uitvoeren — of het feit dat er op dat moment geen olifanten in de buurt zijn?
  499. Een model als &lt;a href=&quot;https://en.wikipedia.org/wiki/GPT-3&quot;&gt;GPT-3&lt;/a&gt; is tot indrukwekkende resultaten in staat, maar handelt exclusief binnen het gebied van taalkundige verwerking en valt daardoor onder &lt;a href=&quot;https://en.wikipedia.org/wiki/Weak_artificial_intelligence&quot;&gt;narrow AI&lt;/a&gt;.&lt;/p&gt;
  500. &lt;p&gt;Daniel Dennett, Cognitive Wheels: The Frame Problem of AI (1984)&lt;/p&gt;
  501. &lt;p&gt;What is needed is a system that genuinely ignores most of what it knows, and operates with a well-chosen portion of its knowledge at any moment. Well-chosen, but not chosen by exhaustive consideration. How, though, can you give a system rules for ignoring - or better, since explicit rule-following is not the problem, how can you design a system that reliably ignores what it ought to ignore under a wide variety of different circumstances in a complex action environment?&lt;/p&gt;
  502. &lt;p&gt;En hoewel wij mensen er in vergelijking met AI vreselijk goed in zijn om de complexe werkelijkheid tot de voor ons relevante patronen terug te brengen — iets dat we ons zelden beseffen — probeer ik me er bij het keuren van een ontwerp van bewust te zijn dat ik in patronen en heuristiek naar een ontwerp kijk, en dat dit voor anderen kan verschillen. Ik probeer te schakelen in de manier waarop ik naar het ontwerp kijk, en me voor te stellen hoe dit voor anderen en hun context en doelen zou kunnen zijn. Ik probeer te schakelen tussen manieren van waarnemen, &lt;em&gt;á la&lt;/em&gt; Pascal.&lt;/p&gt;
  503. &lt;h2&gt;Anders zien&lt;/h2&gt;
  504. &lt;p&gt;Als ik naar de Grand Canyon kijk, kan ik dit op meerdere manieren zien. Als enorm ravijn, als scheur in een landschap, en als doorsnede van een vreselijk oude planeet.&lt;/p&gt;
  505. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/afbeelding-job-3.png&quot; alt=&quot;Een rij van 3 foto’s van de Grand Canyon. De meest linkse is een hoog genomen luchtfoto, waarin de GC als scheur door het landschap trekt. De middelste foto is genomen vanaf de rand van een plek in de GC, een groot ravijn tonend waar onderin een rivier loopt. De rechtse foto toont een wand van de GC waarin de verscheidene aardlagen duidelijk zichtbaar worden.&quot; /&gt;&lt;/p&gt;
  506. &lt;p&gt;&lt;em&gt;Meerdere manieren om naar de Grand Canyon te kijken.&lt;/em&gt;&lt;/p&gt;
  507. &lt;p&gt;Als toeristen-attractie. Als geologisch fenomeen. En ga zo maar door.&lt;/p&gt;
  508. &lt;p&gt;Wanneer ik zo actief aan het &lt;em&gt;perception-switchen&lt;/em&gt; ben merk ik dat het me helpt om een ontwerp anders te zien, en me beter voor te stellen hoe een gedeelte verkeerd begrepen zou kunnen worden, of onduidelijk is. Ik probeer dingen terug te brengen tot hun essentie, tot datgene wat ze maakt dat ze zijn. Van knop, tot navigatiebalk, tot blogpost.&lt;/p&gt;
  509. &lt;p&gt;Wat maakt bijvoorbeeld dat een knop een knop is? Dat is geen eenvoudige vraag. Om Pascal er weer bij te halen: je kunt een vraag als deze beantwoorden via het meetkundige denken — de plaats, contrast, tekst, grootte — maar ook met de &lt;em&gt;verfijnde geest:&lt;/em&gt; &lt;a href=&quot;https://www.jstor.org/stable/41682743#metadata_info_tab_contents&quot;&gt;waarom vind ik dit een knop&lt;/a&gt;?&lt;/p&gt;
  510. &lt;p&gt;Hart &amp;amp; Hegeman Manufactoring Corporation, Push Switch (1905)&lt;/p&gt;
  511. &lt;p&gt;First and foremost, buttons should easily bend to the will of their operators; they should cause no difficulty for pressers …&lt;/p&gt;
  512. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/afbeelding-job-4.png&quot; alt=&quot;Een horizontale serie afbeeldingen van verschillende knoppen. Van links naar rechts: een fysieke drukknop van plastic met groot rond drukvlak; een tekst-knop gemaakt van zwarte tekst &amp;quot;&amp;quot; op grijze achtergrond; een grafische knop met zwarte gecentreerde tekst &amp;quot;OK&amp;quot; op grijze achtergrond; een blauwe knop met zwarte gecentreerde tekst &amp;quot;Button&amp;quot;, waarbij de knop ronde hoeken heeft en een diepte-effect vertoont; een knop met paars-blauw-groen gradient achtergrond en de zwarte gecentreerde tekst &amp;quot;button&amp;quot;.&quot; /&gt;&lt;/p&gt;
  513. &lt;p&gt;Maar vergeet het experiment met de gorilla niet: we bekijken, filteren en verwerken de werkelijkheid afhankelijk van onze doelen. Dus ook: verwacht ik daar een knop?&lt;/p&gt;
  514. &lt;h2&gt;Een “plek om van af te vallen” en een “plek om van af te stappen”&lt;/h2&gt;
  515. &lt;p&gt;In zijn boek “The Ecological Approach to Visual Perception” schrijft psycholoog James Gibson (bekend van het begrip &lt;em&gt;&lt;a href=&quot;https://en.wikipedia.org/wiki/Affordance&quot;&gt;affordance&lt;/a&gt;,&lt;/em&gt; hoewel deze term is terug te voeren naar &lt;a href=&quot;https://nl.wikipedia.org/wiki/Kurt_Lewin&quot;&gt;Kurt Lewin&lt;/a&gt;’s &amp;quot;Aufforderungscharakter”) onder andere over hoe wezens de omgeving om hen heen waarnemen:&lt;/p&gt;
  516. &lt;p&gt;James Gibson, The Ecological Approach to Visual Perception (1979)&lt;/p&gt;
  517. &lt;p&gt;A &lt;em&gt;brink&lt;/em&gt;, the edge of a cliff, is a very significant terrain feature. It is a falling-off place. It affords injury and therefore needs to be perceived by a pedestrian animal. The edge is dangerous, but the near surface is safe. Thus, there is a principle for the control of locomotion that involves what I will call the edge of danger and a gradient of danger, that is, the closer to the brink the greater the danger. This principle is very general.&lt;/p&gt;
  518. &lt;p&gt;A step, or stepping-off place, differs from a brink in size, relative to the size of the animal. It thus affords pedestrian locomotion. A stairway, a layout of adjacent steps, affords both descent and ascent. Note that a stairway consists of convex edges and concave corners alternating, in the nomenclature here employed.&lt;/p&gt;
  519. &lt;p&gt;Deze manier van de omgeving waarnemen — als iets dat &lt;em&gt;faciliteert:&lt;/em&gt; af-vallen, of af-stappen — probeer ik ook toe te passen op de manier waarop ik naar een ontwerp of een interface kijk. Dat betekent concreet dat ik probeer te zien wat het element van de interface betekent voor mij als gebruiker.&lt;/p&gt;
  520. &lt;p&gt;Dus niet alleen sign-up-formulier, maar ook &lt;em&gt;uitnodiging om lid te worden,&lt;/em&gt; en &lt;em&gt;plek om informatie te delen&lt;/em&gt;. Niet alleen &lt;em&gt;link,&lt;/em&gt; ook &lt;em&gt;navigatie, verplaatsing,&lt;/em&gt; en in het geval van bijvoorbeeld een link “view comments” ook interpretaties als &lt;em&gt;“plek met bijdragen”,&lt;/em&gt; waaruit wellicht de vraag komt of het relevant is dat de hoeveelheid comments er bij wordt vermeld, en waarom er comments mogelijk zijn, hoe dat past in de rest van de interface, en zo verder.&lt;/p&gt;
  521. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/afbeelding-job-5.png&quot; alt=&quot;Een foto van een baby die richting een vrouw kruipt. De baby kruipt binnen een houten vierkante frameconstructie met glazen bodem waarvan de helft door een geblokt patroon bedekt is. De vrouw staat buiten het houten frame en nodigt de baby lachend uit om naar haar toe te kruipen. De baby is bijna halverwege en begint de doorzichtige helft van de ondergrond te bereiken.&quot; /&gt;&lt;/p&gt;
  522. &lt;p&gt;&lt;em&gt;Een foto van het &lt;a href=&quot;https://en.wikipedia.org/wiki/Visual_cliff&quot;&gt;“Visual Cliff” experiment van Eleanor J. Gibson uit 1960&lt;/a&gt;. Is het een plaats om af te vallen, of af te stappen? Het doel van het kind is uiteindelijk om de moeder te bereiken. Hoe ervaart het kind de werkelijkheid?&lt;/em&gt;&lt;/p&gt;
  523. &lt;p&gt;Deze “reducerende geest” die voortdurend de vraag stelt “waar kijk ik naar, en welke ervaring heb ik hierbij?” is terug te vinden in de kunsten. Zie bijvoorbeeld hoe een &lt;a href=&quot;https://nl.wikipedia.org/wiki/Tronie_(schilderkunst)&quot;&gt;tronie&lt;/a&gt; zoals het &lt;em&gt;Meisje met de Parel&lt;/em&gt; een grotere gelijkenis vertoont met de zintuigelijke ervaring, terwijl het kubisme van Picasso experimenteert met herkenbaarheid, vormen en patronen. De &lt;em&gt;Black Square&lt;/em&gt; van Malevich en &lt;em&gt;Composition II in Red, Blue and Yellow&lt;/em&gt; van Mondriaan stellen ons steeds weer de vraag over wat het is om naar pure vormen, lijnen en kleuren te kijken en wat dit met ons doet.&lt;/p&gt;
  524. &lt;p&gt;Een iconische meubel zoals de &lt;em&gt;Zig-Zag Stoel&lt;/em&gt; van Rietveld doet dit vergelijkbaar. We zien waarschijnlijk dat het een stoel is. Maar waarom? Wanneer is dit niet langer het geval? Voor wie is dit geen herkenbare, of zelfs bruikbare stoel?&lt;/p&gt;
  525. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/afbeelding-job-6.png&quot; alt=&quot;5 afbeeldingen in een horizontale rij. 1: een schilderij van een jong blank meisje, en profil in linkerrichting. Ze draagt een blauw met gele tulband, haar gezicht lichtjes naar de camera gedraaid. Ze draagt een kleine parel in haar linker-oor. 2: een cubistische weergave van een vrouw die een mandoline bespeelt. 3: een zwart vlak omlijnd door een wit vlak in de ratio 1:3. 4: Een grid met meerdere vierkanten in verscheidene groottes. 3 zijn gekleurd: rechtsboven (rood), rechtsonder (geel) en linksonder (blauw). De anderen zijn wit, en elk vierkant is gescheiden van het andere door een dikke zwarte lijn. 5: een houten stoel samengesteld uit 4 vierkante platen die aan elkaar bevestigd zijn zodat 1 platte de &amp;quot;voet&amp;quot; vormt, 1 platte het zitvlak, 1 staande de rugleuning, en 1 verbindt het zitvlak en voet.&quot; /&gt;&lt;/p&gt;
  526. &lt;p&gt;&lt;em&gt;Van links naar rechts: Meisje met de Parel, Johannes Vermeer; Girl with a Mandolin, Pablo Picasso; Black Square, Kazimir Malevich; Composition II in Red, Blue, and Yellow, Piet Mondriaan; Zig-Zag Stoel, Gerrit Rietveld.&lt;/em&gt;&lt;/p&gt;
  527. &lt;p&gt;Dit raakt aan zowel &lt;a href=&quot;https://nl.wikipedia.org/wiki/Ontologie_(filosofie)&quot;&gt;ontologie&lt;/a&gt; — de categorieën van het Zijn — als aan &lt;a href=&quot;https://nl.wikipedia.org/wiki/Fenomenologie&quot;&gt;fenomenologie&lt;/a&gt;: wat is het om te ervaren? Welke categorieën en beelden komen in ons op wanneer we kijken, wanneer we lezen?&lt;/p&gt;
  528. &lt;h2&gt;Merels zien&lt;/h2&gt;
  529. &lt;p&gt;Wallace Stevens, Thirteen Ways of Looking at a Blackbird [stanzas I, II, VII] (1954)&lt;/p&gt;
  530. &lt;p&gt;Among twenty snowy mountains,&lt;/p&gt;
  531. &lt;p&gt;The only moving thing&lt;/p&gt;
  532. &lt;p&gt;Was the eye of the blackbird.&lt;/p&gt;
  533. &lt;p&gt;I was of three minds,&lt;/p&gt;
  534. &lt;p&gt;Like a tree&lt;/p&gt;
  535. &lt;p&gt;In which there are three blackbirds.&lt;/p&gt;
  536. &lt;p&gt;O thin men of Haddam,&lt;/p&gt;
  537. &lt;p&gt;Why do you imagine golden birds?&lt;/p&gt;
  538. &lt;p&gt;Do you not see how the blackbird&lt;/p&gt;
  539. &lt;p&gt;Walks around the feet&lt;/p&gt;
  540. &lt;p&gt;Of the women about you?&lt;/p&gt;
  541. &lt;p&gt;Goede kans dat tijdens het lezen van deze 3 stanza’s er allerlei beelden door je hoofd schoten. Van bergen, vogels, bomen en meer. Hoe zagen die bomen er uit?&lt;/p&gt;
  542. &lt;p&gt;Binnen de cognitieve psychologie wordt een mentale categorie (zoals “vogel”) een concept genoemd. In het geval dat je je een voorstelling maakt van een voorbeeld binnen de categorie heet dit een prototype. Deze worden beïnvloed door je ervaringen: binnen de categorie “vogel” zul je eerder aan een kraai, roodborstje, meeuw of adelaar denken dan aan een pinguïn.&lt;/p&gt;
  543. &lt;p&gt;Binnen de fenomenologie is dit vergelijkbaar met de essentie van een ding: de fundamentele manier waarop het in je bewustzijn bestaat. Wanneer je bijvoorbeeld over een boom nadenkt, heeft die boom in je bewustzijn meerdere dimensies. Een voorkant, een achterkant. Ook al is de fysieke boom waar je naar kijkt op dat moment voor jou alleen van 1 kant te bekijken.&lt;/p&gt;
  544. &lt;p&gt;En ook al mocht je niet naar een &lt;em&gt;daadwerkelijke boom&lt;/em&gt; kijken — misschien is het wel een als boom verklede front-end ontwikkelaar — in je bewustzijn is de essentie van het &lt;em&gt;ding&lt;/em&gt; nog steeds een boom.&lt;/p&gt;
  545. &lt;p&gt;Dit alles geldt ook voor een knop. Een navigatiebalk. Een invoerformulier. Wanneer je aan een “OK knop” denkt, heb je daar een bepaald beeld en verwachting bij. Bij het doelmatig verkennen van een ontwerp filter je daar op. Zoals je op zoek gaat naar dat éne stukje Lego. Zo probeer ik me bij het keuren van een ontwerp ook nadrukkelijk bewust te zijn van de onbewuste verwachtingspatronen die ik hanteer. Paradoxaal als dat klinkt.&lt;/p&gt;
  546. &lt;p&gt;Ludwig Wittgenstein, Filosofische Onderzoekingen (1953) (geparafraseerd)&lt;/p&gt;
  547. &lt;p&gt;De aspecten van de dingen die voor ons het meest belangrijk zijn blijven ons door hun eenvoud en alledaagsheid verborgen. (Je merkt het niet op — omdat je het altijd voor ogen hebt.) De echte grondbeginselen van ons onderzoek vallen ons niet op.&lt;/p&gt;
  548. &lt;h2&gt;Symbolen zien&lt;/h2&gt;
  549. &lt;p&gt;Tijdens het kijken naar een ontwerp komen er veelvuldig symbolen en iconen voorbij. Ik probeer me hierbij bewust te zijn van de &lt;a href=&quot;https://en.wikipedia.org/wiki/Semiotics_of_culture&quot;&gt;cultuursemiotiek&lt;/a&gt; — &lt;em&gt;waarom&lt;/em&gt; ik bepaalde symbolen kan interpreteren — en tot in hoeverre de symbolen kunnen bijdragen aan de begrijpbaarheid van het ontwerp. En hoewel het ▶️ ”play” symbool binnen de context van een video bijna universeel begrepen wordt, geef ik er nog steeds de voorkeur aan om er tekst bij te plaatsen. Andersom kunnen symbolen de begrijpbaarheid van tekst vergroten:&lt;/p&gt;
  550. &lt;p&gt;Susan B. Barnes: An Introduction to Visual Communication: From Cave Art to Second Life (2nd edition) (2011) - mijn nadruk.&lt;/p&gt;
  551. &lt;p&gt;Today, people are more visually wired. They follow directions with text and graphics 323% better than with text alone. Images are also more persuasive. … In electronic contexts—including computer screens, the World Wide Web, multimedia environments, and virtual reality—the use of visual icons can be compared to written language because visual icons execute computer commands […] understanding the relationship between iconic desktops and physical ones is a key concept behind user-friendly metaphors.&lt;/p&gt;
  552. &lt;p&gt;Masoud Yazdani, Iconic Communication [chapter 6: Communication Through Icons, by Philip Barker and Paul van Schaik] (2000)&lt;/p&gt;
  553. &lt;p&gt;The argument that we should consider the combination of text and icon as a solution to our communicative objective may be a positive step forward. Is it not true that we see in our everyday life people combining spoken language with gestures, hand and eye movements, intonational variations?&lt;/p&gt;
  554. &lt;h2&gt;Kom en zie&lt;/h2&gt;
  555. &lt;p&gt;Uiteindelijk beschouw ik het keuren van een ontwerp als een existentiële handeling. Het vertelt me iets over een ander, of anderen: zij die het ontwerp tot stand brachten. Het zegt iets over hun kijk op de wereld, en hoe een spectrum van mogelijke doelen door hen naar een ontwerp wordt vertaald.&lt;/p&gt;
  556. &lt;p&gt;Tegelijkertijd vertelt het me ook over mijzelf: de dingen die ik zie (of niet zie) bij het ervaren van het ontwerp. Het schrijven van het rapport dwingt me om deze ervaring — en de daaruit voortvloeiende observaties — in concrete taal op te schrijven. Om na te denken over datgene waar ik precies naar kijk en hoe ik tot die conclusie kom.&lt;/p&gt;
  557. &lt;p&gt;Zo gezien (sorry) is ontwerp-keuring een voortdurende dialoog op meerdere aspecten. Een dialoog met een toekomstig gebruiksscenario: wat kan hier misgaan? En op welke manieren en waardoor? Welke perspectieven kan ik hanteren om het ontwerp anders te zien? Van welke dingen ben ik me misschien minder of niet bewust?&lt;/p&gt;
  558. &lt;figure class=&quot;simple-quote&quot;&gt;
  559.    &lt;div class=&quot;simple-quote_decorative-start&quot; aria-hidden=&quot;true&quot;&gt;{&lt;/div&gt;
  560.        &lt;div class=&quot;simple-quote-content&quot;&gt;
  561.            &lt;blockquote&gt;
  562. &lt;p&gt;One sees the environment not with the eyes but with the eyes-in-the-head-on-the-body-resting-on-the-ground.&lt;/p&gt;
  563. &lt;p&gt;&lt;/p&gt;&lt;/blockquote&gt;
  564. &lt;figcaption class=&quot;simple-quote-author&quot;&gt;— James Gibson&lt;/figcaption&gt;
  565. &lt;/div&gt;
  566. &lt;div class=&quot;simple-quote_decorative-end&quot; aria-hidden=&quot;true&quot;&gt;}&lt;/div&gt;&lt;p&gt;&lt;/p&gt;
  567. &lt;/figure&gt;
  568. &lt;p&gt;Wat we zien, en niet zien. De herfst, het bos, het asfaltpad. Je vrouw. Je zoontje. Blote voetjes. Een vuistje met herfstblaadje.&lt;/p&gt;
  569. &lt;p&gt;Hoe ik dit alles concreet toepas tijdens het samenstellen van een keuringsrapport schrijf ik in een vervolg. 🍂&lt;/p&gt;
  570. &lt;p&gt;Met dank aan &lt;a href=&quot;https://boeddhistischdagblad.nl/auteurs/30649-column-dick/&quot;&gt;Dick Verstegen&lt;/a&gt;. Alle afbeeldingen via Wikipedia behalve wanneer anders vermeld.&lt;/p&gt;
  571. </content>
  572.  </entry>
  573.  <entry>
  574.    <title>A Design Token Carol</title>
  575.    <link href="https://www.fronteers.nl/nl/blog/2022/12/a-design-token-carol"/>
  576.    <updated>2022-12-23T00:00:00Z</updated>
  577.    <id>https://www.fronteers.nl/nl/blog/2022/12/a-design-token-carol</id>
  578.    <content xml:lang="nl" type="html">&lt;p&gt;Design Tokens implementeren. Waarom zou je eraan willen beginnen? Welke mogelijkheden zijn er? En wat komt men zoal tegen tijdens de implementatie ervan?&lt;/p&gt;
  579. &lt;p&gt;Het is bijna kerst en als ik denk aan kerst, denk ik aan ‘A Christmas Carol’ van Charles Dickens. Eigenlijk denk ik dan ook altijd aan Harry Potter. Elke kerst kijk ik weer een keer alle Harry Potter films. Maar omdat Harry’s Design Tokens niet zo lekker klinkt en ik 7 delen wat lang vind houd ik het bij de 3 delen van ‘a Christmas Carol’. En met dat kerstverhaal in gedachten, schrijf ik dit verhaal met behulp van de 3 design token geesten:&lt;/p&gt;
  580. &lt;ol&gt;
  581. &lt;li&gt;De geest van de tijd toen we nog niet wisten wat design tokens waren&lt;/li&gt;
  582. &lt;li&gt;De geest van de huidige tijd nu we design tokens implementeren&lt;/li&gt;
  583. &lt;li&gt;De geest van de toekomst die ons laat zien wat we met design tokens kunnen bereiken&lt;/li&gt;
  584. &lt;/ol&gt;
  585. &lt;h2&gt;De tijd toen we nog niet wisten wat design tokens waren&lt;/h2&gt;
  586. &lt;p&gt;De eerste geest neemt ons mee naar de tijd toen we nog niet wisten wat design tokens waren.&lt;/p&gt;
  587. &lt;ul&gt;
  588. &lt;li&gt;Toen gebruikten we nog SCSS- en CSS variabelen door elkaar heen.&lt;/li&gt;
  589. &lt;li&gt;We hadden variabelen voor alle design system kleuren. We hadden ook al variabelen voor lettertypen en scherm groottes. Maar nog niet voor de verschillende lagen, maatvoering en schaduwen van componenten.&lt;/li&gt;
  590. &lt;li&gt;Bij een rebranding werden er nieuwe kleurnamen bedacht met nieuwe waardes. En dan was het een stoelendans om de nieuwe kleuren op de verouderde kleuren te plotten en ervoor te zorgen dat het design system in overeenstemming met oudere versies bleef.&lt;/li&gt;
  591. &lt;/ul&gt;
  592. &lt;p&gt;Er miste nog iets; een structuur voor de benaming van de kleinste herbruikbare onderdelen van het design system. Een methode om die onderdelen te definiëren en te gebruiken in elke technische implementatie. Met als doel de technische implementatie(s) zo agnostisch, droog(DRY) mogelijk en direct overal te kunnen updaten wanneer er wijzigingen zijn.&lt;/p&gt;
  593. &lt;p&gt;Voor die redenen zijn Design Tokens bedacht. Design Tokens zijn de kleinste ondeelbare delen van een design system zoals kleuren, tussenruimte en lettergrootte. Design tokens zijn gecreëerd door het Salesforce design system team, en de naam is ook door dat team bedacht.&lt;/p&gt;
  594. &lt;blockquote&gt;
  595. &lt;p&gt;Design Tokens are a methodology. IMHO, saying &amp;quot;design tokens are just variables&amp;quot; is like saying &amp;quot;responsive design is just media queries&amp;quot;. It&#39;s a technology-agnostic architecture and process for scaling design across multiple platforms and devices, including native, and more.&lt;/p&gt;
  596. &lt;/blockquote&gt;
  597. &lt;p&gt;In 2019 is ‘&lt;a href=&quot;https://www.w3.org/community/design-tokens/&quot;&gt;The Design Tokens Community Group&lt;/a&gt;’ opgericht. Het doel van deze groep is om standaarden te creëeren, waarop producten en design software kunnen steunen voor het delen van de styling onderdelen van een design system.&lt;/p&gt;
  598. &lt;h2&gt;Vandaag&lt;/h2&gt;
  599. &lt;p&gt;De tweede geest neemt ons mee naar het nu. De tijd waarin we bezig zijn om design tokens te implementeren. Design Token standaarden zijn nog niet definitief. En tot die tijd zijn er verschillende mogelijkheden om uit te kiezen en om mee te werken. De opbouw en stappen die men daarin volgt zijn overal wel hetzelfde:&lt;/p&gt;
  600. &lt;h2&gt;1. Structuur en Opbouw&lt;/h2&gt;
  601. &lt;p&gt;Er zijn verschillende manieren om de taxonomie van design tokens in te richten. Zo een structuur zorgt ervoor dat wanneer (nieuwe) tokens geïntroduceerd worden deze dezelfde opbouw hebben. Een voorbeeld vind je in de afbeelding hieronder. Daar bestaat een token altijd uit een design system naam en categorie en zal een token meestal ook een modifier bevatten. &lt;a href=&quot;https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676&quot;&gt;Bron&lt;/a&gt;&lt;/p&gt;
  602. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/blog-nina-1.png&quot; alt=&quot;Een voorbeeld van een structuur van de naamgeving van design tokens&quot; /&gt;&lt;/p&gt;
  603. &lt;h2&gt;2. Naamgeving&lt;/h2&gt;
  604. &lt;p&gt;Elk design system dat ik ben tegen gekomen hanteert weer andere conventies voor de naamgeving van tokens. Zo maakt &lt;a href=&quot;https://www.notion.so/2317415513144ecc9ff32b5160254bcb&quot;&gt;Adobe Spectrum&lt;/a&gt; gebruik van de volgende type tokens en lagen: (Zie afbeelding).
  605. &lt;a href=&quot;https://spectrum.adobe.com/page/design-tokens/#Design-token-types&quot;&gt;Bron&lt;/a&gt;&lt;/p&gt;
  606. &lt;ul&gt;
  607. &lt;li&gt;globale tokens als basis voor andere tokens zoals bijvoorbeeld een kleur: &lt;code&gt;blue-400&lt;/code&gt;&lt;/li&gt;
  608. &lt;li&gt;alias tokens t.b.v. een activiteit of andere toepassing zoals &lt;code&gt;cta-background-color&lt;/code&gt; (cta staat hier voor call to action)&lt;/li&gt;
  609. &lt;li&gt;component specifieke tokens zoals&lt;code&gt;button-cta-background-color&lt;/code&gt;&lt;/li&gt;
  610. &lt;/ul&gt;
  611. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/blog-nina-2.png&quot; alt=&quot;De naamgeving die Adobe Spectrum hanteert&quot; /&gt;&lt;/p&gt;
  612. &lt;p&gt;&lt;a href=&quot;https://www.notion.so/2317415513144ecc9ff32b5160254bcb&quot;&gt;Salesforce&lt;/a&gt; hanteert een iets andere structuur. Ze hebben bijvoorbeeld 2 type tokens en hanteren een andere naamgeving zoals bijvoorbeeld voor kleur: &lt;code&gt;$palette-blue-95&lt;/code&gt; die als basis dient voor &lt;code&gt;$brand-background-primary&lt;/code&gt; . En &lt;a href=&quot;https://www.notion.so/2317415513144ecc9ff32b5160254bcb&quot;&gt;Shopify&lt;/a&gt; hanteert ook een eigen structuur. En die heeft bijvoorbeeld gekozen voor de term interactive in plaats van de afkorting for call to action en houdt het bij 1 token: &lt;code&gt;p-interactive&lt;/code&gt;.&lt;/p&gt;
  613. &lt;p&gt;Welke conventie ook gekozen wordt, leg eerst met het team een aantal voorbeelden vast. Op die manier zorg je ervoor dat de kans op miscommunicatie en misverstanden verkleint.&lt;/p&gt;
  614. &lt;h2&gt;3. Notatie en Verspreiding&lt;/h2&gt;
  615. &lt;p&gt;Afhankelijk van hoeveel developers/designers design tokens gaan gebruiken, zijn er verschillende keuzes voor het vastleggen van design tokens. Als de tokens gebruikt gaan worden door een kleine groep die allemaal CSS gebruikt kan het voldoende zijn de tokens alleen als CSS variabelen vast te leggen. Je kunt zelfs overwegen design software in te zetten als compiler voor je tokens. Zowel &lt;a href=&quot;https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens&quot;&gt;Figma&lt;/a&gt; als &lt;a href=&quot;https://sketchelements.com/plugins/design-tokens/&quot;&gt;Sketch&lt;/a&gt; bieden de optie design tokens vanuit je design om te zetten naar CSS variabelen of een JSON bestand. Als de gebruikers groep groter is en ook gebruikt maakt van verschillende technieken zoals SCSS of Flutter dan is het wellicht handiger een standaard notatie als JSON te gebruiken en zelf een compiler te bouwen. Of om een package als &lt;a href=&quot;https://amzn.github.io/style-dictionary/#/&quot;&gt;Style Dictionary&lt;/a&gt; te implementeren die het voor je naar elk gewenst formaat kan omzetten.&lt;/p&gt;
  616. &lt;h2&gt;De Toekomst&lt;/h2&gt;
  617. &lt;p&gt;De laatste geest van vandaag neemt ons mee naar de toekomst. In de toekomst is er 1 standaard voor het vastleggen en verspreiden van design tokens; de Design Token(DT) Standaard. De DT Standaard is in 2025 ontwikkeld en gepubliceerd door de Design Token community groep. Via elke design software kunnen designers de design tokens van hun merk veilig publiceren en kunnen de design tokens via die weg in elke applicatie worden gebruikt. Wanneer een designer een token update en opslaat is dat direct te zien in de applicaties die gebruik maken van de tokens.&lt;/p&gt;
  618. &lt;p&gt;Wil je op de hoogte gehouden worden van die toekomst of bijdragen eraan? Ga dan naar de &lt;a href=&quot;https://www.w3.org/community/design-tokens/&quot;&gt;Design Token community groep&lt;/a&gt;. Wil je af en toe gezellig mee praten over UI en UX op Fronteers Slack? Join dan &lt;a href=&quot;https://fronteersnl.slack.com/archives/C0YCG8058&quot;&gt;de channel #ui-ux&lt;/a&gt;.&lt;/p&gt;
  619. </content>
  620.  </entry>
  621.  <entry>
  622.    <title>Wordt eens volwassen; Het Accessibility Maturity Model</title>
  623.    <link href="https://www.fronteers.nl/nl/blog/2022/12/wordt-eens-volwassen-het-accessibility-maturity-model"/>
  624.    <updated>2022-12-22T00:00:00Z</updated>
  625.    <id>https://www.fronteers.nl/nl/blog/2022/12/wordt-eens-volwassen-het-accessibility-maturity-model</id>
  626.    <content xml:lang="nl" type="html">&lt;p&gt;In een wereldbeeld waarin diversiteit en inclusie gelukkig steeds meer op de agenda staan, is digitale toegankelijkheid voor veel organisaties nog onbekend terrein. De meeste organisaties komen er mee in aanraking door wettelijke eisen, omdat ze bijvoorbeeld producten leveren aan een overheidsorganisatie. Daar wordt gevraagd of ze aan de gestelde eisen rond digitale toegankelijkheid voldoen.&lt;/p&gt;
  627. &lt;p&gt;Ook zijn er organisaties die hun eerste stappen al hebben gezet. Ze hebben bijvoorbeeld een onderzoek laten uitvoeren door een expert, hebben een training gevolgd en zijn met alle bevindingen aan de slag gegaan.&lt;/p&gt;
  628. &lt;p&gt;Hoe maak je dan als organisatie de volgende stap? Wat doe je om digitale toegankelijkheid te verankeren in je processen? Hoe ga je ervoor zorgen dat wat je zojuist bent begonnen niet een eenmalige actie blijft? Je wilt natuurlijk niet dat de resultaten volgende jaar alweer teniet gedaan zijn. Je wilt toewerken naar een situatie waarin je als organisatie volwassen wordt in digitale toegankelijkheid.&lt;/p&gt;
  629. &lt;h2&gt;Wat is digitale toegankelijkheid?&lt;/h2&gt;
  630. &lt;p&gt;Voordat we verder gaan, misschien hoor je als lezer wel tot die groep die eigenlijk weinig tot niets weet van digitale toegankelijkheid? Even terugspoelen dan voor een korte introductie!&lt;/p&gt;
  631. &lt;p&gt;Digitale toegankelijkheid gaat erom dat iedereen mee kan doen in de digitale wereld, online en offline. Het proces van digitale toegankelijkheid is van toegevoegde waarde voor iedereen, want het zorgt voor een product dat beter te begrijpen en te gebruiken is.&lt;/p&gt;
  632. &lt;p&gt;Het is echter van absolute noodzaak voor mensen met een beperking om deel te kunnen nemen aan de maatschappij. Denk daarbij aan mensen met een visuele, lichamelijke, auditieve en ook cognitieve beperkingen. Voor deze mensen is meer dan 95% van de websites niet zonder problemen te gebruiken (bron: &lt;a href=&quot;https://webaim.org/projects/million/#wcag&quot;&gt;Webaim&lt;/a&gt;), en dan hebben we het nog niet over de miljoenen apps die beschikbaar zijn.&lt;/p&gt;
  633. &lt;p&gt;Om dat te verbeteren is in 1999 de eerste versie van de Web Content Accessibility Guidelines (WCAG) gepubliceerd. Inmiddels zijn we bijna bij versie 2.2 van deze richtlijnen. De WCAG is een (ironisch moeilijk te lezen) document dat toetsbare normen bevat, waar je met je website aan kunt voldoen om te zorgen dat deze voor zoveel mogelijk mensen goed te gebruiken is.&lt;/p&gt;
  634. &lt;p&gt;De WCAG zijn echter maar een meetinstrument en pas het begin van jullie reis in de wereld van digitale toegankelijkheid.&lt;/p&gt;
  635. &lt;h2&gt;Het Accessibility Maturity Model&lt;/h2&gt;
  636. &lt;p&gt;Wat is dat dan eigenlijk, een Maturity Model?&lt;/p&gt;
  637. &lt;p&gt;Een Maturity Model is een manier om je huidige kennis en vaardigheden op een bepaald onderwerp te bepalen. Je kunt het dan inschalen op een bepaald niveau en vervolgens meetbare en uitvoerbare acties daaraan koppelen om het proces naar het volgende niveau te tillen.&lt;/p&gt;
  638. &lt;p&gt;Er zijn verschillende versies van het Accessibility Maturity Model (AMM). In dit artikel kijk ik in het bijzonder naar de versie die op dit moment in ontwikkeling is door een werkgroep van het W3C. De meest actuele versie van het document is te vinden op https://www.w3.org/TR/maturity-model/&lt;/p&gt;
  639. &lt;p&gt;Met het AMM gaat digitale toegankelijkheid verder dan alleen de WCAG of andere technische standaarden. Het geeft je organisatie handvatten om jullie bedrijfsprocessen op het gebied van digitale toegankelijkheid in kaart te brengen en verbeteringen in gang te zetten. Een gestructureerde manier om te kijken naar aspecten als “wat doen we al” en “hoe effectief zijn we hierin” gecombineerd met ontdekken waar de gaten en verbeterpunten liggen. Hierdoor gaan jullie op een bestendige manier producten ontwikkelen die voor iedereen te gebruiken zijn! Je wordt er bovendien toe aangemoedigd daar continu stappen in te blijven zetten.&lt;/p&gt;
  640. &lt;p&gt;Aan de slag gaan met het AMM is dan ook iets heel anders dan het uitvoeren van een toegankelijkheidsonderzoek. Dat laatste geeft je alleen maar een kijkje in de toegankelijkheid van een bepaald product. Toegankelijkheidsonderzoeken zijn dus maar een van de puzzelstukjes binnen het AMM. Het zegt verder weinig over hoe je als team omgaat met digitale toegankelijkheid, welke middelen jullie tot je beschikking hebben en waar ruimte voor groei zit.&lt;/p&gt;
  641. &lt;h2&gt;De structuur van het Accessibility Maturity Model&lt;/h2&gt;
  642. &lt;p&gt;Het AMM van het W3C bestaat momenteel uit 7 dimensies waarin toegankelijkheid kan bijdragen. Binnen die dimensies zijn er steeds ijkpunten, normen die je rechtstreeks kunt beoordelen, waarbij voortgang gemeten kan worden en een Maturity schaal waarin per ijkpunt, over verschillende gradaties, eisen zijn vastgesteld.&lt;/p&gt;
  643. &lt;h2&gt;Dimensies&lt;/h2&gt;
  644. &lt;p&gt;binnen de huidige opzet van het AMM zijn 7 dimensies opgesteld, elk met een korte definitie in begrijpelijke taal:&lt;/p&gt;
  645. &lt;ol&gt;
  646. &lt;li&gt;&lt;em&gt;Communicatie&lt;/em&gt; - Alles over toegankelijkheid voor interne en externe communicatie van de organisatie. Alles van interne mails tot documenten en berichten op social media.&lt;/li&gt;
  647. &lt;li&gt;&lt;em&gt;Kennis en vaardigheden&lt;/em&gt; - Hoe zorgt je als organisatie voor het opbouwen en onderhouden van kennis rond toegankelijkheid. Welke intern en externe bronnen worden betrokken? Hoe zorg je dat mensen de informatie weten te vinden en gebruiken.&lt;/li&gt;
  648. &lt;li&gt;&lt;em&gt;Ondersteuning&lt;/em&gt; - Alles rond toegankelijkheid in de ondersteuning van werknemers en klanten. Welke behoeften hebben mensen om hun werk te kunnen uitvoeren en waar lopen onze klanten tegenaan in het gebruik van onze producten?&lt;/li&gt;
  649. &lt;li&gt;&lt;em&gt;ICT development Life Cycle&lt;/em&gt; - De dimensie waaraan de meeste mensen het eerste denken bij digitale toegankelijkheid. Hierin valt alles van idee tot ontwerp en realisatie van een product of website.&lt;/li&gt;
  650. &lt;li&gt;&lt;em&gt;Personeel&lt;/em&gt; - Hoe wordt er rekening gehouden met toegankelijkheid in HR zaken als werving, onboarding etc en hoe kunnen mensen met een functiebeperking binnen de organisatie hun ervaringen inzetten voor verbeteringen.&lt;/li&gt;
  651. &lt;li&gt;&lt;em&gt;Inkoop&lt;/em&gt; - Welke rol speelt toegankelijkheid in het inkoopproces? Hoe worden hier al producten beoordeeld en problemen voorkomen?&lt;/li&gt;
  652. &lt;li&gt;&lt;em&gt;Cultuur&lt;/em&gt; - Diversiteit en Inclusie. Welke waarden en normen zijn er verwerkt in beleid om toegankelijkheid tot kernwaarde van de organisatie te maken.&lt;/li&gt;
  653. &lt;/ol&gt;
  654. &lt;h2&gt;IJkpunten en voortgang&lt;/h2&gt;
  655. &lt;p&gt;Binnen de eerder genoemde dimensies kun je ijkpunten vaststellen. Houdt deze ijkpunten zo specifiek mogelijk om het beoordelen makkelijker te maken, maar ook zodat je behapbare stappen kunt zetten.&lt;/p&gt;
  656. &lt;p&gt;Enkele voorbeelden van ijkpunten zijn:&lt;/p&gt;
  657. &lt;ul&gt;
  658. &lt;li&gt;Styleguides hebben toegankelijkheids-aantekeningen (ICT development life cycle).&lt;/li&gt;
  659. &lt;li&gt;Er is trainingsmateriaal beschikbaar voor nieuwe collega’s (Kennis en vaardigheden).&lt;/li&gt;
  660. &lt;li&gt;Er is een toegankelijke feedback mogelijkheid voor mensen die problemen ervaren met ons product. (Ondersteuning)&lt;/li&gt;
  661. &lt;/ul&gt;
  662. &lt;p&gt;Je voortgang binnen het AMM houdt je bij over verschillende gradaties. Het W3C model kent er binnen de MAturity schaal standaard 4, namelijk:&lt;/p&gt;
  663. &lt;ul&gt;
  664. &lt;li&gt;&lt;em&gt;Inactief&lt;/em&gt; - Er is nog geen bewustwording of erkenning van een behoefte op dit vlak.&lt;/li&gt;
  665. &lt;li&gt;&lt;em&gt;Begonnen&lt;/em&gt; - Er is een bewustzijn voor toegankelijkheid met eerste stappen, maar nog niets structureel.&lt;/li&gt;
  666. &lt;li&gt;&lt;em&gt;Integratie&lt;/em&gt; - Er ligt een duidelijk plan met uitvoerbare en meetbare stappen.&lt;/li&gt;
  667. &lt;li&gt;&lt;em&gt;Optimalisatie&lt;/em&gt; - De basis is gelegd en mensen werken actief aan constante verbetering.&lt;/li&gt;
  668. &lt;/ul&gt;
  669. &lt;h2&gt;Hoe ga je hier mee aan de slag?&lt;/h2&gt;
  670. &lt;p&gt;Het AMM geeft je dus een manier om meetbaar te maken hoe je organisatie presteert op gebied van toegankelijkheid. Hoewel het model nog in de ontwikkeling is, kan het zeker al toegepast worden. Je kunt er goed inzicht mee krijgen. Om het in te zetten kun je het als compleet model gebruiken of je eigen scope bepalen en de aandacht richten op een of enkele van de dimensies.&lt;/p&gt;
  671. &lt;p&gt;Als je bepaald hebt hoe breed je het model wilt gaan toepassen is het tijd om informatie te gaan verzamelen bij de betrokken mensen. Zeker in een organisatie die nog niet veel met toegankelijkheid doet kan dit al een uitdaging op zich zijn, maar ook dat zijn bevindingen die je kunt opnemen (fase ‘Inactief’) en je kunt er duidelijke acties aan koppelen.&lt;/p&gt;
  672. &lt;p&gt;Wanneer we het bijvoorbeeld toepassen op de ICT lifecycle zijn er daarbinnen alweer verschillende fases waarop je het model kunt toespitsen. In de planfase bijvoorbeeld kun je al kijken hoe er vanaf het begin rekening wordt gehouden met toegankelijkheid. Zijn er eisen opgenomen waaraan het eindproduct moet voldoen zoals voldoen aan de WCAG, en hoe wordt dat bijgehouden? Zijn er in de ontwerpfase best practices waaraan designers zich kunnen houden en worden er bij gebruikersonderzoek ook mensen met een functiebeperking betrokken? Weten ontwikkelaars in de bouwfase hoe ze toegankelijke code moeten schrijven en hebben testers de juiste vaardigheden om met ondersteunende technologieën zoals een screenreader te kunnen testen? Hoe komen hun resultaten weer in de backlog terecht en wie zorgt dat ze daar niet ondersneeuwen tussen de andere tickets?&lt;/p&gt;
  673. &lt;p&gt;Voor al die vragen zijn ijkpunten op te stellen. Er is een Excel document beschikbaar met een voorbeeld over hoe je de voortgang zou kunnen bijhouden, maar het staat je natuurlijk vrij om hier je eigen invulling aan te geven, passend bij je eigen organisatie. Aan andere versies, zoals HTML, wordt nog gewerkt. &lt;a href=&quot;https://www.w3.org/WAI/APA/task-forces/research-questions/maturity-model/Overview.xlsx&quot;&gt;Excelbestand Accessibility Maturity Model&lt;/a&gt;&lt;/p&gt;
  674. &lt;p&gt;Toegankelijkheid op een goede manier verankeren in je organisatie is, zoals met veel processen, niet iets waar je morgen mee klaar bent. Het is een proces van jaren. Maar stap voor stap, taak voor taak, kun je met het Accessibility Maturity Model toewerken naar een structureel toegankelijke organisatie!&lt;/p&gt;
  675. </content>
  676.  </entry>
  677.  <entry>
  678.    <title>Dit is hoe ik omga met het developer imposter syndroom</title>
  679.    <link href="https://www.fronteers.nl/nl/blog/2022/12/dit-is-hoe-ik-omga-met-het-developer-imposter-syndroom"/>
  680.    <updated>2022-12-21T00:00:00Z</updated>
  681.    <id>https://www.fronteers.nl/nl/blog/2022/12/dit-is-hoe-ik-omga-met-het-developer-imposter-syndroom</id>
  682.    <content xml:lang="nl" type="html">&lt;p&gt;Wat voor syndroom? Het imposter syndroom. Vrij vertaald naar het Nederlands het ‘bedriegers syndroom’. Ik hoor sommigen denken, wat mankeer je dan? Nou, eigenlijk niets. Zo is er is geen diagnose voor. Maar het is wel degelijk iets. Voornamelijk binnen de tech industrie is het percentage van ‘developer imposter syndroom’ erg hoog. Uit een onderzoek uit 2018 blijkt zelfs meer dan de helft van de developers, er in min of meerdere mate last van hebben.&lt;/p&gt;
  683. &lt;h2&gt;Wat is het developer imposter syndroom?&lt;/h2&gt;
  684. &lt;p&gt;Ik ben altijd geïnteresseerd geweest in psychologie, en was dan ook enorm getriggerd toen ik van het fenomeen hoorde. Het komt er in de basis op neer, dat je twijfelt aan je eigen kunnen. “Wanneer ontdekt iemand dat ik eigenlijk niets kan?”, is een veelgehoorde kreet. Vaak onterechte gedachten. Merendeels gebaseerd op vergelijkingen met andere developers. Mensen die last hebben van het imposter syndroom onderschatten eigenlijk hun eigen prestaties. In de praktijk kun je hier bijvoorbeeld last van hebben na een meetup. Waar alle developers met elkaar stonden te praten over een nieuwe techniek. Zelf kende je deze niet, en je voelde je daarna direct slecht omdat je deze techniek niet beheerst. Je ziet het als een tekortkoming. Je denkt, dat het niet beheersen van deze techniek jou een slechte developer maakt.&lt;/p&gt;
  685. &lt;h2&gt;Onderzoek uit 2018&lt;/h2&gt;
  686. &lt;p&gt;Developers van van grote techbedrijven als Amazon, Facebook en Microsoft gaven aan dat ze zich voelden als een imposter. Gemiddeld 58%. Uit het &lt;a href=&quot;https://www.teamblind.com/blog/index.php/2018/09/05/58-percent-of-tech-workers-feel-like-impostors/&quot;&gt;onderzoek van Blink&lt;/a&gt;, bleek zelfs dat bij Salesforce een developer werkt, die reeds 14 jaar in een engineer rol zit. Nog steeds aangeeft bang te zijn om ontmaskert te worden. Lachwekkend? Sneu genoeg blijk ik er zelf ook last van te hebben (en ik weet ook dat het onterecht is). Het is vermoedelijk te wijten aan de aard van de technische industrie. Met zoveel nieuwe ontwikkelingen, die zich in rap tempo opvolgen, is het onmogelijk om alles (goed) te beheersen.&lt;/p&gt;
  687. &lt;h2&gt;Vacatureteksten&lt;/h2&gt;
  688. &lt;p&gt;Zo werd ik weer eens geprikkeld door rond te struinen op LinkedIn en andere websites, op zoek naar een mogelijk nieuwe front-end opdracht. Typescript, Svelte, ES6, Angular, React, Redux, Node.js, Webpack, GIT, end-to-end testing, unit testing, Agile, Scrum. En het liefst 10 jaar ervaring. Mooi is dat ik ook weet dat bepaalde technieken, frameworks of tooling niet eens zo lang bestaan. Wees bewust dat er eigenlijk rariteiten in de vacatureteksten kunnen staan van de recruiters. Mezelf tevens beseffende, dat het allemaal mijn imposter syndroom aanjaagt! Ik heb wel ervaring met React, ES6. Werk dagelijks met Git. Maar toch heb ik de laatste jaren niet dagelijks met React gewerkt. En ik schrijf eigenlijk ook maar weinig unit tests. Het geeft me een onbehagen gevoel, en zegt er een stemmetje in mijn hoofd, “zie je nou wel, je bent een slechte developer”.&lt;/p&gt;
  689. &lt;h2&gt;Oplossing voor het imposter syndroom&lt;/h2&gt;
  690. &lt;p&gt;Een oplossing voor het developers imposter syndroom? Dat werkt natuurlijk voor iedereen anders. Over het algemeen werken de volgende onderstaande punten voor mij heel goed:&lt;/p&gt;
  691. &lt;ul&gt;
  692. &lt;li&gt;Focus op je eigen kwaliteiten, je mag daar trots op zijn.&lt;/li&gt;
  693. &lt;li&gt;Vergelijk jezelf niet met anderen.&lt;/li&gt;
  694. &lt;li&gt;Herinner jezelf eraan dat je niet alles kunt beheersen.&lt;/li&gt;
  695. &lt;li&gt;Accepteer dat er een collega is, die meer (of iets) weet over een bepaald onderwerp.&lt;/li&gt;
  696. &lt;li&gt;Durf zelfs hulp te vragen aan die collega.&lt;/li&gt;
  697. &lt;li&gt;Hou je eigen prestaties bij. Vier kleine successen! Schrijf ze desnoods op, of showcase ze op je eigen website.&lt;/li&gt;
  698. &lt;li&gt;Fouten maken is normaal. Het maakt je geen slechte developer. Sterker nog, je zou er nog een paar moeten maken. Dat maakt je juist een goede developer, omdat je nu weet hoe het niet moet.&lt;/li&gt;
  699. &lt;/ul&gt;
  700. &lt;p&gt;Durf jij te erkennen dat je ook wel eens last hebt van het developer imposter syndroom? Weet dat je niet alleen bent. Probeer eens aan bovenstaande checklist te denken. En vooral, wees trots op jezelf. Happy coding!&lt;/p&gt;
  701. </content>
  702.  </entry>
  703.  <entry>
  704.    <title>Intl, de ECMAScript internationalisering API</title>
  705.    <link href="https://www.fronteers.nl/nl/blog/2022/12/intl-de-ecmascript-internationalisering-api"/>
  706.    <updated>2022-12-20T00:00:00Z</updated>
  707.    <id>https://www.fronteers.nl/nl/blog/2022/12/intl-de-ecmascript-internationalisering-api</id>
  708.    <content xml:lang="nl" type="html">&lt;p&gt;Intl is de standaard ECMAScript internationalisering API en wordt al sinds 2016 door alle browsers ondersteund, maar ontwikkelaars vallen toch vaak terug op onnodige (en verouderde) JavaScript bibliotheken.&lt;/p&gt;
  709. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/blog-edwin.jpg&quot; alt=&quot;Een vrouw die Intl vertegenwoordigt, kijkt verontwaardigd naar haar vriend die een vrouw die Moment Luxon vertegenwoordigt nafluit&quot; /&gt;&lt;/p&gt;
  710. &lt;h2&gt;Aargh, tijdzones en zomertijd&lt;/h2&gt;
  711. &lt;p&gt;Ontwikkelaars klagen vaak als ze tijdzones of zomertijd moeten ondersteunen. Het tijdstip dat ze willen tonen verschilt een (of meer) uur van het tijdstip dat in de data zit. Soms lossen ze dat op door er zelf het verschil erbij op te tellen, niet wetende dat daarmee het probleem alleen groter is geworden en de tijd na de eerstvolgende zomer-wintertijdwisseling waarschijnlijk weer onjuist is.&lt;/p&gt;
  712. &lt;p&gt;Terwijl de oplossing heel eenvoudig is. Sla tijd altijd op als GMT, dus zonder tijdzone-offset en zonder zomertijd. Je kan hiervoor de Unix epoch gebruiken, dat is het aantal seconden sinds 1 januari 1970 GMT. Gebruik deze tijd ook in je API’s.&lt;/p&gt;
  713. &lt;p&gt;&lt;em&gt;Tip: gebruik hiervoor geen 32-bits integer, want dan heb je in 2038 weer een probleem.&lt;/em&gt;&lt;/p&gt;
  714. &lt;p&gt;Vanuit deze GMT-tijd kan je met JavaScript eenvoudig de lokale tijd tonen. Het Date object heeft al heel lang functies om zowel de tijd als de datum in de gewenste locale weer te geven (&lt;code&gt;date.toLocaleDateString()&lt;/code&gt;, &lt;code&gt;date.toLocaleString()&lt;/code&gt; en &lt;code&gt;date.toLocaleTimeString()&lt;/code&gt;). Je kan helaas niet afwijken van de standaard tijd/datum-weergave van deze functies.&lt;/p&gt;
  715. &lt;p&gt;Als je toch invloed wil hebben op hoe de tijd wordt weergegeven, dan kon je (in het verleden) zelf iets schrijven of je wenden tot JavaScriptbibliotheken. Een veel gebruikte bibliotheek, die ook overweg kan met tijdzones en zomertijd is Moment.js.&lt;/p&gt;
  716. &lt;h2&gt;Moment.js&lt;/h2&gt;
  717. &lt;p&gt;Er zijn inmiddels veel betere alternatieven voor Moment.js. Toch zie ik veel ontwikkelaars nog steeds met Moment.js werken. Het is te begrijpen dat als je een API eenmaal goed kent, je niet graag overstapt op een andere API.&lt;/p&gt;
  718. &lt;p&gt;Er zijn toch een aantal goede redenen om over te stappen, want Moment.js heeft een aantal serieuze nadelen:&lt;/p&gt;
  719. &lt;ol&gt;
  720. &lt;li&gt;Moment.js is verouderd en wordt niet meer verder ontwikkeld. &lt;em&gt;&amp;quot;We recognize that many existing projects may continue to use Moment, but we would like to discourage Moment from being used in new projects going forward.&amp;quot;&lt;/em&gt; Zoals te lezen is op de &lt;a href=&quot;https://momentjs.com/docs/&quot;&gt;Documentatiepagina&lt;/a&gt;. Verdere uitleg over dit besluit staat op hun &lt;a href=&quot;https://momentjs.com/docs/#/-project-status/&quot;&gt;Project Status pagina&lt;/a&gt;.&lt;/li&gt;
  721. &lt;li&gt;Moment.js bevat alle tijdzone- en zomertijdgegevens van alle landen is daardoor best groot.&lt;/li&gt;
  722. &lt;li&gt;Moment is niet geschikt voor tree shaking, dus je laadt altijd de hele bibliotheek in, ongeacht hoeveel je ervan gebruikt.&lt;/li&gt;
  723. &lt;li&gt;Moment.js is niet &lt;em&gt;immutable&lt;/em&gt;. Als je een tijdstip x hebt en je wil de tijd twee uur later weten, dan verandert de waarde van x, wat je meestal niet wilt. Als je dit eenmaal weet, dan zorg je dat je eerst een kopie van x maakt, maar het blijft onhandig.&lt;/li&gt;
  724. &lt;li&gt;Een reden die ik op andere plekken niet tegenkom: door de tijdzone- en zomertijdgegevens in je JavaScript op te nemen, kunnen ze niet makkelijk worden bijgewerkt. Met een paar honderd landen kan je je voorstellen dat deze gegevens regelmatig wijzigen, maar als je je JavaScriptbibliotheken maar af en toe bijwerkt, of in het slechtste geval nooit, dan weet je dat je snel met verouderde gegevens zit.&lt;/li&gt;
  725. &lt;/ol&gt;
  726. &lt;h2&gt;Erdogantijd&lt;/h2&gt;
  727. &lt;p&gt;Een interessant voorbeeld is de tijdzonechaos in 2015 in Turkije. De wintertijd zou ingaan op 25 oktober, maar omdat er op 1 november verkiezingen waren, werd dit een paar weken van te voren verplaatst naar 8 november, zodat het tijdens de verkiezingen een uur langer licht zou zijn. Microsoft, Apple, Google (Android) brachten snel updates uit, maar zoals je je kunt voorstellen, werden niet alle systemen op tijd bijgewerkt. De Turken leefden twee weken lang met een deel van de klokken op de gewone tijd en een ander deel op &amp;quot;Erdogantijd&amp;quot;.&lt;/p&gt;
  728. &lt;p&gt;Zie ook &lt;a href=&quot;https://codeofmatt.com/on-the-timing-of-time-zone-changes/&quot;&gt;On the Timing of Time Zone Changes&lt;/a&gt; van Matt Johnson-Pint voor andere voorbeelden van tijdzonechaos.&lt;/p&gt;
  729. &lt;p&gt;Door de tijdzone- en zomertijdgegevens hardcoded in JavaScript op je website te zetten maak je het probleem niet echt kleiner.&lt;/p&gt;
  730. &lt;p&gt;Je kan in plaats van Moment.js ook een modernere bibliotheek gebruiken zoals Luxon, die op Intl is gebaseerd. Maar waarom zou je dan niet gelijk Intl gebruiken?&lt;/p&gt;
  731. &lt;h2&gt;Intl&lt;/h2&gt;
  732. &lt;p&gt;Intl kan op het eerste gezicht wat ingewikkeld overkomen, maar zoals je hieronder kan zien, valt dat best mee.&lt;/p&gt;
  733. &lt;p&gt;Hier is een voorbeeld:&lt;/p&gt;
  734. &lt;pre&gt;&lt;code&gt;// Take any date object
  735. const date = new Date(Date.UTC(2022, 11, 25, 11, 30, 00));
  736.  
  737. // Create a DateTimeFormat
  738. const dateTimeFormat = new Intl.DateTimeFormat(&#39;en-GB&#39;, { dateStyle: &#39;full&#39;, timeStyle: &#39;long&#39; })
  739.  
  740. // Format the provided date
  741. dateTimeFormat.format(date)
  742.  
  743. // returns &amp;quot;Sunday, 25 December 2022 at 12:30:00 CET&amp;quot;
  744. &lt;/code&gt;&lt;/pre&gt;
  745. &lt;p&gt;De eerste parameter van &lt;code&gt;DateTimeFormat&lt;/code&gt; is de &lt;em&gt;locale&lt;/em&gt;. Dat is de taal waarin de datum weergegeven moet worden, niet te verwarren met de tijdzone. Gewoonlijk is dit de taal van de pagina zelf, maar wil je ingestelde taal van de gebruiker gebruiken, dan kan je als waarde &lt;code&gt;undefined&lt;/code&gt; meegeven.&lt;/p&gt;
  746. &lt;p&gt;De tweede parameter bevat de opties. Bij zowel &lt;code&gt;dateStyle&lt;/code&gt; als &lt;code&gt;timeStyle&lt;/code&gt; zijn de volgende waarden mogelijk: &lt;code&gt;&amp;quot;full&amp;quot;&lt;/code&gt;, &lt;code&gt;&amp;quot;long&amp;quot;&lt;/code&gt;, &lt;code&gt;&amp;quot;medium&amp;quot;&lt;/code&gt; en &lt;code&gt;&amp;quot;short&amp;quot;&lt;/code&gt;.&lt;/p&gt;
  747. &lt;p&gt;Als dat niet voldoende is, kan je ook voor elke deel van de datum aangeven hoe deze moet worden weergegeven. Voor bijvoorbeeld de maand kan je &lt;code&gt;month&lt;/code&gt; de volgende waarden geven:&lt;/p&gt;
  748. &lt;ul&gt;
  749. &lt;li&gt;&lt;code&gt;&amp;quot;numeric&amp;quot;&lt;/code&gt; (bijvoorbeeld 3)&lt;/li&gt;
  750. &lt;li&gt;&lt;code&gt;&amp;quot;2-digit&amp;quot;&lt;/code&gt; (bijvoorbeeld 03)&lt;/li&gt;
  751. &lt;li&gt;&lt;code&gt;&amp;quot;long&amp;quot;&lt;/code&gt; (bijvoorbeeld March)&lt;/li&gt;
  752. &lt;li&gt;&lt;code&gt;&amp;quot;short&amp;quot;&lt;/code&gt; (bijvoorbeeld Mar)&lt;/li&gt;
  753. &lt;li&gt;&lt;code&gt;&amp;quot;narrow&amp;quot;&lt;/code&gt; (bijvoorbeeld M)&lt;/li&gt;
  754. &lt;/ul&gt;
  755. &lt;p&gt;Wil je de datum voor een bepaalde tijdzone weergeven, dan kan je de optie &lt;code&gt;timeZone&lt;/code&gt; meegeven, bijvoorbeeld &lt;code&gt;timeZone: &amp;quot;Asia/Tokyo&amp;quot;&lt;/code&gt;.&lt;/p&gt;
  756. &lt;p&gt;Vrijwel elke denkbare datumnotatie is mogelijk. Zie voor de lijst van alle mogelijke opties de pagina &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat&quot;&gt;Intl.DateTimeFormat() constructor&lt;/a&gt;.&lt;/p&gt;
  757. &lt;p&gt;&lt;code&gt;format()&lt;/code&gt; geeft altijd een string terug, maar wat als je de seconden in een kleiner font wil weergeven? Of AM/PM in een andere kleur? Ook dat is mogelijk. In plaats van &lt;code&gt;format(date)&lt;/code&gt; roep je dan &lt;code&gt;formatToParts(date)&lt;/code&gt; aan en je krijgt een array terug van alle datumonderdelen en hun waardes. Je kan dan zelf bepalen hoe je elk van deze waarden weergeeft.&lt;/p&gt;
  758. &lt;pre&gt;&lt;code&gt;dateTimeFormat.formatToParts(date);
  759.  
  760. // returns
  761. [
  762.  { type: &amp;quot;weekday&amp;quot;, value: &amp;quot;Sunday&amp;quot; },
  763.  { type: &amp;quot;literal&amp;quot;, value: &amp;quot;, &amp;quot; },
  764.  { type: &amp;quot;day&amp;quot;, value: &amp;quot;25&amp;quot; },
  765.  { type: &amp;quot;literal&amp;quot;, value: &amp;quot; &amp;quot; },
  766.  { type: &amp;quot;month&amp;quot;, value: &amp;quot;December&amp;quot; },
  767.  { type: &amp;quot;literal&amp;quot;, value: &amp;quot; &amp;quot; },
  768.  { type: &amp;quot;year&amp;quot;, value: &amp;quot;2022&amp;quot; },
  769.  { type: &amp;quot;literal&amp;quot;, value: &amp;quot; at &amp;quot; },
  770.  { type: &amp;quot;hour&amp;quot;, value: &amp;quot;12&amp;quot; },
  771.  { type: &amp;quot;literal&amp;quot;, value: &amp;quot;:&amp;quot; },
  772.  { type: &amp;quot;minute&amp;quot;, value: &amp;quot;30&amp;quot; },
  773.  { type: &amp;quot;literal&amp;quot;, value: &amp;quot;:&amp;quot; },
  774.  { type: &amp;quot;second&amp;quot;, value: &amp;quot;00&amp;quot; },
  775.  { type: &amp;quot;literal&amp;quot;, value: &amp;quot; &amp;quot; },
  776.  { type: &amp;quot;timeZoneName&amp;quot;, value: &amp;quot;CET&amp;quot; }
  777. ]
  778. &lt;/code&gt;&lt;/pre&gt;
  779. &lt;p&gt;Naast &lt;code&gt;DateTimeFormat&lt;/code&gt; bevat Intl nog een reeks mogelijkheden die nuttig zijn bij internationalisatie.&lt;/p&gt;
  780. &lt;h2&gt;RelativeTimeFormat&lt;/h2&gt;
  781. &lt;p&gt;Relatieve tijd, zoals je vaak ziet op fora en chatkanalen.&lt;/p&gt;
  782. &lt;pre&gt;&lt;code&gt;// Create a RelativeTimeFormat
  783. const rtf = new Intl.RelativeTimeFormat(&#39;nl-NL&#39;);
  784.  
  785. rtf.format(-2, &#39;minute&#39;)
  786. // returns &amp;quot;2 minuten geleden&amp;quot;
  787. &lt;/code&gt;&lt;/pre&gt;
  788. &lt;h2&gt;ListFormat&lt;/h2&gt;
  789. &lt;p&gt;Het weergeven van lijsten in de gewenste taal.&lt;/p&gt;
  790. &lt;pre&gt;&lt;code&gt;// Create a ListFormat
  791. const listFormat = new Intl.ListFormat(&#39;nl-NL&#39;, { style: &#39;long&#39;, type: &#39;conjunction&#39; });
  792.  
  793. listFormat.format([&amp;quot;bananen&amp;quot;, &amp;quot;appels&amp;quot;, &amp;quot;mandarijnen&amp;quot;])
  794. // returns &amp;quot;bananen, appels en mandarijnen&amp;quot;
  795. &lt;/code&gt;&lt;/pre&gt;
  796. &lt;p&gt;Daarnaast kan je met Intl ook taalafhankelijk getallen juist weergeven, meervoudsregels toepassen, alfabetisch sorteren en tekst opdelen in (onder andere) woorden.&lt;/p&gt;
  797. &lt;p&gt;Wil je aan de slag met de Intl API en alle mogelijkheden bekijken, dan kan je zoals altijd terecht bij de goede &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl&quot;&gt;documentatie op MDN&lt;/a&gt;.&lt;/p&gt;
  798. &lt;p&gt;Maar wil je de Intl API interactief ontdekken, dan kan je &lt;a href=&quot;https://www.intl-explorer.com/?locale=nl-NL&quot;&gt;Intl Explorer&lt;/a&gt; van Jesper Orb uitproberen.&lt;/p&gt;
  799. &lt;p&gt;En mocht je denken &amp;quot;heel leuk die Intl API, maar de Date API mag ook wel wat beter&amp;quot;, dan heb ik goed nieuws: momenteel wordt gewerkt aan de &lt;a href=&quot;https://tc39.es/proposal-temporal/docs/&quot;&gt;Temporal API&lt;/a&gt; die de oude Date API zal vervangen.&lt;/p&gt;
  800. </content>
  801.  </entry>
  802.  <entry>
  803.    <title>Fronteers Boekenclub 4 - The IT Girl</title>
  804.    <link href="https://www.fronteers.nl/nl/blog/2022/12/fronteers-boekenclub-4-the-it-girl"/>
  805.    <updated>2022-12-20T00:00:00Z</updated>
  806.    <id>https://www.fronteers.nl/nl/blog/2022/12/fronteers-boekenclub-4-the-it-girl</id>
  807.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 13 december bespraken we bij de vierde Fronteers Boekenclub het boek &amp;quot;&lt;a href=&quot;https://chantalschinkels.nl/de-it-girl/&quot;&gt;The IT Girl&lt;/a&gt;&amp;quot; van Chantal Schinkels.&lt;/p&gt;
  808. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/fbc4-de-it-girl-chantal-schinkels-200w.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  809. &lt;p&gt;De ondertitel van dit boek is ‘Hoe overleef je een door mannen gedomineerde werkvloer?’ Deze editie werd in ieder geval niet gedomineerd door mannen. We bespraken het boek met 7 vrouwen en 1 man (*). Na het eerste uur schoof Chantal zelf ook nog aan, voor vragen.&lt;/p&gt;
  810. &lt;h2&gt;Over het boek&lt;/h2&gt;
  811. &lt;p&gt;Het boek kwam uit in augustus 2021. De titel is een woordspeling: aan de ene kant een meisje met een baan in de IT en anderzijds een ‘&lt;a href=&quot;https://en.wikipedia.org/wiki/It_girl&quot;&gt;it girl&lt;/a&gt;’, a la Paris Hilton. Het bestaat uit 3 delen: ‘Voordat je het ziet’, ‘De ladder op’, ‘Breek het systeem’.&lt;/p&gt;
  812. &lt;p&gt;We vroegen Chantal wie ze als doelgroep ziet voor het boek. “Iedereen, uiteraard. Mijn belangrijkste doelgroep is vooral vrouwen die aan het begin van hun carrière staan. Maar gaandeweg het schrijven van het boek kwam ik erachter dat het geen vrouwenprobleem, maar een leiderschapsprobleem.”&lt;/p&gt;
  813. &lt;p&gt;Schinkels geeft een aantal tips. Bijvoorbeeld: probeer zichtbaar te zijn; vorm een ‘wolf pack’; vind een mentor, vind een sponsor. En om mannen te overtuigen: “Noem hun dochter. Werk op hun gevoel, hun papa-zijn. Ze weten niet hoe het voelt. Het is ook voor een gedeelte gebaseerd op angst. Bang dat ‘we’ iets afpakken. Maar het is geen zero sum game. Het is niet zo dat mannen iets verliezen als vrouwen beter betaald worden.”
  814. Ze noemt ook een aantal typetjes, zoals ‘de jatgast’, ‘ondermijn-heer’ en ‘aanrechtprofeet’.&lt;/p&gt;
  815. &lt;h2&gt;Zelfs voor mannen&lt;/h2&gt;
  816. &lt;p&gt;Iedereen zou dit boek moeten lezen, zelfs mannen. Hoofdstuk 10 richt het woord speciaal tot hen. Ook voor hen is dit boek geschikt, want dit is geen boos boek. “If you’ve never been exposed to these kinds of problems, you don’t see them. That is why some men do not see the problem. And that is why we must include them in this.”&lt;/p&gt;
  817. &lt;p&gt;Zoals Schinkels zei: “Bij de mannen ligt de sleutel. Je hebt maar 1 man nodig om cultuurverandering te starten. Denk aan het bystander effect. Als niemand ingrijpt, doe jij het ook niet. Maar een man kan tijdens vergaderingen net iets makkelijker zeggen: ‘Zo doen we dit hier niet’.”&lt;/p&gt;
  818. &lt;h2&gt;Bedreigend&lt;/h2&gt;
  819. &lt;p&gt;Er zijn denk ik (*) 2 soorten mensen: mensen die denken dat ‘feminist’ een scheldwoord is en mensen die wel vinden alle mensen gelijke kansen en gelijke rechten horen te hebben. Ik viel van m’n stoeltje van verbazing toen Chantal vertelde dat ze was uitgenodigd om te spreken op een congres maar wel als het praatje ‘niet te feministisch’ was. “Mannen lopen weg als je te veel schreeuwt. Ik maak dat nog steeds mee. Ik wil niet de boze vrouw zijn.” Anno 2022! Het moet wel gezellig blijven, he?&lt;/p&gt;
  820. &lt;h2&gt;Schijn bedriegt&lt;/h2&gt;
  821. &lt;p&gt;Nederland lijkt soms vooruitstrevend, maar op het gebied van gelijke behandeling laten de cijfers iets anders zien. De verhouding zijn aartsconservatief en droefmakend. Van alle personen die in 2018 in een technisch beroep werkten, was maar 13% vrouw. In de ICT is dit 14,3%. Inmiddels ligt het percentage vrouwen die voor een bèta-opleiding kiezen in het hoger onderwijs op een gemiddelde van 18%: aan de universiteit gaat het om 27% en in het hbo om 12% van de studenten.&lt;/p&gt;
  822. &lt;p&gt;Waarom is dat een probleem? Hoe meer mensen in de IT zouden werken, hoe beter. En ook: hoe diverser, hoe beter. Voor werkgevers, want vacatures worden beter vervuld. Voor werknemers, want daarmee wordt hun werkplek eerlijker en minder eenzijdig. En voor het uiteindelijke resultaat. Denk aan &lt;a href=&quot;https://www.boredpanda.com/google-translate-sexist/&quot;&gt;seksistische vertalingen&lt;/a&gt;, &lt;a href=&quot;https://www.digitaltrends.com/mobile/smartphone-size-design-for-woman-hand/&quot;&gt;telefoons die voor mannenhanden gemaakt zijn&lt;/a&gt;, apps die vergeten dat &lt;a href=&quot;https://www.vice.com/en/article/qvp5yd/the-strange-sexism-of-period-apps&quot;&gt;sommige lijven anders werken&lt;/a&gt;.&lt;/p&gt;
  823. &lt;h2&gt;Wat we ervan vonden&lt;/h2&gt;
  824. &lt;p&gt;&lt;em&gt;Rosita: 4 sterren&lt;/em&gt;. Ik vond het een mooi en nuttig boek. Niet alles is even herkenbaar voor me. Ik werk nog niet zo heel lang in de IT; werk is voor mij wel heel belangrijk. Het heeft mij heel veel gebracht, inkomen, levensvreugde. Bij de types mannen dacht ik wel: ‘Is dat echt zo?’. Ik vond het een eye opener.&lt;/p&gt;
  825. &lt;p&gt;&lt;em&gt;Jacqueline: 3,5 sterren&lt;/em&gt;. Ik vond het heel herkenbaar, bijna te herkenbaar. Het is echt confronterend om een Wall of Guys te ervaren. Lastig in het boek vond ik dat ze handvatten geeft die te theoretisch zijn. En ik vind het lastig om ‘vooraan’ te gaan staan. Ik weet niet of ik dat wil. Ik herkende wel alle mannentypes. Heel veel mannelijke developers denken: “Ik denk niet zo, dus het probleem bestaat niet”.&lt;/p&gt;
  826. &lt;p&gt;&lt;em&gt;Marrije: 4 sterren&lt;/em&gt;. Een goed boek. Ik vond het echt shockerend om de cijfers weer te zien. Goed dat Chantal de nadruk legt op de noodzaak voor systeemverandering. Want daar zit denk ik het grootste probleem, niet in mannen zelf. Maar die typetjes en dat pestgedrag, bah, veel te herkenbaar. Ik vind: “Zet jezelf gerust in het middenpunt, vergeet de mannen”.&lt;/p&gt;
  827. &lt;p&gt;&lt;em&gt;Annemiek: 5 sterren&lt;/em&gt;. Een erg interessant boek. ‘t Was een goede voorbereiding op mijn nieuwe loopbaan als vrouwelijke developer. Ik heb er ook zeker tips uit meegenomen voor het kiezen van een fijne werkgever. Fijn ook dat het vooral op interpretatie van onderzoek was gebaseerd en niet alleen een mening.&lt;/p&gt;
  828. &lt;p&gt;Werd ook wel een klein beetje huiverig door de keerzijde die veel besproken wordt. Gelukkig viel die in de praktijk wel mee, maar wellicht dat dit ook komt doordat ik dus een werkgever heb gekozen waar erg veel focus is op inclusie en diversiteit. Ik had er wel veel herkenning in met de typetjes, ondanks dat ze misschien wat stereotiep zijn&lt;/p&gt;
  829. &lt;p&gt;&lt;em&gt;Sanne: 4 sterren&lt;/em&gt;. Goed onderbouwd boek, met veel voetnoten. Ik vond de schrijfstijl lastig en ongestructureerd. Maar inhoudelijk heel goed. En ook herkenbaar, helaas, dat bestiarium van mannen.&lt;/p&gt;
  830. &lt;p&gt;Het gaat niet direct, het gaat heel subtiel. Mannen pikken een idee en pronken ermee.
  831. Ik ben wel de enige vrouw in een team van 8. Het wordt wel tijd dat er wat representatiever wordt.&lt;/p&gt;
  832. &lt;p&gt;&lt;em&gt;Monique: 3 sterren&lt;/em&gt;. Mijn referentiepunt is: “Moet iedereen dit lezen?” En dan denk ik: nee, ik ken boeken dit het punt over emanicpatie beter maken. ‘t Maakt uit op welk punt je in je carrière staat. Ik ben 50+ en ik heb alles wel gezien en gehoord. Mijn manier was om ‘one of the guys’ te worden. Als ik vroeger me had opgesteld zoals dit boek adviseert had ik het niet overleefd. Wat Jacqueline zegt: niet iedereen wil strijden. Ik herken wel dat er heel veel werk aan de winkel is.&lt;/p&gt;
  833. &lt;p&gt;&lt;em&gt;Nina: 5 sterren&lt;/em&gt;. Een belangrijk boek, want hiermee kunnen we een start maken voor de dialoog. Rijk aan informatie en goede concrete adviezen. Ik ben al wat langer geïnteresseerd in inclusie in bredere vorm. Ik vond de typetjes’ en de generalisaties over mannen onprettig. Die typetjes zie ik bij zowel mannen als vrouwen. Ik twijfel of dit de manier is om mannen mee te krijgen.&lt;/p&gt;
  834. &lt;p&gt;&lt;em&gt;Paul: 3,5 sterren&lt;/em&gt;. Qua onderwerp is dit een nuttig boek, omdat het een impliciet probleem expliciet maakt. Nederland lijkt een progressief, feministisch land, maar de verhoudingen op de werkvloer vertellen een ander verhaal. Qua schrijfstijl vind ik het niet een geweldig boek. Het &#39;manifest&#39; was niet puntig en zet niet aan tot bekeringsdrang. Ik vond het een grappig dat er 1 hoofdstuk &#39;voor de mannen&#39; was.&lt;/p&gt;
  835. &lt;h2&gt;Tips om meer hierover te lezen, luisteren, kijken&lt;/h2&gt;
  836. &lt;ul&gt;
  837. &lt;li&gt;&lt;a href=&quot;https://leanin.org/book&quot;&gt;‘Lean In’ door Shery Sandberg&lt;/a&gt;: praktische tips en ervaringen.&lt;/li&gt;
  838. &lt;li&gt;&lt;a href=&quot;https://www.walburgpers.nl/nl/book/9789463725170/werk-is-geen-oplossing&quot;&gt;Werk is geen oplossing door Marguerite van den Berg&lt;/a&gt;: “Werk zou ons emanciperen en onafhankelijk maken. Zo draaien ook gesprekken over feminisme steeds om hetzelfde saaie en uitgeputte idee dat alle vrouwen de arbeidsmarkt op moeten. En dat terwijl niet werken voor veel vrouwen allang geen optie meer is”&lt;/li&gt;
  839. &lt;li&gt;&lt;a href=&quot;https://www.debezigebij.nl/boek/waarom-vrouwen-minder-werken-dan-mannen/&quot;&gt;Waarom vrouwen minder werken dan mannen door Liesbeth Staats&lt;/a&gt;: “Hoe komt het toch dat deze patronen in Nederland zo hardnekkig zijn en zich zo moeilijk laten uitroeien? En wat zijn de gemiste kansen voor vrouwen én mannen, zolang we ons niet los worstelen van deze ingesleten gewoontes?&lt;/li&gt;
  840. &lt;li&gt;&lt;a href=&quot;https://carolinecriadoperez.com/book/invisible-women/&quot;&gt;Invisible women door Caroline Criado Perez&lt;/a&gt;: wat zijn de gevolgen als je niet ook denkt aan vrouwen als je een product ontwerpt, of medicijnen ontwikkelt?&lt;/li&gt;
  841. &lt;li&gt;&lt;a href=&quot;https://www.guernicamag.com/rebecca-solnit-men-explain-things-to-me/&quot;&gt;Rebecca Solnit, de uitvinder van ‘mansplaining’&lt;/a&gt;&lt;/li&gt;
  842. &lt;li&gt;Podcast: &lt;a href=&quot;https://podcastluisteren.nl/pod/Sophie-and-Coco-naar-het-einde-van-de-loonkloof&quot;&gt;Sophie &amp;amp; Coco: naar het einde van de loonkloof&lt;/a&gt;&lt;/li&gt;
  843. &lt;/ul&gt;
  844. &lt;h2&gt;FBC5: dinsdag 28 februari&lt;/h2&gt;
  845. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/fbc5-the-programmers-brain-felienne-hermans-200w.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  846. &lt;p&gt;Voor de volgende keer nodigen we iedereen uit. Ook mannen, en zelfs vrouwen.
  847. &lt;a href=&quot;https://www.meetup.com/fronteers-nl/events/290317895/&quot;&gt;Meld je aan via meetup.com&lt;/a&gt;.&lt;/p&gt;
  848. &lt;p&gt;Het was nog spannend welk boek we kozen voor de vijfde editie. Dan lezen we “&lt;a href=&quot;https://www.manning.com/books/the-programmers-brain&quot;&gt;The programmer&#39;s brain&lt;/a&gt;” door Felienne Hermans. Een andere kanshebber was ‘Weapons of math destruction’ door Cathy O&#39;Neil.&lt;/p&gt;
  849. &lt;p&gt;(*) dit stukje is geschreven door die man, Paul van Buuren.&lt;/p&gt;
  850. </content>
  851.  </entry>
  852.  <entry>
  853.    <title>Design Tokens gebruiken voor de Theming van een website</title>
  854.    <link href="https://www.fronteers.nl/nl/blog/2022/12/design-tokens-gebruiken-voor-de-theming-van-een-website"/>
  855.    <updated>2022-12-19T00:00:00Z</updated>
  856.    <id>https://www.fronteers.nl/nl/blog/2022/12/design-tokens-gebruiken-voor-de-theming-van-een-website</id>
  857.    <content xml:lang="nl" type="html">&lt;p&gt;De kans is groot dat je hier terecht kwam omdat je op zoek was naar een effeciente manier om theming toe te passen in een website. Om te beginnen is het belangrijk om duidelijk te krijgen wat er precies met Theming en Design Tokens bedoeld wordt.&lt;/p&gt;
  858. &lt;h2&gt;Wat is Theming?&lt;/h2&gt;
  859. &lt;p&gt;Theming is een techniek binnen software development waarbij je op basis van een voorgedefineerd kleurenschema de vormgeving van die website aan past.&lt;/p&gt;
  860. &lt;p&gt;In de praktijk kom je theming vaker tegen in UI libraries, zoals &lt;a href=&quot;https://chakra-ui.com/&quot;&gt;Chakra UI&lt;/a&gt;, &lt;a href=&quot;https://getbootstrap.com/&quot;&gt;Bootstrap&lt;/a&gt; en &lt;a href=&quot;https://tailwindcss.com/&quot;&gt;TailwindCSS&lt;/a&gt;. Op die manier kan je de uiteindelijke vormgeving van de UI componenten aanpassen, maar helaas zitten daar dan ook weer grenzen aan.&lt;/p&gt;
  861. &lt;p&gt;Wat vaker het geval is dat je zaken zoals de primaire, secundaire kleuren kan aangeven en daarnaast lettertypes voor kopjes en normale tekst. De daadwerkelijk opties verschillen natuurlijk per UI library, maar het is vaker lastig te controleren waar hoe die kleuren en lettertypes toegepast worden.&lt;/p&gt;
  862. &lt;h2&gt;Wat zijn Design Tokens?&lt;/h2&gt;
  863. &lt;p&gt;Design Tokens is een werkwijze die vaak als onderdeel van Design Systems gebruikt wordt. Een Design System is methode waarmee de vormgeving van een merk (brand in het Engels) op een systematische manier toegepast kan worden op al haar uitingen. Denk hier bij aan websites en apps. Wat het Design System in feite doet is alle ideeën en logica van het ontwerp vast leggen in richtlijnen en code. Op die manier kan het werk en de moeite die gedaan is het ontwerp beter gewaarborgd worden, omdat het Design System dan als een automatische autoriteit geldt als het aankomt op ontwerp.&lt;/p&gt;
  864. &lt;p&gt;In zo’n systeem is het essentieel dat zaken zoals typografie (lettertypes e.d.), kleurgebruik en maatvoering (marges, paddings en groottes) gemakkelijk, op 1 plaats, beheerd en gedefinieerd kunnen worden.&lt;/p&gt;
  865. &lt;p&gt;Dit is precies wat Design Tokens doen. Het zijn als het ware globale variabelen (binnen het systeem) waarin al deze zaken als waarden opgeslagen zijn. Een bijkomende kracht van deze tokens is dan direct ook dat een waarde een betekenis meekrijgt. Neem als voorbeeld deze css code voor het stylen van een link:&lt;/p&gt;
  866. &lt;pre&gt;&lt;code&gt;/*
  867. De link heeft voor de tekst een rood-paarse kleur en voor de lijn
  868. onder de tekst een ietwat andere rood-paarse kleur. De gedachte
  869. achter de kleurwaarden is echter niet duidelijk.
  870. Als in, waar zijn deze kleuren op gebaseerd?
  871. */
  872.  
  873. a[href] {
  874.    display: inline-block;
  875.    color: #ff4400;
  876.    border-bottom: 2px solid #ffdd12;
  877. }
  878.  
  879. /*
  880. Door de kleurwaarden te definiëren als tokens (effectief hier als
  881. css-variabelen) koppel je de kleurwaarde aan een betekenis.
  882. Op die manier wordt het duidelijker wat het idee achter de
  883. vormgeving van de link is. Met andere woorden, door het gebruiken
  884. van tokens documenteer je impliciet de betekenis van de tekstkleur
  885. en de onderlijningskleur van deze link.
  886. */
  887.  
  888. :root {
  889.    --PerenComputer-colour-brand-main-text: #ff4400;
  890.    --PerenComputer-colour-brand-main-lines: #ffdd12;
  891. }
  892.  
  893. a[href] {
  894.    display: inline-block;
  895.    color: var(--PerenComputer-colour-brand-main-text);
  896.    border-bottom: 2px solid var(--PerenComputer-colour-brand-main-lines);
  897. }
  898. &lt;/code&gt;&lt;/pre&gt;
  899. &lt;h2&gt;Design Tokens voor Theming&lt;/h2&gt;
  900. &lt;p&gt;Er zit een overlap tussen hoe standaard Theming gedaan wordt (zoals in UI libraries) en hoe Design Tokens gebruikt worden. Beiden gebruiken in de basis een configuratie (bestand of data-object), waarin alle waarden gekoppeld zijn aan definities (variabelen of properties).&lt;/p&gt;
  901. &lt;p&gt;Hier is een voorbeeld om het verschil tussen Theming zonder design en met design tokens uit te leggen:&lt;/p&gt;
  902. &lt;pre&gt;&lt;code&gt;/*
  903. Dit is een voorbeeld van hoe theming werkt voor de UI library Chakra UI.
  904. In dit voorbeeld pas je het bestaande standaard thema aan door de kleur
  905. tokens voor success, error, primary en secondary aan te passen.
  906. **/
  907.  
  908. import { extendTheme } from &#39;@chakra-ui/react&#39;
  909.  
  910. /*
  911. red.[nummer] refereert naar een voorgedefineerd kleurenschema van
  912. Chakra UI: &amp;lt;https://chakra-ui.com/docs/styled-system/theme&amp;gt;
  913. */
  914.  
  915. const theme = extendTheme({
  916.  semanticTokens: {
  917.    colors: {
  918.      error: &#39;red.500&#39;,
  919.      success: &#39;green.500&#39;,
  920.      primary: &#39;red.500&#39;,
  921.      secondary: &#39;yellow.800&#39;,
  922.    },
  923.  },
  924. })
  925. &lt;/code&gt;&lt;/pre&gt;
  926. &lt;p&gt;In het bovenstaande voorbeeld van Chakra UI pas je het standaard kleuren schema aan naar je eigen wensen. Echter ontstaat er hier een subtiel probleem met betrekking tot schaalbaarheid. De namen error en success geven enkel dat de kleuren op een bepaalde manier gebruikt worden voor communicatie van de success en error staat van iets, maar niet hoe en op wat voor manier. En dan hebben we het nog niet eens over de kleur definities primary en secondary. Deze twee vertellen je nog minder over hoe, waar en wanneer ze wel en niet gebruikt worden.&lt;/p&gt;
  927. &lt;p&gt;Op een kleine schaal zal dit niet voor grote problemen zorgen en is deze manier van werken daarom ook vaker ok, maar zodra de complexiteit omhoog gaat (meer code, meer componenten, grotere codebase), wordt het steeds lastiger om kleuren correct toe te passen, omdat het ook onduidelijk hoe kleuren precies gebruikt moeten worden. M.a.w. zorgen dat het kleurgebruik klopt met de originele intenties van het ontwerp.&lt;/p&gt;
  928. &lt;h2&gt;Design Tokens gebruiken binnen Theming&lt;/h2&gt;
  929. &lt;p&gt;Een methode om hier beter mee om te gaan is door Design Tokens te gaan gebruiken. Omdat Design Tokens juist bedoeld zijn om het gebruik van waarden (zoals kleur) te documenteren krijg je automatisch een meer gestructureerde manier van werken. Neem als voorbeeld hieronder waar het eerdere voorbeeld aangepast is om meer te werken volgens de filosofie van design tokens:&lt;/p&gt;
  930. &lt;pre&gt;&lt;code&gt;import { extendTheme } from &#39;@chakra-ui/react&#39;
  931.  
  932. /*
  933. Dit is een aangepaste versie van het eerdere voorbeeld
  934. Dit gebruikt nog steeds het kleurenschema van Chakra UI, maar de
  935. naamgevingen van de properties zijn daarentegen gebasseerd op de
  936. functie van de tokens. M.a.w. hoe de waarde gebruikt moet worden.
  937. Let op: niet iedere UI library ondersteunt het defiëneren van
  938. eigen tokens.
  939. Chakra UI ondersteunt dit wel, maar je moet dan nog wel handmatig
  940. deze tokens toepassen op de respectievelijke componenten.
  941. */
  942.  
  943. const theme = extendTheme({
  944.  semanticTokens: {
  945.    colors: {
  946.      error: {
  947.        border: &#39;red.500&#39;,
  948.      },
  949.      success: {
  950. border: &#39;green.500&#39;,
  951.      },
  952.      ctaButton: {
  953. background: &#39;red.500&#39;,
  954.      },
  955.      button: {
  956. background: &#39;yellow.800&#39;
  957.      },
  958.      text: {
  959. onLightBackground: &#39;gray.900&#39;, // heel donker grijs
  960. onDarkBackground: &#39;white&#39;
  961.      },
  962.    },
  963.  },
  964. })
  965. &lt;/code&gt;&lt;/pre&gt;
  966. &lt;p&gt;Als je Design Tokens voor Theming wilt gaan gebruiken dan is de eerste stap de beste manier vinden voor het definiëren van de token-namen. Een goede basis richtlijn hier is om de naamgeving van de tokens te baseren op waar ze voor gebruikt worden. Een vraag die je jezelf dan kan stellen is bijvoorbeeld hoe wordt &lt;code&gt;red.500&lt;/code&gt; gebruikt? En waarom? De antwoorden (op basis van ons voorbeeld) zijn dan:&lt;/p&gt;
  967. &lt;ul&gt;
  968. &lt;li&gt;
  969. &lt;ul&gt;
  970. &lt;li&gt;Als rand (border) kleur bij error meldingen&lt;/li&gt;
  971. &lt;/ul&gt;
  972. &lt;/li&gt;
  973. &lt;li&gt;
  974. &lt;ul&gt;
  975. &lt;li&gt;Als achtergrondkleur bij Call-to-action knoppen&lt;/li&gt;
  976. &lt;/ul&gt;
  977. &lt;/li&gt;
  978. &lt;/ul&gt;
  979. &lt;p&gt;Met deze basis van naamgeving op basis van functie, kan je vervolgens o.b.v. kleurenpalet (bijvoorbeeld gebaseerd op een ander merk), dezelfde tokens andere waarden geven:&lt;/p&gt;
  980. &lt;pre&gt;&lt;code&gt;import { extendTheme } from &#39;@chakra-ui/react&#39;
  981.  
  982. /* Pear computer&#39;s merk kleuren zijn &#39;red.500&#39;(primair)
  983. en &#39;yellow.800&#39;(secundair). */
  984.  
  985. const PearComputersDesignTokens = {
  986.  colors: {
  987.    error: {
  988.      border: &#39;red.500&#39;, // is de primaire kleur
  989.    },
  990.    success: {
  991.      border: &#39;green.500&#39;,
  992.    },
  993.    ctaButton: {
  994.      background: &#39;red.500&#39;, // is de primaire kleur
  995.    },
  996.    button: {
  997.      background: &#39;yellow.800&#39;,
  998.    },
  999.    text: {
  1000.      onLightBackground: &#39;gray.900&#39;, // heel donker grijs
  1001.      onDarkBackground: &#39;white&#39;
  1002.    },
  1003.  },
  1004. }
  1005.  
  1006. /* gebruikt oranje (primair en teal (mint-groen, secundair) en
  1007. blauw (tertiair), maar pas die anders toe dan Pear Computers.
  1008. Let op de achtergrondkleur van de ctaButton. */
  1009.  
  1010. const OrangeComputersDesignTokens = {
  1011.  colors: {
  1012.    error: {
  1013.      border: &#39;orange.700&#39;, // is de primaire kleur
  1014.    },
  1015.    success: {
  1016.      border: &#39;teal.500&#39;,
  1017.    },
  1018.    ctaButton: {
  1019.      background: &#39;teal.500&#39;, // is NIET de primaire kleur
  1020.    },
  1021.    button: {
  1022.      background: &#39;blue.800&#39;,
  1023.    },
  1024.    text: {
  1025.      onLightBackground: &#39;gray.900&#39;, // heel donker grijs
  1026.      onDarkBackground: &#39;white&#39;
  1027.    },
  1028.  },
  1029. }
  1030. const theme = extendTheme({
  1031.  semanticTokens: OrangeComputersDesignTokens,
  1032. })
  1033. &lt;/code&gt;&lt;/pre&gt;
  1034. &lt;h2&gt;Conclusie&lt;/h2&gt;
  1035. &lt;p&gt;Je zou kunnen zeggen op basis van de voorbeelden dat Design Tokens in deze context hetzelfde zijn als Theming, maar dat is niet helemaal waar. Ze gedragen zich enkel alleen maar zo. De kracht van het gebruiken van Design Tokens, voor het Themen van een applicatie of website, ligt in de methode van werken. Deze werkwijze dwingt, als het ware, om goed na te denken over de structuur en naamgeving van 1 van de meest basale onderdelen van een website.&lt;/p&gt;
  1036. &lt;p&gt;Dit betekend natuurlijk niet dat Design Tokens daarmee altijd de beste oplossing zijn voor Theming. De werkwijze van Design Tokens is namelijk met zo een hoge mate gestructureerd dat het ook meer tijd kost om te implementeren. Dus het loont altijd om eerst te evalueren of er genoeg tijd beschikbaar is om deze werkwijze te hanteren. Zo nee, is een simpelere oplossing misschien beter.&lt;/p&gt;
  1037. &lt;p&gt;Uiteindelijk is het in ieder project de kunst om de juiste balans tussen elegantie (goede architectuur e.d.) en pragmatisme (&lt;em&gt;OK&lt;/em&gt; is soms ook &lt;em&gt;goed&lt;/em&gt; genoeg) te vinden.&lt;/p&gt;
  1038. </content>
  1039.  </entry>
  1040.  <entry>
  1041.    <title>De Balans Tussen DRY en KISS</title>
  1042.    <link href="https://www.fronteers.nl/nl/blog/2022/12/de-balans-tussen-dry-en-kiss"/>
  1043.    <updated>2022-12-18T00:00:00Z</updated>
  1044.    <id>https://www.fronteers.nl/nl/blog/2022/12/de-balans-tussen-dry-en-kiss</id>
  1045.    <content xml:lang="nl" type="html">&lt;p&gt;Als professionele (front-end) developer is de kans groot dat je in een team werkt en dat je rekening moet houden met het feit dat andere developers met jouw code zullen moeten werken. Het is dan van belang dat je nette code schrijft. Allereerst zodat andere developers je code begrijpen, maar—laten we wel wezen—ook omdat je niet wilt dat andere developers denken dat je er niets van bakt. De makkelijkste manier om nette code te schrijven is door je te houden aan development principes.&lt;/p&gt;
  1046. &lt;h2&gt;Don’t Repeat Yourself&lt;/h2&gt;
  1047. &lt;p&gt;Eén van de beter bekende development principes is Don&#39;t Repeat Yourself, of DRY afgekort. Dit principe gaat vooral over slim programmeren. Het vinden van delen in je code die je kunt abstraheren. Krijg je het idee dat je telkens dezelfde functie schrijft om bijvoorbeeld een input te valideren, dan is het &lt;em&gt;slim&lt;/em&gt; om één functie te schrijven waar je elke waarde van de input door kunt halen om te valideren. Je houdt je code kort en je bespaart jezelf tijd omdat je jezelf niet hoeft te herhalen. Het is ook makkelijker om je code te beheren en het bespaart je tijd en moeite mochten er ooit veranderingen nodig zijn.&lt;/p&gt;
  1048. &lt;p&gt;Een goed voorbeeld van Don’t Repeat Yourself is de Factory Design Pattern in JavaScript. Een fancy naam, maar eigenlijk is het minder complex dan het lijkt.&lt;/p&gt;
  1049. &lt;p&gt;Laten we naar een klein voorbeeld kijken van de Factory Design Pattern.&lt;/p&gt;
  1050. &lt;p&gt;Stel dat we de volgende code hebben:&lt;/p&gt;
  1051. &lt;pre&gt;&lt;code&gt;const Kerstboom1 = {
  1052. type: &#39;Nordmann&#39;,
  1053. hoogte: 185,
  1054. aantalBallen: 75,
  1055. lichtAan() { console.log( &#39;🎄&#39; ) },
  1056. lichtUit() { console.log( &#39;🌲&#39; ) }
  1057. }
  1058. &lt;/code&gt;&lt;/pre&gt;
  1059. &lt;pre&gt;&lt;code&gt;const Kerstboom2 = {
  1060. type: &#39;Douglasspar&#39;,
  1061. hoogte: 500,
  1062. aantalBallen: 350,
  1063. lichtAan() { console.log( &#39;🎄&#39; ) },
  1064. lichtUit() { console.log( &#39;🌲&#39; ) }
  1065. }
  1066. &lt;/code&gt;&lt;/pre&gt;
  1067. &lt;p&gt;We maken hier twee keer een kerstboom object aan. De twee functies om de lichtjes aan en uit te doen zijn echter een beetje dubbelop. Ze zijn in beide kerstbomen precies hetzelfde. Dit is waar een Factory van pas komt.&lt;/p&gt;
  1068. &lt;pre&gt;&lt;code&gt;function kerstboomFactory( type, hoogte, aantalBallen ) {
  1069. return {
  1070. type,
  1071. hoogte,
  1072. aantalBallen,
  1073. lichtAan() {
  1074. console.log( &#39;🎄&#39; );
  1075. },
  1076. lichtUit() {
  1077. console.log( &#39;🌲&#39; );
  1078. }
  1079. }
  1080. }
  1081. const Kerstboom1 = kerstboomFactory( &#39;Nordmann&#39;, 185, 75 );
  1082. const Kerstboom2 = kerstboomFactory( &#39;Douglasspar&#39;, 500, 350 );
  1083. &lt;/code&gt;&lt;/pre&gt;
  1084. &lt;p&gt;De Factory is een functie die het creëren van de kerstboom centraliseert. Daarmee houden we onze code DRY. De herhalende delen–de functies–worden gedefinieerd in de functie en de variabele onderdelen zoals de type, hoogte en aantal ballen kunnen mee worden gegeven aan de functie als argumenten. Deze Factory is een minder complex voorbeeld. Je kunt ook wat complexer gaan, zoals het gebruiken van een &lt;code&gt;Class&lt;/code&gt;, maar dat is niet van belang voor dit artikel.&lt;/p&gt;
  1085. &lt;p&gt;Er zijn een boel andere design patterns voor JavaScript die helpen om je code DRY te houden. Ik kan je aanbevelen om eens te kijken op &lt;a href=&quot;http://patterns.dev/&quot;&gt;patterns.dev&lt;/a&gt; waar &lt;a href=&quot;https://www.lydiahallie.io/&quot;&gt;Lydia Hallie&lt;/a&gt; en &lt;a href=&quot;https://addyosmani.com/&quot;&gt;Addy Osmani&lt;/a&gt; een geweldige resource over dit onderwerp hebben opgericht.&lt;/p&gt;
  1086. &lt;h2&gt;Keep It Simple Stupid&lt;/h2&gt;
  1087. &lt;p&gt;Dit vind ik het development principe met de leukste naam: Keep It Simple Stupid, of KISS. Eigenlijk is het een &lt;em&gt;design&lt;/em&gt; principe gericht op gebruiksgemak voor de eindgebruiker. Maar het is ook prima toepasbaar op software development en een code base.&lt;/p&gt;
  1088. &lt;p&gt;De term zou zijn bedacht in de Amerikaanse marine waar ze met vliegtuigmotoren werkten. De hoofdingenieur zou gezegd hebben dat de motoren zo simpel moesten zijn dat in gevechtssituaties iemand met basic training en met simpel gereedschap de motoren moeten kunnen onderhouden.&lt;/p&gt;
  1089. &lt;p&gt;Ik wil diezelfde analogie op programmeren in teamverband toepassen. De code zou zo simpel en begrijpbaar moeten zijn dat een junior developer, iemand met weinig ervaring, de code kan onderhouden en er hun weg doorheen kan vinden.&lt;/p&gt;
  1090. &lt;p&gt;De beste manier om je code simpel te houden is om duidelijke afspraken te maken. Afspraken over hoe je je code schrijft:&lt;/p&gt;
  1091. &lt;ul&gt;
  1092. &lt;li&gt;Dat variabelen bovenaan een bestand worden gedeclareerd.&lt;/li&gt;
  1093. &lt;li&gt;Wat voor uitlijning en witruimte er word gebruikt.&lt;/li&gt;
  1094. &lt;li&gt;Welke naming conventions er worden gebruikt.&lt;/li&gt;
  1095. &lt;/ul&gt;
  1096. &lt;p&gt;Als elke developer in je team zich daar aan houdt krijg je consistente code die makkelijk te lezen hoort te zijn.&lt;/p&gt;
  1097. &lt;p&gt;Commentaar schrijven word ook vaak genoemd als manier om een code base toegankelijk te maken voor developers die er nog niet bekend mee zijn. Hoewel dat klopt ben ik persoonlijk van mening dat als je simpele code schrijft met duidelijke benamingen van je variabelen en functies, commentaar in veel gevallen niet nodig is. In programmeren noemen we dat zelf documenterende code (&lt;a href=&quot;https://en.wikipedia.org/wiki/Self-documenting_code&quot;&gt;self-documenting code&lt;/a&gt;). Maar soms kun je er niet omheen en dan is commentaar bij de code heel behulpzaam voor andere developers.&lt;/p&gt;
  1098. &lt;h2&gt;De Balans&lt;/h2&gt;
  1099. &lt;p&gt;Over het algemeen is het volgen van development principes een goed iets. De afgelopen jaren ben ik echter al een paar keer een developer tegengekomen die daar in door kon schieten waardoor het juist een averechts effect had. Twee verschillende gevallen om precies te zijn. In beide gevallen ging het om developers die erg bekend zijn met de Design Patterns die ik eerder hierboven ook noemde. Hele technische developers die ervaring hebben met delen van Front-end Development die voorheen meer met back-end werden geassocieerd totdat JavaScript frameworks dit mee naar de front-end brachten.&lt;/p&gt;
  1100. &lt;p&gt;Er waren gevallen waarbij deze twee developers oplossingen bedachten waar ze–in mijn mening–iets te veel waar doorgeschoten in het toepassen van bepaalde design patterns waardoor de code juist complexer werd dan had gehoeven. Functionaliteit werd geabstraheerd waardoor code over meerdere bestanden werd verdeeld. Er werd grot geschut ingezet voor een simpele kleine klus. De oplossingen zouden misschien passen bij grote features maar waren ongeschikt bij de kleine features waar ze nu werden toegepast.&lt;/p&gt;
  1101. &lt;p&gt;Het gevolg was dat een andere developer enige tijd later aan hetzelfde stuk code moest werken en veel tijd kwijt was om alles te vinden in de code en om alles te begrijpen. Junior developers en developers zoals ik–die aan de front-front-end kant zitten met meer kennis van HTML en CSS dan van technische design patterns in JavaScript–zouden hier de nadelige gevolgen van merken. In deze gevallen was ik het ook persoonlijk die moeite had om een ogenschijnlijk simpele bug op te lossen ook al kun je mij niet echt meer een junior developer noemen.&lt;/p&gt;
  1102. &lt;p&gt;Daarbij kunnen we terug komen op de analogie over vliegtuigmotoren en wat de Amerikaans ingenieur daar over zei. Hoe de vliegtuigmotoren zo simpel moeten zijn dat monteurs met basiskennis de motoren moeten kunnen repareren. De twee developers hadden de motor veel te complex gebouwd waardoor developers met basiskennis of zonder specialistische tools (kennis van JavaScript Design Patterns) het niet of moeilijk kunnen onderhouden.&lt;/p&gt;
  1103. &lt;p&gt;De onbalans hoeft niet perse te komen door te veel complexiteit. Je kunt je code ook zó simpel opzetten dat het veel tijd kost om het te onderhouden. Een extreem voorbeeld is misschien een statische website die volledig uit losse HTML pagina’s bestaat waarbij op elke pagina dezelfde header met navigatie voorkomt. Eén wijziging moet je dan op alle pagina’s toepassen.&lt;/p&gt;
  1104. &lt;p&gt;Ik vind dat er een balans moet worden gezocht tussen DRY en KISS. Tussen simpliciteit en complexiteit. Zeker als het gaat over een code base waar meerdere developers aan moeten werken. DRY code is goed totdat het te complex wordt voor (junior) developers om goed te begrijpen. KISS code is goed totdat het te simplistisch wordt en developers te veel tijd kwijt zijn met het onderhouden van de code.&lt;/p&gt;
  1105. &lt;p&gt;Denk aan je mede-developer.&lt;/p&gt;
  1106. </content>
  1107.  </entry>
  1108.  <entry>
  1109.    <title>Hoe de pandemie mijn werk en woning veranderde</title>
  1110.    <link href="https://www.fronteers.nl/nl/blog/2022/12/hoe-de-pandemie-mijn-werk-en-woning-veranderde"/>
  1111.    <updated>2022-12-17T00:00:00Z</updated>
  1112.    <id>https://www.fronteers.nl/nl/blog/2022/12/hoe-de-pandemie-mijn-werk-en-woning-veranderde</id>
  1113.    <content xml:lang="nl" type="html">&lt;p&gt;Maart 2020 was de maand dat de wereld (weer) voorgoed veranderde. Dit is de tweede keer voor mij en velen van ons dat het wereld voorgoed veranderde. Eerst op 11 september 2001 en nu in maart 2020. Hoewel er gesproken wordt over weer naar “normaal” gaan, is het “normaal” van voor maart 2020 is voorgoed weg. Onze manier van werken is voor velen veranderd: de pandemie liet zien dat voor vele vakgebieden thuiswerken mogelijk is, en dat mensen die thuis willen werken dat moeten kunnen, terwijl degenen die liever op kantoor werken dat ook kunnen blijven doen.&lt;/p&gt;
  1114. &lt;p&gt;Als iemand die immuungecompromitteerd is betekende de eerste twee maanden van de pandemie in compleet isolatie zitten. Ik ging alleen in de nachturen als de kans om iemand tegen te komen klein is, naar buiten om lucht te scheppen. Vrienden en familie brachten boodschappen voor me aan deur. Tot vandaag betekend het dat ik bij hoge infectiecijfers zo min mogelijk op kantoor wil zijn.&lt;/p&gt;
  1115. &lt;p&gt;Ik ben ook laatdoof en de lockdown bleek een goede uitkomst te zijn voor de toegankelijkheid in communicatie.&lt;/p&gt;
  1116. &lt;p&gt;Ik werk als front-end developer op een hogeschool bij de nieuws en magazine redactie. Ik werkte 4 dagen per week, altijd op kantoor, maar heel soms thuis. Op kantoor hadden we allemaal een Windows desktop en ik heb ook een MacBook.&lt;/p&gt;
  1117. &lt;p&gt;Dankzij de MacBook en cloud opslag kon ik makkelijk omschakelen naar voltijd thuiswerken. Het was alle hens aan dek bij de IT-afdeling om honderden laptops te regelen voor alle werknemers die van de ene dag op de andere moesten thuiswerken.&lt;/p&gt;
  1118. &lt;p&gt;Als doof persoon die altijd een schrijftolk nodig heeft voor vergaderingen, presentaties en belangrijke gesprekken bleek thuiswerken het beste wat er is qua communicatie. Nu moest iedereen wel alles via e-mail, tekstberichten en Teams communiceren. Voorheen was bijna alles mondeling op kantoor. Tolken op afstand was iets wat ik nooit gebruikt had. Het werkt heel simpel: mijn schrijftolk doet ook op de achtergrond mee met Teams vergaderingen. Alles wat gezegd word wordt naar mij gestreamd via een apart link.&lt;/p&gt;
  1119. &lt;p&gt;De eerste weken en maanden waren er veel haperingen en frustratie. Zelfs de beste internetverbinding viel soms weg midden in een vergadering of de tekst van de tolk liep vast. Ik begon last te krijgen van mijn pols en armen vanwege elke dag uren achter mijn bureau zitten.&lt;/p&gt;
  1120. &lt;p&gt;Niet alleen dat, ook het constant binnen zitten met lockdown deed me goed kijken naar wat ik miste in mijn huisinrichting. En zo begon de aanschaf van het ene na het andere essentiële item.&lt;/p&gt;
  1121. &lt;h2&gt;Mijn werkplek verbeteren&lt;/h2&gt;
  1122. &lt;p&gt;Toen de eerste lockdown startte had ik mijn MacBook Pro 13’ van 2019, een 23’ budget Asus monitor, een plat APple toetsenbord en een Apple trackpad. Tevens had ik een eerste generatie iPad Mini. Ik verving de Apple trackpad met een &lt;a href=&quot;https://support.logi.com/hc/en-us/articles/360035271133-Getting-Started-MX-Master-3&quot;&gt;Logitech MX Master 3&lt;/a&gt; en het Apple toetsenbord werd vervangen door een &lt;a href=&quot;https://www.keychron.com/products/keychron-k6-wireless-mechanical-keyboard&quot;&gt;Keychron K6&lt;/a&gt; met aluminium case, RGB lichten, en blauwe Gateron switches. Ik wilde altijd een mechanisch toetsenbord hebben en er was geen beter moment dan een lockdown. De Logitech en Keychron waren de juiste keuze, ik heb sindsdien geen last meer van RSI gehad.&lt;/p&gt;
  1123. &lt;p&gt;De iPad bleek zo oud dat het zelf met nieuwe updates het internet verbinding veel bufferde waardoor de tolk tekst die ik streamde vastliep. Ik heb toen een &lt;a href=&quot;https://support.apple.com/kb/SP822?locale=en_US&quot;&gt;iPad (8gen) me 128 GB&lt;/a&gt; met een Apple Pencil aangeschaft. De oude iPad mini was nog goed voor een tegoedbon van 20 euro. Het verschil was en dag en nacht tussen zo’n oude iPad mini en de nieuwste iPad van dat moment.&lt;/p&gt;
  1124. &lt;h2&gt;Ook andere aspecten maken thuiswerken fijner&lt;/h2&gt;
  1125. &lt;p&gt;Ik ben geen koffieleut en dronk het alleen als ik bij de koffiebar was. Ik had dus geen koffieapparaat thuis, maar omdat ik nu altijd thuis was besloot ik een eenvoudig apparaat te kopen voor als ik zin had in een kleine kopje maar geen tijd voor een koffiewandeling. Ik wilde geen van de capsule apparaten en koos voor de eenvoudige &lt;a href=&quot;https://www.melitta.co.uk/products/coffee-machines/filter-coffee-machines/aromaboy-filter-coffee-machine-retro/&quot;&gt;Melitta Aromaboy&lt;/a&gt; filterapparaat. Het is geen dure espressomachine, maar goed genoeg voor een kopje. Die staat nu mooi naast mijn &lt;a href=&quot;https://www.krups.nl/p/excellence-toaster-kh682d-broodrooster/7211003732&quot;&gt;broodrooster&lt;/a&gt;. Om de een of ander reden had ik ook nooit een broodrooster en besloot er eentje te kopen.&lt;/p&gt;
  1126. &lt;p&gt;Uitgebreid lunch maken, thee van losse blaadjes drinken, en koffiezetten werden een hobby. Op kantoor werken betekende vaak cafetaria voedsel, warm water uit de automaat in een papieren cup voor thee of een wandeling maken om een dure lunch te kopen. Nu had ik mijn eigen keuken met alle nodige apparaten en een AH om de hoek om elke dag een goede lunch te maken.&lt;/p&gt;
  1127. &lt;p&gt;Daarna besloot ik dat mijn kleine keuken aan een upgrade aan toe was. In de vorm van een nieuw rek waar mijn combi-oven op kon, mijn borden, glazen, &lt;a href=&quot;https://www.crock-pot.com/6-quart/crockpot-express-6-qt-pressure-cooker-black-stainless-steel/SAP_2100468.html&quot;&gt;Crockpot&lt;/a&gt; en nog wat onmisbare spullen. Ook een nieuw kookblok en kookplaat kwamen erbij. Het oude fornuis was een tweedehands ding dat maar half werkte, dus een nieuwe was hoognodig.&lt;/p&gt;
  1128. &lt;p&gt;Ondertussen besloot het wooncorporatie door te gaan met de voor de pandemie geplande verbouwingen in de herfst/winter. Mijn woning kreeg nieuwe ramen met dubbelglas, betere isolatie en nieuwe deuren. Het resultaat was een “nieuwe” uitstraling van de woonkamer. Tijdens de dagen en tijdsblokken dat mijn woning aan de beurt was was het wel stressen. Ik zat in mijn kleine keukentje te werken met mijn Macbook, mondmasker op, en een dikke trui, want mijn woning had op die momenten geen ramen en deuren.&lt;/p&gt;
  1129. &lt;p&gt;Nadat alles gedaan was besloot mijn koelkast ook dat het genoeg was na 17 jaar trouwe dienst. Gelukkig gebeurde dat in de tweede lockdown (of was het de derde lockdown) toen bezorgers weer binnen mochten. De lockdowns zijn een grote tijdloze vlek in mijn geheugen. En zo had ik alle reden een strakke moderne koelkast aan te schaffen die past bij mijn nieuwe keukeninrichting.&lt;/p&gt;
  1130. &lt;p&gt;Het totaalresultaat is een appartement met een praktische Manhattan-achtige keuken waar alles zijn plek heeft zonder vol en rommelig te zijn. Een werkplek met een voor mij ergonomische muis en toetsenbord, ondertussen ook met een &lt;a href=&quot;https://www.philips.co.uk/c-p/346E2CUAE_00/ultrawide-lcd-monitor&quot;&gt;Philips 34’ curved scherm&lt;/a&gt;. Geen last meer van tocht dankzij de nieuwe ramen en deuren. Een iPad die meerdere keren een superhandige oplossing is geweest. En dan heb ik het nog niet over de Lego pronkstukken op mijn boekenkast, want de eerste lockdown weken deed ik niks anders dan puzzels maken en Lego bouwen. En tenslotte, een van de beste dingen die uit de pandemie kwam is mijn vernieuwde liefde voor fotografie.&lt;/p&gt;
  1131. &lt;h2&gt;Vanuit lockdown ook goede dingen ontstaan&lt;/h2&gt;
  1132. &lt;p&gt;Tijdens de grote opruiming besloot ik al mijn oude camera spullen in te ruilen voor 1 goede kwaliteit compact camera. Een &lt;a href=&quot;https://shop.panasonic.com/cameras-and-camcorders/cameras/point-and-shoot-cameras/dc-lx100m2&quot;&gt;Lumix LX100 II&lt;/a&gt;. Sindsdien ben ik meer serieus bezig met mijn fotografie en had ik ook een actievere uitlaatklep en afleiding tijdens de lockdowns.&lt;/p&gt;
  1133. &lt;p&gt;Ondertussen werk ik al bijna 3 jaar thuis. Sinds dit jaar is het hybride werken geworden. Ik ben meestal 1 dag per week op kantoor, soms 2 dagen. Het is voor mij een goede combinatie. Door 1 a 2 keer per week op kantoor te zijn zie ik mijn collega’s en ben ik ook in een andere omgeving, wat mijn creativiteit bevordert. Als ik thuis werk hoef ik niet 2 uur per dag met de OV te reizen waardoor ik mijn dag rustiger kan beginnen doordat ik meer tijd heb. Ik kan mijn werkdag indelen zodat ik tussendoor boodschappen kan doen of een wandeling kan maken. Er is meer flexibiliteit.&lt;/p&gt;
  1134. &lt;p&gt;Ik heb geen enkele behoefte om weer voltijd op een kantoor te gaan werken. Mijn concentratie is ook beter omdat er niemand om me heen is. Hoewel ik doof ben is het visueel heel storend op een locatie waar honderden mensen zijn die het kantoor in- en uitlopen.&lt;/p&gt;
  1135. &lt;p&gt;Mijn werkgever zelf stimuleert hybride werken. Alle desktops zijn weg. Alle werknemers hebben nu een laptop. Als je wilt thuiswerken mag dat, als je op kantoor wilt werken kan dat ook. Hybride werken is nu de kern. Microsoft Teams is integrale software geworden waar tot vandaag nog steeds wekelijks afdelingsbrede meetings zijn, updates en dergelijke.&lt;/p&gt;
  1136. &lt;h2&gt;De toekomst&lt;/h2&gt;
  1137. &lt;p&gt;Het was een zware periode, vooral door persoonlijk omstandigheden. Maar in het eerste 1,5 jaar van de pandemie maakte technologie het mogelijk dat de wereld online samenkwam. Dankzij Teams en Zoom was ik altijd verbonden met anderen, van videochatten met vrienden en familie, online meetups tot online congressen. Chefs die vanuit hun eigen keuken mensen nieuwe gerechten leerden koken. We deelden allemaal samen de onwerkelijkheid dat de wereld stil stond. De pandemie toonde de kracht van goede technologie die mensen echt helpt. Ik hoop dat men deze lessen in de toekomst zal meenemen.&lt;/p&gt;
  1138. </content>
  1139.  </entry>
  1140.  <entry>
  1141.    <title>De uitvinding van het function keyword</title>
  1142.    <link href="https://www.fronteers.nl/nl/blog/2022/12/de-uitvinding-van-het-function-keyword"/>
  1143.    <updated>2022-12-16T00:00:00Z</updated>
  1144.    <id>https://www.fronteers.nl/nl/blog/2022/12/de-uitvinding-van-het-function-keyword</id>
  1145.    <content xml:lang="nl" type="html">&lt;p&gt;Ergens in een parallel universum dicht bij het jouwe... staat Steve Jobs op een groot podium.&lt;/p&gt;
  1146. &lt;p&gt;Na de introductie van de iPhone 20 en de nieuwe
  1147. iMac air max, zegt Steve:&lt;/p&gt;
  1148. &lt;p&gt;&amp;quot;One more thing&amp;quot;&lt;/p&gt;
  1149. &lt;p&gt;&amp;quot;Years ago when Apple acquired Netscape we tasked Brendan Eich to create JavaScript in 9 days. It was a tight deadline for sure, but he pulled through.&amp;quot;&lt;/p&gt;
  1150. &lt;p&gt;&amp;quot;Here at Apple we often wonder, just as the the rest of you, what we would have gotten if we had given Brendan 10 days instead.&amp;quot;&lt;/p&gt;
  1151. &lt;p&gt;Plotseling dooft het licht. Het auditorium gesluierd in duisternis.&lt;/p&gt;
  1152. &lt;p&gt;Het publiek houd zijn adem in... gaat het dan toch na al die jaren gebeuren...&lt;/p&gt;
  1153. &lt;p&gt;&amp;quot;&lt;a href=&quot;https://www.youtube.com/watch?v=IFPwm0e_K98&quot;&gt;Also sprach Zarathustra&lt;/a&gt;&amp;quot; begint te spelen.
  1154. Beelden schieten voorbij: man landt op de maan, klimaat crisis opgelost, vrede op aarde.&lt;/p&gt;
  1155. &lt;p&gt;En dan verschijnt het in beeld, één woord.
  1156. Één magisch woord!&lt;/p&gt;
  1157. &lt;p&gt;Het publiek begint te juichen, mensen vallen elkaar in de armen, emacs vs vim, spaces vs tabs, Tailwind vs CSS, het maakt niet uit.&lt;/p&gt;
  1158. &lt;p&gt;&amp;quot;Function&amp;quot;&lt;/p&gt;
  1159. &lt;p&gt;Steve Jobs spreekt met een glimlach:&lt;/p&gt;
  1160. &lt;p&gt;&amp;quot;The tyranny of the const lambda is finally at an end.&amp;quot;&lt;/p&gt;
  1161. &lt;p&gt;Terug naar ons universum.&lt;/p&gt;
  1162. &lt;p&gt;Deze post gaat over iets waar ik me mateloos aan erger, namelijk: de &amp;quot;const lambda&amp;quot; of de &amp;quot;const fat arrow&amp;quot; function.,&lt;/p&gt;
  1163. &lt;p&gt;Het idee achter het verhaal hierboven is het volgende: als het function keyword nu uitgevonden zou worden, zouden we nooit meer de &amp;quot;const lambda&amp;quot; gebruiken, en was iedereen nu bezig met blogposts schrijven over hoe geweldig het function keyword wel niet is.&lt;/p&gt;
  1164. &lt;p&gt;Even een paar voorbeelden van de &lt;code&gt;const lambda&lt;/code&gt;:&lt;/p&gt;
  1165. &lt;pre&gt;&lt;code&gt;// Een wiskundige berekening
  1166. const surfaceOfCircle = (diameter) =&amp;gt; {
  1167.  const radius = diameter / 2;
  1168.  return radius * radius * Math.PI;
  1169. };
  1170.  
  1171. // Een React component
  1172. const Greeter = ({name, age}) =&amp;gt; {
  1173.  return &amp;lt;p&amp;gt;Hello {name}, you are {age} years old&amp;lt;/p&amp;gt;
  1174. };
  1175. &lt;/code&gt;&lt;/pre&gt;
  1176. &lt;p&gt;Ik vind het &amp;quot;signaal&amp;quot; in deze code niet heel sterk.
  1177. Met &amp;quot;signaal&amp;quot; bedoel ik dat de schrijver de intentie, wat de code gaat doen, verbergt.&lt;/p&gt;
  1178. &lt;p&gt;We lezen van links naar rechts: eerst staat de naam er, en dan pas dat het een functie is.&lt;/p&gt;
  1179. &lt;p&gt;Neem de vorige twee voorbeelden, maar dan geschreven met het &lt;code&gt;function&lt;/code&gt; keyword:&lt;/p&gt;
  1180. &lt;pre&gt;&lt;code&gt;// Een wiskundige berekening
  1181. function surfaceOfCircle(diameter) {
  1182.  const radius = diameter / 2;
  1183.  return radius * radius * Math.PI;
  1184. }
  1185.  
  1186. // Een React component
  1187. function Greeter({name, age}) {
  1188.  return &amp;lt;p&amp;gt;Hello {name} you are {age} years old&amp;lt;/p&amp;gt;
  1189. }
  1190. &lt;/code&gt;&lt;/pre&gt;
  1191. &lt;p&gt;Ik vind deze varianten in mijn bescheiden mening veel leesbaarder, het signaal, de intentie is sterker.&lt;/p&gt;
  1192. &lt;p&gt;Van links naar rechts rusten mijn ogen op het keyword &amp;quot;function&amp;quot;, in één oogopslag weet ik wat er nu gaat komen... een functie.&lt;/p&gt;
  1193. &lt;p&gt;Is er dan geen enkele reden om een lambda / fat arrow te gebruiken? Nee hoor: voor callbacks zijn ze ideaal. Ze nemen dan juist &amp;quot;ruis&amp;quot; weg.&lt;/p&gt;
  1194. &lt;p&gt;Zoals bijvoorbeeld bij de verschillende array functions:&lt;/p&gt;
  1195. &lt;pre&gt;&lt;code&gt;const persons = [
  1196.  { name: &amp;quot;Maarten&amp;quot;, age: 33 },
  1197.  { name: &amp;quot;Tosca&amp;quot;, age: 31 },
  1198.  { name: &amp;quot;Owen&amp;quot;, age: 5 },
  1199.  { name: &amp;quot;Jane&amp;quot;, age: 2 },
  1200. ];
  1201.  
  1202. const adults = persons
  1203.  .filter(person =&amp;gt; person.age &amp;gt;= 18);
  1204. &lt;/code&gt;&lt;/pre&gt;
  1205. &lt;p&gt;Ook hebben lambda&#39;s de mooie eigenschap dat ze de &lt;code&gt;this&lt;/code&gt; niet manipuleren.&lt;/p&gt;
  1206. &lt;p&gt;Neem het volgende voorbeeld dat geschreven is voordat de lambda  beschikbaar was: het idee is dat de &lt;code&gt;birthday&lt;/code&gt; pas na 1 seconde wordt uitgevoerd.&lt;/p&gt;
  1207. &lt;pre&gt;&lt;code&gt;var person = {
  1208.  name: &amp;quot;Maarten&amp;quot;,
  1209.  age: 33,
  1210.  birthday: function () {
  1211.    setTimeout(function() {
  1212.      console.log(&amp;quot;Birthday timeout&amp;quot;, this);
  1213.  
  1214. this.age += 1;
  1215.    }, 1000);
  1216.  }
  1217. };
  1218. person.birthday();
  1219. &lt;/code&gt;&lt;/pre&gt;
  1220. &lt;p&gt;In de code hierboven zit een subtiele bug, namelijk dat de &amp;quot;this&amp;quot; in de timeout niet naar &amp;quot;person&amp;quot; wijst maar naar de &amp;quot;window&amp;quot;.&lt;/p&gt;
  1221. &lt;p&gt;Na 1 seconde is de &lt;code&gt;window.age&lt;/code&gt; dus met plus 1 gedaan wat &lt;code&gt;NaN&lt;/code&gt; (Not a Number) oplevert.&lt;/p&gt;
  1222. &lt;p&gt;Vroeger pre lambda loste je dit zo op:&lt;/p&gt;
  1223. &lt;pre&gt;&lt;code&gt;var person = {
  1224.  name: &amp;quot;Maarten&amp;quot;,
  1225.  age: 33,
  1226.  birthday: function () {
  1227.    // Stel de &amp;quot;this&amp;quot; even veilig zodat
  1228.    // het in de timeout gebruikt kan
  1229.    // worden.
  1230.    var self = this;
  1231.  
  1232.    setTimeout(function() {
  1233.      console.log(&amp;quot;Birthday timeout&amp;quot;, this, self);
  1234.  
  1235.      // Hier self ipv this omdat this
  1236.      // anders de `window` wijst.
  1237.      self.age += 1;
  1238.    }, 1000);
  1239.  }
  1240. };
  1241.  
  1242. // Pas na 1 seconde gaat age omhoog
  1243. person.birthday();
  1244. &lt;/code&gt;&lt;/pre&gt;
  1245. &lt;p&gt;Maar met lambda / fat arrow functions hoeft dit &lt;code&gt;self&lt;/code&gt; trucje dus niet meer. Lambda functions behouden de &lt;code&gt;this&lt;/code&gt;:&lt;/p&gt;
  1246. &lt;pre&gt;&lt;code&gt;const person = {
  1247.  name: &amp;quot;Maarten&amp;quot;,
  1248.  age: 33,
  1249.  birthday() {
  1250.    setTimeout(() =&amp;gt; {
  1251.      console.log(&amp;quot;Birthday timeout&amp;quot;, this);
  1252.  
  1253.      this.age += 1;
  1254.    }, 1000);
  1255.  }
  1256. };
  1257. person.birthday();
  1258. &lt;/code&gt;&lt;/pre&gt;
  1259. &lt;p&gt;Lambda functies zijn dus helemaal zo gek nog niet.&lt;/p&gt;
  1260. &lt;ul&gt;
  1261. &lt;li&gt;Mijn advies samengevat is dus: gebruik het function keyword&lt;/li&gt;
  1262. &lt;li&gt;om functies te definieren in plaats van &amp;quot;const lambda&amp;quot;&lt;/li&gt;
  1263. &lt;li&gt;voor een sterker signaal.&lt;/li&gt;
  1264. &lt;/ul&gt;
  1265. &lt;p&gt;En gebruik lambda&#39;s voor callbacks, voor compactere code, en om vervelende this bugs te voorkomen.&lt;/p&gt;
  1266. </content>
  1267.  </entry>
  1268.  <entry>
  1269.    <title>How I stopped worrying and learned to love Docker</title>
  1270.    <link href="https://www.fronteers.nl/nl/blog/2022/12/how-i-stopped-worrying-and-learned-to-love-docker"/>
  1271.    <updated>2022-12-15T00:00:00Z</updated>
  1272.    <id>https://www.fronteers.nl/nl/blog/2022/12/how-i-stopped-worrying-and-learned-to-love-docker</id>
  1273.    <content xml:lang="nl" type="html">&lt;p&gt;Developen is natuurlijk het leukste als de omgeving waarop je werkt ook zonder issues werkt. Dat scheelt veel frustratie en je hoeft alleen maar na te denken over het schrijven van mooie code. Zo werkten we op mijn werk eerst met VirtualBox / Vagrant. We gebruikten één virtual machine waarop alle sites draaiden. Om een website draaiend te krijgen moesten we na een Git clone nog best veel handelingen verrichten om een website daadwerkelijk te kunnen gebruiken. Werkte &lt;em&gt;oké-ish&lt;/em&gt;, maar daarna zijn we overgestapt naar Docker, en dat vind ik dus een ontzettende verbetering van mijn workflow. Maar ik hoor ook veel geluiden van front-end developers die al beginnen te huilen als ze in de buurt van Docker komen. Dus ik heb besloten uit te leggen hoe wij het ingericht hebben, in de hoop dat andere developers er hun voordeel mee kunnen doen.&lt;/p&gt;
  1274. &lt;p&gt;Twee disclaimers:&lt;/p&gt;
  1275. &lt;ul&gt;
  1276. &lt;li&gt;Eén: Er zijn veel manieren om Docker in te richten dus ik weet alleen dat onderstaande voor mij werkt met onze opzet.&lt;/li&gt;
  1277. &lt;li&gt;Twee: ik ben geen back-end developer, dus ik weet niet exact waarom zaken zó ingericht zijn en of het beter of anders kan.&lt;/li&gt;
  1278. &lt;/ul&gt;
  1279. &lt;h2&gt;Waarom gebruiken we Docker?&lt;/h2&gt;
  1280. &lt;p&gt;De marketing uitleg: Docker is een zogenoemd ‘containerization platform’ waarmee je sites en apps kan bouwen, deployen en onderhouden met behulp van containers.&lt;/p&gt;
  1281. &lt;p&gt;Hoe werkt dat in de praktijk? Stel, je werkt met een team aan een site. Eén developer werkt op Windows, twee werken op Linux, en een ander weer op een macOS. Dan heb je op elk van deze computers in feite een andere omgeving, met evenveel variabelen waardoor zaken net weer anders kunnen werken. (En iedereen kent wel de uitdrukking: ‘Works on my machine’.)&lt;/p&gt;
  1282. &lt;p&gt;Deze verschillen kan je elimineren door je site in te pakken in een Docker container. Dit kan je zien als een mini-virtual machine met dezelfde instellingen, die je commit in de repo. Dus iedereen die het project binnenhaalt kan aan de hand van deze instellingen dezelfde virtual machine aanmaken, en dus de site op exact dezelfde omgeving runnen.&lt;/p&gt;
  1283. &lt;p&gt;Zo kunnen developers dus werken zonder zich druk te maken om de omgeving. Op mijn werk hebben we dit inmiddels &lt;em&gt;smooth&lt;/em&gt; aan de praat voor iedereen, en het bevalt prima!&lt;/p&gt;
  1284. &lt;h2&gt;De Happy Path: Wat doe ik als front-ender als alles goed gaat&lt;/h2&gt;
  1285. &lt;p&gt;In het meest ideale geval verlopen de stappen als volgt:&lt;/p&gt;
  1286. &lt;ul&gt;
  1287. &lt;li&gt;&lt;code&gt;git clone&lt;/code&gt; Ik clone de repo van onze git repository&lt;/li&gt;
  1288. &lt;li&gt;Ik krijg een gezipte database (meestal vanuit de productie website, zodat deze lekker up-to-date is) aangeleverd, en zet die in de lege &lt;code&gt;/docker/database&lt;/code&gt; directory. Voor multi-site systemen (meerdere websites die draaien op één codebase) zet ik de database een mapje dieper, maar het principe blijft hetzelfde.&lt;/li&gt;
  1289. &lt;li&gt;In de root staat een /.env.example file met de Docker instellingen. Deze kopieer ik naar een nieuwe /.env file . Deze file staat in de .gitignore en wordt dus niet mee gecommit.&lt;/li&gt;
  1290. &lt;li&gt;In een apart terminalvenster draai ik &lt;code&gt;docker compose up&lt;/code&gt; en hops: mijn containers draaien! Dit venster laat ik open zodat ik eventuele foutmeldingen kan zien.&lt;/li&gt;
  1291. &lt;li&gt;Bij mij betekenen bovenstaande stappen dat ik vervolgens my-website.localhost heb draaien, waar ik kan zien wat ik doe.&lt;/li&gt;
  1292. &lt;/ul&gt;
  1293. &lt;p&gt;Naast het bovenstaande heb ik als GUI Docker Desktop draaien, waar ik een visueel overzicht heb welke containers draaien. Daar kan ik eventueel ook een enkele container snel weggooien en herstarten indien nodig.&lt;/p&gt;
  1294. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog-anke-1.png&quot; alt=&quot;Het Docker Desktop overzichtsvenster. In het groen zijn de draaiende containers weergegeven met relevante info over versies en poorten erachter. In het grijs de containers die ook aanwezig zijn maar nu niet draaien. Het oranje label geeft overigens aan dat er één container is die nog niet op een versie draait die compatible is met de M1 MacBook.&quot; /&gt;&lt;/p&gt;
  1295. &lt;p&gt;Het Docker Desktop overzichtsvenster. In het groen zijn de draaiende containers weergegeven met relevante info over versies en poorten erachter. In het grijs de containers die ook aanwezig zijn maar nu niet draaien. Het oranje label geeft overigens aan dat er één container is die nog niet op een versie draait die compatible is met de M1 MacBook.&lt;/p&gt;
  1296. &lt;p&gt;Bovenstaande workflow vereist eigenlijk geen enkele Docker kennis. Als ik een database heb en de repository, dan krijg ik de boel draaiend.&lt;/p&gt;
  1297. &lt;p&gt;Als ik klaar ben met mijn project, of switch van project, ga ik naar het terminalvenster met de draaiende Docker container, en stop ik met ctrl-c alle containers van het project.&lt;/p&gt;
  1298. &lt;h2&gt;Hoe zit deze opzet in elkaar?&lt;/h2&gt;
  1299. &lt;p&gt;Wij ontwikkelen voornamelijk sites op het CMS Drupal, en onze opzet volgt het systeem van &lt;a href=&quot;https://github.com/wodby/docker4drupal&quot;&gt;Wodby&lt;/a&gt; .&lt;/p&gt;
  1300. &lt;p&gt;Een Docker container is een “soort van” kleine virtual machine. Docker maakt gebruik van ‘images’. Dit zijn instructiesets / commando’s waarmee de containers worden ingericht. Zo heb je bijvoorbeeld een PHP image, een Nginx image etc. Een PHP image zal dus bijvoorbeeld zorgen dat de juiste versie van PHP geïnstalleerd wordt op de PHP container. Het basisprincipe van Docker is dat je probeert om elke container maar één verantwoordelijkheid te geven. De PHP container is dus bijvoorbeeld alléén maar verantwoordelijk voor PHP en de Mysql container is alléén maar verantwoordelijk voor het draaien van Mysql.&lt;/p&gt;
  1301. &lt;p&gt;Om te zorgen dat alle containers goed samenwerken maken we gebruik van Docker Compose [https://docs.docker.com/compose/ ]. Bij Docker Compose maak je gebruik van een YAML file om alle services van je applicatie te configureren: &lt;code&gt;/docker-compose.yml&lt;/code&gt;. Daarin staat bv welke services (PHP, Apache, Nginx, MariaDB, node, elastic etc) je site of applicatie gebruikt en op welke poort een service draait. Deze file importeert op zijn beurt weer de variabelen die per omgeving in de hierboven genoemde .env file gezet zijn. Hierin staat bv &lt;em&gt;welke&lt;/em&gt; versie van bovengenoemde service wordt gebruikt, en welke image moet worden binnen gehaald. Bij Flink maken we vaak ook gebruik van de images van &lt;a href=&quot;https://hub.docker.com/u/wodby/#!&quot;&gt;Wodby&lt;/a&gt;, omdat deze goed configureerbaar zijn, over het algemeen goed up-to-date zijn en een volledig ecosysteem levert (PHP, Mysql, Nginx, etc.).&lt;/p&gt;
  1302. &lt;p&gt;Bij het commando &lt;code&gt;docker compose up&lt;/code&gt; worden de containers opgestart (en gedownload als ze nog niet beschikbaar waren), de services geïnstalleerd en samengevoegd tot een werkende omgeving. Er worden per Docker image commando’s uitgevoerd die in de docker-compose.yml staan. Zo wordt er voor de database container bijvoorbeeld gecheckt of er al een eerder gebruikte database container aanwezig is. Zo niet, dan bouwt Docker er eentje en importeert daarna de database die ik net in de /docker/database directory geplaatst heb.&lt;/p&gt;
  1303. &lt;h2&gt;Deze Docker files hebben we in de root van onze sites staan&lt;/h2&gt;
  1304. &lt;pre&gt;&lt;code&gt;/docker
  1305. /database
  1306. /name-of-database.gzip
  1307. .env.example
  1308. .env ( = de door de gebruiker gemaakte kopie van .env. example)
  1309. docker-compose.yml
  1310. /web (de site)
  1311. + de normale files die in de root van je repo staan
  1312. &lt;/code&gt;&lt;/pre&gt;
  1313. &lt;h2&gt;Gaat alles dan altijd meteen goed?&lt;/h2&gt;
  1314. &lt;p&gt;Nee. Sterker nog, in het begin heb ik heel veel moeten troubleshooten om dingen werkend te krijgen. Waar liep ik tegenaan?&lt;/p&gt;
  1315. &lt;h2&gt;Containers crashten bij opstarten&lt;/h2&gt;
  1316. &lt;p&gt;Ik was de eerste met een M1 MacBook op kantoor. En regelmatig werkte de specifieke versie van een container die in de .env file stond niet voor de M1. Deze heeft namelijk een nieuwe architectuur van de chip ten opzichte van oudere MacBooks, en dus ook aangepaste images nodig. Hier liep ik regelmatig tegen aan met bijvoorbeeld mariaDB en Nginx containers. Dus dat betekende zoeken tot je een versie had die wel op de M1 werkte en dat in je .env file aanpassen. En omdat de .env file in de .gitignore staat, blijft die wijziging alleen lokaal. (Ter referentie, dit geeft vaak de volgende error: &lt;code&gt;runtime: failed to create new OS thread (have 2 already; errno=22&lt;/code&gt;)&lt;/p&gt;
  1317. &lt;h2&gt;Geheugenproblemen&lt;/h2&gt;
  1318. &lt;p&gt;Daarnaast heeft mijn MacBook maar 8gb geheugen. En dat is eigenlijk te weinig voor Docker, dat bij default ongeveer 6gb geheugen wil. Je kan het lager instellen (via Docker Desktop) maar naar minder dan 6gb luistert ie eigenlijk niet. En dat betekent dus dat je nog maar 2 gb over hebt voor de rest van je systeem. Spoiler: Dat is te weinig. In mijn geval betekent dat regelmatig mijn PhpStorm en/of Firefox herstarten om wat geheugen vrij te maken. Maar zorg dus dat je in ieder geval 16gb geheugen hebt, als je op een MacBook ontwikkelt.&lt;/p&gt;
  1319. &lt;h2&gt;Wat gebruik ik daarnaast nog?&lt;/h2&gt;
  1320. &lt;p&gt;In elke directory staat NVM (&lt;a href=&quot;https://github.com/nvm-sh/nvm&quot;&gt;Node Version Manager&lt;/a&gt;), die ons de juiste Node versie serveert. Daarnaast natuurlijk een &lt;code&gt;package.json&lt;/code&gt; waardoor we met &lt;code&gt;npm install&lt;/code&gt; meteen de juiste versies van de benodigde node modules kunnen installeren.&lt;/p&gt;
  1321. &lt;p&gt;Wij draaien Grunt met Browsersync om mijn scss te compileren en live updates te zien in de browser. (Gezien de tijd dat Grunt al meegaat hebben mensen hier vast een mening over, maar het draait en het draait snel en stabiel. ) Bij onze Docker containers gebruiken we de volgende opties van browsersync in de Gruntfile.js:&lt;/p&gt;
  1322. &lt;pre&gt;&lt;code&gt;options: {
  1323.              watchTask: true,
  1324.              proxy: &#39;&amp;lt;http://www-mysite-nl.localhost&amp;gt;&#39;,
  1325.              host: &#39;www-mysite-nl.localhost&#39;,
  1326.              open: false
  1327.           }
  1328. &lt;/code&gt;&lt;/pre&gt;
  1329. &lt;p&gt;En om browsersync zonder problemen te draaien heb ik in mijn hostfile op de mac (/etc/hosts) de volgende regel staan: &lt;code&gt;127.0.0.1    www-mysite-nl.localhost&lt;/code&gt;&lt;/p&gt;
  1330. &lt;p&gt;De &lt;code&gt;127.0.0.1&lt;/code&gt; is op de Mac vooralsnog nodig, zonder deze extra aanwijzing werkt &lt;code&gt;www-mysite-nl.localhost:3000&lt;/code&gt; niet als locatie voor de live update van browsersync.&lt;/p&gt;
  1331. &lt;p&gt;Toelichting hierover van mijn back-end collega Paul: Windows / Docker op Windows kan tegenwoordig overweg gaan met subdomeinen van localhost. Mac kan dat (nog) niet. Een oplossing hiervoor kan zijn, om te werken op een daadwerkelijk domein die verwijst naar je localhost, bijv. een .dev domein. Voor nu plaatsen we op de Mac de domeinreferentie in de hosts file, wat het probleem ook oplost.&lt;/p&gt;
  1332. &lt;h2&gt;Vergeet de README niet!&lt;/h2&gt;
  1333. &lt;p&gt;Er zijn natuurlijk veel verschillende manieren van het opzetten van je Docker structuur. En de bedoeling van Docker is dat iedereen die het project cloned dezelfde omgeving kan gebruiken en dat het hun leven &lt;em&gt;makkelijker&lt;/em&gt; maakt. Zorg dus dat je in de README van het project duidelijk omschrijft welke stappen er nodig zijn om deze Docker container aan de praat te krijgen. En dan liever teveel dan te weinig uitleg, want je wil ook je freelancers en stagiairs die minder kennis hebben van de ‘normale’ workflow in jullie bedrijf goed kunnen helpen.&lt;/p&gt;
  1334. &lt;h2&gt;Docker compose HUP!&lt;/h2&gt;
  1335. &lt;p&gt;Inmiddels hebben wij alle omgevingen &lt;em&gt;flawless&lt;/em&gt; draaien op de computers van alle developers. Ik vind het onzettend fijn werken, omdat je met één command in de juiste directory, namelijk &lt;code&gt;docker compose up&lt;/code&gt; , in een paar seconden exact de omgeving hebt die je eerder had draaien, totaal onafhankelijk van de andere projecten waar je aan werkt.&lt;/p&gt;
  1336. &lt;p&gt;Ik hoop dat ik op deze manier een beetje inzicht heb kunnen geven in hoe ik met Docker werk, en de voordelen die het heeft als je het goed inricht. En het blijft een proces. Bij ons op het werk was het ook niet in één keer goed, maar omdat we er dagelijks gebruik van maken en tijd hebben gemaakt om de verbeteringen in alle sites door te voeren, hebben we nu een tamelijk &lt;em&gt;foolproof&lt;/em&gt; implementatie waar de feedback van al onze collega’s in meegenomen is. Succes met je eigen opzet, en hopelijk is dit het einde van minimaal één geval van ‘works on my machine’.&lt;/p&gt;
  1337. &lt;h2&gt;Dank!&lt;/h2&gt;
  1338. &lt;p&gt;Veel dank aan mijn collega Paul Dudink, die bij ons op Flink de Docker omgevingen heeft ingericht en mij van veel extra informatie en aanvullingen voorzien heeft voor deze blogpost.&lt;/p&gt;
  1339. &lt;h2&gt;Resources:&lt;/h2&gt;
  1340. &lt;ul&gt;
  1341. &lt;li&gt;&lt;a href=&quot;https://github.com/docker/awesome-compose&quot;&gt;kant en klare docker-compose.yml voorbeelden voor diverse omgevingen&lt;/a&gt;&lt;/li&gt;
  1342. &lt;li&gt;&lt;a href=&quot;https://wodby.com/docs/1.0/stacks/drupal/local/&quot;&gt;Wodby documentatie Docker voor Drupal installaties&lt;/a&gt;&lt;/li&gt;
  1343. &lt;/ul&gt;
  1344. </content>
  1345.  </entry>
  1346.  <entry>
  1347.    <title>Wees (niet) slim en gebruik webstandaarden</title>
  1348.    <link href="https://www.fronteers.nl/nl/blog/2022/12/wees-niet-slim-en-gebruik-webstandaarden"/>
  1349.    <updated>2022-12-14T00:00:00Z</updated>
  1350.    <id>https://www.fronteers.nl/nl/blog/2022/12/wees-niet-slim-en-gebruik-webstandaarden</id>
  1351.    <content xml:lang="nl" type="html">&lt;p&gt;Aangezien dit een lang artikel is, eerst even in het kort:&lt;/p&gt;
  1352. &lt;ul&gt;
  1353. &lt;li&gt;Gebruik van webstandaarden kunnen je helpen keuzes te maken;&lt;/li&gt;
  1354. &lt;li&gt;Slimmere mensen dan ik hebben allerlei manieren bedacht om het wereldwijde web te gebruiken, inclusief allerlei randvoorwaarden en afwegingen;&lt;/li&gt;
  1355. &lt;li&gt;Er bestaat een voorstel voor alles wat je maar kan bedenken;&lt;/li&gt;
  1356. &lt;li&gt;Het web is niet gemaakt voor de browser;&lt;/li&gt;
  1357. &lt;li&gt;Jij gebruikt webstandaarden.&lt;/li&gt;
  1358. &lt;/ul&gt;
  1359. &lt;p&gt;Ben je een front-end developer die meer wil weten over het internet of het wereldwijde web? Ben je een full-stack developer (in wat voor hoedanigheid dan ook) en wil je meer weten over webstandaarden? Wil je helpen met keuzes maken bij architectuur of design van een (web-)API (application programming interface)?&lt;/p&gt;
  1360. &lt;p&gt;Als je op een van de bovenstaande vragen ja heb geantwoord, of je het een interessant onderwerp lijkt, dan is dit artikel voor jou!&lt;/p&gt;
  1361. &lt;p&gt;&lt;em&gt;💡 Doorgaans worden webstandaarden geschreven en gepubliceerd in het Engels. Alle links naar zo&#39;n standaard, een RFC (wat dat is volgt), of media type registratie wijzen naar pagina&#39;s in het Engels&lt;/em&gt;.&lt;/p&gt;
  1362. &lt;h2&gt;Wat is het wereldwijde web?&lt;/h2&gt;
  1363. &lt;p&gt;Om het over webstandaarden te hebben is het handig om eerst een aantal definities te benoemen en toe te lichten.&lt;/p&gt;
  1364. &lt;h2&gt;HTTP&lt;/h2&gt;
  1365. &lt;p&gt;HTTP staat voor Hypertext Transfer Protocol.&lt;/p&gt;
  1366. &lt;p&gt;Een protocol is doorgaans een set van regels om een doel te bereiken. In dit geval gaat het om een communicatie en overdrachts protocol en beschrijft de syntax, semantiek, foutdetectie en -correctie, synchronisatie om het volgende te bewerkstelligen:&lt;/p&gt;
  1367. &lt;blockquote&gt;
  1368. &lt;p&gt;&amp;quot;...where hypertext documents include hyperlinks to other resources that the user can easily access.&amp;quot; &lt;a href=&quot;https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol&quot;&gt;&lt;em&gt;Wikipedia&lt;/em&gt;&lt;/a&gt;&lt;/p&gt;
  1369. &lt;/blockquote&gt;
  1370. &lt;p&gt;Ofwel: &lt;em&gt;hypertext&lt;/em&gt; documenten die &lt;em&gt;hyperlinks&lt;/em&gt; bevatten naar andere &lt;em&gt;resources&lt;/em&gt; die een &lt;em&gt;gebruiker&lt;/em&gt; eenvoudig kan raadplegen. Wat deze begrippen inhouden volgt.&lt;/p&gt;
  1371. &lt;h2&gt;Hypertext, hyperlinks, hypermedia&lt;/h2&gt;
  1372. &lt;p&gt;&amp;quot;Hyper-&amp;quot; van de Griekse prefix &amp;quot;ὑπερ-&amp;quot;, hetgeen &lt;em&gt;over&lt;/em&gt; of &lt;em&gt;super&lt;/em&gt;, ofwel &lt;em&gt;meer dan&lt;/em&gt; betekent.&lt;/p&gt;
  1373. &lt;ul&gt;
  1374. &lt;li&gt;&lt;em&gt;Hypertext&lt;/em&gt; is tekst die digitaal wordt weergegeven, met referenties (jawel, de hyperlink) naar andere (hyper)tekst waar een gebruiker direct bij kan.&lt;/li&gt;
  1375. &lt;li&gt;&lt;em&gt;Hyperlink&lt;/em&gt; is een link (een referentie) die een gebruiker toegang geeft tot de data achter die link.&lt;/li&gt;
  1376. &lt;li&gt;&lt;em&gt;Hypermedia&lt;/em&gt; is een extensie van de term hypertext en beschrijft de non-lineaire (digitale) media dat platte tekst, hyperlinks, maar ook plaatjes, audio, en video bevat.&lt;/li&gt;
  1377. &lt;/ul&gt;
  1378. &lt;p&gt;Een voorbeeld van een &lt;em&gt;hypermedium&lt;/em&gt; is het WereldWijde Web!&lt;/p&gt;
  1379. &lt;h2&gt;HTML&lt;/h2&gt;
  1380. &lt;p&gt;&lt;a href=&quot;https://html.spec.whatwg.org/&quot;&gt;HTML&lt;/a&gt; staat voor HyperText Markup Language.&lt;/p&gt;
  1381. &lt;p&gt;Dit betekent dus ook dat &lt;em&gt;hypertext&lt;/em&gt; niet hetzelfde is als &lt;em&gt;HTML&lt;/em&gt;, maar een manier om hypertext &lt;em&gt;op te maken&lt;/em&gt; (te markeren) zodat de data (de tekst, en bij hypermedia ook de andere inhoud) kan worden weergegeven of gerefereerd kan worden (juist, met &lt;em&gt;hyperlinks&lt;/em&gt;).&lt;/p&gt;
  1382. &lt;p&gt;&lt;a href=&quot;https://html.spec.whatwg.org/&quot;&gt;De HTML standaard&lt;/a&gt; is bedoeld om documenten te annoteren zodat ze kunnen worden weergegeven in een web browser. Daarmee is het een manier om hypertekst interactief te maken. De web browser is daarmee (ook) een stuk gereedschap om hyperlinks te volgen.&lt;/p&gt;
  1383. &lt;p&gt;HTTP helpt ons HTML documenten te versturen. Het is immers een Hypertext &lt;em&gt;Transfer Protocol&lt;/em&gt; voor documenten geschreven in Hypertext Markup Language.&lt;/p&gt;
  1384. &lt;h2&gt;...en andere media dan?&lt;/h2&gt;
  1385. &lt;p&gt;Als je het web surft, dan heb je doorgaans niet alleen met tekst — plat of opgemaakt — te maken. Je komt ook vaak genoeg andere inhoud tegen zoals plaatjes, audio, video, en andere niet-tekstuele inhoud.&lt;/p&gt;
  1386. &lt;p&gt;De slimme mensen die HTTP tot leven hebben gebracht (en daarna verder hebben ontwikkeld), hebben een slimme manier bedacht om het mogelijk te maken dat HTTP meer beschrijft en aankan dan &lt;em&gt;alleen&lt;/em&gt; hypertext en hypertext-documenten versturen. Dit is ondersteund in HTTP door het gebruik van metadata die, samen met de inhoud waar je om hebt gevraagd, wordt mee gestuurd.&lt;/p&gt;
  1387. &lt;p&gt;Voor de ondersteuning van andere media dan HTML (en hypertext) wordt meestal gebruik gemaakt van een &lt;em&gt;Media type (MIME TYPE)&lt;/em&gt;.&lt;/p&gt;
  1388. &lt;h2&gt;Mediatype&lt;/h2&gt;
  1389. &lt;blockquote&gt;&lt;/blockquote&gt;
  1390. &lt;p&gt;Op het web spreken we technisch van &lt;em&gt;representaties&lt;/em&gt; van een &lt;em&gt;resource&lt;/em&gt;. Het formaat van zo&#39;n representatie (dus de syntax, de regels, het gebruik, de beperkingen, enzovoorts) noemen we ook wel een &lt;em&gt;media type&lt;/em&gt;.&lt;/p&gt;
  1391. &lt;p&gt;Een aantal voorbeelden van media types zijn:&lt;/p&gt;
  1392. &lt;ul&gt;
  1393. &lt;li&gt;&lt;code&gt;text/html&lt;/code&gt;&lt;/li&gt;
  1394. &lt;li&gt;&lt;code&gt;image/png&lt;/code&gt;&lt;/li&gt;
  1395. &lt;li&gt;&lt;code&gt;application/json&lt;/code&gt;&lt;/li&gt;
  1396. &lt;/ul&gt;
  1397. &lt;p&gt;Er zijn regels over de syntax en het gebruik van deze media types. We hebben met elkaar afgesproken hoe bepaalde binaire data kan worden geïnterpreteerd (gelezen) of worden gearrangeerd (geschreven). Een PNG plaatje is een PNG plaatje als we de binaire data &lt;em&gt;interpreteren&lt;/em&gt; als PNG. Hoe dat voor PNG moet is opgeschreven en aangenomen als standaard alvorens het (publiek) te registreren.&lt;/p&gt;
  1398. &lt;h2&gt;Het registeren van een media type?&lt;/h2&gt;
  1399. &lt;p&gt;Juist. Hier zijn nog drie voorbeelden van media types:&lt;/p&gt;
  1400. &lt;ul&gt;
  1401. &lt;li&gt;&lt;code&gt;application/vnd.ms-powerpoint&lt;/code&gt;&lt;/li&gt;
  1402. &lt;li&gt;&lt;code&gt;application/graphql&lt;/code&gt;&lt;/li&gt;
  1403. &lt;li&gt;&lt;code&gt;application/vnd.xpbytes.errors.v1+json&lt;/code&gt;&lt;/li&gt;
  1404. &lt;/ul&gt;
  1405. &lt;p&gt;Het eerste beschrijft Microsoft Powerpoint bestanden, het tweede was lang de standaard-niet-standaard manier om GraphQL queries en antwoorden te beschrijven, en de laatste is één van de vele &lt;em&gt;vendor (&lt;code&gt;vnd&lt;/code&gt;) specifieke&lt;/em&gt; media types die intern op werk veel wordt gebruikt om foutmeldingen te beschrijven.&lt;/p&gt;
  1406. &lt;p&gt;Er is een document (en standaard) dat beschrijft hoe je een media type kan registreren:&lt;/p&gt;
  1407. &lt;blockquote&gt;
  1408. &lt;p&gt;&lt;a href=&quot;https://tools.ietf.org/html/rfc6838&quot;&gt;RFC 6838: Media Type Specifications and Registration Procedures&lt;/a&gt;&lt;/p&gt;
  1409. &lt;/blockquote&gt;
  1410. &lt;p&gt;Het doel van het registreren van zo&#39;n media type is dat het gebruikt kan worden op het internet, en dat we het er over eens kunnen worden hoe de data kan worden geïnterpreteerd. Er is geen verplichting (regel) om dit te doen voor media types die beginnen met &lt;code&gt;vnd.&lt;/code&gt;, maar het process kan helpen met het schrijven, opschonen, en verbeteren van een specificatie.&lt;/p&gt;
  1411. &lt;p&gt;Voor media types buiten de &lt;code&gt;vnd.&lt;/code&gt; (vendor) en &lt;code&gt;prs.&lt;/code&gt; (personal) boom — media types die niet beginnen met die prefix — bestaat de verplichting wel. Iets is officieel pas een media type als deze geregistreerd is.&lt;/p&gt;
  1412. &lt;h2&gt;Request For Comments (RFC)&lt;/h2&gt;
  1413. &lt;p&gt;Dat laatste document voor het registreren van een media type is een RFC: een &lt;em&gt;request for comments&lt;/em&gt;. Het is een publicatie van een technisch document dat als doel heeft een &lt;em&gt;nieuwe standaard&lt;/em&gt; te beschrijven of een &lt;em&gt;bestaande standaard&lt;/em&gt; aan te passen (waardoor er een nieuwe standaard ontstaat).&lt;/p&gt;
  1414. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/image.png&quot; alt=&quot;XKCD 927: Standards. Strip met drie panelen. Koptekst boven de panelen: &amp;quot;How standards proliferate (see: A/C chargers, character encodings, instant messaging, etc.)&amp;quot;. Eerste paneel: &amp;quot;Situation: there are 14 competing standards&amp;quot;. Tweede paneel: Er wordt gesproken: &amp;quot;14?! Ridiculous! We need to develop one universal standard that covers everyone&#39;s use cases.&amp;quot;. De reactie hierop is: &amp;quot;Yeah!&amp;quot;. Derde paneel: &amp;quot;Soon: Situation. There are 15 competing standards.&amp;quot;&quot; /&gt;&lt;/p&gt;
  1415. &lt;p&gt;Het is veelal de Internet Engineering Task Force (IETF) die zich hiermee bezig houdt. Deze &lt;em&gt;task force&lt;/em&gt; die zal na dat een publicatie is beoordeeld door meerdere mensen, en commentaar is geleverd, er voor kunnen kiezen om een voorstel te publiceren als &lt;em&gt;internet standaard&lt;/em&gt;.&lt;/p&gt;
  1416. &lt;p&gt;En my oh my... er is een RFC voor écht alles.&lt;/p&gt;
  1417. &lt;h2&gt;RFC voor alles&lt;/h2&gt;
  1418. &lt;p&gt;Zojuist zijn al wat media types genoemd. Deze bestaan als gepubliceerde RFCs (en daarmee zijn het dus ook internet standaarden). Voorbeelden hiervan zijn:&lt;/p&gt;
  1419. &lt;ul&gt;
  1420. &lt;li&gt;&lt;a href=&quot;https://www.iana.org/assignments/media-types/image/png&quot;&gt;&lt;em&gt;image/png&lt;/em&gt; registratie&lt;/a&gt;: specificatie &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc2083&quot;&gt;RFC 2083&lt;/a&gt;;&lt;/li&gt;
  1421. &lt;li&gt;&lt;a href=&quot;https://www.iana.org/assignments/media-types/text/html&quot;&gt;&lt;em&gt;text/html&lt;/em&gt; registratie&lt;/a&gt;: specificatie &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc2854&quot;&gt;RFC 2854&lt;/a&gt; (voorheen &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc1866&quot;&gt;RFC 1866&lt;/a&gt;);&lt;/li&gt;
  1422. &lt;li&gt;&lt;a href=&quot;https://www.iana.org/assignments/media-types/application/json&quot;&gt;&lt;em&gt;application/json&lt;/em&gt; registratie&lt;/a&gt;: specificatie &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc8259&quot;&gt;RFC 8259&lt;/a&gt; (voorheen &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc4627&quot;&gt;RFC 4627&lt;/a&gt;)&lt;/li&gt;
  1423. &lt;/ul&gt;
  1424. &lt;p&gt;Ontzettend handig, want als je wil weten of je iets wel of niet kan doen, hoe je dat dan doet, en wat de afspraken zijn, dan kan je deze documenten dus bestuderen en bijna altijd het antwoord er in terug vinden.&lt;/p&gt;
  1425. &lt;p&gt;Met alles bedoel ik overigens wel écht &lt;em&gt;alles&lt;/em&gt;. Hoe we platte text beschrijven vind je terug in &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc822&quot;&gt;RFC 822&lt;/a&gt;, en dat stamt uit de tijd dat &lt;em&gt;het internet nog niet bestond&lt;/em&gt; maar we nog spraken van &lt;a href=&quot;https://en.wikipedia.org/wiki/ARPANET&quot;&gt;ARPANET&lt;/a&gt;. Hoe je tekst kan versturen over het internet (over HTTP) is te lezen in &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc1521#section-7.1&quot;&gt;RFC 1521&lt;/a&gt;, maar ook HTTP zelf is beschreven in RFCs, waaronder:&lt;/p&gt;
  1426. &lt;ul&gt;
  1427. &lt;li&gt;&lt;a href=&quot;https://datatracker.ietf.org/doc/html/rfc1945&quot;&gt;RFC 1945: Hypertext Transfer Protocol -- HTTP/1.0&lt;/a&gt;&lt;/li&gt;
  1428. &lt;li&gt;&lt;a href=&quot;https://datatracker.ietf.org/doc/html/rfc9110&quot;&gt;RFC 9110: HTTP Semantics&lt;/a&gt;&lt;/li&gt;
  1429. &lt;li&gt;&lt;a href=&quot;https://datatracker.ietf.org/doc/html/rfc9111&quot;&gt;RFC 9111: HTTP Caching&lt;/a&gt;&lt;/li&gt;
  1430. &lt;li&gt;&lt;a href=&quot;https://datatracker.ietf.org/doc/html/rfc9112&quot;&gt;RFC 9112: HTTP/1.1&lt;/a&gt;&lt;/li&gt;
  1431. &lt;li&gt;&lt;a href=&quot;https://datatracker.ietf.org/doc/html/rfc9113&quot;&gt;RFC 9113: HTTP/2&lt;/a&gt;&lt;/li&gt;
  1432. &lt;li&gt;&lt;a href=&quot;https://datatracker.ietf.org/doc/html/rfc9114&quot;&gt;RFC 9114: HTTP/3&lt;/a&gt;&lt;/li&gt;
  1433. &lt;/ul&gt;
  1434. &lt;p&gt;Dat er voor allerlei technische aspecten RFCs bestaan (die dus veelal worden aangenomen als Internet Standaard) is voor mij niet raar. Maar toen ik zei dat er een RFC bestaat voor alles bedoelde ik (nóg) meer. Dus om nog heel even door te ratelen heb ik nog drie voorbeelden.&lt;/p&gt;
  1435. &lt;h3&gt;RFC 1121&lt;/h3&gt;
  1436. &lt;blockquote&gt;
  1437. &lt;p&gt;&lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc1121&quot;&gt;RFC 1121&lt;/a&gt;&lt;/p&gt;
  1438. &lt;/blockquote&gt;
  1439. &lt;p&gt;&lt;em&gt;Een verzameling gedichten&lt;/em&gt;.&lt;/p&gt;
  1440. &lt;h3&gt;&lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc1925&quot;&gt;RFC 1925&lt;/a&gt;&lt;/h3&gt;
  1441. &lt;pre&gt;&lt;code&gt;This memo documents the fundamental truths of networking for the Internet community.
  1442. [...]
  1443. **The Fundamental Truths**
  1444. (1) It Has To Work.
  1445. [...]
  1446. (3) With sufficient thrust, pigs fly just fine.
  1447. &lt;/code&gt;&lt;/pre&gt;
  1448. &lt;p&gt;Twee waarheden:&lt;/p&gt;
  1449. &lt;ol&gt;
  1450. &lt;li&gt;Een fundamentele waarheid over communicatie over en gebruikmakend van het internet: &amp;quot;Het moet werken&amp;quot;&lt;/li&gt;
  1451. &lt;li&gt;Met voldoende stuwkracht kunnen varkens prima vliegen.&lt;/li&gt;
  1452. &lt;/ol&gt;
  1453. &lt;h3&gt;&lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc2119&quot;&gt;RFC 2119&lt;/a&gt;&lt;/h3&gt;
  1454. &lt;p&gt;Maar ook randzaken die ontzettend belangrijk zijn als we het hebben over standaarden zijn terug te vinden in een RFC.&lt;/p&gt;
  1455. &lt;p&gt;Degene die het meest voor komt is &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc2119&quot;&gt;RFC 2119: Key words for use in RFCs to Indicate Requirement Levels&lt;/a&gt;:&lt;/p&gt;
  1456. &lt;blockquote&gt;
  1457. &lt;p&gt;The key words &amp;quot;MUST&amp;quot;, &amp;quot;MUST NOT&amp;quot;, &amp;quot;REQUIRED&amp;quot;, &amp;quot;SHALL&amp;quot;, &amp;quot;SHALL NOT&amp;quot;, &amp;quot;SHOULD&amp;quot;, &amp;quot;SHOULD NOT&amp;quot;, &amp;quot;RECOMMENDED&amp;quot;, &amp;quot;MAY&amp;quot;, and &amp;quot;OPTIONAL&amp;quot; in this document are to be interpreted as described in RFC 2119.&lt;/p&gt;
  1458. &lt;/blockquote&gt;
  1459. &lt;p&gt;Er zijn nauwe definities voor de sleutelwoorden hier genoemd, en weten wat die definitie is helpt bij zowel het opstellen van als het lezen van een RFC en subsequent ook een Internet Standaard.&lt;/p&gt;
  1460. &lt;h2&gt;Maar wat heb ik hieraan?&lt;/h2&gt;
  1461. &lt;p&gt;Laten we beginnen met de vraag: &lt;em&gt;Voor wie is HTTP bedoeld?&lt;/em&gt;. Je hebt het woord &lt;em&gt;gebruiker&lt;/em&gt; een aantal maal gelezen, zonder dat ik heb gedefinieerd wie of &lt;em&gt;wat&lt;/em&gt; een gebruiker is. Wat is dat, een gebruiker?&lt;/p&gt;
  1462. &lt;p&gt;Het antwoord hierop kunnen we terug vinden in &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc2616&quot;&gt;RFC 2616: Hypertext Transfer Protocol -- HTTP/1.1&lt;/a&gt;:&lt;/p&gt;
  1463. &lt;blockquote&gt;&lt;/blockquote&gt;
  1464. &lt;p&gt;Eerst wordt beschreven waarvoor HTTP kan worden gebruikt. En verderop staat de definitie:&lt;/p&gt;
  1465. &lt;pre&gt;&lt;code&gt;**user agent**
  1466.  
  1467. The client which initiates a request.
  1468.  
  1469. These are often browsers, editors, spiders (web-traversing robots), or other end user tools.
  1470. &lt;/code&gt;&lt;/pre&gt;
  1471. &lt;p&gt;Hieruit volgt dat de HTTP standaard niet &lt;em&gt;alleen&lt;/em&gt; bedoeld is voor mensen, en ook niet alleen voor browsers.&lt;/p&gt;
  1472. &lt;h2&gt;HTTP: waar is het voor?&lt;/h2&gt;
  1473. &lt;p&gt;Als het protocol niet alleen voor browsers of eind-gebruikers is, dan is er meer aan de hand. Deze standaard wil ons helpen meer te bereiken dan alleen hypertext en andere hypermedia over de netwerkkabel versturen naar onze computerschermen.&lt;/p&gt;
  1474. &lt;h2&gt;⚡ HTTP is de oplossing voor zogenoemde &lt;em&gt;hard problems&lt;/em&gt;&lt;/h2&gt;
  1475. &lt;ul&gt;
  1476. &lt;li&gt;Caching (veel user agents, één server);&lt;/li&gt;
  1477. &lt;li&gt;Consistentie (data format, fouten, en het scheiden van data en fouten);&lt;/li&gt;
  1478. &lt;li&gt;Interoperabiliteit (tussen verschillende implementaties);&lt;/li&gt;
  1479. &lt;li&gt;(en meer).&lt;/li&gt;
  1480. &lt;/ul&gt;
  1481. &lt;h2&gt;Het wiel uitvinden&lt;/h2&gt;
  1482. &lt;p&gt;Het is bij veel mensen bekend dat het over het algemeen een &lt;em&gt;heel&lt;/em&gt; slecht idee is om zelf een versleuteling te verzinnen voor zaken die echt privé moeten worden. We zeggen dan ook wel &amp;quot;Don&#39;t roll your own Encryption/Cryptography/Security&amp;quot;. Op de security stackexchange zijn &lt;a href=&quot;https://security.stackexchange.com/questions/6740/flaw-in-encryption-through-pseudorandom-number-stream-from-pgp-documentation&quot;&gt;verschillende&lt;/a&gt; &lt;a href=&quot;https://security.stackexchange.com/questions/18197/why-shouldnt-we-roll-our-own&quot;&gt;vragen&lt;/a&gt; te vinden over dit wel doen of waarom je dit niet doet en één van de beste antwoorden vind ik:&lt;/p&gt;
  1483. &lt;blockquote&gt;
  1484. &lt;p&gt;If you are not convinced of &amp;quot;Don&#39;t Roll Your Own [Cryptography/Security]&amp;quot;, then you probably are not an expert and there are many mistakes you likely will make.&lt;/p&gt;
  1485. &lt;/blockquote&gt;
  1486. &lt;p&gt;&amp;quot;Als je er niet van overtuigd bent dat het zelf verzinnen van een manier om te versleutelen of te beveiligen, dan ben je &lt;em&gt;waarschijnlijk&lt;/em&gt; geen expert en zullen er veel fouten zijn die je gaat maken.&amp;quot;&lt;/p&gt;
  1487. &lt;h3&gt;Hoe relateert dat tot een webstandaard?&lt;/h3&gt;
  1488. &lt;p&gt;Je hebt wellicht weleens de uitdrukking &amp;quot;there&#39;s a package for that&amp;quot; of &amp;quot;there&#39;s a gem for that&amp;quot; gehoord. Hetzelfde is bijna altijd waar voor meer abstracte problemen: &amp;quot;there&#39;s a spec for that&amp;quot;. Zelfs als er geen spec is, dan is er vaak wel een &lt;em&gt;proposal&lt;/em&gt; of een &lt;em&gt;draft&lt;/em&gt;. Dit betekent daardoor ook dat het onnodig is om het wiel uit te moeten vinden. Er is al iemand of een groep mensen geweest die over je probleem heeft nagedacht, en daar (hopelijk) wat slimme dingen over heeft opgeschreven.&lt;/p&gt;
  1489. &lt;p&gt;En als je er &lt;em&gt;toch&lt;/em&gt; voor kiest om zelf iets te verzinnen, dan kan je of leren van wat er al is, of je informatie opschrijven in een RFC formaat zodat &lt;em&gt;anderen&lt;/em&gt; je standaard kunnen gebruiken. Dit maakt het weer makkelijker.&lt;/p&gt;
  1490. &lt;p&gt;En als je met front-end (of back-end, of wat dan ook) te maken hebt, dan gebruik je &lt;em&gt;elke dag&lt;/em&gt; al webstandaarden!&lt;/p&gt;
  1491. &lt;h3&gt;Hoe voorkom ik dat het wiel opnieuw wordt uitgevonden?&lt;/h3&gt;
  1492. &lt;p&gt;Er is helaas geen makkelijk antwoord op deze vraag, omdat je eigenlijk moet weten of inschatten of er voor iets een standaard bestaat. Het moment dat ik zelf kijk of er een standaard bestaat is tweevoudig: iets voelt &lt;em&gt;tegendraads&lt;/em&gt; (moeilijker dan nodig), of iets klinkt complex.&lt;/p&gt;
  1493. &lt;p&gt;Een aantal voorbeelden die hopelijk een tipje van de sluier kunnen oplichten:&lt;/p&gt;
  1494. &lt;h3&gt;a. Interactie toevoegen aan HTML elementen*&lt;/h3&gt;
  1495. &lt;p&gt;Ook ik heb voorheen gebruik gemaakt van &lt;code&gt;onclick=&amp;quot;&amp;quot;&lt;/code&gt; attributen of het equivalent in JavaScript. Ik leerde daarna over het web gebruiken zonder muis (en ben zelf een veel-gebruiker van toetsenbord navigatie geworden), en om dan een &amp;quot;knop&amp;quot; klikbaar te maken is best wel wat extra JavaScript nodig. In de laatste jaren ben ik veel bezig geweest met toegankelijkheid. Om screenreaders een &lt;code&gt;div&lt;/code&gt; te laten herkennen als knop, heb je &lt;em&gt;nog&lt;/em&gt; meer code en markup nodig. Oef.&lt;/p&gt;
  1496. &lt;pre&gt;&lt;code&gt;&amp;lt;!-- iets toegankelijker dan onclick=&amp;quot;&amp;quot; --&amp;gt;
  1497. &amp;lt;div
  1498. class=&amp;quot;button&amp;quot;
  1499. role=&amp;quot;button&amp;quot;
  1500. aria-pressed=&amp;quot;false&amp;quot;
  1501. tabindex=&amp;quot;0&amp;quot;
  1502. &amp;gt;
  1503. My action
  1504. &amp;lt;/div&amp;gt;
  1505. &amp;lt;script&amp;gt;
  1506. // [...]
  1507. myActionElement.addEventListener(&amp;quot;keydown&amp;quot;, e =&amp;gt; {
  1508.  if (e.key === &amp;quot; &amp;quot; || e.key === &amp;quot;Enter&amp;quot; || e.key === &amp;quot;Spacebar&amp;quot;) {
  1509.    e.target.setAttribute(&#39;aria-pressed&#39;, &#39;true&#39;)
  1510.  }
  1511. });
  1512. // [...] up handler om te activeren als ie pressed was
  1513. // [...] blur handler om pressed weer weg te halen zonder activatie
  1514. // [...] disabled implementatie via aria-disabled
  1515. &amp;lt;/script&amp;gt;
  1516. &lt;/code&gt;&lt;/pre&gt;
  1517. &lt;p&gt;De &lt;a href=&quot;https://html.spec.whatwg.org/&quot;&gt;HTML standaard&lt;/a&gt; heeft een aantal hulpmiddelen om HTML interactief te maken, waaronder &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button&quot;&gt;het button element&lt;/a&gt;. Dit element heeft ondersteuning voor allerlei manieren van interactie. Volgens de MDN (Mozilla Developer Network) beschrijving is het &lt;code&gt;button&lt;/code&gt; element een interactief element geactiveerd door een gebruiker met een muis, toetsenbord, vinger, spraakcommando, of andere toegankelijkheidtechnologie.&lt;/p&gt;
  1518. &lt;p&gt;Daarnaast kan de actie ook worden geblokkeerd door het &lt;code&gt;disabled&lt;/code&gt; attribuut te gebruiken, heeft het standaard een kenmerkende rol (namelijk &lt;code&gt;button&lt;/code&gt;), is deze standaard focusbaar zonder &lt;code&gt;tabindex&lt;/code&gt; en is geen custom CSS &lt;em&gt;nodig&lt;/em&gt; om het er als een knop uit te laten zien.&lt;/p&gt;
  1519. &lt;p&gt;Voordat ik een &lt;code&gt;div&lt;/code&gt; gebruik is mijn regel dus: ben bekend met de huidig gangbare HTML elementen en hun doel.&lt;/p&gt;
  1520. &lt;h3&gt;b. Veel gebruikers aankunnen met weinig serverkracht&lt;/h3&gt;
  1521. &lt;p&gt;Ik heb gewerkt aan meerdere producten die dagelijks honderden, duizenden, of zelfs miljoenen gebruikers hadden. Servers zijn kostbaar, bandbreedte in &lt;em&gt;the cloud&lt;/em&gt; al helemaal, en het aantal gebruikers is niet consistent.&lt;/p&gt;
  1522. &lt;p&gt;Dit is een moeilijke uitdaging.&lt;/p&gt;
  1523. &lt;p&gt;Als je zoekt hoe je het consistentie probleem kan oplossen kom je al gauw terecht op een techniek die auto-scaling heet: het semi-automatisch op en afschalen van servers om meer gebruikers tegelijk aan te kunnen wanneer het nodig is, en minder servers online te hebben wanneer dat niet nodig is. Als je iets langer doorzoekt zie je ook dat auto-scaling op zichzelf ontzettend moeilijk is om goed te doen. Bijvoorbeeld: wat zijn goede regels voor het op-en- afschalen? Wat is het limiet? Hoe ga je om met het langzaam opstarten van de servers (waardoor de regel om bij te schalen actief blijft)? De antwoorden variëren van &amp;quot;it depends&amp;quot; tot &amp;quot;thoughts and prayers&amp;quot;.&lt;/p&gt;
  1524. &lt;p&gt;Nee, er moest een betere (en vooral stabielere) manier zijn om meer gebruikers aan te kunnen zonder dat dat heel veel geld kost.&lt;/p&gt;
  1525. &lt;p&gt;Onze applicatie had meer gebruikers die pagina&#39;s wilden lezen dan bewerken. In HTTP termen, het meest voorkomende &lt;em&gt;werkwoord&lt;/em&gt; was GET. Dat biedt mogelijkheden, want hoewel sommige pagina&#39;s gebruiker specifieke informatie bevatte, het meeste van de inhoud, en vooral ook de website voor het inloggen was voor iedereen hetzelfde. Ik had al vaker gebruik gemaakt van een Content Delivery Network (CDN) om media (plaatjes, videos, enzovoorts) sneller bij de bezoeker te brengen, waaronder Cloudflare. Amazon Web Services (AWS) heeft een eigen variant genaamd CloudFront, en zo zijn er nog velen. Wellicht kond ik hier gebruik van maken.&lt;/p&gt;
  1526. &lt;p&gt;Alle CDNs hebben een variant van &lt;em&gt;caching&lt;/em&gt;: het tijdelijk opslaan van informatie zodat je deze informatie niet opnieuw hoeft te berekenen of op te halen bij een opvolgend verzoek. Hoewel ze allemaal hun eigen implementatie hebben, ze ondersteunen (bijna) allemaal een gestandaardiseerde vorm: &lt;a href=&quot;https://datatracker.ietf.org/doc/html/rfc9111&quot;&gt;&lt;em&gt;HTTP Caching&lt;/em&gt;&lt;/a&gt;. (Dit heet vaak &lt;em&gt;Origin Cache Control&lt;/em&gt; mocht je het zoeken in jouw CDN). &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control&quot;&gt;Het MDN artikel hierover&lt;/a&gt; beschrijf veel van de opties, maar hier zijn er een aantal die wij gebruikten om de CDNs onze inhoud te laten cachen:&lt;/p&gt;
  1527. &lt;pre&gt;&lt;code&gt;# Je mag de pagina echt niet cachen. Ook niet in de browser. Elk
  1528. # verzoek moet een nieuw antwoord genereren en tonen.
  1529.  
  1530. Cache-Control: no-store
  1531. &lt;/code&gt;&lt;/pre&gt;
  1532. &lt;pre&gt;&lt;code&gt;# Bewaar dit voor 1 jaar in de cache.  Dit wordt gebruikt voor
  1533. # bestanden met een hash / versie &amp;quot;identifier&amp;quot; die veranderd
  1534. # als het bestand wordt bijgewerkt, waardoor er een nieuwe
  1535. # url is.
  1536. #
  1537. # immutable zorgt ervoor dat browsers niet meer proberen
  1538. # conditionele verzoeken te doen om te kijken of de URL toch
  1539. # is bijgewerkt.
  1540. #
  1541. # public zorgt ervoor dat een verzoek&#39;s antwoord kan worden
  1542. # gedeeld. Oftewel: als iemand anders dit verzoek al heeft
  1543. # gedaan, dat kan dat gecachede antwoord worden gebruikt.
  1544.  
  1545. Cache-Control: public, max-age=31536000, immutable
  1546. &lt;/code&gt;&lt;/pre&gt;
  1547. &lt;pre&gt;&lt;code&gt;# Bewaar dit voor 5 minuten, en markeer het daarna als muf.
  1548. # Dit wordt gebruikt voor paginas die niet elke seconde
  1549. # nieuwe informatie moeten laten zien, en waarbij het
  1550. # belangrijker is om wat oudere informatie te laten zien
  1551. # dan dat je niets laat zien.
  1552. #
  1553. ## Dit is vaak waar, voor heel veel informatie op het
  1554. ## internet!
  1555. #
  1556. ## Gebruik het muffe opgeslagen antwoord nog maximaal 60
  1557. ## seconden terwijl je op de achtergrond een vers antwoord
  1558. ## ophaald. Gebruik het muffe opgeslagen antwoord nog een
  1559. ## uur, als er een foutmelding is gegeneerd bij het ophalen.
  1560.  
  1561. Cache-Control: private, max-age=300, stale-while-revalidate=60, stale-if-error=3600
  1562. &lt;/code&gt;&lt;/pre&gt;
  1563. &lt;p&gt;Ik kwam er ook achter dat sommige implementaties van HTTP Caching niet &lt;em&gt;spec-compliant&lt;/em&gt; zijn. Ofwel: ze volgen niet de standaard. Cloudflare, bijvoorbeeld, respecteerd de &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Vary&quot;&gt;Vary header&lt;/a&gt; niet. Omdat ik wist dat er een standaard was en konden lezen wat de implicaties waren van het niet respecteren van deze header, hebb ik bewuste keuzes kunnen maken.&lt;/p&gt;
  1564. &lt;div class=&quot;note&quot;&gt;Noot: Ga niet overal caching headers toevoegen. Vooral het gebruik van `max-age` op paginas die worden bijgewerkt kan problemen opleveren als je niet oplet dat dat verwijzingen naar oudere inhoud (zoals CSS en JavaScript bestanden) nog steeds werken tijdens &lt;/div&gt;
  1565. &lt;p&gt;Oh en die performance? Bedenk je dat als je &lt;code&gt;public, max-age=60&lt;/code&gt; toevoegt wat voor effect dat kan hebben op het aantal bezoekers op de server:&lt;/p&gt;
  1566. &lt;table&gt;
  1567. &lt;thead&gt;
  1568. &lt;tr&gt;
  1569. &lt;th&gt;[Situatie]&lt;/th&gt;
  1570. &lt;th&gt;[Bezoekers per minuut]&lt;/th&gt;
  1571. &lt;th&gt;[Verzoeken per minuut]&lt;/th&gt;
  1572. &lt;/tr&gt;
  1573. &lt;/thead&gt;
  1574. &lt;tbody&gt;
  1575. &lt;tr&gt;
  1576. &lt;td&gt;Geen caching&lt;/td&gt;
  1577. &lt;td&gt;1000&lt;/td&gt;
  1578. &lt;td&gt;1000&lt;/td&gt;
  1579. &lt;/tr&gt;
  1580. &lt;tr&gt;
  1581. &lt;td&gt;&lt;code&gt;max-age=5&lt;/code&gt;&lt;/td&gt;
  1582. &lt;td&gt;1000&lt;/td&gt;
  1583. &lt;td&gt;~12&lt;/td&gt;
  1584. &lt;/tr&gt;
  1585. &lt;tr&gt;
  1586. &lt;td&gt;&lt;code&gt;max-age=60&lt;/code&gt;&lt;/td&gt;
  1587. &lt;td&gt;1000&lt;/td&gt;
  1588. &lt;td&gt;~1&lt;/td&gt;
  1589. &lt;/tr&gt;
  1590. &lt;/tbody&gt;
  1591. &lt;/table&gt;
  1592. &lt;p&gt;Zelfs voor privé content die gemarkeerd was als &lt;code&gt;must-revalidate&lt;/code&gt; (je moet de server vragen om te kijken of wat je in de cache hebt fris is of verouderd is), met een &lt;code&gt;max-age=0&lt;/code&gt; (het antwoord is voor 0 seconden vers, en daarna muf), kan helpen. Als de server namelijk aangeeft dat wat de cache heeft nog steeds hetzelfde is (door middel van bijvoorbeeld een &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag&quot;&gt;ETag vergelijking&lt;/a&gt;) dan bespaar je nog steeds alle bandbreedte en tijd die het kost om die data te versturen en ontvangen.&lt;/p&gt;
  1593. &lt;p&gt;Voordat ik dus een moeilijk uitdaging zelf probeer op te lossen kijk ik eerst of er een standaard voor bestaat. In dit geval was de oplossing die afdoende werkte de HTTP Caching standaard.&lt;/p&gt;
  1594. &lt;h3&gt;c. Oude software accepteren terwijl de API (veel) is veranderd&lt;/h3&gt;
  1595. &lt;p&gt;Dit is niet een frontend punt, maar full-stackers die bezig zijn met APIs schrijven of bedenken, kunnen hier wellicht ook iets aan hebben.&lt;/p&gt;
  1596. &lt;p&gt;Het probleem is als volgt:&lt;/p&gt;
  1597. &lt;p&gt;Ik schreef mee aan een systeem dat aan de server kant een API publiek beschikbaar stelde en die werd aangeroepen door allerlei andere systemen, waaronder een mobiele SDK (Software Development Kit). Zo&#39;n SDK wordt dan onderdeel van één of meerdere apps en die apps worden gedistribueerd, meestal via de Google Play Store en Apple iTunes store. Dit betekent dat als er een wijziging nodig is in de API (in de server code), dat deze wijziging moet worden doorgevoerd in de SDK. De SDK update moet dan worden doorgevoerd in alle apps, en deze apps moeten worden gepubliceerd. Tot slot moeten de mensen die de app hebben geïnstalleerd de app bijwerken.&lt;/p&gt;
  1598. &lt;p&gt;In andere woorden: je hebt een probleem, ofwel een moeilijke uitdaging!&lt;/p&gt;
  1599. &lt;p&gt;&lt;a href=&quot;https://roy.gbiv.com/&quot;&gt;Roy Fielding&lt;/a&gt;, is een ontzettend slim persoon die heeft meegewerkt aan onder andere &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc6570&quot;&gt;URI Templates&lt;/a&gt;, en was ook &lt;a href=&quot;https://www.w3.org/TR/tracking-dnt/&quot;&gt;editor van de &amp;quot;Do No Track&amp;quot; working group&lt;/a&gt;. In 2013 zei Roy &lt;a href=&quot;https://www.slideshare.net/evolve_conference/201308-fielding-evolve/31&quot;&gt;tijdens een talk&lt;/a&gt; dat de best practice voor het hanteren van een versie in een API is om &lt;em&gt;geen&lt;/em&gt; versie te hanteren voor de gehele API. Ja, nou en, denk je misschien? Roy schreef zijn dissertatie over &lt;a href=&quot;https://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm&quot;&gt;Architectuur stijlen en het ontwerp van netwerk-gebaseerde software architectuur&lt;/a&gt;. Wij kennen dit nu als &lt;em&gt;REST&lt;/em&gt; (Representational State Transfer) en dat is eigenlijk de ruggengraat geworden van ontzettend veel moderne web interfaces.&lt;/p&gt;
  1600. &lt;p&gt;Het leuke voor mij is dat Roy een vervolg heeft geschreven op zijn visie van REST, en dat heeft gepubliceerd als, jawel, een &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc9205&quot;&gt;RFC&lt;/a&gt;, die is aangenomen als current best practice.&lt;/p&gt;
  1601. &lt;p&gt;Ik zal niet teveel in details treden wat we hier allemaal van hebben gebruikt om ons probleem op te lossen, want dat is meerdere artikelen an sich, maar het komt samengevat neer op:&lt;/p&gt;
  1602. &lt;ul&gt;
  1603. &lt;li&gt;Gebruik versies in media types (dus &lt;code&gt;application/vnd.fronteers.config.v1+json&lt;/code&gt;);&lt;/li&gt;
  1604. &lt;li&gt;Doe aan &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation&quot;&gt;content-negotiation&lt;/a&gt;: een tactiek waarbij de server kijkt naar de &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept&quot;&gt;Accept header&lt;/a&gt; van het verzoek en gebaseerd daarop een antwoord geeft met desbetreffende &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type&quot;&gt;Content-Type header&lt;/a&gt;;&lt;/li&gt;
  1605. &lt;li&gt;Valideer antwoorden van de server in de server, en geef een foutmelding als het antwoord niet overeenkomt met een contract. In andere woorden: bepaal van te voren hoe een antwoord met een bepaalde &lt;code&gt;Content-Type&lt;/code&gt; er uit gaat zien en forceer dat gedrag;&lt;/li&gt;
  1606. &lt;li&gt;Ondersteun zo lang mogelijk een media type. Het is bijna altijd dezelfde informatie net iets anders gerepresenteerd, dus dit is vaak goedkoop om te doen. Je hoeft namelijk de code voor de oudere versies bijna nooit aan te raken.&lt;/li&gt;
  1607. &lt;/ul&gt;
  1608. &lt;p&gt;Om deze interessante uitdaging op te lossen kon ik dus gebruik maken van het denk werk van meerdere slimmen mensen (iedereen die heeft bijgedragen aan de RFC die uiteindelijk &lt;em&gt;best practice werd&lt;/em&gt;) hetgeen er ook toe heeft geleid dat ik nu, vijf jaar later, nog steeds apps kan ondersteunen die versie 1 draaien van de API. Daarnaast konden de mobiele app developers &lt;em&gt;gradueel&lt;/em&gt; upgraden: ze konden voor elk verzoek bepalen of ze het nieuwe gedrag wilden ondersteunen door met de &lt;em&gt;Accept&lt;/em&gt; en &lt;em&gt;Content-Type&lt;/em&gt; headers te spelen. Hier hebben een hele reeks web standaarden aan bijgedragen.&lt;/p&gt;
  1609. &lt;h3&gt;d. Onenigheid over foutmeldingen&lt;/h3&gt;
  1610. &lt;p&gt;Bij deze uitdaging was ik de frontender die een API moest gebruiken om een mobiele app én web applicatie te bouwen. Ik had invloed op de API omdat die werd geschreven door de klant! De uitdaging hier was drievoudig:&lt;/p&gt;
  1611. &lt;ol&gt;
  1612. &lt;li&gt;De API gaf een &lt;em&gt;500 Server Error&lt;/em&gt; als er iets mis ging, ook al was het een fout van mij.&lt;/li&gt;
  1613. &lt;li&gt;De API gaf niet een consistente manier van fouten terug. Soms als een regel tekst (maar gemarkeerd als JSON, hoe dan?), soms als een JSON object met een key &amp;quot;error&amp;quot;, en soms weer wat totaal anders.&lt;/li&gt;
  1614. &lt;li&gt;De API gaf foutmeldingen terug die niet duidelijk waren of niet hielpen bij het verhelpen van die foutmelding.&lt;/li&gt;
  1615. &lt;/ol&gt;
  1616. &lt;p&gt;Het eerste probleem was echt erg vervelend. Standaard schrijf ik mijn interactieve frontend code zo dat als het een &lt;code&gt;5xx&lt;/code&gt; status code krijgt, dat ook echt wordt gezien als &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#server_error_responses&quot;&gt;server gerelateerd probleem&lt;/a&gt;. Bij het ophalen van informatie betekent dat ook dat ik automatisch nog een aantal pogingen deed. De klant klaagde erover dat ik &amp;quot;veel verzoeken deed&amp;quot;.&lt;/p&gt;
  1617. &lt;p&gt;&lt;a href=&quot;https://httpwg.org/specs/rfc9110.html#status.500&quot;&gt;RFC 9110&lt;/a&gt; gaat over semantiek, waaronder ook de HTTP status codes. Omdat de foutcode 500 niet veel zegt en ook niet aangeeft of het een permanent of tijdelijk probleem is, en omdat de foutmeldingen in het antwoord ook niet hielp, koos ik ervoor om altijd opnieuw te proberen bij een 5xx code. Bij een 4xx code, hetgeen aangeeft dat er iets mis is met het verzoek zelf, deed ik dat niet.&lt;/p&gt;
  1618. &lt;p&gt;Na ze te wijzen op de beschrijvingen in de standaard is de API bijgewerkt en gebruikt het zowel 4xx als 5xx codes, en dat was mooi, want het loste probleem 1 op en hielp ontzettend voor probleem 3.&lt;/p&gt;
  1619. &lt;p&gt;Voor probleem 2 hadden we allebei geen goede ideeën. Uiteindelijk heb ik voorgesteld om een voorstel van iemand anders te gebruiken, en wel &lt;a href=&quot;https://datatracker.ietf.org/doc/html/rfc7807&quot;&gt;RFC 7807: Problem Details for HTTP APIs&lt;/a&gt;.&lt;/p&gt;
  1620. &lt;p&gt;Deze RFC introduceert een standaard formaat (geregistreerd met een media type &lt;code&gt;application/problem+json&lt;/code&gt;) en hierdoor zien &lt;em&gt;alle&lt;/em&gt; foutmeldingen er min of meer zo uit:&lt;/p&gt;
  1621. &lt;pre&gt;&lt;code&gt;HTTP/1.1 403 Forbidden
  1622. Content-Type: application/problem+json
  1623. Content-Language: en
  1624. {
  1625.    &amp;quot;type&amp;quot;: &amp;quot;https://example.com/probs/out-of-credit&amp;quot;,
  1626.    &amp;quot;title&amp;quot;: &amp;quot;You do not have enough credit.&amp;quot;,
  1627.    &amp;quot;detail&amp;quot;: &amp;quot;Your current balance is 30, but that costs 50.&amp;quot;,
  1628.    &amp;quot;instance&amp;quot;: &amp;quot;/account/12345/msgs/abc&amp;quot;,
  1629.    &amp;quot;balance&amp;quot;: 30,
  1630.    &amp;quot;accounts&amp;quot;: [&amp;quot;/account/12345&amp;quot;,
  1631.                 &amp;quot;/account/67890&amp;quot;]
  1632. }
  1633. &lt;/code&gt;&lt;/pre&gt;
  1634. &lt;p&gt;In het kort:&lt;/p&gt;
  1635. &lt;ul&gt;
  1636. &lt;li&gt;&lt;code&gt;type&lt;/code&gt; is altijd een URI die het type probleem identificeert. Het wordt sterk aangeraden om deze URI &amp;quot;browsebaar&amp;quot; te maken en dat deze wijst naar documentatie over de fout.&lt;/li&gt;
  1637. &lt;li&gt;&lt;code&gt;title&lt;/code&gt; is een tekstuele samenvatting voor mensen! Deze kan worden vertaald door middel van &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/Content_negotiation&quot;&gt;Content-Negotiation&lt;/a&gt; (aangeven welke talen je zou willen via &lt;code&gt;Accept-Language&lt;/code&gt;, en de server kiest dan een ander antwoord gebaseerd op je verzoek).&lt;/li&gt;
  1638. &lt;li&gt;&lt;code&gt;detail&lt;/code&gt;: is een tekstuele uitleg van het probleem, voor mensen! Dus geen computer bliep-die-bloep of SQL statements, of een &lt;em&gt;verbatim&lt;/em&gt; foutmelding.&lt;/li&gt;
  1639. &lt;li&gt;&lt;code&gt;instance&lt;/code&gt;: is een URI voor dit specifieke geval van deze fout.&lt;/li&gt;
  1640. &lt;/ul&gt;
  1641. &lt;p&gt;Doordat de &lt;code&gt;title&lt;/code&gt; en &lt;code&gt;detail&lt;/code&gt; velden verplicht zijn, werd de klant nu ook verplicht om de API betere foutmeldingen te laten geven (en hier heb ik ook bij geholpen).&lt;/p&gt;
  1642. &lt;p&gt;Tot slot konden ze ook nog gradueel hun API bijwerken, omdat ik kon zien of iets in het juiste formaat zou moeten staan door de &lt;code&gt;Content-Type&lt;/code&gt; van de foutmelding.&lt;/p&gt;
  1643. &lt;p&gt;In dit geval heb ik dus meerdere standaarden gebruikt om tot een besluit te komen waarbij iedereen weet waar ze aan toe zijn, en anders dan &amp;quot;hier is een idee, dit is al uitgewerkt&amp;quot; hoefde ik het niet te beargumenteren, want het alternatief was de status quo die niet werkbaar was.&lt;/p&gt;
  1644. &lt;h3&gt;e. Toegankelijke emails?&lt;/h3&gt;
  1645. &lt;p&gt;Tot slot heb ik een voorbeeld waarbij een klant graag wilde dat ik een nieuwe gebruikersoptie implementeerde. Deze klant gaf aan dat leden niet allemaal de nieuwsbrief en updates konden lezen die per e-mail werden verstuurd.&lt;/p&gt;
  1646. &lt;p&gt;Het verzoek was:&lt;/p&gt;
  1647. &lt;blockquote&gt;&lt;/blockquote&gt;
  1648. &lt;p&gt;Het was relatief makkelijk voor mij om dit verzoek in te willigen, en zo gezegd, zo gedaan.&lt;/p&gt;
  1649. &lt;p&gt;Twee weken later kreeg ik een belletje dat de oplossing niet werkte. Waarom niet? Een van de leden had in het profiel de e-mail op tekst gezet, maar klaagde nu dat de email overal alleen maar tekst was.&lt;/p&gt;
  1650. &lt;p&gt;Wat was het echte probleem? Deze persoon gebruikte een tekst-only email client op sommige apparaten en kon HTML emails wel aan op andere apparaten. Ook gaf deze persoon aan dat dit probleem zich wel vaker voor deed, maar liet ook een paar voorbeelden zien van e-mails die het op alle apparaten correct deden.&lt;/p&gt;
  1651. &lt;p&gt;Ik ben op zoek gegaan naar de webstandaard, want als meerdere applicaties allemaal het correcte gedrag laten zien, moet er bijna wel een standaard aan te pas zijn gekomen.&lt;/p&gt;
  1652. &lt;p&gt;De oplossing vond ik in &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc2046.html#section-5.1.4&quot;&gt;RFC 2046: Multipurpose Internet Mail Extensions (MIME) Part Two&lt;/a&gt;. Hierin staat beschreven hoe e-mails in elkaar zitten en hoe e-mail &lt;em&gt;readers&lt;/em&gt; ze moeten behandelen. Hierin is ook beschreven hoe een speciale mediatype &lt;code&gt;multipart&lt;/code&gt; kan worden gebruikt om een bericht te maken dat uit meerdere delen bestaat, en in het bijzonder &lt;code&gt;multipart/alternative&lt;/code&gt;.&lt;/p&gt;
  1653. &lt;div class=&quot;note&quot;&gt;Noot: `Multipart/alternative` may be used, for example, to send a message in a fancy text format in such a way that it can easily be displayed anywhere.&lt;/div&gt;
  1654. &lt;p&gt;En dat was ook exact wat de e-mails deden die het lid liet zien.&lt;/p&gt;
  1655. &lt;pre&gt;&lt;code&gt;From: sender@example.com
  1656. To: recipient@example.com
  1657. Subject: Multipart Email Example
  1658. Content-Type: multipart/alternative; boundary=&amp;quot;boundary-string&amp;quot;
  1659.  
  1660. --your-boundary
  1661. Content-Type: text/plain; charset=&amp;quot;utf-8&amp;quot;
  1662. Content-Transfer-Encoding: quoted-printable
  1663. Content-Disposition: inline
  1664.  
  1665. Platte tekst email hier! Dit wordt gebruikt
  1666. als text/html niet werkt.
  1667.  
  1668. --boundary-string
  1669. Content-Type: text/html; charset=&amp;quot;utf-8&amp;quot;
  1670. Content-Transfer-Encoding: quoted-printable
  1671. Content-Disposition: inline
  1672.  
  1673. &amp;lt;h1&amp;gt;Woopdiedoo html werkt!&amp;lt;/h1&amp;gt;
  1674. &amp;lt;p&amp;gt;Hier dan de HTML variant&amp;lt;/p&amp;gt;
  1675.  
  1676. --boundary-string--
  1677. &lt;/code&gt;&lt;/pre&gt;
  1678. &lt;p&gt;Het was eenvoudig om de instelling weer weg te halen uit het gebruikersprofiel, en alle emails automatisch ook als platte tekst te laten zien.&lt;/p&gt;
  1679. &lt;p&gt;Helaas is er niet veel meer ondersteuning dan &lt;code&gt;text/plain&lt;/code&gt; en &lt;code&gt;text/html&lt;/code&gt;, maar onlangs heeft Apple een nieuwe variant geïntroduceerd die &lt;code&gt;text/watch-html&lt;/code&gt; gebruikt. Dit is speciaal voor de Apple Watch!&lt;/p&gt;
  1680. &lt;p&gt;Enfin, de makkelijke oplossing hier was uiteindelijk niet de juiste. Hierbij was het dus zo dat de standaard veel meer gebruikscasussen had dan mijn simpele implementatie.&lt;/p&gt;
  1681. &lt;h2&gt;Webstandaarden voor Fronteers&lt;/h2&gt;
  1682. &lt;p&gt;Pakweg 2300 woorden verder en ik vertel je nu dat je al gebruik maakt van webstandaarden. En dan heb ik het niet eens over HTTP, of tools die gebruik maken van standaarden zoals formatters en linters.&lt;/p&gt;
  1683. &lt;h2&gt;Produceer je HTML?&lt;/h2&gt;
  1684. &lt;h2&gt;Schrijf je CSS?&lt;/h2&gt;
  1685. &lt;p&gt;Dan heb je te maken met de vele CSS specificaties zoals &lt;a href=&quot;https://www.w3.org/TR/mediaqueries-3/&quot;&gt;mediaqueries&lt;/a&gt;, &lt;a href=&quot;https://www.w3.org/TR/selectors-3/&quot;&gt;selectors&lt;/a&gt;, en het &lt;a href=&quot;https://www.w3.org/TR/css-box-3/&quot;&gt;box-model&lt;/a&gt;;&lt;/p&gt;
  1686. &lt;p&gt;Interactiviteit via een taal zoals JavaScript of TypeScript?
  1687. Je houdt je waarschijnlijk zoveel mogelijk aan de &lt;a href=&quot;https://www.ecma-international.org/publications-and-standards/standards/ecma-262/&quot;&gt;ECMAScript standard&lt;/a&gt;;&lt;/p&gt;
  1688. &lt;h2&gt;Roep jij een API aan in JavaScript?&lt;/h2&gt;
  1689. &lt;p&gt;Het is dan handig om te weten dat er een standaard is voor &lt;a href=&quot;https://fetch.spec.whatwg.org/&quot;&gt;&lt;code&gt;fetch&lt;/code&gt;&lt;/a&gt; en ook voor &lt;a href=&quot;https://xhr.spec.whatwg.org/&quot;&gt;&lt;code&gt;xhr&lt;/code&gt; (XMLHttpRequest)&lt;/a&gt;;&lt;/p&gt;
  1690. &lt;h2&gt;Bestanden uploaden via een formulier?&lt;/h2&gt;
  1691. &lt;p&gt;Dan gebruik je &lt;a href=&quot;https://www.ecma-international.org/publications-and-standards/standards/ecma-262/&quot;&gt;&lt;code&gt;multipart/form-data&lt;/code&gt;&lt;/a&gt;&lt;/p&gt;
  1692. &lt;h2&gt;Stuur je e-mails?&lt;/h2&gt;
  1693. &lt;p&gt;Hallo daar &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc5321.html&quot;&gt;&lt;em&gt;S&lt;/em&gt;imple &lt;em&gt;M&lt;/em&gt;ail &lt;em&gt;T&lt;/em&gt;ransfer &lt;em&gt;P&lt;/em&gt;rotocol&lt;/a&gt;. Lezen kan bijvoorbeeld via het oude &lt;a href=&quot;https://tools.ietf.org/html/rfc1939&quot;&gt;&lt;em&gt;P&lt;/em&gt;ost &lt;em&gt;O&lt;/em&gt;ffice &lt;em&gt;P&lt;/em&gt;rotocol&lt;/a&gt; of via het &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc3501.html&quot;&gt;&lt;em&gt;I&lt;/em&gt;nternet &lt;em&gt;M&lt;/em&gt;essage &lt;em&gt;A&lt;/em&gt;ccess &lt;em&gt;P&lt;/em&gt;rotocol&lt;/a&gt;. De content en headers volgen &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc2822&quot;&gt;RFC 2822: Internet Message Format&lt;/a&gt;, DomainKeys Identified Mail (DKIM) is &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc6376&quot;&gt;RFC 6375&lt;/a&gt;, en het sturen van een e-mail als &lt;em&gt;zowel&lt;/em&gt; HTML &lt;em&gt;als&lt;/em&gt; platte tekst is mede mogelijk gemaakt door &lt;a href=&quot;https://www.rfc-editor.org/rfc/rfc2046.html#section-5.1.4&quot;&gt;&lt;code&gt;multipart/alternative&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
  1694. &lt;h2&gt;Te maken met 3D graphics?&lt;/h2&gt;
  1695. &lt;p&gt;De standaard die je gebruikt is waarschijnlijk beschreven en onderhouden door de &lt;a href=&quot;https://www.khronos.org/developers&quot;&gt;Khronos Group&lt;/a&gt;&lt;/p&gt;
  1696. &lt;h2&gt;Testen op toegankelijkheid?&lt;/h2&gt;
  1697. &lt;p&gt;Je volgt hoogstwaarschijnlijk de &lt;em&gt;Web Content Accessibility Guidelines&lt;/em&gt;, zoals beschreven in &lt;a href=&quot;https://www.w3.org/TR/WCAG21/&quot;&gt;de specificatie&lt;/a&gt; van het W3C (World Wide Web Consortium).&lt;/p&gt;
  1698. &lt;p&gt;Bovenstaande is maar een klein onderdeel van de vele vele standaarden waar je al met regelmaat gebruik van maakt, waar je op bouwt, waar je van profiteert. Hoe URLs werken, en wat de regels zijn voor een e-mail adres.&lt;/p&gt;
  1699. &lt;h2&gt;Meedoen met het ontwikkelen van ons WWW&lt;/h2&gt;
  1700. &lt;p&gt;Interesseert dit alles je en heb je ideeën over het web door-ontwikkelen? Ben je ergens tegen aan gelopen die een huidige standaard niet beschrijft? Er zijn ontzettend veel manieren om mee te doen.&lt;/p&gt;
  1701. &lt;ol&gt;
  1702. &lt;li&gt;Veel van de organisaties die standaarden ontwikkelen en onderhouden kan je terug vinden op sites als GitHub.com. Voorbeelden hiervan zijn het &lt;a href=&quot;https://github.com/w3c&quot;&gt;WC3&lt;/a&gt;, &lt;a href=&quot;https://github.com/WICG&quot;&gt;WICG&lt;/a&gt;, &lt;a href=&quot;https://github.com/whatwg&quot;&gt;WhatWG&lt;/a&gt; en &lt;a href=&quot;https://github.com/tc39&quot;&gt;TC39&lt;/a&gt;. Ze hebben allemaal andere regels en richtlijnen, veelal beschreven in hun README en/of Code of Conduct. Dit is een van de eenvoudigste manieren om te zien welke discussies op dit moment leven.&lt;/li&gt;
  1703. &lt;li&gt;Het WC3 heeft &lt;a href=&quot;https://www.w3.org/&quot;&gt;een eigen website&lt;/a&gt;. Hier kan je alle werkgroepen en ander-soort samenkomen vinden. Lid worden van een groep is vaak ontzettend eenvoudig en als je het eenmaal bent, ben je vaak direct van harte welkom bij veel van de discussies.&lt;/li&gt;
  1704. &lt;li&gt;De Web Incubator Community Group (WICG) heb ik nog niet genoemd. Deze groep ontwikkeld voorstellen voor nieuwe &lt;em&gt;features&lt;/em&gt;! Je kan veel van deze features terug vinden op &lt;a href=&quot;https://wicg.io/&quot;&gt;hun website&lt;/a&gt;, alsmede een link naar hun Discourse.&lt;/li&gt;
  1705. &lt;li&gt;Dan hebben we de Web Hypertext Application Technology Working Group (WHATWG). Deze groep onderhoudt en ontwikkelt de HTML standaard! Hoe je daar mee aan kan doen staat uitgelegd op &lt;a href=&quot;https://whatwg.org/&quot;&gt;hun website&lt;/a&gt;.&lt;/li&gt;
  1706. &lt;li&gt;Voor JavaScript (en gerelateerde) is er &lt;a href=&quot;https://tc39.github.io/ecma262/&quot;&gt;de TC39 standaard&lt;/a&gt;. De website zelf geeft aan dat eigenlijk alle contributies lopen via &lt;a href=&quot;https://github.com/tc39/ecma262&quot;&gt;hun GitHub&lt;/a&gt;, maar er staat wel wat extra informatie op de website.&lt;/li&gt;
  1707. &lt;/ol&gt;
  1708. &lt;h2&gt;Is onderdeel worden van zo&#39;n groep dan de enige manier?&lt;/h2&gt;
  1709. &lt;p&gt;&lt;em&gt;NEE!&lt;/em&gt;. Je kan als individu reageren op issues, nieuwe voorstellen indienen, maar ook deelnemen aan evenementen gehost door de IETF. Er is een &lt;a href=&quot;https://datatracker.ietf.org/&quot;&gt;Datatracker&lt;/a&gt; die &lt;em&gt;alle&lt;/em&gt; voorstellen (aangenomen, klad, verlopen, enzovoorts) bijhoudt en beschrijft welke vragen open staan. Ook kan je hier terug vinden wanneer het volgende synchrone moment is om vragen te stellen over zo&#39;n voorstel. Zelf heb ik hier een aantal keer aan meegedaan.&lt;/p&gt;
  1710. &lt;p&gt;Er zijn leden van Fronteers die actief meewerken aan of hebben meegewerkt aan voorstellen van specificaties. Zij kunnen je waarschijnlijk net als ik vertellen dat dit niet altijd zonder &lt;em&gt;uitdagingen&lt;/em&gt; gaat. Ontwikkeling duurt vaak lang en consensus bereiken is niet altijd mogelijk. Het zijn relatief logge machines. Aan de andere kant is het wel zo dat alles waar wij digitaal, online van genieten mede mogelijk is gemaakt door deze standaarden.&lt;/p&gt;
  1711. &lt;h2&gt;Tot slot&lt;/h2&gt;
  1712. &lt;p&gt;Door het gebruik van webstandaarden was het voor ons mogelijk om voor een klant met behulp van 5 developers in totaal (in de hele stack) een applicatie neer te zetten met meer dan 15 miljoen requests elke avond, 2.2 TB data per dag, met een &lt;em&gt;gemiddelde (en mediaan)&lt;/em&gt; laadtijd van 35 ms gebruikmakende van één (relatief krachtige) server.&lt;/p&gt;
  1713. &lt;p&gt;Door het gebruik van webstandaarden konden we tegen een andere klant zeggen: &amp;quot;Jullie hebben klanten die screenreaders gebruiken? Dat is geen probleem. Daar zijn geen extra kosten aan verbonden.&amp;quot; waarna ze erachter kwamen dat vrijwel de hele applicatie al enigszins tot goed toegankelijk was.&lt;/p&gt;
  1714. &lt;p&gt;Door het gebruik van webstandaarden kunnen we veel eindeloze discussies voorkomen omdat we (bijna) altijd iets hebben om op terug te vallen en naar te refereren, en zo ook achterhalen of er een programmeer- of denkfout zit in onze code, of dat er een fout is gemaakt bij het &lt;em&gt;implementeren van een specificatie&lt;/em&gt; in bijvoorbeeld een browser.&lt;/p&gt;
  1715. &lt;p&gt;Ook jij gebruikt webstandaarden en dat is slim, dus ga zo door.&lt;/p&gt;
  1716. </content>
  1717.  </entry>
  1718.  <entry>
  1719.    <title>De slimmigheden in de standaardstylesheets van browsers</title>
  1720.    <link href="https://www.fronteers.nl/nl/blog/2022/12/de-slimmigheden-in-de-standaardstylesheets-van-browsers"/>
  1721.    <updated>2022-12-13T00:00:00Z</updated>
  1722.    <id>https://www.fronteers.nl/nl/blog/2022/12/de-slimmigheden-in-de-standaardstylesheets-van-browsers</id>
  1723.    <content xml:lang="nl" type="html">&lt;p&gt;Een marge van 8px om je hele pagina, koppen zijn uit zichzelf al groter en wie heeft dat afgrijselijke lettertype uitgekozen? Een &amp;quot;ongestijlde pagina&amp;quot; is stiekem helemaal niet zo ongestijld, maar bevat een flinke bak styling. Waar komt die stijl vandaan?&lt;/p&gt;
  1724. &lt;h2&gt;Standaard browser stylesheets&lt;/h2&gt;
  1725. &lt;p&gt;Die stijl komt uit de standaard browser stylesheets: CSS die je browser automatisch toevoegt aan iedere pagina. In tegenstelling tot wat je misschien verwacht staat deze standaard stijl letterlijk in CSS bestanden die de browser voor iedere pagina inlaadt:&lt;/p&gt;
  1726. &lt;ul&gt;
  1727. &lt;li&gt;Gecko (Firefox): https://searchfox.org/mozilla-central/source/layout/style/res/html.css&lt;/li&gt;
  1728. &lt;li&gt;Chromium (Chrome, Polypane e.a.): https://github.com/chromium/chromium/blob/main/third_party/blink/renderer/core/html/resources/html.css (Met wat extra CSS bestanden, bijvoorbeeld voor selectmenu, in hetzelfde mapje!)&lt;/li&gt;
  1729. &lt;li&gt;Webkit (Safari): https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css&lt;/li&gt;
  1730. &lt;/ul&gt;
  1731. &lt;p&gt;Iedere browser heeft zijn eigen standaard CSS en daar staan een hoop interessante dingen in. Hoewel dit geen geschiedenisles is, is het goed om te vermelden dat voor een lange tijd de stijl van elementen geen deel uitmaakte van de HTML specificatie. Iedere browser kon dus doen wat &#39;ie wilde.&lt;/p&gt;
  1732. &lt;p&gt;Gelukkig probeerden browsers steeds meer hetzelfde te renderen (onder druk van web standards fanaten, bijvoorbeeld met de Acid en Acid2 tests) waardoor dit minder een probleem werd, en met &lt;a href=&quot;https://www.w3.org/TR/CSS2/sample.html&quot;&gt;HTML4&lt;/a&gt; en later &lt;a href=&quot;https://html.spec.whatwg.org/multipage/rendering.html&quot;&gt;HTML5&lt;/a&gt; werd een hoop van de standaard browser stylesheet vastgelegd.&lt;/p&gt;
  1733. &lt;p&gt;Enfin, geen geschiedenisles dus. Maar als je nou echt wilt weten waarom er 8px marge op de &lt;code&gt;body&lt;/code&gt; zit, heeft Miriam Suzanne &lt;a href=&quot;https://www.miriamsuzanne.com/2022/07/04/body-margin-8px/&quot;&gt;dat voor je uitgezocht&lt;/a&gt;.&lt;/p&gt;
  1734. &lt;p&gt;Wat we wel gaan doen is kijken wat voor interessante, slimme dingen er in die standaard stylesheets zit. De CSS die daar in staat kan namelijk precies geschreven worden op de capaciteiten van de browser, en per definitie hebben ze dus altijd toegang tot de meest nieuwe features in browsers. De stylesheets worden ook actief bijgehouden: de CSS van Webkit is voor het laasts op 16 juni dit jaar aangepast, die van Gecko op 16 september en Chromium voor het laatst ...twee uur geleden (9 november)!&lt;/p&gt;
  1735. &lt;h2&gt;Dus dat voor leuke dingen staan er in?&lt;/h2&gt;
  1736. &lt;p&gt;Voor het gemak slaan we de &amp;quot;CSS Reset&amp;quot; achtige dingen over. De standaard stylesheets voegen &lt;code&gt;display: none&lt;/code&gt; en &lt;code&gt;display: block&lt;/code&gt; toe op alle elementen die dat nodig hebben (en &lt;code&gt;display: table&lt;/code&gt; op tables!) en tekstgroottes worden allemaal in &lt;code&gt;em&lt;/code&gt; gezet zodat ze automatisch meeschalen. Dat is allemaal niet super spannend, dus gaan we niet verder op in.&lt;/p&gt;
  1737. &lt;h2&gt;Logical properties&lt;/h2&gt;
  1738. &lt;p&gt;Alle marges in een document zoals die boven en onder koppen en het inspringen van &lt;code&gt;ul&lt;/code&gt;s en &lt;code&gt;blockquote&lt;/code&gt;s komen uit deze standaard stylesheet. Maar in plaats van &lt;code&gt;margin-top&lt;/code&gt; en &lt;code&gt;margin-bottom&lt;/code&gt; gebruiken ze andere CSS properties: &amp;quot;logical properties&amp;quot;.&lt;/p&gt;
  1739. &lt;p&gt;In plaats van &lt;code&gt;margin-bottom&lt;/code&gt; gebruiken ze &lt;code&gt;margin-block-end&lt;/code&gt; en in plaats van &lt;code&gt;margin-left&lt;/code&gt; gebruiken ze &lt;code&gt;margin-inline-start&lt;/code&gt;.&lt;/p&gt;
  1740. &lt;table&gt;
  1741. &lt;thead&gt;
  1742. &lt;tr&gt;
  1743. &lt;th&gt;&#39;oude&#39; margins&lt;/th&gt;
  1744. &lt;th&gt;Logical properties (voor NL)&lt;/th&gt;
  1745. &lt;/tr&gt;
  1746. &lt;/thead&gt;
  1747. &lt;tbody&gt;
  1748. &lt;tr&gt;
  1749. &lt;td&gt;margin-top&lt;/td&gt;
  1750. &lt;td&gt;margin-block-start&lt;/td&gt;
  1751. &lt;/tr&gt;
  1752. &lt;tr&gt;
  1753. &lt;td&gt;margin-bottom&lt;/td&gt;
  1754. &lt;td&gt;margin-block-end&lt;/td&gt;
  1755. &lt;/tr&gt;
  1756. &lt;tr&gt;
  1757. &lt;td&gt;margin-left&lt;/td&gt;
  1758. &lt;td&gt;margin-inline-start&lt;/td&gt;
  1759. &lt;/tr&gt;
  1760. &lt;tr&gt;
  1761. &lt;td&gt;margin-right&lt;/td&gt;
  1762. &lt;td&gt;margin-inline-end&lt;/td&gt;
  1763. &lt;/tr&gt;
  1764. &lt;/tbody&gt;
  1765. &lt;/table&gt;
  1766. &lt;p&gt;Logical properties gebruiken niet de absolute richtingen top, right, bottom en left, maar block voor de flow richting en inline voor de tekst richting (in latijnse talen respectievelijk van boven naar beneden en van links naar rechts).&lt;/p&gt;
  1767. &lt;p&gt;Het voordeel van deze logical properties is dat ze automatisch meeveranderen met de leesrichting van de pagina. In een pagina in het Arabisch staat &lt;code&gt;margin-inline-start&lt;/code&gt; dus aan de rechterkant, niet aan de linkerkant. Dat scheelt weer typen.&lt;/p&gt;
  1768. &lt;h2&gt;&lt;code&gt;:is()&lt;/code&gt; en &lt;code&gt;:-webkit-any()&lt;/code&gt;&lt;/h2&gt;
  1769. &lt;p&gt;Voordat &lt;code&gt;:is()&lt;/code&gt; er was, heette het &lt;code&gt;:matches()&lt;/code&gt; en daarvoor heette het &lt;code&gt;:-moz-any()&lt;/code&gt;/&lt;code&gt;:-webkit-any()&lt;/code&gt;. Die laatste werd al in 2010(!) aan Firefox 4 toegevoegd als een manier om delen van selectors te groeperen, en het heeft dus een flinke tijd geduurd voordat we dat allemaal in ons dagelijkse leven konden gebruiken.&lt;/p&gt;
  1770. &lt;blockquote&gt;
  1771. &lt;p&gt;Wil je daar meer over lezen? Check :where() :is() :has()? New CSS selectors that make your life easier&lt;/p&gt;
  1772. &lt;/blockquote&gt;
  1773. &lt;p&gt;De browsers zelf gebruiken het echter al een hele tijd. In HTML5 bestond het &amp;quot;document outline algoritm&amp;quot; en onderdeel daarvan was dat je meerdere H1s kon gebruiken als die maar telkens in een nieuwe section of article stonden. De browser zou ze dan magisch omtoveren tot H2, H3 enz.&lt;/p&gt;
  1774. &lt;p&gt;Nu is dat algoritme er nooit gekomen, maar de stijl ervoor wel, en die zit er nog steeds in. Zo wordt de stijl voor de &lt;code&gt;h2&lt;/code&gt; met de volgende selector beschreven:&lt;/p&gt;
  1775. &lt;pre&gt;&lt;code&gt;h2,
  1776. :is(article, aside, nav, section) h1 {
  1777.    /* */
  1778. }
  1779. &lt;/code&gt;&lt;/pre&gt;
  1780. &lt;p&gt;Hierdoor ziet de h1 in een article, aside, nav of section er dus hetzelfde uit als een H2. En hoe denk je dat ze dat met 4 niveau&#39;s diep geneste sections doen? Inderdaad, vier keer hetzelfde achter elkaar:&lt;/p&gt;
  1781. &lt;pre&gt;&lt;code&gt;h4,
  1782. :is(article, aside, nav, section)
  1783. :is(article, aside, nav, section)
  1784. :is(article, aside, nav, section)
  1785. h1 {
  1786.  
  1787. }
  1788. &lt;/code&gt;&lt;/pre&gt;
  1789. &lt;p&gt;De grote vraag is nu of ze, met het verdwijnen van het algoritme, ook deze stijl weer weg gaan halen. Zoals je kan bedenken is het aanpassen van de standaard browser stijl niet zonder gevaren, en browsers mogen de miljoenen bestaande websites niet kapot maken. We gaan het zien.&lt;/p&gt;
  1790. &lt;p&gt;Oh en die &lt;code&gt;:-webkit-any()&lt;/code&gt;, die vinden we enkel nog terug in de CSS van Chromium. Gecko en Webkit zijn al overgestapt op &lt;code&gt;:is()&lt;/code&gt;. 💪&lt;/p&gt;
  1791. &lt;h2&gt;Case insensitive attribute matching&lt;/h2&gt;
  1792. &lt;p&gt;Alle stylesheets maken uitgebreid gebruik van attribute selectors om bijvoorbeeld verschillende input types mee te selecteren, maar in het chromium stylesheet staat daar overal een &amp;quot;i&amp;quot; achter:&lt;/p&gt;
  1793. &lt;pre&gt;&lt;code&gt;input[type=&amp;quot;search&amp;quot; i] {
  1794.    -webkit-appearance: searchfield;
  1795.    box-sizing: border-box;
  1796. }
  1797. &lt;/code&gt;&lt;/pre&gt;
  1798. &lt;p&gt;Die &amp;quot;i&amp;quot; kan je toevoegen om &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors#syntax&quot;&gt;&amp;quot;case insensitive&amp;quot; te matchen&lt;/a&gt;. Ongeacht of het attribuut hoofdletters of kleine letters gebruikt dus. Wanneer je geen controle hebt over hoe een attribuutwaarde geschreven is (bijvoorbeeld in een standaard stylesheet) kan dit handig zijn om toe te voegen en ook al gebruiken de andere browsers het niet in hun standaard stylesheet, ze ondersteunen het wel.&lt;/p&gt;
  1799. &lt;h2&gt;Met CSS de alt tekst laten zien&lt;/h2&gt;
  1800. &lt;p&gt;Wanneer een afbeelding niet geladen is laat de browser in plaats daarvan de alt tekst zien. Je verwacht misschien dat browsers hier in hun engine wat voor doen, maar Firefox lost dit op met CSS:&lt;/p&gt;
  1801. &lt;pre&gt;&lt;code&gt;img::before {
  1802.  content: -moz-alt-content !important;
  1803. }
  1804. &lt;/code&gt;&lt;/pre&gt;
  1805. &lt;p&gt;Die &lt;code&gt;-moz-alt-content&lt;/code&gt; is er ééntje die je zelf niet mag gebruiken, dat is een interne waarde. Maar het gaat er om hoe dit er voor zorgt dat de alt-tekst zichtbaar is als de afbeelding niet geladen kan worden: Afbeeldingen in browsers zijn &amp;quot;replaced content&amp;quot;, dat betekent dat de browser de afbeelding als het ware bovenop je website plakt. Form controls zijn hier een ander voorbeeld van.&lt;/p&gt;
  1806. &lt;p&gt;En omdat het replaced content is, kan je dus ook geen pseudo-content (met &lt;code&gt;::before&lt;/code&gt;of &lt;code&gt;::after&lt;/code&gt;) toevoegen aan afbeeldingen. Die worden door de browser genegeerd. Dus als de afbeelding werkt, doet deze CSS niks. Maar als de afbeelding niet geladen kan worden, wordt er niks &lt;em&gt;replaced&lt;/em&gt; en werkt de pseudo content dus wel. En ziedaar: de alt tekst verschijnt.&lt;/p&gt;
  1807. &lt;h2&gt;Vreemde code&lt;/h2&gt;
  1808. &lt;p&gt;Ook staan er een aantal ongewone dingen in de stylesheets:&lt;/p&gt;
  1809. &lt;h2&gt;Quirky ems&lt;/h2&gt;
  1810. &lt;p&gt;Als je in de Chromium en Webkit stylesheets kijkt zie je daar een CSS unit die je waarschijnlijk niet kent: &lt;code&gt;__qem&lt;/code&gt;. Die hoef je ook helemaal niet te kennen, maar Webkit (en Chromium, die daar op gebaseerd is) gebruikt deze eenheid om de juiste marges toe te kunnen passen in quirks mode. Heb je niks aan, maar leuk feitje om op de volgende Fronteersbijeenkomst te delen.&lt;/p&gt;
  1811. &lt;h2&gt;internal-light-dark()&lt;/h2&gt;
  1812. &lt;p&gt;In de stylesheet van Chromium zie je soms waar kleuren worden gedefinieerd een interessante CSS functie: -internal-light-dark() met twee waardes:&lt;/p&gt;
  1813. &lt;pre&gt;&lt;code&gt;input[type=&amp;quot;range&amp;quot; i] {
  1814.    color: -internal-light-dark(#101010, #ffffff);
  1815. }
  1816. &lt;/code&gt;&lt;/pre&gt;
  1817. &lt;p&gt;Deze functie kiest één van de twee kleuren afhankelijk van of er light of darkmode gebruikt wordt in de browser. Dat is een stuk compacter dan we momenteel met media queries kunnen doen:&lt;/p&gt;
  1818. &lt;pre&gt;&lt;code&gt;@media (prefers-color-scheme: light) {
  1819.    input[type=&amp;quot;range&amp;quot; i] {
  1820.        color: #101010
  1821.    }
  1822. }
  1823.  
  1824. @media (prefers-color-scheme: dark) {
  1825.       input[type=&amp;quot;range&amp;quot; i] {
  1826.        color: #ffffff
  1827.    }
  1828. }
  1829. &lt;/code&gt;&lt;/pre&gt;
  1830. &lt;p&gt;Wie weet wordt deze functie in de toekomst ook voor ons gewone developers beschikbaar.&lt;/p&gt;
  1831. &lt;h2&gt;Namespaces in CSS?&lt;/h2&gt;
  1832. &lt;p&gt;Alle drie de stylesheets beginnen met dezelfde regel:&lt;/p&gt;
  1833. &lt;p&gt;@namespace &amp;quot;&lt;a href=&quot;http://www.w3.org/1999/xhtml&quot;&gt;http://www.w3.org/1999/xhtml&lt;/a&gt;&amp;quot;;&lt;/p&gt;
  1834. &lt;p&gt;Waarschijnlijk heb je dit nog nooit zelf toegevoegd (en dat hoeft ook niet), maar door deze regel weet je browser dus welke elementen je bedoeld met &lt;code&gt;body&lt;/code&gt;, &lt;code&gt;div&lt;/code&gt; en &lt;code&gt;p&lt;/code&gt;, namelijk die uit de HTML namespace. Maar hoe komt het dan dat SVG elementen zoals &lt;code&gt;path&lt;/code&gt; en &lt;code&gt;g&lt;/code&gt; stijlen ook werkt? Dat is een slimmigheid van de HTML5 specificatie: SVG (en MathML) zijn bekende &amp;quot;foreign elements&amp;quot; en die krijgen automatisch de juiste namespace. Bedankt HTML5!&lt;/p&gt;
  1835. &lt;h2&gt;FIXME&lt;/h2&gt;
  1836. &lt;p&gt;In de stylesheets van Chromium en Webkit staat een interessante comment:&lt;/p&gt;
  1837. &lt;pre&gt;&lt;code&gt;/* page */
  1838. @page {
  1839.    /* FIXME: Define the right default values for page properties. */
  1840.    size: auto;
  1841.    margin: auto;
  1842.    padding: 0px;
  1843.    border-width: 0px;
  1844. }
  1845. &lt;/code&gt;&lt;/pre&gt;
  1846. &lt;p&gt;Een FIXME klinkt vrij urgent toch? Ik heb het even opgezocht en deze comment staat er sinds 2010 in. Zo urgent is het dus niet.&lt;/p&gt;
  1847. &lt;h2&gt;Jouw vondsten&lt;/h2&gt;
  1848. &lt;p&gt;Tot zover mijn &amp;quot;deep dive&amp;quot; door de standaard stylesheets van Chromium. Gecko en Webkit. Neem er vooral zelf ook een kijkje door en deel jouw vondsten in de reacties hieronder.&lt;/p&gt;
  1849. </content>
  1850.  </entry>
  1851.  <entry>
  1852.    <title>We leerden een steen hoe hij moest denken, maar nu heeft hij een paar bevooroordeelde meningen…</title>
  1853.    <link href="https://www.fronteers.nl/nl/blog/2022/12/we-leerden-een-steen-hoe-hij-moest-denken-maar-nu-heeft-hij-een-paar-bevooroordeelde-meningen"/>
  1854.    <updated>2022-12-12T00:00:00Z</updated>
  1855.    <id>https://www.fronteers.nl/nl/blog/2022/12/we-leerden-een-steen-hoe-hij-moest-denken-maar-nu-heeft-hij-een-paar-bevooroordeelde-meningen</id>
  1856.    <content xml:lang="nl" type="html">&lt;p&gt;Tegenwoordig kom je ze op steeds meer websites en in (web)applicaties tegen: Algoritmes. Complexe berekeningen op basis van een tal van datasets die samen het perfecte antwoord weten op jouw vraag, probleem of behoefte! Je komt ze tegen als je een film wilt kijken op Netflix, wanneer je een antwoord zoekt op Google en zelfs wanneer je je belastingaangifte doet! Deze kleine helpertjes zitten overal verstopt en zijn natuurlijk een geweldige oplossing voor automatisering, want een computer kan geen mening hebben, toch?&lt;/p&gt;
  1857. &lt;h2&gt;Wat is een algoritme?&lt;/h2&gt;
  1858. &lt;p&gt;Simpel gezegd is een algoritme een aantal vooraf ingestelde regels die helpen bij het komen tot een resultaat. We gebruiken dan ook al decennialang een vorm van algoritmes, we zijn ze alleen sinds kort gaan associëren met technologie. En hoewel algoritmes in de breedste zin interessant zijn, gaan we het hier vooral hebben over algoritmes in de context van onze steeds sneller groeiende tech wereld.&lt;/p&gt;
  1859. &lt;p&gt;Algoritmes vergemakkelijken ons leven steeds meer, we krijgen content te zien op onze sociale media kanalen die ons interesseert, we komen sneller bij een nieuwe film op Netflix uit die op basis van onze kijkgeschiedenis goed bij ons past en zelfs in de medische wereld wordt geëxperimenteerd met het gebruik van algoritmes om zo sneller tot een voorlopige diagnose van een patiënt te komen! Echter is het niet altijd rozengeur en maneschijn in de wereld van algoritmes en zijn er zelfs redenen om de ontwikkelingen in de techniek slecht te noemen.&lt;/p&gt;
  1860. &lt;h2&gt;Maar… Waarom zijn algoritmes dan slecht?&lt;/h2&gt;
  1861. &lt;p&gt;Niet alle algoritmes zijn slecht, ze zijn in ieder geval veelal niet ontwikkeld met kwade bedoelingen, maar toch is dat vaak wel een onbedoelde uitkomst. Algoritmes worden gevoerd met data die verzameld wordt vanuit allerlei verschillende bronnen, dit kan data zijn op basis van het gebruik van platformen zoals bijvoorbeeld Youtube of Twitter, maar het kan ook op basis van de resultaten van een onderzoek zijn. Deze data kan om allerlei redenen onbewuste vooroordelen bevatten van degene die deze data verzamelt heeft, of op een andere manier beïnvloed worden door een geschiedenis van vooroordelen.&lt;/p&gt;
  1862. &lt;p&gt;Een waargebeurd voorbeeld is als volgt:&lt;/p&gt;
  1863. &lt;p&gt;Een bedrijf gebruikt een algoritme om zijn sollicitatieprocedure te verbeteren. Het algoritme krijgt hierbij een aantal succesvolle sollicitaties en een aantal niet succesvolle sollicitaties voorgeschoteld op basis van sollicitatieprocedures in de voorgaande jaren om hiervan te leren welke kandidaten bij het bedrijf passen. In theorie klinkt het als een mooie oplossing waardoor geen enkele kandidaat wordt afgewezen vanwege een oneerlijke mening van de recruiter, maar niets is minder waar. In het bedrijf werken namelijk grotendeels witte cis hetero mannen, een (onbewuste) keuze van de recruiters die in het verleden dit werk uitvoerde. Het algoritme wordt dus vanaf stap 1 gevoerd met data die in zijn kern al vol vooroordelen zit. Een systeem dat gevoerd word met data waarin een bepaald soort mens positiever uit de verf komt, zal datzelfde soort mens dan ook voorrang geven in de selectieprocedure.&lt;/p&gt;
  1864. &lt;h2&gt;Wat kan &lt;em&gt;ik&lt;/em&gt; er aan doen?&lt;/h2&gt;
  1865. &lt;p&gt;Er zijn verschillende manieren om het gebruik van algoritmes te verbeteren, hieronder verdeel ik ze tussen wat je er als developer aan kunt doen en ook wat je er als gebruiker aan kunt doen. Een tip die in ieder geval voor beide groepen geldt is: Lees je in over het onderwerp!&lt;/p&gt;
  1866. &lt;h2&gt;Wat kan ik als developer die met algoritmes werkt doen?&lt;/h2&gt;
  1867. &lt;ul&gt;
  1868. &lt;li&gt;Zorg ervoor dat de data die je gebruikt om jouw algoritme te trainen uit een divers aanbod bestaat. Gebruik data uit meerdere bronnen waarvan ook vast te stellen is dat er diverse kandidaten deel waren van het onderzoek en/of de data die passief verzamelt is.&lt;/li&gt;
  1869. &lt;li&gt;Betrekt zoveel mogelijke diverse kandidaten, maar ook mede developers in het process! Je hoeft natuurlijk niet als een soort pokemons van elke soort 1 te vangen, maar hoe meer ogen van verschillende achtergronden je kunt betrekken bij de ontwikkeling, hoe sneller ongewilde vooroordelen in de kiem gesmoord kunnen worden.&lt;/li&gt;
  1870. &lt;li&gt;Let goed op of de data die je gebruikt stereotyperend kan zijn! Denk hierbij aan het voorbeeld van een algoritme wat getraind is op historische data van vooral witte cis hetero mannen, zorg ervoor dat je dit soort data sets vermijd of op zijn minst voorziet van een bepaalde context.&lt;/li&gt;
  1871. &lt;/ul&gt;
  1872. &lt;h2&gt;Wat kan ik als gebruiker van platformen met algoritmes doen?&lt;/h2&gt;
  1873. &lt;ul&gt;
  1874. &lt;li&gt;Wees alert op de content waar je actief een reactie op geeft. Wees je daarbij bewust van het feit dat reageren op berichten die negatieve informatie delen het algoritme verteld dat jij (en potentieel anderen) deze content reactie waardig vinden en dus meer aandacht/een hogere positie verdient.&lt;/li&gt;
  1875. &lt;li&gt;Ga bewust met je data om. Je hoeft geen digitale hermit te worden, maar denk goed na wanneer je informatie over jezelf online met een platform deelt, jouw informatie kan onbedoeld gevoed worden aan een algoritme.&lt;/li&gt;
  1876. &lt;li&gt;Maak anderen bewust van de algoritmes die bestaan en deel ook tips over het vermijden van schadelijke algoritmes, hoe meer bewustwording er gecreëerd wordt hoe moeilijker het zal zijn voor bedrijven om algoritmes op een negatieve manier in te zetten.&lt;/li&gt;
  1877. &lt;/ul&gt;
  1878. &lt;h2&gt;Moeten we algoritmes dan helemaal afzweren?&lt;/h2&gt;
  1879. &lt;p&gt;Algoritmes helemaal afzweren, dat hoeft zeker niet. Zolang we bewust en ethisch omgaan met de data die we gebruiken en de data die we over onszelf delen kunnen we samen hele mooie dingen maken. Wat zou het mooi zijn als we op een inclusieve en verantwoorde manier mensen sneller kunnen helpen bij bijvoorbeeld het vinden van een baan of werknemer, hulp bij medische problemen, maar ook zoiets simpels als het ontdekken van die nieuwe artiest wiens muziek je helemaal blij maakt! Al met al maken algoritmes ons leven makkelijker en hebben ze de potentie om veels goeds te doen voor technologische en sociale ontwikkelingen, maar dan moeten we wel allemaal ons steentje bij dragen.&lt;/p&gt;
  1880. </content>
  1881.  </entry>
  1882.  <entry>
  1883.    <title>Hoe ik mezelf leerde werken met Webflow + tips! (hoe jij jezelf iets nieuws kan leren)</title>
  1884.    <link href="https://www.fronteers.nl/nl/blog/2022/12/hoe-ik-mezelf-leerde-werken-met-webflow-tips-hoe-jij-jezelf-iets-nieuws-kan-leren"/>
  1885.    <updated>2022-12-11T00:00:00Z</updated>
  1886.    <id>https://www.fronteers.nl/nl/blog/2022/12/hoe-ik-mezelf-leerde-werken-met-webflow-tips-hoe-jij-jezelf-iets-nieuws-kan-leren</id>
  1887.    <content xml:lang="nl" type="html">&lt;p&gt;Toen Nederland in maart 2020 in lockdown ging, ben ik begonnen met leren coderen. Dit deed ik elke dag. Dat wierp zijn vruchten af want uiteindelijk kreeg ik een baan als developer.&lt;/p&gt;
  1888. &lt;p&gt;Maar nog steeds maak ik elke dag tijd om te leren. Soms maar 15 minuten en soms wel een paar uur. Ondertussen ben ik het wel gewend om dagelijks bezig te zijn met leren coderen en is het een gewoonte geworden. Een goede gewoonte, want in onze branche is leren een vaardigheid die je veel gebruikt. Het is belangrijk om met de tijd mee te gaan en steeds weer wat nieuws te leren of het nu een andere werkwijze of een andere programmeertaal is.&lt;/p&gt;
  1889. &lt;p&gt;Ik leer niet alleen in mijn vrije tijd, maar ook tijdens mijn werk besteed ik tijd aan leren. Zoals het CMS&lt;/p&gt;
  1890. &lt;h2&gt;Webflow.&lt;/h2&gt;
  1891. &lt;p&gt;Webflow is een platform, waarmee je websites kan maken. Daarbij gebruik je geen code maar werk je met een visueel canvas, waarin je als developer zelf een website op maat maakt door te slepen, klikken en typen. Je hebt dezelfde vrijheid wanneer je het zelf zou programmeren.&lt;/p&gt;
  1892. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog-rosita.jpg&quot; alt=&quot;De editor in Webflow met links de instellingen van de website en het overzicht van alle gebruikte elementen op de huidige pagina, in het midden hetgeen dat je aan het maken bent en rechts het menu met instellingen van het geselecteerde element.&quot; /&gt;&lt;/p&gt;
  1893. &lt;p&gt;De editor in Webflow, hier met een cloneable template gemaakt door Finsweet.&lt;/p&gt;
  1894. &lt;p&gt;Zelf heb ik voornamelijk ervaring met het maken van websites met WordPress. &lt;a href=&quot;https://www.websitebezorgd.nl/post/wat-is-webflow&quot;&gt;Op mijn werk wordt er al een tijd gewerkt met Webflow&lt;/a&gt;. Daarom leer ik nu te werken met dit CMS. Webflow werkt heel anders en zit anders in elkaar. WordPress moet je op een server installeren. Terwijl je Webflow in je browser kunt gebruiken en je hier geen aparte hosting voor nodig hebt.&lt;/p&gt;
  1895. &lt;p&gt;Net als bij WordPress zijn er 1000 en 1 manieren om een website te bouwen. Elke developer heeft een eigen manier van werken. Dat komt de consistentie van de styling niet ten goede. Daarom is het handig om afspraken daarover te maken of bepaalde richtlijnen te volgen. Wij gebruiken daarvoor &lt;a href=&quot;https://www.finsweet.com/client-first/docs&quot;&gt;Client-First&lt;/a&gt;, ontwikkeld door Finsweet. Client-First bestaat uit meerdere styleguides en methodes die zijn ontwikkeld om het bouwen van websites in Webflow makkelijker te maken.&lt;/p&gt;
  1896. &lt;p&gt;Hoe ziet Client First er dan specifiek uit? In Client-First is de structuur en de opbouw van de pagina’s heel belangrijk. En is er een bepaald systeem om de classes een goede herkenbare naam te geven bijvoorbeeld &lt;code&gt;.section-home-hero&lt;/code&gt;, voor de hero op de homepagina. Ook wordt er gebruik gemaakt van rem in plaats van pixels, met hier en daar een uitzondering. (bijvoorbeeld bij: &lt;code&gt;footer {border-top-width: 2px;}&lt;/code&gt;).&lt;/p&gt;
  1897. &lt;div class=&quot;note&quot;&gt;De naam Client-First betekent: &#39;We stellen de belangen van onze klanten voorop in het proces van het bouwen van een website in Webflow.&#39;&lt;/div&gt;
  1898. &lt;p&gt;Naast Client-First gebruiken we de &lt;a href=&quot;https://library.relume.io/&quot;&gt;Relume library&lt;/a&gt;, een library met (heel veel!) verschillende componenten voor Webflow, die je in projecten kan gebruiken en aanpassen. Relume werkt ook goed samen met Client-First. Op deze manier kun je dus snel een mooie website neerzetten.&lt;/p&gt;
  1899. &lt;h2&gt;Hoe ik leer Webflow te gebruiken&lt;/h2&gt;
  1900. &lt;p&gt;Ik maakte een gratis starters account aan bij Webflow. Het is heel beperkt, maar goed genoeg om mee te oefenen. Toen ik voor het eerst de designer van Webflow zag, vond ik het nogal overweldigend. Je kunt er veel kanten mee op.&lt;/p&gt;
  1901. &lt;p&gt;Gelukkig is er Webflow University. Hier kun je allerlei tutorials volgen om zo het CMS te leren kennen. De presentator is erg grappig by the way.&lt;/p&gt;
  1902. &lt;p&gt;Om het platform beter te leren kennen, begon ik zelf een thema dat wij al op de plank hadden liggen, na te maken. Vervolgens ging ik verder met het volgen van tutorials door Finsweet op Youtube. En ook hierbij probeerde ik het pasgeleerde toe te passen tijdens het maken van mijn website in Webflow.&lt;/p&gt;
  1903. &lt;h2&gt;Mijn tips om goed te kunnen leren&lt;/h2&gt;
  1904. &lt;p&gt;De laatste jaren ben ik veel bezig geweest met leren. Ik heb voor mezelf ondertussen een manier gevonden die voor mij werkt:&lt;/p&gt;
  1905. &lt;p&gt;Maak heel concreet wat je precies wilt leren.&lt;/p&gt;
  1906. &lt;p&gt;Heel saai, maak je leerdoel zo SMART mogelijk. Je wordt er tijdens je opleiding niet voor niks mee dood gegooid. Mijn doel is: Aan het einde van dit jaar wil ik een maatwerkdesign kunnen bouwen in Webflow met behulp van Client-First.&lt;/p&gt;
  1907. &lt;h2&gt;Herhalen&lt;/h2&gt;
  1908. &lt;p&gt;Herhaal wat je hebt geleerd en pas het toe, dat werkt voor mij het beste. En ik denk maar zo: hoe vaker je iets herhaalt, hoe beter je erin wordt. De eerste keer dat ik een website moest verhuizen, ging dat niet goed. Maar hoe vaker ik het doe, hoe beter het gaat. Zo heb ik laatst succesvol een website verhuisd. Dat ging overigens niet geheel vlekkeloos, zoals gewoonlijk, maar ik heb het wel zelf kunnen oplossen.&lt;/p&gt;
  1909. &lt;h2&gt;Regelmaat&lt;/h2&gt;
  1910. &lt;p&gt;Neem regelmatig de tijd om te leren. Neem de tijd om bijvoorbeeld 2 keer in de week, of eens in de twee weken of net zoals ik elke dag even bezig te zijn met mijn online cursus op Codecademy. Plan die vaste momenten in.&lt;/p&gt;
  1911. &lt;h2&gt;Pas toe wat je hebt geleerd&lt;/h2&gt;
  1912. &lt;p&gt;Pas toe wat je hebt geleerd. Mijn ervaring is dat de stof die je hebt geleerd dan beter blijft hangen. Ik bekijk de tutorials over Client-First en Webflow, lees de documentatie van beiden en vervolgens probeer ik dat toe te passen in mijn project dat ik aan het bouwen ben in de designer.&lt;/p&gt;
  1913. &lt;p&gt;Wanneer ik bezig ben om een website in WordPress te bouwen of dingen aan het doen ben in plain HTML en CSS, probeer ik de principes van Client-First toe te passen, waar dat mogelijk is. Je kunt namelijk prima het 4 pt systeem in rem toepassen in CSS. In WordPress kan dat ook, als het mogelijk is met het thema wat je gebruikt. Niet alle thema’s ondersteunen het gebruik van rem.&lt;/p&gt;
  1914. &lt;h2&gt;Ga ermee aan de slag&lt;/h2&gt;
  1915. &lt;p&gt;En als laatste: ga het gewoon doen. Als je te lang blijft hangen in het volgen van tutorials, leer je de dingen waar je tegenaan loopt, niet zelf op te lossen. Ga gewoon ermee aan de slag. Al doende leert men, en mijn ervaring daarbij is dat je het dan heel snel leert omdat het dan echt moet. Net als koken, als je net op jezelf bent gaan wonen. En hoe vaker je het doet, hoe beter het wordt, zoals ik eerder al schreef. En binnen de kortste keren ben jij een pro!&lt;/p&gt;
  1916. </content>
  1917.  </entry>
  1918.  <entry>
  1919.    <title>Nullish Coalescing en Optional Chaining</title>
  1920.    <link href="https://www.fronteers.nl/nl/blog/2022/12/nullish-coalescing-en-optional-chaining"/>
  1921.    <updated>2022-12-10T00:00:00Z</updated>
  1922.    <id>https://www.fronteers.nl/nl/blog/2022/12/nullish-coalescing-en-optional-chaining</id>
  1923.    <content xml:lang="nl" type="html">&lt;p&gt;Sinds ECMAScript 2020 zijn twee veelgevraagde features onderdeel geworden van de geliefde (en gehate) taal, JavaScript: de Nullish Coalescing operator en Optional Chaining. Beide zijn vooral &lt;em&gt;syntactical sugar&lt;/em&gt;; een syntactische toevoeging voor iets wat we al konden schrijven, maar wel toevoegingen die welkom zijn, omdat ze code leesbaarder houden.&lt;/p&gt;
  1924. &lt;p&gt;Beide features worden ondersteund door alle moderne browsers. Als je oude browsers moet ondersteunen, kan je ze nog steeds gebruiken door de code omzetten naar beter ondersteunde code middels compilers zoals TypeScript en Babel.&lt;/p&gt;
  1925. &lt;p&gt;Voordat we deze nieuwigheidjes gaan verkennen, laten we eerst naar pre-ES2020 kijken zodat we begrijpen wat ze toevoegen.&lt;/p&gt;
  1926. &lt;h2&gt;De Logical OR (&lt;code&gt;||&lt;/code&gt;) operator&lt;/h2&gt;
  1927. &lt;p&gt;De kans is groot dat je de Logical OR operator gebruikt hebt. Deze komt veel voor bij het omschrijven van (meerdere) condities in bijvoorbeeld &lt;code&gt;if&lt;/code&gt; statements:&lt;/p&gt;
  1928. &lt;pre&gt;&lt;code&gt;// Als een product op voorraad is OF voorbesteld kan worden...
  1929. if (isInStock || isPreorderable) {
  1930. // Toon de bestelknop
  1931. }
  1932. &lt;/code&gt;&lt;/pre&gt;
  1933. &lt;p&gt;Als je de naam van de operator en het voorbeeld ziet, wekt dit de indruk dat dit een operator voor twee booleans is. Als geen van de twee booleans &lt;code&gt;true&lt;/code&gt; is, geeft de operator &lt;code&gt;false&lt;/code&gt; terug. Als één of beide booleans &lt;code&gt;true&lt;/code&gt; is, geeft het &lt;code&gt;true&lt;/code&gt; terug. Deze beweringen kloppen, maar op een minder intuïtieve manier: het geeft de eerste waarde terug dat &lt;em&gt;truthy&lt;/em&gt; is, en anders de laatste waarde. De operator werkt voor booleans, maar ook andere data types!&lt;/p&gt;
  1934. &lt;p&gt;Omdat de logical OR operator één van de twee waardes terug geeft, ontstaat er een interessante eigenschap. Wanneer de waarde aan de linker kant &lt;em&gt;falsy&lt;/em&gt; is (zoals een lege string), geeft de operator de rechter waarde terug. Dat kan erg handig zijn met fallback waardes:&lt;/p&gt;
  1935. &lt;pre&gt;&lt;code&gt;// Vul de variabel met de input waarde
  1936. // Als het veld leeg is, waardoor input.value een lege string is, vul met &amp;quot;No name&amp;quot;
  1937. const name = input.value || &#39;No name&#39;;
  1938. &lt;/code&gt;&lt;/pre&gt;
  1939. &lt;p&gt;De flexibiliteit van deze operator is tevens het probleem. &lt;em&gt;Truthy&lt;/em&gt; en &lt;em&gt;falsy&lt;/em&gt; waardes zijn min of meer arbitrair en JavaScript doet aannames over specifieke waardes. Wellicht begrijp je dat &lt;code&gt;null&lt;/code&gt; en &lt;code&gt;undefined&lt;/code&gt; falsy waarden zijn. Een lege string (&lt;code&gt;&amp;quot;&amp;quot;&lt;/code&gt;) en de cijfer nul (&lt;code&gt;0&lt;/code&gt;) worden ook gezien als falsy waarden, ondanks dat die in sommige situaties gewenst zijn.&lt;/p&gt;
  1940. &lt;p&gt;Stel, we maken het systeem om kaartjes te bestellen voor het Fronteers congres. Nadat iemand z’n bestelling heeft geplaatst, willen we het resterende aantal tickets bijwerken:&lt;/p&gt;
  1941. &lt;pre&gt;&lt;code&gt;ticketCount -= orderCount || 1;
  1942. &lt;/code&gt;&lt;/pre&gt;
  1943. &lt;p&gt;Wanneer de gebruiker geen aantal opgeeft, bevat &lt;code&gt;orderCount&lt;/code&gt; de waarde &lt;code&gt;null&lt;/code&gt;, en anders een cijfer. Middels de OR operator doen we de aanname dat als gebruiker geen aantal heeft opgegeven, er één kaart besteld wordt. Alles lijkt te werken, totdat een gebruiker 9 kaartjes wilt bestellen, maar per ongeluk 0 invoert. Omdat 0 een falsy waarde is, word &lt;code&gt;ticketCount&lt;/code&gt; verlaagd met de fallback waarde van 1. Het lijkt alsof er één kaart is besteld, ook al is dat niet zo.&lt;/p&gt;
  1944. &lt;p&gt;Om dat geval af te vangen, moeten we specifieker zijn wanneer we de waarde als leeg achtten, zoals met een Ternary operator:&lt;/p&gt;
  1945. &lt;pre&gt;&lt;code&gt;ticketCount -= orderCount !== null ? orderCount : 1;
  1946. &lt;/code&gt;&lt;/pre&gt;
  1947. &lt;h2&gt;De Nullish Coalescing (&lt;code&gt;??&lt;/code&gt;) Operator&lt;/h2&gt;
  1948. &lt;p&gt;Zoals we net zagen, zijn er gevallen waar we niet alle falsy waarden over één willen kam scheren, en bijvoorbeeld lege strings (&lt;code&gt;&amp;quot;&amp;quot;&lt;/code&gt;) en het cijfer nul (&lt;code&gt;0&lt;/code&gt;) behouden. Met de Nullish Coalescing operator, kan dat!&lt;/p&gt;
  1949. &lt;p&gt;In principe werkt het nagenoeg hetzelfde als de Logical OR (&lt;code&gt;||&lt;/code&gt;) operator, alleen geeft deze operator de linker waarde terug wanneer die niet &lt;em&gt;nullish&lt;/em&gt; (&lt;code&gt;null&lt;/code&gt; of &lt;code&gt;undefined&lt;/code&gt;) is, en anders waarde rechts van de operator. Laten we het voorbeeld van ons bestelsysteem herzien met deze operator:&lt;/p&gt;
  1950. &lt;pre&gt;&lt;code&gt;ticketCount -= orderCount ?? 1;
  1951. &lt;/code&gt;&lt;/pre&gt;
  1952. &lt;p&gt;Wanneer &lt;code&gt;orderCount&lt;/code&gt; &lt;code&gt;null&lt;/code&gt; is, geeft de operator de fallback waarde van 1 terug. Wanneer &lt;code&gt;orderCount&lt;/code&gt; een cijfer bevat, ook nul (&lt;code&gt;0&lt;/code&gt;), zal die waarde gebruikt worden.&lt;/p&gt;
  1953. &lt;p&gt;&lt;code&gt;x ?? y&lt;/code&gt; is min of meer een shorthand voor de volgende expressie:&lt;/p&gt;
  1954. &lt;pre&gt;&lt;code&gt;x !== null &amp;amp;&amp;amp; x !== undefined ? x : y
  1955. &lt;/code&gt;&lt;/pre&gt;
  1956. &lt;p&gt;Let op dat het gebruik van de Nullish Coalescing operator in een &lt;code&gt;if&lt;/code&gt; statement verwarring kan veroorzaken.&lt;/p&gt;
  1957. &lt;pre&gt;&lt;code&gt;if (orderCount ?? false) {
  1958. // ...
  1959. }
  1960. &lt;/code&gt;&lt;/pre&gt;
  1961. &lt;p&gt;Bovenstaande code herintroduceert hetzelfde probleem. Ook al zal de expressie &lt;code&gt;orderCount ?? false&lt;/code&gt; werken zoals verwacht, indien &lt;code&gt;orderCount&lt;/code&gt; 0 is, krijg je effectief &lt;code&gt;if (0)&lt;/code&gt;, en zal de code niet uitgevoerd worden.&lt;/p&gt;
  1962. &lt;p&gt;De Chaining (&lt;code&gt;.&lt;/code&gt;) Operator&lt;/p&gt;
  1963. &lt;p&gt;Misschien heb je wel eens JSON opgehaald via REST API en werd er conditioneel informatie teruggegeven, bijvoorbeeld o.b.v. een rol of rechten.&lt;/p&gt;
  1964. &lt;p&gt;Stel, hebben een object ontvangen, &lt;code&gt;order&lt;/code&gt;, en we willen de naam van de persoon uit een opdracht halen:&lt;/p&gt;
  1965. &lt;pre&gt;&lt;code&gt;const customerName = order.customer.name;
  1966. &lt;/code&gt;&lt;/pre&gt;
  1967. &lt;p&gt;Wanneer &lt;code&gt;order&lt;/code&gt; of &lt;code&gt;order.customer&lt;/code&gt; bijvoorbeeld &lt;code&gt;null&lt;/code&gt; is, geeft dit een error: &lt;code&gt;Uncaught TypeError: Cannot read properties of null&lt;/code&gt;. Dit kan bijvoorbeeld gebeuren als een beheerder naar een bestelling wilt kijken, maar geen persoonsgegevens mag inzien.&lt;/p&gt;
  1968. &lt;p&gt;We kunnen in meerdere stappen controleren of het veld, dat we uit willen lezen, bestaat. Misschien heb je wel eens dit soort code gezien of geschreven:&lt;/p&gt;
  1969. &lt;pre&gt;&lt;code&gt;const customerName = order
  1970. &amp;amp;&amp;amp; order.customer
  1971. &amp;amp;&amp;amp; order.customer.name;
  1972. &lt;/code&gt;&lt;/pre&gt;
  1973. &lt;p&gt;Omdat deze situatie en daardoor dit soort controles vaak voorkomt, zijn er zelfs functies (zoals &lt;code&gt;[_.get()](https://lodash.com/docs/#get)&lt;/code&gt; in lodash) geschreven en npm packages gepubliceerd om veilig informatie uit een onbekend object te halen zonder JavaScript errors te veroorzaken.&lt;/p&gt;
  1974. &lt;p&gt;Voor een dynamische taal zoals JavaScript is het vreemd dat er geen ingebouwde manier is om veilig een object uit te lezen. Dat is verleden tijd dankzij de Optional Chaining operator!&lt;/p&gt;
  1975. &lt;h2&gt;Optional Chaining ( &lt;code&gt;?.&lt;/code&gt; )&lt;/h2&gt;
  1976. &lt;p&gt;Optional Chaining maakt het uitlezen van object veel veiliger. We kunnen de Chaining operator (&lt;code&gt;.&lt;/code&gt;) vervangen met deze nieuwe operator wanneer er onzekerheid is over het uit te lezen object. In andere programmeertalen is er een vergelijkbare operator die bekend staat als de Elvis operator (omdat die syntax, &lt;code&gt;?:&lt;/code&gt; op twee ogen en een kuif lijkt).&lt;/p&gt;
  1977. &lt;p&gt;Het voorbeeld van eerder kunnen we herschrijven naar:&lt;/p&gt;
  1978. &lt;pre&gt;&lt;code&gt;const customerName = order?.customer?.name;
  1979. &lt;/code&gt;&lt;/pre&gt;
  1980. &lt;p&gt;Wanneer &lt;code&gt;order&lt;/code&gt; of &lt;code&gt;order.customer&lt;/code&gt; nullish is, krijgt &lt;code&gt;customerName&lt;/code&gt; de waarde &lt;code&gt;undefined&lt;/code&gt; in plaats van dat het een error veroorzaakt. We hoeven deze operator niet overal te gebruiken. Als we zeker weten dat &lt;code&gt;order&lt;/code&gt; altijd een object is, is onderstaand voldoende:&lt;/p&gt;
  1981. &lt;pre&gt;&lt;code&gt;const customerName = order.customer?.name;
  1982. &lt;/code&gt;&lt;/pre&gt;
  1983. &lt;p&gt;Ook kunnen we Optional Chaining combineren met Property Accessors (&lt;code&gt;obj[&#39;veld&#39;]&lt;/code&gt;):&lt;/p&gt;
  1984. &lt;pre&gt;&lt;code&gt;const field = &#39;name&#39;;
  1985. const customerField = order.customer?.[field];
  1986. &lt;/code&gt;&lt;/pre&gt;
  1987. &lt;p&gt;We kunnen met de operator ook de error &lt;code&gt;Undefined is not a function&lt;/code&gt; voorkomen. Let op dat de Optional Chaining operator enkel controleert of een waarde niet-nullish is:&lt;/p&gt;
  1988. &lt;pre&gt;&lt;code&gt;const obj = {
  1989. myString: &#39;Not a function&#39;,
  1990. myFunction() {
  1991. // ...
  1992. },
  1993. };
  1994. //
  1995. // obj.myNullish is niet gedefinieerd in obj
  1996. obj.myNullish?.();
  1997. obj.myFunction?.();
  1998. // De waarde is niet nullish, maar proberen het aan te roepen als een functie, terwijl het een string is
  1999. obj.myString?.(); // Error: obj.myString is not a function
  2000. &lt;/code&gt;&lt;/pre&gt;
  2001. &lt;p&gt;Dat we &lt;code&gt;undefined&lt;/code&gt; terug krijgen wanneer een property niet bestaat, wat een nullish waarde is, betekent dat we dit kunnen combineren met de Nullish Coalescing operator!&lt;/p&gt;
  2002. &lt;pre&gt;&lt;code&gt;const customerOrderCount = order.customer?.orderCount ?? &#39;N/A&#39;;
  2003. &lt;/code&gt;&lt;/pre&gt;
  2004. &lt;p&gt;Door deze operators te combineren, kunnen we code schrijven dat erg robuust is. Bovenstaande regel houdt niet alleen rekening met situaties wanneer &lt;code&gt;order.customer&lt;/code&gt; of niet bestaat, bijvoorbeeld wanneer de gebruiker deze informatie niet mag zien, maar zal ook netjes nul teruggeven wanneer de klant nog geen orders heeft geplaatst. Elk alternatief is een stuk minder elegant:&lt;/p&gt;
  2005. &lt;pre&gt;&lt;code&gt;const customerOrderCount = (
  2006. order.customer &amp;amp;&amp;amp;
  2007. typeof order.customer.orderCount === &#39;number&#39;
  2008. )
  2009. ? order.customer.orderCount
  2010. : &#39;N/A&#39;;
  2011. &lt;/code&gt;&lt;/pre&gt;
  2012. &lt;h2&gt;Conclusie&lt;/h2&gt;
  2013. &lt;p&gt;Het komt vaak voor dat nieuwe ECMAScript features geen verandering betekenen voor de code die we dagelijks schrijven. Nullish Coalescing en Optional Chaining, daarentegen, wel.&lt;/p&gt;
  2014. &lt;p&gt;De één is een zeer handige toevoeging voor het schrijven van condities en de ander om veilig objecten uit te lezen. Twee dingen die je vaak terug vindt in elke codebase van elk formaat. Ook al zijn het twee kleine operators, de impact is groot.&lt;/p&gt;
  2015. </content>
  2016.  </entry>
  2017.  <entry>
  2018.    <title>Een button ontwerpen, het lijkt zo simpel</title>
  2019.    <link href="https://www.fronteers.nl/nl/blog/2022/12/een-button-ontwerpen-het-lijkt-zo-simpel"/>
  2020.    <updated>2022-12-09T00:00:00Z</updated>
  2021.    <id>https://www.fronteers.nl/nl/blog/2022/12/een-button-ontwerpen-het-lijkt-zo-simpel</id>
  2022.    <content xml:lang="nl" type="html">&lt;p&gt;Een van de eerste zaken die ik in Adobe XD heb ontworpen, waren buttons voor het nieuwe design system van mijn werkgever. Onze producten bevatten vooral pagina’s met formulieren en daar horen buttons bij. In prototypes probeer ik die buttons zoveel mogelijk het gedrag mee te geven voor de uiteindelijke implementatie. In deze blogpost beschrijf ik mijn ervaringen met het maken van een button in Adobe XD, het gebruik ervan in prototypes en hoe bruikbaar de CSS is voor de ontwikkelaars.&lt;/p&gt;
  2023. &lt;h2&gt;Een button ontwerpen&lt;/h2&gt;
  2024. &lt;p&gt;Het ontwerp van een button begint met een rechthoek, een tekst en een icoontje op een artboard (een soort pagina). De rechthoek geef ik een witte achtergrond, een blauwe rand van 2 pixels en een schaduw. De hoeken van de rechthoek heb ik rond gemaakt met een border radius. Mijn button ziet er nu zo uit:&lt;/p&gt;
  2025. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog-jasha-1.png&quot; alt=&quot;Ontwerp van een button. Een ovale witte knop met een blauwe rand. In de button een plus-icoon en de tekst Voeg toe&quot; /&gt;&lt;/p&gt;
  2026. &lt;h2&gt;Ontwerp van een button&lt;/h2&gt;
  2027. &lt;p&gt;De rechthoek en tekst heb ik gegroepeerd en vervolgens een padding meegegeven. Voor tekstvlakken kun je de hoogte of breedte in Adobe XD flexibel maken zodat die automatisch schaalt als er meer of minder tekst in staat. Ik heb de breedte van het label flexibel gemaakt. In combinatie met de padding zorgt dat ervoor dat de button automatisch schaalt als ik het label aanpas.&lt;/p&gt;
  2028. &lt;p&gt;Een button in HTML heeft verschillende states die de gebruiker van elkaar moet kunnen onderscheiden:&lt;/p&gt;
  2029. &lt;ul&gt;
  2030. &lt;li&gt;standaard (default)&lt;/li&gt;
  2031. &lt;li&gt;hover&lt;/li&gt;
  2032. &lt;li&gt;focus&lt;/li&gt;
  2033. &lt;li&gt;active&lt;/li&gt;
  2034. &lt;li&gt;disabled&lt;/li&gt;
  2035. &lt;/ul&gt;
  2036. &lt;p&gt;Ook in Adobe XD kun je meerdere states aanmaken binnen een component. In dit geval heb ik voor de button een component aangemaakt met de bovenstaande vijf states. Elke state heeft een variant op de styling van de button, maar in de basis blijft het een vlak met een stuk tekst en dit vlak schaalt mee met de tekst.&lt;/p&gt;
  2037. &lt;h2&gt;Interacties toevoegen&lt;/h2&gt;
  2038. &lt;p&gt;Met Adobe XD kun je meer dan alleen statische pagina’s ontwerpen. Het ondersteunt ook interacties die je aan elke laag binnen je artboard kunt koppelen. Ik heb een interactie toegevoegd die vanaf de default naar de hover state van de button gaat als er met een muis overheen gaat. Dit komt overeen met het gedrag van een echte button in HTML. Ik heb nog twee interacties toegevoegd: de overgang naar de active state bij een “tap” (muisklik) en de overgang naar de focus state als de gebruiker op de tab toets drukt. Dit levert het volgende prototype op:&lt;/p&gt;
  2039. &lt;iframe src=&quot;https://player.vimeo.com/video/?texttrack=en&quot; width=&quot;640&quot; height=&quot;360&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen; picture-in-picture&quot; allowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;
  2040. &lt;p&gt;De overgang tussen de standaard en de disabled state definieer ik niet als interactie binnen het component in Adobe XD. De disabled state heeft in het ontwerp wel een eigen uiterlijk: geen schaduw, grijze tekst en achtergrond.&lt;/p&gt;
  2041. &lt;h2&gt;Verschillen met een echte button&lt;/h2&gt;
  2042. &lt;p&gt;Het ontwerp van de button begint al redelijk te lijken op een echte button, maar er zijn wel wat verschillen. Deze verschillen zitten met name in de interacties die je in het prototype kunt maken voor de button, maar ook in de rendering.&lt;/p&gt;
  2043. &lt;p&gt;Het eerste verschil zit in de focus state. Als een button focus heeft en de gebruiker vervolgens nog een keer de tab toets gebruikt, gaat de focus naar het volgende element op de pagina. Dat kan wel in Adobe XD maar is te omslachtig om in een prototype te verwerken.&lt;/p&gt;
  2044. &lt;p&gt;Ik wilde de button een focusring meegeven. Deze focusring was in het ontwerp een tweede vlak met iets grotere afmetingen, maar daardoor versprong de button. Het is te begrijpen dat Adobe XD deze extra pixels als onderdeel ziet van de button. Uiteindelijk heb ik de outline uit het component gehaald.&lt;/p&gt;
  2045. &lt;p&gt;Nog een verschil is het gedrag tijdens de klik op een button. Als je op een echte button klikt, zie je even de active state en vervolgens wordt de eigenlijke actie uitgevoerd. Dit is in Adobe XD niet mogelijk omdat je maar één overgang per interactie kunt instellen. De ontwerper moet een keuze maken tussen het laten zien van de active state of laten zien waar de button voor bedoeld is, bijvoorbeeld het versturen van een formulier. In het design system zie je de overgang naar de active state, terwijl in de prototypes de bedoelde actie te zien is.&lt;/p&gt;
  2046. &lt;h2&gt;Hand-off naar de ontwikkelaar&lt;/h2&gt;
  2047. &lt;p&gt;Het gaat natuurlijk niet alleen om het laten zien van een interactie van de button. Uiteindelijk zal een front-end developer een echte button maken in HTML en CSS en daar eventueel met JavaScript interactie aan toevoegen.&lt;/p&gt;
  2048. &lt;p&gt;Adobe XD kan gedeeltelijk CSS tonen die bij de button hoort. Verwacht geen kant-en-klaar component van HTML en CSS, al zijn daar wel plugins voor. Je krijgt CSS met absolute positionering per laag: de rechthoek (achtergrond, border), het icoontje en het label. Ook alle andere afmetingen zullen absoluut zijn: in px, dp of pt. Als de ontwerper de kleuren een naam heeft gegeven, zie je die als CSS variabelen terug die gelden voor het hele ontwerp. Sowieso krijg je de kleur (ook) direct in de CSS op de manier waarop de ontwerper die heeft gedefinieerd: hex, rgba of hsla.&lt;/p&gt;
  2049. &lt;p&gt;CSS variabelen voor het project gegenereerd door Adobe XD:&lt;/p&gt;
  2050. &lt;pre&gt;&lt;code&gt;:root {
  2051.  
  2052. /* Colors: */
  2053. --theme-background-hover: #EAEAF4;
  2054. --theme-color-darken: #423F9D;
  2055. --theme-color-primary: #2B24F5;
  2056. }
  2057. &lt;/code&gt;&lt;/pre&gt;
  2058. &lt;p&gt;CSS fragment voor de box van de button gegenereerd door Adobe XD:&lt;/p&gt;
  2059. &lt;pre&gt;&lt;code&gt;/* Layout Properties */
  2060.  
  2061. top: 34px;
  2062. left: 34px;
  2063. width: 144px;
  2064. height: 40px;
  2065.  
  2066. /* UI Properties */
  2067.  
  2068. border: 2px solid var(--theme-color-primary);
  2069. background: #FFFFFF 0% 0% no-repeat padding-box;
  2070. box-shadow: 1px 1px 2px #00000054;
  2071. border: 2px solid #2B24F5;
  2072. border-radius: 20px;
  2073. opacity: 1;
  2074. &lt;/code&gt;&lt;/pre&gt;
  2075. &lt;p&gt;CSS fragment voor de box van de button gegenereerd door Adobe XD:&lt;/p&gt;
  2076. &lt;pre&gt;&lt;code&gt;/* Layout Properties */
  2077.  
  2078. top: 41px;
  2079. left: 72px;
  2080. width: 86px;
  2081. height: 27px;
  2082.  
  2083. /* UI Properties */
  2084.  
  2085. color: var(--theme-color-primary);
  2086. text-align: left;
  2087. font: normal normal bold 20px/24px Open Sans;
  2088. letter-spacing: 0px;
  2089. color: #2B24F5;
  2090. opacity: 1;
  2091. &lt;/code&gt;&lt;/pre&gt;
  2092. &lt;p&gt;De ontwerper kan een fontgrootte en line-height definiëren, de hoogte van de box van de button en zelfs de padding binnen die box. Verwacht echter geen margins of paddings in de CSS. Daardoor kan er een verschil ontstaan tussen het bedoelde ontwerp en de implementatie. Adobe XD berekent aan de hand van het lettertype de verwachte hoogte van de tekst, die niet per se overeenkomt met de hoogte in de browser. De ontwikkelaar kan wel de afmetingen van de box en de afstanden tussen elementen opvragen om te controleren of die overeenkomen met de implementatie.&lt;/p&gt;
  2093. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog-jasha-3.png&quot; alt=&quot;Afstanden binnen de button volgens Adobe XD. Met stippellijntjes en ballonnetjes met cijfers laat Adobe XD zien hoe de uitlijning van de tekst is binnen de button&quot; /&gt;&lt;/p&gt;
  2094. &lt;p&gt;Afstanden binnen de button volgens Adobe XD.&lt;/p&gt;
  2095. &lt;p&gt;Een mogelijkheid om documentatie of een commentaar toe te voegen tijdens het ontwerpen ontbreekt. Opmerkingen kun je alleen in de gepubliceerde online versie toevoegen. In ons design system heb ik van een aantal componenten de gewenste marges erbij gezet.&lt;/p&gt;
  2096. &lt;h2&gt;Was het echt zo simpel?&lt;/h2&gt;
  2097. &lt;p&gt;Het lijkt zo simpel: een button ontwerpen in Adobe XD en toepassen in een prototype. Toch is de werkelijkheid wat minder eenvoudig. De CSS geeft net een ander resultaat dan bedoeld in het ontwerp. De ontwikkelaar moet daardoor alsnog extra werk doen om de implementatie overeen te laten komen met het ontwerp.&lt;/p&gt;
  2098. &lt;p&gt;Misschien heb ik de grenzen van Adobe XD opgezocht om een zo realistisch mogelijk prototype te maken. Aan de andere kant, als het een tool is om prototypes voor het web te maken, verwacht ik dat het zich ook zo kan gedragen als op het web.&lt;/p&gt;
  2099. &lt;p&gt;Inmiddels ken ik de beperkingen van deze tool en weet ik ermee om te gaan. Zijn mijn verwachtingen te hoog geweest? Misschien is het voor een prototype voldoende om alleen de overgang van de ene naar de andere pagina te laten zien. Kan een ontwikkelaar verwachten dat een tool die geen button element kent, daar wel goede CSS voor genereert?&lt;/p&gt;
  2100. &lt;p&gt;Nu sta ik voor de keuze: de beperkingen accepteren en bij Adobe XD blijven? Of Figma onder de knie krijgen en daar tegen (andere) grenzen aanlopen?&lt;/p&gt;
  2101. </content>
  2102.  </entry>
  2103.  <entry>
  2104.    <title>Een mobile app maken met JavaScript</title>
  2105.    <link href="https://www.fronteers.nl/nl/blog/2022/12/een-mobile-app-maken-met-javascript"/>
  2106.    <updated>2022-12-08T00:00:00Z</updated>
  2107.    <id>https://www.fronteers.nl/nl/blog/2022/12/een-mobile-app-maken-met-javascript</id>
  2108.    <content xml:lang="nl" type="html">&lt;p&gt;Je hebt op je telefoon vast ontelbare apps staan. Misschien heb je wel Netflix, Instagram, de app van Burger King, of de fitness app Sworkit. Wat hebben deze apps met elkaar gemeen? Ze zijn allemaal gemaakt met JavaScript. Verschillende JavaScript frameworks maken het nu mogelijk om ‘gewoon’ met JavaScript, HTML en CSS een mobile app te maken voor bijvoorbeeld iOS of Android. Maar wat komt er nog meer bij kijken als je jouw met JavaScript gemaakte app ook echt wil uitbrengen in de verschillende app stores? Dat probeer ik in deze blog uit te leggen.&lt;/p&gt;
  2109. &lt;h2&gt;Swift, Kotlin of JavaScript&lt;/h2&gt;
  2110. &lt;p&gt;Doorgaans worden apps voor iOS geschreven in Swift (dit gebeurde voorheen in Objective-C) en in Kotlin voor Android (voorheen Java). Natuurlijk kun je een van deze talen leren om een native app te maken. Zo heeft Apple bijvoorbeeld leermateriaal voor Swift ontwikkeld, speciaal voor kinderen.&lt;/p&gt;
  2111. &lt;p&gt;Wil je liever geen nieuwe programmeertaal leren? Zoals gezegd hoeft dat ook niet. Netflix en Instagram bijvoorbeeld zijn gemaakt met React Native. De app van Burger King en Sworkit zijn gemaakt met Ionic en/of Capacitor. Met Ionic en Capacitor ben je zelfs niet eens afhankelijk van een specifiek JS-framework.&lt;/p&gt;
  2112. &lt;h2&gt;Capacitor en NativeScript&lt;/h2&gt;
  2113. &lt;p&gt;Capacitor is ontwikkeld door het team achter Ionic en kun je beschouwen als de opvolger van Cordova (wat weer de opvolger van Adobe&#39;s Phonegap was). Met Capacitor is het nog makkelijker geworden om een mobile app te maken, want je kunt dit integreren in elk modern front-end project. Of je nu Vue, React of Angular gebruikt. Je kunt zelfs vanilla JS schrijven.&lt;/p&gt;
  2114. &lt;p&gt;Een ander framework dat je kunt gebruiken en vergelijkbaar is met Capacitor, is Nativescript. Wil je hiermee werken, dan kun je het beste de &lt;em&gt;get started&lt;/em&gt; documentatie gebruiken van de desbetreffende frameworks. Die zijn beter en uitgebreider dan ik het kan uitleggen nu.&lt;/p&gt;
  2115. &lt;h2&gt;En nu?&lt;/h2&gt;
  2116. &lt;p&gt;Je hebt een app gemaakt met het JavaScript framework van je keuze. Het werkt in de browser, wat nu? Je eerste stap is om je app te testen in een emulator of op je eigen device. Zo weet je zeker dat de app die je wilt publiceren, ook daadwerkelijk werkt buiten de browser om.&lt;/p&gt;
  2117. &lt;h2&gt;Xcode en Android Studio&lt;/h2&gt;
  2118. &lt;p&gt;Met Xcode kun je je app testen voor alle Apple devices, voor Android heb je Android Studio nodig. Belangrijke opmerking hierbij is wel dat Xcode alleen beschikbaar is voor MacOS. Android Studio kun je voor meerdere besturingssystemen downloaden. Een extra tip is om altijd te testen op een echt toestel en niet volledig op een emulator te vertrouwen. Zo is het mij meerdere malen overkomen dat een app het in de emulator niet deed, maar op een telefoon wel zonder problemen werkte.&lt;/p&gt;
  2119. &lt;h2&gt;App icons en splash screens&lt;/h2&gt;
  2120. &lt;p&gt;Werkt je app? Gefeliciteerd! Het belangrijkste heb je nu gehad, maar je bent er helaas nog niet. Je app heeft een icon nodig dat op verschillende formaten en voor verschillende devices gemaakt moet worden. Dit geldt ook voor een &lt;em&gt;splash screen&lt;/em&gt;*, het laadscherm dat je ziet voordat een app opent. Helaas hanteren zowel Android als iOS verschillende formaten voor zowel splash screens als icons, waardoor dit best wel een klus kan zijn. Gelukkig zijn er &lt;a href=&quot;https://appicon.co/&quot;&gt;verschillende online tools&lt;/a&gt; die je daarbij kunnen helpen. Als zo’n tool ook de juiste folderstructuur aanhoudt, hoef je alleen de default icons in de desbetreffende directories te vervangen voor je eigen nieuwe afbeeldingen.&lt;/p&gt;
  2121. &lt;p&gt;Een splash screen is iets ingewikkelder, voornamelijk door de grote verschillen tussen telefoons en tablets. Als je hierbij ervoor kiest om vanuit een bronbestand de verschillende formaten te genereren, is het belangrijk om je content te centreren in het design omdat je anders de kans hebt dat een deel niet zichtbaar is. Er zijn &lt;a href=&quot;https://apetools.webprofusion.com/#/tools/imagegorilla&quot;&gt;tools&lt;/a&gt; die daar ook rekening mee kunnen houden, zodat je ook hierbij in een handomdraai de juiste bestanden kunt maken. Vervolgens is het toevoegen van de splash screens aan je app ook een kwestie van de default afbeeldingen vervangen. Je hoeft gelukkig niet met alle mogelijke formaten rekening te houden. Zowel Apple als Google gaan uit van een aantal vaste formaten.&lt;/p&gt;
  2122. &lt;h2&gt;Google Play Console en App Store Connect&lt;/h2&gt;
  2123. &lt;p&gt;Je hebt een werkende app, een app icon en een splash screen: je bent klaar om je app te uploaden naar de platforms van Google en Apple om je app te publiceren. Voor Android telefoons gebruik je Google Play Console, voor iOS is er App Store Connect. Bij beide platforms heb je een developer account nodig. Ook hierbij zou ik aanraden om de documentatie van de platforms zelf te lezen, omdat deze het wederom beter kunnen uitleggen dan ik dat kan. Belangrijk om te weten is dat een developer account bij Apple 99 euro per jaar kost, voor een Google Play Developer account ben je eenmalig 25 dollar kwijt. Voor beide heb je een credit card nodig.&lt;/p&gt;
  2124. &lt;h2&gt;Testen&lt;/h2&gt;
  2125. &lt;p&gt;Zowel App Store Connect als Google Play Console bieden je de mogelijkheid om gebruikerstests uit te voeren via de platforms. Je kunt hiervoor zelf mensen uitnodigen. Wat je nodig hebt is het e-mailadres van je proefpersonen. Alleen zij kunnen dan de versie van je app downloaden en gebruiken. Het is zelfs mogelijk om via deze platforms feedback te verzamelen, zodat je precies weet welke dingen je gebruikers tegen aan lopen.&lt;/p&gt;
  2126. &lt;h2&gt;Previews, screenshots en feature graphics&lt;/h2&gt;
  2127. &lt;p&gt;Nu je app getest is - en hopelijk goed bevonden - ben je er bijna. Je kunt nu het proces volgen om je app in te dienen voor beide app winkels en ook hierbij zijn weer een aantal dingen om aan te denken. Zo moet je een website opgeven, onder andere voor bijvoorbeeld een privacyverklaring. Ook heb je afbeeldingen nodig die bij je app getoond worden.&lt;/p&gt;
  2128. &lt;p&gt;Ook voor deze previews en screenshots moet je verschillende formaten voorbereiden. Voor iOS bijvoorbeeld is op het moment van schrijven een screenshot van een 6.5” iPhone verplicht en een 12.9” iPad. Daarnaast heeft Google een “feature graphic”, een soort promotiebanner voor je app. Om dit soort previews te genereren zou ik ook aanraden om gebruik te maken van &lt;a href=&quot;https://appscreens.com/&quot;&gt;(online) software&lt;/a&gt;. Zo’n tool kan automatisch alle formaten voor je genereren, zonder dat je voor elk device een apart design moet maken.&lt;/p&gt;
  2129. &lt;h2&gt;Je app publiceren&lt;/h2&gt;
  2130. &lt;p&gt;Als je alle afbeeldingen gemaakt hebt, ben je nu echt klaar om je app in te dienen. Dit is voornamelijk een kwestie van alle stappen doorlopen en gevraagde velden invullen. Vervolgens dien je je app in ter goedkeuring. Als je alle informatie hebt ingevuld, afbeeldingen geüpload en je app natuurlijk goed werkt en aan de voorwaarden voldoet, zou dit alleen nog een formaliteit zijn. Bij Apple wordt je app in de meeste gevallen binnen 24 uur gekeurd en gekeken of je app aan de richtlijnen van Apple voldoet. En dan staat je app die je helemaal met JavaScript gemaakt hebt, in de app stores!&lt;/p&gt;
  2131. </content>
  2132.  </entry>
  2133.  <entry>
  2134.    <title>Remix en Next.js: &quot;echt&quot; full-stack bestaat niet, of wel?</title>
  2135.    <link href="https://www.fronteers.nl/nl/blog/2022/12/remix-en-next-js-echt-full-stack-bestaat-niet-of-wel"/>
  2136.    <updated>2022-12-07T00:00:00Z</updated>
  2137.    <id>https://www.fronteers.nl/nl/blog/2022/12/remix-en-next-js-echt-full-stack-bestaat-niet-of-wel</id>
  2138.    <content xml:lang="nl" type="html">&lt;p&gt;Een goede blog begint altijd met een controversiële titel, zeggen ze toch? Maar er zit wel een gedachte achter.&lt;/p&gt;
  2139. &lt;p&gt;Een &amp;quot;echte&amp;quot; full-stacker, die zijn ontzettend zeldzaam. In mijn jarenlange carrière heb ik er 1, misschien 2 ontmoet. Let wel, met &amp;quot;echte&amp;quot; full-stacker bedoel ik de term die HR en management helaas vaak gebruiken: iemand die 50% op front-end en 50% op back-end ingezet kan worden.&lt;/p&gt;
  2140. &lt;p&gt;Dit is lastig, want front-end en back-end (in ieder geval de wat klassiekere variant) zijn twee complete disciplines. Ieder met hun eigen &lt;em&gt;languages&lt;/em&gt; en &lt;em&gt;tools&lt;/em&gt;, met hun eigen &lt;em&gt;best practices&lt;/em&gt;, met hun eigen &lt;em&gt;thought leaders&lt;/em&gt;, en ga zo maar door.&lt;/p&gt;
  2141. &lt;p&gt;Op de werkvloer komt het geregeld voor dat IT-afdelingen zoeken naar (enkel) full-stack ontwikkelaars omdat die flexibel en -vooral- goedkoop zijn. Je krijgt 2 ontwikkelaars voor de prijs van één toch? In de praktijk krijg je meestal iemand die een expert is één discipline, en &amp;quot;goed genoeg&amp;quot; in de andere.&lt;/p&gt;
  2142. &lt;p&gt;Goed, ik kan hier eindeloos over doorpraten, maar het punt is duidelijk: full-stack is moeilijk om goed te kunnen/doen.&lt;/p&gt;
  2143. &lt;p&gt;Het is daarom geinig dat er de laatste jaren front-end meta-frameworks op zijn gekomen die front-enders stiekem in full-stack developers veranderen. We duiken in 2 frameworks die hier &amp;quot;schuldig&amp;quot; aan zijn: Remix en Next.js&lt;/p&gt;
  2144. &lt;p&gt;Trouwens, &amp;quot;schuldig&amp;quot; moet je met een korrel zout nemen. Het is namelijk, als je het mij vraagt, een goede ontwikkeling.&lt;/p&gt;
  2145. &lt;h2&gt;Wat zijn meta-frameworks?&lt;/h2&gt;
  2146. &lt;p&gt;Remix en Next.js worden tegenwoordig vaak &amp;quot;meta-frameworks&amp;quot; genoemd, omdat ze meer doen dan alleen zorgen dat je met React een user interface kan bouwen. Meta-frameworks hebben ook controle over de server waar je applicatie op draait.&lt;/p&gt;
  2147. &lt;p&gt;Dit is een hele grote reden waarom Remix (en Next.js) het zo makkelijk maken om full-stack te werken. Ze weten beide &lt;em&gt;welk&lt;/em&gt; deel van je code server-side en welk deel client-side is. En daardoor kunnen ze een aantal aannames maken:&lt;/p&gt;
  2148. &lt;ul&gt;
  2149. &lt;li&gt;Het is makkelijk om de code te splitten: de browser downloadt alleen de client-side code en niks van de server-side code waar het niks mee kan.&lt;/li&gt;
  2150. &lt;li&gt;Routing kan worden ingebouwd en is niet meer enkel client-side: we gaan als het ware weg van de single-page applications en weer richting de multi-page applications.&lt;/li&gt;
  2151. &lt;li&gt;De weg tussen client-side en server-side is makkelijker omdat die wordt gecontroleerd door het meta-framework. Dit zie je in zowel Remix als Next.js, waar de server-side code al geprocessed is (Next.js geeft je in zijn &lt;code&gt;NextAPIRequest&lt;/code&gt; object een &lt;code&gt;[body&lt;/code&gt; die al geparsed is door de &lt;code&gt;content-type&lt;/code&gt; header](https://nextjs.org/docs/api-routes/request-helpers) (dit kan je uitzetten trouwens), Remix revalideert telkens de data nadat een &lt;code&gt;&amp;lt;form/&amp;gt;&lt;/code&gt; is verstuurd).&lt;/li&gt;
  2152. &lt;/ul&gt;
  2153. &lt;h2&gt;Van de server naar de client naar de server&lt;/h2&gt;
  2154. &lt;p&gt;Wat maakt het dan zo interessant om een meta-framework in te zetten? En belangrijker: hoe vertroebelt een meta-framework de grens tussen front-end en back-end? We pakken even Next.js als voorbeeld.&lt;/p&gt;
  2155. &lt;p&gt;Begin november was het Next.js conference, waar één van de sprekers Theo Browne(&lt;a href=&quot;https://twitter.com/t3dotgg&quot;&gt;@t3dotgg&lt;/a&gt;) was. In zijn presentatie spreekt hij over Next.js als back-end framework (dit klinkt heel bekend, maar ik beloof je dat ik het voorstel voor dit artikel eerder had ingeschoten bij Fronteers). Het stuk waar ik naar link gaat dieper in over de plek die Next.js inneemt op de reis van database via server naar de client.&lt;/p&gt;
  2156. &lt;p&gt;Op die reis kunnen we een paar &amp;quot;stations&amp;quot; pakken:&lt;/p&gt;
  2157. &lt;ol&gt;
  2158. &lt;li&gt;De database: er wordt een connectie gelegd met een database en data uitgevraagd.&lt;/li&gt;
  2159. &lt;li&gt;Een request: er wordt een request via de server verstuurd en uitgevoerd.&lt;/li&gt;
  2160. &lt;li&gt;HTML: er wordt HTML gegenereerd die naar de client wordt gestuurd.&lt;/li&gt;
  2161. &lt;li&gt;Interactie: de HTML wordt gedownload en ingelezen, de JavaScript draait en het framework (in ons geval React) neemt het over.&lt;/li&gt;
  2162. &lt;/ol&gt;
  2163. &lt;p&gt;Hier wordt goed uitgelicht hoe een meta-framework als Next.js een bredere plek inneemt op die reis. Waar we eerst PHP gebruikten voor stations 1, 2 en 3, en HTML voor station 4, kunnen we met Next.js door alle stations gaan. In feite maakt Next.js het mogelijk om in onze applicatie (of website, waarom niet?) van database naar de client te gaan.&lt;/p&gt;
  2164. &lt;p&gt;In het voorbeeld hieronder heb ik een simpele Next.js page, die op de server data ophaalt uit de database en vervolgens de pagina vult:&lt;/p&gt;
  2165. &lt;pre&gt;&lt;code&gt;// In db.js hebben we een connectie naar de database gemaakt
  2166. // db.js draait op de server (station 1)
  2167. import { db } from &#39;../db&#39;;
  2168.  
  2169. // Het Page component rendert een pagina met de data die we
  2170. // van de server hebben gehaald
  2171. // Page() wordt gegenereerd op de server (station 3) maar draait
  2172. // op de client (station 4)
  2173. export default function Page({ products }) {
  2174.  return (
  2175.  &amp;lt;div&amp;gt;
  2176.  &amp;lt;h1&amp;gt;Onze producten&amp;lt;/h1&amp;gt;
  2177.  
  2178.  &amp;lt;ul&amp;gt;
  2179.  { products.map(product =&amp;gt; (
  2180.  // Een overzicht van een product
  2181.  ))}
  2182.  &amp;lt;/ul&amp;gt;
  2183.  &amp;lt;/div&amp;gt;
  2184.  );
  2185. }
  2186.  
  2187. // getServerSide props vraagt data op uit de database
  2188. // Deze functie draait alleen op de server en wordt aangeroepen
  2189. // op page load (station 2)
  2190. export async function getServerSideProps() {
  2191.  const products = await db.product.findMany();
  2192.  
  2193.  // Pass data to the page via props
  2194.  return { props: { products } };
  2195. }
  2196. &lt;/code&gt;&lt;/pre&gt;
  2197. &lt;p&gt;Dit voorbeeld laat zien hoe je in 33 regels de hele reis van database naar client kunt maken. Meta-frameworks zoals Next.js en Remix maken veranderen de grens tussen &amp;quot;puur&amp;quot; front-end en full-stack, omdat ze ons een aantal voordelen bieden. Bijvoorbeeld de mogelijk dat we de hele reis in 1 taal kunnen doen (in plaats van te moeten switchen tussen PHP en HTML). Ook geven ze ons, als we TypeScript gebruiken, de mogelijkheid onze types te hergebruiken op zowel de client als de server. Dit geldt trouwens ook voor data validatie. Context-switching? Dat is nu een stuk minder geworden.&lt;/p&gt;
  2198. &lt;p&gt;Meta-frameworks bieden ook al oplossingen voor het routen van je applicatie of website. In het geval van Remix en Next.js is date file-based: voor iedere route in je project maak je een bestand aan dat jouw pagina representeert.&lt;/p&gt;
  2199. &lt;p&gt;Met de RFC over &lt;a href=&quot;https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#basic-example&quot;&gt;React Server Components&lt;/a&gt; zien we dat React ook deze kant op aan het bewegen is. Je zien dat deze manier van denken steeds meer voeten aan de grond begint te krijgen in de wereld van front-end.&lt;/p&gt;
  2200. &lt;h2&gt;Wat is Remix?&lt;/h2&gt;
  2201. &lt;p&gt;Maar waar valt Remix in dit verhaal?&lt;/p&gt;
  2202. &lt;p&gt;De meeste van ons kennen of werken met Next.js, dat pas geleden alweer versie 13 presenteerde met ontzettend veel nieuwe updates. Next.js presenteert zichzelf als hét React framework. Oftewel: de beste manier om een React applicatie te bouwen is met Next.js. Het React-team doet hieraan mee door Next.js aan te raden in &lt;a href=&quot;https://beta.reactjs.org/learn/start-a-new-react-project#building-with-a-full-featured-framework&quot;&gt;hun (nieuwe) documentatie&lt;/a&gt; (wel met een &lt;em&gt;special mention&lt;/em&gt; voor Remix!). Het is ook interessant dat een van de grootste nieuwe features in React, namelijk React Server Components, eerst gedebuteerd werd in een RFC voor Next.js 13 dan op de website van React zelf. Next.js heeft lang het React-landschap gedomineerd als framework. Tot nu toe, want ineens was daar Remix.&lt;/p&gt;
  2203. &lt;p&gt;Remix is gemaakt door &lt;a href=&quot;https://twitter.com/ryanflorence&quot;&gt;Ryan Florence&lt;/a&gt; en &lt;a href=&quot;https://twitter.com/mjackson&quot;&gt;Michael Jackson&lt;/a&gt; (nee niet díe), de bedenkers van React Router. Zij wilden een framework maken dat focused op &lt;a href=&quot;https://remix.run/blog/seed-funding-for-remix#web-standards-modern-ux&quot;&gt;web standaarden en moderne UX&lt;/a&gt; (dit zijn hun woorden). Remix richt zich op &amp;quot;use the platform&amp;quot; en maakt daar zoveel mogelijk gebruik van hoe een browser werkt of wat de HTTP standaard vertelt. Component-scoped CSS? Hier heb je geen CSS-In-JS of CSS Modules voor nodig, in Remix exporteer je een &lt;code&gt;links()&lt;/code&gt; export voor je component of route en &lt;a href=&quot;https://remix.run/docs/en/v1/guides/styling&quot;&gt;Remix voegt een `` tag toe op de noodzakelijke routes&lt;/a&gt;.&lt;/p&gt;
  2204. &lt;p&gt;Progressive enhancement is ook een belangrijk onderdeel van de principes van Remix. Het is bijvoorbeeld niet alleen &lt;em&gt;makkelijk&lt;/em&gt; om een werkende applicatie te bouwen in Remix dat client side &lt;strong&gt;geen JavaScript&lt;/strong&gt; gebruikt, Remix duwt je zelfs die kant een beetje in. Een groot deel van applicatie functionaliteiten waar we tegenwoordig JavaScript voor inzetten, zoals het ophalen en versturen van form data, werkt in Remix simpelweg met een &lt;code&gt;&amp;lt;form method=&amp;quot;post&amp;quot;&amp;gt;&lt;/code&gt;, een &lt;code&gt;loader&lt;/code&gt; functie die aangeroepen wordt op GET requests (dus ook page loads, als je route een &lt;code&gt;loader&lt;/code&gt; functie export) en een &lt;code&gt;action&lt;/code&gt; functie die op POST (en PUT) requests draait. Is JavaScript niet beschikbaar op een browser? Dan wordt het formulier verstuurd via een redirect naar de server en terug naar de client (zoals we vroeger deden met PHP). Is JavaScript er wel? Dan wordt de request op de pagina zelf gedaan zonder redirect en krijgt de gebruiker automatisch de nieuwe data te zien.&lt;/p&gt;
  2205. &lt;p&gt;Tot nu toe hebben we het op een redelijk luchtig niveau gehad over full-stack en meta-frameworks, maar je zou je kunnen afvragen &lt;em&gt;hoe&lt;/em&gt; een meta-framework ons precies de full-stack kant induwt?&lt;/p&gt;
  2206. &lt;h2&gt;Op weg naar full-stack&lt;/h2&gt;
  2207. &lt;p&gt;We duiken die vraag in met hulp van een aantal voorbeelden. We zien ook hoe bepaalde dingen die we eerst aan de back-end zouden toeschrijven naar de front-end worden gehaald.&lt;/p&gt;
  2208. &lt;h2&gt;Databases&lt;/h2&gt;
  2209. &lt;p&gt;We beginnen met databases, want veel projecten zullen er een nodig hebben voor data opslag.&lt;/p&gt;
  2210. &lt;p&gt;Traditioneel gesproken zal de client van een applicatie/website via een API data opvragen aan de server. Het is dan aan de server om een connectie met de database te leggen, data op te vragen, en het resultaat terug te sturen (of een foutmelding weer te geven indien nodig). Dit is natuurlijk helemaal prima, en in veel gevallen hoeft dit niet per se te veranderen. We kijken straks naar een manier om Remix of Next.js in te zetten in een architectuur met een externe database.&lt;/p&gt;
  2211. &lt;p&gt;Wat nu mogelijk is, is om in Remix of Next.js direct een verbinding met je database te leggen. Dit wordt helemaal makkelijk als je een tool als &lt;a href=&quot;https://www.prisma.io/&quot;&gt;Prisma&lt;/a&gt; inzet als ORM. Prisma gaf je al het voordeel om je ORM in JavaScript of TypeScript te schrijven (komen we toch weer terug op context switching), dat je vervolgens kwijt kon tussen je project en je database.&lt;/p&gt;
  2212. &lt;p&gt;Die laag kan je nu direct in je project kwijt, door Prisma aan te roepen en vervolgens data uit te vragen of weg te schrijven. Dit kan je vervolgens meteen in je pagina kwijt.&lt;/p&gt;
  2213. &lt;p&gt;Remix geeft een &lt;a href=&quot;https://remix.run/docs/en/v1/guides/data-loading#databases&quot;&gt;simpel voorbeeld hiervan&lt;/a&gt;, maar dit is uiteraard ook in Next.js mogelijk.&lt;/p&gt;
  2214. &lt;h2&gt;Proxy&lt;/h2&gt;
  2215. &lt;p&gt;Inhakend op het database-verhaal: wat als je een front-end project wil omzetten naar een meta-framework maar de back-end met alle database operaties staan al vast?&lt;/p&gt;
  2216. &lt;p&gt;Nou, als eerste wil ik je zeggen: je hoeft niet alles om te bouwen naar iets nieuws &lt;em&gt;omdat&lt;/em&gt; het iets nieuws is. Als de infrastructuur rondom de back-end en database al staat, gebruik je lekker dat. Het scheelt een boel tijd en moeite voor iets dat al werkt.&lt;/p&gt;
  2217. &lt;p&gt;Wat je &lt;em&gt;wel&lt;/em&gt; kan doen, is de server van je meta-framework gebruiken als proxy. Dit biedt weer een boel nieuwe opties en mogelijkheden:&lt;/p&gt;
  2218. &lt;ul&gt;
  2219. &lt;li&gt;Je kan requests load-balancen en responses cachen.&lt;/li&gt;
  2220. &lt;li&gt;Je kan environment variables gebruiken voor bepaalde secret tokens.&lt;/li&gt;
  2221. &lt;li&gt;Je kan de response van requests naar je database of een externe back-end muteren voor je het terugstuurt (hier kom ik straks nog op terug).&lt;/li&gt;
  2222. &lt;/ul&gt;
  2223. &lt;p&gt;In je meta-framework kan je je server inzetten om requests naar een (externe) back-end te sturen, eventueel voorzien van een authenticatie token.&lt;/p&gt;
  2224. &lt;p&gt;In het voorbeeld hieronder gebruiken we Notion om een rij in een tabel (wat bij Notion een &amp;quot;database&amp;quot; heet) toe te voegen. Voor het voorbeeld gebruik ik Remix, maar dit is uiteraard ook mogelijk in Next.js.&lt;/p&gt;
  2225. &lt;pre&gt;&lt;code&gt;// ./app/notion.server.ts, wordt alleen op de server ingeladen
  2226. import { Client } from &#39;@notionhq/client&#39;;
  2227.  
  2228. export const notionClient = new Client({
  2229. // Het authenticatie token is alleen in te lezen op de server
  2230. auth: process.env.NOTION_AUTH_TOKEN,
  2231. });
  2232.  
  2233. // ./app/routes/notion.ts
  2234. import { notionClient } from &#39;../notion.server&#39;;
  2235. import type { ActionArgs } from &#39;@remix-run/node&#39;;
  2236.  
  2237. // `action` functies worden door Remix aangeroepen wanneer bij
  2238. // POST en PUT requests. Deze draaien op de server
  2239. export const action = async ({ request }: ActionArgs) =&amp;gt; {
  2240. // We parsen de body uit onze request. Als het verstuurd is
  2241. // door een `&amp;lt;form/&amp;gt;`, krijgen we een FormData object
  2242. const payload = await request.formData();
  2243. const data = Object.fromEntries(payload);
  2244.  
  2245. // We maken een nieuwe rij aan in de tabel,
  2246. // met de data die is versturd via het &amp;lt;form/&amp;gt;
  2247. const response = await notionClient.pages.create({
  2248. parent: {
  2249. // NOTION_CONTACT_FORM_TABLE_ID is alleen uit te lezen
  2250. // zien op de server
  2251.      database_id: process.env.NOTION_CONTACT_FORM_TABLE_ID,
  2252.    },
  2253.    properties: {
  2254.    // De data die je wilt weg schrijven in je tabel
  2255.    ...data,
  2256.    }
  2257. });
  2258.  
  2259. if (!response.ok) {
  2260. // Er is iets fout gegaan, dus we sturen een error terug
  2261. // Omdat we de response `throw`&#39;en, weet Remix dat er iets
  2262. // fout is gegaan. Hier kunnen wij dan weer op acteren
  2263. // Hier komen we later op terug
  2264. throw new Response(JSON.stringify({ status: &#39;error&#39; }), {
  2265. status: 500,
  2266. });
  2267. }
  2268.  
  2269. // Notion heeft de rij gemaakt, we sturen een response terug
  2270. return new Response(JSON.stringify({ status: &#39;success&#39; }), {
  2271. status: 201
  2272. });
  2273. };
  2274. &lt;/code&gt;&lt;/pre&gt;
  2275. &lt;p&gt;Even een side note: Remix heeft helper functions zoals &lt;a href=&quot;https://remix.run/docs/en/v1/api/remix#json&quot;&gt;&lt;code&gt;json()&lt;/code&gt;&lt;/a&gt; dat je kan gebruiken om response terug te sturen. Die helpers zijn kleine wrappers om het daadwerkelijke &lt;code&gt;Response&lt;/code&gt; object heen. Voor dit voorbeeld wilde ik meer focussen op wat de server kan, dan hoe Remix specifiek werkt. Deze code kan je namelijk ook in Next.js gebruiken.&lt;/p&gt;
  2276. &lt;h2&gt;Dure operaties off-loaden naar de server&lt;/h2&gt;
  2277. &lt;p&gt;Het komt soms voor dat we een dure operatie moeten uitvoeren. Met &amp;quot;duur&amp;quot; bedoel ik dan een operatie die:&lt;/p&gt;
  2278. &lt;ul&gt;
  2279. &lt;li&gt;Veel processorkracht kost;&lt;/li&gt;
  2280. &lt;li&gt;Veel data heen of terugstuurt;&lt;/li&gt;
  2281. &lt;/ul&gt;
  2282. &lt;p&gt;Denk hierbij vooral aan het on-the-fly genereren van responsive afbeeldingen, het omgaan met grote payloads in requests of responses (scheelt weer een GraphQL server), het sanitizen van input data van de gebruiker, of het parsen van markdown uit de database naar HTML voor de client (zoals bij een blog).&lt;/p&gt;
  2283. &lt;p&gt;Het idee is dat de servers draaien op hardware die gemaakt is om grote operaties efficiënt uit te voeren. De client is altijd afhankelijk van het apparaat dat de gebruiker heeft, hoeveel apps of programma&#39;s er toevallig tegelijkertijd aan het draaien zijn, en de internetverbinding of -abonnement dat de gebruiker heeft.&lt;/p&gt;
  2284. &lt;p&gt;Door de dure operaties op de server plaats te laten vinden, kunnen we onze applicatie/website sneller laten reageren, kunnen we voorkomen dat er kostbare kilobytes over de lijn worden verstuurd en kunnen we (in erge gevallen) zelfs voorkomen dat onze applicatie of website crashed.&lt;/p&gt;
  2285. &lt;h2&gt;Data mutaties&lt;/h2&gt;
  2286. &lt;p&gt;Met data mutaties bedoel ik het lezen en schrijven van data. Meta-frameworks spelen hier heel handig op in omdat ze in staat zijn de mutaties optimaal in te plannen.&lt;/p&gt;
  2287. &lt;h2&gt;Data lezen&lt;/h2&gt;
  2288. &lt;p&gt;Wanneer je op de client-side een GET request doet voor data, moet eerst de JavaScript bundle worden gedownload en geparsed, voor React kan draaien om de request uit te voeren voor je component. Dit is in feite een waterval. We moeten namelijk steeds wachten op een stukje dat geladen wordt, voor we het volgende stuk kunnen ophalen.&lt;/p&gt;
  2289. &lt;p&gt;Wat meta-frameworks kunnen doen, is de request voor de data op de server uitvoeren. In de tijd dat de client een JavaScript bundle krijgt om te download, te parsen en te draaien, kan de request uitspelen en kan de HTML-pagina worden gegenereerd met de opgevraagde data. We hoeven niet meer stapsgewijs de netwerk requests af te wachten. Performance!&lt;/p&gt;
  2290. &lt;h2&gt;Data muteren&lt;/h2&gt;
  2291. &lt;p&gt;Een ander voordeel is dat het makkelijker is om data te muteren. Dit is het beste uit te leggen aan de hand van een voorbeeldje.&lt;/p&gt;
  2292. &lt;p&gt;Stel, we maken een website waarop iemand data van voertuigen uit kan lezen. Er is een database, die bereikbaar is via een REST API, waarbij we een simpele GET request kunnen sturen dat we als volgt kunnen typeren:&lt;/p&gt;
  2293. &lt;pre&gt;&lt;code&gt;interface VehicleQuery {
  2294. type: &#39;car&#39; | &#39;bus&#39; | &#39;truck&#39;;
  2295. licensePlate: string;
  2296. }
  2297. &lt;/code&gt;&lt;/pre&gt;
  2298. &lt;p&gt;Iedere query geeft een antwoord met de gegevens van dat voertuig:&lt;/p&gt;
  2299. &lt;pre&gt;&lt;code&gt;interface VehicleDetails {
  2300. make: string;
  2301. model: string;
  2302. fuelType: string;
  2303. engineType: string;
  2304. maxOccupants: number;
  2305. ownerHistory: Owner[];
  2306. }
  2307. &lt;/code&gt;&lt;/pre&gt;
  2308. &lt;p&gt;Onze opdracht is om een pagina te maken waarbij iemand zijn kentekenplaat in kan vullen en het merk en model terugkrijgt. Hoewel de API meer informatie kan ontvangen en teruggeven, moeten we voor onze pagina (zie het als een soort landingspagina) er meer voor zorgen dat er z.s.m. data op het scherm te zien is. We vragen dus alleen het kentekenplaat uit, want we stellen dat het voertuigtype (dat wel verplicht is in de query) altijd &lt;code&gt;car&lt;/code&gt; zal zijn.&lt;/p&gt;
  2309. &lt;p&gt;We pakken Remix even als voorbeeld:&lt;/p&gt;
  2310. &lt;pre&gt;&lt;code&gt;import type { json } from &#39;@remix-run/node&#39;;
  2311. import type { ActionArgs } from &#39;@remix-run/node&#39;;
  2312. import { useActionData } from &#39;@remix-run/react&#39;;
  2313. // `~` is ge-aliased naar `./app/`
  2314. import type { VehicleQuery } from &#39;~/models/Vehicle&#39;;
  2315.  
  2316. export const action = async ({ request }: ActionArgs) =&amp;gt; {
  2317. const data = await request.formData();
  2318. const { licensePlate } = Object.fromEntries(data);
  2319.  
  2320. const query: VehicleQuery = {
  2321. type: &#39;car&#39;;
  2322. licensePlate,
  2323. };
  2324.  
  2325. const response = await fetch(&#39;/api/vehicles/query&#39;, {
  2326. method: &#39;POST&#39;,
  2327. body: JSON.stringify(query),
  2328. });
  2329.  
  2330. const { make, model } = await response.json();
  2331.  
  2332. return json({ make, model });
  2333. };
  2334.  
  2335. export default function VehicleInfoPage() {
  2336. const data = useActionData&amp;lt;typeof action&amp;gt;();
  2337.  
  2338. if (data) {
  2339. const { make, model } = data;
  2340.  
  2341. return (
  2342. &amp;lt;div&amp;gt;
  2343. De gegevens van het voertuig zijn:
  2344.  
  2345. &amp;lt;ul&amp;gt;
  2346. &amp;lt;li&amp;gt;Merk: { make }&amp;lt;/li&amp;gt;
  2347. &amp;lt;li&amp;gt;Model: { model }&amp;lt;/li&amp;gt;
  2348. &amp;lt;/ul&amp;gt;
  2349. &amp;lt;/div&amp;gt;
  2350. );
  2351. }
  2352.  
  2353. return (
  2354. &amp;lt;form method=&amp;quot;post&amp;quot;&amp;gt;
  2355. &amp;lt;label&amp;gt;
  2356. &amp;lt;p&amp;gt;Wat is het kenteken?&amp;lt;/p&amp;gt;
  2357. &amp;lt;input name=&amp;quot;licensePlate&amp;quot; type=&amp;quot;text&amp;quot; /&amp;gt;
  2358. &amp;lt;/label&amp;gt;
  2359.  
  2360. &amp;lt;button&amp;gt;Haal informatie op&amp;lt;/button&amp;gt;
  2361. &amp;lt;/form&amp;gt;
  2362. );
  2363. }
  2364. &lt;/code&gt;&lt;/pre&gt;
  2365. &lt;p&gt;Wacht, &lt;em&gt;wat gebeurt hier?&lt;/em&gt;&lt;/p&gt;
  2366. &lt;p&gt;We beginnen even met de pagina zelf, die laat namelijk een formulier zien waar iemand een kenteken kan invoeren. Zaken als styling is even weggelaten om het simpel te houden.&lt;/p&gt;
  2367. &lt;p&gt;Wanneer op de knop geklikt wordt, zal Remix een POST request uitvoeren. Onder water wordt er veel gedaan, maar in ons voorbeeld gaat het erom dat de &lt;code&gt;action&lt;/code&gt; functie wordt aangeroepen.&lt;/p&gt;
  2368. &lt;p&gt;In de &lt;code&gt;action&lt;/code&gt;, halen we uit de &lt;code&gt;request&lt;/code&gt; het kenteken dat de gebruiker heeft ingevoerd. De query vraagt naast een kenteken ook om een voertuigtype, maar dat hoeft de gebruiker niet in te vullen. Wij zetten het naar &lt;code&gt;car&lt;/code&gt;, en vullen de query aan met het kenteken en hoppa!&lt;/p&gt;
  2369. &lt;p&gt;Dit is natuurlijk een erg simpel voorbeeld, maar als je wilt interacteren met een API dat veel data vraagt in zijn request én jij weet dat veel properties naar een standaard waarde worden ingesteld, &lt;em&gt;hoef je die niet te vragen in de request van jouw client naar de server&lt;/em&gt;. Je stuurt enkel de data die daadwerkelijk ingevuld wordt door de gebruiker, vult het aan met alle standaard data (of aangevulde business logica, zoals misschien een &lt;code&gt;userID&lt;/code&gt; dat je uit je sessie data haalt) en stuurt dit naar de client. In ons voorbeeld bevat &lt;code&gt;VehicleQuery&lt;/code&gt; maar 2 properties, maar wat als je een API hebt dat 20-30 properties heeft waarvan 80% een standaard waarde heeft?&lt;/p&gt;
  2370. &lt;p&gt;Dan het vervolg: de query is gelukt en we hebben informatie gekregen van de API. Er is meer data teruggekomen dan we daadwerkelijk nodig hebben, dus we pakken de velden die we wél willen (&lt;code&gt;make&lt;/code&gt; en &lt;code&gt;model&lt;/code&gt;), en sturen dit terug naar de client.&lt;/p&gt;
  2371. &lt;p&gt;In de client kunnen we een check doen of er data is verstuurd van de server (dit is een Remix-specifiek iets, daar kom ik later op terug), en als dat het geval is laten we het antwoord van de server zien. Stel de API geeft een gigantische lading aan data terug, dan kan je op je server gemakkelijk de informatie uitpikken die je nodig hebt en dit terugsturen naar de client.&lt;/p&gt;
  2372. &lt;p&gt;&lt;em&gt;GraphQL, anyone?&lt;/em&gt;&lt;/p&gt;
  2373. &lt;p&gt;Nu is de payload, zowel van de client naar de server als vice versa, zo klein mogelijk. Dit is ontzettend handig, want iedere kilobyte telt!&lt;/p&gt;
  2374. &lt;h2&gt;Hergebruik van types en validatie&lt;/h2&gt;
  2375. &lt;p&gt;Het is bij Remix en Next.js (en waarschijnlijk ook bij andere meta-frameworks) mogelijk om de types en validaties die je gebruikt in je code te delen tussen de client en de server.&lt;/p&gt;
  2376. &lt;p&gt;Zo kan je een validatie function schrijven voor een e-mailadres. Die functie kan je gebruiken op de server om een inschrijfformulier te valideren voor je de data verwerkt in je database (want back-end validatie is essentieel in data verwerking).&lt;/p&gt;
  2377. &lt;p&gt;Maar, in het kader van progressive enhancement, willen we ook het e-mailadres valideren als de gebruiker het e-mail veld heeft ingevuld en vervolgens naar een ander veld gaat.&lt;/p&gt;
  2378. &lt;p&gt;In dit geval kunnen we dezelfde validatie functie gebruiken, en deze &lt;em&gt;op de client&lt;/em&gt; draaien. We hergebruiken de validatie tussen de client en de server zonder problemen.&lt;/p&gt;
  2379. &lt;pre&gt;&lt;code&gt;// ./app/validations/email.ts
  2380. export function emailIsValid(email: string) {
  2381. return email.match(/^(([^&amp;lt;&amp;gt;()&#92;&#92;&#92;&#92;[&#92;&#92;&#92;&#92;]&#92;&#92;&#92;&#92;&#92;&#92;&#92;&#92;.,;:&#92;&#92;&#92;&#92;s@&amp;quot;]+(&#92;&#92;&#92;&#92;.[^&amp;lt;&amp;gt;()&#92;&#92;&#92;&#92;[&#92;&#92;&#92;&#92;]&#92;&#92;&#92;&#92;&#92;&#92;&#92;&#92;.,;:&#92;&#92;&#92;&#92;s@&amp;quot;]+)*)|(&amp;quot;.+&amp;quot;))@((&#92;&#92;&#92;&#92;[[0-9]{1,3}&#92;&#92;&#92;&#92;.[0-9]{1,3}&#92;&#92;&#92;&#92;.[0-9]{1,3}&#92;&#92;&#92;&#92;.[0-9]{1,3}])|(([a-zA-Z&#92;&#92;&#92;&#92;-0-9]+&#92;&#92;&#92;&#92;.)+[a-zA-Z]{2,}))$/);
  2382. }
  2383.  
  2384. // ./app/routes/contact.tsx
  2385. import type { ActionArgs } from &#39;@remix-run/node&#39;;
  2386. import { json } from &#39;@remix-run/node&#39;;
  2387. import { useActionData } from &#39;@remix-run/react&#39;;
  2388. import { emailIsValid } from &#39;~/validations/email&#39;;
  2389.  
  2390. interface SuccessfulContactFormResponse {
  2391.  status: &#39;success&#39;;
  2392. }
  2393.  
  2394. interface FailedContactFormResponse {
  2395.  status: &#39;error&#39;;
  2396.  message: string;
  2397. }
  2398. type ContactFormResponse =
  2399.  | SuccessfulContactFormResponse
  2400.  | FailedContactFormResponse;
  2401.  
  2402. type ContactForm = {
  2403.  email: string;
  2404.  message: string;
  2405. };
  2406.  
  2407. export const action = async ({ request }: ActionArgs) =&amp;gt; {
  2408.  const data = await request.formData();
  2409.  const { email, message } = Object.fromEntries(data) as ContactForm;
  2410.  
  2411.  if (!emailIsValid(email)) {
  2412. // Het e-mailadres is niet geldig, dus we sturen een error response terug
  2413.    const response: ContactFormResponse = {
  2414.      status: &#39;error&#39;,
  2415.      message: &#39;E-mail is niet correct&#39;,
  2416.    };
  2417.  
  2418. return json(response, { status: 500 });
  2419.  }
  2420.  
  2421. // Hier doen we iets met `message` om het te versturen
  2422.  // of op te slaan.
  2423.  const response: ContactFormResponse = { status: &#39;success&#39; };
  2424. return json(response);
  2425. };
  2426.  
  2427. export default function ContactPage() {
  2428.  const data = useActionData&amp;lt;typeof action&amp;gt;();
  2429.  
  2430.  return (
  2431.    &amp;lt;form method=&amp;quot;post&amp;quot;&amp;gt;
  2432.      &amp;lt;label&amp;gt;
  2433.        &amp;lt;p&amp;gt;E-mail:&amp;lt;/p&amp;gt;
  2434.        &amp;lt;input
  2435.          name=&amp;quot;email&amp;quot;
  2436.          type=&amp;quot;email&amp;quot;
  2437.          aria-invalid={data?.status === &#39;error&#39; ? true : undefined}
  2438.          aria-describedby=&amp;quot;email-error&amp;quot;
  2439.        /&amp;gt;
  2440.        { data?.status === &#39;error&#39; &amp;amp;&amp;amp; (
  2441.          &amp;lt;p id=&amp;quot;email-error&amp;quot;&amp;gt;
  2442.            {data.message}
  2443.          &amp;lt;/p&amp;gt;
  2444.        )}
  2445.      &amp;lt;/label&amp;gt;
  2446.  
  2447.      &amp;lt;label&amp;gt;
  2448.        &amp;lt;p&amp;gt;Bericht:&amp;lt;/p&amp;gt;
  2449.        &amp;lt;textarea name=&amp;quot;message&amp;quot; /&amp;gt;
  2450.      &amp;lt;/label&amp;gt;
  2451.  
  2452.      &amp;lt;button&amp;gt;Verzenden&amp;lt;/button&amp;gt;
  2453.    &amp;lt;/form&amp;gt;
  2454.  );
  2455. }
  2456. &lt;/code&gt;&lt;/pre&gt;
  2457. &lt;p&gt;Zoals je ziet in het voorbeeld kunnen we hetzelfde principe toepassen voor TypeScript types: zowel de server als de client kan ze gebruiken.&lt;/p&gt;
  2458. &lt;div class=&quot;note&quot;&gt; Als je Remix al kent, zie je dat ik `useActionData&lt;typeof action=&quot;&quot;&gt;()` gebruik. In feite geeft dit al het correcte type mee voor `data` in mijn code editor en hoef ik die niet expliciet te typen voor TypeScript. Je kan het altijd nog expliciet meegeven aan `data` wanneer je het declareert.&lt;/typeof&gt;&lt;/div&gt;
  2459. &lt;h2&gt;State management&lt;/h2&gt;
  2460. &lt;p&gt;De diepe samenwerking tussen client en server in meta-frameworks komt ook van pas als het gaat om state management.&lt;/p&gt;
  2461. &lt;p&gt;Over de jaren heen zijn er vele mogelijkheden gekomen om state management te doen in React. Dit komt met name omdat applicaties complexer worden én omdat data een steeds grotere rol aan het spelen is in die applicaties. Het komt er grofweg op neer dat een applicatie (dit geldt soms ook voor websites trouwens) rekening moet houden met 2 zaken:&lt;/p&gt;
  2462. &lt;ul&gt;
  2463. &lt;li&gt;De application state, oftewel de &lt;em&gt;global state&lt;/em&gt; van een applicatie;&lt;/li&gt;
  2464. &lt;li&gt;Data mutaties, oftewel het aannemen, verwerken en weergeven van gebruikersdata;&lt;/li&gt;
  2465. &lt;/ul&gt;
  2466. &lt;p&gt;Meestal wordt er een state management library gekozen om dit allemaal in bij te houden. Daar komt ook bij dat in Create React App deze state management voornamelijk (of zelfs helemaal) op de client wordt gedaan. Maar het leuke van meta-frameworks is dat ze de mogelijkheid bieden hier slimmer mee om te gaan.&lt;/p&gt;
  2467. &lt;h2&gt;Application state&lt;/h2&gt;
  2468. &lt;p&gt;Eerst kijken we naar application state, wat wordt daar nou mee bedoeld?&lt;/p&gt;
  2469. &lt;p&gt;In de meeste applicaties of websites wil je bepaalde states bijhouden zodat de gebruiker bijvoorbeeld functionaliteiten kan doen of instellingen wil bijhouden. Ik pak het voorbeeld van een &lt;em&gt;dark mode&lt;/em&gt; toggle. Op de meeste applicaties of websites zit er in het menubalkje een knop waarmee je kan aangeven of je de lichte of donkere versie van de website wil zien.&lt;/p&gt;
  2470. &lt;p&gt;Op mijn website zie je zo&#39;n toggle button zitten, ik heb hem gefocused met mijn keyboard want waarom niet? ;)&lt;/p&gt;
  2471. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/advents-lody-1.png&quot; alt=&quot;Mijn website in light mode, waarbij je een lichte achtergrond en donkere tekst ziet&quot; /&gt;&lt;/p&gt;
  2472. &lt;p&gt;Als je er op klikt verandert het kleurenschema in een donkere variant.&lt;/p&gt;
  2473. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/advents-lody-2.png&quot; alt=&quot;mijn website in dark mode, waarbij je een donkere achtergrond en lichte tekst ziet&quot; /&gt;&lt;/p&gt;
  2474. &lt;p&gt;De standaardmode van de website is &lt;em&gt;light mode&lt;/em&gt;, dus als je de website bezoekt en je hebt nog geen voorkeur aangegeven door te klikken op de knop (of je hebt geen &lt;code&gt;prefers-color-scheme&lt;/code&gt; instelling) is de achtergrond wit en de tekst donkerblauw.&lt;/p&gt;
  2475. &lt;p&gt;Nu is het de bedoeling dat de mode die je kiest wordt onthouden op iedere pagina die je bezoekt. Klik je op de homepage op het zonnetje, wordt de achtergrond donkerblauw en de tekst wit. Dit krijg je dan ook te zien op ieder volgende pagina.&lt;/p&gt;
  2476. &lt;p&gt;In een standaard React app kunnen we deze state onthouden met behulp van een state management library. Dit is zo simpel als het instellen van een default state, en wanneer op de knop wordt geklikt updaten we de default state met de nieuwe waarde. Hoe dit precies gaat verschilt een beetje per state management library, maar het eindresultaat is hetzelfde: de state wordt overal onthouden.&lt;/p&gt;
  2477. &lt;p&gt;Hier is het wel belangrijk om even te benoemen dat die state meestal alleen lokaal wordt onthouden. Refresh je de pagina, verlies je de bijgewerkte state. Dit kan je makkelijk verhelpen door de state op te slaan in een cookie of &lt;code&gt;localStorage&lt;/code&gt;.&lt;/p&gt;
  2478. &lt;p&gt;Mijn website is gebouwd in Remix (surprise, surprise), en de manier hoe ik het oplos is simpelweg met cookies. De implementatie bestaat uit 3 punten:&lt;/p&gt;
  2479. &lt;ol&gt;
  2480. &lt;li&gt;We maken een cookie die door de browsers wordt meegestuurd met iedere request.&lt;/li&gt;
  2481. &lt;li&gt;We bouwen een &lt;code&gt;&amp;lt;DarkModeToggle/&amp;gt;&lt;/code&gt; knop die via een prop weet of die aan of uit staat (en zijn icoontje aanpast) en een POST doet naar een endpoint op de server als je er op klikt.&lt;/li&gt;
  2482. &lt;li&gt;We bouwen de endpoint op de server om de cookie aan te passen met de nieuwe dark mode state.&lt;/li&gt;
  2483. &lt;/ol&gt;
  2484. &lt;h2&gt;Stap 1: We maken een cookie die door de browsers wordt meegestuurd met iedere request.&lt;/h2&gt;
  2485. &lt;p&gt;In simpele vorm ziet dit er zo uit, waarbij we beginnen met het maken van een cookie. Dit wordt dan door de browser meegestuurd met iedere request.&lt;/p&gt;
  2486. &lt;pre&gt;&lt;code&gt;// ./app/cookie.ts
  2487. import { createCookie } from &#39;@remix-run/node&#39;;
  2488.  
  2489. export const userPrefs = createCookie(&#39;user-prefs&#39;, {
  2490.  maxAge: 31536000, // a year
  2491. });
  2492. &lt;/code&gt;&lt;/pre&gt;
  2493. &lt;p&gt;In &lt;code&gt;./app/root.tsx&lt;/code&gt; kunnen we dit dan uitlezen. De &lt;code&gt;root&lt;/code&gt; in een Remix applicatie is wat &lt;code&gt;_app&lt;/code&gt; is binnen een Next.js applicatie. Alle routes worden hierin meegegeven en wij hebben de mogelijkheid om het skelet van de applicatie of website vorm te geven.&lt;/p&gt;
  2494. &lt;pre&gt;&lt;code&gt;import type { ActionArgs } from &#39;@remix-run/node&#39;;
  2495. import {
  2496.  Links,
  2497.  LiveReload,
  2498.  Meta,
  2499.  Outlet,
  2500.  Scripts,
  2501.  ScrollRestoration,
  2502. } from &#39;@remix-run/react&#39;;
  2503. import { userPrefs } from &#39;~/cookies&#39;;
  2504. import DarkModeToggle from &#39;~/components/DarkModeToggle&#39;;
  2505.  
  2506. export const loader = async ({ request }: LoaderArgs) =&amp;gt; {
  2507.  const cookieHeader = request.headers.get(&#39;Cookie&#39;);
  2508. const { darkModeEnabled = false }  = await userPrefs.parse(cookieHeader);
  2509.  
  2510.  return json({
  2511.    darkModeEnabled,
  2512.  });
  2513. };
  2514.  
  2515. export default function App() {
  2516. const { darkModeEnabled } = useLoaderData&amp;lt;typeof loader&amp;gt;();
  2517.  
  2518.  return (
  2519.    &amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt;
  2520.      &amp;lt;head&amp;gt;
  2521.        &amp;lt;Meta /&amp;gt;
  2522.        &amp;lt;Links /&amp;gt;
  2523.      &amp;lt;/head&amp;gt;
  2524.      &amp;lt;body&amp;gt;
  2525.      &amp;lt;header&amp;gt;
  2526.      &amp;lt;DarkModeToggle isEnabled={darkModeEnabled} /&amp;gt;
  2527.      &amp;lt;/header&amp;gt;
  2528.        &amp;lt;Outlet /&amp;gt;
  2529.        &amp;lt;ScrollRestoration /&amp;gt;
  2530.        &amp;lt;Scripts /&amp;gt;
  2531.        &amp;lt;LiveReload /&amp;gt;
  2532.      &amp;lt;/body&amp;gt;
  2533.    &amp;lt;/html&amp;gt;
  2534.  );
  2535. }
  2536. &lt;/code&gt;&lt;/pre&gt;
  2537. &lt;h2&gt;Stap 2: We bouwen een &lt;code&gt;&amp;lt;DarkModeToggle/&amp;gt;&lt;/code&gt; knop die via een prop weet of die aan of uit staat (en zijn icoontje aanpast) en een POST doet naar een endpoint op de server als je er op klikt.&lt;/h2&gt;
  2538. &lt;p&gt;We bouwen een knop dat op basis van een prop (&lt;code&gt;enabled&lt;/code&gt;) weet of dark mode aan staat of niet. In het geval dat het aan staat, laten we een ander icoontje zien en zetten we een andere waarde voor de POST request dan wanneer het uit staat.&lt;/p&gt;
  2539. &lt;p&gt;In Remix zijn er meerdere manieren om data mutaties uit te voeren, waar ik later dieper op inga. Voor nu volstaat het om te zeggen dat &lt;code&gt;[useFetcher](&amp;lt;https://remix.run/docs/en/v1/api/remix#usefetcher&amp;gt;)&lt;/code&gt; een &lt;code&gt;fetch&lt;/code&gt; object teruggeeft dat we kunnen gebruiken om een request te doen zonder dat de pagina automatisch herlaad (alleen als alle JavaScript geladen is). &lt;code&gt;useFetcher&lt;/code&gt; heeft veel meer handigheidjes ingebouwd zitten, zoals een check of een request &amp;quot;pending&amp;quot; is of niet.&lt;/p&gt;
  2540. &lt;pre&gt;&lt;code&gt;// ./app/components/DarkModeToggle.tsx
  2541. import Icon from &#39;~/components/Icon&#39;;
  2542. import { useFetcher } from &#39;@remix-run/react&#39;;
  2543.  
  2544. type Props = {
  2545.  enabled: boolean | undefined;
  2546. };
  2547.  
  2548. const DarkModeToggle = ({ enabled }: Props) =&amp;gt; {
  2549.  const fetcher = useFetcher();
  2550.  
  2551.  return (
  2552.    &amp;lt;fetcher.Form
  2553.      action=&amp;quot;/api/cookies&amp;quot;
  2554.      method=&amp;quot;post&amp;quot;
  2555.    &amp;gt;
  2556.      &amp;lt;input
  2557.        type=&amp;quot;hidden&amp;quot;
  2558.        name=&amp;quot;action&amp;quot;
  2559.        value={enabled ? &#39;disable&#39; : &#39;enable&#39;}
  2560.      /&amp;gt;
  2561.  
  2562.      &amp;lt;button type=&amp;quot;submit&amp;quot;&amp;gt;
  2563.        &amp;lt;Icon name={enabled ? &#39;moon&#39; : &#39;sun&#39;} /&amp;gt;
  2564.      &amp;lt;/button&amp;gt;
  2565.    &amp;lt;/fetcher.Form&amp;gt;
  2566.  );
  2567. };
  2568.  
  2569. export default DarkModeToggle;
  2570. &lt;/code&gt;&lt;/pre&gt;
  2571. &lt;h2&gt;Stap 3: We bouwen de endpoint op de server om de cookie aan te passen met de nieuwe dark mode state.&lt;/h2&gt;
  2572. &lt;p&gt;Op de server maken we een API route aan. In Next.js kan dit door een bestand genaamd &lt;code&gt;cookies.ts&lt;/code&gt; aan te maken in de &lt;code&gt;./pages/api&lt;/code&gt; map. Remix geeft je de mogelijkheid om zogenoemde &lt;em&gt;resource routes&lt;/em&gt; aan te maken: routes zonder een React component export. Zelf vind ik het altijd fijner om deze resource routes te bundelen in een &lt;code&gt;/api/&lt;/code&gt; folder zodat het duidelijk te zien is dat dit een andere soort route is.&lt;/p&gt;
  2573. &lt;p&gt;We pakken de form data uit de request, kijken of dark mode aan-, of juist uitgezet is, en passen het cookie aan.&lt;/p&gt;
  2574. &lt;pre&gt;&lt;code&gt;// ./app/routes/api/cookies.ts
  2575. import { userPrefs } from &#39;~/cookies&#39;;
  2576. import type { ActionArgs } from &#39;@remix-run/node&#39;;
  2577. import { redirect } from &#39;@remix-run/node&#39;;
  2578.  
  2579. type ActionData = {
  2580.  action: &#39;disable&#39; | &#39;enable&#39;;
  2581. };
  2582.  
  2583. export const action = async ({ request }: ActionArgs) =&amp;gt; {
  2584.  const cookieHeader = request.headers.get(&#39;Cookie&#39;);
  2585.  const formData = await request.formData();
  2586.  
  2587.  const cookie = (await userPrefs.parse(cookieHeader)) || {};
  2588.  
  2589.  const { action } = Object.fromEntries(
  2590.    formData,
  2591.  ) as unknown as ActionData;
  2592.  
  2593.  if (action === undefined) {
  2594.    throw new Error(&#39;An action is missing&#39;);
  2595.  }
  2596.  
  2597.  cookie.darkModeEnabled = action === &#39;enable&#39;;
  2598.  
  2599.  return redirect(&#39;/&#39;, {
  2600.    headers: {
  2601.      &#39;Set-Cookie&#39;: await userPrefs.serialize(cookie),
  2602.    },
  2603.  });
  2604. };
  2605. &lt;/code&gt;&lt;/pre&gt;
  2606. &lt;p&gt;Et voilà. We hebben nu management van de state van de dark mode op onze website, zonder een state management library daarvoor te configureren. Deze state wordt onthouden en kan dus later (opnieuw) uitgelezen worden. In ons voorbeeld is dat via een cookie, maar het kan ook via &lt;code&gt;localStorage&lt;/code&gt; of een database op de server.&lt;/p&gt;
  2607. &lt;h2&gt;Data mutaties&lt;/h2&gt;
  2608. &lt;p&gt;Een andere vorm van state management kan worden gedaan op data mutaties. Hierbij wordt data uitgelezen, bewerkt en wederom opgeslagen. Het heeft veel weg van application state, met een paar belangrijke verschillen:&lt;/p&gt;
  2609. &lt;ul&gt;
  2610. &lt;li&gt;De &lt;em&gt;waarde&lt;/em&gt; van de state is opgeslagen op de server in een data store (zoals een database, in tegenstelling tot een cookie).&lt;/li&gt;
  2611. &lt;li&gt;De &lt;em&gt;houdbaarheidsdatum&lt;/em&gt; van de state is langer dan een gebruikerssessie. Neem als voorbeeld een blog: de content (zoals de posts) &amp;quot;leven door&amp;quot; als ik klaar ben met het schrijven van een post en het tabblad weer sluit. Of ik op dat moment dark mode aan of uit heb staan (application state) is minder relevant en die state mag zelfs weer vergeten worden.&lt;/li&gt;
  2612. &lt;/ul&gt;
  2613. &lt;p&gt;De mensen van Remix hebben hier nog een uitgebreide post op geschreven die zeker het moeite waard is om te lezen: https://remix.run/blog/remix-data-flow. Ik jat een van de afbeeldingen die zij in hun post hebben geschreven, omdat dit het beste illustreert hoe Remix het state management overneemt als het gaat over data mutaties.&lt;/p&gt;
  2614. &lt;p&gt;Door gebruik te maken van de &lt;code&gt;loader&lt;/code&gt; en &lt;code&gt;action&lt;/code&gt; functies, die worden uitgevoerd door respectievelijk een GET en POST request, kunnen we het managen van state verplaatsen van een library naar de server.&lt;/p&gt;
  2615. &lt;p&gt;Voor ons voorbeeld nemen we een bewerkingsscherm voor een product, waarbij we twee velden hebben die we kunnen bewerken: product naam en prijs. Wanneer je op de knop &amp;quot;Opslaan&amp;quot; klikt, wordt de data meegenomen in de state en krijg je de bewerkingspagina weer te zien met daarin de nieuwe data.&lt;/p&gt;
  2616. &lt;p&gt;In een traditionele React app zou een state management library ingezet kunnen worden om bij het submitten van het formulier, de ingevoerde data te pakken en de huidige state te verversen. Vervolgens wordt die state opgeslagen in de database en wordt ondertussen de huidige pagina ververst waardoor het bewerkingsscherm de laatste versie van deze data heeft.&lt;/p&gt;
  2617. &lt;p&gt;Wat we zien in Remix, is dat tijdens het laden van de pagina de product data uit de database wordt gehaald. Vervolgens hebben we een React component dat de data uitleest van de server. Wanneer het formulier wordt verstuurd, wordt de data verwerkt en opgeslagen in de database, en vervolgens wordt de gebruiker weer doorgestuurd naar de bewerkingspagina, dat weer de (geüpdatete) data uit de database leest:&lt;/p&gt;
  2618. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/advents-lody-3.png&quot; alt=&quot;een codevoorbeeld van een product component dat een form bevat, en de loader functie voor de GET requests en action functie voor de POST request&quot; /&gt;&lt;/p&gt;
  2619. &lt;p&gt;In feite zien we hier de state machine: we &amp;quot;updaten&amp;quot; de state van een product door één van de velden te bewerken en vervolgens op te slaan. Remix voert de &lt;code&gt;action&lt;/code&gt; functie uit, stuurt de gebruiker terug naar &lt;code&gt;/products/[product ID]/edit&lt;/code&gt;, waar tijdens de page load data wordt uitgelezen uit de database met behulp van de &lt;code&gt;load&lt;/code&gt; functie. Remix &lt;em&gt;rendert&lt;/em&gt; het &lt;code&gt;Route&lt;/code&gt; component dat de data van de server &amp;quot;verwerkt&amp;quot; in de HTML. De data stroomt via één route, de client blijft in sync met de server en je hoeft niet te letten op race conditions.&lt;/p&gt;
  2620. &lt;p&gt;Ik wil je er ook even op wijzen dat er client-side geen JavaScript draait, en dat de inhoud van het formulier op de server gerenderd wordt. Dat betekent dat het ophalen van de nieuwe data en het zetten van de &lt;code&gt;defaultValue&lt;/code&gt; van de twee inputs, &lt;em&gt;gebeurt op de server en niet de client&lt;/em&gt;! Het scheelt dus ook dat we geen state management library hoeven te draaien op de client om dit werkend te krijgen.&lt;/p&gt;
  2621. &lt;p&gt;Next.js biedt hier ook mogelijkheden voor, zowel out-of-the-box als met packages als &lt;code&gt;next-runtime&lt;/code&gt; waar ik later op terugkom.&lt;/p&gt;
  2622. &lt;h2&gt;Een diepere blik op Remix&lt;/h2&gt;
  2623. &lt;p&gt;Goed, we hebben nu een aantal voorbeelden gezien waarin full-stack development een steeds grotere rol speelt in ons werk als front-end developer. We hebben ook gezien hoe meta-frameworks zoals Remix ons tonen hoe we bepaalde functionaliteiten of zelfs strategieën kunnen implementeren nu we zelf ook controle hebben over de server.&lt;/p&gt;
  2624. &lt;p&gt;Ik wil dus even dieper ingaan op Remix zelf. Voor mij heeft Remix een aantal voordelen ten opzichte van Next.js als het gaat om het bouwen van een React project. Veel van de voorbeelden die ik zojuist liet zien maakten gebruik van Remix (ook al zijn ze allemaal ook in Next.js uit te voeren). Er zijn wel wat zaken die ik verder wil uitlichten:&lt;/p&gt;
  2625. &lt;ul&gt;
  2626. &lt;li&gt;Routes, nested routes en resource routes.&lt;/li&gt;
  2627. &lt;li&gt;Wat doen die &lt;code&gt;action&lt;/code&gt;&#39;s en &lt;code&gt;loader&lt;/code&gt; functions nou precies?&lt;/li&gt;
  2628. &lt;li&gt;Foutafhandeling in Remix: ErrorBoundaries en CatchBoundaries.&lt;/li&gt;
  2629. &lt;li&gt;Forms&lt;/li&gt;
  2630. &lt;/ul&gt;
  2631. &lt;h2&gt;Routes, nested routes en resource routes&lt;/h2&gt;
  2632. &lt;p&gt;Aan het hart van Remix staan routes. Dat is niet zo vreemd als je bedenkt dat de makers van React Router aan het roer staan bij Remix. De gedachte erachter is dat routes de ruggengraat van een applicatie of website is. En als je dat als uitgangspunt neemt, kan je een aantal aannames doen over het opvragen en binnenhalen van assets en data.&lt;/p&gt;
  2633. &lt;p&gt;Voor Remix, de &lt;code&gt;routes&lt;/code&gt; map is de belangrijkste map die je zult hebben. Alle &lt;code&gt;.jsx&lt;/code&gt; of &lt;code&gt;.tsx&lt;/code&gt; bestanden vormen uiteindelijk een route die je kan aanroepen via een URL.&lt;/p&gt;
  2634. &lt;p&gt;Het mooie hier is dat Remix nested routes ondersteunt! Bij een &lt;a href=&quot;https://remix.run/docs/en/v1/guides/routing#what-is-nested-routing&quot;&gt;nested route&lt;/a&gt; wordt de UI van een applicatie onderverdeeld in URL segments.&lt;/p&gt;
  2635. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/advents-lody-4.png&quot; alt=&quot;Alt: een afbeelding van een factuurdashboard met daarboven een menu dat aangeeft welke delen van een URL worden weergegeven in een interface zoals dit dashboard&quot; /&gt;&lt;/p&gt;
  2636. &lt;p&gt;In de afbeelding hierboven (gepakt van de website van Remix), zien we dat de route van het &lt;code&gt;&amp;lt;Invoice/&amp;gt;&lt;/code&gt; component wordt gerepresenteerd in de URL door het factuurnummer (in dit geval &lt;code&gt;102000&lt;/code&gt;).&lt;/p&gt;
  2637. &lt;p&gt;Hoe ziet dit er dan uit in het project?&lt;/p&gt;
  2638. &lt;pre&gt;&lt;code&gt;app
  2639. ├── root.jsx
  2640. └── routes
  2641.    ├── ... // andere routes
  2642.    ├── sales
  2643.    │   ├── ... // andere nested routes
  2644.    │   ├── index.jsx
  2645.    │   ├── invoices
  2646.    │   │   ├── $invoiceId.jsx
  2647.    │   │   └── index.jsx
  2648.    │   ├── invoices.jsx
  2649.    └── sales.jsx
  2650. &lt;/code&gt;&lt;/pre&gt;
  2651. &lt;p&gt;Voor &lt;code&gt;example.com/sales&lt;/code&gt; worden 2 routes gerendered: &lt;code&gt;routes/sales.jsx&lt;/code&gt; en &lt;code&gt;routes/sales/index.jsx&lt;/code&gt;. In &lt;code&gt;sales.jsx&lt;/code&gt; kan je de UI voor de &amp;quot;Sales&amp;quot; pagina zetten (in de screenshot kan dat dus de header met &amp;quot;Sales&amp;quot; zijn en het klik menuutje eronder). De &lt;code&gt;sales/index.jsx&lt;/code&gt; route laat de standaard UI zien voor &lt;code&gt;example.com/sales&lt;/code&gt;, bijvoorbeeld een placeholder of (in dit geval) alles onder het kopje &amp;quot;Overview&amp;quot;.&lt;/p&gt;
  2652. &lt;p&gt;Klikt de gebruiker op &amp;quot;Invoices&amp;quot;, veranderd de URL naar &lt;code&gt;example.com/sales/invoices&lt;/code&gt; en worden &lt;code&gt;routes/sales/invoices.jsx&lt;/code&gt; en &lt;code&gt;routes/sales/invoices/index.jsx&lt;/code&gt; geladen. In &lt;code&gt;invoices.jsx&lt;/code&gt; kan de lijst met facturen worden geladen, in &lt;code&gt;invoices/index.jsx&lt;/code&gt; kan bijvoorbeeld de kop &amp;quot;Kies een factuur uit het linkerrijtje&amp;quot; te zien zijn.&lt;/p&gt;
  2653. &lt;p&gt;En dan als laatste: wanneer iemand op een factuur klikt. Iedere factuur weet zijn eigen factuur ID dus maken we een dynamische route aan voor het detail overzicht: &lt;code&gt;routes/invoices/$invoiceId.jsx&lt;/code&gt;. Deze wordt alleen getoond als de URL een invoice ID heeft, zoals &lt;code&gt;example.com/sales/invoices/102000&lt;/code&gt;. De &lt;code&gt;invoiceId&lt;/code&gt; wordt in Remix meegegeven aan de &lt;code&gt;loader&lt;/code&gt; functie, waarmee je in de database de factuurgegevens kan opvragen.&lt;/p&gt;
  2654. &lt;p&gt;Het mooie is dat Remix dit niet alleen heel makkelijk maakt, maar de huidige staat van de UI is nu weergegeven in een URL. Dit kan je via een e-mail aan je collega&#39;s doorsturen en zij krijgen dan te zien wat jij ook ziet.&lt;/p&gt;
  2655. &lt;h2&gt;Resource routes&lt;/h2&gt;
  2656. &lt;p&gt;Er is nog een type route dat Remix kent, een &lt;a href=&quot;https://remix.run/docs/en/v1/guides/resource-routes&quot;&gt;resource route&lt;/a&gt;. Een resource route is niks anders dan een route dat geen React component exporteert, maar wél requests kan behandelen. In Next.js zouden dit de routes zijn die je in de &lt;code&gt;/pages/api/&lt;/code&gt; map plaatst. Je kan hiermee routes bepalen die alleen iets inladen of een actie uitvoeren. In het dark mode voorbeeld hierboven gebruik ik een resource route om de cookies van mijn website te updaten, maar je kan het ook gebruiken om bijvoorbeeld een PDF te genereren aan de hand van dynamische data.&lt;/p&gt;
  2657. &lt;p&gt;Op mijn blog gebruik ik Plausible voor mijn analytics, en om adblockers te ontwijken laad ik het Plausible script niet rechtstreeks in mijn pagina in. Ik gebruik een resource route om het Plausible script &lt;a href=&quot;https://github.com/lodybo/lodybo-nl/blob/main/app/routes/js/script%5B.js%5D.ts&quot;&gt;te proxiën naar mijn pagina&lt;/a&gt;.&lt;/p&gt;
  2658. &lt;h2&gt;&lt;code&gt;action&lt;/code&gt; en &lt;code&gt;loader&lt;/code&gt;&lt;/h2&gt;
  2659. &lt;p&gt;In het voorbeeld van de factuur dashboard zei ik dat de &lt;code&gt;routes/invoices/$invoiceId.jsx&lt;/code&gt; een &lt;code&gt;loader&lt;/code&gt; functie gebruikt om factuurgegevens op te vragen. Remix gebruikt &lt;code&gt;loader&lt;/code&gt; en &lt;code&gt;action&lt;/code&gt; functies voor data mutaties in je route. Deze zijn overigens niet verplicht voor een specifieke route, en je mag ook één van de twee gebruiken.&lt;/p&gt;
  2660. &lt;p&gt;In het kort: &lt;code&gt;loader&lt;/code&gt; functies draaien wanneer er data wordt opgevraagd (een GET request), en &lt;code&gt;action&lt;/code&gt; functies draaien wanneer er iets met de data gedaan wordt (een POST, PUT of DELETE request).&lt;/p&gt;
  2661. &lt;p&gt;Beide functies retourneren een response object. Deze heeft de vorm van het standaard &lt;code&gt;[Response&lt;/code&gt; object](https://developer.mozilla.org/en-US/docs/Web/API/Response) dat bij &lt;code&gt;fetch&lt;/code&gt; gebruikt wordt. Hier zie je dus goed dat Remix zich houdt aan web standaarden: een request object implementeert bijvoorbeeld de &lt;code&gt;[Request&lt;/code&gt; interface](https://developer.mozilla.org/en-US/docs/Web/API/Request/Request) van &lt;code&gt;fetch&lt;/code&gt;.&lt;/p&gt;
  2662. &lt;p&gt;Door middel van het response object kan je Remix laten weten dat er een antwoord is met een bepaalde status (zoals &lt;code&gt;201&lt;/code&gt; als je iets hebt aangemaakt in de database), of je kan de gebruiker redirecten naar een andere pagina (met een HTTP status code van &lt;code&gt;302&lt;/code&gt;). Remix geeft je de &lt;code&gt;json()&lt;/code&gt; en &lt;code&gt;redirect()&lt;/code&gt; functies voor het gemak, &lt;a href=&quot;https://github.com/remix-run/remix/blob/main/packages/remix-server-runtime/responses.ts#L18&quot;&gt;want deze zijn niks anders dan wrappers om een &lt;code&gt;Response&lt;/code&gt; object heen&lt;/a&gt;.&lt;/p&gt;
  2663. &lt;p&gt;Wat wél leuk is om te weten, is dat je een response ook kan &lt;code&gt;throw&lt;/code&gt;&#39;en!&lt;/p&gt;
  2664. &lt;h2&gt;Foutafhandeling in Remix: ErrorBoundaries en CatchBoundaries&lt;/h2&gt;
  2665. &lt;p&gt;Remix geeft je twee opties voor foutafhandeling: een &lt;a href=&quot;https://remix.run/docs/en/v1/guides/errors&quot;&gt;ErrorBoundary&lt;/a&gt; en een &lt;a href=&quot;https://remix.run/docs/en/v1/guides/not-found&quot;&gt;CatchBoundary&lt;/a&gt;. In het kort gebruik je de ErrorBoundary voor fouten die je niet anticipeert (zoals &lt;code&gt;500&lt;/code&gt; server errors) en CatchBoundaries voor fouten die je anticipeert óf die de flow van je applicatie niet stopzetten (zoals &lt;code&gt;400&lt;/code&gt; errors).&lt;/p&gt;
  2666. &lt;p&gt;Het idee van het Remix-team is dat je &lt;code&gt;default export&lt;/code&gt;, het React component dus, je happy path voorstelt. Voor de unhappy path kan je je logica verplaatsen naar een ErrorBoundary of CatchBoundary.&lt;/p&gt;
  2667. &lt;p&gt;Beide boundaries kan je definiëren in de &lt;code&gt;root.tsx&lt;/code&gt;, dat als basis voor iedere pagina gebruikt wordt. Maar de verborgen kracht is dat Remix ook boundaries op routeniveau ondersteunt. Met andere woorden, als er iets fout gaat in je route (of zelfs nested route!) wordt die ErrorBoundary of CatchBoundary getoond.&lt;/p&gt;
  2668. &lt;p&gt;Terug naar het factuur dashboard, waar we op de URL &lt;code&gt;example.com/sales/invoices&lt;/code&gt; een lijst met facturen hadden. Wat nou als je een factuur hebt aangeklikt van een factuur die inmiddels is verwijderd? Bijvoorbeeld omdat je die URL hebt doorgestuurd naar een collega en die kijkt een paar weken later in het systeem.&lt;/p&gt;
  2669. &lt;p&gt;Stel, de code voor &lt;code&gt;routes/invoices/$invoiceId.jsx&lt;/code&gt; is als volgt:&lt;/p&gt;
  2670. &lt;pre&gt;&lt;code&gt;export const loader = async ({ params }) =&amp;gt; {
  2671. // &amp;quot;$invoiceId.jsx&amp;quot; wordt omgezet naar een &#39;invoiceId&#39;
  2672. // property op het &#39;params&#39; object.
  2673. const { invoiceId } = params;
  2674.  
  2675. const invoice = await db.invoices.find({id: invoiceId});
  2676.  
  2677. return json({ invoice });
  2678. };
  2679.  
  2680. export default function InvoiceDetails() {
  2681. const { invoice } = useLoaderData();
  2682.  
  2683. return (
  2684. &amp;lt;Invoice details={invoice} /&amp;gt;
  2685. );
  2686. }
  2687. &lt;/code&gt;&lt;/pre&gt;
  2688. &lt;p&gt;Wanneer een factuur wordt opgevraagd dat niet meer bestaat, gaat de regel &lt;code&gt;const invoice = await db.invoices.find({id: invoiceId});&lt;/code&gt; verkeerd: we krijgen dan geen invoice terug, terwijl ons React component daar wél van uitgaat. Wat we kunnen doen is in ons React component het scenario behandelen dat &lt;code&gt;invoice&lt;/code&gt; niet aanwezig is.&lt;/p&gt;
  2689. &lt;p&gt;Wat we ook kunnen doen is een CatchBoundary inzetten voor een 404 fout!&lt;/p&gt;
  2690. &lt;p&gt;We kunnen de code voor &lt;code&gt;routes/invoices/$invoiceId.jsx&lt;/code&gt; zo aanpassen:&lt;/p&gt;
  2691. &lt;pre&gt;&lt;code&gt;export const loader = async ({ params }) =&amp;gt; {
  2692. const { invoiceId } = params;
  2693.  
  2694. const invoice = await db.invoices.find({id: invoiceId});
  2695.  
  2696. if (!invoice) {
  2697. throw new Response(&#39;missing invoice&#39;, {
  2698. status: 404,
  2699. });
  2700. }
  2701.  
  2702. return json({ invoice });
  2703. };
  2704.  
  2705. export default function InvoiceDetails() {
  2706. // ...
  2707. }
  2708.  
  2709. export function CatchBoundary() {
  2710. // &#39;caught&#39; bevat nu de response object informatie
  2711. // Het is eigenlijk hetzelfde als useLoaderData
  2712. const caught = useCatch();
  2713.  
  2714. const params = useParams();
  2715.  
  2716. return (
  2717. &amp;lt;h1&amp;gt;Sorry&amp;lt;/h1&amp;gt;
  2718.  
  2719. &amp;lt;p&amp;gt;We konden geen factuur vinden met nummer { params.invoiceId }&amp;lt;/p&amp;gt;
  2720. );
  2721. }
  2722. &lt;/code&gt;&lt;/pre&gt;
  2723. &lt;p&gt;Nou, als je collega een paar weken later in het systeem kijkt voor de inmiddels verwijderde factuur, krijgt die een foutmelding te zien. In het React component dat we als &lt;code&gt;default export&lt;/code&gt; zetten hoeven we alleen rekening te houden met het happy path.&lt;/p&gt;
  2724. &lt;p&gt;We kunnen dit ook inzetten voor fouten die we niet (kunnen) anticiperen. Dus als React component, de &lt;code&gt;loader&lt;/code&gt; of een &lt;code&gt;action&lt;/code&gt; functie een fout opgooit (of een Response met een error status code van 500), dan wordt de ErrorBoundary getoond:&lt;/p&gt;
  2725. &lt;pre&gt;&lt;code&gt;export const loader = async ({ params }) =&amp;gt; {
  2726. // Dus als we hier een throw doen:
  2727. throw new Error(&#39;Something went wrong!&#39;);
  2728. };
  2729.  
  2730. export default function InvoiceDetails() {
  2731. // Of hier:
  2732. throw new Error(&#39;Something went wrong!&#39;);
  2733. }
  2734.  
  2735. export function CatchBoundary() {
  2736. // Dan wordt deze boundary NIET getoond
  2737. }
  2738.  
  2739. export function ErrorBoundary({ error }) {
  2740. // Maar deze wel!
  2741.  
  2742. // Pas op, geen &#39;use&#39; hook hier. We krijgen de error
  2743. // doorgestuurd als prop.
  2744. console.error(error);
  2745.  
  2746. return (
  2747. &amp;lt;h1&amp;gt;Oeps...&amp;lt;/h1&amp;gt;
  2748.  
  2749. &amp;lt;p&amp;gt;Er is iets fout gegaan. Probeer het later opnieuw.&amp;lt;/p&amp;gt;
  2750. );
  2751. }
  2752. &lt;/code&gt;&lt;/pre&gt;
  2753. &lt;p&gt;Als we dit allemaal onder elkaar zetten hebben we een happy en unhappy path voor een route, allemaal in 1 bestand!&lt;/p&gt;
  2754. &lt;p&gt;Dit is voornamelijk handig wanneer je gebruikt maakt van een CRUD-flow, waarbij een gebruiker ook data kan aanleveren of bewerken.&lt;/p&gt;
  2755. &lt;h2&gt;Forms&lt;/h2&gt;
  2756. &lt;p&gt;Naast routes zijn forms ook een groot deel van een Remix applicatie. In de meest simpele vorm kan je een form en de afhandeling ervan als volgt bouwen:&lt;/p&gt;
  2757. &lt;pre&gt;&lt;code&gt;export default function Form() {
  2758. return (
  2759. &amp;lt;form method=&amp;quot;post&amp;quot;&amp;gt;
  2760. &amp;lt;label for=&amp;quot;username&amp;quot;&amp;gt;Gebruikersnaam&amp;lt;/label&amp;gt;
  2761. &amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;username&amp;quot; id=&amp;quot;username&amp;quot; /&amp;gt;
  2762.  
  2763. &amp;lt;label for=&amp;quot;password&amp;quot;&amp;gt;Wachtwoord&amp;lt;/label&amp;gt;
  2764. &amp;lt;input type=&amp;quot;password&amp;quot; name=&amp;quot;password&amp;quot; id=&amp;quot;password&amp;quot; /&amp;gt;
  2765.  
  2766. &amp;lt;button type=&amp;quot;submit&amp;quot;&amp;gt;Inloggen&amp;lt;/button&amp;gt;
  2767. &amp;lt;/form&amp;gt;
  2768. );
  2769. }
  2770.  
  2771. export const action = async ({ request }) =&amp;gt; {
  2772. const body = await request.json();
  2773.  
  2774. const accessGranted = checkUserCredentials(body);
  2775.  
  2776. if (accessGranted) {
  2777. return redirect(&#39;/profile&#39;);
  2778. }
  2779.  
  2780. return json({ unauthorized: true }, { status: 403 });
  2781. };
  2782. &lt;/code&gt;&lt;/pre&gt;
  2783. &lt;p&gt;Het leuke hiervan is dat dit werkt &lt;em&gt;zonder JavaScript&lt;/em&gt;. Ik zei al eerder dat Remix je wel eens lichtjes in de richting van progressive enhancement duwt, dit is zo&#39;n voorbeeld. Remix voert de volgende stappen uit wanneer iemand op &amp;quot;Inloggen&amp;quot; klikt:&lt;/p&gt;
  2784. &lt;ul&gt;
  2785. &lt;li&gt;De browser serialiseert de data van het formulier in de body van een POST request;&lt;/li&gt;
  2786. &lt;li&gt;De browser navigeert de gebruiker naar de endpoint van de form (in dit geval is het dezelfde URL, maar met &lt;code&gt;&amp;lt;form action=&amp;quot;/insert-endpoint-here&amp;quot;&lt;/code&gt; kan je dit veranderen);&lt;/li&gt;
  2787. &lt;li&gt;De server verwerkt de request en stuurt een redirect naar de browser (in dit geval wederom naar dezelfde URL, maar dit kan je veranderen);&lt;/li&gt;
  2788. &lt;li&gt;De browser herlaadt de pagina;&lt;/li&gt;
  2789. &lt;/ul&gt;
  2790. &lt;p&gt;Het is ook mogelijk om via &lt;code&gt;onsubmit&lt;/code&gt; een &lt;code&gt;fetch&lt;/code&gt; handler in te zetten zodat je het formulier kan verzenden en de nieuwe data in kan laden zónder page reload, zodra JavaScript is ingeladen. Maar Remix vangt dit al voor je af met hun &lt;code&gt;&amp;lt;Form/&amp;gt;&lt;/code&gt; component.&lt;/p&gt;
  2791. &lt;p&gt;Dit is een drop-in vervanging voor &lt;code&gt;&amp;lt;form/&amp;gt;&lt;/code&gt;, werkt ook hetzelfde als er geen JavaScript is ingeladen, en doet een request zonder page load als JavaScript wél is ingeladen:&lt;/p&gt;
  2792. &lt;pre&gt;&lt;code&gt;export default function Form() {
  2793. return (
  2794. &amp;lt;form method=&amp;quot;post&amp;quot;&amp;gt;
  2795. &amp;lt;label for=&amp;quot;username&amp;quot;&amp;gt;Gebruikersnaam&amp;lt;/label&amp;gt;
  2796. &amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;username&amp;quot; id=&amp;quot;username&amp;quot; /&amp;gt;
  2797.  
  2798. &amp;lt;label for=&amp;quot;password&amp;quot;&amp;gt;Wachtwoord&amp;lt;/label&amp;gt;
  2799. &amp;lt;input type=&amp;quot;password&amp;quot; name=&amp;quot;password&amp;quot; id=&amp;quot;password&amp;quot; /&amp;gt;
  2800.  
  2801. &amp;lt;button type=&amp;quot;submit&amp;quot;&amp;gt;Inloggen&amp;lt;/button&amp;gt;
  2802. &amp;lt;/form&amp;gt;
  2803. );
  2804. }
  2805. &lt;/code&gt;&lt;/pre&gt;
  2806. &lt;p&gt;Maar wat nou als we willen dat de verzend knop niet klikbaar is &lt;em&gt;terwijl&lt;/em&gt; de gebruiker wil inloggen (en we dus maar één request naar de server per keer sturen)?&lt;/p&gt;
  2807. &lt;p&gt;Gebruik &lt;code&gt;useTransition&lt;/code&gt;:&lt;/p&gt;
  2808. &lt;pre&gt;&lt;code&gt;export default function Form() {
  2809. const transistion = useTransition();
  2810.  
  2811. return (
  2812. &amp;lt;form method=&amp;quot;post&amp;quot;&amp;gt;
  2813. &amp;lt;label for=&amp;quot;username&amp;quot;&amp;gt;Gebruikersnaam&amp;lt;/label&amp;gt;
  2814. &amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;username&amp;quot; id=&amp;quot;username&amp;quot; /&amp;gt;
  2815.  
  2816. &amp;lt;label for=&amp;quot;password&amp;quot;&amp;gt;Wachtwoord&amp;lt;/label&amp;gt;
  2817. &amp;lt;input type=&amp;quot;password&amp;quot; name=&amp;quot;password&amp;quot; id=&amp;quot;password&amp;quot; /&amp;gt;
  2818.  
  2819. { // We hebben hier maar een component maar van gemaakt }
  2820. &amp;lt;Button
  2821. showSpinner={ transition.state === &#39;submitting&#39; }
  2822. &amp;gt;
  2823. Inloggen
  2824. &amp;lt;/button&amp;gt;
  2825. &amp;lt;/form&amp;gt;
  2826. );
  2827. }
  2828.  
  2829. export const action = async ({ request }) =&amp;gt; {
  2830. const body = await request.json();
  2831.  
  2832. const accessGranted = checkUserCredentials(body);
  2833.  
  2834. if (accessGranted) {
  2835. return redirect(&#39;/profile&#39;);
  2836. }
  2837.  
  2838. return json({ unauthorized: true }, { status: 403 });
  2839. };
  2840. &lt;/code&gt;&lt;/pre&gt;
  2841. &lt;p&gt;Okee, maar niet alle formulieren zijn in essentie ook een navigatie actie? Denk aan een formulier om je op te geven voor een nieuwsbrief dat op alle pagina&#39;s van je website wordt getoond? Of een dark mode toggle voor je blog?&lt;/p&gt;
  2842. &lt;p&gt;Voor deze zaken heeft Remix &lt;code&gt;useFetcher&lt;/code&gt;. Deze geeft je een &lt;code&gt;fetch&lt;/code&gt;-achtig object terug dat voor jou een &lt;code&gt;loader&lt;/code&gt; of &lt;code&gt;action&lt;/code&gt; functie kan aanroepen zonder dat de URL veranderd.&lt;/p&gt;
  2843. &lt;p&gt;Een simpel voorbeeld van een scenario met &lt;code&gt;useFetcher&lt;/code&gt; wijs ik je naar mijn eerdere code voor het dark mode toggle, of lees de &lt;a href=&quot;https://remix.run/docs/en/v1/api/remix#usefetcher&quot;&gt;Remix documentatie voor &lt;code&gt;useFetcher&lt;/code&gt; eens door&lt;/a&gt;.&lt;/p&gt;
  2844. &lt;h2&gt;Optimistic UI&lt;/h2&gt;
  2845. &lt;p&gt;Dit is een mooi kopje waar ik even in wil duiken. Remix maakt het mogelijk om het &amp;quot;optimistic UI&amp;quot; pattern in te zetten. Hierbij pak je een formulier voor bijvoorbeeld het maken of bewerken van een item of product, en wanneer het formulier wordt verstuurd laat je de server de data van dit product of item bewerken en opslaan in een database. Ondertussen laat jij in je UI &amp;quot;alvast&amp;quot; de pagina zien waarbij je de gegevens van het item of product weergeeft aan je gebruiker. Komt er ergens een foutmelding voorbij? Dan tonen we die, anders gaan we ervan uit dat de opsla-actie lukt en zouden we de gebruiker toch naar deze detailpagina doorsturen.&lt;/p&gt;
  2846. &lt;p&gt;In het kort: we gaan ervan uit dat de opsla- of bewerkingsactie lukt en laten alvast zien waar je gaat eindigen.&lt;/p&gt;
  2847. &lt;p&gt;De &lt;a href=&quot;https://remix.run/docs/en/v1/guides/optimistic-ui&quot;&gt;documentatie van Remix&lt;/a&gt; legt dit concept haarfijn uit, beter dan ik het zou kunnen.&lt;/p&gt;
  2848. &lt;h2&gt;Maar, hoe zit het dan met Next.js 13?&lt;/h2&gt;
  2849. &lt;p&gt;Een paar weken geleden kwam de Layouts RFC uit van Next.js, waarin ze een plan presenteerden om naast de &lt;code&gt;pages/&lt;/code&gt; folder nu ook een &lt;code&gt;app/&lt;/code&gt; folder te ondersteunen. Binnen deze folder kon je dan nested routes, shared layouts en React server components gebruiken. Veel ideeën voelde bekend aan als je Remix had gebruikt, en ik heb het idee dat Vercel, het bedrijf achter Next.js, ook zeker goed had gekeken naar de manier waarom Remix werkte.&lt;/p&gt;
  2850. &lt;p&gt;Dus, nu Next.js 13 uit is, wat is dan nog de meerwaarde van Remix?&lt;/p&gt;
  2851. &lt;p&gt;Persoonlijk is voelt mij Remix nog steeds het fijnste als framework. Remix geeft mij het gevoel alsof ik mét het web platform, in plaats van óm het platform heen werk. Ik kan dit het beste uitleggen met wat voorbeelden.&lt;/p&gt;
  2852. &lt;h2&gt;Progressive enhancement&lt;/h2&gt;
  2853. &lt;p&gt;Dit is voor mij nog steeds een van de hoofdpunten: met Remix werk je makkelijker met progressive enhancement. De discussie over &amp;quot;JavaScript enabled or disabled&amp;quot; is nog steeds gaande, en het is ook niet iets waar ik nu een standpunt voor inneem. Wat ik wél merk, is dat het niet zo&#39;n raar idee is dat je JavaScript niet wordt geladen of juist zo ontzettend traag dat je niet aan de slag kan. Enkele voorbeelden van scenario&#39;s die ik mee heb gemaakt waarin een gemiddelde JavaScript bundel niet of nauwelijks werd geladen waren tijdens een weekje op Center Parcs (zeker als meerdere mensen een laptop mee hebben), of als je in Eindhoven op het terras zit tijdens een thuiswedstrijd van PSV of een concert van Guus Meeuwis.&lt;/p&gt;
  2854. &lt;h2&gt;In dat geval is het &amp;quot;succes ermee!&amp;quot;&lt;/h2&gt;
  2855. &lt;p&gt;Het is niet zo dat ik met Remix nu ineens geen JavaScript verscheep naar de client, zeker wel. Maar ik merk dat ik, door het off-loaden van logica naar de server of de manier hoe data mutaties worden gedaan door forms, ik minder vaak JavaScript &amp;quot;nodig&amp;quot; heb in de client. De grootste boosdoener is voor mij, hilarisch genoeg, de &lt;code&gt;[classnames](&amp;lt;https://www.npmjs.com/package/classnames&amp;gt;)&lt;/code&gt; package van npm.&lt;/p&gt;
  2856. &lt;p&gt;En het is niet dat Next.js het je zo moeilijk maakt, &lt;a href=&quot;https://nextjs.org/docs/accessibility#disabling-javascript&quot;&gt;er is een stukje geschreven in hun documentatie&lt;/a&gt;. Het leest wel minder zelfverzekerd dan de &lt;a href=&quot;https://remix.run/docs/en/v1/guides/disabling-javascript&quot;&gt;guide in de documentatie van Remix&lt;/a&gt;.&lt;/p&gt;
  2857. &lt;p&gt;Sterker nog, in de (naar mijn mening uitstekende) tutorial van Remix &lt;a href=&quot;https://remix.run/docs/en/v1/tutorials/jokes#javascript&quot;&gt;laten ze je pas client-side JavaScript toevoegen aan het einde ervan&lt;/a&gt;. Dat is wel lef hebben als je het mij vraagt.&lt;/p&gt;
  2858. &lt;h2&gt;SSR vs SSG&lt;/h2&gt;
  2859. &lt;p&gt;Next.js ondersteund al sinds jaar en dag server-side rendering (SSR) en static site generation (SSG). Sinds een tijdje zit daar ook ISR (incremental static regeneration) bij, maar wat is nou het verschil tussen die drie?&lt;/p&gt;
  2860. &lt;h2&gt;Server-side rendering (SSR)&lt;/h2&gt;
  2861. &lt;p&gt;Bij SSR wordt de pagina op de server gerenderd en wordt de HTML naar de browser gestuurd. De browser download ondertussen ook de JavaScript bundel en voert die vervolgens uit. Als dat gebeurd, worden de dynamische elementen op de pagina geladen en kan de gebruiker interacteren met wat er op het scherm staat. Dat laatste heet &lt;em&gt;hydration&lt;/em&gt;.&lt;/p&gt;
  2862. &lt;h2&gt;Static site generation&lt;/h2&gt;
  2863. &lt;p&gt;Bij SSG worden de HTML pagina&#39;s tijdens het bouwen van de site opgebouwd. Als je een framework als Next.js (of Gatsby, bijvoorbeeld) naar een database wijst met blog posts, zal er tijdens het bouwen van de site van iedere blog post een HTML pagina worden gemaakt. Dit wordt allemaal op de server gezet, maar als er een blogpost bij komt in de database (of gewijzigd wordt) moet de hele site opnieuw gebouwd worden.&lt;/p&gt;
  2864. &lt;h2&gt;Incremental static regeneration&lt;/h2&gt;
  2865. &lt;p&gt;Om dat laatste op te lossen heeft Next.js ISR ingebouwd, waarbij een (gedeeltelijke) rebuild van de site wordt gedaan als de data gerevalideerd wordt. Dit kan op basis van tijd, zoals &amp;quot;iedere 60 seconden&amp;quot;, of &lt;em&gt;on-demand&lt;/em&gt;. In Next.js kan je een API route maken die Next.js verteld alles te &lt;em&gt;revalidaten&lt;/em&gt; als je die endpoint raakt, bijvoorbeeld met een webhook.&lt;/p&gt;
  2866. &lt;p&gt;Remix ondersteunt alleen SSR.&lt;/p&gt;
  2867. &lt;p&gt;Static site generation (daar groepeer ik vanaf nu ook ISR onder), kwam vooral op in de tijd dat servers minder krachtig waren én ook niet al te goedkoop zijn. Voor websites met een zeg maar semi-dynamische content, zoals een blog, scheelde het geld als je die kon hosten op een CDN. Netlify heeft bijvoorbeeld een &lt;a href=&quot;https://www.netlify.com/pricing/&quot;&gt;gulle &lt;em&gt;free tier&lt;/em&gt;&lt;/a&gt;, dus je kan makkelijk een blog draaien zonder al te veel extra kosten.&lt;/p&gt;
  2868. &lt;p&gt;Tegenwoordig zijn servers niet alleen krachtiger en goedkoper geworden, de infrastructuur is ook een stuk beter. Het is tegenwoordig niet zo lastig meer om een netwerk van servers in te zetten als CDN. Hosting providers als DigitalOcean maken het makkelijk om meerdere servers (&amp;quot;droplets&amp;quot;) in meerdere regionen in te zetten, en &lt;a href=&quot;http://fly.io/&quot;&gt;Fly.io&lt;/a&gt; heeft zelfs documentatie geschreven over &lt;a href=&quot;https://fly.io/docs/reference/scaling/&quot;&gt;het scalen in meerdere regio&#39;s&lt;/a&gt;. &lt;a href=&quot;http://fly.io/&quot;&gt;Fly.io&lt;/a&gt; wordt trouwens meestal aangeraden door het team van Remix zelf, omdat vinden dat een Remix site met correcte caching headers en gehost in meerdere regionen op &lt;a href=&quot;http://fly.io/&quot;&gt;Fly.io&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/remix_run/status/1483514038323539972&quot;&gt;dezelfde performance geeft als een site gemaakt met SSG&lt;/a&gt;.&lt;/p&gt;
  2869. &lt;p&gt;Of dat zo is, laat ik als een oefening voor de lezer.&lt;/p&gt;
  2870. &lt;p&gt;Persoonlijk vind ik het juist fijn dat Remix alleen SSR ondersteund. Ik kan de &lt;em&gt;flow&lt;/em&gt; makkelijk in mijn hoofd kwijt: eerst server rendering, dan client hydration. In feite zorg ik ervoor dat mijn routes en components werken op de server en makkelijk gehydrateerd kunnen worden. Browser API&#39;s doe ik in &lt;code&gt;useEffect&lt;/code&gt;, maar dit komt niet eens zo vaak voor.&lt;/p&gt;
  2871. &lt;p&gt;Bij Next.js projecten moet ik wel eens nadenken of ik kies voor één van de drie strategieën, en SSG/ISR brengen stiekem best wat complexiteit met zich mee. Je moet toch (op zijn een minst simpele vorm van) een build straat aanleggen dat verbonden is met je productie database en het maken van een endpoint om een incremental static regeneration af te vuren is altijd wat werk. Next.js maakt het trouwens in versie 13 wat makkelijk door &lt;a href=&quot;https://beta.nextjs.org/docs/upgrade-guide#step-6-migrating-data-fetching-methods&quot;&gt;een nieuwe API&lt;/a&gt;. Deze werkt trouwens alleen in de &lt;code&gt;app/&lt;/code&gt; folder.&lt;/p&gt;
  2872. &lt;h2&gt;Forms&lt;/h2&gt;
  2873. &lt;p&gt;Forms is iets dat vak genoemd wordt bij Remix pitches, zeker als het in vergelijking gaat met Next.js. Ik snap het wel, form handling gaat ook ontzettend goed in Remix en is, in mijn ogen, hetgeen dat 100% de visie en gedachtegoed van Remix &amp;quot;ademt&amp;quot;.&lt;/p&gt;
  2874. &lt;p&gt;Nu is het in Next.js uiteraard mogelijk om met forms te werken, en behandelen ze zelfs &lt;a href=&quot;https://nextjs.org/docs/guides/building-forms#part-5-form-submission-without-javascript&quot;&gt;het gebruik van forms zonder JavaScript&lt;/a&gt;. Maar in Remix voelt het allemaal meer vertrouwd, meer zoals het altijd zou moeten werken. Geen &lt;code&gt;onSubmit&lt;/code&gt;&#39;s en &lt;code&gt;event.preventDefault()&lt;/code&gt;&#39;s meer, geen handmatige &lt;code&gt;fetch&lt;/code&gt; requests meer zodat je onmiddellijk het resultaat van een POST kan laten zien.&lt;/p&gt;
  2875. &lt;p&gt;In Next.js is dit stuk wel veel verbeterd. Er is een hoofdstuk over data mutaties opgenomen in de &lt;a href=&quot;https://beta.nextjs.org/docs/data-fetching/mutating&quot;&gt;nieuwe beta documentatie van Next.&lt;/a&gt;&lt;a href=&quot;https://www.notion.so/Remix-en-Next-js-echt-full-stack-bestaat-niet-of-wel-584cb14bdcaa47229bde5270b0f0f1c6&quot;&gt;js&lt;/a&gt;, en die voelt al meer vertrouwd. Belangrijk om te weten: op deze pagina is laat het team achter Next.js weten dat er een nieuwe RFC komt over data mutaties!&lt;/p&gt;
  2876. &lt;p&gt;In de &lt;code&gt;pages/&lt;/code&gt; folder is dit allemaal niet ondersteunt helaas. Om er op een (voor mij) logische manier mee te werken heb ik &lt;code&gt;[next-runtime](&amp;lt;https://www.npmjs.com/package/next-runtime&amp;gt;)&lt;/code&gt; gebruikt in mijn Next.js projecten, waarbij ik POST requests binnen Next.js&#39; &lt;code&gt;getServerSideProps&lt;/code&gt; kan verwerken.&lt;/p&gt;
  2877. &lt;h2&gt;Hoe zit het aan het einde van de dag?&lt;/h2&gt;
  2878. &lt;p&gt;Nou, aan het einde van de dag ben ik ontzettend onder de indruk van Next.js 13. Ik ga er zeker induiken en ik ben ontzettend benieuwd naar de updates die er nog gaan komen.&lt;/p&gt;
  2879. &lt;p&gt;Maar voor mij blijft Remix op nummer één staan. Voor mij &amp;quot;klopt het&amp;quot; gewoon, en kan ik ontzettend snel iets neerzetten. De &lt;a href=&quot;https://remix.run/docs/en/v1/pages/stacks&quot;&gt;starters kits&lt;/a&gt; zijn belachelijk uitgebreid en production-ready, en de &lt;a href=&quot;https://remix.run/docs/en/v1/tutorials/jokes&quot;&gt;Jokes App tutorial&lt;/a&gt; is één van de beste tutorials die ik heb gevolgd. Alles klikte toen ik die deed, en ik kan het je zeker aanraden.&lt;/p&gt;
  2880. &lt;p&gt;Maar wat het belangrijkste is, van zowel Next.js als Remix: ze geven ons front-enders méér tools om ons werk te kunnen doen. Ze bieden meer ruimte en flexibiliteit in ons werk door de &lt;em&gt;server&lt;/em&gt; mee te nemen als onderdeel van onze, tjsah, laat ik &amp;quot;runtime environment&amp;quot; zeggen. We opereren niet meer op de zwarte doos dat &amp;quot;de browser van je gebruiker&amp;quot; heet, maar geeft je een extra, betrouwbaar platform dat onderdeel is van je applicatie.&lt;/p&gt;
  2881. &lt;p&gt;Het maakt ook bepaalde zaken zoveel makkelijker. We hoeven niet meer te wachten op een back-end developer die voor ons een proxy server moet bouwen zodat we een authenticatie token kunnen verbergen én CORS-fouten kunnen vermelden. We bouwen de proxy nu gewoon zelf.&lt;/p&gt;
  2882. &lt;p&gt;Het maakt de back-end (developer) niet overbodig, het evolueert ons allemaal naar een volledige technologie stack.&lt;/p&gt;
  2883. &lt;p&gt;Het evolueert ons allemaal naar full-stack.&lt;/p&gt;
  2884. </content>
  2885.  </entry>
  2886.  <entry>
  2887.    <title>Je eerste keer als spreker</title>
  2888.    <link href="https://www.fronteers.nl/nl/blog/2022/12/je-eerste-keer-als-spreker"/>
  2889.    <updated>2022-12-06T00:00:00Z</updated>
  2890.    <id>https://www.fronteers.nl/nl/blog/2022/12/je-eerste-keer-als-spreker</id>
  2891.    <content xml:lang="nl" type="html">&lt;p&gt;Misschien ken je het wel: Je zit in de zaal bij de &lt;a href=&quot;https://fronteers.nl/congres&quot;&gt;Fronteers conferentie&lt;/a&gt;, ziet een spreker op het podium staan en denkt &amp;quot;Hey, dat is misschien ook wel eens leuk om te doen&amp;quot;. Of je ziet iemand uit je kring op het overzicht van sprekers staan van een conferentie in New York of Madrid en denkt &amp;quot;wow! Dat is tof! Dat wil ik ook.&amp;quot; Maar ja, hoe pak je dat aan, beginnen als spreker? Want is dat niet lastig? Waar moet ik het over hebben? En hoe maak ik zulke briljante slides en kom ik toch op de proppen met zulke verhalen?&lt;/p&gt;
  2892. &lt;p&gt;Het lijkt soms best moeilijk. En geloof me, je kan het ook best moeilijk voor jezelf maken. Maar met jaren van ervaring met het spreken op conferenties kan ik zeggen: Je doet het vooral zelf. Het moeilijk maken dus. Want in de basis is het spreken op een conferentie niet heel veel anders als het uitleggen van een concept aan je collega, het presenteren van een design aan een klant of enthousiast vertellen over je hobby aan je beste vriend. Het enige verschil is dat podium.&lt;/p&gt;
  2893. &lt;h2&gt;Maar waar begin ik dan?&lt;/h2&gt;
  2894. &lt;p&gt;Nou ja, je begint bij het begin. En dat begin is eigenlijk: Bedenken waar je iets over wil vertellen. Dit hoeft niet per se iets te zijn waar je heel veel van weet, maar als je er al het nodige van weet maakt het alles wel makkelijker. Om echt te bepalen waar je het over wil hebben is het goed om eerst voor jezelf een lijst te maken van onderwerpen waar je interesse in hebt, waar je ook tegen een collega uitgebreid over kan vertellen en/of waar je collega&#39;s jou regelmatig vragen over stellen. Als je een lijstje hebt van een paar onderwerpen kies je degene die je het leukst vindt, of waarvan je zoiets hebt &amp;quot;daar zie je maar weinig presentaties over&amp;quot;. Hou er rekening mee dat je, afhankelijk van de conferentie, wel 30-45 minuten over het onderwerp moet kunnen praten. Het moet dus niet &lt;em&gt;te&lt;/em&gt; specifiek zijn.&lt;/p&gt;
  2895. &lt;p&gt;Staar je hier overigens niet op blind, want tijdens de ontwikkeling van je presentatie kan het best zijn dat je toch nog wel iets gaat schuiven met je onderwerp.&lt;/p&gt;
  2896. &lt;h2&gt;Een onderwerp, en nu?&lt;/h2&gt;
  2897. &lt;p&gt;Als je eenmaal een onderwerp hebt, dan ga je dat uitdiepen. Dit kan je bijvoorbeeld doen door een &lt;a href=&quot;https://nl.wikipedia.org/wiki/Mindmap&quot;&gt;mindmap&lt;/a&gt; te maken, of een lijst met steekwoorden op te schrijven. Het kan ook helpen om een collega of vriend te vragen of je ze even mag uitleggen over dat onderwerp. Zodra je er op die manier over gaat nadenken kom je vanzelf op de belangrijke kernpunten van je uitleg. En het zal geen verrassing zijn dat die kernpunten dan ook de basis van je presentatie zullen zijn. Als je die basis hebt, dan kan je het verder gaan uitwerken. Wat mij soms helpt is om over het onderwerp een blogpost of zelfs een serie blogposts te schrijven. Tijdens het schrijven daarvan merk je vanzelf welke structuur, volgorde en stijl het beste werkt voor dat onderwerp. Je kan die blogposts direct publiceren, maar ook nog even bewaren voor later.&lt;/p&gt;
  2898. &lt;p&gt;Als je basis staat en je hebt een gevoel voor de structuur dan kan je ook gaan werken aan je slides. Zoek een tool die prettig voor je werkt. Voor sommigen zijn dat traditionele tools als &lt;a href=&quot;https://www.microsoft.com/en-us/microsoft-365/powerpoint&quot;&gt;Powerpoint&lt;/a&gt; of &lt;a href=&quot;https://www.apple.com/keynote/&quot;&gt;Keynote&lt;/a&gt;, anderen vinden het heel prettig om te werken met &lt;a href=&quot;https://revealjs.com/&quot;&gt;revealjs&lt;/a&gt;, &lt;a href=&quot;https://impress.js.org/#/bored&quot;&gt;impress&lt;/a&gt; of bijvoorbeeld een tool als &lt;a href=&quot;https://www.deckset.com/&quot;&gt;Deckset&lt;/a&gt;, of misschien zelfs &lt;a href=&quot;https://prezi.com/&quot;&gt;Prezi&lt;/a&gt;. Doe wat onderzoek en kies de tool die je het prettigst lijkt. Uiteindelijk gaat het om de inhoud, en niet de tool die je ervoor gebruikt. Zo lang het maar prettig voor je werkt.&lt;/p&gt;
  2899. &lt;p&gt;Verdeel nu eerst de kernonderwerpen over een aantal slides zodat de structuur van je slidedeck zichzelf al een beetje laat zien. Nu kan je de presentatie verder invullen. Daarbij kan je een aantal do&#39;s en don&#39;t goed ter harte nemen:&lt;/p&gt;
  2900. &lt;h2&gt;Font&lt;/h2&gt;
  2901. &lt;p&gt;Gebruik ten allen tijden een groot font. Zeker in een grote zaal moeten de mensen achterin ook iets kunnen lezen. Gebruik daarbij ook een duidelijk leesbaar font. Mensen moeten in 1 oogopslag kunnen zien wat er op je slide staat. En als je dan denkt &amp;quot;maar dan kan ik niet alles kwijt wat ik kwijt wil&amp;quot;, verwijs ik je door naar mijn volgende punt.&lt;/p&gt;
  2902. &lt;h2&gt;Hou het kort&lt;/h2&gt;
  2903. &lt;p&gt;Gebruik geen lange zinnen. Mensen zijn geneigd de zinnen te gaan lezen en terwijl ze lezen ben je ze kwijt als luisteraar. Mensen hebben namelijk moeite met multitasken. Terwijl zij de zin op je slide lezen luisteren ze niet, en tegen de tijd dat ze klaar zijn met lezen weten ze niet meer waar je het nou precies over hebt.&lt;/p&gt;
  2904. &lt;h2&gt;Bulletpoints&lt;/h2&gt;
  2905. &lt;p&gt;Gebruik geen lijstjes met bulletpoints, of minimaliseer het. In veel gevallen heeft het weinig meerwaarde om zo&#39;n lijstje te maken, want je bespreekt (hopelijk!) maar 1 bulletpoint tegelijk. In plaats van een bulletpoint kan je ook gewoon een slide per onderwerp gebruiken, met op iedere slide 1 of 2 woorden (die je anders na de bulletpoint zou zetten). Door een slide per onderwerp te maken hou je focus, zowel in jouw verhaal als ook de focus van je luisteraar.&lt;/p&gt;
  2906. &lt;p&gt;Mocht je toch ergens een reden hebben voor bulletpoints, zorg er dan voor dat ze niet allemaal tegelijk op het scherm verschijnen, maar pas zodra je klikt omdat je naar de volgende bulletpoint gaat. Dit wederom in verband met het risico dat mensen je hele lijstje in 1 keer gaan lezen, en dan ben je ze dus kwijt.&lt;/p&gt;
  2907. &lt;h2&gt;Ondersteuning&lt;/h2&gt;
  2908. &lt;p&gt;Je slides zijn er ter ondersteuning van je verhaal, niet voor de mensen die niet bij je presentatie waren. Zorg ervoor dat ze je verhaal dan ook ondersteunen. Zoek bijvoorbeeld een plaatje die goed past bij waar je het over hebt, en combineer dat plaatje met dat ene woord (OK, of misschien 2 woorden) waar je het over hebt. Een aanrader over dit onderwerp is het boek &lt;a href=&quot;https://www.bol.com/nl/nl/p/slide-ology-art-science-of-presentatio/1001004006235650/?bltgh=mH34KHD3TfVLM-DsSU9A3w.2_6.10.ProductTitle&quot;&gt;Slide:ology van Nancy Duarte&lt;/a&gt;.&lt;/p&gt;
  2909. &lt;h2&gt;Speaker notes&lt;/h2&gt;
  2910. &lt;p&gt;Als je presentatietool het toestaat, schrijf in de speaker notes per slide de kernonderwerpen waar je het over wil hebben. Dit kunnen kernwoorden zijn, maar bijvoorbeeld ook belangrijke referenties zoals namen van schrijvers, boeken of blogposts die je zeker niet wilt vergeten of verkeerd wil uitspreken. De speaker notes zie je op je eigen scherm als je in presentatiemodus bent en de slides op het grote scherm te zijn zijn. Zie het als spiekbriefjes.&lt;/p&gt;
  2911. &lt;p&gt;Wil je liever niet telkens op je scherm kijken, dan kan je ook overwegen om indexcards te gebruiken die je in je hand kan houden.&lt;/p&gt;
  2912. &lt;h2&gt;Help! Ik heb een presentatie!&lt;/h2&gt;
  2913. &lt;p&gt;Nu je een presentatie hebt wil je dat natuurlijk graag aan de wereld laten weten. Het is verleidelijk om direct conferenties aan te schrijven. Sommige conferenties werken op uitnodigingsbasis, anderen hebben van te voren een manier om je presentatie aan te melden zodat ze weten dat je die beschikbaar hebt. Maak een lijstje met conferenties waar je graag wil spreken en zorg dat je weet hoe je daar binnen kan komen.&lt;/p&gt;
  2914. &lt;p&gt;Maar voordat je daadwerkelijk over gaat tot het benaderen van conferenties is het goed om te oefenen. Het klinkt misschien gek, maar thuis voor de spiegel is een goede eerste oefening. Zet je huisdier, een pluche beest, je huisgenoot of partner tegenover je zodat je het gevoel hebt dat je tegen iemand praat, en probeer je presentatie uit. Je merkt dan snel genoeg waar je misschien nog wat moet tweaken of zelfs alsnog de volgorde moet aanpassen omdat het dan beter werkt. Hou ook bij hoe lang je doet over je presentatie, want conferenties willen graag dat je presentatie netjes binnen hun schema past. Te kort of te lang is vervelend voor de organisatie van een conferentie.&lt;/p&gt;
  2915. &lt;p&gt;Als je op deze manier wat geoefend hebt is de volgende stap om eens te kijken naar een klein gezelschap. Een gebruikersgroep of een groep collega&#39;s zijn vaak prima manieren om eens voor een groep te spreken en te wennen aan het idee dat er meerdere mensen naar je kijken terwijl je iets vertelt. Vraag ze om feedback voor verbetering. Je presentatie is een levend iets. Het is nooit af, je blijft er altijd aan werken, zelfs als je de presentatie op meerdere conferenties geeft.&lt;/p&gt;
  2916. &lt;p&gt;En dan is het tijd om toch echt eens conferenties te benaderen. Begin bij de conferenties met een open call for proposals of call for papers. Hiervoor hebt je een goede, korte omschrijving nodig en een pakkende titel. Ook hier: Vraag feedback van vrienden en collega&#39;s, of check even met een ervaren spreker. De titel en omschrijving zijn vaak de basis waarop een conferentie je presentatie selecteert (of niet!) dus het moet vooral een beetje prikkelen.&lt;/p&gt;
  2917. &lt;p&gt;Wees voorbereid op teleurstelling: Veel conferenties krijgen een veelvoud van het aantal open plekken in het schema aan voorstellen. Zo kan een conferentie met 7 plekken in het schema soms wel 100 voorstellen krijgen. De kans bestaat, zeker in het begin, dat je niet gekozen wordt.&lt;/p&gt;
  2918. &lt;p&gt;Maar dit is het punt waar ik even terug wil komen op die blogposts. Nu je graag door een conferentie geselecteerd wil worden is het een goed moment om te laten zien dat jij echt wel iets weet van dit onderwerp. Publiceer je blogpost of serie blogposts over je onderwerp. Als het formulier van de conferentie een veld heeft met &amp;quot;opmerkingen voor de organisatie&amp;quot;, stuur vooral de links naar je blogposts mee om te laten zien dat je echt veel weet van dit onderwerp. Dit aakt de kans dat je geaccepteerd wordt een stuk groter.&lt;/p&gt;
  2919. &lt;h2&gt;You&#39;ve been selected&lt;/h2&gt;
  2920. &lt;p&gt;En dan valt het mailtje in je mailbox. Een uitnodiging van een conferentie om te komen spreken. Nu gaat het er op aan komen. En goede voorbereiding is het halve werk. Zorg dus voor:&lt;/p&gt;
  2921. &lt;ul&gt;
  2922. &lt;li&gt;Een goede laptop met je presentatiesoftware&lt;/li&gt;
  2923. &lt;li&gt;Eventuele adapters voor VGA (ja echt!) en HDMI&lt;/li&gt;
  2924. &lt;li&gt;Een USB stick met je presentatie als backup, met ook een PDF-versie van je slides&lt;/li&gt;
  2925. &lt;li&gt;Een backup van je presentatie alsmede een PDF-versie van je slides, ergens in &amp;quot;de cloud&amp;quot;&lt;/li&gt;
  2926. &lt;/ul&gt;
  2927. &lt;p&gt;Zorg dat je op de conferentie altijd ruim op tijd aanwezig bent op de plek van je presentatie, zodat je op tijd je laptop kan aansluiten. Mocht er iets mis zijn dan heb je nog genoeg tijd om het te fixen.&lt;/p&gt;
  2928. &lt;p&gt;En ik kan wel zeggen &amp;quot;wees niet nerveus&amp;quot; maar ik weet dat dat niet werkt. Zeker de eerste keer zal je nerveus zijn. Ga dus voor je naar de ruimte gaat eerst nog even naar het toilet.&lt;/p&gt;
  2929. &lt;h2&gt;Kijk die mensen dan&lt;/h2&gt;
  2930. &lt;p&gt;Daar sta je. Je gaat beginnen. Spreek rustig en duidelijk, en doe je verhaal. Je hebt dit voorbereid, je kent het verhaal, je hebt je index cards of je speaker notes, het komt goed. Iedereen in die zaal is daar om jou te zien shinen. Niemand is daar om je te zien mislukken. Een foutje kan. Een verspreking kan. Niets aan de hand. Doe je ding. Even de draad kwijt? Neem adem, neem een slok water, kom tot zinnen, check je speaker notes en ga verder. Het komt allemaal goed. Kijk tijdens het presenteren een beetje rond. Kijk niet 1 persoon aan, maar kijk gewoon een beetje rond. Je hoeft niet eens mensen recht aan te kijken, maar als je wat rondkijkt heeft iedereen het gevoel aangesproken te worden.&lt;/p&gt;
  2931. &lt;p&gt;Als er aan het einde ruimte is voor vragen, wees daar ook niet bang voor. Je kent dit onderwerp, dus die vragen komen ook wel goed. En mocht je het antwoord niet weten, dan is dat ook geen probleem. Je kan vragen of iemand anders in de zaal het toevallig weet, of aanbieden om na afloop even samen met de vraagsteller het op te zoeken.&lt;/p&gt;
  2932. &lt;p&gt;Zie je wel? Je kon het! Je hebt het gedaan. En als je een beetje bent zoals ik, dan ben je nu verslaafd en ga je nog veel vaker spreken.&lt;/p&gt;
  2933. &lt;h2&gt;Na de presentatie&lt;/h2&gt;
  2934. &lt;p&gt;Na de presentatie en het applaus komen er ongetwijfeld mensen op je af. Maar tenzij je de laatste spreker van de dag bent hebt je op dat moment nog wel een taak: Zorgen dat je spullen snel weg zijn zodat de volgorde spreker kan opbouwen. Dus ruim eerst even je spullen op, en mensen met vragen wijs je even de weg naar de deur, om even met je mee te lopen. Buiten de ruimte kan je rustig de tijd nemen om nog wat meer vragen te beantwoorden, maar dan kan het programma gewoon verder en hou je niemand op.&lt;/p&gt;
  2935. &lt;h2&gt;Het is wel lastig hoor!&lt;/h2&gt;
  2936. &lt;p&gt;Ik hoor het je al zeggen. &amp;quot;Ik vind dit allemaal wel lastig hoor&amp;quot;. Geen zorgen. Veel ervaren sprekers zijn bereid om nieuwe sprekers te helpen. Benader dus eens een spreker als je twijfelt. De meesten zullen je enthousiast hun anekdotes vertellen, en je helpen om je presentatie tot een succes te maken.&lt;/p&gt;
  2937. &lt;p&gt;Tot snel op een conferentie!&lt;/p&gt;
  2938. </content>
  2939.  </entry>
  2940.  <entry>
  2941.    <title>Gezellig, een spelletje</title>
  2942.    <link href="https://www.fronteers.nl/nl/blog/2022/12/gezellig-een-spelletje"/>
  2943.    <updated>2022-12-05T00:00:00Z</updated>
  2944.    <id>https://www.fronteers.nl/nl/blog/2022/12/gezellig-een-spelletje</id>
  2945.    <content xml:lang="nl" type="html">&lt;p&gt;Je zit met de hele familie onder de kerstboom en de veilige gespreksonderwerpen raken uitgeput. Om het gezellig te houden stel je voor om een spelletje te doen. De meesten hebben wel zin in Scrabble, maar je kan die doos nergens vinden! Geen paniek, je bouwt gewoon je eigen spel. Met HTML en CSS timmer je dat bord zo in elkaar.&lt;/p&gt;
  2946. &lt;p&gt;Bekijk het bord &lt;a href=&quot;https://peterdoolaard.nl/blog/gezellig-een-spelletje-scrabble/&quot;&gt;in real life action&lt;/a&gt;.&lt;/p&gt;
  2947. &lt;p&gt;CSS Grid Layout is een van de beste toevoegingen aan CSS van de laatste jaren. Kort gezegd definieer je daarmee een raster of grid van rijen en kolommen waarop je items plaatst, en die items kunnen meerdere rijen en kolommen overspannen. Het grid zelf kan volledig vastliggen of flexibel zijn. Zowel het aantal rijen en kolommen als de afmetingen van die rijen en kolommen kun je laten afhangen van de beschikbare ruimte.&lt;/p&gt;
  2948. &lt;p&gt;Een van de grote voordelen is dat je dingen zo lekker makkelijk kunt stapelen. Niks &lt;code&gt;position: relative&lt;/code&gt; en &lt;code&gt;position: absolute&lt;/code&gt;. Plaats items gewoon in dezelfde kolom en rij. Posities schalen probleemloos mee met de container zonder gedoe met offsets.&lt;/p&gt;
  2949. &lt;p&gt;Bij een CSS-grid heb je altijd een parentrelement en childelementen nodig. De parent is de container die de definitie van het grid bevat en de children zijn de items die in het grid komen te staan. Zonder children heb je dus geen zichtbare content in het grid.&lt;/p&gt;
  2950. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/advents-peter-scrabble.png&quot; alt=&quot;Een scrabblebord met daarop de woorden Fijne feestdagen, gelukkig nieuwjaar gespeld&quot; /&gt;&lt;/p&gt;
  2951. &lt;h2&gt;Een grid voor het spelbord&lt;/h2&gt;
  2952. &lt;p&gt;Het ontwerp van een spelbord is een grid en bij Scrabble zie je dat heel duidelijk. Het bord bevat 225 vakjes verdeeld over 15 rijen en 15 kolommen. Je hebt dus 15 x 15 = 225 items nodig om het bord een gezicht te geven. Dat zijn 225 &lt;code&gt;span&lt;/code&gt;-elementen waarvan de meeste een grijze achtergrond hebben. Een deel heeft een data-attribuut dat de bonus aangeeft, bijvoorbeeld ``data-bonus=&amp;quot;3 x woord waarde&amp;quot;`.&lt;/p&gt;
  2953. &lt;p&gt;Zo ziet de gridefinitie eruit:&lt;/p&gt;
  2954. &lt;pre&gt;&lt;code&gt;.speelbord {
  2955. display: grid;
  2956. grid-template-columns: repeat(15, 4.25rem);
  2957. grid-template-rows: repeat(15, 4.25rem);
  2958. }
  2959. &lt;/code&gt;&lt;/pre&gt;
  2960. &lt;p&gt;Het aantal &lt;code&gt;span&lt;/code&gt;-elementen is gelijk aan het aantal rasterplaatsen (cellen). Daardoor is het niet nodig om elk item expliciet op zijn plek te zetten. De items lopen in volgorde van de HTML vanzelf het raster in vanaf rij 1, kolom 1 naar rij 15, kolom 15. Je moet wel zelf uittellen welke items een data-attribuut moeten hebben.&lt;/p&gt;
  2961. &lt;h2&gt;Een oplossing voor de letters&lt;/h2&gt;
  2962. &lt;p&gt;Ook de letters zijn griditems en moeten dus net als de bordvakjes in een gridcontainer staan. Het verschil is dat de letters een specifieke positie in het raster hebben. Ze kunnen dus sowieso niet automatisch het raster inlopen.&lt;/p&gt;
  2963. &lt;p&gt;Je kúnt de letters onder het laatste &lt;code&gt;span&lt;/code&gt;-element van het spelbord zetten. Daarmee voeg je ze toe aan het speelbordgrid. Maar zodra je een letter in het grid positioneert, valt het speelbord uit elkaar. De gepositioneerde letter neemt namelijk de plek in van een bordvakje dat geen vaste plek heeft. Daardoor schuift dat bordvakje een positie op en dat doen ook alle vakjes daarna.&lt;/p&gt;
  2964. &lt;p&gt;Je hebt de keus uit twee oplossingen:&lt;/p&gt;
  2965. &lt;ol&gt;
  2966. &lt;li&gt;
  2967. &lt;ul&gt;
  2968. &lt;li&gt;Geef alle 225 bordvakjes een positie in het grid met &lt;code&gt;grid-area: 1 / 1;&lt;/code&gt; &lt;code&gt;grid-area: 1 / 2&lt;/code&gt;; tot en met &lt;code&gt;grid-area: 15 / 15&lt;/code&gt;.&lt;/li&gt;
  2969. &lt;/ul&gt;
  2970. &lt;/li&gt;
  2971. &lt;li&gt;
  2972. &lt;ul&gt;
  2973. &lt;li&gt;Maak een tweede gridcontainer voor de letters, met precies dezelfde eigenschappen als het speelbord. Dit grid leg je boven op het speelbordraster. Nu hoef je alleen de letteritems op hun plek te zetten.&lt;/li&gt;
  2974. &lt;/ul&gt;
  2975. &lt;/li&gt;
  2976. &lt;/ol&gt;
  2977. &lt;p&gt;De eerste oplossing is een krankzinnig monnikenwerk en alleen aan te raden als je de feestdagen eigenlijk liever alleen doorbrengt.&lt;/p&gt;
  2978. &lt;p&gt;Oplossing twee is veel minder werk en overzichtelijk, met alle letters bij elkaar in hun eigen container.&lt;/p&gt;
  2979. &lt;p&gt;De grids moeten natuurlijk precies op elkaar liggen. Met een extra grid is dat geen enkel probleem. Zet het &lt;code&gt;.speelbord&lt;/code&gt; en het &lt;code&gt;.lettergrid&lt;/code&gt; samen in een nieuwe container met een griddefinitie voor één rij en één kolom (dus één cel):&lt;/p&gt;
  2980. &lt;pre&gt;&lt;code&gt;.buitengrid {
  2981. display: grid;
  2982. grid-template-columns: minmax(320px, 1fr);
  2983. grid-template-rows: minmax(320px, 1fr);
  2984. margin: 2px;
  2985. max-inline-size: 1020px;
  2986. }
  2987. &lt;/code&gt;&lt;/pre&gt;
  2988. &lt;p&gt;Deze ene cel is responsive. De minimale maat is 320px en daarboven krijgt de cel zoveel ruimte als er is. De eenheid fr (fraction) is speciaal voor de gridlay-out toegevoegd aan CSS. Een fr staat voor een evenredig deel van de beschikbare ruimte. Voorbeeld: twee kolommen van elk 1fr krijgen elk de helft van de beschikbare ruimte. Zijn ze elk 2fr, dan krijgen ze ook elk de helft. Is de instelling 2fr en 1fr, dan krijgen ze respectievelijk twee derde en een derde. Op zo’n manier maak je elke gewenste verhouding.&lt;/p&gt;
  2989. &lt;p&gt;Om ervoor te zorgen dat de tekst en de vakjes responsive zijn, is op het rootelement een tekstgrootte op basis van de viewport ingesteld. Het font is 1.55 maal de kleinste viewportafmeting, dat kan dus de breedte of de hoogte zijn. Op een iPhone SE (375 x 667) is het font 375/100 x 1.55 = 5.8px. Dat leest niet echt lekker, maar ja, je moet wel die 15 vakjes kwijt. Een 4K-televisie is een betere keus, met als kleinste afmeting 2160px en een fontgrootte van 33.46px.&lt;/p&gt;
  2990. &lt;pre&gt;&lt;code&gt;:root {
  2991. font-size: 1.55vmin;
  2992. }
  2993. &lt;/code&gt;&lt;/pre&gt;
  2994. &lt;p&gt;Vervolgens plaats je het bordraster en het letterraster allebei in rij 1, kolom 1:&lt;/p&gt;
  2995. &lt;pre&gt;&lt;code&gt;.speelbord, .lettergrid {
  2996. grid-area: 1 / 1;
  2997. }
  2998. &lt;/code&gt;&lt;/pre&gt;
  2999. &lt;p&gt;De eigenschap &lt;code&gt;grid-area&lt;/code&gt; is een korte notatie voor &lt;code&gt;grid-row-start&lt;/code&gt;, &lt;code&gt;grid-column-start,&lt;/code&gt; &lt;code&gt;grid-row-end&lt;/code&gt; en &lt;code&gt;grid-column-end&lt;/code&gt;. Laat je de eindwaarde weg, dan is het item vanzelf 1 rij bij 1 kolom. Je kunt ook schrijven &lt;code&gt;grid-area: 1 / 1 / 2 / 2&lt;/code&gt;. (Gebruik &lt;code&gt;grid-area&lt;/code&gt; ook om items in &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas&quot;&gt;gebieden met een naam&lt;/a&gt; te plaatsen.)&lt;/p&gt;
  3000. &lt;p&gt;Voor de stapelvolgorde van het bord en de letters geldt de normale volgorderegel: later in de HTML ligt hoger op de stapel. Als het nodig is kun je de volgorde met &lt;code&gt;z-index&lt;/code&gt; eenvoudig aanpassen. In de grid-context verander je met &lt;a href=&quot;https://w3c.github.io/csswg-drafts/css-grid/#z-order&quot;&gt;z-index de stapelvolgorde zonder dat je position&lt;/a&gt; op iets anders dan &lt;code&gt;static&lt;/code&gt; hoeft in te stellen.&lt;/p&gt;
  3001. &lt;h2&gt;De speciale bordvakjes&lt;/h2&gt;
  3002. &lt;p&gt;Met een algemene childselector op het spelbord krijgen alle speelvakjes dezelfde basisopmaak. Die vakjes zijn 4rem groot, terwijl de rastercellen 4.25rem zijn. Door de vakjes te centreren in de cel blijft er zo rondom wat witruimte tussen de vakjes.&lt;/p&gt;
  3003. &lt;pre&gt;&lt;code&gt;.speelbord &amp;gt; * {
  3004. align-items: center;
  3005. background-color: lightgrey;
  3006. block-size: 4rem;
  3007. display: flex;
  3008. font-family: sans-serif;
  3009. font-variant: small-caps;
  3010. inline-size: 4rem;
  3011. text-align: center;
  3012. }
  3013. &lt;/code&gt;&lt;/pre&gt;
  3014. &lt;p&gt;Elk vakje is een flexcontainer. De enige reden daarvoor is het makkelijke verticaal centreren. Het had wat dat betreft ook een gridcontainer kunnen zijn. Horizontaal is de tekst gecentreerd met &lt;code&gt;text-align&lt;/code&gt;.&lt;/p&gt;
  3015. &lt;p&gt;Voor de speciale vakjes hangt de opmaak af van het data-attribuut &lt;code&gt;data-bonus&lt;/code&gt;. De tekst van &lt;code&gt;data-bonus&lt;/code&gt; wordt ingelezen als content voor het pseudo-element &lt;code&gt;::before&lt;/code&gt;. Met de attribuutselector ‘waarde moet beginnen met’ worden de verschillende stijlen toegepast.&lt;/p&gt;
  3016. &lt;pre&gt;&lt;code&gt;[data-bonus]::before {
  3017. content: attr(data-bonus);
  3018. }
  3019.  
  3020. [data-bonus^=&amp;quot;3 x woord&amp;quot;] {
  3021. background-color: red;
  3022. box-shadow: 0 0 2px 1px red;
  3023. }
  3024. &lt;/code&gt;&lt;/pre&gt;
  3025. &lt;h2&gt;Opmaak van de lettervakjes&lt;/h2&gt;
  3026. &lt;p&gt;De CSS voor de lettervakjes is wat uitgebreider, maar bijzonderheden zijn er niet. De letter komt uit een data-attribuut, net als de puntwaarde van de letter. Het vakje is een flexcontainer voor de uitlijning van de letter. De letterwaarde is absoluut gepositioneerd. Je zou dat allemaal kunnen vervangen door een grid, maar daar wordt de code niet beter of duidelijker van.&lt;/p&gt;
  3027. &lt;pre&gt;&lt;code&gt;&amp;lt;span class=&amp;quot;letter&amp;quot; data-letter=&amp;quot;F&amp;quot; data-waarde=&amp;quot;4&amp;quot;&amp;gt;&amp;lt;/span&amp;gt;
  3028. &lt;/code&gt;&lt;/pre&gt;
  3029. &lt;pre&gt;&lt;code&gt;.letter {
  3030. align-items: center;
  3031. background-color: hsl(33 100% 88%);
  3032. block-size: 4rem;
  3033. box-shadow: 1px 1px 4px hsl(33 100% 20%);
  3034. color: hsl(33 0% 5%);
  3035. cursor: pointer;
  3036. display: flex;
  3037. font-size: 2rem;
  3038. font-variant: small-caps;
  3039. inline-size: 4rem;
  3040. justify-content: center;
  3041. margin: 1px;
  3042. padding: .5rem;
  3043. position: relative;
  3044. text-transform: capitalize;
  3045. transform: translate(-1500px, -1500px);
  3046. }
  3047.  
  3048. .letter::before {
  3049. content: attr(data-letter);
  3050. }
  3051.  
  3052. .letter::after {
  3053. bottom: 0.5em;
  3054. content: attr(data-waarde);
  3055. font-size: 50%;
  3056. position: absolute;
  3057. right: 0.5em;
  3058. }
  3059. &lt;/code&gt;&lt;/pre&gt;
  3060. &lt;p&gt;De regel &lt;code&gt;transform: translate(-1500px, -1500px)&lt;/code&gt;; plaatst alle letters buiten beeld, zodat ze bij het laden van de pagina met een animatie op hun plek gezet kunnen worden. Het is een eenvoudige translate-animatie, maar je kunt het natuurlijk zo gek maken als je wilt.&lt;/p&gt;
  3061. &lt;p&gt;De trigger zit in de letterselectors, dat zijn allemaal genummerde childselectors. De animatieregel bevat achtereenvolgens de naam van de animatie, de duur en het effect. Daarna komt de startvertraging en die is bij elke volgende letter wat langer, zodat de letters na elkaar worden geplaatst. Als laatste zorgt &lt;code&gt;forwards&lt;/code&gt; ervoor dat het laatste beeld van de animatie blijft staan. Zonder die aanwijzing zou de letter gelijk weer uit beeld verdwijnen, volgens de transformregel in de klasse &lt;code&gt;.letter&lt;/code&gt;.&lt;/p&gt;
  3062. &lt;pre&gt;&lt;code&gt;.letter:nth-child(10) {
  3063. grid-area: 6 / 6;
  3064. animation: drop-letter .5s ease-in-out 2.0s forwards;
  3065. }
  3066.  
  3067. @keyframes drop-letter {
  3068. 0% {
  3069. transform: translate(-1500px, -1500px);
  3070. }
  3071. 50% {
  3072. transform: translate(-250px, -250px);
  3073. }
  3074. 100% {
  3075. transform: translate(0, 0);
  3076. }
  3077. }
  3078. &lt;/code&gt;&lt;/pre&gt;
  3079. &lt;p&gt;Op dit punt heb je een scrabblebord waarop vanzelf letters worden geplaatst. Speelbaar is het nog niet. Daar ga ik een jaartje over nadenken!&lt;/p&gt;
  3080. </content>
  3081.  </entry>
  3082.  <entry>
  3083.    <title>Zure developers &amp;amp; uitnodigende communicatie</title>
  3084.    <link href="https://www.fronteers.nl/nl/blog/2022/12/zure-developers-uitnodigende-communicatie"/>
  3085.    <updated>2022-12-04T00:00:00Z</updated>
  3086.    <id>https://www.fronteers.nl/nl/blog/2022/12/zure-developers-uitnodigende-communicatie</id>
  3087.    <content xml:lang="nl" type="html">&lt;p&gt;Iedereen kent ze wel. De zuurpruimen, de klagers. Niets is ooit goed genoeg, en het probleem ligt altijd bij de incompetentie van anderen. Misschien komt er wel meteen een naam en gezicht bij je in beeld. Ik geef toe, ik ben zelf ook niet vies van een beetje gezanik en gezeur.&lt;/p&gt;
  3088. &lt;p&gt;&lt;em&gt;De doelstelling van Fronteers is de professionalisering van het beroep front-end web development. Daarbij streven
  3089. wij naar erkenning, verbetering en ondersteuning van de (positie van) Nederlandstalige front-end webontwikkelaars.&lt;/em&gt;&lt;/p&gt;
  3090. &lt;p&gt;Als je kijkt naar de doelstelling van onze vereniging dan is er zelfs na 15 jaar nog genoeg werk aan de winkel. De vraag is hoe we andere developers en stakeholders in onze doelen geïnvesteerd krijgen. We moeten immers een hoop mensen uitnodigen in ons wereldje, zodat ze zien wat wij zien. Genoeg van ons praten gelukkig al met developers, marketeers, product- en projectmanagers, designers, etc.&lt;/p&gt;
  3091. &lt;h2&gt;Ontmoet de zuurpruim&lt;/h2&gt;
  3092. &lt;p&gt;Maar daar is dan de zuurpruim. Die maakt iedereen die het niet snapt liever belachelijk. Die noemt React een div-soep. Tailwind CSS fans die snappen niets van &lt;em&gt;echte&lt;/em&gt; CSS. En als iemand site een &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; als knop gebruikt, of niet toegankelijk is, dan kunnen ze beter iets anders met hun leven gaan doen.&lt;/p&gt;
  3093. &lt;p&gt;Natuurlijk krijgt een conferentiespreker de lachers op de hand door een stukje lelijke DOM te laten zien. En kan men lekker &lt;em&gt;bonden&lt;/em&gt; tijdens een borrel met front-end devs die het wel snappen. Maar wat mij betreft missen we vaak een kernwaarde die we nodig hebben om onze front-end wereld een stukje beter te maken. En die kernwaarde is &lt;em&gt;uitnodigend zijn&lt;/em&gt;.&lt;/p&gt;
  3094. &lt;h2&gt;Onze communicatie nodigt niet uit tot communiceren.&lt;/h2&gt;
  3095. &lt;p&gt;Want leg eens uit: Hoe kom je af van je imposter syndroom als je fouten belachelijk worden gemaakt op een conferentiepodium? Waarom zou je de nieuwe mogelijkheden van CSS leren als jouw JavaScript oplossing als &lt;em&gt;dom&lt;/em&gt; wordt bestempeld? Waarom zou je als designer HTML/CSS leren als een frontend developer zucht en puft als je een ontwerp aanlevert?&lt;/p&gt;
  3096. &lt;p&gt;En daarom is mijn oproep in deze feestmaand om iets geduldiger te worden. Iets liever te zijn. Anderen meer uit te nodigen in je communicatie. Om een keer diep uit te ademen, te ontspannen, en te vragen:&lt;/p&gt;
  3097. &lt;ul&gt;
  3098. &lt;li&gt;&amp;quot;Mag ik je iets leren?&amp;quot;&lt;/li&gt;
  3099. &lt;li&gt;&amp;quot;Mag ik je iets tofs laten zien?&amp;quot;&lt;/li&gt;
  3100. &lt;li&gt;&amp;quot;Ik denk dat dit handiger kan, wil je weten hoe?&amp;quot;&lt;/li&gt;
  3101. &lt;li&gt;&amp;quot;Kun je me uitleggen waarom je deze oplossing hebt gekozen?&amp;quot;&lt;/li&gt;
  3102. &lt;/ul&gt;
  3103. &lt;p&gt;En misschien dat deze uitnodigende communicatie ervoor zorgt dat we geen tegenstanders zien, maar medestanders worden. En misschien, heel misschien... Leer je ook nog iets van een ander.&lt;/p&gt;
  3104. &lt;h2&gt;Fijne feestdagen en een uitnodigend nieuw jaar!&lt;/h2&gt;
  3105. </content>
  3106.  </entry>
  3107.  <entry>
  3108.    <title>Ik ben een div</title>
  3109.    <link href="https://www.fronteers.nl/nl/blog/2022/12/ik-ben-een-div"/>
  3110.    <updated>2022-12-03T00:00:00Z</updated>
  3111.    <id>https://www.fronteers.nl/nl/blog/2022/12/ik-ben-een-div</id>
  3112.    <content xml:lang="nl" type="html">&lt;p&gt;Stond er wekenlang als werktitel in de planning. Klinkt niet echt veelbelovend. Ronduit saai eigenlijk.&lt;/p&gt;
  3113. &lt;p&gt;Een div is vaag, en vooral nikszeggend.&lt;/p&gt;
  3114. &lt;p&gt;&#39;Does not inherently represent anything&#39;.&lt;/p&gt;
  3115. &lt;pre&gt;&lt;code&gt;&amp;lt;div&amp;gt;&amp;lt;/div&amp;gt;
  3116. &lt;/code&gt;&lt;/pre&gt;
  3117. &lt;p&gt;Daar kun je natuurlijk niet echt veel mee. En ook eigenlijk alles. Je kunt er van alles instoppen net als een kerstpakket, je kunt het een thema (of type) meegeven, en versiering, maar het blijft een ‘domme doos’.&lt;/p&gt;
  3118. &lt;p&gt;Een div kun je overal voor gebruiken, het werkt altijd en doet wat je ervan verwacht. Oppervlakkig gezien. Want de div is ook onzichtbaar en betekenisloos.&lt;/p&gt;
  3119. &lt;pre&gt;&lt;code&gt;&amp;lt;div
  3120.    type=&amp;quot;hidden&amp;quot;
  3121.    id=&amp;quot;whatever&amp;quot;
  3122.    style=&amp;quot;background-color:grey; background-position: inherit;&amp;quot;&amp;gt;
  3123. &amp;lt;/div&amp;gt;
  3124. &lt;/code&gt;&lt;/pre&gt;
  3125. &lt;p&gt;En ik kan het weten, want ik ben er een.&lt;/p&gt;
  3126. &lt;p&gt;Al jaren lang ben ik de Div van de afdeling. Ik doe mijn best om me aan te passen, &lt;span&gt; me best in, maar neem niet echt stelling. Het liefst zet ik mijzelf op een onopvallende background-position en doe zoveel mogelijk de dingen die van me verwacht worden.&lt;/span&gt;&lt;/p&gt;
  3127. &lt;p&gt;Dat is de weg van de minste weerstand, maar ook risicoloos. Voor je het weet hoor je bij het onopvallende meubilair die niemand meer opmerkt, maar waar ook weinig collega&#39;s moeite mee hebben. Zoals een kantoorplant.&lt;/p&gt;
  3128. &lt;pre&gt;&lt;code&gt;&amp;lt;div type=&amp;quot;text&amp;quot; id=&amp;quot;succulent-plant&amp;quot;&amp;gt;Ik ben een kantoorplant&amp;lt;/div&amp;gt;
  3129. &lt;/code&gt;&lt;/pre&gt;
  3130. &lt;p&gt;Het heeft met mijn persoonlijkheid te maken, en ook met een generatiekloofje. Als ouwe lul ben ik niet opgegroeid met computers, ook nog niet tijdens mijn opleiding tot grafisch vormgever. Op de kunstacademie werd eind jaren 80 ineens een zolderruimte ingericht met een aantal Apple computertjes en Aldus Freehand 2.0, en daar mochten we een uurtje per week mee klooien.
  3131. Pas rond mijn vijfigste ben ik web development in gerold, nu 6 jaar geleden. Dankzij een erfenis kon ik mezelf om laten scholen, en ik vond het allemaal geweldig.&lt;/p&gt;
  3132. &lt;p&gt;Maar om als vrouw en 50 plusser nu het vak in te rollen, ervaar ik als een kleine cultuurshock. Een onzekere
  3133. persoonlijkheid maakt niet alleen dat je jezelf op de achtergrond houdt, maar ook dat als je vindt dat je een punt
  3134. hebt of ergens meer van weet dan je collega&#39;s, dat je toch gaat twijfelen aan je ideeën, want waarom zou ik in m&#39;n eentje iets vinden waar al mijn jonge hoog opgeleide collega&#39;s anders over denken? Kom dan maar eens overtuigend uit de hoek. Een div die z&#39;n mond open doet is op z&#39;n zachtst gezegd even wennen.&lt;/p&gt;
  3135. &lt;p&gt;Er werd ook een beetje lacherig op gereageerd. &#39;We hebben het al veel te druk, en het werkt toch? Het feit dat we iets opleveren is veel belangrijker. Dit heeft geen prioriteit.&#39; Geef ze maar eens ongelijk. Dit is hun wereld, dus willen ze graag de div houden. In de code en in het team.&lt;/p&gt;
  3136. &lt;p&gt;Maar vanaf dat moment begon ik ook serieus te twijfelen of ik dit soort werk wel wil doen. En dan bedoel ik het werken aan de technische kant van de frontend van een grote app, waar de kwaliteit van de HTML en CSS een ondergeschikte rol hebben. Misschien hou ik het vol omdat ik mezelf niet wil laten kennen en mensen om me heen trots op me zijn, en ik niemand teleur wil stellen. Misschien omdat ik eindelijk een volwaardig salaris kan verdienen. Misschien omdat ik al jaren mijn geld en vrije tijd besteed aan het leren programmeren, en ik niet durf toe te geven dat het mij misschien niet echt ligt. Maar om eerlijk te zijn word ik er ongelukkig van. Ik kom regelmatig thuis van mijn werk en trek een flesje open. Of mijn man vraagt hoe het gaat en dan voel ik ineens de tranen stromen. En ik ben alleen nog maar moe.&lt;/p&gt;
  3137. &lt;p&gt;Ik ga de div hier niet uit de code halen maar wel uit mezelf.&lt;/p&gt;
  3138. &lt;p&gt;En hopelijk ergens anders uit de code.&lt;/p&gt;
  3139. &lt;p&gt;Want ik weet best wel waar ik wel gelukkig van word. En mijn zelfvertrouwen en energie weer terugkrijg. Van concepten bedenken en mooie dingen maken, van CSS, HTML en JavaScript, van design, van websites, illustraties en animaties. Dan ben ik geen div en stel me ook niet zo op. Dat maakt me ook veel toegankelijker.&lt;/p&gt;
  3140. &lt;p&gt;Advent is, net als welke periode dan ook, een perfect moment om na te denken over het vervangen van een oude &lt;code&gt;&amp;lt;jas&amp;gt;&lt;/code&gt; en in een andere rol te kruipen, eentje die beter bij me past en met betekenis. De geboorte van een &lt;code&gt;&amp;lt;article&amp;gt;&lt;/code&gt;, voor onder de kerstboom. Bij deze. Of in dit geval; erin, voor wie de code reviewt. Of hang &#39;m in de kantoorplant, wie weet wat daar nog uit voortkomt.&lt;/p&gt;
  3141. &lt;pre&gt;&lt;code&gt;&amp;lt;main&amp;gt;
  3142.    &amp;lt;article&amp;gt;
  3143.        &amp;lt;h1&amp;gt;Fijne feestdagen!&amp;lt;/h1&amp;gt;
  3144.    &amp;lt;/article&amp;gt;
  3145. &amp;lt;/main&amp;gt;
  3146. &lt;/code&gt;&lt;/pre&gt;
  3147. &lt;h2&gt;En om de vooruitzichten nog iets mooier te maken:&lt;/h2&gt;
  3148. &lt;pre&gt;&lt;code&gt;body {
  3149.    margin: 0;
  3150.    height: 100vh;
  3151.    color: gold;
  3152. }
  3153.  
  3154. main {
  3155.    display: block;
  3156.    margin: 0 auto;
  3157.    padding: 3.125rem 1.875rem 0;
  3158. }
  3159.  
  3160. main article {
  3161.    position: relative;
  3162.    margin: 10% auto;
  3163.    width: 12.5rem;
  3164. height: 12.5rem;
  3165.    border-radius: 100%;
  3166.    background-color: rgba(255,255,255,.75);
  3167.    box-shadow: inset -2.5rem -3.75rem 2.5rem -1.875rem rgba(0,0,0,.4),
  3168. inset -3.125rem -2.5rem 15px 80px currentColor;
  3169.    transition: 1s box-shadow;
  3170. }
  3171.  
  3172. h1 {
  3173.    position: absolute;
  3174.    top: 14rem;
  3175.    text-align: center;
  3176.    font-size: 2rem;
  3177.    font-family: sans-serif;
  3178.    color: darkgrey;
  3179. }
  3180.  
  3181. main article::before {
  3182.    content: &amp;quot;&amp;quot;;
  3183.    position: absolute;
  3184.    left: 5.313rem;
  3185.    top: -2.75rem;
  3186.    width: 1.25rem;
  3187.    height: 1.25rem;
  3188.    border: solid 5px lightgrey;
  3189.    border-radius: 100%;
  3190. }
  3191.  
  3192. main article::after {
  3193.    content: &amp;quot;&amp;quot;;
  3194.    position: absolute;
  3195.    left: 4.625rem;
  3196.    top: -1.375rem;
  3197.    width: 2.5rem;
  3198.    height: 1.25rem;
  3199.    background: linear-gradient(80deg,#F7F7F7,silver) content-box;
  3200.    border-style: solid;
  3201.    border-width: 0 5px 7px;
  3202.    border-color: lightgrey  transparent;
  3203.    border-radius: 100% / 25%;
  3204. }
  3205. &lt;/code&gt;&lt;/pre&gt;
  3206. &lt;p&gt;Met dank aan &lt;a href=&quot;https://codepen.io/Kseso/pen/wMvOxb&quot;&gt;Kseso op Codepen&lt;/a&gt;&lt;/p&gt;
  3207. </content>
  3208.  </entry>
  3209.  <entry>
  3210.    <title>Valkuilen van toegankelijke componenten</title>
  3211.    <link href="https://www.fronteers.nl/nl/blog/2022/12/valkuilen-van-toegankelijke-componenten"/>
  3212.    <updated>2022-12-02T00:00:00Z</updated>
  3213.    <id>https://www.fronteers.nl/nl/blog/2022/12/valkuilen-van-toegankelijke-componenten</id>
  3214.    <content xml:lang="nl" type="html">&lt;p&gt;Al zijn je bouwblokken (componenten) nog zo mooi, je kan er nog steeds verkeerd mee bouwen!&lt;/p&gt;
  3215. &lt;p&gt;Steeds vaker zie je dat componenten claimen toegankelijk te zijn. Dat klinkt goed: componenten die voor iedereen te gebruiken zijn, ook voor mensen met beperkingen! Wat zo’n claim precies inhoudt is niet altijd duidelijk. Daarnaast geeft het je als bouwer ook geen garanties. Je kan er nog steeds een zooitje van maken!&lt;/p&gt;
  3216. &lt;p&gt;Wat kan er zoal misgaan? We bekijken een aantal veel voorkomende valkuilen.&lt;/p&gt;
  3217. &lt;h2&gt;Waar zijn componenten goed voor?&lt;/h2&gt;
  3218. &lt;p&gt;Componenten zijn geweldig voor alles wat je meer dan één keer moet doen. Je wil niet telkens je button of link opnieuw ontwerpen en bouwen. Dat is zonde van je tijd. Liever bouw je één versie die heel goed is, en dan kun je die hergebruiken. Waarom vaak iets half bouwen, als je ook al die tijd in één hele goede versie kan steken? Die ene versie kun je dan testen met verschillende browsers, mobiel, met screen readers en hopelijk zelfs met echte gebruikers!&lt;/p&gt;
  3219. &lt;p&gt;Wat je dan ook meteen krijgt is consistentie. Daar maak je iedereen blij mee! Denk bijvoorbeeld aan een focus-state die overal hetzelfde is. Dat scheelt een hoop denkwerk.&lt;/p&gt;
  3220. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toepassing-blog-erik-full.png&quot; alt=&quot;Een plastic speelset geplaatst op de dakrand van een flat.&quot; /&gt;&lt;/p&gt;
  3221. &lt;p&gt;&lt;em&gt;Het zit hem helemaal in de toepassing.&lt;/em&gt;&lt;/p&gt;
  3222. &lt;h2&gt;Pagina-specifiek: content&lt;/h2&gt;
  3223. &lt;p&gt;De ene pagina is de andere niet. En juist in de onderdelen die variëren kan het natuurlijk alsnog verkeerd gaan.&lt;/p&gt;
  3224. &lt;h3&gt;Content&lt;/h3&gt;
  3225. &lt;p&gt;Een beetje een inkoppertje misschien maar goed om bewust van te zijn. Voor elke pagina schrijf je content. Die moet toegankelijk zijn. Hierbij kun je denken aan het vermijden van complex taalgebruik, en het vermijden van omschrijvingen op basis van specifieke zintuigen (zoals een “open de rode link” of “de tekst rechts hiervan”).&lt;/p&gt;
  3226. &lt;p&gt;Content gaat ook verder dan paragraafjes en tekstblokjes. Vergeet niet je alternatieve teksten voor afbeeldingen, of captions en transcripties voor andere media-bestanden.&lt;/p&gt;
  3227. &lt;h3&gt;De paginatitel&lt;/h3&gt;
  3228. &lt;p&gt;Laat deze zoveel mogelijk overeen komen met de belangrijkste heading op je pagina (de &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;) en de namen van de links die naar de pagina verwijzen. Als er herhalende delen in de titel zitten (zoals de naam van de website) plaats die dan zoveel mogelijk naar achter in de titel. Dit maakt scannen (ook met screen readers) makkelijker. Het unieke en onderscheidende deel komt vooraan.&lt;/p&gt;
  3229. &lt;p&gt;Je krijgt in een webshop iets als: “Product - categorie - &lt;a href=&quot;http://webshopnaam.nl/&quot;&gt;webShopNaam.nl&lt;/a&gt;”&lt;/p&gt;
  3230. &lt;h2&gt;Pagina-specifiek: structuur&lt;/h2&gt;
  3231. &lt;p&gt;Misschien heb je hier deels wel iets herbruikbaars voor, zoals templates. Dat is enorm fijn. De ervaring leert echter dat deze niet altijd beschikbaar zijn, en niet de prioriteit hebben.&lt;/p&gt;
  3232. &lt;h3&gt;Landmarks&lt;/h3&gt;
  3233. &lt;p&gt;Voor elke pagina wil je je landmarks op orde hebben:&lt;/p&gt;
  3234. &lt;ul&gt;
  3235. &lt;li&gt;Plaats je navigatie in een &lt;code&gt;&amp;lt;nav&amp;gt;&lt;/code&gt;&lt;/li&gt;
  3236. &lt;li&gt;Plaats de belangrijkste content in een &lt;code&gt;&amp;lt;main&amp;gt;&lt;/code&gt;&lt;/li&gt;
  3237. &lt;li&gt;Gebruik aan het begin van je pagina een &lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt; en aan het eind een &lt;code&gt;&amp;lt;footer&amp;gt;&lt;/code&gt;&lt;/li&gt;
  3238. &lt;li&gt;Heb je informatie die terzijde is? Gebruik dan een &lt;code&gt;&amp;lt;aside&amp;gt;&lt;/code&gt;&lt;/li&gt;
  3239. &lt;/ul&gt;
  3240. &lt;h3&gt;Heading structuur&lt;/h3&gt;
  3241. &lt;p&gt;Je headings helpen mensen navigeren door je pagina. Net zoals je koppen kan scannen in een krant, zo wil je dat op een website ook.&lt;/p&gt;
  3242. &lt;p&gt;De &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; is voor de belangrijkste heading; voor waar je pagina overgaat. Daaronder wil je een soort boomstructuur maken van je headings. Alle content valt logischerwijs (zowel visueel als in code) onder één van je headings. Je gaat van hoofdonderwerp (&lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;) naar deel-onderwerp (&lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;), naar deel-deel-onderwerp (&lt;code&gt;&amp;lt;h3&amp;gt;&lt;/code&gt;), en zo verder. Nooit meer dan één stap tegelijk vooruit.&lt;/p&gt;
  3243. &lt;h3&gt;Focus volgorde&lt;/h3&gt;
  3244. &lt;p&gt;Zorg ervoor dat elke pagina waar je met je tab-toets doorheen gaat logisch navigeert. Dit gaat makkelijker als je geen &lt;code&gt;tabindex&lt;/code&gt; gebruikt met een waarde hoger dan 0. Ook creatief toepassen van CSS grid of flexbox kan de visuele volgorde laten afwijken van die in de code.&lt;/p&gt;
  3245. &lt;p&gt;Wil je het je bezoeker helemaal makkelijk maken? Voeg een skip link toe. Dat is een (vaak verborgen) link aan het begin van de pagina waarmee je naar de content kan “springen”.&lt;/p&gt;
  3246. &lt;h2&gt;Lastig te testen&lt;/h2&gt;
  3247. &lt;h3&gt;Variaties van componenten&lt;/h3&gt;
  3248. &lt;p&gt;Hoe meer features een component heeft, hoe groter de kans dat het mis gaat. Als component een boolean-attribuut, dark mode en twee responsive zoom-niveaus heeft, dan zit je al snel op (2x2x3=8) acht variaties die allemaal getest en onderhouden moeten worden. Let hier dus op! Als iedereen om je heen standaard dark mode aan heeft staan, reken maar op issues in light mode.&lt;/p&gt;
  3249. &lt;h3&gt;Compositie&lt;/h3&gt;
  3250. &lt;p&gt;Zodra je componenten gaat combineren kun je ook problemen voorzien. Het liefst zie je bijvoorbeeld dat formulieren als een compleet systeem ontwikkeld en gebundeld zijn. In formulieren combineer je vaak dezelfde componenten. Worden ze los geleverd dan kunnen er onverwachte (en ongeteste) situaties ontstaan. Weer een punt van aandacht!&lt;/p&gt;
  3251. &lt;p&gt;Hieraan gerelateerd is ook het onderwerp van relaties. Alles wat je zelf aan elkaar knoopt is gevoelig voor fouten. Als je bovenaan je pagina een table of contents hebt, moet je goed opletten hoe die verbonden is aan de content van je pagina. Of wat dacht je van een formulier(veld) en een foutmelding of instructie? Relaties wil je zowel visueel als in de code helder hebben.&lt;/p&gt;
  3252. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/advents-erik-2.jpeg&quot; alt=&quot;Een projector hangt aan een muur. Een scherm hangt er opgerold boven. Het scherm kan zo niet uitgerold worden, en de projector kan er niet op projecteren.&quot; /&gt;&lt;/p&gt;
  3253. &lt;p&gt;&lt;em&gt;De juiste onderdelen in de verkeerde volgorde.&lt;/em&gt;&lt;/p&gt;
  3254. &lt;h3&gt;Website-breed&lt;/h3&gt;
  3255. &lt;p&gt;Zoals eerder benoemd zijn componenten goed voor consistentie. Is je set componenten nog niet heel volwassen of volledig, dan kan dit nog een punt van verbetering zijn.&lt;/p&gt;
  3256. &lt;p&gt;Zo kunnen focus states tussen pagina’s en components nog verschillen als dit niet goed centraal bedacht en uitgevoerd is.&lt;/p&gt;
  3257. &lt;p&gt;Een ander verbeterpunt in de bredere structuur is vaak de navigeerbaarheid. Je wil dat pagina’s op meer dan één manier te vinden en benaderen zijn. Denk aan een zoekfunctie of sitemap naast je menu-structuur. Typisch iets wat je niet kan oplossen met een component. Zorg dat al je pagina’s hier onderdeel van uitmaken en duidelijk vertegenwoordigd zijn.&lt;/p&gt;
  3258. &lt;h3&gt;Voorbij de valkuilen&lt;/h3&gt;
  3259. &lt;p&gt;Stel je waakt nu voor al deze valkuilen. Weet je dan zeker dat het goed komt? Nee, helaas! Je kan nog steeds het verkeerde component kiezen bijvoorbeeld! Je hebt geen garantie voor een toegankelijk eindresultaat. De kans dat het je lukt met toegankelijke componenten is wel vele malen groter dan zonder!&lt;/p&gt;
  3260. &lt;p&gt;Componenten zijn als de basis van een huis. Bouw je met scheve kozijnen op drijfzand? Succes! Een stevig fundament met kwalitatieve onderdelen is wat je wil. Maar ook daarmee kun je een huis bouwen dat tekort schiet!&lt;/p&gt;
  3261. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/advents-erik-3.png&quot; alt=&quot;Een muur met hoekjes en een bocht met een plint. De plint is in allemaal losse stukjes in een vergeefse poging om de vorm van de muur te volgen.&quot; /&gt;&lt;/p&gt;
  3262. </content>
  3263.  </entry>
  3264.  <entry>
  3265.    <title>Persoonlijke ontwikkeling</title>
  3266.    <link href="https://www.fronteers.nl/nl/blog/2022/12/persoonlijke-ontwikkeling"/>
  3267.    <updated>2022-12-01T00:00:00Z</updated>
  3268.    <id>https://www.fronteers.nl/nl/blog/2022/12/persoonlijke-ontwikkeling</id>
  3269.    <content xml:lang="nl" type="html">&lt;p&gt;Als front end developer bevindt je je in de luxe positie om in het midden te zitten van meerdere disciplines, zoals back end development, UX, design en project management. Doordat je daar in het midden zit heb je ook de mogelijkheid om je te bewegen of te verschuiven in één van die richtingen. Nu zal je daar natuurlijk niet altijd bewust mee bezig zijn, maar soms gebeurt dat van nature, zoals in mijn geval.&lt;/p&gt;
  3270. &lt;h2&gt;Ome Robert vertelt&lt;/h2&gt;
  3271. &lt;p&gt;Ikzelf heb ongeveer vijftien jaar voor verschillende kleine en grote agencies gewerkt en voor kleine en grote klanten websites gebouwd als front end developer.&lt;/p&gt;
  3272. &lt;p&gt;Maar soms heb je zo’n moment in je carrière dat het een beetje begint te jeuken. Wil ik dit wel doen tot mijn pensioen? Hoever kan ik doorgroeien? Wil ik wel doorgroeien? Wil ik iets compleet anders gaan doen? En dan kom je erachter dat de positie die ik eerder beschreef eigenlijk wel verrekte handig is. Je kan natuurlijk ook compleet uit de IT stappen en dat hippe koffietentje willen beginnen… of: je blijft binnen je vakgebied en je kijkt wat breder naar de omgeving waar je in werkt.&lt;/p&gt;
  3273. &lt;p&gt;Ik had dat dus in 2007. Ik heb toen de stoute schoenen aangetrokken en besloten om me te verdiepen in project management. Op eigen kosten een cursus gedaan, veel inlezen, maar natuurlijk: geen praktijkervaring. Toch besloot ik om wat open sollicitaties de deur uit te doen en zowaar ben ik aangenomen bij een bedrijf waar ik echt heel graag wilde werken! Supervet, maar ik kwam daar echt niet lekker uit de startblokken en ik kreeg weinig steun en hulp.&lt;/p&gt;
  3274. &lt;p&gt;Dus terug naar front end development… en in 2015 kwam ik toevalligerwijs terecht bij Rietveld Licht. Geen agency, maar wel een webshop die heel veel liefde nodig had. Het grootste verschil: ik was de enige front end developer en mijn enige collega is een back end developer. En wat doe je dan als front end developer die (zoals ik) best wel veel met design bezig is: Lekker ontwerpen! En dan natuurlijk direct in HTML en CSS, want dat is waar ik me in thuis voel en wat ik kan dromen. En vanaf daar werd het eigenlijk steeds breder en leuker: Logo ontwerpen voor ons eigen internationale merk? Check! Me bemoeien met SEO, social media en marketing? Check! Enge dingen doen met Google Analytics en Tagmanager? Check!&lt;/p&gt;
  3275. &lt;p&gt;Wat hierna komt? Geen idee. Lampen ontwerpen en ontwikkelen misschien?&lt;/p&gt;
  3276. &lt;h2&gt;Het is ook nooit goed&lt;/h2&gt;
  3277. &lt;p&gt;Nu denk je natuurlijk: ja Robert, leuk zo’n verhaal, maar wat kan ik ermee?&lt;/p&gt;
  3278. &lt;p&gt;Ik denk dat het goed is om regelmatig eens van een afstandje te kijken naar waar je nu bent. Ben je een junior developer die nog nat is achter de oren of ben je een enorme senior die eigenlijk niet verder kan groeien? Waar liggen je interesses? Je échte interesses bedoel ik dan, die interesses waar je blij van wordt. Dat kan natuurlijk compleet front end gerelateerd zijn: misschien zit je met je hoofd compleet in React of Vue of ben je juist veel meer met HTML en CSS bezig. Of misschien heb je ook die jeuk die ik eerder beschreef en ben je veel meer nieuwsgierig naar de gebieden om je heen. Misschien wil je applicaties maken die front end developers helpen (hallo Kilian met je Polypane!). Of wil je net zoals ik veel meer met design bezig zijn en meer grafisch design doen of vind je de psychologische kant juist tof en wil je meer in de UX duiken van websites.&lt;/p&gt;
  3279. &lt;h2&gt;Met een natte T&lt;/h2&gt;
  3280. &lt;p&gt;Je hoeft niet voor altijd te blijven doen wat je nu doet. Dat is eigenlijk de boodschap die ik heb. Er zijn genoeg mogelijkheden om te groeien en of dat nu in de hoogte is (bijvoorbeeld van junior naar senior) of in een breedte (bijvoorbeeld van front end naar UX), dat bepaal je zelf. Je moet alleen wel stapjes durven te maken in de richting die jij wil.&lt;/p&gt;
  3281. &lt;p&gt;Buiten dat is het goed om überhaupt meer kennis te krijgen van de gebieden om je heen. Je hoeft niet per sé een
  3282. specialist te zijn, maar als je meer &lt;a href=&quot;https://agilescrumgroup.nl/t-shaped&quot;&gt;T-shaped&lt;/a&gt; bent wordt je veel
  3283. gevarieerder. Als persoon wordt je daardoor ook nog eens interessanter als je een nieuwe baan zoekt.&lt;/p&gt;
  3284. &lt;p&gt;Om af te sluiten met een TL;DR: wordt bewust van je huidige positie, volg je interesses, blijf niet onnodig hangen in je huidige werk als je er niet gelukkig van wordt en blijf groeien.&lt;/p&gt;
  3285. </content>
  3286.  </entry>
  3287.  <entry>
  3288.    <title>Nieuw bestuurslid, Wim van Iersel</title>
  3289.    <link href="https://www.fronteers.nl/nl/blog/2022/11/nieuw-bestuurslid-wim-van-iersel"/>
  3290.    <updated>2022-11-16T00:00:00Z</updated>
  3291.    <id>https://www.fronteers.nl/nl/blog/2022/11/nieuw-bestuurslid-wim-van-iersel</id>
  3292.    <content xml:lang="nl" type="html">&lt;p&gt;Op de afgelopen ALV is Wim van Iersel toegetreden tot het bestuur. Hij stelt zich graag aan jullie voor!&lt;/p&gt;
  3293. &lt;p&gt;Hoi allemaal,&lt;/p&gt;
  3294. &lt;p&gt;Een kleine verrassing op de woensdagavond voor degene die de notulen van de &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/bestuur/notulen/notulen-alv-4-november-2022&quot;&gt;Algemene Ledenvergadering&lt;/a&gt; nog niet gelezen hebben! Afgelopen vrijdag was de ALV van Fronteers in Utrecht. Daar was ik bij aanwezig als een van de leden van de kascommissie dit jaar en liep ik enigszins verrast naar buiten als het nieuwe bestuurslid van Fronteers.&lt;/p&gt;
  3295. &lt;p&gt;Nu hoor ik jullie denken: hoe kan dat nu weer, er waren toch geen kandidaten aangekondigd op de website/in de e-mail? Dat klopt, maar toen duidelijk werd tijdens de ALV dat het bestuur zeker niet de minimale vereiste bezetting van drie (volgens statuten) zou halen door een gebrek aan nieuwe kandidaten, heb ik kenbaar gemaakt graag de rol van Penningmeester op me te willen nemen. Daarmee is één van de twee vrijgekomen posities in het bestuur voor de komende 3 jaar opgevuld. De vertrekkende bestuursleden zijn trouwens niet van plan de continuïteit van het bestuur in gevaar te brengen. We hebben wel een proeftijd afgesproken van drie maanden om even helemaal open kaart te spelen.&lt;/p&gt;
  3296. &lt;p&gt;Wat ik jullie niet wil onthouden is dat de goed bedachte argumenten van Koen Willems een handje bijgedragen hebben aan mijn keuze om me last minute kandidaat te stellen. Mocht je nu denken ‘ik wil toch eigenlijk ook wel in het bestuur van Fronteers’ laat het dan gerust even weten!&lt;/p&gt;
  3297. &lt;p&gt;Voor de oudgedienden van Fronteers ben ik waarschijnlijk wel een bekend gezicht. Ik ben al lid sinds de oprichtings-ALV die aansluitend gehouden werd aan Fronteers 2008 in Pakhuis De Zwijger. Als vrijwilliger heb met enige regelmaat de afgelopen jaren onderdeel uitgemaakt van de kascommissie; eerlijk gezegd ben ik de tel een beetje kwijt geraakt hoe vaak ik die taak samen met een van de andere vrijwillig(st)ers heb uitgevoerd, maar dat heb ik altijd met plezier gedaan en dan nu vanaf de andere kant.&lt;/p&gt;
  3298. &lt;p&gt;Afsluitend wat kort over mezelf. Op Twitter bekend als &lt;a href=&quot;https://twitter.com/banaan666&quot;&gt;@banaan666&lt;/a&gt; (voor zolang dat nog bestaat) en in het echte leven luister ik o.a. naar de naam Wim van Iersel. Ik werk als Webmaster/Front-end Web Developer (zo noem ik het zelf maar) bij de gemeente Tilburg. Ondertussen wel steeds minder met Front-end bezig in mijn dagelijks werk, maar ik probeer nog altijd op de hoogte te blijven van de laatste ontwikkelingen op ons vakgebied en deze toe te passen bij hobby projecten. Op dit moment ligt mijn focus vooral op Security/Common Ground/ITIL processen/a11y/etc.&lt;/p&gt;
  3299. &lt;p&gt;Hopelijk treffen we elkaar binnenkort een keer bij een bijeenkomst ergens in Nederland of België.&lt;/p&gt;
  3300. </content>
  3301.  </entry>
  3302.  <entry>
  3303.    <title>Fronteers Boekenclub 3 - Design For The Real World</title>
  3304.    <link href="https://www.fronteers.nl/nl/blog/2022/10/fronteers-boekenclub-3-papanek-design-for-the-real-world"/>
  3305.    <updated>2022-10-29T00:00:00Z</updated>
  3306.    <id>https://www.fronteers.nl/nl/blog/2022/10/fronteers-boekenclub-3-papanek-design-for-the-real-world</id>
  3307.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 25 oktober bespraken we bij de derde Fronteers Boekenclub het boek &lt;a href=&quot;https://thamesandhudson.com/design-for-the-real-world-9780500295335&quot;&gt;&amp;quot;Design for the Real World&amp;quot; van Victor Papanek&lt;/a&gt;.&lt;/p&gt;
  3308. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/papanek-design-for-the-real-world-200w.jpg&quot; alt=&quot;Boekomslag voor &amp;quot;Design For The Real World&amp;quot; waarin de boektitel als losse woorden tussen een zin staat. De zin luidt: &amp;quot;Design is composing an epic poem, executing a mural, painting a masterpiece, writing a concerto. But design is also cleaning and reorganizing a desk drawer, pulling an impacted tooth, baking an apple pie, choosing sides for a backlot baseball game, and educating a child&amp;quot;&quot; /&gt;&lt;/p&gt;
  3309. &lt;p&gt;Bij de derde editie van de Fronteers boekenclub lazen we Design For The Real World van Victor Papanek. Het lukte bijna niemand van ons om het boek van kaft tot kaft uit te lezen. Dat lag niet aan de inhoud, maar wel aan de schrijfstijl en verouderde voorbeelden.&lt;/p&gt;
  3310. &lt;h2&gt;Over het boek&lt;/h2&gt;
  3311. &lt;p&gt;We hadden eigenlijk exact moeten afspreken welke editie we gingen lezen. Want er zijn nogal wat verschillende edities geweest van dit boek. Ik zelf had de derde editie uit 1985 (394 pagina’s, uitgever: Thames &amp;amp; Hudson).
  3312. De eerste editie stamt uit 1971. Het is dus een loei-oud boek. Volgens sommigen is het een klassieker, voor anderen een verouderd boek.&lt;/p&gt;
  3313. &lt;h2&gt;Wat we ervan vonden&lt;/h2&gt;
  3314. &lt;p&gt;Tja. We waren het erover eens dat de boodschap van het boek absoluut de moeite waard is. Maar de schrijfstijl laat te wensen over.&lt;/p&gt;
  3315. &lt;p&gt;&lt;em&gt;Liesbeth&lt;/em&gt;: Als ik het eindcijfer mag splitsen, dan geef ik het 2 sterren vanwege hoe slecht ik er doorheen kon komen en 5 sterren voor de hoofdboodschap. Die is komt eigenlijk gewoon neer op: “Design geen zinloze dingen”. Dat is een open deur misschien maar wel waar natuurlijk. Het boek begon enthousiast, maar zakte daarna in.&lt;/p&gt;
  3316. &lt;p&gt;&lt;em&gt;Adam&lt;/em&gt;: Ik ben geen designer. Maar ik sluit me daarbij aan. 2 sterren voor de leesbaarheid. 4 voor de hoofdboodschap. Het manifest met 7 consumentenrechten op het einde van het boek spreekt me wel aan. Dat hebben we meer nodig.
  3317. Een veel beter boek over design is ‘The Design of Everyday Things’ van Donald Norman. Dat leert je beter kijken naar ontwerp dan dit boek.&lt;/p&gt;
  3318. &lt;p&gt;&lt;em&gt;Nina&lt;/em&gt;: Ik ben eigenlijk verbaasd over de tijdloosheid van het boek. Van mij krijgt het boek 5 sterren. Vooral vanwege de visie van Papanek in die tijd en de tijdloosheid van zijn ideeën. Waarom is met deze ideeën nog zo weinig gedaan? Het is zo oud, en nog lijkt er niks veranderd bij bedrijven of bij ontwerpers. Waarom hebben we nog geen consumer manifesto? Voor mij was een eye-opener het hoofdstuk over alle verschillende blokkades. Welke factoren houden ons tegen bij nieuwe en innovatieve manieren om te ontwerpen. We zien niet allemaal hetzelfde. Papanek beschrijft die bekende &lt;a href=&quot;http://home.snu.edu/~hculbert/see.htm&quot;&gt;tekening waar je een oude vrouw of een jong meisje&lt;/a&gt; in kunt zien.&lt;/p&gt;
  3319. &lt;p&gt;&lt;em&gt;Paul&lt;/em&gt;: Ik geef het 3 sterren van de 5. Ik vond het een gedateerd, belegen boek. Het zou de leesbaarheid geholpen hebben als niet alle voorbeelden willekeurig gekozen leken. En het zou geweldig zijn geweest als de hoofdstukken een duidelijke samenvatting hadden gehad. Het lijkt ook wel alsof er maar twee soorten design bestaan in dit boek. Namelijk aan de ene kant het werk van Papanek. En aan de andere kant de rest, met slecht werk.&lt;/p&gt;
  3320. &lt;h2&gt;FBC4: dinsdag 13 december&lt;/h2&gt;
  3321. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/de-it-girl-cover.png&quot; alt=&quot;Boekomslag. Chantal Schinkels: &amp;quot;De IT Girl - hoe overleef je een door mannen gedomineerde werkvloer&amp;quot;. Uitgegeven door Van Duuren Management&quot; /&gt;&lt;/p&gt;
  3322. &lt;p&gt;Bij de vierde aflevering bespreken we &lt;a href=&quot;https://chantalschinkels.nl/de-it-girl/&quot;&gt;‘De IT-Girl’ van Chantal Schinkels&lt;/a&gt;, met als ondertitel ‘Hoe overleef je een door mannen gedomineerde werkvloer’. &amp;quot;Dit boek vertelt het eerlijke verhaal wat er momenteel in de Nederlandse tech sector afspeelt en wat we kunnen doen om daar verandering te brengen.&amp;quot;&lt;/p&gt;
  3323. &lt;p&gt;&lt;a href=&quot;https://www.meetup.com/fronteers-nl/events/289337720/&quot;&gt;Aanmelden via Meetup&lt;/a&gt;&lt;/p&gt;
  3324. </content>
  3325.  </entry>
  3326.  <entry>
  3327.    <title>Schrijf mee aan de Fronteers Adventskalender 2022!</title>
  3328.    <link href="https://www.fronteers.nl/nl/blog/2022/09/schrijf-mee-aan-de-fronteers-adventskalender-2022"/>
  3329.    <updated>2022-09-29T00:00:00Z</updated>
  3330.    <id>https://www.fronteers.nl/nl/blog/2022/09/schrijf-mee-aan-de-fronteers-adventskalender-2022</id>
  3331.    <content xml:lang="nl" type="html">&lt;p&gt;In december keert de Fronteers Adventskalender terug. 24 blogs van 24 schrijvers over alles dat met front-end (en Fronteers) te maken heeft. En de schrijvers mogen een donatie van 75 euro uit de verenigingskas doen aan een goed doel naar keuze.&lt;/p&gt;
  3332. &lt;p&gt;Tot 14 oktober kan iedereen zich aanmelden om een blog te schrijven. De deadline voor de bijdrages is 14 november. Je mag schrijven over elk onderwerp dat front-end gerelateerd is. Misschien heb je wel goede voornemens voor 2023 of wil je graag een terugblik op het afgelopen jaar maken. Heb je een belangrijke ontdekking gedaan, wil je iets wat je zelf hebt geleerd met iedereen delen? Je kunt ook een pleidooi maken voor jouw favoriete framework of een lijstje van tools/artikelen die jij op dit moment belangrijk vindt. Of misschien wil je graag schrijven over jouw ervaringen als front-end developer en waarom dit het mooiste werk van de wereld is. Denk ook eens aan het schrijven van een review, bijvoorbeeld over een Fronteers congres of workshop.&lt;/p&gt;
  3333. &lt;p&gt;Wil je graag meeschrijven? Meld je dan voor 14 oktober aan, voor vragen kun je natuurlijk op het Fronteers Slack-kanaal terecht.&lt;/p&gt;
  3334. </content>
  3335.  </entry>
  3336.  <entry>
  3337.    <title>Meld je aan voor de ALV 2022!</title>
  3338.    <link href="https://www.fronteers.nl/nl/blog/2022/09/meld-je-aan-voor-de-alv-2022"/>
  3339.    <updated>2022-09-29T00:00:00Z</updated>
  3340.    <id>https://www.fronteers.nl/nl/blog/2022/09/meld-je-aan-voor-de-alv-2022</id>
  3341.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdagavond 4 november vanaf 19:30 houden we onze jaarlijkse algemene ledenvergadering (ALV)! Alle leden zijn hiervoor van harte uitgenodigd, en we hopen nieuwe bestuursleden te verwelkomen!&lt;/p&gt;
  3342. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2022/09/meld-je-aan-voor-de-alv-2022#english-version&quot;&gt;English version&lt;/a&gt; below.&lt;/p&gt;
  3343. &lt;p&gt;Is het je eerste keer op de (of überhaupt een) ALV? Tijdens de ALV nemen we als bestuur, vrijwilligers en leden samen de (financiële) staat van Fronteers door, en evalueren we hoe het gaat met de vereniging. Tot het begin van de vergadering kan elk lid een voorstel doen voor een agendapunt of een ter stemming te brengen onderwerp.&lt;/p&gt;
  3344. &lt;p&gt;Het staat leden tot het begin van de ALV vrij voorstellen voor de agenda in te dienen. De voorlopige agenda staat hieronder. Wat in ieder geval zal worden behandeld zijn de jaarstukken van de vereniging over 2021, de financiën over 2022 en de nieuwe begroting voor 2023. Deze stukken zullen enkele dagen voor de ALV naar alle aangemelde aanwezigen worden opgestuurd. Mocht je niet aanwezig kunnen zijn, maar deze informatie wel willen inzien: laat het ons weten!
  3345. Notulen van de avond worden altijd zo snel mogelijk na de vergadering online gedeeld.&lt;/p&gt;
  3346. &lt;p&gt;We zijn bovendien op zoek naar nieuwe bestuursleden om vanaf de komende ALV het stokje over te nemen van Sander Vink (penningmeester) en Anneke Sinnema (voorzitster). Leden kunnen zich kandidaat stellen tijdens de ALV waarna er een stemming volgt. Als bestuurslid help je mee de vereniging op de kaart te zetten en te houden. Je zorgt er voor dat commissies een zetje krijgen en dat vrijwilligers het zelfvertrouwen hebben om activiteiten te ontplooien voor de vereniging. We hebben de ambitie om weer vaker meetups en activiteiten te organiseren, zetten graag het Fronteerscongres voort, en bouwen door aan onze nieuwe website. Anneke, Sander en Edwin staan je graag te woord via Slack of bestuur@fronteers.nl als je ons hierin wilt helpen!&lt;/p&gt;
  3347. &lt;h2&gt;Voorlopige agenda&lt;/h2&gt;
  3348. &lt;ul&gt;
  3349. &lt;li&gt;Opening&lt;/li&gt;
  3350. &lt;li&gt;Jaarrekening 2021&lt;/li&gt;
  3351. &lt;li&gt;Bevindingen kascommissie&lt;/li&gt;
  3352. &lt;li&gt;Benoeming nieuwe kascommissie&lt;/li&gt;
  3353. &lt;li&gt;Financiën 2022&lt;/li&gt;
  3354. &lt;li&gt;Begroting 2023&lt;/li&gt;
  3355. &lt;li&gt;Benoeming nieuwe bestuursleden&lt;/li&gt;
  3356. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  3357. &lt;li&gt;Rondvraag&lt;/li&gt;
  3358. &lt;li&gt;Sluiting&lt;/li&gt;
  3359. &lt;/ul&gt;
  3360. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  3361. &lt;p&gt;Ben je van plan te komen, dan vragen we je vriendelijk je hiervoor in te schrijven, zodat we voorzieningen kunnen treffen voor de avond zelf.&lt;/p&gt;
  3362. &lt;h2&gt;English version&lt;/h2&gt;
  3363. &lt;p&gt;&lt;strong&gt;Wednesday evening, the 4th of November starting at 19:30 we will have our annual membership meeting (ALV)! All members of Fronteers are welcome to sign up to join us.&lt;/strong&gt;&lt;/p&gt;
  3364. &lt;p&gt;Is this your first time at the (or an) ALV (membership meeting)? The legal form of Fronteers is a dutch &#39;vereniging&#39;, which means we are obligated to have a meeting once a year with the board, volunteers and members to present and discuss the (financial) state of Fronteers. We will evaluate how Fronteers is doing and discuss what we can do to improve. Until the actual start of the meeting, any member can propose a topic for the agenda to be discussed and voted on by all present members.&lt;/p&gt;
  3365. &lt;p&gt;We are also looking for new board members to take over from Sander Vink (treasurer) and Anneke Sinnema (chairwoman). Members can nominate themselves during the meeting, after which a vote will follow. As a board member you help to put and keep the association on the map. You ensure that committees are given a boost and that volunteers have the confidence to develop activities and take initiative. Anneke, Sander and Edwin are happy to speak to you via Slack or bestuur@fronteers.nl if you are interested!&lt;/p&gt;
  3366. &lt;p&gt;Below, you&#39;ll find the provisional program of the evening. The financial documents of 2021, 2022 and plans for 2023 will be discussed and sent in advance to everyone that signed up for the ALV. If you can&#39;t attend but (as a member) want to get a copy of the documents, please &lt;a href=&quot;mailto:penningmeester@fronteers.nl&quot;&gt;send an e-mail to our treasurer&lt;/a&gt;.&lt;/p&gt;
  3367. &lt;h2&gt;(Provisional) Agenda&lt;/h2&gt;
  3368. &lt;ul&gt;
  3369. &lt;li&gt;Opening&lt;/li&gt;
  3370. &lt;li&gt;Financial Statements 2021&lt;/li&gt;
  3371. &lt;li&gt;Findings of the treasury committee&lt;/li&gt;
  3372. &lt;li&gt;Naming of the new treasury committee&lt;/li&gt;
  3373. &lt;li&gt;Finances of 2022&lt;/li&gt;
  3374. &lt;li&gt;Budget for 2023&lt;/li&gt;
  3375. &lt;li&gt;Appointment of new board members&lt;/li&gt;
  3376. &lt;li&gt;Report of committees&lt;/li&gt;
  3377. &lt;li&gt;Round of questions&lt;/li&gt;
  3378. &lt;li&gt;Close&lt;/li&gt;
  3379. &lt;/ul&gt;
  3380. &lt;h2&gt;Sign up&lt;/h2&gt;
  3381. &lt;p&gt;If you plan to attend, please sign up, so we know how many members we can expect to join us and if we need to make provisions for a meeting in real life!&lt;/p&gt;
  3382. </content>
  3383.  </entry>
  3384.  <entry>
  3385.    <title>Fronteers Conference op 9 september 2022</title>
  3386.    <link href="https://www.fronteers.nl/nl/blog/2022/08/fronteers-conference-op-9-september-2022"/>
  3387.    <updated>2022-08-30T00:00:00Z</updated>
  3388.    <id>https://www.fronteers.nl/nl/blog/2022/08/fronteers-conference-op-9-september-2022</id>
  3389.    <content xml:lang="nl" type="html">&lt;p&gt;Nog anderhalve week te gaan totdat Fronteers Conference 2022 van start gaat op vrijdag 9 september, en er zijn nog kaarten verkrijgbaar! Locatie: Pathé Leidsche Rijn in Utrecht.&lt;/p&gt;
  3390. &lt;p&gt;Onze sprekers brengen je helemaal up-to-date op het gebied van CSS, privacy, performance, typografie, en zetten je aan het denken op het gebied van het design proces en accessibility:&lt;/p&gt;
  3391. &lt;ul&gt;
  3392. &lt;li&gt;Bramus Van Damme&lt;/li&gt;
  3393. &lt;li&gt;Robin Marx&lt;/li&gt;
  3394. &lt;li&gt;Maud Nalpas&lt;/li&gt;
  3395. &lt;li&gt;Marie Van Driessche&lt;/li&gt;
  3396. &lt;li&gt;Ulrike Rausch&lt;/li&gt;
  3397. &lt;li&gt;Manuel Matuzović&lt;/li&gt;
  3398. &lt;/ul&gt;
  3399. &lt;p&gt;En als onze &amp;quot;Master of Ceremonies&amp;quot;, Floor Drees!&lt;/p&gt;
  3400. &lt;p&gt;Dit jaar dus een andere locatie en wat kleinschaliger, maar daar zit natuurlijk een gedachte achter. Nieuwsgierig? Lees dan &lt;a href=&quot;https://twitter.com/derSchepp/status/1562377149465731072&quot;&gt;de tweet van een van onze organisatoren Christian&lt;/a&gt; (let op, content in het Engels).&lt;/p&gt;
  3401. &lt;p&gt;Meer informatie over de sprekers, de MC, de talks en kaarten kun je vinden op: &lt;a href=&quot;https://fronteersconf.org/&quot;&gt;fronteersconf.org&lt;/a&gt;.&lt;/p&gt;
  3402. &lt;p&gt;Wij kijken er ontzettend naar uit je daar te zien. Ben jij erbij?&lt;/p&gt;
  3403. </content>
  3404.  </entry>
  3405.  <entry>
  3406.    <title>Fronteers Boekenclub 2 - How Design Makes The World</title>
  3407.    <link href="https://www.fronteers.nl/nl/blog/2022/06/fronteers-boekenclub-2-design-makes-the-world"/>
  3408.    <updated>2022-06-12T00:00:00Z</updated>
  3409.    <id>https://www.fronteers.nl/nl/blog/2022/06/fronteers-boekenclub-2-design-makes-the-world</id>
  3410.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 7 juni bespraken we bij de Fronteers Boekenclub het boek &lt;a href=&quot;https://designmtw.com/&quot;&gt;&amp;quot;How Design Makes The World&amp;quot; van Scott Berkun&lt;/a&gt;.&lt;/p&gt;
  3411. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/omslag-design-makes-the-world-scott-berkun-200w.jpg&quot; alt=&quot;Boekomslag voor &amp;quot;How Design Makes The World&amp;quot;. Sommige letters zijn vervangen door producten als een hamburger, autowiel, Lego, de Eiffeltoren en een iPhone.&quot; /&gt;&lt;/p&gt;
  3412. &lt;p&gt;Dit was de tweede keer dat we een boek bespraken. Leonard, Nina en Paul waardeerden het boek, al was de een enthousiaster dan de ander. De blurb beschrijft dit boek met:&lt;/p&gt;
  3413. &lt;blockquote&gt;
  3414. &lt;p&gt;Everything we use, from social media, to our homes, to our highways, was designed by someone. What did they get right and where have they let us down? And how can we apply the lessons to what we make?&lt;/p&gt;
  3415. &lt;/blockquote&gt;
  3416. &lt;h2&gt;Over het boek&lt;/h2&gt;
  3417. &lt;p&gt;Berkun is designer en product-owner bij WordPress-bedrijf Automattic en hij heeft meer boeken geschreven, onder meer ‘A Year Without Pants’ over remote werken. Design Makes The World gaat over heel veel verschillende onderwerpen met als rode draad: “Alles is het resultaat van ontwerpbeslissingen.” Voor sommigen is dat een open deur, voor anderen is dit een eye-opener. Ik zei ‘open deur’, en inderdaad: uiteraard komen &lt;a href=&quot;https://99percentinvisible.org/article/norman-doors-dont-know-whether-push-pull-blame-design/&quot;&gt;Norman doors&lt;/a&gt; ter sprake.&lt;/p&gt;
  3418. &lt;p&gt;Het is een niet al te dik boek met nogal een groot notenapparaat en index. Dus het leest rap weg. Het meandert alle kanten op en heeft een brede horizon aan onderwerpen. Dat maakt het misschien wat lastig om samen te vatten. Maar wat mij betreft is het belangrijkste punt van het boek dat er niet zoiets zwart-wits bestaat als ‘goed design’. Bij het beoordelen van iets wat je gaat ontwerpen, kun je jezelf deze vragen stellen:&lt;/p&gt;
  3419. &lt;ul&gt;
  3420. &lt;li&gt;Wat wil je verbeteren?&lt;/li&gt;
  3421. &lt;li&gt;Voor wie wil je dit verbeteren?&lt;/li&gt;
  3422. &lt;li&gt;Op basis van welke criteria kun je dit succesvol noemen?&lt;/li&gt;
  3423. &lt;li&gt;Wie zou last kunnen krijgen van je ontwerp-beslissingen?&lt;/li&gt;
  3424. &lt;/ul&gt;
  3425. &lt;h2&gt;Wat we ervan vonden&lt;/h2&gt;
  3426. &lt;p&gt;We waren het eens over de leesbaarheid van het boek. Leuk geschreven, interessante voorbeelden en de vragen die je jezelf kunt stellen zijn nuttiger dan alleen ‘is het goed design’.&lt;/p&gt;
  3427. &lt;p&gt;&lt;em&gt;Nina&lt;/em&gt;: Ik twijfelde tussen 4 of 5 sterren en ik geef het uiteindelijk vier sterren. Het boek heeft me een nieuwe kijk op de wereld gegeven. Alles is ontworpen. Ik wist dat wel, maar niet zo bewust. Het maakte me ook boos, vooral de voorbeelden hoe zaken soms met opzet onethisch worden ontworpen. We moeten meer tijd nemen om na te denken over de gevolgen van onze ontwerpbeslissingen. Inclusief ontwerpen is echt heel belangrijk. De checklist uit dit boek is nuttig en zal ik nog wel vaker gaan gebruiken.&lt;/p&gt;
  3428. &lt;p&gt;&lt;em&gt;Leonard&lt;/em&gt;: Ik heb dit als luisterboek gelezen. Fijn boek, veel interessante onderwerpen. Ik kan nog niet echt voorbeelden geven van dingen die ik later nog eens kan hergebruiken. Het is geen boek met oplossingen; eerder is het de ontstaansgeschiedenis van dingen om ons heen met een verklaring waarom ze zijn zoals ze zijn. Ik leerde iets het ontstaan van ‘&lt;a href=&quot;https://en.wikipedia.org/wiki/Planned_obsolescence&quot;&gt;planned obsolesence&lt;/a&gt;’: waarom bijvoorbeeld autofabrikanten elk jaar een nieuwe auto uitbrengen. Ik ben me nu meer bewust van de strijd die soms geleverd moet worden om iets wat goed ontworpen is en goed voor de mensen is, ook echt op de markt te krijgen.&lt;/p&gt;
  3429. &lt;p&gt;&lt;em&gt;Paul&lt;/em&gt;: ik dub tussen 3 of 4 sterren. Laten we er 4 van maken. Ik vond het toch wel een potpourri met allerlei leuke feitjes die uiteindelijk ook iets met design te maken hadden. Pas op het eind werd het nuttig in hoofdstuk 19 (solutions create problems). Daar onstonden pas nieuwe inzichten voor me. Als in: &amp;quot;Most design is redesign: applying what we know now to design choices made before us&amp;quot;. Ik vond het leuk dat Berkun verwees naar &lt;a href=&quot;https://www.mijksenaar.com/project/amsterdam-airport-schiphol-2-2/&quot;&gt;de bewegwijzering op Schiphol&lt;/a&gt; en breder nog, naar Nederland als land met een grote design-traditie. Dat zorgt inderdaad voor meer samenhang en duidelijkheid in een samenleving.&lt;/p&gt;
  3430. &lt;h2&gt;FBC3: dinsdag 6 september&lt;/h2&gt;
  3431. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/papanek-design-for-the-real-world-200w.jpg&quot; alt=&quot;Boekomslag voor &amp;quot;Design For The Real World&amp;quot; waarin de boektitel als losse woorden tussen een zin staat. De zin luidt: &amp;quot;Design is composing an epic poem, executing a mural, painting a masterpiece, writing a concerto. But design is also cleaning and reorganizing a desk drawer, pulling an impacted tooth, baking an apple pie, choosing sides for a backlot baseball game, and educating a child&amp;quot;&quot; /&gt;&lt;/p&gt;
  3432. &lt;p&gt;De derde aflevering van de Fronteers Boekenclub is op dinsdag 6 september tussen 20:00 en 21:30. Dan lezen we een klassieker uit 1971, namelijk Victor Papanek: “Design For The Real World”. Weer een boek over design, ja. Er begint een rode lijn te ontstaan.&lt;/p&gt;
  3433. &lt;p&gt;&lt;a href=&quot;https://www.meetup.com/fronteers-nl/events/286424272/&quot;&gt;Meld je aan voor het meelezen via Meetup&lt;/a&gt;.&lt;/p&gt;
  3434. </content>
  3435.  </entry>
  3436.  <entry>
  3437.    <title>Fronteers is op zoek naar nieuwe bestuursleden!</title>
  3438.    <link href="https://www.fronteers.nl/nl/blog/2022/04/fronteers-is-op-zoek-naar-nieuwe-bestuursleden"/>
  3439.    <updated>2022-04-22T00:00:00Z</updated>
  3440.    <id>https://www.fronteers.nl/nl/blog/2022/04/fronteers-is-op-zoek-naar-nieuwe-bestuursleden</id>
  3441.    <content xml:lang="nl" type="html">&lt;p&gt;Wil jij graag Fronteers naar een hoger niveau tillen, ben je initiatiefrijk en hou je er van anderen te enthousiasmeren? Dan zijn we op zoek naar jou voor het bestuur van de vereniging!&lt;/p&gt;
  3442. &lt;figure class=&quot;simple-quote&quot;&gt;
  3443.    &lt;div class=&quot;simple-quote_decorative-start&quot; aria-hidden=&quot;true&quot;&gt;{&lt;/div&gt;
  3444.        &lt;div class=&quot;simple-quote-content&quot;&gt;
  3445.            &lt;blockquote&gt;
  3446.                Als je in het bestuur zit geef je front-end ontwikkelaars in heel Nederland een stem
  3447.            &lt;/blockquote&gt;
  3448.            &lt;figcaption class=&quot;simple-quote-author&quot;&gt;— Anneke Sinnema&lt;/figcaption&gt;
  3449.        &lt;/div&gt;
  3450.    &lt;div class=&quot;simple-quote_decorative-end&quot; aria-hidden=&quot;true&quot;&gt;}&lt;/div&gt;
  3451. &lt;/figure&gt;
  3452. Als bestuurslid help je mee de vereniging op de kaart te zetten en te houden. Je zorgt er voor dat commissies een zetje krijgen en dat vrijwilligers het zelfvertrouwen hebben om activiteiten te ontplooien voor de vereniging. We hebben de ambitie om weer vaker meetups en activiteiten te organiseren, verlangen naar continuiteit voor het Fronteerscongres, en bouwen door aan onze nieuwe website.
  3453. &lt;p&gt;Fronteers zoekt in ieder geval nieuwe bestuursleden om vanaf de komende ALV het stokje over te nemen van Sander Vink (penningmeester) en Anneke Sinnema (voorzitster). Bij interesse gaan we graag eens het gesprek met je aan. Stuur een &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;e-mail naar het bestuur&lt;/a&gt; of stuur een DM naar Anneke, Sander of Edwin via onze Slack. We verwachten wel dat vrijwilligers (en in het verlengde bestuursleden) lid zijn van Fronteers.&lt;/p&gt;
  3454. &lt;h3 class=&quot;h&quot;&gt;
  3455.    &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/bestuur&quot; target=&quot;_blank&quot;&gt;LEES DE NOTULEN&lt;/a&gt;
  3456. &lt;/h3&gt;
  3457. &lt;a class=&quot;curly-braces-bg banner_component&quot; style=&quot;background-image: url()&quot; href=&quot;https://www.fronteers.nl/nl/vereniging/bestuur&quot; target=&quot;_blank&quot;&gt;
  3458.    &lt;span class=&quot;visually-hidden&quot;&gt;lees meer over het bestuur&lt;/span&gt;
  3459.    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; width=&quot;72&quot; height=&quot;72&quot; viewBox=&quot;0 0 72 72&quot; aria-hidden=&quot;true&quot;&gt;
  3460. &lt;defs&gt;
  3461.  &lt;clipPath id=&quot;clip-Button_play&quot;&gt;
  3462.    &lt;rect width=&quot;72&quot; height=&quot;72&quot;&gt;&lt;/rect&gt;
  3463.  &lt;/clipPath&gt;
  3464. &lt;/defs&gt;
  3465. &lt;g id=&quot;Button_play&quot; clip-path=&quot;url(#clip-Button_play)&quot;&gt;
  3466.  &lt;rect width=&quot;72&quot; height=&quot;72&quot; fill=&quot;transparent&quot;&gt;&lt;/rect&gt;
  3467.  &lt;g id=&quot;Group_503&quot; data-name=&quot;Group 503&quot; transform=&quot;translate(-0.204)&quot;&gt;
  3468.    &lt;circle id=&quot;Ellipse_4&quot; data-name=&quot;Ellipse 4&quot; cx=&quot;36&quot; cy=&quot;36&quot; r=&quot;36&quot; transform=&quot;translate(0.204)&quot; fill=&quot;#fe796a&quot;&gt;&lt;/circle&gt;
  3469.    &lt;path id=&quot;Path_120&quot; data-name=&quot;Path 120&quot; d=&quot;M35.213,0V13.347L17.606,25.291,0,13.347V0Z&quot; transform=&quot;translate(26.874 53.282) rotate(-90)&quot;&gt;&lt;/path&gt;
  3470.  &lt;/g&gt;
  3471. &lt;/g&gt;
  3472. &lt;/svg&gt;
  3473. &lt;/a&gt;
  3474. &lt;style&gt;
  3475. .banner_component {
  3476.  display: flex;
  3477.  place-content: center;
  3478.  flex-wrap: wrap;
  3479.  min-height: 250px;
  3480.  inline-size: 70%;
  3481.  background-repeat: no-repeat;
  3482.  background-position: center;
  3483.  background-size: cover;
  3484. }
  3485. .content-wrapper .banner_component {
  3486.  margin-block-end: var(--spacing);
  3487.  display: inline-flex;
  3488. }
  3489.  
  3490. @media all and (min-width: 46.875em) {
  3491.    .content-wrapper .banner_component {
  3492.        inline-size: 110%;
  3493.        transform: translateX(-5%);
  3494.    }
  3495. }
  3496.  
  3497. .banner_component::after {
  3498.  content: &quot; &quot;;
  3499.  inline-size: 100%;
  3500.  block-size: 100%;
  3501.  z-index: 1;
  3502.  position: absolute;
  3503.  background: rgba(0, 0, 0, 0.3);
  3504.  top: 0;
  3505. }
  3506.  
  3507. .banner_component svg {
  3508.  z-index: 2;
  3509. }
  3510.  
  3511. .banner_component:hover svg circle,
  3512. .banner_component:focus svg circle {
  3513.  fill: var(--purple);
  3514. }
  3515.  
  3516. .banner_component:hover svg path,
  3517. .banner_component:focus svg path {
  3518.  fill: white;
  3519. }
  3520.  
  3521. .banner_component .visually-hidden {
  3522.  clip: rect(0 0 0 0);
  3523.  clip-path: inset(50%);
  3524.  block-size: 1px;
  3525.  overflow: hidden;
  3526.  position: absolute;
  3527.  white-space: nowrap;
  3528.  inline-size: 1px;
  3529. }
  3530. @media all and (max-width: 46.874em) {
  3531.  .banner_component {
  3532.    -webkit-clip-path: none;
  3533.    clip-path: none;
  3534.    padding: var(--spacing) 6%;
  3535.    min-height: 30vh;
  3536.    width: 100%;
  3537.  }
  3538. }
  3539. &lt;/style&gt;</content>
  3540.  </entry>
  3541.  <entry>
  3542.    <title>Nieuw: de Fronteers boekenclub</title>
  3543.    <link href="https://www.fronteers.nl/nl/blog/2022/04/de-eerste-editie-van-de-fronteers-boekenclub"/>
  3544.    <updated>2022-04-08T00:00:00Z</updated>
  3545.    <id>https://www.fronteers.nl/nl/blog/2022/04/de-eerste-editie-van-de-fronteers-boekenclub</id>
  3546.    <content xml:lang="nl" type="html">&lt;p&gt;Afgelopen dinsdag was de eerste editie van de Fronteers boekenclub. Om de -zeg- 3 maanden bespreken we een boek, enigszins relevant voor ons vakgebied en kiezen we een nieuw boek uit voor de volgende keer. Lees je mee de volgende keer?&lt;/p&gt;
  3547. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/ethicaldesignhandbook.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  3548. &lt;p&gt;Bij de eerste editie van de Fronteers Boekenclub bespraken we ‘&lt;a href=&quot;https://ethicaldesignhandbook.com/&quot;&gt;The Ethical Design Handbook&lt;/a&gt;’. We waren met z’n drieën en we waren eensgezind in ons oordeel over het boek: 3 uit 5 sterren. Het is net te oppervlakkig of niet praktisch genoeg. Voor mensen die niet veel te maken hebben gehad met ethische vragen zou het wel een eye-opener kunnen zijn.&lt;/p&gt;
  3549. &lt;p&gt;&lt;em&gt;Nina&lt;/em&gt;: het is geen boek dat ik zou aanraden om iemand bewuster te maken van ethische kanten van design of development. Daarvoor is het net te oppervlakkig. Ik heb wel een paar nieuwe inzichten gehad.&lt;/p&gt;
  3550. &lt;p&gt;Het stuk over cookie-waarschuwingen bijvoorbeeld was goed: het maakte duidelijk waarom cookie-waarschuwingen bedoeld zijn en waarom het zo moeilijk is om het ethisch goed te doen.&lt;/p&gt;
  3551. &lt;p&gt;Ik ben me ook bewuster geworden van ‘dark patterns’. Ik verwacht niet dat ik in mijn dagelijkse praktijk veel heb aan dit boek. Het stuk over datamodellen en processen vond ik bijvoorbeeld te kort door de bocht om in de praktijk te kunnen gebruiken.&lt;/p&gt;
  3552. &lt;p&gt;&lt;em&gt;Hidde&lt;/em&gt;: Het boek deed een beetje bijeengeraapt aan, met soms vage definities en vaak beperkte argumentatie. Ik vond het beter worden naarmate het praktischer werd, aan het einde. De best practices waren het beste gedeelte van het boek, al bleven ze vrij algemeen en beknopt.&lt;/p&gt;
  3553. &lt;p&gt;De auteurs hielden een vrij specifieke definitie van ethiek aan, namelijk het centraal stellen van de mens en respect voor de mens. Het vakgebied ethiek kijkt vaak breder, bijvoorbeeld naar vragen als “hoe moet ik handelen?” en “wat zijn de gevolgen van handelen?”.&lt;/p&gt;
  3554. &lt;p&gt;De focus op respect en de voorbeelden waren goed gekozen om ethiek toepasbaar te maken binnen organisaties, maar bij bijvoorbeeld “ethical KPIs” (leuk gevonden!) als “gebruikerstevredenheid” miste ik een uitkijk naar gevolgen: wat als gebruikers van een ontwerp tevreden zijn ten koste van de arbeidssituatie van anderen, zoals bij sommige taxi-applicaties?&lt;/p&gt;
  3555. &lt;p&gt;&lt;em&gt;Paul&lt;/em&gt;: Ik zie ethisch denken als een spier die je regelmatig moet oefenen. Dit boek levert geen oefeningen op om die spier te trainen, maar het levert wel de redenen waarom je zou moeten trainen.&lt;/p&gt;
  3556. &lt;p&gt;Knap vind ik dat het boek positief ingesteld blijft, ondanks de enorme hoeveelheid ethische blunders die ze hadden kunnen noemen.&lt;/p&gt;
  3557. &lt;p&gt;De tussenstukken ‘uit de praktijk’ vond ik een goede toevoeging. Ik was erg blij toen ik het stuk las over Ling van Ling’s Cars: &#39;I soon realized that brutal honesty was needed when talking to new car buyers, which isn’t the normal approach to ethics and corporate standards. I’d describe my ethics as honesty wrapped in a boxing glove.&#39;&lt;/p&gt;
  3558. &lt;p&gt;&lt;em&gt;Het volgende boek dat we gaan fileren is &lt;a href=&quot;https://designmtw.com/buy/&quot;&gt;&#39;How Design Makes the World&#39;&lt;/a&gt; van Scott Berkun.&lt;/em&gt;&lt;/p&gt;
  3559. &lt;p&gt;&lt;em&gt;Meedoen? Meld je bij Paul van Buuren via de Fronteers Slack of meld je aan &lt;a href=&quot;https://www.meetup.com/Fronteers-NL/events/285086437/&quot;&gt;via meetup.com voor de volgende editie online meetup&lt;/a&gt;&lt;/em&gt;.&lt;/p&gt;
  3560. &lt;p&gt;&lt;em&gt;Sowieso: schrijf je (gratis) in als lid van de &lt;a href=&quot;https://www.meetup.com/Fronteers-NL/&quot;&gt;Fronteers Meetup-groep&lt;/a&gt; om op de hoogte gehouden te worden.&lt;/em&gt;&lt;/p&gt;
  3561. </content>
  3562.  </entry>
  3563.  <entry>
  3564.    <title>Meld je aan voor de ALV 2021</title>
  3565.    <link href="https://www.fronteers.nl/nl/blog/2021/10/meld-je-aan-voor-de-alv-2021"/>
  3566.    <updated>2021-10-08T00:00:00Z</updated>
  3567.    <id>https://www.fronteers.nl/nl/blog/2021/10/meld-je-aan-voor-de-alv-2021</id>
  3568.    <content xml:lang="nl" type="html">&lt;p&gt;Op maandagavond 25 oktober vanaf 20:00 houden we onze jaarlijkse algemene ledenvergadering (ALV)! Alle leden zijn hiervoor van harte uitgenodigd. De vergadering vindt vanwege het Coronavirus opnieuw online plaats, via Jitsi Meet. Vooraf software installeren op je computer is niet nodig, mocht je willen inbellen vanaf je telefoon, dan zijn er apps beschikbaar voor &lt;a href=&quot;https://jitsi.org/downloads/&quot;&gt;Android, iOS en F-Droid&lt;/a&gt;!&lt;/p&gt;
  3569. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2021/10/meld-je-aan-voor-de-alv-2021#english-version&quot;&gt;English version&lt;/a&gt; below.&lt;/p&gt;
  3570. &lt;p&gt;Is het je eerste keer op de (of überhaupt een) ALV? Tijdens de ALV nemen we als bestuur, vrijwilligers en leden samen de (financiële) staat van Fronteers door, en evalueren we hoe het gaat met de vereniging. Tot het begin van de vergadering kan elk lid een voorstel doen voor een agendapunt of een ter stemming te brengen onderwerp.&lt;/p&gt;
  3571. &lt;p&gt;Het staat leden tot het begin van de ALV vrij voorstellen voor de agenda in te dienen. De voorlopige agenda staat hieronder. Wat in ieder geval zal worden behandeld zijn de jaarstukken van de vereniging over 2020, de financiën over 2021 en de nieuwe begroting voor 2022. Deze stukken zullen enkele dagen voor de ALV naar alle aangemelde aanwezigen worden opgestuurd. Mocht je niet aanwezig kunnen zijn, maar deze informatie wel willen inzien: &lt;a href=&quot;mailto:penningmeester@fronteers.nl&quot;&gt;laat het ons weten&lt;/a&gt;!&lt;/p&gt;
  3572. &lt;p&gt;Notulen van de avond worden altijd zo snel mogelijk na de vergadering online gedeeld.&lt;/p&gt;
  3573. &lt;h2&gt;Voorlopige agenda&lt;/h2&gt;
  3574. &lt;ul&gt;
  3575. &lt;li&gt;Opening&lt;/li&gt;
  3576. &lt;li&gt;Jaarrekening 2020&lt;/li&gt;
  3577. &lt;li&gt;Bevindingen kascommissie&lt;/li&gt;
  3578. &lt;li&gt;Benoeming nieuwe kascommissie&lt;/li&gt;
  3579. &lt;li&gt;Financiën 2021&lt;/li&gt;
  3580. &lt;li&gt;Begroting 2022&lt;/li&gt;
  3581. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  3582. &lt;li&gt;Stand van zaken nieuwe website&lt;/li&gt;
  3583. &lt;li&gt;Rondvraag&lt;/li&gt;
  3584. &lt;li&gt;Sluiting&lt;/li&gt;
  3585. &lt;/ul&gt;
  3586. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  3587. &lt;p&gt;Ben je van plan te komen, dan vragen we je vriendelijk je hieronder hiervoor in te schrijven, zodat we enigszins een idee hebben van de verwachte opkomst.&lt;/p&gt;
  3588. &lt;h2&gt;English version&lt;/h2&gt;
  3589. &lt;p&gt;&lt;em&gt;Monday evening, the 25th of October starting at 20:00 we will have our annual membership meeting (ALV)! All members of Fronteers are welcome to sign up to join us. Due to the Coronavirus, the meeting will take place completely online through Jitsi Meet. You don&#39;t need to install software or register to use this service, but if you want to participate on your phone there is an app available on &lt;a href=&quot;https://jitsi.org/downloads/&quot;&gt;Android, iOS en F-Droid&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
  3590. &lt;p&gt;Is this your first time at the (or an) ALV (membership meeting)? The legal form of Fronteers is a dutch &#39;vereniging&#39;, which means we are obligated to have a meeting once a year with the board, volunteers and members to present and discuss the (financial) state of Fronteers. We will evaluate how Fronteers is doing and discuss what we can do to improve. Until the actual start of the meeting, any member can propose a topic for the agenda to be discussed and voted on by all present members.&lt;/p&gt;
  3591. &lt;p&gt;Below, you&#39;ll find the provisional program of the evening. The financial documents of 2020, 2021 and 2022 will be discussed and sent in advance to everyone that signed up for the ALV. If you can&#39;t attend but (as a member) want to get a copy of the documents, please send an &lt;a href=&quot;mailto:penningmeester@fronteers.nl&quot;&gt;e-mail to our treasurer&lt;/a&gt;.&lt;/p&gt;
  3592. &lt;h2&gt;(Provisional) Agenda&lt;/h2&gt;
  3593. &lt;ul&gt;
  3594. &lt;li&gt;Opening&lt;/li&gt;
  3595. &lt;li&gt;Financial Statements 2020&lt;/li&gt;
  3596. &lt;li&gt;Findings of the treasury committee&lt;/li&gt;
  3597. &lt;li&gt;Naming of the new treasury committee&lt;/li&gt;
  3598. &lt;li&gt;Finances of 2021&lt;/li&gt;
  3599. &lt;li&gt;Budget for 2022&lt;/li&gt;
  3600. &lt;li&gt;Report of committees&lt;/li&gt;
  3601. &lt;li&gt;State of affairs new website&lt;/li&gt;
  3602. &lt;li&gt;Round of questions&lt;/li&gt;
  3603. &lt;li&gt;Close&lt;/li&gt;
  3604. &lt;/ul&gt;
  3605. &lt;h2&gt;Sign up&lt;/h2&gt;
  3606. &lt;p&gt;If you plan to attend, please sign up using the form below, so we know how many members we can expect to join us!&lt;/p&gt;
  3607. </content>
  3608.  </entry>
  3609.  <entry>
  3610.    <title>Een &amp;quot;that&#39;s all folks&amp;quot; animatie in CSS met slechts één div</title>
  3611.    <link href="https://www.fronteers.nl/nl/blog/2021/01/thats-all-folks"/>
  3612.    <updated>2021-01-05T00:00:00Z</updated>
  3613.    <id>https://www.fronteers.nl/nl/blog/2021/01/thats-all-folks</id>
  3614.    <content xml:lang="nl" type="html">&lt;p&gt;CSS is opgebouwd uit allemaal rechthoeken. Rechthoeken kunnen boven of onder andere rechthoeken liggen. Rechthoeken kunnen ook weer andere rechthoeken in zich hebben, en dan kan je er voor kiezen dat de binnenste rechthoeken ook buiten hun omringende rechthoek zichtbaar zijn (dat ze &lt;em&gt;overflowen&lt;/em&gt;) of dat ze afgekapt worden door de omringende rechthoek (met overflow:hidden).&lt;/p&gt;
  3615. &lt;p&gt;Maar als je wilt dat een rechthoek aan één zijde wel buiten de omringende rechthoek zichtbaar is, maar niet aan de andere kant, dan kan dat niet. Toch?&lt;/p&gt;
  3616. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/thats-all-folks/selection-633.png&quot; alt=&quot;Drie vierkanten waarbij bij de eerste een binnenste element er uit komt met de tekst &amp;quot;Dit kan&amp;quot; er onder. Bij de tweede blijft het binnenste element binnen de zichtbare rand, hier staat &amp;quot;Dit kan ook&amp;quot; onder. Bij de derde komt het binnenste element aan de bovenkant er uit, maar aan de onderkant niet. Hier onder staat &amp;quot;Dit kan ...niet&amp;quot;.&quot; /&gt;&lt;/p&gt;
  3617. &lt;p&gt;Misschien gaan er bij jou nu wel allemaal radertjes draaien: wat nou als ik de binnenste rechthoek kopieer en de helft clip en dan er precies boven positioneer dan lijkt het net alsof... Maar in principe kan je er niet voor kiezen dat één element aan bijvoorbeeld de bovenkant uitsteekt, maar niet aan de onderkant. Of toch wel?&lt;/p&gt;
  3618. &lt;h2&gt;3D transformaties&lt;/h2&gt;
  3619. &lt;p&gt;Een tijdje terug was ik een lijst aan het verzamelen van websites die &lt;a href=&quot;https://polypane.app/css-3d-transform-examples/&quot;&gt;interessant gebruik maken van CSS 3D transforms&lt;/a&gt;. Met CSS 3D transforms kan je elementen in 3D roteren, transformeren en verplaatsen, en ook cross-browser werkt dat ondertussen gewoon prima.&lt;/p&gt;
  3620. &lt;p&gt;Er zijn twee CSS properties die je moet inzetten om elementen in 3D te kunnen positioneren:&lt;/p&gt;
  3621. &lt;ul&gt;
  3622. &lt;li&gt;&lt;code&gt;perspective&lt;/code&gt; met een waarde in pixels, om te bepalen hoe sterk het 3d effect moet zijn.&lt;/li&gt;
  3623. &lt;li&gt;&lt;code&gt;transform-style: preserve-3d&lt;/code&gt;, om de browser te vertellen dat je de 3D-transformaties wilt behouden&lt;/li&gt;
  3624. &lt;/ul&gt;
  3625. &lt;p&gt;Toch zie je het niet veel gebruikt worden, en ook ik had er nog niet heel veel mee geprobeerd. Websites blijven toch een &amp;quot;2d&amp;quot; iets, een scrollende, platte pagina.&lt;/p&gt;
  3626. &lt;p&gt;De meest interessante 3D transform die ik tegen kwam was deze:&lt;/p&gt;
  3627. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/thats-all-folks/selection-630.png&quot; alt=&quot;Drie vlakken die in 3d ruimte boven elkaar zweven.&quot; /&gt;&lt;/p&gt;
  3628. &lt;p&gt;Hoewel je drie vlakken ziet, is dit slechts éen div. De andere twee vlakken zijn de &lt;code&gt;::before&lt;/code&gt; en &lt;code&gt;::after&lt;/code&gt;, die door middel van de &lt;code&gt;translate()&lt;/code&gt; CSS functie omhoog en omlaag zijn verplaatst, en zo boven elkaar liggen.&lt;/p&gt;
  3629. &lt;p&gt;Wat me daar op viel was hoe het &lt;code&gt;::after&lt;/code&gt; element, wat normaal gesproken over een element ligt &lt;em&gt;achter&lt;/em&gt; de div zelf zat. Dat kreeg de maker voor elkaar met &lt;code&gt;transform: translateZ(-1px);&lt;/code&gt;.&lt;/p&gt;
  3630. &lt;p&gt;Hoewel ik daarvoor al veel andere transforms had gezien was dit de eerste die me echt deed beseffen dat ik elementen in 3D ruimte aan het positioneren was. En als dat kan, dan kunnen ze elkaar dus ook doorkruizen:&lt;/p&gt;
  3631. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/thats-all-folks/selection-631.png&quot; alt=&quot;Twee vlakken die elkaar in 3D ruimte doorkruizen.&quot; /&gt;&lt;/p&gt;
  3632. &lt;p&gt;Ik wist niet direct wat ik daar mee kon, maar niet veel later zag ik een plaatje van een tekenfilmfiguurtje wat uit een frame leek te komen: aan de onderkant zat het achter het frame, maar het gezicht aan de bovenkant kwam er uit. Zou ik dat met CSS kunnen namaken? En als extra uitdaging, met maar één element?&lt;/p&gt;
  3633. &lt;p&gt;Ik zat wat te pielen en al vrij snel had ik dit:&lt;/p&gt;
  3634. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/thats-all-folks/selection-632.png&quot; alt=&quot;Een oranje vierkant dat door een blauwe rand steekt: aan de bovenkant zit het over de blauwe rand, maar aan de onderkant zit het achter de rand.&quot; /&gt;&lt;/p&gt;
  3635. &lt;p&gt;In dit plaatje zie je één div met een &lt;code&gt;::before&lt;/code&gt; en een &lt;code&gt;::after&lt;/code&gt;. De div zelf is transparant, de &lt;code&gt;::before&lt;/code&gt; heeft een border en de &lt;code&gt;::after&lt;/code&gt; is op de X-as geroteerd. Doordat de div &lt;code&gt;perspective&lt;/code&gt; heeft wordt alles in 3d gepositioneerd, en daarmee ligt het &lt;code&gt;::after&lt;/code&gt; element aan de bovenkant &lt;em&gt;voor&lt;/em&gt; de border, en aan de onderkant &lt;em&gt;achter&lt;/em&gt; de border.&lt;/p&gt;
  3636. &lt;pre&gt;&lt;code&gt;div {
  3637.  transform: perspective(3000px);
  3638.  transform-style: preserve-3d;
  3639.  position: relative;
  3640.  width: 200px;
  3641.  height: 200px;
  3642. }
  3643.  
  3644. div::before {
  3645.  content: &amp;quot; &amp;quot;;
  3646.  width: 100%;
  3647.  height: 100%;
  3648.  border:10px solid darkblue;
  3649. }
  3650.  
  3651. div::after {
  3652.  content: &amp;quot; &amp;quot;;
  3653.  position: absolute;
  3654.  background: orangered;
  3655.  width: 80%;
  3656.  height: 150%;
  3657.  display: block;
  3658.  left: 10%;
  3659.  bottom: -25%;
  3660.  transform: rotateX(-10deg);
  3661. }
  3662. &lt;/code&gt;&lt;/pre&gt;
  3663. &lt;p&gt;Klik door naar de &lt;a href=&quot;https://codepen.io/Kilian/pen/ZEpQQdo&quot;&gt;Codepen&lt;/a&gt; om het in actie te zien.&lt;/p&gt;
  3664. &lt;h2&gt;Tussendoor, &lt;code&gt;perspective&lt;/code&gt;&lt;/h2&gt;
  3665. &lt;p&gt;Met perspective kan je aangeven hoever je als &amp;quot;kijker&amp;quot; af zit van z=0, wat je kan zien als &amp;quot;de horizon&amp;quot;. Hoe hoger het perspectief, hoe minder sterk het 3D effect (en hoe kleiner, hoe sterker het effect). Voor de meeste effecten is een perspectief van tussen de 500 en 1000 pixels prima, en je kan met dit getal spelen om het effect te krijgen wat je wilt.&lt;/p&gt;
  3666. &lt;p&gt;Je kan dit vergelijken met perspectieftekenen. Als je twee horizonspunten dicht bij elkaar tekent heb je een sterk perspectief, maar als je ze ver van elkaar af tekent lijkt alles veel platter.&lt;/p&gt;
  3667. &lt;h2&gt;Van rechthoeken naar cartoons&lt;/h2&gt;
  3668. &lt;p&gt;De rechthoekjes zijn leuk, maar wat ik eigelijk wilde maken was dit:&lt;/p&gt;
  3669. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/thats-all-folks/porky.jpeg-full.jpg&quot; alt=&quot;Een filmcel van Porky Pig die uit een cirkel lijkt te komen met de tekst &amp;quot;That&#39;s all folks&amp;quot;.&quot; /&gt;&lt;/p&gt;
  3670. &lt;p&gt;Het klassieke einde van de looney tunes cartoons, waarbij porky pig uit een cirkel tevoorschijn komt en &amp;quot;that&#39;s all folks&amp;quot; stottert. Een mooi uitgeknipte versie van Porky Pig in dit plaatje kon ik niet vinden, maar de &lt;a href=&quot;https://en.wikipedia.org/wiki/Porky_Pig&quot;&gt;wikipedia pagina&lt;/a&gt; heeft een ander mooi uitgeknipt plaatje, dus die gebruiken we.&lt;/p&gt;
  3671. &lt;p&gt;Om het effect te bouwen delen we het plaatje op in drie onderdelen:&lt;/p&gt;
  3672. &lt;ul&gt;
  3673. &lt;li&gt;De blauwe achtergrond, dat is de div zelf&lt;/li&gt;
  3674. &lt;li&gt;De rode cirkels, dit wordt de &lt;code&gt;::before&lt;/code&gt;&lt;/li&gt;
  3675. &lt;li&gt;Porky Pig, die gebruiken we als &lt;code&gt;background&lt;/code&gt; voor de &lt;code&gt;::after&lt;/code&gt;.&lt;/li&gt;
  3676. &lt;/ul&gt;
  3677. &lt;p&gt;We beginnen met de div, dit wordt de achtergrond en ook de basis voor de rest van de onderdelen. Op deze div zetten we het eerder genoemde &lt;code&gt;perspective&lt;/code&gt; en &lt;code&gt;transform-style&lt;/code&gt;, samen met de achtergrondkleur en wat afmetingen:&lt;/p&gt;
  3678. &lt;pre&gt;&lt;code&gt;div {
  3679.  transform: perspective(3000px);
  3680.  transform-style:preserve-3d;
  3681.  position: relative;
  3682.  width: 200px;
  3683.  height: 200px;
  3684.  background: #4992AD;
  3685. }
  3686. &lt;/code&gt;&lt;/pre&gt;
  3687. &lt;p&gt;Dan komen we bij het tweede onderdeel, de rode cirkels. Het &amp;quot;element&amp;quot; zelf moet hier transparant blijven, dat is het gat waar Porky zometeen doorheen komt. Hoe zorgen we dan voor de rode cirkels? We kunnen een border gebruiken zoals in het eerdere voorbeeld, maar daar hebben we er maar eentje van. In dit geval heb je een serie van cirkels, waar ook nog eens een kleurverloop in zit.&lt;/p&gt;
  3688. &lt;p&gt;We kunnen dit namaken met box-shadows. Je kan meerdere box-shadows toevoegen en door een blur radius van 0 maar een grote spread radius te gebruiken kan je meerdere &amp;quot;borders&amp;quot; toevoegen.&lt;/p&gt;
  3689. &lt;pre&gt;&lt;code&gt;box-shadow: &amp;lt;x-offset&amp;gt; &amp;lt;y-offset&amp;gt; &amp;lt;blur-radius&amp;gt; &amp;lt;spread-radius&amp;gt; &amp;lt;color&amp;gt;
  3690. &lt;/code&gt;&lt;/pre&gt;
  3691. &lt;p&gt;We gebruiken een border-radius die even groot is als de div zelf, waardoor de &lt;code&gt;::before&lt;/code&gt; een cirkel wordt, en voegen daar de box-shadows aan toe. Wanneer je box-shadow gebruikt om een aantal rode cirkels te maken waar witte schaduwen met een blur radius op zitten, krijg je een effect wat erg dicht bij de afbeelding zit:&lt;/p&gt;
  3692. &lt;pre&gt;&lt;code&gt;box-shadow: 0 0 20px   0px #fff, 0 0 0  30px #CF331F,
  3693.            0 0 20px  30px #fff, 0 0 0  60px #CF331F,
  3694.            0 0 20px  60px #fff, 0 0 0  90px #CF331F,
  3695.            0 0 20px  90px #fff, 0 0 0 120px #CF331F,
  3696.            0 0 20px 120px #fff, 0 0 0 150px #CF331F;
  3697. &lt;/code&gt;&lt;/pre&gt;
  3698. &lt;p&gt;We maken hier vijf cirkels van steeds 30 pixels breed. Iedere cirkel heeft een vlakke rode achtergrond en daarboven maken we met behulp van een witte schaduw met een blur radius van 20 pixels het kleurverloop-effect.&lt;/p&gt;
  3699. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/thats-all-folks/selection-629.png&quot; alt=&quot;De achtergrond en de cirkels in pure CSS, nog zonder Porky.&quot; /&gt;&lt;/p&gt;
  3700. &lt;p&gt;Als laatste hebben we Porky, laten we beginnen met die op de plek neer te zetten waar we hem uiteindelijk willen hebben, maar voor nu nog vóór de cirkels.&lt;/p&gt;
  3701. &lt;pre&gt;&lt;code&gt;div::after {
  3702.  position: absolute;
  3703.  content: &amp;quot; &amp;quot;;
  3704.  width:80%;
  3705.  height:150%;
  3706.  display: block;
  3707.  left:10%;
  3708.  bottom: -12%;
  3709.  background:url(&amp;quot;https://upload.wikimedia.org/wikipedia/en/thumb/8/88/Porky_Pig.svg/800px-Porky_Pig.svg.png&amp;quot;) no-repeat center/contain;
  3710. }
  3711. &lt;/code&gt;&lt;/pre&gt;
  3712. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/thats-all-folks/selection-628.png&quot; alt=&quot;Porky Pig is boven op de cirkels gepositioneerd.&quot; /&gt;&lt;/p&gt;
  3713. &lt;p&gt;De afmetingen en positionering hier is een beetje willekeurig, ik heb gekeken wat voor het plaatje mooi uitkwam.&lt;/p&gt;
  3714. &lt;h2&gt;De truuk&lt;/h2&gt;
  3715. &lt;p&gt;Dan nu de truuk: Porky&#39;s benen moeten achter de rode cirkels, maar zijn hoofd en petje er boven. Om dit voor elkaar te krijgen moeten we zowel de cirkels als Porky in 3d-ruimte verplaatsen.&lt;/p&gt;
  3716. &lt;p&gt;Als we Porky willen roteren, dan moeten we op een aantal dingen letten:&lt;/p&gt;
  3717. &lt;ul&gt;
  3718. &lt;li&gt;Hij mag niet door de achtergrond clippen&lt;/li&gt;
  3719. &lt;li&gt;We kunnen niet zo ver roteren dat de afbeelding vervormt&lt;/li&gt;
  3720. &lt;li&gt;Hij moet met zijn benen achter en met zijn hoofd voor de cirkels zetten&lt;/li&gt;
  3721. &lt;/ul&gt;
  3722. &lt;p&gt;Om er voor te zorgen dat Porky niet door de achtergrond clipt doen we een aantal dingen. Eerst verplaatsen we de cirkels in de Z-as zodat ze dichter naar ons toe komen. Omdat &lt;code&gt;preserve-3d&lt;/code&gt; aan staat betekent dat ook dat ze inzoomen, maar als we ze slechts een klein beetje naar voren verschuiven hebben we genoeg ruimte tussen de achtergrond en de cirkels:&lt;/p&gt;
  3723. &lt;pre&gt;&lt;code&gt;transform: translateZ(20px);
  3724. &lt;/code&gt;&lt;/pre&gt;
  3725. &lt;p&gt;Vervolgens hebben we Porky zelf. Die gaan we op de x-as roteren, zo dat de bovenkant van de afbeelding dichterbij is dan de onderkant, bijvoorbeeld met&lt;/p&gt;
  3726. &lt;pre&gt;&lt;code&gt;transform: rotateX(-10deg);
  3727. &lt;/code&gt;&lt;/pre&gt;
  3728. &lt;p&gt;Maar als we dat doen, zien we dat het er niet helemaal goed uit ziet, Porky zit nu namelijk deels verstopt achter de blauwe achtergrond, en bij de cirkels gaat er ook iets mis.&lt;/p&gt;
  3729. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/thats-all-folks/selection-626.png&quot; alt=&quot;Porky Pig wordt deels afgekapt door de achtergrond en door de cirkels.&quot; /&gt;&lt;/p&gt;
  3730. &lt;p&gt;We kunnen dit proberen op te lossen door Porky ook dichterbij te halen, met &lt;code&gt;translateZ&lt;/code&gt;, maar wat we beter kunnen doen is de plek waar we roteren te veranderen. Nu doen we dat namelijk in het midden van de afbeelding, waardoor het onderste deel naar achter gaat.&lt;/p&gt;
  3731. &lt;p&gt;Als we aan de onderkant van de afbeelding draaien, of zelfs ietsje daar onder, dan draait Porky als het ware in zijn geheel naar ons toe. En omdat we de cirkels al dichterbij hebben gehaald, komt alles mooi uit:&lt;/p&gt;
  3732. &lt;pre&gt;&lt;code&gt;transform: rotateX(-10deg);
  3733. transform-origin:center 120%;
  3734. &lt;/code&gt;&lt;/pre&gt;
  3735. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/thats-all-folks/selection-627.png&quot; alt=&quot;Porky Pig komt nu uit de cirkel: Zijn benen zitten achter de cirkels, maar zijn hoofd er boven.&quot; /&gt;&lt;/p&gt;
  3736. &lt;p&gt;Mocht je nou in 3d willen zien hoe alles zich verhoud, kijk dan op deze code pen en klik op &amp;quot;show debug&amp;quot;.&lt;/p&gt;
  3737. &lt;p&gt;&lt;a href=&quot;https://codepen.io/Kilian/pen/wvzMMEW&quot;&gt;Codepen voorbeeld&lt;/a&gt;&lt;/p&gt;
  3738. &lt;h2&gt;Animatie&lt;/h2&gt;
  3739. &lt;p&gt;Nu hebben we Porky, en hij piept mooi achter de cirkels vandaan, maar als het een statisch plaatje blijft hadden we niet al deze moeite hoeven nemen. Door een animatie toe te voegen kunnen we de gelaagdheid zichtbaar maken en het effect versterken.&lt;/p&gt;
  3740. &lt;p&gt;De animatie die ik wil maken doet het volgende: Porky begint klein, en vergroot dan vanuit de blauwe achtergrond naar over de rode achtergrond. Daar blijft hij even staan, en zoomt daarna weer terug.&lt;/p&gt;
  3741. &lt;p&gt;Voor de beste prestaties gebruiken we ook voor de animatie &lt;code&gt;transform&lt;/code&gt;, en omdat we dat doen moeten we zorgen dat de &lt;code&gt;rotateX&lt;/code&gt; behouden blijft.&lt;/p&gt;
  3742. &lt;pre&gt;&lt;code&gt;@keyframes zoom {
  3743.  0% {
  3744.    transform: rotateX(-10deg) scale(0.66);
  3745.  }
  3746.  40% {
  3747.    transform: rotateX(-10deg) scale(1);
  3748.  }
  3749.  
  3750.  60% {
  3751.    transform: rotateX(-10deg) scale(1);
  3752.  }
  3753.  
  3754.  100% {
  3755.    transform: rotateX(-10deg) scale(0.66);
  3756.  }
  3757. }
  3758. &lt;/code&gt;&lt;/pre&gt;
  3759. &lt;p&gt;Met &lt;code&gt;scale()&lt;/code&gt; zoomen we in en uit, en omdat we al eerder de &lt;code&gt;transform-origin&lt;/code&gt; hebben gezet, schaalt het vanuit midden onder, precies het effect wat we willen.&lt;/p&gt;
  3760. &lt;p&gt;Door tussen 40% en 60% even te pauzeren hebben we dat moment rust als hij boven de rode cirkels zit.&lt;/p&gt;
  3761. &lt;p&gt;Die animatie voegen we dan toe aan de &lt;code&gt;::after&lt;/code&gt;. Om de animatie wat natuurlijker te laten verlopen gebruiken we een timing functie, &amp;quot;ease-in-out&amp;quot;, waardoor de animatie aan het begin en eind iets slomer gaat.&lt;/p&gt;
  3762. &lt;pre&gt;&lt;code&gt;div::after {
  3763.  animation-name: zoom;
  3764.  animation-duration: 4s;
  3765.  animation-iteration-count: infinite;
  3766.  animation-fill-mode:forwards;
  3767.  animation-timing-function: ease-in-out;
  3768. }
  3769. &lt;/code&gt;&lt;/pre&gt;
  3770. &lt;p&gt;&lt;a href=&quot;https://codepen.io/Kilian/pen/abmddja&quot;&gt;Klik door naar de codepen&lt;/a&gt; om te zien hoe het er nu uit ziet, maar we kunnen nog twee dingen aanpassen om het er nog nét iets leuker uit te laten zien:&lt;/p&gt;
  3771. &lt;ul&gt;
  3772. &lt;li&gt;We kunnen meer diepte creeëren door een schaduw achter Porky te laten groeien, zodat het lijkt alsof Porky dichterbij komt&lt;/li&gt;
  3773. &lt;li&gt;We kunnen Porky een beetje draaien tijdens de animatie waardoor het effect verstrekt wordt&lt;/li&gt;
  3774. &lt;/ul&gt;
  3775. &lt;p&gt;Die tweede kunnen we oplossen met &lt;code&gt;rotateZ&lt;/code&gt;, maar voor die eerste moeten we nog een truukje uithalen. Omdat we een plaatje gebruiken kunnen we niet &lt;code&gt;box-shadow&lt;/code&gt; gebruiken, die maakt namelijk een vierkant schaduwtje om het &lt;code&gt;::after&lt;/code&gt; element.&lt;/p&gt;
  3776. &lt;p&gt;In plaats daarvan kunnen gebruik maken van een &lt;code&gt;filter&lt;/code&gt;. Wanneer je die gebruikt wordt er gekeken naar de ondoorzichtige pixels van een element, en die krijgen een schaduwtje. Voeg je dat samen, dan krijg je dit:&lt;/p&gt;
  3777. &lt;pre&gt;&lt;code&gt;@keyframes zoom {
  3778.  0% {
  3779.    transform: rotateX(-10deg) scale(0.66);
  3780.    filter: drop-shadow(-5px 5px 5px rgba(0,0,0,0));
  3781.  }
  3782.  40% {
  3783.    transform: rotateZ(-10deg) rotateX(-10deg) scale(1);
  3784.    filter: drop-shadow(-10px 10px 10px rgba(0,0,0,0.5));
  3785.  }
  3786.  
  3787.  60% {
  3788.    transform: rotateZ(-10deg) rotateX(-10deg) scale(1);
  3789.    filter: drop-shadow(-10px 10px 10px rgba(0,0,0,0.5));
  3790.  }
  3791.  
  3792.  100% {
  3793.    transform: rotateX(-10deg) scale(0.66);
  3794.    filter: drop-shadow(-5px 5px 5px rgba(0,0,0,0));
  3795.  }
  3796. }
  3797. &lt;/code&gt;&lt;/pre&gt;
  3798. &lt;p&gt;En hier is de uiteindelijke Codepen:&lt;/p&gt;
  3799. &lt;p&gt;&lt;a href=&quot;https://codepen.io/Kilian/pen/yLJBymR&quot;&gt;Porky Pig &amp;quot;That&#39;s all Folks&amp;quot; in pure CSS&lt;/a&gt;&lt;/p&gt;
  3800. &lt;p&gt;En zo hebben we een animatie gemaakt van Porky Pig die ons uitzwaait en rest mij enkel nog het volgende te zeggen: &amp;quot;That&#39;s all Folks!&amp;quot;&lt;/p&gt;
  3801. </content>
  3802.  </entry>
  3803.  <entry>
  3804.    <title>Basics van front-end testing</title>
  3805.    <link href="https://www.fronteers.nl/nl/blog/2021/01/basics-van-front-end-testing"/>
  3806.    <updated>2021-01-04T00:00:00Z</updated>
  3807.    <id>https://www.fronteers.nl/nl/blog/2021/01/basics-van-front-end-testing</id>
  3808.    <content xml:lang="nl" type="html">&lt;p&gt;Als front-end developer zullen de begrippen unit test, integration test en end-to-end test je waarschijnlijk wel bekend voorkomen. Maar wat is het en wanneer gebruik je welke test? Dit artikel is een kleine intro tot de verschillende soorten tests en tools die je als front-end developer tot je beschikking hebt om je code te testen en uiteindelijk de kwaliteit te verbeteren.&lt;/p&gt;
  3809. &lt;h2&gt;Unit test&lt;/h2&gt;
  3810. &lt;p&gt;Het begint meestal met unit tests. Een unit test is een test die een op zichzelf staand onderdeel van je code controleert. Bij een unit test is de context van de functie in de applicatie niet van belang. Er wordt puur getest of een functie bij dezelfde input altijd dezelfde output teruggeeft. Oftewel, als je &lt;em&gt;a&lt;/em&gt; er in stopt, moet je altijd &lt;em&gt;b&lt;/em&gt; terug krijgen.&lt;/p&gt;
  3811. &lt;p&gt;Unit tests maken het ook mogelijk om alle mogelijke uitkomsten van een functie snel te controleren. Je hoeft dan niet je applicatie op te starten en handmatig de mogelijkheden te testen; je kunt de unit tests starten. Daarmee kun je tijdens het ontwikkelen tijd besparen en vervelende verrassingen voorkomen bij een acceptance test.&lt;/p&gt;
  3812. &lt;p&gt;Zo is het bijvoorbeeld bij een checkout van een webshop belangrijk dat een klant een geldige postcode invult. Ter validatie van je code kun je een eenvoudige unit test maken. Stel dat dit je validatie functie is:&lt;/p&gt;
  3813. &lt;pre&gt;&lt;code&gt;function validatePostcode(postcode) {
  3814.    const matches = postcode.match(/(?:&amp;lt;getal&amp;gt;&#92;d&#92;d&#92;d&#92;d) (?:&amp;lt;letters&amp;gt;[A-Z])/);
  3815.    if (!matches) return false;
  3816.    const number = parseInt(matches.groups.getal, 10);
  3817.    const chars = matches.groups.letters;
  3818.  
  3819.    // Check number range
  3820.    if (number &amp;lt; 1000 || number &amp;gt; 9992) return false;
  3821.  
  3822.    return true;
  3823. }
  3824. &lt;/code&gt;&lt;/pre&gt;
  3825. &lt;p&gt;Dan kun je met deze unit test checken of je bij verschillende waardes de juiste &lt;code&gt;boolean&lt;/code&gt; terug krijgt. Voor dit voorbeeld gebruik ik Jest, een JavaScript testing framework dat met vrijwel alle JavaScript frameworks werkt.&lt;/p&gt;
  3826. &lt;pre&gt;&lt;code&gt;// Import jest
  3827.  
  3828. test(&#39;validatePostcode should return true&#39;, () =&amp;gt; {
  3829.  expect(validatePostcode(&#39;1000 AA&#39;)).toBe(true);
  3830.  expect(validatePostcode(&#39;7777 AA&#39;)).toBe(true);
  3831.  expect(validatePostcode(&#39;9992 AA&#39;)).toBe(true);
  3832. });
  3833.  
  3834. test(&#39;validatePostcode should return false&#39;, () =&amp;gt; {
  3835.  expect(validatePostcode(&#39;000 AB&#39;)).toBe(false);
  3836.  expect(validatePostcode(&#39;1000 A&#39;)).toBe(false);
  3837.  expect(validatePostcode(&#39;0000 AB&#39;)).toBe(false);
  3838.  expect(validatePostcode(&#39;0001 AB&#39;)).toBe(false);
  3839.  expect(validatePostcode(&#39;9993 AB&#39;)).toBe(false);
  3840. });
  3841. &lt;/code&gt;&lt;/pre&gt;
  3842. &lt;p&gt;Je kunt je waarschijnlijk wel voorstellen dat dit een hoop tijd bespaart. Je hoeft niet de website te openen en de checkout meerdere malen te doorlopen om verschillende postcodes te testen.&lt;/p&gt;
  3843. &lt;h2&gt;Integration test&lt;/h2&gt;
  3844. &lt;p&gt;Een integration test is een test waarbij in tegenstelling tot een unit test de context er wel toe doet. Je test meerdere onderdelen van een keten, bijvoorbeeld om te checken of een functie correct is aangeroepen. Voor een integration test kun je ook Jest gebruiken. Soms kan het benodigd zijn om bij een integration test bepaalde onderdelen van de applicatie te &lt;em&gt;mocken&lt;/em&gt;. Stel je voor dat je een &lt;em&gt;submit&lt;/em&gt; van een formulier wilt testen, dan kan het zijn dat je de uitkomst van een &lt;em&gt;api callback&lt;/em&gt; moet mocken omdat je bij het uitvoeren van de test geen toegang hebt tot de API.&lt;/p&gt;
  3845. &lt;h2&gt;End-to-end (e2e) test&lt;/h2&gt;
  3846. &lt;p&gt;Een end-to-end test is een test waarbij het gedrag van de gebruiker wordt gesimuleerd, die verschillende scenario&#39;s probeert uit te voeren met een bepaalde gewenste uitkomst. Zo kun je de belangrijkste happy- en non-happy flows testen. Een end-to-end test is een blackbox test. De test heeft geen kennis van de code, maar voert acties uit: aanklikken van een button, invullen van een formulier, submit, etc. Unit tests behoren tot een whitebox test, de test roept direct de code aan.&lt;/p&gt;
  3847. &lt;p&gt;Wat je vaak ziet is dat e2e tests worden geschreven met behulp van &lt;em&gt;cucumber&lt;/em&gt; in het format &lt;em&gt;gherkin&lt;/em&gt;. In leesbare taal staat uitgeschreven welke stappen uitgevoerd worden en vervolgens kunnen die stappen bij scenarios worden hergebruikt.&lt;/p&gt;
  3848. &lt;p&gt;Je kunt &lt;em&gt;user stories&lt;/em&gt; als uitgangspunt voor je scenario&#39;s. Het begint met een feature: ‘Als klant wil ik betalen’, met scenario’s als: ‘Als klant wil ik betalen met iDeal’. De focus ligt altijd op de business value die gecreëerd wordt voor een gebruiker. Zo&#39;n leesbare e2e test kan er zo uitzien:&lt;/p&gt;
  3849. &lt;pre&gt;&lt;code&gt;Feature: Als klant wil ik betalen
  3850.  
  3851.    Scenario: Als klant wil ik betalen met iDeal
  3852.    Given Een correct ingevuld checkout formulier
  3853.    When de klant probeert te betalen
  3854.    Then de klant ziet de iDeal-pagina van de payment provider
  3855. &lt;/code&gt;&lt;/pre&gt;
  3856. &lt;p&gt;Er zijn allerlei soorten software om een end-to-end tests uit te voeren. In het Angular ecosysteem is de combinatie Protractor met Selenium een bekende. Een andere interessante app is Cypress.io, waarbij je elke stap ook daadwerkelijk kunt zien gebeuren. Dit helpt bij het ontwikkelen van de tests. Als er iets onverwachts gebeurd, dan blijft het proces op de stap haken en kun je zien wat er aan de hand is.&lt;/p&gt;
  3857. &lt;h2&gt;Testen, testen, testen&lt;/h2&gt;
  3858. &lt;p&gt;Je weet nu waar te starten met front-end testing. Het is een goede basis, maar met unit tests, integration tests of end-to-end tests zijn we er helaas nog niet. Je hebt onder andere ook nog: acceptance tests door acceptanten, accessibility tests, cross browser compatibility tests, system integration testing (over meerdere delen van de keten testen) en natuurlijk visuele regressie testing. Front-end development is zo eenvoudig nog niet.&lt;/p&gt;
  3859. </content>
  3860.  </entry>
  3861.  <entry>
  3862.    <title>&amp;quot;Even snel&amp;quot; een project starten</title>
  3863.    <link href="https://www.fronteers.nl/nl/blog/2021/01/even-snel-een-project-starten"/>
  3864.    <updated>2021-01-03T00:00:00Z</updated>
  3865.    <id>https://www.fronteers.nl/nl/blog/2021/01/even-snel-een-project-starten</id>
  3866.    <content xml:lang="nl" type="html">&lt;p&gt;Je kent het wel, je wil even snel iets bouwen of wat code uitproberen. Je maakt een map aan, gooit daarin een index.html, een CSS bestand en een JavaScript bestandje, om vervolgens met wat code te rommelen. In dit voorbeeld heb je gewoon statische bestanden die je in een browser (naar keuze) kunt laden om te checken of het klopt wat je aan het maken bent.&lt;/p&gt;
  3867. &lt;p&gt;Je kent het wel, je wil even snel iets bouwen of wat code uitproberen. Je maakt een map aan, gooit daarin een index.html, een CSS bestand en een JavaScript bestandje, om vervolgens met wat code te rommelen. In dit voorbeeld heb je gewoon statische bestanden die je in een browser (naar keuze) kunt laden om te checken of het klopt wat je aan het maken bent.&lt;/p&gt;
  3868. &lt;p&gt;Als ik met een onderdeel bezig ben voor een project en het wil maar niet lukken, doe ik dit soms. Dan vind ik het handig als ik dat ene onderdeeltje even uit het grotere geheel kan halen om er los van het project mee aan de gang te gaan. Ik vind het zelf dan wel heel handig als de browser de pagina herlaad als ik iets aangepast heb. Maar dan komen er nog meer handelingen aan te pas voordat ik kan beginnen. Dat is allemaal best te doen, maar wat zou het toch handig zijn als dat met één commando veel sneller kan?&lt;/p&gt;
  3869. &lt;p&gt;Natuurlijk kan dat! Ik heb in mijn &lt;em&gt;command line&lt;/em&gt; een functie gemaakt die in een mum van tijd een klein projectje voor me aanmaakt, zodat ik snel iets uit kan proberen.&lt;/p&gt;
  3870. &lt;p&gt;In het &lt;em&gt;config&lt;/em&gt; bestand van de &lt;em&gt;command line&lt;/em&gt; kun je namelijk zelf functies maken. De functie die ik gebruik ziet er als volgt uit:&lt;/p&gt;
  3871. &lt;pre&gt;&lt;code&gt;function basicsetup() {
  3872.  
  3873.   mkdir /home/reneedekruijf/Bureaublad/&amp;quot;$1&amp;quot;
  3874.  
  3875.   cd /home/reneedekruijf/Bureaublad/&amp;quot;$1&amp;quot;
  3876.  
  3877.   mkdir /home/reneedekruijf/Bureaublad/&amp;quot;$1&amp;quot;/images
  3878.  
  3879.   mkdir /home/reneedekruijf/Bureaublad/&amp;quot;$1&amp;quot;/js
  3880.  
  3881.   mkdir /home/reneedekruijf/Bureaublad/&amp;quot;$1&amp;quot;/css
  3882.  
  3883.   touch index.pug js/script.js css/style.css
  3884.  
  3885.   code .
  3886.  
  3887. npm init -y
  3888.  
  3889.   parcel serve index.pug --open
  3890.  
  3891. }
  3892. &lt;/code&gt;&lt;/pre&gt;
  3893. &lt;p&gt;Als ik nu iets wil uitproberen, type ik in de terminal: &lt;code&gt;basicsetup &amp;quot;testproject&amp;quot;&lt;/code&gt;. Er wordt nu een folder op mijn bureaublad aangemaakt met de naam &lt;em&gt;testproject&lt;/em&gt;.&lt;/p&gt;
  3894. &lt;p&gt;Deze functie &lt;code&gt;basicsetup&lt;/code&gt; roep je aan door de naam in je CLI te typen, de functie wordt dan uitgevoerd. Ik heb op een paar plekken &lt;code&gt;$1&lt;/code&gt; gebruikt. Dit is een variabele die je een willekeurige waarde mee kunt geven. Dit doe je door achter de functienaam de naam van je project in te voeren tussen aanhalingstekens. In dit geval wordt &lt;code&gt;$1&lt;/code&gt; dus &lt;em&gt;testproject&lt;/em&gt;. Die kun je vervolgens in de functie zo vaak als je wil terug laten komen.&lt;/p&gt;
  3895. &lt;h2&gt;Wat doet deze code?&lt;/h2&gt;
  3896. &lt;p&gt;Op de eerste regel maken we de folder aan door het commando &lt;code&gt;mkdir&lt;/code&gt; te gebruiken, dit staat voor &lt;em&gt;make directory&lt;/em&gt;.&lt;/p&gt;
  3897. &lt;p&gt;Op de volgende regel gebruiken we &lt;code&gt;cd&lt;/code&gt; (&lt;em&gt;change directory&lt;/em&gt;) om in de folder &lt;em&gt;testproject&lt;/em&gt; te komen, die we net hebben gemaakt. In de drie volgende regels gebruiken we weer &lt;code&gt;mkdir&lt;/code&gt; om in de nieuw aangemaakte folder achtereenvolgens drie nieuwe folders te maken, een images-, een js- en css-folder.&lt;/p&gt;
  3898. &lt;p&gt;Dan maken we met &lt;code&gt;touch&lt;/code&gt; (hiermee kun je bestanden aanmaken) drie bestanden aan. Een CSS file en een JavaScript file en beide al meteen in de juiste folder. Als laatste van deze regels maken we een index.pug bestand in de root folder.&lt;/p&gt;
  3899. &lt;p&gt;Deze &lt;em&gt;index&lt;/em&gt; heeft niet de extensie &lt;code&gt;.html&lt;/code&gt; maar &lt;code&gt;.pug&lt;/code&gt;. &lt;a href=&quot;https://pugjs.org/api/getting-started.html&quot;&gt;PUG&lt;/a&gt; is een templating taal voor HTML. Met PUG kun je met een aangepaste notatie HTML genereren. Ook kun je templates maken en je kunt variabelen gebruiken. De header of de footer zet je 1x op en die kun je steeds blijven gebruiken in al je bestanden, als je nu iets verandert in de header of footer dan hoef je dat maar 1x te doen. PUG-code moet alleen wel omgezet worden naar HTML (net zoals SASS ook omgezet wordt in CSS) en daar heb je tooling voor nodig, dat wordt in de laatste 2 regels van de &lt;code&gt;basicsetup&lt;/code&gt; opgezet.&lt;/p&gt;
  3900. &lt;p&gt;Met &lt;code&gt;code .&lt;/code&gt; start ik &lt;a href=&quot;https://code.visualstudio.com/&quot;&gt;Visual Studio Code&lt;/a&gt; op, dit is de code editor die ik graag gebruik. Als je een andere editor gebruikt dan komt hier het commando voor die editor te staan.&lt;/p&gt;
  3901. &lt;p&gt;De laatste twee regels dienen meerdere doelen. Als je dit wilt laten werken op je eigen computer heb je &lt;a href=&quot;https://nodejs.org/en/&quot;&gt;Nodejs&lt;/a&gt; nodig. Dit kun je gewoon installeren en is voor elk platform te downloaden. Zonder Nodejs kun je &lt;code&gt;PUG&lt;/code&gt; niet gebruiken en werken de laatste twee regels dus ook niet.&lt;/p&gt;
  3902. &lt;p&gt;De regel &lt;code&gt;npm init -y&lt;/code&gt; zorgt ervoor dat je folder klaar wordt gemaakt voor het installeren van &lt;em&gt;NPM packages&lt;/em&gt;, dit zijn kleine programmaatjes die je kunt installeren en die het leven van een developer makkelijker (kunnen) maken. Op &lt;a href=&quot;https://www.npmjs.com/&quot;&gt;https://www.npmjs.com/&lt;/a&gt; kun je zoeken naar deze packages.&lt;/p&gt;
  3903. &lt;p&gt;&lt;a href=&quot;https://parceljs.org/&quot;&gt;Parcel&lt;/a&gt; is zo&#39;n NPM package en deze moet je van tevoren installeren. Op de site van &lt;em&gt;Parcel&lt;/em&gt; kun je zien hoe dat moet. &lt;em&gt;Parcel&lt;/em&gt; is een zogenaamde bundler en kan meerdere handige dingen voor je doen. Ik gebruik het hier vooral om mijn PUG code om te zetten naar HTML en ik gebruik het voor hot reloading. Dit laatste zorgt ervoor dat mijn browser automatisch wordt ververst als ik iets in de HTML, CSS of JavaScript aanpas. Je ziet dus meteen wat je aanpast in je code. Echt heel handig. Parcel werkt out-of-the-box. Je hebt daarvoor wel de laatste regel van de &lt;code&gt;basicsetup&lt;/code&gt; functie nodig, dan wordt automatisch PUG omgezet naar HTML, en je krijgt hot reloading. Eigenlijk zorgt Parcel ervoor dat je een pagina in HTML krijgt met CSS en Javascript.&lt;/p&gt;
  3904. &lt;p&gt;Dus wil je snel even wat dingetjes checken of uitproberen, dan kan deze functie je helpen. Door een kort commando in de &lt;em&gt;command line&lt;/em&gt; heb je snel een basis setup waar je mee aan de slag kunt.&lt;/p&gt;
  3905. </content>
  3906.  </entry>
  3907.  <entry>
  3908.    <title>Not another JS framework - zelf een JavaScript framework schrijven</title>
  3909.    <link href="https://www.fronteers.nl/nl/blog/2021/01/not-another-js-framework-zelf-een-javascript-framework-schrijven"/>
  3910.    <updated>2021-01-02T00:00:00Z</updated>
  3911.    <id>https://www.fronteers.nl/nl/blog/2021/01/not-another-js-framework-zelf-een-javascript-framework-schrijven</id>
  3912.    <content xml:lang="nl" type="html">&lt;p&gt;React beter leren. Het staat al een hele tijd op mijn to do list, omdat we op mijn werk met React werken. Ik leer het beste door dingen te doen, maar ik hou niet van korte &amp;quot;Hello World&amp;quot; tutorials van een uurtje waarna je eigenlijk nog niets hebt geleerd. Daarom kreeg ik een studieopdracht op het werk: bouw React na. Mijn eigen JavaScript framework maken... Ik moest even slikken. Dat kan ik toch nooit?! Maar ik liet het even bezinken, kreeg wat eerste instructies en ging toen toch aan de slag. Omdat ik ook goed leer door op te schrijven wat ik heb gedaan, doe ik dat hier. Wellicht inspireert het jou om ook zoiets te proberen.&lt;/p&gt;
  3913. &lt;h2&gt;Research&lt;/h2&gt;
  3914. &lt;p&gt;Ik begon mijn research - uiteraard - met wat googlen. Ik kwam verschillende tutorials tegen die je er door heen loodsen om je eigen framework te maken, maar de moed zonk me in de schoenen. Oké, ik heb duidelijk een andere aanpak nodig. Ik begon de documentatie van React door te lezen en samen met de eerste instructies die ik had meegekregen - &amp;quot;maak een &lt;em&gt;render&lt;/em&gt; functie, gebruik &lt;code&gt;createElement&lt;/code&gt;&amp;quot; - maakte ik een plan van aanpak.&lt;/p&gt;
  3915. &lt;h2&gt;Stap 0: Een naam&lt;/h2&gt;
  3916. &lt;p&gt;Naamgeving: soms ook wel het moeilijkste deel van programmeren. Na lang nadenken en geen leuke namen, kies ik voor het meest flauwe dat ik kan bedenken. Ik noem mijn framework Clippy. &lt;a href=&quot;https://knowyourmeme.com/memes/clippy&quot;&gt;Wie kent &#39;m niet?&lt;/a&gt;&lt;/p&gt;
  3917. &lt;h2&gt;Stap 1: Maak een statische render functie&lt;/h2&gt;
  3918. &lt;p&gt;De belangrijkste functie uit React is waarschijnlijk wel &lt;code&gt;ReactDOM.render()&lt;/code&gt;. Deze functie zorgt ervoor dat React elementen daadwerkelijk getoond worden.&lt;/p&gt;
  3919. &lt;p&gt;Hier moet ik dus mee beginnen. Allereerst maak ik een index.html met een &lt;code&gt;&amp;lt;div id=&amp;quot;clippy&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;/code&gt;. In dit bestand wordt een clippy.js file aangroepen met als enige functie een &lt;code&gt;render&lt;/code&gt; met een &lt;em&gt;hard coded&lt;/em&gt; &lt;code&gt;div&lt;/code&gt; en een &lt;code&gt;string&lt;/code&gt; &amp;quot;Hello Clippy&amp;quot;.&lt;/p&gt;
  3920. &lt;pre&gt;&lt;code&gt;function render() {
  3921.    const element = document.createElement(&amp;quot;div&amp;quot;);
  3922.    const content = document.createTextNode(&amp;quot;Hello Clippy&amp;quot;);
  3923.    const clippy = document.getElementById(&amp;quot;clippy&amp;quot;);
  3924.  
  3925.    element.appendChild(content);
  3926.    clippy.appendChild(element);
  3927. }
  3928. &lt;/code&gt;&lt;/pre&gt;
  3929. &lt;p&gt;Hé, dat ging me iets makkelijker af dan ik had gedacht! Na een uur of twee van researchen, lezen en aan mijn eigen kunnen twijfelen, had ik dit zo staan. Een mooi voorbeeld dat ik beter gewoon kan beginnen en dingen doen.&lt;/p&gt;
  3930. &lt;h2&gt;Stap 2: Dynamische content renderen met een &lt;code&gt;createClippyElement&lt;/code&gt;&lt;/h2&gt;
  3931. &lt;p&gt;Dat het werkt met de te renderen &lt;code&gt;const&lt;/code&gt; is een goede eerste stap, daar word ik blij van. Maar dit is niet hoe React er uit ziet. Hier wordt meestal JSX voor gebruikt. Dat ziet er bijvoorbeeld zo uit: &lt;code&gt;const element = &amp;lt;h1&amp;gt;Hello world!&amp;lt;/h1&amp;gt;&lt;/code&gt;. Met Babel wordt deze JSX expressie &lt;em&gt;transpiled&lt;/em&gt; naar een &lt;code&gt;React.createElement&lt;/code&gt; functie.&lt;/p&gt;
  3932. &lt;p&gt;De volgende stap is dus het maken van een &lt;code&gt;createClippyElement&lt;/code&gt; functie. De functie krijgt drie parameters; een type &lt;code&gt;string&lt;/code&gt; om aan te geven welk HTML element gerenderd moet worden; een props &lt;code&gt;object&lt;/code&gt; dat bijvoorbeeld een className of inline styles bevat; en een &lt;code&gt;array&lt;/code&gt; van children. Een child kan een nieuw &lt;code&gt;createClippyElement&lt;/code&gt; zijn maar bijvoorbeeld ook een &lt;code&gt;string&lt;/code&gt; met tekst. Voor nu doet deze functie nog niets anders dan de parameters returnen.&lt;/p&gt;
  3933. &lt;pre&gt;&lt;code&gt;function createClippyElement( type, props, children ) {
  3934.    return {
  3935.        type,
  3936.        props,
  3937.        children
  3938.    }
  3939. }
  3940. &lt;/code&gt;&lt;/pre&gt;
  3941. &lt;p&gt;De &lt;code&gt;render&lt;/code&gt; functie moet iets herschreven worden, zodat ik het &lt;code&gt;createClippyElement&lt;/code&gt; kan meegeven als parameter. Ik besluit om de props nog even achterwege te laten, maar eerst te zorgen dat ik een HTML element met content kan laten renderen.&lt;/p&gt;
  3942. &lt;p&gt;Dat valt op zich wel mee. Zo zou ik er al zijn:&lt;/p&gt;
  3943. &lt;pre&gt;&lt;code&gt;function render( clippy, container ) {
  3944.    let element = document.createElement( clippy.type );
  3945.    let content = document.createTextNode( clippy.children )
  3946.  
  3947.    element.appendChild(content);
  3948.    clippy.appendChild(container);
  3949. }
  3950. &lt;/code&gt;&lt;/pre&gt;
  3951. &lt;h2&gt;Stap 3 en 4: render children én grandchildren&lt;/h2&gt;
  3952. &lt;p&gt;Maar wat als een child zelf children heeft? En die ook weer? Ik maak een aparte &lt;em&gt;recursive&lt;/em&gt; functie, die dit oppakt. Na een hoop &lt;em&gt;console loggen&lt;/em&gt; en een pair programming sessie heb ik het uiteindelijk voor elkaar.&lt;/p&gt;
  3953. &lt;pre&gt;&lt;code&gt;function createChildElements( element, children ) {
  3954.    for( let i = 0; i &amp;lt; children.length; i++ ) {
  3955.        let child = children[ i ];
  3956.        let childElement;
  3957.        if ( typeof child === &amp;quot;string&amp;quot; ) {
  3958.            childElement = document.createTextNode( child );
  3959.        }
  3960.        if ( typeof child === &amp;quot;object&amp;quot; ) {
  3961.            childElement = document.createElement ( child.type );
  3962.            if ( child.children.length &amp;gt; 0 ) {
  3963.                childElement = createChildElements( childElement, child.children );
  3964.            }
  3965.        }
  3966.        element.appendChild( childElement );
  3967.    }
  3968.    return element;
  3969. }
  3970. &lt;/code&gt;&lt;/pre&gt;
  3971. &lt;p&gt;De &lt;code&gt;render&lt;/code&gt; functie moet nu ook iets aangepast worden om de &lt;code&gt;createChildElements&lt;/code&gt; functie te gebruiken. Dat ziet er als volgt uit:&lt;/p&gt;
  3972. &lt;pre&gt;&lt;code&gt;function render( clippy, container ) {
  3973.    let element = document.createElement( clippy.type );
  3974. if( clippy.children.length &amp;gt; 0 ) {
  3975. element = createChildElements( element, clippy.children );
  3976. }
  3977. container.appendChild( element );
  3978. };
  3979. &lt;/code&gt;&lt;/pre&gt;
  3980. &lt;p&gt;Met nog geen vijftig regels code kan ik nu mijn eigen componenten maken én renderen.&lt;/p&gt;
  3981. &lt;h2&gt;Hoe nu verder?&lt;/h2&gt;
  3982. &lt;p&gt;Ik had graag een mooie werkende versie van mijn eigen React-inspired framework willen laten zien, maar... zo ver ben ik nog niet. In dit studieproject gaan nog heel wat uren zitten. Zo wordt het belangrijk om props te kunnen renderen en wil ik er nog in duiken hoe state en lifeycle in React werkt.&lt;/p&gt;
  3983. &lt;p&gt;Maar op deze manier ben ik er in geslaagd om een opdracht die me onmogelijk leek, toch vorm te geven! Het is voor mij een goede manier om te leren. Ik word uitgedaagd, heb iets om naar toe te werken en leer op mijn eigen manier en tempo. Ideaal!&lt;/p&gt;
  3984. &lt;h2&gt;Zelf aan de slag?&lt;/h2&gt;
  3985. &lt;p&gt;Wil je zelf eens zien hoe deze functies nu samen komen en zorgen dat je een HTML element kunt renderen op een pagina? Probeer &lt;a href=&quot;https://codepen.io/joseewouters/pen/VwKQdpd&quot;&gt;deze CodePen&lt;/a&gt; eens uit! Je kunt ook proberen om op basis van mijn code zelf verder te gaan om te kijken of je bijvoorbeeld props kunt toevoegen.&lt;/p&gt;
  3986. </content>
  3987.  </entry>
  3988.  <entry>
  3989.    <title>Labels zijn niet altijd wat ze lijken: hoe wordt de Accessible Name berekend?</title>
  3990.    <link href="https://www.fronteers.nl/nl/blog/2021/01/labels-zijn-niet-altijd-wat-ze-lijken-hoe-wordt-de-accessible-name-berekend"/>
  3991.    <updated>2021-01-01T00:00:00Z</updated>
  3992.    <id>https://www.fronteers.nl/nl/blog/2021/01/labels-zijn-niet-altijd-wat-ze-lijken-hoe-wordt-de-accessible-name-berekend</id>
  3993.    <content xml:lang="nl" type="html">&lt;p&gt;Sinds november ben ik aan de slag als Web Accessibility Consultant bij &lt;a href=&quot;https://www.elevenways.be/&quot;&gt;Eleven Ways&lt;/a&gt;. Het toegankelijk maken van websites (zodat iedereen ze kan gebruiken) is altijd al een onderwerp geweest waar ik me graag voor wilde inzetten.&lt;/p&gt;
  3994. &lt;p&gt;Al tijdens mijn eerste werkweek leerde ik iets wat me verraste. Ik herinner me dat ik luidop “Woah!” zei tegen mijn computerscherm. Dat “iets” is de zogeheten &lt;em&gt;Accessible Name&lt;/em&gt;. Omdat er niet veel Nederlandstalige artikelen over te vinden zijn, wijd ik er graag een stukje aan.&lt;/p&gt;
  3995. &lt;h2&gt;Wat is de Accessible Name?&lt;/h2&gt;
  3996. &lt;p&gt;Er zijn een aantal HTML-elementen die interactief zijn. Het gaat dan om elementen als links, knoppen, invoervelden, selectievakjes en keuzelijsten.&lt;/p&gt;
  3997. &lt;p&gt;In de richtlijnen voor toegankelijkheid zegt het W3C in &lt;a href=&quot;https://www.w3.org/Translations/WCAG21-nl/#label-in-naam&quot;&gt;Succescriterium 2.5.3&lt;/a&gt; over interactieve elementen het volgende:&lt;/p&gt;
  3998. &lt;blockquote&gt;
  3999. &lt;p&gt;Bij componenten van de gebruikersinterface met labels die tekst of afbeeldingen van tekst bevatten, bevat de naam de tekst die visueel wordt weergegeven.&lt;/p&gt;
  4000. &lt;/blockquote&gt;
  4001. &lt;p&gt;Dat is een mond vol. Het komt erop neer dat alle interactieve componenten zowel een &lt;em&gt;label&lt;/em&gt; als een &lt;em&gt;naam&lt;/em&gt; moeten krijgen.&lt;/p&gt;
  4002. &lt;p&gt;Maar zijn labels en namen niet hetzelfde? Nee. Het &lt;em&gt;label&lt;/em&gt; is wat gebruikers typisch op het scherm zien. De &lt;em&gt;naam&lt;/em&gt; is wat hulpsoftware ziet. Hulpsoftware haalt de &lt;em&gt;naam&lt;/em&gt; uit de zogeheten &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Glossary/Accessibility_tree&quot;&gt;Accessibility Tree&lt;/a&gt;, die op haart beurt een vereenvoudiging is van het Document Object Model.&lt;/p&gt;
  4003. &lt;p&gt;Anders gezegd: een &lt;em&gt;label&lt;/em&gt; wordt &lt;em&gt;visueel&lt;/em&gt; weergegeven, maar een naam wordt enkel opgepikt door hulptechnologieën als schermlezers en spraaksoftware. De &lt;em&gt;naam&lt;/em&gt; is dus extra belangrijk om interactieve elementen toegankelijk te maken. In WCAG-jargon noemen we deze naam daarom (toepasselijk, en om verwarring te voorkomen) graag de &lt;a href=&quot;https://www.w3.org/TR/accname-1.1/&quot;&gt;Accessible Name&lt;/a&gt;.&lt;/p&gt;
  4004. &lt;p&gt;(Noot: dit succescriterium hangt nauwe samen met &lt;a href=&quot;https://www.w3.org/Translations/WCAG21-nl/#naam-rol-waarde&quot;&gt;Succescriterium 4.1.2&lt;/a&gt; dat voorschrift dat elementen een correcte naam (&lt;em&gt;name&lt;/em&gt;), rol (&lt;em&gt;role&lt;/em&gt;) en waarde (&lt;em&gt;value&lt;/em&gt;) moeten hebben.)&lt;/p&gt;
  4005. &lt;h2&gt;Hoe wordt de Accessible Name bepaald?&lt;/h2&gt;
  4006. &lt;p&gt;De Accessible Name wordt volgens onderstaande rangorde bepaald (van belangrijkst naar minst belangrijkst):&lt;/p&gt;
  4007. &lt;ol&gt;
  4008. &lt;li&gt;Het &lt;code&gt;aria-labelledby&lt;/code&gt; attribuut (waarde van attribuut is de id-waarde van een element dat elders staat, vaak een &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;. Werking vergelijkbaar met anchor-links)&lt;/li&gt;
  4009. &lt;li&gt;Het &lt;code&gt;aria-label&lt;/code&gt; attribuut (waarde van attribuut is gewoon tekst)&lt;/li&gt;
  4010. &lt;li&gt;Het &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; element (bij formulieronderdelen)&lt;/li&gt;
  4011. &lt;li&gt;Het &lt;code&gt;value&lt;/code&gt; attribuut (bij formulieronderdelen)&lt;/li&gt;
  4012. &lt;li&gt;Het &lt;code&gt;alt&lt;/code&gt; attribuut (enkel bij afbeeldingen)&lt;/li&gt;
  4013. &lt;li&gt;Inhoud tussen begin- en eindtag (bij links en knoppen)&lt;/li&gt;
  4014. &lt;li&gt;Het &lt;code&gt;title&lt;/code&gt; attribuut&lt;/li&gt;
  4015. &lt;/ol&gt;
  4016. &lt;p&gt;Er wordt dus in eerste instantie gekeken of een &lt;code&gt;aria&lt;/code&gt;-attribuut aanwezig is.&lt;/p&gt;
  4017. &lt;p&gt;En nu komen we bij de crux van het hele verhaal.&lt;/p&gt;
  4018. &lt;ul&gt;
  4019. &lt;li&gt;Als een element &lt;em&gt;nog geen naam&lt;/em&gt; had dat uit de punten 3 t/m 7 gehaald kan worden, wordt die &lt;em&gt;toegevoegd&lt;/em&gt; door de waarde van het &lt;code&gt;aria-labelledby&lt;/code&gt; of het &lt;code&gt;aria-label&lt;/code&gt; attribuut&lt;/li&gt;
  4020. &lt;li&gt;Als een element &lt;em&gt;al een naam&lt;/em&gt; had dat uit de punten 3 t/m 7 gehaald kan worden, wordt die &lt;em&gt;vervangen&lt;/em&gt; door de waarde van het &lt;code&gt;aria-labelledby&lt;/code&gt; of het &lt;code&gt;aria-label&lt;/code&gt; attribuut&lt;/li&gt;
  4021. &lt;/ul&gt;
  4022. &lt;p&gt;Een &lt;code&gt;aria-label&lt;/code&gt; of &lt;code&gt;aria-labelledby&lt;/code&gt; krijgt dus &lt;em&gt;altijd&lt;/em&gt; voorrang.&lt;/p&gt;
  4023. &lt;p&gt;(Merk op dat deze berekening gebeurt op basis van de &lt;a href=&quot;https://www.w3.org/TR/accname-1.1/&quot;&gt;Accessible Name and Description Computation 1.1&lt;/a&gt;-specificatie van het W3C. De meeste Accessibility API’s in browsers en besturingssystemen houden zich hier netjes aan.)&lt;/p&gt;
  4024. &lt;h2&gt;Voorbeelden&lt;/h2&gt;
  4025. &lt;p&gt;Laten we even naar een eenvoudig voorbeeld kijken:&lt;/p&gt;
  4026. &lt;pre&gt;&lt;code&gt;&amp;lt;a href=&amp;quot;/overons&amp;quot; title=&amp;quot;Ons bedrijf&amp;quot;&amp;gt;Ons familiebedrijf&amp;lt;/a&amp;gt;
  4027. &lt;/code&gt;&lt;/pre&gt;
  4028. &lt;p&gt;Visueel zal &lt;em&gt;Ons familiebedrijf&lt;/em&gt; getoond worden. Het &lt;code&gt;title&lt;/code&gt; attribuut wordt genegeerd door hulpsoftware omdat het de laagste prioriteit heeft. De inhoud tussen de begin- en eindtag krijgt voorrang.&lt;/p&gt;
  4029. &lt;p&gt;(Merk op dat in sommige situaties het &lt;code&gt;title&lt;/code&gt; attribuut toch wordt opgepikt door hulpsoftware, maar dan uitsluitend als “tooltip”. Omdat je er nooit zeker van kan zijn dat de informatie wordt voorgelezen, is het dus geen goed idee om essentiële informatie te verstoppen in een &lt;code&gt;title&lt;/code&gt; attribuut.)&lt;/p&gt;
  4030. &lt;p&gt;Voorbeeld twee:&lt;/p&gt;
  4031. &lt;pre&gt;&lt;code&gt;&amp;lt;a href=&amp;quot;lego.html&amp;quot;&amp;gt;
  4032.  &amp;lt;img src=&amp;quot;lego.png&amp;quot; alt=&amp;quot;Lego Modular Assembly Square&amp;quot;&amp;gt;
  4033.  150 euro
  4034. &amp;lt;/a&amp;gt;
  4035. &lt;/code&gt;&lt;/pre&gt;
  4036. &lt;p&gt;Deze link zal door hulpsoftware worden opgelezen als: &lt;em&gt;Lego Modular Assembly Square 150 euro&lt;/em&gt;. De alt-tekst &lt;em&gt;en&lt;/em&gt; de tekst worden hier bij elkaar opgeteld.&lt;/p&gt;
  4037. &lt;p&gt;Dit is bijvoorbeeld ook de reden waarom een populair UI-patroon als &lt;em&gt;cards&lt;/em&gt; vaak toegankelijkheidsproblemen vertonen. Lees de uitstekende &lt;a href=&quot;https://adrianroselli.com/2020/02/block-links-cards-clickable-regions-etc.html&quot;&gt;blog van Adrian Roselli&lt;/a&gt; of de &lt;a href=&quot;https://www.nomensa.com/blog/2020/how-build-accessible-cards%E2%80%93block-links&quot;&gt;blog van Nomensa&lt;/a&gt; daar maar eens over.&lt;/p&gt;
  4038. &lt;p&gt;Een laatste voorbeeld:&lt;/p&gt;
  4039. &lt;pre&gt;&lt;code&gt;&amp;lt;a href=&amp;quot;lego.html&amp;quot; title=&amp;quot;Mijn Lego pagina&amp;quot; aria-label=&amp;quot;Mijn hele dure Lego-winkel&amp;quot;&amp;gt;
  4040.  &amp;lt;img src=&amp;quot;lego.png&amp;quot; alt=&amp;quot;Lego Modular Assembly Square&amp;quot;&amp;gt;
  4041.  150 euro
  4042. &amp;lt;/a&amp;gt;
  4043. &lt;/code&gt;&lt;/pre&gt;
  4044. &lt;p&gt;Vind je het addertje onder het gras? Dit is wat er gebeurt:&lt;/p&gt;
  4045. &lt;ul&gt;
  4046. &lt;li&gt;Het &lt;code&gt;title&lt;/code&gt; attribuut wordt genegeerd, omdat er tekst staat tussen de begin- en eindtag.&lt;/li&gt;
  4047. &lt;li&gt;De tekst ‘150 euro’ en de alt-tekst van het plaatje worden bij elkaar opgeteld omdat deze tussen de begin- en de eindtag staan.&lt;/li&gt;
  4048. &lt;li&gt;Maar — en dit is belangrijk — beide waarden worden vervolgens &lt;em&gt;overschreven&lt;/em&gt; door het &lt;code&gt;aria-label&lt;/code&gt; attribuut dat op het &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt; element is geplaatst.&lt;/li&gt;
  4049. &lt;/ul&gt;
  4050. &lt;p&gt;De link zal uiteindelijk klinken als &lt;em&gt;Mijn hele dure Legowinkel&lt;/em&gt;. De naam en de prijs van het product worden dus &lt;em&gt;niet&lt;/em&gt; langer opgepikt, en dat is natuurlijk niet de bedoeling. Wees dus extra voorzichtig met het gebruik van ARIA-labels.&lt;/p&gt;
  4051. &lt;h2&gt;Hoe kun je de Accessible Name controleren?&lt;/h2&gt;
  4052. &lt;p&gt;In de Developer Tools van Chrome kun je de Accessibility Tree inspecteren. Zo krijg je een idee van hoe de naam van een specifiek element berekend wordt.&lt;/p&gt;
  4053. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/accessiblename-chrome.jpeg&quot; alt=&quot;De Accessibility Tree in Chrome dat de naam en rol van een element laat zien&quot; /&gt;&lt;/p&gt;
  4054. &lt;p&gt;(Dat kan overigens ook in andere browsers.)&lt;/p&gt;
  4055. &lt;p&gt;Natuurlijk kan je ook zelf de proef op de som nemen en je pagina testen met een echte screenreader als Jaws, NVDA of VoiceOver. Zo kan je zelf horen hoe je knoppen, links en andere interactieve elementen worden opgelezen.&lt;/p&gt;
  4056. &lt;h2&gt;Oefening:&lt;/h2&gt;
  4057. &lt;p&gt;Wat wordt de Accessible Name van deze button? (dank aan Erik Kroes voor deze leuke instinker!) Laat een reactie achter met je antwoord!&lt;/p&gt;
  4058. &lt;pre&gt;&lt;code&gt;&amp;lt;button type=&amp;quot;button&amp;quot; aria-labelledby=&amp;quot;button&amp;quot; aria-label=&amp;quot;click here&amp;quot; title=&amp;quot;click&amp;quot;&amp;gt;
  4059.  &amp;lt;img alt=&amp;quot;click me&amp;quot;&amp;gt;
  4060. &amp;lt;/button&amp;gt;
  4061. &lt;/code&gt;&lt;/pre&gt;
  4062. &lt;h2&gt;Bronnen en verder lezen&lt;/h2&gt;
  4063. &lt;ul&gt;
  4064. &lt;li&gt;&lt;a href=&quot;https://www.w3.org/TR/accname-1.1/&quot;&gt;W3C - Accessible Name and Description Computation 1.1&lt;/a&gt;&lt;/li&gt;
  4065. &lt;li&gt;&lt;a href=&quot;https://webaim.org/articles/label-name/&quot;&gt;WeAIM - Decoding Label and Name for Accessibility&lt;/a&gt;&lt;/li&gt;
  4066. &lt;li&gt;&lt;a href=&quot;https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/&quot;&gt;The Paciello Group - What is an accessible name?&lt;/a&gt;&lt;/li&gt;
  4067. &lt;li&gt;&lt;a href=&quot;https://simplyaccessible.com/article/accessible-name/&quot;&gt;Simply Acessible - Demystifying the accessible name?&lt;/a&gt;&lt;/li&gt;
  4068. &lt;li&gt;&lt;a href=&quot;https://hiddedevries.nl/en/blog/2019-04-18-naming-things-to-improve-accessibility&quot;&gt;Hidde de Vries - Naming things to improve accessibility&lt;/a&gt;&lt;/li&gt;
  4069. &lt;/ul&gt;
  4070. </content>
  4071.  </entry>
  4072.  <entry>
  4073.    <title>Beveiligde gegevens ophalen met OpenID Connect en access tokens</title>
  4074.    <link href="https://www.fronteers.nl/nl/blog/2020/12/beveiligde-gegevens-ophalen-met-openid-connect-en-access-tokens"/>
  4075.    <updated>2020-12-31T00:00:00Z</updated>
  4076.    <id>https://www.fronteers.nl/nl/blog/2020/12/beveiligde-gegevens-ophalen-met-openid-connect-en-access-tokens</id>
  4077.    <content xml:lang="nl" type="html">&lt;p&gt;Wat hebben de website van je bank, een webshop en Twitter gemeen? Ze hebben een publiek gedeelte en tonen daarnaast content op basis van je account. Nadat je bent ingelogd, kun je bij je bank je saldo bekijken, geld overmaken of een nieuwe pas aanvragen. Op de webshop kun je eerdere bestellingen raadplegen of je verlanglijstje bijwerken. Bij Twitter kun je tweets plaatsen, notificaties ontvangen of je profiel aanpassen.&lt;/p&gt;
  4078. &lt;p&gt;Het is wel de bedoeling dat de frontend de gegevens van de juiste gebruiker toont. In deze blogpost lees je hoe dat kan met het gebruik van OpenID Connect en access tokens.&lt;/p&gt;
  4079. &lt;h2&gt;Sessies&lt;/h2&gt;
  4080. &lt;p&gt;Als alle pagina&#39;s volledig op de server worden gerenderd, hoef je als front-ender je alleen bezig te houden met de opmaak van de inlogpagina. Bij het opvragen van een beveiligde pagina stuurt de server je door naar de inlogpagina. De gebruiker vult een gebruikersnaam en wachtwoord in. Als deze juist zijn, maakt de server een sessie aan en zet de identifier van deze sessie in een cookie. Bij elke (beveiligde) pagina stuurt de browser het sessiecookie mee en de server geeft de persoonlijke content terug zolang de sessie geldig is.&lt;/p&gt;
  4081. &lt;p&gt;Bij client side rendering kun je dit nog steeds doen. Vraag je beveiligde gegevens op of wil je gegevens wijzigen, dan kan het antwoord een http response status 401 zijn: authorisatie vereist. Op basis van deze response laat je de gebruiker inloggen. Ook dan kan de server een sessiecookie meesturen waardoor de volgende requests wel de beveiligde gegevens kunnen opvragen of aanpassen.&lt;/p&gt;
  4082. &lt;p&gt;De backendontwikkelaar of de beheerder moeten hier wel extra moeite voor doen. Sessies zijn normaal gesproken gebonden aan een server. Doe je een request op een andere server, dan zal deze opnieuw vragen om in te loggen. Bij een wat grotere website heb je al snel te maken met meerdere servers om beschikbaarheid te garanderen. Ook hier zijn oplossingen voor: de gebruiker elke keer op dezelfde server uit laten komen of de sessies synchroniseren tussen de servers. Dit zullen backend developers en beheerders moeten inregelen.&lt;/p&gt;
  4083. &lt;p&gt;Grotere websites kunnen uit verschillende backend applicaties bestaan die onderling geen sessies uit kunnen wisselen maar wel willen weten wie er ingelogd is. Elke backend applicatie zou dan zowel verantwoordelijk zijn voor het inloggen als het teruggeven van de juiste gegevens.&lt;/p&gt;
  4084. &lt;h2&gt;JSON Web Tokens&lt;/h2&gt;
  4085. &lt;p&gt;Een alternatief voor sessiecookies is het gebruik van tokens die je per request meestuurt. Deze tokens kunnen willekeurige, niet te voorspellen strings zijn, maar ook &lt;a href=&quot;https://en.wikipedia.org/wiki/JSON_Web_Token&quot;&gt;JSON Web Tokens&lt;/a&gt;. Een JSON Web Token (JWT, uit te spreken als &amp;quot;dzjôht&amp;quot;) bestaat uit drie delen: een header, de payload en een signature (handtekening).&lt;/p&gt;
  4086. &lt;p&gt;De payload is een JSON object met “claims”, bijvoorbeeld de geldigheid, voor wie het token bestemd is, je gebruikersnaam, e-mailadres of abonnement. Een voorbeeld van de payload van een JWT:&lt;/p&gt;
  4087. &lt;pre&gt;&lt;code&gt;{
  4088.  &amp;quot;sub&amp;quot;: &amp;quot;jasha&amp;quot;,
  4089.  &amp;quot;iss&amp;quot;: &amp;quot;https://example.com/op&amp;quot;,
  4090.  &amp;quot;aud&amp;quot;: [&amp;quot;Fronteers&amp;quot;]
  4091. }
  4092. &lt;/code&gt;&lt;/pre&gt;
  4093. &lt;p&gt;In dit voorbeeld heeft de payload van de JWT drie claims: sub (gebruiker) en iss (issuer) en aud (audience). Deze claims worden later uitgelegd. Wanneer de frontend mijn profiel opvraagt bij de server, stuurt deze de JWT mee met het request. De backend valideert de JWT en stuurt vervolgens mijn profiel terug naar de frontend.&lt;/p&gt;
  4094. &lt;h2&gt;Validatie: signature&lt;/h2&gt;
  4095. &lt;p&gt;Hoe kun je een JWT valideren? De uitgever van de JWT zal de header en payload ondertekenen met een JSON Web Key (JWK). Hierbij wordt een cryptografisch algoritme gebruikt. De meest veilige variant werkt met een geheime en een publieke sleutel. De uitgever gebruikt de geheime sleutel om de signature aan te maken. De ontvanger kan vervolgens met de publieke sleutel deze handtekening valideren. Als deze validatie slaagt, weet de ontvanger dat er niet met de JWT is gerommeld. Hierbij is het van groot belang dat die geheime sleutel ook echt geheim blijft.&lt;/p&gt;
  4096. &lt;p&gt;Om de handtekening te valideren moet de ontvanger de publieke sleutel en het algoritme wel weten. Dit kan op twee manieren: de uitgever stelt een lijst van publieke sleutels online beschikbaar met het bijbehorende algoritme. Deze lijst bevat vaak de huidige sleutel, maar ook de vorige en een toekomstige zodat de uitgever een nieuwe set sleutels kan gaan gebruiken zonder dat de eindgebruiker hier last van heeft. Het kan ook dat de publieke sleutels en het algoritme voor een deployment worden uitgewisseld, bijvoorbeeld via e-mail. Een nadeel is dat deze lijst handmatig moet worden bijgewerkt.&lt;/p&gt;
  4097. &lt;h2&gt;Validatie: claims&lt;/h2&gt;
  4098. &lt;p&gt;De payload van een JWT kan (optionele) claims bevatten met betrekking tot de geldigheid:&lt;/p&gt;
  4099. &lt;ul&gt;
  4100. &lt;li&gt;&lt;code&gt;iss&lt;/code&gt; (issuer): een unieke identifier voor de uitgever. Is deze anders dan je verwacht, dan kun je de JWT niet vertrouwen.&lt;/li&gt;
  4101. &lt;li&gt;&lt;code&gt;aud&lt;/code&gt; (audience): een lijst van identifiers voor de ontvangers. Alleen als de identifier van jouw applicatie er tussen staat, hoor je de JWT te vertrouwen. Waarom is dit een lijst? Een JWT mag je namelijk doorgeven aan bijvoorbeeld je backend. Ook de backend applicaties kunnen in de &lt;code&gt;aud&lt;/code&gt; claim voorkomen en die kunnen zelf dan weer de JWT valideren en gebruiken voor het teruggeven van data.&lt;/li&gt;
  4102. &lt;li&gt;&lt;code&gt;sub&lt;/code&gt; (subject): unieke identifier van de gebruiker.&lt;/li&gt;
  4103. &lt;li&gt;&lt;code&gt;exp&lt;/code&gt; (expiration time): timestamp tot wanneer deze JWT geldig is. Is deze tijd verstreken, dan dien je de JWT niet meer te accepteren.&lt;/li&gt;
  4104. &lt;li&gt;&lt;code&gt;nbf&lt;/code&gt; (not before): timestamp vanaf wanneer deze JWT geldig is. Is deze tijd nog niet bereikt, dan mag je deze JWT nog niet accepteren.&lt;/li&gt;
  4105. &lt;/ul&gt;
  4106. &lt;p&gt;Door de combinatie van de handtekening en deze claims kunnen de frontend en diverse backend services onafhankelijk van elkaar beslissen tot welke (beveiligde) gegevens de gebruiker op dat moment toegang heeft. Hierdoor is het niet meer nodig sessies te synchroniseren.&lt;/p&gt;
  4107. &lt;h2&gt;OpenID Connect&lt;/h2&gt;
  4108. &lt;p&gt;Hoe kom je aan een JWT? Hiervoor zijn standaarden ontwikkeld. Een daarvan is &lt;a href=&quot;https://openid.net/&quot;&gt;OpenID Connect&lt;/a&gt; (OIDC). OpenID Connect is een laag bovenop &lt;a href=&quot;https://oauth.net/&quot;&gt;OAuth 2.0&lt;/a&gt;. Waar OAuth alleen de authorisatie regelt (wat mag je), regelt OIDC ook de authenticatie (wie ben je). In het vervolg behandel ik ze als één standaard waarbij ik de termen van OpenID Connect gebruik.&lt;/p&gt;
  4109. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/oidc-schema-4.svg&quot; alt=&quot;Schematische weergave van gegevens ophalen met OpenID Connect&quot; /&gt;&lt;/p&gt;
  4110. &lt;p&gt;Jouw webapplicatie (een Relying Party, RP, genoemd in OpenID Connect) doet een authenticatieverzoek bij de OpenID Provider (OP, de server). Ik zou je aanraden hiervoor een bestaande library te gebruiken. De OpenID Foundation heeft een aantal &lt;a href=&quot;https://openid.net/certification/#RPs&quot;&gt;libraries gecertificeerd&lt;/a&gt;, wat betekent dat ze aan de specificaties voldoen voor een RP implementatie.&lt;/p&gt;
  4111. &lt;p&gt;De OpenID Provider kan je vragen in te loggen, maar als er al een bestaande sessie is, mag die vaak hergebruikt worden. Hoe je inlogt verschilt per OP. Eventueel zal de OP jou toestemming vragen om bepaalde gegevens te delen met de RP of acties toe te staan. Dit soort schermen heb je waarschijnlijk wel gezien als je op een website inlogt met je Facebook of Google account. Na succesvolle authenticatie via de OpenID Provider ontvangt de Relying Party maximaal 3 tokens: een ID token, een access token en een refresh token.&lt;/p&gt;
  4112. &lt;h2&gt;ID token&lt;/h2&gt;
  4113. &lt;p&gt;De OpenID Provider kan een ID token teruggeven. Een ID token is een JWT met &lt;a href=&quot;https://openid.net/specs/openid-connect-core-1_0.html#Claims&quot;&gt;claims&lt;/a&gt; voor onder andere de tijd en wijze van authenticatie, maar ook gegevens over de gebruiker zoals naam, e-mailadres, telefoonnummer, adres en geboortedatum. Als de OP een ID token met daarin bijvoorbeeld de naam van de gebruiker meestuurt, kun je die informatie direct gebruiken voor personalisatie van je website.&lt;/p&gt;
  4114. &lt;h2&gt;Access token&lt;/h2&gt;
  4115. &lt;p&gt;Het access token gebruik je om beveiligde gegevens op te halen of te wijzigen in je backend. Je stuurt het access token met elk request naar de backend mee. Vroeger was dit vaak een willekeurige string. De backend controleerde vervolgens bij de OpenID Provider of het access token geldig was, bij welke gebruiker dit hoorde en welke toestemmingen er waren gegeven. Tegenwoordig is een access token vaker een JWT, zodat deze controle niet meer strict noodzakelijk is. De geldigheid, gebruiker en toestemmingen (scopes) kunnen immers als claims in de JWT staan. De backend kan bij elk request de geldigheid controleren en heeft daardoor geen sessie meer nodig.&lt;/p&gt;
  4116. &lt;h2&gt;Refresh token&lt;/h2&gt;
  4117. &lt;p&gt;Access tokens zijn beperkt geldig, variërend van enkele minuten tot een dag of zelfs langer. De OpenID Provider bepaalt en stuurt deze mee in de response naar de Relying Party. Met het access token kan ook een refresh token meegestuurd worden. Als de Relying Party ziet dat het access token bijna verloopt, of als dit token geweigerd wordt door de backend, dan kan het met een refresh token bij de OP een nieuw access token ophalen. Dit refresh token moet daarom zo veilig mogelijk bewaard worden. De RP moet dit refresh token ook niet delen met de backend of andere sites. Er zijn nog geen echt veilige mogelijkheden om gegevens in de browser op te slaan. &lt;a href=&quot;https://developer.mozilla.org/nl/docs/Web/API/Window/sessionStorage&quot;&gt;&lt;code&gt;sessionStorage&lt;/code&gt;&lt;/a&gt; is op dit moment acceptabel voor het opslaan van een refresh token, maar scripts die toegang hebben tot de DOM kunnen je &lt;code&gt;sessionStorage&lt;/code&gt; uitlezen.&lt;/p&gt;
  4118. &lt;p&gt;Bij Relying Parties die via de backend access tokens aanvragen, is de geldigheid van refresh tokens vaak onbeperkt of voor een langere periode. Voor client side applicaties, zoals bijvoorbeeld een React app, is het advies om een refresh token beperkt geldig te laten zijn tot maximaal een aantal uren gerekend vanaf de uitgifte van het eerste access token na inloggen. Gedurende die geldigheid kan de RP nieuwe access tokens aanvragen. Is ook de geldigheid van de refresh tokens verlopen, dan moet de gebruiker opnieuw inloggen.&lt;/p&gt;
  4119. &lt;h2&gt;Verschuiving van verantwoordelijkheden&lt;/h2&gt;
  4120. &lt;p&gt;Wordt het voor jou als frontender nou echt makkelijker om OpenID Connect en access tokens te gebruiken ipv klassieke sessies met een simpel inlogformulier? Waarschijnlijk niet, want nu is de frontend verantwoordelijk voor het zo veilig mogelijk opslaan van tokens en nieuwe tokens aan te vragen als de oude (bijna) verlopen zijn.&lt;/p&gt;
  4121. &lt;p&gt;Bij volledig publieke websites heb je meestal geen tokens nodig, maar bij gepersonaliseerde websites kun je hier wel mee te maken krijgen. Een reden kan zijn dat het inloggen, het teruggeven van je bestelgeschiedenis en het beheren van je favorieten door drie verschillende webapplicaties wordt afgehandeld. Voor de gebruiker is dit echte één website waarvoor die verwacht met één keer inloggen bij al diens gegevens te kunnen.&lt;/p&gt;
  4122. &lt;p&gt;In de backend wordt het wel eenvoudiger. Er is geen synchronisatie van sessies nodig, slechts één applicatie houdt zich bezig met het uitgeven van de tokens, terwijl de andere applicaties los van elkaar de access tokens kunnen consumeren voor het teruggeven of wijzigen van beveiligde gegevens.&lt;/p&gt;
  4123. </content>
  4124.  </entry>
  4125.  <entry>
  4126.    <title>Een betere sfeer begint bij jezelf (en eindigt bij je collega&#39;s)</title>
  4127.    <link href="https://www.fronteers.nl/nl/blog/2020/12/een-betere-sfeer-begint-bij-jezelf-en-eindigt-bij-je-collegas"/>
  4128.    <updated>2020-12-30T00:00:00Z</updated>
  4129.    <id>https://www.fronteers.nl/nl/blog/2020/12/een-betere-sfeer-begint-bij-jezelf-en-eindigt-bij-je-collegas</id>
  4130.    <content xml:lang="nl" type="html">&lt;p&gt;Laten we voor 2021 als goed voornemen noteren dat we het nieuwe jaar fijner met elkaar omgaan. Dat we wat meer naar elkaar omkijken, beter samenwerken in het signaleren van eenzaamheid en er voor waken een negatieve impact te hebben op het werkplezier van onze collega&#39;s.&lt;/p&gt;
  4131. &lt;p&gt;Ik heb helaas meegemaakt hoe het is om in een toxische omgeving te werken. Ik had daarna een vol jaar nodig om terug mezelf te worden. Dat is ondertussen een aantal jaar geleden maar ik denk er nog vaak over na wat ik anders had kunnen doen om de sfeer te verbeteren (en niet wekelijks huilend thuis te komen). In dit blog wil ik graag jou ook aan het denken zetten over de sfeer op je werk, en de rol die je daarin speelt.&lt;/p&gt;
  4132. &lt;p&gt;Eerst gaan we samen kijken wat de situatie bij jou op je werk is. Pak pen en papier, en turf hoe vaak je op een van onderstaande stellingen met &#39;ja&#39; antwoordt! Er zitten positieve en negatieve stellingen bij, maar welke dat zijn is redelijk subjectief.&lt;/p&gt;
  4133. &lt;p&gt;&lt;em&gt;Als ik in een Slack kanaal om hulp vraag bij mijn lokale omgeving...&lt;/em&gt;&lt;/p&gt;
  4134. &lt;ul&gt;
  4135. &lt;li&gt;krijg ik meestal geen reactie&lt;/li&gt;
  4136. &lt;li&gt;is het wachten op de reactie &amp;quot;RTFM&amp;quot;&lt;/li&gt;
  4137. &lt;li&gt;krijg ik een prive-berichtje van een collega met feedback over de vraag, maar geen antwoord&lt;/li&gt;
  4138. &lt;li&gt;moet ik kiezen uit meerdere mensen die me wel willen helpen&lt;/li&gt;
  4139. &lt;li&gt;kom ik altijd bij dezelfde persoon uit&lt;/li&gt;
  4140. &lt;/ul&gt;
  4141. &lt;p&gt;&lt;em&gt;Tijdens een team-overleg...&lt;/em&gt;&lt;/p&gt;
  4142. &lt;ul&gt;
  4143. &lt;li&gt;houd ik soms dingen voor mezelf omdat ik bang ben voor de mening van anderen&lt;/li&gt;
  4144. &lt;li&gt;lopen de gemoederen soms hoog op en worden mensen boos of emotioneel&lt;/li&gt;
  4145. &lt;li&gt;staat er altijd wel een kaartje in de positieve kolom over de sfeer in het team&lt;/li&gt;
  4146. &lt;li&gt;merk ik dat sommige collega&#39;s vooral met andere dingen bezig zijn&lt;/li&gt;
  4147. &lt;li&gt;wordt er vaak over dezelfde zaken geklaagd, maar blijven concrete oplossingen uit&lt;/li&gt;
  4148. &lt;/ul&gt;
  4149. &lt;p&gt;&lt;em&gt;Er zijn collega&#39;s...&lt;/em&gt;&lt;/p&gt;
  4150. &lt;ul&gt;
  4151. &lt;li&gt;die het echt niet begrijpen, dus ik steek daar geen tijd en energie in&lt;/li&gt;
  4152. &lt;li&gt;die echt onwijs bot zijn en je soms behandelen alsof je dom bent&lt;/li&gt;
  4153. &lt;li&gt;die eigenlijk altijd aan het woord zijn tijdens een meeting&lt;/li&gt;
  4154. &lt;li&gt;die me een veilig gevoel geven&lt;/li&gt;
  4155. &lt;li&gt;die zo&#39;n impact op het team hebben, dat wanneer ze een week met vakantie zijn, iedereen leuker tegen elkaar is&lt;/li&gt;
  4156. &lt;/ul&gt;
  4157. &lt;p&gt;&lt;em&gt;Mijn werkgever of manager...&lt;/em&gt;&lt;/p&gt;
  4158. &lt;ul&gt;
  4159. &lt;li&gt;luistert naar feedback maar doet er vervolgens niets mee&lt;/li&gt;
  4160. &lt;li&gt;geeft me in het openbaar kritiek maar complimenten 1 op 1&lt;/li&gt;
  4161. &lt;li&gt;verwacht dat ik werk in mijn vrije tijd&lt;/li&gt;
  4162. &lt;li&gt;heeft een &#39;old boys network&#39; om zich heen van favoriete collega&#39;s, waar ik niet bij hoor&lt;/li&gt;
  4163. &lt;li&gt;lijkt te denken dat mijn werk niets voorstelt&lt;/li&gt;
  4164. &lt;/ul&gt;
  4165. &lt;p&gt;&lt;em&gt;Nadat ik de werkdag afsluit...&lt;/em&gt;&lt;/p&gt;
  4166. &lt;ul&gt;
  4167. &lt;li&gt;voel ik me overprikkeld en druk&lt;/li&gt;
  4168. &lt;li&gt;heb ik een gevoel van opluchting dat de dag er op zit&lt;/li&gt;
  4169. &lt;li&gt;ga ik lekker ontspannen koken of sporten&lt;/li&gt;
  4170. &lt;li&gt;heb ik de neiging om te klagen over mijn werk&lt;/li&gt;
  4171. &lt;li&gt;voel ik me wel eens eenzaam&lt;/li&gt;
  4172. &lt;/ul&gt;
  4173. &lt;p&gt;Ja? Heb je het geturfd? Heb je vaker dan 10 keer &#39;ja&#39;? Hoe voel je je daarbij?&lt;/p&gt;
  4174. &lt;p&gt;Hoe goed de cultuur op je werk bij je past, verschilt per mens. Misschien hou je wel van een competitieve omgeving waar iedereen wat meer met zichzelf bezig is. En soms geven plagerijtjes jou juist het gevoel erbij te horen. Maar wat de één geen probleem vindt kan juist voor de ander meewerken aan het langzaam verpieteren van de goede sfeer tussen collega&#39;s, en daarmee een enorme impact hebben op hoe lekker jij in je vel zit.&lt;/p&gt;
  4175. &lt;p&gt;Ik pluk nu drie stellingen uit het lijstje hierboven waarvan ik denk dat ze onderschat worden, terwijl ze wel een probleem (kunnen) vormen.&lt;/p&gt;
  4176. &lt;h2&gt;Als ik in een Slack kanaal om hulp vraag bij mijn lokale omgeving krijg ik meestal geen reactie&lt;/h2&gt;
  4177. &lt;p&gt;Mensen kijken bij jou op je werk eigenlijk nooit naar Slack. Of er is niemand die zich direct aangesproken voelt om te reageren op je vraag (laat staan met een botte reactie &amp;quot;RTFM, read the fucking manual&amp;quot;, welke op een heel ander niveau problematisch is). Maar wat doet dit met jou? Moedigt dit je aan om zelf op onderzoek uit te gaan? Voel je je genegeerd? Voel je je tot last van anderen?
  4178. Als je je genegeerd voelt kan dit een trigger zijn om het probleem te veel bij jezelf te leggen waardoor je onzekerder wordt en de drempel om om hulp te vragen hoger wordt. Dit werkt een sfeer met een incrowd (de mensen die elkaar wel helpen) en een &#39;ieder voor zich&#39; mentaliteit uiteindelijk in de hand.&lt;/p&gt;
  4179. &lt;h2&gt;Subtiele sfeerverkwanselaars&lt;/h2&gt;
  4180. &lt;p&gt;Als je niet degene bent die dit vaak overkomt, kijk dan eens naar jouw aandeel in hoe je team met vragen omgaat. Negeer je mensen als ze een lastige vraag hebben? Hiermee geef je mensen het idee dat ze niet gezien worden? Plaats je alleen een (lollige) emoji als reactie? Dat is passief aggressief gedrag waarmee je eigenlijk iemand laat weten dat je ze gezien hebt, maar alsnog negeert. Of ben je diegene die met flauwe grappen reageert, maar nooit degene die een poging doet tot het verhelpen van het probleem? Wat je namelijk met dat laatste doet is de vraag niet alleen negeren, maar ook de aandacht van de vraag af halen.&lt;/p&gt;
  4181. &lt;h2&gt;Tip voor sfeerverbeteraars&lt;/h2&gt;
  4182. &lt;p&gt;Collega&#39;s die wat onzeker zijn aangelegd vinden het vaak moeilijk om een vraag te stellen in een openbaar kanaal. Dat ze het toch doen is dapper en zegt tegelijk dat ze zich op dit moment nog veilig voelen om zich kwetsbaar op te stellen (en dit is MEGA belangrijk voor een goede sfeer).
  4183. Het helpt daarom al als je interacteert met de vragensteller in het openbaar om te kijken tot welk punt je ze zou kunnen helpen, of om het probleem te verduidelijken. Heb je zelf op dat moment geen tijd om iemand te helpen, stuur dan een berichtje met de vraag of ze al geholpen zijn, en bied anders aan om op een ander moment mee te kijken. Kijk eventueel met je team of er een betere plek is om vragen te stellen zodat ze beter gezien worden. Of is er een manier om het helpen van collega&#39;s in te bouwen in je werkschema?&lt;/p&gt;
  4184. &lt;h2&gt;Als ik in een Slack kanaal om hulp vraag is het wachten op de reactie &amp;quot;RTFM&amp;quot;&lt;/h2&gt;
  4185. &lt;p&gt;Ik kan me voorstellen dat dit je ontmoedigt om vragen te stellen, want dit is een onwijs toxische reactie. Het gaat er namelijk van uit dat jij niet eerst zelf dingen hebt geprobeerd of hebt geprobeerd te googelen. Het gaat er ook van uit dat de documentatie alle verschillende mogelijke gevallen behandelt, en als zodanig jouw vraag tot een domme vraag maakt.&lt;/p&gt;
  4186. &lt;h2&gt;Subtiele sfeerverkwanselaars&lt;/h2&gt;
  4187. &lt;p&gt;Als je iemand bent die dit of iets dat hier in het verlengde van ligt graag tegen collega&#39;s zegt of typt, dan wil ik je vragen om nog eens goed te kijken naar jouw prioriteiten op je werk. Wat is het dat jouw tijd en werk belangrijker maakt dan die van je collega&#39;s? Naast dat je collega met deze variant van &amp;quot;wat een domme vraag zeg&amp;quot; niet geholpen is, zet je vooral een sfeer neer waarin mensen zien dat je subtiel belachelijk gemaakt wordt als je een vraag stelt. En geef je een voorbeeld aan de mensen die naar jou opkijken dat dit de manier is waarop je met elkaar omgaat.
  4188. (En oh, staat het werkelijk in de handleiding? Geef dan een link naar de juiste pagina. Ik moet overigens het eerste in-house documentatiesysteem nog tegenkomen dat compleet en up to date is en niet alleen de basis behandelt, maar ook goed helpt met troubleshooting!)&lt;/p&gt;
  4189. &lt;p&gt;Het idee van &amp;quot;domme vragen&amp;quot; is er een die ten grondslag ligt aan een toxische werksfeer. De gedachte dat ergens iets meer over weten jou een speciaal aanzien geeft binnen het team is een valstrik voor onzekere mensen. Alleen meer weten dan anderen (en dat op die manier uitdragen) maakt namelijk niet dat mensen echt respect voor jou en je kennis zullen hebben, het maakt dat men weet dat ze vooral naar jou toe moeten komen als er iets te &#39;halen&#39; valt, niet om iets te &#39;brengen&#39; (positiviteit, gezelligheid).&lt;/p&gt;
  4190. &lt;h2&gt;Tip voor sfeerverbeteraars&lt;/h2&gt;
  4191. &lt;p&gt;Als jij gul bent met je kennis, in plaats van krampachtig en gierig, komen mensen bij je voor je gezelschap. En als je zelf af en toe laat weten aan collega&#39;s dat je iets niet weet en ergens hulp bij kunt gebruiken, draag je bij aan een veilige werksfeer, waar je als team voor elkaar klaar staat en samen problemen oplost.&lt;/p&gt;
  4192. &lt;p&gt;Hoe je als team omgaat met de &amp;quot;domste vragen&amp;quot; van collega&#39;s laat zien hoe emotioneel intelligent als bedrijf bent. Het zorgt er ook voor dat er minder verloop is bij je bedrijf en dat je met elkaar de werkdruk verdeelt. Spreek elkaar hier op aan, link collega&#39;s dit blog en werk samen naar een positieve, leergierige cultuur!&lt;/p&gt;
  4193. &lt;h2&gt;Tijdens een teamoverleg merk ik dat sommige collega&#39;s vooral met andere dingen bezig zijn&lt;/h2&gt;
  4194. &lt;p&gt;We zitten allemaal wel eens in een meeting die niet vooruit te branden is. Waar iedereen nog helemaal in de sfeer van het vorige of volgende weekend zit, moe is, of waar je gewoon geen duidelijke bijdrage aan weet mee te geven. Een goede gespreksleider voelt dit aan en probeert hier iets aan te doen. Bijvoorbeeld door het gesprek efficienter te laten verlopen, de groep aanwezigen te beperken of gewoon de vergadering in te korten.Desondanks zijn sommige collega&#39;s wel erg snel geneigd om gewoon door te blijven werken terwijl anderen aan het woord zijn, of met hun telefoon te gaan spelen. Of de camera tijdens de online call uitgeschakeld te houden en niet duidelijk deel te nemen aan de meeting.&lt;/p&gt;
  4195. &lt;h2&gt;Subtiele sfeerverkwanselaars&lt;/h2&gt;
  4196. &lt;p&gt;Focus bewaren tijdens een meeting, zeker als die online is in verband met thuiswerken, is best lastig. Maar het is heel onfatsoenlijk als je (zichtbaar!) andere dingen zit te doen tijdens een bijeenkomst waar net iemand een verhaal zit te vertellen. Als het moeilijk is om je te concentreren, waar komt dat dan door? En wat kun je daar zelf aan verbeteren? Als dat wat je aan het doen bent belangrijker is dan de vergadering, is het beter om uit het overleg te stappen. Dit geldt natuurlijk niet voor iets als een scrum retrospective.
  4197. Het kan super fijn zijn om je camera uit te laten tijdens een online meeting, ik weet het. Maar je helpt er een ander niet mee als je ze dwingt om tegen een logo (of tijdens een meeting: een muur van logo&#39;s) aan te kijken. Als jij de eerste bent die de camera inschakelt, geef je het goede voorbeeld en laat je de spreker zien dat je naar ze luistert!&lt;/p&gt;
  4198. &lt;h2&gt;Tip voor sfeerverbeteraars&lt;/h2&gt;
  4199. &lt;p&gt;De verantwoordelijkheid voor het goed verlopen van een bijeenkomst ligt bij de scrummaster (of de teamleider), maar mogelijk is er wel ruimte voor jou om te kijken hoe je de meeting vlotter zou kunnen trekken. Is het nodig dat iedereen erbij is? Kun je vragen of iedereen de camera aan kan zetten? Is het het format van de meeting? Zou je een timer kunnen instellen voor de verschillende onderdelen? Helpt het om collega&#39;s even bij de les te houden door ze te betrekken in het gesprek? Als je scrum gebruikt, is dit misschien (heel meta) ook een goed onderwerp voor tijdens de volgende retrospective.&lt;/p&gt;
  4200. &lt;h2&gt;De rode draad&lt;/h2&gt;
  4201. &lt;p&gt;Misschien zijn deze punten heel voor de hand liggend, maar hopelijk is je een rode draad opgevallen: Als je je kwetsbaar durft op te stellen, en de mensen waarmee je werkt laat zien dat je ze ziet, kun je de sfeer op je werk positief beinvloeden. Ik denk eigenlijk dat de meeste toxische werkomgevingen zijn ontstaan uit het tegenovergestelde: het gevoel van ego, het idee dat empathie geen plek heeft in de techwereld, het idee dat je als manager, teamleider of senior ontwikkelaar alles hoort te weten en dat het je baan kost als je toegeeft dat je iets niet weet.&lt;/p&gt;
  4202. &lt;p&gt;Mensen laten zien dat je ze &#39;ziet&#39; kan op zoveel manieren. Vragen hoe het met iemand gaat waarvan je weet dat ze het nu moeilijk hebben met de Coronacrisis. Tijdens een vergadering iemand die minder vaak gehoord wordt naar hun mening vragen. Of in het openbaar noemen hoe goed die collega ergens in is. Iemand die je minder vaak spreekt kun je eens privé vragen of ze je kunnen helpen als &#39;&lt;a href=&quot;https://en.wikipedia.org/wiki/Rubber_duck_debugging&quot;&gt;rubber eendje&lt;/a&gt;&#39;. Samen een taai probleem oppakken tijdens een peer programming sessie (en ja, dit kan ook online! Bijvoorbeeld met &lt;a href=&quot;https://code.visualstudio.com/blogs/2017/11/15/live-share&quot;&gt;Visual Studio Live Share&lt;/a&gt;.).&lt;/p&gt;
  4203. &lt;p&gt;Heb je collega&#39;s die zich zo gedragen zoals je herkent uit dit blog? Zijn er mensen die opmerkingen maken die best rot aankomen, en die niet snappen dat dat meewerkt aan een nare werksfeer? Geef het een paar dagen en check dan even bij die persoon waar dit vandaan komt. Maar vraag vooral het doelwit van de opmerkingen privé hoe de opmerking bij ze aankwam, en hoe je ze kunt ondersteunen als het weer voorkomt. Uiteraard geldt dit helemaal als je racisme of seksisme constateert, het lijkt me vrij logisch dat subtiele opmerkingen op dit vlak nog wel het dodelijkst zijn voor een veilig gevoel op het werk en &lt;em&gt;bad behaviour&lt;/em&gt; op dit vlak mogen we nooit tolereren.&lt;/p&gt;
  4204. &lt;p&gt;Werk je nou bij een bedrijf waar de sfeer al zo slecht is dat je super overprikkeld of vol negativiteit de dag afsluit? Jij hebt zelf invloed op de sfeer, maar die sfeer is niet afhankelijk van jou alleen! Zorg dat een vervelende tijd in een slecht team je niet breekt en verpest voor een positievere werkervaring. Want hoe cynischer je wordt, hoe moeilijker het wordt om plezier te hebben in je werk.&lt;/p&gt;
  4205. &lt;p&gt;Kortom: laten we allemaal in 2021, in deze onzekere tijden, eerlijk kijken naar ons eigen gedrag, en onze bijdrage aan de onderlinge sfeer en het geluk van anderen. Want juist nu is het belangrijk dat we elkaar hier doorheen helpen, mentaal net zo goed als fysiek met mondkapjes en anderhalve meter afstand. Ik help jou er ook graag doorheen. Stuur me gerust een berichtje op &lt;a href=&quot;https://twitter.com/anneke&quot;&gt;twitter&lt;/a&gt; of &lt;a href=&quot;https://www.linkedin.com/in/annekesinnema/&quot;&gt;linkedin&lt;/a&gt; als je naar aanleiding van deze blog vragen hebt of iemand nodig hebt die je aanmoedigt om vooral elders werk te zoeken :-)&lt;/p&gt;
  4206. </content>
  4207.  </entry>
  4208.  <entry>
  4209.    <title>Introductie Web Components</title>
  4210.    <link href="https://www.fronteers.nl/nl/blog/2020/12/introductie-web-components"/>
  4211.    <updated>2020-12-29T00:00:00Z</updated>
  4212.    <id>https://www.fronteers.nl/nl/blog/2020/12/introductie-web-components</id>
  4213.    <content xml:lang="nl" type="html">&lt;p&gt;Web components is een W3C webstandaard waarmee je, eenvoudig gezegd, je eigen HTML-tags kunt maken.&lt;/p&gt;
  4214. &lt;p&gt;Het toevoegen van een plattegrond op je webpagina kan dan zo eenvoudig zijn als het toevoegen van deze tag:&lt;/p&gt;
  4215. &lt;pre&gt;&lt;code&gt;&amp;lt;g-map latitude=&amp;quot;52.3812258&amp;quot; longitude=&amp;quot;4.9001255&amp;quot;&amp;gt;&amp;lt;/g-map&amp;gt;
  4216. &lt;/code&gt;&lt;/pre&gt;
  4217. &lt;p&gt;Met web components kan je component-gebaseerd werken zonder dat je een JavaScript framework nodig zoals Angular, React of Vue. De tag moet wel beschikbaar gemaakt worden in de pagina met JavaScript. Hier komen we nog op terug.&lt;/p&gt;
  4218. &lt;p&gt;&lt;a href=&quot;https://en.wikipedia.org/wiki/Web_Components#History&quot;&gt;Volgens Wikipedia&lt;/a&gt; werden web components geïntroduceerd door &lt;a href=&quot;https://fronteers.nl/congres/2011/sessions/web-components-and-model-driven-views-alex-russell&quot;&gt;Alex Russell van Google tijdens de Fronteers Conferentie in 2011&lt;/a&gt;.&lt;/p&gt;
  4219. &lt;p&gt;De specificatie is na een aantal langdurige wijzigingen eindelijk gereed en wordt nu door alle &lt;a href=&quot;https://caniuse.com/custom-elementsv1&quot;&gt;moderne browsers&lt;/a&gt; ondersteund.
  4220. Oudere browsers kunnen web components gebruiken in combinatie met polyfills.&lt;/p&gt;
  4221. &lt;p&gt;Begonnen als zo&#39;n polyfill is het door Google ontwikkelde &lt;a href=&quot;https://www.polymer-project.org/&quot;&gt;Polymer&lt;/a&gt;. Hiermee konden web components al worden gebruikt terwijl browsers nog geen ondersteuning hadden.
  4222. Het is het enige bekende framework met web components als basis.&lt;/p&gt;
  4223. &lt;p&gt;Sinds 2018 zijn van dit project nog twee delen over die ook nu handig zijn als je met web components aan de slag gaat:&lt;/p&gt;
  4224. &lt;ul&gt;
  4225. &lt;li&gt;&lt;a href=&quot;https://lit-element.polymer-project.org/&quot;&gt;LitElement&lt;/a&gt;: een basisclass voor Web Components.&lt;/li&gt;
  4226. &lt;li&gt;&lt;a href=&quot;https://lit-html.polymer-project.org/&quot;&gt;lit-html&lt;/a&gt;: een templating library gebaseerd op JavaScript template literals (dus gebruik makend van &lt;code&gt;${var}…&lt;/code&gt;).&lt;/li&gt;
  4227. &lt;/ul&gt;
  4228. &lt;h2&gt;Technologieën&lt;/h2&gt;
  4229. &lt;p&gt;Web Components is een verzamelnaam van drie webtechnologieën: Shadow DOM, Custom Elements en HTML Templates.&lt;/p&gt;
  4230. &lt;h2&gt;Shadow DOM&lt;/h2&gt;
  4231. &lt;p&gt;Met Shadow DOM is het mogelijk om binnen je eigen tag een hele HTML-structuur op te nemen inclusief CSS en JavaScript die is afgeschermd van de rest van de pagina, zodat conflicten met de rest van de pagina worden vermeden.&lt;/p&gt;
  4232. &lt;p&gt;In de browser inspector is het mogelijk om in de Shadow DOM te kijken:&lt;/p&gt;
  4233. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/shadow-root.png&quot; alt=&quot;Een screenshot van Firefox Devtools, waarin de shadow DOM van een element wordt gemarkeerd met &amp;quot;#shadow-root&amp;quot;&quot; /&gt;&lt;/p&gt;
  4234. &lt;h2&gt;Custom Elements&lt;/h2&gt;
  4235. &lt;p&gt;Een Custom Element is een JavaScript class waarmee je het gedrag van het element definieert.&lt;/p&gt;
  4236. &lt;h2&gt;HTML Templates&lt;/h2&gt;
  4237. &lt;p&gt;Alle HTML die tussen &lt;code&gt;&amp;lt;template&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;/template&amp;gt;&lt;/code&gt; staat wordt door de browser niet geparsed, dus CSS, JavaScript en bijvoorbeeld afbeeldingen worden niet uitgevoerd en gedownload. Dit template kan je met JavaScript kopiëren en in je Custom Element gebruiken, waarna het wel wordt geparset. Meer over het template element vind je op
  4238. &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template&quot;&gt;&lt;template&gt;: The Content Template element op MDN&lt;/template&gt;&lt;/a&gt;.&lt;/p&gt;
  4239. &lt;h2&gt;Code voorbeeld&lt;/h2&gt;
  4240. &lt;p&gt;Hieronder staat de de code van een waarschuwings-component dat verder nog niet veel kan.&lt;/p&gt;
  4241. &lt;pre&gt;&lt;code&gt;// Definieer het MyWarning Custom Element
  4242. class MyWarning extends HTMLElement {
  4243.  // De constructor wordt aangeroepen als van de class
  4244.  // een instantie wordt gemaakt
  4245.  constructor() {
  4246.    super();
  4247.  
  4248.    // Maak een shadow DOM en verbind die aan dit custom element
  4249.    this.attachShadow({mode: &#39;open&#39;});
  4250.  
  4251.    // Vul de shadow DOM met HTML
  4252.    this.shadowRoot.innerHTML = `
  4253.      &amp;lt;style&amp;gt;
  4254.        div {
  4255.          padding: 20px;
  4256.          border: 5px solid red;
  4257.        }
  4258.      &amp;lt;/style&amp;gt;
  4259.      &amp;lt;div&amp;gt;
  4260.        &amp;lt;slot&amp;gt;
  4261.      &amp;lt;/div&amp;gt;
  4262.    `;
  4263.  }
  4264. }
  4265.  
  4266. // Definieer een my-warning tag en koppel deze aan het custom
  4267. // element MyWarning
  4268. customElements.define(&#39;my-warning&#39;, MyWarning);
  4269. &lt;/code&gt;&lt;/pre&gt;
  4270. &lt;p&gt;Dit custom element zou je als volgt in HTML kunnen gebruiken:&lt;/p&gt;
  4271. &lt;pre&gt;&lt;code&gt;&amp;lt;my-warning&amp;gt;Dit is een waarschuwing&amp;lt;/my-warning&amp;gt;
  4272. &lt;/code&gt;&lt;/pre&gt;
  4273. &lt;p&gt;In de browser ziet dit er zo uit:&lt;/p&gt;
  4274. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/my-warning.png&quot; alt=&quot;Een blok met een rode rand met daarin de tekst &amp;quot;Dit is een waarschuwing&amp;quot;&quot; /&gt;&lt;/p&gt;
  4275. &lt;p&gt;Je kan de code en het resultaat ook bekijken en aanpassen in deze &lt;a href=&quot;https://codepen.io/edwinm/pen/QWKMaKy&quot;&gt;Codepen&lt;/a&gt;.&lt;/p&gt;
  4276. &lt;p&gt;Wat misschien het eerste opvalt is het gebruik van het koppelteken in de HTML-tag. Dit is om onderscheid te maken tussen web components en &amp;quot;native&amp;quot; HTML-tags en is dus verplicht als het om web components gaat.&lt;/p&gt;
  4277. &lt;p&gt;In het JavaScript zien we dat de Shadow DOM wordt gevuld met CSS en HTML-code. &lt;code&gt;&amp;lt;slot&amp;gt;&lt;/code&gt; is de plaatshouder voor de inhoud van de &lt;code&gt;&amp;lt;my-warning&amp;gt;&lt;/code&gt;-tag.&lt;/p&gt;
  4278. &lt;p&gt;Door het gebruik van de Shadow DOM is de toegepaste CSS alleen geldig binnen deze Shadow DOM en nooit op de rest van de pagina.&lt;/p&gt;
  4279. &lt;ul&gt;
  4280. &lt;li&gt;Dit custom element kan worden uitgebreid met verschillende &amp;quot;levenscyclus functies&amp;quot;, die worden aangeroepen als het bijvoorbeeld aan de pagina wordt toegevoegd wordt of juist wordt verwijderd.&lt;/li&gt;
  4281. &lt;li&gt;Je kan de attributen uitlezen, reageren als de waarde van een attribuut verandert en je kan net als gewone HTML-elementen events afvuren.&lt;/li&gt;
  4282. &lt;li&gt;Op &lt;a href=&quot;https://developers.google.com/web/fundamentals/web-components/customelements&quot;&gt;Web Fundamentals&lt;/a&gt; wordt uitgebreid beschreven hoe je een custom element maakt.&lt;/li&gt;
  4283. &lt;/ul&gt;
  4284. &lt;p&gt;Miniplugje: een paar onderdelen van een Web Component zijn wat omslachtig en niet zo declaratief. Om dit te verbeteren heb ik de lichtgewicht &lt;a href=&quot;https://github.com/edwinm/web-component-decorator&quot;&gt;web-component-decorator&lt;/a&gt; geschreven. Je hebt hiervoor wel TypeScript nodig.&lt;/p&gt;
  4285. &lt;h2&gt;Customized built-in elements&lt;/h2&gt;
  4286. &lt;p&gt;Met customized built-in elements kan je deze notatie gebruiken:&lt;/p&gt;
  4287. &lt;pre&gt;&lt;code&gt;&amp;lt;button is=&amp;quot;my-super-button&amp;quot;&amp;gt;Klik mij&amp;lt;/button&amp;gt;
  4288. &lt;/code&gt;&lt;/pre&gt;
  4289. &lt;p&gt;Dit is een bestaand HTML-element die met het is-attribuut wordt uitgebreid naar een custom element. Een groot voordeel van deze notatie is dat je progressive enhancement kan toepassen: de button werkt in elke browser, ook als deze geen web components ondersteunt. Als JavaScript en web components wel beschikbaar zijn, dan krijgt de bezoeker een rijkere &amp;quot;my-super-button&amp;quot; custom element.&lt;/p&gt;
  4290. &lt;p&gt;Als je op de &lt;a href=&quot;https://caniuse.com/custom-elementsv1&quot;&gt;caniuse pagina&lt;/a&gt; kijkt, dan zal je zien dat Safari deze customized built-in elements niet ondersteunt. De toepassing hiervan wordt daardoor erg beperkt en dat is erg jammer.&lt;/p&gt;
  4291. &lt;h2&gt;Bibliotheken&lt;/h2&gt;
  4292. &lt;h2&gt;Webcomponents.org&lt;/h2&gt;
  4293. &lt;p&gt;Het &lt;a href=&quot;https://www.webcomponents.org/&quot;&gt;webcomponents.org&lt;/a&gt; project heeft als doel om een complete bibliotheek aan te bieden van Web Components. Iedereen kan web components toevoegen, vergelijkbaar met npmjs.com.&lt;/p&gt;
  4294. &lt;h2&gt;Open Web Components&lt;/h2&gt;
  4295. &lt;p&gt;Het &lt;a href=&quot;https://open-wc.org/&quot;&gt;Open Web Components&lt;/a&gt; project is gebaseerd op LitElement en lit-html uit het Polymer-project, maar uitgebreid met verschillende tools om het ontwikkelen makkelijker te maken, zoals build- en test-scripts.&lt;/p&gt;
  4296. &lt;h2&gt;Web Components in Angular, Vue en React&lt;/h2&gt;
  4297. &lt;p&gt;Het idee van Web Components is niet nieuw. Diverse JavaScript-frameworks bieden ook componenten aan. Het voordeel van web components is dat ze native zijn en je niet aan een bepaald framework vast zit.&lt;/p&gt;
  4298. &lt;p&gt;Bedrijven die jaren geleden hebben geïnvesteerd in AngularJS en zagen dat hun codebase van de een op de andere dag was verouderd bij de introductie van Angular 2, weten wat het nadeel is van framework-afhankelijkheid. Bijvoorbeeld ING werkt nu wereldwijd met web components. Ze hebben zelfs hun componentenbibliotheek &lt;a href=&quot;https://lion-web-components.netlify.app/&quot;&gt;Lion Web Components&lt;/a&gt; voor iedereen beschikbaar gemaakt.&lt;/p&gt;
  4299. &lt;p&gt;Het voordeel van web components is dat je daarin je componenten kunt schrijven en die vervolgens in elk ander framework kunt gebruiken. Of toch niet?&lt;/p&gt;
  4300. &lt;p&gt;In Angular en Vue kan je prima web components gebruiken, precies zoals je gewend bent in dat framework. Je kunt Angular- en Vue-componenten ook goed omzetten in web components.&lt;/p&gt;
  4301. &lt;p&gt;In &lt;a href=&quot;https://custom-elements-everywhere.com/&quot;&gt;Custom Elements Everywhere&lt;/a&gt; staat een lijst van alle bekende frameworks en hoe goed ze met custom elements omgaan. Spoiler: React is de enige spelbreker.&lt;/p&gt;
  4302. &lt;p&gt;In React moet je extra toeren uithalen om web components te kunnen gebruiken. Het toekennen van datastructuren aan een attribuut of het luisteren naar events werkt namelijk anders. Het werkt alleen als je eerst een referentie maakt naar het web component en vervolgens met die referentie het web component gebruikt. Handig is anders.&lt;/p&gt;
  4303. &lt;p&gt;Binnen React kan je ook een component omzetten naar een web component, maar daar heb je wel externe wrappers voor nodig. Hopelijk gaat React snel beter om met web components.&lt;/p&gt;
  4304. &lt;h2&gt;Conclusie&lt;/h2&gt;
  4305. &lt;p&gt;Web components zijn heel krachtig en te gebruiken op zowel moderne als oudere browsers. Als je al een framework gebruikt, dan is het misschien niet zo nuttig. Maar wil je framework-onafhankelijk zijn of juist een lichtgewicht (JAMStack) website met snelle laadtijden bouwen, dan zijn web components een voor de hand liggende keus.&lt;/p&gt;
  4306. </content>
  4307.  </entry>
  4308.  <entry>
  4309.    <title>Bewustwording, de noodzaak van echte verhalen over ontoegankelijkheid</title>
  4310.    <link href="https://www.fronteers.nl/nl/blog/2020/12/bewustwording-de-noodzaak-van-echte-verhalen-over-ontoegankelijkheid"/>
  4311.    <updated>2020-12-28T00:00:00Z</updated>
  4312.    <id>https://www.fronteers.nl/nl/blog/2020/12/bewustwording-de-noodzaak-van-echte-verhalen-over-ontoegankelijkheid</id>
  4313.    <content xml:lang="nl" type="html">&lt;p&gt;In mijn vele gesprekken met mensen over toegankelijkheid komt vaak het woord &amp;quot;bewustwording&amp;quot; voorbij. De reden dat websites of diensten ontoegankelijk zijn is vaak geen onwil, maar eerder het feit dat men er gewoonweg niet bij stilstaat dat het voor een grote groep mensen ontoegankelijk is.&lt;/p&gt;
  4314. &lt;p&gt;Ik merk zelf ook dat ik beter snap hoe ontoegankelijk een website kan zijn voor bijvoorbeeld iemand die blind is als ik het van hun zelf verneem. Zoals een keer bij een workshop, dat ik iemand die blind was door bol.com zag navigeren met een screenreader. Het was voor het eerst dat ik een real world case zag, met uitleg van de persoon zelf over hoe lastig het is om een bepaald produkt te vinden op de site. En hoe ze dan uiteindelijk via Google op een specifieke term zoeken, om op bol.com alsnog die ene product pagina te bereiken.&lt;/p&gt;
  4315. &lt;p&gt;Dat was zo&#39;n openbaring dat ik nu, jaren later, er nog over praat.&lt;/p&gt;
  4316. &lt;h2&gt;Twee soorten toegankelijkheid talks&lt;/h2&gt;
  4317. &lt;p&gt;Er zijn twee soorten talks over toegankelijkheid. Eén vertelt over hoe je een website toegankelijk kan maken. En de andere over hoe ontoegankelijk websites zijn voor mensen met een bepaalde beperking.&lt;/p&gt;
  4318. &lt;p&gt;Er zijn mensen die goed kunnen uitleggen hoe je je website beter toegankelijk maakt, over de valkuilen en andere technische dingen zoals ARIA. Maar de ervaring zelf, de hindernissen, de frustraties; Dat kan niemand beter vertellen dan diegenen die het dagelijks meemaken.&lt;/p&gt;
  4319. &lt;p&gt;Ik heb een talk gemaakt over Inclusive Design gebaseerd op mijn eigen persoonlijke verhaal en mijn ervaringen in combinatie met mijn kennis van front-end developing. Ik kwam op dit idee door gesprekken met developers, mensen met een beperking en product owners, én door zelf een keer aan een klas van studenten Communication &amp;amp; Multimedia Design (CMD) te vertellen over de hindernissen die ik dagelijks tegenkom.&lt;/p&gt;
  4320. &lt;p&gt;Het was natuurlijk niet makkelijk. Ik heb er hard over nagedacht of ik aan wildvreemden wilde vertellen over hoe ik disabled geworden ben, over die periode in mijn leven. Maar voor mij weegt zwaarder dat ik wil dat de wereld om mij heen toegankelijker wordt voor iedereen. En dat kan alleen door onze ervaringen en verhalen te delen.&lt;/p&gt;
  4321. &lt;p&gt;Ondertussen heb ik mijn talk 4 keer mogen geven en heb ik goede feedback gekregen. Altijd over het feit dat men geen idee had over de dagelijkse hindernissen. Zoals een verplicht telefoonnummerveld in een formulier, maar géén tekstveld om door te kunnen geven dat ik doof ben en niet gebeld wil worden (en liever via SMS of e-mail benaderd wil worden).&lt;/p&gt;
  4322. &lt;p&gt;Mijn verhaal maakt het &#39;echter&#39; voor mensen, in plaats van alleen gebruik te maken van persona&#39;s bij het ontwerpen en coden van een website. Een persona is maar een snapshot van iemand met een beperking. Het maakt geen diepe indruk om zo de noodzaak van toegankelijkheid te benadrukken.&lt;/p&gt;
  4323. &lt;p&gt;Als meer organisatoren van conferenties, bedrijven en hogescholen/universiteiten, ervaringsdeskundigen zouden uitnodigen om een talk te geven over toegankelijkheid aan de hand van hun eigen ervaringen en verhalen zou dat de bewustwording enorm bevorderen.&lt;/p&gt;
  4324. &lt;p&gt;Met betere bewustwording worden mensen meer gemotiveerd om te zorgen dat websites voldoen aan toegankelijkheidseisen.&lt;/p&gt;
  4325. </content>
  4326.  </entry>
  4327.  <entry>
  4328.    <title>Dingen gedaan krijgen</title>
  4329.    <link href="https://www.fronteers.nl/nl/blog/2020/12/dingen-gedaan-krijgen"/>
  4330.    <updated>2020-12-27T00:00:00Z</updated>
  4331.    <id>https://www.fronteers.nl/nl/blog/2020/12/dingen-gedaan-krijgen</id>
  4332.    <content xml:lang="nl" type="html">&lt;p&gt;Hoe kan je nou zoveel mogelijk halen uit de schaarse tijd die je thuis hebt met alle afleidingen die daar bij komen?&lt;/p&gt;
  4333. &lt;p&gt;Het is een gevleugelde zin geworden dit jaar: &amp;quot;Het zijn rare tijden&amp;quot;. Het gaat dan natuurlijk over de Corona-crisis. We hebben een aantal dingen, zowel zakelijk als privé anders moeten inrichten de afgelopen tijd. Thuis werken is één van die aanpassingen. Het werk moet gedaan worden, maar hoe doe je dat? Developers zijn zogenaamde kenniswerkers en het werk dat we doen kan heel complex zijn en de nodige concentratie vergen, thuis werken kan dan een uitdaging zijn. Vaak moet je een werkruimte (als die er al is natuurlijk) delen met je partner en vaak lopen er ook nog een paar kinderen rond die voor de nodige afleiding kunnen zorgen. Daarnaast hebben we nog meer afleiding dan normaal, we moeten immers ook bereikbaar zijn, dus de smartphone en de email zorgen, misschien wel meer dan normaal, voor afleiding.&lt;/p&gt;
  4334. &lt;p&gt;Er zijn boeken vol geschreven over dit onderwerp en waarschijnlijk hebben we er allemaal wel een paar gelezen. Degene mij het meeste heeft gebracht is &amp;quot;&lt;a href=&quot;https://www.calnewport.com/books/deep-work/&quot;&gt;Diep werk&lt;/a&gt;&amp;quot; van &lt;a href=&quot;https://www.calnewport.com/&quot;&gt;Cal Newport&lt;/a&gt;.&lt;/p&gt;
  4335. &lt;h2&gt;Diep Werk&lt;/h2&gt;
  4336. &lt;blockquote&gt;
  4337. &lt;p&gt;Professionele activiteiten die het uiterste van je cognitieve vaardigheden vergen en die in een toestand van afleidingsloze concentratie worden uitgevoerd.&lt;/p&gt;
  4338. &lt;/blockquote&gt;
  4339. &lt;p&gt;De benaming &amp;quot;Diep werk&amp;quot; komt trouwens van de schrijver, Cal Newport, zelf. Het is geen term uit de medische wereld.&lt;/p&gt;
  4340. &lt;p&gt;Diep werk is dus moeilijk denkwerk dat zonder afleiding wordt uitgevoerd. Dit kan bijvoorbeeld een complex code probleem zijn, een boek wat je altijd hebt willen schrijven of iets anders waarbij veel denkwerk of een diepe concentratie nodig is. Dit lukt niet als er kinderen in huis zijn die aandacht vragen en ook niet als je constant e-mails of appjes krijgt die beantwoord moeten worden. Het is dus belangrijk dat je in een toestand komt waarin je door niks wordt afgeleid en je je volledige aandacht kunt richten op die ene taak.&lt;/p&gt;
  4341. &lt;p&gt;In de moderne tijd heb je twee dingen nodig om goed te kunnen functioneren:&lt;/p&gt;
  4342. &lt;ol&gt;
  4343. &lt;li&gt;Het vermogen om snel moeilijke dingen ter leren&lt;/li&gt;
  4344. &lt;li&gt;Het vermogen om zowel kwalitatief als in snelheid op hoog niveau te werken&lt;/li&gt;
  4345. &lt;/ol&gt;
  4346. &lt;p&gt;Des te beter je je kunt concentreren op 1 taak (diep werk) des te makkelijker zullen beide punten je afgaan. Het is bewezen dat mensen slecht meerdere dingen tegelijk kunnen doen, de meeste mensen zijn niet goed in multitasking.&lt;/p&gt;
  4347. &lt;p&gt;Uit onderzoek is gebleken dat bij de overgang van taak A naar taak B je aandacht niet direct meeverhuisd. Je aandacht blijf eigenlijk voor een deel nog een tijdje hangen aan taak A. Hoe sterker de rest-aandacht aan A is hoe slechter je taak B uitvoert. Dus is het belangrijk om je volledig te focussen op 1 taak zonder tussendoor te switchen naar een andere. De vijand van diep werk is oppervlakkig werk, dat zijn werkzaamheden als het lezen van email, appjes beantwoorden, even op Facebook kijken enzovoort. Zo gauw je aandacht wordt getrokken door oppervlakkig werk ben je los van je diepe werk en zal het langer duren voor die belangrijke taak af is. En misschien had het resultaat ook wel beter kunnen zijn, als je niet was afgeleid. Die ene taak is belangrijk en heeft voorrang op alles. De oppervlakkige taken zijn veel minder belangrijk en kunnen wel wachten tot later.&lt;/p&gt;
  4348. &lt;h2&gt;Hoe dan?&lt;/h2&gt;
  4349. &lt;p&gt;Hoe zorg je er nu voor dat je in een staat en in een omgeving bent waarin diep werken mogelijk wordt? Dit kan op vele manieren en is voor iedereen anders. De ene persoon sluit zich weken op in een klooster, de ander staat om 5 uur op en werkt tot 8 uur diep om daarna een normale werkdag vol afleiding te volgen.&lt;/p&gt;
  4350. &lt;p&gt;Als je meer over dit onderwerp wilt weten raad ik je aan om het boek van Cal Newport te lezen. Ik heb voor mezelf een paar dingen waar ik me op een werkdag aan probeer te houden, om zo geconcentreerd mogelijk te kunnen werken.&lt;/p&gt;
  4351. &lt;ol&gt;
  4352. &lt;li&gt;&lt;em&gt;Plan je dag.&lt;/em&gt; Begin elke ochtend met het plannen van je dag. In de ochtend ben je meestal op je best, helder en fit. Naarmate de dag vordert neemt het vermogen om moeilijke dingen te doen af. De meeste mensen kunnen maar een paar uur per dag diep werken. Dus plan de belangrijkste of moeilijkste dingen in de ochtend. En de rest in de middag. Ben je niet fit of te moe? Probeer dan wel iets te doen maar doe iets makkelijks, bijvoorbeeld de boekhouding.&lt;/li&gt;
  4353. &lt;li&gt;&lt;em&gt;Doe 1 taak tegelijk.&lt;/em&gt; Dus hou je aan je planning. Je kunt dit doen door grote taken op te delen in kleinere en je dagen op te delen in blokken (blokken van een halfuur of van een uur). Probeer de taak waaraan je werkt af te maken. Lukt dat niet in de tijd die je van te voren bedacht hebt, dan kan het zijn dat je te weinig tijd hebt ingepland of dat de deeltaken nog steeds te groot zijn. Je wordt hier beter in door het vaak te doen.&lt;/li&gt;
  4354. &lt;li&gt;&lt;em&gt;Prioriteren.&lt;/em&gt; Ik weet niet of dit voor iedereen geldt, maar ik wil altijd te veel doen. Ik heb te veel ideeën en zou op 1 dag duizend dingen willen doen. Dit gaat natuurlijk niet, dus probeer voor jezelf op een rijtje te krijgen wat voor jou de belangrijkste dingen zijn die af moeten. Je kunt bijvoorbeeld een lijstje maken met hoofd- en bijzaken en daar eventueel deadlines aanhangen. Het lijstje met bijzaken zijn dingen die niet zo heel belangrijk zijn en die dus ook geen haast hebben. Die doe je als je tijd over hebt. De hoofdzaken moeten wel snel af en zijn belangrijk. Ook in deze lijst zou je een een volgorde aan kunnen brengen, dus het belangrijkste bovenaan en het minst belangrijke onderaan.&lt;/li&gt;
  4355. &lt;li&gt;&lt;em&gt;Zorg voor een goede werkplek.&lt;/em&gt; Het beste is een plek waar je alleen kunt zitten. De ruimte moet zo min mogelijk afleiden. Laat je gezin weten dat je daar zit en dat je niet gestoord wilt worden als de deur dicht zit. Je kunt ook tijden afspreken, zodat iedereen weet dat je op die momenten niet gestoord kunt worden. Heb je zo&#39;n plek niet dan kun je ook kijken of werken met een koptelefoon iets voor je is. Ik gebruik zelf de app &lt;a href=&quot;http://brain.fm/&quot;&gt;brain.fm&lt;/a&gt; deze heeft speciale muziek waarmee je diep kunt werken. Ook op Spotify zijn er diverse afspeellijsten te vinden die voor een juiste concentratie kunnen zorgen, zoals &lt;a href=&quot;https://open.spotify.com/playlist/37i9dQZF1DWXLeA8Omikj7&quot;&gt;Brainfood&lt;/a&gt; en &lt;a href=&quot;https://open.spotify.com/playlist/37i9dQZF1DWZeKCadgRdKQ&quot;&gt;Deep Focus&lt;/a&gt;&lt;/li&gt;
  4356. &lt;li&gt;&lt;em&gt;Geen sociale media of email.&lt;/em&gt; Check tijdens het diep werken geen email, lees geen appjes, ga niet online (behalve als je iets op moet zoeken) en beantwoordt geen telefoontjes. Met andere woorden: richt je op de geplande taak en laat je door niks afleiden. Mijn telefoon staat op stil als ik aan het werk ben. Plan ook blokken in, bij voorkeur in de middag, voor dit soort dingen en probeer je daar aan te houden. Je moet natuurlijk wel communiceren met je collega&#39;s. Je zou kunnen kijken of ook dat in te plannen is. Dus aan het einde van de ochtend een uurtje of aan het eind van de dag. Dit kan je dan zowel met bellen als met sociale media doen. Waarschijnlijk vinden je collega&#39;s dit ook wel een goed idee, aangezien het hen ook meer rust en structuur kan geven.&lt;/li&gt;
  4357. &lt;/ol&gt;
  4358. &lt;p&gt;Het is moeilijk om werk te doen tussen de vele afleidingen die er zijn een dag. Maar diep werken zonder afleidingen is te leren. Probeer voor jezelf een manier van werken te creëren die voor jou werkt en probeer je er aan te houden. Uiteindelijk wordt het makkelijker, al doende leert men.&lt;/p&gt;
  4359. </content>
  4360.  </entry>
  4361.  <entry>
  4362.    <title>Anke en de eerste stapjes in het land van Drupal Theming</title>
  4363.    <link href="https://www.fronteers.nl/nl/blog/2020/12/anke-en-de-eerste-stapjes-in-het-land-van-drupal-theming"/>
  4364.    <updated>2020-12-26T00:00:00Z</updated>
  4365.    <id>https://www.fronteers.nl/nl/blog/2020/12/anke-en-de-eerste-stapjes-in-het-land-van-drupal-theming</id>
  4366.    <content xml:lang="nl" type="html">&lt;p&gt;Halverwege 2020 switchte ik van baan, en begon ik als front-ender bij een webbureau dat voornamelijk met het CMS Drupal werkt. Ik heb nooit veel met Drupal gewerkt, maar front-end is front-end, toch?&lt;/p&gt;
  4367. &lt;p&gt;Wrong!&lt;/p&gt;
  4368. &lt;p&gt;&lt;a href=&quot;https://benchmarks.it.unt.edu/sites/default/files/drupal-humor1_0.gif&quot;&gt;Deze cartoon&lt;/a&gt; over de Drupal learning curve had me al genoeg moeten waarschuwen. :) Drupal is groot, massief, en kan ontzettend veel. Maar alles zit er dus ook in, op een grote en massieve manier. Niks lean en snel. Maar als je het Drupal-beest eenmaal een beetje doorhebt, valt het best te temmen. In dit artikel deel ik een aantal dingen die ik de afgelopen maanden heb geleerd.&lt;/p&gt;
  4369. &lt;h2&gt;Drupal dicteert je templates.&lt;/h2&gt;
  4370. &lt;p&gt;&lt;em&gt;Om te beginnen een disclaimer: Dit gaat over Drupal 8. Eerdere versies van Drupal werkten wat anders met de templates.&lt;/em&gt;&lt;/p&gt;
  4371. &lt;p&gt;De basis van Drupal is als elk ander CMS: de redactie managed de content in het CMS, en aan de voorkant komt er een mooie site uitrollen. Maar bij Drupal wordt ook de functionaliteit grotendeels binnen het CMS opgezet, deels ondersteund door modules. De templates voor de voorkant staan daar weer als losse laag op.&lt;/p&gt;
  4372. &lt;p&gt;Bij ons op het werk bestaat een team uit een ontwerper, een front-ender en een back-ender. De back-ender bouwt de functionaliteit, en ik zet daar de voorkant tegenaan. Deze functionaliteit kan bijvoorbeeld één, of een combinatie van de volgende dingen zijn:&lt;/p&gt;
  4373. &lt;ul&gt;
  4374. &lt;li&gt;Node (Een &#39;entity&#39;)&lt;/li&gt;
  4375. &lt;li&gt;User (Ook een &#39;entity&#39;)&lt;/li&gt;
  4376. &lt;li&gt;Taxonomy (Een hierarchische onderverdeling van elementen)&lt;/li&gt;
  4377. &lt;li&gt;Block (Losse elementen. Dit kan ook een onderdeel van bovenstaande elementen zijn)&lt;/li&gt;
  4378. &lt;li&gt;View (Een bepaalde weergave van één van bovenstaande elementen)&lt;/li&gt;
  4379. &lt;li&gt;Paragraph (De redactie kan content stapelen in verschillende paragraphs. Dit komt uit de paragraph module, maar wordt heel veel gebruikt.)&lt;/li&gt;
  4380. &lt;/ul&gt;
  4381. &lt;p&gt;Deze lijst is niet compleet, maar geeft wel een goed beeld van de mogelijkheden. Als je bijvoorbeeld gebruik maakt van custom modules, horen daar weer eigen elementen bij.&lt;/p&gt;
  4382. &lt;p&gt;Alles in deze lijst heeft zijn eigen template. De pagina die je uiteindelijk ziet, is dus een combinatie van heel veel geneste templates, die door Drupal op volgorde gezet worden.&lt;/p&gt;
  4383. &lt;p&gt;In tegenstelling tot andere CMS&#39;sen waarmee ik gewerkt heb, begin je dus &lt;em&gt;niet&lt;/em&gt; met het bouwen van een template waar je later functionaliteit in zet, maar beter werk je andersom. Drupal zet de templates voor je neer.&lt;/p&gt;
  4384. &lt;h2&gt;Welke template gebruiken?&lt;/h2&gt;
  4385. &lt;p&gt;Je start met uitzoeken welke van de templates op de pagina je moet hebben. Hoe je daar achter komt? Kijk in je broncode!&lt;/p&gt;
  4386. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/2020/twig-debug.png&quot; alt=&quot;Een screenshot van de Drupal template suggesties. Een lijstje templates in de inspector, waarvan eentje als actief is aangeduid met een kruisje.&quot; /&gt;&lt;/p&gt;
  4387. &lt;p&gt;&lt;em&gt;De Drupal template suggesties in je inspector. De onderste is het minst specifiek, de bovenste het meest. Het kruisje geeft de gebruikte template aan.&lt;/em&gt;&lt;/p&gt;
  4388. &lt;p&gt;De &lt;a href=&quot;https://www.drupal.org/docs/theming-drupal/twig-in-drupal/debugging-twig-templates&quot;&gt;Twig debugging&lt;/a&gt; optie binnen Drupal geeft voor elke template een aantal templatenamen, van breed &lt;code&gt;( node.html.twig)&lt;/code&gt; naar heel specifiek &lt;code&gt;(node--agenda-detail--full.html.twig)&lt;/code&gt;. Maak de template aan die je nodig hebt, kopieer de twig uit de standaard gebruikte core-template, en ga hierin aan de slag met je eigen HTML!&lt;/p&gt;
  4389. &lt;h2&gt;Template voorbeeld&lt;/h2&gt;
  4390. &lt;p&gt;Een voorbeeld van de vereenvoudigde template &lt;code&gt;node--agenda-detail--full.html.twig&lt;/code&gt; voor een fictieve agenda pagina:&lt;/p&gt;
  4391. &lt;pre&gt;&lt;code&gt;
  4392. {# We zetten een aantal praktische basisclasses #}
  4393.    {&#92;% set classes = [
  4394.        &#39;node&#39;,
  4395.        &#39;node--type-&#39; ~ node.bundle|clean_class,
  4396.        &#39;agenda-detail&#39;,
  4397.        node.isPromoted() ? &#39;node--promoted&#39;,
  4398.        node.isSticky() ? &#39;node--sticky&#39;,
  4399.        not node.isPublished() ? &#39;node--unpublished&#39;,
  4400.        view_mode ? &#39;node--view-mode-&#39; ~ view_mode|clean_class,
  4401.    ] %}
  4402.  
  4403.    &amp;lt;article{{ attributes.addClass(classes) }}&amp;gt;
  4404.  
  4405.        {# De titel #}
  4406.        &amp;lt;h1 class=&amp;quot;agenda-detail__page-title&amp;quot;&amp;gt;{{ node.title() }}&amp;lt;/h1&amp;gt;
  4407.        {# De organisator + een labeltje dat we vertalen met de &#39;t&#39; functie #}
  4408.        &amp;lt;p class=&amp;quot;agenda-detail__organizer&amp;quot;&amp;gt;
  4409.            {{ &#39;Organized by:&#39;|t }} {{ content.field_organizer.0 }}
  4410.        &amp;lt;/p&amp;gt;
  4411.  
  4412.        {# De output van de optionele introductie #}
  4413.        {%- if content.field_intro.0 -%}
  4414.            &amp;lt;div class=&amp;quot;agenda-detail__intro&amp;quot;&amp;gt;
  4415.                {{ content.field_intro.0 }}
  4416.            &amp;lt;/div&amp;gt;
  4417.        {%- endif -%}
  4418.  
  4419.        {# De output van de (agenda)data #}
  4420.        {{ content.field_agenda_data }}
  4421.  
  4422.        {# De output van de content, in dit geval in de module &#39;paragraphs&#39; #}
  4423.        {{ content.field_paragraphs }}
  4424.  
  4425.        {# De output van een contactveld #}
  4426.        {{ content.field_contact }}
  4427.  
  4428.        {# Een knop om je in te schrijven, mits je ingelogd bent #}
  4429.        {%- if logged_in == false -%}
  4430.            &amp;lt;a href=&amp;quot;/login?destination={{ url }}&amp;quot;&amp;gt;
  4431.                {{ &#39;Log in to sign up&#39;|t }}
  4432.            &amp;lt;/a&amp;gt;
  4433.        {%- else -%}
  4434.            &amp;lt;a target=&amp;quot;{{ button.target }}&amp;quot; class=&amp;quot;button&amp;quot; href=&amp;quot;{{ button.url }}&amp;quot;&amp;gt;
  4435.                {{ button.text|t }}
  4436.            &amp;lt;/a&amp;gt;
  4437.        {%- endif -%}
  4438.  
  4439.    &amp;lt;/article&amp;gt;
  4440.  
  4441. &lt;/code&gt;&lt;/pre&gt;
  4442. &lt;p&gt;In bovenstaande template heb je alle ruimte om je eigen CSS en HTML toe te voegen.&lt;/p&gt;
  4443. &lt;h2&gt;Geen logica in templates&lt;/h2&gt;
  4444. &lt;p&gt;Bijna alle logica gebeurt in Drupal. Hoewel de Twig prima logica kan afhandelen, worden de templates in Drupal puur voor output gebruikt. Je gebruikt hoogstens een eenvoudig &lt;em&gt;if-statement&lt;/em&gt; voor een check.&lt;/p&gt;
  4445. &lt;p&gt;Logica aanpassen doe je binnen het CMS, of liever nog: binnen een custom module. Bij ons wordt dit laatste gedaan door de back-ender. Custom modules zijn eenvoudiger te lezen dan wanneer de logica bijvoorbeeld in Drupal zelf zou zitten (en daarmee in de database). Dit kan een groot voordeel zijn voor support achteraf. Bijvoorbeeld: Een kleurselector toevoegen aan een taxonomieterm kan prima in het CMS zelf, maar wil je die kleur vervolgens gebruiken in alle artikelen die die term hebben, dan is het verstandiger om die logica in een custom module te zetten. In de templates heb je dan een simpele variable en geen logica in de database. Op basis van die module maak je dan de html voor de toonbare site in je templates.&lt;/p&gt;
  4446. &lt;p&gt;Het klinkt ontzettend rigide, en dat is het ook. Maar het heeft ook een groot voordeel: Het is namelijk superconsequent.&lt;/p&gt;
  4447. &lt;h2&gt;Superconsequent en modulair&lt;/h2&gt;
  4448. &lt;p&gt;Omdat het zo consequent is in de templates, zijn herhalende onderdelen ook heel snel op andere plekken in te zetten. Alles wat je al eens gebouwd hebt, kan overal gebruikt worden. En ziet er ook hetzelfde uit. &lt;em&gt;Als&lt;/em&gt; je tenminste je CSS ook goed modulair gehouden hebt.&lt;/p&gt;
  4449. &lt;p&gt;Elk onderdeeltje in Drupal heeft een eigen onderscheidende class, naast de algemene classes. Een paragraaf heeft bijvoorbeeld:&lt;/p&gt;
  4450. &lt;pre&gt;&lt;code&gt;paragraph paragraph--text paragraph--text-button paragraph--type--paragraph-text-button paragraph--view-mode--default
  4451. &lt;/code&gt;&lt;/pre&gt;
  4452. &lt;p&gt;...&lt;/p&gt;
  4453. &lt;p&gt;I know, I know.&lt;/p&gt;
  4454. &lt;p&gt;Sommige classes komen uit Drupal zelf, sommige heb ik gezet. Maar ook dit &lt;em&gt;hoeft&lt;/em&gt; niet en alles kan je overschrijven in de template. Maar het is wél bruikbaar! Doordat het zo modulair is opgezet, dwingt het je je CSS ook modulair op te zetten. Maak bijvoorbeeld een &lt;code&gt;paragraphs/paragraph--text-button.scss&lt;/code&gt; en importeer die in je stylesheet. Dit herhaal je voor de andere onderdelen en je hebt een supernette directory met allemaal losse stylesheetjes per onderdeel. Mijn directories met SCSS zijn bijvoorbeeld &#39;base, layout, paragraphs, nodes&#39;. Overzichtelijk, en fijn voor je collega&#39;s en future-me.&lt;/p&gt;
  4455. &lt;p&gt;Zoals je net vast al gespot hebt, wordt er gebruik gemaakt van de BEM methode voor naamgeving (Block Element Modifier). BEM is ook modulair en ook consequent, en leent zich goed voor styling in Drupal. (&lt;a href=&quot;http://getbem.com/&quot;&gt;Meer over BEM&lt;/a&gt;.)&lt;/p&gt;
  4456. &lt;p&gt;Drupal splitst alles graag op in aparte stylesheets en scripts. Als je in je ontwikkelsite naar de broncode kijkt zie je daar ook een ontzettende lijst aan css en js staan, afkomstig van modules en onderdelen. Voor de productiesite kan je dit samenvoegen en cachen. Maar niet alleen voor je productiesite wordt gecached, wat ons brengt bij het volgende punt:&lt;/p&gt;
  4457. &lt;h2&gt;Let op de caching&lt;/h2&gt;
  4458. &lt;p&gt;De kans dat je minutenlang aan het refreshen bent en er dan achter komt dat je naar een gecachte pagina zit te kijken is bij Drupal groot. Drupal cached alles heel hard. Standaard wordt ook voor niet ingelogde bezoekers alles gecached. De JS, de CSS en ook je templates.&lt;/p&gt;
  4459. &lt;p&gt;Let dus goed op dat je wel ingelogd bent bij het developen. Daarnaast zijn er soms verschillende views voor niet-ingelogde en wel-ingelogde bezoekers, zoals bijvoorbeeld het inlogscherm voor een &#39;mijn&#39; omgeving. Dan is het dus weer handig om tussendoor in- en uit te loggen of in ieder geval een &lt;em&gt;incognitoscherm&lt;/em&gt; ernaast te houden. Het clearen van de cache doe je in dat geval tussendoor via Drupal in je andere tab, of je gebruikt daarvoor &lt;em&gt;Drush&lt;/em&gt; op de commandline.&lt;/p&gt;
  4460. &lt;h2&gt;Werken met git? Drush is je vriend!&lt;/h2&gt;
  4461. &lt;p&gt;Zoals met bijna alles dat je tegenwoordig ontwikkelt, kan je bij Drupal ook goed werken met versiebeheer, zoals bijvoorbeeld git.&lt;/p&gt;
  4462. &lt;p&gt;&lt;a href=&quot;https://www.drush.org/&quot;&gt;&lt;em&gt;Drush&lt;/em&gt;&lt;/a&gt; is de commandline shell voor Drupal, en is onontbeerlijk als je met collega&#39;s aan hetzelfde project werkt. Zo wil je om de cache te clearen regelmatig even een &lt;code&gt;drush cr&lt;/code&gt; (cache:rebuild) uitvoeren om zeker te zijn dat alles goed staat na een pull.&lt;/p&gt;
  4463. &lt;p&gt;Een ander voorbeeld: Drupal slaat configuratie op in de database. Dat komt dus niet in git. Als je een lokale database hebt draaien, maar je collega heeft nieuwe functionaliteit toegevoegd, kan je dat met drush in jouw database importeren. Je collega exporteert de configs met &lt;code&gt;drush cex&lt;/code&gt; (config:export), deze maakt nette .yml files die je in git kan zetten. Jij importeert met &lt;code&gt;drush cim&lt;/code&gt; (config:import) deze configs uit deze .yml files in jouw database en je kan aan het werk.&lt;/p&gt;
  4464. &lt;p&gt;Een paar andere handige drush commands:&lt;/p&gt;
  4465. &lt;ul&gt;
  4466. &lt;li&gt;&lt;code&gt;drush status&lt;/code&gt; ( geeft de status van de site, welke db gebruikt wordt en meer)&lt;/li&gt;
  4467. &lt;li&gt;&lt;code&gt;drush updatedb&lt;/code&gt; (update je database na een drupal update)&lt;/li&gt;
  4468. &lt;li&gt;&lt;code&gt;drush locale:check&lt;/code&gt; / &lt;code&gt;locale:update&lt;/code&gt; (check voor nieuwe vertalingen / importeer deze vertalingen)&lt;/li&gt;
  4469. &lt;/ul&gt;
  4470. &lt;h2&gt;Twig als templatetaal&lt;/h2&gt;
  4471. &lt;p&gt;Ik noemde het net al. Drupal gebruikt vanaf versie 8 standaard de templatetaal &lt;a href=&quot;https://twig.symfony.com/&quot;&gt;Twig&lt;/a&gt;! Twig is cool! Twig is leesbaar! Twig is mijn lievelingstemplatetaal, vanwege de leesbaarheid en alle mogelijkheden.&lt;/p&gt;
  4472. &lt;pre&gt;&lt;code&gt;    {&#92;% if node.keyvisual.0 is empty %} Doe iets {&#92;% endif %}
  4473. &lt;/code&gt;&lt;/pre&gt;
  4474. &lt;p&gt;Hoe leesbaar wil je het hebben? Twig zorgt voor prettige overzichtelijke templates. Als je het nodig zou hebben zou je ook eenvoudige logica in Twig kunnen uitvoeren, maar zoals ik net al uitlegde, wordt de meeste logica binnen Drupal afgehandeld.&lt;/p&gt;
  4475. &lt;p&gt;Als je meer wil lezen: Twig heeft &lt;a href=&quot;https://twig.symfony.com/doc/2.x/&quot;&gt;superfijne documentatie&lt;/a&gt; én een leuk plantje als mascotte. Just saying.&lt;/p&gt;
  4476. &lt;h2&gt;Het CMS en de leercurve&lt;/h2&gt;
  4477. &lt;p&gt;Bovenstaande lijst is bij lange na niet volledig, en is slechts een snelle conclusie na een paar maanden werken met Drupal. Ik hoop dat het wel een goed beeld geeft van hoe anders het werken is met Drupal dan met andere CMS&#39;en.&lt;/p&gt;
  4478. &lt;p&gt;Het is een flinke leercurve, maar ik merk dat ik door de consequentheid van het CMS zelf ook gedwongen wordt om mijn code strakker en beter op te zetten, en dat het me een betere front-ender heeft gemaakt. Een aanrader om eens mee te werken!&lt;/p&gt;
  4479. </content>
  4480.  </entry>
  4481.  <entry>
  4482.    <title>Semantiek, wat betekent het?</title>
  4483.    <link href="https://www.fronteers.nl/nl/blog/2020/12/semantiek-wat-betekent-het"/>
  4484.    <updated>2020-12-25T00:00:00Z</updated>
  4485.    <id>https://www.fronteers.nl/nl/blog/2020/12/semantiek-wat-betekent-het</id>
  4486.    <content xml:lang="nl" type="html">&lt;p&gt;Als men het heeft over de kwaliteit van HTML-code gaat het vaak over semantiek. Maar wat is nou semantiek? Wat is semantische HTML, en waarom zou je je er wat van aantrekken?&lt;/p&gt;
  4487. &lt;h2&gt;Wat is semantische HTML?&lt;/h2&gt;
  4488. &lt;p&gt;Semantiek is het communiceren van je intentie door middel van je gekozen HTML. Dit garandeert niet de correcte uitkomst, maar als je een andere intentie communiceert dan de uitkomst, dan klopt het sowieso niet.&lt;/p&gt;
  4489. &lt;p&gt;Een bekende HTML-tag is bijvoorbeeld de &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;. Deze tag wordt vaak gebruikt voor de belangrijkste kop (heading 1) op een pagina.&lt;/p&gt;
  4490. &lt;pre&gt;&lt;code&gt;&amp;lt;h1&amp;gt;Semantiek, wat betekent het?&amp;lt;/h1&amp;gt;
  4491. &lt;/code&gt;&lt;/pre&gt;
  4492. &lt;p&gt;De tag of het element communiceert de intentie: dit is de belangrijkste kop, dit is waar de pagina over gaat. Als er (bijvoorbeeld door een fout in het CMS) een heel artikel in een &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; staat dan komt het resultaat niet overeen met de intentie.&lt;/p&gt;
  4493. &lt;p&gt;Op dezelfde manier kun je een link (&lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;) maken die nergens heen gaat, of een knop (&lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt;) die niks doet. Met semantische HTML geef je je intentie aan. Dat is de eerste stap. Om het resultaat er op aan te laten sluiten is een volgende stap.&lt;/p&gt;
  4494. &lt;p&gt;Je kan het vergelijken met TypeScript of andere talen die typing bevatten. Deze kunnen niet alleen data bevatten, maar ook iets zeggen over de data die ze bevatten.&lt;/p&gt;
  4495. &lt;h2&gt;Wat doet semantiek?&lt;/h2&gt;
  4496. &lt;p&gt;Zoals aangegeven geeft semantiek de intentie weer van een element. Als tools op deze intentie kunnen vertrouwen (de semantiek zegt iets over de data in de elementen) dan kunnen ze de inhoud van de elementen voor allerlei doeleinden gebruiken.&lt;/p&gt;
  4497. &lt;p&gt;Enkele voorbeelden:&lt;/p&gt;
  4498. &lt;ul&gt;
  4499. &lt;li&gt;&lt;em&gt;Readability tools -&lt;/em&gt; Er zijn tegenwoordig talloze manieren om teksten in een leesbaarder formaat door te nemen. Soms staan ze op zichzelf zoals Pocket en Instapaper, maar in Firefox en Safari zitten ze ook ingebouwd. Je kan een bestaande webpagina op een andere (leesbaardere) manier presenteren.&lt;/li&gt;
  4500. &lt;li&gt;&lt;em&gt;Vertalings tools -&lt;/em&gt; Tools als Google Translate kunnen gebruiken maken van de context die je als developer communiceert.&lt;/li&gt;
  4501. &lt;li&gt;&lt;em&gt;Assistive technology -&lt;/em&gt; Software zoals screen readers (“voorleessoftware”) informeren hun gebruikers over de semantische waarde van de HTML die ze lezen. Zo kan een gebruiker begrijpen of iets hoofd- of bijzaak is, en of iets een paragraaf of een lijst is.&lt;/li&gt;
  4502. &lt;li&gt;&lt;em&gt;Mensen die je code lezen -&lt;/em&gt; Het klinkt misschien voor de hand liggend, maar leesbare code is prettige code om mee te werken. HTML code schrijf je vaak ook niet alleen voor jezelf maar voor anderen, of zelfs voor jezelf op een ander moment. Helder geschreven HTML is beter leesbaar en tijdsbestendiger.&lt;/li&gt;
  4503. &lt;li&gt;&lt;em&gt;Custom CSS, adblocking, etc -&lt;/em&gt; Eigenlijk alles wat in je code &amp;quot;hookt&amp;quot; heeft baat bij leesbare, bestendige en robuuste code. Als een bezoeker Custom CSS heeft voor leesbare headings, dan moeten er wel headings zijn.&lt;/li&gt;
  4504. &lt;li&gt;&lt;em&gt;SEO -&lt;/em&gt; Zoekmachines zijn soms net gebruikers. Ook zij willen weten wat voor informatie je aanlevert en wat de context van die informatie is.&lt;/li&gt;
  4505. &lt;/ul&gt;
  4506. &lt;p&gt;Door structuur in je code te creëren eindig je niet met &amp;quot;los zand&amp;quot;. Het geeft houvast aan iedereen die er mee moet werken: developers, bezoekers en tools.&lt;/p&gt;
  4507. &lt;h2&gt;Hoe doe ik het goed?&lt;/h2&gt;
  4508. &lt;p&gt;Betekent dit dat je &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element&quot;&gt;alle HTML-elementen&lt;/a&gt; uit je hoofd moet kennen? Nee, dat niet. Al zijn het er niet eens zo veel.&lt;/p&gt;
  4509. &lt;p&gt;Het is wel leuk om te kijken welke elementen je allemaal kent! Heb je de &lt;a href=&quot;https://codepen.io/plfstr/full/zYqQeRw&quot;&gt;HTML Tags Memory Test&lt;/a&gt; al geprobeerd?&lt;/p&gt;
  4510. &lt;h2&gt;Wat wil ik communiceren?&lt;/h2&gt;
  4511. &lt;p&gt;Deze vraag is heel waardevol in heel veel situaties. Als je HTML schrijft en je voegt een element toe, bedenk dat of dit element je intentie goed weergeeft. Schrijf je een paragraaf? Dan voelt het logisch om een &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt; te gebruiken. Doe je iets voor puur visuele redenen, zonder dat je een specifieke intentie wilt communiceren? Dan kun je misschien prima uit de voeten met een &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; of een &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; (deze elementen voegen niks toe in de communicatie).&lt;/p&gt;
  4512. &lt;p&gt;Gebruik je daarentegen een &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; of een &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; terwijl je juist wel een specifieke intentie wil overbrengen? Misschien wil je dan even in de lijst van &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element&quot;&gt;alle HTML-elementen&lt;/a&gt; kijken of er een passend alternatief is.&lt;/p&gt;
  4513. &lt;h2&gt;Is mijn pagina structuur helder?&lt;/h2&gt;
  4514. &lt;p&gt;Elke pagina heeft baat bij een goede structuur. Zoals een krant leunt op secties, katernen en heldere koppen, zo werkt het ook bij een pagina op het web (en de onderliggende HTML).&lt;/p&gt;
  4515. &lt;p&gt;Kijk of je je pagina in kan delen met duidelijke HTML landmarks zoals &lt;code&gt;&amp;lt;header&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;main&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;aside&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;footer&amp;gt;&lt;/code&gt;. Een landmark werkt net als een herkenningspunt in het echte leven. Als een dorp vijf kerktorens heeft dan wordt het lastig om te zeggen &amp;quot;bij de kerktoren rechts&amp;quot;.&lt;/p&gt;
  4516. &lt;p&gt;Daarnaast kun je (ook net als bij een krant) headings gebruiken. De &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; is de hoofdkop van de pagina; deze geeft aan waar de hele pagina over gaat. Technisch gezien valt alle content hieronder. Als je onder de &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; een kopje wil gebruiken, gebruik dan de &lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;. Alles wat in de code onder de &lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt; valt, moet hier logischerwijs in de content ook onder vallen. Je creëert een hiërarchie met je koppen. Sla geen koppen over (ga niet van &lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt; naar &lt;code&gt;&amp;lt;h4&amp;gt;&lt;/code&gt;) en plaats alleen iets onder een kop als het er logischerwijs onder valt.&lt;/p&gt;
  4517. &lt;h2&gt;Is dat het?&lt;/h2&gt;
  4518. &lt;p&gt;Ja, zo&#39;n beetje wel eigenlijk. Communiceer zo duidelijk mogelijk wat de intentie van je code is (meta data) en laat je intentie geen lege belofte zijn.&lt;/p&gt;
  4519. </content>
  4520.  </entry>
  4521.  <entry>
  4522.    <title>Meld je aan voor de ALV 2020</title>
  4523.    <link href="https://www.fronteers.nl/nl/blog/2020/09/meld-je-aan-voor-de-alv-2020"/>
  4524.    <updated>2020-09-21T00:00:00Z</updated>
  4525.    <id>https://www.fronteers.nl/nl/blog/2020/09/meld-je-aan-voor-de-alv-2020</id>
  4526.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdagavond 14 oktober vanaf 20:00 houden we onze jaarlijkse algemene ledenvergadering (ALV)! Alle leden zijn hiervoor van harte uitgenodigd. De vergadering vindt dit keer vanwege het Coronavirus online plaats, via Jitsi Meet. Vooraf software installeren op je computer is niet nodig, mocht je willen inbellen vanaf je telefoon, dan zijn er apps beschikbaar voor &lt;a href=&quot;https://jitsi.org/downloads/&quot;&gt;Android, iOS en F-Droid&lt;/a&gt;!&lt;/p&gt;
  4527. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2020/09/meld-je-aan-voor-de-alv-2020#english-version&quot;&gt;English version&lt;/a&gt; below.&lt;/p&gt;
  4528. &lt;p&gt;Is het je eerste keer op de (of überhaupt een) ALV? Tijdens de ALV nemen we als bestuur, vrijwilligers en leden samen de (financiële) staat van Fronteers door, en evalueren we hoe het gaat met de vereniging. Tot het begin van de vergadering kan elk lid een voorstel doen voor een agendapunt of een ter stemming te brengen onderwerp.&lt;/p&gt;
  4529. &lt;p&gt;Het staat leden tot het begin van de ALV vrij voorstellen voor de agenda in te dienen. De voorlopige agenda staat hieronder. Wat in ieder geval zal worden behandeld zijn de jaarstukken van de vereniging over 2019, de financiën over 2020 en de nieuwe begroting voor 2021. Deze stukken zullen enkele dagen voor de ALV naar alle aangemelde aanwezigen worden opgestuurd. Mocht je niet aanwezig kunnen zijn, maar deze informatie wel willen inzien: laat het ons weten!&lt;br /&gt;
  4530. Notulen van de avond worden altijd zo snel mogelijk na de vergadering online gedeeld.&lt;/p&gt;
  4531. &lt;h2&gt;Voorlopige agenda&lt;/h2&gt;
  4532. &lt;ul&gt;
  4533. &lt;li&gt;Opening&lt;/li&gt;
  4534. &lt;li&gt;Jaarrekening 2019&lt;/li&gt;
  4535. &lt;li&gt;Bevindingen kascommissie&lt;/li&gt;
  4536. &lt;li&gt;Benoeming nieuwe kascommissie&lt;/li&gt;
  4537. &lt;li&gt;Financiën 2020&lt;/li&gt;
  4538. &lt;li&gt;Begroting 2021&lt;/li&gt;
  4539. &lt;li&gt;Herbenoeming Anneke Sinnema&lt;/li&gt;
  4540. &lt;li&gt;Herbenoeming Edwin Martin&lt;/li&gt;
  4541. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  4542. &lt;li&gt;Evaluatie W3C-lidmaatschap&lt;/li&gt;
  4543. &lt;li&gt;Rondvraag&lt;/li&gt;
  4544. &lt;li&gt;Sluiting&lt;/li&gt;
  4545. &lt;/ul&gt;
  4546. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  4547. &lt;h2&gt;English version&lt;/h2&gt;
  4548. &lt;p&gt;&lt;strong&gt;Wednesday evening, the 14th of October starting at 20:00 we will have our annual membership meeting (ALV)! All members of Fronteers are welcome to sign up to join us. Due to the Coronavirus, the meeting will take place completely online through Jitsi Meet. You don&#39;t need to install software or register to use this service, but if you want to participate on your phone there is an app available on &lt;a href=&quot;https://jitsi.org/downloads/&quot;&gt;Android, iOS and F-Droid&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
  4549. &lt;p&gt;Is this your first time at the (or an) ALV (membership meeting)? The legal form of Fronteers is a dutch &#39;vereniging&#39;, which means we are obligated to have a meeting once a year with the board, volunteers and members to present and discuss the (financial) state of Fronteers. We will evaluate how Fronteers is doing and discuss what we can do to improve. Until the actual start of the meeting, any member can propose a topic for the agenda to be discussed and voted on by all present members.&lt;/p&gt;
  4550. &lt;p&gt;Below, you&#39;ll find the provisional program of the evening. The financial documents of 2019, 2020 and 2021 will be discussed and sent in advance to everyone that signed up for the ALV. If you can&#39;t attend but (as a member) want to get a copy of the documents, please &lt;a href=&quot;mailto:penningmeester@fronteers.nl&quot;&gt;send an e-mail to our treasurer&lt;/a&gt;.&lt;/p&gt;
  4551. &lt;h2&gt;(Provisional) Agenda&lt;/h2&gt;
  4552. &lt;ul&gt;
  4553. &lt;li&gt;Opening&lt;/li&gt;
  4554. &lt;li&gt;Financial Statements 2019&lt;/li&gt;
  4555. &lt;li&gt;Findings of the treasury committee&lt;/li&gt;
  4556. &lt;li&gt;Naming of the new treasury committee&lt;/li&gt;
  4557. &lt;li&gt;Finances of 2020&lt;/li&gt;
  4558. &lt;li&gt;Budget for 2021&lt;/li&gt;
  4559. &lt;li&gt;Reappointment Anneke Sinnema&lt;/li&gt;
  4560. &lt;li&gt;Reappointment Edwin Martin&lt;/li&gt;
  4561. &lt;li&gt;Report of committees&lt;/li&gt;
  4562. &lt;li&gt;Evaluation W3C membership&lt;/li&gt;
  4563. &lt;li&gt;Round of questions&lt;/li&gt;
  4564. &lt;li&gt;Close&lt;/li&gt;
  4565. &lt;/ul&gt;
  4566. &lt;p&gt;Van deze ALV zijn de notulen beschikbaar:&lt;/p&gt;
  4567. &lt;p&gt;&lt;a href=&quot;https://fronteers.nl/vereniging/bestuur/notulen/notulen-alv-14-oktober-2020&quot;&gt;Notulen ALV 14 oktober 2020&lt;/a&gt;&lt;/p&gt;
  4568. </content>
  4569.  </entry>
  4570.  <entry>
  4571.    <title>Resultaten Fronteers enquete 2020</title>
  4572.    <link href="https://www.fronteers.nl/nl/blog/2020/07/resultaten-fronteers-enquete-2020"/>
  4573.    <updated>2020-07-24T00:00:00Z</updated>
  4574.    <id>https://www.fronteers.nl/nl/blog/2020/07/resultaten-fronteers-enquete-2020</id>
  4575.    <content xml:lang="nl" type="html">&lt;p&gt;In juni hebben we een enquete gehouden onder leden van Fronteers en front-end developers.&lt;/p&gt;
  4576. &lt;p&gt;We vroegen developers die wel en niet lid zijn van de vereniging, naar informatie zoals hun salaris, regio, ervaringsniveau, en specifieke Fronteers-gerelateerde zaken. Niet alleen om feedback voor het bestuur en de commissies te verzamelen maar ook om een beter beeld te krijgen van wat onze beroepsgroep bezig houdt! We bedanken de 97 personen die de tijd hiervoor uittrokken.&lt;/p&gt;
  4577. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/vereniging/resultaten-fronteers-enquete-2020&quot;&gt;Hier zijn de resultaten van de enquete!&lt;/a&gt;&lt;/p&gt;
  4578. </content>
  4579.  </entry>
  4580.  <entry>
  4581.    <title>Online meetup met Rachel Andrew en Darice de Cuba</title>
  4582.    <link href="https://www.fronteers.nl/nl/blog/2020/06/online-meetup-met-rachel-andrew-en-darice-de-cuba"/>
  4583.    <updated>2020-06-16T00:00:00Z</updated>
  4584.    <id>https://www.fronteers.nl/nl/blog/2020/06/online-meetup-met-rachel-andrew-en-darice-de-cuba</id>
  4585.    <content xml:lang="nl" type="html">&lt;p&gt;Vrijdag 19 juni organiseren we onze allereerste online bijeenkomst! We hebben een korte workshop, 2 talks én een quiz in de planning staan.&lt;/p&gt;
  4586. &lt;p&gt;De bijeenkomst begint om 19:00 en is gratis en voor iedereen toegankelijk. &lt;a href=&quot;https://twitter.com/HenriHelvetica&quot;&gt;Henri Helvetica&lt;/a&gt; zal de rol van gastheer op zich nemen, &lt;a href=&quot;https://twitter.com/rachelandrew%5D&quot;&gt;Rachel Andrew&lt;/a&gt; zal ons leren over CSS-specificaties en ons bijpraten over de nieuwste ontwikkelingen in CSS, en &lt;a href=&quot;https://darice.org/&quot;&gt;Darice de Cuba&lt;/a&gt; zal een talk geven over inclusive design.&lt;/p&gt;
  4587. &lt;p&gt;Het volledige programma en overige informatie kun je vinden op &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2020/online-meetup&quot;&gt;onze bijeenkomstpagina&lt;/a&gt; en op &lt;a href=&quot;https://www.meetup.com/Fronteers-NL/events/271326914/&quot;&gt;Meetup&lt;/a&gt;.&lt;/p&gt;
  4588. &lt;p&gt;De livestream is vanaf 18:45 te volgen via &lt;a href=&quot;https://www.youtube.com/watch?v=N2tvZ4P44jY&quot;&gt;Youtube&lt;/a&gt;.&lt;/p&gt;
  4589. </content>
  4590.  </entry>
  4591.  <entry>
  4592.    <title>Vier de Dag van Front-end Development virtueel mee</title>
  4593.    <link href="https://www.fronteers.nl/nl/blog/2020/04/vier-de-dag-van-front-end-development-virtueel-mee"/>
  4594.    <updated>2020-04-03T00:00:00Z</updated>
  4595.    <id>https://www.fronteers.nl/nl/blog/2020/04/vier-de-dag-van-front-end-development-virtueel-mee</id>
  4596.    <content xml:lang="nl" type="html">&lt;p&gt;Zaterdag 4 april vieren we weer Dag van Front-end Development. We doen dit keer digitaal, onder andere met een front-end pubquiz. Vier jij als front-end developer deze dag met ons mee?&lt;/p&gt;
  4597. &lt;p&gt;Om 20:00 uur openen de deuren van onze virtuele zaal en kan iedereen die dat wil &lt;a href=&quot;https://meet.google.com/uwo-jfot-cuz&quot;&gt;joinen via Google Meet&lt;/a&gt;. Vervolgens zullen we om 20:20 uur met z&#39;n allen proosten op ons mooie werk. Let op: het is wel &#39;BYOD&#39;: bring your own drink. Aansluitend begint de front-end pubquiz, die we zullen spelen via de app Kahoot. Natuurlijk zijn er ook prijzen te winnen!&lt;/p&gt;
  4598. &lt;p&gt;Let op: voor de beste ervaring is het handig om twee devices te gebruiken. Een waarop je Google Meet hebt en de vragen van de pubquiz kunt zien en een met Kahoot. Kahoot toont namelijk de vragen niet, alleen antwoord-opties.&lt;/p&gt;
  4599. &lt;p&gt;English
  4600. April 4th is Day of Front-end Development and we will celebrate this with an online meeting and a front-end pub quiz. We will open our virtual doors at 20:00h and we will toast to our beautiful line of work at 20:20h. You can &lt;a href=&quot;https://meet.google.com/uwo-jfot-cuz&quot;&gt;join our Google Meet&lt;/a&gt;. Please remember, it&#39;s &#39;BYOD&#39;: bring your own drink. After our toast we will start a front-end pubquiz, which we will play with the app Kahoot. This quiz will be in English and of course there will be prizes to win.&lt;/p&gt;
  4601. &lt;p&gt;Note: it&#39;s best to have two devices available to play the pub quiz. One with the Google Meet where we will share the questions and one with Kahoot, because Kahoot only shows available answers, not the questions.&lt;/p&gt;
  4602. </content>
  4603.  </entry>
  4604.  <entry>
  4605.    <title>Ledenkorting voor masterclass Vue.js</title>
  4606.    <link href="https://www.fronteers.nl/nl/blog/2020/03/ledenkorting-voor-masterclass-vue-js"/>
  4607.    <updated>2020-03-06T00:00:00Z</updated>
  4608.    <id>https://www.fronteers.nl/nl/blog/2020/03/ledenkorting-voor-masterclass-vue-js</id>
  4609.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 14 en vrijdag 15 mei organiseert De Voorhoede een &lt;a href=&quot;https://www.voorhoede.nl/nl/events/vue-masterclass-3/&quot;&gt;Vue.js Masterclass&lt;/a&gt; in Amsterdam. Leden van Fronteers ontvangen 10% korting op deze Masterclass. In een tweedaagse workshop leer je alles wat je moet weten om een snelle en volwaardige web app te bouwen met Vue.&lt;/p&gt;
  4610. &lt;p&gt;Vue.js (vuejs.org) is één van de populairste JavaScript frameworks om web apps mee te bouwen. En dat is logisch. Vue is toegankelijk omdat het dichtbij de webstandaarden blijft. Het is een compleet framework, met een groot ecosysteem dat je ondersteunt bij het bouwen van complete web apps.&lt;/p&gt;
  4611. &lt;p&gt;In de tweedaagse workshop van de Voorhoede bouw je je &#39;eigen versie van Slack&#39; met Vue. Van basisconcepten tot geavanceerde patronen en hoe je jouw Vue app naar productie krijgt.&lt;/p&gt;
  4612. &lt;h2&gt;Dag 1 - Introductie in Vue:&lt;/h2&gt;
  4613. &lt;p&gt;De masterclass begint met de basisconcepten van Vue; werken met componenten, hun levensduur, eigenschappen, methodes en content slots; het managen van data en state; en animaties in Vue.&lt;/p&gt;
  4614. &lt;h2&gt;Dag 2 - Gevorderd in Vue:&lt;/h2&gt;
  4615. &lt;p&gt;Je leert hoe je opschaalt en je Vue app inricht voor productie; met vue-cli, vue-router, single file components en smart vs dumb components; je leert state management met Vuex; maakt gebruik van async actions om APIs te koppelen; en leert over error handling en optimaliseren van je app.&lt;/p&gt;
  4616. &lt;h2&gt;Praktisch&lt;/h2&gt;
  4617. &lt;p&gt;De masterclass zal gehouden worden op 14 &amp;amp; 15 mei en vindt in principe plaats op het kantoor van de Voorhoede op de Rijnsburgstraat 9 in Amsterdam. Mochten de huidige omstandigheden daar om vragen dan zullen we dit naar een online workshop aanpassen; de workshop gaat dus sowieso door! Fronteers-leden krijgen 10% korting op de prijs van de masterclass (zonder korting is deze €399 voor één dag, of €599 voor beide dagen). Bij de toegang zijn koffie, lunch, en een drankje na afloop inbegrepen. &lt;a href=&quot;https://www.voorhoede.nl/nl/events/vue-masterclass-3/&quot;&gt;Meer informatie is te vinden op de website van de masterclass&lt;/a&gt;.&lt;/p&gt;
  4618. &lt;p&gt;Mocht je gebruik willen maken van deze korting, &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;stuur dan een e-mail naar het bestuur&lt;/a&gt;. Zoals gebruikelijk geldt deze actie alleen voor leden die op dit moment al lid zijn.&lt;/p&gt;
  4619. </content>
  4620.  </entry>
  4621.  <entry>
  4622.    <title>Met Fronteerskorting naar dsgnday en CSS Day 2020</title>
  4623.    <link href="https://www.fronteers.nl/nl/blog/2020/01/met-fronteerskorting-naar-dsgnday-en-css-day-2020"/>
  4624.    <updated>2020-01-27T00:00:00Z</updated>
  4625.    <id>https://www.fronteers.nl/nl/blog/2020/01/met-fronteerskorting-naar-dsgnday-en-css-day-2020</id>
  4626.    <content xml:lang="nl" type="html">&lt;p&gt;Op 11 en 12 juni houdt Web Conferences Amsterdam voor maar liefst de achtste keer &lt;a href=&quot;https://cssday.nl/2020&quot;&gt;CSS Day&lt;/a&gt;. Sinds een paar jaar wordt CSS Day voorafgegaan door een dag met presentaties rond een aan webdevelopment verwant thema. Dit jaar betekent dat een comeback van dsgnday!&lt;/p&gt;
  4627. &lt;p&gt;Net als voorgaande jaren krijgen Fronteers-leden korting op dit congres. Wanneer je lid bent betaal je niet 600 maar 500 euro voor een kaartje voor beide dagen, of 275 in plaats van 325 voor een eendagskaartje (alle bedragen exclusief BTW). Het aanbod is geldig voor mensen die op dit moment al lid zijn, en je kunt ervan gebruik maken door &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;een email naar het bestuur&lt;/a&gt; te zenden. Je ontvangt dan een eenmalig te gebruiken kortingslink waarmee je je kaart kunt kopen.&lt;/p&gt;
  4628. &lt;p&gt;Bekijk voor meer informatie over de line-up de &lt;a href=&quot;https://cssday.nl/2020&quot;&gt;website van CSS Day&lt;/a&gt; en volg &lt;a href=&quot;https://twitter.com/cssdayconf&quot;&gt;CSS Day op Twitter&lt;/a&gt; of &lt;a href=&quot;https://www.linkedin.com/showcase/cssday/&quot;&gt;op LinkedIn&lt;/a&gt; voor aankondigingen rond de laatste sprekers!&lt;/p&gt;
  4629. </content>
  4630.  </entry>
  4631.  <entry>
  4632.    <title>We wish you...</title>
  4633.    <link href="https://www.fronteers.nl/nl/blog/2019/12/we-wish-you"/>
  4634.    <updated>2019-12-24T00:00:00Z</updated>
  4635.    <id>https://www.fronteers.nl/nl/blog/2019/12/we-wish-you</id>
  4636.    <content xml:lang="nl" type="html">&lt;p&gt;These last days of the year are a time to look back at what you did the past year and to look forward to what&#39;s to come. At Fronteers we can look back at a great year. We became a member of the &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/01/fronteers-is-w3c-lid&quot;&gt;W3C&lt;/a&gt;, &lt;a href=&quot;https://vimeo.com/channels/fronteersconf19&quot;&gt;Fronteers Conference&lt;/a&gt; was amazing as always and we hosted a couple of awesome &lt;a href=&quot;https://fronteers.nl/workshops&quot;&gt;workshops&lt;/a&gt;.&lt;/p&gt;
  4637. &lt;p&gt;And we also have a lot to look forward to. We&#39;re gonna present a new design for our identity, we&#39;re starting work at our new website and of course there will be more workshops and in the autumn another edition of Fronteers Conference.&lt;/p&gt;
  4638. &lt;p&gt;We hope you had a great 2019 and we wish you a happy christmas and a sparkling 2020. Of course, our volunteers have some new year&#39;s wishes for you too.&lt;/p&gt;
  4639. &lt;h2&gt;Jewwy&lt;/h2&gt;
  4640. &lt;pre&gt;&lt;code&gt;#fronteers + .everyone::before {
  4641.    content: &#39;Happy New Year !&#39;;
  4642.    position: absolute;
  4643.    z-index: 2020;
  4644.    background: #f2bb00;
  4645.    color: #000
  4646. }
  4647. &lt;/code&gt;&lt;/pre&gt;
  4648. &lt;h2&gt;Jules&lt;/h2&gt;
  4649. &lt;p&gt;Happy and accessible 2020!&lt;/p&gt;
  4650. &lt;h2&gt;Job&lt;/h2&gt;
  4651. &lt;p&gt;While twenty-nineteen&#39;s almost empty
  4652. this new year has potential a-plenty
  4653. The fronteers volunteers
  4654. wish you a splendid new year&#39;s.
  4655. All the best to you in twenty-twenty!&lt;/p&gt;
  4656. &lt;h2&gt;Claudia&lt;/h2&gt;
  4657. &lt;p&gt;Best wishes for 2020 &amp;amp; let’s build a more &lt;code&gt;#00FF00&lt;/code&gt; web together! 💚&lt;/p&gt;
  4658. &lt;h2&gt;Paul&lt;/h2&gt;
  4659. &lt;p&gt;The Web is for Everyone. For you, you, you and you! And you. And a happy 2020!&lt;/p&gt;
  4660. &lt;h2&gt;Bernard&lt;/h2&gt;
  4661. &lt;p&gt;Have fun breaking your new year&#39;s resolutions! Wishing you all the best for 2020!&lt;/p&gt;
  4662. &lt;h2&gt;Michael&lt;/h2&gt;
  4663. &lt;p&gt;Best wishes for you and your loved ones for 2020!&lt;/p&gt;
  4664. &lt;h2&gt;Iain&lt;/h2&gt;
  4665. &lt;p&gt;Keep building a better web and a better world in 2020! Happy holidays and the best wishes for 2020.&lt;/p&gt;
  4666. &lt;h2&gt;Koen&lt;/h2&gt;
  4667. &lt;p&gt;Let&#39;s make the web a little more awesome in 2020. Have a great year!&lt;/p&gt;
  4668. &lt;h2&gt;Josee&lt;/h2&gt;
  4669. &lt;p&gt;I wish you a lovely, happy and fun 2020! Let&#39;s all do our share to make the world and the web a little better every day.&lt;/p&gt;
  4670. &lt;h2&gt;Board - Anneke, Edwin, Sander&lt;/h2&gt;
  4671. &lt;p&gt;The board of Fronteers wishes all front-end developers fantastic and semantic, styles with smiles, possibly some high-end destructuring assignment and above all, creativity aplenty in 2020!&lt;/p&gt;
  4672. &lt;h2&gt;What are your plans and wishes for 2020?&lt;/h2&gt;
  4673. </content>
  4674.  </entry>
  4675.  <entry>
  4676.    <title>Cybersecurity: 4 tips voor developers</title>
  4677.    <link href="https://www.fronteers.nl/nl/blog/2019/12/cybersecurity-4-tips-voor-developers"/>
  4678.    <updated>2019-12-23T00:00:00Z</updated>
  4679.    <id>https://www.fronteers.nl/nl/blog/2019/12/cybersecurity-4-tips-voor-developers</id>
  4680.    <content xml:lang="nl" type="html">&lt;p&gt;Denk je het volgende hypothetische scenario eens in: maandagochtend kom je op je werk. Je bent wat vroeger dan normaal, vandaag zelfs de eerste van je team. Terwijl de koffiemachine druk aan het malen is, maalt jouw hoofd ook. Deadlines, volle backlogs, sprintmeetings. Drukke dag. Je opent je e-mail. Een bericht valt op: vannacht om 02:47:35 was het systeem een minuut heel langzaam. Hoewel het niet jouw taak is, besluit je toch even te gaan kijken.&lt;/p&gt;
  4681. &lt;p&gt;“Dit is wel heel vreemd”, denk je bij jezelf. Je hart begint harder te kloppen en je denkt: “met één medewerkeraccount zijn betaalinformatie en andere privé-gegevens van klanten bekeken in minder dan 53 seconden?” Je realiseert direct dat Herman dit niet zelf zou kunnen hebben gedaan. Sterker nog, hij zou niet eens toegang tot dit deel van de applicatie moeten hebben.&lt;/p&gt;
  4682. &lt;p&gt;Het kleinste datalek kan een bedrijf al in een zeer slecht daglicht zetten. Als front-end developer heb je zeker invloed op welke beveiligingsmaatregelen genomen worden en kun je concrete voorstellen aan je projectmanager voorleggen. Maak in deze blog kennis met de basisterminologie en leer een aantal maatregelen die je kunt nemen. Inclusief kant-en-klare user stories.&lt;/p&gt;
  4683. &lt;h2&gt;Wat is hier gebeurd?&lt;/h2&gt;
  4684. &lt;p&gt;Uit het onderzoek in ons hypothetische scenario is gebleken dat Herman in de gedeelde kantine gebruik heeft gemaakt van de openbare wifi. Wat hij niet door had, is dat zijn laptop net overgeschakeld was naar dit netwerk. Wat hij ook niet wist, was dat er op dat moment een aanvaller op het netwerk zat met een proxy wifi station en al het verkeer erlangs leidde. En laat het nou ook zo zijn, dat Herman opnieuw moest inloggen, omdat hij op het nieuwe netwerk zat. Hij waande zich veilig op het bedrijfsnetwerk en dacht nog: &amp;quot;ik kan nog geen koffie halen of ik moet alweer inloggen&amp;quot;.&lt;/p&gt;
  4685. &lt;p&gt;In de tussentijd zit de aanvaller klaar: zij heeft haar aanval zo opgezet dat het doelwit niets door heeft. Ze kan alle pagina&#39;s zien en zodoende ook de logingegevens achterhalen. Zo kwam de aanvaller aan de logingegevens van Herman. En daar stopte het niet. Zij kon het verkeer onderscheppen en dat gaf haar inzicht in de opzet van applicatie.&lt;/p&gt;
  4686. &lt;p&gt;Hoewel de rol van Herman maar klein was, laat de directeur er beslist geen gras over heen groeien: hij wordt bij binnenkomst direct apart genomen en op non-actief gezet.&lt;/p&gt;
  4687. &lt;h2&gt;Wat ging er wel goed?&lt;/h2&gt;
  4688. &lt;p&gt;Goede punten zijn er ook. Uit dit verhaal blijkt dat bepaalde acties gelogd worden met het bijbehorende account en dat er monitoring is van bijzonderheden, zoals errors, laadtijden en dergelijke.&lt;/p&gt;
  4689. &lt;p&gt;Hieronder volgen een aantal suggesties die je kunt uitvoeren waardoor een dergelijke aanval veel lastiger succesvol uit te voeren is.&lt;/p&gt;
  4690. &lt;h2&gt;Begrippen&lt;/h2&gt;
  4691. &lt;p&gt;De browser doet bij een bezoek van een website een &lt;em&gt;HTTP request&lt;/em&gt; en daarop volgt bij succes dan een reponse die verdeeld is in &lt;em&gt;response headers&lt;/em&gt; en een &lt;em&gt;reponse body&lt;/em&gt; (bijv. HTML, CSS en JS). In deze headers kun je informatie kwijt die de browser gebruikt om bepaalde maatregelen in te schakelen.&lt;/p&gt;
  4692. &lt;p&gt;&lt;em&gt;Mitigatie:&lt;/em&gt; &lt;a href=&quot;https://nl.wikipedia.org/wiki/Mitigatie&quot;&gt;Mitigatie&lt;/a&gt; is matiging, verzachting, vermindering. Of een aanval(ler) succesvol is, ligt aan veel factoren. In de context van cybersecurity betekent dit dat een beveiligingsmaatregel ervoor zorgt dat een mogelijk aanval minder succesvol, moeilijker of helemaal onmogelijk wordt.&lt;/p&gt;
  4693. &lt;h2&gt;1. Bescherm je cookie&lt;/h2&gt;
  4694. &lt;p&gt;User story: bescherm gebruikers tegen session hijacking&lt;/p&gt;
  4695. &lt;p&gt;De eerste tip is cookie-hygiëne. Zorg ervoor dat (sessie)cookies beschermd zijn met deze extra (los van elkaar te gebruiken) instellingen: HttpOnly, Secure en SameSite. Hiermee wordt session hijacking en CSRF (Cross Site Request Fogery) lastig voor een aanvaller.&lt;/p&gt;
  4696. &lt;p&gt;HttpOnly cookies hebben een bijzondere eigenschap: ze kunnen niet worden uitgelezen of bewerkt door de browser. Dus ook niet door third-party scripts. HttpOnly cookies kunnen alleen worden ingesteld door de server en worden alleen automatisch meegestuurd bij elke HTTP-request. Dit is handig voor sessiecookies.&lt;/p&gt;
  4697. &lt;p&gt;Door een cookie de Secure-flag te geven, wordt deze alleen verstuurd over HTTPS-verbindingen door de browser.&lt;/p&gt;
  4698. &lt;p&gt;De SameSite-flag is relatief nieuw en daarin kun je aangeven dat een cookie uitsluitend naar zijn eigen domein verstuurd mag worden: &lt;code&gt;SameSite=strict&lt;/code&gt;. Zo voorkom je dat jouw cookies bij HTTP-requests naar andere domeinen meegestuur worden. &lt;a href=&quot;https://web.dev/samesite-cookies-explained/&quot;&gt;Lees meer over SameSite cookies&lt;/a&gt;.&lt;/p&gt;
  4699. &lt;h2&gt;2. Gebruik een XSRF-cookie&lt;/h2&gt;
  4700. &lt;p&gt;User story: bescherm gebruikers tegen CSRF&lt;/p&gt;
  4701. &lt;p&gt;Een moderne browser geeft een XSRF-cookie alleen mee aan POST-, PUT-, DELETE-requests die naar dezelfde domein gaan. Dit biedt zo een extra check om CSRF-aanvallen te voorkomen. Als deze cookie niet aanwezig is, is de gebruiker niet geauthenticeerd.&lt;/p&gt;
  4702. &lt;pre&gt;&lt;code&gt;X-CSRF-Token: value
  4703. &lt;/code&gt;&lt;/pre&gt;
  4704. &lt;p&gt;De naam token suggereert dat hier een token voor gegenereerd moet worden, dit is echter optioneel. Hier kan elke value worden gebruikt. Uiteraard kun je er natuurlijk wel een token inzetten, als je dat zo wenst.&lt;/p&gt;
  4705. &lt;h2&gt;3. Content Security Policy, in kort: CSP&lt;/h2&gt;
  4706. &lt;p&gt;User story: gebruikers moeten maximaal beschermd zijn tegen XSS (Cross Site Scripting)&lt;/p&gt;
  4707. &lt;ul&gt;
  4708. &lt;li&gt;Browsers bevatten steeds meer features, variërend van toegang tot de camera en microfoon tot het sturen van notificaties.&lt;/li&gt;
  4709. &lt;li&gt;Stel dat een aanvaller het voor elkaar krijgt om een klein stukje JavaScript aan een pagina toe te voegen, dan heeft hij of zij toegang tot alle features, formulieren en andere acties van een gebruiker. De verkregen gegevens kunnen dan weer doorgestuurd worden naar een andere website.&lt;/li&gt;
  4710. &lt;li&gt;Zo kan een aanvaller potentieel gevoelige gegevens skimmen (ofwel ‘steelt’). Denk bijvoorbeeld aan creditcard-gegevens op een checkout-pagina, logingegevens of BSN-nummers op een pagina van een zorgverzekeraar. Een gebruiker heeft dit niet door en kan zich hier nauwelijks tegen wapenen.&lt;/li&gt;
  4711. &lt;/ul&gt;
  4712. &lt;p&gt;Gelukkig is dit te mitigeren met behulp van Content Security Policy (CSP). Moderne browsers ondersteunen dit sinds kort.
  4713. Met behulp van CSP kun je exact specificeren bij het inladen van de pagina welke onderdelen van de browser gebruikt mogen worden, vanaf welke domein en zelf met welke hash. Als de websites dan toch een van deze features aanroept of een script probeert in te laden, dan faalt dit. Zo wordt het voor aanvallers iets lastiger: voordat ze een script kunnen uitvoeren moet eerst CSP worden uitgeschakeld.&lt;/p&gt;
  4714. &lt;p&gt;Implementatie van CSP kan op twee manieren: je kunt een HTTP-header toevoegen of in de HTTP-reponse een &lt;code&gt;&amp;lt;meta&amp;gt;&lt;/code&gt;-tag toevoegen. Op de website van MDN kun je &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP&quot;&gt;uitstekende voorbeelden&lt;/a&gt; vinden.&lt;/p&gt;
  4715. &lt;p&gt;Soms is de implementatie hiervan niet eenvoudig. Het is bijvoorbeeld lastig als je website veel third party scripts inlaadt of vanaf meerdere domeinen api calls moet doen. Wat je dan als tussenmaatregel zou kunnen doen is het beschermen van bepaalde pagina&#39;s met gevoelige gegevens. Op een login- of betaalpagina bijvoorbeeld wil je geen third party scripts draaien.&lt;/p&gt;
  4716. &lt;p&gt;Doel: Voorkom dat een pagina iets kan doen wat je niet nodig hebt, maar een aanvaller wellicht wel. Door exact te specificeren welke features een browser mag gebruiken, kun je bepaalde aanvalsvectoren onmogelijk maken of het effect ervan beperken.&lt;/p&gt;
  4717. &lt;h2&gt;4. Mitigeer downgrade aanval&lt;/h2&gt;
  4718. &lt;p&gt;User story: als gebruiker wil ik &lt;em&gt;altijd&lt;/em&gt; een HTTPS-verbinding.&lt;/p&gt;
  4719. &lt;ul&gt;
  4720. &lt;li&gt;Veel websites met een HTTPS-verbinding kunnen ook nog bereikt worden via HTTP.&lt;/li&gt;
  4721. &lt;li&gt;Een aanvaller kan proberen om de gebruiker om te leiden naar de HTTP-versie en zo het verkeer monitoren of zelf bewerken, zoals bij Herman in ons hypothetische verhaal.&lt;/li&gt;
  4722. &lt;li&gt;Dit heet een &lt;strong&gt;downgrade aanval&lt;/strong&gt;. Hier kun je twee maatregelen tegen nemen om dit (deels) te voorkomen.&lt;/li&gt;
  4723. &lt;/ul&gt;
  4724. &lt;p&gt;&lt;em&gt;A.&lt;/em&gt; Gebruik HSTS (HTTP Strict Transport Security) door dit HTTP-responseveld toe te voegen: &lt;code&gt;Strict-Transport-Security: max-age=60000&lt;/code&gt;. Als een browser dit detecteert, onthoudt deze voor een bepaalde periode dat altijd de HTTPS-website geopend moet worden.&lt;/p&gt;
  4725. &lt;p&gt;&lt;em&gt;B.&lt;/em&gt; Mochten er nou toch nog non-HTTPS verbindingen worden gemaakt, zorg er dan voor dat elk HTTP-request automatisch wordt geredirect naar HTTPS. Dit kun bij Apache in de .htaccess ingestellen of bijv. met Express (Node.js webserver) met middleware.&lt;/p&gt;
  4726. &lt;h2&gt;Hier stopt het niet... een paar tips&lt;/h2&gt;
  4727. &lt;p&gt;De hierboven genoemde maatregelen zijn maar een kleine selectie van acties die je zelf concreet kunt nemen. Er is nog veel meer mogelijk. Kijk bijvoorbeeld eens naar onderstaande tips.&lt;/p&gt;
  4728. &lt;ul&gt;
  4729. &lt;li&gt;Luister naar de podcast &lt;a href=&quot;https://darknetdiaries.com/&quot;&gt;Darknet Diaries&lt;/a&gt;.&lt;/li&gt;
  4730. &lt;li&gt;Voeg 2FA toe met bijvoorbeeld een time-based one-time password.&lt;/li&gt;
  4731. &lt;li&gt;Laat een penetration test uitvoeren. Probeer maximaal te leren van zo&#39;n team dat langs komt en lees het verslag van top tot teen.&lt;/li&gt;
  4732. &lt;li&gt;Leer meer over &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy&quot;&gt;Same Origin Policy&lt;/a&gt;.&lt;/li&gt;
  4733. &lt;li&gt;Leer meer over &lt;a href=&quot;https://developer.mozilla.org/nl/docs/Web/Security/Subresource_Integrity&quot;&gt;Subresource Integrity&lt;/a&gt;.&lt;/li&gt;
  4734. &lt;li&gt;Lees &lt;a href=&quot;https://www.securitydrops.com/&quot;&gt;Security Droplets&lt;/a&gt;&lt;/li&gt;
  4735. &lt;li&gt;Pas op met deze header &lt;code&gt;Access-Control-Allow-Origin: *&lt;/code&gt;. Een aantal van de hierboven beschreven maatregelen kunnen minder effectief gemaakt worden.&lt;/li&gt;
  4736. &lt;li&gt;Bespreek het onderwerp ‘cybersecurity’ in je team. Er is een goede kans dat er iemand bij zit die direct wat verbeterpunten weet om Herman te redden.&lt;/li&gt;
  4737. &lt;/ul&gt;
  4738. &lt;p&gt;Op naar een veiliger decennium!&lt;/p&gt;
  4739. &lt;h2&gt;Over Melle Wynia&lt;/h2&gt;
  4740. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/melle.jpg&quot; alt=&quot;Foto van Melle Wynia&quot; class=&quot;floating-portrait&quot; /&gt;
  4741. Melle Wynia werkt als freelance front-end developer/consultant/architect. Voor zijn klanten sluit hij aan bij hun teams om kennis over te dragen, de kwaliteit te waarborgen, beveiliging op peil te brengen en nieuwe features te realiseren. Tot zijn tools behoren onder andere Node, Angular en Vue.js.
  4742. Melles donatie gaat naar de Hersenstichting.
  4743. </content>
  4744.  </entry>
  4745.  <entry>
  4746.    <title>Clichés op het web</title>
  4747.    <link href="https://www.fronteers.nl/nl/blog/2019/12/cliches-op-het-web"/>
  4748.    <updated>2019-12-20T00:00:00Z</updated>
  4749.    <id>https://www.fronteers.nl/nl/blog/2019/12/cliches-op-het-web</id>
  4750.    <content xml:lang="nl" type="html">&lt;p&gt;Letterlijk is een ‘cliché’ een metalen plaat waarmee je illustraties kunt afdrukken. Figuurlijk is een cliché een afgesleten manier van spreken of denken. De eerste keer dat je een grap maakt, is ‘ie leuk. De tweede keer is ‘ie al minder. Na tien keer is ‘ie saai. Clichés zijn de doodgeslagen cola van je denkvermogen, om het op z’n BLØFs te zeggen.&lt;/p&gt;
  4751. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/king-pepermunt-cliche.jpg&quot; alt=&quot;Een cliché voor reclame voor King pepermunt&quot; /&gt;&lt;/p&gt;
  4752. &lt;p class=&quot;note&quot;&gt;
  4753. Een cliché voor reclame voor King pepermunt
  4754. &lt;/p&gt;
  4755. &lt;p&gt;Clichés zijn niet per definitie onwaar of fout. Het kan heel handig zijn om in clichés te denken. Het is doodvermoeiend en zonde van je tijd om altijd overal over na te denken. Clichés helpen je dan, zodat je niet te lang hoeft na te denken. Maar je moet niet alles geloven wat je denkt, want soms is wat je denkt gewoon fout.&lt;/p&gt;
  4756. &lt;p&gt;Sommige clichés zijn bijna niet uit te roeien. “Als anderen het doen, zal het wel goed zijn.” Een klant van me vroeg laatst wanneer ik een cookie-waarschuwing op de site zou plaatsen. Waarom? Omdat iedereen het doet, dus hoort een cookie-waarschuwing op elke website.&lt;/p&gt;
  4757. &lt;p&gt;Aaargh.&lt;/p&gt;
  4758. &lt;h2&gt;Cliché 1: ‘Een plaatje zegt meer dan 1000 woorden’&lt;/h2&gt;
  4759. &lt;p&gt;Sure, maar welke 1000 woorden zegt jouw plaatje? Zegt je plaatje “Ik had geen tijd om een goede foto te zoeken”?&lt;/p&gt;
  4760. &lt;h2&gt;Plaatjes-omdat-het-moet&lt;/h2&gt;
  4761. &lt;p&gt;We zijn gewend geraakt aan enorme hero images, schermvullend en topzwaar. Hierdoor denken we dat bij elk bericht een foto hoort. Het probleem is dat niet iedereen een geweldige foto-bibliotheek ter beschikking heeft. Het resultaat? Websites vol plaatjes-omdat-het-moet. Het liefst clipart met teksten die verkeerd afgesneden worden. Fotoredactie is het ondergeschoven kindje van modern webwerk.&lt;/p&gt;
  4762. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/screenshot-frankwatching-20191127.jpg&quot; alt=&quot;Screenshot van Frankwatching.com (november 2019)&quot; /&gt;&lt;/p&gt;
  4763. &lt;p class=&quot;note&quot;&gt;
  4764. Screenshot van Frankwatching.com (november 2019)
  4765. &lt;/p&gt;
  4766. &lt;h2&gt;Stockfoto’s&lt;/h2&gt;
  4767. &lt;p&gt;Niet iedereen heeft een geweldige smaak of fantasie, sorry dat ik het zeg. En even een plaatje googelen is een fluitje van een cent.&lt;/p&gt;
  4768. &lt;p&gt;Resultaat? “&lt;a href=&quot;https://paulvanbuuren.nl/aap-eet-banaan/&quot;&gt;Aap eet banaan&lt;/a&gt;“, een uitdrukking van ontwerpers voor een ontwerp dat er te dik bovenop ligt. Denk aan een hamer als logo voor een timmerman. Een aap-eet-banaan-slogan is: ‘Voor al uw timmerwerk’.&lt;/p&gt;
  4769. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/google-image-search-01-ariane-the-overused.jpg&quot; alt=&quot;Ariane The Overexposed Stockphoto Model&quot; /&gt;&lt;/p&gt;
  4770. &lt;p class=&quot;note&quot;&gt;
  4771. Ariane The Overexposed Stockphoto Model
  4772. &lt;/p&gt;
  4773. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/google-image-search-02-succes.jpg&quot; alt=&quot;Zoek op “Success”&quot; /&gt;&lt;/p&gt;
  4774. &lt;p class=&quot;note&quot;&gt;
  4775. Zoek op “Success”
  4776. &lt;/p&gt;
  4777. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/google-image-search-03-men-shaking-hands.jpg&quot; alt=&quot;Zoek op “Men shaking hands”&quot; /&gt;&lt;/p&gt;
  4778. &lt;p class=&quot;note&quot;&gt;
  4779. Zoek op “Men shaking hands”
  4780. &lt;/p&gt;
  4781. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/google-image-search-04-boys-toys.jpg&quot; alt=&quot;Zoek op “Boy toys”&quot; /&gt;&lt;/p&gt;
  4782. &lt;p class=&quot;note&quot;&gt;
  4783. Zoek op “Boy toys”
  4784. &lt;/p&gt;
  4785. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/google-image-search-05-girls-toys.jpg&quot; alt=&quot;Zoek op “Girl toys”&quot; /&gt;&lt;/p&gt;
  4786. &lt;p class=&quot;note&quot;&gt;
  4787. Zoek op “Girl toys”
  4788. &lt;/p&gt;
  4789. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/google-image-search-07-woman-eating-salad.jpg&quot; alt=&quot;Zoek op “Woman eating salad”&quot; /&gt;&lt;/p&gt;
  4790. &lt;p class=&quot;note&quot;&gt;
  4791. Zoek op “Woman eating salad”
  4792. &lt;/p&gt;
  4793. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/google-image-search-06-hackers.jpg&quot; alt=&quot;Zoek op “Hacker”&quot; /&gt;&lt;/p&gt;
  4794. &lt;p class=&quot;note&quot;&gt;
  4795. Zoek op “Hacker”
  4796. &lt;/p&gt;
  4797. &lt;h2&gt;Icoontjes&lt;/h2&gt;
  4798. &lt;p&gt;En icoontjes? Breek me de bek niet open over icoontjes. Alles wordt begrijpelijker door icoontjes zeg je? Hmmm, kijk ‘&lt;a href=&quot;https://vimeo.com/251649861&quot;&gt;Repelsteeltje – Guess My Name&lt;/a&gt;’ nog eens terug, een hilarische presentatie van Mallory van Achterberg over onbegrijpelijke icoontjes.&lt;/p&gt;
  4799. &lt;h2&gt;Cliché 2: klik hier en lees meer&lt;/h2&gt;
  4800. &lt;p&gt;Opa vertelt: er is een tijd geweest dat het internet zo nieuw was dat je alles moest uitleggen. Dat was de tijd dat we URLs in reclame volledig uitspelden. “Ga naar haa tee tee pee dubbele punt slash slash wee wee wee nu punt en el voor het laatste nieuws”, ofzo. Je wist niet beter, je had niets anders. Dus je moest ook het principe van een klikbare link uitleggen. Uit die tijd stamt de irritante gewoonte om ‘klik &lt;a href=&quot;http://click-here.nl/&quot;&gt;hier&lt;/a&gt;‘ als linktekst te gebruiken. ’t Liefst 1 woord ja.&lt;/p&gt;
  4801. &lt;h2&gt;Klik me dan, als je kan&lt;/h2&gt;
  4802. &lt;p&gt;Moet ik nog vertellen waarom dat een slechte gewoonte is? Ten eerste geldt: hoe kleiner het klikbare gedeelte, hoe moeilijker het is om er op te klikken (zie deze &lt;a href=&quot;https://www.interaction-design.org/literature/topics/fitts-law&quot;&gt;uitleg van Fitt’s Law&lt;/a&gt;). Ten tweede: ‘hier’ beschrijft niet waar je heen gaat. Je vertelt je gebruiker niet wat hij op die nieuwe URL kan verwachten. Dat is niet aardig. Wees aardig voor je bezoeker.&lt;/p&gt;
  4803. &lt;h2&gt;Lees meer, meer, meer!&lt;/h2&gt;
  4804. &lt;p&gt;De tweelingbroer van Klik Hier is Lees Meer. Ook met ‘lees meer’ vertel je niet waar je naartoe gaat. Je hebt pech als je afhankelijk bent van een screenreader om wijs te worden uit een pagina met twintig keer een link met ‘lees meer’ als tekst. Beschrijf met je linktekst alsjeblieft waar je heen gaat en maak deze tekst uniek voor je webpagina. Mocht je omwille van het design van je pagina toch veroordeeld zijn tot korte linkteksten, gebruik dan een list. Gebruik bijvoorbeeld het &lt;a href=&quot;https://www.w3.org/WAI/GL/wiki/Using_aria-label_for_link_purpose&quot;&gt;‘aria-label’-attribuut als alternatief&lt;/a&gt;, of gebruik de titel van de pagina waarnaar je verwijst als linktekst, maar &lt;a href=&quot;https://a11yproject.com/posts/how-to-hide-content/&quot;&gt;verberg die louter visueel&lt;/a&gt;.&lt;/p&gt;
  4805. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/lees-meer-boeken.jpg&quot; alt=&quot;Stapels boeken&quot; /&gt;&lt;/p&gt;
  4806. &lt;p class=&quot;note&quot;&gt;
  4807. Dit is een prima aansporing: “Lees meer”, als je bedoelt: lees meer boeken
  4808. &lt;/p&gt;
  4809. &lt;p&gt;Klik anders hier even: &lt;a href=&quot;http://click-here.nl/&quot;&gt;click-here.nl&lt;/a&gt;&lt;/p&gt;
  4810. &lt;h2&gt;Cliche 3: Social media-knoppen&lt;/h2&gt;
  4811. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/vijf-knoppen-om-een-pagina-te-delen-facebook-twitter-whatsapp-linkedin-email.jpg&quot; alt=&quot;Social media knoppen&quot; /&gt;&lt;/p&gt;
  4812. &lt;p class=&quot;note&quot;&gt;
  4813. Klik hier
  4814. &lt;/p&gt;
  4815. &lt;p&gt;Die knoppen om een pagina te delen op social media? Ze werken amper. Ik ken geen onderzoeken die aantonen dat ze een groot effect hebben op het wel of niet delen van een pagina. Maximaal 1% van je bezoekers gebruikt die knoppen om een pagina te delen.&lt;/p&gt;
  4816. &lt;p&gt;Waar ze wel goed voor zijn? Eh.&lt;/p&gt;
  4817. &lt;p&gt;Ze zijn vooral bedoeld om je opdrachtgever het fijne gevoel te geven helemaal hip &amp;amp; happening te zijn, want als je niet op sociale media meedoet besta je niet.&lt;/p&gt;
  4818. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/satansboek.jpg&quot; alt=&quot;Satansboek&quot; /&gt;&lt;/p&gt;
  4819. &lt;p&gt;Afhankelijk van hoe je die knoppen implementeert kun je het &lt;a href=&quot;https://satansboek.nl/&quot;&gt;satanische Facebook&lt;/a&gt; helpen om je bezoeker over het hele internet te achtervolgen.&lt;/p&gt;
  4820. &lt;p&gt;Hmmm, privacy.&lt;/p&gt;
  4821. &lt;h2&gt;Cliche 4: lage bounce rate&lt;/h2&gt;
  4822. &lt;p&gt;Bounce rate is een marketingterm voor het percentage van je bezoekers die na het eerste bezoek aan je site weer vertrekken; “Hee, hoi” en ze stuiteren weer door, zeg maar. Hoe lager je bounce rate, hoe meer je bezoekers doorklikken naar een volgende pagina op je site.&lt;/p&gt;
  4823. &lt;p&gt;Een hoge bounce rate is niet erg.&lt;/p&gt;
  4824. &lt;p&gt;Sterker nog: een hoge bounce rate zou kunnen betekenen (aanname!) dat je bezoeker exact gevonden heeft wat hij (m/v/a) wilde. Na zijn succesvolle bezoek aan je website sloot hij zijn laptop, ging naar huis en knuffelde zijn kind, zijn hond en zijn kat.&lt;/p&gt;
  4825. &lt;p&gt;Wil je je bezoeker tevreden stellen of wil je ‘m bezigheidstherapie geven?&lt;/p&gt;
  4826. &lt;h2&gt;Cliche 5: cookie-waarschuwingen&lt;/h2&gt;
  4827. &lt;p&gt;Het web is ziek. Cookie-waarschuwingen zijn daar het symptoom van. Veel websites staan vol meuk om elke klik vast te leggen: pixels, beacons, fingerprinting, dynamic cookies, en what have you not. Anno 2019 is het web een panopticum waarin elke stap van je bezoeker doorgegeven wordt aan de Googles, Facebooks en geheime diensten van deze wereld. Dankzij Edward Snowden kennen we de details en ja, die zijn echt heel erg. &lt;a href=&quot;https://www.wired.com/story/billion-records-exposed-online/&quot;&gt;Onze gegevens liggen inmiddels op straat&lt;/a&gt;.&lt;/p&gt;
  4828. &lt;h2&gt;Cookies tegen heug en meug&lt;/h2&gt;
  4829. &lt;p&gt;Cookie-waarschuwingen zijn bedoeld als pleister, om bezoekers meer controle te geven over hun gegevens. Helaas komen de meeste cookiemeldingen neer op: “Cookies: we zetten ze en we laten alle advertentieboeren ook meekijken en je hebt het er maar mee te doen.” Ik denk even aan de &lt;a href=&quot;https://nos.nl/op3/artikel/2273929-gevolgd-op-internet-honderden-websites-schenden-je-privacy.html&quot;&gt;1000 ongevraagde cookies op de site van TV Rijnmond&lt;/a&gt;.&lt;/p&gt;
  4830. &lt;h2&gt;Aksie, harde aksie!&lt;/h2&gt;
  4831. &lt;p&gt;Daarom denk ik dat het goed is dat we als front-enders veel meer weerstand bieden tegen mogelijke schendingen van de privacy van onze bezoekers. Vraag je bij elk formulier dat je maakt bijvoorbeeld:&lt;/p&gt;
  4832. &lt;ul&gt;
  4833. &lt;li&gt;Waarom vraag ik dit van de gebruiker?&lt;/li&gt;
  4834. &lt;li&gt;Moet ik een binair geslacht weten? Welke ramp gebeurt er als ik straks niet iemand aanspreek met ‘Geachte mevrouw’, maar met ‘Hallo’ of ‘Goedendag’?&lt;/li&gt;
  4835. &lt;li&gt;Moet ik echt een telefoonnummer vragen?&lt;/li&gt;
  4836. &lt;li&gt;Wat gebeurt er straks met al deze gegevens?&lt;/li&gt;
  4837. &lt;li&gt;En wat als deze gegevens op straat komen te liggen?&lt;/li&gt;
  4838. &lt;/ul&gt;
  4839. &lt;p&gt;Uiteraard wil je weten hoeveel bezoekers je hebt op je site. Maar moet je echt Google mee laten kijken? Google weet welke zoektermen je bezoeker gebruikte en dankzij je niet-geanonimiseerde Analytics-tracker weet het ook hoe snel je bezoeker weer wegstuiterde van je site. Gebruik betere analytics tools, die niet stiekem data doorverkopen aan adverteerders. Advertentieboeren zijn de keyloggers van het internet. Het is tijd dat we het heft weer in eigen hand nemen. Baas over eigen data.&lt;/p&gt;
  4840. &lt;h2&gt;Cliche 6: formuliervelden zonder labels&lt;/h2&gt;
  4841. &lt;p&gt;Ik denk dat het onkunde is dat er zoveel formulieren zonder fatsoenlijke labels te vinden zijn. Het is nogal simpel. Heb je een &lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt; dan hoort daar een &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; bij. Geen mitsen, geen maren: er hoort een label bij. Ik herhaal het even: geen placeholder, geen vet tekstje. Nee, een zichtbaar &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt;.&lt;/p&gt;
  4842. &lt;pre&gt;&lt;code&gt;&amp;lt;label for&amp;quot;tralala&amp;quot;&amp;gt;
  4843. &amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;tralala&amp;quot; name=&amp;quot;voornaam&amp;quot; placeholder=&amp;quot;Je voornaam&amp;quot; value=&amp;quot;&amp;quot; /&amp;gt;
  4844. &amp;lt;/label&amp;gt;
  4845. &lt;/code&gt;&lt;/pre&gt;
  4846. &lt;p&gt;Weet je wat daar zo handig van is? Je vertelt daarmee aan je gebruiker wat hij moet doen.&lt;/p&gt;
  4847. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cliches/lift-knopjes.jpg&quot; alt=&quot;Liftknopjes zonder nummer&quot; /&gt;&lt;/p&gt;
  4848. &lt;p class=&quot;note&quot;&gt;
  4849. O jee, geen labels. Wat nu? [Het origineel is trouwens niet veel beter](https://www.reddit.com/r/CrappyDesign/comments/78gcgt/this_elevator_button_panel/).
  4850. &lt;/p&gt;
  4851. &lt;h2&gt;Cliche 7: niet-onderstreepte links&lt;/h2&gt;
  4852. &lt;p&gt;Er zijn designers die zeggen: “Onderstreepte links zijn niet mooi.” Ik vind: suck it, hou je links herkenbaar. Vanaf het begin der tijden zijn links onderstreept en blauw. Heb je de link al bezocht dan is de link paars. Wapper je er met je muis overheen, dan wordt ‘ie rood. Zo deden we dat vroeger, zo deden onze voorouders het, zo deden de Neanderthalers het. Links zijn onderstreept.&lt;/p&gt;
  4853. &lt;h2&gt;“Ja maar, ik heb m’n links een andere kleur gegeven!”&lt;/h2&gt;
  4854. &lt;p&gt;Prima, maar wat als je bezoeker nou moeite heeft met kleuren zien? Dan is het heel fijn om niet op kleur alleen te vertrouwen. Dus ik zeg: onderstreping. Superhandig.&lt;/p&gt;
  4855. &lt;h2&gt;Conclusie?&lt;/h2&gt;
  4856. &lt;p&gt;Ik heb een paar willekeurige clichés gekozen om over te klagen. Waar dit wat mij betreft op neerkomt is:&lt;/p&gt;
  4857. &lt;ul&gt;
  4858. &lt;li&gt;Hoe minder je bezoeker hoeft na te denken over je site hoe beter het is.&lt;/li&gt;
  4859. &lt;li&gt;Hoe minder meuk wij vragen van onze bezoeker, hoe beter het voor hem is.&lt;/li&gt;
  4860. &lt;li&gt;Hoe beter we nadenken over het hoe en waarom we websites maken, hoe beter het voor iedereen is.&lt;/li&gt;
  4861. &lt;/ul&gt;
  4862. &lt;p&gt;We moeten wat liever zijn voor onze bezoekers en de boel niet te moeilijk maken.&lt;/p&gt;
  4863. &lt;p&gt;Vrede op aarde.&lt;/p&gt;
  4864. &lt;p&gt;(Dit is een vertaling van een praatje dat ik eerder gaf bij de Fronteers Jam Sessions in oktober.)&lt;/p&gt;
  4865. &lt;h2&gt;Over Paul van Buuren&lt;/h2&gt;
  4866. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/paul.jpg&quot; alt=&quot;Foto van Paul van Buuren&quot; class=&quot;floating-portrait&quot; /&gt;
  4867. Paul van Buuren maakt websites sinds 1998. Zijn vooropleiding heeft niks met webdesign te maken, want dat bestond domweg nog niet. Onder de noemer WBVB Rotterdam werkt hij als zelfstandige voor diverse opdrachtgevers. Z&#39;n specialiteit is het maken van toegankelijke WordPress-sites. Hij praat opvallend vaak in algemeenheden en tegeltjeswijsheden.
  4868. Pauls donatie gaat naar KiKa.
  4869. </content>
  4870.  </entry>
  4871.  <entry>
  4872.    <title>Rustig aan de gourmet dankzij Cypress.io</title>
  4873.    <link href="https://www.fronteers.nl/nl/blog/2019/12/rustig-aan-de-gourmet-dankzij-cypress-io"/>
  4874.    <updated>2019-12-19T00:00:00Z</updated>
  4875.    <id>https://www.fronteers.nl/nl/blog/2019/12/rustig-aan-de-gourmet-dankzij-cypress-io</id>
  4876.    <content xml:lang="nl" type="html">&lt;p&gt;De feestdagen, dagen vol met eten, gezelligheid en nog meer clichés, komen er weer aan. Het laatste wat je op deze dagen wilt: een telefoontje over code die niet werkt. Last minute op kerstavond uitrollen vond je al geen goed idee, maar nu heb je er dubbel spijt van.
  4877. Maar hoe is dit te voorkomen, behalve door niet op kerstavond nog iets uit te rollen? Hoe kun je met een gerust hart aanschuiven bij de gourmet met de wetenschap dat bijvoorbeeld de login-knop op je site nog steeds inlogt? Wellicht is &lt;a href=&quot;http://cypress.io/&quot;&gt;Cypress.io&lt;/a&gt; wel het overwegen waard...&lt;/p&gt;
  4878. &lt;h2&gt;Wat is Cypress?&lt;/h2&gt;
  4879. &lt;p&gt;Zelf hoorde ik een tijdje terug voor het eerst over Cypress. Met dit open source Javascript framework kun je end-to-end tests schrijven voor praktisch alles wat in een webbrowser draait. &lt;em&gt;Met welk framework de applicatie of website ook gebouwd is (React, Angular, Vue), het is allemaal te testen met Javascript!&lt;/em&gt;&lt;/p&gt;
  4880. &lt;p&gt;Cypress is een overkoepelend framework dat verschillende tools samenbrengt. Het bevat bekende test-tools als Mocha, Chai en Sinon. En doordat al deze tools dus al aanwezig zijn, kun je je focussen op wat echt belangrijk is: het schrijven van tests.&lt;/p&gt;
  4881. &lt;p&gt;Na het lezen van wat algemene verhalen over dit framework, werd ik al enthousiast over de mogelijkheden:&lt;/p&gt;
  4882. &lt;ul&gt;
  4883. &lt;li&gt;&lt;em&gt;Timetravel.&lt;/em&gt; Iedere stap tijdens een test is een snapshot. Je kunt via de GUI iedere stap van je test los bekijken om te checken waar het mis gaat.&lt;/li&gt;
  4884. &lt;li&gt;&lt;em&gt;Debuggen met Chrome Devtools.&lt;/em&gt; Je kunt (in iedere stap) snel debuggen met de vertrouwde Chrome Devtools.&lt;/li&gt;
  4885. &lt;li&gt;&lt;em&gt;‘Not flaky’.&lt;/em&gt; Geen async hel, Cypress wacht netjes op de state die jij wilt, tot het testen verder gaat.&lt;/li&gt;
  4886. &lt;li&gt;&lt;em&gt;Het is Javascript!&lt;/em&gt; Dus als Front-ender met enige Javascript kennis kun je supersnel beginnen met het schrijven van tests.&lt;/li&gt;
  4887. &lt;li&gt;&lt;em&gt;Goede documentatie.&lt;/em&gt; De site bevat goede en uitgebreide documentatie met veel voorbeelden.&lt;/li&gt;
  4888. &lt;li&gt;&lt;em&gt;Cypress heeft een GUI.&lt;/em&gt; Tests zijn gemakkelijk te starten, volgen en stoppen in een duidelijke Graphical User Interface.&lt;/li&gt;
  4889. &lt;/ul&gt;
  4890. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cypress-io/image001.png&quot; alt=&quot;De Cypress GUI a.k.a. test runner&quot; /&gt;&lt;/p&gt;
  4891. &lt;p&gt;&lt;em&gt;Kortom: er zijn een hoop mooie features die het gourmetten op kerstavond een stuk aangenamer maken.&lt;/em&gt;&lt;/p&gt;
  4892. &lt;h2&gt;OK, ik heb ook een project dat ik wil testen! Wat moet ik doen?&lt;/h2&gt;
  4893. &lt;p&gt;Het installeren van Cypress is zo gedaan. Volgens de documentatie zou je binnen 60 seconden je eerste tests moeten kunnen draaien. Wellicht wat overdreven, maar heel veel scheelt het niet.&lt;/p&gt;
  4894. &lt;p&gt;Om Cypress via npm te installeren, is het uitvoeren van het volgende script in je projectmap voldoende.&lt;/p&gt;
  4895. &lt;pre&gt;&lt;code&gt;$ npm install cypress --save-dev
  4896. &lt;/code&gt;&lt;/pre&gt;
  4897. &lt;p&gt;De Cypress test runner kun je vervolgens openen via NPX:&lt;/p&gt;
  4898. &lt;pre&gt;&lt;code&gt;$ npx cypress open
  4899. &lt;/code&gt;&lt;/pre&gt;
  4900. &lt;p&gt;Deze is ook te openen via een NPM script. Voeg hiervoor het volgende toe aan je &lt;em&gt;package.json&lt;/em&gt;:&lt;/p&gt;
  4901. &lt;pre&gt;&lt;code&gt;{
  4902.    &amp;quot;scripts&amp;quot;: {
  4903.          &amp;quot;cypress:open&amp;quot;: &amp;quot;cypress open&amp;quot;
  4904.    }
  4905. }
  4906. &lt;/code&gt;&lt;/pre&gt;
  4907. &lt;p&gt;Hiermee kun je met onderstaand NPM commando de Cypress test runner openen.&lt;/p&gt;
  4908. &lt;pre&gt;&lt;code&gt;$ npm run cypress:open
  4909. &lt;/code&gt;&lt;/pre&gt;
  4910. &lt;h2&gt;De Test Runner&lt;/h2&gt;
  4911. &lt;p&gt;Na het openen van Cypress verschijnt de test runner. Hierin krijg je een overzicht van alle test-bestanden die er in je project zitten. Deze kunnen los van elkaar gestart worden, maar je kunt er ook voor kiezen om alle tests achter elkaar te draaien.&lt;/p&gt;
  4912. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cypress-io/image003.png&quot; alt=&quot;Cypress mappenindeling&quot; /&gt;&lt;/p&gt;
  4913. &lt;p&gt;Bij het installeren en de eerste keer openen van Cypress is er al automatisch een map cypress aangemaakt in je project. Deze bevat zelf ook weer diverse mappen, met daarin voorbeeldbestanden. De testscripts kun je terugvinden en toevoegen in &lt;em&gt;integration&lt;/em&gt;. Dit is de belangrijkste map voor nu.Tijd voor een nieuwe test!&lt;/p&gt;
  4914. &lt;h2&gt;Je eerste test: de login pagina&lt;/h2&gt;
  4915. &lt;p&gt;Stel je voor: inloggen is een belangrijke pagina van je site en moet altijd bereikbaar zijn via een grote button ‘inloggen’. Dan zou een logische eerste test zijn: wanneer de gebruiker op de inloggen button klikt, wordt hij/zij dan doorverwezen naar de juiste pagina?&lt;/p&gt;
  4916. &lt;p&gt;Om te starten maak je eerst een nieuw bestand aan in de &lt;em&gt;integration&lt;/em&gt; map. Laten we deze &lt;em&gt;login.spec.js&lt;/em&gt; noemen (of waar je je goed bij voelt). Zoals je zult zien, het bestand zal meteen getoond worden in de test runner, mits je deze al open hebt staan.&lt;/p&gt;
  4917. &lt;p&gt;De test kunnen we als succesvol beschouwen wanneer:&lt;/p&gt;
  4918. &lt;ol&gt;
  4919. &lt;li&gt;De login button bestaat&lt;/li&gt;
  4920. &lt;li&gt;Deze aangeklikt kan worden&lt;/li&gt;
  4921. &lt;li&gt;De gebruiker naar &lt;em&gt;/login&lt;/em&gt; wordt doorverwezen&lt;/li&gt;
  4922. &lt;/ol&gt;
  4923. &lt;pre&gt;&lt;code&gt;describe(&#39;Login page test&#39;, function() {
  4924.    it(&#39;Visits the loginpage&#39;, function() {
  4925.        cy.visit(&#39;https://localhost:8000&#39;)
  4926.        cy.get(&#39;#login-button&#39;).click();
  4927.        cy.url().should(&#39;include&#39;, &#39;/login&#39;);
  4928.    })
  4929. })
  4930. &lt;/code&gt;&lt;/pre&gt;
  4931. &lt;p&gt;Wanneer je eerder tests met Mocha hebt geschreven zal bovenstaande syntax je al voor een groot deel bekend voor komen. Cypress heeft Mocha’s &lt;em&gt;bdd syntax&lt;/em&gt; overgenomen waarmee je je tests kunt opbouwen. Je kunt dus zaken als &lt;code&gt;describe()&lt;/code&gt;, &lt;code&gt;context()&lt;/code&gt;, &lt;code&gt;it()&lt;/code&gt; en &lt;code&gt;beforeEach()&lt;/code&gt; gewoon blijven gebruiken.&lt;/p&gt;
  4932. &lt;p&gt;In het script gaan we er van uit dat de te testen pagina op localhost draait. De eerste stap navigeert naar deze omgeving. Vervolgens kun je met &lt;code&gt;cy.get()&lt;/code&gt; een element selecteren op basis van CSS-class. De &lt;code&gt;.click()&lt;/code&gt; functie simuleert een klik op het element. In de laatste regel van de test wordt er een voorwaarde gesteld dat de url in ieder geval &lt;em&gt;/login&lt;/em&gt; zou moeten bevatten.&lt;/p&gt;
  4933. &lt;p&gt;Nu de test geschreven is, kan deze gestart worden in de test runner. Nu is het een kwestie van achterover leunen en hopen dat alle test-opdrachten succesvol kunnen worden afgerond.&lt;/p&gt;
  4934. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/cypress-io/image005.png&quot; alt=&quot;De test runner in actie. Bron: cypress.io&quot; /&gt;&lt;/p&gt;
  4935. &lt;p&gt;De test wordt in een browser uitgevoerd en je kunt meteen iedere stap meekijken. Aan de linkerkant van je scherm worden meteen alle stappen / interacties op de pagina getoond. Via deze tijdlijn kun je terug gaan naar iedere stap in de test en de DOM op dat specifieke moment bekijken en… manipuleren via de Chrome dev tools. Dankzij deze tijdmachine kun je precies zien wanneer een bepaalde bug zich voordoet en deze meteen debuggen!&lt;/p&gt;
  4936. &lt;p&gt;Ik geef toe, het is een simpele test, maar het toont aan hoe makkelijk je kunt starten met het schrijven van tests. Je kunt met heel basale zaken beginnen en deze steeds verder uitbreiden.&lt;/p&gt;
  4937. &lt;h2&gt;Nog een test: het inlogformulier&lt;/h2&gt;
  4938. &lt;p&gt;Dat de login pagina bereikbaar is, is fijn, maar een succesvolle inlog geeft nog iets meer rust. Daarom is het tijd om het script nog iets uit te breiden (of je voegt een nieuw test-script toe):&lt;/p&gt;
  4939. &lt;pre&gt;&lt;code&gt;describe(&#39;Login&#39;, () =&amp;gt; {
  4940.    it(&#39;User login works&#39;, () =&amp;gt; {
  4941.        cy.visit(&#39;http://localhost:3000/account/login/&#39;);
  4942.        cy.get(&#39;[name=&amp;quot;email&amp;quot;]&#39;).type(&#39;pieter@test.com&#39;);
  4943.        cy.get(&#39;[name=&amp;quot;password&amp;quot;]&#39;).type(&#39;ditiseentest&#39;);
  4944.        cy.get(&#39;.container-login button&#39;).click();
  4945.        cy.url().should(&#39;include&#39;, &#39;/accountmanagement&#39;);
  4946.        expect(cy.contains(&#39;Hoi Pieter!&#39;)).toBeTruthy;
  4947.        cy.screenshot();
  4948.    });
  4949. });
  4950. &lt;/code&gt;&lt;/pre&gt;
  4951. &lt;p&gt;Het &lt;code&gt;.type()&lt;/code&gt; commando geeft de mogelijkheid om inputs te vullen met content en zorgt ervoor dat er getest kan worden of de gebruiker succesvol ingelogd kan worden.&lt;/p&gt;
  4952. &lt;h2&gt;Screenshots / videos&lt;/h2&gt;
  4953. &lt;p&gt;Wanneer tests falen maakt Cypress automatisch screenshots voor je. &lt;em&gt;&lt;em&gt;Deze screenshots van falende tests komen automatisch terecht in de map cypress/screenshots gevolgd door een map met de naam van de test.&lt;/em&gt;&lt;/em&gt; Wil je screenshots op bepaalde momenten in de test laten maken? Ook dat kan. De regel&lt;/p&gt;
  4954. &lt;pre&gt;&lt;code&gt;cy.screenshot();
  4955. &lt;/code&gt;&lt;/pre&gt;
  4956. &lt;p&gt;maakt een screenshot van de hele pagina op het moment dat jij dat wil. Wel even opletten: Cypress verwijdert alle screenshots voor het &lt;code&gt;cypress run&lt;/code&gt; commando.&lt;/p&gt;
  4957. &lt;h2&gt;Configuratie in Cypress.json&lt;/h2&gt;
  4958. &lt;p&gt;Behalve de &lt;em&gt;cypress&lt;/em&gt;-map, wordt er ook een &lt;em&gt;cypress.json&lt;/em&gt;-bestand aangemaakt in de root folder van je project. In dit bestand kunnen algemene configuraties van en voor je tests worden gezet. Hierbij kun je denken aan het instellen van een baseurl (deze wordt als prefix gebruikt voor alle &lt;code&gt;cy.visit()&lt;/code&gt; en &lt;code&gt;cy.request()&lt;/code&gt; commando’s), timeouts, mappen waar bijvoorbeeld screenshots geplaatst moeten worden en de viewport.&lt;/p&gt;
  4959. &lt;p&gt;Voorbeeldje: wanneer je je de &lt;code&gt;baseUrl&lt;/code&gt; aanpast in de &lt;em&gt;config&lt;/em&gt; naar:&lt;/p&gt;
  4960. &lt;pre&gt;&lt;code&gt;{
  4961.    &amp;quot;baseUrl&amp;quot;: &amp;quot;http://localhost:3000&amp;quot;
  4962. }
  4963. &lt;/code&gt;&lt;/pre&gt;
  4964. &lt;p&gt;zorgt dit er voor dat&lt;/p&gt;
  4965. &lt;pre&gt;&lt;code&gt;cy.visit(&amp;quot;/login&amp;quot;);
  4966. &lt;/code&gt;&lt;/pre&gt;
  4967. &lt;p&gt;eigenlijk navigeert naar &lt;em&gt;http://localhost:3000/login&lt;/em&gt;.&lt;/p&gt;
  4968. &lt;p&gt;De waardes in de configuratie kunnen tijdens het testen nog wel worden overschreven door een &lt;code&gt;--config flag&lt;/code&gt; toe te voegen in je CLI.&lt;/p&gt;
  4969. &lt;pre&gt;&lt;code&gt;cypress run --config viewportWidth=1280,viewportHeight=720
  4970. &lt;/code&gt;&lt;/pre&gt;
  4971. &lt;p&gt;Ook kunnen de waardes in je script zelf worden overschreven:&lt;/p&gt;
  4972. &lt;pre&gt;&lt;code&gt;Cypress.config(&#39;pageLoadTimeout&#39;, 100000)
  4973. &lt;/code&gt;&lt;/pre&gt;
  4974. &lt;p&gt;Is de uitkomst van je test niet helemaal zoals je die verwacht en vermoed je dat de configuratie de boosdoener is? In de &lt;em&gt;settings&lt;/em&gt;-tab wordt een ‘gecompileerde’ versie van de gebruikte config weergegeven.&lt;/p&gt;
  4975. &lt;h2&gt;Custom Commands&lt;/h2&gt;
  4976. &lt;p&gt;Wanneer je in verschillende tests telkens dezelfde acties uit moet voeren, dan kun je overwegen om een &lt;em&gt;custom command&lt;/em&gt; toe te voegen aan je tests. De Cypress API is ingericht op het toevoegen (of aanpassen) van Cypress commando’s. Wanneer je altijd wil testen met een ingelogde gebruiker, dan kun je hier een standaard commando maken.&lt;/p&gt;
  4977. &lt;p&gt;Zo’n custom commando kun je toevoegen aan &lt;em&gt;commands.js&lt;/em&gt;, welke je kunt vinden in de &lt;em&gt;/cypress/support&lt;/em&gt; map, en kan er als volgt uit zien:&lt;/p&gt;
  4978. &lt;pre&gt;&lt;code&gt;Cypress.Commands.add(&#39;login&#39;, () =&amp;gt; {
  4979.    const user = {
  4980.        email: &#39;admin@site.com&#39;,
  4981.        password: &#39;test123&#39; //natuurlijk alleen op local test ;)
  4982.    }
  4983.  
  4984.    cy.request({
  4985.        url: &#39;/login&#39;,
  4986.        method: &#39;POST&#39;,
  4987.        body: {
  4988.            email: user.email,
  4989.            password: user.password,
  4990.        }
  4991.    })
  4992. });
  4993. &lt;/code&gt;&lt;/pre&gt;
  4994. &lt;p&gt;Het custom command &lt;code&gt;cy.login()&lt;/code&gt; kun je nu in al je testscripts gebruiken. Bijvoorbeeld aan het begin van iedere test:&lt;/p&gt;
  4995. &lt;pre&gt;&lt;code&gt;describe(&#39;Cart page&#39;, () =&amp;gt; {
  4996.    before(() =&amp;gt; {
  4997.        cy.login()
  4998.    });
  4999.  
  5000.    it(&#39;Click cart button&#39;, () =&amp;gt; {
  5001.        cy.visit(&#39;http://localhost:3000/&#39;);
  5002.        cy.get(&#39;#cart-button&#39;).click();
  5003.        cy.url().should(&#39;include&#39;, &#39;/cart&#39;);
  5004.    });
  5005. });
  5006. &lt;/code&gt;&lt;/pre&gt;
  5007. &lt;h2&gt;XHR Calls&lt;/h2&gt;
  5008. &lt;p&gt;Met Cypress is ook het testen van XHR calls geen probleem. Het geeft je zelfs de keuze om de response ‘origineel’ te houden, of om deze te manipuleren. Door het intact laten van de response kan door een lange response tijd je tests vertragen. Daarom is het ‘mocken’ van een response, ook wel &lt;em&gt;stubbing&lt;/em&gt; genaamd, het overwegen waard. Dit zorgt voor een snelle afhandeling van XHR calls, meestal binnen 20ms! Het mocken van de response kan met een paar regeltjes code:&lt;/p&gt;
  5009. &lt;pre&gt;&lt;code&gt;cy.server()             // Response mocken (stubbing) aanzetten
  5010. cy.route({
  5011.    method: &#39;GET&#39;,      // Route alle GET requests
  5012.    url: &#39;/users/*&#39;,    // met url dat  &#39;/users/*&#39; matched
  5013.    response: []        // geeft volgende response
  5014. })
  5015. &lt;/code&gt;&lt;/pre&gt;
  5016. &lt;p&gt;Dit is de snelste optie, maar er is een mooiere oplossing voor het mocken van de data: het gebruik van &lt;em&gt;fixtures&lt;/em&gt;.&lt;/p&gt;
  5017. &lt;p&gt;Een &lt;em&gt;fixture&lt;/em&gt; is een verzameling van data in een bestand dat tijdens de test gebruikt kan worden. Deze &lt;em&gt;fixture&lt;/em&gt; bestanden kun je vinden in de &lt;em&gt;cypress/fixtures&lt;/em&gt; map en kunnen onder andere gebruikt worden voor het mocken van XHR-responses.&lt;/p&gt;
  5018. &lt;p&gt;Wanneer je de response van een zoekopdracht wil mocken, dan kun je een JSON bestand met zoekresultaten in de fixtures map plaatsen, uiteraard in hetzelfde format als dat je in ‘real life’ zou verwachten. Deze data kun je includen op de volgende manier:&lt;/p&gt;
  5019. &lt;pre&gt;&lt;code&gt;cy.server();
  5020. cy.route(&#39;GET&#39;, &#39;/search/*&#39;, &#39;fixture:searchresult.json&#39;);
  5021. &lt;/code&gt;&lt;/pre&gt;
  5022. &lt;p&gt;&lt;em&gt;Fixtures&lt;/em&gt; kunnen ook als alias worden ingeladen. Voordeel hiervan is dat je de data nog bijvoorbeeld zou kunnen manipuleren voordat je het als response teruggeeft:&lt;/p&gt;
  5023. &lt;pre&gt;&lt;code&gt;cy.server();
  5024. cy.fixture(&#39;searchresult.json&#39;).as(&#39;searchJSON&#39;)
  5025. cy.route(&#39;GET&#39;, &#39;/search/*&#39;, &#39;@searchJSON&#39;);
  5026. &lt;/code&gt;&lt;/pre&gt;
  5027. &lt;p&gt;Niet alleen van &lt;em&gt;fixtures&lt;/em&gt;, maar ook van de &lt;code&gt;cy.route()&lt;/code&gt; kan een alias gemaakt worden waardoor er verder in je code naar verwezen kan worden. Bijvoorbeeld om aan te geven dat er gewacht moet worden:&lt;/p&gt;
  5028. &lt;pre&gt;&lt;code&gt;cy.route(&#39;GET&#39;, &#39;/search/*&#39;).as(&#39;search&#39;);
  5029. cy.wait(&#39;@search&#39;); //Wacht op response van de zoek call
  5030. cy.get(&#39;h2&#39;).should(&#39;contain&#39;, &#39;Gevonden resultaten&#39;); //Ga verder
  5031. &lt;/code&gt;&lt;/pre&gt;
  5032. &lt;h2&gt;Redt Cypress mijn gourmet?&lt;/h2&gt;
  5033. &lt;p&gt;Een doorgewinterde expert in Cypress ben ik nog niet, maar na een tijdje werken ben ik nog steeds enthousiast over dit (gratis) product.&lt;/p&gt;
  5034. &lt;p&gt;Behalve de al beschreven mogelijkheden biedt Cypress nog heel veel meer. Zo kan Cypress worden toegevoegd aan je Continuous Integration proces. In &lt;a href=&quot;https://docs.cypress.io/guides/guides/continuous-integration.html#Examples&quot;&gt;de documentatie van Cypress over continuous integration&lt;/a&gt; kun je tal van voorbeelden vinden voor providers als Bitbucket, Docker, GitLab en Jenkins. Het &lt;a href=&quot;https://dashboard.cypress.io/&quot;&gt;Cypress Dashboard&lt;/a&gt; geeft overzicht van alle uitgevoerde tests.&lt;/p&gt;
  5035. &lt;p&gt;Ook zijn er verschillende plugins beschikbaar om bijvoorbeeld screenshots te vergelijken en is er ook aan &lt;em&gt;code coverage&lt;/em&gt; gedacht. Kortom: er is nog genoeg te ontdekken over het testen met deze tool.&lt;/p&gt;
  5036. &lt;p&gt;Natuurlijk is het niet alleen maar rozengeur en maneschijn. Zo kunnen tests alleen in Javascript geschreven worden. Voor Front-end developers natuurlijk geen probleem, maar voor andere developers misschien wel een reden om voor een ander framework te kiezen. Wat mij betreft het grootste minpunt van Cypress is dat er (op dit moment) alleen getest kan worden in Chrome of Electron. Cross-browser testen voor bijvoorbeeld Edge en Firefox is er dus helaas nog niet bij.&lt;/p&gt;
  5037. &lt;p&gt;Maar ondanks dat kan Cypress bij veel projecten een groot deel van de kopzorgen die je als developer kan hebben wegnemen. Het zorgt er in ieder geval voor dat ik komende kerstdagen met een gerust hart nog een stukje kip en champignon in mijn pannetje gooi…&lt;/p&gt;
  5038. &lt;h3&gt;Pieter Beekman&lt;/h3&gt;
  5039. &lt;img src=&quot;https://www.fronteers.nl/_img//adventskalender/pieter(1).jpg&quot; alt=&quot;Foto van Pieter&quot; class=&quot;floating-portrait&quot; /&gt;
  5040. &lt;p&gt;Pieter is frontend developer bij Dekbed Discounter en werkt hier aan diverse platforms. Met de andere frontenders probeert hij iedere dag (nog) betere conversies te behalen door het toepassen van betere, snellere en mooiere code. Als zijn VS Code even uitstaat speelt hij het liefste boardgames.
  5041. Pieters donatie gaat naar KiKa.&lt;/p&gt;
  5042. </content>
  5043.  </entry>
  5044.  <entry>
  5045.    <title>Hoe pak je de opbouw van een website aan?</title>
  5046.    <link href="https://www.fronteers.nl/nl/blog/2019/12/hoe-pak-je-de-opbouw-van-een-website-aan"/>
  5047.    <updated>2019-12-18T00:00:00Z</updated>
  5048.    <id>https://www.fronteers.nl/nl/blog/2019/12/hoe-pak-je-de-opbouw-van-een-website-aan</id>
  5049.    <content xml:lang="nl" type="html">&lt;p&gt;Het opbouwen van een website gaat meestal niet over één nacht ijs en vergt kennis en inzicht. Toch zijn er heel wat zaken die je ook zelf kan uitwerken.&lt;/p&gt;
  5050. &lt;h2&gt;Stap 1: Bepaal jouw doelgroep&lt;/h2&gt;
  5051. &lt;p&gt;Wanneer je je doelgroep helder hebt, kun je ook beter het doel van je website bepalen. Wanneer ouderen jouw doelgroep zijn, zullen zij niet snel online een afspraak inplannen, maar eerder telefonisch contact met je willen opnemen.&lt;/p&gt;
  5052. &lt;h2&gt;Stap 2: Bepaal het doel van je website&lt;/h2&gt;
  5053. &lt;p&gt;Wat wil je dat je bezoekers gaan doen? Wil je dat ze jouw blogposts gaan delen, wil je dat ze rechtstreeks een afspraak inplannen of wil je dat ze jou gaan bellen? Het kan natuurlijk ook zijn dat jouw website puur informatief wordt. Een schot voor open doel; Houd hierbij rekening met je doelgroep.&lt;/p&gt;
  5054. &lt;h2&gt;Stap 3: Basiskennis&lt;/h2&gt;
  5055. &lt;p&gt;Een pagina van een website is grofweg onderverdeeld in 3 onderdelen.&lt;/p&gt;
  5056. &lt;ul&gt;
  5057. &lt;li&gt;De header is het bovenste deel van je website. Het is gelijk ook één van de belangrijkste onderdelen. Als je header niet goed of onlogisch is ingedeeld, dan zullen bezoekers afhaken en je pagina weer verlaten. Dat is natuurlijk niet wat je wilt! Zorg voor een goede indeling van je header. Begin met je logo en een duidelijk navigatiemenu. Je kan eventueel nog wisselen met je logo bijvoorbeeld links of rechts van het menu. Of juist boven het menu. Je header is in de basis op iedere pagina gelijk.&lt;/li&gt;
  5058. &lt;li&gt;Content is het middelste gedeelte van je pagina. Hierin komt jouw verhaal, jouw oplossing voor het probleem van je klanten en jouw informatie. Dit gedeelte is op iedere pagina anders.Je content kan bestaan uit foto’s, teksten, tabellen, video’s etc. Maar maak er geen circus van.&lt;/li&gt;
  5059. &lt;li&gt;De footer. Dit is het onderste deel van je website. Hierin staat je KvK nummer, privacyverklaring en copyright. Dit is voornamelijk bij een kleine footer. Bij een grote footer vind je vaak menu-items, inschrijving nieuwsbrief, Google Maps, social media pictogrammen, etc. Je footer is, net zoals je header, op iedere pagina gelijk. In de footer is onwijs veel mogelijk, maar bedenk wel dat de footer vaak het laatste is wat de bezoeker van je website ziet.&lt;/li&gt;
  5060. &lt;/ul&gt;
  5061. &lt;p&gt;Daarnaast is de Call To Action een belangrijk onderdeel. Een Call To Action (afgekort CTA) is een button waarmee je de bezoekers triggert om datgene te doen, wat het doel van jouw website is. Bijvoorbeeld: “Wil je in 10 weken 20 kilo afvallen?” Button: Download brochure. Of “Wil jij meer grip op je financiën?” Button: Ja, dat wil ik! Met bijvoorbeeld een link naar je online agenda of contactformulier.&lt;/p&gt;
  5062. &lt;h2&gt;Stap 4: Brainstormen&lt;/h2&gt;
  5063. &lt;p&gt;De brainstorm is bedoeld om zoveel mogelijk toffe ideeën op papier te krijgen over de inhoud van je website, je diensten en producten. Maar ook over het ontwerp en misschien zelfs wel over je marketing. Alles mag en niets is te gek.
  5064. Spui met een paar mensen zoveel mogelijk ideeën en zet ieder idee apart op een memo. Neem hier rustig de tijd voor en ga liever aan de keukentafel zitten dan relaxt op de bank.&lt;/p&gt;
  5065. &lt;h2&gt;Stap 5: Categoriseren&lt;/h2&gt;
  5066. &lt;p&gt;Na de brainstorm ga je alle ideeën categoriseren. Je gaat ze bundelen op A4’tjes. Je maakt een A4 voor de footer, de header en de content van de pagina’s. Wanneer je een aantal memo’s hebt waar bijvoorbeeld e-mail adres, contactformulier en adres op staat, kun je deze op een A4 plakken en deze Contact noemen. Dit wordt dan de content van de Contact-pagina. Inschrijving nieuwsbrief of een Instagramfeed wil je misschien wel in de footer. Ideeën over kleuren, lettertypes, beeldmateriaal, etc. kun je weer bij Design kwijt. Zo kun je structuur aanbrengen aan al je toffe ideeën.&lt;/p&gt;
  5067. &lt;h2&gt;Stap 6: Menustructuur maken&lt;/h2&gt;
  5068. &lt;p&gt;Nu je alles gecategoriseerd hebt, heb je in de basis ook de pagina’s die op je website komen. Het is belangrijk dat je pagina’s op een logische manier in het menu komen. Dit kun je het beste doen door het uit te tekenen in een Flowchart.
  5069. Je diensten kun je bijvoorbeeld op een pagina zetten, maar je kunt er ook voor kiezen om onder het kopje Diensten een submenu te maken. Diensten - Webdesign, Logo ontwerp, Huisstijl&lt;/p&gt;
  5070. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/marieke-webdesign-flowchart.png&quot; alt=&quot;Voorbeeld van een flowchart&quot; /&gt;&lt;/p&gt;
  5071. &lt;p class=&quot;note&quot;&gt;
  5072. Voorbeeld flowchart
  5073. &lt;/p&gt;
  5074. &lt;h2&gt;Stap 7: Bepaal de inhoud van je homepage&lt;/h2&gt;
  5075. &lt;p&gt;Je homepage is de etalage van je website. Deze pagina is vaak anders van opbouw dan je overige pagina’s. Je bezoekers willen op je homepage kunnen zien:&lt;/p&gt;
  5076. &lt;ul&gt;
  5077. &lt;li&gt;Wie je bent&lt;/li&gt;
  5078. &lt;li&gt;Wat je doet&lt;/li&gt;
  5079. &lt;li&gt;Wat je voor je bezoeker kan betekenen.&lt;/li&gt;
  5080. &lt;/ul&gt;
  5081. &lt;p&gt;De basis voor de opbouw van je website heb je nu staan. De volgende stap is het uitdenken van je huisstijl. Lettertypes, vormgeving en kleuren. Hier kan een grafisch vormgever je goed in adviseren.&lt;/p&gt;
  5082. &lt;p&gt;Over Marieke
  5083. /adventskalender/marieke-webdesign.png
  5084. Marieke Kuit, dat ben ik. Aangenaam! Geboren en getogen in het pittoreske Noord-Hollandse Sint Maartensbrug. Waar ik heb geleerd normaal te doen, want dan doe ik al gek genoeg. Nuchter te zijn, hard te werken, maar vooral mezelf te zijn. Zonder opsmuk, gewoon puur.
  5085. Mariekes donatie gaat naar KiKa.)&lt;/p&gt;
  5086. </content>
  5087.  </entry>
  5088.  <entry>
  5089.    <title>Maak deze kerst een vriend blij met lekker makkelijke collapsibles</title>
  5090.    <link href="https://www.fronteers.nl/nl/blog/2019/12/maak-deze-kerst-een-vriend-blij-met-lekker-makkelijke-collapsibles"/>
  5091.    <updated>2019-12-17T00:00:00Z</updated>
  5092.    <id>https://www.fronteers.nl/nl/blog/2019/12/maak-deze-kerst-een-vriend-blij-met-lekker-makkelijke-collapsibles</id>
  5093.    <content xml:lang="nl" type="html">&lt;p&gt;Ik heb een paar vreemde gewoonten. Een ervan is dat ik op iedere website met een accordeon of een FAQ mijn code inspector even opengooi. Gewoon om te checken of de developers &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt; gebruikt hebben voor het open- en dichtklapgebeuren. Je zou namelijk wel gek zijn om deze handige HTML-elementen niét te gebruiken in 2019. Helaas moet ik in de meeste gevallen mijn code inspector hoofdschuddend weer sluiten.&lt;/p&gt;
  5094. &lt;p&gt;Als jouw reactie nu &lt;em&gt;duh!&lt;/em&gt; is, dan hoef je natuurlijk niet verder te lezen. Dan stuur je dit artikel gewoon naar een onfortuinlijke developer die collapsibles nog met de hand in elkaar puzzelt. Like an animal. Zo heb jij je goede decemberdaad gesteld, en hebben we samen het web weer een stukje makkelijker en toegankelijker gemaakt.&lt;/p&gt;
  5095. &lt;h2&gt;Het open- en dichtklapgebeuren?&lt;/h2&gt;
  5096. &lt;p&gt;Een collapsible is een dingetje dat je kunt open- en dichtklappen om informatie te tonen of te verbergen. Je vindt ze overal op het web: in FAQ’s, in formulieren en in de filternavigatie op webshops.&lt;/p&gt;
  5097. &lt;p&gt;Moeilijk is het niet om ze te bouwen: je hebt een &lt;code&gt;onclick&lt;/code&gt; event nodig, een snuifje CSS en enkele regels JavaScript om te &lt;em&gt;togglen&lt;/em&gt;.&lt;/p&gt;
  5098. &lt;p&gt;Maar er is meer: een &lt;em&gt;toegankelijke&lt;/em&gt; collapsible moet je ook kunnen bereiken en bedienen met het toetsenbord. Bovendien moet een screenreader de &lt;em&gt;status&lt;/em&gt; van de collapsible (open of dicht) kunnen oppikken. Daarvoor moet je met &lt;code&gt;aria-expanded&lt;/code&gt; in de weer. Voor je het weet, voel je de verleiding om er een jQuery plugin tegenaan te gooien. Niet nodig.&lt;/p&gt;
  5099. &lt;h2&gt;Lekker makkelijk&lt;/h2&gt;
  5100. &lt;p&gt;Nieuw zijn ze niet, maar het heeft een tijd geduurd voor de ondersteuning in alle browsers goed werd. Daarom lijken sommige developers ze vergeten te zijn. Maak dus (opnieuw) kennis met &lt;code&gt;&amp;lt;details&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;summary&amp;gt;&lt;/code&gt;:&lt;/p&gt;
  5101. &lt;pre&gt;&lt;code&gt;&amp;lt;details&amp;gt;
  5102.  &amp;lt;summary&amp;gt;Wat is groen en heeft een gewei?&amp;lt;/summary&amp;gt;
  5103.  &amp;lt;p&amp;gt;Een dophertje.&amp;lt;/p&amp;gt;
  5104. &amp;lt;/details&amp;gt;
  5105. &lt;/code&gt;&lt;/pre&gt;
  5106. &lt;p&gt;Als je op &lt;code&gt;summary&lt;/code&gt; klikt, kan je de vraag open- en dichtklappen. Geen JavaScript of CSS nodig en toegankelijk ‘out of the box’. Het werkt perfect in &lt;a href=&quot;https://caniuse.com/#search=details&quot;&gt;bijna alle browsers&lt;/a&gt; en tot wanneer de Chromium-gebaseerde verse van Edge uit beta is, kan je nog steeds &lt;a href=&quot;https://github.com/mathiasbynens/jquery-details&quot;&gt;Mathias Bynens’ (allereerste) &lt;code&gt;detail&lt;/code&gt; polyfill&lt;/a&gt; uit 2012 gebruiken.&lt;/p&gt;
  5107. &lt;h2&gt;Wacht! Kan ik zo’n collapsible ook opsmukken?&lt;/h2&gt;
  5108. &lt;p&gt;Zeker. Je kan zowel de &lt;code&gt;summary&lt;/code&gt; als de &lt;code&gt;details&lt;/code&gt; prima stijlen en binnen de &lt;code&gt;summary&lt;/code&gt; kan je je eigen markup gebruiken.&lt;/p&gt;
  5109. &lt;p&gt;Als je geen fan bent van de standaard focus ring, kan je die vervangen door iets aantrekkelijkers. Zorg er wel voor dat je de focus ring niet weghaalt, want dat is heel vervelend voor gebruikers die de muis niet kunnen gebruiken.&lt;/p&gt;
  5110. &lt;p&gt;Ik snap ook dat je heel graag het pijltje zélf wilt stijlen, want in de meeste browsers is dat standaard een zwart driehoekje. Ook dat is makkelijk:&lt;/p&gt;
  5111. &lt;pre&gt;&lt;code&gt;summary {
  5112.  list-style-image: url(pijltje.svg);
  5113. }
  5114. &lt;/code&gt;&lt;/pre&gt;
  5115. &lt;p&gt;Voor browsers die op Webkit zijn gebaseerd (zoals Safari), moet je wel even deze extra selector toevoegen:&lt;/p&gt;
  5116. &lt;pre&gt;&lt;code&gt;summary::-webkit-details-marker {
  5117.  background: url(pijltje.svg);
  5118.  color: transparent;
  5119. }
  5120. &lt;/code&gt;&lt;/pre&gt;
  5121. &lt;p&gt;Wat helaas niet zo makkelijk kan, is het veranderen van de aanwijsrichting van je eigen pijltje. Als je dat echt wilt, moet je alsnog met JavaScript aan de slag, maar laat dat de pret niet bederven.&lt;/p&gt;
  5122. &lt;p&gt;Lees meer &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary&quot;&gt;over &lt;code&gt;details&lt;/code&gt; en &lt;code&gt;summary&lt;/code&gt; op MDN&lt;/a&gt;.&lt;/p&gt;
  5123. &lt;h2&gt;Over Roel van Gils&lt;/h2&gt;
  5124. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/roel.jpg&quot; alt=&quot;Foto van Roel van Gils&quot; class=&quot;floating-portrait&quot; /&gt;
  5125. Roel noemt zichzelf een Digital Accessibility Nerd. Met zijn bedrijf Eleven Ways (gevestigd in Gent) helpt hij overheden en bedrijven die hun websites en apps voor zoveel mogelijk mensen toegankelijk willen maken. Roel steekt ook wel eens een handje toe bij het organiseren van Fronteers-bijeenkomsten in Vlaanderen. Hij twittert als [@roelvangils](https://twitter.com/roelvangils).
  5126. Roels donatie gaat naar de Hersenstichting.
  5127. </content>
  5128.  </entry>
  5129.  <entry>
  5130.    <title>Waarom een hobbyproject (niet) belangrijk is</title>
  5131.    <link href="https://www.fronteers.nl/nl/blog/2019/12/waarom-een-hobbyproject-niet-belangrijk-is"/>
  5132.    <updated>2019-12-16T00:00:00Z</updated>
  5133.    <id>https://www.fronteers.nl/nl/blog/2019/12/waarom-een-hobbyproject-niet-belangrijk-is</id>
  5134.    <content xml:lang="nl" type="html">&lt;p&gt;Veel developers kennen het wel: een hobbyproject om nieuwe dingen te leren, je mee uit te leven en andere dingen te kunnen programmeren dan in het dagelijkse werk vaak mogelijk is. Zeker met alle snelle veranderingen in de front-endwereld, is het een goede manier om &#39;bij te blijven&#39;. Maar is het echt zo belangrijk om als front-end developer een hobbyproject te hebben?&lt;/p&gt;
  5135. &lt;h2&gt;Waarom een hobbyproject belangrijk is&lt;/h2&gt;
  5136. &lt;h2&gt;Om nieuwe ontwikkelingen te proberen&lt;/h2&gt;
  5137. &lt;p&gt;Voor veel front-enders is ondersteunen van IE11 nog de dagelijkse praktijk. De realiteit is daarbij dat je niet zomaar nieuwe technieken kunt gebruiken zoals CSS Grid of ES6 - tenzij je &lt;em&gt;progressive enhancement&lt;/em&gt; toepast of gebruik maakt van &lt;em&gt;postprocessors&lt;/em&gt; en &lt;em&gt;transpilers&lt;/em&gt;. Maar ook dan is het door legacy code of voor onderhoudbaarheid niet altijd realistisch om meteen de nieuwste ontwikkelingen in je werk toe te passen.&lt;/p&gt;
  5138. &lt;p&gt;Een persoonlijk project, bijvoorbeeld een eigen website, is dan de ultieme &lt;em&gt;playground&lt;/em&gt; om wel met nieuwe technieken aan de slag te gaan. Soms zien dat soort projecten nooit het daglicht, maar geven ze je wel de kans om iets uit te proberen en te besluiten of je dit in je werk wilt gaan gebruiken. Laten zien dat je iets al hebt uitgeprobeerd kan ook net dat zetje zijn dat je collega&#39;s nodig hebben om te besluiten het ook in werkprojecten te gebruiken.&lt;/p&gt;
  5139. &lt;h2&gt;Je eigen klant zijn&lt;/h2&gt;
  5140. &lt;p&gt;Voor je persoonlijke projecten ben je product owner en developer tegelijk. Jij bepaalt welke browsers je ondersteunt, welke tech stack je gebruikt en hoe het eruit gaat zien. Maar misschien ken je het spreekwoord wel: &lt;em&gt;doctors are the worst patients.&lt;/em&gt; Ik denk dat we ook gerust kunnen zeggen: developers zijn de ergste product owners. Je hebt je nieuwe design nog niet live staan of je hebt alweer nieuwe ideeën over hoe de website eruit moet zien. En wat bezielde je een paar maanden geleden toen je voor die tech stack koos? Nu zou je het helemaal anders doen... Bij een hobbyproject zelf de eindverantwoordelijke en uitvoerder zijn, kan ervoor zorgen dat je opeens een stuk meer respect of begrip krijgt voor de klanten of product owners waar je in je werk dagelijks mee te maken krijgt.&lt;/p&gt;
  5141. &lt;h2&gt;Geen restricties&lt;/h2&gt;
  5142. &lt;p&gt;Er is niemand — nou ja, misschien je partner — die zegt hoeveel tijd je mag besteden aan het ontwikkelen van een nieuwe feature. Dat geeft je ook de mogelijkheid om helemaal uit te zoeken waarom iets niet werkt en waarom een bepaalde bug optreedt, waar in je werk wellicht besloten wordt om het dan maar anders te doen. Door het wel uit te zoeken, kan je veel leren.&lt;/p&gt;
  5143. &lt;p&gt;Maar het tegenovergestelde is ook waar. In plaats van tot in de puntjes uit te zoeken waarom iets niet werkt, kun je ook besluiten dat goed genoeg, goed genoeg is. Vooral in situaties waarbij je je code voor een groot deel zou moeten refactoren om een kleine bug op te lossen, kun je voor je eigen projecten er ook voor kiezen dat die bug niet zo erg is. Een heerlijk bevrijdend gevoel soms.&lt;/p&gt;
  5144. &lt;h2&gt;Nieuwe dingen leren&lt;/h2&gt;
  5145. &lt;p&gt;Veel front-end developers hebben via hun werk wel ruimte om te leren, bijvoorbeeld om als UI developer meer over JavaScript te leren of juist als JavaScript developer meer over CSS. Maar als je graag een nieuwe taal wil leren en daar in je werk geen ruimte voor is, dan zijn hobbyprojecten bij uitstek geschikt. Het geeft je ook de mogelijkheid om niet-werkgerelateerde programmeertalen te leren. Misschien wil je wel leren om een Arduino of Raspberry Pi te programmeren of vind je het leuk om jezelf en je creativiteit op de proef te stellen met het ontwikkelen van een game.&lt;/p&gt;
  5146. &lt;h2&gt;Waarom een hobbyproject niet belangrijk is&lt;/h2&gt;
  5147. &lt;h2&gt;Nieuwe ontwikkelingen horen bij je werk&lt;/h2&gt;
  5148. &lt;p&gt;Zoals gezegd gaan ontwikkelingen in het vakgebied van de front-ender soms razendsnel. Het is dan ook een onderdeel van ons werk om hierin mee te gaan. Niet veel van van ons zullen nog een &lt;code&gt;&amp;lt;table&amp;gt;&lt;/code&gt; element gebruiken voor een layout. Als je bijvoorbeeld graag CSS Grid wil leren of op de hoogte wilt blijven van nieuwe JavaScript features, zou je dit niet in je vrije tijd hoeven doen. Het is goed als werkgevers deze ruimte voor persoonlijke en werkgerelateerde ontwikkeling bieden.&lt;/p&gt;
  5149. &lt;h2&gt;Risico op een burnout&lt;/h2&gt;
  5150. &lt;p&gt;Het kan zijn dat je hobby je werk is en dat is natuurlijk geweldig. Maar hoe leuk je je werk vindt, het is belangrijk om genoeg rust te hebben. Door in je vrije tijd ook met programmeren en nieuwe dingen bezig te zijn, kun je snel opbranden. Veel front-end developers voelen de druk om op de hoogte te blijven van alle nieuwe ontwikkelingen en werken om die reden aan hobbyprojecten. Vraag je bij projecten in je vrije tijd af of je eraan werkt omdat je het leuk vindt of omdat je het gevoel hebt dat het moet.&lt;/p&gt;
  5151. &lt;h2&gt;Balans is belangrijk&lt;/h2&gt;
  5152. &lt;p&gt;Of je nu wel of niet aan persoonlijke projecten werkt, is een keus die je voor jezelf moet maken. Laat je daarbij niet opjagen door bijvoorbeeld je werkgever of collega&#39;s. Developer zijn betekent niet dat je in je vrije tijd moet programmeren. Je werkgever zou je tijd moeten bieden om nieuwe dingen te leren, zodat jij je vrije tijd kunt gebruiken voor de dingen die je het liefste doet.&lt;/p&gt;
  5153. &lt;h2&gt;Over Josee Wouters&lt;/h2&gt;
  5154. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/josee-500x500.png&quot; alt=&quot;Foto van Josee&quot; class=&quot;floating-portrait&quot; /&gt;
  5155. Josee werkt als developer bij Yoast en hoewel ze daar meer als een full-stack developer werkt, ligt haar hart (ook) bij front-end. Ze is actief als vrijwilliger bij Fronteers en werkt in haar vrije tijd af en toe aan haar app &quot;What Dinner?&quot;.
  5156. Josee&#39;s donatie gaat naar Stem op een vrouw.
  5157. </content>
  5158.  </entry>
  5159.  <entry>
  5160.    <title>Het belang van een style guide</title>
  5161.    <link href="https://www.fronteers.nl/nl/blog/2019/12/het-belang-van-een-style-guide"/>
  5162.    <updated>2019-12-13T00:00:00Z</updated>
  5163.    <id>https://www.fronteers.nl/nl/blog/2019/12/het-belang-van-een-style-guide</id>
  5164.    <content xml:lang="nl" type="html">&lt;p&gt;In de meeste organisaties waar ik heb gewerkt, is er wel een UX-designer aanwezig. Deze levert de designs aan waarin je duidelijk kunt zien hoe een UI is opgebouwd en vind je uitleg over hoe bepaalde elementen zich tot elkaar verhouden. Ook vind je vaak styleregels. Bijvoorbeeld welke fonts er gebruikt worden, welke fontgroottes moeten er worden toegepast en bij hoeveel woorden wordt een tekst afgekapt en toont er een &#39;read more&#39; tekst. Allemaal zaken waar we als front-end developer vaak niet meer over hoeven na te denken. Toch zijn er een aantal zaken die van belang zijn als je een consistente UI wilt bouwen.&lt;/p&gt;
  5165. &lt;h2&gt;Building blocks&lt;/h2&gt;
  5166. &lt;p&gt;De User Experience designer heeft de verschillende kleurenpaletten geaccordeerd gekregen, de typografie uitgewerkt, en het iconenset aangeleverd. Nu is het nog van belang dat deze elementen consistent worden toegepast in de HTML en CSS. Om dit zo goed mogelijk voor elkaar te krijgen zijn style guides in het leven geroepen. Deze kunnen onderdeel uitmaken van een groter geheel, zoals een design system.&lt;/p&gt;
  5167. &lt;h2&gt;CSS en HTML style guide&lt;/h2&gt;
  5168. &lt;p&gt;Veel developers ontwikkelen een eigen stijl van het schrijven van hun code. Dit is in de basis helemaal niet erg. Zeker niet als het gaat om een project wat je in je eentje draait. Tot het moment daar is dat je werk van een collega moet overnemen. Bootstrap classes overheersen de HTML. Classnames als &lt;code&gt;row&lt;/code&gt;, &lt;code&gt;col-sm-6&lt;/code&gt; en &lt;code&gt;container-fluid&lt;/code&gt;. Irritaties doemen op. Dat terwijl er bij de vorige vergadering nog geroepen is dat we geen Bootstrap grids meer toepassen sinds we Flexbox en CSS Grid breed geaccepteerd hebben in onze layouts.&lt;/p&gt;
  5169. &lt;p&gt;Dit is een typische situatie waar een HTML/CSS style guide goed van pas kan komen. Een eerste stap om deze situatie in de toekomst te voorkomen zou zijn om een aantal regels vast te stellen. Regels omtrent het schrijven van je HTML en CSS. Dit hoef je vaak niet zelf te verzinnen, gezien er vele bedrijven zijn die al een style guide openbaar beschikbaar hebben. Deze zou je als een soort boilerplate kunnen gebruiken om je eigen regels vast te stellen. Een veelgebruikte &lt;a href=&quot;https://github.com/airbnb/css/&quot;&gt;CSS style guide&lt;/a&gt; in ons vakgebied is die van AirBnB. Daarin wordt bijvoorbeeld vastgelegd dat een combinatie van OOCSS en BEM een geoorloofde methodiek is voor het schrijven van je CSS. Ook lezen we dat het gebruik van ID’s in je html een anti pattern is, gezien je hiermee te veel specificiteit in je HTML aanbrengt. Niet herbruikbaar dus. Zomaar een aantal regels uit deze style guide. Deze regels maken je codebase consistenter en dwingen jou en je collega&#39;s tot het schrijven van kwalitatievere code.&lt;/p&gt;
  5170. &lt;h2&gt;Pattern libraries&lt;/h2&gt;
  5171. &lt;p&gt;Een pattern library is een verzameling van alle designelementen voor een User Interface. Veel van deze patronen komen meerdere keren terug in een website. Een UI toolkit als &lt;a href=&quot;https://fbrctr.github.io/demo/&quot;&gt;Fabricator&lt;/a&gt; of &lt;a href=&quot;https://patternlab.io/demos.html&quot;&gt;Pattern Lab&lt;/a&gt; kunnen je helpen om documentatie over de geschreven code en patronen vast te leggen. Handig dus voor een nieuwe collega!&lt;/p&gt;
  5172. &lt;p&gt;Andere goede eigenschappen van een pattern library?&lt;/p&gt;
  5173. &lt;ul&gt;
  5174. &lt;li&gt;Het zal consistentie en cohesie aanbrengen in je codebase en uitstraling&lt;/li&gt;
  5175. &lt;li&gt;Het versnelt je hele teams workflow, dus je bespaart tijd en geld&lt;/li&gt;
  5176. &lt;li&gt;Meer samenwerking tussen alle disciplines binnen een projectteam&lt;/li&gt;
  5177. &lt;li&gt;Creëer op deze manier een gedeelde taal die over meerdere disciplines gebruikt wordt&lt;/li&gt;
  5178. &lt;li&gt;Het opbreken van een interface in herbruikbare componenten&lt;/li&gt;
  5179. &lt;li&gt;Een goede style guide informeert het team over welke tools zij op het moment in hun gereedschapskist hebben zitten&lt;/li&gt;
  5180. &lt;li&gt;Waarborgt documentatie om nieuwe collega’s of andere partijen snel up to speed te krijgen&lt;/li&gt;
  5181. &lt;li&gt;Genereert regels omtrent het gebruik&lt;/li&gt;
  5182. &lt;li&gt;Efficiënter onderhoud aan je codebase&lt;/li&gt;
  5183. &lt;li&gt;Het maakt cross-browser/device, performance, en accessibility testen makkelijker&lt;/li&gt;
  5184. &lt;/ul&gt;
  5185. &lt;h2&gt;Design System&lt;/h2&gt;
  5186. &lt;p&gt;Een pattern library en een CSS/HTML style guide maken onderdeel uit van het design system. Een design system is een compleet pakket met design en codestandaarden. Om deze standaarden waar te maken maak je gebruik van uitgebreide, aanwezige documentatie en codevoorbeelden. Een design system leidt in development teams daardoor vrijwel altijd tot een samenhangende, consistente gebruikerservaring voor de eindgebruiker van je website.&lt;/p&gt;
  5187. &lt;p&gt;Bij mijn huidige opdrachtgever zijn we onlangs gestart met &lt;a href=&quot;https://bradfrost.com/blog/post/atomic-web-design/&quot;&gt;Atomic Design&lt;/a&gt;. We gebruiken Pattern Lab als toolkit en we hebben strengere regels ingesteld als het gaat om schrijven van code. Door onze codestandaard strenger van elkaar te reviewen en te accorderen, denken we een goede basis te hebben gelegd voor een toekomstbestendige, consistente basis in onze codebase.&lt;/p&gt;
  5188. &lt;p&gt;Maak jij in je huidige werk gebruik van een style guide en/of een pattern libary of zou dit juist goed zijn in de toekomst te gaan doen? Deel je ervaring!&lt;/p&gt;
  5189. &lt;h2&gt;Over Sander&lt;/h2&gt;
  5190. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/sanderlangendoen.jpg&quot; alt=&quot;Foto van Kilian&quot; class=&quot;floating-portrait&quot; /&gt;
  5191. Ik ben Sander Langendoen. Freelance front-end developer. Momenteel werkzaam voor WPG Media en Uitgevers. Ik ben blij elke dag betaald mijn hobby te mogen uitvoeren.
  5192. Sanders donatie gaat naar de Hersenstichting
  5193. </content>
  5194.  </entry>
  5195.  <entry>
  5196.    <title>Fronteers vote for the W3C Technical Architecture Group</title>
  5197.    <link href="https://www.fronteers.nl/nl/blog/2019/12/fronteers-vote-for-w3c-tag"/>
  5198.    <updated>2019-12-13T00:00:00Z</updated>
  5199.    <id>https://www.fronteers.nl/nl/blog/2019/12/fronteers-vote-for-w3c-tag</id>
  5200.    <content xml:lang="nl" type="html">&lt;p&gt;In January, W3C members are voting for four seats on the Technical Architecture Group. Since Fronteers is a W3C member, we also have a vote, which our representative Rachel Andrew will cast on behalf of us.&lt;/p&gt;
  5201. &lt;p&gt;Just like half a year ago, we call all Fronteers members to share their list of top candidates. This time for the W3C Technical Architecture Group (TAG). The result of the internal Fronteers vote will be transmitted to Rachel.&lt;/p&gt;
  5202. &lt;p&gt;This vote is only open to Fronteers members; if you&#39;re not a member you cannot vote.&lt;/p&gt;
  5203. &lt;p&gt;The Fronteers Slack contains a #w3c-fronteers channel that is open only to members, and where questions can be asked and discussions can be held. Please ask for access in the general Fronteers channel or by a DM to a board member.
  5204. In this channel Rachel has also given her personal recommendation.&lt;/p&gt;
  5205. &lt;h2&gt;The Technical Architecture Group&lt;/h2&gt;
  5206. &lt;p&gt;The TAG is a special working group within the W3C, chartered with stewardship of the Web architecture. You can find out more about this group on the &lt;a href=&quot;https://www.w3.org/2001/tag/&quot;&gt;W3C TAG website&lt;/a&gt;.
  5207. Web architecture refers to the underlying principles that should be adhered to by all Web components, whether developed inside or outside W3C. The architecture captures principles that affect such things as understandability, interoperability, scalability, accessibility, and internationalization. Further explanation can be found in the &lt;a href=&quot;https://www.w3.org/2004/10/27-tag-charter.html&quot;&gt;TAG Charter&lt;/a&gt;.&lt;/p&gt;
  5208. &lt;p&gt;There&#39;s also a blog in which members of the working group regularly provide updates. For example, earlier this year Hadley Beeman wrote an article entitled &lt;a href=&quot;https://www.w3.org/blog/TAG/2019/05/30/our-ethics-drive-the-architecture-of-the-web/&quot;&gt;Our ethics drive the architecture of the web&lt;/a&gt; in which she explained how the members of the TAG influence the web we build on: &amp;quot;A big part of our job as the TAG is to help spec authors with their ideas for a new feature on the web. We help them think about things like how their proposal could work with other features, whether it might have unintended consequences, and how they can learn from someone else’s similar experience.&amp;quot; To help put the logic under their advice into a clear document, the group created a draft for &lt;a href=&quot;https://w3ctag.github.io/ethical-web-principles/&quot;&gt;Ethical Web Principles&lt;/a&gt;.&lt;/p&gt;
  5209. &lt;h2&gt;Candidates&lt;/h2&gt;
  5210. &lt;p&gt;The four candidates for the three seats are:&lt;/p&gt;
  5211. &lt;ul&gt;
  5212. &lt;li&gt;Rossen Atanassov (Microsoft Corporation)&lt;/li&gt;
  5213. &lt;li&gt;David Baron (Mozilla Foundation)*&lt;/li&gt;
  5214. &lt;li&gt;Kenneth Rohde Christiansen (Intel Corporation)*&lt;/li&gt;
  5215. &lt;li&gt;Lukasz Olejnik (W3C Invited Expert)*&lt;/li&gt;
  5216. &lt;/ul&gt;
  5217. &lt;p&gt;An asterisk (*) indicates that the nominee is a current participant.
  5218. &lt;a href=&quot;https://www.w3.org/2019/12/03-tag-nominations&quot;&gt;All candidates provided statements on what they hope to achieve&lt;/a&gt;.&lt;/p&gt;
  5219. &lt;h2&gt;Voting procedure&lt;/h2&gt;
  5220. &lt;p&gt;Fronteers members can mail their vote to secretaris@fronteers.nl. The vote should be an ordered list, with your personal top candidate coming first, your next candidate coming second, and so on.&lt;/p&gt;
  5221. &lt;p&gt;After a membership check, your vote will be added to the general pool. Your top candidate will get 4 points, your second candidate 3 points, etc. If you do not include all four candidates on your list, the missing candidates will get 0 points.&lt;/p&gt;
  5222. &lt;p&gt;Fronteers voting closes on Friday the 3rd of January at 24:00 o&#39;clock. The Fronteers board will create an ordered list, with the first candidate being the one who received most points, then the one with the second-most points and so on. Rachel Andrew will break any ties.&lt;/p&gt;
  5223. &lt;p&gt;Rachel will cast the Fronteers vote later that week, before the W3C deadline of 10th of January. W3C will announce the results on 14 January 2020.&lt;/p&gt;
  5224. </content>
  5225.  </entry>
  5226.  <entry>
  5227.    <title>Toegankelijkheid begint bij het eerste design</title>
  5228.    <link href="https://www.fronteers.nl/nl/blog/2019/12/toegankelijkheid-begint-bij-het-eerste-design"/>
  5229.    <updated>2019-12-12T00:00:00Z</updated>
  5230.    <id>https://www.fronteers.nl/nl/blog/2019/12/toegankelijkheid-begint-bij-het-eerste-design</id>
  5231.    <content xml:lang="nl" type="html">&lt;p&gt;Al bij het ontwerpen van een nieuwe site is het belangrijk om rekening te houden met toegankelijkheid. Als toegankelijkheidsonderzoeker kom ik bij het testen van websites vaak problemen tegen die al in de designfase zijn veroorzaakt.
  5232. Wanneer je als front-ender weet waar je op kunt letten, dan kun je al heel vroeg in het bouwproces de juiste vragen stellen aan designers. Zo kunnen veel problemen al voor de livegang opgelost worden. En is er veel minder reparatie achteraf nodig.&lt;/p&gt;
  5233. &lt;p&gt;In dit artikel wil ik graag ingaan op een aantal punten die van belang zijn als je een design moet omzetten in een HTML-webpagina.&lt;/p&gt;
  5234. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/12/toegankelijkheid-begint-bij-het-eerste-design#de-onzichtbare-user-experience&quot;&gt;De onzichtbare user experience&lt;/a&gt;
  5235. &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/12/toegankelijkheid-begint-bij-het-eerste-design#de-zichtbare-user-experience&quot;&gt;De zichtbare user experience&lt;/a&gt;
  5236. &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/12/toegankelijkheid-begint-bij-het-eerste-design#afsluitend&quot;&gt;Afsluitend&lt;/a&gt;&lt;/p&gt;
  5237. &lt;h2&gt;De onzichtbare user experience&lt;/h2&gt;
  5238. &lt;p&gt;Een design is heel visueel. Er zijn mooie schetsen gemaakt die tonen hoe de nieuwe site eruit moet gaan zien. Medewerkers van een designbureau zijn er vaak niet op getraind om rekening te houden met de user experience van mensen die slecht of niet kunnen zien.&lt;/p&gt;
  5239. &lt;p&gt;Met name voor blinden, die het scherm helemaal niet kunnen zien en daarom werken met een screenreader, moet ook een structuur aanwezig zijn die zij kunnen gebruiken. Een soort onzichtbare user experience. Ontwerp je deze structuur goed, dan is hij ook nuttig voor andere soorten hulpapparatuur, zoals spraakbedieningssoftware.&lt;/p&gt;
  5240. &lt;p&gt;Deze onzichtbare informatie is iets waar een designer prima rekening mee kan houden. Als developer kun je de informatie meenemen als je begint met bouwen. Nauw overleg tussen designer, developer en contentmanager is in deze startfase essentieel.&lt;/p&gt;
  5241. &lt;h2&gt;Koppenstructuur&lt;/h2&gt;
  5242. &lt;p&gt;Een goede koppenstructuur helpt je screenreadergebruikers enorm op weg. Zij kunnen een koppenlijst opvragen die fungeert als inhoudsopgave van de site. Zo navigeren zij snel naar de gezochte informatie op de pagina.&lt;/p&gt;
  5243. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toegankelijkheid-eerste-design/koppenlijst-voiceover-homepage-volkskrant.png&quot; alt=&quot;Screenshot koppenlijst VoiceOver, homepage Volkskrant, allemaal verkeerd gebruikte h4&#39;s en h3&#39;s&quot; /&gt;&lt;/p&gt;
  5244. &lt;p class=&quot;note&quot;&gt;
  5245. Een screenshot van een koppenlijst in VoiceOver, homepage volkskrant.nl
  5246. &lt;/p&gt;
  5247. &lt;p&gt;Designers maken visueel wel koppen, maar denken vaak niet na over de kopniveaus. Het is ook de taak van contentmanagers of content designers om over dit soort informatiestructuren na te denken. Hebben ze dat niet gedaan, dan is het aan de developer of de toegankelijkheidsadviseur om vragen te gaan stellen.&lt;/p&gt;
  5248. &lt;h3&gt;Wat is de h1 van deze pagina?&lt;/h3&gt;
  5249. &lt;p&gt;Het is &#39;best practice&#39; dat elke webpagina een h1 heeft die zegt waar de pagina over gaat. Dit hoeft niet de eerste kop van de pagina te zijn. Het kan bijvoorbeeld de eerste kop in het main-element zijn, die beschrijft waar de unieke content op deze pagina over gaat, bijvoorbeeld &#39;Paspoort aanvragen&#39; op een gemeentesite, of de kop van het artikel op een nieuwssite.&lt;/p&gt;
  5250. &lt;h3&gt;Zijn er kopniveaus overgeslagen?&lt;/h3&gt;
  5251. &lt;p&gt;Sla geen kopniveaus over. Spring dus niet van &lt;code&gt;h2&lt;/code&gt; naar &lt;code&gt;h4&lt;/code&gt;. Een screenreadergebruiker kan snel het idee krijgen dat hij informatie mist.&lt;/p&gt;
  5252. &lt;h3&gt;Staat alle content onder de juiste kop?&lt;/h3&gt;
  5253. &lt;p&gt;Zorg ervoor dat alle content onder de juiste kop staat. Dit gaat vaak mis bij zogenaamde &lt;em&gt;&#39;chapeaus&#39;&lt;/em&gt; (tekst boven kopjes). Zie bijvoorbeeld het screenshot hieronder. Hier zie je een nieuwsblokje van de homepage van &lt;a href=&quot;https://www.volkskrant.nl/&quot;&gt;de Volkskrant&lt;/a&gt; en informatie uit de &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector&quot;&gt;toegankelijkheidsinspector van Firefox&lt;/a&gt;.&lt;/p&gt;
  5254. &lt;p&gt;Deze elementen zijn in het nieuwsblokje aanwezig:&lt;/p&gt;
  5255. &lt;ol&gt;
  5256. &lt;li&gt;een afbeelding met &lt;code&gt;alt=&amp;quot;Cruciale fase in impeachment-onderzoek: levert ambassadeur hét bewijs tegen Trump?&amp;quot;&lt;/code&gt; (Een kanttekening: Dit is een slechte alt-tekst, omdat hij informatie dubbelt en bovendien niet beschrijft wat er op de afbeelding te zien is (zes portretfoto&#39;s).)&lt;/li&gt;
  5257. &lt;li&gt;een h4 met de tekst &#39;NIEUWS IMPEACHMENT TRUMP&#39;&lt;/li&gt;
  5258. &lt;li&gt;een h3 met de tekst &#39;Cruciale fase in impeachmentonderzoek: levert ambassadeur hét bewijs tegen Trump&#39;?&lt;/li&gt;
  5259. &lt;/ol&gt;
  5260. &lt;p&gt;De afbeelding en de h4 vallen bóven de h3 die beschrijft waar dit blokje over gaat. Ze vallen dus in de koppenstructuur onder de h3 van het vorige blokje. Op het moment van schrijven was dat het kopje &amp;quot;Manifestatie van start: ‘We schrijven geschiedenis!’&amp;quot;, over de staking van ziekenhuispersoneel. Erg verwarrend.&lt;/p&gt;
  5261. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toegankelijkheid-eerste-design/heading-levels-volkskrant.png&quot; alt=&quot;Verkeerde koppenstructuur bij nieuwsblokje homepage Volkskrant, eerst h4 (chapeau) en dan h3&quot; /&gt;&lt;/p&gt;
  5262. &lt;p class=&quot;note&quot;&gt;
  5263. Een chapeau met h4 staat boven de kop met h3, volkskrant.nl
  5264. &lt;/p&gt;
  5265. &lt;h3&gt;Moet dit wel een kop zijn?&lt;/h3&gt;
  5266. &lt;p&gt;Koppen zijn nodig om de content eronder te beschrijven. Staat er geen content onder een kop, dan is een h-element niet op zijn plaats. Opnieuw: Een screenreadergebruiker kan het idee krijgen dat hij informatie mist als er wel een kop is, maar geen content.&lt;/p&gt;
  5267. &lt;h2&gt;Semantische structuur&lt;/h2&gt;
  5268. &lt;p&gt;Screenreadergebruikers hebben heel veel verschillende manieren om te navigeren. Naast koppenlijsten en linkslijsten zijn ook &lt;em&gt;landmarks&lt;/em&gt; heel nuttig.&lt;/p&gt;
  5269. &lt;p&gt;Denk bij het uitwerken van het design na: Wat is de &lt;code&gt;header&lt;/code&gt;, &lt;code&gt;main&lt;/code&gt;, &lt;code&gt;aside&lt;/code&gt;, &lt;code&gt;footer&lt;/code&gt;, &lt;code&gt;nav&lt;/code&gt;, van deze pagina? En als er van een element meer dan één op de pagina voorkomt, hoe noem je ze dan? Je kunt ze een naam geven met &lt;a href=&quot;https://www.w3.org/TR/wai-aria-1.1/#aria-label&quot;&gt;&lt;code&gt;aria-label&lt;/code&gt;&lt;/a&gt; of met &lt;a href=&quot;https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby&quot;&gt;&lt;code&gt;aria-labelledby&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
  5270. &lt;p&gt;Denk erom: divs en spans betekenen niets voor hulpapparatuur! Voor toegankelijkheid is het altijd het beste om semantische elementen te gebruiken waar dat kan.&lt;/p&gt;
  5271. &lt;h2&gt;Labels&lt;/h2&gt;
  5272. &lt;h3&gt;Zichtbare labels&lt;/h3&gt;
  5273. &lt;p&gt;In mijn ideale wereld hebben iconen, formuliervelden, knoppen, enzovoort, altijd een zichtbaar tekstlabel. Designers laten dit graag weg, omdat minder tekst zorgt voor een &#39;cleaner&#39; ontwerp.&lt;/p&gt;
  5274. &lt;p&gt;Maar als je spraakbediening gebruikt, hoe weet je dan hoe een formulierveld heet als het tekstlabel onzichtbaar is? Of stel, je bent cognitief beperkt. Hoe weet je dan waar al die iconen voor staan? Zelfs ervaren internetgebruikers kennen vaak de betekenis van een icoon niet, zoals blijkt uit de &lt;a href=&quot;https://vimeo.com/251649861&quot;&gt;Fronteers Jam Session&lt;/a&gt; die Mallory van Achterberg hield.&lt;/p&gt;
  5275. &lt;p&gt;Zichtbare labels zijn ook erg belangrijk voor bijvoorbeeld mensen met concentratieproblemen of een kort werkgeheugen. Placeholders verdwijnen, tooltips vallen niet altijd op. Je helpt iedereen met het invullen van een formulier door altijd zichtbare labels te plaatsen. Het is dan altijd mogelijk om nog een keer na te gaan wat je moet invullen in het veld waar je bent.&lt;/p&gt;
  5276. &lt;h3&gt;Iconen&lt;/h3&gt;
  5277. &lt;p&gt;Is het onontkoombaar om een icoon te plaatsen zonder tekst? De ervaring leert dat vaak vergeten wordt een tekstalternatief te bieden. Meestal kan dat prima met een &lt;code&gt;alt&lt;/code&gt;-attribuut op de afbeelding, of met een visueel verborgen tekst in een &lt;code&gt;span&lt;/code&gt;.&lt;/p&gt;
  5278. &lt;h3&gt;Formuliervelden&lt;/h3&gt;
  5279. &lt;p&gt;Als in het design echt geen zichtbare labels voor formuliervelden gewenst zijn, zorg er dan in ieder geval voor dat de labels wel bestaan en beschikbaar zijn in de toegankelijkheidslaag. En dat ze op de juiste manier gekoppeld zijn aan het betreffende veld.&lt;/p&gt;
  5280. &lt;p&gt;Zorg ook voor een tekst voor knoppen, ook al zijn de teksten niet zichtbaar. Zo blijven ze bruikbaar voor mensen die de pagina niet kunnen zien.&lt;/p&gt;
  5281. &lt;h2&gt;Skiplink&lt;/h2&gt;
  5282. &lt;p&gt;Als je een website gebruikt met een muis, een touchpad of een ander point-and-click-apparaat, dan is het geen enkel probleem om snel het gewenste element te bereiken. Voor toetsenbordgebruikers die alleen een tabtoets tot hun beschikking hebben is het heel vervelend om steeds door herhalende blokken tekst heen te moeten navigeren. Tientallen keren de tabtoets indrukken is veel werk. Denk bijvoorbeeld aan alle links in een menu.&lt;/p&gt;
  5283. &lt;p&gt;Omzeilende links (skiplinks) bieden hier vaak uitkomst. Mocht je je daar nog niks bij kunnen voorstellen, kijk dan bijvoorbeeld op de site van &lt;a href=&quot;https://www.rijksoverheid.nl/&quot;&gt;Rijksoverheid&lt;/a&gt;. Gebruik je tabtoets om te navigeren. Als de pagina geladen is, verschijnt bij de eerste tab de skiplink met de tekst &#39;Ga direct naar inhoud&#39;. Activeer je deze link, dan sla je het menu over en komt je toetsenbordfocus meteen in de inhoud van de pagina terecht.&lt;/p&gt;
  5284. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toegankelijkheid-eerste-design/screenshot-skiplink-rijksoverheid.png&quot; alt=&quot;Screenshot skiplink Rijksoverheid.nl&quot; /&gt;&lt;/p&gt;
  5285. &lt;p class=&quot;note&quot;&gt;
  5286. Zo ziet de skiplink eruit op Rijksoverheid.nl
  5287. &lt;/p&gt;
  5288. &lt;p&gt;Omzeilende links zijn niet alleen handig voor de hoofdinhoud van een pagina, maar ook voor andere belangrijke plekken op de pagina, zoals de zoekfunctie, een blok met contactinformatie of een lijst met filters bij een zoekresultatenpagina. Er kunnen dus meerdere skiplinks bestaan die leiden naar verschillende belangrijke onderdelen van een pagina.&lt;/p&gt;
  5289. &lt;p&gt;Een skiplink wordt door een designer vaak niet ontworpen. Vraag aan de designer dus hoe de skiplink eruit moet zien.&lt;/p&gt;
  5290. &lt;h2&gt;De zichtbare user experience&lt;/h2&gt;
  5291. &lt;p&gt;Een groot deel van de toegankelijkheidsproblemen bevindt zich in het zichtbare deel van de website, met name voor slechtzienden of kleurenblinden. Ook moet bij het bouwen van een site rekening worden gehouden met ziende toetsenbordgebruikers.&lt;/p&gt;
  5292. &lt;h2&gt;Kleurgebruik&lt;/h2&gt;
  5293. &lt;p&gt;Een goede contrastverhouding is nodig om alle informatie op de pagina te kunnen waarnemen. Slecht contrast is al jaren nummer 1 op de lijst met toegankelijkheidsproblemen. Toch zijn er nog altijd designers en huisstijlontwerpers die kiezen voor kleurpaletten met lichte tinten.&lt;/p&gt;
  5294. &lt;p&gt;Al bij het ontwerpen van een nieuwe huisstijl zou iemand alert moeten zijn op de kleuren van bijvoorbeeld het logo. Hoewel logo&#39;s van de toegankelijkheidsrichtlijnen niet hoeven te voldoen aan contrasteisen, nemen mensen de kleuren wel vaak over bij het maken van bijvoorbeeld infographics of pdf&#39;s.&lt;/p&gt;
  5295. &lt;h3&gt;Heeft deze tekst voldoende contrast?&lt;/h3&gt;
  5296. &lt;p&gt;Meet in het design de kleuren van de teksten en hun achtergrond na met een kleurcontrasttool, bijvoorbeeld de &lt;a href=&quot;https://developer.paciellogroup.com/resources/contrastanalyser/&quot;&gt;Colour Contrast Analyser&lt;/a&gt;.&lt;/p&gt;
  5297. &lt;p&gt;Houd hierbij rekening met de &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html&quot;&gt;juiste contrastratio&#39;s volgens WCAG&lt;/a&gt;:&lt;/p&gt;
  5298. &lt;ul&gt;
  5299. &lt;li&gt;Minimaal 4,5:1 bij gewone tekst&lt;/li&gt;
  5300. &lt;li&gt;Minimaal 3:1 bij grote tekst (18pt of 14pt vet)&lt;/li&gt;
  5301. &lt;li&gt;Denk eraan: De lettergroottes in WCAG zijn in punten. 14pt en 18pt zijn equivalent aan ongeveer 18.5px en 24px&lt;/li&gt;
  5302. &lt;/ul&gt;
  5303. &lt;p&gt;Je kunt bij de designer ook een lijst met gebruikte kleuren opvragen en deze in een &lt;a href=&quot;http://contrast-grid.eightshapes.com/&quot;&gt;kleurenmatrix&lt;/a&gt; zetten. Hier zie je van verschillende kleurencombinaties of ze voldoen aan de vereiste contrastratio.&lt;/p&gt;
  5304. &lt;h3&gt;Heeft dit interactieve element voldoende contrast?&lt;/h3&gt;
  5305. &lt;p&gt;Sinds 2018 is er versie 2.1 van WCAG. Hierin is ook een eis opgenomen voor het &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html&quot;&gt;contrast van interactieve componenten&lt;/a&gt;. Dat wil zeggen dat ook knoppen, formuliervelden, en dergelijke duidelijk zichtbaar moeten zijn met behulp van voldoende contrast. Een ratio van minimaal 3:1 is hier vereist.&lt;/p&gt;
  5306. &lt;p&gt;De eisen zijn een beetje ingewikkeld, maar het is wel de moeite waard om je hierin te verdiepen. Het gaat immers om de bruikbaarheid van de site. Kan iemand iets niet zien, dan kan hij het ook niet gebruiken.&lt;/p&gt;
  5307. &lt;h3&gt;Een hoogcontrastknop, moet dat echt?&lt;/h3&gt;
  5308. &lt;p&gt;Nog altijd zijn er designers en opdrachtgevers die denken dat een ontwerp met slecht contrast geen probleem is, als je maar een hoogcontrastknop op je site zet. En strikt genomen valt er tijdens een toegankelijkheidsonderzoek niets af te keuren wanneer er een goed functionerende hoogcontrastknop op een site staat.&lt;/p&gt;
  5309. &lt;p&gt;Toch zijn er een paar grote bezwaren tegen een hoogcontrastknop. Allereerst is het niet gebruiksvriendelijk. Mensen die de knop nodig hebben moeten hem eerst zien te vinden, en dat kan een uitdaging zijn als je slechtziend bent. Daarnaast vergt het veel extra werk om een tweede stylesheet te maken voor hoog contrast. Het kost bovendien meer onderhoud.&lt;/p&gt;
  5310. &lt;p&gt;Een hoog contrastknop is symptoombestrijding. Als je hem nodig hebt, betekent dat dat je een ontoegankelijke huisstijl hebt. Het levert je ook problemen op met pdf’s, powerpoints et cetera. Als toegankelijkheidsonderzoeker vind ik vrijwel altijd plekken in een site waar het contrast niet in orde is, ook al staat de hoogcontrastknop aan. Het beste is om één versie van de stylesheet te maken met kleuren die voldoende contrast hebben.&lt;/p&gt;
  5311. &lt;h3&gt;Moet je kleur kunnen zien om iets te snappen?&lt;/h3&gt;
  5312. &lt;p&gt;Informatie op een site moet niet alleen aan de kleur herkenbaar zijn. Denk bijvoorbeeld aan links in lopende tekst. Designers vinden onderstreping van links vaak niet mooi, maar het helpt je bezoekers enorm als ze links goed kunnen herkennen.&lt;/p&gt;
  5313. &lt;p&gt;Ook in bijvoorbeeld grafieken is het belangrijk dat de informatie ook te begrijpen is als je kleuren niet (goed) kunt onderscheiden.&lt;/p&gt;
  5314. &lt;h2&gt;Focus- en hoverstijl&lt;/h2&gt;
  5315. &lt;p&gt;Bij het ontwerpen van een site wordt vaak niet gedacht aan de focus- en hoverstijl. Met name de focusstijl moet voldoende duidelijk zijn voor toetsenbordgebruikers. Zij kunnen zo zien waar zij zijn op de pagina.&lt;/p&gt;
  5316. &lt;p&gt;Heeft een designer geen focus- en hoverstijl ontworpen, vraag er dan om. Zet voor focus zeker geen &lt;code&gt;outline: none;&lt;/code&gt; in je CSS zonder een vervangende stijl te schrijven.&lt;/p&gt;
  5317. &lt;h2&gt;Responsive design&lt;/h2&gt;
  5318. &lt;p&gt;WCAG 2.1 heeft een &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/reflow.html&quot;&gt;succescriterium 1.4.10 Reflow&lt;/a&gt;. Dit succescriterium gaat uit van een viewport van 320 CSS pixels breedte. Houd hier rekening mee wanneer wordt ontworpen en gebouwd wordt voor mobiel, zodat horizontaal scrollen niet nodig is en er geen functionaliteit verdwijnt.&lt;/p&gt;
  5319. &lt;h3&gt;Foutmeldingen in formulieren&lt;/h3&gt;
  5320. &lt;p&gt;Vaak wordt door designers niet gedacht aan het ontwerpen van een formulierstijl, met name foutmeldingen. Het is voor ziende gebruikers belangrijk dat de foutmeldingen niet alleen in kleur worden weergegeven en dat de kleuren die worden gebruikt, voldoende contrast hebben.&lt;/p&gt;
  5321. &lt;p&gt;Denk ook na over wat de ervaring wordt voor blinde gebruikers: Hoe gaan zij weten dat er iets niet klopt? Karl Groves legt op zijn blog uitgebreid uit hoe je &lt;code&gt;aria-describedby&lt;/code&gt; kunt gebruiken voor &lt;a href=&quot;https://karlgroves.com/2011/10/10/accessible-form-labeling-instructions&quot;&gt;toegankelijke foutmeldingen&lt;/a&gt;.&lt;/p&gt;
  5322. &lt;h2&gt;Afsluitend&lt;/h2&gt;
  5323. &lt;p&gt;Natuurlijk is er nog veel meer te vertellen over design en toegankelijkheid. Zeker de wat complexere gevallen verdienen veel meer aandacht dan in dit artikel past.&lt;/p&gt;
  5324. &lt;p&gt;Harris Schneiderman gaf eind november een webinar met de titel &lt;a href=&quot;https://www.youtube.com/watch?v=5gFSru8yGaU&quot;&gt;&#39;Translating Design Wireframes into Accessible HTML/CSS&#39;&lt;/a&gt; voor Smashing Magazine. Wil je meer weten over tabvolgorde, roles, accessible names, values/states en focusmanagement, kijk dan vooral die video.&lt;/p&gt;
  5325. &lt;p&gt;Voor een &lt;a href=&quot;http://iacobien.nl/artikelen/contrast-van-tekst-met-achtergrondkleur-op-een-toegankelijke-site/&quot;&gt;zeer uitgebreid artikel over contrast&lt;/a&gt; kun je kijken op de site van mijn collega Iacobien Riezebosch.&lt;/p&gt;
  5326. &lt;p&gt;Vragen kun je altijd stellen in het accessibility-kanaal van de &lt;a href=&quot;https://fronteers-slack.herokuapp.com/&quot;&gt;Slack van Fronteers&lt;/a&gt;.&lt;/p&gt;
  5327. &lt;h2&gt;Over Marjon&lt;/h2&gt;
  5328. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toegankelijkheid-eerste-design/marjon-bakker.jpg&quot; alt=&quot;Foto van Marjon&quot; class=&quot;floating-portrait&quot; /&gt;
  5329. Marjon Bakker is sinds 2017 adviseur digitale toegankelijkheid bij [Firm Ground](https://www.firmground.nl). Zij werkt het liefst op het snijvlak tussen communicatie en frontend development, met oog voor bruikbaarheid van websites voor alle bezoekers. Ze heeft zich gespecialiseerd in technisch onderzoek en het uitwerken van praktische oplossingen voor developers en opdrachtgevers. Haar toegankelijkheidswerkzaamheden sluiten goed aan en bouwen voort op haar eerdere werkervaring als webredacteur en communitymanager.
  5330. Marjons donatie gaat naar Bits of Freedom.)
  5331. &lt;h4&gt;Contact&lt;/h4&gt;
  5332. &lt;ul&gt;
  5333. &lt;li&gt;&lt;a href=&quot;mailto:marjon@firmground.nl&quot;&gt;marjon@firmground.nl&lt;/a&gt;&lt;/li&gt;
  5334. &lt;li&gt;&lt;a href=&quot;https://www.linkedin.com/in/marjonbakker/&quot;&gt;LinkedIn&lt;/a&gt;&lt;/li&gt;
  5335. &lt;li&gt;&lt;a href=&quot;https://twitter.com/MarjonBakker&quot;&gt;Twitter&lt;/a&gt;&lt;/li&gt;
  5336. &lt;/ul&gt;
  5337. </content>
  5338.  </entry>
  5339.  <entry>
  5340.    <title>WordPress for developers who hate WordPress</title>
  5341.    <link href="https://www.fronteers.nl/nl/blog/2019/12/wordpress-for-developers-who-hate-wordpress"/>
  5342.    <updated>2019-12-11T00:00:00Z</updated>
  5343.    <id>https://www.fronteers.nl/nl/blog/2019/12/wordpress-for-developers-who-hate-wordpress</id>
  5344.    <content xml:lang="nl" type="html">&lt;p&gt;WordPress is now over sixteen years old. In those sixteen years it’s grown to power over 33% of the ten million most popular websites. And yet, the most popular system for publishing websites is one of the most hated systems for developers. At least according to the Stack Overflow developer survey who ranked WordPress as the most dreaded platform to work with this year. It has been in the top three for years now.&lt;/p&gt;
  5345. &lt;p&gt;WordPress has a reputation among developers that it’s cumbersome, slow to load and insecure. This is true in a lot of cases, but I’d like to show you that it is possible to build modern and easy to maintain websites, plugins and themes with WordPress.&lt;/p&gt;
  5346. &lt;p&gt;This article is divided into four parts:&lt;/p&gt;
  5347. &lt;ol&gt;
  5348. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/12/wordpress-for-developers-who-hate-wordpress#why-should-you-still-care-about-wordpress&quot;&gt;Why should you (still) care about WordPress?&lt;/a&gt;&lt;/li&gt;
  5349. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/12/wordpress-for-developers-who-hate-wordpress#wordpress-modern-parts&quot;&gt;WordPress’ modern parts&lt;/a&gt;&lt;/li&gt;
  5350. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/12/wordpress-for-developers-who-hate-wordpress#how-to-get-around-all-that-other-legacy&quot;&gt;How to get around all that other legacy?&lt;/a&gt;&lt;/li&gt;
  5351. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/12/wordpress-for-developers-who-hate-wordpress#why-should-you-still-care-about-wordpress&quot;&gt;The last remaining caveats&lt;/a&gt;&lt;/li&gt;
  5352. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/12/wordpress-for-developers-who-hate-wordpress#conclusion&quot;&gt;Conclusion&lt;/a&gt;&lt;/li&gt;
  5353. &lt;/ol&gt;
  5354. &lt;p&gt;So if you’re either stuck working on a WordPress website, or you think that a huge part of the web shouldn’t be a blind spot in your knowledge; it’s time to pay attention.&lt;/p&gt;
  5355. &lt;h2&gt;Why should you (still) care about WordPress?&lt;/h2&gt;
  5356. &lt;p&gt;WordPress’ market share is an obvious reason to keep an eye on it. It’s the most used CMS by far, and that’s because it’s easy to set up, relatively cost-effective and because it’s widely supported by developers, agencies and hosting companies. This ease of use attracts a lot of people clicking together a site. And while this is a perfectly valid way to get a site up and running, it isn’t what most developers are looking for in a platform. The fact that WordPress is used this way, however, doesn’t mean it &lt;em&gt;has&lt;/em&gt; to be used this way.&lt;/p&gt;
  5357. &lt;p&gt;WordPress is the biggest content-creating platform where you are still owner of your own content. A service like Medium, for instance, is currently using other people’s content to sell their subscriptions. It’s one of the reasons why Signal vs Noise, the well-known blog by the people at Basecamp, switched back to WordPress. It’s also the reason many big content corporations like Time and CNN are fans of the platform.&lt;/p&gt;
  5358. &lt;p&gt;If content ownership isn’t important to you, maybe money is: Premium WordPress themes and plugins are million to billion dollar markets. While the products are relatively cheap, they’re sold to a large volume of clients. A big bonus is that these clients are getting more used to subscription models. This means that they are getting comfortable in continuously paying for updates and support on the plugins and themes they buy, making premium WordPress themes and plugins a very stable business.&lt;/p&gt;
  5359. &lt;p&gt;WordPress is committed to backwards compatibility; they don’t want to break millions of websites. If you’re new to developing for WordPress this can be the cause of a lot of development grievances. It can definitely make your initial development-run a lot harder. But that backwards compatibility also has a positive effect: after the initial build time your project will require a lot less updates to stay compatible. This is true for websites, but also for plugins and themes. As a testament to this feature: I personally had to update a WordPress website that was running version 2.9, which was ten years old at the time. The website kept running without issues after I updated everything. That’s pretty remarkable in a world where an &lt;code&gt;npm update&lt;/code&gt; command will probably break my application.&lt;/p&gt;
  5360. &lt;h2&gt;WordPress’ Modern Parts&lt;/h2&gt;
  5361. &lt;p&gt;In 2013 a strapping young WordPress developer by the name of Ryan McCue started working on a modern REST API for WordPress. Although It wouldn’t be added into WordPress core until much later, this would prove to be the spark for much of WordPress’ modern nuts and bolts.&lt;/p&gt;
  5362. &lt;h2&gt;REST API&lt;/h2&gt;
  5363. &lt;p&gt;The WordPress REST API allows you to basically do anything with WordPress’ content, media and settings in a predictable and RESTful way. It’s a breath of fresh air for anyone who’s accustomed to the many different PHP-based API’s that WordPress offers. Requests are made to endpoints using a request method and output is provided in the form of JSON objects. Authentication for the baked-in endpoints happens automatically.&lt;/p&gt;
  5364. &lt;p&gt;Now the endpoints that come shipped with WordPress core are pretty basic. Content-wise they only allow you to fetch the default post-types (posts and pages). Luckily adding a new endpoint doesn’t require a lot of code:&lt;/p&gt;
  5365. &lt;pre&gt;&lt;code&gt;namespace MyPlugin;
  5366.  
  5367. class Endpoint{
  5368.  
  5369.    /**
  5370.        * Register this endpoint
  5371.        */
  5372.    public function register(){
  5373.        register_rest_route(
  5374.            &#39;my-plugin/v1&#39;,
  5375.            &#39;/my-endpoint&#39;,
  5376.            [
  5377.                &#39;methods&#39; =&amp;gt; &#39;GET&#39;,
  5378.                &#39;callback&#39; =&amp;gt; [ $this, &#39;callback&#39; ]
  5379.            ]
  5380.        );
  5381.    }
  5382.  
  5383.    /**
  5384.        * Provide the callback
  5385.        */
  5386.    public function callback(){
  5387.        return &#39;Hello World!&#39;;
  5388.    }
  5389. }
  5390. &lt;/code&gt;&lt;/pre&gt;
  5391. &lt;p&gt;In this example we register an endpoint called “my-endpoint” in the REST namespace “my-plugin”. This means that when we make a GET request to the url &lt;code&gt;https://example.com/wp-json/my-plugin/v1/my-endpoint&lt;/code&gt;, we’ll get the “Hello World” string back.&lt;/p&gt;
  5392. &lt;p&gt;The callback can return pretty much anything you’d like. Anything more complicated than a string will automatically be converted into a JSON response.&lt;/p&gt;
  5393. &lt;p&gt;If you like to process POST, PULL or DELETE requests, you can just change the method you’ve registered the rest route with:&lt;/p&gt;
  5394. &lt;pre&gt;&lt;code&gt;/**
  5395. * Register this endpoint
  5396. */
  5397. public function register(){
  5398.    register_rest_route(
  5399.        &#39;my-plugin/v1&#39;,
  5400.        &#39;/custom-delete-function&#39;,
  5401.        [
  5402.            &#39;methods&#39; =&amp;gt; &#39;DELETE&#39;,
  5403.            &#39;callback&#39; =&amp;gt; [ $this, &#39;callback&#39; ]
  5404.        ]
  5405.    );
  5406. }
  5407.  
  5408. /**
  5409. * Provide the callback
  5410. */
  5411. public function callback( &#92;WP_REST_Request $request ){
  5412.  
  5413.    $params = $request-&amp;gt;get_json_params();
  5414.    if( wp_verify_nonce( $params[&#39;my_nonce&#39;], NonceHelper::DELETE_ACTION ) ){
  5415.        wp_delete_post( $params[&#39;post_id&#39;] );
  5416.    }
  5417.  
  5418.    return null;
  5419. }
  5420. &lt;/code&gt;&lt;/pre&gt;
  5421. &lt;p&gt;This example adds a DELETE Rest-method and checks if the nonce accompanying the request is valid with a class called &lt;code&gt;NonceHelper&lt;/code&gt;, that isn’t included in this example. If the nonce is valid, it deletes the post as requested.&lt;/p&gt;
  5422. &lt;p&gt;If GraphQL is more your jam, you can also look into &lt;a href=&quot;https://www.wpgraphql.com/&quot;&gt;WP GraphQL&lt;/a&gt;, which adds a full GraphQL to your installation. It&#39;s well documented and very developer-friendly.&lt;/p&gt;
  5423. &lt;h2&gt;Modern Javascript in WordPress&lt;/h2&gt;
  5424. &lt;p&gt;Built on top of this REST API is a layer of modern JavaScript. Automattic, the company behind the dot-com version of WordPress, started moving the entire WordPress admin interface for their platform over to a REST-api powered React app in 2014. They released this app as a completely open source project called &lt;a href=&quot;https://github.com/Automattic/wp-calypso&quot;&gt;Calypso&lt;/a&gt;.&lt;/p&gt;
  5425. &lt;p&gt;Although the project is very popular and sees continued improvement, it will not be added to WordPress core. It’s a separate app for managing your WordPress site. So if you’re creating a new website and you’re looking for a solid CMS but with a modern and extendable interface, you might be right picking Calypso and WordPress.&lt;/p&gt;
  5426. &lt;p&gt;However, Calypso is only a small part of how modern JavaScript found it’s way into WordPress. The big project in this space currently is the relatively new WordPress editor dubbed “Gutenberg”.&lt;/p&gt;
  5427. &lt;h2&gt;Gutenberg&lt;/h2&gt;
  5428. &lt;p&gt;Matt Mullenweg, co-founder of WordPress, announced this full JavaScript content editor based on React components during his keynote at Europe’s biggest WordPress conference in 2017. The deadline of December 2017 proved to be overly ambitious and eventually got pushed back a full year. The current version of Gutenberg available in WordPress is stable and fast. Like any piece of software, though, Gutenberg has its fair share of open issues, it will continue to see big improvements over the coming years.&lt;/p&gt;
  5429. &lt;p&gt;It’s being developed as a WordPress plugin and will get committed to WordPress core incrementally. That way it’s a lot easier for both the core and Gutenberg teams to keep iterating. It’s really build with extensibility in mind. The editor revolves around blocks of content that the admin user specifies. Adding or removing blocks for certain types of content is relatively easy, if you’re familiar with modern JavaScript and React. Here’s an example of a custom Gutenberg block:&lt;/p&gt;
  5430. &lt;pre&gt;&lt;code&gt;//fetch certain functions and components from
  5431. //core WordPress JS libraries:
  5432. const { registerBlockType } = wp.blocks;
  5433. const { __ } = wp.i18n;
  5434. const { RichText } = wp.editor;
  5435.  
  5436. registerBlockType(
  5437.    &#39;namespace/block&#39;,
  5438.    {
  5439.        title: &amp;quot;__( &#39;Custom Block&#39;, &#39;namespace&#39; ),&amp;quot;
  5440.        description: __( &#39;Adds a custom block&#39;, &#39;namespace&#39; ),
  5441.        category: &#39;common&#39;,
  5442.        attributes: {
  5443.            hello: {
  5444.                type: &#39;string&#39;,
  5445.                selector: &#39;h4&#39;,
  5446.                default: &#39;Hello World&#39;
  5447.            }
  5448.        },
  5449.        edit( props ){
  5450.  
  5451.            const { attributes: { hello }, className, setAttributes } = props;
  5452.  
  5453.            return (
  5454.                &amp;lt;section className={ className }&amp;gt;
  5455.                    &amp;lt;RichText
  5456.                        tagName=&amp;quot;h4&amp;quot;
  5457.                        value={ hello }
  5458.                        placeholder={ __(&#39;Write your hello world&#39;, &#39;namespace&#39;) }
  5459.                        onChange={ (value) =&amp;gt; setAttributes({ hello: value }) }
  5460.                    /&amp;gt;
  5461.                &amp;lt;/section&amp;gt;
  5462.            )
  5463.        },
  5464.        save( props ){
  5465.  
  5466.            const { attributes: { hello }, className } = props;
  5467.            return (
  5468.                &amp;lt;section className={ className }&amp;gt;
  5469.                    &amp;lt;h4&amp;gt;{hello}&amp;lt;/h4&amp;gt;
  5470.                &amp;lt;/section&amp;gt;
  5471.            )
  5472.        }
  5473.    }
  5474. );
  5475. &lt;/code&gt;&lt;/pre&gt;
  5476. &lt;p&gt;In this example we use the native function of &lt;code&gt;registerBlockType&lt;/code&gt; to create a “Hello World” block. The only thing this block does is create an input with the default value “Hello World” and echo that input’s eventual value in a &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;h4&amp;gt;&lt;/code&gt;.&lt;/p&gt;
  5477. &lt;p&gt;Let’s loop through that code really quick:&lt;/p&gt;
  5478. &lt;ol&gt;
  5479. &lt;li&gt;It registers the block with a certain title and description. It also adds it to a block category&lt;/li&gt;
  5480. &lt;li&gt;It lists all attributes of the block. In this case a string by the name of ‘hello’&lt;/li&gt;
  5481. &lt;li&gt;It renders a field in the &lt;code&gt;edit()&lt;/code&gt; function, dictating what to show in the WordPress admin&lt;/li&gt;
  5482. &lt;li&gt;It renders the section in the &lt;code&gt;save()&lt;/code&gt; function, telling WordPress how to save the data in this block.&lt;/li&gt;
  5483. &lt;/ol&gt;
  5484. &lt;p&gt;You may have noticed the reference of the &lt;code&gt;&amp;lt;RichText&amp;gt;&lt;/code&gt; component. This is an example how you can easily add your own (React) components to Gutenberg for custom functionality and extensibility. You could always break down the &lt;code&gt;edit()&lt;/code&gt; and &lt;code&gt;save()&lt;/code&gt; function into smaller components if they get too complicated, for instance.&lt;/p&gt;
  5485. &lt;p&gt;For getting to know Gutenberg’s new APIs and gizmos I’d recommend &lt;a href=&quot;http://gutenberg.courses/&quot;&gt;the Gutenberg development course by Zac Gordon&lt;/a&gt;. I also created a simple &lt;a href=&quot;https://github.com/lucprincen/my-plugin&quot;&gt;boilerplate plugin to write your own Gutenberg blocks, which can be found on Github&lt;/a&gt;.&lt;/p&gt;
  5486. &lt;h2&gt;WP CLI&lt;/h2&gt;
  5487. &lt;p&gt;WP CLI is a command line tool for WordPress. It was started in 2011 by &lt;a href=&quot;https://scribu.net/&quot;&gt;Cristi Burcă&lt;/a&gt; and within a year was a very popular project in the WordPress ecosystem. It allows you to do everything the WordPress admin UI can do and more, all from the comfort of your command line. The best part about WP CLI is that you’re able to chain commands together and, for instance, update all plugins at once, regenerate all media files to work with new crops or flush those pesky rewrites. If you’re considering working with WordPress again, I would always include WP CLI in your toolbox.&lt;/p&gt;
  5488. &lt;p&gt;Just as Gutenberg, WP CLI was build with extensibility in mind. I include some custom WP CLI commands in most of my projects nowadays. These commands either simplify development or automate certain tasks, like fetching data from an external API.&lt;/p&gt;
  5489. &lt;p&gt;Here’s an example of a WP CLI class registering two commands:&lt;/p&gt;
  5490. &lt;pre&gt;&lt;code&gt;namespace MyPlugin&#92;Cli;
  5491.  
  5492. use WP_CLI;
  5493. use WP_CLI_Command;
  5494.  
  5495. /**
  5496. * Register the various WP CLI commands
  5497. */
  5498. class Register extends WP_CLI_Command{
  5499.  
  5500. /**
  5501.    * Migrate database tables
  5502.    *
  5503.    * @return void
  5504.    */
  5505.    public function migrate()
  5506.    {
  5507.        ( new &#92;MyPlugin&#92;Database&#92;Migrations() )-&amp;gt;run();
  5508.    }
  5509.    /**
  5510.    * Fetch external data plugin
  5511.    *
  5512.    * @return data
  5513.    */
  5514.    public function fetch_data()
  5515.    {
  5516.        ( new &#92;MyPlugin&#92;Api&#92;Controller() )-&amp;gt;fetch_data();
  5517.    }
  5518. }
  5519.  
  5520. WP_CLI::add_command( &#39;myplugin&#39;, &#39;MyPlugin&#92;Cli&#92;Register&#39; );
  5521. &lt;/code&gt;&lt;/pre&gt;
  5522. &lt;p&gt;This example adds the command &lt;code&gt;myplugin&lt;/code&gt; to your WP CLI command list. It registers two sub-commands &lt;code&gt;migrate&lt;/code&gt; and &lt;code&gt;fetch_data&lt;/code&gt;, which are just the function names of this class. Both those functions neatly defer their work to different classes. If you have tasks in the WordPress admin that can be automated, or triggered by a single button-click, it’s worth writing a small command for them, so you can quickly run them from the terminal.&lt;/p&gt;
  5523. &lt;h2&gt;How to get around all that other legacy?&lt;/h2&gt;
  5524. &lt;p&gt;Despite of all the modern JavaScript and a consistent and easy way to handle your data-streams, WordPress is still a legacy system build upon a sixteen-year old foundation. We need some outside help to get around all of this aging technology.&lt;/p&gt;
  5525. &lt;h2&gt;Embracing modern PHP&lt;/h2&gt;
  5526. &lt;p&gt;Just like WordPress, PHP doesn’t have a good name when it comes to modern development. It’s still widely known as the tinkering script-kiddy language it was ten years ago. Lucky for us, PHP has made great strides in the past couple of years. Ever since 5.3 we’ve got a full and modern OOP stack with namespaces, interfaces and abstract classes. And that has only gotten better with the various PHP 7 releases.&lt;/p&gt;
  5527. &lt;p&gt;The examples used earlier in this article all are set up with namespaces and structured in a modern way, a thing still sorely lacking in most code examples in the WordPress docs. If you’d like to change that, the &lt;a href=&quot;https://make.wordpress.org/docs/&quot;&gt;WordPress docs team&lt;/a&gt; is always looking for talented people to update documentation.&lt;/p&gt;
  5528. &lt;p&gt;Stuff like &lt;a href=&quot;https://thewebtier.com/php/psr4-autoloading-php-files-using-composer/&quot;&gt;autoloaders based on namespaces&lt;/a&gt;, proper &lt;a href=&quot;https://phpunit.de/&quot;&gt;php unit testing&lt;/a&gt; along with &lt;a href=&quot;https://github.com/fzaninotto/Faker&quot;&gt;fake data&lt;/a&gt; are all becoming commonplace among PHP developers.&lt;/p&gt;
  5529. &lt;h2&gt;Dependency management with Composer&lt;/h2&gt;
  5530. &lt;p&gt;Another great addition of modern PHP is the use of dependency management. Composer is an open source project that enables you to load in different PHP libraries for use in your own project. Most of the available open source packages are available via Packagist. WordPress plugins that are available in the public WordPress plugin directory are automatically available in Composer via the excellent &lt;a href=&quot;https://wpackagist.org/&quot;&gt;wpackagist&lt;/a&gt; service. Most of your other required (legacy) packages can be loaded in through Composers’ VCS option.&lt;/p&gt;
  5531. &lt;p&gt;There’s still an asterisk in working with composer in WordPress, though. This depends on the scope of what you’re trying to build, but a single plugin should deal with vendor packages in a different way than a full website project. One of the more interesting projects in this space is &lt;a href=&quot;https://coenjacobs.me/projects/mozart/&quot;&gt;Mozart by Coen Jacobs&lt;/a&gt;, which tries to have all dependencies in a WordPress install play nice with each other.&lt;/p&gt;
  5532. &lt;h2&gt;SVN to GIT&lt;/h2&gt;
  5533. &lt;p&gt;The default code repository of WordPress is SVN. The entire plugin and theme repository runs on this, as do all (automated) updates in the WordPress interface. Personally, I don’t really like SVN. The tools and ecosystem surrounding SVN simply aren’t as good as the tools surrounding Git. Luckily there are plenty of workarounds available for this. If you’re planning on releasing a plugin to the WordPress repository, but you’d like to maintain it using Github, use the excellent &lt;a href=&quot;https://github.com/10up/actions-wordpress&quot;&gt;Github actions for WordPress by 10up&lt;/a&gt;. If you don’t really like Github there’s other excellent options like this &lt;a href=&quot;https://github.com/GaryJones/wordpress-plugin-svn-deploy&quot;&gt;Git to SVN deploy script by Gary Jones&lt;/a&gt;.&lt;/p&gt;
  5534. &lt;p&gt;Getting this workaround up-and-running is a lot faster than waiting for WordPress core to start adopting Git, I can assure you that much.&lt;/p&gt;
  5535. &lt;h2&gt;Deploying WordPress&lt;/h2&gt;
  5536. &lt;p&gt;Deployments in the WordPress ecosystem still depend on (s)FTP for a large part of the community. It’s one of the reasons why WordPress is known as an amateur platform. But that doesn’t mean that SFTP is the only option for deployment. You’re more than welcome to use regular GIT for deploying your WordPress websites, for instance. Capistrano is another interesting option and there’s also plenty of bash-tools available that work with WP CLI.&lt;/p&gt;
  5537. &lt;p&gt;There are a bunch of WordPress-only hosts that also have excellent deployment options, like &lt;a href=&quot;https://wpengine.com/git/&quot;&gt;WP Engine’s custom GIT option&lt;/a&gt;, that also runs your tests and checks for compatibility issues with all other code that is running outside of your repo.&lt;/p&gt;
  5538. &lt;p&gt;How you deploy really depends on how you handle updates within WordPress, so let’s look into that as well.&lt;/p&gt;
  5539. &lt;h2&gt;Dealing with updates&lt;/h2&gt;
  5540. &lt;p&gt;So the big question in dealing with updates is if you are okay with your users updating plugins themselves through the admin. Giving your users that option is a smart and safe thing to do if you know and trust the third-party code you’re working with.&lt;/p&gt;
  5541. &lt;p&gt;If you’re not comfortable with handing over control of your stack to people logging into WordPress admin, then it’s possible to take that power away from them. However, stopping updates altogether isn’t a viable option due to security issues. In this case updates should regularly happen through the command-line or your deploys. In any case I’d recommend leaving third party code (like plugins) out of your repository and using either composer and git hooks or a WP CLI method to keep your website up-to-date. The best solution is definitely dependent on what you’re building and how many third party packages you would need.&lt;/p&gt;
  5542. &lt;h2&gt;The last remaining caveats&lt;/h2&gt;
  5543. &lt;p&gt;Despite all of these improvements to the WordPress ecosystem, there are still areas that will confront you with WordPress’ age and the fact that you’re working with legacy software. There really aren’t that many great solutions for these issues, but I’ll try to ease the pain as much as possible in this chapter.&lt;/p&gt;
  5544. &lt;h2&gt;Data handling and database structure&lt;/h2&gt;
  5545. &lt;p&gt;WordPress introduces thirteen database tables on install. It doesn’t provide a way for developers to create new ones and mainly focuses on adding APIs for dealing with the existing tables. WordPress suggests to put every piece of extra information surrounding posts, terms and users in so called &lt;code&gt;meta&lt;/code&gt; tables. These tables contain an &lt;code&gt;id&lt;/code&gt; to the original object, and a &lt;code&gt;key&lt;/code&gt; and &lt;code&gt;value&lt;/code&gt; field. This data model might be flexible, but it’s far from optimized and it will get abused in a lot of cases.&lt;/p&gt;
  5546. &lt;p&gt;There are great options out there for creating your own data models on top of the existing ones. &lt;a href=&quot;https://github.com/corcel/corcel&quot;&gt;This library incorporating Laravel Eloquent into WordPress&lt;/a&gt; comes to mind. There’s also a &lt;a href=&quot;https://github.com/woocommerce/woocommerce-product-tables-feature-plugin&quot;&gt;beta plugin available that will add custom database tables to Woocommerce&lt;/a&gt; that greatly improves speed, but other than that there aren’t a lot of out-of-the-box fixes for this at the moment.&lt;/p&gt;
  5547. &lt;p&gt;There’s a lot in development surrounding Gutenberg’s data handling that is pretty exciting though and seeing as Gutenberg is eventually going to dictate every aspect of WordPress, this will inevitably lead to better performance and a cleaner data-model. Just don’t hold your breath until then.&lt;/p&gt;
  5548. &lt;h2&gt;The ecosystem&lt;/h2&gt;
  5549. &lt;p&gt;Science-fiction writer Theodore Sturgeon was asked once why 90% of the science-fiction novels that got published where crap. To which he responded; “90% of everything is crap”. This idea is commonly referred to as “Sturgeon’s Law” and it is very much in effect when it comes to WordPress themes, plugins and other WordPress-related work.&lt;/p&gt;
  5550. &lt;p&gt;This can give the entire ecosystem an amateur-feel and makes it really hard for people trying to figure out good WordPress-based solutions. There isn’t really a great answer for this except asking other people more familiar with WordPress.&lt;/p&gt;
  5551. &lt;p&gt;Both the &lt;a href=&quot;https://make.wordpress.org/chat/&quot;&gt;international&lt;/a&gt; and the &lt;a href=&quot;https://nl.wordpress.org/team/&quot;&gt;Dutch WordPress slack-channels&lt;/a&gt; are filled with people who work with WordPress on a professional level. These channels are a great place to ask a question or two about which plugin is right for the job.&lt;/p&gt;
  5552. &lt;h2&gt;Conclusion&lt;/h2&gt;
  5553. &lt;p&gt;While WordPress is in a lot of ways an ancient piece of software, there are a lot of positive things happening in the WordPress ecosystem. It might be fun to completely write off WordPress due to its age, but its market share keeps growing. So why not look a bit further at WordPress’ modern bits and re-evaluate if this really can’t be part of your toolbox? If not, then no worries; at least you’ve read up on the newer capabilities of the platform and can make a more informed decision for your next project.&lt;/p&gt;
  5554. &lt;h3&gt;About Luc Princen&lt;/h3&gt;
  5555. &lt;p&gt;/adventskalender/luc-princen.jpg
  5556. Luc Princen is an independent developer and designer from The Netherlands specializing in WordPress and frontend development. He loves open source, elegant code, fast load times, Dungeons &amp;amp; Dragons and playing the occasional (grand) strategy game. You can find him on Twitter with the handle &lt;a href=&quot;https://twitter.com/LucP&quot;&gt;@LucP&lt;/a&gt;.
  5557. Luc&#39;s donation will go to Dutch charity &lt;em&gt;Stem op een Vrouw&lt;/em&gt;.&lt;/p&gt;
  5558. </content>
  5559.  </entry>
  5560.  <entry>
  5561.    <title>Een andere manier</title>
  5562.    <link href="https://www.fronteers.nl/nl/blog/2019/12/een-andere-manier"/>
  5563.    <updated>2019-12-10T00:00:00Z</updated>
  5564.    <id>https://www.fronteers.nl/nl/blog/2019/12/een-andere-manier</id>
  5565.    <content xml:lang="nl" type="html">&lt;p&gt;De kracht van het internet is dat de technieken relatief eenvoudig te gebruiken zijn. Gedreven door het idee dat er binnen enkele seconden iets op het scherm moet staan lijkt het tegenwoordig noodzakelijk om een Single Page App op te tuigen die begint vanuit het neerzetten van placeholders, waarin vervolgens content wordt geladen vanuit GraphQL en REST API’s. Vergelijk dat eens met de eenvoud van weleer, waarbij je HTML en CSS kon uploaden met een FTP programma…&lt;/p&gt;
  5566. &lt;p&gt;Weinig ontwikkelaars weten nog precies wat ze doen, met als prototypische voorbeeld het “deze-div-is-een-button” tot gevolg. Of de site werkt zonder JavaScript is iets wat naderhand bedacht wordt, bijvoorbeeld omdat iemand zich druk maakt om zoekmachines die geen JavaScript begrijpen. Het lijkt wel alsof JavaScript noodzakelijk is voor een optimale UX (voor animatie-liefhebbende 40-minners met goed zicht dan).&lt;/p&gt;
  5567. &lt;p&gt;Maar kan waargenomen snelheid niet ook als “progressive enhancement” aangeboden worden? Als iets zonder JavaScript kan werken, moet het toch ook gewoon zonder kunnen werken. Maar pure HTML en CSS net zo snel laten reageren als een moderne “Single-Page-App” / Webpack-compilatie (als het eenmaal geladen is) is niet altijd even gemakkelijk. Je zit dan toch snel van pagina naar pagina te navigeren, waarbij die met wisselende snelheden reageren. Hoe los je dat dan op?&lt;/p&gt;
  5568. &lt;p&gt;De twee technieken die ik in deze blog introduceer komen uit de wereld &lt;a href=&quot;https://rubyonrails.org/&quot;&gt;Ruby on Rails&lt;/a&gt;. Dit is een “back-end framework”, maar deze bibliotheken zijn onafhankelijk van dit framework te gebruiken.&lt;/p&gt;
  5569. &lt;p&gt;Een belangrijke pijler voor de ontwikkelaars achter Ruby on Rails — en dus ook deze projecten — is “convention over configuration”: liever dat iets direct goed werkt dan dat je dagen aan het sleutelen bent om alleen al de basis goed werkend te krijgen. Het is dan ook sterk geopinieerd. Werk ermee zoals het bedoeld is en je kunt je concenteren op de inhoud in plaats van bijzaken. Omdat het idee van progressive enhancement redelijk centraal in het gedachtegoed zit kan ik er goed mee leven.&lt;/p&gt;
  5570. &lt;p&gt;De technieken die ik behandel zijn &lt;a href=&quot;https://github.com/turbolinks/turbolinks&quot;&gt;Turbolinks&lt;/a&gt; (voor het sneller laten laden van volledige pagina’s) en het meer recente Stimulus (voor het verrijken van pagina’s). Beide zijn pragmatische keuzes en relatief kleine verbeteringen die geen gigantische koerswisseling betekenen ten opzichte van “traditioneel” ontwikkelen op basis van HTML en CSS.&lt;/p&gt;
  5571. &lt;h2&gt;Turbolinks&lt;/h2&gt;
  5572. &lt;p&gt;Turbolinks is conceptueel voor een webontwikkelaar wellicht het eenvoudigst te begrijpen van de twee technieken. Wat als je, wanneer je binnen dezelfde site navigeert — in plaats van de browser te vragen de hele pagina te verversen — je de te presenteren HTML pagina pakt en slechts de DOM nodes in de body vervangt (plus onder andere de titel). Het is een idee dat geïnspireerd is op &lt;a href=&quot;https://github.com/defunkt/jquery-pjax&quot;&gt;pjax&lt;/a&gt;, maar pjax was afhankelijk van jQuery.&lt;/p&gt;
  5573. &lt;p&gt;Met deze oplossing hoeven de CSS en JavaScript dan niet meer opnieuw gedownload en geanalyseerd te worden en je kunt bijvoorbeeld JavaScript aan &lt;code&gt;document&lt;/code&gt; binden die langer leeft dan dat enkele pagina bezoek. Wanneer JavaScript aan staat vangt Turbolinks bijna onzichtbaar het openen van links af en toont wanneer mogelijk direct pagina’s uit de cache waardoor er bijna direct resultaat wordt getoond (welke bij een update wordt ververst). Geen JSON API’s of veranderingen op de server nodig. Een slimmigheid aan de voorkant die ‘traditionele’ websites sneller laat werken en tussentijds haperen van bijvoorbeeld externe lettertypen voorkomt.&lt;/p&gt;
  5574. &lt;h2&gt;Implementatie&lt;/h2&gt;
  5575. &lt;p&gt;Om Turbolinks te gebruiken voeg je deze regel toe aan de &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; van je HTML:&lt;/p&gt;
  5576. &lt;pre&gt;&lt;code&gt;&amp;lt;script src=&amp;quot;https://cdn.jsdelivr.net/npm/turbolinks@5.2.0/dist/turbolinks.js&amp;quot; integrity=&amp;quot;sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
  5577. &lt;/code&gt;&lt;/pre&gt;
  5578. &lt;p&gt;&lt;a href=&quot;https://www.npmjs.com/package/turbolinks&quot;&gt;Turbolinks is ook een package in NPM&lt;/a&gt;, dus je kunt ook je favoriete workflow gebruiken met &lt;code&gt;yarn&lt;/code&gt; of &lt;code&gt;npm&lt;/code&gt;.&lt;/p&gt;
  5579. &lt;p&gt;Het is dan:&lt;/p&gt;
  5580. &lt;pre&gt;&lt;code&gt;$ npm install --save turbolinks
  5581. &lt;/code&gt;&lt;/pre&gt;
  5582. &lt;p&gt;en om het te starten:&lt;/p&gt;
  5583. &lt;pre&gt;&lt;code&gt;var Turbolinks = require(&amp;quot;turbolinks&amp;quot;)
  5584. Turbolinks.start()
  5585. &lt;/code&gt;&lt;/pre&gt;
  5586. &lt;p&gt;De eerste pagina aanroep zal met Turbolinks 9.4kB (met gzip) meer wegen.&lt;/p&gt;
  5587. &lt;p&gt;Dat is het. Er zijn vervolgens wat opties om bijvoorbeeld expliciet aan te geven externe bronnen wél opnieuw moeten worden geladen en wanneer een bijzondere pagina niet geladen dient te worden (zoals op &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/12/(https://murb.github.io/turbolinks-stimulus-fronteers/geen_turbolinks.html)&quot;&gt;mijn Turbolinks-demo&lt;/a&gt;)&lt;/p&gt;
  5588. &lt;h2&gt;En “Native”?&lt;/h2&gt;
  5589. &lt;p&gt;Het leuke aan Turbolinks is dat er ook native implementaties mogelijk zijn events koppelen uit webpagina’s. Zo kun je relatief eenvoudig web-gestuurde semi-native apps bouwen. Het gaat echter te ver om hier diep op in te gaan.&lt;/p&gt;
  5590. &lt;h2&gt;Demo&lt;/h2&gt;
  5591. &lt;p&gt;Open de ‘&lt;a href=&quot;https://murb.github.io/turbolinks-stimulus-fronteers/geen_turbolinks.html&quot;&gt;geen Turbolinks&#39; demo&lt;/a&gt;. De menu items gebruiken wel Turbolinks na de eerste klik en wanneer je het netwerkverkeer bekijkt zie je het verschil. Helaas is het verschil met deze zeer compacte statische pagina’s lastig te zien, maar als de CSS, Javascript en andere zaken complexer worden en een pagina soms vertraagd wordt door bijvoorbeeld een database query dan is het verschil in snelheid goed te merken.&lt;/p&gt;
  5592. &lt;h2&gt;Nadelen&lt;/h2&gt;
  5593. &lt;p&gt;De twee belangrijkste nadelen zijn het ontbreken van een &lt;code&gt;document.load&lt;/code&gt; en het feit dat de hele DOM wordt vervangen.&lt;/p&gt;
  5594. &lt;p&gt;&lt;code&gt;document.load&lt;/code&gt; is vooral voor analytics-systemen en libraries zoals jQuery een aandachtspunt: alle functies die gebonden zijn aan events die standaard aangeroepen worden bij het laden van een pagina moeten mogelijk opnieuw worden gebonden aan events die Turbolinks stuurt bij het navigeren naar een andere pagina.&lt;/p&gt;
  5595. &lt;p&gt;Een ander punt om in de gaten te houden is dat de volledige DOM relatief ‘dom’ wordt vervangen. Mooie overgangstransities zijn wat lastiger te doen, al zijn er &lt;a href=&quot;https://github.com/turbolinks/turbolinks/issues/184#issuecomment-451688212&quot;&gt;workarounds&lt;/a&gt; te vinden die de eenvoudige werkwijze vervangen met een implementatie die de inhoud van de nieuwe en de huidige pagina-inhoud vergelijkt en netjes bijsnijdt waar nodig.&lt;/p&gt;
  5596. &lt;h2&gt;Stimulus&lt;/h2&gt;
  5597. &lt;p&gt;Turbolinks brengt op zich al meer een ervaring van een Single Page App zonder gelijk alles wat fijn is aan het maken van ‘traditionele’ pagina’s overboord te gooien, maar het is niet ideaal voor alles; soms wil je wat interactiviteit toevoegen.&lt;/p&gt;
  5598. &lt;p&gt;Er zijn mensen die niet van frameworks houden. Maar wanneer je vaker van project wisselt is de kracht van een framework wel dat ze enige houvast bieden voor andere ontwikkelaars doordat ze goed gedocumenteerd zijn.&lt;/p&gt;
  5599. &lt;p&gt;Terzijde: er zijn ook ontwikkelaars die liever dichter bij webstandaarden blijven en daarom bijvoorbeeld &lt;a href=&quot;https://github.com/w3c/webcomponents/&quot;&gt;WebComponents&lt;/a&gt; omarmen. Ik weet het zelf zozeer nog niet en ben meer gecharmeerd van kleine, comfortabelere stappen: stappen die niet direct het vorige volledig breken zonder polyfills.&lt;/p&gt;
  5600. &lt;p&gt;Stimulus is vooral een handvat om JavaScript-code consistent te laten werken: een logische ordening. Voor dat Stimulus er was en nadat ik gestopt was met jQuery, schreef ik al voor kleinere projecten veelal JavaScript die reageerde op data-attributen, maar wanneer er het aantal acties groter wordt is het onderhoud van een goede naamgeving toch wel lastig. En grotere JavaScript projecten waaraan ik werkte bestonden toch veelal uit de bekendere frameworks die zware maar algemeen bekende structuur oplegden, maar met code dat ook ergens weer wrong omdat het eigenlijk niet de manier is waarop ik het liefst front-end-code zou willen schrijven.&lt;/p&gt;
  5601. &lt;p&gt;Toen ik Stimulus zag was het voor mij dus al snel een aha-moment, al moest ik nog even wachten voordat ik het concreet kon gaan gebruiken op een nieuw project. In plaats van mijn oude manier — waarbij ik acties koppelde aan DOM-nodes middels data-attributen, waarbij al die acties bestonden in dezelfde scope — middels een Controller structuur waarin een omsluitend element aangeeft welke Controller binnen dat element het gedrag bepaalt.&lt;/p&gt;
  5602. &lt;h2&gt;Implementatie&lt;/h2&gt;
  5603. &lt;p&gt;Wil je écht niets te maken hebben met Yarn en/of NPM (als je bijvoorbeeld even wilt experimenteren), doe dan:&lt;/p&gt;
  5604. &lt;pre&gt;&lt;code&gt;&amp;lt;script src=&amp;quot;https://cdn.jsdelivr.net/npm/stimulus@1.1.1/dist/stimulus.umd.js&amp;quot; integrity=&amp;quot;sha256-mUuPeK7DRsoSOwJJcvbcMgWsqAVPJs7X8K/h7NxXQj4=&amp;quot; crossorigin=&amp;quot;anonymous&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
  5605. &lt;/code&gt;&lt;/pre&gt;
  5606. &lt;p&gt;Maar &lt;a href=&quot;https://www.npmjs.com/package/stimulus&quot;&gt;je kunt Stimulus dus ook gewoon op npm vinden&lt;/a&gt;. Stimulus maakt je pagina een kleine 9,81kB zwaarder (met gzip). HTML en JavaScript zijn traditioneel gescheiden. In JavaScript definieer je een Controller:&lt;/p&gt;
  5607. &lt;pre&gt;&lt;code&gt;const application = Stimulus.Application.start()
  5608. &lt;/code&gt;&lt;/pre&gt;
  5609. &lt;pre&gt;&lt;code&gt;application.register(&amp;quot;validator&amp;quot;, class extends Stimulus.Controller {
  5610.  static get targets() {
  5611.    return [ &amp;quot;name&amp;quot; ]
  5612.  }
  5613.  method() {
  5614.    // doe iets
  5615.  }
  5616. }
  5617. &lt;/code&gt;&lt;/pre&gt;
  5618. &lt;p&gt;(Ik gebruik hier de wat uitgebreidere syntax die werkt als je Stimulus hebt geladen via de &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt;-tag)&lt;/p&gt;
  5619. &lt;p&gt;En de HTML die erbij hoort kan iets zijn als:&lt;/p&gt;
  5620. &lt;pre&gt;&lt;code&gt;&amp;lt;form data-validator=&amp;quot;validator&amp;quot;&amp;gt;
  5621.    &amp;lt;label&amp;gt;Naam
  5622.        &amp;lt;input
  5623.            name=&amp;quot;name&amp;quot;
  5624.            data-target=&amp;quot;name&amp;quot;
  5625.            data-action=&amp;quot;change-&amp;gt;method&amp;quot;
  5626.        /&amp;gt;
  5627.    &amp;lt;/label&amp;gt;
  5628. &amp;lt;/form&amp;gt;
  5629. &lt;/code&gt;&lt;/pre&gt;
  5630. &lt;p&gt;Op ieder &lt;code&gt;&#39;change&#39;&lt;/code&gt; event dat het input-veld genereert wordt &lt;code&gt;method()&lt;/code&gt; aangeroepen in de &lt;code&gt;&#39;validator&#39;&lt;/code&gt;-controller.&lt;/p&gt;
  5631. &lt;p&gt;Zoals &lt;a href=&quot;https://stimulusjs.org/handbook/building-something-real&quot;&gt;de makers van Stimulus ook al zeggen&lt;/a&gt;:&lt;/p&gt;
  5632. &lt;blockquote&gt;&lt;/blockquote&gt;
  5633. &lt;p&gt;Ze noemen dat &lt;em&gt;Resilient UI’s&lt;/em&gt;. Ik weet niet of ze het boek &lt;a href=&quot;https://resilientwebdesign.com/&quot;&gt;Resillient Web Design van Jeremy Keith&lt;/a&gt; hebben gelezen, maar het ademt dezelfde geest.&lt;/p&gt;
  5634. &lt;h2&gt;Demo&lt;/h2&gt;
  5635. &lt;p&gt;&lt;a href=&quot;https://murb.github.io/turbolinks-stimulus-fronteers/stimulus.html&quot;&gt;Een Stimulus-demo is hier te vinden&lt;/a&gt; en voel vrij om de broncode te bekijken.&lt;/p&gt;
  5636. &lt;h2&gt;En nu verder?&lt;/h2&gt;
  5637. &lt;p&gt;Ga vooral naar de website om meer te leren over &lt;a href=&quot;https://stimulusjs.org/&quot;&gt;Stimulusjs.org&lt;/a&gt;. Moet je nu alles omgooien om alles met Stimulus te doen? Zeker niet.&lt;/p&gt;
  5638. &lt;h2&gt;Tot slot&lt;/h2&gt;
  5639. &lt;p&gt;Frameworks bepalen hoe je werkt. Dit kan soms bevrijdend zijn, omdat je er sneller door kunt werken en gemakkelijker kunt communiceren met je collega’s. Soms kan het echter ook beperkend zijn, omdat je een heel ecosysteem aan plugins en compilers in wordt getrokken waardoor je na iedere update vaak weer in configuratiebestanden bepaalde details zit te configureren omdat &lt;em&gt;weet jij veel&lt;/em&gt;. Laat staan dat je tijd hebt om je druk te maken over het werkend houden van de isomorphic rendering-setup en toegankelijkheid.&lt;/p&gt;
  5640. &lt;p&gt;De frameworks/bibliotheken/libraries — &lt;em&gt;hoe je het ook wilt noemen&lt;/em&gt; — die ik in deze post heb geïntroduceerd zijn mijns inziens niet van die laatste categorie. Het zijn dusdanig kleine toevoegingen dat het in het frameworkgeweld van vandaag de dag bijna niet meer lijkt op te vallen. Turbolinks is bijna een onzichtbare verbetering wanneer je al gewend was om alle JavaScript-initialisaties niet op de &lt;code&gt;load&lt;/code&gt; en/of &lt;code&gt;DOMContentLoaded&lt;/code&gt;-events te binden (een gewoonte die er wellicht door jQuery in is geslopen). De bibliotheken bieden structuur, maar zijn ook overzichtelijk.&lt;/p&gt;
  5641. &lt;p&gt;Besef ook dat veel van de grotere frameworks van grote organisaties komen. Grote organisaties hebben veelal andere problemen dan kleinere. Misschien lossen die frameworks ook wel problemen op die jij nooit zult ervaren. Groter is niet altijd beter.&lt;/p&gt;
  5642. &lt;h2&gt;Verder experimenteren?&lt;/h2&gt;
  5643. &lt;p&gt;Je kunt mijn demopagina’s clonen met git:&lt;/p&gt;
  5644. &lt;pre&gt;&lt;code&gt;git clone https://github.com/murb/turbolinks-stimulus-fronteers.git
  5645. &lt;/code&gt;&lt;/pre&gt;
  5646. &lt;p&gt;Sorry, geen hot reloading, maar met bijvoorbeeld Python (&lt;code&gt;python -m SimpleHTTPServer 8000&lt;/code&gt;) of Ruby (&lt;code&gt;ruby -rwebrick -e&#39;WEBrick::HTTPServer.new(:Port =&amp;gt; 4000, :DocumentRoot =&amp;gt; Dir.pwd).start&#39;&lt;/code&gt;) kun je er snel mee experimenteren.&lt;/p&gt;
  5647. &lt;p&gt;Over Maarten
  5648. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/maarten.jpeg&quot; alt=&quot;Foto van maarten&quot; class=&quot;floating-portrait&quot; /&gt;
  5649. Maarten Brouwers is freelance ontwikkelaar van webapplicaties. Heeft een liefde voor standaarden en het vinden van De Juiste Manier. Hij combineert dat graag met interesse voor de eindgebruiker, maar zit net zo lief diep in server side Ruby (veelal on Rails) code. Blogt onregelmatig op &lt;a href=&quot;http://murb.nl/&quot;&gt;murb.nl&lt;/a&gt;.
  5650. Maartens donatie gaat naar Bits of Freedom.)&lt;/p&gt;
  5651. </content>
  5652.  </entry>
  5653.  <entry>
  5654.    <title>Hoe ik zelf een browser schreef</title>
  5655.    <link href="https://www.fronteers.nl/nl/blog/2019/12/hoe-ik-zelf-een-browser-schreef"/>
  5656.    <updated>2019-12-09T00:00:00Z</updated>
  5657.    <id>https://www.fronteers.nl/nl/blog/2019/12/hoe-ik-zelf-een-browser-schreef</id>
  5658.    <content xml:lang="nl" type="html">&lt;p&gt;Zelf een browser schrijven klinkt als een slecht idee, zeker als je zelf een front-end developer bent en dus helemaal geen C++ of andere native taal kent. Toch besloot ik een aantal jaar geleden om te kijken of ik het kon en ondertussen is mijn browser nu doorontwikkeld tot serieus product.&lt;/p&gt;
  5659. &lt;h2&gt;Hoe kom je er op?&lt;/h2&gt;
  5660. &lt;p&gt;In 2015 besloot ik, zoals veel web designers en developers, over te stappen van Photoshop naar Sketch. Al heel snel kon ik daar goed mijn weg in vinden en vooral de manier waarop je in Sketch &lt;em&gt;artboards&lt;/em&gt; kon maken vond ik erg fijn, waarmee je designs van verschillende afmetingen naast elkaar kon zetten. Al snel had ik een indeling waarbij alle responsive varianten van een paginaontwerp naast elkaar stonden, waardoor ik een heel goed overzicht kreeg van wat ik nou eigenlijk aan het ontwerpen was.&lt;/p&gt;
  5661. &lt;p&gt;En toen ging ik terug naar de browser, waar ik telkens maar één viewport kon zien en de hele tijd bezig was de afmetingen van de browser of de responsive design tools te veranderen. Je kon niet gemakkelijk even twee afmetingen met elkaar vergelijken en in vergelijking met Sketch voelde dat nogal karig.&lt;/p&gt;
  5662. &lt;p&gt;Rond dezelfde tijd was ik aan het spelen met &lt;a href=&quot;https://electronjs.org/&quot;&gt;Electron&lt;/a&gt;, een framework waarmee je desktop applicaties kunt maken met webtechnieken. Ik besloot om een prototype te ontwikkelen waarin je dezelfde website in meerdere viewports naast elkaar zag, net zoals mijn indeling in Sketch. Na een paar avonden klooien had ik iets wat al best fijn werkte:&lt;/p&gt;
  5663. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/eigen-browser/screenshot-polypane-prototype.png&quot; alt=&quot;Screenshot van het eerste prototype&quot; /&gt;&lt;/p&gt;
  5664. &lt;p&gt;Je kon er niet echt veel mee, maar je kon een URL invullen en die werd dan getoond in meerdere afmetingen. Best cool!&lt;/p&gt;
  5665. &lt;p&gt;Electron bleek een goede keuze te zijn. Niet alleen was het daarmee mogelijk om met mijn bestaande kennis van webontwikkeling een ‘echte’ browser te maken, maar die browser gebruikte ook een up-to-date versie van Chromium en de Chromium developer tools. Hoewel je altijd in andere browsers moet testen, hoefde ik me er geen zorgen over te maken dat bepaalde webtechnieken niet werkte in mijn browser en kon ik de developer tools gebruiken die ik al gewend was.&lt;/p&gt;
  5666. &lt;p&gt;Met dat prototype ging ik zelf werken en al snel merkte ik dat ik veel sneller ontwerpen kon implementeren omdat ik niet meer bezig was met het managen van mijn browserafmetingen en me enkel bezig hoefde te houden met de site. Dit verbeterde proces scheelde me uiteindelijk uren per week.&lt;/p&gt;
  5667. &lt;p&gt;Door het zelf te gebruiken merkte ik ook wat ik miste en al snel begon ik functies toe te voegen: “standaard” browserfuncties zoals navigatie en het tonen van de paginatitel, het kunnen toevoegen van nieuwe schermen en de mogelijkheid om screenshots maken van alle schermen samen (ideaal om naar klanten te sturen).&lt;/p&gt;
  5668. &lt;p&gt;Ik besloot de browser te delen met andere developers en al snel begon ik met hun feedback nieuwe dingen toe te voegen: het in en uit kunnen zoomen van alle schermen in de browser zoals je dat ook zo gemakkelijk in Sketch kan doen, standaard schermafmetingen gebaseerd op zowel populaire telefoons als de media queries van de site zelf, en het synchroniseren van scrollen en hovers tussen alle schermen (zodat als je in het éne schermpje iets deed dat ook in alle andere schermen gebeurde).&lt;/p&gt;
  5669. &lt;h2&gt;Doorontwikkeling&lt;/h2&gt;
  5670. &lt;p&gt;Met iedere functie die ik toevoegde begon ik me meer en meer af te vragen waarom andere browsers dit niet ook doen. Maar Chrome, Firefox en vrienden zijn helemaal niet voor ontwikkelaars gemaakt. Er zijn namelijk veel meer reguliere gebruikers, die helemaal nooit developer tools nodig hebben. Developers zijn stiekem maar een piepkleine doelgroep voor ze en hoewel de developer tools die de browsers hebben echt fantastisch zijn, wordt er in de rest van de browser simpelweg geen rekening met ontwikkelaars gehouden.&lt;/p&gt;
  5671. &lt;p&gt;Door de feedback die ik op mijn browser kreeg was ik er inmiddels achter hoeveel beter een browser kan werken voor front-enders als de &lt;em&gt;hele&lt;/em&gt; interface gericht is op hun werk. Hierdoor besloot ik mijn browser als serieus product aan te gaan bieden. Sinds het begin van dit jaar ben ik fulltime bezig met het doorontwikkelen en mijn ideeën en die van gebruikers te implementeren. Daar zijn nieuwe functies als full-page screenshots, live reloading en device emulation uit gekomen.&lt;/p&gt;
  5672. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/eigen-browser/screenshot-polypane-now.png&quot; alt=&quot;Screenshot van de browser nu&quot; /&gt;&lt;/p&gt;
  5673. &lt;h2&gt;Browsers kunnen zoveel meer&lt;/h2&gt;
  5674. &lt;p&gt;Browsers kunnen veel meer doen voor front-end developers. Een browser heeft zoveel informatie over een site die handig is voor de developer die met een site bezig is, maar die informatie wordt nergens getoond. Denk aan welke responsive afmetingen je allemaal in je CSS gebruikt. Als dat er heel veel zijn of ze zitten dicht op elkaar, dan heb je waarschijnlijk de mogelijkheid om dit drastisch te versimpelen en je CSS beter onderhoudbaar te maken.&lt;/p&gt;
  5675. &lt;p&gt;Veel functies die we nu door middel van allemaal losse scriptjes en tooltjes gebruiken — zoals live reloading, je site vergelijken met het goedgekeurde design en layout debugging met iets als &lt;a href=&quot;http://pesticide.io/&quot;&gt;Pesticide&lt;/a&gt; — zijn veel toegankelijker en gemakkelijker te bedienen als ze direct in een browser zitten.&lt;/p&gt;
  5676. &lt;p&gt;De browser weet ook veel over hoe toegankelijk een site is. Missende alt-teksten, onlogische kopvolgorde en onvoldoende contrast tussen tekst en achtergrond zijn allemaal problemen die je browser weet of kan berekenen. En als &lt;em&gt;renderer&lt;/em&gt; kan je browser ook kleurenblindheid of andere visuele beperkingen simuleren.&lt;/p&gt;
  5677. &lt;p&gt;Goede toegankelijkheid is minstens even belangrijk als een mooi responsive ontwerp en door bovenstaande functies prominent aan te bieden in mijn browser verwacht ik dat developers die functies eerder gebruiken. Nu hoeven ze niet van tevoren al te weten dat je kleurenblindheid kan simuleren of dat je met live reloading nooit meer op die reload-knop hoeft te klikken. Doordat de browser deze opties al in zich heeft kom je er mee in aanraking.&lt;/p&gt;
  5678. &lt;p&gt;Natuurlijk ben ik niet de enige: ook Firefox heeft recentelijk een aantal mooie toegankelijkheidsfuncties toegevoegd. Nadeel blijft wel dat deze “verstopt” zitten achter een tabje in de developer tools en zo verborgen blijven voor de developers die daar niet zelf naar op zoek gaan.&lt;/p&gt;
  5679. &lt;p&gt;Buiten deze functies zijn er zoveel dingen die voor developers belangrijk zijn waar je nu niet bij kan of diep voor in de developer tools moet duiken. Wat dacht je van een mooi overzicht van je cookies en localStorage? Of informatie over je HTTP-verbinding. Misschien gaat iedere link op je site via een 302 redirect omdat je slashes op een andere manier gebruikt dan de server. Als front-end developer wil je dat weten, want iedere 302 maakt je site een paar milliseconden trager. Ik ben dus voorlopig nog niet klaar met de doorontwikkeling.&lt;/p&gt;
  5680. &lt;h2&gt;Een eigen browser maken, gek?&lt;/h2&gt;
  5681. &lt;p&gt;Na het gedaan te hebben kan ik zeggen: ja, wel een beetje. Maar ik heb iets gemaakt waar ik heel trots op ben en waar veel mensen dagelijks profijt van hebben. Het front-end werkveld is in de afgelopen jaren veel complexer geworden en lijkt soms wel dagelijks of zelfs per uur te veranderen. Daardoor is het gemakkelijk om je &lt;em&gt;overwhelmed&lt;/em&gt; te voelen of je vooral bezig te houden met alles wat nieuw is en je minder bezig te houden met hoe effectief je nou zelf werkt. Het verbeteren van je proces — bijvoorbeeld door het gebruiken van een browser die je in je werkzaamheden ondersteunt — kan je uren per week tijdswinst opleveren. Zo gek is dat nog niet.&lt;/p&gt;
  5682. &lt;h2&gt;Over Kilian&lt;/h2&gt;
  5683. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/eigen-browser/kilian.png&quot; alt=&quot;Foto van Kilian&quot; class=&quot;floating-portrait&quot; /&gt;
  5684. Kilian Valkhof is ruim 15 jaar front-end ontwikkelaar en ontwikkelt de browser [Polypane](https://polypane.app/). Fronteersleden kunnen Polypane [met korting gebruiken](/nl/blog/2019/05/25-procent-fronteers-korting-op-nieuwe-browser-polypane).
  5685. Kilians donatie gaat naar Stem op een vrouw.
  5686. </content>
  5687.  </entry>
  5688.  <entry>
  5689.    <title>De full-stack mythe</title>
  5690.    <link href="https://www.fronteers.nl/nl/blog/2019/12/de-full-stack-mythe"/>
  5691.    <updated>2019-12-06T00:00:00Z</updated>
  5692.    <id>https://www.fronteers.nl/nl/blog/2019/12/de-full-stack-mythe</id>
  5693.    <content xml:lang="nl" type="html">&lt;p&gt;Een aantal jaar geleden was het web nog een stuk eenvoudiger. We gebruikten HTML en CSS om onze websites te maken, met eventueel wat JavaScript om het geheel een beetje &lt;em&gt;&lt;em&gt;schwung&lt;/em&gt;&lt;/em&gt; te geven. Had je dynamische content, dan maakte je een back-end in bijvoorbeeld PHP met eventueel een MySQL-database erachter. Als web developer was het niet ongewoon om op deze manier van voor tot achter met een website bezig te zijn.&lt;/p&gt;
  5694. &lt;p&gt;Maar de tijd heeft niet stil gestaan. Onze computers werden beter, onze browsers werden beter en onze tools werden beter. Niet alleen de techniek is veranderd, vooral ook de rol ervan. Het web heeft heeft een centrale plek in de maatschappij gekregen - tot het punt dat we bijna allemaal altijd en overal verbonden zijn - waardoor we hogere eisen stellen aan toegankelijkheid, gebruiksvriendelijkheid, en veiligheid.&lt;/p&gt;
  5695. &lt;p&gt;Ons werk is complexer geworden en er wordt meer van ons verwacht. Ieder aspect van het werk is nu een volwaardig expertisegebied geworden. Waar we eerst web developers waren, zijn we nu UX developers, accessibility experts, back-end engineers, DevOps engineers, ga zo maar door. Het is simpelweg niet meer realistisch om van iemand te verwachten om alle kneepjes van web development te beheersen. En toch zijn er talloze developers - waaronder ikzelf - die zichzelf &#39;full-stack&#39; noemen en zijn er vele vacatures die erom vragen. Hoe zit dat dan?&lt;/p&gt;
  5696. &lt;h2&gt;Wat betekent full-stack?&lt;/h2&gt;
  5697. &lt;p&gt;Een full-stack developer is een &lt;em&gt;jack of all trades&lt;/em&gt; en daarmee tegelijk doorgaans ook een &lt;em&gt;master of none&lt;/em&gt;. Full-stack is een bewuste keuze om &lt;em&gt;niet&lt;/em&gt; te specialiseren, of juist te specialiseren in niet-gespecialiseerd zijn. Als full-stacker ben je breed inzetbaar en kun je systemen in principe van voor tot achter ontwikkelen. In plaats van dieptekennis van één of enkele technieken zorg je dat je kennis hebt van wat er &lt;em&gt;op dat moment&lt;/em&gt; nodig is. Is er een tijdje meer behoefte aan front-endwerk dan ben je een tijdje vooral front-ender, ligt er meer back-endwerk dan ben je even back-ender. Een voordeel dat je ook hebt is dat je als een soort &#39;lijmlaag&#39; kan dienen binnen een team: je kunt eenvoudiger communiceren met verschillende gespecialiseerde developers omdat je een basis deelt.&lt;/p&gt;
  5698. &lt;p&gt;Die afwisseling is alleen niet gratis. Omdat je je aandacht verdeelt over verschillende onderwerpen zul je niet zo productief zijn als een specialist in het gebied, óf je moet concessies doen op kwaliteit. Uiteindelijk is full-stack niets meer dan een compromis tussen kwaliteit en productiviteit aan de ene kant en flexibiliteit aan de andere. En dat laatste wil nog weleens over het hoofd gezien worden. Er heerst bij werkgevers vaak nog de mythe dat je developers kunt vinden die alles kunnen. Vacatures vragen regelmatig om developers die zowel front- als back-end beheersen, want waarom zou je meerdere specialisten inhuren als je ook developers in kunt schakelen die gewoon alles kunnen? Het scheelt gewoon gedoe. Wat ook niet helpt is dat front-end op sommige plekken nog steeds een ondergeschoven kindje is, iets &#39;voor erbij&#39;.&lt;/p&gt;
  5699. &lt;p&gt;Een full-stack developer is niet beter dan een gespecialiseerde developer, en vice versa. Vraag je jezelf af wat voor jou de beste keus is, dan is het enige korte antwoord daarop: &lt;em&gt;&lt;em&gt;It Depends™&lt;/em&gt;&lt;/em&gt;. Het hangt van de situatie af.&lt;/p&gt;
  5700. &lt;h2&gt;De juiste keuze&lt;/h2&gt;
  5701. &lt;p&gt;Voor developers hangt die keuze op dit moment vooral af van persoonlijke voorkeur. We zitten voorlopig nog in een situatie dat er aan vacatures geen tekort is, dus écht verkeerd kun je niet gaan. In alle gevallen moet je zorgen dat zorgen dat je de fundamentele bouwstenen van je vakgebied beheerst. Frameworks en libraries komen en gaan, maar talen en protocollen, bijvoorbeeld HTML, CSS en HTTP, zijn &lt;em&gt;&lt;em&gt;here to stay&lt;/em&gt;&lt;/em&gt; en geven in alle gevallen een stabiele basis om op voort te borduren. Als full-stacker moet je meer fundamentals beheersen, als gespecialiseerde developer bouw je er vooral meer op.&lt;/p&gt;
  5702. &lt;p&gt;Kies je ervoor om full-stack developer te zijn of te worden? Weet dat je niets weet: accepteer dat ieder onderdeel van je werk een complex en dynamisch vakgebied is en dat je nooit alles kunt bijhouden. Denk je daar anders over, dan is dat waarschijnlijk &lt;a href=&quot;https://nl.wikipedia.org/wiki/Dunning-krugereffect&quot;&gt;dunning-kruger&lt;/a&gt; in actie. Er hoeft echter ook niet van je verwacht te worden dat je alles meteen kan en de sleutel tot succes is vooral het kunnen focussen op wat er op dat moment qua skillset nodig is.&lt;/p&gt;
  5703. &lt;p&gt;Ben je werkgever en zoek je naar nieuwe developers? Zoek dan niet automatisch naar full-stack developers omdat dat het makkelijkst lijkt. Wees je bewust van de voor- en nadelen en besluit op basis van wat jij specifiek nodig hebt. Als klein team met onvoorspelbaar werk kun je waarschijnlijk het beste uit de voeten met developers met bredere kennis. Heb je een groter team of is je werklast voorspelbaarder dan heb je waarschijnlijk het meeste aan meer gespecialiseerde ontwikkelaars. Weet je nog niet helemaal wat je nodig hebt, probeer dáár dan eerst achter te komen voordat je een full-stack vacature uitzet waarmee je gespecialiseerdere developers vaak buiten de deur houdt.&lt;/p&gt;
  5704. &lt;h2&gt;Balans&lt;/h2&gt;
  5705. &lt;p&gt;De laatste jaren is &#39;full-stack&#39; binnen de front-endwereld bijna een vies woord geworden, een symbool voor hoe front-end onderschat wordt en voor onrealistische verwachtingen in vacatures. Dat is jammer, want ik denk dat zowel full-stack als meer gespecialiseerde developers een enorme toegevoegde waarde hebben op het web. Persoonlijk haal ik mijn voldoening uit de afwisseling, maar tegelijk werk ik het liefst samen met experts omdat we daardoor veel van elkaar kunnen leren. Uiteindelijk is het vooral belangrijk om hier een balans in te vinden, want daar zal ons werk alleen maar beter van worden.&lt;/p&gt;
  5706. &lt;p&gt;Over Koen
  5707. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/koen.jpeg&quot; alt=&quot;Foto van koen&quot; class=&quot;floating-portrait&quot; /&gt;
  5708. Koen Kivits is een full-stack web developer in Eindhoven. Hij hobbyt op &lt;a href=&quot;https://github.com/koenkivits&quot;&gt;zijn Github&lt;/a&gt;, tweet op &lt;a href=&quot;https://twitter.com/koenkivits&quot;&gt;zijn Twitter&lt;/a&gt; en blogt op &lt;a href=&quot;https://koen.kivits.com/&quot;&gt;zijn website&lt;/a&gt;.
  5709. Koens donatie gaat naar Bits of Freedom.)&lt;/p&gt;
  5710. </content>
  5711.  </entry>
  5712.  <entry>
  5713.    <title>CSS Custom Properties, Cascading Variables en het Einde van de Stijl</title>
  5714.    <link href="https://www.fronteers.nl/nl/blog/2019/12/css-custom-properties-cascading-variables-en-het-einde-van-de-stijl"/>
  5715.    <updated>2019-12-05T00:00:00Z</updated>
  5716.    <id>https://www.fronteers.nl/nl/blog/2019/12/css-custom-properties-cascading-variables-en-het-einde-van-de-stijl</id>
  5717.    <content xml:lang="nl" type="html">&lt;p&gt;Het is al heel lang mogelijk om de CSS-stijl vanuit HTML te bepalen met het &lt;code&gt;style&lt;/code&gt; attribuut:&lt;/p&gt;
  5718. &lt;pre&gt;&lt;code&gt;&amp;lt;div style=&amp;quot;color: red; border: 1px solid red&amp;quot;&amp;gt;Waarschuwing&amp;lt;/div&amp;gt;
  5719. &lt;/code&gt;&lt;/pre&gt;
  5720. &lt;p&gt;Hetzelfde geldt voor JavaScript met de &lt;code&gt;style&lt;/code&gt; property:&lt;/p&gt;
  5721. &lt;pre&gt;&lt;code&gt;element.style = &amp;quot;color: red; border: 1px solid red&amp;quot;;
  5722. &lt;/code&gt;&lt;/pre&gt;
  5723. &lt;p&gt;Dit is erg onhandig, want nu staan de CSS-stijlen verspreid over meerdere bestanden, wat het onderhoud lastig maakt. Wil je een stijl die je vanuit HTML of JavaScript gezet hebt, wijzigen via CSS, dan moet je &lt;code&gt;!important&lt;/code&gt; gebruiken, wat het nog onhandiger maakt. Al snel ontstond de &lt;em&gt;best practice&lt;/em&gt; om alle CSS alleen in CSS-bestanden te beschrijven en &lt;code&gt;style&lt;/code&gt; niet meer te gebruiken, maar stijlen onder te brengen in &lt;code&gt;classes&lt;/code&gt; en die vanuit HTML of JavaScript aan of uit te zetten.&lt;/p&gt;
  5724. &lt;pre&gt;&lt;code&gt;.warning {
  5725.    color: red;
  5726.    border: 1px solid red;
  5727. }
  5728. &lt;/code&gt;&lt;/pre&gt;
  5729. &lt;p&gt;De HTML wordt dan:&lt;/p&gt;
  5730. &lt;pre&gt;&lt;code&gt;&amp;lt;div class=&amp;quot;warning&amp;quot;&amp;gt;Waarschuwing&amp;lt;/div&amp;gt;
  5731. &lt;/code&gt;&lt;/pre&gt;
  5732. &lt;p&gt;En de JavaScript wordt:&lt;/p&gt;
  5733. &lt;pre&gt;&lt;code&gt;element.classList.add(&amp;quot;warning&amp;quot;);
  5734. &lt;/code&gt;&lt;/pre&gt;
  5735. &lt;p&gt;Nu zou ik dit artikel kunnen eindigen met het advies om nooit meer het HTML-attribuut &lt;code&gt;style&lt;/code&gt; en de JavaScript-property &lt;code&gt;style&lt;/code&gt; te gebruiken, maar je had vast al gezien dat dit artikel nog wat langer is. Er zijn namelijk situaties waarin je in JavaScript een waarde berekent die je in een stijl wil gebruiken. Je berekent bijvoorbeeld een kleur of je gebruikt een complexe berekening om een x-positie uit te rekenen. Je kan dan weer de style-property erbij pakken en de &lt;code&gt;color&lt;/code&gt; of de &lt;code&gt;left&lt;/code&gt; properties veranderen. Maar dan heb je weer dezelfde problemen als hierboven beschreven. Wat als je later een ander element ook deze kleur wil geven? En niet &lt;code&gt;left&lt;/code&gt;, maar &lt;code&gt;transform&lt;/code&gt; wil gebruiken? Dan heb je toch weer een probleem.&lt;/p&gt;
  5736. &lt;h2&gt;CSS variabelen&lt;/h2&gt;
  5737. &lt;p&gt;Gelukkig is daar een oplossing voor, die inmiddels door &lt;a href=&quot;https://caniuse.com/#feat=css-variables&quot;&gt;alle moderne browsers&lt;/a&gt; wordt ondersteund: &lt;a href=&quot;https://www.w3.org/TR/css-variables/&quot;&gt;CSS Custom Properties for Cascading Variables&lt;/a&gt;, kortweg CSS variabelen. Hoe werken CSS variabelen? Laten we beginnen met een voorbeeld in CSS:&lt;/p&gt;
  5738. &lt;pre&gt;&lt;code&gt;:root {
  5739.    --warning-color: orange;
  5740. }
  5741.  
  5742. .warning {
  5743.    color: var(--warning-color, red);
  5744.    border: 1px solid var(--warning-color, red);
  5745. }
  5746. &lt;/code&gt;&lt;/pre&gt;
  5747. &lt;p&gt;Binnen CSS kan je dus een custom property zetten en die op verschillende plekken weer gebruiken. Het aanpassen van de waarde is hierdoor veel eenvoudiger geworden. Een CSS custom property zet je op dezelfde manier als een CSS property, maar ze beginnen altijd met &#39;--&#39;. Het uitlezen doe je met &lt;code&gt;var(--varname)&lt;/code&gt;. De optionele tweede parameter van &lt;code&gt;var()&lt;/code&gt;, in het voorbeeld hierboven &lt;code&gt;red&lt;/code&gt;, is de default waarde voor het geval de variabele &lt;code&gt;--warning-color&lt;/code&gt; (nog) niet is gezet. Het is belangrijk om te weten dat deze variabelen dezelfde regels voor cascading volgen als alle andere CSS properties, vandaar ook de naam Cascading Variables.&lt;/p&gt;
  5748. &lt;h2&gt;Custom Properties of Variables?&lt;/h2&gt;
  5749. &lt;p&gt;De termen custom properties en variables lijken in teksten over dit onderwerp door elkaar te worden gebruikt, maar wat is nou wat? In CSS heb je een declaratie zoals &lt;code&gt;color: white&lt;/code&gt;. Links van de dubbele punt staat de property en rechts daarvan de waarde. Als de property met &#39;--&#39; begint, is het altijd een custom property. Als je deze aan de rechterkant van de dubbele punt gebruikt in een &lt;code&gt;var()&lt;/code&gt;-functie, dan is het een variabele.&lt;/p&gt;
  5750. &lt;h2&gt;JavaScript&lt;/h2&gt;
  5751. &lt;p&gt;In JavaScript is het mogelijk om een waarde te geven aan een CSS custom property waarna je in CSS precies kan bepalen wat je ermee doet. Het veranderen van de property &lt;code&gt;--warning-color&lt;/code&gt; doe je in JavaScript als volgt:&lt;/p&gt;
  5752. &lt;pre&gt;&lt;code&gt;element.style.setProperty(&amp;quot;--warning-color&amp;quot;, &amp;quot;maroon&amp;quot;);
  5753. &lt;/code&gt;&lt;/pre&gt;
  5754. &lt;p&gt;De waarschuwing uit het eerdere voorbeeld zal nu kastanjebruin worden. Om een variabele in het hele document te kunnen gebruiken, zet je deze op het root element:&lt;/p&gt;
  5755. &lt;pre&gt;&lt;code&gt;document.documentElement.style.setProperty(&amp;quot;--warning-color&amp;quot;, &amp;quot;maroon&amp;quot;);
  5756. &lt;/code&gt;&lt;/pre&gt;
  5757. &lt;p&gt;Was de strekking van dit artikel niet om nooit meer &lt;code&gt;style&lt;/code&gt; te gebruiken? Nu doen we het toch. Oké, we laten dan één uitzondering toe, namelijk om &lt;code&gt;setProperty()&lt;/code&gt; te kunnen gebruiken.&lt;/p&gt;
  5758. &lt;h2&gt;Rekenen&lt;/h2&gt;
  5759. &lt;p&gt;Met CSS variabelen kan je ook rekenen. Stel, je hebt een box waarvan in JavaScript is bepaald dat je die 80 pixels van de linkerkant wil weergeven:&lt;/p&gt;
  5760. &lt;pre&gt;&lt;code&gt;boxElement.style.setProperty(&amp;quot;--box-left&amp;quot;, &amp;quot;80px&amp;quot;);
  5761. &lt;/code&gt;&lt;/pre&gt;
  5762. &lt;p&gt;Maar in je CSS weet je dat je daar ook de linkermarge bij moet optellen, die je ook in een CSS-variabele hebt opgeslagen. Dan kan je CSS er als volgt uitzien:&lt;/p&gt;
  5763. &lt;pre&gt;&lt;code&gt;:root {
  5764.    --margin-left: 10px;
  5765. }
  5766.  
  5767. .box {
  5768.    position: relative;
  5769.    left: calc(var(--box-left) + var(--margin-left));
  5770. }
  5771. &lt;/code&gt;&lt;/pre&gt;
  5772. &lt;p&gt;De &lt;code&gt;left&lt;/code&gt;-property van de box wordt nu &lt;code&gt;90px&lt;/code&gt;.&lt;/p&gt;
  5773. &lt;h2&gt;Geen eenheid&lt;/h2&gt;
  5774. &lt;p&gt;Nog beter is om in de &lt;code&gt;setProperty&lt;/code&gt;-functie geen eenheid zoals &lt;code&gt;px&lt;/code&gt; te gebruiken. Die kan je het best bepalen waar dat hoort: in de CSS. Neem bijvoorbeeld een voortgangsindicator die van 0 naar 100 loopt.&lt;/p&gt;
  5775. &lt;pre&gt;&lt;code&gt;document.documentElement.style.setProperty(&amp;quot;--progress&amp;quot;, bytes/totalBytes * 100);
  5776. &lt;/code&gt;&lt;/pre&gt;
  5777. &lt;p&gt;Je CSS kan er dan zo uitzien:&lt;/p&gt;
  5778. &lt;pre&gt;&lt;code&gt;.progress-box {
  5779.    background-color: deepskyblue;
  5780.    width: calc(var(--progress) * 0.6rem);
  5781.    height: 1rem;
  5782. }
  5783. &lt;/code&gt;&lt;/pre&gt;
  5784. &lt;p&gt;Als de voortgang 40% is, dan zal de breedte gelijk zijn aan 40 × 0,6rem = 24rem.&lt;/p&gt;
  5785. &lt;h2&gt;Media queries&lt;/h2&gt;
  5786. &lt;p&gt;CSS variabelen zijn heel goed te gebruiken in media queries. Bijvoorbeeld om op hele kleine schermen alle marges klein te maken om alles nog goed te laten passen:&lt;/p&gt;
  5787. &lt;pre&gt;&lt;code&gt;:root {
  5788.    --margin: 8px;
  5789. }
  5790.  
  5791. @media (max-width: 360px) {
  5792.    :root {
  5793.        --margin: 2px;
  5794.    }
  5795. }
  5796.  
  5797. .some-text-box {
  5798.  margin: var(--margin);
  5799. }
  5800. &lt;/code&gt;&lt;/pre&gt;
  5801. &lt;h2&gt;Theming&lt;/h2&gt;
  5802. &lt;p&gt;Je kan een theme natuurlijk heel eenvoudig houden met een voor- en achtergrondkleur en een paar classes. Maar als je sommige teksten, randen of iconen bepaalde accentkleuren wil geven, dan wordt het met op de oude manier snel erg omslachtig. CSS variabelen zijn hier juist heel geschikt voor. Ook bijvoorbeeld voor &lt;em&gt;dark mode&lt;/em&gt;, waarbij de dark/lightmodus van de pagina meeverandert met die van het besturingssysteem:&lt;/p&gt;
  5803. &lt;pre&gt;&lt;code&gt;:root {
  5804.  --background: white;
  5805.  --text: black;
  5806.  --accent: lightblue;
  5807. }
  5808.  
  5809. @media (prefers-color-scheme: dark) {
  5810.    :root {
  5811.      --background: black;
  5812.      --text: white;
  5813.      --accent: purple;
  5814.    }
  5815. }
  5816.  
  5817. html {
  5818.  color: var(--text);
  5819.  background-color: var(--background);
  5820. }
  5821.  
  5822. .some-box {
  5823.  border: 3px solid var(--accent);
  5824. }
  5825. &lt;/code&gt;&lt;/pre&gt;
  5826. &lt;p&gt;Je kan op deze manier met verschillende kleurenpaletten werken en deze in de CSS toekennen aan verschillende properties, in dit geval de &lt;code&gt;border&lt;/code&gt;.&lt;/p&gt;
  5827. &lt;h2&gt;Variëren met kleuren&lt;/h2&gt;
  5828. &lt;p&gt;Met een beetje creativiteit kan je ook kleuren variëren. Dat werkt het beste als je &lt;code&gt;hsl()&lt;/code&gt; of &lt;code&gt;hsla()&lt;/code&gt;-notatie gebruikt. Je kan bijvoorbeeld de tint (hue) vastleggen in een variabele en in de CSS allerlei variaties definiëren:&lt;/p&gt;
  5829. &lt;pre&gt;&lt;code&gt;:root {
  5830.    --theme-hue: 120; /* 120 is green */
  5831. }
  5832.  
  5833. .themed-box {
  5834.    color: hsl(var(--theme-hue), 50%, 90%);
  5835.    background-color: hsl(var(--theme-hue), 50%, 30%);
  5836.    border: 2px solid hsl(var(--theme-hue), 100%, 50%);
  5837. }
  5838. &lt;/code&gt;&lt;/pre&gt;
  5839. &lt;p&gt;Door nu enkel &lt;code&gt;--theme-hue&lt;/code&gt; te veranderen van bijvoorbeeld 120 (groen) in 0 (rood), verandert ook de stijl van &lt;code&gt;.themed-box&lt;/code&gt;, inclusief alle variaties op die kleur. Natuurlijk kan je op deze manier ook de verzadiging (saturation) wijzigen om een pagina/element feller of ingetogener te maken. Of de helderheid (lightness) wijzigen om een pagina lichter of donkerder te maken. Combineer deze techniek met calc, media queries, theming en dark mode en er gaat een nieuwe wereld open. Je zal buiten vast een regenboog zien. En misschien wel een eenhoorn!&lt;/p&gt;
  5840. &lt;h2&gt;Browser variabelen&lt;/h2&gt;
  5841. &lt;p&gt;Naast &lt;code&gt;var()&lt;/code&gt; voor het uitlezen van CSS-variabelen, bestaat er ook &lt;code&gt;env()&lt;/code&gt; voor het uitlezen van browser-omgevingsvariabelen. Op dit moment (2019) zijn er vier van deze omgevingsvariabelen
  5842. gedefinieerd: &lt;code&gt;safe-area-inset-top&lt;/code&gt;, &lt;code&gt;safe-area-inset-right&lt;/code&gt;, &lt;code&gt;safe-area-inset-bottom&lt;/code&gt; en &lt;code&gt;safe-area-inset-left&lt;/code&gt;. Deze vier variabelen geven de afstand van de rand aan waarbinnen de inhoud geheel te bekijken is. Denk bijvoorbeeld aan een rond horloge met daarop een rechthoek met tekst. De variabelen geven de afstanden aan van de rechthoek tot de randen van het scherm. Een voorbeeld in CSS:&lt;/p&gt;
  5843. &lt;pre&gt;&lt;code&gt;.safe-box {
  5844.    position: absolute;
  5845.    top: env(safe-area-inset-top, 8px);
  5846.    right: env(safe-area-inset-right, 8px);
  5847.    bottom: env(safe-area-inset-bottom, 8px);
  5848.    left: env(safe-area-inset-left, 8px);
  5849. }
  5850. &lt;/code&gt;&lt;/pre&gt;
  5851. &lt;p&gt;Bij &lt;code&gt;env()&lt;/code&gt; is, net als bij &lt;code&gt;var()&lt;/code&gt;, de tweede parameter de default parameter als de variabele niet is gezet.&lt;/p&gt;
  5852. &lt;h2&gt;Preprocessors&lt;/h2&gt;
  5853. &lt;p&gt;Ik heb meerdere projecten gezien waarbij Sass of Less alleen werd gebruikt om een rij waarden aan variabelen toe te kennen om die vervolgens in de rest van de style sheets te gebruiken. Is het dan niet handiger om de preprocessor weg te laten en CSS variabelen te gebruiken? Ik denk van wel. In het buildproces sla je een stap over en bijvoorbeeld het debuggen wordt een stuk makkelijker.&lt;/p&gt;
  5854. &lt;h2&gt;Internet Explorer 11&lt;/h2&gt;
  5855. &lt;p&gt;En Internet Explorer 11 dan? Nee, die ondersteunt helaas geen CSS variabelen. In oktober 2019 had IE11 wereldwijd een &lt;a href=&quot;https://gs.statcounter.com/browser-version-market-share#monthly-201811-201910&quot;&gt;marktaandeel van 1,8%&lt;/a&gt;. Wil je deze browser (en andere oude browsers) toch ondersteunen, dan kan je &lt;em&gt;graceful degradation&lt;/em&gt; toepassen, wat eigenlijk altijd wel een goed idee is:&lt;/p&gt;
  5856. &lt;pre&gt;&lt;code&gt;.warning {
  5857.    color: red;
  5858.    color: var(--warning-color, red);
  5859.    border: 1px solid red;
  5860.    border: 1px solid var(--warning-color, red);
  5861. }
  5862. &lt;/code&gt;&lt;/pre&gt;
  5863. &lt;p&gt;In dit geval wordt de waarschuwing in oude browsers altijd rood weergegeven. Het is misschien niet precies de kleur die de ontwerper had bedacht, maar een gebruiker van zo&#39;n oude browser is al blij als een website bruikbaar is.&lt;/p&gt;
  5864. &lt;h2&gt;Toekomst&lt;/h2&gt;
  5865. &lt;p&gt;Lea Verou wilde ook diagrammen in CSS kunnen tekenen, inclusief schuine verbindingslijnen. Dat gaat nog niet goed met alleen &lt;code&gt;calc()&lt;/code&gt;, want daar heb je ook trigonometrische functies voor nodig. Op het moment van schrijven, in 2019, wordt er &lt;a href=&quot;https://github.com/w3c/csswg-drafts/issues/2331&quot;&gt;gewerkt&lt;/a&gt; om de functies &lt;code&gt;sin()&lt;/code&gt;, &lt;code&gt;cos()&lt;/code&gt;, &lt;code&gt;tan()&lt;/code&gt;, &lt;code&gt;acos()&lt;/code&gt;, &lt;code&gt;asin()&lt;/code&gt;, &lt;code&gt;atan()&lt;/code&gt;, &lt;code&gt;atan2()&lt;/code&gt;, &lt;code&gt;hypot()&lt;/code&gt;, &lt;code&gt;sqrt()&lt;/code&gt; en &lt;code&gt;pow()&lt;/code&gt; aan CSS toe te voegen.&lt;/p&gt;
  5866. &lt;h2&gt;Breinbreker&lt;/h2&gt;
  5867. &lt;p&gt;Tot slot een leuk stukje code uit een &lt;a href=&quot;https://twitter.com/micahgodbolt/status/1131626097349496833?s=20&quot;&gt;tweet van Micah Godbolt&lt;/a&gt; om even over na te denken. Welke kleur is &amp;quot;Hello World&amp;quot;?&lt;/p&gt;
  5868. &lt;pre&gt;&lt;code&gt;&amp;lt;style&amp;gt;
  5869.  #blue { --myVar: blue }
  5870.  .red { --myVar: red }
  5871. &amp;lt;/style&amp;gt;
  5872.  
  5873. &amp;lt;div style=&#39;--myVar: pink&#39;&amp;gt;
  5874.  &amp;lt;div id=&#39;blue&#39;&amp;gt;
  5875.    &amp;lt;div class=&#39;red&#39;&amp;gt;
  5876.      &amp;lt;span style=&#39;color: var(--myVar)&#39;&amp;gt;Hello World&amp;lt;/span&amp;gt;
  5877.    &amp;lt;/div&amp;gt;
  5878.  &amp;lt;/div&amp;gt;
  5879. &amp;lt;/div&amp;gt;
  5880. &lt;/code&gt;&lt;/pre&gt;
  5881. &lt;p&gt;Bedenk eerst zelf wat je antwoord zal zijn en kijk daarna pas naar het &lt;a href=&quot;https://codepen.io/edwinm/pen/bGGOdpa&quot;&gt;antwoord&lt;/a&gt;. Aan de stembalkjes in de &lt;a href=&quot;https://twitter.com/micahgodbolt/status/1131626097349496833?s=20&quot;&gt;tweet&lt;/a&gt; te zien, zitten er nogal wat mensen naast. Bedenk ook waarom het juiste antwoord het juiste antwoord is.&lt;/p&gt;
  5882. &lt;h2&gt;Over Edwin Martin&lt;/h2&gt;
  5883. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/edwin.jpg&quot; alt=&quot;Foto van Edwin Martin&quot; class=&quot;floating-portrait&quot; /&gt;
  5884. Edwin is freelance frontend webontwikkelaar en woont in Hilversum. Hij [blogt](https://bitstorm.org/), twittert in het Engels over frontendzaken op [@edwinmdev](https://mobile.twitter.com/edwinmdev/) en schrijft af en toe [stukjes code](https://github.com/edwinm).
  5885. Edwins donatie gaat naar Bits of Freedom.
  5886. </content>
  5887.  </entry>
  5888.  <entry>
  5889.    <title>8 Rare Tips Waarvan Toegankelijkheidsexperts Niet Willen Dat U Ze Weet!</title>
  5890.    <link href="https://www.fronteers.nl/nl/blog/2019/12/8-rare-tips-waarvan-toegankelijkheidsexperts-niet-willen-dat-u-ze-weet"/>
  5891.    <updated>2019-12-04T00:00:00Z</updated>
  5892.    <id>https://www.fronteers.nl/nl/blog/2019/12/8-rare-tips-waarvan-toegankelijkheidsexperts-niet-willen-dat-u-ze-weet</id>
  5893.    <content xml:lang="nl" type="html">&lt;p&gt;&lt;em&gt;Nummer 4 Zal Je Een Epileptische Aanval Geven!&lt;/em&gt;&lt;/p&gt;
  5894. &lt;p&gt;Deze titel is geschreven als een zogenaamde &lt;a href=&quot;https://nl.wikipedia.org/wiki/Clickbait&quot;&gt;clickbait-titel&lt;/a&gt; en ironisch bedoeld. Clickbait-titels presenteren vaak misleidende tips als een vorm van krachtige geheime kennis. In dit geval willen toegankelijkheidsexperts niet dat je deze tips kent omdat ze een slecht advies zijn. Dit zijn tips die je niet moet volgen.&lt;/p&gt;
  5895. &lt;h2&gt;1. Het gebruik van afkortingen verbetert je leesbaarheidsscore&lt;/h2&gt;
  5896. &lt;blockquote&gt;
  5897. &lt;p&gt;&lt;em&gt;&amp;quot;Een goede FK-score is belangrijk voor A11Y vanwege de U in WCAG&#39;s POUR.&amp;quot;&lt;/em&gt;&lt;/p&gt;
  5898. &lt;/blockquote&gt;
  5899. &lt;p&gt;Het maken van begrijpelijke inhoud is een kernprincipe van de Web Content Accessibility Guidelines (WCAG). Leesbaarheid is een groot deel van het creëren van begrijpelijke inhoud. Ik heb zelf vaak moeite om eenvoudige taal te schrijven. Ik gebruik meestal lange woorden en zinnen die eindeloos lijken. Om dingen gemakkelijker te maken, gebruiken ik en vele anderen een leesbaarheidstool. Ik typ dit momenteel in &lt;a href=&quot;http://hemingwayapp.com/&quot;&gt;Hemingway&lt;/a&gt;: een eenvoudige schrijfapp die een leesbaarheidsscore toont. Deze score is gebaseerd op een &lt;a href=&quot;https://nl.wikipedia.org/wiki/Leesbaarheid&quot;&gt;Flesch – Kincaid leesbaarheidstest&lt;/a&gt;. De test neemt het totale aantal zinnen, woorden en lettergrepen, en berekent er een score uit.&lt;/p&gt;
  5900. &lt;p&gt;Door mijn score in de gaten te houden, kan ik me concentreren op het doel van mijn tekst: een boodschap duidelijk overbrengen. Er zijn echter enkele valkuilen. Woorden met weinig lettergrepen scoren beter dan woorden met veel lettergrepen. Afkortingen worden vaak geteld als woorden met weinig lettergrepen. Zoals we kunnen leren van WCAG: &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/abbreviations.html&quot;&gt;afkortingen kunnen lezers verwarren&lt;/a&gt;. Dus hoewel afkortingen een hogere score geven kunnen ze vaak beter worden vermeden. Hetzelfde geldt voor een andere voorkeur van leesbaarheidsscores. Je krijgt een betere score door korte zinnen te gebruiken. Maar wanneer je woorden begint weg te laten om zinnen in te korten, is het eindresultaat mogelijk minder leesbaar.&lt;/p&gt;
  5901. &lt;p&gt;Een Flesch-Kincaid-score is een geweldige maatstaf om je te concentreren op leesbaarheid, maar het is niet het uiteindelijke doel van je tekst.&lt;/p&gt;
  5902. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/04-12-2019-1.png&quot; alt=&quot;Een heel smal bord met de tekst &amp;quot;geen alcohol voorbij dit punt&amp;quot;. Er zijn gemiddeld 2 letters op elke regel. De tekst is vrijwel onleesbaar en ziet eruit als een lijst met afkortingen.&quot; /&gt;&lt;/p&gt;
  5903. &lt;h2&gt;2. Pagina&#39;s die WAI-ARIA gebruiken zijn minder toegankelijk&lt;/h2&gt;
  5904. &lt;p&gt;In februari 2019 deed WebAIM een geautomatiseerde toegankelijkheidstest op 1.000.000 webpagina&#39;s. Zo&#39;n enorme dataset geeft veel inzicht in de huidige status van het web. Er zijn veel &lt;a href=&quot;https://webaim.org/projects/million/&quot;&gt;interessante conclusies&lt;/a&gt; te trekken uit de resultaten. Eén daarvan was: &amp;quot;Startpagina&#39;s met ARIA hadden gemiddeld 26.7 meer detecteerbare fouten dan pagina&#39;s zonder ARIA&amp;quot;. Dat is een behoorlijk demotiverende statistiek.&lt;/p&gt;
  5905. &lt;p&gt;Ik vind het echter behoorlijk begrijpelijk. ARIA is een complexe techniek. Een van de belangrijkste toepassingen voor ARIA is dat ontwikkelaars hun eigen toegankelijke widgets en elementen kunnen maken die niet beschikbaar zijn als native HTML-elementen. Dit betekent dat wanneer je ARIA op een pagina vindt, dit waarschijnlijk wordt gebruikt om een ​​technisch complex component te maken. Met complexe componenten neemt de kans op problemen aanzienlijk toe.&lt;/p&gt;
  5906. &lt;p&gt;Moet je ARIA dan niet gebruiken? Nou &lt;a href=&quot;https://www.w3.org/TR/using-aria/&quot;&gt;als je het niet nodig hebt, gebruik het dan niet&lt;/a&gt;.Maar in sommige gevallen heb je misschien geen andere optie. Er is geen &lt;code&gt;&amp;lt;tablist&amp;gt;&lt;/code&gt; of &lt;code&gt;&amp;lt;tabpanel&amp;gt;&lt;/code&gt; in HTML. De &lt;a href=&quot;https://www.w3.org/TR/wai-aria-practices/&quot;&gt;ARIA Authoring Practices&lt;/a&gt; laten een geweldige manier zien om zo&#39;n Tab-widget te bouwen. Maar hun voorbeeld zal niet volstaan ​​zonder aria.&lt;/p&gt;
  5907. &lt;p&gt;De echte tip is niet om ARIA op zichzelf te vermijden, maar om het gebruik van ARIA te vermijden in situaties waar dit niet nodig is.&lt;/p&gt;
  5908. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/04-12-2019-2.png&quot; alt=&quot;Een kleine papieren paraplu bedekt nauwelijks een open kroonsteen met electriciteitsdraden. Het vormt een hopeloos schild tegen regen.&quot; /&gt;&lt;/p&gt;
  5909. &lt;h2&gt;3. Geautomatiseerde tests dekken slechts 20% van WCAG&lt;/h2&gt;
  5910. &lt;p&gt;Veel cijfers worden rondgeslingerd in gesprekken en presentaties over geautomatiseerde toegankelijkheid. En of je nou denkt dat tests 10% tot 30% van de mogelijke problemen dekken, of 20% van de WCAG-criteria, het maakt niet echt uit.&lt;/p&gt;
  5911. &lt;p&gt;Elk probleem gevonden door een geautomatiseerde test kost 0 moeite. Dat is het belangrijke nummer. Dit zijn problemen zonder onderzoekskosten, beschikbaar op elk punt van een development life cycle. Daarnaast kan 20% van de WCAG criteria de oorzaak zijn van 60% van je problemen. Geautomatiseerd testen vindt het laaghangende fruit. Mijn ervaring is dat laaghangend fruit het meest voorkomende soort fruit is.&lt;/p&gt;
  5912. &lt;p&gt;Voeg een handmatige toetsenbordtest toe aan je automatische test en je zal waarschijnlijk de overgrote meerderheid van je problemen vinden. Een handmatige toetsenbordtest bestaat uit het volgende:&lt;/p&gt;
  5913. &lt;ol&gt;
  5914. &lt;li&gt;Ga door je pagina met de &lt;tab&gt; -toets.&lt;/tab&gt;&lt;/li&gt;
  5915. &lt;li&gt;Zorg ervoor dat elk interactief element kan worden bereikt.&lt;/li&gt;
  5916. &lt;li&gt;Zorg ervoor dat elk interactief element kan worden gebruikt.&lt;/li&gt;
  5917. &lt;li&gt;Zorg ervoor dat de volgorde logisch is.&lt;/li&gt;
  5918. &lt;li&gt;Zorg dat de focus zichtbaar is.&lt;/li&gt;
  5919. &lt;li&gt;Doe hetzelfde in omgekeerde volgorde met &lt;shift&gt; + &lt;tab&gt;.&lt;/tab&gt;&lt;/shift&gt;&lt;/li&gt;
  5920. &lt;/ol&gt;
  5921. &lt;p&gt;Gefeliciteerd, je kan nu moeiteloos veel problemen vinden!&lt;/p&gt;
  5922. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/04-12-2019-3.png&quot; alt=&quot;Een betegelde muur heeft een uitsparing in de vorm van een wastafel en zijn silhouette. De wasbak was er duidelijk eerder dan de muur.&quot; /&gt;&lt;/p&gt;
  5923. &lt;h2&gt;4. Je kan een toegankelijk alternatief aanbieden&lt;/h2&gt;
  5924. &lt;p&gt;WCAG heeft een soort ontsnappingsmechanisme voor mensen die van uitvluchten houden. Wanneer je een pagina hebt die niet conformeert aan WCAG, kun je een &lt;a href=&quot;https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-conforming-alt-versions-head&quot;&gt;‘conforme alternatieve versie&#39;&lt;/a&gt; aanbieden. Het moet dezelfde informatie en functionaliteit bieden. Het moet bereikbaar zijn op een manier die geen barrières kent. Een &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold.html&quot;&gt;constant knipperende&lt;/a&gt; pagina met een link naar een overeenkomstige alternatieve versie is geen oplossing. Knipperende pagina&#39;s kunnen epileptische aanvallen veroorzaken. Een bezoeker die aanvallen van lichtflitsen ervaart zal daar waarschijnlijk last van hebben voordat die de alternatieve versie bereikt.&lt;/p&gt;
  5925. &lt;p&gt;Als je een conforme pagina kunt bouwen, waarom zou je dan toch proberen om een ​​alternatieve versie te maken? Het is gemakkelijk twee keer het werk, wat niemand leuk vindt. Maar het is ook zonde voor je gebruikers. Het verbergt alle toegankelijkheidsverbeteringen voor mensen die zich mogelijk niet identificeren als gehandicapt. Ze kunnen echter wel profiteren van deze verbeteringen. Een opgelost toegankelijkheidsprobleem betekent vaak een verbeterde gebruikerservaring voor iedereen. Door iedereen dezelfde inclusief ontworpen ervaring te geven, geef je mensen met een handicap de bevestiging dat ze erbij horen. Ze zijn niet een alternatieve versie die verborgen zit achter een link.&lt;/p&gt;
  5926. &lt;h2&gt;5. Schrijf uitgebreide aria-labels voor blinden&lt;/h2&gt;
  5927. &lt;p&gt;Helaas ben ik wel eens labels tegengekomen die specifiek geschreven waren voor mensen met een visuele beperking. Een voorbeeld was iets wat eenvoudige navigatie op een website had moeten zijn. Visueel had het duidelijke labels en het was eenvoudig te gebruiken. Het bevatte links met beknopte namen die overeenkwamen met hun bestemming, zoals &#39;home&#39; en &#39;instellingen&#39;. Het gebruik van een screen reader was echter een heel andere ervaring. Het menu had een label dat klonk als: &amp;quot;Dit hoofdmenu is waar u de website kunt navigeren&amp;quot;. De link naar instellingen was gelabeld met: &amp;quot;Met de instellingenpagina kunt u dingen wijzigen zoals uw accountnaam of contactgegevens&amp;quot;.&lt;/p&gt;
  5928. &lt;p&gt;Hoewel goed bedoeld, helpt het niemand. Blind zijn betekent niet dat je niet weet waar een menu voor is, of wat een instellingenpagina je kan bieden. Door mensen te behandelen alsof ze hulpeloos zijn, zullen ze zich hulpeloos voelen. Het is een beetje de mansplaining van de toegankelijkheid. Ablesplaining?&lt;/p&gt;
  5929. &lt;p&gt;Bij het schrijven van zogenaamde ‘accessible names’ schrijf je &lt;a href=&quot;https://www.w3.org/TR/wai-aria-practices-1.1/#naming_effectively&quot;&gt;korte functionele aria-labels&lt;/a&gt; die mensen snel kunnen onderscheiden. &lt;a href=&quot;https://adrianroselli.com/2019/10/stop-giving-control-hints-to-screen-readers.html&quot;&gt;Gebruiksinstructies zijn ook niet nodig&lt;/a&gt; .&lt;/p&gt;
  5930. &lt;h2&gt;6. Slechts een klein aantal van onze klanten heeft een handicap&lt;/h2&gt;
  5931. &lt;p&gt;Dit is een misvatting die me altijd blijft verbazen. Meer dan 15% van de wereldbevolking heeft een handicap. Wanneer meer dan 1 miljard mensen problemen hebben met toegang tot digitale informatie en diensten, noemen we dat niet een klein aantal.&lt;/p&gt;
  5932. &lt;p&gt;Misschien heb je inderdaad een website met weinig gehandicapte bezoekers. Heb je overwogen dat dit eigenlijk een goede reden is om het toegankelijk te maken? Vergroot je bereik. Onderscheid je van anderen. De &lt;a href=&quot;https://www.w3.org/WAI/business-case/&quot;&gt;business cases voor toegankelijkheid&lt;/a&gt; zijn er genoeg.&lt;/p&gt;
  5933. &lt;p&gt;De discussie mag echter nooit over het aantal mensen gaan. Praten over cijfers wekt de indruk dat er ergens na veel rekenen, er een redelijke hoeveelheid mensen is die je wel wil discrimineren en uitsluiten. Als iemand je om cijfers vraagt, vertel diegene dan dat het de verkeerde vraag is om te stellen. Zelfs al zijn de aantallen klein, ze doen er niet toe.&lt;/p&gt;
  5934. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/04-12-2019-4.png&quot; alt=&quot;Een parkeerplek die is gemarkeerd als toegankelijk is omgeven door een aaneengesloten stoeprand&quot; /&gt;&lt;/p&gt;
  5935. &lt;h2&gt;7. De standaard focusindicator is veilig&lt;/h2&gt;
  5936. &lt;p&gt;Veilig is hier een gevaarlijk woord, maar technisch gezien is een standaard focusindicator &lt;a href=&quot;https://www.w3.org/WAI/WCAG21/Techniques/general/G165&quot;&gt;toegestaan&lt;/a&gt; door WCAG. Als je puur en alleen WCAG op de letter wil volgen, ben je hier klaar (hoewel sommige mensen dit succescriterium van WCAG zo interpreteren dat het wijzigen van de achtergrondkleur de standaardfocusindicator ongeldig kan maken).&lt;/p&gt;
  5937. &lt;p&gt;De kans is groot dat de standaardfocusindicator heel moeilijk te zien is op delen van je website. Je kan waarschijnlijk iets veel beters maken dan deze standaardindicator. Als je enige doel is om WCAG te halen, doe je het toegankelijkheidsequivalent van &amp;quot;&lt;a href=&quot;https://en.wikipedia.org/wiki/Teaching_to_the_test&quot;&gt;Teaching to the test&lt;/a&gt;&amp;quot;. Je scoort misschien goed op de korte termijn, maar als je erkent dat WCAG slechts een hulpmiddel is en geen doel, kunnen er op de lange termijn veel grotere winsten worden behaald.&lt;/p&gt;
  5938. &lt;p&gt;Het is wel goed om te weten dat &lt;a href=&quot;https://blogs.windows.com/msedgedev/2019/10/15/form-controls-microsoft-edge-chromium/&quot;&gt;standaard focusindicatoren steeds beter worden&lt;/a&gt;.&lt;/p&gt;
  5939. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/04-12-2019-5.png&quot; alt=&quot;Een stopcontact waar water uit giet&quot; /&gt;&lt;/p&gt;
  5940. &lt;h2&gt;8. Onderscheid elementen op je pagina met een mooi fontje&lt;/h2&gt;
  5941. &lt;p&gt;In WCAG Succescriterium 1.4.1 staat dat we niet puur en alleen kleur kunnen gebruiken om iets te communiceren. Een voorbeeld van hoe het niet moet kan zijn dat je je fouten in een formulier met rood markeert. Of als binnen een navigatie de kleur van de huidige pagina verschilt van de andere links. Een ander bekend voorbeeld is het hebben van blauwe links op je pagina, maar zonder de kenmerkende underline. Door alleen op kleur te vertrouwen, sluit je mensen uit die beperkt (kleuren) zien.&lt;/p&gt;
  5942. &lt;p&gt;Er zijn veel manieren om dit op te lossen, omdat het criterium behoorlijk vergevingsgezind is. Gebruik gewoon geen kleur als je enige visuele communicatiemiddel. Je kunt een passende foutmelding toevoegen aan je rode markeringen. Je kunt in je navigatie de huidige pagina dikgedrukt maken. Je kan ervoor zorgen dat je &lt;a href=&quot;https://adrianroselli.com/2019/01/underlines-are-beautiful.html&quot;&gt;links onderstreept zijn&lt;/a&gt;.&lt;/p&gt;
  5943. &lt;p&gt;Of ... je kan het lettertype van je links wijzigen. Technisch gezien zou je helemaal conformeren aan WCAG. Je kunt het lettertype zelfs wijzigen in Wingdings, het beroemde Windows-lettertype dat volledig uit pictogrammen bestaat. Volledig onleesbaar, maar geldig voor het 1.4.1 criterium. Een kleine verandering van je kerning, lijnhoogte, lettergrootte ... elke minimale verandering niet op kleur gebaseerd is voldoet.&lt;/p&gt;
  5944. &lt;p&gt;WCAG heeft vier principes en 1.4.1 valt onder de eerste van vier: Perceivable. Wat u communiceert, moet voor iedereen waarneembaar zijn. Minimale veranderingen zijn een teken van minimale inzet en volgen niet de bedoeling van dit principe. Je wil duidelijk waarneembaar communiceren&lt;/p&gt;
  5945. &lt;p&gt;Creatieve oplossingen zijn vaak minder effectief dan conventies. Het wijzigen van een lettertype kan nutteloos zijn voor een gebruiker die een aangepast lettertype heeft die de jouwe overschrijft.&lt;/p&gt;
  5946. &lt;p&gt;Als je een toegankelijkheidstip ziet, bedenk dan of deze daadwerkelijk iets toevoegt voor je eindgebruiker . Als het niets verbetert aan hun ervaring, wees dan kritisch. De toegankelijkheidsgemeenschap is open en gastvrij. Voel je altijd vrij om de mening van anderen te vragen.&lt;/p&gt;
  5947. &lt;h2&gt;Over Erik Kroes&lt;/h2&gt;
  5948. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/erik-kroes.png&quot; alt=&quot;Foto van Erik&quot; class=&quot;floating-portrait&quot; /&gt;
  5949. Erik werkt bij ING aan de toegankelijkheid van het design system en is een toegankelijkheidsadviseur voor [Eleven Ways](https://twitter.com/elevenways_be). Hij is mede-organizator van [Idea11y](https://twitter.com/idea11y), de Inclusive Design &amp; Accessibility meetup. Je kunt hem vinden op [Twitter,](https://twitter.com/erikkroes) waar hij ook af en toe serieus is.
  5950. Eriks donatie gaat naar de Hersenstichting.
  5951. </content>
  5952.  </entry>
  5953.  <entry>
  5954.    <title>Goeie docs = Happy devs</title>
  5955.    <link href="https://www.fronteers.nl/nl/blog/2019/12/goeie-docs-happy-devs"/>
  5956.    <updated>2019-12-03T00:00:00Z</updated>
  5957.    <id>https://www.fronteers.nl/nl/blog/2019/12/goeie-docs-happy-devs</id>
  5958.    <content xml:lang="nl" type="html">&lt;p&gt;Je hebt een geweldige app gemaakt, een mooie site gebouwd of een stevig CMS in elkaar gezet. Maanden werk. Je snapt zelf helemaal hoe het in elkaar zit. En dan komen ze: de vragen. Vragen van anderen die met jouw product aan de slag gaan.&lt;/p&gt;
  5959. &lt;p&gt;Een draagvlak krijgen voor je app, script, plugin of anderszins, valt of staat bij goede documentatie. Gebruikers zijn ongeduldig, ze zoeken iets dat snel werkt. En als ze zich in de steek gelaten voelen zonder goede documentatie, zoeken ze door naar de volgende app. Want: als iets niet meteen werkt én je snapt ook nog eens de documentatie niet, voel je je dom of vind je de app dom. Niemand wil zich dom voelen, dus als er geen (goede) docs zijn en iemand worstelt met het starten met je app raak je die gebruiker snel kwijt. Dit zegt niks over hoe goed je applicatie is, maar de waarheid is dat niets zichzelf verkoopt, hoe goed het ook is.&lt;/p&gt;
  5960. &lt;p&gt;Zorg je echter voor goede documentatie — met een goede ‘getting started’ en een paar stap-voor-stap secties — dan krijgt je gebruiker snel resultaat. Ze hebben iets werkend in no-time, hun initiële probleem of behoefte is opgelost en ze voelen zich succesvol en blij. En blije gebruikers zijn goede ambassadeurs voor je product.&lt;/p&gt;
  5961. &lt;p&gt;Wellicht heb je al documentatie geschreven (goed zo!), of moet je er nog aan beginnen. Net zoals het bouwen van je app een vak is, is het maken van duidelijke documentatie ook een specialiteit op zich. In deze blog wil ik je wat tips geven om je op weg te helpen. Ik zal ingaan op code comments, READMEs en uitgebreidere documentatie.&lt;/p&gt;
  5962. &lt;h2&gt;Denkers en doeners&lt;/h2&gt;
  5963. &lt;p&gt;Niet iedereen neemt op dezelfde manier informatie op. Sommige mensen proberen graag eerst zelf wat, terwijl anderen zich liever eerst goed inlezen. En weer een derde groep kijkt graag juist een video met uitleg. In de didactiek worden dit leerstijlen genoemd. Er wordt uitgegaan van vier verschillende leerstijlen. Eenvoudig gezegd zijn dit ‘waarnemen’, ‘ervaren’, ‘denken’ en ‘doen’. Als je dit in gedachten neemt is het niet gek dat jouw manier van uitleggen misschien niet bij iedereen aansluit die iets wil leren over jouw product. En dat het geen gek idee is om bepaalde informatie op meerdere manieren aan te bieden.&lt;/p&gt;
  5964. &lt;h2&gt;Geen documentatie&lt;/h2&gt;
  5965. &lt;p&gt;Laten we bij het begin beginnen. De beste documentatie is &lt;em&gt;geen documentatie&lt;/em&gt;. Dit lijkt een open deur, maar als je applicatie zo duidelijk is dat er geen extra uitleg nodig is dan is dat natuurlijk een &lt;em&gt;win&lt;/em&gt;. Zorg dus dat je bij de basis, het ontwerp en het opzetten van je applicatie, al rekening houdt met je gebruikers en kijkt wat de logische stappen zijn die mensen doen. Test regelmatig in het wild, en als mensen steeds dezelfde fout maken of je dezelfde vraag stellen kan je op die plek vast iets verbeteren.&lt;/p&gt;
  5966. &lt;h2&gt;Code comments&lt;/h2&gt;
  5967. &lt;p&gt;Een eenvoudige en snelle versie van documentatie zijn comments in de code. Je hebt bijvoorbeeld een open source applicatie gebouwd waarmee anderen ook aan de slag moeten. Of je hebt gewerkt aan een project dat jij en je team langere tijd moeten onderhouden. Dan wil je in de code ook comments opnemen om zaken uit te leggen. Het is verrassend hoeveel je in de toekomst vergeten kan zijn van het project dat je nu uit je hoofd kent.&lt;/p&gt;
  5968. &lt;p&gt;Vrijwel iedereen compileert zijn JS en CSS, dus comments nemen geen ruimte meer in op je productieserver. Er is niet zoiets als ‘teveel comments’ als dat nodig is voor je code.&lt;/p&gt;
  5969. &lt;pre&gt;&lt;code&gt;/* Theme colors, defined by corporate identity (version 1.3, august 2019) */
  5970. root: {
  5971.    --themecolor-primary: #ff0099;
  5972.    --themecolor-secondary: #ff6600;
  5973. }
  5974. &lt;/code&gt;&lt;/pre&gt;
  5975. &lt;p&gt;Houd het leesbaar, kort en bondig. Je schrijft comments die door een mens gelezen moeten worden. Gebruik duidelijke taal en korte zinnen.&lt;/p&gt;
  5976. &lt;pre&gt;&lt;code&gt;/* Run initial checks for page setup. Checks the viewport width
  5977. * and does some actions for the UI based on screen size
  5978. */
  5979. preLoadChecks();
  5980. &lt;/code&gt;&lt;/pre&gt;
  5981. &lt;p&gt;Magic numbers? Het liefst gebruik je zo min mogelijk &lt;em&gt;magic numbers&lt;/em&gt; in je code. Toch gebruikt? Leg uit waarom.&lt;/p&gt;
  5982. &lt;pre&gt;&lt;code&gt;width: 200px; /* Magic number, needs fixing! Exact width of logo,
  5983.                 looks best on mobile like this */
  5984. &lt;/code&gt;&lt;/pre&gt;
  5985. &lt;p&gt;Vraag jezelf af wat er zo ingewikkeld is aan dit stukje code, en probeer dat in ‘leken’-taal te verwoorden. Ook voor &lt;em&gt;future you&lt;/em&gt;.&lt;/p&gt;
  5986. &lt;pre&gt;&lt;code&gt;/* First, get the height of the viewport. Use this value to calculate
  5987. * the color using the script from github.com/awesome-script. Second,
  5988. * create the variables of the theme based on these colors.
  5989. */
  5990. &lt;/code&gt;&lt;/pre&gt;
  5991. &lt;h2&gt;READMEs&lt;/h2&gt;
  5992. &lt;p&gt;Een goede README in je git repository laat je project opvallen in de massa andere projecten op GitHub. Dus je schrijft een kickass README die net zo goed is als je repo. Het is ook is een manier om te zorgen dat mensen betrokken worden bij je project. Het gebruik van screenshots en beeld trekt snel de aandacht omdat dat een manier is om snel informatie over te brengen. En een verzorgde README wijst ook op een net, verzorgd project.&lt;/p&gt;
  5993. &lt;p&gt;Je README moet voldoende info bevatten om mensen snel op weg te helpen. Denk daarbij aan:&lt;/p&gt;
  5994. &lt;ul&gt;
  5995. &lt;li&gt;Een introductie. Wat voor project is dit? Wat doet het en voor wie is het? Hou het simpel met heldere taal en korte zinnen.&lt;/li&gt;
  5996. &lt;li&gt;Wat maakt dit project zo uniek en speciaal? Bezoekers die op GitHub zoeken naar een geschikte app of plugin, willen snel kunnen vergelijken.&lt;/li&gt;
  5997. &lt;li&gt;Screenshots en/of code voorbeelden.&lt;/li&gt;
  5998. &lt;li&gt;Welke specs zijn nodig?&lt;/li&gt;
  5999. &lt;li&gt;Welke stappen zijn nodig voor de installatie?&lt;/li&gt;
  6000. &lt;li&gt;Hoe kan je meehelpen? Laat mensen weten hoe ze kunnen bijdragen aan je project.&lt;/li&gt;
  6001. &lt;li&gt;Credits! Wie hebben er meegebouwd?&lt;/li&gt;
  6002. &lt;li&gt;Is er een licentie, en zo ja, welke?&lt;/li&gt;
  6003. &lt;/ul&gt;
  6004. &lt;h2&gt;Documentatiesites&lt;/h2&gt;
  6005. &lt;p&gt;Voor de grotere projecten maak je een documentatie-website. Een handleiding waarin je je gebruiker bij de hand neemt om de applicatie zo goed mogelijk te gebruiken. Met de verschillende leerstijlen in gedachten kan je verschillende ingangen maken voor gebruikers. Bijvoorbeeld - Een stap-voor-stap uitleg. Voor het opzetten van een installatie of een eerste demo. De doeners in je doelgroep worden hier blij van! - Via een inhoudsopgave op kernwoorden. - Een serie video tutorials&lt;/p&gt;
  6006. &lt;ul&gt;
  6007. &lt;li&gt;Een stap-voor-stap uitleg. Voor het opzetten van een installatie of een eerste demo. De doeners in je doelgroep worden hier blij van!&lt;/li&gt;
  6008. &lt;li&gt;Via een inhoudsopgave op kernwoorden.&lt;/li&gt;
  6009. &lt;li&gt;Een serie video tutorials&lt;/li&gt;
  6010. &lt;/ul&gt;
  6011. &lt;p&gt;Veel mensen starten met &lt;strong&gt;doen&lt;/strong&gt;. Ze installeren je applicatie en klikken er in rond. Als het goed is zit je applicatie duidelijk in elkaar en snappen mensen direct wat ze moeten doen. Komen ze een hobbel tegen, dan gaan ze op zoek naar de docs.&lt;/p&gt;
  6012. &lt;h2&gt;Schrijftips&lt;/h2&gt;
  6013. &lt;p&gt;Geen enkele gebruiker die ik ken pakt eerst de docs om te lezen, om daarna pas te starten. Mensen komen pas bij je documentatie uit als er een probleem is. Ze zoeken op een kernwoord naar een oplossing. Spreek deze bezoekers daarom aan met de volgende punten in gedachten:&lt;/p&gt;
  6014. &lt;p&gt;Gebruik kernwoorden die ook in de applicatie gebruikt worden. Let op de exacte bewoordingen van onderdelen en knoppen.&lt;/p&gt;
  6015. &lt;p&gt;Maak de pagina snel scanbaar met tussenkopjes. Niet meer dan één of twee paragrafen per kopje. Toch te lang? Verdeel je tekst dan onder in delen.&lt;/p&gt;
  6016. &lt;p&gt;Focus niet op het &lt;em&gt;happy path&lt;/em&gt;: het scenario waarbij alles vlekkeloos verloopt in je applicatie. Immers, gaat alles goed, dan komen mensen in eerste instantie niet bij je docs kijken. Geef bij elke stap een paar voorkomende problemen en hoe die op te lossen.&lt;/p&gt;
  6017. &lt;p&gt;Gebruik de exacte bewoording van foutmeldingen. Gebruikers &lt;em&gt;google-en&lt;/em&gt; immers vaak de melding en komen zo direct op jouw site waar de oplossing staat.&lt;/p&gt;
  6018. &lt;p&gt;Vermijd wollig taalgebruik en schrijf actief. ‘&lt;em&gt;You will see the big red button on the top. Press this to go to the configuration page where you can edit the settings&lt;/em&gt;’ wordt: ‘&lt;em&gt;Edit the configuration settings by pressing the ’config’ button&lt;/em&gt;’.
  6019. Eenvoudig: Hoe kortere zinnen (én woorden!), hoe makkelijker leesbaar. En geen enkele gebruiker heeft ooit geklaagd dat iets ‘te makkelijk leesbaar’ was.&lt;/p&gt;
  6020. &lt;p&gt;Mensen leren van fouten van anderen. Kom je zelf een foutmelding tegen die niet gedocumenteerd is? Draag bij aan de documentatie door bijvoorbeeld een pull request.&lt;/p&gt;
  6021. &lt;p&gt;Teveel uitleg nodig? Dat kan een hint zijn dat je code of app op die plek niet helemaal lekker loopt. Kijk altijd of je applicatie zelf op dat punt wellicht verbeterd kan worden.&lt;/p&gt;
  6022. &lt;p&gt;Geef codevoorbeelden die direct knip- en plakbaar zijn, en een basis zijn om uit te werken. Voeg eventueel uitgecommentarieerde opties toe in deze voorbeeldcode.&lt;/p&gt;
  6023. &lt;pre&gt;&lt;code&gt;var myColorpicker = new Colorpicker (&#39;.colorpicker-container&#39;, {
  6024.    // Optional parameters
  6025.    swatches: &#39;large&#39;, // small, medium, large, huge
  6026.    name: true // true: shows names, false: swatch only
  6027. })
  6028. &lt;/code&gt;&lt;/pre&gt;
  6029. &lt;h2&gt;Voeg beeld en video toe&lt;/h2&gt;
  6030. &lt;p&gt;Om weer even terug te komen op de leerstijlen: Als je je documentatie kan voorzien van beeldmateriaal, zoals video of screenshots, maak je het voor veel mensen bruikbaarder en sneller te snappen. Zorg ook voor goede alt-teksten van je beeld en captions bij je video’s om rekening te houden met toegankelijkheid. Op de Mac kan je tegenwoordig binnen iOS en OSX een schermvideo opnemen, of je gebruikt een app zoals &lt;a href=&quot;https://recordit.co/&quot;&gt;Recordit&lt;/a&gt;.&lt;/p&gt;
  6031. &lt;p&gt;En als uitsmijter: vraag hulp. Je hoeft niet alles zelf te doen en anderen helpen je graag een handje bij proeflezen of testen. De frisse blik van een ander kan je zeker helpen bij het verbeteren van je docs, want sommige zaken zijn voor jou wel logisch maar hebben voor een ander juist wat toelichting nodig.&lt;/p&gt;
  6032. &lt;p&gt;Dit waren mijn tips. Hopelijk helpt deze blog je op weg als je de volgende keer aan de slag gaat met het schrijven van een README of documentatie. Succes!&lt;/p&gt;
  6033. &lt;h2&gt;Meer informatie?&lt;/h2&gt;
  6034. &lt;ul&gt;
  6035. &lt;li&gt;Tips voor code comments op Hongkiat: &lt;a href=&quot;https://www.hongkiat.com/blog/source-code-comment-styling-tips/&quot;&gt;Source Code Comment Styling: Tips and Best Practices&lt;/a&gt;&lt;/li&gt;
  6036. &lt;li&gt;Tips voor een goede README op Medium: &lt;a href=&quot;https://medium.com/@meakaakka/a-beginners-guide-to-writing-a-kickass-readme-7ac01da88ab3&quot;&gt;A Beginners Guide to writing a Kickass README&lt;/a&gt;&lt;/li&gt;
  6037. &lt;li&gt;Hoe schermvideo’s opnemen op de Mac: &lt;a href=&quot;https://support.apple.com/en-us/HT207935&quot;&gt;Apple: How to record the screen on your iPhone, iPad, or iPod touch&lt;/a&gt; &lt;a href=&quot;https://support.apple.com/en-us/HT208721&quot;&gt;Apple: How to record the screen on your Mac&lt;/a&gt;&lt;/li&gt;
  6038. &lt;/ul&gt;
  6039. &lt;h2&gt;Over Anke Willems&lt;/h2&gt;
  6040. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/anke.jpeg&quot; alt=&quot;Foto van anke&quot; class=&quot;floating-portrait&quot; /&gt;
  6041. Anke is webdesigner en front-end developer bij Two Kings. In een eerder leven was ze grafisch ontwerper (met drukwerk en papier en zo), maar digitaal vind ze toch echt leuker. Heeft een grote liefde voor het maken van kleine gebruiksaanwijzingen die op een post-it moeten passen. Maakte de afgelopen twee jaar ook de sketch notes van de Fronteers Conferentie.
  6042. Ankes donatie gaat naar Stem op een vrouw.
  6043. </content>
  6044.  </entry>
  6045.  <entry>
  6046.    <title>Een eigen kalendercomponent bouwen</title>
  6047.    <link href="https://www.fronteers.nl/nl/blog/2019/12/een-eigen-kalendercomponent"/>
  6048.    <updated>2019-12-02T00:00:00Z</updated>
  6049.    <id>https://www.fronteers.nl/nl/blog/2019/12/een-eigen-kalendercomponent</id>
  6050.    <content xml:lang="nl" type="html">&lt;p&gt;Het is natuurlijk belangrijk componenten in je applicatie niet allemaal zelf te maken, maar gebruik te maken van het enorme assortiment aan componenten die al geschreven zijn door anderen. Het kost immers tijd om dingen zelf te maken en dus ook geld. Maar soms is het ook goed om eens kritisch te kijken naar welke functionaliteiten je daadwerkelijk benut van het component dat je gebruikt en is het ook gewoon leuk en leerzaam om zelf iets te bouwen.&lt;/p&gt;
  6051. &lt;p&gt;Zo deden wij dat bij Withlocals voor onze datepicker- kalender- en agenda-componenten. Er zijn bij ons ongeveer 2000 gebruikers die iedere dag hun beschikbaarheid bijwerken, dus de agenda is een cruciaal onderdeel van ons platform. Veel kant-en-klare kalendercomponenten op het web zijn echter te uitgebreid voor ons, omdat ze moeten werken voor iedere mogelijke use-case.&lt;/p&gt;
  6052. &lt;h2&gt;Stap 1: datastructuur&lt;/h2&gt;
  6053. &lt;p&gt;Als je per maand het aantal dagen weet en hoe je dit kunt vertalen naar een visuele weergave van een kalender wordt alles een stuk eenvoudiger. Naast het aantal dagen in de maand willen we ook tonen op welke dag de maand begint.&lt;/p&gt;
  6054. &lt;p&gt;Het beste zou dus zijn als we een functie hadden die deze informatie teruggeeft voor een maand. In het &lt;code&gt;[Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)&lt;/code&gt; object is al de nodige data beschikbaar&lt;/p&gt;
  6055. &lt;h2&gt;Aantal dagen in een maand&lt;/h2&gt;
  6056. &lt;p&gt;Het aantal dagen in een maand is uit te rekenen met &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate&quot;&gt;de getDate method van het Date object&lt;/a&gt;.&lt;/p&gt;
  6057. &lt;p&gt;De constructor van &lt;code&gt;Date&lt;/code&gt; vraag om de parameters &lt;code&gt;year&lt;/code&gt;, &lt;code&gt;month&lt;/code&gt; en &lt;code&gt;day&lt;/code&gt;. Als we &lt;code&gt;day&lt;/code&gt; op 0 zetten wordt de laatste dag van de vorige maand gebruikt. &lt;code&gt;new Date(2020, 1, 0)&lt;/code&gt; is dus niet 0 februari maar 31 januari. We kunnen dus als volgt het aantal dagen in een maand uitrekenen:&lt;/p&gt;
  6058. &lt;pre&gt;&lt;code&gt;function getDaysInMonth(year, month) {
  6059.    return new Date(year, month + 1, 0).getDate();
  6060. }
  6061.  
  6062. const daysInJanuary = getDaysInMonth(2020, 0); // 31
  6063. &lt;/code&gt;&lt;/pre&gt;
  6064. &lt;h2&gt;Begin van een maand&lt;/h2&gt;
  6065. &lt;p&gt;De &lt;code&gt;[getDay()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay)&lt;/code&gt; method van een &lt;code&gt;Date&lt;/code&gt; object geeft terug welke weekdag — van 0 tot en met 6, waarbij 0 zondag is — een datum is. Dat kunnen we gebruiken om de weekdag van de eerste dag van een maand te bepalen:&lt;/p&gt;
  6066. &lt;pre&gt;&lt;code&gt;function getStartOfMonth(year, month) {
  6067.    return new Date(year, month, 1).getDay();
  6068. }
  6069.  
  6070. const startOfJanuary = getStartOfMonth(2020, 0); // 3 = woensdag
  6071. &lt;/code&gt;&lt;/pre&gt;
  6072. &lt;h2&gt;Genereren van een maand&lt;/h2&gt;
  6073. &lt;p&gt;Een tweedimensionale array van de maand kunnen we vervolgens als volgt berekenen:&lt;/p&gt;
  6074. &lt;pre&gt;&lt;code&gt;function generateMonth(year, month) {
  6075.    const startOfMonth = getStartOfMonth(year, month);
  6076.    const daysInMonth = getDaysInMonth(year, month);
  6077.    const amountOfWeeks = Math.ceil((startOfMonth + daysInMonth) / 7);
  6078.  
  6079.    return Array(amountOfWeeks)
  6080.        .fill()
  6081.        .map((_, week) =&amp;gt; {
  6082.            return Array(7).fill().map((_, day) =&amp;gt; {
  6083.                const dayOfTheMonth =
  6084.                    (week * 7) -
  6085.                    (startOfMonth - 1) +
  6086.                    day;
  6087.  
  6088.                if (dayOfTheMonth &amp;lt; 1 ||
  6089.                    dayOfTheMonth &amp;gt; daysInMonth
  6090.                ) {
  6091.                    return null;
  6092.                }
  6093.  
  6094.                return dayOfTheMonth;
  6095.            });
  6096.        });
  6097. }
  6098.  
  6099. const january = generateMonth(2020, 0);
  6100. /* =&amp;gt;
  6101. * [
  6102. *     [null, null, null, 1, 2, 3 ,4],
  6103. *     [5, 6, 7, 8, 9, 10, 11],
  6104. *     [12, 13, 14, 15, 16, 17, 18],
  6105. *     [19, 20, 21, 22, 23, 24, 25],
  6106. *     [26, 27, 28, 29, 30, 31, null]
  6107. * ]
  6108. */
  6109. &lt;/code&gt;&lt;/pre&gt;
  6110. &lt;p&gt;In de output van &lt;code&gt;generateMonth()&lt;/code&gt; is er al bijna een kalender te zien. Op mijn &lt;a href=&quot;https://codepen.io/klaasvaak/pen/pooYEGe?editors=0011&quot;&gt;CodePen met bovenstaande functies&lt;/a&gt; kun je de output voor het gehele jaar 2020 zien.&lt;/p&gt;
  6111. &lt;h2&gt;Stap 2: de view&lt;/h2&gt;
  6112. &lt;p&gt;Nu de kalender al bijna te zien is in de data kan dit relatief ‘eenvoudig’ vertaald worden naar HTML en CSS. In het volgende voorbeeld is dit gedaan met behulp van React.&lt;/p&gt;
  6113. &lt;p&gt;De volgende componenten zien hiervoor gemaakt:&lt;/p&gt;
  6114. &lt;ul&gt;
  6115. &lt;li&gt;&lt;code&gt;Day&lt;/code&gt; (rendert een enkele dag)&lt;/li&gt;
  6116. &lt;li&gt;&lt;code&gt;Week&lt;/code&gt; (rendert meerdere &lt;code&gt;Day&lt;/code&gt; componenten)&lt;/li&gt;
  6117. &lt;li&gt;&lt;code&gt;Month&lt;/code&gt; (rendert meerdere &lt;code&gt;Week&lt;/code&gt; componenten en de labels voor de dagen van de week)&lt;/li&gt;
  6118. &lt;li&gt;&lt;code&gt;Calendar&lt;/code&gt; (rendert de huidige &lt;code&gt;Month&lt;/code&gt; componenten)&lt;/li&gt;
  6119. &lt;/ul&gt;
  6120. &lt;p&gt;Op CodeSandbox is het &lt;a href=&quot;https://codesandbox.io/s/heuristic-mestorf-oxmtu&quot;&gt;het volledige voorbeeld van een simpele kalenderweergave&lt;/a&gt; te zien.&lt;/p&gt;
  6121. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/02-12-2019-1.png&quot; alt=&quot;Voorbeeld van versimpelde kalenderweergave&quot; /&gt;&lt;/p&gt;
  6122. &lt;p&gt;Voor een meer uitgebreide versie kan je naast extra styling ook denken aan event handlers voor datumselectie en het formatteren van de datums met bijvoorbeeld &lt;a href=&quot;https://momentjs.com/&quot;&gt;moment.js&lt;/a&gt; of &lt;a href=&quot;https://date-fns.org/&quot;&gt;date-fns&lt;/a&gt;.&lt;/p&gt;
  6123. &lt;h2&gt;Stap 3: internationalisatie&lt;/h2&gt;
  6124. &lt;p&gt;In bovenstaande voorbeelden werd zondag steeds gebruikt als begin van de week, maar als dit een andere dag moet zijn kunnen we de dataset daarvoor aanpassen.&lt;/p&gt;
  6125. &lt;p&gt;De output van &lt;code&gt;generateMonth()&lt;/code&gt; voor januari 2020 zag er zo uit:&lt;/p&gt;
  6126. &lt;pre&gt;&lt;code&gt;[
  6127.    [null, null, null, 1, 2, 3 ,4],
  6128.    [5, 6, 7, 8, 9, 10, 11],
  6129.    [12, 13, 14, 15, 16, 17, 18],
  6130.    [19, 20, 21, 22, 23, 24, 25],
  6131.    [26, 27, 28, 29, 30, 31, null],
  6132. ]
  6133. &lt;/code&gt;&lt;/pre&gt;
  6134. &lt;p&gt;Als de week op maandag zou beginnen moet alles 1 naar links opschuiven en zou het er dus zo uitzien:&lt;/p&gt;
  6135. &lt;pre&gt;&lt;code&gt;[
  6136.    [null, null, 1, 2, 3, 4 ,5],
  6137.    [6, 7, 8, 9, 10, 11, 12],
  6138.    [13, 14, 15, 16, 17, 18, 19],
  6139.    [20, 21, 22, 23, 24, 25, 26],
  6140.    [27, 28, 29, 30, 31, null, null]
  6141. ]
  6142. &lt;/code&gt;&lt;/pre&gt;
  6143. &lt;p&gt;Aan &lt;code&gt;generateMonth&lt;/code&gt; voegen we een parameter toe die aangeeft wat het begin van de week is. Zondag (de default) is 0, maandag is 1, etc cetera. Binnen &lt;code&gt;generateMonth&lt;/code&gt; wordt deze parameter gebruikt om op de juiste manier een kalender te genereren door een offset te berekenen&lt;/p&gt;
  6144. &lt;pre&gt;&lt;code&gt;const sundayBasedOffset = getStartOfMonth(year, month);
  6145. let realOffset = sundayBasedOffset - startOfCalendarWeek;
  6146.  
  6147. if (realOffset &amp;lt; 0) {
  6148.    realOffset = 7 + realOffset;
  6149. }
  6150.  
  6151. const daysInMonth = getDaysInMonth(year, month);
  6152. const amountOfWeeks = Math.ceil((realOffset + daysInMonth) / 7);
  6153. &lt;/code&gt;&lt;/pre&gt;
  6154. &lt;p&gt;&lt;a href=&quot;https://codesandbox.io/s/vigorous-tesla-97y6s&quot;&gt;Op CodeSandbox vind je een voorbeeld van deze berekening.&lt;/a&gt;&lt;/p&gt;
  6155. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/02-12-2019-2.png&quot; alt=&quot;Een voorbeeld van een kalendercomponent waarbij de begindag van de week kan worden ingesteld&quot; /&gt;&lt;/p&gt;
  6156. &lt;h2&gt;De mogelijkheden&lt;/h2&gt;
  6157. &lt;p&gt;Nu het duidelijk is hoe een kalender te genereren kun je de logica op verschillende manieren gebruiken. Zoals bijvoorbeeld in een datepicker of een daterange-picker:&lt;/p&gt;
  6158. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/02-12-2019-3.gif&quot; alt=&quot;Een daterange-picker&quot; /&gt;&lt;/p&gt;
  6159. &lt;h2&gt;Een daterange-picker&lt;/h2&gt;
  6160. &lt;p&gt;Ook kun je dezelfde logica in een agenda gebruiken:&lt;/p&gt;
  6161. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/02-12-2019-4.gif&quot; alt=&quot;Toepassing van het component in een kalender-app&quot; /&gt;&lt;/p&gt;
  6162. &lt;p&gt;Wie weet volgt er binnenkort nog een vervolgpost voor de toegankelijkheid van deze componenten.&lt;/p&gt;
  6163. &lt;h2&gt;Over Joep van der Heijden&lt;/h2&gt;
  6164. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/joep.jpeg&quot; alt=&quot;Foto van joep&quot; class=&quot;floating-portrait&quot; /&gt;
  6165. Sinds een kleine 3 jaar is Joep lead front-end developer bij de startup Withlocals in Eindhoven waar hij een team van 5 front-enders leidt. Naast het werk houdt hij zich bezig met het organiseren van de Eindhoven Developers Meetup, waar je elke meetup een kijkje neemt bij een anderbedrijf in de regio Eindhoven.
  6166. Joeps donatie gaat naar Bits of Freedom.
  6167. </content>
  6168.  </entry>
  6169.  <entry>
  6170.    <title>A write up of the W3C TPAC 2019</title>
  6171.    <link href="https://www.fronteers.nl/nl/blog/2019/10/a-write-up-of-the-w3c-tpac-2019"/>
  6172.    <updated>2019-10-28T00:00:00Z</updated>
  6173.    <id>https://www.fronteers.nl/nl/blog/2019/10/a-write-up-of-the-w3c-tpac-2019</id>
  6174.    <content xml:lang="nl" type="html">&lt;p&gt;This year the W3C Technical Plenary and Advisory Committee Meeting (TPAC) was held in Fukuoka, Japan. As part of my work representing Fronteers in the W3C I attended the two Advisory Committee (AC) meetings held at TPAC, along with the CSS Working Group meeting days. In this post I will highlight some of the things that might be of interest to Fronteers members. I hope this gives a good overview of the breadth of things discussed.&lt;/p&gt;
  6175. &lt;p&gt;This year TPAC was held in Fukuoka, Japan. As part of my work representing Fronteers in the W3C I attended the two Advisory Committee (AC) meetings held at TPAC, along with the CSS Working Group meeting days. In this post I will highlight some of the things that might be of interest to Fronteers members. I hope this goves a good overview of the breadth of things discussed.&lt;/p&gt;
  6176. &lt;p&gt;Two public documents that give an great overview of the recent work of the W3C are the &lt;a href=&quot;https://www.w3.org/2019/09/factsheet.html&quot;&gt;W3C Factsheet&lt;/a&gt;, and the &lt;a href=&quot;https://www.w3.org/2019/09/w3c-highlights/&quot;&gt;W3C Strategic Highlights&lt;/a&gt; document. These documents give a good picture of what is happening at the W3C in a straightforward manner.&lt;/p&gt;
  6177. &lt;p&gt;In addition to these documents a financial report was shared which is &lt;em&gt;member-only&lt;/em&gt;. If any Fronteers member wishes to view any member-only document, or have further details of anything discussed here, please let me know, I&#39;ll be happy to share those with you.&lt;/p&gt;
  6178. &lt;p&gt;The Tuesday meeting began with an update from the CEO Jeff Jaffe. This introduced some of the topics that would be discussed later in the meeting and reminded us of the fact that in May this year the W3C and the WHATWG succesfully completed the negotiation of a Memorandum of Understanding rooted in the mutual belief that that having two distinct specifications claiming to be normative is generally harmful for the Web community.&lt;/p&gt;
  6179. &lt;p&gt;We then moved onto discussion of the W3C becoming a legal entity, and the various legal and administrative matters that this would entail.&lt;/p&gt;
  6180. &lt;p&gt;The second half of the meeting moved into shorter updates about various areas of the W3C and lightning talks.&lt;/p&gt;
  6181. &lt;h2&gt;Update on Web of Things&lt;/h2&gt;
  6182. &lt;p&gt;There are two groups dealing with WoT in the W3C, an &lt;a href=&quot;https://www.w3.org/WoT/IG/&quot;&gt;Interest Group&lt;/a&gt; which is open to anyone, and a &lt;a href=&quot;https://www.w3.org/WoT/WG/&quot;&gt;Working Group&lt;/a&gt; open only to W3C Members and Invited Experts, in common with all Working Groups.&lt;/p&gt;
  6183. &lt;p&gt;In June this year a WoT workshop was held in Munich, and the &lt;a href=&quot;https://www.w3.org/TR/2019/CR-wot-architecture-20190516/&quot;&gt;Architecture&lt;/a&gt; and &lt;a href=&quot;https://www.w3.org/TR/2019/CR-wot-thing-description-20190516/&quot;&gt;Thing Description&lt;/a&gt; were published as Candidate Recommendations on 16 May 2019.&lt;/p&gt;
  6184. &lt;h2&gt;Globalization and Inclusion&lt;/h2&gt;
  6185. &lt;p&gt;In this session we heard about the work to make the W3C more inclusive and global. This work falls into categories of Diversity and Inclusion, Facilitation and Culture, and Tools. There are efforts in place across these areas which are owned by members of the Advisory Board (AB).&lt;/p&gt;
  6186. &lt;p&gt;The area of Diversity and Inclusion achieved the sponsorship of seven people from diverse backgrounds to come to TPAC this year. Funds for this were raised from 10 W3C members and one individual sponsor.&lt;/p&gt;
  6187. &lt;p&gt;As a CSS Working Group member I experience one change made in the area of Facilitation and Culture in that one CSS Working Group meeting per month has moved to a timezone more friendly to people in the Asia and Pacific region. This aims to include more people in the meetings than would otherwise be able to participate.&lt;/p&gt;
  6188. &lt;p&gt;In the area of Tools, one area under development is the facilitation of translation for meetings to enable people to participate in their own language, rather than needing to be an English speaker. Other subjects in this area are the use of online tools such as Google Docs which are not accessible in all areas of the world, this is a good reminder to those of us in countries where we can easily access these things that not everyone can.&lt;/p&gt;
  6189. &lt;h2&gt;Code of Ethics and Professional Conduct&lt;/h2&gt;
  6190. &lt;p&gt;As a follow-on from the discussion on globalization and inclusion was a session on the Code of Ethics and Professional Conduct (CEPC) being discussed by the Positive Work Environment Community Group.&lt;/p&gt;
  6191. &lt;p&gt;The group are working to update the CEPC following feedback and referencing other best practices for Codes of Conduct. In addition to producing a document, the group is helping to train people as ombuds who will help in situations where the code has been broken, or when someone has a concern.&lt;/p&gt;
  6192. &lt;p class=&quot;note&quot;&gt;
  6193. The group are keen to receive feedback on the draft, which you can find [here](https://w3c.github.io/PWETF/).
  6194. &lt;/p&gt;
  6195. &lt;h2&gt;Incubation&lt;/h2&gt;
  6196. &lt;p&gt;Fronteers members might be familiar with the Web Incubation Community Group (WICG), which is a place where new web platform ideas can be proposed and discussed outside of a Working Group. In general new platform features should start life here, so this is likely to be the initial place to post if you have an idea which isn&#39;t an edit to an existing spec for example.&lt;/p&gt;
  6197. &lt;p&gt;Chris Wilson gave a presentation about the &lt;a href=&quot;https://github.com/wicg/&quot;&gt;WICG&lt;/a&gt; and other places for incubation, and explained the incubation process for new web platform ideas.&lt;/p&gt;
  6198. &lt;ol&gt;
  6199. &lt;li&gt;here’s a problem space to solve” → (public!)&lt;/li&gt;
  6200. &lt;li&gt;WICG post →&lt;/li&gt;
  6201. &lt;li&gt;Work with community, prototype solutions →&lt;/li&gt;
  6202. &lt;li&gt;&amp;quot;Minimum Viable Design&amp;quot; - get web developers to try it out&lt;/li&gt;
  6203. &lt;li&gt;Community-building, iteration, graduation, →&lt;/li&gt;
  6204. &lt;li&gt;WG (horizontal review, iterate, lock down, implementations) →&lt;/li&gt;
  6205. &lt;li&gt;W3C Recommendation&lt;/li&gt;
  6206. &lt;/ol&gt;
  6207. &lt;p class=&quot;note&quot;&gt;
  6208. As anyone who has seen one of my talks knows, I am very keen to encourage web designers and developers to get involved with web platform features. So do take a look at [the threads in the WICG discussions](https://discourse.wicg.io/), and see if there are features you have use cases for.
  6209. &lt;/p&gt;
  6210. &lt;h2&gt;Lightning talks&lt;/h2&gt;
  6211. &lt;p&gt;The session finished with the following lightning talks, designed to highlight different areas of work across the W3C:&lt;/p&gt;
  6212. &lt;ul&gt;
  6213. &lt;li&gt;SVG - Amelia Bellamy-Rhoyds, Invited Expert&lt;/li&gt;
  6214. &lt;li&gt;VR and AR on the Web - Ada Rose Cannon, Samsung&lt;/li&gt;
  6215. &lt;li&gt;Web beyond the browser - Hyojin Song, LG&lt;/li&gt;
  6216. &lt;li&gt;Second Screen on the Web - Mark Foltz, Google&lt;/li&gt;
  6217. &lt;/ul&gt;
  6218. &lt;h2&gt;Continuous Standards Development&lt;/h2&gt;
  6219. &lt;p&gt;THe first session of the Thursday meeting was on proposed updates to the process by which specifications on the Recommendation track are worked on, in particular what happens when specifcations in Candidate Recommendation (CR) status need an edit. The current workflow is cumbersome and often means that the spec in CR is quite outdated when compared to the latest Editor&#39;s Draft.&lt;/p&gt;
  6220. &lt;p&gt;There are a range of proposals to help improve this process, which should ultimately help in making the published documents more useful to refer to.&lt;/p&gt;
  6221. &lt;h2&gt;Mini App standardization and next steps&lt;/h2&gt;
  6222. &lt;p&gt;While we in the West tend to hear a lot about PWAs, in China hybrid web and mobile apps are popular, these use web technologies within a native wrapper. The &lt;a href=&quot;https://www.w3.org/2018/chinese-web-ig/&quot;&gt;Chinese Web Interest Group&lt;/a&gt; are working to standarize this technology. This is a fairly new group, and this session was an update on their activities.&lt;/p&gt;
  6223. &lt;h2&gt;PWAs and Project Fugu&lt;/h2&gt;
  6224. &lt;p&gt;The aim of Project Fugu is:&lt;/p&gt;
  6225. &lt;blockquote&gt;
  6226. &lt;p&gt;&amp;quot;Enable web apps to do anything native apps can, by exposing the capabilities of native platforms to the web platform, while maintaining user security, privacy, trust, and other core tenets of the web.&amp;quot;&lt;/p&gt;
  6227. &lt;/blockquote&gt;
  6228. &lt;p&gt;There are various APIs being developed to meet this aim, their progress can be tracked on the &lt;a href=&quot;https://developers.google.com/web/updates/capabilities&quot;&gt;Capabilities Landing Page&lt;/a&gt; or the &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/10/bit.ly/fugu-api-tracker&quot;&gt;Fugu API Tracker&lt;/a&gt;.&lt;/p&gt;
  6229. &lt;p&gt;How the world pays online - an update on the Web Payments Community Group&lt;/p&gt;
  6230. &lt;p&gt;The &lt;a href=&quot;https://www.w3.org/community/webpayments/&quot;&gt;Web Payments Community Group&lt;/a&gt; work on a family of specifications. You might be familiar with the &lt;a href=&quot;https://www.w3.org/TR/payment-request/&quot;&gt;Payment Request API&lt;/a&gt;, which is the most mature of these specifications and is an API to allow a payment request to be invoked in the browser.&lt;/p&gt;
  6231. &lt;p&gt;The Group are working on moving Payment Request to Proposed Recommendation, and trying to encourage wider use of these specifications.&lt;/p&gt;
  6232. &lt;h2&gt;CSS Working Group Meetings&lt;/h2&gt;
  6233. &lt;p&gt;We also had two days of CSS Working Group meetings at TPAC, although I had to miss some of the Tuesday afternoon to attend the AC meeting.&lt;/p&gt;
  6234. &lt;p&gt;A highlight for me was to get a resolution on an outstanding issue meaning that I could publish a new Working Draft of the &lt;a href=&quot;https://www.w3.org/TR/css-multicol-1/&quot;&gt;Multiple-column Layout specification&lt;/a&gt;. This WD includes the edits I made after the specification reading workshop that Fronteers members took part in earlier this year.&lt;/p&gt;
  6235. &lt;p&gt;In addition it was resolved that the &lt;a href=&quot;https://www.w3.org/TR/css-writing-modes-3/&quot;&gt;CSS Writing Modes&lt;/a&gt; specification could go to Proposed Recommendation (PR) Status. This is the last step before it becomes a W3C Recommendation. It was especially nice that it went to PR while we were in Japan, given that Writing Modes is key to being able to set vertical modes such as Japanese.&lt;/p&gt;
  6236. &lt;p&gt;If any Fronteers member wants to know more about any of the above, please get in touch with me, It&#39;s part of my role to pass on any relevant information, or put you in touch with the right people to help.&lt;/p&gt;
  6237. &lt;p class=&quot;note&quot;&gt;
  6238. Members of Fronteers are encouraged to seek access to a members-only channel on our Slack space. If you haven&#39;t joined it yet, you can [sign up for our Slack automatically](https://fronteers-slack.herokuapp.com/). To join the members-only channel, send a private message to Anneke Sinnema (@anneke).
  6239. &lt;/p&gt;
  6240. </content>
  6241.  </entry>
  6242.  <entry>
  6243.    <title>Meld je aan voor de ALV 2019</title>
  6244.    <link href="https://www.fronteers.nl/nl/blog/2019/10/meld-je-aan-voor-de-alv-2019"/>
  6245.    <updated>2019-10-23T00:00:00Z</updated>
  6246.    <id>https://www.fronteers.nl/nl/blog/2019/10/meld-je-aan-voor-de-alv-2019</id>
  6247.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdagavond 29 november houden we onze jaarlijkse algemene ledenvergadering (ALV) in Utrecht! Alle leden zijn hiervoor van harte uitgenodigd. De vergadering vindt dit keer plaats op een nieuwe locatie, Collectiv (Creative Valley) direct grenzend aan Utrecht Centraal Station!&lt;/p&gt;
  6248. &lt;ul&gt;
  6249. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/10/meld-je-aan-voor-de-alv-2019#english-version&quot;&gt;English version&lt;/a&gt; below -&lt;/li&gt;
  6250. &lt;/ul&gt;
  6251. &lt;p&gt;Is het je eerste keer op de (of überhaupt een) ALV? Tijdens de ALV nemen we als bestuur, vrijwilligers en leden samen de (financiële) staat van Fronteers door, en evalueren we hoe het gaat met de vereniging. Tot het begin van de vergadering kan elk lid een voorstel doen voor een agendapunt of een ter stemming te brengen onderwerp.&lt;/p&gt;
  6252. &lt;p&gt;Voor de mensen die van ver of direct vanuit hun werk komen zal er vanaf 18:00 een klein buffet klaar staan (vis, vlees en vegetarisch - broodjes, soep en een warm item). De vergadering zelf begint om 18:30 uur. We verwachten dat de totale vergadering twee uur zal duren, maar de ervaring leert dat het nog weleens wil uitlopen. We doen ons best dit zoveel mogelijk te beperken.&lt;/p&gt;
  6253. &lt;p&gt;De lokatie is dit keer aangrenzend aan het station en hierdoor extra makkelijk te bereiken met het openbaar vervoer. Loop het Centraal Station uit aan de centrumkant. De entree van Creative Valley bevindt zich rechts van Albert Heijn, tegenover Boots. &lt;a href=&quot;https://www.creativevalley.nl/images/downloads/route/CV_U_CS_Routebeschrijving_V002A.pdf&quot;&gt;Klik hier voor een volledige routebeschrijving (pdf)&lt;/a&gt;.
  6254. We zitten in ruimte &lt;a href=&quot;https://www.creativevalley.nl/collectiv/ruimtes/the-workshop&quot;&gt;The Workshop&lt;/a&gt;.
  6255. De vergaderruimte is goed bereikbaar met een lift en zit om de hoek van een gehandicaptentoilet. Er is voor zover wij weten geen ringleiding aanwezig.&lt;/p&gt;
  6256. &lt;p&gt;Het staat leden tot het begin van de ALV vrij voorstellen voor de agenda in te dienen. De voorlopige agenda staat hieronder. Wat in ieder geval zal worden behandeld zijn de jaarstukken van de vereniging over 2018, de financiën over 2019 en de nieuwe begroting voor 2020. Deze stukken zullen enkele dagen voor de ALV naar alle aangemelde aanwezigen worden opgestuurd. Mocht je niet aanwezig kunnen zijn, maar deze informatie wel willen inzien: laat het ons weten!
  6257. Notulen van de avond worden altijd zo snel mogelijk na de vergadering online gedeeld.&lt;/p&gt;
  6258. &lt;h2&gt;Voorlopige agenda&lt;/h2&gt;
  6259. &lt;ul&gt;
  6260. &lt;li&gt;Opening&lt;/li&gt;
  6261. &lt;li&gt;Jaarrekening 2018&lt;/li&gt;
  6262. &lt;li&gt;Bevindingen kascommissie&lt;/li&gt;
  6263. &lt;li&gt;Benoeming nieuwe kascommissie&lt;/li&gt;
  6264. &lt;li&gt;Financiën 2019&lt;/li&gt;
  6265. &lt;li&gt;Begroting 2020&lt;/li&gt;
  6266. &lt;li&gt;Herbenoeming Sander Vink&lt;/li&gt;
  6267. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  6268. &lt;li&gt;Evaluatie congres&lt;/li&gt;
  6269. &lt;li&gt;Evaluatie W3C-lidmaatschap&lt;/li&gt;
  6270. &lt;li&gt;Presentatie nieuwe branding&lt;/li&gt;
  6271. &lt;li&gt;Rondvraag&lt;/li&gt;
  6272. &lt;li&gt;Sluiting&lt;/li&gt;
  6273. &lt;/ul&gt;
  6274. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  6275. &lt;p&gt;Ben je van plan te komen, dan vragen we je vriendelijk je hieronder hiervoor in te schrijven, zodat we enigszins een idee hebben van de verwachte opkomst.&lt;/p&gt;
  6276. &lt;h2&gt;English version&lt;/h2&gt;
  6277. &lt;p&gt;Friday evening, the 29th of november we will have our annual membership meeting (ALV) in Utrecht! All members of Fronteers are welcome to sign up to join us. The meeting will take place at the Collectiv (location Creative Valley), which sits directly besides the Utrecht Central Station.&lt;/p&gt;
  6278. &lt;p&gt;For people joining us directly from work or other obligations we will have a small buffet ready at 18:00 (with fish, meat, and vegetarian options - sandwiches, a soup and a warm item). The meeting itself will commence at 18:30. We expect the total meeting to take two hours, but we know from experience that it can run late. We will make a conscious effort to try and avoid this.&lt;/p&gt;
  6279. &lt;p&gt;Is this your first time at the (or an) ALV (membership meeting)? The legal form of Fronteers is a dutch &#39;vereniging&#39;, which means we are obligated to have a meeting once a year with the board, volunteers and members to present and discuss the (financial) state of Fronteers. We will evaluate how Fronteers is doing and discuss what we can do to improve. Until the actual start of the meeting, any member can propose a topic for the agenda to be discussed and voted on by all present members.&lt;/p&gt;
  6280. &lt;p&gt;The meeting will take place at Collectiv (location Creative Valley), which sits directly besides the Utrecht Central Station and is easy to reach with public transport. Exit the station by following the &#39;centrum&#39; signs. The entrance of Creative Valley is to the right of the Albert Heijn supermarket, accross from a Boots pharmacy. &lt;a href=&quot;https://www.google.com/maps/place/Creative+Valley+UCS/@52.0910516,5.1082429,17z/data=!3m1!4b1!4m5!3m4!1s0x47c66f63ca43903b:0x283dbd4a2edcd271!8m2!3d52.0910516!4d5.1104316&quot;&gt;Map of the location (GoogleMaps)&lt;/a&gt;.
  6281. We&#39;ll be in the space called &lt;a href=&quot;https://www.creativevalley.nl/collectiv/ruimtes/the-workshop&quot;&gt;The Workshop&lt;/a&gt;.
  6282. There is an elevator present and there is an accessible toilet around the corner from the meeting room. As far as we know there is no ring line system present.&lt;/p&gt;
  6283. &lt;p&gt;Below, you&#39;ll find the provisional program of the evening. The financial documents of 2018, 2019 and 2020 will be discussed and sent in advance to everyone that signed up for the ALV. If can&#39;t attend but (as a member) want to get a copy of the documents, please &lt;a href=&quot;mailto:penningmeester@fronteers.nl&quot;&gt;send an e-mail to our treasurer&lt;/a&gt;.&lt;/p&gt;
  6284. &lt;h2&gt;(Provisional) Agenda&lt;/h2&gt;
  6285. &lt;ul&gt;
  6286. &lt;li&gt;Opening&lt;/li&gt;
  6287. &lt;li&gt;Financial Statements 2018&lt;/li&gt;
  6288. &lt;li&gt;Findings of the treasury committee&lt;/li&gt;
  6289. &lt;li&gt;Naming of the new treasury committee&lt;/li&gt;
  6290. &lt;li&gt;Finances of 2019&lt;/li&gt;
  6291. &lt;li&gt;Budget for 2020&lt;/li&gt;
  6292. &lt;li&gt;Report of committees&lt;/li&gt;
  6293. &lt;li&gt;Evaluation of the conference&lt;/li&gt;
  6294. &lt;li&gt;Evaluation of our first year of W3C-membership&lt;/li&gt;
  6295. &lt;li&gt;Presentation of our new branding&lt;/li&gt;
  6296. &lt;li&gt;Round of questions&lt;/li&gt;
  6297. &lt;li&gt;Close&lt;/li&gt;
  6298. &lt;/ul&gt;
  6299. </content>
  6300.  </entry>
  6301.  <entry>
  6302.    <title>Schrijf mee aan de Adventskalender 2019!</title>
  6303.    <link href="https://www.fronteers.nl/nl/blog/2019/10/schrijf-mee-aan-de-adventskalender-2019"/>
  6304.    <updated>2019-10-18T00:00:00Z</updated>
  6305.    <id>https://www.fronteers.nl/nl/blog/2019/10/schrijf-mee-aan-de-adventskalender-2019</id>
  6306.    <content xml:lang="nl" type="html">&lt;p&gt;De Fronteers Adventskalender is terug! 24 blogs van 24 schrijvers over uiteenlopende front-end onderwerpen. Wil jij graag een blog schrijven voor Fronteers, meld je nu dan aan. Tot 31 oktober kan iedereen een voorstel indienen voor een blog. Schrijvers mogen een donatie van 75 euro uit de verenigingskas doen aan een goed doel.&lt;/p&gt;
  6307. &lt;ul&gt;
  6308. &lt;li&gt;English below -&lt;/li&gt;
  6309. &lt;/ul&gt;
  6310. &lt;p&gt;Je mag schrijven over elk onderwerp dat front-end gerelateerd is. Denk bijvoorbeeld aan blogs over accessibility, tools, UX/UI, frameworks. Wil je schrijven over iets dat je geleerd hebt dit jaar, of wil je juist dit moment aangrijpen om zelf iets nieuws te leren en daarover te schrijven? Het kan allemaal. Blogs mogen in het Nederlands of Engels geschreven worden, met een voorkeur voor Nederlands.&lt;/p&gt;
  6311. &lt;p&gt;Aanmelden om mee te schrijven kan tot en met 31 oktober via marketing@fronteers.nl of door het onderstaande formulier in te vullen. We ontvangen daarbij graag een onderwerp/titel, in welke taal je wilt schrijven en een korte uitleg waar het artikel over zal gaan. In de eerste week van november maken we de schrijvers bekend. Maandag 25 november is de deadline voor het aanleveren van je artikel.&lt;/p&gt;
  6312. &lt;p&gt;Namens de auteurs zal Fronteers een donatie van 75 euro per schrijver aan een goed doel doen. De schrijvers mogen zelf kiezen uit een van deze goede doelen: Hersenstichting, KWF, KiKa, Bits of Freedom of Stem op een Vrouw. Er is dit keer een keuze gemaakt uit een aantal goede doelen om onze penningmeester wat werk uit handen te nemen.&lt;/p&gt;
  6313. &lt;h2&gt;English&lt;/h2&gt;
  6314. &lt;p&gt;The Fronteers Advent Calendar is back! 24 writers and 24 blog posts about various front-end topics. If you want to write one of these blog posts, you can sign up now. Everybody can send in a proposal, until October 31st. All writers can donate 75 euros from the association to a charity.&lt;/p&gt;
  6315. &lt;p&gt;You may write about every topic related to front-end development. For example, about accessibility, tools, UX/UI, frameworks. Blog posts can be written in English or Dutch.&lt;/p&gt;
  6316. &lt;p&gt;You can send in your proposal until October 31st by mailing to marketing@fronteers.nl or by filling in the form below. We would like to receive a topic/title, language and a short synopsis of your blog post. In the first week of november we&#39;ll announce the writers for this years advent calendar. The deadline for sending in your blog post is november 25th.&lt;/p&gt;
  6317. &lt;p&gt;On behalf of the authors, Fronteers will donate 75 euros for each writer to a charity of their choice. Writers can choose between one of these charities: Hersenstichting, KWF, KiKa, Bits or Freedom or Stem op een Vrouw. This year we made a selection of charities to make our treasurer&#39;s job a bit easier.&lt;/p&gt;
  6318. </content>
  6319.  </entry>
  6320.  <entry>
  6321.    <title>Diversiteit/Inclusie en Fronteers</title>
  6322.    <link href="https://www.fronteers.nl/nl/blog/2019/10/diversiteit-inclusie-en-fronteers"/>
  6323.    <updated>2019-10-10T00:00:00Z</updated>
  6324.    <id>https://www.fronteers.nl/nl/blog/2019/10/diversiteit-inclusie-en-fronteers</id>
  6325.    <content xml:lang="nl" type="html">&lt;p&gt;Fronteers heeft dit jaar een aantal dingen achter de schermen opgepakt die een investering vormen voor de toekomst van de vereniging. Zo hebben we een aantal merk-identiteitssessies gedaan om het DNA van de vereniging te ‘vinden’. Daar kwam onder andere uit dat toegankelijkheid (in de breedste zin van het woord) erg belangrijk voor ons is als vereniging.&lt;/p&gt;
  6326. &lt;p&gt;We bedoelen daar niet alleen web-accessibility mee. Het verwelkomen en op weg helpen van nieuwe leden en collega’s, het faciliteren van kennisdeling, en het organiseren van netwerkevents en congres hebben allemaal gemeen dat iedereen die dingen met webtechnieken dingen doet zich in principe welkom moet voelen bij Fronteers. Het web is voor iedereen, en wij zijn dat ook! Het moet niet uitmaken wat je afkomst, geaardheid en kleur is of dat je een beperking hebt.&lt;/p&gt;
  6327. &lt;p&gt;De wens om open en inclusief te zijn is er altijd geweest, maar goede bedoelingen alleen leiden niet vanzelf tot een cultuur waar het compleet vanzelfsprekend is om met iedereen rekening te houden. Daar brengen we als Fronteers graag verandering in!&lt;/p&gt;
  6328. &lt;p&gt;Daarom hebben we in juni met een aantal (niet)-vrijwilligers een avond gepraat over het thema diversiteit en inclusie, om niet in de laatste plaats eens kritisch naar onszelf te kijken. Daar kwamen een aantal aanbevelingen uit die we delen met de verschillende commissies.&lt;/p&gt;
  6329. &lt;h2&gt;De belangrijkste punten&lt;/h2&gt;
  6330. &lt;ul&gt;
  6331. &lt;li&gt;de code of conduct die we nu voor het congres hebben, en de aparte code of conduct die we voor Slack hebben, willen we na een redactieslag breder trekken zodat deze voor alle bijeenkomsten van Fronteers geldt.&lt;/li&gt;
  6332. &lt;li&gt;als we een bijeenkomst of evenement organiseren, willen we dat de lokatie zo toegankelijk mogelijk is. Dit zouden we het liefst toetsen met behulp van een door een commissie samen te stellen document. Hiernaast willen we bij de aankondiging van de bijeenkomst duidelijk communiceren welke faciliteiten er beschikbaar zijn zodat ieder de eigen geinformeerde keuze kan maken of zij gaan deelnemen aan het evenement. Het zou helemaal fantastisch zijn als geinteresseerden ook gemakkelijk kunnen doorgeven wat hun reden is om niet te komen, zodat we hiervan kunnen leren.&lt;/li&gt;
  6333. &lt;/ul&gt;
  6334. &lt;h2&gt;Commissie&lt;/h2&gt;
  6335. &lt;p&gt;Wat we heel graag willen is een commissie Diversiteit en Inclusie vormen met een mix van ervaringsdeskundigen en experts uit de accessibility-wereld die samen ervaring en kennis kunnen combineren.&lt;/p&gt;
  6336. &lt;p&gt;De kerntaken van de commissie zouden dan het eerste jaar als volgt zijn:&lt;/p&gt;
  6337. &lt;ul&gt;
  6338. &lt;li&gt;vormen van een team (en aanmoedigen van ervaringsdeskundigen tot deelname)&lt;/li&gt;
  6339. &lt;li&gt;adviseren en uitdagen van het bestuur&lt;/li&gt;
  6340. &lt;li&gt;aanmaken van een checklist voor het voorbereiden van bijeenkomsten, workshops en congres (lokatie, voeding, etc)&lt;/li&gt;
  6341. &lt;li&gt;bloggen over dit thema voor of namens Fronteers voor kennisdeling&lt;/li&gt;
  6342. &lt;li&gt;andere commissies helpen met best practices en bijstaan bij morele/ethische dilemma&#39;s (de beste keuze is soms niet de makkelijkste!)&lt;/li&gt;
  6343. &lt;/ul&gt;
  6344. &lt;p&gt;Zou je graag deel willen nemen aan dit initiatief en denk je dat je een bijdrage kan leveren aan bovenstaande? We kunnen je hulp goed gebruiken. &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;Stuur een e-mail naar het bestuur&lt;/a&gt;.&lt;/p&gt;
  6345. </content>
  6346.  </entry>
  6347.  <entry>
  6348.    <title>Met korting naar performance.now()</title>
  6349.    <link href="https://www.fronteers.nl/nl/blog/2019/09/met-korting-naar-performance-now"/>
  6350.    <updated>2019-09-26T00:00:00Z</updated>
  6351.    <id>https://www.fronteers.nl/nl/blog/2019/09/met-korting-naar-performance-now</id>
  6352.    <content xml:lang="nl" type="html">&lt;p&gt;Op 21 en 22 november organiseert Web Conferences Amsterdam voor de tweede keer &lt;a href=&quot;https://perfnow.nl/&quot;&gt;performance.now()&lt;/a&gt;; opnieuw met 14 sessies over de stand van zaken in front-end performance.&lt;/p&gt;
  6353. &lt;p&gt;Fronteers-leden krijgen korting op dit congres. Ze betalen 550 in plaats van 650 euro voor een kaartje (exclusief BTW). Het aanbod is geldig voor mensen die op dit moment al lid zijn, en je kunt ervan gebruik maken door&lt;a href=&quot;mailto:bestuur@lists.fronteers.nl&quot;&gt; een email naar het bestuur&lt;/a&gt; te zenden. Je ontvangt dan een kortingscode waarmee je je kaart kunt kopen.&lt;/p&gt;
  6354. &lt;p&gt;Uitgekozen door program co-chairs &lt;a href=&quot;https://timkadlec.com/&quot;&gt;Tim Kadlec&lt;/a&gt; en &lt;a href=&quot;https://tammyeverts.wordpress.com/&quot;&gt;Tammy Everts&lt;/a&gt;, zullen de sprekers een wijd gebied aan onderwerpen behandelen, inclusief JavaScript, CSS, performance culture, responsive design, performance budgets, frameworks, monitoring, browsers, mobile devices en perceived performance. (Excuus voor alle Engelse termen; zo gaat het nou eenmaal in de webwereld.)&lt;/p&gt;
  6355. &lt;p&gt;Donderdag 21 en vrijdag 22 november, &lt;a href=&quot;https://perfnow.nl/venue&quot;&gt;Het Compagnietheater&lt;/a&gt;, Amsterdam, en Fronteers-leden betalen 550 euro voor een kaart. Komt dat zien!&lt;/p&gt;
  6356. </content>
  6357.  </entry>
  6358.  <entry>
  6359.    <title>Fronteers vote for the W3C Advisory Board elections</title>
  6360.    <link href="https://www.fronteers.nl/nl/blog/2019/05/fronteers-vote-for-the-w3c-advisory-board-elections"/>
  6361.    <updated>2019-05-17T00:00:00Z</updated>
  6362.    <id>https://www.fronteers.nl/nl/blog/2019/05/fronteers-vote-for-the-w3c-advisory-board-elections</id>
  6363.    <content xml:lang="nl" type="html">&lt;p&gt;In May, W3C members are voting for seven seats on the Advisory Board. Since Fronteers is a W3C member, we also have a vote, which our representative Rachel Andrew will cast on behalf of us.&lt;/p&gt;
  6364. &lt;p&gt;Still, we should provide Rachel with the vote she&#39;s going to cast. In order to do that we call all Fronteers members to cast their vote. The result of the internal Fronteers vote will be transmitted to Rachel.&lt;/p&gt;
  6365. &lt;p&gt;This vote is only open to Fronteers members; if you&#39;re not a member you cannot vote.&lt;/p&gt;
  6366. &lt;p&gt;The &lt;a href=&quot;https://fronteersnl.slack.com/&quot;&gt;Fronteers Slack&lt;/a&gt; now contains a w3c-fronteers channel that is open only to members, and where questions can be asked and discussions can be held. Please ask for access in the general Fronteers channel.&lt;/p&gt;
  6367. &lt;h2&gt;The Advisory Board&lt;/h2&gt;
  6368. &lt;p&gt;The &lt;a href=&quot;https://www.w3.org/2002/ab/&quot;&gt;W3C Advisory Board&lt;/a&gt; provides advice on general issues such as strategy, management, legal matters, process, and conflict resolution. Members serve in an individual capacity, and not as representatives of their parent organisations.&lt;/p&gt;
  6369. &lt;p&gt;More details, as well as the current make-up of the Board can be found at &lt;a href=&quot;https://www.w3.org/2002/ab/&quot;&gt;the Advisory Board page&lt;/a&gt;.&lt;/p&gt;
  6370. &lt;h2&gt;Candidates&lt;/h2&gt;
  6371. &lt;p&gt;The twelve candidates for the seven seats are:&lt;/p&gt;
  6372. &lt;ul&gt;
  6373. &lt;li&gt;Tantek Çelik (Mozilla)&lt;/li&gt;
  6374. &lt;li&gt;Heejin Chung (Samsung)&lt;/li&gt;
  6375. &lt;li&gt;Elika J Etemad aka fantasai (W3C Invited Expert)&lt;/li&gt;
  6376. &lt;li&gt;Aaron Gustafson (Microsoft)&lt;/li&gt;
  6377. &lt;li&gt;Nigel Megitt (BBC)&lt;/li&gt;
  6378. &lt;li&gt;Charles McCathie Nevile (ConsenSys) *&lt;/li&gt;
  6379. &lt;li&gt;Avneesh Singh (DAISY Consortium)&lt;/li&gt;
  6380. &lt;li&gt;Eric Siow (Intel)&lt;/li&gt;
  6381. &lt;li&gt;Alan Stearns (Adobe)&lt;/li&gt;
  6382. &lt;li&gt;Léonie Watson (TetraLogical) *&lt;/li&gt;
  6383. &lt;li&gt;Chris Wilson (Google)&lt;/li&gt;
  6384. &lt;li&gt;Judy (Hongru) Zhu (Alibaba) *&lt;/li&gt;
  6385. &lt;/ul&gt;
  6386. &lt;p&gt;An asterisk * denotes a current Advisory Board member who is up for reelection.&lt;/p&gt;
  6387. &lt;p&gt;All candidates provided &lt;a href=&quot;https://www.w3.org/2019/05/02-ab-nominations&quot;&gt;statements&lt;/a&gt; on what they hope to achieve.&lt;/p&gt;
  6388. &lt;h2&gt;Voting procedure&lt;/h2&gt;
  6389. &lt;p&gt;Fronteers members can mail their vote to &lt;a href=&quot;mailto:secretaris@fronteers.nl&quot;&gt;secretaris@fronteers.nl&lt;/a&gt;. The vote should be an ordered list, with your personal top candidate coming first, your next candidate coming second, and so on.&lt;/p&gt;
  6390. &lt;p&gt;After a membership check your vote will be added to the general pool. Your top candidate will get 12 points, your second candidate 11 points, etc. If you do not include all twelve candidates on your list, the missing candidates will get 0 points.&lt;/p&gt;
  6391. &lt;p&gt;Fronteers voting closes on Monday 27th of May. The Fronteers board will create an ordered list, with the first candidate being the one who received most points, then the one with the second-most points and so on. Rachel Andrew will break any ties.&lt;/p&gt;
  6392. &lt;p&gt;Rachel will cast the Fronteers vote later that week, before the W3C deadline of 30 May.&lt;/p&gt;
  6393. &lt;h2&gt;Fronteers vote&lt;/h2&gt;
  6394. &lt;p&gt;11 members voted, and the resulting Fronteers vote was the following, in this order:&lt;/p&gt;
  6395. &lt;ol&gt;
  6396. &lt;li&gt;Elika J Etemad aka fantasai (W3C Invited Expert)&lt;/li&gt;
  6397. &lt;li&gt;Léonie Watson (TetraLogical) *&lt;/li&gt;
  6398. &lt;li&gt;Tantek Çelik (Mozilla)&lt;/li&gt;
  6399. &lt;li&gt;Judy (Hongru) Zhu (Alibaba) *&lt;/li&gt;
  6400. &lt;li&gt;Alan Stearns (Adobe)&lt;/li&gt;
  6401. &lt;li&gt;Aaron Gustafson (Microsoft)&lt;/li&gt;
  6402. &lt;li&gt;Chris Wilson (Google)&lt;/li&gt;
  6403. &lt;li&gt;Avneesh Singh (DAISY Consortium)&lt;/li&gt;
  6404. &lt;li&gt;Nigel Megitt (BBC)&lt;/li&gt;
  6405. &lt;li&gt;Heejin Chung (Samsung)&lt;/li&gt;
  6406. &lt;li&gt;Charles McCathie Nevile (ConsenSys) *&lt;/li&gt;
  6407. &lt;li&gt;Eric Siow (Intel)&lt;/li&gt;
  6408. &lt;/ol&gt;
  6409. &lt;h2&gt;Results&lt;/h2&gt;
  6410. &lt;p&gt;The &lt;a href=&quot;https://www.w3.org/blog/news/archives/7762&quot;&gt;result&lt;/a&gt; of the full W3C vote was:&lt;/p&gt;
  6411. &lt;ul&gt;
  6412. &lt;li&gt;Elika J Etemad aka fantasai (W3C Invited Expert)&lt;/li&gt;
  6413. &lt;li&gt;Charles McCathie Nevile (ConsenSys) *&lt;/li&gt;
  6414. &lt;li&gt;Avneesh Singh (DAISY Consortium)&lt;/li&gt;
  6415. &lt;li&gt;Eric Siow (Intel)&lt;/li&gt;
  6416. &lt;li&gt;Léonie Watson (TetraLogical)*&lt;/li&gt;
  6417. &lt;li&gt;Chris Wilson (Google)&lt;/li&gt;
  6418. &lt;li&gt;Judy (Hongru) Zhu (Alibaba)*&lt;/li&gt;
  6419. &lt;/ul&gt;
  6420. &lt;p&gt;Congratulations to all newly elected or re-elected AB members.&lt;/p&gt;
  6421. </content>
  6422.  </entry>
  6423.  <entry>
  6424.    <title>25% Fronteers-korting op nieuwe browser Polypane</title>
  6425.    <link href="https://www.fronteers.nl/nl/blog/2019/05/25-procent-fronteers-korting-op-nieuwe-browser-polypane"/>
  6426.    <updated>2019-05-14T00:00:00Z</updated>
  6427.    <id>https://www.fronteers.nl/nl/blog/2019/05/25-procent-fronteers-korting-op-nieuwe-browser-polypane</id>
  6428.    <content xml:lang="nl" type="html">&lt;p&gt;Fronteers-lid Kilian Valkhof heeft een browser gemaakt voor front-end ontwikkelaars: &lt;a href=&quot;https://polypane.rocks/&quot;&gt;Polypane&lt;/a&gt;. In deze browser kan je als ontwikkelaar je site tegelijkertijd op verschillende devices en viewports zien, waardoor het ontwikkelen van responsive websites en apps gemakkelijker en beter gaat.&lt;/p&gt;
  6429. &lt;p&gt;Leden krijgen 25% korting op een abonnement op de browser. De korting aanvragen kan door een mailtje te sturen naar &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;het bestuur&lt;/a&gt; onder vermelding van &amp;quot;korting Polypane&amp;quot;. De korting blijft gedurende de looptijd van het abonnement actief!&lt;/p&gt;
  6430. &lt;p&gt;Polypane is gebaseerd op Chromium en bevat naast de Chromium developer tools en de weergave van sites op meerdere formaten nog meer handige functies. Zo kan je direct een overzicht krijgen van je responsive breakpoints, kan je een screenshot genereren van alle apparaten en kan je snel layout-bugs oplossen met de CSS layout debugging tools. Voor meer informatie, kijk op &lt;a href=&quot;https://polypane.rocks/&quot;&gt;Polypane.rocks&lt;/a&gt;.&lt;/p&gt;
  6431. </content>
  6432.  </entry>
  6433.  <entry>
  6434.    <title>Win een gratis kaartje voor Frontend United</title>
  6435.    <link href="https://www.fronteers.nl/nl/blog/2019/05/win-een-gratis-kaartje-voor-frontend-united"/>
  6436.    <updated>2019-05-11T00:00:00Z</updated>
  6437.    <id>https://www.fronteers.nl/nl/blog/2019/05/win-een-gratis-kaartje-voor-frontend-united</id>
  6438.    <content xml:lang="nl" type="html">&lt;p&gt;17 en 18 mei wordt de 10e editie van &lt;a href=&quot;https://www.frontendunited.org/&quot;&gt;Frontend United&lt;/a&gt; georganiseerd, met topsprekers als Una Kravets, Jeremy Keith, Vitaly Friedman, Rachel Andrew, Lea Verou en Chris Lilley. Fronteers mag als hoofdsponsor 4(!) kaartjes verloten!&lt;/p&gt;
  6439. &lt;p&gt;Frontend United is een jaarlijks congres waarbij de developer centraal staat, volledig gerund door vrijwilligers. Het doel is om developers en designers van verschillende achtergronden bij elkaar te brengen om kennis, ervaringen en ideeën te delen. Als lid voor Fronteers krijg je sowieso &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/03/met-korting-naar-frontend-united&quot;&gt;20% korting op de kaartjes&lt;/a&gt;.&lt;/p&gt;
  6440. &lt;p&gt;Wil je kans maken op de gratis tickets? Het enige dat je hoeft te doen is reageren op deze blogpost. Je hoeft hiervoor geen lid te zijn van Fronteers. Op dinsdag 14 mei kiezen wij willekeurig 4 winnaars onder de inzendingen. Succes!&lt;/p&gt;
  6441. </content>
  6442.  </entry>
  6443.  <entry>
  6444.    <title>W3C Advisory Committee - initial report</title>
  6445.    <link href="https://www.fronteers.nl/nl/blog/2019/05/w3c-advisory-committee-initial-report"/>
  6446.    <updated>2019-05-08T00:00:00Z</updated>
  6447.    <id>https://www.fronteers.nl/nl/blog/2019/05/w3c-advisory-committee-initial-report</id>
  6448.    <content xml:lang="nl" type="html">&lt;p&gt;In April I headed to Quebec City in order to attend my first Advisory Committee (AC) Meeting on behalf on Fronteers. While I have been a CSS Working Group memeber for some time, as an Invited Expert I had no interaction with the AC, so this first meeting was a chance for me to discover how it functions and to start to build a plan for how I should gather information and share that with Fronteers.&lt;/p&gt;
  6449. &lt;p&gt;The AC is a committee made up of a representative from each member organisation. Therefore I was attending the committee meetings as a representative of Fronteers. Below are a few notes. Some materials were classed as member only, however, and we need to find a way to share these materials with Fronteers members only.&lt;/p&gt;
  6450. &lt;h2&gt;Pre-meeting Day&lt;/h2&gt;
  6451. &lt;p&gt;There was a session before the meeting designed for new representatives. It filled in some of the blanks for me about how the W3C, and the AC in particular operates, and allowed me to put faces to names of people I had seen mentioned in emails. The session was essentially a set of presentations about different parts of the W3C. It also helped me to understand how other representatives work within their organisations and the W3C.&lt;/p&gt;
  6452. &lt;h2&gt;Day One&lt;/h2&gt;
  6453. &lt;p&gt;The meeting runs as a series of presentations on a subject, after which members who have questions or comments queue at the mic to ask their question. Some materials presented are made publicly available, others are member only. The &lt;a href=&quot;https://www.w3.org/2019/04/w3c-highlights/Overview.html&quot;&gt;Strategic Highlights Overview&lt;/a&gt; is public.&lt;/p&gt;
  6454. &lt;p&gt;There was a good discussion about diversity in the W3C. Of particular use to me was the discussion &lt;em&gt;A, B, C&#39;s of being an AC rep&lt;/em&gt;, which included questions such as:&lt;/p&gt;
  6455. &lt;ul&gt;
  6456. &lt;li&gt;&amp;quot;How do I weigh in on something that I don&#39;t understand?&amp;quot;&lt;/li&gt;
  6457. &lt;li&gt;Importance of voting&lt;/li&gt;
  6458. &lt;li&gt;How information gets circulated by the AC Rep between their boss/colleagues and W3C&lt;/li&gt;
  6459. &lt;/ul&gt;
  6460. &lt;p&gt;This third issue is the one I think we need to think about, as being a representative of a volunteer organisation is not a usual thing in the W3C, and we have to figure out how to do this. That process in itself may be useful for any future organisation who wishes to follow our lead.&lt;/p&gt;
  6461. &lt;p&gt;[Fronteers note: we will get back to this topic eventually, but right now we&#39;re not totally sure how to set this up.]&lt;/p&gt;
  6462. &lt;p&gt;I presented on What&#39;s New In CSS, during a set of lightning talks on Day 1. You can find &lt;a href=&quot;https://noti.st/rachelandrew/Kr6L2U/whats-new-in-css&quot;&gt;my slides here&lt;/a&gt;.&lt;/p&gt;
  6463. &lt;h2&gt;Day Two&lt;/h2&gt;
  6464. &lt;p&gt;I had to leave to catch a flight at lunch time on Day 2, to an event booked prior to my taking up the role with Fronteers. However, as it happened, much of the meeting happened before lunch. There was a very interesting discussion led by the Chinese Interest Group, they described the Quick Apps and Mini Apps which share some features of PWAs.&lt;/p&gt;
  6465. &lt;p&gt;There was discussion of the W3C Patent Policy and also horizontal review of specifications. There was an interesting discussion on privacy issues. The &lt;a href=&quot;https://www.w3.org/Privacy/&quot;&gt;Privacy Interest Group&lt;/a&gt; (PING) are keen to involve people who have an interest in privacy matters. There was also a session on Web Authentication.&lt;/p&gt;
  6466. &lt;p&gt;After this I left to get stuck in a snowstorm for hours at Quebec airport!&lt;/p&gt;
  6467. &lt;h2&gt;Using the Fronteers Vote&lt;/h2&gt;
  6468. &lt;p&gt;Most people at the AC meeting are the representative of a company or organisation which is a W3C member, and have routes within their company to transmit information. Fronteers is a little different, and we will have to find a way of making decisions and then transmitting them to me. This is especially urgent when it comes to voting for Advisory Board members. That vote is coming up; the deadline is 30 May.&lt;/p&gt;
  6469. &lt;p&gt;[Fronteers note: We&#39;ll publish a separate blog post about the AB voting. Meanwhile, members should take a look &lt;a href=&quot;https://www.w3.org/2019/05/02-ab-nominations&quot;&gt;at this page&lt;/a&gt;, where the candidates and procedure are presented. You have a vote on this!]&lt;/p&gt;
  6470. &lt;h2&gt;The Next Meeting&lt;/h2&gt;
  6471. &lt;p&gt;The next AC Meeting will be at TPAC on 16-20 September in Fukuoka, Japan. The CSS Working Group will also meet that week. I will attend and send a similar report to Fronteers.&lt;/p&gt;
  6472. </content>
  6473.  </entry>
  6474.  <entry>
  6475.    <title>Donderdag 4 april: Dag van Front-end Development</title>
  6476.    <link href="https://www.fronteers.nl/nl/blog/2019/04/donderdag-4-april-dag-van-front-end-development"/>
  6477.    <updated>2019-04-02T00:00:00Z</updated>
  6478.    <id>https://www.fronteers.nl/nl/blog/2019/04/donderdag-4-april-dag-van-front-end-development</id>
  6479.    <content xml:lang="nl" type="html">&lt;p&gt;Fronteers roept donderdag 4 april (4-04) uit tot de Dag van Front-end Development, een feestelijke dag om het beroep van front-end developer te vieren. Op deze dag organiseert Fronteers een aantal meetups voor front-end developers om nieuwe mensen en vakgenoten te leren kennen. In Den Haag, Eindhoven, Enschede, Groningen en Nijmegen kunnen vakgenoten en geīnteresseerden elkaar ontmoeten onder het genot van een hapje en drankje.&lt;/p&gt;
  6480. &lt;p&gt;‘In steeds meer organisaties zijn front-end developers aanwezig,’ vertelt Anneke Sinnema, voorzitter van Fronteers. ‘Een front-end developer werkt aan hetgeen jij als gebruiker ziet aan een website of (web-)applicatie. Daarmee is een front-end developer de spil tussen gebruikers, vormgevers en back-end developers. Om hierbij stil te staan, roept Fronteers 4 april uit tot Dag van Front-end Development. Dit wordt een vrolijke, feestelijke dag om het beroep van front-end development te vieren. Front-enders kunnen deze dag vieren bij een van de &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2019/03/fronteers-organiseert-vijf-casual-meetups&quot;&gt;meetups&lt;/a&gt; die wij op 4 april organiseren.’&lt;/p&gt;
  6481. </content>
  6482.  </entry>
  6483.  <entry>
  6484.    <title>Fronteers organiseert vijf casual meetups</title>
  6485.    <link href="https://www.fronteers.nl/nl/blog/2019/03/fronteers-organiseert-vijf-casual-meetups"/>
  6486.    <updated>2019-03-13T00:00:00Z</updated>
  6487.    <id>https://www.fronteers.nl/nl/blog/2019/03/fronteers-organiseert-vijf-casual-meetups</id>
  6488.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 4 april 2019 houdt Fronteers op vijf locaties tegelijk een borrel voor front-end developers en hen die dat willen worden. De meetups zijn open en informeel en opgezet om nieuwe mensen en vakgenoten te ontmoeten onder het genot van een hapje en een drankje. Iedereen is uitgenodigd, ook als je niet lid bent van Fronteers.&lt;/p&gt;
  6489. &lt;p&gt;In Groningen, Eindhoven, Enschede, Nijmegen en Den Haag verwelkomen respectievelijk Joël, Koen, Anneke, Josee en Jewwy je in een lokale gelegenheid om samen met jou en collega&#39;s een drankje te doen.&lt;/p&gt;
  6490. &lt;p&gt;Je bent vanaf 19:00 welkom bij een van de volgende locaties:&lt;/p&gt;
  6491. &lt;p&gt;(Eerste drankje is op rekening van Fronteers!)&lt;/p&gt;
  6492. &lt;ul&gt;
  6493. &lt;li&gt;Groningen: Devhouse Spindle (met &lt;a href=&quot;https://twitter.com/pm5544&quot;&gt;Joël Kuijten&lt;/a&gt;) &lt;a href=&quot;https://www.meetup.com/nl-NL/Fronteers-NL/events/259726189/&quot;&gt;Meld je aan&lt;/a&gt;&lt;/li&gt;
  6494. &lt;li&gt;Eindhoven: The Commons Restaurant (met &lt;a href=&quot;https://twitter.com/koenkivits&quot;&gt;Koen Kivits&lt;/a&gt;) &lt;a href=&quot;https://www.meetup.com/nl-NL/Fronteers-NL/events/259726277/&quot;&gt;Meld je aan&lt;/a&gt;&lt;/li&gt;
  6495. &lt;li&gt;Enschede: Perron 22 (met &lt;a href=&quot;https://twitter.com/asinnema&quot;&gt;Anneke Sinnema&lt;/a&gt;) &lt;a href=&quot;https://www.meetup.com/nl-NL/Fronteers-NL/events/259726351/&quot;&gt;Meld je aan&lt;/a&gt;&lt;/li&gt;
  6496. &lt;li&gt;Nijmegen: Guesthouse Vertoef (met &lt;a href=&quot;https://twitter.com/codergirlNL&quot;&gt;Josee Wouters&lt;/a&gt;) &lt;a href=&quot;https://www.meetup.com/nl-NL/Fronteers-NL/events/259726410/&quot;&gt;Meld je aan&lt;/a&gt;&lt;/li&gt;
  6497. &lt;li&gt;Den Haag: MingleMush (met &lt;a href=&quot;https://twitter.com/jewwyq&quot;&gt;Jewwy Qadri&lt;/a&gt;) &lt;a href=&quot;https://www.meetup.com/nl-NL/Fronteers-NL/events/259726132/&quot;&gt;Meld je aan&lt;/a&gt;&lt;/li&gt;
  6498. &lt;/ul&gt;
  6499. &lt;p&gt;ENGLISH:&lt;/p&gt;
  6500. &lt;p&gt;On Thursday the 4th of April 2019 Fronteers is hosting a meetup in 5 different locations at the same time. If you are a front-end Developer, aspire to be one or work in the field of front-end, you are all welcome to join us for drinks. These meetups are welcoming and informal and are setup to meet new people and mingle, there will be no presentations or loud music. Everyone is invited, even non Fronteers members!&lt;/p&gt;
  6501. &lt;p&gt;In Groningen, Eindhoven, Enschede, Nijmegen and Den Haag some great people from Fronteers will be welcoming you for a nice evening with chats and drinks. Join us from 19:00 h in one of the following locations.&lt;/p&gt;
  6502. &lt;p&gt;(Note: First drink is on Fronteers!)&lt;/p&gt;
  6503. &lt;ul&gt;
  6504. &lt;li&gt;Groningen: Devhouse Spindle (hosted by &lt;a href=&quot;https://twitter.com/pm5544&quot;&gt;Joël Kuijten&lt;/a&gt;) &lt;a href=&quot;https://www.meetup.com/nl-NL/Fronteers-NL/events/259726189/&quot;&gt;RSVP&lt;/a&gt;&lt;/li&gt;
  6505. &lt;li&gt;Eindhoven: The Commons Restaurant (hosted by &lt;a href=&quot;https://twitter.com/koenkivits&quot;&gt;Koen Kivits&lt;/a&gt;) &lt;a href=&quot;https://www.meetup.com/nl-NL/Fronteers-NL/events/259726277/&quot;&gt;RSVP&lt;/a&gt;&lt;/li&gt;
  6506. &lt;li&gt;Enschede: Perron 22 (hosted by &lt;a href=&quot;https://twitter.com/asinnema&quot;&gt;Anneke Sinnema&lt;/a&gt;) &lt;a href=&quot;https://www.meetup.com/nl-NL/Fronteers-NL/events/259726351/&quot;&gt;RSVP&lt;/a&gt;&lt;/li&gt;
  6507. &lt;li&gt;Nijmegen: Guesthouse Vertoef (hosted by &lt;a href=&quot;https://twitter.com/codergirlNL&quot;&gt;Josee Wouters&lt;/a&gt;) &lt;a href=&quot;https://www.meetup.com/nl-NL/Fronteers-NL/events/259726410/&quot;&gt;RSVP&lt;/a&gt;&lt;/li&gt;
  6508. &lt;li&gt;Den Haag: MingleMush (hosted by &lt;a href=&quot;https://twitter.com/jewwyq&quot;&gt;Jewwy Qadri&lt;/a&gt;) &lt;a href=&quot;https://www.meetup.com/nl-NL/Fronteers-NL/events/259726132/&quot;&gt;RSVP&lt;/a&gt;&lt;/li&gt;
  6509. &lt;/ul&gt;
  6510. </content>
  6511.  </entry>
  6512.  <entry>
  6513.    <title>Met korting naar Frontend United</title>
  6514.    <link href="https://www.fronteers.nl/nl/blog/2019/03/met-korting-naar-frontend-united"/>
  6515.    <updated>2019-03-04T00:00:00Z</updated>
  6516.    <id>https://www.fronteers.nl/nl/blog/2019/03/met-korting-naar-frontend-united</id>
  6517.    <content xml:lang="nl" type="html">&lt;p&gt;Op 17 en 18 mei vindt &lt;a href=&quot;https://www.frontendunited.org/&quot;&gt;Frontend United&lt;/a&gt; in Utrecht plaats. Onder de eerste sprekers bevinden zich helden als Jonathan Snook, Vitaly Friedman, Rachel Andrew, Jeremy Keith, Una Kravets, Lea Verou en Chris Lilley.&lt;/p&gt;
  6518. &lt;p&gt;Leden van Fronteers krijgen 20% korting op de toch al betaalbare tickets. Het aanbod is geldig voor mensen die op dit moment al lid zijn. Door een &lt;a href=&quot;mailto:bestuur@lists.fronteers.nl&quot;&gt;e-mail naar het bestuur&lt;/a&gt; te sturen, kun je hier gebruik van maken. Je ontvangt dan een speciale link waar je je congrestickets kunt kopen.&lt;/p&gt;
  6519. &lt;p&gt;Op de donderdag voor de conferentie (16 mei) zijn &lt;a href=&quot;https://www.frontendunited.org/workshops&quot;&gt;workshops&lt;/a&gt; te volgen, van ondermeer Vitaly Friedman, Rachel Andrew en Lea Verou. Je hoeft geen ticket te hebben voor de conferentie om een ticket voor de workshops te kopen.&lt;/p&gt;
  6520. &lt;p&gt;Frontend United is een jaarlijks congres, volledig gerund door vrijwilligers, waarbij de developer centraal staat. Het doel is om front-end developers en designers van verschillende achtergronden bij elkaar te brengen om kennis, ervaringen en ideeën te delen.&lt;/p&gt;
  6521. </content>
  6522.  </entry>
  6523.  <entry>
  6524.    <title>Denk mee over de toekomst van Fronteers</title>
  6525.    <link href="https://www.fronteers.nl/nl/blog/2019/02/denk-mee-over-de-toekomst-van-fronteers"/>
  6526.    <updated>2019-02-27T00:00:00Z</updated>
  6527.    <id>https://www.fronteers.nl/nl/blog/2019/02/denk-mee-over-de-toekomst-van-fronteers</id>
  6528.    <content xml:lang="nl" type="html">&lt;p&gt;Op 15 februari deed een select groepje Fronteers-leden mee met een identiteitssessie om te onderzoeken waar we ons met Fronteers op zouden moeten focussen. Het was een ontzettend waardevolle (en leuke) avond!&lt;/p&gt;
  6529. &lt;p&gt;We hebben in kleine groepjes onze visie gegeven over stellingen op het gebied van de front-end wereld. Hoe ziet ons vak er in de toekomst uit? Wat begrijpen onze werk- en opdrachtgevers minder goed? Wat zijn dingen waar we niet zonder kunnen? Wat is uniek aan onze community? En wat hebben front-enders volgens ons écht nodig om hun werk in de toekomst goed te kunnen doen?&lt;/p&gt;
  6530. &lt;p&gt;Binnenkort volgt er een vervolgsessie waarin we de resultaten van deze sessie gaan bespreken. Maar voor het zover is, willen we graag van jou als lid of niet-lid horen hoe jij tegen bepaalde zaken aankijkt. Ready for Branding, de partij die we hebben ingeschakeld voor deze sessie, heeft een korte vragenlijst voorbereid. Doe je mee? Het kost je maximaal vijf minuten.&lt;/p&gt;
  6531. &lt;p&gt;&lt;a href=&quot;https://fannyevers.typeform.com/to/ENwnlf&quot;&gt;Vul de enquete hier in&lt;/a&gt;&lt;/p&gt;
  6532. &lt;p&gt;Alvast bedankt! We houden je op de hoogte van de resultaten via het blog en onze social media.&lt;/p&gt;
  6533. </content>
  6534.  </entry>
  6535.  <entry>
  6536.    <title>Looking back at the Fronteers Ladies Dinner</title>
  6537.    <link href="https://www.fronteers.nl/nl/blog/2019/02/looking-back-at-the-fronteers-ladies-dinner"/>
  6538.    <updated>2019-02-22T00:00:00Z</updated>
  6539.    <id>https://www.fronteers.nl/nl/blog/2019/02/looking-back-at-the-fronteers-ladies-dinner</id>
  6540.    <content xml:lang="nl" type="html">&lt;p&gt;It was months ago when Anneke approached me with the idea to organize a ladies dinner for frontend developers. I was definitely excited and wanted to be a part of it. Not because nowadays it’s common to organize an IT event with special motivation for women, but I just really miss to have a cozy chat with women.&lt;/p&gt;
  6541. &lt;p&gt;We were twelve women in the room from at least four different nationalities. Hey! I know what you’re thinking, but I can assure you that Netherlands has more than twelve female frontend developers. The night started at 18:00, we started eating ~19:30 and we had a nice chat until 22:00. This was the summary of the night by numbers. I know... This a boring habit from work. I cannot stop organizing my thoughts with bullets, numbers, etc.&lt;/p&gt;
  6542. &lt;p&gt;What did it really mean for me? First of all, I was proud of all those smart and strong willed women. If you follow an IT career, it’s common to get an advice to change your path to become a sales person or manager with the reasoning that programming is too geeky for you. I felt normal when everyone admitted experiencing impostor syndrome once in a while. It was funny that most of us felt a sort of guilt while discussing our salary. I was so happy to discover all new and interesting game and movie suggestions, puzzled when the waiter gave a nice introductory speech for the people who ordered cheese and then laughed so hard when he came up with this funny and imaginary story about crème brûlée when I insisted for an explanation. It was refreshing to observe the commonalities of our challenges and realized that I started to ignore them just because I’m the minority.&lt;/p&gt;
  6543. &lt;p&gt;Last but not least, I was glad to be a part of this dinner and I would like to thank Fronteers for its special support.&lt;/p&gt;
  6544. </content>
  6545.  </entry>
  6546.  <entry>
  6547.    <title>Met korting naar CSS Day</title>
  6548.    <link href="https://www.fronteers.nl/nl/blog/2019/02/met-korting-naar-css-day"/>
  6549.    <updated>2019-02-20T00:00:00Z</updated>
  6550.    <id>https://www.fronteers.nl/nl/blog/2019/02/met-korting-naar-css-day</id>
  6551.    <content xml:lang="nl" type="html">&lt;p&gt;Op 13 en 14 juni organiseert Web Conferences Amsterdam voor de zevende keer &lt;a href=&quot;https://cssday.nl/&quot;&gt;CSS Day&lt;/a&gt;. Dit jaar is het congres uitgebreid met een UI Special op de donderdag, gevolgd door de eigenlijke CSS Day op vrijdag.&lt;/p&gt;
  6552. &lt;p&gt;Zoals eveneens al zeven jaar het geval is, krijgen Fronteers-leden korting op dit congres. Ze betalen 500 in plaats van 600 euro voor een kaartje voor beide dagen, of 275 in plaats van 325 voor een eendagskaartje (alle bedragen exclusief BTW). Het aanbod is geldig voor mensen die op dit moment al lid zijn, en je kunt ervan gebruik maken door &lt;a href=&quot;mailto:bestuur@lists.fronteers.nl&quot;&gt;een email naar het bestuur&lt;/a&gt; te zenden. Je ontvangt dan een kortingscode waarmee je je kaart kunt kopen.&lt;/p&gt;
  6553. &lt;p&gt;Op UI Special kan je &lt;a href=&quot;https://cssday.nl/2019/speakers&quot;&gt;grote namen&lt;/a&gt; als Jared Spool, Brad Frost, en Josh Clark verwachten, maar ook ten onrechte minder bekende namen als Başak Haznedaroğlu en Hakim El Hattab. Zij zullen een brede waaier van UI-gerelateerde zaken bespreken.&lt;/p&gt;
  6554. &lt;p&gt;CSS Day zelf staat gedeeltelijk in het teken van de verhouding tussen CSS en JavaScript; Natalya Shelburne en Lara Schenck zullen hier een presentatie over geven, terwijl &lt;a href=&quot;https://cssday.nl/2019/speakers&quot;&gt;andere sprekers&lt;/a&gt;, zoals fantasai of Steve Schoger er wellicht ook wat aandacht aan zullen besteden. Het is tenslotte een hot topic.&lt;/p&gt;
  6555. &lt;p&gt;Donderdag 13 en vrijdag 14 juni, &lt;a href=&quot;https://cssday.nl/2019/venue&quot;&gt;Het Compagnietheater&lt;/a&gt;, Amsterdam, en Fronteers-leden betalen 500 euro voor een tweedaagse kaart. Komt dat zien!&lt;/p&gt;
  6556. </content>
  6557.  </entry>
  6558.  <entry>
  6559.    <title>Fronteers and W3C - first quarterly report</title>
  6560.    <link href="https://www.fronteers.nl/nl/blog/2019/02/fronteers-and-w3c-first-quarterly-report"/>
  6561.    <updated>2019-02-12T00:00:00Z</updated>
  6562.    <id>https://www.fronteers.nl/nl/blog/2019/02/fronteers-and-w3c-first-quarterly-report</id>
  6563.    <content xml:lang="nl" type="html">&lt;p&gt;Last week our W3C representative, Rachel Andrew, came to Amsterdam to talk about her W3C work and give an interesting workshop; essentially giving her first quarterly report. This post gives a quick overview based on the notes I took during the discussion.&lt;/p&gt;
  6564. &lt;p&gt;On Thursday we &lt;a href=&quot;https://meetup.com/Fronteers-NL/events/258152423/&quot;&gt;met up&lt;/a&gt; at &lt;a href=&quot;https://www.werkspot.nl/&quot;&gt;Werkspot&lt;/a&gt;. With 43 reservations and an actual turnout of 31, we had a no-show of only 25%, which is not bad for a free event.&lt;/p&gt;
  6565. &lt;p&gt;Rachel first gave a &lt;a href=&quot;https://noti.st/rachelandrew/9R7PMY&quot;&gt;presentation&lt;/a&gt; about the specifications W3C is currently working on. Then we seamlessly moved into a discussion of first the details of some specs, then the details of Fronteers&#39; involvement in W3C, and finally the goals and expectations we at Fronteers have of our membership.&lt;/p&gt;
  6566. &lt;p&gt;The audience loved the idea of a meet-up about upcoming specs, and about understanding those specs. The Friday workshop (see below) was also considered an excellent idea, and there was a clear demand for more of this sort of content, as well as blog posts. Web developers need more skills in understanding specifications.&lt;/p&gt;
  6567. &lt;p&gt;So we&#39;re going to organise more meet-ups and workshops around W3C specifications. &lt;a href=&quot;https://www.meetup.com/Fronteers-NL/&quot;&gt;Subscribe to our Meetup channel&lt;/a&gt; to stay informed. (And don&#39;t be afraid of occasional Dutch texts; all W3C-themed activities will take place in English.)&lt;/p&gt;
  6568. &lt;p&gt;Communications and discussions about our W3C membership take place on our &lt;a href=&quot;https://fronteersnl.slack.com/&quot;&gt;Slack channel&lt;/a&gt;. Although most of our channels are in Dutch, the W3C channel is entirely in English. Rachel participates in the discussions as well. Non-members are explicitly invited to &lt;a href=&quot;https://fronteers-slack.herokuapp.com/&quot;&gt;join&lt;/a&gt; - the more people we have, the better we can function.&lt;/p&gt;
  6569. &lt;h2&gt;Our membership&lt;/h2&gt;
  6570. &lt;p&gt;We spent part of the time on outlining how our membership is going to work in practice.&lt;/p&gt;
  6571. &lt;p&gt;Rachel will notify us of interesting upcoming specs, or important changes to existing ones. Also, she will spend time figuring out what&#39;s going on at W3C, and identifying issues that Fronteers should have an opinion on. Fronteers opinions count as web developers&#39; opinions, and W3C loves feedback from the field. Therefore it could be that our opinions carry more weight than our formal vote would suggest.&lt;/p&gt;
  6572. &lt;p&gt;We have one vote out of 451 at W3C. Rachel will cast that vote, but Fronteers members can instruct her how to cast our vote. The issue here is that there isn&#39;t all that much voting going on. Rachel is going to find out how much there actually is.&lt;/p&gt;
  6573. &lt;p&gt;Occasionally there appears to be a vote in the Advisory Committee, where Rachel is our representative as well. The AC discusses policies for W3C as a whole, but the details are unclear at this moment. Fortunately there is a course for new AC members, and Rachel is going to participate. She&#39;ll likely have a better understanding of what the AC actually does after she&#39;s done.&lt;/p&gt;
  6574. &lt;p&gt;W3C does not vote on specifications. Instead, it uses an objection-based system. That is, members can object to a spec, or even a feature. If that happens, the objections are discussed and resolved, if possible. If no one has objections (and that&#39;s usually the case), the spec moves on. Usually it&#39;s browser vendors that object.&lt;/p&gt;
  6575. &lt;p&gt;Theoretically, Fronteers could raise objections. This is simultaneously a very powerful and a very annoying thing to do, and raising objections over minor issues will get you taken less seriously by other members. Therefore this should be an action of last resort, and not something to be used on a whim. Still, if the situation is just right, Rachel might use our objection to call for a pause in order to get more web developer feedback - but if she does so, we&#39;re supposed to deliver good, to-the-point, reality-grounded feedback.&lt;/p&gt;
  6576. &lt;p&gt;Also, we might use our influence and the formal W3C procedures to stop one browser from being able to define how the web should be - if that should become necessary.&lt;/p&gt;
  6577. &lt;h2&gt;Fronteers tasks&lt;/h2&gt;
  6578. &lt;p&gt;Other than supporting Rachel, Fronteers can do a few more quite important things. We need to gear up to fulfill our role as representatives of web developers. We need a larger cohort of people involved in the spec-creation process that Rachel can warn if something important is coming up. We also need to know what we&#39;re talking about, which means studying the specs. This, and not voting or raising objections, is the meat of our membership.&lt;/p&gt;
  6579. &lt;p&gt;Another important issue is creating test cases and test suites. Theoretically, a specification is supposed to have a full test suite that browser vendors can use to test their implementation. In practice - not so much. The spec writers don&#39;t have a lot of time, and volunteers are hard to find because writing good tests is really really hard. (I should know; I&#39;ve done it for fifteen years.) On tbe plus side, writing tests is an excellent way to really get to know a specification.&lt;/p&gt;
  6580. &lt;h2&gt;Outreach to JavaScripters&lt;/h2&gt;
  6581. &lt;p&gt;Fronteers has a secondary objective with our W3C membership: growing our own membership. One section of the web development world that&#39;s somewhat underrepresented at Fronteers is JavaScript developers. We could use our W3C membership to reach out to them.&lt;/p&gt;
  6582. &lt;p&gt;Although ECMA, and not W3C, sets the direction of JavaScript the language, W3C still specifies some JavaScript APIs such as Houdini or the CSS Object Model, which are also interesting to JavaScripters. Also, the CSS-in-JS discussion that&#39;s currently going on can be traced back to the fact that currently there is no good way of organising your CSS declarations. This is something W3C could conceivably do something about. Also, this is something we could organise a meet-up around, maybe together with &lt;a href=&quot;https://www.meetup.com/AmsterdamJS/&quot;&gt;AmsterdamJS&lt;/a&gt;. (Also, too, maybe we should consider an ECMA membership in the long run?)&lt;/p&gt;
  6583. &lt;h2&gt;Workshop spec reading&lt;/h2&gt;
  6584. &lt;p&gt;On Friday, Rachel gave her first Spec Workshops, where we read the entire &lt;a href=&quot;https://drafts.csswg.org/css-multicol/&quot;&gt;Multicol Editor&#39;s Draft&lt;/a&gt; and gave detailed feedback. (Note that the draft has already changed in order to accomodate part of what we discussed.)&lt;/p&gt;
  6585. &lt;p&gt;This was very interesting, not only to us participants, but also to Rachel herself, whose attention was called to several problems she hadn&#39;t noted before; for instance with terminology, unclear sentences, wrong examples, and so on.&lt;/p&gt;
  6586. &lt;p&gt;I didn&#39;t keep detailed notes during the workshop, so this brief summary will have to do. We did decide that this was definitely something we should repeat, since it yielded quite a bit of good, actionable feedback.&lt;/p&gt;
  6587. &lt;h2&gt;Conclusion&lt;/h2&gt;
  6588. &lt;p&gt;All in all Rachel&#39;s first quarterly report was a resounding success that gave us a lot of useful pointers for the next few months. Becoming an influential W3C member is going to be a lot of work, but we&#39;ve done a tiny bit of that work last week.&lt;/p&gt;
  6589. </content>
  6590.  </entry>
  6591.  <entry>
  6592.    <title>Some sad news about Spring Conference</title>
  6593.    <link href="https://www.fronteers.nl/nl/blog/2019/02/some-sad-news-about-spring-conference"/>
  6594.    <updated>2019-02-04T00:00:00Z</updated>
  6595.    <id>https://www.fronteers.nl/nl/blog/2019/02/some-sad-news-about-spring-conference</id>
  6596.    <content xml:lang="nl" type="html">&lt;p&gt;Fronteers&#39; &lt;em&gt;reason d’etre&lt;/em&gt; is to support and educate front-end developers in the Netherlands. For this reason since 2007, we have held a yearly conference which over the last decade-and-a-bit has grown to attract more than 500 front-enders from all over Europe. In 2016, a one-off Spring Conference was held as a special event, and inspired by the success of that conference we were looking forward to hosting another on april 5th this year.&lt;/p&gt;
  6597. &lt;p&gt;Unfortunately we have had to simmer down our ambitions and have had to make the difficult decision to cancel Spring Conference. The main reason is that our timing wasn&#39;t right: the amount of effort required to coordinate, organise, follow up and make decisions was more than the time we had available between re-energizing ourselves after the main conference and the holiday season. We were too late in getting all the materials necessary to announce ticket sales on time.&lt;/p&gt;
  6598. &lt;p&gt;While selling tickets is important for any paid event, Fronteers is not a commercial enterprise. We organise meetups, conferences and workshops to help better our fellow developers and improve the tech climate in the Netherlands. It is important to us to do this right, or not at all. We should definately not attempt to sell tickets, and risk letting speakers down or having our attendees booking non-refundable hotel rooms. This is why we announce this cancellation today and not further down the road.&lt;/p&gt;
  6599. &lt;p&gt;Naturally the speakers that agreed to come have been informed and will be covered for any costs made so far. People who bought an early bird ticket for Spring Conference will be given the choice to be reimbursed, or be given a discount for the conference in October.&lt;/p&gt;
  6600. &lt;p&gt;Even though cancelling Spring Conference was an incredibly tough decision to make, especially for the conference committee that spent a lot of time on curating a wonderful line-up, we do know front-enders in the Netherlands aren’t left without some great alternatives to attend this spring and we heartily recommend them:&lt;/p&gt;
  6601. &lt;ul&gt;
  6602. &lt;li&gt;&lt;a href=&quot;https://react.amsterdam/&quot;&gt;React Amsterdam&lt;/a&gt;, April 10-12, 2019, Kromhouthal, Amsterdam&lt;/li&gt;
  6603. &lt;li&gt;&lt;a href=&quot;https://www.frontendunited.org/&quot;&gt;Frontend United&lt;/a&gt;, May 17-18, Utrecht&lt;/li&gt;
  6604. &lt;li&gt;&lt;a href=&quot;https://cssday.nl/2019&quot;&gt;CSS Day/UI Day&lt;/a&gt;, June 13-14, Compagnietheater, Amsterdam (we are in the process of discussing a member discount for CSS Day, so please contact the board if you&#39;re interested to go!)&lt;/li&gt;
  6605. &lt;/ul&gt;
  6606. &lt;p&gt;In the meantime, the conference team has already started working on the line-up for the fall Fronteers Conference (to be held October 3 and 4)! &lt;em&gt;Watch this space for more news on that soon!&lt;/em&gt;&lt;/p&gt;
  6607. </content>
  6608.  </entry>
  6609.  <entry>
  6610.    <title>Fronteers is W3C lid</title>
  6611.    <link href="https://www.fronteers.nl/nl/blog/2019/01/fronteers-is-w3c-lid"/>
  6612.    <updated>2019-01-30T00:00:00Z</updated>
  6613.    <id>https://www.fronteers.nl/nl/blog/2019/01/fronteers-is-w3c-lid</id>
  6614.    <content xml:lang="nl" type="html">&lt;p&gt;Vorige week is Fronteers dan eindelijk officieel lid van W3C geworden, en is Rachel Andrew officieel onze vertegenwoordiger geworden, zoals we hebben besloten op de laatste ALV.&lt;/p&gt;
  6615. &lt;p&gt;Er waren wat bureaucratische hikjes, waardoor het allemaal iets langer heeft geduurd dan gedacht, maar we zijn er nu toch echt. Kijk voor de grap eens &lt;a href=&quot;https://www.w3.org/Consortium/Member/List#xF&quot;&gt;hier op de W3C ledenlijst&lt;/a&gt; of &lt;a href=&quot;https://www.w3.org/Style/CSS/members.en.php3&quot;&gt;op de CSS Working Group ledenlijst&lt;/a&gt;. Staat cool, toch?&lt;/p&gt;
  6616. &lt;p&gt;Fronteers is echter niet lid geworden omdat dat zo cool staat. We wilden zorgen dat front-end ontwikkelaars vertegenwoordigd worden in W3C - check. We wilden zorgen dat Rachel Andrew haar werk voort kan zetten - check. We willen op een of andere manier zorgen dat front-end ontwikkelaars wereldwijd zich meer betrokken gaan voelen bij het werk dat W3C doet - dit wordt een lange-termijnproject, dus nog geen check.&lt;/p&gt;
  6617. &lt;p&gt;En wat willen we verder eigenlijk? Hoe gaan we front-enders wereldwijd meer betrekken? Willen we bepaalde CSS-ideeën sneller implementeren - of juist tegenhouden? Willen we een vinger in de pap en een vertegenwoordiger in de commissie voor meer dan alleen CSS?&lt;/p&gt;
  6618. &lt;p&gt;Om deze en dergelijke vragen te bespreken, gaan we een serie meet-ups organiseren. De eerste daarvan staat al vast: &lt;a href=&quot;https://www.meetup.com/Fronteers-NL/events/258152423/&quot;&gt;donderdag 7 februari te Amsterdam&lt;/a&gt;. Rachel zal een overzicht geven van haar werk bij W3C, en daarna gaan we in discussie over Fronteers en W3C, waarbij waarschijnlijk de bovenstaande vragen aan bod gaan komen.&lt;/p&gt;
  6619. &lt;p&gt;Dus: schrijf je in. Of niet, maar denk dan in elk geval over de vragen na, en geef je antwoord in een comment of bij een latere meet-up.&lt;/p&gt;
  6620. &lt;p&gt;In elk geval is dit hopelijk het begin van iets moois en goeds.&lt;/p&gt;
  6621. </content>
  6622.  </entry>
  6623.  <entry>
  6624.    <title>De eerste workshops van 2019</title>
  6625.    <link href="https://www.fronteers.nl/nl/blog/2019/01/de-eerste-workshops-van-2019"/>
  6626.    <updated>2019-01-07T00:00:00Z</updated>
  6627.    <id>https://www.fronteers.nl/nl/blog/2019/01/de-eerste-workshops-van-2019</id>
  6628.    <content xml:lang="nl" type="html">&lt;p&gt;Er zijn nog plaatsen beschikbaar bij de eerste workshops van 2019! Eind januari kun je met Phil Hawsworth het serverless landschap verkennen in &lt;a href=&quot;https://www.fronteers.nl/workshops/workshop-netlify-static-site-generators&quot;&gt;Netlify en static site generators&lt;/a&gt;. Een maand later volgt een deep dive in &lt;a href=&quot;https://www.fronteers.nl/workshops/progressive-web-apps&quot;&gt;Progressive Web Apps&lt;/a&gt;. Ook in 2019 krijgen leden 100 euro korting op de toegangsprijs, en betaal je dus slechts 150 euro voor een leerzame dagtraining!&lt;/p&gt;
  6629. </content>
  6630.  </entry>
  6631.  <entry>
  6632.    <title>Met Fronteers het nieuwe jaar in</title>
  6633.    <link href="https://www.fronteers.nl/nl/blog/2018/12/met-fronteers-het-nieuwe-jaar-in"/>
  6634.    <updated>2018-12-24T00:00:00Z</updated>
  6635.    <id>https://www.fronteers.nl/nl/blog/2018/12/met-fronteers-het-nieuwe-jaar-in</id>
  6636.    <content xml:lang="nl" type="html">&lt;p&gt;Het afgelopen jaar, mijn eerste jaar als voorzitter van Fronteers, was een veelbewogen jaar! Als doorsnee lid had ik geen idee van het werk dat er in zit om de vereniging draaiend te houden. Laat staan hoeveel energie er in gaat steken nieuwe initiatieven te ontplooien! Ik ben tevreden dat er zoveel gelukt is:&lt;/p&gt;
  6637. &lt;p&gt;We waren in 2018 voor het eerst in een aantal jaar weer aanwezig op de &lt;a href=&quot;https://newyear.isoc.nl/&quot;&gt;ISOC nieuwjaarsborrel&lt;/a&gt;, hielden een eigen nieuwjaars- en zomerborrel, een flink aantal succesvolle workshops, voor het eerst het &lt;a href=&quot;https://fronteers.nl/congres/2018&quot;&gt;Fronteers congres&lt;/a&gt; in het DeLaMar theater, en we stemden tijdens de ALV vóór het voorstel om als Fronteers lid te worden van het W3C.
  6638. Ondertussen is het lidmaatschap van het W3C een feit en treffen Peter-Paul Koch en Thijs Reijgersberg de laatste voorbereidingen aan een speciale meetup met Rachel Andrew (onze toekomstige vertegenwoordigster binnen het W3C) voor een workshop spec-reading op 7 en 8 februari.&lt;/p&gt;
  6639. &lt;p&gt;De rest van de vereniging zit ook niet stil: Zo is onze &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/commissies/congres&quot;&gt;congrescommissie&lt;/a&gt; al druk bezig met het uitzoeken en uitnodigen van sprekers voor Spring Conference. Dit eendaags congres wordt in april gehouden. Ik mag nog niet zoveel verklappen, maar de vier sprekers die tot nu toe ja hebben gezegd zijn niet de minsten! &lt;a href=&quot;http://tickets.fronteers.nl/&quot;&gt;Ik zou het wel weten ;-)&lt;/a&gt;&lt;/p&gt;
  6640. &lt;p&gt;In januari gaan het bestuur en het marketingteam samen een branding- en identiteitssessie doen. De &lt;a href=&quot;https://www.areyoureadyfortakeoff.nl/work/fronteers-2016/&quot;&gt;designers die je kent van de huisstijl van Fronteers Conference&lt;/a&gt; gaan ons in het nieuwe jaar als overkoepelende vereniging helpen met het neerzetten van een huisstijl waar we de komende jaren herkenbaar mee voor de dag kunnen komen. Hier kijk ik ontzettend naar uit. Het congres is natuurlijk een paradepaardje van de vereniging, maar voor veel van onze internationale bezoekers lijkt het net alsof Fronteers en Fronteers Conference een en hetzelfde zijn. Het is hoog tijd dat we uit die schaduw stappen en ons wat meer laten zien!&lt;/p&gt;
  6641. &lt;p&gt;Ook in het eerste kwartaal vindt er een &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2019/ladies-dinner&quot;&gt;Ladies&#39; Dinner&lt;/a&gt; plaats (donderdag 10 januari), en doen we op vrijdag 25 januari een kick-off voor de nieuw te vormen websitecommissie! Na druk gesprek op Slack is gebleken dat een aantal mensen (waaronder ikzelf) wel zin hebben om op een open source wijze aan de slag te gaan met een nieuwe website. Het is de bedoeling dat de commissie een vaste wekelijkse bijdrage doet (om het momentum te behouden) maar dat iedereen bij wijze van pull requests kan bijdragen. We hopen met bijzondere gasten dit proces aan te kleden op een leuke en leerzame manier! Lijkt dit je leuk, reageer dan even bij dit blogbericht.&lt;/p&gt;
  6642. &lt;p&gt;En wat te denken van de workshops die nu al zijn ingepland voor het nieuwe jaar? Op 25 januari komt Phil Hawksworth over voor een &lt;a href=&quot;https://fronteers.nl/workshops/workshop-netlify-static-site-generators&quot;&gt;workshop over Netlify en Static Site Generators&lt;/a&gt;. Netlify is een ultra-moderne webhost waar veel bekende collega-developers al tijden razendenthousiast over zijn. Een maand later, op 22 februari, komt Jad Joubran met een &lt;a href=&quot;https://fronteers.nl/workshops/progressive-web-apps&quot;&gt;workshop Progressive Web Apps&lt;/a&gt;. En later in het jaar komt &lt;a href=&quot;https://www.kassenaar.com/&quot;&gt;Peter Kassenaar&lt;/a&gt; langs om een Nederlandstalige vervolgworkshop te geven over Javascript.&lt;/p&gt;
  6643. &lt;p&gt;Alleen al opsommen waar we op dit moment mee bezig zijn laat zien dat we druk zijn, en dan zijn er nog een aantal zaken waar het echt te vroeg voor is om ze aan te kondigen. Maar dat 2019 een goed jaar wordt voor de vereniging, daar twijfel ik niet aan! Jullie gaan het merken :-)&lt;/p&gt;
  6644. &lt;p&gt;Mocht er in de loop van het jaar nog tijd, energie en menskracht over zijn, dan zou ik het zelf in ieder geval heel tof vinden om verder na te denken over wat Fronteers voor front-end developers kan betekenen. Een tijd geleden schreef ik bijvoorbeeld een voorsteltekst voor werkgevers die niet goed bekend zijn met ons expertisegebied - &#39;Hoe schrijf je een front-end vacature&#39; - en daar hoop ik nog steeds iets meer mee te doen. Zo wordt er namelijk naar mijn idee in veel te veel vacatures gevraagd naar ervaring met tools, en niet naar basiskennis en kernkwaliteiten.&lt;/p&gt;
  6645. &lt;p&gt;Ik vind het ook leuk om in mijn vrije tijd rustig om me heen te kijken naar de parallellen die te vinden zijn met andere (vak)verenigingen. Bijvoorbeeld de NVM, waarvan de beroepstitel makelaar (net als &amp;quot;front-end developer&amp;quot;) niet beschermd is (al was het dat bij hen ooit wel). Hoe gaan zij daar mee om, op welke manier houden zij zichzelf relevant? En welke dingen doet bijvoorbeeld een organisatie als het Keurmerk Kwaliteitsvakman voor hun leden waar wij iets van kunnen opsteken?
  6646. Moeten we aan bedrijven met kleine front-end teams meer consultancy taken aan gaan bieden? Bijvoorbeeld het uitvoeren van onafhankelijke code-reviews, usability-onderzoeken en webtoegankelijkheidstests? Moeten we een grotere rol spelen in het organiseren van meetups dan we nu doen?&lt;/p&gt;
  6647. &lt;p&gt;Je merkt het: genoeg energie en ideëen om een positieve invulling te geven aan het verenigingswerk.
  6648. Mocht je hierover eens met me willen babbelen, kun je me vinden op &lt;a href=&quot;https://www.fronteers.nl/blog/2016/02/fronteers-op-slack&quot;&gt;Slack&lt;/a&gt; en op &lt;a href=&quot;https://twitter.com/asinnema&quot;&gt;Twitter&lt;/a&gt;!&lt;/p&gt;
  6649. &lt;h2&gt;Over Anneke Sinnema&lt;/h2&gt;
  6650. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/anneke.png&quot; alt=&quot;Foto van anneke&quot; class=&quot;floating-portrait&quot; /&gt;
  6651. Anneke Sinnema is een freelance front-end developer uit Enschede. Met haar voorzitterschap van Fronteers probeert Anneke een positieve bijdrage te leveren aan het dagelijks werk van collega developers.
  6652. &lt;p&gt;Donatie
  6653. Mijn donatie gaat naar &lt;a href=&quot;https://www.unicef.nl/wat-is-unicef-basics&quot;&gt;Unicef&lt;/a&gt;, als bijdrage voor hun actie om kinderen in het Syrisch oorlogsgebied te voorzien van kleding, dekens en en schoon water.&lt;/p&gt;
  6654. </content>
  6655.  </entry>
  6656.  <entry>
  6657.    <title>Fuck the system, be nice</title>
  6658.    <link href="https://www.fronteers.nl/nl/blog/2018/12/fuck-the-system-be-nice"/>
  6659.    <updated>2018-12-23T00:00:00Z</updated>
  6660.    <id>https://www.fronteers.nl/nl/blog/2018/12/fuck-the-system-be-nice</id>
  6661.    <content xml:lang="nl" type="html">&lt;p&gt;Het is de tijd voor de goede voornemens. Laat me je helpen een fijnere collega te worden met 5 Ware Waarheden om een leukere collega en een betere front-ender te zijn.&lt;/p&gt;
  6662. &lt;h2&gt;TL;DR:&lt;/h2&gt;
  6663. &lt;ul&gt;
  6664. &lt;li&gt;wees bescheiden&lt;/li&gt;
  6665. &lt;li&gt;omring je niet met klonen van jezelf&lt;/li&gt;
  6666. &lt;li&gt;deel je kennis&lt;/li&gt;
  6667. &lt;li&gt;laat je inspireren door kunst&lt;/li&gt;
  6668. &lt;li&gt;zeur niet&lt;/li&gt;
  6669. &lt;/ul&gt;
  6670. &lt;h2&gt;1: Jij bent niet je gebruiker&lt;/h2&gt;
  6671. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/assumption-is-the-mother-of-all-fuck-ups-576x576.png&quot; alt=&quot;Tegeltje met de tekst: &amp;quot;Assumption is the mother of all fuck ups&amp;quot;&quot; /&gt;&lt;/p&gt;
  6672. &lt;p&gt;Eigenlijk zijn toegankelijkheidsrichtlijnen een grote les in nederigheid. Elk succescriterium is een herinnering: niet iedereen is zoals jij. Er zijn mensen die het web anders gebruiken dan jij. Ja echt, sorry. Je kunt nooit alle mogelijke scenario’s testen en ondervangen. Maar je kunt er wel rekening mee houden dat je site-bezoeker niet exact denkt of doet als jij verwacht.&lt;/p&gt;
  6673. &lt;p&gt;Er zijn bijvoorbeeld mensen die amper een muis gebruiken en alles met een toetsenbord doen. Dus daarom test je of je site het doet met alleen toetsenbordbediening. Er zijn mensen die zo kippig zijn dat ze hun computer in hoog-contrastmodus gebruiken met een heel grote letter. Daarom gebruik je bijvoorbeeld schaalbare lettergroottes in plaats van pixels, want je wil dat de tekst fatsoenlijk meegroeit als de gebruiker inzoomt, om maar eens succescriterium 1.4.4 als voorbeeld te nemen. En je test of je site nog steeds begrijpelijk is als geen scripts of stylesheets geladen zijn. Er zijn volslagen idiote types – zoals ik – die beleefd alle cookies weigeren omdat ze zo min mogelijk gevolgd willen worden op het web (en ook om het web stuk te maken, ook dat). Ik accepteer alleen cookies als ik moet inloggen of als ik een webshopwinkelwagentje vul. Als je cookies nodig hebt, is het dus handig dat je eerst checkt of er überhaupt cookies geplaatst mogen worden.&lt;/p&gt;
  6674. &lt;ul&gt;
  6675. &lt;li&gt;Hoe houd je een website begrijpelijk als je weet dat ‘ie gebruikt kan worden via een desktop, een screenreader, iemands commandline, een&lt;/li&gt;
  6676. &lt;li&gt;ereader, een smartwatch? Hou je er rekening mee dat niet iedereen zo&lt;/li&gt;
  6677. &lt;li&gt;goed kan lezen als jij? Ingewikkeld? Ingewikkelde dingen simpel maken is het mooiste in dit vak.&lt;/li&gt;
  6678. &lt;/ul&gt;
  6679. &lt;h2&gt;2: Liever één goed elftal dan elf goede ééntallen&lt;/h2&gt;
  6680. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/zoeaven.jpg&quot; alt=&quot;Tuterdetuut: alle soldaten in het gelid. 12 Zoeaven (Franse militairen) met een geweer en een pofbroek.&quot; /&gt;&lt;/p&gt;
  6681. &lt;p&gt;Tegeltjesgrootmeester Cruyff zei: “&lt;a href=&quot;https://tegelizr.nl/tegeltje/wat-heb-je-nou-liever-n-goed-elftal-of-elf-goede-ntallen&quot;&gt;Wat heb je nou liever: één goed elftal of elf goede ééntallen?&lt;/a&gt;” Ik weet niks over voetbal. Maar ik weet wel dat diversiteit je team goed doet.&lt;/p&gt;
  6682. &lt;p&gt;Het is makkelijker om je in te leven in je gebruikers als je meerdere perspectieven aan het werk hebt. Dat kan gaan om subtiele dingen als
  6683. woorden. Als je een webshop hebt voor de Nederlandse en Belgische markt, tutoyeer je dan wel of niet? Het kan ook iets minder subtiel, zoals een zeeppomp die &lt;a href=&quot;https://www.youtube.com/watch?v=1lgDiAInFLY&quot;&gt;donkere huid niet herkent&lt;/a&gt;. Of die tijd dat Google een zoekopdracht als “She invented” corrigeerde naar “&lt;a href=&quot;http://blogoscoped.com/archive/2007-05-24-n36.html&quot;&gt;He invented&lt;/a&gt;”.&lt;/p&gt;
  6684. &lt;p&gt;Een diverser team voorkomt dat je verder kijkt dan een doelgroep van “latte drinkende, blanke, hoger opgeleide, brildragende, rechtshandige Randstedelingen met een licht bierbuikje”. Bekijk de &lt;a href=&quot;https://vimeo.com/277243126&quot;&gt;presentatie van Jenny Shen op CSS Day 2018&lt;/a&gt; nog eens.&lt;/p&gt;
  6685. &lt;h2&gt;3: Door kennis te delen, vermeerder je kennis&lt;/h2&gt;
  6686. &lt;p&gt;Als je bang bent voor kritiek is het doodeng om je werk te laten zien aan je collega’s. Door dat niet te doen bespaar je jezelf weliswaar de kans op kritiek, maar je ontneemt je jezelf ook de kans om iets te leren. Je collega’s weten niet wat je kunt en hebben geen idee waar ze je bij zouden kunnen helpen. En ze leren niks van je. Door alles stilletjes voor jezelf te houden, ontloop je ook alle complimenten. Dat moeten we niet willen met z’n allen.&lt;/p&gt;
  6687. &lt;p&gt;Schrijf stukjes, geef presentaties. Hou je portfolio manisch up-to-date. Wees trots op wat je maakte. En realiseer je dat als je volgend jaar kijkt naar wat je dit jaar maakte, je alweer een stuk meer weet en het misschien heel anders zou doen. Een dag niet geleerd is een dag niet geleerd tenslotte.&lt;/p&gt;
  6688. &lt;p&gt;Het web is bedoeld om open te zijn. In 20 jaar tijd is een totaal nieuwe infrastructuur ontstaan voor het delen en vermeerderen van kennis. En als je wilt kun je daaraan bijdragen. Help bij grote of kleine open source projecten. Linux, WordPress (of Drupal, ja ja…), Wikipedia, allemaal voorbeelden van inmiddels essentiële open source projecten door duizenden vrijwilligers voor miljoenen dankbare gebruikers.&lt;/p&gt;
  6689. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/be-the-pull-request.png&quot; alt=&quot;Foto van Mahatma Ghandi met de tekst: &amp;quot;Be the pull request you want to see in this world - het handige neefje van Mahatma Ghandi&amp;quot;&quot; /&gt;&lt;/p&gt;
  6690. &lt;h2&gt;4: Ars longa, vita brevis (het leven is kort, de kunst is lang)&lt;/h2&gt;
  6691. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/piet-mondriaan-1921---composition-en-rouge-jaune-bleu-et-noir-768x766.jpg&quot; alt=&quot;Schilderij van Piet Mondriaan met vlakken in diverse kleuren waaronder rood, blauw, geel, wit, zwart en grijs&quot; /&gt;&lt;/p&gt;
  6692. &lt;p&gt;Er zijn bibliotheken volgeschreven over kunststromingen en hoe die ons dagelijks leven hebben beïnvloed. We gebruiken het woord als pittoresk om een landschap te waarden; daarmee zeggen we eigenlijk dat het landschap net zo mooi is als een plaatje van een landschap.&lt;/p&gt;
  6693. &lt;p&gt;Aangezien het web nog jong is zijn er nog niet veel kunsthistorische beschouwingen geschreven over webdesign. Maar we zijn als webbouwers schatplichtig aan vele kunstenaars en ambachtslui voor ons. Denk aan compositie en vlakverdeling. Denk aan typografie. Aan kleurgebruik. Ons werk is onmogelijk zonder de grote makers en doeners voor ons.&lt;/p&gt;
  6694. &lt;p&gt;Dus daarom: dompel jezelf onder in design, kunst, boeken. Wat je daar leert komt op een onverwacht moment weer van pas.&lt;/p&gt;
  6695. &lt;p&gt;Voorbeelden? Zie Jen Simmons lekker klooien met Mondriaan en CSS Grid: &lt;a href=&quot;https://www.youtube.com/watch?v=qNtJ5p3h2A4&quot;&gt;responsive Mondrian (YouTube)&lt;/a&gt; / &lt;a href=&quot;https://codepen.io/jensimmons/pen/mrNvPZ/&quot;&gt;responsive Mondrian (codepen)&lt;/a&gt;. En dit &lt;a href=&quot;http://www.la-trahison-des-images.be/&quot;&gt;is zeker geen responsive Magritte-pijp&lt;/a&gt;.&lt;/p&gt;
  6696. &lt;h2&gt;5: Fuck the system, be nice&lt;/h2&gt;
  6697. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/wim-heitinga-spreekt.png&quot; alt=&quot;Screenshot van een kritisch linkedin-commentaar van een front-ender. Tekst: &amp;quot;Echt serieus? Wat een slechte websites hebben overheidsinstanties. Waar gaat al dat geld naar toe? Gemeente Rotterdam, Gemeente Delft. Ik als webdeveloper kom er zelfs niet uit. Ik krijg programmeererrors te zien. WTF?!? Hebben jullie dan niet gehoort van gebruiksvriendelijkheid, UX? Ik wil best een presentatie komen geven, want het is duidelijk nog niet bekend bij jullie.. #shittysites #vanonzecenten I can’t believe it&amp;quot;&quot; /&gt;&lt;/p&gt;
  6698. &lt;p&gt;Het screenshot hiernaast was de aanleiding voor dit artikeltje. Dit is niet de manier om je professioneel te presenteren. Dit is een onderdeel van een zeur- en afzeikcultuur waar we vanaf moeten. Wat weet je nou na het lezen van dit berichtje? We weten dat deze Wim een probleem had; ergens kwamen programmeerfouten aan het licht. Kun je daaruit afleiden dat overheidsinstanties een slechte site hebben? Van iemand die alleen klaagt en geen aanwijzing geeft over waar wat misgaat en ook geen oplossing aandraagt verwacht ik geen constructieve presentatie over UX of gebruiksvriendelijkheid. Met dit soort berichten diskwalificeer je jezelf.&lt;/p&gt;
  6699. &lt;p&gt;Er zit ook een lichte vorm van zelfoverschatting in. Dat Wim het niet begrijpt, betekent niet dat anderen dom zijn. Ik had het net over de angst voor kritiek. Om die angst te verminderen moeten we milder zijn voor elkaar en over elkaars werk. Sowieso staat voorop: die collega is een mens, net als jij. Van louter hot-takes wordt de wereld niet beter. Wim had beter kunnen zeggen: “Ik zag op die-en-die plek deze programmeerfout. En dit is hoe je die oplost.”&lt;/p&gt;
  6700. &lt;p&gt;Sociale media lijken een lavastroom van permanente woede. Wie de wereld door de bril van sociale media bekijkt, denkt al gauw dat de wereld alleen bestaat uit ellende en #ophef. Maar dit is voor een groot gedeelte het gevolg van hoe dat soort media werken. Kranten kunnen niet zonder dagelijkse boosmakertjes. De beste remedie tegen dat soort ophef is je te realiseren dat de veel berichten geplaatst worden als mensen op de plee zitten. Is wel zo.&lt;/p&gt;
  6701. &lt;blockquote&gt;
  6702. &lt;p&gt;“Algorithms that maximize attention give an advantage to negative messages. People tend to react more to inputs that land low on the brainstem. Fear and anger produce a lot more engagement and sharing than joy. The result is that the algorithms favor sensational content over substance.”&lt;/p&gt;
  6703. &lt;/blockquote&gt;
  6704. &lt;p&gt;Daarom: doorbreek de sleur van het afzeiken en het zeuren. Wees specifiek en oplossingsgericht. Kraak niemand af.
  6705. En als je ideeën, systemen wilt afkraken: gebruik humor en argumenten.&lt;/p&gt;
  6706. &lt;p&gt;Fuck the system, be nice.&lt;/p&gt;
  6707. &lt;h2&gt;Over Paul van Buuren&lt;/h2&gt;
  6708. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/paul.jpg&quot; alt=&quot;Foto van Paul van Buuren&quot; class=&quot;floating-portrait&quot; /&gt;
  6709. Paul van Buuren maakt websites sinds 1998. Zijn vooropleiding heeft niks met webdesign te maken, want dat bestond domweg nog niet. Onder de noemer WBVB Rotterdam werkt hij als zelfstandige voor diverse opdrachtgevers. Z&#39;n specialiteit is het maken van toegankelijke WordPress-sites. Hij praat opvallend vaak in algemeenheden en tegeltjeswijsheden.
  6710. Donatie:
  6711. Z&#39;n donatie gaat naar KIKA, Stichting Kinderen Kankervrij. Ik weet hoe erg het is als kinderen ziek worden en ik wil zoveel mogelijk doen om ziekte te voorkomen of te genezen.
  6712. </content>
  6713.  </entry>
  6714.  <entry>
  6715.    <title>Wat ik leerde van twaalf uur tekenen tijdens Fronteers</title>
  6716.    <link href="https://www.fronteers.nl/nl/blog/2018/12/wat-ik-leerde-van-twaalf-uur-tekenen-tijdens-fronteers"/>
  6717.    <updated>2018-12-22T00:00:00Z</updated>
  6718.    <id>https://www.fronteers.nl/nl/blog/2018/12/wat-ik-leerde-van-twaalf-uur-tekenen-tijdens-fronteers</id>
  6719.    <content xml:lang="nl" type="html">&lt;p&gt;Naast de vele technische blogposts in de adventskalender, gaat deze post over tekenen. Of eigenlijk ‘Sketchnotes’. Je ziet ze steeds meer op Twitter en andere sociale media, en het tekenen van die oh zo mooie notities wordt vaak gezien als het grootste goed in de Instagram- en YouTube-wereld. En jazeker, het helpt je vast ook nog om beter te concentreren, de stof te snappen en wellicht ook nog meteen de wereldvrede te starten! Superfijn natuurlijk, maar daar ga ik het niet over hebben. Alhoewel, een beetje wereldvrede is al een mooi streven.&lt;/p&gt;
  6720. &lt;h2&gt;Tekenen? Analoog bedoel je?&lt;/h2&gt;
  6721. &lt;p&gt;Even een paar stappen terug. Ik ben webdesigner en front-ender, maar heb de kunstacademie (grafisch ontwerpen) gedaan. Een potlood is voor mij dus geen eng ding en ik teken al mijn hele leven. Als kind tekende ik bij de boodschappenlijstjes van mijn ouders en tijdens besprekingen teken ik vaak snelle schetsen om voor mezelf dingen duidelijk te maken. Dit was de disclaimer.&lt;/p&gt;
  6722. &lt;p&gt;Na Fronteers 2017 heb ik een aantal snelle schetsen gemaakt over een paar talks. Dat beviel me en het leek me een goede uitdaging (ik maak het mezelf nooit makkelijk) om in 2018 &lt;em&gt;alle&lt;/em&gt; talks te tekenen. Dat bleek afgelopen oktober neer te komen op een stoomcursus sketchnotes. Twee keer acht talks zijn namelijk best veel tekeningen.&lt;/p&gt;
  6723. &lt;h2&gt;Wat ik leerde van het tekenen van 16 talks op Fronteers 2018:&lt;/h2&gt;
  6724. &lt;h2&gt;Sketchnotes verduidelijken een verhaal, maar een goed verhaal helpt ook bij goede sketchnotes&lt;/h2&gt;
  6725. &lt;p&gt;Als het verhaal een duidelijke lijn heeft, kan je je notes goed ordenen en tekent het heel makkelijk. Er zit immers al een structuur in. Bam! Lekker makkelijk. Dat is meteen een goede test van de kwaliteit van het praatje. Dwarrelige praatjes tekenen gewoon veel moeilijker, net als dat het moeilijker is daar gewone geschreven notities van te maken.&lt;/p&gt;
  6726. &lt;p&gt;Daarnaast: Het zijn jouw notes. Als jij dit de hoofdpunten vond en de dingen die je het meest aanspraken, dan zijn die ook goed.&lt;/p&gt;
  6727. &lt;h2&gt;Kies het medium waarin je het snelste werkt.&lt;/h2&gt;
  6728. &lt;p&gt;Snel, sneller, snelst. Iedereen die wel eens een &lt;a href=&quot;https://vimeo.com/110569646&quot;&gt;talk van Sara Soueidan&lt;/a&gt; gezien heeft, weet wat ik bedoel. Dus werk met de tools die voor jou het snelste werken. Voor mij is dat pen en papier, voor anderen wellicht iPad en Pencil. Het nadeel van analoog is dat je niet weet hoe je je ruimte op je papier verdeelt (Hoe lang is de talk? Wat voor hoofdpunten?), maar hey, zoals ik al zei, ik hou er niet van om het mezelf makkelijk te maken.&lt;/p&gt;
  6729. &lt;h2&gt;Neem een voorsprong als dat kan&lt;/h2&gt;
  6730. &lt;p&gt;Ik ken een livetekenaar die van te voren de talks opvraagt om te weten wat de hoofdpunten zijn en zodat hij alvast kan oefenen op bijvoorbeeld het portret van de spreker. Dat is natuurlijk slim! Betere ordening en geen verrassingen.&lt;/p&gt;
  6731. &lt;h2&gt;Omgaan met je ruimte&lt;/h2&gt;
  6732. &lt;p&gt;Je weet vaak juist niet hoe lang de talk duurt, je kent de inhoud niet en je kan dus van tevoren niet werken aan zoiets als een opmaak. Problemen met de verdeling van je ruimte op papier? Dat gebeurt altijd. Pijlen en stippels kunnen dan heel goed een leesvolgorde aangeven. Snel en makkelijk, want snelheid is key.&lt;/p&gt;
  6733. &lt;h2&gt;Gelijke dingen? Gelijke vormen!&lt;/h2&gt;
  6734. &lt;p&gt;Blijken er ineens hoofdpunten in te zitten? Wordt de lijn na de halve talk pas duidelijk? Zet er een lijntje omheen, maak het &lt;em&gt;bold&lt;/em&gt; of onderstreep het. Met andere woorden: zet de termen die bij elkaar horen visueel bij elkaar. Dan kan het vervolgens overal op je vel papier staan, je oog plakt het wel aan elkaar.&lt;/p&gt;
  6735. &lt;h2&gt;Verdeel en heers&lt;/h2&gt;
  6736. &lt;p&gt;Af en toe is het verhaal gewoon niet duidelijk. Onlogische stukjes talk, je raakt de draad een beetje kwijt… Soms zet je dat deel er gewoon niet in en dan blijkt dat je notes veel duidelijker zijn zonder die stukjes. Bedenk dat het &lt;em&gt;jouw&lt;/em&gt; notities zijn, die niet de letterlijke weergave van de spreker hoeven te zijn.&lt;/p&gt;
  6737. &lt;h2&gt;Recycle wat de spreker al voor je heeft gedaan&lt;/h2&gt;
  6738. &lt;p&gt;Komt de spreker met een opsomming? Een duidelijk diagram? WIN! Dat is makkelijk en overzichtelijk! Maak er een duidelijke weergave van in je tekening. Je hebt de tijd toch niet om er zelf wat voor te verzinnen.&lt;/p&gt;
  6739. &lt;h2&gt;Helder moment? Voeg toe!&lt;/h2&gt;
  6740. &lt;p&gt;Voeg vooral eigen conclusies toe als je die trekt. Ik herhaal het nogmaals; het zijn &lt;em&gt;jouw&lt;/em&gt; notities, dus het kan vaak de boel nog meer verduidelijken om die conclusie gewoon toe te voegen.&lt;/p&gt;
  6741. &lt;h2&gt;Sketchnotes als feedback&lt;/h2&gt;
  6742. &lt;p&gt;Ik kreeg een onverwachte opmerking van animator Chris Gannon, één van de sprekers van dit jaar: hij was ontzettend blij met de sketchnotes, want dan kon hij zien of zijn verhaal overkwam en of ik dezelfde hoofdpunten eruit gehaald had. Vervolgens heeft hij ze aan vrouw en kinderen gestuurd, die het ontzettend leuk en onmiskenbaar een talk van hem vonden. Dat was echt een geweldig compliment!&lt;/p&gt;
  6743. &lt;h2&gt;Maar hoe dan?&lt;/h2&gt;
  6744. &lt;p&gt;Je stijl van tekenen? Snel en schetsmatig, geen detail. Kan je niet goed tekenen? Een schets van een smiley of een stick figure is &lt;em&gt;ook&lt;/em&gt; een mensje, die herkent iedereen. En geloof me, tijd voor details heb je &lt;em&gt;echt&lt;/em&gt; niet. Nope. Het zijn tenslotte ‘sketchnotes’, geen ‘Van Gogh notes’. Maar achteraf wat kleurtjes toevoegen kan altijd.&lt;/p&gt;
  6745. &lt;h2&gt;Betere concentratie en wereldvrede&lt;/h2&gt;
  6746. &lt;p&gt;Last but not least: het viel me op dat ik door de concentratie die ik nodig heb tijdens de talks (afdwalen kan niet) heel helder bleef. Iets dat nog wel eens een uitdaging kan zijn met twee dagen conferencen. Daarnaast snap je inderdaad de talks beter omdat je zelf de conclusies trekt en de lijnen legt. Relaxed luisteren is het niet, maar goed, dat kan altijd nog op de volgende keer Fronteers.&lt;/p&gt;
  6747. &lt;p&gt;De sketchnotes van Fronteers 2018 kan je &lt;a href=&quot;https://twitter.com/i/moments/1049300181647282178&quot;&gt;hier&lt;/a&gt; terugkijken&lt;/p&gt;
  6748. &lt;p&gt;Meta alert: Natuurlijk heb ik deze blogpost ook uitgetekend, hieronder de sketchnotes van de sketchnotes!&lt;/p&gt;
  6749. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/blogpost-sketchnotes-anke-small.jpeg&quot; alt=&quot;De sketchnote van de sketchnotes&quot; /&gt;&lt;/p&gt;
  6750. &lt;h2&gt;Over Anke Willems&lt;/h2&gt;
  6751. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/anke.jpeg&quot; alt=&quot;Foto van anke&quot; class=&quot;floating-portrait&quot; /&gt;
  6752. Anke is webdesigner en frontend developer bij Two Kings in Den Haag. Ze houdt zich bezig met alles vanaf het eerste gesprek met de klant, via het inventariseren van alle wensen en daarvoor de UX uitwerken tot het bouwen van de templates. In een eerder leven was ze grafisch ontwerper (met drukwerk en papier en zo), maar digitaal vind ze toch echt leuker. Heeft een grote liefde voor het maken van kleine gebruiksaanwijzingen die op een post-it moeten passen. Motorrijder, breimuts en poezenvrouwtje.
  6753. Donatie
  6754. Het Haags Dierencentrum is het dierenasiel in Den Haag. Ze zijn voor de meest basic dingen, zoals een nieuwe operatietafel of een nieuw dak op de kattenverblijven afhankelijk van donaties. Omdat ik vind dat ze ontzettend goed werk verrichten sponsor ik ze graag.
  6755. </content>
  6756.  </entry>
  6757.  <entry>
  6758.    <title>CSS en JavaScripters</title>
  6759.    <link href="https://www.fronteers.nl/nl/blog/2018/12/css-en-javascripters"/>
  6760.    <updated>2018-12-21T00:00:00Z</updated>
  6761.    <id>https://www.fronteers.nl/nl/blog/2018/12/css-en-javascripters</id>
  6762.    <content xml:lang="nl" type="html">&lt;p&gt;Een probleem dat ik de laatste twee of drie jaar steeds vaker zie opduiken, is dat het lijkt alsof een boel JavaScripters, vooral diegenen die in grote toolchains hebben geïnvesteerd, niet meer zo goed weten hoe CSS werkt.&lt;/p&gt;
  6763. &lt;p&gt;Om daar wat aan te doen heb ik het plan opgevat hier een boek aan te wijden. Dit artikel is een soort voorschot daarop. Bovendien is het leuke van de Fronteers-crew dat de meeste mensen vloeiend zijn in zowel CSS als JavaScript en dat ik hier dus wellicht wat nuttige feedback kan krijgen.&lt;/p&gt;
  6764. &lt;p&gt;Het boek gaat niet noodzakelijkerwijs door CSS heen om aan JavaScripters duidelijk te maken wat de cascade is, waar display voor dient, en hoe backgrounds werken. In plaats daarvan wil ik een aantal basisconcepten en -problemen bespreken en hoop ik op wat feedback - vooral van JavaScripters die wat slechter in CSS zijn.&lt;/p&gt;
  6765. &lt;p&gt;Dit artikel beschrijft twee van die basisconcepten, is geschreven als vingeroefening, en in de hoop wat goede argumenten en suggesties los te maken.&lt;/p&gt;
  6766. &lt;h2&gt;CSS als JSON&lt;/h2&gt;
  6767. &lt;p&gt;Eén idee dat ik had, is om CSS uit te leggen als een soort JSON-bestand. Mijn analogie gaat op dit moment als volgt:&lt;/p&gt;
  6768. &lt;p&gt;Stel dat je de opdracht krijgt om een JSON-bestand te herschrijven. Dit bestand wordt later in de toolchain ingevoerd in een module waar je geen toegang toe hebt maar wel incomplete documentatie van kunt inzien, en die module genereert uit de JSON-gegevens een webpagina. Aan jou de taak deze webpagina te herzien.&lt;/p&gt;
  6769. &lt;p&gt;Een JSON-bestand is geen programma, in plaats daarvan geeft het instructies aan een programma. Deze instructies hoeven niet in een logische volgorde te staan: de properties in een JSON-bestand worden niet noodzakelijkerwijs in volgorde behandeld. In plaats daarvan zoekt de interpretatie-module op naam naar bepaalde properties, en dan naar andere, en maakt het niet uit waar in het JSON file ze staan.&lt;/p&gt;
  6770. &lt;p&gt;Als je aan het werk gaat en proefversies van de JSON door de module heen haalt, merk je al snel dat sommige JSON-wijzigingen tot grote veranderingen in de webpagina leiden. Sommige van die veranderingen zijn beschreven in de documentatie, maar andere niet - of niet erg duidelijk. Naarmate je project vordert, leer je steeds meer over hoe de interpretatie-module eigenlijk werkt en hoe je de JSON moet herschrijven om de webpagina te verbeteren.&lt;/p&gt;
  6771. &lt;p&gt;CSS is een soort van JSON. CSS is ook geen programma of programmeertaal. In plaats daarvan geeft het instructies aan een gespecialiseerde module, de CSS Engine. Deze module zorgt ervoor dat de CSS wordt geīnterpreteerd en er, idealiter, een webpagina op het scherm verschijnt die er uit ziet zoals jij bedoeld hebt.&lt;/p&gt;
  6772. &lt;p&gt;Sommige CSS-declaraties veroorzaken een klein effect: het gebruiken van een bepaald lettertype, een bepaalde kleur, of tekst-decoraties. Andere zijn veel grootschaliger van opzet: ze bepalen de volledige layout van de pagina en in sommige gevallen treden er complexe wisselwerkingen op waardoor je pagina er niet meer uitziet zoals je zou willen. Terwijl je CSS schrijft en herschrijft, begin je steeds beter te begrijpen hoe de CSS engines werken.&lt;/p&gt;
  6773. &lt;p&gt;Slaat deze vergelijking ergens op? Zou dit helpen om CSS-basisconcepten aan JavaScripters uit te leggen? Zijn er wijzigingen nodig? Ik hoor je commentaar graag.&lt;/p&gt;
  6774. &lt;h2&gt;Global scope&lt;/h2&gt;
  6775. &lt;p&gt;Het belangrijkste punt is echter de cascade. De cascade lijkt een van de grootste struikelblokken voor JavaScripters te zijn - niet omdat ze hem niet zouden begrijpen, maar omdat ze hem liever niet gebruiken.&lt;/p&gt;
  6776. &lt;p&gt;Als je klassieke CSS schrijft, is namelijk elke declaratie global; dat wil zeggen dat het op elk element van toepassing is dat aan de selector voldoet. CSS&#39;ers voelen nu een massieve &amp;quot;duh!&amp;quot; vanuit hun onderbuik opborrelen, maar het is belangrijk te beseffen dat dit voor JavaScripters een serieus probleem is. Gij zult uw variabelen niet global maken. En CSS declaraties zijn een soort variabelen, dus die zult gij evenmin global maken. Dus.&lt;/p&gt;
  6777. &lt;p&gt;Ze hebben hier een punt, soort van. Je &lt;code&gt;div + p&lt;/code&gt; selector kan fantastisch werken in de hoofdkolom van je site, maar irritante bij-effecten geven als je eenmaal aan de zijbalk werkt - of erger nog, als je een HTML-snippet van een externe bron aan de pagina toevoegt. We willen graag onze selector beperken tot de hoofdkolom waarvoor hij bedoeld is. In JavaScript-termen: we willen de scope van onze selector bepalen.&lt;/p&gt;
  6778. &lt;p&gt;Voor dit probleem zijn twee oplossingen. De eerste is class names voor alles gebruiken; en dit is het kernconcept van populaire CSS-methodologieën zoals met name BEM. In ons voorbeeld wordt het dus iets als &lt;code&gt;section.hoofdkolom div + p&lt;/code&gt;, en de stijlen werken niet meer door op andere pagina-elementen.&lt;/p&gt;
  6779. &lt;h2&gt;CSS-in-JS&lt;/h2&gt;
  6780. &lt;p&gt;JavaScripters gebruiken echter geen BEM, want echte JavaScripters gebruiken geen CSS-methodologieën. In plaats daarvan wordt het gebruik van CSS-in-JS steeds populairder. Het is belangrijk te beseffen dat CSS-in-JS een afgeleide is van de class name-strategie.&lt;/p&gt;
  6781. &lt;p&gt;Zie bijvoorbeeld &lt;a href=&quot;https://css-tricks.com/css-modules-part-1-need/&quot;&gt;deze introductie tot CSS Modules&lt;/a&gt; of &lt;a href=&quot;https://hackernoon.com/all-you-need-to-know-about-css-in-js-984a72d48ebc&quot;&gt;dit artikel over CSS-in-JS&lt;/a&gt;. In beide gevallen zorgt een script er voor dat de CSS die je in je module definieert, met een class name wordt versterkt en aan de HTML-pagina wordt toegevoegd. Het script genereert dus op de achtergrond de class names die de gegenereerde CSS nodig heeft.&lt;/p&gt;
  6782. &lt;p&gt;Persoonlijk ben ik geen groot voorstander van CSS-in-JS, maar ik geef grif toe dat dat gedeeltelijk komt doordat ik de jaren 2001-05 heb besteed aan front-enders te leren hun CSS en JavaScript juist te scheiden. Het is niet makkelijk om weer afscheid te nemen van deze manier van denken, vooral niet als CSS-in-JS gedeeltelijk staat voor &amp;quot;zo, nu hoef ik geen CSS meer te leren.&amp;quot;&lt;/p&gt;
  6783. &lt;p&gt;Niettemin zal ik CSS-in-JS serieus moeten bestuderen en de mogelijkheid moeten overwegen dat het de juiste oplossing voor het probleem is. Op dit moment weet ik dat nog niet - argumenten en suggesties zijn welkom.&lt;/p&gt;
  6784. &lt;p&gt;Bovendien: zelfs als CSS-in-JS de juiste oplossing is, is de global scope van CSS wel een probleem? Of lijkt het alleen maar een probleem als je teveel JavaScript hebt geschreven en nooit geleerd hebt op een CSS-manier te denken? (Vooropgesteld dat er een CSS-manier van denken bestaat.) Ook hier zijn argumenten en suggesties welkom.&lt;/p&gt;
  6785. &lt;h2&gt;Web Components&lt;/h2&gt;
  6786. &lt;p&gt;Er is maar één oplossing voor het probleem van de global scope die echt anders is dan class names en dat is Web Components, uitgevonden en uitgedragen door Google. (Ligt het aan mij, of lukt het nou echt niet om Web Components serieus van de grond te krijgen in front-end development?)&lt;/p&gt;
  6787. &lt;p&gt;Bij Web Components gebruik je de &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM&quot;&gt;Shadow DOM&lt;/a&gt; om een deel van je HTML te isoleren van de rest van de pagina, en als je in dat deel CSS definieert, geldt die CSS alleen voor het geīsoleerde gedeelte. In zekere zin is dit een betere oplossing dan BEM/CSS-in-JS, aangezien de HTML en CSS nu &lt;em&gt;echt&lt;/em&gt; een aparte module vormen in plaats van class names te gebruiken om dit te emuleren.&lt;/p&gt;
  6788. &lt;p&gt;Zijn Web Components beter dan CSS-in-JS? Slechter? Of zijn ze bedoeld voor anderssoortige situaties? Ook hier zijn argumenten en suggesties welkom.&lt;/p&gt;
  6789. &lt;h2&gt;Conclusie&lt;/h2&gt;
  6790. &lt;p&gt;Om CSS aan JavaScripters te leren, is het noodzakelijk te denken zoals JavaScripters denken. Ik heb geen idee of dat in het bovenstaande gelukt is, maar dat is een van de redenen dat ik dit publiceer. Laat maar weten wat je vindt - vooral als je kracht eerder in JavaScript dan in CSS ligt.&lt;/p&gt;
  6791. &lt;p&gt;En als alles perfect loopt, ligt het boek rond maart 2020 in de winkel.&lt;/p&gt;
  6792. &lt;p&gt;Over Peter-Paul Koch
  6793. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/ppk.jpg&quot; alt=&quot;Foto van ppk&quot; class=&quot;floating-portrait&quot; /&gt;
  6794. Peter-Paul Koch is front-end consultant en congresorganisator te Amsterdam. Hij bestudeerde browsers op https://quirksmode.org, praat wat, schrijft wat, runt samen met Krijn Hoetmer &lt;a href=&quot;https://cssday.nl/&quot;&gt;CSS Day&lt;/a&gt; en &lt;a href=&quot;https://perfnow.nl/&quot;&gt;performance.now()&lt;/a&gt;, richtte ooit tussen de bedrijven door Fronteers en het Fronteers-congres op, en zoekt nu naar nieuwe manieren om moderne front-enders te behoeden voor dezelfde fouten die tien of twintig jaar geleden zijn gemaakt.&lt;/p&gt;
  6795. &lt;p&gt;Donatie: Bits of Freedom&lt;/p&gt;
  6796. </content>
  6797.  </entry>
  6798.  <entry>
  6799.    <title>Min of meer toegankelijk</title>
  6800.    <link href="https://www.fronteers.nl/nl/blog/2018/12/min-of-meer-toegankelijk"/>
  6801.    <updated>2018-12-20T00:00:00Z</updated>
  6802.    <id>https://www.fronteers.nl/nl/blog/2018/12/min-of-meer-toegankelijk</id>
  6803.    <content xml:lang="nl" type="html">&lt;p&gt;Ik werk al jaren aan een toegankelijk web. Toegankelijk voor iedereen. Rekening houdend met verschillende manieren van waarnemen, bedienen en begrijpen van content. En het web moet beschikbaar zijn op elk platform waar je een website mee kan bezoeken. Zo heeft Sir Tim Berners-Lee het world wide web ooit neergezet.&lt;/p&gt;
  6804. &lt;p&gt;Niet eerder is er zo hard gewerkt aan toegankelijkheid als het afgelopen jaar. Jarenlang is de Nederlandse overheid hierin koploper. Maar andere branches zoals onderwijs, banken en zorg zijn met een inhaalslag bezig. Sommige gedreven door wetgeving en dreiging van rechtszaken, zoals je in Amerika veel ziet. Meer nog omdat er binnen organisaties mensen rondlopen die de noodzaak en de winst zien van een toegankelijke dienstverlening.&lt;/p&gt;
  6805. &lt;p&gt;Hoe ontoegankelijk het web is blijkt soms als je een actie niet kunt afronden omdat JavaScript fouten bevat. Onlangs kon ik mijn reis niet bekijken via een van de reisplanners omdat er een knop niet werkte. Veelal worden websites en webapplicaties op grote schermen op een snel en stabiel netwerk ontwikkeld. Onderweg heb je doorgaans in auto, bus of trein niet de mogelijkheid om achter zo&#39;n scherm te zitten (met uitzondering van de Tesla dan).&lt;/p&gt;
  6806. &lt;p&gt;Het web is heel toegankelijk begonnen met alleen tekst. De eerste website van Berners-Lee is zo&#39;n website die het nu nog steeds doet. Zie &lt;a href=&quot;http://info.cern.ch/hypertext/WWW/TheProject.html&quot;&gt;World Wide Web&lt;/a&gt;&lt;/p&gt;
  6807. &lt;h2&gt;Afbeeldingen&lt;/h2&gt;
  6808. &lt;p&gt;Daar begon het gedonder. We konden afbeeldingen publiceren. Mensen die niet in staat zijn om een afbeelding te bekijken missen ineens de informatie die op de afbeelding staat. Dan hadden we ook ineens downloadtijden... het begin van toegankelijkheidsproblemen.&lt;/p&gt;
  6809. &lt;h2&gt;Tables voor design&lt;/h2&gt;
  6810. &lt;p&gt;Eind jaren &#39;90 gingen we helemaal los. We wilden mooi design en animated gifs; liefst in de beste browser van die tijd. Om dat voor elkaar te krijgen gebruikten we de tabel, de pixel.gif en menuitem1.gif om het ontwerp pixelprecies te krijgen. En we gebruikten tools die automatisch HTML voor je maakte, dat ook niet altijd voldeed aan de standaarden. Semantiek en toegankelijkheid waren niet de grootste aandachtspunten. Werkend krijgen in alle browsers wel.&lt;/p&gt;
  6811. &lt;h2&gt;Flash (niet het Queen-nummer uit 1980)&lt;/h2&gt;
  6812. &lt;p&gt;Begin deze eeuw werd Flash populair. Zo slecht was Flash niet; je kon er toegankelijk mee bouwen. Het vergde kennis van de scripttaal om dat voor elkaar te krijgen. Maar in de praktijk waren er vrijwel geen toegankelijke websites met Flash te vinden. Hoe robuust Flash is kan je terugzien op archive.org. Veel Flash-sites tonen daar een lege ruimte.&lt;/p&gt;
  6813. &lt;h2&gt;Mobiel/tablet&lt;/h2&gt;
  6814. &lt;p&gt;De komst van kleinere schermen zorgde voor nieuwe uitdagingen. Pixelprecies hoefde niet meer. We gaan responsive. Alle functies en content op het grote scherm moeten ook beschikbaar zijn op het kleine scherm. De uitdaging is dat teksten niet in een verkeerde achtergrondkleur belanden of buiten het scherm terechtkomen. Ook sticky menu&#39;s, cookiemeldingen en reageerknoppen vormen vaak een belemmering om eenvoudig de content waar te nemen.&lt;/p&gt;
  6815. &lt;h2&gt;Flat design&lt;/h2&gt;
  6816. &lt;p&gt;Knoppen worden vlakken, invoervelden worden vlakken, het hele design bestaat uit vlakken. Interactieve elementen zijn vaak nauwelijks herkenbaar. Alles krijgt steeds lichtere kleuren. De kunst van het weglaten wordt op belangrijke elementen toegepast. Je weet soms niet waar je moet klikken, wat je moet klikken en waarop je geklikt hebt. Nieuwe toegankelijkheidsproblemen duiken op zoals labels die ontbreken en contrast dat te laag is.&lt;/p&gt;
  6817. &lt;h2&gt;JavaScript frameworks&lt;/h2&gt;
  6818. &lt;p&gt;Het nieuwe Flash. Zonder front-endkennis ben je in staat om supersnel een website of webapplicatie neer te zetten, die helaas te vaak ontoegankelijk is. Dit kan aan de tool liggen. Toegankelijkheid (en semantiek) zit er dan in de basis niet in. En als het er wel in zit, dan is niet duidelijk vastgelegd hoe je met de code om moet gaan om de toegankelijkheid niet stuk te maken. Of zou het ook aan de developer liggen?&lt;/p&gt;
  6819. &lt;h2&gt;Advies&lt;/h2&gt;
  6820. &lt;p&gt;Zorg dat je voldoende kennis hebt van HTML, CSS en WAI-ARIA als je een website of webapplicatie moet bouwen. Tools zijn mooie dingen mits je ze goed gebruikt. Zorg dat je kennis hebt van de standaarden. Iedereen kan een muurtje metselen. Alleen als een metselaar dit doet heb je meer zekerheid dat het muurtje recht is en blijft staan.&lt;/p&gt;
  6821. &lt;h2&gt;Quick wins&lt;/h2&gt;
  6822. &lt;ul&gt;
  6823. &lt;li&gt;Gebruik Google: zoek naar &amp;quot;accessibility&amp;quot; of &amp;quot;wcag&amp;quot; in combinatie met de tool waarmee je wilt werken. De zoekresultaten kunnen een indicatie zijn of er aan toegankelijkheid is gedacht.&lt;/li&gt;
  6824. &lt;li&gt;Vraag experts of ze goede bronnen kennen van een specifieke tool.&lt;/li&gt;
  6825. &lt;li&gt;Vraag bij leveranciers door tot ze kunnen aantonen dat ze een tool hebben waarmee je een toegankelijke website mee kan bouwen.&lt;/li&gt;
  6826. &lt;li&gt;Volg een training. Er zijn meerdere goede trainers in binnen- en buitenland.&lt;/li&gt;
  6827. &lt;li&gt;Heb je zelf net niet de expertise huur dan iemand parttime in in je project. Met weinig, maar wel de juiste middelen kan je een boel bereiken.&lt;/li&gt;
  6828. &lt;/ul&gt;
  6829. &lt;h2&gt;Over Jules Ernst&lt;/h2&gt;
  6830. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/jules.jpg&quot; alt=&quot;Foto van Jules Ernst&quot; class=&quot;floating-portrait&quot; /&gt;
  6831. [Jules Ernst](https://www.200ok.nl/) weet heel veel van digitale toegankelijkheid. Hij helpt organisaties om digitale toegankelijkheid te realiseren en te borgen. Dit doet hij door mee te werken in projecten, trainingen en workshops te geven en websites en webapplicaties te onderzoeken op toegankelijkheid.
  6832. &lt;p&gt;Donatie: &lt;a href=&quot;https://www.niketan.nl/&quot;&gt;Niketan&lt;/a&gt;
  6833. Kinderen met een beperking een kans geven. Ze de mogelijkheid geven dat ze later zelf keuzes kunnen maken. Niketan is een bijzondere stichting die zich daarmee bezig houdt en waarvan je zeker weet dat je geld goed besteed wordt.&lt;/p&gt;
  6834. </content>
  6835.  </entry>
  6836.  <entry>
  6837.    <title>Webdeveloper worden zonder (dure) opleiding</title>
  6838.    <link href="https://www.fronteers.nl/nl/blog/2018/12/webdeveloper-worden-zonder-dure-opleiding"/>
  6839.    <updated>2018-12-19T00:00:00Z</updated>
  6840.    <id>https://www.fronteers.nl/nl/blog/2018/12/webdeveloper-worden-zonder-dure-opleiding</id>
  6841.    <content xml:lang="nl" type="html">&lt;p&gt;Na lang wikken en wegen ben je eruit, je wilt (front-end) webdeveloper worden. Maar waar begin je? Ga je een (HBO)-opleiding doen of meld je je aan voor een coding bootcamp? Er zijn verschillende routes die je kunt nemen:&lt;/p&gt;
  6842. &lt;ul&gt;
  6843. &lt;li&gt;Zit je momenteel nog op de middelbare school? Volg dan een opleiding als Communication &amp;amp; Media Design aan een hogere school. Hier leer je namelijk veel meer vaardigheden, die niet direct iets met het vak te maken hebben, maar waar je wel ontzettend veel aan hebt in je latere carrière. Daarnaast is de tijd als student ook ontzettend nuttig omdat je hier - onbewust - erg veel leert over het volwassen leven, vooral als je op kamers gaat.&lt;/li&gt;
  6844. &lt;li&gt;Ben je al werkende en overweeg je een carrièreswitch naar webdeveloper? Er zijn genoeg (gratis) manieren om je om te scholen naar webdeveloper. Het volgen van een dure (hbo) opleiding of bootcamp is helemaal niet nodig.&lt;/li&gt;
  6845. &lt;/ul&gt;
  6846. &lt;p&gt;In deze blogpost laat ik zien dat het helemaal niet veel geld hoeft te kosten om je om te scholen naar webdeveloper. Er zijn ontzettend veel gratis resources te vinden op het internet. Ook als je al werkzaam bent als webdeveloper, maar je wilt graag meer leren, heb je waarschijnlijk ook wat aan deze blogpost. Of je nou beginner bent of gevorderde, veel van deze resources zijn nuttig voor iedereen. Volg je nu een hbo-opleiding, dan raad ik ook zeker aan om af en toe een cursus of naslagwerk erbij te pakken. Voor het gemak gaan we er even vanuit dat je een absolute beginner bent.&lt;/p&gt;
  6847. &lt;p&gt;&lt;a href=&quot;https://www.codecademy.com/&quot;&gt;Codecademy&lt;/a&gt;&lt;/p&gt;
  6848. &lt;p&gt;Codecademy maakt je op een simpele en leuke manier wegwijs in de wereld van het programmeren. Allereerst kies je een programmeertaal of framework die je wilt leren, bijv. HTML, CSS, JavaScript, jQuery of Python. Vervolgens krijg je kleine opdrachtjes die je direct in het venster kan uitvoeren. Je krijgt ook direct feedback op je werk en het nodigt je uit om steeds door te gaan, waardoor je voor je het weet de basis onder de knie hebt. De meeste cursussen zijn gratis, al bieden ze ook een Pro-abonnement (ongeveer 20 dollar per maand) en Pro Intensive programma’s aan. Dit laatste is een online bootcamp waarbij je bijvoorbeeld leert een front-end applicatie of web API van de grond af op te bouwen, en hier krijg je een certificaat voor. Deze bootcamps kosten ongeveer 200 dollar en duren 8 weken.&lt;/p&gt;
  6849. &lt;p&gt;&lt;em&gt;Prijs:&lt;/em&gt; Gratis / 20 dollar per maand / 200 dollar per bootcamp&lt;/p&gt;
  6850. &lt;p&gt;&lt;a href=&quot;https://www.freecodecamp.org/&quot;&gt;FreeCodeCamp&lt;/a&gt;&lt;/p&gt;
  6851. &lt;p&gt;FreeCodeCamp is een community die honderden video’s en tutorials aanbiedt voor het leren van web development. Hier heb je in totaal 6 paden die ieder 300 uur aan content bevatten. Dit is in totaal dus 1800 uur, wat neer komt op een jaar fulltime leren (met 7 weken vakantie). Ik begrijp dat dit erg overweldigend kan zijn, maar je bent natuurlijk niet verplicht al deze uren hieraan te besteden. Het zogenaamde curriculum is op elk moment vrij in te zien en je kunt dus zelf bepalen welke onderwerpen je graag wilt leren. En het grootste voordeel? Het is helemaal 100% gratis!&lt;/p&gt;
  6852. &lt;p&gt;&lt;em&gt;Prijs:&lt;/em&gt; Gratis&lt;/p&gt;
  6853. &lt;h2&gt;De basis onder de knie&lt;/h2&gt;
  6854. &lt;p&gt;Nu je de basis onder de knie hebt, begint pas de echte uitdaging. Want vanuit hier zijn er verschillende paden die je kunt bewandelen. Dit ligt helemaal aan jouw wensen en niveau. Wel raad ik je aan om eerst de fijne kneepjes van het vak te leren alvorens je meteen in complexe onderwerpen duikt. Wil je bijvoorbeeld graag React leren, maar heb je nog niet veel ervaring met JavaScript? Duik dan eerst nog eens wat dieper in de materie van JavaScript.&lt;/p&gt;
  6855. &lt;p&gt;Er zijn online verschillende (uitgebreide) handleidingen/boeken die helemaal niets kosten, maar waar je ontzettend veel van kan leren op het gebied van JavaScript, een taal die ontzettend krachtig is, maar ook wat eigenaardigheden kent.&lt;/p&gt;
  6856. &lt;ul&gt;
  6857. &lt;li&gt;&lt;em&gt;You Don’t Know JavaScript&lt;/em&gt; van &lt;em&gt;Kyle Simpson&lt;/em&gt;&lt;/li&gt;
  6858. &lt;/ul&gt;
  6859. &lt;p&gt;&lt;a href=&quot;https://github.com/getify/You-Dont-Know-JS&quot;&gt;You Don’t Know JavaScript&lt;/a&gt; (vaak afgekort tot YDKJS) is een serie boeken die open-source op GitHub in te zien zijn. Voor een kleine meerprijs zijn ze te downloaden als e-book en voor een iets hogere meerprijs zijn ze ook te koop als fysiek boek. In deze serie komen bijna alle kenmerken van de taal aan bod, een must-read voor iedereen die JavaScript wil leren.&lt;/p&gt;
  6860. &lt;p&gt;&lt;em&gt;Prijs:&lt;/em&gt; Gratis&lt;/p&gt;
  6861. &lt;ul&gt;
  6862. &lt;li&gt;&lt;em&gt;The Complete JavaScript Handbook&lt;/em&gt; van &lt;em&gt;Flavio Copes&lt;/em&gt;&lt;/li&gt;
  6863. &lt;/ul&gt;
  6864. &lt;p&gt;In wezen een erg lang &lt;a href=&quot;https://medium.freecodecamp.org/the-complete-javascript-handbook-f26b2c71719c&quot;&gt;Medium-artikel&lt;/a&gt;, maar dit artikel bevat wel alles wat je moet weten over JavaScript. Een stuk korter en dus ook minder gedetailleerd dan de YDKJS-boeken omdat Flavio hier de 80/20 regel toepast: Leer 80% van JavaScript in 20% van de tijd.&lt;/p&gt;
  6865. &lt;p&gt;&lt;em&gt;Prijs&lt;/em&gt;: Gratis&lt;/p&gt;
  6866. &lt;h2&gt;Interactieve cursussen&lt;/h2&gt;
  6867. &lt;p&gt;Heb je net als ik het concentratievermogen van een pot pindakaas, en leer je liever op een interactieve manier, zoals bij het eerder genoemde Codecademy het geval is? Er zijn tal van videocursussen beschikbaar die je kunt volgen.&lt;/p&gt;
  6868. &lt;ul&gt;
  6869. &lt;li&gt;&lt;a href=&quot;http://www.wesbos.com/&quot;&gt;Wes Bos&lt;/a&gt;&lt;/li&gt;
  6870. &lt;/ul&gt;
  6871. &lt;p&gt;Wes Bos is een Canadese webdeveloper die zich tegenwoordig vooral bezig houdt met de ontwikkeling van videocursussen. Deze zijn gruwelijk populair onder front-end webdevelopers en dat is zeer terecht. De cursussen zijn veelal erg diepgaand en relatief goedkoop. Voor 140 euro krijg je bijv. toegang tot de ES6 voor Everyone cursus, die bestaat uit 7 uur aan videomateriaal waar je alles leer wat ook in The Complete JavaScript Handbook beschreven wordt. Daarnaast heeft hij ook een podcast, &lt;a href=&quot;http://www.syntax.fm/&quot;&gt;Syntax.fm&lt;/a&gt;) waar hij samen met Scott Tolinski vrijwel wekelijkse interessante onderwerpen betreffende front-end web development bespreekt.&lt;/p&gt;
  6872. &lt;p&gt;&lt;em&gt;Prijs:&lt;/em&gt; $70 - $140 per cursus&lt;/p&gt;
  6873. &lt;ul&gt;
  6874. &lt;li&gt;&lt;a href=&quot;https://www.pluralsight.com/&quot;&gt;Pluralsight&lt;/a&gt;&lt;/li&gt;
  6875. &lt;/ul&gt;
  6876. &lt;p&gt;Pluralsight biedt veel verschillende cursussen aan die gericht zijn op vrijwel alle development functies. Niet enkel front-end, maar ook backend, devops, sysops en security onderwerpen worden hier behandeld. Wat ik persoonlijk een hele fijne feature vindt van Pluralsight, is dat je per onderwerp een soort IQ test kan doen van grofweg 20 vragen, waarop je ‘skill level’ berekend wordt. Op basis van dit skill level worden je videocursussen per onderwerp aangeraden. Dit is vooral fijn voor mensen die al wat ervaring hebben en niet uren aan materiaal door willen werken dat ze al kennen. De meeste videocursussen zijn kort, tussen de 2 en 10 uur. Aan dit alles hangt echter wel een relatief hoog prijskaartje. Hier betaal je namelijk per maand of per jaar voor onbeperkt toegang tot alle beschikbare cursussen.&lt;/p&gt;
  6877. &lt;p&gt;&lt;em&gt;Prijs:&lt;/em&gt; $29 per maand / 299 per jaar&lt;/p&gt;
  6878. &lt;ul&gt;
  6879. &lt;li&gt;&lt;a href=&quot;https://www.udemy.com/&quot;&gt;Udemy&lt;/a&gt;&lt;/li&gt;
  6880. &lt;/ul&gt;
  6881. &lt;p&gt;Udemy is een platform voor videocursussen die zich niet enkel richt op web development. Eigenlijk kun je hier voor elk onderwerp wel een cursus volgen. Hier staan echter wel veel goede front-end web development cursussen op, dus deze mag niet in dit lijstje ontbreken. De meeste cursussen kosten oorspronkelijk tussen de 150 en 300 euro, maar er is eigenlijk altijd wel een actie waardoor je maar 10 tot 15 euro voor een cursus bestaat.&lt;/p&gt;
  6882. &lt;p&gt;Hier enkele voorbeelden van cursussen waar ik erg veel aan heb gehad:&lt;/p&gt;
  6883. &lt;ul&gt;
  6884. &lt;li&gt;&lt;a href=&quot;https://www.udemy.com/the-complete-web-developer-zero-to-mastery/&quot;&gt;The Complete Web Developer: Zero To Mastery - Andrei Nagoie&lt;/a&gt;&lt;/li&gt;
  6885. &lt;li&gt;&lt;a href=&quot;https://www.udemy.com/the-complete-junior-to-senior-web-developer-roadmap/&quot;&gt;The Complete Junior To Senior Web Developer Roadmap - Andrei Nagoie&lt;/a&gt;&lt;/li&gt;
  6886. &lt;li&gt;&lt;a href=&quot;https://www.udemy.com/understand-javascript/&quot;&gt;JavaScript: Understanding the Weird Parts - Anthony Alicea&lt;/a&gt;&lt;/li&gt;
  6887. &lt;/ul&gt;
  6888. &lt;p&gt;Als je je wil verdiepen in React, Angular of Vue (of vele andere onderwerpen) kan ik de cursussen van &lt;a href=&quot;https://www.udemy.com/user/maximilian-schwarzmuller/&quot;&gt;Maximilian Schwarzmüller&lt;/a&gt; aanraden.&lt;/p&gt;
  6889. &lt;p&gt;&lt;em&gt;Prijs:&lt;/em&gt; $150 - $300 per cursus (maar in de (vrijwel permanente) sale $10 - $15 per cursus)&lt;/p&gt;
  6890. &lt;h2&gt;Conclusie&lt;/h2&gt;
  6891. &lt;p&gt;Met dit overzicht heb ik er de volste vertrouwen in dat je zonder al te veel geld uit kan geven erg veel kan leren op het gebied van front-end web development. En onthoud dat je in dit vak nooit uitgeleerd bent, en er dus constant nieuwe dingen zijn te leren, ook al heb je al decennia lang ervaring. Als laatste wil ik meegeven dat het vooral belangrijk is dat je aan de slag gaat. De theorie is belangrijk, maar het in de praktijk brengen is het allerbelangrijkste. Heb je momenteel nog geen baan als front-end webdeveloper? Ga zelf aan de slag met een tof project, knutsel wat in elkaar en gooi het op Github. Dan heb je meteen wat om te laten zien tijdens een sollicitatiegesprek. Het hoeft niet perfect te zijn, want je zult er hoe dan ook van leren. Weet je niet wat je dan moet maken? Begin met iets (relatiefs) simpels als een simpele website over je cavia. Deze maak je daarna responsive zodat deze er ook mooi uitziet op je telefoon. Daarna bouw je een rekenmachine, of een Boter, Kaas en Eieren spel. Zolang je plezier hebt in wat je doet, komt de rest vanzelf wel goed.&lt;/p&gt;
  6892. &lt;p&gt;Het lijstje hierboven is zeker niet volledig, en er zijn er nog veel meer te noemen, maar dan werd het wel een erg lange blogpost. Desalniettemin, hier nog wat honorable mentions:&lt;/p&gt;
  6893. &lt;h2&gt;Artikelen&lt;/h2&gt;
  6894. &lt;p&gt;&lt;a href=&quot;https://medium.com/zerotomastery/learn-to-code-in-2018-get-hired-and-have-fun-along-the-way-b338247eed6a&quot;&gt;Learn to code in 2018, get hired and have fun along the way - Andrei Neagoie&lt;/a&gt;&lt;/p&gt;
  6895. &lt;p&gt;&lt;a href=&quot;https://medium.com/zerotomastery/dont-be-a-junior-developer-the-roadmap-9fde5cf384bb&quot;&gt;Don’t be a junior developer - Andrei Neagoie&lt;/a&gt;&lt;/p&gt;
  6896. &lt;h2&gt;Overige&lt;/h2&gt;
  6897. &lt;p&gt;&lt;a href=&quot;https://github.com/kamranahmedse/developer-roadmap&quot;&gt;The Webdeveloper Roadmap 2018 - Kamran Ahmed&lt;/a&gt;&lt;/p&gt;
  6898. &lt;h2&gt;Code challenges&lt;/h2&gt;
  6899. &lt;p&gt;&lt;a href=&quot;http://www.codewars.com/&quot;&gt;Codewars&lt;/a&gt;&lt;/p&gt;
  6900. &lt;p&gt;&lt;a href=&quot;http://www.hackerrank.com/&quot;&gt;Hackerrank&lt;/a&gt;&lt;/p&gt;
  6901. &lt;h2&gt;Videocursussen&lt;/h2&gt;
  6902. &lt;p&gt;&lt;a href=&quot;https://tylermcginnis.com/courses/&quot;&gt;Tyler McGinnis&lt;/a&gt;&lt;/p&gt;
  6903. &lt;p&gt;&lt;a href=&quot;https://www.leveluptutorials.com/&quot;&gt;Level Up Tutorials - Scott Tolinski&lt;/a&gt;&lt;/p&gt;
  6904. &lt;p&gt;&lt;a href=&quot;https://learnjavascript.today/&quot;&gt;Learn JavaScript Today - Zell Liew&lt;/a&gt;&lt;/p&gt;
  6905. &lt;h2&gt;Over Tim Oerlemans&lt;/h2&gt;
  6906. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/tim-oerlemans.png&quot; alt=&quot;Foto van Tim&quot; class=&quot;floating-portrait&quot; /&gt;
  6907. 28 jaar, 3 jaar ervaring en momenteel werkzaam als front-end webdeveloper bij TrueLime in Breda. Leergierig en wil constant nieuwe dingen leren.
  6908. &lt;p&gt;Donatie: NSGK&lt;/p&gt;
  6909. </content>
  6910.  </entry>
  6911.  <entry>
  6912.    <title>Lettertypes op het web, wat kan ik ermee?</title>
  6913.    <link href="https://www.fronteers.nl/nl/blog/2018/12/lettertypes-op-het-web-wat-kan-ik-ermee"/>
  6914.    <updated>2018-12-18T00:00:00Z</updated>
  6915.    <id>https://www.fronteers.nl/nl/blog/2018/12/lettertypes-op-het-web-wat-kan-ik-ermee</id>
  6916.    <content xml:lang="nl" type="html">&lt;p&gt;In het begin van het web was dat niet zo veel: de browser deed alles voor je. Het enige waar je controle over had was je HTML. Met semantische &lt;a href=&quot;https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html&quot;&gt;HTML-tags&lt;/a&gt; gaf je betekenis aan stukjes van je pagina, zoals &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; tot &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt; voor kopjes. Je browser besloot dan hoe dat er uit zag. Zo werden kopjes in hoofdletters weergegeven op monochrome tekst-terminals, of groter en dikgedrukt in grafische browsers.&lt;/p&gt;
  6917. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/lettertypes/blog-1.png&quot; alt=&quot;Screenshot van Mosaic 1.0 met het Choose Font menu opengeklapt: Gebruikers konden voor elk soort tag instellen hoe het er uit zag.&quot; /&gt;&lt;/p&gt;
  6918. &lt;p&gt;In de loop van de jaren werd gelukkig steeds meer mogelijk. Zo kregen we met &lt;a href=&quot;https://www.w3.org/MarkUp/html-spec/html-spec_5.html&quot;&gt;HTML 2.0&lt;/a&gt; niet alleen meer semantische tags zoals &lt;code&gt;&amp;lt;em&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;strong&amp;gt;&lt;/code&gt;, maar ook de typografische tags waarmee we tekst expliciet vet (&lt;code&gt;&amp;lt;b&amp;gt;&lt;/code&gt;), cursief (&lt;code&gt;&amp;lt;i&amp;gt;&lt;/code&gt;) of monospaced (&lt;code&gt;&amp;lt;tt&amp;gt;&lt;/code&gt;) konden maken.&lt;/p&gt;
  6919. &lt;p&gt;Met &lt;a href=&quot;https://www.w3.org/TR/2018/SPSD-html32-20180315/#body&quot;&gt;HTML 3.2&lt;/a&gt; kregen we controle over de tekstkleur op een pagina, als mede meer tags zoals onderstrepen (&lt;code&gt;&amp;lt;u&amp;gt;&lt;/code&gt;), super- en subscript tekst (&lt;code&gt;&amp;lt;sup&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;sub&amp;gt;&lt;/code&gt;) en meer. Ook kregen we de inmiddels befaamde &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;basefont&amp;gt;&lt;/code&gt; tags. Officieel kon je hier tekstkleur en lettergrootte mee kiezen, maar als gevolgd van de &lt;a href=&quot;https://thehistoryoftheweb.com/browser-wars-part-2/&quot;&gt;browser oorlog&lt;/a&gt; die op dat moment gestreden werd, werd ook het &lt;code&gt;face&lt;/code&gt; attribuut al snel ondersteund. Hiermee konden we eindelijk bepalen welk lettertype onze site gebruikte.&lt;/p&gt;
  6920. &lt;p&gt;Niet dat er veel keuze was, je was beperkt tot het gebruiken van een lettertype dat gebruikers op hun computer hadden staan. In praktijk betekende dit je te beperken tot één van de elf &lt;a href=&quot;https://web.archive.org/web/19990117012320/http://www.microsoft.com:80/typography/faq/faq8.htm&quot;&gt;TrueType core fonts for the Web&lt;/a&gt; van Microsoft.&lt;/p&gt;
  6921. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/lettertypes/blog-7.png&quot; alt=&quot;Afbeelding van de elf core fonts for the web: Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana en Webdings&quot; /&gt;&lt;/p&gt;
  6922. &lt;h2&gt;CSS&lt;/h2&gt;
  6923. &lt;p&gt;De semantische visie kwam terug met HTML 4.0 tegen het einde van 1997. &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; was weer weg, samen met &lt;code&gt;&amp;lt;fontbase&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;s&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;strike&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;u&amp;gt;&lt;/code&gt;, en CSS werd echt de manier om stijling te doen. Bijvoorbeeld:&lt;/p&gt;
  6924. &lt;pre&gt;&lt;code&gt;body {
  6925.    font-family: Andale Mono, Courier New, Courier, monospace;
  6926. }
  6927. &lt;/code&gt;&lt;/pre&gt;
  6928. &lt;p&gt;De pagina krijgt als standaard lettertype Andale Mono, als die niet beschikbaar is Courier New of anders Courier. Als geen van de gekozen lettertypes beschikbaar valt de browser terug op het ingebouwde &lt;code&gt;monospace&lt;/code&gt;.&lt;/p&gt;
  6929. &lt;h2&gt;Webfonts&lt;/h2&gt;
  6930. &lt;p&gt;Naast ingebouwde lettertypes hebben we tegenwoordig de mogelijkheid om webfonts te gebruiken. Er zijn verschillende bestandsformaten voor (web)fonts, en het is makkelijk daar in verdwaald te raken. Afhankelijk van welke browsers je nog wil ondersteunen heb je genoeg aan WOFF2 (Web Open Font Format 2.0) of anders WOFF2 met een fallback naar WOFF. Lettertype in een ander formaat? Er zijn tegenwoordig genoeg tools online die een lettertype zo voor je kunnen converteren.&lt;/p&gt;
  6931. &lt;p&gt;Een webfont maak je beschikbaar door een &lt;code&gt;@font-face&lt;/code&gt; blok op te nemen in je CSS:&lt;/p&gt;
  6932. &lt;pre&gt;&lt;code&gt;@font-face {
  6933.  font-family: &#39;mijn lettertype&#39;;
  6934.  src:  url(&#39;mijn.woff2&#39;) format(&#39;woff2&#39;),
  6935.        url(&#39;mijn.woff&#39;) format(&#39;woff&#39;);
  6936. }
  6937. &lt;/code&gt;&lt;/pre&gt;
  6938. &lt;p&gt;Nu kan je ‘mijn lettertype’ gebruiken alsof het elk ander lettertype is.&lt;/p&gt;
  6939. &lt;p&gt;Met webfonts gaat een hele wereld open qua mogelijkheden, maar hou er rekening mee dat er gebruikers zijn die je mooie font niet zullen zien: ze hebben misschien een trage internet verbinding of blokkeren webfonts wegens privacy redenen. Dus het blijft handig iets van een fallback te blijven gebruiken.&lt;/p&gt;
  6940. &lt;p&gt;Als een pagina met webfonts laadt, gaat de tekst op de pagina door twee fases heen: eerst is tekst onzichtbaar (de blokkeerperiode) en als het te lang duurt voor een lettertype gedownload is wordt daarna een fallback gebruikt (de wisselperiode).&lt;/p&gt;
  6941. &lt;p&gt;Door &lt;code&gt;font-display&lt;/code&gt; toe te voegen aan je @font-face kan je browsers een hint geven over wat ze moeten doen als een lettertype nog aan het downloaden is:&lt;/p&gt;
  6942. &lt;ul&gt;
  6943. &lt;li&gt;&lt;code&gt;block&lt;/code&gt; Een korte blokkeerperiode en een oneindige wisselperiode, voor als je koste wat kost je webfont wil gebruiken.&lt;/li&gt;
  6944. &lt;li&gt;&lt;code&gt;swap&lt;/code&gt; Een extreem korte blokkeerperiode en een oneindige wisselperiode. Voor als het het belangrijkste is dat tekst snel leesbaar is, maar je eigenlijk niet zonder je webfont wil.&lt;/li&gt;
  6945. &lt;li&gt;&lt;code&gt;fallback&lt;/code&gt; Een extreem korte blokkeerperiode en een korte wisselperiode. Voor als je graag je webfont wil gebruiken, maar als een bezoeker al tekst aan het lezen is, wil je hem niet afleiden door van lettertype te wisselen.&lt;/li&gt;
  6946. &lt;li&gt;&lt;code&gt;optional&lt;/code&gt; Een extreem korte blokkeerperiode en geen wisselperiode. Voor als een webfont een leuk extraatje is.&lt;/li&gt;
  6947. &lt;/ul&gt;
  6948. &lt;h2&gt;Bold, bolder, boldst&lt;/h2&gt;
  6949. &lt;p&gt;In tegenstelling tot wat je in bijv. Word ziet, is op het web dikgedrukte tekst geen kwestie van aan of uit, maar een schaal van 9 verschillende diktes, genaamd 100 tot 900. Op deze schaal is normale, niet vette tekst 400, en vette tekst 700. Je kan &lt;code&gt;normal&lt;/code&gt; gebruiken ipv 400 en &lt;code&gt;bold&lt;/code&gt; ipv 700.&lt;/p&gt;
  6950. &lt;pre&gt;&lt;code&gt;p.dik-gedrukt {
  6951.    font-weight: 700;
  6952. }
  6953. &lt;/code&gt;&lt;/pre&gt;
  6954. &lt;p&gt;Als je een webfont gebruikt, heb je voor elke &lt;code&gt;font-weight&lt;/code&gt; een apart bestand nodig:&lt;/p&gt;
  6955. &lt;pre&gt;&lt;code&gt;@font-face {
  6956.  font-family: &#39;mijn lettertype&#39;;
  6957.  font-weight: 400; /* standaard waarde, mag je ook weglaten. */
  6958.  src:  url(&#39;mijn-normaal.woff2&#39;) format(&#39;woff2&#39;);
  6959. }
  6960.  
  6961. @font-face {
  6962.  font-family: &#39;mijn lettertype&#39;;
  6963.  font-weight: 700;
  6964.  src:  url(&#39;mijn-vet.woff2&#39;) format(&#39;woff2&#39;);
  6965. }
  6966. &lt;/code&gt;&lt;/pre&gt;
  6967. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/lettertypes/blog-6.png&quot; alt=&quot;Afbeelding van de negen diktes van het lettertype Exo 2&quot; /&gt;&lt;/p&gt;
  6968. &lt;h2&gt;Stretch&lt;/h2&gt;
  6969. &lt;p&gt;Lettertypes hebben soms meerdere breedtes, deze kan je kiezen met &lt;code&gt;font-stretch&lt;/code&gt;. Er zijn 9 waardes: &lt;code&gt;ultra-condensed&lt;/code&gt;, &lt;code&gt;extra-condensed&lt;/code&gt;, &lt;code&gt;condensed&lt;/code&gt;, &lt;code&gt;semi-condensed&lt;/code&gt;, &lt;code&gt;normal&lt;/code&gt;, &lt;code&gt;semi-expanded&lt;/code&gt;, &lt;code&gt;expanded&lt;/code&gt;, &lt;code&gt;extra-expanded&lt;/code&gt; en &lt;code&gt;ultra-expanded&lt;/code&gt;. Sinds kort mag je ook percentages gebruiken zodat je een oneindig aantal breedtes kan hebben, maar dat ondersteunen veel browsers nog niet. &lt;code&gt;normal&lt;/code&gt; komt dan overeen met 100%, &lt;code&gt;ultra-condensed&lt;/code&gt; met 25% en &lt;code&gt;ultra-expanded&lt;/code&gt; met &lt;code&gt;200%&lt;/code&gt;.&lt;/p&gt;
  6970. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/lettertypes/blog-8.png&quot; alt=&quot;Afbeelding van Encode Sans met 5 verschillende breedtes.&quot; /&gt;&lt;/p&gt;
  6971. &lt;h2&gt;Cursief vs obliek&lt;/h2&gt;
  6972. &lt;p&gt;Veel lettertypes hebben een cursieve (italic in het Engels) variant. Deze kan je gebruiken met &lt;code&gt;font-style: italic;&lt;/code&gt;. Tekst simpelweg schuin zetten kan met &lt;code&gt;font-style: oblique;&lt;/code&gt;, sommige variabele lettertypes hebben tegenwoordig ook ondersteuning voor tekst onder een specifieke hoek schuin te zetten: &lt;code&gt;font-style: oblique 14deg;&lt;/code&gt;. Meer over variabele lettertypes later.&lt;/p&gt;
  6973. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/lettertypes/blog-5.png&quot; alt=&quot;Afbeelding van het lettertype Jost* in drie varianten: romein, obliek en cursief.&quot; /&gt;&lt;/p&gt;
  6974. &lt;p&gt;Als het lettertype dat je gebruikt geen italic, bold of small-caps ondersteunt, kan een browser die voor je nadoen. Meestal niet zo mooi als een ‘echte’ bold, italic of small-caps, maar het kan goed genoeg zijn. Als je niet wil dat je browser die eigenschappen faket, kan je het uit zetten met &lt;code&gt;font-synthesis: none;&lt;/code&gt;. Browser ondersteuning hiervoor is helaas &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/CSS/font-synthesis#Browser_Compatibility&quot;&gt;belabberd&lt;/a&gt;.&lt;/p&gt;
  6975. &lt;h2&gt;Overhang&lt;/h2&gt;
  6976. &lt;p&gt;Overhang (kerning in het Engels) tussen verschillende lettercombinaties kan bepaald worden door een lettertype. Dit zorgt voor fijner lezende tekst. Normaalgesproken staat dit aan, maar dit kan uit gezet worden met &lt;code&gt;font-kerning: none;&lt;/code&gt;.&lt;/p&gt;
  6977. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/lettertypes/blog-4.png&quot; alt=&quot;Afbeelding van Abril Fatface met overhang aan en uit.&quot; /&gt;&lt;/p&gt;
  6978. &lt;h2&gt;Ligaturen&lt;/h2&gt;
  6979. &lt;p&gt;Met ligaturen worden een set aan gliefen die naast elkaar staan vervangen door een enkele. Een veel voorkomend voorbeeld is de lettercombinatie &lt;code&gt;f&lt;/code&gt; &lt;code&gt;i&lt;/code&gt;. Maar hou er rekening mee dat ligaturen taalafhankelijk kunnen zijn. Het turks bijvoorbeeld heeft zowel de letter &lt;code&gt;i&lt;/code&gt; als &lt;code&gt;ı&lt;/code&gt; (een i zonder punt). Met een normale fi ligatuur valt dat verschil weg, een goed lettertype houdt hier rekening mee, zorg dus altijd voor de juiste &lt;code&gt;lang&lt;/code&gt; attributen in je pagina.&lt;/p&gt;
  6980. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/lettertypes/blog-2.png&quot; alt=&quot;Afbeelding van fi en fı zonder ligaturen, en met ligaturen in het Nederlands en Turks.&quot; /&gt;&lt;/p&gt;
  6981. &lt;p&gt;Ligaturen worden in verschillende categorieën onderverdeeld die individueel aan en uitgezet kunnen worden. De fi ligatuur valt onder de alledaagse ligaturen (&lt;code&gt;common-ligatures&lt;/code&gt;).&lt;/p&gt;
  6982. &lt;p&gt;Verder zijn er de:&lt;/p&gt;
  6983. &lt;ul&gt;
  6984. &lt;li&gt;Discrete ligaturen (&lt;code&gt;discretionary-ligatures&lt;/code&gt;); deze zijn puur voor de mooi, leuk voor kopjes of logo’s maar vaak niet fijn in lopende tekst.&lt;/li&gt;
  6985. &lt;li&gt;Historische ligaturen (&lt;code&gt;historical-ligatures&lt;/code&gt;); ligaturen die vroeger gebruikt werden maar nu verwarrend zouden zijn.&lt;/li&gt;
  6986. &lt;li&gt;Contextuele ligaturen (&lt;code&gt;contextual&lt;/code&gt;); vooral gebruikt door handschriftlettertypes, om letters mooi aan elkaar te laten sluiten.&lt;/li&gt;
  6987. &lt;/ul&gt;
  6988. &lt;p&gt;Een lettertype bepaalt zelf welke standaard aan of uit staan en met &lt;code&gt;font-variant-ligatures&lt;/code&gt; kan je dit aanpassen:&lt;/p&gt;
  6989. &lt;pre&gt;&lt;code&gt;h1 {
  6990.    font-variant-ligatures: common-ligatures discretionary-ligatures;
  6991. }
  6992. &lt;/code&gt;&lt;/pre&gt;
  6993. &lt;h2&gt;Cijfers&lt;/h2&gt;
  6994. &lt;p&gt;Sommige lettertypes hebben meerdere sets getallen waar je uit kan kiezen:&lt;/p&gt;
  6995. &lt;p&gt;Met &lt;code&gt;font-variant-numeric: lining-nums;&lt;/code&gt; of &lt;code&gt;font-variant-numeric: oldstyle-nums;&lt;/code&gt; kan je kiezen tussen moderne getallen die op de basislijn staan en oude getallen die er onder hangen.&lt;/p&gt;
  6996. &lt;p&gt;Met &lt;code&gt;font-variant-numeric: proportional-nums;&lt;/code&gt; of &lt;code&gt;font-variant-numeric: tabular-nums&lt;/code&gt; kan je kiezen tussen cijfers met variabele of vaste breedte, wat soms handig kan zijn voor tabellen, rekening nummers etc.&lt;/p&gt;
  6997. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/lettertypes/blog-3.png&quot; alt=&quot;Afbeelding van proportional-nums en tabular-nums in Times New Roman, lining-nums en oldstyle-nums in Garamond&quot; /&gt;&lt;/p&gt;
  6998. &lt;p&gt;Andere opties zijn: &lt;code&gt;slashed-zero&lt;/code&gt; voor een streep door (of stip in) het cijfer 0, om meer onderscheid te maken met de hoofdletter O. Met &lt;code&gt;diagonal-fractions&lt;/code&gt; en &lt;code&gt;stacked-fractions&lt;/code&gt; kunnen breuken netter weergegeven worden en met &lt;code&gt;ordinal&lt;/code&gt; blijven cijfers normaal maar worden alle letters superscript, voor het gebruik als rangtelwoorden (1e).&lt;/p&gt;
  6999. &lt;h2&gt;Stijlvariaties&lt;/h2&gt;
  7000. &lt;p&gt;Lettertypes kunnen variaties van gliefen bevatten. Denk aan extra sierlijke varianten van hoofdletters of een ronde g inplaats van een bolletjes-g.&lt;/p&gt;
  7001. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/lettertypes/blog-9.png&quot; alt=&quot;Afbeelding van alternatieve gliefen in Plex, het nieuwe lettertype van IBM.&quot; /&gt;&lt;/p&gt;
  7002. &lt;p&gt;Variaties vallen in de volgende categorieën:&lt;/p&gt;
  7003. &lt;ul&gt;
  7004. &lt;li&gt;Historische gliefen (&lt;code&gt;hist&lt;/code&gt;). Gliefen die nu niet meer gebruikt worden, denk aan de &lt;a href=&quot;https://nl.wikipedia.org/wiki/Lange_s&quot;&gt;lange S&lt;/a&gt;.&lt;/li&gt;
  7005. &lt;li&gt;Sets van alternatieve gliefen (&lt;code&gt;ss01&lt;/code&gt; .. &lt;code&gt;ss20&lt;/code&gt;). Denk aan de verschillende vormen van letters zoals de a en g.&lt;/li&gt;
  7006. &lt;li&gt;Krullen en tierlantijntjes (&lt;code&gt;swsh&lt;/code&gt;, &lt;code&gt;cswh&lt;/code&gt;). Denk aan extra krullen aan hoofdletters.&lt;/li&gt;
  7007. &lt;li&gt;Ornamenten (&lt;code&gt;ornm&lt;/code&gt;). Denk aan bloempjes, &lt;a href=&quot;https://en.wikipedia.org/wiki/Fleuron_(typography)&quot;&gt;blaadjes&lt;/a&gt; en andere losstaande symbolen.&lt;/li&gt;
  7008. &lt;li&gt;Annotaties (&lt;code&gt;nalt&lt;/code&gt;). Denk aan omcirkelde of negatieve tekens.&lt;/li&gt;
  7009. &lt;/ul&gt;
  7010. &lt;p&gt;Ondersteuning door browsers van &lt;code&gt;font-variant-alternates&lt;/code&gt; is nog &lt;a href=&quot;https://caniuse.com/#feat=font-variant-alternates&quot;&gt;vrij matig&lt;/a&gt;, dus voorlopig raad ik aan om &lt;code&gt;font-feature-settings&lt;/code&gt; te gebruiken. De syntax hier voor is niet echt vriendelijk:&lt;/p&gt;
  7011. &lt;pre&gt;&lt;code&gt;body {
  7012.    font-feature-settings: &amp;quot;hist&amp;quot; on, &amp;quot;ss01&amp;quot; on, &amp;quot;swsh&amp;quot; 2;
  7013. }
  7014. &lt;/code&gt;&lt;/pre&gt;
  7015. &lt;h2&gt;Variabele lettertypes&lt;/h2&gt;
  7016. &lt;p&gt;Als je alle 9 diktes gebruikt op een site, heb je 9 verschillende bestanden nodig, die allemaal door bezoekers gedownload moeten worden.&lt;/p&gt;
  7017. &lt;p&gt;Daar komt gelukkig langzamerhand verandering in: Variabele lettertypes zijn een relatief nieuwe ontwikkeling waarbij je maar één bestand hoeft te downloaden. Makers van variabele lettertypes bouwen als het ware knoppen in waar je met CSS aan kan draaien. Deze knoppen kunnen de meest uiteenlopende dingen aanpassen aan het uiterlijk van het lettertype. Met variabele lettertypes zijn zelfs meer dan de 9 diktes beschikbaar, en kan je alles tussen &lt;code&gt;font-weight: 1;&lt;/code&gt; en &lt;code&gt;font-weight: 1000&lt;/code&gt; gebruiken. Browser ondersteuning &lt;a href=&quot;https://caniuse.com/#feat=variable-fonts&quot;&gt;wordt steeds beter&lt;/a&gt;.
  7018. &lt;video controls=&quot;&quot; width=&quot;480&quot; height=&quot;270&quot;&gt;
  7019. &lt;source src=&quot;https://www.fronteers.nl/archief/_downloads/2018/adventskalender/2019-vf.mp4&quot; type=&quot;video/mp4&quot; /&gt;
  7020. Download de &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/archief/_downloads/2018/adventskalender/2019-vf.mp4&quot;&gt;mp4&lt;/a&gt; video.
  7021. &lt;/video&gt;
  7022. Je kan variabele lettertypen gebruiken met fallback naar niet-variabele lettertypen:&lt;/p&gt;
  7023. &lt;pre&gt;&lt;code&gt;@font-face {
  7024.    font-family: &#39;mijn lettertype&#39;;
  7025.    src: url(&#39;mijn-lettertype-vf.woff&#39;) format(&#39;woff-variations&#39;),
  7026.         url(&#39;mijn-letertype.woff&#39;) format(&#39;woff&#39;);
  7027. }
  7028.  
  7029. @font-face {
  7030.    font-family: &#39;mijn lettertype&#39;;
  7031.    font-weight: bold;
  7032.    src: url(&#39;mijn-lettertype-vf.woff&#39;) format(&#39;woff-variations&#39;),
  7033.         url(&#39;mijn-letertype-bold.woff&#39;) format(&#39;woff&#39;);
  7034.    }
  7035. }
  7036.  
  7037. /****/
  7038.  
  7039. strong {
  7040.    font-weight: 650; /* wordt afgerond naar 700 door browsers die variabele lettertypes nog niet snappen. */
  7041. }
  7042. &lt;/code&gt;&lt;/pre&gt;
  7043. &lt;p&gt;Variabele lettertypes kunnen potentieel nog veel meer dan het standaard css properties zoals &lt;code&gt;font-weight&lt;/code&gt;, &lt;code&gt;font-stretch&lt;/code&gt; en &lt;code&gt;font-style&lt;/code&gt;. Deze extra eigenschappen kan je een waarde geven met &lt;code&gt;font-variation-settings: {vierlettercode} {waarde}&lt;/code&gt;. Hiervoor moet je de vierlettercode van de eigenschappen die je aan wil passen weten, zowel als de minimale en maximale waarde voor die eigenschappen.&lt;/p&gt;
  7044. &lt;p&gt;Het lettertype &#39;Jam&#39; heeft bijvoorbeeld 4 eigenschappen: &amp;quot;Bang!&amp;quot;, &amp;quot;Crumble!&amp;quot;, &amp;quot;Splatter!&amp;quot; en &amp;quot;Punch!&amp;quot; die elk een waarde tussen de 1 en 5 moeten hebben:&lt;/p&gt;
  7045. &lt;pre&gt;&lt;code&gt;p {
  7046.    font-family: &amp;quot;Jam&amp;quot;, monospace;
  7047.    font-variation-settings: &amp;quot;wght&amp;quot; 3.8, &amp;quot;crum&amp;quot; 3, &amp;quot;spla&amp;quot; 5, &amp;quot;punc&amp;quot; 0;
  7048. }
  7049. &lt;/code&gt;&lt;/pre&gt;
  7050. &lt;h2&gt;Toekomst&lt;/h2&gt;
  7051. &lt;p&gt;De volgende ontwikkeling die er aan zit te komen zijn kleurenlettertypes: meerdere kleuren in een lettertype, die met CSS aan te passen zijn. Zo zouden 💛 en 💙 de juiste fronteers-kleuren gegeven kunnen worden.&lt;/p&gt;
  7052. &lt;h2&gt;Wat kan mijn lettertype?&lt;/h2&gt;
  7053. &lt;p&gt;Heel veel van de genoemde functionaliteit hangt af van de lettertypes zelf, dus hoe kom je er achter wat je lettertype kan? Aanbieders van lettertypes geven gelukkig steeds beter in vertellen wat lettertype kunnen, kijk onder het kopje “Features” of “OpenType features”. Als ze een lijst van gliefen hebben kan je daar ook al vaak het een en ander aan zien: zijn er ligaturen? Verschillende cijfer-vormen?&lt;/p&gt;
  7054. &lt;p&gt;Je kan fonts uploaden naar een site zoals &lt;a href=&quot;https://wakamaifondue.com/&quot;&gt;wakamaifondue&lt;/a&gt; (spreek uit “What can my font do?”).&lt;/p&gt;
  7055. &lt;p&gt;Probeer het uit! Met een snel inelkaargeflanst pagina’tje kan je leuk experimenteren.&lt;/p&gt;
  7056. &lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
  7057. &amp;lt;html lang=&amp;quot;{taal}&amp;quot;&amp;gt;
  7058.  &amp;lt;head&amp;gt;
  7059.    &amp;lt;style&amp;gt;
  7060.    @font-face {
  7061.        font-family: &#39;{naam}&#39;;
  7062.        src: url(&#39;{font.woff2}&#39;), format(&#39;woff2&#39;);
  7063.    }
  7064.    body {
  7065.        font-family: &#39;{naam}&#39;;
  7066.        font-variant-ligatures: common-ligatures discretionary-ligatures;
  7067.    }
  7068.    &amp;lt;/style&amp;gt;
  7069.  &amp;lt;/head&amp;gt;
  7070.  &amp;lt;body&amp;gt;
  7071.    &amp;lt;p&amp;gt;Welke ligaturen zou dit lettertype hebben? Fi FL Th Qu fi fl ffi ffl st ct th tt qu&amp;lt;/p&amp;gt;
  7072.  &amp;lt;/body&amp;gt;
  7073. &amp;lt;/html&amp;gt;
  7074. &lt;/code&gt;&lt;/pre&gt;
  7075. &lt;h2&gt;Over Amy Davis&lt;/h2&gt;
  7076. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/amy.jpg&quot; alt=&quot;Foto van Amy Davis&quot; class=&quot;floating-portrait&quot; /&gt;
  7077. Ik ben opgegroeid met computers, en altijd gefascineerd geweest door het web, HTML, CSS en JS. In het dagelijkse leven ben ik Senior Front-end developer bij [B-ware Business Software](https://www.b-ware.com). Sinds 2016 ben ik lid van Fronteers en de meeste dagen te vinden op de [Fronteers Slack](https://fronteers-slack.herokuapp.com/). Mijn favoriete kleur is #6c48a4.
  7078. &lt;p&gt;Donatie: Wikimedia Foundation
  7079. Ik vind het prachtig om een artikel te schrijven over dingen waar ik verstand van heb en zo anderen verder te helpen. Dé organisatie die dit faciliteert op wereldwijde schaal is de &lt;a href=&quot;https://wikimediafoundation.org/&quot;&gt;Wikimedia Foundation&lt;/a&gt;, bekend van Wikipedia en &lt;a href=&quot;https://wikimediafoundation.org/our-work/wikimedia-projects/&quot;&gt;vele andere crowd-sourced projecten&lt;/a&gt;.&lt;/p&gt;
  7080. </content>
  7081.  </entry>
  7082.  <entry>
  7083.    <title>&amp;quot;Ik doe ook front-end&amp;quot;</title>
  7084.    <link href="https://www.fronteers.nl/nl/blog/2018/12/ik-doe-ook-front-end"/>
  7085.    <updated>2018-12-17T00:00:00Z</updated>
  7086.    <id>https://www.fronteers.nl/nl/blog/2018/12/ik-doe-ook-front-end</id>
  7087.    <content xml:lang="nl" type="html">&lt;p&gt;Nadat ik kennis heb gemaakt met een Poolse collega bij het koffiezetapparaat, bevliegt mij weer eens een terugkerend vraagstuk. Mijn Poolse collega blijkt een back-end developer te zijn die in een geheel Pools team werkt voor mijn nieuwe opdrachtgever. Terwijl ik tijdens het tappen van mijn espresso uitleg dat ik tijdelijk word ingehuurd als front-end developer, reageert hij direct “Yes, I do front-end too”. Ik dwaal direct af, nadenkend over zijn skills, gezien hij aangeeft een back-end developer te zijn. Ik zie front-end development als een specifiek vakgebied, waar je bepaalde skills voor nodig hebt. Terwijl ik teruglopend naar mijn plek hem nog eens profileer, vraag ik mezelf af; wat voor type front-end developer ben ik zelf eigenlijk?&lt;/p&gt;
  7088. &lt;h2&gt;Onzekerheid&lt;/h2&gt;
  7089. &lt;p&gt;Ook ik stop mensen graag in hokjes en geef iemand ongemerkt toch een bepaald profiel. Zou hij oog hebben voor UX? Zou hij pixel-perfect werken? Of voegt hij gewoon soms CSS aan zijn werk toe en doet hij daarom ook front-end? Dit is mijn eerste week bij een nieuwe opdracht. Altijd spannend om weer in aanraking te komen met nieuwe collega’s. Je probeert je weg weer opnieuw te vinden. De onzekerheid slaat soms toe. Terwijl ik juist heel goed weet wat ik kan, weet waar ik goed in ben, merk ik toch dat ik altijd onzeker ben over die ene techniek, waar je al maanden net nog iets meer over wilt weten om er een zelfverzekerd praatje over te houden.&lt;/p&gt;
  7090. &lt;h2&gt;Communicatief&lt;/h2&gt;
  7091. &lt;p&gt;Bij iedere nieuwe opdracht moet je iedereen leren kennen. Vaak als freelancer zijn er geen kennismakingsgesprekken met collega’s. In de eerste dagen probeer ik dan te ontdekken wat de mensen daar precies doen. Wie heb je waarvoor nodig? En ook belangrijk, wat kunnen ze precies? Ik kom er in een gesprek achter, dat ik voer met een directeur binnen dit bedrijf, dat in deze organisatie waarde wordt gehecht aan developers met een full stack skillset. Interessante informatie: gezien ik als front-ender goeie kennis heb van HTML, CSS en Javascript, maar toch met jarenlange PHP ervaring, voel ik me tijdens dat gesprek toch wat ongemakkelijk.&lt;/p&gt;
  7092. &lt;p&gt;Toch twijfel ik over zijn keuze. Zijn alleen full stack developers een goeie keuze voor je eindproducten? Voor wat betreft communicatie denk ik dat front-end developers over het algemeen toch wat meer outgoing zijn dan bijv. back-enders. Makkelijk communiceren is een voordeel. Zo ben je daardoor benaderbaar en is het zelf ook weer makkelijk om wat aan iemand te vragen. Als je bijvoorbeeld niet doorvraagt waarom een bepaalde keuze is gemaakt op design vlak, weet je nooit waarom je het implementeert.&lt;/p&gt;
  7093. &lt;h2&gt;Oog voor detail en design&lt;/h2&gt;
  7094. &lt;p&gt;Als front-end developer neem je wat skills mee. Over het algemeen ben je als front-end developer iemand die oog heeft voor detail en gevoel heeft voor UX. Net iets meer padding tussen de kolommen, zodat de content rustiger oogt? De scrollbare tabel juist animeren, zodat de gebruiker nog beter begrijpt hoe deze gescrollt kan worden? Zou mijn collega back-end developer en mijn ‘naar fullstack developers zoekende’ directeur dat principe begrijpen?&lt;/p&gt;
  7095. &lt;h2&gt;Hongerig naar nieuwe technieken&lt;/h2&gt;
  7096. &lt;p&gt;Gezien het landschap in front-end land met een rap tempo veranderd, moet je eigenlijk wel hongerig zijn naar nieuwe technieken. Relatief nieuwe CSS modules als Flexbox en CSS Grid worden geadopteerd als de standaard in menig webproject. En Javascript frameworks als Vue en React zijn bijvoorbeeld ook alweer enige tijd niet weg te slaan uit een willekeurige front-end vacature. Ben je er niet mee bekend? Dan kom je op sommige opdrachten niet on-board. Kun je nagaan wat je moet beheersen als fullstack developer?&lt;/p&gt;
  7097. &lt;h2&gt;“Jij past toch de kleuren aan”&lt;/h2&gt;
  7098. &lt;p&gt;Aan de andere kant merk ik ook af en toe dat er soms erg makkelijk over front-end werk wordt gedacht. “Oh, jij past toch de kleuren aan”, zei een consultant laatst tegen mij. Klopt! Dat doe ik zeker. En daarvoor heb ik SASS-variabelen gemaakt, zodat wanneer je de klant adviseert de groentint iets donkerder te maken in verband met webrichtlijnen, alles in één keer door het hele project veranderd. Je kunt het ‘m wellicht niet kwalijk nemen, maar het geeft wel aan dat niet iedereen weet wat we doen. Misschien ligt daar ook een communicatieve rol voor een front-end developer?&lt;/p&gt;
  7099. &lt;h2&gt;Oplevering&lt;/h2&gt;
  7100. &lt;p&gt;Aan het eind van de dag zal het project worden opgeleverd. Ik ben er van overtuigd dat het resultaat van het project er visueel gezien anders uitziet als een back-end developer die ook front-end werk erbij doet. Je hebt immers niet voor niets een front-end specialist. Een ultiem voorbeeld kwam mij onlangs voorbij toen ik een berg luiers voor mijn dochter bestelde bij Kruidvat Online. Je wordt netjes doorverwezen naar Ogone Payments. Bekijk het zelf. Het werkt. Alles wat je hieronder ziet is functioneel. Precies wat een back-end developer moet doen. Alleen, als ik nog maar naar de ‘Ga verder’ button kijk, gaat het bij mij enorm kriebelen. Je snapt vast wat ik bedoel. Er zit niet eens styling op. Verder staat er dan wel een Norton logo bij, maar dan nog oogt het bij mij nog steeds een beetje ‘unsecure’. Het heeft wat mij betreft meer een beetje de stijl van van een oplichter, die me een email stuurt om mij in te laten loggen bij mijn bank. Ik ben er dan ook echt van overtuigd dat een specialist als een front-end developer wel degelijk een andere denkwijze heeft dan andere specialisten.&lt;/p&gt;
  7101. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/ogone-payments.png&quot; alt=&quot;Betaalpagina van Ogone Payments&quot; /&gt;&lt;/p&gt;
  7102. &lt;h2&gt;Wat vind jij?&lt;/h2&gt;
  7103. &lt;p&gt;Wat voor skills en persoonlijke vaardigheden dient een front-end developer eigenlijk nog meer te hebben volgens jou?&lt;/p&gt;
  7104. &lt;h2&gt;Over Sander Langendoen&lt;/h2&gt;
  7105. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/sanderlangendoen.jpg&quot; alt=&quot;Foto van Sander Langendoen&quot; class=&quot;floating-portrait&quot; /&gt;
  7106. Ik ben Sander Langendoen. Freelance Front-end Developer. Front-end development blijft voor mij een nog niet uitgespeelde game. Ik ben blij dat ik iedere dag betaald mijn hobby mag uitoefenen.
  7107. Donatie
  7108. The Face This foundation is een stichting die Indonesische schooltjes in nood helpt. Ze vragen de leerlingen tekeningen te maken, en vragen op hun beurt getalenteerde artiesten de tekeningen te verwerken op t-shirt prints. Heb jij een cool shirt of hippe trui. Met de opbrengst van de shirts supporten ze weer de schooltjes.
  7109. </content>
  7110.  </entry>
  7111.  <entry>
  7112.    <title>Een API schrijven als een front end developer</title>
  7113.    <link href="https://www.fronteers.nl/nl/blog/2018/12/een-api-schrijven-als-een-front-end-developer"/>
  7114.    <updated>2018-12-16T00:00:00Z</updated>
  7115.    <id>https://www.fronteers.nl/nl/blog/2018/12/een-api-schrijven-als-een-front-end-developer</id>
  7116.    <content xml:lang="nl" type="html">&lt;p&gt;De laatste 12 maanden ben ik aan de slag gegaan om een “beer-API” te bouwen. De voornaamste reden om een API te bouwen was om te oefenen. En nu laat ik graag zien hoe ik het heb aangepakt. Hopelijk inspireert het jou ook om zelf een API te bouwen, ook als front-end developer! Na dit artikel kun je zelf een kleine API bouwen. Je zou bijvoorbeeld een database kunnen bijhouden met boeken die je hebt gelezen.&lt;/p&gt;
  7117. &lt;h2&gt;Wat gaan we bouwen?&lt;/h2&gt;
  7118. &lt;p&gt;Een verkleinde versie van mijn beer-api. Deze versie vraagt biertjes op uit mijn database. Het bevat 1 route, 1 controller, 1 service en 1 view. De view bestaat uit JSON. Het product wat we gaan bouwen kun je vinden op &lt;em&gt;&lt;a href=&quot;https://github.com/Thomas-Machielsen/beer-api-tutorial/tree/master/final&quot;&gt;GitHub&lt;/a&gt;&lt;/em&gt;.&lt;/p&gt;
  7119. &lt;h2&gt;Technologie die we gaan gebruiken&lt;/h2&gt;
  7120. &lt;p&gt;Als front-ender kies je er natuurlijk voor om zoveel mogelijk met JavaScript te doen. De meest voor de hand liggende keuze is dan ook Node.js voor de back-end.&lt;/p&gt;
  7121. &lt;p&gt;Als database heb ik gekozen voor MySQL, omdat ik er al ervaring mee had. Aangezien ik geen MySQL queries wil schrijven gebruik ik &lt;em&gt;&lt;a href=&quot;http://docs.sequelizejs.com/&quot;&gt;Sequelize&lt;/a&gt;&lt;/em&gt;. Sequelize is een JavaScript &lt;em&gt;ORM&lt;/em&gt; &lt;a href=&quot;https://en.wikipedia.org/wiki/Object-relational_mapping&quot;&gt;(Object Relational Mapping)&lt;/a&gt; zodat je met JavaScript queries kan schrijven.&lt;/p&gt;
  7122. &lt;p class=&quot;note&quot;&gt;
  7123. (Ik heb gekozen voor MySQL in dit project maar als ik het weer zou doen, zou ik kiezen voor Mongo of een andere NoSQL taal. NoSQL sluit namelijk beter aan bij JavaScript.)
  7124. &lt;/p&gt;
  7125. &lt;pre&gt;&lt;code&gt;this.UserSchema.User.findAll({
  7126. attributes: [&amp;quot;username&amp;quot;, &amp;quot;role&amp;quot;],
  7127. })
  7128. .then(users =&amp;gt; resolve(users))
  7129. .catch(reject);
  7130. &lt;/code&gt;&lt;/pre&gt;
  7131. &lt;p&gt;&lt;em&gt;Een sequelize query die alle usernames en beroepsrollen uit de “user” tabel haalt (SELECT username, role from USERS)&lt;/em&gt;&lt;/p&gt;
  7132. &lt;p&gt;Als laatste heb ik het populaire &lt;em&gt;&lt;a href=&quot;https://www.express.com/&quot;&gt;Express Framework&lt;/a&gt;&lt;/em&gt; gebruikt. Dit is een eenvoudig en snel in te zetten framework om web applicatie’s te bouwen.&lt;/p&gt;
  7133. &lt;p class=&quot;note&quot;&gt;
  7134. Express was echter geen goede keus voor dit project omdat ik enkel JSON terug ga sturen, Polka zou een betere keuze zijn geweest. Express heeft namelijk een rendering engine in zich maar dat is in dit specifieke geval overkill.
  7135. &lt;/p&gt;
  7136. &lt;h2&gt;Projectstructuur&lt;/h2&gt;
  7137. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/projectstructuur.png&quot; alt=&quot;De projectstructuur&quot; /&gt;&lt;/p&gt;
  7138. &lt;p&gt;Om een overzichtelijk project te hebben is het van belang dat je van te voren nadenkt over de projectstructuur. Ik maak gebruik van MVCS (Model Controller View Service), een variant van &lt;a href=&quot;https://nl.wikipedia.org/wiki/Model-view-controller-model&quot;&gt;MVC&lt;/a&gt;.&lt;/p&gt;
  7139. &lt;p&gt;Een model representeert data, bijvoorbeeld een rij uit de bier-tabel in de database. De controller is een dunne laag tussen de view en de service. De controller vraagt data uit de service en geeft deze data door aan de view. De view in mijn geval is 1 regel code in de controller die de JSON rendert.&lt;/p&gt;
  7140. &lt;pre&gt;&lt;code&gt;res.json({ data: results });
  7141. &lt;/code&gt;&lt;/pre&gt;
  7142. &lt;p&gt;Nu er een structuur is, kan ik beginnen met bouwen!&lt;/p&gt;
  7143. &lt;h2&gt;Stap 1: de server starten&lt;/h2&gt;
  7144. &lt;p&gt;Ik begin met app.js, het startpunt van de applicatie. Hierin start ik de app op en begin ik ook met importeren van packages.&lt;/p&gt;
  7145. &lt;pre&gt;&lt;code&gt;require(&#39;dotenv&#39;).config();
  7146. const express = require(&#39;express&#39;);
  7147. const app = express();
  7148. const defaultPort = 3030;
  7149. const port = process.env.PORT || defaultPort;
  7150.  
  7151. app.listen(port, () =&amp;gt; console.log(`App listening at http://localhost:${port}`)); //eslint-disable-line no-console
  7152. &lt;/code&gt;&lt;/pre&gt;
  7153. &lt;p&gt;Als je naar &lt;em&gt;&lt;a href=&quot;https://github.com/Thomas-Machielsen/beer-api-tutorial/tree/master/v1&quot;&gt;GitHub&lt;/a&gt;&lt;/em&gt; gaat zie je hoe het project er nu uit ziet.&lt;/p&gt;
  7154. &lt;p&gt;Het valt je misschien op dat er process.env.PORT staat. Dit zijn &lt;em&gt;&lt;em&gt;environment variabelen&lt;/em&gt;&lt;/em&gt;. Deze sla je op in een .env file. Dit is configuratie van een server maar deze configuratie wil je per server instellen. Als ik dit hardcoded erin zou zetten en het dan zou pushen naar de server zou de applicatie kapot gaan. En dan zou ik andere code moeten pushen en dat willen we niet. Dit is gebaseerd op het principe “&lt;em&gt;&lt;em&gt;config in the environment&lt;/em&gt;&lt;/em&gt;” van de website &lt;em&gt;&lt;a href=&quot;https://12factor.net/config&quot;&gt;12 factor&lt;/a&gt;&lt;/em&gt;.&lt;/p&gt;
  7155. &lt;p&gt;Als je dit zou opstarten krijg je een console message. Heel leuk natuurlijk maar verder doet het nog niks.&lt;/p&gt;
  7156. &lt;h2&gt;Stap 2: routes&lt;/h2&gt;
  7157. &lt;p&gt;Om verder te gaan wil ik mock data laten zien als de gebruiker naar localhost:3030/api/beers gaat. Hiervoor hebben we een route nodig. Een route is een stukje code die bepaalt waar een request heen gaat. De request is in dit geval /api/beers (een &lt;em&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET&quot;&gt;GET&lt;/a&gt;&lt;/em&gt;). In de route vertellen we dan wat er moet gebeuren als /api/beers wordt aangeroepen.&lt;/p&gt;
  7158. &lt;p&gt;Allereerst gaan we in app.js zeggen dat we gebruik gaan maken van routes.&lt;/p&gt;
  7159. &lt;pre&gt;&lt;code&gt;require(&#39;dotenv&#39;).config();
  7160. const express = require(&#39;express&#39;);
  7161. const app = express();
  7162. const defaultPort = 3030;
  7163. const port = process.env.PORT || defaultPort;
  7164.  
  7165. const router = require(&#39;./routes&#39;);
  7166. app.use(router);
  7167.  
  7168. app.listen(port, () =&amp;gt; console.log(`App listening at http://localhost:${port}`)); //eslint-disable-line no-console
  7169. &lt;/code&gt;&lt;/pre&gt;
  7170. &lt;p&gt;De regel &lt;code&gt;const router = require(‘./routes’);&lt;/code&gt; is een verwijzing naar waar het bestandje met routes staat. Vervolgens vertellen we de app deze routes te gebruiken door app.use aan te roepen met als argument router.&lt;/p&gt;
  7171. &lt;p&gt;In de root van het project maak je een bestandje aan ‘routes.js’. En in dit bestand zet je:&lt;/p&gt;
  7172. &lt;pre&gt;&lt;code&gt;const { Router } = require(&#39;express&#39;);
  7173. const router     = module.exports = Router();
  7174.  
  7175. // Controllers
  7176. const beerCtrl  = require(&#39;./controllers/beersCtrl&#39;);
  7177.  
  7178. router.get(&#39;/api/beers&#39;, [beerCtrl.getBeer]);
  7179. &lt;/code&gt;&lt;/pre&gt;
  7180. &lt;p&gt;Hierin gebruiken we de router van express. Met router.get zeggen we dat de router moet luisteren naar HTTP methode GET. Als er dus een GET methode komt op /api/beers gaat de applicatie naar de beerCtrl waarin weer een functie staat die ‘getBeer’ heet.&lt;/p&gt;
  7181. &lt;p&gt;Aangezien we nu een verwijzing hebben naar de beerCtrl moeten we natuurlijk ook de controller maken. De controller haalt data op uit de service en geeft deze door aan de view.&lt;/p&gt;
  7182. &lt;pre&gt;&lt;code&gt;const Sequelize = require(&amp;quot;sequelize&amp;quot;);
  7183. const BeerSchema = require(&amp;quot;../schemas/Beer&amp;quot;);
  7184. const RatingSchema = require(&amp;quot;../schemas/Rating&amp;quot;);
  7185. const BeersService = require(&amp;quot;../services/beers&amp;quot;);
  7186. const { STATUSCODES } = require(&#39;../constants&#39;);
  7187.  
  7188. const Beers = new BeersService(Sequelize, BeerSchema, RatingSchema);
  7189.  
  7190. const getBeer = (req, res) =&amp;gt; {
  7191.  Beers.getBeer(req)
  7192.    .then(results =&amp;gt; res.json(results))
  7193.    .catch(err =&amp;gt; {
  7194.      res.status(STATUSCODES.NOT_FOUND);
  7195.      res.json(err);
  7196.    });
  7197. };
  7198.  
  7199. module.exports = { getBeer };
  7200. &lt;/code&gt;&lt;/pre&gt;
  7201. &lt;p&gt;De controller moet communiceren met de service dus we requiren de BeerService en vervolgen instantiëren we hem door er &lt;em&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new&quot;&gt;New&lt;/a&gt;&lt;/em&gt; op aan te roepen. Daarna roepen we de functie getBeer van de service aan. We gebruiken hier de request (req) en result (res) objecten van Express. Vervolgens pakken we deze resultaten van de service en renderen we ze terug als JSON. Dan zit er nog wat error handling in maar dat ga ik nu niet behandelen.&lt;/p&gt;
  7202. &lt;p&gt;Nu moet de Service natuurlijk gemaakt worden. Maak nu een folder aan en noem die services. Vervolgens maken we een bestandje aan: &#39;beers.js&#39;.&lt;/p&gt;
  7203. &lt;pre&gt;&lt;code&gt;module.exports = class BeersService {
  7204. getBeer() {
  7205.   return new Promise(resolve =&amp;gt; {
  7206.     resolve({ data: &#39;beers&#39; })
  7207.   });
  7208. }
  7209. };
  7210. &lt;/code&gt;&lt;/pre&gt;
  7211. &lt;p&gt;Er is voor gekozen om hier gebruik te maken van een class, dit is echter niet per se nodig. Je zou ook een gewone functie kunnen gebruiken.&lt;/p&gt;
  7212. &lt;p&gt;Als je nu naar localhost:3030/api/beers gaat zie je JSON met daarin “data: ‘beers’”.&lt;/p&gt;
  7213. &lt;p&gt;Maar dit is mock data. We willen natuurlijk echte data. Op &lt;em&gt;&lt;a href=&quot;https://github.com/Thomas-Machielsen/beer-api-tutorial/tree/master/v2&quot;&gt;GitHub&lt;/a&gt;&lt;/em&gt; zie je nu de huidige status.&lt;/p&gt;
  7214. &lt;h2&gt;Stap 3: koppelen met echte data&lt;/h2&gt;
  7215. &lt;p&gt;In het mapje final zit een schema voor de database, database.sql. Als je dit installeert en verbindt met de app kun je dit gedeelte ook draaien. Je kan natuurlijk altijd gewoon blijven lezen.&lt;/p&gt;
  7216. &lt;p&gt;Zoals ik al eerder aangaf gebruik ik sequelize zodat ik op een JavaScript manier queries kan bouwen en geen SQL queries hoef te schrijven. Eerst moeten we schema’s definiëren. We definiëren hoe de database tabellen in elkaar zitten. Dit komt overeen met hoe de database in elkaar zit. Maak een folder aan en noem die &lt;code&gt;schemas&lt;/code&gt;, zet hier Beer.js in.&lt;/p&gt;
  7217. &lt;pre&gt;&lt;code&gt;const dbConfig = require(&amp;quot;../config/db&amp;quot;);
  7218. const Sequelize = require(&amp;quot;sequelize&amp;quot;);
  7219.  
  7220. const Beer = dbConfig.db.define(&amp;quot;Beer&amp;quot;, {
  7221. name: Sequelize.STRING,
  7222. userId: Sequelize.INTEGER,
  7223. style: Sequelize.STRING,
  7224. brewer: Sequelize.STRING,
  7225. desc: Sequelize.TEXT
  7226. });
  7227.  
  7228. const associations =  (Rating) =&amp;gt; {
  7229. Beer.hasMany(Rating);
  7230. };
  7231.  
  7232. module.exports = { Beer, associations };
  7233. &lt;/code&gt;&lt;/pre&gt;
  7234. &lt;p&gt;In dit bestand zeggen we dat er een Beer schema is, die definiëren we met Sequelize. We doen ook een association, hiermee verbinden we het Rating schema met het Beer Schema. Dit hebben we nodig om joins op de query uit te voeren. We zeggen dat één bier (één rij in de tabel) meerdere ratings kan hebben. (Meerdere mensen kunnen hetzelfde biertje raten.)&lt;/p&gt;
  7235. &lt;p&gt;Hetzelfde doen we voor ratings. Zet dit in Rating.js:&lt;/p&gt;
  7236. &lt;pre&gt;&lt;code&gt;const dbConfig = require(&amp;quot;../config/db&amp;quot;);
  7237. const Sequelize = require(&amp;quot;sequelize&amp;quot;);
  7238.  
  7239. const Rating = dbConfig.db.define(&amp;quot;Rating&amp;quot;, {
  7240. rating: Sequelize.INTEGER,
  7241. userId: Sequelize.INTEGER,
  7242. beerId: Sequelize.INTEGER
  7243. });
  7244.  
  7245. const associations = (Beer) =&amp;gt; {
  7246. Rating.belongsTo(Beer);
  7247. };
  7248.  
  7249. module.exports = { Rating, associations };
  7250. &lt;/code&gt;&lt;/pre&gt;
  7251. &lt;p&gt;De dbConfig bevat informatie om te verbinden met de database. Dit bestand bevat bijvoorbeeld inlog gegevens voor de database.&lt;/p&gt;
  7252. &lt;pre&gt;&lt;code&gt;const Sequelize = require(&amp;quot;sequelize&amp;quot;);
  7253.  
  7254. const db = new Sequelize(
  7255.  process.env.DATABASE_NAME,
  7256.  process.env.DATABSE_USER,
  7257.  process.env.DATABASE_PASSWORD,
  7258.  {
  7259.    host: process.env.DATABASE_HOST,
  7260.    dialect: &amp;quot;mysql&amp;quot;,
  7261.    pool: {
  7262.      max: 5,
  7263.      min: 0,
  7264.      idle: 10000
  7265.    }
  7266.  }
  7267. );
  7268.  
  7269. module.exports = { db };
  7270. &lt;/code&gt;&lt;/pre&gt;
  7271. &lt;p&gt;Om ervoor te zorgen dat onze beer-service gebruik kan maken van Sequelize, moeten we sequelize beschikbaar maken. We zouden in services/beers.js Sequelize kunnen requiren maar dan kunnen we Sequelize niet mocken. Om in een later stadium services/beers.js te kunnen testen moeten we Sequelize kunnen mocken. Daarvoor gaan we alle dependencies meegeven als een argument aan de service. Dit doen we in de controller.&lt;/p&gt;
  7272. &lt;pre&gt;&lt;code&gt;const Sequelize = require(&amp;quot;sequelize&amp;quot;);
  7273. const BeerSchema = require(&amp;quot;../schemas/Beer&amp;quot;);
  7274. const RatingSchema = require(&amp;quot;../schemas/Rating&amp;quot;);
  7275. const BeersService = require(&amp;quot;../services/beers&amp;quot;);
  7276. const { STATUSCODES } = require(&#39;../constants&#39;);
  7277.  
  7278. const Beers = new BeersService(Sequelize, BeerSchema, RatingSchema);
  7279.  
  7280. const getBeer = (req, res) =&amp;gt; {
  7281.  Beers.getBeer(req)
  7282.    .then(results =&amp;gt; res.json(results))
  7283.    .catch(err =&amp;gt; {
  7284.      res.status(STATUSCODES.NOT_FOUND);
  7285.      res.json(err);
  7286.    });
  7287. };
  7288.  
  7289. module.exports = { getBeer };
  7290. &lt;/code&gt;&lt;/pre&gt;
  7291. &lt;p&gt;Je ziet hier dat ik Sequelize, BeerSchema en het RatingSchema meegeef aan de service. Deze manier van dependencies meegeven aan code wordt ook wel &lt;em&gt;&lt;em&gt;dependency injection&lt;/em&gt;&lt;/em&gt; genoemd.&lt;/p&gt;
  7292. &lt;p&gt;Aangezien we deze dependencies meegeven aan de beer-service moeten we ook zorgen dat de beer-service deze gebruikt.&lt;/p&gt;
  7293. &lt;p&gt;Dit doen we door een &lt;em&gt;&lt;em&gt;constructor&lt;/em&gt;&lt;/em&gt; toe te voegen. Een constructor is een methode van een klasse. De constructor wordt als eerste uitgevoerd zodra de klasse wordt geïnitialiseerd.&lt;/p&gt;
  7294. &lt;pre&gt;&lt;code&gt;constructor(Sequelize, BeerSchema, RatingSchema) {
  7295.    this.Sequelize = Sequelize;
  7296.    this.BeerSchema = BeerSchema;
  7297.    this.RatingSchema = RatingSchema;
  7298. }
  7299. &lt;/code&gt;&lt;/pre&gt;
  7300. &lt;p&gt;&lt;em&gt;De constructor in services/beers.js&lt;/em&gt;&lt;/p&gt;
  7301. &lt;p&gt;Van de biertjes die we gaan selecteren willen we enkele dingen weten. We zijn geïnteresseerd in de attributen &amp;quot;id&amp;quot;, &amp;quot;name&amp;quot;, &amp;quot;style&amp;quot;, &amp;quot;brewer&amp;quot; en de gemiddelde “rating”. De attributen die we gaan selecteren slaan we op in een aparte functie. Dit volgens het principe &lt;em&gt;&lt;a href=&quot;https://www.bol.com/nl/f/clean-code-a-handbook-of-agile-software-craftsmanship/9200000033313462/&quot;&gt;“&lt;em&gt;functions should do one thing”&lt;/em&gt;.&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
  7302. &lt;p&gt;Hetzelfde gaan we doen voor het koppelen van de twee schema’s.&lt;/p&gt;
  7303. &lt;pre&gt;&lt;code&gt;constructor(Sequelize, BeerSchema, RatingSchema) {
  7304.  this.Sequelize = Sequelize;
  7305.  this.BeerSchema = BeerSchema;
  7306.  this.RatingSchema = RatingSchema;
  7307.  
  7308.  this.makeAssocations();
  7309.  this.saveSelectors();
  7310. }
  7311.  
  7312. makeAssocations() {
  7313.  this.RatingSchema.associations(this.BeerSchema.Beer);
  7314.  this.BeerSchema.associations(this.RatingSchema.Rating);
  7315. }
  7316.  
  7317. saveSelectors() {
  7318.  this.attributesArrayWithId = [&amp;quot;id&amp;quot;, &amp;quot;name&amp;quot;, &amp;quot;style&amp;quot;, &amp;quot;brewer&amp;quot;];
  7319.  this.starAttribute = [
  7320.    [this.Sequelize.fn(&amp;quot;AVG&amp;quot;, this.Sequelize.col(&amp;quot;rating&amp;quot;)), &amp;quot;stars&amp;quot;]
  7321.  ];
  7322. };
  7323. &lt;/code&gt;&lt;/pre&gt;
  7324. &lt;p&gt;&lt;em&gt;De constructor in services/beers.js. We slaan de attributen op die we willen opvragen en we koppelen de databases.&lt;/em&gt;&lt;/p&gt;
  7325. &lt;p&gt;Nu is het tijd om de query te maken. Zoals reeds gezegd is Sequelize een ORM. Een ORM mapped objecten naar relaties. Een query bouw je dus op uit objecten. Omdat database code async is, werkt sequelize met promises. (Async, await werd destijds nog niet ondersteund, nu wel).&lt;/p&gt;
  7326. &lt;pre&gt;&lt;code&gt;this.BeerSchema.Beer.findAll({
  7327.  attributes: this.attributesArrayWithId,
  7328.  required: false,
  7329.  include: [
  7330.    {
  7331.      model: this.RatingSchema.Rating,
  7332.      attributes: this.starAttribute
  7333.    }
  7334.  ],
  7335.  raw: true,
  7336.  nest: true,
  7337.  group: [&amp;quot;id&amp;quot;],
  7338.  where: helpers.getParams(req.params.id)
  7339. })
  7340. &lt;/code&gt;&lt;/pre&gt;
  7341. &lt;p&gt;Hierin wordt gezegd BeerScheme kijk naar de database definitie “Beer”. (Een verwijzing naar Beer in schemas/Beer.js). Vervolgens voeren we het Sequelize commando “findAll” uit. Dit betekent dat ik alle rijen terug wil, die voldoen aan de requirements. (Er bestaat bijvoorbeeld ook findOne). Daarna geef ik op welke attributen ik terug wil zien, zoals aangegeven in de vorige stap.&lt;/p&gt;
  7342. &lt;p&gt;Daarna include ik de rating tabel. (required, raw &amp;amp; nest sla ik even over, dat is configuratie van Sequelize)&lt;/p&gt;
  7343. &lt;p&gt;Vervolgens group ik het op id. Dan is er nog een where clause, die verwijst naar een functie namelijk ‘helpers.getParams’. Dit is een helper functie, die of een leeg object meegeeft of een id. In een later stadium kan je met behulp van dat id één biertje opvragen.&lt;/p&gt;
  7344. &lt;pre&gt;&lt;code&gt;this.BeerSchema.Beer.findAll({
  7345.  attributes: this.attributesArrayWithId,
  7346.  required: false,
  7347.  include: [
  7348.    {
  7349.      model: this.RatingSchema.Rating,
  7350.      attributes: this.starAttribute
  7351.    }
  7352.  ],
  7353.  raw: true,
  7354.  nest: true,
  7355.  group: [&amp;quot;id&amp;quot;],
  7356.  where: helpers.getParams(req.params.id)
  7357. })
  7358. &lt;/code&gt;&lt;/pre&gt;
  7359. &lt;p&gt;Uit Sequelize komt een promise dus die gaan we opvangen. We kijken eerst of er resultaat is. Zo niet gaan we gelijk weg uit de promise. Dit noem je ook wel het &lt;em&gt;&lt;a href=&quot;http://rikschennink.nl/thoughts/the-bouncer-pattern/&quot;&gt;“bouncer pattern”&lt;/a&gt;&lt;/em&gt;. Het moment dat je weet dat een functie niks meer doet, ga je er gelijk uit weg. Het voordeel is dat je er plattere code door krijgt. Wat weer beter leesbaar is.&lt;/p&gt;
  7360. &lt;p&gt;Mocht de code echter wel resultaten geven, dan geven we een bericht terug aan de controller. De controller verwacht echter een promise dus we moeten alles nog wrappen in een promise.&lt;/p&gt;
  7361. &lt;pre&gt;&lt;code&gt;getBeer(req) {
  7362.  return new Promise((resolve, reject) =&amp;gt; {
  7363.    this.BeerSchema.Beer.findAll({
  7364.      attributes: this.attributesArrayWithId,
  7365.      required: false,
  7366.      include: [
  7367.        {
  7368.          model: this.RatingSchema.Rating,
  7369.          attributes: this.starAttribute
  7370.        }
  7371.      ],
  7372.      raw: true,
  7373.      nest: true,
  7374.      group: [&amp;quot;id&amp;quot;],
  7375.      where: helpers.getParams(req.params.id)
  7376.    })
  7377.    .then(beers =&amp;gt; {
  7378.      if (beers.length === 0) { reject(NO_BEERS); }
  7379.      resolve({
  7380.        success: true,
  7381.        beers
  7382.      });
  7383.    })
  7384.    .catch(e =&amp;gt; {
  7385.      reject(e);
  7386.    });
  7387.  });
  7388. }
  7389. &lt;/code&gt;&lt;/pre&gt;
  7390. &lt;p&gt;De volledige code is wederom te vinden op &lt;em&gt;&lt;a href=&quot;https://github.com/Thomas-Machielsen/beer-api-tutorial/tree/master/final&quot;&gt;GitHub&lt;/a&gt;&lt;/em&gt;.&lt;/p&gt;
  7391. &lt;h2&gt;Conclusie&lt;/h2&gt;
  7392. &lt;p&gt;Je hebt nu hopelijk genoeg informatie om als hobby-project zelf een API te bouwen. Natuurlijk is dit een versimpelde versie, er zitten bijvoorbeeld geen gebruikers in. De biertjes zijn niet aan te passen, niet te verwijderen en nieuwe toevoegen kan ook nog niet. Toch hoop ik dat dit een basis is voor iedereen om eens zelf een API te bouwen. Want als FED is het erg leerzaam (en leuk!) om zelf een API te bouwen.&lt;/p&gt;
  7393. &lt;p&gt;En als je interesse hebt in een grotere variant, de volledige code is natuurlijk op &lt;em&gt;&lt;a href=&quot;https://github.com/Thomas-Machielsen/beer-api&quot;&gt;GitHub&lt;/a&gt;&lt;/em&gt;.&lt;/p&gt;
  7394. &lt;h2&gt;Over Thomas Machielsen&lt;/h2&gt;
  7395. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/thomas.jpeg&quot; alt=&quot;Foto van thomas&quot; class=&quot;floating-portrait&quot; /&gt;
  7396. Thomas is een front end developer bij Mirabeau. Daar werkt hij aan allerlei toffe projecten. Dat is ook precies wat die doet in z&#39;n vrije tijd! Zolang het JavaScript is, wordt Thomas gelukkig!
  7397. &lt;p&gt;Donatie: Longfonds&lt;/p&gt;
  7398. </content>
  7399.  </entry>
  7400.  <entry>
  7401.    <title>Beginnen met WebBluetooth</title>
  7402.    <link href="https://www.fronteers.nl/nl/blog/2018/12/beginnen-met-webbluetooth"/>
  7403.    <updated>2018-12-15T00:00:00Z</updated>
  7404.    <id>https://www.fronteers.nl/nl/blog/2018/12/beginnen-met-webbluetooth</id>
  7405.    <content xml:lang="nl" type="html">&lt;p&gt;Het web is traditioneel altijd goed geweest in het praten met servers. De hele infrastructuur van het web is erop gebaseerd. Maar nu het web dankzij Progressive Web Apps naar native applicaties toe beweegt, hebben we ook de mogelijkheden van native apps nodig. Het ophalen en tonen van tekst, afbeeldingen en formulieren is niet meer genoeg.&lt;/p&gt;
  7406. &lt;p&gt;Het web is traditioneel altijd goed geweest in het praten met servers. De hele infrastructuur van het web is erop gebaseerd. Maar nu het web dankzij Progressive Web Apps naar native applicaties toe beweegt, hebben we ook de mogelijkheden van native apps nodig. Het ophalen en tonen van tekst, afbeeldingen en formulieren is niet meer genoeg.&lt;/p&gt;
  7407. &lt;p&gt;Het aantal nieuwe specificaties dat de afgelopen paar jaar is geïmplementeerd is enorm. We hebben specificaties voor 3D, zoals WebGL en binnenkort WebGPU. We kunnen audio streamen, video kijken en de webcam als input device gebruiken. Code schrijven die bijna net zo snel is als native code, met behulp van WebAssembly. En ondanks dat het web oorspronkelijk altijd een netwerkverbinding nodig had, kunnen we nu offline websites en apps maken dankzij Service Workers. Dat is geweldig, maar op één gebied liepen we nog achter op native apps: het praten met andere apparaten.&lt;/p&gt;
  7408. &lt;p&gt;WebBluetooth is een nieuwe specificatie die beschikbaar is in Chrome en Samsung Internet, die ons in staat stelt om rechtstreeks vanuit de browser te praten met Bluetooth Low Energy apparaten.&lt;/p&gt;
  7409. &lt;p&gt;Elke dag worden er meer dan 10 miljoen apparaten met Bluetooth-ondersteuning gemaakt. Dat is inclusief computers en mobieltjes, maar ook apparaten zoals hartslagmeters en glucosemeters, IoT-apparaten zoals lampen, en speelgoed zoals op afstand bestuurbare auto&#39;s en drones.&lt;/p&gt;
  7410. &lt;h2&gt;Het saaie theoretische gedeelte&lt;/h2&gt;
  7411. &lt;p&gt;Omdat Bluetooth geen webtechnologie is, komen de woorden die gebruikt worden ons minder bekend voor. Daarom leg ik kort de terminologie uit en hoe Bluetooth werkt.&lt;/p&gt;
  7412. &lt;p&gt;Elk Bluetooth-apparaat is een &#39;Central&#39;-apparaat, of een &#39;Peripheral&#39;. Alleen central-apparaten kunnen verbindingen maken, en central-apparaten kunnen alleen met peripherals praten. Een voorbeeld van een central-apparaat is een computer of een mobiele telefoon.&lt;/p&gt;
  7413. &lt;p&gt;Een peripheral kan zelf geen verbinding maken en kan alleen met een central-apparaat praten. Bovendien kan het maar met één central-apparaat tegelijkertijd praten. Een peripheral kan niet met een andere peripheral praten.&lt;/p&gt;
  7414. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/bluetooth/central-peripherals.png&quot; alt=&quot;Voorbeelden van central en peripherals&quot; /&gt;&lt;/p&gt;
  7415. &lt;p&gt;Een central-apparaat kan met meerdere peripherals tegelijkertijd praten en zou berichten kunnen doorsturen tussen peripherals. Een hartslagmonitor kan niet praten met lampen, beide zijn peripherals. Maar het is mogelijk een programma te schrijven dat draait op het central-apparaat, dat de hartslag uitleest en de lampen rood maakt als de hartslag boven een bepaalde grens komt.&lt;/p&gt;
  7416. &lt;p&gt;Als we over WebBluetooth praten, dan praten we over een specifiek gedeelte van de Bluetooth-specificatie met de naam Generic Attribute Profile, die een niet zo logische afkorting heeft: GATT. Omdat GAP al in gebruik was.&lt;/p&gt;
  7417. &lt;p&gt;En dan praten we niet meer over central-apparaten en peripherals, maar over clients en servers. Je lampen zijn servers. Dat klinkt misschien vreemd, maar het wordt logisch als je er wat langer over nadenkt. Net als een browser, die een connectie maakt met een server op het internet, maakt de client - de telefoon of computer - een connectie met de GATT-server in de lamp.&lt;/p&gt;
  7418. &lt;p&gt;Elke server biedt één of meerdere services aan. Sommige van deze services zijn gedefinieerd door de standaard, maar je kunt ook je eigen services maken. In het geval van de hartslagmonitor is er een officiële service gedefinieerd in de standaard. Voor de lamp is dat er niet, en elke leverancier probeert hetzelfde probleem opnieuw op te lossen. En iedereen natuurlijk op een andere manier.&lt;/p&gt;
  7419. &lt;p&gt;Elke service heeft één of meerdere characteristics. Elke characteristic heeft een value welke gelezen of geschreven kan worden. Vergelijk het met een array van objects, met elk object een aantal properties welke een value hebben.&lt;/p&gt;
  7420. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/bluetooth/array-of-objects.png&quot; alt=&quot;Array of objects&quot; /&gt;&lt;/p&gt;
  7421. &lt;p&gt;Maar anders dan properties van objecten, worden de services en characteristics niet geidentificeerd met een naam. Elke service en characteristic heeft een unieke UUID die 16 of 128 bits lang kan zijn. Officieel is de 16 bit UUID gereserveerd voor de standaard services, maar dat is een regel die vrijwel niemand volgt.&lt;/p&gt;
  7422. &lt;p&gt;En tot slot, elke value bestaat uit één of meerdere bytes. Geen strings, of objects, maar enkel een aantal bytes, elk met een waarde van 0 tot 255.&lt;/p&gt;
  7423. &lt;h2&gt;Hoe ziet een Bluetooth-lamp er uit&lt;/h2&gt;
  7424. &lt;p&gt;Laten we naar een echt Bluetooth-apparaat kijken: een Mipow Playbulb Sphere. Je kunt een app gebruiken, zoals BLE Scanner of nRF Connect om connectie te maken met het apparaat, en dan alle services en characteristics bekijken. In dit geval gebruik ik de BLE Scanner-app voor iOS.&lt;iframe src=&quot;https://player.vimeo.com/video/?texttrack=en&quot; width=&quot;640&quot; height=&quot;360&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen; picture-in-picture&quot; allowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;Het eerste wat je ziet als je een connectie maakt met de lamp, is een lijst van alle services. Er zijn een aantal standaard services, zoals &#39;device information&#39; en de &#39;battery&#39; service. Maar er zijn ook een aantal eigen services. Ik ben vooral geïnteresseerd in de service met de 16 bit UUID &lt;code&gt;0xff0f&lt;/code&gt;. Als je deze service bekijkt, zie je een lange lijst met characteristics. En ik heb geen idee wat de meeste van deze characteristics doen, het is geen onderdeel van de standaard, er is helaas geen beschrijving en ze hebben alleen een nietszeggende UUID.&lt;/p&gt;
  7425. &lt;p&gt;De eerste characteristic met de UUID &lt;code&gt;0xfffc&lt;/code&gt; is interessant. Het heeft een value van vier bytes. Als we de value van deze bytes veranderen van &lt;code&gt;0x00000000&lt;/code&gt; naar &lt;code&gt;0x00ff0000&lt;/code&gt; dan wordt de lamp rood. Veranderen we de value naar &lt;code&gt;0x0000ff00&lt;/code&gt; dan wordt de lamp groen, en met de value &lt;code&gt;0x000000ff&lt;/code&gt; wordt de lamp blauw. Dit zijn RGB-kleuren en die komen exact overeen met de hex-kleuren die we ook gebruiken voor HTML en CSS. Maar wat doet die eerste byte? Als we de value veranderen naar &lt;code&gt;0xff000000&lt;/code&gt; dan wordt de lamp wit.&lt;/p&gt;
  7426. &lt;p&gt;De lamp bevat 4 LED&#39;s en door deze vier bytes te veranderen kunnen we de intensiteit van elk van deze LED&#39;s veranderen. En door de intensiteit van de individuele LED&#39;s te veranderen kunnen we elke kleur maken die we willen.&lt;/p&gt;
  7427. &lt;h2&gt;De WebBluetooth API&lt;/h2&gt;
  7428. &lt;p&gt;Het is mooi dat we een native app kunnen gebruiken om de kleur van een lamp te veranderen, maar hoe doen we dat met de browser? Met de kennis van Bluetooth en GATT die we net hebben opgedaan is dit relatief simpel. Dankzij de WebBluetooth API hebben we maar een paar regels JavaScript nodig om de kleur van de lamp te veranderen.&lt;/p&gt;
  7429. &lt;h2&gt;Connectie maken met het apparaat&lt;/h2&gt;
  7430. &lt;p&gt;Het eerste dat we moeten doen is het opbouwen van de connectie van de browser naar het apparaat. We roepen de function &lt;code&gt;navigator.bluetooth.requestDevice()&lt;/code&gt; aan met een configuratie-object als parameter. Dat object bepaalt welk apparaat we willen gebruiken en welke services beschikbaar moeten zijn via de API. In het voorbeeld hieronder filteren we de lijst met apparaten op basis van de naam van het apparaat. We willen alleen apparaten zien waarvan de naam begint met &#39;PLAYBULB&#39;. We specificeren ook dat we de service &lt;code&gt;0xff0f&lt;/code&gt; willen gebruiken.&lt;/p&gt;
  7431. &lt;p&gt;Omdat de requestDevice() function een promise teruggeeft, kunnen we het resultaat &#39;await-en&#39;.&lt;/p&gt;
  7432. &lt;pre&gt;&lt;code&gt;let device = await navigator.bluetooth.requestDevice({
  7433.    filters: [
  7434.        { namePrefix: &#39;PLAYBULB&#39; }
  7435.    ],
  7436.    optionalServices: [ 0xff0f ]
  7437. });
  7438. &lt;/code&gt;&lt;/pre&gt;
  7439. &lt;p&gt;Zodra we deze function aanroepen krijgen we een venster te zien met een lijst van alle apparaten die voldoen aan de filters die we hebben opgegeven. We moeten nu handmatig het apparaat selecteren en handmatig hiermee verbinden. Dit is een essentiële stap, omdat we niet willen dat een willekeurige website zomaar verbinding kan maken met apparaten, of alleen al kan zien welke apparaten je allemaal in huis hebt. De gebruiker heeft de controle.&lt;/p&gt;
  7440. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/bluetooth/connect.png&quot; alt=&quot;Bluetooth apparaat verbinden&quot; /&gt;&lt;/p&gt;
  7441. &lt;p&gt;Nu we toegang hebben tot het apparaat kunnen we een connectie maken met de GATT-server door de function connnect() aan te roepen op de gatt property van het device object dat we zojuist terug hebben gekregen. Ook hier kunnen we weer wachten op het result door middel van await.&lt;/p&gt;
  7442. &lt;pre&gt;&lt;code&gt;let server = await device.gatt.connect();
  7443. &lt;/code&gt;&lt;/pre&gt;
  7444. &lt;p&gt;We hebben nu toegang tot de server en kunnen de function getPrimaryService() aanroepen met de UUID van de service die we willen gebruiken as parameter. En wederom wachten we op het resultaat door middel van await.&lt;/p&gt;
  7445. &lt;pre&gt;&lt;code&gt;let service = await server.getPrimaryService(0xff0f);
  7446. &lt;/code&gt;&lt;/pre&gt;
  7447. &lt;p&gt;Daarna roepen we de function getCharacteristic() aan met de UUID van de characteristic die we willen gebruiken als parameter.&lt;/p&gt;
  7448. &lt;pre&gt;&lt;code&gt;let characteristic = await service.getCharacteristic(0xfffc);
  7449. &lt;/code&gt;&lt;/pre&gt;
  7450. &lt;p&gt;We hebben nu de characteristic die we nodig hebben om te lezen en schrijven.&lt;/p&gt;
  7451. &lt;h2&gt;Schrijven van de value&lt;/h2&gt;
  7452. &lt;p&gt;Om value te kunnen veranderen moeten we de functie writeValue van de characteristic aanroepen met de value die we willen veranderen als parameter.&lt;/p&gt;
  7453. &lt;p&gt;De value is altijd een ArrayBuffer. Omdat we een ArrayBuffer niet direct kunnen bewerken, gebruiken we in plaats daarvoor een &#39;typed array&#39;. Een typed array is een ArrayBuffer met een bepaald formaat, en in ons geval gebruiken we het &lt;code&gt;Uint8Array&lt;/code&gt; formaat. De reden dat we geen normale array kunnen gebruiken is dat normale arrays ook andere soorten van data en zelfs lege plekken kunnen bevatten. Een &#39;typed array&#39; bestaat maar uit één type en is altijd aansluitend. Het formaat &lt;code&gt;Uint8Array&lt;/code&gt; betekent dat de array unsigned is en dus geen negatieve getallen kan bevatten; alleen hele getallen kan bevatten; en tevens 8 bits is en dus alleen de waarden 0 tot 255 kan bevatten. Met andere woorden: een array van bytes.&lt;/p&gt;
  7454. &lt;pre&gt;&lt;code&gt;characteristic.writeValue(
  7455.    new Uint8Array([ 0, r, g, b  ])
  7456. );
  7457. &lt;/code&gt;&lt;/pre&gt;
  7458. &lt;p&gt;We weten al hoe deze specifieke lamp werkt. We hebben vier bytes nodig, één voor elke LED. Elke byte heeft een waarde van 0 tot 255 en in dit geval willen we alleen rood, groen en blauw gebruiken. We laten de LED voor wit uit, door de waarde 0 te gebruiken.&lt;/p&gt;
  7459. &lt;h2&gt;Lezen van de value&lt;/h2&gt;
  7460. &lt;p&gt;Als we de huidige kleur van de lamp willen weten, dan kunnen we de readValue() function aanroepen en await gebruiken om het resultaat af te wachten.&lt;/p&gt;
  7461. &lt;pre&gt;&lt;code&gt;let value = await characteristic.readValue();
  7462.  
  7463. let r = value.getUint8(1);
  7464. let g = value.getUint8(2);
  7465. let b = value.getUint8(3);
  7466. &lt;/code&gt;&lt;/pre&gt;
  7467. &lt;p&gt;De value die we terugkrijgen is altijd een DataView van een ArrayBuffer en biedt een aantal functions om data uit de arraybuffer te halen. In ons geval zijn we weer geïntereseerd in de individuele bytes. We gebruiken de getUint8() function met de index van de byte in de array die we willen ophalen als parameter.&lt;/p&gt;
  7468. &lt;h2&gt;Notificaties wanneer de value verandert&lt;/h2&gt;
  7469. &lt;p&gt;Als de value van de characteristic op het apparaat verandert, dan is het makkelijk dat de app hiervan op de hoogte wordt gehouden. Niet echt nuttig voor een lamp, maar voor een hartslagmonitor is het onmisbaar. We willen niet elke seconde opnieuw handmatig de huidige waarde ophalen.&lt;/p&gt;
  7470. &lt;pre&gt;&lt;code&gt;characteristic.addEventListener(
  7471.    &#39;characteristicvaluechanged&#39;, e =&amp;gt; {
  7472.        let r = e.target.value.getUint8(1);
  7473.        let g = e.target.value.getUint8(2);
  7474.        let b = e.target.value.getUint8(3);
  7475.    }
  7476. );
  7477.  
  7478. characteristic.startNotifications();
  7479. &lt;/code&gt;&lt;/pre&gt;
  7480. &lt;p&gt;Om een callback te krijgen wanneer de value verandert moeten we de function addEventListener() aanroepen met de parameter &#39;characteristicvaluechanged&#39; en een callback function.&lt;/p&gt;
  7481. &lt;p&gt;Zodra de value verandert wordt de callback function aanroepen met een event object als parameter. De value is een property van de target property van het event en weer een DataView van een ArrayBuffer. Daarna kunnen we de individuele bytes opnieuw uit de ArrayBuffer halen door middel van de getUint8() function.&lt;/p&gt;
  7482. &lt;p&gt;De bandbreedte van het Bluetooth-netwerk is beperkt, daarom moeten we handmatig de notificaties starten door startNotifications() aan te roepen op de characteristic. Zou dit standaard aan staan, dan zou het netwerk overspoeld worden door onnodige data. En bovendien, deze apparaten gebruiken vaak batterijen en elke byte die we niet hoeven te versturen zal het leven van de batterij verlengen, omdat de interne radio van het apparaat niet zo vaak gebruikt hoeft te worden.&lt;/p&gt;
  7483. &lt;p&gt;En dit is ongeveer 90% van de WebBluetooth API en alles wat je moet weten om te beginnen. Door een paar functions aan te roepen en 4 bytes aan te passen kunnen we een web app maken die de kleuren van je lampen kan aanpassen. Een paar regels meer en je kunt een speelgoedauto besturen of zelfs een drone laten vliegen. En met steeds meer Bluetooth-apparaten op de markt zijn de mogelijkheden eindeloos.&lt;iframe src=&quot;https://player.vimeo.com/video/?texttrack=en&quot; width=&quot;640&quot; height=&quot;360&quot; frameborder=&quot;0&quot; allow=&quot;autoplay; fullscreen; picture-in-picture&quot; allowfullscreen=&quot;&quot;&gt;&lt;/iframe&gt;## Meer informatie:&lt;/p&gt;
  7484. &lt;ul&gt;
  7485. &lt;li&gt;&lt;a href=&quot;https://webbluetoothcg.github.io/web-bluetooth/&quot;&gt;De WebBluetooth specification&lt;/a&gt;&lt;/li&gt;
  7486. &lt;li&gt;&lt;a href=&quot;https://bluetooth.rocks/&quot;&gt;WebBluetooth demos op Bluetooth.rocks&lt;/a&gt;&lt;/li&gt;
  7487. &lt;li&gt;&lt;a href=&quot;https://github.com/BluetoothRocks&quot;&gt;Source code van de demos&lt;/a&gt;&lt;/li&gt;
  7488. &lt;li&gt;&lt;a href=&quot;https://github.com/opengatt/registry&quot;&gt;GATT registry met documentatie voor een aantal apparaten&lt;/a&gt;&lt;/li&gt;
  7489. &lt;/ul&gt;
  7490. &lt;h2&gt;Over Niels Leenheer&lt;/h2&gt;
  7491. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/niels.jpg&quot; alt=&quot;Foto van Niels Leenheer&quot; class=&quot;floating-portrait&quot; /&gt;
  7492. Niels is een browser-geek. Vanaf het moment dat iemand hem de allereerste Nexus browser op een NeXT Cube liet zien is hij bezig met browsers. Niels is de maker van HTML5test.com, de CSS selector test, spreekt op conferenties en zit sinds 2018 in de congrescommissie van Fronteers.
  7493. &lt;p&gt;Donatie: KWF Kankerbestrijding&lt;/p&gt;
  7494. </content>
  7495.  </entry>
  7496.  <entry>
  7497.    <title>Hoe een blinde klant zich heel even miljonair waande</title>
  7498.    <link href="https://www.fronteers.nl/nl/blog/2018/12/hoe-een-blinde-klant-zich-heel-even-miljonair-waande"/>
  7499.    <updated>2018-12-14T00:00:00Z</updated>
  7500.    <id>https://www.fronteers.nl/nl/blog/2018/12/hoe-een-blinde-klant-zich-heel-even-miljonair-waande</id>
  7501.    <content xml:lang="nl" type="html">&lt;p&gt;Tijdens een screenreader demo zorgt het wel eens voor verwarring (of hilariteit) als een Engelse afkorting met een sappig Vlaams accent wordt opgelezen, of wanneer een screenreader iets onverstaanbaars uitkraamt. In uitzonderlijke gevallen leest een screenreader ook iets voor wat er helemaal niet lijkt te staan. &lt;em&gt;Weird&lt;/em&gt;!&lt;/p&gt;
  7502. &lt;p&gt;Front-endontwikkelaars die hun werk testen met een screenreader — dat is een prima gewoonte — komen hierdoor wel eens in de verleiding om &#39;ter verduidelijking&#39; verborgen stukjes tekst toe te voegen, of te vervangen door iets anders (bijvoorbeeld met behulp van een &lt;code&gt;aria-label&lt;/code&gt;).&lt;/p&gt;
  7503. &lt;p&gt;Is dat nou echt nodig? Of maakt het je webinhoud juist minder toegankelijk? Dat onderzoek ik voor je in dit artikel.&lt;/p&gt;
  7504. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/euros-full.jpg&quot; alt=&quot;Collage: stapel eurobiljetten en icoon van een luidspreker&quot; /&gt;&lt;/p&gt;
  7505. &lt;h2&gt;What the FAQ?&lt;/h2&gt;
  7506. &lt;p&gt;Wat volgt, is een eerder extreem voorbeeld, maar het zet de toon. Een tijd geleden stootte ik op deze vraag in een discussiegroep:&lt;/p&gt;
  7507. &lt;p&gt;&amp;quot;Help! Jaws (een populaire screenreader) leest de link &#39;FAQ&#39; in onze navigatie voor als &lt;em&gt;f*ck&lt;/em&gt;. Dat wil ik niet. Hoe los ik dat op?&amp;quot;&lt;/p&gt;
  7508. &lt;p&gt;Behulpzame mensen suggereerden vervolgens vanalles, gaande van het toevoegen van een &lt;code&gt;&amp;lt;abbr title=&amp;quot;Veelgestelde vragen&amp;quot;&amp;gt;&lt;/code&gt; tot het vervangen van het woord &lt;em&gt;FAQ&lt;/em&gt; door &lt;em&gt;F.A.Q.&lt;/em&gt; (waardoor de letters afzonderlijk worden uitgesproken). Het slechtste advies was wellicht om het woord FAQ met behulp van een &lt;code&gt;aria-label&lt;/code&gt; te vervangen door het fonetische &lt;em&gt;F E Cue&lt;/em&gt; (omdat dat met een Nederlandse stem dan net zo klinkt als FAQ in het Engels).&lt;/p&gt;
  7509. &lt;p&gt;De tipgevers leken ervan uit te gaan dat iedere screenreader &lt;em&gt;dezelfde&lt;/em&gt; text-to-speech (TTS) engine gebruikt (met dezelfde uitspraakregels) en dat TTS de &lt;em&gt;enige&lt;/em&gt; manier is waarop blinde gebruikers tekst en webinhoud consumeren.&lt;/p&gt;
  7510. &lt;p&gt;Wat ze ook over het hoofd zagen, is dat &lt;em&gt;F E Cue&lt;/em&gt; in (refreshable) braille vast nog meer wenkbrauwen doet fronsen dan wanneer FAQ als &lt;em&gt;F*ck&lt;/em&gt; wordt uitgesproken. De meeste blinden gebruiken TTS en braille immers naast (en door) elkaar, bijvoorbeeld voor het invullen van formulieren en het verbeteren van teksten (een dt-fout kan je immers niet horen).&lt;/p&gt;
  7511. &lt;h2&gt;Wat is dan de juiste aanpak?&lt;/h2&gt;
  7512. &lt;p&gt;Een goede raad is om je niet al te druk te maken om zo&#39;n &lt;em&gt;slip of the (synthetic) tongue&lt;/em&gt;. Ik zou hoogstens adviseren het woordje FAQ te voorzien van een &lt;code&gt;lang=&amp;quot;en&amp;quot;&lt;/code&gt; attribuut. Hierdoor zal een screenreader in de meeste gevallen tijdelijk omschakelen naar een Engelstalige TTS engine voor het oplezen van dat ene woordje. Dat zou je overigens ook kunnen doen wanneer je een Engelse uitdrukking gebruikt, zoals &lt;em&gt;a slip of the tongue&lt;/em&gt; dus.&lt;/p&gt;
  7513. &lt;p&gt;In theorie zou je er ook met CSS voor kunnen zorgen dat een string uitgespeld wordt, bijvoorbeeld door een eenvoudige helper class te gebruiken:&lt;/p&gt;
  7514. &lt;pre&gt;&lt;code&gt;.speak-literal {
  7515.    speak: literal-punctuation;
  7516. }
  7517. &lt;/code&gt;&lt;/pre&gt;
  7518. &lt;p&gt;Helaas werkt dat dan weer enkel op iOS, dus ook daar kan je niet op vertrouwen.&lt;/p&gt;
  7519. &lt;p&gt;Maar, omdat je aandringt: hier zijn drie verschillende manieren waarop FAQ kan weerklinken door de speakers van je gebruiker:&lt;/p&gt;
  7520. &lt;ul&gt;
  7521. &lt;li&gt;FAQ wordt netjes (als een letterwoord) gespeld door &lt;em&gt;Alex&lt;/em&gt; (een Amerikaanse mannenstem die standaard bij macOS zit).&lt;/li&gt;
  7522. &lt;li&gt;FAQ wordt (voluit) opgelezen als &#39;Frequently Asked Questions&#39; door &lt;em&gt;Nora&lt;/em&gt; of &lt;em&gt;Samantha&lt;/em&gt; (populaire stemmen in VoiceOver op iOS).&lt;/li&gt;
  7523. &lt;li&gt;FAQ klinkt &lt;em&gt;inderdaad&lt;/em&gt; als &lt;em&gt;F*ck&lt;/em&gt; uit de (synthetische) mond van de meeste Nederlandse stemmen van fabrikant Nuance, die bijvoorbeeld populair zijn bij Windows-gebruikers.&lt;/li&gt;
  7524. &lt;/ul&gt;
  7525. &lt;h2&gt;Let it go&lt;/h2&gt;
  7526. &lt;p&gt;Je kunt nooit met zekerheid weten welke synthetische stem je gebruiker verkiest of geïnstalleerd heeft, laat staan hoe geavanceerd de &lt;em&gt;voice heuristics&lt;/em&gt; zijn die de TTS engine hanteert bij het omzetten van tekst naar kunstmatige spraak. Straks meer over de werking van die heuristics.&lt;/p&gt;
  7527. &lt;p&gt;Je kan bijgevolg helemaal niet voorspellen hoe &lt;em&gt;FAQ&lt;/em&gt; (of een ander woord) zal klinken op het device van jouw gebruiker.&lt;/p&gt;
  7528. &lt;h2&gt;Hoe werkt dat dan?&lt;/h2&gt;
  7529. &lt;p&gt;Windows, macOS, iOS en Android hebben een ingebakken Speech API. Die zorgt ervoor dat software-ontwikkelaars gemakkelijk een stem kunnen geven aan hun applicaties. Ook screenreaders als Jaws en VoiceOver maken gebruik van die functionaliteit.&lt;/p&gt;
  7530. &lt;p&gt;Zo&#39;n Speech API werkt maar in één richting: de screenreader stuurt strings (woorden of lappen tekst) naar de Speech API en geeft hierbij hoogstens aan met &lt;em&gt;welke stem&lt;/em&gt; (en dus ook in welke taal) en met &lt;em&gt;welke spreeksnelheid of toonhoogte&lt;/em&gt; die fragmenten voorgelezen moeten worden. Dat doet zo&#39;n kunstmatige stem vervolgens plichtsgetrouw, zonder zich bewust te zijn van de context.&lt;/p&gt;
  7531. &lt;p&gt;(Die stukjes tekst haalt de screenreader overigens eerst — via een Platform API — op uit de &lt;em&gt;accessibility tree&lt;/em&gt; van je browser, maar dat is een verhaal voor een andere keer.)&lt;/p&gt;
  7532. &lt;h2&gt;Stephen Hawking on steroids?&lt;/h2&gt;
  7533. &lt;p&gt;Kunstmatige stemmen (in alle mogelijke talen) worden tegenwoordig gewoon meegeleverd met het OS. Voor Windows, macOS en Android zijn bovendien diverse &lt;em&gt;third party&lt;/em&gt; stemmen te koop die ontwikkelaars via dezelfde API’s kunnen aanspreken. Sommige van die stemmen klinken tegenwoordig verbazend natuurgetrouw (&lt;a href=&quot;https://deepmind.com/blog/wavenet-generative-model-raw-audio/&quot;&gt;Google Wavenet&lt;/a&gt;, anyone?), maar dat is niet per se wat een screenreadergebruiker wil.&lt;/p&gt;
  7534. &lt;p&gt;Screenreadergebruikers bepalen helemaal &lt;em&gt;zelf&lt;/em&gt; welke stemmen hen het meeste comfort bieden. De meeste gebruikers verkiezen hierbij efficiëntie boven &#39;menselijkheid&#39;.&lt;/p&gt;
  7535. &lt;p&gt;Een vriend van me is blind. Hij zweert bij een (stokoude) robotische stem met een erg hoge spreeksnelheid (Stephen Hawking on steroids, zeg maar). Voor een ongetraind oor klinkt dat als een onverstaanbaar geratel, maar voor hem is het een uiterst effectieve manier om snel informatie te &#39;op te nemen&#39;. Het gaat immers veel sneller dan braille lezen, en misschien zelfs sneller dan &#39;gewoon&#39; lezen (met je ogen dus).&lt;/p&gt;
  7536. &lt;h2&gt;Voice Heuristics&lt;/h2&gt;
  7537. &lt;p&gt;TTS engines zitten vol met regeltjes of &#39;heuristics&#39;. Die zijn bedoeld om de stem zo natuurlijk mogelijk te doen klinken, en zijn verschillend naargelang de stem, de taal, de fabrikant en de versie van de stem (yes, ook stemmen krijgen wel eens een update).&lt;/p&gt;
  7538. &lt;p&gt;Als een TTS engine té slim wordt, loopt het wel eens mis. Straks meer, maar eerst: speeltijd.&lt;/p&gt;
  7539. &lt;h2&gt;Tem die stem!&lt;/h2&gt;
  7540. &lt;p&gt;Om een idee te krijgen hoe die &#39;regeltjes&#39; werken, is het leuk om zelf wat te experimenteren met hoe verschillende strings voorgelezen worden met verschillende stemmen.&lt;/p&gt;
  7541. &lt;p&gt;Op macOS kan je in een Terminal-venster het &lt;code&gt;say&lt;/code&gt; commando uitvoeren. Met &lt;code&gt;-v&lt;/code&gt; kies je de stem. Ga naar &lt;em&gt;Systeemvoorkeuren → Spraak&lt;/em&gt; om te zien welke stemmen beschikbaar zijn op jouw computer (of tik &lt;code&gt;say -v ?&lt;/code&gt; in de Terminal).&lt;/p&gt;
  7542. &lt;h2&gt;Enkele leuke voorbeelden:&lt;/h2&gt;
  7543. &lt;pre&gt;&lt;code&gt;say &amp;quot;Lodewijk IV&amp;quot; -v Xander # klinkt als &amp;quot;Lodewijk Vier&amp;quot;
  7544. say &amp;quot;Louis IV&amp;quot; -v Alex # klinkt als &amp;quot;Louis The Fourth&amp;quot;
  7545. &lt;/code&gt;&lt;/pre&gt;
  7546. &lt;h2&gt;Hé, wat is ie slim! Of toch niet?&lt;/h2&gt;
  7547. &lt;pre&gt;&lt;code&gt;say &amp;quot;:-)&amp;quot; -v Alex # klinkt als &amp;quot;&amp;quot; (stilte)
  7548. say &amp;quot;:-)&amp;quot; -v Ellen # klinkt als &amp;quot;Blije smiley&amp;quot;
  7549. say &amp;quot;(*)&amp;quot; -v Alex # klinkt als &amp;quot;Asterisk&amp;quot;
  7550. say &amp;quot;(*)&amp;quot; -v Ellen # klinkt als &amp;quot;&amp;quot; (stilte)
  7551. &lt;/code&gt;&lt;/pre&gt;
  7552. &lt;p&gt;Je leest (hoort) het goed: de Vlaamse stem Ellen negeert deze drie opeenvolgende karakters (haakje open, asterisk, sluitend haakje) gek genoeg helemaal. Best lastig wanneer je wilt aangeven wanneer iets verplicht in te vullen is. Hier zou een &lt;code&gt;aria-label=&amp;quot;Verplicht&amp;quot;&lt;/code&gt; bijvoorbeeld uitkomst kunnen bieden.&lt;/p&gt;
  7553. &lt;h2&gt;Maar, wat denk je van deze?&lt;/h2&gt;
  7554. &lt;pre&gt;&lt;code&gt;say &amp;quot;1/12/2018&amp;quot; -v Xander # klinkt als &amp;quot;1 december 2018&amp;quot;
  7555. say &amp;quot;1/12/2018&amp;quot; -v Alex # klinkt als &amp;quot;January 12, 2018&amp;quot;
  7556. &lt;/code&gt;&lt;/pre&gt;
  7557. &lt;p&gt;Wacht, wat? Dit zijn toch precies dezelfde strings? Probeert de TTS Engine ons te slim af te zijn?&lt;/p&gt;
  7558. &lt;p&gt;Xander is een Nederlandse stem, Alex een Amerikaanse. Als je een Amerikaan van vlees en bloed zou vragen om &amp;quot;1/12/2018&amp;quot; voor te lezen, zou hij het net zo interpreteren (en voorlezen) als Alex. Als 12 januari dus. Slim toch, van die computerstem?&lt;/p&gt;
  7559. &lt;p&gt;En toch zie je dat developers in meertalige applicaties helemaal overboord gaan met dynamisch gegenereerde &lt;code&gt;aria-label&lt;/code&gt;&#39;s om ervoor te zorgen dat datums, prijzen, tijdstippen etc. &#39;juist&#39; opgelezen worden. Helemaal niet nodig, en een vorm van over-engineering waarmee ze het zich enkel lastig maken.&lt;/p&gt;
  7560. &lt;p&gt;Als je hierop let, gaat het vanzelf goed:&lt;/p&gt;
  7561. &lt;ul&gt;
  7562. &lt;li&gt;Zorg ervoor dat je de (natuurlijke) taal goed aangeeft (bv. met een &lt;code&gt;lang&lt;/code&gt; attribuut op het &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element) zodat de screenreader een TTS engine aanspreekt die de juiste taal spreekt.&lt;/li&gt;
  7563. &lt;li&gt;Respecteer simpelweg lokale regels over de notatie van datums: als je applicatie in het Nederlands wordt weergegeven, gebruik je &lt;code&gt;dd/mm/jjjj&lt;/code&gt;. In het Engels wordt dat &lt;code&gt;mm/dd/yyyy&lt;/code&gt;. Dan gaat het vanzelf goed.&lt;/li&gt;
  7564. &lt;/ul&gt;
  7565. &lt;h2&gt;Hoe een blinde klant zich heel even miljonair waande&lt;/h2&gt;
  7566. &lt;p&gt;Ik sluit af met een &lt;em&gt;true story&lt;/em&gt;. Deze (sterk vereenvoudigde) markup oogt onschuldig, zeg nu zelf. (Ik heb het stukje HTML geplukt uit de webapplicatie van een bank.)&lt;/p&gt;
  7567. &lt;pre&gt;&lt;code&gt;&amp;lt;h1&amp;gt;Transacties&amp;lt;/h1&amp;gt;
  7568. &amp;lt;ul&amp;gt;
  7569.  &amp;lt;li&amp;gt;
  7570.    &amp;lt;span class=&amp;quot;date&amp;quot;&amp;gt;1/12/2018&amp;lt;/span&amp;gt;
  7571.    &amp;lt;span class=&amp;quot;amount&amp;quot;&amp;gt;€ 50&amp;lt;/span&amp;gt;
  7572.    &amp;lt;span class=&amp;quot;from&amp;quot;&amp;gt;R. Van Gils&amp;lt;/span&amp;gt;
  7573.  &amp;lt;/li&amp;gt;
  7574.  &amp;lt;li&amp;gt;
  7575.    &amp;lt;span class=&amp;quot;date&amp;quot;&amp;gt;31/11/2018&amp;lt;/span&amp;gt;
  7576.    &amp;lt;span class=&amp;quot;amount&amp;quot;&amp;gt;€ 25&amp;lt;/span&amp;gt;
  7577.    &amp;lt;span class=&amp;quot;from&amp;quot;&amp;gt;M. Rutte&amp;lt;/span&amp;gt;
  7578.  &amp;lt;/li&amp;gt;
  7579. &amp;lt;/ul&amp;gt;
  7580. &lt;/code&gt;&lt;/pre&gt;
  7581. &lt;p&gt;Je weet natuurlijk dat &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;&#39;s &lt;em&gt;inline level&lt;/em&gt; HTML-elementen zonder semantische eigenschappen zijn. Daarom worden het bedrag en de naam in de accessibility tree &#39;versmolten&#39; tot de strings &lt;code&gt;€ 50 R. Van Gils&lt;/code&gt; en &lt;code&gt;€ 25 M. Rutte&lt;/code&gt;. Dat gebeurt overigens ook wanneer de &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;&#39;s met &lt;code&gt;display: flex&lt;/code&gt; of &lt;code&gt;display: block&lt;/code&gt; worden uitgelijnd (of anderszins opgesmukt), want daar heeft een screenreader lak aan.&lt;/p&gt;
  7582. &lt;p&gt;De TTS engine zal opnieuw zijn (of haar) beste beentje voorzetten om de aangeleverde strings zo menselijk mogelijk voor te lezen. Dat is immers haar (of zijn) enige taak.&lt;/p&gt;
  7583. &lt;p&gt;Voor bovenstaand voorbeeld klinkt dat (alweer afhankelijk van de gebruikte TTS engine) ongeveer zo:&lt;/p&gt;
  7584. &lt;ul&gt;
  7585. &lt;li&gt;Kopniveau 1: Transacties&lt;/li&gt;
  7586. &lt;li&gt;Lijst met 2 items&lt;/li&gt;
  7587. &lt;li&gt;&lt;em&gt;Vijftig euro R. Van Gils&lt;/em&gt;&lt;/li&gt;
  7588. &lt;li&gt;&lt;em&gt;Vijfentwintig miljoen euro Rutte&lt;/em&gt;&lt;/li&gt;
  7589. &lt;li&gt;Einde van lijst&lt;/li&gt;
  7590. &lt;/ul&gt;
  7591. &lt;p&gt;Wat? 🙆‍♀️ Vijfentwintig miljoen? Dat klopt natuurlijk niet. De helpdesk van deze bank reageerde met ongeloof toen een blinde klant dit probleem meldde, en ook de testers wisten er in eerste instantie geen raad mee.&lt;/p&gt;
  7592. &lt;p&gt;Maar, je begrijpt intussen waar het aan ligt: een gebrek aan semantiek in combinatie met &#39;slimme&#39; voice heuristics. De voorletter &#39;M.&#39; zorgt er namelijk voor dat de string &lt;code&gt;€ 25 M. Rutte&lt;/code&gt; geïnterpreteerd (en opgelezen) wordt als &lt;em&gt;Vijfentwintig miljoen euro Rutte&lt;/em&gt;.&lt;/p&gt;
  7593. &lt;p&gt;Is het een edge case? Tja, wel eentje die zich voordoet bij alle mensen die M. als voorletter hebben in hun naam. Is het makkelijk te voorkomen? Zeker! Je hoeft dit niet te patchen met &lt;code&gt;aria-label&lt;/code&gt;&#39;s. Je lost het simpelweg op door headings, paragrafen en lijsten te gebruiken in plaats van &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt;&#39;s. Of wat had je gedacht?&lt;/p&gt;
  7594. &lt;h2&gt;Conclusie&lt;/h2&gt;
  7595. &lt;p&gt;Je zal het altijd zien: als je paginasemantiek fout zit (of ontbreekt), gaat de accessibility van je website ook de mist in. Niet enkel omdat het dan lastig navigeren wordt voor screenreadergebruikers, maar dus ook omdat TTS Engines de plank dan vaker misslaan.&lt;/p&gt;
  7596. &lt;p&gt;Dat neemt niet weg dat het altijd de moeite loont om je website te testen met een &lt;em&gt;echte&lt;/em&gt; screenreader. Zo kan je gênante situaties voorkomen.&lt;/p&gt;
  7597. &lt;p&gt;En, oh ja: maak je niet al te druk over iedere synthetische &lt;em&gt;slip of the tongue&lt;/em&gt;, want dat doen jouw gebruikers ook niet.&lt;/p&gt;
  7598. &lt;h2&gt;Over Roel van Gils&lt;/h2&gt;
  7599. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/roel.jpg&quot; alt=&quot;Foto van Roel van Gils&quot; class=&quot;floating-portrait&quot; /&gt;
  7600. Roel noemt zichzelf een Digital Accessibility Nerd. Met zijn bedrijf Eleven Ways (gevestigd in Gent) helpt hij overheden en bedrijven die hun websites en apps voor zoveel mogelijk mensen toegankelijk willen maken. Roel steekt ook wel eens een handje toe bij het organiseren van Fronteers-bijeenkomsten in Vlaanderen. Hij twittert als [@roelvangils](https://twitter.com/roelvangils).
  7601. &lt;p&gt;Donatie: Belgisch Centrum voor Geleidehonden
  7602. In mijn omgeving heb ik zelf gezien hoe een geleidehond het leven van iemand die slechtziend of blind is helemaal kan veranderen. Ik ken jammer genoeg ook mensen die al jaren uitkijken naar een eigen geleidehond–of een opvolger voor een hond die te oud was geworden. Het opleiden van een hond is enorm tijdsintensief en daardoor is de wachtlijst lang. Ik steun het Belgisch Centrum voor Geleidehonden, een vzw die sinds 1990 alles in het werkt stelt om honden op te leiden en ze daarna kosteloos ter beschikking stelt aan wie ze echt nodig heeft.&lt;/p&gt;
  7603. </content>
  7604.  </entry>
  7605.  <entry>
  7606.    <title>CSS statistieken om je codebase te verbeteren</title>
  7607.    <link href="https://www.fronteers.nl/nl/blog/2018/12/css-statistieken-om-je-codebase-te-verbeteren"/>
  7608.    <updated>2018-12-13T00:00:00Z</updated>
  7609.    <id>https://www.fronteers.nl/nl/blog/2018/12/css-statistieken-om-je-codebase-te-verbeteren</id>
  7610.    <content xml:lang="nl" type="html">&lt;p&gt;Front-end is makkelijk, CSS helemaal. Toch valt het veel developers niet mee om complexiteit de baas te blijven bij groeiende CSS codebases. Zeker wanneer met meerdere personen en teams aan een project gewerkt wordt, is het lastig om bij te houden en te controleren of iedereen zich nog wel aan de afspraken houdt. Het klassieke voorbeeld is de monoliet van duizenden regels code die &lt;a href=&quot;https://www.projectwallace.com/printdeal/drukzo/colors&quot;&gt;meer dan 50 tinten grijs&lt;/a&gt; bevat of &lt;a href=&quot;https://www.projectwallace.com/teamwallace/smashing-magazine/fontsizes&quot;&gt;ruim 100 unieke font-sizes&lt;/a&gt;. Gelukkig zijn er tools voorhanden die je inzicht kunnen geven in de CSS die jouw applicatie uitspuugt. Deze tools analyseren je CSS en genereren een rapport met bijvoorbeeld de filesize, het aantal selectors, de unieke kleuren en ga zo maar door. Tijdens &lt;a href=&quot;https://codepen.io/bartveneman/pen/OPMevb&quot;&gt;een presentatie&lt;/a&gt; die ik hierover een aantal jaar geleden gaf, bleek de interesse voor CSS statistiek-tools groot, dus hieronder wat tips om CSS statistieken in te zetten om de kwaliteit van je codebase inzichtelijk te maken en te verbeteren.&lt;/p&gt;
  7611. &lt;h2&gt;De tools&lt;/h2&gt;
  7612. &lt;p&gt;Allereerst, de tools. Zelf gebruik ik de volgende tools om statistieken over mijn CSS te laten genereren:&lt;/p&gt;
  7613. &lt;ul&gt;
  7614. &lt;li&gt;&lt;a href=&quot;https://cssstats.com/&quot;&gt;CSS Stats&lt;/a&gt; - Webapp en CLI tool om verschillende statistieken over je CSS te visualiseren&lt;/li&gt;
  7615. &lt;li&gt;&lt;a href=&quot;https://github.com/katiefenn/parker&quot;&gt;Parker&lt;/a&gt; - CLI tool/node module voor CSS statistieken&lt;/li&gt;
  7616. &lt;li&gt;&lt;a href=&quot;https://github.com/bartveneman/wallace-cli&quot;&gt;Project Wallace CSS Analyzer&lt;/a&gt; - CLI tool voor CSS statistieken. &lt;a href=&quot;https://www.projectwallace.com/&quot;&gt;Op de website&lt;/a&gt; kan ik bijhouden hoe de statistieken veranderen naarmate de tijd verstrijkt.&lt;/li&gt;
  7617. &lt;/ul&gt;
  7618. &lt;p&gt;De ene tool is niet per definitie beter dan de andere. Het is maar wat je er mee wilt bereiken. Voor dit artikel kijken we voornamelijk naar het meten van complexiteit en kwaliteit.&lt;/p&gt;
  7619. &lt;h2&gt;Complexiteit meten&lt;/h2&gt;
  7620. &lt;p&gt;‘Echte’ developers hebben het al heel lang, maar wij CSS-nerds zijn nog een beetje verstoken van tooling zoals het meten van bijvoorbeeld &lt;em&gt;&lt;a href=&quot;https://en.wikipedia.org/wiki/Cyclomatic_complexity&quot;&gt;cyclomatic complexity&lt;/a&gt;&lt;/em&gt;. Gelukkig kunnen we met wat statistieken wel vergelijkbare metrics opstellen. Enkele belangrijke metrics die ik zelf toepas om de complexiteit van een codebase te bepalen zijn:&lt;/p&gt;
  7621. &lt;ul&gt;
  7622. &lt;li&gt;&lt;em&gt;Gemiddeld aantal identifiers per selector:&lt;/em&gt; Lange selectors betekenen dat je CSS nauw verbonden is aan de HTML. Dat betekent dat je styling stuk kan gaan als een kleine wijziging wordt gedaan in je template. Eigenlijk is elke identifier in je selector een if-statement en daarom is deze metric voor mij min of meer gelijk aan het meten van &lt;em&gt;cyclomatic complexity&lt;/em&gt;.&lt;/li&gt;
  7623. &lt;/ul&gt;
  7624. &lt;pre&gt;&lt;code&gt;.my-selector {} /* 1 identifier */
  7625. .my #super [complex^=&amp;quot;selector&amp;quot;] &amp;gt; with ~ many :identifiers {} /* 6 identifiers */
  7626. &lt;/code&gt;&lt;/pre&gt;
  7627. &lt;ul&gt;
  7628. &lt;li&gt;&lt;em&gt;Average cohesion:&lt;/em&gt; Het gemiddeld aantal declarations per ruleset. Een laag gemiddelde is een indicatie van complexe ‘objecten’.&lt;/li&gt;
  7629. &lt;/ul&gt;
  7630. &lt;pre&gt;&lt;code&gt;/* 1 rule, 1 declaration =&amp;gt; cohesion = 1 */
  7631. .text-center {
  7632.    text-align: center;
  7633. }
  7634.  
  7635. /* 1 rule, 8 declarations =&amp;gt; cohesion = (1 / 8) = 0.125 */
  7636. .button {
  7637.    background-color: blue;
  7638.    color: white;
  7639.    padding: 1em;
  7640.    border: 1px solid;
  7641.    display: inline-block;
  7642.    font-size: normal;
  7643.    font-weight: bold;
  7644.    text-decoration: none;
  7645. }
  7646. &lt;/code&gt;&lt;/pre&gt;
  7647. &lt;ul&gt;
  7648. &lt;li&gt;&lt;em&gt;Filesize:&lt;/em&gt; Hoe groter je CSS, hoe complexer…&lt;/li&gt;
  7649. &lt;li&gt;&lt;em&gt;Importants:&lt;/em&gt; Hoewel een &lt;code&gt;!important&lt;/code&gt; op zijn tijd zeker niet verkeerd is, kan een hoog aantal !importants duiden op een moeilijk onderhoudbaar stuk CSS.&lt;/li&gt;
  7650. &lt;li&gt;&lt;em&gt;Aantal unieke kleuren/font-families/font-sizes:&lt;/em&gt; Projecten die honderden unieke kleuren en font-sizes gebruiken zijn lastig. Wanneer weet je of je de juiste &lt;code&gt;font-size&lt;/code&gt; of &lt;code&gt;color&lt;/code&gt; hebt? En is de grijs van de header nou de goede, of die van de footer? Ach, ik gebruik de color picker van Photoshop wel weer om een kleurtje uit het design te pikken…&lt;/li&gt;
  7651. &lt;li&gt;&lt;em&gt;Aantal unieke @media queries:&lt;/em&gt; Zoals met elke metric is het lastig te bepalen wat goed is en wat slecht, maar als ik 150 unieke &lt;code&gt;@media&lt;/code&gt; queries zie, dan weet ik dat het lastig gokken wordt om de juiste te gebruiken.&lt;/li&gt;
  7652. &lt;li&gt;&lt;em&gt;Specificity graph:&lt;/em&gt; Het gebruik van de &lt;a href=&quot;https://csswizardry.com/2014/10/the-specificity-graph/&quot;&gt;specificity graph&lt;/a&gt; is handig als je wilt kunnen zien waar complexe selectors zich in je codebase bevinden. Daar zijn gelukkig ook &lt;a href=&quot;https://isellsoap.github.io/specificity-visualizer/&quot;&gt;tools&lt;/a&gt; voor!&lt;/li&gt;
  7653. &lt;/ul&gt;
  7654. &lt;h2&gt;Kwaliteit meten&lt;/h2&gt;
  7655. &lt;p&gt;Wat de term kwaliteit inhoudt verschilt per project (evenals complexiteit overigens), maar voor veel projecten gelden de volgende punten zeker:&lt;/p&gt;
  7656. &lt;ul&gt;
  7657. &lt;li&gt;&lt;em&gt;Branding - aantal unieke kleuren/font-families/font-sizes:&lt;/em&gt; CSS gaat voornamelijk om branding en het mooi maken van webpagina’s. Vormgevers doen hun best op het maken van mockups die wij weer omzetten in code. Daarbij gaat wel eens een detail verloren en kan het gebeuren dat het eindproduct andere kleuren bevat dan de vormgever voor ogen had. Ik heb voor bedrijven gewerkt waar geëist werd dat alle kleuren en fonts voldeden aan de voorgeschreven &lt;em&gt;brand guide&lt;/em&gt;. Gelukkig had ik &lt;a href=&quot;https://github.com/bartveneman/gromit-cli&quot;&gt;tools&lt;/a&gt; om aan te tonen dat alles netjes binnen de kaders was.&lt;/li&gt;
  7658. &lt;li&gt;&lt;em&gt;Methodologie - cohesion, gemiddeld aantal identifiers:&lt;/em&gt; Een opkomende trend in het CSS-landschap is utility-based CSS. Kort gezegd is dat een stylesheet vol classes die een heel klein dingetje doen. Een kenmerk van zo’n library is dan dus ook dat de cohesion heel dicht bij 1 ligt, evenals het gemiddeld aantal identifiers per selector. Goede metrics om aan te tonen dat je niet afwijkt van je gekozen strategie!&lt;/li&gt;
  7659. &lt;/ul&gt;
  7660. &lt;pre&gt;&lt;code&gt;/*
  7661.  Voorbeeld uit Tailwind CSS waar 1 rule
  7662.  1 selector en 1 declaration heeft:
  7663.  https://tailwindcss.com/docs/text-color
  7664. */
  7665. .text-transparent   { color: transparent; }
  7666. .text-black         { color: #22292f; }
  7667.  .text-grey-darkest  { color: #3d4852; }
  7668. &lt;/code&gt;&lt;/pre&gt;
  7669. &lt;h2&gt;Bugs opsporen&lt;/h2&gt;
  7670. &lt;p&gt;Soms kom je onverwachte dingen tegen in je CSS statistieken. Rare selectors of onverwacht complexe declarations. Een greep uit een aantal vondsten die ik de afgelopen tijd in eigen of andermans codebases deed:&lt;/p&gt;
  7671. &lt;ul&gt;
  7672. &lt;li&gt;Fronteers.nl bevat &lt;a href=&quot;https://www.projectwallace.com/bartveneman/fronteers/stylesheet&quot;&gt;20 lege rulesets&lt;/a&gt; 😱&lt;/li&gt;
  7673. &lt;li&gt;Bol.com heeft een wel &lt;a href=&quot;https://www.projectwallace.com/bartveneman/bolcom/selectors&quot;&gt;heel rare selector&lt;/a&gt;: &lt;code&gt;Bulk beeldmerk 22 mei 2017 .flexbanner--billboard .flexbanner__button.c-btn-tertiary--small.mini_details:before&lt;/code&gt;&lt;/li&gt;
  7674. &lt;li&gt;Een project op mijn werk waar een selector als volgt werd getoond als meest complex: &lt;code&gt;input[type=checkbox]:checked+.label input[type=radio]+label:focus:after&lt;/code&gt;. Een gevalletje waar we een foutje hadden gemaakt met nesting in de preprocessor (inputs nesten werkt doorgaans niet zo best). Gelukkig zagen we de fout op tijd dankzij &lt;a href=&quot;https://www.projectwallace.com/adwise/sportdirect/imports/20181001090916777#selectors.identifiers.top&quot;&gt;Project Wallace&lt;/a&gt;.&lt;/li&gt;
  7675. &lt;li&gt;Facebook heeft &lt;a href=&quot;https://www.projectwallace.com/teamwallace/facebookcom/colors#duplicate:%23fff&quot;&gt;vier verschillende manieren&lt;/a&gt; om de kleur wit te beschrijven. Dat is niet noodzakelijk verkeerd, maar het kan een teken zijn van &lt;a href=&quot;https://www.projectwallace.com/blog/detecting-color-aliases/&quot;&gt;een aantal issues&lt;/a&gt; in de codebase, zoals bijvoorbeeld een kapotte CSS minifier.&lt;/li&gt;
  7676. &lt;li&gt;Catawiki had op enig moment meer dan 4095 selectors (&lt;a href=&quot;https://stackoverflow.com/a/9906889&quot;&gt;IE selector limit&lt;/a&gt;, iemand?) en wetende dat zij IE8+ supporten in verband met een breed internationaal publiek, betekende het dat bezoekers met IE9 niet alle CSS voorgeschoteld kregen wat mogelijk tot bugs geleid heeft. Na een melding hebben zij hun stylesheet in tweeën gesplitst en was het euvel voorlopig verholpen.&lt;/li&gt;
  7677. &lt;/ul&gt;
  7678. &lt;h2&gt;Tot slot&lt;/h2&gt;
  7679. &lt;p&gt;Voor alle metrics die deze tools genereren geldt dat er niet noodzakelijk een goed of fout is. Er zijn developers die zweren bij het nesten van selectors met behulp van preprocessors en er zijn developers die dat haten. Zo zijn er ook mensen die fel gekant zijn tegen het gebruik van &lt;code&gt;!important&lt;/code&gt; en mensen die het inzetten om hun utility classes meer kracht bij te zetten. Wat je voorkeur ook is, deze en andere tools kunnen je helpen om de gevolgen van jouw keuzes inzichtelijk te maken voor jezelf, maar hopelijk ook voor anderen. Doe er je voordeel mee.&lt;/p&gt;
  7680. &lt;p&gt;Wil je meer lezen? Hier enkele leestips:&lt;/p&gt;
  7681. &lt;ul&gt;
  7682. &lt;li&gt;&lt;a href=&quot;https://csswizardry.com/2016/06/improving-your-css-with-parker/&quot;&gt;Improving your CSS with Parker&lt;/a&gt;&lt;/li&gt;
  7683. &lt;li&gt;&lt;a href=&quot;https://www.projectwalace.com/blog&quot;&gt;Project Wallace Blog&lt;/a&gt;&lt;/li&gt;
  7684. &lt;li&gt;&lt;a href=&quot;https://webdesign.tutsplus.com/tutorials/understanding-css-stats-how-to-make-the-most-of-the-numbers--cms-22756&quot;&gt;Understanding CSS Stats: How to Make the Most of the Numbers&lt;/a&gt;&lt;/li&gt;
  7685. &lt;/ul&gt;
  7686. &lt;h2&gt;Over Bart Veneman&lt;/h2&gt;
  7687. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/bart.jpeg&quot; alt=&quot;Foto van bart&quot; class=&quot;floating-portrait&quot; /&gt;
  7688. Bart is frontend developer met een sterke voorliefde voor CSS op elke schaal, maar is ook niet vies van een portie backend op zijn tijd. Al zijn vaardigheden bundelt hij in het bouwen van [ProjectWallace.com](http://projectwallace.com/), een platform voor CSS analytics.
  7689. &lt;p&gt;Donatie: KiKa!&lt;/p&gt;
  7690. </content>
  7691.  </entry>
  7692.  <entry>
  7693.    <title>Word een front-end developer</title>
  7694.    <link href="https://www.fronteers.nl/nl/blog/2018/12/word-een-front-end-developer"/>
  7695.    <updated>2018-12-12T00:00:00Z</updated>
  7696.    <id>https://www.fronteers.nl/nl/blog/2018/12/word-een-front-end-developer</id>
  7697.    <content xml:lang="nl" type="html">&lt;p&gt;Begin september 2018 heeft &lt;a href=&quot;https://medium.freecodecamp.org/my-role-as-a-front-end-web-engineer-explained-948d0f1ceac1&quot;&gt;Shaun Michael Stone&lt;/a&gt; zijn ervaringen, mening en advies gedeeld over hoe het is om front-end web engineer te zijn.&lt;/p&gt;
  7698. &lt;p&gt;In dit artikel wil ik mijn ervaringen delen over het begin van een front-end carrière.&lt;/p&gt;
  7699. &lt;h2&gt;Beginnen met leren&lt;/h2&gt;
  7700. &lt;p&gt;Veel front-end developers beginnen door te experimenteren. Het is niet zo moeiijk om daarmee te beginnen. Je hebt alleen een browser en een texteditor nodig. Twee hele goede voorbeelden zijn &lt;a href=&quot;https://code.visualstudio.com/&quot;&gt;Visual Studio Code&lt;/a&gt; en &lt;a href=&quot;https://atom.io/&quot;&gt;Atom&lt;/a&gt; en ze zijn gratis! Daarna wil je HTML en CSS leren. Door in een zoekmachine te zoeken naar “HTML tutorial” en “CSS tutorial” zou je al een heel eind moeten komen. Voor je het door hebt, bouw je een website!&lt;/p&gt;
  7701. &lt;p&gt;Tijdens de experimentele fase zal je vooral het volgende leren:&lt;/p&gt;
  7702. &lt;ul&gt;
  7703. &lt;li&gt;HTML: HyperText Markup Language, de taal om inhoud te organiseren&lt;/li&gt;
  7704. &lt;li&gt;CSS: Cascading StyleSheets, de taal om de inhoud te stijlen&lt;/li&gt;
  7705. &lt;li&gt;JavaScript: een programmeertaal waarmee je complexe features kunt bouwen&lt;/li&gt;
  7706. &lt;li&gt;Basiskennis over browsers en hoe internet werkt&lt;/li&gt;
  7707. &lt;/ul&gt;
  7708. &lt;p&gt;Beginnen met HTML en CSS is makkelijk, maar het goed doen is een ander verhaal en vergt best veel kennis. Ik verwacht niet dat junior developers bekend zijn met alle onderwerpen in het lijstje hieronder, maar er van bewust zijn dat het bestaat en wat je kunt leren, kan je wel een voorsprong geven:&lt;/p&gt;
  7709. &lt;p&gt;HTML&lt;/p&gt;
  7710. &lt;ul&gt;
  7711. &lt;li&gt;​Basis: in staat zijn om functionerende HTML te schrijven&lt;/li&gt;
  7712. &lt;li&gt;​Validiteit: in staat zijn om HTML te schrijven met weinig fouten&lt;/li&gt;
  7713. &lt;li&gt;​Browser compatibiliteit: hoe om te gaan met browser incompatibiliteit&lt;/li&gt;
  7714. &lt;li&gt;​Memorisatie: bekend zijn welke HTML tags bestaan&lt;/li&gt;
  7715. &lt;li&gt;​Semantiek: weten welke HTML tag goed is in welke situatie&lt;/li&gt;
  7716. &lt;li&gt;​Toegankelijkheid: markup optimaliseren voor iedereen, ook mensen met beperkingen&lt;/li&gt;
  7717. &lt;/ul&gt;
  7718. &lt;p&gt;CSS&lt;/p&gt;
  7719. &lt;ul&gt;
  7720. &lt;li&gt;​Basis: in staat zijn om functionerende CSS te schrijven&lt;/li&gt;
  7721. &lt;li&gt;​Validiteit: in staat zijn om CSS te schrijven met weinig fouten&lt;/li&gt;
  7722. &lt;li&gt;​Browser compatibiliteit: hoe om te gaan met browser incompatibiliteit&lt;/li&gt;
  7723. &lt;li&gt;​Responsive ontwerp: weten hoe je een ontwerp optimaliseert voor verschillende apparaten en schermen&lt;/li&gt;
  7724. &lt;li&gt;​Architectuur: weten hoe je dingen moet noemen, verantwoordelijkheden scheidt, bestanden organiseert, en de code onderhoudbaar houdt&lt;/li&gt;
  7725. &lt;li&gt;​Toegankelijkheid: weten wat voor rol stijling bijdraagt aan toegankelijkheid en afweten van beste en slechte praktijken&lt;/li&gt;
  7726. &lt;/ul&gt;
  7727. &lt;p&gt;JavaScript&lt;/p&gt;
  7728. &lt;ul&gt;
  7729. &lt;li&gt;​Basis: in staat zijn om functionerende JS te schrijven&lt;/li&gt;
  7730. &lt;li&gt;​Probleemoplossend vermogen: weten hoe je een probleem aanpakt om een doel te behalen&lt;/li&gt;
  7731. &lt;li&gt;​Debuggen: hoe je bugs vindt, isoleert en oplost&lt;/li&gt;
  7732. &lt;li&gt;​Web platform: wat kennis van de DOM API (HTML hiërarchie tijdens runtime) en wat Web APIs&lt;/li&gt;
  7733. &lt;li&gt;​Principes: scheiden van verantwoordelijkheden, KISS, etc&lt;/li&gt;
  7734. &lt;li&gt;​Onderhoudbaarheid: hoe je de code onderhoudbaar houdt&lt;/li&gt;
  7735. &lt;li&gt;​Wanneer je het moet gebruiken, en wanneer niet&lt;/li&gt;
  7736. &lt;li&gt;​Verschil tussen ECMAScript en JavaScript&lt;/li&gt;
  7737. &lt;/ul&gt;
  7738. &lt;p&gt;Browsers en het internet&lt;/p&gt;
  7739. &lt;ul&gt;
  7740. &lt;li&gt;​HTTP Protocol: hoe browsers inhoud laden&lt;/li&gt;
  7741. &lt;li&gt;​Media encoderingen: weten wanneer je gif, jpg, png, svg, webp, mp3, mp4, etc. moet gebruiken&lt;/li&gt;
  7742. &lt;/ul&gt;
  7743. &lt;p&gt;Bovenstaande lijst lijkt misschien veel, maar maak je geen zorgen. Focus vooral op HTML, CSS en basis JavaScript. De rest volgt vanzelf.&lt;/p&gt;
  7744. &lt;p&gt;Beginnende front-end developers ontdekken snel wat JavaScript is en hoe populair het is. De markt heeft veel vraag naar developers die kunnen programmeren met JavaScript. Sterker nog, er is vaak voorkeur naar mensen die vloeiend JavaScript programmeren dan mensen die vloeiend HTML en CSS schrijven, terwijl slechte HTML en CSS vaak problemen veroorzaken wat betreft toegankelijkheid.&lt;/p&gt;
  7745. &lt;p&gt;Wanneer je de basis leert, leer ook wat JavaScript, maar vergeet niet dat (goede) HTML en CSS essentieel zijn voor websites en webapplicaties.&lt;/p&gt;
  7746. &lt;h2&gt;Jouw eerste baan&lt;/h2&gt;
  7747. &lt;p&gt;Je eerste baan is een gigantische mijlpaal! Het is je allereerste stap in je carrière. Maar hoe bereik je die mijlpaal?&lt;/p&gt;
  7748. &lt;p&gt;Net als met producten is er vraag en aanbod in de banenmarkt die de “prijs” bepaalt. In de banenmarkt is de “prijs” terug te zien in je salaris en extra’s. Momenteel is de markt in ons voordeel: er is veel vraag naar front-end developers, vooral ervaren front-end developers.&lt;/p&gt;
  7749. &lt;p&gt;Ik verwacht dat het aanbod zal stijgen, maar daarmee moet je meer opvallen ten opzichte van andere mensen die een baan zoeken als front-end developer. Er zijn een paar manieren om dat te doen.&lt;/p&gt;
  7750. &lt;h2&gt;Haal een diploma&lt;/h2&gt;
  7751. &lt;p&gt;Ik was heel lui en verveeld op school. Ik denk dat ik met een beetje moeite een bachelor en/of master graad had kunnen behalen, maar dat heb ik niet gedaan. Ondanks dat ik dat niet heb, werk ik met toffe en hele slimme mensen.&lt;/p&gt;
  7752. &lt;p&gt;Momenteel lijkt het er op dat een diploma niet zo veel helpt. Veel mensen die dit wel hebben, hebben vaak wel een goede theoretische achtergrond en lijken problemen op een meer wetenschappelijke methode te benaderen.&lt;/p&gt;
  7753. &lt;p&gt;Wanneer de vraag in de banenmarkt groeit, denk ik dat een opleiding in media of informatica belangrijker gaat worden, vooral voor developers die geen of weinig ervaring hebben.&lt;/p&gt;
  7754. &lt;p&gt;Een studie doen is niet goedkoop en kost veel tijd. Gelukkig zijn er veel bedrijven die de kosten (deels) op hun nemen en soms mag je zelfs tijdens werkuren studeren. Dan kan je studeren en ook je rekeningen betalen! Denk goed na over wat voor opties er zijn en wat het beste bij jou past.&lt;/p&gt;
  7755. &lt;h2&gt;Zelfstandig leren&lt;/h2&gt;
  7756. &lt;p&gt;Front-end development is heel goed gedocumenteerd. Online is er heel veel informatie te vinden, wat het mogelijk maakt om een developer te worden door te lezen of online cursussen te volgen. Veel developers die ik ken hebben het vak volledig zelfstandig gestudeerd.&lt;/p&gt;
  7757. &lt;p&gt;Hier een paar linkjes naar documentatie en cursussen om zelfstandig te studeren:&lt;/p&gt;
  7758. &lt;ul&gt;
  7759. &lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web&quot;&gt;MDN’s Web Technology for Developers&lt;/a&gt;&lt;/li&gt;
  7760. &lt;li&gt;&lt;a href=&quot;https://www.freecodecamp.org/&quot;&gt;freeCodeCamp&lt;/a&gt;&lt;/li&gt;
  7761. &lt;li&gt;&lt;a href=&quot;https://udacity.com/courses/front-end-developer&quot;&gt;Front end developer courses on Udacity&lt;/a&gt;&lt;/li&gt;
  7762. &lt;li&gt;&lt;a href=&quot;https://www.udemy.com/topic/web-development/&quot;&gt;Web development courses on Udemy&lt;/a&gt;&lt;/li&gt;
  7763. &lt;li&gt;&lt;a href=&quot;https://academy.microsoft.com/en-us/professional-program/tracks/front-end-development/&quot;&gt;Microsoft Professional Program for Front-End Web Development&lt;/a&gt;&lt;/li&gt;
  7764. &lt;li&gt;&lt;a href=&quot;https://www.codecademy.com/catalog/language/html-css&quot;&gt;HTML &amp;amp; CSS courses on CodeCademy&lt;/a&gt;&lt;/li&gt;
  7765. &lt;li&gt;&lt;a href=&quot;https://www.codecademy.com/catalog/language/javascript&quot;&gt;JavaScript courses on CodeCademy&lt;/a&gt;&lt;/li&gt;
  7766. &lt;li&gt;&lt;a href=&quot;https://javascript30.com/&quot;&gt;JavaScript30&lt;/a&gt;&lt;/li&gt;
  7767. &lt;li&gt;&lt;a href=&quot;https://es6.io/&quot;&gt;ES6 for Everyone&lt;/a&gt;&lt;/li&gt;
  7768. &lt;/ul&gt;
  7769. &lt;p&gt;Je kunt ook lid worden van een gemeenschap zodat je met anderen kan praten over front-end development. Neem bijvoorbeeld de &lt;a href=&quot;https://fronteers-slack.herokuapp.com/&quot;&gt;Fronteers Slack&lt;/a&gt; of &lt;a href=&quot;http://fedsonslack.com/&quot;&gt;FEDs on Slack&lt;/a&gt;.&lt;/p&gt;
  7770. &lt;h2&gt;Documentatie is belangrijk&lt;/h2&gt;
  7771. &lt;p&gt;Laten zien wat je gemaakt heb is een goede manier om jezelf te verkopen, dus zorg ervoor dat je een portfolio hebt met wat je gemaakt hebt. Documenteer je projecten (ook van school) en side-projects goed.&lt;/p&gt;
  7772. &lt;p&gt;Zorg er ook voor dat je niet alleen het resultaat demonstreert, maar ook het proces daar naartoe. Gedurende een project los je uitdagingen op door opties te overwegen. Het verdedigen van die keuzes geeft veel inzicht in hoe goed jij bent en hoe jij keuzes maakt.&lt;/p&gt;
  7773. &lt;p&gt;Als je schrijven leuk vind, kun je ook artikelen schrijven! Het schrijven van technische artikelen geeft een enorme voorsprong. Sommige bedrijven betalen zelfs om een artikel op hun blog te publiceren, wat mooi meegenomen is.&lt;/p&gt;
  7774. &lt;h2&gt;Wees zichtbaar&lt;/h2&gt;
  7775. &lt;p&gt;Laat jezelf zien! Je bent een front-end developer. Het web is jouw domein. Gebruik dat dus!&lt;/p&gt;
  7776. &lt;ul&gt;
  7777. &lt;li&gt;Je kunt &lt;a href=&quot;https://www.linkedin.com/&quot;&gt;LinkedIn&lt;/a&gt; gebruiken als een soort online CV en om je interesses te delen&lt;/li&gt;
  7778. &lt;li&gt;Publiceer je eigen code (bijvoorbeeld experimenten) op &lt;a href=&quot;https://github.com/&quot;&gt;GitHub&lt;/a&gt;&lt;/li&gt;
  7779. &lt;li&gt;&lt;a href=&quot;https://codepen.io/&quot;&gt;CodePen&lt;/a&gt; is een leuke site om kleine demo’s en experimenten te maken en te laten zien&lt;/li&gt;
  7780. &lt;li&gt;Andere sociale media, zoals Twitter en Facebook, kunnen ook handig zijn om interesses te delen en om te netwerken&lt;/li&gt;
  7781. &lt;li&gt;Een eigen website met een blog en links naar jouw profielen&lt;/li&gt;
  7782. &lt;li&gt;Als je een freelancer wilt worden, denk na over een ‘personal brand’ en hoe je jezelf in de markt wilt zetten&lt;/li&gt;
  7783. &lt;/ul&gt;
  7784. &lt;p&gt;Misschien valt het op dat veel opties in bovenstaande lijst een offer vergt: tijd. Al is geen van bovenstaande punten vereist om een baan te vinden, je springt er wel door uit, dus durf wat tijd te investeren.&lt;/p&gt;
  7785. &lt;h2&gt;Overweeg opties&lt;/h2&gt;
  7786. &lt;p&gt;Wil je generaliseren of specialiseren? In wat voor soort situatie kan je het meest leren? Wat voor soort bedrijf zou jou een kans geven?&lt;/p&gt;
  7787. &lt;p&gt;Denk goed na over hoe je jouw carrière wilt starten. Wil je een ‘manusje-van-alles’ zijn bij een klein bureau, of wil je specialiseren als een in-house developer met collega’s waar je van kunt leren? Misschien wil je jouw eigen ding doen als een freelancer. Wat je ook kiest, elk heeft voor en nadelen, dus denk daar over na.&lt;/p&gt;
  7788. &lt;p&gt;Als je andere interesses hebt buiten development, is het leuk om een baan te vinden in die industrie.&lt;/p&gt;
  7789. &lt;h2&gt;Aan de slag! Wat nu?&lt;/h2&gt;
  7790. &lt;p&gt;Software verandert constant, dus we moeten up-to-date blijven om relevant te blijven. Denk aan principes, tools, browsers, specificaties, browser compatibiliteit, apparaten en features van apparaten. Dat zijn heel veel onderwerpen om in de gaten te houden en dit verklaart ook waarom het vak front-end development langzaam opsplitst in specifiekere specialisaties.&lt;/p&gt;
  7791. &lt;p&gt;Als je naar specificaties en documentatie kijkt, kan alleen al de hoeveelheid browser-functies en Web API&#39;s schrikbarend veel zijn. Gelukkig heb ik een strategie om niet gek te worden van de hoeveelheid nieuwe informatie.&lt;/p&gt;
  7792. &lt;p&gt;Een klein deel van al die API’s wordt vaak gebruikt. In plaats van proberen alle API’s te onthouden, lees ik een klein beetje over elke API zodat ik ongeveer weet wat ik kan doen en vergeet ik de details. API’s die ik vaak gebruik, onthou ik vanzelf. Door deze strategie kan ik mij richten op probleemoplossend denken, best practices, patronen, principes en andere dingen die lastig te vertalen zijn in concrete zoektermen.&lt;/p&gt;
  7793. &lt;p&gt;Om up-to-date te blijven kan ik sociale media aanraden. Ondanks de ruis is het vaak de eerste plek waar nieuws wordt gedeeld. Zoek mensen en bedrijven op die jij interessant vind en volg ze. Hier wat voorbeelden:&lt;/p&gt;
  7794. &lt;ul&gt;
  7795. &lt;li&gt;&lt;a href=&quot;https://www.reddit.com/r/Frontend/&quot;&gt;/r/Frontend&lt;/a&gt;&lt;/li&gt;
  7796. &lt;li&gt;&lt;a href=&quot;https://twitter.com/csswg&quot;&gt;@csswg&lt;/a&gt;&lt;/li&gt;
  7797. &lt;li&gt;&lt;a href=&quot;https://twitter.com/htmlwg&quot;&gt;@htmlwg&lt;/a&gt;&lt;/li&gt;
  7798. &lt;li&gt;&lt;a href=&quot;https://twitter.com/ecmascript&quot;&gt;@ECMAScript&lt;/a&gt;&lt;/li&gt;
  7799. &lt;li&gt;&lt;a href=&quot;https://twitter.com/ChromiumDev&quot;&gt;@ChromiumDev&lt;/a&gt;&lt;/li&gt;
  7800. &lt;li&gt;&lt;a href=&quot;https://twitter.com/ChromeDevTools&quot;&gt;@ChromeDevTools&lt;/a&gt;&lt;/li&gt;
  7801. &lt;li&gt;&lt;a href=&quot;https://twitter.com/FirefoxDevTools&quot;&gt;@FirefoxDevTools&lt;/a&gt;&lt;/li&gt;
  7802. &lt;/ul&gt;
  7803. &lt;p&gt;Lezen en experimenteren met dingen die je leert, zou je tijdens werkuren moeten kunnen doen. Een fatsoenlijk bedrijf zal je die gelegenheid geven en heeft een opleidingsbudget zodat je congressen en workshops kan bezoeken. Maak daar gebruik van! Een paar goede events zijn:&lt;/p&gt;
  7804. &lt;ul&gt;
  7805. &lt;li&gt;&lt;a href=&quot;http://aneventapart.com/&quot;&gt;An Event Apart&lt;/a&gt; (Global)&lt;/li&gt;
  7806. &lt;li&gt;&lt;a href=&quot;https://beyondtellerrand.com/&quot;&gt;Beyond Tellerrand (or btconf)&lt;/a&gt; (Germany)&lt;/li&gt;
  7807. &lt;li&gt;&lt;a href=&quot;http://cssconf.org/&quot;&gt;CSSconf&lt;/a&gt; (Global)&lt;/li&gt;
  7808. &lt;li&gt;&lt;a href=&quot;https://fronteers.nl/congres&quot;&gt;Fronteers Conference&lt;/a&gt; (Netherlands)&lt;/li&gt;
  7809. &lt;li&gt;&lt;a href=&quot;https://fronteers.nl/workshops&quot;&gt;Fronteers Workshops&lt;/a&gt; (Netherlands)&lt;/li&gt;
  7810. &lt;li&gt;&lt;a href=&quot;https://jsconf.com/&quot;&gt;JSConf&lt;/a&gt; (Global)&lt;/li&gt;
  7811. &lt;li&gt;&lt;a href=&quot;https://smashingconf.com/&quot;&gt;SmashingConf&lt;/a&gt; (Global)&lt;/li&gt;
  7812. &lt;/ul&gt;
  7813. &lt;h2&gt;Werken in je vrije tijd&lt;/h2&gt;
  7814. &lt;p&gt;Eerder in dit artikel heb ik het werken in je vrije tijd al kort benoemd om een portfolio op te bouwen. Ik moedig dit aan als je een voorsprong wilt hebben op anderen, maar ik wil je ook waarschuwen.&lt;/p&gt;
  7815. &lt;p&gt;Veel bedrijven erkennen het werk in je vrije tijd niet als extra ervaring. Al zou je, naast een 8-urige werkdag, nog 4 uur investeren in side-projects, heb je na een jaar niet anderhalf jaar ervaring opgebouwd. Maar wat je in die extra tijd hebt geleerd, is natuurlijk wel waardevol.&lt;/p&gt;
  7816. &lt;p&gt;Ons vakgebied reageert erg positief op werken in je vrije tijd, wat veel mensen motiveert om dat te doen, maar niet zonder consequenties. Het kan bijdragen aan problemen met je geestelijke gezondheid. Veel open-source projecten zijn ten einde gekomen of het beheer is naar iemand anders gegaan omdat de originele auteur last heeft van een burn-out.&lt;/p&gt;
  7817. &lt;p&gt;Werken (inclusief studeren en experimenteren) in je vrije tijd is niet zonder risico’s. Rust en ontspanning zijn belangrijk, en de balans tussen werk en privé is delicaat. Sommige mensen kunnen heel veel stress hebben. Sommige niet. Een ‘workaholic’ zijn is niet cool.&lt;/p&gt;
  7818. &lt;p&gt;Ik wil heel duidelijk zijn dat werken in je vrije tijd niet verplicht is en waarschijnlijk ongezond. Jouw werkplek moet de tijd faciliteren om nieuwe dingen te leren. Wat je met je eigen tijd doet, is aan jou.&lt;/p&gt;
  7819. &lt;h2&gt;Conclusie&lt;/h2&gt;
  7820. &lt;p&gt;Er zijn veel manieren om front-end web developer te worden. Je kan het jezelf aanleren of met begeleiding door bijvoorbeeld een opleiding te doen. Je kan een generalist of een specialist worden. Je kan zelfstandig beginnen of een bij een bedrijf gaan werken en nieuwe dingen van collega’s leren.&lt;/p&gt;
  7821. &lt;p&gt;Wat je ook kiest, basiskennis van HTML, CSS en JavaScript is voldoende om aan de slag te gaan. De rest volgt vanzelf.&lt;/p&gt;
  7822. &lt;h2&gt;Over Tim Severien&lt;/h2&gt;
  7823. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/tim-severien.png&quot; alt=&quot;Foto van Tim&quot; class=&quot;floating-portrait&quot; /&gt;
  7824. Tim Severien is een front-end developer uit Nederland. Naast zijn werk blogt hij wel eens op [timseverien.com](https://timseverien.com/) en uit hij zijn creativiteit op [codepen.io/timseverien](https://codepen.io/timseverien).
  7825. &lt;p&gt;Donatie: WNF
  7826. Ik hou enorm van dieren en de natuur en ik wil dat ze onderdeel blijven van dit kleine brokje in het universum. Daarom doneer ik aan het WNF.&lt;/p&gt;
  7827. </content>
  7828.  </entry>
  7829.  <entry>
  7830.    <title>Over websites en lekkende kranen</title>
  7831.    <link href="https://www.fronteers.nl/nl/blog/2018/12/over-websites-en-lekkende-kranen"/>
  7832.    <updated>2018-12-11T00:00:00Z</updated>
  7833.    <id>https://www.fronteers.nl/nl/blog/2018/12/over-websites-en-lekkende-kranen</id>
  7834.    <content xml:lang="nl" type="html">&lt;p&gt;Bij de loodgieter thuis lekt de kraan. Het kind van de dokter is altijd ziek. De schoenmaker loopt op versleten schoenen. Wat heeft het Nederlands &lt;a href=&quot;https://twitter.com/onzetaal/status/1012230346912534528&quot;&gt;veel spreekwoorden&lt;/a&gt; die allemaal ongeveer op hetzelfde neerkomen. Het is dan ook geen wonder waarschijnlijk dat dit voor veel front-enders ook opgaat. Voor anderen de mooiste dingen bouwen, maar de eigen website is vaak een ondergeschoven kindje.&lt;/p&gt;
  7835. &lt;p&gt;Mijn eigen website is ook zo’n lekkende kraan. In de loop der jaren heb ik er heel wat versleten. Van ‘plain old HTML’ naar Wordpress (en verschillende flirts met andere CMS’en) en uiteindelijk kwam ik toch weer uit bij ‘plain old HTML’. Makkelijk, snel, geen concessies hoeven doen voor een CMS en precies zo te perfectioneren als ik zelf wil. Het enige nadeel: ‘even’ een blogpost maken of andere dingen aan de site updaten, zijn toch wat meer werk dan ik zou willen. Met als gevolg dat mijn website precies aan het rijtje spreekwoorden toegevoegd kan worden. Daar baalde ik eigenlijk een beetje van.&lt;/p&gt;
  7836. &lt;p&gt;Ik had weleens van het wonder van static site generators gehoord, maar ook dat leek mij niet de heilige graal, tot ik van het bestaan van Netlify leerde. Een commit maken naar Github en de website wordt geüpdatet? Te mooi om waar te zijn, dacht ik. Maar toch de moeite waard om eens naar te kijken. Ik neem je mee in mijn persoonlijke werkwijze. Als je wilt, kun je via &lt;a href=&quot;https://github.com/JoseeWouters/Josee-Wouters&quot;&gt;mijn Github&lt;/a&gt; meekijken.&lt;/p&gt;
  7837. &lt;h2&gt;Stap 1 - Een static site generator uitkiezen&lt;/h2&gt;
  7838. &lt;p&gt;Mijn startpunt hiervoor was &lt;a href=&quot;https://www.staticgen.com/&quot;&gt;https://www.staticgen.com/&lt;/a&gt;. Ik had een keer eerder met Nuxt.js gewerkt - het bood toen precies de extra opties die ik met Vue.js wilde gebruiken - maar ik wilde niet direct hiervoor kiezen zonder andere opties te overwegen. Jekyll werkt met Ruby en Liquid, Hugo met Go en Gatsby met React. Nuxt.js is een framework voor Vue.js applicaties. Omdat ik Vue.js geweldig vind, wilde ik daar graag mee werken. Het werd dus toch Nuxt.&lt;/p&gt;
  7839. &lt;h2&gt;Stap 2 - de eerste opzet met Nuxt&lt;/h2&gt;
  7840. &lt;p&gt;Je kunt een Nuxt project op twee manieren starten: via npm kun je een een default applicatie opstarten of je kunt ‘from scratch&#39; beginnen door een package.json te maken. Ik koos voor deze laatste optie.&lt;/p&gt;
  7841. &lt;pre&gt;&lt;code&gt;{
  7842.  &amp;quot;name&amp;quot;: &amp;quot;joseewouters&amp;quot;,
  7843.  &amp;quot;scripts&amp;quot;: {
  7844.    &amp;quot;dev&amp;quot;: &amp;quot;nuxt&amp;quot;,
  7845.    &amp;quot;generate&amp;quot;: &amp;quot;nuxt generate&amp;quot;
  7846.  }
  7847. }
  7848. &lt;/code&gt;&lt;/pre&gt;
  7849. &lt;p&gt;Het command &lt;code&gt;generate&lt;/code&gt; staat niet genoemd in het voorbeeld bij Getting Started op de website van Nuxt.js, maar dit is wel nodig. Anders zul je een error krijgen bij het builden van de website en bij Netlify. Verder kun je wel de stappen volgen die op de website staan.&lt;/p&gt;
  7850. &lt;p&gt;Behalve het aanmaken van een pages directory heb ik een aantal andere die ik meteen heb toegevoegd. Mijn structuur ziet er als volgt uit:&lt;/p&gt;
  7851. &lt;pre&gt;&lt;code&gt;- assets
  7852. - - css
  7853. - components
  7854. - - app
  7855. - - icons
  7856. - layouts
  7857. - pages
  7858. - - blog
  7859. - static
  7860. - - media
  7861. - - - images
  7862. &lt;/code&gt;&lt;/pre&gt;
  7863. &lt;p&gt;Een aantal dingen van mijn aanpak wil ik uitlichten.&lt;/p&gt;
  7864. &lt;h2&gt;Icons&lt;/h2&gt;
  7865. &lt;p&gt;Ik gebruik graag de icons van FontAwesome, maar ik laad liever niet alles in. Daarom sla ik de icons die ik wil gebruiken op in components/icons. Hier heb ik bijvoorbeeld een file iconGithubSquare.vue. Binnen de &lt;code&gt;template&lt;/code&gt; tags plaats ik de svg code.&lt;/p&gt;
  7866. &lt;p&gt;In components/app staan de files voor onder andere de header en footer. Hierin kan ik nu eenvoudig mijn custom icons aanroepen. In AppHeader.vue importeer ik het icon als volgt:&lt;/p&gt;
  7867. &lt;pre&gt;&lt;code&gt;&amp;lt;script&amp;gt;
  7868. import iconGithubSquare from &#39;@/components/icons/iconGithubSquare.vue&#39;
  7869. export default {
  7870.    components: {
  7871.            iconGithubSquare
  7872.    }
  7873. }
  7874. &amp;lt;/script&amp;gt;
  7875. &lt;/code&gt;&lt;/pre&gt;
  7876. &lt;p&gt;Zodat ik vervolgens in mijn HTML het icon kan gebruiken met &lt;code&gt;&amp;lt;icon-github-square/&amp;gt;&lt;/code&gt;.&lt;/p&gt;
  7877. &lt;h2&gt;Blog&lt;/h2&gt;
  7878. &lt;p&gt;Nuxt.js zorgt er automatisch voor dat de vue-router geconfigueerd wordt, op basis van de files binnen pages. Mijn blogs bevinden zich daarom allemaal in pages/blogs. Daarbinnen maak ik voor elke blog een nieuwe folder. Bevat de desbetreffende blog afbeeldingen, dan zet ik deze hier ook in, zodat ik alles bij elkaar houd. pages/blog/hello-fronteers/index.vue wordt automatisch /blog/hello-fronteers.&lt;/p&gt;
  7879. &lt;p&gt;Ik schrijf mijn blogs in markdown. Nuxt.js ondersteunt het niet out-of-the-box en het staat ook niet beschreven op de website, maar door het toevoegen van een module kun je het wel beschikbaar maken. Dit doe je door &lt;code&gt;@nuxtjs/markdownit&lt;/code&gt; met npm of yarn aan je project toe te voegen en vervolgens deze in &lt;code&gt;nuxt.config.js&lt;/code&gt; te plaatsen. Heb je het project net als ik zelf opgezet, dan moet je deze file nog aanmaken in de root.&lt;/p&gt;
  7880. &lt;pre&gt;&lt;code&gt;module.exports = {
  7881.    modules: [
  7882.        &#39;@nuxtjs/markdownit&#39;
  7883.    ]
  7884. }
  7885. &lt;/code&gt;&lt;/pre&gt;
  7886. &lt;p&gt;Vervolgens kun je in een .vue file aangeven dat je markdown wilt schrijven met:&lt;/p&gt;
  7887. &lt;pre&gt;&lt;code&gt;&amp;lt;template lang=&amp;quot;md&amp;quot;&amp;gt;
  7888. &amp;lt;/template&amp;gt;
  7889. &lt;/code&gt;&lt;/pre&gt;
  7890. &lt;h2&gt;Layouts&lt;/h2&gt;
  7891. &lt;p&gt;Voor ik mijn website wil proberen te deployen met Netlify wil ik nog een layout maken. Ik heb zoals gezegd in components/app een aantal files, waaronder de header en footer. Doordat je deze elementen in een layout file importeert, mag een file niet header.vue heten.&lt;/p&gt;
  7892. &lt;p&gt;In layouts heb ik vervolgens mijn home.vue en blog.vue. Zo heb ik twee templates tot mijn beschikking, een blogpagina en een homepagina.&lt;/p&gt;
  7893. &lt;p&gt;Mijn home ziet er zo uit:&lt;/p&gt;
  7894. &lt;pre&gt;&lt;code&gt;&amp;lt;template&amp;gt;
  7895.    &amp;lt;div class=&amp;quot;wrapper&amp;quot;&amp;gt;
  7896.        &amp;lt;app-header/&amp;gt;
  7897.        &amp;lt;nuxt/&amp;gt;
  7898.        &amp;lt;app-footer/&amp;gt;
  7899.    &amp;lt;/div&amp;gt;
  7900. &amp;lt;/template&amp;gt;
  7901.  
  7902. &amp;lt;script&amp;gt;
  7903.  
  7904. import appHeader from &#39;@/components/app/appHeader.vue&#39;
  7905. import appFooter from &#39;@/components/app/appFooter.vue&#39;
  7906.  
  7907. export default {
  7908.    components: {
  7909.            appHeader,
  7910.            appFooter
  7911.    }
  7912. }
  7913. &amp;lt;/script&amp;gt;
  7914. &lt;/code&gt;&lt;/pre&gt;
  7915. &lt;p&gt;Het &lt;code&gt;&amp;lt;nuxt/&amp;gt;&lt;/code&gt; component wordt alleen in layout files gebruikt om de content te tonen van de pagina, bijvoorbeeld je index.vue.&lt;/p&gt;
  7916. &lt;p&gt;Om deze layout nu te gebruiken op een pagina, geef je dit eenvoudig aan in het desbetreffende file door middel van:&lt;/p&gt;
  7917. &lt;pre&gt;&lt;code&gt;&amp;lt;script&amp;gt;
  7918. export default {
  7919.    layout: &#39;home&#39;
  7920. }
  7921. &amp;lt;/script&amp;gt;
  7922. &lt;/code&gt;&lt;/pre&gt;
  7923. &lt;h2&gt;Stap 3 - Netlify&lt;/h2&gt;
  7924. &lt;p&gt;Ik kan nu blogs schrijven in markdown en ik heb een layout waar deze in getoond worden. Klaar voor de volgende stap: het live brengen van de website. Om eerlijk te zijn, had ik hier van tevoren niet zoveel vertrouwen in. Dingen als &#39;zo gedaan&#39; en &#39;maar een paar stappen&#39; blijken vaak meer werk dan websites beloven, is mijn ervaring.&lt;/p&gt;
  7925. &lt;p&gt;Ik volgde de stappen: Registreren bij Netlify met Github, de juiste repository kiezen, een paar build settings en klaar! Nou, niet helemaal. Ik kreeg een foutmelding. Ik had de package.json opgenomen in .gitignore. Niet zo slim, maar snel hersteld. En wonderlijk genoeg, werkte het nu meteen. Zodra ik de commit maakte, ging Netlify bijna direct aan de slag met opnieuw builden en hoogstens een paar minuten later stond mijn website live.&lt;/p&gt;
  7926. &lt;p&gt;Om een wijziging te maken, heb ik er bijna geen omkijken meer naar: ik maak een nieuwe commit en Netlify doet de rest zelf.&lt;/p&gt;
  7927. &lt;h2&gt;De lekkende kraan&lt;/h2&gt;
  7928. &lt;p&gt;Ik geef het niet graag toe, maar mijn website is eigenlijk nog steeds een lekkende kraan. Ik wil nog een keer uitgebreid gaan kijken naar de toegankelijkheid van mijn website, ik wil ervoor zorgen dat nieuwe blogs automatisch in de lijst op de homepage verschijnen en stiekem doet de website het niet zo goed in IE11. Het lijstje met nice-to-have&#39;s en need-to-have&#39;s is lang. Maar deze werkwijze van Nuxt en Netlify zorgt er voor mij wel voor dat ik makkelijker en sneller even een kleine wijziging kan maken. Ik heb hoop dat het nog wel wat wordt met die kraan.&lt;/p&gt;
  7929. &lt;h2&gt;Meer weten:&lt;/h2&gt;
  7930. &lt;ul&gt;
  7931. &lt;li&gt;&lt;a href=&quot;https://nuxtjs.org/&quot;&gt;https://nuxtjs.org/&lt;/a&gt;&lt;/li&gt;
  7932. &lt;li&gt;&lt;a href=&quot;https://www.netlify.com/&quot;&gt;https://www.netlify.com/&lt;/a&gt;&lt;/li&gt;
  7933. &lt;li&gt;&lt;a href=&quot;https://github.com/JoseeWouters/Josee-Wouters&quot;&gt;https://github.com/JoseeWouters/Josee-Wouters&lt;/a&gt;&lt;/li&gt;
  7934. &lt;li&gt;&lt;a href=&quot;https://fronteers.nl/workshops/workshop-netlify-static-site-generators&quot;&gt;https://fronteers.nl/workshops/workshop-netlify-static-site-generators&lt;/a&gt;&lt;/li&gt;
  7935. &lt;/ul&gt;
  7936. &lt;h2&gt;Over Josee Wouters&lt;/h2&gt;
  7937. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/josee-square.jpg&quot; alt=&quot;Foto van Josee&quot; class=&quot;floating-portrait&quot; /&gt;
  7938. Front-end developer en vrijwilliger bij Fronteers. Werkt naast haar reguliere werk ook freelance en heeft in haar vrije tijd een app genaamd What Dinner? gemaakt. Programmeert ook graag met Arduino.
  7939. &lt;p&gt;Donatie: Nationaal Fonds Kinderhulp
  7940. Kinderhulp vindt dat in Nederland armoede geen reden mag zijn dat kinderen worden buitengesloten. Kinderhulp wil ervoor zorgen dat alle kinderen er gewoon bij kunnen horen.&lt;/p&gt;
  7941. </content>
  7942.  </entry>
  7943.  <entry>
  7944.    <title>Hoe test ik de toegankelijkheid van mijn website?</title>
  7945.    <link href="https://www.fronteers.nl/nl/blog/2018/12/hoe-test-ik-de-toegankelijkheid-van-mijn-website"/>
  7946.    <updated>2018-12-10T00:00:00Z</updated>
  7947.    <id>https://www.fronteers.nl/nl/blog/2018/12/hoe-test-ik-de-toegankelijkheid-van-mijn-website</id>
  7948.    <content xml:lang="nl" type="html">&lt;p&gt;Top! Je wil testen of je website toegankelijk is voor iedereen. Daarmee help je niet alleen de mensen met een beperking, waarvan er steeds meer zijn in onze vergrijzende maatschappij. Een toegankelijke website is voor iedereen fijner in gebruik, en er zijn nog veel meer &lt;a href=&quot;https://www.w3.org/WAI/bcase/Overview&quot;&gt;goede redenen&lt;/a&gt; om met toegankelijkheid aan de slag te gaan.&lt;/p&gt;
  7949. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toegankelijkheid-testen/keep-clear-accessibility-fail.jpg&quot; alt=&quot;Twee drempels met opgangen voor rolstoelen, maar in het midden een bord “”Keep clear for wheelchair users” dat de toegang verspert&quot; /&gt;&lt;/p&gt;
  7950. &lt;h2&gt;Geef mij maar een uitdaging!&lt;/h2&gt;
  7951. &lt;p&gt;Je zou de &lt;a href=&quot;https://www.w3.org/TR/WCAG/&quot;&gt;Web Content Accessibility Guidelines&lt;/a&gt; (WCAG) door kunnen nemen. Deze richtlijn van het W3C is verankerd in &lt;a href=&quot;https://www.w3.org/WAI/policies/&quot;&gt;regelgeving&lt;/a&gt; en is internationaal de standaard voor toegankelijkheid. Als je dit document tot je wil nemen ben je wel even bezig. WCAG bestaat uit 4 principles met 13 guidelines die onderverdeeld zijn in 78 success criteria. En die gaan dan weer gepaard met een paar honderd &amp;quot;techniques and failures&amp;quot;. Je voelt hem misschien al aankomen: de meest gebruikte richtlijn is niet het meest toegankelijke startpunt.&lt;/p&gt;
  7952. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toegankelijkheid-testen/wheelchair-sign.jpg&quot; alt=&quot;Driehoekig waarschuwingsbord met rolstoel die van helling af glijdt&quot; /&gt;&lt;/p&gt;
  7953. &lt;h2&gt;Vijf simpele tests om de toegankelijkheid van mijn website testen&lt;/h2&gt;
  7954. &lt;p&gt;Er zijn vijf relatief simpele checks die veel op kunnen leveren. Deze testjes zorgen ervoor dat je met weinig moeite heel wat problemen kunt onderscheppen. Gebruik hierbij de termen &amp;quot;quick wins&amp;quot; en &amp;quot;laaghangend fruit&amp;quot; en iedereen zal je begripvol aankijken.&lt;/p&gt;
  7955. &lt;h2&gt;Simpele test 1: Kleur en contrast&lt;/h2&gt;
  7956. &lt;p&gt;De tekst op je pagina moet leesbaar zijn voor iedereen. Een goed contrast helpt niet alleen mensen die slechtziend of kleurenblind zijn, maar bijvoorbeeld ook bezoekers die met hun mobieltje in de zon staan of hun scherm gedimd hebben. Het testen van kleur en contrast is dan ook een waardevolle stap naar toegankelijkheid.&lt;/p&gt;
  7957. &lt;p&gt;WCAG laat voor grote tekst een lagere contrastwaarde toe dan voor kleine tekst. Grote tekst is in dit geval minimaal 24px, of minimaal 19px en bold. Voor grote tekst moet het contrast minimaal 3.0:1 zijn, en voor normale tekst 4.5:1.&lt;/p&gt;
  7958. &lt;p&gt;Nu kan ik me voorstellen dat je je bij deze getallen niks kan voorstellen. Gelukkig zijn er tal van tools die je precies kunnen vertellen hoeveel contrast er tussen twee kleuren zit. Je kunt twee kleuren invoeren op de website &lt;a href=&quot;https://contrast-ratio.com/&quot;&gt;contrast-ratio.com&lt;/a&gt;, je &lt;a href=&quot;https://developers.google.com/web/updates/2018/01/devtools#contrast&quot;&gt;Chrome developer tools&lt;/a&gt; gebruiken, of een los programma zoals &lt;a href=&quot;https://developer.paciellogroup.com/resources/contrastanalyser/&quot;&gt;Contrast Analyser&lt;/a&gt; downloaden.&lt;/p&gt;
  7959. &lt;p&gt;Als je eenmaal een tool gekozen hebt kun je alle teksten op je website nagaan.&lt;/p&gt;
  7960. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toegankelijkheid-testen/ally.jpg&quot; alt=&quot;Rolstoelopgang die begint met 1 traptrede&quot; /&gt;&lt;/p&gt;
  7961. &lt;h2&gt;Simpele test 2: Zoom in en uit&lt;/h2&gt;
  7962. &lt;p&gt;Heel veel mensen zijn erbij gebaat als er fatsoenlijk in te zoomen is op je website. De site mag dan best overspringen naar een tablet of mobiele versie als die er is. De basis van toegankelijkheid is dat iedereen dezelfde inhoud en functionaliteit kan gebruiken, dus let wel op dat je responsive website een volwaardig alternatief is! Dit kun je gemakkelijk testen met de zoomopties in je browser.&lt;/p&gt;
  7963. &lt;h2&gt;Simpele test 3: Gebruik je toetsenbord&lt;/h2&gt;
  7964. &lt;p&gt;Een deel van je bezoekers zal gebruiken maken van zogenaamde assistive technology (AT), ondersteunende technologie. Veel van die technologie communiceert met de browser via de toetsenbord API. Kort gezegd: als je website met een toetsenbord te bedienen is maak je veel mensen blij. Daarbij horen ook bezoekers met een kapotte muis, een gebroken arm en power users.&lt;/p&gt;
  7965. &lt;p&gt;Test dus even met je toetsenbord of alles werkt. Ga met TAB door je pagina, en weer terug met SHIFT-TAB. Kijk of je al je interactieve elementen (knoppen, links, formulieren, etc) kan bereiken, en of je ze kan bedienen. Let ook goed op of het altijd zichtbaar is welk element de focus van je toetsenbord heeft.&lt;/p&gt;
  7966. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toegankelijkheid-testen/lb-prague-kunta-hora-14.jpg&quot; alt=&quot;Trap met latten die eroverheen liggen&quot; /&gt;&lt;/p&gt;
  7967. &lt;h2&gt;Simpele test 4: Doe een automatische test&lt;/h2&gt;
  7968. &lt;p&gt;Misschien vraag je je af, waarom testen we niet alles automatisch? Een beetje gezonde luiheid kan geen kwaad. Helaas is alles automatisch testen bij toegankelijkheid geen optie. Een test kan bijvoorbeeld wel zien of een afbeelding een tekstalternatief heeft, maar niet of de tekst ook daadwerkelijk de lading dekt.&lt;/p&gt;
  7969. &lt;p&gt;Het exacte getal varieert afhankelijk van wie je het vraagt, maar ga er van uit dat zo&#39;n 30% van alle issues automatisch getest kan worden. Gelukkig zitten daar wel een aantal veel voorkomende tussen, dus de winst is alsnog flink.&lt;/p&gt;
  7970. &lt;p&gt;Er zijn verschillende tools die je kan gebruiken. Zelf ben ik een erg tevreden gebruiker van &lt;a href=&quot;https://www.deque.com/axe/&quot;&gt;aXe&lt;/a&gt;. Deze Javascript library kun je overal in de developer workflow inzetten. Bijvoorbeeld in je &lt;a href=&quot;https://webhint.io/docs/user-guide/hints/hint-axe/&quot;&gt;linting tool&lt;/a&gt;, &lt;a href=&quot;https://github.com/dequelabs/axe-core/tree/develop/doc/examples&quot;&gt;bij je andere tests&lt;/a&gt;, of als &lt;a href=&quot;http://bitly.com/aXe-Chrome&quot;&gt;browser extension&lt;/a&gt;.&lt;/p&gt;
  7971. &lt;p&gt;De laatste optie is misschien wel de makkelijkste om mee te beginnen. De aXe extensie geeft je developer tools een nieuw tabje met een mooie analyze-knop. Na een druk op de knop krijg je alle issues te zien. Ik zou eerst filteren op &amp;quot;Violations&amp;quot; in plaats van &amp;quot;All issues&amp;quot;, dat maakt het een stuk praktischer. Vervolgens krijg je een overzichtelijke lijst met issues inclusief omschrijving, locatie, oplossing en een hele waardevolle &amp;quot;Learn more&amp;quot;-link waar enorm veel nuttige informatie achter zit.&lt;/p&gt;
  7972. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toegankelijkheid-testen/1514154-408320525965919-1541568371-n-grande.jpg&quot; alt=&quot;Bord weelchair ramp available pleas ask at counter&quot; /&gt;&lt;/p&gt;
  7973. &lt;h2&gt;Simpele test 5: Screen reader&lt;/h2&gt;
  7974. &lt;p&gt;Bij assistive technology denken men al snel aan screen readers. Een screen reader is software die kan voorlezen wat er op een scherm te zien is, en hier doorheen kan navigeren. Deze software wordt onder andere door blinden en slechtzienden gebruikt. Zo&#39;n screen reader is een flink andere gebruikerservaring dan de meeste mensen hebben. Zeker als je de eerste keer een screen reader start en je computer begint een heel verhaal, dan kan dat even wennen zijn.&lt;/p&gt;
  7975. &lt;p&gt;Ervaring leert echter dat je helemaal niet veel van een screen reader hoef te snappen om er praktisch mee te testen. Eigenlijk wil je ongeveer hetzelfde doen als eerder met je toetsenbord. Je navigeert door de pagina om te zien (of horen) of je alles kan bereiken, en of je alles kan bedienen. Extra controlepunt is nu of alle onderdelen die je bereikt een logische naam en rol hebben. Een knop moet bijvoorbeeld voorgelezen worden als &amp;quot;button&amp;quot; en niet als &amp;quot;clickable&amp;quot; of &amp;quot;link&amp;quot;. Daarnaast moet de button een naam hebben die past bij de functie. Een menu knop kan bijvoorbeeld voorgelezen worden als &amp;quot;Menu, button&amp;quot;.&lt;/p&gt;
  7976. &lt;p&gt;Wat je met een screen reader hoort, moet overeenkomen met wat visueel aanwezig is.&lt;/p&gt;
  7977. &lt;p&gt;Op MacOS heb je &lt;a href=&quot;https://www.apple.com/lae/accessibility/mac/vision/&quot;&gt;VoiceOver&lt;/a&gt; dat het beste resultaat geeft met Safari. Bekijk de &lt;a href=&quot;https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts&quot;&gt;VoiceOver cheatsheet bij Deque&lt;/a&gt;.&lt;/p&gt;
  7978. &lt;p&gt;Op Windows heb je onder andere &lt;a href=&quot;https://www.nvaccess.org/&quot;&gt;NVDA&lt;/a&gt; dat het beste werkt met Firefox. Bekijk de &lt;a href=&quot;https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts&quot;&gt;NVDA cheatsheet bij Deque&lt;/a&gt;.&lt;/p&gt;
  7979. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toegankelijkheid-testen/m3ed6g0adn001.jpg&quot; alt=&quot;zeer steile trap met daarnaast even steile helling met daarop bord voor rolstoepgebruikers&quot; /&gt;&lt;/p&gt;
  7980. &lt;h2&gt;Ok, dan ben ik klaar!&lt;/h2&gt;
  7981. &lt;p&gt;Nee helaas, zo simpel is het niet. Maar je hebt nu wel een stevige basis. Zorg dat je semantische HTML gebruikt, volg standaarden en denk bij alles wat je maakt na of het mogelijk mensen met een beperking beïnvloedt.&lt;/p&gt;
  7982. &lt;p&gt;En om af te sluiten nog een aantal praktische bronnen voor als je nog meer wil weten toegankelijkheid.&lt;/p&gt;
  7983. &lt;h2&gt;Bronnen&lt;/h2&gt;
  7984. &lt;p&gt;&lt;a href=&quot;https://www.w3.org/WAI/fundamentals/accessibility-intro/&quot;&gt;W3C - WAI - Introduction to Web Accessibility&lt;/a&gt;&lt;/p&gt;
  7985. &lt;p&gt;&lt;a href=&quot;https://www.w3.org/WAI/tutorials/&quot;&gt;W3C - WAI - Web Accessibility Tutorials&lt;/a&gt;&lt;/p&gt;
  7986. &lt;p&gt;&lt;a href=&quot;https://www.udacity.com/course/web-accessibility--ud891&quot;&gt;Udacity - Web Accessibility&lt;/a&gt;&lt;/p&gt;
  7987. &lt;p&gt;&lt;a href=&quot;https://www.edx.org/course/information-communication-technology-ict-gtx-ict100x&quot;&gt;edX - ICT Accessibility&lt;/a&gt;&lt;/p&gt;
  7988. &lt;p&gt;&lt;a href=&quot;https://www.futurelearn.com/courses/digital-accessibility&quot;&gt;Future Learn - Digital Accessibility&lt;/a&gt;&lt;/p&gt;
  7989. &lt;p&gt;&lt;a href=&quot;https://accessibility.blog.gov.uk/2016/09/02/dos-and-donts-on-designing-for-accessibility/&quot;&gt;GOV.UK - Dos and don&#39;ts on designing for accessibility&lt;/a&gt;&lt;/p&gt;
  7990. &lt;p&gt;&lt;a href=&quot;https://www.w3.org/WAI/WCAG21/quickref/&quot;&gt;W3C - WAI - How to Meet WCAG 2 (Quick Reference)&lt;/a&gt;&lt;/p&gt;
  7991. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/toegankelijkheid-testen/title-describes-topic-or-purpose.jpeg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  7992. &lt;h2&gt;Over Erik Kroes&lt;/h2&gt;
  7993. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/erik.jpg&quot; alt=&quot;Foto van Erik Kroes&quot; class=&quot;floating-portrait&quot; /&gt;
  7994. Erik is onderdeel van het accessibility team van ING. Elke dag probeert hij weer zijn steentje bij te dragen aan de digitale toegankelijkheid van de apps en websites. Daarnaast is hij creatief actief en maakt hij onder andere illustraties voor de Volkskrant.
  7995. &lt;p&gt;Donatie: de Hersenstichting&lt;/p&gt;
  7996. </content>
  7997.  </entry>
  7998.  <entry>
  7999.    <title>Prettier, de eigenzinnige code-opmaker</title>
  8000.    <link href="https://www.fronteers.nl/nl/blog/2018/12/prettier-de-eigenzinnige-code-opmaker"/>
  8001.    <updated>2018-12-09T00:00:00Z</updated>
  8002.    <id>https://www.fronteers.nl/nl/blog/2018/12/prettier-de-eigenzinnige-code-opmaker</id>
  8003.    <content xml:lang="nl" type="html">&lt;p&gt;Bij HTML, CSS en JavaScript en de meeste andere computertalen is niet voorgeschreven hoe je de code moet opmaken. Alles op één regel of juist niet, veel spaties, tabs of alles dicht op elkaar, voor de computer maakt het echt niet uit.&lt;/p&gt;
  8004. &lt;p&gt;Dit zorgt er ook voor dat iedereen een eigen stijl ontwikkelt. Dat is op zich niet erg, maar als meerdere ontwikkelaars met elk een eigen stijl aan dezelfde code gaan werken, dan wordt dat lastiger. Met verschillende stijlen wordt de code lastiger leesbaar en als code steeds anders wordt opgemaakt geeft dat vervuiling in het versiebeheersysteem.&lt;/p&gt;
  8005. &lt;p&gt;Stijl van Gerard:&lt;/p&gt;
  8006. &lt;pre&gt;&lt;code&gt;const hc = h =&amp;gt; h&amp;gt;300?&#39;hoogte-&#39;+hcls:null
  8007. &lt;/code&gt;&lt;/pre&gt;
  8008. &lt;p&gt;Stijl van Sergey:&lt;/p&gt;
  8009. &lt;pre&gt;&lt;code&gt;function getHeaderClass ( height )
  8010. {
  8011. headerClass = null;
  8012.  
  8013. if ( height &amp;gt; 300 )
  8014. {
  8015. headerClass = `hoogte-${highHeaderClassname}`;
  8016. }
  8017.  
  8018. return headerClass;
  8019. }
  8020. &lt;/code&gt;&lt;/pre&gt;
  8021. &lt;p&gt;Vaak gebruiken veel bedrijven daarom coderichtlijnen waarin staat hoe code geschreven moet worden zodat men niet verschillende stijlen door elkaar gebruikt. Vroeger werden die vaak zelf geschreven, maar tegenwoordig kies je er een die al door anderen is geschreven. Een bekende coderichtlijn voor JavaScript is de &lt;a href=&quot;https://github.com/airbnb/javascript&quot;&gt;coderichtlijn van Airbnb&lt;/a&gt;.&lt;/p&gt;
  8022. &lt;h2&gt;Standaard codestijl&lt;/h2&gt;
  8023. &lt;p&gt;Zou het niet handig zijn om een tooltje te hebben die je code automatisch naar de juiste stijl herschrijft? Hier komt Prettier om de hoek kijken, want dat is precies wat het doet. Prettier converteert je code naar een standaard codestijl.&lt;/p&gt;
  8024. &lt;p&gt;Standaard codestijl? Wat is dat? In veel editors met een eigen codeopmaker kan je heel precies aangeven wat jouw favoriete stijl is. Wil je spaties binnen de haakjes van een if? Wil je een spatie voor de accolade van een while?&lt;/p&gt;
  8025. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/stijlinstellingen.png&quot; alt=&quot;Stijlinstellingen&quot; /&gt;&lt;/p&gt;
  8026. &lt;p&gt;Prettier doet het omgekeerde: het gaat uit van één codestijl, waar ze goed over hebben nagedacht en die voor iedereen geldt.&lt;/p&gt;
  8027. &lt;h2&gt;Hoe gebruik je prettier?&lt;/h2&gt;
  8028. &lt;p&gt;Je kunt Prettier globaal installeren met:&lt;/p&gt;
  8029. &lt;pre&gt;&lt;code&gt;npm install --global prettier
  8030. &lt;/code&gt;&lt;/pre&gt;
  8031. &lt;p&gt;Een bestand kan je dan opnieuw opmaken met:&lt;/p&gt;
  8032. &lt;pre&gt;&lt;code&gt;prettier --write filename.js
  8033. &lt;/code&gt;&lt;/pre&gt;
  8034. &lt;p&gt;Het is echter veel handiger om Prettier op te nemen in je editor. Je kunt dan zorgen dat de tool wordt uitgevoerd met een bepaalde toetscombinatie of zelfs elke keer als je het bestand opslaat.&lt;/p&gt;
  8035. &lt;p&gt;Dat laatste doe ik en ik merk dat ik al snel productiever werd omdat ik niet steeds handmatig de code hoef op te maken. Ik typ een blurb code zonder spaties en enters… &lt;save&gt; en hoppa, de code ziet er weer netjes uit.&lt;/save&gt;&lt;/p&gt;
  8036. &lt;p&gt;Misschien denk je dat een programma nooit de code zo netjes opmaakt als jijzelf. Dat was in ieder geval mijn grootste weerstand om Prettier te gebruiken. Maar de code waar Prettier mee komt, ligt erg in de buurt met hoe ik het ook zou doen. En als je een stukje precies opgemaakte code hebt of bijvoorbeeld een grafiekje in ASCII-art met zijn eigen opmaak, dan kan je &lt;code&gt;// prettier-ignore&lt;/code&gt; erboven zetten en de code wordt dan met rust gelaten.&lt;/p&gt;
  8037. &lt;p&gt;Naast het niet zelf hoeven opmaken, ontdekte ik nog een voordeel. Het zoeken in code wordt beter. Als je bijvoorbeeld zoekt naar &lt;code&gt;varname =&lt;/code&gt; dan hoef je niet bang te zijn dat &lt;code&gt;varname=&lt;/code&gt; of &lt;code&gt;varname&amp;lt;tab&amp;gt;=&lt;/code&gt; worden overgeslagen want al deze code heeft Prettier al veranderd in &lt;code&gt;varname =&lt;/code&gt;.&lt;/p&gt;
  8038. &lt;h2&gt;Toevoegen aan een bestaand project&lt;/h2&gt;
  8039. &lt;p&gt;Hoe voeg je Prettier toe aan een bestaand project? Als je Prettier begint te gebruiken kan het zijn dat je ergens een bugje oplost, één regel aanpast en dat Prettier ook nog eens het hele bestand opnieuw opmaakt. In je versiebeheersysteem zie je dan niet die ene aangepaste regel, maar heel veel aanpassingen in de opmaak. Je versiebeheersysteem raakt zo erg vervuild.&lt;/p&gt;
  8040. &lt;p&gt;Beter is om alle bestanden één keer opnieuw op te maken en verder geen andere aanpassingen te maken en die wijzigingen in één commit op te nemen.&lt;/p&gt;
  8041. &lt;p&gt;Prettier toepassen op alle JavaScriptbestanden gaat op een UNIX-gebaseerd systeem zoals Linux of macOS met dit commando:&lt;/p&gt;
  8042. &lt;pre&gt;&lt;code&gt;find . -name &amp;quot;*.js&amp;quot; | grep -v node_modules | xargs prettier --write
  8043. &lt;/code&gt;&lt;/pre&gt;
  8044. &lt;h2&gt;Linter&lt;/h2&gt;
  8045. &lt;p&gt;En wat nu als je ook nog een linter gebruikt? Die kunnen namelijk met Prettier conflicteren. Een optie is om elke keer dat er een conflict is een uitzondering toe te voegen aan het linter configuratiebestand, zo heb ik dat gedaan. Maar op internet kan je ook linter configuratiebestanden vinden die geschikt zijn voor Prettier. Het uitschakelen van de linter is in ieder geval geen goed idee. Een linter kijkt in tegenstelling tot Prettier verder dan alleen de opmaak, het kijkt ook naar veelgemaakte programmeerfouten.&lt;/p&gt;
  8046. &lt;h2&gt;Uitzonderingen&lt;/h2&gt;
  8047. &lt;p&gt;Het idee van Prettier is dat er één stijl is die voor iedereen geldt en dat er geen tientallen instellingen zijn. Maar zoals geen enkel programma is ook Prettier niet perfect en al snel kwamen er toch opties om uitzonderingen toe te voegen.&lt;/p&gt;
  8048. &lt;p&gt;Eén daarvan is &lt;a href=&quot;https://prettier.io/docs/en/options.html#jsx-brackets&quot;&gt;jsxBracketSameLine&lt;/a&gt; dat er zelfs kwam omdat dit een dealbreaker was om Prettier binnen Facebook te gebruiken.&lt;/p&gt;
  8049. &lt;p&gt;Van de meeste opties kan je gewoon de defaultwaarden kiezen. Twee opties heb ik wel aangepast.&lt;/p&gt;
  8050. &lt;p&gt;Een daarvan is de achterliggende komma, die sinds ES5 in JavaScript is toegestaan. Als je in JavaScript een lijst met items hebt met elk item op een eigen regel, dan is het handig om achter elke item een komma te zetten. Als je dan een item onderaan toevoegt of weghaalt, dan hoef je geen komma’s aan te passen en in je versiebeheersysteem ziet het er ook netter uit.&lt;/p&gt;
  8051. &lt;p&gt;De tweede is het altijd gebruiken van ronde haakjes in een fat arrow-functie. Standaard laat Prettier bij een fat arrow-functie met één parameter de haakjes weg. Maar bij geen of meer parameters zijn er wel haakjes. Het is net iets netter om dan altijd haakjes te gebruiken.&lt;/p&gt;
  8052. &lt;p&gt;Uitzonderingen kan je toevoegen aan het &lt;code&gt;.prettierrc.json&lt;/code&gt;-bestand in de root van je project.&lt;/p&gt;
  8053. &lt;p&gt;Met bovengenoemde twee uitzonderingen ziet deze er dan zo uit:&lt;/p&gt;
  8054. &lt;pre&gt;&lt;code&gt;{
  8055.  &amp;quot;trailingComma&amp;quot;: &amp;quot;es5&amp;quot;,
  8056.  &amp;quot;arrowParens&amp;quot;: &amp;quot;always&amp;quot;,
  8057. }
  8058. &lt;/code&gt;&lt;/pre&gt;
  8059. &lt;p&gt;In eerste instantie was Prettier bedoelt voor JavaScript, maar al gauw kwamen daar andere talen bij zoals TypeScript, JSX voor React en CSS.&lt;/p&gt;
  8060. &lt;p&gt;Op 7 november 2018 is daar met &lt;a href=&quot;https://prettier.io/blog/2018/11/07/1.15.0.html&quot;&gt;versie 1.15&lt;/a&gt; ook HTML-, Vue-, Angular- and MDX-ondersteuning bijgekomen. Er is dus haast geen front-endcode meer die je niet door Prettier kan laten opmaken.&lt;/p&gt;
  8061. &lt;h2&gt;Over Edwin Martin&lt;/h2&gt;
  8062. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/edwin.jpg&quot; alt=&quot;Foto van Edwin Martin&quot; class=&quot;floating-portrait&quot; /&gt;
  8063. Edwin loopt alweer een tijdje mee en kent het internet nog van toen er nog geen World Wide Web was. Toen dit kwam, was hij gelijk verkocht. Edwin is sinds 2000 freelancer en [blogt](https://bitstorm.org/) en [twittert](https://twitter.com/edwinm).
  8064. Donatie
  8065. Mijn donatie gaat naar Artsen zonder Grenzen. Zij zorgen voor noodzakelijke medische hulp bij natuurrampen en in oorlogsgebieden.
  8066. </content>
  8067.  </entry>
  8068.  <entry>
  8069.    <title>Mooi rood is niet lelijk</title>
  8070.    <link href="https://www.fronteers.nl/nl/blog/2018/12/mooi-rood-is-niet-lelijk"/>
  8071.    <updated>2018-12-08T00:00:00Z</updated>
  8072.    <id>https://www.fronteers.nl/nl/blog/2018/12/mooi-rood-is-niet-lelijk</id>
  8073.    <content xml:lang="nl" type="html">&lt;p&gt;7 tips voor het kiezen van de juiste kleuren voor je website of app&lt;/p&gt;
  8074. &lt;p&gt;Design is een vak, laat dat duidelijk zijn. Maar soms heb je als websitebouwer even geen budget voor een professionele designer. Of vind je het gewoon leuk om zelf te doen.&lt;/p&gt;
  8075. &lt;p&gt;Betekent dat dan maar dat je website of app lelijk moet zijn? Zeker niet! Hoewel design veel breder gaat dan alleen het visuele aspect, is het kiezen van de juiste kleuren voor je website behoorlijk bepalend, want hey, het oog wil ook wat. Daarom geef ik je in dit artikel 7 tips voor het bepalen van de juiste kleuren voor je website of app.&lt;/p&gt;
  8076. &lt;h2&gt;1. Gebruik een color picker tool&lt;/h2&gt;
  8077. &lt;p&gt;Een handige tool om kleuren te kiezen is de browser addon Colorzilla. Hiermee kun je onder andere bekijken welke kleuren een website gebruikt. Daarnaast kun je met Adobe Color (voorheen Kuler) ook kleurenschema’s samenstellen, of kleurenschema’s gebruiken die door anderen zijn bedacht.&lt;/p&gt;
  8078. &lt;p&gt;Maar als je eenmaal een kleurenschema hebt gekozen, hoe vertaal je dit naar je website?&lt;/p&gt;
  8079. &lt;p&gt;Kies allereerst een dominante kleur. Dit is vaak de kleur die voorkomt in het logo. Gebruik deze kleur voor zaken die de aandacht moeten trekken, zoals bijvoorbeeld koppen, buttons, menu’s. Daarnaast kies je één of twee accentkleuren om een kleurenschema te maken. Afhankelijk van de sfeer die je wilt gebruiken, kan dit een complementaire kleur, tint of schaduw zijn. Kies tot slot een rustige achtergrondkleur, maar vaak is wit een goede keuze.&lt;/p&gt;
  8080. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/mooi-rood/kleurenschema-fronteers.jpg&quot; alt=&quot;Kleurenschema Fronteers&quot; /&gt;&lt;/p&gt;
  8081. &lt;h2&gt;2. Laat je inspireren door goede bestaande voorbeelden (maar wees geen copycat!)&lt;/h2&gt;
  8082. &lt;p&gt;Er is niks mis met inspiratie opdoen op websites die je mooi vindt. Kijk daarom naar andere websites en leer. Hoe gebruiken zij accenten? Wat valt je snel op? Komt dat door een kleur? Welke kleuren worden gecombineerd? Het helpt overigens net zo goed om te kijken naar websites die je bloedende ogen bezorgen. Want weten hoe het niet moet, is net zo leerzaam!&lt;/p&gt;
  8083. &lt;p&gt;Ook belangrijk: zorg dat je niet te veel op een ander lijkt. Je wilt natuurlijk geen copycat zijn.&lt;/p&gt;
  8084. &lt;p&gt;Zo kwam ik laatst op de website van een zonweringsbedrijf, waarvan ik serieus dacht dat ze een onderdeel van Coolblue waren. Misschien heeft de ontwerper gedacht: wat voor Coolblue werkt, werkt vast ook voor ons. Maar uiteindelijk heeft het een averechts effect op het bouwen van een goed en sterk merk. Je wilt toch niet dat bezoekers aan een ander bedrijf denken als ze jouw website bezoeken?&lt;/p&gt;
  8085. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/mooi-rood/zonwering-website.jpg&quot; alt=&quot;Website zonwering&quot; /&gt;&lt;/p&gt;
  8086. &lt;p&gt;Als we kijken naar de website van Amnesty International, dan is daar duidelijk gekozen om de kleur van het logo als accentkleur te gebruiken. Voor de rest is er een rustig schema gekozen met grijstinten.&lt;/p&gt;
  8087. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/mooi-rood/kleurenschema-amnesty.jpg&quot; alt=&quot;Kleurenschema Amnesty&quot; /&gt;&lt;/p&gt;
  8088. &lt;p&gt;De ANWB heeft ook gekozen voor het gebruik van de logokleuren op de website, maar dan voornamelijk het blauw als accentkleur en ook veel (te veel als je het mij vraagt) tinten blauw ter ondersteuning.&lt;/p&gt;
  8089. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/mooi-rood/kleurenschema-anwb.jpg&quot; alt=&quot;Kleurenschema ANWB&quot; /&gt;&lt;/p&gt;
  8090. &lt;h2&gt;3. Gebruik Pinterest voor het maken van moodboards&lt;/h2&gt;
  8091. &lt;p&gt;Het is goed om na te denken over het gevoel dat je op wilt roepen met je website of app. Het kan daarbij helpen om &lt;a href=&quot;https://nl.pinterest.com/&quot;&gt;een moodboard op Pinterest te maken&lt;/a&gt;. Als je uiteindelijk alle foto’s op je moodboard bij elkaar ziet, dan zal je waarschijnlijk een kleurpatroon ontdekken dat de sfeer die je wilt bereiken goed weergeeft.&lt;/p&gt;
  8092. &lt;p&gt;Met Tineye kun je vervolgens de &lt;a href=&quot;https://labs.tineye.com/color/&quot;&gt;kleuren uit een of meerdere foto’s halen&lt;/a&gt; en deze toepassen in je website.&lt;/p&gt;
  8093. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/mooi-rood/tineye-kleurextractie-van-een-foto.jpg&quot; alt=&quot;Kleurextractie van een foto&quot; /&gt;&lt;/p&gt;
  8094. &lt;h2&gt;4. Maak gebruik van kleurassociaties&lt;/h2&gt;
  8095. &lt;p&gt;Kleuren hebben betekenis. Afhankelijk van je doelgroep, wil je bepaalde kleuren misschien juist wel of juist niet gebruiken. Zo zal een website of app voor een natuurorganisatie zoals Natuurmonumenten gebruikmaken van groentinten. In ons hoofd is dat een logische keuze. Vraag een kind maar eens een boom te tekenen. Negen van de tien keer wordt dat dan een bruine stam met daarboven een groene wolk. Die enkele kunstzinnige expressionist-in-de-dop daar gelaten. Opvallend bij deze website is overigens wel dat de kleur van het logo niet meteen terugkomt in het kleurgebruik op de site.&lt;/p&gt;
  8096. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/mooi-rood/kleurenschema-natuurmonumenten.jpg&quot; alt=&quot;Kleurenschema Natuurmonumenten&quot; /&gt;&lt;/p&gt;
  8097. &lt;h2&gt;5. Bekijk je kleurkeuze in een breder verband&lt;/h2&gt;
  8098. &lt;p&gt;Een website of app is vaak niet een op zichzelf staand iets, maar onderdeel van een merk. Probeer daarom bij het kiezen van kleuren breder te denken dan alleen de website. Of andersom, als je een logo laat maken, denk dan gelijk aan kleurenschema’s die je op je online uitingen kunt toepassen. Want een logo op zich kan er prachtig uitzien, maar de kleurkeuze kan onwerkbaar zijn in een online omgeving. Wil je een sterk merk opbouwen, dan moet dit consistent worden gebruikt, zowel online als offline. Herkenbare kleuren en beeld zijn hierbij van essentieel belang.&lt;/p&gt;
  8099. &lt;h2&gt;6. Less is more&lt;/h2&gt;
  8100. &lt;p&gt;Uiteindelijk geldt ook hier: less is more. Een website of app met veel wit oogt rustig. Gebruik felle kleuren alleen voor kleine elementen en voor elementen die de aandacht moeten trekken, anders wordt het al snel schreeuwerig.&lt;/p&gt;
  8101. &lt;h2&gt;7. Accepteer dat kleuren er niet bij iedereen hetzelfde eruit zien&lt;/h2&gt;
  8102. &lt;p&gt;Kleur is belangrijk, heel belangrijk. Maar alsjeblieft: ga niet drie uur lopen nadenken of roze tint 1, 2, 3 of misschien toch 4 beter past in het geheel. Want sorry voor jou: niet iedereen heeft een supersonische, ultragekalibreerde topmonitor waarop de kleuren er net zo lekker uitzien als op jouw scherm. En wat te denken van de avondstand op mobiele apparaten (een fijn geel gloedje over je frisse pastelkleurtjes, joehoe!).&lt;/p&gt;
  8103. &lt;p&gt;Misschien is een deel van je doelgroep kleurenblind of slechtziend? Bij het kiezen van de juiste kleur is goed contrast dan veel belangrijker dan de laatste trends. &lt;a href=&quot;https://www.deque.com/axe/&quot;&gt;Met behulp van bijvoorbeeld Axe&lt;/a&gt; kun je in je browser kijken of de kleuren van je website voldoende contrast genereren om te voldoen aan de &lt;a href=&quot;https://www.w3.org/Translations/WCAG20-nl/&quot;&gt;richtlijnen voor toegankelijkheid van webcontent&lt;/a&gt;.&lt;/p&gt;
  8104. &lt;h2&gt;Leer meer over gebruik van kleuren&lt;/h2&gt;
  8105. &lt;p&gt;&lt;a href=&quot;https://neilpatel.com/blog/psychology-of-color-and-conversions/&quot;&gt;Neil Patel -Psychology of Colour and Conversions&lt;/a&gt;&lt;/p&gt;
  8106. &lt;p&gt;&lt;a href=&quot;https://digitaladblog.com/2013/12/27/the-meaning-of-color-in-company-logos-infographic/&quot;&gt;The meaning of colour in company logos&lt;/a&gt;&lt;/p&gt;
  8107. &lt;p&gt;&lt;a href=&quot;https://www.websitebuilderexpert.com/designing-websites/how-to-choose-color-for-your-website/&quot;&gt;How to chose colour for your website&lt;/a&gt;&lt;/p&gt;
  8108. &lt;p&gt;&lt;a href=&quot;http://www.meulenhoff.nl/nl/p4c36fcf32b2f4/15227/9789029091732/het-geheime-leven-van-kleuren.html&quot;&gt;Boek: Het geheime leven van kleuren&lt;/a&gt;&lt;/p&gt;
  8109. &lt;p&gt;&lt;a href=&quot;https://palermocafe.com/colors-make-hungry/&quot;&gt;What colours make you hungry?&lt;/a&gt;&lt;/p&gt;
  8110. &lt;h2&gt;Handige tools&lt;/h2&gt;
  8111. &lt;p&gt;&lt;a href=&quot;https://labs.tineye.com/color/&quot;&gt;https://labs.tineye.com/color/&lt;/a&gt; - haal kleuren uit een foto&lt;/p&gt;
  8112. &lt;p&gt;&lt;a href=&quot;http://www.colorzilla.com/&quot;&gt;http://www.colorzilla.com/&lt;/a&gt; - kleurenkiezer add on voor je browser. Laat ook gebruikte kleuren op een website zien.&lt;/p&gt;
  8113. &lt;p&gt;&lt;a href=&quot;https://sipapp.io/&quot;&gt;Sip colourpicker (voor de Mac)&lt;/a&gt; – betaald, maar handige offline tool om kleurenschema’s te bewaren&lt;/p&gt;
  8114. &lt;p&gt;&lt;a href=&quot;https://color.adobe.com/&quot;&gt;Adobe color cc&lt;/a&gt; – online gratis kleurenkiezer van Adobe.&lt;/p&gt;
  8115. &lt;p&gt;&lt;a href=&quot;https://www.deque.com/axe/&quot;&gt;Axe&lt;/a&gt; – kleurcontrast checker voor je browser developer toolbar.&lt;/p&gt;
  8116. &lt;h2&gt;Over Monique Dubbelman&lt;/h2&gt;
  8117. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/monique-dubbelman.jpg&quot; alt=&quot;Foto van Monique&quot; class=&quot;floating-portrait&quot; /&gt;
  8118. Monique Dubbelman is in de vorige eeuw opgeleid als grafica. Omdat dat inmiddels een fossiel beroep is, bouwt en ontwerpt ze sinds de jaren negentig websites, tegenwoordig vooral met WordPress. Eerst als hobby, vanaf 2011 als professional onder de naam BOE!media. In 2016 behaalde ze haar bachelor in Media, Informatie en Communicatie aan de Hogeschool van Amsterdam. Monique maakt zich druk over de inhoud, structuur en gebruiksvriendelijkheid van websites en vindt bovendien dat er een heldere strategie achter mag zitten. Naast UX designer noemt ze zich daarom ook digitaal of contentstrateeg. Op het internet is ze ook nog terug te vinden als wormenfluisteraar.
  8119. Donatie
  8120. Mijn donatie gaat naar Stichting No Guts No Glory. Deze stichting zamelt geld in voor behandelingen tegen kanker die nog niet vergoed worden door zorgverzekeraars. Niet door zielige verhalen te vertellen, maar door het leven te vieren met als motto: no guts no glory! Ze bieden financiële en morele steun aan kankerpatiënten en gebruiken (social) media om aandacht te vragen voor het probleem. Zij vinden namelijk dat geld geen reden mag zijn om iemand een kans op extra behandelingen te ontnemen (en ik ben het daar mee eens!).
  8121. </content>
  8122.  </entry>
  8123.  <entry>
  8124.    <title>In evenwicht</title>
  8125.    <link href="https://www.fronteers.nl/nl/blog/2018/12/in-evenwicht"/>
  8126.    <updated>2018-12-07T00:00:00Z</updated>
  8127.    <id>https://www.fronteers.nl/nl/blog/2018/12/in-evenwicht</id>
  8128.    <content xml:lang="nl" type="html">&lt;p&gt;Ons front-end vakgebied is ontzettend breed. Elke week zie ik weer iets waar ik me in wil verdiepen omdat het me interessant lijkt. Een nieuw trucje met CSS custom properties, de nieuwe versie van VueJS, het ontcijferen van Heap Snapshots in Chrome…&lt;/p&gt;
  8129. &lt;p&gt;Daarnaast heb ik dingen die ik specifiek moet weten voor m’n werk. Ik ben bekend met WordPress, Alterian, Hippo, en EpiServer. Mijn nieuwe baan is echter bij een bedrijf dat grotendeels werkt met Drupal. Drupal leren is geen kleinigheidje, er is een hoop te leren en van alleen front-end doen is geen sprake meer: PHP behoort inmiddels ook tot mijn werkzaamheden, net als bekend raken met de quirks van Drupal en de verschillende implementaties voor verschillende klanten.&lt;/p&gt;
  8130. &lt;p&gt;Verder heb ik eigen projecten waar ik mee bezig ben. Ik ben onder andere bezig met een op JavaScript gebaseerde tekenrobot en mijn domotica-huiskamer.&lt;/p&gt;
  8131. &lt;h2&gt;Spanningsveld&lt;/h2&gt;
  8132. &lt;p&gt;Er is zo veel te zien, te leren, en te doen: tijd is schaars. Maar laat dat nou ook precies de situatie zijn die ik veel zie tijdens mijn werk. Klanten willen iets binnen een bepaalde deadline online hebben, tegen een afgesproken prijs. Agile of niet: dit spanningsveld is er altijd. Voor mij en anderen in mijn omgeving resulteert dit in snel werken: als ik een beproefde manier heb om iets te maken dan doe ik dat. De techniek staat alleen niet stil in de tussentijd. Een voorbeeld: Bootstrap als gridsysteem werkt fantastisch maar CSS Grid Layouts zijn inmiddels ook in te zetten voor hetzelfde doel.&lt;/p&gt;
  8133. &lt;p&gt;Het resultaat van deze snelle of zelfs haastige manier van werken heeft vaak blije klanten tot gevolg, maar heeft ook nadelen. De klant is blij dat het binnen budget is opgeleverd maar met CSS Grid Layouts heb ik nog niets gedaan: er was simpelweg geen tijd voor om eventueel onvoorziene problemen op te lossen. Onvoorziene problemen zijn er genoeg als je een nieuwe techniek inzet. Mijn vakgebied heet dan ook Front-end &lt;em&gt;development&lt;/em&gt;. De term &#39;development&#39; impliceert al dat ik iets &lt;em&gt;ontwikkel&lt;/em&gt; en dingen tegen kan komen.&lt;/p&gt;
  8134. &lt;h2&gt;Het wiel opnieuw uitvinden&lt;/h2&gt;
  8135. &lt;p&gt;“Waarom bouw je dit filter zelf in vanilla JavaScript, terwijl je ook een jQuery plugin kan gebruiken?” is de meest recente vraag die ik kreeg die te maken had met het spanningsveld. Ik had voor deze user story (wens van de klant) bewust de keuze gemaakt dit handmatig te doen. Iets meer tijd nemen om er iets van te kunnen leren. Ik sprong er natuurlijk niet helemaal blanco in: ik heb eerder zoiets gemaakt, maar had tijdens dat project al een idee hoe het beter kon en dat wilde ik proberen.&lt;/p&gt;
  8136. &lt;p&gt;Tijdens de bouw kwam ik onvoorziene bugs tegen, waardoor het meer tijd kostte dan ik zelf had ingeschat. Ik kreeg dan ook de vraag of het al bijna klaar was. Ik had voor mezelf de juiste keuze gemaakt: ik zou wat kunnen uitzoeken/leren maar had voor de klant de minder snelle optie gekozen. Mijn idee was eerst om dit thuis uit te zoeken, zodat het geen extra tijd zou kosten voor de klant en ik iets kon leren. Raar eigenlijk, nieuwe dingen leren hoort immers bij ons werk!&lt;/p&gt;
  8137. &lt;h2&gt;Thuis doorgaan&lt;/h2&gt;
  8138. &lt;p&gt;Ik spreek online, via meetups, en tijdens conferenties veel mensen die hetzelfde werk doen als ik. Velen herkennen zich in het verhaal dat ze thuis nog dingen uitzoeken na werktijd. Logisch: veel mensen herkennen het spanningsveld dat ik omschrijf en veel zijn erg enthousiast over het werk dat ze doen.&lt;/p&gt;
  8139. &lt;p&gt;Dit is vaak niet puur en alleen enthousiasme. Vaak heeft het ook te maken heeft met een bepaalde druk die je als front-end developer kunt voelen. Online zie je de meest toffe dingen, op conferenties gaan mensen superhard, je hebt collega’s die een enorme ontwikkeling laten zien, en in vacatures worden &lt;em&gt;‘helden’&lt;/em&gt; en &lt;em&gt;‘goeroes’&lt;/em&gt; gevraagd.&lt;/p&gt;
  8140. &lt;p&gt;Ook ik was thuis dingen aan het uitzoeken en proberen. Ik zat me thuis te verdiepen in dingen als routing in React en hoe ik in vredesnaam iets opmeet in Sketch. Dingen die ik nodig heb voor werk, die ik thuis aan het bijleren was.&lt;/p&gt;
  8141. &lt;h2&gt;We verwennen onze klanten&lt;/h2&gt;
  8142. &lt;p&gt;Een van de oorzaken van de druk die ik en mensen die ik spreek voelen is dat we onze klanten verwennen. Klanten zien de waarde van ons werk niet, en dat hebben we deels zelf veroorzaakt.&lt;/p&gt;
  8143. &lt;p&gt;We kiezen in verband met tijdsdruk vaker een snelle route om binnen budget te blijven, we werken langer door om die gedoemde sprint tóch te halen, en we houden onszelf daarnaast thuis up-to-date in ons vakgebied. Begrijp me niet verkeerd; een keer is niet erg, ik heb het hier over dat ik merk dat mensen dit structureel doen.&lt;/p&gt;
  8144. &lt;p&gt;Ook de klant is deel van de oorzaak. Ons werk als front-end developer is ontzettend complex. Klanten zien vaak niet hoeveel er mis kan gaan bij bijvoorbeeld iets simpels als het toevoegen van een knop.&lt;/p&gt;
  8145. &lt;blockquote&gt;
  8146. &lt;p&gt;We shouldn’t be surprised if anything fails, we should be surprised that anything ever works at all.&lt;/p&gt;
  8147. &lt;/blockquote&gt;
  8148. &lt;h2&gt;Een andere kijk&lt;/h2&gt;
  8149. &lt;p&gt;Op een avond stonden m&#39;n ouders ineens voor de deur, ze waren bij het ziekenhuis geweest. Mijn moeder had daar de diagnose kanker gekregen.&lt;/p&gt;
  8150. &lt;p&gt;Nieuws als dit leert je relativeren. Naar aanleiding van de diagnose heb ik uiteindelijk ontslag genomen bij m&#39;n toenmalige werkgever, zonder iets nieuws te hebben. Ik trok aan de handrem. 1 januari van dit jaar was ik vrij om te doen en laten wat ik wilde. Werkloos maar heel tevreden; ik had aan de handrem getrokken door ontslag te nemen en was af van de druk om dingen snel op te leveren, maar tegelijkertijd ook bij te blijven.&lt;/p&gt;
  8151. &lt;p&gt;In deze periode ben ik gaan inzien dat je, hoeveel je ook thuis bij leert, je het nooit gaat redden. En dat er andere dingen zijn in het leven; mijn werk en privé was achteraf gezien uit balans.&lt;/p&gt;
  8152. &lt;p&gt;Ik heb inmiddels een nieuwe baan waarin ik de balans scherp in de gaten houd. Thuis is nu ook daadwerkelijk thuis, niet meer een verlengstuk van werk. Ik heb nog wel werkmail en Slack op m’n telefoon maar die zijn er &lt;em&gt;on demand&lt;/em&gt;, de push notificaties staan uit.&lt;/p&gt;
  8153. &lt;h2&gt;Inzichten&lt;/h2&gt;
  8154. &lt;p&gt;De ziekte van mijn moeder heeft me dingen laten inzien die ik anders waarschijnlijk gemist had. Altijd maar haasten bijvoorbeeld, dit werkt als een patch. Je kunt het een paar keer doen maar uiteindelijk stort de boel in omdat je niet de aandacht hebt gegeven die het verdiende. Ditzelfde geldt voor je persoonlijke ontwikkeling: besteed hier tijdens werktijd gericht aandacht aan. Spreek je werkgever erop aan als je voelt dat je niet genoeg kunt leren op de plek waar je zit. De vraag naar front-end developers is enorm, ze zouden gek zijn je te laten gaan omdat je beter wilt worden!&lt;/p&gt;
  8155. &lt;p&gt;Het meenemen van klanten in hoe complex iets kan zijn - van concept tot oplevering - helpt bij het minder gehaast werken. Er is uiteindelijk meer begrip en daarmee ook meer ruimte om eens te kunnen experimenteren voor je eigen ontwikkeling. Ook het niet halen van een sprint werd daardoor als minder erg gezien door de klanten voor wie ik heb gewerkt. Morgen weer een dag, hoe dramatisch die ook lijkt te gaan worden als iets niet afkomt.&lt;/p&gt;
  8156. &lt;p&gt;Werk is ook maar werk, durf los te laten! Na werktijd is het tijd voor wat anders. Fanatieke sporters weten: rust is ook onderdeel van de training. Zo is het ook met werk. Wat ik eigenlijk wil zeggen, is dit: let op jezelf!&lt;/p&gt;
  8157. &lt;p&gt;Nog een laatste inzicht (of eigenlijk meer een verzoek van mij) voor als je bij het kerstdiner aanschuift: Geef je familie en vrienden een extra dikke knuffel dit jaar als je ze ziet, ze zijn het waard!&lt;/p&gt;
  8158. &lt;h2&gt;Over Tom Hartwig&lt;/h2&gt;
  8159. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/tomhartwig.jpg&quot; alt=&quot;Foto van Tom Hartwig&quot; class=&quot;floating-portrait&quot; /&gt;
  8160. Tom werkt als front-end developer bij een digital agency in Haarlem, klimt graag in zijn vrije tijd, en is op Twitter te vinden als [@tmhrtwg](https://twitter.com/tmhrtwg).
  8161. Donatie
  8162. Bij elke van de adventskalender blogposts deze maand hoort een donatie aan een goed doel. Mijn donatie gaat naar KWF Kankerbestrijding. Ik ben ontzettend blij dat de behandeling van mijn moeder aansloeg en ze deze kerst nog bij ons is!
  8163. </content>
  8164.  </entry>
  8165.  <entry>
  8166.    <title>Begin met regular expressions</title>
  8167.    <link href="https://www.fronteers.nl/nl/blog/2018/12/begin-met-regular-expressions"/>
  8168.    <updated>2018-12-06T00:00:00Z</updated>
  8169.    <id>https://www.fronteers.nl/nl/blog/2018/12/begin-met-regular-expressions</id>
  8170.    <content xml:lang="nl" type="html">&lt;p&gt;Misschien dat je het wel kent: als je in je team begint over regular expressions trekken er vaak direct een aantal lijkbleek weg en beginnen er meteen een aantal anderen te kwispelen van enthousiasme. Allebei hebben ze gelijk, het is een soort superwapen. Een superwapen waarmee je soms met een regel code honderden regels code kunt besparen. In goede handen los je bondig problemen op. In de verkeerde handen leidt het tot code die niemand meer wil aanraken. Dit artikel is bedoeld als een inleiding voor die mensen die lijkbleek wegtrokken, maar nu toch wel nieuwsgierig geworden zijn.&lt;/p&gt;
  8171. &lt;h2&gt;Wat zijn regular expressions eigenlijk?&lt;/h2&gt;
  8172. &lt;p&gt;Regular expressions zijn als het ware een eigen programmeertaal met een eigen syntax. Het is een feature waarmee je eenvoudig een reeks tekens of groepen van tekens kunt herkennen. Bijvoorbeeld alle woorden in een tekst die op een ‘s’ eindigen. In haast elke programmeertaal is de basis hetzelfde. Zelfs JavaScript ondersteunt het al sinds EcmaScript 3 (1999).&lt;/p&gt;
  8173. &lt;p&gt;Een scenario waarin een regular expression van pas komt, is als je dynamische input van een formulier alvast in de front-end wilt valideren. Bijvoorbeeld een postcode. Het officiële format van een postcode is vier cijfers, een spatie en twee hoofdletters. Met regular expressions kun je eenvoudig controleren of een ingevulde postcode correct is en de gebruikers zelfs een handje helpen met het automagisch aanvullen of correct formatteren van de postcode.&lt;/p&gt;
  8174. &lt;p&gt;In JavaScript zijn regular expressions een soort object waaraan je kunt refereren in een variable.&lt;/p&gt;
  8175. &lt;pre&gt;&lt;code&gt;const mijnEigenRegExps = new RegExp(&#39;wow&#39;);
  8176. &lt;/code&gt;&lt;/pre&gt;
  8177. &lt;p&gt;De meest voorkomende vorm waarin je regular expressions in JavaScript tegenkomt, is als &lt;em&gt;literal&lt;/em&gt; regular expression welke herkenbaar is door twee forward slashes.&lt;/p&gt;
  8178. &lt;pre&gt;&lt;code&gt;const mijnEigenRegExps = /wow/;
  8179. &lt;/code&gt;&lt;/pre&gt;
  8180. &lt;p&gt;In veel (string) methods kun je een regular expression ook als argument gebruiken. Onder andere bij de methods &lt;code&gt;replace&lt;/code&gt; en &lt;code&gt;split&lt;/code&gt; is dit het geval. Dit biedt extra flexibiliteit en functionaliteit.&lt;/p&gt;
  8181. &lt;pre&gt;&lt;code&gt;&#39;Een soort superwapen&#39;.replace(&#39;super&#39;, &#39;hyper&#39;);
  8182. // &amp;quot;Een soort hyperwapen&amp;quot;
  8183.  
  8184. &#39;Een soort superwapen&#39;.replace(/super/, &#39;hyper&#39;);
  8185. // &amp;quot;Een soort hyperwapen&amp;quot;
  8186.  
  8187. &#39;Koe, schaap, kip&#39;.split(/, /);
  8188. // [&amp;quot;Koe&amp;quot;, &amp;quot;schaap&amp;quot;, &amp;quot;kip&amp;quot;]
  8189. &lt;/code&gt;&lt;/pre&gt;
  8190. &lt;h2&gt;Leer basis concept(en)&lt;/h2&gt;
  8191. &lt;p&gt;Laten we kijken of er een &lt;code&gt;a&lt;/code&gt; character in de onderstaande string staat. Met de &lt;code&gt;test&lt;/code&gt; method op een regular expression kun je eenvoudig zien of een character voorkomt in een string.&lt;/p&gt;
  8192. &lt;pre&gt;&lt;code&gt;/a/.test(&amp;quot;Content Security Policy (CSP) is an added layer of security.&amp;quot;);
  8193. // true
  8194. &lt;/code&gt;&lt;/pre&gt;
  8195. &lt;p&gt;Stel, je wil alle &lt;code&gt;a&lt;/code&gt; characters in een stukje tekst vervangen door een emoji. Daarvoor kun je de &lt;code&gt;replace&lt;/code&gt; (string) method gebruiken die zowel een string als een regexp als argument accepteert. Met een normale string loop je snel tegen limitaties op.&lt;/p&gt;
  8196. &lt;pre&gt;&lt;code&gt;const txt = &amp;quot;Content Security Policy (CSP) is an added layer of security.&amp;quot;;
  8197.  
  8198. txt.replace(&#39;a&#39;, &#39;❤️&#39;);
  8199. // &amp;quot;Content Security Policy (CSP) is ❤️n added layer of security.&amp;quot;
  8200.  
  8201. txt.replace(/a/, &#39;❤️&#39;);
  8202. // &amp;quot;Content Security Policy (CSP) is ❤️n added layer of security.&amp;quot;
  8203. &lt;/code&gt;&lt;/pre&gt;
  8204. &lt;p&gt;Met regexps heb je meer opties. Zo kun je ervoor kiezen om ‘global’ alle &lt;code&gt;a&lt;/code&gt; characters te vervangen, in plaats van slechts de eerste. Dit doe je door de global &lt;code&gt;g&lt;/code&gt; flag toe te voegen.&lt;/p&gt;
  8205. &lt;pre&gt;&lt;code&gt;txt.replace(/a/g, &#39;❤️&#39;)
  8206. // &amp;quot;Content Security Policy (CSP) is ❤️n ❤️dded l❤️yer of security.&amp;quot;
  8207. &lt;/code&gt;&lt;/pre&gt;
  8208. &lt;p&gt;Laten we nog een paar stappen verder gaan. Alle voorbeelden kun je in de console van je browser uitproberen.&lt;/p&gt;
  8209. &lt;p&gt;Als je alle &lt;code&gt;a&lt;/code&gt;, &lt;code&gt;b&lt;/code&gt; en &lt;code&gt;c&lt;/code&gt; characters wil vervangen door een smiley, dan kan dat met een character set. Als er op een plek een &lt;code&gt;a&lt;/code&gt;, &lt;code&gt;b&lt;/code&gt; of &lt;code&gt;c&lt;/code&gt; character staat, heb je een match.&lt;/p&gt;
  8210. &lt;pre&gt;&lt;code&gt;txt.replace(/[abc]/g, &#39;❤️&#39;)
  8211. // &amp;quot;Content Se❤️urity Poli❤️y (CSP) is ❤️n ❤️dded l❤️yer of se❤️urity.&amp;quot;
  8212. &lt;/code&gt;&lt;/pre&gt;
  8213. &lt;p&gt;Regular expressions zijn standaard hoofdlettergevoelig, dus de eerste C van Content wordt niet gematcht. Er zijn twee manieren om dit wel te doen: het toevoegen van de hoofdlettervarianten aan de character set of het gebruik van de &lt;code&gt;ignore case&lt;/code&gt; flag. De ignore case flag kun je gewoon naast de andere flags zetten, zoals in ons voorbeeld naast de global.&lt;/p&gt;
  8214. &lt;pre&gt;&lt;code&gt;txt.replace(/[abcABC]/g, &#39;❤️&#39;)
  8215. // &amp;quot;❤️ontent Se❤️urity Poli❤️y (CSP) is ❤️n ❤️dded l❤️yer of se❤️urity.&amp;quot;
  8216.  
  8217. txt.replace(/[abc]/gi, &#39;❤️&#39;)
  8218. // &amp;quot;❤️ontent Se❤️urity Poli❤️y (CSP) is ❤️n ❤️dded l❤️yer of se❤️urity.&amp;quot;
  8219. &lt;/code&gt;&lt;/pre&gt;
  8220. &lt;p&gt;Als je wilt, kun je in dit geval ook een character set range definiëren: alle characters vanaf a tot en met c: &lt;code&gt;[a-c]&lt;/code&gt;.&lt;/p&gt;
  8221. &lt;pre&gt;&lt;code&gt;txt.replace(/[a-c]/gi, &#39;❤️&#39;)
  8222. // &amp;quot;❤️ontent Se❤️urity Poli❤️y (CSP) is ❤️n ❤️dded l❤️yer of se❤️urity.&amp;quot;
  8223. &lt;/code&gt;&lt;/pre&gt;
  8224. &lt;p&gt;Het matchen op een character set range werkt ook voor getallen: een character set range van 1 tot en met 6 &lt;code&gt;[1-6]&lt;/code&gt; in plaats van &lt;code&gt;[123456]&lt;/code&gt;.&lt;/p&gt;
  8225. &lt;pre&gt;&lt;code&gt;&#39;06-06-1991&#39;.replace(/[1-6]/gi, &#39;❤️&#39;)
  8226. // &amp;quot;0❤️-0❤️-❤️99❤️&amp;quot;
  8227. &lt;/code&gt;&lt;/pre&gt;
  8228. &lt;p&gt;Als je groepen characters wil vervangen, kun je die tussen haakjes zetten en meerdere mogelijkheden per groepje scheiden met een vertical bar character. Bijvoorbeeld alle ‘onnodige’ woorden in deze zin.&lt;/p&gt;
  8229. &lt;pre&gt;&lt;code&gt;const txt2 = &#39;The referrer of the document in which the violation occurred.&#39;;
  8230.  
  8231. txt2.replace(/(of|the|in)/gi, &#39;❤️&#39;)
  8232. // &amp;quot;❤️ referrer ❤️ ❤️ document ❤️ which ❤️ violation occurred.&amp;quot;
  8233. &lt;/code&gt;&lt;/pre&gt;
  8234. &lt;h2&gt;Use case: valideer en autocorrect postcode&lt;/h2&gt;
  8235. &lt;p&gt;Nu je de basis van regular expressions in JavaScript onder de knie hebt, kunnen we ook eens opnieuw naar het eerder beschreven postcodeprobleem kijken.&lt;/p&gt;
  8236. &lt;p&gt;Met onderstaande code kun je controleren of de notatie van de postcode geldig is. Even ter herhaling: check voor vier cijfers, een spatie en twee hoofdletters. Het &lt;code&gt;^&lt;/code&gt; character geeft aan dat de tekst ermee moet starten en &lt;code&gt;&#92;d&lt;/code&gt; is equivalent aan de character set range &lt;code&gt;[0-9]&lt;/code&gt;. Het &lt;code&gt;$&lt;/code&gt; character geeft aan dat de match die je maakt aan het einde van de string moet zitten.&lt;/p&gt;
  8237. &lt;pre&gt;&lt;code&gt;const gebruikersInput = &#39;2384 AB&#39;;
  8238.  
  8239. /^&#92;d&#92;d&#92;d&#92;d [A-Z][A-Z]$/.test(gebruikersInput);
  8240. // true
  8241. &lt;/code&gt;&lt;/pre&gt;
  8242. &lt;p&gt;Dit voorbeeld keurt de input alleen goed als dit het juiste format heeft: 2345 AB. Variaties daarop zoals 2345ab of 2345 Ab zijn incorrect, terwijl deze inhoudelijk wel kloppen.&lt;/p&gt;
  8243. &lt;p&gt;Om dit op te vangen kun je regular expressions inzetten om de gebruikersinput te formatteren. Denk bijvoorbeeld aan het vergeten van een spatie of het gebruik van kleine letters. Daarvoor zou het onderstaande voorbeeld geschikt zijn. Hierin wordt gekeken of de input uit vier cijfers en twee letters bestaat en het &lt;code&gt;?&lt;/code&gt; character voegt een spatie toe tussen beide groepen. De letters in de postcode worden omgezet naar hoofdletters.&lt;/p&gt;
  8244. &lt;pre&gt;&lt;code&gt;const gebruikersInput2 = &#39;2345aB&#39;;
  8245.  
  8246. gebruikersInput2.replace(/^(&#92;d&#92;d&#92;d&#92;d) ?([a-z][a-z])$/i, &#39;$1 $2&#39;).toUpperCase();
  8247. // &amp;quot;2345 AB&amp;quot;
  8248. &lt;/code&gt;&lt;/pre&gt;
  8249. &lt;p&gt;Dit voorbeeld zou je ook op andere, meer efficiënte manieren kunnen oplossen, maar om het eenvoudig te houden heb ik hiervoor gekozen.&lt;/p&gt;
  8250. &lt;h2&gt;Conclusie&lt;/h2&gt;
  8251. &lt;p&gt;Met dit artikel heb je de basis van regular expressions: je kunt ze herkennen, lezen en in de basis toepassen. Eenvoudige regular expressions kunnen vele regels code schelen, maar soms kan het een onnodig ingewikkelde oplossing voor een probleem zijn of nieuwe bugs introduceren.&lt;/p&gt;
  8252. &lt;p&gt;Daarom geldt voor regular expressions hetzelfde als voor elk ander superwapen: use it wisely. Want je kunt het jezelf - en je collega&#39;s - heel snel heel moeilijk maken.&lt;/p&gt;
  8253. &lt;h2&gt;Meer weten?&lt;/h2&gt;
  8254. &lt;p&gt;Regular expressions zijn een uitgebreid onderwerp. Het kan even duren voordat je je de basisconcepten helemaal eigen hebt gemaakt, daarom zou ik aanraden om eerst een aantal introducties te lezen. Die van MDN en Eloquent JavaScript zijn een uitstekend startpunt.&lt;/p&gt;
  8255. &lt;p&gt;&lt;a href=&quot;https://eloquentjavascript.net/09_regexp.html&quot;&gt;Eloquent JavaScript&lt;/a&gt;&lt;/p&gt;
  8256. &lt;p&gt;&lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions&quot;&gt;MDN web docs over regular expressions&lt;/a&gt;&lt;/p&gt;
  8257. &lt;h2&gt;Over Melle Wynia&lt;/h2&gt;
  8258. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/melle.jpg&quot; alt=&quot;Foto van Melle Wynia&quot; class=&quot;floating-portrait&quot; /&gt;
  8259. Melle Wynia werkt als freelance front-end developer/consultant. Voor zijn klanten sluit hij aan bij hun teams om kennis over te dragen, de kwaliteit te waarborgen, beveiliging op peil te brengen en nieuwe features te realiseren. Tot zijn tools behoren onder andere Node, Angular en Vue.js.
  8260. &lt;p&gt;Donatie: de Hersenstichting&lt;/p&gt;
  8261. </content>
  8262.  </entry>
  8263.  <entry>
  8264.    <title>Twaalf geschenken van Fronteers</title>
  8265.    <link href="https://www.fronteers.nl/nl/blog/2018/12/twaalf-geschenken-van-fronteers"/>
  8266.    <updated>2018-12-05T00:00:00Z</updated>
  8267.    <id>https://www.fronteers.nl/nl/blog/2018/12/twaalf-geschenken-van-fronteers</id>
  8268.    <content xml:lang="nl" type="html">&lt;p&gt;(Vrij naar “&lt;a href=&quot;https://nl.wikipedia.org/wiki/The_Twelve_Days_of_Christmas&quot;&gt;The Twelve Days of Christmas&lt;/a&gt;”)&lt;/p&gt;
  8269. &lt;p&gt;Op de eerste dag van Kerstmis, schonk Fronteers aan mij:&lt;/p&gt;
  8270. &lt;h2&gt;Een geweldige conferentie&lt;/h2&gt;
  8271. &lt;p&gt;Mijn eerste Fronteers conferentie was in 2015. Nou ja, ik kwam de conferentie niet bezoeken, ik kwam mijn vrouw ophalen die de conferentie bezocht. Toen ik binnenkwam legde ik aan Anneke Sinnema bij de Fronteers booth uit dat ik even ergens wilde gaan zitten totdat de boel afgelopen was. Of ik een t-shirt wilde? Maar ik was geen lid. Gaf niet. Wat is je maat? Alsjeblieft.&lt;/p&gt;
  8272. &lt;p&gt;En zo heb je dan opeens een Fronteers conference t-shirt.&lt;/p&gt;
  8273. &lt;p&gt;De sfeer op de conferentie zag er zó goed uit. En Chris Heilmann gaf de closing talk, en daar had ik wel eens een artikel van gelezen… en ging ik niet meer op front-end gebied doen bij een nieuwe baan binnenkort? Misschien maar eens lid worden…&lt;/p&gt;
  8274. &lt;h2&gt;Op de tweede dag van Kerstmis, schonk Fronteers aan mij:&lt;/h2&gt;
  8275. &lt;h2&gt;Een gezellige Slack&lt;/h2&gt;
  8276. &lt;p&gt;Het komt weinig voor dat ik geen tab open heb waarin de &lt;a href=&quot;https://fronteers-slack.herokuapp.com/&quot;&gt;Fronteers Slack&lt;/a&gt; staat. Al is het maar om de gebruikelijke “Gooooeeeeedemorgen!” van honourary non-lid Robert van der Elst en de filosofische discussies in het #watercooler kanaal, tot handige tips en hulp in #js en #ui-ux. En mocht je extrovert zijn, is er de #meetandgreet. Maar vertel eerst wie je bent in #voorstelrondje!&lt;/p&gt;
  8277. &lt;h2&gt;Op de derde dag van Kerstmis, schonk Fronteers aan mij:&lt;/h2&gt;
  8278. &lt;h2&gt;Een stem die telt&lt;/h2&gt;
  8279. &lt;p&gt;Fronteers leden krijgen een stem tijdens de Algemene Leden Vergadering. Bij mijn eerste AVG werd er beslist over het door een extern bedrijf laten mee-organiseren van de jaarlijkse conferentie. Wat vooral indruk op me maakte is hoe fel en serieus de gesprekken waren. Dit was duidelijk geen club van enkel passieve leden.&lt;/p&gt;
  8280. &lt;h2&gt;Op de vierde dag van Kerstmis, schonk Fronteers aan mij:&lt;/h2&gt;
  8281. &lt;h2&gt;Een leerzame workshop&lt;/h2&gt;
  8282. &lt;p&gt;Meer dan één, eerlijk gezegd. Visualisations met Nadieh Bremer. Grid en Flexbox met Hidde de Vries. React Native met Roy Derks. Iedere keer leer ik weer nieuwe dingen die ik uiteindelijk weer kan gebruiken. En je leert van elkaar tijdens een workshop. Wie weet, misschien geef ik er zelf nog wel een keer één…&lt;/p&gt;
  8283. &lt;h2&gt;Op de vijfde dag van Kerstmis, schonk Fronteers aan mij:&lt;/h2&gt;
  8284. &lt;h2&gt;Een interessante meetup&lt;/h2&gt;
  8285. &lt;p&gt;Conferentie, workshops, en ook nog meetups? Tuurlijk! Er was er een bij Schiphol, met Ischa Gast en Tamara Forza: Schiphol toegankelijk op het web (en meer)! Een meetup bij E-sites, met Bram Smulders en Iain van der Wiel, sprekend over Schaalbaar en beheersbaar CSS! Toegankelijkheid met Karl Groves en Job van- oh wacht, dat is het volgende stukje.&lt;/p&gt;
  8286. &lt;h2&gt;Op de zesde dag van Kerstmis, schonk Fronteers aan mij:&lt;/h2&gt;
  8287. &lt;h2&gt;Een kans om te spreken&lt;/h2&gt;
  8288. &lt;p&gt;Tijdens mijn eerste conferentie (nou ja, ik was al naar de Spring Conference geweest) werd ik gevraagd of ik een keer wilde spreken over toegankelijkheid. Maar natuurlijk. Met Karl Groves, van Tenon.io? Helemaal mooi. We werkten al samen en zouden rond die tijd door Duitsland spreken bij verscheidene events, dus dit kwam helemaal goed uit. Uiteindelijk sprak ik over de typen van toegankelijkheidstooling, en waar ik verwachtte dat dingen naartoe zouden gaan in die sector.&lt;/p&gt;
  8289. &lt;h2&gt;Op de zevende dag van Kerstmis, schonk Fronteers aan mij:&lt;/h2&gt;
  8290. &lt;h2&gt;Een sponsorship&lt;/h2&gt;
  8291. &lt;p&gt;Ik co-organiseer de &lt;a href=&quot;https://www.idea11y.nl/&quot;&gt;Inclusive Design en Accessibility meetup&lt;/a&gt; en heb meegewerkt aan role=drinks. Fronteers bood aan deze meetups te sponsoren. Wauw! Dit heeft er voor gezorgd dat we interessante buitenlandse sprekers konden invliegen en voor stickers konden zorgen. Ook het huren van ruimtes voor de meetups werd hierdoor beter mogelijk. Nogmaals bedankt!&lt;/p&gt;
  8292. &lt;h2&gt;Op de achtste dag van Kerstmis, schonk Fronteers aan mij:&lt;/h2&gt;
  8293. &lt;h2&gt;Een lijst met vacatures&lt;/h2&gt;
  8294. &lt;p&gt;Niet per se iets dat ik zelf gebruik, maar ik kijk wel graag naar de vacatures om te zien wat de trends in front-end banen zijn. Voor mijzelf is het ook wel een soort “stamp of approval” om een baan bij de Fronteers Vacaturebank te zien.&lt;/p&gt;
  8295. &lt;h2&gt;Op de negende dag van Kerstmis, schonk Fronteers aan mij:&lt;/h2&gt;
  8296. &lt;h2&gt;Een manier om bij te dragen&lt;/h2&gt;
  8297. &lt;p&gt;Vorig jaar werd ik gevraagd om in het comité van de conferentie dat jaar plaats te nemen. Zeker gezien ik nog maar relatief kort lid was, een hele eer. En voor de 10e conferentie, nota bene. Maar natuurlijk wilde ik graag deelnemen. Het samenstellen van de onderwerplijst, potentiële sprekers, het thema - er was veel te doen. En er is ook veel gedaan. En uiteindelijk was het een pracht van een conferentie.&lt;/p&gt;
  8298. &lt;h2&gt;Op de tiende dag van Kerstmis, schonk Fronteers aan mij:&lt;/h2&gt;
  8299. &lt;h2&gt;Een stem binnen het W3C&lt;/h2&gt;
  8300. &lt;p&gt;Als front-end vakvereniging is het een puik idee om binnen een standards body als het W3C een stem te hebben. Browserfabrikanten representeren een groot gedeelte van de stemmen, dus waarom geen ontwikkelaars? Tijdens de Algemene Leden Vergadering werd hier over gesproken en vóór gestemd. Fronteers, en wij als leden, hebben nu invloed binnen het W3C. Een goede ontwikkeling, als je het mij vraagt.&lt;/p&gt;
  8301. &lt;h2&gt;Op de elfde dag van Kerstmis, schonk Fronteers aan mij:&lt;/h2&gt;
  8302. &lt;h2&gt;Een leuke korting&lt;/h2&gt;
  8303. &lt;p&gt;Ik werk binnen digitale toegankelijkheid, en bezoek graag het Nationaal Congres Digitale Toegankelijkheid. En wat bleek - Fronteers leden kregen dit jaar korting. Een leuke verrassing. Ook konden leden recentelijk korting krijgen tot An Event Apart boeken. Ik heb de meeste al, anders had ik zeker deelgenomen. Ook kortingen op andere conferenties zoals Performance.now() kwam recent voorbij.&lt;/p&gt;
  8304. &lt;h2&gt;Op de twaalfde dag van Kerstmis, schonk Fronteers aan mij:&lt;/h2&gt;
  8305. &lt;h2&gt;Een geweldige community&lt;/h2&gt;
  8306. &lt;p&gt;Fronteers bestaat door haar leden. Soms vragen leden zich af wat Fronteers &lt;em&gt;is&lt;/em&gt;, behalve een vakvereniging die een conferentie organiseert (en workshops, en meetups). Persoonlijk vind ik het überhaupt al goed dat een vereniging als Fronteers bestaat, waar je lid van bent als je je werk als front-end ontwikkelaar serieus neemt, en van elkaar leert. Dat betekent niet dat we niet naar de toekomst kunnen kijken - het lidmaatschap van W3C is daar een goed voorbeeld van.&lt;/p&gt;
  8307. &lt;p&gt;Ik ben benieuwd wat Fronteers haar leden in 2019 zal schenken, en aan welke dingen ik zelf zal bijdragen.&lt;/p&gt;
  8308. &lt;p&gt;Fijne feestdagen!&lt;/p&gt;
  8309. &lt;h2&gt;Over Job van Achterberg&lt;/h2&gt;
  8310. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/job.jpg&quot; alt=&quot;Foto van Job van Achterberg&quot; class=&quot;floating-portrait&quot; /&gt;
  8311. Job werkt als toegankelijkheidsspecialist (mooi Scrabblewoord) en ontwikkelaar bij Tenon (https://www.tenon.io). Hij gooit met slangen en water bij de vrijwillige brandweer.
  8312. &lt;p&gt;Donatie: Stichting Lezen en Schrijven&lt;/p&gt;
  8313. </content>
  8314.  </entry>
  8315.  <entry>
  8316.    <title>Pump up the JAM</title>
  8317.    <link href="https://www.fronteers.nl/nl/blog/2018/12/pump-up-the-jam"/>
  8318.    <updated>2018-12-04T00:00:00Z</updated>
  8319.    <id>https://www.fronteers.nl/nl/blog/2018/12/pump-up-the-jam</id>
  8320.    <content xml:lang="nl" type="html">&lt;p&gt;In de jaren dat ik werk als front-end developer, en ook in mijn tienerjaren als hobby, heb ik vele sites ontwikkeld in een heel scala aan frameworks en CMS’en. De bekendste CMS’en waar ik mee heb gewerkt zijn toch wel WordPress, Drupal en Sitecore. Maar hoe verschillend al deze traditionele CMS’en ook zijn, hoe je er in de basis een website mee ontwikkelt blijft vrijwel hetzelfde:&lt;/p&gt;
  8321. &lt;p&gt;Zet een installatie op van het CMS, begin de paginatypes en content daarin te definiëren en maak templates waarmee je de content mee presenteert. Voor veel sites werkt deze werkwijze ook gewoon prima, gezien de hoeveelheid websites er sinds jaar en dag op deze manier ontwikkeld zijn.&lt;/p&gt;
  8322. &lt;h2&gt;Jack of all trades…&lt;/h2&gt;
  8323. &lt;p&gt;Gevolg van deze werkwijze is dat &lt;em&gt;alles en iedereen&lt;/em&gt; met dit CMS moet (leren) werken om er een site mee te ontwikkelen.&lt;/p&gt;
  8324. &lt;p&gt;Simpel gezegd moeten er onder andere:&lt;/p&gt;
  8325. &lt;ul&gt;
  8326. &lt;li&gt;Content editors leren omgaan met de editor van het CMS;&lt;/li&gt;
  8327. &lt;li&gt;Back-end developers het CMS uitbreiden om gewenste pagina’s en gegevens te kunnen beheren;&lt;/li&gt;
  8328. &lt;li&gt;Front-end developers de ‘internals’ van het CMS leren omgaan met diens template-taal (of afwezigheid daarvan);&lt;/li&gt;
  8329. &lt;li&gt;Hosting en ontwikkelomgevingen moeten opgezet en ingericht worden zodat het CMS kan draaien.&lt;/li&gt;
  8330. &lt;/ul&gt;
  8331. &lt;p&gt;Zoals je ziet draaien alle onderdelen van een website om dit ene punt heen: het traditionele CMS. Alles is &lt;em&gt;&lt;em&gt;tightly coupled&lt;/em&gt;&lt;/em&gt;.&lt;/p&gt;
  8332. &lt;p&gt;Dat is gelijk de keerzijde van het tradtionele CMS, ze zijn vaak heel generalistisch. Zodra er iets ontwikkeld moet worden dat niet matcht met wat het systeem standaard biedt, dan kan het zijn dat dit niet zonder slag of stoot mogelijk is en je bent overgeleverd aan bijvoorbeeld een hoop plugins of een flinke tijdsinvestering om het zelf te ontwikkelen.&lt;/p&gt;
  8333. &lt;p&gt;Dit type CMS kunnen we om deze redenen een &lt;em&gt;&lt;em&gt;jack of all trades, master of none&lt;/em&gt;&lt;/em&gt; noemen.&lt;/p&gt;
  8334. &lt;h2&gt;Hit the road, Jack&lt;/h2&gt;
  8335. &lt;p&gt;Vrij recentelijk zijn er ook andere soorten CMS’en op de markt gekomen, het zogenaamde headless of decoupled CMS. Dit type CMS is gericht op maar één ding: het gemakkelijk beheren en opslaan van content en data.&lt;/p&gt;
  8336. &lt;p&gt;Het grote verschil met het traditionele CMS is dat een headless CMS geen pagina’s serveert aan bezoekers, maar de content die erin is opgeslagen alleen beschikbaar maakt via een API. Deze API kan dan door andere systemen aangesproken worden om toegang te krijgen tot deze content om er uiteindelijk pagina’s voor te serveren. Op deze manier zijn het beheer en opslag van content volledig ontkoppeld van de uiteindelijke presentatie ervan.&lt;/p&gt;
  8337. &lt;p&gt;Dit geeft mogelijkheden tot het ontwikkelen van de front-end, aangezien je op deze manier niet beperkt bent tot alleen de features die het CMS (en diens plugins/modules) aanbiedt. Er is meer vrijheid om precies de onderdelen te ontwikkelen zoals ze nodig zijn voor het project waar je aan werkt. Aan de andere kant kan dit wel arbeidsintensiever zijn dan bouwen op een traditioneel CMS, omdat er over zaken nagedacht moet worden die met een traditioneel CMS al uit handen worden genomen, zoals routing, caching, meertaligheid, URL-opbouw, etc.&lt;/p&gt;
  8338. &lt;h2&gt;🍓 Pump up the JAM 🍓&lt;/h2&gt;
  8339. &lt;p&gt;Stel, er is voor het project waar je aan werkt gekozen voor een headless CMS, hoe ga je daar dan mee aan de slag? Hoe zorg je ervoor dat er een website is, een front-end, waar de content die in het CMS zit op gepresenteerd wordt?&lt;/p&gt;
  8340. &lt;p&gt;Daar komt de &lt;em&gt;‘JAM stack’&lt;/em&gt; om de hoek kijken. Maar wat is dan precies de JAM stack?&lt;/p&gt;
  8341. &lt;blockquote&gt;
  8342. &lt;p&gt;A modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.&lt;/p&gt;
  8343. &lt;/blockquote&gt;
  8344. &lt;p&gt;Websites gebouwd op basis van de JAM stack worden veelal ontwikkeld met een static site generator, zoals bv. Jekyll, Hugo of Gatsby. Nu denk je misschien: “Statische sites? Maar hoe ga ik dan om met dynamische content? En hoe zit het met formulieren? Of webshops?”.&lt;/p&gt;
  8345. &lt;p&gt;Dat is waar een headless CMS en de JAM stack samenkomen, de ‘reusable APIs’. Static site generators kunnen namelijk de content uitlezen uit de API van het headless CMS! Deze content kan je dan gebruiken om statische pagina’s mee te genereren, zodat je nog steeds dynamische content hebt. Maar in tegenstelling tot traditionele CMS’en zijn beide systemen nu van elkaar gescheiden, oftewel &lt;em&gt;&lt;em&gt;decoupled&lt;/em&gt;&lt;/em&gt;.&lt;/p&gt;
  8346. &lt;p&gt;Dit zorgt ervoor dat elk systeem (CMS, hosting, front-end, etc.) minder sterk afhankelijk is van elkaar en er andere, betere keuzes gemaakt kunnen worden.&lt;/p&gt;
  8347. &lt;h2&gt;⚡️ De voordelen van statisch ⚡️&lt;/h2&gt;
  8348. &lt;p&gt;Een statische site heeft ten opzichte van een dynamisch gegenereerde site (direct uit het CMS) een aantal &lt;em&gt;flinke&lt;/em&gt; voordelen. Statische sites zijn:&lt;/p&gt;
  8349. &lt;p&gt;&lt;em&gt;Sneller&lt;/em&gt; Sites worden opgebouwd tot simpele statische HTML files. Bestanden lezen en serveren is supersnel, er hoeft immers geen hele applicatie te draaien of op te starten om een request af te handelen.&lt;/p&gt;
  8350. &lt;p&gt;&lt;em&gt;Veiliger&lt;/em&gt; Omdat er op de server geen back-end code of database aangesproken hoeft te worden om een verzoek af te handelen, is de site ook een stuk minder vatbaar voor aanvallen als XSS en SQL injection.&lt;/p&gt;
  8351. &lt;p&gt;&lt;em&gt;Schaalbaarder&lt;/em&gt; Het opzetten van servers en hosting die statische files serveren is flink simpeler op te zetten en op te schalen bij grote hoeveelheden verkeer. In principe is elke vorm van hosting voldoende, omdat er alleen maar files verstuurd hoeven te worden. Er draait geen server-side CMS of framework wanneer er een verzoek binnenkomt op de server.&lt;/p&gt;
  8352. &lt;p&gt;&lt;em&gt;Bevrijdend&lt;/em&gt; Er is meer vrijheid om de juiste tools en technieken te kiezen voor de front-end van de website of applicatie. De front-end is veel minder afhankelijk van achterliggende technieken zoals een CMS of framework met een eigen template engine.&lt;/p&gt;
  8353. &lt;h2&gt;Ooh shiny! Can I touch?&lt;/h2&gt;
  8354. &lt;p&gt;Klinkt goed toch? Dat dacht ik ook! 😉&lt;/p&gt;
  8355. &lt;p&gt;Maar hoe gaan we er nu mee aan de slag? Daar zijn verschillende combinaties in mogelijk, zodat je de keuze hebt wat er het beste bij jouw project past. Ik ga niet verder op alle opties in, dat zou materiaal zijn voor nog een serie blogposts! Maar hieronder zal ik een aantal opties noemen:&lt;/p&gt;
  8356. &lt;p&gt;&lt;em&gt;CMS&lt;/em&gt; &lt;a href=&quot;https://www.contentful.com/&quot;&gt;Contentful&lt;/a&gt;, &lt;a href=&quot;https://prismic.io/&quot;&gt;Prismic&lt;/a&gt;, &lt;a href=&quot;https://graphcms.com/&quot;&gt;GraphCMS&lt;/a&gt;, &lt;a href=&quot;https://www.netlifycms.org/&quot;&gt;Netlify CMS&lt;/a&gt;&lt;/p&gt;
  8357. &lt;p&gt;&lt;em&gt;Static site generator&lt;/em&gt; &lt;a href=&quot;https://gohugo.io/&quot;&gt;Hugo&lt;/a&gt;, &lt;a href=&quot;https://jekyllrb.com/&quot;&gt;Jekyll&lt;/a&gt;, &lt;a href=&quot;https://www.gatsbyjs.org/&quot;&gt;Gatsby&lt;/a&gt;&lt;/p&gt;
  8358. &lt;p&gt;&lt;em&gt;Formulieren&lt;/em&gt; &lt;a href=&quot;https://www.wufoo.com/&quot;&gt;Wufoo&lt;/a&gt;, &lt;a href=&quot;https://www.typeform.com/&quot;&gt;Typeform&lt;/a&gt;, &lt;a href=&quot;https://www.netlify.com/features/#forms&quot;&gt;Netlify Forms&lt;/a&gt;&lt;/p&gt;
  8359. &lt;p&gt;&lt;em&gt;Authenticatie&lt;/em&gt; &lt;a href=&quot;https://auth0.com/&quot;&gt;Auth0&lt;/a&gt;, &lt;a href=&quot;https://oauth.net/&quot;&gt;OAuth&lt;/a&gt;, &lt;a href=&quot;https://www.netlify.com/features/#identity&quot;&gt;Netlify Identity&lt;/a&gt;&lt;/p&gt;
  8360. &lt;p&gt;&lt;em&gt;Webshops&lt;/em&gt; &lt;a href=&quot;https://www.shopify.com/&quot;&gt;Shopify&lt;/a&gt;, &lt;a href=&quot;http://stripe.com/&quot;&gt;Stripe&lt;/a&gt;&lt;/p&gt;
  8361. &lt;p&gt;&lt;em&gt;Hosting&lt;/em&gt; &lt;a href=&quot;https://zeit.co/&quot;&gt;Zeit&lt;/a&gt;, &lt;a href=&quot;https://cloud.google.com/&quot;&gt;Google Cloud&lt;/a&gt;, &lt;a href=&quot;https://aws.amazon.com/&quot;&gt;Amazon AWS&lt;/a&gt;, &lt;a href=&quot;https://www.netlify.com/features/&quot;&gt;Netlify&lt;/a&gt;&lt;/p&gt;
  8362. &lt;p&gt;Zoals je ziet is er ruime keuze in het hele ecosysteem om services en tools te kiezen die precies bij jouw project passen.&lt;/p&gt;
  8363. &lt;p&gt;Zelf ben ik erg fan van de combinatie Netlify + Gatsby + Contentful (of Netlify CMS). Het zijn systemen die erg makkelijk zijn op te zetten, een goede community en een rijk ecosysteem hebben.&lt;/p&gt;
  8364. &lt;p&gt;Hopelijk heb ik je hiermee geīnspireerd om er zelf een keer mee aan de slag te gaan. Kom je ergens niet uit? Kom even langs in de &lt;a href=&quot;https://fronteers-slack.herokuapp.com/&quot;&gt;Fronteers Slack&lt;/a&gt; en stel gerust je vraag!&lt;/p&gt;
  8365. &lt;h2&gt;Over Iain van der Wiel&lt;/h2&gt;
  8366. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/iain.png&quot; alt=&quot;Foto van iain&quot; class=&quot;floating-portrait&quot; /&gt;
  8367. Iain van der Wiel is een front-end developer bij Frontmen in Eindhoven. Met passie voor UX, standaarden en toegankelijkheid probeert hij elke dag het web ietsje beter te maken. Tevens is hij Fronteers Slack coryfee. 😄
  8368. Donatie
  8369. Mijn donatie gaat naar de Hersenstichting. Een kwart van de mensen in Nederland heeft in meer of mindere mate een hersenaandoening. De Hersenstichting steunt onderzoek, voorlichting en ondersteuning voor deze grote groep mensen.)
  8370. </content>
  8371.  </entry>
  8372.  <entry>
  8373.    <title>Inclusive Design is Design</title>
  8374.    <link href="https://www.fronteers.nl/nl/blog/2018/12/inclusive-design-is-design"/>
  8375.    <updated>2018-12-03T00:00:00Z</updated>
  8376.    <id>https://www.fronteers.nl/nl/blog/2018/12/inclusive-design-is-design</id>
  8377.    <content xml:lang="nl" type="html">&lt;p&gt;Als men het over een toegankelijk en inclusive website heeft, gaat dit vaak over dat de website goed te gebruiken is voor mensen die schermlezers gebruiken en mensen die kleurenblind of slechtziend zijn. Het betekent vaak ook dat de website goed te gebruiken is met alleen een toetsenbord zonder een muis.&lt;/p&gt;
  8378. &lt;p&gt;Vaak gaan talks, blogs en slack channel chats over: wanneer ARIA te gebruiken, hoe te gebruiken, goede HTML-structuur, CSS tips (denk aan: class ‘screenreaders’), kleurcontrasten en lettertypes die goed leesbaar zijn. Er is een boel te leren en te delen met elkaar over deze onderwerpen.&lt;/p&gt;
  8379. &lt;p&gt;Dit is een grote vooruitgang ten opzichte van niet zo lang geleden toen we daar nog niet echt over nadachten.&lt;/p&gt;
  8380. &lt;p&gt;Maar inclusive design is veel meer dan structuur, code en kleur alleen. Inclusive design gaat om het geheel van je website - het gaat om de algehele ervaring van de gebruiker als ze een website bezoeken.&lt;/p&gt;
  8381. &lt;h2&gt;Het noninclusive internet&lt;/h2&gt;
  8382. &lt;p&gt;In mijn eigen ervaring als iemand die altijd slechthorend was en langzamerhand helemaal doof is geworden, kom ik dagelijks situaties tegen die voor mij niet toegankelijk of inclusief zijn. Ik heb niks aan een goed gecodeerd formulier dat perfect werkt met een schermlezer en tabtoets als het formulier het verplicht maakt om een telefoonnummer in te vullen en tevens geen veld heeft voor een korte toelichting of een keuze hoe ik wil communiceren: e-mail, SMS of WhatsApp.&lt;/p&gt;
  8383. &lt;p&gt;Als ik online bij de gemeente een afspraak maak om grofvuil op te halen, kan dat makkelijk. Maar dan krijg ik een no-reply bevestigingsmail en is het alleen mogelijk telefonisch contact op te nemen mocht er iets aan de hand zijn.&lt;/p&gt;
  8384. &lt;p&gt;Jarenlang was online eten bestellen noninclusive. Je had een ruime keuze aan restaurants, betalen met contant, creditcard, iDeal, PayPal en zelf bitcoins. Maar er was geen veld voor een toelichting en alleen telefonisch contact mogelijk als er iets fout is gegaan met de bestelling.&lt;/p&gt;
  8385. &lt;p&gt;Een veld voor toelichting bij een eten-bestelpagina (en alle contactpagina’s) is niet alleen inclusive voor iemand die wilt aangeven dat ze doof zijn en liever een SMS ontvangen in plaats van een belletje. Maar ook voor iedereen die een voedselallergie heeft en zeker wilt zijn dat ze niet ziek worden van het eten.&lt;/p&gt;
  8386. &lt;h2&gt;Inclusive design is ook taal en beeld&lt;/h2&gt;
  8387. &lt;p&gt;Veel online winkels denken niet echt na over wat hun doelgroep is met als gevolg dat hun website een groot deel van de doelgroep niet aanspreekt.&lt;/p&gt;
  8388. &lt;p&gt;Neem eens een website die hoorapparaten verkoopt. Op de stockfoto’s staan alleen ouderen afgebeeld. Ik was 12 jaar toen ik mijn eerste paar hoorapparaten kreeg. Slechthorendheid is een beperking die in iedere leeftijdsgroep voorkomt. Als ik vandaag nog baat had met hoorapparaten dan zou ik zeker meer aandacht (en geld) besteden aan de website die mij aanspreekt. (Voorbeeld geen rekening houden met wie doelgroep echt is: &lt;a href=&quot;https://www.specsavers.nl/horen&quot;&gt;https://www.specsavers.nl/horen&lt;/a&gt;)&lt;/p&gt;
  8389. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/specsavers.jpg&quot; alt=&quot;Voorbeeld geen rekening houden met wie doelgroep echt is: Specsavers&quot; /&gt;&lt;/p&gt;
  8390. &lt;p&gt;Hoe vaak hebben we zuchtend een blog gelezen over een onderwerp dat nieuw voor ons was. We wilden er meer over weten, maar de schrijver gebruikte veel moeilijke en ingewikkelde zinnen. Er is zoveel te lezen en te doen online dat het teveel energie vergt om online een tekst te gaan lezen die te ingewikkeld is geschreven, terwijl dat niet hoeft. Stel iemand is bezig met een medisch behandeling die stress met zich brengt, hun geheugen aantast en dan komen ze een website tegen met lange zinnen en moeilijke woorden. Zo’n website is noninclusive voor hen.&lt;/p&gt;
  8391. &lt;h2&gt;Design voor iedereen&lt;/h2&gt;
  8392. &lt;p&gt;Als je websites bouwt, kijk verder dan je structuur, code en kleuren. Het kan 100% scoren in de Axe test, Lighthouse audit, Tenon.io en dergelijke, maar toch enorm frustrerend zijn voor veel bezoekers. De beste test tools zijn mensen: een diverse groep mensen. Inclusive design is design. Er bestaat geen mens die niet profiteert van inclusive design.&lt;/p&gt;
  8393. &lt;h2&gt;Over Darice de Cuba&lt;/h2&gt;
  8394. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/darice-de-cuba-2018.jpg&quot; alt=&quot;Foto van Daroce&quot; /&gt;
  8395. Darice is front-end developer en ervaringsdeskundige met een focus op inclusive design. Ze schrijft regelmatig over inclusive design voor doven en slechthorenden op [darice.org](https://darice.org). Als je meer wilt weten over inclusive design kan je contact nemen met @Darice via Twitter.
  8396. Donatie
  8397. De Nierstichting zet zich in om de levenskwaliteit van nierpatiënten te verbeteren, informatie geven aan mensen om nierschade te voorkomen en onderzoek voor betere behandelingen en genezing. [www.nierstichting.nl](https://www.nierstichting.nl))
  8398. </content>
  8399.  </entry>
  8400.  <entry>
  8401.    <title>Code in style!</title>
  8402.    <link href="https://www.fronteers.nl/nl/blog/2018/12/code-in-style"/>
  8403.    <updated>2018-12-02T00:00:00Z</updated>
  8404.    <id>https://www.fronteers.nl/nl/blog/2018/12/code-in-style</id>
  8405.    <content xml:lang="nl" type="html">&lt;p&gt;In een perfecte wereld schrijven we allemaal code zonder bugs, onduidelijkheden of stijlfouten. Discussies over spaties, tabs, haakje-op-dezelfde-regel-of-juist-op-die-eronder bestaan alleen in de fantasieboeken die we aan onze kinderen voorlezen. In een perfecte wereld bestaat alleen perfecte code.&lt;/p&gt;
  8406. &lt;p&gt;Maar ja, wij leven in de realiteit. In de realiteit schrijven we onze code niet allemaal op dezelfde manier en is onze code zeker niet foutloos!&lt;/p&gt;
  8407. &lt;p&gt;Wanneer we in teams werken aan dezelfde codebase, is het hebben van verschillende schrijfstijlen bijna problematisch. In plaats van het werken aan nieuwe functionaliteit, of het reactoren van oude code, verspillen we tijd aan het begrijpen van onlogische code en constructies. Tijd die we veel beter kunnen besteden.&lt;/p&gt;
  8408. &lt;p&gt;Om deze reden bestaan er coding styleguides. Deze richtlijnen geven aan in welke stijl de code moet worden geschreven in een team. De regels gaan vooral over de leesbaarheid en consistentie van code. Hierdoor hebben we minder tijd nodig om wat we lezen te ontleden in ons hoofd en kunnen we sneller begrijpen wat er bestaat.&lt;/p&gt;
  8409. &lt;p&gt;In mijn werk was het maken van een coding styleguide tot voor kort iets dat “later altijd nog kan”. Ik werkte als enige front-ender in een team dat bestaat uit onder meer back-enders en een business analist. Recentelijk heeft één van mijn teamleden besloten zich meer op full-stack te richten. Dit bracht de coding styleguide vrijwel meteen van de dit-komt-nog-wel-stapel naar de dit-moeten-we-nu-gaan-hebben-stapel.&lt;/p&gt;
  8410. &lt;h2&gt;Let’s go!&lt;/h2&gt;
  8411. &lt;p&gt;Dit brengt mij naar het onderwerp van deze post: hoe zet je een coding styleguide op in je team? De manier die ik hier beschrijf, is niet de enige, maar gebruik het als leidraad als je zelf in deze situatie komt. We zijn er zelf nog steeds hard mee bezig, maar een aantal stappen zijn inmiddels al wel duidelijk. Let wel op: in deze post richt ik me op JavaScript.&lt;/p&gt;
  8412. &lt;p&gt;Het maken van een coding styleguide bestaat grofweg uit de volgende stappen:&lt;/p&gt;
  8413. &lt;ul&gt;
  8414. &lt;li&gt;Stel de lint regels op.&lt;/li&gt;
  8415. &lt;li&gt;Configureer deze regels in een lint tool.&lt;/li&gt;
  8416. &lt;li&gt;Configureer Babel (meestal op basis van je &lt;code&gt;browserslist&lt;/code&gt;).&lt;/li&gt;
  8417. &lt;/ul&gt;
  8418. &lt;p&gt;We gaan door ieder punt heen lopen. Op het einde volgt er natuurlijk een codevoorbeeld. De code in dit artikel is terug te vinden op &lt;a href=&quot;https://github.com/lodybo/code-in-style-examples&quot;&gt;GitHub&lt;/a&gt;.&lt;/p&gt;
  8419. &lt;h2&gt;It’s not code, they’re more what you’d call “guidelines”&lt;/h2&gt;
  8420. &lt;p&gt;De eerste stap is het precies afspreken volgens welke regels de code geschreven wordt. Het is aan te raden om dit zoveel mogelijk met het hele team af te tikken in een meeting (oké... het worden er waarschijnlijk meer dan één).&lt;/p&gt;
  8421. &lt;p&gt;Een andere tactiek is het pakken van een bestaande styleguide en bij iedere regel bekijken of je het ermee eens bent. Zo niet, wat zou je eraan veranderen? Dit is handig als niet iedereen tijd heeft, of als er maar een paar mensen zijn die het schrijven van een styleguide als taak hebben. Wanneer je een voorstel hebt geschreven op basis van de bestaande styleguide, is het zaak om deze met het hele team door te spreken. Best practices kan je zo makkelijk introduceren, maar het blijft aan het team om te bepalen of ze die willen volgen.&lt;/p&gt;
  8422. &lt;p&gt;Wij baseren onze styleguide op die van Airbnb. Het handige aan hun styleguide is hoe gedetailleerd hij is. Niet alle regels hebben we overgenomen (sommige zijn niet eens van toepassing bij onze applicaties), maar in het gesprek met het hele team kunnen we wel uitleggen wáárom we die keuzes hebben gemaakt.&lt;/p&gt;
  8423. &lt;p&gt;Wat essentieel is: zorg dat de verantwoordelijkheid van de styleguide duidelijk is vastgelegd. Styleguides die achterlopen kunnen misschien wel schadelijker zijn voor code quality dan géén styleguide. Degene die deze verantwoordelijkheid draagt moet zich dan ook geroepen voelen dit bij te houden en &lt;em&gt;het team er op te wijzen als dit niet wordt nageleefd&lt;/em&gt;.&lt;/p&gt;
  8424. &lt;h2&gt;Lint All The Code!&lt;/h2&gt;
  8425. &lt;p&gt;Dus, je hebt nu een document met alle regels voor je JavaScript code? Goed, dan gaan we nu instellen dat de linter de codebase ook daadwerkelijk inspecteert of deze regels worden nageleefd. Wij gebruiken ESLint om de code te inspecteren op schrijf- en stijlfouten. Uiteindelijk is het doel om op deze manier kleine foutjes te voorkomen (zoals het gebruiken van een ongedefinieerde variabele) en om consistente code te gebruiken. Er zijn meerdere manieren om ESLint in te zetten, zo zijn er mensen die iedere keer dat ze opslaan de linter draaien in de command line (guilty as charged...). Anderen stellen hun code editor of IDE in alles te linten en weer te geven tijdens het typen. En weer anderen gebruiken ESLint in combinatie met Prettier om hun code automatisch te formatten bij het opslaan. Maak hier gezamenlijk afspraken over zodat degene die de styleguide beheert, weet met welke voorkeuren hij rekening moet houden.&lt;/p&gt;
  8426. &lt;h2&gt;Shareable configuration&lt;/h2&gt;
  8427. &lt;p&gt;ESLint heeft een lijst &lt;a href=&quot;https://eslint.org/docs/rules/&quot;&gt;met alle regels&lt;/a&gt; die ondersteund worden. Deze regels kunnen met nummers geconfigureerd worden om niet af te gaan (“0”), een waarschuwing te geven (“1”) of een fout op te gooien (“2”). Het configureren van ESLint gaat door middel van een configuration file (zoals &lt;code&gt;.eslintrc&lt;/code&gt;). Ieder project dat via ESLint gelint wordt maakt dan gebruik van die configuratie.&lt;/p&gt;
  8428. &lt;p&gt;Maar... dat moeten we dan met de hand bijhouden en kopiëren?&lt;/p&gt;
  8429. &lt;p&gt;Gelukkig niet! ESLint ondersteunt het gebruik van &lt;a href=&quot;https://eslint.org/docs/developer-guide/shareable-configs&quot;&gt;“shareable configs”&lt;/a&gt;. Het voordeel van shareable configs is dat deze te publishen zijn in een &lt;code&gt;npm&lt;/code&gt; registry. Dit is perfect in het onderhouden van een styleguide, omdat de configuratie niet iedere keer gekopieerd wordt en daardoor snel achterloopt. Het enige wat je teamleden hoeven te doen, is de styleguide definiëren als een &lt;code&gt;devDependency&lt;/code&gt;.&lt;/p&gt;
  8430. &lt;p&gt;Later gaan we een voorbeeld hiervan bekijken.&lt;/p&gt;
  8431. &lt;h2&gt;The Power of Babel&lt;/h2&gt;
  8432. &lt;p&gt;Babel wordt gebruikt om transformaties op je code uit te voeren. Babel &lt;em&gt;transpilet&lt;/em&gt; ES2015+ JavaScript naar bijv. ES5 JavaScript die oudere browsers kunnen begrijpen. Deze browsers komen meestal uit een &lt;code&gt;browserslist&lt;/code&gt; en kan je in je project definiëren, maar slimme developers zorgen er natuurlijk voor dat de &lt;code&gt;browserslist&lt;/code&gt; onderdeel wordt van de styleguide!&lt;/p&gt;
  8433. &lt;p&gt;Babel kan je configureren om een aantal presets en/of plugins te gebruiken om je code te &lt;em&gt;transpilen&lt;/em&gt;. Een Babel preset is een verzameling van andere presets en plugins, en als dat nou nét zo klinkt als de shareable configs van ESLint dan heb je het goed: je kan je eigen &lt;a href=&quot;https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/user-handbook.md#making-your-own-preset&quot;&gt;Babel presets maken&lt;/a&gt;.&lt;/p&gt;
  8434. &lt;p&gt;Babel presets hebben dezelfde voordelen als ESLints shareable configs: het zijn &lt;code&gt;npm&lt;/code&gt; modules die je kan publishen in de &lt;code&gt;npm&lt;/code&gt; registry (zowel de publieke als de lokale variant als je team die gebruikt). Projecten hoeven dan alleen je preset als een &lt;code&gt;devDependency&lt;/code&gt; op te geven.&lt;/p&gt;
  8435. &lt;h2&gt;Practicum&lt;/h2&gt;
  8436. &lt;p&gt;Na al deze theorie is het tijd om dit in de praktijk te gaan gebruiken. Eerder in dit artikel vertelde ik al dat de sharable config van ESLint en de presets van Babel eigenlijk niks meer zijn dan kleine &lt;code&gt;npm&lt;/code&gt; modules. In het practicum maken we een kleine shareable config van één regel voor ESLint, en een Babel preset met één plugin. We gebruiken deze vervolgens in ons testproject.&lt;/p&gt;
  8437. &lt;p&gt;Om dit practicum te volgen heb je het volgende nodig:&lt;/p&gt;
  8438. &lt;ul&gt;
  8439. &lt;li&gt;Node (ik gebruik versie 8.9.1)&lt;/li&gt;
  8440. &lt;li&gt;Een code editor of IDE (ik gebruik - heel origineel - VS Code).&lt;/li&gt;
  8441. &lt;/ul&gt;
  8442. &lt;h2&gt;Setup&lt;/h2&gt;
  8443. &lt;p&gt;Om te beginnen maken we drie mappen:&lt;/p&gt;
  8444. &lt;ul&gt;
  8445. &lt;li&gt;&lt;code&gt;eslint-config-custom-team-rules/&lt;/code&gt;: in dit project definiëren we onze shareable config&lt;/li&gt;
  8446. &lt;li&gt;&lt;code&gt;babel-preset-custom-team-preset/&lt;/code&gt;: in dit project schrijven we onze eigen Babel preset.&lt;/li&gt;
  8447. &lt;li&gt;&lt;code&gt;test-project/&lt;/code&gt;: in dit project gebruiken we bovenstaande “styleguide” op de source code.&lt;/li&gt;
  8448. &lt;/ul&gt;
  8449. &lt;p&gt;Ja, de namen van de mappen zijn niet erg spannend. Deal with it.&lt;/p&gt;
  8450. &lt;h2&gt;ESLint and the Shareable Configs&lt;/h2&gt;
  8451. &lt;p&gt;We beginnen met het schrijven van onze shareable config in ESLint. Hierbij gaan we naar de &lt;code&gt;eslint-config-custom-team-rules&lt;/code&gt; map en maken we een &lt;code&gt;npm&lt;/code&gt; module aan:&lt;/p&gt;
  8452. &lt;pre&gt;&lt;code&gt;$ cd eslint-config-custom-team-rules
  8453. $ npm init -y
  8454. &lt;/code&gt;&lt;/pre&gt;
  8455. &lt;p&gt;Voilà, we hebben een basis &lt;code&gt;npm&lt;/code&gt; module. Tenzij je verder bouwt op bestaande ESLint regels of shareable configs hoef je verder niet veel te doen in &lt;code&gt;package.json&lt;/code&gt;. Er is wel één ding wat handig is om weer te geven, en dat is de minimale versie van ESLint waar je op bouwt. Voeg daarom het volgende toe aan je &lt;code&gt;package.json&lt;/code&gt;:&lt;/p&gt;
  8456. &lt;pre&gt;&lt;code&gt;&amp;quot;peerDependencies&amp;quot;: {
  8457.    &amp;quot;eslint&amp;quot;: &amp;quot;&amp;gt;= 5&amp;quot;
  8458. }
  8459. &lt;/code&gt;&lt;/pre&gt;
  8460. &lt;p&gt;Hiermee geef je aan dat ESLint (versie 5 en hoger) nodig is als dependency in het project waar jouw shareable config wordt gebruikt.&lt;/p&gt;
  8461. &lt;p&gt;Als volgende stap maken we een &lt;code&gt;index.js&lt;/code&gt; bestand aan waar de regels zich in gaan bevinden:&lt;/p&gt;
  8462. &lt;pre&gt;&lt;code&gt;module.exports = {
  8463.  rules: {
  8464.    &#39;no-eval&#39;: 2
  8465.  },
  8466.  env: {
  8467.    &#39;es6&#39;: true
  8468.  }
  8469. }
  8470. &lt;/code&gt;&lt;/pre&gt;
  8471. &lt;p&gt;Onze shareable config zegt eigenlijk niks anders dan dit:&lt;/p&gt;
  8472. &lt;ul&gt;
  8473. &lt;li&gt;Onze code wordt uitgevoerd in een omgeving die ES6 code begrijpt.&lt;/li&gt;
  8474. &lt;li&gt;Onze code mag geen &lt;code&gt;eval()&lt;/code&gt; bevatten.&lt;/li&gt;
  8475. &lt;/ul&gt;
  8476. &lt;p&gt;Deze &lt;code&gt;npm&lt;/code&gt; module is nu klaar om te publishen.&lt;/p&gt;
  8477. &lt;h2&gt;&lt;code&gt;eval()&lt;/code&gt; is &lt;code&gt;evil()&lt;/code&gt;&lt;/h2&gt;
  8478. &lt;p&gt;Het advies dat vaak gegeven wordt is om &lt;code&gt;eval()&lt;/code&gt; &lt;a href=&quot;https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#Do_not_ever_use_eval!&quot;&gt;niet te gebruiken&lt;/a&gt;. Deze post gaat daar niet verder op in, maar de reden dat ik deze regel toch toevoegde is erg simpel: ESLint heeft zelf een regelset met aanbevolen regels (&lt;code&gt;&amp;quot;extends&amp;quot;: eslint:recommended&lt;/code&gt;). In deze regelset is het niet verboden om &lt;code&gt;eval()&lt;/code&gt; te gebruiken. In een team is het niet ongebruikelijk om het gebruik van &lt;code&gt;eval()&lt;/code&gt; toch af te laten vangen door de linter. Dit maakte het uitermate geschikt om als voorbeeld configuratie te gebruiken.&lt;/p&gt;
  8479. &lt;h2&gt;Babel and presets&lt;/h2&gt;
  8480. &lt;p&gt;De volgende stap is om een custom Babel preset te maken. Ook hierbij beginnen we met het maken van een &lt;code&gt;npm&lt;/code&gt; module:&lt;/p&gt;
  8481. &lt;pre&gt;&lt;code&gt;$ cd babel-preset-custom-team-preset
  8482. $ npm init -y
  8483. &lt;/code&gt;&lt;/pre&gt;
  8484. &lt;p&gt;Onze Babel preset heeft, in tegenstelling tot onze ESLint shareable config, een dependency op een bestaande Babel plugin: &lt;code&gt;@babel/plugin-transform-arrow-functions&lt;/code&gt;. Deze installeren we eerst in onze preset:&lt;/p&gt;
  8485. &lt;pre&gt;&lt;code&gt;$ npm i -D @babel/plugin-transform-arrow-functions
  8486. &lt;/code&gt;&lt;/pre&gt;
  8487. &lt;p&gt;Ook in deze module gaan we aangeven dat wij afhankelijk zijn van een &lt;code&gt;peerDependency&lt;/code&gt;, namelijk &lt;code&gt;@babel/core&lt;/code&gt; versie 7 of hoger:&lt;/p&gt;
  8488. &lt;pre&gt;&lt;code&gt;&amp;quot;peerDependencies&amp;quot;: {
  8489.    &amp;quot;@babel/core&amp;quot;: &amp;quot;&amp;gt;= 7&amp;quot;
  8490. }
  8491. &lt;/code&gt;&lt;/pre&gt;
  8492. &lt;p&gt;Dan naar de configuratie! We maken eerst een &lt;code&gt;index.js&lt;/code&gt; aan die de configuratie van onze plugin bevat:&lt;/p&gt;
  8493. &lt;pre&gt;&lt;code&gt;module.exports = () =&amp;gt; ({
  8494.  plugins: [
  8495.    require(&#39;@babel/plugin-transform-arrow-functions&#39;)
  8496.  ]
  8497. });
  8498. &lt;/code&gt;&lt;/pre&gt;
  8499. &lt;p&gt;Als plugin &lt;code&gt;require&lt;/code&gt;’n we onze Babel plugin.&lt;/p&gt;
  8500. &lt;p&gt;Let wel op: in het uitgebreide &lt;a href=&quot;https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/user-handbook.md#toc-making-your-own-preset&quot;&gt;Babel Handbook&lt;/a&gt; van James Kyle wordt op het moment van schrijven een voorbeeld gegeven waarbij de configuratie bestaat uit het exporteren van een object. Babel geeft echter een fout als presets dit doen:&lt;/p&gt;
  8501. &lt;pre&gt;&lt;code&gt;Error: Plugin/Preset files are not allowed to export objects, only functions.
  8502. &lt;/code&gt;&lt;/pre&gt;
  8503. &lt;p&gt;Let er dus op dat je Babel preset een functie exporteert dat zelf een config object &lt;code&gt;return&lt;/code&gt;’ed.&lt;/p&gt;
  8504. &lt;p&gt;Deze &lt;code&gt;npm&lt;/code&gt; module is nu klaar om te publishen in een registry.&lt;/p&gt;
  8505. &lt;h2&gt;Bringing it together&lt;/h2&gt;
  8506. &lt;p&gt;Nu we onze shareable config en Babel preset hebben gedefinieerd is het tijd om ze in ons project samen te brengen. &lt;code&gt;cd&lt;/code&gt; naar ons testproject en maak daar een nieuwe &lt;code&gt;npm&lt;/code&gt; module:&lt;/p&gt;
  8507. &lt;pre&gt;&lt;code&gt;$ cd test-project/
  8508. $ npm init -y
  8509. &lt;/code&gt;&lt;/pre&gt;
  8510. &lt;p&gt;In dit project geven we aan van welke &lt;code&gt;devDependencies&lt;/code&gt; wij afhankelijk zijn:&lt;/p&gt;
  8511. &lt;pre&gt;&lt;code&gt;&amp;quot;devDependencies&amp;quot;: {
  8512.    &amp;quot;@babel/cli&amp;quot;: &amp;quot;^7.1.5&amp;quot;,
  8513.    &amp;quot;@babel/core&amp;quot;: &amp;quot;^7.1.6&amp;quot;,
  8514.    &amp;quot;eslint&amp;quot;: &amp;quot;^5.9.0&amp;quot;,
  8515.    &amp;quot;eslint-config-custom-team-rules&amp;quot;: &amp;quot;^1.0.0&amp;quot;,
  8516.    &amp;quot;babel-preset-custom-team-preset&amp;quot;: &amp;quot;^1.0.0&amp;quot;
  8517. }
  8518. &lt;/code&gt;&lt;/pre&gt;
  8519. &lt;p&gt;Vervolgens maken we onze project-specifieke ESLint configuratie in&lt;code&gt;.eslintrc&lt;/code&gt;:&lt;/p&gt;
  8520. &lt;pre&gt;&lt;code&gt;{
  8521.  &amp;quot;extends&amp;quot;: &amp;quot;custom-team-rules&amp;quot;
  8522. }
  8523. &lt;/code&gt;&lt;/pre&gt;
  8524. &lt;p&gt;In deze configuratie geven we aan dat wij verder bouwen op onze shareable config. Je hebt vast gemerkt dat we overal hebben aangegeven dat de volledige naam van onze shareable config &lt;code&gt;eslint-config-custom-team-rules&lt;/code&gt; is. Als je je aan deze conventie houdt weet ESLint dat je een shareable config inlaadt en hoef je de prefix &lt;code&gt;eslint-config-&lt;/code&gt; niet te gebruiken.&lt;/p&gt;
  8525. &lt;p&gt;De volgende stap is het maken van een Babel configuratie. Maak een &lt;code&gt;.babelrc&lt;/code&gt; bestand aan en voeg daar de volgende regels aan toe:&lt;/p&gt;
  8526. &lt;pre&gt;&lt;code&gt;{
  8527.  &amp;quot;presets&amp;quot;: [
  8528.    &amp;quot;custom-team-preset&amp;quot;
  8529.  ]
  8530. }
  8531. &lt;/code&gt;&lt;/pre&gt;
  8532. &lt;p&gt;Net zoals bij ESLint, geven wij Babel nu instructies om onze eigen preset in te laden. De prefix &lt;code&gt;babel-preset&lt;/code&gt; hoeven wij niet op te geven omdat wij ons aan de conventies van Babel presets houden.&lt;/p&gt;
  8533. &lt;p&gt;De volgende stap is het maken van onze source code. Maak een map aan genaamd &lt;code&gt;src/&lt;/code&gt; en plaats daarin de volgende code in &lt;code&gt;index.js&lt;/code&gt; bestand:&lt;/p&gt;
  8534. &lt;pre&gt;&lt;code&gt;const add = (num1, num2) =&amp;gt; {
  8535.  return eval(&#39;num1 + num2&#39;, {
  8536.    num1: num1,
  8537.    num2: num2
  8538.  });
  8539. };
  8540. &lt;/code&gt;&lt;/pre&gt;
  8541. &lt;pre&gt;&lt;code&gt;const result = add(1, 2);
  8542. &lt;/code&gt;&lt;/pre&gt;
  8543. &lt;p&gt;Onze source code bevat 2 punten die we in onze shareable config of preset behandelen:&lt;/p&gt;
  8544. &lt;ul&gt;
  8545. &lt;li&gt;Het gebruik van &lt;code&gt;eval()&lt;/code&gt;.&lt;/li&gt;
  8546. &lt;li&gt;Het gebruik van een arrow functie (wat in oudere browsers niet ondersteunt wordt.&lt;/li&gt;
  8547. &lt;/ul&gt;
  8548. &lt;p&gt;Als laatste stap mogen we onze bouwstap configureren. Om het makkelijk te houden doen we dit via &lt;code&gt;npm&lt;/code&gt; scripts, maar door het gebruik van standaard configuratie bestanden zou je dit ook makkelijk in Webpack doen.&lt;/p&gt;
  8549. &lt;p&gt;Voeg de volgende &lt;code&gt;scripts&lt;/code&gt; toe aan &lt;code&gt;package.json&lt;/code&gt;:&lt;/p&gt;
  8550. &lt;pre&gt;&lt;code&gt;&amp;quot;scripts&amp;quot;: {
  8551.    &amp;quot;lint&amp;quot;: &amp;quot;eslint src/index.js&amp;quot;,
  8552.    &amp;quot;build&amp;quot;: &amp;quot;babel -o src/script.min.js src/index.js&amp;quot;
  8553. },
  8554. &lt;/code&gt;&lt;/pre&gt;
  8555. &lt;p&gt;En nu komen we aan het spannendste deel van de avond: het uittesten van onze configuratie!&lt;/p&gt;
  8556. &lt;p&gt;Zoals eerder gezegd, geeft ESLint geen fout of waarschuwing op het gebruik van &lt;code&gt;eval()&lt;/code&gt; in onze code. Het draaien van &lt;code&gt;npx eslint --no-eslintrc src/index.js&lt;/code&gt; geeft het volgende resultaat:&lt;/p&gt;
  8557. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/code-in-style/eslint-no-config.png&quot; alt=&quot;EsLint zonder config&quot; /&gt;&lt;/p&gt;
  8558. &lt;p&gt;Hier is te zien wat ESLint standaard teruggeeft: &lt;code&gt;eval()&lt;/code&gt; is toegestaan, en aangezien ESLint normaal gesproken uitgaat van een ES5 omgeving is &lt;code&gt;const&lt;/code&gt; niet toegestaan.&lt;/p&gt;
  8559. &lt;p&gt;Wanneer we onze eigen shareable config gebruiken krijgen we een heel ander resultaat:&lt;/p&gt;
  8560. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/code-in-style/eslint-shareable-config.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  8561. &lt;p&gt;Hierin kunnen we zien dat ESLint een fout geeft op het gebruik van &lt;code&gt;eval()&lt;/code&gt;, maar het gebruik van &lt;code&gt;const&lt;/code&gt; toestaat in onze code.&lt;/p&gt;
  8562. &lt;h2&gt;Op naar Babel!&lt;/h2&gt;
  8563. &lt;p&gt;We kunnen een zelfde test uitvoeren wanneer we Babel draaien. Wanneer we Babel zonder configuratie draaien moet de output er hetzelfde uitzien als onze source code, want Babel doet van zichzelf niks:&lt;/p&gt;
  8564. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/code-in-style/babel-no-config.png&quot; alt=&quot;Babel zonder config&quot; /&gt;&lt;/p&gt;
  8565. &lt;p&gt;Dit geeft ons het volgende resultaat:&lt;/p&gt;
  8566. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/code-in-style/babel-no-config-result-3.png&quot; alt=&quot;Resultaat van Babel zonder config&quot; /&gt;&lt;/p&gt;
  8567. &lt;p&gt;Maar als we onze &lt;code&gt;npm&lt;/code&gt; script uitvoeren krijgen we een ander resultaat, omdat onze Babel preset dan wél uitgevoerd wordt:&lt;/p&gt;
  8568. &lt;pre&gt;&lt;code&gt;$ npm run build
  8569. &lt;/code&gt;&lt;/pre&gt;
  8570. &lt;p&gt;Dit geeft:&lt;/p&gt;
  8571. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/code-in-style/babel-custom-preset-result-3.png&quot; alt=&quot;Resultaat van Babel met custom preset&quot; /&gt;&lt;/p&gt;
  8572. &lt;p&gt;En dat is het. We hebben nu een eigen project gemaakt dat onze eigen ESLint en Babel configuratie (of preset) gebruikt op de source code. Wil je de voorbeeldcode in actie zien? Dan kan je het altijd terugvinden op &lt;a href=&quot;https://github.com/lodybo/code-in-style-examples&quot;&gt;Github&lt;/a&gt;.&lt;/p&gt;
  8573. &lt;h2&gt;Wrapping up&lt;/h2&gt;
  8574. &lt;p&gt;Het proces zoals hierboven beschreven is natuurlijk niet de enige manier om een coding styleguide te maken met je team. En zoals voor veel dingen geldt in de wereld van development: your mileage may vary. Het belangrijkste is dat er een set richtlijnen vastligt waardoor het hele team zich kan richten op het schrijven van goede code!&lt;/p&gt;
  8575. &lt;h2&gt;Over Lody Borgers&lt;/h2&gt;
  8576. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/lody.png&quot; alt=&quot;Foto van lody&quot; class=&quot;floating-portrait&quot; /&gt;
  8577. Lody Borgers is front-end developer bij TAF Verzekeringen in Eindhoven. Naast zijn kennis op het gebied van front-end is hij mede geroemd om zijn scherp inzicht, zijn enthousiasme voor JavaScript, en zijn ongelooflijke bescheidenheid. Hij kijkt altijd meer uit naar een meeting dan de mensen die deze meeting met hem hebben. Studeerde naast ICT ook Communicatie, maar zegt zelf nooit teveel. [@lodybo](https://www.twitter.com/lodybo)
  8578. &lt;p&gt;Donatie: Nederlandse Hartstichting&lt;/p&gt;
  8579. </content>
  8580.  </entry>
  8581.  <entry>
  8582.    <title>Schrijf eens iets anders dan code</title>
  8583.    <link href="https://www.fronteers.nl/nl/blog/2018/12/schrijf-eens-iets-anders-dan-code"/>
  8584.    <updated>2018-12-01T00:00:00Z</updated>
  8585.    <id>https://www.fronteers.nl/nl/blog/2018/12/schrijf-eens-iets-anders-dan-code</id>
  8586.    <content xml:lang="nl" type="html">&lt;p&gt;Langzaam maar zeker kruipen we alweer het nieuwe jaar in. Tijd om terug te blikken op het afgelopen jaar en goede voornemens te maken voor het nieuwe jaar. Normaal gesproken betekent dat voor mij dat ik constateer dat er weinig van mijn goede voornemens terecht is gekomen, en herpak ik mezelf met een &amp;quot;maar volgend jaar wordt mijn jaar.&amp;quot; Dit jaar doe ik het anders!&lt;/p&gt;
  8587. &lt;p&gt;Één van mijn voornemens voor 2018 was namelijk om meer te gaan schrijven. Niet vanwege het schrijven op zich, maar wel wat er allemaal bij komt kijken: het op een rijtje zetten van je gedachtes en het overbrengen van een verhaal; dáár wil ik beter in worden. En de beste manier om ergens beter in te worden, is dat gewoon vaak te doen.&lt;/p&gt;
  8588. &lt;h2&gt;Ik zei het toch...&lt;/h2&gt;
  8589. &lt;p&gt;...of niet? Je herkent het vast wel: een project gaat de verkeerde kant op en je probeert je collega&#39;s of baas te overtuigen hoe het anders kan. Dit lukt vervolgens niet, het project mislukt inderdaad en achteraf was jouw idee misschien toch beter geweest. Niet dat er op dat moment geen enkele voldoening zit in een &amp;quot;ik zei het toch&amp;quot;, maar daar is natuurlijk niemand mee geholpen.&lt;/p&gt;
  8590. &lt;p&gt;Het is niet zo dat ik denk dat ik altijd gelijk heb — 11 jaar samen met mijn vrouw heeft daar wel een einde aan gemaakt — maar als zo&#39;n &amp;quot;ik zei het toch&amp;quot; zich voordeed, lag het ook aan mij. Ik ben meestal prima in staat om over problemen te redeneren en oplossingen te bedenken, maar vervolgens die redenering omzetten in een samenhangende reeks woorden is nou eenmaal een vak apart. Logisch dat er dan niet geluisterd wordt.&lt;/p&gt;
  8591. &lt;p&gt;In zo&#39;n geval had het minstens geholpen als ik mijn gedachten op papier had verzameld. Ik had er rustig overheen kunnen lezen en zien waar er gaten zaten of mogelijke vragen konden ontstaan. Niet alleen had ik dan zelf een beter beeld gehad van wat ik wilde vertellen, ik had ook steviger in mijn schoenen gestaan op het moment dat ik tegengas kreeg.&lt;/p&gt;
  8592. &lt;h2&gt;Niet alleen voor communicatie&lt;/h2&gt;
  8593. &lt;p&gt;Het opschrijven van dingen zit niet in mijn natuur: ik neem zelden aantekeningen en afspraken probeer ik van nature zoveel mogelijk in mijn hoofd te onthouden. Tot en met mijn studentenleven voldeed dat &#39;systeem&#39; eigenlijk prima, en was er dus ook geen noodzaak om dit te veranderen. Met de leeftijd komen echter meer verantwoordelijkheden, met meer verantwoordelijkheden komen meer zaken om te onthouden en er zit een grens op hoeveel dingen je tegelijk in je hoofd kunt proppen. Mijn systeem houdt het niet meer.&lt;/p&gt;
  8594. &lt;p&gt;Ik ben eerder begonnen met het noteren van alle &#39;simpele&#39; zaken die ik moet onthouden — TODO&#39;s, boodschappen, en afspraken — en ik merk dat dat me rust in mijn hoofd geeft. Vanaf nu trek ik die lijn door naar dingen die ik geleerd heb en ideëen die ik heb. Congres bezocht? Schrijf een verslag! Heb je een vaag idee over hoe schrijven je leven zou kunnen verbeteren? Schrijf er een blogpost over!&lt;/p&gt;
  8595. &lt;p&gt;Mocht je mijn woord niet willen geloven, lees dan eens &lt;a href=&quot;https://www.helpscout.net/blog/benefits-of-writing/&quot;&gt;The Psychological Benefits of Writing&lt;/a&gt;; een blogpost over (je raad het al) de voordelen die je kunt ervaren als je regelmatig schrijft, met links naar onderzoeken.&lt;/p&gt;
  8596. &lt;h2&gt;Cirkeltje rond&lt;/h2&gt;
  8597. &lt;p&gt;Ik heb even getwijfeld of &#39;schrijven&#39; een goed onderwerp was voor deze adventskalender. Je leest deze tekst immers op de website van een vakvereniging voor front-end developers en er is helemaal niets technisch aan. Maar aan de andere kant: een groot deel van ons werk &lt;em&gt;is&lt;/em&gt; niet technisch. Software-ontwikkeling is communicatie en creativiteit, en er zijn meer dan genoeg middelen die ons daarbij kunnen helpen.&lt;/p&gt;
  8598. &lt;p&gt;Dus ik blijf schrijven en dit is mijn startpunt. Net op tijd om nog mijn goede voornemen voor dit jaar in te kunnen lossen. Fijne feestdagen!&lt;/p&gt;
  8599. &lt;h2&gt;Over Koen Kivits&lt;/h2&gt;
  8600. &lt;img src=&quot;https://www.fronteers.nl/_img/adventskalender/koen.jpeg&quot; alt=&quot;Foto van koen&quot; class=&quot;floating-portrait&quot; /&gt;
  8601. Koen Kivits is een web developer in Eindhoven. Hij hobbyt op zijn [Github](https://github.com/koenkivits), tweet op zijn [Twitter](https://twitter.com/koenkivits) en blogt (sinds kort!) op zijn [website](https://koen.kivits.com/).
  8602. Donatie
  8603. Mijn donatie gaat naar [Stichting Vluchtelingenwerk](https://actie.vluchtelingenwerk.nl/geef-voor-vluchtelingen), omdat zij helpen om meer mensen dezelfde kansen te geven als ik heb gehad.
  8604. </content>
  8605.  </entry>
  8606.  <entry>
  8607.    <title>Fronteers Adventskalender 2018</title>
  8608.    <link href="https://www.fronteers.nl/nl/blog/2018/11/fronteers-adventskalender-2018"/>
  8609.    <updated>2018-11-30T00:00:00Z</updated>
  8610.    <id>https://www.fronteers.nl/nl/blog/2018/11/fronteers-adventskalender-2018</id>
  8611.    <content xml:lang="nl" type="html">&lt;p&gt;Morgen begint de Fronteers Adventskalender. Vanaf 1 tot en met 24 december verschijnen er 24 blogs van 24 verschillende auteurs over uiteenlopende onderwerpen.&lt;/p&gt;
  8612. &lt;h2&gt;Wat kun je verwachten?&lt;/h2&gt;
  8613. &lt;p&gt;Natuurlijk zullen er blogs verschijnen over zaken waar we als front-enders dagelijks mee werken, zoals lettertypes of verschillende tools om je workflow te verbeteren. Maar er zullen ook een aantal verrassende blogs voorbij komen, denk aan het maken van sketchnotes of een persoonlijke noot over de balans werk-privé.&lt;/p&gt;
  8614. &lt;h2&gt;Goede doelen&lt;/h2&gt;
  8615. &lt;p&gt;Elke schrijver van een blog heeft de kans gekregen om een goed doel uit te kiezen. Fronteers zal aan elk van deze goede doelen 75 euro uit de verenigingskas doneren.&lt;/p&gt;
  8616. &lt;p&gt;Alle artikelen uit deze adventsreeks vind je hieronder.&lt;/p&gt;
  8617. &lt;ul&gt;
  8618. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/schrijf-eens-iets-anders-dan-code&quot;&gt;Schrijf eens iets anders dan code&lt;/a&gt; door Koen Kivits&lt;/li&gt;
  8619. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/code-in-style&quot;&gt;Code in style!&lt;/a&gt; door Lody Borgers&lt;/li&gt;
  8620. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/inclusive-design-is-design&quot;&gt;Inclusive Design is Design&lt;/a&gt; door Darice de Cuba&lt;/li&gt;
  8621. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/pump-up-the-jam&quot;&gt;Pump up the JAM&lt;/a&gt; door Iain van der Wiel&lt;/li&gt;
  8622. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/twaalf-geschenken-van-fronteers&quot;&gt;Twaalf geschenken van Fronteers&lt;/a&gt; door Job van Achterberg&lt;/li&gt;
  8623. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/begin-met-regular-expressions&quot;&gt;Begin met regular expressions&lt;/a&gt; door Melle Wynia&lt;/li&gt;
  8624. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/in-evenwicht&quot;&gt;In evenwicht&lt;/a&gt; door Tom Hartwig&lt;/li&gt;
  8625. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/mooi-rood-is-niet-lelijk&quot;&gt;Mooi rood is niet lelijk&lt;/a&gt; door Monique Dubbelman&lt;/li&gt;
  8626. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/prettier-de-eigenzinnige-code-opmaker&quot;&gt;Prettier, de eigenzinnige code-opmaker&lt;/a&gt; door Edwin Martin&lt;/li&gt;
  8627. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/hoe-test-ik-de-toegankelijkheid-van-mijn-website&quot;&gt;Hoe test ik de toegankelijkheid van mijn website?&lt;/a&gt; door Erik Kroes&lt;/li&gt;
  8628. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/over-websites-en-lekkende-kranen&quot;&gt;Over websites en lekkende kranen&lt;/a&gt; door Josee Wouters&lt;/li&gt;
  8629. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/word-een-front-end-developer&quot;&gt;Word een front-end developer&lt;/a&gt; door Tim Severien&lt;/li&gt;
  8630. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/css-statistieken-om-je-codebase-te-verbeteren&quot;&gt;CSS Statistieken om je codebase te verbeteren&lt;/a&gt; door Bart Veneman&lt;/li&gt;
  8631. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/hoe-een-blinde-klant-zich-heel-even-miljonair-waande&quot;&gt;Hoe een blinde klant zich even miljonair waande&lt;/a&gt; door Roel van Gils&lt;/li&gt;
  8632. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/beginnen-met-webbluetooth&quot;&gt;Beginnen met WebBluetooth&lt;/a&gt; door Niels Leenheer&lt;/li&gt;
  8633. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/een-api-schrijven-als-een-front-end-developer&quot;&gt;Een API schrijven als een front-end developer&lt;/a&gt; door Thomas Machielsen&lt;/li&gt;
  8634. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/ik-doe-ook-front-end&quot;&gt;&amp;quot;Ik doe ook front-end&amp;quot;&lt;/a&gt; door Sander Langendoen&lt;/li&gt;
  8635. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/lettertypes-op-het-web-wat-kan-ik-ermee&quot;&gt;Lettertypes op het web, wat kan ik ermee?&lt;/a&gt; door Amy Davis&lt;/li&gt;
  8636. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/webdeveloper-worden-zonder-dure-opleiding&quot;&gt;Webdeveloper worden zonder (dure) opleiding&lt;/a&gt; door Tim Oerlemans&lt;/li&gt;
  8637. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/min-of-meer-toegankelijk&quot;&gt;Min of meer toegankelijk&lt;/a&gt; door Jules Ernst&lt;/li&gt;
  8638. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/css-en-javascripters&quot;&gt;CSS en JavaScripters&lt;/a&gt; door Peter-Paul Koch&lt;/li&gt;
  8639. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/wat-ik-leerde-van-twaalf-uur-tekenen-tijdens-fronteers&quot;&gt;Wat ik leerde van twaalf uur tekenen bij Fronteers&lt;/a&gt; door Anke Willems&lt;/li&gt;
  8640. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/fuck-the-system-be-nice&quot;&gt;Fuck the system, be nice&lt;/a&gt; door Paul van Buuren&lt;/li&gt;
  8641. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/12/met-fronteers-het-nieuwe-jaar-in&quot;&gt;Met Fronteers het nieuwe jaar in&lt;/a&gt; door Anneke Sinnema&lt;/li&gt;
  8642. &lt;/ul&gt;
  8643. </content>
  8644.  </entry>
  8645.  <entry>
  8646.    <title>Schrijf mee aan de Fronteers Adventskalender!</title>
  8647.    <link href="https://www.fronteers.nl/nl/blog/2018/10/schrijf-mee-aan-de-fronteers-adventkalender-2018"/>
  8648.    <updated>2018-10-16T00:00:00Z</updated>
  8649.    <id>https://www.fronteers.nl/nl/blog/2018/10/schrijf-mee-aan-de-fronteers-adventkalender-2018</id>
  8650.    <content xml:lang="nl" type="html">&lt;p&gt;Heb jij altijd al een blog willen schrijven voor Fronteers? Dan is nu je kans! In december keert de Fronteers Adventskalender terug. 24 blogs van 24 schrijvers over alles dat met front-end (en Fronteers) te maken heeft. En de schrijvers mogen een donatie van 75 euro uit de verenigingskas doen aan een goed doel naar keuze.&lt;/p&gt;
  8651. &lt;p&gt;Tot 1 november kan iedereen zich aanmelden om een blog te schrijven. Je mag schrijven over elk onderwerp dat front-end gerelateerd is. Misschien heb je wel goede voornemens voor 2019 of wil je graag een terugblik op het afgelopen jaar maken. Heb je een belangrijke ontdekking gedaan, wil je iets wat je zelf hebt geleerd met iedereen delen? Je kunt ook een pleidooi maken voor jouw favoriete framework of een lijstje van tools/artikelen die jij op dit moment belangrijk vind. Of misschien wil je graag schrijven over jouw ervaringen als front-end developer en waarom dit het mooiste werk van de wereld is. Denk ook eens aan het schrijven van een review, bijvoorbeeld over een Fronteers congres of workshop.&lt;/p&gt;
  8652. &lt;p&gt;Wil je graag meeschrijven en namens Fronteers een donatie doen aan een goed doel van jouw keus? Meld je dan voor 1 november aan via onderstaand formulier, voor vragen kun je natuurlijk op het Fronteers Slack-kanaal terecht.&lt;/p&gt;
  8653. &lt;p&gt;Deze schrijvers doen al mee:&lt;/p&gt;
  8654. &lt;ul&gt;
  8655. &lt;li&gt;Anneke Sinnema&lt;/li&gt;
  8656. &lt;li&gt;Josee Wouters&lt;/li&gt;
  8657. &lt;li&gt;Paul van Buuren&lt;/li&gt;
  8658. &lt;li&gt;Edwin Martin&lt;/li&gt;
  8659. &lt;li&gt;Niels Leenheer&lt;/li&gt;
  8660. &lt;li&gt;Tim Severien&lt;/li&gt;
  8661. &lt;li&gt;Koen Kivits&lt;/li&gt;
  8662. &lt;/ul&gt;
  8663. </content>
  8664.  </entry>
  8665.  <entry>
  8666.    <title>Fronteers als W3C-lid</title>
  8667.    <link href="https://www.fronteers.nl/nl/blog/2018/09/fronteers-als-w3c-lid"/>
  8668.    <updated>2018-09-27T00:00:00Z</updated>
  8669.    <id>https://www.fronteers.nl/nl/blog/2018/09/fronteers-als-w3c-lid</id>
  8670.    <content xml:lang="nl" type="html">&lt;p&gt;Het bestuur stelt voor om Fronteers W3C-lid te maken en Rachel Andrew als onze vertegenwoordiger aan te stellen om ons, en ook front-end ontwikkelaars in het algemeen, een stem te geven in de webstandaarden. Dit zal circa 30.000 euro per jaar kosten. Het bestuur zal op de ALV van 19 oktober hierover een motie indienen.&lt;/p&gt;
  8671. &lt;h2&gt;Overweging&lt;/h2&gt;
  8672. &lt;p&gt;Front-end ontwikkelaars hebben op dit moment geen stem in W3C. De individuele ontwikkelaars die niettemin deelnemen aan de discussie over nieuwe webstandaarden, doen dit in hun eigen, onbetaalde tijd, en gaan op eigen kosten naar W3C-meetings.&lt;/p&gt;
  8673. &lt;p&gt;Aangezien vertegenwoordiging van front-end ontwikkelaars in W3C een goede zaak is die aansluit bij de doelstellingen van Fronteers, en aangezien we het geld in kas hebben, lijkt het het bestuur goed om het lidmaatschap aan te vragen en een ervaren webontwikkelaar te betalen om dit werk op zich te nemen. Hiervoor hebben wij contact gezocht met Rachel Andrew, die de afgelopen jaren ervaring heeft opgedaan als Invited Expert bij het W3C. Zij heeft toegestemd om als onze vertegenwoordiger op te treden - mits de leden akkoord gaan.&lt;/p&gt;
  8674. &lt;p&gt;Het bestuur hoopt dat het lidmaatschap van het W3C een positieve uitwerking zal hebben op de naamsbekendheid van Fronteers, en mogelijkerwijs zou kunnen leiden tot een ledenaanwas. Met meer leden kan Fronteers zich op termijn beter inzetten voor de belangen van front-end ontwikkelaars.&lt;/p&gt;
  8675. &lt;p&gt;Op &lt;a href=&quot;https://alistapart.com/article/web-developer-representation-in-w3c&quot;&gt;A List Apart&lt;/a&gt; kan je verder lezen over de overwegingen die tot deze motie hebben geleid. Ook &lt;a href=&quot;https://www.smashingmagazine.com/2018/09/representing-web-developers-w3c/&quot;&gt;vertelt Rachel&lt;/a&gt; op Smashing Magazine over haar werk bij W3C, en de kans die Fronteers haar zou kunnen bieden.&lt;/p&gt;
  8676. &lt;h2&gt;Motie&lt;/h2&gt;
  8677. &lt;p&gt;Het bestuur stelt het volgende voor.&lt;/p&gt;
  8678. &lt;ul&gt;
  8679. &lt;li&gt;Fronteers wordt W3C-lid, in eerste instantie voor twee jaar.&lt;/li&gt;
  8680. &lt;li&gt;Het bestuur zal een vertegenwoordiger aanwijzen.&lt;/li&gt;
  8681. &lt;li&gt;Het bestuur reserveert hiervoor 30.000 euro per jaar voor 2019 en 2020.&lt;/li&gt;
  8682. &lt;li&gt;Op de ALV van 2020 zal het W3C-lidmaatschap geëvalueerd worden.&lt;/li&gt;
  8683. &lt;li&gt;Op lange termijn is het de bedoeling dat er een internationale samenwerking van organisaties van front-end ontwikkelaars ontstaat die uiteindelijk het lidmaatschap en de vertegenwoordigers samen zullen betalen. Het bestuur hoopt dat zo&#39;n structuur in 2020 aanwezig is, en zal stappen zetten om dit voor elkaar te krijgen.&lt;/li&gt;
  8684. &lt;/ul&gt;
  8685. &lt;h2&gt;Financiële onderbouwing&lt;/h2&gt;
  8686. &lt;p&gt;Lidmaatschap W3C: 1.950 euro per jaar.
  8687. (Noot: na twee jaar gaat &lt;a href=&quot;https://www.w3.org/Consortium/fees?countryCode=NL&amp;amp;quarter=07-01&amp;amp;year=2018#results&quot;&gt;dit bedrag&lt;/a&gt; omhoog naar 7.800 euro. Dit is de voornaamste reden om in 2020 het lidmaatschap te evalueren.)&lt;/p&gt;
  8688. &lt;p&gt;Vertegenwoordigersfee: 25.000 euro per jaar. Dit is inclusief eventuele reiskosten naar W3C-meetings. Rachel Andrew is akkoord gegaan met dit bedrag.&lt;/p&gt;
  8689. &lt;p&gt;Overige kosten: circa 3.000 euro per jaar. Hierbij valt te denken aan het inhuren van een advocaat in het geval dat er een internationale organisatie geschapen zou moeten worden, of incidentele reis- en verblijfkosten die verband houden met het oprichten van andere organisaties die het W3C-lidmaatschap financieel zouden steunen. Het is mogelijk dat dit geld niet gebruikt wordt.&lt;/p&gt;
  8690. &lt;h2&gt;Vertegenwoordiger&lt;/h2&gt;
  8691. &lt;p&gt;Het bestuur is van zins Rachel Andrew als onze vertegenwoordiger aan te stellen. Rachel is hiermee akkoord gegaan, en zal zelf op de ALV verschijnen om het een en ander toe te lichten.&lt;/p&gt;
  8692. &lt;p&gt;Noot: W3C-lidmaatschap geeft recht op vier vertegenwoordigers. Fronteers kan zich niet permitteren vier vertegenwoordigers te betalen, wat een andere reden is dat we hopen een internationale samenwerking op gang te brengen.&lt;/p&gt;
  8693. </content>
  8694.  </entry>
  8695.  <entry>
  8696.    <title>Alles over mechanische toetsenborden</title>
  8697.    <link href="https://www.fronteers.nl/nl/blog/2018/09/alles-over-mechanische-toetsenborden"/>
  8698.    <updated>2018-09-11T00:00:00Z</updated>
  8699.    <id>https://www.fronteers.nl/nl/blog/2018/09/alles-over-mechanische-toetsenborden</id>
  8700.    <content xml:lang="nl" type="html">&lt;p&gt;Je zult er vast wel eens van gehoord hebben of misschien heeft een van je collega’s er wel één. Een leek noemt het ‘ouderwets’, de kenner zweert erbij. Ik heb het natuurlijk over mechanische toetsenborden! Wie ben ik? Ik ben Josee en ik heb zelf een Ducky. Sinds ik dit toetsenbord heb, ben ik helemaal om. Ik zou niet meer zonder willen.&lt;/p&gt;
  8701. &lt;p&gt;&lt;em&gt;Maar hoe kies je nu een mechanisch toetsenbord? Over het algemeen is zo&#39;n toetsenbord niet de goedkoopste en je wilt een miskoop vermijden. Maar zodra je even googlet, vliegen de switches je om de oren. Hopelijk zie je met deze guide straks door de toetsen het toetsenbord weer.&lt;/em&gt;&lt;/p&gt;
  8702. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/ducky-shine.jpg&quot; alt=&quot;Ducky Shine 3 is herkenbaar door de voor Ducky typerende spatiebalk&quot; /&gt;&lt;/p&gt;
  8703. &lt;p class=&quot;note&quot;&gt;
  8704. Ducky Shine 3 is herkenbaar door de voor Ducky typerende spatiebalk
  8705. &lt;/p&gt;
  8706. &lt;h2&gt;Wat is een mechanisch toetsenbord eigenlijk?&lt;/h2&gt;
  8707. &lt;p&gt;Als er wordt gesproken over een mechanisch toetsenbord - of op z&#39;n Engels: een mechanical keyboard - dan wordt er een toetsenbord bedoeld dat een switch van bewegende delen onder de toets heeft zitten. Een gewoon toetsenbord daarentegen bestaat doorgaans uit een rubberen switch. Dit is veel goedkoper om te produceren. Naast zo&#39;n rubber dome switch en mechanische switches, zijn er ook andere soorten switches, zo gebruikt Apple de eigen &#39;butterfly&#39; switches voor zijn toetsenborden. Daar ga ik nu niet verder op in.&lt;/p&gt;
  8708. &lt;h2&gt;Waarom is een mechanisch toetsenbord beter?&lt;/h2&gt;
  8709. &lt;p&gt;Allereerst, een goedkoop toetsenbord is meestal niet slecht. Het zal zeker de klus geklaard krijgen. De superioriteit van een mechanisch toetsenbord zit &#39;m voornamelijk in de beleving. Bij een gemiddeld toetsenbord met rubber dome switches moet je meer kracht zetten, krijg je weinig feedback en kan het toetsenbord door het gebruik van rubber &#39;mushy&#39; aanvoelen. Ook is de levensduur van zo&#39;n toetsenbord een stuk korter.&lt;/p&gt;
  8710. &lt;p&gt;Bij een mechanisch toetsenbord heb je deze nadelen niet. Afhankelijk van de switches die je kiest - die het grootste deel van de beleving bepalen - hoef je zoveel kracht te zetten als je wilt en krijg je de feedback die je wilt. Een veel genoemd nadeel van een mechanisch toetsenbord: het maakt veel lawaai. Nu is dit echter ook weer afhankelijk van de switches die je kiest, je manier van typen en je werkomgeving. Een rubber dome toetsenbord is ook niet bepaald stil. En persoonlijk hoor ik liever het gezellige geklik-klak van een mechanisch toetsenbord dan de rammel van een niet-mechanisch toetsenbord.&lt;/p&gt;
  8711. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/magic-force.jpg&quot; alt=&quot;Deze Magic Force is een budgetkeuze met een opvallend uiterlijk&quot; /&gt;&lt;/p&gt;
  8712. &lt;p class=&quot;note&quot;&gt;
  8713. Deze Magic Force is een budgetkeuze met een opvallend uiterlijk
  8714. &lt;/p&gt;
  8715. &lt;h2&gt;Welke switches zijn er?&lt;/h2&gt;
  8716. &lt;p&gt;Er zijn verschillende soorten switches. &lt;a href=&quot;https://www.cherrymx.de/en&quot;&gt;Cherry MX&lt;/a&gt;, de meest bekende fabrikant van switches, heeft tien verschillende soorten om uit te kiezen. Deze switches kenmerken zich door een kleur, red, blue of brown bijvoorbeeld. De meeste fabrikanten houden deze kleurcodes aan voor dezelfde soort switches. Andere merken die deze kleuren aanhouden zijn bijvoorbeeld &lt;a href=&quot;https://deskthority.net/wiki/Gateron_KS-3_series&quot;&gt;Gateron&lt;/a&gt;, &lt;a href=&quot;http://www.kailh.com/en/Products/Ks/KTS/&quot;&gt;Kailh&lt;/a&gt;, en &lt;a href=&quot;http://www.greetech.com/en/products.asp?enBigClassName=Mechanical%20Keyboard%20Switch&quot;&gt;Greetech&lt;/a&gt;.&lt;/p&gt;
  8717. &lt;p&gt;&lt;a href=&quot;https://www.razer.com/eu-en/gaming-keyboards&quot;&gt;Razer&lt;/a&gt;, vooral bekend van gaming accessoires, maakt onder andere gebruik van eigen hybride switches; een kruising tussen mechanisch en dome. &lt;a href=&quot;https://www.logitechg.com/nl-nl/articles/romer-g&quot;&gt;Logitech&lt;/a&gt; gebruikt zijn eigen Romer-G switches en andere bekende merken zijn &lt;a href=&quot;http://www.topre.co.jp/en/products/elec/keyboards/&quot;&gt;Topre&lt;/a&gt; en &lt;a href=&quot;https://matias.ca/&quot;&gt;Matias&lt;/a&gt;. Deze laatste twee zijn vooral bekend bij liefhebbers.&lt;/p&gt;
  8718. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/brown-switches.jpg&quot; alt=&quot;Bij deze Magic Force zie je dat er is gekozen voor brown switches&quot; /&gt;&lt;/p&gt;
  8719. &lt;p class=&quot;note&quot;&gt;
  8720. Bij deze Magic Force zie je dat er is gekozen voor brown switches
  8721. &lt;/p&gt;
  8722. &lt;p&gt;Om het iets makkelijker te maken: er wordt een onderscheid gemaakt tussen tactile switches en linear switches. Een lineaire switch moet je tot de bodem indrukken voor deze een aanslag registreert. Een tactile switch heeft halverwege een voelbare bump, op dit punt wordt de aanslag geregistreerd en kun je verder typen. Je hoeft de toets dus niet verder in te drukken: het kan wel.
  8723. Een derde type, die je minder tegenkomt, is de clicky switch. Deze heeft naast een voelbare bump van een tactile switch, ook een hoorbare klik. Deze switches zouden nog wel eens tot geïrriteerde collega&#39;s kunnen leiden.&lt;/p&gt;
  8724. &lt;p&gt;Verder onderscheid in switches wordt gemaakt door de hoeveelheid kracht die je moet gebruiken om een toets in te te drukken. Dit wordt actuation force genoemd. De actuation force wordt gemeten in centiNewtons (cN) maar 1 cN is gelijk aan 1 gram, deze maten worden door elkaar gebruikt. Een gemiddeld rubber dome keyboard heeft een actuation forse van tussen 55g en 60g. Bij mechanische switches heb je doorgaans keus van 45g tot en met 80g.
  8725. Een derde punt van onderscheid is het actuation point. Dit is het punt vanaf waar de switch de aanslag registreert. Gemiddeld ligt dit bij 2mm, bij een totale afstand tot bottom out van 4mm. Hoe lager het actuation point, hoe sneller de toets de aanslag registreert en jij naar de volgende toets kunt.&lt;/p&gt;
  8726. &lt;p&gt;Met deze drie kenmerken, kun je besluiten welke switch voor jou de juiste is.&lt;/p&gt;
  8727. &lt;h2&gt;Welke switch moet ik kiezen?&lt;/h2&gt;
  8728. &lt;p&gt;Mijn daily driver is een Ducky Miya Pro Sakura met Cherry MX Brown switches. De Cherry MX Brown is een populaire tactile switch. De actuation force is met 45g licht en de actuation point gemiddeld, met 2mm. Ik viel voor dit toetsenbord voornamelijk dankzij het geweldige uiterlijk: de kleurtjes en de Japanse kersenbloesem op de spatiebalk en escape-toets. De Cherry MX Brown switches kende ik al en vond ik fijn typen. De keus was snel gemaakt.&lt;/p&gt;
  8729. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/ducky-sakura.jpg&quot; alt=&quot;Dit zuurstokroze toetsenbord is mijn Ducky Miya Pro Sakura.&quot; /&gt;&lt;/p&gt;
  8730. &lt;p class=&quot;note&quot;&gt;
  8731. Dit zuurstokroze toetsenbord is mijn Ducky Miya Pro Sakura.
  8732. &lt;/p&gt;
  8733. &lt;p&gt;Er zijn ook speciale switches. Zoals bijvoorbeeld de silent serie van Cherry. Deze zijn er in Red en Black en zijn stille(re) varianten van deze kleuren. Dan is er ook de Cherry MX Speed Silver, ideaal voor games. Deze linear switch een lage actuation force en actuation point. Mijn advies zou zijn om deze speciale switches achterwege te laten bij je keus, dat maakt het in mijn ogen onnodig ingewikkeld.&lt;/p&gt;
  8734. &lt;p&gt;De beste manier om te besluiten welke switch je wilt, is simpelweg om het uit te proberen. Al is dat in de praktijk wat minder simpel. Niet veel computerwinkels zullen mechanische toetsenborden hebben die je kunt uitproberen. De meeste MediaMarkt winkels hebben wel enkele gaming toetsenborden van onder andere Logitech en Razer, maar ook Corsair en Kingston, die gebruik maken van Cherry MX switches.&lt;/p&gt;
  8735. &lt;p&gt;Coolblue heeft in de fysieke winkels zogenoemde testers. Dit zijn kleine bordjes met een aantal kleuren switches naast elkaar, zodat je kunt uitproberen hoe het aanvoelt.&lt;/p&gt;
  8736. &lt;p&gt;Deze switches zijn bij de meeste webwinkels ook te bestellen, bijvoorbeeld bij &lt;a href=&quot;https://www.candykeys.com/category:switch-testers&quot;&gt;Candykeys&lt;/a&gt; en &lt;a href=&quot;https://www.keyboardco.com/product/cherry-mx-switch-sampler.asp&quot;&gt;Keyboardco&lt;/a&gt;&lt;/p&gt;
  8737. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/wooting-one.jpg&quot; alt=&quot;De Wooting One (een Nederlands merk) is een toetsenbord waarbij je zelf kunt wisselen tussen red en blue switches.&quot; /&gt;&lt;/p&gt;
  8738. &lt;p class=&quot;note&quot;&gt;
  8739. De Wooting One (een Nederlands merk) is een toetsenbord waarbij je zelf kunt wisselen tussen red en blue switches.
  8740. &lt;/p&gt;
  8741. &lt;p&gt;Of heb je collega&#39;s of mensen in je omgeving die een mechanisch toetsenbord hebben? Vraag of je het eens mag uitproberen.&lt;/p&gt;
  8742. &lt;p&gt;Probeer van te voren te bedenken wat je fijn vindt: vind je het fijn als je de toets lichter of zwaarder moet indrukken voor de aanslag wordt geregistreerd? Wil je feedback voelen of wil je dat de toets pas registreert als je de bodem bereikt? Dit zal je keus al wat makkelijker maken.&lt;/p&gt;
  8743. &lt;p&gt;Maar wees gewaarschuwd: mechanische toetsenborden zijn verslavend. Als je er eenmaal een hebt, wil je waarschijnlijk niet anders meer, net als ik en Melle Wynia, die zijn toetsenborden voor het schrijven van deze blog ter beschikking stelde.&lt;/p&gt;
  8744. &lt;p&gt;Ben je lid van Fronteers? Dan krijg je nu korting bij Candykeys en Keyboardco op een mechanisch toetsenbord van jouw keuze. Je kunt contact opnemen met het bestuur voor een kortingscode.&lt;/p&gt;
  8745. </content>
  8746.  </entry>
  8747.  <entry>
  8748.    <title>Flinke korting op performance.now(), 8-9 november in Amsterdam</title>
  8749.    <link href="https://www.fronteers.nl/nl/blog/2018/09/korting-op-performance-now-2018"/>
  8750.    <updated>2018-09-05T00:00:00Z</updated>
  8751.    <id>https://www.fronteers.nl/nl/blog/2018/09/korting-op-performance-now-2018</id>
  8752.    <content xml:lang="nl" type="html">&lt;p&gt;Op 8 en 9 november vindt in het Compagnietheater in hartje Amsterdam de nieuwe conferentie performance.now() plaats, die geheel gewijd is aan web performance.&lt;/p&gt;
  8753. &lt;p&gt;Met een zeer mooie rij aan sprekers zoals Steve Souders, Tammy Everts en Scott Jehl en onderwerpen zoals JavaScript, fonts, afbeeldingen en PWA&#39;s, is dit een zeer interessante conferentie voor elke webontwikkelaar. En georganiseerd door een ervaren team (Mobilism, CSS Day) dat zorgt dat alles piekfijn is geregeld.&lt;/p&gt;
  8754. &lt;p&gt;Alle informatie is te vinden op de website van &lt;a href=&quot;https://perfnow.nl/&quot;&gt;performance.now()&lt;/a&gt;.&lt;/p&gt;
  8755. &lt;p&gt;In plaats van 550 euro, betalen Fronteersleden 450 euro (ex. BTW), een mooie korting dus.&lt;/p&gt;
  8756. &lt;p&gt;Als je als Fronteerslid gebruik wilt maken van deze korting, stuur dan even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;een berichtje naar het bestuur&lt;/a&gt;. Je ontvangt dan alle informatie om een kaartje met korting te kopen.&lt;/p&gt;
  8757. </content>
  8758.  </entry>
  8759.  <entry>
  8760.    <title>Word nu lid van Fronteers en krijg korting op Fronteers Conference 2018 én 2019!</title>
  8761.    <link href="https://www.fronteers.nl/nl/blog/2018/08/word-nu-lid-van-fronteers-en-krijg-korting-op-fronteers-conference-2018-n-2019"/>
  8762.    <updated>2018-08-23T00:00:00Z</updated>
  8763.    <id>https://www.fronteers.nl/nl/blog/2018/08/word-nu-lid-van-fronteers-en-krijg-korting-op-fronteers-conference-2018-n-2019</id>
  8764.    <content xml:lang="nl" type="html">&lt;p&gt;Heb je nog geen kaartje voor &lt;a href=&quot;https://www.fronteers.nl/congres/2018&quot;&gt;Fronteers Conference&lt;/a&gt;? En je bent ook nog geen lid van &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging&quot;&gt;Fronteers&lt;/a&gt;? Heb jij even geluk! Want als je nu lid wordt van Fronteers, krijg je niet alleen korting voor Fronteers Conference 2018, maar ook voor 2019!&lt;/p&gt;
  8765. &lt;p&gt;Wat moet je daarvoor doen? &lt;a href=&quot;https://www.fronteers.nl/inschrijven&quot;&gt;Meld je aan als lid van Fronteers&lt;/a&gt; voor 2018 en 2019, dat is alles. Je betaalt € 108,90 en krijgt dan niet alleen korting voor Fronteers Conference, maar ook voor &lt;a href=&quot;https://www.fronteers.nl/vereniging/ledenkorting&quot;&gt;workshops, vakgerelateerde boeken en online cursussen&lt;/a&gt;.&lt;/p&gt;
  8766. &lt;p&gt;Voor Fronteers Conference betaal je dan nog maar € 305,- in plaats van € 395,-. En de ledenkorting geldt ook alvast voor volgend jaar!&lt;/p&gt;
  8767. &lt;p&gt;Fronteers Conference is een van de meest toonaangevende conferences in Europa op het gebied van front-end development. Met 16 sprekers verspreid over twee dagen - en twee workshops voorafgaand aan de conferentie - is het hét evenement voor webdevelopend Nederland. Dat wil je toch niet missen?&lt;/p&gt;
  8768. &lt;p&gt;Dit jaar vindt Fronteers Conference plaats op 4 en 5 oktober 2018 in het DeLaMar Theater in Amsterdam. &lt;a href=&quot;https://www.fronteers.nl/_downloads/2018/convince-your-employer-nl.pdf&quot;&gt;Overtuig alvast je werkgever&lt;/a&gt; terwijl jij &lt;a href=&quot;https://www.fronteers.nl/inschrijven&quot;&gt;je inschrijft voor Fronteers&lt;/a&gt;.&lt;/p&gt;
  8769. </content>
  8770.  </entry>
  8771.  <entry>
  8772.    <title>Tijdelijke korting op online cursussen van Egghead.io</title>
  8773.    <link href="https://www.fronteers.nl/nl/blog/2018/08/tijdelijke-korting-op-online-cursussen-van-egghead-io"/>
  8774.    <updated>2018-08-02T00:00:00Z</updated>
  8775.    <id>https://www.fronteers.nl/nl/blog/2018/08/tijdelijke-korting-op-online-cursussen-van-egghead-io</id>
  8776.    <content xml:lang="nl" type="html">&lt;p&gt;Als je je graag nieuwe dingen leert door het kijken van online video-tutorials, dan heeft Fronteers nu voor leden een leuk ledenvoordeel binnengesleept! Als lid krijg je tot 11 oktober 2018 maar liefst 40% korting op een Pro abonnement bij Egghead.io. Je betaalt dan 150 dollar per jaar - 12,50 per maand!&lt;/p&gt;
  8777. &lt;p&gt;Om van dit aanbod gebruik te maken stuur je een &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;e-mail naar het bestuur&lt;/a&gt; en benoem je daarin dat je interesse hebt in de actie met Egghead.io. Nadat is vastgesteld dat je lid bent van de vereniging krijg je dan een kortingslink opgestuurd waarmee je een Pro-account kunt aanmaken (of je account kunt upgraden)!&lt;/p&gt;
  8778. &lt;p&gt;Als &lt;em&gt;pro member&lt;/em&gt; kun je online video-cursussen volgen over CSS, JavaScript, Angular, React, Vue, Node, Docker Git enzovoorts. Je krijgt toegang tot het complete assortiment en &lt;a href=&quot;https://egghead.io/instructors&quot;&gt;je leert van doorgewinterde developers&lt;/a&gt; als Kent C. Dodds, Marcy Sutton, Max Stoiber, Sarah Drasner en meer. Bekijk hier &lt;a href=&quot;https://egghead.io/browse/frameworks&quot;&gt;het complete aanbod van Egghead cursussen&lt;/a&gt;!&lt;/p&gt;
  8779. </content>
  8780.  </entry>
  8781.  <entry>
  8782.    <title>A Book Apart actie voor Fronteersleden</title>
  8783.    <link href="https://www.fronteers.nl/nl/blog/2018/07/a-book-apart-korting-voor-fronteersleden"/>
  8784.    <updated>2018-07-30T00:00:00Z</updated>
  8785.    <id>https://www.fronteers.nl/nl/blog/2018/07/a-book-apart-korting-voor-fronteersleden</id>
  8786.    <content xml:lang="nl" type="html">&lt;p&gt;Voor fans van de snel-bijgepraat-worden-over-een-onderwerp boeken van A Book Apart hebben we goed nieuws: Fronteersleden kunnen deze zomer flink besparen op het aanvullen van hun (thuis)bibliotheek! De boeken zijn gemiddeld 130 pagina&#39;s, lezen vlot weg en zijn fraai vormgegeven. Omdat ze zo&#39;n sterke focus hebben over een bepaald onderwerp binnen webdevelopment heb je er ook een langere tijd plezier van!&lt;/p&gt;
  8787. &lt;h2&gt;Hoe maak je gebruik van de korting?&lt;/h2&gt;
  8788. &lt;p&gt;Bestel vòòr 10 september met een speciale (&lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;discountcode op te vragen bij het bestuur&lt;/a&gt;) en bespaar 12 dollar verzendkosten per boekje! De bestellingen worden voor Fronteers verzameld en als batch verzonden. De vereniging neemt de verzendkosten op zich en jij kunt je aankopen (met vertoning van je bon op mobiel of uitgeprint) afhalen op het Fronteers congres of de Algemene Ledenvergadering.&lt;/p&gt;
  8789. &lt;h2&gt;Tips vanuit het Fronteersbestuur&lt;/h2&gt;
  8790. &lt;p&gt;Wij zijn erg tevreden met &amp;quot;Going Offline&amp;quot; van Jeremy Keith (over service workers, waarmee je websites ook offline kunt blijven aanbieden aan je gebruikers) en &amp;quot;Working the command line&amp;quot; van Remy Sharp. Maar vergeet ook niet &amp;quot;The New CSS Layout&amp;quot; van Rachel Andrew, die je in 131 pagina&#39;s helemaal up to date brengt met CSS Grid Layout, of &amp;quot;Accessibility for everyone&amp;quot; van Laura Kalbag, waarin je een goede start maakt als je toegankelijker websites wilt maken. Hier vind je een &lt;a href=&quot;https://abookapart.com/products&quot;&gt;compleet overzicht van de A Book Apart boeken&lt;/a&gt;.&lt;/p&gt;
  8791. &lt;p&gt;Wil je graag meer tips? &lt;a href=&quot;https://fronteers-slack.herokuapp.com/&quot;&gt;Meld je aan voor de Fronteers Slack&lt;/a&gt; en vraag de aanwezigen naar hun ervaringen!&lt;/p&gt;
  8792. </content>
  8793.  </entry>
  8794.  <entry>
  8795.    <title>Meld je nu aan voor de ALV 2018</title>
  8796.    <link href="https://www.fronteers.nl/nl/blog/2018/07/meld-je-nu-aan-voor-de-alv-2018"/>
  8797.    <updated>2018-07-24T00:00:00Z</updated>
  8798.    <id>https://www.fronteers.nl/nl/blog/2018/07/meld-je-nu-aan-voor-de-alv-2018</id>
  8799.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdagavond 19 oktober houden we onze jaarlijkse algemene ledenvergadering (ALV). Alle leden zijn hiervoor van harte uitgenodigd. De vergadering vindt plaats in het La Vie Meeting Center in Utrecht, dezelfde locatie als in 2017.&lt;/p&gt;
  8800. &lt;p&gt;Voor de mensen die van ver komen (of gewoon geen zin hebben om te koken) zullen er vanaf 18:30 broodjes klaar staan. De vergadering zelf zal stipt om 19:00 uur beginnen. We verwachten dat de totale vergadering twee uur zal duren, maar de ervaring leert dat het nog weleens wil uitlopen. De voorzitster doet haar best dat zoveel mogelijk te beperken. Als dit je eerste keer is, &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/alv&quot;&gt;vertellen we je graag meer over de ALV&lt;/a&gt;.&lt;/p&gt;
  8801. &lt;p&gt;&lt;em&gt;De lokatie is inmiddels bekend: Net als vorig jaar zijn we te gast bij het La Vie Meeting Center, St Jacobsstraat 61, 3511 BP Utrecht. Dit is ongeveer vijf tot tien minuten lopen vanaf Utrecht Centraal Station.&lt;/em&gt;&lt;/p&gt;
  8802. &lt;p&gt;Het staat leden tot het begin van de ALV vrij voorstellen voor de agenda in te dienen. De voorlopige agenda voor de ALV wordt op dinsdag 26 september bekendgemaakt. Wat in ieder geval zal worden behandeld zijn de jaarstukken van de vereniging over 2017, de financiën over 2018 en de nieuwe begroting voor 2019. Deze stukken zullen enkele dagen voor de ALV naar alle aangemelde aanwezigen worden opgestuurd. Mocht je niet aanwezig kunnen zijn, maar deze informatie wel willen zien: laat het ons weten!&lt;/p&gt;
  8803. &lt;h2&gt;Voorlopige agenda&lt;/h2&gt;
  8804. &lt;ul&gt;
  8805. &lt;li&gt;Opening&lt;/li&gt;
  8806. &lt;li&gt;Jaarrekening 2017&lt;/li&gt;
  8807. &lt;li&gt;Bevindingen kascommissie&lt;/li&gt;
  8808. &lt;li&gt;Benoeming nieuwe kascommissie&lt;/li&gt;
  8809. &lt;li&gt;Financiën 2018&lt;/li&gt;
  8810. &lt;li&gt;Begroting 2019&lt;/li&gt;
  8811. &lt;li&gt;Stemming over het mogelijk &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2018/09/fronteers-als-w3c-lid&quot;&gt;W3C-lidmaatschap&lt;/a&gt;&lt;/li&gt;
  8812. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  8813. &lt;li&gt;Evaluatie congres&lt;/li&gt;
  8814. &lt;li&gt;Rondvraag&lt;/li&gt;
  8815. &lt;li&gt;Sluiting&lt;/li&gt;
  8816. &lt;/ul&gt;
  8817. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  8818. &lt;p&gt;Ben je van plan te komen, dan vragen we je vriendelijk je hieronder hiervoor in te schrijven, zodat we enigszins een idee hebben van de verwachte opkomst.&lt;/p&gt;
  8819. </content>
  8820.  </entry>
  8821.  <entry>
  8822.    <title>Workshop React Native</title>
  8823.    <link href="https://www.fronteers.nl/nl/blog/2018/05/workshop-react-native"/>
  8824.    <updated>2018-05-28T00:00:00Z</updated>
  8825.    <id>https://www.fronteers.nl/nl/blog/2018/05/workshop-react-native</id>
  8826.    <content xml:lang="nl" type="html">&lt;p&gt;Heb je altijd al willen weten hoe je een native app voor mobiel ontwikkelt? Geef je dan op voor de &lt;a href=&quot;https://www.fronteers.nl/workshops/workshop-react-native&quot;&gt;Fronteers workshop React Native&lt;/a&gt; op vrijdag 29 juni in Utrecht.&lt;/p&gt;
  8827. &lt;p&gt;React Native is de ultieme manier om als front-end developer kennis te maken met mobile app ontwikkeling. Wat zijn de specifieke wensen die mobile apps aan ons stellen die wij als web developer niet kennen? Roy Derks, een ervaren mobile én React developer, neemt je in één dag mee in de wereld van React en Mobile Development.&lt;/p&gt;
  8828. &lt;p&gt;In de workshop - waarvoor geen kennis van React noodzakelijk is - leer je eerst de basics van React en React Native, om deze later toe te passen bij het bouwen van een mobile app. Aan het eind van de dag heb je een goed beeld van het zelf bouwen van een mobiele app.&lt;/p&gt;
  8829. </content>
  8830.  </entry>
  8831.  <entry>
  8832.    <title>Kaartverkoop Fronteers Conference vandaag van start</title>
  8833.    <link href="https://www.fronteers.nl/nl/blog/2018/05/kaartverkoop-fronteers-conference-vandaag-van-start"/>
  8834.    <updated>2018-05-03T00:00:00Z</updated>
  8835.    <id>https://www.fronteers.nl/nl/blog/2018/05/kaartverkoop-fronteers-conference-vandaag-van-start</id>
  8836.    <content xml:lang="nl" type="html">&lt;p&gt;Vanmiddag om 12 uur starten we met de kaartverkoop voor Fronteers Conference! Via &lt;a href=&quot;https://tickets.fronteers.nl/&quot;&gt;onze ticketshop&lt;/a&gt; kun je kaarten kopen. Is dit de eerste keer dat je een kaart voor het congres koopt? &lt;a href=&quot;https://www.fronteers.nl/congres/2018/tickets&quot;&gt;We leggen je graag uit hoe het werkt&lt;/a&gt;.&lt;/p&gt;
  8837. &lt;p&gt;Leden van Fronteers hebben afgelopen week een kortingscode in de mailbox gehad waarmee ze een flinke korting krijgen op de ticketprijs. Heb je geen kortingscode gehad, maar was je al wel lid ten tijde van de aankondiging van het congres en heb je ook je lidmaatschap op tijd betaald? Dan kun je het beste een mailtje sturen naar &lt;a href=&quot;mailto:conference@fronteers.nl&quot;&gt;conference@fronteers.nl&lt;/a&gt; met &lt;a href=&quot;mailto:penningmeester@fronteers.nl&quot;&gt;penningmeester@fronteers.nl&lt;/a&gt; in de cc.&lt;/p&gt;
  8838. &lt;p&gt;Laat je door je werkgever meerdere kaarten kopen voor je team en zijn jij en je collega&#39;s lid van Fronteers? Zorg dan dat de persoon die de kaarten bestelt de kortingscodes heeft zodat ze gebruik kunnen maken van de korting!&lt;/p&gt;
  8839. &lt;h2&gt;Fronteers Conference&lt;/h2&gt;
  8840. &lt;p&gt;Fronteers Conference vindt dit jaar plaats op 4-5 oktober in het DeLaMar theater in Amsterdam. Het bestuur plaatste in april een &lt;a href=&quot;https://www.fronteers.nl/blog/2018/04/fronteers-conference-in-2018-in-het-delamar-theater&quot;&gt;nieuwsbericht over de nieuwe lokatie&lt;/a&gt;. Meer informatie kun je vinden op de &lt;a href=&quot;https://fronteers.nl/congres/2018&quot;&gt;Fronteers Conference website&lt;/a&gt;.&lt;/p&gt;
  8841. </content>
  8842.  </entry>
  8843.  <entry>
  8844.    <title>Fronteers Conference in 2018 in het DeLaMar Theater!</title>
  8845.    <link href="https://www.fronteers.nl/nl/blog/2018/04/fronteers-conference-in-2018-in-het-delamar-theater"/>
  8846.    <updated>2018-04-16T00:00:00Z</updated>
  8847.    <id>https://www.fronteers.nl/nl/blog/2018/04/fronteers-conference-in-2018-in-het-delamar-theater</id>
  8848.    <content xml:lang="nl" type="html">&lt;p&gt;Heugelijk nieuws! Ons jaarlijkse congres, &lt;a href=&quot;https://fronteers.nl/congres/2018&quot;&gt;Fronteers Conference&lt;/a&gt; vindt dit jaar voor het eerst sinds 2010 niet plaats in Pathé Tuschinski, maar verhuist naar een grotere lokatie. Er is hard gezocht naar een plek in Amsterdam die centraal ligt, meer mensen kan huizen dan Tuschinski (waar we aan een maximum van 550 zaten) maar waar we in sfeer niets hoeven in te leveren. Uiteindelijk is de keuze gevallen op het DeLaMar Theater, waar we rond de 900 personen kunnen verwelkomen. De conferentie vindt plaats op 4 en 5 oktober 2018.&lt;/p&gt;
  8849. &lt;p class=&quot;note&quot;&gt;
  8850. [This article is also available in English](/congres/2018/fronteers-conference-moving-to-the-delamar-theatre)
  8851. &lt;/p&gt;
  8852. &lt;h2&gt;Waarom deze verhuizing van het &#39;grote&#39; congres?&lt;/h2&gt;
  8853. &lt;ul&gt;
  8854. &lt;li&gt;De kaartverkoop voor het congres gaat ieder jaar razendsnel en dit maakte het voor veel mensen lastig om een kaartje te kopen. Je moest precies online zijn als de online verkoop startte, want in enkele minuten waren we door een batch heen. Dit zat ons als bestuur dwars, omdat we het liefst iedereen die wil komen welkom willen heten.&lt;/li&gt;
  8855. &lt;li&gt;Tegelijkertijd waren (en zijn) we nog steeds erg aan Tuschinski gehecht, en wisten we dat we met een grotere lokatie potentieel een stuk sfeer en gevoel van gezelligheid kwijt zouden raken. We denken nu dat we een mooi medium hebben gevonden in het DeLaMar theater!&lt;/li&gt;
  8856. &lt;li&gt;Tuschinski wordt nu de lokatie voor een Spring Conference op 5 april 2019.&lt;/li&gt;
  8857. &lt;/ul&gt;
  8858. &lt;h2&gt;Toegankelijkheid van het DeLaMar Theater&lt;/h2&gt;
  8859. &lt;p&gt;Tegelijkertijd betekent deze nieuwe lokatie ook dat meer mensen de kans kunnen krijgen om er bij te zijn. Fronteers hecht enorm aan diversiteit (in alle vormen) en helaas heeft Tuschinski een aantal letterlijke drempels. Als je in een rolstoel zit of met krukken loopt is dat niet ideaal. Het DeLaMar Theater is geheel rolstoeltoegankelijk en er zijn liften. Daarnaast beschikt het DeLaMar Theater over een ringleiding, en zijn daarvoor koptelefoons en inductielussen (voor gehoorapparaten) beschikbaar. Uiteraard mag je blindengeleidehond ook mee, en zorgen we weer voor een schrijftolk die er alle presentaties bij is. Als je dat fijn vindt, zorgen we voor een vrijwilliger die je tijdens het congres begeleidt.
  8860. &lt;a href=&quot;https://delamar.nl/mindervaliden/&quot;&gt;Bekijk alle faciliteiten van het DeLaMar Theater voor mindervaliden&lt;/a&gt;&lt;/p&gt;
  8861. &lt;p&gt;We zijn heel erg blij dat we deze nieuwe lokatie kunnen aankondigen en hopen dat het komende congres weer één groot feest wordt!&lt;/p&gt;
  8862. </content>
  8863.  </entry>
  8864.  <entry>
  8865.    <title>CSS Day komt er weer aan: een gesprek met Peter-Paul Koch</title>
  8866.    <link href="https://www.fronteers.nl/nl/blog/2018/04/css-day-komt-er-weer-aan-een-gesprek-met-peter-paul-koch"/>
  8867.    <updated>2018-04-12T00:00:00Z</updated>
  8868.    <id>https://www.fronteers.nl/nl/blog/2018/04/css-day-komt-er-weer-aan-een-gesprek-met-peter-paul-koch</id>
  8869.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 14 en vrijdag 15 juni vindt in het Compagnietheater in Amsterdam het congres &lt;a href=&quot;https://cssday.nl/2018&quot;&gt;CSS Day&lt;/a&gt; plaats. Net als de afgelopen twee jaar bestaat het congres nu uit twee dagen: een UX Special op de donderdag, en een &#39;gewone&#39; CSS Day op de vrijdag.&lt;/p&gt;
  8870. &lt;p&gt;Fronteers-leden krijgen &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;met een mailtje naar het bestuur&lt;/a&gt; korting op beide: 25 euro op een eendagsticket, of 50 euro op een ticket voor beide dagen. Ook hebben we voor leden &lt;a href=&quot;https://www.fronteers.nl/blog/2018/04/korting-op-de-workshops-van-css-day&quot;&gt;korting voor de workshops geregeld&lt;/a&gt;!&lt;/p&gt;
  8871. &lt;p&gt;&lt;a href=&quot;https://webconferences.nl/&quot;&gt;Web Conferences Amsterdam&lt;/a&gt;, het team achter dit congres, is mede opgericht door Fronteers-oprichter en spreker Peter-Paul Koch. CSS Day gaat nu haar tweede lustrum in, hoog tijd om eens met PPK bij te praten!&lt;/p&gt;
  8872. &lt;p&gt;&lt;em&gt;FRONTEERS: PPK, samen met Krijn Hoetmer en Martijn van Duuren organiseer je dit jaar alweer voor de zesde keer CSS Day. Dit is maar liefst het zeventiende congres dat jullie als Web Conferences Amsterdam organiseren sinds 2011. Wat houdt jullie gemotiveerd om dit te doen?&lt;/em&gt;&lt;/p&gt;
  8873. &lt;p&gt;&lt;em&gt;PPK:&lt;/em&gt; 17e? Wow. Ik had het niet zo door, maar ik heb net geteld en je hebt gelijk. Met performance.now() erbij komt het dus op 18.&lt;/p&gt;
  8874. &lt;p&gt;Mijn oorspronkelijke idee was simpel:&lt;/p&gt;
  8875. &lt;ol&gt;
  8876. &lt;li&gt;Ik had wat ervaring opgedaan met Fronteers 2008 en 2009, en Krijn daarnaast nog met Fronteers 2010&lt;/li&gt;
  8877. &lt;li&gt;Het mobiele web stond destijds op uitbarsten, en er was nog geen dedicated congres voor.&lt;/li&gt;
  8878. &lt;li&gt;Ik zag een mogelijkheid om wat extra inkomen te verdienen met zo&#39;n congres.&lt;/li&gt;
  8879. &lt;/ol&gt;
  8880. &lt;p&gt;Dus heb ik Krijn en Stephen Hay uitgenodigd om mee te doen, en zijn we met Mobilism 2011 van start gegaan. Dat was het juiste congres op de juiste tijd, en het was een paar jaar zeer succesvol. Toen kwam er echter de klad in, voornamelijk doordat mobiel mainstream ging, en er geen speciale congressen meer voor nodig waren. Ook ging Stephen van freelance naar een vaste baan, en viel hij uit.&lt;/p&gt;
  8881. &lt;p&gt;Intussen hadden we echter Adobe PhoneGap als klant gekregen voor hun jaarlijkse EU-congres, en was Krijn op het lumineuze idee van CSS Day gekomen. Dus gingen we vrolijk zonder Mobilism verder.&lt;/p&gt;
  8882. &lt;p&gt;Qua motivatie: het is eigenlijk niet zo moeilijk. We hebben het grote voordeel dat we, net zoals het Fronteers-congres, een draaiboek hebben dat we voor elk congres kunnen gebruiken. Derhalve is een nieuwe editie van een bestaand congres een kwestie van een paar belletjes en mailtjes, en iedereen staat weer voor ons klaar. Wel moeten we zelf nog sprekers en marketing doen, en dat heeft wat meer voeten in de aarde, maar we kunnen ons hier helemaal op concentreren.&lt;/p&gt;
  8883. &lt;p&gt;Een nieuw congres opzetten kost meer werk, omdat we een helder concept moeten hebben, alsmede een nieuwe huisstijl, een nieuwe site, een nieuw Twitter-account en wellicht een nieuwe tone-of-voice. Maar opnieuw, locatie, kaartverkoopsysteem, techniek, catering en wifi staan klaar, en daar hoeven we weinig aan te doen.&lt;/p&gt;
  8884. &lt;p&gt;En het is erg leuk een eigen line-up te verzinnen, zoals iedereen die in de Fronteers congrescommissie heeft gezeten, weet. Tenslotte zijn al onze congressen commercieel, waardoor we sprekers kunnen betalen en er zelf ook wat aan overhouden.&lt;/p&gt;
  8885. &lt;p&gt;En toen we een beetje uitgekeken begonnen te raken op het CSS Day-concept, besloten we het met een dag uit te breiden waarop een ander onderwerp besproken werd. Ook dat was een succes, en we denken dat we met de combinatie van UX en CSS nu de juiste vorm hebben gevonden.&lt;/p&gt;
  8886. &lt;p&gt;&lt;em&gt;FRONTEERS: Welk proces maken jullie door in de selectie van sprekers?&lt;/em&gt;&lt;/p&gt;
  8887. &lt;p&gt;&lt;em&gt;PPK:&lt;/em&gt; Een paar lijstjes, veel warrige discussies, en dan nemen we ad-hoc beslissingen als het echt moet. Het helpt dat alleen Krijn en ik hierbij betrokken zijn, waarbij Krijn meestal voor de nieuwe, onbekende namen gaat en ik voor de gevestigde namen die voor wat kaartverkoop zorgen. We hebben beide nodig voor een succesvol congres, dus ons proces werkt eigenlijk prima. We zijn het niet altijd eens, maar, zoals een voormalige werkgever van me zei, &amp;quot;zonder wrijving geen glans.&amp;quot;&lt;/p&gt;
  8888. &lt;p&gt;Alleen bij performance.now() hebben we het gros van de sprekerselectie overgedaan aan Steve Souders en Tim Kadlec, omdat zij de performance-wereld veel beter kennen dan wij. We hebben nog steeds een stem in het kapittel, maar Steve en Tim nemen het voortouw. Dat is best leuk voor de verandering.&lt;/p&gt;
  8889. &lt;p&gt;&lt;em&gt;FRONTEERS: Jullie hebben ook een nieuw congres op stapel staan- &lt;a href=&quot;https://perfnow.nl/&quot;&gt;performance.now()&lt;/a&gt;, kun je daar iets meer over vertellen? Hoe lang zijn jullie daar &#39;stiekem&#39; mee bezig geweest?&lt;/em&gt;&lt;/p&gt;
  8890. &lt;p&gt;&lt;em&gt;PPK:&lt;/em&gt; Het zaadje werd geplant toen Tim Kadlec in mei 2017 een nacht in Amsterdam moest doorbrengen wegens complexe vliegtuigconnecties, en we gingen eten. Hij vertelde me toen dat O&#39;Reilly flinke wijzigingen had doorgevoerd. De performance-track van Velocity, die ze jarenlang in Europa en Amerika hadden gedraaid en waarvan Steve Souders program chair was, bleek te worden overgeheveld naar Fluent, en de Europese editie van Fluent werd afgeschaft. Ergo: op de Europese markt kwam ruimte vrij voor een performance-congres. Dus als we daar iets mee wilden doen...&lt;/p&gt;
  8891. &lt;p&gt;We hebben hier een tijdje over nagedacht, en besloten in september het te doen. We hebben toen Steve en Tim gevraagd om ons te helpen, en zei zeiden beide Ja. Toen kwam er een hoop geharrewar over de datum, omdat Tim en Steve ons wisten te vertellen dat er in mei een ander performance-congres in Londen zou plaatsvinden. Mei viel dus af, en juni wegens CSS Day, en oktober wegens Fronteers, en september omdat het Compagnietheater alleen beschikbaar was tijdens de IBC, als hotelprijzen in Amsterdam de pan uit rijzen, als je al iets kunt krijgen (zie ook Fronteers 2008). Dus: november.&lt;/p&gt;
  8892. &lt;p&gt;Toen hebben we Steve en Tim verzocht lijsten met sprekers te maken, en hebben we er een aantal aangezocht. We hebben Hidde ingehuurd voor het grafisch ontwerp, en een paar dagen geleden besloten we dat het tijd was. Dus performance.now() is on, 8-9 november, Amsterdam.&lt;/p&gt;
  8893. &lt;p&gt;&lt;em&gt;FRONTEERS: Wat is iets waar jullie het meest trots op zijn in de afgelopen jaren dat jullie evenementen organiseren?&lt;/em&gt;&lt;/p&gt;
  8894. &lt;p&gt;&lt;em&gt;PPK:&lt;/em&gt; Eigenlijk het feit dat het concept dat we in 2010 hebben opgesteld, nog steeds heel redelijk werkt. Te weten: zelf de line-up vaststellen aan de hand van de onderwerpen die we besproken willen hebben (en we hebben tot nu toe &lt;a href=&quot;https://webconferences.nl/speakers&quot;&gt;120 unieke sprekers&lt;/a&gt; naar Amsterdam gehaald), opbouw van een vast klantenbestand, geen invloed van sponsoren (of recruiters - brrrr) op de inhoud, en een kaartprijs die onze doelgroep bereid is te betalen en die ons ook in staat stelt het desnoods zonder sponsors te redden.&lt;/p&gt;
  8895. &lt;p&gt;&lt;em&gt;FRONTEERS: Peter-Paul, je hebt aan de wieg gestaan van Fronteers, de vakvereniging, en je hebt je wel eens kritisch uitgelaten over de focus op Javascript-frameworks. Dekt volgens jou de titel &#39;frontend developer&#39; de lading nog wel?&lt;/em&gt;&lt;/p&gt;
  8896. &lt;p&gt;&lt;em&gt;PPK:&lt;/em&gt; Goeie vraag. Kort antwoord: ik weet het niet.&lt;/p&gt;
  8897. &lt;p&gt;Lang antwoord: ik denk dat er een splitsing gaande is tussen heavy-duty JavaScripters aan de ene kant, en meer traditionele HTML/CSS/JavaScript web developers aan de andere kant. Wie van de twee groepen mag zich &amp;quot;de echte front-ender&amp;quot; noemen? Ik heb wel een mening, maar anderen zullen een andere mening hebben.&lt;/p&gt;
  8898. &lt;p&gt;Wat mij betreft is het gevaarlijkste aspect van de huidige framework-rage het feit dat front-end developers het zicht verliezen op de platforms waarop hun software draait: de browsers. Zeker, vele problemen zijn verdwenen dankzij de noeste arbeid van de browsermakers zelf, en sommige andere worden efficiënt opgelost door de frameworks. Maar als je nu als moderne JavaScripter een van de weinige overgebleven browser bugs tegenkomt, heb je geen flauw idee wat je moet doen. Dat kan een probleem zijn.&lt;/p&gt;
  8899. &lt;p&gt;Tevens lijkt het er op dat de heavy-duty JavaScripters CSS niet meer begrijpen, en wellicht zelfs niet meer &lt;em&gt;willen&lt;/em&gt; begrijpen. Hier wil ik iets aan doen, al weet ik nog niet precies wat.&lt;/p&gt;
  8900. &lt;p&gt;Een splitsing tussen JavaScripters enerzijds en HTML/CSS/JavaScripters anderzijds is eerder voorgekomen. Rond de dot.bust van 2001 gebeurde hetzelfde, toen de CSS-adepten zich afkeerden van de hysterische hoeveelheden JavaScript die toen in de mode waren (en in Netscape 4 moesten werken!) en die geschreven werden door back-enders die ineens ook front-end moesten doen. Uiteindelijk is die ronde glansrijk gewonnen door de HTML/CSS/JavaScripters, al kwam JavaScript een paar jaar in het verdomhoekje terecht - eigenlijk tot aan de release van jQuery in 2006.&lt;/p&gt;
  8901. &lt;p&gt;Dat wil niet zeggen dat deze keer hetzelfde zal gebeuren. De context is heel anders, en de huidige frameworks zijn niet te vergelijken met de rommelige, Netscape 4-compatibile DHTML-libraries uit 2000. Bovendien zijn er veel minder browserproblemen dan toen - de moderne front-ender heeft het maar makkelijk.&lt;/p&gt;
  8902. &lt;p&gt;Ik weet niet wat er verder gaat gebeuren, maar ik denk wel dat iedereen die zich met front-end bezighoudt, zichzelf de vraag moet stellen tot welke groep hij of zij eigenlijk behoort of wil behoren.&lt;/p&gt;
  8903. </content>
  8904.  </entry>
  8905.  <entry>
  8906.    <title>20% korting op de workshops van CSS Day!</title>
  8907.    <link href="https://www.fronteers.nl/nl/blog/2018/04/korting-op-de-workshops-van-css-day"/>
  8908.    <updated>2018-04-04T00:00:00Z</updated>
  8909.    <id>https://www.fronteers.nl/nl/blog/2018/04/korting-op-de-workshops-van-css-day</id>
  8910.    <content xml:lang="nl" type="html">&lt;p&gt;Half juni vindt CSS Day plaats. Op de dag voor de conferentie, woensdag 13 juni, organiseert CSS Day twee workshops. Leden van Fronteers krijgen 20% korting op de workshops (mits zij hun lidmaatschap voor 2018 betaald hebben). Zo betalen de leden niet 400, maar 320 euro (excl. BTW) voor een workshop!&lt;/p&gt;
  8911. &lt;p&gt;Vitaly Friedman - bekend van &lt;a href=&quot;https://www.smashingmagazine.com/&quot;&gt;Smashing Magazine&lt;/a&gt; - geeft zijn vernieuwde &lt;em&gt;Responsive Interface Design Bootcamp&lt;/em&gt;. Ideaal voor als je je kennis van responsive web design up-to-date wilt brengen. Lees meer over de workshop van Vitaly &lt;a href=&quot;https://cssday.nl/2018/workshops&quot;&gt;op de website van CSS Day&lt;/a&gt;.&lt;/p&gt;
  8912. &lt;p&gt;Sara Soueidan - bij ons natuurlijk bekend als spreekster en host van het Fronteers congres - is al jaren een gerenommeerd expert op het gebied van CSS en SVG. Zij geeft dan ook de &lt;em&gt;CSS &amp;amp; SVG Power Combo&lt;/em&gt;. Vind de details op &lt;a href=&quot;https://cssday.nl/2018/workshops&quot;&gt;de workshoppagina van CSS Day&lt;/a&gt;.&lt;/p&gt;
  8913. &lt;p&gt;Als je als Fronteerslid gebruik wilt maken van deze 20%-korting stuur dan even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;een berichtje naar het bestuur&lt;/a&gt;. Je ontvangt dan een speciale link waarmee je je workshopticket met korting kunt bestellen.&lt;/p&gt;
  8914. &lt;p&gt;Overigens kun je als Fronteerslid ook korting krijgen voor CSS Day zelf. Fronteersleden krijgen via een speciale link €25 of €50 korting op de reguliere toegangsprijs (Je betaalt dus maar €275 voor 1 dag, of €500 euro voor 2 dagen!). Bij interesse mag je &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact opnemen met het bestuur&lt;/a&gt;.&lt;/p&gt;
  8915. </content>
  8916.  </entry>
  8917.  <entry>
  8918.    <title>Vrijwilligers gezocht!</title>
  8919.    <link href="https://www.fronteers.nl/nl/blog/2018/03/vrijwilligers-gezocht"/>
  8920.    <updated>2018-03-04T00:00:00Z</updated>
  8921.    <id>https://www.fronteers.nl/nl/blog/2018/03/vrijwilligers-gezocht</id>
  8922.    <content xml:lang="nl" type="html">&lt;p&gt;Fronteers is op zoek naar nieuwe vrijwilligers om te helpen bij het behalen van de ambitieuze plannen die we hebben als vereniging. Help je mee?&lt;/p&gt;
  8923. &lt;p&gt;Op dit moment hebben we helaas niet de capaciteit om (veel) activiteiten in Nederland te organiseren. We zijn dus hard op zoek naar vrijwilligers die het leuk vinden om onder de vlag van Fronteers dit initiatief te ontplooien. Wil je ons helpen? &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/vrijwilligers/activiteiten&quot;&gt;Bekijk hier de vacature voor de activiteitencommissie&lt;/a&gt;!&lt;/p&gt;
  8924. &lt;p&gt;Hiernaast heeft de commissie Workshops behoefte aan 1 tot 2 actieve vrijwilligers die kunnen helpen om workshops te organiseren. &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/vrijwilligers/workshops&quot;&gt;Bekijk hier de vacature voor de workshopscommissie&lt;/a&gt;!&lt;/p&gt;
  8925. </content>
  8926.  </entry>
  8927.  <entry>
  8928.    <title>Bestuurs Update Maart 2018</title>
  8929.    <link href="https://www.fronteers.nl/nl/blog/2018/03/bestuurs-update-maart-2018"/>
  8930.    <updated>2018-03-04T00:00:00Z</updated>
  8931.    <id>https://www.fronteers.nl/nl/blog/2018/03/bestuurs-update-maart-2018</id>
  8932.    <content xml:lang="nl" type="html">&lt;p&gt;Het nieuwe jaar is goed begonnen en het bestuur is actief geweest op het gebied van ledenadministratie en vrijwilligers. Zo zijn alle commissie-pagina&#39;s op de website geüpdate, zijn een aantal commissies tijdelijk opgeheven, hernoemd of samengevoegd en hebben we er een aantal vrijwilligers bij! In deze bestuursupdate vertellen we je er meer over.&lt;/p&gt;
  8933. &lt;h2&gt;We willen graag vaker afspreken&lt;/h2&gt;
  8934. &lt;p&gt;Op 12 januari hebben we een gezellige nieuwjaarsbijeenkomst gehad in Utrecht. Tijdens deze borrel kwam het idee naar voren om weer vaker spontane vrijdagmiddagborrels te organiseren. We hopen dit binnenkort eens uit te proberen in Amsterdam!&lt;/p&gt;
  8935. &lt;h2&gt;Vrijwilligerskorting&lt;/h2&gt;
  8936. &lt;p&gt;In januari stelden we ons als bestuur als doel om de vrijwilligerslijsten op de website up-to-date te krijgen. Dit had onder andere te maken met de facturatieronde die er aan zat te komen. Vrijwilligers krijgen namelijk vanaf dit jaar korting op hun lidmaatschap op de vereniging en een voucher voor een Fronteers workshop. Leden die ná het moment van factureren vrijwilliger zijn geworden, krijgen geen korting op het lidmaatschap in 2018 maar wel een workshopvoucher (en korting vanaf de volgende facturatieronde).&lt;/p&gt;
  8937. &lt;h2&gt;Nieuwe commissies &amp;amp; nieuwe vrijwilligers&lt;/h2&gt;
  8938. &lt;p&gt;Inmiddels hebben we contact gehad met alle vrijwilligers en zijn de &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/commissies&quot;&gt;commissiepagina&#39;s op de website&lt;/a&gt; bijgewerkt. De commissie Online Community is samengevoegd met de commissie Marketing en de commissies Onderwijs en Webtoegankelijkheid zijn (tijdelijk) opgeheven.
  8939. Er zijn twee commissies bij gekomen: Toegankelijkheid (met Jules Ernst) en Vacatures (met Bernard Nijenhuis). Bernard viert dit jaar maar liefst zijn vijfjarig jubileum als de vrijwilliger die de vacaturebank voor ons onderhoudt! Bernards&#39; inzet was tot nu toe vrij onzichtbaar, maar heeft nu een net plekje op de site. Heel erg bedankt Bernard.
  8940. Daarnaast zijn we heel blij dat er drie nieuwe vrijwilligers bij gekomen als leden van de Congrescommissie: Niels Leenheer, Nienke Dekker en Tamara Forza!
  8941. Dan nog een speciale shout-out naar de commissie België: uitgegroeid tot een bruisende commissie die met regelmaat meetups organiseert. Hier worden ook video-opnames van gemaakt; hou onze socials in de gaten, er zullen binnenkort filmpjes worden gelinkt.
  8942. &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/vrijwilligers&quot;&gt;Voor de commissies Activiteiten en Workshops zoeken we nieuwe vrijwilligers&lt;/a&gt;.&lt;/p&gt;
  8943. &lt;h2&gt;Kortingscodes&lt;/h2&gt;
  8944. &lt;p&gt;Ook steunen we met Fronteers een aantal toffe events die dit jaar zijn aangekondigd; &lt;a href=&quot;https://cssday.nl/&quot;&gt;CSS Day&lt;/a&gt; (14 en 15 juni) en &lt;a href=&quot;https://www.frontendunited.org/&quot;&gt;Frontend United&lt;/a&gt; (31 mei t/m 2 juni). Voor beide events verloten we binnenkort een kaartje! We hebben ook een kortingscode beschikbaar die Fronteersleden kunnen gebruiken om met korting naar CSS Day te gaan. Fronteers-leden krijgen hiermee €25 (1 dag) of €50 (2 dagen) korting op de reguliere toegangsprijs (€300/€550). &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;Stuur een mailtje naar het bestuur&lt;/a&gt; als je hiervan gebruik wilt maken!&lt;/p&gt;
  8945. </content>
  8946.  </entry>
  8947.  <entry>
  8948.    <title>Bestuurs Update december 2017</title>
  8949.    <link href="https://www.fronteers.nl/nl/blog/2017/12/bestuurs-update-december-2017"/>
  8950.    <updated>2017-12-30T00:00:00Z</updated>
  8951.    <id>https://www.fronteers.nl/nl/blog/2017/12/bestuurs-update-december-2017</id>
  8952.    <content xml:lang="nl" type="html">&lt;p&gt;Net zoals in het afgelopen jaar kiest het nieuwe bestuur er voor om het leeuwendeel van overleg en vergaderen te doen via een privé Slack-kanaal. Het voordeel voor het bestuur (dat vrij ver uit elkaar woont) zit hem daarin dat overleg snel plaats kan vinden en tussen de bedrijven door.&lt;/p&gt;
  8953. &lt;p&gt;Het nadeel zoals afgelopen jaar geleerd heeft is dat dit het lastiger maakt om door middel van notulen verslag te doen. Om dit probleem op te lossen heeft het Slack-team (Charis en Peter) voor ons een nieuw privé-kanaal gemaakt waarin we besluiten die we maken snel kunnen &#39;noteren&#39;, om hier de leden vervolgens maandelijks verslag van te doen!&lt;/p&gt;
  8954. &lt;h2&gt;Afgelopen maand&lt;/h2&gt;
  8955. &lt;p&gt;In November zijn alle vrijwilligers benaderd voor een bedankje vanuit de vereniging. We hebben dit in gang gezet maar het is een flinke logistieke operatie gebleken. Nog even geduld lieve mensen!&lt;/p&gt;
  8956. &lt;p&gt;Op 13 december hebben Edwin, Anneke en Sander bij elkaar gezeten in Utrecht voor een team-kick-off. We hebben het gehad over &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/doel&quot;&gt;het doel&lt;/a&gt; van Fronteers, hoe Sander de financiële en leden-administratie doet, en een stukje rolverdeling. We hebben ook besproken hoe we Fronteers beter op de kaart kunnen zetten.&lt;/p&gt;
  8957. &lt;p&gt;Op 20 december hebben we met een etentje de congrescommissie van 2017 bedankt voor hun inzet het afgelopen jaar. Thijs Reijgersberg gaat door, en Jaco Koster is ondertussen toegetreden tot de commissie. Jaco zal in 2018 de commissie voorzitten. Het tweetal vormt in de loop van januari een nieuwe commissie!&lt;/p&gt;
  8958. &lt;h2&gt;Vrijwilligers&lt;/h2&gt;
  8959. &lt;p&gt;Begin januari van het nieuwe jaar benaderen Edwin en Anneke alle vrijwilligers over hoe zij hun inzet zien in 2018. We gaan spoedig daarna actief op zoek naar nieuwe vrijwilligers voor de commissies die daar behoefte aan hebben. Anneke heeft met een aantal mensen contact gehad over het vormen van een diversiteits-denktank en pakt dit in januari op. Ook is in gesprek binnen het bestuur voorbij gekomen dat we graag meer willen doen om het bereik van Fronteers te vergroten. Hiervoor wil Anneke graag in 2018 in gesprek gaan met Charis, Koen en Michael, die zich daar nu al voornamelijk mee bezig houden op het gebied van social media en de nieuwsbrief!&lt;/p&gt;
  8960. &lt;p&gt;We hebben met elkaar in overleg bevestigd dat we als bestuur van vrijwilligers verwachten dat ze ook lid zijn van Fronteers; daar staat tegenover dat tijdens de ALV is voorgesteld om bijvoorbeeld vrijwilligers korting te geven op hun lidmaatschap en elke vrijwilliger jaarlijks gratis aan een workshop mag deelnemen. Het precieze voorstel en wie hiervoor in aanmerking komt, wordt begin januari kortgesloten met de commissievoorzitters. Zien we volgens jou iets of iemand over het hoofd? Dan hopen we dat je ons helpt door middel van een &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2017/12/bestuur@fronteers.nl&quot;&gt;mailtje&lt;/a&gt;! &lt;em&gt;Wil je zelf actief worden binnen Fronteers? Laat het ons dan weten.&lt;/em&gt;&lt;/p&gt;
  8961. &lt;h2&gt;Nieuwjaarsborrel&lt;/h2&gt;
  8962. &lt;p&gt;De nieuwjaarsborrel houden we op 12 januari bij stadskasteel Oudaen in Utrecht vanaf 18:00! Zien we je daar? &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2018/nieuwjaarsborrel&quot;&gt;Meld je aan via de Fronteers website.&lt;/a&gt;&lt;/p&gt;
  8963. &lt;h2&gt;Opgezegd&lt;/h2&gt;
  8964. &lt;ul&gt;
  8965. &lt;li&gt;We hebben besloten om te bezuinigen op twee doorlopende abonnementen die volgens ons niet langer nodig zijn. IRCCloud werd gebruikt toen de community nog gebruik maakte van IRC. Ondertussen gebruiken we al een tijdje Slack.&lt;/li&gt;
  8966. &lt;li&gt;Daarnaast hadden we 2 private repo&#39;s op GitHub. deze zijn in 2015 gebruikt voor het opslaan van bestuursnotulen en artikelen. We hebben het er kort over gehad of deze dienst kunnen doen voor de nieuwe Fronteers-website, maar daarvoor hoeven we geen (betaalde) private repo te hebben. De data is nu verhuisd naar een gratis private repository op GitLab!&lt;/li&gt;
  8967. &lt;/ul&gt;
  8968. </content>
  8969.  </entry>
  8970.  <entry>
  8971.    <title>Nieuwjaarsborrel 2018</title>
  8972.    <link href="https://www.fronteers.nl/nl/blog/2017/12/nieuwjaarsborrel-2018"/>
  8973.    <updated>2017-12-22T00:00:00Z</updated>
  8974.    <id>https://www.fronteers.nl/nl/blog/2017/12/nieuwjaarsborrel-2018</id>
  8975.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 12 januari 2018 verwelkomt Fronteers leden en niet-leden bij stadskasteel Oudaen in Utrecht voor de jaarlijkse nieuwjaarsborrel.&lt;/p&gt;
  8976. &lt;p&gt;Leden en niet-leden zijn van harte welkom om met ons het glas te komen heffen op het nieuwe jaar. Ben je er bij? &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2018/nieuwjaarsborrel&quot;&gt;Meld je aan voor de nieuwjaarsborrel!&lt;/a&gt;&lt;/p&gt;
  8977. </content>
  8978.  </entry>
  8979.  <entry>
  8980.    <title>Nieuwe rolverdeling verenigingsbestuur</title>
  8981.    <link href="https://www.fronteers.nl/nl/blog/2017/12/nieuwe-rolverdeling-verenigingsbestuur"/>
  8982.    <updated>2017-12-05T00:00:00Z</updated>
  8983.    <id>https://www.fronteers.nl/nl/blog/2017/12/nieuwe-rolverdeling-verenigingsbestuur</id>
  8984.    <content xml:lang="nl" type="html">&lt;p&gt;Vorige week donderdagavond was de ALV, waar wij afscheid namen van Jaco Koster als voorzitter en secretaris, en van Roy Tomeij als algemeen bestuurslid. Anneke Sinnema en Edwin Martin zijn dezelfde avond nog gekozen als nieuwe bestuursleden naast Sander Vink, die nu zijn tweede jaar in gaat als penningmeester.&lt;/p&gt;
  8985. &lt;p&gt;Vandaag hebben we overleg gehad over de nieuwe rolverdeling die we onszelf hebben toebedacht. Na enig beraad is daar het volgende uit gekomen:&lt;/p&gt;
  8986. &lt;p&gt;&lt;em&gt;Sander Vink&lt;/em&gt; blijft aan als penningmeester. Sander heeft zich het afgelopen jaar ingezet om de financiële administratie verder op orde te brengen en gaat hier het komende jaar mee door. Hij neemt ook de ledenadministratie op zich.&lt;/p&gt;
  8987. &lt;p&gt;&lt;em&gt;Edwin Martin&lt;/em&gt; is een oudgediende van Fronteers en is al sinds de oprichtingsbijeenkomst bij de vereniging betrokken. Na drie jaar in de congrescommissie en drie jaar de kascommissie gaat Edwin zich nu inzetten voor Fronteers als secretaris.&lt;/p&gt;
  8988. &lt;p&gt;&lt;em&gt;Anneke Sinnema&lt;/em&gt; heeft drie jaar onderdeel gevormd van de congrescommissie en stort zich nu vol enthousiasme op een rol als voorzitter. Het is mij een grote eer!&lt;/p&gt;
  8989. &lt;p&gt;Volgende week gaan Anneke en Edwin met Sander om tafel en op &amp;quot;Fronteerscursus&amp;quot; voor een stukje overdracht. We hebben er zin in!&lt;/p&gt;
  8990. </content>
  8991.  </entry>
  8992.  <entry>
  8993.    <title>Kandidaat bestuur Fronteers: Anneke Sinnema</title>
  8994.    <link href="https://www.fronteers.nl/nl/blog/2017/11/kandidaat-bestuur-fronteers-anneke-sinnema"/>
  8995.    <updated>2017-11-28T00:00:00Z</updated>
  8996.    <id>https://www.fronteers.nl/nl/blog/2017/11/kandidaat-bestuur-fronteers-anneke-sinnema</id>
  8997.    <content xml:lang="nl" type="html">&lt;p&gt;Aanstaande donderdag vindt de jaarlijkse algemene ledenvergadering (ALV) van Fronteers plaats. Een van de onderdelen tijdens de ALV is de bestuursverkiezing. Kandidaat bestuurslid Anneke Sinnema stelt zich voor!&lt;/p&gt;
  8998. &lt;p&gt;Na vijf jaar als lid van Fronteers en drie jaar als lid van de congrescommissie heb ik besloten om me kandidaat te stellen voor een positie in het bestuur van onze vakvereniging!&lt;/p&gt;
  8999. &lt;p&gt;Toen ik vijf jaar geleden op mijn allereerste Fronteers-bijeenkomst kwam werkte ik als &amp;quot;content manager&amp;quot; voor een online-marketing bureau. Ná die bijeenkomst liet ik als de wiedeweerga mijn functietitel aanpassen want ik wist: ik ben een programmeur! Dat gevoel gun ik andere mensen ook. Alleen daarom al vind ik het belangrijk dat Fronteers als vakvereniging blijft bestaan.&lt;/p&gt;
  9000. &lt;h2&gt;Wat kun je van mij verwachten?&lt;/h2&gt;
  9001. &lt;p&gt;Diversiteit is een belangrijk thema voor mij. Daarom lanceerde ik nog niet zo lang geleden een enquete om meer te weten te komen over de mensen die deel uitmaken van ons vakgebied. Ik wil graag dat iedereen zich thuis voelt in de Nederlandse webindustrie en bij Fronteers en hoop dat de uitkomst van dit onderzoek daar aan bij kan dragen.
  9002. Ik wil daarnaast graag onderzoeken wat we nog meer kunnen doen door middel van de oprichting van een speciale denktank-commissie Diversiteit, maar hier ga ik hulp bij nodig hebben! Daarom hoop ik ook meer mensen te bewegen tot het doen van vrijwilligerswerk voor de vereniging.&lt;/p&gt;
  9003. &lt;h2&gt;Wat zijn verder de bijdrages die ik graag aan Fronteers wil leveren?&lt;/h2&gt;
  9004. &lt;ul&gt;
  9005. &lt;li&gt;Het transparanter maken van het bestuur en het koesteren van onze bestaande vrijwilligers &amp;lt;3&lt;/li&gt;
  9006. &lt;li&gt;Het organiseren van events blijven ondersteunen, liefst ook buiten de randstad. Wellicht het vinden van partners in de regio voor kwalitatief sterke meetups (zonder recruitmentverhalen) voor iederéén&lt;/li&gt;
  9007. &lt;li&gt;Toegankelijkheid is geen feature maar een kwaliteitskenmerk. Daarom vind ik dat Fronteers als vakvereniging zich sterk moet blijven maken voor het verhogen van het kennisniveau rond dit onderwerp.&lt;/li&gt;
  9008. &lt;/ul&gt;
  9009. &lt;p&gt;Wil je (als lid van Fronteers) op me stemmen, dan kan dat op de ALV op 30 november of door iemand anders die aanwezig is te machtigen.
  9010. Wil je me op een andere manier willen ondersteunen dan is alle input welkom via een DM op de Slack!&lt;/p&gt;
  9011. </content>
  9012.  </entry>
  9013.  <entry>
  9014.    <title>Meld je nu aan voor de ALV 2017</title>
  9015.    <link href="https://www.fronteers.nl/nl/blog/2017/11/aanmelden-alv-2017"/>
  9016.    <updated>2017-11-22T00:00:00Z</updated>
  9017.    <id>https://www.fronteers.nl/nl/blog/2017/11/aanmelden-alv-2017</id>
  9018.    <content xml:lang="nl" type="html">&lt;p&gt;Donderdag 30 november houden we onze jaarlijkse algemene ledenvergadering (ALV). Alle leden zijn hiervoor van harte uitgenodigd. De locatie van de ALV is La Vie Meeting Center, Sint Jacobsstraat 61, ongeveer vijf minuten lopen vanaf Utrecht CS (let op: dit is niet de locatie waar de ALV de afgelopen jaren plaatsvond).&lt;/p&gt;
  9019. &lt;p&gt;Voor de mensen die van ver komen (of gewoon geen zin hebben om te koken) zullen er vanaf 18:30 broodjes klaar staan. De vergadering zelf zal stipt om 19:00 uur beginnen. We verwachten dat de totale vergadering twee uur zal duren, maar de ervaring leert dat het nog weleens wil uitlopen. De voorzitter doet zijn best dat zoveel mogelijk te beperken. En mocht je geen flauw idee hebben waar de ALV precies voor dient, dan &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/alv&quot;&gt;vertellen we je graag meer over de ALV&lt;/a&gt;.&lt;/p&gt;
  9020. &lt;p&gt;Het staat leden nog steeds vrij voorstellen voor de agenda in te dienen. Vooralsnog is de agenda van de avond de volgende:&lt;/p&gt;
  9021. &lt;ol&gt;
  9022. &lt;li&gt;Welkom en opening door de voorzitter&lt;/li&gt;
  9023. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  9024. &lt;li&gt;Rapportage kascommissie 2016&lt;/li&gt;
  9025. &lt;li&gt;Jaarstukken 2016 / Financiën 2017 / Begroting 2018&lt;/li&gt;
  9026. &lt;li&gt;Kascommissieverkiezing&lt;/li&gt;
  9027. &lt;li&gt;Evaluatie uitbesteding organisatie congres&lt;/li&gt;
  9028. &lt;li&gt;Resultaat haalbaarheidsonderzoek vrijwilligersvergoeding&lt;/li&gt;
  9029. &lt;li&gt;Aftreden Jaco en Roy, bestuursverkiezing&lt;/li&gt;
  9030. &lt;li&gt;Rondvraag&lt;/li&gt;
  9031. &lt;li&gt;Afsluiting&lt;/li&gt;
  9032. &lt;/ol&gt;
  9033. &lt;p&gt;De jaarrekening over 2016 is afgerond en gecontroleerd door de kascommissie. Voorlopige cijfers over 2017 en de volledige begroting over 2018 zullen enkele dagen voor de ALV naar alle aangemelde aanwezigen worden opgestuurd. Mocht je niet aanwezig kunnen zijn, maar deze informatie wel willen zien: laat het ons weten.&lt;/p&gt;
  9034. &lt;p&gt;Aan het eind van zijn bestuurstermijn treedt dit jaar Jaco Koster af, en hij stelt zich niet herkiesbaar. Tevens treedt Roy Tomeij tussentijds af. We hebben op het moment van schrijven nog GEEN nieuwe leden bereid gevonden zich kandidaat te stellen voor een bestuursfunctie. Het bestuur kan niet fungeren met één overgebleven bestuurslid, omdat conform de statuten het bestuur moet bestaan uit minimaal drie personen. We hopen op de ALV alsnog één of meerdere kandidaten aan de leden te mogen voorstellen, zodat we kunnen voorkomen dat bestuursleden die willen aftreden dat niet kunnen. Wil je je hard maken voor de vereniging, dan is dit het moment. &lt;a href=&quot;mailto:bestuur@lists.fronteers.nl&quot;&gt;Neem gerust contact op met de huidige bestuursleden&lt;/a&gt; om te bespreken wat een bestuursfunctie precies inhoudt, of om jezelf meteen kandidaat te stellen.&lt;/p&gt;
  9035. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  9036. &lt;p&gt;Ben je van plan te komen, dan vragen we je vriendelijk je hieronder hiervoor in te schrijven, zodat we enigszins een idee hebben van de verwachte opkomst.&lt;/p&gt;
  9037. </content>
  9038.  </entry>
  9039.  <entry>
  9040.    <title>Fronteers zomerborrel</title>
  9041.    <link href="https://www.fronteers.nl/nl/blog/2017/08/barbecue-en-borrel-voor-fronteersleden"/>
  9042.    <updated>2017-08-01T00:00:00Z</updated>
  9043.    <id>https://www.fronteers.nl/nl/blog/2017/08/barbecue-en-borrel-voor-fronteersleden</id>
  9044.    <content xml:lang="nl" type="html">&lt;p&gt;Op &lt;em&gt;vrijdag 25 augustus&lt;/em&gt; houdt Fronteers voor leden en niet-leden een gezellig diner bij &lt;a href=&quot;http://bucksbbqhouse.nl/&quot;&gt;Bucks BBQ&lt;/a&gt; in Utrecht! De perfecte gelegenheid om bij te praten en vakantieverhalen te delen met mede-frontend ontwikkelaars, onder het genot van lekker eten en drinken.&lt;/p&gt;
  9045. &lt;p&gt;Voor deze zomerse tegenhanger van de nieuwjaarsborrel neemt Fronteers de drankjes voor haar rekening. Het eten is voor eigen rekening en komt uit op 25,50 euro per persoon, en ook voor mensen die liever vegetarisch eten zal er keuze genoeg zijn.&lt;/p&gt;
  9046. &lt;p&gt;Laat je weten of je komt? &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2017/zomerborrel-2017&quot;&gt;Vul het aanmeldingsformulier in voor 18 augustus&lt;/a&gt;. Let op: er is beperkt plaats, dus wacht er niet te lang mee! :)&lt;/p&gt;
  9047. </content>
  9048.  </entry>
  9049.  <entry>
  9050.    <title>Workshops! Wees er snel bij!</title>
  9051.    <link href="https://www.fronteers.nl/nl/blog/2017/07/workshops-wees-er-snel-bij"/>
  9052.    <updated>2017-07-19T00:00:00Z</updated>
  9053.    <id>https://www.fronteers.nl/nl/blog/2017/07/workshops-wees-er-snel-bij</id>
  9054.    <content xml:lang="nl" type="html">&lt;p&gt;Tijd voor iets nieuws? Meld je aan voor de workshop Progressive Enhancement of Service Workers.&lt;/p&gt;
  9055. &lt;p&gt;In augustus en september hebben we weer toffe workshops in Utrecht die je niet wilt missen!&lt;/p&gt;
  9056. &lt;h2&gt;Progressive Enhancement&lt;/h2&gt;
  9057. &lt;p&gt;Met de vele browsers, apparaten en gebruikers is niks zeker. Hoe garanderen we dat de websites en applicaties die we bouwen in alle situaties werken? Progressive Enhancement is een manier van bouwen om websites zeer robust te maken. Wilfred Nas laat zien waarom Progressive Enhancement belangrijk is en hoe je het toepast.&lt;/p&gt;
  9058. &lt;p&gt;De workshop is 18 augustus. Lees meer op &lt;a href=&quot;https://fronteers.nl/workshops/progressive-enhancement-wilfred-nas&quot;&gt;Progressive Enhancement&lt;/a&gt; en &lt;a href=&quot;https://fronteers.nl/workshops/progressive-enhancement-wilfred-nas/18-augustus-2017&quot;&gt;meld je snel aan&lt;/a&gt;!&lt;/p&gt;
  9059. &lt;h2&gt;Service workers, de motor van de Progressive Web App&lt;/h2&gt;
  9060. &lt;p&gt;Samen met Anne en Jurgen van De Voorhoede neem je een duik in Service Workers. Wil je een website offline beschikbaar maken of de performance verbeteren? Misschien ben je een web applicatie aan het bouwen en wil je push notifications laten zien of op de achtergrond data synchroniseren. Dat en nog veel meer kan je doen met Service Workers!&lt;/p&gt;
  9061. &lt;p&gt;Let op: enige ES2015/ES6 kennis is vereist.&lt;/p&gt;
  9062. &lt;p&gt;Lees meer op &lt;a href=&quot;https://fronteers.nl/workshops/service-workers&quot;&gt;Service Workers&lt;/a&gt; en &lt;a href=&quot;https://fronteers.nl/workshops/service-workers/15-september-2017&quot;&gt;meld je aan&lt;/a&gt;. De workshop vindt plaats op 15 september.&lt;/p&gt;
  9063. </content>
  9064.  </entry>
  9065.  <entry>
  9066.    <title>Meld je nu aan voor de nieuwe workshops</title>
  9067.    <link href="https://www.fronteers.nl/nl/blog/2017/05/meld-je-nu-aan-voor-de-nieuwe-workshops"/>
  9068.    <updated>2017-05-19T00:00:00Z</updated>
  9069.    <id>https://www.fronteers.nl/nl/blog/2017/05/meld-je-nu-aan-voor-de-nieuwe-workshops</id>
  9070.    <content xml:lang="nl" type="html">&lt;p&gt;De komende maanden staan er weer boeiende workshops op het programma. Meld je gauw aan als je een deep dive wilt nemen in service workers, inclusive design of WebGL!&lt;/p&gt;
  9071. &lt;h2&gt;Service Workers 101&lt;/h2&gt;
  9072. &lt;p&gt;Anne en Jurgen van &lt;em&gt;De Voorhoede&lt;/em&gt; nemen je mee op een ontdekkingstocht naar Service Workers. Een Service Worker is een script dat op de achtergrond in je browser draait, waarmee je dingen kan doen zonder dat je een webpagina of gebruikersinteractie nodig hebt. Push notifications, background synchronisatie, offline, performance en meer onderwerpen komen om de hoek kijken in deze workshop waarvoor degelijke kennis van ES6 vereist is.&lt;/p&gt;
  9073. &lt;h2&gt;Inclusive Design &amp;amp; Accessibility&lt;/h2&gt;
  9074. &lt;p&gt;Hoe zorg je voor optimaal gebruiksgemak voor je blinde bezoekers? Wat is WAI-ARIA en wanneer gebruik je het? Wat is voldoende kleurcontrast? Is semantische HTML gebruiken niet gewoon genoeg? Peter van Grieken neemt je mee in het beantwoorden van deze en nog veel meer vragen in &lt;em&gt;Inclusive Design &amp;amp; Accessibility&lt;/em&gt;.&lt;/p&gt;
  9075. &lt;p&gt;De workshop vindt plaats op vrijdag 30 juni. Vind alle details op &lt;a href=&quot;https://fronteers.nl/workshops/inclusive-design-accessibility-peter-van-grieken&quot;&gt;Inclusive Design &amp;amp; Accessibility&lt;/a&gt;.&lt;/p&gt;
  9076. &lt;h2&gt;Practical WebGL with three.js&lt;/h2&gt;
  9077. &lt;p&gt;Mocht je eind juli nog niet op het strand liggen, kom dan naar &lt;em&gt;Practical WebGL with three.js&lt;/em&gt;. Martin Splitt laat je van alles zien van de mogelijkheden met 3D en WebGL.&lt;/p&gt;
  9078. &lt;p&gt;Meer details vind je op &lt;a href=&quot;https://www.fronteers.nl/workshops/practical-webgl-with-threejs-martin-splitt&quot;&gt;Practical WebGL with three.js&lt;/a&gt;.
  9079. Traditiegetrouw hebben alle workshops plaats in Utrecht.&lt;/p&gt;
  9080. </content>
  9081.  </entry>
  9082.  <entry>
  9083.    <title>Met korting naar CSS Day en/of Browser API Special</title>
  9084.    <link href="https://www.fronteers.nl/nl/blog/2017/04/met-korting-naar-css-day-en-of-browser-api-special"/>
  9085.    <updated>2017-04-14T00:00:00Z</updated>
  9086.    <id>https://www.fronteers.nl/nl/blog/2017/04/met-korting-naar-css-day-en-of-browser-api-special</id>
  9087.    <content xml:lang="nl" type="html">&lt;p&gt;Op 15 en 16 juni organiseert WCA voor de vijfde keer CSS Day, dit jaar voorafgegaan door Browser API Special. Fronteers-leden kunnen hier naar toe met een korting van 25 euro (1 dag) of 50 euro (2 dagen).&lt;/p&gt;
  9088. &lt;p&gt;Zoals al vijf jaar gebruikelijk is, zullen op&lt;a href=&quot;https://cssday.nl/2017&quot;&gt; CSS Day&lt;/a&gt; topsprekers de voornaamste nieuwe ontwikkelingen in CSS bespreken. Onder andere zal Rachel Andrew de aanwezigen bijpraten over CSS Grid, dat thans daadwerkelijk wordt ondersteund, CSS-uitvinders Bert Bos en Håkon Wium Lie zullen spreken over wat ze anders zouden doen als ze CSS vandaag opnieuw mochten ontwerpen, Tab Atkins zal Houdini behandelen, en uitleggen waarom een vroeg-20e-eeuwse boeienkoning belangrijk is, en nog veel meer.&lt;/p&gt;
  9089. &lt;p&gt;Tijdens de Browser API Special gaan de sprekers in op acht browser APIs, zoals WebVR door Ada Rose Edwards, Web Payments door Chris Wilson, en Animations door Rachel Nabors.&lt;/p&gt;
  9090. &lt;p&gt;Fronteers-leden kunnen met 50 euro korting een kaart voor beide dagen kopen (500 euro ipv. 550), of met 25 euro korting een kaart voor Browser API Special (275 euro ipv. 300). De eendagskaarten voor CSS Day zijn reeds uitverkocht.&lt;/p&gt;
  9091. &lt;p&gt;Mocht je gebruik willen maken van deze korting, &lt;a href=&quot;mailto:bestuur@lists.fronteers.nl&quot;&gt;stuur dan een e-mail aan het bestuur&lt;/a&gt;. Zoals gebruikelijk geldt deze actie alleen voor leden die op dit moment al lid zijn.&lt;/p&gt;
  9092. </content>
  9093.  </entry>
  9094.  <entry>
  9095.    <title>15% korting op de Angular conferentie NG-NL, 16 maart 2017 in Amsterdam</title>
  9096.    <link href="https://www.fronteers.nl/nl/blog/2017/03/15-procent-korting-op-angular-conferentie-ng-nl-16-maart-2017-in-amsterdam"/>
  9097.    <updated>2017-03-07T00:00:00Z</updated>
  9098.    <id>https://www.fronteers.nl/nl/blog/2017/03/15-procent-korting-op-angular-conferentie-ng-nl-16-maart-2017-in-amsterdam</id>
  9099.    <content xml:lang="nl" type="html">&lt;p&gt;Op 16 maart organiseert Xebia voor de derde keer haar Angular conferentie NG-NL in ‘t Sieraad te Amsterdam. Leden van Fronteers ontvangen 15% korting op de conference day.&lt;/p&gt;
  9100. &lt;h2&gt;Thema 2017: Steam up your Angular, learn from world’s best.&lt;/h2&gt;
  9101. &lt;p&gt;NG-NL is dé conferentie om bij te wonen als je als developer meer wilt weten over Angular 2. NG-NL wordt inmiddels door Google erkend als een van de betere Angular conferenties wereldwijd. NG-NL biedt verschillende tracks, hands-on workshops en interactieve sessies door nationale en internationale Angular experts.&lt;/p&gt;
  9102. &lt;h2&gt;Enkele sprekers:&lt;/h2&gt;
  9103. &lt;h3&gt;&lt;a href=&quot;https://twitter.com/toddmotto&quot;&gt;Todd Motto&lt;/a&gt;&lt;/h3&gt;
  9104. &lt;p&gt;Angular&#39;s Reactive Forms: the hero we need but not the one we deserve.
  9105. Todd is een front-end engineer uit England. Hij is wereldwijd een bekende spreker en Angular specialist. In zijn sessie vertelt hij meer over de krachtige API van Angular (2) reactive forms.&lt;/p&gt;
  9106. &lt;h3&gt;&lt;a href=&quot;https://twitter.com/petebd&quot;&gt;Pete Bacon Darwin&lt;/a&gt;&lt;/h3&gt;
  9107. &lt;p&gt;Pete maakt sinds 2012 deel uit van het Angular core team en werd in November 2014 Angular team lead. Hij heeft diverse boeken geschreven over AngularJS en geeft wereldwijd lezingen op het gebied van Angular. Pete is tevens co-organiser van AngularConnect.
  9108. Pete vertelt samen met George Kalpakas tijdens zijn sessie meer over de transitie van Angular 1 naar 2 zonder je applicatie volledig te moeten herschrijven.&lt;/p&gt;
  9109. &lt;h3&gt;&lt;a href=&quot;https://twitter.com/josepheames&quot;&gt;Joe Eames&lt;/a&gt;&lt;/h3&gt;
  9110. &lt;p&gt;Joe is een is a front-end specialist en heeft inmiddels met elke grotere Microsoft Language gewerkt. Zijn hart blijft echter uitgaan naar JavaScript. Joe is een welbekende blogger, spreker en organiseert o.a. ng-conf en AngularJS conference. Ook is Joe een vast panellid bij het JavaScript Jabber and Adventures onderdeel van Angular podcasts.&lt;/p&gt;
  9111. &lt;h2&gt;Thema&#39;s die tijdens NG-NL aan het licht komen:&lt;/h2&gt;
  9112. &lt;ul&gt;
  9113. &lt;li&gt;RxJS&lt;/li&gt;
  9114. &lt;li&gt;Ecosystem&lt;/li&gt;
  9115. &lt;li&gt;Testing&lt;/li&gt;
  9116. &lt;li&gt;Mobile&lt;/li&gt;
  9117. &lt;li&gt;GraphQL&lt;/li&gt;
  9118. &lt;li&gt;Apollo&lt;/li&gt;
  9119. &lt;li&gt;NativeScript&lt;/li&gt;
  9120. &lt;li&gt;en meer... allemaal met een focus op Angular (2)&lt;/li&gt;
  9121. &lt;/ul&gt;
  9122. &lt;p&gt;Bekijk het volledige programma op &lt;a href=&quot;http://www.ng-nl.org/&quot;&gt;ng-nl.org&lt;/a&gt;&lt;/p&gt;
  9123. &lt;h2&gt;Ledenkorting&lt;/h2&gt;
  9124. &lt;p&gt;De 15% korting is geldig op een conferentie ticket.&lt;/p&gt;
  9125. &lt;h2&gt;Deelnemen?&lt;/h2&gt;
  9126. &lt;p&gt;Er is een beperkt aantal tickets en kortingscodes beschikbaar.
  9127. Bestel je ticket via &lt;a href=&quot;https://www.eventbrite.com/e/ng-nl-2017-tickets-29575275445#tickets&quot;&gt;ng-nl.org&lt;/a&gt; en gebruik de volgende kortingscode.
  9128. &lt;em&gt;5982_Fronteers_NGNLconf&lt;/em&gt;&lt;/p&gt;
  9129. </content>
  9130.  </entry>
  9131.  <entry>
  9132.    <title>Inventarisatie interesse Fronteers broodfonds</title>
  9133.    <link href="https://www.fronteers.nl/nl/blog/2017/02/inventarisatie-interesse-fronteers-broodfonds"/>
  9134.    <updated>2017-02-18T00:00:00Z</updated>
  9135.    <id>https://www.fronteers.nl/nl/blog/2017/02/inventarisatie-interesse-fronteers-broodfonds</id>
  9136.    <content xml:lang="nl" type="html">&lt;p&gt;Als zelfstandige met of zonder personeel zijn er een hoop verzekeringen die je wel of niet voor jezelf kunt afsluiten. Eén van de meest bekende waar je als werknemer misschien nooit bij stilgestaan zult hebben is de Arbeidsongeschiktheidsverzekering (AOV).&lt;/p&gt;
  9137. &lt;p&gt;Als werknemer ben je hier tegen bij wet beschermd. Als je een tijdelijk of vast contract hebt en je voor langere tijd ziek wordt, betaalt je werkgever je loon maximaal 2 jaar lang door. Je ontvangt dan minstens 70% van je laatstverdiende loon.&lt;/p&gt;
  9138. &lt;p&gt;Als zelfstandige dien je dit uiteraard zelf te regelen. Er zijn een heleboel verzekeringsmaatschappijen die hiervoor verzekeringen aanbieden. Probleem bij een hoop van deze verzekeringen is dat ze vaak duur zijn en het soms een strijd kan zijn alsnog te krijgen waar je denkt recht op te hebben.&lt;/p&gt;
  9139. &lt;p&gt;Als alternatief hiervoor is een tiental jaar geleden het eerste broodfonds opgericht. In een broodfonds ondersteun je elkaar op vrijwillige en gelijkwaardige basis. Meer informatie over het hoe en waarom vind je op &lt;a href=&quot;http://www.broodfonds.nl/&quot;&gt;de website van het broodfonds &lt;/a&gt;.&lt;/p&gt;
  9140. &lt;p&gt;Voor nu willen we graag inventariseren hoeveel Fronteersleden geïnteresseerd zouden zijn om aan zo’n broodfonds deel te nemen. Voor een eerste informatieronde zouden we minstens 20 geïnteresseerden moeten hebben. Het broodfonds kan maximaal 50 deelnemers bevatten.&lt;/p&gt;
  9141. &lt;p&gt;Heb je interesse? Vul dan &lt;a href=&quot;https://goo.gl/forms/eJmP7GmLmwabYHsm2&quot;&gt;dit Google Form&lt;/a&gt; even in. We houden je dan op de hoogte en mocht het tot een eerste informatiebijeenkomst komen dan ontvang je daarvoor een uitnodiging.&lt;/p&gt;
  9142. </content>
  9143.  </entry>
  9144.  <entry>
  9145.    <title>Workshop Datavisualisatie met Nadieh Bremer en nieuwe commissieleden gezocht</title>
  9146.    <link href="https://www.fronteers.nl/nl/blog/2017/01/update-commissie-workshops"/>
  9147.    <updated>2017-01-24T00:00:00Z</updated>
  9148.    <id>https://www.fronteers.nl/nl/blog/2017/01/update-commissie-workshops</id>
  9149.    <content xml:lang="nl" type="html">&lt;p&gt;In april presenteert de workshopcommissie met trots een &lt;a href=&quot;https://www.fronteers.nl/workshops/creatieve-data-visualisatie-nadieh-bremer&quot;&gt;nieuwe workshop over datavisualisatie&lt;/a&gt;, met niemand minder dan Nadieh Bremer (die je onder andere kunt kennen van haar talk op Fronteers 2016). Ook zoeken we nieuwe leden voor onze commissie.&lt;/p&gt;
  9150. &lt;h2&gt;Workshop “Datavisualisatie” met Nadieh Bremer&lt;/h2&gt;
  9151. &lt;p&gt;Met de enorme hoeveelheid programma&#39;s waarmee je tegenwoordig data kan visualiseren, is het erg makkelijk om vast te komen in je grafiekkeuzes. Altijd maar weer gaan voor de staaf of lijn diagram, zonder echt na te denken over effectiviteit. Tijdens deze workshop zal Nadieh je leren hoe je een meer creatieve en praktische benadering kan nemen in het design van data visualisatie.&lt;/p&gt;
  9152. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/30196726946-a4d24b6fba-k-full.jpg&quot; alt=&quot;Nadieh Bremer voor het enorme projectiescherm van Tuschinski&quot; /&gt;&lt;/p&gt;
  9153. &lt;p&gt;&lt;em&gt;Nadieh Bremer tijdens Fronteers 2016&lt;/em&gt;&lt;/p&gt;
  9154. &lt;p&gt;Nadieh is opgeleid als sterrenkundige, werkte jaren als data-scientist in het bedrijfsleven en is als freelancer gespecialiseerd in de creatieve kant van datavisualisatie. Ze was afgelopen jaar te gast op het Fronteers-congres en gaf daar de fantastische talk &lt;a href=&quot;https://vimeo.com/194817475&quot;&gt;Hacking the visual norm&lt;/a&gt;.&lt;/p&gt;
  9155. &lt;p&gt;De workshop zal plaatsvinden op 28 april in Utrecht. We hebben ruimte voor 12 deelnemers. Kosten zijn €250 voor niet-leden of €150 voor leden, inclusief lunch, drankjes en versnaperingen.&lt;/p&gt;
  9156. &lt;h2&gt;Workshops over CSS voor grote sites en ECMAScript 2015&lt;/h2&gt;
  9157. &lt;p&gt;Wil je al eerder werken aan het vergroten van je kennis? We hebben in februari en maart workshops over &lt;a href=&quot;https://www.fronteers.nl/workshops/that-mess-called-css-door-hans-grimm&quot;&gt;CSS voor grote websites&lt;/a&gt; (met Hans Grimm) en &lt;a href=&quot;https://www.fronteers.nl/workshops/es2015-chiel-kunkels&quot;&gt;ES2015&lt;/a&gt; (met Chiel Kunkels).&lt;/p&gt;
  9158. &lt;p&gt;Voor deze workshops, met dezelfde prijs en locatie, zijn op het moment van schrijven nog 6 (CSS) en 2 (ES2015) plaatsen beschikbaar. Wacht dus niet te lang met inschrijven! Vragen over de inhoud van deze workshops? Stel ze op Slack of &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;neem contact op&lt;/a&gt;.&lt;/p&gt;
  9159. &lt;h2&gt;Nieuwe commissieleden gezocht&lt;/h2&gt;
  9160. &lt;p&gt;Per 1 april zal onze tijdelijke voorzitter Hidde de Vries de &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/workshops&quot;&gt;commissie&lt;/a&gt; verlaten en we zijn daarom op zoek naar nieuw bloed!&lt;/p&gt;
  9161. &lt;p&gt;Vind je het leuk om workshops zoals deze te helpen organiseren? Wil je meedenken over onderwerpen, met sprekers communiceren en potentiële deelnemers enthousiasmeren voor het bezoeken van een workshop? Dit is een goed moment om bij de workshopcommissie te komen: er is voor dit jaar namelijk begroot op het organiseren van enkele internationale workshop. Het organiseren daarvan zal in de komende maanden plaatsvinden. &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;Neem contact op met de workshopcommissie&lt;/a&gt; voor aanmelding of meer informatie.&lt;/p&gt;
  9162. </content>
  9163.  </entry>
  9164.  <entry>
  9165.    <title>Front-enders gezocht voor de Dutch Blockchain Hackathon</title>
  9166.    <link href="https://www.fronteers.nl/nl/blog/2017/01/front-enders-gezocht-voor-de-dutch-blockchain-hackathon"/>
  9167.    <updated>2017-01-23T00:00:00Z</updated>
  9168.    <id>https://www.fronteers.nl/nl/blog/2017/01/front-enders-gezocht-voor-de-dutch-blockchain-hackathon</id>
  9169.    <content xml:lang="nl" type="html">&lt;p&gt;Van 10 t/m 12 februari wordt de &lt;a href=&quot;https://blockchainhackathon.eu/&quot;&gt;Dutch Blockchain Hackathon&lt;/a&gt; in Groningen georganiseerd. Hier zullen 50 teams in 5 verschillende tracks proberen innovatieve oplossingen te bedenken voor diverse uitdagingen die door de organisatie zijn opgesteld.
  9170. &lt;a href=&quot;https://www.ebpi.nl/&quot;&gt;EBPI&lt;/a&gt;, dat deelneemt met drie teams, is nog op zoek naar front-end developers om hun teams te versterken.&lt;/p&gt;
  9171. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2017/blockchainhackathon.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  9172. &lt;p&gt;Johan Mastenbroek en Ralph Verhelst van EBPI zijn druk bezig met het samenstellen van de teams, bestaande uit mensen met diverse expertises. EBPI zal, zoals gezegd, met drie teams aan de hackathon deelnemen. De &lt;a href=&quot;https://blockchainhackathon.eu/tracks&quot;&gt;tracks&lt;/a&gt; waaraan zij zullen gaan deelnemen zijn:&lt;/p&gt;
  9173. &lt;ul&gt;
  9174. &lt;li&gt;Reinventing Government&lt;/li&gt;
  9175. &lt;li&gt;International Trade &amp;amp; Entrepreneurship&lt;/li&gt;
  9176. &lt;li&gt;Future of Pensions&lt;/li&gt;
  9177. &lt;/ul&gt;
  9178. &lt;p&gt;De specifieke “cases” binnen deze tracks zijn nog niet helemaal duidelijk, maar zullen waarschijnlijk binnenkort bekend worden.&lt;/p&gt;
  9179. &lt;p&gt;Bij het samenstellen van de teams kwamen Johan en Ralph erachter dat ze onvoldoende front-end developers kennen om alle teams te voorzien van de benodigde expertise op dit vlak. And that’s where we come in!&lt;/p&gt;
  9180. &lt;h2&gt;Waarom zou je mee doen?&lt;/h2&gt;
  9181. &lt;p&gt;Daarover kunnen we Johan en Ralph het beste zelf aan het woord laten.
  9182. “De Dutch Blockchain Hackathon is een zeer interessant evenement waar we met circa 50 andere (internationale) teams een begin maken met de oplossingen voor de zeer nabije toekomst!”&lt;/p&gt;
  9183. &lt;p&gt;“Onze teams verzamelen donderdagavond in Groningen en zullen feestelijk van start gaan. De hackathon zelf begint vrijdag 10 februari en eindigt zondag 12 februari met een mooi feestje. Maandagmorgen zullen we het hotel in Groningen verlaten.”&lt;/p&gt;
  9184. &lt;p&gt;“Het wordt een fantastische ervaring waar je niet alleen zelf veel van kunt leren, maar waarbij je ook je eigen kennis en ervaring kunt overdragen aan studenten en collega’s van andere organisaties.”&lt;/p&gt;
  9185. &lt;p&gt;“De reis – we gaan lekker met de trein – en het verblijf worden voor je geregeld! We zouden graag in contact komen met front-enders, die een goede kennis van JavaScript hebben, om onze teams te versterken. Mensen die callback functies en promises snappen. Heb je daarnaast ook nog kennis van één, of meerdere, van de “grotere” JS-frameworks, als AngularJS, ReactJS of MeteorJS dan is dat helemaal mooi meegenomen.”&lt;/p&gt;
  9186. &lt;h2&gt;Hoe meld je je aan?&lt;/h2&gt;
  9187. &lt;p&gt;Dus lijkt het je tof om een weekend lang samen te werken aan de cases, lekker te geeken aan de blockchain en je front-end expertise te delen? Mail dan naar &lt;a href=&quot;mailto:info@ebpi.nl&quot;&gt;info@ebpi.nl&lt;/a&gt; ter attentie van Johan en Ralph. Zij nemen dan weer contact met je op om een en ander verder te regelen.&lt;/p&gt;
  9188. </content>
  9189.  </entry>
  9190.  <entry>
  9191.    <title>Een bijzonder jaar</title>
  9192.    <link href="https://www.fronteers.nl/nl/blog/2017/01/een-bijzonder-jaar"/>
  9193.    <updated>2017-01-12T00:00:00Z</updated>
  9194.    <id>https://www.fronteers.nl/nl/blog/2017/01/een-bijzonder-jaar</id>
  9195.    <content xml:lang="nl" type="html">&lt;p&gt;In oktober 2007 werd Fronteers opgericht na het oprichtingscongres, en het bestuur is trots op wat er allemaal tot nu toe gerealiseerd is. Sinds de laatste ALV heeft de vereniging niet stil gezeten. Er zijn een aantal mooie activiteiten die plaatsvinden in de komende maand. Het bestuur geeft hieronder enkele updates.&lt;/p&gt;
  9196. &lt;h2&gt;Tien jaar&lt;/h2&gt;
  9197. &lt;p&gt;Tijdens het congres in oktober zal Fronteers officieel tien jaar oud worden, en sinds het eerste &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2007/oprichtingscongres&quot;&gt;mini-congres&lt;/a&gt; zijn er &lt;a href=&quot;https://fronteers.nl/bijeenkomsten&quot;&gt;122 bijeenkomsten&lt;/a&gt;, &lt;a href=&quot;https://fronteers.nl/workshops&quot;&gt;23 verschillende workshops&lt;/a&gt; en &lt;a href=&quot;https://fronteers.nl/congres&quot;&gt;10 congressen&lt;/a&gt; georganiseerd. Verder zijn we afgelopen jaar begonnen met het ondersteunen van front-endinitiatieven die georganiseerd worden buiten Fronteers, en hebben we gezien dat het gebruik van Slack als zeer positief wordt ervaren. Voor het komende jaar zijn we wederom van plan om prachtige bijeenkomsten, workshops en een spetterend congres neer te zetten en dat kunnen we niet zonder onze leden. Heb je een tof idee dat Fronteers nog beter gaat laten worden? Heb je interesse om ons te helpen met het organiseren? Neem dan &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact op met het bestuur&lt;/a&gt; en dan gaan we er samen een topjaar van maken!&lt;/p&gt;
  9198. &lt;h2&gt;Congres&lt;/h2&gt;
  9199. &lt;p&gt;Na &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2016/11/wijzigingen-na-alv&quot;&gt;de laatste update van het bestuur&lt;/a&gt; hebben een aantal mensen aangegeven interesse te hebben om plaats te nemen in de congrescommissie van dit jaar. Naar aanleiding van diverse persoonlijke gesprekken heeft het bestuur recentelijk een overleg gehad met alle geïnteresseerden, waarna officieel de &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/commissies/congres&quot;&gt;congres-commissie is vastgesteld&lt;/a&gt;. Ook hebben we eerder in december al verkennende gesprekken gehad met Eventstack, en het bestuur ziet de samenwerking met deze partner met vertrouwen tegemoet.&lt;/p&gt;
  9200. &lt;h2&gt;Atomic design en complexiteit in CSS&lt;/h2&gt;
  9201. &lt;p&gt;Op dinsdag 24 januari organiseert Fronteers samen met E-sites in Breda een &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2017/meetup-januari-e-sites&quot;&gt;bijeenkomst met CSS als thema&lt;/a&gt;. We hebben twee Nederlandstalige talks, van Iain van der Wiel en Bram Smulders. Uiteraard raden we iedereen van harte aan om naar deze bijeenkomst te gaan!&lt;/p&gt;
  9202. &lt;h2&gt;Workshops over responsive design, ES2015 en CSS architectuur&lt;/h2&gt;
  9203. &lt;p&gt;Ken je iemand die meer wil weten over de basis van front-end development? Op vrijdag 27 januari bieden we een beginnersworkshop &lt;a href=&quot;https://www.fronteers.nl/workshops/responsive-design-frances-de-waal&quot;&gt;Responsive design&lt;/a&gt; aan. Doelgroep: back-enders, designers en iedereen die meer over front-end development wil weten. Wil je je &lt;em&gt;eigen&lt;/em&gt; kennis opschroeven? In de komende maanden hebben we ook workshops over &lt;a href=&quot;https://www.fronteers.nl/workshops/es2015-chiel-kunkels&quot;&gt;ES2015&lt;/a&gt; en &lt;a href=&quot;https://www.fronteers.nl/workshops/that-mess-called-css-door-hans-grimm&quot;&gt;CSS architectuur&lt;/a&gt;. Deelname kost slechts €150 voor leden (€250 voor niet-leden), inclusief lunch.&lt;/p&gt;
  9204. &lt;h2&gt;Aftreden bestuurslid&lt;/h2&gt;
  9205. &lt;p&gt;Naar aanleiding van de –vrij publieke en niet altijd constructieve– discussie die plaatsvond na de laatste ALV heeft &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2016/11/wijzigingen-na-alv&quot;&gt;Michael Hastrich&lt;/a&gt; aangegeven dat hij niet langer op een zinnige wijze een bijdrage kan leveren binnen het bestuur, en daarom een stap terug wil doen. Het bestuur vindt het zeer jammer dat Michael deze beslissing heeft moeten nemen, maar wil hem alsnog hartelijk bedanken voor al het werk dat hij heeft verricht (en blijft verrichten) voor Fronteers. Het bestuur heeft voorlopig besloten dat ze in de huidige bezetting door zal gaan, waarbij de focus volledig zal komen te liggen op het organiseren van activiteiten, workshops, het congres en de communicatie naar de leden. In de loop van het jaar zal het bestuur nogmaals kijken of in de huidige bezetting doorgegaan zal worden, of dat er alsnog een tussentijdse ALV gehouden zal worden.&lt;/p&gt;
  9206. </content>
  9207.  </entry>
  9208.  <entry>
  9209.    <title>Met korting naar een Front-end Performance Master Class</title>
  9210.    <link href="https://www.fronteers.nl/nl/blog/2017/01/front-end-performance-master-class"/>
  9211.    <updated>2017-01-09T00:00:00Z</updated>
  9212.    <id>https://www.fronteers.nl/nl/blog/2017/01/front-end-performance-master-class</id>
  9213.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 27 januari organiseert De Voorhoede een Front-end Performance Master Class in Amsterdam. Leden van Fronteers ontvangen 10% korting op deze Master Class.&lt;/p&gt;
  9214. &lt;p&gt;Tijdens deze hands-on Master Class, die volledig Engelstalig zal zijn, leer je hoe je onderzoekt wat jouw website langzaam maakt en hoe je dat verbetert. In &lt;a href=&quot;https://www.voorhoede.nl/en/blog/why-our-website-is-faster-than-yours/&quot;&gt;deze blogpost&lt;/a&gt; lees je hoe De Voorhoede onlangs haar eigen website compleet vernieuwde. We gaan dieper in op deze technieken en je gaat zelf aan de slag door de performance van een real world voorbeeldsite te optimaliseren.&lt;/p&gt;
  9215. &lt;h2&gt;Wat je leert&lt;/h2&gt;
  9216. &lt;ul&gt;
  9217. &lt;li&gt;Begrijpen hoe browser rendering werkt&lt;/li&gt;
  9218. &lt;li&gt;Analyseren van front-end web performance&lt;/li&gt;
  9219. &lt;li&gt;Vinden van performance bottlenecks&lt;/li&gt;
  9220. &lt;li&gt;Quick-win performance-optimalisaties&lt;/li&gt;
  9221. &lt;li&gt;Geavanceerde performance-optimalisaties&lt;/li&gt;
  9222. &lt;/ul&gt;
  9223. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/voorhoede-blog-post-full.jpg&quot; alt=&quot;twee ontwikkelaars die naar broncode op een beeldscherm kijken&quot; /&gt;&lt;/p&gt;
  9224. &lt;h2&gt;Dagindeling&lt;/h2&gt;
  9225. &lt;ul&gt;
  9226. &lt;li&gt;Introductie: performance matters, perceived performance&lt;/li&gt;
  9227. &lt;li&gt;Critical rendering path&lt;/li&gt;
  9228. &lt;li&gt;Performance meten: met Pagespeed Insights, WebPagetest &amp;amp; Chrome dev tools&lt;/li&gt;
  9229. &lt;li&gt;Basis performance optimalisatie: caching, gzipping, minification&lt;/li&gt;
  9230. &lt;li&gt;Image delivery: WebP, &lt;picture&gt;, [srcset], data URI’s&lt;/picture&gt;&lt;/li&gt;
  9231. &lt;li&gt;Web fonts: font subsetting, FOIT vs FOUT, async font loading&lt;/li&gt;
  9232. &lt;li&gt;Lazy load JS: [async], [defer], loadJS&lt;/li&gt;
  9233. &lt;li&gt;Lazy load CSS: with critical CSS&lt;/li&gt;
  9234. &lt;li&gt;Moving towards HTTP/2&lt;/li&gt;
  9235. &lt;/ul&gt;
  9236. &lt;h2&gt;Praktisch&lt;/h2&gt;
  9237. &lt;p&gt;De Master Class zal gehouden worden op 27 januari en vindt plaats op het kantoor van &lt;a href=&quot;https://www.voorhoede.nl/&quot;&gt;de Voorhoede&lt;/a&gt; op de Rijnsburgstraat 9 in Amsterdam. Fronteers-leden krijgen 10% korting op de prijs van de Master Class Bij de toegang zijn koffie, lunch, en een drankje na afloop inbegrepen. Meer informatie is te vinden op de &lt;a href=&quot;https://www.eventbrite.nl/e/tickets-front-end-performance-master-class-amsterdam-28783247468&quot;&gt;website van de Master Class&lt;/a&gt;.&lt;/p&gt;
  9238. &lt;p&gt;Mocht je gebruik willen maken van deze korting, neem dan even contact op met &lt;a href=&quot;https://www.eventbrite.nl/e/tickets-front-end-performance-master-class-amsterdam-28783247468&quot;&gt;de ledenadministratie&lt;/a&gt;. Zoals gebruikelijk geldt deze actie alleen voor leden die op dit moment al lid zijn.&lt;/p&gt;
  9239. </content>
  9240.  </entry>
  9241.  <entry>
  9242.    <title>Eerste data workshops 2017 bekend</title>
  9243.    <link href="https://www.fronteers.nl/nl/blog/2016/12/eerste-data-workshops-2017-bekend"/>
  9244.    <updated>2016-12-06T00:00:00Z</updated>
  9245.    <id>https://www.fronteers.nl/nl/blog/2016/12/eerste-data-workshops-2017-bekend</id>
  9246.    <content xml:lang="nl" type="html">&lt;p&gt;Voor 2017 hebben we de ambitie om elke maand een workshop te organiseren. Trots kunnen we mededelen dat de eerste maanden gevuld zijn met hele toffe workshops!&lt;/p&gt;
  9247. &lt;h2&gt;Workshops 2017&lt;/h2&gt;
  9248. &lt;p&gt;De volgende workshops ingepland voor begin 2017:&lt;/p&gt;
  9249. &lt;table&gt;
  9250. &lt;thead&gt;
  9251. &lt;tr&gt;
  9252. &lt;th&gt;Workshop&lt;/th&gt;
  9253. &lt;th&gt;Docent&lt;/th&gt;
  9254. &lt;th&gt;Datum&lt;/th&gt;
  9255. &lt;/tr&gt;
  9256. &lt;/thead&gt;
  9257. &lt;tbody&gt;
  9258. &lt;tr&gt;
  9259. &lt;td&gt;Responsive Webdesign&lt;/td&gt;
  9260. &lt;td&gt;Frances de Waal&lt;/td&gt;
  9261. &lt;td&gt;27 januari&lt;/td&gt;
  9262. &lt;/tr&gt;
  9263. &lt;tr&gt;
  9264. &lt;td&gt;That mess called CSS&lt;/td&gt;
  9265. &lt;td&gt;Hans Grimm&lt;/td&gt;
  9266. &lt;td&gt;24 februari&lt;/td&gt;
  9267. &lt;/tr&gt;
  9268. &lt;tr&gt;
  9269. &lt;td&gt;ES2015&lt;/td&gt;
  9270. &lt;td&gt;Chiel Kunkels&lt;/td&gt;
  9271. &lt;td&gt;24 maart&lt;/td&gt;
  9272. &lt;/tr&gt;
  9273. &lt;/tbody&gt;
  9274. &lt;/table&gt;
  9275. &lt;p&gt;Deze workshops kun je volgen voor €250,-. Ben je Fronteers lid? Dan kost het slechts €150,-. Zet de data in je agenda en meld je aan!&lt;/p&gt;
  9276. &lt;h2&gt;Onderwerpen voor workshops&lt;/h2&gt;
  9277. &lt;p&gt;Ook al hebben we voldoende onderwerpen om heel het jaar te vullen, wij zijn altijd benieuwd welke workshops jij graag zou bezoeken! Deel jouw onderwerpen door een reactie te plaatsen op dit bericht, stuur een tweet naar &lt;a href=&quot;https://twitter.com/fronteers&quot;&gt;@fronteers&lt;/a&gt; of benader ons op &lt;a href=&quot;https://www.fronteers.nl/blog/2016/02/fronteers-op-slack&quot;&gt;Slack&lt;/a&gt; of &lt;a href=&quot;mailto:workshops@fronteers.nl&quot;&gt;email&lt;/a&gt;.&lt;/p&gt;
  9278. </content>
  9279.  </entry>
  9280.  <entry>
  9281.    <title>Wijzigingen na ALV</title>
  9282.    <link href="https://www.fronteers.nl/nl/blog/2016/11/wijzigingen-na-alv"/>
  9283.    <updated>2016-11-30T00:00:00Z</updated>
  9284.    <id>https://www.fronteers.nl/nl/blog/2016/11/wijzigingen-na-alv</id>
  9285.    <content xml:lang="nl" type="html">&lt;p&gt;Tijdens een bewogen ALV op 29 november jongstleden namen we afscheid van Arjan Eising, Hidde de Vries, Sander van Lambalgen en Thomas van Zuijlen als bestuursleden van Fronteers. Verder werden zowel het voorstel om een leverancier in te schakelen voor de organisatie van het congres alsmede het opstarten van een onderzoek naar het financieel compenseren van vrijwilligers aangenomen.&lt;/p&gt;
  9286. &lt;h2&gt;Aangenomen voorstel: inschakelen leverancier voor organisatie congres&lt;/h2&gt;
  9287. &lt;p&gt;Lid Thomas van Zuijlen heeft een &lt;a href=&quot;https://www.fronteers.nl/blog/2016/11/alv-2016-motie-andere-aanpak-organisatie-congres&quot;&gt;voorstel ingediend bij de ALV&lt;/a&gt; om een leverancier in te schakelen voor het organiseren van het Fronteers congres. Concreet wil dat zeggen dat Fronteers het bedrijf Eventstack in gaat huren voor de logistieke organisatie van het jaarlijkse congres. In een eerder gesprek dit jaar heeft het toen zittende bestuur aangegeven een aantal bezwaren te zien bij dit voorstel, hierbij hebben zij aangegeven dat elk lid het recht heeft om een motie in te dienen bij de ALV. Nadat er een aantal vragen van de leden zijn beantwoord en een aantal voor- en tegenstanders aan het woord zijn geweest, heeft er een stemming plaatsgevonden.&lt;/p&gt;
  9288. &lt;p&gt;Het voorstel is aangenomen met 21 stemmen voor, 18 stemmen tegen en 4 blanco.&lt;/p&gt;
  9289. &lt;p&gt;Doordat Eventstack onder andere eigendom is van Thomas van Zuijlen, is hij om belangenverstrengeling te voorkomen, direct na de aanname van dit voorstel afgetreden als bestuurslid. Bestuurslid Hidde de Vries is ook afgetreden als bestuurslid. Hidde zal zijn penningmeesterschap tot eind 2016 blijven vervullen en zorgen voor overdracht aan zijn vervanger. Hij blijft voorlopig ook voorzitter van de workshopcommissie.&lt;/p&gt;
  9290. &lt;p&gt;Naar aanleiding van de aanname van het voorstel zal het bestuur zo snel mogelijk een congres commissie opzetten, waarna de onderhandeling zal plaatsvinden met Eventstack. Zoals altijd blijft Fronteers de eigenaar van het congres, en zal de congrescommissie zorgdragen voor onder andere het inhoudelijke programma. Deze commissie zal ook bepalen welke taken wel en niet worden uitbesteed aan Eventstack. Vanwege de discussie die dit voorstel heeft veroorzaakt, zal het bestuur de leden actief op de hoogte houden op de website.&lt;/p&gt;
  9291. &lt;h2&gt;Aangenomen voorstel: Onderzoek naar financiële compensatie vrijwilligers&lt;/h2&gt;
  9292. &lt;p&gt;Leden Arjan Eising en Hidde de Vries hebben tijdens de ALV het volgende voorstel ingediend bij de ALV:&lt;/p&gt;
  9293. &lt;blockquote&gt;
  9294. &lt;p&gt;Verzoekt het bestuur actief uit te zoeken welke voordelen en nadelen kleven aan het betalen van vrijwilligers voor hun inzet binnen de vereniging. Gekeken wordt naar de haalbaarheid, procedures, juridische en fiscale vraagstukken en hoe dit binnen de statuten, of binnen aan te passen statuten, kan werken om de doelstellingen van Fronteers te behalen. De resultaten dienen op een ALV in 2017 te worden gerapporteerd, eventueel bijgestaan door beleidsvoorstellen die er uit volgen.&lt;/p&gt;
  9295. &lt;/blockquote&gt;
  9296. &lt;p&gt;Na een korte uitleg hierover, is de ALV direct over gegaan tot een stemming en is dit voorstel met een zeer ruime meerderheid aangenomen.&lt;/p&gt;
  9297. &lt;p&gt;Naar aanleiding van dit voorstel zal het bestuur een onderzoek instellen naar de mogelijkheden tot het financieel compenseren van leden. Het bestuur is van mening dat dit, gezien de discussie die plaats heeft gevonden op de ALV, zo snel mogelijk zal plaats vinden en ruim voor de ALV gepubliceerd zal worden op de website. Eventuele beleidsvoorstellen zullen op de ALV in 2017 worden ingediend.&lt;/p&gt;
  9298. &lt;h2&gt;Afgetreden bestuursleden&lt;/h2&gt;
  9299. &lt;p&gt;Bij deze ALV zijn de volgende bestuursleden afgetreden:&lt;/p&gt;
  9300. &lt;ul&gt;
  9301. &lt;li&gt;Arjan Eising&lt;/li&gt;
  9302. &lt;li&gt;Sander van Lambalgen&lt;/li&gt;
  9303. &lt;li&gt;Hidde de Vries&lt;/li&gt;
  9304. &lt;li&gt;Thomas van Zuijlen&lt;/li&gt;
  9305. &lt;/ul&gt;
  9306. &lt;p&gt;Het bestuur bedankt hen voor de inzet in de afgelopen jaren.&lt;/p&gt;
  9307. &lt;h2&gt;Aangetreden bestuursleden&lt;/h2&gt;
  9308. &lt;p&gt;Tijdens deze ALV zijn de volgende leden toegetreden tot het bestuur:&lt;/p&gt;
  9309. &lt;ul&gt;
  9310. &lt;li&gt;Michael Hastrich&lt;/li&gt;
  9311. &lt;li&gt;Roy Tomeij&lt;/li&gt;
  9312. &lt;li&gt;Sander Vink&lt;/li&gt;
  9313. &lt;/ul&gt;
  9314. &lt;p&gt;Bij de eerstvolgende bestuursvergadering zal de rolverdeling voor 2017 worden vastgesteld en aangepast op de website.&lt;/p&gt;
  9315. &lt;h2&gt;Oproep&lt;/h2&gt;
  9316. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/vereniging/alv&quot;&gt;De ALV&lt;/a&gt; is het hoogste orgaan binnen de vereniging, waar opdrachten aan het bestuur kunnen worden gegeven, en plannen van het bestuur kunnen worden aangepast. Een voorstel wordt zoals &lt;a href=&quot;https://www.fronteers.nl/vereniging/geschiedenis/statuten&quot;&gt;beschreven in de statuten&lt;/a&gt; aangenomen wanneer een meerderheid (50% + 1 stem) voor het voorstel is. Het bestuur hoopt dat alle leden, ook die tegen hebben gestemd, zich neer leggen bij de democratisch genomen beslissing van de ALV, of op een constructieve wijze binnen de kaders van de statuten, actie ondernemen.&lt;/p&gt;
  9317. &lt;p&gt;Het bestuur roept een ieder op alle zorgen, opmerkingen of vragen naar aanleiding van het bovenstaande te &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;delen met het bestuur&lt;/a&gt;, zodat deze meegenomen kunnen worden in de verdere besluitvorming.&lt;/p&gt;
  9318. </content>
  9319.  </entry>
  9320.  <entry>
  9321.    <title>Kandidaat bestuur Fronteers: Michael Hastrich</title>
  9322.    <link href="https://www.fronteers.nl/nl/blog/2016/11/kandidaat-bestuur-fronteers-michael-hastrich"/>
  9323.    <updated>2016-11-25T00:00:00Z</updated>
  9324.    <id>https://www.fronteers.nl/nl/blog/2016/11/kandidaat-bestuur-fronteers-michael-hastrich</id>
  9325.    <content xml:lang="nl" type="html">&lt;p&gt;Aanstaande maandag vindt de &lt;a href=&quot;https://www.fronteers.nl/blog/2016/11/aanmelden-alv-2016&quot;&gt;jaarlijkse ALV van Fronteers&lt;/a&gt; plaats. Een van de onderdelen tijdens de ALV is de bestuursverkiezing. Er zijn op dit moment twee kandidaten voor het bestuur. Hieronder stelt de tweede zich aan jullie voor: Michael Hastrich.&lt;/p&gt;
  9326. &lt;p&gt;Hallo, ik ben Michael Hastrich, woonachtig in Utrecht en werkzaam als freelance front-end developer. Ik heb geen idee wanneer ik precies lid geworden ben van Fronteers, maar ben vooral de laatste 5 jaar actief geweest binnen de vereniging. Nu wil ik me graag kandidaat stellen voor een bestuursfunctie.&lt;/p&gt;
  9327. &lt;p&gt;Nadat ik eerst een poosje bij de marketingcommissie wat kleinere klusjes gedaan heb, vroeg Hidde me in 2013 bij de congrescommissie te komen. Iets wat ik een ontzettende eer vond en dus graag met beide handen aanpakte.&lt;/p&gt;
  9328. &lt;p&gt;Na 5 congressen te hebben georganiseerd, vind ik het tijd dat weer aan anderen te laten. Ik kijk er naar uit om in oktober 2017 plaats te nemen in zo’n luxueuze stoel in Tuschinski en weer een ‘information overload’ over me uitgestort te krijgen.&lt;/p&gt;
  9329. &lt;p&gt;Maar ik wil wel graag ‘iets’ blijven doen voor de vereniging en dat zou nu dus kunnen in de vorm van plaatsnemen in het bestuur. Dat lijkt me erg interessant, met name door het kruispunt waarop de vereniging zich lijkt te bevinden. De afgelopen tijd zijn er een hoop zaken bespreekbaar gemaakt waarvan ik denk, dat ze aangeven dat de vereniging een aantal belangrijke keuzes moet gaan maken.
  9330. Ik zou graag meedenken over die keuzes, ervoor willen zorgen dat leden zich betrokken bij en gehoord voelen in die keuzes. En dat de keuzes die genomen worden zo goed mogelijk worden ondersteund door beleid.&lt;/p&gt;
  9331. &lt;p&gt;Daarnaast wil ik me er als bestuurslid hard voor gaan maken dat Fronteers zich wat meer naar buiten gaat richten. Dat we meer de aansluiting gaan zoeken met verwante beroepsgroepen en dat we ook duidelijker maken aan front-end developers die nog geen lid van Fronteers zijn, waarom ze dat wel zouden moeten worden.&lt;/p&gt;
  9332. &lt;p&gt;Ook directere en regelmatigere communicatie met de leden zie ik als een verbeterpunt en ook daarvoor zou ik graag het initiatief willen nemen om te kijken of we daar met gelijkgestemden binnen de vereniging niet eens iets aan kunnen doen.&lt;/p&gt;
  9333. </content>
  9334.  </entry>
  9335.  <entry>
  9336.    <title>Kandidaat bestuur Fronteers: Sander Vink</title>
  9337.    <link href="https://www.fronteers.nl/nl/blog/2016/11/kandidaat-bestuur-fronteers-sander-vink"/>
  9338.    <updated>2016-11-24T00:00:00Z</updated>
  9339.    <id>https://www.fronteers.nl/nl/blog/2016/11/kandidaat-bestuur-fronteers-sander-vink</id>
  9340.    <content xml:lang="nl" type="html">&lt;p&gt;Aanstaande maandag vindt de &lt;a href=&quot;https://www.fronteers.nl/blog/2016/11/aanmelden-alv-2016&quot;&gt;jaarlijkse ALV van Fronteers&lt;/a&gt; plaats. Een van de onderdelen tijdens de ALV is de bestuursverkiezing. Er zijn op dit moment twee kandidaten voor het bestuur. Hieronder stelt de eerste zich aan jullie voor: Sander Vink.&lt;/p&gt;
  9341. &lt;p&gt;Hi allen! Ik ben Sander Vink, 34 jaar, woon samen met mijn (bijna) vrouw en twee kids in Utrecht, en werk bij &lt;a href=&quot;https://developer.procurios.com/&quot;&gt;Procurios&lt;/a&gt;. In mijn vrije tijd sport ik regelmatig (tennis/hardlopen), en wat online gaming kan ik zeker ook waarderen. Verder ga ik graag naar congressen, en ben ik een regelmatig bezoeker van meetups.&lt;/p&gt;
  9342. &lt;p&gt;Samen met een aantal collega&#39;s ging ik al een aantal jaar naar het Fronteers congres, en heb twee jaar geleden besloten om mij aan te melden voor de congres commissie. Dit heb ik dan ook twee jaar met veel plezier gedaan. Het is mij daarbij vooral opgevallen hoe erg je bijdrage aan Fronteers wordt gewaardeerd door iedereen die ik sindsdien gesproken heb. Graag zou ik dit verder voortzetten als bestuurslid van Fronteers.&lt;/p&gt;
  9343. &lt;p&gt;Fronteers is als vereniging al behoorlijk bekend in de front-end wereld van Nederland, maar volgens mij hebben we hier nog steeds terrein te winnen. Het aantal leden schommelt ook al even rond hetzelfde punt, terwijl het aantal front-end developers niet is afgenomen; hier is dus werk aan de winkel! Het moet voor iedereen duidelijk zijn dat een lidmaatschap van Fronteers toegevoegde waarde heeft, en dit ook blijft houden, ongeacht het niveau wat je al bereikt hebt als front-end developer. Vanuit het bestuur, namens de vereniging en haar leden, draag ik daar graag mijn steentje aan bij.&lt;/p&gt;
  9344. </content>
  9345.  </entry>
  9346.  <entry>
  9347.    <title>Meld je nu aan voor de ALV 2016</title>
  9348.    <link href="https://www.fronteers.nl/nl/blog/2016/11/aanmelden-alv-2016"/>
  9349.    <updated>2016-11-21T00:00:00Z</updated>
  9350.    <id>https://www.fronteers.nl/nl/blog/2016/11/aanmelden-alv-2016</id>
  9351.    <content xml:lang="nl" type="html">&lt;p&gt;Maandag 28 november houden we onze jaarlijkse algemene ledenvergadering (ALV). Alle leden zijn hiervoor van harte uitgenodigd. De locatie van de ALV is Zalencentrum Se7en (toegang via &lt;a href=&quot;http://www.sevenutrecht.nl/contact/route/&quot;&gt;Restaurant Se7en&lt;/a&gt;), Mariaplaats 7, ongeveer vijf minuten lopen vanaf Utrecht CS.&lt;/p&gt;
  9352. &lt;p&gt;Voor de mensen die van ver komen zullen er vanaf 18:00 broodjes klaar staan. De vergadering zelf zal stipt om 19:00 uur beginnen, en we gaan ons er voor inzetten om deze kort en doeltreffend te laten verlopen. We waarderen de inspraak van leden echter zeer, en hebben een aantal onderwerpen op het programma waarvan we verwachten dat deze discussie zullen oproepen, dus verwachten dat de totale vergadering eerder drie dan twee uur zal duren.&lt;/p&gt;
  9353. &lt;p&gt;Het staat leden nog steeds vrij voorstellen voor de agenda in te dienen. Vooralsnog is de agenda van de avond de volgende:&lt;/p&gt;
  9354. &lt;ol&gt;
  9355. &lt;li&gt;Welkom en opening door de voorzitter&lt;/li&gt;
  9356. &lt;li&gt;Besluiten eerdere ALVs&lt;/li&gt;
  9357. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  9358. &lt;li&gt;Rapportage kascommissie 2014&lt;/li&gt;
  9359. &lt;li&gt;Rapportage kascommissie 2015&lt;/li&gt;
  9360. &lt;li&gt;Jaarstukken 2015 / Financiën 2016 / Begroting 2017&lt;/li&gt;
  9361. &lt;li&gt;Kascommissieverkiezing&lt;/li&gt;
  9362. &lt;li&gt;Ingediend voorstel: inschakelen leverancier voor organisatie congres&lt;/li&gt;
  9363. &lt;li&gt;Aftreden Sander en Arjan, bestuursverkiezing&lt;/li&gt;
  9364. &lt;li&gt;Rondvraag&lt;/li&gt;
  9365. &lt;li&gt;Afsluiting&lt;/li&gt;
  9366. &lt;/ol&gt;
  9367. &lt;p&gt;Aan het eind van zijn bestuurstermijn treedt dit jaar Sander van Lambalgen af, en stelt zich - na 8 jaar in het bestuur - niet herkiesbaar. Tevens - na wel 9 jaar in het bestuur (sinds het allereerste begin!) - heeft ook Arjan Eising besloten dat het genoeg is geweest, en treedt tussentijds af. Het bestuur bedankt hen voor al hun inspanningen en bijdragen uit de afgelopen jaren.&lt;/p&gt;
  9368. &lt;p&gt;We hebben op het moment van schrijven nog &lt;em&gt;geen&lt;/em&gt; nieuwe leden bereid gevonden zich kandidaat te stellen voor een bestuursfunctie. Het bestuur kan theoretisch fungeren met de overgebleven drie bestuursleden, maar zou graag versterking zien. We hopen op de ALV alsnog een of meerdere kandidaten aan de leden te mogen voorstellen.&lt;/p&gt;
  9369. &lt;h2&gt;Toelichting op de begroting&lt;/h2&gt;
  9370. &lt;p&gt;We zijn er op dit moment nog mee bezig, maar hopen de voorlopige financiële cijfers over 2016 en volledige begroting over 2017 enkele dagen voor de ALV naar alle aangemelde aanwezigen te kunnen opsturen. (Mocht je niet aanwezig kunnen zijn, maar deze informatie wel willen zien, dan is dat natuurlijk ook mogelijk. Laat het ons weten!)&lt;/p&gt;
  9371. &lt;p&gt;Belangrijkste wijzigingen in de begroting t.o.v. vorige jaren zijn de volgende punten:&lt;/p&gt;
  9372. &lt;h2&gt;Extra budget activiteitencommissie t.b.v. niet-gesponsorde bijeenkomsten&lt;/h2&gt;
  9373. &lt;p&gt;We zijn recent met &lt;a href=&quot;https://www.fronteers.nl/blog/2016/11/verslag-bijeenkomst-toegankelijkheid&quot;&gt;dit type bijeenkomsten&lt;/a&gt; gestart, zijn er enthousiast over, en willen dit concept dan ook voortzetten (naast de normale bijeenkomsten). Hier is extra budget voor gereserveerd.&lt;/p&gt;
  9374. &lt;h2&gt;Nieuwe post communityondersteuning&lt;/h2&gt;
  9375. &lt;p&gt;Er worden veel voor front-enders nuttige activiteiten georganiseerd door andere organisaties dan Fronteers. Mits deze organisaties en activiteiten &amp;quot;passen&amp;quot; bij Fronteers (dwz gerund door vrijwilligers, professionalisering ten goede komen, etc), willen wij dit ondersteunen, met advies en promotie, maar ook - waar nodig - financieel. We zijn hier al mee begonnen, en willen dit volgend jaar graag verder voortzetten.&lt;/p&gt;
  9376. &lt;h2&gt;Reservering vernieuwing website&lt;/h2&gt;
  9377. &lt;p&gt;Naar aanleiding van onze ledenconsultatie in september stelde een lid voor geld uit te geven aan een nieuwe Fronteers-website. Het bestuur is enthousiast over het idee, maar heeft wel enkele bedenkingen. Er is een stelpost opgenomen in de begroting. De penningmeester heeft een blogpost geschreven &lt;a href=&quot;https://www.fronteers.nl/blog/2016/11/begroting-2017-een-nieuwe-website&quot;&gt;om dit onderwerp nader toe te lichten&lt;/a&gt;.&lt;/p&gt;
  9378. &lt;h2&gt;Voorstel inschakelen leverancier Eventstack voor praktische organisatie Fronteers Conference&lt;/h2&gt;
  9379. &lt;p&gt;Tenslotte hebben we dit jaar een voorstel van Thomas van Zuijlen om aan de leden voor te leggen. Thomas is bestuurslid, maar doet dit voorstel expliciet als lid, gericht aan de leden. De samenvatting van het voorstel:&lt;/p&gt;
  9380. &lt;blockquote&gt;
  9381. &lt;p&gt;Het management van de praktische organisatie van Fronteers Conference uitbesteden aan een leverancier, Eventstack. De congrescommissie hoeft geen logistieke werkzaamheden meer uit te voeren en blijft inhoudelijk verantwoordelijk voor het congres. Fronteers richt zich op inhoud, terwijl de organisatie van het congres verder professionaliseert.&lt;/p&gt;
  9382. &lt;/blockquote&gt;
  9383. &lt;p&gt;Thomas heeft een blogpost geschreven met &lt;a href=&quot;https://www.fronteers.nl/blog/2016/11/alv-2016-motie-andere-aanpak-organisatie-congres&quot;&gt;verdere overwegingen&lt;/a&gt;, en hij zal dit op de ALV verder toelichten.&lt;/p&gt;
  9384. &lt;p&gt;Eerdere discussie over dit onderwerp valt ook &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen/04-08-2016&quot;&gt;in de bestuursnotulen&lt;/a&gt; terug te lezen.&lt;/p&gt;
  9385. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  9386. &lt;p&gt;Ben je van plan te komen, dan vragen we je vriendelijk je hieronder hiervoor in te schrijven, zodat we enigszins een idee hebben van de verwachte opkomst.&lt;/p&gt;
  9387. </content>
  9388.  </entry>
  9389.  <entry>
  9390.    <title>ALV 2016: Motie: Andere aanpak organisatie congres</title>
  9391.    <link href="https://www.fronteers.nl/nl/blog/2016/11/alv-2016-motie-andere-aanpak-organisatie-congres"/>
  9392.    <updated>2016-11-20T00:00:00Z</updated>
  9393.    <id>https://www.fronteers.nl/nl/blog/2016/11/alv-2016-motie-andere-aanpak-organisatie-congres</id>
  9394.    <content xml:lang="nl" type="html">&lt;p&gt;Het Fronteerscongres is in negen jaar uitgegroeid tot Fronteers Conference. De organisatie daarvan is inmiddels geen avondwerk meer, maar een dagtaak. De congrescommissie gaat niet verder in zijn huidige vorm: een goed moment om het anders aan te pakken. Aangeboden ter overweging aan de algemene ledenvergadering van Fronteers: Ik stel voor om de commissie op inhoud te laten sturen en om de praktische organisatie uit te besteden.&lt;/p&gt;
  9395. &lt;h2&gt;Achtergrond&lt;/h2&gt;
  9396. &lt;p&gt;Het Fronteerscongres bestaat bijna 10 jaar. In dit decennium is het congres uitgegroeid van een mooie bijeenkomst tot een congres van wereldformaat met een begroting in tonnen. De organisatie moet momenteel rekening houden met, en zorgen voor, steeds meer verschillende facetten van het congreswezen. Een zaal en een groep sprekers is niet meer voldoende, het huidige congres is een onderneming met een voorbereiding van een jaar, een groep side events en een logistieke piek van twee weken. Dat brengt allerlei reis-, branding-, contact-, plan-, en ander organisatiewerk met zich mee.&lt;/p&gt;
  9397. &lt;p&gt;De inspanning die daarvoor nodig is, past niet meer in de avonden en weekenden van enkele vrijwilligers. Bovendien is niet alleen de hoeveelheid, maar ook de aard van de werkzaamheden gegroeid. Inmiddels is front-end-inhoudelijk werk helemáál nog maar een klein onderdeel van het takenpakket.&lt;/p&gt;
  9398. &lt;p&gt;Jan van Hellemond en ik zijn al jaren bij het congres betrokken; eerst als vrijwilliger en sponsor, en sinds 2014 en 2013 als lid van de congrescommissie. We hebben met onze collega-vrijwilligers veel (mee)gemaakt van deze groei. Wij vinden het inmiddels juist uitermate leuk om allerlei logistieke werkzaamheden uit te voeren - dit jaar hebben we naast ons front-end-bedrijf samen ook een bedrijf opgericht voor de organisatie van bijeenkomsten en evenementen voor developers.&lt;/p&gt;
  9399. &lt;h2&gt;Voorstel&lt;/h2&gt;
  9400. &lt;p&gt;Kortweg stel ik daarom het volgende voor: Een nieuwe congrescommissie legt zich toe op de inhoudelijke invulling van het congres, en Fronteers schakelt onze &#39;tweemanszaak&#39; Eventstack in voor de praktische organisatie van Fronteers Conference.&lt;/p&gt;
  9401. &lt;p&gt;(Net zoals reisexpert Been Here wordt ingeschakeld voor het regelen en boeken van reizen voor sprekers, Event Engineers om de Wi-Fi te verzorgen tijdens het congres, DJP Media voor de videoregistratie, Van Dam Catering en Select Catering voor het eten, enzovoort.)&lt;/p&gt;
  9402. &lt;blockquote&gt;
  9403. &lt;p&gt;Voorstel: Het management van de praktische organisatie van Fronteers Conference uitbesteden aan leverancier Eventstack. De congrescommissie hoeft geen logistieke werkzaamheden meer uit te voeren en blijft inhoudelijk verantwoordelijk voor het congres. Fronteers richt zich op inhoud, terwijl de organisatie van het congres verder professionaliseert.&lt;/p&gt;
  9404. &lt;/blockquote&gt;
  9405. &lt;h2&gt;Vragen&lt;/h2&gt;
  9406. &lt;h3&gt;Waarom leg je dit voor aan de leden - we worden toch ook niet over de cateraar van het congres geconsulteerd?&lt;/h3&gt;
  9407. &lt;p&gt;Het bestuur was verdeeld over het initiële voorstel en adviseerde om de leden te raadplegen. De verdeeldheid zat &#39;m erin dat congresorganisatie traditioneel onderdeel is van de vrijwilligersactiviteiten van de vereniging. Ook was men benieuwd wat dit betekent voor de continuïteit van de congressen. Omdat er geen overeenstemming bereikt werd en er dus niet zonder meer een besluit genomen is, kwam het advies om de kwestie aan de leden voor te leggen.&lt;/p&gt;
  9408. &lt;h3&gt;Gaan we nu vrijwilligers betalen?&lt;/h3&gt;
  9409. &lt;p&gt;Nee, dit is een voorstel om een leverancier in te schakelen voor het gedurende het hele jaar tijdens kantooruren runnen van de praktische kant van het congres. Dat is dus onder meer het corresponderen met sprekers, leveranciers, en bezoekers via mail, Twitter en website, maar ook het coördineren van logistiek voor de congresweek, het reserveren van locaties, het zorgen voor promotiemateriaal, het verzorgen van design, regelen van video-opnames enzovoort.&lt;/p&gt;
  9410. &lt;h3&gt;Waarom ga je niet gewoon door met vrijwilligen?&lt;/h3&gt;
  9411. &lt;p&gt;Het vasthouden en verder doen groeien van de kwaliteit van het congres kost volgens ons te veel tijd in de oude congrescommissie-opzet. Bovendien gaat veel tijd zitten in het vergaderen en opvolgen van takenlijstjes bij alle vrijwilligers. Die moeite en tijd gaat dan ten koste van regulier werk overdag en van te veel avonden in de week, gedurende het hele jaar. Het terugschroeven van die inzet vertegenwoordigt volgens ons een stap terug in kwaliteit en klasse van het congres. Daarom willen we logistiek leverancier worden: gewoon tijdens werktijd overdag, behoud en groei van evenementkwaliteit gedurende het jaar, en de commissie kan meer op de inhoud zitten.&lt;/p&gt;
  9412. &lt;h3&gt;Als we de praktische organisatie uitbesteden, doet de vereniging dan zelf nog iets?&lt;/h3&gt;
  9413. &lt;p&gt;Jazeker - sprekers uitkiezen, side events bedenken, vrijwilligen tijdens de congresweek, initiatieven toevoegen, enzovoort. De congrescommissie kan met veel minder bijeenkomsten toe, en kan het bij vergaderen en bij inhoudelijke actie houden.&lt;/p&gt;
  9414. &lt;h3&gt;Wie bepaalt of het goed gaat?&lt;/h3&gt;
  9415. &lt;p&gt;Een nieuwe congrescommissie. Namens het bestuur blijft een bestuurslid een oogje in het zeil houden (zoals gebruikelijk, en zoals bij alle commissies). Dat is een ander bestuurslid dan Thomas. Jan en Thomas zitten ook niet meer in de congrescommissie, maar Eventstack is wel bij vergaderingen aanwezig om snel te kunnen schakelen.&lt;/p&gt;
  9416. &lt;h3&gt;Wat kost dit?&lt;/h3&gt;
  9417. &lt;p&gt;Het gaat bij dit voorstel in eerste instantie om &lt;em&gt;het idee&lt;/em&gt; van uitbesteding van de praktische werkzaamheden, maar om je een beeld te geven: we schatten € 15-20K per jaar, om een dag per week full-pull aan het congres te werken. Precieze tijdsbesteding fluctueert natuurlijk, want bepaalde perioden van het jaar vergen meer tijd per week. De exploitatie van het congres is nu een kleine € 200.000 per jaar.&lt;/p&gt;
  9418. &lt;h3&gt;UPDATE: Wacht even, leuk idee, maar je zit toch ook in het bestuur? Is dat niet dubbel?&lt;/h3&gt;
  9419. &lt;p&gt;Dat is een goed punt. Ik ben het met verschillende vraagstellers eens, dat dat eigenlijk niet goed te combineren is met het gelijktijdig deel zijn van een bedrijf dat ingehuurd wordt. Zeker niet als er een beoordeling gemaakt moet worden of er iets verkeerd gaat: dan moet Fronteers natuurlijk Eventstack (net zo goed als de cateraar, of de mensen van de verlichting, of de boekhouder) zonder meer de wacht aan kunnen zeggen.&lt;/p&gt;
  9420. &lt;p&gt;Als ik bestuurslid ben, is dat natuurlijk ontzettend drassig gebied. Om de vereniging niet in die positie te brengen (noch mijzelf, noch Eventstack), stel ik daarom voor mijn positie in het bestuur neer te leggen als de ALV dit voorstel aanneemt en erop geacteerd wordt.&lt;/p&gt;
  9421. </content>
  9422.  </entry>
  9423.  <entry>
  9424.    <title>Begroting 2017: een nieuwe website?</title>
  9425.    <link href="https://www.fronteers.nl/nl/blog/2016/11/begroting-2017-een-nieuwe-website"/>
  9426.    <updated>2016-11-19T00:00:00Z</updated>
  9427.    <id>https://www.fronteers.nl/nl/blog/2016/11/begroting-2017-een-nieuwe-website</id>
  9428.    <content xml:lang="nl" type="html">&lt;p&gt;Wie de Fronteers-begroting voor 2017 bestudeert, zal het vast opvallen: er is een stelpost geïntroduceerd genaamd ‘Eenmalige kosten nieuwe website’. Graag licht het bestuur toe waar deze reservering voor is bedoeld.&lt;/p&gt;
  9429. &lt;p&gt;We nodigen leden van harte uit hun mening over deze toelichting te geven op de ALV, 28 november in Utrecht (&lt;a href=&quot;https://www.fronteers.nl/blog/2016/11/aanmelden-alv-2016&quot;&gt;Aanmelden&lt;/a&gt;).&lt;/p&gt;
  9430. &lt;h2&gt;Ledenconsultatie: waarom geen nieuwe website?&lt;/h2&gt;
  9431. &lt;p&gt;Naar aanleiding van de &lt;a href=&quot;https://www.fronteers.nl/blog/2016/09/ledenraadpleging-wat-te-doen-met-ons-geld&quot;&gt;ledenconsultatie in september&lt;/a&gt; stelde een Fronteers-lid op Slack de volgende vraag: is het niet tijd om eens een nieuwe website te laten ontwerpen? ‘We doen hele coole dingen, maar dat straalt de website niet echt uit […] daar past een hipper jasje bij’, schreef ze.&lt;/p&gt;
  9432. &lt;p&gt;In de discussie die erop volgde werd uitgebreid gesproken over allerlei aspecten. Kunnen we dit (deels) zelf binnen een GitHub project organiseren, waar de hele community mag meecommitten? Of is het te moeilijk je eigen website te maken, en moeten we er professionals voor inhuren? Voor dat laatste gingen veel stemmen op, en er werd de suggestie gedaan te kiezen voor het designbureau dat onze originele website (en logo) bijna tien jaar geleden gratis ontwierp.&lt;/p&gt;
  9433. &lt;p&gt;Ook werd nogmaals duidelijk dat de beheerder van de site zeer open staat voor wijzigingen. In de afgelopen jaren zijn er enkele keren &lt;em&gt;realigns&lt;/em&gt; in het ontwerp doorgevoerd en regelmatig nieuwe features en paginasoorten toegevoegd. De voorstellen voor een nieuwe website gaan expliciet om vernieuwing die verder gaat dan dat.&lt;/p&gt;
  9434. &lt;p&gt;De conclusie uit de discussie op Slack was dat een nieuw ontwerp (en mogelijk daarnaast ook een nieuw CMS) wenselijk was. Het doel? Al onze &lt;em&gt;informatie veel gestructureerder aanbieden&lt;/em&gt;, beter &lt;em&gt;laten zien wat we doen&lt;/em&gt; (aan leden en niet-leden) en &lt;em&gt;onszelf aantrekkelijker presenteren&lt;/em&gt; richting mensen die overwegen lid te worden.&lt;/p&gt;
  9435. &lt;h2&gt;Uitdagingen&lt;/h2&gt;
  9436. &lt;p&gt;Bovenstaande is recent ook binnen het bestuur besproken. De conclusie daar was helder: een meerderheid van het bestuur zou erg blij worden van het vernieuwen van de website. Bestuursleden krijgen regelmatig uit het ‘veld’ te horen dat onze website er verouderd uit ziet, en bepaalde informatie-architectuur-zaken zitten promotie van kernactiviteiten als ons congres, workshops en meetups in de weg.&lt;/p&gt;
  9437. &lt;p&gt;Er werden wel bedenkingen uitgesproken over hoe we faire keuzes kunnen maken, en over de beschikbare tijd bij vrijwilligers.&lt;/p&gt;
  9438. &lt;p&gt;Ten eerste een bedenking over de inhuurprocedure. Fronteers huurt al jaren derde partijen in om zich te laten ondersteunen, bijvoorbeeld op het gebied van administratie, event catering, audiovisuele techniek en zaalhuur. Kenmerkend voor al deze partijen is dat hun vakgebied buiten dat van ons ligt. Dit zou anders zijn bij het inhuren van een bedrijf dat ons kan helpen een website te produceren. Binnen het bestuur, dat hoofdverantwoordelijk zou zijn bij een dergelijke uitgave, is iedereen werknemer of freelancer bij één of meerdere van dat soort bedrijven. Is het voor het bestuur principieel wel mogelijk een zuivere keuze te maken? Kunnen we dit zo organiseren dat het niet tot gewetenskwesties leidt?&lt;/p&gt;
  9439. &lt;p&gt;Een tweede bedenking: het idee van een nieuwe website bestaat al jaren. Er hebben zelfs wel eens meetings bij webbureaus plaatsgevonden die ons gratis wilden helpen. Grootschalige wijzigingen zijn in de afgelopen jaren altijd wel een wens geweest, maar lijken vooral te zijn uitgebleven door tijdgebrek van vrijwilligers. Het uitbesteden van het redesignproject zou nog steeds een onbetaalde vrijwilligersfunctie zijn.&lt;/p&gt;
  9440. &lt;h2&gt;Conclusie&lt;/h2&gt;
  9441. &lt;p&gt;Het bestuur vindt het een goed om een traject voor een nieuwe website op te starten. We zien wel uitdagingen in belangen binnen het keuzeproces en het aansturen van een ingehuurd team.&lt;/p&gt;
  9442. &lt;p&gt;Om het &lt;em&gt;mogelijk&lt;/em&gt; te maken in 2017 een bedrag aan een nieuwe website te besteden, hebben we in de begroting voor 2017 een stelpost opgenomen. Mocht er een commissie opstaan of een uitgewerkt voorstel vanuit het bestuur of leden komen, dan zou daar geen nieuwe ALV of uitstel tot 2018 voor nodig zijn.&lt;/p&gt;
  9443. &lt;p&gt;Heb je ideeën over hoe we dit kunnen doen of wil je over bovenstaande toelichting je mening geven? Kom dan naar de &lt;a href=&quot;https://www.fronteers.nl/blog/2016/11/aanmelden-alv-2016&quot;&gt;ALV&lt;/a&gt; op 28 november, waar het onderwerp besproken zal worden.&lt;/p&gt;
  9444. </content>
  9445.  </entry>
  9446.  <entry>
  9447.    <title>Bijeenkomst over muziek en het web</title>
  9448.    <link href="https://www.fronteers.nl/nl/blog/2016/11/bijeenkomst-muziek"/>
  9449.    <updated>2016-11-17T00:00:00Z</updated>
  9450.    <id>https://www.fronteers.nl/nl/blog/2016/11/bijeenkomst-muziek</id>
  9451.    <content xml:lang="nl" type="html">&lt;p&gt;Woensdag 7 december zal Desmet Studio&#39;s op zijn grondvesten daveren dankzij onze bijeenkomst over muziek en het web, met als eerste act van de avond &lt;a href=&quot;http://www.holovaty.com/&quot;&gt;Adrian Holovaty&lt;/a&gt; gevolgd door &lt;a href=&quot;https://blog.sambego.be/&quot;&gt;Sam Bellen&lt;/a&gt;. Zet &#39;m dus in je agenda en &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2016/muziek-en-het-web&quot;&gt;meld je aan&lt;/a&gt;!&lt;/p&gt;
  9452. &lt;p&gt;Na al enkele keren te hebben gesproken op Fronteers meetups in België, hebben we Sam Bellen eindelijk een keer naar Nederland kunnen halen. Eerder dit jaar sprak hij nog over &lt;a href=&quot;https://jsconfbp.com/speakers/sam-bellen.html&quot;&gt;Changing live audio with the web-audio-api&lt;/a&gt; tijdens JSConf Budapest waarbij hij dankzij de kracht van het web het geluid van zijn gitaar kon manipuleren.&lt;/p&gt;
  9453. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/bijeenkomsten/meetup-0712.jpg&quot; alt=&quot;Foto van Adrian Holovaty en Sam Bellen&quot; /&gt;&lt;/p&gt;
  9454. &lt;p&gt;&lt;em&gt;No cats were harmed in the making of this photo&lt;/em&gt;&lt;/p&gt;
  9455. &lt;p&gt;Je kan gerust rechtstreeks van je werk naar de meetup komen want wij zorgen voor catering zodat je met een volle maag kan genieten van deze topacts!&lt;/p&gt;
  9456. &lt;p&gt;De bijeenkomst vindt plaats in Desmet Studio&#39;s, nabij Artis in Amsterdam. Je kunt je vanaf nu &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2016/muziek-en-het-web&quot;&gt;aanmelden&lt;/a&gt;. Wees er snel bij, want er is maar een beperkt aantal plaatsen.&lt;/p&gt;
  9457. </content>
  9458.  </entry>
  9459.  <entry>
  9460.    <title>Fronteers in Desmet Studio&#39;s #a11y</title>
  9461.    <link href="https://www.fronteers.nl/nl/blog/2016/11/verslag-bijeenkomst-toegankelijkheid"/>
  9462.    <updated>2016-11-11T00:00:00Z</updated>
  9463.    <id>https://www.fronteers.nl/nl/blog/2016/11/verslag-bijeenkomst-toegankelijkheid</id>
  9464.    <content xml:lang="nl" type="html">&lt;p&gt;Afgelopen dinsdag organiseerde Fronteers voor het eerst een bijeenkomst die niet bij een bedrijf, maar op een ‘eigen’ locatie plaatsvond. Het was gezellig druk in Desmet Studio&#39;s in Amsterdam, met zo&#39;n 60 enthousiaste front-end ontwikkelaars.&lt;/p&gt;
  9465. &lt;p&gt;De bijeenkomst stond geheel in het tegen van toegankelijkheid. Als sprekers waren Karl Groves (&lt;a href=&quot;https://twitter.com/karlgroves&quot;&gt;@karlgroves&lt;/a&gt;) en Job van Achterberg (&lt;a href=&quot;https://twitter.com/detonite&quot;&gt;@detonite&lt;/a&gt;) te gast, en Thomas van Zuijlen was namens Fronteers de &lt;em&gt;host&lt;/em&gt;.&lt;/p&gt;
  9466. &lt;h2&gt;Wat hebben we geleerd?&lt;/h2&gt;
  9467. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/karl-praat.jpg&quot; alt=&quot;Karl Groves met publiek&quot; /&gt;&lt;/p&gt;
  9468. &lt;p&gt;&lt;em&gt;Karl Groves laat zien hoe je een ‘dialog’ toegankelijker maakt&lt;/em&gt;&lt;/p&gt;
  9469. &lt;p&gt;Karl liet een aantal manieren zien om met JavaScript toegankelijkheid te verbeteren. Het idee dat toegankelijkheid betekent dat een pagina zonder JavaScript moet werken, ontkrachtte hij. Een toegankelijke pagina beantwoordt de vraag ‘wat is dit en wat moet het doen?’. Volgens Karl kan JavaScript daar &lt;em&gt;juist&lt;/em&gt; goed bij helpen, bijvoorbeeld door roles, tabgedrag en focus vanuit scripts te beïnvloeden. Via de speakers van Desmet luisterden we samen naar hoe screenreader VoiceOver de door hem gebouwde interacties interpreteerde. Karl liet ons vervolgens zien hoe dat eenvoudig een stuk beter kon.&lt;/p&gt;
  9470. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/job-praat.jpg&quot; alt=&quot;Job van Achterberg&quot; /&gt;&lt;/p&gt;
  9471. &lt;p&gt;&lt;em&gt;Job haalt fronteers.nl door de W3C validator. Gelukkig, geen errors!&lt;/em&gt;&lt;/p&gt;
  9472. &lt;p&gt;Job ging in zijn talk in op een aantal tools die je pagina kunnen analyseren. Er zijn inmiddels vele browser plug-ins die je eenvoudig kunnen laten zien of je pagina genoeg contrast heeft, hoe deze eruit ziet voor mensen met visuele beperkingen, en wat de roles van elementen in je pagina zijn. Er zijn ook tools die je als onderdeel van je buildproces kunt toevoegen. Tot slot schetste Job voor ons de toekomst van dit soort tools, en gaf hij een idee van het soort vragen waar makers van toegankelijkheidstools, zoals hijzelf, mee worstelen.&lt;/p&gt;
  9473. &lt;h2&gt;Meer bijeenkomsten op eigen locaties&lt;/h2&gt;
  9474. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/desmet-buiten.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  9475. &lt;p&gt;De eerste niet-bij-een-bedrijf-bijeenkomst was een groot succes te noemen. Het team activiteiten is van plan om elk kwartaal een bijeenkomst zoals deze te organiseren, op een door Fronteers gehuurde locatie. Het idee is dus: elke maand een bijeenkomst, waarvan elk kwartaal eentje op een eigen locatie. Bijeenkomsten bij bedrijven blijven dus ook terugkomen.&lt;/p&gt;
  9476. &lt;h2&gt;De volgende: 7 december in Amsterdam&lt;/h2&gt;
  9477. &lt;p&gt;Heb je deze bijeenkomst gemist? Over een maand vindt er nog eentje plaats, wederom bij Desmet Studio&#39;s, en je kunt je daar vanaf nu voor &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2016/muziek-en-het-web&quot;&gt;inschrijven&lt;/a&gt;. Het onderwerp: “muziek en het web”, waarin je onder andere kunt horen over het aansturen van je gitaar via JavaScript.&lt;/p&gt;
  9478. </content>
  9479.  </entry>
  9480.  <entry>
  9481.    <title>ALV 2016: ma 28 november - bestuursleden gezocht</title>
  9482.    <link href="https://www.fronteers.nl/nl/blog/2016/10/datum-alv-2016"/>
  9483.    <updated>2016-10-31T00:00:00Z</updated>
  9484.    <id>https://www.fronteers.nl/nl/blog/2016/10/datum-alv-2016</id>
  9485.    <content xml:lang="nl" type="html">&lt;p&gt;Op maandagavond 28 november zal het 10e verenigingsjaar van Fronteers van start gaan met onze 10e algemene ledenvergadering. De ALV is &lt;em&gt;het&lt;/em&gt; moment om als lid van je te laten horen over wat je waardeert aan de vereniging, en over welke zaken &lt;em&gt;nog&lt;/em&gt; beter kunnen. Het bestuur en de commissies zullen toelichting geven op de activiteiten van het afgelopen jaar, en de plannen voor volgend jaar. Tevens zullen twee bestuursleden aftreden, en zijn we dus op zoek naar vervanging.&lt;/p&gt;
  9486. &lt;p&gt;Draag jij de vereniging een warm hart toe, en wil je meehelpen met zorgen dat we de komende jaren even succesvol blijven als we op dit moment zijn, dan is zo&#39;n bestuurspositie misschien wel het juiste middel om daar invulling aan te geven. We zoeken mensen die zowel zelf het voortouw nemen om verbeteringen door te voeren, als andere vrijwilligers weten te motiveren om dit te doen, en bij dit alles ook kritisch blijven controleren dat de dingen die we doen blijven passen bij onze missie en het geheel aan bestaande Fronteers-activiteiten.&lt;/p&gt;
  9487. &lt;p&gt;Agenda, locatie en tijdstip van de ALV volgen uiterlijk de week voor de ALV. (Waarschijnlijk wederom Utrecht, 19:00.) Als je vragen, opmerkingen en/of voorstellen voor de ALV hebt, of je je aan wilt melden als potentieel bestuurslid, [neem dan contact met ons op](/contact. (Een kort en bondige toelichting waarom je in het bestuur zou willen plaatsnemen wordt op prijs gesteld. Je zal in de gelegenheid worden gesteld in een blogpost je kandidatuur toe te lichten.)&lt;/p&gt;
  9488. </content>
  9489.  </entry>
  9490.  <entry>
  9491.    <title>Bijeenkomst over toegankelijkheid met Karl Groves</title>
  9492.    <link href="https://www.fronteers.nl/nl/blog/2016/10/bijeenkomst-over-toegankelijkheid-met-karl-groves"/>
  9493.    <updated>2016-10-04T00:00:00Z</updated>
  9494.    <id>https://www.fronteers.nl/nl/blog/2016/10/bijeenkomst-over-toegankelijkheid-met-karl-groves</id>
  9495.    <content xml:lang="nl" type="html">&lt;p&gt;We zijn blij te kunnen melden dat we op 8 november een bijeenkomst over toegankelijkheid zullen hosten, met als eerste spreker niemand minder dan ex-congresspreker &lt;a href=&quot;http://www.karlgroves.com/&quot;&gt;Karl Groves&lt;/a&gt;. Zet &#39;m dus vast in je agenda, of [meld je aan](/bijeenkomsten/2016/toegankelijkheid.&lt;/p&gt;
  9496. &lt;p&gt;Karl Groves stal eerder dit jaar de show bij Fronteers Spring Conference met zijn talk &lt;a href=&quot;https://fronteers.nl/congres/2016-spring/sessions/to-hell-with-performance-by-karl-groves&quot;&gt;To hell with performance&lt;/a&gt;, over toegankelijkheid en performance. In november zal hij het hebben over hoe je met &lt;em&gt;JavaScript&lt;/em&gt; meer toegankelijkheid kunt bereiken.&lt;/p&gt;
  9497. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/karl.jpg&quot; alt=&quot;Karl Groves&quot; /&gt;&lt;/p&gt;
  9498. &lt;p&gt;&lt;em&gt;Karl Groves eerder dit jaar bij Fronteers Spring Conference in Amsterdam&lt;/em&gt;&lt;/p&gt;
  9499. &lt;p&gt;De bijeenkomst vindt plaats in Desmet Studio&#39;s, nabij Artis in Amsterdam.&lt;/p&gt;
  9500. </content>
  9501.  </entry>
  9502.  <entry>
  9503.    <title>20% korting op de ReactNL conferentie, 13 oktober 2016 in Amsterdam</title>
  9504.    <link href="https://www.fronteers.nl/nl/blog/2016/10/20-procent-korting-reactnl"/>
  9505.    <updated>2016-10-01T00:00:00Z</updated>
  9506.    <id>https://www.fronteers.nl/nl/blog/2016/10/20-procent-korting-reactnl</id>
  9507.    <content xml:lang="nl" type="html">&lt;p&gt;Op 13 oktober 2016 organiseert Xebia ReactNL in ‘t Sieraad te Amsterdam. Leden van Fronteers ontvangen 20% korting op de conference day.&lt;/p&gt;
  9508. &lt;h2&gt;Deep-dive in React&lt;/h2&gt;
  9509. &lt;p&gt;ReactNL is de conferentie om bij te wonen als je als developer technische kennis wilt verdiepen. ReactNL biedt naast talks, ook hands-on workshops door nationale en internationale sprekers van o.a. Zalando, Facebook en Microsoft.
  9510. Het volledige programma vind je &lt;a href=&quot;http://reactnl.org/#program&quot;&gt;op de ReactNL website&lt;/a&gt;.&lt;/p&gt;
  9511. &lt;h2&gt;Enkele onderwerpen die tijdens ReactNL aan het licht komen zijn&lt;/h2&gt;
  9512. &lt;ul&gt;
  9513. &lt;li&gt;&lt;a href=&quot;https://flowtype.org/&quot;&gt;flow type checking&lt;/a&gt;&lt;/li&gt;
  9514. &lt;li&gt;&lt;a href=&quot;http://elm-lang.org/&quot;&gt;elm&lt;/a&gt;&lt;/li&gt;
  9515. &lt;li&gt;&lt;a href=&quot;https://facebook.github.io/reason/&quot;&gt;Reason&lt;/a&gt;&lt;/li&gt;
  9516. &lt;/ul&gt;
  9517. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/photo00138.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  9518. &lt;h2&gt;React Training - Full Access&lt;/h2&gt;
  9519. &lt;p&gt;Voor developers die voorafgaand aan de conferentie hun React kennis extra willen ontwikkelen is op 12 oktober een technische hands-on training.&lt;/p&gt;
  9520. &lt;p&gt;Die dag leer je onder andere:&lt;/p&gt;
  9521. &lt;ul&gt;
  9522. &lt;li&gt;React te gebruiken in een bestaande applicatie&lt;/li&gt;
  9523. &lt;li&gt;Custom React componenten te creëren&lt;/li&gt;
  9524. &lt;li&gt;Een React applicatie op de juiste manier vorm te geven&lt;/li&gt;
  9525. &lt;li&gt;React applicatie te koppelen met een back-end&lt;/li&gt;
  9526. &lt;/ul&gt;
  9527. &lt;h2&gt;Ledenkorting&lt;/h2&gt;
  9528. &lt;p&gt;De korting is geldig op een &lt;a href=&quot;https://www.eventbrite.com/e/reactnl-tickets-25828372357#tickets&quot;&gt;conferentie ticket&lt;/a&gt;.&lt;/p&gt;
  9529. &lt;h2&gt;Deelnemen?&lt;/h2&gt;
  9530. &lt;p&gt;Neem dan voor de kortingscode contact op met &lt;a href=&quot;mailto:wgreve@xebia.com&quot;&gt;Wendy Greve&lt;/a&gt;.&lt;/p&gt;
  9531. </content>
  9532.  </entry>
  9533.  <entry>
  9534.    <title>Bijeenkomst met Val Head en Seb Lee-Delisle</title>
  9535.    <link href="https://www.fronteers.nl/nl/blog/2016/09/bijeenkomst-met-val-head-en-seb-lee-delisle"/>
  9536.    <updated>2016-09-30T00:00:00Z</updated>
  9537.    <id>https://www.fronteers.nl/nl/blog/2016/09/bijeenkomst-met-val-head-en-seb-lee-delisle</id>
  9538.    <content xml:lang="nl" type="html">&lt;p&gt;Op 19 oktober aanstaande organiseert WestVisions.de hun eerste bijeenkomst, net over de grens in Duisburg.&lt;/p&gt;
  9539. &lt;p&gt;&lt;a href=&quot;http://westvisions.de/en/index.php&quot;&gt;WestVisions.de&lt;/a&gt; is een nieuw evenement voor de digitale community in het Ruhrgebied, zoals ze zelf zeggen. En met deze kick-off meetup leggen ze de lat voor zichzelf gelijk hoog, want ze hebben twee internationaal gerenommeerde sprekers uitgenodigd, Val Head en Seb Lee-Delisle.&lt;/p&gt;
  9540. &lt;p&gt;Val Head is een ontwerper en (web)animatie consultant. Ze geeft workshops bij bedrijven en conferenties over de hele wereld over &#39;motion design for the web&#39;. Het is dus ook niet verrassend dat Val&#39;s talk als titel &#39;Designing Meaningful Animation&#39; heeft.&lt;/p&gt;
  9541. &lt;p&gt;Seb Lee-Delisle&#39;s presentatie heeft als titel &#39;The ART of creative coding&#39;. Seb is een digitale kunstenaar en spreker die code en computers gebruikt om installatie&#39;s te maken waar zijn publiek mee kan interacteren en spelen. Wie Seb eerder heeft zien spreken weet dat zijn presentaties altijd verrassend, erg humoristisch en leerzaam zijn.&lt;/p&gt;
  9542. &lt;p&gt;De bijeenkomt is gratis en er zijn snacks en drinks voor- en achteraf! Wil je meer weten over WestVisions.de en deze bijeenkomst of wil je je aanmelden? Ga dan naar &lt;a href=&quot;http://westvisions.de/en/&quot;&gt;WestVisions.de&lt;/a&gt;.&lt;/p&gt;
  9543. </content>
  9544.  </entry>
  9545.  <entry>
  9546.    <title>Ledenraadpleging: wat te doen met ons geld?</title>
  9547.    <link href="https://www.fronteers.nl/nl/blog/2016/09/ledenraadpleging-wat-te-doen-met-ons-geld"/>
  9548.    <updated>2016-09-28T00:00:00Z</updated>
  9549.    <id>https://www.fronteers.nl/nl/blog/2016/09/ledenraadpleging-wat-te-doen-met-ons-geld</id>
  9550.    <content xml:lang="nl" type="html">&lt;p&gt;&amp;quot;Zouden we onze vrijwilligers moeten betalen?&amp;quot;
  9551. &amp;quot;Zijn het dan nog wel vrijwilligers?&amp;quot;&lt;/p&gt;
  9552. &lt;p&gt;&amp;quot;Wat nou als we ze niet direct betalen, maar met verenigingsgeld een donatie aan een goed doel doen dat zij mogen uitkiezen?&amp;quot;
  9553. &amp;quot;Maar gaan de niet-vrijwilligende leden wel blij zijn dat hun contributie &lt;em&gt;zo&lt;/em&gt; wordt uitgegeven?&amp;quot;&lt;/p&gt;
  9554. &lt;p&gt;&amp;quot;Misschien moeten we het congres veel goedkoper maken voor leden?&amp;quot;
  9555. &amp;quot;Wordt dan niet &lt;em&gt;iedereen&lt;/em&gt; lid, alleen voor de congreskorting?&amp;quot;&lt;/p&gt;
  9556. &lt;p&gt;Je merkt het, wij - het bestuur - weten het niet; of tenminste, we zijn (nog) niet eensgezind. Maar we hebben wel het idee dat we onze inkomsten nuttiger moeten gebruiken dan jaar na jaar onze reserves verder opvullen. We hebben minimaal 1 idee waar we met z&#39;n allen positief over zijn (meer budget beschikbaar stellen voor onze bijeenkomsten, om ze naar een hoger segment te laten doorgroeien, met hopelijk &lt;em&gt;ook&lt;/em&gt; minder tijd en regelwerk gemoeid met de organisatie ervan). Maar een aantal van de andere ideeën die we hebben zijn dusdanig radicaal dat we daar eerst toestemming aan de ALV voor zouden moeten vragen. Ter voorbereiding daarvan, en in de hoop dat discussie hier ons gaat helpen tot consensus te komen, willen we graag wat mogelijke concepten met jullie delen, en horen wat &lt;em&gt;jullie&lt;/em&gt; er van vinden.&lt;/p&gt;
  9557. &lt;p&gt;Allereerst dus dat betalen van onze vrijwilligers. &lt;em&gt;Zonder&lt;/em&gt; vrijwilligers zou de vereniging nergens zijn. We proberen ze ieder jaar te bedanken met een leuk zeiluitje, en af en toe nog eens iets extras, maar niet iedereen is in de gelegenheid mee te gaan zeilen, en er zitten vrijwilligers tussen die &lt;em&gt;zo&lt;/em&gt; veel doen dat je ze als dank iedere maand wel op een luxe cruise wil sturen. De uren die ze erin steken is elk financieel gebaar meer dan waard. Maar het voelt (in ieder geval voor sommige bestuursleden) ook erg krom. Vrijwilligen doe je omdat de vereniging je aan het hart gaat, omdat de contacten met mede-front-enders super leuk en waardevol zijn, etc - niet omdat je er voor betaald wordt.&lt;/p&gt;
  9558. &lt;p&gt;Aan de andere kant, als je er voor betaald wordt, dan ben je misschien wat sneller geneigd om ook wat meer van de minder leuke klusjes op te pakken, en dan kan je misschien wat meer erop worden aangesproken als je iets niet doet waarvan je beloofd had dat je het zou gaan doen. Maar kom op zeg, je wil toch geen halve werknemer van de vereniging worden?! (En dan hebben we het nog niets eens over &amp;quot;Wie bepaalt wie genoeg doet voor zo&#39;n beloning?&amp;quot; en hoe scheef dit alles kan overkomen op vrijwilligers uit het verleden, zoder wie we onze huidige luxe positie nooit zouden hebben bereikt.)&lt;/p&gt;
  9559. &lt;p&gt;We kunnen ook op andere manieren onze vrijwilligers bedanken. Laten we ze op cursussen sturen die ze helpen met het uitvoeren van hun taken voor de vereniging. De congrescommissie is zo &lt;a href=&quot;https://www.fronteers.nl/blog/2016/05/fronteers-ging-naar-confconf&quot;&gt;eerder dit jaar naar ConfConf gegaan&lt;/a&gt;. Dat is iig een concept waar we met z&#39;n allen achter staan. Maar meer van dat soort geschikte en nuttige gelegenheden lijken niet direct voor het oprapen te liggen. Moeten we desondanks daar al onze energie in gaan steken, en dat luider en breder bekend maken onder onze vrijwilligers?&lt;/p&gt;
  9560. &lt;p&gt;Of toch die donaties aan een goed doel?&lt;/p&gt;
  9561. &lt;p&gt;&lt;em&gt;Waarom willen we uberhaupt iets op dit gebied?&lt;/em&gt; De vereniging doet het op financieel gebied goed. &lt;em&gt;Te&lt;/em&gt; goed! De meeste van onze activiteiten zijn zelfbedruipend, de weinige echte kosten die we hebben worden ruimschoots gedragen door onze lidmaatschapsinkomsten, en daar bovenop stroomt het geld binnen via onze vacaturebank. In 2012 &lt;a href=&quot;https://www.fronteers.nl/blog/2012/11/financien-en-reserves-van-fronteers&quot;&gt;hebben we besloten&lt;/a&gt; onze inkomsten te gebruiken om een aantal reserves op te bouwen om de continuïteit van de vereniging op de langere termijn te kunnen garanderen, maar daar beginnen we zo stilletjes aan ook wel aan te komen. Bovendien lopen we gevaar belasting te moeten gaan betalen door te veel inkomsten en te weinig uitgaven, en we zouden nalatig zijn als we niet proberen dat geld te besteden aan iets dat beter bij de missie van Fronteers past, waarbij het onze vrijwilligers zijn die helpen die missie tot uitvoering te brengen.&lt;/p&gt;
  9562. &lt;p&gt;Aan de andere kant, dit is dus wel verenigingsgeld, dus we kunnen ook proberen alle leden van de vereniging zo veel mogelijk baat te laten hebben bij ons huidige overschot aan inkomsten, door de kosten van zowel congres als workshops naar beneden bij te stellen.&lt;/p&gt;
  9563. &lt;p&gt;De reden dat we in het verleden huiverig zijn geweest om dit te doen, is dat de korting die je op congres en workshops krijgt nu al groter is dan de contributie. Het is op dit moment nog niet echt de moeite waard om even snel lid te worden om deel te gaan nemen aan een activiteit, maar als de korting nog groter wordt, dan gaat dat veranderen, en onze vrijwilligers die de communicatie over deze activiteiten afhandelen hebben nu vaak al hun handen vol met after-the-fact pogingen tot dat soort acties (waarbij overal uitgespelde voorwaarden over de spelregels die we daarbij hanteren gewoon niet worden gelezen). En weet je, de tijd van die vrijwilligers, die is ons toch wel erg veel waard...&lt;/p&gt;
  9564. &lt;p&gt;Misschien dan maar de inkomsten uit de vacaturebank gebruiken om het congres en de workshops te &#39;sponsoren&#39; en ze voor iedereen - inclusief niet-leden - goedkoper te maken?&lt;/p&gt;
  9565. &lt;p&gt;&lt;em&gt;Moet het lidmaatschapsgeld dan niet gewoon omlaag?&lt;/em&gt; Tja, we zullen dat dit jaar wederom voorleggen aan de ALV, zoals we om de paar jaar doen, maar de verwachting is dat de ALV voorstander zal zijn van het handhaven van het huidige niveau, met de redenering dat een minimale drempel van dit niveau zin heeft om een lidmaatschap iets te laten zijn dat alleen wordt overwogen door mensen die serieus bezig zijn met front-end, en specifiek de meerwaarde van het bestaan van Fronteers zien.&lt;/p&gt;
  9566. </content>
  9567.  </entry>
  9568.  <entry>
  9569.    <title>Win een kaartje voor PFCongres</title>
  9570.    <link href="https://www.fronteers.nl/nl/blog/2016/09/win-een-kaartje-voor-pfcongres"/>
  9571.    <updated>2016-09-26T00:00:00Z</updated>
  9572.    <id>https://www.fronteers.nl/nl/blog/2016/09/win-een-kaartje-voor-pfcongres</id>
  9573.    <content xml:lang="nl" type="html">&lt;p&gt;&lt;a href=&quot;http://www.pfcongres.nl/&quot;&gt;PFCongres&lt;/a&gt; is na drie jaar terug! Op 15 oktober wordt een nieuwe editie van dit web development congres georganiseerd, en jij kunt er bij zijn. Fronteers mag namelijk twee kaarten verloten onder haar leden!&lt;/p&gt;
  9574. &lt;h2&gt;Over PFCongres 2016&lt;/h2&gt;
  9575. &lt;p&gt;PFCongres is een congres over web development in brede zin: zowel front-end als back-end gerelateerde onderwerpen komen aan bod. Een greep uit de talks van dit jaar:&lt;/p&gt;
  9576. &lt;ul&gt;
  9577. &lt;li&gt;Fronteers-lid &lt;em&gt;Jayne Verbeek&lt;/em&gt; zal het hebben over ECMAScript 6. Alle moderne browsers ondersteunen het, maar wat is er nieuw aan? En hoe verschilt het eigenlijk van JavaScript?&lt;/li&gt;
  9578. &lt;li&gt;&lt;em&gt;Dimitri van Hees&lt;/em&gt; gaat vertellen over de ambitieuze plannen van het Kadaster om het geo data platform van de toekomst te bouwen en zal ingaan op de API die hierbij hoort&lt;/li&gt;
  9579. &lt;li&gt;&lt;em&gt;Stefan Koopmanschap&lt;/em&gt; zal spreken over het ontwikkelen van jezelf. Hoe kun je bijblijven in een wereld die snel verandert?&lt;/li&gt;
  9580. &lt;li&gt;ICT-journalist &lt;em&gt;Brenno de Winter&lt;/em&gt; sluit de dag af. Hij zal spreken over security&lt;/li&gt;
  9581. &lt;/ul&gt;
  9582. &lt;p&gt;Dit jaar vindt het congres plaats in Utrecht, vlakbij het centraal station.&lt;/p&gt;
  9583. &lt;h2&gt;Winnen?&lt;/h2&gt;
  9584. &lt;p&gt;Was je voor vandaag lid van Fronteers en wil je hierbij zijn? Meeloten is zo simpel als hieronder een reactie geven. We kiezen op 1 oktober een winnaar.&lt;/p&gt;
  9585. &lt;p&gt;Mocht de prijs aan je voorbij gaan, je kunt ook nog &lt;a href=&quot;http://www.pfcongres.nl/kaartverkoop/&quot;&gt;kaarten kopen&lt;/a&gt;.&lt;/p&gt;
  9586. </content>
  9587.  </entry>
  9588.  <entry>
  9589.    <title>Win de laatste ticket voor Fronteers Conference 2016</title>
  9590.    <link href="https://www.fronteers.nl/nl/blog/2016/09/win-de-laatste-ticket-voor-fronteers-conference-2016"/>
  9591.    <updated>2016-09-19T00:00:00Z</updated>
  9592.    <id>https://www.fronteers.nl/nl/blog/2016/09/win-de-laatste-ticket-voor-fronteers-conference-2016</id>
  9593.    <content xml:lang="nl" type="html">&lt;p&gt;Alle reguliere toegangskaarten voor het Fronteerscongres zijn uitverkocht. Maar je kunt nog een kaartje winnen!&lt;/p&gt;
  9594. &lt;p&gt;Op donderdag 29 september organiseert Fronteers een meetup bij Schiphol Group - en verloten we de (enorme) Final Ticket to Fronteers Conference. Die ticket biedt je toegang tot beide dagen van het congres, op donderdag 6 en vrijdag 7 oktober. Buitenkansje!&lt;/p&gt;
  9595. &lt;p&gt;Winnen? &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2016/schiphol&quot;&gt;Meld je dan nu aan voor de Fronteers-meetup op Schiphol&lt;/a&gt;!&lt;/p&gt;
  9596. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/congres/2016/schiphol-meetup-final-ticket-promo.jpg&quot; alt=&quot;Promotie-illustratie voor Schiphol-meetup van Fronteers&quot; /&gt;&lt;/p&gt;
  9597. </content>
  9598.  </entry>
  9599.  <entry>
  9600.    <title>Eerste onderwerpen en data workshops bekend</title>
  9601.    <link href="https://www.fronteers.nl/nl/blog/2016/08/eerste-onderwerpen-en-data-workshops-bekend"/>
  9602.    <updated>2016-08-15T00:00:00Z</updated>
  9603.    <id>https://www.fronteers.nl/nl/blog/2016/08/eerste-onderwerpen-en-data-workshops-bekend</id>
  9604.    <content xml:lang="nl" type="html">&lt;p&gt;De afgelopen weken hebben we ons best gedaan om de kalender voor dit najaar te vullen met workshops. Dat is gelukt! Niet alleen hebben we een divers aanbod aan workshops, we gaan met de workshops ook naar een nieuwe locatie in Utrecht (en kijken naar onder andere Den Haag voor 2017).&lt;/p&gt;
  9605. &lt;h2&gt;Workshops 2016&lt;/h2&gt;
  9606. &lt;p&gt;De volgende workshops vinden dit najaar plaats:&lt;/p&gt;
  9607. &lt;table&gt;
  9608. &lt;thead&gt;
  9609. &lt;tr&gt;
  9610. &lt;th&gt;Workshop&lt;/th&gt;
  9611. &lt;th&gt;Docent&lt;/th&gt;
  9612. &lt;th&gt;Datum&lt;/th&gt;
  9613. &lt;/tr&gt;
  9614. &lt;/thead&gt;
  9615. &lt;tbody&gt;
  9616. &lt;tr&gt;
  9617. &lt;td&gt;&lt;a href=&quot;https://www.fronteers.nl/workshops/advanced-sass-roy-tomeij/&quot;&gt;Advanced Sass&lt;/a&gt;&lt;/td&gt;
  9618. &lt;td&gt;Roy Tomeij&lt;/td&gt;
  9619. &lt;td&gt;29 september&lt;/td&gt;
  9620. &lt;/tr&gt;
  9621. &lt;tr&gt;
  9622. &lt;td&gt;&lt;a href=&quot;https://www.fronteers.nl/workshops/angular-2-rachel-heimbach&quot;&gt;Angular 2&lt;/a&gt;&lt;/td&gt;
  9623. &lt;td&gt;Rachèl Heimbach&lt;/td&gt;
  9624. &lt;td&gt;20 oktober&lt;/td&gt;
  9625. &lt;/tr&gt;
  9626. &lt;tr&gt;
  9627. &lt;td&gt;&lt;a href=&quot;https://www.fronteers.nl/workshops/html-css-frances-de-waal&quot;&gt;HTML/CSS voor beginners&lt;/a&gt;&lt;/td&gt;
  9628. &lt;td&gt;Frances de Waal&lt;/td&gt;
  9629. &lt;td&gt;25 november&lt;/td&gt;
  9630. &lt;/tr&gt;
  9631. &lt;tr&gt;
  9632. &lt;td&gt;&lt;a href=&quot;https://www.fronteers.nl/workshops/toegankelijk-bouwen-voor-front-enders-jules-ernst&quot;&gt;Toegankelijk bouwen voor webontwikkelaars&lt;/a&gt;&lt;/td&gt;
  9633. &lt;td&gt;Jules Ernst&lt;/td&gt;
  9634. &lt;td&gt;9 december&lt;/td&gt;
  9635. &lt;/tr&gt;
  9636. &lt;/tbody&gt;
  9637. &lt;/table&gt;
  9638. &lt;p&gt;Bovenstaande data kun je dus vast in je agenda zetten! De kosten voor deze workshops zijn €250,- (Fronteers-leden betalen slechts €150,-).&lt;/p&gt;
  9639. &lt;p&gt;Je kunt je vanaf nu aanmelden voor alle workshops. De precieze locatie maken we binnenkort bekend, maar ga er vanuit dat die vlakbij station Utrecht Centraal is.&lt;/p&gt;
  9640. &lt;h2&gt;Nieuwe onderwerpen en leden comissie&lt;/h2&gt;
  9641. &lt;p&gt;Om dit tempo vast te houden willen we in het najaar de workshops voor 2017 communiceren via de website en social media. Heb jij nog suggesties voor een onderwerp, laat het ons vooral horen door hieronder een reactie achter te laten, een tweet te sturen naar &lt;a href=&quot;https://twitter.com/fronteers&quot;&gt;@fronteers&lt;/a&gt; of benader ons op &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2016/02/fronteers-op-slack&quot;&gt;Slack&lt;/a&gt; of &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2016/08/workshops@fronteers.nl&quot;&gt;email&lt;/a&gt;.&lt;/p&gt;
  9642. &lt;p&gt;Daarnaast zijn we nog op zoek naar enthousiaste leden die ons workshop-team willen versterken. We zijn op zoek naar front-enders die graag meedenken over de onderwerpen en ons willen ondersteunen met het organiseren van de workshops.&lt;/p&gt;
  9643. </content>
  9644.  </entry>
  9645.  <entry>
  9646.    <title>Fronteers-(eiland)helpdesk gezocht</title>
  9647.    <link href="https://www.fronteers.nl/nl/blog/2016/08/fronteers-helpdesk-wecamp-2016"/>
  9648.    <updated>2016-08-12T00:00:00Z</updated>
  9649.    <id>https://www.fronteers.nl/nl/blog/2016/08/fronteers-helpdesk-wecamp-2016</id>
  9650.    <content xml:lang="nl" type="html">&lt;p&gt;Deze zomer combineert Fronteers twee favoriete front-end-activiteiten, namelijk &amp;quot;mooie dingen maken&amp;quot; en &amp;quot;een eiland-uitstapje maken&amp;quot;, in &amp;quot;een eiland-uitstapje maken om mooie dingen te maken&amp;quot;. Fronteersleden die het leuk vinden om een dag of twee deel te nemen aan &lt;em&gt;WeCamp 2016&lt;/em&gt;, sturen we namelijk naar het uitverkochte WeCamp-eiland in het Veluwemeer.&lt;/p&gt;
  9651. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/wecamp-wider-full.jpg&quot; alt=&quot;Luchtfoto van het WeCamp-eiland in het Veluwemeer&quot; /&gt;&lt;/p&gt;
  9652. &lt;p&gt;Van &lt;em&gt;23 tot en met 27 augustus&lt;/em&gt; verblijven vijf teams van vijf personen op het eiland om webapplicaties te bedenken, te bouwen en te presenteren, onder begeleiding van coaches. Een snelkookpan voor web-productontwikkeling, maar dan op een eiland. Het evenement is uitverkocht, maar Fronteers mag enkele front-enders inparachuteren* om part-time deel te nemen.&lt;/p&gt;
  9653. &lt;p&gt;Dat is tof voor front-enders die mee willen doen, meer contacten willen leggen en (eindelijk eens) in de zon willen zitten. Het is ook leuk voor de WeCamp-deelnemers, die vooral uit de back-end/PHP-wereld komen en tijdens hun projecten alles moeten doen inclusief front-end-werk.&lt;/p&gt;
  9654. &lt;p&gt;Organisator Stefan Koopmanschap legt uit: &amp;quot;We willen meer begrip en front-end-skills triggeren bij de mensen die normaal gesproken daar niet aan gewend zijn. Andersom proberen we de aanwezige front-enders kennis te laten maken met de back-end. Naast techniek zijn &lt;em&gt;soft skills&lt;/em&gt; daarom misschien nog wel het belangrijkste waar we aandacht aan besteden. Communicatie met teamleden (die je van te voren misschien nog niet eens kent), planning en presentatie.&amp;quot;&lt;/p&gt;
  9655. &lt;p&gt;Wil jij een kijkje te nemen op WeCamp en de aanwezige developers, designers en productmanagers van jouw front-end-adviezen voorzien?&lt;/p&gt;
  9656. &lt;p&gt;Voor &lt;em&gt;donderdag 25 augustus&lt;/em&gt; zoeken ze naar 2 front-enders die een hele dag kunnen meedoen, en voor &lt;em&gt;vrijdag 26 augustus&lt;/em&gt; zoeken ze 2 mensen die een halve dag raad kunnen geven.&lt;/p&gt;
  9657. &lt;p&gt;De boot naar WeCamp vertrekt vanuit het haventje bij &lt;em&gt;Landal Waterparc Veluwemeer&lt;/em&gt; steeds rond 9:30 &#39;s ochtends; je kunt om 13:30 of 16:30 weer terug zijn, maar mee-eten is natuurlijk ook een optie.&lt;/p&gt;
  9658. &lt;p&gt;Wil je meedoen? Gebruik dan het formulier hieronder om je op te geven, dan neemt Stefan contact met je op. Vermeld de dag(en) waarop je het Veluwemeer op wilt! Alles gratis: de vereniging vergoedt je reiskosten. Er zijn vier plaatsen beschikbaar!&lt;/p&gt;
  9659. &lt;p&gt;Meer informatie over WeCamp vind je op &lt;a href=&quot;http://weca.mp/2016&quot;&gt;http://weca.mp/2016&lt;/a&gt;&lt;/p&gt;
  9660. &lt;p class=&quot;note&quot;&gt;
  9661. *: We zullen je dus niet letterlijk inparachuteren, je gaat netjes met de boot. Safety first.
  9662. &lt;/p&gt;
  9663. </content>
  9664.  </entry>
  9665.  <entry>
  9666.    <title>Webrichtlijnen en nieuwe internationale regels: wat gaat er gebeuren?</title>
  9667.    <link href="https://www.fronteers.nl/nl/blog/2016/07/webrichtlijnen-en-nieuwe-internationale-regels-wat-gaat-er-gebeuren"/>
  9668.    <updated>2016-07-22T00:00:00Z</updated>
  9669.    <id>https://www.fronteers.nl/nl/blog/2016/07/webrichtlijnen-en-nieuwe-internationale-regels-wat-gaat-er-gebeuren</id>
  9670.    <content xml:lang="nl" type="html">&lt;p&gt;Dankzij een aantal internationale ontwikkelingen is toegankelijkheid voor mensen met een beperking recentelijk hoger op de agenda komen te staan. Dat is dus goed nieuws!&lt;/p&gt;
  9671. &lt;p&gt;Zo is er een EU-richtlijn opgesteld voor de toegankelijkheid van digitale dienstverlening door overheidsorganisaties. Het doel hiervan is harmonisatie van de toegankelijkheidseisen binnen de EU en -mede daardoor- een verbetering van de algehele toegankelijkheid van digitale dienstverlening in de EU.&lt;/p&gt;
  9672. &lt;p&gt;Ook is onlangs het VN-verdrag inzake de rechten van personen met een handicap door Nederland geratificeerd.&lt;/p&gt;
  9673. &lt;p&gt;Wat betekent dit alles voor web developers in Nederland? Moeten we de &lt;a href=&quot;http://versie2.webrichtlijnen.nl/norm/20110701/&quot;&gt;Webrichtlijnen&lt;/a&gt; blijven volgen of niet? Op dit moment staat Webrichtlijnen versie 2 nog op de &#39;Pas toe of leg uit’-lijst voor overheidswebsites. Dit betekent dat overheden de Webrichtlijnen moeten toepassen, en anders moeten uitleggen waarom dat niet lukt.
  9674. De komende periode moet duidelijk worden wat de nieuwe eisen precies gaan worden.&lt;/p&gt;
  9675. &lt;p&gt;Een overzicht van de stand van zaken:&lt;/p&gt;
  9676. &lt;h2&gt;EU-richtlijn voor de toegankelijkheid van overheidswebsites&lt;/h2&gt;
  9677. &lt;p&gt;Op 3 mei 2016 is er een akkoord bereikt tussen de Raad van de Europese Unie en het Europees Parlement over een richtlijn voor de toegankelijkheid van digitale kanalen van alle overheidsorganisaties. Deze richtlijn geldt voor websites, mobiele apps, intranetten en extranetten. De richtlijn moet de komende jaren worden omgezet in nationale wetgeving in de lidstaten.&lt;/p&gt;
  9678. &lt;h2&gt;Europese standaard EN 301 549&lt;/h2&gt;
  9679. &lt;p&gt;De &lt;a href=&quot;http://mandate376.standards.eu/standard&quot;&gt;EN 301 549&lt;/a&gt; betreft een inkoopstandaard die deel uitmaakt van een Europese richtlijn voor aanbesteding van overheidsopdrachten voor ICT producten en diensten. Behalve voor websites geldt deze standaard ook voor non-web documenten, non-web software (zoals mobiele apps) en hardware.&lt;/p&gt;
  9680. &lt;p&gt;Deze Europese standaard moet worden omgezet in wetgeving voor 2018. Tot die tijd is het plan de Webrichtlijnen zoals die nu op de &#39;Pas toe of leg uit&#39; - lijst staan, te vervangen door de EN 301 549. Dit wil de Nederlandse overheid doen om alvast aan te sluiten bij Europese ontwikkelingen, zodat internationale of Europese leveranciers met gelijke eisen per land te maken hebben.&lt;/p&gt;
  9681. &lt;p&gt;Om deze vervanging te kunnen organiseren, zijn echter wat aanpassingen nodig op de huidige &#39;Pas toe of leg uit&#39; -lijst. Voor het web gedeelte van de Europese standaard gaat WCAG 2.0 AA gelden, net als nu in binnen de Webrichtlijnen. Dit vormt dus geen probleem. Maar de Webrichtlijnen bevatten ook het ‘&lt;a href=&quot;http://versie2.webrichtlijnen.nl/norm/20110701/#universal-nl&quot;&gt;Principe Universeel&lt;/a&gt;’. Dit zijn richtlijnen die gaan over hoe de website is opgebouwd. Denk aan zaken als semantische opmaak en gelaagd bouwen. Omdat dit niet in de Europese standaard zit, zal dit een aparte standaard moeten worden die alleen voor Nederland geldt, los van de Europese toegankelijkheidseisen.&lt;/p&gt;
  9682. &lt;p&gt;Deze kwestie is onlangs besproken in een consultatie van een groep Nederlandse experts. Binnen deze groep zijn de meningen vooralsnog verdeeld over wat er precies met het Principe Universeel moet gebeuren: geheel weglaten, er een aanbevolen standaard van maken, of -zoals nu- een verplichte standaard? Wel is de groep het er over eens dat het Principe Universeel gemoderniseerd moet worden, omdat deze niet meer goed aansluit bij de praktijk. Een voorbeeld hiervan is het huidige gebruik van JavaScript via bijvoorbeeld AngularJS en React t.o.v. de richtlijn dat content en gedrag gescheiden moeten worden aangeboden. Hiervoor zal dan dus doorontwikkeling en beheer voor opgezet moeten worden. Om in lijn te blijven met de EN 301 549 zal deze standaard dan ook moeten worden uitgebreid met richtlijnen voor non-web software.&lt;/p&gt;
  9683. &lt;h2&gt;Ratificatie van het VN-verdrag inzake de rechten van personen met een handicap&lt;/h2&gt;
  9684. &lt;p&gt;Op 14 juni 2016 is dit VN-verdrag in Nederland in werking getreden. Dit verdrag verplicht lidstaten maatregelen te nemen voor het garanderen van toegankelijke ICT. Dit verdrag geldt algemeen, dus niet alleen voor overheden maar ook voor bedrijven. Het nakomen van dit verdrag is mogelijk door het toepassen van EN 301 549.&lt;/p&gt;
  9685. &lt;h2&gt;Laat je mening horen&lt;/h2&gt;
  9686. &lt;p&gt;Heb je ideeën over bijvoorbeeld de doorontwikkeling van het Principe Universeel? Deel deze dan met ons, bijvoorbeeld via &lt;a href=&quot;https://fronteers-slack.herokuapp.com/&quot;&gt;Slack&lt;/a&gt;.&lt;/p&gt;
  9687. &lt;p&gt;Binnenkort volgt er vanuit de Nederlandse overheid een openbare consultatie over de invoering van de nieuwe standaard ter vervanging van de Webrichtlijnen. Iedereen kan hier een reactie op insturen. Houdt de website &lt;a href=&quot;https://www.digitoegankelijk.nl/&quot;&gt;www.digitoegankelijk.nl&lt;/a&gt; in de gaten voor meer informatie.&lt;/p&gt;
  9688. </content>
  9689.  </entry>
  9690.  <entry>
  9691.    <title>Bijeenkomst over Progressive Web Apps bij Mirabeau in Rotterdam</title>
  9692.    <link href="https://www.fronteers.nl/nl/blog/2016/07/bijeenkomst-mirabeau"/>
  9693.    <updated>2016-07-19T00:00:00Z</updated>
  9694.    <id>https://www.fronteers.nl/nl/blog/2016/07/bijeenkomst-mirabeau</id>
  9695.    <content xml:lang="nl" type="html">&lt;p&gt;Op 18 augustus organiseert Fronteers een bijeenkomst in Rotterdam over Progressive Web Apps, met Daniel Appelquist en Niels Leenheer.&lt;/p&gt;
  9696. &lt;p&gt;Service Workers, push notifications, background sync, “Add to homescreen”, fijne UX en toegankelijkheid: allemaal zaken die een web app een stuk beter kunnen maken. Onder de naam “Progressive Web Apps” wordt deze verzameling van open standaarden en best practices nu gepromoot door een aantal grote webbedrijven. Onder andere Google, Microsoft, Opera, Samsung en Mozilla zijn enthousiast over PWAs. Het doel? Zorgen dat web apps minstens zo goed worden als native apps.&lt;/p&gt;
  9697. &lt;p&gt;We hebben twee sprekers bereid gevonden over dit onderwerp te komen spreken. Daniel Appelquist werkt voor Samsung Internet (de browser op Samsung telefoons en brillen) en is voorzitter van W3C&#39;s &lt;a href=&quot;https://www.w3.org/2001/tag/&quot;&gt;TAG&lt;/a&gt;. Niels Leenheer is de maker van &lt;a href=&quot;http://html5test.com/&quot;&gt;HTML5test.com&lt;/a&gt; en runt een heel groot &lt;a href=&quot;http://html5test.com/devicelab&quot;&gt;open device lab&lt;/a&gt;.&lt;/p&gt;
  9698. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/dan-niels.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  9699. &lt;p&gt;&lt;em&gt;Dan Appelquist (links) en Niels Leenheer (rechts)&lt;/em&gt;&lt;/p&gt;
  9700. &lt;p&gt;De bijeenkomst is in het Engels en zal plaatsvinden bij Mirabeau in Rotterdam, vlak naast Rotterdam Centraal in het Groothandelsgebouw.&lt;/p&gt;
  9701. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2016/mirabeau&quot;&gt;Meld je nu aan&lt;/a&gt;, want er is slechts plek voor 60 enthousiaste dames en heren!&lt;/p&gt;
  9702. </content>
  9703.  </entry>
  9704.  <entry>
  9705.    <title>Nieuwe leden workshopcommissie en onderwerpen workshops gezocht</title>
  9706.    <link href="https://www.fronteers.nl/nl/blog/2016/07/nieuwe-leden-workshopcommissie-onderwerpen-gezocht"/>
  9707.    <updated>2016-07-08T00:00:00Z</updated>
  9708.    <id>https://www.fronteers.nl/nl/blog/2016/07/nieuwe-leden-workshopcommissie-onderwerpen-gezocht</id>
  9709.    <content xml:lang="nl" type="html">&lt;p&gt;Deze week heeft Fronteers afscheid genomen van haar workshopcommissie. We bedanken Joël, Mirella, Arjan en Michael van harte voor hun werk de afgelopen jaren. Dankzij jullie hebben een hoop front-enders een te gekke workshop kunnen bijwonen!&lt;/p&gt;
  9710. &lt;p&gt;Er is ook een nieuwe workshopcommissie opgestaan, met daarin voorlopig Sharon Martens en Hidde de Vries. Het nieuwe team is van plan dit najaar te komen met vier workshops, en wil in 2017 regulier (maandelijks of tweemaandelijkse) namens Fronteers workshops gaan organiseren. De planning voor alle vier de workshops kondigen we begin augustus aan via de website en social media van Fronteers.&lt;/p&gt;
  9711. &lt;h2&gt;Suggesties welkom&lt;/h2&gt;
  9712. &lt;p&gt;Wil je meer leren over tooling, preprocessors, Angular, toegankelijkheid, webtypografie of ES6? We hebben een voorlopige lijst met onderwerpen in gedachten, maar horen graag over welk onderwerp jullie een workshop willen volgen. Laat dit dus vooral horen door hieronder een reactie achter te laten, een tweet te sturen naar &lt;a href=&quot;https://twitter.com/fronteers&quot;&gt;@fronteers&lt;/a&gt; of benader ons &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2016/02/fronteers-op-slack&quot;&gt;op Slack&lt;/a&gt; of &lt;a href=&quot;mailto:workshops@fronteers.nl&quot;&gt;email&lt;/a&gt;.&lt;/p&gt;
  9713. </content>
  9714.  </entry>
  9715.  <entry>
  9716.    <title>Verplichting &amp;quot;Principe Universeel&amp;quot; kan komen te vervallen bij vervanging Webrichtlijnen</title>
  9717.    <link href="https://www.fronteers.nl/nl/blog/2016/06/vervallen-verplichting-principe-universeel"/>
  9718.    <updated>2016-06-29T00:00:00Z</updated>
  9719.    <id>https://www.fronteers.nl/nl/blog/2016/06/vervallen-verplichting-principe-universeel</id>
  9720.    <content xml:lang="nl" type="html">&lt;p&gt;Enige tijd geleden is een Europese standaard voor de toegankelijkheid van ICT-producten en -diensten ontwikkeld. Deze standaard is op veel punten breder dan de webrichtlijnen, maar bevat net als de webrichtlijnen heel WCAG 2. Het Forum Standaardisatie is &lt;a href=&quot;https://www.digitoegankelijk.nl/actueel/nieuws/2016/06/09/aanpassingsverzoek-webrichtlijnen-naar-forum-standaardisatie&quot;&gt;een procedure gestart&lt;/a&gt; om de verplichting (op overheidswebsites) voor het gebruik van de Webrichtlijnen te vervangen met de verplichting voor het gebruik van de nieuwe Europese standaard.&lt;/p&gt;
  9721. &lt;p&gt;Een punt waar de webrichtlijnen verder gaan dan de nieuwe Europese standaard, is op het gebied van waarborgen van &amp;quot;bouwkwaliteit&amp;quot;, samengevat in het &lt;a href=&quot;https://www.accessibility.nl/kennisbank/webrichtlijnen2/principe-universeel/&quot;&gt;&amp;quot;Principe Universeel&amp;quot;&lt;/a&gt;. In dit principe worden fundamentale best practices op het gebied van website-bouw verenigd:&lt;/p&gt;
  9722. &lt;ul&gt;
  9723. &lt;li&gt;Semantisch: Pas technologieën voor webcontent op betekenisvolle wijze toe&lt;/li&gt;
  9724. &lt;li&gt;Gescheiden: Scheid content van presentatie en van gedrag&lt;/li&gt;
  9725. &lt;li&gt;Bouw gelaagd: Borg de beschikbaarheid van basiscontent en -functionaliteit&lt;/li&gt;
  9726. &lt;li&gt;Foutmeldingen: Zorg voor bruikbare foutmeldingen&lt;/li&gt;
  9727. &lt;li&gt;Formulieren: Maak formulieren optimaal bruikbaar&lt;/li&gt;
  9728. &lt;li&gt;Meertaligheid: Maak anderstalige content eenvoudig bereikbaar&lt;/li&gt;
  9729. &lt;li&gt;Geneste weergavekaders: Sluit niemand uit bij het aanbieden van content middels geneste weergavekaders&lt;/li&gt;
  9730. &lt;li&gt;Identificatie van tekens en symbolen: Specificeer karaktercodering&lt;/li&gt;
  9731. &lt;li&gt;Openheid: Veroorzaak geen belemmeringen bij de creatie, publicatie en uitwisseling van content&lt;/li&gt;
  9732. &lt;li&gt;URI&#39;s: URI&#39;s dienen duidelijk, uniek en duurzaam te zijn&lt;/li&gt;
  9733. &lt;/ul&gt;
  9734. &lt;p&gt;Het Forum Standaardisatie heeft een &lt;a href=&quot;https://www.logius.nl/fileadmin/os/Vergaderstukken/FS_160608.3C_Intakeadvies_wijziging_Webrichtlijnen.pdf&quot;&gt;intakeadvies (PDF)&lt;/a&gt; geschreven, waarin wordt uitgelegd dat dit Principe Universeel niet als &amp;quot;extra laag&amp;quot; bovenop de Europese standaard kan worden gelegd, dus naar een zelfstandige standaard afgesplitst moet worden. Vervolgens wordt aangeraden om deze nieuwe standaard niet de huidige status &amp;quot;verplicht&amp;quot; (&amp;quot;pas toe of leg uit&amp;quot;) te geven, maar om dit te verlichten naar &amp;quot;aanbevolen&amp;quot;, omdat deze criteria &amp;quot;onnodig verzwarend werken&amp;quot;.&lt;/p&gt;
  9735. &lt;p&gt;Twee relevante quotes vanuit het intakeadvies:&lt;/p&gt;
  9736. &lt;blockquote&gt;
  9737. &lt;p&gt;Het verminderen van de verplicht toe te passen richtlijnen en criteria, komt tegemoet aan de in de praktijk veel geuite klacht dat er ‘zoveel criteria’ moeten worden toegepast. Naar alle waarschijnlijkheid kan dit ook op instemming rekenen van belangenorganisaties. Deze hebben eerder aangegeven dat de extra eisen voor bouwkwaliteit onnodig verzwarend werken op de implementatie van de toegankelijkheidseisen en gepleit om de verplichting te beperken.&lt;/p&gt;
  9738. &lt;/blockquote&gt;
  9739. &lt;blockquote&gt;
  9740. &lt;p&gt;De praktijk laat zien dat de bouwkosten van een website die aan de Webrichtlijnen versie 2 voldoet niet of niet substantieel hoger zijn. De verwachting is dat hetzelfde geldt voor EN 301 549. De inspanning om hieraan te voldoen is daarmee niet veel groter. Dit is mede afhankelijk van de deskundigheid van de ingehuurde ontwikkelaars en hoe de kwaliteitszorg is ingericht. De exploitatie-kosten van een website die aan de Webrichtlijnen voldoet zijn lager dankzij minder complexiteit, eenvoudiger onderhoud en de mogelijkheid om content te hergebruiken.&lt;/p&gt;
  9741. &lt;/blockquote&gt;
  9742. &lt;p&gt;Fronteers is uitgenodigd om op 7 juli aanwezig te zijn bij een expertbijeenkomst over dit onderwerp, waarbij Janita Top ons zal vertegenwoordigen. In een eerste inventarisatie zijn wij van mening dat het een slechte zaak zou zijn om het Principe Universeel zo te laten degraderen. Wij als professionele front-end ontwikkelaars zien deze criteria helemaal niet als verzwarend, maar juist als een beschrijving van minimale kwaliteit. Fronteers-leden die bij overheidsorganisaties betrokken zijn merken dat het &lt;em&gt;juist&lt;/em&gt; de regels uit Principe Universeel zijn waarop evident broddelwerk van externe leveranciers kan worden afgekeurd. Ook het punt over de exploitatie-kosten uit het intakeadvies komt naar ons inziens voornamelijk voort uit de punten van het Principe Universeel, niet uit de WCAG 2 regels.&lt;/p&gt;
  9743. &lt;p&gt;We horen graag van onze leden of jullie het eens zijn met dit standpunt, alsmede mogelijke argumenten om aan Janita mee te geven naar de expertbijeenkomst om het belang van het verplicht houden van deze richtlijn mee te kunnen beargumenteren.&lt;/p&gt;
  9744. </content>
  9745.  </entry>
  9746.  <entry>
  9747.    <title>Fronteers ging naar ConfConf</title>
  9748.    <link href="https://www.fronteers.nl/nl/blog/2016/05/fronteers-ging-naar-confconf"/>
  9749.    <updated>2016-05-26T00:00:00Z</updated>
  9750.    <id>https://www.fronteers.nl/nl/blog/2016/05/fronteers-ging-naar-confconf</id>
  9751.    <content xml:lang="nl" type="html">&lt;p&gt;Als je kennis wilt opdoen en beter wilt worden in je vak, kun je als front-ender naar front-end-congressen gaan. Maar waar ga je heen als je front-end-congressen organiseert en dáár beter in wilt worden? Naar een congressencongres natuurlijk.&lt;/p&gt;
  9752. &lt;p&gt;Cat Hunter en Ben MacGowan organiseerden in Bristol op 20 mei voor de tweede keer zo&#39;n congressencongres, met de toepasselijke naam &lt;a href=&quot;http://conf-conf.com/&quot;&gt;ConfConf&lt;/a&gt;.&lt;/p&gt;
  9753. &lt;h2&gt;Doel&lt;/h2&gt;
  9754. &lt;p&gt;Vrijwilligers van Fronteers organiseren dit jaar in oktober intussen voor de negende keer het Fronteerscongres. Daarnaast organiseerden we op 1 april voor het eerst &lt;a href=&quot;https://www.fronteers.nl/congres/2016-spring&quot;&gt;Fronteers Spring Conference&lt;/a&gt;.&lt;/p&gt;
  9755. &lt;p&gt;Ondanks dat we dit al een behoorlijke poos doen, zijn we natuurlijk nooit te oud om te leren en verbeteren. Op 20 mei gingen we daarom met een kleine delegatie naar Bristol om ons steentje bij te dragen en veel te leren.&lt;/p&gt;
  9756. &lt;blockquote&gt;
  9757. &lt;p&gt;&amp;quot;ConfConf aims to challenge industry perspectives and recurring criticisms that plague tech events, providing a platform for open debate and discussion on matters such as diversity, inclusivity, enabling new talent and the current event landscape.&amp;quot;&lt;/p&gt;
  9758. &lt;/blockquote&gt;
  9759. &lt;p&gt;Precies goed, dachten wij, voor de congressen en voor Fronteers. Met het bestuur spraken we af dat Fronteers de kosten voor de reis en tickets op zich zou nemen.&lt;/p&gt;
  9760. &lt;h2&gt;Het congres&lt;/h2&gt;
  9761. &lt;p&gt;De congresdag bestond uit vier talks en twee paneldiscussies. De sprekers dit jaar waren Marc Thiele (Beyond Tellerand), John Davey (Reasons To), Rachel Andrew (oud-Fronteers Conference-spreker) en Cat Hunter (Smashing Conference).&lt;/p&gt;
  9762. &lt;p&gt;We hoorden interessante parallellen met wat wij proberen te doen bij Fronteers Conference: duidelijk communiceren met sprekers, altijd vriendelijk zijn tegen bezoekers en leveranciers, video&#39;s na afloop gratis beschikbaar maken en de registratie in de congresmorgen zo eenvoudig en snel mogelijk laten verlopen.&lt;/p&gt;
  9763. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/thijsthomas.jpg&quot; alt=&quot;Twee mannen met ConfConf badges&quot; /&gt;&lt;/p&gt;
  9764. &lt;p&gt;Er kwamen ook dingen die wij juist niet deden: sommige organisatoren vertelden bijvoorbeeld over hun uitgebreide marketingstrategieën. En er werd veel gesproken over het benaderen van sponsoren. Omdat wij de afgelopen jaren vrij vlot zijn uitverkocht, zijn wij in een ware luxepositie beland. Onze focus kan daardoor veel meer op de inhoud liggen.&lt;/p&gt;
  9765. &lt;p&gt;De talk van Rachel Andrew was een hele interessante aanvulling op de feedback die we soms in de sprekersauto en op de wandelgangen van sprekers krijgen. Met tientallen congressen per jaar is Rachel met recht een ervaringsdeskundige te noemen.&lt;/p&gt;
  9766. &lt;p&gt;In de panels, de pauzes tussen de talks en de receptie na afloop was er voldoende ruimte om kennis te maken met de andere congresorganisatoren. We wisselden een hoop ervaringen uit.&lt;/p&gt;
  9767. &lt;h2&gt;Conclusie&lt;/h2&gt;
  9768. &lt;p&gt;We hebben veel geleerd van de anderen, en er werd driftig meegeschreven. Ook konden we zelf wat van onze kennis delen. Het was dus al met al een interessante dag voor de Fronteers-delegatie. Die zal het geleerde vast snel in de praktijk brengen voor &lt;a href=&quot;https://www.fronteers.nl/congres/2016&quot;&gt;Fronteers Conference 2016&lt;/a&gt;, waarvoor de verkoop voor de eerste batch kaartjes morgen (!) start.&lt;/p&gt;
  9769. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/joelhidde.jpg&quot; alt=&quot;Een deel van de Fronteers-delegatie, lopend op straat&quot; /&gt;&lt;/p&gt;
  9770. &lt;p&gt;&lt;em&gt;Discussie over BEM, onderweg naar de congreslocatie.
  9771. V.l.n.r.: Anneke, Joël, Thomas, Hidde&lt;/em&gt;&lt;/p&gt;
  9772. </content>
  9773.  </entry>
  9774.  <entry>
  9775.    <title>Fronteers 2016 launchborrel + livegang kaartverkoop op 27 mei</title>
  9776.    <link href="https://www.fronteers.nl/nl/blog/2016/05/fronteers-2016-launchborrel-livegang-kaartverkoop-27-mei"/>
  9777.    <updated>2016-05-09T00:00:00Z</updated>
  9778.    <id>https://www.fronteers.nl/nl/blog/2016/05/fronteers-2016-launchborrel-livegang-kaartverkoop-27-mei</id>
  9779.    <content xml:lang="nl" type="html">&lt;p&gt;De kaartverkoop voor het Fronteerscongres 2016 start vrijdag 27 mei om 20:00 uur. Om dit te vieren, organiseert Fronteers die avond vanaf 19:00 uur een speciale launchborrel bij Café De Jaren in Amsterdam - en jij bent van harte uitgenodigd.&lt;/p&gt;
  9780. &lt;h2&gt;TL;DR&lt;/h2&gt;
  9781. &lt;ul&gt;
  9782. &lt;li&gt;Fronteers Conference 2016 Launchborrel&lt;/li&gt;
  9783. &lt;li&gt;Vrijdag 27 mei, Café De Jaren, Amsterdam&lt;/li&gt;
  9784. &lt;li&gt;Borrel 19:00u, livegang ticket sales 20:00u&lt;/li&gt;
  9785. &lt;li&gt;RSVP via &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2016/fronteers-2016-launchborrel&quot;&gt;het formulier&lt;/a&gt;&lt;/li&gt;
  9786. &lt;/ul&gt;
  9787. &lt;h2&gt;Livegang&lt;/h2&gt;
  9788. &lt;p&gt;Net als vorig jaar zal de congrescommissie aanwezig zijn om eventuele vragen te beantwoorden. Maar het gaat natuurlijk om de kaarten voor het congres (en de gezelligheid). Vanaf 20:00 uur gaat de ticketshop weer met enige bombarie open en kunnen tickets voor het congres op 6 en 7 oktober aangeschaft worden. Komt dat zien!&lt;/p&gt;
  9789. &lt;h2&gt;Locatie&lt;/h2&gt;
  9790. &lt;p&gt;Café De Jaren in Amsterdam heet ons hiervoor wederom welkom; een bekende locatie voor congresgangers. De Jaren is prima bereikbaar met het openbaar vervoer. Het NS- en busstation van Amsterdam liggen op circa 15 minuten loopafstand.&lt;/p&gt;
  9791. &lt;p&gt;Café De Jaren
  9792. Nieuwe Doelenstraat 20-22
  9793. 1012 CP Amsterdam&lt;/p&gt;
  9794. &lt;h2&gt;RSVP&lt;/h2&gt;
  9795. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2016/fronteers-2016-launchborrel&quot;&gt;Meld je aan via het formulier&lt;/a&gt; (let op: plaatsen zijn beperkt!) en kom met ons het glas heffen op Fronteers Conference 2016!&lt;/p&gt;
  9796. </content>
  9797.  </entry>
  9798.  <entry>
  9799.    <title>Bijeenkomst over datavisualisatie bij CLEVER°FRANKE in Utrecht</title>
  9800.    <link href="https://www.fronteers.nl/nl/blog/2016/05/bijeenkomst-clever-franke"/>
  9801.    <updated>2016-05-06T00:00:00Z</updated>
  9802.    <id>https://www.fronteers.nl/nl/blog/2016/05/bijeenkomst-clever-franke</id>
  9803.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 2 juni is Fronteers te gast bij ‘data-driven design agency’ CLEVER°FRANKE voor een avond over het oplossen van complexe problemen met front-end development en datavisualisatie. Zij zorgen voor bier, eten en snacks, en hebben ruimte voor zo&#39;n 40 geïnteresseerden.&lt;/p&gt;
  9804. &lt;p&gt;Kom langs als je meer wilt weten over datavisualisatie en hoe je dit als front-end ontwikkelaar kunt aanpakken. Dit is het programma van de avond:&lt;/p&gt;
  9805. &lt;ul&gt;
  9806. &lt;li&gt;18:00 Ontvangst met drankjes en hapjes&lt;/li&gt;
  9807. &lt;li&gt;18:30 Gert Franke - Lessons learned in building a datavisualization agency&lt;/li&gt;
  9808. &lt;li&gt;19:15 Pauze&lt;/li&gt;
  9809. &lt;li&gt;19:30 Jan Hoogeveen - Overcoming complexity and what that means for development&lt;/li&gt;
  9810. &lt;li&gt;20:15 borrel&lt;/li&gt;
  9811. &lt;/ul&gt;
  9812. &lt;p&gt;(&lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2016/clever-franke&quot;&gt;Meer over de talks&lt;/a&gt;)&lt;/p&gt;
  9813. &lt;h2&gt;Voor wie?&lt;/h2&gt;
  9814. &lt;p&gt;Deze bijeenkomst is toegankelijk voor leden en niet-leden. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2016/clever-franke&quot;&gt;Meld je wel even aan&lt;/a&gt;, want er is slechts plek voor 40 front-endende dames en heren.&lt;/p&gt;
  9815. </content>
  9816.  </entry>
  9817.  <entry>
  9818.    <title>Bijeenkomst op 14 april bij Kabisa</title>
  9819.    <link href="https://www.fronteers.nl/nl/blog/2016/03/bijeenkomst-kabisa"/>
  9820.    <updated>2016-03-30T00:00:00Z</updated>
  9821.    <id>https://www.fronteers.nl/nl/blog/2016/03/bijeenkomst-kabisa</id>
  9822.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 14 april 2016 is Fronteers te gast bij Kabisa in Weert. Er staan twee sprekers op het programma.&lt;/p&gt;
  9823. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  9824. &lt;ul&gt;
  9825. &lt;li&gt;18:00 inloop met dinerbuffet en een drankje&lt;/li&gt;
  9826. &lt;li&gt;19:00 Matthijs Groen - &amp;quot;JavaScript games bouwen tijdens je lunchpauze&amp;quot;&lt;/li&gt;
  9827. &lt;li&gt;19:45 korte pauze&lt;/li&gt;
  9828. &lt;li&gt;20:00 Roy Tomeij - &amp;quot;De toekomst van preprocessors&amp;quot;&lt;/li&gt;
  9829. &lt;li&gt;20:45 borrel&lt;/li&gt;
  9830. &lt;/ul&gt;
  9831. &lt;p&gt;Dit evenement vindt plaats bij Kabisa, Marconilaan 8, 6003 DD Weert. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2016/kabisa&quot;&gt;Aanmelden kan via de pagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  9832. &lt;h2&gt;Wie?&lt;/h2&gt;
  9833. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 40 mannen en vrouwen. Meld je daarom aan via het &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2016/kabisa&quot;&gt;formulier&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  9834. </content>
  9835.  </entry>
  9836.  <entry>
  9837.    <title>Bijeenkomst op 24 maart 2016 bij iDA Mediafoundry</title>
  9838.    <link href="https://www.fronteers.nl/nl/blog/2016/03/bijeenkomst-ida-mediafoundry"/>
  9839.    <updated>2016-03-11T00:00:00Z</updated>
  9840.    <id>https://www.fronteers.nl/nl/blog/2016/03/bijeenkomst-ida-mediafoundry</id>
  9841.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 24 maart is Fronteers te gast bij &lt;a href=&quot;http://www.ida-mediafoundry.be/&quot;&gt;iDA Mediafoundry&lt;/a&gt; in Mechelen. Er worden twee presentaties voorzien.&lt;/p&gt;
  9842. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  9843. &lt;ul&gt;
  9844. &lt;li&gt;18:00 Ontvangst met een hapje en een drankje&lt;/li&gt;
  9845. &lt;li&gt;19:00 Mario Van den Eynde (&lt;a href=&quot;https://twitter.com/mariovde&quot;&gt;@mariovde&lt;/a&gt;) - &amp;quot;From null to full in under 30 minutes&amp;quot;, building a React app.&lt;/li&gt;
  9846. &lt;li&gt;19:45 Korte pauze&lt;/li&gt;
  9847. &lt;li&gt;20:00 Johan Ronsse (&lt;a href=&quot;https://github.com/wolfr&quot;&gt;@wolfr&lt;/a&gt;) - &amp;quot;Welcome to &lt;a href=&quot;http://bedrock.mono.company/&quot;&gt;Bedrock&lt;/a&gt;&amp;quot;&lt;/li&gt;
  9848. &lt;li&gt;20:45 Naborrelen&lt;/li&gt;
  9849. &lt;/ul&gt;
  9850. &lt;p&gt;Dit evenement vindt plaats bij iDA Mediafoundry te Mechelen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2016/ida-mediafoundry&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  9851. &lt;h2&gt;Wie?&lt;/h2&gt;
  9852. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 80 vrouwen en mannen.  Vol is vol!&lt;/p&gt;
  9853. </content>
  9854.  </entry>
  9855.  <entry>
  9856.    <title>Met korting naar het Nationaal Congres Digitale Toegankelijkheid</title>
  9857.    <link href="https://www.fronteers.nl/nl/blog/2016/03/met-korting-naar-het-nationaal-congres-digitale-toegankelijkheid"/>
  9858.    <updated>2016-03-07T00:00:00Z</updated>
  9859.    <id>https://www.fronteers.nl/nl/blog/2016/03/met-korting-naar-het-nationaal-congres-digitale-toegankelijkheid</id>
  9860.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 31 mei 2016 vindt het Nationaal Congres Digitale Toegankelijkheid plaats. Leden van Fronteers krijgen 30% korting op de toegangsprijs, eventueel in combinatie met de early-bird korting, die geldt tot 16 maart.&lt;/p&gt;
  9861. &lt;p&gt;Op het programma staan onder andere: gevolgen van de ratificatie van het VN-verdrag, het accessibility-squad van de ING, pair writing, webstatistieken, webcare, en soft skills voor webwerkers.&lt;/p&gt;
  9862. &lt;p&gt;’s Ochtends zijn er plenaire sessies. Middags zijn er parallelsessies in kleine groepen. Daarin spijker je je kennis bij en ga je ook zelf aan de slag. Tussendoor is er volop ruimte om collega’s te spreken.&lt;/p&gt;
  9863. &lt;p&gt;De congreslocatie is Antropia, Driebergen.&lt;/p&gt;
  9864. &lt;p&gt;Meer informatie: &lt;a href=&quot;http://www.ncdt.nl/&quot;&gt;www.ncdt.nl&lt;/a&gt;&lt;/p&gt;
  9865. &lt;p&gt;Mocht je gebruik willen maken van deze korting, neem dan even contact op met het &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;bestuur&lt;/a&gt;. Zoals gebruikelijk geldt deze actie alleen voor leden die op dit moment al lid zijn.&lt;/p&gt;
  9866. </content>
  9867.  </entry>
  9868.  <entry>
  9869.    <title>Met korting naar From the Front in Bologna</title>
  9870.    <link href="https://www.fronteers.nl/nl/blog/2016/03/from-the-front-korting"/>
  9871.    <updated>2016-03-02T00:00:00Z</updated>
  9872.    <id>https://www.fronteers.nl/nl/blog/2016/03/from-the-front-korting</id>
  9873.    <content xml:lang="nl" type="html">&lt;p&gt;Op 15 en 16 september 2016 organiseert From the Front, een Fronteers-achtige organisatie in het noorden van Italië, wederom hun &lt;a href=&quot;http://2016.fromthefront.it/&quot;&gt;From the Front conference&lt;/a&gt;. Fronteers-leden krijgen korting: 20% op de early-birdprijs, en zelfs 25% op de reguliere prijs.&lt;/p&gt;
  9874. &lt;h2&gt;Programma&lt;/h2&gt;
  9875. &lt;p&gt;Over het programma is op het moment van schrijven nog weinig bekend, maar ter inspiratie is het misschien interessant om te kijken naar wat ze in &lt;a href=&quot;http://2012.fromthefront.it/&quot;&gt;2012&lt;/a&gt;, &lt;a href=&quot;http://2013.fromthefront.it/&quot;&gt;2013&lt;/a&gt;, &lt;a href=&quot;http://2014.fromthefront.it/&quot;&gt;2014&lt;/a&gt; en &lt;a href=&quot;http://2015.fromthefront.it/&quot;&gt;2015&lt;/a&gt; te bieden hadden.&lt;/p&gt;
  9876. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/duso.jpg&quot; alt=&quot;Theaterzaal&quot; /&gt;&lt;/p&gt;
  9877. &lt;p&gt;&lt;em&gt;Teatro Duse in Bologna. Foto: From the Front&lt;/em&gt;&lt;/p&gt;
  9878. &lt;h2&gt;Praktisch&lt;/h2&gt;
  9879. &lt;p&gt;From the Front is een tweedaags congres en zal plaatsvinden op 15 en 16 september 2016 in het Teatro Duse in Bologna, Italië.&lt;/p&gt;
  9880. &lt;p&gt;Fronteers-leden krijgen een korting van 20% (early bird) of 25% (reguliere prijs).&lt;/p&gt;
  9881. &lt;p&gt;Mocht je gebruik willen maken van deze korting, neem dan even contact op met de &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact&quot;&gt;ledenadministratie&lt;/a&gt;. Zoals gebruikelijk geldt deze actie alleen voor leden die op dit moment al lid zijn.&lt;/p&gt;
  9882. </content>
  9883.  </entry>
  9884.  <entry>
  9885.    <title>Fronteers op Slack</title>
  9886.    <link href="https://www.fronteers.nl/nl/blog/2016/02/fronteers-op-slack"/>
  9887.    <updated>2016-02-29T00:00:00Z</updated>
  9888.    <id>https://www.fronteers.nl/nl/blog/2016/02/fronteers-op-slack</id>
  9889.    <content xml:lang="nl" type="html">&lt;p&gt;In 2008 is Fronteers begonnen met &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2008/03/fronteers-op-irc&quot;&gt;een chatkanaal op IRC&lt;/a&gt; waar nog steeds dagelijks actief over front-end development gediscussieerd wordt. De laatste twee jaar heeft &lt;a href=&quot;https://slack.com/is&quot;&gt;Slack&lt;/a&gt; als chatkanaal ook de nodige populariteit gewonnen. Niet zo vreemd, want het is erg gebruiksvriendelijk en makkelijk uit te breiden met andere webdiensten — misschien wel het belangrijkste is de animated GIF-integratie met Giphy.&lt;/p&gt;
  9890. &lt;p&gt;We vonden het daarom tijd voor een Slack kanaal voor Nederlandse front-end developers.&lt;/p&gt;
  9891. &lt;p&gt;/giphy crazy&lt;/p&gt;
  9892. &lt;p&gt;De eerste week zijn er al veel leuke gesprekken gevoerd over leuke onderwerpen, van ECMAScript 2015 tot &lt;a href=&quot;https://open.spotify.com/album/6lAcQFcvUlYnNhuinzCXsb&quot;&gt;het nieuwe album van Scooter&lt;/a&gt;. Er zijn een aantal kanalen zoals JavaScript, CSS, webfonts en de Fronteers Spring Conference. Ook worden de laatste tweets van &lt;a href=&quot;https://twitter.com/fronteers&quot;&gt;@Fronteers&lt;/a&gt; en &lt;a href=&quot;https://twitter.com/fronteersconf&quot;&gt;@FronteersConf&lt;/a&gt; gepost, net zoals de laatste berichten van het blog en alle bijeenkomsten.&lt;/p&gt;
  9893. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/blog/2008/03/fronteers-op-irc&quot;&gt;Het IRC-kanaal&lt;/a&gt; blijft natuurlijk gewoon open.&lt;/p&gt;
  9894. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2016/fronteersopslack.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  9895. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  9896. &lt;p&gt;Kan je ook niet wachten om mee te front-end Slacken? Meld je dan aan op &lt;a href=&quot;https://join.slack.com/t/fronteersnl/shared_invite/zt-1m0mbjbkh-LyrZgCPr1JzWBeASuTcnog&quot;&gt;voor onze Slack&lt;/a&gt;.&lt;/p&gt;
  9897. &lt;p&gt;Leden en niet-leden zijn welkom!&lt;/p&gt;
  9898. </content>
  9899.  </entry>
  9900.  <entry>
  9901.    <title>Bijeenkomst op 24 maart bij eVision</title>
  9902.    <link href="https://www.fronteers.nl/nl/blog/2016/02/bijeenkomst-evision"/>
  9903.    <updated>2016-02-19T00:00:00Z</updated>
  9904.    <id>https://www.fronteers.nl/nl/blog/2016/02/bijeenkomst-evision</id>
  9905.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 24 maart 2016 is Fronteers te gast bij eVision in Den Haag. Er staan twee sprekers op het programma en het thema is React.&lt;/p&gt;
  9906. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  9907. &lt;ul&gt;
  9908. &lt;li&gt;18:00 - inloop met pizza&lt;/li&gt;
  9909. &lt;li&gt;19:00 - Kamil Afşar - &amp;quot;Wat is REACT en waarom is het zo cool&amp;quot;&lt;/li&gt;
  9910. &lt;li&gt;19:45 - korte pauze&lt;/li&gt;
  9911. &lt;li&gt;20:00 - Maurice de Beijer - React applicaties en Event Sourcing&lt;/li&gt;
  9912. &lt;li&gt;We sluiten af met een borrel.&lt;/li&gt;
  9913. &lt;/ul&gt;
  9914. &lt;p&gt;Dit evenement vindt plaats bij eVision, Lange Vijverberg 3 in Den Haag. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2016/evision&quot;&gt;Aanmelden kan via de pagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  9915. &lt;h2&gt;Wie?&lt;/h2&gt;
  9916. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 40 mannen en vrouwen. Meld je daarom aan via het &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2016/evision&quot;&gt;formulier&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  9917. </content>
  9918.  </entry>
  9919.  <entry>
  9920.    <title>Nieuw congres: Fronteers Spring Conference op 1 april</title>
  9921.    <link href="https://www.fronteers.nl/nl/blog/2016/02/nieuw-congres-fronteers-spring-conference-op-1-april"/>
  9922.    <updated>2016-02-12T00:00:00Z</updated>
  9923.    <id>https://www.fronteers.nl/nl/blog/2016/02/nieuw-congres-fronteers-spring-conference-op-1-april</id>
  9924.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 1 april organiseert Fronteers een nieuw themacongres in EYE in Amsterdam. We gaan ons een dag lang met 10 interessante sprekers verdiepen in Web Performance onder leiding van Phil Hawksworth. Leden van Fronteers kunnen voordelig deelnemen - én krijgen voorrang.&lt;/p&gt;
  9925. &lt;p&gt;Dit congres heet &lt;a href=&quot;https://fronteers.nl/congres/2016-spring&quot;&gt;Fronteers Spring Conference&lt;/a&gt;; het is speciaal opgezet als een &#39;leden-first&#39; aanvulling op ons congresaanbod in oktober. Iedereen is welkom, maar leden van Fronteers krijgen fikse korting én voorrang.&lt;/p&gt;
  9926. &lt;p&gt;Vandaag start meteen de kaartverkoop op &lt;a href=&quot;https://tickets.fronteers.nl/&quot;&gt;https://tickets.fronteers.nl&lt;/a&gt; en alleen Fronteersleden (die op 3 februari al lid waren) kunnen de eerste kaarten kopen, voor &lt;em&gt;€99 plus BTW&lt;/em&gt;. Pas over twee weken kan iedereen een ticket bemachtigen; kaartjes voor niet-leden kosten €199 plus BTW.&lt;/p&gt;
  9927. &lt;h2&gt;Opzet van de dag&lt;/h2&gt;
  9928. &lt;p&gt;Met een centraal onderwerp, kortere presentaties en meer (panel-)discussie is de opzet iets anders dan je gewend bent van het congres in oktober.&lt;/p&gt;
  9929. &lt;p&gt;Het dagthema is Web Performance: Dat betekent dat alle sprekers vanuit hun unieke expertise iets gaan zeggen over het thema, en er ook met elkaar (en jou) over in discussie gaan.&lt;/p&gt;
  9930. &lt;p&gt;De subonderwerpen lopen uiteen van animatie-tweaks tot accessibility-problemen and van technische optimalisatie tot de performance van single-page web apps.&lt;/p&gt;
  9931. &lt;p&gt;De dag is ingedeeld in drie blokken van drie presentaties die op elkaar aansluiten. Deze praatjes worden direct achter elkaar gehouden en worden per blok opgevolgd door een paneldiscussie met de sprekers, geleid door een MC.&lt;/p&gt;
  9932. &lt;h2&gt;Sprekers&lt;/h2&gt;
  9933. &lt;p&gt;Die MC is niemand minder dan Phil Hawksworth, die al twee keer uitstekend op het Fronteerscongres sprak. Hij houdt de voortgang in de gaten en modereert met jullie vragen de discussies met de sprekers.&lt;/p&gt;
  9934. &lt;p&gt;We hebben een prachtige verzameling van experts bereid gevonden naar Nederland (terug) te komen. We zijn trots op de lijst tot nog toe:&lt;/p&gt;
  9935. &lt;ul&gt;
  9936. &lt;li&gt;Tobias Baldauf&lt;/li&gt;
  9937. &lt;li&gt;Marcy Sutton&lt;/li&gt;
  9938. &lt;li&gt;Karl Groves&lt;/li&gt;
  9939. &lt;li&gt;Tobias Ahlin&lt;/li&gt;
  9940. &lt;li&gt;Paul Bakaus&lt;/li&gt;
  9941. &lt;li&gt;Bram Stein&lt;/li&gt;
  9942. &lt;li&gt;Yan Zhu&lt;/li&gt;
  9943. &lt;li&gt;Estelle Weyl&lt;/li&gt;
  9944. &lt;/ul&gt;
  9945. &lt;p&gt;Meer over de sprekers en hun presentaties vind je op de congrespagina&#39;s, &lt;a href=&quot;https://fronteers.nl/congres/2016-spring&quot;&gt;https://fronteers.nl/congres/2016-spring&lt;/a&gt;.&lt;/p&gt;
  9946. &lt;h2&gt;Locatie: EYE&lt;/h2&gt;
  9947. &lt;p&gt;Fronteers Spring Conference vindt plaats in en rond de kolossale Cinema 1-zaal van EYE. &lt;a href=&quot;https://www.eyefilm.nl/&quot;&gt;EYE, het filmmuseum&lt;/a&gt;, ligt aan de oever van &#39;t IJ in Amsterdam, pal achter het Centraal Station.&lt;/p&gt;
  9948. &lt;p&gt;We zorgen voor Fronteerswaardig lekker eten en een goede koffie/thee-balans zodat ook je eigen Performance tijdens het congres in orde zal zijn.&lt;/p&gt;
  9949. &lt;h2&gt;Live transcriptie&lt;/h2&gt;
  9950. &lt;p&gt;Tijdens het congres zorgen we voor live transcriptie van de presentatie. Een gespecialiseerde stenografe maakt ter plekke een transcriptie van de talks in het Engels. Deze transcriptie tonen we op een extra scherm vooraan in de zaal. Daarmee hopen we voor iedereen het evenement nog toegankelijker te maken, en het volgen van onze uitstekende sprekers nog comfortabeler.&lt;/p&gt;
  9951. &lt;h2&gt;Code of Conduct&lt;/h2&gt;
  9952. &lt;p&gt;Sinds enkele jaren hanteert Fronteers op congressen een Code of Conduct. Als je naar ons evenement komt, verklaar je je akkoord met die Code en word je er ook aan gehouden.&lt;/p&gt;
  9953. &lt;p&gt;Het gaat vooral om respect voor elkaar, en om het creëren van een veilige, open omgeving. We zijn erg trots op de bijzondere, vreemde, uiteenlopende en intelligente groep Fronteersleden en -bezoekers, en willen dat iedereen zich comfortabel voelt en blijft voelen.&lt;/p&gt;
  9954. &lt;p&gt;Bekijk daarom even de Code of Conduct op &lt;a href=&quot;https://fronteers.nl/congres/2016-spring/code-of-conduct&quot;&gt;https://fronteers.nl/congres/2016-spring/code-of-conduct&lt;/a&gt;.&lt;/p&gt;
  9955. &lt;h2&gt;TL;DR&lt;/h2&gt;
  9956. &lt;p&gt;Vrijdag 1 april in EYE, een Fronteers-themadag over Web Performance met 10 internationale sprekers. Vanaf vandaag kunnen (alleen) Fronteersleden kaartjes kopen op &lt;a href=&quot;https://tickets.fronteers.nl/&quot;&gt;https://tickets.fronteers.nl&lt;/a&gt;.&lt;/p&gt;
  9957. </content>
  9958.  </entry>
  9959.  <entry>
  9960.    <title>Bijeenkomst op 25 februari bij Nucleus</title>
  9961.    <link href="https://www.fronteers.nl/nl/blog/2016/02/bijeenkomst-nucleus"/>
  9962.    <updated>2016-02-08T00:00:00Z</updated>
  9963.    <id>https://www.fronteers.nl/nl/blog/2016/02/bijeenkomst-nucleus</id>
  9964.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 25 februari 2016 is Fronteers te gast bij Nucleus in Antwerpen. Er worden twee presentaties voorzien.&lt;/p&gt;
  9965. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  9966. &lt;ul&gt;
  9967. &lt;li&gt;18:00 ontvangst met een hapje en een drankje&lt;/li&gt;
  9968. &lt;li&gt;19:00 Mattias Geniar (&lt;a href=&quot;https://github.com/mattiasgeniar&quot;&gt;@mattiasgeniar&lt;/a&gt;) - &amp;quot;HTTP/2: The Next Version of the Internet&amp;quot;&lt;/li&gt;
  9969. &lt;li&gt;19:45 korte pauze&lt;/li&gt;
  9970. &lt;li&gt;20:00 Koen Kivits (&lt;a href=&quot;https://github.com/koenkivits&quot;&gt;@koenkivits&lt;/a&gt;) - &amp;quot;Bowser in de browser&amp;quot;&lt;/li&gt;
  9971. &lt;li&gt;20:45 naborrelen&lt;/li&gt;
  9972. &lt;/ul&gt;
  9973. &lt;p&gt;Dit evenement vindt plaats bij Nucleus te Antwerpen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2016/nucleus&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  9974. &lt;h2&gt;Wie?&lt;/h2&gt;
  9975. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  9976. </content>
  9977.  </entry>
  9978.  <entry>
  9979.    <title>Met korting naar CSS Day en/of HTML Special</title>
  9980.    <link href="https://www.fronteers.nl/nl/blog/2016/02/korting-css-day"/>
  9981.    <updated>2016-02-01T00:00:00Z</updated>
  9982.    <id>https://www.fronteers.nl/nl/blog/2016/02/korting-css-day</id>
  9983.    <content xml:lang="nl" type="html">&lt;p&gt;Op 17 juni 2016 organiseert Web Conferences Amsterdam wederom het congres &lt;a href=&quot;http://cssday.nl/2016&quot;&gt;CSS Day&lt;/a&gt;, dat op 16 juni vooraf wordt gegaan door iets nieuws: HTML Special. Fronteers-leden krijgen korting op beide: 25 euro op een eendagsticket, of 50 euro op een ticket voor beide dagen.&lt;/p&gt;
  9984. &lt;h2&gt;HTML Special&lt;/h2&gt;
  9985. &lt;p&gt;Op de HTML Special worden een aantal HTML elementen onder de loep genomen: de sprekers is gevraagd een hele talk te spreken over een specifiek HTML element: Jeremy Keith over de &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;, Simon Pieters over &lt;code&gt;&amp;lt;source&amp;gt;&lt;/code&gt; en onze eigen Peter van der Zee over &lt;code&gt;&amp;lt;iframe&amp;gt;&lt;/code&gt;. Kortom, een hele dag over de taal waar eigenlijk elke front-ender regelmatig mee te maken heeft.&lt;/p&gt;
  9986. &lt;h2&gt;CSS Day&lt;/h2&gt;
  9987. &lt;p&gt;Op het programma van CSS Day staan onder andere Léonie Watson van de Paciello Group, die zal praten over accessibility in CSS (wat betekent het bijvoorbeeld voor screenreaders als je met flexbox de &lt;code&gt;order&lt;/code&gt; van je elementen verandert?) en Una Kravets van IBM, met een talk over blend modes (kunnen we Instagram-effecten straks gewoon in CSS?). Ook komt CSS-tovenaar Harry Roberts spreken, onderwerp nog onbekend.&lt;/p&gt;
  9988. &lt;h2&gt;Praktisch&lt;/h2&gt;
  9989. &lt;p&gt;HTML Special en CSS Day vinden plaats op respectievelijk 16 en 17 juni 2016, in het Compagnietheater in Amsterdam.&lt;/p&gt;
  9990. &lt;p&gt;Fronteers-leden krijgen €25 (1 dag) of €50 (2 dagen) korting op de reguliere toegangsprijs. Bij de toegang zijn koffie, lunch, en een drankje na afloop inbegrepen.&lt;/p&gt;
  9991. &lt;p&gt;Mocht je gebruik willen maken van deze korting, neem dan even contact op met de &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact&quot;&gt;ledenadministratie&lt;/a&gt;.. Zoals gebruikelijk geldt deze actie alleen voor leden die op dit moment al lid zijn.&lt;/p&gt;
  9992. </content>
  9993.  </entry>
  9994.  <entry>
  9995.    <title>Bijeenkomst bij TamTam op 24 februari 2016</title>
  9996.    <link href="https://www.fronteers.nl/nl/blog/2016/01/tamtam"/>
  9997.    <updated>2016-01-27T00:00:00Z</updated>
  9998.    <id>https://www.fronteers.nl/nl/blog/2016/01/tamtam</id>
  9999.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 24 februari 2016 is Fronteers te gast bij TamTam in Amsterdam. Er staan twee sprekers op het programma.&lt;/p&gt;
  10000. &lt;p&gt;Er wordt gepresenteerd over de mogelijkheden van Modular Design voor developers en over integreren van backend-less development in de workflow van webapplicaties.&lt;/p&gt;
  10001. &lt;p&gt;Dit evenement vindt plaats bij Tam Tam, Helicopterstraat 25, Amsterdam. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2016/tamtam&quot;&gt;Aanmelden kan via de pagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10002. &lt;h2&gt;Programma&lt;/h2&gt;
  10003. &lt;ul&gt;
  10004. &lt;li&gt;18:00 - inloop met pizza&lt;/li&gt;
  10005. &lt;li&gt;19:00 - Simon Colijn - Designing a System of Components&lt;/li&gt;
  10006. &lt;li&gt;19:45 - korte pauze&lt;/li&gt;
  10007. &lt;li&gt;20:00 - Nick Groenewegen - Optimizing your Application Workflow using Backendless Development&lt;/li&gt;
  10008. &lt;li&gt;We sluiten af met een borrel.&lt;/li&gt;
  10009. &lt;/ul&gt;
  10010. &lt;h2&gt;Wie?&lt;/h2&gt;
  10011. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 75 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  10012. </content>
  10013.  </entry>
  10014.  <entry>
  10015.    <title>Congresvideo&#39;s 2015 nu beschikbaar met transcripties en captions</title>
  10016.    <link href="https://www.fronteers.nl/nl/blog/2016/01/transcripties-en-captions-congres-2015"/>
  10017.    <updated>2016-01-24T00:00:00Z</updated>
  10018.    <id>https://www.fronteers.nl/nl/blog/2016/01/transcripties-en-captions-congres-2015</id>
  10019.    <content xml:lang="nl" type="html">&lt;p&gt;Op de pagina &lt;a href=&quot;https://fronteers.nl/congres/2015/sessions&quot;&gt;Sessions&lt;/a&gt; zijn nu alle video&#39;s van Fronteers 2015 te vinden, voorzien van transcripts en captions.&lt;/p&gt;
  10020. &lt;p&gt;In &lt;a href=&quot;https://www.fronteers.nl/congres/2011/sessions&quot;&gt;2011&lt;/a&gt; en &lt;a href=&quot;https://www.fronteers.nl/congres/2012/sessions&quot;&gt;2012&lt;/a&gt; deden we het al eerder: onze congresvideo&#39;s breder toegankelijk maken door ze te voorzien van transcripts en, in 2012, captions. Dit kan een tijdsintensief proces zijn. We gebruikten destijds weliswaar een betaalde dienst, maar de transcripties die werden aangeleverd waren niet in één keer goed, ze werden handmatig gecontroleerd door een groep enthousiaste vrijwilligers.&lt;/p&gt;
  10021. &lt;h2&gt;Wat zijn het?&lt;/h2&gt;
  10022. &lt;p&gt;&lt;em&gt;Captions&lt;/em&gt; zijn in feite een soort uitgebreidere variant ondertitels. Ze bevatten alles wat er gezegd wordt, maar ook beschrijvingen van andere geluiden. Applaus, gelach, muziek, en ook wie er spreekt. Captions bevatten ook tijdsinformatie, zodat ze, in ons geval als WebVTT, op het goede moment onder een video kunnen verschijnen.&lt;/p&gt;
  10023. &lt;p&gt;&lt;em&gt;Transcriptions&lt;/em&gt; zijn een tekstueel alternatief voor de video. In ons geval zijn het de in feite gewoon de caption-bestanden, maar dan als geheel uitgeschreven. We plaatsen ze onder elke video, zodat er makkelijk in te zoeken is, en de video ook als tekst te lezen is.&lt;/p&gt;
  10024. &lt;h2&gt;Waarom?&lt;/h2&gt;
  10025. &lt;p&gt;Er zijn goede redenen om transcripts en captions te gebruiken. Dit is wie we er bijvoorbeeld mee proberen te helpen:&lt;/p&gt;
  10026. &lt;ul&gt;
  10027. &lt;li&gt;mensen die slecht of niet kunnen horen&lt;/li&gt;
  10028. &lt;li&gt;mensen die de talks in het Engels wat snel vinden gaan en liever meelezen&lt;/li&gt;
  10029. &lt;li&gt;mensen die graag CTRL+F&#39;en in een talk, om een specifiek stukje makkelijk terug te vinden&lt;/li&gt;
  10030. &lt;li&gt;zoekmachines, om beter inzicht te krijgen in onze content&lt;/li&gt;
  10031. &lt;/ul&gt;
  10032. &lt;h2&gt;Hoe?&lt;/h2&gt;
  10033. &lt;p&gt;Dit jaar zijn we opnieuw het proces ingegaan. We gebruikten dit keer &lt;a href=&quot;https://amara.org/&quot;&gt;Amara&lt;/a&gt;, dat tegenwoordig ook wordt aangeboden als optie binnen Vimeo, waar we onze congresvideo&#39;s hosten. Dit maakt het één en en ander een stuk makkelijker, want in plaats van URLs verzamelen en doorsturen en handmatig aanvragen klaarzetten, konden we het dit keer met een druk op de knop vanuit Vimeo regelen.&lt;/p&gt;
  10034. &lt;p&gt;De kwaliteit via Amara viel ons erg mee: de meeste captions konden na geen of enkele aanpassingen al snel live. Met als resultaat dat nu allemaal online staan, zowel in de &lt;a href=&quot;https://vimeo.com/channels/fronteers15&quot;&gt;Vimeo-player&lt;/a&gt; als in &lt;a href=&quot;https://fronteers.nl/congres/2015/sessions&quot;&gt;ons eigen archief&lt;/a&gt;.&lt;/p&gt;
  10035. </content>
  10036.  </entry>
  10037.  <entry>
  10038.    <title>Fronteers Nieuwjaarsborrel 2016</title>
  10039.    <link href="https://www.fronteers.nl/nl/blog/2015/12/nieuwjaarsborrel-2016"/>
  10040.    <updated>2015-12-30T00:00:00Z</updated>
  10041.    <id>https://www.fronteers.nl/nl/blog/2015/12/nieuwjaarsborrel-2016</id>
  10042.    <content xml:lang="nl" type="html">&lt;p&gt;Tijd voor de Fronteers nieuwjaarsborrel, speciaal voor leden! Meld je nu aan en proost op het nieuwe jaar!&lt;/p&gt;
  10043. &lt;p&gt;Op vrijdagavond 15 januari 2016 organiseert Fronteers een Nieuwjaarsborrel in de Nieuwe Dikke Dries, in Utrecht.
  10044. Meer informatie is te vinden op de &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2015/nieuwjaarsborrel-2016&quot;&gt;pagina onder Bijeenkomsten&lt;/a&gt;. Aanmelden met het formulier is verplicht.&lt;/p&gt;
  10045. &lt;h2&gt;Meer borrelen?&lt;/h2&gt;
  10046. &lt;p&gt;Kijk eens &lt;a href=&quot;https://newyear.isoc.nl/&quot;&gt;naar de uitnodiging van ISOC&lt;/a&gt;. Op deze nieuwjaarsreceptie neemt Fronteers als organisatie deel en kom je leden van Fronteers tegen.&lt;/p&gt;
  10047. </content>
  10048.  </entry>
  10049.  <entry>
  10050.    <title>Wijzigingen na ALV</title>
  10051.    <link href="https://www.fronteers.nl/nl/blog/2015/12/wijzigingen-na-alv"/>
  10052.    <updated>2015-12-08T00:00:00Z</updated>
  10053.    <id>https://www.fronteers.nl/nl/blog/2015/12/wijzigingen-na-alv</id>
  10054.    <content xml:lang="nl" type="html">&lt;p&gt;Tijdens de ALV op 3 december jongstleden namen we afscheid van Roy Tomeij en Matijs Brinkhuis als bestuursleden van Fronteers. In de bestuursverkiezing verkoos de ALV daarnaast Thomas van Zuijlen tot bestuurslid en herkoos Arjan Eising. Ook werd Krijn Hoetmer benoemd tot erelid.&lt;/p&gt;
  10055. &lt;p&gt;Om nog even kort stil te staan bij de verdiensten van Matijs en Roy, maakten we een overzicht van hun bijdragen aan het bestuur in de afgelopen jaren.&lt;/p&gt;
  10056. &lt;blockquote&gt;
  10057. &lt;p&gt;Matijs is sinds 2009 bestuurslid van Fronteers. In die zes jaar heeft hij bij vele facetten van de vereniging een steen bijgedragen. Zo stond hij aan de wieg van de workshopactiviteiten van Fronteers, bouwde er een commissie omheen en zat die vanaf 2010 voor (workshops heetten toen nog &#39;cursussen&#39; trouwens). Dat alles heeft hij keurig gedocumenteerd en netjes overgedragen. Daarnaast werd hij in 2012 ook penningmeester van onze vereniging, wat hij altijd met veel geduld deed. In 2012-2013 droeg hij veel bij als lid van de congrescommissie; zijn oog voor detail bijvoorbeeld, kwam onze sprekersuitnodigingen enorm ten goede. Matijs, veel dank voor al je inzet de afgelopen jaren. We hebben begrepen dat je van IPA houdt, en daarvan is op dit moment een voorraad naar je onderweg!&lt;/p&gt;
  10058. &lt;/blockquote&gt;
  10059. &lt;blockquote&gt;
  10060. &lt;p&gt;Roy trad in 2012 toe tot het bestuur, vol ambities. Eén daarvan wil ik specifiek noemen, en dat is het verbeteren van processen. Onder Roys leiding is er mooi samengewerkt door hem, Matijs en Krijn om de facturatie van Fronteers via Moneybird te laten verlopen. Daarvoor waren de nodige koppelingen nodig, bijvoorbeeld met de ledenadministratie, maar is alles nu een hoop makkelijker dan het was. Hij regelde ook een hoop juridische zaken voor de vereniging: de registratie van ons beeldmerk, maar ook zaken als aansprakelijkheid rondom het congres. Iets anders waar Roy ook heel betrokken bij was de afgelopen jaren: de marketingcommissie. Die gaf hij al advies voor hij in het bestuur ging, en later werd hij voorzitter van de commissie. En hij was het afgelopen jaar ook nog een uitstekend penningmeester! Kortom, het is teveel om op te noemen. Namens Fronteers, veel dank voor jouw inzet in het bestuur!&lt;/p&gt;
  10061. &lt;/blockquote&gt;
  10062. &lt;p&gt;Daarnaast werd Krijn Hoetmer benoemd tot erelid, voor zijn verdiensten als bestuurslid, webmaster, ledenadministrator, congresorganisator, taalpurist en algehele drijvende kracht sinds de oprichting van Fronteers. We lichtten dit, voor wie hem niet kende, nog even toe:&lt;/p&gt;
  10063. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2015/erelid.png&quot; alt=&quot;Certificaat erelidmaatschap Krijn Hoetmer. Tekst: Fronteers, de vakvereniging voor front-end developers heeft het genoegen Krijn Hoetmer hierbij uit te roepen tot erelid voor zijn buitengewone verdiensten voor de vereniging waaronder als bestuurslid, webmaster, ledenadministrator, congresorganisator, taalpurist en algehele drijvende kracht sinds de oprichting.&quot; /&gt;&lt;/p&gt;
  10064. &lt;blockquote&gt;
  10065. &lt;p&gt;Krijn deed vanaf de start in 2007 tot en met november dit jaar de ledenadministratie. Van 2007 tot 2012 was hij daarnaast ook penningmeester. Hij organiseerde maar liefst vijf jaar het congres, en was daar meestal een drijvende kracht. Hij sponsort (nog steeds) met zijn bedrijf Qontent de Fronteers-website, en voorzag die van een solide CMS dat het al vele jaren volhoudt – de actieve vrijwilligers zullen het kennen. Hij schreef bovendien een hoop van de content, zoals een lange serie Webrichtlijnenposts, maar ook bijvoorbeeld kopij voor de congreswebsites. Krijn was daarbij een echte taalpurist! Voor de website zette hij ook de vacaturebank op, nog steeds een inkomstenbron voor de vereniging, en droeg die over aan zijn opvolgers Ron Derksen en later Bernard Nijenhuis! Taalpurisme kwam hem ook ten goede als wat we wel “the voice of Fronteers” mogen noemen, de anonieme kracht achter het FronteersConf Twitter-account. Al deze verschillende dingen deed Krijn met veel enthousiasme, meestal, en met dat enthousiasme haalde je er vaak nieuwe leden en vrijwilligers bij.&lt;/p&gt;
  10066. &lt;/blockquote&gt;
  10067. </content>
  10068.  </entry>
  10069.  <entry>
  10070.    <title>Bijeenkomst op 15 december bij Digiti</title>
  10071.    <link href="https://www.fronteers.nl/nl/blog/2015/12/bijeenkomst-digiti"/>
  10072.    <updated>2015-12-01T00:00:00Z</updated>
  10073.    <id>https://www.fronteers.nl/nl/blog/2015/12/bijeenkomst-digiti</id>
  10074.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 15 december 2015 is Fronteers te gast bij Digiti in Herentals. Er worden twee presentaties voorzien.&lt;/p&gt;
  10075. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  10076. &lt;ul&gt;
  10077. &lt;li&gt;18:00 ontvangst met een hapje en een drankje&lt;/li&gt;
  10078. &lt;li&gt;19:00 Bert Timmermans (&lt;a href=&quot;https://twitter.com/Berttimmermans&quot;&gt;@Berttimmermans&lt;/a&gt;) - &amp;quot;Je eigen dashboard met HTML, CSS en JavaScript!&amp;quot;&lt;/li&gt;
  10079. &lt;li&gt;19:45 korte pauze&lt;/li&gt;
  10080. &lt;li&gt;20:00 Jules Ernst (&lt;a href=&quot;https://twitter.com/julezrulez&quot;&gt;@julezrulez&lt;/a&gt;) - &amp;quot;A11Y/accessibility, toegankelijkheid op het web&amp;quot;&lt;/li&gt;
  10081. &lt;li&gt;20:45 naborrelen&lt;/li&gt;
  10082. &lt;/ul&gt;
  10083. &lt;p&gt;Dit evenement vindt plaats bij Digiti te Herentals. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2015/digiti-2&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10084. &lt;h2&gt;Wie?&lt;/h2&gt;
  10085. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 175 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  10086. </content>
  10087.  </entry>
  10088.  <entry>
  10089.    <title>Prijsverhoging Fronteers workshops</title>
  10090.    <link href="https://www.fronteers.nl/nl/blog/2015/11/prijsverhoging-fronteers-workshops"/>
  10091.    <updated>2015-11-25T00:00:00Z</updated>
  10092.    <id>https://www.fronteers.nl/nl/blog/2015/11/prijsverhoging-fronteers-workshops</id>
  10093.    <content xml:lang="nl" type="html">&lt;p&gt;De workshopcommissie heeft, in overleg met het bestuur, besloten de prijzen voor de workshops voor zowel leden als niet-leden te verhogen.&lt;/p&gt;
  10094. &lt;p&gt;De prijs van een workshop gaat voor leden van €100 naar €150 exclusief btw en voor niet-leden van €200 naar €250 exclusief btw. Ook de prijs van een combi (workshop en gelijk lid worden) wordt €250 exclusief btw. De vergoeding voor de trainer gaat van €500 (exclusief btw) naar €1000 per gegeven training.&lt;/p&gt;
  10095. &lt;p&gt;Voor deze verhoging zijn een tweetal redenen. Ten eerste geven veel trainers van Fronteers deze workshops ook onder hun eigen vlag, vaak tegen een hoger tarief. Daardoor werden ze hun eigen concurrent wanneer ze dezelfde workshop bij Fronteers gaven. Door de prijzen van de Fronteers workshops meer marktconform te maken verwachten we dat dit niet langer een probleem zal zijn.&lt;/p&gt;
  10096. &lt;p&gt;Ten tweede kunnen we hierdoor de trainers een ruimere vergoeding per training geven, waardoor het voor meer trainers de moeite waard wordt een workshop bij Fronteers te geven. Waardoor we hopelijk een nog breder en veelzijdiger aanbod van workshops krijgen.&lt;/p&gt;
  10097. &lt;p&gt;De prijsverhoging gaat per 1 januari 2016 in en geldt alleen voor de reguliere workshops. Voor de workshops die gegeven worden voorafgaande aan het congres gelden bovengenoemde prijzen niet.&lt;/p&gt;
  10098. </content>
  10099.  </entry>
  10100.  <entry>
  10101.    <title>Meld je nu aan voor de ALV 2015</title>
  10102.    <link href="https://www.fronteers.nl/nl/blog/2015/11/aanmelden-alv-2015"/>
  10103.    <updated>2015-11-25T00:00:00Z</updated>
  10104.    <id>https://www.fronteers.nl/nl/blog/2015/11/aanmelden-alv-2015</id>
  10105.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdagavond 3 december houden we onze jaarlijkse algemene ledenvergadering (ALV). Alle leden zijn hiervoor van harte uitgenodigd. De locatie van de ALV is Zalencentrum Se7en (toegang via &lt;a href=&quot;http://www.sevenutrecht.nl/&quot;&gt;Restaurant Se7en&lt;/a&gt;), ongeveer vijf minuten lopen vanaf Utrecht CS (Mariaplaats 7).&lt;/p&gt;
  10106. &lt;p&gt;We beginnen om 19:00 uur en verwachten met een strakke planning ruim binnen de drie uur af te ronden en gezellig te gaan napraten. Voor de mensen die van ver komen regelen we een broodmaaltijd, welke vanaf 18:30 beschikbaar zal zijn. Geef bij je aanmelding even aan als je hier gebruik van wilt maken.&lt;/p&gt;
  10107. &lt;p&gt;De agenda voor de avond is als volgt:&lt;/p&gt;
  10108. &lt;ol&gt;
  10109. &lt;li&gt;Welkom en opening door de voorzitter&lt;/li&gt;
  10110. &lt;li&gt;Besluiten eerdere ALV’s&lt;/li&gt;
  10111. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  10112. &lt;li&gt;Belangenafweging kaartverkoop congres&lt;/li&gt;
  10113. &lt;li&gt;Rapportage kascommissie 2014&lt;/li&gt;
  10114. &lt;li&gt;Jaarstukken 2014 / Financiën 2015 / Begroting 2016&lt;/li&gt;
  10115. &lt;li&gt;Kascommissieverkiezing&lt;/li&gt;
  10116. &lt;li&gt;Aftreden Matijs en Roy, bestuursverkiezing&lt;/li&gt;
  10117. &lt;li&gt;Rondvraag&lt;/li&gt;
  10118. &lt;li&gt;Afsluiting&lt;/li&gt;
  10119. &lt;/ol&gt;
  10120. &lt;p&gt;Dit jaar treden Matijs Brinkhuis en Roy Tomeij af, en stellen zich niet opnieuw herkiesbaar. We bedanken hen voor hun jarenlange inzet, en hopen buiten het bestuur nog veel van ze te zien als actieve vrijwilligers. Arjan Eising treedt ook af, en stelt zich wel herkiesbaar. Tenslotte hebben we één aanmelding ontvangen voor een positie in het bestuur, van Thomas van Zuijlen. Hij presenteert zich hieronder. Thomas zal helaas niet op de ALV zelf aanwezig kunnen zijn, maar zal zijn kandidatuur via video (live danwel van tevoren opgenomen) verder toelichten. Mocht je prangende vragen hebben over zijn kandidatuur, dan kan je deze natuurlijk alvast via het reactieformulier op deze blogpost stellen.&lt;/p&gt;
  10121. &lt;blockquote&gt;
  10122. &lt;p&gt;Dag Fronteers, ik heet Thomas en ik ben sinds 2009 lid van de vereniging. Af en toe doe ik een inleiding bij spreekavonden, en sinds 2013 ben ik actief in de organisatie van het congres. Vandaag stel ik me kandidaat als bestuurslid.&lt;/p&gt;
  10123. &lt;/blockquote&gt;
  10124. &lt;p&gt;Ben je van plan te komen, dan vragen we je vriendelijk je hieronder hiervoor in te schrijven, zodat we een idee hebben van de te verwachten opkomst.&lt;/p&gt;
  10125. </content>
  10126.  </entry>
  10127.  <entry>
  10128.    <title>Bijeenkomst bij Netvlies op 10 december 2015</title>
  10129.    <link href="https://www.fronteers.nl/nl/blog/2015/11/bijeenkomst-netvlies"/>
  10130.    <updated>2015-11-11T00:00:00Z</updated>
  10131.    <id>https://www.fronteers.nl/nl/blog/2015/11/bijeenkomst-netvlies</id>
  10132.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 10 december 2015 is Fronteers te gast bij Netvlies in Breda. Er staan drie sprekers op het programma.&lt;/p&gt;
  10133. &lt;h2&gt;Het programma&lt;/h2&gt;
  10134. &lt;ul&gt;
  10135. &lt;li&gt;18:00 - inloop met versnaperingen&lt;/li&gt;
  10136. &lt;li&gt;19:00 - Gebruikerstesten door Fréderic Luksemburg&lt;/li&gt;
  10137. &lt;li&gt;19:45 - korte pauze&lt;/li&gt;
  10138. &lt;li&gt;20:00 - A test-imonial door Erwin Heitzman&lt;/li&gt;
  10139. &lt;li&gt;20:45 - korte pauze&lt;/li&gt;
  10140. &lt;li&gt;21:00 - Modern testing door Maarten Groeneweg&lt;/li&gt;
  10141. &lt;li&gt;We sluiten af met een borrel&lt;/li&gt;
  10142. &lt;/ul&gt;
  10143. &lt;p&gt;Dit evenement vindt plaats bij Netvlies, Prinsenkade 8, 4811 VB Breda. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2015/netvlies&quot;&gt;Aanmelden kan via de pagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10144. &lt;h2&gt;Wie?&lt;/h2&gt;
  10145. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 60 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  10146. </content>
  10147.  </entry>
  10148.  <entry>
  10149.    <title>Bijeenkomst in Maastricht op 27 november 2015 (vervallen)</title>
  10150.    <link href="https://www.fronteers.nl/nl/blog/2015/11/bijeenkomst-maastricht"/>
  10151.    <updated>2015-11-11T00:00:00Z</updated>
  10152.    <id>https://www.fronteers.nl/nl/blog/2015/11/bijeenkomst-maastricht</id>
  10153.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 27 november 2015 organiseert Fronteers een bijeenkomst en borrel in Maastricht. Er worden twee presentaties voorzien.&lt;/p&gt;
  10154. &lt;p&gt;&lt;em&gt;Deze bijeenkomst vervalt en de presentaties worden verplaatst!&lt;/em&gt;&lt;/p&gt;
  10155. &lt;ul&gt;
  10156. &lt;li&gt;Het programma is als volgt:&lt;/li&gt;
  10157. &lt;li&gt;18:30 ontvangst&lt;/li&gt;
  10158. &lt;li&gt;19:30 Jules Ernst - A11Y/accessibility, toegankelijkheid op het web&lt;/li&gt;
  10159. &lt;li&gt;20:00 korte pauze&lt;/li&gt;
  10160. &lt;li&gt;20:15 Frederik Creemers - Zoom, een hulpmiddel voor mensen met een visuele beperking&lt;/li&gt;
  10161. &lt;li&gt;20:45 borrel&lt;/li&gt;
  10162. &lt;/ul&gt;
  10163. &lt;p&gt;Dit evenement vindt plaats in Stadscafé Lure in Maastricht. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2015/maastricht&quot;&gt;Aanmelden kan via de pagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10164. &lt;h2&gt;Wie?&lt;/h2&gt;
  10165. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 30 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  10166. </content>
  10167.  </entry>
  10168.  <entry>
  10169.    <title>Techionista zoekt workshopbegeleiders voor Coding Class for Women</title>
  10170.    <link href="https://www.fronteers.nl/nl/blog/2015/11/workshopbegeleiders-gezocht"/>
  10171.    <updated>2015-11-09T00:00:00Z</updated>
  10172.    <id>https://www.fronteers.nl/nl/blog/2015/11/workshopbegeleiders-gezocht</id>
  10173.    <content xml:lang="nl" type="html">&lt;p&gt;Techionista en T-Mobile hebben Fronteers benaderd, omdat ze op zoek zijn naar begeleiders bij de serie front-end workshops die ze organiseren onder de naam Coding Class for Women. Iets voor jou?&lt;/p&gt;
  10174. &lt;p&gt;De website Techionista organiseert, in samenwerking met T-Mobile, sinds begin deze maand een serie workshopdagen genaamd “Coding Class for Women”. Het doel? Zorgen dat ‘&lt;a href=&quot;http://techionista.com/geef-je-op-voor-techionistas-1e-gratis-coding-class-for-women/&quot;&gt;tech in Nederland een vrouwelijker smoel krijgt&lt;/a&gt;’. Naar dit doel wordt toegewerkt door de organisatie van workshopdagen die voor de deelnemers gratis zijn bij te wonen.&lt;/p&gt;
  10175. &lt;p&gt;De eerste editie was gericht op beginners zonder voorkennis, in de toekomst is het de bedoeling dat er workshops voor zowel beginners als meer gevorderde dames worden gegeven. Lees om een idee te krijgen van hoe de workshopdag eruit ziet, het &lt;a href=&quot;http://techionista.com/its-a-wrap-techionista-eerste-coding-class-was-een-succes/&quot;&gt;verslag van de eerste Coding Class&lt;/a&gt;.&lt;/p&gt;
  10176. &lt;h2&gt;Front-end developers (m/v) gezocht voor begeleiding&lt;/h2&gt;
  10177. &lt;p&gt;Van T-Mobile kregen wij de vraag of wij misschien front-end developers (m/v) wisten die het leuk vinden om te komen helpen op één van deze workshopdagen. Dus hierbij: zijn er Fronteers-leden die een dag willen komen helpen? Je zult tijdens de praktijkopdrachten langs de deelnemers lopen, en waar nodig helpen.&lt;/p&gt;
  10178. &lt;p&gt;De organisatie verwelkomt ook ideeën over de opzet. In de eerste editie is bijvoorbeeld gewerkt met Bootstrap om de deelnemers sneller resultaten te laten zien, misschien heb jij andere ideeën?&lt;/p&gt;
  10179. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  10180. &lt;p&gt;Voor meer details of om je aan te melden, stuur een mail naar webmaster@t-mobile.nl, met als onderwerp ‘Techionista Coding Class for Women’. Er staat geen vergoeding tegenover, maar hopelijk wel een leuke dag!&lt;/p&gt;
  10181. &lt;ul&gt;
  10182. &lt;li&gt;&lt;em&gt;Locatie&lt;/em&gt;: Meet Berlage (in de Beurs van Berlage), Amsterdam&lt;/li&gt;
  10183. &lt;li&gt;&lt;em&gt;Datum&lt;/em&gt;: 15 november (en er worden meer data gepland)&lt;/li&gt;
  10184. &lt;li&gt;&lt;em&gt;Aanmelden/meer info&lt;/em&gt;: mail webmaster@t-mobile.nl&lt;/li&gt;
  10185. &lt;/ul&gt;
  10186. </content>
  10187.  </entry>
  10188.  <entry>
  10189.    <title>Bijeenkomst op 19 november bij Kunstmaan</title>
  10190.    <link href="https://www.fronteers.nl/nl/blog/2015/10/bijeenkomst-kunstmaan"/>
  10191.    <updated>2015-10-28T00:00:00Z</updated>
  10192.    <id>https://www.fronteers.nl/nl/blog/2015/10/bijeenkomst-kunstmaan</id>
  10193.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 19 november 2015 is Fronteers te gast bij Kunstmaan in Leuven. Er worden drie presentaties voorzien.&lt;/p&gt;
  10194. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  10195. &lt;p&gt;18:00 ontvangst met een hapje en een drankje
  10196. 19:00 &lt;a href=&quot;https://twitter.com/sambego&quot;&gt;@sambego&lt;/a&gt; - &amp;quot;Web-audio-api en de web-midi-api&amp;quot;
  10197. 19:30 &lt;a href=&quot;https://twitter.com/diskwriter&quot;&gt;@diskwriter&lt;/a&gt; - &amp;quot;Starten met es6&amp;quot;
  10198. 20:00 korte pauze
  10199. 20:15 &lt;a href=&quot;https://twitter.com/bramus&quot;&gt;@bramus&lt;/a&gt; - &amp;quot;Hybrid Apps met Ionic Framework&amp;quot;
  10200. 20:45 naborrelen&lt;/p&gt;
  10201. &lt;p&gt;Dit evenement vindt plaats bij Kunstmaan te Leuven. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2015/kunstmaan&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10202. &lt;h2&gt;Wie?&lt;/h2&gt;
  10203. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 175 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  10204. </content>
  10205.  </entry>
  10206.  <entry>
  10207.    <title>ALV 2015: 3 december - bestuursleden gezocht</title>
  10208.    <link href="https://www.fronteers.nl/nl/blog/2015/10/datum-alv-2015"/>
  10209.    <updated>2015-10-22T00:00:00Z</updated>
  10210.    <id>https://www.fronteers.nl/nl/blog/2015/10/datum-alv-2015</id>
  10211.    <content xml:lang="nl" type="html">&lt;p&gt;De datum voor onze jaarlijkse ledenvergadering is bekend: op donderdagavond 3 december 2015 zullen we alweer voor de negende keer bij elkaar komen om het reilen en zeilen van de vereniging te bespreken. Een aantal bestuursleden zal op deze avond aftreden en zich niet opnieuw herkiesbaar stellen. We zijn dus op zoek naar nieuwe bestuursleden.&lt;/p&gt;
  10212. &lt;p&gt;Fronteers is door de jaren heen uitgegroeid naar een zeer succesvolle vereniging, met een aantal zeer goedlopende activiteiten. Er zijn echter ook activiteiten waarvan we graag allemaal zouden zien dat we ze &lt;em&gt;ook&lt;/em&gt; nog zouden oppakken, of die we liever anders zouden zien, maar waar we aanlopen tegen de beperkingen van de beschikbare tijd van onze vrijwilligers. De ALV is bij uitstek de gelegenheid om hierover met elkaar van gedachten te wisselen, en samen de prioriteiten voor het komende jaar te bepalen. We verwelkomen je graag, zowel wanneer je een mening hebt over die prioriteiten, als wanneer je een steentje wilt bijdragen aan het realiseren hiervan.&lt;/p&gt;
  10213. &lt;p&gt;Wil je ook &lt;em&gt;verantwoordelijkheid nemen&lt;/em&gt; voor het uitvoeren en begeleiden van het geheel aan activiteiten van de vereniging? Dan is een bestuurspositie misschien wel iets om te overwegen. De ideale bestuurskandidaat is iemand die zowel zelf het voortouw neemt om verbeteringen door te voeren, als andere vrijwilligers weet te motiveren om dit te doen, en bij dit alles ook kritisch blijft controleren dat het past binnen onze missie en het geheel aan bestaande Fronteers-activiteiten.&lt;/p&gt;
  10214. &lt;p&gt;We weten uit ervaring dat er vaak erg ambitieus wordt gedacht over het opzetten van nieuwe activiteiten, waarbij het niet halen van die doelen vervolgens demotiverend werkt; een realistische en pragmatische blik wordt aangeraden.&lt;/p&gt;
  10215. &lt;p&gt;Op dit moment bestaat het bestuur overwegend uit blanke mannen werkzaam als zelfstandige. We zouden het goed voor de vereniging vinden als we meer diversiteit binnen het bestuur zouden mogen verwelkomen, om hiermee een betere afspiegeling van de vereniging en onze beroepsgroep te vormen.&lt;/p&gt;
  10216. &lt;p&gt;Je kandidaat stellen als bestuurslid kan tot twee weken voor de ALV, 19 november. De eventueel nieuwe kandidaten voor het bestuur zullen hierna de gelegenheid krijgen hun kandidatuur op het blog toe te lichten. Op de ALV kunnen alle aanwezige leden op alle, sommige, of geen van de kandidaten stemmen. Alle kandidaten die meer dan 50% van de uitgebrachte stemmen krijgen, worden in het bestuur verkozen. (Mochten er dusdanig veel kandidaten zijn dat het resulterende bestuur groter zou kunnen worden dan wenselijk, dan zal het bestuur aan de ALV voorstellen die stemprocedure aan te passen.) Het nieuwe bestuur kiest vervolgens uit haar midden een voorzitter, secretaris en penningmeester.&lt;/p&gt;
  10217. &lt;p&gt;Agenda, locatie en tijdstip van de ALV volgen komende maand. (Waarschijnlijk Utrecht, 19:00.) Als je vragen, opmerkingen en/of voorstellen voor de ALV hebt, of je je aan wilt melden als potentieel bestuurslid, &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;neem dan contact met ons op&lt;/a&gt;. (Een kort en bondige toelichting waarom je in het bestuur zou willen plaatsnemen wordt op prijs gesteld.)&lt;/p&gt;
  10218. </content>
  10219.  </entry>
  10220.  <entry>
  10221.    <title>Met 25 euro korting naar dsgnday</title>
  10222.    <link href="https://www.fronteers.nl/nl/blog/2015/10/korting-dsgnday"/>
  10223.    <updated>2015-10-02T00:00:00Z</updated>
  10224.    <id>https://www.fronteers.nl/nl/blog/2015/10/korting-dsgnday</id>
  10225.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 13 november wordt net als vorig jaar het &lt;a href=&quot;http://dsgnday.nl/&quot;&gt;dsgnday&lt;/a&gt;-congres georganiseerd. Een dag met acht sprekers over grafisch en UX design op het web. De focus ligt net zoals vorig jaar op directe toepasbaarheid in plaats van inspirerende verhalen zonder direct praktisch nut.&lt;/p&gt;
  10226. &lt;p&gt;Dan Mall, Ida Aalen, Susan Robertson, Trine Falbe, Stephen Hay, Simon Collison, Bram Stein, en Geri Coady delen praktische truuks en tips onder leiding van Ruben Bos. Onderwerpen variëren van hands-on voorbeelden van verschillende projecten tot het (her)definiëren van de rol van de designer en van het ontwerpen van interfaces voor kinderen tot het maken van styleguides en typografische analyse vanuit een wiskundig en computer science perspectief.&lt;/p&gt;
  10227. &lt;p&gt;Fronteers-leden krijgen net als vorig jaar €25 korting op de reguliere toegangsprijs van €275. Bij je kaartje zijn koffie, lunch, en een drankje na afloop inbegrepen.&lt;/p&gt;
  10228. &lt;p&gt;Mocht je gebruik willen maken van deze korting, neem dan even contact op met de &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact&quot;&gt;ledenadministratie&lt;/a&gt;.. Zoals gebruikelijk geldt deze actie alleen voor leden die op dit moment al lid zijn.&lt;/p&gt;
  10229. </content>
  10230.  </entry>
  10231.  <entry>
  10232.    <title>Win een gratis kaartje voor Polymer Summit, 15 september 2015 in Amsterdam</title>
  10233.    <link href="https://www.fronteers.nl/nl/blog/2015/08/polymer-summit"/>
  10234.    <updated>2015-08-10T00:00:00Z</updated>
  10235.    <id>https://www.fronteers.nl/nl/blog/2015/08/polymer-summit</id>
  10236.    <content xml:lang="nl" type="html">&lt;p&gt;Op 15 september 2015 vindt in Amsterdam de &lt;a href=&quot;https://www.polymer-project.org/summit&quot;&gt;Polymer Summit&lt;/a&gt; plaats. Dit congres
  10237. wordt georganiseerd door Google, in samenwerking met Fronteers-lid Jayne Verbeek.&lt;/p&gt;
  10238. &lt;p&gt;Het congres duurt één dag, en vindt plaats in het Muziekgebouw aan &#39;t IJ in Amsterdam. De dag zal volledig in het teken van Google&#39;s &lt;a href=&quot;https://www.polymer-project.org/1.0/docs/start/what-is-polymer.html&quot;&gt;Polymer library&lt;/a&gt; staan. Polymer is een library gebaseerd op &lt;a href=&quot;https://en.wikipedia.org/wiki/Web_Components&quot;&gt;web components&lt;/a&gt;, en bevat zowel een eigen set van custom elementen, als de mogelijkheid nieuwe HTML-elementen te definiëren. De talks zullen technisch zijn, maar toegankelijk voor zowel beginnende als gevorderde front-end ontwikkelaars. De sprekers zijn op dit moment nog niet bekend.&lt;/p&gt;
  10239. &lt;p&gt;De organisatie stelt 15 tickets beschikbaar voor Fronteers-leden. Toegang is inclusief lunch en after-party. Om hiervoor in aanmerking te komen, laat hieronder een reactie achter of mail naar hidde@fronteers.nl. Hierbij geldt: wie het eerst komt, die het eerst maalt.&lt;/p&gt;
  10240. &lt;p&gt;Zoals altijd geldt deze actie &lt;em&gt;alleen voor Fronteers-leden&lt;/em&gt; (lid geworden voor 10 augustus).&lt;/p&gt;
  10241. </content>
  10242.  </entry>
  10243.  <entry>
  10244.    <title>Fronteers Zomerborrel op 25 augustus. Meld nu aan!</title>
  10245.    <link href="https://www.fronteers.nl/nl/blog/2015/08/fronteers-zomerborrel"/>
  10246.    <updated>2015-08-10T00:00:00Z</updated>
  10247.    <id>https://www.fronteers.nl/nl/blog/2015/08/fronteers-zomerborrel</id>
  10248.    <content xml:lang="nl" type="html">&lt;p&gt;Tijd voor de Fronteers zomerborrel, kom bijkletsen met mede front-end ontwikkelaars! In Utrecht, op dinsdag 25 augustus. Meld je snel aan, vol=vol!&lt;/p&gt;
  10249. &lt;p&gt;Meer info is te vinden op &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2015/fronteers-zomerborrel-2015&quot;&gt;de pagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  10250. </content>
  10251.  </entry>
  10252.  <entry>
  10253.    <title>Workshop Counter space in september</title>
  10254.    <link href="https://www.fronteers.nl/nl/blog/2015/07/workshop-counter-space-in-september"/>
  10255.    <updated>2015-07-01T00:00:00Z</updated>
  10256.    <id>https://www.fronteers.nl/nl/blog/2015/07/workshop-counter-space-in-september</id>
  10257.    <content xml:lang="nl" type="html">&lt;p&gt;25 september 2015 wordt weer de workshop &lt;a href=&quot;https://fronteers.nl/workshops/counter-space-jeroen-visser&quot;&gt;Counter Space&lt;/a&gt; gegeven met Jeroen Visser als trainer. In deze workshop lopen we langs de hoofdlijnen van de typografie, om vervolgens deze grondbeginselen toe te passen op de tekst in je browser.&lt;/p&gt;
  10258. &lt;p&gt;In de ochtend ligt het accent op de theorie, in de middag breng je typografie in de praktijk op je eigen scherm. Leden van Fronteers betalen 100 euro. Niet-leden betalen 200 euro. Beide bedragen zijn exclusief btw. De workshop duurt de hele dag en is inclusief lunch bij Seats2Meet in Utrecht.&lt;/p&gt;
  10259. &lt;p&gt;Als je nog geen lid bent, dan is het mogelijk lid te worden en de workshop te bezoeken voor 225 euro exclusief btw.&lt;/p&gt;
  10260. </content>
  10261.  </entry>
  10262.  <entry>
  10263.    <title>Win een gratis kaartje voor ColdFront, 3 september 2015 in Kopenhagen</title>
  10264.    <link href="https://www.fronteers.nl/nl/blog/2015/06/korting-coldfront"/>
  10265.    <updated>2015-06-13T00:00:00Z</updated>
  10266.    <id>https://www.fronteers.nl/nl/blog/2015/06/korting-coldfront</id>
  10267.    <content xml:lang="nl" type="html">&lt;p&gt;De organisatie van het &lt;a href=&quot;http://coldfrontconf.com/&quot;&gt;ColdFront-congres&lt;/a&gt; in Copenhagen heeft ons twee (!) kaartjes gegeven om te verloten onder Fronteers-leden. Dit congres houdt dit jaar zijn tweede editie, met sprekers als Jeremy Keith, Lea Verou en Vitaly Friedman.&lt;/p&gt;
  10268. &lt;p&gt;Kaartjes kosten 2000 DKK + btw, en zijn inclusief licht ontbijt, lunch en wat te drinken op de congresdag. Op de dag voor het congres is er ook een workshop van Vitaly Friedman (Smashing Magazine), waarvoor los kaartjes worden verkocht.&lt;/p&gt;
  10269. &lt;p&gt;Het enige wat je hoeft te doen om te winnen, is reageren op deze blogpost. We zullen over twee weken (26 juni) willekeurig twee winnaars trekken uit de reacties.&lt;/p&gt;
  10270. &lt;h2&gt;Niet gewonnen? Profiteer van korting.&lt;/h2&gt;
  10271. &lt;p&gt;Naast de twee gratis kaartjes hebben we ook korting bedongen: Fronteers-leden krijgen 30% korting op de toegangsprijs van dit congres. Om van je korting gebruik te maken, neem je contact op met de &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;ledenadministratie&lt;/a&gt;.&lt;/p&gt;
  10272. &lt;p&gt;Zoals altijd geldt deze actie voor wie voor vandaag lid was van Fronteers.&lt;/p&gt;
  10273. </content>
  10274.  </entry>
  10275.  <entry>
  10276.    <title>Workshop Responsive Design in september</title>
  10277.    <link href="https://www.fronteers.nl/nl/blog/2015/05/workshop-responsive-design-september"/>
  10278.    <updated>2015-05-27T00:00:00Z</updated>
  10279.    <id>https://www.fronteers.nl/nl/blog/2015/05/workshop-responsive-design-september</id>
  10280.    <content xml:lang="nl" type="html">&lt;p&gt;De workshop &lt;a href=&quot;https://fronteers.nl/workshops/workshop-responsive-design&quot;&gt;Responsive Design&lt;/a&gt; zal in september opnieuw gegeven worden door Frances de Waal. Op 10 september kun je in Utrecht leren hoe je een website ontwikkelt die er goed uitziet op ieder apparaat, mobiel, tablet of desktop.&lt;/p&gt;
  10281. &lt;p&gt;Deze workshop is bedoeld voor ervaren webdesigners en ontwikkelaars voor wie responsive design nog (betrekkelijk) nieuw is. De gehele dag, inclusief koffie, thee en lunch, kost 200 euro exclusief btw. Voor leden van Fronteers geldt een prijs van 100 euro exclusief btw. Als je nog geen lid bent, dan is het mogelijk lid te worden &lt;em&gt;en&lt;/em&gt; de workshop te bezoeken voor 225 euro exclusief btw.&lt;/p&gt;
  10282. &lt;h2&gt;Workshopcommissie zoekt versterking&lt;/h2&gt;
  10283. &lt;p&gt;Als je ideeën hebt over de workshops van Fronteers, zoals het helpen bepalen van de onderwerpen of het regelen van trainers, de workshopcommissie zoekt versterking. Via het &lt;a href=&quot;https://www.fronteers.nl/workshops&quot;&gt;formulier onderaan de workshoppagina&lt;/a&gt; kun je contact opnemen.&lt;/p&gt;
  10284. </content>
  10285.  </entry>
  10286.  <entry>
  10287.    <title>Ontwikkelen met progressive enhancement</title>
  10288.    <link href="https://www.fronteers.nl/nl/blog/2015/05/ontwikkelen-met-progressive-enhancement"/>
  10289.    <updated>2015-05-18T00:00:00Z</updated>
  10290.    <id>https://www.fronteers.nl/nl/blog/2015/05/ontwikkelen-met-progressive-enhancement</id>
  10291.    <content xml:lang="nl" type="html">&lt;p&gt;Sanne Veroude werkt bij de Voorhoede in Amsterdam, waar ze bij het bouwen van websites gebruik maken van progressive enhancement. In haar artikel vertelt ze over het proces dat zij gebruiken voor progressive enhancement.&lt;/p&gt;
  10292. &lt;h2&gt;Ontwikkelen met progressive enhancement&lt;/h2&gt;
  10293. &lt;p&gt;De term ‘progressive enhancement’ werd voor het eerst genoemd door Steven Champeon en Nick Finck in &lt;a href=&quot;http://hesketh.com/publications/inclusive_web_design_for_the_future/&quot;&gt;2003&lt;/a&gt;. In de wereld van front-end development waarin ontwikkelingen zo ontzettend snel gaan, lijkt dit een eeuwigheid geleden. Sinds die tijd is er veel veranderd, maar progressive enhancement is zeker niet minder relevant geworden.&lt;/p&gt;
  10294. &lt;p&gt;De diversiteit aan apparaten waarmee we toegang hebben tot het web is de laatste jaren enorm gegroeid. Het is verleidelijk om hierbij te denken aan de nieuwste smartphone of iPad. De verscheidenheid aan apparaten waarmee gebruikers websites bezoeken is echter veel groter dan dat. We krijgen daardoor meer en meer te maken met verschillen in browsermogelijkheden.&lt;/p&gt;
  10295. &lt;p&gt;Als ontwikkelaars willen we graag een rijke en interactieve ervaring leveren aan moderne smartphones en nieuwe desktop browsers. Tegelijkertijd is het belangrijk dat we oudere browsers en minder bekwame devices blijven ondersteunen. Dit kunnen we realiseren door te ontwikkelen vanuit een progressive enhancement (PE) benadering: we starten met een eenvoudige bruikbare ervaring, en verrijken de gebruikerservaring stap voor stap wanneer we er zeker van zijn dat browsers deze verrijking ondersteunen.&lt;/p&gt;
  10296. &lt;h2&gt;Hoe brengen we progressive enhancement in de praktijk?&lt;/h2&gt;
  10297. &lt;p&gt;We kunnen progressive enhancement op twee niveaus toepassen:&lt;/p&gt;
  10298. &lt;h2&gt;1. Website niveau:&lt;/h2&gt;
  10299. &lt;p&gt;Op website niveau kunnen we een PE techniek gebruiken die bekend staat als ‘cutting the mustard’. Hierbij ontwikkelen we een basiservaring voor alle browsers met HTML, eenvoudige CSS en zonder JavaScript. Door middel van feature detection maken we een onderscheid tussen ‘verouderde’ en ‘moderne’ browsers.&lt;/p&gt;
  10300. &lt;pre&gt;&lt;code&gt;if (&#39;querySelector&#39; in document) {
  10301.    // enhance the application
  10302. }
  10303. &lt;/code&gt;&lt;/pre&gt;
  10304. &lt;p&gt;Browsers die de ‘cut the mustard’ test niet doorstaan, krijgen de minimale gebruikerservaring. Wanneer een browser de cut the mustard test doorstaat:&lt;/p&gt;
  10305. &lt;ul&gt;
  10306. &lt;li&gt;wordt JavaScript ingeladen.&lt;/li&gt;
  10307. &lt;li&gt;wordt de class name ‘enhanced’ aan de HTML tag toegevoegd. Binnen deze class wordt de enhanced CSS toegevoegd. JavaScript afhankelijke controls worden binnen deze class gescoped.&lt;/li&gt;
  10308. &lt;/ul&gt;
  10309. &lt;p&gt;Doordat JavaScript niet wordt ingeladen voor de oudere browsers, worden deze niet belemmerd door extra requests.&lt;/p&gt;
  10310. &lt;h2&gt;2. Component niveau:&lt;/h2&gt;
  10311. &lt;p&gt;Nu onze websites moeten werken op een breed scala aan apparaten, zijn onze werkprocessen veranderd. In plaats van het bouwen van complete webpagina’s ontwikkelen we nu een systeem van &lt;a href=&quot;http://daverupert.com/2013/04/responsive-deliverables&quot;&gt;componenten&lt;/a&gt;.
  10312. Ook op dit niveau beginnen we het ontwikkelen van een component met toegankelijke en semantische HTML. Vervolgens voegen we CSS en JavaScript enhancements toe, op basis van features die door de browser worden ondersteund.&lt;/p&gt;
  10313. &lt;p&gt;Een voorbeeld: we willen een standaard input element met type=”file” laten passen binnen de look &amp;amp; feel van de website. Bovendien willen we het element gebruiksvriendelijker maken voor mobiele devices door het touch target te vergroten. We kunnen &lt;a href=&quot;http://www.filamentgroup.com/examples/jquery-custom-file-input/#&quot;&gt;dit doen door&lt;/a&gt; het input element een opacity van 0 te geven en er een &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; element overheen te plaatsen die we de custom CSS geven.
  10314. Omdat deze oplossing gebruik maakt van de opacity property, willen we de enhancement alleen serveren aan browsers die deze property ondersteunen. Dus eerst checken we voor opacity support:&lt;/p&gt;
  10315. &lt;pre&gt;&lt;code&gt;var supportsOpacity = typeof document.body.style.opacity === &#39;string&#39;;
  10316. if (supportsOpacity) {
  10317.    // enhance the component
  10318. }
  10319. &lt;/code&gt;&lt;/pre&gt;
  10320. &lt;p&gt;Als de opacity property wordt ondersteund, dan voegen we de enhancement toe. Zo niet, dan ziet de gebruiker het native input element. En dat is prima, want &lt;a href=&quot;http://dowebsitesneedtolookexactlythesameineverybrowser.com/&quot;&gt;een site hoeft er niet op alle apparaten hetzelfde uit te zien&lt;/a&gt;. Waar het om gaat is dat de gebruiker in beide gevallen in staat is om het input element te gebruiken.&lt;/p&gt;
  10321. &lt;h2&gt;Bestand tegen onverwachte omstandigheden&lt;/h2&gt;
  10322. &lt;p&gt;Gebruikers maken niet langer alleen vanachter hun bureau gebruik van het internet, maar steeds vaker onderweg en op openbare plaatsen, waar regelmatig sprake is van een instabiele internetverbinding. Progressive enhancement is daardoor niet langer slechts een kwestie van support. We moeten er ook voor zorgen dat onze websites een bruikbare ervaring bieden in het geval van onverwachte omstandigheden (bijvoorbeeld wanneer de internetverbinding wegvalt, omdat een gebruiker zojuist een tunnel is binnengereden).&lt;/p&gt;
  10323. &lt;p&gt;Veel websites gebruiken tegenwoordig web fonts om de typografie te laten aansluiten bij de huisstijl van de website. Maar wat gebeurt er als het web font door een falende internetverbinding niet gedownload kan worden?&lt;/p&gt;
  10324. &lt;p&gt;Browsers gaan hier &lt;a href=&quot;https://speakerdeck.com/zachleat/bulletproof-font-icons?slide=68&quot;&gt;op verschillende manieren&lt;/a&gt; mee om. Sommige browsers (zoals Chrome 36+, Opera 23+ en Firefox) hebben een timeout voor &lt;code&gt;@font-face&lt;/code&gt; requests. Als het font na deze timeout nog niet is geladen, wordt het fallback font weergegeven. Andere browsers (Mobile Safari, Safari, Android, Blackberry) hebben geen timeout en verbergen de fallback tekst. De gebruiker wordt daardoor geconfronteerd met een ‘flash of invisible text’ (FOIT): zolang het custom font bezig is met downloaden, is de tekst onzichtbaar.&lt;/p&gt;
  10325. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2015/example-of-foit.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  10326. &lt;p class=&quot;note&quot;&gt;
  10327. Een voorbeeld van FOIT
  10328. &lt;/p&gt;
  10329. &lt;p&gt;Uiteraard willen we dat onze content zo snel mogelijk beschikbaar is: een font request zou geen single point of failure moeten zijn. We moeten websites op zo’n manier bouwen dat ze bij onverwachte omstandigheden, zoals een falende internetverbinding, nog steeds bruikbaar zijn.&lt;/p&gt;
  10330. &lt;p&gt;We hebben meer controle over de manier waarop browsers met font loading omgaan door gebruik te maken van load events. De native oplossing hiervoor, de &lt;a href=&quot;http://dev.w3.org/csswg/css-font-loading/&quot;&gt;CSS Font Loading Module&lt;/a&gt;, wordt helaas nog niet door alle browsers ondersteund. Voor een betere browserondersteuning kunnen we gebruik maken van &lt;a href=&quot;https://github.com/bramstein/fontfaceobserver&quot;&gt;Font Face Observer&lt;/a&gt;, een polyfill waarmee je een font family en andere eigenschappen (zoals de font weight en style) kan specificeren in de &lt;em&gt;FontFaceObserver constructor&lt;/em&gt;.&lt;/p&gt;
  10331. &lt;pre&gt;&lt;code&gt;var observer = new FontFaceObserver(‘Custom Font Family&#39;, {
  10332.    weight: 400
  10333. });
  10334. &lt;/code&gt;&lt;/pre&gt;
  10335. &lt;p&gt;Met de check() methode wordt gesignaleerd wanneer fonts zijn geladen. We voegen de class name enhanced-font toe wanneer dit het geval is:&lt;/p&gt;
  10336. &lt;pre&gt;&lt;code&gt;observer.check().then(function () {
  10337.    // font is available
  10338.    w.document.documentElement.className += ‘enhanced-font’;
  10339.    }, function () {
  10340.        // font is not available
  10341. });
  10342. &lt;/code&gt;&lt;/pre&gt;
  10343. &lt;p&gt;In de CSS specificeren we een fallback font dat wordt gebruikt zolang het custom font niet beschikbaar is:&lt;/p&gt;
  10344. &lt;pre&gt;&lt;code&gt;body {
  10345.    font-family: sans-serif;
  10346. }
  10347. &lt;/code&gt;&lt;/pre&gt;
  10348. &lt;p&gt;Binnen de class enhanced-font specificeren we in de CSS het custom font:&lt;/p&gt;
  10349. &lt;pre&gt;&lt;code&gt;.enhanced-font body {
  10350.    font-family: Open Sans;
  10351. }
  10352. &lt;/code&gt;&lt;/pre&gt;
  10353. &lt;p&gt;Met deze werkwijze wordt het standaard lettertype weergegeven terwijl de custom fonts worden geladen, ook wanneer het laden van de fonts lang duurt of mislukt. In plaats van gebruikers FOIT te presenteren bieden we hen het standaard lettertype aan, waardoor de content altijd beschikbaar is. Zodra het custom font beschikbaar is, wordt het als een enhancement toegevoegd.&lt;/p&gt;
  10354. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2015/kapotte-roltrap.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  10355. &lt;h2&gt;Geen liften maar roltrappen&lt;/h2&gt;
  10356. &lt;p&gt;Christian Heilmann vergelijkt progressive enhancement met &lt;a href=&quot;http://christianheilmann.com/tag/progressive-enhancement/&quot;&gt;liften en roltrappen&lt;/a&gt;: wanneer een lift buiten werking is, is hij onbruikbaar en heb je er niets aan. Wanneer een roltrap buiten werking is, is hij nog steeds te gebruiken als trap. Het is wellicht minder gemakkelijk, maar gebruikers kunnen nog steeds op de volgende verdieping komen.&lt;/p&gt;
  10357. &lt;p&gt;Hetzelfde geldt voor de manier waarop we websites bouwen: gebruikers moeten altijd hun doel kunnen bereiken, ook wanneer de techniek faalt. En hier moeten we door grotere verschillen in browsermogelijkheden en instabiele internetverbindingen steeds meer rekening mee moeten houden.&lt;/p&gt;
  10358. &lt;p&gt;Progressive enhancement biedt ons een aantal praktische methodes waarmee we:&lt;/p&gt;
  10359. &lt;ul&gt;
  10360. &lt;li&gt;door middel van feature detection geavanceerde technieken kunnen aanbieden aan moderne browsers, terwijl de basiservaring altijd beschikbaar is voor minder capabele browsers.&lt;/li&gt;
  10361. &lt;li&gt;een website bestand maken tegen onverwachte gebeurtenissen, waardoor deze ook bruikbaar is in het geval van een instabiele internetverbinding.&lt;/li&gt;
  10362. &lt;/ul&gt;
  10363. &lt;h2&gt;Over Sanne Veroude&lt;/h2&gt;
  10364. &lt;img src=&quot;https://www.fronteers.nl/_img/blog/2015/sanneveroude.png&quot; alt=&quot;Foto van Sanne&quot; /&gt;
  10365. Front-end developer, likes building stuff accessible for everyone and on every device
  10366. </content>
  10367.  </entry>
  10368.  <entry>
  10369.    <title>Fronteers 2015 launchborrel + livegang kaartverkoop op 29 mei</title>
  10370.    <link href="https://www.fronteers.nl/nl/blog/2015/05/launchborrel-cafe-de-jaren"/>
  10371.    <updated>2015-05-18T00:00:00Z</updated>
  10372.    <id>https://www.fronteers.nl/nl/blog/2015/05/launchborrel-cafe-de-jaren</id>
  10373.    <content xml:lang="nl" type="html">&lt;p&gt;De kaartverkoop voor het Fronteerscongres 2015 start vrijdag 29 mei om 20:00 uur. Om dit te vieren, organiseert Fronteers die avond vanaf 19:00 uur een speciale launchborrel bij Café De Jaren in Amsterdam - en jij bent uitgenodigd.&lt;/p&gt;
  10374. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/congres/2015/fronteers15-launchborrel-announcement-image-nl-1024.png&quot; alt=&quot;Fronteerscongres 2015 Launchborrel bij Café de Jaren. Vrijdag 29 mei 2015 om 19.00 uur&quot; /&gt;&lt;/p&gt;
  10375. &lt;h2&gt;TL;DR&lt;/h2&gt;
  10376. &lt;ul&gt;
  10377. &lt;li&gt;Fronteers 2015 Launchborrel&lt;/li&gt;
  10378. &lt;li&gt;Vrijdag 29 mei, &lt;a href=&quot;http://www.cafedejaren.nl/nl/de-Jaren/Home.html&quot;&gt;Café De Jaren, Amsterdam&lt;/a&gt;&lt;/li&gt;
  10379. &lt;li&gt;Borrel 19:00u, livegang ticket sales 20:00u&lt;/li&gt;
  10380. &lt;li&gt;RSVP via het formulier&lt;/li&gt;
  10381. &lt;/ul&gt;
  10382. &lt;p&gt;Het wordt een gezellige avond met ontspannen sfeer (behalve voor de congresorganisatie die ter plekke de verkoop live zal zetten) en zoals altijd: de eerste drankjes zijn op onze kosten.&lt;/p&gt;
  10383. &lt;h2&gt;Livegang&lt;/h2&gt;
  10384. &lt;p&gt;De congrescommissie vertelt over de plannen voor dit jaar en is aanwezig om jullie vragen te beantwoorden. Hoofdevenement is natuurlijk de &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2015/05/kaartverkoop-fronteers15-begint-op-vrijdag-29-mei&quot;&gt;livegang van de kaartverkoop om 20:00 uur&lt;/a&gt;, waarna je zelf ook ter plekke je tickets kunt kopen - met Fronteerskorting, natuurlijk.&lt;/p&gt;
  10385. &lt;h2&gt;Locatie&lt;/h2&gt;
  10386. &lt;p&gt;Café De Jaren in Amsterdam heet ons hiervoor welkom; een bekende locatie voor congresgangers. De Jaren is prima bereikbaar met het openbaar vervoer. Het NS- en busstation van Amsterdam liggen op circa 15 minuten loopafstand.&lt;/p&gt;
  10387. &lt;p&gt;&lt;a href=&quot;http://www.cafedejaren.nl/nl/de-Jaren/Home.html&quot;&gt;Café De Jaren&lt;/a&gt;
  10388. Nieuwe Doelenstraat 20-22
  10389. 1012 CP Amsterdam&lt;/p&gt;
  10390. &lt;h2&gt;RSVP&lt;/h2&gt;
  10391. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2015/fronteers-2015-launchborrel&quot;&gt;Meld je aan via het formulier&lt;/a&gt; (let op: plaatsen zijn beperkt!) en kom met ons het glas heffen op #fronteers15!&lt;/p&gt;
  10392. </content>
  10393.  </entry>
  10394.  <entry>
  10395.    <title>Kaartverkoop #fronteers15 begint op vrijdag 29 mei</title>
  10396.    <link href="https://www.fronteers.nl/nl/blog/2015/05/kaartverkoop-fronteers15-begint-op-vrijdag-29-mei"/>
  10397.    <updated>2015-05-15T00:00:00Z</updated>
  10398.    <id>https://www.fronteers.nl/nl/blog/2015/05/kaartverkoop-fronteers15-begint-op-vrijdag-29-mei</id>
  10399.    <content xml:lang="nl" type="html">&lt;p&gt;De kaartverkoop voor het Fronteerscongres 2015 begint op 29 mei. Geen early-bird-korting maar goedkopere kaartjes, en natuurlijk krijgen leden fikse korting.&lt;/p&gt;
  10400. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/congres/2015/fronteers15-ticket-sales-announcement-image-nl-2.jpg&quot; alt=&quot;Kaartverkoop Fronteers 2015 op 29 mei 2015&quot; /&gt;&lt;/p&gt;
  10401. &lt;p&gt;Omcirkel de datum in je agenda, zet een wekker en typ vast tickets.fronteers.nl in een extra tabblad; de kaartverkoop voor het Fronteerscongres 2015 gaat van start op vrijdag 29 mei 2015. We gaan dit jaar een paar dingen veranderen - hier is de situatie.&lt;/p&gt;
  10402. &lt;h2&gt;TL;DR&lt;/h2&gt;
  10403. &lt;ul&gt;
  10404. &lt;li&gt;Start kaartverkoop: 29 mei 2015&lt;/li&gt;
  10405. &lt;li&gt;Verkoop in batches&lt;/li&gt;
  10406. &lt;li&gt;Geen early-bird-korting&lt;/li&gt;
  10407. &lt;li&gt;Lagere kaartprijzen voor iedereen&lt;/li&gt;
  10408. &lt;li&gt;Korting voor Fronteersleden&lt;/li&gt;
  10409. &lt;/ul&gt;
  10410. &lt;h2&gt;Kaartprijzen&lt;/h2&gt;
  10411. &lt;p&gt;We doen het dit jaar zonder early-bird-kaartjes en smeren het voordeel uit over alle tickets. Daarmee kosten congreskaartjes dit jaar €345 exclusief BTW voor niet-leden en €270 exclusief BTW voor leden. Net als in voorgaande jaren, moet je wel lid zijn geweest vóór deze aankondiging om in aanmerking te komen voor de ledenkorting van €75.&lt;/p&gt;
  10412. &lt;h2&gt;Verkoop in batches&lt;/h2&gt;
  10413. &lt;p&gt;Als je toevallig op vakantie bent of anderszins niet beschikbaar op vrijdag de 29e, geen zorgen: we gaan de tickets in drie keer verkopen. Je kunt dus een tweede of derde poging wagen (voor hetzelfde bedrag). De eerste set van 300 kaartjes gaat in de verkoop op vrijdag 29 mei om 20:00u. Daaropvolgende batches worden op tijd aangekondigd.&lt;/p&gt;
  10414. &lt;p&gt;Ga vrijdag de 29e naar tickets.fronteers.nl om je kaartje binnen te halen!&lt;/p&gt;
  10415. &lt;h2&gt;Over #fronteers15&lt;/h2&gt;
  10416. &lt;p&gt;Het Fronteerscongres is een van de grootste congressen over front-end development in Europa. Het wordt sinds 2008 jaarlijks georganiseerd door de vereniging Fronteers. De editie van dit jaar wordt de achtste, en zal opnieuw plaatsvinden in het prachtige Pathé Tuschinski. De congresdata zijn donderdag en vrijdag 8 en 9 oktober 2015. Op woensdag 7 oktober organiseren we bovendien een extra dag met workshops.&lt;/p&gt;
  10417. </content>
  10418.  </entry>
  10419.  <entry>
  10420.    <title>Bijeenkomst bij VI Company op 3 juni 2015</title>
  10421.    <link href="https://www.fronteers.nl/nl/blog/2015/05/bijeenkomst-vi-company"/>
  10422.    <updated>2015-05-09T00:00:00Z</updated>
  10423.    <id>https://www.fronteers.nl/nl/blog/2015/05/bijeenkomst-vi-company</id>
  10424.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 3 juni 2015 is Fronteers te gast bij VI Company in Rotterdam. Er worden twee presentaties en een demo voorzien rondom het thema Frontend &amp;amp; Mobile.&lt;/p&gt;
  10425. &lt;h2&gt;Programma&lt;/h2&gt;
  10426. &lt;ul&gt;
  10427. &lt;li&gt;18:00 Inloop&lt;/li&gt;
  10428. &lt;li&gt;18:40 intro Fronteers en VI Company&lt;/li&gt;
  10429. &lt;li&gt;18:45 Jan Jongboom over mobiele telefoons, sensoren, een theremin, een schroevendraaier, de gyroscoop, beacons en ... JavaScript.&lt;/li&gt;
  10430. &lt;li&gt;19:30 demo van een Open Device Lab (ODL) door VI Company&lt;/li&gt;
  10431. &lt;li&gt;19:45 pauze&lt;/li&gt;
  10432. &lt;li&gt;20:15 Niels Leenheer, bekend van o.a. html5test.com over vreemde browsers en rare devices&lt;/li&gt;
  10433. &lt;li&gt;21:00 borrel&lt;/li&gt;
  10434. &lt;/ul&gt;
  10435. &lt;p&gt;Deze bijeenkomst vindt plaats bij VI Company in Rotterdam. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2015/vicompany&quot;&gt;Meer informatie is beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10436. &lt;h2&gt;Wie?&lt;/h2&gt;
  10437. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 75 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  10438. </content>
  10439.  </entry>
  10440.  <entry>
  10441.    <title>Fronteers.nl is vanaf heden een single page app</title>
  10442.    <link href="https://www.fronteers.nl/nl/blog/2015/04/fronteers-spaof"/>
  10443.    <updated>2015-04-01T00:00:00Z</updated>
  10444.    <id>https://www.fronteers.nl/nl/blog/2015/04/fronteers-spaof</id>
  10445.    <content xml:lang="nl" type="html">&lt;p&gt;Nu grote partijen als KLM, ING en de Gemeente Antwerpen hun nieuwste redesigns hebben gebouwd in moderne JavaScript frameworks als Angular.JS, vinden we dat Fronteers niet achter kan blijven. Daarom lanceren we vandaag de nieuwste versie van fronteers.nl, onder de motorkap aangestuurd door bewezen technologieën als require.js en Ember.&lt;/p&gt;
  10446. &lt;p&gt;De site is geoptimaliseerd op snelheid, doordat we gebruik maken van lazyload.js voor afbeeldingen, en webfonts inladen met Web Font Loader van Google en Adobe.&lt;/p&gt;
  10447. &lt;p&gt;Met de nieuwe opzet hebben we eindelijk gezorgd dat er in onze code een strikte scheiding bestaat tussen de data zelf (model), hoe het wordt weergegeven (view) en de techniek waarmee het wordt weergegeven (controller). Dit maakt het één en ander ook gemakkelijker voor de back-end ontwikkelaars van Fronteers.nl, voor wie het toevoegen van nieuwe modules een stuk eenvoudiger is geworden.&lt;/p&gt;
  10448. &lt;p&gt;Omdat de CSS op onze site door veel verschillende mensen wordt bijgehouden, lang niet allemaal front-end ontwikkelaars,  zochten we een manier om onze variabelen te scopen en cascading te voorkomen. CSS zelf biedt alleen globale variabelen, dus hebben we besloten onze CSS voortaan in JavaScript te schrijven. De uiteindelijke style rules injecteren we in een style-attribuut in de DOM.&lt;/p&gt;
  10449. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2015/angularbootstrap.png&quot; alt=&quot;Screenshots van Angular.js en Bootstrap homepages&quot; /&gt;&lt;/p&gt;
  10450. &lt;p&gt;We houden ook vast rekening met de toekomst, door bijvoorbeeld gebruik te maken van Bootstrap. Nieuwe ontwikkelaars kunnen zo gemakkelijker bij het team aansluiten, ze hoeven immers alleen Bootstrap te kennen! Ook hebben we jQuery UI toegevoegd, zodat we straks een stuk minder ontwikkeltijd nodig hebben als we bijvoorbeeld een overlay in de site willen implementeren.&lt;/p&gt;
  10451. &lt;p&gt;Een website is nooit af. Zo hebben we ook bij deze nieuwe site van Fronteers nog wel wat aandachtspunten. Aan toegankelijkheid, bijvoorbeeld, wordt nog gewerkt. We zijn hiervoor bezig met a11y.js, een plug-in die de site automatisch van de nodige WAI-ARIA zal voorzien.&lt;/p&gt;
  10452. &lt;p&gt;We zijn benieuwd wat jullie van deze nieuwste versie vinden.&lt;/p&gt;
  10453. </content>
  10454.  </entry>
  10455.  <entry>
  10456.    <title>Bijeenkomst van ISOC en W3C op 2 april in Amsterdam</title>
  10457.    <link href="https://www.fronteers.nl/nl/blog/2015/03/bijeenkomst-van-isoc-en-w3c-op-2-april-in-amsterdam"/>
  10458.    <updated>2015-03-29T00:00:00Z</updated>
  10459.    <id>https://www.fronteers.nl/nl/blog/2015/03/bijeenkomst-van-isoc-en-w3c-op-2-april-in-amsterdam</id>
  10460.    <content xml:lang="nl" type="html">&lt;p&gt;Komende donderdag, 2 april, organiseren ISOC.nl en W3C Benelux i.s.m. het CWI en Waag Society twee evenementen, het middagprogramma gaat over WebRTC (Web Real-Time Communications) en het avondprogramma over HTML5/Webapps. De toegang bedraagt 30 euro.&lt;/p&gt;
  10461. &lt;p&gt;Op donderdag 2 april organiseren W3C Benelux en ISOC.nl twee bijeenkomsten met de Franse webexpert Dominique Hazaël-Massieux van het World Wide Web Consortium (W3C) uit Frankrijk. Alexander Blom (ISOC.nl) en Annette Kik (W3C Benelux Office) nodigen je van harte uit, deze bijeenkomst bij te wonen.&lt;/p&gt;
  10462. &lt;h2&gt;Programma&lt;/h2&gt;
  10463. &lt;p&gt;&#39;s Middags spreekt Dominique Hazaël-Massieux tijdens een WebRTC masterclass op het CWI. WebRTC – Web Real-Time Communications – is een webstandaard waarmee audio- en video-gesprekken, instant messaging en het uitwisselen van bestanden mogelijk wordt via de browser.&lt;/p&gt;
  10464. &lt;ul&gt;
  10465. &lt;li&gt;WebRTC masterclass en inschrijving: &lt;a href=&quot;http://isoc.nl/events/webrtc-masterclass/&quot;&gt;http://isoc.nl/events/webrtc-masterclass/&lt;/a&gt;&lt;/li&gt;
  10466. &lt;li&gt;Datum en tijd: 2 april, 14:00 - 17:00 uur&lt;/li&gt;
  10467. &lt;li&gt;Locatie: Centrum Wiskunde &amp;amp; Informatica (CWI), Science Park 123, 1098 XG Amsterdam&lt;/li&gt;
  10468. &lt;/ul&gt;
  10469. &lt;p&gt;&#39;s Avonds is Dominique Hazaël-Massieux spreker tijdens een HTML5/webapps workshop in de Amsterdamse Waag Society. HTML5 biedt een rijke set van features waar voorheen browser plug-ins benodigd waren. Belangrijker nog is dat je met HTML5 niet meer per OS een aparte app te ontwikkelen.&lt;/p&gt;
  10470. &lt;ul&gt;
  10471. &lt;li&gt;HTML5/webapps workshop en inschrijving: &lt;a href=&quot;http://isoc.nl/events/html5webapps-workshop/&quot;&gt;http://isoc.nl/events/html5webapps-workshop/&lt;/a&gt;&lt;/li&gt;
  10472. &lt;li&gt;Datum en tijd: 2 april, 20:00 - 22:30 uur&lt;/li&gt;
  10473. &lt;li&gt;Locatie: Waag Society, Nieuwmarkt 4, Amsterdam&lt;/li&gt;
  10474. &lt;/ul&gt;
  10475. &lt;h2&gt;Aanmelden via de website van ISOC&lt;/h2&gt;
  10476. &lt;p&gt;Deelname is gratis voor leden van W3C en ISOC.nl (na registratie) en 30 euro voor andere belangstellenden. Voertaal is Engels.
  10477. Deze bijeenkomst wordt niet georganiseerd door Fronteers, maar kan wel interessant zijn voor onze leden en lezers. Aanmelden kan alleen via &lt;a href=&quot;http://isoc.nl/events/&quot;&gt;http://isoc.nl/events/&lt;/a&gt;.&lt;/p&gt;
  10478. </content>
  10479.  </entry>
  10480.  <entry>
  10481.    <title>Bijeenkomst op 28 april bij 3SIGN</title>
  10482.    <link href="https://www.fronteers.nl/nl/blog/2015/03/bijeenkomst-3sign"/>
  10483.    <updated>2015-03-26T00:00:00Z</updated>
  10484.    <id>https://www.fronteers.nl/nl/blog/2015/03/bijeenkomst-3sign</id>
  10485.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 28 april 2015 is Fronteers te gast bij 3SIGN in Eeklo. Er worden twee presentaties voorzien.&lt;/p&gt;
  10486. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  10487. &lt;ul&gt;
  10488. &lt;li&gt;18:00 ontvangst met verse pizza en een drankje&lt;/li&gt;
  10489. &lt;li&gt;19:00 “De mythe van het extra werk van de AnySurfer-richtlijnen” door &lt;a href=&quot;https://twitter.com/b_de_clercq&quot;&gt;Bart De Clercq&lt;/a&gt;&lt;/li&gt;
  10490. &lt;li&gt;20:00 “Help! De designer werkt met Illustrator” + “Introductie in Sketch en Zeplin” door &lt;a href=&quot;https://twitter.com/macetaria&quot;&gt;Dries van Giel&lt;/a&gt;&lt;/li&gt;
  10491. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  10492. &lt;/ul&gt;
  10493. &lt;p&gt;Dit evenement vindt plaats bij 3SIGN te Eeklo. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2015/3sign&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10494. &lt;h2&gt;Wie?&lt;/h2&gt;
  10495. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 30 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  10496. </content>
  10497.  </entry>
  10498.  <entry>
  10499.    <title>Ceci n’est pas une pipe | or on CSS naming</title>
  10500.    <link href="https://www.fronteers.nl/nl/blog/2015/03/on-css-naming"/>
  10501.    <updated>2015-03-16T00:00:00Z</updated>
  10502.    <id>https://www.fronteers.nl/nl/blog/2015/03/on-css-naming</id>
  10503.    <content xml:lang="nl" type="html">&lt;p&gt;Wilfred Nas hield tijdens de jam session van het Fronteerscongres een praatje over naamgeving van classes. Dit praatje heeft hij omgezet in een artikel voor onze website.&lt;/p&gt;
  10504. &lt;h2&gt;Ceci n’est pas une pipe | or: on CSS naming&lt;/h2&gt;
  10505. &lt;p&gt;Most of us write CSS daily, it is something we do and not the most difficult thing that we do. Or so we tell ourselves, as most of us would rather concentrate on the more difficult stuff, such as writing JavaScript or semantically correct HTML. Most of the time we don&#39;t really think about what it is we write, but I think that CSS is a poorly understood part of our work.
  10506. And I think we tend to forget the most important part of it:
  10507. naming things.&lt;/p&gt;
  10508. &lt;h2&gt;In the beginning&lt;/h2&gt;
  10509. &lt;p&gt;There used to be a time when life was simple. You built a website or an app, all by yourself. In those days stuff was simple and you didn&#39;t need to really think about the name of that &lt;code&gt;.button&lt;/code&gt; or was it &lt;code&gt;.btn&lt;/code&gt; or even &lt;code&gt;.defaultButton&lt;/code&gt;. You just had a couple of hundred lines of CSS and you could oversee it all easily. That is, when you were working on it. If the client came back in three months there sometimes was that moment that you honestly had no clue what you had done in the past, but most of the times you managed.&lt;/p&gt;
  10510. &lt;h2&gt;Enter the modern times&lt;/h2&gt;
  10511. &lt;p&gt;Nowadays there is almost no project I tackle all by myself, most of the time there are two or more people working on the same code that I work on. And I have to communicate with those people, to avoid mistakes or unnecessary rework. So to avoid these things, we start to think about naming conventions. There are some tools and methodologies around to help you, &lt;a href=&quot;http://smacss.com/&quot;&gt;SMACSS&lt;/a&gt;, &lt;a href=&quot;http://bem.info/&quot;&gt;BEM&lt;/a&gt; and &lt;a href=&quot;http://oocss.org/&quot;&gt;OOCSS&lt;/a&gt; to name but a few and I advise you to look at those. But I think that rather than blindly following one of those methods you should settle on your own and build these things with your team. As the most important thing about this is communication and that happens best when you do it together…&lt;/p&gt;
  10512. &lt;h2&gt;So a proposal&lt;/h2&gt;
  10513. &lt;p&gt;Something that I like to do is to work really simply, so the first thing I like to do is set up boundaries. So the first part of each class will be the name of the project or the sub-project you are working on.&lt;/p&gt;
  10514. &lt;p&gt;&lt;code&gt;.*g*-form-checkbox&lt;/code&gt;: Where G is the Generic part of the project you are working on.
  10515. This is a real life example from a project I worked on, this one involved around 30 people working in 7 different teams. So you see, we had quite some coordinating to do. Each team has its own prefix thus preventing them to overwrite other peoples code by accident.&lt;/p&gt;
  10516. &lt;p&gt;.g-&lt;em&gt;form&lt;/em&gt;-checkbox: The second part is what we are working on, the form bit of the application.
  10517. Each project has its own sections in the code base, most of the time in its own .less file.&lt;/p&gt;
  10518. &lt;p&gt;.g-form-&lt;em&gt;checkbox&lt;/em&gt;: The third part is for... you can figure that one out.&lt;/p&gt;
  10519. &lt;p&gt;Ok you say, this all sounds reasonable, but why should we bother? Well maybe to really start thinking about the names you give to stuff, as to avoid stuff like this:&lt;/p&gt;
  10520. &lt;pre&gt;&lt;code&gt;.textAlignRight { text-align:left;}
  10521. .width756px { width: 740px; }
  10522. &lt;/code&gt;&lt;/pre&gt;
  10523. &lt;h2&gt;Real code&lt;/h2&gt;
  10524. &lt;p&gt;I know you are smarter than that, but the truth is, what I have seen is stuff like naming a button three different ways:&lt;/p&gt;
  10525. &lt;p&gt;&lt;code&gt;.button&lt;/code&gt;&lt;/p&gt;
  10526. &lt;p&gt;&lt;code&gt;.btn&lt;/code&gt;&lt;/p&gt;
  10527. &lt;p&gt;&lt;code&gt;.defaultButton&lt;/code&gt;&lt;/p&gt;
  10528. &lt;p&gt;So I will just show you some of the CSS naming conventions me and the people that I have worked with have came up with in the past. It is not something you have to do, think of it like tips or guidelines...&lt;/p&gt;
  10529. &lt;p&gt;We have always tried to make use of smart people and starting from some of the things of patternlab seemed like a good idea. So we started out with Atoms.&lt;/p&gt;
  10530. &lt;h2&gt;Atoms&lt;/h2&gt;
  10531. &lt;p&gt;Atom are the smallest part of a page or application, for instance, the input box on a page.&lt;/p&gt;
  10532. &lt;p&gt;So how do we name those atoms?
  10533. For an &lt;code&gt;&amp;lt;input /&amp;gt;&lt;/code&gt; we set a class of &lt;code&gt;.g-form-input&lt;/code&gt;. If we wanted to be more specific for a &lt;code&gt;&amp;lt;input type=&amp;quot;search&amp;quot; /&amp;gt;&lt;/code&gt; we could do &lt;code&gt;.g-form-input-search&lt;/code&gt; or we could go &lt;code&gt;.g-form-input[type=“search”]&lt;/code&gt;, whatever strikes your fancy.
  10534. In the same jest, we could approach states like focus, by either providing an extra class &lt;code&gt;.g-form-input-focus&lt;/code&gt; or using attribute selectors &lt;code&gt;.g-form-input:focus&lt;/code&gt;.&lt;/p&gt;
  10535. &lt;p&gt;You could even do without the classes all together and go &lt;code&gt;input[type=search]&lt;/code&gt;, that only is a different kind of naming, CSS naming is not about classes, it is about how we address things. So if you want to go another way, please do so consistently.&lt;/p&gt;
  10536. &lt;h2&gt;Molecules&lt;/h2&gt;
  10537. &lt;p&gt;Atoms make up molecules. So the input from the atom could be located in a search box and there, it would need some different styles. What we are not going to do is make up a new atom for it, we are going to create a class that contains only the difference and add that to the surrounding element like :&lt;/p&gt;
  10538. &lt;pre&gt;&lt;code&gt;&amp;lt;div class=&amp;quot;g-m-search-input&amp;quot;&amp;gt;
  10539.    &amp;lt;label for=&amp;quot;search&amp;quot;&amp;gt;  &amp;lt;/label&amp;gt;
  10540.    &amp;lt;input id=&amp;quot;search&amp;quot; type=&amp;quot;search&amp;quot; class=&amp;quot;g-form-input g-form-input-search&amp;quot;&amp;gt;
  10541.    &amp;lt;button class=&amp;quot;g-form-button g-form-button-primary&amp;quot;&amp;gt;  &amp;lt;/button&amp;gt;
  10542. &amp;lt;/div&amp;gt;
  10543. &lt;/code&gt;&lt;/pre&gt;
  10544. &lt;p&gt;Where in the CSS, the &lt;code&gt;*.g-m-search-input*&lt;/code&gt; will only contain the declarations that make it different, carefully avoiding overwriting any generic styles if we can avoid it.&lt;/p&gt;
  10545. &lt;h2&gt;Organisms&lt;/h2&gt;
  10546. &lt;p&gt;Next up in the chain are organisms, things made up of the molecules. Let&#39;s say that we have a header organism &lt;code&gt;.g-o-header&lt;/code&gt; that contains a search box. If the search box needs any styles different applied to it, we supply it with some extra css, like this:&lt;/p&gt;
  10547. &lt;pre&gt;&lt;code&gt;.g-o-header .m-search-input .g-form-input-search {
  10548.   foo:bar;
  10549. }
  10550. &lt;/code&gt;&lt;/pre&gt;
  10551. &lt;p&gt;Needless to say, we only need to specify the difference here, not overwrite stuff that is already there...&lt;/p&gt;
  10552. &lt;h2&gt;Templates&lt;/h2&gt;
  10553. &lt;p&gt;Next up in our hierarchy are the templates, here is where we put even more stuff together. The atoms, molecules and organisms all on the same kind of page. A search page for instance could go with a class of &lt;code&gt;*.g-t-search*&lt;/code&gt; and the results page could have &lt;code&gt;*.g-t-results*&lt;/code&gt;.&lt;/p&gt;
  10554. &lt;h2&gt;Pages&lt;/h2&gt;
  10555. &lt;p&gt;Finally we have the actual pages, where our templates are used to create actual web pages. Please note that the bulk of the css you will write will be for the Atoms and will diminish as we get down to the molecules and on to the pages. If you have a lot of code for each page, you need to look closely at your atoms and see what you can change there.
  10556. Pages come like this &lt;code&gt;*.g-p-awesomeblogpost*&lt;/code&gt; and contain only the stuff needed there, like on the page &lt;code&gt;*.g-p-saintpatricksday*&lt;/code&gt; you will set the borders of the &lt;code&gt;*.g-form-input-search*&lt;/code&gt; to green, as we all know.&lt;/p&gt;
  10557. &lt;h2&gt;Wrap up and pointers&lt;/h2&gt;
  10558. &lt;p&gt;So in a nut shell, here is what I do in big projects:&lt;/p&gt;
  10559. &lt;ul&gt;
  10560. &lt;li&gt;I prefix each name with the name of the project or an abbreviation of that name.&lt;/li&gt;
  10561. &lt;li&gt;&lt;/li&gt;
  10562. &lt;li&gt;Molecules have a -m after that, organisms an -o, templates a -t and pages a -p. By doing this you should make your names easily understandable to all of your team members and you will get new members up to speed in no time.&lt;/li&gt;
  10563. &lt;/ul&gt;
  10564. &lt;p&gt;So now you know what a naming convention could look like, I will give you some random pointers that I have found useful.&lt;/p&gt;
  10565. &lt;h2&gt;Avoid using ID&#39;s&lt;/h2&gt;
  10566. &lt;p&gt;They are too specific and generally cause you more harm than do you good. In a lot of projects ID&#39;s are used by backend or JavaScript programmers, so leave them alone.&lt;/p&gt;
  10567. &lt;h2&gt;Don&#39;t over nest&lt;/h2&gt;
  10568. &lt;p&gt;Ya, I know it sounds daft, with me just giving you all these layers and all. But try to avoid excessive nesting, my rule of thumb is max 4 layers but you can set that to what you like. It is not for performance reasons, but to make debugging easier.&lt;/p&gt;
  10569. &lt;h2&gt;Avoid the direct &amp;gt; child selector&lt;/h2&gt;
  10570. &lt;p&gt;It looks nice, doing stuff with that kind of selector, it will make you look really smart and all. But it will bind you to a specific dom construction and that is not something you have total control over at all times.&lt;/p&gt;
  10571. &lt;p class=&quot;note&quot;&gt;
  10572. (Same goes for the adjacent sibling combinator (+) and the general sibling combinator (~))
  10573. &lt;/p&gt;
  10574. &lt;h2&gt;Talk about it&lt;/h2&gt;
  10575. &lt;p&gt;This is the most important advice I can give you on CSS naming conventions. There is no ultimate solution for your problem, you have to decide on that with your whole team. If you talk about your naming convention and get everybody on board, it is more probable that everyone will adhere to these conventions.&lt;/p&gt;
  10576. &lt;h2&gt;Over Wilfred Nas&lt;/h2&gt;
  10577. &lt;img src=&quot;https://www.fronteers.nl/_img/blog/2015/wilfrednas.jpeg&quot; alt=&quot;Foto van Wilfred&quot; /&gt;
  10578. Freelance front end developer, loves to travel by rocket, father of two sons and founding member of the gang of 5. Nuts about html5 forms and semantics.
  10579. He writes more at [wnas.nl](http://wnas.nl) and rants on twitter as [@wnas](https://twitter.com/wnas).
  10580. </content>
  10581.  </entry>
  10582.  <entry>
  10583.    <title>Fronteers-korting op CSS Day</title>
  10584.    <link href="https://www.fronteers.nl/nl/blog/2015/03/korting-css-day"/>
  10585.    <updated>2015-03-11T00:00:00Z</updated>
  10586.    <id>https://www.fronteers.nl/nl/blog/2015/03/korting-css-day</id>
  10587.    <content xml:lang="nl" type="html">&lt;p&gt;Op  12 juni 2015 wordt in Amsterdam voor de derde keer CSS Day georganiseerd, een congres over geavanceerde CSS. Fronteers-leden kunnen er dit jaar wederom met 25 euro korting naartoe.&lt;/p&gt;
  10588. &lt;p&gt;&lt;a href=&quot;http://cssday.nl/&quot;&gt;CSS Day&lt;/a&gt; vindt plaats in het Compagnietheater in Amsterdam. Dit jaar spreken onder andere John Daggett, Roy Tomeij en Zoe Mickley Gillenwater. Een ticket is inclusief koffie, thee, lunch en een borrel achteraf.&lt;/p&gt;
  10589. &lt;p&gt;Voor onze leden hebben we 15 kortingscodes ontvangen. Fronteers-leden die lid waren voor 11 maart kunnen hiermee 25 euro korting op hun ticket krijgen. Om hier gebruik van te maken, neem je contact op met de &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact&quot;&gt;ledenadministratie&lt;/a&gt;..&lt;/p&gt;
  10590. </content>
  10591.  </entry>
  10592.  <entry>
  10593.    <title>Bijeenkomst bij Kabisa op 8 april 2015</title>
  10594.    <link href="https://www.fronteers.nl/nl/blog/2015/03/bijeenkomst-kabisa"/>
  10595.    <updated>2015-03-04T00:00:00Z</updated>
  10596.    <id>https://www.fronteers.nl/nl/blog/2015/03/bijeenkomst-kabisa</id>
  10597.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 8 april 2015 is Fronteers te gast bij &lt;a href=&quot;http://www.kabisa.nl/&quot;&gt;Kabisa&lt;/a&gt; in Weert. Er worden twee presentaties gehouden.&lt;/p&gt;
  10598. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  10599. &lt;ul&gt;
  10600. &lt;li&gt;18:00 uur Ontvangst met buffet &amp;amp; drankje&lt;/li&gt;
  10601. &lt;li&gt;19:00 uur Rik Schennink - Conditioner.js&lt;/li&gt;
  10602. &lt;li&gt;19:45 uur Korte pauze&lt;/li&gt;
  10603. &lt;li&gt;20:00 uur Koen Kivits - Bowser in de browser&lt;/li&gt;
  10604. &lt;li&gt;20:45 uur Borrel&lt;/li&gt;
  10605. &lt;/ul&gt;
  10606. &lt;p&gt;Geen tijd om na je werk nog ergens een hapje te gaan eten? Geen nood: er staat vanaf 18:00u een lekker buffet voor je klaar. Geef even door of je aanschuift, en of je nog speciale dieetwensen hebt.&lt;/p&gt;
  10607. &lt;h2&gt;Waar?&lt;/h2&gt;
  10608. &lt;p&gt;Dit evenement vindt plaats bij Kabisa in Weert. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2015/kabisa&quot;&gt;Er is een kaart beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10609. &lt;h2&gt;Voor wie?&lt;/h2&gt;
  10610. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2015/kabisa&quot;&gt;Meld je daarom aan via het aanmeldformulier.&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  10611. </content>
  10612.  </entry>
  10613.  <entry>
  10614.    <title>Kom flexwerken met Fronteersleden!</title>
  10615.    <link href="https://www.fronteers.nl/nl/blog/2015/02/kom-flexwerken-met-fronteers-leden"/>
  10616.    <updated>2015-02-26T00:00:00Z</updated>
  10617.    <id>https://www.fronteers.nl/nl/blog/2015/02/kom-flexwerken-met-fronteers-leden</id>
  10618.    <content xml:lang="nl" type="html">&lt;p&gt;Een nieuw soort bijeenkomst voor Fronteersleden: kom samen flexwerken én kennis delen op woensdag 25 maart 2015 in Utrecht. Zaal, koffie én lunch zijn voor onze rekening, doe je mee?&lt;/p&gt;
  10619. &lt;p&gt;Op woensdagochtend 25 maart organiseert de activiteitencommissie een bijeenkomst bij Seats2meet in Utrecht. De vraag kwam van freelancers en ZZP&#39;ers: kunnen jullie ook eens iets voor ons organiseren? Natuurlijk, neem je laptop en kabels mee en ga samen aan de slag of op ontdekkingstocht. Ook als je geen freelancer bent, ben je welkom. Altijd al iets willen uitzoeken, maar nog geen tijd gevonden? Wil je op weg geholpen worden? Start met schrijven van een artikel voor onze site, maak een presentatie af en bespreek de opzet, of help mee een bijeenkomst te organiseren. Vul maar in!&lt;/p&gt;
  10620. &lt;p&gt;Na een kort voorstelrondje ga je aan de slag en voor je het weet is het al tijd om aan te schuiven aan het lunchbuffet. Meer info is te vinden op de &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2015/flexwerken-maart&quot;&gt;pagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  10621. &lt;h2&gt;Wie?&lt;/h2&gt;
  10622. &lt;p&gt;Ieder Fronteerslid, beginner of gevorderd is welkom. Er is echter beperkt plaats, voor circa 15 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  10623. </content>
  10624.  </entry>
  10625.  <entry>
  10626.    <title>Bijeenkomst op 12 maart bij Digiti</title>
  10627.    <link href="https://www.fronteers.nl/nl/blog/2015/02/bijeenkomst-digiti"/>
  10628.    <updated>2015-02-13T00:00:00Z</updated>
  10629.    <id>https://www.fronteers.nl/nl/blog/2015/02/bijeenkomst-digiti</id>
  10630.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 12 maart 2015 is Fronteers te gast bij Digiti in Zoersel. Er worden twee presentaties voorzien.&lt;/p&gt;
  10631. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  10632. &lt;ul&gt;
  10633. &lt;li&gt;18:00 ontvangst met een hapje en een drankje&lt;/li&gt;
  10634. &lt;li&gt;19:00 Saskia Videler over &lt;em&gt;Content-strategie&lt;/em&gt;&lt;/li&gt;
  10635. &lt;li&gt;20:00 Bert Timmermans over &lt;em&gt;Minecraft in de browser&lt;/em&gt;&lt;/li&gt;
  10636. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  10637. &lt;/ul&gt;
  10638. &lt;p&gt;Dit evenement vindt plaats bij Digiti te Zoersel. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2015/digiti&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10639. &lt;h2&gt;Wie?&lt;/h2&gt;
  10640. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  10641. </content>
  10642.  </entry>
  10643.  <entry>
  10644.    <title>Bijeenkomst bij inSided op 24 februari 2015</title>
  10645.    <link href="https://www.fronteers.nl/nl/blog/2015/02/bijeenkomst-insided"/>
  10646.    <updated>2015-02-02T00:00:00Z</updated>
  10647.    <id>https://www.fronteers.nl/nl/blog/2015/02/bijeenkomst-insided</id>
  10648.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 24 februari 2015 is Fronteers te gast bij &lt;a href=&quot;http://www.insided.com/&quot;&gt;inSided&lt;/a&gt; in Amsterdam. Er worden drie presentaties gehouden.&lt;/p&gt;
  10649. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  10650. &lt;p&gt;18:00 uur Ontvangst met hapje &amp;amp; drankje
  10651. 19:00 uur Anne Ties van Vliet - How we use modular Sass at inSided
  10652. 19:30 uur Korte pauze
  10653. 19:45 uur Mauro Mandracchia - A new custom font rendering tool and workflow
  10654. 20:15 uur Korte pauze
  10655. 20:30 uur Flurin Egger - Skynet.js
  10656. 21:00 uur Borrel&lt;/p&gt;
  10657. &lt;h2&gt;Waar?&lt;/h2&gt;
  10658. &lt;p&gt;Dit evenement vindt plaats bij inSided in Amsterdam. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2015/insided&quot;&gt;Er is een kaart beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10659. &lt;h2&gt;Voor wie?&lt;/h2&gt;
  10660. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 60 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  10661. </content>
  10662.  </entry>
  10663.  <entry>
  10664.    <title>CSS Resets</title>
  10665.    <link href="https://www.fronteers.nl/nl/blog/2015/01/css-resets"/>
  10666.    <updated>2015-01-12T00:00:00Z</updated>
  10667.    <id>https://www.fronteers.nl/nl/blog/2015/01/css-resets</id>
  10668.    <content xml:lang="nl" type="html">&lt;p&gt;Wat betekenen ‘reset’ en ‘normalize’ eigenlijk? Hebben deze termen wel met elkaar te maken? En wat moet je er mee als front-ender?&lt;/p&gt;
  10669. &lt;h2&gt;Wat doet de CSS reset?&lt;/h2&gt;
  10670. &lt;p&gt;Elke browser gebruikt een &lt;a href=&quot;http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm&quot;&gt;standaard styling&lt;/a&gt; voor het weergeven van de HTML elementen. Denk hierbij aan de grootte van het lettertype, de kleur en het onderstrepen van linkjes, of de witruimte (paddings of margins) van elementen zoals de &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt; of &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; tag. Niet elke browser gebruikt exact dezelfde standaard layout. Hierdoor kan je design er net iets anders uitzien in de verschillende browsers.
  10671. De WHATWG heeft in haar &lt;a href=&quot;https://html.spec.whatwg.org/multipage/rendering.html#rendering&quot;&gt;HTML standard suggesties&lt;/a&gt; aangebracht voor welke CSS de browser bouwers het beste zouden kunnen gebruiken zodat de HTML het beste weergegeven wordt zoals een front-end ontwikkelaar of zoals de WHATWG het noemt een document author het bedoeld zou hebben. Ze borduren hiermee verder op wat de W3C ooit begonnen was voor &lt;a href=&quot;http://www.w3.org/TR/CSS1/#appendix-a&quot;&gt;CSS1&lt;/a&gt;, &lt;a href=&quot;http://www.w3.org/TR/CSS2/sample.html&quot;&gt;CSS2&lt;/a&gt; en &lt;a href=&quot;http://www.w3.org/TR/CSS21/sample.html&quot;&gt;CSS2.1&lt;/a&gt;.&lt;/p&gt;
  10672. &lt;p&gt;Om de verschillen tussen browsers te ondervangen zijn er CSS resets en CSS normalizers.&lt;/p&gt;
  10673. &lt;p&gt;Een CSS reset overschrijft de standaard layout van een browser met simpele, neutrale basiswaardes. Alle elementen in een HTML document krijgen zo dezelfde font-size, padding, margin, line-height, etc. De tekst in een &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; is dus even groot als in een &lt;code&gt;&amp;lt;small&amp;gt;&lt;/code&gt;. Het is aan de developer om vanaf dit neutrale, blanco stylesheet zijn eigen styling op te bouwen. Zoals Jeff Starr schrijft: “Het geeft de bouwer een uniforme fundering om verder op te kunnen bouwen”. (&lt;a href=&quot;http://perishablepress.com/a-killer-collection-of-global-css-reset-styles/&quot;&gt;Jeff Starr: Killer Collection of CSS Resets&lt;/a&gt;)&lt;/p&gt;
  10674. &lt;p&gt;Op &lt;a href=&quot;http://cssresetr.com/&quot;&gt;cssresetr.com&lt;/a&gt; kun je zien wat verschillende resets doen. Hier zie je dat de verschillende resets ook echt verschillende zaken resetten.&lt;/p&gt;
  10675. &lt;h2&gt;Welke resets zijn er eigenlijk?&lt;/h2&gt;
  10676. &lt;p&gt;Jeff Starr heeft in zijn artikel &lt;a href=&quot;http://perishablepress.com/a-killer-collection-of-global-css-reset-styles/&quot;&gt;Killer Collection of CSS Resets&lt;/a&gt; verschillende CSS-resets opgenomen. In augustus 2013 is het artikel geüpdatet. Het valt op dat de eerste resets vrij globaal starten met een * en een padding en margin van 0, tot aan specifiek benoemde HTML tags. Deze laatste levert dan ook een behoorlijk verhaal op. Op Sixrevisions is &lt;a href=&quot;http://sixrevisions.com/css/the-history-of-css-resets/&quot;&gt;de geschiedenis van de css reset&lt;/a&gt; beschreven. Hier staan verschillende resets benoemt. Interessant om eens door te nemen.&lt;/p&gt;
  10677. &lt;h2&gt;Normalize&lt;/h2&gt;
  10678. &lt;p&gt;Een CSS reset is nogal rigoureus. Kritiek op de eerste generatie resets was bijvoorbeeld dat ze hulpzame features als :focus-styles weghaalden. Hierdoor zag je geen visuele feedback als je een link of form-element focus gaf. Dat zag er mooier uit, maar maakte de site slecht bruikbaar voor mensen die met keyboard navigeren of met hulpmiddelen surfen. Er kwam behoefte aan een opvolger die daar beter mee omging: een “normalizer”, bijvoorbeeld de &lt;a href=&quot;http://nicolasgallagher.com/about-normalize-css/&quot;&gt;normalize van Nicolas Gallagher&lt;/a&gt;.&lt;/p&gt;
  10679. &lt;blockquote&gt;&lt;/blockquote&gt;
  10680. &lt;blockquote&gt;&lt;/blockquote&gt;
  10681. &lt;p&gt;Niet iedereen gebruikt Normalize. Er zijn ook ontwikkelaars die CSS resets gebruiken. Zoals Flurin Egger, hij gebruikt CSS resets. &lt;a href=&quot;https://twitter.com/flurin/status/516963529749172226&quot;&gt;Zijn reactie&lt;/a&gt; na een vraag op twitter wat ontwikkelaars gebruiken, een reset of normalize: “Resets: een 0-like baseline, ik heb mijn eigen minimale versie. Normalizers = opinionated resets :)”&lt;/p&gt;
  10682. &lt;h2&gt;Moet je je CSS resetten?&lt;/h2&gt;
  10683. &lt;p&gt;Het idee achter de reset is dat je gelijk ogende websites bouwt voor elke browser. We zien steeds meer stemmen opgaan dat dit niet hoeft en ook zeker niet meer kan. Hierdoor lijkt de CSS reset aan waarde te verleizen. We hoeven als Front-end ontwikkelaar niet alles meer in de hand te houden. Elke browser mag zijn/haar eigenaardigheden hebben.&lt;/p&gt;
  10684. &lt;p&gt;Afhankelijk van het project waar je mee bezig bent bepaal je of je de CSS een reset meegeeft. Je hebt niet altijd alle HTML tags nodig die in een standaard reset zitten. Juist dit laatste is heel belangrijk. Kijk goed naar een standaard reset en haal er uit wat je nodig hebt en neem het niet klakkeloos over.&lt;/p&gt;
  10685. &lt;h2&gt;Wat vinden andere front-enders van resets?&lt;/h2&gt;
  10686. &lt;blockquote&gt;&lt;/blockquote&gt;
  10687. &lt;blockquote&gt;&lt;/blockquote&gt;
  10688. &lt;h2&gt;TL;DR&lt;/h2&gt;
  10689. &lt;p&gt;Voor een front-end ontwikkelaar is het belangrijk om ervaring op te doen en te testen wat voor hem/haar handig is om te gebruiken. Elk project heeft andere uitdagingen en je kan klakkeloos een reset overnemen, maar zijn alle zaken in de reset echt nodig voor je project? Vaak niet. Voor front-end ontwikkelaars is belangrijk dat wij weten wat browsers doen, dat we weten wat HTML en CSS doet. We moeten leren hierop in te springen en mee te werken.&lt;/p&gt;
  10690. &lt;p&gt;In dit artikel heb ik geen CSS resets opgenomen, want ik kan niet overzien welke reset het nuttigst is voor jou. Mijn bedoeling was inzicht te geven in wat een CSS reset precies is.
  10691. Leer hoe de browsers werken; hoe gaan ze om met de verschillende HTML-tags en welke verschillen worden veroorzaakt tussen de verschillende browsers? Hoe beïnvloedt dat een design dat je aan het bouwen bent?&lt;/p&gt;
  10692. &lt;p&gt;&lt;a href=&quot;http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/&quot;&gt;Eric Meyer gaf in 2007 al aan&lt;/a&gt;: “Een CSS reset is om je aan het denken te zetten en niet om deze standaard te gebruiken”.&lt;/p&gt;
  10693. &lt;p&gt;Gebruik jij een reset? Zo ja, welke en waarom? Zo nee, waarom niet?&lt;/p&gt;
  10694. &lt;h2&gt;Links:&lt;/h2&gt;
  10695. &lt;ul&gt;
  10696. &lt;li&gt;&lt;a href=&quot;https://html.spec.whatwg.org/multipage/rendering.html&quot;&gt;Whatwg: Rendering&lt;/a&gt;&lt;/li&gt;
  10697. &lt;li&gt;&lt;a href=&quot;http://perishablepress.com/a-killer-collection-of-global-css-reset-styles/&quot;&gt;Jeff Starr: Killer Collection of CSS Resets (2007 / 2013)&lt;/a&gt;&lt;/li&gt;
  10698. &lt;li&gt;&lt;a href=&quot;http://cssresetr.com/&quot;&gt;* { CSS:resetr }&lt;/a&gt;&lt;/li&gt;
  10699. &lt;li&gt;&lt;a href=&quot;http://www.iecss.com/&quot;&gt;IE CSS&lt;/a&gt;&lt;/li&gt;
  10700. &lt;li&gt;&lt;a href=&quot;http://sixrevisions.com/css/the-history-of-css-resets/&quot;&gt;Michael Tuck: The History of CSS Resets (2010)&lt;/a&gt;&lt;/li&gt;
  10701. &lt;li&gt;&lt;a href=&quot;http://nicolasgallagher.com/about-normalize-css/&quot;&gt;Normalize van Nicolas Gallagher&lt;/a&gt;&lt;/li&gt;
  10702. &lt;li&gt;&lt;a href=&quot;http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/&quot;&gt;Eric Meyer: Reset Reasoning (2007)&lt;/a&gt;&lt;/li&gt;
  10703. &lt;/ul&gt;
  10704. &lt;h2&gt;Interessante artikelen om te lezen die niet genoemd zijn in de tekst:&lt;/h2&gt;
  10705. &lt;ul&gt;
  10706. &lt;li&gt;&lt;a href=&quot;http://html5doctor.com/html-5-reset-stylesheet/&quot;&gt;Richard Clark: HTML5 Reset Stylesheet (2009)&lt;/a&gt;&lt;/li&gt;
  10707. &lt;li&gt;&lt;a href=&quot;http://csswizardry.com/2011/10/reset-restarted/&quot;&gt;Harry Roberts: Reset restarted (2011)&lt;/a&gt;&lt;/li&gt;
  10708. &lt;li&gt;&lt;a href=&quot;http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/&quot;&gt;Jens Oliver Meiert: Why “Reset” Style Sheets Are Bad (2008)&lt;/a&gt;&lt;/li&gt;
  10709. &lt;/ul&gt;
  10710. &lt;h2&gt;Over Kaj Rietberg&lt;/h2&gt;
  10711. &lt;p&gt;blog/2014/kajrietberg.png
  10712. Kaj is Front-end ontwikkelaar bij Zorgweb in Zwolle. Zijn specialisaties zijn webforms, CSS, CSS-architectuur, Sass en hij verdiept zich momenteel in het responsive bouwen van webformulieren met grote tabellen.&lt;/p&gt;
  10713. </content>
  10714.  </entry>
  10715.  <entry>
  10716.    <title>Hallo frontenders, hier spreekt een ontwerper</title>
  10717.    <link href="https://www.fronteers.nl/nl/blog/2014/12/hallo-frontenders"/>
  10718.    <updated>2014-12-22T00:00:00Z</updated>
  10719.    <id>https://www.fronteers.nl/nl/blog/2014/12/hallo-frontenders</id>
  10720.    <content xml:lang="nl" type="html">&lt;p&gt;Maaike de Laat deed tijdens de Jam Sessions van het Fronteers-congres namens ontwerpers een oproep aan front-enders. Deze presentatie heeft ze met Marrije Schaake uitgeschreven tot dit artikel. Haar talk, &#39;A Call To Arms&#39;, in het Engels, &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2014/12/%5Ccongres/2014/jam-session/call-to-arms&quot;&gt;is terug te kijken bij de Jam Session video&#39;s&lt;/a&gt;.&lt;/p&gt;
  10721. &lt;h2&gt;Hallo Frontenders&lt;/h2&gt;
  10722. &lt;p&gt;Ik heb een verzoek aan jullie, namens de grafisch ontwerpers. Nou ja, ik heb het ze niet allemaal gevraagd, maar ik denk dat veel ontwerpers het wel met me eens zullen zijn.&lt;/p&gt;
  10723. &lt;p&gt;We hebben jullie hulp nodig. Jullie kunnen ons helpen om webontwerp beter te maken, om het naar het volgende niveau te tillen. Ik zal het zo uitleggen, maar kijk eerst eens naar dit plaatje:&lt;/p&gt;
  10724. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2014/benz-patent-motorwagen-nummer-1-02.jpg&quot; alt=&quot;Benz Motowagen&quot; /&gt;&lt;/p&gt;
  10725. &lt;p&gt;Dit is de Benz Motorwagen. Hij werd ontworpen door Karl en Bertha Benz in 1886, en hij wordt door veel mensen beschouwd als de allereerste auto. Dat wil zeggen – er waren eerder ook al wel auto-achtige voertuigen, maar dat waren gewoon koetsen waarbij de bouwers het paard weghaalden en er een motor voor terugplaatsten.&lt;/p&gt;
  10726. &lt;p&gt;Deze auto was de eerste die echt ontworpen is om gebruikt te worden met een motor. Maar toch lijkt hij nog erg veel op een koets! Koetsen waren wat de mensen kenden. Het duurde een tijdje voordat de auto-ontwerpers bedachten welk soort ontwerp het beste werkt voor een automobiel. En voordat handelaars nieuwe toepassingen bedachten voor de auto.&lt;/p&gt;
  10727. &lt;h2&gt;Horseless Carriage Syndrome&lt;/h2&gt;
  10728. &lt;p&gt;In de jaren zestig van de twintigste eeuw noemde Marshall McLuhan dit het ‘&lt;em&gt;Horseless Carriage Syndrome&lt;/em&gt;’ (het ‘paardloze koets-syndroom’): nieuwe technologieën beginnen altijd met het imiteren van wat er eerder was. Dat hoeft niet per se een probleem te zijn: mensen vinden het makkelijker om iets te begrijpen als het lijkt op iets dat ze kennen. Maar na verloop van tijd wordt het een beperking.&lt;/p&gt;
  10729. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2014/apple-macintosh-desktop.png&quot; alt=&quot;Een Apple Macintosh desktop uit begin jaren tachtig&quot; /&gt;&lt;/p&gt;
  10730. &lt;p&gt;Kijk bijvoorbeeld eens naar de eerste GUI&#39;s (Graphical User Interfaces) van computers. De metafoor van het bureaublad was nuttig: het hielp mensen te begrijpen wat een PC allemaal kon. Op het bureaublad van de PC bevonden zich mappen met documenten erin, een rekenmachine, een prullenbak... Net zoals bij een echt bureau. Maar inmiddels kunnen computers heel veel dingen die niets te maken hebben met echte bureaus – en dan wordt de metafoor een last.&lt;/p&gt;
  10731. &lt;p&gt;Laten we nu eens naar webontwerp kijken. Toen ik begon als ontwerper, eind jaren negentig, was het heel hip om achtergronden met een structuurtje te gebruiken in websites. Je kent ze vast nog wel, een mooi gekreukeld papiertje, of een kek houtnerfje. Ik heb zelfs een ontwerp gevonden waar ze allebei inzitten!&lt;/p&gt;
  10732. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2014/david-hasselhoff-screenshot-van-een-prachtige-jaren-negentig-website.jpg&quot; alt=&quot;Een screenshot van een prachtige jaren-negentig website&quot; /&gt;&lt;/p&gt;
  10733. &lt;p&gt;Mooi, toch?&lt;/p&gt;
  10734. &lt;p&gt;En het is niet zo gek dat we dit deden, want in die tijd hadden veel webontwerpers een traditionele grafisch-ontwerpachtergrond. En als je drukwerk ontwerpt is het heel belangrijk om rekening te houden met de eigenschappen van het materiaal dat je gebruikt. Je kunt kiezen uit allerlei soorten papier, variërend van glad en glanzend tot heel grof, en dit heeft letterlijk veel invloed op de &lt;em&gt;look &amp;amp; feel&lt;/em&gt; van je ontwerp. Maar computerschermen zijn altijd hetzelfde: koud en hard. Dat was even wennen voor ons ontwerpers! En misschien ook voor ons publiek.&lt;/p&gt;
  10735. &lt;p&gt;Zoals je vast wel weet, heet deze gewoonte om een website of een interface te laten lijken op een fysiek object ‘skeuomorfisme’. En waarschijnlijk hadden we dit allemaal een beetje nodig, terwijl we langzaam gewend raakten aan digitaal ontwerp. De afgelopen jaren is er natuurlijk veel gedebatteerd over skeuomorfisme, en het lijkt nu wel aan zijn einde te komen. En dan is de vraag: wat komt er nu?&lt;/p&gt;
  10736. &lt;h2&gt;Ken je materialen&lt;/h2&gt;
  10737. &lt;p&gt;Ik denk dat goed ontwerp voortkomt uit een gedegen kennis van de materialen waar je mee werkt.  Lang is het zo geweest dat dit voor ontwerpers min of meer met de paplepel ingegoten werd. Voor de twintigste eeuw bestond ‘grafisch ontwerper’ niet eens als een apart beroep. De persoon die het werk maakte was tegelijkertijd de ontwerper.&lt;/p&gt;
  10738. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/2014/inscription-theatre-leptis-magna-libya.jpg&quot; alt=&quot;Een foto van een Romeins theater met inscriptie&quot; /&gt;&lt;/p&gt;
  10739. &lt;p&gt;In het Romeinse rijk, bijvoorbeeld, was degene die de inscripties maakte op een monument ook de ontwerper van de inscriptie. En na de uitvinding van de drukpers waren de mensen die de drukpersen bedienden ook de ontwerpers van de producten die ze drukten.&lt;/p&gt;
  10740. &lt;p&gt;Vanaf de jaren vijftig van de vorige eeuw, toen de reclame-industrie een grote vlucht nam, werd ontwerp een echt beroep. Maar ook nu weten ontwerpers gewoonlijk nog prima hoe een drukpers werkt en wat je met verschillende soorten inkt, papier en boekbindtechnieken kunt. De drukwerkwereld is nogal langzaam en conservatief, dus dit is altijd goed te doen gebleven.&lt;/p&gt;
  10741. &lt;p&gt;In de digitale wereld ligt dat echter heel anders. En dat, lieve frontenders, is waarom we jullie nodig hebben.&lt;/p&gt;
  10742. &lt;p&gt;We zijn allemaal wel op de hoogte van de discussie over of ontwerpers ook moeten programmeren. Over die discussie zal ik het nu niet hebben, want dat lijkt me niet zo nuttig. Het is geweldig als een ontwerper kan programmeren, maar er zijn veel ontwerpers die het niet kunnen, en ze gaan het echt niet leren alleen omdat jij zegt dat het moet.&lt;/p&gt;
  10743. &lt;p&gt;Maar dan nog moeten ontwerpers hun medium wel goed begrijpen om goed werk te kunnen maken. Ze moeten snappen hoe webpagina&#39;s werken, wat je kunt doen met HTML, CSS and JavaScript – en vooral ook wat je &lt;em&gt;niet&lt;/em&gt; kunt doen.&lt;/p&gt;
  10744. &lt;p&gt;Ontwerpers zullen namelijk altijd ontwerpen. En als ze tegemoet zijn gekomen aan de wensen van de klant en de behoeften van de klant, als ze hebben nagedacht over concepten en &lt;em&gt;branding&lt;/em&gt; en gebruiksvriendelijkheid, hebben ze ook gewoon zin om nieuwe dingen te proberen. Om te experimenteren. Veel ontwerpers bezoeken websites met voorbeelden van interessant ontwerp, zoals It&#39;s Nice That, ontelbaar veel webdesign &lt;em&gt;showcases&lt;/em&gt; en zelfs Pinterest. En als ze iets zien dat ze mooi vinden, zullen ze waarschijnlijk iets soortgelijks proberen te maken. Ook als dat betekent dat jij 5 JavaScript libraries, 8 webfonts en 500 mb aan plaatjes nodig hebt om het te bouwen.&lt;/p&gt;
  10745. &lt;p&gt;En natuurlijk kun je daar over mopperen, maar tegen die tijd is de ontwerper waarschijnlijk al verliefd geworden op zijn of haar eigen ontwerp. En als je echt pech hebt, is de klant dat ook.&lt;/p&gt;
  10746. &lt;h2&gt;Past het bij het medium?&lt;/h2&gt;
  10747. &lt;p&gt;Het probleem met deze ontwerpsites is dat ze nooit uitleggen hoe iets gebouwd is, en of een ontwerp technisch wel goed in elkaar zit. Als je zelf geen frontender bent, kan het heel moeilijk zijn om te beoordelen of een bepaald effect of een ontwerpoplossing moeilijk te bouwen of te onderhouden is, of dat het bijvoorbeeld slecht voor de performance is. Met andere woorden: of het een elegante oplossing is die goed bij het medium past. Of, met nog andere woorden: of je hier te maken hebt met een &lt;em&gt;horseless carriage&lt;/em&gt;.&lt;/p&gt;
  10748. &lt;h2&gt;En jij dan?&lt;/h2&gt;
  10749. &lt;p&gt;Maar laten we het eens over jou hebben. Jij bezoekt waarschijnlijk heel andere websites. Sites als &lt;a href=&quot;http://alistapart.com/&quot;&gt;A List Apart&lt;/a&gt; en &lt;a href=&quot;http://www.smashingmagazine.com/&quot;&gt;Smashing Magazine&lt;/a&gt;, waar je leest over CSS3-dingen die je eindelijk kunt gebruiken, of misschien een nieuwe lichtgewicht JavaScript library waarmee je allerlei coole dingen kunt doen.&lt;/p&gt;
  10750. &lt;p&gt;Interessant, toch? Zowel jij als de ontwerper willen graag experimenteren. Jullie zijn beiden op zoek naar nieuwe ideeën. Zou het niet veel beter zijn als jullie allebei experimenteren met dezelfde dingen?&lt;/p&gt;
  10751. &lt;h2&gt;Houd contact met je ontwerpers&lt;/h2&gt;
  10752. &lt;p&gt;Er zijn een aantal dingen die je zou kunnen proberen. Allereerst: zorg er voor dat je contact houdt met je collega&#39;s die ontwerp doen, vooral tussen projecten in, als er geen (tijds)druk is. En steeds als je een interessant nieuw iets leert, zou je ze er over kunnen vertellen. “Hee kijk, ik heb ontdekt hoe ik deze mooie animaties kan maken!” Of “Hee, wist je dat ik nu verloopjes kan maken met CSS, zodat ik er nu niet meer zo ongelukkig van word als je ze gebruikt in je ontwerpen?”&lt;/p&gt;
  10753. &lt;p&gt;Met een paar collega&#39;s heb ik de website &lt;a href=&quot;http://achterhetscherm.nl/&quot;&gt;Achter het Scherm&lt;/a&gt;, een serie interviews over hoe mensen samen aan webprojecten werken. Voor deze website hebben we de afgelopen tijd gesproken met een aantal ontwerpers en ontwikkelaars, en ze gevraagd hoe ze elkaar op de hoogte houden van nieuwe ontwikkelingen. En ze hadden een paar erg goede ideeën, die jij ook zou kunnen gaan toepassen, als je dat nog niet doet.&lt;/p&gt;
  10754. &lt;p&gt;Sommige bedrijven hebben bijvoorbeeld een e-maillijst voor alle medewerkers. Sommige teams houden regelmatig korte bijeenkomsten waarbij iedereen laat zien waar ze mee bezig zijn en wat ze de laatste tijd geleerd hebben. Sommige organisaties hebben multidisciplinaire weblogs. Sommige gebruiken online communicatiemiddelen zoals &lt;a href=&quot;https://slack.com/&quot;&gt;Slack&lt;/a&gt; (❤). En sommige mensen gaan gewoon naast elkaar zitten en praten over wat ze aan het doen zijn. Probeer het eens!&lt;/p&gt;
  10755. &lt;p&gt;Denk eens na: je bent hier bij Fronteers om jezelf onder te dompelen in front-end ontwikkeling. Hoe ga je de dingen die je hier leert delen met je collega&#39;s op je werk? Als je je inspant om je ontwerpvrienden op de hoogte te houden van jouw vakgebied, zul je hopelijk merken dat ze je suggesties ter harte nemen. Dit maakt jouw werk leuker, en jullie werk zal er beter van worden.&lt;/p&gt;
  10756. &lt;p&gt;Ik weet ook wel dat wat ik hier zeg niet nieuw is. Maar ik denk wel dat het vaker gezegd moet worden! Wij ontwerpers hebben jullie echt nodig, zelfs als we het onszelf niet altijd realiseren ;-)&lt;/p&gt;
  10757. &lt;h2&gt;Over Maaike de Laat&lt;/h2&gt;
  10758. &lt;img src=&quot;https://www.fronteers.nl/_img/blog/2014/maaikedelaat.png&quot; alt=&quot;Foto van Maaike uit 2014&quot; class=&quot;floating-portrait&quot; /&gt;
  10759. &lt;p&gt;Maaike is ontwerper bij &lt;a href=&quot;http://eend.nl/&quot;&gt;eend&lt;/a&gt;. &lt;a href=&quot;https://twitter.com/maaike&quot;&gt;Volg haar op twitter&lt;/a&gt;.&lt;/p&gt;
  10760. </content>
  10761.  </entry>
  10762.  <entry>
  10763.    <title>Yes, we starten met artikelen!</title>
  10764.    <link href="https://www.fronteers.nl/nl/blog/2014/12/artikel-start"/>
  10765.    <updated>2014-12-19T00:00:00Z</updated>
  10766.    <id>https://www.fronteers.nl/nl/blog/2014/12/artikel-start</id>
  10767.    <content xml:lang="nl" type="html">&lt;p&gt;We zijn nu een paar maanden bezig geweest en eindelijk kunnen we het goede nieuws verspreiden: we starten met het plaatsen van artikelen over front-endwetenswaardigheden!&lt;/p&gt;
  10768. &lt;p&gt;Op onze website kunnen jullie al veel &lt;a href=&quot;https://www.fronteers.nl/videos&quot;&gt;video&#39;s&lt;/a&gt; vinden over veel verschillende onderwerpen binnen ons vakgebied. Voor degene die graag video kijken een goede manier om informatie tot zich te nemen, maar voor de lezers onder ons mist er iets. Daarom starten we met het plaatsen van artikelen over front-endwetenswaardigheden op het Fronteers weblog.&lt;/p&gt;
  10769. &lt;p&gt;Het plan is om maandelijks één artikel te plaatsen. Het eerste artikel dat we plaatsen is van Maaike de Laat. Zij hield een talk tijdens de Jam Session van de Fronteers-congres en vertaalde dit naar een artikel voor ons weblog. Voor volgende maand hebben we het artikel ook klaar staan. Verder zijn verschillende Fronteers leden bezig met een artikel voor ons weblog. Er gaat nog veel moois komen.&lt;/p&gt;
  10770. &lt;p&gt;Fronteersleden hebben heel veel kennis over heel veel verschillende onderwerpen. We willen hun graag een podium bieden. De artikelen zijn bedoeld voor:&lt;/p&gt;
  10771. &lt;ul&gt;
  10772. &lt;li&gt;beschouwingen&lt;/li&gt;
  10773. &lt;li&gt;tips, trucs en &lt;em&gt;best practices&lt;/em&gt;&lt;/li&gt;
  10774. &lt;li&gt;het uitlokken van discussie&lt;/li&gt;
  10775. &lt;/ul&gt;
  10776. &lt;p&gt;Lijkt het je leuk om ook een artikel te schrijven laat het ons weten: &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;neem contact op&lt;/a&gt; met Kaj Rietberg of Paul van Buuren en vertel ons waarover jij wilt schrijven. Wij helpen je met schrijven. Help andere Fronteerleden met jouw kennis; je weet meer dan je denkt!&lt;/p&gt;
  10777. </content>
  10778.  </entry>
  10779.  <entry>
  10780.    <title>Fronteers Nieuwjaarsborrel 2015</title>
  10781.    <link href="https://www.fronteers.nl/nl/blog/2014/11/nieuwjaarsborrel-2015"/>
  10782.    <updated>2014-11-28T00:00:00Z</updated>
  10783.    <id>https://www.fronteers.nl/nl/blog/2014/11/nieuwjaarsborrel-2015</id>
  10784.    <content xml:lang="nl" type="html">&lt;p&gt;Een nieuw jaar, tijd voor de Fronteers nieuwjaarsborrel, speciaal voor leden!&lt;/p&gt;
  10785. &lt;p&gt;Op vrijdag 16 januari 2015 organiseert Fronteers een Nieuwjaarsborrel voor leden. Deze zal plaatsvinden in Grand Cafe Lebowski, in Utrecht, maar dan wel in de grote zaal boven. &lt;a href=&quot;https://www.fronteers.nl/blog/2013/12/nieuwjaarsborrel&quot;&gt;Vorig jaar&lt;/a&gt; bleek &lt;a href=&quot;https://www.fronteers.nl/blog/2013/12/nieuwjaarsborrel#reacties&quot;&gt;het enthousiasme&lt;/a&gt; om te borrelen enorm en daardoor de ruimte bij Lebowski wat krap. Dit jaar is er ruimte voor 80 personen. Rond 17:30 uur zullen de eerste leden aanwezig zijn en de eerste drankjes worden betaald door de vereniging.&lt;/p&gt;
  10786. &lt;p&gt;Grand Café Lebowski in Utrecht heeft veel lekkere bieren, ook van de tap. En bij een borrel horen (lekker veel en lekker vette) hapjes.&lt;/p&gt;
  10787. &lt;h2&gt;Locatie&lt;/h2&gt;
  10788. &lt;p&gt;Domplein 17, naast de Dom in Utrecht, ongeveer 10 minuten lopen van Utrecht Centraal Station. Op de website van Grand Café Lebowski vind je de routebeschrijving.
  10789. Parkeren in Utrecht is geen probleem, maar bekijk wel even de tarieven. Kies voor garage Springweg of één van de andere parkeergarages rond Hoog Catharijne.&lt;/p&gt;
  10790. &lt;h2&gt;Nog meer borrelen?&lt;/h2&gt;
  10791. &lt;p&gt;Op donderdag 8 januari is er een nieuwjaarsreceptie van ISOC, ook daar kun je leden van Fronteers tegenkomen. &lt;a href=&quot;https://www.fronteers.nl/blog/2014/11/nieuwjaarsreceptie-isoc&quot;&gt;Lees hier verder.&lt;/a&gt;&lt;/p&gt;
  10792. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  10793. &lt;p&gt;Ben je lid van Fronteers en doe je mee? Meld je dan aan.&lt;/p&gt;
  10794. </content>
  10795.  </entry>
  10796.  <entry>
  10797.    <title>Meld je nu aan voor de ALV 2014</title>
  10798.    <link href="https://www.fronteers.nl/nl/blog/2014/11/aanmelden-alv-2014"/>
  10799.    <updated>2014-11-19T00:00:00Z</updated>
  10800.    <id>https://www.fronteers.nl/nl/blog/2014/11/aanmelden-alv-2014</id>
  10801.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdagavond 2 december houden we onze jaarlijkse algemene ledenvergadering (ALV). Alle leden zijn hiervoor van harte uitgenodigd. De locatie van de ALV is Zalencentrum Se7en, in zaal 2 (toegang via &lt;a href=&quot;http://www.sevenutrecht.nl/&quot;&gt;Restaurant Se7en&lt;/a&gt;), ongeveer vijf minuten lopen vanaf Utrecht CS (Mariaplaats 7). Dit is, los van een naamswijziging, dezelfde locatie als vorig jaar.&lt;/p&gt;
  10802. &lt;p&gt;We beginnen om 19:00 uur en hopen deze keer toch &lt;em&gt;écht&lt;/em&gt; niet langer dan drie uur nodig te hebben. Voor de mensen die van ver komen regelen we een broodmaaltijd, welke vanaf 18:30 beschikbaar zal zijn. Geef bij je aanmelding even aan dat je hier gebruik van wilt maken.&lt;/p&gt;
  10803. &lt;p&gt;De agenda voor de avond is als volgt:&lt;/p&gt;
  10804. &lt;ol&gt;
  10805. &lt;li&gt;Welkom en opening door de voorzitter&lt;/li&gt;
  10806. &lt;li&gt;Besluiten eerdere ALV’s&lt;/li&gt;
  10807. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  10808. &lt;li&gt;Rapportage kascommissie 2013&lt;/li&gt;
  10809. &lt;li&gt;Jaarstukken 2013 / Financiën 2014 / Begroting 2015&lt;/li&gt;
  10810. &lt;li&gt;Kascommissieverkiezing&lt;/li&gt;
  10811. &lt;li&gt;Voorstel ledenadministratie buiten bestuur&lt;/li&gt;
  10812. &lt;li&gt;Aftreden Krijn en Vasilis, bestuursverkiezing&lt;/li&gt;
  10813. &lt;li&gt;Rondvraag&lt;/li&gt;
  10814. &lt;li&gt;Afsluiting&lt;/li&gt;
  10815. &lt;/ol&gt;
  10816. &lt;p&gt;In de nieuwsbrief die op 19 november is verstuurd staan meer details en een toelichting op de verschillende agenda-onderwerpen.&lt;/p&gt;
  10817. &lt;p&gt;Dit jaar treden Vasilis van Gemert en Krijn Hoetmer af. Twee nieuwe leden hebben zich aangemeld voor een positie in het bestuur, te weten Hidde de Vries en Jaco Koster. Beide presenteren zich hieronder.&lt;/p&gt;
  10818. &lt;blockquote&gt;
  10819. &lt;p&gt;Hallo! Mijn naam is Hidde de Vries, en ik stel mij dit jaar verkiesbaar als bestuurslid van Fronteers. In die positie hoop ik te kunnen bijdragen aan het behartigen van de belangen van onze leden. Kort over mezelf: ik ben freelance front-end ontwikkelaar, en ik heb veel hart voor de front-end community.&lt;/p&gt;
  10820. &lt;/blockquote&gt;
  10821. &lt;blockquote&gt;
  10822. &lt;p&gt;Ik ben &lt;a href=&quot;http://nl.linkedin.com/in/jacokoster/&quot;&gt;Jaco Koster&lt;/a&gt;, 30 jaar oud, als &lt;a href=&quot;http://frontmen.nl/&quot;&gt;Frontmen&lt;/a&gt; gedetacheerd bij een oranje bank en woon ik, samen met mijn vriendin en zoon, in het prachtige Montfoort. In mijn vrije tijd ben ik leiding bij de &lt;a href=&quot;http://scoutingflevo.com/zee/&quot;&gt;scouting&lt;/a&gt;, speel ik online een &lt;a href=&quot;http://eu.battle.net/sc2/en/&quot;&gt;spelletje&lt;/a&gt; of loop ik onzin uit te kramen op &lt;a href=&quot;https://twitter.com/jacokoster&quot;&gt;Twitter&lt;/a&gt; of &lt;a href=&quot;https://webchat.freenode.net/?channels=fronteers&quot;&gt;IRC&lt;/a&gt;.&lt;/p&gt;
  10823. &lt;/blockquote&gt;
  10824. &lt;p&gt;Ben je van plan te komen, dan vragen we je vriendelijk je hieronder hiervoor in te schrijven, zodat we een idee hebben van de te verwachten opkomst.&lt;/p&gt;
  10825. &lt;h2&gt;Aanwezigen&lt;/h2&gt;
  10826. &lt;ul&gt;
  10827. &lt;li&gt;Sander van Lambalgen&lt;/li&gt;
  10828. &lt;li&gt;Matijs Brinkhuis&lt;/li&gt;
  10829. &lt;li&gt;Krijn Hoetmer&lt;/li&gt;
  10830. &lt;li&gt;Arjan Eising&lt;/li&gt;
  10831. &lt;li&gt;Roy Tomeij&lt;/li&gt;
  10832. &lt;li&gt;Vasilis van Gemert&lt;/li&gt;
  10833. &lt;li&gt;Wesley Lancel&lt;/li&gt;
  10834. &lt;li&gt;Jaco Koster&lt;/li&gt;
  10835. &lt;li&gt;Peter-Paul Koch&lt;/li&gt;
  10836. &lt;li&gt;Tom Greuter&lt;/li&gt;
  10837. &lt;li&gt;Meta Kruijs&lt;/li&gt;
  10838. &lt;li&gt;Thomas van Zuijlen&lt;/li&gt;
  10839. &lt;li&gt;Sander Aarts&lt;/li&gt;
  10840. &lt;li&gt;Joël Kuijten&lt;/li&gt;
  10841. &lt;li&gt;Wim van Iersel&lt;/li&gt;
  10842. &lt;li&gt;Jarno de Wit&lt;/li&gt;
  10843. &lt;li&gt;Jules Ernst&lt;/li&gt;
  10844. &lt;li&gt;Edwin Martin&lt;/li&gt;
  10845. &lt;li&gt;Tom Hartwig&lt;/li&gt;
  10846. &lt;/ul&gt;
  10847. </content>
  10848.  </entry>
  10849.  <entry>
  10850.    <title>Bijeenkomst op 27 november bij De Persgroep</title>
  10851.    <link href="https://www.fronteers.nl/nl/blog/2014/11/bijeenkomst-persgroep"/>
  10852.    <updated>2014-11-10T00:00:00Z</updated>
  10853.    <id>https://www.fronteers.nl/nl/blog/2014/11/bijeenkomst-persgroep</id>
  10854.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 27 november 2014 is Fronteers te gast bij De Persgroep Publishing in Asse (Kobbegem). Er worden drie presentaties voorzien.&lt;/p&gt;
  10855. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  10856. &lt;ul&gt;
  10857. &lt;li&gt;18:00 ontvangst met broodjes en een drankje&lt;/li&gt;
  10858. &lt;li&gt;19:00 &lt;a href=&quot;https://twitter.com/Bizonder&quot;&gt;Harald Bertels&lt;/a&gt; over &lt;em&gt;Design collaboration&lt;/em&gt;&lt;/li&gt;
  10859. &lt;li&gt;19:30 &lt;a href=&quot;https://twitter.com/FirstManOnDaMoo&quot;&gt;Pieter Mergan&lt;/a&gt; over &lt;em&gt;Schema.org microdata&lt;/em&gt;&lt;/li&gt;
  10860. &lt;li&gt;20:15 &lt;a href=&quot;https://twitter.com/joggink&quot;&gt;Jochen Vandendriessche&lt;/a&gt; over &lt;em&gt;Large Scale JavaScript Design Patterns (and how we use them at De Persgroep)&lt;/em&gt;&lt;/li&gt;
  10861. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  10862. &lt;/ul&gt;
  10863. &lt;p&gt;Dit evenement vindt plaats bij De Persgroep Publishing te Asse (Kobbegem). &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/persgroep&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10864. &lt;h2&gt;Wie?&lt;/h2&gt;
  10865. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 60 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  10866. </content>
  10867.  </entry>
  10868.  <entry>
  10869.    <title>Nieuwjaarsreceptie ISOC</title>
  10870.    <link href="https://www.fronteers.nl/nl/blog/2014/11/nieuwjaarsreceptie-isoc"/>
  10871.    <updated>2014-11-05T00:00:00Z</updated>
  10872.    <id>https://www.fronteers.nl/nl/blog/2014/11/nieuwjaarsreceptie-isoc</id>
  10873.    <content xml:lang="nl" type="html">&lt;p&gt;De datum voor nieuwjaarsborrel, georganiseerd door de overkoepelende organisatie voor internetinstanties, Internet Society Nederland, is bekend: donderdag 8 januari 2015 in de Tolhuistuin in Amsterdam. Je kunt je nu aanmelden. You’re Invited to the 2015 Internet New Year&#39;s Event In Amsterdam!&lt;/p&gt;
  10874. &lt;p&gt;Op de nieuwjaarsreceptie van ISOC Nederland ontmoet je meer dan dertig nationale en internationale spelers uit de internetwereld. Van e-infrastructuur tot .nl, van digitale burgerrechten tot en met digitale certificaten, van toegankelijkheid voor blinden tot hosting providers - iedereen doet mee. En natuurlijk is vakvereniging Fronteers één van die spelers.
  10875. Er zijn hapjes, drankjes, lightning talks en netwerkmogelijkheden. De startijd, het programma en alle details &lt;a href=&quot;http://isoc.nl/activ/2015-newyear.htm&quot;&gt;vind je op de website van ISOC&lt;/a&gt;.&lt;/p&gt;
  10876. &lt;h2&gt;Locatie&lt;/h2&gt;
  10877. &lt;p&gt;De borrel wordt gehouden bij &lt;a href=&quot;http://www.tolhuistuin.nl/de-tolhuistuin/bereikbaarheid&quot;&gt;De Tolhuistuin, Buiksloterweg 5c, 1031 CC Amsterdam&lt;/a&gt;.&lt;/p&gt;
  10878. &lt;h2&gt;Aanmelden bij ISOC&lt;/h2&gt;
  10879. &lt;p&gt;&lt;a href=&quot;http://isoc.nl/activ/2015-newyear.htm&quot;&gt;Aanmelden kan gratis op de website van ISOC&lt;/a&gt;.
  10880. Aanmelden kan niet via de website van Fronteers. Laat Fronteersleden wél weten dat je komt, reageer hieronder en/of tweet met hashtag #fronteers.&lt;/p&gt;
  10881. &lt;h2&gt;Bijdragen of kennis delen?&lt;/h2&gt;
  10882. &lt;p&gt;Wil je spreken, dan kun je een voorstel voor een lightning talk van maximaal 10 minuten mailen aan &lt;a href=&quot;mailto:ny2015pc@ripe.net&quot;&gt;ny2015pc@ripe.net&lt;/a&gt;. Doe dat vóór 15 december 2014.
  10883. Als je een voorstel voor een lightning talk inschiet, zeg er even bij dat je dat namens Fronteers doet.&lt;/p&gt;
  10884. &lt;h2&gt;Vragen?&lt;/h2&gt;
  10885. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/activiteiten&quot;&gt;Neem contact op met de Activiteitencommissie&lt;/a&gt;.&lt;/p&gt;
  10886. </content>
  10887.  </entry>
  10888.  <entry>
  10889.    <title>Bijeenkomst bij Blendle op 25 november 2014</title>
  10890.    <link href="https://www.fronteers.nl/nl/blog/2014/10/bijeenkomst-blendle"/>
  10891.    <updated>2014-10-30T00:00:00Z</updated>
  10892.    <id>https://www.fronteers.nl/nl/blog/2014/10/bijeenkomst-blendle</id>
  10893.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 25 november 2014 is Fronteers te gast bij &lt;a href=&quot;http://www.blendle.nl/&quot;&gt;Blendle&lt;/a&gt; in Utrecht. Er worden twee presentaties gehouden.&lt;/p&gt;
  10894. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  10895. &lt;ul&gt;
  10896. &lt;li&gt;19:00 uur Ontvangst met hapje &amp;amp; drankje &lt;em&gt;(Let op: uurtje later dan normaal.)&lt;/em&gt;&lt;/li&gt;
  10897. &lt;li&gt;19:45 uur Jesse Dijkstra - &amp;quot;Front-end bij Blendle&amp;quot;&lt;/li&gt;
  10898. &lt;li&gt;20:30 uur Korte pauze&lt;/li&gt;
  10899. &lt;li&gt;20:45 uur Paul van Buuren - &amp;quot;Edge Case Design&amp;quot;&lt;/li&gt;
  10900. &lt;li&gt;21:30 uur Borrel&lt;/li&gt;
  10901. &lt;/ul&gt;
  10902. &lt;h2&gt;Waar?&lt;/h2&gt;
  10903. &lt;p&gt;Dit evenement vindt plaats bij Blendle in Utrecht. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/blendle&quot;&gt;Er is een kaart beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10904. &lt;h2&gt;Voor wie?&lt;/h2&gt;
  10905. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 150 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/blendle&quot;&gt;Meld je daarom aan via het aanmeldformulier.&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  10906. </content>
  10907.  </entry>
  10908.  <entry>
  10909.    <title>Algemene Ledenvergadering 2014: 2 december</title>
  10910.    <link href="https://www.fronteers.nl/nl/blog/2014/10/datum-alv"/>
  10911.    <updated>2014-10-29T00:00:00Z</updated>
  10912.    <id>https://www.fronteers.nl/nl/blog/2014/10/datum-alv</id>
  10913.    <content xml:lang="nl" type="html">&lt;p&gt;De datum voor onze jaarlijkse ledenvergadering is bekend: op dinsdagavond 2 december 2014 zullen we alweer voor de achtste keer bij elkaar komen om het reilen en zeilen van de vereniging te bespreken. Reserveer deze avond dus alvast in je agenda.&lt;/p&gt;
  10914. &lt;p&gt;De locatie is dezelfde als vorig jaar: &lt;a href=&quot;http://www.sevenutrecht.nl/&quot;&gt;se7en&lt;/a&gt;, Mariaplaats 7, 3511 LH, in Utrecht. We beginnen hier rond 19 uur en proberen de laatste hamer om 22 uur op tafel te laten landen.&lt;/p&gt;
  10915. &lt;p&gt;Op de exacte agenda komen we later nog terug, maar denk aan de terugkoppeling van &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies&quot;&gt;onze verschillende commissies&lt;/a&gt;, de &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur&quot;&gt;bestuursverkiezing&lt;/a&gt;, en het doornemen van de begroting en nieuwe beleidsvoorstellen.&lt;/p&gt;
  10916. &lt;p&gt;Ook de bestuursverkiezing zal weer gehouden worden. Krijn Hoetmer is dit jaar aan de beurt voor aftreden en zal zich &lt;strike&gt;opnieuw&lt;/strike&gt; &lt;strong&gt;niet&lt;/strong&gt; herkiesbaar stellen. Vasilis van Gemert heeft jammer genoeg besloten zijn rol in het bestuur neer te leggen. Aangezien we van mening zijn dat zes bestuursleden de ideale grootte voor het bestuur is, staan we dus open voor een extra bestuurslid. Volgens onze statuten mag elk lid zich verkiesbaar stellen voor het bestuur en het voornaamste doel van deze blogpost is te vragen of er leden zijn die zich daartoe geroepen voelen. Neem in dat geval &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact met ons op&lt;/a&gt;. Geef kort en bondig aan waarom je in het bestuur zou willen plaatsnemen. Je kandidaat stellen kan tot twee weken voor de ALV, 18 november. De eventueel nieuwe kandidaten voor het bestuur zullen hierna de gelegenheid krijgen hun kandidatuur op het blog toe te lichten.&lt;/p&gt;
  10917. &lt;p&gt;De ideale bestuurskandidaat is iemand die kritisch kan blijven kijken naar alle lopende Fronteers-activiteiten en zowel zelf het voortouw neemt om verbeteringen door te voeren, als andere vrijwilligers weet te motiveren om dit te doen, en zich bij dit alles niet laat demotiveren door de belemmeringen die een organisatie geheel bestaande uit vrijwilligers met zich meebrengt.&lt;/p&gt;
  10918. &lt;p&gt;Op de ALV kunnen alle aanwezige leden op alle, sommige, of geen van de kandidaten stemmen. Alle kandidaten die meer dan 50% van de uitgebrachte stemmen krijgen, worden in het bestuur verkozen. (Mochten er dusdanig veel kandidaten zijn dat het resulterende bestuur groter zou kunnen worden dan wenselijk, dan zal het bestuur aan de ALV voorstellen die stemprocedure aan te passen.) Het nieuwe bestuur kiest vervolgens uit haar midden een voorzitter, secretaris en penningmeester.&lt;/p&gt;
  10919. &lt;p&gt;Als je vragen, opmerkingen en/of voorstellen hebt, of je je aan wilt melden als potentieel bestuurslid, neem dan &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact met ons op&lt;/a&gt;.&lt;/p&gt;
  10920. </content>
  10921.  </entry>
  10922.  <entry>
  10923.    <title>Bijeenkomst bij Q42 op 5 november</title>
  10924.    <link href="https://www.fronteers.nl/nl/blog/2014/10/bijeenkomst-q42"/>
  10925.    <updated>2014-10-15T00:00:00Z</updated>
  10926.    <id>https://www.fronteers.nl/nl/blog/2014/10/bijeenkomst-q42</id>
  10927.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 5 november 2014 is Fronteers te gast bij &lt;a href=&quot;http://www.q42.nl/&quot;&gt;Q42&lt;/a&gt; in Amsterdam. Er worden twee presentaties gehouden.&lt;/p&gt;
  10928. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  10929. &lt;ul&gt;
  10930. &lt;li&gt;18:00 uur Ontvangst met hapje &amp;amp; drankje&lt;/li&gt;
  10931. &lt;li&gt;19:00 uur Roelf-Jan de Vries - &amp;quot;Designing &amp;amp; developing voor de unhappy flow&amp;quot;&lt;/li&gt;
  10932. &lt;li&gt;19:30 uur Korte pauze&lt;/li&gt;
  10933. &lt;li&gt;19:45 uur Martin Kool - &amp;quot;Case study: Mobile in Afrika&amp;quot;&lt;/li&gt;
  10934. &lt;li&gt;20:15 uur Borrel&lt;/li&gt;
  10935. &lt;/ul&gt;
  10936. &lt;h2&gt;Waar?&lt;/h2&gt;
  10937. &lt;p&gt;Dit evenement vindt plaats bij Q42 in Amsterdam. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/q42&quot;&gt;Er is een kaart beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10938. &lt;h2&gt;Voor wie?&lt;/h2&gt;
  10939. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/q42&quot;&gt;Meld je daarom aan via het aanmeldformulier.&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  10940. </content>
  10941.  </entry>
  10942.  <entry>
  10943.    <title>Bijeenkomst bij internetbureau WHITE op 29 oktober</title>
  10944.    <link href="https://www.fronteers.nl/nl/blog/2014/10/bijeenkomst-white"/>
  10945.    <updated>2014-10-01T00:00:00Z</updated>
  10946.    <id>https://www.fronteers.nl/nl/blog/2014/10/bijeenkomst-white</id>
  10947.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 29 oktober 2014 is Fronteers te gast bij &lt;a href=&quot;http://www.white.nl/&quot;&gt;internetbureau WHITE&lt;/a&gt; in Valkenswaard. Er worden twee presentaties gehouden.&lt;/p&gt;
  10948. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  10949. &lt;ul&gt;
  10950. &lt;li&gt;18:00 uur Ontvangst met hapje &amp;amp; drankje&lt;/li&gt;
  10951. &lt;li&gt;19:00 uur Simon de Turck - &amp;quot;An introduction to AngularJS&amp;quot;&lt;/li&gt;
  10952. &lt;li&gt;19:45 uur Korte pauze&lt;/li&gt;
  10953. &lt;li&gt;20:00 uur Bob Donderwinkel - &amp;quot;De voordelen van BEM (Block, Element, Modifier) CSS&amp;quot;&lt;/li&gt;
  10954. &lt;li&gt;20:45 uur Borrel&lt;/li&gt;
  10955. &lt;/ul&gt;
  10956. &lt;h2&gt;Waar?&lt;/h2&gt;
  10957. &lt;p&gt;Dit evenement vindt plaats bij internetbureau WHITE in Valkenswaard. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/white&quot;&gt;Er is een kaart beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10958. &lt;h2&gt;Voor wie?&lt;/h2&gt;
  10959. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/white&quot;&gt;Meld je daarom aan via het aanmeldformulier.&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  10960. </content>
  10961.  </entry>
  10962.  <entry>
  10963.    <title>Met 25 euro korting naar dsgnday</title>
  10964.    <link href="https://www.fronteers.nl/nl/blog/2014/09/korting-dsgnday"/>
  10965.    <updated>2014-09-30T00:00:00Z</updated>
  10966.    <id>https://www.fronteers.nl/nl/blog/2014/09/korting-dsgnday</id>
  10967.    <content xml:lang="nl" type="html">&lt;p&gt;Op 11 november wordt in Amsterdam het &lt;a href=&quot;http://dsgnday.nl/&quot;&gt;dsgnday&lt;/a&gt;-congres georganiseerd: een dag met acht sprekers over grafisch en UX design op het web. Bij alle presentaties ligt de focus op directe toepasbaarheid; een inspirerend verhaal is allemaal leuk en aardig, maar als je het niet kan toepassen in je dagelijkse werk, heeft het weinig praktisch nut.&lt;/p&gt;
  10968. &lt;p&gt;Mark Boulton, Leisa Reichelt, Mike Rohde, Val Head, Stephen Hay, Bonny Colville-Hyde, Peter Boersma en Laura Kalbag zullen hun praktische tips en truuks delen, variërend van het werken met grote opdrachtgevers zoals de overheid, via het praktische nut van animaties naar het zorgen dat je ontwerp ook toegankelijk is - zonder het lelijk te maken.&lt;/p&gt;
  10969. &lt;p&gt;Geïnteresseerd? Fronteers-leden krijgen €25 korting op de reguliere toegangsprijs van €275. Bij je kaartje zijn koffie, lunch, en een drankje na afloop inbegrepen.&lt;/p&gt;
  10970. &lt;p&gt;Mocht je hiervan gebruik willen maken, neem dan even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact op&lt;/a&gt; met de ledenadministratie. Zoals gebruikelijk geldt deze actie alleen voor leden die op dit moment al lid zijn.&lt;/p&gt;
  10971. </content>
  10972.  </entry>
  10973.  <entry>
  10974.    <title>10% korting op Node.js training door Mirabeau</title>
  10975.    <link href="https://www.fronteers.nl/nl/blog/2014/09/korting-node-js-training-mirabeau"/>
  10976.    <updated>2014-09-29T00:00:00Z</updated>
  10977.    <id>https://www.fronteers.nl/nl/blog/2014/09/korting-node-js-training-mirabeau</id>
  10978.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 15 oktober geeft Mirabeau in Utrecht een &lt;a href=&quot;https://www.mirabeau.nl/nieuws/persbericht/2014/2014-08-22-programma-training-mirabeau-node-js&quot;&gt;Node.js training&lt;/a&gt; onder leiding van Bran van der Meer en Niek Bosch. Leden van Fronteers kunnen hier met 10% korting heen.&lt;/p&gt;
  10979. &lt;p&gt;JavaScript is de lingua franca van het web geworden nu het met Node.js nog meer terrein aan het winnen is. Node.js pakt schaalbaarheid op een revolutionaire manier aan en levert daardoor een erg goede performance. Voorwaarde is wél dat je het voor de juiste zaken inzet.&lt;/p&gt;
  10980. &lt;p&gt;Steeds meer grote bedrijven zetten Node.js in als REST endpoint, UI layer, en andere micro-services. De open source community is groot en groeit snel, maar het ontwikkelen van server-side JavaScript is iets heel anders dan het ontwikkelen van in-browser JavaScript.&lt;/p&gt;
  10981. &lt;p&gt;De kosten voor deze dag training zijn € 295,- per persoon. Voor leden wordt dit dus € 265,50. Lees voor meer informatie de &lt;a href=&quot;https://www.mirabeau.nl/nieuws/persbericht/2014/2014-08-22-programma-training-mirabeau-node-js&quot;&gt;aankondiging op mirabeau.nl&lt;/a&gt;.&lt;/p&gt;
  10982. </content>
  10983.  </entry>
  10984.  <entry>
  10985.    <title>Bijeenkomst op 23 oktober bij Wijs</title>
  10986.    <link href="https://www.fronteers.nl/nl/blog/2014/09/bijeenkomst-wijs"/>
  10987.    <updated>2014-09-18T00:00:00Z</updated>
  10988.    <id>https://www.fronteers.nl/nl/blog/2014/09/bijeenkomst-wijs</id>
  10989.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 23 oktober 2014 is Fronteers te gast bij Wijs in Gent. Er worden drie presentaties voorzien.&lt;/p&gt;
  10990. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  10991. &lt;ul&gt;
  10992. &lt;li&gt;18:00 ontvangst met een drankje&lt;/li&gt;
  10993. &lt;li&gt;19:00 Stephen Verhalleman over &lt;em&gt;werken bij Yelp&lt;/em&gt;&lt;/li&gt;
  10994. &lt;li&gt;19:45 Simon Coudeville over &lt;em&gt;design in de browser&lt;/em&gt;&lt;/li&gt;
  10995. &lt;li&gt;20:30 Gwen Vanhee over &lt;em&gt;creatieve code-experimenten&lt;/em&gt;&lt;/li&gt;
  10996. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  10997. &lt;/ul&gt;
  10998. &lt;p&gt;Dit evenement vindt plaats bij Wijs te Gent. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/wijs&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  10999. &lt;h2&gt;Wie?&lt;/h2&gt;
  11000. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen.  Vol is vol!&lt;/p&gt;
  11001. </content>
  11002.  </entry>
  11003.  <entry>
  11004.    <title>10 extra Fronteers 2014 tickets</title>
  11005.    <link href="https://www.fronteers.nl/nl/blog/2014/09/10-extra-fronteers-2014-tickets"/>
  11006.    <updated>2014-09-16T00:00:00Z</updated>
  11007.    <id>https://www.fronteers.nl/nl/blog/2014/09/10-extra-fronteers-2014-tickets</id>
  11008.    <content xml:lang="nl" type="html">&lt;p&gt;Volgende week vrijdag zullen 10 extra tickets voor Fronteers 2014 de verkoop in gaan; initieel alleen voor leden, mochten die na 24 uur nog niet allemaal verkocht zijn, ook voor niet-leden. Zie &lt;a href=&quot;https://www.fronteers.nl/congres/2014/news/10-more-tickets-available&quot;&gt;het nieuwsbericht&lt;/a&gt; op het congresgedeelte van de site voor details.&lt;/p&gt;
  11009. </content>
  11010.  </entry>
  11011.  <entry>
  11012.    <title>Bijeenkomst op 24 september bij Incentro</title>
  11013.    <link href="https://www.fronteers.nl/nl/blog/2014/08/bijeenkomst-incentro"/>
  11014.    <updated>2014-08-29T00:00:00Z</updated>
  11015.    <id>https://www.fronteers.nl/nl/blog/2014/08/bijeenkomst-incentro</id>
  11016.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 24 september is Fronteers te gast bij Incentro in Amsterdam. Er worden drie presentaties voorzien.&lt;/p&gt;
  11017. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11018. &lt;ul&gt;
  11019. &lt;li&gt;18:00 Inloop en eten&lt;/li&gt;
  11020. &lt;li&gt;18:45 Modulair ontwikkelen met Angularjs - Kasper Reijnders&lt;/li&gt;
  11021. &lt;li&gt;19:00 Frontend Maturity Model - Steven Chim&lt;/li&gt;
  11022. &lt;li&gt;19:45 Korte pauze&lt;/li&gt;
  11023. &lt;li&gt;20:00 Mobile Viewports - Peter-Paul Koch&lt;/li&gt;
  11024. &lt;li&gt;21:00 Borrel&lt;/li&gt;
  11025. &lt;/ul&gt;
  11026. &lt;p&gt;Dit evenement vindt plaats bij Incentro in Amsterdam. Lees meer op de &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/2014/incentro&quot;&gt;pagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  11027. &lt;h2&gt;Wie?&lt;/h2&gt;
  11028. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 30 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/incentro&quot;&gt;Meld je daarom aan via het aanmeldformulier.&lt;/a&gt;. Vol is vol, er wordt wel een oplossing gezocht als er veel aanmeldingen zijn.&lt;/p&gt;
  11029. </content>
  11030.  </entry>
  11031.  <entry>
  11032.    <title>30% korting op ColdFront in Kopenhagen</title>
  11033.    <link href="https://www.fronteers.nl/nl/blog/2014/08/korting-coldfront"/>
  11034.    <updated>2014-08-05T00:00:00Z</updated>
  11035.    <id>https://www.fronteers.nl/nl/blog/2014/08/korting-coldfront</id>
  11036.    <content xml:lang="nl" type="html">&lt;p&gt;We hebben weer een leuke korting voor onze leden! Deze keer voor &lt;a href=&quot;http://coldfrontconf.com/&quot;&gt;ColdFront&lt;/a&gt;, dat op donderdag 4 september (volgende maand al) plaatsvindt in Kopenhagen, Denemarken. De organisatie hierachter komt al een aantal jaar naar ons congres en wilde al een hele tijd ook zoiets organiseren in Denemarken. We hopen dus van harte dat dit ze gaat lukken!&lt;/p&gt;
  11037. &lt;p&gt;De line-up bestaat uit Kasper Lund, Erik Bryn, Bruce Lawson, Phil Hawksworth, Nat Buckley, Guillermo Rauch, Peter Hedenskog en Christian Heilmann. Op de avond voor het congres vindt ook een soort jam session plaats, waar je zelf een praatje kunt houden. Alle informatie is te vinden op &lt;a href=&quot;http://coldfrontconf.com/&quot;&gt;coldfrontconf.com&lt;/a&gt;.&lt;/p&gt;
  11038. &lt;p&gt;Een kaartje kost normaal 1.875 Deense Kronen (ongeveer €250), maar met 30% korting wordt dit 1.312,50 Kronen (zo&#39;n €175).&lt;/p&gt;
  11039. &lt;p&gt;Mocht je hiervan gebruik willen maken, neem dan even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact op met de ledenadministratie&lt;/a&gt;. Zoals gebruikelijk geldt deze actie alleen voor leden die op dit moment al lid zijn.&lt;/p&gt;
  11040. </content>
  11041.  </entry>
  11042.  <entry>
  11043.    <title>Fronteers-BBQ 8 augustus</title>
  11044.    <link href="https://www.fronteers.nl/nl/blog/2014/07/fronteers-bbq"/>
  11045.    <updated>2014-07-01T00:00:00Z</updated>
  11046.    <id>https://www.fronteers.nl/nl/blog/2014/07/fronteers-bbq</id>
  11047.    <content xml:lang="nl" type="html">&lt;p&gt;Op 8 augustus organiseert de activiteitencommissie een BBQ in Utrecht. Meld je nu aan!&lt;/p&gt;
  11048. &lt;p&gt;Vanaf 17:30 uur kun je borrelen en BBQ-en met de leden Fronteers! Introducés zijn van harte welkom. Je kunt je &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/bbq&quot;&gt;aanmelden op deze pagina&lt;/a&gt;.&lt;/p&gt;
  11049. </content>
  11050.  </entry>
  11051.  <entry>
  11052.    <title>Korting op boeken voor onze leden</title>
  11053.    <link href="https://www.fronteers.nl/nl/blog/2014/06/korting-op-boeken-voor-onze-leden"/>
  11054.    <updated>2014-06-11T00:00:00Z</updated>
  11055.    <id>https://www.fronteers.nl/nl/blog/2014/06/korting-op-boeken-voor-onze-leden</id>
  11056.    <content xml:lang="nl" type="html">&lt;p&gt;Er zitten mooie voordelen aan het Fronteers-lidmaatschap. Zo krijg je korting op &lt;a href=&quot;https://www.fronteers.nl/congres&quot;&gt;het congres&lt;/a&gt;, korting op &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten&quot;&gt;onze workshops&lt;/a&gt; (en op &lt;a href=&quot;https://www.fronteers.nl/blog/categorieen/ledenkorting&quot;&gt;die van anderen&lt;/a&gt;), je kunt met je vragen terecht op &lt;a href=&quot;https://forum.fronteers.nl/&quot;&gt;ons forum&lt;/a&gt;, en je kan actief een bijdrage leveren aan de professionalisering van ons vakgebied. Maar natuurlijk zijn we altijd op zoek naar meer voordelen. Vandaar dat we een aantal uitgeverijen hebben benaderd met de vraag of we korting kunnen krijgen.&lt;/p&gt;
  11057. &lt;p&gt;Dat kan. Zo hebben we &lt;a href=&quot;https://www.fronteers.nl/vereniging/korting-op-boeken&quot;&gt;mooie kortingen weten te regelen&lt;/a&gt; bij O’Reilly, Peachpit, Smashing Magazine, Rosenfeld Media, Manning en No Starch Press, en zijn we in onderhandeling met nog meer relevante uitgevers. De kortingen lopen uiteen van 20% tot 50%, wat natuurlijk fantastisch is. Nu heb je geen enkele reden meer om je &lt;em&gt;niet&lt;/em&gt; te verdiepen.&lt;/p&gt;
  11058. &lt;h2&gt;Meer&lt;/h2&gt;
  11059. &lt;p&gt;Natuurlijk willen we korting geven op meer boeken. Een aantal van de uitgeverijen die we hebben benaderd kunnen helaas geen korting geven. Maar we hebben ze vast niet allemaal bereikt. Ken je nog uitgevers die we moeten benaderen? Suggesties zijn meer dan welkom via het reactieformulier.&lt;/p&gt;
  11060. </content>
  11061.  </entry>
  11062.  <entry>
  11063.    <title>Student, win kaarten voor het congres!</title>
  11064.    <link href="https://www.fronteers.nl/nl/blog/2014/06/student-win-kaarten-voor-het-congres"/>
  11065.    <updated>2014-06-10T00:00:00Z</updated>
  11066.    <id>https://www.fronteers.nl/nl/blog/2014/06/student-win-kaarten-voor-het-congres</id>
  11067.    <content xml:lang="nl" type="html">&lt;p&gt;Hoewel het Fronteers congres 2014 al lang en breed is uitverkocht kun je als &lt;em&gt;student&lt;/em&gt; nog kaarten bemachtigen. Omdat we het belangrijk vinden dat de volgende generatie front-end developers weet wat er allemaal speelt, en contact krijgt met professionals, hebben we &lt;em&gt;maximaal&lt;/em&gt; 10 kaarten om weg te geven aan de meest gemotiveerde studenten! Daar moet je natuurlijk wel wat voor doen.&lt;/p&gt;
  11068. &lt;p&gt;Sinds 2008 wordt er jaarlijks een &lt;a href=&quot;https://www.fronteers.nl/congres&quot;&gt;Fronteers congres&lt;/a&gt; gehouden in Amsterdam. Het is een hoog aangeschreven congres met bezoekers en sprekers van over de hele wereld. Twee dagen lang vertellen internationale spekers waar het heen gaat op het gebied van front-end development. De &lt;em&gt;talks&lt;/em&gt; zijn altijd van hoog, technisch niveau, met onderwerpen variërend van &lt;em&gt;real-time JavaScript parsing&lt;/em&gt;, via web-typografie tot toegankelijkheid. Om een beeld te krijgen, &lt;a href=&quot;https://www.fronteers.nl/videos?type=conference&quot;&gt;de video&#39;s van vorige jaren zijn allemaal terug te kijken&lt;/a&gt;.&lt;/p&gt;
  11069. &lt;p&gt;Overigens doet Fronteers veel meer dan alleen een congres organiseren. Zo zijn er bijvoorbeeld &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten&quot;&gt;regelmatige bijeenkomsten&lt;/a&gt; in Nederland en België. Deze zijn altijd gratis te bezoeken, ook voor mensen die geen lid zijn. Erg interessant voor studenten die eens kennis willen maken met meer mensen uit het vakgebied. Onze leden krijgen bovendien interessante kortingen, bijvoorbeeld voor &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten&quot;&gt;onze workshops&lt;/a&gt;. Studenten &lt;a href=&quot;https://www.fronteers.nl/inschrijven&quot;&gt;kunnen met korting lid worden&lt;/a&gt;.&lt;/p&gt;
  11070. &lt;h2&gt;Hoe kan je winnen?&lt;/h2&gt;
  11071. &lt;ul&gt;
  11072. &lt;li&gt;Omschrijf in maximaal 10 zinnen hoe de Fronteers conferentie kan bijdragen aan je ontwikkeling als professional. Wees creatief!&lt;/li&gt;
  11073. &lt;li&gt;Voeg een link toe naar je eigen site, of github, of een ander online portfolio.&lt;/li&gt;
  11074. &lt;li&gt;Stuur een link naar je bijdrage voor 1 september via &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;het formulier op onze contactpagina&lt;/a&gt; (kies als onderwerp &lt;em&gt;Onderwijs&lt;/em&gt;)&lt;/li&gt;
  11075. &lt;li&gt;Als we je bijdrage willen belonen dan zullen we je vragen om een (bewijs van inschrijving van Hogeschool, Universiteit of Middelbaar Beroepsonderwijs)&lt;/li&gt;
  11076. &lt;/ul&gt;
  11077. &lt;p&gt;Op 15 september worden de eventuele winnaars via Twitter kenbaar gemaakt. Als je hebt gewonnen krijg je natuurlijk ook persoonlijk bericht. Beoordeling van de inzendingen gebeurt door een groep docenten en professionals.&lt;/p&gt;
  11078. &lt;h2&gt;Voorwaarden&lt;/h2&gt;
  11079. &lt;ul&gt;
  11080. &lt;li&gt;De kaart is persoonlijk en je mag hem niet doorverkopen. Neem dus een ID mee naar het congres!&lt;/li&gt;
  11081. &lt;li&gt;De wedstrijd is alleen toegankelijk voor studenten die onderwijs volgen aan Hogeschool, Universiteit of Middelbaar beroepsonderwijs in Nederland of België.&lt;/li&gt;
  11082. &lt;/ul&gt;
  11083. </content>
  11084.  </entry>
  11085.  <entry>
  11086.    <title>Met 20% korting naar Dutch Digital Day</title>
  11087.    <link href="https://www.fronteers.nl/nl/blog/2014/06/met-20-korting-naar-dutch-digital-day"/>
  11088.    <updated>2014-06-06T00:00:00Z</updated>
  11089.    <id>https://www.fronteers.nl/nl/blog/2014/06/met-20-korting-naar-dutch-digital-day</id>
  11090.    <content xml:lang="nl" type="html">&lt;p&gt;Op 27 juni organiseert PIBN de &lt;a href=&quot;http://dutchdigitalday.com/&quot;&gt;Dutch Digital Day&lt;/a&gt;. Vanaf 13:30 uur kun je je daar onder andere tegoed doen aan internationale sprekers, gadgets en een borrel met barbecue. En dat alles op Undercurrent, een drijvende loods op het IJ in Amsterdam. Leden van Fronteers krijgen 20% korting op de ticketprijs.&lt;/p&gt;
  11091. &lt;p&gt;Als lid betaal je 80 euro (excl. 6,75 reserveringskosten; voorwaarde is dat je vóór 5 juni al lid was van Fronteers). Wil je graag naar Dutch Digital Day? &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;Neem dan contact op met de ledenadministratie&lt;/a&gt; voor de kortingscode, en &lt;a href=&quot;http://dutchdigitalday.com/tickets&quot;&gt;koop daarna je ticket&lt;/a&gt;.&lt;/p&gt;
  11092. </content>
  11093.  </entry>
  11094.  <entry>
  11095.    <title>Bijeenkomst op 19 juni bij Cronos</title>
  11096.    <link href="https://www.fronteers.nl/nl/blog/2014/06/bijeenkomst-cronos"/>
  11097.    <updated>2014-06-06T00:00:00Z</updated>
  11098.    <id>https://www.fronteers.nl/nl/blog/2014/06/bijeenkomst-cronos</id>
  11099.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 19 juni 2014 is Fronteers te gast bij Cronos in Kontich. Er worden twee presentaties voorzien.&lt;/p&gt;
  11100. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11101. &lt;ul&gt;
  11102. &lt;li&gt;18:00 ontvangst met een drankje&lt;/li&gt;
  11103. &lt;li&gt;19:00 Dimitri Mestdagh over &lt;em&gt;JavaScript at your enterprise&lt;/em&gt;&lt;/li&gt;
  11104. &lt;li&gt;20:00 Bram(us) Van Damme over &lt;em&gt;terugkeren naar de roots van JavaScript&lt;/em&gt;&lt;/li&gt;
  11105. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  11106. &lt;/ul&gt;
  11107. &lt;p&gt;Dit evenement vindt plaats bij Cronos te Kontich. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/cronos&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  11108. &lt;h2&gt;Wie?&lt;/h2&gt;
  11109. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 40 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/cronos&quot;&gt;Meld je daarom aan via het aanmeldformulier.&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  11110. </content>
  11111.  </entry>
  11112.  <entry>
  11113.    <title>Spontaanborrel 30 mei</title>
  11114.    <link href="https://www.fronteers.nl/nl/blog/2014/05/spontaanborrel"/>
  11115.    <updated>2014-05-29T00:00:00Z</updated>
  11116.    <id>https://www.fronteers.nl/nl/blog/2014/05/spontaanborrel</id>
  11117.    <content xml:lang="nl" type="html">&lt;p&gt;Op 30 mei is er weer een spontaanborrel in Utrecht.&lt;/p&gt;
  11118. &lt;p&gt;De spontaanborrel, wat kan je er nog meer over zeggen. Kom gezellig een biertje pakken, vrijdag (30 mei) vanaf een uur of vijf! Na de workshop lopen we de stad in, vanuit Seats2meet in HoogCatharijne. Wil jij meedoen, zomaar even vrijmibo-en? Alleen borrelen of nog wat eten? Verzamel bij Seats2meet, geef hieronder je reactie of zoek op #fronteers in Twitter en weet ons te vinden.&lt;/p&gt;
  11119. </content>
  11120.  </entry>
  11121.  <entry>
  11122.    <title>30% korting op het Nationaal Congres Digitale Toegankelijkheid 2014</title>
  11123.    <link href="https://www.fronteers.nl/nl/blog/2014/05/korting-nationaal-congres-digitale-toegankelijkheid-2014"/>
  11124.    <updated>2014-05-29T00:00:00Z</updated>
  11125.    <id>https://www.fronteers.nl/nl/blog/2014/05/korting-nationaal-congres-digitale-toegankelijkheid-2014</id>
  11126.    <content xml:lang="nl" type="html">&lt;p&gt;Op 29 oktober 2014 vindt het Nationaal Congres Digitale Toegankelijkheid plaats in Utrecht. Leden van Fronteers krijgen 30 procent korting op de toegangsprijs van €299,- en betalen dus €209,30 (exclusief BTW).&lt;/p&gt;
  11127. &lt;p&gt;Op het programma staat onder andere:&lt;/p&gt;
  11128. &lt;ul&gt;
  11129. &lt;li&gt;Accessible TV for Everyone, Anywhere door Gareth Ford Williams van de BBC&lt;/li&gt;
  11130. &lt;li&gt;Webtoegankelijkheid en governance door Wiep Hamstra&lt;/li&gt;
  11131. &lt;li&gt;Web accessibility in 2020 door Eric Velleman&lt;/li&gt;
  11132. &lt;li&gt;Toegankelijke documenten door Han Sinke&lt;/li&gt;
  11133. &lt;li&gt;Schrijven voor toptaken door Ger Dreijer&lt;/li&gt;
  11134. &lt;li&gt;Video toegankelijk maken&lt;/li&gt;
  11135. &lt;li&gt;Geo-informatie: bruikbaar, vindbaar en toegankelijk door Thijs Brentjens&lt;/li&gt;
  11136. &lt;li&gt;Gewoon Toegankelijk: een nieuw monitoringsysteem voor overheden&lt;/li&gt;
  11137. &lt;/ul&gt;
  11138. &lt;p&gt;Naast de presentaties is er dit jaar een ook een aantal technische sessies:&lt;/p&gt;
  11139. &lt;ul&gt;
  11140. &lt;li&gt;WAI-ARIA door Wilco Fiers&lt;/li&gt;
  11141. &lt;li&gt;Graphics on the fly door Jules Ernst&lt;/li&gt;
  11142. &lt;li&gt;Accessible apps door Brian Bors&lt;/li&gt;
  11143. &lt;/ul&gt;
  11144. &lt;p&gt;Meer informatie: &lt;a href=&quot;http://www.ncdt.nl/&quot;&gt;www.ncdt.nl&lt;/a&gt;&lt;/p&gt;
  11145. &lt;p&gt;Er zijn tien kortingscodes beschikbaar. Wie het eerst komt, het eerst maalt. Neem &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact&lt;/a&gt; op, en we sturen de code zo spoedig mogelijk naar je op. Zoals gebruikelijk, geldt deze korting alleen voor leden dit op dit moment al lid zijn.
  11146. Voor early birds (1e 50 inschrijvers) geldt dubbele korting: dan kun je deelnemen voor € 174,30.&lt;/p&gt;
  11147. </content>
  11148.  </entry>
  11149.  <entry>
  11150.    <title>Bijeenkomst bij Coolblue op 24 juni</title>
  11151.    <link href="https://www.fronteers.nl/nl/blog/2014/05/bijeenkomst-coolblue"/>
  11152.    <updated>2014-05-28T00:00:00Z</updated>
  11153.    <id>https://www.fronteers.nl/nl/blog/2014/05/bijeenkomst-coolblue</id>
  11154.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 24 juni 2014 is Fronteers te gast bij &lt;a href=&quot;http://www.coolblue.nl/&quot;&gt;Coolblue&lt;/a&gt; in Rotterdam. Er worden twee presentaties gehouden.&lt;/p&gt;
  11155. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  11156. &lt;ul&gt;
  11157. &lt;li&gt;18:00 uur Ontvangst met hapje &amp;amp; drankje&lt;/li&gt;
  11158. &lt;li&gt;19:00 uur Welkomstwoord door Fronteers &amp;amp; Coolblue&lt;/li&gt;
  11159. &lt;li&gt;19:05 uur Frank van Boven &amp;amp; Marijn de Römph - &amp;quot;Keep it Simple Stupid!&amp;quot;&lt;/li&gt;
  11160. &lt;li&gt;19:50 uur Korte pauze&lt;/li&gt;
  11161. &lt;li&gt;20:00 uur Reinier Ladan - Research, development en professioneel aanklooien&lt;/li&gt;
  11162. &lt;li&gt;20:45 uur Borrel&lt;/li&gt;
  11163. &lt;li&gt;21:30 uur Einde&lt;/li&gt;
  11164. &lt;/ul&gt;
  11165. &lt;h2&gt;Waar?&lt;/h2&gt;
  11166. &lt;p&gt;Dit evenement vindt plaats bij Coolblue in Rotterdam. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/coolblue&quot;&gt;Er is een map beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  11167. &lt;h2&gt;Voor wie?&lt;/h2&gt;
  11168. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/coolblue&quot;&gt;Meld je daarom aan via het aanmeldformulier.&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  11169. </content>
  11170.  </entry>
  11171.  <entry>
  11172.    <title>15% Ledenkorting op online Advanced Sass workshop</title>
  11173.    <link href="https://www.fronteers.nl/nl/blog/2014/05/ledenkorting-op-advanced-sass-workshop"/>
  11174.    <updated>2014-05-19T00:00:00Z</updated>
  11175.    <id>https://www.fronteers.nl/nl/blog/2014/05/ledenkorting-op-advanced-sass-workshop</id>
  11176.    <content xml:lang="nl" type="html">&lt;p&gt;Op 12 en 19 juni geeft Roy Tomeij een 5 uur durende &lt;a href=&quot;http://sassworkshop.com/&quot;&gt;online Advanced Sass workshop&lt;/a&gt;. De workshop is geschikt voor ontwikkelaars die al regelmatig met Sass werken, en gaat dieper in op &amp;quot;programmeren met Sass&amp;quot;, right-to-left layouts, media query management en nog veel meer. Daarnaast is er aandacht voor slechte, maar wel leuke experimentele code.&lt;/p&gt;
  11177. &lt;p&gt;De workshops worden online gegeven. De workshop van 12 juni begint om 18 uur Nederlandse tijd en die van 19 juni om 10 uur. Leden krijgen 15% korting. Voor een kortingscode kun je &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact opnemen met de ledenadministratie&lt;/a&gt;, waarna je kunt inschrijven via &lt;a href=&quot;http://sassworkshop.com/&quot;&gt;SassWorkshop.com&lt;/a&gt;.&lt;/p&gt;
  11178. </content>
  11179.  </entry>
  11180.  <entry>
  11181.    <title>10% korting voor een serie masterclasses voor front-end developers</title>
  11182.    <link href="https://www.fronteers.nl/nl/blog/2014/05/korting-voor-masterclasses-front-end-developers"/>
  11183.    <updated>2014-05-15T00:00:00Z</updated>
  11184.    <id>https://www.fronteers.nl/nl/blog/2014/05/korting-voor-masterclasses-front-end-developers</id>
  11185.    <content xml:lang="nl" type="html">&lt;p&gt;&lt;em&gt;LSG Career Center&lt;/em&gt; organiseert samen met Vasilis van Gemert een &lt;a href=&quot;http://www.lsgcareercenter.nl/trainingen/masterclass-frontend-development&quot;&gt;serie masterclasses&lt;/a&gt; met als doel meer front-end developers op weg te helpen naar een senior niveau. Fronteers-leden krijgen een korting van 10%. Deelnemers volgen om de paar weken een masterclass over een specifiek onderwerp, telkens gegeven door een expert op dat gebied. De serie gaat van start in september en wordt telkens gehouden in Utrecht.&lt;/p&gt;
  11186. &lt;p&gt;Als je kijkt naar de &lt;a href=&quot;https://www.fronteers.nl/nl/werk-en-freelance/&quot;&gt;vacaturebank&lt;/a&gt; hier op de Fronteers-site dan zie je dat er steeds meer vraag is naar senior front-end developers. Er wordt steevast gevraagd om mensen die &lt;em&gt;of&lt;/em&gt; alles kunnen, of om mensen die op strategisch niveau mee kunnen denken en mee kunnen werken in een multidisciplinair team. En je ziet ook dat het erg lastig is om de juiste mensen te vinden voor deze functies. De senior developers die er zijn hebben vaak een prima baan en hebben dus geen behoefte aan iets anders. Of ze verdienen bakken met geld als drukke freelancer en hebben helemaal geen behoefte aan een baas. Allemaal tekenen van een tekort. Deze serie masterclasses is bedoeld om meer mensen op weg te helpen naar dat senior niveau.&lt;/p&gt;
  11187. &lt;h2&gt;Leren&lt;/h2&gt;
  11188. &lt;p&gt;De tofste manier om te groeien naar dit niveau is door het te leren van vakidioten. Door vier uur lang doorgezaagd te worden over JavaScript door Peter van der Zee. Door tot in detail naar de verschillende viewports te kijken met Peter-Paul Koch. Door samen met Maaike de Laat en Robert Jan Verkade te onderzoeken wat designers nu eigenlijk belangrijk vinden. Door het hoe en waarom van &lt;em&gt;performance&lt;/em&gt; echt te doorgronden samen met Mathias Bynens. Door manieren te vinden om om te gaan met de chaotische eigenschappen van het web samen met Vasilis van Gemert. Of door onze huidige en toekomstige tools aan een kritische blik te onderwerpen met Stephen Hay.&lt;/p&gt;
  11189. &lt;h2&gt;Korting&lt;/h2&gt;
  11190. &lt;p&gt;Fronteers-leden krijgen een korting van 10%. Wil je gebruik maken van deze korting, &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;neem dan even contact op&lt;/a&gt; met de ledenadministratie. Je kan je &lt;a href=&quot;http://www.lsgcareercenter.nl/trainingen/masterclass-frontend-development&quot;&gt;inschrijven voor de masterclasses&lt;/a&gt; op de site van LSG Career Center.&lt;/p&gt;
  11191. </content>
  11192.  </entry>
  11193.  <entry>
  11194.    <title>Bijeenkomst op 22 mei bij Ordina</title>
  11195.    <link href="https://www.fronteers.nl/nl/blog/2014/05/bijeenkomst-ordina"/>
  11196.    <updated>2014-05-08T00:00:00Z</updated>
  11197.    <id>https://www.fronteers.nl/nl/blog/2014/05/bijeenkomst-ordina</id>
  11198.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 22 mei 2014 is Fronteers te gast bij Ordina in Mechelen. Er worden drie presentaties voorzien.&lt;/p&gt;
  11199. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11200. &lt;ul&gt;
  11201. &lt;li&gt;18:00 ontvangst met broodjes en een drankje&lt;/li&gt;
  11202. &lt;li&gt;19:00 Pieter Beulque over &lt;em&gt;Gulp&lt;/em&gt;&lt;/li&gt;
  11203. &lt;li&gt;19:45 Frank Baele over &lt;em&gt;Grunt workflows&lt;/em&gt;&lt;/li&gt;
  11204. &lt;li&gt;20:30 Gregory Van Looy over &lt;em&gt;Maintainable en scalable CSS&lt;/em&gt;&lt;/li&gt;
  11205. &lt;li&gt;21:15 naborrelen&lt;/li&gt;
  11206. &lt;/ul&gt;
  11207. &lt;p&gt;Dit evenement vindt plaats bij Ordina te Mechelen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/ordina&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  11208. &lt;h2&gt;Wie?&lt;/h2&gt;
  11209. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 60 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/ordina&quot;&gt;Meld je daarom aan via het aanmeldformulier.&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  11210. </content>
  11211.  </entry>
  11212.  <entry>
  11213.    <title>Bijeenkomst op 8 mei bij Competa</title>
  11214.    <link href="https://www.fronteers.nl/nl/blog/2014/04/bijeenkomst-competa"/>
  11215.    <updated>2014-04-18T00:00:00Z</updated>
  11216.    <id>https://www.fronteers.nl/nl/blog/2014/04/bijeenkomst-competa</id>
  11217.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 8 mei 2014 is Fronteers te gast bij &lt;a href=&quot;http://www.competa.com/&quot;&gt;Competa&lt;/a&gt; in Rijswijk. Er worden twee of drie presentaties voorzien.&lt;/p&gt;
  11218. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  11219. &lt;ul&gt;
  11220. &lt;li&gt;18:00: Inloop met hapje/drankje aangeboden door Competa&lt;/li&gt;
  11221. &lt;li&gt;19:00: Pascal Vree over NodeJS&lt;/li&gt;
  11222. &lt;li&gt;19:45: Elmer Bulthuis over IndexedDB en WebSQL&lt;/li&gt;
  11223. &lt;li&gt;20:30: Borrelen&lt;/li&gt;
  11224. &lt;/ul&gt;
  11225. &lt;h2&gt;Waar?&lt;/h2&gt;
  11226. &lt;p&gt;Dit evenement vindt plaats bij Competa in Rijswijk. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/competa&quot;&gt;Er is een map beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  11227. &lt;h2&gt;Voor wie?&lt;/h2&gt;
  11228. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/competa&quot;&gt;Meld je daarom aan via het aanmeldformulier.&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  11229. </content>
  11230.  </entry>
  11231.  <entry>
  11232.    <title>Start kaartverkoop Fronteers 2014</title>
  11233.    <link href="https://www.fronteers.nl/nl/blog/2014/04/start-kaartverkoop-fronteers-2014"/>
  11234.    <updated>2014-04-08T00:00:00Z</updated>
  11235.    <id>https://www.fronteers.nl/nl/blog/2014/04/start-kaartverkoop-fronteers-2014</id>
  11236.    <content xml:lang="nl" type="html">&lt;p&gt;Het is weer zover. De kaarten voor Fronteers 2014 gaan bijna in de verkoop. Het congres wordt dit jaar gehouden op 9 en 10 oktober in Amsterdam. Net als voorgaande jaren wordt het in ieder geval weer een mooie mix van hoge kwaliteit content op het gebied van front-end development en aanverwante zaken. Op dit moment hebben we al toezeggingen van een paar goede sprekers met geweldige content. Welke dat zijn dat verklappen we pas nadat de early bird kaarten verkocht zijn. Onderwerpen die in ieder geval aan bod zullen komen zijn: het customizen van Javascript en de tools er om heen, responsive layout en schaalbare HTML &amp;amp; CSS.&lt;/p&gt;
  11237. &lt;p&gt;Kaarten voor Fronteers 2014 zijn vanaf 25 april verkrijgbaar rond 12:00 Nederlandse tijd &lt;a href=&quot;https://fronteers.paydro.net/&quot;&gt;in onze ticketshop&lt;/a&gt;. Er zijn in totaal 150 early bird kaarten (100 voor leden, 50 voor niet-leden) en daarvoor geldt op == op. Wees er dus snel bij.&lt;/p&gt;
  11238. &lt;p&gt;We verwachten dat alle niet-leden early bird kaarten binnen een paar uur zullen uitverkopen, waarna normale niet-leden kaarten beschikbaar zullen worden gemaakt. De hoeveelheid ledenkaarten zou voldoende moeten zijn voor een ruime week aan verkoop, hoewel we dat natuurlijk niet kunnen garanderen.&lt;/p&gt;
  11239. &lt;p&gt;Wie op het moment van deze aankondiging (vóór 08-04-2014) Fronteerslid is, kan als vanouds zijn of haar kaartje met korting kopen. Direct na de start van de kaartverkoop (25 april, 12:00) zal de Fronteers-nieuwsbrief worden verstuurd, met daarin de spelregels voor ledenkaarten en een specifieke link voor de aankoop daarvan. Heb je aan het eind van die dag nog niets ontvangen? Controleer dan je spam folder. Als je daar ook niets vindt, mail ons dan.&lt;/p&gt;
  11240. &lt;h2&gt;Aangepaste voorwaarden&lt;/h2&gt;
  11241. &lt;p&gt;Belangrijk te noemen is dat het vanaf dit jaar niet meer mogelijk is om kaarten op factuur te kopen. Mocht dit problemen opleveren voor mensen die willen komen, dan horen we dat graag. Betaling is dus alleen direct mogelijk, via iDeal of creditcard. Zie voor meer informatie ook &lt;a href=&quot;https://www.fronteers.nl/congres/2014/algemene-voorwaarden&quot;&gt;onze voorwaarden&lt;/a&gt;.&lt;/p&gt;
  11242. &lt;p&gt;Mocht je de vorige jaren niet geweest zijn of wil je gewoon nog eens nagenieten van de gegeven talks kijk dan eens naar de video&#39;s van &lt;a href=&quot;https://www.fronteers.nl/congres/2013/sessions&quot;&gt;2013&lt;/a&gt; en &lt;a href=&quot;https://www.fronteers.nl/congres/2012/sessions&quot;&gt;2012&lt;/a&gt;.&lt;/p&gt;
  11243. </content>
  11244.  </entry>
  11245.  <entry>
  11246.    <title>Bijeenkomst op 24 april bij Nucleus</title>
  11247.    <link href="https://www.fronteers.nl/nl/blog/2014/04/bijeenkomst-nucleus"/>
  11248.    <updated>2014-04-04T00:00:00Z</updated>
  11249.    <id>https://www.fronteers.nl/nl/blog/2014/04/bijeenkomst-nucleus</id>
  11250.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 24 april 2014 is Fronteers te gast bij Nucleus in Antwerpen. Er worden twee presentaties voorzien.&lt;/p&gt;
  11251. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11252. &lt;ul&gt;
  11253. &lt;li&gt;18:00 ontvangst met broodjes en een drankje&lt;/li&gt;
  11254. &lt;li&gt;19:00 Jeroen Moors over performance&lt;/li&gt;
  11255. &lt;li&gt;20:00 Lennart Schoors: &lt;em&gt;Adding SVG to your tool belt&lt;/em&gt;&lt;/li&gt;
  11256. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  11257. &lt;/ul&gt;
  11258. &lt;h2&gt;Waar?&lt;/h2&gt;
  11259. &lt;p&gt;Dit evenement vindt plaats bij Nucleus in Antwerpen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/nucleus&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  11260. &lt;h2&gt;Wie?&lt;/h2&gt;
  11261. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/nucleus&quot;&gt;Meld je daarom aan via het aanmeldformulier.&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  11262. </content>
  11263.  </entry>
  11264.  <entry>
  11265.    <title>Design reviews: rechtstreeks in de browser!</title>
  11266.    <link href="https://www.fronteers.nl/nl/blog/2014/04/design-reviews"/>
  11267.    <updated>2014-04-01T00:00:00Z</updated>
  11268.    <id>https://www.fronteers.nl/nl/blog/2014/04/design-reviews</id>
  11269.    <content xml:lang="nl" type="html">&lt;p&gt;Vandaag presenteren we het redesign van de site. Gewoon, in de browser, omdat dat onze favoriete tool is.&lt;/p&gt;
  11270. &lt;p&gt;Veel van de pagina&#39;s zijn op dit moment alleen nog beschikbaar in Photoshop, maar er er zijn ook al wat pagina&#39;s uitgewerkt, zoals &lt;a href=&quot;https://www.fronteers.nl/congres&quot;&gt;de congres homepage&lt;/a&gt;. Ook hebben we natuurlijk gedacht aan ontwerpen voor mobiele apparaten (lees: de iPhone), waarvan de &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contactpagina&lt;/a&gt; een voorbeeld is.&lt;/p&gt;
  11271. &lt;p&gt;Als we deze ontwerpen snel af kunnen laten tikken, kunnen we vanaf morgen beginnen met het pixel-perfect implementeren van de hele boel!&lt;/p&gt;
  11272. &lt;p&gt;De makkelijkste manier om je reviews door te geven, is door een screenshot te maken, deze te plakken in Word en daar je commentaar bij te typen. Vervolgens kun je dit Word document doormailen naar het bestuur.&lt;/p&gt;
  11273. &lt;p&gt;Alvast bedankt!&lt;/p&gt;
  11274. </content>
  11275.  </entry>
  11276.  <entry>
  11277.    <title>Bijeenkomst op 13 maart bij BetaGroup Kortrijk</title>
  11278.    <link href="https://www.fronteers.nl/nl/blog/2014/02/bijeenkomst-betagroup"/>
  11279.    <updated>2014-02-27T00:00:00Z</updated>
  11280.    <id>https://www.fronteers.nl/nl/blog/2014/02/bijeenkomst-betagroup</id>
  11281.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 13 maart 2014 is Fronteers te gast bij BetaGroup/Parkoffice te Kortrijk. Er worden twee presentaties voorzien.&lt;/p&gt;
  11282. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11283. &lt;ul&gt;
  11284. &lt;li&gt;18:00: Ontvangst met belegde broodjes en een drankje&lt;/li&gt;
  11285. &lt;li&gt;19:00: &lt;em&gt;Doing it without jQuery&lt;/em&gt; door &lt;a href=&quot;https://twitter.com/joggink&quot;&gt;Jochen Vandendriessche&lt;/a&gt;&lt;/li&gt;
  11286. &lt;li&gt;20:00: &lt;em&gt;It’s a startup life – from idea to execution&lt;/em&gt; door &lt;a href=&quot;https://twitter.com/thomastuts&quot;&gt;Thomas Tuts&lt;/a&gt; en &lt;a href=&quot;https://twitter.com/choisissez&quot;&gt;Miet Claes&lt;/a&gt;&lt;/li&gt;
  11287. &lt;li&gt;21:00: Naborrelen met een drankje&lt;/li&gt;
  11288. &lt;/ul&gt;
  11289. &lt;h2&gt;Waar?&lt;/h2&gt;
  11290. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 80 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/betagroup&quot;&gt;Meld je daarom aan via het aanmeldformulier&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  11291. </content>
  11292.  </entry>
  11293.  <entry>
  11294.    <title>Bijeenkomst bij E-sites op 26 maart 2014</title>
  11295.    <link href="https://www.fronteers.nl/nl/blog/2014/02/bijeenkomst-bij-e-sites-op-26-maart-2014"/>
  11296.    <updated>2014-02-26T00:00:00Z</updated>
  11297.    <id>https://www.fronteers.nl/nl/blog/2014/02/bijeenkomst-bij-e-sites-op-26-maart-2014</id>
  11298.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 26 maart 2014 is Fronteers te gast bij E-sites in Breda. Meld je nu aan voor deze bijeenkomst over tooling, code afspraken, JS errorlogger, cronitor (cronjob logger), deployment, standaardisatie, github én over Surfly, een online tool die je web laat sharen door middel van open web technologieën.&lt;/p&gt;
  11299. &lt;p&gt;Het front-end team van E-sites (Boye, John en Iain) laat zien wat voor gereedschap zij gebruiken en geeft een demo van de tools en scripts die het ontwikkelproces vergemakkelijken. Peter van der Zee geeft Fronteersleden een primeur: hij laat zien hoe Surfly het web laat sharen door middel van open web technologieën.&lt;/p&gt;
  11300. &lt;h2&gt;Programma&lt;/h2&gt;
  11301. &lt;p&gt;Een uitgebreide beschrijving van de twee presentaties is te vinden op de &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/e-sites&quot;&gt;bijeenkomstpagina&lt;/a&gt;. Het programma is als volgt:&lt;/p&gt;
  11302. &lt;ul&gt;
  11303. &lt;li&gt;18.30 inloop&lt;/li&gt;
  11304. &lt;li&gt;19.30 presentatie door Boye Oomens, John van Hulsen en Iain van der Wiel&lt;/li&gt;
  11305. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  11306. &lt;li&gt;20.45 presentatie door Peter van der Zee&lt;/li&gt;
  11307. &lt;li&gt;21.45 borrelen&lt;/li&gt;
  11308. &lt;/ul&gt;
  11309. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  11310. &lt;p&gt;Deze bijeenkomst vindt plaats bij &lt;a href=&quot;http://www.e-sites.nl/&quot;&gt;E-sites&lt;/a&gt; in Breda. Je kunt je &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/e-sites&quot;&gt;aanmelden op deze pagina&lt;/a&gt;.&lt;/p&gt;
  11311. </content>
  11312.  </entry>
  11313.  <entry>
  11314.    <title>Commissie Webrichtlijnen weer actief</title>
  11315.    <link href="https://www.fronteers.nl/nl/blog/2014/02/commissie-webrichtlijnen-weer-actief"/>
  11316.    <updated>2014-02-24T00:00:00Z</updated>
  11317.    <id>https://www.fronteers.nl/nl/blog/2014/02/commissie-webrichtlijnen-weer-actief</id>
  11318.    <content xml:lang="nl" type="html">&lt;p&gt;Het is een poosje stil geweest vanuit de Commissie Webrichtlijnen van Fronteers. Hoog tijd dus voor een update.&lt;/p&gt;
  11319. &lt;p&gt;Zoals jullie misschien vernomen hebben, is de Normcommissie Drempelvrij – waar ik zelf in zat namens Fronteers – afgelopen jaar opgestapt wegens onvrede met de gang van zaken binnen de stichting. Omdat we nog wel onze opgedane kennis en ervaring nuttig willen inzetten, zijn we met een aantal ex-Normcommissieleden – te weten Raph de Rooij, Iacobien Riezebosch, Wilco Fiers, Bram Duvigneau en ik - een nieuwe groep opgestart. Aan de precieze invulling hiervan wordt nu gewerkt.&lt;/p&gt;
  11320. &lt;p&gt;Wat we in ieder geval van plan zijn, is om naast onze eigen kerntaken via de Commissie Webrichtlijnen op deze site informatie te verschaffen en discussies te voeren over vragen en kwesties rondom webtoegankelijkheid. Net als met de eerder geschreven &lt;a href=&quot;https://www.fronteers.nl/blog/categorieen/webrichtlijnen&quot;&gt;blogposts op deze site&lt;/a&gt; over de webrichtlijnen, willen we hiermee een open en transparant archief opbouwen waar o.a. ontwikkelaars informatie kunnen vinden over deze vraagstukken. Naast artikelen publiceren willen we ook het forum van Fronteers hiervoor gaan inzetten.&lt;/p&gt;
  11321. &lt;p&gt;Wat kunnen jullie verwachten? Artikelen over:&lt;/p&gt;
  11322. &lt;ul&gt;
  11323. &lt;li&gt;Best practises: hoe ben je omgegaan met een bepaald toegankelijkheidsprobleem?&lt;/li&gt;
  11324. &lt;li&gt;Uitdagingen: welke ontwikkelaar kan een goede oplossing bedenken voor situatie X?&lt;/li&gt;
  11325. &lt;li&gt;Vragen over verplichtingen: wat moet wel, wat niet, wat zijn fabels?&lt;/li&gt;
  11326. &lt;li&gt;Hoe ga je om met het uitleggen van toepassing van de richtlijnen aan collega&#39;s met andere rollen in de organisatie?&lt;/li&gt;
  11327. &lt;/ul&gt;
  11328. &lt;p&gt;We gaan uit van oplossingsgericht denken en anderen helpen hun sites toegankelijker te maken, wat het startpunt daarvan ook mag zijn.&lt;/p&gt;
  11329. &lt;p&gt;Suggesties en vragen zijn welkom!&lt;/p&gt;
  11330. </content>
  11331.  </entry>
  11332.  <entry>
  11333.    <title>30% korting op GeeUp in Leiden</title>
  11334.    <link href="https://www.fronteers.nl/nl/blog/2014/02/korting-geeup-leiden"/>
  11335.    <updated>2014-02-17T00:00:00Z</updated>
  11336.    <id>https://www.fronteers.nl/nl/blog/2014/02/korting-geeup-leiden</id>
  11337.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik je het CMS ExpressionEngine of ben je ondernemer? Dan is &lt;a href=&quot;http://geeuphq.com/&quot;&gt;GeeUp&lt;/a&gt; misschien iets voor jou. Op 20 juni kun je in Leiden terecht voor dit congres over ExpressionEngine, met onderwerpen over code, projectmanagement, en veel meer. Fronteers-leden krijgen 30% korting!&lt;/p&gt;
  11338. &lt;p&gt;ExpressionEngine is een content management systeem dat onze kostbare HTML helemaal met rust laat, en is daarom een populair CMS onder front-enders. Bij GeeUp gaat het niet alleen over het ontwikkelen van sites met dit systeem, maar ook over sales, nazorg en creativiteit in development.&lt;/p&gt;
  11339. &lt;p&gt;Een kaartje kost normaal gesproken € 125,- ex. btw, maar met de Fronteers-korting kun je er al heen voor € 85,50. De korting geldt niet voor de workshops op 19 juni.&lt;/p&gt;
  11340. &lt;p&gt;Wil je gebruik maken van deze korting, &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;neem dan contact op&lt;/a&gt; met de ledenadministratie. Zoals gebruikelijk geldt de korting uitsluitend voor diegenen die op dit moment lid zijn.&lt;/p&gt;
  11341. </content>
  11342.  </entry>
  11343.  <entry>
  11344.    <title>Met 25 euro korting naar CSS Day in Amsterdam</title>
  11345.    <link href="https://www.fronteers.nl/nl/blog/2014/02/korting-css-day"/>
  11346.    <updated>2014-02-04T00:00:00Z</updated>
  11347.    <id>https://www.fronteers.nl/nl/blog/2014/02/korting-css-day</id>
  11348.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 4 juni wordt in Amsterdam voor de tweede keer &lt;a href=&quot;http://cssday.nl/&quot;&gt;CSS Day&lt;/a&gt; georganiseerd; een dag waarop 8 sprekers, waaronder Nicole Sullivan, David Baron en Ethan Marcotte, diep in zullen gaan op CSS.&lt;/p&gt;
  11349. &lt;p&gt;Fronteers heeft voor deze dag 15 kortingscodes van € 25,- gekregen. Wil je gebruik maken van deze korting? Neem dan &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact op met de ledenadministratie&lt;/a&gt;. De korting geldt, zoals gebruikelijk, alleen voor leden die bij aankondiging van deze actie al lid waren en is niet van toepassing op de workshops.&lt;/p&gt;
  11350. </content>
  11351.  </entry>
  11352.  <entry>
  11353.    <title>Bijeenkomst met Jared Spool over UX Strategy</title>
  11354.    <link href="https://www.fronteers.nl/nl/blog/2014/01/uxstrategy"/>
  11355.    <updated>2014-01-30T00:00:00Z</updated>
  11356.    <id>https://www.fronteers.nl/nl/blog/2014/01/uxstrategy</id>
  11357.    <content xml:lang="nl" type="html">&lt;p&gt;Kom ook naar de last-minute-special &#39;UX Strategy Means Business&#39;, vrijdag 7 februari spreekt Jared Spool in Amsterdam. Schrijf meteen in!&lt;/p&gt;
  11358. &lt;p&gt;Jared Spool &lt;a href=&quot;https://twitter.com/jmspool/status/428460022646181888&quot;&gt;tweette dat hij in Nederland is&lt;/a&gt; en de activiteitencommissie van Fronteers wist hem te strikken voor een presentatie. Deze bijeenkomst wordt georganiseerd in samenwerking met &lt;a href=&quot;http://www.meetup.com/AmsterdamUX/&quot;&gt;Amsterdam UX&lt;/a&gt;.&lt;/p&gt;
  11359. &lt;h2&gt;Programma&lt;/h2&gt;
  11360. &lt;ul&gt;
  11361. &lt;li&gt;19:30 inloop&lt;/li&gt;
  11362. &lt;li&gt;20:35 introductie door Fronteers, Amsterdam UX en sponsor User Intelligence&lt;/li&gt;
  11363. &lt;li&gt;20:45 presentatie Jared Spool, UX Strategy Means Business (in English) &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/uxstrategy&quot;&gt;Lees meer op deze pagina&lt;/a&gt;&lt;/li&gt;
  11364. &lt;li&gt;21:45 Q &amp;amp; A (je kunt ook via Twitter meedoen)&lt;/li&gt;
  11365. &lt;li&gt;22:05 borrel&lt;/li&gt;
  11366. &lt;li&gt;23:00 einde&lt;/li&gt;
  11367. &lt;/ul&gt;
  11368. &lt;h2&gt;Bereikbaarheid en aanmelden&lt;/h2&gt;
  11369. &lt;p&gt;De bijeenkomst vindt plaats bij Felix Meritis, &lt;a href=&quot;https://maps.google.nl/maps?q=felixmeritis&amp;amp;hl=nl&amp;amp;sll=51.992171,4.494086&amp;amp;sspn=1.270144,3.348083&amp;amp;t=h&amp;amp;z=16&amp;amp;iwloc=A&quot;&gt;Keizersgracht 324, Amsterdam&lt;/a&gt;
  11370. Meer info over de locatie is te vinden op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/uxstrategy&quot;&gt;de pagina onder Bijeenkomsten&lt;/a&gt;.
  11371. Ondanks recente berichten in het nieuws kunnen we melden dat dit niet van invloed is op onze bijeenkomst, zie ook &lt;a href=&quot;https://twitter.com/FelixMeritis/status/431065078406725632&quot;&gt;hun tweet&lt;/a&gt;.&lt;/p&gt;
  11372. &lt;p&gt;Aanmelden is verplicht!&lt;/p&gt;
  11373. &lt;p&gt;Leden van Fronteers kunnen op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/uxstrategy&quot;&gt;deze pagina&lt;/a&gt; aanmelden. Ook niet-leden zijn welkom.
  11374. Leden van Amsterdam UX melden zich aan via &lt;a href=&quot;http://www.meetup.com/AmsterdamUX/&quot;&gt;meetup.com/Amsterdam UX&lt;/a&gt;.&lt;/p&gt;
  11375. </content>
  11376.  </entry>
  11377.  <entry>
  11378.    <title>Hackathon op 15 februari 2014</title>
  11379.    <link href="https://www.fronteers.nl/nl/blog/2014/01/hackathon-februari"/>
  11380.    <updated>2014-01-20T00:00:00Z</updated>
  11381.    <id>https://www.fronteers.nl/nl/blog/2014/01/hackathon-februari</id>
  11382.    <content xml:lang="nl" type="html">&lt;p&gt;De vrijwilligers van de activiteitencommissie en congrescommissie organiseren een hackathon, voor en door leden van Fronteers.&lt;/p&gt;
  11383. &lt;p&gt;Vind jij ook dat Fronteers 2014 een coole website nodig heeft? En zou jij graag een vinger in de pap willen hebben? Hier is je kans! Op 15 februari organiseren we een hackaton waarbij we daarvoor een basis willen leggen. Ons idee is om een context-afhankelijke homepage te maken.&lt;/p&gt;
  11384. &lt;p&gt;Wat bedoelen we precies met een context-afhankelijke homepage? Naar ons idee is dat een homepage die verandert. Afhankelijk van de tijd tot aan het congres en misschien nog andere factoren, zoals locatie en weersomstandigheden.
  11385. Dus in de maanden van de kaartverkoop geeft de homepage vooral informatie over de sprekers en de onderwerpen. Wanneer de kaarten zijn uitverkocht krijg je vooral informatie over hotels en activiteiten rond de congreslocatie. En tijdens het congres, en wie weet alleen als je op de wifi zit, kun je dingen zien zoals de lengte van de wachtrij voor de toiletten. Zoiets dus... Maar wat precies? Dat is aan jou.&lt;/p&gt;
  11386. &lt;p&gt;Dit idee kan vanuit een aantal invalshoeken belicht worden, technisch, UX, visual design, etc. Aan het eind van de hackathon hopen we een aantal goed beschreven ideeën, liefst uitgewerkt tot demo/proof of concept, te hebben waarmee we de site kunnen gaan realiseren. Tijdens de hackathon kun je aangeven of je ook bij deze fase betrokken zou willen blijven.&lt;/p&gt;
  11387. &lt;h2&gt;Locatie en tijd&lt;/h2&gt;
  11388. &lt;ul&gt;
  11389. &lt;li&gt;Datum: 15 februari 2014&lt;/li&gt;
  11390. &lt;li&gt;10.00 - 17.00 uur&lt;/li&gt;
  11391. &lt;li&gt;Locatie: In de Ruimte, Oudegracht 230, 3511 NT Utrecht (&lt;a href=&quot;http://www.inderuimte.org/contact-inf/&quot;&gt;routebeschrijving&lt;/a&gt;)&lt;/li&gt;
  11392. &lt;/ul&gt;
  11393. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/hackathon-februari&quot;&gt;Meld je hier aan&lt;/a&gt;&lt;/p&gt;
  11394. </content>
  11395.  </entry>
  11396.  <entry>
  11397.    <title>Bijeenkomst op 19 februari bij Coosto</title>
  11398.    <link href="https://www.fronteers.nl/nl/blog/2014/01/bijeenkomst-coosto"/>
  11399.    <updated>2014-01-12T00:00:00Z</updated>
  11400.    <id>https://www.fronteers.nl/nl/blog/2014/01/bijeenkomst-coosto</id>
  11401.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 19 februari 2014 is Fronteers te gast bij &lt;a href=&quot;http://www.coosto.coml/nl/&quot;&gt;Coosto&lt;/a&gt; in Eindhoven. Onderwerpen zijn webfonts, schalen van je webapp en responsive webdesign.&lt;/p&gt;
  11402. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11403. &lt;ul&gt;
  11404. &lt;li&gt;18.00 inloop met buffet en &#39;n drankje&lt;/li&gt;
  11405. &lt;li&gt;19.30 presentatie Roel Nieskens, I □ webfonts&lt;/li&gt;
  11406. &lt;li&gt;20.00 presentatie Koen Kivits, Groeistuipen: het schalen van je web app&lt;/li&gt;
  11407. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  11408. &lt;li&gt;20.45 presentatie Wilfred Nas, ‘What has Responsive Web Design done for us, so far’.&lt;/li&gt;
  11409. &lt;li&gt;21.30 borrelen&lt;/li&gt;
  11410. &lt;/ul&gt;
  11411. &lt;h2&gt;Waar en wie?&lt;/h2&gt;
  11412. &lt;p&gt;Deze bijeenkomst vindt plaats bij Coosto in Eindhoven. Meer details vind je op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/coosto&quot;&gt;de pagina van deze bijeenkomst&lt;/a&gt;. Iedereen is welkom.
  11413. Er is ruimte voor 40 personen. &lt;em&gt;Aanmelden is helaas niet meer mogelijk, het maximaal aantal deelnemers is bereikt.&lt;/em&gt;&lt;/p&gt;
  11414. </content>
  11415.  </entry>
  11416.  <entry>
  11417.    <title>Bijeenkomst op 13 februari bij TriFork</title>
  11418.    <link href="https://www.fronteers.nl/nl/blog/2014/01/bijeenkomst-trifork"/>
  11419.    <updated>2014-01-04T00:00:00Z</updated>
  11420.    <id>https://www.fronteers.nl/nl/blog/2014/01/bijeenkomst-trifork</id>
  11421.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 13 februari 2014 is Fronteers te gast bij &lt;a href=&quot;http://www.trifork.nl/&quot;&gt;TriFork&lt;/a&gt; in Amsterdam. Er worden twee presentaties gegeven.&lt;/p&gt;
  11422. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11423. &lt;ul&gt;
  11424. &lt;li&gt;18.00 Binnenkomst met pizza&lt;/li&gt;
  11425. &lt;li&gt;18.30 Presentatie Roy Tomeij&lt;/li&gt;
  11426. &lt;li&gt;19.30 Korte pauze&lt;/li&gt;
  11427. &lt;li&gt;19.45 Presentatie Justin Halsall&lt;/li&gt;
  11428. &lt;li&gt;20.45 Borrel&lt;/li&gt;
  11429. &lt;/ul&gt;
  11430. &lt;h2&gt;Waar?&lt;/h2&gt;
  11431. &lt;p&gt;Dit evenement vindt plaats bij TriFork te Amsterdam. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2014/trifork&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  11432. &lt;h2&gt;Wie?&lt;/h2&gt;
  11433. &lt;p&gt;Iedereen is welkom. Voorafgaand aan de bijeenkomst zal er pizza zijn, je hoeft dus van tevoren niet te eten. We willen graag weten hoeveel pizza&#39;s we moeten bestellen.&lt;/p&gt;
  11434. </content>
  11435.  </entry>
  11436.  <entry>
  11437.    <title>Fronteers nieuwjaarsborrel</title>
  11438.    <link href="https://www.fronteers.nl/nl/blog/2013/12/nieuwjaarsborrel"/>
  11439.    <updated>2013-12-22T00:00:00Z</updated>
  11440.    <id>https://www.fronteers.nl/nl/blog/2013/12/nieuwjaarsborrel</id>
  11441.    <content xml:lang="nl" type="html">&lt;p&gt;Een nieuw jaar, een nieuwe locatie voor de Fronteers nieuwjaarsborrel, speciaal voor leden!&lt;/p&gt;
  11442. &lt;p&gt;Op vrijdag 17 januari 2014 organiseert Fronteers een Nieuwjaarsborrel voor leden. Deze zal plaatsvinden in Cafe Lebowski, in Utrecht.
  11443. Rond 17:00 uur zullen de eerste leden aanwezig zijn en de eerste drankjes worden betaald door de vereniging.&lt;/p&gt;
  11444. &lt;p&gt;Grand Cafe Lebowski in Utrecht heeft veel lekkere bieren, ook van de tap. De hongerige direct-uit-werk-naar-borrel-ganger kan ook wat te eten bestellen, op eigen kosten.&lt;/p&gt;
  11445. &lt;h2&gt;Locatie&lt;/h2&gt;
  11446. &lt;p&gt;Domplein 17, naast de Dom in Utrecht, ongeveer 10 minuten lopen van Utrecht Centraal Station. Op de website van Grand Café Lebowski vind je &lt;a href=&quot;http://www.grandcafelebowski.nl/contact-en-route&quot;&gt;de routebeschrijving&lt;/a&gt;.
  11447. Parkeren in Utrecht is geen probleem, maar bekijk wel even de tarieven. Kies voor &lt;a href=&quot;http://www.interparking.nl/find-parking/Springweg/&quot;&gt;garage Springweg&lt;/a&gt; of één van de andere parkeergarages rond Hoog Catharijne.&lt;/p&gt;
  11448. &lt;h2&gt;Nog meer borrelen?&lt;/h2&gt;
  11449. &lt;p&gt;Op 9 januari is er een nieuwjaarsreceptie van ISOC, ook daar kun je leden van Fronteers tegenkomen. &lt;a href=&quot;https://www.fronteers.nl/blog/2013/12/nieuwjaarsreceptie-isoc&quot;&gt;Lees hier verder.&lt;/a&gt;&lt;/p&gt;
  11450. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  11451. &lt;p&gt;Ben je lid van Fronteers en doe je mee? Laat in de comments weten dat je komt, en of je wel of niet wil mee-eten. Dat mag ook naar of aan &lt;a href=&quot;mailto:meta@fronteers.nl&quot;&gt;meta@fronteers.nl&lt;/a&gt;. Dan weten we ook hoeveel ruimte nodig is.&lt;/p&gt;
  11452. </content>
  11453.  </entry>
  11454.  <entry>
  11455.    <title>Update uit de congrescommissie: de datum!</title>
  11456.    <link href="https://www.fronteers.nl/nl/blog/2013/12/update-uit-de-congrescommissie-de-datum"/>
  11457.    <updated>2013-12-18T00:00:00Z</updated>
  11458.    <id>https://www.fronteers.nl/nl/blog/2013/12/update-uit-de-congrescommissie-de-datum</id>
  11459.    <content xml:lang="nl" type="html">&lt;p&gt;Sinterklaas is al weer achter de rug en terwijl iedereen z&#39;n adem inhoudt voor de kerst heeft de congrescommissie van Fronteers 2014 al weer een hoop geritseld achter de schermen. Zoals je wellicht hebt gelezen op &lt;a href=&quot;http://fronteers.nl/congres/2014&quot;&gt;de congrespagina&lt;/a&gt; vindt het Fronteers Congres plaats op 9 en 10 oktober 2014.&lt;/p&gt;
  11460. &lt;p&gt;Net als vorig jaar proberen wij een selectie te maken op basis van onderwerp en zoeken wij daar geschikte sprekers voor. Om de onderwerpen wat structuur te geven hebben we een &amp;quot;lichtroze draad&amp;quot; uitgestippeld die door heel het congres heen loopt. Wat die draad zal zijn, dat houden we nog even geheim. Naast selectie op onderwerp hebben we ook al een aantal &amp;quot;must-have&amp;quot; sprekers geselecteerd en die zullen wij de komende dagen en weken benaderen om op &amp;quot;ons&amp;quot; congres te spreken. Je zult begrijpen dat het een hele kluif is om ons aan de ene kant te beperken (we willen zoveel!) en aan de andere kant de aller-allerbeste mensen te vinden (en hopen dat ze ook kunnen en willen!).&lt;/p&gt;
  11461. &lt;p&gt;We hopen in ieder geval dat je 9 en 10 oktober 2014 alvast in je agenda hebt gezet en dat je met smart uitkijkt naar een volgende update!&lt;/p&gt;
  11462. &lt;p&gt;Als je ook tussendoor van kleinere gebeurtenissen op de hoogte wilt blijven, volg ons dan op &lt;a href=&quot;https://twitter.com/fronteersconf&quot;&gt;Twitter (@FronteersConf)&lt;/a&gt; en houd onze &lt;a href=&quot;http://lanyrd.com/2014/fronteers/&quot;&gt;Lanyrd-pagina&lt;/a&gt; in de gaten.&lt;/p&gt;
  11463. </content>
  11464.  </entry>
  11465.  <entry>
  11466.    <title>Nieuwjaarsreceptie ISOC</title>
  11467.    <link href="https://www.fronteers.nl/nl/blog/2013/12/nieuwjaarsreceptie-isoc"/>
  11468.    <updated>2013-12-10T00:00:00Z</updated>
  11469.    <id>https://www.fronteers.nl/nl/blog/2013/12/nieuwjaarsreceptie-isoc</id>
  11470.    <content xml:lang="nl" type="html">&lt;p&gt;Het wordt weer tijd voor de nieuwjaarsborrels. De eerste is op donderdag 9 januari 2014, georganiseerd door de overkoepelende organisatie voor internetinstanties, Internet Society Nederland.&lt;/p&gt;
  11471. &lt;p&gt;Op de nieuwjaarsreceptie van ISOC Nederland ontmoet je bijna twintig nationale en internationale spelers uit de internetwereld. Van e-infrastructuur tot .nl, van digitale burgerrechten tot en met digitale certificaten, van toegankelijkheid voor blinden tot hosting providers - iedereen doet mee.
  11472. Er zijn hapjes, drankjes, lightning talks en netwerkmogelijkheden. Fronteers is ook zichtbaar aanwezig. Het programma start om 17:45 uur, &lt;a href=&quot;http://isoc.nl/activ/2014-nieuwjaar.htm&quot;&gt;meer info vind je op de website van ISOC&lt;/a&gt;.&lt;/p&gt;
  11473. &lt;h2&gt;Locatie&lt;/h2&gt;
  11474. &lt;p&gt;De bijeenkomst wordt gehouden in Amsterdam in Felix Meritis, Keizersgracht 324. Op hun website vind je de &lt;a href=&quot;http://www.felix.meritis.nl/nl/over-felix-meritis/contact-en-route/&quot;&gt;routebeschrijving&lt;/a&gt;.&lt;/p&gt;
  11475. &lt;h2&gt;Aanmelden bij ISOC&lt;/h2&gt;
  11476. &lt;p&gt;&lt;a href=&quot;https://portal.ripe.net/meeting-pub/registration?meetingId=0587eee7-730d-441b-9982-eb223b459c8e&quot;&gt;Aanmelden kan gratis op de website van ISOC.&lt;/a&gt;
  11477. Aanmelden kan niet via de website van Fronteers. Laat Fronteersleden wél weten dat je komt, reageer hieronder en/of &lt;a href=&quot;https://twitter.com/search?q=%23fronteers&amp;amp;src=typd&quot;&gt;tweet met hashtag #fronteers&lt;/a&gt;.&lt;/p&gt;
  11478. </content>
  11479.  </entry>
  11480.  <entry>
  11481.    <title>Updates uit de congrescommissie</title>
  11482.    <link href="https://www.fronteers.nl/nl/blog/2013/11/updates-uit-de-congrescommissie-2014"/>
  11483.    <updated>2013-11-24T00:00:00Z</updated>
  11484.    <id>https://www.fronteers.nl/nl/blog/2013/11/updates-uit-de-congrescommissie-2014</id>
  11485.    <content xml:lang="nl" type="html">&lt;p&gt;Buiten is het guur en koud, binnen zit de congrescommissie van 2014 al weer hard te tikken achter hun lichtgevende schermpjes. Een mooie datum in oktober, veel interessante sprekers en misschien wel een nieuwe website.&lt;/p&gt;
  11486. &lt;p&gt;Voor &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/congres&quot;&gt;de congrescommissie&lt;/a&gt; is na een succesvol congres in oktober &lt;a href=&quot;https://twitter.com/search?q=%23fronteers14&quot;&gt;hekje fronteers14&lt;/a&gt; begonnen. &lt;a href=&quot;https://www.fronteers.nl/blog/2013/09/de-congrescommissie-zoekt-actieve-leden&quot;&gt;De lange blogpost van Vasilis&lt;/a&gt; bleek gelukkig niet iedereen weggejaagd te hebben. We hebben voor 2014 twee geschikte nieuwe kandidaten weten te strikken voor de congrescommissie. Hidde en Matijs hebben de commissie verlaten. We willen hen bedanken voor het vele en goede werk. Hun kernwaarden zullen eeuwig in tact worden gehouden. Oké, nog een week of twee... :)&lt;/p&gt;
  11487. &lt;p&gt;Samen met Carlo en Flurin, onze nieuwe aanwinsten in de commissie, zijn we al begonnen met het verzamelen van sprekersonderwerpen. Net als vorig jaar selecteren we op onderwerpen, waarbij we later sprekers zoeken. Ook wordt er in de congres- wandelgangen al druk gepraat over enkele sprekers die we niet willen missen voor 2014.&lt;/p&gt;
  11488. &lt;p&gt;Net als vorig jaar zal Michael het grafische werk voor zijn rekening nemen. De taken die onder Thomas zijn verantwoordelijkheid vallen zijn: financiën, vrijwilligers en catering. Sander gaat de workshops, techniek en de locatie voor zijn rekening nemen. Deelnemers en video vallen onder de verantwoordelijkheid van Carlo. Flurin zal de communicatie verzorgen en zal, samen met Charis, de sprekers voor zijn rekening nemen. Charis is dit jaar de voorzitter, en organiseert als feestneus ook dit jaar weer de afterparty.&lt;/p&gt;
  11489. &lt;p&gt;Afgelopen jaar is er veel vastgelegd in ons eigen Fronteers congreshandboek, dit jaar gaat zal dat handboek uitgebreid worden. We hopen dit jaar de dikte van het boek van Sinterklaas te overtreffen, alhoewel dat natuurlijk geen doel op zich is.&lt;/p&gt;
  11490. &lt;p&gt;We hopen dat je nu genoeg weet,
  11491. tot de volgende update!&lt;/p&gt;
  11492. </content>
  11493.  </entry>
  11494.  <entry>
  11495.    <title>Bijeenkomst op 5 december bij Mobile Vikings</title>
  11496.    <link href="https://www.fronteers.nl/nl/blog/2013/11/bijeenkomst-mobile-vikings"/>
  11497.    <updated>2013-11-13T00:00:00Z</updated>
  11498.    <id>https://www.fronteers.nl/nl/blog/2013/11/bijeenkomst-mobile-vikings</id>
  11499.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 5 december 2013 is Fronteers te gast bij Mobile Vikings te Hasselt. Er worden twee presentaties voorzien.&lt;/p&gt;
  11500. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11501. &lt;ul&gt;
  11502. &lt;li&gt;18:00: Ontvangst met belegde broodjes en een drankje&lt;/li&gt;
  11503. &lt;li&gt;19:00: Bert Wijnants van Mobile Vikings over &lt;em&gt;The Realtime Web&lt;/em&gt;&lt;/li&gt;
  11504. &lt;li&gt;20:00: &lt;a href=&quot;http://toon.io/&quot;&gt;Toon Ketels&lt;/a&gt; over &lt;em&gt;Building better client-side JavaScript applications with Domain Driven Design&lt;/em&gt;&lt;/li&gt;
  11505. &lt;li&gt;21:00: Naborrelen met een drankje&lt;/li&gt;
  11506. &lt;/ul&gt;
  11507. &lt;h2&gt;Waar?&lt;/h2&gt;
  11508. &lt;p&gt;Dit evenement vindt plaats bij Mobile Vikings in Hasselt. Er is een plannetje beschikbaar op de &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/mobile-vikings&quot;&gt;detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  11509. &lt;h2&gt;Wie?&lt;/h2&gt;
  11510. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 70 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/mobile-vikings&quot;&gt;Meld je daarom aan via het aanmeldformulier&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  11511. </content>
  11512.  </entry>
  11513.  <entry>
  11514.    <title>Een lunchcollege bij W.I.S.V. Christiaan Huygens</title>
  11515.    <link href="https://www.fronteers.nl/nl/blog/2013/11/lunchcollege-wisv-christiaan-huygens"/>
  11516.    <updated>2013-11-12T00:00:00Z</updated>
  11517.    <id>https://www.fronteers.nl/nl/blog/2013/11/lunchcollege-wisv-christiaan-huygens</id>
  11518.    <content xml:lang="nl" type="html">&lt;p&gt;Een tijdje geleden nam een bestuurslid van de studentenvereniging Christiaan Huygens van de TU in Delft contact op met Fronteers met de vraag of een van ons een verhaaltje wilde vertellen op een van hun vele lunchbijeenkomsten. Bijna elke week organiseren ze zo&#39;n bijeenkomst voor hun leden, waarbij ze luisteren naar iemand uit de praktijk. Wat een prachtige aanvulling op een sowieso al prachtig instituut! Ik vond het dan ook een grote eer om hiervoor uitgenodigd te zijn. Ik heb vandaag een verhaal verteld over hoe ontzettend tof het is om dingen te maken voor het web.&lt;/p&gt;
  11519. &lt;h2&gt;Echt?&lt;/h2&gt;
  11520. &lt;p&gt;Tenminste, als je er van houdt om dingen te maken voor een bizar, onbetrouwbaar medium. Ik heb de bezoekers laten zien dat het heel lastig is om iets wat je op een muur hebt geschilderd kleiner te maken, terwijl het echt supersimpel is om iets op het web kleiner te maken. Ik heb ze verteld wat we kunnen leren van de ballondrukkunst, van &lt;em&gt;tattoo-artists&lt;/em&gt;, van modeontwerpers, van muziek-producers, van grafisch ontwerpers, van mobiele apps (ffs) en van onszelf. En ik sloot af met de wens om veel te gaan leren van kunstenaars, zodra die zich eens zouden gaan interesseren in het web. Het was erg tof om dit verhaal eens te vertellen aan een collegezaal vol met jonge, briljante informatici en wiskundigen. Dit is een vergelijkbaar verhaal wat ik al eens eerder heb gehouden, dus als je er niet bij was, niet getreurd, &lt;a href=&quot;https://vimeo.com/78652974&quot;&gt;er is eerder eens een video van gemaakt&lt;/a&gt;.&lt;/p&gt;
  11521. &lt;h2&gt;Verenigingen&lt;/h2&gt;
  11522. &lt;p&gt;Het verhaal werd volgens mij goed ontvangen. Er was helaas weinig tijd na afloop om te praten met de studenten. Gelukkig heb ik van tevoren wel even de tijd gehad om te babbelen met wat studenten van de vereniging. We hebben het onder meer gehad over de voordelen van lid zijn van een vereniging. Waarom zou je dat willen? Dat is een vraag die Fronteers zich natuurlijk ook keer op keer blijft stellen. Leden van Christiaan Huygens kunnen gratis gebruik maken van de verenigingsruimte en mogen daar op de banken zitten (en dat mocht ik ook!). Klein voordeeltje wat Fronteers niet kan bieden, hoewel onze vrijwilligers wél &lt;a href=&quot;https://www.fronteers.nl/blog/2013/11/irccloud-vrijwilligers&quot;&gt;een gratis IRCCloud account krijgen&lt;/a&gt;. Misschien toch wel vergelijkbaar. Ze bieden verder korting op studieboeken; volgens mij was er ooit een vergelijkbaar initiatief gestart bij Fronteers, maar dit is nooit van de grond gekomen, meen ik me te herinneren. En verder hebben ze de wekelijkse(!) bijeenkomsten met gratis broodjes voor de eerste 100 bezoekers. Ik weet zeker dat ze meer nuttigs doen voor hun leden, zoals wij dat ook doen (denk aan een congres, een onderwijscommissie, onze workshops, en al dat andere moois wat we doen).&lt;/p&gt;
  11523. </content>
  11524.  </entry>
  11525.  <entry>
  11526.    <title>Gratis gebruik van IRCCloud voor vrijwilligers</title>
  11527.    <link href="https://www.fronteers.nl/nl/blog/2013/11/irccloud-vrijwilligers"/>
  11528.    <updated>2013-11-09T00:00:00Z</updated>
  11529.    <id>https://www.fronteers.nl/nl/blog/2013/11/irccloud-vrijwilligers</id>
  11530.    <content xml:lang="nl" type="html">&lt;p&gt;Een groot deel van de communicatie tussen onze vrijwilligers speelt zich online af, voornamelijk via e-mail en &lt;a href=&quot;https://www.fronteers.nl/blog/2008/03/fronteers-op-irc&quot;&gt;IRC&lt;/a&gt;. Ook in het bestuur maken we regelmatig gebruik van IRC om elkaar actief en op de hoogte te houden. Aangezien een hoop leden &lt;a href=&quot;http://irccloud.com/&quot;&gt;IRCCloud&lt;/a&gt; hiervoor gebruiken en IRCCloud sinds kort daadwerkelijk kosten rekent en &lt;a href=&quot;https://blog.irccloud.com/lower-prices-and-team-accounts/&quot;&gt;team accounts&lt;/a&gt; mogelijk maakt, hebben we besloten om actieve vrijwilligers van onze vereniging de mogelijkheid te bieden om op onze kosten gebruik te maken van deze service.&lt;/p&gt;
  11531. &lt;p&gt;De betaalde variant van IRCCloud maakt het mogelijk om altijd verbonden te blijven en onbeperkt terug te lezen wat er besproken is. IRC is niet voor iedereen het juiste medium (wat we ook in 2008 schreven), maar we denken dat deze features het nog nuttiger maken voor onze commissies (wat ook blijkt doordat meer mensen het nu gebruiken). Continu een chatkanaal in de gaten houden is dus niet nodig (en voor velen te tijdrovend); je kunt gewoon eens in de zoveel tijd inloggen, kijken wat er (aan jou) geschreven is, daar even op reageren en weer uitloggen.&lt;/p&gt;
  11532. &lt;p&gt;Mocht je actief zijn binnen de vereniging, IRC gebruiken voor Fronteers-gerelateerde communicatie, en behoefte hebben aan een volledig IRCCloud account, neem dan even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact&lt;/a&gt; met ons op. Via IRC kan dit vanzelfsprekend ook; zoals je in dat geval al weet zitten we in #fronteers op het freenode netwerk. Als je IRCCloud al (betaald) gebruikt, kun je zonder problemen overstappen met je eigen bestaande account.&lt;/p&gt;
  11533. &lt;p&gt;Een door ons betaald account geldt in principe voor een jaar, en ieder jaar opnieuw bekijken we of je hier nog steeds gebruik van wilt maken.&lt;/p&gt;
  11534. &lt;p&gt;Andersom is natuurlijk ook mogelijk: lijkt zo&#39;n account je wel wat, maar ben je nog geen vrijwilliger? Er is genoeg te doen binnen de vereniging, dus we zijn altijd op zoek naar nieuwe mensen. Laat ook in dit geval &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;wat van je horen&lt;/a&gt;!&lt;/p&gt;
  11535. </content>
  11536.  </entry>
  11537.  <entry>
  11538.    <title>Meld je nu aan voor de Algemene Ledenvergadering 2013</title>
  11539.    <link href="https://www.fronteers.nl/nl/blog/2013/11/aanmelden-alv-2013"/>
  11540.    <updated>2013-11-07T00:00:00Z</updated>
  11541.    <id>https://www.fronteers.nl/nl/blog/2013/11/aanmelden-alv-2013</id>
  11542.    <content xml:lang="nl" type="html">&lt;p&gt;Maandag 25 november aanstaande houden we onze jaarlijkse algemene ledenvergadering (ALV). Alle leden zijn hiervoor van harte uitgenodigd. De locatie van de ALV is &lt;a href=&quot;http://www.poortvankleef.nl/vergaderzaal-bij-hoog-cathrijne-jaarbeurs-utrecht-centraal-station/&quot;&gt;Zalencentrum De Poort van Kleef&lt;/a&gt; (toegang via restaurant Carré), ongeveer vijf minuten lopen vanaf Utrecht CS (Mariaplaats 7).&lt;/p&gt;
  11543. &lt;p&gt;We beginnen om 19:00 uur en hopen deze keer toch echt niet langer dan drie uur nodig te hebben. Voor de mensen die van ver komen regelen we iets van broodjes, welke vanaf 18:30 beschikbaar zullen zijn. Geef bij je aanmelding even aan dat je hier gebruik van wilt maken.&lt;/p&gt;
  11544. &lt;h2&gt;De agenda voor de avond is de volgende:&lt;/h2&gt;
  11545. &lt;ul&gt;
  11546. &lt;li&gt;Welkom en opening door de voorzitter&lt;/li&gt;
  11547. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  11548. &lt;li&gt;Discussieonderwerpen
  11549. &lt;ul&gt;
  11550. &lt;li&gt;Studenten op het congres&lt;/li&gt;
  11551. &lt;li&gt;Bedrijfsnaam op vacatures&lt;/li&gt;
  11552. &lt;/ul&gt;
  11553. &lt;/li&gt;
  11554. &lt;li&gt;Besluiten eerdere ALV’s&lt;/li&gt;
  11555. &lt;li&gt;Wisseling kascommissie 2012 + rapportage&lt;/li&gt;
  11556. &lt;li&gt;Financiën 2013 / Begroting 2014&lt;/li&gt;
  11557. &lt;li&gt;Kascommissieverkiezing&lt;/li&gt;
  11558. &lt;li&gt;Aftreden Sander en Tom, Sander herkiesbaar&lt;/li&gt;
  11559. &lt;li&gt;Rondvraag&lt;/li&gt;
  11560. &lt;li&gt;Afsluiting&lt;/li&gt;
  11561. &lt;/ul&gt;
  11562. &lt;p&gt;(Zie de nieuwsbrief die vanochtend, 7 november, wordt verstuurd voor meer details / toelichting op de verschillende agendaonderwerpen.)&lt;/p&gt;
  11563. &lt;p&gt;Ben je van plan te komen, dan vragen we je vriendelijk je hieronder hiervoor in te schrijven, zodat we enigszins een idee hebben van de verwachte opkomst.&lt;/p&gt;
  11564. </content>
  11565.  </entry>
  11566.  <entry>
  11567.    <title>Plannen voor de onderwijscommissie</title>
  11568.    <link href="https://www.fronteers.nl/nl/blog/2013/11/plannen-voor-de-onderwijscommissie"/>
  11569.    <updated>2013-11-04T00:00:00Z</updated>
  11570.    <id>https://www.fronteers.nl/nl/blog/2013/11/plannen-voor-de-onderwijscommissie</id>
  11571.    <content xml:lang="nl" type="html">&lt;p&gt;Het afgelopen jaar lijkt het weer stil te zijn geweest rondom de onderwijscommissie van Fronteers. Maar achter de schermen is er gelukkig wel het een en ander gebeurd. Er zijn een paar informele bijeenkomsten geweest tussen verschillende Fronteers-leden, docenten en meerdere onderwijsinstellingen. Uit deze bijeenkomsten zijn een aantal punten naar voren gekomen waar onderwijsinstellingen en docenten de hulp van Fronteers goed kunnen gebruiken. Er hebben zich inmiddels aardig wat vrijwilligers aangemeld die zich in willen zetten voor deze commissie. Deze post is bedoeld om iedereen te informeren over de mogelijke werkzaamheden.&lt;/p&gt;
  11572. &lt;h2&gt;Aanpak&lt;/h2&gt;
  11573. &lt;p&gt;In het verleden heeft Fronteers geprobeerd om een curriculum op te stellen. Deze actieve houding, waarbij we onze visie opdringen aan anderen, is om meerdere redenen niet geslaagd. Ten eerste is het veel te veel werk, ten tweede zijn we zelf vaak geen docenten, en ten derde weten docenten natuurlijk zelf heel goed wat ze nodig hebben. Er bestaat niet zoiets als één curriculum.&lt;/p&gt;
  11574. &lt;p&gt;Fronteers moet dus ondersteunend zijn, niet leidend. De vraag moet komen vanuit de opleidingen, Fronteers kan dan experts en vrijwilligers leveren om eventuele problemen aan te pakken. Een verschil in aanpak is dus: docenten moeten zelf hun curriculum maken, wij kunnen ze ondersteunen.&lt;/p&gt;
  11575. &lt;h2&gt;Een duidelijke lijn.&lt;/h2&gt;
  11576. &lt;p&gt;Wat er lijkt te ontbreken in veel opleidingen is een duidelijke lijn. Welke basiskennis moet een student hebben aan het eind van de studie? Deze basiskennis zou in elk vak, in elk curriculum moeten terugkeren. Bijvoorbeeld: webdesign studenten moeten een gedegen basiskennis hebben van typografie en grids, en studenten die developer willen worden moeten verstand hebben van OO en functioneel programmeren. Dus meer kennis van de principes achter het programmeren dan kennis van een specifieke taal. Taal-agnostisch, dus. Deze principes moeten telkens terugkeren door de jaren heen.&lt;/p&gt;
  11577. &lt;p&gt;Het is ook een klacht die ik van veel studenten heb gehoord. Ze hebben van alles wel wat geleerd, maar nergens weten ze echt iets van. Dat is natuurlijk een probleem. Wat heeft het bedrijfsleven aan zo iemand? Wat is het nut van een HBO-papiertje als iemand niks echt weet?&lt;/p&gt;
  11578. &lt;h2&gt;Wat kan Fronteers hier doen&lt;/h2&gt;
  11579. &lt;p&gt;Fronteers kan helpen om mee te denken wat er bijvoorbeeld voor basiskennis nodig is op het gebied van Het Web. Wat moet iemand weten die wil werken op het web? Welke basiskennis hoort hierbij? Bijvoorbeeld: de flexibele eigenschappen van het web, het feit dat je geen controle hebt over hoe iets er uit ziet, progressive enhancement, maar ook manieren van programmeren, performance, etc. Hier horen vast nog veel meer dingen bij, maar dit is iets waar Fronteers een bijdrage aan kan leveren. Veel opleidingen zijn nu op zoek naar die basisvaardigheden, hier moeten we bij aanhaken. Er zijn inmiddels twee discussies hierover gestart op het forum; een over &lt;a href=&quot;http://forum.fronteers.nl/topic/90/basiskennis-van-een-webdesigner/&quot;&gt;de basiskennis van een webdesigner&lt;/a&gt;, en een over &lt;a href=&quot;http://forum.fronteers.nl/topic/89/basiskennis-van-een-frontend-developer/&quot;&gt;de basiskennis van een frontend developer&lt;/a&gt;.&lt;/p&gt;
  11580. &lt;h2&gt;Curricula&lt;/h2&gt;
  11581. &lt;p&gt;Een groot probleem waar docenten mee worstelen zijn de curricula. Die maken ze vaak zelf, en het is lastig om ze up-to-date te houden. Ik heb voorgesteld dat docenten hun lespakketten op github zetten. Op deze manier kunnen docenten van verschillende opleidingen er samen aan werken. Updaten is dan niet meer een grote klus, het is iets wat geleidelijk aan kan gebeuren, waar meerdere mensen tegelijk aan kunnen werken.&lt;/p&gt;
  11582. &lt;p&gt;Leden van Fronteers kunnen meekijken naar deze curricula en ook actief een bijdrage leveren in de vorm van pull requests, bug reports etc. We hebben die kennis in huis, dit is een manier van bijdragen die gestructureerd is en relatief weinig tijd kost. Curricula blijven zo up-to-date. Er kunnen zo ook meerdere curricula ontwikkeld worden, docenten krijgen zo meer keus. Fronteers zou een repository met links kunnen bijhouden van de verschillende curricula die er online te vinden zijn. Ook hier is inmiddels een &lt;a href=&quot;http://forum.fronteers.nl/topic/88/links-naar-online-curricula/&quot;&gt;forumpost aan gewijd&lt;/a&gt;, en we nodigen jullie van harte uit om hier aan bij te dragen.&lt;/p&gt;
  11583. &lt;p&gt;Een alternatief, of een aanvulling op zo&#39;n repository zou ook een &lt;em&gt;leercentrum/kenniscentrum&lt;/em&gt; kunnen zijn. Bramus van Damme formuleerde het zo: Collectie van hoofdstukken en/of lijst van relevante artikels (links, reeds geprefiltered door de curatoren) over bepaalde onderwerpen. Bij voorkeur gegroepeerd per hoofdonderwerp (html, css, javascript), alsook aangeboden in een traject/pakket (vb: om CSS te leren is er een traject van presentatie X, presentatie Y, filmpje Z, en link Q te doorlopen).&lt;/p&gt;
  11584. &lt;h2&gt;Kennis&lt;/h2&gt;
  11585. &lt;p&gt;Een duidelijk probleem bij docenten is up-to-date blijven. Mensen stappen vaak over vanuit het zakenleven naar het onderwijs en hun kennis begint dus snel weg te zakken. Hier kan Fronteers ook een goede bijdrage aan leveren in de vorm van cursussen, workshops. Dit kunnen de reguliere workshops zijn die Fronteers al organiseert, maar dit kunnen ook op maat gesneden cursussen zijn voor specifieke groepen docenten. We moeten een manier vinden waarop docenten ons kunnen benaderen met een specifieke vraag, waarop wij kunnen gaan zoeken naar een goede specialist voor een workshop/cursus. We hebben een goed Nederlands netwerk, maar we kunnen eventueel ook internationale specialisten laten overkomen voor onderwerpen waar veel animo voor is.&lt;/p&gt;
  11586. &lt;p&gt;Op dit gebied, van kennisdeling, is natuurlijk nog veel meer mogelijk. Mocht je hier goede ideeën over hebben, &lt;a href=&quot;http://forum.fronteers.nl/forum/2/fronteers/&quot;&gt;start hier gerust een discussie over op het forum&lt;/a&gt;.&lt;/p&gt;
  11587. &lt;h2&gt;Docentendagen&lt;/h2&gt;
  11588. &lt;p&gt;We willen een docentendag organiseren waarbij we mensen van het zakenleven en van opleidingen bij elkaar brengen. MBO docenten kunnen zo overleggen met HBO docenten over aansluiting, en docenten kunnen zo horen waar het bedrijfsleven nu eigenlijk op zit te wachten. Zulk soort dagen moeten inhoudelijk en praktisch georganiseerd worden.&lt;/p&gt;
  11589. &lt;p&gt;Naast dit soort wat grotere evenementen kunnen er ook kleinere bijeenkomsten georganiseerd worden met een wat specifieker karakter. Te denken valt er aan brainstormsessies tussen het bedrijfsleven en het onderwijs om te zien wat er &lt;em&gt;hot&lt;/em&gt; is.&lt;/p&gt;
  11590. &lt;p&gt;Dit soort bijeenkomsten zouden idealiter ook leiden tot betere &lt;em&gt;horizontale samenwerkingsverbanden&lt;/em&gt; tussen verschillende instellingen en het bedrijfsleven.&lt;/p&gt;
  11591. &lt;h2&gt;Contacten met bestuurders/overheden&lt;/h2&gt;
  11592. &lt;p&gt;Bramus van Damme kwam met het goede idee om contacten met overheden/bestuursleden van onderwijsinstellingen te onderhouden: &amp;quot;ons kenbaar maken bij de overheden om een betere erkenning van de opleiding/het beroep. Voor instructoren bijvoorbeeld kan dit zeer concreet gaan naar het mee in rekening brengen van de snelheid waarmee alles gaat bij het berekenen van een taakbelasting (dom voorbeeld: een lesgever wiskunde kan perfect 10 jaar aan één stuk de zelfde cursus aanbieden, wij mogen al blij zijn dat die meer dan één jaar mee gaat), of het mogelijk maken om instructoren lesvrij te stellen en op stage te sturen na X aantal jaar (hiervoor is er een structurele verandering nodig waar vaak nog het aantal fulltime equivalenten enkel op het aantal studenten berekend wordt).&amp;quot;&lt;/p&gt;
  11593. &lt;h2&gt;Praktisch&lt;/h2&gt;
  11594. &lt;p&gt;Jeroen Hulscher en ik hebben inmiddels een paar keer geprobeerd om geïnteresseerden in een lidmaatschap van de onderwijscommissie bij elkaar te krijgen. Dit blijkt wat lastig te zijn. We stellen dan ook voor om de eerste bijeenkomsten digitaal te doen, via verschillende kanalen. Iedereen kan mee komen praten op het informele IRC kanaal &lt;a href=&quot;irc://irc.freenode.net/fronteers_onderwijs&quot;&gt;#fronteers_onderwijs&lt;/a&gt; op &lt;a href=&quot;http://webchat.freenode.net/?channels=fronteers_onderwijs&quot;&gt;Freenode&lt;/a&gt;. Alle Fronteers-leden worden uiteraard uitgenodigd om op &lt;a href=&quot;http://forum.fronteers.nl/&quot;&gt;het forum&lt;/a&gt; mee te discussiëren over de bovenstaande onderwerpen. En mensen die zich actief willen inzetten om een van de genoemde activiteiten te verwezenlijken worden lid van de commissie en worden toegevoegd aan de mailinglijst.&lt;/p&gt;
  11595. </content>
  11596.  </entry>
  11597.  <entry>
  11598.    <title>Loop vast warm voor de Algemene Ledenvergadering 2013</title>
  11599.    <link href="https://www.fronteers.nl/nl/blog/2013/10/loop-vast-warm-voor-de-algemene-ledenvergadering-2013"/>
  11600.    <updated>2013-10-26T00:00:00Z</updated>
  11601.    <id>https://www.fronteers.nl/nl/blog/2013/10/loop-vast-warm-voor-de-algemene-ledenvergadering-2013</id>
  11602.    <content xml:lang="nl" type="html">&lt;p&gt;Exacte gegevens volgen binnenkort, maar de datum staat vast, dus die kan vast in je agenda: maandagavond 25 november vindt in Utrecht (nabij C.S.) de Algemene Ledenvergadering van Fronteers plaats.&lt;/p&gt;
  11603. &lt;p&gt;Op de inhoud komen we nog terug, maar de hoofdmoot van de avond wordt gevormd door een terugkoppeling van de commissies die binnen Fronteers opereren, de bestuursverkiezing, en het bespreken van de begroting en nieuwe beleidsvoorstellen.&lt;/p&gt;
  11604. &lt;p&gt;Heb je nu al vragen of voorstellen, reageer dan via het blog of &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;neem contact op met bestuur&lt;/a&gt;.&lt;/p&gt;
  11605. </content>
  11606.  </entry>
  11607.  <entry>
  11608.    <title>Bijeenkomst bij Digiti in Zoersel (Antwerpen)</title>
  11609.    <link href="https://www.fronteers.nl/nl/blog/2013/10/bijeenkomst-digiti"/>
  11610.    <updated>2013-10-16T00:00:00Z</updated>
  11611.    <id>https://www.fronteers.nl/nl/blog/2013/10/bijeenkomst-digiti</id>
  11612.    <content xml:lang="nl" type="html">&lt;p&gt;Op 31 oktober e.k. is Fronteers voor de tweede keer te gast bij &lt;a href=&quot;http://www.digiti.be/&quot;&gt;Digiti Interactive Media&lt;/a&gt; in Zoersel bij Antwerpen. Zoals steeds, hebben we twee uitstekende sprekers kunnen strikken.&lt;/p&gt;
  11613. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11614. &lt;ul&gt;
  11615. &lt;li&gt;18:00: Ontvangst met belegde broodjes en een drankje&lt;/li&gt;
  11616. &lt;li&gt;19:00: Bert Timmermans van &lt;a href=&quot;http://www.digiti.be/&quot;&gt;Digiti&lt;/a&gt; vertelt over zijn &lt;em&gt;uit de hand gelopen Pokémon-remake-project in HTML5&lt;/em&gt;&lt;/li&gt;
  11617. &lt;li&gt;20:00: Kristof Houben van Mobile Vikings deelt graag zijn kijk op &lt;em&gt;design thinking&lt;/em&gt; met jullie&lt;/li&gt;
  11618. &lt;li&gt;21:00: Naborrelen met een drankje&lt;/li&gt;
  11619. &lt;/ul&gt;
  11620. &lt;h2&gt;Waar?&lt;/h2&gt;
  11621. &lt;p&gt;Dit evenement vindt plaats bij Digiti in Zoersel (bij Antwerpen). Er is een plannetje beschikbaar op de &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/bijeenkomst-bij-digiti-op-31-oktober&quot;&gt;detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  11622. &lt;h2&gt;Wie?&lt;/h2&gt;
  11623. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 75 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/digiti&quot;&gt;Meld je daarom aan via het aanmeldformulier&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  11624. </content>
  11625.  </entry>
  11626.  <entry>
  11627.    <title>Discussieer mee over de toekomst van styling op het web met Bert Bos</title>
  11628.    <link href="https://www.fronteers.nl/nl/blog/2013/09/bijeenkomst-what-should-the-web-look-like"/>
  11629.    <updated>2013-09-24T00:00:00Z</updated>
  11630.    <id>https://www.fronteers.nl/nl/blog/2013/09/bijeenkomst-what-should-the-web-look-like</id>
  11631.    <content xml:lang="nl" type="html">&lt;p&gt;Donderdag 3 oktober organiseren de Internet Society Nederland (ISOC), Waag Society en W3C Benelux een bijeenkomst onder de titel &amp;quot;What should the web look like next&amp;quot;. Het design en de bouw van websites en -applicaties wordt sterk bepaald door de (on)mogelijkheden van de techniek. Zaken die door CSS makkelijk (of mogelijk) worden gemaakt zie je overal terug, en hebben daarmee grote invloed op de uitstraling, portabiliteit en individualiteit van websites en de gebruiksvriendelijkheid van webapplicaties en games. Onder leiding van Bert Bos (een van de grondleggers van CSS) wordt er een avond lang ingegaan op vragen als &amp;quot;Hoe willen we als creatieve industrie dat het web er over tien jaar uitziet?&amp;quot; en &amp;quot;Aan welke features heb jij behoefte?&amp;quot; Dit is je kans om invloed uit te kunnen oefenen op het ontwerpproces van de toekomstige standaarden!&lt;/p&gt;
  11632. &lt;p&gt;Het programma van de avond ziet er als volgt uit:&lt;/p&gt;
  11633. &lt;ul&gt;
  11634. &lt;li&gt;19.45 uur Deuren open&lt;/li&gt;
  11635. &lt;li&gt;20.00 uur Intro&lt;/li&gt;
  11636. &lt;li&gt;20.10 uur Bert Bos aan het woord&lt;/li&gt;
  11637. &lt;li&gt;20.45 uur Plenaire discussie&lt;/li&gt;
  11638. &lt;li&gt;21.30 uur (Decentrale) voortzetting van de gesprekken annex borrel&lt;/li&gt;
  11639. &lt;li&gt;22.30 uur Einde&lt;/li&gt;
  11640. &lt;/ul&gt;
  11641. &lt;p&gt;En dit alles vindt plaats bij De Waag, aan de Nieuwmarkt 4 te Amsterdam.&lt;/p&gt;
  11642. &lt;p&gt;&lt;a href=&quot;http://waag.org/nl/event/bert-bos&quot;&gt;Schrijf je nu gratis in&lt;/a&gt;&lt;/p&gt;
  11643. </content>
  11644.  </entry>
  11645.  <entry>
  11646.    <title>Fronteers zeiluitje 2013</title>
  11647.    <link href="https://www.fronteers.nl/nl/blog/2013/09/fronteers-zeiluitje-2013"/>
  11648.    <updated>2013-09-23T00:00:00Z</updated>
  11649.    <id>https://www.fronteers.nl/nl/blog/2013/09/fronteers-zeiluitje-2013</id>
  11650.    <content xml:lang="nl" type="html">&lt;p&gt;Wat kan je nou weer schrijven over een middagje zeilen met Fronteers-nerds? Feitelijk komt het namelijk hier op neer: &lt;a href=&quot;https://mapsengine.google.com/map/viewer?mid=zr5DYH-X-oKg.kMAX99Ddbwp4&quot;&gt;na een paar ruime bézier-curves, en een tijdelijke vastloper&lt;/a&gt;, kwamen we uiteindelijk weer aan waar we vertrokken waren. In Muiden. Maar deze bézier-curves trokken we niet met een slimme webtool, we moesten ze &lt;em&gt;fysiek&lt;/em&gt; creëren door aan touwen te sjorren, aan stuurwielen te draaien, door de fokkel, de gaffel en de snoevel op tijd bij te foksen, door het glooizeil strak te laten doorbokkelen, en door punten aan de einder als referentie te nemen. &lt;em&gt;“Wat inefficiënt en onbetrouwbaar!”&lt;/em&gt; hoor ik u denken, en zo was het maar net. Gelukkig zitten wij al weer veilig en wel achter onze computers &lt;em&gt;echte&lt;/em&gt; bézier-curves te programmeren.&lt;/p&gt;
  11651. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2013/bezier.png&quot; alt=&quot;De gevaren bézier curves&quot; /&gt;&lt;/p&gt;
  11652. &lt;p&gt;Maar deze verandering van omgeving, het verkeren in de buitenlucht, was eigenlijk best prettig. Iemand merkte, terecht, op dat het allemaal best wel op Google Earth leek. Alleen dan een stuk trager natuurlijk: als een stuk zee een beetje saai was, dan kon je helaas niet gewoon even wat harder doorscrollen naar iets spannends. Gelukkig hadden we voor dat soort momenten allemaal onze telefoons bij ons waardoor we het contact met de &lt;em&gt;echte&lt;/em&gt; wereld niet kwijtraakten. Ik heb wel eens gehoord over mensen die kikken op snelle hardware en gepolijste software, die waren gelukkig niet aan boord. De conclusie was toch duidelijk dat de Nokia Aisha het mooiste apparaat was, vooral vanwege het feit dat het een puur &lt;em&gt;single-task-driven&lt;/em&gt; apparaat is. Je kan óf een foto maken, óf muziek luisteren, niet allebei. Verfrissend. Het bijzonder inaccurate &lt;em&gt;touch-screen&lt;/em&gt; van de spiksplinternieuwe ZTE Open met Firefox OS er op werd ook zeer op prijs gesteld. Nu IE6 weg is moeten we onze uitdagingen elders zoeken.&lt;/p&gt;
  11653. &lt;p&gt;Maar eens &lt;em&gt;face to face&lt;/em&gt; met een groepje mensen praten, dat heeft toch eigenlijk ook wel wat. We hebben gesproken over het organiseren van bijeenkomsten, over ontwerpen voor grote én kleine schermen, over toekomstplannen, over de vraag of het al tijd was om wijn te drinken, over synchronisatiesoftware, over progressive enhancement, over de (on)mogelijkheid van responsive design. We hebben de saaie skyline van Amsterdam vergeleken met de indrukwekkende skylines van Tilburg en van Stadskanaal a.k.a. &#39;Manhattan aan &#39;t K’noal&#39;. Ik heb met mensen — partners van — gesproken over kindvriendelijke wijken, over goede scholen, over de kinderen, en over &lt;em&gt;werk&lt;/em&gt;. Ik heb gehoord dat mensen het over JavaScript hadden, over closures enzo. Het nadeel van al deze gesprekken is natuurlijk, dat je ze niet even kunt teruglezen, zoals op IRC. We zullen het dus moeten doen met ons &lt;em&gt;fysieke&lt;/em&gt; geheugen. En met &lt;a href=&quot;http://www.ipernity.com/doc/337525/album/518837&quot;&gt;de foto’s van Edwin&lt;/a&gt;.&lt;/p&gt;
  11654. &lt;p&gt;Voor mij was het voor het eerst dat ik meezeilde. Ik heb genoten. Eindelijk eens écht de tijd om met een paar mensen bij te praten. Eindelijk de tijd om een paar mensen in het echt te ontmoeten en om van gedachten te wisselen. Gewoon eens een uur lang ouwehoeren over de mogelijke weergave van een theater in een responsive booking tool. Gewoon even lekker klagen over designers &lt;em&gt;zonder dat ze zich er mee gaan bemoeien op Twitter!&lt;/em&gt; En gewoon lekker een middag lang rode wijn drinken en gebraden vlees eten. &lt;a href=&quot;https://twitter.com/paulvanbuuren/status/381494369980653568/photo/1/large&quot;&gt;De schat&lt;/a&gt; hebben we dit jaar niet gevonden. Des te meer reden om uit te zien naar het trippie van volgend jaar!&lt;/p&gt;
  11655. </content>
  11656.  </entry>
  11657.  <entry>
  11658.    <title>De congrescommissie zoekt actieve leden</title>
  11659.    <link href="https://www.fronteers.nl/nl/blog/2013/09/de-congrescommissie-zoekt-actieve-leden"/>
  11660.    <updated>2013-09-18T00:00:00Z</updated>
  11661.    <id>https://www.fronteers.nl/nl/blog/2013/09/de-congrescommissie-zoekt-actieve-leden</id>
  11662.    <content xml:lang="nl" type="html">&lt;p&gt;Het Fronteerscongres is een van de allertofste en meest opvallende dingen die Fronteers doet. Het wordt elk jaar bezocht door enkele honderden internationale bezoekers en het wordt geroemd om de hoge kwaliteit van de sprekers (en de relaxte ambiance!). Het organiseren van dit congres wordt gedaan door een kleine groep zeer gedreven vrijwilligers, die hier enorm veel tijd insteken. Niet iedereen heeft hier elk jaar de tijd voor, en dus ook dit jaar zijn er weer een paar leden die de congrescommissie gaan verlaten. We zijn dus weer op zoek naar nieuwe leden voor deze commissie.&lt;/p&gt;
  11663. &lt;p&gt;Lid zijn van de congrescommissie is geen luizenbaantje, helaas. De handen moeten uit de mouwen. Er moet een selectie van (internationale) sprekers gemaakt worden, deze mensen moeten stuk voor stuk uitgenodigd (en overtuigd) worden, ze moeten gehuisvest worden, ze moeten hierheen gevlogen worden (met hun moeder, als ze daar om vragen), ze moeten vertroeteld worden en gestimuleerd om een absolute top-presentatie te geven. Er moet een zaal geregeld worden met zachte stoelen, betrouwbare Wifi, met een goede lunch, met een goede technische dienst, met voldoende WC&#39;s en meer dan genoeg te drinken. Er moeten badges ontworpen worden, en T-shirts, en goodies, en banners, en een site wellicht! Er moet een sprekersdiner georganiseerd worden, en een pre-party, en een tussen-party, en eventueel een after-party. De kaartverkoop moet geregeld worden, de financiën moeten op orde zijn, er moeten mails en tweets beantwoord worden van bezoekers, sprekers, mensen die geen kaartje hebben, mensen die een kaartje overhebben, sponsoren en blije fans. De website moet gevuld worden met relevante informatie voor zowel lokale als internationale bezoekers. Er moeten vrijwilligers gevonden worden zodat alles tijdens het congres zelf op rolletjes loopt. En alsof dat niet genoeg is, er moeten naast het congres óók nog een paar workshops geregeld worden, wat neerkomt op een herhaling van het bovenstaande. Bovendien zit het Fronteersbestuur continu in je nek te hijgen. Dit is veel werk. En nog niet eens  alles wat er gedaan moet worden.&lt;/p&gt;
  11664. &lt;p&gt;Hopelijk haken sommigen door deze opsomming af, en dat is ook de bedoeling. Het is namelijk écht veel werk, en we willen graag voorkomen dat je je daar op verkijkt. Hoeveel werk het precies is is natuurlijk lastig te zeggen. In december zal het natuurlijk rustiger zijn dan in de weken voor het congres. Hou er rekening mee dat je veel van je vrije tijd gaat besteden aan de mooie taak van het organiseren van een topcongres.&lt;/p&gt;
  11665. &lt;p&gt;Mocht bovenstaande, incomplete, opsomming van taken je juist aanspreken, en mocht je graag, het liefst meerdere jaren, mee willen werken aan een van dé nerd-happenings van Nederland, meld je dan via onderstaand formulier aan als commisielid. Met een motivatie, met &lt;a href=&quot;https://www.fronteers.nl/congres/2013/colophon&quot;&gt;de werkzaamheden die je graag zou willen doen&lt;/a&gt;. Je gaat dan wellicht deel uitmaken van een bijzonder toffe, goed geoliede, ervaren commissie, en je kunt dan rekenen op de ondersteuning van (oud) leden. Maar onthoud, het is absoluut een eervolle taak, een heel erg leuk om te doen, en een groot feest, maar het is ook écht heel veel werk.&lt;/p&gt;
  11666. &lt;p&gt;Als je nog vragen hebt hierover, neem dan contact op met een van de &lt;a href=&quot;https://www.fronteers.nl/congres/2013/colophon&quot;&gt;huidige leden van de commissie&lt;/a&gt;. Je kan hun contactgegevens gewoon vinden op het internet! Ze zijn ook vaak te vinden op het &lt;a href=&quot;http://webchat.freenode.net/?channels=fronteers&quot;&gt;IRC kanaal van Fronteers&lt;/a&gt; en ze lopen natuurlijk rond op het congres zelf. Jezelf aanmelden kan tot 21 oktober. Eind oktober, begin november krijg je dan te horen of je je volgend jaar uit de naad mag werken voor de volgende editie van dit prachtige evenement.&lt;/p&gt;
  11667. </content>
  11668.  </entry>
  11669.  <entry>
  11670.    <title>Zomerborrel in Utrecht op 30 augustus</title>
  11671.    <link href="https://www.fronteers.nl/nl/blog/2013/08/zomerborrel-utrecht"/>
  11672.    <updated>2013-08-28T00:00:00Z</updated>
  11673.    <id>https://www.fronteers.nl/nl/blog/2013/08/zomerborrel-utrecht</id>
  11674.    <content xml:lang="nl" type="html">&lt;p&gt;Omdat het zomer is, en borrelen leuk is, organiseert Fronteers weer een zomerborrel. De borrel vindt plaats bij &lt;a href=&quot;http://www.kingarthur-utrecht.nl/&quot;&gt;King Arthur&lt;/a&gt; aan de Oudegracht in Utrecht. Iedereen is welkom om een drankje mee te genieten op deze avond vanaf circa 18:00.&lt;/p&gt;
  11675. &lt;p&gt;Geef hieronder in de reacties door als je aanwezig zult zijn. Er is geen tafel gereserveerd, dus houd een oog open voor Fronteers-gerelateerde goodies die aangeven waar de groep zit. Zoals gebruikelijk is het eerste drankje op kosten van Fronteers! Tot vrijdag!&lt;/p&gt;
  11676. </content>
  11677.  </entry>
  11678.  <entry>
  11679.    <title>Update van de commissie congres</title>
  11680.    <link href="https://www.fronteers.nl/nl/blog/2013/08/update-congres"/>
  11681.    <updated>2013-08-19T00:00:00Z</updated>
  11682.    <id>https://www.fronteers.nl/nl/blog/2013/08/update-congres</id>
  11683.    <content xml:lang="nl" type="html">&lt;p&gt;Fronteers 2013 is uitverkocht, kaarten voor de workshop van Harry Roberts zijn nu verkrijgbaar, er komt een speciale praktijksessie en we zullen weer boeken weggeven.&lt;/p&gt;
  11684. &lt;h2&gt;Congres uitverkocht&lt;/h2&gt;
  11685. &lt;p&gt;Zoals je misschien al gezien had, is Fronteers 2013 inmiddels uitverkocht. Het is dit jaar nog sneller gegaan dan eerdere jaren, en daar zijn we als commissie natuurlijk best een beetje trots op. Wie nog geen kaartje heeft, maar wel graag wil komen, kan het beste &lt;a href=&quot;https://twitter.com/fronteersconf&quot;&gt;@FronteersConf&lt;/a&gt; op Twitter in de gaten houden. Met dit account retweeten we mensen die hun kaartje willen verkopen. Als we nog kaartjes beschikbaar maken, kondigen we het ook daar aan.&lt;/p&gt;
  11686. &lt;h2&gt;Workshop: “planning and building a big front-end”&lt;/h2&gt;
  11687. &lt;p&gt;Harry Roberts, bekend van zijn blog &lt;a href=&quot;http://csswizardry.com/&quot;&gt;CSS Wizardry&lt;/a&gt;, zal dit jaar niet alleen spreken in het reguliere programma, hij gaat ook een eendaagse workshop geven. Harry zal ingaan op front-end development voor grote websites, waarbij de focus zal liggen op HTML en CSS. Denk bijvoorbeeld aan code-organisatie, slimme naamgeving, performance en effectief gebruik van SASS. De workshop vindt plaats op de dag voor het congres in het mooie &lt;a href=&quot;http://felixmeritis.nl/&quot;&gt;Felix Meritis&lt;/a&gt; en wordt gegeven in het Engels.&lt;/p&gt;
  11688. &lt;p&gt;De kosten: €350, exclusief btw, inclusief lunch. Fronteersleden krijgen €75 korting; gebruik hiervoor de link waarmee je ook ledenkaarten kon kopen. Voor wie nog geen kaartje heeft voor het congres zelf: er zijn ook enkele combinatietickets beschikbaar, zolang de vooraad strekt.&lt;/p&gt;
  11689. &lt;ul&gt;
  11690. &lt;li&gt;&lt;a href=&quot;http://fronteers.paydro.net/&quot;&gt;Tickets voor niet-leden&lt;/a&gt;&lt;/li&gt;
  11691. &lt;li&gt;Tickets voor leden: zie nieuwsbrief eind april of mail ons voor de link (congres@fronteers.nl)&lt;/li&gt;
  11692. &lt;/ul&gt;
  11693. &lt;h2&gt;Nieuw programma-onderdeel: de praktijksessie&lt;/h2&gt;
  11694. &lt;p&gt;Dit jaar introduceert Fronteers een nieuw onderdeel in het programma. Tijdens deze ‘praktijksessie’ geven we het woord aan drie makers van websites die het afgelopen jaar opvielen. Ze zullen tien minuten over het project vertellen, waarna er tien minuten ruimte is voor vragen uit de zaal. De projecten: &lt;a href=&quot;http://rijksmuseum.nl/&quot;&gt;Rijksmuseum&lt;/a&gt; (met Elaine Oliver van Q42), &lt;a href=&quot;http://gov.uk/&quot;&gt;GOV.UK&lt;/a&gt; (met Edd Sowden van GDS) en &lt;a href=&quot;http://9292.nl/&quot;&gt;9292.nl&lt;/a&gt; (met Anton Vanhoucke van Fabrique).&lt;/p&gt;
  11695. &lt;h2&gt;Book raffle&lt;/h2&gt;
  11696. &lt;p&gt;Wegens succes herhaald: de book raffle. Net zoals vorig jaar zullen we ook dit jaar weer een grote hoeveelheid boeken verloten. We hebben contact gezocht met een aantal van de betere uitgeverijen van boeken over front-end development, en die hebben zich wederom gul getoond. Iedereen met een (betaald) ticket doet automatisch mee: het grote scherm kiest de namen en de winnaars mogen uitzoeken.&lt;/p&gt;
  11697. </content>
  11698.  </entry>
  11699.  <entry>
  11700.    <title>Update Workshop Commissie</title>
  11701.    <link href="https://www.fronteers.nl/nl/blog/2013/08/update-workshop-commissie"/>
  11702.    <updated>2013-08-02T00:00:00Z</updated>
  11703.    <id>https://www.fronteers.nl/nl/blog/2013/08/update-workshop-commissie</id>
  11704.    <content xml:lang="nl" type="html">&lt;p&gt;Het is de afgelopen tijd wat rustig geweest op workshopgebied maar op 20 september zal Arjan Eising zijn workshop ‘jQuery Inception’ nogmaals geven, bij Seats2Meet in Utrecht. Daarnaast is de commissie op zoek naar versterking.&lt;/p&gt;
  11705. &lt;p&gt;Tijdens de workshop jQuery Inception zul je de basis van JavaScript programmeren en het gebruik van jQuery leren. Aan het einde van de dag ben je niet alleen in staat JavaScript code te lezen en begrijpen, maar ook zelf te plannen en uit te programmeren. Meer informatie over de workshop, en het aanmelden ervoor, vind je op de pagina &lt;a href=&quot;https://www.fronteers.nl/workshops/jquery-inception-arjan-eising&quot;&gt;jQuery Inception&lt;/a&gt;.&lt;/p&gt;
  11706. &lt;p&gt;Verder is de commissie met het oog op een aanstaande wisseling van de wacht, op zoek naar een nieuw lid. Als lid denk je mee over de toekomst van de commissie en handel je praktische zaken af die nodig zijn om een workshop neer te zetten. Denk daarbij aan het mailen met trainers en mensen die zich opgeven voor workshops, het boeken van de locatie, etcetera. Als je interesse hebt stuur dan een e-mail via &lt;a href=&quot;https://www.fronteers.nl/workshops&quot;&gt;dit formulier&lt;/a&gt; (kies &amp;quot;een andere...&amp;quot;).&lt;/p&gt;
  11707. </content>
  11708.  </entry>
  11709.  <entry>
  11710.    <title>Bijeenkomst op 11 juli bij MMLab</title>
  11711.    <link href="https://www.fronteers.nl/nl/blog/2013/07/bijeenkomst-mmlab"/>
  11712.    <updated>2013-07-01T00:00:00Z</updated>
  11713.    <id>https://www.fronteers.nl/nl/blog/2013/07/bijeenkomst-mmlab</id>
  11714.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 11 juli 2013 is Fronteers te gast bij &lt;a href=&quot;http://multimedialab.elis.ugent.be/about&quot;&gt;Multimedia Lab (iMinds / Universiteit Gent)&lt;/a&gt; in Gent. Er worden twee presentaties voorzien.&lt;/p&gt;
  11715. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11716. &lt;ul&gt;
  11717. &lt;li&gt;18:00 ontvangst met een drankje&lt;/li&gt;
  11718. &lt;li&gt;19:00 Tom Van Goethem over &lt;em&gt;Security Analysis of the Belgian Web&lt;/em&gt;&lt;/li&gt;
  11719. &lt;li&gt;20:00 Ruben Verborgh over &lt;em&gt;The Web — a hypermedia story. Past, present, and future.&lt;/em&gt;&lt;/li&gt;
  11720. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  11721. &lt;/ul&gt;
  11722. &lt;h2&gt;Waar?&lt;/h2&gt;
  11723. &lt;p&gt;Dit evenement vindt plaats bij MMLab te Gent. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/mmlab&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  11724. &lt;h2&gt;Wie?&lt;/h2&gt;
  11725. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 60 mannen en vrouwen.&lt;/p&gt;
  11726. </content>
  11727.  </entry>
  11728.  <entry>
  11729.    <title>30% korting op From the Front 2013 in Bologna</title>
  11730.    <link href="https://www.fronteers.nl/nl/blog/2013/05/korting-from-the-front-bologna"/>
  11731.    <updated>2013-05-28T00:00:00Z</updated>
  11732.    <id>https://www.fronteers.nl/nl/blog/2013/05/korting-from-the-front-bologna</id>
  11733.    <content xml:lang="nl" type="html">&lt;p&gt;Net als &lt;a href=&quot;https://www.fronteers.nl/blog/2012/05/korting-treasure-of-frontend-island-bologna&quot;&gt;vorig jaar&lt;/a&gt; geeft &lt;a href=&quot;http://2013.fromthefront.it/&quot;&gt;From the Front&lt;/a&gt; in Bologna, Italië, op 20 september 2013, ons weer 30% korting op hun congres. Dit jaar is het thema: The Frontend Brothers.&lt;/p&gt;
  11734. &lt;p&gt;Sprekers zijn dit jaar Seb Lee-Delisle, Aaron Gustafson, Nishant Kothary, Marta Armada, Rachel Nabors, Relly Annett-Baker, Paul Annett, Ben Hammersley en Sebastian Golasch. Vorig jaar maakten 5 van onze leden gebruik van deze korting en de reviews waren erg goed!&lt;/p&gt;
  11735. &lt;p&gt;Een kaartje kost normaal € 99,- (als je een EU btw-nummer hebt); na de 30% korting slechts € 69,30. De korting geldt niet voor de workshops op 19 september.&lt;/p&gt;
  11736. &lt;p&gt;Wil je gebruik maken van deze korting, &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;neem dan even contact op&lt;/a&gt; met de ledenadministratie. Zoals gebruikelijk geldt de korting uitsluitend voor diegenen die op dit moment lid zijn.&lt;/p&gt;
  11737. </content>
  11738.  </entry>
  11739.  <entry>
  11740.    <title>BBQ bij eFocus in Amsterdam op 20 juni</title>
  11741.    <link href="https://www.fronteers.nl/nl/blog/2013/05/bbq-bij-efocus"/>
  11742.    <updated>2013-05-24T00:00:00Z</updated>
  11743.    <id>https://www.fronteers.nl/nl/blog/2013/05/bbq-bij-efocus</id>
  11744.    <content xml:lang="nl" type="html">&lt;p&gt;Donderdag 20 juni is Fronteers te gast bij &lt;a href=&quot;http://www.efocus.nl/&quot;&gt;eFocus&lt;/a&gt; in Amsterdam. Naast een
  11745. presentatie van Jeroen Hulscher trakteert eFocus op een BBQ.&lt;/p&gt;
  11746. &lt;h2&gt;Programma&lt;/h2&gt;
  11747. &lt;ul&gt;
  11748. &lt;li&gt;18:00 inloop met BBQ&lt;/li&gt;
  11749. &lt;li&gt;19:30 uitgebreide kennissessie met Jeroen Hulscher&lt;/li&gt;
  11750. &lt;li&gt;21:30 borrelen&lt;/li&gt;
  11751. &lt;li&gt;22:30 einde&lt;/li&gt;
  11752. &lt;/ul&gt;
  11753. &lt;p&gt;&amp;quot;Toegankelijk bouwen is onzin, ik heb geen blinde bezoekers.&amp;quot; Geen uitspraak zo ondoordacht als deze, want als we het hebben over zoekmachines wil iedereen ineens bovenaan de resultaten verschijnen. En zoekmachines zijn allen doof, blind en motorisch beperkt. Bovendien is ontoegankelijke informatie voor niemand prettig te gebruiken, en hebben we allemaal baat bij begrijpelijke content.&lt;/p&gt;
  11754. &lt;p&gt;Tijdens deze sessie kijken we onder de motorkap van het internet en zoomen we in op de gelaagdheid van onze producten. Hoe zorgen we ervoor dat onze boodschap bij iedereen overkomt zoals het bedoeld is, ongeacht technologische of menselijke beperkingen? We bespreken uitdagingen, oplossingen en met behulp van een mystery guest ontdekken we hoe mensen met een beperking gebruik maken van het internet.&lt;/p&gt;
  11755. &lt;h2&gt;Bereikbaarheid en aanmelden&lt;/h2&gt;
  11756. &lt;p&gt;eFocus is gevestigd aan de Cruquiusweg 109e, 1019 AG Amsterdam. &lt;a href=&quot;http://www.efocus.nl/contact/route/amsterdam.aspx&quot;&gt;Plan hier je route&lt;/a&gt;. Kom bij voorkeur met openbaar vervoer want het aantal parkeerplaatsen is beperkt. Kijk op &lt;a href=&quot;http://9292.nl/&quot;&gt;9292.nl&lt;/a&gt;, pak de fiets of ga eventueel carpoolen.&lt;/p&gt;
  11757. &lt;p&gt;Zoals gebruikelijk is iedereen welkom, zowel leden, als niet-leden. Er is ruimte voor 50 deelnemers. Wel is gewenst dat je doorgeeft dat je komt, via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/efocus&quot;&gt;formulier op de bijeenkomstpagina&lt;/a&gt;.&lt;/p&gt;
  11758. </content>
  11759.  </entry>
  11760.  <entry>
  11761.    <title>Bijeenkomst bij eBuddy in Amsterdam op 30 mei</title>
  11762.    <link href="https://www.fronteers.nl/nl/blog/2013/05/bijeenkomst-ebuddy"/>
  11763.    <updated>2013-05-06T00:00:00Z</updated>
  11764.    <id>https://www.fronteers.nl/nl/blog/2013/05/bijeenkomst-ebuddy</id>
  11765.    <content xml:lang="nl" type="html">&lt;p&gt;Donderdag 30 mei is Fronteers te gast bij &lt;a href=&quot;http://ebuddy.com/&quot;&gt;eBuddy&lt;/a&gt; in Amsterdam. Twee presentaties staan op het programma. Jan van Hellemond vertelt over SVG voor het responsive web, en Andrei Rusu spreekt over client-side architectuur van server sent events.&lt;/p&gt;
  11766. &lt;h2&gt;Programma&lt;/h2&gt;
  11767. &lt;ul&gt;
  11768. &lt;li&gt;18:30 inloop&lt;/li&gt;
  11769. &lt;li&gt;19:30 Jan van Hellemond – SVG voor het responsive web&lt;/li&gt;
  11770. &lt;li&gt;20:30 korte pauze&lt;/li&gt;
  11771. &lt;li&gt;20:45 Andrei Rusu – Real time client-server architecture using Server-Sent Events&lt;/li&gt;
  11772. &lt;li&gt;21:45 borrel&lt;/li&gt;
  11773. &lt;/ul&gt;
  11774. &lt;h2&gt;SVG voor het responsive web&lt;/h2&gt;
  11775. &lt;p&gt;Responsive Web Design wordt dé zomertrend van 2013. Internetgebruik op kleine schermen groeit enorm. En het aantal pixels per vierkante centimeter neemt razendsnel toe. Het wordt steeds moeilijker om al die pixels op al die formaten te vullen met de traditionele bestandsformaten GIF, JPEG en PNG. Vectoren hebben geen last van pixels. Met mathematische precisie schalen ze moeiteloos op en neer voor een strakke presentatie op elke formaat scherm, retina of niet.&lt;/p&gt;
  11776. &lt;p&gt;Scalable Vector Graphics (SVG) zijn een eersterangs burger geworden in HTML5. Een totaaloplossing is het vooralsnog zeker niet. Jan ging op zoek naar de heilige graal en deelt graag zijn bevindingen.&lt;/p&gt;
  11777. &lt;h2&gt;[lang=&amp;quot;en&amp;quot;] Real time client-server architecture using Server-Sent Events&lt;/h2&gt;
  11778. &lt;p&gt;A talk on accelerating the delivery and processing of real-time events from server to client, along with a real life case example of Server-Sent Events in action.&lt;/p&gt;
  11779. &lt;h2&gt;Bereikbaarheid en aanmelden&lt;/h2&gt;
  11780. &lt;p&gt;eBuddy is gevestigd aan Keizersgracht 585, 1017 DR Amsterdam. Zoals gebruikelijk is iedereen welkom, zowel leden, als niet-leden. Wel is gewenst dat je doorgeeft dat je komt, via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/ebuddy&quot;&gt;formulier op de bijeenkomstpagina&lt;/a&gt;.&lt;/p&gt;
  11781. </content>
  11782.  </entry>
  11783.  <entry>
  11784.    <title>€60 korting op workshop RWD in de praktijk</title>
  11785.    <link href="https://www.fronteers.nl/nl/blog/2013/05/60-korting-op-workshop-rwd-in-de-praktijk"/>
  11786.    <updated>2013-05-01T00:00:00Z</updated>
  11787.    <id>https://www.fronteers.nl/nl/blog/2013/05/60-korting-op-workshop-rwd-in-de-praktijk</id>
  11788.    <content xml:lang="nl" type="html">&lt;p&gt;Loop je tegen praktische problemen aan bij het doorvoeren van de principes van responsive webdesign (RWD) in je workflow? Zit je middenin responsive webdesign en wil je er verder mee? Heb je oplossingen maar merk je dat die ten koste gaan van performance?&lt;/p&gt;
  11789. &lt;p&gt;Frontlab uit Amsterdam heeft een workshop om je verder te helpen met precies dit soort kwesties. In een workshop van één dag wordt aan de hand van echte projectcode gekeken naar best practices voor development en workflow. Deelnemers krijgen bovendien het boek Responsive Design Workflow mee naar huis. Er zijn nog plaatsen vrij voor de &lt;a href=&quot;https://web.archive.org/web/20231130204455/http://frontlab.nl/workshop-responsive-web-design&quot;&gt;intensieve workshop op woensdag 22 mei 2013&lt;/a&gt;.&lt;/p&gt;
  11790. &lt;p&gt;Fronteersleden krijgen €60 korting op de toegangsprijs van €329. Vink bij het inschrijven aan dat je Fronteerslid bent en je krijgt automatisch korting. Je hoeft hiervoor niet eerst contact op te nemen met Fronteers.&lt;/p&gt;
  11791. </content>
  11792.  </entry>
  11793.  <entry>
  11794.    <title>Bijeenkomst op 23 mei bij Thomas More</title>
  11795.    <link href="https://www.fronteers.nl/nl/blog/2013/04/bijeenkomst-thomas-more"/>
  11796.    <updated>2013-04-29T00:00:00Z</updated>
  11797.    <id>https://www.fronteers.nl/nl/blog/2013/04/bijeenkomst-thomas-more</id>
  11798.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 23 mei 2013 is Fronteers te gast bij de opleiding Interactive Multimedia Design aan &lt;a href=&quot;http://www.thomasmore.be/&quot;&gt;de Thomas More-hogeschool&lt;/a&gt; te Mechelen met als centrale thema &lt;em&gt;data-visualisatie&lt;/em&gt;.&lt;/p&gt;
  11799. &lt;p&gt;Er worden twee presentaties voorzien. Toon Ketels (&lt;a href=&quot;https://twitter.com/toonketels&quot;&gt;@toonketels&lt;/a&gt;) zal een intro geven over &lt;a href=&quot;http://d3js.org/&quot;&gt;D3.js&lt;/a&gt;. Hoe werk je ermee, wat zijn de concepten achter de library en hoe ga je ermee aan de slag?&lt;/p&gt;
  11800. &lt;p&gt;Andries De Reyghere, zaakvoerder van &lt;a href=&quot;http://www.bitsoflove.be/&quot;&gt;Bits of Love&lt;/a&gt;, zal zijn inzichten delen over het runnen van een bedrijf dat zich specialiseert in data-visualisatie.&lt;/p&gt;
  11801. &lt;p&gt;Daarnaast geven Bart de Man (&lt;a href=&quot;http://www.ticketmatic.com/&quot;&gt;Ticketmatic&lt;/a&gt;), Johan Ronsse (&lt;a href=&quot;http://wolfslittlestore.be/&quot;&gt;Wolf’s Little Store&lt;/a&gt;) en Piet Jaspers (&lt;a href=&quot;http://10to1.be/&quot;&gt;10to1&lt;/a&gt;) een demo van hun werk met D3.js.&lt;/p&gt;
  11802. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11803. &lt;ul&gt;
  11804. &lt;li&gt;18:00 ontvangst met een drankje — voor de hongerigen: er is een frituur vlakbij&lt;/li&gt;
  11805. &lt;li&gt;19:15 Toon Ketels: &lt;em&gt;Intro to D3.js&lt;/em&gt;&lt;/li&gt;
  11806. &lt;li&gt;20:00 Demo’s (Bart de Man, Piet Jaspers, Johan Ronsse)&lt;/li&gt;
  11807. &lt;li&gt;20:30 Andries De Reyghere: &lt;em&gt;Insights in data visualisation&lt;/em&gt;&lt;/li&gt;
  11808. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  11809. &lt;/ul&gt;
  11810. &lt;h2&gt;Waar?&lt;/h2&gt;
  11811. &lt;p&gt;Dit evenement vindt plaats bij Thomas More Mechelen, meerbepaald op Campus “De Vest” in aula 2. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/thomas-more&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  11812. &lt;h2&gt;Wie?&lt;/h2&gt;
  11813. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa &lt;strike&gt;80&lt;/strike&gt; &lt;strong&gt;100&lt;/strong&gt; mannen en vrouwen.&lt;/p&gt;
  11814. </content>
  11815.  </entry>
  11816.  <entry>
  11817.    <title>Fronteers 2013 kaartverkoop start op 25 april</title>
  11818.    <link href="https://www.fronteers.nl/nl/blog/2013/04/fronteers-2013-kaartverkoop"/>
  11819.    <updated>2013-04-22T00:00:00Z</updated>
  11820.    <id>https://www.fronteers.nl/nl/blog/2013/04/fronteers-2013-kaartverkoop</id>
  11821.    <content xml:lang="nl" type="html">&lt;p&gt;Op 10 en 11 oktober 2013 gaat het Fronteers-congres weer plaatsvinden, wederom in Pathé Tuschinski in Amsterdam. Op donderdag 25 april om 12:00 uur Nederlandse tijd gaat de kaartverkoop van start.&lt;/p&gt;
  11822. &lt;p&gt;Net als in voorgaande jaren is er een beperkt aantal early bird kaarten dat verkocht wordt voor de reguliere kaartverkoop van start gaat. De kaartprijzen zijn niet veranderd ten opzichte van vorig jaar. &lt;em&gt;Voor de early bird kaarten geldt dit jaar wel: op=op, wees er dus snel bij.&lt;/em&gt;&lt;/p&gt;
  11823. &lt;p&gt;Fronteers 2013 early bird kaartje (exclusief 21% btw)
  11824. Fronteersleden €200
  11825. Niet-leden €275&lt;/p&gt;
  11826. &lt;p&gt;Fronteers 2013 regulier kaartje (exclusief 21% btw)
  11827. Fronteersleden €275
  11828. Niet-leden €350&lt;/p&gt;
  11829. &lt;h2&gt;Ledenkorting&lt;/h2&gt;
  11830. &lt;p&gt;Wie op dit moment Fronteerslid is (vóór 22-04-2013) kan zijn of haar kaartje met korting kopen. Je hebt daarvoor &lt;em&gt;de kortingslink nodig uit de Fronteers-nieuwsbrief&lt;/em&gt;, die rond de start van de kaartverkoop wordt verstuurd. Heb je donderdag aan het eind van de dag nog niets ontvangen? Controleer dan je spam folder. Als je daar ook niets vindt, &lt;a href=&quot;mailto:congres@fronteers.nl&quot;&gt;mail ons dan&lt;/a&gt;.&lt;/p&gt;
  11831. &lt;h2&gt;Programma&lt;/h2&gt;
  11832. &lt;p&gt;Sprekers worden bekend gemaakt zodra de early bird kaarten zijn uitverkocht. Wel kunnen we vast een tipje van de sluier oplichten. We hebben een breed programma, met toffe sprekers over onder andere modulaire CSS, ECMAScript 6, responsive images en front-end performance. We doen ons uiterste best om Fronteers 2013 net zo goed, en misschien nog wel een beetje beter te maken dan voorgaande jaren!&lt;/p&gt;
  11833. &lt;p&gt;Update:&lt;/p&gt;
  11834. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/congres/2012/graphics/buttons/buy.png&quot; alt=&quot;Buy tickets (you will be sent to Paydro)&quot; /&gt;&lt;/p&gt;
  11835. </content>
  11836.  </entry>
  11837.  <entry>
  11838.    <title>Bijeenkomst op 25 april bij KaHo St-Lieven</title>
  11839.    <link href="https://www.fronteers.nl/nl/blog/2013/04/bijeenkomst-kahosl"/>
  11840.    <updated>2013-04-19T00:00:00Z</updated>
  11841.    <id>https://www.fronteers.nl/nl/blog/2013/04/bijeenkomst-kahosl</id>
  11842.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 25 april 2013 is Fronteers te gast bij de opleiding &lt;a href=&quot;http://www.ikdoeict.be/&quot;&gt;Professionele Bachelor ICT&lt;/a&gt; (KaHo St-Lieven) te Gent. Er worden twee presentaties voorzien. Bram(us) Van Damme zal het hebben over hoe kaartprojecties, coördinatensystemen, en geografische data binnen een front-end geïmplementeerd kunnen worden; Bart De Clercq van AnySurfer geeft een presentatie over &lt;em&gt;accessibility&lt;/em&gt; voor front-end-ontwikkelaars.&lt;/p&gt;
  11843. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  11844. &lt;ul&gt;
  11845. &lt;li&gt;18:00 ontvangst met een drankje&lt;/li&gt;
  11846. &lt;li&gt;19:00 Bram(us) Van Damme over &lt;em&gt;werken met geografische data binnen een front-end&lt;/em&gt;&lt;/li&gt;
  11847. &lt;li&gt;20:00 Bart De Clercq over &lt;em&gt;accessibility voor front-end-ontwikkelaars&lt;/em&gt;&lt;/li&gt;
  11848. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  11849. &lt;/ul&gt;
  11850. &lt;h2&gt;Waar?&lt;/h2&gt;
  11851. &lt;p&gt;Dit evenement vindt plaats in het J-blok van de Technologiecampus van KaHo St-Lieven te Gent. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/kahosl&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  11852. &lt;h2&gt;Wie?&lt;/h2&gt;
  11853. &lt;p&gt;Iedereen is welkom. Er is echter beperkt plaats, voor circa 70 mannen en vrouwen.&lt;/p&gt;
  11854. </content>
  11855.  </entry>
  11856.  <entry>
  11857.    <title>Updates uit de congrescommissie</title>
  11858.    <link href="https://www.fronteers.nl/nl/blog/2013/04/updates-uit-de-congrescommissie"/>
  11859.    <updated>2013-04-18T00:00:00Z</updated>
  11860.    <id>https://www.fronteers.nl/nl/blog/2013/04/updates-uit-de-congrescommissie</id>
  11861.    <content xml:lang="nl" type="html">&lt;p&gt;De congrescommissie heeft een nieuwe voorzitter, heeft een handboek gemaakt, probeert het dit jaar zonder sponsors en zal zeer spoedig de kaartverkoop aankondigen.&lt;/p&gt;
  11862. &lt;h2&gt;Nieuwe voorzitter&lt;/h2&gt;
  11863. &lt;p&gt;Begin april heeft Peter-Paul Koch de congrescommissie, waarvan hij tot dan voorzitter was, verlaten. De congrescommissie bedankt PPK voor zijn inzet tot zover, en heeft mij gekozen als nieuwe voorzitter. Ik ben Hidde de Vries, betrokken bij het congres sinds 2008. Eerst als vrijwilliger en sinds 2011 ook als lid van de organiserende commissie. Binnen de congrescommissie was ik vorig jaar onder andere verantwoordelijk voor het ontwerp en de sponsors. Dit jaar houd ik mij bezig met de sprekers.&lt;/p&gt;
  11864. &lt;h2&gt;Handboek&lt;/h2&gt;
  11865. &lt;p&gt;We werken, net als in 2010, weer met een handboek, samengesteld uit de ervaringen van afgelopen jaren. Het is gecheckt en verbeterd door meerdere betrokkenen, waaronder zij die er vanaf het begin bij waren: Krijn Hoetmer en Peter-Paul Koch (waarvoor dank!). Ons handboek helpt de organisatie van dit jaar, en kan als basis worden gebruikt voor eventuele komende jaren.&lt;/p&gt;
  11866. &lt;h2&gt;Geen sponsors in 2013&lt;/h2&gt;
  11867. &lt;p&gt;De afgelopen jaren werd het Fronteers-congres mede mogelijk gemaakt door diverse bedrijven uit binnen- en buitenland. We zijn deze bedrijven zeer erkentelijk. In 2013 willen we het echter een jaar zonder sponsors proberen; de begroting laat dit toe en de commissie kan zich zo op andere zaken richten.&lt;/p&gt;
  11868. &lt;h2&gt;Kaartverkoop&lt;/h2&gt;
  11869. &lt;p&gt;De kaartverkoop van Fronteers 2013 laat nog heel even op zich wachten, maar ik kan vast melden dat we daar deze week nog over zullen berichten. Houd dit blog in de gaten voor meer informatie!&lt;/p&gt;
  11870. </content>
  11871.  </entry>
  11872.  <entry>
  11873.    <title>Met korting naar Dutch Mobile Conference</title>
  11874.    <link href="https://www.fronteers.nl/nl/blog/2013/04/met-korting-naar-dutch-mobile-conference"/>
  11875.    <updated>2013-04-16T00:00:00Z</updated>
  11876.    <id>https://www.fronteers.nl/nl/blog/2013/04/met-korting-naar-dutch-mobile-conference</id>
  11877.    <content xml:lang="nl" type="html">&lt;p&gt;Vorig jaar kende de Dutch Mobile Conference haar debuut, met verschillende onderwerpen die laten zien hoe moderne web technologieën ingezet kunnen worden op de verschillende mobiele platformen die de wereld rijk is. In 2013 wordt de tweede editie georganiseerd, ditmaal zal het evenement van 6 t/m 8 juni plaatsvinden in de Amsterdam RAI. Speciaal voor Fronteers is er een kortingscode die recht geeft op 10% korting op het ticket na de early bird periode.&lt;/p&gt;
  11878. &lt;p&gt;De Dutch Mobile Conference 2013 zal vele onderwerpen in de schijnwerpers zetten, dit begint op 6 juni waarop tutorials worden gegeven over onderwerpen als jQuery Mobile, Titanium, IndexedDB, Sencha Touch 2 en CSS3 voor mobile devices. Op 7 en 8 juni worden er reguliere talks gegeven die ieder drie kwartier duren, tijdens deze reguliere talks komen onderwerpen als debugging, AngularJS, responsive design, websockets en vele anderen aan bod. Als je het volledige aanbod wilt bekijken kun je een blik werpen op het schedule via &lt;a href=&quot;http://www.mobileconference.nl/schedule&quot;&gt;http://www.mobileconference.nl/schedule&lt;/a&gt;&lt;/p&gt;
  11879. &lt;p&gt;Naast de conferentie zijn er ook een hoop activiteiten rondom het evenement, zo is er de social in de Escape Lounge, een Hackathon en voor degenen die zelf eens willen proeven hoe het voelt om op het podium te staan is er een ware unconference. Daarnaast geeft het ticket van de Dutch Mobile Conference ook toegang tot de Dutch PHP Conference die tegelijkertijd gehouden wordt.&lt;/p&gt;
  11880. &lt;p&gt;De early bird loopt tot en met 28 april en geeft 15% korting op de normale ticket prijs. Om na de early bird periode gebruik te maken van de 10% kortingscode vul je bij het aankopen van je tickets de code &lt;code&gt;FRONTEERSDMC13&lt;/code&gt; in.&lt;/p&gt;
  11881. </content>
  11882.  </entry>
  11883.  <entry>
  11884.    <title>Hackathon &amp;quot;Automatiseer je front-end&amp;quot;</title>
  11885.    <link href="https://www.fronteers.nl/nl/blog/2013/04/hackathon-automatiseer-je-front-end"/>
  11886.    <updated>2013-04-08T00:00:00Z</updated>
  11887.    <id>https://www.fronteers.nl/nl/blog/2013/04/hackathon-automatiseer-je-front-end</id>
  11888.    <content xml:lang="nl" type="html">&lt;p&gt;Op zaterdag 11 mei zal er een hackathon worden georganiseerd voor leden en niet-leden van Fronteers. De dag begint rond half 11 met twee korte presentaties onder het genot van een kopje koffie of thee. Na een verzorgde lunch kan gehackt worden aan een project wat ter plekke gepitcht kan worden. Aan het einde van de dag sluiten we af met een borrel zodat we kunnen zien wat iedereen gemaakt heeft.&lt;/p&gt;
  11889. &lt;h2&gt;Programma van de dag&lt;/h2&gt;
  11890. &lt;ul&gt;
  11891. &lt;li&gt;10:00 inloop met koffie en thee&lt;/li&gt;
  11892. &lt;li&gt;10:30 presentatie Tom Greuter over GruntJS&lt;/li&gt;
  11893. &lt;li&gt;11:00 presentatie Arjan Eising over het Jasmine testframework&lt;/li&gt;
  11894. &lt;li&gt;11:30 pitchen van ideeën voor hackprojecten&lt;/li&gt;
  11895. &lt;li&gt;12:00 verzorgde lunch&lt;/li&gt;
  11896. &lt;li&gt;13:37 hacken!&lt;/li&gt;
  11897. &lt;li&gt;17:00 borrel met korte demo&#39;s&lt;/li&gt;
  11898. &lt;/ul&gt;
  11899. &lt;p&gt;GruntJS en Jasmine zijn twee van de nieuwere tools voor front-end programmeurs om applicaties te builden en testen. Het doel van de dag is er eens iets mee te doen op een leuke, informatieve manier. Na de lunch zullen de twee presentatoren beschikbaar zijn voor uitleg als je ergens tegenaan loopt.&lt;/p&gt;
  11900. &lt;p&gt;De hackathon is gratis voor leden en niet-leden en er is plek voor 30 hackers. Locatie is Nomadz op de 3de verdieping van Bink36 aan de Binckhorstlaan 36 in Den Haag. Aanmelden kan via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/hackathon&quot;&gt;formulier op de hackathon-pagina&lt;/a&gt;.&lt;/p&gt;
  11901. </content>
  11902.  </entry>
  11903.  <entry>
  11904.    <title>Met korting Sencha Touch cursus volgen</title>
  11905.    <link href="https://www.fronteers.nl/nl/blog/2013/03/korting-cursus-sencha-touch"/>
  11906.    <updated>2013-03-26T00:00:00Z</updated>
  11907.    <id>https://www.fronteers.nl/nl/blog/2013/03/korting-cursus-sencha-touch</id>
  11908.    <content xml:lang="nl" type="html">&lt;p&gt;Wil je graag leren hoe je een mobiele app kunt bouwen? Met het &lt;a href=&quot;http://www.sencha.com/products/touch/features/&quot;&gt;Sencha Touch framework&lt;/a&gt; kun je uitgebreide mobiele applicaties bouwen, voor iOS, Android, BlackBerry en meer. Sencha Touch geeft je mobiele web app de native look and feel en volgens de laatste HTML5 en CSS3 web standaarden.&lt;/p&gt;
  11909. &lt;p&gt;Van 8 t/m 12 april is er een Sencha Touch 2.1 hands-on training aan de Keizersgracht in Amsterdam. Voor meer informatie zie: &lt;a href=&quot;http://www.sencha.com/company/events/apr-8-12-fast-track-to-sencha-touch-2-advanced-architect-training-amste/&quot;&gt;Fast Track to Sencha Touch + Advanced Architect &lt;/a&gt;.&lt;/p&gt;
  11910. &lt;p&gt;Het bedrijf achter Sencha Touch, Sencha Inc. heeft sinds kort de deuren geopend in Amsterdam. Om dit te vieren, mogen Fronteers leden met 10% korting de Sencha Touch cursus volgen.&lt;/p&gt;
  11911. &lt;p&gt;Wil je er bij zijn? Om gebruik te maken van de korting, voer bij het registeren de volgende code in: front-touch&lt;/p&gt;
  11912. </content>
  11913.  </entry>
  11914.  <entry>
  11915.    <title>Bijeenkomst bij De Voorhoede op 18 april 2013</title>
  11916.    <link href="https://www.fronteers.nl/nl/blog/2013/03/bijeenkomst-de-voorhoede"/>
  11917.    <updated>2013-03-25T00:00:00Z</updated>
  11918.    <id>https://www.fronteers.nl/nl/blog/2013/03/bijeenkomst-de-voorhoede</id>
  11919.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 18 april is Fronteers te gast bij De Voorhoede in Amsterdam. De vorige Pecha Kucha was een groot succes en dat willen we dit jaar bij De Voorhoede herhalen.&lt;/p&gt;
  11920. &lt;p&gt;Pecha Kucha is een presentatiestijl waarbij 20 slides worden getoond die elk 20 seconden in beeld zijn. Hierdoor krijg je snelle en beknopte presentaties. Door de korte tijd van 6 minuut 40 is het ook voor mensen die geen uur willen of kunnen volpraten. Heb je nog nooit een presentatie gegeven en wil je het een keer proberen, dan is dit de uitgeziene mogelijkheid.&lt;/p&gt;
  11921. &lt;h2&gt;Waar?&lt;/h2&gt;
  11922. &lt;p&gt;Dit evenement vindt plaats bij de Voorhoede in Amsterdam. Het adres is Rijnsburgstraat 9 - 11, Amsterdam. &lt;a href=&quot;https://maps.google.com/maps?q=Rijnsburgstraat+9-11,+Hoofddorppleinbuurt,+Amsterdam,+Nederland&amp;amp;hl=nl&amp;amp;sll=51.71133,5.295509&amp;amp;sspn=0.148912,0.495415&amp;amp;oq=rijnsburgstraat+9-11+&amp;amp;hnear=Rijnsburgstraat+9,+Oud-Zuid,+Amsterdam,+Noord-Holland,+Nederland&amp;amp;t=m&amp;amp;z=16&quot;&gt;Plan route via Google Maps&lt;/a&gt;.&lt;/p&gt;
  11923. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  11924. &lt;p&gt;Zoals gebruikelijk is deze bijeenkomst gratis bij te wonen door zowel leden als niet-leden. Aanmelden voor de bijeenkomst doe je via &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/voorhoede&quot;&gt;het formulier op de bijeenkomstpagina&lt;/a&gt;. Er is ruimte voor 50 personen, inclusief sprekers.&lt;/p&gt;
  11925. </content>
  11926.  </entry>
  11927.  <entry>
  11928.    <title>Met korting naar Nationaal Congres Digitale Toegankelijkheid 2013</title>
  11929.    <link href="https://www.fronteers.nl/nl/blog/2013/03/korting-nationaal-congres-digitale-toegankelijkheid-2013"/>
  11930.    <updated>2013-03-12T00:00:00Z</updated>
  11931.    <id>https://www.fronteers.nl/nl/blog/2013/03/korting-nationaal-congres-digitale-toegankelijkheid-2013</id>
  11932.    <content xml:lang="nl" type="html">&lt;p&gt;Op 20 juni 2013 vindt het &lt;a href=&quot;http://www.ncdt.nl/&quot;&gt;Nationaal Congres Digitale Toegankelijkheid&lt;/a&gt; plaats in Utrecht. Leden van Fronteers krijgen 30 procent korting op de toegangsprijs van €349, en betalen dus €244,30.&lt;/p&gt;
  11933. &lt;p&gt;Er wordt onder andere aandacht besteed aan hoe responsive design en toegankelijkheid samengaan, het aanbieden van toegankelijke video en het schrijven van begrijpelijke teksten op het web. Dagvoorzitter is Francisco van Jole, en &lt;a href=&quot;http://www.ncdt.nl/sprekers/&quot;&gt;sprekers&lt;/a&gt; zijn onder anderen Eric Velleman, Iacobien Riezebosch, Simon Besters, Ger Dreijer, Raph de Rooij en Wiep Hamstra.&lt;/p&gt;
  11934. &lt;p&gt;Er zijn tien kortingscodes beschikbaar. Wie het eerst komt, het eerst maalt. &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;Neem contact op&lt;/a&gt;, en we sturen de code zo spoedig mogelijk naar je op.&lt;/p&gt;
  11935. </content>
  11936.  </entry>
  11937.  <entry>
  11938.    <title>Met korting naar Front-Trends 2013</title>
  11939.    <link href="https://www.fronteers.nl/nl/blog/2013/03/met-korting-naar-front-trends-2013"/>
  11940.    <updated>2013-03-01T00:00:00Z</updated>
  11941.    <id>https://www.fronteers.nl/nl/blog/2013/03/met-korting-naar-front-trends-2013</id>
  11942.    <content xml:lang="nl" type="html">&lt;p&gt;Van 24 tot en met 26 april dit jaar vindt &lt;a href=&quot;http://2013.front-trends.com/&quot;&gt;Front-Trends 2013&lt;/a&gt; plaats. Net als vorig jaar in Warschau en ook dit jaar heeft Fronteers een aantal kortingscodes gekregen.&lt;/p&gt;
  11943. &lt;p&gt;Na een succesvol tweedaags &lt;a href=&quot;http://2012.front-trends.com/&quot;&gt;congres in 2012&lt;/a&gt; is Front-Trends dit jaar terug met een drie dagen durend programma. Voor leden van Fronteers hebben we tien kortingscodes gekregen. Normale kaarten kosten €349 maar Fronteers leden krijgen maar liefst 30% korting. Om een kortingscode op te vragen moet je even een mailtje met je naam en lidnummer sturen naar &lt;a href=&quot;mailto:ledenadministratie@fronteers.nl&quot;&gt;ledenadministratie@fronteers.nl&lt;/a&gt;.&lt;/p&gt;
  11944. &lt;p&gt;Wees er snel bij want op is op.&lt;/p&gt;
  11945. </content>
  11946.  </entry>
  11947.  <entry>
  11948.    <title>Workshops update februari</title>
  11949.    <link href="https://www.fronteers.nl/nl/blog/2013/02/workshops-update-februari"/>
  11950.    <updated>2013-02-26T00:00:00Z</updated>
  11951.    <id>https://www.fronteers.nl/nl/blog/2013/02/workshops-update-februari</id>
  11952.    <content xml:lang="nl" type="html">&lt;p&gt;Het is al weer enige tijd geleden sinds de laatste workshops update. In de tussentijd hebben we niet stil gezeten. We hebben de eerste workshops van het jaar weer achter de rug, er staan nieuwe gepland, en er gaat wat veranderen.&lt;/p&gt;
  11953. &lt;p&gt;We zijn het jaar goed begonnen met twee populaire workshops. Op 18 januari &lt;a href=&quot;https://www.fronteers.nl/workshops/screw-css-roy-tomeij&quot;&gt;Screw CSS!&lt;/a&gt; door Roy Tomeij gevolgd door &lt;a href=&quot;https://www.fronteers.nl/workshops/future-css-bert-bos&quot;&gt;Future CSS&lt;/a&gt; door Bert Bos op 28 januari. Voor 13 maart hebben we een workshop over toegankelijkheid op het programma, te weten &lt;a href=&quot;https://www.fronteers.nl/workshops/inclusive-design-jeroen-hulscher&quot;&gt;Inclusive Design&lt;/a&gt; gegeven door Jeroen Hulscher. Hiervoor zijn &lt;strike&gt;nog 3&lt;/strike&gt; &lt;strong&gt;inmiddels geen&lt;/strong&gt; plekken&lt;strong&gt;meer&lt;/strong&gt; beschikbaar. &lt;strike&gt;Schrijf je dus snel in als je mee wilt doen!&lt;/strike&gt;&lt;/p&gt;
  11954. &lt;p&gt;Zoals gezegd gaat er ook wat veranderen. De prijzen voor workshops zijn al vrij lang €100 voor leden en €200 voor niet-leden. Het goede nieuws is dat dát vooralsnog niet gaat veranderen. Het misschien wat minder goede nieuws —althans als je nog geen lid bent— is dat het niet langer mogelijk zal zijn om vlak voor inschrijving voor een workshop nog even snel lid te worden, à €60, om op die manier €40 te besparen.&lt;/p&gt;
  11955. &lt;p&gt;Vanaf de eerstvolgende aan te kondigen workshop moet je namelijk &lt;em&gt;op het moment van aankondigen&lt;/em&gt; al lid zijn om met ledenkorting deel te kunnen nemen. Mensen die zich als niet-lid inschrijven voor een workshop krijgen echter wel de mogelijkheid om, op het moment van inschrijven voor de workshop, voor €25 euro extra lid te worden en deel te nemen.&lt;/p&gt;
  11956. &lt;p&gt;Samengevat:&lt;/p&gt;
  11957. &lt;ul&gt;
  11958. &lt;li&gt;Leden: &lt;em&gt;€100&lt;/em&gt;&lt;/li&gt;
  11959. &lt;li&gt;Niet-leden: &lt;em&gt;€200&lt;/em&gt;&lt;/li&gt;
  11960. &lt;li&gt;Niet-leden + lidmaatschap Fronteers: &lt;em&gt;€225&lt;/em&gt; (in plaats van €260)&lt;/li&gt;
  11961. &lt;/ul&gt;
  11962. &lt;p&gt;Nota bene, alle bedragen in deze post zijn exclusief btw.&lt;/p&gt;
  11963. &lt;p&gt;Tot slot… aarzel vooral niet om hieronder een reactie achter te laten als je een vraag hebt over workshops, je graag een workshop over een bepaald onderwerp zou willen volgen, of zelf een workshop kunt geven.&lt;/p&gt;
  11964. </content>
  11965.  </entry>
  11966.  <entry>
  11967.    <title>75 euro korting voor Beyond Tellerrand</title>
  11968.    <link href="https://www.fronteers.nl/nl/blog/2013/02/75-euro-korting-voor-beyond-tellerrand"/>
  11969.    <updated>2013-02-22T00:00:00Z</updated>
  11970.    <id>https://www.fronteers.nl/nl/blog/2013/02/75-euro-korting-voor-beyond-tellerrand</id>
  11971.    <content xml:lang="nl" type="html">&lt;p&gt;Dit jaar vindt &lt;a href=&quot;http://2013.beyondtellerrand.com/&quot;&gt;Beyond Tellerrand&lt;/a&gt; plaats op 27 en 28 mei, net over de grens in Düsseldorf. Als Fronteerslid krijg je € 74,70 korting op de ticketprijs van € 249,-.&lt;/p&gt;
  11972. &lt;p&gt;Beyond Tellerrand is een kwalitatief hoogstaand congres dat zich focust op design, user interactie en natuurlijk front-end. Het congres vindt plaats op maandag en dinsdag, de woensdag is gereserveerd voor &lt;a href=&quot;http://2013.beyondtellerrand.com/workshops&quot;&gt;twee workshops&lt;/a&gt; van Brad Frost en Aaron Gustafson.&lt;/p&gt;
  11973. &lt;p&gt;Afgelopen jaar werd Beyond Tellerrand in november georganiseerd, dit jaar is het evenement verplaatst naar eind mei en vindt het wederom plaats in het sfeervolle Capitol Theater. Onder andere Josh Brewer, Elliot Jay Stocks, Mandy Brown en James Victoire hebben hun komst al bevestigd. De komende maanden zal het aantal sprekers tot 16 worden uitgebreid.&lt;/p&gt;
  11974. &lt;p&gt;Wil je gebruikmaken van de € 74,70 korting en ben je Fronteers-lid, vraag dan een kortingscode aan. Er zijn 20 kortingscodes beschikbaar. Je kunt mailen naar &lt;a href=&quot;mailto:ledenadministratie@fronteers.nl&quot;&gt;ledenadministratie@fronteers.nl&lt;/a&gt;.&lt;/p&gt;
  11975. </content>
  11976.  </entry>
  11977.  <entry>
  11978.    <title>Fronteers 2013: 10 en 11 oktober in Tuschinski</title>
  11979.    <link href="https://www.fronteers.nl/nl/blog/2013/02/fronteers-2013-10-en-11-oktober-in-tuschinski"/>
  11980.    <updated>2013-02-15T00:00:00Z</updated>
  11981.    <id>https://www.fronteers.nl/nl/blog/2013/02/fronteers-2013-10-en-11-oktober-in-tuschinski</id>
  11982.    <content xml:lang="nl" type="html">&lt;p&gt;Het zal sommigen misschien ontgaan zijn maar een paar weken terug gaven we een &lt;a href=&quot;https://twitter.com/fronteersconf/status/294349733101707264&quot;&gt;subtiele hint&lt;/a&gt; dat we begonnen waren met de voorbereiding van Fronteers 2013.&lt;/p&gt;
  11983. &lt;p&gt;We zijn verheugd dat we vandaag Fronteers 2013 officieel kunnen aankondigen. Op 10 en 11 oktober zullen we weer twee dagen te gast zijn in het schitterende &lt;a href=&quot;http://nl.wikipedia.org/wiki/Tuschinski_Theater&quot;&gt;Theater Tuschinski&lt;/a&gt; in hartje Amsterdam.&lt;/p&gt;
  11984. &lt;p&gt;Op dit moment hebben we verder nog niet zo veel te melden. We zijn hard aan het werk om Fronteers 2013 net zo goed en hopelijk nog een beetje beter te maken dan voorgaande jaren. Houd de website en &lt;a href=&quot;https://twitter.com/FronteersConf&quot;&gt;@FronteersConf&lt;/a&gt; op Twitter in de gaten voor meer informatie de komende weken en maanden. Kaartjes gaan eind maart in de verkoop te beginnen met een beperkt aantal early bird kaarten. Uiteraard zal er korting zijn voor leden. Ledenkorting geldt alleen voor wie lid is op het moment dat de kaartverkoop wordt aangekondigd.&lt;/p&gt;
  11985. &lt;p&gt;Successen uit het verleden zijn geen garantie voor de toekomst maar als ze een indicatie zijn, dan gaat 2013 weer een fantastisch congres worden! Tot in oktober!&lt;/p&gt;
  11986. </content>
  11987.  </entry>
  11988.  <entry>
  11989.    <title>100 euro korting voor GOTO Conference Amsterdam</title>
  11990.    <link href="https://www.fronteers.nl/nl/blog/2013/02/100-euro-korting-voor-goto-conference-amsterdam"/>
  11991.    <updated>2013-02-15T00:00:00Z</updated>
  11992.    <id>https://www.fronteers.nl/nl/blog/2013/02/100-euro-korting-voor-goto-conference-amsterdam</id>
  11993.    <content xml:lang="nl" type="html">&lt;p&gt;Op 18 t/m 20 juni is een algemeen softwarecongres, de &lt;a href=&quot;http://www.gotocon.com/amsterdam-2013/&quot;&gt;GOTO Conference Amsterdam&lt;/a&gt; in de Beurs van Berlage. Leden van Fronteers krijgen 100 euro op deze congres.&lt;/p&gt;
  11994. &lt;p&gt;GOTO Conference is algemeen softwarecongres waarop de organisatoren vonden dat front-end niet mocht ontbreken. Buiten de Frontend praatjes zijn er ook sessies over agile programming, back-end, big data, search, architecture en meer. Op 20 juni vinden er ook diverse workshops plaats. Voor meer infomatie zie &lt;a href=&quot;http://www.gotocon.com/amsterdam-2013/tracks/&quot;&gt;Tracks at GOTO Amsterdam2013&lt;/a&gt;.&lt;/p&gt;
  11995. &lt;p&gt;Wil je gebruik maken van de 100 euro korting en ben je Fronteers-lid, dan kun je een kortingscode opvragen middels een mailtje naar &lt;a href=&quot;mailto:ledenadministratie@fronteers.nl&quot;&gt;ledenadministratie@fronteers.nl&lt;/a&gt;. Let op: Om de zoveel tijd neemt de prijs toe, dus de eerder je je inschrijft voor het event, de meer geld je bespaart. Let op de earlybird loopt nu 15 feb af en dan gaat de nieuwe earlybird prijs in.&lt;/p&gt;
  11996. </content>
  11997.  </entry>
  11998.  <entry>
  11999.    <title>Bijeenstorm in Enschede op 21 februari</title>
  12000.    <link href="https://www.fronteers.nl/nl/blog/2013/01/bijeenstorm-enschede"/>
  12001.    <updated>2013-01-30T00:00:00Z</updated>
  12002.    <id>https://www.fronteers.nl/nl/blog/2013/01/bijeenstorm-enschede</id>
  12003.    <content xml:lang="nl" type="html">&lt;p&gt;&lt;a href=&quot;http://trimm.nl/&quot;&gt;TriMM&lt;/a&gt; host op 21 februari een nieuw soort Fronteersbijeenkomst, een &amp;quot;bijeenstorm&amp;quot;. Doel is om zowel kennis te delen die je zelf hebt over front-end, maar ook iets te leren van andere knappe koppen. Daarnaast leer je die avond op een andere wijze je collega&#39;s front-enders kennen.&lt;/p&gt;
  12004. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2013/bijeenstorm-trimm.jpg&quot; alt=&quot;Poster bijeenstorm TriMM&quot; /&gt;&lt;/p&gt;
  12005. &lt;p&gt;Verover de front-end wereld met jouw mening over een front-end techniek, deze avond is je kans! A la hackathon kan iedereen in kleine groepen werken aan een korte presentatie. Hiervoor heb je 30 minuten, om daarna met de hele groep circa 5 minuten jullie visie te geven over een actueel front-end onderwerp. Je hoeft natuurlijk niet per se te spreken, maar deelnemen in een groepje is wel de bedoeling.&lt;/p&gt;
  12006. &lt;p&gt;Onder het genot van een hapje en drankje zal de avond gevuld worden met veel discussie, leermomenten en het ontmoeten van nieuwe mensen. Aan het einde van de avond krijg je een leuke presentje mee.&lt;/p&gt;
  12007. &lt;p&gt;Zoals gebruikelijk zijn zowel leden als niet-leden welkom en is de toegang gratis. Wel is het prettig als je doorgeeft dat je komt via &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/trimm&quot;&gt;het formulier op de bijeenkomstpagina&lt;/a&gt;.&lt;/p&gt;
  12008. </content>
  12009.  </entry>
  12010.  <entry>
  12011.    <title>Workshop ‘Inclusive Design’ door Jeroen Hulscher</title>
  12012.    <link href="https://www.fronteers.nl/nl/blog/2013/01/workshop-inclusive-design"/>
  12013.    <updated>2013-01-28T00:00:00Z</updated>
  12014.    <id>https://www.fronteers.nl/nl/blog/2013/01/workshop-inclusive-design</id>
  12015.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 13 maart geeft Jeroen Hulscher zijn workshop ‘Inclusive Design’ voor de tweede keer voor bij Fronteers. Tijdens de workshop zul je de ins en outs leren voor het denken aan alle soorten gebruikers die van een website gebruik kunnen maken.&lt;/p&gt;
  12016. &lt;p&gt;De workshop kost 100 euro voor leden, en 200 euro voor niet leden. Beide bedragen zijn exclusief 21% btw. Aanmelden kan via het &lt;a href=&quot;https://www.fronteers.nl/workshops/inclusive-design-jeroen-hulscher/13-maart-2013#formulier-1&quot;&gt;inschrijfformulier&lt;/a&gt;. Meer informatie over de workshop vind je op de &lt;a href=&quot;https://www.fronteers.nl/workshops/inclusive-design-jeroen-hulscher&quot;&gt;workshoppagina&lt;/a&gt;&lt;/p&gt;
  12017. </content>
  12018.  </entry>
  12019.  <entry>
  12020.    <title>Bijeenkomsten op 22 januari en 7 februari</title>
  12021.    <link href="https://www.fronteers.nl/nl/blog/2013/01/bijeenkomsten-januari-februari"/>
  12022.    <updated>2013-01-09T00:00:00Z</updated>
  12023.    <id>https://www.fronteers.nl/nl/blog/2013/01/bijeenkomsten-januari-februari</id>
  12024.    <content xml:lang="nl" type="html">&lt;p&gt;Er zijn weer twee bijeenkomsten ingepland. Te weten bij &lt;a href=&quot;http://www.studytube.nl/&quot;&gt;StudyTube&lt;/a&gt; te Amsterdam op dinsdag 22 januari, en op 7 februari, ook in Amsterdam, bij &lt;a href=&quot;http://www.trifork.nl/&quot;&gt;Trifork&lt;/a&gt;.&lt;/p&gt;
  12025. &lt;h2&gt;StudyTube – 22 januari 2013&lt;/h2&gt;
  12026. &lt;p&gt;Matthew Eichler zal vertellen over het automatiseren van accepatatietesten. Jan van Hellemond zal daarna een presentatie geven over Amazon Web Services en hoe je als front-end developer hier gebruik van kunt maken.&lt;/p&gt;
  12027. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/studytube&quot;&gt;Lees meer over deze bijeenkomst bij StudyTube&lt;/a&gt;&lt;/p&gt;
  12028. &lt;h2&gt;Trifork – 7 februari 2013&lt;/h2&gt;
  12029. &lt;p&gt;Bij Trifork zal Ross Tuck een presentatie houden over hoe je het meeste kan halen uit HTTP. Daarna zal Breandán Knowlton vertellen over project management van een groot project.&lt;/p&gt;
  12030. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/trifork&quot;&gt;Lees meer over deze bijeenkomst bij Trifork&lt;/a&gt;&lt;/p&gt;
  12031. &lt;p&gt;Zoals gebruikelijk zijn beide bijeenkomsten gratis toegankelijk voor zowel leden als niet-leden. Wel is gewenst dat je doorgeeft dat je aanwezig zult zijn via de formulieren op de hierboven gelinkte pagina&#39;s.&lt;/p&gt;
  12032. </content>
  12033.  </entry>
  12034.  <entry>
  12035.    <title>Nieuwjaarsborrel</title>
  12036.    <link href="https://www.fronteers.nl/nl/blog/2013/01/nieuwjaarsborrel"/>
  12037.    <updated>2013-01-04T00:00:00Z</updated>
  12038.    <id>https://www.fronteers.nl/nl/blog/2013/01/nieuwjaarsborrel</id>
  12039.    <content xml:lang="nl" type="html">&lt;p&gt;De beste wensen voor 2013! Om het jaar in te luiden, zijn er volgende week twee borrels waar je naartoe kunt gaan. De eerste is op donderdag 10 januari, georganiseerd door de overkoepelende organisatie voor internetinstanties, &lt;a href=&quot;http://isoc.nl/&quot;&gt;Internet Society Nederland&lt;/a&gt;. Een dag later, vrijdag 11 januari, is onze eigen, semi-spontane borrel in De Bierfabriek in Amsterdam.&lt;/p&gt;
  12040. &lt;p&gt;Internet Society Nederland organiseert 10 januari haar nieuwjaarsborrel, waarbij bijna twintig nationale en internationale spelers uit de internetwereld elkaar kunnen ontmoeten. Van e-infrastructuur tot .nl, van digitale burgerrechten tot en met digitale certificaten, van toegankelijkheid voor blinden tot hosting providers - iedereen doet mee. &lt;a href=&quot;http://isoc.nl/activ/2013-nieuwjaar.htm&quot;&gt;Aanmelden kan gratis op de website van ISOC.&lt;/a&gt; Locatie is Het Sieraad, Postjesweg 1 in Amsterdam. De receptie begint om 17:30 met drankjes en buffet, en er staan verder lightning talks en een voorzittersdebat op het programma.&lt;/p&gt;
  12041. &lt;p&gt;Fronteers zelf zal de mogelijkheid bieden met mede-fronteers te borrelen. Dit zal gebeuren op vrijdag 11 januari in &lt;a href=&quot;http://www.bierfabriek.com/&quot;&gt;De Bierfabriek&lt;/a&gt; aan Rokin 75 te Amsterdam. Rond 17:00 zullen de eerste leden aanwezig zijn, en de eerste drankjes worden betaald door de vereniging. Laat in de comments even weten dat je hierbij aanwezig zult zijn.&lt;/p&gt;
  12042. </content>
  12043.  </entry>
  12044.  <entry>
  12045.    <title>Met 50% korting naar BlackBerry DevCon</title>
  12046.    <link href="https://www.fronteers.nl/nl/blog/2012/12/met-50-korting-naar-blackberry-devcon"/>
  12047.    <updated>2012-12-10T00:00:00Z</updated>
  12048.    <id>https://www.fronteers.nl/nl/blog/2012/12/met-50-korting-naar-blackberry-devcon</id>
  12049.    <content xml:lang="nl" type="html">&lt;p&gt;Net zoals vorig jaar komt &lt;a href=&quot;http://www.blackberryjamconference.com/europe&quot;&gt;BlackBerry DevCon&lt;/a&gt; op 5 en 6 februari naar Amsterdam, en opnieuw kunnen we Fronteers-leden een korting van 50% aanbieden.&lt;/p&gt;
  12050. &lt;p&gt;Vorig jaar werd er veel aandacht aan het web besteed, en was het congres over het geheel genomen verrassend goed. Ook kregen alle deelnemers een BlackBerry PlayBook. Dit jaar gaat de aandacht natuurlijk vooral uit naar BlackBerry 10, dat een week voor het congres gelanceerd wordt. Of alle deelnemers een BB10 device krijgen, is onduidelijk, maar er zal weer behoorlijk wat aandacht zijn voor het maken van web apps voor BB10.&lt;/p&gt;
  12051. &lt;p&gt;Wil je gebruik maken van de 50% korting en ben je Fronteers-lid, dan kun je een kortingscode opvragen middels een mailtje naar &lt;a href=&quot;mailto:ledenadministratie@fronteers.nl&quot;&gt;ledenadministratie@fronteers.nl&lt;/a&gt;.&lt;/p&gt;
  12052. </content>
  12053.  </entry>
  12054.  <entry>
  12055.    <title>Bijeenkomst bij Q42 op 8 januari 2013</title>
  12056.    <link href="https://www.fronteers.nl/nl/blog/2012/12/bijeenkomst-q42"/>
  12057.    <updated>2012-12-10T00:00:00Z</updated>
  12058.    <id>https://www.fronteers.nl/nl/blog/2012/12/bijeenkomst-q42</id>
  12059.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 8 januari 2013 is Fronteers te gast bij Q42 in Den Haag. Er worden drie presentaties gegeven. Johan Huijkman geeft de presentatie “UX Candy”, Remco Veldkamp bespreekt de uitdagingen die Q42 tegenkwam bij de ontwikkeling van de nieuwe website voor het Amsterdams Rijksmuseum en Elaine Oliver deelt tips en ervaringen over het opzetten van de OOCSS architectuur.&lt;/p&gt;
  12060. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12061. &lt;ul&gt;
  12062. &lt;li&gt;18:00 Inloop met drank en snacks&lt;/li&gt;
  12063. &lt;li&gt;19:00 Johan Huijkman; UX candy&lt;/li&gt;
  12064. &lt;li&gt;19:30 Korte pauze&lt;/li&gt;
  12065. &lt;li&gt;19:45 Remco Veldkamp; Zoomen tot op de kleinste pukkel van Vermeer&#39;s Melkmeisje&lt;/li&gt;
  12066. &lt;li&gt;20:30 Elaine Oliver; There&#39;s a class for that&lt;/li&gt;
  12067. &lt;li&gt;21:00 Borrel&lt;/li&gt;
  12068. &lt;/ul&gt;
  12069. &lt;h2&gt;Bereikbaarheid en opgave&lt;/h2&gt;
  12070. &lt;p&gt;Q42 is gevestigd aan Waldorpstraat 17F, 2521 CA Den Haag.&lt;/p&gt;
  12071. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen voor zowel leden als niet-leden. Wel is gewenst dat je jezelf opgeeft via het formulier op de detailpagina van de &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2013/q42&quot;&gt;bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  12072. </content>
  12073.  </entry>
  12074.  <entry>
  12075.    <title>Workshop: ‘Future CSS’ door Bert Bos</title>
  12076.    <link href="https://www.fronteers.nl/nl/blog/2012/12/workshop-future-css-door-bert-bos"/>
  12077.    <updated>2012-12-06T00:00:00Z</updated>
  12078.    <id>https://www.fronteers.nl/nl/blog/2012/12/workshop-future-css-door-bert-bos</id>
  12079.    <content xml:lang="nl" type="html">&lt;p&gt;Op 28 januari geeft Bert Bos voor Fronteers een &lt;a href=&quot;https://www.fronteers.nl/workshops/future-css-bert-bos&quot;&gt;workshop&lt;/a&gt; over wat er komen gaat in CSS. Bos is mede-uitvinder van de &lt;em&gt;cascading stylesheet&lt;/em&gt; en is nu vanuit het W3C betrokken bij de verdere ontwikkeling van de opmaaktaal.&lt;/p&gt;
  12080. &lt;p&gt;Die ontwikkeling is nog volop in gang. Denk daarbij bijvoorbeeld aan recente stabiele nieuwe modules als &lt;em&gt;mediaqueries&lt;/em&gt; en kolommen, die al in veel browsers tot op zekere hoogte zijn geïmplementeerd, of aan meer experimentele modules zoals &lt;a href=&quot;http://www.w3.org/TR/css3-flexbox/&quot;&gt;flexbox&lt;/a&gt; en &lt;a href=&quot;http://www.w3.org/TR/css3-exclusions/&quot;&gt;exclusions&lt;/a&gt;. In de workshop zullen waarschijnlijk zo&#39;n 12-14 modules aan bod komen.&lt;/p&gt;
  12081. &lt;p&gt;Deelname aan deze workshop kost zoals gebruikelijk €100 voor leden en €200 voor niet-leden (beide bedragen exclusief btw).&lt;/p&gt;
  12082. </content>
  12083.  </entry>
  12084.  <entry>
  12085.    <title>Mobilism 2013: Fronteers-kaarten</title>
  12086.    <link href="https://www.fronteers.nl/nl/blog/2012/11/mobilism-2013-fronteers-kaarten"/>
  12087.    <updated>2012-11-28T00:00:00Z</updated>
  12088.    <id>https://www.fronteers.nl/nl/blog/2012/11/mobilism-2013-fronteers-kaarten</id>
  12089.    <content xml:lang="nl" type="html">&lt;p&gt;Op 16 en 17 mei zal te Amsterdam het &lt;a href=&quot;http://mobilism.nl/2013&quot;&gt;Mobilism-congres&lt;/a&gt; plaatsvinden, voor iedereen die zich met mobiel bezig houdt. De &lt;a href=&quot;http://mobilism.nl/2013/programme&quot;&gt;sprekerslijst&lt;/a&gt; begint bekend te worden, en de kaartverkoop is net gestart.&lt;/p&gt;
  12090. &lt;p&gt;Zoals altijd hebben we een speciale aanbieding voor Fronteers-leden: early-bird kaartjes voor €450 in plaats van €500. Als je hiervan gebruik wilt maken, vraag dan een kortingscode op bij &lt;a href=&quot;mailto:krijn@fronteers.nl&quot;&gt;krijn@fronteers.nl&lt;/a&gt;. Deze actie loopt tot en met 25 januari 2013.&lt;/p&gt;
  12091. &lt;p&gt;Hopelijk mogen we enkele Fronteers-leden op het congres begroeten.&lt;/p&gt;
  12092. </content>
  12093.  </entry>
  12094.  <entry>
  12095.    <title>Kandidaat bestuur Fronteers: Matijs Brinkhuis</title>
  12096.    <link href="https://www.fronteers.nl/nl/blog/2012/11/kandidaat-bestuur-fronteers-matijs-brinkhuis"/>
  12097.    <updated>2012-11-20T00:00:00Z</updated>
  12098.    <id>https://www.fronteers.nl/nl/blog/2012/11/kandidaat-bestuur-fronteers-matijs-brinkhuis</id>
  12099.    <content xml:lang="nl" type="html">&lt;p&gt;Aanstaande donderdag vindt de &lt;a href=&quot;https://www.fronteers.nl/blog/2012/10/kom-naar-de-algemene-ledenvergadering-2012&quot;&gt;jaarlijkse ALV&lt;/a&gt; van Fronteers plaats. Een van de onderdelen tijdens de ALV is de bestuursverkiezing. Dit jaar zijn er vier kandidaten voor het nieuwe bestuur, twee zittende bestuursleden en twee nieuwe leden. Na &lt;a href=&quot;https://www.fronteers.nl/blog/2012/11/kandidaat-bestuur-roy-tomeij&quot;&gt;Roy Tomeij&lt;/a&gt;, &lt;a href=&quot;https://www.fronteers.nl/blog/2012/11/kandidaat-bestuur-fronteers-vasilis-van-gemert&quot;&gt;Vasilis van Gemert&lt;/a&gt; en &lt;a href=&quot;https://www.fronteers.nl/blog/2012/11/kandidaat-bestuur-fronteers-arjan-eising&quot;&gt;Arjan Eising&lt;/a&gt; is het vandaag de beurt aan:&lt;/p&gt;
  12100. &lt;h2&gt;Matijs Brinkhuis&lt;/h2&gt;
  12101. &lt;p&gt;Hallo, ik ben Matijs, freelance front-end developer, 38 Lentes &lt;strong&gt;kuch&lt;/strong&gt; jong en sinds begin augustus van dit jaar woonachtig in het bruisende en altijd zonnige Brighton in Engeland. Na drie jaar actief te zijn geweest als algemeen bestuurslid vind ik het tijd voor een wat actievere rol, maar hiervoor moet ik wel eerst herkozen worden. Vandaar deze (hopelijk korte) introductiepost voor de mensen die me nog niet kennen.&lt;/p&gt;
  12102. &lt;p&gt;Naast mijn rol in het bestuur van Fronteers ben ik voorzitter van de recentelijk van naam veranderde Commissie Workshops. Aangezien het eindelijk lukt om de taken rond het organiseren van een workshop binnen de commissie te delegeren heb ik aangeboden voor het komend jaar het penningmeesterschap van Fronteers over te nemen van Krijn. Dit gaf nieuwe betekenis aan de uitdrukking “als een kind zo blij” geloof ik…&lt;/p&gt;
  12103. &lt;p&gt;Begin augustus ben ik zoals gezegd voor onbepaalde tijd verhuisd naar Brighton in Engeland. Met de technologiën die ons vandaag de dag ter beschikking staan, (het internet in het bijzonder, misschien kent u het) denk ik dat het geen probleem zal zijn om het penningmeesterschap vanuit Engeland te bestieren.&lt;/p&gt;
  12104. &lt;p&gt;Naast het Fronteers penningmeesterschap blijf ik voorzitter van de Commissie Workshops en zal die commissie ook binnen het bestuur blijven vertegenwoordigen.&lt;/p&gt;
  12105. &lt;p&gt;Verder ben ik het met Roy eens dat sommige dingen binnen Fronteers, zeker nu we over de &lt;a href=&quot;https://www.fronteers.nl/blog/2012/11/500-leden&quot;&gt;500 leden&lt;/a&gt; zitten, efficiënter zouden kunnen. In de rol van penningmeester zou ik me daar sterk voor willen maken.&lt;/p&gt;
  12106. &lt;p&gt;Tot slot ben ik begin deze week aangehaakt bij de &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/congres&quot;&gt;congres commissie&lt;/a&gt; om hier naast mijn commissietaken ook het bestuur te vertegenwoordigen.&lt;/p&gt;
  12107. </content>
  12108.  </entry>
  12109.  <entry>
  12110.    <title>De financiën en reserves van Fronteers</title>
  12111.    <link href="https://www.fronteers.nl/nl/blog/2012/11/financien-en-reserves-van-fronteers"/>
  12112.    <updated>2012-11-15T00:00:00Z</updated>
  12113.    <id>https://www.fronteers.nl/nl/blog/2012/11/financien-en-reserves-van-fronteers</id>
  12114.    <content xml:lang="nl" type="html">&lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen/07-12-11&quot;&gt;Vorig jaar tijdens de ALV&lt;/a&gt; merkte de ALV op dat het bestuur geen duidelijke en eenduidige visie op de financiën van de vereniging had, en dan specifiek op het gebied van de aan te houden reserve. We hebben toen de opdracht gekregen deze visie te ontwikkelen. Ter voorbereiding op de ALV van volgende week willen we in deze blogpost graag meer duidelijkheid verschaffen over de financiële situatie van de vereniging, en hoe het bestuur nu over dit onderwerp denkt.&lt;/p&gt;
  12115. &lt;p&gt;De vereniging heeft veel inkomsten. De grootste activiteit van de vereniging (het congres) wordt scherp gebudgetteerd (mogelijk gemaakt door een buffer aan overgedragen winst van vorige jaren), maar maakt toch ieder jaar winst (een klein percentage, maar een fors bedrag in absolute getallen). De een-na-grootste activiteit (cursussen) leidt licht verlies doordat voornamelijk leden deelnemen (voor wie de kosten deels gesponsord worden), maar blijft binnen budget. Verder maakt de vereniging kosten waar niet direct inkomsten tegenover staan (website, commissies, administratie, bijeenkomsten, sponsoring). Deze kosten zijn echter een relatief klein percentage van de inkomsten van de vereniging waar niet direct kosten tegenover staan (lidmaatschapsgeld, vacaturebank). Dit betekent dat de vereniging elk jaar winst maakt. (Over 2011: €8.500 euro voor het congres, en €8.900 voor de rest van de vereniging. Over 2012 verwachten we vergelijkbare getallen.)&lt;/p&gt;
  12116. &lt;p&gt;Aan de kant van de inkomsten heeft de ALV meerdere keren een signaal afgegeven dat de hoogte van het lidmaatschapsgeld niet naar beneden aangepast dient te worden, aangezien het blijk geeft van enige &amp;quot;commitment&amp;quot; van de leden, en een drempel creëert die aangeeft dat een lid professioneel bezig is met front-end ontwikkeling. (We willen graag op de komende ALV controleren of dit nog steeds de houding van de ALV is, maar verwachten van wel.) Dit doel zou theoretisch op andere manieren kunnen worden afgevangen, maar het bestuur is hier op dit moment geen voorstander van, voornamelijk wegens de hieraan gekoppelde administratieve lasten, en de inflexibiliteit van dergelijke regels. Het bestuur is ook geen voorstander van lagere kosten voor de vacaturebank, wederom omdat deze kosten een drempel opwerpen voor bedrijven (alleen serieuze vacatures), waarmee de kwaliteit van de vacatures hoog blijft, en de administratieve lasten beperkt blijven.&lt;/p&gt;
  12117. &lt;p&gt;Aan de kant van de kosten hebben we nieuwe activiteiten ontplooid (o.a. een hackday, sponsoring van leden om andere congressen bij te wonen, en binnenkort een buitenlandse spreker die voor een cursus wordt ingevlogen), welke een gematigd succes lijken te zijn, maar deze extra kosten blijven nauwelijks de extra inkomsten door aanwas van leden voor. Het bestuur zal expliciet nieuwe initiatieven van leden financieel blijven ondersteunen, en de leden blijven aanmoedigen om met dergelijke nieuwe initiatieven te komen. We hebben als bestuur een nieuwe richting ingeslagen waarbij we zelf minder operationeel bezig zijn, en meer van onze energie stoppen in het ondersteunen van een steeds grotere groep actieve vrijwilligers. We hopen hiermee deze vrijwilligers te kunnen helpen om meer activiteiten te ontplooien. Desondanks verwachten we niet op korte termijn te zien dat onze kosten sterker zullen stijgen dan onze inkomsten. (Wel zien we dat de &amp;quot;winst&amp;quot; per lid, zowel inclusief als exclusief congreswinst, de afgelopen jaren sterk is gedaald, en over 2011 op ~€22 per lid lag. (Excl. congreswinst.))&lt;/p&gt;
  12118. &lt;p&gt;Op dit moment stoppen we de volledige &amp;quot;winst&amp;quot; die we elk jaar maken in de algemene reserve. Aan het begin van het jaar was deze reserve uitgegroeid tot €75.000, waarvan €20.000-€25.000 buffer is voor het congres. (Dit willen we op de balans in een aparte post gaan opnemen.) Vraag hierbij is hoe groot deze reserve &amp;quot;zou moeten zijn&amp;quot;, voordat deze kan worden beschouwd als onrealistisch groot en de vereniging moet besluiten wat dan te doen met verdere inkomsten.&lt;/p&gt;
  12119. &lt;p&gt;Om deze vraag te beantwoorden moet gekeken worden naar het doel van de reserve. Dit is in onze optiek tweeledig: 1) Het garanderen van de continuïteit van de vereniging door ons de mogelijkheid te geven onverwachte tegenvallers op te vangen, en 2) De vereniging de mogelijkheid te geven in te springen op onverwachte maar voor de doelstellingen van de vereniging zeer belangrijke gebeurtenissen. Waarschijnlijk verdienen deze twee doelen ieder een eigen reserve, zodat het dienen van het ene doel het andere niet in gevaar brengt.&lt;/p&gt;
  12120. &lt;p&gt;Ten opzichte van 1) zijn er geen direct te vinden standaarden voor de aan te houden hoogte van de reserve waarmee continuïteit kan worden gegarandeerd. Zoekacties naar jaarrekeningen van verenigingen en andere documentatie hierover laten zien dat verenigingen die een continuïteitsreserve aanhouden, trachten deze een grootte te geven die valt tussen de 3 en 24 maanden aan uitgaven.&lt;/p&gt;
  12121. &lt;p&gt;In het bestuur heeft enige discussie plaatsgevonden over hoe &amp;quot;arbitrair&amp;quot; deze grootte is, en dat de grootte van deze reserve door het ontplooien van meer activiteiten (dan wel door het afsluiten van lopende activiteiten) aan sterke fluctuaties onderhevig zou kunnen zijn. Desondanks moet worden vastgesteld dat de reserve enige relatie dient te hebben ten opzichte van de grootte van de vereniging en de door haar ontplooide activiteiten. (€10,000 is een grote reserve voor een vereniging met 10 leden, maar klein voor een vereniging met 1000 leden.) Het risico dat de vereniging loopt op onverwachte tegenvallers lijkt ook groter te zijn naarmate het aantal lopende activiteiten toeneemt. Aangezien de onbekendheid van de tegenvallers die we willen kunnen opvangen het onmogelijk maakt deze in te calculeren, lijken we geen ander houvast te hebben om de grootte van de reserve aan vast te knopen dan aan de cashflow.&lt;/p&gt;
  12122. &lt;p&gt;Waar we - door hier over na te denken - onbekendheden als kleine risico&#39;s voorzien (bijvoorbeeld aansprakelijkheid bij een ongeluk tijdens het congres of een bijeenkomst), doen we er goed aan ons hier expliciet tegen in te dekken (d.w.z. laten we uitzoeken of er verzekeringen tegen dergelijke risico&#39;s kunnen worden afgesloten), maar er zullen altijd verdere onbekende risico&#39;s blijven bestaan.&lt;/p&gt;
  12123. &lt;p&gt;Ten opzichte van 2) kunnen we ons voorstellen dat de vereniging de komende jaren uitdagingen op hoger niveau kan verwachten. Wederom is deze investeringsreserve bedoeld voor &lt;em&gt;onverwachte&lt;/em&gt; gebeurtenissen, maar we denken hier in de trant van inspringen op politieke veranderingen m.b.t. de status van de webrichtlijnen. Of stel dat we internationaal gaan, en de vraag krijgen om de opstart van meerdere Fronteers verenigingen in het buitenland financieel te ondersteunen (net zoals het PIBN ons bij onze oprichting heeft ondersteund). Idealiter zouden we dergelijke gebeurtenissen al hebben zien aankomen en zouden we er in onze begroting al expliciet op zijn voorbereid, maar het is goed om de slagkracht te hebben op dergelijke gebeurtenissen in te kunnen spelen zonder daarmee de vereniging financieel in gevaar te brengen.&lt;/p&gt;
  12124. &lt;p&gt;Gegeven deze overwegingen willen we op de ALV een drietal moties indienen:&lt;/p&gt;
  12125. &lt;ol&gt;
  12126. &lt;li&gt;De vereniging bouwt een continuïteitsreserve op, waarvan we de grootte vaststellen op 50% van de gemiddelde cashflow over de vorige twee jaar. (D.w.z. dat we onmiddellijk stoppen met mogelijke onverwachte uitgaven als die er ooit voor lijken te zorgen dat de reserve kleiner wordt dan a) dit minimum bedrag, of b) de grootte van de continuïteitsreserve aan het begin van het boekjaar (voor de jaren waarin dit lager ligt dan dit minimum). Onder deze grens geld uitgeven zou alleen mogelijk moeten zijn als het voortbestaan van de vereniging op het spel staat.)&lt;/li&gt;
  12127. &lt;li&gt;De vereniging bouwt, nadat de continuïteitsreserve de gewenste grootte heeft bereikt, ook een investeringsreserve op, waarvan we de uiteindelijke gewenste grootte vaststellen op 75% van de cashflow over het gemiddelde van de vorige twee jaar. (D.w.z. dat we winst over jaren in de reserve blijven pompen totdat we deze grens hebben bereikt.)&lt;/li&gt;
  12128. &lt;li&gt;Het bestuur van de vereniging zal geen acties ondernemen ten aanzien van het uitvoeren van activiteiten met als &lt;em&gt;doel&lt;/em&gt; de hoogte van de cashflow (en dus van de reserves) te beïnvloeden. (D.w.z. dat we gewoon nieuwe activiteiten blijven ontplooien, en dat activiteiten soms afgesloten zullen worden, maar dat dit op zichzelf staande acties zullen zijn, waarbij geen rekening gehouden zal worden met het effect dat dit zal hebben op de cashflow en de reserves.)&lt;/li&gt;
  12129. &lt;/ol&gt;
  12130. &lt;p&gt;We verwachten de continuïteitsreserve aan het eind van 2013 op het gewenste niveau te hebben, en rond 2020 de investeringsreserve op het uiteindelijke gewenste niveau te hebben, hoewel we volledig onderkennen dat de onzekerheid bij een verwachting op een dergelijke termijn erg groot is. We hebben nog geen visie over wat de vereniging zou moeten doen met verdere winsten na het bereiken van dat punt.&lt;/p&gt;
  12131. &lt;p&gt;We gaan op de ALV graag dieper in op dit onderwerp, maar hopen jullie met deze blogpost al de gelegenheid te geven van te voren een mening over deze voorstellen te vormen.&lt;/p&gt;
  12132. </content>
  12133.  </entry>
  12134.  <entry>
  12135.    <title>Bijeenkomst op 22 november bij Mobile Vikings</title>
  12136.    <link href="https://www.fronteers.nl/nl/blog/2012/11/bijeenkomst-mobile-vikings"/>
  12137.    <updated>2012-11-15T00:00:00Z</updated>
  12138.    <id>https://www.fronteers.nl/nl/blog/2012/11/bijeenkomst-mobile-vikings</id>
  12139.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 22 november 2012 is Fronteers te gast bij Mobile Vikings in Hasselt. Er worden twee presentaties voorzien. Eerst komt Nick Looijmans praten over UX op mobiele apparaten; vervolgens zullen Tom Claus en Kristof Houben wat vertellen over &lt;em&gt;responsive content&lt;/em&gt;.&lt;/p&gt;
  12140. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12141. &lt;ul&gt;
  12142. &lt;li&gt;18:00 ontvangst met een drankje&lt;/li&gt;
  12143. &lt;li&gt;19:00 Nick Looijmans over &lt;em&gt;naadloze user experiences op mobile devices&lt;/em&gt;&lt;/li&gt;
  12144. &lt;li&gt;20:00 Tom Claus en Kristof Houben over &lt;em&gt;responsive content&lt;/em&gt;&lt;/li&gt;
  12145. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  12146. &lt;/ul&gt;
  12147. &lt;h2&gt;Waar?&lt;/h2&gt;
  12148. &lt;p&gt;Dit evenement vindt plaats bij Mobile Vikings te Hasselt. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/mobile-vikings&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  12149. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  12150. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 45 mannen en vrouwen. Geef je daarom op via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/mobile-vikings#aanmeldingen&quot;&gt;aanmeldformulier&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  12151. </content>
  12152.  </entry>
  12153.  <entry>
  12154.    <title>25 euro korting voor Startup Weekend Utrecht</title>
  12155.    <link href="https://www.fronteers.nl/nl/blog/2012/11/25-euro-korting-voor-startup-weekend-utrecht"/>
  12156.    <updated>2012-11-15T00:00:00Z</updated>
  12157.    <id>https://www.fronteers.nl/nl/blog/2012/11/25-euro-korting-voor-startup-weekend-utrecht</id>
  12158.    <content xml:lang="nl" type="html">&lt;p&gt;Op 16 t/m 18 november vindt het &lt;a href=&quot;http://www.startupweekendutrecht.nl/&quot;&gt;Utrecht Startup Weekend&lt;/a&gt; plaats waar ontwerpers, developers en ondernemers samen een nieuw duurzaam product ontwikkelen.&lt;/p&gt;
  12159. &lt;p&gt;Startup Weekend Utrecht vindt plaats in de Hogeschool van Utrecht. Voor eten, drinken en snacks wordt gezorgd. Daarnaast staat er een team van mentoren voor je klaar en kun je diverse workshops volgen.&lt;/p&gt;
  12160. &lt;p&gt;Heb je een tof idee, wil je mee helpen ontwikkelen of ontwerpen? Samen vorm je een team en ontwikkel je in 54 uur je eigen startup.&lt;/p&gt;
  12161. &lt;p&gt;Als Fronteerslid krijg je 25 euro korting op de ticketprijs van 75 euro.
  12162. Om gebruik te maken van de korting, kun je &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact opnemen met de ledenadministratie&lt;/a&gt;. De korting geldt, zoals gebruikelijk, alleen voor leden die bij aankondiging van deze actie al lid waren.&lt;/p&gt;
  12163. </content>
  12164.  </entry>
  12165.  <entry>
  12166.    <title>Kandidaat bestuur Fronteers: Arjan Eising</title>
  12167.    <link href="https://www.fronteers.nl/nl/blog/2012/11/kandidaat-bestuur-fronteers-arjan-eising"/>
  12168.    <updated>2012-11-14T00:00:00Z</updated>
  12169.    <id>https://www.fronteers.nl/nl/blog/2012/11/kandidaat-bestuur-fronteers-arjan-eising</id>
  12170.    <content xml:lang="nl" type="html">&lt;p&gt;Volgende week donderdag vindt de &lt;a href=&quot;https://www.fronteers.nl/blog/2012/10/kom-naar-de-algemene-ledenvergadering-2012&quot;&gt;jaarlijkse ALV&lt;/a&gt; van Fronteers plaats. Een van de onderdelen tijdens de ALV is de bestuursverkiezing. Dit jaar zijn er vier kandidaten voor het nieuwe bestuur, twee zittende bestuursleden en twee nieuwe leden. In de komende dagen stellen zij zich alle vier aan je voor. Vandaag:&lt;/p&gt;
  12171. &lt;h2&gt;Arjan Eising&lt;/h2&gt;
  12172. &lt;p&gt;De meeste mensen zullen mij kennen als die rare meneer die de bijeenkomsten inleidt. Mijn naam is Arjan Eising, reeds vijf jaar bestuurslid van Fronteers. Ik treed af, maar ben ook verkiesbaar om opnieuw in het bestuur zetel te nemen.&lt;/p&gt;
  12173. &lt;p&gt;Enkele punten zijn reeds genoemd om het bestuur (en dus de vereniging) te verbeteren. Denk aan de contacten met het onderwijs en andere vakgebieden verbeteren. Mijn puntjes om daar aan toe te voegen zijn het meer waarde geven aan het lidmaatschap. Denk aan:&lt;/p&gt;
  12174. &lt;ul&gt;
  12175. &lt;li&gt;hoge kwaliteit workshops organiseren, eventueel met internationale workshopleiders;&lt;/li&gt;
  12176. &lt;li&gt;leuke, nieuwe activiteiten gericht op leden, die je verder laten kijken dan de websites waar je normaal doordeweeks aan werkt;&lt;/li&gt;
  12177. &lt;li&gt;toffe, bedrukte merchandise en vakgerelateerde boeken die je voor een gereduceerd tarief kunt kopen als je lid bent van Fronteers.&lt;/li&gt;
  12178. &lt;/ul&gt;
  12179. &lt;p&gt;… zonder uiteraard de huidige &lt;a href=&quot;https://www.fronteers.nl/vereniging/lidmaatschap&quot;&gt;voordelen voor het lidmaatschap&lt;/a&gt; uit het oog te verliezen.&lt;/p&gt;
  12180. &lt;p&gt;De doelstelling van de vereniging is &amp;quot;de professionalisering van het beroep front-end web development. Daarbij streven wij naar erkenning, verbetering en ondersteuning van de (positie van) Nederlandstalige front-end webontwikkelaars.&amp;quot; Het huidige bestuur, waaronder ikzelf, heeft op veel vlakken bijgedragen hieraan. Denk aan: het congres, de reeds gegeven workshops en de onderwijscommissie.&lt;/p&gt;
  12181. &lt;p&gt;Echter, er is nog veel te doen. Ik denk dat Fronteers een actieve rol kan spelen in de communicatie over webrichtlijnen naar niet-front-end developers toe. Daarnaast moet het de banden met verenigingen voor gerelateerde vakgebieden sterk verbeteren. Ook is het voorlichten en inspireren van opdrachtgevers, werkgevers en potentiëel toekomstige front-end developers—over de toenemende leukheid en belangrijkheid van ons beroep—iets wat nu nog ondergesneeuwd is.&lt;/p&gt;
  12182. &lt;p&gt;Initiatief nemen is daarbij sleutel. De afgelopen jaren heb ik me actief ingezet om nieuwe activiteiten en commissies te ontplooien, denk aan de recentere LustrumCie en de AciviteitenCie. De trend wil ik zeker voortzetten, samen met de rest van het bestuur en de vrijwilligers. De ontplooiing van de Belgische tak van de vereniging is ook iets wat op mijn agenda staat, en waar ik een adviserende rol in kan nemen. Dit onder andere vanwege de opgedane ervaring bij de oprichting van de Nederlandse vereniging. Daarnaast zou ik, als de positie vrijkomt, de rol van secretaris op me willen nemen; een onmisbare rol in een bestuur.&lt;/p&gt;
  12183. &lt;p&gt;Ik hoop op je stem te mogen rekenen volgende week donderdag, 22 november. Laten we van Fronteers een nog mooiere, interessantere, leuke, inspirerende vereniging maken! Mocht je verhinderd zijn, dan kun je een stem laten uitbrengen door een bevriend Fronteerslid dat wel aanwezig zal zijn.&lt;/p&gt;
  12184. </content>
  12185.  </entry>
  12186.  <entry>
  12187.    <title>Kandidaat bestuur Fronteers: Vasilis van Gemert</title>
  12188.    <link href="https://www.fronteers.nl/nl/blog/2012/11/kandidaat-bestuur-fronteers-vasilis-van-gemert"/>
  12189.    <updated>2012-11-12T00:00:00Z</updated>
  12190.    <id>https://www.fronteers.nl/nl/blog/2012/11/kandidaat-bestuur-fronteers-vasilis-van-gemert</id>
  12191.    <content xml:lang="nl" type="html">&lt;p&gt;Over anderhalve week vindt de &lt;a href=&quot;https://www.fronteers.nl/blog/2012/10/kom-naar-de-algemene-ledenvergadering-2012&quot;&gt;jaarlijkse ALV&lt;/a&gt; van Fronteers plaats. Een van de onderdelen tijdens de ALV is de bestuursverkiezing. Dit jaar zijn er vier kandidaten voor het nieuwe bestuur, twee zittende bestuursleden en twee nieuwe leden. In de komende dagen stellen zij zich alle vier aan je voor. Na &lt;a href=&quot;https://www.fronteers.nl/blog/2012/11/kandidaat-bestuur-roy-tomeij&quot;&gt;Roy Tomeij&lt;/a&gt; is het nu de beurt aan:&lt;/p&gt;
  12192. &lt;h2&gt;Vasilis van Gemert&lt;/h2&gt;
  12193. &lt;h2&gt;Belangrijk: onderwijs en samenwerking&lt;/h2&gt;
  12194. &lt;p&gt;Als bestuurslid van Fronteers ga ik me hard maken voor twee dingen: onderwijs en samenwerking. Ik ga me met de hulp van goede docenten inzetten voor een verbetering van het (hoger) beroepsonderwijs in Nederland. Naast goede afgestudeerde frontenders wil ik over een paar jaar afgestudeerde designers met relevante kennis van het web kunnen aannemen.&lt;/p&gt;
  12195. &lt;p&gt;Naar mijn mening is Fronteers nogal in zichzelf gekeerd. Ik ga er voor zorgen dat we intensiever gaan samenwerken met andere beroepsorganisaties. Aan de ene kant omdat het goed is om te leren van andere professionals, om eens te zien hoe zij dingen doen. Aan de andere kant ben ik er van overtuigd dat veel vakgebieden enorm veel profijt kunnen hebben van de unieke kennis die wij bezitten. Ik heb inmiddels gezien dat een samenwerking tussen briljante techneuten en topdesigners kan zorgen voor prachtige nieuwe inzichten. Ik wil meer van die toffe shit.&lt;/p&gt;
  12196. &lt;p&gt;Ik ga dit allemaal natuurlijk niet zelf doen. Daar ben ik veel te lui voor. Bovendien moeten bestuursleden meer gaan delegeren. Dus, als je mee wilt denken over het beroepsonderwijs in Nederland, of als je fantastische ideeën hebt over goede manieren van samenwerken, stem dan op 22 november (ook) op mij.&lt;/p&gt;
  12197. &lt;h2&gt;Trivia&lt;/h2&gt;
  12198. &lt;p&gt;Naast deze écht belangrijke zaken lijkt het me ook wel goed als er iemand in het bestuur zit die bij een groot bureau werkt. Het bestuur zou een afspiegeling moeten zijn van de beroepsgroep, lijkt me. Volgend jaar dus graag wat vrouwen er bij en mensen die aan één enkel product werken.&lt;/p&gt;
  12199. &lt;p&gt;Mijn naam is overigens Vasilis van Gemert, en ik ben principal frontend developer bij Mirabeau, waar ik werk voor klanten als ING en KLM (onder veel meer). Sinds de oprichting van Fronteers ben ik betrokken bij de organisatie waar ik me onder andere een paar jaar bemoeid heb met het congres. Ik schrijf met enige regelmaat voor verschillende (web)magazines, ik ben gastdocent aan de HvA en ik geef graag mijn mening.&lt;/p&gt;
  12200. </content>
  12201.  </entry>
  12202.  <entry>
  12203.    <title>Kandidaat bestuur Fronteers: Roy Tomeij</title>
  12204.    <link href="https://www.fronteers.nl/nl/blog/2012/11/kandidaat-bestuur-roy-tomeij"/>
  12205.    <updated>2012-11-09T00:00:00Z</updated>
  12206.    <id>https://www.fronteers.nl/nl/blog/2012/11/kandidaat-bestuur-roy-tomeij</id>
  12207.    <content xml:lang="nl" type="html">&lt;p&gt;Over twee weken vindt de &lt;a href=&quot;https://www.fronteers.nl/blog/2012/10/kom-naar-de-algemene-ledenvergadering-2012&quot;&gt;jaarlijkse ALV&lt;/a&gt; van Fronteers plaats. Een van de onderdelen tijdens de ALV is de bestuursverkiezing. Dit jaar zijn er vier kandidaten voor het nieuwe bestuur, twee zittende bestuursleden en twee nieuwe leden. In de komende dagen stellen zij zich alle vier aan je voor. Vandaag:&lt;/p&gt;
  12208. &lt;h2&gt;Roy Tomeij&lt;/h2&gt;
  12209. &lt;p&gt;Beste Fronteers-leden, voordat jullie in groten getale gaan stemmen tijdens de ALV op 22 november stel ik me graag aan jullie voor. Het is immers wel zo handig om te weten op wie je nou eigenlijk kunt stemmen.&lt;/p&gt;
  12210. &lt;p&gt;Alleerst wat steekwoorden: 1980, echtgenoot, 80beans, cola, pragmatisch, &lt;a href=&quot;https://twitter.com/roy&quot;&gt;twitteraar&lt;/a&gt;, front-ender, &lt;a href=&quot;http://thesassway.com/roy-tomeij&quot;&gt;Sass-groupie&lt;/a&gt;, azijnpisser, &lt;a href=&quot;http://roytomeij.com/&quot;&gt;blogger&lt;/a&gt;, &lt;a href=&quot;http://modular-frontend.com/&quot;&gt;auteur&lt;/a&gt;, &lt;a href=&quot;https://www.fronteers.nl/workshops/screw-css-roy-tomeij&quot;&gt;trainer&lt;/a&gt;, chocoladepepernoten, &lt;a href=&quot;http://lanyrd.com/profile/roy/&quot;&gt;spreker&lt;/a&gt;, &lt;a href=&quot;http://amsrb.org/&quot;&gt;organisator&lt;/a&gt;. Details op verzoek.&lt;/p&gt;
  12211. &lt;p&gt;Op 2 juli 2007 werd ik lid van de Yahoo! Group &amp;quot;Gilde voor Front-enders&amp;quot;, waarna ik sinds begin 2008 meermaals actief ben geweest voor de vereniging en onregelmatig aan het bestuur kritiek heb geuit. Na bijna vijf jaar als beste schipper aan wal te hebben gestaan is de tijd gekomen om zelf een actieve sturende rol op me te nemen.&lt;/p&gt;
  12212. &lt;h2&gt;Wat wil ik doen dan?&lt;/h2&gt;
  12213. &lt;p&gt;Ik heb over alles een mening, maar deze kernpunten zou ik graag actief ter tafel brengen in het bestuur:&lt;/p&gt;
  12214. &lt;ul&gt;
  12215. &lt;li&gt;Onderwijzen van best practices aan andere disciplines. Niet enkel preken voor de eigen achterban, maar ook voorzien in de behoeften van designers, back-enders, etc.&lt;/li&gt;
  12216. &lt;li&gt;Betere aansluiting zoeken bij het beroepsonderwijs en een actieve rol vervullen in de totstandkoming en uitvoering van curricula.&lt;/li&gt;
  12217. &lt;li&gt;Fronteers is geen bedrijf, maar sommige processen zou ik graag efficiënter inrichten.&lt;/li&gt;
  12218. &lt;li&gt;Bestuur laten besturen. Het bestuur is te veel uitvoerend bezig en moet meer delegeren naar de commissies.&lt;/li&gt;
  12219. &lt;/ul&gt;
  12220. &lt;h2&gt;Waarom ik?&lt;/h2&gt;
  12221. &lt;p&gt;Het bestuur bestaat nu volledig uit freelancers. Het zou de vereniging ten goede komen om een breder palet aan bestuurders te hebben, waar ik met mijn &amp;quot;klein bureau&amp;quot;-achtergrond voor kan zorgen. Ik ben gewend om te delegeren en processen te optimaliseren. Doordat het besturen van Fronteers deel uit zou maken van mijn werk kan ik structureel tijd inplannen om me hiervoor in te zetten.&lt;/p&gt;
  12222. &lt;p&gt;&lt;em&gt;TL;DR; Stem op mij tijdens de ALV en ik zal voor meer gratis bier en bitterballen voor Fronteers-leden lobbyen!&lt;/em&gt;&lt;/p&gt;
  12223. </content>
  12224.  </entry>
  12225.  <entry>
  12226.    <title>Commissie Workshops</title>
  12227.    <link href="https://www.fronteers.nl/nl/blog/2012/11/commissie-workshops"/>
  12228.    <updated>2012-11-07T00:00:00Z</updated>
  12229.    <id>https://www.fronteers.nl/nl/blog/2012/11/commissie-workshops</id>
  12230.    <content xml:lang="nl" type="html">&lt;p&gt;De Commissie Cursussen heeft haar naam veranderd in Commissie Workshops en kondigt nieuwe &lt;strike&gt;cursussen&lt;/strike&gt; &lt;strong&gt;workshops&lt;/strong&gt; aan.&lt;/p&gt;
  12231. &lt;p&gt;De Commissie Cursussen heeft besloten om haar naam te veranderen. Van Dale definieert een cursus als volgt:&lt;/p&gt;
  12232. &lt;pre&gt;&lt;code&gt;cur·sus de;
  12233.    m -sen 1 reeks van lessen 2 schooljaar
  12234. &lt;/code&gt;&lt;/pre&gt;
  12235. &lt;p&gt;Aangezien al onze ‘cursussen’ slechts een dag duren en al helemaal geen schooljaar zijn, dekte ‘cursussen’ de lading niet al te best.&lt;/p&gt;
  12236. &lt;pre&gt;&lt;code&gt;work·shop [wu:rksjop] de;
  12237.  m -s het praktisch, creatief werken in groepjes)
  12238. &lt;/code&gt;&lt;/pre&gt;
  12239. &lt;p&gt;…daarentegen, dekt de lading een stuk beter. Vandaar dus deze naamswijziging en de nodige url-wijzigingen op de site. Niet in de laatste plaats te danken aan een puik stukje internationaal scrummen.&lt;/p&gt;
  12240. &lt;h2&gt;Planning&lt;/h2&gt;
  12241. &lt;p&gt;Voor eind november staat jQuery Inception, een workshop voor beginnende jQuery coders, op het programma. Omdat deze workshop in een mum van tijd vol zat en we van een aantal mensen de vraag hebben gehad of ze niet alsnog mee konden doen, hebben we geprobeerd de &lt;strike&gt;cursus&lt;/strike&gt; &lt;strong&gt;workshop&lt;/strong&gt; snel nog een keer in te plannen. Dat is gelukt en je kunt je nu &lt;a href=&quot;https://www.fronteers.nl/workshops/jquery-inception-arjan-eising/7-december-2012&quot;&gt;inschrijven&lt;/a&gt; voor &lt;a href=&quot;https://www.fronteers.nl/workshops/jquery-inception-arjan-eising&quot;&gt;jQuery Inception&lt;/a&gt; op 7 december.&lt;/p&gt;
  12242. &lt;p&gt;Roy Tomeij trapt het nieuwe jaar af op 18 januari met de workshop &lt;a href=&quot;https://www.fronteers.nl/workshops/screw-css-roy-tomeij&quot;&gt;Screw CSS!&lt;/a&gt; Ook deze workshop zat snel vol maar we hebben Roy gevraagd of hij tijd heeft hem later in het jaar nog een keer te geven. Dat wil hij, maar er is nog geen nieuwe datum geprikt.&lt;/p&gt;
  12243. &lt;p&gt;Tot slot hebben we voor eind januari een internationale trainer bereid gevonden een workshop te verzorgen. Zodra de planning hiervan definitief is, wordt deze workshop aangekondigd.&lt;/p&gt;
  12244. </content>
  12245.  </entry>
  12246.  <entry>
  12247.    <title>500 leden!</title>
  12248.    <link href="https://www.fronteers.nl/nl/blog/2012/11/500-leden"/>
  12249.    <updated>2012-11-05T00:00:00Z</updated>
  12250.    <id>https://www.fronteers.nl/nl/blog/2012/11/500-leden</id>
  12251.    <content xml:lang="nl" type="html">&lt;p&gt;Aangezien we &lt;a href=&quot;http://twitter.com/fronteers/status/264674691598389248&quot;&gt;afgelopen weekend&lt;/a&gt; de &lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;500 leden&lt;/a&gt; hebben bereikt, wordt het weer tijd voor een &lt;strike&gt;feestje&lt;/strike&gt; &lt;strong&gt;spontaanborrel&lt;/strong&gt;.&lt;/p&gt;
  12252. &lt;p&gt;Tot volgende week, maandag 12 november, vanaf een uurtje of 18, bij &lt;a href=&quot;http://maps.google.nl/maps?f=q&amp;amp;source=s_q&amp;amp;hl=nl&amp;amp;geocode=&amp;amp;q=winkel+van+sinkel+utrecht&amp;amp;sll=52.469397,5.509644&amp;amp;sspn=3.654648,9.766846&amp;amp;ie=UTF8&amp;amp;hq=Winkel+van+Sinkel&amp;amp;hnear=Winkel+van+Sinkel,+3512+Utrecht&amp;amp;ll=52.095486,5.118599&amp;amp;spn=0.027472,0.076303&amp;amp;z=14&amp;amp;iwloc=A&quot;&gt;De Winkel van Sinkel&lt;/a&gt; in Utrecht!&lt;/p&gt;
  12253. &lt;p&gt;Hieronder wat getalletjes, voor de gekte.&lt;/p&gt;
  12254. &lt;p&gt;Vaakst voorkomende namen van leden
  12255. Martijn 12 keer
  12256. Peter 10 keer
  12257. Jeroen 9 keer
  12258. Wouter 8 keer
  12259. Sander 6 keer
  12260. Paul 6 keer
  12261. Johan 6 keer
  12262. Tom 6 keer)&lt;/p&gt;
  12263. &lt;p&gt;Steden met de meeste leden
  12264. Amsterdam 67 leden
  12265. Utrecht 41 leden
  12266. Rotterdam 29 leden
  12267. Den Haag 20 leden
  12268. Groningen 11 leden
  12269. Delft 11 leden
  12270. Den Bosch 10 leden)&lt;/p&gt;
  12271. &lt;p&gt;Bedrijven met de meeste leden
  12272. Mirabeau|11 leden
  12273. eFocus|6 leden
  12274. Stichting Accessibility|5 leden
  12275. Ordina|5 leden)&lt;/p&gt;
  12276. &lt;p&gt;Ledengroei door de jaren heen
  12277. 2008 147 leden +147 (ja, echt!)
  12278. 2009 222 leden +75
  12279. 2010 327 leden +105
  12280. 2011 431 leden +104
  12281. 2012 510 leden +79 (and counting!))&lt;/p&gt;
  12282. &lt;p&gt;Willekeurige getallen
  12283. Sinds 2008 onverstoord lid|96 leden
  12284. Vaakst voorkomende naam van leden die al sinds 2008 lid zijn|Jeroen
  12285. Minimaal één halfjaar lid geweest|734 personen
  12286. Studentenleden|11 leden
  12287. Plaatsen waar we leden hebben|190 plaatsen
  12288. Landen waar we leden hebben|5 landen
  12289. Sinds het begin van Fronteers langsgekomen bij de ledenadministratie|810 namen
  12290. Geïnteresseerd in dit soort getallen|6 personen)&lt;/p&gt;
  12291. </content>
  12292.  </entry>
  12293.  <entry>
  12294.    <title>Activiteitencommisie in het leven geroepen</title>
  12295.    <link href="https://www.fronteers.nl/nl/blog/2012/11/activiteitencommisie"/>
  12296.    <updated>2012-11-02T00:00:00Z</updated>
  12297.    <id>https://www.fronteers.nl/nl/blog/2012/11/activiteitencommisie</id>
  12298.    <content xml:lang="nl" type="html">&lt;p&gt;Tijdens de laatste bestuursvergadering is er een nieuwe commissie in het leven geroepen: een activiteitencommissie. Doel van de commissie is om het organiseren van bijeenkomsten en kleinschalige evenementen zoals een barcamp, jamsessies of hackathons centraal te houden. De commissie is op zoek naar leden.&lt;/p&gt;
  12299. &lt;p&gt;Voornaamste taken die maandelijks, of zelfs vaker, gedaan moeten worden, zijn:&lt;/p&gt;
  12300. &lt;ul&gt;
  12301. &lt;li&gt;Contactpersoon zijn van sprekers en mensen die bij de gastbedrijven werken zodat een bijeenkomst tot stand kan komen;&lt;/li&gt;
  12302. &lt;li&gt;Het schrijven van aankondigings-blogposts en bijwerken van detailpagina&#39;s van de bijeenkomsten en activiteiten;&lt;/li&gt;
  12303. &lt;li&gt;Aankondigen van die activiteiten via &lt;a href=&quot;https://twitter.com/fronteers&quot;&gt;Twitter&lt;/a&gt;, &lt;a href=&quot;http://www.facebook.com/fronteers&quot;&gt;Facebook&lt;/a&gt; en &lt;a href=&quot;http://lanyrd.com/profile/fronteers/&quot;&gt;Lanyrd&lt;/a&gt;;&lt;/li&gt;
  12304. &lt;li&gt;Opnemen van de presentaties met een te kopen camera;&lt;/li&gt;
  12305. &lt;li&gt;Bewerken van de beelden opgenomen met die camera en ze op de site en het &lt;a href=&quot;http://www.vimeo.com/fronteers&quot;&gt;Fronteers Vimeo account&lt;/a&gt; te plaatsen;&lt;/li&gt;
  12306. &lt;li&gt;Het kopen van flesjes wijn voor de sprekers en het gastbedrijf;&lt;/li&gt;
  12307. &lt;li&gt;Op de bijeenkomsten optreden als host.&lt;/li&gt;
  12308. &lt;/ul&gt;
  12309. &lt;p&gt;Daarnaast is er genoeg ruimte om op de mailinglijst ideeën voor sprekers, typen bijeenkomsten en activiteiten en andere toffe dingen te bediscussiëren. Dus heb je zin om een van de bovenstaande taken op te pakken, schroom dan niet een (korte) introductie en motivatie te sturen via &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;het contactformulier&lt;/a&gt;.&lt;/p&gt;
  12310. </content>
  12311.  </entry>
  12312.  <entry>
  12313.    <title>Kom naar de Algemene Ledenvergadering</title>
  12314.    <link href="https://www.fronteers.nl/nl/blog/2012/10/kom-naar-de-algemene-ledenvergadering-2012"/>
  12315.    <updated>2012-10-30T00:00:00Z</updated>
  12316.    <id>https://www.fronteers.nl/nl/blog/2012/10/kom-naar-de-algemene-ledenvergadering-2012</id>
  12317.    <content xml:lang="nl" type="html">&lt;p&gt;Donderdag 22 november a.s. vindt de jaarlijkse Algemene Ledenvergadering (ALV) van Fronteers plaats. We willen zoveel mogelijk betrokken leden oproepen naar deze ledenvergadering te komen. Dit jaar zal de ALV gehouden worden op Utrecht CS.&lt;/p&gt;
  12318. &lt;p&gt;Enkele belangrijke punten die we op deze ALV willen bespreken zijn:&lt;/p&gt;
  12319. &lt;ul&gt;
  12320. &lt;li&gt;Toelichting op het reilen en zeilen van de actieve commissies&lt;/li&gt;
  12321. &lt;li&gt;Opheffen commissie Diplomering&lt;/li&gt;
  12322. &lt;li&gt;Bespreken van voorstellen over de financiële reserve van Fronteers&lt;/li&gt;
  12323. &lt;li&gt;Bestuursverkiezing en vertrek Peter-Paul Koch (PPK)&lt;/li&gt;
  12324. &lt;/ul&gt;
  12325. &lt;h2&gt;Agenda&lt;/h2&gt;
  12326. &lt;h2&gt;1. Welkom en opening door de voorzitter&lt;/h2&gt;
  12327. &lt;h2&gt;2. Toelichting commissies&lt;/h2&gt;
  12328. &lt;ul&gt;
  12329. &lt;li&gt;Onderwijs&lt;/li&gt;
  12330. &lt;li&gt;Online Community&lt;/li&gt;
  12331. &lt;li&gt;Congres&lt;/li&gt;
  12332. &lt;li&gt;Marketing&lt;/li&gt;
  12333. &lt;li&gt;Cursussen&lt;/li&gt;
  12334. &lt;li&gt;Webrichtlijnen&lt;/li&gt;
  12335. &lt;li&gt;Activiteiten&lt;/li&gt;
  12336. &lt;li&gt;Oprichting commissie België&lt;/li&gt;
  12337. &lt;/ul&gt;
  12338. &lt;h2&gt;3. Ingebrachte beleidsvoorstellen&lt;/h2&gt;
  12339. &lt;ul&gt;
  12340. &lt;li&gt;Opheffen commissie Diplomering (zie &lt;a href=&quot;https://www.fronteers.nl/blog/2012/10/opheffing-commissie-diplomering&quot;&gt;blogpost&lt;/a&gt;)&lt;/li&gt;
  12341. &lt;li&gt;De financiële reserve van Fronteers (hierover verschijnt binnenkort een toelichtende blogpost op fronteers.nl)&lt;/li&gt;
  12342. &lt;/ul&gt;
  12343. &lt;h2&gt;4. Besluiten eerdere ALV’s&lt;/h2&gt;
  12344. &lt;ul&gt;
  12345. &lt;li&gt;Toelichting copyright statement publicaties Fronteers&lt;/li&gt;
  12346. &lt;li&gt;Vastleggen beeldmerk Fronteers&lt;/li&gt;
  12347. &lt;li&gt;Evaluatie vacaturebank&lt;/li&gt;
  12348. &lt;li&gt;Evaluatie korting op buitenlandse congressen&lt;/li&gt;
  12349. &lt;li&gt;Strikter uitschrijven niet-betalende leden&lt;/li&gt;
  12350. &lt;li&gt;Automatische incasso&lt;/li&gt;
  12351. &lt;li&gt;Hoogte contributie&lt;/li&gt;
  12352. &lt;/ul&gt;
  12353. &lt;h2&gt;5. Begroting 2011&lt;/h2&gt;
  12354. &lt;h2&gt;6. Begroting 2012&lt;/h2&gt;
  12355. &lt;h2&gt;7. Kascommissieverkiezing&lt;/h2&gt;
  12356. &lt;h2&gt;8. Bestuursverkiezing&lt;/h2&gt;
  12357. &lt;p&gt;Peter-Paul Koch, Arjan Eising en Matijs Brinkhuis treden af. Arjan en Matijs zijn herkiesbaar. Tevens hebben zich twee nieuwe kandidaatbestuursleden aangemeld: Roy Tomeij en Vasilis van Gemert.&lt;/p&gt;
  12358. &lt;h2&gt;9. Afscheid PPK&lt;/h2&gt;
  12359. &lt;h2&gt;10. Rondvraag&lt;/h2&gt;
  12360. &lt;h2&gt;11. Afsluiting&lt;/h2&gt;
  12361. &lt;p&gt;&lt;em&gt;De ALV vindt op donderdag 22 november om 19.00 uur plaats in &lt;a href=&quot;http://www.hoogbrabant.nl/Routebeschrijving/&quot;&gt;vergadercentrum Hoog Brabant&lt;/a&gt; bij Utrecht CS.&lt;/em&gt;&lt;/p&gt;
  12362. </content>
  12363.  </entry>
  12364.  <entry>
  12365.    <title>Bijeenkomsten op 27 en 29 november</title>
  12366.    <link href="https://www.fronteers.nl/nl/blog/2012/10/bijeenkomsten-eind-november"/>
  12367.    <updated>2012-10-24T00:00:00Z</updated>
  12368.    <id>https://www.fronteers.nl/nl/blog/2012/10/bijeenkomsten-eind-november</id>
  12369.    <content xml:lang="nl" type="html">&lt;p&gt;Eind november hebben we twee bijeenkomsten ingepland. Te weten bij &lt;a href=&quot;http://incentro.com/&quot;&gt;Incentro&lt;/a&gt; te Amsterdam op dinsdag de 27ste, en twee dagen later, op de 29ste, bij &lt;a href=&quot;http://www.infosupport.com/&quot;&gt;Info Support&lt;/a&gt; in Veenendaal.&lt;/p&gt;
  12370. &lt;h2&gt;Incentro – 27 november 2012&lt;/h2&gt;
  12371. &lt;p&gt;Rob van der Burgt vertelt deze avond hoe je hardware zoals een webcam kunt gebruiken in een webapplicatie. Nikolai Onken duikt in op een door zijn bedrijf ontwikkelde graphics library genaamd BonsaiJS.&lt;/p&gt;
  12372. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/incentro&quot;&gt;Lees meer over deze bijeenkomst bij Incentro&lt;/a&gt;&lt;/p&gt;
  12373. &lt;h2&gt;Info Support – 29 november 2012&lt;/h2&gt;
  12374. &lt;p&gt;Thamar Kiemel gaat een—bij Fronteers onderbelicht—onderwerp aansnijden: content management en hoe je een contentafdeling goed opzet en begeleidt. Daarna is het woord aan Isaac Andela, die gaat uitleggen hoe je Sass overzichtelijk opzet zodat je makkelijker CSS schrijft.&lt;/p&gt;
  12375. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/info-support&quot;&gt;Lees meer over deze bijeenkomst bij Info Support&lt;/a&gt;&lt;/p&gt;
  12376. &lt;p&gt;Zoals gebruikelijk zijn beide bijeenkomsten gratis toegankelijk voor zowel leden als niet-leden. Wel is gewenst dat je doorgeeft dat je aanwezig zult zijn via de formulieren op de hierboven gelinkte pagina&#39;s.&lt;/p&gt;
  12377. </content>
  12378.  </entry>
  12379.  <entry>
  12380.    <title>Opheffing commissie diplomering</title>
  12381.    <link href="https://www.fronteers.nl/nl/blog/2012/10/opheffing-commissie-diplomering"/>
  12382.    <updated>2012-10-17T00:00:00Z</updated>
  12383.    <id>https://www.fronteers.nl/nl/blog/2012/10/opheffing-commissie-diplomering</id>
  12384.    <content xml:lang="nl" type="html">&lt;p&gt;Misschien is het droevig maar de commissie Diplomering van Fronteers is niet meer.&lt;/p&gt;
  12385. &lt;p&gt;Enkele jaren geleden begonnen we met een select groepje enthousiast met het opzetten van diplomering voor front-end developers. In die tijd was het vak als zodanig nog niet zo erkend als tegenwoordig. We hadden het idee om dat met een diplomering te verbeteren.&lt;/p&gt;
  12386. &lt;h2&gt;Hoe wilden we dat doen?&lt;/h2&gt;
  12387. &lt;p&gt;Na overleg kwamen we al snel uit op een tweedelig examen. Eerst een theoriegedeelte, met vragen die vanuit de W3C-standaarden getoetst konden worden. Dan zou een praktijkgedeelte volgen, waar men een ontwerp kreeg, wat op een whiteboard uitgewerkt mocht worden. Tijdens deze opdracht zouden de examinatoren vragen stellen over de gemaakte keuzes om achter de motivatie voor een bepaalde richting te komen. Samen zouden deze twee gedeeltes een resultaat van het examen over HTML en CSS opleveren. Dit examen zou iedere twee jaar opnieuw moeten worden afgenomen om te garanderen dat de kennis up-to-date bleef.&lt;/p&gt;
  12388. &lt;p&gt;Na een voortvarend begin begon de motivatie van de commissie al af te nemen, om na een jaar langzaam geheel te verdwijnen. Uiteindelijk bleef ik alleen over en ook ik had er geen tijd meer voor over.&lt;/p&gt;
  12389. &lt;h2&gt;Het einde&lt;/h2&gt;
  12390. &lt;p&gt;Begin dit jaar besloten we om nog een keer te beginnen, met als een van de eerste acties het polsen van de interesse vanuit het veld. Dit gebeurde met een &lt;a href=&quot;http://wnas.nl/fronteers-certification&quot;&gt;blogpost op wnas.nl&lt;/a&gt;. De reacties waren bijna allemaal negatief. Vooral de ervaren front-end ontwikkelaars zagen het niet zitten om getoetst te worden en sommigen waren zelfs bang dat het toetsen zou leiden tot een verkeerd beeld over de kwaliteit van front-end developers. Uit de praktijk van andere talen (Java en .NET bijvoorbeeld) blijkt dat de kwaliteit van de ontwikkelaar niet recht evenredig is aan de hoeveelheid toetsen die gehaald zijn. Integendeel zelfs.&lt;/p&gt;
  12391. &lt;p&gt;Voor opdrachtgevers heeft het al dan niet hebben van een certificaat van een kandidaat geen meerwaarde. De meest ervaren front-end developers zijn het minst geneigd een certificaat te halen. De meeste opdrachten worden ook verleend aan een bureau, en niet aan een specifieke developer. Met andere woorden, als een gediplomeerde developer het bureau verlaat, dan zal de klant niet om die reden overstappen naar een ander bureau.&lt;/p&gt;
  12392. &lt;h2&gt;Conclusie&lt;/h2&gt;
  12393. &lt;p&gt;Doordat er geen behoefte is vanuit de front-end gemeenschap en geen meerwaarde voor opdrachtgevers, stoppen we, en dienen op de komende ALV een motie in om de commissie op te heffen.&lt;/p&gt;
  12394. &lt;p&gt;Nawoord bestuur: We willen Wilfred en alle leden die zich door de jaren heen voor de commissie hebben ingezet bedanken voor hun inspanningen. Het landschap van front-end ontwikkeling heeft zich de afgelopen 5 jaar sterk verder ontwikkeld, waar het pure bestaan van Fronteers ook aan heeft bijgedragen, en het bestuur onderschrijft de conclusie van de commissie dat diplomering niet langer gewenst is.&lt;/p&gt;
  12395. </content>
  12396.  </entry>
  12397.  <entry>
  12398.    <title>25% korting op workshop met Stephen Anderson</title>
  12399.    <link href="https://www.fronteers.nl/nl/blog/2012/10/korting-workshop-stephen-anderson"/>
  12400.    <updated>2012-10-13T00:00:00Z</updated>
  12401.    <id>https://www.fronteers.nl/nl/blog/2012/10/korting-workshop-stephen-anderson</id>
  12402.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 9 november organiseren Q42 en Fabrique samen met Stephen Anderson &lt;a href=&quot;http://qfee.nl/&quot;&gt;een workshop over informatie visualisatie&lt;/a&gt;.&lt;/p&gt;
  12403. &lt;p&gt;Het werk van een front-end ontwikkelaar bestaat uit informatie op een scherm visualiseren, dus ook als je voornamelijk de hele dag naar code kijkt is het belangrijk om te begrijpen wat goede technieken voor dergelijke visualisatie zijn en waar je wel en niet naar moet kijken.&lt;/p&gt;
  12404. &lt;p&gt;Stephen Anderson is een bekende spreker in de design wereld. Hij was twee jaar geleden ook in Nederland, en heeft toen bij Q42 een presentatie gegeven over hoe psychologie web design kan versterken. Uiteindelijk heeft hij daar een boek over geschreven, Seductive Interaction Design.&lt;/p&gt;
  12405. &lt;p&gt;Nu is hij terug met een nieuwe focus, “&lt;a href=&quot;http://qfee.nl/&quot;&gt;The Quest for Emotional Engagement&lt;/a&gt;”, waarin hij zoekt naar andere manieren om als UI designer mensen voorbij standaardpatronen als lijsten, grids en tables te laten denken.&lt;/p&gt;
  12406. &lt;p&gt;Q42 en Fabrique sponsoren de workshop, die plaatsvindt in de Westerliefde op het Westergasterrein in Amsterdam. Kom je ook? Leden van Fronteers krijgen 25% korting! Neem even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact op met de ledenadministratie&lt;/a&gt; om je kortingscode te ontvangen.&lt;/p&gt;
  12407. </content>
  12408.  </entry>
  12409.  <entry>
  12410.    <title>Bijeenkomst op 25 oktober bij Combell</title>
  12411.    <link href="https://www.fronteers.nl/nl/blog/2012/10/bijeenkomst-combell"/>
  12412.    <updated>2012-10-10T00:00:00Z</updated>
  12413.    <id>https://www.fronteers.nl/nl/blog/2012/10/bijeenkomst-combell</id>
  12414.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 25 oktober 2012 is Fronteers te gast bij &lt;a href=&quot;http://www.combell.com/nl&quot;&gt;Combell&lt;/a&gt; in Gent. Er worden twee presentaties voorzien. Eerst komt &lt;a href=&quot;http://twitter.com/qwaxys&quot;&gt;Bart Derudder&lt;/a&gt; wat vertellen over (het gebrek aan) security op het web; vervolgens zal &lt;a href=&quot;http://twitter.com/ThijsFeryn&quot;&gt;Thijs Feryn&lt;/a&gt; wat vertellen over HTTP.&lt;/p&gt;
  12415. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12416. &lt;ul&gt;
  12417. &lt;li&gt;18:00 ontvangst met een hapje en een drankje&lt;/li&gt;
  12418. &lt;li&gt;19:00 Bart Derudder: &lt;em&gt;Security – The Weakest Links&lt;/em&gt;&lt;/li&gt;
  12419. &lt;li&gt;20:00 Thijs Feryn: &lt;em&gt;There’s this thing called HTTP&lt;/em&gt;&lt;/li&gt;
  12420. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  12421. &lt;/ul&gt;
  12422. &lt;h2&gt;Waar?&lt;/h2&gt;
  12423. &lt;p&gt;Dit evenement vindt plaats bij Combell Group NV te Gent. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/combell&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  12424. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  12425. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 70 mannen en vrouwen. Geef je daarom op via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/combell#aanmeldingen&quot;&gt;aanmeldformulier&lt;/a&gt;. Vol is vol!&lt;/p&gt;
  12426. </content>
  12427.  </entry>
  12428.  <entry>
  12429.    <title>Workshops jQuery Inception en Screw CSS! op herhaling</title>
  12430.    <link href="https://www.fronteers.nl/nl/blog/2012/10/workshops-update-oktober"/>
  12431.    <updated>2012-10-09T00:00:00Z</updated>
  12432.    <id>https://www.fronteers.nl/nl/blog/2012/10/workshops-update-oktober</id>
  12433.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 30 november wordt een vernieuwde &lt;a href=&quot;https://www.fronteers.nl/workshops/jquery-inception-arjan-eising&quot;&gt;workshop jQuery Inception&lt;/a&gt; gegeven. Enkele weken later, op 18 januari zal Roy Tomeij zijn &lt;a href=&quot;https://www.fronteers.nl/workshops/screw-css-roy-tomeij&quot;&gt;workshop Screw CSS!&lt;/a&gt; opnieuw geven.&lt;/p&gt;
  12434. &lt;p&gt;Tijdens de beginnerscursus jQuery Inception leer je de basis van programmeren in JavaScript, interacties met de bezoeker van een webpagina, en hoe je HTML en CSS manipuleert met jQuery. Het concept en het niveau van de cursus is iets toegankelijker voor niet-programmeurs dan voorheen.&lt;/p&gt;
  12435. &lt;p&gt;Screw CSS leert je alles over het installeren en gebruiken van een CSS preprocessor. Je ontdekt alle geheimen van Sass, Compass en LESS om optimaal gebruik te maken van deze tools. Eer je ze aangeleerd hebt, schrijf je veel sneller CSS-code.&lt;/p&gt;
  12436. &lt;p&gt;Beide cursussen worden gegeven bij Seats2meet, en kosten 200 euro per cursus voor niet-leden. De prijs voor leden is de helft: 100 euro. Beide bedragen zijn exclusief 21% btw. Een cursus duurt de hele dag, en koffie, thee en lunch zijn inbegrepen.&lt;/p&gt;
  12437. &lt;p&gt;Er zijn momenteel voorbereidingen voor enkele van de andere cursussen. Heb je interesse in een cursus die een vorige keer vol zat, of heb je ideeën voor een nieuwe cursus, laat dan een reactie achter hieronder of via &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;het formulier&lt;/a&gt;.&lt;/p&gt;
  12438. </content>
  12439.  </entry>
  12440.  <entry>
  12441.    <title>Inschrijven voor bijeenkomst op 1 november bij Netvlies</title>
  12442.    <link href="https://www.fronteers.nl/nl/blog/2012/10/inschrijven-bijeenkomst-november"/>
  12443.    <updated>2012-10-09T00:00:00Z</updated>
  12444.    <id>https://www.fronteers.nl/nl/blog/2012/10/inschrijven-bijeenkomst-november</id>
  12445.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 1 november is Fronteers te gast bij Netvlies Internetdiensten in Breda. Dit keer is het geen bijeenkomst met 2 presentaties, maar een Pecha Kucha met 10 presentaties. De inschrijvingen hiervoor zijn vanaf vandaag geopend.&lt;/p&gt;
  12446. &lt;p&gt;Op donderdag 1 november is Fronteers te gast bij Netvlies Internetdiensten in Breda. Dit keer is het geen bijeenkomst met 2 presentaties, maar een Pecha Kucha met 10 presentaties van 6 minuut 40.&lt;/p&gt;
  12447. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12448. &lt;ul&gt;
  12449. &lt;li&gt;18.30 Inloop&lt;/li&gt;
  12450. &lt;li&gt;19.30 Jayne Verbeek - Intro + All your phones are belong to me&lt;/li&gt;
  12451. &lt;li&gt;19.40 Krijn Hoetmer - Pedantic Indenting&lt;/li&gt;
  12452. &lt;li&gt;19.50 Jules Ernst - Webrichtlijnen en het toepassen van afkortingen&lt;/li&gt;
  12453. &lt;li&gt;20.00 Peter van der Zee - When Worlds Collide&lt;/li&gt;
  12454. &lt;li&gt;20.10 Jaco Koster - Building Big Sites&lt;/li&gt;
  12455. &lt;li&gt;20.20 korte pauze&lt;/li&gt;
  12456. &lt;li&gt;20.40 Arjan Eising - Dr. Strangescope or: How I Learned to Stop Worrying and Love the Closure&lt;/li&gt;
  12457. &lt;li&gt;20.50 Thomas van Zuijlen - TBA&lt;/li&gt;
  12458. &lt;li&gt;21.00 Vasilis van Gemert - Nieuwe uitgangspunten voor webdesign&lt;/li&gt;
  12459. &lt;li&gt;21.10 Christiaan W. Lustig - De rol van contentproductie in responsive web design&lt;/li&gt;
  12460. &lt;li&gt;21.20 Pascal Vree - How To Destroy Innovation&lt;/li&gt;
  12461. &lt;li&gt;21.30 borrelen&lt;/li&gt;
  12462. &lt;/ul&gt;
  12463. &lt;h2&gt;Pecha Kucha&lt;/h2&gt;
  12464. &lt;p&gt;Pecha Kucha is een presentatiestijl waarbij 20 slides worden getoond die elk 20 seconden in beeld zijn. Door de korte tijd van 6 minuut 40 krijg je snelle en beknopte presentaties.&lt;/p&gt;
  12465. &lt;p&gt;Pecha Kuchas zorgen vaak voor het onverwachte - onverwacht talent, onverwachte ideeën. Zorg er dus voor dat je er bij bent!&lt;/p&gt;
  12466. &lt;h2&gt;Waar?&lt;/h2&gt;
  12467. &lt;p&gt;Dit evenement vindt plaats bij Netvlies in Breda. Het adres is Prinsenkade 7, Breda. Zoals gebruikelijk is deze bijeenkomst gratis bij te wonen door zowel leden als niet-leden. Geef wel even aan dat je komt &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/netvlies&quot;&gt;het formulier op de bijeenkomstpagina&lt;/a&gt;. &lt;em&gt;Er is slechts ruimte voor 30 personen, inclusief sprekers.&lt;/em&gt;&lt;/p&gt;
  12468. </content>
  12469.  </entry>
  12470.  <entry>
  12471.    <title>Met 50% korting naar de training &#39;Apps en Accessibility&#39;</title>
  12472.    <link href="https://www.fronteers.nl/nl/blog/2012/10/korting-training-apps-accessibility"/>
  12473.    <updated>2012-10-08T00:00:00Z</updated>
  12474.    <id>https://www.fronteers.nl/nl/blog/2012/10/korting-training-apps-accessibility</id>
  12475.    <content xml:lang="nl" type="html">&lt;p&gt;Donderdag 11 oktober organiseert Stichting Accessibility een korte training &lt;a href=&quot;http://www.accessibility.nl/trainingen/julian-harty-apps-and-accessibility&quot;&gt;&#39;Apps en Accessibility&#39;&lt;/a&gt; met als speciale gast &lt;a href=&quot;https://twitter.com/julianharty&quot;&gt;Julian Harty&lt;/a&gt;. Leden van Fronteers krijgen 50% euro korting op deze training.&lt;/p&gt;
  12476. &lt;p&gt;Julian Harty (UK) is een expert op het gebied van testen en verbeteren van mobiele apps en webapplicaties. Hij spreekt over de hele wereld over het verbeteren van mobiele applicaties en internettoepassingen door slimme inzet van tools. In de lezing &#39;Apps &amp;amp; Accessibility&#39;, zal hij onder meer ingaan op het testen van de toegankelijkheid van mobiele applicaties. Let op: deze lezing is in het Engels.&lt;/p&gt;
  12477. &lt;p&gt;Om gebruik te maken van de korting, kun je &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact opnemen met de ledenadministratie&lt;/a&gt;. De korting geldt, zoals gebruikelijk, alleen voor leden die bij aankondiging van deze actie al lid waren.&lt;/p&gt;
  12478. </content>
  12479.  </entry>
  12480.  <entry>
  12481.    <title>Bijeenkomsten op 17 en 24 oktober</title>
  12482.    <link href="https://www.fronteers.nl/nl/blog/2012/09/bijeenkomsten-oktober"/>
  12483.    <updated>2012-09-28T00:00:00Z</updated>
  12484.    <id>https://www.fronteers.nl/nl/blog/2012/09/bijeenkomsten-oktober</id>
  12485.    <content xml:lang="nl" type="html">&lt;p&gt;Naast het congres staan er in oktober ook twee bijeenkomsten ingepland. De eerste is op woensdag 17 oktober bij &lt;a href=&quot;http://competa.com/&quot;&gt;Competa&lt;/a&gt; in Rijswijk. Een week later, op woensdag 24 oktober, doen we Hilversum aan bij &lt;a href=&quot;http://lajos.nl/&quot;&gt;Lajos&lt;/a&gt;.&lt;/p&gt;
  12486. &lt;h2&gt;Competa - 17 oktober 2012&lt;/h2&gt;
  12487. &lt;p&gt;Dan Entous gaat een responsive design showcase toelichten, en kijkt welke technieken en aanpakken ze hebben gebruikt in dat traject. Er is nog geen tweede spreker.&lt;/p&gt;
  12488. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/competa&quot;&gt;Lees meer over deze bijeenkomst bij Competa&lt;/a&gt;&lt;/p&gt;
  12489. &lt;h2&gt;Lajos - 24 oktober 2012&lt;/h2&gt;
  12490. &lt;p&gt;Edwin Martin neemt ons mee de diepte in op het gebied van jQuery&#39;s deferred en promise objecten en methoden. Daniël Vermeer vertelt over back-end security en wat daarvoor belangrijk is voor front-end developers.&lt;/p&gt;
  12491. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/lajos&quot;&gt;Lees meer over deze bijeenkomst bij Lajos&lt;/a&gt;&lt;/p&gt;
  12492. &lt;p&gt;Zoals gebruikelijk zijn beide bijeenkomsten gratis toegankelijk voor zowel leden als niet-leden. Wel is gewenst dat je doorgeeft dat je aanwezig zult zijn via de formulieren op de hierboven gelinkte pagina&#39;s.&lt;/p&gt;
  12493. </content>
  12494.  </entry>
  12495.  <entry>
  12496.    <title>Algemene Ledenvergadering 2012 en bestuursverkiezingen</title>
  12497.    <link href="https://www.fronteers.nl/nl/blog/2012/09/alv-en-bestuursverkiezingen"/>
  12498.    <updated>2012-09-25T00:00:00Z</updated>
  12499.    <id>https://www.fronteers.nl/nl/blog/2012/09/alv-en-bestuursverkiezingen</id>
  12500.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 22 november zal de jaarlijkse Algemene Ledenvergadering (ALV) van Fronteers plaatsvinden. Op de ALV wordt het afgelopen jaar besproken, wordt de koers voor het nieuwe jaar uitgezet en worden bestuursverkiezingen gehouden. De plaats en tijd worden nader bekend gemaakt in een aparte blogpost, maar reserveer de avond van de 22e alvast in je agenda.&lt;/p&gt;
  12501. &lt;p&gt;Dit jaar zullen de bestuursleden Peter-Paul Koch, Arjan Eising, en Matijs Brinkhuis aftreden. Arjan en Matijs zijn herkiesbaar, Peter-Paul is dat niet. Hij zegt na vijf jaar het Fronteersbestuur vaarwel. Tevens willen wij duidelijk maken dat Matijs Brinkhuis zich in Brighton heeft gevestigd, en dus niet meer in Nederland woont. Het bestuur acht dit geen beletsel voor zijn bestuurstaken, temeer daar hij heeft aangeboden het penningmeesterschap van Krijn Hoetmer over te nemen, dat geheel online uitgeoefend kan worden. Zowel Matijs als Arjan zullen op een later moment hun kandidatuur nog nader toelichten.&lt;/p&gt;
  12502. &lt;p&gt;Peter-Paul zal wel actief lid van de vereniging blijven. Namens de vereniging bedankt de rest van het bestuur Peter-Paul voor zijn jarenlange inzet als voorzitter, en voor het trekken van de kar sinds voor de oprichting in 2007. De vereniging kan ondertussen prima op haar eigen benen staan, maar is zeker in eerste instantie sterk gevormd door Peter-Paul&#39;s leiderschap. Veel van ons huidige succes hebben we te danken aan zijn oorspronkelijke visie.&lt;/p&gt;
  12503. &lt;p&gt;Conform de statuten mag elk lid zich verkiesbaar stellen voor het bestuur, en het voornaamste doel van deze blogpost is te vragen of er leden zijn die zich daartoe geroepen voelen. Deze leden hebben tot 22 oktober, een maand voor de ALV, de tijd zich kandidaat te stellen. Dit kan je doen door &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact&lt;/a&gt; met ons op te nemen: je kandidatuur komt dan vanzelf bij het bestuur terecht. Geef kort en bondig aan waarom je in het bestuur zou willen plaatsnemen. Op 22 oktober zullen eventuele kandidaturen bekend gemaakt worden.&lt;/p&gt;
  12504. &lt;p&gt;Op de ALV kunnen alle aanwezige leden op alle, sommige, of geen van de kandidaten stemmen. Alle kandidaten die meer dan 50% van de uitgebrachte stemmen krijgen, worden in het bestuur verkozen. Het nieuwe bestuur kiest vervolgens uit zijn midden een voorzitter, secretaris en penningmeester. Gezien Peter-Paul&#39;s vertrek zal het voorzitterschap dus vrijkomen.&lt;/p&gt;
  12505. &lt;p&gt;Het huidige bestuur meent dat het het meest slagvaardig is met vijf of zes bestuurders. Met meer leden kan het bestuur te log worden. Dit is echter het inzicht van het huidige bestuur en vormt geen beletsel voor leden om zich kandidaat te stellen. Uiteindelijk bepaalt de ALV of er meer dan drie nieuwe bestuurders worden gekozen.&lt;/p&gt;
  12506. &lt;p&gt;Zoals gezegd, de officiële aankondigingen van kandidaturen en de ALV volgen later.&lt;/p&gt;
  12507. </content>
  12508.  </entry>
  12509.  <entry>
  12510.    <title>Met 100 euro korting naar BubbleConf</title>
  12511.    <link href="https://www.fronteers.nl/nl/blog/2012/09/korting-bubbleconf"/>
  12512.    <updated>2012-09-22T00:00:00Z</updated>
  12513.    <id>https://www.fronteers.nl/nl/blog/2012/09/korting-bubbleconf</id>
  12514.    <content xml:lang="nl" type="html">&lt;p&gt;Op 12 oktober 2012 vindt in Tuschinski &lt;a href=&quot;http://www.bubbleconf.com/&quot;&gt;BubbleConf 2012&lt;/a&gt; plaats. Op het programma staan sprekers als Facebook’s Philip Su, ontwikkelaar Zed Shaw en ontwerper Juanma Teixido. Leden van Fronteers krijgen 100 euro korting op dit congres.&lt;/p&gt;
  12515. &lt;p&gt;Sprekers en bezoekers uit de wereld van tech, design, UX en business komen bij elkaar voor een dag vol mogelijkheden om je te laten verrassen, nieuwe mensen te ontmoeten, zinvolle zaken te leren die je helpen succesvol te zijn met je start-up of onderneming en ongewone verhalen te horen van topspelers uit jouw veld.&lt;/p&gt;
  12516. &lt;p&gt;Om gebruik te maken van de korting, kun je contact opnemen met de &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;ledenadministratie&lt;/a&gt;. De korting geldt, zoals gebruikelijk, alleen voor leden die bij aankondiging van deze actie al lid waren.&lt;/p&gt;
  12517. </content>
  12518.  </entry>
  12519.  <entry>
  12520.    <title>Jurgen Vansteelant</title>
  12521.    <link href="https://www.fronteers.nl/nl/blog/2012/09/jurgen-vansteelant"/>
  12522.    <updated>2012-09-17T00:00:00Z</updated>
  12523.    <id>https://www.fronteers.nl/nl/blog/2012/09/jurgen-vansteelant</id>
  12524.    <content xml:lang="nl" type="html">&lt;p&gt;Deze week bereikte ons het treurige nieuws dat Jurgen Vansteelant op zaterdag 8 september is overleden als gevolg van een &lt;a href=&quot;http://www.nieuwsblad.be/article/detail.aspx?articleid=DMF20120909_00289343&quot;&gt;verkeersongeluk&lt;/a&gt;.&lt;/p&gt;
  12525. &lt;p&gt;Jurgen was docent aan de opleiding Devine — Digital Design and Media aan de Hogeschool West-Vlaanderen en vanuit die functie sinds het voorjaar van 2011 ook lid van de onderwijscommissie van Fronteers.&lt;/p&gt;
  12526. &lt;p&gt;Fronteers wenst de ouders, familie en vrienden van Jurgen heel veel sterkte met dit grote verlies.&lt;/p&gt;
  12527. </content>
  12528.  </entry>
  12529.  <entry>
  12530.    <title>Fronteers 2012: de laatste sprekers</title>
  12531.    <link href="https://www.fronteers.nl/nl/blog/2012/09/de-laatste-sprekers"/>
  12532.    <updated>2012-09-14T00:00:00Z</updated>
  12533.    <id>https://www.fronteers.nl/nl/blog/2012/09/de-laatste-sprekers</id>
  12534.    <content xml:lang="nl" type="html">&lt;p&gt;Met nog zo&#39;n drie weken te gaan kunnen we vandaag de laatste sprekers voor Fronteers 2012 aankondigen: Peter-Paul Koch, Stephen Hay, Jeroen Wijering en Alex Russell.&lt;/p&gt;
  12535. &lt;p&gt;&lt;em&gt;&lt;a href=&quot;http://quirksmode.org/about/&quot;&gt;Peter-Paul Koch&lt;/a&gt;&lt;/em&gt; heeft als de man achter Quirksmode.org en oprichter van Fronteers eigenlijk geen introductie meer nodig. Zijn compatibiliteitstabellen hebben al heel wat ontwikkelaars geholpen bij het doorgronden van browser quirks. De afgelopen jaren heeft Peter-Paul zich verdiept in de (on)mogelijkheden van mobiele browsers.&lt;/p&gt;
  12536. &lt;p&gt;&lt;em&gt;&lt;a href=&quot;http://www.the-haystack.com/about/&quot;&gt;Stephen Hay&lt;/a&gt;&lt;/em&gt;, ook wel bekend als “Captain Flexbox”, heeft de afgelopen jaren het congres steeds weer verrast, met onder andere talks over geavanceerde CSS en responsive webdesign. Dit jaar zal dat niet anders zijn.&lt;/p&gt;
  12537. &lt;p&gt;&lt;em&gt;&lt;a href=&quot;http://www.whoisjw.tv/jeroen-wijering/&quot;&gt;Jeroen Wijering&lt;/a&gt;&lt;/em&gt; is de maker van de bekende &lt;a href=&quot;http://www.longtailvideo.com/players/&quot;&gt;JW Player&lt;/a&gt;. Zelfs YouTube heeft nog een tijd deze speler gebruikt. Jeroen heeft niet stilgezeten en is de speler blijven doorontwikkelen tot de uitgebreide speler die het nu is. Jeroen zal spreken over HTML5-video en ondertitels.&lt;/p&gt;
  12538. &lt;p&gt;&lt;em&gt;&lt;a href=&quot;http://infrequently.org/&quot;&gt;Alex Russell&lt;/a&gt;&lt;/em&gt; is een van de Chrome-ontwikkelaars en werkt mee aan de laatste JavaScript-specificatie. Alex spreekt dit jaar op Fronteers onder de titel “What the legacy web is keeping from us (and why it&#39;s not any more)”.&lt;/p&gt;
  12539. &lt;p&gt;Er zijn nog enkele kaartjes over voor de &lt;a href=&quot;https://www.fronteers.nl/congres/2012/workshops/visual-design-101-for-web-developers-mark-boulton&quot;&gt;workshop Visual Design 101 for Web Developers door Mark Boulton&lt;/a&gt;. De workshop richt zich specifiek op ontwikkelaars die meer willen leren over web design. Het is zelfs nog mogelijk om een combikaartje workshop plus Fronteers 2012 te kopen.&lt;/p&gt;
  12540. &lt;p&gt;Voor wie nog geen kaartje heeft is er nog een allerlaatste kans. Op 22 september om 12:00 CET verkopen we de tien laatste kaartjes. Hou &lt;a href=&quot;https://twitter.com/fronteersConf&quot;&gt;@fronteersConf&lt;/a&gt; goed in de gaten.&lt;/p&gt;
  12541. &lt;p&gt;De drukpersen draaien, de goodies zijn onderweg en de aanmeldingen van sprekers voor de &lt;a href=&quot;https://www.fronteers.nl/congres/2012/jam-session&quot;&gt;Jam Sessies&lt;/a&gt; stromen binnen. Ofwel: de laatste voorbereidingen voor Fronteers 2012 zijn in volle gang.&lt;/p&gt;
  12542. &lt;p&gt;Tot over drie weken!&lt;/p&gt;
  12543. </content>
  12544.  </entry>
  12545.  <entry>
  12546.    <title>Fronteers vrijwilligersuitje: technisch vernuft</title>
  12547.    <link href="https://www.fronteers.nl/nl/blog/2012/09/fronteers-vrijwilligersuitje-technisch-vernuft"/>
  12548.    <updated>2012-09-10T00:00:00Z</updated>
  12549.    <id>https://www.fronteers.nl/nl/blog/2012/09/fronteers-vrijwilligersuitje-technisch-vernuft</id>
  12550.    <content xml:lang="nl" type="html">&lt;p&gt;Met de zeilen gestreken glijdt de De Hoge Wier door het water. De draaibrug wijkt. Fietsers en voetgangers staan stil en aanschouwen onze éémastklipper terwijl ze de Groote Zeesluis binnenloopt.&lt;/p&gt;
  12551. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/img-3526.jpg&quot; alt=&quot;Klippers op het IJselmeer.&quot; /&gt;&lt;/p&gt;
  12552. &lt;p&gt;De haven van Muiden ligt achter ons. Voor ons lonkt de wijdsheid van het IJmeer. Aan lijnen wordt getrokken, katrollen doen hun werk, de zeilen worden gehesen en staan bol van de wind. We maken vaart. Dan gooit de schipper het roer om en haalt de grootschoot aan, de giek waait over en we zijn overstag gegaan.&lt;/p&gt;
  12553. &lt;p&gt;Aan boord praten de Fronteers al snel over semantiek, Node JS, Backbone JS, CSS preprocessors et cetera. We zijn hier met louter vakidioten, mensen die hun browser resizen om te kijken of een website wel responsive is; mensen die op F12 drukken, gewoon om te zien hoe iets werkt; ménsen die van het web houden.&lt;/p&gt;
  12554. &lt;p&gt;Achter me valt een zwaard in het water. Ik schrik op uit het gesprek en volg de lijn terug naar het katrol waar de schipper aan draaide. Hier zie ik letterlijk hoe de boot werkt. Alles is mechanisch. Meer nog dan op het web staan oorzaak en gevolg in direct verband.&lt;/p&gt;
  12555. &lt;p&gt;Voortgedreven door niets dan wind zijn werelden ontdekt. Daarbij vergeleken vallen de begrenzingen van browsers in het niets. Met technisch vernuft en vakmanschap is alles mogelijk. Laten we een voorbeeld nemen aan de Hollandse scheepsbouwers van weleer en de beperkingen van het web omzetten in elegante technische oplossingen.&lt;/p&gt;
  12556. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/blog/7916225236-af246f3c61-o.jpg&quot; alt=&quot;Fronteers op het dek van De Hoge Wier.&quot; /&gt;&lt;/p&gt;
  12557. &lt;h2&gt;Foto’s van het zeilen&lt;/h2&gt;
  12558. &lt;ul&gt;
  12559. &lt;li&gt;&lt;a href=&quot;https://plus.google.com/photos/102586242192310743325/albums/5783509127393716561&quot;&gt;Fotoalbum Edwin Martin&lt;/a&gt;&lt;/li&gt;
  12560. &lt;li&gt;&lt;a href=&quot;http://www.flickr.com/photos/arjaneising/sets/72157631373234466/&quot;&gt;Fotoalbum Arjan Eising&lt;/a&gt;&lt;/li&gt;
  12561. &lt;/ul&gt;
  12562. </content>
  12563.  </entry>
  12564.  <entry>
  12565.    <title>20% korting op ISOC masterclasses in Amsterdam</title>
  12566.    <link href="https://www.fronteers.nl/nl/blog/2012/09/korting-isoc-masterclasses"/>
  12567.    <updated>2012-09-07T00:00:00Z</updated>
  12568.    <id>https://www.fronteers.nl/nl/blog/2012/09/korting-isoc-masterclasses</id>
  12569.    <content xml:lang="nl" type="html">&lt;p&gt;De vereniging Internet Society Nederland (ISOC) heeft in samenwerking met onder andere de UvA, het CWI en het W3C een aantal &lt;a href=&quot;http://isoc.nl/activ/masterclasses.htm&quot;&gt;masterclasses&lt;/a&gt; georganiseerd met sprekers uit het internationale standaardisatieveld. Er komt een aantal voor front-end developers interessante onderwerpen aan bod, waaronder HTML5, CSS3 en mobile app testing.&lt;/p&gt;
  12570. &lt;p&gt;Op 13 September spreekt Bert Bos over CSS3, een dag later op 14 september gevolgd door Michael Smith die het over HTML5 gaat hebben. Op 27 september zal Fred Baker het hebben over Bufferbloat en Smart Grids, en op 10 oktober spreekt Julian Harty over mobile testing.&lt;/p&gt;
  12571. &lt;p&gt;Fronteers leden krijgen een korting van 20% op de toch al lage toegangsprijs van de masterclasses. Deze varieert van €100 tot €150. Toegangskaarten koop je net als voor het Fronteers congres bij &lt;a href=&quot;https://masterclasses_2012.paydro.net/&quot;&gt;Paydro&lt;/a&gt;.&lt;/p&gt;
  12572. &lt;p&gt;Wil je gebruik maken van de ledenkorting? Neem &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact op met de ledenadministratie&lt;/a&gt;.&lt;/p&gt;
  12573. </content>
  12574.  </entry>
  12575.  <entry>
  12576.    <title>Bijeenkomst op 1 november bij Netvlies</title>
  12577.    <link href="https://www.fronteers.nl/nl/blog/2012/09/bijeenkomst-november"/>
  12578.    <updated>2012-09-06T00:00:00Z</updated>
  12579.    <id>https://www.fronteers.nl/nl/blog/2012/09/bijeenkomst-november</id>
  12580.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 1 november is Fronteers te gast bij Netvlies Internetdiensten in Breda. Dit keer is het geen bijeenkomst met 2 presentaties, maar een Pecha Kucha met 10 presentaties door je mede-developers of jezelf.&lt;/p&gt;
  12581. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12582. &lt;ul&gt;
  12583. &lt;li&gt;18.30 Inloop&lt;/li&gt;
  12584. &lt;li&gt;19.30 Pecha Kucha 1 t/m 5&lt;/li&gt;
  12585. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  12586. &lt;li&gt;20.45 Pecha Kucha 6 t/m 10&lt;/li&gt;
  12587. &lt;li&gt;21.45 borrelen&lt;/li&gt;
  12588. &lt;/ul&gt;
  12589. &lt;h2&gt;Pecha Kucha&lt;/h2&gt;
  12590. &lt;p&gt;Pecha Kucha is een presentatiestijl waarbij 20 slides worden getoond die elk 20 seconden in beeld zijn. Hierdoor krijg je snelle en beknopte presentaties.
  12591. Door de korte tijd van 6 minuut 40 is het ook voor mensen die geen uur willen of kunnen volpraten, een stuk aantrekkelijker om een presentatie te geven.&lt;/p&gt;
  12592. &lt;p&gt;Van degene die een titel voor een presentatie hebben ingediend sturen we rond 1 oktober een e-mail. Er worden er 10 uitgekozen op basis van onderwerp, zodat we niet 5 presentaties krijgen over hetzelfde.
  12593. Inschrijven voor een presentatie kan via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/netvlies&quot;&gt;formulier op de bijeenkomst-pagina&lt;/a&gt;.&lt;/p&gt;
  12594. &lt;p&gt;Daarom nodigen we je van harte uit om zelf een presentatie in te dienen. Het onderwerp is vrij, maar front-end development-gerelateerd wordt wel aangemoedigd.&lt;/p&gt;
  12595. &lt;h2&gt;Waar?&lt;/h2&gt;
  12596. &lt;p&gt;Dit evenement vindt plaats bij Netvlies in Breda. Het adres is Prinsenkade 7, Breda (routebeschrijving). Zoals gebruikelijk is deze bijeenkomst gratis bij te wonen door zowel leden als niet-leden. Momenteel kan je je nog niet aanmelden voor de bijeenkomst, maar wel om een presentatie te geven. Dit doe je via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/netvlies&quot;&gt;formulier op de bijeenkomstpagina&lt;/a&gt; Er is slechts ruimte voor 30 personen, inclusief sprekers.&lt;/p&gt;
  12597. </content>
  12598.  </entry>
  12599.  <entry>
  12600.    <title>Fronteers 2012: nog zes namen</title>
  12601.    <link href="https://www.fronteers.nl/nl/blog/2012/09/fronteers-2012-nog-zes-namen"/>
  12602.    <updated>2012-09-03T00:00:00Z</updated>
  12603.    <id>https://www.fronteers.nl/nl/blog/2012/09/fronteers-2012-nog-zes-namen</id>
  12604.    <content xml:lang="nl" type="html">&lt;p&gt;Met trots kunnen we vandaag nog een paar namen aankondigen: Mark Boulton, Peter Nederlof en Alex Graul komen een presentatie geven. Naast deze sprekers komt er ook een accessibility-panel met Bram Duvigneau, Bor Verkroost en Antoine Hegeman.&lt;/p&gt;
  12605. &lt;p&gt;Op de &lt;a href=&quot;https://www.fronteers.nl/congres/2012/speakers&quot;&gt;lijst met sprekers&lt;/a&gt; die tot nu toe zijn aangekondigd had je ze al kunnen zien staan: Addy Osmani, Anne van Kesteren, David DeSandro, Marcin Wichary, Mathias Bynens, Lea Verou, Phil Hawksworth en Rebecca Murphey.&lt;/p&gt;
  12606. &lt;p&gt;Hier voegen we dus de volgende zes namen aan toe:&lt;/p&gt;
  12607. &lt;p&gt;&lt;em&gt;&lt;a href=&quot;http://www.markboulton.co.uk/&quot;&gt;Mark Boulton&lt;/a&gt;&lt;/em&gt; runt een kleine ontwerpstudio en heeft veel ervaring met veeleisende websites. Hij houdt zich bezig op het snijvlak van front-end en vormgeving. Hoe kun je vormgeving makkelijk toepasbaar maken voor ontwikkelaars? Mark geeft op de woensdag voor het congres ook een &lt;a href=&quot;https://www.fronteers.nl/congres/2012/workshops/visual-design-101-for-web-developers-mark-boulton&quot;&gt;workshop&lt;/a&gt;.&lt;/p&gt;
  12608. &lt;p&gt;&lt;em&gt;&lt;a href=&quot;http://peterned.home.xs4all.nl/&quot;&gt;Peter Nederlof&lt;/a&gt;&lt;/em&gt; is een front-end ontwikkelaar pur sang, die &lt;em&gt;iedereen&lt;/em&gt; wel kent van &lt;code&gt;[csshover](http://peterned.home.xs4all.nl/csshover.html)&lt;/code&gt;. Hij is altijd in de weer met de laatste technieken, of het nu gaat om een 3D-engine in canvas of een CSS matrix-generator. Eindelijk hebben we hem zover gekregen om ook het podium in Tuschinski te betreden.&lt;/p&gt;
  12609. &lt;p&gt;&lt;em&gt;&lt;a href=&quot;http://www.sho.ch/&quot;&gt;Alex Graul&lt;/a&gt;&lt;/em&gt; is gespecialiseerd in gegevensvisualisatie. Hoe breng je gegevens over zonder dat het saai wordt? Alex is ook mede-ontwikkelaar van &lt;a href=&quot;http://misoproject.com/&quot;&gt;Miso&lt;/a&gt;, een open source toolkit om gemakkelijk interactieve verhalen en gegevensvisualisaties te maken.&lt;/p&gt;
  12610. &lt;p&gt;Tijdens het accessibility-panel gaan &lt;em&gt;&lt;a href=&quot;https://twitter.com/bramduvigneau&quot;&gt;Bram Duvigneau&lt;/a&gt;&lt;/em&gt;, &lt;em&gt;&lt;a href=&quot;http://www.eborfoundation.com/&quot;&gt;Bor Verkroost&lt;/a&gt;&lt;/em&gt; en &lt;em&gt;Antoine Hegeman&lt;/em&gt;, ervaringsdeskundigen op het gebied van de (on)toegankelijkheid van het web, ons aan de hand van praktijkvoorbeelden een beeld schetsen van de valkuilen die zij op het web tegenkomen. Dit jaar dus geen presentatie over hoe het &lt;em&gt;zou moeten&lt;/em&gt; in theorie, maar hoe het op dit moment &lt;em&gt;is&lt;/em&gt; in de praktijk. De moderator is Chris Heilmann.&lt;/p&gt;
  12611. &lt;p&gt;De kaartverkoop voor Fronteers 2012 is inmiddels gesloten, maar er zijn nog enkele kaartjes achtergehouden. Op 22 september om 12:00 CET verkopen we de 10 allerlaatste kaartjes. Wees er dus snel bij.&lt;/p&gt;
  12612. &lt;p&gt;En of je nu naar het congres komt of niet, er zijn in ieder geval nog wel kaarten voor de workshop &lt;em&gt;Visual Design 101 for Web Developers&lt;/em&gt; door Mark Boulton. Alle grondbeginselen van een goed ontwerp komen aan bod. &lt;a href=&quot;https://www.fronteers.nl/congres/2012/workshops/visual-design-101-for-web-developers-mark-boulton&quot;&gt;Meer informatie en kaartverkoop&lt;/a&gt;. Via deze weg kun je nu ook nog toegang krijgen tot het congres zelf.&lt;/p&gt;
  12613. &lt;p&gt;We hebben nog een maand en een hoop voorbereidingen te gaan, maar we hebben er weer zin in!&lt;/p&gt;
  12614. </content>
  12615.  </entry>
  12616.  <entry>
  12617.    <title>Bijeenkomst op 20 september bij Future in IT</title>
  12618.    <link href="https://www.fronteers.nl/nl/blog/2012/08/bijeenkomst-september"/>
  12619.    <updated>2012-08-21T00:00:00Z</updated>
  12620.    <id>https://www.fronteers.nl/nl/blog/2012/08/bijeenkomst-september</id>
  12621.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 20 september is Fronteers te gast bij &lt;a href=&quot;https://web.archive.org/web/20170518015223/http://futureinit.nl/&quot;&gt;Future in IT&lt;/a&gt; in Amsterdam. Arjan Eising geeft een presentatie over CoffeeScript, en Bran van der Meer gaat grids in design nader bekijken.&lt;/p&gt;
  12622. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12623. &lt;ul&gt;
  12624. &lt;li&gt;18.30 inloop&lt;/li&gt;
  12625. &lt;li&gt;19.30 Arjan Eising over CoffeeScript&lt;/li&gt;
  12626. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  12627. &lt;li&gt;20.45 Bran van der Meer over Grids&lt;/li&gt;
  12628. &lt;li&gt;21.45 borrelen&lt;/li&gt;
  12629. &lt;/ul&gt;
  12630. &lt;h2&gt;CoffeeScript door Arjan Eising&lt;/h2&gt;
  12631. &lt;p&gt;Met de komst van Sass en Less zijn verscheidene front-enders overgestapt op een manier om sneller CSS te schrijven. Met CoffeeScript kan dat ook voor JavaScript. In deze presentatie worden &amp;quot;the good and the bad parts&amp;quot; toegelicht, zodat je na afloop zelf kunt beslissen of je overstapt op code met minder accolades, haakjes en keywords.&lt;/p&gt;
  12632. &lt;h2&gt;Grids door Bran van der Meer&lt;/h2&gt;
  12633. &lt;p&gt;Nu webdesign steeds verder volwassen wordt, komt de vraag om een grid ook in de browser te realiseren steeds vaker aan de frontender. Bran gaat de designargumenten voor de verschillende soorten grids toelichten, en vertellen hoe je er als frontender het beste mee kan omgaan, zonder je designer teleur te stellen.&lt;/p&gt;
  12634. &lt;h2&gt;Waar?&lt;/h2&gt;
  12635. &lt;p&gt;Future in IT heeft een zaal gehuurd bij &lt;a href=&quot;http://www.rokinview.nl/&quot;&gt;Rokin View&lt;/a&gt;: Rokin 38-E, 1012 KT Amsterdam. Zoals gebruikelijk is deze bijeenkomst gratis bij te wonen door zowel leden als niet-leden. Wel is gewenst dat je via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/future-in-it&quot;&gt;formulier op de bijeenkomst-pagina&lt;/a&gt; doorgeeft dat je aanwezig kunt zijn. &lt;em&gt;Er is ruimte voor slechts 30 personen.&lt;/em&gt;&lt;/p&gt;
  12636. </content>
  12637.  </entry>
  12638.  <entry>
  12639.    <title>Met 25 euro korting naar Inspire Conference in Leiden</title>
  12640.    <link href="https://www.fronteers.nl/nl/blog/2012/08/met-korting-naar-inspire"/>
  12641.    <updated>2012-08-01T00:00:00Z</updated>
  12642.    <id>https://www.fronteers.nl/nl/blog/2012/08/met-korting-naar-inspire</id>
  12643.    <content xml:lang="nl" type="html">&lt;p&gt;In de tweede week van december wordt in Leiden een nieuw webdesigncongres georganiseerd, met een focus op ontwerp, typografie en code: &lt;a href=&quot;http://inspireconf.com/&quot;&gt;“Ready to Inspire”&lt;/a&gt;. Het heeft als thema &#39;vakmanschap&#39; en onder meer Jeffrey Zeldman, Simon Collison en Brad Frost komen spreken. Leden van Fronteers krijgen 25 euro korting op de entreeprijs, inclusief toegang tot de New Faces-track, een dag voor het congres.&lt;/p&gt;
  12644. &lt;p&gt;Wil je gebruik maken van de ledenkorting? Neem &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact op met de ledenadministratie&lt;/a&gt;. De korting geldt, zoals gebruikelijk, alleen voor leden die bij aankondiging van deze actie al lid waren en is niet toepasbaar op de nog aan te kondigen workshops.&lt;/p&gt;
  12645. </content>
  12646.  </entry>
  12647.  <entry>
  12648.    <title>Bijeenkomst bij WHITE op 30 augustus 2012</title>
  12649.    <link href="https://www.fronteers.nl/nl/blog/2012/07/bijeenkomst-white"/>
  12650.    <updated>2012-07-30T00:00:00Z</updated>
  12651.    <id>https://www.fronteers.nl/nl/blog/2012/07/bijeenkomst-white</id>
  12652.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 30 augustus 2012 is Fronteers te gast bij WHITE in Valkenswaard. Er zijn twee presentaties voorzien.&lt;/p&gt;
  12653. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12654. &lt;ul&gt;
  12655. &lt;li&gt;18.30 inloop&lt;/li&gt;
  12656. &lt;li&gt;19.30 Stijn Janssen over Front-end style guides&lt;/li&gt;
  12657. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  12658. &lt;li&gt;20.45 Ludo Beumer en Jeroen Smits over Facebook versus corporate website&lt;/li&gt;
  12659. &lt;li&gt;21.45 borrelen&lt;/li&gt;
  12660. &lt;/ul&gt;
  12661. &lt;h2&gt;Stijn Janssen over Front-end style guides&lt;/h2&gt;
  12662. &lt;p&gt;Zoals ontwerpers gebruik maken van een huiststijl tijdens het ontwerpen en back-end ontwikkelaars gebruik maken coding standards voor hun code kunnen front-end ontwikkelaars gebruik maken van een style guide. De front-end style guide. Maar wat kan je hier in terugvinden? En hoe kan je het gebruiken binnen een bedrijf?&lt;/p&gt;
  12663. &lt;h2&gt;Ludo Beumer en Jeroen Smits over Facebook versus corporate website&lt;/h2&gt;
  12664. &lt;p&gt;Coca Cola heeft 44 miljoen fans op Facebook versus 270 duizend bezoekers per maand op hun website… Gaat de corporate website plaats maken voor de Facebook pagina? Feit is dat Facebook niet meer weg te denken is in de communicatie mix van bedrijven. Wat zijn de “do’s and dont’s” op Facebook? Hoe ver kun je gaan? Ludo en Jeroen bespreken enkele geslaagde en minder geslaagde cases.&lt;/p&gt;
  12665. &lt;h2&gt;Waar?&lt;/h2&gt;
  12666. &lt;p&gt;Deze bijeenkomst vindt plaats bij WHITE in Valkenswaard. Parallelweg Oost 23. 5555 XA Valkenswaard. Zoals gebruikelijk is de bijeenkomst gratis bij te wonen door zowel leden als niet-leden. Wel is gewenst dat je doorgeeft dat je komt via &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/white&quot;&gt;het formulier op de bijeenkomstpagina&lt;/a&gt;.&lt;/p&gt;
  12667. </content>
  12668.  </entry>
  12669.  <entry>
  12670.    <title>Twee workshops op de woensdag voor het congres</title>
  12671.    <link href="https://www.fronteers.nl/nl/blog/2012/07/fronteers-2012-twee-workshops-op-woensdag"/>
  12672.    <updated>2012-07-22T00:00:00Z</updated>
  12673.    <id>https://www.fronteers.nl/nl/blog/2012/07/fronteers-2012-twee-workshops-op-woensdag</id>
  12674.    <content xml:lang="nl" type="html">&lt;p&gt;Ook dit jaar organiseert Fronteers weer twee intensieve workshops van hoog niveau, waarmee je een hele dag zoet bent. Dit jaar vinden beide workshops echter op dezelfde dag plaats, namelijk op woensdag 3 oktober.&lt;/p&gt;
  12675. &lt;h2&gt;Design en JavaScript&lt;/h2&gt;
  12676. &lt;p&gt;Mark Boulton zal een workshop Visual Design 101 voor Web Developers geven en Addy Osmani gaat het over JavaScript Application Development hebben.
  12677. Meer informatie zal spoedig te vinden zijn op de &lt;a href=&quot;https://www.fronteers.nl/congres/2012/workshops&quot;&gt;workshopspagina&lt;/a&gt;.&lt;/p&gt;
  12678. &lt;p&gt;Beide workshops duren een hele dag, ze worden gegeven in Amsterdam en de voertaal zal Engels zijn. Om er voor te zorgen dat de workshops persoonlijk blijven is er voor gekozen om maximaal 25 mensen toe te laten, &lt;a href=&quot;https://fronteers.paydro.net/&quot;&gt;wees er dus snel bij&lt;/a&gt;! Uiteraard is er een aangename korting voor Fronteersleden die voor 5 april 2012 reeds lid waren (je kortings code heb je dan rond die tijd ontvangen via e-mail).&lt;/p&gt;
  12679. </content>
  12680.  </entry>
  12681.  <entry>
  12682.    <title>Fronteers Borrel in Groningen op 20 juli</title>
  12683.    <link href="https://www.fronteers.nl/nl/blog/2012/07/fronteersborrel-groningen"/>
  12684.    <updated>2012-07-09T00:00:00Z</updated>
  12685.    <id>https://www.fronteers.nl/nl/blog/2012/07/fronteersborrel-groningen</id>
  12686.    <content xml:lang="nl" type="html">&lt;p&gt;Om ook de leden in het noorden van het land tegemoet te komen, houden we vrijdag 20 juli een informele borrel in Groningen. Vanaf 17:00 ben je welkom in Cafe Buckshot aan het Gedempte Zuiderdiep 58.&lt;/p&gt;
  12687. &lt;p&gt;Het eerste rondje is van Fronteers. Laat hieronder even een berichtje achter als je ook komt!&lt;/p&gt;
  12688. </content>
  12689.  </entry>
  12690.  <entry>
  12691.    <title>Bijeenkomst op 19 juli bij Wijs</title>
  12692.    <link href="https://www.fronteers.nl/nl/blog/2012/06/bijeenkomst-wijs"/>
  12693.    <updated>2012-06-25T00:00:00Z</updated>
  12694.    <id>https://www.fronteers.nl/nl/blog/2012/06/bijeenkomst-wijs</id>
  12695.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 19 juli 2012 is Fronteers te gast bij &lt;a href=&quot;http://wijs.be/&quot;&gt;Wijs&lt;/a&gt; in Gent. Er worden twee presentaties voorzien. Eerst komt &lt;a href=&quot;http://twitter.com/xavez&quot;&gt;Xavier Bertels&lt;/a&gt; praten over ritme en ratio’s in layout en typografie voor het web; vervolgens zal &lt;a href=&quot;http://twitter.com/ddfreyne&quot;&gt;Denis Defreyne&lt;/a&gt; wat vertellen over static site generators zoals &lt;a href=&quot;http://nanoc.stoneship.org/&quot;&gt;nanoc&lt;/a&gt;.&lt;/p&gt;
  12696. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12697. &lt;ul&gt;
  12698. &lt;li&gt;18:45 ontvangst met een hapje en een drankje&lt;/li&gt;
  12699. &lt;li&gt;19:00 Xavier Bertels: &lt;em&gt;Ritme en verhouding: think more, do less&lt;/em&gt;&lt;/li&gt;
  12700. &lt;li&gt;20:00 Denis Defreyne over &lt;em&gt;static site generators&lt;/em&gt;&lt;/li&gt;
  12701. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  12702. &lt;/ul&gt;
  12703. &lt;h2&gt;Waar?&lt;/h2&gt;
  12704. &lt;p&gt;Dit evenement vindt plaats bij &lt;a href=&quot;http://wijs.be/&quot;&gt;Wijs&lt;/a&gt; te Gent. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/wijs&quot;&gt;Er is een plannetje beschikbaar op de detailpagina van deze bijeenkomst.&lt;/a&gt;&lt;/p&gt;
  12705. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  12706. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 40 mannen en vrouwen.&lt;/p&gt;
  12707. </content>
  12708.  </entry>
  12709.  <entry>
  12710.    <title>Fronteers 2012: de volgende vier sprekers</title>
  12711.    <link href="https://www.fronteers.nl/nl/blog/2012/06/fronteers-2012-volgende-sprekers"/>
  12712.    <updated>2012-06-14T00:00:00Z</updated>
  12713.    <id>https://www.fronteers.nl/nl/blog/2012/06/fronteers-2012-volgende-sprekers</id>
  12714.    <content xml:lang="nl" type="html">&lt;p&gt;Nooit eerder verkochten we onze kaarten zo snel. En met nog een kleine 4 maanden voor de boeg, hopen we er dit jaar eerder doorheen te zijn dan ooit tevoren. Mocht je nog twijfelen, wacht dan niet te lang, want we willen je niet teleurstellen. Vandaag kunnen we weer vier sprekers onthullen waar we erg trots op zijn.&lt;/p&gt;
  12715. &lt;p&gt;Hollands trots &lt;em&gt;&lt;a href=&quot;http://annevankesteren.nl/&quot;&gt;Anne van Kesteren&lt;/a&gt;&lt;/em&gt; werkt voor Opera Software en houdt zich bezig met standaardisatie. Daarnaast zet hij zich in voor meer openheid én meer privacy, maar wel in de juiste verhoudingen.&lt;/p&gt;
  12716. &lt;p&gt;De tweede is front-end developer &lt;em&gt;&lt;a href=&quot;http://desandro.com/&quot;&gt;David DeSandro&lt;/a&gt;&lt;/em&gt;. Hij heeft een passie voor het vinden van nieuwe, creatieve oplossingen. Resultaten hiervan zijn de grafische en technische meesterwerkjes &lt;a href=&quot;http://masonry.desandro.com/&quot;&gt;Masonry&lt;/a&gt; en &lt;a href=&quot;http://isotope.metafizzy.co/&quot;&gt;Isotope&lt;/a&gt;. Na drie jaar nclud begint hij binnenkort voor Twitter. Spannend!&lt;/p&gt;
  12717. &lt;p&gt;Wat betreft Twitter followers kan David wel een beetje jaloers zijn op &lt;em&gt;&lt;a href=&quot;http://addyosmani.com/&quot;&gt;Addy Osmani&lt;/a&gt;&lt;/em&gt;. Van de 4 sprekers die we vandaag bekendmaken heeft hij er de meeste, ruim 24.000. Hij werkt voor Google als Developer Programs Engineer, is lid van het jQuery team en draagt bij aan Modernizr. Hij typt graag JavaScript, maar heeft ook plezier in schrijven over hoe we het web beter kunnen maken.&lt;/p&gt;
  12718. &lt;p&gt;&lt;em&gt;&lt;a href=&quot;http://hawksworx.com/&quot;&gt;Phil Hawksworth&lt;/a&gt;&lt;/em&gt; werkt als technical director voor R/GA in Londen. Hij focust zich op de technische architectuur, maar waagt zich in de avonduurtjes aan het zelf tikken van code in de vorm van kleine experimentele projectjes. We hopen dat hij in ruil voor een kop koffie van onze barista’s zijn slechte dance moves wil laten zien.&lt;/p&gt;
  12719. &lt;p&gt;De helft van al onze sprekers van dit jaar zijn &lt;a href=&quot;https://www.fronteers.nl/congres/2012/speakers&quot;&gt;nu bekend&lt;/a&gt;. Zoals gezegd; wacht niet te lang met &lt;a href=&quot;https://www.fronteers.nl/congres/2012/tickets&quot;&gt;het aanschaffen van je kaartje&lt;/a&gt;!&lt;/p&gt;
  12720. </content>
  12721.  </entry>
  12722.  <entry>
  12723.    <title>Fronteers juniborrel op 29 juni</title>
  12724.    <link href="https://www.fronteers.nl/nl/blog/2012/06/juniborrel"/>
  12725.    <updated>2012-06-11T00:00:00Z</updated>
  12726.    <id>https://www.fronteers.nl/nl/blog/2012/06/juniborrel</id>
  12727.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 29 juni, over twee weken, houden we weer een informele borrel. Vanaf 17 uur kun je terecht bij de Bierfabriek in Amsterdam, Rokin 75. Het eerste rondje is van Fronteers.&lt;/p&gt;
  12728. &lt;p&gt;Kom je ook even langs? Laat het hieronder weten!&lt;/p&gt;
  12729. </content>
  12730.  </entry>
  12731.  <entry>
  12732.    <title>50% korting op PhoneGap Day EU in Amsterdam</title>
  12733.    <link href="https://www.fronteers.nl/nl/blog/2012/06/korting-phonegap-day-amsterdam"/>
  12734.    <updated>2012-06-08T00:00:00Z</updated>
  12735.    <id>https://www.fronteers.nl/nl/blog/2012/06/korting-phonegap-day-amsterdam</id>
  12736.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 14 september vindt PhoneGap Day EU plaats in Amsterdam. Kaartjes kosten tijdens de early bird € 100, daarna € 150. Voor 10 leden van Fronteers hebben we een korting geregeld, waardoor je voor € 75 naar binnen kunt.&lt;/p&gt;
  12737. &lt;p&gt;Er is nog niet veel bekend over het programma, maar het wordt vergelijkbaar met de VS variant. Op donderdag 13 september zullen ook workshops plaatsvinden, voor beginners en ervaren gebruikers.&lt;/p&gt;
  12738. &lt;p&gt;Wil je gebruik maken van deze korting, neem dan even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact&lt;/a&gt; op met de ledenadministratie. Zoals gebruikelijk geldt de korting uitsluitend voor diegenen die op dit moment lid zijn.&lt;/p&gt;
  12739. </content>
  12740.  </entry>
  12741.  <entry>
  12742.    <title>Bijeenkomst op 21 juni bij Digiti</title>
  12743.    <link href="https://www.fronteers.nl/nl/blog/2012/06/bijeenkomst-digiti"/>
  12744.    <updated>2012-06-03T00:00:00Z</updated>
  12745.    <id>https://www.fronteers.nl/nl/blog/2012/06/bijeenkomst-digiti</id>
  12746.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 21 juni 2012 is Fronteers te gast bij &lt;a href=&quot;http://digiti.be/&quot;&gt;Digiti&lt;/a&gt; in Zoersel. Er worden twee presentaties voorzien.&lt;/p&gt;
  12747. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12748. &lt;ul&gt;
  12749. &lt;li&gt;18:00 ontvangst met broodjes en een drankje&lt;/li&gt;
  12750. &lt;li&gt;19:00 Kristof Houben over &lt;em&gt;pre-processing voor front-end developers&lt;/em&gt;&lt;/li&gt;
  12751. &lt;li&gt;20:00 Stelian Firez over &lt;em&gt;website-optimalisatietechnieken&lt;/em&gt;&lt;/li&gt;
  12752. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  12753. &lt;/ul&gt;
  12754. &lt;h2&gt;Waar?&lt;/h2&gt;
  12755. &lt;p&gt;Dit evenement vindt plaats bij &lt;a href=&quot;http://digiti.be/&quot;&gt;Digiti&lt;/a&gt; te Zoersel. Er is een plannetje beschikbaar op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/digiti&quot;&gt;de detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  12756. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  12757. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen.&lt;/p&gt;
  12758. </content>
  12759.  </entry>
  12760.  <entry>
  12761.    <title>30% korting op The Treasure of FrontEnd Island in Bologna</title>
  12762.    <link href="https://www.fronteers.nl/nl/blog/2012/05/korting-treasure-of-frontend-island-bologna"/>
  12763.    <updated>2012-05-31T00:00:00Z</updated>
  12764.    <id>https://www.fronteers.nl/nl/blog/2012/05/korting-treasure-of-frontend-island-bologna</id>
  12765.    <content xml:lang="nl" type="html">&lt;p&gt;We hebben weer een korting voor leden kunnen bedingen. Deze keer voor &lt;a href=&quot;http://2012.fromthefront.it/&quot;&gt;From the Front 2012: The Treasure of FrontEnd Island&lt;/a&gt; in Bologna, Italië, op vrijdag 21 september 2012.&lt;/p&gt;
  12766. &lt;p&gt;Aral Balkan, Blaine Cook, Denys Mishunov, Denise Jacobs, Linda Sandvik, Jake Archibald, Jonathan Snook, Peter-Paul Koch en Remy Sharp zullen spreken op dit eendaagse congres, wat makkelijk te combineren is met een weekendje zon.&lt;/p&gt;
  12767. &lt;p&gt;Naar &lt;a href=&quot;https://www.fronteers.nl/blog/2012/01/korting-op-front-trends-in-warschau&quot;&gt;Front Trends in Warschau&lt;/a&gt; gingen een stuk of 10 leden, waarvan een paar tegelijk met de (nacht)trein. Wellicht dat we deze keer ook een groepsreis kunnen opzetten, via &lt;a href=&quot;http://forum.fronteers.nl/post/410/&quot;&gt;ons forum&lt;/a&gt;?&lt;/p&gt;
  12768. &lt;p&gt;Wil je gebruik maken van deze korting, neem dan even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact&lt;/a&gt; op met de ledenadministratie. Zoals gebruikelijk geldt de korting uitsluitend voor diegenen die op dit moment lid zijn.&lt;/p&gt;
  12769. </content>
  12770.  </entry>
  12771.  <entry>
  12772.    <title>Bijeenkomst op 21 mei bij KaHo St-Lieven</title>
  12773.    <link href="https://www.fronteers.nl/nl/blog/2012/05/bijeenkomst-kahosl"/>
  12774.    <updated>2012-05-04T00:00:00Z</updated>
  12775.    <id>https://www.fronteers.nl/nl/blog/2012/05/bijeenkomst-kahosl</id>
  12776.    <content xml:lang="nl" type="html">&lt;p&gt;Op maandag 21 mei 2012 is Fronteers te gast bij de opleiding &lt;a href=&quot;http://www.ikdoeict.be/nl/&quot;&gt;Professionele Bachelor ICT&lt;/a&gt; (KaHo St-Lieven) te Gent. Er worden twee presentaties voorzien. Bram(us) Van Damme zal het hebben over RESTful APIs (met zijdelings Ajax, jQuery, JSON/JSONP, CORS en URL design). De heren van Pixel Lab, die samen met Zeptolab &lt;a href=&quot;https://web.archive.org/web/20131127223442/http://www.cuttherope.ie/dev/&quot;&gt;de HTML5-versie van Cut The Rope&lt;/a&gt; hebben gebouwd, hebben ook vast iets interessants te vertellen — in het Engels, weliswaar.&lt;/p&gt;
  12777. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12778. &lt;ul&gt;
  12779. &lt;li&gt;18:00 ontvangst met een drankje, gesponsord door Fronteers&lt;/li&gt;
  12780. &lt;li&gt;19:00 Pixel Lab over &lt;em&gt;Recreating “Cut the Rope” in HTML5&lt;/em&gt;&lt;/li&gt;
  12781. &lt;li&gt;20:00 Bramus Van Damme over &lt;em&gt;RESTful APIs&lt;/em&gt;&lt;/li&gt;
  12782. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  12783. &lt;/ul&gt;
  12784. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  12785. &lt;p&gt;Dit evenement vindt plaats in het J-blok van de Technologiecampus van KaHo St-Lieven te Gent. De campus heeft als adres Gebroeders De Smetstraat 1, maar het juiste lokaal bevindt zich eerder ter hoogte van de Guldenvliesstraat 14 te Gent. Er is een plannetje beschikbaar op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/kahosl&quot;&gt;de detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  12786. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  12787. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 70 mannen en vrouwen.&lt;/p&gt;
  12788. </content>
  12789.  </entry>
  12790.  <entry>
  12791.    <title>Bijeenkomst op 14 juni met internationale sprekers bij LBi Netherlands</title>
  12792.    <link href="https://www.fronteers.nl/nl/blog/2012/04/bijeenkomst-internationale-sprekers-lbi"/>
  12793.    <updated>2012-04-18T00:00:00Z</updated>
  12794.    <id>https://www.fronteers.nl/nl/blog/2012/04/bijeenkomst-internationale-sprekers-lbi</id>
  12795.    <content xml:lang="nl" type="html">&lt;p&gt;Fronteers bestaat 5 jaar. Ter ere van dit eerste lustrumjaar, organiseren we een grote bijeenkomst met twee internationale sprekers. Deze bijeenkomst wordt gehouden op 14 juni 2012 vanaf 15:00 uur bij &lt;a href=&quot;http://www.lbi.nl/&quot;&gt;LBi Netherlands&lt;/a&gt; in Amsterdam. De bijeenkomst is voor iedereen, dus ook niet leden, en is gratis!&lt;/p&gt;
  12796. &lt;p&gt;De middag start met een presentatie door Bruce Lawson. Om 17:00 uur zal er een hapje gegeten worden en &#39;s avonds zal Rachel Andrew een inspirerende presentatie geven. Daarna is er tijd voor een borrel.&lt;/p&gt;
  12797. &lt;h2&gt;Programma&lt;/h2&gt;
  12798. &lt;ul&gt;
  12799. &lt;li&gt;15:00 Inloop&lt;/li&gt;
  12800. &lt;li&gt;15:30 Welkomswoordje&lt;/li&gt;
  12801. &lt;li&gt;15:35 Presentatie Bruce Lawson&lt;/li&gt;
  12802. &lt;li&gt;17:00 Dinner&lt;/li&gt;
  12803. &lt;li&gt;18:00 Presentatie Rachel Andrew&lt;/li&gt;
  12804. &lt;li&gt;19:30 Borrelen&lt;/li&gt;
  12805. &lt;/ul&gt;
  12806. &lt;h2&gt;Bruce Lawson&lt;/h2&gt;
  12807. &lt;p&gt;Bruce Lawson evangelises Open Web Standards for Opera. He’s been active in Web Standards since 2002, working with the Web Standards Project, the W3C Mobile Best Practices Working Group and developer education. He co–authored Introducing HTML5, the first full–length book on the subject. He blogs at brucelawson.co.uk. You can follow him at &lt;a href=&quot;https://twitter.com/brucel&quot;&gt;@brucel.&lt;/a&gt;&lt;/p&gt;
  12808. &lt;h2&gt;Rachel Andrew&lt;/h2&gt;
  12809. &lt;p&gt;Rachel Andrew is a front and back-end web developer, author and speaker. Her books include the bestselling CSS Anthology for Sitepoint and she is a regular contributor to a number of publications both on and offline. She writes about business and technology on her own site at rachelandrew.co.uk. In addition to offering consultancy services through the company she founded in 2001 – edgeofmyseat.com – Rachel is also one of the developers of the content management system, Perch.&lt;/p&gt;
  12810. &lt;h2&gt;Locatie&lt;/h2&gt;
  12811. &lt;p&gt;LBi Netherlands is goed bereikbaar met de auto en het openbaar vervoer. We raden je aan om met het openbaar vervoer te komen. Er zijn geen parkeerplaatsen beschikbaar op het terrein van LBi. Als je met de auto komt, raden we je aan om te parkeren bij &lt;a href=&quot;http://www.parkerenindestad.nl/amsterdam/algemeen/parkeren-transferium-amsterdam-arena.html&quot;&gt;Transferium Amsterdam Arena&lt;/a&gt;, en met de metro naar LBi te reizen. Vanaf Transferium Amsterdam Arena is het ongeveer 5 à 10 minuten met de metro.&lt;/p&gt;
  12812. &lt;h2&gt;Met het openbaar vervoer:&lt;/h2&gt;
  12813. &lt;ul&gt;
  12814. &lt;li&gt;Neem de trein naar station Duivendrecht, Amsterdam Amstel of Bijlmer Arena.&lt;/li&gt;
  12815. &lt;li&gt;Neem dan de metro naar Spaklerweg.&lt;/li&gt;
  12816. &lt;li&gt;Neem de uitgang Wenckebachweg en loop rechtdoor langs het fietspad.&lt;/li&gt;
  12817. &lt;li&gt;Ga aan het eind van het pad rechts, de Wenckebachweg op.&lt;/li&gt;
  12818. &lt;li&gt;Na ongeveer 10 minuten lopen zie je LBi recht voor je.&lt;/li&gt;
  12819. &lt;/ul&gt;
  12820. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  12821. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen door zowel leden als niet-leden. Wel is gewenst dat je jezelf opgeeft via &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/lbi&quot;&gt;het formulier op de bijeenkomstpagina&lt;/a&gt;. Er is plek voor maximaal 150 deelnemers; dus: die het eerst komt, het eerst maalt. De bijeenkomst is gratis en is voor iedereen, dus ook niet leden.&lt;/p&gt;
  12822. &lt;p&gt;Wanneer je toch niet kunt komen, verzoeken wij je af te melden via e-mail, zodat er weer plek is voor iemand anders.&lt;/p&gt;
  12823. </content>
  12824.  </entry>
  12825.  <entry>
  12826.    <title>Hackaton op zaterdag 19 mei</title>
  12827.    <link href="https://www.fronteers.nl/nl/blog/2012/04/hackaton-19-mei"/>
  12828.    <updated>2012-04-17T00:00:00Z</updated>
  12829.    <id>https://www.fronteers.nl/nl/blog/2012/04/hackaton-19-mei</id>
  12830.    <content xml:lang="nl" type="html">&lt;p&gt;Ter ere van het eerste lustrumjaar van Fronteers, organiseren we een hackaton op zaterdag 19 mei 2012. De gehele dag zijn we onder de pannen bij coworkingspace &lt;a href=&quot;http://nomadz.nl/&quot;&gt;Nomadz&lt;/a&gt; in Den Haag.&lt;/p&gt;
  12831. &lt;p&gt;De dag start met een duopresentatie gegeven door Vasilis van Gemert en Peter Nederlof. Zij zullen een inspirerend praatje houden over wat voor technieken we in de toekomst kunnen gebruiken. Denk aan Flexbox, CSS 3D transformaties et cetera.&lt;/p&gt;
  12832. &lt;p&gt;In de middag wordt in groepen gewerkt aan toffe projecten, die bijvoorbeeld alleen werken in alpha- of betaversies van browsers zoals Firefox en Chrome. Deze projecten worden aan het einde van de dag gepresenteerd aan mede-Fronteersleden. Als afsluiter is er een borrel.&lt;/p&gt;
  12833. &lt;p&gt;De dag is alleen toegankelijk voor leden van Fronteers. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/hackaton&quot;&gt;Opgave is mogelijk tot 10 mei via het formulier op de Hackaton-pagina.&lt;/a&gt;&lt;/p&gt;
  12834. </content>
  12835.  </entry>
  12836.  <entry>
  12837.    <title>Bijeenkomst op 3 mei bij VPRO</title>
  12838.    <link href="https://www.fronteers.nl/nl/blog/2012/04/bijeenkomst-vpro"/>
  12839.    <updated>2012-04-13T00:00:00Z</updated>
  12840.    <id>https://www.fronteers.nl/nl/blog/2012/04/bijeenkomst-vpro</id>
  12841.    <content xml:lang="nl" type="html">&lt;p&gt;Op 3 mei zijn we te gast bij VPRO Digitaal, de digitale afdeling van de omroep. Bekend van populaire websites als 3VOOR12 en Cinema.nl, maar ook de maker van vele websites bij eigen programma&#39;s. Hay Kranen en Frank Bosma zullen in hun talks ingaan op respectievelijk het gebruik van RequireJS en het Model View Controller design pattern.&lt;/p&gt;
  12842. &lt;h2&gt;RequireJS&lt;/h2&gt;
  12843. &lt;p&gt;Hay Kranen geeft een presentatie over het gebruik van RequireJS bij de VPRO. RequireJS is een JavaScript file en module lader die erg nuttig is voor onder andere de performance van je site en een goede structuur plus hergebruik van je code.&lt;/p&gt;
  12844. &lt;h2&gt;E=MV*&lt;/h2&gt;
  12845. &lt;p&gt;Frank Bosma geeft een presentatie over het Model View Controller (MVC) design pattern. De laatste tijd duiken er veel nieuwe JavaScript MVC libraries op. Maar wat is dat, MVC, en kost het energie of levert het ook energie op? Aan de hand van onder andere een aantal VPRO websites en het gebruik van MVC aldaar, probeert Frank een antwoord te geven op die vraag.&lt;/p&gt;
  12846. &lt;h2&gt;Locatie&lt;/h2&gt;
  12847. &lt;p&gt;De VPRO is gevestigd op het Mediapark in Hilversum, naast treinstation Hilversum Noord. Het adres is: Sumatralaan 49, 1217 GP, Hilversum (&lt;a href=&quot;http://www.vpro.nl/overdevpro/3779664/adres+en+contact&quot;&gt;routebeschrijving&lt;/a&gt;)&lt;/p&gt;
  12848. &lt;h2&gt;Aanmelden&lt;/h2&gt;
  12849. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen door zowel leden als niet-leden. Wel is gewenst dat je je aanmeldt via &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/vpro&quot;&gt;het formulier op de bijeenkomstpagina&lt;/a&gt;.&lt;/p&gt;
  12850. </content>
  12851.  </entry>
  12852.  <entry>
  12853.    <title>Korting op Offscreen Magazine voor Fronteers</title>
  12854.    <link href="https://www.fronteers.nl/nl/blog/2012/04/korting-op-offscreen-magazine"/>
  12855.    <updated>2012-04-09T00:00:00Z</updated>
  12856.    <id>https://www.fronteers.nl/nl/blog/2012/04/korting-op-offscreen-magazine</id>
  12857.    <content xml:lang="nl" type="html">&lt;p&gt;Als front-ender zit je niet snel verlegen om leesmateriaal. Dagelijks worden talloze blogposts gepubliceerd over ons vak: trends en technieken op het gebied van CSS, HTML of JavaScript, hacks en polyfills, lof- en klaagzangen over browsers en standaarden — het is genoeg om je hele werkdag mee vol krijgen. Onlangs is er daar een interessant alternatief bijgekomen: &lt;a href=&quot;http://www.offscreenmag.com/&quot;&gt;Offscreen&lt;/a&gt;, een &amp;quot;ouderwets&amp;quot; inkt-op-papier tijdschrift.&lt;/p&gt;
  12858. &lt;p&gt;Het fraai vormgegeven blad werpt een blik op de mensen achter de apps en de websites. In interviews, verhalen en korte artikelen vertellen onder anderen &lt;a href=&quot;https://twitter.com/simplebits&quot;&gt;Dan Cederholm&lt;/a&gt; van Dribbble, &lt;a href=&quot;https://twitter.com/awilkinson&quot;&gt;Andrew Wilkinson&lt;/a&gt; van MetaLab, &lt;a href=&quot;https://twitter.com/HAN&quot;&gt;Hannah Donovan&lt;/a&gt; van (voorheen) last.fm en de Belg &lt;a href=&quot;https://twitter.com/bdc&quot;&gt;Benjamin De Cock&lt;/a&gt; over hun werk- en denkwijzen, het verloop van hun carrières, de hobbyprojecten, de geleerde lessen en hun uiteenlopende definities van succes. Het is inspirerend om te lezen over de passie en creativiteit van je vakbroeders en -zusters, en de afwezigheid van technische artikelen is eigenlijk geen gemis.&lt;/p&gt;
  12859. &lt;p&gt;Kortom, Offscreen biedt inzicht in de persoonlijkheden die ons vakgebied opmaken, en is een mooie toevoeging aan de boekenkast van de front-end developer. Speciaal voor leden van Fronteers heeft uitgever &lt;a href=&quot;https://twitter.com/kaibrach&quot;&gt;Kai Brach&lt;/a&gt; een kortingscode beschikbaar gesteld waarmee de portokosten komen te vervallen. Neem contact op met &lt;a href=&quot;mailto:roel@fronteers.nl&quot;&gt;Roel&lt;/a&gt; voor je eigen kortingscode. Het aanbod is voor één nummer en een week geldig, dus wees er snel bij! Voor wie een abonnement neemt, vervallen de verzendkosten van het eerste nummer.&lt;/p&gt;
  12860. </content>
  12861.  </entry>
  12862.  <entry>
  12863.    <title>Kaartverkoop Fronteers 2012 van start</title>
  12864.    <link href="https://www.fronteers.nl/nl/blog/2012/04/kaartverkoop-fronteers-2012-van-start"/>
  12865.    <updated>2012-04-06T00:00:00Z</updated>
  12866.    <id>https://www.fronteers.nl/nl/blog/2012/04/kaartverkoop-fronteers-2012-van-start</id>
  12867.    <content xml:lang="nl" type="html">&lt;p&gt;De kaartverkoop van Fronteers 2012 op 4 en 5 oktober 2012 is begonnen.&lt;/p&gt;
  12868. &lt;p&gt;Het wachten is voorbij: de kaartverkoop is begonnen. Vanaf vandaag kunnen kaartjes worden gekocht voor &lt;a href=&quot;https://www.fronteers.nl/congres/2012&quot;&gt;Fronteers 2012&lt;/a&gt; op 4 en 5 oktober 2012.&lt;/p&gt;
  12869. &lt;p&gt;Zoals gewoonlijk krijgen leden een mooie korting en bespaar je nog meer als je gebruik maakt van de Early Bird aanbieding. Als je zeker weet dat je komt, wacht dan niet te lang, want er is slechts een beperkt aantal Early Bird-kaarten beschikbaar. De Early Bird periode eindigt midden mei voor leden en heeft een limiet van 75 kaarten voor niet-leden.&lt;/p&gt;
  12870. &lt;p&gt;Fronteers 2012 Early Bird prijzen (exclusief 19% BTW)
  12871. Fronteersleden: €200
  12872. --Niet leden-- &lt;em&gt;Uitverkocht!&lt;/em&gt;: €275)&lt;/p&gt;
  12873. &lt;p&gt;Fronteers 2012 normale prijzen (exclusief 19% BTW)
  12874. Fronteersleden: €275
  12875. Niet-leden: €350&lt;/p&gt;
  12876. &lt;p&gt;Fronteersleden krijgen in de komende dagen een mailtje met daarin hun kortingscode. Korting voor leden geldt alleen voor mensen die voor of op 5 april 2012 lid zijn geworden. Studenten kunnen gebruik maken van de studentenkorting door &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact&lt;/a&gt; met ons op te nemen. Kaarten zijn te bestellen via &lt;a href=&quot;https://fronteers.paydro.net/&quot;&gt;Paydro&lt;/a&gt;.&lt;/p&gt;
  12877. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/congres/2012/graphics/buttons/buy.png&quot; alt=&quot;Bestel nu je kaartje voor Fronteers 2012&quot; /&gt;&lt;/p&gt;
  12878. </content>
  12879.  </entry>
  12880.  <entry>
  12881.    <title>Bijeenkomst op 10 april bij Inventis</title>
  12882.    <link href="https://www.fronteers.nl/nl/blog/2012/04/bijeenkomst-inventis"/>
  12883.    <updated>2012-04-02T00:00:00Z</updated>
  12884.    <id>https://www.fronteers.nl/nl/blog/2012/04/bijeenkomst-inventis</id>
  12885.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 10 april 2012 is Fronteers te gast bij Inventis in Houthalen (Limburg). Er worden twee presentaties voorzien. Eerst komt Danny Calders praten over typografie en responsive web design; vervolgens zal Jurgen Dedeckere wat vertellen over hoe opleidingen in staat moeten zijn om de fronteers van de toekomst te creëren.&lt;/p&gt;
  12886. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12887. &lt;ul&gt;
  12888. &lt;li&gt;18:00 ontvangst met een drankje&lt;/li&gt;
  12889. &lt;li&gt;19:00 Danny Calders over &lt;em&gt;typografie en responsive web design&lt;/em&gt;&lt;/li&gt;
  12890. &lt;li&gt;20:00 Jurgen Dedeckere over &lt;em&gt;de nieuwe fronteer&lt;/em&gt;&lt;/li&gt;
  12891. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  12892. &lt;/ul&gt;
  12893. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  12894. &lt;p&gt;Inventis is gevestigd aan de Weg naar Zwartberg 85 te 3530 Houthalen-Helchteren (Limburg). Er is een plannetje beschikbaar op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/inventis&quot;&gt;de detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  12895. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  12896. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 40 mannen en vrouwen.&lt;/p&gt;
  12897. </content>
  12898.  </entry>
  12899.  <entry>
  12900.    <title>Bijeenkomst op 19 april in Breda</title>
  12901.    <link href="https://www.fronteers.nl/nl/blog/2012/03/bijeenkomst-april-breda"/>
  12902.    <updated>2012-03-20T00:00:00Z</updated>
  12903.    <id>https://www.fronteers.nl/nl/blog/2012/03/bijeenkomst-april-breda</id>
  12904.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 19 april is Fronteers wederom te gast bij &lt;a href=&quot;http://e-sites.nl/&quot;&gt;e-sites&lt;/a&gt; in Breda. De presentaties zijn gerelateerd aan JavaScript, en gaan redelijk diep in op de materie. Nikolai Onken en Anne van Kesteren zullen spreken.&lt;/p&gt;
  12905. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12906. &lt;ul&gt;
  12907. &lt;li&gt;18.30 inloop&lt;/li&gt;
  12908. &lt;li&gt;19.30 Nikolai Onken over een geavanceerd JavaScript onderwerp&lt;/li&gt;
  12909. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  12910. &lt;li&gt;20.45 Anne van Kesteren over standaarden&lt;/li&gt;
  12911. &lt;li&gt;21.45 borrelen&lt;/li&gt;
  12912. &lt;/ul&gt;
  12913. &lt;h2&gt;Tales from a standards engineer, door Anne van Kesteren&lt;/h2&gt;
  12914. &lt;p&gt;From bytes to code points, same-origin to cross-origin, and mutation events to observers. Disclaimer: Abstract kan afwijken van daadwerlijke inhoud.&lt;/p&gt;
  12915. &lt;h2&gt;Bereikbaarheid en opgave&lt;/h2&gt;
  12916. &lt;p&gt;E-sites is gevestigd aan Reduitlaan 33, UNIT 2.09, 4814 DC in Breda. Kom je met de trein, dan is het een klein kwartiertje lopen vanaf station Breda.&lt;/p&gt;
  12917. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen voor zowel leden als niet-leden. Wel is gewenst dat je jezelf opgeeft via &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/e-sites&quot;&gt;het formulier op de detailpagina van de bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  12918. </content>
  12919.  </entry>
  12920.  <entry>
  12921.    <title>Workshop jQuery Inception in Antwerpen op 8 mei 2012</title>
  12922.    <link href="https://www.fronteers.nl/nl/blog/2012/03/jquery-inception-antwerpen"/>
  12923.    <updated>2012-03-13T00:00:00Z</updated>
  12924.    <id>https://www.fronteers.nl/nl/blog/2012/03/jquery-inception-antwerpen</id>
  12925.    <content xml:lang="nl" type="html">&lt;p&gt;Een korte update van de commissie workshops. De workshop jQuery Inception, een beginners workshop JavaScript en jQuery, zal op dinsdag 8 mei in Antwerpen gegeven worden. De workshop vindt plaats bij ASPACE, en er is plaats voor 12 personen om de gehele dag iets op te steken van jQuery.&lt;/p&gt;
  12926. &lt;p&gt;Opgave is mogelijk via het &lt;a href=&quot;https://www.fronteers.nl/workshops/jquery-inception-arjan-eising&quot;&gt;formulier op de detailpagina van deze workshop&lt;/a&gt;. De workshop wordt gegeven door Arjan Eising. &lt;a href=&quot;http://www.aspace.be/&quot;&gt;ASPACE&lt;/a&gt; zit in het centrum van Antwerpen, op circa 15 minuten lopen vanaf het centraal station.&lt;/p&gt;
  12927. &lt;p&gt;Naast deze workshop is het ook nog mogelijk om jezelf op te geven voor de &lt;a href=&quot;https://www.fronteers.nl/workshops/html-css-frances-de-waal&quot;&gt;beginners workshop HTML/CSS&lt;/a&gt; die op woensdag 4 april in Utrecht gegeven wordt. Als je zelf al een HTML &amp;amp; CSS crack bent zal deze workshop wellicht te basic zijn voor je maar misschien ken je mensen (buiten Fronteers) die wel behoefte hebben aan een workshop als deze. Schroom dan niet om hem door te geven, workshops zijn open voor zowel leden als niet-leden en ze zijn een goede reden om lid te worden.&lt;/p&gt;
  12928. </content>
  12929.  </entry>
  12930.  <entry>
  12931.    <title>€50 korting op de GOTO-conference in Amsterdam</title>
  12932.    <link href="https://www.fronteers.nl/nl/blog/2012/03/korting-goto-conference-amsterdam"/>
  12933.    <updated>2012-03-07T00:00:00Z</updated>
  12934.    <id>https://www.fronteers.nl/nl/blog/2012/03/korting-goto-conference-amsterdam</id>
  12935.    <content xml:lang="nl" type="html">&lt;p&gt;En opnieuw is het prijs: Fronteers heeft een korting van €50 in de wacht weten te slepen voor de &lt;a href=&quot;http://gotocon.com/amsterdam-2012/&quot;&gt;GOTO Conference Amsterdam&lt;/a&gt;, 24 en 25 mei in de Beurs van Berlage.&lt;/p&gt;
  12936. &lt;p&gt;Dit is nu eens geen pure front-end, maar een algemeen softwarecongres waarop, gezien de stormachtige ontwikkelingen in web en mobiel, de organisatoren vonden dat front-end niet mocht ontbreken. Er zijn echter ook sessies over agile programming, back-end, en &lt;a href=&quot;http://gotocon.com/amsterdam-2012/tracks/&quot;&gt;meer&lt;/a&gt;.&lt;/p&gt;
  12937. &lt;p&gt;Voor de verandering is dit congres vrij dicht bij huis. Ook is het wat duurder dan de eerder aangekondigde: GOTO gebruikt een progressieve prijsstijging van €3 tot €6 per dag, wat betekent dat hoe eerder je je kaartje koopt, hoe goedkoper je uit bent. En, zoals gezegd, je Fronteers-code haalt nog eens €50 van de prijs af.&lt;/p&gt;
  12938. &lt;p&gt;Wil je hiervan gebruik maken, neem dan even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact op&lt;/a&gt; met de ledenadministratie. Zoals altijd geldt deze korting alleen voor mensen die op dit moment lid van Fronteers zijn.&lt;/p&gt;
  12939. </content>
  12940.  </entry>
  12941.  <entry>
  12942.    <title>Fronteers 2012: 4 en 5 oktober</title>
  12943.    <link href="https://www.fronteers.nl/nl/blog/2012/03/fronteers-2012-4-en-5-oktober"/>
  12944.    <updated>2012-03-05T00:00:00Z</updated>
  12945.    <id>https://www.fronteers.nl/nl/blog/2012/03/fronteers-2012-4-en-5-oktober</id>
  12946.    <content xml:lang="nl" type="html">&lt;p&gt;Het zal geen verrassing meer zijn dat we ook dit jaar weer een &lt;a href=&quot;https://www.fronteers.nl/congres/2012&quot;&gt;Fronteers conferentie&lt;/a&gt; organiseren. De vijfde alweer. We zijn al flink bezig met plannen maken en potentiële sprekers uitzoeken. De datum is al geprikt: donderdag 4 en vrijdag 5 oktober. Met Lanyrd kan je deze &lt;a href=&quot;https://web.archive.org/web/20171002053735/http://lanyrd.com/2012/fronteers/&quot;&gt;datum gemakkelijk in je agenda zetten&lt;/a&gt;. Net als de voorgaande twee jaren zullen we weer het prachtige &lt;a href=&quot;https://nl.wikipedia.org/wiki/Tuschinski_Theater&quot;&gt;Art Deco Pathé Tuschinski Theater&lt;/a&gt; in het centrum van Amsterdam gebruiken.&lt;/p&gt;
  12947. &lt;p&gt;Op de afgelopen conferentie hebben we veel lof ontvangen, waar we natuurlijk heel blij mee zijn. We zullen er alles aan doen om komend jaar nog indrukwekkender te maken. Het niveau van de sprekers, de inhoud en de goede sfeer hopen we zo te houden. Of zelfs dat nog te verbeteren. Het zal in ieder geval weer een inspirerende, gevarieerde en technisch hoogstaande conferentie worden.&lt;/p&gt;
  12948. &lt;p&gt;Eind maart / begin april gaat de kaartverkoop weer van start, maar het is al mogelijk om een gratis kaartje te winnen. Je moet wel al een Fronteers t-shirt hebben. Maak een foto van je Fronteers t-shirt  en tweet erover of stuur hem naar ons op en we plaatsen de foto op &lt;a href=&quot;http://isitfronteersconfyet.com/&quot;&gt;isitfronteersconfyet.com&lt;/a&gt; . We zullen daar dan een willekeurige foto uit pakken voor het vrijkaartje.&lt;/p&gt;
  12949. &lt;p&gt;Ben je nog niet eerder geweest? Dan kan je een goede indruk van de conferentie krijgen door de &lt;a href=&quot;https://www.fronteers.nl/congres&quot;&gt;onderwerpen van voorgaande jaren te bekijken&lt;/a&gt;. Bekijk ook de &lt;a href=&quot;https://www.fronteers.nl/congres/2011/sessions&quot;&gt;video&#39;s van vorig jaar op deze site, inclusief transcriptie&lt;/a&gt; of op &lt;a href=&quot;http://vimeo.com/channels/fronteers11&quot;&gt;Vimeo&lt;/a&gt; of abonneer je op de &lt;a href=&quot;http://itunes.apple.com/podcast/fronteers-2011-sessions/id481631840&quot;&gt;podcast&lt;/a&gt;.&lt;/p&gt;
  12950. &lt;p&gt;Als je op twitter zit, is het verstandig om &lt;a href=&quot;https://twitter.com/FronteersConf&quot;&gt;@FronteersConf&lt;/a&gt; te volgen, je bent dan altijd op de hoogte van het laatste nieuws.&lt;/p&gt;
  12951. &lt;p&gt;De conferentiecommissie,
  12952. Charis, Edwin, Hidde, Krijn, Peter, Peter-Paul, Sander en Thijs.&lt;/p&gt;
  12953. </content>
  12954.  </entry>
  12955.  <entry>
  12956.    <title>30% korting op jsDay in Verona</title>
  12957.    <link href="https://www.fronteers.nl/nl/blog/2012/02/korting-op-jsday-in-verona"/>
  12958.    <updated>2012-02-27T00:00:00Z</updated>
  12959.    <id>https://www.fronteers.nl/nl/blog/2012/02/korting-op-jsday-in-verona</id>
  12960.    <content xml:lang="nl" type="html">&lt;p&gt;En weer een leuk voordeeltje voor Fronteers-leden die JavaScript een mooie taal vinden en graag eens een keer naar Verona willen: we hebben niet minder dan 30% korting in de wacht gesleept voor &lt;a href=&quot;http://2012.jsday.it/&quot;&gt;jsDay 2012&lt;/a&gt;.&lt;/p&gt;
  12961. &lt;p&gt;Dit tweedaags congres, 16 en 17 mei aanstaande, richt zich exclusief op JavaScript. Het programma voor dit jaar is nog niet bekend, maar &lt;a href=&quot;http://www.jsday.it/2011/schedule&quot;&gt;dat van vorig jaar&lt;/a&gt; ziet er goed uit. En voor de prijs hoef je het niet te laten: €175, en dat is nog exclusief de Fronteers-korting.&lt;/p&gt;
  12962. &lt;p&gt;Wil je gebruik maken van deze korting, neem dan even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact&lt;/a&gt; op met de ledenadministratie. Zoals gebruikelijk geldt de korting uitsluitend voor diegenen die op dit moment lid zijn.&lt;/p&gt;
  12963. </content>
  12964.  </entry>
  12965.  <entry>
  12966.    <title>Bijeenkomst op 6 maart in Zaventem</title>
  12967.    <link href="https://www.fronteers.nl/nl/blog/2012/02/bijeenkomst-microsoft"/>
  12968.    <updated>2012-02-22T00:00:00Z</updated>
  12969.    <id>https://www.fronteers.nl/nl/blog/2012/02/bijeenkomst-microsoft</id>
  12970.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 6 maart is Fronteers te gast bij Microsoft in Zaventem. Er worden twee presentaties voorzien. Eerst komt Stijn Janssen praten over front-end style guides; vervolgens zal Joris Hens wat vertellen over de lessen die hij leerde uit het runnen van SolidShops.com, een applicatie voor webdesigners die webwinkels bouwen voor hun klanten.&lt;/p&gt;
  12971. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  12972. &lt;ul&gt;
  12973. &lt;li&gt;18:00 ontvangst met een drankje&lt;/li&gt;
  12974. &lt;li&gt;19:00 Stijn Janssen over &lt;em&gt;front-end style guides&lt;/em&gt;&lt;/li&gt;
  12975. &lt;li&gt;20:00 Joris Hens over &lt;em&gt;het runnen en bouwen van een geavanceerde web app&lt;/em&gt;&lt;/li&gt;
  12976. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  12977. &lt;/ul&gt;
  12978. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  12979. &lt;p&gt;Microsoft is gevestigd aan de Leonardo Da Vincilaan 3 te 1935 Zaventem. Er is een plannetje beschikbaar op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/microsoft&quot;&gt;de detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  12980. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  12981. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen.&lt;/p&gt;
  12982. </content>
  12983.  </entry>
  12984.  <entry>
  12985.    <title>Aankomende uitschrijving niet-betalende leden</title>
  12986.    <link href="https://www.fronteers.nl/nl/blog/2012/02/aankomende-uitschrijving-niet-betalende-leden"/>
  12987.    <updated>2012-02-13T00:00:00Z</updated>
  12988.    <id>https://www.fronteers.nl/nl/blog/2012/02/aankomende-uitschrijving-niet-betalende-leden</id>
  12989.    <content xml:lang="nl" type="html">&lt;p&gt;Fronteers doet het goed. We groeien jaar na jaar, en hebben op dit moment 436 leden. Tenminste, 436 &lt;em&gt;potentiële&lt;/em&gt; leden. 436 mensen die we tussen 6 en 10 januari een factuur hebben gestuurd voor het lidmaatschapsgeld over 2012. De meeste van jullie hebben keurig op tijd betaald, of tenminste gelijk na de eerste herinnering, waarvoor onze dank. Maar we lopen, zoals helaas ieder jaar, tegen een groep mensen aan die facturen en herinneringen negeren.&lt;/p&gt;
  12990. &lt;p&gt;In voorgaande jaren was onze procedure om deze mensen een paar maanden lang persoonlijke emails en herinneringen te blijven sturen, smekend om op z&#39;n minst een ontvangstbevestiging, met vaak na de derde poging een laconiek &amp;quot;oh ja, vergeten, doe dit snel&amp;quot; antwoord, maar maanden later nog steeds geen betaling. Het hele traject kostte onze ledenadministratie veel te veel tijd en energie, en met de groei van de vereniging werd dit alleen maar erger.&lt;/p&gt;
  12991. &lt;p&gt;We hebben daarom eind vorig jaar in samenspraak met de ALV besloten om dit hele traject dit jaar rigoreus te verkorten. Twee weken geleden is onze eerste en enige herinnering naar niet-betalende leden verstuurd. De betalingstermijn daarvan loopt volgende week af. Mensen die op dat moment nog niet betaald hebben, zullen zonder verdere communicatie uitgeschreven worden als lid. Natuurlijk kunnen deze leden zich later alsnog weer aanmelden als lid, maar de standaard voor veel voordelen van het Fronteers lidmaatschap, zoals kortingen op congressen, is dat deze alleen gelden als je lid bent op het moment dat de korting wordt aangekondigd.&lt;/p&gt;
  12992. &lt;p&gt;Daarom hierbij nog eens via een compleet ander kanaal een laatste poging om onze wanbetalende leden te bereiken: Ga nog eens bij jezelf na of je onze factuur hebt gezien en betaald. Het kan natuurlijk altijd zijn dat je van emailadres bent gewisseld zonder ons hiervan op de hoogte te stellen, of dat je een slecht afgesteld spamfilter gebruikt en daardoor onze factuur en herinnering hebt gemist, of dat je lidmaatschap door je bedrijf wordt betaald, en de administratie daar erg langzaam is (tip: Het Fronteers lidmaatschap is persoonlijk; als je bedrijf je wil sponsoren, betaal dan zelf, en declareer het naderhand bij je bedrijf). Neem in deze en andere gevallen ajb &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact&lt;/a&gt; met ons op, zodat we je nog een nieuwe kopie van de factuur kunnen sturen, en een week extra kunnen geven om te betalen. Als we niets van je horen, dan kunnen we ook niets voor je doen.&lt;/p&gt;
  12993. </content>
  12994.  </entry>
  12995.  <entry>
  12996.    <title>30% korting op Web Rebels in Oslo</title>
  12997.    <link href="https://www.fronteers.nl/nl/blog/2012/02/korting-op-web-rebels-in-oslo"/>
  12998.    <updated>2012-02-10T00:00:00Z</updated>
  12999.    <id>https://www.fronteers.nl/nl/blog/2012/02/korting-op-web-rebels-in-oslo</id>
  13000.    <content xml:lang="nl" type="html">&lt;p&gt;Als de trend zich voortzet, wordt het een erg voordelig jaar voor Fronteersleden. Een maand geleden werd bekend dat leden korting krijgen op een ticket voor &lt;a href=&quot;https://www.fronteers.nl/blog/2012/01/korting-op-front-trends-in-warschau&quot;&gt;Front-Trends&lt;/a&gt;, eerder deze week was er een aanbieding voor de &lt;a href=&quot;https://www.fronteers.nl/blog/2012/02/creativejs-amsterdam&quot;&gt;CreativeJS workshop&lt;/a&gt; van Seb Lee-Delisle en nu kunnen we alweer melden dat het ook gelukt is om voor Fronteersleden een korting te bedingen op tickets voor &lt;a href=&quot;http://webrebels.org/&quot;&gt;Web Rebels&lt;/a&gt; op 24 en 25 mei in Oslo.&lt;/p&gt;
  13001. &lt;p&gt;Web Rebels is een nieuw congres. De organisatie achter Web Rebels komt voort uit Framsia, een groep vrijwilligers die, onder andere geïnspireerd door Fronteers, maandelijks drukbezochte bijeenkomsten organiseert.&lt;/p&gt;
  13002. &lt;p&gt;Er zijn 10 kaarten met 30% korting beschikbaar voor (huidige) leden van Fronteers. Heb je interesse, neem dan even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact&lt;/a&gt; op met de ledenadministratie voor nadere instructies voor het aanschaffen van je ticket. Wacht niet te lang, want de early bird start vanmiddag al om 15:00u en duurt slechts tot 24 februari, terwijl er in totaal maar 20 early bird tickets zijn. Tickets kosten in deze periode met Fronteerskorting € 179,20 inclusief btw. Na 24 februari wordt dit € 268,80.&lt;/p&gt;
  13003. </content>
  13004.  </entry>
  13005.  <entry>
  13006.    <title>Met 25% korting naar de CreativeJS workshop in Amsterdam</title>
  13007.    <link href="https://www.fronteers.nl/nl/blog/2012/02/creativejs-amsterdam"/>
  13008.    <updated>2012-02-07T00:00:00Z</updated>
  13009.    <id>https://www.fronteers.nl/nl/blog/2012/02/creativejs-amsterdam</id>
  13010.    <content xml:lang="nl" type="html">&lt;p&gt;Op 12 en 13 april geeft &lt;a href=&quot;http://seb.ly/&quot;&gt;Seb Lee-Delisle&lt;/a&gt;, die afgelopen jaar ook op &lt;a href=&quot;https://www.fronteers.nl/congres/2011&quot;&gt;het congres&lt;/a&gt; was, zijn &lt;a href=&quot;http://seb.ly/training/&quot;&gt;CreativeJS&lt;/a&gt; workshop bij Felix Meritis in Amsterdam. Leden van Fronteers (en freelancers) krijgen hiervoor 25% korting. Er zijn in totaal 12 plaatsen beschikbaar, en waarschijnlijk is &#39;ie snel uitverkocht.&lt;/p&gt;
  13011. &lt;p&gt;Neem even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact&lt;/a&gt; op met de ledenadministratie als je een kortingscode wilt ontvangen.&lt;/p&gt;
  13012. &lt;p&gt;De korting geldt trouwens alleen voor leden die op dit moment lid zijn van Fronteers.&lt;/p&gt;
  13013. </content>
  13014.  </entry>
  13015.  <entry>
  13016.    <title>Workshops update januari</title>
  13017.    <link href="https://www.fronteers.nl/nl/blog/2012/01/cursussen-update-januari"/>
  13018.    <updated>2012-01-17T00:00:00Z</updated>
  13019.    <id>https://www.fronteers.nl/nl/blog/2012/01/cursussen-update-januari</id>
  13020.    <content xml:lang="nl" type="html">&lt;p&gt;Na wat radiostilte tijdens de feestdagen hierbij de eerste workshops update voor 2012 met hopelijk goed nieuws voor iedereen die workshops wil gaan volgen in 2012!&lt;/p&gt;
  13021. &lt;p&gt;Op basis van de feedback die we in 2011 gekregen hebben kunnen we met een gerust hart stellen dat &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten&quot;&gt;workshops&lt;/a&gt; in 2011 een succes zijn geweest. In 2012 willen we ons best doen om workshops wat verder van tevoren aan te kondigen, maar verder lekker op deze voet doorgaan. Dit betekent dat we onze workshops blijven verzorgen bij Seats2Meet in Utrecht. Ook onze lage prijzen zullen hetzelfde blijven, €100 voor leden en €200 voor niet-leden. Het aanbod zal ook in grote lijnen hetzelfde blijven. We zijn hierin echter afhankelijk van de beschikbaarheid van trainers. Alle trainers die vorig jaar een workshop hebben gegeven wordt dit jaar, als dat niet al gebeurd is, gevraagd of ze hun training zouden willen herhalen.&lt;/p&gt;
  13022. &lt;p&gt;Om alvast een tipje van de sluier op te lichten. In februari zal Arjan Eising zijn &lt;a href=&quot;https://www.fronteers.nl/workshops/jquery-inception-arjan-eising&quot;&gt;beginners workshop jQuery&lt;/a&gt; gaan herhalen. In &lt;strike&gt;maart&lt;/strike&gt; &lt;strong&gt;april&lt;/strong&gt; wordt hij gevolgd door Vasilis van Gemert met zijn workshop &lt;a href=&quot;https://www.fronteers.nl/workshops/adaptief-ontwikkelen-vasilis-van-gemert&quot;&gt;adaptief ontwikkelen&lt;/a&gt; voor de wat gevorderden onder ons. In april zal Frances de Waal&lt;strong&gt;ook&lt;/strong&gt; haar &lt;a href=&quot;https://www.fronteers.nl/workshops/html-css-frances-de-waal&quot;&gt;beginnerscursus HTML en CSS&lt;/a&gt; nog een keer gaan geven. Aangezien er gedurende de zomermaanden, juni, juli en augustus beduidend minder animo leek te zijn hebben we besloten dit jaar in deze maanden geen workshops te plannen.&lt;/p&gt;
  13023. &lt;p&gt;Hopelijk gaat 2012 op zijn minst zo&#39;n succesvol cursusjaar worden als 2011 geweest is.&lt;/p&gt;
  13024. </content>
  13025.  </entry>
  13026.  <entry>
  13027.    <title>Bijeenkomsten: 8 februari in Leiden en 15 februari in Rotterdam</title>
  13028.    <link href="https://www.fronteers.nl/nl/blog/2012/01/bijeenkomsten-februari"/>
  13029.    <updated>2012-01-06T00:00:00Z</updated>
  13030.    <id>https://www.fronteers.nl/nl/blog/2012/01/bijeenkomsten-februari</id>
  13031.    <content xml:lang="nl" type="html">&lt;p&gt;De tweede en derde woensdagen van februari staan ingepland voor twee Fronteersbijeenkomsten. Op 8 februari zijn we te gast bij &lt;a href=&quot;http://www.transip.nl/&quot;&gt;TransIP&lt;/a&gt; in Leiden, en een week later opent &lt;a href=&quot;http://www.mirabeau.nl/&quot;&gt;Mirabeau Rotterdam&lt;/a&gt; de deuren voor een bijeenkomst.&lt;/p&gt;
  13032. &lt;h2&gt;Bijeenkomst bij TransIP in Leiden op 8 februari&lt;/h2&gt;
  13033. &lt;p&gt;Johan Schuyt geeft een presentatie over de Google Closure Compiler, en Peter Nederlof duikt de diepte in over CSS Transities en Transformaties in combinatie met JavaScript. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/transip&quot;&gt;Meer informatie en opgave op de bijeenkomstpagina.&lt;/a&gt;&lt;/p&gt;
  13034. &lt;h2&gt;Bijeenkomst bij Mirabeau in Rotterdam op 15 februari&lt;/h2&gt;
  13035. &lt;p&gt;Johan Ronsse, die op zijn verjaardag speciaal voor ons uit Belgie af komt reizen, geeft een presentatie over interface design. Paul Martens, front-end developer bij Mirabeau, vertelt over spriting en workflow. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/mirabeau&quot;&gt;Meer informatie en opgave op de bijeenkomstpagina.&lt;/a&gt;&lt;/p&gt;
  13036. &lt;h2&gt;Opgave&lt;/h2&gt;
  13037. &lt;p&gt;Zoals gebruikelijk zijn al deze bijeenkomsten gratis bij te wonen door zowel leden als niet-leden. Wel is gewenst dat je jezelf opgeeft via de formulieren op de bijeenkomstpagina&#39;s.&lt;/p&gt;
  13038. </content>
  13039.  </entry>
  13040.  <entry>
  13041.    <title>Bijeenkomst op 19 januari in Gent</title>
  13042.    <link href="https://www.fronteers.nl/nl/blog/2012/01/bijeenkomst-pure-sign"/>
  13043.    <updated>2012-01-05T00:00:00Z</updated>
  13044.    <id>https://www.fronteers.nl/nl/blog/2012/01/bijeenkomst-pure-sign</id>
  13045.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 19 januari 2012 is Fronteers te gast bij Pure Sign in Gent. Er worden twee presentaties voorzien. Eerst komt Arjan Eising praten over CSS Selectors Level 4; vervolgens zullen Jelle Desramaults en Jochen Vandendriessche wat vertellen over de design &amp;amp; front-end-workflow die ze hanteren, en hoe ze daarbij Serve, Haml, en Sass/Compass gebruiken.&lt;/p&gt;
  13046. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  13047. &lt;ul&gt;
  13048. &lt;li&gt;18:00 ontvangst met een drankje&lt;/li&gt;
  13049. &lt;li&gt;19:00 Arjan Eising over &lt;em&gt;CSS Selectors Level 4&lt;/em&gt;&lt;/li&gt;
  13050. &lt;li&gt;20:00 Jelle Desramaults en Jochen Vandendriessche over &lt;em&gt;de design &amp;amp; front-end-workflow bij Gorilla&lt;/em&gt;&lt;/li&gt;
  13051. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  13052. &lt;/ul&gt;
  13053. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  13054. &lt;p&gt;Pure Sign is gevestigd aan de Liefkensstraat 35 B te 9032 Gent (Wondelgem). Er is een plannetje beschikbaar op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/pure-sign&quot;&gt;de detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  13055. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  13056. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2012/pure-sign#formulier-1&quot;&gt;Geef je daarom op via het aanmeldformulier.&lt;/a&gt; Vol is vol!&lt;/p&gt;
  13057. </content>
  13058.  </entry>
  13059.  <entry>
  13060.    <title>Korting op Front-Trends in Warschau</title>
  13061.    <link href="https://www.fronteers.nl/nl/blog/2012/01/korting-op-front-trends-in-warschau"/>
  13062.    <updated>2012-01-03T00:00:00Z</updated>
  13063.    <id>https://www.fronteers.nl/nl/blog/2012/01/korting-op-front-trends-in-warschau</id>
  13064.    <content xml:lang="nl" type="html">&lt;p&gt;Fronteers gaat zich inspannen om voor haar leden leuke kortingen op leuke congressen los te peuteren, en vandaag kunnen we aankondigen dat dit gelukt is voor &lt;a href=&quot;http://2012.front-trends.com/&quot;&gt;Front-Trends&lt;/a&gt;, 26 en 27 april in Warschau.&lt;/p&gt;
  13065. &lt;p&gt;De sprekerslijst ziet er goed uit, het congres is sowieso al goedkoop, en we ondersteunen natuurlijk graag de pogingen een nationaal Pools front-end congres van de grond te krijgen.&lt;/p&gt;
  13066. &lt;p&gt;Derhalve kunnen we Fronteers-leden hierbij niet minder dan 30% korting bieden op Front-Trends. Wil je dat, neem dan contact op met &lt;a href=&quot;mailto:krijn@fronteers.nl&quot;&gt;krijn@fronteers.nl&lt;/a&gt; en je krijgt nadere instructies voor het aanschaffen van je kaartje. Let op: er zijn er maar twintig, en op is op.&lt;/p&gt;
  13067. &lt;p&gt;Het idee om kortingen voor buitenlandse congressen te regelen voor Fronteers-leden werd oorspronkelijk geopperd op de ALV van eind 2010. In de huidige insteek wordt de korting gedeeltelijk gesponsord door de vereniging, en gedeeltelijk aangeboden door het congres. Afhankelijk van het succes van deze actie hopen we vergelijkbare acties voor meer Europese congressen te organiseren, en hiermee onze leden te stimuleren tot meer internationale kennisdeling.&lt;/p&gt;
  13068. </content>
  13069.  </entry>
  13070.  <entry>
  13071.    <title>Nieuwjaarsborrel</title>
  13072.    <link href="https://www.fronteers.nl/nl/blog/2012/01/nieuwjaarsborrel"/>
  13073.    <updated>2012-01-02T00:00:00Z</updated>
  13074.    <id>https://www.fronteers.nl/nl/blog/2012/01/nieuwjaarsborrel</id>
  13075.    <content xml:lang="nl" type="html">&lt;p&gt;Namens het bestuur hierbij een gelukkig Nieuwjaar aan alle Fronteers-leden en overige bezoekers van de site.&lt;/p&gt;
  13076. &lt;p&gt;Om het nieuwe jaar vrolijk te laten ingaan, organiseert Fronteers op &lt;em&gt;donderdag 26 januari&lt;/em&gt; een Nieuwjaarsborrel voor leden. Deze zal plaatsvinden in &lt;a href=&quot;http://www.bierfabriek.com/&quot;&gt;De Bierfabriek&lt;/a&gt;, Rokin 75, Amsterdam vanaf circa 19:00 uur. Het bestuur stelt enig gratis bier ter beschikking, en tevens is er gelegenheid om hier iets te eten.&lt;/p&gt;
  13077. &lt;p&gt;Wel moeten we van tevoren weten met hoeveel mensen we zijn. Derhalve verzoeken we je je in te schrijven via onderstaand formulier, als je wilt komen.&lt;/p&gt;
  13078. &lt;h2&gt;Aanwezigen&lt;/h2&gt;
  13079. &lt;ul&gt;
  13080. &lt;li&gt;Krijn Hoetmer&lt;/li&gt;
  13081. &lt;li&gt;Anton Kouliavtsev&lt;/li&gt;
  13082. &lt;li&gt;Edwin Martin&lt;/li&gt;
  13083. &lt;li&gt;Dorien&lt;/li&gt;
  13084. &lt;li&gt;Arjan Eising&lt;/li&gt;
  13085. &lt;li&gt;Hidde de Vries&lt;/li&gt;
  13086. &lt;li&gt;Kris van der Ven&lt;/li&gt;
  13087. &lt;li&gt;Peter-Paul Koch&lt;/li&gt;
  13088. &lt;li&gt;Mike Vierwind&lt;/li&gt;
  13089. &lt;li&gt;Peter Peerdeman&lt;/li&gt;
  13090. &lt;li&gt;Peter Nederlof&lt;/li&gt;
  13091. &lt;li&gt;Thijs Reijgersberg&lt;/li&gt;
  13092. &lt;li&gt;Tom Greuter&lt;/li&gt;
  13093. &lt;li&gt;Stefan Fountain&lt;/li&gt;
  13094. &lt;li&gt;Jeroen Kuijpers&lt;/li&gt;
  13095. &lt;li&gt;Wilfred Nas&lt;/li&gt;
  13096. &lt;li&gt;Pascal Haakmat&lt;/li&gt;
  13097. &lt;li&gt;Charis Rooda&lt;/li&gt;
  13098. &lt;li&gt;Sander Aarts&lt;/li&gt;
  13099. &lt;li&gt;Martijn Jongkind&lt;/li&gt;
  13100. &lt;li&gt;Jan van Hellemond&lt;/li&gt;
  13101. &lt;li&gt;Thomas van Zuijlen&lt;/li&gt;
  13102. &lt;li&gt;Frenz&lt;/li&gt;
  13103. &lt;li&gt;Tom Cool&lt;/li&gt;
  13104. &lt;li&gt;Sophie van Waesberghe&lt;/li&gt;
  13105. &lt;li&gt;Matijs Brinkhuis&lt;/li&gt;
  13106. &lt;li&gt;Rein Groot&lt;/li&gt;
  13107. &lt;li&gt;Jules Ernst&lt;/li&gt;
  13108. &lt;/ul&gt;
  13109. &lt;p&gt;We hopen onze leden op de 26e te mogen begroeten.&lt;/p&gt;
  13110. </content>
  13111.  </entry>
  13112.  <entry>
  13113.    <title>Lustrumcie zoekt enthousiaste leden!</title>
  13114.    <link href="https://www.fronteers.nl/nl/blog/2011/12/lustrumcie-zoekt-enthousiaste-leden"/>
  13115.    <updated>2011-12-29T00:00:00Z</updated>
  13116.    <id>https://www.fronteers.nl/nl/blog/2011/12/lustrumcie-zoekt-enthousiaste-leden</id>
  13117.    <content xml:lang="nl" type="html">&lt;p&gt;In 2012 bestaat Fronteers alweer vijf jaar! Aangezien we dit niet ongemerkt voorbij willen laten gaan, is er een lustrumcommissie opgezet tijdens de ALV enkele weken geleden. In de commissie zitten nu Charis Rooda en Arjan Eising, maar er zouden nog wel een of twee leden bij kunnen.&lt;/p&gt;
  13118. &lt;p&gt;Dus, vind jij het leuk om enkele leuke acties, borrels en dergelijke te organiseren, neem dan contact op met Arjan: &lt;a href=&quot;mailto:arjan@fronteers.nl&quot;&gt;arjan@fronteers.nl&lt;/a&gt;. Vergeet niet kort iets over jezelf te vertellen, en een beknopte onderbouwing te geven waarom &lt;em&gt;jij&lt;/em&gt; in de commissie zou moeten zitten. In de loop van januari vindt de eerste vergadering plaats.&lt;/p&gt;
  13119. </content>
  13120.  </entry>
  13121.  <entry>
  13122.    <title>Dr. Strangescope or: How I Learned to Stop Worrying and Love the Closure</title>
  13123.    <link href="https://www.fronteers.nl/nl/blog/2011/12/dr-strangescope"/>
  13124.    <updated>2011-12-24T00:00:00Z</updated>
  13125.    <id>https://www.fronteers.nl/nl/blog/2011/12/dr-strangescope</id>
  13126.    <content xml:lang="nl" type="html">&lt;p&gt;Scopes en closures in JavaScript zijn altijd een soort van taboe geweest: het is er altijd, maar je hebt het er liever niet over. In dit artikel probeer ik, voor de beginnende JavaScripter, een introductie in scopes en closures te geven. En aangezien ik een enorme filmfreak ben, heb ik er enkele referenties naar de film &lt;a href=&quot;http://www.imdb.com/title/tt0057012/&quot;&gt;&#39;Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb&#39;&lt;/a&gt; in gestopt.&lt;/p&gt;
  13127. &lt;h2&gt;Scope&lt;/h2&gt;
  13128. &lt;p&gt;Scopes in JavaScript (en alle andere programeertalen) zijn een soort ballenbak. Alle variabelen (en stiekem ook functies) zijn de ballen. Je kunt gewoon een bal pakken en de waarde van de variabele opvragen, of je kunt de waarde veranderen.&lt;/p&gt;
  13129. &lt;p&gt;In JavaScript zijn er twee soorten scopes: &lt;em&gt;globale scope&lt;/em&gt; en &lt;em&gt;functie scope&lt;/em&gt;. In de globale scope zitten alle variabelen die niet in een functie staan, en in de functie scope zitten variabelen die in een specifieke functie aangemaakt zijn.&lt;/p&gt;
  13130. &lt;p&gt;De functiescope moet je zien als een soort doos in de ballenbak. Het is mogelijk een variabele in de globale scope aan te passen, maar vanuit de globale scope kun je &lt;em&gt;niet&lt;/em&gt; bij variabelen in de functie scope.&lt;/p&gt;
  13131. &lt;p&gt;Tijd voor een voorbeeld:&lt;/p&gt;
  13132. &lt;pre&gt;&lt;code&gt;var russianAmbassador = &#39;Alexi de Sadesky&#39;;
  13133.  
  13134. function warRoom() {
  13135.  alert(russianAmbassador); // Alexi de Sadesky
  13136.  var president = &#39;Merkin Muffley&#39;;
  13137.  alert(president); // Merkin Muffley
  13138. }
  13139.  
  13140. warRoom();
  13141.  
  13142. alert(president); // undefined
  13143.  
  13144. function warTable() {
  13145.  alert(russianAmbassador); // undefined
  13146.  var russianAmbassador = &#39;Foo&#39;;
  13147.  alert(russianAmbassador); // Foo
  13148. }
  13149.  
  13150. warTable();
  13151. &lt;/code&gt;&lt;/pre&gt;
  13152. &lt;p&gt;In de eerste functie (&lt;code&gt;warRoom&lt;/code&gt;) kijken we eerst of binnen de functie de variabele &lt;code&gt;russianAmbassador&lt;/code&gt; bestaat. Dit is niet het geval, dus wordt in de globale scope gekeken. Daar wordt de variabele wel gevonden en dus zal de naam van de Russische ambassadeur getoond worden. Omdat de variabele &lt;code&gt;president&lt;/code&gt; in de functie scope zit van &lt;code&gt;warRoom&lt;/code&gt;, zal die in de alert eronder helaas niet opvraagbaar zijn.&lt;/p&gt;
  13153. &lt;p&gt;De tweede functie gaat iets anders werken. Omdat de JavaScript parser een variabele initialisatie van &lt;code&gt;russianAmbassador&lt;/code&gt; tegenkomt, kan de globale variabele &lt;code&gt;russianAmbassador&lt;/code&gt; niet meer benaderd worden. De eerste alert zal dus een &lt;code&gt;undefined&lt;/code&gt; teruggeven. Daarna wordt de variabele gezet, en kan die alleen in de functie &lt;code&gt;warTable&lt;/code&gt; benaderd worden.&lt;/p&gt;
  13154. &lt;p&gt;Het weten dat een variabele ergens later in de code gezet gaat worden, lijkt veel op het feit dat een functieaanroep ook prima &lt;em&gt;voor&lt;/em&gt; de functiedeclaratie geplaatst kan worden. Probeer het maar eens! In JavaScript worden stiekem alle functiedeclaraties, en ook variabeledeclaraties, helemaal bovenin de code gezet.&lt;/p&gt;
  13155. &lt;blockquote&gt;
  13156. &lt;p&gt;&amp;quot;Sir, you can&#39;t let him in here. He&#39;ll see everything. He&#39;ll see the big board!&amp;quot;&lt;/p&gt;
  13157. &lt;/blockquote&gt;
  13158. &lt;h2&gt;Closures&lt;/h2&gt;
  13159. &lt;p&gt;Closures maken gebruik van het feit dat er een functie scope bestaat. Wat ze doen is een of meerdere functies retourneren bij een bepaalde functieaanroep. Deze buitenste functie houdt dan alle variabelen geheim voor de globale scope.&lt;/p&gt;
  13160. &lt;pre&gt;&lt;code&gt;function telOpEnAlert(a) {
  13161.  return function(b) {
  13162.    alert(a + b);
  13163.  }
  13164. }
  13165.  
  13166. var vijf = telOpEnAlert(5);
  13167. vijf(10); // 15
  13168. vijf(100); // 105
  13169. &lt;/code&gt;&lt;/pre&gt;
  13170. &lt;p&gt;Wat bovenstaande code doet, is eigenlijk een vernuftig trucje. Eerst wordt de variabele &lt;code&gt;vijf&lt;/code&gt; geïnitialiseerd door de functie &lt;code&gt;telOpEnAlert&lt;/code&gt; aan te roepen. Deze functie neemt één argument aan, namelijk &lt;code&gt;a&lt;/code&gt;. Deze variabele (in ons geval gezet op 5) zit in de functie scope van &lt;code&gt;telOpEnAlert&lt;/code&gt;. Daarna retourneert het een anonieme functie die ook één argument aanneemt.&lt;/p&gt;
  13171. &lt;p&gt;Deze anonieme functie wordt aangeroepen bij &lt;code&gt;vijf(10)&lt;/code&gt;. Omdat de variabele &lt;code&gt;a&lt;/code&gt; in de functie scope zit, is die bekend (namelijk 5). Door daarna het argument van de anonieme functie (in de eerst aanroep 10 en tweede 100) erbij op te tellen, kan hij een getal alerten.&lt;/p&gt;
  13172. &lt;p&gt;Het grote voordeel van closures is dus dat de globale scope niet wordt vervuild, en dat dus scripts van meerdere makers niet conflicteren. Stel je voor dat iedereen de variabele &lt;code&gt;a&lt;/code&gt; gebruikt in zijn of haar script.&lt;/p&gt;
  13173. &lt;blockquote&gt;
  13174. &lt;p&gt;&amp;quot;Well, boys, we got three engines out, we got more holes in us than a horse trader&#39;s mule, the radio is gone and we&#39;re leaking fuel and if we was flying any lower why we&#39;d need sleigh bells on this thing... but we got one little budge on them Rooskies. At this height why they might harpoon us but they dang sure ain&#39;t gonna spot us on no radar screen!&amp;quot;&lt;/p&gt;
  13175. &lt;/blockquote&gt;
  13176. &lt;p&gt;Nog een laatste voorbeeld, met een voorbeeld dat je in de praktijk kan gebruiken.&lt;/p&gt;
  13177. &lt;pre&gt;&lt;code&gt;function MijnLightBox(element) {
  13178.  function roteerLinks() {
  13179.    // code
  13180.    geheim(1337);
  13181.    // code
  13182.  }
  13183.  
  13184.  function roteerRechts() {
  13185.    // code
  13186.  }
  13187.  
  13188.  function geheim(argument) {
  13189.    // voer geheime code uit
  13190.    alert(argument);
  13191.    // voer meer geheime code uit
  13192.  }
  13193.  
  13194.  function maakHtmlAan() {
  13195.    // maak enige HTML aan
  13196.  }
  13197.  
  13198.  return {
  13199.    linksom: roteerLinks,
  13200.    rechtsom: roteerRechts
  13201.  };
  13202. }
  13203.  
  13204. var lightbox = MijnLightBox(&#39;element&#39;);
  13205. lightbox.linksom();
  13206. &lt;/code&gt;&lt;/pre&gt;
  13207. &lt;p&gt;De overkoepelende functie &lt;code&gt;MijnLightbox&lt;/code&gt; heeft twee functies die privé zijn: &lt;code&gt;geheim&lt;/code&gt; en &lt;code&gt;maakHtmlAan&lt;/code&gt;. Ze zitten namelijk in de functie scope van &lt;code&gt;MijnLightbox&lt;/code&gt;. Ze kunnen alleen binnen die overkoepelende functie gebruikt worden.&lt;/p&gt;
  13208. &lt;p&gt;Twee andere functies, &lt;code&gt;roteerLinks&lt;/code&gt; en &lt;code&gt;roteerRechts&lt;/code&gt;, worden geretourneerd met een object.&lt;/p&gt;
  13209. &lt;p&gt;Door de functie &lt;code&gt;MijnLightbox&lt;/code&gt; aan te roepen, krijg je een object terug met daarin die twee functies. Vervolgens kun je door &lt;code&gt;lightbox.linksom()&lt;/code&gt; een van die functies gebruiken.&lt;/p&gt;
  13210. &lt;p&gt;Overigens kunnen alle vier de functies bij het argument van de ouderfunctie: &lt;code&gt;element&lt;/code&gt;. In ons geval doen we daar even niets mee, maar het kan wel.&lt;/p&gt;
  13211. &lt;blockquote&gt;
  13212. &lt;p&gt;&amp;quot;Gentlemen, you can&#39;t fight in here! This is the War Room.&amp;quot;&lt;/p&gt;
  13213. &lt;/blockquote&gt;
  13214. &lt;p&gt;&lt;em&gt;Fijne feestdagen!&lt;/em&gt;&lt;/p&gt;
  13215. &lt;h2&gt;Over Arjan Eising&lt;/h2&gt;
  13216. &lt;p&gt;/2011/12/arjan-eising.jpg
  13217. Front-end developer bij &lt;a href=&quot;http://www.springest.nl/&quot;&gt;Springest&lt;/a&gt;. Bestuurslid en bijeenkomstenorganisator bij Fronteers. Kijkt te veel films.&lt;/p&gt;
  13218. &lt;p&gt;Donatie: Fonds Psychische Gezondheid
  13219. &lt;a href=&quot;http://www.psychischegezondheid.nl/&quot;&gt;Fonds Psychische Gezondheid&lt;/a&gt; zorgt voor onderzoek om de zorg voor mensen met psychische klachten te verbeteren, alsmede voorlichting voor patiënten en betrokkenen.&lt;/p&gt;
  13220. </content>
  13221.  </entry>
  13222.  <entry>
  13223.    <title>Content management door de ogen van een vrolijke front-end fröbelaar</title>
  13224.    <link href="https://www.fronteers.nl/nl/blog/2011/12/door-een-frobelaar"/>
  13225.    <updated>2011-12-24T00:00:00Z</updated>
  13226.    <id>https://www.fronteers.nl/nl/blog/2011/12/door-een-frobelaar</id>
  13227.    <content xml:lang="nl" type="html">&lt;p&gt;&amp;quot;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/het-platform-bouwen&quot; title=&quot;Het platform bouwen&quot;&gt;Dat kan beter.&lt;/a&gt;&amp;quot; Zo dacht ik in 2004 ook toen ik het zoveelste op maat gemaakte BeheerDing in elkaar geknutseld had en ontevreden was met het resultaat.&lt;/p&gt;
  13228. &lt;p&gt;Na het klooien met een Enterprise Content Management System (Magnolia 2.0) tijdens een stage begin 2005 en het klagen over de markup die mijn toenmalige blog (WordPress 1.5) uitkakte, had ik het door: &amp;quot;Dit moet beter.&amp;quot; Niet omdat het Web het nodig had, niet omdat &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/clients-from-heaven&quot; title=&quot;Clients from heaven&quot;&gt;klanten&lt;/a&gt; er om vroegen en niet omdat ik een gat in de markt zag, maar gewoon omdat ik het nodig vond. Ik was klaar met steeds opnieuw het wiel uitvinden en uitvinden dat ik aan het eind van de rit eigenlijk maar een klein rondje gemaakt had. Ik had een missie: het bouwen van een CMS dat ik steeds opnieuw weer in kon zetten en dat toch met me mee kon &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/patronen-voor-de-groei&quot; title=&quot;Patronen voor de groei&quot;&gt;groeien&lt;/a&gt; door de jaren heen. En iets wat perfect ingesprongen HTML uitspuwde natuurlijk, als ik dan toch bezig was. Wat volgt, is een vrij samengeraapt en toch onsamenhangend verhaal over mijn zoektocht naar het ideaal dat ik voor ogen had, en nog steeds heb, gecombineerd met de afsluiting van een in mijn ogen &lt;a href=&quot;https://www.fronteers.nl/blog/2011/11/adventskalender&quot; title=&quot;Adventskalender 2011&quot;&gt;geslaagd idee van Arjan&lt;/a&gt;.&lt;/p&gt;
  13229. &lt;p&gt;Het allereerste probleem bij een CMS is natuurlijk de vraag: wat is content? Volgens Van Dale heeft het iets te maken met tevredenheid, maar als je eens rondvraagt bij een willekeurig aantal inhoudsbestuurders om je heen, merk je dat het eigenlijk niet echt heel leuk werk is, dat content managen. Vreemd, als je bedenkt dat &lt;a href=&quot;http://www.amazon.com/Content-Management-Bible-Bob-Boiko/dp/0764573713/&quot; title=&quot;http://www.amazon.com/Content-Management-Bible-Bob-Boiko/dp/0764573713/&quot;&gt;de bijbel voor content management&lt;/a&gt; qua diepgang en dikte &lt;a href=&quot;http://www.amazon.com/Lord-Rings-J-R-R-Tolkien/dp/0618260587&quot; title=&quot;The Lord of the Rings&quot;&gt;de bijbel voor ringheren&lt;/a&gt; benadert. Vanzelfsprekend, als je bedenkt dat een groot deel (van dat eerste boek) over &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/waarom-standaarden-essentieel-zijn&quot; title=&quot;Waarom standaarden essentieel zijn&quot;&gt;XML&lt;/a&gt; gaat. En verontrustend, als je bedenkt dat &lt;a href=&quot;http://www.amazon.com/XML-Bible-Elliotte-Rusty-Harold/dp/0764549863/&quot; title=&quot;XML 1.1 Bible&quot;&gt;de bijbel voor validatienazi&#39;s&lt;/a&gt; eenzelfde hoeveelheid pagina&#39;s telt. Ruim drieduizend bladzijden, waarvan slechts 33% &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/dr-strangescope&quot; title=&quot;Dr. Strangescope or: How I Learned to Stop Worrying and Love the Closure&quot;&gt;filmmateriaal&lt;/a&gt; bleek. Nee, al vrij snel wordt duidelijk dat je, met oog op het verlangen naar een vrolijkheidsfactor, de beerput die content heet fijn dicht moet laten.&lt;/p&gt;
  13230. &lt;p class=&quot;note&quot;&gt;
  13231. Overigens heeft de werkversie van het laatste deel van The Lord of the Rings een tijdje &#39;Return of the Content 1.0&#39; geheten, maar is in de jaren daarna door een werkgroep voor een andere naam gekozen; &#39;The Return of the King&#39;, afgekort tot LOTR5. Tegenwoordig spreekt men gewoon van &#39;The Living Hobbit&#39;, omdat in de praktijk blijkt dat deze hele ringzoekexercitie maar om één persoon gaat. Afijn, naast op het grote doek zien we deze geschiedenis in ons vege en vage vakgebied vandaag de dag mooi samengevat terug als het welbekende &#39;Content is King&#39;. Als je je dus afvroeg waar dat vandaan kwam; je las het hier voor het eerst.
  13232. &lt;/p&gt;
  13233. &lt;p&gt;Iedere stinkende hoop kan een hoop lekkerder gemaakt worden door het te prefixen met &#39;Web&#39;. Developers zijn doorgaans door wereldvreemdheid opvallende mensen, maar zodra je er Web voor zet, zijn ze opeens mondig (kijk naar de rellen rondom &lt;a href=&quot;http://24ways.org/&quot;&gt;24 ways&lt;/a&gt; op Twitter de afgelopen weken). Zet daar nog eens &lt;a href=&quot;https://www.fronteers.nl/&quot;&gt;Front-end&lt;/a&gt; voor en je hebt een heel &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/waarom-een-slicer-een-front-end-developer-is-geworden&quot; title=&quot;Waarom een slicer een front-end developer is geworden&quot;&gt;nieuw vakgebied&lt;/a&gt; gecreëerd (met succes overigens, &lt;em&gt;hulde aan alle vrijwilligers&lt;/em&gt; die hier aan hebben meegeholpen!). Ooit gehoord van &lt;a href=&quot;http://nl.wikipedia.org/wiki/Cd-video&quot;&gt;Cd-video&lt;/a&gt;? Maak er &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/html5-video-een-overzicht&quot;&gt;Web-video&lt;/a&gt; van en je hebt &lt;a href=&quot;http://youtube-global.blogspot.com/2011/12/what-were-we-watching-this-year-lets.html&quot; title=&quot;In total, there were more than 1,000,000,000,000 playbacks on YouTube this year.&quot;&gt;een hit&lt;/a&gt;. Met &lt;a href=&quot;http://www.mturk.com/&quot; title=&quot;Mechanical Turk&quot;&gt;sommige workers&lt;/a&gt; communiceer je helemaal niet, terwijl je met &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html&quot;&gt;Web workers&lt;/a&gt; wel &lt;em&gt;moet&lt;/em&gt; praten. Zelfs bij het &lt;em&gt;Semantic Web&lt;/em&gt; werkt dit fixeren op een pre: Web 3.0 is &lt;em&gt;zoveel&lt;/em&gt; sexyer… Hmm, nee, inderdaad, bij deze strontvlieg gaat die vlieger niet op, naar mijn idee. Een mening die niet uit de lucht gegrepen is trouwens; wij HTML&#39;ers snappen gewoon niet wat &lt;em&gt;hidden metadata&lt;/em&gt; is, wat je er mee moet, en hoe je het behapbaar moet houden. Google &lt;a href=&quot;http://support.google.com/webmasters/bin/answer.py?hl=en&amp;amp;answer=146898&quot; title=&quot;In general, Google won&#39;t display content that is not visible to the user.&quot;&gt;heeft dit voor een groot deel door&lt;/a&gt;, anderen [hebben andere dingen door](http://tech.burningbird.net/article/w3c-html-wg-decisions-hidden-longdesc-table-summary-and-myth-hidden-metadata &amp;quot;There is no &amp;quot;hidden&amp;quot; metadata—all the data in the web page is &amp;quot;visible&amp;quot; to some audience.&amp;quot;). Wellicht dat een Web Semantics 5 specificatie dit probleem ooit op gaat lossen. Of misschien lost het zichzelf wel op, zoals een &lt;em&gt;acidic&lt;/em&gt; reactie op een post (die hieronder overigens gewoon welkom zijn).&lt;/p&gt;
  13234. &lt;p&gt;De term content beperken tot het Web lijkt dus een keuze die leidt tot &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/het-is-al-goud-wiens-cursor-blinkt&quot; title=&quot;Het is al goud wiens cursor blinkt&quot;&gt;goud en bling-bling&lt;/a&gt;. Zelfs &lt;a href=&quot;http://en.wikipedia.org/wiki/Web_content&quot; title=&quot;Web content&quot;&gt;Wikipedia&lt;/a&gt; heeft hier een pagina over, dus dan is het waar—een &lt;a href=&quot;http://nl.wikipedia.org/wiki/Drogreden&quot; title=&quot;Drogreden&quot;&gt;gedrochtreden&lt;/a&gt;, ik weet het. Maar om het nog simpeler te maken: met Web content bedoel &lt;em&gt;ik&lt;/em&gt; tastbare &#39;dingen&#39; op een website, &lt;a href=&quot;http://nl.wikipedia.org/wiki/Tautologie_%28stijlfiguur%29&quot; title=&quot;Tenenkrommende tautologie is tenenkrommend!&quot;&gt;zoals bijvoorbeeld&lt;/a&gt; pagina&#39;s, nieuwsberichten, reacties, alinea&#39;s, tabellen, afbeeldingen, kaarten en video&#39;s. En dan heb ik het dus &lt;em&gt;niet&lt;/em&gt; over &lt;code&gt;onze-voorpagina-met-achtergrondinformatie.html&lt;/code&gt;, &lt;code&gt;Nieuws%20brief%20%28september%202011%29.doc&lt;/code&gt;, &lt;code&gt;&amp;lt;li&amp;gt;First! [LOL](http://ragefac.es/23)&amp;lt;/li&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;p&amp;gt;ee&amp;lt;p&amp;gt;ee&lt;/code&gt;, &lt;a href=&quot;http://www.hotdesign.com/seybold/&quot; title=&quot;Herinnert iemand zich deze nog?&quot;&gt;&lt;code&gt;&amp;lt;table&amp;gt;&amp;lt;tr&amp;gt;&amp;lt;td&amp;gt;&amp;lt;table&amp;gt;&lt;/code&gt;...&lt;/a&gt;, &lt;code&gt;&amp;lt;img src=&amp;quot;please-4.gif&amp;quot; alt=&amp;quot;Please forgive!&amp;quot;&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;iframe src=&amp;quot;http://maps.yahoo.com/embed#q=Amsterdam&amp;amp;amp;conf=1&amp;amp;amp;start=1&amp;amp;amp;lat=52.373089&amp;amp;amp;lon=4.8933&amp;amp;amp;zoom=12&amp;amp;amp;mvt=m&amp;amp;amp;trf=0&amp;amp;amp;tt=&amp;quot;&amp;gt;&amp;lt;/iframe&amp;gt;&lt;/code&gt; of &lt;code&gt;&amp;lt;embed type=&amp;quot;application/x-shockwave-flash&amp;quot; src=&amp;quot;https://www.youtube.com/v/XSGBVzeBUbk&amp;quot; width=&amp;quot;425&amp;quot; height=&amp;quot;350&amp;quot; pluginspage=&amp;quot;http://www.macromedia.com/go/getflashplayer&amp;quot;&amp;gt;&lt;/code&gt;. Dat is het idee dat wij nerds van content hebben, maar waar je verder (&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/acteurs-schilders-en-technici&quot; title=&quot;Acteurs, schilders en technici&quot;&gt;bijna&lt;/a&gt;) &lt;em&gt;niemand&lt;/em&gt; mee moet vermoeien. Die &lt;em&gt;implementatiedetails&lt;/em&gt; (de tagkoek die voor ons gesneden soep is) zijn niet wat die dingen uniek en bruikbaar maken. Over een jaar wil je misschien de achtergrondinformatie ook op een andere pagina gebruiken, nieuwsberichten of reacties in een feed terug laten komen, tabulaire data als &lt;a href=&quot;http://code.google.com/apis/chart/&quot; title=&quot;Google Chart Tools&quot;&gt;taartdiagram weergeven&lt;/a&gt;, &lt;a href=&quot;http://www.sitepoint.com/forums/showthread.php?428205-Frequently-Asked-Questions-about-HTML#q30&quot; title=&quot;So what is a good text equivalent for a given image? That depends on the context in which the image is used! It&#39;s not like there is a single &#39;perfect&#39; text equivalent for each image.&quot;&gt;bepaalde plaatjes voor iets anders gebruiken&lt;/a&gt;, overstappen naar Google Maps (omdat die fijn met &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/3d-graphics&quot; title=&quot;3D-graphics&quot;&gt;3D&lt;/a&gt; aan het pielen zijn), of in &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/een-tik-op-de-neus&quot; title=&quot;Een tik op de neus&quot;&gt;één tik&lt;/a&gt; de iPad ondersteunen. Sla de dingen dus zo klein en specifiek mogelijk op; je gaat hier later &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/javascript-pret-met-alle-karakters-in-een-string&quot; title=&quot;JavaScript-pret met alle karakters in een string&quot;&gt;pret mee hebben&lt;/a&gt;. Dit lijkt logisch, maar de eerste grote fout bij de meeste CMS&#39;en is dat ze content en HTML als hetzelfde ding zien.&lt;/p&gt;
  13235. &lt;p&gt;Het woord &#39;management&#39; &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/deferred-en-promise-in-jquery&quot; title=&quot;Deferred en promise in jQuery&quot;&gt;belooft&lt;/a&gt; niet veel goeds. Hierbij denk ik, vrijblijvende knutselaar die ik ben, aan &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/geharnast-javascript&quot; title=&quot;Geharnast JavaScript&quot;&gt;een keurslijf&lt;/a&gt;, regeltjes naleven en een pedante stropdas dragen. Hoe erg ik ook gruwel van die ideeën; als ik als HTML-freak graag wil dat mijn open- en sluit-tags inspringen als perfecte pendanten en niet de spuigaten uit spuiten qua &lt;a href=&quot;http://krijnhoetmer.nl/zooi/screenshots/out.png&quot; title=&quot;Markup die ik ooit terugkreeg van een back-end partij die mijn HTML had geïmplementeerd.&quot;&gt;hoeveelheid en nesteldrang&lt;/a&gt;, zal er ergens een bepaalde vorm van structuur geforceerd moeten worden. Een web developer is &lt;a href=&quot;http://vimeo.com/33650934&quot; title=&quot;Chris Heilmann | The prestige of being a web developer | Fronteers 2011&quot;&gt;geen magiër&lt;/a&gt; en je kunt maar tot op zekere hoogte bijsturen. Volgens mij ligt een groot deel van het beheersbaar maken, voor zowel de developer(s) als degene(n) die met het CMS moet(en) gaan werken, bij de basis.&lt;/p&gt;
  13236. &lt;p&gt;Je hebt vast wel eens te maken gehad met een gammele WYSIWYG-editor, die een hoop details wegpoetst en een website zogenaamd beheersbaar maakt. Het lijkt aan de oppervlakte een perfect concept en het verkoopt makkelijk. De structuur die wij kennen (HTML) wordt vertaald naar een structuur die de gebruiker kent (een visuele representatie van die HTML), en andersom. Voordat we ook maar een front-end hebben waar we trots op kunnen zijn, is er dus al een vertaalslag geweest. En met een beetje ongeluk zit je je in allerlei bochten te wringen om twee compleet verschillende omgevingen (de publieke website én het CMS) van misschien wel dezelfde CSS te voorzien. Respect voor iedereen die daar overdag mee bezig is!&lt;/p&gt;
  13237. &lt;p class=&quot;note&quot;&gt;
  13238. Met WYSIWYG-editor hierboven bedoel ik trouwens een HTML-editor. Een editor als [Xopus](http://xopus.com/) is wat mij betreft iets totaal anders, aangezien die tot op het laagste niveau iets van de structuur weet, en dus de echte content beheert. Helaas zijn er maar weinig [goden](http://q42.nl/ &quot;Q42, maar ik bedoel natuurlijk ook de mensen van Silk.&quot;) op de wereld, moeten de meeste baksels het gewoon met HTML doen en gaat er nog steeds een hoop fout.
  13239. &lt;/p&gt;
  13240. &lt;p&gt;Tuurlijk, er zijn tegenwoordig perfecte editors die schone HTML teruggeven, maar ik heb ooit voor het meeste simpele model gekozen, waar ik geen spijt van heb. Een WYSIWYG-editor is niet eens mogelijk, aangezien bij de content &lt;em&gt;geen&lt;/em&gt; HTML wordt opgeslagen en het CMS niet weet hoe bepaalde &lt;em&gt;dingen&lt;/em&gt; verrijkt worden. Het uitleggen van deze kluif aan klanten lijkt misschien een grote, maar in de praktijk blijkt dit één van de makkelijkste punten te zijn. Het belang van een WYSIWYG-editor wordt volgens mij enorm overschat, terwijl het één van de grootste pijnpunten voor vrolijke front-enders is. Ik hoop dat &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/klaar-voor-de-mobiele-tsunami&quot; title=&quot;Klaar voor de mobiele tsunami&quot;&gt;de mobiele tsunami&lt;/a&gt; en misschien de &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/webrichtlijnen-2-de-nieuwe-standaard&quot; title=&quot;Webrichtlijnen 2: de nieuwe standaard&quot;&gt;nieuwe Webrichtlijnen&lt;/a&gt; dit de komende jaren duidelijk gaan maken, maar we moeten &lt;a href=&quot;http://vimeo.com/27182344&quot; title=&quot;Bryan Rieger | Muddling Through the Mobile Web | Mobilism 2011&quot;&gt;loslaten en met betere oplossingen komen&lt;/a&gt;. Het beheersbaar maken van &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/responsive-images-een-experiment&quot; title=&quot;Responsive images; een experiment&quot;&gt;verschillende formaten afbeeldingen&lt;/a&gt; op dezelfde pagina is een goed voorbeeld dat het WYSIWYG-probleem meteen al op de proef gaat stellen.&lt;/p&gt;
  13241. &lt;p&gt;Eén van de grote voordelen van het hebben van aparte stukjes inhoud, is dat je per inhoudstype een specifieke &lt;em&gt;user interface&lt;/em&gt; kunt aanbieden. Wat je inlevert aan What You See Is What You Get, krijg je ruimschoots terug bij What You Want Is What You&#39;ll Get. Een &lt;a href=&quot;http://www.bvalmere.nl/nieuws/2011/12/speelweek-11&quot;&gt;lijst met uitslagen&lt;/a&gt;? Gewoon een begin- en einddatum vragen. Een &lt;a href=&quot;http://www.bvalmere.nl/team-1/2011-2012&quot;&gt;speelschema voor een team&lt;/a&gt;? Een seizoen, afdeling en team vragen. Een &lt;a href=&quot;https://www.fronteers.nl/congres/2011/venue&quot;&gt;Google Map&lt;/a&gt;? Een adres, zoals je die ook invoert op &lt;a href=&quot;http://maps.google.nl/&quot;&gt;maps.google.nl&lt;/a&gt;. Het beheren van dit soort content kan niet veel makkelijker voor de gebruiker. En het later aankleden van die content ligt helemaal in handen van de front-end developer, die zo door de jaren heen met &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/kijk-mama-zonder-afbeeldingen-grafische-elementen-maken-met-css&quot; title=&quot;Kijk mama, zonder afbeeldingen! Grafische elementen maken met CSS&quot;&gt;steeds minder markup&lt;/a&gt; uit de voeten kan. Voor beide partijen is &#39;managen&#39; opeens een leuk woord geworden.&lt;/p&gt;
  13242. &lt;p class=&quot;note&quot;&gt;
  13243. Natuurlijk zijn er ook andere voorbeelden te bedenken, die lastiger zijn. Complexe tabellen onderhouden is nog steeds een ramp, niet alleen in een online editor, maar eigenlijk ook in Excel. Aan de andere kant kun je stellen dat als een tabel te complex is om te onderhouden, deze waarschijnlijk ook te complex is om aan de voorkant te begrijpen. [Dezelfde uitleg](http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2008-March/014245.html &quot;[whatwg] several messages about tables and related subjects&quot;) wordt ook gegeven als de discussie over het via extra markup (`headers=&quot;&quot;`, `scope=&quot;&quot;`, `summary=&quot;&quot;`, etc.) toegankelijk maken van tabellen weer eens oplaait binnen de HTML Working Group. De informatie opsplitsen lijkt dus sowieso geen gek idee, en ik steek mijn tijd liever in het maken van een begrijpelijke front-end, dan in het maken van de perfecte tabel-editor.
  13244. &lt;/p&gt;
  13245. &lt;p&gt;De vertaling naar ons favoriete formaat (HTML, voor de duidelijkheid) is makkelijk; ieder type content krijgt van de server een stukje logica mee wat &#39;m in een kaal jasje steekt. Alle &lt;em&gt;alinea&#39;s&lt;/em&gt; krijgen een &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt;- en &lt;code&gt;&amp;lt;/p&amp;gt;&lt;/code&gt;-paartje. Iedere &lt;em&gt;lijst&lt;/em&gt; wordt verpakt in een &lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt; en iedere regel van die lijst krijgt een &lt;code&gt;&amp;lt;li&amp;gt;&lt;/code&gt;-omhulsel voor z&#39;n kiezen. Een &lt;em&gt;notitie&lt;/em&gt; krijgt een &lt;code&gt;&amp;lt;p class=&amp;quot;note&amp;quot;&amp;gt;&lt;/code&gt;, een blok code krijgt &lt;code&gt;&amp;lt;pre&amp;gt;&amp;lt;code&amp;gt;…&amp;lt;/code&amp;gt;&amp;lt;/pre&amp;gt;&lt;/code&gt;, enz. Grootste voordeel hiervan: dit maakt de belofte &lt;a href=&quot;http://www.csszengarden.com/&quot; title=&quot;css Zen Garden: The Beauty in CSS Design&quot;&gt;die CSS ooit maakte&lt;/a&gt; beter mogelijk. Bij een redesign van een site kun je bepaalde inhoud net even wat andere HTML &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/front-end-meta-languages&quot; title=&quot;Front-end meta languages&quot;&gt;laten genereren&lt;/a&gt;. En dat is nodig, want HTML en CSS zijn &lt;em&gt;niet&lt;/em&gt; los van elkaar te zien, ondanks dat we onszelf continu voorhouden dat dit wel zo is. &amp;quot;Ja, maar, heiden! Als ik m&#39;n stylesheet weggooi in Firebug, kan ik nog steeds een duidelijke structuur zien. En dat is omdat ik semantische HTML gebruik. You suck.&amp;quot; Nee, dat is omdat je browser dan eindelijk &#39;ns &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints&quot; title=&quot;The CSS user agent style sheet and presentational hints&quot;&gt;haar eigen schitterende stylesheet&lt;/a&gt; mag laten zien.&lt;/p&gt;
  13246. &lt;p class=&quot;note&quot;&gt;
  13247. Ja, ik heb wel eens van XSLT gehoord. En nee, ik ken het niet goed genoeg om het een fijne techniek te vinden. Van de extra complexiteit die deze laag introduceert, blijf ik zo ver mogelijk vandaan. Vooral omdat ik met XML en XSLT geen enkel probleem oplos, maar alleen maar voor buzzword compliance zou gaan. In de korte tijd die we hebben op deze aardkloot wil ik de dingen zo simpel mogelijk houden. Daarnaast, stel dat we ooit Hixie op [ons congres](/congres &quot;Fronteers Conference&quot;) krijgen, dan wil ik hem zonder schaamte aan kunnen kijken.
  13248. &lt;/p&gt;
  13249. &lt;p&gt;Om al die kleine vertaalblokjes overzichtelijk te houden, heb ik ooit gekozen om mijn CMS op één server te laten draaien, met een gedeelde codebase voor al mijn klanten. Aangezien elk van de ongeveer 100 sites die er nu op draaien het concept &#39;Alinea&#39; implementeert, is het logisch om de drie regels code die een &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt; genereert te delen. En vindt een [bepaalde klant](http://37signals.com/svn/archives/001053.php &amp;quot;&amp;quot;Hire&amp;quot; the right clients&amp;quot;) het nodig om &lt;a href=&quot;http://enterprise-html.com/&quot; title=&quot;Enterprise HTML - Provides proven high performance, enterprise-level and scalable HTML tips and best practices.&quot;&gt;zich groter voor te doen&lt;/a&gt; dan &#39;ie is, dan is het mogelijk om specifiek voor diegene een nieuwe vertaling te maken, die voor &lt;code&gt;&amp;lt;div class=&amp;quot;paragraph&amp;quot;&amp;gt;&lt;/code&gt; zorgt ;) Zonder flauwekul: ook deze keuze heeft me veel vrolijkheid opgeleverd, naast het feit dat het lekker &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/scalable-vector-graphics-en-responsive-web&quot; title=&quot;Scalable Vector Graphics en responsive web&quot;&gt;schaalt&lt;/a&gt;. Ja, je kunt waarschijnlijk meer geld verdienen door klanten een SLA aan te smeren en de zoveelste security update tegen betaling door hun strot te duwen. Genoeg Joomla-boeren die hier hun brood mee verdienen. Niets mis mee natuurlijk, maar ik doe er niet aan mee. Niet omdat ik denk dat Vespasianus gelijk had toen &#39;ie tijdens het zeiken een goed idee kreeg, maar omdat ik niet Caligula achterna wil qua krankzinnigheid; ik wil leuk werk doen. Wat dat betreft zijn wij developers wel magiërs; we &lt;em&gt;kunnen&lt;/em&gt; ons eigen werk beïnvloeden.&lt;/p&gt;
  13250. &lt;p&gt;Los van de kleine blokjes content waar wij tags voor kennen, zijn er ook grotere concepten, zoals pagina&#39;s, secties, nieuwsberichten en producten. Deze moeten ook allemaal zonder moeite uitgelegd kunnen worden aan iemand, dus het is het handigst om zo dicht mogelijk bij het tastbare ding te blijven en zoveel mogelijk structuur af te dwingen. Zo hangt een pagina bij mij altijd onder een andere pagina, en komt deze altijd voor of na een andere pagina. Een regel die het makkelijk maakt om menu&#39;s te genereren en &lt;a href=&quot;http://css-tricks.com/guidelines-for-uri-design/&quot; title=&quot;Guidelines for URI Design&quot;&gt;URLs netjes leesbaar en gestructureerd&lt;/a&gt; te houden. Bij nieuwsberichten is er bijvoorbeeld altijd een auteur en datum, bij producten altijd een naam en prijs. Probeer per concept een stramien te bedenken waarin je net genoeg vrijheid biedt en al het andere dichttimmert. En hou daarbij rekening met het veranderlijke karakter van het web; er gaat &lt;em&gt;sowieso&lt;/em&gt; ooit nog wat overhoop gehaald worden. Paginastructuren worden omgegooid, producten krijgen nieuwe eigenschappen, etc. Een CMS dat hier niet &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/learn-you-a-flexbox-for-great-good&quot; title=&quot;Learn you a Flexbox for Great Good!&quot;&gt;flexibel&lt;/a&gt; op kan inspelen, is niet gemaakt voor het Web. Iets wat niet betekent dat een CMS &lt;a href=&quot;http://nl.wikipedia.org/wiki/Paretoprincipe&quot; title=&quot;Paretoprincipe&quot;&gt;alles&lt;/a&gt; moet kunnen.&lt;/p&gt;
  13251. &lt;p class=&quot;note&quot;&gt;
  13252. Een belangrijk deel van veel CMS&#39;en is workflow management en gebruikersrechten. Ik ben zelf van mening dat deze vooral in het leven zijn geroepen om bepaalde mensen zich niet verantwoordelijk te hoeven laten voelen voor het werk dat ze doen, of om een organisatie een gevoel van veiligheid te geven. Ik hoop de komende jaren wat milder te worden, maar voorlopig zit het er niet in. Ook hier geldt voor mij de complexiteit die het oplevert, maar ook het vertrouwen in het goede van de mens. Geef iemand de controle over iets en de kans is vrij groot dat diegene zijn of haar best daar ook voor gaat doen. In de afgelopen maand hebben een paar schrijvers bijvoorbeeld gevraagd of ze toegang mochten krijgen tot het CMS achter deze site, zodat ze zelf nog hun post konden aanpassen, wat perfect werkt.
  13253. &lt;/p&gt;
  13254. &lt;p&gt;Een hoop ontwikkelaars zijn nog steeds &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/welkom-op-het-audiologische-internet&quot; title=&quot;Welkom op het Audiologische Internet&quot;&gt;gillend&lt;/a&gt; op zoek naar het ideale CMS, en een hoop CMS&#39;en proberen alles te doen, tot aan &lt;a href=&quot;http://cms.com.au/&quot; title=&quot;Coffee Machines Services&quot;&gt;koffie&lt;/a&gt; zetten toe. &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/closure-tools&quot; title=&quot;Closure Tools&quot;&gt;Volgens mij&lt;/a&gt; bestaat die combinatie niet, en moeten we ons gaan beperken tot plezier hebben in het werk dat we doen. Ik weet dat ik met mijn geknutsel nooit de grote massa ga bereiken (&lt;a href=&quot;http://gall.qontent.nl/&quot;&gt;een&lt;/a&gt; &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/prototype-in-javascript&quot; title=&quot;Prototype in JavaScript&quot;&gt;prototype&lt;/a&gt; daargelaten), maar ik weet ook dat ik het heerlijk vind om te neuzelen in de marge die HTML-indenting heet. De realiteit is toch dat alles wat we online doen over een paar jaar weer compleet vernieuwd wordt.&lt;/p&gt;
  13255. &lt;p&gt;Het enige nadeel van werken op het Web? Het kan &lt;em&gt;altijd&lt;/em&gt; beter. En dat is ook meteen het voordeel.&lt;/p&gt;
  13256. &lt;p&gt;Aan iedereen die deze maand heeft meegelezen: bedankt voor je overlevend overlezend vermogen. Beleef de komende dagen feestelijk en het nieuwe jaar vooral gelukkig!&lt;/p&gt;
  13257. &lt;h2&gt;Over Krijn Hoetmer&lt;/h2&gt;
  13258. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/krijn-hoetmer.jpg&quot; alt=&quot;Foto van krijn hoetmer uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  13259. Krijgt door dit soort stukjes _alweer_ zin om [kronkels.net](http://kronkels.net/) nieuw leven in te blazen, maar gaat er waarschijnlijk niet aan toekomen door tijdgebrek. Iets wat in 2012 gaat veranderen.
  13260. &lt;p&gt;Donatie: Wikipedia
  13261. Omdat deze site het bewijs is dat je nooit uitgeleerd kunt zijn.&lt;/p&gt;
  13262. </content>
  13263.  </entry>
  13264.  <entry>
  13265.    <title>Closure Tools</title>
  13266.    <link href="https://www.fronteers.nl/nl/blog/2011/12/closure-tools"/>
  13267.    <updated>2011-12-23T00:00:00Z</updated>
  13268.    <id>https://www.fronteers.nl/nl/blog/2011/12/closure-tools</id>
  13269.    <content xml:lang="nl" type="html">&lt;p&gt;Misschien heb je er van gehoord, misschien ook niet, maar Google zelf is er in ieder geval trots op. Het is de onderliggende (client-side) kracht van Gmail, Google Docs, Google Maps en het meest recente Google Plus! Closure Tools zijn een set tools bedoeld om client-side ontwikkeling wat te vergemakkelijken danwel te professionaliseren.&lt;/p&gt;
  13270. &lt;p&gt;Voordat we inhoudelijk beginnen, een kleine disclaimer: het gebruik van deze tools is voor kleine tot medium websites overkill. Verwacht niet een drop-in replacement voor je website thuis die in elkaar gezet is met jQuery en/of waarbij al je JavaScript source minified is met de YUI minifier. Aan deze toolset zit een noemenswaardige leercurve en tijd die benodigd is voor het opzetten van deze tools voor een project ligt wat hoger vergeleken met andere tools / libraries. Dat gezegd, je krijgt er ook wel wat voor terug ;)&lt;/p&gt;
  13271. &lt;h2&gt;De Tools&lt;/h2&gt;
  13272. &lt;p&gt;Je zult je wellicht al afgevraagd hebben; waar bestaat deze toolset dan uit? Dat zijn de volgende tools:&lt;/p&gt;
  13273. &lt;ul&gt;
  13274. &lt;li&gt;&lt;em&gt;Closure Compiler&lt;/em&gt;: Een JavaScript to JavaScript compiler (géén minifier!) waar een hoop optimizes in worden gedaan, zoals dead-code elimination, code inlining en chaining, maar waar ook een aantal handige features in zitten, zoals module-splitting en compile-time constants.&lt;/li&gt;
  13275. &lt;li&gt;&lt;em&gt;Closure Library&lt;/em&gt;: Geïnspireerd door Dojo, een volledige library met browser-abstraction en een heleboel widgets. Wat deze library eigenlijk nog wel het meest uniek maakt, is het geïmplementeerde event model wat zeker in JavaScript driven web applications zeer nuttig gebruikt kan worden.&lt;/li&gt;
  13276. &lt;li&gt;&lt;em&gt;Closure Templates&lt;/em&gt;: Templates die zowel server- als client-side kunnen worden gebruikt. De meest relevante keywords zijn: client-side performance, localisation, language-neutral en secure.&lt;/li&gt;
  13277. &lt;li&gt;&lt;em&gt;Closure Stylesheets&lt;/em&gt;: Deze zijn niet door Google zelf gereleased, maar door een ex-Google medewerker gemaakt als aanvulling op de bestaande toolset waarin o.a. CSS constanten en CSS-class renaming worden geïmplementeerd.&lt;/li&gt;
  13278. &lt;/ul&gt;
  13279. &lt;p&gt;Elke tool is een op zichzelf staand project en ook zo te gebruiken, maar dat is eigenlijk niet aan te raden. De kracht zit hem juist in hoe deze tools samenwerken. De Library is bijvoorbeeld geweldig, maar gewoon veel te groot om op te nemen in je website als je de Compiler niet gebruikt. Andersom geldt ook, de Compiler is geweldig, maar je behaalt niet de volledige potentie als de code die je compiled niet volledig voor de compiler is gedocumenteerd. Zodoende raad ik je dan ook altijd aan op z’n minst de Library en de Compiler gecombineerd te gebruiken. De introductie tot de Closure Tools zal in deze post beperkt blijven tot de Compiler en de Library.&lt;/p&gt;
  13280. &lt;h2&gt;Closure Compiler&lt;/h2&gt;
  13281. &lt;p&gt;Voor de meeste van jullie zal dit eigenlijk het meest interessante onderwerp zijn. Voordat we dieper ingaan op de Compiler, een kleine achtergrond. De Compiler ondersteunt meerdere niveaus van ‘Compiling’. Er is een Simple mode, die wat meer in de buurt komt van een minifier en er is een Advanded mode, die alle features van de Compiler volledig benut. In dit artikel zal ik te allen tijde uitgaan van de Advanced mode.&lt;/p&gt;
  13282. &lt;p&gt;Wanneer je JavaScript gaat compilen wordt ervan uitgegaan dat je in een closed environment zit. Met andere woorden, alle JavaScript die er bestaat voor jouw project, zit binnen het bereik van de compiler. Als uitzondering is er wel een mogelijkheid om ‘externals’ te definiëren waarmee aangegeven kan worden welke JavaScript-functies en/of variabelen bestaan buiten de compiler. Omdat de compiler letterlijk kennis heeft van alle JavaScript kan deze zeer rigoureus te werk gaan. Een klein voorbeeld:&lt;/p&gt;
  13283. &lt;pre&gt;&lt;code&gt;function a() { return &#39;Hello&#39;; }
  13284. function b() { return &#39;World&#39;; }
  13285. alert(a() + &#39; &#39; + b());
  13286. &lt;/code&gt;&lt;/pre&gt;
  13287. &lt;p&gt;Als je dit leest, zou je je kunnen afvragen, worden de functies ‘a’ en ‘b’ nog ergens anders gebruikt? Zo nee, dan zijn deze functies zelf namelijk behoorlijk overbodig. De compiler denkt hier exact hetzelfde over, juist omdat de compiler kennis heeft van de gehele omgeving maakt de compiler van dit voorbeeldje het volgende:&lt;/p&gt;
  13288. &lt;pre&gt;&lt;code&gt;alert(&amp;quot;Hello World&amp;quot;);
  13289. &lt;/code&gt;&lt;/pre&gt;
  13290. &lt;p&gt;Probeer dit voorbeeldje zelf maar eens (vergeet niet Advanded mode aan te zetten): &lt;a href=&quot;http://closure-compiler.appspot.com/home&quot;&gt;http://closure-compiler.appspot.com/home&lt;/a&gt;&lt;/p&gt;
  13291. &lt;h2&gt;Annotations voor de Compiler&lt;/h2&gt;
  13292. &lt;p&gt;Zoals duidelijk mag zijn, kan de compiler best handig zijn. Om te zorgen dat jouw code zo goed mogelijk door de compiler kan worden geparsed dien je je code te voorzien van JSDoc. Met behulp van de juiste documentatie kan je er namelijk voor zorgen dat er bijvoorbeeld een OO-model wordt verplicht in je code. De compiler zal ervoor zorgen dat alle code dat een private member van je class probeert te benaderen een compiler warning zal geven.&lt;/p&gt;
  13293. &lt;p&gt;Een andere mooie feature is het annotaten van constanten. Door met constanten te werken kan je heel mooi specifieke JavaScript-builds maken voor specifieke scenario’s. Het beste voorbeeld hiervan is eigenlijk hoe de Closure Library constanten gebruikt. In de Library zijn namelijk constanten gedefinieerd voor browser detection. Stel je target alleen maar Chrome en Firefox voor je applicatie, dan kan je een aantal constanten overriden door wat extra opties mee te geven aan de Compiler. Doordat alle code met constanten werkt, kan de compiler met zijn dead-code elimination alle IE related code strippen in jouw build. Dat scheelt aardig wat ruimte.&lt;/p&gt;
  13294. &lt;p&gt;De laatste grove categorie van annotations is type hinting. JavaScript is geen type-safe language. Dit is aan de ene kant handig, omdat je heel flexibel kan zijn, maar daartegen soms ook wat frustrerend. Er zijn genoeg momenten als programmeur waar je gewoon wilt weten wat je binnen krijgt. De compiler lost dit op door je de mogelijkheid te geven om in je JSDoc het type van je variabelen of parameters te declareren. De compiler zorgt ervoor dat je daadwerkelijk alleen deze types binnenkrijgt. Is dit niet het geval, zal er weer een compiler warning worden gegooid. Een overzichtje van alle annotations kan je terugvinden op: &lt;a href=&quot;http://code.google.com/intl/nl-NL/closure/compiler/docs/js-for-compiler.html&quot;&gt;http://code.google.com/intl/nl-NL/closure/compiler/docs/js-for-compiler.html&lt;/a&gt;&lt;/p&gt;
  13295. &lt;h2&gt;Closure Library&lt;/h2&gt;
  13296. &lt;p&gt;De Closure Library is wellicht het meest wennen voor verfijnd jQuery-gebruikers, danwel alle andere ontwikkelaars die gebruik maken van JavaScript libraries waar alles voor je wordt geregeld op de achtergrond. De syntax van deze library is een stuk meer verbose dan de meesten van jullie gewend zullen zijn. Persoonlijk vind ik dit een groot voordeel. De meeste code die je zult schrijven is een stuk begrijpbaarder dan code die jQuery gebruikt waarbij 20 calls aan elkaar zijn gechained. Bovendien wordt overhead veroorzaakt door bestandsgrootte tenietgedaan door het gebruik van de compiler.&lt;/p&gt;
  13297. &lt;p&gt;Wat belangrijker is, is hoe uitgebreid deze library is. Het is voorzien van vele UI widgets, het kent de standaard CSS selectors, er zit een abstractie in voor client-side data storage (HTML5 session storage en IE userdata), er zit functionaliteit in voor encryptie, animaties, internationalisatie, formatting, client-side databases, Ajax calls, etc, etc.&lt;/p&gt;
  13298. &lt;p&gt;De meest interessante feature binnen deze library is eigenlijk de event handling. Zoals de meeste libraries zit er een abstractie in om browser events op een abstracte wijze af te vangen. Wat echter interessanter is, is dat deze abstractie meteen geldt voor JavaScript-objecten. De Closure Library heeft een interface blootgesteld die je kan extenden, waarmee je volledige events kan gooien vanuit je JavaScript-objecten. Om wat beter te illustreren hoe dit in elkaar zit eerst een korte introductie over hoe je naar browser events luistert met behulp van de Closure Library.&lt;/p&gt;
  13299. &lt;h2&gt;Browser events&lt;/h2&gt;
  13300. &lt;p&gt;Het luisteren naar browser events gebeurt met &lt;code&gt;goog.events.listen&lt;/code&gt;. De specificatie van deze functie is als volgt:&lt;/p&gt;
  13301. &lt;pre&gt;&lt;code&gt;/**
  13302.  * @param {EventTarget|goog.events.EventTarget} src
  13303.  * @param {string|Array.} type
  13304.  * @param {Function|Object} listener
  13305.  * @param {boolean=} opt_capt
  13306.  * @param {Object=} opt_handler
  13307.  */
  13308. goog.events.listen = function(src, type, listener, opt_capt, opt_handler);
  13309. &lt;/code&gt;&lt;/pre&gt;
  13310. &lt;p&gt;De namen van de argumenten spreken grotendeels voor zich. Een punt dat misschien opvalt, is dat de bron van het event (&lt;code&gt;src&lt;/code&gt;) niet alleen een standaard DOM EventTarget hoeft te zijn, maar ook een &lt;code&gt;goog.events.EventTarget&lt;/code&gt; mag zijn. Dit zorgt voor de eerder genoemde flexibiliteit en het gebruiken van dit event-systeem voor veel meer dan alleen events vanuit de DOM. Dit wordt verderop toegelicht.&lt;/p&gt;
  13311. &lt;p&gt;De &lt;code&gt;listener&lt;/code&gt; hoeft niet een functie te zijn, maar mag ook een willekeurig object zijn, als het maar de methode &lt;code&gt;handleEvent&lt;/code&gt; bevat, die het event afhandelt.&lt;/p&gt;
  13312. &lt;p&gt;De &lt;code&gt;opt_capt&lt;/code&gt; geeft (optioneel) aan of er capturing of bubbling moet worden toegepast. Closure zorgt ervoor dat capturing ook in oudere IE browsers toegepast kan worden.&lt;/p&gt;
  13313. &lt;p&gt;De &lt;code&gt;opt_handler&lt;/code&gt; methode (ook optioneel) is een mooie uitbreiding van het W3C-model, dat het mogelijk maakt om aan te geven waar het keyword &lt;code&gt;this&lt;/code&gt; naar verwijst in de functie die het event afhandelt.&lt;/p&gt;
  13314. &lt;h2&gt;Eigen EventTargets&lt;/h2&gt;
  13315. &lt;p&gt;Zoals eerder aangegeven, kan er dus geluisterd worden naar zowel browser-events als eigen JavaScript-events. Door simpelweg de interface &lt;code&gt;goog.events.EventTarget&lt;/code&gt; te extenden in een van je eigen classes, krijgt je JavaScript class events. Net zoals bij DOM events kan je hier nu listeners aan koppelen of verwijderen. Hoe dit nou volledig in elkaar zit, is meer een geval van &#39;een voorbeeld zegt meer dan een duizend woorden&#39;. Hierbij een klein voorbeeldje van een Twitter class die een event dispatched iedere keer als er nieuwe berichten zijn.&lt;/p&gt;
  13316. &lt;pre&gt;&lt;code&gt;goog.provide(&#39;example.Twitter&#39;);
  13317. goog.provide(&#39;example.Twitter.EventType&#39;);
  13318.  
  13319. goog.require(&#39;goog.events&#39;);
  13320. goog.require(&#39;goog.events.EventTarget&#39;);
  13321.  
  13322. /**
  13323.  * @constructor
  13324.  * @extends {goog.events.EventTarget}
  13325.  */
  13326. example.Twitter = function() {
  13327.  goog.events.EventTarget.call(this);
  13328. };
  13329. goog.inherits(example.Twitter, goog.events.EventTarget);
  13330.  
  13331. /**
  13332.  * Haalt nieuwe tweets op. Als die er zijn wordt een event gedispatched van het
  13333.  * type example.Twitter.EventType.NEW_TWEETS.
  13334.  */
  13335. example.Twitter.prototype.poll = function() {
  13336.  var messages = this.getNewMessages();
  13337.  if (messages.length) {
  13338.    this.dispatchEvent(example.Twitter.EventType.NEW_TWEETS);
  13339.  }
  13340. };
  13341.  
  13342. /** @enum {string} */
  13343. example.Twitter.EventType = {
  13344.  NEW_TWEETS: goog.events.getUniqueId(&#39;new_tweets&#39;)
  13345. };
  13346. &lt;/code&gt;&lt;/pre&gt;
  13347. &lt;p&gt;En uiteraard, een bijhorende listener:&lt;/p&gt;
  13348. &lt;pre&gt;&lt;code&gt;// twitter is van het type example.Twitter.
  13349. twitter.addEventListener(
  13350.  example.Twitter.EventType.NEW_TWEETS,
  13351.  function() {
  13352.    var twitter = /** @type {!example.Twitter} */ (e.target);
  13353.    var count = twitter.getUnreadCount();
  13354.    goog.dom.setTextContent(goog.dom.getElement(&#39;unread-count&#39;), count);
  13355.  }
  13356. );
  13357. &lt;/code&gt;&lt;/pre&gt;
  13358. &lt;h2&gt;Krachtige combinatie&lt;/h2&gt;
  13359. &lt;p&gt;Het blijft lastig om zo’n uitgebreide toolset in een keer te introduceren, maar zoals je wellicht al hebt gemerkt, zijn de mogelijkheden eindeloos. Mocht je in de nabije toekomst een project hebben waarbij flink wat JavaScript nodig is, duik dan snel wat dieper in deze toolset. Het is een hele opluchting om er mee te mogen werken. Iedereen die hiermee aan de slag wil, kan ik dan ook van harte het boek ‘Closure: The Definitive Guide’ aanraden.&lt;/p&gt;
  13360. &lt;h2&gt;Over Johan Schuyt&lt;/h2&gt;
  13361. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/johan-schuyt.jpg&quot; alt=&quot;Foto van johan schuyt uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  13362. Johan is werkzaam bij [TransIP](https://www.transip.nl/) waar hij zich voornamelijk bezighoudt met alle client-side ontwikkelingen. Ook zijn er veel blog posts van hem te vinden op op [blog.transip.nl](http://blog.transip.nl/). Van tijd tot tijd zal hij wat ventileren op zijn Twitter account [@johansglock](https://twitter.com/johansglock).
  13363. &lt;p&gt;Donatie: &lt;a href=&quot;http://www.redeenkind.nl/&quot;&gt;Red een kind&lt;/a&gt;
  13364. Kinderen zijn de toekomst, en verdienen een zorgeloos te kunnen opgroeien. Niks is meer belangrijk, vandaar dat ik graag Red een kind ondersteun.&lt;/p&gt;
  13365. </content>
  13366.  </entry>
  13367.  <entry>
  13368.    <title>Scalable Vector Graphics en responsive web</title>
  13369.    <link href="https://www.fronteers.nl/nl/blog/2011/12/scalable-vector-graphics-en-responsive-web"/>
  13370.    <updated>2011-12-22T00:00:00Z</updated>
  13371.    <id>https://www.fronteers.nl/nl/blog/2011/12/scalable-vector-graphics-en-responsive-web</id>
  13372.    <content xml:lang="nl" type="html">&lt;p&gt;Het blijft grappig om te zien hoe print en web verder van elkaar verwijderd zijn dan ooit tevoren. De evolutie van het web is op zijn minst spectaculair te noemen. Van fluid designs met animated gifs en flashy backgrounds langsheen de fixed dimension websites die langzamerhand aan het uitsterven zijn. Printdesign heeft altijd genoten van de vaste afmetingen die het gedrukte eindwerk met zich meebrengt en het gebrek aan interactieve elementen, terwijl webdesigners meegroeiden met de meest courante schermresolutie. Jarenlang was 960 pixels de vaste waarde, maar 1 apparaat zette deze wereld op zijn kop. De revolutie die de iPhone teweeg bracht in het mobiele weblandschap was nooit gezien en de kloof tussen web en print design werd voor de zoveelste keer groter. Toch hebben deze één gemeenschappelijk überformaat: &lt;em&gt;SVG&lt;/em&gt;.&lt;/p&gt;
  13373. &lt;p&gt;Toen SVG het levenslicht zag en uiteindelijk een W3 recommendation werd in september 2001 bleef het in de schaduw staan van de gigant Macromedia Flash. Doorheen de tijd groeide Flash verder uit, niet echt verwonderlijk aangezien het naast vector graphics ook kon worden gebruikt voor video, audio, animaties, et cetera. Flash bleef jaren koning éénoog in het land der blinden, want terwijl de browsers bleven strijden over universele formaten, HTML- en CSS-implementaties en codecs kon hun SWF-formaat aan de hand van een plugin op ieder platform doen waarvoor het bedoeld was. Opnieuw was het de iPhone die een einde maakte aan de opmars van Flash. Prompt werden de schijnwerpers gericht op de open webstandaarden die video en audio mogelijk maakten, animaties met behulp van JavaScript of zelfs via CSS3!&lt;/p&gt;
  13374. &lt;p&gt;Een nieuw tijdperk brak aan en de vaste waarden vervaagden, aangezien iedereen altijd en overal via eender welke mobiele telefoon, tablet, computer, televisie en spelconsole het wereldwijde web kon verkennen. Responsive web werd een buzzword, maar in tegenstelling tot Web 2.0 wel eentje met betekenis. Er werden boeken geschreven en presentaties gegeven over hoe we websites konden bouwen die zich aanpasten aan de screen estate en de mogelijk tragere verbinding van de bezoeker.&lt;/p&gt;
  13375. &lt;p&gt;Helaas wordt SVG vandaag de dag soms wel vernoemd, maar toch wordt er nog te weinig gebruik gemaakt van dit formaat. De mogelijkheden zijn gigantisch en kunnen in de hedendaagse responsive approach een aantal voordelen bieden aan ontwikkelaars.&lt;/p&gt;
  13376. &lt;h2&gt;Het is scalable&lt;/h2&gt;
  13377. &lt;p&gt;Laat dat nou net de aanpak van responsive zijn. Websites die meeschalen volgens de beschikbare resolutie. Meeste logo&#39;s en iconen zijn PNG of GIF images die dan meestal meermaals worden opgeslagen omdat ze in verschillende formaten nodig zijn. Waarom dan geen vectorformaat gebruiken die van nature uit haarscherp meeschaalt?&lt;/p&gt;
  13378. &lt;h2&gt;Het heeft een kleine bestandsgrootte&lt;/h2&gt;
  13379. &lt;p&gt;Aangezien SVG een tekstbestand is, blijft de bestandsgrootte redelijk beperkt in tegenstelling tot GIF- of PNG-varianten. Als we dan nog eens aparte images gebruiken voor mobile, tablet, desktop, etc. hebben we hier tegenover maar één SVG file nodig.&lt;/p&gt;
  13380. &lt;h2&gt;Het is makkelijk te bewerken en te stijlen&lt;/h2&gt;
  13381. &lt;p&gt;Een kleur, border of tekst aanpassen is zo gepiept! Het SVG bestand openen in je favoriete text editor is genoeg, je hebt met geen grafisch programma van doen!&lt;/p&gt;
  13382. &lt;h2&gt;Het is animeerbaar&lt;/h2&gt;
  13383. &lt;p&gt;Omdat het een DOM heeft, kan je deze aanspreken met JavaScript om bepaalde zaken aan te passen. Infaden en resizen zijn bijvoorbeeld een fluitje van een cent.&lt;/p&gt;
  13384. &lt;h2&gt;Overtuigd?&lt;/h2&gt;
  13385. &lt;p&gt;Het klinkt allemaal veelbelovend en te mooi om waar te zijn, en jammer genoeg is het dat ook een klein beetje. De meeste moderne browsers ondersteunen SVG native, maar voor sommige zal er toch een fallback voorzien moeten worden. Godzijdank zijn er hier diverse libraries voor, maar ééntje in het bijzonder springt hier toch wel uit: &lt;a href=&quot;http://raphaeljs.com/&quot;&gt;RaphaelJS&lt;/a&gt;.&lt;/p&gt;
  13386. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/browsersupport-svg.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  13387. &lt;p&gt;Een overzicht van de browsersupport (bron: &lt;a href=&quot;http://www.codedread.com/svg-support.php&quot;&gt;http://www.codedread.com/svg-support.php&lt;/a&gt;).&lt;/p&gt;
  13388. &lt;p&gt;Op de website van RaphaelJS kan je tal van voorbeelden vinden en een uitgebreide documentatie. Er is zelfs een aparte &lt;a href=&quot;http://g.raphaeljs.com/&quot;&gt;gRaphaelJS&lt;/a&gt; library speciaal voor grafieken. Bar-, line- en piecharts zullen nog nooit zo mooi meeschalen volgens het medium! Aangezien dit niet echt een hands-on artikel is wil ik wel nog meegeven dat het de moeite waard is om eens wat demo&#39;s te bekijken en misschien zelf eens te spelen met de mogelijkheden.&lt;/p&gt;
  13389. &lt;p&gt;Hopelijk heb ik jullie een beetje kunnen overtuigen om in toekomstige projecten SVG te overwegen. Er zijn reeds enkele leuke sites die hier gebruik van maken zoals &lt;a href=&quot;http://sleepstreet.be/&quot;&gt;sleepstreet.be&lt;/a&gt;, &lt;a href=&quot;http://www.assekloppendhart.be/wanneer/&quot;&gt;Asse Kloppend hart&lt;/a&gt; en &lt;a href=&quot;http://emacsformacosx.com/&quot;&gt;Emacs for Mac OS X&lt;/a&gt;, maar echte mannen gebruiken VI ;-)&lt;/p&gt;
  13390. &lt;h2&gt;Over Jochen Vandendriessche&lt;/h2&gt;
  13391. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/jochen-vandendriessche.jpg&quot; alt=&quot;Foto van Jochen&quot; /&gt;
  13392. Freelance front-end developer onder de naam builtbyrobot. Viel als kind in een vat Red Bull en bijgevolg gigantisch energiek. Overtuigde Apple fanboy, houdt van open webstandaarden en een goede portie JavaScript. Twittert als [@joggink](https://twitter.com/joggink). Blogt ook van tijd tot tijd eens op [joggink.com](http://joggink.com/) en dan voornamelijk over front-end gerelateerde zaken en slechte internet providers. Is momenteel bezig aan een web based SVG editor, genaamd [Willistrator](http://willistrator.com) die naast SVG RaphaelJS kan genereren.
  13393. Favoriete slogan: &#39;Develop for the best, optimize for the rest!&#39;
  13394. &lt;p&gt;Donatie: &lt;a href=&quot;http://www.think-pink.be/&quot;&gt;Think pink&lt;/a&gt;
  13395. Vier jaar geleden, op 10 december 2007, verloor mijn moeder een vijf jaar durende strijd tegen borstkanker. Vijf moeilijke jaren met af en toe een sprankeltje hoop, die helaas de kop werd ingedrukt door uitzaaiingen van deze agressieve tumor. Hopelijk kan deze donatie iets uitmaken aan de levensverwachting van andere vrouwen, moeders, dochters.&lt;/p&gt;
  13396. </content>
  13397.  </entry>
  13398.  <entry>
  13399.    <title>Prototype in JavaScript</title>
  13400.    <link href="https://www.fronteers.nl/nl/blog/2011/12/prototype-in-javascript"/>
  13401.    <updated>2011-12-21T00:00:00Z</updated>
  13402.    <id>https://www.fronteers.nl/nl/blog/2011/12/prototype-in-javascript</id>
  13403.    <content xml:lang="nl" type="html">&lt;p&gt;Op zich is het heel makkelijk om met JavaScript te beginnen. Maar als je dan wat verder gaat kijken wordt het al snel moeilijk. De meeste mensen lijken te struikelen over closures, context en prototype. Ik wil in deze post graag prototype behandelen en eens zien of ik het een beetje kan verhelderen. Ik zal daarbij de termen lekker in het Engels houden, want met vertalen introduceer je alleen maar (nog meer) verwarring.&lt;/p&gt;
  13404. &lt;p&gt;Class inheritance in JavaScript, waarbij een object de eigenschappen erft van een ouder, wordt geregeld via de &amp;quot;prototypal chain&amp;quot;. Dat betekent dat er een keten van geheime links is van het kind naar de ouder(s). Maar die link gaat niet direct naar de ouder, maar eigenlijk naar de &amp;quot;prototype property&amp;quot; van de ouder, ook wel &amp;quot;het prototype object&amp;quot; genoemd. Aan de bovenkant van (bijna) iedere keten staat de globale variabele met de naam &amp;quot;&lt;code&gt;Object&lt;/code&gt;&amp;quot;. Dat is soms een beetje verwarrend, omdat je ook praat over objecten.&lt;/p&gt;
  13405. &lt;p&gt;Oké, dus hoe werkt het nou? Iedere functie die je zelf aanmaakt, heeft automatisch een property die &amp;quot;&lt;code&gt;prototype&lt;/code&gt;&amp;quot; heet. Dat bevat een normaal object, exact zoals je hem krijgt met &lt;code&gt;{}&lt;/code&gt;. Tot dusver geen magie (&lt;em&gt;ok, stiekem wel, misschien dat je aan het einde van dit artikel kunt bedenken waarom!&lt;/em&gt;). Je kan properties toevoegen aan dit &lt;code&gt;prototype&lt;/code&gt; object of de property gewoon vervangen…&lt;/p&gt;
  13406. &lt;pre&gt;&lt;code&gt;function Foo(){}
  13407. typeof Foo.prototype; // &amp;quot;object&amp;quot;
  13408. Foo.prototype.x = 5;
  13409. Foo.prototype.meh = function(){ alert(&amp;quot;foo&amp;quot;); };
  13410. Foo.prototype = {
  13411.  x: 6,
  13412.  y: 7
  13413. };
  13414. &lt;/code&gt;&lt;/pre&gt;
  13415. &lt;p&gt;De magie begint als we een zogenaamde nieuwe instance maken met onze functie (oftewel object &lt;code&gt;Foo&lt;/code&gt;). Dat doen we met het &lt;code&gt;new&lt;/code&gt; keyword.&lt;/p&gt;
  13416. &lt;pre&gt;&lt;code&gt;var foo = new Foo();
  13417. &lt;/code&gt;&lt;/pre&gt;
  13418. &lt;p&gt;We hebben nu een nieuw object &lt;code&gt;foo&lt;/code&gt; dat erft van zijn ouder, &lt;code&gt;Foo&lt;/code&gt;. Dit kan je controleren:&lt;/p&gt;
  13419. &lt;pre&gt;&lt;code&gt;foo instanceof Foo; // true
  13420. &lt;/code&gt;&lt;/pre&gt;
  13421. &lt;p&gt;De magie zit hem in een verborgen property van het kind, &lt;code&gt;foo&lt;/code&gt;. Deze bevat namelijk een directe link naar de huidige waarde van &lt;code&gt;Foo.prototype&lt;/code&gt;. Dat wil zeggen, de waarde van &lt;code&gt;Foo.prototype&lt;/code&gt; op het moment van het instantiëren van het kind. Als de waarde van &lt;code&gt;Foo.prototype&lt;/code&gt; wijzigt dan heeft dat ook onmiddellijk het effect dat het kind niet meer wijst naar &lt;code&gt;Foo.prototype&lt;/code&gt; (maar naar de referentie van het vorige object, want deze gaat niet onmiddellijk verloren). Let op:&lt;/p&gt;
  13422. &lt;pre&gt;&lt;code&gt;function Foo(){}
  13423. var foo = new Foo(); // nieuw kind
  13424. foo instanceof Foo; // true
  13425. // nu vervangen we Foo.prototype
  13426. Foo.prototype = {};
  13427. // en dat betekent dat...
  13428. foo instanceof Foo; // false
  13429. &lt;/code&gt;&lt;/pre&gt;
  13430. &lt;p&gt;Dat betekent dus niet dat de verborgen link nu verbroken is! Nee, de &lt;code&gt;instanceof&lt;/code&gt; &amp;quot;operator&amp;quot; kijkt alleen of het object waar de geheime link van de linkerkant naar wijst ook inderdaad de waarde is van de prototype property van de rechterkant. Zodra dat niet meer het geval is, zoals in de laatste drie regels van het vorige voorbeeld, zegt &lt;code&gt;instanceof&lt;/code&gt; dat het niet meer een kind is. En daar zit wat in, want alle nieuwe properties die aan &lt;code&gt;Foo.prototype&lt;/code&gt; worden toegekend worden niet langer doorgegeven aan het (bestaande) kind &lt;code&gt;foo&lt;/code&gt;. Wel aan nieuwe kinderen, die dus gemaakt zijn na de toekenning. Maar als oudere kinderen al dingen hadden geërfd worden deze niet gedeeld met de nieuwe kinderen. Hmm.&lt;/p&gt;
  13431. &lt;pre&gt;&lt;code&gt;var oud = new Foo;
  13432. Foo.prototype = {};
  13433. var nieuw = new Foo;
  13434. oud instanceof Foo; // false
  13435. nieuw instanceof Foo; // true
  13436. &lt;/code&gt;&lt;/pre&gt;
  13437. &lt;p&gt;Ok, dat is allemaal wel leuk en aardig, maar wat erf je nou eigenlijk? Hah, goede vraag! We erven en delen de waardes van de properties van het prototype object. Laat die maar eens bezinken, want dat is de kern van het verhaal. Let op:&lt;/p&gt;
  13438. &lt;pre&gt;&lt;code&gt;Foo.prototype.x = 5;
  13439. var foo = new Foo();
  13440. foo.x; // 5, erft van Foo.prototype
  13441. Foo.prototype.x = 6;
  13442. foo.x; // 6, wijst nog steeds naar Foo.prototoype
  13443. foo.x = 10;
  13444. foo.x; // 10, hebben we net toegekend...
  13445. Foo.prototype.x; // 6, deze hebben we niet gewijzigd
  13446. Foo.prototype.x = 12;
  13447. foo.x; // ... 10!
  13448. &lt;/code&gt;&lt;/pre&gt;
  13449. &lt;p&gt;Wat is er gebeurd? In het begin werd de waarde naar &lt;code&gt;5&lt;/code&gt; gezet. We maken een nieuw kind aan en kijken wat de waarde is van de property &lt;code&gt;x&lt;/code&gt;. Omdat dit kind een vers object is met als enig extra de verborgen link naar een prototype, heeft het zelf nog geen properties. Toch is de waarde van &lt;code&gt;foo.x&lt;/code&gt; gelijk aan &lt;code&gt;5&lt;/code&gt;, gelijk aan &lt;code&gt;Foo.prototype.x&lt;/code&gt; dus. Dat komt omdat JavaScript bij het uitlezen van een property eerst gaat kijken of dat object (&lt;code&gt;foo&lt;/code&gt;) zelf een property heeft met die naam. In dat geval wordt de waarde van die property meteen teruggegeven. Zo niet, dan gaat JavaScript die verborgen link volgen en kijken of dat prototype object een property heeft met die naam. Zo ja, wordt de waarde daarvan teruggegeven. Zo nee, dan gaat JavaScript verder met de verborgen link van dat prototype object. Dit blijft het doen tot de verborgen link niet meer naar een object wijst. In dat geval geeft het op en zal het de waarde &lt;code&gt;undefined&lt;/code&gt; teruggeven.&lt;/p&gt;
  13450. &lt;p&gt;Dat was lezen dus. Hoe zit het dan met schrijven? Nou, een stuk makkelijker! Als je naar een property schrijft, zal JavaScript dat altijd opslaan als een eigen property van datzelfde object. Daarbij maakt het niet uit of dat object al bestaat of niet. Als het al bestond, wordt het overschreven. Als het niet bestond, wordt het aangemaakt. JavaScript zal bij het wijzigen van een property dus nooit naar de verborgen link met prototype kijken. Het doet er simpelweg niet toe.&lt;/p&gt;
  13451. &lt;p&gt;In JavaScript werkt alles op deze manier van erven. Zo staat &lt;code&gt;Object&lt;/code&gt; aan het hoofd (is dus de ouder) van alle andere objecten die JavaScript automatisch aanmaakt. Dit kunnen we eenvoudig aantonen door de waarde van &lt;code&gt;Array instanceof Object&lt;/code&gt; te bekijken. Of door &lt;code&gt;Object.prototype.x = 5&lt;/code&gt; te doen en daarna te kijken wat de waarde van &lt;code&gt;arr.x&lt;/code&gt; is bij een willekeurig array. Bij het uitlezen van &lt;code&gt;arr.x&lt;/code&gt; zal JavaScript eerst kijken of &lt;code&gt;arr&lt;/code&gt; zelf een property heeft met de naam &lt;code&gt;x&lt;/code&gt;. Waarschijnlijk niet, dus gaat het kijken bij de ouder; &lt;code&gt;Array.prototype&lt;/code&gt;. Deze zal waarschijnlijk ook geen property &lt;code&gt;x&lt;/code&gt; hebben, dus gaat het naar diens ouder, welk &lt;code&gt;Object&lt;/code&gt; is. &lt;code&gt;Object.prototype.x&lt;/code&gt; heb je net zelf aangemaakt dus wordt &lt;code&gt;5&lt;/code&gt; teruggegeven.&lt;/p&gt;
  13452. &lt;p&gt;Als we nou gaan kijken naar subclassing wordt het al meteen een heel stuk moeilijker. Helaas werkt dat niet zo soepeltjes in JavaScript, maar toch is het best mogelijk. Let op, we nemen de volgende objecten:&lt;/p&gt;
  13453. &lt;pre&gt;&lt;code&gt;function Beest(){}
  13454. function Hond(){}
  13455. function Kat(){}
  13456. &lt;/code&gt;&lt;/pre&gt;
  13457. &lt;p&gt;We willen nu dat &lt;code&gt;Hond&lt;/code&gt; en &lt;code&gt;Kat&lt;/code&gt; allebei een zogenaamde subclass (of sub object) worden van &lt;code&gt;Beest&lt;/code&gt;, want het zijn allebei beesten. We gaan een paar fictieve methodes toevoegen om dingen duidelijker te maken. Dit doen we eerst op het prototype van &lt;code&gt;Beest&lt;/code&gt;; daar maken we de generieke versie die misschien dingen doet wat alle beesten toch wel moeten doen...&lt;/p&gt;
  13458. &lt;pre&gt;&lt;code&gt;Beest.prototype = {
  13459.  spreek: function(){
  13460.    this.openMond();
  13461.    this.maakGeluid();
  13462.  },
  13463.  openMond: function(){
  13464.    // hier worden spieren aangesproken enz...
  13465.    // dit moeten (bijna) alle beesten doen die willen &amp;quot;spreken&amp;quot;
  13466.  },
  13467.  maakGeluid: function(){
  13468.    // tril stembanden
  13469.    // dit moeten alle dieren wel doen, maar ieder dier weer op zijn eigen manier
  13470.  }
  13471. };
  13472. &lt;/code&gt;&lt;/pre&gt;
  13473. &lt;p&gt;Nu dan, ieder beest maakt natuurlijk andere geluiden. Dus nu willen we eigenlijk dat als we &lt;code&gt;kat.spreek()&lt;/code&gt; doen dat we dan mauwen, terwijl &lt;code&gt;hond.spreek()&lt;/code&gt; moet blaffen. Oei... Welnu, dit kan :) Eerst maken we &lt;code&gt;Hond&lt;/code&gt; en &lt;code&gt;Kat&lt;/code&gt; een subclass van &lt;code&gt;Beest&lt;/code&gt;:&lt;/p&gt;
  13474. &lt;pre&gt;&lt;code&gt;Hond.prototype = new Beest();
  13475. Kat.prototype = new Beest();
  13476. &lt;/code&gt;&lt;/pre&gt;
  13477. &lt;p&gt;Dat was het! Ja, echt. Dit zorgt er nu al voor dat nieuwe kinderen van zowel &lt;code&gt;Hond&lt;/code&gt; als &lt;code&gt;Kat&lt;/code&gt; functies zullen teruggeven als je hun &lt;code&gt;spreek&lt;/code&gt;, &lt;code&gt;openMond&lt;/code&gt; en &lt;code&gt;maakGeluid&lt;/code&gt; properties uitleest. Sterker nog, &lt;code&gt;hond.spreek === kat.spreek&lt;/code&gt;. Deze functies of objecten worden gedeeld. Wat we zojuist hebben gedaan is het prototype object van &lt;code&gt;Hond&lt;/code&gt; en &lt;code&gt;Kat&lt;/code&gt; vervangen door een nieuw kind van &lt;code&gt;Beest&lt;/code&gt;. Dat zorgt ervoor dat we een prototypal link vormen van een kind van &lt;code&gt;Hond&lt;/code&gt;/&lt;code&gt;Kat&lt;/code&gt; naar de ouder naar &lt;code&gt;Beest&lt;/code&gt; naar &lt;code&gt;Object&lt;/code&gt;. De reden is dat bij deze link alleen de verborgen link naar de ouder wordt beschouwd. Dus gewoon &lt;code&gt;Hond.prototype = Beest&lt;/code&gt; toekennen zou niet werken, want het object &lt;code&gt;Beest&lt;/code&gt; heeft alleen een verborgen link naar zijn eigen ouder; &lt;code&gt;Object&lt;/code&gt;.&lt;/p&gt;
  13478. &lt;p&gt;We hebben nu dus twee subclasses van &lt;code&gt;Beest&lt;/code&gt;; &lt;code&gt;Hond&lt;/code&gt; en &lt;code&gt;Kat&lt;/code&gt;. Alle properties die we aan &lt;code&gt;Beest.prototype&lt;/code&gt; toevoegen, zullen we terug kunnen vinden in de kinderen van &lt;code&gt;Hond&lt;/code&gt; en &lt;code&gt;Kat&lt;/code&gt;, tenzij deze zelf een property hebben met die naam. Of het prototype object van hun ouder. Ter illustratie:&lt;/p&gt;
  13479. &lt;pre&gt;&lt;code&gt;var kat = new Kat();
  13480. kat.spreek; // is een functie
  13481. kat.spreek === Beest.prototype.spreek; // kat erft van Beest dus het is gelijk, kat -&amp;gt; Kat -&amp;gt; Beest
  13482.  
  13483. // voor honden geldt op dit moment hetzelfde
  13484. var hond = new Hond();
  13485. hond.spreek; // een functie
  13486. hond.spreek === Beest.prototype.spreek; // true
  13487.  
  13488. // sterker nog...
  13489. hond.spreek === kat.spreek; // true
  13490.  
  13491. // en ze zijn dus (klein-)kinderen van Beest
  13492. kat instanceof Kat; // true
  13493. kat instanceof Beest; // true
  13494. hond instanceof Beest; // true
  13495. kat instanceof Hond; // false, dit werkt dus niet, dat is de bedoeling
  13496.  
  13497. // nu gaan we een property &amp;quot;shadowen&amp;quot;...
  13498. kat.maakGeluid === Beest.prototype.maakGeluid; // true
  13499. Kat.prototype.maakGeluid = function(){ alert(&amp;quot;Miauw&amp;quot;); };
  13500. kat.maakGeluid === Beest.prototype.maakGeluid; // false, de prototypal lookup stopt nu bij Kat
  13501. kat.maakGeluid === hond.maakGeluid; // false, want hond.maakGeluid is nog steeds die van Beest
  13502.  
  13503. // als we nu kat.spreek(); doen zal er een alert komen met &amp;quot;miauw&amp;quot;.
  13504. // we kunnen kat.maakGeluid ook eenvoudig weer die van Beest laten zijn
  13505. delete Kat.prototype.maakGeluid;
  13506. kat.maakGeluid === Beest.prototype.maakGeluid; // true, hij stopt niet meer bij Kat.prototype
  13507. &lt;/code&gt;&lt;/pre&gt;
  13508. &lt;p&gt;Een nadeel van deze manier van subclassing is dat de &amp;quot;constructor&amp;quot; van de ouder wordt uitgevoerd bij initialisatie. Dus bij &lt;code&gt;Kat.prototype = new Beest()&lt;/code&gt;, want je doet daar wel &amp;quot;gewoon&amp;quot; &lt;code&gt;new Beest()&lt;/code&gt;. Dat dit voor initialisatie, is maakt voor JavaScript geen verschil. Dat betekent dat eventuele bijwerkingen van de constructor ook zichtbaar zijn. Dat is vaak niet wenselijk, doch soms wel.&lt;/p&gt;
  13509. &lt;pre&gt;&lt;code&gt;function Foo(){ alert(&amp;quot;ohnoes!&amp;quot;); };
  13510. new Foo(); // alert
  13511. function Bar(){}
  13512. Bar.prototype = new Foo(); // deze regel zorgt voor een extra alert
  13513. new Bar(); // geen alert
  13514. &lt;/code&gt;&lt;/pre&gt;
  13515. &lt;p&gt;Dus hoe krijgen we dat subclassing voor elkaar zonder de alert? Nou, dat is een beetje lastig :) Er zijn een aantal oplossingen voor, al komen ze vaak op hetzelfde neer. Je maakt een copy van de referentie van het prototype object en zet die in een nieuwe functie. Aangezien &lt;code&gt;instanceof&lt;/code&gt; er alleen maar naar kijkt of het object van de verborgen link van het kind wijst naar hetzelfde object als de prototype property van de rechterkant van &lt;code&gt;instanceof&lt;/code&gt;, verandert er niets. Sterker nog, je kunt het heel eenvoudig voor elkaar krijgen dat een object erft van twee of meerdere andere objecten, zelfs als deze nooit met &lt;code&gt;new&lt;/code&gt; zijn gebruikt. Ter illustratie:&lt;/p&gt;
  13516. &lt;pre&gt;&lt;code&gt;function Foo(){}
  13517. function Bar(){}
  13518. Bar.prototype = Foo.prototype; // dus Foo en Bar hebben nu exact hetzelfde prototype object
  13519. var foo = new Foo();
  13520. foo instanceof Foo; // true, zoals verwacht
  13521. foo instanceof Bar; // true, ja deze ook want foo.[verborgen link] wijst naar het object dat gelijk is aan Bar.prototype.
  13522. &lt;/code&gt;&lt;/pre&gt;
  13523. &lt;p&gt;Nu dan, dit kunnen we dus gebruiken... We gaan even terug naar ons &lt;code&gt;Beest&lt;/code&gt; voorbeeld van boven. We willen dat &lt;code&gt;Kat&lt;/code&gt; en &lt;code&gt;Hond&lt;/code&gt; een subclass worden van &lt;code&gt;Beest&lt;/code&gt;. Hiervoor moet &lt;code&gt;Kat.prototype&lt;/code&gt; een kind worden van &lt;code&gt;Beest&lt;/code&gt;, omdat we die verborgen link naar &lt;code&gt;Beest.prototype&lt;/code&gt; nodig hebben. Hoe die link tot stand kwam is niet zo belangrijk, het gaat immers maar om een referentie naar hetzelfde object. Met de kennis die we zojuist opgedaan hebben wordt het dan als volgt:&lt;/p&gt;
  13524. &lt;pre&gt;&lt;code&gt;function Beest(){ alert(&amp;quot;foo&amp;quot;); }
  13525. function tijdelijk(){}
  13526. tijdelijk.prototype = Beest.prototype; // tijdelijke functie verwijst nu naar hetzelfde prototype object
  13527. var tmp = new tijdelijk(); // GEEN alert...
  13528. tmp instanceof Beest; // true, de verborgen link bestaat
  13529. Kat.prototype = tmp;
  13530. // let op dat Kat.prototype niet hetzelfde object moet zijn aan Hond.prototype!
  13531. Hond.prototype = new tijdelijk(); // ook geen alert
  13532. &lt;/code&gt;&lt;/pre&gt;
  13533. &lt;p&gt;Nu zal je zien dat alle voorbeelden van erfelijkheid die we hierboven beschouwden hier ook weer zullen bestaan. Dus nieuwe katten en honden erven in eerste instantie de &lt;code&gt;spreek&lt;/code&gt;, &lt;code&gt;openMond&lt;/code&gt; en &lt;code&gt;maakGeluid&lt;/code&gt; methoden van &lt;code&gt;Beest&lt;/code&gt;. Deze kunnen dan specifieker worden door een nieuwe functie aan &lt;code&gt;Kat.prototype.maakGeluid&lt;/code&gt; toe te wijzen, zoals we eerder al lieten zien. Daar verandert niets in.&lt;/p&gt;
  13534. &lt;p&gt;Het enige dat ons nog rust is de zogenaamde &amp;quot;&lt;code&gt;super&lt;/code&gt;&amp;quot; call. JavaScript kent geen subclassing en dus ook niet het concept van &lt;code&gt;super&lt;/code&gt;... Gelukkig is in JavaScript de code van de constructor gelijk aan de code van een normale aanroep van de functie. Daar ga ik nu niet op in, maar ga er maar vanuit dat voor &lt;code&gt;Beest()&lt;/code&gt; en &lt;code&gt;new Beest()&lt;/code&gt;, dezelfde code aangeroepen wordt. Het enige verschil is &amp;quot;de context&amp;quot;. Deze context kunnen we wijzigen door twee methodes die JavaScript beschikbaar stelt via &lt;code&gt;Functie.prototype&lt;/code&gt;; &lt;code&gt;call&lt;/code&gt; en &lt;code&gt;apply&lt;/code&gt;. Ook hier ga ik niet dieper op in, behalve dan te zeggen dat ze me in staat stellen om te doen alsof een constructor wordt aangeroepen alsof dat met het &lt;code&gt;new&lt;/code&gt; keyword gebeurde.&lt;/p&gt;
  13535. &lt;pre&gt;&lt;code&gt;function Foo(){ this.x = 5; alert(&amp;quot;executed&amp;quot;); }
  13536. Foo(); // er wordt een globale variabele x aangemaakt, oeps, en er was een alert
  13537. var foo = new Foo(); // foo.x is 5 en er was een alert
  13538. var nep = {};
  13539. Foo.call(nep); // nep.x zal 5 worden! en er was een alert
  13540. &lt;/code&gt;&lt;/pre&gt;
  13541. &lt;p&gt;Bij het testen van deze code zal je zien dat je drie alerts krijgt. Dezelfde code wordt dus uitgevoerd. Het enige verschil is dat het keyword &lt;code&gt;this&lt;/code&gt; naar een ander object verwijst; respectievelijk het globale object (in de browser is dat altijd &lt;code&gt;window&lt;/code&gt;), een nieuwe instance van &lt;code&gt;Foo&lt;/code&gt; en een nieuw anoniem object. Uitvoer van de functie is altijd hetzelfde. Enige aparte was dat er bij de tweede keer, dus bij &lt;code&gt;new Foo()&lt;/code&gt;, ook een nieuw object werd aangemaakt met die verborgen link naar &lt;code&gt;Foo.prototype&lt;/code&gt;. Verder is de uitvoer hetzelfde. Dat kunnen we dus ook gebruiken voor onze &lt;code&gt;super&lt;/code&gt;. Stel dat &lt;code&gt;Beest&lt;/code&gt; nog iets aparts doet in zijn constructor. Dan willen we dat wel laten doen voor ieder beest. Dus…&lt;/p&gt;
  13542. &lt;pre&gt;&lt;code&gt;function Beest(){ alert(&amp;quot;speciaals, alleen voor nieuwe beesten, maar wel alle beesten&amp;quot;); }
  13543. // subclassing zonder super
  13544. function Kat(){ alert(&amp;quot;miauw&amp;quot;); }
  13545. function tmp(){}
  13546. tmp.prototype = Beest.prototype;
  13547. Kat.prototype = new tmp();
  13548. new Kat(); // 1 alert: miauw
  13549. // subclassing met super
  13550. function Kat(){ Beest.apply(this, arguments); alert(&amp;quot;miauw&amp;quot;); }
  13551. function tmp(){}
  13552. tmp.prototype = Beest.prototype;
  13553. Kat.prototype = new tmp();
  13554. new Kat(); // twee alerts! die van Beest en miauw
  13555. &lt;/code&gt;&lt;/pre&gt;
  13556. &lt;p&gt;Bij het laatste voorbeeld zijn kinderen van &lt;code&gt;Kat&lt;/code&gt; dus ook kleinkinderen van &lt;code&gt;Beest&lt;/code&gt;. Ze erven eerst van &lt;code&gt;Kat&lt;/code&gt; en daarna van &lt;code&gt;Beest&lt;/code&gt;. De constructor van &lt;code&gt;Beest&lt;/code&gt; wordt alleen maar uitgevoerd bij het aanmaken van nieuwe kinderen van &lt;code&gt;Beest&lt;/code&gt; of &lt;code&gt;Kat&lt;/code&gt;, niet bij het initialiseren van de subclass &lt;code&gt;Kat&lt;/code&gt; zelf. Achievement achieved!&lt;/p&gt;
  13557. &lt;p&gt;Ik heb geen idee hoe moeilijk of makkelijk dit is, maar ik hoop dat de voorbeelden een beetje voor zich spreken. Ga er mee spelen. Het is misschien een beetje lastig, maar als je het eenmaal door hebt is het oh-zo logisch :)&lt;/p&gt;
  13558. &lt;p&gt;Oh, en prettige feestdagen! ;)&lt;/p&gt;
  13559. &lt;h2&gt;Over Peter van der Zee&lt;/h2&gt;
  13560. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/peter-van-der-zee.jpg&quot; alt=&quot;Foto van Peter&quot; /&gt;
  13561. [Peter](http://qfox.nl/) is gespecialiseerd in in JavaScript/ECMAScript en werkt voor [Uxebu](http://uxebu.com/), voornamelijk aan JavaScript gerelateerde projecten.
  13562. &lt;p&gt;Donatie: &lt;a href=&quot;https://www.bof.nl/&quot;&gt;Bits of Freedom&lt;/a&gt;
  13563. Peter heeft Fronteers de vrijheid gegeven om een goed doel (of geen) te kiezen en we hebben als tegenhanger voor het EFF voor Bits of Freedom gekozen.&lt;/p&gt;
  13564. </content>
  13565.  </entry>
  13566.  <entry>
  13567.    <title>Deferred en promise in jQuery</title>
  13568.    <link href="https://www.fronteers.nl/nl/blog/2011/12/deferred-en-promise-in-jquery"/>
  13569.    <updated>2011-12-20T00:00:00Z</updated>
  13570.    <id>https://www.fronteers.nl/nl/blog/2011/12/deferred-en-promise-in-jquery</id>
  13571.    <content xml:lang="nl" type="html">&lt;p&gt;Deferred en promise? Gaan we het hebben over uitstellingen en beloftes in jQuery? Nee, gelukkig niet. Deferred en promise zitten sinds versie 1.5 in jQuery en daarmee kan je asynchrone functies zoals Ajax beter afhandelen.&lt;/p&gt;
  13572. &lt;p&gt;Even een stapje terug in de tijd, toen we nog met guldens en franken betaalden. Als je een muisklik wilde afvangen, deed je dat met &lt;code&gt;element.onclick = someFunction;&lt;/code&gt; Dat werd een probleem als een ander stukje code ook naar de klik wilde luisteren. Dat kon niet, want aan &lt;code&gt;onclick&lt;/code&gt; kan je maar één functie toekennen. Dit is destijds opgelost met de DOM-functie &lt;code&gt;addEventListener&lt;/code&gt;. Daarmee kan je zoveel functies die luisteren toevoegen als je wilt. En sindsdien weten we niet beter.&lt;/p&gt;
  13573. &lt;p&gt;Nu hebben we een vergelijkbaar probleem met Ajax-aanroepen. Nu niet met events, maar met het gegeven dat Ajax maar één callback-functie accepteert. Niet alleen bij de jQuery &lt;code&gt;$.ajax()&lt;/code&gt;-aanroep, maar ook bij het onderliggende XMLHttpRequest-object.&lt;/p&gt;
  13574. &lt;h2&gt;Promise&lt;/h2&gt;
  13575. &lt;p&gt;Tot jQuery 1.5 zag een typische &lt;code&gt;$.ajax()&lt;/code&gt;-aanroep er als volgt uit:&lt;/p&gt;
  13576. &lt;pre&gt;&lt;code&gt;$.ajax({
  13577.  url: &amp;quot;/myServerScript&amp;quot;,
  13578.  success: mySuccessFunction,
  13579.  error: myErrorFunction
  13580. });
  13581. &lt;/code&gt;&lt;/pre&gt;
  13582. &lt;p&gt;De &lt;code&gt;$.ajax()&lt;/code&gt;-functie retourneert een jQuery XMLHttpRequest-object.&lt;/p&gt;
  13583. &lt;p&gt;Tot zover niets nieuws. Vanaf versie 1.5 implementeert het teruggegeven object ook de &lt;a href=&quot;http://wiki.commonjs.org/wiki/Promises/A&quot;&gt;CommonJS Promises/A-interface&lt;/a&gt;. Dat is een hele mond vol. CommonJS is een initiatief om gemeenschappelijke en onafhankelijke interfaces (API&#39;s) vast te leggen. Promises/A is zo&#39;n interface. Het voordeel is dat deze niet jQuery-specifiek is. Als je bijvoorbeeld met Node.js werkt, dan is de kans groot dat je met dezelfde interface te maken krijgt. Handig.&lt;/p&gt;
  13584. &lt;p&gt;De manier van callbacks toewijzen is met Promises heel anders:&lt;/p&gt;
  13585. &lt;pre&gt;&lt;code&gt;var promise = $.ajax({
  13586.  url: &amp;quot;/myServerScript&amp;quot;
  13587. });
  13588.  
  13589. promise.done(mySuccessFunction);
  13590. promise.fail(myErrorFunction);
  13591. &lt;/code&gt;&lt;/pre&gt;
  13592. &lt;p&gt;&amp;quot;Oke, de interface is nu veranderd, maar wat heb ik daaraan?&amp;quot;, zul je je vast afvragen.&lt;/p&gt;
  13593. &lt;p&gt;De voordelen van promises zijn:&lt;/p&gt;
  13594. &lt;ol&gt;
  13595. &lt;li&gt;Je kunt de &lt;code&gt;done()&lt;/code&gt;- en &lt;code&gt;fail()&lt;/code&gt;-functies meerdere keren aanroepen, met verschillende callbacks. Misschien heb je wel een callbackfunctie die een animatie stopt, een die een nieuwe Ajax-aanroep doet en een andere functie die de ontvangen gegevens aan de bezoeker toont.&lt;/li&gt;
  13596. &lt;/ol&gt;
  13597. &lt;pre&gt;&lt;code&gt;var promise = $.ajax({
  13598.  url: &amp;quot;/myServerScript&amp;quot;
  13599. });
  13600.  
  13601. promise.done(myStopAnimationFunction);
  13602. promise.done(myOtherAjaxFunction);
  13603. promise.done(myShowInfoFunction);
  13604. promise.fail(myErrorFunction);
  13605. &lt;/code&gt;&lt;/pre&gt;
  13606. &lt;ol start=&quot;2&quot;&gt;
  13607. &lt;li&gt;
  13608. &lt;p&gt;Ook als de Ajax-aanroep al geweest is, kan je nog steeds de &lt;code&gt;done()&lt;/code&gt;- en &lt;code&gt;fail()&lt;/code&gt;-functies aanroepen en de callbacks worden dan gelijk uitgevoerd. Dus geen gedoe meer met variabelen die de verschillende staten moeten onthouden. Als een Ajax-aanroep afgelopen is, dan komt deze of in de succes-staat of in de fout-staat en deze zal niet meer veranderen.&lt;/p&gt;
  13609. &lt;/li&gt;
  13610. &lt;li&gt;
  13611. &lt;p&gt;Je kunt promises combineren. Soms is het nodig om gelijktijdig twee Ajax-aanroepen te doen en wil je een functie pas aanroepen als beide succesvol zijn verlopen. Hiervoor gebruik je de nieuwe &lt;code&gt;$.when()&lt;/code&gt;-functie:&lt;/p&gt;
  13612. &lt;/li&gt;
  13613. &lt;/ol&gt;
  13614. &lt;pre&gt;&lt;code&gt;var promise1 = $.ajax(&amp;quot;/myServerScript1&amp;quot;);
  13615. var promise2 = $.ajax(&amp;quot;/myServerScript2&amp;quot;);
  13616.  
  13617. $.when(promise1, promise2).done(function(response1, response2){
  13618.  // Handle both responses
  13619. });
  13620. &lt;/code&gt;&lt;/pre&gt;
  13621. &lt;h2&gt;Deferred&lt;/h2&gt;
  13622. &lt;p&gt;Wat is dan een deferred en wat is het verschil met een promise? Zoals je hierboven hebt gezien is een promise een object dat je terugkrijgt van een asynchrone functie. Een deferred heb je nodig als je zelf zo&#39;n functie schrijft.&lt;/p&gt;
  13623. &lt;p&gt;Een deferred object kan hetzelfde als een promise object, maar heeft twee extra functies om de &lt;code&gt;.done()&lt;/code&gt;- en &lt;code&gt;.fail()&lt;/code&gt;-functies te laten afgaan.&lt;/p&gt;
  13624. &lt;p&gt;Een deferred-object heeft een &lt;code&gt;.resolve()&lt;/code&gt;-functie om een succesvolle uitkomst aan te geven en de met &lt;code&gt;.done()&lt;/code&gt; geregistreerde functies uit te voeren. De &lt;code&gt;.reject()&lt;/code&gt;-functie geeft een gefaalde uitkomst aan en voert de met &lt;code&gt;.fail()&lt;/code&gt; geregistreerde functies uit.&lt;/p&gt;
  13625. &lt;p&gt;Aan de &lt;code&gt;.resolve()&lt;/code&gt;- en &lt;code&gt;.reject()&lt;/code&gt;-functies kunnen parameters worden meegegeven die de met &lt;code&gt;.done()&lt;/code&gt; en &lt;code&gt;.fail()&lt;/code&gt; geregistreerde functies als argument meekrijgen.&lt;/p&gt;
  13626. &lt;p&gt;Het promise-object heeft geen &lt;code&gt;.resolve()&lt;/code&gt;- en &lt;code&gt;.reject()&lt;/code&gt;-functie. Het promise object geef je immers weg aan andere scripts waarvan je niet wilt dat zij de promise kunnen laten resolven of rejecten.&lt;/p&gt;
  13627. &lt;p&gt;Hieronder een eenvoudig script dat de werking illustreert. De html bestaat uit een leeg divje met als id &amp;quot;result&amp;quot;.&lt;/p&gt;
  13628. &lt;pre&gt;&lt;code&gt;$(&#39;#result&#39;).html(&#39;waiting...&#39;);
  13629.  
  13630. var promise = wait();
  13631. promise.done(result);
  13632.  
  13633. function result() {
  13634.  $(&#39;#result&#39;).html(&#39;done&#39;);
  13635. }
  13636.  
  13637. function wait() {
  13638.  var deferred = $.Deferred();
  13639.  
  13640.  setTimeout(function() {
  13641.    deferred.resolve();
  13642.  }, 2000);
  13643.  
  13644.  return deferred.promise();
  13645. }
  13646. &lt;/code&gt;&lt;/pre&gt;
  13647. &lt;p&gt;Het script is ook te vinden op &lt;a href=&quot;http://jsfiddle.net/TT3G5/&quot;&gt;jsFiddle&lt;/a&gt;, zodat je er zelf mee kunt experimenteren.&lt;/p&gt;
  13648. &lt;p&gt;De &lt;code&gt;wait()&lt;/code&gt;-functie is de functie die een promise teruggeeft. Deze wordt resolved via een &lt;code&gt;setTimeout&lt;/code&gt; van twee seconden. In plaats van de &lt;code&gt;setTimeout&lt;/code&gt; kan alles gebruikt worden wat asynchroon is, zoals Ajax, animaties, Web workers, enzovoorts. Duidelijk is dat binnen de &lt;code&gt;wait()&lt;/code&gt;-functie een deferred-object wordt gebruikt, maar dat we het beperkte promise-object teruggeven.&lt;/p&gt;
  13649. &lt;h2&gt;jQuery-ondersteuning&lt;/h2&gt;
  13650. &lt;p&gt;Op het &lt;a href=&quot;http://blog.jquery.com/2011/11/08/building-a-slimmer-jquery/&quot;&gt;jQuery-blog&lt;/a&gt; is te lezen dat jQuery helemaal voor promises gaat en dat de oude API, met de &lt;code&gt;.error()&lt;/code&gt;-, &lt;code&gt;.success()&lt;/code&gt;- en &lt;code&gt;.complete()&lt;/code&gt;-functies, uiteindelijk zal verdwijnen. Als je deze functies gebruikt, dan kan je alvast beginnen je code te herschrijven en over te stappen op de promise-interface.&lt;/p&gt;
  13651. &lt;h2&gt;Meer mogelijk&lt;/h2&gt;
  13652. &lt;p&gt;Dit artikel is slechts een introductie in de werking van het deferred-object. jQuery ondersteunt nog veel meer functies. Bekijk de &lt;a href=&quot;http://api.jquery.com/category/deferred-object/&quot;&gt;jQuery deferred documentatie&lt;/a&gt; voor alle mogelijkheden. Zo is het bijvoorbeeld ook mogelijk om met promises de voortgang van een proces bij te houden.&lt;/p&gt;
  13653. &lt;h2&gt;Over Edwin Martin&lt;/h2&gt;
  13654. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/edwin-martin.jpg&quot; alt=&quot;Foto van edwin martin uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  13655. Edwin Martin is freelance front-end webontwikkelaar en woont met vrouw en twee dochtertjes in Hilversum. Binnen Fronteers helpt hij mee met het organiseren van de Fronteers conferentie. Hij houdt een blog bij over front-end op [bitstorm.org](http://www.bitstorm.org/) en is te vinden op twitter als [@edwinm](https://twitter.com/edwinm).
  13656. &lt;p&gt;Donatie: &lt;a href=&quot;https://www.eff.org/&quot;&gt;Electronic Frontier Foundation&lt;/a&gt;
  13657. Mijn echte goede doel is natuurlijk Fronteers, maar dat past niet zo bij de kerstgedachte. Daarom kies ik voor de EFF, die opkomt voor onze rechten in de digitale wereld. Zo helpen ze bijvoorbeeld softwareontwikkelaars die plots een (onterechte) rechtszaak van een groot bedrijf aan de broek krijgen.&lt;/p&gt;
  13658. </content>
  13659.  </entry>
  13660.  <entry>
  13661.    <title>Welkom op het Audiologische Internet</title>
  13662.    <link href="https://www.fronteers.nl/nl/blog/2011/12/welkom-op-het-audiologische-internet"/>
  13663.    <updated>2011-12-19T00:00:00Z</updated>
  13664.    <id>https://www.fronteers.nl/nl/blog/2011/12/welkom-op-het-audiologische-internet</id>
  13665.    <content xml:lang="nl" type="html">&lt;p&gt;Het internet. Een praktisch oneindige bron aan tekstuele en grafische informatie. Tegenwoordig kunnen wij, als webontwikkelaars, gebruik maken van net iets meer dan twintig jaar aan evolutie betreft mogelijkheden op het internet. Wat begon als statische tekstdocumenten groeide al snel door tot interactieve pagina’s, en tegenwoordig zelfs tot webapplicaties met miljoenen regels aan JavaScript code en multiplayer spellen. De afname in het gebruik van Adobe Flash, samen met de nieuwe driedimensionale grafische mogelijkheden die WebGL geïntroduceerd heeft, heeft nadruk gelegd op een zintuig dat het internet nog niet volledig kan verzorgen: het gehoor.&lt;/p&gt;
  13666. &lt;h2&gt;Achtergrondgeluidjes, Adobe Flash en &lt;code&gt;&amp;lt;audio&amp;gt;&lt;/code&gt;&lt;/h2&gt;
  13667. &lt;p&gt;Terug naar het jaar 1995, waarin Microsoft Internet Explorer 2 vrijgeeft. Dit is de eerste browser die ondersteuning voor het invoegen van verschillende soorten media toevoegt, namelijk het &lt;code&gt;&amp;lt;bgsound&amp;gt;&lt;/code&gt; element en de mogelijkheid om geluid en video te embedden. Niet veel later volgden ook andere browsers en plugins; in 2005 is de door Opera geïntroduceerde &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/2005-09-01/#sound&quot;&gt;Audio JavaScript interface&lt;/a&gt; in de Web Application specificatie toegevoegd, een mogelijkheid die we nu kennen als het HTML5 &lt;code&gt;&amp;lt;audio&amp;gt;&lt;/code&gt; element.&lt;/p&gt;
  13668. &lt;h2&gt;Gebrekkige mogelijkheden&lt;/h2&gt;
  13669. &lt;p&gt;Ondanks dat het &lt;code&gt;&amp;lt;audio&amp;gt;&lt;/code&gt; element het afspelen van geluid toestaat, en zelfs de mogelijkheden biedt om geluid te pauzeren en de afspeelsnelheid te veranderen, zijn er belangrijke tekortkomingen. Een goed voorbeeld hiervan is de afwezigheid van positiebepaling van geluid. Vergelijk dit met een spel waarin iemand een wapen op je afvuurt: je wilt kunnen horen waar in de omgeving deze tegenstander staat. WebGL geeft ons de mogelijkheid om prachtige omgevingen in drie dimensies te creëren, enkel met de beperking dat het huidige geluidsspectrum op het internet enkel links en rechts kent.&lt;/p&gt;
  13670. &lt;p&gt;Een ander probleem dat je tegen kunt komen is een vertraging bij het afspelen van korte geluidsfragmenten. Net zoals bij het kijken naar nagesynchroniseerde televisie de stemmen duidelijk nep zijn, wordt het als frustrerend ervaren als het ratelen van een geweer een kwart seconde na het afvuren van het wapen volgt. En dan is er natuurlijk ook nog het codec probleem, want geen enkel bestandsformaat werkt in elke browser.&lt;/p&gt;
  13671. &lt;p&gt;Voor het oplossen van deze problemen is een &lt;a href=&quot;http://www.w3.org/2005/Incubator/audio/charter&quot;&gt;klein groepje mensen&lt;/a&gt; van Mozilla, Google, de BBC en de MIDI Manufacturers Association in 2005 al begonnen met een werkgroup binnen het W3C om de mogelijkheden te onderzoeken. Dit is uitgegroeid tot de &lt;a href=&quot;http://www.w3.org/2011/audio/&quot;&gt;W3C Audio Working Group&lt;/a&gt;, met als doel het ontwikkelen van een geavanceerde Audio API om spellen en applicaties toch de mogelijkheid te geven geluid te analyseren, bewerken en te creëren.&lt;/p&gt;
  13672. &lt;h2&gt;De Mozilla Audio Data API, en de Web Audio API&lt;/h2&gt;
  13673. &lt;p&gt;De eerste publieke geavanceerde Audio API is in oktober 2010 geïntroduceerd door Mozilla&#39;s David Humphrey, namelijk de &lt;a href=&quot;https://wiki.mozilla.org/Audio_Data_API&quot;&gt;Audio Data API&lt;/a&gt;. Deze API stelt de ontwikkelaar in staat om geluiden te analyseren, te bewerken of zelfs volledig zelf te creëren door de eigenlijke audio data beschikbaar te stellen aan JavaScript, waarna de ontwikkelaar hier berekeningen op kan uitvoeren. Naast het uitrollen van deze functionaliteiten in Mozilla Firefox 4, heeft het bedrijf besloten om een deel van de focus te verleggen naar de &lt;a href=&quot;http://www.w3.org/2011/audio/drafts/1WD/MediaStream/&quot;&gt;MediaStream Processing API&lt;/a&gt;. Deze biedt, naast het analyseren en bewerken van geluid via de Audio Data API, betere integratie met andere functies zoals camera toegang.&lt;/p&gt;
  13674. &lt;p&gt;Een tegenhanger hiervan is de &lt;a href=&quot;http://www.w3.org/2011/audio/drafts/1WD/WebAudio/&quot;&gt;Web Audio API&lt;/a&gt;, een project van Google en Apple dat in 2009 gestart is door Google&#39;s Chris Rogers. De API volgt een totaal andere methodiek, en biedt standaardfunctionaliteiten aan in de vorm van Nodes. Functionaliteiten als positionering van geluid, omgevingseffecten, fade-ins, het mixen van geluid en simpele analyse kunnen hierdoor met slechts een paar regels JavaScript worden toegevoegd.&lt;/p&gt;
  13675. &lt;p&gt;Om een vergelijking te schetsen tussen de twee voorstellen:&lt;/p&gt;
  13676. &lt;table&gt;
  13677. &lt;thead&gt;
  13678. &lt;tr&gt;
  13679. &lt;th&gt;Audio Data API&lt;/th&gt;
  13680. &lt;th&gt;Web Audio API&lt;/th&gt;
  13681. &lt;/tr&gt;
  13682. &lt;/thead&gt;
  13683. &lt;tbody&gt;
  13684. &lt;tr&gt;
  13685. &lt;td&gt;Mozilla Firefox&lt;/td&gt;
  13686. &lt;td&gt;Google Chrome, Apple Safari, binnenkort mogelijk iOS.&lt;/td&gt;
  13687. &lt;/tr&gt;
  13688. &lt;tr&gt;
  13689. &lt;td&gt;Imperatief&lt;/td&gt;
  13690. &lt;td&gt;Declaratief (met mogelijkheid tot imperatief)&lt;/td&gt;
  13691. &lt;/tr&gt;
  13692. &lt;tr&gt;
  13693. &lt;td&gt;Low-level, zelf de berekeningen doen&lt;/td&gt;
  13694. &lt;td&gt;High-level met Nodes voor de meeste operaties, maar opnieuw met de mogelijkheid tot low-level.&lt;/td&gt;
  13695. &lt;/tr&gt;
  13696. &lt;tr&gt;
  13697. &lt;td&gt;1 input, 1 bewerking, 1 output&lt;/td&gt;
  13698. &lt;td&gt;1 of meer inputs, 1 of meer bewerkingen, 1 output&lt;/td&gt;
  13699. &lt;/tr&gt;
  13700. &lt;/tbody&gt;
  13701. &lt;/table&gt;
  13702. &lt;p&gt;De Web Audio API is in principe een superset van de Audio Data API: het biedt dezelfde functionaliteiten, maar geeft de ontwikkelaar ook de optie om gebruik te maken van geoptimaliseerde procedures die veelal tot hetzelfde effect zullen leiden. Er zijn al verschillende JavaScript libraries voor Mozilla’s Audio Data API geschreven om tot datzelfde punt te komen, zoals &lt;a href=&quot;https://github.com/corbanbrook/dsp.js/&quot;&gt;DSP.js&lt;/a&gt;.&lt;/p&gt;
  13703. &lt;p&gt;Het volgende voorbeeld zal een ingelezen geluidsbestand, bijvoorbeeld via &lt;a href=&quot;http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html&quot;&gt;XMLHttpRequest&lt;/a&gt;, afspelen nadat er een lowpass filter toegepast is (Web Audio API).&lt;/p&gt;
  13704. &lt;pre&gt;&lt;code&gt;var audioContext = new AudioContext();
  13705. function playAndAnalyzeAudio(inputBuffer /* ArrayBuffer */) {
  13706.  audioContext.decodeAudioData(inputBuffer, function(decodedData) {
  13707.    var inputNode = audioContext.createBufferSource(),
  13708.        filterNode = audioContext.createBiquadFilter();
  13709.    filterNode.type = 0; // BiquadFilterNode.LOWPASS;
  13710.    filterNode.connect(audioContext.destination);
  13711.    inputNode.buffer = decodedData;
  13712.    inputNode.loop = true;
  13713.    inputNode.connect(filterNode);
  13714.    inputNode.noteOn(0); // speel het geluid af.
  13715.  });
  13716. }
  13717. &lt;/code&gt;&lt;/pre&gt;
  13718. &lt;p&gt;Persoonlijk geloof ik meer in een API die het gros van de berekeningen op een geoptimaliseerde manier kan uitvoeren, gezien de formules die in geluidsbewerking gebruikt worden veelal standaard zijn, maar tevens de mogelijkheid biedt om verder—imperatief—te gaan als je dat zelf wilt. Een voorbeeld hiervan zijn bijvoorbeeld CSS Animaties: animaties op de pagina gebruiken is al jaren mogelijk via JavaScript, maar juist omdat ze declaratief in CSS worden gedefinieerd kan een browser anticiperen op het resultaat en hardware gebruiken om het effect te tonen, wat tot een beter resultaat leidt. Een moderne Blu-Ray film met 7.1 geluidskanalen op 192 kHz zal over de anderhalf miljoen signalen per seconde verwerken, en hardware speelt hier een essentiële rol in.&lt;/p&gt;
  13719. &lt;p&gt;Toch is er nog veel discussie aan de gang, en beide APIs zijn nog niet volledig in staat om met alle andere specificaties te integreren: de &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;audio&amp;gt;&lt;/code&gt; elementen, microfoon input via de &lt;code&gt;getUserMedia()&lt;/code&gt;-methode en het synchroniseren van meerdere geluidsstromen via de nieuwe HTML5 &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#synchronising-multiple-media-elements&quot;&gt;MediaController interface&lt;/a&gt;. Dit zijn allemaal vraagstukken waarop we in 2012 een antwoord gaan krijgen, want op het gebied van multimedia gaat het een heel interessant jaar worden!&lt;/p&gt;
  13720. &lt;h2&gt;Over Peter Beverloo&lt;/h2&gt;
  13721. &lt;p&gt;/2011/12/peter-beverloo.jpg
  13722. &lt;a href=&quot;http://peter.sh/&quot;&gt;Peter Beverloo&lt;/a&gt; is een Software Engineer bij Google en onderdeel van de Chromium en WebKit teams. Hiernaast is hij actief op &lt;a href=&quot;https://twitter.com/beverloo&quot;&gt;Twitter&lt;/a&gt;, deelnemer van projecten als &lt;a href=&quot;http://html5boilerplate.com/&quot;&gt;HTML5 Boilerplate&lt;/a&gt; en &lt;a href=&quot;http://w3fools.com/&quot;&gt;W3Fools&lt;/a&gt; en vrijwilliger bij de Fronteers en Mobilism conferenties.&lt;/p&gt;
  13723. &lt;p&gt;Donatie: &lt;a href=&quot;https://www.eff.org/&quot;&gt;Electronic Frontier Foundation&lt;/a&gt;
  13724. Electronic Frontier Foundation zal ook namens mij een donatie ontvangen. Hun bezigheden zijn essentieel voor het voortbestaan van het vrije internet zoals we dat vandaag kennen.&lt;/p&gt;
  13725. </content>
  13726.  </entry>
  13727.  <entry>
  13728.    <title>Geharnast JavaScript</title>
  13729.    <link href="https://www.fronteers.nl/nl/blog/2011/12/geharnast-javascript"/>
  13730.    <updated>2011-12-18T00:00:00Z</updated>
  13731.    <id>https://www.fronteers.nl/nl/blog/2011/12/geharnast-javascript</id>
  13732.    <content xml:lang="nl" type="html">&lt;p&gt;Het belang van JavaScript op het web is de laatste jaren enorm toegenomen. Ten eerste heeft JavaScript deels de animatierol van Flash overgenomen, ten tweede is het web applicatiever geworden, waardoor JavaScript (bijvoorbeeld in Ajax-communicatie) een grote vlucht genomen heeft. De rol JavaScript wordt groter en tegelijkertijd neemt de professionalisering toe. Het is opvallend te zien dat veel best practices uit de back-end-wereld gemeengoed aan het worden zijn bij JavaScript-development. Testen is zo&#39;n belangrijk onderdeel.&lt;/p&gt;
  13733. &lt;h2&gt;Testen&lt;/h2&gt;
  13734. &lt;p&gt;Het testen van JavaScript kan op meerdere niveaus gedaan worden:&lt;/p&gt;
  13735. &lt;ol&gt;
  13736. &lt;li&gt;Lint testen. Het testen op correcte syntax door tools als &lt;a href=&quot;http://www.jshint.com/&quot;&gt;JsHint&lt;/a&gt;, &lt;a href=&quot;http://www.jslint.com/&quot;&gt;JsLint&lt;/a&gt; of &lt;a href=&quot;http://code.google.com/intl/nl/closure/utilities/&quot;&gt;Closure Linter&lt;/a&gt;. Dit kan deels door je editor gedaan worden.&lt;/li&gt;
  13737. &lt;li&gt;Functioneel testen. Het testen van bijvoorbeeld klikscenario&#39;s in je website of app met een tool als &lt;a href=&quot;http://seleniumhq.org/&quot;&gt;Selenium&lt;/a&gt;.&lt;/li&gt;
  13738. &lt;li&gt;Unittesten. Daar gaan we in dit artikel dieper op in.&lt;/li&gt;
  13739. &lt;li&gt;Last but not least: handmatig testen. Idealiter stel je hiervoor schriftelijke testscripts op, zodat je gestructureerd dezelfde scenario&#39;s kunt testen bij opeenvolgende software releases.&lt;/li&gt;
  13740. &lt;/ol&gt;
  13741. &lt;p&gt;De eerste drie soorten testtools kunnen geautomatiseerd worden, zodat je continu op de hoogte gebracht kunt worden van de staat van je applicatie.&lt;/p&gt;
  13742. &lt;h2&gt;Unittesten&lt;/h2&gt;
  13743. &lt;p&gt;Wikipedia zegt over &lt;a href=&quot;http://nl.wikipedia.org/wiki/Unittesten&quot;&gt;unittesten&lt;/a&gt;: &amp;quot;Unittesten is een methode om softwaremodulen of stukjes broncode (&lt;em&gt;units&lt;/em&gt;) afzonderlijk te testen. Bij unittesten zal voor iedere unit een of meerdere tests ontwikkeld worden. Hierbij worden dan verschillende testcases doorlopen. In het ideale geval zijn alle testcases onafhankelijk van andere tests.&amp;quot; Verschillende units samen worden getest in een integratietest. Voor JavaScript zijn er diverse unittest frameworks beschikbaar. Enkele bekende zijn:&lt;/p&gt;
  13744. &lt;ul&gt;
  13745. &lt;li&gt;&lt;a href=&quot;http://docs.jquery.com/QUnit&quot;&gt;QUnit&lt;/a&gt;&lt;/li&gt;
  13746. &lt;li&gt;&lt;a href=&quot;http://developer.yahoo.com/yui/yuitest/&quot;&gt;YUI Test&lt;/a&gt;&lt;/li&gt;
  13747. &lt;li&gt;&lt;a href=&quot;http://code.google.com/p/js-test-driver/&quot;&gt;Js Test Driver&lt;/a&gt;&lt;/li&gt;
  13748. &lt;li&gt;&lt;a href=&quot;http://pivotal.github.com/jasmine/&quot;&gt;Jasmine&lt;/a&gt; (voortgekomen uit JsUnit)&lt;/li&gt;
  13749. &lt;/ul&gt;
  13750. &lt;p&gt;In dit artikel kijken we verder naar unittesten met Jasmine. Jasmine kan onafhankelijk van een JavaScript-library gebruikt worden en heeft ook geen DOM nodig om zijn testen uit te voeren. Verder is Jasmine goed te automatiseren. In syntax en mogelijkheden verschilt Jasmine niet veel van andere unittesting tools.&lt;/p&gt;
  13751. &lt;h2&gt;TDD - Assume your code will fail&lt;/h2&gt;
  13752. &lt;p&gt;Eén stap verder nog dan systematisch testen is het testen als uitgangspunt te nemen in je software-ontwikkelproces: &amp;quot;Test-Driven Development&amp;quot; (TDD). Test-Driven Development is een ontwikkelmethode voor software waarbij eerst tests worden geschreven en daarna pas de code. De testcases worden beschreven vanuit het oogpunt van de gebruiker. Hoewel TDD (een methodiek) en Jasmine (een tool) niet per definitie een combinatie vormen, werpen we hier een korte, inleidende blik op TDD met Jasmine.&lt;/p&gt;
  13753. &lt;h2&gt;Jasmine installeren&lt;/h2&gt;
  13754. &lt;ol&gt;
  13755. &lt;li&gt;De voorbeeldcode bij dit artikel is te downloaden vanaf &lt;a href=&quot;https://github.com/ludder/Fronteers-Jasmine-Example&quot;&gt;github&lt;/a&gt;.&lt;/li&gt;
  13756. &lt;li&gt;Op het hoogste niveau zie je de directory&#39;s &amp;quot;lib&amp;quot;, &amp;quot;spec&amp;quot; en &amp;quot;src&amp;quot;. &amp;quot;lib&amp;quot; bevat de core-bestanden van Jasmine, in &amp;quot;src&amp;quot; komen de JavaScriptbestanden van je project en in &amp;quot;spec&amp;quot; zitten de bestanden die de sourcecode gaan testen.&lt;/li&gt;
  13757. &lt;li&gt;Open SpecRunner.html in je favoriete browser. Er worden nog geen testen uitgevoerd: &amp;quot;0 specs, 0 failures ...&amp;quot;.&lt;/li&gt;
  13758. &lt;/ol&gt;
  13759. &lt;h2&gt;Een eerste Jasmine unit test maken&lt;/h2&gt;
  13760. &lt;p&gt;Jasmine is opgebouwd uit suites, specs en expectations. Eén JavaScript-project bestaat normaal gesproken uit meerdere Jasmine &lt;em&gt;testsuites&lt;/em&gt;. Eén testsuite, die vaak een component of een class omvat, kan op zijn beurt een geneste suite of meerdere &lt;em&gt;specs&lt;/em&gt; bevatten. Een spec test gerelateerde functionaliteit. In een spec kunnen één of meerdere test cases (&lt;em&gt;expectations&lt;/em&gt;) gedefinieerd zijn. Met de standaard &lt;a href=&quot;https://github.com/pivotal/jasmine/wiki/Matchers&quot;&gt;&lt;em&gt;matchers&lt;/em&gt;&lt;/a&gt; van Jasmine (functies zoals &lt;code&gt;toEqual()&lt;/code&gt;, &lt;code&gt;toBe()&lt;/code&gt;, &lt;code&gt;toMatch()&lt;/code&gt;, &lt;code&gt;toBeUndefined()&lt;/code&gt; etc.) kun je verschillende scenario&#39;s testen.&lt;/p&gt;
  13761. &lt;p&gt;Hoe schrijf je een spec? Belangrijke leidraden voor TDD zijn:&lt;/p&gt;
  13762. &lt;ol&gt;
  13763. &lt;li&gt;Schrijf eerst je test (dus niet eerst je functionele code)&lt;/li&gt;
  13764. &lt;li&gt;Zie de test falen&lt;/li&gt;
  13765. &lt;li&gt;Schrijf nu de code om de test te laten slagen, op de snelst mogelijke manier, dus niet rekening houdend met eventuele aanpassingen in de code&lt;/li&gt;
  13766. &lt;li&gt;Refactor (verbeter de code zonder de functionaliteit te wijzigen)&lt;/li&gt;
  13767. &lt;li&gt;Herhaal deze stappen&lt;/li&gt;
  13768. &lt;/ol&gt;
  13769. &lt;h2&gt;Voorbeeld&lt;/h2&gt;
  13770. &lt;p&gt;Stel dat je de Fronteers webshop beheert. Een product kan een variabele prijs hebben: De gewone bezoeker betaalt de volle mik, vaste klanten krijgen 20% korting, en Fronteersleden toucheren maar liefst 50%. Als je hier een functie voor wilt schrijven zou je dat volgens TDD met Jasmine als volgt kunnen aanpakken:&lt;/p&gt;
  13771. &lt;p&gt;Maak een suite aan (&lt;code&gt;/spec/FronteersShopSpec.js&lt;/code&gt;) die het component FronteersShop en de nog te schrijven functie calcDiscount() gaat testen:&lt;/p&gt;
  13772. &lt;pre&gt;&lt;code&gt;describe(&amp;quot;FronteersShop&amp;quot;, function() {
  13773.  
  13774.  var fs;
  13775.  var CLIENTTYPE_MEMBER    = &#39;member&#39;,
  13776.      CLIENTTYPE_FRONTEERS = &#39;fronteers&#39;,
  13777.      CLIENTTYPE_NONMEMBER = &#39;other&#39;;
  13778.  
  13779.  // Is executed before each spec:
  13780.  beforeEach(function() {
  13781.    fs = new FronteersShop();
  13782.  });
  13783.  
  13784. });
  13785. &lt;/code&gt;&lt;/pre&gt;
  13786. &lt;p&gt;De bijbehorende JavaScriptcode (&lt;code&gt;/src/FronteersShop.js&lt;/code&gt;) ziet er dan nog als volgt uit:&lt;/p&gt;
  13787. &lt;pre&gt;&lt;code&gt;function FronteersShop() {
  13788.  // a lot TODO
  13789. }
  13790. &lt;/code&gt;&lt;/pre&gt;
  13791. &lt;p&gt;Unittesten worden doorgaans opgeschreven in begrijpelijke taal, zie achtereenvolgens de beschrijving van een suite, een spec en een expectation:&lt;/p&gt;
  13792. &lt;ul&gt;
  13793. &lt;li&gt;describe &amp;quot;when the discount price is calculated&amp;quot;&lt;/li&gt;
  13794. &lt;li&gt;it &amp;quot;should correctly validate function input&amp;quot;&lt;/li&gt;
  13795. &lt;li&gt;expect(fs.calcDiscount(null)).toBeUndefined();&lt;/li&gt;
  13796. &lt;/ul&gt;
  13797. &lt;p&gt;Dit maakt enerzijds de Jasmine-code self-documenting en geeft anderszijds duidelijk aan waar in de testen fouten optreden.&lt;/p&gt;
  13798. &lt;p&gt;De functie &lt;code&gt;calcDiscount()&lt;/code&gt; willen we twee input-parameters geven:&lt;/p&gt;
  13799. &lt;ul&gt;
  13800. &lt;li&gt;price {Number} - de prijs van het product&lt;/li&gt;
  13801. &lt;li&gt;customerType {String} - het soort klant: &#39;member&#39;, &#39;fronteers&#39; of &#39;other&#39;.&lt;/li&gt;
  13802. &lt;/ul&gt;
  13803. &lt;p&gt;In de eerste stap van onze functie &lt;code&gt;calcDiscount()&lt;/code&gt; kijken we (in een geneste suite) of de twee input-parameters van het verwachte datatype zijn:&lt;/p&gt;
  13804. &lt;pre&gt;&lt;code&gt;describe(&amp;quot;FronteersShop&amp;quot;, function() {
  13805.  
  13806.  var fs;
  13807.  
  13808.  var CLIENTTYPE_MEMBER    = &#39;member&#39;,
  13809.      CLIENTTYPE_FRONTEERS = &#39;fronteers&#39;,
  13810.      CLIENTTYPE_NONMEMBER = &#39;other&#39;;
  13811.  
  13812.  beforeEach(function() {
  13813.    fs = new FronteersShop();
  13814.  });
  13815.  
  13816.  describe(&amp;quot;when the discount price is calculated&amp;quot;, function() {
  13817.  
  13818.    it(&amp;quot;should correctly validate function input&amp;quot;, function() {
  13819.      // Wrong number of expected arguments
  13820.      expect(fs.calcDiscount(1)).toBeUndefined();
  13821.      // First argument of wrong data type
  13822.      expect(fs.calcDiscount(null, CLIENTTYPE_FRONTEERS)).toBeUndefined();
  13823.      // Second argument of wrong data type
  13824.      expect(fs.calcDiscount(100, null)).toBeUndefined();
  13825.      // Input should be accepted
  13826.      // expect(fs.calcDiscount(100, CLIENTTYPE_FRONTEERS)).toBeDefined();
  13827.    });
  13828.  
  13829.  });
  13830.  
  13831. });
  13832. &lt;/code&gt;&lt;/pre&gt;
  13833. &lt;p&gt;De testen zullen falen, want de bijbehorende code ontbreekt. Hier volgt een eerste implementatie van &lt;code&gt;calcDiscount()&lt;/code&gt;:&lt;/p&gt;
  13834. &lt;pre&gt;&lt;code&gt;FronteersShop.prototype.calcDiscount = function(price, customerType) {
  13835.  
  13836.  // Check if parameter &amp;quot;price&amp;quot; is correct, must be floating point number
  13837.  if (isNaN(parseFloat(price)) || (!isFinite(price)) ) {
  13838.    return;
  13839.  }
  13840.  // Check if parameter &amp;quot;customerType&amp;quot; is a String
  13841.  if (typeof customerType !== &#39;string&#39;) {
  13842.    return;
  13843.  }
  13844.  
  13845. }
  13846. &lt;/code&gt;&lt;/pre&gt;
  13847. &lt;p&gt;(Normaal gesproken wil je waarschijnlijk geen kale return doen, maar handel je de fout af. Dat valt buiten de scope van dit artikel.) Met deze code zal de eerste spec slagen en groen worden. Vervolgens moet &lt;code&gt;calcDiscount()&lt;/code&gt; doen waarvoor het in het leven geroepen is, de juiste prijs teruggeven, al dan niet met korting. Eerst schrijven we de spec:&lt;/p&gt;
  13848. &lt;pre&gt;&lt;code&gt;describe(&amp;quot;FronteersShop&amp;quot;, function() {
  13849.  
  13850.   // ...
  13851.  
  13852.  describe(&amp;quot;when the discount price is calculated&amp;quot;, function() {
  13853.  
  13854.    // ....
  13855.  
  13856.    it(&amp;quot;should correctly calculate discount&amp;quot;, function() {
  13857.      // Expect 50% of 100 =&amp;gt; 50
  13858.      expect(fs.calcDiscount(100, CLIENTTYPE_FRONTEERS)).toEqual(50);
  13859.      // Expect 80% of 100 =&amp;gt; 80
  13860.      expect(fs.calcDiscount(100, CLIENTTYPE_MEMBER)).toEqual(80);
  13861.      // Expect 100% of 100 =&amp;gt; 100
  13862.      expect(fs.calcDiscount(100, CLIENTTYPE_NONMEMBER)).toEqual(100);
  13863.      // Check decimals, expect 50% of 17.1 =&amp;gt; 8.55
  13864.      expect(fs.calcDiscount(17.1, CLIENTTYPE_FRONTEERS)).toEqual(8.55);
  13865.    });
  13866.  
  13867.  });
  13868.  
  13869. });
  13870. &lt;/code&gt;&lt;/pre&gt;
  13871. &lt;p&gt;De testen zullen weer falen. Met vallen en opstaan kunnen we dan de bijbehorende JavaScript afleveren:&lt;/p&gt;
  13872. &lt;pre&gt;&lt;code&gt;FronteersShop.prototype.calcDiscount = function(price, customerType) {
  13873.  
  13874.  // ...
  13875.  
  13876.  if (customerType === &#39;member&#39;) {
  13877.    return price * 0.8;
  13878.  } else if (customerType === &#39;fronteers&#39;) {
  13879.    return price * 0.5;
  13880.  } else {
  13881.    return price;
  13882.  }
  13883. };
  13884. &lt;/code&gt;&lt;/pre&gt;
  13885. &lt;p&gt;Hoera, de testpagina kleurt weer groen!&lt;/p&gt;
  13886. &lt;p&gt;Dit is natuurlijk een simpel voorbeeld. Hoe complexer je code, hoe meer de waarde van unittesten toeneemt.&lt;/p&gt;
  13887. &lt;h2&gt;Wat verder?&lt;/h2&gt;
  13888. &lt;p&gt;Om verder up-speed te komen met Jasmine kan het &lt;a href=&quot;http://net.tutsplus.com/tutorials/javascript-ajax/testing-your-javascript-with-jasmine/&quot;&gt;inleidende artikel op Nettuts&lt;/a&gt; erg nuttig zijn. De &lt;a href=&quot;https://github.com/pivotal/jasmine/wiki/Asynchronous-specs&quot;&gt;Jasmine-wiki&lt;/a&gt; biedt alle noodzakelijke informatie. Er zijn veel plugins voor Jasmine beschikbaar, bijvoorbeeld om Jasmine in je IDE te integreren (&lt;a href=&quot;https://github.com/ibolmo/jasmine-jstd-adapter&quot;&gt;JsTestDriver&lt;/a&gt;) of om met zogeheten fixtures de interactie met de DOM te testen (zie de &lt;a href=&quot;https://github.com/velesin/jasmine-jquery&quot;&gt;Jasmine jQuery-plugin&lt;/a&gt;). Het is ook mogelijk om Jasminetesten automatisch uit te voeren in &lt;a href=&quot;http://maven.apache.org/&quot;&gt;Maven&lt;/a&gt; en hen zo een onderdeel te maken van de &lt;a href=&quot;http://en.wikipedia.org/wiki/Continuous_integration&quot;&gt;Continuous Integration&lt;/a&gt;. Mocht je offline zijn dan heb je wellicht iets aan het verhelderende boek van Christian Johansen &lt;a href=&quot;http://tddjs.com/&quot;&gt;Test-Driven JavaScript Development&lt;/a&gt;.&lt;/p&gt;
  13889. &lt;h2&gt;Tot slot&lt;/h2&gt;
  13890. &lt;p&gt;Wanneer moet je nu alles uit de kast halen met unittesten? Als je een JavaScript-library, plugins of herbruikbare componenten schrijft, zijn unittesten een must. Maar ook in langlopende projecten met een snelle release cycle zijn unittesten onmisbaar om mogelijke regressiebugs af te vangen. Zelfs als je korte toevoeging schrijft voor een kleine website kunnen unittesten erg nuttig blijken. Ze laten je anders tegen je code aankijken, waardoor je code robuuster, leesbaarder en makkelijker overdraagbaar wordt. Ook voor front-enders belangrijke waarden.&lt;/p&gt;
  13891. &lt;h2&gt;Over Tom Greuter&lt;/h2&gt;
  13892. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/tom-greuter.jpg&quot; alt=&quot;Foto van tom greuter uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  13893. Tom Greuter is lead front-end developer bij [Info.nl](http://info.nl/) en bestuurslid van Fronteers. Naast het web is hij geboeid door voetbalclub [ФК Томь](http://fctomtomsk.ru/) uit Tomsk. Verder is hij binnen de WHATWG co-author van de draft van het nieuwe HTML6-element &#39;&lt;idle do-not-disturb=&quot;true&quot;&gt;&#39;.
  13894. &lt;p&gt;Donatie: Varkens in nood
  13895. In Nederland leven ieder jaar ruim 20 miljoen intelligente en sociale varkens een verschrikkelijk bestaan in kleine hokken. Stichting &lt;a href=&quot;http://www.varkensinnood.nl/&quot;&gt;Varkens in Nood&lt;/a&gt; komt op voor de varkens. Met beschaafde, actuele en spraakmakende campagnes probeert Varkens in Nood consumenten en supermarkten ervan te overtuigen dat onze varkens een beter leven verdienen. Om de intensieve veehouderij een halt toe te roepen, moet de publieke opinie ten gunste van de dieren veranderen.&lt;/p&gt;
  13896. &lt;/idle&gt;</content>
  13897.  </entry>
  13898.  <entry>
  13899.    <title>Klaar voor de mobiele tsunami</title>
  13900.    <link href="https://www.fronteers.nl/nl/blog/2011/12/klaar-voor-de-mobiele-tsunami"/>
  13901.    <updated>2011-12-17T00:00:00Z</updated>
  13902.    <id>https://www.fronteers.nl/nl/blog/2011/12/klaar-voor-de-mobiele-tsunami</id>
  13903.    <content xml:lang="nl" type="html">&lt;p&gt;Als ze het niet nu al doen, wordt 2012 het jaar waarin je klanten je gaan vragen om een mobiele website. Hier zijn wat snelle wenken voor diegenen onder ons die mobiel nog niet echt goed bestudeerd hebben.&lt;/p&gt;
  13904. &lt;h2&gt;Eerste testen&lt;/h2&gt;
  13905. &lt;p&gt;Je hebt waarschijnlijk al een smartphone voor prive-gebruik. Kijk er eens op naar je recente projecten. Waarschijnlijk zie je al direct enige zaken die voor verbetering vatbaar zijn. Maak een lijstje, en spreek met jezelf af dat je hier in je volgende project iets aan gaat doen.&lt;/p&gt;
  13906. &lt;p&gt;Let op: ik zeg hier &lt;em&gt;smartphone&lt;/em&gt;, en niet tablet! Voor je eerste tests is een tablet minder geschikt, omdat het scherm niet voldoende afwijkt van dat van desktopcomputers. Een extreem verschil in schermgrootte zet je sneller op het goede spoor dan schermen die slechts iets kleiner dan het gemiddelde desktopscherm zijn.&lt;/p&gt;
  13907. &lt;p&gt;Maak je nog niet teveel zorgen over representativiteit van je smartphone: zelfs als je uitsluitend een iPhone of Android bezit, kan een snelle test je toch al iets nuttigs vertellen over mobiele websites. De belangrijkste wijziging ten opzichte van een ouderwetse desktop-site is het kleine scherm. Bedenk wat je er qua design en interactie aan wilt doen; later in dit artikel vind je de technische tip die je hiervoor nodig hebt.&lt;/p&gt;
  13908. &lt;h2&gt;Eén site of meerdere sites?&lt;/h2&gt;
  13909. &lt;p&gt;Idealiter vraagt je klant je om een geheel nieuwe website die zowel op desktop als op tablet en mobiel werkt. Op deze manier kan je direct aan de slag met nieuwe methodes en technieken—en wordt &#39;t nog betaald ook.&lt;/p&gt;
  13910. &lt;p&gt;Helaas zullen sommige klanten, vooral de kleinere, je vragen om hun site snel geschikt te maken voor mobiel. Lage kosten zijn hierbij belangrijk, dus je kunt je nog niet betaald wekenlang gaan uitleven.&lt;/p&gt;
  13911. &lt;p&gt;Er zijn twee basiskeuzes: of met behulp van media queries (die we zodadelijk zullen bespreken) enkele extra CSS-regels voor kleine schermen toevoegen, of een geheel aparte mobiele website opzetten, en mobiele browsers middels een server-side browser detect daar naartoe doorsturen.&lt;/p&gt;
  13912. &lt;h2&gt;Geen van beide oplossingen is ideaal:&lt;/h2&gt;
  13913. &lt;ul&gt;
  13914. &lt;li&gt;Als je met media queries wat extra CSS invoegt, zorgt dat er wel voor dat de site er acceptabel uitziet, maar kan de site te zwaar blijven voor mobiele connecties. Immers, je kunt een groot plaatje of een video die niet geschikt is voor mobiel wel een snelle &lt;code&gt;display: none;&lt;/code&gt; meegeven, maar daarmee voorkom je niet dat de browser het bestand downloadt.&lt;/li&gt;
  13915. &lt;li&gt;Als je een aparte mobiele website maakt, zondig je tegen het One Web-principe. Het is zelden echt nodig om een aparte site voor mobiel te maken, en het bijhouden van twee sites in plaats van een zorgt ook voor de nodige administratieve traagheid. Een goed CMS kan hier uitkomst bieden, maar ... naja, we weten allemaal hoe het met CMS&#39;en gesteld is.&lt;/li&gt;
  13916. &lt;li&gt;Bovendien is er voor deze oplossing ook nog een goede browser detect nodig. En die zijn dun gezaaid.&lt;/li&gt;
  13917. &lt;/ul&gt;
  13918. &lt;p&gt;Niettemin zullen deze twee tussenoplossingen waarschijnlijk je enige alternatieven zijn tijdens je eerste mobiele opdrachten. Klanten hebben nou eenmaal niet altijd het budget dat eigenlijk nodig is.&lt;/p&gt;
  13919. &lt;h2&gt;De grote truc&lt;/h2&gt;
  13920. &lt;p&gt;Het maken van een mobiele site kent vele technische trucs en eigenaardigheden, maar één daarvan steekt met kop en schouders boven de rest uit: de combinatie van &#39;meta viewport&#39; en &lt;code&gt;width&lt;/code&gt; media queries.&lt;/p&gt;
  13921. &lt;p&gt;Dit werkt als volgt. Allereerst voeg je in de &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; van het document de volgende tag toe:&lt;/p&gt;
  13922. &lt;pre&gt;&lt;code&gt;&amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width&amp;quot;&amp;gt;
  13923. &lt;/code&gt;&lt;/pre&gt;
  13924. &lt;p&gt;Dit beveelt de browser de website zo te tonen dat hij precies op het scherm past en de gebruiker niet hoeft in te zoomen om de inhoud te lezen. De exacte breedte van de site hangt af van het apparaat: een iPhone maakt de site 320 pixels breed, terwijl de verschillende Androids kunnen varieren van 240 tot 480. Tablets nemen meestal een breedte tussen de 600 en 1000 pixels.&lt;/p&gt;
  13925. &lt;p&gt;De truc hier is dat deze breedte gekozen is door de fabrikant van het apparaat (of de browser), en dat alle fabrikanten tegenwoordig de moeite nemen om deze breedte goed af te stellen. De meta viewport wordt immers al op behoorlijk veel sites gebruikt, en nieuwe apparaten en browsers moeten zorgen dat ze deze sites goed tonen.&lt;/p&gt;
  13926. &lt;p&gt;Nu krijgt je site dus de ideale breedte op (bijna) alle apparaten. Hierna wordt het tijd voor de tweede grote truc: &lt;code&gt;width&lt;/code&gt; media queries. Dat gaat als volgt:&lt;/p&gt;
  13927. &lt;pre&gt;&lt;code&gt;@media all and (min-width: 600px) {
  13928.  #sidebar {
  13929.    float: left;
  13930.    width: 20%;
  13931.  }
  13932. }
  13933. &lt;/code&gt;&lt;/pre&gt;
  13934. &lt;p&gt;Nu krijgt het element &lt;code&gt;#sidebar&lt;/code&gt; een &lt;code&gt;float: left;&lt;/code&gt; en een breedte van 20%, maar alleen als de schermgrootte tenminste 600 pixels is. Is dat niet het geval, dan wordt de CSS rule nooit uitgevoerd.&lt;/p&gt;
  13935. &lt;p&gt;Je zou ook het omgekeerde kunnen doen:&lt;/p&gt;
  13936. &lt;pre&gt;&lt;code&gt;#sidebar {
  13937.  float: left;
  13938.  width: 20%;
  13939. }
  13940. @media all and (max-width: 600px) {
  13941.  #sidebar {
  13942.    float: none;
  13943.    width: auto;
  13944.  }
  13945. }
  13946. &lt;/code&gt;&lt;/pre&gt;
  13947. &lt;p&gt;Nu wordt in eerste instantie de eerste rule uitgevoerd, maar als de breedte van de site &lt;code&gt;600px&lt;/code&gt; of minder is, wordt bij nader inzien &lt;code&gt;float&lt;/code&gt; uitgezet en komt de &lt;code&gt;width&lt;/code&gt; weer op &lt;code&gt;auto&lt;/code&gt; te staan.&lt;/p&gt;
  13948. &lt;p&gt;Technisch gezien is er geen verschil tussen de twee methodes, maar uit oogpunt van beheersbaarheid verdient de eerste de voorkeur.&lt;/p&gt;
  13949. &lt;p&gt;De grens van &lt;code&gt;600px&lt;/code&gt; is hier slechts een voorbeeld: het zou goed kunnen dat jouw design om net een andere grens vraagt. Ook kan je meerdere grenzen gebruiken; bijvoorbeeld 600 en 900 pixels.&lt;/p&gt;
  13950. &lt;p&gt;Het is het beste om deze grenzen proefondervindelijk vast te stellen: maak een (ruw) ontwerp, verklein je browservenster, en kijk wanneer het ontwerp echt te lelijk of te onoverzichtelijk wordt. Als dat gebeurt, wordt het tijd een nieuwe grens te definiëren en extra instructies in een media query te zetten.&lt;/p&gt;
  13951. &lt;p&gt;Als je de meta viewport combineert met de &lt;code&gt;width&lt;/code&gt; media query, heb je de voornaamste CSS-stap op weg naar een universele site gezet.&lt;/p&gt;
  13952. &lt;h2&gt;Browsers&lt;/h2&gt;
  13953. &lt;p&gt;Zodra je mobile webontwikkelen serieus gaat aanpakken, kom je op de vraag in welke browsers je moet testen. De leidraad is uiteraard de browserverdeling die het statistiekenpakket van je klant laat zien, maar als dat pakket niet zo goed is, geen aparte mobiele statistieken bijhoudt, of helemaal afwezig is, moet je een gok nemen.&lt;/p&gt;
  13954. &lt;p&gt;Deze gok dien je uiteraard te baseren op algemene Nederlandse mobiele browserstatistieken, en de enige bron hiervoor is &lt;a href=&quot;http://gs.statcounter.com/#mobile_browser-NL-yearly-2011-2011-bar&quot;&gt;StatCounter&lt;/a&gt;. Hieruit blijkt dat iPhone en Android overweldigend dominant zijn: samen hebben ze ruim 80% van de markt in handen. Op grote afstand volgen Nokia, BlackBerry en Opera.&lt;/p&gt;
  13955. &lt;p&gt;Dus je eerste prioriteit is Safari voor iOS en Android WebKit—waarvan de laatste helaas niet zo&#39;n geweldige browser is. Beide zijn gebaseerd op WebKit en beide ondersteunen CSS en JavaScript goed, maar je zult snel merken dat Android WebKit wat houteriger omgaat met dingen als touch events en animaties.&lt;/p&gt;
  13956. &lt;p&gt;Wat goed nieuws: Internet Explorer doet er niet toe op mobiel. Het zou kunnen dat de nieuwe Nokia Windows Phones een succes worden, en dan zal je gedwongen worden weer IE tests te doen, maar dat is dan in elk geval op IE9.&lt;/p&gt;
  13957. &lt;p&gt;Ik raad je ten sterkste aan aan je iPhone/Android basispakket ook &lt;a href=&quot;http://www.opera.com/mobile/&quot;&gt;Opera Mini&lt;/a&gt; toe te voegen: hoewel deze browser niet zo vreselijk populair is in Nederland, leert het webontwikkelen voor Opera Mini je heel veel over het mobiele web.&lt;/p&gt;
  13958. &lt;p&gt;Opera Mini is een zogenaame proxy browser, wat betekent dat een HTTP request niet direct naar de opgevraagde site gaat, maar naar een Opera Mini-server. Deze server vraagt alle noodzakelijke bestanden op, bouwt de pagina op en stuurt daarna in essentie een plaatje door naar de Opera Mini-client op de telefoon. Het grote voordeel is dat de browser op de telefoon bijna niets hoeft te kunnen, wat betekent dat hij ook kan draaien op een oude (en dus technisch inferieure) telefoon. Bovendien is de data die naar de telefoon gezonden wordt, zeer sterk gecomprimeerd, wat de gebruiker behoorlijk in datakosten kan schelen. Vooral voor mensen die op roaming zijn aangewezen, is Opera Mini een uitkomst. (Ikzelf gebruik hem altijd in het buitenland, en tegenwoordig meestal ook terwijl ik in Nederland ben. Zelfs op mijn iPhone.)&lt;/p&gt;
  13959. &lt;p&gt;Opera Mini ondersteunt wel JavaScript, maar elke JavaScript function call vereist een nieuw request aan de Opera Mini-server, die berekent hoe de nieuwe pagina er uit komt te zien en het resultaat weer doorstuurt. Er is dus geen client-side interactiviteit mogelijk.&lt;/p&gt;
  13960. &lt;p&gt;Dit alles zorgt er voor dat je van het ontwikkelen voor Opera Mini meer leert dan van ontwikkelen voor iPhone en Android, en daarom raad ik iedereen aan deze browser in hun lijstje op te nemen.&lt;/p&gt;
  13961. &lt;p&gt;BlackBerry heeft vanaf OS6 een nieuwe, uitstekende browser die op WebKit gebaseerd is. Hij is, na Safari, de beste mobiele browser die er is, dus hier hoef je geen problemen te verwachten. Helaas geldt dit niet voor de oude BlackBerry browser op OS5 en lager: vooral JavaScript is hier vrijwel niet mogelijk wegens volstrekte afwezigheid van performance. Mocht je een complex script schrijven, gebruik dan een harde browser detect om het script voor BlackBerry 5 en lager geheel uit te schakelen.&lt;/p&gt;
  13962. &lt;p&gt;De Nokia-browser, tenslotte, is ook op WebKit gebaseerd, en is redelijk, maar niet overweldigend goed. Als deze browser voor je van belang is, zorg er dan voor dat je zowel oude als nieuwe Nokia-toestellen tot je beschikking hebt.&lt;/p&gt;
  13963. &lt;h2&gt;Toestellen kopen&lt;/h2&gt;
  13964. &lt;p&gt;Dat brengt ons op het laatste onderwerp: welke toestellen moet je hebben?&lt;/p&gt;
  13965. &lt;p&gt;Je moet daadwerkelijke mobiele telefoons hebben. Hoewel emulators je kunnen helpen, zijn ze &lt;em&gt;niet goed genoeg&lt;/em&gt; voor serieuze mobiele webontwikkelaars. Je moet een telefoon in je handen hebben en er mee werken zoals een gebruiker dat doet, anders kan je je site niet afdoende testen.&lt;/p&gt;
  13966. &lt;p&gt;Je dient dus budget in te plannen voor de aanschaf van mobiele telefoons. Dit is gewoon een zakelijke uitgave die je uiteindelijk weer aan je mobiele klanten terugverdient.&lt;/p&gt;
  13967. &lt;p&gt;Als eerste raad ik je aan je te concentreren op iPhone en Android. Waarschijnlijk heb je er daar al een van als je eigen mobiele telefoon.&lt;/p&gt;
  13968. &lt;p&gt;Het beste is om meteen twee Androids te nemen, aangezien er wat subtiele verschillen zijn tussen de Androids van de verschillende merken. Je kunt bijvoorbeeld een Samsung en een HTC nemen. Zorg er ook voor dat ze verschillende schermgroottes hebben, en dat ze beide verschillen van de iPhone.&lt;/p&gt;
  13969. &lt;p&gt;Installeer Opera Mini op deze toestellen: de browser is beschikbaar voor iPhone, Android, en nog een boel andere platforms.&lt;/p&gt;
  13970. &lt;p&gt;Heb je daarna nog geld over, dan is het verstandig aan een Nokia te gaan denken. Kies een redelijk populair Symbian model: veel mensen hebben zo&#39;n telefoon nog op zak, hoewel ze er lang niet allemaal mee surfen. Of je kan gelijk in het diepe springen en een gloednieuwe Windows Phone kopen.&lt;/p&gt;
  13971. &lt;p&gt;Tenslotte zou je aan een BlackBerry kunnen denken. Koop dan een nieuwe (OS6 of hoger), en je hebt direct de op een na beste mobiele browser tot je beschikking.&lt;/p&gt;
  13972. &lt;p&gt;Koop ook eens een toestel dat niet alleen maar een touchscreen heeft, maar ook (of alleen maar) een toetsenbord of four-way navigation. Niet alle mobiele gebruikers navigeren per touchscreen, en je zal ook andere input modes moeten leren kennen. Oudere Nokia&#39;s en BlackBerry&#39;s zijn hier prima geschikt voor.&lt;/p&gt;
  13973. &lt;p&gt;Ook een tablet zou geen gekke investering zijn. Uiteraard ligt een iPad het meest voor de hand, maar je hebt hier uit testoogpunt niet zo heel veel aan. De browser is exact dezelfde als op de iPhone, dus het enige verschil is de schermgrootte, en dat is iets wat elke tablet je geeft. Denk ook eens aan een Android-tablet (hoewel die niet heel erg fantastisch in het gebruik zijn) of aan een BlackBerry PlayBook (uitstekende browser, en verder helemaal niet slecht, al zou de batterijduur wel wat beter mogen).&lt;/p&gt;
  13974. &lt;p&gt;Probeer er voor te zorgen dat je tenminste elk half jaar of zo een nieuw apparaat kunt kopen. Niet alleen breid je zo gestaag je collectie uit, maar je kunt ook inspelen op veranderingen in de mobiele markt. Wat als webOS ineens door een grote partij wordt gelanceerd? Of als het mysterieuze Tizen-project toch iets blijkt voor te stellen? In dat geval moet je je kunnen veroorloven een nieuw testapparaat te kopen.&lt;/p&gt;
  13975. &lt;h2&gt;Tot slot&lt;/h2&gt;
  13976. &lt;p&gt;Ik hoop dat deze collectie tips je helpt je eerste schreden naar webontwikkeling voor alle apparaten te zetten.&lt;/p&gt;
  13977. &lt;p&gt;En zeg nou zelf, een dynamisch nieuw ecosysteem met tien operating systems en vijftien browsers is toch veel interessanter dan altijd maar diezelfde vijf saaie desktop-browsers waarvan we ondertussen elk bugje en hikje kennen?&lt;/p&gt;
  13978. &lt;p&gt;Over Peter-Paul Koch
  13979. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/peter-paul-koch.jpg&quot; alt=&quot;Foto van peter paul koch&quot; /&gt;
  13980. Peter-Paul Koch is oprichter en voorzitter van Fronteers, en houdt de stand van zaken in de chaotische mobiele browsermarkt bij op &lt;a href=&quot;http://quirksmode.org/&quot;&gt;QuirksMode.org&lt;/a&gt;. Hij spreekt in binnen- en buitenland, doet wat consultancy, en werkt gestaag aan zijn mobiele telefooncollectie, die op dit moment uit tweeëntwintig prachtexemplaren bestaat. Zijn volgende leerproces wordt het op het gehoor leren herkennen van mobiele telefoons aan de hand van het geluid dat ze maken als ze op de grond vallen.&lt;/p&gt;
  13981. &lt;p&gt;Donatie: &lt;a href=&quot;https://www.bof.nl/&quot;&gt;Bits of Freedom&lt;/a&gt;
  13982. Waarom Bits of Freedom? Omdat digitale burgerrechten steeds belangrijker worden.&lt;/p&gt;
  13983. </content>
  13984.  </entry>
  13985.  <entry>
  13986.    <title>Learn you a Flexbox for Great Good!</title>
  13987.    <link href="https://www.fronteers.nl/nl/blog/2011/12/learn-you-a-flexbox-for-great-good"/>
  13988.    <updated>2011-12-16T00:00:00Z</updated>
  13989.    <id>https://www.fronteers.nl/nl/blog/2011/12/learn-you-a-flexbox-for-great-good</id>
  13990.    <content xml:lang="nl" type="html">&lt;p&gt;Dus...je wilt iets weten over Flexbox; misschien heb je er wel eens van gehoord, of misschien heb je één van de vele &lt;a href=&quot;http://www.the-haystack.com/2010/01/23/css3-flexbox-part-1&quot;&gt;tutorials&lt;/a&gt; erover gelezen. Het kan zelfs zijn dat je er al mee gewerkt hebt.&lt;/p&gt;
  13991. &lt;p&gt;Vergeet alles wat je over Flexbox weet: we beginnen opnieuw! De spec is namelijk veranderd; de nieuwste versie verscheen op 29 november 2011!&lt;/p&gt;
  13992. &lt;h2&gt;Wat heb je nodig?&lt;/h2&gt;
  13993. &lt;p&gt;Chrome Canary heeft een deel van de spec geïmplementeerd. Als je mee wilt doen heb je niets anders nodig dan Chrome Canary en je favoriete text editor.&lt;/p&gt;
  13994. &lt;ul&gt;
  13995. &lt;li&gt;Chrome Canary: &lt;a href=&quot;http://tools.google.com/dlpage/chromesxs&quot;&gt;http://tools.google.com/dlpage/chromesxs&lt;/a&gt;;&lt;/li&gt;
  13996. &lt;li&gt;Je favoriete text editor: &lt;a href=&quot;http://www.vim.org/&quot;&gt;http://www.vim.org/&lt;/a&gt; (Relax, &lt;em&gt;relax&lt;/em&gt;)&lt;/li&gt;
  13997. &lt;/ul&gt;
  13998. &lt;p&gt;Laten we beginnen!&lt;/p&gt;
  13999. &lt;h2&gt;Wat is Flexbox?&lt;/h2&gt;
  14000. &lt;p&gt;Flexbox is de roepnaam van CSS Flexible Box Layout Module. Het is één van de CSS Working Drafts dat zich bezighoudt met layout. Flexbox biedt een aangepast &lt;em&gt;box model&lt;/em&gt; aan, die voor gebruikersinterfaces is geoptimaliseerd. In het kort: de kinderen van een “box” kunnen horizontaal of verticaal binnen de box worden geplaatst, en de overblijvende ruimte kan worden verdeeld over één of meer van de kinderen. Het nesten van dit soort boxes is ook mogelijk, waardoor complexe layouts mogelijk zijn.&lt;/p&gt;
  14001. &lt;h2&gt;Pas op!&lt;/h2&gt;
  14002. &lt;p&gt;Er zijn andere CSS layout modules in ontwikkeling die wellicht veel beter zullen zijn voor algehele pagina-layout! Flexbox is mooi en eenvoudig, maar wordt bij het nesten van veel boxes vrij snel complex. Het is zeker &lt;a href=&quot;http://www.xanthir.com/blog/b4580&quot; title=&quot;Why Flexboxes Aren&#39;t Good for Page Layout&quot;&gt;geen oplossing voor alle soorten layout&lt;/a&gt;. Maar voor UI-componenten zoals forms, toolbars of kolommen en rijen met inhoudsblokken die anders gefloat zouden zijn, is Flexbox zeker een uitkomst. Flexbox is ook bedoeld om lief te spelen met alle andere aspecten van CSS, dus hebben de flexbox-regels enkel invloed op de kinderen van een flexbox.&lt;/p&gt;
  14003. &lt;h2&gt;Three Little Boxes&lt;/h2&gt;
  14004. &lt;p&gt;Als je een beetje lui bent, kun je de &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/flexbox/demo.html&quot;&gt;demopagina&lt;/a&gt; downloaden en bewerken. Anders...&lt;/p&gt;
  14005. &lt;p&gt;Open je editor, maak een eenvoudig HTML-document aan met één box (een &lt;code&gt;div&lt;/code&gt; in dit geval):&lt;/p&gt;
  14006. &lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
  14007. &amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt;
  14008.  &amp;lt;head&amp;gt;
  14009.    &amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;gt;
  14010.    &amp;lt;title&amp;gt;Flexbox&amp;lt;/title&amp;gt;
  14011.  &amp;lt;/head&amp;gt;
  14012.  &amp;lt;body&amp;gt;
  14013.    &amp;lt;div&amp;gt;
  14014.    &amp;lt;/div&amp;gt;
  14015.  &amp;lt;/body&amp;gt;
  14016. &amp;lt;/html&amp;gt;
  14017. &lt;/code&gt;&lt;/pre&gt;
  14018. &lt;p&gt;Prachtig. Maar we willen natuurlijk iets zien, dus moeten we wat stijl toevoegen:&lt;/p&gt;
  14019. &lt;pre&gt;&lt;code&gt;&amp;lt;style&amp;gt;
  14020.  body &amp;gt; div {
  14021.    height: 500px;
  14022.    padding: 1em;
  14023.    background-color: gray;
  14024.  }
  14025. &amp;lt;/style&amp;gt;
  14026. &lt;/code&gt;&lt;/pre&gt;
  14027. &lt;p&gt;Nu voegen we drie boxes toe aan onze eerste box. Dit zijn (uiteraard) de kinderen:&lt;/p&gt;
  14028. &lt;pre&gt;&lt;code&gt;&amp;lt;div&amp;gt;
  14029.  &amp;lt;div&amp;gt;A&amp;lt;/div&amp;gt;
  14030.  &amp;lt;div&amp;gt;B&amp;lt;/div&amp;gt;
  14031.  &amp;lt;div&amp;gt;C&amp;lt;/div&amp;gt;
  14032. &amp;lt;/div&amp;gt;
  14033. &lt;/code&gt;&lt;/pre&gt;
  14034. &lt;p&gt;En deze dienen ook wat stijl te krijgen:&lt;/p&gt;
  14035. &lt;pre&gt;&lt;code&gt;div &amp;gt; div {
  14036.  width: 100px;
  14037.  height: 100px;
  14038.  background-color: pink;
  14039. }
  14040. &lt;/code&gt;&lt;/pre&gt;
  14041. &lt;p&gt;Bekijk de pagina in Canary. We zien niets vreemds: de drie block-level elementen zitten netjes onder elkaar, zoals block-level elementen dat doen. Maar daar brengen we verandering in! We hebben een kleine Flexbox-speeltuin gemaakt; nu gaan we er in spelen.&lt;/p&gt;
  14042. &lt;h2&gt;Het Flexbox Box Model toekennen aan een box&lt;/h2&gt;
  14043. &lt;p&gt;Wij willen de kracht van Flexbox toepassen op de drie kinderen van onze parent &lt;code&gt;div&lt;/code&gt;. Dit wordt gedaan met de &lt;code&gt;display&lt;/code&gt; property, jou vast niet onbekend. Door &lt;code&gt;display: flexbox;&lt;/code&gt; te geven aan onze parent &lt;code&gt;div&lt;/code&gt;, kunnen we de kracht van Flexbox beginnen te gebruiken. Maar stel dat onze parent geen block-level element moet zijn, maar inline? We hebben toch onze &lt;code&gt;display&lt;/code&gt; property al in gebruik? Geen paniek, in dat geval gebruiken we &lt;code&gt;display: inline-flexbox&lt;/code&gt;. Pfieuw!&lt;/p&gt;
  14044. &lt;pre&gt;&lt;code&gt;body &amp;gt; div {
  14045.  display: -webkit-flexbox; /* Prefix nog nodig, helaas */
  14046.  height: 500px;
  14047.  padding: 1em;
  14048.  background-color: gray;
  14049. }
  14050. &lt;/code&gt;&lt;/pre&gt;
  14051. &lt;p&gt;Nu wordt het Flexbox Box Model toegepast op onze drie kinder-&lt;code&gt;div&lt;/code&gt;s, die wij voortaan &lt;em&gt;flexbox items&lt;/em&gt; gaan noemen. Er zijn regels die aangeven wat een flexbox item is; als wij bijvoorbeeld &lt;code&gt;position: absolute;&lt;/code&gt; zouden geven aan één kind, dat is dat kind niet meer een flexbox item! Logisch, maar toch. Lees in de spec &lt;a href=&quot;http://www.w3.org/TR/css3-flexbox/#flex-items&quot;&gt;meer over flexbox items&lt;/a&gt;.&lt;/p&gt;
  14052. &lt;p&gt;Terug naar onze oefening. Kijk even in de browser: omdat de Flexbox default is om de kinderen horizontaal te plaatsen, ziet het er uit alsof wij &lt;code&gt;inline&lt;/code&gt;, &lt;code&gt;inline-block&lt;/code&gt; of &lt;code&gt;float&lt;/code&gt; op deze elementen heb toegepast. Op zich niets bijzonders, behalve het feit dat wij geen stijlen aan de kinderen hebben moeten toevoegen om dit effect te krijgen.&lt;/p&gt;
  14053. &lt;h2&gt;Source-order onafhankelijkheid&lt;/h2&gt;
  14054. &lt;p&gt;De naam “Flexible Box Module” komt van de mogelijkheid om flexibel om te gaan met resterende ruimte binnen een box. Dit is werkelijk fantastisch, maar Flexbox biedt iets dat minstens zo belangrijk is: source-order onafhankelijkheid. Laten we spelen met nog een paar Flexbox properties om de volgorde van onze flexbox items te manipuleren.&lt;/p&gt;
  14055. &lt;pre&gt;&lt;code&gt;body &amp;gt; div {
  14056.  display: -webkit-flexbox;
  14057.  -webkit-flex-flow: row-reverse;
  14058.  height: 500px;
  14059.  padding: 1em;
  14060.  background-color: gray;
  14061. }
  14062. &lt;/code&gt;&lt;/pre&gt;
  14063. &lt;p&gt;OMG. Onze flexbox items zijn rechts uitgelijnd, en de volgorde is omgedraaid! Dit doen we met de &lt;code&gt;flex-flow&lt;/code&gt; property, die een default van &lt;code&gt;row&lt;/code&gt; kent. &lt;code&gt;row-reverse&lt;/code&gt; draait alles precies andersom. Naast &lt;code&gt;row&lt;/code&gt; en &lt;code&gt;row-reverse&lt;/code&gt; zijn er ook &lt;code&gt;column&lt;/code&gt; en &lt;code&gt;column-reverse&lt;/code&gt;. Probeer &lt;code&gt;column&lt;/code&gt; even uit (&lt;code&gt;column-reverse&lt;/code&gt; is nog niet geïmplementeerd), en zet daarna de waarde weer op &lt;code&gt;row&lt;/code&gt; voor onze volgende stap.&lt;/p&gt;
  14064. &lt;p&gt;Overigens, &lt;code&gt;flex-flow&lt;/code&gt; accepteert ook een waarde voor het “wrappen” van flexbox items naar nieuwe “rows” (of columns, afhankelijk van de waarde die je gebruikt); &lt;code&gt;wrap&lt;/code&gt; of &lt;code&gt;wrap-reverse&lt;/code&gt; zijn echter nog niet in Canary geïmplementeerd. Ik zal dat wel eens vaker moeten zeggen. In elk geval, stel dat we &lt;code&gt;wrap&lt;/code&gt; nu konden gebruiken, dan zouden we zoiets kunnen gebruiken:&lt;/p&gt;
  14065. &lt;pre&gt;&lt;code&gt;body &amp;gt; div {
  14066.  display: -webkit-flexbox;
  14067.  -webkit-flex-flow: row wrap; /* `wrap` zorgt voor een multi-line flexbox. */
  14068.  height: 500px;
  14069.  padding: 1em;
  14070.  background-color: gray;
  14071. }
  14072. &lt;/code&gt;&lt;/pre&gt;
  14073. &lt;h2&gt;Spiegel, spiegel...&lt;/h2&gt;
  14074. &lt;p&gt;Alle properties die te maken hebben met de volgorde, richting of uitlijnen van flexbox items worden beïnvloed door de huidige &lt;em&gt;writing mode&lt;/em&gt;. De writing mode is de oorspronkelijke layoutrichting van de tekst. De meesten van ons in Nederland zijn boven-naar-onderen, links-naar-rechts gewend. Maar zodra wij dat spiegelen, gaan onze properties dat ook doen. In je voorbeeldbestand heb je al kunnen zien wat &lt;code&gt;row-reverse&lt;/code&gt; doet. Maar stel dat je writing mode niet de default (top-bottom, left-right) is maar juist (top-bottom, right-left)? Dan zijn je flexbox items &lt;em&gt;in eerste instantie&lt;/em&gt; al omgekeerd geplaatst. &lt;code&gt;row-reverse&lt;/code&gt; draait dit om, en plaatst ze juist van links naar rechts.&lt;/p&gt;
  14075. &lt;p&gt;Probeer het uit:&lt;/p&gt;
  14076. &lt;pre&gt;&lt;code&gt;body &amp;gt; div {
  14077.  display: -webkit-flexbox;
  14078.  direction: rtl; /* De `writing-mode` property heeft momenteel geen visueel effect in Canary. Dit werkt voor ons voorbeeld. */
  14079.  -webkit-flex-flow: row;
  14080.  height: 500px;
  14081.  padding: 1em;
  14082.  background-color: gray;
  14083. }
  14084. &lt;/code&gt;&lt;/pre&gt;
  14085. &lt;p&gt;Verander &lt;code&gt;row&lt;/code&gt; nu in &lt;code&gt;row-reverse&lt;/code&gt;. Zie je wat er gebeurt?&lt;/p&gt;
  14086. &lt;p&gt;Verwarrend? Een beetje, maar over het algemeen zullen de meeste developers kunnen uitgaan van de default writing mode.&lt;/p&gt;
  14087. &lt;p&gt;Om te begrijpen welk effect een aantal Flexbox properties hebben op flexbox items is het belangrijk om te begrijpen wat de &lt;em&gt;main axis&lt;/em&gt; en &lt;em&gt;cross axis&lt;/em&gt; zijn. De &lt;em&gt;main axis&lt;/em&gt; is de as waarop de flexbox items worden geplaatst. Met andere woorden, als de flexbox items horizontaal (&lt;code&gt;row&lt;/code&gt;, dus) worden geplaatst, dan is de horizontale as de &lt;em&gt;main axis&lt;/em&gt;. Verticaal is dan de &lt;em&gt;cross axis&lt;/em&gt;. Bij verticaal geplaatste flexbox items is dat precies andersom: de &lt;em&gt;main axis&lt;/em&gt; is verticaal en de &lt;em&gt;cross axis&lt;/em&gt; is horizontaal.&lt;/p&gt;
  14088. &lt;p&gt;Mja. Dat is lastig uitleggen. Laten we een plaatje tekenen:&lt;/p&gt;
  14089. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/axis.png&quot; alt=&quot;Bij horizontaal geplaatste items is de main axis horizontaal.&quot; /&gt;&lt;/p&gt;
  14090. &lt;p&gt;Onthou main axis en cross axis; we komen er straks op terug.&lt;/p&gt;
  14091. &lt;h2&gt;Order! Order in the court!&lt;/h2&gt;
  14092. &lt;p&gt;Laten we kijken naar een andere property die belooft dat &lt;em&gt;source order&lt;/em&gt; ooit onbelangrijk wordt: &lt;code&gt;flex-order&lt;/code&gt;.&lt;/p&gt;
  14093. &lt;p&gt;In je voorbeeld code, zorg ervoor dat je &lt;code&gt;flex-flow&lt;/code&gt; op &lt;code&gt;row&lt;/code&gt; hebt gezet, en &lt;code&gt;direction: rtl;&lt;/code&gt; hebt verwijderd. Als het goed is, heb je drie flexbox items, A, B en C, linksboven in &lt;code&gt;body &amp;gt; div&lt;/code&gt;. Stel je voor dat we die volgorde niet goed vinden; we willen juist A-C-B. Hiervoor gebruiken we &lt;code&gt;flex-order&lt;/code&gt;:&lt;/p&gt;
  14094. &lt;pre&gt;&lt;code&gt;div &amp;gt; div:nth-child(2) { /* Ja, je zou een class of ID ook kunnen gebruiken, maar goed. */
  14095.  -webkit-flex-order: 1;
  14096. }
  14097. &lt;/code&gt;&lt;/pre&gt;
  14098. &lt;p&gt;Kijk maar even in je browser; de volgorde van de flexbox items zou nu A-C-B moeten zijn.&lt;/p&gt;
  14099. &lt;p&gt;&lt;code&gt;flex-order&lt;/code&gt; plaatst flexbox items in &lt;em&gt;geordende groepen&lt;/em&gt;. Boxes zonder expliciete &lt;code&gt;flex-order&lt;/code&gt; zitten in groep 0, en blijven in volgorde van broncode. In dit geval wordt de tweede &lt;code&gt;div&lt;/code&gt;, B, in groep 1 geplaatst. A en C blijven in groep 0, in broncode volgorde (A-C dus). Als we B-A-C wilden, dan hadden we B in groep 0 kunnen laten, en A en C in groep 1 kunnen plaatsen:&lt;/p&gt;
  14100. &lt;pre&gt;&lt;code&gt;div &amp;gt; div:first-child,
  14101. div &amp;gt; div:last-child {
  14102.  -webkit-flex-order: 1;
  14103. }
  14104. &lt;/code&gt;&lt;/pre&gt;
  14105. &lt;h2&gt;Flexibiliteit&lt;/h2&gt;
  14106. &lt;p&gt;Eén van de mooiste aspecten van Flexbox is waar de naam vandaan komt: flexibiliteit. Wij kunnen bepalen wat er met overblijvende ruimte in onze &lt;code&gt;body &amp;gt; div&lt;/code&gt; (in dit geval) gebeurt. We kunnen het verdelen tussen de flexbox items, of we kunnen één of meer van de flexbox items &lt;em&gt;flexible maken&lt;/em&gt; om die ruimte te gebruiken. Laten we eerst naar flexibiliteit kijken, dan komen we zo terug op het verdelen van de ruimte.&lt;/p&gt;
  14107. &lt;p&gt;Stel dat onze drie flexbox items knoppen zijn in een web app, die ook voor mobiel zal worden gebruikt. Soms hebben we er drie, en soms hebben we er twee. Wij willen eigenlijk zeggen: “Het maakt niet uit hoeveel van jullie er zijn, ik wil dat jullie allemaal even groot worden, en alle beschikbare ruimte gebruiken.” Zoiets zonder Flexbox wordt bijna uitsluitend met JavaScript gedaan. Maar kijk wat er gebeurt als wij onze flexbox items flexibel maken met de &lt;code&gt;flex()&lt;/code&gt; functie:&lt;/p&gt;
  14108. &lt;pre&gt;&lt;code&gt;div &amp;gt; div {
  14109.  /* width: 100px; */
  14110.  width: -webkit-flex(1 0 100px);
  14111.  height: 100px;
  14112.  background-color: pink;
  14113. }
  14114. &lt;/code&gt;&lt;/pre&gt;
  14115. &lt;p&gt;De &lt;code&gt;flex()&lt;/code&gt; functie kan als waarde voor &lt;code&gt;width&lt;/code&gt; en &lt;code&gt;height&lt;/code&gt; worden toegepast. &lt;code&gt;flex()&lt;/code&gt; accepteert drie waarden: positieve flex, negatieve flex en &lt;em&gt;preferred size&lt;/em&gt;. De laatste twee waarden hoefde ik niet te geven; 0 is de default voor negatieve flex en 0px is de default voor &lt;em&gt;preferred size&lt;/em&gt;. In elk geval werkt &lt;code&gt;flex()&lt;/code&gt; als volgt:&lt;/p&gt;
  14116. &lt;ol&gt;
  14117. &lt;li&gt;De flexbox items krijgen de &lt;em&gt;preferred width&lt;/em&gt;;&lt;/li&gt;
  14118. &lt;li&gt;Als er dan nog ruimte over is in de parent, wordt die ruimte verdeeld aan de hand van de positieve flex waarde;&lt;/li&gt;
  14119. &lt;li&gt;Als de flexbox items op preferred width overflow veroorzaken (ze zijn gezamenlijk breder dan de parent), dan wordt de negatieve flex waarde gebruikt. Let wel, de negatieve flex waarde is een positief cijfer (bijv. 2 en niet -2).&lt;/li&gt;
  14120. &lt;/ol&gt;
  14121. &lt;p&gt;Een positieve waarde van 1 betekent min of meer “een gelijk deel van de beschikbare ruimte”. Een waarde van 2 zou betekenen “twee keer zoveel als de ruimte die items met &lt;code&gt;flex(1)&lt;/code&gt; hebben”. Niet helemaal ”twee delen whisky, één deel cola” dus. Laten we het proberen. Typ de volgende code in &lt;em&gt;onder&lt;/em&gt; je regels voor &lt;code&gt;div &amp;gt; div&lt;/code&gt;:&lt;/p&gt;
  14122. &lt;pre&gt;&lt;code&gt;div &amp;gt; div:first-child,
  14123. div &amp;gt; div:last-child {
  14124.  width: -webkit-flex(2);
  14125.  background-color: magenta; /* Hierdoor kunnen we het verschil iets beter zien. Plus, het doet zeer aan je ogen. */
  14126. }
  14127. &lt;/code&gt;&lt;/pre&gt;
  14128. &lt;p&gt;Als je nu in je browser kijkt, zie je dat de eerste en de laatste flexbox items niet twee delen van de beschikbare ruimte hebben, maar &lt;em&gt;twee keer zoveel&lt;/em&gt; als de middelste, die &lt;code&gt;flex(1)&lt;/code&gt; heeft. Ben jij niet blij dat je dit niet in een browser hoeft te implementeren?&lt;/p&gt;
  14129. &lt;p&gt;Let wel, dit betekent ook niet dat de twee buitenste flexbox items &lt;em&gt;twee keer zo breed&lt;/em&gt; zijn als de middelste. Het gaat alleen om hoe de beschikbare ruimte in de parent wordt toegevoegd aan de breedte van de flexbox items.&lt;/p&gt;
  14130. &lt;p&gt;Verwijder die regels weer. Haal nu één van de &lt;code&gt;div&lt;/code&gt;s weg en kijk wat er dan gebeurt. Zet haar daarna terug, want we hebben haar nog nodig.&lt;/p&gt;
  14131. &lt;p&gt;Er zijn veel meer details over &lt;code&gt;flex()&lt;/code&gt;, en ook over de andere properties. Deze vind je allemaal in de spec. Heerlijk leesvoer na een avondje stappen.&lt;/p&gt;
  14132. &lt;h2&gt;Het uitlijnen van flexbox items&lt;/h2&gt;
  14133. &lt;p&gt;Heb je alles onthouden over main axis en cross axis? Mooi. &lt;code&gt;flex-pack&lt;/code&gt; bepaalt namelijk het uitlijnen van elementen langs de main axis. In ons voorbeeldbestandje is dat horizontaal. Om dit effect goed te bekijken, halen we &lt;code&gt;flex()&lt;/code&gt; weg en zetten we de &lt;code&gt;width&lt;/code&gt; weer op &lt;code&gt;100px&lt;/code&gt;:&lt;/p&gt;
  14134. &lt;pre&gt;&lt;code&gt;div &amp;gt; div {
  14135.  width: 100px;
  14136.  height: 100px;
  14137.  background-color: pink;
  14138. }
  14139. &lt;/code&gt;&lt;/pre&gt;
  14140. &lt;p&gt;&lt;code&gt;flex-pack&lt;/code&gt; accepteert vier waarden: &lt;code&gt;start&lt;/code&gt;, &lt;code&gt;end&lt;/code&gt;, &lt;code&gt;justify&lt;/code&gt; en &lt;code&gt;center&lt;/code&gt;. Heel helder. Laten we ze centreren. Dit doen we op de parent:&lt;/p&gt;
  14141. &lt;pre&gt;&lt;code&gt;body &amp;gt; div {
  14142.  display: -webkit-flexbox;
  14143.  -webkit-flex-flow: row;
  14144.  -webkit-flex-pack: center; /* &amp;lt;-- */
  14145.  height: 500px;
  14146.  padding: 1em;
  14147.  background-color: gray;
  14148. }
  14149. &lt;/code&gt;&lt;/pre&gt;
  14150. &lt;p&gt;Speel met de andere waarden totdat je het leuk vindt.&lt;/p&gt;
  14151. &lt;p&gt;Uiteraard is er een property die het uitlijnen regelt op de &lt;em&gt;cross axis&lt;/em&gt;: &lt;code&gt;flex-align&lt;/code&gt;. De mogelijke waarden verschillen een beetje, maar het grootste verschil is dat &lt;code&gt;flex-align&lt;/code&gt; op de &lt;em&gt;flexbox items&lt;/em&gt; wordt toegepast en niet op de flexbox zelf (m.a.w. niet op de parent).&lt;/p&gt;
  14152. &lt;pre&gt;&lt;code&gt;div &amp;gt; div {
  14153.  width: 100px;
  14154.  height: 100px;
  14155.  background-color: pink;
  14156.  -webkit-flex-align: center; /* Ook: start | end | baseline | stretch  &amp;lt;-- Probeer deze waarden ook! */
  14157. }
  14158. &lt;/code&gt;&lt;/pre&gt;
  14159. &lt;p&gt;Niet alle waarden werken nog in Canary, maar je kunt ervan uit gaan dat naarmate de spec definitief wordt, de implementatie vrij snel zal komen. Er is heel veel belangstelling voor Flexbox onder de browsermakers!&lt;/p&gt;
  14160. &lt;h2&gt;Genoeg! Tijd om te spelen&lt;/h2&gt;
  14161. &lt;p&gt;Er zijn nog een paar properties die te maken hebben met multi-line flexboxes, maar omdat we de meeste dingen daarvan niet kunnen uitproberen, laten we het hierbij. Hopelijk hebben we hier voldoende behandeld dat je met Flexbox kunt spelen. Probeer na te denken over mogelijke toepassingen. Hoe zou je Flexbox in kunnen zetten bij een “responsive design”? Welke mogelijkheden biedt dit voor het stijlen van formulier layout? Navigatie?&lt;/p&gt;
  14162. &lt;p&gt;Dit soort specs zijn geweldig om mee te experimenteren. En ondersteuning komt sneller dan je misschien denkt.&lt;/p&gt;
  14163. &lt;p&gt;Veel plezier ermee (en fijne feestdagen) :)&lt;/p&gt;
  14164. &lt;h2&gt;Over Stephen Hay&lt;/h2&gt;
  14165. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/stephen-hay.jpg&quot; alt=&quot;Foto van stephen hay uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  14166. [Stephen](https://twitter.com/stephenhay) is een designer/developer met een sterke interesse in CSS en multi-platform design. Hij spreekt en schrijft ook graag over deze onderwerpen.
  14167. &lt;p&gt;Donatie: ICCF Holland
  14168. Overal (en veel in ons vakgebied) kun je zien dat de inspanningen van enkelingen en kleine groepen mensen een groot verschil kunnen maken. &lt;a href=&quot;http://iccf-holland.org/&quot;&gt;ICCF Holland&lt;/a&gt; is ook zo&#39;n groep: vrijwilligers die kinderen helpen in Kibaale, Uganda. Als je de Vim text editor gebruikt, dan heb je er vast van gehoord: Vim is “charityware”; gebruikers worden gevraagd om een donatie te doen aan ICCF Holland.
  14169. Het project is kleinschalig, en dat spreekt mij erg aan. 99% van al het gedoneerde geld gaat naar het project. Mocht je meer willen weten over dit project: op de website kun je foto&#39;s van het project zien en bezoekverslagen lezen.&lt;/p&gt;
  14170. </content>
  14171.  </entry>
  14172.  <entry>
  14173.    <title>Het platform bouwen</title>
  14174.    <link href="https://www.fronteers.nl/nl/blog/2011/12/het-platform-bouwen"/>
  14175.    <updated>2011-12-15T00:00:00Z</updated>
  14176.    <id>https://www.fronteers.nl/nl/blog/2011/12/het-platform-bouwen</id>
  14177.    <content xml:lang="nl" type="html">&lt;p&gt;&amp;quot;Dat kan beter.&amp;quot; Zo dacht ik zeven jaar geleden over de standaarden voor het web. En eerlijk gezegd, dat is niet echt veranderd. De omvang wel. Toen hadden we qua standaarden HTML, CSS, JavaScript, beetje HTTP, en XML leek belangrijk, maar niemand gebruikte het. Nu is HTML een parser, syntax, taal, omvat het video, audio, en offline applicaties. CSS bestaat uit over dertig min of meer onafhankelijk ontwikkelde componenten, van verticale text layout tot arbitraire matrixtransformaties, van animaties tot kleuren met alpha-kanaal. En het aantal JavaScript API&#39;s is enorm gegroeid, met als doel de traditionele computerplatformen te vervangen. Dat JavaScript zo&#39;n honderd keer sneller is geworden helpt daar natuurlijk in mee.&lt;/p&gt;
  14178. &lt;p&gt;De complexiteit van standaarden is enorm toegenomen. Zo las een standaard eerst als een redelijk technische introductie tot een onderwerp, nu bevat een standaard algoritmes en gedetailleerde eisen om te zorgen dat software op dezelfde manier werkt. Navigatie, garbage collection (het verwijderen van ongebruikte objecten uit het geheugen van de computer), laden van pagina&#39;s met een onbekend MIME type, de volgorde van events relatief tot netwerkactiviteit; alles wordt keurig uitgewerkt. De huidige HTML specificatie vertelt hoe een byte stream, die over het netwerk binnenkomt, wordt omgezet in een set Unicode karakters. Deze worden vervolgens omgezet in tokens en daarvan wordt de DOM opgebouwd. Zo weet iedereen dat &lt;code&gt;&amp;lt;image&amp;gt;&lt;/code&gt; een &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; element wordt.&lt;/p&gt;
  14179. &lt;p&gt;De benodigde precisie vloeit voort uit te de talloze problemen die onnauwkeurige specificaties uit het verleden veroorzaakt hebben. Elke browser implementeerde de ambiguïteiten in specificaties op een andere manier, wat er toe leidde dat pagina&#39;s en code niet op dezelfde manier werkten. Een ander probleem was dat developers vaak fouten maakten in hun code en deze code alleen testten in de dominante browser. &lt;code&gt;width: 20&lt;/code&gt; werkte prima daarin en dus veranderden ze er verder niets aan. Er was nergens beschreven wat &lt;code&gt;width: 20&lt;/code&gt; moest doen en als gevolg werkte het net als &lt;code&gt;width: 20px&lt;/code&gt; in sommige browsers en in andere deed het niets.&lt;/p&gt;
  14180. &lt;p&gt;Binnen het W3C begon de CSS groep hiermee. Grote delen van CSS 2.0 werden herschreven in een revisie, CSS 2.1 genaamd. Deze revisie beschreef de features van CSS in groter detail en hield rekening met het feit dat features incorrect gebruikt konden worden. Dat gaf ook gelijk een extensie-pad voor CSS, want nieuwe features zijn niets meer dan incorrect gebruikte oude features (&lt;code&gt;color: rgba(7, 6, 42, 0.5)&lt;/code&gt; was bijvoorbeeld ooit incorrect gebruik van de &lt;code&gt;color&lt;/code&gt; property).&lt;/p&gt;
  14181. &lt;p&gt;Opschonen van HTML en de DOM begon buiten het W3C, in de WHATWG, en is inmiddels een coöperatieve onderneming. En door het beter definiëren (en daardoor ook vollediger begrijpen) van de fundamentele aspecten van het platform, zoals het &lt;code&gt;Window&lt;/code&gt; object, de same origin policy, en parsen van HTML, wordt het een stuk gemakkelijker om nieuwe features toe te voegen. Zo kun je nu ook SVG en MathML direct in HTML gebruiken, zonder al te veel gedoe.&lt;/p&gt;
  14182. &lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
  14183. &amp;lt;title&amp;gt;SVG in HTML!&amp;lt;/title&amp;gt;
  14184. &amp;lt;p&amp;gt;A circle:&amp;lt;/p&amp;gt;
  14185. &amp;lt;svg viewBox=&amp;quot;0 0 1 1&amp;quot; width=&amp;quot;100px&amp;quot;&amp;gt;
  14186.  &amp;lt;circle cx=&amp;quot;.5&amp;quot; cy=&amp;quot;.5&amp;quot; r=&amp;quot;.5&amp;quot; /&amp;gt;
  14187. &amp;lt;/svg&amp;gt;
  14188. &lt;/code&gt;&lt;/pre&gt;
  14189. &lt;p&gt;Features toevoegen aan het platform gebeurt redelijk informeel. En belangrijker, het is nu gemakkelijker dan ooit tevoren om er aan deel te nemen. De groepen die bij het W3C en de WHATWG werken aan API&#39;s, CSS, en HTML, hebben allemaal publieke mailing lists waar iedereen aan kan deelnemen. Wanneer je een voorstel wilt doen, is het belangrijk om hier op te letten:&lt;/p&gt;
  14190. &lt;ul&gt;
  14191. &lt;li&gt;Vraag niet om een feature, maar leg je probleem uit. Bij het ontwikkelen van features kijken we altijd naar de achterliggende scenario&#39;s (&amp;quot;use cases&amp;quot;) en werken we vanaf daar naar een oplossing. Wel &amp;quot;ik wil Japanse karaoke kunnen weergeven&amp;quot;; niet &amp;quot;ik wil vertical text rendering&amp;quot;.&lt;/li&gt;
  14192. &lt;li&gt;Kun je om je probleem heen werken en doen mensen dat in de praktijk? Timeout ondersteuning voor XMLHttpRequest werd al volop gedaan in het wild, maar vereiste een hoop extra code. Om het makkelijker te maken voor iedereen hebben we XMLHttpRequest uitgebreid met timeout ondersteuning. Andere problemen, zoals het ondersteunen van de camera van de gebruiker, zijn compleet nieuwe functionaliteit en waren eerder onmogelijk, tenzij gebruik werd gemaakt van plugins.&lt;/li&gt;
  14193. &lt;li&gt;Breng je probleem ter discussie. Leg het voor aan collega&#39;s, fora, IRC, en verfijn het gebaseerd op de reacties die je krijgt.&lt;/li&gt;
  14194. &lt;/ul&gt;
  14195. &lt;p&gt;Hierdoor, en uiteindelijke iteratie over mogelijke features die het probleem oplossen, middels specificatie, implementatie, discussie, en uitproberen door web developers, wordt het platform steeds een stukje beter. En kun je morgen iets meer problemen oplossen dan vandaag. Succes ermee! ;-)&lt;/p&gt;
  14196. &lt;h2&gt;Over Anne van Kesteren&lt;/h2&gt;
  14197. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/anne-van-kesteren.jpg&quot; alt=&quot;Foto van anne van kesteren&quot; /&gt;
  14198. [Anne van Kesteren](http://annevankesteren.nl/) chillt &#39;m in Utrecht wanneer hij niet ergens anders is en bouwt aan het platform. Momenteel druk met [XMLHttpRequest](http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html), [Cross-Origin Resource Sharing](http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html), en de nieuwe [DOM](http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html) standaard. Hij werkt voor [Opera Software](http://www.opera.com/), een browsermakertje uit Noorwegen.
  14199. &lt;p&gt;Donatie: &lt;a href=&quot;https://www.eff.org/&quot;&gt;Electronic Frontier Foundation&lt;/a&gt;
  14200. Mijn goede doel keuze is de Electronic Frontier Foundation omdat het beschermen van onze vrijheden en privacy op het internet enorm belangrijk is. Ik match dan ook de donatie van Fronteers.&lt;/p&gt;
  14201. </content>
  14202.  </entry>
  14203.  <entry>
  14204.    <title>Clients from heaven</title>
  14205.    <link href="https://www.fronteers.nl/nl/blog/2011/12/clients-from-heaven"/>
  14206.    <updated>2011-12-14T00:00:00Z</updated>
  14207.    <id>https://www.fronteers.nl/nl/blog/2011/12/clients-from-heaven</id>
  14208.    <content xml:lang="nl" type="html">&lt;p&gt;Deze adventskalender is eigenlijk één grote aanloop naar goede voornemens voor het nieuwe jaar. Want naast meer sporten en minder drinken beloven we onszelf ook dat we eindelijk eens een &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/een-tik-op-de-neus&quot;&gt;goede responsive site&lt;/a&gt; gaan bouwen, &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/javascript-pret-met-alle-karakters-in-een-string&quot;&gt;Javascript pro&lt;/a&gt; gaan worden en alleen nog maar &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/html5-video-een-overzicht&quot;&gt;HTML5 video players&lt;/a&gt; zullen inbouwen.&lt;/p&gt;
  14209. &lt;p&gt;Voor veel Fronteers is er echter één persoon die ons die kans geeft. En die komt toch wat minder in de lijst met goede voornemens voor. Nee, niet de Kerstman … de klant.&lt;/p&gt;
  14210. &lt;p&gt;En terecht. Want die klant is te dom voor woorden. Begrijpt niets van ons ontwerp. &lt;a href=&quot;http://clientsfromhell.net/&quot; title=&quot;Clients from hell&quot;&gt;Stelt onredelijke eisen&lt;/a&gt;. Levert maar geen content aan. Is nooit blij met het eindresultaat. En blijft je achtervolgen.&lt;/p&gt;
  14211. &lt;p&gt;Tenminste, als je de berichtgeving uit onze industrie soms mag geloven. Klantwerk lijkt te worden ervaren als een vervelend bijverschijnsel om websites en apps te mogen bouwen.&lt;/p&gt;
  14212. &lt;h2&gt;Zonde!&lt;/h2&gt;
  14213. &lt;p&gt;Het werken met klanten ervaar ik juist als één van de leukste onderdelen van mijn werk. Eigenlijk heeft die klant, als je eenmaal luistert, af en toe best wel goede ideeën ... Beter gezegd, die invloeden van &#39;buitenaf&#39; zorgen juist voor veel inspiratie en nieuwe inzichten. Maar voordat je daar wat mee kan, zal je het eerst goed moeten inrichten. De afgelopen jaren zijn we daar op mijn werkplek uitgebreid mee bezig geweest. Er is genoeg ruimte voor verbetering, maar ik geloof wel dat we de goede, klantvriendelijke weg zijn ingeslagen.&lt;/p&gt;
  14214. &lt;p class=&quot;note&quot;&gt;
  14215. Note: ik spreek uit het perspectief van werken bij een bureau. Voor freelancers/zzp&#39;ers of bureaus met weinig personeel in dienst zal niet alles even toepasbaar zijn.
  14216. &lt;/p&gt;
  14217. &lt;h2&gt;Geen fffffuuuuuuuuuunctioneel ontwerp&lt;/h2&gt;
  14218. &lt;p&gt;Net als veel andere bureaus zijn we in de afgelopen jaren overgestapt naar een &#39;agile&#39; manier van werken, met SCRUM als bekendste vorm. Op de verschillende agiletechnieken wil ik in dit artikel niet ingaan, alhoewel het &lt;a href=&quot;http://agilemanifesto.org/&quot;&gt;agile manifesto&lt;/a&gt; zeker een A4-printje + punaise waard is.&lt;/p&gt;
  14219. &lt;p&gt;De kern is dat er niet meer vooraf tot in detail wordt vastgelegd wat er gebouwd gaat worden. Met de klant worden in plaats daarvan de belangrijkste &#39;user stories&#39; verzameld en geprioriteerd. De exacte invulling van deze user stories vindt plaats tijdens het ontwikkeltraject, met een vast team, waardoor volop gebruik gemaakt kan worden van de verschillende expertises.&lt;/p&gt;
  14220. &lt;p&gt;Door deze opzet blijft het mogelijk om de invulling aan te passen aan nieuwe inzichten en prioriteiten.&lt;/p&gt;
  14221. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/product-backlog.jpg&quot; alt=&quot;User Story, User Story aan de wand, wat heeft de hoogste prio van het land?&quot; /&gt;&lt;/p&gt;
  14222. &lt;p class=&quot;note&quot;&gt;
  14223. Post-its maken niet alleen voor het team, maar ook de klant, duidelijk wat er nog moet gebeuren.
  14224. &lt;/p&gt;
  14225. &lt;h2&gt;Voortraject&lt;/h2&gt;
  14226. &lt;p&gt;Maar voordat er überhaupt iets in een team belandt, dient de klant overtuigd te worden van bovenstaande werkwijze.&lt;/p&gt;
  14227. &lt;p&gt;De klant verliest immers zijn gevoel voor veiligheid ten opzichte van een in beton gegoten en ondertekend functioneel ontwerp. Er staat niet meer vast wat er gebouwd gaat worden. Daartegenover staat ruimte voor nieuwe inzichten én niet geheel onbelangrijk: de kosten en doorlooptijd staan wél vast.&lt;/p&gt;
  14228. &lt;p&gt;Dit lijkt lastig te verkopen, maar het gros van de klanten wordt hier enthousiast van. De meeste klanten hebben al de nodige traumatische IT-ervaringen achter de rug, compleet met beloftes die niet zijn waargemaakt, grote investeringen in logge CMS&#39;en, contractgesteggel en uit de hand gelopen doorlooptijden. Zo veilig bleken de functioneel ontwerpen niet te zijn.&lt;/p&gt;
  14229. &lt;p&gt;Het voortraject is dan ook cruciaal voor een succesvol vervolg. Als hier valse beloftes worden gedaan, die haaks staan op de werkwijze, zal dat het project blijven achtervolgen.&lt;/p&gt;
  14230. &lt;h2&gt;Ontwikkeling&lt;/h2&gt;
  14231. &lt;p&gt;De periode waarin &#39;gebouwd wordt&#39;, was traditioneel het lastigste deel voor de opdrachtgever. Het designgedeelte vond de klant nog wel leuk, maar daarna verdween het project voor lange duur in een grote black box. Een duistere wereld vol onbekende talen en codeschrijvende bebaarde mannen die een voorliefde hebben voor unicorns, double rainbows en &lt;a href=&quot;http://www.nl.reddit.com/r/fffffffuuuuuuuuuuuu/&quot; title=&quot;fffffffuuuuuuuuuuuu&quot;&gt;rage faces&lt;/a&gt;.&lt;/p&gt;
  14232. &lt;p&gt;Het klantcontact bestond vooral uit af en toe even meegluren en het alvast in ontvangst nemen van excelsheets met puntenlijstjes …&lt;/p&gt;
  14233. &lt;p&gt;Die tijden zijn gelukkig voorbij.&lt;/p&gt;
  14234. &lt;p&gt;We hebben geen afdelingen meer, er wordt gewerkt in vaste teams van 4 à 5 man met meerdere disciplines (visual design, front-end, back-end, drakendoders en teamleiding). Het team werkt in vaste ontwikkelrondes (meestal twee weken) gezamenlijk voor één klant. Elke dag start met een korte statusupdate van alle teamleden.&lt;/p&gt;
  14235. &lt;p&gt;Het team maakt een inschatting van de user stories waardoor de klant op de eerste dag van de ontwikkelronde (sprint) weet wat hij twee weken later als demo te zien krijgt. Elke sprint levert een werkend product op.&lt;/p&gt;
  14236. &lt;p&gt;Hier hebben we uiteraard allerlei sektarische rituelen en gebruiken voor, maar over agile/scrum zijn al genoeg boeken geschreven. Het belangrijkste: we verwachten van de klant dat hij enkele dagen met het team meewerkt. Bij de inrichting van ons pand hebben we er zelfs rekening mee gehouden dat klanten altijd kunnen aanschuiven bij het team. De klant wordt (tijdelijk) collega.&lt;/p&gt;
  14237. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/mangrove-werkplek.jpg&quot; alt=&quot;Werkplek van Team Brutal bij Mangrove&quot; /&gt;&lt;/p&gt;
  14238. &lt;p class=&quot;note&quot;&gt;
  14239. Werkplek van Team Brutal bij Mangrove. [Foto&#39;s door WOVOX workplace](http://wovox.com/workplace/mangrove-internetbureau/rotterdam/mangrove#mangrove-internetbureau-45 &quot;Mangrove op WOVOX&quot;).
  14240. &lt;/p&gt;
  14241. &lt;p&gt;Hoe beter de klant het team kan ondersteunen en input kan geven, hoe beter het eindresultaat. Klanten helpen bijvoorbeeld met vullen van content of openstaande vragen te beantwoorden. De grootste reden is echter dat de klant mede-eigenaar wordt van beslissingen. Tijdens zijn aanwezigheid heeft hij een actieve bijdrage bij het oplossen van design, code en interactievraagstukken.&lt;/p&gt;
  14242. &lt;p&gt;Bij oplevering is dát het grote verschil. Het project komt niet out-of-the-blue op de klant zijn bordje liggen, met voor hem onverklaarbare keuzes en oplossingen.&lt;/p&gt;
  14243. &lt;h2&gt;Overtuig de klant&lt;/h2&gt;
  14244. &lt;p&gt;Het zal niet altijd goed gaan. Sommige mensen komen afspraken niet goed na, zitten vast in een organisatie of passen als klant echt niet bij je. Maar vaak ligt de oorzaak bij onszelf. We zijn er dan te veel van uit gegaan dat de klant precies wist wat van hem verwacht werd. Zorg dat je je eigen proces in orde hebt en je verwachtingen aan de klant kan overbrengen. Vervolgens is het belangrijkste om flink de tijd te nemen om klanten te overtuigen van je keuzes als hij ergens niet achter staat of een andere oplossing &#39;eist&#39;.&lt;/p&gt;
  14245. &lt;p&gt;De meeste problemen ontstaan doordat je de klant niet hebt weten te overtuigen. En overtuigen doe je door goede concept- en eindpresentaties, hem te betrekken bij keuzes en vooral door te laten zien dat je met gepassioneerde vakidioten keihard werkt.&lt;/p&gt;
  14246. &lt;p&gt;En als je het écht goed doet, snappen ze zelfs die wondere wereld van unicorns, double rainbows en lolcatz.&lt;/p&gt;
  14247. &lt;h2&gt;Over Ruben Bos&lt;/h2&gt;
  14248. &lt;p&gt;2011/12/ruben-bos.png
  14249. Overdag Creative Director bij &lt;a href=&quot;http://mangrove.nl/&quot;&gt;Mangrove&lt;/a&gt;. &#39;s Avonds de wijsneus met zijn alter ego &lt;a href=&quot;http://bossingaround.com/&quot;&gt;Bossing Around&lt;/a&gt;. Half-Iers. Verslaafd aan roze koeken. Schreef ooit een &lt;a href=&quot;http://webdesignrules.nl/&quot;&gt;boek over webdesign&lt;/a&gt; voor opdrachtgevers van websitebouwers. Volg op Twitter: &lt;a href=&quot;https://twitter.com/rubenbos&quot;&gt;@rubenbos&lt;/a&gt;&lt;/p&gt;
  14250. &lt;p&gt;Donatie: Oxfam Novib
  14251. Mijn donatie gaat naar de &lt;a href=&quot;http://www.oxfamnovibpaktuit.nl/pages/detail/s1/21030000000027-2-21010000000083.aspx&quot;&gt;aankoop van 150 mangrovebomen&lt;/a&gt;. Want mangroves zijn niet alleen vis- en dierrijke ecosystemen, maar bieden ook levensreddende bescherming tegen erosie en overstromingen.&lt;/p&gt;
  14252. </content>
  14253.  </entry>
  14254.  <entry>
  14255.    <title>Met 50% korting naar BlackBerry DevCon</title>
  14256.    <link href="https://www.fronteers.nl/nl/blog/2011/12/met-50-korting-naar-blackberry-devcon"/>
  14257.    <updated>2011-12-13T00:00:00Z</updated>
  14258.    <id>https://www.fronteers.nl/nl/blog/2011/12/met-50-korting-naar-blackberry-devcon</id>
  14259.    <content xml:lang="nl" type="html">&lt;p&gt;Op 7 en 8 februari wordt in de RAI te Amsterdam &lt;a href=&quot;http://www.blackberrydevcon.com/europe&quot;&gt;BlackBerry DevCon Europe&lt;/a&gt; gehouden, dat zich op het BlackBerry platform richt. Voor een congres van een mobiele speler wordt er ongebruikelijk veel aandacht aan het web besteed, en bovendien krijgt elke bezoeker een gratis BlackBerry PlayBook.&lt;/p&gt;
  14260. &lt;p&gt;Fronteers biedt hierbij aan zijn leden 50% korting op de toegangsprijs aan. De early bird loopt op 23 december af. Registreer je je voor die tijd, dan betaal je niet 250 maar slechts 125 euro.&lt;/p&gt;
  14261. &lt;p&gt;Er wordt voor interessante websessies gezorgd, al zijn de details bij het ter blogge gaan van dit bericht nog niet helemaal duidelijk. Ikzelf zal in elk geval iets doen.&lt;/p&gt;
  14262. &lt;p&gt;Even een plug: de BlackBerry browser is, na Safari, de beste mobiele browser die er bestaat, en wat mij betreft zou elke webontwikkelaar er op moeten testen. Bezit van een PlayBook helpt hier natuurlijk behoorlijk bij. Er zijn niet buitengewoon veel apps, maar verder is het een prima tablet dat makkelijk dienst kan doen als test- en surfstation.&lt;/p&gt;
  14263. &lt;p&gt;Wil je gebruik maken van deze aanbieding en ben je Fronteers-lid, dan kun je een kortingscode opvragen middels een mailtje naar &lt;a href=&quot;mailto:krijn@fronteers.nl&quot;&gt;krijn@fronteers.nl&lt;/a&gt;.&lt;/p&gt;
  14264. </content>
  14265.  </entry>
  14266.  <entry>
  14267.    <title>Kijk mama, zonder afbeeldingen! Grafische elementen maken met CSS</title>
  14268.    <link href="https://www.fronteers.nl/nl/blog/2011/12/kijk-mama-zonder-afbeeldingen-grafische-elementen-maken-met-css"/>
  14269.    <updated>2011-12-13T00:00:00Z</updated>
  14270.    <id>https://www.fronteers.nl/nl/blog/2011/12/kijk-mama-zonder-afbeeldingen-grafische-elementen-maken-met-css</id>
  14271.    <content xml:lang="nl" type="html">&lt;p&gt;Zoals Stijn Janssen het al aangaf, &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/waarom-een-slicer-een-front-end-developer-is-geworden&quot;&gt;we zijn geen slicers meer&lt;/a&gt;. Het idee van een website als een verknipt Photoshop document staat op uitsterven, en wij als front-end developers gebruiken steeds minder gif’s, jpg’s en png’s om onze designs visueel aan te kleden.&lt;/p&gt;
  14272. &lt;p&gt;Wat is er mis met klassieke afbeeldingen? Wel, het zijn vaak grote bestanden en ze jagen het aantal HTTP requests de hoogte in—of je moet beginnen knoeien met sprites. Elke keer je een pixel wil veranderen moet je weer dat logge programma openen en sterft je CPU een klein beetje. Of probeer die piepkleine site maar eens te zoomen in je fullscreen browser op je 27” monitor, dan krijg je van die wazige pixelsoep. Voor responsive web design moet je soms zelfs verschillende versies van je graphics maken, en halfslachtige technieken gaan aanleren.&lt;/p&gt;
  14273. &lt;p&gt;Nee, foto’s zullen wel altijd afbeeldingen blijven, maar voor de grafische omkadering zijn er aantal boeiende technologieën opgedoken die vaak veel geschikter zijn. &lt;em&gt;SVG&lt;/em&gt; lijkt razend interessant, maar voorlopig nog een beetje een zwarte doos, met &lt;em&gt;canvas&lt;/em&gt; worden heel wat grafieken tot leven gewekt, &lt;em&gt;web fonts&lt;/em&gt; zijn al helemaal geïntegreerd—we gebruiken ze zelfs voor &lt;a href=&quot;http://css-tricks.com/examples/IconFont/&quot;&gt;icoontjes&lt;/a&gt;—en natuurlijk is er ook &lt;em&gt;CSS&lt;/em&gt;.&lt;/p&gt;
  14274. &lt;h2&gt;Bijsluiter&lt;/h2&gt;
  14275. &lt;p&gt;Misschien eerst even een woordje over browser support. Een aantal van de volgende technieken werken prima op die gouwe ouwe Internet Explorer 6, andere ga je dan weer enkel kunnen zien in de laatste versie van Chrome bijvoorbeeld. Zoals altijd geldt ook hier het principe van progressive enhancement: begin met een eenvoudige basis die overal werkt en voeg dan laag per laag visuele verfijningen toe, tot je een prachtige ervaring op de modernste platformen hebt! Informatie over ondersteuning van specifieke features vind je natuurlijk op &lt;a href=&quot;http://www.caniuse.com/&quot;&gt;When Can I Use&lt;/a&gt;.&lt;/p&gt;
  14276. &lt;p&gt;Nu moet je wel goed opletten hoe ver je gaat met het maken van grafische elementen met CSS. In 2010 werden &lt;a href=&quot;http://desandro.com/articles/opera-logo-css&quot;&gt;enkele&lt;/a&gt; &lt;a href=&quot;http://graphicpeel.com/cssiosicons&quot;&gt;halsbrekende&lt;/a&gt; &lt;a href=&quot;http://lensco.be/2010/04/04/css-world-clocks&quot;&gt;experimenten&lt;/a&gt; op poten gezet—een leuke gimmick, maar allesbehalve geschikt voor productie. Nee, we gaan het vandaag hebben over veel kleinere maar daarom niet minder interessante toepassingen.&lt;/p&gt;
  14277. &lt;h2&gt;Let&#39;s go!&lt;/h2&gt;
  14278. &lt;p&gt;Beginnen doen we bij eenvoudige geometrische vormen. Die kan je rechtstreeks toepassen op eender welk HTML element, maar vaak wordt er gebruik gemaakt van generated content via de &lt;code&gt;:before&lt;/code&gt; &amp;amp; &lt;code&gt;:after&lt;/code&gt; pseudo-elementen—zo vermijd je onnodig extra elementen toe te voegen aan je HTML. &lt;em&gt;Rechthoeken&lt;/em&gt; maak je als web designer elke dag, &lt;em&gt;cirkels&lt;/em&gt; zijn goed ingeburgerd via &lt;code&gt;border-radius&lt;/code&gt;, en ook &lt;em&gt;driehoeken&lt;/em&gt; zijn perfect mogelijk met transparante &lt;code&gt;border&lt;/code&gt;s. Die vormen kan je dan weer gaan combineren tot complexere figuren—Chris Coyier heeft er een &lt;a href=&quot;http://css-tricks.com/examples/ShapesOfCSS&quot;&gt;prachtig overzicht&lt;/a&gt; van gemaakt. Zo kan je vrij gemakkelijk deze tooltips maken zonder afbeeldingen of JavaScript:&lt;/p&gt;
  14279. &lt;p&gt;JSFiddle: &lt;a href=&quot;http://jsfiddle.net/lensco/8MbvP/&quot;&gt;http://jsfiddle.net/lensco/8MbvP/&lt;/a&gt;&lt;/p&gt;
  14280. &lt;p&gt;Die geometrische vormen kan je vervolgends gaan manipuleren en er allerlei effecten op toepassen. Met &lt;em&gt;CSS transforms&lt;/em&gt; kan je ze verplaatsen (&lt;code&gt;translate&lt;/code&gt;), schalen (&lt;code&gt;scale&lt;/code&gt;), draaien (&lt;code&gt;rotate&lt;/code&gt;) en scheef zetten (&lt;code&gt;skew&lt;/code&gt;). Bijvoorbeeld:&lt;/p&gt;
  14281. &lt;p&gt;JSFiddle: &lt;a href=&quot;http://jsfiddle.net/lensco/NXan9/2/&quot;&gt;http://jsfiddle.net/lensco/NXan9/2/&lt;/a&gt;&lt;/p&gt;
  14282. &lt;p&gt;Dankzij CSS3 kan je die vormen zelfs inkleuren met &lt;em&gt;gradients&lt;/em&gt;, een &lt;em&gt;schaduw&lt;/em&gt; of &lt;em&gt;glow&lt;/em&gt; geven met &lt;code&gt;box-shadow&lt;/code&gt;, &lt;em&gt;animeren&lt;/em&gt; met transitions en animations, … de mogelijkheden zijn eindeloos. Waarom nog afbeeldingen gebruiken, als je deze knappe blokjes met geanimeerde drop-shadows gewoon in CSS kan maken?&lt;/p&gt;
  14283. &lt;p&gt;JSFiddle: &lt;a href=&quot;http://jsfiddle.net/lensco/yYQdf/&quot;&gt;http://jsfiddle.net/lensco/yYQdf/&lt;/a&gt;&lt;/p&gt;
  14284. &lt;p&gt;Het kan natuurlijk nog veel gekker, maar dan begeven we ons wel op experimenteel terrein. Zo kan je bijvoorbeeld met bovenstaande technieken het Shadow DOM gaan stijlen—het verborgen Document Object Model dat je browser genereert voor interface elementen. Beetje bij beetje zijn browserontwikkelaars dat Shadow DOM aan het openstellen, en kan je via pseudo-elementen als &lt;code&gt;::outer-spin-button&lt;/code&gt;, &lt;code&gt;::scrollbar-track-piece:vertical&lt;/code&gt; en &lt;code&gt;::slider-thumb&lt;/code&gt; het uitzicht van een scrollbar of van de nieuwe HTML5 &lt;code&gt;input&lt;/code&gt; types gaan personaliseren. Neus eens rond in de broncode van &lt;a href=&quot;http://lab.simurai.com/css/umbrui/&quot;&gt;Simurai&#39;s prachtige umbrUI&lt;/a&gt; om een idee te krijgen.&lt;/p&gt;
  14285. &lt;h2&gt;De toekomst?&lt;/h2&gt;
  14286. &lt;p&gt;Die laatste demonstratie licht alvast een tipje van de sluier wat de toekomst betreft. De meest boeiende ontwikkelingen zijn momenteel te vinden in de specificaties van CSS &lt;a href=&quot;https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/Filters.src.html&quot;&gt;Filters&lt;/a&gt; en &lt;a href=&quot;https://dvcs.w3.org/hg/FXTF/raw-file/tip/custom/index.html&quot;&gt;Shaders&lt;/a&gt;. Samen met enkele browserontwikkelaars zijn bedrijven als Adobe technologieën aan het bedenken die ons hopelijk binnenkort in staat stellen om via CSS effecten toe te passen die we nu eerder met programma&#39;s als Photoshop associëren. Denk bijvoorbeeld aan vervagen (blur), grijstinten, ruis toevoegen, enzovoort. Shaders zijn strikt gezien niet eens CSS, maar neem toch eens een kijkje naar de &lt;a href=&quot;http://www.adobe.com/devnet/html5/articles/css-shaders.html&quot;&gt;indrukwekkende voorbeelden van Adobe&lt;/a&gt;.&lt;/p&gt;
  14287. &lt;p&gt;Heel spannend allemaal, maar ook vandaag al kan je allerlei CSS technieken gebruiken om grafische elementen op te maken, zodat je niet langer je site moet gaan overladen met afbeeldingen. Doen!&lt;/p&gt;
  14288. &lt;h2&gt;Over Lennart Schoors&lt;/h2&gt;
  14289. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/lennart-schoors.jpg&quot; alt=&quot;Foto van lennart schoors uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  14290. [Lennart Schoors](http://lensco.be/) uit Gent, België werkte meer dan vijf jaar aan sociaal netwerk Netlog, maar is sinds kort freelance interface designer en front-end developer. Schrijft af en toe korte postjes over HTML/CSS op [Bricss](http://bricss.net/).
  14291. &lt;p&gt;Donatie: Wikipedia
  14292. Wat is de gemakkelijkste manier om dat hoofd van Jimmy Wales uit de header van Wikipedia te kegelen? Hint: niet door erover te klagen op Twitter. Gratis kennis voor de hele wereld, hoera!&lt;/p&gt;
  14293. </content>
  14294.  </entry>
  14295.  <entry>
  14296.    <title>Het is al goud wiens cursor blinkt</title>
  14297.    <link href="https://www.fronteers.nl/nl/blog/2011/12/het-is-al-goud-wiens-cursor-blinkt"/>
  14298.    <updated>2011-12-12T00:00:00Z</updated>
  14299.    <id>https://www.fronteers.nl/nl/blog/2011/12/het-is-al-goud-wiens-cursor-blinkt</id>
  14300.    <content xml:lang="nl" type="html">&lt;p&gt;Een pijnlijk vergezochte titel voor een alledaags onderwerp: de opdrachtregel of terminal. Die tekstinterface voor je computer mag dan wel al meegaan van toen de mainframes nog op stoom werkten, tegenwoordig is hij hipper dan ooit. (Een zwart scherm is het nieuwe, euh, zwart.)&lt;/p&gt;
  14301. &lt;p&gt;Wie al wat langer in dit wereldje meedraait (hier, neem nog een Werthers Echte), heeft de verandering van &amp;quot;slicer&amp;quot; naar &amp;quot;front-end developer&amp;quot; meegemaakt. Vroeger zat er vaak niemand tussen de designer en de ontwikkelaar van een website. Alles was mooi afgelijnd: de designer leverde een hoop geslicete afbeeldingen op en de ontwikkelaar trok er z&#39;n plan mee. Nu komt daar steeds vaker nog een front-ender bij kijken, en die moet van alle markten thuis zijn. In de praktijk betekent dat bijvoorbeeld overweg kunnen met bronbeheersoftware als Subversion en Git, of met allerlei minifiers voor JS en CSS met tal van opties—allemaal uit te voeren op de opdrachtregel.&lt;/p&gt;
  14302. &lt;p&gt;Om maar te zeggen: het is belangrijk dat je comfortabel je werk kan doen, zonder writer&#39;s block. Daarom enkele tips die je het leven in de terminal gemakkelijker maken. Mac- en Linux-gebruikers zitten goed; Windows-gebruikers installeren best eerst &lt;a href=&quot;http://www.cygwin.com/&quot;&gt;Cygwin&lt;/a&gt;.&lt;/p&gt;
  14303. &lt;h2&gt;1. Word een TiEnErTyPeR&lt;/h2&gt;
  14304. &lt;p&gt;De Tab-toets is een van de toetsen die je het meest op prijs zal stellen bij het werken op de opdrachtregel. Autocomplete voor map- en bestandsnamen is onmisbaar om snel te werken. Alleen: standaard is die hoofdlettergevoelig, terwijl je Mac- of Windows-schijf daar niet flauw over doet, en je mappen en bestanden ook namen met Hoofdletters hebben. Dus als je &lt;code&gt;cd dow&lt;/code&gt; typt, en dat vervolgens met &lt;code&gt;&amp;lt;Tab&amp;gt;&lt;/code&gt; automatisch wil aanvullen tot &lt;code&gt;cd Downloads&lt;/code&gt;, kom je bedrogen uit.&lt;/p&gt;
  14305. &lt;p&gt;Bash, de standaardshell, gebruikt de Readline-bibliotheek om je invoer in te lezen. Wat dat precies inhoudt, is niet zo belangrijk. Je moet alleen weten dat je die bibliotheek kan configureren via een &lt;code&gt;.inputrc&lt;/code&gt;-bestandje in je gebruikersmap. (De zogenaamde &amp;quot;dot files&amp;quot; zijn configuratiebestanden uit de UNIX-wereld. Je ziet ze standaard niet via de GUI of met een gewone &lt;code&gt;ls&lt;/code&gt;, maar met bijvoorbeeld &lt;code&gt;ls -alF&lt;/code&gt; wel.)&lt;/p&gt;
  14306. &lt;p&gt;Zet de volgende regel in je &lt;code&gt;.inputrc&lt;/code&gt; zodat &lt;code&gt;cd dOwN&amp;lt;Tab&amp;gt;&lt;/code&gt; netjes wordt aangevuld tot &lt;code&gt;cd Downloads&lt;/code&gt;:&lt;/p&gt;
  14307. &lt;pre&gt;&lt;code&gt;set completion-ignore-case On
  14308. &lt;/code&gt;&lt;/pre&gt;
  14309. &lt;p&gt;Daarbij aansluitend zet je dit in je &lt;code&gt;.bashrc&lt;/code&gt;, zodat &lt;code&gt;ls -alF *.jpg&lt;/code&gt; zowel &lt;code&gt;IMG_1234.JPG&lt;/code&gt; als &lt;code&gt;Screenshot 2011-12-01.jpg&lt;/code&gt; toont:&lt;/p&gt;
  14310. &lt;pre&gt;&lt;code&gt;shopt -s nocaseglob
  14311. &lt;/code&gt;&lt;/pre&gt;
  14312. &lt;p&gt;Als die bestandjes nog niet bestaan, kan je ze gewoon aanmaken. De volgende keer dat je je shell (of je terminal) start, worden ze ingelezen.&lt;/p&gt;
  14313. &lt;h2&gt;2. Word een geschiedenisprof&lt;/h2&gt;
  14314. &lt;p&gt;Hoe meer tijd je in de terminal doorbrengt, hoe vaker je bepaalde commando&#39;s zal herhalen. Gelukkig houdt Bash standaard een aardige geschiedenis bij. Je kan door die geschiedenis bewegen met de pijltjestoetsen: pijltje omhoog toont het vorige commando; pijltje omlaag het volgende. Je kan vorige commando&#39;s ook opzoeken door eerst &lt;code&gt;Ctrl+R&lt;/code&gt; te drukken en dan een woord in te voeren. Als je bijvoorbeeld &lt;code&gt;Ctrl+R&lt;/code&gt; drukt en dan &lt;code&gt;git com&lt;/code&gt; typt, zie je je vorige &lt;code&gt;git commit&lt;/code&gt;-commando verschijnen. Je kan dan nogmaals op &lt;code&gt;Ctrl+R&lt;/code&gt; drukken voor het commando daarvoor, en zo blijven teruggaan in het verleden.&lt;/p&gt;
  14315. &lt;p&gt;Ikzelf vind het wel gemakkelijk als de pijltjes omhoog en omlaag zich wat intelligenter gedragen. Als je onderstaande code toevoegt aan je &lt;code&gt;inputrc&lt;/code&gt;, houdt Readline rekening met wat je al getypt hebt:&lt;/p&gt;
  14316. &lt;pre&gt;&lt;code&gt;## Use more intelligent Up/Down behaviour: use the text that has already been
  14317. ## typed as the prefix for searching through commands, like in Vim.
  14318. &amp;quot;&#92;e[B&amp;quot;: history-search-forward
  14319. &amp;quot;&#92;e[A&amp;quot;: history-search-backward)
  14320. &lt;/code&gt;&lt;/pre&gt;
  14321. &lt;p&gt;Concreet: als je nu &lt;code&gt;git com&lt;/code&gt; typt, en dan pijltje omhoog, heb je meteen je vorige &lt;code&gt;git commit&lt;/code&gt; te pakken. Of &lt;code&gt;curl what&lt;/code&gt; en je krijgt &lt;code&gt;curl whatismyip.org&lt;/code&gt;—ervan uitgaande dat je dat al ooit getypt had. (Handige tip, overigens: zo zie je meteen je externe IP-adres.)&lt;/p&gt;
  14322. &lt;p&gt;Ook in &lt;code&gt;.bashrc&lt;/code&gt; voor geschiedenis zijn er enkele handige instellingen. Ik hou wel van deze:&lt;/p&gt;
  14323. &lt;pre&gt;&lt;code&gt;## Als je twee keer `foo` typt, hoeft dat niet twee keer in de geschiedenis.
  14324. ## Zo vervuil je minder en kan je sneller door de geschiedenis navigeren.
  14325. export HISTCONTROL=ignoredups;
  14326.  
  14327. ## Als je ooit een uitroepteken gebruikt en een onbegrijpelijke foutmelding
  14328. ## terugkrijgt, is dit commando een redder. Hiermee verschijnt je &amp;quot;foute&amp;quot;
  14329. ## opdracht netjes opnieuw, zodat je hem gemakkelijk kan bewerken.
  14330. shopt -s histreedit;
  14331.  
  14332. ## Standaard houdt Bash de laatste 500 opdrachten bij. Dat mag meer zijn.
  14333. export HISTSIZE=4096;)
  14334. &lt;/code&gt;&lt;/pre&gt;
  14335. &lt;h2&gt;3. Word een controlefreak&lt;/h2&gt;
  14336. &lt;p&gt;De shell biedt een heel krachtige manier om je computer te bedienen. Dat is erg prettig, maar missen is menselijk. Daarom, voor je eigen veiligheid, voeg je best een extra controle toe voor je bestanden onherroepelijk verneukt. Immers, als je een bestand kopieert naar een map waar al een bestand met dezelfde naam staat, zal een GUI je wel vragen of je zeker bent, maar de terminal niet. Je moet dat expliciet instellen. Voor &lt;code&gt;cp&lt;/code&gt; (&amp;quot;copy&amp;quot;), &lt;code&gt;mv&lt;/code&gt; (&amp;quot;move&amp;quot; en hernoem) en natuurlijk &lt;code&gt;rm&lt;/code&gt; (&amp;quot;remove&amp;quot;) doe je dat als volgt in &lt;code&gt;.bashrc&lt;/code&gt;:&lt;/p&gt;
  14337. &lt;pre&gt;&lt;code&gt;alias cp=&#39;cp -i&#39;;
  14338. alias mv=&#39;mv -i&#39;;
  14339. alias rm=&#39;rm -i&#39;;)
  14340. &lt;/code&gt;&lt;/pre&gt;
  14341. &lt;p&gt;Als je nu een keer &lt;code&gt;rm final.css&lt;/code&gt; doet, zal je deze vraag krijgen:&lt;/p&gt;
  14342. &lt;pre&gt;&lt;code&gt;remove final.css?
  14343. &lt;/code&gt;&lt;/pre&gt;
  14344. &lt;p&gt;Deze controle vereist dat je &lt;code&gt;y&lt;/code&gt; ingeeft (of &lt;code&gt;yes&lt;/code&gt;, of &lt;code&gt;you betcha!&lt;/code&gt;, of eender wat met een &lt;code&gt;y&lt;/code&gt; vanvoor), of het bestand wordt niet verwijderd.&lt;/p&gt;
  14345. &lt;h2&gt;4. Word vrolijk&lt;/h2&gt;
  14346. &lt;p&gt;De standaardprompt (het tekstje dat verschijnt voor jij kan beginnen typen) is niet bepaald geïnspireerd: &lt;code&gt;&amp;lt;computernaam&amp;gt;:&amp;lt;huidige map&amp;gt; &amp;lt;gebruikersnaam&amp;gt;&lt;/code&gt;. Dat is op zijn zachtst gezegd beknopt. Het is ook niet handig om te zien waar de uitvoer van je commando&#39;s begint en eindigt. Daarom gebruik ik wat kleur. In je &lt;code&gt;.bashrc&lt;/code&gt; ziet dat er zo uit:&lt;/p&gt;
  14347. &lt;pre&gt;&lt;code&gt;export PS1=&amp;quot;&#92;[$(tput setaf 4; tput bold)&#92;](&#92;t) &#92;u@&#92;h &#92;W&#92;n&#92;$ $(tput sgr0)&amp;quot;
  14348. &lt;/code&gt;&lt;/pre&gt;
  14349. &lt;p&gt;Dat is een hele boterham, en in tegenstelling tot wat je moeder altijd zei tijdens het mosselen eten, is het wél nuttig om je voedsel te ontleden:&lt;/p&gt;
  14350. &lt;ul&gt;
  14351. &lt;li&gt;&lt;code&gt;PS1&lt;/code&gt; is de omgevingsvariabele die je prompt instelt.&lt;/li&gt;
  14352. &lt;li&gt;&lt;code&gt;tput setaf 4&lt;/code&gt; zorgt ervoor dat de verdere tekst blauw wordt.&lt;/li&gt;
  14353. &lt;li&gt;&lt;code&gt;tput bold&lt;/code&gt; maakt de tekst vet, wat meestal neerkomt op helder gekleurd.&lt;/li&gt;
  14354. &lt;li&gt;&lt;code&gt;&#92;t&lt;/code&gt; toont de huidige tijd, zodat je die niet uit het oog verliest.&lt;/li&gt;
  14355. &lt;li&gt;&lt;code&gt;&#92;u@&#92;h&lt;/code&gt; is de gebruikersnaam en de computernaam.&lt;/li&gt;
  14356. &lt;li&gt;&lt;code&gt;&#92;W&lt;/code&gt; is de huidige map.&lt;/li&gt;
  14357. &lt;li&gt;&lt;code&gt;&#92;n&lt;/code&gt; is een nieuwe regel: zo heb je meer plaats voor jouw commando.&lt;/li&gt;
  14358. &lt;li&gt;&lt;code&gt;&#92;$&lt;/code&gt; toont de &lt;code&gt;$&lt;/code&gt; voor jou en &lt;code&gt;#&lt;/code&gt; voor de &amp;quot;root&amp;quot;-gebruiker.&lt;/li&gt;
  14359. &lt;li&gt;&lt;code&gt;tput sgr0&lt;/code&gt; zorgt ervoor dat je niet in het blauw zit te smurf—euh, typen.&lt;/li&gt;
  14360. &lt;/ul&gt;
  14361. &lt;p&gt;Je kan veel verder dan dit gaan. En dat brengt me naadloos bij de laatste tip.&lt;/p&gt;
  14362. &lt;h2&gt;5. Word een profiteur&lt;/h2&gt;
  14363. &lt;p&gt;Deze en vele andere instellingen die je leven in de terminal verbeteren, zijn overal beschikbaar. Gebruik daarom het werk van mensen die je zijn voorgegaan. Enkele bekende voorbeelden van &amp;quot;dot files&amp;quot; beschikbaar op GitHub, zijn die van &lt;a href=&quot;https://github.com/gf3/dotfiles&quot;&gt;Gianni Chiappetta&lt;/a&gt;, &lt;a href=&quot;https://github.com/garybernhardt/dotfiles&quot;&gt;Gary Bernhardt&lt;/a&gt;, en &lt;a href=&quot;https://github.com/mathiasbynens/dotfiles&quot;&gt;Mathias Bynens&lt;/a&gt;. Ondergetekende heeft ook zijn eigen, totaal onbekende verzameling, met de tips uit dit artikel, en veel meer: &lt;a href=&quot;https://github.com/janmoesen/tilde&quot;&gt;Tilde&lt;/a&gt;.&lt;/p&gt;
  14364. &lt;p&gt;&amp;quot;Good artists copy; great artists pull.&amp;quot;&lt;/p&gt;
  14365. &lt;h2&gt;Over Jan Moesen&lt;/h2&gt;
  14366. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/jan-moesen.jpg&quot; alt=&quot;Foto van jan moesen uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  14367. [Jan](https://twitter.com/janmoesen) is een webnerd die zich zowel in de browser als op de terminal thuis voelt, en mensen wil doen inzien dat die terminal echt efficiënt is. Dat doet hij op zijn dagtaak als webontwikkelaar, en vanaf begin 2012 ook [op bestelling bij jou](http://tervelo.com/).
  14368. &lt;p&gt;Donatie: &lt;a href=&quot;http://www.apopo.org/&quot;&gt;APOPO&lt;/a&gt;
  14369. Vroeger vond ik ratten vieze ziekteverspreiders. APOPO heeft dat echter veranderd: zij leiden heroRATs op. Zo&#39;n Rat 2.0 rédt mensenlevens. Ze worden opgeleid om tuberculose—tering!—vast te stellen of om landmijnen op te sporen. Ontmijnen zit er nog niet in, maar mits genoeg fondsen komt er misschien wel een RatGyver?&lt;/p&gt;
  14370. </content>
  14371.  </entry>
  14372.  <entry>
  14373.    <title>Een tik op de neus</title>
  14374.    <link href="https://www.fronteers.nl/nl/blog/2011/12/een-tik-op-de-neus"/>
  14375.    <updated>2011-12-11T00:00:00Z</updated>
  14376.    <id>https://www.fronteers.nl/nl/blog/2011/12/een-tik-op-de-neus</id>
  14377.    <content xml:lang="nl" type="html">&lt;p&gt;Een website bouwen op een &lt;em&gt;responsive-design&lt;/em&gt;-manier is te vergelijken met aangevallen worden door een haai. Je weet dat je de haai &lt;em&gt;gewoon&lt;/em&gt; een tik op zijn neus moet geven maar hoe doe je dat precies? Zo&#39;n haai is ook best imponerend. Dit artikel legt uit hoe je een responsieve site bouwt, hoe je hem opzet. En in onze voorbeeldsite gaan we dieper in op het geven van een tik op de neus van een haai.&lt;/p&gt;
  14378. &lt;h2&gt;De basis&lt;/h2&gt;
  14379. &lt;p&gt;De basis van elke responsieve website (van elke website eigenlijk) is natuurlijk de content. &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-11/&quot;&gt;Onze site&lt;/a&gt; is een eenvoudig HTML document met wat headertjes, wat navigatie, wat paragrafen en wat plaatjes. Deze content gaan we stylen. De beste manier om dit te doen is via de zogenaamde &lt;em&gt;mobile first&lt;/em&gt; methode.&lt;/p&gt;
  14380. &lt;h2&gt;Mobile first&lt;/h2&gt;
  14381. &lt;p&gt;Als je een bestaande desktop-site gaat optimaliseren voor kleinere resoluties dan is de &lt;em&gt;mobile first&lt;/em&gt; aanpak natuurlijk wat lastig, misschien zelfs onmogelijk. In dat geval zou ik een praktische &lt;em&gt;desktop down&lt;/em&gt; aanpak hanteren; bezoekers zijn er bij gebaat. Maar als je een nieuwe site bouwt dan heeft het vooral voordelen. Onze site over haaien zullen we dus ook op deze manier opbouwen.&lt;/p&gt;
  14382. &lt;h2&gt;De viewport&lt;/h2&gt;
  14383. &lt;p&gt;De &lt;em&gt;viewport&lt;/em&gt; is een complex ding. Hoe het precies werkt, ga ik hier niet uitleggen, dat heeft &lt;em&gt;Peter-Paul Koch&lt;/em&gt; al gedaan (&lt;a href=&quot;http://www.quirksmode.org/mobile/viewports.html&quot;&gt;deel 1&lt;/a&gt; en &lt;a href=&quot;http://www.quirksmode.org/mobile/viewports2.html&quot;&gt;deel 2&lt;/a&gt;, lees ze vooral als je niet weet hoe de &lt;em&gt;viewport&lt;/em&gt; werkt). De &lt;em&gt;viewport&lt;/em&gt; is nodig om aan te geven dat een apparaat zijn &lt;em&gt;&amp;quot;fysieke&amp;quot;&lt;/em&gt; pixels moet gebruiken en dus niet de desktop-pagina in uitgezoomde toestand moet weergeven. En &lt;em&gt;viewport&lt;/em&gt; definieer je in een meta-tag en ziet er als volgt uit:&lt;/p&gt;
  14384. &lt;pre&gt;&lt;code&gt;&amp;lt;meta name=&amp;quot;viewport&amp;quot; content=&amp;quot;width=device-width,initial-scale=1&amp;quot;&amp;gt;
  14385. &lt;/code&gt;&lt;/pre&gt;
  14386. &lt;p&gt;Er bestaan andere waardes voor het content attribuut; je kan er bijvoorbeeld voor zorgen dat de gebruiker niet kan zoomen, een erg vervelende beperking. Doe dus maar nooit &lt;em&gt;(deze feature wordt wel eens gebruikt om een bug in iOS op te lossen waarbij de pagina vervelend inzoomt als je je apparaat van portret naar landschapsmodus draait. Onthoud goed dat alleen testers en designers hun apparaat wel eens draaien, normale mensen doen dit bijna nooit. Een echte bug is het dus nauwelijks. Overigens treedt deze bug niet op als je geen gebruik maakt van initial-scale)&lt;/em&gt;.&lt;/p&gt;
  14387. &lt;h2&gt;De CSS&lt;/h2&gt;
  14388. &lt;p&gt;&lt;em&gt;Mobile first&lt;/em&gt; betekent wat mij betreft gewoon &lt;em&gt;content first&lt;/em&gt;. We structureren de content goed en stylen deze zodat hij er prettig uitziet. Zie &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-1/&quot;&gt;deze versie van onze haaiensite&lt;/a&gt;. Dit zijn stijlen die zowel op kleine als op grote schermen werken, dus zaken als achtergrondkleuren van de body, de verhoudingen van de font-groottes (ja, dat zijn verhoudingen, geen individuele &lt;em&gt;random&lt;/em&gt; pixelwaardes), wat marges, het kleurenpallet en eventueel ook wat meer illustratieve zaken, zoals borders en zo. Op welke resolutie je deze versie ook bekijkt, de content is prima toegankelijk. Op brede schermen leest het wat onprettig, maar met een &lt;code&gt;body { max-width: 40em; }&lt;/code&gt; &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-2/&quot;&gt;is dit opgelost&lt;/a&gt; (&lt;a href=&quot;https://www.fronteers.nl/_img/2011/12/stap-2.jpg&quot;&gt;screenshot&lt;/a&gt;). De site is, als je lui bent, af.&lt;/p&gt;
  14389. &lt;h2&gt;Grotere schermen&lt;/h2&gt;
  14390. &lt;p&gt;Veel bezoekers hebben een breder scherm waar de content wellicht iets beter tot zijn recht zou komen als we de layout zouden aanpassen. Te denken valt over een layout van meerdere kolommen of bijvoorbeeld een navigatie die bovenaan de pagina staat. De navigatie komen we op terug; we kijken eerst naar de layout. Om bredere schermen te bedienen linken we naar een extra CSS bestand met een &lt;em&gt;media query&lt;/em&gt;:&lt;/p&gt;
  14391. &lt;pre&gt;&lt;code&gt;&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;css/layout.css&amp;quot; media=&amp;quot;only screen and (min-width: 50em)&amp;quot;&amp;gt;
  14392. &lt;/code&gt;&lt;/pre&gt;
  14393. &lt;p&gt;De content bestaat uit een &lt;code&gt;article&lt;/code&gt; die begint bij &lt;code&gt;&amp;lt;h1&amp;gt;Aangevallen worden door een haai&amp;lt;/h1&amp;gt;&lt;/code&gt;en een &lt;code&gt;aside&lt;/code&gt; die begint bij &lt;code&gt;&amp;lt;h1&amp;gt;Wist u dat…&amp;lt;/h1&amp;gt;&lt;/code&gt;. In de huidige situatie staan ze gewoon onder elkaar. Door ze als &lt;code&gt;display: inline-block;&lt;/code&gt; te stijlen en ze een procentuele breedte te geven, staan ze vanaf een bepaalde breedte ineens naast elkaar. &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-3/&quot;&gt;Kijk maar&lt;/a&gt; (&lt;a href=&quot;https://www.fronteers.nl/_img/2011/12/stap-3.jpg&quot;&gt;screenshot&lt;/a&gt;). Makkelijk he? &lt;em&gt;Ik gebruik &lt;code&gt;inline-block&lt;/code&gt; omdat dat veel prettiger werkt dan floats. Het nadeel is dat pixelperfectie niet echt goed mogelijk is met &lt;code&gt;inline-block&lt;/code&gt;. Pixelperfectie doet mij niet zo veel.&lt;/em&gt;&lt;/p&gt;
  14394. &lt;h2&gt;Navigatie&lt;/h2&gt;
  14395. &lt;p&gt;Helemaal rechts bovenaan &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-2/&quot;&gt;de pagina&lt;/a&gt; staat een letter &#39;i&#39; in een kadertje. Dit is een klassieke skiplink die je naar de navigatie onderaan de pagina brengt. Op kleine schermen vind ik dit een prima methode. Je zou er eventueel voor kunnen kiezen om de navigatie omhoog te halen als je op de skiplink klikt, dat kan redelijk eenvoudig, &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-4/&quot;&gt;kijk maar&lt;/a&gt; (&lt;a href=&quot;https://www.fronteers.nl/_img/2011/12/stap-4.jpg&quot;&gt;screenshot&lt;/a&gt;). Voor allebei de oplossingen is wel wat te zeggen. In de tweede versie kan je er van uit gaan dat de gebruiker de footer nooit te zien gaat krijgen, wellicht is dat niet erg.&lt;/p&gt;
  14396. &lt;h2&gt;Meer pixels&lt;/h2&gt;
  14397. &lt;p&gt;Als de gebruiker meer pixels tot haar beschikking heeft dan zou je de navigatie natuurlijk gewoon altijd bovenaan kunnen tonen. De standaardpatronen daarvoor zijn een horizontale navigatie bovenaan of een blokje met linkjes links. Ik heb voor een &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-5/&quot;&gt;horizontale balk&lt;/a&gt; (&lt;a href=&quot;https://www.fronteers.nl/_img/2011/12/stap-5.jpg&quot;&gt;screenshot&lt;/a&gt;) gekozen, je kan vast wel zelf verzinnen hoe je hem elders neerzet, zo moeilijk is het niet. &lt;em&gt;Ik maak hier gebruik van &lt;code&gt;position: absolute;&lt;/code&gt; omdat dat zo lekker makkelijk is en omdat ik de hoogte van de header ken. Er bestaan &lt;a href=&quot;http://adactio.com/journal/4780/&quot;&gt;hacks&lt;/a&gt; waarmee het ook lukt als je die hoogte niet kent.&lt;/em&gt;&lt;/p&gt;
  14398. &lt;h2&gt;Plaatjes&lt;/h2&gt;
  14399. &lt;p&gt;Plaatjes zijn makkelijk flexibel te maken: &lt;code&gt;max-width: 100%;&lt;/code&gt; en je bent klaar. Het nadeel aan deze techniek is dat mensen met een scherm van 320 pixels breed een plaatje downloaden van 1024 pixels breed en 212KB zwaar. Hetzelfde plaatje is 23KB zwaar als het 320 pixels breed is. Dat scheelt nogal wat, vooral in landen waar bandbreedte duur is. Hier &lt;em&gt;moet&lt;/em&gt; dus een oplossing voor verzonnen worden. Helaas bestaan hier geen mooie, eenvoudige oplossingen voor, alle oplossingen die er zijn zijn complex, lelijk en/of onbetrouwbaar.&lt;/p&gt;
  14400. &lt;p&gt;Omdat ik geen toegang heb tot &lt;em&gt;server-side&lt;/em&gt;-technologie bij het artikel over haaien moet ik kiezen voor een &lt;em&gt;client-side-only&lt;/em&gt; oplossing. Daar zijn er twee van. De ene is slecht, de andere is lelijk.&lt;/p&gt;
  14401. &lt;h2&gt;De slechte methode&lt;/h2&gt;
  14402. &lt;p&gt;We serveren &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-6/&quot;&gt;om te beginnen&lt;/a&gt; het kleine plaatje. Zo weten we zeker dat gebruikers met een klein scherm geen onnodige KB&#39;s ophalen. Voor gebruikers met een groter scherm veranderen we met behulp van &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-6/js/script.js&quot;&gt;JavaScript&lt;/a&gt; de source van het plaatje in de source van het grote plaatje. Makkelijk en zeer eenvoudig te implementeren. Maar slecht om een paar redenen: browsers met een groot scherm doen &lt;em&gt;twee&lt;/em&gt; requests om één plaatje te tonen. Bovendien wordt in dit script gekeken naar de breedte van de &lt;em&gt;viewport&lt;/em&gt; om te bepalen of een plaatje vervangen moet worden, het is natuurlijk logischer om te kijken naar de de &lt;em&gt;context&lt;/em&gt; van het plaatje. Met &lt;em&gt;context&lt;/em&gt; bedoel ik gewoon de omgeving waar het plaatje staat; zijn container.&lt;/p&gt;
  14403. &lt;h2&gt;De lelijke, onzinnige methode&lt;/h2&gt;
  14404. &lt;p&gt;Dingen in een &lt;code&gt;noscript&lt;/code&gt; tag worden genegeerd door browsers die JavaScript ondersteunen. Als we het kleine plaatje dus in zo&#39;n tag zetten dan krijgen mensen zonder JavaScript het kleine plaatje te zien, mensen mét JavaScript krijgen niks te zien. Met behulp van JavaScript kijken we naar de breedte van de plek waar het plaatje moet komen te staan, we lezen het juiste &lt;code&gt;data&lt;/code&gt;-attribuut uit en plaatsen het plaatje op de juiste plek. &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-7/&quot;&gt;Tadaa, klaar&lt;/a&gt;!&lt;/p&gt;
  14405. &lt;pre&gt;&lt;code&gt;&amp;lt;figure data-src-groot=&amp;quot;img/haai-groot.jpg&amp;quot; data-src-medium=&amp;quot;img/haai-med.jpg&amp;quot; data-src-klein=&amp;quot;img/haai-klein.jpg&amp;quot; data-alt=&amp;quot;Een haai die uit het water springt&amp;quot;&amp;gt;
  14406.  &amp;lt;noscript&amp;gt;
  14407.    &amp;lt;img src=&amp;quot;img/haai-klein.jpg&amp;quot; alt=&amp;quot;Een haai die uit het water springt&amp;quot;&amp;gt;
  14408.  &amp;lt;/noscript&amp;gt;
  14409. &amp;lt;/figure&amp;gt;
  14410. &lt;/code&gt;&lt;/pre&gt;
  14411. &lt;p&gt;De &lt;code&gt;noscript&lt;/code&gt; tag is lelijk, het haalt de semantische waarde van het plaatje weg, maar erger nog: het creëert een afhankelijkheid van JavaScript om belangrijke content te tonen. Ik kan er op mijn site wel van uit gaan dat het script wordt uitgevoerd. Ik kan er ook van uit gaan dat het script &lt;em&gt;niet&lt;/em&gt; wordt uitgevoerd als iemand het artikel leest in een RSS-reader of een &lt;em&gt;read-it-later-tool&lt;/em&gt;. Gebruik deze oplossing dus alleen als je echt niet anders kan.&lt;/p&gt;
  14412. &lt;h2&gt;De juiste oplossing&lt;/h2&gt;
  14413. &lt;p&gt;Wat de juiste oplossing is, is geheel afhankelijk van de situatie, geheel afhankelijk van de tool die je aan het bouwen bent. In &lt;a href=&quot;http://www.cloudfour.com/responsive-imgs-part-2/&quot;&gt;dit artikel van Jason Grigsby&lt;/a&gt; worden alle manieren behandeld en alle voor- en nadelen besproken. De conclusie is eigenlijk dat er geen definitieve oplossing voor bestaat. Lees vooral &lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/responsive-images-een-experiment&quot;&gt;het artikel van Roel Van Gils op het Fronteers blog&lt;/a&gt; en alle andere artikelen van Jason Grigsby over dit onderwerp: &lt;a href=&quot;http://www.cloudfour.com/responsive-imgs/&quot;&gt;deel 1&lt;/a&gt;, &lt;a href=&quot;http://www.cloudfour.com/responsive-imgs-part-3-future-of-the-img-tag/&quot;&gt;deel 3&lt;/a&gt;, &lt;a href=&quot;http://www.cloudfour.com/what-responsive-img-technique-should-we-teach-in-our-book/&quot;&gt;deel 4&lt;/a&gt;, &lt;a href=&quot;http://www.cloudfour.com/responsive-imgs-choosing-between-semantic-markup-and-working-code/&quot;&gt;deel 5&lt;/a&gt;, &lt;a href=&quot;http://www.cloudfour.com/device-detection-as-the-future-friendly-img-option/&quot;&gt;deel 6&lt;/a&gt;, &lt;a href=&quot;http://www.cloudfour.com/clarification-on-device-detection-for-images/&quot;&gt;deel 7&lt;/a&gt; en &lt;a href=&quot;http://www.cloudfour.com/preferred-solutions-for-responsive-images/&quot;&gt;deel 8&lt;/a&gt;.&lt;/p&gt;
  14414. &lt;h2&gt;De finishing touch&lt;/h2&gt;
  14415. &lt;p&gt;In dit artikel heb ik tot nu toe alleen gekeken naar optimalisatie voor verschillende schermgroottes, maar er is natuurlijk meer waar je voor zou kunnen optimaliseren. Voor &lt;em&gt;touch&lt;/em&gt; bijvoorbeeld. Hele grote aanpassingen zijn meestal niet nodig maar een iets hogere &lt;code&gt;line-height&lt;/code&gt; is prettig voor mensen met dikke vingers. &lt;em&gt;&lt;code&gt;:hover&lt;/code&gt; states&lt;/em&gt; uitzetten is ook een erg fijne en simpele aanpassing (en &lt;em&gt;&lt;code&gt;:focus&lt;/code&gt; states&lt;/em&gt; toevoegen, nu ik toch bezig ben). Met wat slimme &lt;em&gt;feature detection&lt;/em&gt; zijn &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-8/&quot;&gt;aparte stijlen voor &lt;em&gt;touch devices&lt;/em&gt;&lt;/a&gt; zo gemaakt. Ik gebruik daar &lt;a href=&quot;http://www.modernizr.com/&quot;&gt;Modernizr&lt;/a&gt; voor, lekker makkelijk en goed getest. Het voegt classes toe aan de &lt;code&gt;html&lt;/code&gt;-tag.&lt;/p&gt;
  14416. &lt;pre&gt;&lt;code&gt;&amp;lt;html class=&amp;quot;js no-touch generatedcontent&amp;quot; lang=&amp;quot;nl&amp;quot;&amp;gt;
  14417. &lt;/code&gt;&lt;/pre&gt;
  14418. &lt;p&gt;Schermen met een hele hoge resolutie zijn misschien wel gebaat bij een andere layout. Je kan denken aan nóg meer kolommen, maar je kan natuurlijk ook gewoon denken aan &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-9/&quot;&gt;een groter font&lt;/a&gt;.&lt;/p&gt;
  14419. &lt;p&gt;Als laatste nog een lekker nutteloze tip die het testen van responsieve sites niet makkelijker, maar toch wel &lt;em&gt;leuker&lt;/em&gt; maakt: CSS &lt;code&gt;transitions&lt;/code&gt; werken niet alleen bij dingen als &lt;code&gt;:hover&lt;/code&gt; maar ook bij de overgang van de ene naar de andere &lt;em&gt;media query&lt;/em&gt;. Geen normaal mens zal het ooit te zien krijgen maar het testen wordt er wel &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-10/&quot;&gt;geiniger/irritanter&lt;/a&gt; door.&lt;/p&gt;
  14420. &lt;h2&gt;De werkwijze&lt;/h2&gt;
  14421. &lt;p&gt;In dit artikel heb ik alleen maar gekeken naar de verschillende technische aspecten van een responsieve website, de werkwijze heb ik niet echt behandeld. De manier waarop zo&#39;n ontwerp tot stand komt, is anders dan wat we gewend zijn. De ervaring leert me dat het maken van een responsief ontwerp veel meer een iteratief proces is dan het maken van een klassiek pixelplaatje. Visual designers, interaction designers, front-end developers en back-end developers werken tegelijkertijd aan onderdelen van het ontwerp. Oplossingen voor complexe componenten worden verzonnen, uitgewerkt, getest en verbeterd. Hier zou ik een heel artikel over kunnen schrijven, maar waarom zou ik? &lt;a href=&quot;http://trentwalton.com/2011/07/14/content-choreography/&quot;&gt;Dat heeft Trent Walton al gedaan&lt;/a&gt;.&lt;/p&gt;
  14422. &lt;h2&gt;Oude browsers&lt;/h2&gt;
  14423. &lt;p&gt;Sommige oude browsers snappen niks van &lt;em&gt;media queries&lt;/em&gt;. Er zijn meerdere manieren om hier mee om te gaan. Je kan er natuurlijk voor kiezen om alleen de &lt;em&gt;mobiele&lt;/em&gt; layout te tonen aan deze gebruikers, maar je kan ook een &lt;a href=&quot;https://github.com/scottjehl/Respond&quot;&gt;polyfill&lt;/a&gt; gebruiken. Daarnaast kan je mensen mededelen dat ze een verouderde browser hebben en ze informeren over de consequenties die dat heeft en de mogelijkheden die er zijn om te upgraden naar iets moderns. Zo&#39;n scriptje heb ik aan het voorbeeld toegevoegd, gebruikers van IE6, IE7, IE8 en IE9 &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-11/&quot;&gt;krijgen het te zien&lt;/a&gt; (&lt;a href=&quot;https://www.fronteers.nl/_img/2011/12/stap-11.jpg&quot;&gt;screenshot&lt;/a&gt;). Het grote voordeel van deze laatste optie is dat je niet zo veel tijd hoeft te verspillen aan deze browsers. Het andere voordeel is dat mensen er achter komen dat hun browser verouderd is: mensen weten dit niet omdat wij altijd maar oplossingen voor ze blijven hacken &lt;em&gt;(ja, het is onze schuld dat oude browsers nog gebruikt worden)&lt;/em&gt;.&lt;/p&gt;
  14424. &lt;h2&gt;Complexe content&lt;/h2&gt;
  14425. &lt;p&gt;Natuurlijk bestaan niet alle sites uit alleen maar navigatie, tekstjes en fotootjes, er zijn ook veel complexere stukken content. Er zijn inmiddels al wel wat oplossingen verzonnen voor &lt;a href=&quot;http://css-tricks.com/9096-responsive-data-tables/&quot;&gt;data-tabellen&lt;/a&gt;, &lt;a href=&quot;http://webdesignerwall.com/tutorials/css-elastic-videos&quot;&gt;video&#39;s&lt;/a&gt; (&lt;a href=&quot;http://fitvidsjs.com/&quot;&gt;alternatieve methode&lt;/a&gt;) en &lt;a href=&quot;http://artequalswork.com/posts/responsive-ads.php&quot;&gt;advertenties&lt;/a&gt;. Wellicht is nog niet overal de ideale oplossing voor te vinden. Het enige wat helpt, is creativiteit, het delen van ideeën en gewoon vragen of iemand misschien een oplossing heeft.&lt;/p&gt;
  14426. &lt;h2&gt;Tot slot&lt;/h2&gt;
  14427. &lt;p&gt;Een haai een tik op zijn neus geven lijkt eenvoudig, is toch redelijk complex maar is ook goed te overzien, zeker als je het een paar keer hebt gedaan. Ik hoop dat dit artikel je op weg heeft geholpen, niet in het geven van tikken maar wel in het maken van fantastische responsieve designs. Bouw vanuit de content, vanuit de basis, en pas de boel aan aan de mogelijkheden van het apparaat waarmee men toevallig kijkt. &lt;a href=&quot;https://www.fronteers.nl/_downloads/2011/haaien/stap-11/&quot;&gt;Het voorbeeld wat ik heb gemaakt&lt;/a&gt; is natuurlijk erg eenvoudig, dat kan je zelf vast veel beter.&lt;/p&gt;
  14428. &lt;h2&gt;Over Vasilis van Gemert&lt;/h2&gt;
  14429. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/vasilis-van-gemert.jpg&quot; alt=&quot;Foto van vasilis van gemert&quot; class=&quot;floating-portrait&quot; /&gt;
  14430. Vasilis van Gemert wil graag dat iedereen een betere front-end developer is dan hijzelf (hetgeen niet zo heel moeilijk is). Zolang dat nog niet zo is, zal hij zijn best doen om er voor te zorgen dat dat wel gebeurt. Dat doet hij onder andere door zich in te zetten voor Fronteers, door (ongeveer) dagelijks de [Daily Nerd](http://dailynerd.nl/) te schrijven en door principal front-end developer te zijn bij [Mirabeau](http://mirabeau.nl). In die functie probeert hij er ook voor te zorgen dat (grote) bedrijven (_én_ concurrenten) betere websites gaan maken. Want ook dat vindt hij belangrijk.
  14431. &lt;p&gt;Donatie: &lt;a href=&quot;https://www.eff.org/&quot;&gt;Electronic Frontier Foundation&lt;/a&gt;
  14432. Het internet is tof en nuttig. Dat moet zo blijven. Helaas zijn er nogal wat schimmige overheden (zoals voornamelijk die van de VS) en grote bedrijven (voornamelijk bedrijven die in schimmige zaken als &lt;em&gt;rechten&lt;/em&gt; handelen) die het internet minder tof—onvriendelijk zelfs—willen hebben. Vandaar dat ik het EFF ondersteun.&lt;/p&gt;
  14433. </content>
  14434.  </entry>
  14435.  <entry>
  14436.    <title>Waarom standaarden essentieel zijn</title>
  14437.    <link href="https://www.fronteers.nl/nl/blog/2011/12/waarom-standaarden-essentieel-zijn"/>
  14438.    <updated>2011-12-10T00:00:00Z</updated>
  14439.    <id>https://www.fronteers.nl/nl/blog/2011/12/waarom-standaarden-essentieel-zijn</id>
  14440.    <content xml:lang="nl" type="html">&lt;p&gt;Je hebt vast en zeker al ooit een vaatwasmachine of een oven gekocht. Heb je toen, om er zeker van te zijn dat het in je keuken paste, opgemeten hoe groot het nieuwe toestel was? Normaal gezien was dat niet nodig, omdat de afmetingen van inbouwkeukentoestellen gestandaardiseerd zijn. Op een paar uitzonderingen na zullen toestellen van eender welke leverancier zonder probleem in je keuken passen.&lt;/p&gt;
  14441. &lt;h2&gt;Standaarden bevorderen innovatie&lt;/h2&gt;
  14442. &lt;p&gt;Standaarden zijn een onzichtbaar, maar onmisbaar deel van de meeste producten die we in ons dagelijks leven gebruiken. Ze maken niet enkel ons leven gemakkelijker, ze wakkeren innovatie aan en dat wordt vaak vergeten. Standaarden verschuiven de concurrentie van een markt met andere markten naar competitie binnen een markt.&lt;/p&gt;
  14443. &lt;blockquote&gt;
  14444. &lt;p&gt;Standards change competition for a market to competition within a market&lt;/p&gt;
  14445. &lt;/blockquote&gt;
  14446. &lt;p&gt;De globalisatie die we de afgelopen jaren meegemaakt hebben is grotendeels te danken aan de opmars van de informatietechnologie en standaarden. Een goed voorbeeld hiervan is &lt;a href=&quot;http://nl.wikipedia.org/wiki/SOAP&quot;&gt;SOAP&lt;/a&gt;. De introductie van SOAP heeft ervoor gezorgd dat grote bedrijven activiteiten eenvoudiger kunnen outsourcen. Laten we accounting als voorbeeld nemen. Doordat een op SOAP gebaseerde interface de standaard is geworden in deze sector kunnen bedrijven nu relatief eenvoudig van accounting firma veranderen. Hierdoor ontstaat er sterkere concurrentie tussen de verschillende bedrijven die de accountingtaken uiteindelijk uitvoeren. Concurrentie gaat meestal gepaard met een prijzenslag of differentiatie op vlak van kwaliteit. In beide gevallen heeft het bedrijf dat de activiteiten outsourcet gewonnen en waarschijnlijk de kosten van de implementatie dubbel en dik terugverdiend.&lt;/p&gt;
  14447. &lt;h2&gt;Standaarden beschermen gebruikers&lt;/h2&gt;
  14448. &lt;p&gt;Veel onafhankelijke Belgische reisbureaus en touroperators werken met een bepaald, niet nader te vernoemen, informaticasysteem. Het is ontwikkeld door een klein Belgisch softwarebedrijf en wordt al gebruikt sinds de jaren &#39;90. Een tijdje geleden vroeg een touroperator ons een onderzoek te doen of het mogelijk was om naar een ander, moderner systeem over te stappen. Dit omdat het systeem geen online functionaliteit aanbiedt en het soms meer dan een jaar duurt voordat een feature request geïmplementeerd wordt.&lt;/p&gt;
  14449. &lt;p&gt;Het resultaat van onze audit verbaasde hen sterk. Het was niet mogelijk om de gegevens uit het bestaande systeem te halen en over te zetten naar een nieuw systeem, omdat hun leverancier weigerde toegang te geven tot de server waarop de gegevens staan. Tot op vandaag werken ze nog altijd met hun verouderde systeem en moeten ze boekingen op de website manueel verwerken. Moest hiervoor een systeem gebruikt zijn dat standaarden respecteert, was dit uiteraard reeds lang gemoderniseerd.&lt;/p&gt;
  14450. &lt;p&gt;Dergelijke situaties komen we regelmatig tegen tijdens onze consulting opdrachten en we staan er steeds van versteld hoe weinig bedrijven beseffen wat de consequenties kunnen zijn van een dergelijke situatie. Bij het geringste geschil zou hun leverancier bijvoorbeeld kunnen beslissen om hen (tijdelijk) van het platform af te sluiten. De gevolgen hiervan zouden niet te overzien zijn.&lt;/p&gt;
  14451. &lt;p&gt;Moest er in deze markt een standaard bestaan voor het uitwisselen van informatie dan hadden deze problemen niet bestaan. De bedrijven die denken dat ze groeien door hun technologie af te schermen van concurrenten zijn uiteindelijk de bedrijven die verliezen.&lt;/p&gt;
  14452. &lt;h2&gt;Standaarden verlagen kosten&lt;/h2&gt;
  14453. &lt;p&gt;In een ander bedrijf dat we doorgelicht hebben wordt elke week de voorraad informatie van meer dan 200 leveranciers verwerkt. Deze gegevens zijn essentieel voor hun bedrijfsvoering en moeten zo recent mogelijk zijn. Toen we te horen kregen &lt;a href=&quot;http://images.cheezburger.com/completestore/2010/1/29/129092786498235257.jpg&quot;&gt;hoe dit gebeurde&lt;/a&gt; waanden we ons weer even in 1980. Twee mensen zijn er full-time bezig met het copy pasten van de informatie uit allerhande documenten en websites, een deel van de gegevens komen zelfs per fax of telefoon binnen.&lt;/p&gt;
  14454. &lt;p&gt;De lijsten die dagelijks verwerkt moesten worden zijn op dit moment al volledig geautomatiseerd en er wordt gewerkt aan een automatisatie van 80% van de imports die gebeurden. Door de leveranciers te verplichten de gegevens in een bepaald formaat door te sturen hopen we in de toekomst alles automatisch te kunnen doen. De dames die het werk deden zullen een aangenamere job binnen het bedrijf krijgen.&lt;/p&gt;
  14455. &lt;p&gt;Door deze standardisatie bespaart de eigenaar niet enkel op zijn personeelskosten, maar vermindert hij ook de kans op fouten in de gevevens, en dus in hun bedrijfsvoering.&lt;/p&gt;
  14456. &lt;h2&gt;Standaarden en het internet&lt;/h2&gt;
  14457. &lt;p&gt;Ook op het internet spelen standaarden een zeer grote rol. De steeds snellere verspreiding van de gebruikte standaarden, zowel in front-end als back-end development, liggen aan de basis van de sterke groei van het internet de laatste jaren. Zonder standaarden hadden wij &lt;a href=&quot;https://twitter.com/roy/status/139980797233987584&quot;&gt;deze geweldige job&lt;/a&gt; niet gehad.&lt;/p&gt;
  14458. &lt;p&gt;Als internetindustrie hebben we een voorbeeldrol op het vlak van standaarden. Zonder standaarden zouden we nu meerdere internetten hebben, zou een bedrijf meerdere websites moeten laten ontwikkelen en zouden de gebruikers meerdere internetaansluitingen moeten hebben.&lt;/p&gt;
  14459. &lt;p&gt;Toch is er nog heel veel werk. We moeten het internet herbedenken, en niet enkel op het vlak van copyrights zoals de multinationals nu doen. Zo kan je hopelijk over een paar jaar je video&#39;s met één klik van YouTube naar Vimeo overzetten.&lt;/p&gt;
  14460. &lt;p&gt;Nu Flash eindelijk ten dode opgeschreven is en IE6 zijn laatste adem uitblaast kunnen we door standaarden te gebruiken het internet nog dichter bij de echte wereld brengen.&lt;/p&gt;
  14461. &lt;h2&gt;Over Andreas Creten&lt;/h2&gt;
  14462. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/andreas-creten.jpg&quot; alt=&quot;Foto van andreas creten uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  14463. [Andreas](https://twitter.com/andreascreten) is de zaakvoerder van [madewithlove](http://madewithlove.be). Met een klein team ontwikkelen ze webapplicaties en verlenen ze technisch advies aan bedrijven en startups. Andreas heeft een bachelor in informatica en studeert een master in management. In zijn vrije tijd reist hij, al dan niet op skies, en geniet hij van [elektronische muziek](http://muff.be).
  14464. &lt;p&gt;Donatie: PROTOS
  14465. Ik heb voor &lt;a href=&quot;http://protos.be/&quot;&gt;PROTOS&lt;/a&gt; gekozen, omdat een groot oom van me er voorzitter van was. Twee jaar geleden heb ik op kerstdag een wandeling met deze bijna blinde man gemaakt en het raakte me hoe gedreven hij over zijn ervaringen kon vertellen. Ik ben er dus van overtuigd dat het geld goed en correct besteed zal worden.
  14466. Samen met haar partners en de lokale bevolking slaagt PROTOS erin om jaarlijks zowat honderdduizend mensen aan betere hygiënische voorzieningen, drinkbaar water en/of irrigatiewater voor de voedselvoorziening te helpen. De gemiddelde kostprijs van onze werking per begunstigde inwoner van het Zuiden is 50€.
  14467. Maar het werk is nog niet af. Er zijn nog steeds 1.1 miljard mensen zonder toegang tot veilig drinkwater, en liefst één derde van de wereldbevolking heeft nog geen voldoende sanitaire voorzieningen.
  14468. Is het werk van PROTOS dan een druppel op een hete plaat? Nee! Voor de mensen die net in die druppel wonen maakt het wél een enorm verschil! In plaats van elke dag 4 uur te moeten besteden aan water halen, kunnen kinderen nu naar school en kunnen de vrouwen hun tijd besteden aan landbouw en/of aan activiteiten die inkomsten verzekeren!&lt;/p&gt;
  14469. </content>
  14470.  </entry>
  14471.  <entry>
  14472.    <title>JavaScript-pret met alle karakters in een string</title>
  14473.    <link href="https://www.fronteers.nl/nl/blog/2011/12/javascript-pret-met-alle-karakters-in-een-string"/>
  14474.    <updated>2011-12-09T00:00:00Z</updated>
  14475.    <id>https://www.fronteers.nl/nl/blog/2011/12/javascript-pret-met-alle-karakters-in-een-string</id>
  14476.    <content xml:lang="nl" type="html">&lt;p&gt;Stel: je hebt een functie &lt;code&gt;encode()&lt;/code&gt; geschreven, die &lt;a href=&quot;http://www.flickr.com/photos/24374884@N08/6346609079/&quot;&gt;een string bestaande uit één enkel karakter&lt;/a&gt; als argument neemt, en een gecodeerde versie van dat ene karakter teruggeeft. Een praktisch voorbeeld hiervan is &lt;a href=&quot;http://en.wikipedia.org/wiki/ROT13&quot;&gt;ROT-13-encodering&lt;/a&gt;.&lt;/p&gt;
  14477. &lt;p&gt;Als je nu een willekeurige string bestaande uit meerdere karakters wil gaan coderen volgens &lt;code&gt;encode()&lt;/code&gt;, hoe zou jij dat dan doen?&lt;/p&gt;
  14478. &lt;p&gt;Er zijn natuurlijk verscheidene mogelijkheden, maar de ene is al leesbaarder/compacter/sneller/handiger/robuuster dan de andere.&lt;/p&gt;
  14479. &lt;p&gt;Laat ons om te beginnen uitgaan van volgende invoer:&lt;/p&gt;
  14480. &lt;pre&gt;&lt;code&gt;var input = &#39;foo bar baz&#39;;
  14481. &lt;/code&gt;&lt;/pre&gt;
  14482. &lt;h2&gt;ECMAScript 5&lt;/h2&gt;
  14483. &lt;p&gt;Ik had onlangs iets dergelijks nodig, en mijn eerste idee was om &lt;code&gt;String#split&lt;/code&gt; te gebruiken om een array te maken van alle karakters in de invoerstring:&lt;/p&gt;
  14484. &lt;pre&gt;&lt;code&gt;input.split(&#39;&#39;); // [&#39;f&#39;, &#39;o&#39;, &#39;o&#39;, &#39; &#39;, &#39;b&#39;, &#39;a&#39;, &#39;r&#39;, &#39; &#39;, &#39;b&#39;, &#39;a&#39;, &#39;z&#39;]
  14485. &lt;/code&gt;&lt;/pre&gt;
  14486. &lt;p&gt;Vervolgens kunnen we met ES5 &lt;code&gt;Array#map&lt;/code&gt; elk karakter omvormen naar zijn gecodeerde versie, om dan met &lt;code&gt;Array#join&lt;/code&gt; de array van gecodeerde karakters samen te voegen tot een string:&lt;/p&gt;
  14487. &lt;pre&gt;&lt;code&gt;var output = input.split(&#39;&#39;).map(function(character) {
  14488.  return encode(character);
  14489. }).join(&#39;&#39;);
  14490. output; // de gecodeerde string
  14491. &lt;/code&gt;&lt;/pre&gt;
  14492. &lt;p&gt;(Zowel in dit als in de volgende voorbeelden zouden we de anonieme functie ook gewoon kunnen weglaten door &lt;code&gt;encode&lt;/code&gt; mee te geven als argument aan de &lt;code&gt;map&lt;/code&gt;-functie, maar dat leek me iets minder duidelijk.)&lt;/p&gt;
  14493. &lt;p&gt;Dit is wellicht de meest eenvoudige en leesbare oplossing. Helaas werkt deze enkel in omgevingen waar ES5 &lt;code&gt;Array#map&lt;/code&gt; beschikbaar is. Het is trouwens mogelijk om de &lt;code&gt;split()&lt;/code&gt;-stap over te slaan:&lt;/p&gt;
  14494. &lt;pre&gt;&lt;code&gt;var output = [].map.call(input, function(character) {
  14495.  return encode(character);
  14496. }).join(&#39;&#39;);
  14497. output; // de gecodeerde string
  14498. &lt;/code&gt;&lt;/pre&gt;
  14499. &lt;p&gt;ES5 biedt echter nog een andere mogelijkheid: je kan door middel van een index een bepaald karakter uit een string opvragen. &lt;code&gt;input[0]&lt;/code&gt; geeft dan het eerste karakter terug, &lt;code&gt;input[1]&lt;/code&gt; het tweede, enzovoort.&lt;/p&gt;
  14500. &lt;pre&gt;&lt;code&gt;var length = input.length,
  14501.    counter = 0,
  14502.    output = &#39;&#39;;
  14503.  
  14504. for (; counter &amp;lt; length; counter++) {
  14505.  output += encode(input[counter]);
  14506. }
  14507.  
  14508. output; // de gecodeerde string
  14509. &lt;/code&gt;&lt;/pre&gt;
  14510. &lt;p&gt;Helaas ondersteunt IE &amp;lt; 8 dit niet. (IE 8 zelf ondersteunt het enkel voor string literals, maar niet voor string objects.)&lt;/p&gt;
  14511. &lt;h2&gt;Array generics&lt;/h2&gt;
  14512. &lt;p&gt;Door gebruik te maken van &lt;a href=&quot;https://developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.6#Array_and_String_generics&quot;&gt;array generics&lt;/a&gt; kan &lt;code&gt;String#split&lt;/code&gt; vermeden worden:&lt;/p&gt;
  14513. &lt;pre&gt;&lt;code&gt;var output = Array.map(input, function(character) {
  14514.  return encode(character);
  14515. }).join(&#39;&#39;);
  14516. output; // de gecodeerde string
  14517. &lt;/code&gt;&lt;/pre&gt;
  14518. &lt;p&gt;Helaas heeft &lt;code&gt;Array.map&lt;/code&gt; nog minder ondersteuning dan &lt;code&gt;Array#map&lt;/code&gt;, aangezien het geen deel uitmaakt van de ECMAScript-standaard.&lt;/p&gt;
  14519. &lt;p&gt;Voor ES3-compatibiliteit is een andere aanpak nodig.&lt;/p&gt;
  14520. &lt;h2&gt;Compatibiliteit met ES3&lt;/h2&gt;
  14521. &lt;p&gt;Door &lt;code&gt;String#replace&lt;/code&gt; te gebruiken in plaats van &lt;code&gt;String#split&lt;/code&gt; kunnen we de array-tussenstap weglaten:&lt;/p&gt;
  14522. &lt;pre&gt;&lt;code&gt;var output = input.replace(/[&#92;s&#92;S]/g, function(character) {
  14523.  return encode(character);
  14524. });
  14525. output; // de gecodeerde string
  14526. &lt;/code&gt;&lt;/pre&gt;
  14527. &lt;p&gt;Ik vond deze reguliere expressie best interessant: &lt;code&gt;&#92;s&lt;/code&gt; matcht alle witruimte-karakters, en &lt;code&gt;&#92;S&lt;/code&gt; matcht alle andere karakters; &lt;code&gt;[&#92;s&#92;S]&lt;/code&gt; zal dus om het even welk karakter matchen.&lt;/p&gt;
  14528. &lt;p&gt;Merk op dat je niet gewoon &lt;code&gt;/./&lt;/code&gt; kan gebruiken, aangezien dat geen line feeds (&lt;code&gt;&#92;n&lt;/code&gt;), carriage returns (&lt;code&gt;&#92;r&lt;/code&gt;), line separators (&lt;code&gt;&#92;u2028&lt;/code&gt;) of paragraph separators (&lt;code&gt;&#92;u2029&lt;/code&gt;) matcht.&lt;/p&gt;
  14529. &lt;p&gt;Deze oplossing is volledig conform met ES3.&lt;/p&gt;
  14530. &lt;p&gt;Een alternatief is om &lt;code&gt;[^]&lt;/code&gt; te gebruiken in plaats van &lt;code&gt;[&#92;s&#92;S]&lt;/code&gt;: zoek elk karakter dat niet… niets is. Helaas werkt deze reguliere expressie niet in IE &amp;lt; 9. In browsers waar ze wel werkt, is ze &lt;a href=&quot;http://jsperf.com/match-any-char-regex&quot; title=&quot;jsPerf: Match any character using regex&quot;&gt;sneller dan &lt;code&gt;[&#92;s&#92;S]&lt;/code&gt;&lt;/a&gt;.&lt;/p&gt;
  14531. &lt;h2&gt;Ondersteuning voor Safari 2-achtige WebKits&lt;/h2&gt;
  14532. &lt;p&gt;Jammer genoeg ondersteunen oeroude WebKit-browsers zoals Safari 2 geen functies als tweede argument voor &lt;code&gt;String#replace&lt;/code&gt;.&lt;/p&gt;
  14533. &lt;p&gt;We kunnen echter wel &lt;code&gt;String#split&lt;/code&gt; gebruiken, vervolgens met een loopje door de resulterende array wandelen, en elk gecodeerd karakter stuk voor stuk aan een aparte string-variabele toevoegen.&lt;/p&gt;
  14534. &lt;pre&gt;&lt;code&gt;var characters = input.split(&#39;&#39;),
  14535.    length = characters.length,
  14536.    counter = 0,
  14537.    output = &#39;&#39;;
  14538.  
  14539. for (; counter &amp;lt; length; counter++) {
  14540.  output += encode(characters[counter]);
  14541. }
  14542.  
  14543. output; // de gecodeerde string
  14544. &lt;/code&gt;&lt;/pre&gt;
  14545. &lt;p&gt;Deze oplossing is net als de vorige volledig ES3-compatibel, en werkt bovendien ook in browsers die gebaseerd zijn op een verouderde WebKit-versie.&lt;/p&gt;
  14546. &lt;h2&gt;Disclaimer&lt;/h2&gt;
  14547. &lt;p&gt;&lt;a href=&quot;https://mathiasbynens.be/notes/javascript-encoding&quot;&gt;JavaScript maakt intern gebruik van de UCS-2-encodering&lt;/a&gt; (de voorloper van UTF-16). Alle ingebouwde string-eigenschappen en functies (zoals &lt;code&gt;String#length&lt;/code&gt;, &lt;code&gt;String#split&lt;/code&gt; en &lt;code&gt;String#slice&lt;/code&gt;) werken op basis van 16-bit code-eenheden in plaats van Unicode-karakters. Dit geeft soms op het eerste zicht &lt;a href=&quot;https://mathiasbynens.be/notes/javascript-unicode&quot;&gt;onverwachte resultaten&lt;/a&gt;. Als je &lt;code&gt;encode&lt;/code&gt;-functie Unicode code-points in plaats van UCS-2/UTF-16 code-eenheden verwacht, zal je dus nog een conversie-functie nodig hebben.&lt;/p&gt;
  14548. &lt;h2&gt;Over Mathias Bynens&lt;/h2&gt;
  14549. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/mathias-bynens.jpg&quot; alt=&quot;Foto van mathias bynens uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  14550. [Mathias](https://mathiasbynens.be/) is een freelance webontwikkelaar uit Grembergen, België. In zijn vrije tijd organiseert hij samen met enkele andere vrijwilligers [Fronteers-meetups in België](https://twitter.com/fronteersbe).
  14551. &lt;p&gt;Donatie: ErKriDo
  14552. Wat het goede doel betreft: m’n keuze was snel gemaakt :) &lt;a href=&quot;http://erkrido.blogspot.com/&quot;&gt;ErKriDo&lt;/a&gt; is de Buggenhoutse aftakking van &lt;a href=&quot;http://www.tegenkanker.be/kom_op_tegen_kanker&quot;&gt;Kom Op Tegen Kanker&lt;/a&gt;. Zij organiseren jaarlijks o.a. een benefietconcert waarvan de opbrengst integraal naar de Vlaamse Liga Tegen Kanker gaat, en dus goed besteed wordt.&lt;/p&gt;
  14553. </content>
  14554.  </entry>
  14555.  <entry>
  14556.    <title>Front-end meta languages</title>
  14557.    <link href="https://www.fronteers.nl/nl/blog/2011/12/front-end-meta-languages"/>
  14558.    <updated>2011-12-08T00:00:00Z</updated>
  14559.    <id>https://www.fronteers.nl/nl/blog/2011/12/front-end-meta-languages</id>
  14560.    <content xml:lang="nl" type="html">&lt;p&gt;Front-end meta languages. Een hippe, zelfverzonnen naam voor talen die compileren naar HTML, CSS en JavaScript, maar dat zelf niet zijn. Het gebruik scheelt op z&#39;n minst veel typewerk en zorgt voor overzichtelijkere code. Dankzij extensies als Compass is er nog meer tijdsbesparing en gemak te realiseren, bijvoorbeeld voor het beheer van je sprites.&lt;/p&gt;
  14561. &lt;h2&gt;Waar hebben we het over?&lt;/h2&gt;
  14562. &lt;p&gt;Voor HTML en JavaScript zijn er een paar bekende spelers, zoals &lt;a href=&quot;http://haml-lang.com/&quot;&gt;Haml&lt;/a&gt; en &lt;a href=&quot;http://jashkenas.github.com/coffee-script/&quot;&gt;CoffeeScript&lt;/a&gt;. Voor CSS hebben we talen als &lt;a href=&quot;http://sass-lang.com/&quot;&gt;Sass&lt;/a&gt; en &lt;a href=&quot;http://lesscss.org/&quot;&gt;Less&lt;/a&gt;. Haml, Sass en Less zullen de revue passeren, met een uitstapje naar &lt;a href=&quot;http://compass-style.org/&quot;&gt;Compass&lt;/a&gt;. In dit artikel komen syntaxis en voorbeelden aan bod, zodat je meteen aan de slag kunt met experimenteren. CoffeeScript blijft buiten beschouwing, omdat de leercurve daarvan hoger is en het gebruik ervan voor de meeste front-enders niet direct winst op zal leveren.&lt;/p&gt;
  14563. &lt;p&gt;NB: Als je &lt;a href=&quot;http://nodejs.org/&quot;&gt;Node.js&lt;/a&gt; gebruikt, zou je eens kunnen kijken naar &lt;a href=&quot;http://jade-lang.com/&quot;&gt;Jade&lt;/a&gt; en &lt;a href=&quot;http://learnboost.github.com/stylus/&quot;&gt;Stylus&lt;/a&gt;. In dit artikel komen ze verder niet terug.&lt;/p&gt;
  14564. &lt;h2&gt;Compilers schrijven geen slechte code&lt;/h2&gt;
  14565. &lt;p&gt;Om dit fabeltje maar meteen de wereld uit te helpen: compilers schrijven geen slechte code. Uiteindelijk is wat er uit Haml, Sass, Less en CoffeeScript komt afhankelijk van de kwaliteit van de ontwikkelaar die deze tools gebruikt. Kenmerkend voor al deze talen is dat ze weinig dicteren: als je je CSS 20 niveaus diep wilt nesten of tabellen voor lay-out wilt gebruiken, dan houden ze je niet tegen. Zoals je text editor dat ook niet doet. Wél vangen ze syntactische fouten af; een compiler gooit een error als je een dubbele punt vergeet. Speel een tijdje met je code, zie wat uit de compiler komt en je leert snel hoe je code er uit zal zien na compilatie.&lt;/p&gt;
  14566. &lt;h2&gt;Compileren: van meta language naar HTML, CSS en JavaScript&lt;/h2&gt;
  14567. &lt;p&gt;Dit artikel is gebaseerd op het lokaal compileren (&amp;quot;vertalen naar de uiteindelijke taal&amp;quot;) van alle code. Zodra je deze talen in een dynamisch project wilt gebruiken zijn er allerlei setups mogelijk. Voor nu doen we alles zonder enige dynamiek en richten we ons puur op de compilatie. Dat kan voor een deel van deze talen client side met JavaScript (Less heeft hier een officiële oplossing voor, terwijl Sass enkele officieuze implementaties kent). Omdat ik meen dat er geen enkele reden is om dit te willen, compileren we alles voordat we het naar de browser sturen.&lt;/p&gt;
  14568. &lt;p&gt;Als je OSX gebruikt dan heb je de beschikking over verschillende tools, zoals het kersverse &lt;a href=&quot;http://incident57.com/codekit/&quot;&gt;CodeKit&lt;/a&gt;. Dit programma is nog in beta en daarom voorlopig gratis. CodeKit houdt de bestanden in een folder in de gaten en compileert zodra er iets gewijzigd is. Het is een one-stop-shop voor alle talen in dit artikel, op het moment van schrijven met uitzondering van Compass. Er kan echter ieder moment een update uitkomen met ondersteuning voor Compass; de kans is groot dat het zover is wanneer je dit leest. Kijk na het installeren ook eens naar de opties. Je kunt er onder andere instellen of en hoe code geminified moet worden, of er enkele of dubbele quotes gebruikt worden, enzovoort. Voor alternatieven voor OSX, zie hieronder.&lt;/p&gt;
  14569. &lt;p&gt;Als je op Windows werkt, is het een klein beetje meer werk. Voor zover ik weet is er voor dat platform geen alles-in-één oplossing. Je kunt gebruik maken van &lt;a href=&quot;http://mhs.github.com/scout-app/&quot;&gt;Scout&lt;/a&gt; of &lt;a href=&quot;http://compass.handlino.com/&quot;&gt;Compass.app&lt;/a&gt; voor Sass en Compass (deze apps werken ook op OSX). Voor Less kun je &lt;a href=&quot;http://wearekiss.com/simpless&quot;&gt;SimpLESS&lt;/a&gt; of &lt;a href=&quot;http://winless.org/&quot;&gt;WinLess&lt;/a&gt; gebruiken. Voor CoffeeScript is er de &lt;a href=&quot;https://github.com/alisey/CoffeeScript-Compiler-for-Windows&quot;&gt;CoffeeScript Compiler&lt;/a&gt;. Een GUI voor Haml is er niet, maar als je niet bang bent voor de command-line kun je daarmee een eind komen.&lt;/p&gt;
  14570. &lt;p&gt;Als Linux-goeroe ben je vast handig genoeg om de stack zelf te installeren, maar je kunt ook de Linux-versie van bovenstaande Compass.app gebruiken als je een GUI wilt voor Sass en Compass.&lt;/p&gt;
  14571. &lt;p&gt;Met &lt;a href=&quot;http://rendera.heroku.com/&quot;&gt;Rendera&lt;/a&gt; kun je online het één en ander proberen in Haml, Sass en CoffeeScript. Handig als je alleen een beetje met de syntaxis wilt stoeien.&lt;/p&gt;
  14572. &lt;h2&gt;HTML: &lt;a href=&quot;http://haml-lang.com/&quot;&gt;Haml&lt;/a&gt;&lt;/h2&gt;
  14573. &lt;p&gt;Het schrijven van HTML is zo erg niet: je editor sluit iedere tag met één toetscombinatie zelf wel af, &amp;quot;angle brackets&amp;quot; zijn helemaal niet overbodig en een sloot aan afsluitende tags onderaan hoort er nu eenmaal bij. Zo dachten de meesten erover die met Haml begonnen en—toegegeven: na enige gewenning—nooit meer iets anders willen.&lt;/p&gt;
  14574. &lt;p&gt;Haml is alweer vijf jaar oud en daarmee in de developmentwereld zeker volwassen te noemen. De code erachter draait op Ruby, maar dat wil niet zeggen dat je het alleen in op Ruby-gebaseerde projecten in kunt zetten. Als je lokaal ontwikkelt zonder dynamische data (je schrijft puur statische HTML), dan kun je met Haml prima uit de voeten. Wil je het gebruiken in bijvoorbeeld een PHP-project, kijk dan eens naar &lt;a href=&quot;http://code.google.com/p/phamlp/&quot; title=&quot;PHamlP&quot;&gt;deze port&lt;/a&gt; (er zijn ook ports voor .NET, Java en zelfs Perl). Gebruik je Wordpress, dan is &lt;a href=&quot;https://github.com/welaika/wordless&quot;&gt;Wordless&lt;/a&gt; een goede optie.&lt;/p&gt;
  14575. &lt;p&gt;Van alle in dit artikel besproken talen is Haml het eenvoudigst qua hoeveelheid opties en syntaxis. Een prima optie om mee te beginnen dus. Er zitten geen wereldschokkende features in Haml; de voornaamste voordelen zijn de overzichtelijke hiërarchie en het niet hoeven sluiten van je tags. Haml gebruikt &amp;quot;significant whitespace&amp;quot;: het aantal spaties aan het begin van de regel geeft het niveau en daarmee de hiërarchie aan. Alle editors kunnen gebruik maken van &amp;quot;soft tabs&amp;quot;, waarbij het gebruik van de tab-toets ervoor zorgt dat onder water twee spaties gebruikt worden.&lt;/p&gt;
  14576. &lt;p&gt;De syntaxis van Haml is overzichtelijk. Hieronder eerst wat Haml, met daarna het gecompileerde resultaat.&lt;/p&gt;
  14577. &lt;h2&gt;Haml:&lt;/h2&gt;
  14578. &lt;pre&gt;&lt;code&gt;!!!
  14579. %section#about
  14580.  %h1 About us
  14581.  
  14582.  %p.introduction
  14583.    %a{:href =&amp;gt; &#39;http://fronteers.nl/&#39;} Fronteers website
  14584.  
  14585.  #carousel.projects
  14586.    :javascript
  14587.      alert(&#39;initialize&#39;);
  14588.  
  14589.  %form{:method =&amp;gt; &#39;post&#39;}
  14590.    %fieldset
  14591.      %legend Some form…
  14592. &lt;/code&gt;&lt;/pre&gt;
  14593. &lt;h2&gt;HTML:&lt;/h2&gt;
  14594. &lt;pre&gt;&lt;code&gt;&amp;lt;!DOCTYPE html&amp;gt;
  14595. &amp;lt;section id=&amp;quot;about&amp;quot;&amp;gt;
  14596.  &amp;lt;h1&amp;gt;About us&amp;lt;/h1&amp;gt;
  14597.  
  14598.  &amp;lt;p class=&amp;quot;introduction&amp;quot;&amp;gt;
  14599.    &amp;lt;a href=&amp;quot;http://fronteers.nl/&amp;quot;&amp;gt;Fronteers website&amp;lt;/a&amp;gt;
  14600.  &amp;lt;/p&amp;gt;
  14601.  
  14602.  &amp;lt;div id=&amp;quot;carousel&amp;quot; class=&amp;quot;projects&amp;quot;&amp;gt;
  14603.    &amp;lt;script&amp;gt;
  14604.      &amp;lt;![CDATA[
  14605.        alert(&#39;initialize&#39;);
  14606.      ]]&amp;gt;
  14607.    &amp;lt;/script&amp;gt;
  14608.  &amp;lt;/div&amp;gt;
  14609.  
  14610.  &amp;lt;form method=&amp;quot;post&amp;quot;&amp;gt;
  14611.    &amp;lt;fieldset&amp;gt;
  14612.      &amp;lt;legend&amp;gt;Some form…&amp;lt;/legend&amp;gt;
  14613.    &amp;lt;/fieldset&amp;gt;
  14614.  &amp;lt;/form&amp;gt;
  14615. &amp;lt;/section&amp;gt;
  14616. &lt;/code&gt;&lt;/pre&gt;
  14617. &lt;p&gt;Zoals je ziet worden HTML-elementen aangegeven met een %-teken. Alles wat je aansluitend tussen curly brackets zet worden attributen (de dubbele punt voor het attribuut komt uit Ruby, eventueel kun je ook gewoon &lt;code&gt;href&lt;/code&gt; gebruiken, met quotes).&lt;/p&gt;
  14618. &lt;p&gt;Door een &lt;code&gt;#&lt;/code&gt;-teken te gebruiken geef je aan dat dit een ID is, terwijl een punt een classname aangeeft. Een duidelijke relatie tussen je HTML en CSS dus, wat de leesbaarheid ten goede komt. Door het element weg te laten, zoals bij &lt;code&gt;#carousel.projects&lt;/code&gt;, zal Haml een &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; gebruiken.&lt;/p&gt;
  14619. &lt;p&gt;&lt;code&gt;:javascript&lt;/code&gt; is een filter, meer hierover in de &lt;a href=&quot;http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html#filters&quot;&gt;Haml-documentatie&lt;/a&gt;. Je hebt er nog veel meer, bijvoorbeeld om whitespace te preserveren of een &lt;code&gt;&amp;lt;style&amp;gt;&lt;/code&gt;-element toe te voegen.&lt;/p&gt;
  14620. &lt;p&gt;De voordelen van Haml op een rijtje: inzichtelijke hiërarchie tussen HTML-elementen onderling, duidelijke relatie tussen markup en CSS selectors, geen onnodige haakjes en geen onoverzichtelijke sloot aan afsluitende tags onderaan je pagina. Als bonus kun je aangeven of je enkele of dubbele quotes wilt gebruiken en hoe je je markup wilt compileren (ingesprongen, niet ingesprongen of alles op één regel).&lt;/p&gt;
  14621. &lt;h2&gt;CSS: &lt;a href=&quot;http://sass-lang.com/&quot;&gt;Sass&lt;/a&gt; &amp;amp; &lt;a href=&quot;http://lesscss.org/&quot;&gt;Less&lt;/a&gt;&lt;/h2&gt;
  14622. &lt;p&gt;Of je Sass of Less wilt gebruiken hangt sterk af van je voorkeur en ontwikkelomgeving. In Ruby on Rails wordt Sass veel vaker gebruikt dan Less, terwijl ik zelfstandige front-enders juist vaker over Less hoor. Belangrijkste is dat je een tool gebruikt waarvan de syntax bij je past en die eenvoudig in te zetten is in de projecten waar je aan werkt. Voor dit artikel maakt het weinig uit: met de hierboven beschreven software kun je ze allebei lokaal compileren. De functionaliteit is vrijwel hetzelfde, met als uitzondering dat Compass (zie verderop in dit artikel) of een vergelijkbare extensie niet beschikbaar is voor Less.&lt;/p&gt;
  14623. &lt;p&gt;Sass en Less voegen de functionaliteit toe die je al jaren mist in CSS. Wat dacht je van variabelen, herbruikbare functies en calculaties met verschillende eenheden? En dan kun je je bestaande CSS-bestand nog gewoon hernoemen ook, waarna je in je eigen tempo de wijzigingen door kunt voeren die voor jou nuttig zijn. Hieronder staan enkele voorbeelden.&lt;/p&gt;
  14624. &lt;p&gt;NB: Sass kent twee verschillende syntaxissen: Scss (&amp;quot;Sassy CSS&amp;quot;) en &amp;quot;original Sass&amp;quot;. Original Sass gebruikt geen curly brackets en puntkomma&#39;s, maar significant whitespace. Velen, waaronder ondergetekende, vinden dit een overzichtelijkere manier van schrijven. Door het ontbreken van deze &amp;quot;onnodige&amp;quot; karakters is er minder visuele afleiding. Voor dit artikel is gekozen voor Scss, omdat dit voor beginnende gebruikers bekender oogt.&lt;/p&gt;
  14625. &lt;h2&gt;Nested selectors&lt;/h2&gt;
  14626. &lt;p&gt;Wat velen een doorn in het oog is aan CSS is het niet DRY karakter ervan (Don&#39;t Repeat Yourself), wat bijvoorbeeld opvalt wanneer je gebruik maakt van geneste selectors. Zowel Sass als Less lossen dit op door nesting toe te staan, waarna er valide CSS van gemaakt wordt. Let echter op dat je hier geen nestingfeest van maakt: meer dan een paar niveaus diep is niet bevorderlijk voor de verwerkingssnelheid van de browser en de hoofdpijn die je gaat krijgen door een te hoge &lt;a href=&quot;http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/&quot;&gt;specificity&lt;/a&gt;. Hetzelfde als wanneer je je selectors met de hand zou schrijven dus.&lt;/p&gt;
  14627. &lt;h2&gt;Scss / Less:&lt;/h2&gt;
  14628. &lt;pre&gt;&lt;code&gt;#header {
  14629.  color: #f0f;
  14630.  h1 {
  14631.    color: #000;
  14632.  }
  14633.  p {
  14634.    color: #333;
  14635.    a {
  14636.      color: #999;
  14637.    }
  14638.  }
  14639. }
  14640. &lt;/code&gt;&lt;/pre&gt;
  14641. &lt;h2&gt;CSS:&lt;/h2&gt;
  14642. &lt;pre&gt;&lt;code&gt;#header {
  14643.  color: #f0f;
  14644. }
  14645. #header h1 {
  14646.  color: #000;
  14647. }
  14648. #header p {
  14649.  color: #333;
  14650. }
  14651. #header p a {
  14652.  color: #999;
  14653. }
  14654. &lt;/code&gt;&lt;/pre&gt;
  14655. &lt;h2&gt;Mixins&lt;/h2&gt;
  14656. &lt;p&gt;Mixins zijn herbruikbare blokken met stijldeclaraties die je eventueel kunt combineren met zelf te kiezen parameters. De syntax van Scss is iets meer verbose en daarmee wat mij betreft duidelijker, omdat er geen verwarring kan ontstaan tussen een class selector en een mixin.&lt;/p&gt;
  14657. &lt;p&gt;In de dagelijkse praktijk zul je zien dat mixins veel tijd kunnen schelen, bijvoorbeeld doordat je in een herbruikbare mixin alle vendor specifieke prefixen kunt definiëren. Een voorbeeld hiervan vind je in het onderdeel over Compass een stukje naar verderop.&lt;/p&gt;
  14658. &lt;h2&gt;Scss:&lt;/h2&gt;
  14659. &lt;pre&gt;&lt;code&gt;@mixin left($distance: 20px) {
  14660.  float: left;
  14661.  margin-left: $distance;
  14662. }
  14663. .foo {
  14664.  @include left;
  14665. }
  14666. .bar {
  14667.  @include left(10px);
  14668. }
  14669. &lt;/code&gt;&lt;/pre&gt;
  14670. &lt;h2&gt;Less:&lt;/h2&gt;
  14671. &lt;pre&gt;&lt;code&gt;.left(@distance: 20px) {
  14672.  float: left;
  14673.  margin-left: @distance;
  14674. }
  14675. .foo {
  14676.  .left;
  14677. }
  14678. .bar {
  14679.  .left(10px);
  14680. }
  14681. &lt;/code&gt;&lt;/pre&gt;
  14682. &lt;h2&gt;CSS:&lt;/h2&gt;
  14683. &lt;pre&gt;&lt;code&gt;.foo {
  14684.  float: left;
  14685.  margin-left: 20px;
  14686. }
  14687. .bar {
  14688.  float: left;
  14689.  margin-left: 10px;
  14690. }
  14691. &lt;/code&gt;&lt;/pre&gt;
  14692. &lt;h2&gt;En nog veel meer&lt;/h2&gt;
  14693. &lt;p&gt;Bovenstaande is slechts het topje van de ijsberg. Zowel Sass als Less bieden de mogelijkheid om variabelen te gebruiken, zodat je kleuren, marges, regelafstanden of wat dan ook maar één keer hoeft te definiëren, waardoor zoeken en vervangen voor het maken van een aanpassing niet meer nodig is. Daarnaast is iets als &lt;code&gt;$link-hover-color&lt;/code&gt; een stuk duidelijker voor jezelf of een toekomstige ontwikkelaar dan een willekeurige #hexadecimale kleurcode.&lt;/p&gt;
  14694. &lt;p&gt;Een grote collectie aan ingebouwde functies zorgen ervoor dat bijvoorbeeld het gebruiken van afgeleide kleuren eenvoudig is. Zo gebruik je &lt;code&gt;lighten(kleur, 10%)&lt;/code&gt; om een kleur 10% lichter te maken, waarna Sass of Less de nieuwe #hex-waarde berekenen. Sass heeft meer functies in zich dan Less, maar je moet je afvragen hoe vaak je de meer exotische functies gebruikt.&lt;/p&gt;
  14695. &lt;p&gt;Mathematische operaties worden door beide talen ondersteund. Van optellen en vermenigvuldigen (handig bij het berekenen van afmetingen in em&#39;s) tot het &amp;quot;optellen&amp;quot; van kleuren (wat alleen goed werkt in simpele gevallen, zoals bij grijswaarden).&lt;/p&gt;
  14696. &lt;p&gt;Daarnaast heeft Sass onderstaande manier om stijlen in een media query overzichtelijk te koppelen aan een selector. Op deze manier hoef je niet totaal ergens anders te gaan zoeken naar een media query-specifieke stijl. Sass combineert media queries waar mogelijk: gebruik je twee keer dezelfde &lt;code&gt;@media&lt;/code&gt;-regel, dan komen de bijbehorende stijlen gecombineerd binnen een enkele &lt;code&gt;@media&lt;/code&gt;-regel te staan.&lt;/p&gt;
  14697. &lt;h2&gt;Scss:&lt;/h2&gt;
  14698. &lt;pre&gt;&lt;code&gt;#header {
  14699.  width: 300px;
  14700.  @media screen and (orientation: landscape) {
  14701.    width: 500px;
  14702.  }
  14703. }
  14704. &lt;/code&gt;&lt;/pre&gt;
  14705. &lt;h2&gt;CSS:&lt;/h2&gt;
  14706. &lt;pre&gt;&lt;code&gt;#header {
  14707.  width: 300px;
  14708. }
  14709. @media screen and (orientation: landscape) {
  14710.  #header {
  14711.    width: 500px;
  14712.  }
  14713. }
  14714. &lt;/code&gt;&lt;/pre&gt;
  14715. &lt;h2&gt;&lt;a href=&quot;http://compass-style.org/&quot;&gt;Compass&lt;/a&gt;&lt;/h2&gt;
  14716. &lt;p&gt;Compass is een extensie voor Sass waarmee je nóg meer snelheidswinst kunt boeken. Het maakt het onder andere makkelijk om afbeeldingen en fonts in je CSS te embedden (door middel van Data URI&#39;s), afmetingen van een afbeelding te achterhalen en te gebruiken in je CSS, met één regel een CSS reset toe te voegen of een collectie helpers aan te roepen om eenvoudiger gebruik te maken van diverse grid systems. De &lt;a href=&quot;http://compass-style.org/help/&quot;&gt;documentatie van Compass&lt;/a&gt; is uitstekend, dus ik verwijs je graag daar naartoe voor alle informatie hierover. Maar eerst overtuig ik je met twee voorbeelden die de winst die uit Compass te halen is meteen duidelijk maken.&lt;/p&gt;
  14717. &lt;h2&gt;Vendor specifieke prefixen&lt;/h2&gt;
  14718. &lt;p&gt;Het is vermoeiend om steeds weer een sloot aan vendor specifieke prefixen te moeten gebruiken. Ze zorgen voor extra regels code (en dus meer scrollen) en &amp;quot;visual clutter&amp;quot;. Compass heeft mixins voor veel CSS3-property&#39;s die dit voorkomen. Bijvoorbeeld voor &lt;code&gt;border-radius&lt;/code&gt;:&lt;/p&gt;
  14719. &lt;h2&gt;Compass:&lt;/h2&gt;
  14720. &lt;pre&gt;&lt;code&gt;a {
  14721.  @include border-radius(10px);
  14722. }
  14723. &lt;/code&gt;&lt;/pre&gt;
  14724. &lt;h2&gt;CSS:&lt;/h2&gt;
  14725. &lt;pre&gt;&lt;code&gt;a {
  14726.  -moz-border-radius: 10px;
  14727.  -webkit-border-radius: 10px;
  14728.  -o-border-radius: 10px;
  14729.  -ms-border-radius: 10px;
  14730.  -khtml-border-radius: 10px;
  14731.  border-radius: 10px;
  14732. }
  14733. &lt;/code&gt;&lt;/pre&gt;
  14734. &lt;h2&gt;Sprites beheren: onbegonnen werk&lt;/h2&gt;
  14735. &lt;p&gt;Het maken en beheren van sprites is veel werk. Afbeeldingen samenvoegen tot een groter geheel, de &lt;code&gt;background-position&lt;/code&gt; van ieder element opzoeken en de hele boel weer aanpassen wanneer je één van de afbeeldingen een paar pixels groter maakt. Natuurlijk zijn er tools die het leven wat makkelijker maken, maar er zijn er weinig die zo verweven zijn met je ontwikkelproces als Compass.&lt;/p&gt;
  14736. &lt;p&gt;Stel je voor dat je een &lt;code&gt;images/flags&lt;/code&gt; folder hebt met daarin de vlaggen van verschillende landen: &lt;code&gt;nl.png&lt;/code&gt;, &lt;code&gt;be.png&lt;/code&gt;, enzovoort. Je wilt deze in een sprite gebruiken, zonder na te hoeven denken over de sprite zelf. Eventueel wil je later grotere afbeeldingen gebruiken, maar ook daar wil je in dat geval geen omkijken naar hebben. Tijd voor wat Compass-magie.&lt;/p&gt;
  14737. &lt;h2&gt;Scss&lt;/h2&gt;
  14738. &lt;pre&gt;&lt;code&gt;@import &amp;quot;images/flags/*.png&amp;quot;;
  14739. a.nl {
  14740.  @include flags-sprite(nl);
  14741. }
  14742. a.be {
  14743.  @include flags-sprite(be);
  14744. }
  14745. &lt;/code&gt;&lt;/pre&gt;
  14746. &lt;h2&gt;CSS:&lt;/h2&gt;
  14747. &lt;pre&gt;&lt;code&gt;a.nl,
  14748. a.be {
  14749.  background: url(&#39;/images/flags-s34fe0604ab.png&#39;) no-repeat;
  14750. }
  14751. a.nl {
  14752.  background-position: 0 0;
  14753. }
  14754. a.be {
  14755.  background-position: 0 -16px;
  14756. }
  14757. &lt;/code&gt;&lt;/pre&gt;
  14758. &lt;p&gt;Dit is een simpel voorbeeld, waarbij Compass op basis van de eerste &lt;code&gt;@import&lt;/code&gt; alle PNG&#39;s in de folder &lt;code&gt;images/flags&lt;/code&gt; samenvoegt tot één afbeelding en de coördinaten van de verschillende afbeeldingen berekent. De bestandsnaam is gebaseerd op de inhoud van de afbeeldingen, dus wanneer je er eentje aanpast, krijgt de sprite een nieuwe bestandsnaam. Handig als je far future expiry headers gebruikt.&lt;/p&gt;
  14759. &lt;p&gt;Hierna komt de functie &lt;code&gt;flags-sprite()&lt;/code&gt; beschikbaar, waarbij de naam een afgeleide is van het pad. Als je het over kerstbomen in &lt;code&gt;images/trees&lt;/code&gt; zou hebben, dan gebruik je &lt;code&gt;trees-sprite()&lt;/code&gt;. De functie accepteert de naam van het bestand als parameter, zonder &lt;code&gt;.png&lt;/code&gt;. Er zijn optionele parameters om offsets aan te geven, bijvoorbeeld om de achtergrondafbeelding een x-aantal pixels naar rechts of naar beneden te positioneren.&lt;/p&gt;
  14760. &lt;p&gt;Sass kan gebruik maken van each-loops, waarmee je door alle landen heen kunt lopen. Dat scheelt nog meer typewerk. Compass heeft zelf ook methoden om op basis van de bestandsnamen van de afbeeldingen een lijst met classnames op te bouwen. Meer hierover in de zeer complete &lt;a href=&quot;http://compass-style.org/help/tutorials/spriting/&quot;&gt;Compass spriting tutorial&lt;/a&gt;, net als informatie over de verschillende opties (verticale of horizontale sprites, tussenruimte, enzovoort).&lt;/p&gt;
  14761. &lt;h2&gt;Waar wacht je op?&lt;/h2&gt;
  14762. &lt;p&gt;Front-end meta languages zijn niet altijd eenvoudig om in bestaande processen te implementeren. Je moet iedereen mee krijgen, omdat jij niet steeds andermans CSS kunt overschrijven met code die wordt gecompileerd op basis van jouw Sass of Less. Als je echter iedereen zo ver kunt krijgen, dan zorgt het gebruik van deze talen voor een grote tijdswinst en betere onderhoudbaarheid van je front-end code.&lt;/p&gt;
  14763. &lt;p&gt;Als je een zelfstandige front-ender bent die HTML of CSS oplevert, dan staat niets je in de weg om vandaag nog te beginnen met het gebruik van front-end meta languages. Wat eruit komt is immers &amp;quot;gewoon&amp;quot; HTML en CSS.&lt;/p&gt;
  14764. &lt;p&gt;Maar het allerbelangrijkste: gebruik van front-end meta languages is leuker en maakt je leven makkelijker. Happy holidays!&lt;/p&gt;
  14765. &lt;h3&gt;Over Roy Tomeij&lt;/h3&gt;
  14766. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/roy-tomeij.jpg&quot; alt=&quot;Foto van roy tomeij uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  14767. Roy Tomeij is co-founder van 80beans en [SliceCraft](http://www.slicecraft.nl/) in Amsterdam, front-end developer en spreker. Hij houdt van front-end meta languages zoals Haml, Sass en CoffeeScript. Als je meer wilt weten, neem dan contact op met [@roy](https://twitter.com/roy) via Twitter.
  14768. &lt;p&gt;Donatie: Doe Een Wens Stichting Nederland
  14769. De vergoeding voor dit artikel gaat naar &lt;a href=&quot;http://www.doeeenwens.nl/&quot;&gt;Doe Een Wens Stichting Nederland&lt;/a&gt;, zodat de liefste wens van kinderen met een levensbedreigende ziekte vervult kan worden.&lt;/p&gt;
  14770. </content>
  14771.  </entry>
  14772.  <entry>
  14773.    <title>Responsive images; een experiment</title>
  14774.    <link href="https://www.fronteers.nl/nl/blog/2011/12/responsive-images-een-experiment"/>
  14775.    <updated>2011-12-07T00:00:00Z</updated>
  14776.    <id>https://www.fronteers.nl/nl/blog/2011/12/responsive-images-een-experiment</id>
  14777.    <content xml:lang="nl" type="html">&lt;p&gt;Goed anderhalf jaar geleden weerklonken de eerste oh&#39;s en ah&#39;s in de Twittersphere. Toen was responsive webdesign niet meer dan een—weliswaar beloftevolle—gimmick. Sindsdien is het hard gegaan: klanten hebben de mond vol over &lt;em&gt;mobile first&lt;/em&gt; en vandaag zijn zelfs onze moeders verslingerd aan hun iPad&#39;s. Er is uitstekend &lt;a href=&quot;http://www.amazon.com/Responsive-Web-Design-Ethan-Marcotte/dp/B005SYWGXW/ref=sr_1_1?ie=UTF8&amp;amp;qid=1322663650&amp;amp;sr=8-1&quot;&gt;leesvoer&lt;/a&gt; voorhanden, webdesigners overal te lande zijn druk aan het experimenteren en de &lt;a href=&quot;http://bostonglobe.com/&quot;&gt;eerste responsieve websites&lt;/a&gt; voor het brede publiek staan te &lt;a href=&quot;http://www.handelsbeurs.be/&quot;&gt;blinken&lt;/a&gt; op het internet. Over een jaar is responsive webdesign niet langer bijzaak, maar &lt;em&gt;noodzaak&lt;/em&gt;.&lt;/p&gt;
  14778. &lt;h2&gt;De toekomst is responsive&lt;/h2&gt;
  14779. &lt;p&gt;Wie nog niet helemaal overtuigd is van het belang van responsive webdesign voor een betere gebruikservaring, moet zeker de inspirerende &lt;a href=&quot;http://www.slideshare.net/bytte/responsive-web-design-10389263&quot;&gt;presentatie van Thomas Byttebier&lt;/a&gt; bekijken of het &lt;a href=&quot;http://www.abookapart.com/products/responsive-web-design&quot;&gt;boek van Ethan Marcotte&lt;/a&gt; lezen.&lt;/p&gt;
  14780. &lt;p&gt;Ik ga er voor het gemak vanuit dat je al vertrouwd bent met hoe je de media queries uit CSS3 gebruikt—de basisbestanddelen van iedere responsieve website. En anders kan je na deze &lt;a href=&quot;http://teamtreehouse.com/library/design-foundations/css3/media-queries/introduction/play&quot;&gt;5 minuten durende video-introductie&lt;/a&gt; al meepraten. Want zo eenvoudig is het basisconcept.&lt;/p&gt;
  14781. &lt;h2&gt;Geen rozengeur&lt;/h2&gt;
  14782. &lt;p&gt;Het is niet al maneschijn wat de klok slaat. Een lastige kwestie voor ontwerpers van responsieve websites is hoe om te gaan met afbeeldingen. Als je je ontwerp optimaliseert voor een desktopbrowser, een tablet en een smartphone (of alles daar tussenin), dan spreekt het voor zich dat je ook je afbeeldingen wilt schalen—of lichte variaties van je afbeeldingen wilt weergeven op die verschillende apparaten.&lt;/p&gt;
  14783. &lt;p&gt;Terzelvertijd wil je te allen prijze voorkomen dat browsers meer afbeeldingen downloaden dan strikt noodzakelijk. Bandbreedte is immers kostbaar en de snelheid van mobiel dataverkeer is gemiddeld genomen—althans in België—niet iets om over naar huis te schrijven. En dan hebben wij het in het Westen nog niet eens zo slecht.&lt;/p&gt;
  14784. &lt;p&gt;Voor de achtergrondafbeeldingen in je CSS stelt dit probleem zich niet, maar de &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tags in je HTML gooien helaas roet in het eten. Moderne browsers starten zo snel mogelijk met het inladen van afbeeldingen—nog voor het DOM goed en wel is ingeladen (en liefst met zoveel mogelijk tegelijkertijd). Dat maakt het lastig om én een alternatief aan te bieden voor wie JavaScript niet heeft aanstaan en tegelijk te voorkomen dat een browser mét JavaScript geen overbodige afbeeldingen inlaadt; afbeeldingen die nooit weergegeven zullen worden op jouw apparaat.&lt;/p&gt;
  14785. &lt;h2&gt;Oplossingen&lt;/h2&gt;
  14786. &lt;p&gt;Jason Grigsby heeft over dit onderwerp een &lt;a href=&quot;http://www.cloudfour.com/responsive-imgs/&quot;&gt;leerrijk en uitvoerig artikel&lt;/a&gt; geschreven. In het vervolg op dit artikel bespreekt hij de &lt;a href=&quot;http://www.cloudfour.com/responsive-imgs-part-2/&quot;&gt;voor- en nadelen van de reeds beschikbare technieken&lt;/a&gt; om de meest geschikte afbeelding te sturen naar apparaten met uiteenlopende scherm- en browserbreedtes.&lt;/p&gt;
  14787. &lt;p&gt;Het gros van de technieken maakt gebruik van JavaScript en sommige bieden een fallback voor wanneer JavaScript niet beschikbaar is. De meeste technieken gebruiken bovendien Apache&#39;s &lt;code&gt;mod_rewrite&lt;/code&gt; module voor het herschrijven van URI&#39;s en/of van PHP of Ruby om afbeeldingen aan de serverkant te manipuleren. De ene techniek is al ingenieuzer dan de andere en het vergt veel tijd om ze &lt;em&gt;allemaal&lt;/em&gt; uit te proberen. Dat heb ik dan ook niet gedaan, moet ik toegeven.&lt;/p&gt;
  14788. &lt;p&gt;Om het probleem beter te begrijpen, heb ik vorige zomer de mouwen opgestroopt en zelf een script in elkaar geknutseld. Natuurlijk is het maar &lt;em&gt;een&lt;/em&gt; oplosing—en &lt;em&gt;zeker&lt;/em&gt; geen ideale—maar het heeft me wel een beter inzicht gegeven in de problemen waar je mee te maken krijgt als je een responsieve website bouwt. In dit artikel leg ik uit hoe het script werkt en welke gebreken het heeft. Misschien brengt het andere, getalenteerdere developers op nieuwe ideeën. En zo maken we het web samen beter. Als dat geen mooie kerstgedachte is!&lt;/p&gt;
  14789. &lt;h2&gt;Meet Mingy&lt;/h2&gt;
  14790. &lt;p&gt;Ieder kind—of in ieder geval iedere jQuery plugin—moet een naam hebben. Ook al klinkt die naam erg sullig. Mingy betekent krenterig (een zeer on-Vlaamse eigenschap overigens) en dat is precies wat je moet zijn als je afbeeldingen naar een mobiel apparaat stuurt. Mingy stuurt net zoveel image-data naar de browser als strikt noodzakelijk. Dat is het uitgangspunt.&lt;/p&gt;
  14791. &lt;p&gt;Net als jij, ben ik fan van nette HTML, of &lt;a href=&quot;http://en.wikipedia.org/wiki/Plain_Old_Semantic_HTML#Plain_Old_Semantic_HTML_.28POSH.29&quot;&gt;POSH&lt;/a&gt; als je wil. Voor mij dus liever geen &lt;code&gt;&amp;lt;noscript&amp;gt;&lt;/code&gt; wrappers rondom de afbeeldingen en geen &lt;code&gt;rare_urls_met?kleine&amp;amp;groteversies&lt;/code&gt; als &lt;code&gt;src&lt;/code&gt; van de &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tag. En JavaScript hoort in een afzonderlijk bestand; niet inline. &lt;em&gt;Unobtrusive JavaScript&lt;/em&gt; heet dat met een sjiek woord.&lt;/p&gt;
  14792. &lt;p&gt;Bekijk misschien eerst even deze &lt;a href=&quot;http://www.catchup.be/experiments/mingy_demo/&quot;&gt;demo&lt;/a&gt;. Maak je browservenster breder of smaller en bekijk met Firebug of de Webkit Inpsector wat de impact is op het totale gewicht van de pagina.&lt;/p&gt;
  14793. &lt;h2&gt;Hoe werkt het?&lt;/h2&gt;
  14794. &lt;p&gt;Het script gaat uit van het idee dat je met &lt;em&gt;master images&lt;/em&gt; werkt. Een master image is de grootste variant (of groter) van de afbeelding die je wilt gebruiken. We gaan er ook vanuit dat iedere media query dezelfde master image inlaadt, maar met uiteenlopende afmetingen. De verhoudingen hoeven niet per se dezelfde te zijn. Het kan dus best dat je rechthoekige afbeeldingen gebruikt in de brede desktop-versie en vierkante afbeeldingen op het scherm van een smartphone. Een &lt;a href=&quot;https://github.com/roelvangils/mingy/blob/master/mingy/resize.php&quot;&gt;PHP-script&lt;/a&gt; aan de serverkant zorgt ervoor dat de afbeeldingen netjes worden bijgeknipt en gecachet. De situatie waarbij je een hele andere afbeelding wilt inladen voor een andere schermbreedte is (nog) niet gedekt door Mingy.&lt;/p&gt;
  14795. &lt;p&gt;Meteen nadat de browser het pagina-DOM heeft ingelezen, schiet Mingy in actie (&lt;a href=&quot;https://github.com/roelvangils/mingy/blob/master/mingy/jquery.mingy.js&quot;&gt;bekijk het script&lt;/a&gt;). In afwachting van het ophalen van een op maat geschaalde afbeelding, geeft de browser een transparante PNG-afbeelding van 68 bytes weer. Dat is de &lt;a href=&quot;http://garethrees.org/2007/11/14/pngcrush/&quot;&gt;kleinst mogelijke transparante PNG&lt;/a&gt; die je kan maken. Het is de enige betrouwbare manier om te verhinderen dat je browser eerst een veel te grote afbeelding inlaadt en die vervolgens vervangt door een kleinere afbeelding—want dan zouden alle inspanningen voor niks geweest zijn.&lt;/p&gt;
  14796. &lt;p&gt;Je zal terecht opmerken dat we het aantal HTTP-requests op deze manier wel opvoeren. Een praktijktest illustreert echter dat dat eigenlijk helemaal niet opweegt tegen het verminderde gewicht en de verminderde laadtijd van een pagina met veel afbeeldingen. Het &lt;a href=&quot;http://9to5mac.com/2011/08/10/new-in-os-x-lion-network-link-conditioner-utility-lets-you-simulate-internet-and-bandwidth-conditions/&quot;&gt;Network Link Conditioner preference pane&lt;/a&gt; in Xcode 4 voor Mac OS X Lion helpt je om te simuleren hoe webpagina&#39;s ingeladen worden op apparaten met een trage verbinding:&lt;/p&gt;
  14797. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/nlc.png&quot; alt=&quot;Schermafbeelding van het voorkeurenpaneel &#39;Netwerk Link Conditioner&#39; in Mac OS X&quot; /&gt;&lt;/p&gt;
  14798. &lt;h2&gt;Hoe gebruik je het?&lt;/h2&gt;
  14799. &lt;p&gt;Opgelet: ik raad af om Mingy te gebruiken op een productiesite. Beschouw het in de eerste plaats als een proof of concept. Ik heb het bijvoorbeeld nog niet aangedurfd om Mingy uigebreid te testen in oudere versies van Internet Explorer, hoewel er in principe weinig kan mislopen.&lt;/p&gt;
  14800. &lt;p&gt;Net voor het sluiten van je &lt;code&gt;&amp;lt;/body&amp;gt;&lt;/code&gt;, laad je het plugin-script:&lt;/p&gt;
  14801. &lt;pre&gt;&lt;code&gt;&amp;lt;script src=&amp;quot;mingy/jquery.mingy.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
  14802. &lt;/code&gt;&lt;/pre&gt;
  14803. &lt;p&gt;Vergeet ook niet om ook jQuery zelf in te laden, bijvoorbeeld via de CDN van Google:&lt;/p&gt;
  14804. &lt;pre&gt;&lt;code&gt;&amp;lt;script src=&amp;quot;http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
  14805. &lt;/code&gt;&lt;/pre&gt;
  14806. &lt;p&gt;In zijn meest eenvoudige vorm, gebruk je de plugin zo:&lt;/p&gt;
  14807. &lt;pre&gt;&lt;code&gt;$(function() {
  14808.  $(&#39;img&#39;).mingy();
  14809. });
  14810. &lt;/code&gt;&lt;/pre&gt;
  14811. &lt;p&gt;Maar je kan ook een object met parameters meegeven:&lt;/p&gt;
  14812. &lt;pre&gt;&lt;code&gt;$(function() {
  14813.  $(&#39;img&#39;).mingy({
  14814.    quality: 75,
  14815.    retina: false,
  14816.    noscriptFallback: true,
  14817.    reloadOnResize: true
  14818.  });
  14819. });
  14820. &lt;/code&gt;&lt;/pre&gt;
  14821. &lt;p&gt;Zoals gezegd, hoef je aan je &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; tags helemaal niets te veranderen:&lt;/p&gt;
  14822. &lt;pre&gt;&lt;code&gt;&amp;lt;img src=&amp;quot;foto.jpg&amp;quot; width=&amp;quot;250&amp;quot; height=&amp;quot;250&amp;quot; alt=&amp;quot;…&amp;quot; /&amp;gt;
  14823. &lt;/code&gt;&lt;/pre&gt;
  14824. &lt;p&gt;Voorlopig werkt Mingy enkel met JPG-afbeeldingen. Als je de kwaliteit van een individuele JPG wilt wijzigen, kan je optioneel een &lt;code&gt;data&lt;/code&gt;-attribuut meegeven:&lt;/p&gt;
  14825. &lt;pre&gt;&lt;code&gt;&amp;lt;img src=&amp;quot;foto.jpg&amp;quot; width=&amp;quot;250&amp;quot; height=&amp;quot;250&amp;quot; alt=&amp;quot;…&amp;quot; data-quality=&amp;quot;50&amp;quot; /&amp;gt;
  14826. &lt;/code&gt;&lt;/pre&gt;
  14827. &lt;p&gt;In je stylesheet kan je de breedte en hoogte van je afbeeldingen als volgt bijsturen:&lt;/p&gt;
  14828. &lt;pre&gt;&lt;code&gt;@media only screen and (max-width: 1000px) {
  14829.  img { width: 500px; height: 500px; }
  14830. }
  14831. @media only screen and (max-width: 500px) {
  14832.  img { width: 250px; height: 250px; }
  14833. }
  14834. &lt;/code&gt;&lt;/pre&gt;
  14835. &lt;p&gt;Mingy zal alle afbeeldingen binnen de selector scope (&lt;code&gt;$(&#39;img&#39;)&lt;/code&gt; in dit geval) automagisch fysiek herschalen als de breedte van je browservenster voldoet aan de &lt;code&gt;min-width&lt;/code&gt; en &lt;code&gt;max-width&lt;/code&gt; die je hebt opgegeven.&lt;/p&gt;
  14836. &lt;h2&gt;Achter de schermen&lt;/h2&gt;
  14837. &lt;p&gt;Mingy gebruikt Apache&#39;s &lt;a href=&quot;http://httpd.apache.org/docs/current/mod/mod_rewrite.html&quot;&gt;mod_rewrite module&lt;/a&gt; en een &lt;code&gt;.htaccess&lt;/code&gt; bestand dat je in een map met afbeeldingen plaatst. Ik realiseer me dat dat sommige mensen afschrikt, maar feit is dat het op de meeste webservers gewoon wérkt. Hieronder volgt de inhoud van het &lt;code&gt;.htaccess&lt;/code&gt;-bestand. Wie dat wil, kan het herschrijven van de URL trouwens vast ook op een &#39;anders geaarde&#39; webserver aan de praat krijgen.&lt;/p&gt;
  14838. &lt;pre&gt;&lt;code&gt;&amp;lt;IfModule mod_rewrite.c&amp;gt;
  14839.  RewriteEngine on
  14840.  RewriteRule (.*&#92;.jpg)&#92;((.*)&#92;) mingy/resize.php?file=$1&amp;amp;options=$2 [L,QSA]
  14841.  RewriteRule (.*&#92;.jpg) mingy/resize.php?file=$1&amp;amp;loading=true&amp;amp;noscriptfallback=true [L,QSA]
  14842. &amp;lt;/IfModule&amp;gt;
  14843. &lt;/code&gt;&lt;/pre&gt;
  14844. &lt;p&gt;JavaScript zorgt ervoor dat &lt;code&gt;&amp;lt;img src=&amp;quot;foto.jpg&amp;quot; height=&amp;quot;200&amp;quot; alt=&amp;quot;…&amp;quot; /&amp;gt;&lt;/code&gt; omgevormd wordt naar iets als &lt;code&gt;&amp;lt;img src=&amp;quot;foto.jpg(141,141,false,false,70) width=&amp;quot;300&amp;quot; height=&amp;quot;200&amp;quot; alt=&amp;quot;…&amp;quot; /&amp;gt;&lt;/code&gt;. Deze URI lijkt op een function call en dat is het eigenlijk ook. Ach, het kon vast net zo goed met vraagtekens en ampersands, maar ik vond dit mooier staan. Bovendien zorgt het voor een betere client-side caching en voorkomt het mogelijk zelfs caching issues met sommige proxy-servers. Dat laatste is slechts een aanname.&lt;/p&gt;
  14845. &lt;p&gt;De twee belangrijkste parameters zijn de eerste en de tweede: hiermee geven we de gewenste breedte en hoogte door aan het PHP-script. Over de andere drie parameters heb ik het straks nog even (zie &#39;Handigheidjes&#39;).&lt;/p&gt;
  14846. &lt;p&gt;Het script &lt;a href=&quot;https://github.com/roelvangils/mingy/blob/master/mingy/resize.php&quot;&gt;resize.php&lt;/a&gt; wordt twee keer uitgevoerd als JavaScript aanstaat:&lt;/p&gt;
  14847. &lt;ul&gt;
  14848. &lt;li&gt;De &lt;em&gt;tweede&lt;/em&gt; reguliere expressies matcht de originele URL en zorgt ervoor dat de transparante PNG wordt ingeladen.&lt;/li&gt;
  14849. &lt;li&gt;Onmiddellijk daarna, wanneer het jQuery-script alle &lt;code&gt;src&lt;/code&gt;-attributen heeft gemanipuleerd, wordt de &lt;em&gt;eerste&lt;/em&gt; regex gematcht en stuurt &lt;code&gt;resize.php&lt;/code&gt; een afbeelding met de juiste afmetingen naar de browser. Die wordt op de server gecachet.&lt;/li&gt;
  14850. &lt;/ul&gt;
  14851. &lt;p&gt;Bezoekers zonder JavaScript laten we niet in de kou staan (je weet wat er gebeurd is met dat meisje met de zwavelstokjes dat op kerstavond in de kou bleef staan, toch?). Met JavaScript schrijven we een cookie weg (&lt;code&gt;js=true&lt;/code&gt;) die we vervolgens met het PHP-script dat de afbeelding genereeert, weer inlezen. Als de cookie niet bestaat, sturen we geen transparante PNG naar de browser, maar gewoon de master image. Dat heeft als nadeel dat bezoekers die cookies uitgezet hebben en JavaScript aan hebben staan, extra image-data te verwerken krijgen.&lt;/p&gt;
  14852. &lt;h2&gt;Handigheidjes&lt;/h2&gt;
  14853. &lt;h2&gt;Ook zonder CSS&lt;/h2&gt;
  14854. &lt;p&gt;Situatie: klant uploadt een 5-megapixel-foto via een upload-knop in een WYSIWYG-editor als CKeditor of TinyMCE en maakt ‘m kleiner door zelf de breedte en hoogte in te tikken in een hiervoor bestemd dialoogvenster. De fysieke bestandsgrootte blijft ongewijzigd, maar enkel de waarde van het &lt;code&gt;width&lt;/code&gt;- en &lt;code&gt;height&lt;/code&gt;-attribuut worden gewijzigd. Het gevolg is dat je niet alleen je eigen bandbreedte verspilt, maar ook die van je bezoekers. Da&#39;s duidelijk een &lt;em&gt;#fail&lt;/em&gt;, maar toch zie je het nog vaak gebeuren.&lt;/p&gt;
  14855. &lt;pre&gt;&lt;code&gt;&amp;lt;img src=&amp;quot;bigass_2592x1944.jpg&amp;quot; width=&amp;quot;300&amp;quot; height=&amp;quot;200&amp;quot; alt=&amp;quot;Verspilde bandbreedte /&amp;gt;
  14856. &lt;/code&gt;&lt;/pre&gt;
  14857. &lt;p&gt;Je kan het de klant natuurlijk niet kwalijk nemen en als je een &lt;a href=&quot;http://qontent.nl/&quot;&gt;slim CMS&lt;/a&gt; gebruikt, is het al helemaal geen issue. In andere gevallen kan Mingy hier mogelijk een uitkomst bieden; het script baseert zich immers (ook) op de waarden van het &lt;code&gt;width&lt;/code&gt;- en &lt;code&gt;height&lt;/code&gt;-attribuut voor het herschalen van afbeeldingen.&lt;/p&gt;
  14858. &lt;h2&gt;JPEG-compressie (&#39;quality&#39;)&lt;/h2&gt;
  14859. &lt;p&gt;Omdat de afbeeldingen toch op de server bijgeknipt worden (en gecachet), lag het voor de hand om een optie toe te voegen waarmee je de kwaliteit kan kiezen. Net zoals in het Save for Web-venster van Photoshop, kan je waarden van 1 tot 100 invullen. Als je de tab &#39;Net&#39; in Firebug of &#39;Network&#39; in de Webkit Inspector opent, kan je zo in een oogopslag zien welk effect het kiezen van een sterkere compressie heeft op het totale gewicht en de totale laadtijd van je pagina.&lt;/p&gt;
  14860. &lt;p&gt;Onderstaand screenshot illustreert trouwens ook duidelijk wat ik eerder beschreef: initieel worden de placeholder PNG&#39;s van 68 bytes geladen en hierna pas de werkelijke afbeeldingen.&lt;/p&gt;
  14861. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/firebug.png&quot; alt=&quot;Schermafbeelding van het Tabblad &#39;Net → Images&#39; in Firebug voor Firefox&quot; /&gt;&lt;/p&gt;
  14862. &lt;h2&gt;Retina&lt;/h2&gt;
  14863. &lt;p&gt;Wie een iPhone 4 of iPhone 4S (en arendsogen) heeft, zal de scherpere beeldkwaliteit van foto&#39;s in zogeheten retina-kwaliteit mogelijk waarderen. Persoonlijk vind ik het de extra kilobytes niet waard, maar misschien ligt dat aan mijn slechte ogen. Je zou de retina-versie ook kunnen gebruiken voor foto&#39;s die zo belangrijk zijn dat je verwacht dat bezoekers erop zullen inzoomen; in dat geval is het meegenomen dat het beeld extra scherp is.&lt;/p&gt;
  14864. &lt;p&gt;Met JavaScript detecteren we of het apparaat een dubbele resolutie ondersteunt. &#39;Feature detection&#39; heet dat, met een mooi woord. Probeer het zelf met:&lt;/p&gt;
  14865. &lt;pre&gt;&lt;code&gt;console.log(window.devicePixelRatio &amp;gt; 1); // `true` of `false`
  14866. &lt;/code&gt;&lt;/pre&gt;
  14867. &lt;ul&gt;
  14868. &lt;li&gt;&lt;code&gt;retina: true&lt;/code&gt; zorgt ervoor dat de resolutie van &lt;em&gt;alle&lt;/em&gt; afbeeldingen verdubbeld wordt. Dat is niet zinvol, maar je kan het gebruiken om te debuggen (of om te checken hoe zwaar je pagina wordt voor iPhone 4(s)-gebruikers).&lt;/li&gt;
  14869. &lt;li&gt;&lt;code&gt;retina: auto&lt;/code&gt; zorgt ervoor dat de resolutie enkel verdubbeld wordt als het apparaat het beeld ook echt met een dubbele resolutie kan weergeven (hier gebruiken we feature detection).&lt;/li&gt;
  14870. &lt;li&gt;Met &lt;code&gt;retina: false&lt;/code&gt; zet je het helemaal uit. Dit is de standaardwaarde.&lt;/li&gt;
  14871. &lt;/ul&gt;
  14872. &lt;p&gt;De retina-parameter geef je mee in de vorm van een &lt;code&gt;data&lt;/code&gt;-attribuut (voor een individuele afbeelding) of als onderdeel van het object met opties bij het aanroepen van de plugin (zie eerder).&lt;/p&gt;
  14873. &lt;h2&gt;reloadOnResize&lt;/h2&gt;
  14874. &lt;p&gt;Bezoekers waarderen het dat websites netjes de breedte van hun appaaraat of de viewport van hun browser vullen en ze niet horizontaal hoeven te scrollen. Maar ze lopen heus niet als een gek hun browser te resizen of hun tablet in alle mogelijke richtingen te draaien om te kijken wat er dan gebeurt. Nee, dat is beroepsmisvorming; enkel &lt;em&gt;wij&lt;/em&gt; kicken erop om te kijken hoe leuk alles meeschaalt en wanneer de media queries hun uitwerking hebben.&lt;/p&gt;
  14875. &lt;p&gt;Maar omdat het helemaal niet zo ingewikkeld bleek om de afbeeldingen ook bij het resizen van het venster opnieuw in te laden, heb ik er toch maar een optie in gestopt die dat toelaat. En stiekem vind ik het zelf ook wel cool.&lt;/p&gt;
  14876. &lt;h2&gt;Ten slotte&lt;/h2&gt;
  14877. &lt;p&gt;Ik heb dit artikel (en het script) in de eerste plaats geschreven om m&#39;n eigen gedachten op een rijtje te zetten. Ik pretendeer niet dat deze aanpak beter is dan eender welke andere aanpak, maar ik vond het vooral leuk om te doen. Als ik de tijd vind, lijkt het me leuk om Mingy te finetunen. En als jij het een leuk idee vindt, nodig ik je uit om het script te forken op &lt;a href=&quot;https://github.com/roelvangils/mingy&quot;&gt;Github&lt;/a&gt;.&lt;/p&gt;
  14878. &lt;p&gt;Ten slotte wil ik graag JavaScript-whizzkid &lt;a href=&quot;https://mathiasbynens.be/&quot;&gt;Mathias Bynens&lt;/a&gt; bedanken omdat hij zo vriendelijk was om het JavaScript-gedeelte van Mingy met een kritisch oog te bekijken en te optimaliseren. Want eigenlijk ben ik maar een wannabe-developer.&lt;/p&gt;
  14879. &lt;h2&gt;Over Roel Van Gils&lt;/h2&gt;
  14880. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/roel-van-gils.jpg&quot; alt=&quot;Foto van roel van gils&quot; class=&quot;floating-portrait&quot; /&gt;
  14881. Roel Van Gils noemt zichzelf webarchitect. Als zelfstandig consultant geeft hij advies en helpt bedrijven en overheden met het bouwen van efficiënte, toegankelijke en gebruiksvriendelijke websites en applicaties. Hij werkt voor het web sinds 2000 en is mede-initiatiefnemer van [AnySurfer](http://www.anysurfer.be/), een Belgische organisatie die ijvert voor een toegankelijker internet voor mensen met een handicap. Roel steekt ook graag een handje toe bij het organiseren van [Fronteers-bijeenkomsten](/bijeenkomsten) in Vlaanderen. Hij twittert als [@roelvangils](https://twitter.com/roelvangils).
  14882. &lt;p&gt;Donatie: Belgisch Centrum voor Geleidehonden
  14883. In mijn omgeving heb ik zelf gezien hoe een geleidehond het leven van iemand die slechtziend of blind is helemaal kan veranderen. Ik ken jammer genoeg ook mensen die al jaren uitkijken naar een eigen geleidehond–of een opvolger voor een hond die te oud was geworden. Het opleiden van een hond is enorm tijdsintensief en daardoor is de wachtlijst lang. Ik steun het &lt;a href=&quot;http://www.geleidehond.be/&quot;&gt;Belgisch Centrum voor Geleidehonden&lt;/a&gt;, een vzw die sinds 1990 alles in het werkt stelt om honden op te leiden en ze daarna kosteloos ter beschikking stelt aan wie ze echt nodig heeft.&lt;/p&gt;
  14884. </content>
  14885.  </entry>
  14886.  <entry>
  14887.    <title>3D-graphics</title>
  14888.    <link href="https://www.fronteers.nl/nl/blog/2011/12/3d-graphics"/>
  14889.    <updated>2011-12-06T00:00:00Z</updated>
  14890.    <id>https://www.fronteers.nl/nl/blog/2011/12/3d-graphics</id>
  14891.    <content xml:lang="nl" type="html">&lt;p&gt;De volgende theorie heeft betrekking op de wijze waarop 3D-graphics berekend worden. Welke processen spelen zich buiten het zicht van de gebruiker af in de computer?&lt;/p&gt;
  14892. &lt;p&gt;Voor het genereren van computer graphics zijn veel en vaak complexe berekeningen nodig. Een gemiddeld boek over computer graphics staat stijf van de moeilijke formules, die voor de gemiddelde mens niet of nauwelijks te lezen zijn en niet echt uitnodigen om er mee aan de slag te gaan. In deze beknopte handleiding wordt de basis uitgelegd; hoe weet je computer welke kleur een bepaalde pixel heeft, welke delen van een voorwerp zichtbaar zijn, welke niet, et cetera. Met een minimum aan wiskunde.&lt;/p&gt;
  14893. &lt;p&gt;Houd er rekening mee dat alle complexe theorieën en berekeningen niet voor niets bestaan. Als algemene regel geldt dat hoe hoger de kwaliteit van je 3D-graphics is, hoe complexer de berekeningen worden. Rendertijd kan dramatisch gereduceerd worden met complexe berekeningen. De basis is echter vrij eenvoudig en zijn tientallen jaren geleden al bedacht.&lt;/p&gt;
  14894. &lt;p&gt;De besproken theorie is een zeer beperkte keuze uit het brede aanbod aan mogelijkheden en geeft een inzicht in hoe je zelf 3D-graphics kunt berekenen of hoe ze berekend worden door je 3D-programma.&lt;/p&gt;
  14895. &lt;h2&gt;Basis&lt;/h2&gt;
  14896. &lt;p&gt;Om een 3D-graphic te genereren heb je twee zaken nodig: één of meer virtuele voorwerpen, en een zogenaamd belichtingsmodel. Virtuele voorwerpen bestaan in het algemeen uit polygonen, of vlakken. Het belichtingsmodel beschrijft de manier waarop de virtuele voorwerpen reageren op virtueel licht. Wanneer het eindresultaat fotorealistisch moet zijn, wordt een belichtingsmodel gebruikt dat de fysieke wereld om ons heen zo dicht mogelijk benadert.&lt;/p&gt;
  14897. &lt;h2&gt;Polygonen&lt;/h2&gt;
  14898. &lt;p&gt;Virtuele voorwerpen worden in veel gevallen beschreven met behulp van polygonen. Eén enkele polygoon is op zich niet zo interessant. Meerdere polygonen kunnen een virtueel voorwerp representeren, bijvoorbeeld het logo van Fronteers.&lt;/p&gt;
  14899. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/polygoon-object.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  14900. &lt;p&gt;Polygonen zijn oppervlakken die begrensd worden door drie posities of hoekpunten in de ruimte met een x-, y- en z-positie. Polygonen die begrensd worden door drie hoekpunten hebben als voordeel dat ze altijd vlak zijn; je kunt de hoekpunten nooit zo in de virtuele ruimte plaatsen dat de polygoon niet vlak is. Naast polygonen met drie hoekpunten kun je ook polygonen met meer hoekpunten gebruiken, zolang het oppervlak vlak is.&lt;/p&gt;
  14901. &lt;p&gt;Het is belangrijk dat een polygoon vlak is, omdat de geometrie van de polygoon gebruikt wordt in een aantal processen die gebaseerd zijn op vlakke polygonen. Veel software en hardware is geoptimaliseerd voor het verwerken van polygonen met drie hoekpunten.&lt;/p&gt;
  14902. &lt;p&gt;De drie hoekpunten van een polygoon worden gebruikt om de ruimte die deze drie posities omsluiten als oppervlak te tonen. Elke positie binnen het oppervlak bestaat uit een x-, y- en z-positie die afgeleid kunnen worden van de drie hoekpunten. De posities zijn belangrijk, omdat deze gebruikt worden om te kijken of het wel of niet zichtbaar is. Wanneer er meerdere polygonen gebruikt worden kan een polygoon de andere overlappen. De positie wordt ook gebruikt om te berekenen welke kleur gebruikt moet worden en of de positie eventueel schaduw heeft.&lt;/p&gt;
  14903. &lt;p&gt;In veel gevallen wordt een afbeelding gegenereerd. De afbeelding kan een enkele afbeelding zijn of een afbeelding uit een reeks die samen een animatie vormt. In het geval van een spelletje worden de afbeeldingen realtime op je scherm getoond, die net als een afbeelding ook uit pixels bestaat.&lt;/p&gt;
  14904. &lt;p&gt;Er zijn twee typen afbeeldingen: raster graphics en vector graphics. Vector graphics beschrijven het beeld met behulp van wiskundige curves. Raster graphics of bitmap afbeeldingen bestaan uit puntjes of pixels. Elke pixel heeft een bepaalde kleur, die tezamen het beeld vormen.&lt;/p&gt;
  14905. &lt;p&gt;Een bitmap afbeelding heeft een bepaald formaat in pixels, bijvoorbeeld 300 pixels horizontaal en 200 pixels verticaal; de afbeelding bestaat uit 60.000 pixels.&lt;/p&gt;
  14906. &lt;h2&gt;Hoe vertaal je een polygoon naar een afbeelding?&lt;/h2&gt;
  14907. &lt;p&gt;De posities van de hoekpunten van de polygoon zijn bekend, waardoor de minimum y-positie en maximale y-positie berekend kunnen worden. Eén van de hoekpunten van de polygoon is de minimum y-positie, een andere hoekpunt is de maximum y-positie van de polygoon. Het hoekpunt dat niet het verticale maximum of minimum is, bevindt zich tussen de minimum- en maximum y-positie.&lt;/p&gt;
  14908. &lt;p&gt;Door de polygoon verticaal van boven naar beneden in horizontale lijnen te scannen kan de polygoon vertaald worden naar een afbeelding.&lt;/p&gt;
  14909. &lt;p&gt;Het vertalen van een polygoon naar pixels wordt scanconversie of rasterization genoemd.&lt;/p&gt;
  14910. &lt;p&gt;De horizontale start- en eindposities worden naar een pixelpositie vertaald. Deze horizontale startpositie heeft een x-, y- en z-positie, net als de eindpositie. Deze waarden zijn afgeleid van de drie hoekpuntposities van de polygoon.&lt;/p&gt;
  14911. &lt;p&gt;Vervolgens worden alle posities die zich tussen de horizontale start- en eindpositie bevinden berekend.&lt;/p&gt;
  14912. &lt;p&gt;Hoe meer polygonen gebruikt worden, hoe preciezer een virtueel voorwerp beschreven kan worden. Meer polygonen betekent ook dat er meer berekeningen nodig zijn.&lt;/p&gt;
  14913. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/polygoon-scanconversion.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  14914. &lt;p&gt;Net als bij het gebruik van afbeeldingen op een website geldt; hoe hoger de kwaliteit, in veel gevallen hoe realistischer het eindresultaat moet worden, hoe langer het duurt voor de afbeelding geladen is, en in het geval van 3D-graphics hoe langer de rendertijd is.&lt;/p&gt;
  14915. &lt;p&gt;Wanneer er meerdere polygonen gebruikt worden, is het van belang te weten welke (delen van) polygonen zichtbaar zijn voor de virtuele camera. Het volstaat niet om de polygonen een voor een te renderen.&lt;/p&gt;
  14916. &lt;p&gt;Wanneer de virtuele camera om een virtueel voorwerp gedraaid wordt, is de ene keer de voorkant zichtbaar en de achterkant niet, deze bevindt zich achter de zichtbare voorkant. Wordt de camera verplaatst dan kan de achterzijde zichtbaar zijn en bevindt de voorkant zich achter de zichtbare achterzijde. Individuele polygonen zijn wel of niet of gedeeltelijk zichtbaar afhankelijk van de positie van de virtuele camera.&lt;/p&gt;
  14917. &lt;p&gt;Voor het renderen van een virtuele omgeving is het dus noodzakelijk te kijken welke polygonen zichtbaar zijn en welke niet. De polygonen die zich het dichtst bij de camera bevinden zijn zichtbaar en overlappen mogelijk polygonen die verder van de camera verwijderd zijn. De afstand tot de camera wordt gebruikt om te bepalen welke (delen van de) polygonen wel of niet zichtbaar zijn. De afstand tot de camera wordt uitgedrukt als een z-waarde.&lt;/p&gt;
  14918. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/scanconversion.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  14919. &lt;p&gt;Per pixel moet uitgerekend worden welke positie van een polygoon zichtbaar is. Voor elke pixel wordt een stuk geheugen gereserveerd die de z-positie per pixel bijhoudt. Wanneer de z-positie van een polygon lager is dan de waarde in het geheugen (de z-buffer genoemd) wordt deze nieuwe waarde als minimum opgeslagen, met een verwijzing naar de polygoon waar de z-positie aan gerelateerd is.&lt;/p&gt;
  14920. &lt;p&gt;Je kunt de z-buffer als afbeelding wegschrijven; dit levert een zogenaamde depth image op. Pixels met een hoge intensiteit hebben een lage z-waarde, pixels met een lage intensiteit hebben een hoge z-waarde.&lt;/p&gt;
  14921. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/depth-image.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  14922. &lt;p&gt;Polygonen die zich achter de camera bevinden, hebben een negatieve waarde en worden niet gebruikt, omdat je geen beeld kan zien dat zich achter de camera bevindt.&lt;/p&gt;
  14923. &lt;h2&gt;Belichtingsmodel&lt;/h2&gt;
  14924. &lt;p&gt;Om een voorwerp te kunnen zien is het noodzakelijk dat er een vorm van licht is. Licht wordt gereflecteerd door een voorwerp en de weerkaatsing van het licht valt op je netvlies waardoor je het voorwerp ziet.&lt;/p&gt;
  14925. &lt;p&gt;Per pixel is na scanconversie duidelijk welke x-, y- en z-positie deze heeft. Naast de z-positie wordt bijgehouden bij welke polygoon de z-positie hoort. Met behulp van deze gegevens kan de kleur bepaald worden.&lt;/p&gt;
  14926. &lt;p&gt;Voor het zichbaar maken van virtuele voorwerpen zijn een of meer virtuele lichten nodig.&lt;/p&gt;
  14927. &lt;p&gt;Om de kleur van een pixel te bepalen kan virtueel licht opgedeeld worden in een aantal componenten: ambient, diffuus licht en specular, ook wel hooglicht genoemd. Door de intensiteit van deze drie componenten te combineren kan plastic, staal, et cetera nagebootst worden.&lt;/p&gt;
  14928. &lt;p&gt;Ambient is licht gereflecteerd door alle voorwerpen in een omgeving. Diffuus licht wordt gereflecteerd door het oppervlak van een voorwerp. Afhankelijk van het materiaal waaruit het voorwerp bestaat, wordt licht in meer of mindere mate verstrooid gereflecteerd. Specular of hooglicht ontstaat wanneer een gereflecteerde lichtstraal het oog van de toeschouwer treft. Afhankelijk van de eigenschappen van een voorwerp zal hooglicht wel of niet zichtbaar zijn. Vilt reflecteert licht in vele richtingen, waardoor het licht verstrooid wordt en er niet of nauwelijks hooglicht zichtbaar is. Metaal heeft een vrij dicht en egaal oppervlak, waardoor licht minder verstrooid wordt en hooglicht zichbaar is als de gereflecteerde lichtstralen het oog treffen.&lt;/p&gt;
  14929. &lt;p&gt;De intensiteit van diffuus licht wordt bepaald door de hoek tussen de lichtbron en de normaal van een polygoon te berekenen. De normaal van een polygoon staat loodrecht op het oppervlak van de polygoon en kan eenvoudig berekend worden met behulp van de drie hoekpunten van de polygoon.&lt;/p&gt;
  14930. &lt;p&gt;De intensiteit van specular wordt bepaald door de hoek tussen de op het oppervlak gereflecteerde lichtstraal en het oog van de toeschouwer te berekenen. De gereflecteerde lichtstraal wordt berekend met behulp van de positie van de lichtbron en de normaal op het oppervlak van de polygoon. De hoek van inval is gelijk aan die van uitval.&lt;/p&gt;
  14931. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/belichtingsmodel.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  14932. &lt;p&gt;Het belichtingsmodel beschrijft de manier waarop de virtuele voorwerpen reageren op virtueel licht en bepaalt hoe de virtuele voorwerpen eruit komen te zien. Er bestaan vele belichtingsmodellen. De meest basale belichtingsmodellen zijn flat shading, Gouraud shading en Phong shading.&lt;/p&gt;
  14933. &lt;p&gt;Flat shading is het meest eenvoudige belichtingsmodel. Voor elke polygoon wordt één enkele intensiteit berekend. Alleen de intensiteit van ambient en diffuus licht wordt gebruikt.&lt;/p&gt;
  14934. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/shading-types.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  14935. &lt;p&gt;Gouraud shading is iets complexer. Voor elk hoekpunt van de polygoon wordt de intensiteit van ambient en diffuus licht gebruikt. De polygoon wordt vervolgens ingevuld met deze intensiteit. De drie berekende intensiteiten van de hoekpunten vloeien binnen het oppervlak van de polygoon in elkaar over.&lt;/p&gt;
  14936. &lt;p&gt;Phong shading is complexer en rekenintensiever dan de voorgangers. Per positie wordt een intensiteit berekend. De intensiteiten van ambient, diffuus en specular worden gecombineerd. De normalen van de hoekpunten van de polygoon worden bij Phong shading gemiddeld met de normalen van aangrenzende polygonen die hetzelfde hoekpunt delen.&lt;/p&gt;
  14937. &lt;p&gt;De berekende intensiteit wordt gecombineerd met de kleur-waarde van een polygoon en resulteert in de kleur van een pixel.&lt;/p&gt;
  14938. &lt;h2&gt;Kwaliteit&lt;/h2&gt;
  14939. &lt;p&gt;Nu bekend is hoe je een virtueel voorwerp zichtbaar kunt maken in de vorm van een afbeelding is de kwaliteit een aandachtspunt. Afhankelijk van de kwaliteit van de gebruikte virtuele voorwerpen kunnen lelijke trapjes, die ook wel jagged edges genoemd worden, ontstaan.&lt;/p&gt;
  14940. &lt;p&gt;Je kunt dit probleem oplossen door de afbeelding op het dubbele formaat van het gewenste formaat te renderen en vervolgens de afbeelding in Photoshop, of een ander beeldverwerkingsprogramma, te schalen naar het gewenste formaat.&lt;/p&gt;
  14941. &lt;p&gt;Het menselijke oog is gevoelig voor contrast. Wanneer het contrast vrij laag is, vloeien de kleuren van de pixels probleemloos in elkaar over. Daar waar veel contrast is, zullen de jagged edges storend zichtbaar zijn.&lt;/p&gt;
  14942. &lt;p&gt;Door een filter—edge detection—op de afbeelding los te laten, kan de afbeelding omgezet worden naar een afbeelding waarbij de pixels met hoog contrast zichtbaar worden.&lt;/p&gt;
  14943. &lt;p&gt;De intensiteit van pixels met een hoog contrast wordt herberekend. Door niet één positie per pixel te berekenen, maar vier of meer en vervolgens de kleurwaarden te middelen, kunnen de trapjes vermeden worden.&lt;/p&gt;
  14944. &lt;p&gt;De techniek om jagged edges te vermijden wordt anti-aliasing genoemd.&lt;/p&gt;
  14945. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/anti-aliasing.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  14946. &lt;h2&gt;Conclusie&lt;/h2&gt;
  14947. &lt;p&gt;3D-graphics zijn overal aanwezig: in films, in spelletjes, in reclame, enz. De basale kennis die je zojuist hebt opgedaan, geeft je een beter inzicht in de manier waarop de beelden tot stand komen. Het zelf maken van 3D-graphics is minder ingewikkeld dan je in eerste instantie misschien zou verwachten. Naarmate kwaliteit, realisme en snelheid belangrijker worden, neemt de complexiteit snel toe.&lt;/p&gt;
  14948. &lt;p&gt;Zelfs als websitebouwer kun je wat aan 3D-graphicskennis hebben. Probeer je website na te bouwen in een 3D-programma. Als blijkt dat je website niet reproduceerbaar is—je kunt de schaduwen bijvoorbeeld niet namaken—dan is er iets mis met je ontwerp.&lt;/p&gt;
  14949. &lt;h2&gt;Links&lt;/h2&gt;
  14950. &lt;ul&gt;
  14951. &lt;li&gt;&lt;a href=&quot;http://ict.debevec.org/~debevec/&quot;&gt;Paul Debevec&lt;/a&gt;&lt;/li&gt;
  14952. &lt;li&gt;&lt;a href=&quot;http://paulbourke.net/&quot;&gt;Paul Bourke&lt;/a&gt;&lt;/li&gt;
  14953. &lt;/ul&gt;
  14954. &lt;h2&gt;Boeken&lt;/h2&gt;
  14955. &lt;p&gt;Advanced Animation and Rendering Techniques
  14956. Alan Watt, M. Watt, ADDISON-WESLEY, ISBN 0-201-54412-1&lt;/p&gt;
  14957. &lt;p&gt;Computer Graphics: Principles and Practice in C
  14958. James D. Foley, Andries van Dam, Steven K. Feiner, John F. Hughes, ADDISON-WESLEY, ISBN 0-201-84840-6&lt;/p&gt;
  14959. &lt;p&gt;Fundamentals of three-dimensional computer graphics
  14960. Alan Watt, ADDISON-WESLEY, ISBN 0-201-15442-0&lt;/p&gt;
  14961. &lt;h2&gt;Over Arjan Westerdiep&lt;/h2&gt;
  14962. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/arjan-westerdiep.jpg&quot; alt=&quot;Foto van arjan westerdiep uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  14963. Arjan Westerdiep is gediplomeerd kunstenaar, woordblind en probeert met wisselend succes zowel zijn linker als rechter hersenhelft te gebruiken en te combineren, was weer welkom op de lagere school zodra hij het telefoonnummer van zijn ouderlijk huis wist te onthouden, vindt iets mooi of lelijk en is de maker van [drububu.com](http://www.drububu.com).
  14964. &lt;p&gt;Donatie: Leger des Heils
  14965. Het Leger des Heils bekommert zich om degenen die niet de middelen, mogelijkheden en luxe hebben zich met zaken als anti-aliasing en z-buffers bezig te houden, omdat het ze ontbeert aan de meest basale middelen om een menswaardig leven te leiden en doen dat zonder enige vorm van discriminatie.&lt;/p&gt;
  14966. </content>
  14967.  </entry>
  14968.  <entry>
  14969.    <title>Acteurs, schilders en technici</title>
  14970.    <link href="https://www.fronteers.nl/nl/blog/2011/12/acteurs-schilders-en-technici"/>
  14971.    <updated>2011-12-05T00:00:00Z</updated>
  14972.    <id>https://www.fronteers.nl/nl/blog/2011/12/acteurs-schilders-en-technici</id>
  14973.    <content xml:lang="nl" type="html">&lt;p&gt;Wat doet de moderne front-ender van nu tegenwoordig anno 2011? &lt;a href=&quot;http://aneventapart.com/alasurvey2010/#gen&quot; title=&quot;Een man ja. In 80% van de gevallen. Sorry.&quot;&gt;Hij&lt;/a&gt; is een acteur-schilder-technicus.&lt;/p&gt;
  14974. &lt;p&gt;Als ze me vragen wat ik doe, zeg ik: “Ik maak websites.” Dat snapt m’n oma van 90 en dat snapt m’n dochter van 9. Want iedereen weet tegenwoordig wat een website is en wat je er ongeveer van kunt verwachten. De magie van een eigen website hebben is helemaal voorbij.&lt;/p&gt;
  14975. &lt;p&gt;Je hebt drie rollen als front-ender: acteur, schilder en technicus.&lt;/p&gt;
  14976. &lt;h2&gt;De acteur&lt;/h2&gt;
  14977. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/minifig-acteur.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  14978. &lt;p&gt;Je hebt het inlevingsvermogen nodig van een acteur. Wie zich niet in kan leven in zijn klant en zijn doelgroep is geen goede front-ender. Dit inleven vereist begrijpen wat je klant verwacht, meedenken met je klant &lt;em&gt;en&lt;/em&gt; het vereist inleven in de uiteindelijke gebruikers van je website. Voor wie dacht dat het niet de moeite waard is om over toegankelijke websites na te denken:&lt;/p&gt;
  14979. &lt;p&gt;Nederland heeft zo&#39;n 16.7 miljoen inwoners. In deze samenleving leven 238.000 slechtzienden. 78.000 blinden, 700.000 kleurenblinden, 1.300.000 slechthorenden en doven en 1.500.000 lichamelijk gehandicapten. En ten slotte zijn er 825.000 dyslectici en 1.500.000 laaggeletterenden. Dat zijn bij elkaar ruim 4.000.000 Nederlanders met &#39;een&#39; beperking! (&lt;a href=&quot;http://www.frankwatching.com/archive/2011/11/10/toegankelijkheid-van-websites-mythe-of-noodzaak/&quot; title=&quot;Lees dat artikel en laat het iedereen op je werk lezen. Toegankelijke websites maak je niet alleen voor blinden en slechtzienden.&quot;&gt;bron: toegankelijkheid van websites: mythe of noodzaak&lt;/a&gt;)&lt;/p&gt;
  14980. &lt;p&gt;Veel mensen denken bij accessibility aan blinden en slechtzienden of &lt;a href=&quot;http://en.wikipedia.org/wiki/File:Handicapped_Accessible_sign.svg&quot; title=&quot;Het -jawel- logo voor toegankelijkheid. #zucht&quot;&gt;aan gehandicapten&lt;/a&gt;. Onzin dus. Accessibility gaat bijvoorbeeld ook om begrijpelijke teksten op je website. Vermijd jargon; gebruik bijvoorbeeld niet &#39;authenticatiecode&#39;, maar &#39;inlogcode&#39;. Dat is veel begrijpelijker. Realiseer je dat je je niet kunt inleven in &lt;em&gt;elke&lt;/em&gt; mogelijke gebruiker van je website, maar probeer wel telkens te blijven kijken naar je werk met de ogen van &lt;a href=&quot;http://www.google.nl/search?q=mien&amp;amp;um=1&amp;amp;ie=UTF-8&amp;amp;hl=nl&amp;amp;tbm=isch&amp;amp;source=og&amp;amp;sa=N&amp;amp;tab=wi&quot;&gt;Mien&lt;/a&gt;, &lt;a href=&quot;http://www.google.nl/search?q=frederik&amp;amp;um=1&amp;amp;ie=UTF-8&amp;amp;hl=nl&amp;amp;tbm=isch&amp;amp;source=og&amp;amp;sa=N&amp;amp;tab=wi&quot;&gt;Frederik&lt;/a&gt; of &lt;a href=&quot;http://www.google.nl/search?q=latif&amp;amp;um=1&amp;amp;ie=UTF-8&amp;amp;hl=nl&amp;amp;tbm=isch&amp;amp;source=og&amp;amp;sa=N&amp;amp;tab=wi&quot;&gt;Latif&lt;/a&gt;. Want waarschijnlijk komen zij ook op je site. Je maakt het voor de bühne, voor het applaus.&lt;/p&gt;
  14981. &lt;h2&gt;De schilder&lt;/h2&gt;
  14982. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/minifig-schilder.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  14983. &lt;p&gt;Ik wil graag mooie dingen maken. Webdesign was vroeger het favoriete tijdverdrijf van designers. Dat pikken we nu langzaam maar zeker van ze &lt;a href=&quot;http://ghehehe.nl/&quot; title=&quot;Ghehehehe. Lache.&quot;&gt;af&lt;/a&gt;. Wie de komende jaren nog ambities heeft om mooie websites te maken heeft niet meer voldoende aan kennis van Photoshop; het liefst moet hij &lt;a href=&quot;http://24ways.org/2009/make-your-mockup-in-markup&quot;&gt;ontwerpen in de browser&lt;/a&gt;. Ik merk dat ik ontwerpers steeds meer moet laten nadenken over de eindeloze mogelijkheden van het web. Je ontwerper komt niet meer weg met alleen een ontwerp voor een pagina van 960px breed. Of met platte plaatjes zonder dat hij nagedacht heeft over interactie. Je moet de taal en de verschillende verschijningsvormen van het web begrijpen. Je hebt te maken met schermgroottes, verschillende &lt;em&gt;devices&lt;/em&gt;, verschillende browsers. De front-ender van nu moet meedenken over de mogelijkheden die CSS, responsive webdesign en complexe interacties bieden.&lt;/p&gt;
  14984. &lt;p&gt;Eerder heb ik al eens geschreven over hoe ik het &lt;a href=&quot;http://www.paulvanbuuren.nl/content/2011/10/31/van-wireframe-naar-realisatie/&quot; title=&quot;Achtung: zelfspam.&quot;&gt;ideale ontwerpproces&lt;/a&gt; zie. Stap voor stap: via schetsen naar mockups en verder naar al dan niet klikbare prototypes. Je rol daarin is niet die van stille uitvoerder.&lt;/p&gt;
  14985. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/waarom-een-slicer-een-front-end-developer-is-geworden&quot; title=&quot;Het artikel van Stijn Janssen op 1 december in deze serie.&quot;&gt;Stijn Janssen&lt;/a&gt; had het al over ‘slicers’. Dat zijn we niet meer. We plamuren geen websites meer dicht met plaatjes en &#39;spacer.gif&#39;. We kunnen en moeten meedenken over design. We hebben een mening over de leesbaarheid van websites (zei je &#39;&lt;a href=&quot;https://www.youtube.com/watch?v=5AxwaszFbDw&quot; title=&quot;Youtube filmpje&quot;&gt;make the logo bigger?&lt;/a&gt;&#39; Ik zeg: &#39;&lt;a href=&quot;http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/&quot; title=&quot;16px is best wel lekker leesbaar.&quot;&gt;groot is leesbaar&lt;/a&gt;&#39;). Je photoshopper heeft een mooie foto uitgekozen als background-image. Leuk, maar wat zijn daarvan de consequenties op bepaalde schermen? Wat zijn de mogelijkheden voor afwijkende lettertypen?&lt;/p&gt;
  14986. &lt;p&gt;Je bent creatief en je kent het medium. Denk mee, schets mee, schrijf mee.&lt;/p&gt;
  14987. &lt;h2&gt;De technicus&lt;/h2&gt;
  14988. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/minifig-techneut.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  14989. &lt;p&gt;Tegelijkertijd blijven we codekloppers die kunnen &lt;a href=&quot;https://www.fronteers.nl/congres/2011/sessions/html5-semantics-bruce-lawson&quot; title=&quot;Bruce Lawson op het Fronteers congres in oktober 2011&quot;&gt;mierenneuken&lt;/a&gt; &lt;a href=&quot;http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/&quot; title=&quot;SASS versus Less.&quot;&gt;over de ideale editor&lt;/a&gt;. Je moet de techniek van CSS, HTML en sommige scripttalen snappen. Je moet uit kunnen leggen wat het verschil is tussen &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;span&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;section&amp;gt;&lt;/code&gt; is. Dat is techniek, je gereedschap. Dat zijn de &lt;a href=&quot;http://www.miniland.nl/lego%20lied/liedje_1.htm&quot; title=&quot;Van **** kun je alles maken...&quot;&gt;blokken&lt;/a&gt; waarmee je bouwt. Je moet een betweter zijn, een priechelaar, een speurneus. Je weet wanneer je welke technieken &lt;a href=&quot;http://caniuse.com/&quot; title=&quot;Can I use?&quot;&gt;wel of niet&lt;/a&gt; kunt gebruiken.&lt;/p&gt;
  14990. &lt;p&gt;Dus.&lt;/p&gt;
  14991. &lt;p&gt;Nog even en ik kan zeggen dat ik een acteur-schilder-technicus ben. En dat iemand dan zegt: &amp;quot;Ah, dus je maakt dus websites?&amp;quot;&lt;/p&gt;
  14992. &lt;p class=&quot;note&quot;&gt;
  14993. Overigens ben ik van mening dat er meer vrouwen aan de front-end moeten komen! En dat InDesign alleen gebruikt mag worden voor het layouten van foldertjes.
  14994. &lt;/p&gt;
  14995. &lt;h2&gt;Over Paul van Buuren&lt;/h2&gt;
  14996. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/paul-van-buuren.jpg&quot; alt=&quot;Foto van paul van buuren&quot; /&gt;
  14997. Houdt van mooie dingen maken. Werkt bij [Matchminds](http://www.matchminds.nl/).  Verzamelt [rare woorden](http://www.paulvanbuuren.nl/content/category/bon-mot-du-jour/). En mag sinds de geboorte van z&#39;n kinderen weer met Lego spelen.
  14998. [Twitter](https://twitter.com/paulvanbuuren), [Website](http://paulvanbuuren.nl/about/), [LinkedIn](http://nl.linkedin.com/in/paulvanbuuren)
  14999. &lt;p&gt;Donatie: &lt;a href=&quot;http://www.zwerfjongeren.nl/&quot;&gt;Stichting Zwerfjongeren&lt;/a&gt;
  15000. Het is raar en onbegrijpelijk dat we hier in Nederland zwerfjongeren hebben. Toch zijn ze er, bijna 10.000 en vooral in de grote steden. Geef ze weer toekomstperspectief. Vind ik.&lt;/p&gt;
  15001. </content>
  15002.  </entry>
  15003.  <entry>
  15004.    <title>Webrichtlijnen 2: de nieuwe standaard</title>
  15005.    <link href="https://www.fronteers.nl/nl/blog/2011/12/webrichtlijnen-2-de-nieuwe-standaard"/>
  15006.    <updated>2011-12-04T00:00:00Z</updated>
  15007.    <id>https://www.fronteers.nl/nl/blog/2011/12/webrichtlijnen-2-de-nieuwe-standaard</id>
  15008.    <content xml:lang="nl" type="html">&lt;p&gt;Sinds juni van dit jaar is de nieuwe versie van de Webrichtlijnen, versie 2, de officiële overheidsstandaard. Dit betekent dat overheden bij het bouwen van nieuwe websites moeten kiezen voor deze versie, via het &#39;pas toe of leg uit&#39;-principe.&lt;/p&gt;
  15009. &lt;p&gt;Wat houdt die verplichting precies in? Momenteel moeten websites van de rijksoverheid voldoen aan het hoogste niveau, dus alle richtlijnen onder versie 1. Mede-overheden zoals gemeenten en waterschappen moeten eind 2012 voldoen aan prioriteit 1, en per 1 januari 2015 aan de maximale vereisten.&lt;/p&gt;
  15010. &lt;p&gt;Onder Webrichtlijnen 2 moeten websites voldoen aan het tweede niveau, AA. Dit is dus een verlichting ten opzichte van versie 1.&lt;/p&gt;
  15011. &lt;p&gt;Minister Donner heeft toegezegd dat er een &lt;em&gt;algemene maatregel van bestuur&lt;/em&gt; (AMvB) komt als de resultaten achterblijven.&lt;/p&gt;
  15012. &lt;p&gt;Bestaande websites die voldoen aan versie 1 van de Webrichtlijnen hoeven niet direct aangepast te worden. Er is een &lt;em&gt;overgangsregeling&lt;/em&gt; tot 1 januari 2015, dan vervalt de standaard voor Webrichtlijnen 1. De inspectie conform Webrichtlijnen 2 is nog niet van start gegaan, omdat er nog gewerkt wordt aan de toetsingsdocumentatie. De formele datum van de start van deze inspecties zal worden aangekondigd op &lt;a href=&quot;http://www.drempelvrij.nl/&quot;&gt;www.drempelvrij.nl&lt;/a&gt;.&lt;/p&gt;
  15013. &lt;p&gt;Overigens zijn het niet alleen overheden die bouwen volgens richtlijnen: er zijn (gelukkig) ook bedrijven die er de voordelen van inzien voor hun bezoekers en voor henzelf en die een waarmerk hebben gekregen. Voorbeelden zijn de SNS-bank (prioriteit 1 voor toegankelijkheid) en Microsoft (Webrichtlijnen).&lt;/p&gt;
  15014. &lt;p&gt;Nu weten we wat de status is van de nieuwe richtlijnen, maar wat verandert er inhoudelijk nu eigenlijk?&lt;/p&gt;
  15015. &lt;h2&gt;Verschil in uitgangspunten, eenduidigheid en gelaagdheid&lt;/h2&gt;
  15016. &lt;p&gt;De nieuwe richtlijnen zijn flexibeler als het gaat om het uitgangspunt voor de te gebruiken technologie. Onder versie 1 moest je bijvoorbeeld HTML 4.01 of XHTML 1.0 Strict gebruiken. De nieuwe richtlijnen zijn &lt;em&gt;technologie-onafhankelijk&lt;/em&gt;. Wel moet het &lt;em&gt;door toegankelijkheid zijn ondersteund&lt;/em&gt;. Je kunt dus prima HTML5 gebruiken, mits het op zo&#39;n manier gebouwd is dat hulptechnologieën zoals screenreaders er mee om kunnen gaan. Deze benadering is meer toekomstgericht dan die onder Webrichtlijnen 1; het maakt niet uit welke technologieën erbij komen, omdat dit principe altijd toepasbaar zal zijn.&lt;/p&gt;
  15017. &lt;p&gt;Ten tweede is er nu &lt;em&gt;meer eenduidigheid&lt;/em&gt; in internationale context. Onder versie 1 was de relatie met de WCAG1.0 (Web Content Accessibility Guidelines van W3C) ijkpunten niet altijd even duidelijk. In versie 2 is WCAG2.0 één op één opgenomen. Dit past binnen de doelstellingen om internationaal meer op één gemeenschappelijke standaard uit te komen als het gaat om regels en toetsingen voor toegankelijkheid. Dit is bijvoorbeeld interessant voor websites die meerdere landen bedienen.&lt;/p&gt;
  15018. &lt;p&gt;Voor de duidelijkheid: de &lt;em&gt;kwaliteitsrichtlijnen&lt;/em&gt; die binnen de webrichtlijnen aan de WCAG2.0 toegankelijkheidsrichtlijnen zijn toegevoegd, gelden dus alleen in Nederland. Dit is geen &#39;verbetering&#39; van de WCAG richtlijnen, maar deze zijn er om de algehele toegankelijkheid te vergroten; niet alleen voor mensen met een functiebeperking, maar voor iedereen. Zo zijn unieke en duurzame URI&#39;s voor iedereen handig.&lt;/p&gt;
  15019. &lt;p&gt;Tenslotte is er &lt;em&gt;gelaagdheid&lt;/em&gt; toegevoegd aan de webrichtlijnen. Voorheen kon je alleen aan alle 125 richtlijnen voldoen of niet, en veel mensen hadden hier problemen mee. Want als je voldeed aan 120 richtlijnen, dan leek het nog of je nergens aan voldeed, omdat het niet aan te tonen was met een webrichtlijnen waarmerk (wel met een Drempelvrij prioriteit 1 of 2 waarmerk voor toegankelijkheid). In versie 2 zijn er nu ook 3 niveaus in de webrichtlijnen waar je aan kunt voldoen. De niveaus heten nu A, AA en AAA, net als in WCAG2.0. En het zijn er geen 125 meer, maar 22!&lt;/p&gt;
  15020. &lt;h2&gt;Nieuwe indeling&lt;/h2&gt;
  15021. &lt;p&gt;De webrichtlijnen hebben nu ook een andere structuur. In plaats van één lange lijst met 125 ijkpunten heb je nu 5 &lt;em&gt;principes&lt;/em&gt; met daaronder 12 richtlijnen voor toegankelijkheid en 10 voor bouwkwaliteit. Per richtlijn zijn er verschillende &lt;em&gt;succescriteria&lt;/em&gt;. Pas op een dieper niveau staan de technische aspecten. Hier staat gedetailleerde uitleg en er staan voorbeelden van technieken die je kunt gebruiken—&lt;em&gt;afdoende technieken&lt;/em&gt;—en veelvoorkomende fouten. Dit deel is dus wel technologie-specifiek, maar deze beschreven technieken zijn niet uitputtend en kunnen in de loop der tijd worden bijgesteld. Nog steeds future-proof dus, en handig als referentie bij het ontwikkelen.&lt;/p&gt;
  15022. &lt;h2&gt;JavaScript mag. Inline frames ook.&lt;/h2&gt;
  15023. &lt;p&gt;Een aantal concrete veranderingen tussen versie 1 en versie 2:&lt;/p&gt;
  15024. &lt;ul&gt;
  15025. &lt;li&gt;Een JavaScriptloos alternatief is niet altijd vereist. De manier waarop het gebruikt wordt, moet natuurlijk wel toegankelijk zijn (zoals geen toetsenbordval).&lt;/li&gt;
  15026. &lt;li&gt;Afkortingen beschrijven is niet langer een basiseis (&lt;code&gt;&amp;lt;abbr&amp;gt;&lt;/code&gt;).&lt;/li&gt;
  15027. &lt;li&gt;Inline frames zijn toegestaan, onder voorwaarde dat de content ook op een andere manier benaderd kan worden.&lt;/li&gt;
  15028. &lt;li&gt;Well-formedness van opmaaktalen is een basiseis, in plaats van validatie. Het gaat erom dat het op de juiste manier geparsed kan worden.&lt;/li&gt;
  15029. &lt;li&gt;Unieke en duurzame URI&#39;s is geen basiseis (AAA-niveau).&lt;/li&gt;
  15030. &lt;li&gt;Markeren van dubbele content is nieuw (maar wel AAA-niveau). (En ook erg goed voor SEO.)&lt;/li&gt;
  15031. &lt;li&gt;PDF&#39;s worden onder WCAG2.0 gezien als webpagina&#39;s, en moeten daarom ook toegankelijk zijn of er moet een toegankelijk alternatief worden geboden.&lt;/li&gt;
  15032. &lt;/ul&gt;
  15033. &lt;h2&gt;Meer eisen op het eerste niveau&lt;/h2&gt;
  15034. &lt;p&gt;Tenslotte zijn er veranderingen in richtlijnen wat betreft het WCAG niveau waar ze onder vallen. Er is nu een aantal eisen onder prioriteit 1—A niveau—bij gekomen. Voorbeelden hiervan zijn geen toetsenbordval en duidelijke foutmeldingen. Op de website van het W3C staat de &lt;a href=&quot;http://www.w3.org/WAI/WCAG20/from10/comparison-priorities/&quot;&gt;volledige lijst met vergelijkingen&lt;/a&gt;.&lt;/p&gt;
  15035. &lt;p&gt;De nieuwe richtlijnen zijn te vinden op &lt;a href=&quot;http://versie2.webrichtlijnen.nl/norm&quot;&gt;versie2.webrichtlijnen.nl/norm&lt;/a&gt;.&lt;/p&gt;
  15036. &lt;p&gt;Voor wie de verschillen wil zien tussen WCAG1.0 en WCAG2.0 staat hier het &lt;a href=&quot;http://www.w3.org/WAI/WCAG20/from10/comparison-priorities/&quot;&gt;mapping-document van W3C&lt;/a&gt;.&lt;/p&gt;
  15037. &lt;h2&gt;Conclusie&lt;/h2&gt;
  15038. &lt;p&gt;Al met al een hoop veranderingen voor een meer flexibele en toekomstgerichte set Webrichtlijnen, waar de huidige gebruikte technieken beter in passen. En met de mogelijkheid van een AMvB is er eindelijk ook een stok achter de deur voor (mede-)overheden om er echt aan te gaan voldoen.&lt;/p&gt;
  15039. &lt;h2&gt;Over Janita Top&lt;/h2&gt;
  15040. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/janita-top.jpg&quot; alt=&quot;Foto van janita top uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  15041. Janita is freelance front-end developer en zit namens Fronteers in de Normcommissie Drempelvrij.nl. Haar kernwoorden, zowel in werk als privé, zijn kwaliteit en duurzaamheid. Ze is gek op (trein)reizen, fietsen en gaat geregeld naar (pop)concerten.
  15042. Ze is te vinden op [Twitter](https://twitter.com/sigvi) en op haar eigen website [janitatop.nl](http://www.janitatop.nl/).
  15043. &lt;p&gt;Donatie: Sea Shepherd
  15044. &lt;a href=&quot;http://www.seashepherd.nl/&quot;&gt;Sea Shepherd&lt;/a&gt; voert directe actie op zee om de afslachting van o.a. walvissen en dolfijnen tegen te gaan en de vernietiging van de leefomgeving te stoppen. Dit is hard nodig om ecosystemen en soorten te beschermen en te behouden. De organisatie krijgt geen subsidies en is daardoor volledig afhankelijk van donaties.&lt;/p&gt;
  15045. </content>
  15046.  </entry>
  15047.  <entry>
  15048.    <title>Patronen voor de groei</title>
  15049.    <link href="https://www.fronteers.nl/nl/blog/2011/12/patronen-voor-de-groei"/>
  15050.    <updated>2011-12-03T00:00:00Z</updated>
  15051.    <id>https://www.fronteers.nl/nl/blog/2011/12/patronen-voor-de-groei</id>
  15052.    <content xml:lang="nl" type="html">&lt;p&gt;Zelf, met de hand, een website maken is tegenwoordig zo lastig nog niet. Echter, een grote maatwerk website is heel andere koek. In het begin lijkt het wel simpel maar iedere beslissing heeft invloed op je volgende beslissing en één verkeerde beslissing kan heel snel tot frustratie leiden. Mocht je toevallig het (on)geluk hebben om meerdere grote websites te maken en te onderhouden, dan ben je, als je niet uitkijkt, al heel snel de sigaar.&lt;/p&gt;
  15053. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/patterns-box.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  15054. &lt;p&gt;Waarom? Niets blijft hetzelfde en het maken van een website is een oefening in constante verandering.&lt;/p&gt;
  15055. &lt;p&gt;HTML wil je zo hebben dat je het achteraf niet hoeft aan te passen voor CSS of JavaScript. Dergelijke aanpassingen zijn duur, omdat je met nog meer onderhoud wordt opgezadeld, wat uiteindelijk ook de duurzaamheid van je product aantast. Erger nog, het is meestal onnodig en makkelijker te voorkomen dan je denkt.&lt;/p&gt;
  15056. &lt;p&gt;De truc is om binnen de drie front-end gebieden (HTML, CSS en JavaScript) generiek te zijn waar deze gebieden elkaar raken en specifiek te zijn binnen een enkel gebied.&lt;/p&gt;
  15057. &lt;h2&gt;Structuurpatroon&lt;/h2&gt;
  15058. &lt;p&gt;&lt;em&gt;Generiek&lt;/em&gt;: HTML &amp;amp; JavaScript:&lt;/p&gt;
  15059. &lt;pre&gt;&lt;code&gt;&amp;lt;script src=&amp;quot;init.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
  15060. &lt;/code&gt;&lt;/pre&gt;
  15061. &lt;p&gt;&lt;em&gt;Specifiek&lt;/em&gt;: JavaScript:&lt;/p&gt;
  15062. &lt;pre&gt;&lt;code&gt;require([&#39;jquery&#39;,&#39;jquery-ui&#39;,&#39;validation&#39;],function(){ … });
  15063. &lt;/code&gt;&lt;/pre&gt;
  15064. &lt;p&gt;&lt;em&gt;Generiek&lt;/em&gt;: HTML &amp;amp; CSS:&lt;/p&gt;
  15065. &lt;pre&gt;&lt;code&gt;&amp;lt;link href=&amp;quot;main.css&amp;quot; /&amp;gt;
  15066. &lt;/code&gt;&lt;/pre&gt;
  15067. &lt;p&gt;&lt;em&gt;Specifiek&lt;/em&gt;: CSS:&lt;/p&gt;
  15068. &lt;pre&gt;&lt;code&gt;@import url(../normalize.css);
  15069. @import url(../forms.css);
  15070. &lt;/code&gt;&lt;/pre&gt;
  15071. &lt;p&gt;&lt;em&gt;Preprocessors zijn uitermate geschikt voor dit soort concatinatie&lt;/em&gt;&lt;/p&gt;
  15072. &lt;p&gt;Op deze manier is de kans vele malen groter dat de HTML bij aanpassingen aan de website buiten schot blijft.&lt;/p&gt;
  15073. &lt;p&gt;&lt;a href=&quot;http://oocss.org/&quot; title=&quot;Object Orientated CSS&quot;&gt;OO CSS&lt;/a&gt; en de recentere &lt;a href=&quot;http://smacss.com/book/&quot; title=&quot;Scalable and Modular Architecture for CSS&quot;&gt;SMACSS&lt;/a&gt; zijn ontstaan, omdat grote schaalbare websites een robuuste front-end structuur nodig hebben. Er is simpelweg geen ruimte om even wat te proberen en weer bij te sturen.&lt;/p&gt;
  15074. &lt;p&gt;Doordat front-end kennis over de jaren iets beter is geworden hebben we de wat starre OO CSS minder hard nodig. De komst van HTML5, CSS3, preprocessors en dependency loaders maken het namelijk eenvoudiger om een duurzaam semantische website op te leveren. SMACSS, bijvoorbeeld, is door de huidige ontwikkelingen eenvoudiger aan te leren, wat de duurzaamheid weer ten goede komt.&lt;/p&gt;
  15075. &lt;h2&gt;Nulpatroon&lt;/h2&gt;
  15076. &lt;p&gt;Resets lijken best handig. Websites in meerdere browservarianten (cross-browser) gelijkend te krijgen is precies wat we allemaal nodig hebben, zou je denken. Om resets echt handig te maken moet ze je van patronen voorzien om ze niet achteraf weer recht te trekken. Aan elementen die op nul zijn gezet heb je niets. Een paragraaf heeft normaliter een witregel aan de onderkant. Een tabelkop is meestal vet &#39;gedrukt&#39;. Laat ik het zo zeggen: een site moet met een &#39;reset&#39; vergelijkbaar weergeven en vooral cross-browser gelijkend weergeven alsof men geen CSS had toegepast.&lt;/p&gt;
  15077. &lt;p&gt;Basistoevoegingen die projectspecifiek zijn, zijn uiteraard welkom. Mogelijk met een specifieke &lt;code&gt;font-family&lt;/code&gt; en/of &lt;code&gt;font-size&lt;/code&gt; voor de headings, &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;, enz.&lt;/p&gt;
  15078. &lt;p&gt;Browsers die het &lt;em&gt;heel&lt;/em&gt; anders doen bestaan niet meer (zwaait naar IE6), wat de nul-reset onzinnig gemaakt heeft, maar CSS zoals &lt;a href=&quot;https://github.com/necolas/normalize.css/&quot;&gt;normalise.css&lt;/a&gt;* zal als een startpunt waarschijnlijk wel nuttig blijven.&lt;/p&gt;
  15079. &lt;p&gt;&lt;em&gt;* normalize.css bevat nog wel browserspecifieke hacks en hierdoor kan ik het niet zonder reserveringen aanbevelen. Wel kan ik het aanraden om door te nemen; er valt veel van te leren en te lenen.&lt;/em&gt;&lt;/p&gt;
  15080. &lt;h2&gt;Content patronen&lt;/h2&gt;
  15081. &lt;p&gt;ID-attributen zijn lastig, omdat ze vaak de basis vormen voor koppeling met de back-end. Je bespaart jezelf een hoop ellende door ze uit je CSS te houden. Beperk ze desnoods tot een handjevol, want ze kunnen ook handig zijn voor performance. Class-attributen zijn ook lastig, maar daar hoeven we ons minder zorgen over te maken. Een deel van de semantische attributen zijn door HTML5-tags opgevangen. Dat scheelt een heleboel onnodige attributen!&lt;/p&gt;
  15082. &lt;ul&gt;
  15083. &lt;li&gt;Niet altijd mogelijk, maar probeer het gebruik van ID’s voor CSS te vermijden&lt;/li&gt;
  15084. &lt;li&gt;Overdadig gebruik van het class-attribuut is net zo slecht als overal &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;&#39;s plaatsen&lt;/li&gt;
  15085. &lt;li&gt;Schrijf functionele ID&#39;s en classnames zoals; &#39;progress&#39;, &#39;sign-in&#39; of &#39;contact&#39;&lt;/li&gt;
  15086. &lt;li&gt;Niet functioneel? Maak deze attributen generiek; &#39;module&#39;,&#39;warning&#39; of &#39;information&#39;&lt;/li&gt;
  15087. &lt;li&gt;Schrijf attributen in de taal van de opmaakcode. HTML is Amerikaans Engels (en-US)&lt;/li&gt;
  15088. &lt;li&gt;Uitzondering is uiteraard een ID voor een &#39;hash tag&#39; (&lt;code&gt;&amp;lt;a href=”#informatie”&amp;gt;Lees meer&amp;lt;/a&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;section id=&amp;quot;informatie&amp;quot;&amp;gt;Lorem ipsum…&amp;lt;/section&amp;gt;&lt;/code&gt;)&lt;/li&gt;
  15089. &lt;/ul&gt;
  15090. &lt;p&gt;Contentspecifieke namen zoals &#39;dataGridProgress&#39; zijn eigelijk uit den boze en geven meestal dezelfde problemen als attributen die de presentatie spiegelen, zoals:&lt;/p&gt;
  15091. &lt;pre&gt;&lt;code&gt;.blue { color: blue; }
  15092. &lt;/code&gt;&lt;/pre&gt;
  15093. &lt;p&gt;Webformulieren kunnen eenvoudig generiek worden opgemaakt om vervolgens met een productpatroon te worden aangevuld. Een eenvoudig formulier voor een aanmeldmodule:&lt;/p&gt;
  15094. &lt;pre&gt;&lt;code&gt;&amp;lt;form id=&amp;quot;sendToBackEnd&amp;quot; class=&amp;quot;module log-in&amp;quot;&amp;gt;
  15095.  &amp;lt;fieldset&amp;gt;
  15096.    &amp;lt;div&amp;gt;
  15097.      &amp;lt;label for=&amp;quot;&amp;quot;&amp;gt;E-mail&amp;lt;/label&amp;gt;
  15098.      &amp;lt;input type=&amp;quot;email&amp;quot; value=&amp;quot;&amp;quot; placeholder=&amp;quot;Enter you e-mail address&amp;quot; /&amp;gt;
  15099.    &amp;lt;/div&amp;gt;
  15100.    &amp;lt;div&amp;gt;
  15101.      &amp;lt;label for=&amp;quot;&amp;quot;&amp;gt;Password&amp;lt;/label&amp;gt;
  15102.      &amp;lt;input type=&amp;quot;password&amp;quot; placeholder=&amp;quot;password&amp;quot;  /&amp;gt;
  15103.    &amp;lt;/div&amp;gt;
  15104.  &amp;lt;/fieldset&amp;gt;
  15105.  &amp;lt;div class=&amp;quot;buttons&amp;quot;&amp;gt;
  15106.    &amp;lt;button type=&amp;quot;submit&amp;quot;&amp;gt;log in&amp;lt;/button&amp;gt;
  15107.  &amp;lt;/div&amp;gt;
  15108. &amp;lt;/form&amp;gt;
  15109. &lt;/code&gt;&lt;/pre&gt;
  15110. &lt;p&gt;Maar waarom die extra &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt;&#39;s? Semantisch gezien zijn labels met invoervelden nu gescheiden maar belangrijker is dat we dit HTML-patroon op verschillende manieren kunnen vormgeven dankzij de extra &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; om de &lt;code&gt;&amp;lt;label&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;input&amp;gt;&lt;/code&gt;. Met grote websites is het altijd moeilijker om de HTML aan te passen dan de CSS. HTML dat continue groeit zorgt er vaak ook voor dat de CSS meegroeit. Idealiter beperk je de impact van dergelijke groei, maar de realiteit denkt daar vaak anders over. Zelfs de grootste controlfreak kan daar weinig aan doen. Jens Meiert mag het nog een keer uitleggen: &lt;a href=&quot;http://meiert.com/en/blog/20080926/get-the-html-right/&quot;&gt;Get the HTML right&lt;/a&gt;.&lt;/p&gt;
  15111. &lt;p&gt;Zoals je het wellicht is opgevallen ga ik hier niet in op de discussie over &lt;a href=&quot;http://www.w3.org/2001/sw/&quot;&gt;semantiek&lt;/a&gt;; daar is door de jaren heen alles over gezegd en er sindsdien weinig veranderd.&lt;/p&gt;
  15112. &lt;h2&gt;DRY&lt;/h2&gt;
  15113. &lt;p&gt;Patronen worden pas nuttig als deze zijn vastgelegd. Productiecode van een website is op zichzelf geen documentatie en is als zodanig ongeschikt. Achteraf discussies voeren over de semantiek in die code heeft op zichzelf weinig waarde. Bepaal vooraf de basispatronen die je voor een website nodig hebt zodat je niet iedere keer het wiel moet uitvinden. Discussies steeds opnieuw moeten voeren is zonde van je tijd. &lt;em&gt;Tip&lt;/em&gt;: &lt;a href=&quot;https://github.com/adactio/Pattern-Primer&quot;&gt;Pattern Primer&lt;/a&gt; van Jeremy Keith.&lt;/p&gt;
  15114. &lt;h2&gt;Maatwerkpatroon&lt;/h2&gt;
  15115. &lt;p&gt;Met de basis- en standaardpatronen onder je arm kun je nu los met maatwerk CSS. Dit is meestal waar het meteen al scheef gaat. Omdat &#39;nieuw&#39; vaak gelijk is aan &#39;we proberen wel wat&#39; en we vervuilen hiermee de HTML en CSS door het te laten staan. Wat niet werkt meteen verwijderen! Dit is waar SMACSS je als gids kan helpen. Beperk je HTML, beperk je classnamen en ID-attributen en beperk je selectorlengte in CSS! &lt;a href=&quot;http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html&quot;&gt;Specificity kills&lt;/a&gt;! Om dit te realiseren zul je regelmatig moeten beoordelen of je een refactorronde moet inlassen.&lt;/p&gt;
  15116. &lt;ul&gt;
  15117. &lt;li&gt;Een basis die geschikt is om te bootstrappen; &lt;a href=&quot;https://github.com/dutchcelt/FE-Patterns&quot;&gt;FE-Patterns&lt;/a&gt;, &lt;a href=&quot;http://html5boilerplate.com/&quot;&gt;HTML5 Boilerplate&lt;/a&gt; of (ik ben er geen fan van: 960 grid)&lt;/li&gt;
  15118. &lt;li&gt;Gebruik een modulaire aanpak; SMACSS of OO CSS.&lt;/li&gt;
  15119. &lt;li&gt;Overweeg een pre-parser; &lt;a href=&quot;http://lesscss.org/&quot;&gt;LESS&lt;/a&gt;, &lt;a href=&quot;http://sass-lang.com/&quot;&gt;Sass&lt;/a&gt; of &lt;a href=&quot;http://learnboost.github.com/stylus/try.html&quot;&gt;Stylus&lt;/a&gt; (met mixins en variabelen mag je weer wat specifieker zijn omdat die binnen de CSS zuil blijven)&lt;/li&gt;
  15120. &lt;/ul&gt;
  15121. &lt;p&gt;Dit is uiteraard maar een begin en patronen zijn een goed begin voor ieder project. Daar worden ze namelijk groot en sterk van.&lt;/p&gt;
  15122. &lt;p&gt;Dus, waar wacht je nog op!? Start je volgende project met een van de bovenstaande patronen of bouw ze zelf!&lt;/p&gt;
  15123. &lt;h2&gt;Over Egor Kloos&lt;/h2&gt;
  15124. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/egor-kloos.jpg&quot; alt=&quot;Foto van egor kloos uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  15125. Geboren in Dublin en woont al decennia in Rotterdam. [Dutchcelt](http://dutchcelt.nl/ &quot;Weblog van Egor Kloos&quot;) creëert sinds 1997 met bloed zweet en tranen moderne websites. Vanaf het begin is &#39;Web Standards&#39; een passie geweest. De kracht van CSS werd hem heel snel duidelijk en resulteerde in zijn 2003 [CSS Zen Garden inzending](http://www.csszengarden.com/062 &quot;Egor&#39;s dubbelzinnige &#39;gemination&#39;&quot;). Twee site designs (eentje voor IE6) via en enkele CSS en javascript.
  15126. Hiermee legde hij de basis voor het maken (en herbouwen) van grote websites in de Enterprise wereld. Daar begeleidt hij zijn klant in alles wat web design en moderne front-end te maken heeft. Nu hij voor [Lunatech Research](http://www.lunatech-research.com/) werkt, heeft hij een deel van zijn [kennis in front-end online](http://www1.lunatech.com/~egor/fep/) kunnen zetten.
  15127. &lt;p&gt;Donatie: Electronic Frontier Foundation
  15128. Het internet verandert de wereld en als individu is het helaas opboksen tegen te de belangen van overheden en grote bedrijven. Wat we denken, wat we doen en wie dat mag weten, wordt niet altijd in het belang van het individu bepaald. Muziek op je muziekspeler, video op tablet computer en bloggen vanaf je laptop is al gebonden aan regels. Waar gaat dat heen?
  15129. De &lt;a href=&quot;https://www.eff.org/&quot;&gt;Electronic Frontier Foundation&lt;/a&gt; vecht voor onze privacy, vecht voor innovatie en dat we onszelf kunnen uiten. Als front-enders werken we op en met het internet en de EFF staat in onze hoek.&lt;/p&gt;
  15130. </content>
  15131.  </entry>
  15132.  <entry>
  15133.    <title>HTML5 Video | Een overzicht</title>
  15134.    <link href="https://www.fronteers.nl/nl/blog/2011/12/html5-video-een-overzicht"/>
  15135.    <updated>2011-12-02T00:00:00Z</updated>
  15136.    <id>https://www.fronteers.nl/nl/blog/2011/12/html5-video-een-overzicht</id>
  15137.    <content xml:lang="nl" type="html">&lt;p&gt;HTML5 introduceert verschillende nieuwe tools voor het bouwen van dynamische websites en applicaties. Eén hiervan is het &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; element. In theorie maakt dit het invoegen van video&#39;s in websites net zo simpel als het invoegen van afbeeldingen met het &lt;code&gt;&amp;lt;img&amp;gt;&lt;/code&gt; element.&lt;/p&gt;
  15138. &lt;p&gt;In de praktijk is HTML5 video &lt;a href=&quot;http://www.longtailvideo.com/support/blog/11887/html5-video-not-quite-there-yet&quot;&gt;nog volop in ontwikkeling&lt;/a&gt;. Belangrijke opties ontbreken nog, niet alle browsers herkennen &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; en de browsers die dat wel doen ondersteunen verschillende formaten. HTML5 video werkt echter uitstekend op smartphones en tablets (iOS en Android). Al met al kan het, met enig denkwerk, vandaag al gebruikt worden in productie.&lt;/p&gt;
  15139. &lt;h2&gt;Waarom HTML5 video?&lt;/h2&gt;
  15140. &lt;p&gt;Het invoegen van video gebeurt nu meestal met de Adobe Flash plugin. Dit werkt uitstekend, dus waarom moet het nu opeens in HTML? Er zijn twee praktische redenen:&lt;/p&gt;
  15141. &lt;ol&gt;
  15142. &lt;li&gt;&lt;a href=&quot;http://www.apple.com/hotnews/thoughts-on-flash/&quot;&gt;Flash wordt niet ondersteund op iOS&lt;/a&gt;, het populaire mobiele platform van Apple. HTML5 is de enige manier om webvideo af te spelen op de iPad/iPhone.&lt;/li&gt;
  15143. &lt;li&gt;&lt;a href=&quot;http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/22644/using-the-html5-video-tag&quot;&gt;Het invoegen van een HTML5 video is makkelijk&lt;/a&gt;. De video tag is kort en bondig, en ontwikkelaars kunnen hun bestaande CSS en JavaScript vaardigheden gebruiken.&lt;/li&gt;
  15144. &lt;/ol&gt;
  15145. &lt;p&gt;Er is ook een belangrijkere, maar minder concrete reden. Om online video echt succesvol te laten zijn, moet het een &lt;a href=&quot;https://dev.opera.com/articles/view/a-call-for-video-on-the-web-opera-vid/&quot;&gt;First Class Web Citizen&lt;/a&gt; worden. Dit maakt het:&lt;/p&gt;
  15146. &lt;ul&gt;
  15147. &lt;li&gt;Toegankelijker, zowel voor (gehandicapte) personen als (exotische) apparaten.&lt;/li&gt;
  15148. &lt;li&gt;Vindbaarder, bijvoorbeeld vinden via zoekmachines of archieven.&lt;/li&gt;
  15149. &lt;li&gt;Stabieler en veiliger, omdat de plugin &amp;quot;laag&amp;quot; verdwijnt.&lt;/li&gt;
  15150. &lt;li&gt;Beter presterend, zowel aan de browser (CPU/GPU) als aan de netwerk (TCP/HTTP) kant.&lt;/li&gt;
  15151. &lt;/ul&gt;
  15152. &lt;h2&gt;Browser ondersteuning&lt;/h2&gt;
  15153. &lt;p&gt;Wie ondersteunt HTML5 video vandaag? Hier is &lt;a href=&quot;http://gs.statcounter.com/&quot;&gt;een overzichtje&lt;/a&gt; (oktober 2011), met daarin de desktop-browsers en mobiele apparaten gemixt:&lt;/p&gt;
  15154. &lt;table&gt;
  15155. &lt;thead&gt;
  15156. &lt;tr&gt;
  15157. &lt;th&gt;Browser&lt;/th&gt;
  15158. &lt;th&gt;Marktaandeel&lt;/th&gt;
  15159. &lt;th&gt;HTML5 ondersteuning&lt;/th&gt;
  15160. &lt;th&gt;Flash ondersteuning&lt;/th&gt;
  15161. &lt;/tr&gt;
  15162. &lt;/thead&gt;
  15163. &lt;tbody&gt;
  15164. &lt;tr&gt;
  15165. &lt;td&gt;Internet Explorer 6/7/8&lt;/td&gt;
  15166. &lt;td&gt;30%&lt;/td&gt;
  15167. &lt;td&gt;Nee&lt;/td&gt;
  15168. &lt;td&gt;Ja&lt;/td&gt;
  15169. &lt;/tr&gt;
  15170. &lt;tr&gt;
  15171. &lt;td&gt;Firefox&lt;/td&gt;
  15172. &lt;td&gt;25%&lt;/td&gt;
  15173. &lt;td&gt;Ja (WebM)&lt;/td&gt;
  15174. &lt;td&gt;Ja&lt;/td&gt;
  15175. &lt;/tr&gt;
  15176. &lt;tr&gt;
  15177. &lt;td&gt;Chrome&lt;/td&gt;
  15178. &lt;td&gt;20%&lt;/td&gt;
  15179. &lt;td&gt;Ja (MP4 + WebM)¹&lt;/td&gt;
  15180. &lt;td&gt;Ja&lt;/td&gt;
  15181. &lt;/tr&gt;
  15182. &lt;tr&gt;
  15183. &lt;td&gt;Internet Explorer 9&lt;/td&gt;
  15184. &lt;td&gt;10%&lt;/td&gt;
  15185. &lt;td&gt;Ja (MP4)&lt;/td&gt;
  15186. &lt;td&gt;Ja&lt;/td&gt;
  15187. &lt;/tr&gt;
  15188. &lt;tr&gt;
  15189. &lt;td&gt;Safari&lt;/td&gt;
  15190. &lt;td&gt;4%&lt;/td&gt;
  15191. &lt;td&gt;Ja (MP4)&lt;/td&gt;
  15192. &lt;td&gt;Ja&lt;/td&gt;
  15193. &lt;/tr&gt;
  15194. &lt;tr&gt;
  15195. &lt;td&gt;iOS&lt;/td&gt;
  15196. &lt;td&gt;3%&lt;/td&gt;
  15197. &lt;td&gt;Ja (MP4)&lt;/td&gt;
  15198. &lt;td&gt;Nee&lt;/td&gt;
  15199. &lt;/tr&gt;
  15200. &lt;tr&gt;
  15201. &lt;td&gt;Opera&lt;/td&gt;
  15202. &lt;td&gt;2%&lt;/td&gt;
  15203. &lt;td&gt;Ja (WebM)&lt;/td&gt;
  15204. &lt;td&gt;Ja&lt;/td&gt;
  15205. &lt;/tr&gt;
  15206. &lt;tr&gt;
  15207. &lt;td&gt;Android&lt;/td&gt;
  15208. &lt;td&gt;1%&lt;/td&gt;
  15209. &lt;td&gt;Ja (MP4)&lt;/td&gt;
  15210. &lt;td&gt;Ja²&lt;/td&gt;
  15211. &lt;/tr&gt;
  15212. &lt;tr&gt;
  15213. &lt;td&gt;Windows Phone&lt;/td&gt;
  15214. &lt;td&gt;0%&lt;/td&gt;
  15215. &lt;td&gt;Ja (MP4)&lt;/td&gt;
  15216. &lt;td&gt;Nee&lt;/td&gt;
  15217. &lt;/tr&gt;
  15218. &lt;tr&gt;
  15219. &lt;td&gt;Overig (&amp;quot;dumbphones&amp;quot;)&lt;/td&gt;
  15220. &lt;td&gt;5%&lt;/td&gt;
  15221. &lt;td&gt;Nee&lt;/td&gt;
  15222. &lt;td&gt;Nee&lt;/td&gt;
  15223. &lt;/tr&gt;
  15224. &lt;/tbody&gt;
  15225. &lt;/table&gt;
  15226. &lt;ol&gt;
  15227. &lt;li&gt;Chrome heeft afgelopen januari aangekondigd MP4 &lt;a href=&quot;http://blog.chromium.org/2011/01/html-video-codec-support-in-chrome.html&quot;&gt;&amp;quot;binnenkort&amp;quot; te verwijderen&lt;/a&gt;. Tot dusver werkt het nog.&lt;/li&gt;
  15228. &lt;li&gt;Adobe is &lt;a href=&quot;http://blogs.adobe.com/conversations/2011/11/flash-focus.html&quot;&gt;gestopt met het ontwikkelen&lt;/a&gt; van Flash voor mobiel. Android 4.0 is de laatste versie met Flash ondersteuning.&lt;/li&gt;
  15229. &lt;/ol&gt;
  15230. &lt;p&gt;Tweederde van de markt kan dus HTML5 video afspelen. Uiteraard kunnen oude versies van IE (6/7/8) dit niet, maar zij draaien wel Flash (als fallback optie). Het aandeel van mobiele browsers (iOS en Android) is nog klein (5%), maar snel groeiend.&lt;/p&gt;
  15231. &lt;p&gt;In de HTML5 kolom worden de ondersteunde video formaten vermeld. Sommige browsers ondersteunen &lt;em&gt;MP4&lt;/em&gt;, anderen weer &lt;em&gt;WebM&lt;/em&gt;. Alleen Chrome ondersteunt beide. Dit gebrek aan een standaard video formaat is het grootste probleem voor HTML5 video.&lt;/p&gt;
  15232. &lt;h2&gt;Het codec probleem&lt;/h2&gt;
  15233. &lt;p&gt;Eerst een korte uitleg van video formaten. Ze bestaan grofweg uit drie bouwstenen:&lt;/p&gt;
  15234. &lt;ol&gt;
  15235. &lt;li&gt;De &lt;a href=&quot;http://en.wikipedia.org/wiki/Container_format&quot;&gt;container&lt;/a&gt; bevat alle metadata inclusief de audio/video codec info, maar niet de frames/samples zelf.&lt;/li&gt;
  15236. &lt;li&gt;De &lt;a href=&quot;http://en.wikipedia.org/wiki/Video_codec&quot;&gt;video codec&lt;/a&gt; bevat de eigenlijke, gecodeerde video frames.&lt;/li&gt;
  15237. &lt;li&gt;De &lt;a href=&quot;http://en.wikipedia.org/wiki/Audio_codec&quot;&gt;audio codec&lt;/a&gt; bevat de eigenlijke, gecodeerde audio samples.&lt;/li&gt;
  15238. &lt;/ol&gt;
  15239. &lt;p&gt;Hoe beter de video en audio codecs zijn, hoe beter (kleinere bestanden, eenvoudiger te coderen) het video formaat is. Op dit moment worden er twee (uitstekende) formaten gebruikt in HTML5:&lt;/p&gt;
  15240. &lt;ul&gt;
  15241. &lt;li&gt;Het &lt;a href=&quot;http://en.wikipedia.org/wiki/MP4&quot;&gt;MP4-formaat&lt;/a&gt;, met daarin de &lt;a href=&quot;http://en.wikipedia.org/wiki/H264&quot;&gt;H.264 video codec&lt;/a&gt; en de &lt;a href=&quot;http://en.wikipedia.org/wiki/Aac&quot;&gt;AAC audio codec&lt;/a&gt;.&lt;/li&gt;
  15242. &lt;li&gt;Het &lt;a href=&quot;http://en.wikipedia.org/wiki/Webm&quot;&gt;WebM formaat&lt;/a&gt;, met daarin de &lt;a href=&quot;http://en.wikipedia.org/wiki/VP8&quot;&gt;VP8 video codec&lt;/a&gt; en de &lt;a href=&quot;http://en.wikipedia.org/wiki/Vorbis&quot;&gt;Vorbis audio codec&lt;/a&gt;.&lt;/li&gt;
  15243. &lt;/ul&gt;
  15244. &lt;p&gt;Qua kwaliteit doen de twee formaten &lt;a href=&quot;http://www.streamingmedia.com/Articles/Editorial/Featured-Articles/WebM-vs.-H.264-A-Closer-Look-68594.aspx&quot;&gt;niet veel onder voor elkaar&lt;/a&gt;. Het grote verschil zit hem in hun IP:&lt;/p&gt;
  15245. &lt;ul&gt;
  15246. &lt;li&gt;MP4 (H264/AAC) wordt breed ondersteund in de video-industrie, maar is volledig dicht gepatenteerd. &lt;a href=&quot;http://www.streamingmedia.com/Articles/ReadArticle.aspx?ArticleID=65403&quot;&gt;Zowel voor encoderen, publiceren als decoderen&lt;/a&gt; zijn licenties nodig.&lt;/li&gt;
  15247. &lt;li&gt;WebM (VP8/Vorbis) is daarentegen &lt;a href=&quot;http://www.webmproject.org/&quot;&gt;patent-vrij en open source&lt;/a&gt; (net als alle andere W3C technologieën). Het formaat is vrij nieuw, met een klein ecosysteem van encoders en decoders.&lt;/li&gt;
  15248. &lt;/ul&gt;
  15249. &lt;p&gt;In deze afweging tussen pragmatisme en patenten hebben sommige browsers gekozen voor het eerste (MP4) en anderen voor het laatste (WebM). Het resultaat is dat je nu je video twee keer moet encoderen om alle HTML5 browsers te ondersteunen. Als WebM op termijn meer tractie krijgt, zal dat veranderen, maar dit is een langzaam proces.&lt;/p&gt;
  15250. &lt;p class=&quot;note&quot;&gt;
  15251. Er is trouwens nog een derde HTML5 formaat: [Ogg](http://en.wikipedia.org/wiki/Ogg). Het is kwalitatief stukken minder dan MP4/WebM, maar werd ondersteund door Firefox en Opera voordat [Google WebM vrijgaf](http://www.longtailvideo.com/support/blog/12120/googles-vp8webm-and-what-it-means-for-you). De enige browser die nog Ogg vereist, is [het snel verdwijnende](http://gs.statcounter.com/#browser_version-ww-monthly-201101-201112) Firefox 3.6.
  15252. &lt;/p&gt;
  15253. &lt;h2&gt;Video en sources&lt;/h2&gt;
  15254. &lt;p&gt;Nu door naar de video tag zelf. Kort en bondig, als beloofd:&lt;/p&gt;
  15255. &lt;pre&gt;&lt;code&gt;&amp;lt;video
  15256.  controls
  15257.  height=&amp;quot;360&amp;quot;
  15258.  poster=&amp;quot;/files/bunny.jpg&amp;quot;
  15259.  src=&amp;quot;/files/bunny.mp4&amp;quot;
  15260.  width=&amp;quot;640&amp;quot;&amp;gt;
  15261. &amp;lt;/video&amp;gt;
  15262. &lt;/code&gt;&lt;/pre&gt;
  15263. &lt;p&gt;De &lt;code&gt;controls&lt;/code&gt; optie rendert een ingebouwde navigatiebalk, de &lt;code&gt;height&lt;/code&gt; en &lt;code&gt;width&lt;/code&gt; bepalen de dimensies van de video, de &lt;code&gt;poster&lt;/code&gt; linkt naar een screenshot van de video en de &lt;code&gt;src&lt;/code&gt; linkt naar de video zelf. Daarnaast zijn er nog de &lt;code&gt;autoplay&lt;/code&gt;, &lt;code&gt;preload&lt;/code&gt; en &lt;code&gt;loop&lt;/code&gt; opties om het &lt;a href=&quot;http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/22644/using-the-html5-video-tag&quot;&gt;afspelen te controleren&lt;/a&gt;.&lt;/p&gt;
  15264. &lt;p&gt;Om het twee-codec-probleem te faciliteren bevat HTML5 een tweede element: &lt;code&gt;&amp;lt;source&amp;gt;&lt;/code&gt;. Meerdere source elementen kunnen worden genest in één video. HTML5 browsers inspecteren de source elementen en spelen de eerste die ze ondersteunen:&lt;/p&gt;
  15265. &lt;pre&gt;&lt;code&gt;&amp;lt;video controls height=&amp;quot;360&amp;quot; poster=&amp;quot;/files/bunny.jpg&amp;quot; width=&amp;quot;640&amp;quot;&amp;gt;
  15266.  &amp;lt;source src=&amp;quot;/files/bunny.mp4&amp;quot; type=&amp;quot;video/mp4&amp;quot; /&amp;gt;
  15267.  &amp;lt;source src=&amp;quot;/files/bunny.webm&amp;quot; type=&amp;quot;video/webm&amp;quot; /&amp;gt;
  15268. &amp;lt;/video&amp;gt;
  15269. &lt;/code&gt;&lt;/pre&gt;
  15270. &lt;p class=&quot;note&quot;&gt;
  15271. De [HTML5 specificatie](http://www.w3.org/TR/html5/video.html) beschrijft ook het toevoegen van de audio/video codecs aan de type optie. In de praktijk is dit niet nodig, omdat alle browsers deze waardes negeren en codecs detecteren tijdens het downloaden van de video.
  15272. &lt;/p&gt;
  15273. &lt;p&gt;Bovenstaand stukje HTML resulteert in theorie in een consistente video weergave in alle HTML5 browsers. In de praktijk zijn er echter nog allerlei &lt;a href=&quot;http://camendesign.com/code/video_for_everybody#notes&quot;&gt;bugs en gaten in implementatie&lt;/a&gt;. Het handmatig omzeilen van deze issues is een rotklus. Een HTML5 Video Player kan daarbij helpen.&lt;/p&gt;
  15274. &lt;h2&gt;HTML5 video players&lt;/h2&gt;
  15275. &lt;p&gt;Een HTML5 Video Player is een aparte JavaScript bibliotheek die zowel de video&#39;s op een pagina als de browser ondersteuning detecteert. De bibliotheek werkt vervolgens om de tekortkomingen van de browser heen. De term Video Player is dus enigszins misleidend, want het is nog steeds de browser die de video afspeelt.&lt;/p&gt;
  15276. &lt;p&gt;Er zijn &lt;a href=&quot;http://praegnanz.de/html5video/&quot;&gt;behoorlijk wat&lt;/a&gt; van deze bibliotheken in ontwikkeling. Ze bieden meestal:&lt;/p&gt;
  15277. &lt;ul&gt;
  15278. &lt;li&gt;Het corrigeren voor browser bugs. Vooral Android en iOS hebben kritieke bugs in hun parsing en rendering van video elementen.&lt;/li&gt;
  15279. &lt;li&gt;Het terugvallen op de Flash-plugin. Dit is nodig voor oude browsers (IE 6/7/8), en voor Firefox/Opera als je &lt;a href=&quot;http://www.longtailvideo.com/support/blog/17843/browser-video-codec-support-does-it-matter&quot;&gt;alleen MP4 gebruikt&lt;/a&gt;.&lt;/li&gt;
  15280. &lt;li&gt;Het renderen van een consistente navigatie. De ingebouwde navigatie van iedere HTML5 browser ziet er namelijk anders uit, en kan niet gestyled worden.&lt;/li&gt;
  15281. &lt;li&gt;Het aanbieden van een pseudo-fullscreen-optie, door de video naar het volledig browservenster te vergroten. In tegenstelling tot Flash is er nog geen daadwerkelijk fullscreen in HTML5, &lt;a href=&quot;https://wiki.mozilla.org/index.php?title=Gecko:FullScreenAPI&quot;&gt;maar daar wordt aan gewerkt&lt;/a&gt;.&lt;/li&gt;
  15282. &lt;/ul&gt;
  15283. &lt;p&gt;Naast deze functies ondersteunen sommige Video Players zaken als afspeellijsten, ondertiteling of in-video adverteren. Eén belangrijke video functie kunnen ze niet via scripting ondersteunen: &lt;em&gt;streaming&lt;/em&gt;. Dit zal ingebouwd moeten worden door de browsers zelf.&lt;/p&gt;
  15284. &lt;h2&gt;Video streaming&lt;/h2&gt;
  15285. &lt;p&gt;Het grootste obstakel voor snelle adoptie van HTML5 is het ontbreken van één enkel formaat. Dit heeft als direct gevolg dat HTML5 video&#39;s 2x geëncodeerd en 2x opgeslagen moeten worden. Dit heeft echter ook als gevolg dat er &lt;a href=&quot;http://www.longtailvideo.com/support/blog/18059/w3c-webtv-adaptive-streaming-content-protection&quot;&gt;geen standaard streaming mechanisme is&lt;/a&gt;:&lt;/p&gt;
  15286. &lt;ul&gt;
  15287. &lt;li&gt;Video wordt dus altijd geleverd als een &amp;quot;download&amp;quot;, waarbij veel data wordt gedownload maar niet bekeken.&lt;/li&gt;
  15288. &lt;li&gt;Het aanpassen van de kwaliteit midden in een video is niet mogelijk, net nu dat zo belangrijk is voor mobiel.&lt;/li&gt;
  15289. &lt;li&gt;Het live streaming van evenementen en kanalen is niet mogelijk, omdat dit geen te downloaden files zijn.&lt;/li&gt;
  15290. &lt;li&gt;Beveiliging door middel van encryptie (meestal deel van het streaming protocol) bestaat niet in HTML5.&lt;/li&gt;
  15291. &lt;/ul&gt;
  15292. &lt;p&gt;Hierdoor is &lt;a href=&quot;http://www.longtailvideo.com/support/blog/11887/html5-video-not-quite-there-yet&quot;&gt;HTML5 video geen optie&lt;/a&gt; voor media bedrijven. Zij hebben Flash (of Silverlight) nodig tot een HTML5 video streaming protocol is gestandaardiseerd.&lt;/p&gt;
  15293. &lt;p&gt;Op iOS is er echter wél een streaming protocol, volledig door Apple bedacht en geïmplementeerd bovenop HTML5. Het heet &lt;a href=&quot;http://developer.apple.com/resources/http-streaming/&quot;&gt;HTTP Live Streaming&lt;/a&gt; (HLS) en wordt ondersteund door alle iPads en iPhones. Een HLS stream kan worden geladen in een video-tag, net als een MP4-of WebM video:&lt;/p&gt;
  15294. &lt;pre&gt;&lt;code&gt;&amp;lt;video controls height=&amp;quot;360&amp;quot; poster=&amp;quot;/files/bunny.jpg&amp;quot; width=&amp;quot;640&amp;quot;&amp;gt;
  15295.  &amp;lt;source src=&amp;quot;/files/bunny.m3u8&amp;quot; type=&amp;quot;application/vnd.apple.mpegurl&amp;quot; /&amp;gt;
  15296.  &amp;lt;source src=&amp;quot;/files/bunny.mp4&amp;quot; type=&amp;quot;video/mp4&amp;quot; /&amp;gt;
  15297.  &amp;lt;source src=&amp;quot;/files/bunny.webm&amp;quot; type=&amp;quot;video/webm&amp;quot; /&amp;gt;
  15298. &amp;lt;/video&amp;gt;
  15299. &lt;/code&gt;&lt;/pre&gt;
  15300. &lt;p&gt;Door de populariteit van iOS (en de afwezigheid van alternatieven) is het HLS protocol flink gegroeid:&lt;/p&gt;
  15301. &lt;ul&gt;
  15302. &lt;li&gt;Alle &lt;em&gt;pro&lt;/em&gt; video op de iPad gebruikt HLS (voor in-app video &lt;a href=&quot;http://developer.apple.com/news/index.php?id=02162010a&quot;&gt;is HLS zelfs vereist&lt;/a&gt;).&lt;/li&gt;
  15303. &lt;li&gt;Alle streaming servers (Adobe, Microsoft, Real, Wowza) ondersteunen tegenwoordig HLS.&lt;/li&gt;
  15304. &lt;li&gt;Alle IPTV set-top boxes (XBox, PS3, Apple TV, Roku, Boxee) ondersteunen tegenwoordig ook HLS.&lt;/li&gt;
  15305. &lt;li&gt;Zelfs Android doet HLS, &lt;a href=&quot;http://developer.android.com/sdk/android-3.0-highlights.html&quot;&gt;vanaf versie 3.0&lt;/a&gt; (Honeycomb).&lt;/li&gt;
  15306. &lt;/ul&gt;
  15307. &lt;p&gt;Ondanks dit succes is HLS (nog) niet deel van een web-standaard. Bredere ondersteuning, bijvoorbeeld door Internet Explorer, zou nuttig zijn, maar is onzeker. Betekent dit dan dat HTML5 video vooral leuk is voor korte clipjes en iPads? Absoluut niet. Hoewel streaming nog niet is gefixt, is er een andere ontwikkeling die HTML5 een groot voordeel geeft ten opzichte van Flash.&lt;/p&gt;
  15308. &lt;h2&gt;Track en WebVTT&lt;/h2&gt;
  15309. &lt;p&gt;Naast &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;source&amp;gt;&lt;/code&gt; definieert de &lt;a href=&quot;http://www.w3.org/TR/html5/video.html&quot;&gt;HTML5 video specificatie&lt;/a&gt; een derde nieuwe element: &lt;code&gt;&amp;lt;track&amp;gt;&lt;/code&gt;. Met dit element is het mogelijk om verschillende soorten data te synchroniseren met de video:&lt;/p&gt;
  15310. &lt;ul&gt;
  15311. &lt;li&gt;&lt;em&gt;Ondertiteling&lt;/em&gt; van dialogen in andere talen.&lt;/li&gt;
  15312. &lt;li&gt;&lt;em&gt;Ondertitels&lt;/em&gt; van de audio, zowel spraak als anders. Dit voor slechthorenden, of situaties zonder geluid.&lt;/li&gt;
  15313. &lt;li&gt;&lt;em&gt;Audio descripties&lt;/em&gt; van de visuele elementen. Bedoeld voor audio synthese voor slechtzienden, of situaties zonder beeld.&lt;/li&gt;
  15314. &lt;li&gt;&lt;em&gt;Hoofdstuk markeringen&lt;/em&gt;, voor het snel navigeren door langere videos.&lt;/li&gt;
  15315. &lt;li&gt;&lt;em&gt;Metadata&lt;/em&gt;, zelf in te vullen data voor gebruik in scripts.&lt;/li&gt;
  15316. &lt;/ul&gt;
  15317. &lt;p&gt;De data van deze tracks wordt opgeslagen in het &lt;a href=&quot;http://blog.gingertech.net/2011/06/27/recent-developments-around-webvtt/&quot;&gt;nieuwe WebVTT bestandsformaat&lt;/a&gt;, een eenvoudige tekst formaat vergelijkbaar met &lt;a href=&quot;http://en.wikipedia.org/wiki/SubRip&quot;&gt;SRT&lt;/a&gt;. Hier is een fragment, met twee ondertitels:&lt;/p&gt;
  15318. &lt;pre&gt;&lt;code&gt;1
  15319. 00:13:45.250 -&amp;gt; 00:13:48.000
  15320. Hello world!
  15321.  
  15322. 2
  15323. 00:13:49.910 -&amp;gt; 00:13:56.500
  15324. Well, hello to you too!
  15325. - Thanks. Any coffee left?
  15326. &lt;/code&gt;&lt;/pre&gt;
  15327. &lt;p&gt;Deze WebVTT bestanden worden ingeladen in de &lt;code&gt;&amp;lt;track&amp;gt;&lt;/code&gt; elementen net als videos in &lt;code&gt;&amp;lt;source&amp;gt;&lt;/code&gt; elementen:&lt;/p&gt;
  15328. &lt;pre&gt;&lt;code&gt;&amp;lt;video controls height=&amp;quot;360&amp;quot; poster=&amp;quot;/files/bunny.jpg&amp;quot; width=&amp;quot;640&amp;quot;&amp;gt;
  15329.  &amp;lt;source src=&amp;quot;/files/bunny.mp4&amp;quot; type=&amp;quot;video/mp4&amp;quot; /&amp;gt;
  15330.  &amp;lt;source src=&amp;quot;/files/bunny.webm&amp;quot; type=&amp;quot;video/webm&amp;quot; /&amp;gt;
  15331.  &amp;lt;track label=&amp;quot;Closed Captions&amp;quot; kind=&amp;quot;captions&amp;quot; src=&amp;quot;/files/bunny-cc.vtt&amp;quot; /&amp;gt;
  15332.  &amp;lt;track label=&amp;quot;Auf Deutsch&amp;quot; kind=&amp;quot;subtitles&amp;quot; src=&amp;quot;/files/bunny-de.vtt&amp;quot; /&amp;gt;
  15333. &amp;lt;/video&amp;gt;
  15334. &lt;/code&gt;&lt;/pre&gt;
  15335. &lt;p&gt;Met tracks en WebVTT kan HTML5 video eenvoudig toegankelijk gemaakt worden, voor zowel buitenlandse sprekers als mensen met een beperking. In Flash was dit &lt;a href=&quot;http://www.longtailvideo.com/support/jw-player/22/making-video-accessible&quot;&gt;altijd erg lastig&lt;/a&gt;, doordat een standaard methode ontbrak. Daarnaast zullen andere toepassingen profiteren van de metadata in WebVTT bestanden. Denk aan video SEO en in-video search, het targeten van advertenties op bepaalde scènes, of de interactie tussen de &lt;a href=&quot;http://popcornjs.org/&quot;&gt;webpagina en video tijdlijn&lt;/a&gt;.&lt;/p&gt;
  15336. &lt;p&gt;Er is nog één probleempje: zowel &lt;code&gt;&amp;lt;track&amp;gt;&lt;/code&gt; als WebVTT &lt;em&gt;bestaan nog niet in browsers&lt;/em&gt;. De specificatie is wel &lt;a href=&quot;http://www.w3.org/community/texttracks/&quot;&gt;zo goed als af&lt;/a&gt; en browser-implementaties komen eraan. Waarschijnlijk zullen alle browsers dit eind 2012 ondersteunen.&lt;/p&gt;
  15337. &lt;h2&gt;Wanneer HTML5?&lt;/h2&gt;
  15338. &lt;p&gt;Op de lange termijn vervangt HTML5 Flash voor het afspelen van video. Momenteel biedt Flash echter nog een betere gebruikservaring op de desktop. Dus op welk punt heeft het zin om &lt;em&gt;HTML5 first&lt;/em&gt; te gaan? Dat hangt af van de manier waarop je video gebruikt:&lt;/p&gt;
  15339. &lt;ul&gt;
  15340. &lt;li&gt;Als video een core business is en je afhankelijk bent van streamen en beveiliging, wordt het wachten totdat er een streaming mechanisme komt. Dat kan nog jaren duren.&lt;/li&gt;
  15341. &lt;li&gt;Als video gebruikt wordt voor marketing/educatie en bereik, gebruiksgemak en toegankelijkheid belangrijk zijn, wordt het wachten op een hogere dekking (90%) en de beschikbaarheid van &lt;code&gt;&amp;lt;track&amp;gt;&lt;/code&gt;. Beiden zitten er aan te komen in 2012.&lt;/li&gt;
  15342. &lt;li&gt;Als video geen core business is, maar webdesign wel, kun je vandaag al aan de slag met HTML5. Je moet wel je video&#39;s dubbel encoderen en je HTML regelmatig bijwerken voor nieuwe features en bugs. Je kunt echter ook meteen met CSS en JavaScript aan de slag om eigen video players te maken.&lt;/li&gt;
  15343. &lt;/ul&gt;
  15344. &lt;p&gt;Voor mobiele apparaten is het sowieso nu het best om HTML5 te gebruiken (hetzij integraal, hetzij als fallback). Android en iOS ondersteunen beide HTML5, terwijl Flash op Android aan het verdwijnen is. Bovendien ondersteunen ze, in tegenstelling tot desktop browsers, beiden één formaat (MP4).&lt;/p&gt;
  15345. &lt;h2&gt;Over Jeroen Wijering&lt;/h2&gt;
  15346. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/jeroen-wijering.jpg&quot; alt=&quot;Foto van jeroen wijering uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  15347. Jeroen Wijering is de ontwikkelaar [achter de succesvolle JW Player](http://www.whoisjw.tv/), die wordt gebruikt op miljoenen websites wereldwijd. Zijn bedrijf [LongTail Video](http://www.longtailvideo.com/) beheert ook een gratis online platform waarbinnen bedrijven hun video&#39;s kunnen encoderen en publiceren.
  15348. Jeroen is te vinden [op twitter](https://twitter.com/jeroenw) en schrijft af en toe een artikel op [www.longtailvideo.com/blog](http://www.longtailvideo.com/blog).
  15349. &lt;p&gt;Donatie: Stichting Aap
  15350. &lt;a href=&quot;http://www.aap.nl/&quot;&gt;Stichting Aap&lt;/a&gt; is een sympathiek en kleinschalig opvangcentrum voor uitheemse dieren. De dieren die er terecht komen zijn afkomstig van proefdierlaboratoria, circussen, louche dierentuinen of particulieren. Belangrijker is dat ze ook campagnes voeren voor preventie en gewaarwording, zowel in de politiek als bij het publiek.&lt;/p&gt;
  15351. </content>
  15352.  </entry>
  15353.  <entry>
  15354.    <title>Waarom een slicer een front-end developer is geworden</title>
  15355.    <link href="https://www.fronteers.nl/nl/blog/2011/12/waarom-een-slicer-een-front-end-developer-is-geworden"/>
  15356.    <updated>2011-12-01T00:00:00Z</updated>
  15357.    <id>https://www.fronteers.nl/nl/blog/2011/12/waarom-een-slicer-een-front-end-developer-is-geworden</id>
  15358.    <content xml:lang="nl" type="html">&lt;p&gt;Het internet gebruikte je vroeger enkel voor het weergeven van simpele, gestructureerde gegevens. Met de stijgende populariteit van het internet wilde iedereen zijn eigen website onderscheiden van de andere. Naast de interessante content die je op je website toonde, wilde je ook een visueel onderscheid maken ten opzichte van de rest van de wereld. Je wilde je eigen stempel drukken op het groeiende internet. Ik ben op zoek gegaan naar het verhaal achter het woord &#39;slicer&#39; en hoe dit geëvolueerd is naar een volwaardig beroep als front-end developer.&lt;/p&gt;
  15359. &lt;h2&gt;De slicer&lt;/h2&gt;
  15360. &lt;p&gt;Het gebruik van het woord slicer dateert uit de periode dat je in Adobe Photoshop de slice-tool gebruikte om een ontwerp &#39;op te snijden&#39;. Het gebruik van Adobe Photoshop en Adobe ImageReady maakte het voor iedereen gemakkelijk om een eigen ontwerp om te vormen tot een volwaardige website. Je ontwierp alles in Photoshop, daarna zou je dat bestand exporteren naar Adobe ImageReady om daar elk stukje (slice) te benoemen of er een link van te maken. Daarnaast kon je ook kiezen welk bestandsformaat voor de afbeelding werd gebruikt of zelfs animated GIF&#39;s maken. Dit kon je exporteren naar een HTML-versie die dan uiteindelijk je website werd.&lt;/p&gt;
  15361. &lt;p&gt;In die tijd was het geen eer om jezelf een slicer te noemen. Het omzetten van je ontwerpen naar HTML was toen niet meer dan een last waar je snel van af wilde zijn. Het enige dat telde was dat je ontwerp voor iedereen op het internet zichtbaar was. De code die Adobe ImageReady genereerde bestond volledig uit tabellen en afbeeldingen. Het was een hel om zo&#39;n bestand later te bewerken maar het was toen de enige manier om je content visueel goed weer te kunnen geven.&lt;/p&gt;
  15362. &lt;h2&gt;Meer dan tabellen&lt;/h2&gt;
  15363. &lt;p&gt;HTML is een markup language die dient voor het opmaken van de structuur van je document en niet voor stijlen van je pagina. Zo gebruik je tabellen om gestructureerde data weer te geven, niet om je pagina vorm te geven. Websites werden ook groter en dynamischer. Je kon nog onmogelijk elke pagina gaan slicen met behulp van Adobe ImageReady. Met de introductie van CSS ging er een heel nieuwe wereld open. Aan de hand van stylesheets kon je het visuele aspect van je website onderhouden en verbeteren.&lt;/p&gt;
  15364. &lt;p&gt;Op langere termijn werden verschillende nieuwe aspecten toegevoegd aan het ontwikkelen van websites en werd het takenpakket van de slicer enorm uitgebreid. Naast het gebruik van CSS kon je ook gebruik maken van JavaScript om je website van animaties te voorzien. Als je verder wilde gaan dan enkele simpele animaties deed je dat met Adobe Flash. Met een verder stijgende populariteit van het internet moest je je websites ook toegankelijk maken. Iedereen is immers welkom op jouw website. Niet te vergeten werd je website ook geïndexeerd door zoekmachines, die je ook tevreden diende te houden. De slicer evolueerde dus naar een persoon die meer deed dan de slice-tool van Adobe ImageReady te gebruiken. Als goede slicer had je dan ook de nodige kennis van HTML, CSS, JavaScript, Flash, toegankelijkheid, SEO...&lt;/p&gt;
  15365. &lt;p&gt;Elk van deze taken werd belangrijker in een website en ging vernieuwen. De moderne slicer maakt de dag van vandaag gebruik van HTML5 en CSS3. De mogelijkheden zijn enkel nog gelimiteerd door je eigen verbeelding. Bij wijze van spreken toch. Want een slicer moet niet enkel weten wat de mogelijkheden zijn maar ook het kennen van de compatibiliteit van deze specificaties in de verschillende browsers is enorm belangrijk.&lt;/p&gt;
  15366. &lt;h2&gt;De front-end developer&lt;/h2&gt;
  15367. &lt;p&gt;Je hoort al een tijdje spreken over een front-end developer, de moderne slicer. De front-end developer kreeg de laatste jaren een heel belangrijke rol in het hele proces. Hij (of zij) is een multifunctioneel persoon die de harmonie bewaart tussen het ontwerp en de back-end. Een ontwerper heeft meer te vertellen dan enkel een afbeelding. Het is aan de front-end developer om dit te begrijpen en verder te bouwen aan dit verhaal. Langs de andere kant moet hij ook zorgen dat alle functies van de back-end volledig benut worden om de bezoeker een optimale ervaring te bezorgen.&lt;/p&gt;
  15368. &lt;p&gt;Technologie staat niet stil, dat weten we al langer. Als front-end developer ga je niet enkel je kennis vergroten door ervaring, je gaat ook op zoek naar nieuwe best practices en nieuwe technieken. Je maakt graag gebruik van de laatste technologieën, maakt je websites responsive en nog meer toegankelijk (mobiel is ook een vorm van toegankelijkheid). Je gebruikt nu al zoveel mogelijk van de CSS3 specificaties en kijkt maar al te graag uit naar de dag dat je de meeste HTML5 API&#39;s dagelijks kan gebruiken. Met je uitgebreide kennis van JavaScript en zijn frameworks kan je je al perfect meten met desktopvarianten.&lt;/p&gt;
  15369. &lt;h2&gt;De uitdagingen van een front-end developer&lt;/h2&gt;
  15370. &lt;p&gt;Met de verdere groei van de sector wordt de rol van front-end developers nog belangrijker. Het is hun taak om de ontwerpen van de designers nog verder te vertalen naar een complete ervaring voor de bezoeker. Zeker naar de mobiele (en dus de responsive) markt is de impact enorm. Daarnaast gaan we ook andere soorten ontwikkelaars zien overstappen naar front-end development. Zo zien we nu al af en toe een Flash developer die meer gebruik gaat maken van HTML5 en CSS3 en zullen we ook game developers zien overschakelen naar HTML5 en WebGL. Ook Java developers zien gelijkenissen met client-side databases en Web Storage.&lt;/p&gt;
  15371. &lt;h2&gt;Nooit meer een slicer&lt;/h2&gt;
  15372. &lt;p&gt;Het is tijd dat we de woorden slicer, slice en slicing vergeten en schrappen uit ons woordenboek. Laten we een front-end developer nooit meer een slicer noemen. De titel &#39;front-end developer&#39; is ondertussen eentje waar je trots op mag zijn. Organisaties zoals Fronteers benadrukken dan ook dat deze titel niet zomaar voor iedereen is weggelegd. Iets wat mede door de komende 23 artikelen duidelijk zal worden.&lt;/p&gt;
  15373. &lt;h2&gt;Over Stijn Janssen&lt;/h2&gt;
  15374. &lt;img src=&quot;https://www.fronteers.nl/_img/2011/12/stijn-janssen.jpg&quot; alt=&quot;Foto van stijn janssen uit 2011&quot; class=&quot;floating-portrait&quot; /&gt;
  15375. Door de dag vermomd als webdeveloper bij [Inventis](http://www.inventis.be/), &#39;s avonds als freelance front-end developer bij [Recode](http://www.recode.be/). [Stijn](http://www.stijnjanssen.be/) is dag en nacht bezig met front-end development.
  15376. &lt;p&gt;Donatie: Project OSJOSMA
  15377. &lt;a href=&quot;http://www.osjosma.be/&quot;&gt;VZW Osjosma&lt;/a&gt; is een kleine organisatie die een weeshuis heeft gebouwd in Haïti. Ik ken het verhaal van de organisatie al een tijdje en het is een organisatie met duidelijke doelen en een mooie toekomstvisie. De hoofdzetel van de organisatie is amper 2 straten verder dan mijn woonst. Ik ben blij dat ik via deze weg de kinderen in het weeshuis mee kan steunen.&lt;/p&gt;
  15378. </content>
  15379.  </entry>
  15380.  <entry>
  15381.    <title>Adventskalender 2011</title>
  15382.    <link href="https://www.fronteers.nl/nl/blog/2011/11/adventskalender"/>
  15383.    <updated>2011-11-30T00:00:00Z</updated>
  15384.    <id>https://www.fronteers.nl/nl/blog/2011/11/adventskalender</id>
  15385.    <content xml:lang="nl" type="html">&lt;p&gt;Vanaf morgen verschijnt op ons weblog elke dag, tot aan kerst, een artikel gerelateerd aan front-end webtechnologieën. Bijna alle bijdragen voor &lt;a href=&quot;https://www.fronteers.nl/blog/categorieen/adventskalender&quot;&gt;deze adventskalender&lt;/a&gt; zijn geschreven door Fronteersleden.&lt;/p&gt;
  15386. &lt;p&gt;Middels de artikelen willen we de kennis binnen Fronteers verspreiden onder andere leden, en natuurlijk naar niet-leden. De artikelen hebben zeer diverse onderwerpen, zodat iedereen—zowel beginner als gevorderde—iets op kan steken van deze reeks.&lt;/p&gt;
  15387. &lt;p&gt;Elke schrijver heeft de mogelijkheid om 75 euro uit de verenigingskas te doneren aan een goed doel, waarvan de schrijver denkt dat die een hart onder de riem kan gebruiken deze kerst.&lt;/p&gt;
  15388. &lt;p&gt;Alle vierentwintig schrijvers, de editors en andere vrijwilligers kijken uit naar het eerste artikel dat morgen geplaatst zal worden.&lt;/p&gt;
  15389. &lt;h2&gt;Update, hieronder alle artikelen in deze reeks:&lt;/h2&gt;
  15390. &lt;ol&gt;
  15391. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/waarom-een-slicer-een-front-end-developer-is-geworden&quot;&gt;Waarom een slicer een front-end developer is geworden&lt;/a&gt; door Stijn Janssen&lt;/li&gt;
  15392. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/html5-video-een-overzicht&quot;&gt;HTML5 Video | Een overzicht&lt;/a&gt; door Jeroen Wijering&lt;/li&gt;
  15393. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/patronen-voor-de-groei&quot;&gt;Patronen voor de groei&lt;/a&gt; door Egor Kloos&lt;/li&gt;
  15394. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/webrichtlijnen-2-de-nieuwe-standaard&quot;&gt;Webrichtlijnen 2: de nieuwe standaard&lt;/a&gt; door Janita Top&lt;/li&gt;
  15395. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/acteurs-schilders-en-technici&quot;&gt;Acteurs, schilders en technici&lt;/a&gt; door Paul van Buuren&lt;/li&gt;
  15396. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/3d-graphics&quot;&gt;3D-graphics&lt;/a&gt; door Arjan Westerdiep&lt;/li&gt;
  15397. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/responsive-images-een-experiment&quot;&gt;Responsive images; een experiment&lt;/a&gt; door Roel Van Gils&lt;/li&gt;
  15398. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/front-end-meta-languages&quot;&gt;Front-end meta languages&lt;/a&gt; door Roy Tomeij&lt;/li&gt;
  15399. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/javascript-pret-met-alle-karakters-in-een-string&quot;&gt;JavaScript-pret met alle karakters in een string&lt;/a&gt; door Mathias Bynens&lt;/li&gt;
  15400. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/waarom-standaarden-essentieel-zijn&quot;&gt;Waarom standaarden essentieel zijn&lt;/a&gt; door Andreas Creten&lt;/li&gt;
  15401. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/een-tik-op-de-neus&quot;&gt;Een tik op de neus&lt;/a&gt; door Vasilis van Gemert&lt;/li&gt;
  15402. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/het-is-al-goud-wiens-cursor-blinkt&quot;&gt;Het is al goud wiens cursor blinkt&lt;/a&gt; door Jan Moesen&lt;/li&gt;
  15403. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/kijk-mama-zonder-afbeeldingen-grafische-elementen-maken-met-css&quot;&gt;Kijk mama, zonder afbeeldingen! Grafische elementen maken met CSS&lt;/a&gt; door Lennart Schoors&lt;/li&gt;
  15404. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/clients-from-heaven&quot;&gt;Clients from heaven&lt;/a&gt; door Ruben Bos&lt;/li&gt;
  15405. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/het-platform-bouwen&quot;&gt;Het platform bouwen&lt;/a&gt; door Anne van Kesteren&lt;/li&gt;
  15406. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/learn-you-a-flexbox-for-great-good&quot;&gt;Learn you a Flexbox for Great Good!&lt;/a&gt; door Stephen Hay&lt;/li&gt;
  15407. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/klaar-voor-de-mobiele-tsunami&quot;&gt;Klaar voor de mobiele tsunami&lt;/a&gt; door Peter-Paul Koch&lt;/li&gt;
  15408. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/geharnast-javascript&quot;&gt;Geharnast JavaScript&lt;/a&gt; door Tom Greuter&lt;/li&gt;
  15409. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/welkom-op-het-audiologische-internet&quot;&gt;Welkom op het Audiologische Internet&lt;/a&gt; door Peter Beverloo&lt;/li&gt;
  15410. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/deferred-en-promise-in-jquery&quot;&gt;Deferred en promise in jQuery&lt;/a&gt; door Edwin Martin&lt;/li&gt;
  15411. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/prototype-in-javascript&quot;&gt;Prototype in JavaScript&lt;/a&gt; door Peter van der Zee&lt;/li&gt;
  15412. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/scalable-vector-graphics-en-responsive-web&quot;&gt;Scalable Vector Graphics en responsive web&lt;/a&gt; door Jochen Vandendriessche&lt;/li&gt;
  15413. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/closure-tools&quot;&gt;Closure Tools&lt;/a&gt; door Johan Schuyt&lt;/li&gt;
  15414. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/dr-strangescope&quot;&gt;Dr. Strangescope or: How I Learned to Stop Worrying and Love the Closure&lt;/a&gt; door Arjan Eising&lt;/li&gt;
  15415. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/blog/2011/12/door-een-frobelaar&quot;&gt;Content management door de ogen van een vrolijke front-end fröbelaar&lt;/a&gt; door Krijn Hoetmer&lt;/li&gt;
  15416. &lt;/ol&gt;
  15417. </content>
  15418.  </entry>
  15419.  <entry>
  15420.    <title>Meld je aan voor de Algemene Ledenvergadering 2011</title>
  15421.    <link href="https://www.fronteers.nl/nl/blog/2011/11/meld-je-aan-voor-de-algemene-ledenvergadering-2011"/>
  15422.    <updated>2011-11-16T00:00:00Z</updated>
  15423.    <id>https://www.fronteers.nl/nl/blog/2011/11/meld-je-aan-voor-de-algemene-ledenvergadering-2011</id>
  15424.    <content xml:lang="nl" type="html">&lt;p&gt;Woensdag 7 december a.s. houden we onze jaarlijkse algemene ledenvergadering (ALV). De ALV vindt plaats in de op de 10e verdieping van de Regardztoren op Amsterdam C.S. (dit is het gebouw waar ook het Ibishotel in zit en waar de Fronteersmeeting bij Albumprinter plaatsvond). Het adres is Stationsplein 51-53 1012 AB Amsterdam. De zogeheten &amp;quot;Zilveren Toren&amp;quot; van Regardz zit pal naast Amsterdam Centraal Station. We beginnen om 19.00 uur en denken maximaal twee uur nodig te hebben.&lt;/p&gt;
  15425. &lt;p&gt;De agenda is als volgt:&lt;/p&gt;
  15426. &lt;ol&gt;
  15427. &lt;li&gt;Welkom en opening door de voorzitter&lt;/li&gt;
  15428. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  15429. &lt;li&gt;Terugblik 2011&lt;/li&gt;
  15430. &lt;li&gt;Ingebrachte beleidsvoorstellen&lt;/li&gt;
  15431. &lt;li&gt;Begroting&lt;/li&gt;
  15432. &lt;li&gt;Kascommissieverkiezing&lt;/li&gt;
  15433. &lt;li&gt;Bestuursverkiezing&lt;/li&gt;
  15434. &lt;li&gt;Rondvraag&lt;/li&gt;
  15435. &lt;li&gt;Sluiting&lt;/li&gt;
  15436. &lt;/ol&gt;
  15437. &lt;p&gt;De commissievoorzitters (of hun vervangers) geven een korte toelichting op het gedane werk in het afgelopen jaar en ontvouwen hun toekomstplannen voor 2012. Natuurlijk staan zij ook open voor vragen. Verder treden (in lijn met de statuten) drie bestuursleden af: Peter-Paul Koch, Krijn Hoetmer en Sander van Lambalgen. Zij zijn allen herkiesbaar.&lt;/p&gt;
  15438. &lt;p&gt;Het bestuur nodigt alle leden nadrukkelijk uit om vragen, ideeën of voorstellen in te dienen. De vereniging is van iedereen, en de koers bepalen we met zijn allen. Alles wat je kwijt wilt kun je melden via het &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contactformulier&lt;/a&gt;. Duik eens in de &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen&quot;&gt;notulen&lt;/a&gt; voor inspiratie.&lt;/p&gt;
  15439. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur&quot;&gt;Meld je zo gauw mogelijk aan voor de ALV&lt;/a&gt;, zodat wij ons enigzins een beeld kunnen vormen van de verwachte toeloop. Je komst is niet voor niks. Ten eerste bepaal je mede de koers van Fronteers in 2012, ten tweede scoor je die exclusieve Fronteersgadget die niemand anders heeft (onder voorbehoud). Samen reizen met iemand? Neem even contact op met de ledenadministratie en we koppelen jullie aan elkaar.&lt;/p&gt;
  15440. &lt;p&gt;Na afloop van de vergadering kunnen we op de 11e verdieping (met een indrukwekkend uitzicht over Amsterdam) tot 22.30 uur een biertje (en meer!) drinken.&lt;/p&gt;
  15441. </content>
  15442.  </entry>
  15443.  <entry>
  15444.    <title>Bijeenkomst op 8 december, in Groningen</title>
  15445.    <link href="https://www.fronteers.nl/nl/blog/2011/11/bijeenkomst-december-groningen"/>
  15446.    <updated>2011-11-14T00:00:00Z</updated>
  15447.    <id>https://www.fronteers.nl/nl/blog/2011/11/bijeenkomst-december-groningen</id>
  15448.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 8 december is Fronteers te gast bij &lt;a href=&quot;http://mediact.nl/&quot;&gt;mediaCT&lt;/a&gt; te Groningen. Vasilis van Gemert geeft een presentatie over Adaptive development, en Bas Rozema over Git.&lt;/p&gt;
  15449. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  15450. &lt;ul&gt;
  15451. &lt;li&gt;18.30 inloop&lt;/li&gt;
  15452. &lt;li&gt;19.30 Vasilis van Gemert over Adaptive development&lt;/li&gt;
  15453. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  15454. &lt;li&gt;20.45 Bas Rozema over Git&lt;/li&gt;
  15455. &lt;li&gt;21.45 borrelen&lt;/li&gt;
  15456. &lt;/ul&gt;
  15457. &lt;h2&gt;Adaptive development&lt;/h2&gt;
  15458. &lt;p&gt;In deze presentatie behandelt &lt;a href=&quot;http://vasilis.nl/&quot;&gt;Vasilis van Gemert&lt;/a&gt; van &lt;a href=&quot;http://mirabeau.nl/&quot;&gt;Mirabeau&lt;/a&gt; aan de hand van praktijkvoorbeelden verschillende technieken die in te zetten zijn bij het bouwen van adaptive layouts. Denk hierbij aan termen als em-based layouts, media-queries, re-alignment best practices en client-side adaptive image-replacement. Met andere woorden: echt flexibele websites die zich aanpassen aan het apparaat waarmee gekeken wordt.&lt;/p&gt;
  15459. &lt;h2&gt;Git&lt;/h2&gt;
  15460. &lt;p&gt;Versiebeheer, bah. Iedereen moet er wat mee, en niemand heeft er zin in. Toch moet je als zelfrespecterende webbouwer zorgen dat je versiehistorie benaderbaar is, dat je weet wie, wat, waar, wanneer iets heeft gewijzigd en waarom. Als je in een team werkt, zijn de voordelen wel duidelijk, je kunt niet onder versiebeheer uit. Gelukkig is er Git: een high-performance, gedistribueerd, easy-to-use versiebeheersysteem. Hoera! Iedereen aan de Git! Maar ben je er dan? Hoe ga je bijvoorbeeld om met doorontwikkeling van een bestaand project? Hoe ga je om met releases. Hoe doe je bugfixes op een manier waarop je tegelijkertijd maximaal flexibel bent en alles overzichtelijk houdt? Hoe support je een oudere versie van dezelfde software? De hamvraag is dus eigenlijk: hoe richt je je versiebeheerproces in en hoe houd je dat nou beheersbaar?&lt;/p&gt;
  15461. &lt;h2&gt;Bereikbaarheid en opgave&lt;/h2&gt;
  15462. &lt;p&gt;MediaCT is gevestigd aan Zuiderpark 22, 9724 AH Groningen, circa vijf minuten lopen vanaf station Groningen. Er is ruimte om te parkeren in de buurt. Zoals gebruikelijk is deze bijeenkomst gratis bij te wonen door zowel leden als niet-leden van Fronteers.&lt;/p&gt;
  15463. </content>
  15464.  </entry>
  15465.  <entry>
  15466.    <title>Workshop HTML/CSS op 16 november</title>
  15467.    <link href="https://www.fronteers.nl/nl/blog/2011/11/basiscursus-html-css"/>
  15468.    <updated>2011-11-07T00:00:00Z</updated>
  15469.    <id>https://www.fronteers.nl/nl/blog/2011/11/basiscursus-html-css</id>
  15470.    <content xml:lang="nl" type="html">&lt;p&gt;Naast geavanceerde workshops over front-endtechnieken wil Fronteers ook workshops aanbieden aan mensen die minder ervaring hebben met front-end ontwikkeling of er slechts zijdelings mee te maken hebben, zoals content managers. 16 november aanstaande geeft de ervaren docent Frances de Waal een basis workshop over HTML en CSS.&lt;/p&gt;
  15471. &lt;p&gt;Deze workshop is bedoeld voor mensen die al werken met HTML en CSS en basiskennis missen, maar ook voor mensen die er nog weinig van af weten en wel goed willen beginnen. Doel van de workshop is dat je in een text editor eenvoudige webpagina&#39;s kunt maken en vormgeven. Lees meer over deze cursus of meld je aan op de &lt;a href=&quot;https://www.fronteers.nl/workshops/html-css-frances-de-waal&quot;&gt;workshoppagina&lt;/a&gt;.&lt;/p&gt;
  15472. &lt;p&gt;Ben jij een ervaren front-end developer, maar ken jij mensen in je omgeving voor wie deze basiscursus raadzaam zou zijn? Schroom niet hem of haar op deze nieuwe Fronteerscursus te attenderen.&lt;/p&gt;
  15473. &lt;p&gt;Voor de fans van statistieken: dit jaar hebben we in totaal &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten&quot;&gt;11 workshops&lt;/a&gt; verzorgd, met 10 verschillende docenten. Hopelijk gaan we een paar van deze weer terug laten komen, maar als commissie zijn wel al ruim tevreden met het resultaat van dit jaar; we hadden zelf het idee om 4 tot 6 workshops te verzorgen.&lt;/p&gt;
  15474. &lt;p&gt;In december zullen we even geen workshops aanbieden, maar vanaf januari gaan we weer aan de bak.&lt;/p&gt;
  15475. </content>
  15476.  </entry>
  15477.  <entry>
  15478.    <title>Vooraankondiging ALV</title>
  15479.    <link href="https://www.fronteers.nl/nl/blog/2011/11/vooraankondiging-alv"/>
  15480.    <updated>2011-11-06T00:00:00Z</updated>
  15481.    <id>https://www.fronteers.nl/nl/blog/2011/11/vooraankondiging-alv</id>
  15482.    <content xml:lang="nl" type="html">&lt;p&gt;Blok deze datum in je agenda! Woensdag 7 december vindt de jaarlijkse Algemene Ledenvergadering van Fronteers plaats, om 19 uur nabij station Amsterdam CS.&lt;/p&gt;
  15483. &lt;p&gt;Leden bepalen mede de koers van Fronteers. Als lid van de vereniging heb je er recht op om te weten wat we het afgelopen jaar hebben gedaan en wat onze plannen zijn voor de toekomst. Kom daarom naar de Algemene Ledenvergadering (ALV) van Fronteers.&lt;/p&gt;
  15484. &lt;p&gt;We zullen stilstaan bij de activiteiten van de commissies, de begroting en de gebruikelijke stoelendans van het bestuur. Het volledige programma volgt nog.&lt;/p&gt;
  15485. &lt;p&gt;Om vast warm te draaien kun je je verdiepen in &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen/24-11-10&quot;&gt;de notulen van vorig jaar&lt;/a&gt;. Als je zaken aan de orde wilt stellen, voorstellen in wilt dienen of andere goede ideeën hebt, neem dan contact op met het bestuur, graag zelfs!&lt;/p&gt;
  15486. &lt;p&gt;We willen rond 19.00 uur beginnen en verwachten maximaal twee uur nodig te hebben. Daarna is er natuurlijk tijd voor een webstandaardenbiertje!&lt;/p&gt;
  15487. </content>
  15488.  </entry>
  15489.  <entry>
  15490.    <title>Bijeenkomst op 15 november, in Amsterdam</title>
  15491.    <link href="https://www.fronteers.nl/nl/blog/2011/10/bijeenkomst-booking-com"/>
  15492.    <updated>2011-10-27T00:00:00Z</updated>
  15493.    <id>https://www.fronteers.nl/nl/blog/2011/10/bijeenkomst-booking-com</id>
  15494.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 15 november is Fronteers te gast bij &lt;a href=&quot;http://booking.com/&quot;&gt;Booking.com&lt;/a&gt; in Amsterdam. Roy Tomeij zal spreken over Git voor front-enders, en Fabio Venni over webtypografie. Beide presentaties zullen in het Engels worden gegeven.&lt;/p&gt;
  15495. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  15496. &lt;ul&gt;
  15497. &lt;li&gt;18.30 inloop&lt;/li&gt;
  15498. &lt;li&gt;19.25 introductie Booking.com&lt;/li&gt;
  15499. &lt;li&gt;19.30 Roy Tomeij over Git&lt;/li&gt;
  15500. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  15501. &lt;li&gt;20.45 Fabio Venni over webtypografie&lt;/li&gt;
  15502. &lt;li&gt;21.45 borrelen&lt;/li&gt;
  15503. &lt;/ul&gt;
  15504. &lt;h2&gt;Git voor front-enders, door Roy Tomeij&lt;/h2&gt;
  15505. &lt;p&gt;Het is 2011 en je gebruikt geen versiebeheer? Dan is het hoog tijd om ermee te beginnen! Tijdens deze bijeenkomst legt Roy Tomeij uit waarom, hoe Git je leven een stuk makkelijker maakt en waarom GitHub zo goed werkt voor teams vanaf twee personen.&lt;/p&gt;
  15506. &lt;h2&gt;On typography, by Fabio Venni&lt;/h2&gt;
  15507. &lt;p&gt;A crash course on typography: the history, the theory, some techniques. A quick panorama of the factors that characterize a font and how they affect its aesthetics, style and readability. Understanding typographic color. Constrains that web typography have to consider. Sizing a font in CSS: creating a typographic scale. Web fonts and typography in the HTML5 era.&lt;/p&gt;
  15508. &lt;h2&gt;Bereikbaarheid en opgave&lt;/h2&gt;
  15509. &lt;p&gt;Booking.com is gevestigd aan Nieuwe Weteringstraat 36-38, 1017 SG te Amsterdam. De bijeenkomst is gratis bij te wonen voor zowel leden als niet-leden. Wel is gewenst dat je jezelf opgeeft via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/booking-com&quot;&gt;formulier op de bijeenkomstpagina&lt;/a&gt;.&lt;/p&gt;
  15510. </content>
  15511.  </entry>
  15512.  <entry>
  15513.    <title>Bijeenkomst op 24 november in Mechelen</title>
  15514.    <link href="https://www.fronteers.nl/nl/blog/2011/10/bijeenkomst-lessius"/>
  15515.    <updated>2011-10-26T00:00:00Z</updated>
  15516.    <id>https://www.fronteers.nl/nl/blog/2011/10/bijeenkomst-lessius</id>
  15517.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 24 november 2011 is Fronteers te gast binnen de opleiding &lt;a href=&quot;http://mechelen.lessius.eu/studeren-aan-de-khmechelen/bacheloropleidingen/informaticamanagement-en-multimedia/opleidingsparcours&quot;&gt;Interactive Multimedia Design&lt;/a&gt; bij Lessius Mechelen. Er worden twee presentaties voorzien. Eerst komt Thomas Byttebier praten over responsive webdesign; vervolgens zal &lt;a href=&quot;http://wolfslittlestore.be/&quot;&gt;Johan Ronsse&lt;/a&gt; wat vertellen over design vanuit het oogpunt van een developer.&lt;/p&gt;
  15518. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  15519. &lt;ul&gt;
  15520. &lt;li&gt;18:00 ontvangst — voor de hongerigen: er is een frituur vlakbij&lt;/li&gt;
  15521. &lt;li&gt;19:00 Thomas Byttebier over &lt;em&gt;responsive webdesign&lt;/em&gt;&lt;/li&gt;
  15522. &lt;li&gt;20:00 Johan Ronsse over &lt;em&gt;design voor web developers&lt;/em&gt;&lt;/li&gt;
  15523. &lt;li&gt;21:00 naborrelen (drank wordt voorzien)&lt;/li&gt;
  15524. &lt;/ul&gt;
  15525. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  15526. &lt;p&gt;Lessius Mechelen is gevestigd aan Zandpoortvest 60, 2800 Mechelen. Er is een plannetje beschikbaar op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/lessius&quot;&gt;de detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  15527. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  15528. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen.&lt;/p&gt;
  15529. </content>
  15530.  </entry>
  15531.  <entry>
  15532.    <title>Mobilism 2012: Fronteers kaarten</title>
  15533.    <link href="https://www.fronteers.nl/nl/blog/2011/10/mobilism-2012-fronteers-kaarten"/>
  15534.    <updated>2011-10-18T00:00:00Z</updated>
  15535.    <id>https://www.fronteers.nl/nl/blog/2011/10/mobilism-2012-fronteers-kaarten</id>
  15536.    <content xml:lang="nl" type="html">&lt;p&gt;Op 10 en 11 mei 2012 zal te Amsterdam &lt;a href=&quot;http://mobilism.nl/2012&quot;&gt;Mobilism 2012&lt;/a&gt; plaatsvinden, dat geheel gewijd zal zijn aan mobiele webontwikkeling. Een mooie en zich nog altijd ontwikkelende &lt;a href=&quot;http://mobilism.nl/2012/programme&quot;&gt;sprekerslijst&lt;/a&gt; staat garant voor een topcongres.&lt;/p&gt;
  15537. &lt;p&gt;Aangezien twee van de drie organisatoren Fronteers-bestuursleden zijn, hebben we voor Fronteers-leden die op dit moment lid zijn 15 kaarten gereserveerd voor 400 euro ex. BTW. Op dit moment zijn er nog &lt;a href=&quot;https://mobilism.paydro.net/&quot;&gt;kaartjes&lt;/a&gt; voor diezelfde prijs beschikbaar, maar dat zal snel afgelopen zijn. Vanaf dat moment is dit het beste aanbod dat je zult vinden.&lt;/p&gt;
  15538. &lt;p&gt;Als je een kaartje wilt bestellen en Fronteers lid bent, kun je een kortingscode opvragen middels een mailtje naar &lt;a href=&quot;mailto:krijn@fronteers.nl&quot;&gt;krijn@fronteers.nl&lt;/a&gt;.&lt;/p&gt;
  15539. &lt;p&gt;We hopen minstens 15 Fronteers leden te kunnen begroeten op 10 en 11 mei.&lt;/p&gt;
  15540. </content>
  15541.  </entry>
  15542.  <entry>
  15543.    <title>Bijeenkomst op 26 oktober, in Amsterdam</title>
  15544.    <link href="https://www.fronteers.nl/nl/blog/2011/10/bijeenkomst-oktober"/>
  15545.    <updated>2011-10-17T00:00:00Z</updated>
  15546.    <id>https://www.fronteers.nl/nl/blog/2011/10/bijeenkomst-oktober</id>
  15547.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 26 oktober is Fronteers te gast bij &lt;a href=&quot;http://albumprinter.org/&quot;&gt;Albumprinter&lt;/a&gt;, gevestigd dichtbij Amsterdam Centraal Station. Er zijn twee sprekers: Bram Duvigneau geeft een presentatie over webtoegankelijkheid, en Arjan Eising vertelt over de huidige en toekomstige staat van CSS Selectors.&lt;/p&gt;
  15548. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  15549. &lt;ul&gt;
  15550. &lt;li&gt;18.30 inloop&lt;/li&gt;
  15551. &lt;li&gt;19.20 korte introductie van Albumprinter&lt;/li&gt;
  15552. &lt;li&gt;19.30 Bram Duvigneau over webtoegankelijkheid&lt;/li&gt;
  15553. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  15554. &lt;li&gt;20.45 Arjan Eising over CSS Selectors&lt;/li&gt;
  15555. &lt;li&gt;21.45 borrelen&lt;/li&gt;
  15556. &lt;/ul&gt;
  15557. &lt;h2&gt;CSS Selectors, door Arjan Eising&lt;/h2&gt;
  15558. &lt;p&gt;CSS Selectors, de stille kracht achter elke stylesheet. Met de komst van CSS Selectors level 3, en de browsers die het tegenwoordig allemaal ondersteunen, zijn we met enkele slimme selectors in staat &#39;krachtige&#39; stijlen toe te passen. Daar komt nu een nieuwe set bij: CSS Selectors level 4, waarin vele handige selectors worden toegevoegd. &lt;a href=&quot;http://arjaneising.nl/&quot;&gt;Arjan Eising&lt;/a&gt; licht alles hierover toe in deze presentatie.&lt;/p&gt;
  15559. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  15560. &lt;p&gt;Albumprinter is gevestigd aan Stationsplein 53 - 57, 1012 AB Amsterdam.&lt;/p&gt;
  15561. &lt;p&gt;Zoals gebruikelijk is deze bijeenkomst gratis toegankelijk voor zowel ledfen als niet-leden van Fronteers. Wel is gewenst dat je jezelf opgeeft via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/albumprinter&quot;&gt;formulier op de bijeenkomstpagina&lt;/a&gt;.&lt;/p&gt;
  15562. </content>
  15563.  </entry>
  15564.  <entry>
  15565.    <title>Fronteers 2011: Awesome!</title>
  15566.    <link href="https://www.fronteers.nl/nl/blog/2011/10/fronteers-2011-awesome"/>
  15567.    <updated>2011-10-10T00:00:00Z</updated>
  15568.    <id>https://www.fronteers.nl/nl/blog/2011/10/fronteers-2011-awesome</id>
  15569.    <content xml:lang="nl" type="html">&lt;p&gt;Er is al een &lt;a href=&quot;http://twitter.com/search/%23fronteers11%20OR%20FronteersConf&quot;&gt;hoop over geschreven op Twitter&lt;/a&gt;, maar &lt;a href=&quot;https://www.fronteers.nl/congres/2011&quot;&gt;Fronteers 2011&lt;/a&gt; was weer een succes. In totaal hebben &lt;a href=&quot;https://www.fronteers.nl/congres/2011/attendees&quot;&gt;500 bezoekers&lt;/a&gt; genoten van &lt;a href=&quot;https://www.fronteers.nl/congres/2011/sessions&quot;&gt;14 presentaties&lt;/a&gt; van &lt;a href=&quot;https://www.fronteers.nl/congres/2011/speakers&quot;&gt;14 gepassioneerde sprekers&lt;/a&gt;. Wat een sfeer dit jaar, wow! Onze dank gaat uit naar alle vrijwilligers en sprekers die hier aan hebben meegeholpen. Hieronder een overzichtje met links naar (bijna) alle presentaties. In de komende dagen/weken zullen ook alle video&#39;s online komen.&lt;/p&gt;
  15570. &lt;ul&gt;
  15571. &lt;li&gt;Aral Balkan, The Future is Native&lt;/li&gt;
  15572. &lt;li&gt;Derek Featherstone, Accessibility for the Modern Web&lt;/li&gt;
  15573. &lt;li&gt;Lea Verou, &lt;a href=&quot;http://leaverou.me/css3-secrets/#intro&quot;&gt;CSS3 Secrets: 10 things you might not know about CSS3&lt;/a&gt;, &lt;a href=&quot;http://www.slideshare.net/LeaVerou/css3-secrets-10-things-you-might-not-know-about-css3&quot;&gt;Slideshare&lt;/a&gt;, &lt;a href=&quot;http://speakerdeck.com/u/leaverou/p/css3-secrets-10-things-you-might-not-know-about-css3&quot;&gt;Speaker Deck&lt;/a&gt;&lt;/li&gt;
  15574. &lt;li&gt;Bruce Lawson, &lt;a href=&quot;http://www.slideshare.net/brucelawson/you-too-can-be-a-bedwetting-antfucker-bruce-lawson-opera-fronteers-2011&quot;&gt;HTML5 Semantics: you too can be a bedwetting antfucker&lt;/a&gt;&lt;/li&gt;
  15575. &lt;li&gt;Stephen Hay, &lt;a href=&quot;http://www.slideshare.net/stephenhay/go-with-the-flow-9595283&quot;&gt;Go with the flow
&lt;/a&gt;&lt;/li&gt;
  15576. &lt;li&gt;Tab Atkins, &lt;a href=&quot;http://www.xanthir.com/talks/2011-10-06/&quot;&gt;The Future of CSS - Current Experiments and Near-Future Reality
&lt;/a&gt;&lt;/li&gt;
  15577. &lt;li&gt;Leslie Jensen-Inman, &lt;a href=&quot;http://speakerdeck.com/u/jenseninman/p/passion-purpose-promise-pursuit&quot;&gt;Passion. Purpose. Promise. Pursuit.&lt;/a&gt;&lt;/li&gt;
  15578. &lt;li&gt;Alex Russell, &lt;a href=&quot;http://infrequently.org/11/fronteers/fronteers.html&quot;&gt;Data, Semantics, &amp;amp; The Process of Progress slides&lt;/a&gt;, &lt;a href=&quot;http://infrequently.org/11/fowa/demos/shadow-dom-demo/&quot;&gt;code examples&lt;/a&gt;&lt;/li&gt;
  15579. &lt;li&gt;Divya Manian, &lt;a href=&quot;http://nimbu.in/fronteers/#intro&quot;&gt;The New Developer Workflow
&lt;/a&gt;, 
&lt;a href=&quot;https://github.com/nimbupani/compass-demos&quot;&gt;Compass demo&lt;/a&gt;, &lt;a href=&quot;https://github.com/robbyrussell/oh-my-zsh&quot;&gt;
Terminal skin&lt;/a&gt;&lt;/li&gt;
  15580. &lt;li&gt;Robert Nyman, &lt;a href=&quot;http://www.slideshare.net/robnyman/html5-forms-kiss-time-fronteers&quot;&gt;HTML5 Forms - KISS time
&lt;/a&gt;, &lt;a href=&quot;http://speakerdeck.com/u/robnyman/p/html5-forms-kiss-time-fronteers&quot;&gt;Speaker Deck&lt;/a&gt;&lt;/li&gt;
  15581. &lt;li&gt;Seb Lee-Delisle, CreativeJS - beauty in the browser, &lt;a href=&quot;https://github.com/sebleedelisle/JavaScript-PixelPounding-demos&quot;&gt;code examples&lt;/a&gt;&lt;/li&gt;
  15582. &lt;li&gt;John Resig, jQuery and the Open Source Process&lt;/li&gt;
  15583. &lt;li&gt;Jake Archibald, &lt;a href=&quot;http://speakerdeck.com/u/jaffathecake/p/in-your-font-face&quot;&gt;In your &lt;code&gt;@font-face
&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  15584. &lt;li&gt;Christian Heilmann, &lt;a href=&quot;http://www.slideshare.net/cheilmann/the-prestige-of-being-a-web-developer&quot;&gt;The prestige of being a web developer&lt;/a&gt;, &lt;a href=&quot;http://www.slideshare.net/cheilmann/the-prestige-of-being-a-web-developer-no-notes&quot;&gt;zonder notes&lt;/a&gt;&lt;/li&gt;
  15585. &lt;/ul&gt;
  15586. &lt;p&gt;(Dank aan Darius Kruythoff voor het maken van deze lijst)&lt;/p&gt;
  15587. &lt;p&gt;Een &lt;a href=&quot;http://vimeo.com/30617937&quot;&gt;compilatievideo van het congres&lt;/a&gt; is te vinden op Vimeo. Binnenkort volgen ook alle sessies online!&lt;/p&gt;
  15588. &lt;p&gt;Wat vond jij bijzonder goed of bedroevend slecht gaan? Laat het ons weten via Twitter (#fronteers11), onderstaande reacties of &lt;a href=&quot;http://forum.fronteers.nl/topic/23/fronteers11/&quot;&gt;het forum&lt;/a&gt;.&lt;/p&gt;
  15589. &lt;p&gt;Tot volgend jaar!&lt;/p&gt;
  15590. </content>
  15591.  </entry>
  15592.  <entry>
  15593.    <title>WCAG 2.0 : Betekenisvolle volgorde</title>
  15594.    <link href="https://www.fronteers.nl/nl/blog/2011/09/wcag-2-0-betekenisvolle-volgorde"/>
  15595.    <updated>2011-09-16T00:00:00Z</updated>
  15596.    <id>https://www.fronteers.nl/nl/blog/2011/09/wcag-2-0-betekenisvolle-volgorde</id>
  15597.    <content xml:lang="nl" type="html">&lt;p&gt;Van volgorde van belangrijkheid naar betekenisvolle volgorde.&lt;/p&gt;
  15598. &lt;p&gt;In Webrichtlijnen 1 is er de omstreden richtlijn &lt;em&gt;Zet de inhoud van de pagina in de HTML broncode op volgorde van belangrijkheid&lt;/em&gt; (R-pd.6.2). Hier is veel over gediscussieerd, o.a. &lt;a href=&quot;https://www.fronteers.nl/blog/2008/05/webrichtlijnen-volgorde-van-belangrijkheid&quot;&gt;hier op site&lt;/a&gt;.&lt;/p&gt;
  15599. &lt;p&gt;In Webrichtlijnen 2/WCAG2.0 is er &lt;a href=&quot;http://versie2.webrichtlijnen.nl/documentatie/1.3.2/&quot;&gt;Successcriterium 1.3.2&lt;/a&gt;: &lt;em&gt;Betekenisvolle volgorde: Als de volgorde waarin content wordt gepresenteerd van invloed is op zijn betekenis, kan een betekenisvolle leesvolgorde door software bepaald worden.&lt;/em&gt;&lt;/p&gt;
  15600. &lt;p&gt;Dit is flexibeler, omdat er niet meer voorgeschreven wordt wat (als er overeenstemming is over wat het belangrijkst is) boven of verder naar beneden in de html-structuur moet staan. Er is alleen de voorwaarde dat de onderdelen die door een user agent door elkaar gegooid kunnen worden, de betekenis niet veranderen. Duidelijk, toch?&lt;/p&gt;
  15601. &lt;p&gt;[Update 09-10-2011:]
  15602. Dus als je met css een visuele volgorde creëert, en die verandert wanneer je de site leest met een screenreader (zonder css), of je ziet alleen bepaalde content van die pagina terug in bijvoorbeeld een news-feed, dan moet het nog steeds begrijpelijk zijn.&lt;/p&gt;
  15603. &lt;p&gt;Op het Fronteers congres afgelopen week was er in de presentatie van &lt;a href=&quot;http://www.brucelawson.co.uk/&quot;&gt;Bruce Lawson&lt;/a&gt; een mooi voorbeeld van waar dit mis kan gaan &lt;em&gt;binnen een tekst&lt;/em&gt;, namelijk als een deel van de tekst een andere richting heeft en dit niet in de mark-up wordt aangegeven. In HTML5 is daar nu het &lt;bdi&gt; element voor. Zie &lt;a href=&quot;http://rishida.net/blog/?p=564,%20follow%20@r12a&quot;&gt;deze use case&lt;/a&gt;. WCAG2.0 adviseert hiervoor het gebruik van Unicode right-to-left marks, maar dit schijnt nog wel eens problemen te geven in zoekopdrachten.&lt;/bdi&gt;&lt;/p&gt;
  15604. </content>
  15605.  </entry>
  15606.  <entry>
  15607.    <title>Bijeenkomst op 15 september, in Rotterdam</title>
  15608.    <link href="https://www.fronteers.nl/nl/blog/2011/09/bijeenkomst-september-lunatech"/>
  15609.    <updated>2011-09-05T00:00:00Z</updated>
  15610.    <id>https://www.fronteers.nl/nl/blog/2011/09/bijeenkomst-september-lunatech</id>
  15611.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 15 september is Fronteers te gast bij &lt;a href=&quot;http://www.lunatech-research.com/&quot;&gt;Lunatech Research&lt;/a&gt; in Rotterdam. Egor Kloos vertelt over enterprise front-end code, en Jeroen Wijering gaat ons een update geven van de huidige stand van zaken op het gebied van web video.&lt;/p&gt;
  15612. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  15613. &lt;ul&gt;
  15614. &lt;li&gt;18.00 inloop&lt;/li&gt;
  15615. &lt;li&gt;19.00 Egor Kloos over enterprise front-end code&lt;/li&gt;
  15616. &lt;li&gt;20.00 korte pauze&lt;/li&gt;
  15617. &lt;li&gt;20.15 Jeroen Wijering over de huidige stand van zaken m.b.t. web video&lt;/li&gt;
  15618. &lt;li&gt;21.15 borrelen&lt;/li&gt;
  15619. &lt;/ul&gt;
  15620. &lt;p&gt;&lt;a href=&quot;http://dutchcelt.nl/&quot;&gt;Egor Kloos&lt;/a&gt; is een ontwerper bij &lt;a href=&quot;http://www.lunatech-research.nl/&quot;&gt;Lunatech Research&lt;/a&gt; en helpt met het maken van web applicaties voor zowel consumenten als voor de zakelijke markt (Enterprise). User Experience en een multi platform Web zijn hierbij belangrijke uitgangspunten. In deze Rotterdamse editie van Fronteers gaat hij het o.a. hebben over Enterprise &amp;amp; Front-end. De perceptie is dat de ‘Enterprise’ over het integreren van services gaat en daarom niets te maken heeft met de front-end. &amp;quot;Dat regelt de framework (JSF, ASP.NET etc.) toch?&amp;quot;. De opkomst van UX wordt door deze IT bedrijven als vervelend gezien omdat zij nu wel iets met de front-end moeten. Het blijkt een kwestie van een aantal zaken er bij leren en vooral een aantal zaken afleren.&lt;/p&gt;
  15621. &lt;p&gt;Jeroen Wijering is de ontwikkelaar achter de succesvolle JW Player, die wordt gebruikt op miljoenen websites wereldwijd (zie &lt;a href=&quot;http://whoisjw.tv/&quot;&gt;whoisjw.tv&lt;/a&gt;). In deze presentatie behandelt hij de opkomst van HTML5 voor online video, de huidige stand van zaken en de voor- en nadelen ten opzichte van Flash. Ook het uitserveren van video naar mobiel (Android, iPad, iPhone) komt aan bod: wat werkt wel en niet op welk apparaat en waar moet de ontwikkelaar in het algemeen rekening mee houden.&lt;/p&gt;
  15622. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  15623. &lt;p&gt;Lunatech Research is gevestigd aan Heemraadssingel 70, 3021 DD Rotterdam. Er is een &lt;a href=&quot;http://www.lunatech-research.nl/contact&quot;&gt;plattegrond beschikbaar op hun website&lt;/a&gt;.&lt;/p&gt;
  15624. &lt;p&gt;Zoals gebruikelijk is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden van Fronteers. Wel is het gewenst dat je jezelf opgeeft via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/lunatech-research&quot;&gt;formulier op de bijeenkomstpagina&lt;/a&gt;.&lt;/p&gt;
  15625. </content>
  15626.  </entry>
  15627.  <entry>
  15628.    <title>Bijeenkomst op 22 september in Brussel</title>
  15629.    <link href="https://www.fronteers.nl/nl/blog/2011/08/bijeenkomst-namahn"/>
  15630.    <updated>2011-08-31T00:00:00Z</updated>
  15631.    <id>https://www.fronteers.nl/nl/blog/2011/08/bijeenkomst-namahn</id>
  15632.    <content xml:lang="nl" type="html">&lt;p&gt;Op 22 september organiseren we voor de vijfde keer een Fronteers-bijeenkomst in België. Na een &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/aspace&quot;&gt;succesvolle editie in Antwerpen&lt;/a&gt;, is ons oog nu gevallen op de prachtige ‘Open Space’ van Namahn in Brussel. Hier kunnen we maar liefst 45 deelnemers verwelkomen.&lt;/p&gt;
  15633. &lt;p&gt;Deze editie staat helemaal in het teken van CSS. &lt;a href=&quot;http://lensco.be/&quot;&gt;Lennart Schoors&lt;/a&gt; is onze eerste spreker. Hij &lt;strike&gt;is&lt;/strike&gt; &lt;strong&gt;was tot voor kort&lt;/strong&gt; Lead Web Designer bij &lt;a href=&quot;http://www.netlog.com/&quot;&gt;Netlog&lt;/a&gt; en is nu freelancer. Zijn presentatie is getiteld ‘Look ma! No images!’. Daarna komt &lt;a href=&quot;http://bdc.vc/&quot;&gt;Benjamin De Cock&lt;/a&gt; spreken over CSS Animations. Benjamin is een interface-designer met een oog voor detail waar velen jaloers op zijn.&lt;/p&gt;
  15634. &lt;p&gt;Opgelet: zowel Benjamin — die Franstalig is — als Lennart zullen in het Engels presenteren.&lt;/p&gt;
  15635. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  15636. &lt;ul&gt;
  15637. &lt;li&gt;18:00: Ontvangst met drank en broodjes&lt;/li&gt;
  15638. &lt;li&gt;19:00: Lennart Schoors: ‘Look ma, no images!’&lt;/li&gt;
  15639. &lt;li&gt;19:45: Pauze&lt;/li&gt;
  15640. &lt;li&gt;20:15: Benjamin De Cock: ‘CSS Animations’&lt;/li&gt;
  15641. &lt;li&gt;21:00: Naborrelen met een drankje, gesponsord door &lt;a href=&quot;http://www.bloovi.be/&quot;&gt;Bloovi&lt;/a&gt; (Vacaturewebsite van en voor internetspecialisten)&lt;/li&gt;
  15642. &lt;/ul&gt;
  15643. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  15644. &lt;p&gt;Namahn is gevestigd aan de Grensstraat 21 te 1210 Brussel. Er is een plannetje beschikbaar op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/namahn&quot;&gt;de detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  15645. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  15646. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 45 mannen en vrouwen.&lt;/p&gt;
  15647. </content>
  15648.  </entry>
  15649.  <entry>
  15650.    <title>Workshops update augustus</title>
  15651.    <link href="https://www.fronteers.nl/nl/blog/2011/08/cursussen-update-augustus"/>
  15652.    <updated>2011-08-29T00:00:00Z</updated>
  15653.    <id>https://www.fronteers.nl/nl/blog/2011/08/cursussen-update-augustus</id>
  15654.    <content xml:lang="nl" type="html">&lt;p&gt;Na bijna twee maanden zonder workshops is het weer tijd voor een update en er is genoeg te melden. Als ik zeg zonder workshops dan bedoel ik eigenlijk zonder workshops in Nederland, want op 19 augustus heeft Jan Moesen in België de eerste Vlaamse Fronteers workshop gegeven. Het onderwerp was misschien op het eerste gezicht voor front-end ontwikkelaars wat minder toegankelijk, maar de workshop was desondanks een succes. Tussen de droge Vlaamse humor door hebben de aanwezigen waaronder ondergetekende een boel opgestoken.&lt;/p&gt;
  15655. &lt;p&gt;Vandaag, 30 augustus, geeft Jeroen Visser zijn workshop &lt;a href=&quot;https://www.fronteers.nl/workshops/counter-space-jeroen-visser&quot;&gt;Counter Space&lt;/a&gt; over web typografie. Mocht je hier aan deel hebben willen nemen maar is het je ontgaan dat hij gegeven werd, laat ons dan alsjeblieft weten hoe we je hadden kunnen bereiken. Workshops worden over het algemeen als eerste via het Twitter account van Fronteers &lt;a href=&quot;https://twitter.com/fronteers&quot;&gt;@fronteers&lt;/a&gt; aangekondigd. Daarnaast kun je &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten&quot;&gt;fronteers.nl/workshops&lt;/a&gt; in de gaten houden, je abonneren op de workshops newsfeed (onderaan die pagina) en het blog bijhouden.&lt;/p&gt;
  15656. &lt;p&gt;Over alweer twee weken, op 13 september, zal Arjan Eising een workshop &lt;a href=&quot;https://www.fronteers.nl/workshops/jquery-inception-arjan-eising&quot;&gt;jQuery Inception&lt;/a&gt; geven. Hardcore JavaScripters zullen hier waarschijnlijk niet veel bij kunnen leren maar als je wilt beginnen met JavaScript of jQuery beter onder de knie wilt krijgen dan is deze workshop een aanrader. Inschrijven kan &lt;a href=&quot;https://www.fronteers.nl/workshops/jquery-inception-arjan-eising&quot;&gt;onderaan de pagina&lt;/a&gt;.&lt;/p&gt;
  15657. &lt;p&gt;Een weekje later, op 20 september zal Stephen Hay een workshop geven over prototyping genaamd Rabid Prototyping. Trek je van de naam niet zo heel veel aan, inentingen tegen hondsdolheid zullen niet nodig zijn. De focus van deze workshop ligt met name op snel prototypen met JavaScript en template layout. Bekijk &lt;a href=&quot;https://www.fronteers.nl/workshops/rabid-prototyping-stephen-hay&quot;&gt;de workshop pagina&lt;/a&gt; voor meer informatie.&lt;/p&gt;
  15658. &lt;p&gt;Tot slot hebben we geconstateerd dat de aanmeldingen voor cursussen wat terug lijken te lopen. In eerste instantie wijten we dit met name aan de rustige vakantieperiode. Het is echter ook goed mogelijk dat er een andere reden voor is. Misschien dat de doelgroep wat verzadigd begint te raken of is er behoefte aan andere onderwerpen. Mocht je hier ideeën, op- en/of aanmerkingen over hebben, aarzel dan alsjeblieft niet hieronder een reactie achter te laten.&lt;/p&gt;
  15659. </content>
  15660.  </entry>
  15661.  <entry>
  15662.    <title>Bijeenkomst 25 augustus op andere locatie</title>
  15663.    <link href="https://www.fronteers.nl/nl/blog/2011/08/bijeenkomst-andere-locatie"/>
  15664.    <updated>2011-08-24T00:00:00Z</updated>
  15665.    <id>https://www.fronteers.nl/nl/blog/2011/08/bijeenkomst-andere-locatie</id>
  15666.    <content xml:lang="nl" type="html">&lt;p&gt;De Fronteers bijeenkomst die morgen, 25 augustus, bij &lt;a href=&quot;http://travelgroep.nl/&quot;&gt;Travelgroep&lt;/a&gt; gehouden zou gaan worden, vindt plaats bij het kantoor van &lt;a href=&quot;http://springest.nl/&quot;&gt;Springest&lt;/a&gt; aan het Rokin in Amsterdam. Dit wegens het niet beschikbaar zijn van de locatie van Travelgroep. De sprekers blijven ongewijzigd: Reinier Linthorst Homan praat over zoekmachineoptimalisatie, en Ruslan Matveev zal een Engelstalig praatje houden over het door hem gebouwde jPath.&lt;/p&gt;
  15667. &lt;p&gt;Meer informatie is beschikbaar op de &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/travelgroep&quot;&gt;detailpagina&lt;/a&gt;, waar je jezelf ook op kunt geven. Springest is gevestigd aan Rokin 75, 1012 KL Amsterdam. De bijeenkomst wordt gehouden op de zesde verdieping. Tot morgen!&lt;/p&gt;
  15668. </content>
  15669.  </entry>
  15670.  <entry>
  15671.    <title>Nu online: de Fronteers webshop</title>
  15672.    <link href="https://www.fronteers.nl/nl/blog/2011/08/fronteers-webshop"/>
  15673.    <updated>2011-08-22T00:00:00Z</updated>
  15674.    <id>https://www.fronteers.nl/nl/blog/2011/08/fronteers-webshop</id>
  15675.    <content xml:lang="nl" type="html">&lt;p&gt;De &lt;a href=&quot;http://fronteers.spreadshirt.nl/&quot;&gt;webshop&lt;/a&gt; van Fronteers is vorige week online gegaan, met onder andere Fronteers-branded t-shirts, laptophoezen en—must-have voor de echte webstandaardenliefhebbers—een &lt;a href=&quot;http://www.zeldman.com/2010/11/28/dont-forget-blue-beanie-day/&quot;&gt;Blue Beanie&lt;/a&gt;.&lt;/p&gt;
  15676. &lt;p&gt;De shop wordt gehost en gerund door Spreadshirt: zij drukken en distribueren de producten. Voor vragen over producten en levering kun je dus terecht bij hun klantenservice.&lt;/p&gt;
  15677. &lt;p&gt;Niet genoeg keuze? Ideeën voor nieuwe ontwerpen of teksten zijn altijd welkom, en kunnen worden gestuurd naar marketing@fronteers.nl. Ook verzoekjes voor andere producten zijn welkom op dit adres en zullen door de marketingcommissie serieus worden overwogen. Het is de bedoeling dat we in de toekomst nieuwe Fronteers-producten aan de shop blijven toevoegen.&lt;/p&gt;
  15678. &lt;p&gt;Voor alle producten willen we regelmatig nieuwe ontwerpen blijven toevoegen, en daarmee zullen de oude ontwerpen weer verdwijnen. Wacht dus niet te lang en bestel snel.&lt;/p&gt;
  15679. &lt;p&gt;&lt;em&gt;Update:&lt;/em&gt; &lt;a href=&quot;https://twitter.com/eising/status/105219979581997056&quot;&gt;Enkele&lt;/a&gt; &lt;a href=&quot;https://twitter.com/hedwygNL/status/104527705491513344&quot;&gt;leden&lt;/a&gt; &lt;a href=&quot;https://twitter.com/rowdyrabouw/status/104212896501858304&quot;&gt;hebben&lt;/a&gt; hun shirts binnen.&lt;/p&gt;
  15680. </content>
  15681.  </entry>
  15682.  <entry>
  15683.    <title>Bijeenkomst op 25 augustus, in Amsterdam</title>
  15684.    <link href="https://www.fronteers.nl/nl/blog/2011/08/bijeenkomst-augustus"/>
  15685.    <updated>2011-08-04T00:00:00Z</updated>
  15686.    <id>https://www.fronteers.nl/nl/blog/2011/08/bijeenkomst-augustus</id>
  15687.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 25 augustus is Fronteers welkom bij &lt;a href=&quot;http://travelgroep.nl/&quot;&gt;Travelgroep&lt;/a&gt; in Amsterdam. Reinier Linthorst Homan vertelt over zoekmachineoptimalisatie, en Ruslan Matveev zal een Engelstalig praatje houden over het door hem gebouwde jPath.&lt;/p&gt;
  15688. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  15689. &lt;ul&gt;
  15690. &lt;li&gt;18.30 inloop&lt;/li&gt;
  15691. &lt;li&gt;19.30 Reinier over zoekmachine optimalisatie&lt;/li&gt;
  15692. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  15693. &lt;li&gt;20.45 Ruslan over jPath&lt;/li&gt;
  15694. &lt;li&gt;21.45 borrelen&lt;/li&gt;
  15695. &lt;/ul&gt;
  15696. &lt;h2&gt;Zoekmachineoptimalisatie&lt;/h2&gt;
  15697. &lt;p&gt;Google is een machtige speler op het internet. Met diverse technieken probeert het boven Facebook en Bing te blijven. Toch zijn resultaten die de zoekmachine teruggeeft gedateerd. Reinier, oprichter van Travelgroep, vertelt hoe Google de komende tijd de baas blijft.&lt;/p&gt;
  15698. &lt;h2&gt;Building native cross - platform applications with JavaScript and jPath.&lt;/h2&gt;
  15699. &lt;p&gt;[Talk in English] jPath is a platform for developing cross - platform native applications using JavaScript and HTML that is based on WebKit and jQuery and allows you to develop native applications that runs under Windows, MacOSX and Linux using HTML, JavaScript and CSS.&lt;/p&gt;
  15700. &lt;h2&gt;Bereikbaarheid en opgave&lt;/h2&gt;
  15701. &lt;p&gt;--Het is nog enigszins onduidelijk waar de bijeenkomst plaats gaat vinden, omdat Travelgroep gaat verhuizen. Momenteel is het gevestigd aan de Keizersgracht 630, 1017 ER Amsterdam. Mocht de lokatie gewijzigd zijn, dan zal dat op deze pagina aangekondigd worden.-- Update: de bijeenkomst vindt plaats bij Springest, gevestigd aan Rokin 75, 1012 KL Amsterdam op de zesde verdieping.&lt;/p&gt;
  15702. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis toegankelijk voor zowel leden als niet-leden.&lt;/p&gt;
  15703. </content>
  15704.  </entry>
  15705.  <entry>
  15706.    <title>WCAG 2.0: Blokken omzeilen met of zonder skip links</title>
  15707.    <link href="https://www.fronteers.nl/nl/blog/2011/07/wcag-2-0-blokken-omzeilen"/>
  15708.    <updated>2011-07-31T00:00:00Z</updated>
  15709.    <id>https://www.fronteers.nl/nl/blog/2011/07/wcag-2-0-blokken-omzeilen</id>
  15710.    <content xml:lang="nl" type="html">&lt;p&gt;Ze staan er nog steeds in, de skip links, bovenaan bij de afdoende technieken voor het WCAG2.0 succescriterium 2.4.1. Blokken omzeilen: Er is een mechanisme beschikbaar om blokken content die op meerdere webpagina&#39;s worden herhaald te omzeilen. (Niveau A). Is het echt nog nodig met al onze semantische markup en html5 om hiervoor nog extra markup toe te voegen?&lt;/p&gt;
  15711. &lt;p&gt;&lt;a href=&quot;http://www.w3.org/WAI/WCAG20/quickref/#qr-navigation-mechanisms-skip&quot;&gt;Hoe te voldoen aan succescriterium 2.4.1&lt;/a&gt;&lt;/p&gt;
  15712. &lt;p&gt;Ik had de hoop dat met het gebruik van html5-elementen zoals &lt;code&gt;nav&lt;/code&gt; en &lt;code&gt;section&lt;/code&gt; of &lt;code&gt;article&lt;/code&gt; en aria roles zoals &lt;code&gt;navigation&lt;/code&gt; en &lt;code&gt;main&lt;/code&gt; die skip links wel een keer overbodig zouden worden. Helaas ondersteunen screen readers – in combinatie met browsers – deze elementen en roles nog slecht, zoals in &lt;a href=&quot;http://www.accessibleculture.org/research/html5-aria-2011/&quot;&gt;dit artikel&lt;/a&gt;  wordt beschreven.&lt;/p&gt;
  15713. &lt;p&gt;Gelukkig kun je het ook oplossen met headings. En een goede headingstructuur maak je sowieso, dus dan ben je meteen klaar, toch? Screenreader gebruikers kunnen dan een lijst met links gemakkelijk overslaan. Maar bezoekers die visueel navigeren via de tab toets moeten dan nog wel alle links bij langs. Toch weer skip links dus...?&lt;/p&gt;
  15714. &lt;p&gt;En hoe zit dat eigenlijk met het &lt;a href=&quot;http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H50&quot;&gt;map element&lt;/a&gt; voor het groeperen voor links? Gebruikt iemand dat wel eens?&lt;/p&gt;
  15715. </content>
  15716.  </entry>
  15717.  <entry>
  15718.    <title>Workshop Terminally Chill op 19 augustus</title>
  15719.    <link href="https://www.fronteers.nl/nl/blog/2011/07/cursus-terminally-chill"/>
  15720.    <updated>2011-07-25T00:00:00Z</updated>
  15721.    <id>https://www.fronteers.nl/nl/blog/2011/07/cursus-terminally-chill</id>
  15722.    <content xml:lang="nl" type="html">&lt;p&gt;Twee jaar geleden organiseerde Fronteers voor het eerst een cursus voor front-end developers in Nederland. De workshops duren meestal een hele dag en zijn van een hoog niveau. Nu Fronteers — mede dankzij de gesmaakte &lt;a href=&quot;http://fronteers.nl/bijeenkomsten&quot;&gt;bijeenkomsten&lt;/a&gt; van de voorbije maanden — ook in Vlaanderen voet aan de grond krijgt, vonden we het tijd voor een eerste cursus op Vlaams grondgebied.&lt;/p&gt;
  15723. &lt;p&gt;&lt;a href=&quot;http://jan.moesen.nu/&quot;&gt;Jan Moesen&lt;/a&gt; — hij gaf eerder al een gesmaakte &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/phl&quot;&gt;presentatie&lt;/a&gt; over dit onderwerp — bijt de spits af: op 19 augustus leert hij je in Gent alles wat je moet weten over de terminal. Je zal versteld staan van de voordelen, de tijdswinst en de vele handigheidjes die de terminal voor front-end developers te bieden heeft.&lt;/p&gt;
  15724. &lt;p&gt;Ben je het beu om altijd weer dezelfde stappen te moeten uitvoeren om je website live te zetten, met het risico om fouten te maken? Doe je elke morgen afstompende computertaken waarbij je wel voelt dat het beter kan, maar niet weet hoe? Of ben je simpelweg op zoek naar wat geekkrediet door je superdeluxe HD-scherm als een veredelde teletekst te gebruiken? &lt;a href=&quot;https://www.fronteers.nl/blog/2011/07/cursus-terminally-chill#reageer&quot;&gt;Laat dan weten waar je mee worstelt&lt;/a&gt;, en we pakken het samen aan tijdens de workshop.&lt;/p&gt;
  15725. &lt;h2&gt;Praktisch&lt;/h2&gt;
  15726. &lt;h2&gt;Prijs&lt;/h2&gt;
  15727. &lt;p&gt;We hebben de inschrijvingsprijs, bij wijze van kennismaking, zeer democratisch weten te houden: Fronteers-leden betalen voor deze eerste cursus in Vlaanderen slechts &lt;em&gt;50 euro&lt;/em&gt;. Niet-leden betalen &lt;em&gt;100 euro&lt;/em&gt;. De prijzen zijn exclusief 19% btw.&lt;/p&gt;
  15728. &lt;h2&gt;Deelnemers&lt;/h2&gt;
  15729. &lt;p&gt;Om de cursus zo interactief mogelijk te kunnen maken, hebben we beslist om het aantal plaatsen tot 12 te beperken. De cursus gaat ook enkel door als we al deze plaatsen hebben kunnen invullen.&lt;/p&gt;
  15730. &lt;h2&gt;Locatie en lunch&lt;/h2&gt;
  15731. &lt;p&gt;De cursus vindt plaats in de Campus Schoonmeersen van de Hogeschool Gent in lokaal D1.02. Het adres is Schoonmeersstraat 52, 9000 Gent. ’s Middags voorzien we een broodjeslunch en die is uiteraard in de prijs begrepen.&lt;/p&gt;
  15732. &lt;h2&gt;Breng je computer mee&lt;/h2&gt;
  15733. &lt;p&gt;Ten slotte vragen we dat alle deelnemers een eigen computer meebrengen. Toegang tot een Unix-shell (dit is standaard het geval op Mac OS X of Linux) is uiteraard een must.&lt;/p&gt;
  15734. &lt;h2&gt;Interesse?&lt;/h2&gt;
  15735. &lt;p&gt;Laat deze kans niet liggen en &lt;a href=&quot;https://www.fronteers.nl/workshops/terminally-chill-jan-moesen&quot;&gt;schrijf je snel in voor deze workshop&lt;/a&gt;.&lt;/p&gt;
  15736. </content>
  15737.  </entry>
  15738.  <entry>
  15739.    <title>Workshops update juli</title>
  15740.    <link href="https://www.fronteers.nl/nl/blog/2011/07/cursussen-update-juli"/>
  15741.    <updated>2011-07-13T00:00:00Z</updated>
  15742.    <id>https://www.fronteers.nl/nl/blog/2011/07/cursussen-update-juli</id>
  15743.    <content xml:lang="nl" type="html">&lt;p&gt;Ook voor juli even een korte cursussen update. De laatste cursus die gegeven is, is &lt;a href=&quot;https://www.fronteers.nl/workshops/inclusive-design-jeroen-hulscher&quot;&gt;&#39;Inclusive Design&#39;&lt;/a&gt; door Jeroen Hulscher. We vermoeden dat de zomervakantie ons wat parten heeft gespeeld en dat de opkomst daardoor wat magertjes leek, maar dankzij wat last minute marketing hebben we hem toch door kunnen laten gaan. Uit de evaluatie is gebleken dat ook deze cursus een succes was!&lt;/p&gt;
  15744. &lt;p&gt;Zoals in &lt;a href=&quot;https://www.fronteers.nl/blog/2011/06/cursussen-update-juni&quot;&gt;de vorige&lt;/a&gt; workshops update al aangekondigd werd, zat er een workshop over &#39;iets met typografie&#39; in de pijplijn. Gisteren is hij dan aangekondigd. Jeroen Visser gaat zijn workshop over (web)typografie, genaamd &lt;a href=&quot;https://www.fronteers.nl/workshops/counter-space-jeroen-visser&quot;&gt;&#39;Counter Space&#39;&lt;/a&gt;, geven op 30 augustus.&lt;/p&gt;
  15745. &lt;p&gt;Zonder al te veel van de cursus te verklappen willen we toch graag een tipje van de sluier oplichten.&lt;/p&gt;
  15746. &lt;p&gt;In de ochtend zal de focus met name liggen op de theorie. Denk hierbij aan de geschiedenis, basisbegrippen en verschillen tussen web en print maar ook aan design gerelateerde zaken als layout en tekstopmaak.&lt;/p&gt;
  15747. &lt;p&gt;Tijdens het middagprogramma zullen met name webtechnieken aan bod komen. Denk hierbij aan de css toolkit, typische webelementen, berperkingen van browsers, renderverschillen en natuurlijk webfonts.&lt;/p&gt;
  15748. &lt;p&gt;Inschrijven kan door het &lt;a href=&quot;https://www.fronteers.nl/workshops/counter-space-jeroen-visser&quot;&gt;formulier&lt;/a&gt; in te vullen. Wees er snel bij want we verwachten dat ook deze workshop snel vol zal zitten. Leden betalen nog steeds €100 en niet-leden €200 (beide bedragen exclusief btw).&lt;/p&gt;
  15749. </content>
  15750.  </entry>
  15751.  <entry>
  15752.    <title>Congresnieuws: Workshops en einde early bird</title>
  15753.    <link href="https://www.fronteers.nl/nl/blog/2011/06/congres-workshops-einde-early-bird"/>
  15754.    <updated>2011-06-29T00:00:00Z</updated>
  15755.    <id>https://www.fronteers.nl/nl/blog/2011/06/congres-workshops-einde-early-bird</id>
  15756.    <content xml:lang="nl" type="html">&lt;p&gt;Ook dit jaar organiseert Fronteers weer &lt;a href=&quot;http://fronteers.nl/congres/2011/workshops&quot;&gt;workshops&lt;/a&gt; in aanloop naar het Fronteers Congres en ook dit jaar gaat het weer om intensieve workshops van een hele dag van hoog internationaal niveau. &lt;a href=&quot;http://fronteers.nl/blog/2011/06/congres-workshops-einde-early-bird#real-world-accessibility&quot;&gt;Derek Featherstone&lt;/a&gt; komt een workshop over toegankelijkheid geven en &lt;a href=&quot;http://fronteers.nl/blog/2011/06/congres-workshops-einde-early-bird#css3-for-web-developers&quot;&gt;Lea Verou&lt;/a&gt; een over CSS3. En een last call voor Fronteers leden: &lt;a href=&quot;http://fronteers.nl/blog/2011/06/congres-workshops-einde-early-bird#einde-early-bird&quot;&gt;de early bird periode voor het congres loopt af&lt;/a&gt;!&lt;/p&gt;
  15757. &lt;h2&gt;Real World Accessibility for HTML5, CSS and ARIA&lt;/h2&gt;
  15758. &lt;p&gt;Op &lt;a href=&quot;https://www.fronteers.nl/congres/2011/workshops/real-world-accessibility-derek-featherstone&quot;&gt;dinsdag 4 oktober&lt;/a&gt; komt Derek Featherstone, keizer van toegankelijkheid, ons uitleggen hoe je er voor kunt zorgen dat hedendaagse complexe webpagina&#39;s toegankelijk blijven voor iedereen, ongeacht het apparaat wat hij of zij gebruikt. Belangrijke kennis die elke webdeveloper vandaag de dag in zijn portfolio moet hebben:&lt;/p&gt;
  15759. &lt;blockquote&gt;
  15760. &lt;p&gt;You need to know what HTML5, CSS3 and ARIA can do for you, how to use them accessibly AND how reliable they are… You need to know the nitty-gritty, get your hands dirty, practical side of accessibility for all of these technologies… You’ll be better prepared to deliver accessible solutions now and in the future.&lt;/p&gt;
  15761. &lt;/blockquote&gt;
  15762. &lt;h2&gt;CSS3 for Web Developers&lt;/h2&gt;
  15763. &lt;p&gt;Voor mensen die alles over hedendaagse CSS willen weten: Lea Verou, de godin van stylesheets, komt ons op &lt;a href=&quot;https://www.fronteers.nl/congres/2011/workshops/css3-for-web-developers-lea-verou&quot;&gt;woensdag 5 oktober&lt;/a&gt; inweiden in de hogere kunst van CSS3. In haar workshop &amp;quot;CSS for developers&amp;quot; gaat ze niet alleen in op de bling bling van CSS3, ze zal zich voornamelijk richten op de toepassing ervan in complexe webapplicaties. Een absolute must visit voor elke serieuze webdeveloper! In haar eigen woorden:&lt;/p&gt;
  15764. &lt;blockquote&gt;
  15765. &lt;p&gt;CSS3, in essence, is about creating web applications that download faster and are easier to develop, maintain and edit. Less HTTP requests, less Kilobytes to download, less presentational JavaScript. And all those are mostly developer goals, rather than designer goals. And that&#39;s why developers should care about CSS3, perhaps even more than designers do.&lt;/p&gt;
  15766. &lt;/blockquote&gt;
  15767. &lt;p&gt;Beide workshops duren een hele dag, ze worden gegeven in het centrum van Amsterdam en de voertaal zal Engels zijn. Om er voor te zorgen dat de workshops persoonlijk blijven is er voor gekozen om maximaal 30 mensen toe te laten, wees er dus snel bij! Uiteraard is er een aangename korting voor Fronteersleden (die voor 29 juni 2011 lid waren of zijn geworden).&lt;/p&gt;
  15768. &lt;h2&gt;Einde early bird voor het congres&lt;/h2&gt;
  15769. &lt;p&gt;De early bird periode voor niet-leden was inmiddels voorbij, morgen is het ook voor Fronteers leden de laatste kans om &lt;a href=&quot;https://www.fronteers.nl/congres/2011/tickets&quot;&gt;een kaartje&lt;/a&gt; met extraveel korting te kopen, vanaf 1 juli stijgt de prijs van een kaartje voor Fronteers leden met 100 Euro naar € 300,00.&lt;/p&gt;
  15770. </content>
  15771.  </entry>
  15772.  <entry>
  15773.    <title>WCAG 2.0 : Datatabellen</title>
  15774.    <link href="https://www.fronteers.nl/nl/blog/2011/06/wcag2-0-datatabellen"/>
  15775.    <updated>2011-06-27T00:00:00Z</updated>
  15776.    <id>https://www.fronteers.nl/nl/blog/2011/06/wcag2-0-datatabellen</id>
  15777.    <content xml:lang="nl" type="html">&lt;p&gt;Volgens de Accessibility Monitor 2011 heeft 69% van de gemeenten toegankelijkheidsproblemen met datatabellen. Wat is er toch zo moeilijk aan het toegankelijk maken daarvan?&lt;/p&gt;
  15778. &lt;p&gt;Zie ook &lt;a href=&quot;http://www.accessibilitymonitor.nl/monitor/2011/per-ijkpunt&quot;&gt;Accessibility Monitor 2011&lt;/a&gt;&lt;/p&gt;
  15779. &lt;p&gt;Een summary en een caption zijn zo toegevoegd en rij en kolom headers (th) ook.&lt;br /&gt;
  15780. Pas bij complexere tabellen wordt het meer werk omdat je dan volgens &lt;a href=&quot;http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H63&quot;&gt;WCAG2.0, richtlijn 1.3.1&lt;/a&gt; scope attributen en/of headers attributen en id&#39;s toe moet voegen. Om precies te zijn: bij twee of meer logische niveaus van rij- of kolomheaders.&lt;/p&gt;
  15781. &lt;p&gt;Wat is jullie ervaring hiermee?&lt;/p&gt;
  15782. &lt;p&gt;En zou het eigenlijk niet ook aan te raden zijn voor niet-complexe tabellen (minder dan twee rij- of kolomheaders) om ook de verbanden tussen de cellen duidelijk aan te geven met scope en/of headers?&lt;/p&gt;
  15783. </content>
  15784.  </entry>
  15785.  <entry>
  15786.    <title>Uxebu geeft een workshop over HTML5, CSS3, JavaScript en Web Apps</title>
  15787.    <link href="https://www.fronteers.nl/nl/blog/2011/06/html5-css3-javascript-web-apps"/>
  15788.    <updated>2011-06-27T00:00:00Z</updated>
  15789.    <id>https://www.fronteers.nl/nl/blog/2011/06/html5-css3-javascript-web-apps</id>
  15790.    <content xml:lang="nl" type="html">&lt;p&gt;Uxebu wil graag haar kennis met jou delen! Wil je graag (mobiele) apps bouwen? HTML5, Chrome Web Store, WebOS, etc? Dan is nu je kans! Op 11-12 juli geeft Uxebu een workshop in Amsterdam om je kennis op te schroeven. Uxebu zal een workshop van hoog niveau neerzetten en je de fijne kneepjes van het vak bijbrengen. Ze zullen je alles leren over JavaScript en het schrijven van mobiele apps en je laten zien wat de browser tegenwoordig allemaal kan.&lt;/p&gt;
  15791. &lt;p&gt;Deze workshop wordt gegeven door het bedrijf met hackers die aan open source projecten hebben bijgedragen als Gordon, TouchScroll, EmbedJS, StorageJS en vele andere.&lt;/p&gt;
  15792. &lt;h2&gt;Inhoud&lt;/h2&gt;
  15793. &lt;p&gt;De workshop zal twee dagen duren. In de ochtenden wordt er intensief gewerkt aan de JavaScript kennis. In de middagen brengen ze deze kennis in de praktijk door de verschillende onderdelen van HTML5 te gebruiken en daadwerkelijk apps te bouwen.&lt;/p&gt;
  15794. &lt;p&gt;De kennissessies in de ochtenden zullen proberen alle onderdelen van JavaScript aan bod te laten komen. Van simpele dingen als hoe variabele werken tot complexe dingen als closures, prototype en contexten. Tijdens de sessie worden er onderdelen van de taal uitgelegd, gevolgd door opdrachten die kijken of de kennis opgenomen is.&lt;/p&gt;
  15795. &lt;p&gt;&#39;s Middags worden er een of meerdere apps gebouwd met behulp van de verschillende onderdelen van HTML5. We bekijken de API&#39;s en gaan zien wat we tegenwoordig allemaal kunnen op de browser en op mobiele apparaten.&lt;/p&gt;
  15796. &lt;p&gt;Let op dat deze workshop je niet gaat leren hoe je jQuery moet gebruiken of hoe je moet werken zonder jQuery. Uxebu richt zich vooral op het overbrengen van hun kennis over JavaScript, mobile en HTML5.&lt;/p&gt;
  15797. &lt;p&gt;Meer info op: &lt;a href=&quot;http://uxebu.com/html5-workshop&quot;&gt;http://uxebu.com/html5-workshop&lt;/a&gt;&lt;/p&gt;
  15798. </content>
  15799.  </entry>
  15800.  <entry>
  15801.    <title>Fronteers zomerborrel op vrijdag 15 juli</title>
  15802.    <link href="https://www.fronteers.nl/nl/blog/2011/06/zomerborrel"/>
  15803.    <updated>2011-06-20T00:00:00Z</updated>
  15804.    <id>https://www.fronteers.nl/nl/blog/2011/06/zomerborrel</id>
  15805.    <content xml:lang="nl" type="html">&lt;p&gt;Zo makkelijk als &lt;a href=&quot;https://www.fronteers.nl/blog/2011/06/lenteborrel&quot;&gt;de huidige lenteborrel&lt;/a&gt; gepland werd, zo makkelijk plannen we de volgende. In deze tijd van komkommers is dat zo gek nog niet. Op 15 juli vindt daarom de eerste zomerborrel van dit jaar plaats in Utrecht.&lt;/p&gt;
  15806. &lt;p&gt;Dus, &lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;lid&lt;/a&gt; of &lt;a href=&quot;https://www.fronteers.nl/inschrijven&quot;&gt;niet-lid&lt;/a&gt;: kom rond 18 uur naar &lt;a href=&quot;http://www.kroegpagina.nl/belgie/&quot;&gt;Kafé België&lt;/a&gt; aan de Oudegracht, en drink een biertje mee, terwijl je device APIs verdedigt, DOMweg wat willekeurigs over Java Script of Jason [sic] te vertellen hebt, of animaties in CSS van tafel schuift.&lt;/p&gt;
  15807. &lt;p&gt;Tot dan!&lt;/p&gt;
  15808. </content>
  15809.  </entry>
  15810.  <entry>
  15811.    <title>Fronteers lenteborrel op maandag 20 juni</title>
  15812.    <link href="https://www.fronteers.nl/nl/blog/2011/06/lenteborrel"/>
  15813.    <updated>2011-06-14T00:00:00Z</updated>
  15814.    <id>https://www.fronteers.nl/nl/blog/2011/06/lenteborrel</id>
  15815.    <content xml:lang="nl" type="html">&lt;p&gt;Op de een-na-laatste dag van de lente—maandag 20 juni—gaat Fronteers weer gezellig borrelen in de &lt;a href=&quot;http://www.nedlook.nl/restauranteersteklas/eersteklas/pub.html&quot;&gt;1e klas pub op Amsterdam Centraal&lt;/a&gt;. Je kunt gezellig praten over de HTML5 boilerplate, je frustraties over HTML e-mail templates uiten en natuurlijk gezellig een biertje drinken.&lt;/p&gt;
  15816. &lt;p&gt;De borrel begint rond 18.00 uur, en rond 20.00 uur verschuiven we waarschijnlijk naar het naastgelegen 1e klas restaurant. De borrel is toegankelijk voor zowel leden als niet-leden, en het eerste drankje wordt betaald door Fronteers.&lt;/p&gt;
  15817. </content>
  15818.  </entry>
  15819.  <entry>
  15820.    <title>Bijeenkomst op 5 juli, in Amsterdam, met gratis barbecue</title>
  15821.    <link href="https://www.fronteers.nl/nl/blog/2011/06/bijeenkomst-juli-amsterdam"/>
  15822.    <updated>2011-06-07T00:00:00Z</updated>
  15823.    <id>https://www.fronteers.nl/nl/blog/2011/06/bijeenkomst-juli-amsterdam</id>
  15824.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdagavond 5 juli is Fronteers te gast bij &lt;a href=&quot;http://efocus.nl/&quot;&gt;eFocus&lt;/a&gt; te Amsterdam. Voorafgaand is er een gratis barbecue. Aanmelden is wel noodzakelijk, aangezien de ruimte voor slechts 40 personen geschikt is. Er geldt: vol is vol, en wie het eerst komt, die het eerst maalt.&lt;/p&gt;
  15825. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  15826. &lt;ul&gt;
  15827. &lt;li&gt;17.30 binnenkomst met barbecue (indien het slecht weer is zullen er pizza&#39;s zijn)&lt;/li&gt;
  15828. &lt;li&gt;19.30 presentatie Paul Kinlan over Google WebChrome (jawel, een spreker uit Groot Brittannië)&lt;/li&gt;
  15829. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  15830. &lt;li&gt;20.45 presentatie James Pearce via videoverbinding over ontwikkelen voor mobile/tablets met Sencha&lt;/li&gt;
  15831. &lt;li&gt;21.45 borrelen&lt;/li&gt;
  15832. &lt;/ul&gt;
  15833. &lt;p&gt;eFocus is gevestigd aan Cruquiusweg 109e, 1019 AG Amsterdam.&lt;/p&gt;
  15834. </content>
  15835.  </entry>
  15836.  <entry>
  15837.    <title>Bijeenkomst op 23 juni in Antwerpen</title>
  15838.    <link href="https://www.fronteers.nl/nl/blog/2011/06/bijeenkomst-aspace"/>
  15839.    <updated>2011-06-07T00:00:00Z</updated>
  15840.    <id>https://www.fronteers.nl/nl/blog/2011/06/bijeenkomst-aspace</id>
  15841.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 23 juni 2011 is Fronteers te gast bij ASPACE in Antwerpen. We voorzien twee presentaties. Eerst doet &lt;a href=&quot;http://catchup.be/&quot;&gt;Roel Van Gils&lt;/a&gt; een boekje open over keyboard accessibility. Vervolgens zal &lt;a href=&quot;http://mathiasbynens.be/&quot;&gt;Mathias Bynens&lt;/a&gt; je een stuk wijzer maken over JavaScript performance.&lt;/p&gt;
  15842. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  15843. &lt;ul&gt;
  15844. &lt;li&gt;18:00 ontvangst met broodjes en een drankje&lt;/li&gt;
  15845. &lt;li&gt;19:00 Roel Van Gils: &lt;em&gt;“Keyboard accessibility. You’ve been doing it wrong.”&lt;/em&gt;&lt;/li&gt;
  15846. &lt;li&gt;20:00 Mathias Bynens: &lt;em&gt;“How to waste an hour saving 8 milliseconds”&lt;/em&gt;&lt;/li&gt;
  15847. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  15848. &lt;/ul&gt;
  15849. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  15850. &lt;p&gt;ASPACE is gevestigd aan de Helmstraat 139 te 2140 Antwerpen. Er is een plannetje beschikbaar op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/aspace&quot;&gt;de detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  15851. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  15852. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa &lt;strike&gt;25&lt;/strike&gt; &lt;strong&gt;35&lt;/strong&gt; mannen en vrouwen.&lt;/p&gt;
  15853. </content>
  15854.  </entry>
  15855.  <entry>
  15856.    <title>Workshops update juni</title>
  15857.    <link href="https://www.fronteers.nl/nl/blog/2011/06/cursussen-update-juni"/>
  15858.    <updated>2011-06-06T00:00:00Z</updated>
  15859.    <id>https://www.fronteers.nl/nl/blog/2011/06/cursussen-update-juni</id>
  15860.    <content xml:lang="nl" type="html">&lt;p&gt;Inmiddels hebben we alweer vijf cursussen achter de rug. Naast &lt;a href=&quot;https://www.fronteers.nl/workshops/css-positionering-peter-paul-koch&quot;&gt;ppk&lt;/a&gt; die het jaar aftrapte met CSS Positionering, zijn er cursussen gegeven door &lt;a href=&quot;https://www.fronteers.nl/workshops/adaptief-ontwikkelen-vasilis-van-gemert&quot;&gt;Vasilis van Gemert&lt;/a&gt; (twee keer al zelfs), &lt;a href=&quot;https://www.fronteers.nl/workshops/javascript-achtbaan-peter-van-der-zee&quot;&gt;Peter van der Zee&lt;/a&gt; en &lt;a href=&quot;https://www.fronteers.nl/workshops/praktisch-html5-peter-beverloo&quot;&gt;Peter Beverloo&lt;/a&gt;. Tijd voor een update.&lt;/p&gt;
  15861. &lt;p&gt;De eerstvolgende workshop is &lt;a href=&quot;https://www.fronteers.nl/workshops/inclusive-design-jeroen-hulscher&quot;&gt;Inclusive Design&lt;/a&gt; die gegeven gaat worden door Jeroen Hulscher. Vanaf vandaag is het mogelijk om je hiervoor [in te schrijven](/workshops/inclusive-design-jeroen-hulscher. Zoals altijd geldt ook voor deze workshop dat je er snel bij moet zijn. Ervaring heeft ons inmiddels geleerd dat de meeste workshops supersnel vol zitten.&lt;/p&gt;
  15862. &lt;p&gt;In de pijplijn hebben we verder nog ‘iets met web typografie’ waarover binnenkort meer, en een cursus door Stephen Hay getiteld ‘rabid prototyping’ waarvan we niet precies weten wat hij ermee bedoelt maar waar we natuurlijk wel enorm benieuwd naar zijn!&lt;/p&gt;
  15863. &lt;p&gt;Tot slot nog het volgende. Zoals &lt;a href=&quot;https://www.fronteers.nl/blog/2011/04/cursussen-update-april&quot;&gt;eerder aangegeven&lt;/a&gt; hebben we, om uit de kosten te komen, de kosten voor zowel leden als niet-leden verhoogd. De laatste workshop was de eerste waarbij we de nieuwe tarieven gehanteerd hebben en ook de eerste waarbij we in de evaluatie als feedback kregen dat de prijs nu precies goed is. In voorgaande evaluaties kregen we steevast te horen dat we te goedkoop waren!&lt;/p&gt;
  15864. </content>
  15865.  </entry>
  15866.  <entry>
  15867.    <title>Goed nieuws (voor vroege vogels)</title>
  15868.    <link href="https://www.fronteers.nl/nl/blog/2011/05/goed-nieuws-voor-vroege-vogels"/>
  15869.    <updated>2011-05-30T00:00:00Z</updated>
  15870.    <id>https://www.fronteers.nl/nl/blog/2011/05/goed-nieuws-voor-vroege-vogels</id>
  15871.    <content xml:lang="nl" type="html">&lt;p&gt;De 100 early bird kaartjes voor niet-leden zijn verkocht. Omdat dat veel sneller ging dan gedacht hebben we besloten om er nog 50 vrij te geven. We nemen aan dat deze kaartjes in een mum van tijd uitverkocht zullen zijn, &lt;a href=&quot;http://fronteers.nl/congres/2011/tickets&quot;&gt;wees er dus snel bij&lt;/a&gt;, de prijzen gaan hierna direct omhoog! Fronteers-leden krijgen overigens tot 30 juni korting. Word je hier al blij van? Of nog niet helemaal? Er is meer.&lt;/p&gt;
  15872. &lt;p&gt;Onze lijst met sprekers – &lt;a href=&quot;https://www.fronteers.nl/blog/2011/03/kaartverkoop-fronteers-2011-begonnen&quot;&gt;die we al indrukwekkend vonden&lt;/a&gt; – is uitgebreid met de volgende topsprekers: de koningin van de de nieuwe revolutie Divya Manian, de koning van fool proof JavaScript Jake Archibald, de Graaf van Nordic Walking Robert Nyman, de koning van toekomstige CSS Stephen Hay en als kers op de cake ook nog eens de koning van jQuery en aanstaande keizer van web educatie John Resig!&lt;/p&gt;
  15873. </content>
  15874.  </entry>
  15875.  <entry>
  15876.    <title>WCAG 2.0: Voorspelbaar gedrag en overlays</title>
  15877.    <link href="https://www.fronteers.nl/nl/blog/2011/05/wcag-2-0-overlays"/>
  15878.    <updated>2011-05-10T00:00:00Z</updated>
  15879.    <id>https://www.fronteers.nl/nl/blog/2011/05/wcag-2-0-overlays</id>
  15880.    <content xml:lang="nl" type="html">&lt;p&gt;Richtlijn 3.2 Voorspelbaar: Maak het uiterlijk en de bediening van webpagina&#39;s voorspelbaar.&lt;/p&gt;
  15881. &lt;p&gt;&lt;a href=&quot;http://www.w3.org/Translations/WCAG20-nl/#consistent-behavior&quot;&gt;3.2. Bij focus: Als een component de focus krijgt, dan veroorzaakt dat geen contextwijziging. (Niveau A)&lt;/a&gt;&lt;/p&gt;
  15882. &lt;p&gt;Het gebruik van page overlays zoals Lightbox is erg populair: niet alleen voor een uitvergrote foto of een korte melding, maar ook voor ingewikkelde formulieren en andere content zoals video&#39;s.&lt;/p&gt;
  15883. &lt;p&gt;Belangrijk voor de toegankelijkheid is dat deze pop-ups niet op focus worden geopend maar na het activeren van een link, waarbij een waarschuwing is gegeven dat de content in een overlay wordt geopend. Ook is het zaak dat de content in de overlay toetsenbordtoegankelijk is.&lt;/p&gt;
  15884. &lt;p&gt;Maar ben je er dan? Zijn er nog meer problemen met overlays en zo ja, hoe pak je die aan?&lt;/p&gt;
  15885. </content>
  15886.  </entry>
  15887.  <entry>
  15888.    <title>Bijeenkomst op 5 mei in Gent</title>
  15889.    <link href="https://www.fronteers.nl/nl/blog/2011/04/bijeenkomst-gent"/>
  15890.    <updated>2011-04-22T00:00:00Z</updated>
  15891.    <id>https://www.fronteers.nl/nl/blog/2011/04/bijeenkomst-gent</id>
  15892.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 5 mei 2011 is Fronteers te gast bij Netlash in Gent. Er worden twee presentaties voorzien. Eerst komt &lt;a href=&quot;http://www.yonidebeule.be/&quot;&gt;Yoni De Beule&lt;/a&gt; praten over OOCSS; vervolgens zal &lt;a href=&quot;http://vasilis.nl/&quot;&gt;Vasilis van Gemert&lt;/a&gt; wat vertellen over adaptieve layouts.&lt;/p&gt;
  15893. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  15894. &lt;ul&gt;
  15895. &lt;li&gt;18:00 ontvangst met broodjes en een drankje&lt;/li&gt;
  15896. &lt;li&gt;19:00 Yoni De Beule over &lt;em&gt;OOCSS&lt;/em&gt;&lt;/li&gt;
  15897. &lt;li&gt;20:00 Vasilis van Gemert over &lt;em&gt;adaptieve layouts&lt;/em&gt;&lt;/li&gt;
  15898. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  15899. &lt;/ul&gt;
  15900. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  15901. &lt;p&gt;Netlash is gevestigd aan de Voorhavenlaan 31, 9000 Gent. Er is een plannetje beschikbaar op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/netlash&quot;&gt;de detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  15902. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  15903. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 30 mannen en vrouwen.&lt;/p&gt;
  15904. </content>
  15905.  </entry>
  15906.  <entry>
  15907.    <title>Front-end vraagstukken: HTML e-mail</title>
  15908.    <link href="https://www.fronteers.nl/nl/blog/2011/04/fe-vraag-html-email"/>
  15909.    <updated>2011-04-20T00:00:00Z</updated>
  15910.    <id>https://www.fronteers.nl/nl/blog/2011/04/fe-vraag-html-email</id>
  15911.    <content xml:lang="nl" type="html">&lt;p&gt;Het is alweer een tijdje geleden dat een Fronteers lid voor het laatst een &lt;a href=&quot;https://www.fronteers.nl/blog/categorieen/front-end-vraagstukken&quot;&gt;front-end vraagstuk&lt;/a&gt; op het blog aan iedereen wilde voorleggen, maar Monique Martens heeft nu een vraag over HTML e-mail:&lt;/p&gt;
  15912. &lt;p&gt;Het (b)lijkt dat HTML mails niet goed  worden weergegeven in sommige versies van Outlook (danwel in andere e-mail clients). Bouw je een schitterende mailing volgens de webrichtlijnen met div id-tjes en class-jes, ziet die er in Outlook niet uit!&lt;/p&gt;
  15913. &lt;p&gt;Wat vinden de andere leden hier van?
  15914. Gewoon stug vasthouden aan de huidige techniek?
  15915. Of back to basic (?) en mail(ings) weer met tabellen, font tags e.d. opmaken?&lt;/p&gt;
  15916. </content>
  15917.  </entry>
  15918.  <entry>
  15919.    <title>Bijeenkomst op 6 mei, in Amsterdam</title>
  15920.    <link href="https://www.fronteers.nl/nl/blog/2011/04/bijeenkomst-mei"/>
  15921.    <updated>2011-04-19T00:00:00Z</updated>
  15922.    <id>https://www.fronteers.nl/nl/blog/2011/04/bijeenkomst-mei</id>
  15923.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 6 mei is Fronteers te gast bij &lt;a href=&quot;http://eduhub.nl/&quot;&gt;Eduhub&lt;/a&gt; te Amsterdam. Er zullen vier mensen een praatje houden van 15 minuten waarna er 15 minuten gediscussieerd kan worden.&lt;/p&gt;
  15924. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  15925. &lt;ul&gt;
  15926. &lt;li&gt;18.30 inloop&lt;/li&gt;
  15927. &lt;li&gt;19.30 Frontend testing met Selenium&lt;/li&gt;
  15928. &lt;li&gt;20.00 Headless browser testing met Ruby&lt;/li&gt;
  15929. &lt;li&gt;20.30 korte pauze&lt;/li&gt;
  15930. &lt;li&gt;20.45 Conversie optimalisatie met Visual Website Optimizer / Optimizely&lt;/li&gt;
  15931. &lt;li&gt;21.15 Pattern library management (over beheer(s)baar maken van frontend code voor backend developers etc.)&lt;/li&gt;
  15932. &lt;li&gt;21.45 borrelen&lt;/li&gt;
  15933. &lt;/ul&gt;
  15934. &lt;p&gt;Eduhub is gevestigd aan Rokin 75, 1012 KL Amsterdam. De bijeenkomst is gratis bij te wonen voor zowel leden als niet-leden van Fronteers. Wel is noodzakelijk dat &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/eduhub#formulier-1&quot;&gt;je jezelf aanmeldt via het formulier&lt;/a&gt; zodat we weten hoeveel mensen aanwezig zullen zijn.&lt;/p&gt;
  15935. </content>
  15936.  </entry>
  15937.  <entry>
  15938.    <title>WCAG 2.0: Toegankelijke formulieren</title>
  15939.    <link href="https://www.fronteers.nl/nl/blog/2011/04/wcag-2-0-toegankelijke-formulieren"/>
  15940.    <updated>2011-04-17T00:00:00Z</updated>
  15941.    <id>https://www.fronteers.nl/nl/blog/2011/04/wcag-2-0-toegankelijke-formulieren</id>
  15942.    <content xml:lang="nl" type="html">&lt;p&gt;Richtlijn 2.1 Toetsenbordtoegankelijk: Maak alle functionaliteit beschikbaar vanaf een toetsenbord.&lt;/p&gt;
  15943. &lt;p&gt;Meer specifiek: &lt;em&gt;&lt;a href=&quot;http://www.w3.org/Translations/WCAG20-nl/#keyboard-operation&quot;&gt;2.1.1 Toetsenbord&lt;/a&gt;: Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten. (Niveau A)&lt;/em&gt;&lt;/p&gt;
  15944. &lt;p&gt;Na deze technisch neutrale richtlijn staan vervolgens bij de &lt;a href=&quot;http://www.w3.org/WAI/WCAG20/quickref/#qr-keyboard-operation-keyboard-operable&quot;&gt;Afdoende technieken&lt;/a&gt; voorbeelden van HTML, scripting en Flash technieken waarmee je aan deze regel kunt voldoen.&lt;/p&gt;
  15945. &lt;p&gt;In WCAG 2.0 wordt soepeler omgegaan met het gebruik van Javascript dan in WCAG 1.0. Dit is niet raar als je de uitkomsten ziet van de laatste &lt;a href=&quot;http://webaim.org/projects/screenreadersurvey3/#javascript&quot;&gt;screenreader-enquête&lt;/a&gt;. Hierin komt naar voren dat ruim 98% van de screenreader gebruikers javascript enabled heeft. Daarnaast is er ook qua usability wat voor te zeggen als je bijvoorbeeld in uitgebreide formulieren dynamisch de vragen en keuzemogelijkheden kan aanpassen, zodat ook iemand met een screenreader minder opties hoeft te doorlopen. Voor deze gebruikers is dit zelfs nog handiger, omdat het veel tijd kan schelen.
  15946. Hetzelfde geldt voor client-side validation. Via javascript kun je bij een verkeerd ingevuld veld een foutmelding invoegen via de DOM, met daarin een link naar het veld waar het gecorrigeerd moet worden. Zodoende hoef je niet het hele formulier te doorzoeken wanneer je niet in een oogopslag kunt zien waar de fout zit.&lt;/p&gt;
  15947. &lt;p&gt;Eventueel kan het formulier dan nog uitgebreid worden met &lt;a href=&quot;http://www.w3.org/TR/wai-aria-practices/&quot;&gt;WAI-ARIA&lt;/a&gt; roles en states zoals &#39;role=alert&#39; en &#39;aria-invalid&#39; of &#39;aria-live&#39;. En/of met &lt;a href=&quot;http://diveintohtml5.org/forms.html&quot;&gt;HTML5 formuliervalidatie&lt;/a&gt;, eventueel met javascript-fallback.&lt;/p&gt;
  15948. &lt;p&gt;Hoe maken jullie formulieren toegankelijk?&lt;/p&gt;
  15949. </content>
  15950.  </entry>
  15951.  <entry>
  15952.    <title>Workshops update april</title>
  15953.    <link href="https://www.fronteers.nl/nl/blog/2011/04/cursussen-update-april"/>
  15954.    <updated>2011-04-13T00:00:00Z</updated>
  15955.    <id>https://www.fronteers.nl/nl/blog/2011/04/cursussen-update-april</id>
  15956.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 3 mei zal Vasilis van Gemert, die we natuurlijk allemaal kennen van onder andere de &lt;a href=&quot;http://dailynerd.nl/&quot;&gt;Daily Nerd&lt;/a&gt; nogmaals zijn cursus &lt;a href=&quot;https://www.fronteers.nl/workshops/adaptief-ontwikkelen-vasilis-van-gemert&quot;&gt;Adaptief Ontwikkelen&lt;/a&gt; gaan geven. [Update] inmiddels zit ook deze cursus vol.&lt;/p&gt;
  15957. &lt;p&gt;De vorige keer dat deze workshop gegeven werd zat de cursus binnen een dag vol.&lt;/p&gt;
  15958. &lt;p&gt;Cursussen lopen sowieso lekker. Op 20 april zal &lt;a href=&quot;http://qfox.nl/&quot;&gt;Peter van der Zee&lt;/a&gt; zijn cursus JavaScript Achtbaan voor het eerst geven. Ook deze cursus zat binnen een dag vol, maar hopelijk kunnen we hem net als Vasilis overhalen de cursus later dit jaar nog een keer te geven.&lt;/p&gt;
  15959. &lt;p&gt;Verder staan cursussen van &lt;a href=&quot;http://peter.sh/&quot;&gt;Peter Beverloo&lt;/a&gt;, &lt;a href=&quot;http://jeroenhulscher.nl/&quot;&gt;Jeroen Hulscher&lt;/a&gt; en &lt;a href=&quot;http://the-haystack.com/&quot;&gt;Stephen Hay&lt;/a&gt; op het progamma voor later dit jaar. Dit brengt ons bij het volgende punt; cursussen zijn enorm populair en dit vooral onder de eigen leden. Die betalen voor een cursus het werkelijk luttele bedrag van €50 wat helaas betekent dat cursussen op dit moment verliesgevend zijn. Gelukkig hebben we budget voor cursussen maar omdat cursussen zich op dit moment nog niet zelf kunnen bedruipen is dat is een keer op. Omdat we wel graag meer (en misschien ook vaker) cursussen willen blijven geven, betekent dit helaas dat de prijs van cursussen later dit jaar omhoog zal gaan.&lt;/p&gt;
  15960. &lt;p&gt;Tot slot willen we, in het verlengde hiervan, aanstaande cursisten wijzen op een kleine wijziging in &lt;a href=&quot;https://www.fronteers.nl/workshops/voor-cursisten&quot;&gt;de kleine lettertjes&lt;/a&gt;. Vanaf de cursus Adaptief Ontwikkelen op 3 mei is het niet langer mogelijk je binnen 48 uur voor een cursus nog af te melden en je geld terug te krijgen.&lt;/p&gt;
  15961. </content>
  15962.  </entry>
  15963.  <entry>
  15964.    <title>Fronteers adviseert af te stappen van HTML</title>
  15965.    <link href="https://www.fronteers.nl/nl/blog/2011/04/stap-nu-over"/>
  15966.    <updated>2011-04-01T00:00:00Z</updated>
  15967.    <id>https://www.fronteers.nl/nl/blog/2011/04/stap-nu-over</id>
  15968.    <content xml:lang="nl" type="html">&lt;p&gt;Als vakvereniging voor front-end ontwikkelend Nederland proberen we de trends in onze branche goed in de gaten te houden. HTML5, het mobiele web, responsive design, 3D geneuzel in je browser; het zit er allemaal aan te komen. Maar wat betekent dit voor onze toekomst? Moeten we echt iedere dag bij blijven leren en tijd verspillen aan artikelen en demo&#39;s die slechts 10% van onze bezoekers kunnen zien? Waarom kunnen we niet gewoon tevreden zijn met wat we al hebben?&lt;/p&gt;
  15969. &lt;p&gt;HTML5 zorgt alleen maar voor meer veiligheidsproblemen. Privacy op het web behoort nu al tot het verleden. Testcases voor CSS worden afgeraffeld door browser bouwers. JavaScript wordt steeds sneller, maar tegelijkertijd worden libraries alleen maar groter. Google probeert hard het web sneller te krijgen, maar trends tonen aan dat pagina&#39;s alleen maar zwaarder worden. De mobiele web maffia probeert ons te doen geloven dat we eerst aan hun moeten denken, voordat we zooi toevoegen. En aan de andere kant zijn er figuren die blindstaren op het &amp;quot;One Web&amp;quot; mantra.&lt;/p&gt;
  15970. &lt;p&gt;Wij vinden dat het anders kan, en moet. Vanaf vandaag adviseren wij iedereen die websites ontwerpt, bouwt en onderhoudt gewoon met tekst te werken. Gewoon toegankelijk voor iedereen, snel en herkenbaar. En het grootste voordeel: het werkt in Internet Explorer 6, dus klanten zullen hier van smullen. Na wat onderzoek bij &lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;onze leden&lt;/a&gt; blijkt dit, nog steeds, een van de grootste pijnpunten te zijn.&lt;/p&gt;
  15971. &lt;p&gt;Stap vandaag over. Wij zeggen Doen!&lt;/p&gt;
  15972. </content>
  15973.  </entry>
  15974.  <entry>
  15975.    <title>Kaartverkoop Fronteers 2011 van start</title>
  15976.    <link href="https://www.fronteers.nl/nl/blog/2011/03/kaartverkoop-fronteers-2011-begonnen"/>
  15977.    <updated>2011-03-30T00:00:00Z</updated>
  15978.    <id>https://www.fronteers.nl/nl/blog/2011/03/kaartverkoop-fronteers-2011-begonnen</id>
  15979.    <content xml:lang="nl" type="html">&lt;p&gt;De kaartverkoop voor het &lt;a href=&quot;http://fronteers.nl/congres/2011&quot;&gt;Fronteers Congres&lt;/a&gt; op 6 en 7 oktober 2011 in Tuschinski in Amsterdam is begonnen, het belooft weer een topcongres te worden. De eerste 6 sprekers zijn inmiddels bekend: Alex Russell, Bruce Lawson, Chris Heilmann, Derek Featherstone, Lea Verou en Tab Atkins Jr. Dat is op zich al een &lt;a href=&quot;http://fronteers.nl/congres/2011/speakers&quot;&gt;indrukwekkende line up&lt;/a&gt; maar de komende maanden zullen we meer namen van sprekers bekendmaken.&lt;/p&gt;
  15980. &lt;p&gt;Zoals altijd staat de prijs van het Fronteers congres niet echt in verhouding tot de kwaliteit en voor Fronteersleden is het een waar vriendenprijsje:&lt;/p&gt;
  15981. &lt;table&gt;
  15982. &lt;thead&gt;
  15983. &lt;tr&gt;
  15984. &lt;th&gt;Early-bird&lt;/th&gt;
  15985. &lt;th&gt;Prijs&lt;/th&gt;
  15986. &lt;/tr&gt;
  15987. &lt;/thead&gt;
  15988. &lt;tbody&gt;
  15989. &lt;tr&gt;
  15990. &lt;td&gt;Fronteersleden&lt;/td&gt;
  15991. &lt;td&gt;€ 200,-&lt;/td&gt;
  15992. &lt;/tr&gt;
  15993. &lt;tr&gt;
  15994. &lt;td&gt;Niet leden&lt;/td&gt;
  15995. &lt;td&gt;€ 275,-&lt;/td&gt;
  15996. &lt;/tr&gt;
  15997. &lt;/tbody&gt;
  15998. &lt;/table&gt;
  15999. &lt;table&gt;
  16000. &lt;thead&gt;
  16001. &lt;tr&gt;
  16002. &lt;th&gt;Normaal ticket&lt;/th&gt;
  16003. &lt;th&gt;Prijs&lt;/th&gt;
  16004. &lt;/tr&gt;
  16005. &lt;/thead&gt;
  16006. &lt;tbody&gt;
  16007. &lt;tr&gt;
  16008. &lt;td&gt;Fronteersleden&lt;/td&gt;
  16009. &lt;td&gt;€ 300,-&lt;/td&gt;
  16010. &lt;/tr&gt;
  16011. &lt;tr&gt;
  16012. &lt;td&gt;Niet-leden&lt;/td&gt;
  16013. &lt;td&gt;€ 375,-&lt;/td&gt;
  16014. &lt;/tr&gt;
  16015. &lt;/tbody&gt;
  16016. &lt;/table&gt;
  16017. &lt;p&gt;De early-bird periode is nu gestart en loopt tot eind juni. Fronteersleden kunnen &lt;a href=&quot;https://www.fronteers.nl/congres/2011/contact&quot;&gt;een kortingscode aanvragen&lt;/a&gt;. Korting voor leden geldt alleen voor mensen die inmiddels lid zijn, mensen die na 30 maart lid zijn geworden krijgen geen korting. Kaarten zijn te bestellen &lt;a href=&quot;http://fronteers.paydro.net/&quot;&gt;via Paydro&lt;/a&gt;.&lt;/p&gt;
  16018. </content>
  16019.  </entry>
  16020.  <entry>
  16021.    <title>WCAG 2.0: regels voor tekstschaalbaarheid achterhaald?</title>
  16022.    <link href="https://www.fronteers.nl/nl/blog/2011/03/wcag-2-0-regels-voor-tekstschaalbaarheid-achterhaald"/>
  16023.    <updated>2011-03-15T00:00:00Z</updated>
  16024.    <id>https://www.fronteers.nl/nl/blog/2011/03/wcag-2-0-regels-voor-tekstschaalbaarheid-achterhaald</id>
  16025.    <content xml:lang="nl" type="html">&lt;p&gt;Richtlijn 1.4 Onderscheidbaar: Maak het voor gebruikers gemakkelijker om content te horen en te zien, waaronder scheiding van voorgrond en achtergrond.&lt;/p&gt;
  16026. &lt;p&gt;&lt;em&gt;&lt;a href=&quot;http://www.w3.org/Translations/WCAG20-nl/#visual-audio-contrast&quot;&gt;1.4.4  Herschalen van tekst&lt;/a&gt;: Behalve voor ondertitels voor doven en slechthorenden en afbeeldingen van tekst, kan tekst zonder hulptechnologie tot 200 procent schalen zonder verlies van content of functionaliteit. (Niveau AA)&lt;/em&gt;&lt;/p&gt;
  16027. &lt;p&gt;Is het -nu browserzoom breed ondersteund wordt- nog wel nodig om daarvoor je layout in ems of procenten op te maken? (Zie &lt;a href=&quot;http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-scale&quot;&gt;Sufficient Techniques for 1.4.4 - Resize text&lt;/a&gt;.) IE6 is toch stervende?&lt;/p&gt;
  16028. &lt;p&gt;En wat te denken van de tekstgrootte opties (Aa) die je nog op veel websites ziet, bijvoorbeeld op &lt;a href=&quot;http://www.ns.nl/&quot;&gt;www.ns.nl&lt;/a&gt; ?   Toch nog wel handig voor mensen die de browserzoom niet kennen, of beter schrappen en de bezoeker uitleggen hoe hij/zij zelf de tekst kan vergroten?&lt;/p&gt;
  16029. </content>
  16030.  </entry>
  16031.  <entry>
  16032.    <title>Fronteers borrel op 1 april in Amsterdam (echt waar)</title>
  16033.    <link href="https://www.fronteers.nl/nl/blog/2011/03/borrel-april"/>
  16034.    <updated>2011-03-10T00:00:00Z</updated>
  16035.    <id>https://www.fronteers.nl/nl/blog/2011/03/borrel-april</id>
  16036.    <content xml:lang="nl" type="html">&lt;p&gt;Elke week weer diezelfde borrelpraat over koetjes en kalfjes, nooit eens een echt interessant gesprek. Kom op 1 april (echt waar) naar de enige echte Fronteers borrel waar je met vakgenoten gewoon kan praten over css-counters, closures, het nut van het &lt;code&gt;hgroup&lt;/code&gt; element, waar je normale conversaties over YSlow en Page Speed kunt houden, waar mensen je gewoon begrijpen als je je frustratie uit over het feit dat Opera decimalen in procentuele breedtes compleet negeert.&lt;/p&gt;
  16037. &lt;p&gt;De borrel wordt gehouden op 1 april in de &lt;a href=&quot;http://www.nedlook.nl/restauranteersteklas/eersteklas/pub.html&quot;&gt;1e Klas Pub&lt;/a&gt; op spoor 2b in Amsterdam Centraal Station (echt waar) vanaf een uur of 18:00. Het eerste biertje is op rekening van Fronteers. Mensen met een &lt;a href=&quot;http://dailynerd.nl/&quot;&gt;Daily Nerd&lt;/a&gt; t-shirt krijgen een gratis biertje van @vasilis.&lt;/p&gt;
  16038. &lt;p&gt;De borrel is uiteraard toegankelijk voor zowel leden als niet-leden. Laat het even weten of je komt via een reactie hieronder.&lt;/p&gt;
  16039. </content>
  16040.  </entry>
  16041.  <entry>
  16042.    <title>Bijeenkomst op 31 maart in Hasselt</title>
  16043.    <link href="https://www.fronteers.nl/nl/blog/2011/03/bijeenkomst-hasselt"/>
  16044.    <updated>2011-03-09T00:00:00Z</updated>
  16045.    <id>https://www.fronteers.nl/nl/blog/2011/03/bijeenkomst-hasselt</id>
  16046.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 31 maart 2011 is Fronteers te gast bij de Provinciale Hogeschool Limburg in Hasselt (jawel, in België!). Er worden twee presentaties voorzien. Eerst komt &lt;a href=&quot;https://builtbyrobot.com/&quot;&gt;Jochen Vandendriessche&lt;/a&gt; praten over het gebruik van Git in z’n workflow als front-end-ontwikkelaar; vervolgens zal &lt;a href=&quot;http://jan.moesen.nu/&quot;&gt;Jan “Bietekwiet” Moesen&lt;/a&gt; wat vertellen over automatisering van de browser met user scripts en bookmarklets en automatisering van ontwikkeling via de terminal.&lt;/p&gt;
  16047. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  16048. &lt;ul&gt;
  16049. &lt;li&gt;18:00 ontvangst met broodjes en een drankje&lt;/li&gt;
  16050. &lt;li&gt;19:00 Jochen Vandendriessche over &lt;em&gt;Git voor fronteers&lt;/em&gt;&lt;/li&gt;
  16051. &lt;li&gt;20:00 Jan Moesen over &lt;em&gt;het gebrek aan automatisering&lt;/em&gt;&lt;/li&gt;
  16052. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  16053. &lt;/ul&gt;
  16054. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  16055. &lt;p&gt;De Provinciale Hogeschool Limburg is gevestigd aan de Elfde Liniestraat 23a, 3500 Hasselt. Er is een plannetje beschikbaar op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/phl&quot;&gt;de detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  16056. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  16057. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 55 mannen en vrouwen.&lt;/p&gt;
  16058. </content>
  16059.  </entry>
  16060.  <entry>
  16061.    <title>Verslag Docentendag</title>
  16062.    <link href="https://www.fronteers.nl/nl/blog/2011/03/verslag-docentendag"/>
  16063.    <updated>2011-03-08T00:00:00Z</updated>
  16064.    <id>https://www.fronteers.nl/nl/blog/2011/03/verslag-docentendag</id>
  16065.    <content xml:lang="nl" type="html">&lt;p&gt;De &lt;a href=&quot;https://www.fronteers.nl/docentendag&quot;&gt;docentendag 2011&lt;/a&gt; zit er weer op. Vijftien docenten zijn in Amsterdam samengekomen om samen met de commissie-Onderwijs, Nikolai Onken en Hedwyg van Groenendaal nader kennis te maken met het vakgebied en met elkaar.&lt;/p&gt;
  16066. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2011/03/prezi.png&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  16067. &lt;p&gt;Nikolai Onken heeft zijn slides over HTML5 apps beschikbaar gesteld via SlideShare: &lt;a href=&quot;http://www.slideshare.net/nonken/html5-apps&quot;&gt;http://www.slideshare.net/nonken/html5-apps&lt;/a&gt;.&lt;/p&gt;
  16068. &lt;p&gt;Tijdens het middagprogramma is er in groepjes gediscussieerd over een aantal stellingen. Tijdens deze discussie zijn er per groepje aantekeningen gemaakt in Prezi. Deze is terug te vinden op &lt;a href=&quot;http://prezi.com/ogrztohwvnve&quot;&gt;http://prezi.com/ogrztohwvnve&lt;/a&gt;.&lt;/p&gt;
  16069. &lt;p&gt;De commissie-Onderwijs wil nogmaals Nikolai en Hedwyg danken voor hun bijdrage aan de docentendag. Dank is er ook voor info.nl, voor het goede ontvangst en de geslaagde borrel.&lt;/p&gt;
  16070. </content>
  16071.  </entry>
  16072.  <entry>
  16073.    <title>WCAG 2.0: Richtlijn 1.3 Aanpasbare presentatie zonder verlies van informatie of structuur</title>
  16074.    <link href="https://www.fronteers.nl/nl/blog/2011/02/richtlijn-1-3-aanpasbare-presentatie-zonder-verlies-van-informatie-of-structuur"/>
  16075.    <updated>2011-02-28T00:00:00Z</updated>
  16076.    <id>https://www.fronteers.nl/nl/blog/2011/02/richtlijn-1-3-aanpasbare-presentatie-zonder-verlies-van-informatie-of-structuur</id>
  16077.    <content xml:lang="nl" type="html">&lt;p&gt;Richtlijn 1.3 Aanpasbaar: Creëer content die op verschillende manieren gepresenteerd kan worden (bijvoorbeeld eenvoudiger lay-out) zonder verlies van informatie of structuur.&lt;/p&gt;
  16078. &lt;p&gt;Volgens succescriterium &lt;a href=&quot;http://www.w3.org/Translations/WCAG20-nl/#content-structure-separation&quot;&gt;1.3.1 Info en relaties&lt;/a&gt; moet informatie, structuur, en relaties overgebracht door presentatie door software bepaald kunnen worden of beschikbaar zijn in tekst.&lt;/p&gt;
  16079. &lt;p&gt;Op 26 februari kwam Stichting Drempelvrij met een &lt;a href=&quot;http://www.drempelvrij.nl/actueel/#provinciale-verkiezingswebsites&quot;&gt;persbericht over de (on)toegankelijkheid van provinciale verkiezingswebsites&lt;/a&gt;. Het Interprovinciaal overleg (IPO) heeft met het oog op de Provinciale Staten-verkiezingen een &lt;a href=&quot;http://www.provincies.nl/magazine/&quot;&gt;website&lt;/a&gt; gemaakt waarin wordt uitgelegd wat de provincies precies doen. Deze website is geheel in Flash en ontoegankelijk bevonden door Drempelvrij.
  16080. Flash was lange tijd  &lt;em&gt;not done&lt;/em&gt; als het aankwam op het bouwen van toegankelijke websites, maar nu zijn er in WCAG 2.0 speciaal &lt;a href=&quot;http://www.w3.org/WAI/GL/WCAG20-TECHS/flash.html&quot;&gt;richtlijnen&lt;/a&gt; voor opgenomen.&lt;/p&gt;
  16081. &lt;p&gt;Betekent dit dat we nu weer rustig grote, belangrijke onderdelen in Flash in onze sites kunnen opnemen? Lukt het bijvoorbeeld om in de huidige Flash versie zo&#39;n site als bovengenoemde van IPO toegankelijk te maken, in ieder geval op niveau A?&lt;/p&gt;
  16082. &lt;p&gt;Of kun je toch nog beter een alternatieve versie aanbieden in bijv. HTML of PDF? (Ervan uitgaande dat je geen initiële keus had voor wel/geen Flash.)
  16083. Wat is het meest efficiënt voor bouwers en het meest effectief/prettig voor bezoekers met een beperking?&lt;/p&gt;
  16084. </content>
  16085.  </entry>
  16086.  <entry>
  16087.    <title>Fronteers 2011: 6 en 7 oktober</title>
  16088.    <link href="https://www.fronteers.nl/nl/blog/2011/02/fronteers-2011"/>
  16089.    <updated>2011-02-23T00:00:00Z</updated>
  16090.    <id>https://www.fronteers.nl/nl/blog/2011/02/fronteers-2011</id>
  16091.    <content xml:lang="nl" type="html">&lt;p&gt;Na de successen van de afgelopen jaren organiseert Fronteers dit jaar uiteraard weer een congres. &lt;a href=&quot;https://www.fronteers.nl/congres/2011&quot;&gt;Fronteers 2011&lt;/a&gt; zal gehouden worden op &lt;em&gt;donderdag 6 en vrijdag 7 oktober 2011 in Pathé Tuschinski&lt;/em&gt; te Amsterdam. Deze data kan je alvast in je agenda noteren. Iedereen die vorig jaar is geweest, snapt waarom we dit jaar weer voor Tuschinski hebben gekozen: een prachtig gebouw met een centrale ligging en niet te vergeten fantastische stoelen.&lt;/p&gt;
  16092. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/congres/2010/venue/fronteers-2010-andreasdantz.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  16093. &lt;p&gt;De kaartverkoop zal in &lt;em&gt;maart&lt;/em&gt; starten. Precieze kaartprijzen zijn nog niet bekend. Ze zullen in ieder geval, omdat we geen winstoogmerk hebben, ook dit jaar weer zeer betaalbaar zijn.
  16094. &lt;em&gt;Let op&lt;/em&gt;: de regels met betrekking tot de ledenkorting zijn veranderd. Dit jaar geldt de ledenkorting &lt;em&gt;alleen&lt;/em&gt; indien je al lid bent op het moment dat de kaartverkoop start. Wil je naar het congres en denk je erover om lid te worden en gebruik te maken van de ledenkorting? Neem dan snel je beslissing.&lt;/p&gt;
  16095. &lt;p&gt;Het is de bedoeling om, net als vorig jaar, voorafgaand aan het congres specialistische workshops/masterclasses te laten geven door internationale experts. De exacte invulling hiervan is nog niet bekend, we laten het weten zodra er meer bekend is.&lt;/p&gt;
  16096. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/congres/2010/fr4-lejoe.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  16097. &lt;p&gt;Dat laatste geldt natuurlijk ook voor de sprekers: op dit moment zijn er nog geen namen die we bekend kunnen maken. We gaan weer een aantal grote namen naar Amsterdam halen, daarnaast houden we ook een handvol sessies gereserveerd voor nieuw talent: we zorgen er weer voor dat Fronteers 2011 technisch hoogstaand, gevarieerd en spraakmakend wordt.&lt;/p&gt;
  16098. &lt;p&gt;Het is mogelijk het Fronteers congres te sponsoren. Sponsors krijgen aandacht op het drukwerk, de website en naar eigen wens alle ruimte in de goodie bag. Andere invullingen zijn in overleg ook mogelijk. We doen net als vorig jaar niet aan gesponsorde talks. Geïnteresseerden kunnen contact opnemen met Thijs Reijgersberg, &lt;a href=&quot;mailto:thijs@fronteers.nl&quot;&gt;thijs@fronteers.nl&lt;/a&gt;.&lt;/p&gt;
  16099. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/congres/2010/fr5-lejoe.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  16100. &lt;p&gt;De congres commissie is hard bezig om Fronteers 2011 minstens zo indrukwekkend te maken als voorgaande edities. De Twitteraars die het congresnieuws graag heet van de naald willen, doen er goed aan ons op &lt;a href=&quot;https://twitter.com/FronteersConf&quot;&gt;Twitter (@FronteersConf)&lt;/a&gt; en &lt;a href=&quot;http://lanyrd.com/2011/fronteers/&quot;&gt;Lanyrd&lt;/a&gt; te volgen.&lt;/p&gt;
  16101. &lt;p&gt;Edwin, Hidde, Krijn, Peter, Peter-Paul, Thijs en Vasilis.&lt;/p&gt;
  16102. </content>
  16103.  </entry>
  16104.  <entry>
  16105.    <title>Fronteers Docentendag: nog maar twee weken!</title>
  16106.    <link href="https://www.fronteers.nl/nl/blog/2011/02/docentendag"/>
  16107.    <updated>2011-02-11T00:00:00Z</updated>
  16108.    <id>https://www.fronteers.nl/nl/blog/2011/02/docentendag</id>
  16109.    <content xml:lang="nl" type="html">&lt;p&gt;Op 24 februari vindt de Fronteers Docentendag 2011 plaats! De docentendag is een studiedag voor docenten in het front-end onderwijs. Het doel is docenten met elkaar en met de beroepspraktijk in contact brengen. De dag vindt plaats in Amsterdam en wordt gehost door &lt;a href=&quot;http://info.nl/&quot;&gt;info.nl&lt;/a&gt; en restaurant/café In De Waag.&lt;/p&gt;
  16110. &lt;p&gt;Nikolai Onken vertelt over HTML 5 applicaties; Hedwyg van Groenendaal leidt de discussie in over de combinatie van front-end en onderwijs. De dag sluit af met een rondleiding en een borrel bij info.nl.&lt;/p&gt;
  16111. &lt;p&gt;Er zijn nog maar enkele plaatsen beschikbaar: meld u snel aan op &lt;a href=&quot;https://www.fronteers.nl/docentendag&quot;&gt;fronteers.nl/docentendag&lt;/a&gt;!&lt;/p&gt;
  16112. </content>
  16113.  </entry>
  16114.  <entry>
  16115.    <title>Fronteers Workshops, een update</title>
  16116.    <link href="https://www.fronteers.nl/nl/blog/2011/02/workshops-update"/>
  16117.    <updated>2011-02-10T00:00:00Z</updated>
  16118.    <id>https://www.fronteers.nl/nl/blog/2011/02/workshops-update</id>
  16119.    <content xml:lang="nl" type="html">&lt;p&gt;Zoals eenieder bijna niet kan zijn ontgaan is de commissie cursussen voortvarend van start gegaan in het nieuwe jaar. De eerste cursus, &lt;a href=&quot;https://www.fronteers.nl/workshops/css-positionering-peter-paul-koch&quot;&gt;CSS Positionering&lt;/a&gt; is inmiddels achter de rug en uit de korte evaluatie is gebleken dat de cursisten er unaniem zeer tevreden over waren.&lt;/p&gt;
  16120. &lt;p&gt;De cursus sloot goed aan bij de verwachtingen die de cursisten erbij hadden. De lunch werd zeer goed ontvangen en ook Seats2Meet in Utrecht als locatie blijkt in goede aarde te vallen. De superlatieven waren niet van de lucht, met andere woorden voldoende motivatie om verder te gaan en ook de cursussen die dit jaar nog gegeven gaan worden tot een groot succes te maken.&lt;/p&gt;
  16121. &lt;p&gt;Voor 8 maart staat de workshop &lt;a href=&quot;https://www.fronteers.nl/workshops/adaptief-ontwikkelen-vasilis-van-gemert&quot;&gt;Adaptief Ontwikkelen&lt;/a&gt; gepland. Deze workshop zal gegeven worden door Vasilis van Gemert. De interesse voor deze workshop was dusdanig groot dat hij binnen een dag vol zat. We hebben echter goed nieuws voor degenen die hem graag hadden willen volgen maar achter het net gevist hebben; Vasilis wil deze workshop in mei graag nog een keer gaan geven. Een exacte datum voor deze workshop, evenals de JavaScript workshop die Peter van der Zee gaat geven, hebben we nog niet. Dus houdt de website en de Twitters daarom goed in de gaten.&lt;/p&gt;
  16122. </content>
  16123.  </entry>
  16124.  <entry>
  16125.    <title>Bijeenkomst op 3 maart, in Amsterdam</title>
  16126.    <link href="https://www.fronteers.nl/nl/blog/2011/02/bijeenkomst-maart"/>
  16127.    <updated>2011-02-09T00:00:00Z</updated>
  16128.    <id>https://www.fronteers.nl/nl/blog/2011/02/bijeenkomst-maart</id>
  16129.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 3 maart is Fronteers te gast bij 80beans in Amsterdam. Roy Tomeij zal spreken over front-end meta languages. Vasilis van Gemert gaat dieper in op adaptive development.&lt;/p&gt;
  16130. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  16131. &lt;ul&gt;
  16132. &lt;li&gt;18.30 inloop&lt;/li&gt;
  16133. &lt;li&gt;19.30 Roy Tomeij over front-end meta languages&lt;/li&gt;
  16134. &lt;li&gt;20.30 pauze&lt;/li&gt;
  16135. &lt;li&gt;20.45 Vasilis van Gemert over adaptive development&lt;/li&gt;
  16136. &lt;li&gt;21.45 borrelen, netwerken&lt;/li&gt;
  16137. &lt;/ul&gt;
  16138. &lt;h2&gt;Front-end meta languages&lt;/h2&gt;
  16139. &lt;p&gt;Er zijn verschillende meta-languages die het schrijven van front-end code prettiger, sneller en minder foutgevoelig kunnen maken. Ook hierbij geldt dat het uiteindelijk een kwestie van persoonlijke voorkeur is, maar &lt;a href=&quot;https://twitter.com/roy&quot;&gt;Roy Tomeij&lt;/a&gt; zal uitleggen waarom jij én de back-enders die de code gaan implementeren vrolijker worden van onder andere Haml, Sass en CoffeeScript.&lt;/p&gt;
  16140. &lt;h2&gt;Adaptive development&lt;/h2&gt;
  16141. &lt;p&gt;In deze presentatie behandelt &lt;a href=&quot;http://vasilis.nl/&quot;&gt;Vasilis van Gemert&lt;/a&gt; van &lt;a href=&quot;http://mirabeau.nl/&quot;&gt;Mirabeau&lt;/a&gt; aan de hand van praktijkvoorbeelden verschillende technieken die in te zetten zijn bij het bouwen van adaptive layouts. Denk hierbij aan termen als em-based layouts, media-queries, re-alignment best practices en client-side adaptive image-replacement. Met andere woorden: echt flexibele websites die zich aanpassen aan het apparaat waarmee gekeken wordt.&lt;/p&gt;
  16142. &lt;p&gt;80beans is gevestigd aan de Vijzelstraat 72, ruimte 3.56, 1017 HL , Amsterdam. Zoals gebruikelijk is de bijeenkomst gratis bij te wonen door zowel leden als niet-leden. Wel is het gewenst dat je jezelf opgeeft. Er zal gezorgd worden voor webstandaardenbier.&lt;/p&gt;
  16143. </content>
  16144.  </entry>
  16145.  <entry>
  16146.    <title>Fronteers 2011: welke spreker wil jij zien?</title>
  16147.    <link href="https://www.fronteers.nl/nl/blog/2011/02/fronteers-2011-welke-spreker"/>
  16148.    <updated>2011-02-08T00:00:00Z</updated>
  16149.    <id>https://www.fronteers.nl/nl/blog/2011/02/fronteers-2011-welke-spreker</id>
  16150.    <content xml:lang="nl" type="html">&lt;p&gt;De voorbereidingen voor het Fronteers congres van 2011 zijn begonnen. Om het congres nog beter te maken dan voorgaande jaren willen we graag van jullie weten welke sprekers je graag zou zien. Wie heb je al die jaren gemist als spreker? Welke guru moeten we per se uitnodigen?&lt;/p&gt;
  16151. &lt;p&gt;Misschien ken je wel iemand die nog niet zo bekend is, maar die echt iets nieuws te vertellen heeft. Of vind je dat we absoluut een van de sprekers van afgelopen jaren weer moeten uitnodigen.&lt;/p&gt;
  16152. &lt;p&gt;Laat het ons weten via &lt;a href=&quot;https://twitter.com/FronteersConf&quot;&gt;Twitter&lt;/a&gt;, &lt;a href=&quot;http://webchat.freenode.net/?channels=fronteers&quot;&gt;IRC&lt;/a&gt;, per &lt;a href=&quot;mailto:congres@fronteers.nl&quot;&gt;mail&lt;/a&gt; of hier in de comments en wij zullen ons best doen om jullie favoriete sprekers te boeken.&lt;/p&gt;
  16153. &lt;p&gt;Om jullie er nog even aan te herinneren hoe het er afgelopen jaar aan toe ging, hieronder een sfeerimpressie van &lt;a href=&quot;http://vimeo.com/16670431&quot;&gt;Fronteers 2010&lt;/a&gt; (gemaakt door &lt;a href=&quot;http://vimeo.com/fzijlstra&quot;&gt;Frank Zijlstra&lt;/a&gt;):
  16154. &lt;video controls=&quot;&quot; width=&quot;480&quot; height=&quot;270&quot;&gt;
  16155. &lt;source src=&quot;https://www.fronteers.nl/archief/_downloads/2010/fronteers-2010-compilatie.webm&quot; type=&quot;video/webm&quot; /&gt;
  16156. Download de &lt;a href=&quot;https://www.fronteers.nl/nl/blog/2011/02/archief/_downloads/2010/fronteers-2010-compilatie.webm&quot;&gt;webm&lt;/a&gt; video.
  16157. &lt;/video&gt;
  16158. Wij hebben er zin in; jullie hopelijk ook!&lt;/p&gt;
  16159. </content>
  16160.  </entry>
  16161.  <entry>
  16162.    <title>WCAG 2.0: Richtlijn 1.2 Op tijd gebaseerde media</title>
  16163.    <link href="https://www.fronteers.nl/nl/blog/2011/02/richtlijn-1-2-op-tijd-gebaseerde-media"/>
  16164.    <updated>2011-02-06T00:00:00Z</updated>
  16165.    <id>https://www.fronteers.nl/nl/blog/2011/02/richtlijn-1-2-op-tijd-gebaseerde-media</id>
  16166.    <content xml:lang="nl" type="html">&lt;p&gt;Richtlijn 1.2 Op tijd gebaseerde media: Lever alternatieven voor op tijd gebaseerde media.&lt;/p&gt;
  16167. &lt;p&gt;Als het aankomt op multimedia lijkt het al snel ingewikkeld te worden om aan &lt;a href=&quot;http://www.w3.org/Translations/WCAG20-nl/#media-equiv&quot;&gt;Richtlijn 1.2&lt;/a&gt; te voldoen: tekstbeschrijvingen, ondertitels, audio beschrijvingen... Het komt erop neer dat alles wat er te zien is, ook te horen moet zijn via aangeboden audio of in tekstvorm (zodat hulptechnologie ermee overweg kan), en dat alles wat er te horen is, ook te zien moet zijn, zoals bijvoorbeeld de beschrijvingen tussen de gesproken tekst door in de ondertiteling als &#39;er klinkt een harde schreeuw&#39;.&lt;/p&gt;
  16168. &lt;p&gt;Deze regels gelden voor vooraf opgenomen content op niveau A, vanaf niveau AA zijn er ook eisen wat betreft live content en gebarentaal.&lt;/p&gt;
  16169. &lt;p&gt;Mijns inziens gaan de regels soms wel wat ver. Twee concrete voorbeelden:&lt;/p&gt;
  16170. &lt;p&gt;Kun je van een (kleine) gemeente met weinig budget voor de website verwachten dat ze ondertitels gaan verzorgen bij een live uitzending van de raadsvergadering? Anders voldoen ze niet (meer) aan de webrichtlijnen niveau AA...&lt;/p&gt;
  16171. &lt;p&gt;Als er op de homepage een geanimeerde Flash banner staat die een paar onderwerpen uitlicht die ook elders op de site in de html staan, moet de inhoud van de Flash banner dan ook nog in een alternatief worden aangeboden? Het lijkt mij dat als je er niks belangrijks door mist, dat dat dan niet nodig is.&lt;/p&gt;
  16172. &lt;p&gt;Wat denken jullie? Zijn deze eisen gerechtvaardigd en uitvoerbaar?&lt;/p&gt;
  16173. </content>
  16174.  </entry>
  16175.  <entry>
  16176.    <title>Commissie Onderwijs: docentendag, commissieleden gezocht en bronnen bijgewerkt</title>
  16177.    <link href="https://www.fronteers.nl/nl/blog/2011/02/onderwijs-commissie"/>
  16178.    <updated>2011-02-01T00:00:00Z</updated>
  16179.    <id>https://www.fronteers.nl/nl/blog/2011/02/onderwijs-commissie</id>
  16180.    <content xml:lang="nl" type="html">&lt;p&gt;De commissie Onderwijs organiseert op 25 februari 2011 een docentendag in Amsterdam. Ook zoekt zij nieuwe commissieleden. Daarnaast zijn de bronnen op de website bijgewerkt.&lt;/p&gt;
  16181. &lt;h2&gt;Docentendag&lt;/h2&gt;
  16182. &lt;p&gt;Op donderdag 24 februari 2011 organiseert Fronteers samen met &lt;a href=&quot;http://info.nl/&quot;&gt;info.nl&lt;/a&gt; een docentendag in Amsterdam. Ontmoet collega docenten en woon twee presentaties van mensen uit het vakgebied bij. De docentendag is gratis voor docenten (front-end) webdevelopment aan ROC&#39;s, hogescholen en universiteiten. Aanmelden kan via het formulier op de pagina &lt;a href=&quot;https://www.fronteers.nl/docentendag&quot;&gt;/docentendag&lt;/a&gt;.&lt;/p&gt;
  16183. &lt;h2&gt;Commissieleden gezocht&lt;/h2&gt;
  16184. &lt;p&gt;De commissie is de laatste maanden in omvang afgenomen. We zijn op zoek naar docenten die mee willen discussiëren over de toekomst van het front-end webdevelopment onderwijs in Nederland. Voornaamste taken zijn het bespreken van curricula en het organiseren van de docentendag 2012. We zoeken zowel leden als een nieuwe voorzitter. Een e-mail met motivatie kan naar &lt;a href=&quot;mailto:onderwijs@fronteers.nl&quot;&gt;onderwijs@fronteers.nl&lt;/a&gt;.&lt;/p&gt;
  16185. &lt;h2&gt;Bronnen bijgewerkt&lt;/h2&gt;
  16186. &lt;p&gt;Onlangs heeft Claudia Angenent de bronnen op &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/onderwijs/bronnen&quot;&gt;/vereniging/commissies/onderwijs/bronnen&lt;/a&gt; bijgewerkt. De bronnen zijn handige links naar materiaal voor beginnende webdevelopers. Mocht je iemand kennen die wil starten met front-end webdevelopment, dan kun je hem of haar hiernaartoe verwijzen. Suggesties zijn overigens welkom, je kunt ze achterlaten in de comments.&lt;/p&gt;
  16187. </content>
  16188.  </entry>
  16189.  <entry>
  16190.    <title>WCAG 2.0: Richtlijn 1.1 Tekstalternatieven</title>
  16191.    <link href="https://www.fronteers.nl/nl/blog/2011/01/wcag-20-richtlijn-1-1-tekstalternatieven"/>
  16192.    <updated>2011-01-24T00:00:00Z</updated>
  16193.    <id>https://www.fronteers.nl/nl/blog/2011/01/wcag-20-richtlijn-1-1-tekstalternatieven</id>
  16194.    <content xml:lang="nl" type="html">&lt;p&gt;In navolging van de serie &lt;a href=&quot;https://www.fronteers.nl/blog/categorieen/webrichtlijnen&quot;&gt;blogposts over webrichtlijnen&lt;/a&gt; vanaf nu een reeks artikelen over &lt;a href=&quot;http://www.w3.org/Translations/WCAG20-nl/&quot;&gt;WCAG 2.0&lt;/a&gt;, die ook een integraal onderdeel gaan vormen van de Webrichtlijnen versie 2.&lt;/p&gt;
  16195. &lt;p&gt;&lt;em&gt;Richtlijn 1.1 Tekstalternatieven: Lever tekstalternatieven voor alle niet-tekstuele content, zodat die veranderd kan worden in andere vormen die mensen nodig hebben, zoals grote letters, braille, spraak, symbolen of eenvoudiger taal.&lt;/em&gt;&lt;/p&gt;
  16196. &lt;p&gt;Onder deze richtlijn vallen niet alleen situaties waarin belangrijke content toegankelijk moet worden gemaakt via tekstalternatieven (hierover later meer), maar ook situaties waarin gebruikers of hulptechnologieën moeten weten dat ze bepaalde onderdelen juist moeten negeren of &#39;anders behandelen&#39; :&lt;/p&gt;
  16197. &lt;ul&gt;
  16198. &lt;li&gt;Zintuiglijk: Als niet-tekstuele content primair is bedoeld om een specifieke zintuiglijke ervaring te creëren, dan leveren tekstalternatieven ten minste een beschrijving van de niet-tekstuele content.&lt;/li&gt;
  16199. &lt;li&gt;Decoratie, opmaak, onzichtbaar: Als niet-tekstuele content puur decoratief is, slechts voor visuele opmaak wordt gebruikt, of niet aan gebruikers wordt gerepresenteerd, dan wordt ze op zo&#39;n manier geïmplementeerd dat ze genegeerd kan worden door hulptechnologie.&lt;/li&gt;
  16200. &lt;/ul&gt;
  16201. &lt;p&gt;Hebben jullie hier ervaring mee? Gebruiken jullie bijvoorbeeld wel eens opzettelijk lege &lt;code&gt;alt&lt;/code&gt; attributen?&lt;/p&gt;
  16202. &lt;p&gt;Welke andere situaties zijn hier nog te bedenken?&lt;/p&gt;
  16203. &lt;p&gt;Zijn er bijvoorbeeld irritaties over elementen die voor veel ruis zorgen voor screenreader gebruikers, en die daarom dus beter aangegeven of verborgen zouden kunnen worden?&lt;/p&gt;
  16204. </content>
  16205.  </entry>
  16206.  <entry>
  16207.    <title>Mobilism 2011: Fronteers kaarten</title>
  16208.    <link href="https://www.fronteers.nl/nl/blog/2011/01/mobilism"/>
  16209.    <updated>2011-01-13T00:00:00Z</updated>
  16210.    <id>https://www.fronteers.nl/nl/blog/2011/01/mobilism</id>
  16211.    <content xml:lang="nl" type="html">&lt;p&gt;Op 12 en 13 mei as. zal te Amsterdam &lt;a href=&quot;http://mobilism.nl/&quot;&gt;Mobilism 2011&lt;/a&gt; plaatsvinden, dat geheel gewijd zal zijn aan mobiele webontwikkeling. Een &lt;a href=&quot;http://mobilism.nl/2011/speakers&quot;&gt;mooie sprekerslijst&lt;/a&gt; staat garant voor een topcongres.&lt;/p&gt;
  16212. &lt;p&gt;Aangezien twee van de drie organisatoren Fronteers-bestuursleden zijn, willen we Fronteers-leden (die &lt;em&gt;op dit moment&lt;/em&gt; lid zijn) een eenmalige aanbieding doen. We hebben 25 kaarten gereserveerd, die voor de early-bird prijs van 455 euro te koop zijn. Aangezien de early bird verder afgelopen is, is dit de goedkoopste manier om het congres bij te wonen — je bespaart 140 euro.&lt;/p&gt;
  16213. &lt;p&gt;Dit aanbod geldt tot en met 31 januari.&lt;/p&gt;
  16214. &lt;p&gt;Als je een kaartje wilt bestellen en Fronteers lid bent, kun je een kortingscode opvragen middels een mailtje naar &lt;a href=&quot;mailto:krijn@fronteers.nl&quot;&gt;krijn@fronteers.nl&lt;/a&gt;.&lt;/p&gt;
  16215. &lt;p&gt;We hopen minstens 25 Fronteers leden te kunnen begroeten op 12 en 13 mei.&lt;/p&gt;
  16216. </content>
  16217.  </entry>
  16218.  <entry>
  16219.    <title>Bijeenkomst op 10 februari, in Leeuwarden</title>
  16220.    <link href="https://www.fronteers.nl/nl/blog/2011/01/bijeenkomst-februari"/>
  16221.    <updated>2011-01-10T00:00:00Z</updated>
  16222.    <id>https://www.fronteers.nl/nl/blog/2011/01/bijeenkomst-februari</id>
  16223.    <content xml:lang="nl" type="html">&lt;p&gt;Op 10 februari organiseert Fronteers in samenwerking met Lable een bijeenkomst over mobiele toepassingen van het web, met Jurriaan Mous over de webapplicatie voor de zorg die Lable met behulp van Google Web Toolkit ontwikkelt en Jacco de Boer, over ontwerpuitdagingen bij een mobiele nieuwsapplicatie.&lt;/p&gt;
  16224. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  16225. &lt;ul&gt;
  16226. &lt;li&gt;19:00 inloop&lt;/li&gt;
  16227. &lt;li&gt;19:30 welkomswoord van Fronteers&lt;/li&gt;
  16228. &lt;li&gt;19:35 Jurriaan Mous over het bouwen van een zorgdossier in HTML5/CSS3/GWT&lt;/li&gt;
  16229. &lt;li&gt;20:30 pauze&lt;/li&gt;
  16230. &lt;li&gt;20:45 Jacco de Boer over de iPad app van de Leeuwarder Courant&lt;/li&gt;
  16231. &lt;li&gt;21:45 borrel&lt;/li&gt;
  16232. &lt;/ul&gt;
  16233. &lt;h2&gt;Een zorgdossier in HTML5/CSS3/GWT&lt;/h2&gt;
  16234. &lt;p&gt;Lable werkt aan EZLP, een zorgdossier als webapplicatie. Deze wordt ontwikkeld samen met de verzorgers in de ouderenzorg.&lt;/p&gt;
  16235. &lt;p&gt;Digitale architect Jurriaan Mous zal vertellen over de techniek achter deze webapplicatie en de lessen die zijn geleerd tijdens de ontwikkeling. Zijn talk zal gaan over het bouwen van serieuze webapplicaties in Java gecompiled naar geoptimaliseerde Javascript met behulp van Google Web Toolkit, het werken met eigengebouwde CSS compilers om browsercompatibiliteit te garanderen, het omgaan met NOSQL databases in je frontend en het bouwen van een degelijk framework voor een mooie toekomst.&lt;/p&gt;
  16236. &lt;h2&gt;De mobiele krant&lt;/h2&gt;
  16237. &lt;p&gt;De Leeuwarder Courant werkt aan een betaalde nieuwsapplicatie voor de iPad. Jacco de Boer gaat ons meer vertellen over de ontwerpuitdagingen en touchscreen specifieke vragen die daarbij boven komen drijven en wat werkt.&lt;/p&gt;
  16238. &lt;p&gt;Aanmelden kan via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2011/lable&quot;&gt;aanmeldformulier&lt;/a&gt;&lt;/p&gt;
  16239. </content>
  16240.  </entry>
  16241.  <entry>
  16242.    <title>Fronteers zoekt vrijwilligers</title>
  16243.    <link href="https://www.fronteers.nl/nl/blog/2011/01/fronteers-zoekt-vrijwilligers"/>
  16244.    <updated>2011-01-08T00:00:00Z</updated>
  16245.    <id>https://www.fronteers.nl/nl/blog/2011/01/fronteers-zoekt-vrijwilligers</id>
  16246.    <content xml:lang="nl" type="html">&lt;p&gt;Zoals je waarschijnlijk weet, draait Fronteers geheel op vrijwilligers. Naast het werk van het bestuur en de verschillende commissies worden ook de bijeenkomsten, deze website en het congres allemaal door vrijwilligers georganiseerd en onderhouden. Alles bij elkaar een hele hoop werk, waar de huidige vrijwilligers helaas niet altijd aan toekomen. We zijn dan ook op zoek naar personen die mee willen helpen om ervoor te zorgen dat alle grootse plannen en kleine klusjes ten uitvoer gebracht kunnen worden.&lt;/p&gt;
  16247. &lt;p&gt;Hieronder vind je een aantal taken waarvoor we momenteel nog mensen zoeken:&lt;/p&gt;
  16248. &lt;ul&gt;
  16249. &lt;li&gt;Blogposts over WCAG 2 schrijven&lt;/li&gt;
  16250. &lt;li&gt;Voorzitter commissie onderwijs&lt;/li&gt;
  16251. &lt;li&gt;Lid commissie onderwijs (docent)&lt;/li&gt;
  16252. &lt;li&gt;Bronnen voor front-end ontwikkelaars op deze site updaten&lt;/li&gt;
  16253. &lt;li&gt;Cursussen organiseren&lt;/li&gt;
  16254. &lt;li&gt;Examenvragen opstellen&lt;/li&gt;
  16255. &lt;li&gt;Examenvragen online zetten&lt;/li&gt;
  16256. &lt;li&gt;Proefexamens organiseren&lt;/li&gt;
  16257. &lt;/ul&gt;
  16258. &lt;p&gt;Meer informatie over de bovenstaande taken en de mogelijkheid om je als vrijwilliger aan te melden vind je op de pagina &lt;a href=&quot;https://www.fronteers.nl/vereniging/vrijwilligers&quot;&gt;vrijwilligers gezocht!&lt;/a&gt;.&lt;/p&gt;
  16259. </content>
  16260.  </entry>
  16261.  <entry>
  16262.    <title>Workshop CSS Positionering op 20 januari</title>
  16263.    <link href="https://www.fronteers.nl/nl/blog/2010/12/workshop-css-positionering"/>
  16264.    <updated>2010-12-21T00:00:00Z</updated>
  16265.    <id>https://www.fronteers.nl/nl/blog/2010/12/workshop-css-positionering</id>
  16266.    <content xml:lang="nl" type="html">&lt;p&gt;Wil je het jaar goed beginnen of je CSS kennis weer eens bijspijkeren? Dan is dit je kans! Op donderdag 20 januari 2011 geeft PPK zijn &lt;a href=&quot;https://www.fronteers.nl/workshops/css-positionering-peter-paul-koch&quot;&gt;cursus CSS Positionering&lt;/a&gt;. De cursus zal worden gegeven bij Seats2Meet in Utrecht op minder dan een steenworp afstand van station Utrecht Centraal.&lt;/p&gt;
  16267. &lt;p&gt;Na een jaartje van stilte op cursusgebied beginnen we 2011 goed met een cursus CSS Positionering. De cursus zal gegeven worden door PPK bij Seats2Meet in Utrecht. Het is even afwachten hoe een en ander gaat bevallen bij Seats2Meet maar in principe willen we hier vanwege de centrale ligging en de beschikbare faciliteiten, ons vaste cursushonk van maken.&lt;/p&gt;
  16268. &lt;p&gt;De cursus is open voor zowel leden als niet-leden. Voor &lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;leden&lt;/a&gt; bedragen de kosten €50,- en niet-leden betalen €100,- Het maximale aantal deelnemers is 12 zodat enige persoonlijke aandacht gegarandeerd kan worden. Voor dit bedrag krijg je een volledig verzorgde cursusdag van 10:00u tot 17:00u inclusief een uitgebreide lunch. Wees er daarom snel bij en &lt;a href=&quot;https://www.fronteers.nl/workshops/css-positionering-peter-paul-koch&quot;&gt;meld je aan&lt;/a&gt;.&lt;/p&gt;
  16269. &lt;p&gt;Het is de bedoeling om vanaf nu elke paar maanden, of vaker als daar behoefte aan is, een workshop te geven. Dit hangt uiteraard ook af van de beschikbaarheid van &lt;a href=&quot;https://www.fronteers.nl/nl/activiteiten/workshops/#meer-informatie-voor-trainers&quot;&gt;trainers&lt;/a&gt;.
  16270. Voor begin 2011 hebben we in elk geval een workshop JavaScript in het verschiet. Aangezien niet iedereen JavaScript kent op hetzelfde niveau zal deze waarschijnlijk gegeven worden in een beginners, gevorderden en expert vorm. Met welke we zullen beginnen, weten we nog niet precies.&lt;/p&gt;
  16271. </content>
  16272.  </entry>
  16273.  <entry>
  16274.    <title>Seminar: Alles over WCAG 2.0 en Webrichtlijnen 2</title>
  16275.    <link href="https://www.fronteers.nl/nl/blog/2010/12/seminar-wcag-2-en-webrichtlijnen-2"/>
  16276.    <updated>2010-12-02T00:00:00Z</updated>
  16277.    <id>https://www.fronteers.nl/nl/blog/2010/12/seminar-wcag-2-en-webrichtlijnen-2</id>
  16278.    <content xml:lang="nl" type="html">&lt;p&gt;De officiële Nederlandse vertaling van WCAG en Webrichtlijnen 2 zijn (bijna) klaar. Stichting Accessibility organiseert met W3C ter gelegenheid hiervan een seminar in twee delen over de belangrijkste verschillen en verbeteringen: Wat betekenen de nieuwe richtlijnen voor uw site of voor u als bouwer. Moeten er zaken aangepast of blijft alles hetzelfde t.o.v. de huidige versies van deze documenten. Het seminar vindt plaats op vrijdag 10 december. Op beide dagdelen is apart in te schrijven. Dit seminar is een vervolg op het seminar dat we vorig jaar december hebben georganiseerd.&lt;/p&gt;
  16279. &lt;p&gt;In het ochtendprogramma, dat zich vooral richt op frontend-ontwikkelaars, zal diep op de technisch-inhoudelijke kant van de nieuwe (web)richtlijnen worden ingegaan. Er zijn presentaties door diverse bij de ontwikkeling van de nieuwe norm betrokken specialisten zoals Stephen Hay, Raph de Rooij en Eric Velleman. Daarnaast zal Steven Pemberton van het W3C een presentatie geven over de geweldige mogelijkheden van XForms voor formulieren.&lt;/p&gt;
  16280. &lt;p&gt;In het middagprogramma zullen vooral de beleidsmatige vraagstukken aan de orde komen, met best practice voorbeelden van webbouwers, bedrijven en gemeenten. Daarnaast zal er gesproken worden door het Ministerie van Binnenlandse zaken en is er informatie over inbedding van de nieuwe richtlijnen in het Waarmerk drempelvrij.nl.&lt;/p&gt;
  16281. &lt;p&gt;Lokatie: Figi, Zeist
  16282. Kosten: € 195,00 dagdeel, € 295,00 hele dag (leden van Fronteers ontvangen 50% korting op de toegangsprijs)&lt;/p&gt;
  16283. &lt;p&gt;Lees meer op &lt;a href=&quot;http://www.accessibility.nl/internet/training/wcag20wr-seminar/&quot;&gt;accessibility.nl/internet/training/wcag20wr-seminar/&lt;/a&gt;.&lt;/p&gt;
  16284. </content>
  16285.  </entry>
  16286.  <entry>
  16287.    <title>Verslag Webrichtlijnendag 15 november in Amersfoort</title>
  16288.    <link href="https://www.fronteers.nl/nl/blog/2010/11/webrichtlijnendag"/>
  16289.    <updated>2010-11-22T00:00:00Z</updated>
  16290.    <id>https://www.fronteers.nl/nl/blog/2010/11/webrichtlijnendag</id>
  16291.    <content xml:lang="nl" type="html">&lt;p&gt;Op 15 november was er een &amp;quot;terugkomdag&amp;quot; voor gemeenten die hadden deelgenomen aan een training webrichtlijnen. Er waren presentaties, workshops en een informatiemarkt. Mijn collega-fronteer Wim van Iersel en ik waren gevraagd om onze vereniging te vertegenwoordigen.&lt;/p&gt;
  16292. &lt;p&gt;De insteek van de dag was niet zozeer technisch, maar was meer gericht op projectleiders en content managers bij gemeenten die bezig zijn hun website (beter) te laten voldoen aan de webrichtlijnen.&lt;/p&gt;
  16293. &lt;p&gt;Bert Mulder, lector van de Haagse Hogeschool, gaf in zijn presentatie een mooi overzicht van de ontwikkeling door de jaren heen van het gebruik van internet door de overheid. In eerste instantie was het alleen van belang voor gemeenten om &#39;online te zijn&#39;. Pas later werd er beter gekeken naar de werking van deze websites en of ze wel toegankelijk waren voor een breed publiek.
  16294. Dat het niet alleen een kwestie van techniek is maar ook van content, kwam goed naar voren in een voorbeeld van een (oud) WMO-loket, waarin niet alleen het taalgebruik veel te ingewikkeld was, maar ook verschillende stromen content nogal ongelukkig naast elkaar kwamen te staan. We kregen als tip om op Youtube de filmpjes van ‘Lekker Slim’ te bekijken en de teksten daarop af te stemmen: dan begrijpt iedereen het!&lt;/p&gt;
  16295. &lt;p&gt;In de eerste workshopronde was ik bij de sessie van Robert Jan Verkade en Stephen Hay over Webrichtlijnen 2. Robert Jan liet in zijn slides een foto zien met daarop een hele stapel papieren die alleen nog maar de verschillen (herformuleringen) tussen versie 1 en 2 beschreef. Hij raadde de deelnemers niet aan om deze door te lezen omdat het toch vooral technische punten zijn. Stephen voegde hier nog wel even aan toe dat deze teksten voor front-end developers wel erg interessant zijn. Dus we weten wat ons te doen staat...
  16296. De kern van het betoog was gelukkig positief: WR2 gaat verder op de principes van WR1, dus als je nu bezig bent met je site WR1 compliant te krijgen zal geen enkele moeite voor niks zijn. Versie 2 wordt flexibeler doordat bijvoorbeeld niet meer wordt vastgehouden aan stricte validatie en doctypes, maar meer aan een juist gebruik van de gekozen taal. Het gebruik van open specificaties wordt ook erg belangrijk. Daarnaast wordt tegemoetgekomen aan de webbouwers en contentbeheerders door online concrete goede en foute voorbeelden bij de richtlijnen te zetten.&lt;/p&gt;
  16297. &lt;p&gt;Na de lunch en informatiemarkt woonde ik de workshop bij van Stichting Accessibility en Qualityhouse over het toetsingsproces voor &#39;het groene mannetje&#39;. De heren legden vrij gedetailleerd uit hoe de keuring in zijn werk gaat. Wat duidelijk naar voren kwam, is dat je er niet bent met een eenmalige inspanning. Wanneer je het logo op je site zet, verplicht je jezelf tot een jaarlijkse - even grondige - herkeuring. Bezoekers van de site kunnen ook een klacht indienen bij de stichting Drempelvrij wanneer zij constateren dat de site niet (meer) toegankelijk is. Dit klachtenformulier zit achter het logo, waar veelvuldig op geklikt wordt (vooral bij Wehkamp), maar wat in het algemeen nog nauwelijks tot ingestuurde klachten heeft geleid. Wel krijgen ze mailtjes waarom hun bestelling nog niet is afgeleverd...&lt;/p&gt;
  16298. &lt;p&gt;Afsluiter van de dag was voor mij de workshop van Simon Besters, die liet zien hoe het de gemeente Goirle gelukt was aan de webrichtlijnen te voldoen. Het was leuk om te zien hoe hij met hele concrete voorbeelden kwam over bijvoorbeeld kleurcontrast en headings en problemen waar ze tegenaan liepen tijdens het proces, zoals het omzetten van pdf&#39;s naar de toegestane A-1a variant. Qua totale manuren en geld dat erin was gestopt leek het erg mee te vallen. Het was even doorbijten om 1200 pagina&#39;s door te spitten en om te zetten, maar dan heb je ook wat! Deelnemers van grotere gemeenten keken wel wat jaloers: wij hebben duizenden pagina&#39;s....
  16299. Hoe dan ook leek me dit een zeer motiverende presentatie om zelf ook voor drie sterren te gaan.&lt;/p&gt;
  16300. &lt;h2&gt;Meer informatie:&lt;/h2&gt;
  16301. &lt;ul&gt;
  16302. &lt;li&gt;&lt;a href=&quot;http://www.webrichtlijnen.nl/actueel/de-webrichtlijnen-leven-volop-bij-gemeentes&quot;&gt;http://www.webrichtlijnen.nl/actueel/de-webrichtlijnen-leven-volop-bij-gemeentes&lt;/a&gt;&lt;/li&gt;
  16303. &lt;li&gt;&lt;a href=&quot;http://www.drempelvrij.nl/waarmerk&quot;&gt;http://www.drempelvrij.nl/waarmerk&lt;/a&gt;&lt;/li&gt;
  16304. &lt;li&gt;&lt;a href=&quot;http://www.goirle.nl/&quot;&gt;http://www.goirle.nl/&lt;/a&gt;&lt;/li&gt;
  16305. &lt;/ul&gt;
  16306. </content>
  16307.  </entry>
  16308.  <entry>
  16309.    <title>Bijeenkomst op 13 december, in Groningen</title>
  16310.    <link href="https://www.fronteers.nl/nl/blog/2010/11/bijeenkomst-december"/>
  16311.    <updated>2010-11-16T00:00:00Z</updated>
  16312.    <id>https://www.fronteers.nl/nl/blog/2010/11/bijeenkomst-december</id>
  16313.    <content xml:lang="nl" type="html">&lt;p&gt;Op maandag 13 december is Fronteers weer in het Noorden van het land, deze keer bij &lt;a href=&quot;http://iwink.nl/&quot;&gt;iWink&lt;/a&gt; te Groningen. Peter Beverloo vertelt over Audio APIs en Simon Wisselink over front-end performance.&lt;/p&gt;
  16314. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  16315. &lt;ul&gt;
  16316. &lt;li&gt;19.00 inloop&lt;/li&gt;
  16317. &lt;li&gt;19.25 welkomstwoord&lt;/li&gt;
  16318. &lt;li&gt;19.30 Peter Beverloo over Audio APIs&lt;/li&gt;
  16319. &lt;li&gt;20.30 pauze&lt;/li&gt;
  16320. &lt;li&gt;20.45 Simon Wisselink over front-end performance&lt;/li&gt;
  16321. &lt;li&gt;21.45 borrelen/netwerken&lt;/li&gt;
  16322. &lt;/ul&gt;
  16323. &lt;h2&gt;Audio APIs&lt;/h2&gt;
  16324. &lt;p&gt;Eén van de onderwerpen waarvoor het web nog geen goed platform biedt is audio. Met de het nieuwe audio-element in HTML5 is een goede stap gezet in de richting van betere ondersteuning, maar veel verder dan afspelen gaat dit nog niet. Om dit te verbeteren zijn teams van Mozilla, Google en Apple bezig om een API te ontwerpen voor de analyse, manipulatie en creatie van geluid binnen iedere webapplicatie.&lt;/p&gt;
  16325. &lt;h2&gt;Front-end performace&lt;/h2&gt;
  16326. &lt;p&gt;Onderzoek heeft aangetoond dat snelle webpagina&#39;s beter scoren op conversie dan langzame webpagina&#39;s. Daarbij gaat het met name om de totale wachttijd die de gebruiker ervaart. Als Front-ender zijn er tal van dingen die je kunt doen om deze tijd te verkorten. Simon Wisselink zal in deze sessie aan de hand van een voorbeeldsite ingaan op de aanbevelingen van Yahoo (YSlow-plugin voor Firefox) en Google (Pagespeed-plugin voor Firefox) en zo laten zien hoe je de snelheid van je webpagina&#39;s gemakkelijk kunt verbeteren.&lt;/p&gt;
  16327. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  16328. &lt;p&gt;De bijeenkomst wordt gehouden in Brasserie Bites in de Mediacentrale. Bites is gevestigd aan Helperpark 276A, 9723 ZA Groningen. Er is een routebeschrijving te vinden op de website van Bites.&lt;/p&gt;
  16329. &lt;p&gt;Zoals altijd is de bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Geef je op, zodat we weten voor hoeveel mensen we catering nodig hebben.&lt;/p&gt;
  16330. </content>
  16331.  </entry>
  16332.  <entry>
  16333.    <title>Fronteers boekenclub?</title>
  16334.    <link href="https://www.fronteers.nl/nl/blog/2010/11/fronteers-boekenclub"/>
  16335.    <updated>2010-11-08T00:00:00Z</updated>
  16336.    <id>https://www.fronteers.nl/nl/blog/2010/11/fronteers-boekenclub</id>
  16337.    <content xml:lang="nl" type="html">&lt;p&gt;Tijdens het congres is in de wandelgangen het idee ontstaan om een inkoopactie te starten voor het nieuwe boek van Andy Clarke, &lt;a href=&quot;http://hardboiledwebdesign.com/&quot;&gt;Hardboiled Web Design&lt;/a&gt;. Voordat we er echt werk van gaan maken uit te zoeken hoe we dit het best kunnen opzetten (en of het concept herbruikbaar gaat zijn voor andere boeken waar Fronteersleden mogelijkerwijs in geïnteresseerd zouden zijn) willen we graag van jullie weten hoeveel mensen hier überhaupt interesse in hebben.&lt;/p&gt;
  16338. &lt;p&gt;Verder hebben we al een aantal concrete ideeën waar we graag van horen of jullie dat zien zitten:&lt;/p&gt;
  16339. &lt;ul&gt;
  16340. &lt;li&gt;Paperback of Hardcover;&lt;/li&gt;
  16341. &lt;li&gt;Extra korting voor leden van Fronteers;&lt;/li&gt;
  16342. &lt;li&gt;Distributie via de meetings van Fronteers om te besparen op verzendkosten.&lt;/li&gt;
  16343. &lt;/ul&gt;
  16344. &lt;p&gt;Laat hieronder je mening horen over dit iniatief en dan gaan we op korte termijn bekijken wat er mogelijk is. Happy reading!&lt;/p&gt;
  16345. </content>
  16346.  </entry>
  16347.  <entry>
  16348.    <title>Meld je aan voor de Algemene Ledenvergadering 2010</title>
  16349.    <link href="https://www.fronteers.nl/nl/blog/2010/11/meld-je-aan-voor-de-algemene-ledenvergadering-2010"/>
  16350.    <updated>2010-11-06T00:00:00Z</updated>
  16351.    <id>https://www.fronteers.nl/nl/blog/2010/11/meld-je-aan-voor-de-algemene-ledenvergadering-2010</id>
  16352.    <content xml:lang="nl" type="html">&lt;p&gt;Woensdag 24 november a.s. houden we onze jaarlijkse algemene ledenvergadering (ALV). De ALV vindt plaats in de Haasse/Vestdijkzaal van de Openbare Bilbliotheek Amsterdam (Oosterdokskade 143, 1011 DL). De OBA is uitstekend per openbaar vervoer bereikbaar, de bibliotheek bevindt zich op loopafstand van Amsterdam Centraal Station (je kunt ook tram 26 pakken, de IJtram). We beginnen om 19.00 uur en denken maximaal twee uur nodig te hebben.&lt;/p&gt;
  16353. &lt;p&gt;De agenda is als volgt:&lt;/p&gt;
  16354. &lt;ol&gt;
  16355. &lt;li&gt;Welkom en opening door de voorzitter&lt;/li&gt;
  16356. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  16357. &lt;li&gt;Terugblik 2010&lt;/li&gt;
  16358. &lt;li&gt;Ingebrachte beleidsvoorstellen&lt;/li&gt;
  16359. &lt;li&gt;Besluiten eerdere ALV’s&lt;/li&gt;
  16360. &lt;li&gt;Begroting&lt;/li&gt;
  16361. &lt;li&gt;Kascommissieverkiezing&lt;/li&gt;
  16362. &lt;li&gt;Bestuursverkiezing&lt;/li&gt;
  16363. &lt;li&gt;Rondvraag&lt;/li&gt;
  16364. &lt;li&gt;Sluiting&lt;/li&gt;
  16365. &lt;/ol&gt;
  16366. &lt;p&gt;De commissievoorzitters (of hun vervangers) geven een korte toelichting op het gedane werk in het afgelopen jaar en ontvouwen hun toekomstplannen voor 2011. Natuurlijk staan zij ook open voor vragen. Verder treedt (in lijn met de statuten) bestuurslid Tom Greuter af en stelt hij zich herkiesbaar.&lt;/p&gt;
  16367. &lt;p&gt;Het bestuur nodigt alle leden nadrukkelijk uit om vragen, ideeën of voorstellen in te dienen. De vereniging is van iedereen, en de koers bepalen we met zijn allen. Alles wat je kwijt wilt kun je melden via het &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contactformulier&lt;/a&gt;. Duik eens in de &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen&quot;&gt;notulen&lt;/a&gt; voor inspiratie.&lt;/p&gt;
  16368. &lt;p&gt;Meld je zo gauw mogelijk aan voor de ALV middels onderstaand formulier, zodat wij ons enigzins een beeld kunnen vormen van de verwachte toeloop. Je komst is niet voor niks. Ten eerste bepaal je mede de koers van Fronteers in 2011, ten tweede scoor je die exclusieve Fronteersgadget die niemand anders heeft (&lt;em&gt;onder voorbehoud&lt;/em&gt;). Samen reizen met iemand? Neem even &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact&lt;/a&gt; op met de ledenadministratie en we koppelen jullie aan elkaar.&lt;/p&gt;
  16369. &lt;h2&gt;Aanmeldingen&lt;/h2&gt;
  16370. &lt;ol&gt;
  16371. &lt;li&gt;Tom Greuter (Amsterdam, bakfiets)&lt;/li&gt;
  16372. &lt;li&gt;Vasilis van Gemert (Amsterdam, fiets)&lt;/li&gt;
  16373. &lt;li&gt;Peter Beverloo (Amsterdam, ov)&lt;/li&gt;
  16374. &lt;li&gt;Sander Aarts (Tilburg, unknown)&lt;/li&gt;
  16375. &lt;li&gt;Hidde de Vries (Utrecht, ov)&lt;/li&gt;
  16376. &lt;li&gt;Rein Groot (Amsterdam, fiets)&lt;/li&gt;
  16377. &lt;li&gt;Kor Dwarshuis (Amsterdam, fiets)&lt;/li&gt;
  16378. &lt;li&gt;Sander van Lambalgen (Den Haag, ov)&lt;/li&gt;
  16379. &lt;li&gt;Peter-Paul Koch (Amsterdam, fiets)&lt;/li&gt;
  16380. &lt;li&gt;Glenn Glerum (Groningen, ov)&lt;/li&gt;
  16381. &lt;li&gt;Thijs Reijgersberg (Haarlem, ov)&lt;/li&gt;
  16382. &lt;li&gt;Wim van Iersel (Tilburg, ov)&lt;/li&gt;
  16383. &lt;li&gt;Edwin Martin (Hilversum, ov)&lt;/li&gt;
  16384. &lt;li&gt;Luc De Brouwer (Venlo, unknown)&lt;/li&gt;
  16385. &lt;li&gt;Mallory (Sliedrecht, ov?) Wil graag meerijden met iemand uit de omgeving Dordrecht/Breda.&lt;/li&gt;
  16386. &lt;li&gt;Justin Halsall (Amsterdam, fiets)&lt;/li&gt;
  16387. &lt;li&gt;Krijn Hoetmer (Almere, ov)&lt;/li&gt;
  16388. &lt;li&gt;Talbert Boef (Amsterdam, fiets)&lt;/li&gt;
  16389. &lt;li&gt;Arjan Eising (Beilen, ov)&lt;/li&gt;
  16390. &lt;li&gt;Matijs Brinkhuis (Utrecht, ov)&lt;/li&gt;
  16391. &lt;li&gt;Elmer Bulthuis (Haarlem/Den Haag, ov)&lt;/li&gt;
  16392. &lt;li&gt;En nog 1 persoon&lt;/li&gt;
  16393. &lt;/ol&gt;
  16394. </content>
  16395.  </entry>
  16396.  <entry>
  16397.    <title>Vooraankondiging ALV</title>
  16398.    <link href="https://www.fronteers.nl/nl/blog/2010/10/vooraankondiging-alv"/>
  16399.    <updated>2010-10-25T00:00:00Z</updated>
  16400.    <id>https://www.fronteers.nl/nl/blog/2010/10/vooraankondiging-alv</id>
  16401.    <content xml:lang="nl" type="html">&lt;p&gt;Blok deze datum in je agenda! Woensdag 24 november vindt de jaarlijkse Algemene Ledenvergadering van Fronteers plaats, om 19 uur nabij station Amsterdam C.S.&lt;/p&gt;
  16402. &lt;p&gt;Leden bepalen mede de koers van Fronteers. Als lid van de vereniging heb je er recht op om te weten wat we het afgelopen jaar hebben gedaan en wat onze plannen zijn voor de toekomst. Kom daarom naar de Algemene Ledenvergadering (ALV) van Fronteers.&lt;/p&gt;
  16403. &lt;p&gt;We zullen stilstaan bij de activiteiten van de &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies&quot;&gt;commissies&lt;/a&gt;, de begroting en de gebruikelijke stoelendans van het bestuur. Het volledige programma volgt nog.&lt;/p&gt;
  16404. &lt;p&gt;Om vast warm te draaien kun je je verdiepen in de &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen/27-11-09&quot;&gt;notulen van vorig jaar&lt;/a&gt;. Als je zaken aan de orde wilt stellen, voorstellen in wilt dienen of andere goede ideeën hebt, neem dan &lt;a href=&quot;https://www.fronteers.nl/nl/vereniging/contact/&quot;&gt;contact op met het bestuur&lt;/a&gt;, graag zelfs!&lt;/p&gt;
  16405. &lt;p&gt;We willen rond 19.00 uur beginnen en verwachten maximaal twee uur nodig te hebben. Daarna is er natuurlijk tijd voor een (dit jaar extra bijzonder) webstandaardenbiertje!&lt;/p&gt;
  16406. </content>
  16407.  </entry>
  16408.  <entry>
  16409.    <title>Artikel in NRC</title>
  16410.    <link href="https://www.fronteers.nl/nl/blog/2010/10/artikel-in-nrc"/>
  16411.    <updated>2010-10-10T00:00:00Z</updated>
  16412.    <id>https://www.fronteers.nl/nl/blog/2010/10/artikel-in-nrc</id>
  16413.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 5 oktober &lt;a href=&quot;http://www.readwriteweb.com/archives/internet_explorer_drops_below_50_market_share_worl.php&quot;&gt;werd&lt;/a&gt; &lt;a href=&quot;http://www.zeldman.com/2010/10/07/no-comment/&quot;&gt;bekend&lt;/a&gt; dat Internet Explorer wereldwijd tot onder de 50% martkaandeel is gezakt — als we althans &lt;a href=&quot;http://gs.statcounter.com/&quot;&gt;StatCounter&lt;/a&gt; mogen geloven (wat ikzelf op dit moment doe). (&lt;a href=&quot;http://gs.statcounter.com/#browser-NL-monthly-200809-201010&quot;&gt;In Nederland&lt;/a&gt; is dat aandeel overigens nog 64%.)&lt;/p&gt;
  16414. &lt;p&gt;&lt;a href=&quot;http://nl.linkedin.com/in/march&quot;&gt;Marc Hijink&lt;/a&gt; van &lt;a href=&quot;http://nrc.nl/&quot;&gt;NRC Handelsblad&lt;/a&gt; pikte dit nieuwtje op, zag in dat hij achtergrondinformatie miste, ging naar &lt;a href=&quot;https://www.fronteers.nl/congres/2010&quot;&gt;Fronteers 2010&lt;/a&gt; en schoot daar de keynote spreker van dag 1, &lt;a href=&quot;http://adactio.com/&quot;&gt;Jeremy Keith&lt;/a&gt;, aan voor nadere uitleg.&lt;/p&gt;
  16415. &lt;p&gt;Jeremy kweet zich overtuigend van zijn taak en het resultaat is een uiterst helder stuk in het NRC van zaterdag 9 oktober, waar de browsersituatie correct in staat beschreven, alle vijf browsers behandeld worden, en ook aandacht wordt besteed aan progressive enhancement op mobiel en de videoformaatoorlog. Ook Fronteers wordt expliciet genoemd.&lt;/p&gt;
  16416. &lt;p&gt;Voor zover ik weet is dit de eerste keer dat de ideeën van webontwikkelaars zo veel aandacht krijgen in de Nederlandse pers.&lt;/p&gt;
  16417. &lt;p&gt;Jammer blijft natuurlijk dat het artikel online niet te vinden is. Oude media, zullen we maar zeggen. Gelukkig is er wel een &lt;a href=&quot;http://cl.ly/1d8f6b531a10e8b7e665&quot;&gt;scan&lt;/a&gt; beschikbaar.&lt;/p&gt;
  16418. &lt;p&gt;Mocht iemand zich geroepen voelen het in het Engels te vertalen, dan zou Jeremy daar blij mee zijn.&lt;/p&gt;
  16419. </content>
  16420.  </entry>
  16421.  <entry>
  16422.    <title>Bijeenkomst op 4 november in Gent (België)</title>
  16423.    <link href="https://www.fronteers.nl/nl/blog/2010/09/bijeenkomst-netlog"/>
  16424.    <updated>2010-09-28T00:00:00Z</updated>
  16425.    <id>https://www.fronteers.nl/nl/blog/2010/09/bijeenkomst-netlog</id>
  16426.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 4 november is Fronteers te gast bij Netlog in Gent (jawel, in België!). Er worden twee presentaties voorzien. Eerst komt &lt;a href=&quot;http://www.quirksmode.org/about/&quot;&gt;Peter-Paul Koch&lt;/a&gt; (PPK) praten over &lt;em&gt;mobile web development&lt;/em&gt;; vervolgens vertelt &lt;a href=&quot;http://lensco.be/&quot;&gt;Lennart Schoors&lt;/a&gt; wat over &lt;em&gt;web design for right-to-left languages&lt;/em&gt;.&lt;/p&gt;
  16427. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  16428. &lt;ul&gt;
  16429. &lt;li&gt;18:00 ontvangst met broodjes en een drankje&lt;/li&gt;
  16430. &lt;li&gt;19:00 Peter-Paul Koch over &lt;em&gt;mobile web development&lt;/em&gt;&lt;/li&gt;
  16431. &lt;li&gt;20:00 Lennart Schoors over &lt;em&gt;web design for right-to-left languages&lt;/em&gt;&lt;/li&gt;
  16432. &lt;li&gt;21:00 naborrelen&lt;/li&gt;
  16433. &lt;/ul&gt;
  16434. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  16435. &lt;p&gt;Netlog NV is gevestigd aan het Emile Braunplein 18, 9000 Gent. Er is een plannetje beschikbaar op &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2010/netlog&quot;&gt;de detailpagina van deze bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  16436. &lt;h2&gt;Kom jij ook?&lt;/h2&gt;
  16437. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 50 mannen en vrouwen.&lt;/p&gt;
  16438. </content>
  16439.  </entry>
  16440.  <entry>
  16441.    <title>Verslag actieve ledenuitje 2010</title>
  16442.    <link href="https://www.fronteers.nl/nl/blog/2010/09/verslag-actieve-ledenuitje-2010"/>
  16443.    <updated>2010-09-21T00:00:00Z</updated>
  16444.    <id>https://www.fronteers.nl/nl/blog/2010/09/verslag-actieve-ledenuitje-2010</id>
  16445.    <content xml:lang="nl" type="html">&lt;p&gt;Zaterdag 11 september hebben de actieve leden van Fronteers gezeild over het Markermeer. Actieve leden zijn leden die in een of meer commissies zitten. We hebben met z&#39;n vijftienen een gezellige dag gehad, met als afsluiting een lekkere barbecue.&lt;/p&gt;
  16446. &lt;p&gt;Na rond 13 uur af te hebben gesproken met elkaar bij Café de Pont, aan de overkant van het IJ bij Amsterdam Centraal, gingen we met drie auto&#39;s naar Muiden. Daar wachtten enkele leden die met het OV kwamen op de boot. Na kennis gemaakt te hebben met de schipper en zijn hulpen, voeren we af richting het Noorden van het Markermeer.&lt;/p&gt;
  16447. &lt;p&gt;Onderweg zagen we onder andere het Muizenfort, en we voeren langs het eiland Pampus. De schipper wist een en ander te vertellen over de historie van het gebied. Ondertussen mochten enkele leden hard meehelpen om de zeilen te hijsen.&lt;/p&gt;
  16448. &lt;p&gt;We hadden uitstekend weer. Er stond genoeg wind uit het zuidoosten, en de zon zorgde ervoor dat we in een t-shirt konden genieten van de oer-Nederlandse wateren. We sloten de dag af met een barbecue.&lt;/p&gt;
  16449. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/2010/09/actieve-leden-uitje.jpg&quot; alt=&quot;Enkele leden hard aan het werk om de zeilen te heisen.&quot; /&gt;&lt;/p&gt;
  16450. &lt;p&gt;Onder andere &lt;a href=&quot;http://picasaweb.google.nl/100182639623410231517/FronteersVrijwilligersdag2010&quot;&gt;Edwin Martin&lt;/a&gt;, &lt;a href=&quot;http://www.flickr.com/photos/tomgreuter/tags/fronteerszeilen2010/&quot;&gt;Tom Greuter&lt;/a&gt; en &lt;a href=&quot;http://www.flickr.com/photos/arjaneising/sets/72157624981868442/&quot;&gt;ondergetekende&lt;/a&gt; hebben foto&#39;s gemaakt. Bovenstaande foto is gemaakt door Edwin Martin.&lt;/p&gt;
  16451. &lt;p&gt;Als je volgend jaar ook bij het ledenuitje wilt zijn, dan kun je actiever worden binnen Fronteers. We zoeken onder andere leden die in de commissie Diplomering en Onderwijs willen zetelen. Ook het opzetten van iets nieuws ondersteunen we van harte!&lt;/p&gt;
  16452. </content>
  16453.  </entry>
  16454.  <entry>
  16455.    <title>&#39;Fronteers 2010: We gaan (weer) uitverkopen!&#39;</title>
  16456.    <link href="https://www.fronteers.nl/nl/blog/2010/09/fronteers-2010-gaat-uitverkopen"/>
  16457.    <updated>2010-09-20T00:00:00Z</updated>
  16458.    <id>https://www.fronteers.nl/nl/blog/2010/09/fronteers-2010-gaat-uitverkopen</id>
  16459.    <content xml:lang="nl" type="html">&lt;p&gt;Nog maar &lt;em&gt;twee weken&lt;/em&gt; en dan is het eindelijk zover. Fronteers 2010 belooft weer een succes te worden! Hieronder de laatste update vanuit de commissie.&lt;/p&gt;
  16460. &lt;h2&gt;Laatste sprekers bekend&lt;/h2&gt;
  16461. &lt;p&gt;Via &lt;a href=&quot;https://twitter.com/FronteersConf/status/23903002230&quot;&gt;Twitter&lt;/a&gt; hebben we een tijdje terug de laatste vier sprekers van dit jaar toegevoegd. &lt;a href=&quot;https://www.fronteers.nl/congres/2010/speakers#stephen-hay&quot;&gt;&lt;em&gt;Stephen Hay&lt;/em&gt;&lt;/a&gt; en &lt;a href=&quot;https://www.fronteers.nl/congres/2010/speakers#christian-heilmann&quot;&gt;&lt;em&gt;Chris Heilmann&lt;/em&gt;&lt;/a&gt;, bekend van de afgelopen twee jaar, komen weer terug om hun visitekaartje af te geven. Stephen zal ons vertellen over &lt;a href=&quot;https://www.fronteers.nl/congres/2010/sessions#real-world-responsive-design&quot;&gt;Real-world Responsive Design&lt;/a&gt; en Chris heeft iets bijzonders voor ons in petto als afsluiting van het congres.&lt;/p&gt;
  16462. &lt;p&gt;Naast deze twee oudgedienden van Fronteers hebben we &lt;a href=&quot;https://www.fronteers.nl/congres/2010/speakers#paul-irish&quot;&gt;&lt;em&gt;Paul Irish&lt;/em&gt;&lt;/a&gt; en &lt;a href=&quot;https://www.fronteers.nl/congres/2010/speakers/#robert-nyman&quot;&gt;&lt;em&gt;Robert Nyman&lt;/em&gt;&lt;/a&gt; aan de haak geslagen! Robert zal ons met &lt;a href=&quot;https://www.fronteers.nl/congres/2010/sessions#javascript-like-a-box-of-chocolates&quot;&gt;JavaScript - Like a box of chocolates&lt;/a&gt; een introductie geven in JavaScript en alle niet-JavaScripters in de zaal laten zien waarom ze toch de stap zouden moeten overwegen. Paul gaat met &lt;a href=&quot;https://www.fronteers.nl/congres/2010/sessions#the-state-of-html5-inaugural-address&quot;&gt;The State of HTML5: Inaugural Address&lt;/a&gt; laten zien hoe je HTML5 &lt;em&gt;nu&lt;/em&gt; optimaal kunt gebruiken.&lt;/p&gt;
  16463. &lt;h2&gt;Sprekerswissel&lt;/h2&gt;
  16464. &lt;p&gt;Helaas heeft Jeff Croft aangegeven dat hij het dit jaar niet redt om naar Amsterdam te komen. Gelukkig hebben we &lt;a href=&quot;https://www.fronteers.nl/congres/2010/speakers#meagan-fisher&quot;&gt;Meagan Fisher&lt;/a&gt; op het laatste moment bereid gevonden om zijn plaats in te nemen en ons te verblijden met haar komst. Haar onderwerp is nog niet helemaal bekend, maar je kunt een visueel spektakel verwachten waarbij de natuur en CSS bij elkaar gebracht worden.&lt;/p&gt;
  16465. &lt;h2&gt;Workshop &amp;quot;Bringing Your Design to Life with CSS3&amp;quot; door Dan Rubin&lt;/h2&gt;
  16466. &lt;p&gt;De &lt;a href=&quot;https://www.fronteers.nl/congres/2010/workshops/css3-dan-rubin&quot;&gt;CSS3 workshop van Dan Rubin&lt;/a&gt;, op dinsdag 5 oktober in Felix Meritis, heeft ondertussen 21 bezoekers getrokken. Hiervoor zijn dus nog een aantal plaatsen beschikbaar. Ken je nog een designer die je graag wat meer over de (on)mogelijkheden van CSS wilt laten weten, stuur hem of haar dan naar deze workshop.&lt;/p&gt;
  16467. &lt;h2&gt;Programma bekend&lt;/h2&gt;
  16468. &lt;p&gt;Ook &lt;a href=&quot;https://www.fronteers.nl/congres/2010/schedule&quot;&gt;het programma&lt;/a&gt; is vorige week bekendgemaakt. Vanaf deze week zullen we de eendagsbezoekers benaderen om hun keuze door te geven (als je dit leest en je weet al welke dag je wilt komen, &lt;a href=&quot;https://www.fronteers.nl/congres/2010/contact&quot;&gt;laat het ons dan weten alsjeblieft&lt;/a&gt;). Er kunnen nog kleine wijzigingen plaatsvinden in het programma, dus hou het programma in de gaten.&lt;/p&gt;
  16469. &lt;h2&gt;Bijna uitverkocht&lt;/h2&gt;
  16470. &lt;p&gt;Op dit moment hebben we &lt;a href=&quot;https://www.fronteers.nl/congres/2010/attendees&quot;&gt;410 bezoekers&lt;/a&gt;(!) op de teller staan en we verwachten in de komende week de laatste 40 kaartjes te verkopen. Aan iedereen die dus nog zit te twijfelen (we kunnen ons totaal niet voorstellen waarom, maar oke): maak snel je keuze!&lt;/p&gt;
  16471. &lt;h2&gt;Sluiting kaartverkoop op 29 september&lt;/h2&gt;
  16472. &lt;p&gt;Een andere reden om snel te beslissen is dat de kaartverkoop voor het congres op &lt;em&gt;woensdag 29 september om 12 uur &#39;s middags sluit&lt;/em&gt;. Of eerder, indien we voor die tijd de 450 namen al bereikt hebben. Hierdoor hebben de vrijwilligers die achter de schermen zwetend zwoegen om alles rond te krijgen nog een week de tijd om alles met een definitieve bezoekerslijst klaar te maken. Iedereen die na deze datum nog binnen probeert te komen, kan een kille &amp;quot;Nee&amp;quot; verwachten. Hopelijk hiervoor jullie begrip.&lt;/p&gt;
  16473. &lt;p&gt;Het aftellen is begonnen, fijne meevallers zullen zich aandienen en ook minieme tegenslagen zullen we met open armen ontvangen. Net als alle 450 front-end developers uit binnen- en buitenland die op 7 en 8 oktober de Reguliersbreestraat in Amsterdam gaan vullen.&lt;/p&gt;
  16474. &lt;p&gt;Tot dan!&lt;/p&gt;
  16475. &lt;p&gt;Aaron, Edwin, Hidde, Justin, Kilian, Krijn, Peter B., Peter S., Peter vd Z., Thijs, Vasilis en Wes&lt;/p&gt;
  16476. </content>
  16477.  </entry>
  16478.  <entry>
  16479.    <title>Bijeenkomst op 7 september, in Haarlem</title>
  16480.    <link href="https://www.fronteers.nl/nl/blog/2010/08/bijeenkomst-september"/>
  16481.    <updated>2010-08-20T00:00:00Z</updated>
  16482.    <id>https://www.fronteers.nl/nl/blog/2010/08/bijeenkomst-september</id>
  16483.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 7 september is Fronteers te gast bij &lt;a href=&quot;http://iprofs.nl/&quot;&gt;IPROFS&lt;/a&gt; in Haarlem. Er zullen twee presentaties gegeven worden: Wilfred Nas gaat een praatje houden over HTML5 best practices, en Raph de Rooij update ons over de laatste ontwikkelingen rond Webrichtlijnen versie 2.&lt;/p&gt;
  16484. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  16485. &lt;ul&gt;
  16486. &lt;li&gt;18:30 inloop (drinken/borrelhapjes)&lt;/li&gt;
  16487. &lt;li&gt;19:20 welkomstwoord: Remco Nabuurs&lt;/li&gt;
  16488. &lt;li&gt;19:30 eerste spreker: Wilfred Nas&lt;/li&gt;
  16489. &lt;li&gt;20:15 cq. 20:30 korte pauze (drinken/borrelhapjes)&lt;/li&gt;
  16490. &lt;li&gt;20:30 cq. 20:45 tweede spreker: Raph de Rooij&lt;/li&gt;
  16491. &lt;li&gt;21:15 cq. 21:30 ruimte voor vragen/discussie aan/met webrichtlijnen team&lt;/li&gt;
  16492. &lt;li&gt;21.30 Borrelen/netwerken&lt;/li&gt;
  16493. &lt;/ul&gt;
  16494. &lt;h2&gt;HTML5 en formulieren ( en andere niet sexy zaken )&lt;/h2&gt;
  16495. &lt;p&gt;De laatste jaren wordt er een hype gebouwd om HTML5 en dan met name om de &#39;sexy&#39; elementen als &lt;code&gt;video&lt;/code&gt;, &lt;code&gt;canvas&lt;/code&gt; en SVG. Zelfs CSS3 wordt in deze hype meegenomen. Zonde, aangezien er een boel nuttige elementen zijn die je nu kunt gebruiken in je werk, attributen als placeholder en elementen als &lt;code&gt;input type=&amp;quot;email&amp;quot;&lt;/code&gt; zijn nu al te gebruiken. Ik belicht wat zaken die ondergesneeuwd zijn en die je werk vandaag makkelijker kunnen maken.&lt;/p&gt;
  16496. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  16497. &lt;p&gt;IPROFS is gevestigd aan de Claus Sluterweg 125, 2012 WS Haarlem. Er is een routebeschrijving beschikbaar op de site van IPROFS.&lt;/p&gt;
  16498. &lt;p&gt;Zoals altijd is deze bijeenkosmt gratis toegankelijk voor zowel leden als niet-leden. Er is echter beperkt plaats, voor circa 45 mannen en vrouwen.&lt;/p&gt;
  16499. </content>
  16500.  </entry>
  16501.  <entry>
  16502.    <title>Donderdag 2 september zomerborrel in Antwerpen</title>
  16503.    <link href="https://www.fronteers.nl/nl/blog/2010/08/zomerborrel-antwerpen"/>
  16504.    <updated>2010-08-17T00:00:00Z</updated>
  16505.    <id>https://www.fronteers.nl/nl/blog/2010/08/zomerborrel-antwerpen</id>
  16506.    <content xml:lang="nl" type="html">&lt;p&gt;Nu we ook Belgische front-end ontwikkelaars als lid krijgen, is het hoog tijd een zomerborrel in België te beleggen. Een datum is geprikt: 2 september gaan we in samenwerking met &lt;a href=&quot;http://twoooze.be/&quot;&gt;Twoooze&lt;/a&gt; borrelen bij de Cargo Zomerbar.&lt;/p&gt;
  16507. &lt;p&gt;De Cargo Zomerbar is gevestigd aan de &lt;a href=&quot;http://maps.google.com/?q=Viaduct+Dam+1%2C+2060+Antwerpen+%28cargo+zomerbar%29&quot;&gt;Viaduct Dam 1, 2060 te Antwerpen&lt;/a&gt;. Vanaf 18 uur ben je welkom om bier, wijn of iets anders te drinken. Het eerste rondje wordt door Fronteers gesponsord. Geef even door dat je komt, door hier—inclusief je Twitter gebruikersnaam—een reactie te plaatsen, of door een @reply te sturen aan &lt;a href=&quot;https://twitter.com/twoooze&quot;&gt;Twoooze&lt;/a&gt;.&lt;/p&gt;
  16508. </content>
  16509.  </entry>
  16510.  <entry>
  16511.    <title>Fronteers bereikt de 300 leden</title>
  16512.    <link href="https://www.fronteers.nl/nl/blog/2010/08/300-leden"/>
  16513.    <updated>2010-08-13T00:00:00Z</updated>
  16514.    <id>https://www.fronteers.nl/nl/blog/2010/08/300-leden</id>
  16515.    <content xml:lang="nl" type="html">&lt;p&gt;Sinds gisteren telt Fronteers meer dan &lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;300 leden&lt;/a&gt;! Precies een jaar geleden begonnen we met het schrijven van deze post, die toen &#39;Fronteers bereikt de 200 leden&#39; getiteld was. Blijkbaar gaat het hard. Wow!&lt;/p&gt;
  16516. &lt;p&gt;Leuk en aardig dat gesmijt met getallen, maar wat doet Fronteers nou eigenlijk? Het grote probleem van onze vereniging is nog steeds dat we draaien op een relatief klein clubje actieve vrijwilligers, dat ook nog eens erg druk is met werk. Dingen gaan dus langzaam. Maar er gebeurt wel wat.&lt;/p&gt;
  16517. &lt;p&gt;De &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/onderwijs&quot;&gt;Commissie Onderwijs&lt;/a&gt; is bezig met de volgende docentendag, &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/workshops&quot;&gt;workshops&lt;/a&gt; komen eraan, ons jaarlijks &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/congres&quot;&gt;congres&lt;/a&gt; lijkt weer een succesje te worden, we hebben invloed op de &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/webrichtlijnen&quot;&gt;Webrichtlijnen&lt;/a&gt; en de maandelijkse &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten&quot;&gt;bijeenkomsten&lt;/a&gt; lopen gestaag door. Op &lt;a href=&quot;http://www.linkedin.com/groups?gid=38840&quot;&gt;LinkedIn&lt;/a&gt; kunnen leden voorlopig terecht met vragen aan andere leden (totdat we &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/online-community&quot;&gt;een eigen forum&lt;/a&gt; hebben), en op &lt;a href=&quot;http://webchat.freenode.net/?channels=fronteers&quot;&gt;IRC&lt;/a&gt; wordt het ook steeds drukker.&lt;/p&gt;
  16518. &lt;p&gt;Qua vacatures zit het ook wel goed. Ondertussen hebben we, sinds de &lt;a href=&quot;https://www.fronteers.nl/blog/2008/11/lancering-vacaturebank&quot;&gt;lancering&lt;/a&gt; eind 2008, 87 vacatures geplaatst. Front-end web development lijkt dus een gevestigde discipline te zijn in Nederland.&lt;/p&gt;
  16519. &lt;p&gt;Al die vacatures zorgen voor aardig wat geld in het laatje. Daarom hebben we als bestuur besloten om alle actieve vrijwilligers te bedanken met een dagje op het water, begin september. Een verslag van deze dag volgt zeer waarschijnlijk nog op de website.&lt;/p&gt;
  16520. &lt;p&gt;Peter-Paul, Tom, Arjan, Sander, Krijn, Matijs, Niels, Wybe, Justin, Martin, Yvonne, Mio, Sander, Kilian, Wilfred, Sander, Kor, Tom-Eric, Glenn, Peter, Edwin, Vasilis, Wes, Hidde, Peter, Bart, Wim, Anne, Nikolai, Marcel en alle vrijwilligers die geholpen hebben rondom de organisatie van de bijeenkomsten: bedankt voor de tijd die jullie in Fronteers steken!&lt;/p&gt;
  16521. &lt;p&gt;Om de 300 leden te vieren, houden we volgende week woensdag, 18 augustus vanaf een uurtje of 18, weer een borrel bij &lt;a href=&quot;http://maps.google.nl/maps?f=q&amp;amp;source=s_q&amp;amp;hl=nl&amp;amp;geocode=&amp;amp;q=winkel+van+sinkel+utrecht&amp;amp;sll=52.469397,5.509644&amp;amp;sspn=3.654648,9.766846&amp;amp;ie=UTF8&amp;amp;hq=Winkel+van+Sinkel&amp;amp;hnear=Winkel+van+Sinkel,+3512+Utrecht&amp;amp;ll=52.095486,5.118599&amp;amp;spn=0.027472,0.076303&amp;amp;z=14&amp;amp;iwloc=A&quot;&gt;De Winkel van Sinkel&lt;/a&gt; in Utrecht. Ben jij er ook bij?&lt;/p&gt;
  16522. </content>
  16523.  </entry>
  16524.  <entry>
  16525.    <title>&#39;Fronteers 2010: nog maar twee maanden! En nu al 300 aanmeldingen!&#39;</title>
  16526.    <link href="https://www.fronteers.nl/nl/blog/2010/08/fronteers-2010-nog-twee-maanden"/>
  16527.    <updated>2010-08-02T00:00:00Z</updated>
  16528.    <id>https://www.fronteers.nl/nl/blog/2010/08/fronteers-2010-nog-twee-maanden</id>
  16529.    <content xml:lang="nl" type="html">&lt;p&gt;Over twee maanden, op 5, 6, 7 en 8 oktober, zal &lt;a href=&quot;https://www.fronteers.nl/congres/2010&quot;&gt;Fronteers 2010&lt;/a&gt; plaatsvinden in &lt;a href=&quot;https://www.fronteers.nl/congres/2010/venue&quot;&gt;Pathé Tuschinski in Amsterdam&lt;/a&gt;. Ondertussen hebben we &lt;a href=&quot;https://www.fronteers.nl/congres/2010/attendees&quot;&gt;300 bezoekers&lt;/a&gt; op de teller staan: een evenaring van het aantal van &lt;a href=&quot;https://www.fronteers.nl/congres/2009/attendees&quot;&gt;vorig jaar&lt;/a&gt; en bijna twee keer zoveel sinds onze &lt;a href=&quot;https://www.fronteers.nl/blog/2010/06/fronteers-2010-einde-early-bird&quot;&gt;vorige aankondiging&lt;/a&gt;. Vandaag komen we aanzetten met twee nieuwe sprekers en maken we de eerste sessies bekend.&lt;/p&gt;
  16530. &lt;h2&gt;Sprekers&lt;/h2&gt;
  16531. &lt;p&gt;&lt;em&gt;&lt;a href=&quot;https://www.fronteers.nl/congres/2010/speakers#jake-archibald&quot;&gt;Jake Archibald&lt;/a&gt;&lt;/em&gt;, een van de grappigste sprekers die toevallig ook nog eens veel verstand heeft van JavaScript, zal ons komen vertellen hoe je herbruikbare JavaScript opzet. Als front-end developer bij de BBC en mede-auteur van de &lt;a href=&quot;http://www.bbc.co.uk/glow/&quot;&gt;Glow Javascript Library&lt;/a&gt; heeft hij hier een duidelijke mening over.&lt;/p&gt;
  16532. &lt;p&gt;&lt;em&gt;&lt;a href=&quot;https://www.fronteers.nl/congres/2010/speakers#stoyan-stefanov&quot;&gt;Stoyan Stefanov&lt;/a&gt;&lt;/em&gt; zal ons op de hoogte brengen van de laatste stand van zaken rondom client-side performance, een onderwerp dat nog steeds erg relevant is.&lt;/p&gt;
  16533. &lt;p&gt;De komende tijd hebben jullie nog &lt;em&gt;vier&lt;/em&gt; sprekers van ons te goed. Je kunt onderwerpen verwachten als geavanceerde CSS, JavaScript voor beginners, HTML5 awesomeness en een pleidooi over waarom wij front-enders het mooiste beroep ter wereld hebben.&lt;/p&gt;
  16534. &lt;h2&gt;Sessies&lt;/h2&gt;
  16535. &lt;p&gt;De &lt;a href=&quot;https://www.fronteers.nl/congres/2010/sessions&quot;&gt;eerste vier onderwerpen&lt;/a&gt; zijn zojuist ook online gezet: &lt;em&gt;The Design of HTML5&lt;/em&gt;, &lt;em&gt;High Performance JavaScript&lt;/em&gt;, &lt;em&gt;Vector Graphics for the Web&lt;/em&gt; en &lt;em&gt;Reusable Code, for good or for awesome!&lt;/em&gt;. De overige sessies zullen in de komende tijd online worden gezet, zodra we de details ontvangen van onze sprekers.&lt;/p&gt;
  16536. &lt;h2&gt;Sponsoring&lt;/h2&gt;
  16537. &lt;p&gt;We zijn nog steeds op zoek naar &lt;a href=&quot;https://www.fronteers.nl/congres/2010/sponsorships&quot;&gt;enkele sponsoren&lt;/a&gt;. Mocht je geïnteresseerd zijn of nog steeds vinden dat je baas hier écht bij moet zijn, &lt;a href=&quot;https://www.fronteers.nl/congres/2010/contact&quot;&gt;laat het ons dan weten&lt;/a&gt; en je gaat als VIP mee naar het sprekersdiner op woensdag.&lt;/p&gt;
  16538. &lt;h2&gt;Volg ons op Twitter&lt;/h2&gt;
  16539. &lt;p&gt;Via &lt;a href=&quot;https://twitter.com/FronteersConf&quot;&gt;@FronteersConf&lt;/a&gt; proberen we iedereen op de hoogte te houden van lopende zaken. Heb je vragen of opmerkingen? Laat dan wat van je horen!&lt;/p&gt;
  16540. &lt;h2&gt;Tot in oktober!&lt;/h2&gt;
  16541. &lt;p&gt;&lt;a href=&quot;https://twitter.com/edwinm&quot;&gt;Edwin&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/kilianvalkhof&quot;&gt;Kilian&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/krijnhoetmer&quot;&gt;Krijn&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/pesla&quot;&gt;Peter&lt;/a&gt; en &lt;a href=&quot;https://twitter.com/vasilis&quot;&gt;Vasilis&lt;/a&gt;&lt;/p&gt;
  16542. </content>
  16543.  </entry>
  16544.  <entry>
  16545.    <title>Fronteers zomerborrel (en hap) #2 (wederom) a.s. woensdag</title>
  16546.    <link href="https://www.fronteers.nl/nl/blog/2010/07/zomerborrel-deel-2"/>
  16547.    <updated>2010-07-26T00:00:00Z</updated>
  16548.    <id>https://www.fronteers.nl/nl/blog/2010/07/zomerborrel-deel-2</id>
  16549.    <content xml:lang="nl" type="html">&lt;p&gt;Omdat we er geen genoeg van kunnen krijgen (en jullie waarschijnlijk ook niet) gaan we weer met z&#39;n allen wat eten (en drinken!) in Utrecht. Dit keer in &lt;a href=&quot;http://maps.google.nl/maps?f=q&amp;amp;source=s_q&amp;amp;hl=nl&amp;amp;geocode=&amp;amp;q=Kafe+Belgi%C3%AB,+Utrecht&amp;amp;sll=52.095486,5.118599&amp;amp;sspn=0.035065,0.090895&amp;amp;ie=UTF8&amp;amp;hq=Kafe+Belgi%C3%AB,&amp;amp;hnear=Utrecht&amp;amp;t=h&amp;amp;z=16&amp;amp;iwloc=A&quot;&gt;Kafé België&lt;/a&gt;.&lt;/p&gt;
  16550. &lt;p&gt;Het eerste rondje is van Fronteers en de tweede van Matijs. Laat even weten of je komt in de reacties. Tot dan!&lt;/p&gt;
  16551. </content>
  16552.  </entry>
  16553.  <entry>
  16554.    <title>Publieke review Webrichtlijnen versie 2</title>
  16555.    <link href="https://www.fronteers.nl/nl/blog/2010/07/publieke-review-webrichtlijnen-2"/>
  16556.    <updated>2010-07-25T00:00:00Z</updated>
  16557.    <id>https://www.fronteers.nl/nl/blog/2010/07/publieke-review-webrichtlijnen-2</id>
  16558.    <content xml:lang="nl" type="html">&lt;p&gt;Iedereen die affiniteit heeft met de Webrichtlijnen kan tijdens de publieke review van versie 2 tot en met 13 september 2010 een reactie geven op (onderdelen van) de Webrichtlijnen. Heb je dus wat tijd over? Neem dan even een kijkje op &lt;a href=&quot;http://review.wrv2.nl/&quot;&gt;http://review.wrv2.nl/&lt;/a&gt;, waar goed uitgelegd wordt hoe je mee kunt helpen.&lt;/p&gt;
  16559. &lt;p&gt;Benieuwd naar wat er zoal veranderen gaat? Lees dan de &lt;a href=&quot;http://review.wrv2.nl/mapping/&quot;&gt;mapping tussen Webrichtlijnen versie 1 en versie 2&lt;/a&gt;.&lt;/p&gt;
  16560. &lt;p&gt;Als je specifieke opmerkingen hebt, stuur die dan op de &lt;a href=&quot;http://review.wrv2.nl/#procedure&quot;&gt;juiste manier&lt;/a&gt; in, maar wat vinden jullie in het algemeen van de nieuwe opzet van de Webrichtlijnen? Gaat dit merkbare invloed hebben op je werk?&lt;/p&gt;
  16561. </content>
  16562.  </entry>
  16563.  <entry>
  16564.    <title>Fronteers zomerborrel a.s woensdag</title>
  16565.    <link href="https://www.fronteers.nl/nl/blog/2010/07/zomerborrel"/>
  16566.    <updated>2010-07-11T00:00:00Z</updated>
  16567.    <id>https://www.fronteers.nl/nl/blog/2010/07/zomerborrel</id>
  16568.    <content xml:lang="nl" type="html">&lt;p&gt;Om deze warme dagen enigszins leuk te houden ben je hierbij uitgenodigd om aanstaande woensdag (14 juli) een gezellig biertje te komen drinken bij De Winkel van Sinkel in Utrecht. Vanaf een uur of zes staat het bier koud!&lt;/p&gt;
  16569. &lt;p&gt;De Winkel van Sinkel ligt &lt;a href=&quot;http://maps.google.nl/maps?f=q&amp;amp;source=s_q&amp;amp;hl=nl&amp;amp;geocode=&amp;amp;q=winkel+van+sinkel+utrecht&amp;amp;sll=52.469397,5.509644&amp;amp;sspn=3.654648,9.766846&amp;amp;ie=UTF8&amp;amp;hq=Winkel+van+Sinkel&amp;amp;hnear=Winkel+van+Sinkel,+3512+Utrecht&amp;amp;ll=52.095486,5.118599&amp;amp;spn=0.027472,0.076303&amp;amp;z=14&amp;amp;iwloc=A&quot;&gt;aan de Oudegracht&lt;/a&gt; op loopafstand van Utrecht CS.&lt;/p&gt;
  16570. &lt;p&gt;Het eerste rondje is van Fronteers. Je kunt in de reacties laten weten of je komt.&lt;/p&gt;
  16571. </content>
  16572.  </entry>
  16573.  <entry>
  16574.    <title>&#39;Fronteers 2010: drie nieuwe sprekers, de tweede workshop en einde early-bird&#39;</title>
  16575.    <link href="https://www.fronteers.nl/nl/blog/2010/06/fronteers-2010-einde-early-bird"/>
  16576.    <updated>2010-06-24T00:00:00Z</updated>
  16577.    <id>https://www.fronteers.nl/nl/blog/2010/06/fronteers-2010-einde-early-bird</id>
  16578.    <content xml:lang="nl" type="html">&lt;p&gt;Vandaag kondigen we drie nieuwe sprekers aan, maken we meer bekend over de tweede workshop die we aanbieden en tellen we af naar het einde van de early-bird periode, die nog slechts een week zal duren. Ondertussen hebben &lt;a href=&quot;https://www.fronteers.nl/congres/2010/attendees&quot;&gt;--140--&lt;strong&gt;167&lt;/strong&gt; front-end developers&lt;/a&gt; uit binnen- en buitenland de weg naar een kaartje al gevonden. Wellicht ben jij de volgende?&lt;/p&gt;
  16579. &lt;h2&gt;Sprekers&lt;/h2&gt;
  16580. &lt;p&gt;Zo net voor het einde van de early-bird periode willen we graag nog drie sprekers met jullie delen. We hadden hem vorig jaar al benaderd voor een presentatie, maar toen kon hij helaas niet. Dit jaar is hij echter wel van de partij. &lt;em&gt;&lt;a href=&quot;https://www.fronteers.nl/congres/2010/speakers#brad-neuberg&quot;&gt;Brad Neuberg&lt;/a&gt;&lt;/em&gt; zal ons komen vertellen over SVG, de mogelijkheden in combinatie met HTML5 en een gaaf project waar hij op dit moment mee bezig is, waardoor ook huidige IE-versies gewoon SVG slikken. We verwachten dat SVG de komende jaren een stuk belangrijker gaat worden voor front-end developers, zeker gezien het feit dat IE9 SVG gaat ondersteunen en Apple steeds meer anti-Flash wordt. Deze trein mag je dus zeker niet missen!&lt;/p&gt;
  16581. &lt;p&gt;Een ander hekel puntje in &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/&quot;&gt;HTML5&lt;/a&gt; is toegankelijkheid. We zijn er iedere dag mee bezig, onder het mom van de Webrichtlijnen of gewoon omdat we het een belangrijk onderdeel van ons werk vinden. &lt;em&gt;&lt;a href=&quot;https://www.fronteers.nl/congres/2010/speakers#steve-faulkner&quot;&gt;Steve Faulkner&lt;/a&gt;&lt;/em&gt; en &lt;em&gt;&lt;a href=&quot;https://www.fronteers.nl/congres/2010/speakers#hans-hillen&quot;&gt;Hans Hillen&lt;/a&gt;&lt;/em&gt; zullen daarom een duo-presentatie geven over hoe je HTML5 op de juiste, toegankelijke manier gebruikt, en waar nodig met ARIA verrijkt. &lt;em&gt;Built-in&lt;/em&gt; en &lt;em&gt;bolt-on&lt;/em&gt; accessibility dus. Als je denkt dat HTML5 toegankelijkheid overboord gooit en alleen voor de buzzword bingo bonuspunten gaat, heb je het mis. Kom naar Fronteers 2010! :)&lt;/p&gt;
  16582. &lt;p&gt;De overige &lt;em&gt;zes&lt;/em&gt; namen zullen we in de komende maanden bekendmaken.&lt;/p&gt;
  16583. &lt;h2&gt;Workshop &amp;quot;Bringing Your Design to Life with CSS3&amp;quot; door Dan Rubin&lt;/h2&gt;
  16584. &lt;p&gt;De &lt;a href=&quot;https://www.fronteers.nl/congres/2010/workshops/css3-dan-rubin&quot;&gt;tweede workshop&lt;/a&gt; zal plaatsvinden op dinsdag 5 oktober, in Felix Meritis. Deze workshop is voornamelijk gericht op designers, die graag ook zelf de (on)mogelijkheden van CSS willen leren kennen. Waar de &lt;a href=&quot;https://www.fronteers.nl/congres/2010/workshops/advanced-css-andy-clarke&quot;&gt;workshop van Andy&lt;/a&gt; zich dus vooral focust op coders die graag alle geavanceerde snufjes van CSS willen leren, kun je bij Dan terecht als je als webdesigner wil weten wat er tegenwoordig allemaal kan met HTML en CSS.&lt;/p&gt;
  16585. &lt;p&gt;Heb jij een collega-designer die PSD&#39;s &amp;quot;over de muur gooit&amp;quot;, maar stiekem toch ook over die muur meekijkt en het best interessant vindt wat er in de browser allemaal mogelijk is, dan is deze workshop zeker aan te bevelen.&lt;/p&gt;
  16586. &lt;h2&gt;Einde van de early-bird periode: volgende week&lt;/h2&gt;
  16587. &lt;p&gt;Zoals we vorige maand al aankondigden, zal de early-bird periode eind juni aflopen; &lt;em&gt;volgende week woensdag&lt;/em&gt; dus. We hebben ondertussen al &lt;a href=&quot;https://www.fronteers.nl/congres/2010/attendees&quot;&gt;zo&#39;n &lt;strike&gt;140&lt;/strike&gt; &lt;strong&gt;170&lt;/strong&gt; bezoekers&lt;/a&gt; op de lijst staan en we verwachten in deze laatste week nog heel wat kaartjes te verkopen. Wacht dus niet langer en &lt;a href=&quot;https://www.fronteers.nl/congres/2010/tickets&quot;&gt;koop je ticket nu!&lt;/a&gt; :)&lt;/p&gt;
  16588. &lt;p&gt;Alle Fronteersleden krijgen vrijdag ook nog een herinnering met de kortingscode in hun inbox. We nemen aan dat we hiermee iedereen genoeg informatie en tijd hebben gegeven om hun keuze te maken. Na de early-bird zal de prijs van een toegangskaartje waarschijnlijk met € 100,- omhoog gaan.&lt;/p&gt;
  16589. &lt;h2&gt;Sponsoring&lt;/h2&gt;
  16590. &lt;p&gt;We zijn nog steeds op zoek naar &lt;a href=&quot;https://www.fronteers.nl/congres/2010/sponsorships&quot;&gt;enkele sponsoren&lt;/a&gt;. Mocht je geïnteresseerd zijn of nog steeds vinden dat je baas hier écht bij moet zijn, &lt;a href=&quot;https://www.fronteers.nl/congres/2010/contact&quot;&gt;laat het ons dan weten&lt;/a&gt; en je gaat als VIP mee naar het sprekersdiner op woensdag.&lt;/p&gt;
  16591. &lt;h2&gt;Volg ons op Twitter&lt;/h2&gt;
  16592. &lt;p&gt;Via &lt;a href=&quot;https://twitter.com/FronteersConf&quot;&gt;@FronteersConf&lt;/a&gt; proberen we iedereen op de hoogte te houden van lopende zaken. Heb je vragen of opmerkingen? Laat dan wat van je horen!&lt;/p&gt;
  16593. &lt;h2&gt;Tot in oktober!&lt;/h2&gt;
  16594. &lt;p&gt;Alle sprekers zijn super enthousiast, de catering wordt om van te watertanden, de techniek wordt tot in de puntjes verzorgd, videomateriaal van alles sessies wordt van hoge kwaliteit, het hotel voor de sprekers is geregeld, onze MC is zich al aan het voorbereiden (dank &lt;a href=&quot;https://twitter.com/juice10&quot;&gt;Justin&lt;/a&gt;!) en een blik extra vrijwilligers staat klaar om zich uit de naad te werken op de dagen zelf (dank &lt;a href=&quot;https://twitter.com/hdv&quot;&gt;Hidde&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/beverloo&quot;&gt;Peter&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/ysbreker&quot;&gt;Thijs&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/kuvos&quot;&gt;Peter&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/wesoudshoorn&quot;&gt;Wes&lt;/a&gt; en &lt;a href=&quot;https://twitter.com/aaronpeters&quot;&gt;Aaron&lt;/a&gt;!). Kortom, wij hebben er zin in! En we hopen jullie ook!&lt;/p&gt;
  16595. &lt;p&gt;&lt;a href=&quot;https://twitter.com/edwinm&quot;&gt;Edwin&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/kilianvalkhof&quot;&gt;Kilian&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/krijnhoetmer&quot;&gt;Krijn&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/pesla&quot;&gt;Peter&lt;/a&gt; en &lt;a href=&quot;https://twitter.com/vasilis&quot;&gt;Vasilis&lt;/a&gt;&lt;/p&gt;
  16596. </content>
  16597.  </entry>
  16598.  <entry>
  16599.    <title>Bijeenkomst op 7 juli, in Rotterdam</title>
  16600.    <link href="https://www.fronteers.nl/nl/blog/2010/06/bijeenkomst-juli"/>
  16601.    <updated>2010-06-14T00:00:00Z</updated>
  16602.    <id>https://www.fronteers.nl/nl/blog/2010/06/bijeenkomst-juli</id>
  16603.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 7 juli is Fronteers te gast bij &lt;a href=&quot;http://mangrove.nl/&quot;&gt;Mangrove&lt;/a&gt; in Rotterdam. Thema van deze avond is design. Bram van Rijen a.k.a. Nozzman zal spreken over inspiratie, en Hans Kemp zal dieper ingaan op het onderwerp interaction design.&lt;/p&gt;
  16604. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  16605. &lt;ul&gt;
  16606. &lt;li&gt;19:00 inloop&lt;/li&gt;
  16607. &lt;li&gt;19:30 introductie Mangrove&lt;/li&gt;
  16608. &lt;li&gt;19:45 Bram van Rijen a.k.a. Nozzman (Mangrove)&lt;/li&gt;
  16609. &lt;li&gt;20:30 korte pauze&lt;/li&gt;
  16610. &lt;li&gt;20:45 Hans Kemp (Hogeschool Rotterdam)&lt;/li&gt;
  16611. &lt;li&gt;21:30 borrel&lt;/li&gt;
  16612. &lt;/ul&gt;
  16613. &lt;h2&gt;Inspiratie&lt;/h2&gt;
  16614. &lt;p&gt;Inspiratie. Je kunt er op gaan zitten wachten, maar meestal komt het dan juist niet. Inspiratie komt niet zomaar uit de lucht vallen. Terwijl dat blanco canvas voor je toch echt snel voorzien moet worden van een fijn design of bevlogen code. Tóch zijn er manieren om de inspiratie op gang te krijgen. Hoe? Dat legt Bram van Rijen a.k.a. &lt;a href=&quot;http://nozzman.nl/&quot;&gt;Nozzman&lt;/a&gt; uit in een sessie die niet zozeer inspireert, maar hopelijk wel inspiratie gaat veroorzaken. Bram is art-director bij Mangrove en is tevens actief als illustrator, cartoonist en kunstenaar.&lt;/p&gt;
  16615. &lt;h2&gt;Interaction design uitgelicht&lt;/h2&gt;
  16616. &lt;p&gt;De rol van de user experience designer is niet altijd even duidelijk. Bij &#39;design&#39; denken veel mensen eigenlijk vooral aan het bedenken van een logo of het maken van een huisstijl. Terwijl de user experience designer juist veel eerder in het proces het verschil maakt. In dit verhaal wil ik aan de hand van een aantal voorbeelden en &#39;design principles&#39; laten zien hoe je als user experience designer dit verschil kunt maken. Door inspiratie, en vooral door vele meters te maken.&lt;/p&gt;
  16617. &lt;h2&gt;Routebeschrijving&lt;/h2&gt;
  16618. &lt;p&gt;Mangrove ligt op een steenworp afstand van station Rotterdam Centraal, aan de Delftsestraat 33. Er staat een &lt;a href=&quot;http://www.mangrove.nl/index.php?pageID=6&quot;&gt;korte routebeschrijving&lt;/a&gt; op de website van Mangrove.&lt;/p&gt;
  16619. &lt;p&gt;De bijeenkomst is gratis toegankelijk voor zowel leden als niet-leden. Het is wenselijk dat je je even opgeeft, dan weet de organisatie hoeveel personen er komen.&lt;/p&gt;
  16620. </content>
  16621.  </entry>
  16622.  <entry>
  16623.    <title>Grip2010, 25 euro korting voor jouw opdrachtgever</title>
  16624.    <link href="https://www.fronteers.nl/nl/blog/2010/05/grip2010"/>
  16625.    <updated>2010-05-26T00:00:00Z</updated>
  16626.    <id>https://www.fronteers.nl/nl/blog/2010/05/grip2010</id>
  16627.    <content xml:lang="nl" type="html">&lt;p&gt;Op 22 en 23 juni 2010 wordt in Grand Hotel Karel V te Utrecht een tweedaagse workshop voor opdrachtgevers van webprojecten gegeven: &lt;a href=&quot;http://grip2010.nl/&quot;&gt;Grip2010&lt;/a&gt;. Heb jij een leuke opdrachtgever of werkgever die inmiddels 1-3 jaar webprojecten leidt? Dan is de workshop echt iets voor hem of haar.&lt;/p&gt;
  16628. &lt;p&gt;Het hele traject van een internetproject komt aan bod. Van offerte tot afronding. Vorig jaar waren &lt;a href=&quot;http://www.grip2010.nl/over/#ervaringen&quot;&gt;de reacties op de workshop heel goed&lt;/a&gt;, dus je kunt je opdrachtgever gerust op de workshop attenderen.&lt;/p&gt;
  16629. &lt;p&gt;Als lid van Fronteers kun je de kortingscode &amp;quot;fronteers&amp;quot; geven en dan krijgt je opdrachtgever 25 euro korting bij de aanmelding.&lt;/p&gt;
  16630. </content>
  16631.  </entry>
  16632.  <entry>
  16633.    <title>Hack de Overheid</title>
  16634.    <link href="https://www.fronteers.nl/nl/blog/2010/05/hack-de-overheid"/>
  16635.    <updated>2010-05-25T00:00:00Z</updated>
  16636.    <id>https://www.fronteers.nl/nl/blog/2010/05/hack-de-overheid</id>
  16637.    <content xml:lang="nl" type="html">&lt;p&gt;Wij ontvingen een berichtje van onze vrienden van &lt;a href=&quot;http://www.hackdeoverheid.nl/&quot;&gt;HackDeOverheid&lt;/a&gt;. Wie? &amp;quot;HackdeOverheid wil geeks en ambtenaren een ruimte bieden om een dialoog rond technologische innovatie, maatschappelijke verandering, overheidsdiensten en politieke transparantie mogelijk te maken.&amp;quot; Wat? Gewoon lekker spelen met open data!&lt;/p&gt;
  16638. &lt;p&gt;HackdeOverheid houdt aanstaande zaterdag 29 mei haar tweede editie. Dan gaan burgers, geeks, journalisten en overheid samen aan ideeën en protoypen werken op basis van overheidsdata. Mooie voorbeelden van het hergebruiken van open overheidsdata zijn &lt;a href=&quot;http://www.openkvk.nl/&quot;&gt;OpenKvk&lt;/a&gt; die KvK informatie makkelijker ontsluit en &lt;a href=&quot;http://www.ikregeer.nl/&quot;&gt;Ikregeer&lt;/a&gt; dat Tweede Kamerstukken toegankelijker maakt.&lt;/p&gt;
  16639. &lt;p&gt;Dus als je zin hebt in een dagje data-pitchen, barcampen en wobben, meld je dan gauw aan bij &lt;a href=&quot;http://www.hackdeoverheid.nl/&quot;&gt;HackDeOverheid&lt;/a&gt;. De dag vindt plaats in het mooiste gebouw van de Amsterdamse Baarsjes, het &lt;a href=&quot;http://www.het-sieraad.nl/&quot;&gt;Sieraad&lt;/a&gt;.&lt;/p&gt;
  16640. </content>
  16641.  </entry>
  16642.  <entry>
  16643.    <title>Bijeenkomst op 14 juni, in Utrecht</title>
  16644.    <link href="https://www.fronteers.nl/nl/blog/2010/05/bijeenkomst-juni"/>
  16645.    <updated>2010-05-20T00:00:00Z</updated>
  16646.    <id>https://www.fronteers.nl/nl/blog/2010/05/bijeenkomst-juni</id>
  16647.    <content xml:lang="nl" type="html">&lt;p&gt;Op 14 juni is Fronteers te gast bij &lt;a href=&quot;http://www.setuputrecht.nl/&quot;&gt;SETUP&lt;/a&gt; in Utrecht. Het thema van deze bijeenkomst is &#39;het semantische web&#39; en we hebben een spreker uit de praktijk en een onderzoeker bereid gevonden ons hier meer over te komen vertellen.&lt;/p&gt;
  16648. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  16649. &lt;ul&gt;
  16650. &lt;li&gt;19:00 inloop&lt;/li&gt;
  16651. &lt;li&gt;19:30 introductie SETUP&lt;/li&gt;
  16652. &lt;li&gt;19:45 Thomas Markus (Universiteit Utrecht)&lt;/li&gt;
  16653. &lt;li&gt;20:30 korte pauze&lt;/li&gt;
  16654. &lt;li&gt;20:45 Andreas Creten (My Name is E)&lt;/li&gt;
  16655. &lt;li&gt;21:30 borrel&lt;/li&gt;
  16656. &lt;/ul&gt;
  16657. &lt;h2&gt;Het semantische web&lt;/h2&gt;
  16658. &lt;p&gt;De eerste talk wordt verzorgd door &lt;a href=&quot;https://twitter.com/tmarkus&quot;&gt;Thomas Markus&lt;/a&gt; van Universiteit Utrecht. Hij heeft een pragmatische en radicaal andere kijk op het integreren en uitwisselen van verschillende informatiebronnen zonder een database. Thomas zal vertellen hoe Semantic Web technologie nieuwe mogelijkheden schept en web developers productiever maakt.&lt;/p&gt;
  16659. &lt;h2&gt;Data portability&lt;/h2&gt;
  16660. &lt;p&gt;Als we bij het maken van onze applicaties gebruik maken van open standaarden zijn gebruikers vrij om te kiezen wat ze met hun gegevens doen en waar ze hun gegevens bewaren, over de applicatie grenzen heen. De tweede spreker van vanavond is &lt;a href=&quot;http://www.andreascreten.be/&quot;&gt;Andreas Creten&lt;/a&gt;, oprichter van &lt;a href=&quot;http://www.madewithlove.be/&quot;&gt;madewithlove&lt;/a&gt;. Andreas zal spreken over hoe data portability ons leven gemakkelijker kan maken.&lt;/p&gt;
  16661. &lt;h2&gt;Over SETUP&lt;/h2&gt;
  16662. &lt;p&gt;SETUP is hét centrum voor technologie en nieuwe media in Utrecht. Bij SETUP worden bijeenkomsten, workshops en andere events zoals tentoonstellingen en feesten georganiseerd. Tijdens deze activiteiten worden nieuwe ideeën, mogelijkheden en kansen op het gebied van technologie en nieuwe media onderzocht.&lt;/p&gt;
  16663. &lt;p&gt;SETUP is gevestigd op de Neude in Utrecht, boven het gebouw van ABN-AMRO (dat op dit moment wordt verbouwd).&lt;/p&gt;
  16664. &lt;p&gt;De bijeenkomst is gratis toegankelijk voor zowel leden als niet-leden. Het is wenselijk dat je je even opgeeft, dan weet de organisatie hoeveel personen er komen.&lt;/p&gt;
  16665. &lt;p&gt;Tot op 14 juni!&lt;/p&gt;
  16666. </content>
  16667.  </entry>
  16668.  <entry>
  16669.    <title>Fronteers 2010 komt er aan!</title>
  16670.    <link href="https://www.fronteers.nl/nl/blog/2010/05/fronteers-2010-komt-er-aan"/>
  16671.    <updated>2010-05-18T00:00:00Z</updated>
  16672.    <id>https://www.fronteers.nl/nl/blog/2010/05/fronteers-2010-komt-er-aan</id>
  16673.    <content xml:lang="nl" type="html">&lt;p&gt;Hierbij weer een update over &lt;a href=&quot;https://www.fronteers.nl/congres/2010&quot;&gt;ons congres&lt;/a&gt; dat op 5, 6, 7 en 8 oktober in Amsterdam zal plaatsvinden. Vandaag maken we twee nieuwe sprekers bekend. De early-bird korting loopt nog tot eind juni, dus we hopen je hiermee over de streep te trekken. Ook kondigen we een tweede workshop aan.&lt;/p&gt;
  16674. &lt;h2&gt;Sprekers&lt;/h2&gt;
  16675. &lt;p&gt;Allereerst zijn we zeer trots op het feit dat we &lt;em&gt;de&lt;/em&gt; &lt;em&gt;Brendan Eich&lt;/em&gt; mogen verwelkomen als een van de sprekers van dit jaar. De vader van JavaScript zal ons komen vertellen wat ons te wachten staat met betrekking tot de slechtst begrepen programmeertaal ter wereld. Ook zal hij aansnijden hoe browsers nu en in de toekomst omgaan met performance op dit gebied, een onderwerp dat de laatste tijd veel aandacht krijgt.&lt;/p&gt;
  16676. &lt;p&gt;Omdat we ook dit jaar design-gerelateerde onderwerpen zeker niet links willen laten liggen, hebben we &lt;em&gt;Jina Bolton&lt;/em&gt; op ons verlanglijstje staan. Ook zij heeft zeer enthousiast &amp;quot;ja&amp;quot; gezegd op ons verzoek om te komen en zal ons dus wat meer over sexy web design en CSS gaan vertellen.&lt;/p&gt;
  16677. &lt;p&gt;Tijdens de wat geavanceerdere JavaScript sessies zorgen we er trouwens voor dat er een minder technische activiteit tegenover staat. Fronteers 2010 zal, net als de afgelopen twee jaar, uit één track bestaan, maar tijdens deze talks houden we een informeel opgezette CSS Q&amp;amp;A sessie in zaal drie. Vorig jaar waren er wat klachten over het JavaScript-gehalte, en dat hopen we op deze manier dit jaar voor te zijn.&lt;/p&gt;
  16678. &lt;h2&gt;Tweede workshop&lt;/h2&gt;
  16679. &lt;p&gt;Iemand die wellicht bij zo&#39;n CSS sessie aanwezig is, is &lt;em&gt;Dan Rubin&lt;/em&gt;. Hij zal op dinsdag een workshop geven (details volgen nog), en ook tijdens het congres aanwezig zijn. Deze workshop vindt ook plaats in &lt;a href=&quot;https://www.fronteers.nl/congres/2010/workshops#venue&quot;&gt;het Kremlin van Felix Meritis&lt;/a&gt; en staat verder los van het congres. Kosten van deze workshop zijn € 275,- voor leden en € 350,- voor niet-leden.&lt;/p&gt;
  16680. &lt;p&gt;Wij geloven dat we jullie tijdens het congres van dit jaar het beste op het gebied van front-end development aanbieden. De geweldige line-up in combinatie met de mogelijkheid om een workshop te volgen, maakt het een enorm breed en interessant programma dit jaar.&lt;/p&gt;
  16681. &lt;h2&gt;Einde early-bird&lt;/h2&gt;
  16682. &lt;p&gt;Eind juni zal de early-bird aflopen. Tot die tijd blijven &lt;a href=&quot;https://www.fronteers.nl/congres/2010/tickets&quot;&gt;de prijzen&lt;/a&gt; gelijk. Hoe de prijzen na juni gaan veranderen, is nog niet bekend. Zeker is dat de prijzen na juni omhoog gaan. Wees er dus snel bij, want de kaarten &lt;a href=&quot;https://www.fronteers.nl/congres/2010/attendees&quot;&gt;gaan hard&lt;/a&gt;. Op 28 april hebben alle leden een mailtje met een kortingscode gekregen. Heb je deze niet ontvangen? Neem dan even &lt;a href=&quot;https://www.fronteers.nl/congres/2010/contact&quot;&gt;contact met ons op&lt;/a&gt;.&lt;/p&gt;
  16683. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/congres/2009/attendees-2.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  16684. &lt;h2&gt;Help ons&lt;/h2&gt;
  16685. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/congres/2010/venue&quot;&gt;Tuschinski&lt;/a&gt; biedt dit jaar een hoop meer stoelen dan afgelopen jaar, toen we in no-time uitverkocht raakten. We hebben &lt;em&gt;jou&lt;/em&gt; nodig om dit jaar weer dezelfde stunt uit te halen. Help mee ons congres te promoten door erover te bloggen, te tweeten, like-buttons te klikken, et cetera. Fronteers 2010 is een congres voor en door de vereniging en wat is er nou mooier dan dit met &lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;250 leden&lt;/a&gt; uit te dragen naar de buitenwereld?&lt;/p&gt;
  16686. &lt;p&gt;Hopelijk tot ziens in oktober! Of eerder op een van onze maandelijkse bijeenkomsten :)&lt;/p&gt;
  16687. &lt;p&gt;&lt;a href=&quot;https://twitter.com/edwinm&quot;&gt;Edwin&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/kilianvalkhof&quot;&gt;Kilian&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/krijnhoetmer&quot;&gt;Krijn&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/pesla&quot;&gt;Peter&lt;/a&gt; en &lt;a href=&quot;https://twitter.com/vasilis&quot;&gt;Vasilis&lt;/a&gt; (en alle andere vrijwilligers die meehelpen!)&lt;/p&gt;
  16688. </content>
  16689.  </entry>
  16690.  <entry>
  16691.    <title>&#39;Fronteers 2010: kaartverkoop, sprekers en workshops&#39;</title>
  16692.    <link href="https://www.fronteers.nl/nl/blog/2010/04/fronteers-2010-kaartverkoop"/>
  16693.    <updated>2010-04-27T00:00:00Z</updated>
  16694.    <id>https://www.fronteers.nl/nl/blog/2010/04/fronteers-2010-kaartverkoop</id>
  16695.    <content xml:lang="nl" type="html">&lt;p&gt;Na een radiostilte van bijna twee maanden is het weer tijd voor een update van onze kant, wat betreft &lt;a href=&quot;https://www.fronteers.nl/congres/2010&quot;&gt;Fronteers 2010&lt;/a&gt; op 7 en 8 oktober. Vandaag zetten we de kaartverkoop online (Fronteers leden krijgen hierover nog een mailtje, dus hou je nog even in), kondigen we twee nieuwe sprekers aan en maken we wat meer bekend over onze plannen rondom workshops.&lt;/p&gt;
  16696. &lt;h2&gt;Sprekers&lt;/h2&gt;
  16697. &lt;p&gt;Na Jeremy Keith en Jeff Croft zijn we verheugd te mogen melden dat &lt;em&gt;&lt;a href=&quot;http://www.themaninblue.com/&quot;&gt;Cameron Adams&lt;/a&gt;&lt;/em&gt; en &lt;em&gt;&lt;a href=&quot;http://www.nczonline.net/&quot;&gt;Nicholas Zakas&lt;/a&gt;&lt;/em&gt; hebben toegezegd ons congres te komen verrijken. Cameron is de man bij wie je moet zijn als het gaat om &lt;a href=&quot;http://www.themaninblue.com/experiment/&quot;&gt;interessante experimenten in de browser&lt;/a&gt; of &lt;a href=&quot;http://www.themaninblue.com/writing/perspective/2010/03/22/&quot;&gt;vergelijkende warenonderzoeken&lt;/a&gt; tussen SVG, &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt; en Flash. Nicholas is een grootheid op het gebied van &lt;a href=&quot;http://www.nczonline.net/writing/&quot;&gt;JavaScript performance&lt;/a&gt; en zal ons hierover meer komen vertellen.&lt;/p&gt;
  16698. &lt;p&gt;In totaal kunnen jullie minimaal 14 &lt;em&gt;ongesponsorde&lt;/em&gt; sessies verwachten.&lt;/p&gt;
  16699. &lt;h2&gt;Workshops&lt;/h2&gt;
  16700. &lt;p&gt;Omdat design vorige jaren een ondergeschoven kindje was op ons congres, hebben we dit jaar besloten een aantal design-gerelateerde workshops te laten geven. We hebben Andy Clarke gecharterd voor woensdag 6 oktober. Hij zal dan zijn workshop &lt;a href=&quot;https://www.fronteers.nl/congres/2010/workshops/advanced-css-andy-clarke&quot;&gt;Advanced CSS styling&lt;/a&gt; in het &lt;a href=&quot;https://www.fronteers.nl/congres/2010/workshops#venue&quot;&gt;Kremlin van Felix Meritis&lt;/a&gt; geven. Voor deze workshop zijn 30 plaatsen beschikbaar. Je kunt hier dus een meer persoonlijke benadering dan bij het congres zelf verwachten. De focus van deze intensieve workshop ligt op één specifiek onderwerp en je verlaat de dag gegarandeerd met een berg nieuwe kennis.&lt;/p&gt;
  16701. &lt;p&gt;We zijn op dit moment nog aan het onderhandelen met andere workshoppers, dus misschien dat de dinsdag en maandag ook nog gevuld gaan worden. Wees er in ieder geval snel bij, want Andy gaat ook zijn &lt;a href=&quot;http://forabeautifulweb.com/&quot;&gt;For A Beautiful Web&lt;/a&gt; marketingmachine gebruiken om de Amsterdamse zaal vol te krijgen met internationale bezoekers.&lt;/p&gt;
  16702. &lt;h2&gt;Kaartverkoop&lt;/h2&gt;
  16703. &lt;p&gt;Zoals gezegd gaat vandaag ook de early-bird kaartverkoop online. Net als vorig jaar gebruiken we hiervoor &lt;a href=&quot;http://paydro.net/&quot;&gt;Paydro&lt;/a&gt;, en kun je betalen via creditcard, iDEAL of op factuur. De kaartprijzen liggen iets hoger dan vorig jaar, aangezien we dit jaar geen sponsortalks hebben en &lt;a href=&quot;https://www.fronteers.nl/congres/2010/venue&quot;&gt;Tuschinski&lt;/a&gt; iets prijziger is (maar &lt;em&gt;wat een locatie&lt;/em&gt;).&lt;/p&gt;
  16704. &lt;p&gt;Hieronder de prijzen voor dit jaar (exclusief 19% btw):&lt;/p&gt;
  16705. &lt;table&gt;
  16706. &lt;thead&gt;
  16707. &lt;tr&gt;
  16708. &lt;th&gt;Type ticket&lt;/th&gt;
  16709. &lt;th&gt;Prijs&lt;/th&gt;
  16710. &lt;/tr&gt;
  16711. &lt;/thead&gt;
  16712. &lt;tbody&gt;
  16713. &lt;tr&gt;
  16714. &lt;td&gt;Early-bird ticket voor 2 dagen&lt;/td&gt;
  16715. &lt;td&gt;€ 275,00&lt;/td&gt;
  16716. &lt;/tr&gt;
  16717. &lt;tr&gt;
  16718. &lt;td&gt;Early-bird ticket voor 1 dag&lt;/td&gt;
  16719. &lt;td&gt;€ 175,00&lt;/td&gt;
  16720. &lt;/tr&gt;
  16721. &lt;tr&gt;
  16722. &lt;td&gt;Early-bird ticket voor 2 dagen voor Fronteers leden&lt;/td&gt;
  16723. &lt;td&gt;€ 200,00&lt;/td&gt;
  16724. &lt;/tr&gt;
  16725. &lt;tr&gt;
  16726. &lt;td&gt;Early-bird ticket voor 2 dagen voor nieuwe Fronteers leden (per 27-04)&lt;/td&gt;
  16727. &lt;td&gt;€ 225,00&lt;/td&gt;
  16728. &lt;/tr&gt;
  16729. &lt;tr&gt;
  16730. &lt;td&gt;Early-bird ticket voor 1 dag voor Fronteers leden&lt;/td&gt;
  16731. &lt;td&gt;€ 125,00&lt;/td&gt;
  16732. &lt;/tr&gt;
  16733. &lt;tr&gt;
  16734. &lt;td&gt;Workshop Advanced CSS styling&lt;/td&gt;
  16735. &lt;td&gt;€ 350,00&lt;/td&gt;
  16736. &lt;/tr&gt;
  16737. &lt;tr&gt;
  16738. &lt;td&gt;Workshop Advanced CSS styling voor Fronteers lede&lt;/td&gt;
  16739. &lt;td&gt;€ 275,00&lt;/td&gt;
  16740. &lt;/tr&gt;
  16741. &lt;tr&gt;
  16742. &lt;td&gt;Workshop Advanced CSS styling voor nieuwe Fronteers leden (per 27-04)&lt;/td&gt;
  16743. &lt;td&gt;€ 300,00&lt;/td&gt;
  16744. &lt;/tr&gt;
  16745. &lt;/tbody&gt;
  16746. &lt;/table&gt;
  16747. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;Fronteers leden&lt;/a&gt; krijgen via de mailinglist in de komende dagen hun kortingscode doorgemaild, dus hou de hand nog even op de knip. Mensen die vanaf vandaag lid worden krijgen ook korting, maar niet de volledige korting (aangezien deze hoger ligt dan de lidmaatschapskosten). Voor de niet-leden: &lt;a href=&quot;https://www.fronteers.nl/congres/2010/tickets&quot;&gt;boek je tickets nu!&lt;/a&gt;&lt;/p&gt;
  16748. &lt;p&gt;Voor de workshop geldt geen early-bird korting, dus deze prijzen zullen hetzelfde blijven. Wat de overige definitieve prijzen worden &lt;em&gt;na&lt;/em&gt; de early-bird weten we nog niet, dus die houden jullie nog van ons tegoed. De early bird periode duurt tot eind juni; wees er dus op tijd bij!&lt;/p&gt;
  16749. &lt;h2&gt;Sponsoring&lt;/h2&gt;
  16750. &lt;p&gt;We zijn nog steeds op zoek naar &lt;a href=&quot;https://www.fronteers.nl/congres/2010/sponsorships&quot;&gt;enkele sponsoren&lt;/a&gt;. Mocht je geïnteresseerd zijn of vinden dat je baas hier nodig bij moet zijn, laat het ons dan weten en je gaat als VIP mee naar het sprekersdiner op woensdag.&lt;/p&gt;
  16751. &lt;h2&gt;Volg ons op Twitter&lt;/h2&gt;
  16752. &lt;p&gt;Via &lt;a href=&quot;https://twitter.com/FronteersConf&quot;&gt;@FronteersConf&lt;/a&gt; gaan we vanaf nu wat vaker korte updates geven, dus als je ons nog niet volgt, ga daar dan eens mee beginnen :)&lt;/p&gt;
  16753. &lt;h2&gt;That&#39;s it&lt;/h2&gt;
  16754. &lt;p&gt;Voor nu is dit het; het woord is aan jullie. Help mee ons en jullie congres te promoten via je blog, Twitter of gewoon op de werkvloer en laten we er samen voor zorgen dat &lt;em&gt;Fronteers 2010&lt;/em&gt; weer een indrukwekkend, memorabel, uniek, kick-ass congres wordt.&lt;/p&gt;
  16755. &lt;p&gt;Als je vragen of opmerkingen hebt, zoals over alles bij Fronteers; schroom niet om iets van je te laten horen!&lt;/p&gt;
  16756. &lt;p&gt;&lt;a href=&quot;https://twitter.com/edwinm&quot;&gt;Edwin&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/kilianvalkhof&quot;&gt;Kilian&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/krijnhoetmer&quot;&gt;Krijn&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/pesla&quot;&gt;Peter&lt;/a&gt; en &lt;a href=&quot;https://twitter.com/vasilis&quot;&gt;Vasilis&lt;/a&gt; (en alle andere vrijwilligers die ons meehelpen!)&lt;/p&gt;
  16757. </content>
  16758.  </entry>
  16759.  <entry>
  16760.    <title>Bijeenkomst op 6 mei, in Groningen</title>
  16761.    <link href="https://www.fronteers.nl/nl/blog/2010/04/bijeenkomst-mei-groningen"/>
  16762.    <updated>2010-04-23T00:00:00Z</updated>
  16763.    <id>https://www.fronteers.nl/nl/blog/2010/04/bijeenkomst-mei-groningen</id>
  16764.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 6 mei zal Fronteers te gast zijn bij &lt;a href=&quot;http://tfe.nl/&quot;&gt;theFactor.e&lt;/a&gt; in Groningen. Twee bijeenkomsten in mei dus. De avond zal in het teken staan van het oplossen van de problemen die je tegenkomt als je met een CMS aan de webrichtlijnen wilt voldoen.&lt;/p&gt;
  16765. &lt;h2&gt;Het programma is als volgt&lt;/h2&gt;
  16766. &lt;ul&gt;
  16767. &lt;li&gt;19.00 uur: Inloop&lt;/li&gt;
  16768. &lt;li&gt;19.30 uur: Introductie theFacor.e door Thijs Helfrich&lt;/li&gt;
  16769. &lt;li&gt;19.45 uur: Daniel Doesburg en Gerard Wijngaarden over TYPO3 en de webrichtlijnen&lt;/li&gt;
  16770. &lt;li&gt;20.45 uur: korte pauze&lt;/li&gt;
  16771. &lt;li&gt;21.00 uur: Koen Willems&lt;/li&gt;
  16772. &lt;li&gt;22.00 uur: Borrelen&lt;/li&gt;
  16773. &lt;/ul&gt;
  16774. &lt;h2&gt;Koen Willems over zijn WYSIWYM-editor&lt;/h2&gt;
  16775. &lt;p&gt;Twee maanden geleden gaf Koen Willems in Den Haag een presentatie, waarin hij stil stond bij de eisen die tegenwoordig aan een rich text editor gesteld moeten worden.&lt;/p&gt;
  16776. &lt;p&gt;Aan het eind daarvan gaf hij een korte demonstratie van een door hem omgebouwde editor, waarin het WYSIWYM-principe is toegepast. Op 6 mei zal dieper worden ingegaan op de problemen en uitdagingen die daarbij naar boven kwamen en zal ook worden stilgestaan bij usability-aspecten. Ook zullen de verdere plannen voor de editor worden toegelicht.&lt;/p&gt;
  16777. &lt;p&gt;theFacor.e is gevestigd aan de Friesestraatweg 215a, 9743 AD te Groningen.&lt;/p&gt;
  16778. &lt;h2&gt;Routebeschrijving met het OV&lt;/h2&gt;
  16779. &lt;ol&gt;
  16780. &lt;li&gt;Neem bus 3 richting Vinkhuizen vanaf Groningen Centraal;&lt;/li&gt;
  16781. &lt;li&gt;Stap uit bij halte Goudlaan/Siersteenlaan;&lt;/li&gt;
  16782. &lt;li&gt;Vanaf de halte ga je bij de rotonde linksaf;&lt;/li&gt;
  16783. &lt;li&gt;Onder de tunnel door en dan weer linksaf;&lt;/li&gt;
  16784. &lt;li&gt;Rechtdoor tot je bij de ommelanden uitkomt (oude melk fabriek);&lt;/li&gt;
  16785. &lt;li&gt;Eerste verdieping van het middelste gebouw. (Het is vanaf de bushalte +/- 5minuten lopen.)&lt;/li&gt;
  16786. &lt;/ol&gt;
  16787. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden, maar is het wenselijk dat je je even opgeeft, zodat de organisatie weet hoeveel personen er komen.&lt;/p&gt;
  16788. </content>
  16789.  </entry>
  16790.  <entry>
  16791.    <title>Bijeenkomst op 19 mei, in Breda</title>
  16792.    <link href="https://www.fronteers.nl/nl/blog/2010/04/bijeenkomst-mei-breda"/>
  16793.    <updated>2010-04-23T00:00:00Z</updated>
  16794.    <id>https://www.fronteers.nl/nl/blog/2010/04/bijeenkomst-mei-breda</id>
  16795.    <content xml:lang="nl" type="html">&lt;p&gt;Op 19 mei zal Fronteers te gast zijn bij &lt;a href=&quot;http://www.e-sites.nl/&quot;&gt;E-sites&lt;/a&gt; in Breda. Er zal een praatje gehouden worden over de huidige ontwikkelingen op het gebied van CSS en er gaat wat verteld worden over HTML5 Apps.&lt;/p&gt;
  16796. &lt;h2&gt;Het programma is als volgt&lt;/h2&gt;
  16797. &lt;ul&gt;
  16798. &lt;li&gt;18.30 uur: Inloop&lt;/li&gt;
  16799. &lt;li&gt;19.15 uur: Introductie E-sites door Boye Oomens&lt;/li&gt;
  16800. &lt;li&gt;19.30 uur: Anne van Kesteren over de huidige ontwikkelingen op het gebied van CSS&lt;/li&gt;
  16801. &lt;li&gt;20.30 uur: Nikolai Onken over HTML5 apps&lt;/li&gt;
  16802. &lt;li&gt;21.30 uur: Borrelen&lt;/li&gt;
  16803. &lt;/ul&gt;
  16804. &lt;h2&gt;Huidige ontwikkelingen rond CSS&lt;/h2&gt;
  16805. &lt;p&gt;&lt;a href=&quot;http://annevankesteren.nl/&quot;&gt;Anne van Kesteren&lt;/a&gt; zal iets gaan vertellen over de huidige ontwikkelingen binnen CSS. Denk hierbij aan onder andere transformaties en animaties. Misschien dat hij ook nog een tipje van de sluier kan oplichten over hoe het er tijdens &lt;a href=&quot;http://www.w3.org/blog/CSS&quot;&gt;CSS WG&lt;/a&gt; meetings aan toe gaat.&lt;/p&gt;
  16806. &lt;h2&gt;HTML5 Apps&lt;/h2&gt;
  16807. &lt;p&gt;&lt;a href=&quot;https://twitter.com/nonken&quot;&gt;Nikolai Onken&lt;/a&gt; zal ingaan op &lt;a href=&quot;http://www.quirksmode.org/blog/archives/2010/03/html5_apps.html&quot;&gt;HTML5 Apps&lt;/a&gt;:
  16808. “Developing HTML5 apps for different mobile devices comes with a whole new set of challenges. In this talk I will show you how platform independent mobile apps can be developed and deployed using the different available runtimes etc. for iPhone, Android, Palm, Blackberry, Nokia and Windows Mobile. You will see what the hurdles are and what is possible and realistic today. Cross platform development is not a myth anymore — you will get insight on how to get started yourself.”&lt;/p&gt;
  16809. &lt;h2&gt;Locatie&lt;/h2&gt;
  16810. &lt;p&gt;E-sites is gevestigd aan de Reduitlaan 33, 4814 DC te Breda. Een &lt;a href=&quot;http://www.e-sites.nl/over/1595-routebeschrijving.html&quot;&gt;routebeschrijving&lt;/a&gt; is te vinden op de website van E-sites.&lt;/p&gt;
  16811. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden, maar is het wenselijk dat je je even opgeeft, zodat de organisatie weet hoeveel personen er komen.&lt;/p&gt;
  16812. </content>
  16813.  </entry>
  16814.  <entry>
  16815.    <title>Oprichting commissie voor cursussen</title>
  16816.    <link href="https://www.fronteers.nl/nl/blog/2010/03/commissie-cursussen"/>
  16817.    <updated>2010-03-24T00:00:00Z</updated>
  16818.    <id>https://www.fronteers.nl/nl/blog/2010/03/commissie-cursussen</id>
  16819.    <content xml:lang="nl" type="html">&lt;p&gt;Het is tijd om een commissie op te richten die de cursussen opzet, regelt en aan de man brengt. Er gaan al langere tijd stemmen op om trainingen aan te bieden. Daar lijkt veel interesse in te zijn, zowel voor aanbieders als afnemers.&lt;/p&gt;
  16820. &lt;p&gt;Mijn ervaring is echter dat het organiseren van trainingen veel meer werk is dan het op het eerste oog lijkt. Je moet trainers regelen, mensen die de trainingen willen volgen, ruimte om de trainingen te volgen, koffie/thee/etc, schema, rooster, financiën, de hele mikmak.&lt;/p&gt;
  16821. &lt;p&gt;Daarom stel ik voor dat we een commissie oprichten die zich hiermee bezig gaat houden. Hier zijn een man of drie vier voor nodig. Deze hoeven zelf niet per se trainingen te geven, maar moeten het geheel wel kunnen opzetten en organiseren.&lt;/p&gt;
  16822. &lt;p&gt;Ik stel mezelf beschikbaar om hier in plaats te nemen. Liever niet als voorzitter, overigens. Tevens wil ik zelf ook trainingen verzorgen m.b.t. JavaScript.&lt;/p&gt;
  16823. &lt;p&gt;Als je interesse hebt in de commissie, in het geven of nemen van trainingen, stuur dan &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/workshops#formulier-1&quot;&gt;een mailtje aan de commissie&lt;/a&gt; of bezoek ons op &lt;a href=&quot;http://webchat.freenode.net/?channels=fronteers&quot;&gt;#fronteers op irc.freenode.net&lt;/a&gt;.&lt;/p&gt;
  16824. </content>
  16825.  </entry>
  16826.  <entry>
  16827.    <title>Bijeenkomst op 25 maart, in Amsterdam</title>
  16828.    <link href="https://www.fronteers.nl/nl/blog/2010/03/bijeenkomst-maart"/>
  16829.    <updated>2010-03-10T00:00:00Z</updated>
  16830.    <id>https://www.fronteers.nl/nl/blog/2010/03/bijeenkomst-maart</id>
  16831.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 25 maart zal Fronteers te gast zijn bij &lt;a href=&quot;http://appoint.nl/&quot;&gt;Appoint&lt;/a&gt; te Amsterdam. Er zal een presenatie gegeven worden over de UX en templating van Drupal 7, en een discussie over webdevelopers.&lt;/p&gt;
  16832. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  16833. &lt;ul&gt;
  16834. &lt;li&gt;18.30 uur: inloop.&lt;/li&gt;
  16835. &lt;li&gt;19.30 uur: korte introductie over Appoint door commercieel directeur Michiel Suijkerbuijk.&lt;/li&gt;
  16836. &lt;li&gt;19.35 uur: Bojhan Somers en Roy Scholten over UX en templating van Drupal 7.&lt;/li&gt;
  16837. &lt;li&gt;20.30 uur: Michiel Suijkerbuijk zal een discussie leiden over webdevelopers.&lt;/li&gt;
  16838. &lt;li&gt;21.00 uur: borrel, netwerken.&lt;/li&gt;
  16839. &lt;/ul&gt;
  16840. &lt;h2&gt;UX en templating van Drupal 7&lt;/h2&gt;
  16841. &lt;p&gt;Drupal 7 heeft veel veranderingen gebracht op het gebied van de gebruiksvriendelijkheid. Er is veel werk gestoken in het vriendelijker maken van Drupal, vooral voor de minder technische gebruikersgroep.&lt;/p&gt;
  16842. &lt;p&gt;Bojhan Somers en Roy Scholten, maintainers van de Drupal 7 User Experience hebben zich bezig gehouden met de vele UX initiatieven in de afgelopen twee jaar. We maken een tour langs de nieuwe mogelijkheden en staan stil bij de veranderingen op user experience en theming gebied:&lt;/p&gt;
  16843. &lt;ul&gt;
  16844. &lt;li&gt;De Drupal 7UX strategie en doelen&lt;/li&gt;
  16845. &lt;li&gt;Demonstratie verbeteringen in Drupal 7UX&lt;/li&gt;
  16846. &lt;li&gt;Drupal 7 theming verbeteringen&lt;/li&gt;
  16847. &lt;li&gt;Reflectie op het proces, en de toekomst van Drupal&lt;/li&gt;
  16848. &lt;/ul&gt;
  16849. &lt;h2&gt;Discussie over webdevelopers&lt;/h2&gt;
  16850. &lt;p&gt;Gespreksleider Michiel zal aan het einde van de bijeenkomst de mening peilen over een aantal stellingen. Appoint is vooral geïnteresseerd in de dagelijkse problemen bij de inzet van Web Developers. Tevens wil Appoint graag de mening peilen van de deelnemers over de succesfactoren en valkuilen bij complexe projecten.&lt;/p&gt;
  16851. &lt;h2&gt;Locatie&lt;/h2&gt;
  16852. &lt;p&gt;Appoint is gevestigd aan de Silodam 402, 1013 AW, Amsterdam.&lt;/p&gt;
  16853. &lt;p&gt;Zoals altijd is deze bijeenkomst gratis toegankelijk voor zowel leden als niet-leden, maar is het wenselijk dat je je even opgeeft, zodat de organisatie weet hoeveel personen er komen.&lt;/p&gt;
  16854. </content>
  16855.  </entry>
  16856.  <entry>
  16857.    <title>Aankondiging Fronteers 2010</title>
  16858.    <link href="https://www.fronteers.nl/nl/blog/2010/03/aankondiging-fronteers-2010"/>
  16859.    <updated>2010-03-05T00:00:00Z</updated>
  16860.    <id>https://www.fronteers.nl/nl/blog/2010/03/aankondiging-fronteers-2010</id>
  16861.    <content xml:lang="nl" type="html">&lt;p&gt;De afgelopen maanden is de &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/congres&quot;&gt;congres commissie&lt;/a&gt; druk bezig geweest met de voorbereidingen van &lt;a href=&quot;https://www.fronteers.nl/congres/2010&quot;&gt;Fronteers 2010&lt;/a&gt;. Vandaag is het moment aangebroken dat we onze voortgang even onder de aandacht willen brengen. Hieronder dus enkele wapenfeiten.&lt;/p&gt;
  16862. &lt;p&gt;Het congres zal dit jaar plaatsvinden op &lt;em&gt;donderdag 7 en vrijdag 8 oktober 2010&lt;/em&gt; in &lt;a href=&quot;http://nl.wikipedia.org/wiki/Tuschinski_Theater&quot;&gt;Pathé Tuschinski&lt;/a&gt; in Amsterdam. We verwachten daar in totaal 14 (ongesponsorde) sessies te houden, dus de kwaliteit zal dit jaar weer van een hoog niveau zijn. En voor iedereen die er in 2009 ook bij was; de stoelen zijn in Tuschinski iets beter ;).&lt;/p&gt;
  16863. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/congres/2010/venue/tuschinski.jpg&quot; alt=&quot;Pathé Tuschinski is een ronde, ruime bioscoopzaal met meerdere verdiepingen.&quot; /&gt;&lt;/p&gt;
  16864. &lt;p&gt;In de dagen voorafgaand aan het congres zullen we ook een aantal workshops organiseren. We zijn hiervoor in onderhandeling met enkele grote namen. Hiervan verwachten we de eerste op korte termijn aan te kunnen kondigen. In ieder geval lijkt het ons verstandig dat designers in de dagen voor het congres ook een dagje &#39;vrij&#39; plannen!&lt;/p&gt;
  16865. &lt;p&gt;Ondertussen hebben we een groot deel van de sprekers (&lt;a href=&quot;https://www.fronteers.nl/blog/2009/11/suggereer-sprekers-fronteers10&quot;&gt;een selectie uit de lijst die jullie aangeleverd hebben&lt;/a&gt;) al benaderd, en hebben de meesten van hen &lt;em&gt;zeer&lt;/em&gt; enthousiast &#39;Ja!&#39; gezegd. De catering is zo goed als rond en we zijn met de laatste details bezig rondom de financiën. Misschien deze, maar sowieso volgende maand, zal de kaartverkoop van start gaan. Fronteers leden kunnen zoals gebruikelijk een korting verwachten, hoewel die iets minder is dan vorige jaren. De contributie is immers ook weer omlaag gegaan. Qua kaartprijs kun je ongeveer uitgaan van de prijzen van vorig jaar.&lt;/p&gt;
  16866. &lt;p&gt;&lt;img src=&quot;https://www.fronteers.nl/_img/congres/2010/fluff/keycords.jpg&quot; alt=&quot;&quot; /&gt;&lt;/p&gt;
  16867. &lt;p&gt;Bij een aankondiging als deze verwacht men natuurlijk ook alvast een aantal namen van sprekers, dus laten we die meteen maar geven. De eerste twee sprekers zijn &lt;a href=&quot;http://adactio.com/&quot;&gt;Jeremy Keith&lt;/a&gt; en &lt;a href=&quot;http://jeffcroft.com/&quot;&gt;Jeff Croft&lt;/a&gt;, twee grootheden in de wereld van HTML en CSS, met een duidelijke mening over de laatste &#39;versies&#39; van deze basistechnieken van iedere front-ender.&lt;/p&gt;
  16868. &lt;p&gt;Natuurlijk zijn we dit jaar ook op zoek naar een aantal sponsoren, die graag hun naam willen verbinden aan ons congres. Neem voor meer informatie hierover contact op met Peter, via &lt;a href=&quot;mailto:congres@fronteers.nl&quot;&gt;congres@fronteers.nl&lt;/a&gt;.&lt;/p&gt;
  16869. &lt;p&gt;Verder willen we nog even zeggen dat we als commissie al erg enthousiast zijn over het verloop, en dat we vrij zeker weten dat dit weer een schitterend congres gaat worden. Hopelijk krijgen we de zaal (lees: de benedenring) weer vol, net als vorig jaar. Hiervoor hebben we het volste vertrouwen in jullie!&lt;/p&gt;
  16870. &lt;p&gt;&lt;a href=&quot;https://twitter.com/edwinm&quot;&gt;Edwin&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/kilianvalkhof&quot;&gt;Kilian&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/krijnhoetmer&quot;&gt;Krijn&lt;/a&gt;, &lt;a href=&quot;https://twitter.com/pesla&quot;&gt;Peter&lt;/a&gt; en &lt;a href=&quot;https://twitter.com/vasilis&quot;&gt;Vasilis&lt;/a&gt;&lt;/p&gt;
  16871. </content>
  16872.  </entry>
  16873.  <entry>
  16874.    <title>Spontaanborrel a.s. woensdag</title>
  16875.    <link href="https://www.fronteers.nl/nl/blog/2010/03/spontaanborrel-woensdag"/>
  16876.    <updated>2010-03-01T00:00:00Z</updated>
  16877.    <id>https://www.fronteers.nl/nl/blog/2010/03/spontaanborrel-woensdag</id>
  16878.    <content xml:lang="nl" type="html">&lt;p&gt;Woensdag 3 maart is er een Spontaanborrel ergens in Utrecht!&lt;/p&gt;
  16879. &lt;p&gt;Wat kan je er nog meer over zeggen. Kom gezellig een biertje pakken in de Winkel van Sinkel te Utrecht, woensdag (3 maart) vanaf een uur of zes!&lt;/p&gt;
  16880. </content>
  16881.  </entry>
  16882.  <entry>
  16883.    <title>Congres video&#39;s, en de keuze voor Theora</title>
  16884.    <link href="https://www.fronteers.nl/nl/blog/2010/01/congres-videos-keuze-voor-theora"/>
  16885.    <updated>2010-01-28T00:00:00Z</updated>
  16886.    <id>https://www.fronteers.nl/nl/blog/2010/01/congres-videos-keuze-voor-theora</id>
  16887.    <content xml:lang="nl" type="html">&lt;p&gt;Na een iets langere periode wachten dan waar we met z&#39;n allen op gehoopt hadden, zijn we dinsdag begonnen met de eerste video&#39;s van Fronteers 2009 online te zetten. Op dit moment zijn beschikbaar: &lt;a href=&quot;https://www.fronteers.nl/congres/2009/sessions/a-web-of-confusion&quot;&gt;A Web of Confusion&lt;/a&gt; door Douglas Crockford, &lt;a href=&quot;https://www.fronteers.nl/congres/2009/sessions/roll-your-own-effects-framework&quot;&gt;Roll Your Own Effects Framework&lt;/a&gt; door Thomas Fuchs, &lt;a href=&quot;https://www.fronteers.nl/congres/2009/sessions/the-future-state-of-layout&quot;&gt;The future state of layout&lt;/a&gt; door Stephen Hay, &lt;a href=&quot;https://www.fronteers.nl/congres/2009/sessions/the-type-we-want-using-fonts-on-the-web&quot;&gt;The Type We Want&lt;/a&gt; door Jonathan Snook, en &lt;a href=&quot;https://www.fronteers.nl/congres/2009/sessions/even-faster-web-sites&quot;&gt;Even Faster Web Sites&lt;/a&gt; door Steve Souders. Alle video&#39;s die we de komende dagen en weken (maanden?) online gaan zetten zullen worden gelinkt vanaf de &lt;a href=&quot;https://www.fronteers.nl/congres/2009/sessions&quot;&gt;sessions pagina&lt;/a&gt; van het congres. Om de video&#39;s te tonen maken we gebruik van het &lt;a href=&quot;http://www.w3.org/TR/html5/video.html#video&quot;&gt;&lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt;&lt;/a&gt; element, en de &lt;a href=&quot;http://en.wikipedia.org/wiki/Theora&quot;&gt;Theora&lt;/a&gt; codec. Dit is niet zonder enige discussie gepaard gegaan...&lt;/p&gt;
  16888. &lt;p&gt;Op dit moment gebruikt ongeveer 65% van de bezoekers van de Fronteers website een browser die het &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; element in combinatie met de Theora codec ondersteunt. Dit zijn specifiek Firefox 3.5/3.6 (en andere Gecko 1.9.1+ browsers zoals SeaMonkey 2), Chrome 3/4, en (pre-)alpha builds van Opera 10.50. De (toch nog) 20% IE gebruikers zullen geen video in hun browser zien, maar kunnen de video&#39;s wel downloaden, en met hun mediaspeler naar keuze afspelen. (In het onwaarschijnlijke geval dat deze geen Theora ondersteunt is &lt;a href=&quot;http://www.videolan.org/vlc/&quot;&gt;VLC&lt;/a&gt; een goed en open-source alternatief.) En dan zijn er ongeveer 10% aan Safari gebruikers, die op de plaats van het video element wel de posterframe zullen zien, maar door het gebrek aan ondersteuning van de Theora codec in Safari, niet de video zullen kunnen afspelen. Deze bezoekers zullen net als de IE gebruikers de video moeten downloaden om hem te kunnen bekijken, en er is fiks gediscussieerd op het Fronteers IRC kanaal of dit de juiste keuze was, of dat we ook een versie van de video&#39;s zouden moeten aanbieden die gebruik maakt van de &lt;a href=&quot;http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC&quot;&gt;H.264&lt;/a&gt; codec. (Deze codec wordt naast Safari ook ondersteund door Chrome, maar niet door de open-source Chromium.) Opvallend genoeg heeft het na het online zetten van de eerste video nog twee dagen geduurd voordat iemand zelfs maar opperde de video&#39;s d.m.v. Flash ook aan IE gebruikers in de browser te tonen.&lt;/p&gt;
  16889. &lt;p&gt;De kernvraag is: Wat is belangrijker, het op dit moment geven van een zo goed mogelijke ervaring aan zoveel mogelijk bezoekers, of het in de strijd gooien van ons collectief gewicht om toe te werken naar een situatie waarin iedere internetgebruiker zonder enige hindernissen video&#39;s kan bekijken en creëren. Wij als Fronteers hebben een voorbeeldfunctie, en willen (zoals op het oprichtingscongres is &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen/18-09-07&quot;&gt;besloten&lt;/a&gt;, en op de afgelopen ALV nog eens is &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen/27-11-2009&quot;&gt;bevestigd&lt;/a&gt;), &amp;quot;standaardenorganisaties en implementerende partijen ertoe [..] bewegen het welzijn van front-end ontwikkelaars te verbeteren middels betere standaarden, technieken, documentatie en implementaties.&amp;quot; Aan de andere kant, kunnen we als front-end ontwikkelaars wel serieus genomen worden als we niet de op dit moment voor zoveel mogelijk mensen best werkende oplossing kiezen?&lt;/p&gt;
  16890. &lt;p&gt;Voor de mensen die niet op de hoogte zijn van de problematiek rondom video codecs, een korte samenvatting. HTML5 specificeert het &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; element. Oorspronkelijk ging dit gepaard met het specificeren van de te gebruiken codec, namelijk Theora. Apple, als een van de vijf grote browser makers, had hier echter zwaarwegende bezwaren tegen aangezien ze bevreesd waren voor &amp;quot;submarine&amp;quot; patenten op deze video codec. Dit risico bestaat natuurlijk altijd, maar met andere codecs hadden ze het risico al genomen (bijvoorbeeld via iTunes), en nog een volgend risico nemen was klaarblijkelijk onacceptabel. H.264 als de te specificeren video codec is niet acceptabel voor open source browser makers (specifiek Mozilla, maar ook relevant voor webkit-gebaseerde browsers zoals Chromium, Konqueror, e.a.), aangezien er veel software patenten op H.264 rusten. Hoewel een organisatie als Mozilla theoretisch de kosten van een licentie zou kunnen opbrengen (voor dit jaar 5 miljoen dollar, ongeveer 6% van de jaarlijkse omzet van Mozilla, met verdere jaarlijkse prijsstijgingen bijna zeker), zouden gebruikers van de Mozilla source code niet gerechtigd zijn H.264 te gebruiken. Dit gaat tegen het principe van open source software in, en is &lt;a href=&quot;http://shaver.off.net/diary/2010/01/23/html5-video-and-codecs/&quot;&gt;onacceptabel voor Mozilla&lt;/a&gt;. (Gebruik maken van op het OS geinstalleerde codecs is voor Mozilla ook &lt;a href=&quot;http://weblogs.mozillazine.org/roc/archives/2010/01/video_freedom_a.html&quot;&gt;geen oplossing&lt;/a&gt;; dit brengt grote beveiligingsproblemen met zich mee, en gaat tegen Mozilla&#39;s missie voor een open web in.) Tevens vindt Opera H.264 onacceptabel, voornamelijk (?) omwille van de zeer hoge licentie kosten. Gezien deze impasse, en om de realiteit beter te reflecteren, is de specificatie van een te gebruiken codec uit HTML5 verwijderd. De zoektocht naar een voor iedereen acceptabele codec blijft wel doorgaan.&lt;/p&gt;
  16891. &lt;p&gt;Met een gebrek aan een van hogerhand opgegeven mandaat voor de codec die algemeen gebruikt gaat worden op het web, heeft de strijd zich verplaatst naar implementaties en gebruikers. H.264 wordt ondersteund door de grote media bedrijven, en de hieraan gelieerde partijen. H.264 heeft een voorsprong in gebruik, en ondersteuning in hardware. Daartegenover staat Theora met ondersteuning van de open source software wereld, en alle kleine partijen die zelf video op het web willen kunnen zetten. H.264 is op dit moment gratis te gebruiken voor het produceren van video&#39;s op kleine schaal, maar door de jaarlijks veranderende licentie structuur bestaat er totaal geen zekerheid dat dit altijd zo zal blijven. &lt;a href=&quot;http://www.0xdeadbeef.com/weblog/2010/01/html5-video-and-h-264-what-history-tells-us-and-why-were-standing-with-the-web/&quot;&gt;De geschiedenis leert ons&lt;/a&gt;, en alle tekenen wijzen er inderdaad op, dat dit, mocht H.264 &lt;em&gt;de&lt;/em&gt; meestgebruikte videocodec worden, over een aantal jaren zal veranderen.&lt;/p&gt;
  16892. &lt;p&gt;De situatie op dit moment is sterk in flux; alles is mogelijk, en kleine acties kunnen een groot effect hebben. Theora heeft, dankzij Firefox en Chrome, op dit moment veruit het grootste percentage aan directe ondersteuning in een browser. Mozilla werkt er tevens hard aan om de kwaliteit van de codec nog verder te verbeteren. (Er bestaan veel mythes over technische inferioriteit van de Theora codec, voornamelijk door oude tests uit de tijd dat de bitstream codec net was vastgelegd, maar er nog weinig tijd was besteed aan het implementeren van encoders en decoders; &lt;a href=&quot;http://people.xiph.org/~greg/video/ytcompare/comparison.html&quot;&gt;recente&lt;/a&gt; &lt;a href=&quot;http://people.xiph.org/~maikmerten/youtube/&quot;&gt;tests&lt;/a&gt; laten zien dat verschillen in kwaliteit minimaal zijn.) Daar tegen over staat dat YouTube en Vimeo in eerste experimenten met &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; &lt;a href=&quot;http://youtube-global.blogspot.com/2010/01/introducing-youtube-html5-supported.html&quot;&gt;gebruik maken van H.264&lt;/a&gt;. (Voornamelijk omdat hun video&#39;s al in dit formaat gecodeerd waren?) Er zijn &lt;a href=&quot;http://lists.xiph.org/pipermail/theora/2009-July/002415.html&quot;&gt;tekenen&lt;/a&gt; dat Apple Theora wil heroverwegen, en met de aankoop van On2 heeft Google de oorsprong van de Theora codec in handen, wat mogelijkerwijs meer zekerheid kan gaan geven op het gebied van submarine patenten.&lt;/p&gt;
  16893. &lt;p&gt;Het komende jaar gaat waarschijnlijk beslissend zijn. Komen we uit op een situatie waar H.264 &lt;em&gt;de&lt;/em&gt; video standaard voor het web wordt, en moet iedereen die iets met video doet hier geld voor gaan betalen aan de MPEG-LA? Of weet Theora genoeg momentum te behalen om Apple en grote video sites over te halen gebruik van deze codec te gaan maken, waarmee we in een wereld terecht komen waar video op het web een vrij en open formaat wordt, waar iedereen optimaal gebruik van kan maken?&lt;/p&gt;
  16894. &lt;p&gt;Ik weet welke situatie mijn voorkeur heeft, en ik weet welke situatie beter is voor ons als web ontwikkelaars. Wij web ontwikkelaars spelen tevens zelf een rol in deze strijd, en onze keuzes kunnen van belang zijn. Hoe meer video van hoge kwaliteit op het web gepubliceerd wordt in Theora (en &lt;em&gt;niet&lt;/em&gt; in H.264), des te hoger wordt de kans dat Apple besluit dat het het risico waard is om ook Theora te ondersteunen in Safari. Fronteers is dan wel geen Wikipedia (welke site al hun video&#39;s in Theora zal hosten), maar we beginnen ondertussen toch enige omvang en naam te hebben, en kunnen deze hier nuttig gebruiken om te helpen streven naar een open web.&lt;/p&gt;
  16895. &lt;p&gt;Wat is jullie mening? Doen we hier goed aan, of moeten we niet zo zeuren en lekker praktisch H.264 video via een Flash interface aanbieden? Is het belangrijker om nu 100% van onze bezoekers tevreden te stellen, of mogen we juist wel wat idealisme tonen en zeggen, &amp;quot;Wij weten wat op lange termijn het beste is!&amp;quot;?&lt;/p&gt;
  16896. </content>
  16897.  </entry>
  16898.  <entry>
  16899.    <title>Bijeenkomst op 4 februari, in Den Haag</title>
  16900.    <link href="https://www.fronteers.nl/nl/blog/2010/01/bijeenkomst-februari"/>
  16901.    <updated>2010-01-22T00:00:00Z</updated>
  16902.    <id>https://www.fronteers.nl/nl/blog/2010/01/bijeenkomst-februari</id>
  16903.    <content xml:lang="nl" type="html">&lt;p&gt;Op donderdag 4 februari 2010 zal de Fronteers bijeenkomst plaatsvinden bij &lt;a href=&quot;http://www.ictu.nl/&quot;&gt;Stichting ICTU&lt;/a&gt; te Den Haag. Deze bijeenkomst zal iets vroeger starten dan normaal in verband met de tijdige sluiting van het gebouw. We starten dan ook met een buffet zodat je niet met een lege maag de presentaties hoeft bij te wonen.&lt;strong&gt;Update: &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2010/stichting-ictu&quot;&gt;verslag en video&#39;s van deze avond&lt;/a&gt; staan online.&lt;/strong&gt;&lt;/p&gt;
  16904. &lt;p&gt;Het programma (onder enig voorbehoud) is als volgt:&lt;/p&gt;
  16905. &lt;ul&gt;
  16906. &lt;li&gt;17:00 uur: inloop&lt;/li&gt;
  16907. &lt;li&gt;17:30 uur: buffet en netwerken&lt;/li&gt;
  16908. &lt;li&gt;18:30 uur: introductie Stichting ICTU&lt;/li&gt;
  16909. &lt;li&gt;18:45 uur: presentatie Webrichtlijnen versie 2 Sneak preview, door Raph de Rooij&lt;/li&gt;
  16910. &lt;li&gt;19:45 uur: presentatie &amp;quot;Evolutie van WYSIWYG naar WYSIWYM&amp;quot;, door Koen Willems&lt;/li&gt;
  16911. &lt;li&gt;20:30 uur: netwerken, borrelen etc.&lt;/li&gt;
  16912. &lt;li&gt;21:30 uur: eruit gegooid worden en in een café in de buurt verder gaan&lt;/li&gt;
  16913. &lt;/ul&gt;
  16914. &lt;h2&gt;Webrichtlijnen versie 2 Sneak preview&lt;/h2&gt;
  16915. &lt;p&gt;De nieuwe webrichtlijnen worden anders van opzet dan de huidige. Raph gaat het hebben over de verbeterpunten van de webrichtlijnen, uitgangspunten van de nieuwe versie van de webrichtlijnen en WCAG 2.&lt;/p&gt;
  16916. &lt;h2&gt;Evolutie van WYSIWYG naar WYSIWYM&lt;/h2&gt;
  16917. &lt;p&gt;Eén van de grotere problemen bij het onderhouden van een website die aan de Webrichtlijnen moet (blijven) voldoen wordt veroorzaakt door de gebruikte editor. Het uitgangspunt van scheiding van content en presentatie brengt met zich mee dat het WYSIWYG-principe niet meer voldoet en dat de focus verlegt moet worden naar WYSIWYM. In het open source segment schijnt daarvoor nog geen goede applicatie voorhanden te zijn.&lt;/p&gt;
  16918. &lt;p&gt;Koen Willems zal in zijn presentatie stilstaan bij de eigenschappen en kenmerken die de ideale editor moet hebben en zal daarbij voorbeelden geven aan de hand van een volledig door hem ‘omgebouwde’ editor.&lt;/p&gt;
  16919. &lt;p&gt;Zoals gebruikelijk is deze bijeenkomst voor zowel leden als niet-leden. Stichting ICTU zit in een overheidsgebouw waar legitimatie verplicht is en waar je vooraf aangemeld moet worden. Zorg voor een geldig legitimatiebewijs (bijvoorbeeld paspoort of rijbewijs) anders kom je echt niet binnen. &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;Meld je op de site aan&lt;/a&gt; en geef alle namen van de personen die meekomen op. Maandag 1 februari 2010 is de laatste dag dat je je kan aanmelden.&lt;/p&gt;
  16920. </content>
  16921.  </entry>
  16922.  <entry>
  16923.    <title>Nieuwjaarsbijeenkomst Internet Society</title>
  16924.    <link href="https://www.fronteers.nl/nl/blog/2010/01/nieuwjaarsbijeenkomst-isoc"/>
  16925.    <updated>2010-01-06T00:00:00Z</updated>
  16926.    <id>https://www.fronteers.nl/nl/blog/2010/01/nieuwjaarsbijeenkomst-isoc</id>
  16927.    <content xml:lang="nl" type="html">&lt;p&gt;Alle Fronteers leden zijn van harte uitgenodigd voor een bijzondere Nieuwjaarsbijeenkomst, die zal worden gehouden op donderdag 14 januari in NEMO in Amsterdam (het grote groene gebouw vlakbij Centraal Station), vanaf 19:00 uur. Hieronder de uitnodiging die wij ontvangen hebben.&lt;/p&gt;
  16928. &lt;p&gt;Dit evenement wordt georganiseerd samen met negentien andere lokale en internationale Internet-gerelateerde organisaties die in Nederland gevestigd zijn. Deelnemende organisaties naast Fronteers zijn Internet Society Nederland, Bits of Freedom, RIPE NCC, W3C Benelux, AMS-IX, Terena, Surfnet, Vereniging Open Domein, Accessibility.nl, Gridforum.nl, OpenDoc Society, NLUUG, ISPconnect, SIDN, NLnet, NLnet Labs, Dutch Hosting Provider Association, stichting HXX, Digitaal Erfgoed Nederland en Vrijschrift.&lt;/p&gt;
  16929. &lt;p&gt;We zijn verheugd dat twee gerelateerde overheidsprogramma&#39;s, het Forum Standaardisatie (dat IT-standaarden vaststelt voor de Nederlandse overheid) en het programma Nederland in Open Verbinding (dat open standaarden en open source binnen de Nederlandse overheid bevordert) eveneens aansluiting hebben gezocht. Hun bijeenkomst vindt eveneens plaats direct voorafgaand aan onze Nieuwjaarsbijeenkomst (vanaf 16.30 uur), en jullie zijn daar eveneens van harte bij welkom. Kortom, het wordt een memorabele dag voor de Nederlandse internetgemeenschap!&lt;/p&gt;
  16930. &lt;p&gt;Het betekent ook dat naast andere Fronteers-leden je zeker tegen vele oude bekenden zult aanlopen. En natuurlijk nieuwe contacten kunt opdoen met interessante mensen uit andere hoeken van het internet. Van experts op het gebied van de laatste webtechnologieen tot accessibility, van hostingbedrijven tot charitatieve investeerders, van digitale burgerrechten tot nummerblokbeheerders - iedereen is er.&lt;/p&gt;
  16931. &lt;p&gt;Naast het bijwonen van het sociale gedeelte kun je ook er voor kiezen om lightning talks bij te wonen over interessante onderwerpen zoals aanstormende internettechnologieen, digitaal erfgoed, de IT-agenda van de overheid, het electronisch patientendossier, universeel toegankelijke games, reverse engineering, en digitale burgerrechten die op de avond plaats zullen vinden. Er wordt een bescheiden buffet geserveerd vanaf 18.00 met dank aan Forum Standaardisatie en het programma Nederland Open in Verbinding.&lt;/p&gt;
  16932. &lt;p&gt;Kom met ons het glas heffen op het nieuw jaar op 14 januari 2010 vanaf 19.00 uur (geschatte eindtijd 23.00) bij NEMO, Oosterdok 2 in Amsterdam.&lt;/p&gt;
  16933. &lt;p&gt;Meer informatie en aanmelden, graag voor 9 januari,  op &lt;a href=&quot;http://isoc.nl/activ/2010-nieuwjaar.htm&quot;&gt;http://isoc.nl/activ/2010-nieuwjaar.htm&lt;/a&gt;&lt;/p&gt;
  16934. &lt;p&gt;P.S. Als je geïnteresseerd bent in het Nederlandse overheidsbeleid op het gebied van open standaarden en open source, ben je van harte welkom om het programma bij te wonen van Forum Standaardisatie en Nederland open in Verbinding vanaf 16.30 uur. Het programma verschijnt binnenkort op &lt;a href=&quot;http://noiv.nl/&quot;&gt;http://noiv.nl/&lt;/a&gt;&lt;/p&gt;
  16935. </content>
  16936.  </entry>
  16937.  <entry>
  16938.    <title>WCAG 2.0 seminar in Den Haag</title>
  16939.    <link href="https://www.fronteers.nl/nl/blog/2009/12/wcag20-seminar"/>
  16940.    <updated>2009-12-02T00:00:00Z</updated>
  16941.    <id>https://www.fronteers.nl/nl/blog/2009/12/wcag20-seminar</id>
  16942.    <content xml:lang="nl" type="html">&lt;p&gt;Op woensdag 16 december zal de Stichting Accessibility in samenwerking met het ISOC en W3C in de Koninklijke Bibliotheek in Den Haag een seminar organiseren over &lt;a href=&quot;http://www.w3.org/TR/WCAG/&quot;&gt;WCAG 2.0&lt;/a&gt;.&lt;/p&gt;
  16943. &lt;p&gt;WCAG 2.0 is eind 2008 geïntroduceerd en zal begin 2010 ook in een officiële Nederlandse vertaling beschikbaar zijn. Wat hebben we aan deze nieuwe standaard? Wat is het verschil met &lt;a href=&quot;http://www.w3.org/TR/WCAG10/&quot;&gt;WCAG 1.0&lt;/a&gt; en wat betekent de nieuwe standaard voor de wet– en regelgeving op nationaal en internationaal niveau? Op deze vragen zal een aantal sprekers een antwoord proberen te geven. Daarnaast zal de coördinator van het W3C Web Accessibility Initiative (WAI) uitgebreid ingaan op WCAG 2.0.&lt;/p&gt;
  16944. &lt;p&gt;Kosten voor het seminar zijn 195 euro exclusief 19% btw. Voor klanten van de Stichting Accessiblity en leden van ISOC en W3C geldt een korting van 50%. Bezoek &lt;a href=&quot;http://www.accessibility.nl/internet/training/SeminarWCAG2/&quot;&gt;de site van de Stichting Accessibility&lt;/a&gt; voor meer informatie, het programma en om je aan te melden.&lt;/p&gt;
  16945. </content>
  16946.  </entry>
  16947.  <entry>
  16948.    <title>Fronteers winterborrel</title>
  16949.    <link href="https://www.fronteers.nl/nl/blog/2009/12/fronteers-winterborrel"/>
  16950.    <updated>2009-12-02T00:00:00Z</updated>
  16951.    <id>https://www.fronteers.nl/nl/blog/2009/12/fronteers-winterborrel</id>
  16952.    <content xml:lang="nl" type="html">&lt;p&gt;Er is op --donderdag 17 december--++maandag 4 januari++ weer zo&#39;n leuke, informele Fronteers borrel. Deze --speciale &#39;DoMiFroBo&#39;--++nieuwjaarsborrel++ vindt plaats bij De Winkel van Sinkel in Utrecht.&lt;/p&gt;
  16953. &lt;p&gt;De Winkel van Sinkel ligt &lt;a href=&quot;http://maps.google.nl/maps?f=q&amp;amp;source=s_q&amp;amp;hl=nl&amp;amp;geocode=&amp;amp;q=winkel+van+sinkel+utrecht&amp;amp;sll=52.469397,5.509644&amp;amp;sspn=3.654648,9.766846&amp;amp;ie=UTF8&amp;amp;hq=Winkel+van+Sinkel&amp;amp;hnear=Winkel+van+Sinkel,+3512+Utrecht&amp;amp;ll=52.095486,5.118599&amp;amp;spn=0.027472,0.076303&amp;amp;z=14&amp;amp;iwloc=A&quot;&gt;aan de Oudegracht&lt;/a&gt; op loopafstand van Utrecht CS. De borrel begint rond 17:00 uur en uiteraard is er na de borrel gelegenheid om nog iets te eten.&lt;/p&gt;
  16954. &lt;p&gt;Dus wil je weer eens gezellig bijpraten, discussiëren over werk of toch juist niet? Kom dan donderdag langs in Utrecht. Je kunt in de reacties even laten weten of je komt.&lt;/p&gt;
  16955. &lt;p&gt;&lt;em&gt;Update:&lt;/em&gt; deze borrel is omgedoopt tot nieuwjaarsborrel, en wel op maandag 4 januari 2010. Zelfde tijd en locatie!&lt;/p&gt;
  16956. </content>
  16957.  </entry>
  16958.  <entry>
  16959.    <title>Meld je aan voor de Algemene Ledenvergadering 2009</title>
  16960.    <link href="https://www.fronteers.nl/nl/blog/2009/11/meld-je-aan-voor-de-algemene-ledenvergadering-2009"/>
  16961.    <updated>2009-11-18T00:00:00Z</updated>
  16962.    <id>https://www.fronteers.nl/nl/blog/2009/11/meld-je-aan-voor-de-algemene-ledenvergadering-2009</id>
  16963.    <content xml:lang="nl" type="html">&lt;p&gt;Vrijdag 27 november a.s. houden we onze jaarlijkse algemene ledenvergadering (ALV). De ALV vindt plaats in de &lt;a href=&quot;http://www.bvalmere.nl/vereniging/sporthal&quot;&gt;sporthal van Badminton Vereniging Almere&lt;/a&gt;. We beginnen om 19.30 uur en denken maximaal twee uur nodig te hebben.&lt;/p&gt;
  16964. &lt;p&gt;De agenda is als volgt:&lt;/p&gt;
  16965. &lt;ol&gt;
  16966. &lt;li&gt;Welkom en opening door de voorzitter&lt;/li&gt;
  16967. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  16968. &lt;li&gt;Ingebrachte beleidsvoorstellen&lt;/li&gt;
  16969. &lt;li&gt;Besluiten eerdere ALV’s&lt;/li&gt;
  16970. &lt;li&gt;Begroting 2009&lt;/li&gt;
  16971. &lt;li&gt;Begroting 2010&lt;/li&gt;
  16972. &lt;li&gt;Kascommissieverkiezing&lt;/li&gt;
  16973. &lt;li&gt;Bestuursverkiezing&lt;/li&gt;
  16974. &lt;li&gt;Rondvraag&lt;/li&gt;
  16975. &lt;li&gt;Sluiting&lt;/li&gt;
  16976. &lt;/ol&gt;
  16977. &lt;p&gt;De commissievoorzitters zullen een korte toelichting geven op hun gedane werk en hun plannen voor 2010 en staan verder natuurlijk open voor vragen. Ook zullen we eerdere aangenomen voorstellen uit 2007 en 2008 tegen het licht houden. Arjan Eising is herkiesbaar en Matijs Brinkhuis is verkiesbaar voor een positie in het bestuur. Mocht je zelf nog vragen, ideeën of voorstellen hebben, meld ze dan middels het &lt;a href=&quot;https://www.fronteers.nl/contact&quot;&gt;contactformulier&lt;/a&gt;. Zie ook de eerdere &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen&quot;&gt;notulen&lt;/a&gt;.&lt;/p&gt;
  16978. &lt;blockquote&gt;
  16979. &lt;p&gt;Na een jaar of zeven in een business consultant-achtige rol te hebben gewerkt bij achtereenvolgens &#39;s lands grootste openbaar vervoerder en &#39;s lands grootste telecom provider was ik heel erg toe aan wat nieuws. Na een half jaartje heerlijk niksen en nadenken over waar ik dan wel zin in had, ben ik begin 2008 voor mezelf begonnen als webdeveloper. Een behoorlijke carrière switch eigenlijk. Gaandeweg ben ik meer werk aan de voorkant gaan doen en tegenwoordig noem ik mezelf dus Front-end Developer.&lt;/p&gt;
  16980. &lt;/blockquote&gt;
  16981. &lt;p&gt;(Hidden)&lt;/p&gt;
  16982. &lt;p&gt;(Hidden)&lt;/p&gt;
  16983. &lt;h2&gt;Aangemeld&lt;/h2&gt;
  16984. &lt;ul&gt;
  16985. &lt;li&gt;Arjan Eising&lt;/li&gt;
  16986. &lt;li&gt;Krijn Hoetmer&lt;/li&gt;
  16987. &lt;li&gt;Matijs Brinkhuis&lt;/li&gt;
  16988. &lt;li&gt;Peter-Paul Koch&lt;/li&gt;
  16989. &lt;li&gt;Sander van Lambalgen&lt;/li&gt;
  16990. &lt;li&gt;Tom Greuter&lt;/li&gt;
  16991. &lt;li&gt;Sander Aarts&lt;/li&gt;
  16992. &lt;li&gt;Jules Ernst&lt;/li&gt;
  16993. &lt;li&gt;Glenn Glerum&lt;/li&gt;
  16994. &lt;li&gt;Rein Groot&lt;/li&gt;
  16995. &lt;li&gt;Wes Oudshoorn&lt;/li&gt;
  16996. &lt;li&gt;Jan van Hellemond&lt;/li&gt;
  16997. &lt;li&gt;Kilian Valkhof&lt;/li&gt;
  16998. &lt;li&gt;Wim van Iersel&lt;/li&gt;
  16999. &lt;li&gt;Tibo Beijen&lt;/li&gt;
  17000. &lt;li&gt;Sander Leer&lt;/li&gt;
  17001. &lt;li&gt;Edwin Martin&lt;/li&gt;
  17002. &lt;li&gt;Wybe Weysters&lt;/li&gt;
  17003. &lt;li&gt;Kor Dwarshuis&lt;/li&gt;
  17004. &lt;/ul&gt;
  17005. </content>
  17006.  </entry>
  17007.  <entry>
  17008.    <title>Bijeenkomst op 3 december, in Rotterdam</title>
  17009.    <link href="https://www.fronteers.nl/nl/blog/2009/11/bijeenkomst-december"/>
  17010.    <updated>2009-11-09T00:00:00Z</updated>
  17011.    <id>https://www.fronteers.nl/nl/blog/2009/11/bijeenkomst-december</id>
  17012.    <content xml:lang="nl" type="html">&lt;p&gt;Na een paar wilde dagen &lt;a href=&quot;https://www.fronteers.nl/congres/2009&quot;&gt;Fronteers 2009&lt;/a&gt;, terug naar de orde van de dag: de maandelijkse bijeenkomsten :) Op donderdag 3 december komen we in Rotterdam bij elkaar bij &lt;a href=&quot;http://www.dlma.nl/&quot;&gt;DLMA&lt;/a&gt;, waar een mooi programma voor ons in elkaar is gezet:&lt;/p&gt;
  17013. &lt;ul&gt;
  17014. &lt;li&gt;18.30 uur: Inloop&lt;/li&gt;
  17015. &lt;li&gt;19.30 uur: Waarom klanten niet willen luisteren&lt;/li&gt;
  17016. &lt;li&gt;20.30 uur: ExpressionEngine 2.0&lt;/li&gt;
  17017. &lt;li&gt;21.30 uur: Borrelen, netwerken, etc.&lt;/li&gt;
  17018. &lt;/ul&gt;
  17019. &lt;h2&gt;Waarom klanten niet willen luisteren&lt;/h2&gt;
  17020. &lt;p&gt;Wat zou het werkende leven er toch stukken beter uitzien als de klant gewoon naar ons zou luisteren. De vragen die ze durven te stellen, zijn vaak meer een belediging van onze kwaliteiten dan iets waar je wat mee kan. En het technisch niveau is zo schrikbarend laag dat we geeneens meer aan uitleggen gaan beginnen - de meesten weten niet het verschil tussen een browser en een platform. Zucht... maar wat te doen?&lt;/p&gt;
  17021. &lt;h2&gt;ExpressionEngine 2.0&lt;/h2&gt;
  17022. &lt;p&gt;Op 1 december 2009 is het cms ExpressionEngine 2.0 eindelijk uitgebracht. Wat zijn de nieuwe features van deze nieuwe release? Hoe verhoudt ExpressionEngine zich tot Wordpress en Drupal? Een aantal praktisch tips voor een optimaal werken met ExpressionEngine. Een werkende EE 2.0 installatie zal aanwezig zijn om zelf in rond te neuzen!&lt;/p&gt;
  17023. &lt;h2&gt;DLMA&lt;/h2&gt;
  17024. &lt;p&gt;DLMA is &lt;a href=&quot;http://www.dlma.nl/over-ons/contact.php&quot;&gt;te vinden&lt;/a&gt; op &lt;a href=&quot;http://maps.google.nl/maps?f=q&amp;amp;source=s_q&amp;amp;hl=nl&amp;amp;geocode=&amp;amp;q=Nieuwe+Binnenweg+137,+3014+GJ+Rotterdam&amp;amp;sll=52.469397,5.509644&amp;amp;sspn=3.949239,9.876709&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=Nieuwe+Binnenweg+137,+3014+Rotterdam,+Zuid-Holland&amp;amp;ll=51.917485,4.466329&amp;amp;spn=0.007809,0.027466&amp;amp;t=h&amp;amp;z=16&amp;amp;iwloc=A&quot;&gt;Nieuwe Binnenweg 137, 3014 GJ Rotterdam&lt;/a&gt; en met het OV te bereiken door vanaf Rotterdam CS tram 4 te pakken en uit te stappen bij halte Mathenesserlaan.&lt;/p&gt;
  17025. &lt;p&gt;Zoals gebruikelijk is de toegang gratis voor zowel leden als niet-leden, maar dien je je even &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;aan te melden&lt;/a&gt;.&lt;/p&gt;
  17026. &lt;p&gt;Tot op 3 december!&lt;/p&gt;
  17027. </content>
  17028.  </entry>
  17029.  <entry>
  17030.    <title>Presentations Fronteers 2009</title>
  17031.    <link href="https://www.fronteers.nl/nl/blog/2009/11/presentations-fronteers-2009"/>
  17032.    <updated>2009-11-05T00:00:00Z</updated>
  17033.    <id>https://www.fronteers.nl/nl/blog/2009/11/presentations-fronteers-2009</id>
  17034.    <content xml:lang="nl" type="html">&lt;p&gt;A short wrap-up of the presentations held at Fronteers 2009. Update: most videos are available on &lt;a href=&quot;https://www.fronteers.nl/congres/2009/sessions&quot;&gt;the sessions page&lt;/a&gt;.&lt;/p&gt;
  17035. &lt;h2&gt;Day 1&lt;/h2&gt;
  17036. &lt;ol&gt;
  17037. &lt;li&gt;Molly Holzschlag - What&#39;s New With the Mobile Web&lt;/li&gt;
  17038. &lt;li&gt;Peter-Paul Koch - &lt;a href=&quot;http://www.quirksmode.org/blog/archives/2009/11/presentations_t.html&quot;&gt;The Mobile Web, or the masochist’s guide to gleeful self-flagellation&lt;/a&gt;&lt;/li&gt;
  17039. &lt;li&gt;Chris Heilmann - &lt;a href=&quot;http://www.wait-till-i.com/2009/11/05/of-hamsters-feature-creatures-and-missed-opportunities-my-talk-at-fronteers-2009/&quot;&gt;Of Hamsters, Feature Creatures and Missed Opportunities&lt;/a&gt;&lt;/li&gt;
  17040. &lt;li&gt;Martin Savelkoul - Building and maintaining a complex frontend codebase&lt;/li&gt;
  17041. &lt;li&gt;Stephen Hay - &lt;a href=&quot;http://www.the-haystack.com/2009/11/05/slides-for-my-fronteers-2009-presentation-online/&quot;&gt;The future state of layout&lt;/a&gt;&lt;/li&gt;
  17042. &lt;li&gt;John Resig - &lt;a href=&quot;http://www.slideshare.net/jeresig/understanding-javascript-testing&quot;&gt;Understanding JavaScript Testing&lt;/a&gt;&lt;/li&gt;
  17043. &lt;li&gt;Steve Souders - &lt;a href=&quot;http://stevesouders.com/docs/fronteers-20091105.pptx&quot;&gt;Even Faster Web Sites&lt;/a&gt;&lt;/li&gt;
  17044. &lt;/ol&gt;
  17045. &lt;h2&gt;Day 2&lt;/h2&gt;
  17046. &lt;ol&gt;
  17047. &lt;li&gt;Douglas Crockford - &lt;a href=&quot;http://crockford.com/codecamp/ajaxsecurity.ppt&quot;&gt;Ajax Security&lt;/a&gt;&lt;/li&gt;
  17048. &lt;li&gt;Pete LePage - &lt;a href=&quot;https://www.fronteers.nl/_downloads/2009/html5-features-in-ie8.pptx&quot;&gt;Using HTML5 Features In Internet Explorer 8&lt;/a&gt;&lt;/li&gt;
  17049. &lt;li&gt;Jonathan Snook - &lt;a href=&quot;http://www.slideshare.net/jonathansnook/the-type-we-want-2438381&quot;&gt;The Type We Want: Using Fonts on the Web&lt;/a&gt;&lt;/li&gt;
  17050. &lt;li&gt;Robbert Broersma - The challenges and rewards of writing a 120K JavaScript application&lt;/li&gt;
  17051. &lt;li&gt;Thomas Fuchs - &lt;a href=&quot;http://script.aculo.us/downloads/emile.pdf&quot;&gt;Roll Your Own Effects Framework&lt;/a&gt;&lt;/li&gt;
  17052. &lt;li&gt;Nicole Sullivan - &lt;a href=&quot;http://www.slideshare.net/stubbornella/the-cascade-grids-headings-and-selectors-from-an-oocss-perspective-ajax-experience-2009&quot;&gt;Object Oriented CSS&lt;/a&gt;&lt;/li&gt;
  17053. &lt;li&gt;Dion Almaer &amp;amp; Ben Galbraith - The Future of Web Applications&lt;/li&gt;
  17054. &lt;/ol&gt;
  17055. &lt;h2&gt;Other interesting links:&lt;/h2&gt;
  17056. &lt;ul&gt;
  17057. &lt;li&gt;&lt;a href=&quot;http://www.flickr.com/search/?q=fronteers09&amp;amp;s=int&quot;&gt;Flickr photo&#39;s&lt;/a&gt;&lt;/li&gt;
  17058. &lt;li&gt;&lt;a href=&quot;https://wave.google.com/wave/?pli=1#restored:search:with%253Apublic%20fronteers&quot;&gt;Google Wave transcripts of day 2&lt;/a&gt;&lt;/li&gt;
  17059. &lt;/ul&gt;
  17060. &lt;p&gt;To be updated. Please add your links and comments.&lt;/p&gt;
  17061. </content>
  17062.  </entry>
  17063.  <entry>
  17064.    <title>Bijeenkomst op 3 november, in Amsterdam: Sex, food, and JavaScript</title>
  17065.    <link href="https://www.fronteers.nl/nl/blog/2009/10/bijeenkomst-november"/>
  17066.    <updated>2009-10-17T00:00:00Z</updated>
  17067.    <id>https://www.fronteers.nl/nl/blog/2009/10/bijeenkomst-november</id>
  17068.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 3 november zal er een speciale Fronteers-bijeenkomst plaatsvinden bij Mirabeau te Amsterdam. Molly Holzschlag en Chris Heilmann, die naar Amsterdam zijn gekomen voor &lt;a href=&quot;https://www.fronteers.nl/congres/2009/information&quot;&gt;Fronteers 2009&lt;/a&gt;, zullen er een speciale sessie houden getiteld &amp;quot;Sex, food, and JavaScript.&amp;quot;&lt;/p&gt;
  17069. &lt;p&gt;Het belooft een avond te worden waar luchtigheid zal worden afgewisseld met advies over webtechnologieen, speciaal JavaScript. Molly zal de titel van de sessie nader verklaren.&lt;/p&gt;
  17070. &lt;p&gt;Dit alles vindt plaats te Amsterdam bij Mirabeau op het &lt;a href=&quot;http://mirabeau.nl/contact-amsterdam-centrum.asp&quot;&gt;kantoor Weteringschans&lt;/a&gt;. Inloop is vanaf 18 uur, en rond 19 uur zullen we beginnen. Zoals gebruikelijk is de toegang gratis. Er zijn circa 50 plaatsen beschikbaar, en er zullen lichte verversingen worden geserveerd.&lt;/p&gt;
  17071. &lt;p&gt;Tot dan!&lt;/p&gt;
  17072. &lt;p&gt;&lt;em&gt;Update:&lt;/em&gt; Ondertussen zit deze bijeenkomst &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning&quot;&gt;helemaal vol&lt;/a&gt;.&lt;/p&gt;
  17073. &lt;p&gt;&lt;em&gt;Update 2&lt;/em&gt;: Helaas is Molly door haar rug gegaan en neemt ze rust zodat haar Fronteers 2009 sessie niet in gevaar komt. Ze zal er vanavond dan ook niet bij zijn.&lt;/p&gt;
  17074. </content>
  17075.  </entry>
  17076.  <entry>
  17077.    <title>Two free tickets for Fronteers 2009</title>
  17078.    <link href="https://www.fronteers.nl/nl/blog/2009/10/two-free-tickets-for-fronteers-2009"/>
  17079.    <updated>2009-10-16T00:00:00Z</updated>
  17080.    <id>https://www.fronteers.nl/nl/blog/2009/10/two-free-tickets-for-fronteers-2009</id>
  17081.    <content xml:lang="nl" type="html">&lt;p&gt;When we sold out Fronteers 2009 in September we loudly proclaimed that no more tickets were to be had. Point is: we weren&#39;t entirely truthful. There still are two tickets available. They&#39;re even free. You just have to do something in order to get them.&lt;/p&gt;
  17082. &lt;p&gt;Microsoft, which sponsors Fronteers 2009, will give away two tickets to the two persons who create the most beautiful or interesting IE8 Web Slices.&lt;/p&gt;
  17083. &lt;p&gt;The contest will be judged by Pete LePage, and he will consider the following three factors:&lt;/p&gt;
  17084. &lt;ol&gt;
  17085. &lt;li&gt;Quality of the HTML (does it validate, is it clean, readable, etc)&lt;/li&gt;
  17086. &lt;li&gt;Quality of the design of the Web Slice (does it look pretty)&lt;/li&gt;
  17087. &lt;li&gt;Quality of the information (is the information relevant to the site, is it useful)&lt;/li&gt;
  17088. &lt;/ol&gt;
  17089. &lt;p&gt;In order to participate, leave a comment with a link to the page that contains your Web Slice. The submission period ends on &lt;em&gt;Monday 26 October&lt;/em&gt;, and the winners will be announced later that week.&lt;/p&gt;
  17090. &lt;p&gt;Here is some more information about Web Slices:&lt;/p&gt;
  17091. &lt;ul&gt;
  17092. &lt;li&gt;Tutorial: &lt;a href=&quot;http://blogs.msdn.com/ie/archive/2009/03/03/create-a-dynamic-web-slice-in-5-minutes.aspx&quot;&gt;Create a dynamic Web Slice in 5 minutes&lt;/a&gt;&lt;/li&gt;
  17093. &lt;li&gt;Tutorial: &lt;a href=&quot;http://www.code-magazine.com/Article.aspx?quickid=0811052&quot;&gt;Create Your Own Web Slices&lt;/a&gt;&lt;/li&gt;
  17094. &lt;li&gt;Example: &lt;a href=&quot;http://www.cindyli.com/site/comments/creating_a_web_slice_for_your_flickr_badge/&quot;&gt;Creating a Web Slice for your flickr badge&lt;/a&gt;&lt;/li&gt;
  17095. &lt;/ul&gt;
  17096. </content>
  17097.  </entry>
  17098.  <entry>
  17099.    <title>Fronteers 2009: sprekerswissel en rooster</title>
  17100.    <link href="https://www.fronteers.nl/nl/blog/2009/10/fronteers-2009-sprekerswissel-en-rooster"/>
  17101.    <updated>2009-10-14T00:00:00Z</updated>
  17102.    <id>https://www.fronteers.nl/nl/blog/2009/10/fronteers-2009-sprekerswissel-en-rooster</id>
  17103.    <content xml:lang="nl" type="html">&lt;p&gt;Over drie weken is het Fronteers 2009 congres, en er zijn een paar kleinigheden aan te kondigen.&lt;/p&gt;
  17104. &lt;p&gt;Allereerst is er een sprekerswissel. Nate Koechley gaat het helaas niet halen om aanwezig te zijn, maar gelukkig hebben we &lt;a href=&quot;http://snook.ca/&quot;&gt;Jonathan Snook&lt;/a&gt; bereid gevonden in zijn plaats te komen en ons bij te praten over &lt;code&gt;@font-face&lt;/code&gt; en de interessante nieuwe designtechnieken die hiermee mogelijk zijn geworden.&lt;/p&gt;
  17105. &lt;p&gt;Het &lt;a href=&quot;https://www.fronteers.nl/congres/2009/schedule&quot;&gt;congresrooster&lt;/a&gt; is nu ook compleet, zodat je precies weet wie je wanneer kunt verwachten.&lt;/p&gt;
  17106. &lt;p&gt;Helaas is het congres helemaal, volledig, voor de volle 100% uitverkocht. Er zijn geen kaartjes meer, zelfs niet als je het lief vraagt.&lt;/p&gt;
  17107. &lt;p&gt;We hopen diegenen die wel een kaartje hebben op 5 november te kunnen begroeten.&lt;/p&gt;
  17108. </content>
  17109.  </entry>
  17110.  <entry>
  17111.    <title>Workshop mobiel web en W3C Widgets te Rotterdam</title>
  17112.    <link href="https://www.fronteers.nl/nl/blog/2009/10/workshop-mobiel-web-en-w3c-widgets-te-rotterdam"/>
  17113.    <updated>2009-10-07T00:00:00Z</updated>
  17114.    <id>https://www.fronteers.nl/nl/blog/2009/10/workshop-mobiel-web-en-w3c-widgets-te-rotterdam</id>
  17115.    <content xml:lang="nl" type="html">&lt;p&gt;Aanstaande maandag geef ik een workshop mobiel web en W3C Widgets aan de Hogeschool van Rotterdam. Deze zal duren van 10:00 tot circa 17:00 uur.&lt;/p&gt;
  17116. &lt;p&gt;Ik zal hier wat vertellen over het mobiele web en W3C Widgets in het bijzonder, en het is de bedoeling dat we ook zelf widgets gaan bouwen.&lt;/p&gt;
  17117. &lt;p&gt;Naast circa 25 studenten heeft de Hogeschool van Rotterdam nog extra plaatsen weten los te peuteren voor algemeen geinteresseerden. Hierbij dus een oproep om te komen als dit je interessant lijkt.&lt;/p&gt;
  17118. &lt;p&gt;&lt;a href=&quot;http://www.hogeschool-rotterdam.nl/page.html?id=123299&quot;&gt;Locatie&lt;/a&gt;:
  17119. Hogeschool Rotterdam,
  17120. lokaal MH.11.405
  17121. Museumpark 40,
  17122. 3015 CX ROTTERDAM&lt;/p&gt;
  17123. &lt;p&gt;Laat even een commentje achter als je van plan bent te komen, dan weten we ongeveer hoeveel externen we kunnen verwachten.&lt;/p&gt;
  17124. &lt;p&gt;Mocht je een telefoon hebben die W3C Widgets aankan, dan is het verstandig die mee te nemen. Het gaat hier om Nokia S60 telefoons met de Vodafone Widget Manager OF elke telefoon met Opera Mobile 9.51 of hoger geinstalleerd.&lt;/p&gt;
  17125. &lt;p&gt;In de &lt;a href=&quot;http://www.betavine.net/bvportal/resources/widgets/research%22&quot;&gt;Vodafone SDK&lt;/a&gt; is een developer release van de Widget Manager voor S60 te vinden.&lt;/p&gt;
  17126. &lt;p&gt;Ik hoop een aantal Fronteers-leden in Rotterdam te kunnen begroeten.&lt;/p&gt;
  17127. </content>
  17128.  </entry>
  17129.  <entry>
  17130.    <title>Bijeenkomst op 15 oktober, in Utrecht</title>
  17131.    <link href="https://www.fronteers.nl/nl/blog/2009/10/bijeenkomst-oktober"/>
  17132.    <updated>2009-10-07T00:00:00Z</updated>
  17133.    <id>https://www.fronteers.nl/nl/blog/2009/10/bijeenkomst-oktober</id>
  17134.    <content xml:lang="nl" type="html">&lt;p&gt;Volgende week donderdag, 15 oktober, zijn we te gast bij &lt;a href=&quot;http://www.efocus.nl/&quot;&gt;eFocus&lt;/a&gt; uit Utrecht.&lt;/p&gt;
  17135. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  17136. &lt;p&gt;18.30 uur: Inloop
  17137. 19.30 uur: Introductie van eFocus
  17138. 19.45 uur: Hedwyg van Groenendaal, over een goed Internet Project Plan
  17139. 20.45 uur: Netwerken, borrelen, etc&lt;/p&gt;
  17140. &lt;h2&gt;Hedwyg van Groenendaal, over een goed Internet Project Plan&lt;/h2&gt;
  17141. &lt;p&gt;&lt;a href=&quot;http://www.hedwyg.nl/overhedwyg.php&quot;&gt;Hedwyg&lt;/a&gt; adviseert, creëert, doceert, ontwikkelt en schrijft boeken. Zij is specialist in webdesign en al sinds 1993 actief met internet. In 1996 heeft ze haar eigen internet- en webdesignbureau &lt;a href=&quot;http://www.viamilia.com/&quot;&gt;Via Milia&lt;/a&gt; opgericht en in 2000 werd daar een internetopleidingscentrum aan toegevoegd. In oktober 2001 verscheen haar eerste boek Flash ActionScript. In mei 2003 verscheen haar tweede boek Webdesign van concept tot realisatie, een handleiding voor hoe je een goed doordacht Internet Project Plan schrijft als basis voor een succesvolle website. Hierover zal zij meer vertellen.&lt;/p&gt;
  17142. &lt;p&gt;Het adres van het hoofdkantoor van eFocus is Kanaalweg 29, 3526 KM Utrecht. Een &lt;a href=&quot;http://www.efocus.nl/home/wie_is_efocus/route/&quot;&gt;routebeschrijving&lt;/a&gt; is online te vinden.&lt;/p&gt;
  17143. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen door zowel leden als niet-leden van Fronteers. Het is wel noodzakelijk om je &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;op te geven&lt;/a&gt;, zodat we weten hoeveel mensen er naar de bijeenkomst komen.&lt;/p&gt;
  17144. &lt;p&gt;Tot volgende week!&lt;/p&gt;
  17145. </content>
  17146.  </entry>
  17147.  <entry>
  17148.    <title>Fronteers 2009 - sprekers en kaartverkoop</title>
  17149.    <link href="https://www.fronteers.nl/nl/blog/2009/09/fronteers-2009-sprekers-en-kaartverkoop"/>
  17150.    <updated>2009-09-15T00:00:00Z</updated>
  17151.    <id>https://www.fronteers.nl/nl/blog/2009/09/fronteers-2009-sprekers-en-kaartverkoop</id>
  17152.    <content xml:lang="nl" type="html">&lt;p&gt;Zoals bekend wordt op 5 en 6 november aanstaande het &lt;a href=&quot;https://www.fronteers.nl/congres/2009&quot;&gt;Fronteers 2009 congres&lt;/a&gt; gehouden. Hoewel pas de helft van de sprekers was aangekondigd, zijn we al vrijwel uitverkocht. Dit is een mooi resultaat, maar ook enigszins onverwacht.&lt;/p&gt;
  17153. &lt;p&gt;In elk geval willen we hierbij graag de &lt;a href=&quot;https://www.fronteers.nl/congres/2009/speakers&quot;&gt;volledige lijst&lt;/a&gt; van Fronteers 2009 sprekers bekend maken. Op de hoofdtrack zullen spreken:&lt;/p&gt;
  17154. &lt;ul&gt;
  17155. &lt;li&gt;Dion Almaer en Ben Galbraith&lt;/li&gt;
  17156. &lt;li&gt;Douglas Crockford&lt;/li&gt;
  17157. &lt;li&gt;Thomas Fuchs&lt;/li&gt;
  17158. &lt;li&gt;Stephen Hay&lt;/li&gt;
  17159. &lt;li&gt;Molly Holzschlag (gesponsord door Opera)&lt;/li&gt;
  17160. &lt;li&gt;Chris Heilmann&lt;/li&gt;
  17161. &lt;li&gt;Peter-Paul Koch (gesponsord door Vodafone)&lt;/li&gt;
  17162. &lt;li&gt;Nate Koechley&lt;/li&gt;
  17163. &lt;li&gt;Pete LePage (gesponsord door Microsoft)&lt;/li&gt;
  17164. &lt;li&gt;John Resig&lt;/li&gt;
  17165. &lt;li&gt;Nicole Sullivan&lt;/li&gt;
  17166. &lt;li&gt;Steve Souders&lt;/li&gt;
  17167. &lt;/ul&gt;
  17168. &lt;p&gt;Daarnaast zijn er twee sessies van een half uur, die gevuld zullen worden door&lt;/p&gt;
  17169. &lt;ul&gt;
  17170. &lt;li&gt;Vasilis van Gemert (gesponsord door Mirabeau)&lt;/li&gt;
  17171. &lt;li&gt;Laurens van den Oever (gesponsord door Xopus)&lt;/li&gt;
  17172. &lt;/ul&gt;
  17173. &lt;p&gt;Al met al staat dit garant voor een uitstekend congres.&lt;/p&gt;
  17174. &lt;p&gt;Wat de kaarten betreft; die zijn bijna uitverkocht en de verkoop is op dit moment stilgelegd. Deze rappe uitverkoop heeft ons verrast; we hadden verwacht tegen deze tijd nog 30 tot 50 kaarten over te hebben. Over de zomer is er echter zo goed verkocht dat dat niet het geval is, en we hebben verder geen vragen gesteld en het sluitende budget dat we aan deze verkoop overhouden, met blijdschap geaccepteerd.&lt;/p&gt;
  17175. &lt;p&gt;Gelukkig heeft de helft van de Fronteers-leden al een kaartje gekocht. Deze 50% komt overeen met onze ervaringen van vorig jaar, dus we nemen aan dat alle leden die dat willen, intussen toegang tot het congres hebben.&lt;/p&gt;
  17176. &lt;p&gt;Op dit moment zijn we druk bezig om te inventariseren en te administreren, zodat we exact kunnen bepalen hoeveel kaarten we nog over hebben. We verwachten dat we nog 3 tot 8 kaarten kunnen verkopen.&lt;/p&gt;
  17177. &lt;p&gt;Er gelden geen kortingen meer voor deze kaarten; ze zijn allemaal 350 euro. Wie het eerst komt, die het eerst maalt; als deze kaarten op zijn, zijn ze ook &lt;em&gt;echt&lt;/em&gt; op.&lt;/p&gt;
  17178. &lt;p&gt;Het begin van de verkoop zal het eerst aangekondigd worden op onze &lt;a href=&quot;https://twitter.com/fronteers09&quot;&gt;Twitter feed&lt;/a&gt;. Volg ons dus als je het direct wil horen wanneer de laatste kaarten beschikbaar komen.&lt;/p&gt;
  17179. &lt;p&gt;We hopen je op Fronteers 2009 te kunnen begroeten.&lt;/p&gt;
  17180. </content>
  17181.  </entry>
  17182.  <entry>
  17183.    <title>Fronteers Nazomerborrel</title>
  17184.    <link href="https://www.fronteers.nl/nl/blog/2009/09/nazomerborrel"/>
  17185.    <updated>2009-09-08T00:00:00Z</updated>
  17186.    <id>https://www.fronteers.nl/nl/blog/2009/09/nazomerborrel</id>
  17187.    <content xml:lang="nl" type="html">&lt;p&gt;Naar aanleiding van de zeer geslaagde &lt;a href=&quot;https://www.fronteers.nl/blog/2009/07/vrijmifrobo&quot;&gt;eerste VrijMiFroBo&lt;/a&gt; in de 1e Klas Pub op Amsterdam CS wordt er op 18 september opnieuw een VrijMiFroBo &#39;georganiseerd&#39;. Het is de bedoeling vanaf een uurtje of vijf gezellig een drankje te gaan doen bij &lt;a href=&quot;http://www.kingarthur-utrecht.com/&quot;&gt;King Arthur&lt;/a&gt; in Utrecht.&lt;/p&gt;
  17188. &lt;p&gt;King Arthur ligt &lt;a href=&quot;http://maps.google.nl/maps?f=q&amp;amp;source=s_q&amp;amp;hl=nl&amp;amp;geocode=&amp;amp;q=Oudegracht+101-103+-+3511+AE+Utrecht&amp;amp;sll=52.469397,5.509644&amp;amp;sspn=3.480579,9.755859&amp;amp;ie=UTF8&amp;amp;ll=52.092849,5.116732&amp;amp;spn=0.006855,0.019054&amp;amp;t=h&amp;amp;z=16&amp;amp;iwloc=A&quot;&gt;aan de Oude Gracht&lt;/a&gt; op loopafstand van Utrecht CS. Als er net als in Amsterdam mensen zijn die na de borrel een hapje willen gaan eten, dan kan dat.&lt;/p&gt;
  17189. &lt;p&gt;Laat hieronder even weten of je er ook bij bent. Da&#39;s handig voor je mede-Fronteers die jou altijd al eens onder het genot van een drankje wilden spreken. Mochten we nu met erg veel zijn dan kunnen we King Arthur vragen om een hoekje voor ons te reserveren.&lt;/p&gt;
  17190. &lt;p&gt;Tot de 18e!&lt;/p&gt;
  17191. </content>
  17192.  </entry>
  17193.  <entry>
  17194.    <title>Webrichtlijn 86 en 87: Formulieren en JavaScript</title>
  17195.    <link href="https://www.fronteers.nl/nl/blog/2009/08/webrichtlijnen-formulieren-en-javascript"/>
  17196.    <updated>2009-08-11T00:00:00Z</updated>
  17197.    <id>https://www.fronteers.nl/nl/blog/2009/08/webrichtlijnen-formulieren-en-javascript</id>
  17198.    <content xml:lang="nl" type="html">&lt;p&gt;Vermijd automatische doorverwijzing bij interactie met formulieren. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/formulieren/navigatie/automatische-doorverwijzing/#r-pd-13-4&quot;&gt;R-pd.13.4&lt;/a&gt;) Gebruik geen client-side script of formulieren als de enige manier om informatie op de site te bereiken. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/formulieren/navigatie/scriptlozen-zoekspiders/#r-pd-13-5&quot;&gt;R-pd.13.5&lt;/a&gt;)&lt;/p&gt;
  17199. &lt;p&gt;Tegen de eerste webrichtlijn van vandaag &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/formulieren/navigatie/automatische-doorverwijzing/#r-pd-13-4&quot;&gt;13.4&lt;/a&gt; wordt vaak gezondigd. Veel websites gebruiken een selectiemenu als navigatie en springen gelijk na het selecteren naar de betreffende pagina. Is het niet zo dat veel bezoekers juist verwachten om vanzelf naar een pagina te worden gebracht na het kiezen uit een dergelijk selectiemenu? Is deze richtlijn daardoor niet verouderd? Zelfs usabilityguru Jakob Nielsen beweert dat regels af en toe veranderen omdat het gebruik van het web niet stilstaat, maar constant evolueert en de gebruikers mee-evolueren. Is het niet juist gebruikersvriendelijk om vanzelf te worden doorgelinkt? Daarnaast is een &amp;quot;Ga&amp;quot;-knop eenvoudig toe te voegen door deze tussen &lt;code&gt;&amp;lt;noscript&amp;gt;&lt;/code&gt;-tags te zetten.&lt;/p&gt;
  17200. &lt;p&gt;De tweede webrichtlijn &lt;a href=&quot;http://www.webrichtlijnen.nl/richtlijnen/#r-pd-13-5&quot;&gt;13.5&lt;/a&gt; is om een website optimaal beschikbaar te maken voor zoekmachines. Zoekmachines ondersteunen in het algemeen geen JavaScript en ze zullen ook geen formulieren versturen. Om alle pagina&#39;s van een website geïndexeerd te krijgen, zullen ze moeten worden opgenomen in lijsten met links, die voor de zoekmachine toegankelijk zijn.&lt;/p&gt;
  17201. &lt;p&gt;Deze praktijk zien we bij de meeste database-gebaseerde websites terugkomen en mag als algemeen bekend worden aangemerkt. Hoe ga jij hiermee om? Maak je lijsten met links speciaal voor zoekmachines of zijn de links dezelfde die gebruikers zien? Zijn er gevallen waarbij je juist niet de informatie via links toegankelijk maakt?&lt;/p&gt;
  17202. </content>
  17203.  </entry>
  17204.  <entry>
  17205.    <title>Bijeenkomst op 7 juli, in Arnhem</title>
  17206.    <link href="https://www.fronteers.nl/nl/blog/2009/06/bijeenkomst-juli"/>
  17207.    <updated>2009-06-23T00:00:00Z</updated>
  17208.    <id>https://www.fronteers.nl/nl/blog/2009/06/bijeenkomst-juli</id>
  17209.    <content xml:lang="nl" type="html">&lt;p&gt;Dinsdag 7 juli zal Fronteers te gast zijn bij de &lt;a href=&quot;http://www.han.nl/&quot;&gt;Hogeschool van Arnhem en Nijmegen&lt;/a&gt; te Arnhem. Deze keer staat de bijeenkomst geheel in het teken van toegankelijkheid.&lt;/p&gt;
  17210. &lt;p&gt;Het programma van 7 juli is als volgt:&lt;/p&gt;
  17211. &lt;ul&gt;
  17212. &lt;li&gt;18.30 uur: Inloop&lt;/li&gt;
  17213. &lt;li&gt;19.30 uur: Bram Duvigneau, over toegankelijkheid in de praktijk&lt;/li&gt;
  17214. &lt;li&gt;20.30 uur: Jeroen Wijering, over usability &amp;amp; accessibility van online video&lt;/li&gt;
  17215. &lt;li&gt;21.30 uur: Netwerken, borrelen, etc.&lt;/li&gt;
  17216. &lt;/ul&gt;
  17217. &lt;h2&gt;Toegankelijkheid in de praktijk, door Bram Duvigneau&lt;/h2&gt;
  17218. &lt;p&gt;Als blinde web-ontwikkelaar is Bram Duvigneau in een unieke positie om webtoegankelijkheid zowel vanuit de theoretische als de praktische kant te kunnen bekijken. Over die theorie is al genoeg gezegd en geschreven, maar wat is de praktijk? Werken alle blinden echt nog in Lynx en zijn ze anti-javascript of valt het allemaal wel mee? Wat kun je doen om je content en prachtige web 2.0 applicaties niet alleen toegankelijk, maar ook makkelijk in het gebruik te maken voor mensen die het web op een andere manier bekijken?&lt;/p&gt;
  17219. &lt;h2&gt;Usability &amp;amp; accessibility van online video, door Jeroen Wijering&lt;/h2&gt;
  17220. &lt;p&gt;Het praatje van &lt;a href=&quot;http://www.longtailvideo.com/&quot;&gt;Jeroen&lt;/a&gt; zal bestaan uit de volgende twee onderdelen:&lt;/p&gt;
  17221. &lt;ol&gt;
  17222. &lt;li&gt;Usability, oftewel gebruiksvriendelijkheid. Dit onderdeel geeft een overzicht van de verschillende soorten plugins, codecs en servers die momenteel en binnenkort beschikbaar zijn om video te embedden en tonen in een website.  Daarbij is er aandacht voor support in verschillende browsers, standaardisatie, problemen op het gebied van bandbreedte / firewalls, ontwikkelingen mbt settopboxes en mobiele telefoons en de tools om e.e.a. op te zetten.&lt;/li&gt;
  17223. &lt;li&gt;Accessibility, oftewel toegankelijkheid. Dit onderdeel zoomt iets meer in op implementatie. Behandeld worden de WCAG regels voor online video, de vormgeving van videoplayers, closed captioning, closed audiodescriptions en het embedden. Aan de orde komen o.a. &amp;quot;best practices&amp;quot; voor video controls, het maken van en de voordelen van closed captions en een audiodescriptie en het zodanig embedden dat een pagina XHTML valid is én alternatieve browsers / systemen ondersteund worden.&lt;/li&gt;
  17224. &lt;/ol&gt;
  17225. &lt;h2&gt;Bereikbaarheid en opgave&lt;/h2&gt;
  17226. &lt;p&gt;De HAN, afdeling Informatica, Media en Communicatie, is gevestigd aan de Ruitenberglaan 26, 6826 CC te Arnhem. Er is een &lt;a href=&quot;http://www1.han.nl/restyle/route/route_new.xml?map=arnhem&amp;amp;code=12&amp;amp;lang=nl&quot;&gt;routebeschrijving&lt;/a&gt; te vinden op de website van de HAN.&lt;/p&gt;
  17227. &lt;p&gt;Zoals gebruikelijk is de bijeenkomst gratis bij te wonen door zowel leden als niet-leden van Fronteers. Het is wel noodzakelijk om je &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning/#formulier-1&quot;&gt;op te geven&lt;/a&gt;, zodat we weten hoeveel mensen er naar de bijeenkomst komen.&lt;/p&gt;
  17228. </content>
  17229.  </entry>
  17230.  <entry>
  17231.    <title>Workshop CSS Positionering</title>
  17232.    <link href="https://www.fronteers.nl/nl/blog/2009/06/workshop-css-positionering"/>
  17233.    <updated>2009-06-22T00:00:00Z</updated>
  17234.    <id>https://www.fronteers.nl/nl/blog/2009/06/workshop-css-positionering</id>
  17235.    <content xml:lang="nl" type="html">&lt;p&gt;Donderdag 27 augustus zal Fronteers, met ondersteuning van &lt;a href=&quot;http://isoc.nl/&quot;&gt;ISOC&lt;/a&gt;, een cursus CSS Positionering geven. Na deze cursus kan de kandidaat een ontwerp (denk aan een .psd bestand) omzetten naar HTML en CSS bestanden, zonder gebruik te maken van tabellen. De cursus is bedoeld voor mensen die met CSS bezig zijn, maar er nog weinig ervaring mee hebben.&lt;/p&gt;
  17236. &lt;p&gt;De cursus zal gegeven worden in de &lt;a href=&quot;http://www.kb.nl/&quot;&gt;Koninklijke Bibliotheek&lt;/a&gt; te Den Haag. Fronteers en &lt;a href=&quot;http://isoc.nl/&quot;&gt;ISOC&lt;/a&gt; leden kunnen de cursus voor 10 euro bijwonen. Niet-leden betalen 35 euro. Beide bedragen zijn exclusief 19 procent btw. Er is slechts plaats voor tien personen, het is dus zaak dat je je tijdig opgeeft. Opgave kan middels het formulier op de pagina &lt;a href=&quot;https://www.fronteers.nl/workshops/css-positionering&quot;&gt;workshops/css-positionering&lt;/a&gt;. Op die pagina is ook meer informatie te vinden over de cursus.&lt;/p&gt;
  17237. &lt;p&gt;Fronteers wil meer cursussen geven dan alleen deze cursus. Heb je behoefte aan een bepaalde cursus op het gebied van front-end ontwikkeling? Laat het dan weten door een reactie achter te laten bij dit weblog bericht.&lt;/p&gt;
  17238. </content>
  17239.  </entry>
  17240.  <entry>
  17241.    <title>Front-end vraagstukken: Best practice voor &#39;superscript&#39;</title>
  17242.    <link href="https://www.fronteers.nl/nl/blog/2009/06/fe-vraag-best-practice-superscript"/>
  17243.    <updated>2009-06-15T00:00:00Z</updated>
  17244.    <id>https://www.fronteers.nl/nl/blog/2009/06/fe-vraag-best-practice-superscript</id>
  17245.    <content xml:lang="nl" type="html">&lt;p&gt;In het kader van front-end vragen uit de vereniging (&lt;a href=&quot;https://www.fronteers.nl/contact&quot;&gt;vragen blijven welkom&lt;/a&gt;) zoekt Jules Ernst advies over best practices inzake subscript en superscript.&lt;/p&gt;
  17246. &lt;p&gt;Webrichtlijn 3.9 &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/tekstopmaak/#superscript-subscript&quot;&gt;schrijft voor&lt;/a&gt; dat superscript en subscript waar mogelijk vermeden moeten worden.&lt;/p&gt;
  17247. &lt;p&gt;Er circuleren diverse oplossing om bijvoorbeeld het copyright-teken in kleine letters zodanig in de hoogte te krijgen dat de regelhoogte hier geen schade van ondervindt.&lt;/p&gt;
  17248. &lt;p&gt;We zijn voor onze wiki op zoek naar een correcte oplossing om bijvoorbeeld de naam van ons programmabureau correct weer te geven. De naam luidt: Overheid heeft Antwoord(c), waarbij (c) het copyright teken moet zijn die als superscript in de lucht hangt.
  17249. De HTML zou er zo uit kunnen zien: &lt;code&gt;&amp;lt;span class=&amp;quot;copyright&amp;quot;&amp;gt;&amp;amp;copy;&amp;lt;/span&amp;gt;&lt;/code&gt;&lt;/p&gt;
  17250. &lt;p&gt;Is dit de manier waarop iedereen dit zou aanpakken, of valt er een alternatieve oplossing te bedenken? Welke CSS zou je gebruiken? (En mocht je je geheugen willen verfrissen over deze specifieke webrichtlijn, &lt;a href=&quot;https://www.fronteers.nl/blog/2008/04/webrichtlijnen-definities-wijzigingen&quot;&gt;zie de discussie bij de weblog post hierover&lt;/a&gt;.)&lt;/p&gt;
  17251. </content>
  17252.  </entry>
  17253.  <entry>
  17254.    <title>Fronteers organiseert seminar tijdens Kings of Code</title>
  17255.    <link href="https://www.fronteers.nl/nl/blog/2009/06/seminar-kings-of-code"/>
  17256.    <updated>2009-06-10T00:00:00Z</updated>
  17257.    <id>https://www.fronteers.nl/nl/blog/2009/06/seminar-kings-of-code</id>
  17258.    <content xml:lang="nl" type="html">&lt;p&gt;Op dinsdag 30 juni vindt de tweede editie van &lt;a href=&quot;http://kingsofcode.nl/&quot;&gt;Kings of Code&lt;/a&gt; plaats, een conferentie over de laatste ontwikkelingen en best practices op het gebied van web development. Net als vorig jaar is Fronteers een community partner, maar dit jaar organiseren we tijdens de &lt;a href=&quot;http://www.kingsofcode.nl/pages/side-events&quot;&gt;side events&lt;/a&gt; op 29 juni een front-end seminar met drie interessante sprekers. Lees verder om te zien hoe Fronteers leden korting kunnen krijgen.&lt;/p&gt;
  17259. &lt;p&gt;&lt;img src=&quot;https://fronteers.nl/_img/2009/06/kings-of-code.png&quot; alt=&quot;Kings of Code&quot; /&gt;&lt;/p&gt;
  17260. &lt;p&gt;Bekende developers komen spreken en delen hun visie en knowhow over web development. Zo zullen Thomas Fuchs (Script.aculo.us) en Amy Hoy (Slash7) een presentatie geven over JavaScript Performance en zal Steven Pemberton (hoofd van de W3C XHTML2 Working Group) zijn visie delen over de toekomst van code. Andere onderwerpen die aan bod komen zijn o.a. SEO, CouchDB, User Experience en de filosofie achter Ruby on Rails.&lt;/p&gt;
  17261. &lt;p&gt;Op het &lt;a href=&quot;http://www.kingsofcode.nl/pages/side-events#sideevent_fronteers&quot;&gt;seminar van Fronteers&lt;/a&gt;, op 29 juni &#39;s ochtends, zullen drie Fronteers leden komen spreken over hun specialiteit:&lt;/p&gt;
  17262. &lt;ul&gt;
  17263. &lt;li&gt;Edwin Martin geeft een presentatie over Advanced jQuery Techniques&lt;/li&gt;
  17264. &lt;li&gt;Nikolai Onken zal spreken over Dojo for mobile widgets&lt;/li&gt;
  17265. &lt;li&gt;Marcel Beumer komt vertellen over wat je allemaal met &lt;code&gt;&amp;lt;canvas&amp;gt;&lt;/code&gt; kan&lt;/li&gt;
  17266. &lt;/ul&gt;
  17267. &lt;p&gt;Alle drie de sprekers zullen niet bang zijn om code te laten zien, en lekker hands-on bezig te zijn met hun materie. Dit seminar is toegankelijk voor alle mensen die naar Kings of Code gaan.&lt;/p&gt;
  17268. &lt;p&gt;Voor geïnteresseerden, Fronteers leden betalen € 175,- (i.p.v. € 195,-) voor Kings of Code bij het gebruik van de volgende promocode: &lt;a href=&quot;http://kingsofcode.paydro.net/&quot;&gt;fronteers&lt;/a&gt;.&lt;/p&gt;
  17269. </content>
  17270.  </entry>
  17271.  <entry>
  17272.    <title>UX Book Club voorafgaand aan Fronteers bijeenkomst</title>
  17273.    <link href="https://www.fronteers.nl/nl/blog/2009/06/ux-book-club"/>
  17274.    <updated>2009-06-09T00:00:00Z</updated>
  17275.    <id>https://www.fronteers.nl/nl/blog/2009/06/ux-book-club</id>
  17276.    <content xml:lang="nl" type="html">&lt;p&gt;Voorafgaand aan de &lt;a href=&quot;https://www.fronteers.nl/blog/2009/05/bijeenkomst-juni&quot;&gt;Fronteers bijeenkomst van 11 juni&lt;/a&gt; komen geïnteresseerden van &lt;em&gt;UX Book Club Groningen&lt;/em&gt; bij elkaar. In augustus zal hun eerste officiële eigen bijeenkomst plaatsvinden. Het is de bedoeling dat tijdens bijeenkomsten boeken m.b.t. User Experience worden besproken en kennis met elkaar wordt gedeeld. Inmiddels hebben 11 designers, managers, studenten en docenten zich aangemeld.&lt;/p&gt;
  17277. &lt;p&gt;Ben jij ook geïnteresseerd en lijkt het je leuk om je kennis te delen en van anderen te leren? Meld je even aan op &lt;a href=&quot;http://uxbookclub.org/doku.php?id=groningen&quot;&gt;http://uxbookclub.org/doku.php?id=groningen&lt;/a&gt;, bij henkwijnholds [at] gmail.com of zorg dat je 11 Juni 2009 om 18:45u aanwezig bent op de Fronteers meeting. Neem dan je agenda en eventueel je favoriete UX boek mee!&lt;/p&gt;
  17278. </content>
  17279.  </entry>
  17280.  <entry>
  17281.    <title>Update Fronteers 2009</title>
  17282.    <link href="https://www.fronteers.nl/nl/blog/2009/06/update-congres"/>
  17283.    <updated>2009-06-05T00:00:00Z</updated>
  17284.    <id>https://www.fronteers.nl/nl/blog/2009/06/update-congres</id>
  17285.    <content xml:lang="nl" type="html">&lt;p&gt;Zoals we al eerder aangekondigd hebben, wordt op donderdag 5 en vrijdag 6 november aanstaande het &lt;a href=&quot;https://www.fronteers.nl/congres/2009&quot;&gt;Fronteers 2009 congres&lt;/a&gt; gehouden in Felix Meritis in Amsterdam. Naast Nate Koechley en Steve Souders zullen ook &lt;em&gt;&lt;a href=&quot;http://ejohn.org/about/&quot;&gt;John Resig&lt;/a&gt;&lt;/em&gt; van jQuery en &lt;em&gt;&lt;a href=&quot;http://www.stubbornella.org/content/nicole-sullivan/&quot;&gt;Nicole Sullivan&lt;/a&gt;&lt;/em&gt; acte de presence geven om over JavaScript libraries respectievelijk Object Oriented CSS te praten. In totaal kan je 12 sprekers van wereldklasse verwachten; de overige acht sprekers zullen later aangekondigd worden.&lt;/p&gt;
  17286. &lt;p&gt;Het congres wordt gesponsord door Vodafone; we zijn in onderhandeling met andere sponsors.&lt;/p&gt;
  17287. &lt;p&gt;De &lt;a href=&quot;https://www.fronteers.nl/congres/2009/tickets&quot;&gt;kaartverkoop&lt;/a&gt; is vandaag van start gegaan. Een van de meest gehoorde kritiekpunten vorig jaar was dat het onmogelijk was om een kaart voor 1 dag te kopen. Derhalve bieden we dit jaar wel eendagskaarten aan, naast de gebruikelijke kaarten voor beide dagen. Overigens is het exacte programma nog niet vastgesteld en kunnen we dus nog niet met zekerheid zeggen welke spreker op welke dag wordt ingepland.&lt;/p&gt;
  17288. &lt;p&gt;Op dit moment geldt er een early-bird korting, die op vrijdag 10 juli afloopt. Deze korting is reeds verwerkt in de kaartprijs.&lt;/p&gt;
  17289. &lt;p&gt;Naast deze korting krijgen &lt;em&gt;leden van Fronteers&lt;/em&gt; nog een &lt;em&gt;extra forse korting&lt;/em&gt; op de kaartprijs. Deze korting is niet verwerkt in de kaartprijs. &lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;Alle leden&lt;/a&gt; hebben vandaag een e-mail met uitleg hierover ontvangen. Mocht je als lid geen mailtje hebben gehad, neem dan even &lt;a href=&quot;https://www.fronteers.nl/contact&quot;&gt;contact&lt;/a&gt; met ons op.&lt;/p&gt;
  17290. &lt;p&gt;Ook Nederlandse studenten komen in aanmerking voor dezelfde korting. Neem hiervoor even &lt;a href=&quot;https://www.fronteers.nl/contact&quot;&gt;contact&lt;/a&gt; met ons op.&lt;/p&gt;
  17291. &lt;p&gt;Net zoals vorig jaar zitten lichte verfrissingen en een (warme) lunch op de dag(en) die je gekozen hebt bij de toegangsprijs inbegrepen. Daarnaast hebben alle bezoekers, dus ook degenen die uitsluitend een kaart voor vrijdag kopen, toegang tot de borrel op donderdagavond.&lt;/p&gt;
  17292. &lt;h2&gt;Alle informatie over Fronteers 2009 op een rijtje:&lt;/h2&gt;
  17293. &lt;ul&gt;
  17294. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/congres/2009&quot;&gt;Algemene informatie&lt;/a&gt;&lt;/li&gt;
  17295. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/congres/2009/venue&quot;&gt;Locatie&lt;/a&gt;&lt;/li&gt;
  17296. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/congres/2009/speakers&quot;&gt;Sprekers&lt;/a&gt;&lt;/li&gt;
  17297. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/congres/2009/tickets&quot;&gt;Tickets&lt;/a&gt;&lt;/li&gt;
  17298. &lt;/ul&gt;
  17299. &lt;p&gt;Op de volgende manieren kun je op de hoogte blijven van alle vorderingen rondom Fronteers 2009:&lt;/p&gt;
  17300. &lt;ul&gt;
  17301. &lt;li&gt;&lt;a href=&quot;http://feeds.feedburner.com/FronteersCongres&quot;&gt;RSS feed&lt;/a&gt;&lt;/li&gt;
  17302. &lt;li&gt;&lt;a href=&quot;https://www.fronteers.nl/congres#per-mail&quot;&gt;E-mail&lt;/a&gt;&lt;/li&gt;
  17303. &lt;li&gt;&lt;a href=&quot;https://twitter.com/fronteers09&quot;&gt;Twitter (@fronteers09)&lt;/a&gt;&lt;/li&gt;
  17304. &lt;/ul&gt;
  17305. &lt;p&gt;We hopen je op 5 en 6 november te mogen begroeten op Fronteers 2009. Wij hebben er in ieder geval al zin in!&lt;/p&gt;
  17306. </content>
  17307.  </entry>
  17308.  <entry>
  17309.    <title>Verslag Docentendag</title>
  17310.    <link href="https://www.fronteers.nl/nl/blog/2009/05/verslag-docentendag"/>
  17311.    <updated>2009-05-19T00:00:00Z</updated>
  17312.    <id>https://www.fronteers.nl/nl/blog/2009/05/verslag-docentendag</id>
  17313.    <content xml:lang="nl" type="html">&lt;p&gt;Een uitverkochte studiedag, wat wil je als organisatie nog meer? De voortekenen waren goed. De scholen reageerden enthousiast en na enige dagen druppelden de eerste aanmeldingen binnen.&lt;/p&gt;
  17314. &lt;p&gt;De opkomst op 7 mei was goed, van de 24 aanmeldingen kwamen 20 mensen naar Mirabeau te Amsterdam waar zij met koffie en koek werden onthaald. De dag begon met een iets gewijzigd programma; Raph kon namens het ICTU niet aanwezig zijn. Stephen nam zijn taken waar met als resultaat een geïmproviseerde lezing over Webrichtlijnen die goed werd ontvangen.&lt;/p&gt;
  17315. &lt;p&gt;Sander Leer sprak over de inrichting van het &lt;a href=&quot;http://sceneone.nl/frontend-in-het-ICA-curriculum.pdf&quot;&gt;curriculum van de HAN&lt;/a&gt; (Hogeschool Arnhem en Nijmegen). De vraag waar en hoe webdevelopment in het curriculum past kwam voortdurend terug. Zijn lezing ging over in een discussie over curriculuminrichting die zich tijdens de lunch in gematigde vorm voortzette.&lt;/p&gt;
  17316. &lt;p&gt;Na de lunch mocht Stephen voor de tweede keer het podium bestijgen.
  17317. Ook voor hem een unicum, twee keer spreken op één studiedag. Hij vertelde over &lt;a href=&quot;http://www.the-haystack.com/playground/presentations/fronteers-docentendag-2009/&quot;&gt;CSS3 en de pijn van layouting&lt;/a&gt;. CSS3 brengt ons, ergens ver in de toekomst, manieren om heel eenvoudig een mooie layout neer te zetten. Andere features, vooral op het gebied van het vormgeven van tekst, zijn gelukkig al eerder te gebruiken.&lt;/p&gt;
  17318. &lt;p&gt;Peter-Paul Koch mocht als spreker &lt;a href=&quot;http://quirksmode.org/presentations/docentendag/docentendag.pdf&quot;&gt;de dag besluiten&lt;/a&gt; met zijn visie op Fronteers, het web-onderwijs in Nederland en de rol van curricula daarin. Hij wil vooral de dialoog met de onderwijswereld aangaan, kijken waar een organisatie als Fronteers kan helpen met het vakgebied opstellen voor het onderwijs. Zijn vraag aan docenten was dan ook of de online curricula nuttig lesmateriaal waren, en wat eraan verbeterd kan worden.&lt;/p&gt;
  17319. &lt;p&gt;Door de stortvloed aan informatie is besloten de rondleiding door Mirabeau te laten vervallen. De borrel vond uiteraard wel doorgang, de dag werd in stijl afgerond.&lt;/p&gt;
  17320. &lt;p&gt;Na afloop van de docentendag hebben drie docenten zich aangemeld voor deelname aan de commissie onderwijs! Dit zijn Sander Leer (HAN), Mio van der Lijn (Hogeschool Rotterdam) en Yvonne Pouw (Grafisch Lyceum Rotterdam). Wij hopen met hen een leuke en waardevolle samenwerking tegemoet te gaan.&lt;/p&gt;
  17321. </content>
  17322.  </entry>
  17323.  <entry>
  17324.    <title>Webrichtlijn 84 en 85: Volgorde en groeperen van invoervelden</title>
  17325.    <link href="https://www.fronteers.nl/nl/blog/2009/05/webrichtlijnen-tabindex-fieldset"/>
  17326.    <updated>2009-05-12T00:00:00Z</updated>
  17327.    <id>https://www.fronteers.nl/nl/blog/2009/05/webrichtlijnen-tabindex-fieldset</id>
  17328.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik het tabindex attribuut om van de standaard tab-volgorde op formuliervelden af te wijken wanneer deze volgorde niet toereikend is voor correct gebruik van het formulier door toetsenbordgebruikers. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/formulieren/toegankelijkheid/toetsenbord-navigatie/#r-pd-13-2&quot;&gt;R-pd.13.2&lt;/a&gt;) Breng groepering van invoervelden aan door middel van het fieldset element. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/formulieren/toegankelijkheid/invoervelden-groeperen/#r-pd-13-3&quot;&gt;R-pd.13.3&lt;/a&gt;)&lt;/p&gt;
  17329. &lt;p&gt;Zoals de Webrichtlijnen al melden: &amp;quot;Gebruik het tabindex attribuut zo min mogelijk: de volgorde van de invoervelden in de HTML broncode bepaalt de standaard tabvolgorde. Deze is meestal toereikend.&amp;quot; Het voorbeeld in &lt;a href=&quot;https://www.fronteers.nl/blog/2008/09/webrichtlijnen-tabben&quot;&gt;Webrichtlijn 52 &amp;amp; 53: Tabben tussen links&lt;/a&gt; is misschien een uitzondering; zie ook de discussie bij die post. Is hierin ondertussen nog iets veranderd? Is &lt;code&gt;tabindex&lt;/code&gt; niet alleen nog maar relevant voor webapplicaties die last hebben van divitis en &lt;a href=&quot;http://www.w3.org/TR/wai-aria-practices/#keyboard&quot; title=&quot;WAI-ARIA Best Practices - Keyboard and Structural Navigation&quot;&gt;&amp;quot;toegankelijk&amp;quot; gemaakt moeten worden&lt;/a&gt;?&lt;/p&gt;
  17330. &lt;p&gt;Interessanter is het groeperen van invoerelementen door middel van het &lt;code&gt;fieldset&lt;/code&gt; element en het eventueel labelen van zo&#39;n groep met het &lt;code&gt;legend&lt;/code&gt; element.&lt;/p&gt;
  17331. &lt;p&gt;Hoe vaak gebruik jij het &lt;code&gt;fieldset&lt;/code&gt; element? Gebruik je dit bij ieder formulier, of alleen als een formulier aan bepaalde eisen voldoet? En doe je ook wel eens aan geneste &lt;code&gt;fieldset&lt;/code&gt;s, zoals &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;hier op de site&lt;/a&gt;, of is dat juist overkill?&lt;/p&gt;
  17332. &lt;p&gt;Aangezien de Webrichtlijnen het niet als richtlijn opnemen en het valide is bij gebruik van een strict doctype (en conforming als je HTML 5 gebruikt): wanneer gebruik jij &lt;em&gt;wel&lt;/em&gt; een &lt;code&gt;fieldset&lt;/code&gt;, maar &lt;em&gt;geen&lt;/em&gt; &lt;code&gt;legend&lt;/code&gt;?&lt;/p&gt;
  17333. &lt;p&gt;En omdat het stijlen van de &lt;code&gt;legend&lt;/code&gt; soms &amp;quot;erg lastig&amp;quot; is, bieden de Webrichtlijnen je een alternatief: het gebruik van een &lt;em&gt;heading&lt;/em&gt; in plaats van een &lt;em&gt;&lt;code&gt;legend&lt;/code&gt;&lt;/em&gt;. Wat vind jij hiervan? Gebruik jij liever &lt;code&gt;legend&lt;/code&gt;s of &lt;code&gt;h1&lt;/code&gt;–&lt;code&gt;h6&lt;/code&gt;? Tegen welke problemen loop jij aan? Zijn er niet genoeg tutorials die laten zien dat het wel kan, zoals &lt;a href=&quot;http://www.sitepoint.com/article/fancy-form-design-css/&quot;&gt;Fancy Form Design Using CSS&lt;/a&gt; dat doet?&lt;/p&gt;
  17334. </content>
  17335.  </entry>
  17336.  <entry>
  17337.    <title>Herinnering bijeenkomst 8 mei</title>
  17338.    <link href="https://www.fronteers.nl/nl/blog/2009/05/herinnering-bijeenkomst-mei"/>
  17339.    <updated>2009-05-04T00:00:00Z</updated>
  17340.    <id>https://www.fronteers.nl/nl/blog/2009/05/herinnering-bijeenkomst-mei</id>
  17341.    <content xml:lang="nl" type="html">&lt;p&gt;Voor iedereen die het gemist heeft en/of nog twijfelt: komende vrijdag zijn we te gast bij Mirabeau in Eindhoven. Op het programma staan een presentatie over CSS frameworks (zowel client-side als server-side) door &lt;a href=&quot;http://kilianvalkhof.com/&quot;&gt;Kilian Valkhof&lt;/a&gt; en eentje over WAI-ARIA door &lt;a href=&quot;http://arjaneising.nl/&quot;&gt;Arjan Eising&lt;/a&gt;.&lt;/p&gt;
  17342. &lt;p&gt;Alle informatie is te vinden in &lt;a href=&quot;https://www.fronteers.nl/blog/2009/04/bijeenkomst-mei&quot; title=&quot;Bijeenkomst op 8 mei, in Eindhoven&quot;&gt;de aankondigingspost&lt;/a&gt;.&lt;/p&gt;
  17343. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;Aanmelden&lt;/a&gt; kan via de site.&lt;/p&gt;
  17344. &lt;p&gt;Tot vrijdag! :)&lt;/p&gt;
  17345. </content>
  17346.  </entry>
  17347.  <entry>
  17348.    <title>Bijeenkomst op 8 mei, in Eindhoven</title>
  17349.    <link href="https://www.fronteers.nl/nl/blog/2009/04/bijeenkomst-mei"/>
  17350.    <updated>2009-04-15T00:00:00Z</updated>
  17351.    <id>https://www.fronteers.nl/nl/blog/2009/04/bijeenkomst-mei</id>
  17352.    <content xml:lang="nl" type="html">&lt;p&gt;Vrijdag 8 mei zijn we te gast bij &lt;a href=&quot;http://www.mirabeau.nl/&quot;&gt;Mirabeau&lt;/a&gt; in Eindhoven. Een druk maandje voor ze, aangezien ze de &lt;a href=&quot;https://www.fronteers.nl/blog/2009/04/docentendag&quot;&gt;Docentendag&lt;/a&gt; de dag ervoor in Amsterdam ook al hosten.&lt;/p&gt;
  17353. &lt;p&gt;Het programma voor 8 mei is als volgt:&lt;/p&gt;
  17354. &lt;ul&gt;
  17355. &lt;li&gt;18.30 uur: Inloop&lt;/li&gt;
  17356. &lt;li&gt;19.15 uur: Vasilis van Gemert, over Mirabeau&lt;/li&gt;
  17357. &lt;li&gt;19.30 uur: &lt;a href=&quot;http://kilianvalkhof.com/&quot;&gt;Kilian Valkhof&lt;/a&gt;, over CSS frameworks (zowel client-side als server-side)&lt;/li&gt;
  17358. &lt;li&gt;20.30 uur: &lt;a href=&quot;http://arjaneising.nl/&quot;&gt;Arjan Eising&lt;/a&gt;, over &lt;a href=&quot;http://www.w3.org/WAI/intro/aria&quot;&gt;WAI-ARIA&lt;/a&gt;&lt;/li&gt;
  17359. &lt;li&gt;21.30 uur: Netwerken, borrelen, etc.&lt;/li&gt;
  17360. &lt;/ul&gt;
  17361. &lt;p&gt;&lt;a href=&quot;http://www.mirabeau.nl/contact-eindhoven.asp&quot;&gt;Mirabeau Eindhoven&lt;/a&gt; is gevestigd in de Admirant toren te Eindhoven. De Admirant toren is uitstekend bereikbaar met de trein en ligt aan de centrum kant van het centraal station (loopafstand ongeveer 5 minuten):&lt;/p&gt;
  17362. &lt;p&gt;Emmasingel 29-31
  17363. 5611 AZ Eindhoven
  17364. &lt;a href=&quot;http://www.mirabeau.nl/contact-eindhoven-auto.asp&quot;&gt;Routebeschrijving met auto&lt;/a&gt;
  17365. &lt;a href=&quot;http://www.mirabeau.nl/contact-eindhoven-ov.asp&quot;&gt;Routebeschrijving met OV&lt;/a&gt;&lt;/p&gt;
  17366. &lt;p&gt;Zoals gebruikelijk is deze bijeenkomst gratis toegankelijk voor leden en niet-leden, maar dien je je wel even &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;aan te melden&lt;/a&gt;.&lt;/p&gt;
  17367. &lt;p&gt;Op donderdag 11 juni gaan we trouwens weer op bezoek in Groningen, maar daarover later meer. Zet de datum in ieder geval alvast in je agenda.&lt;/p&gt;
  17368. &lt;p&gt;Tot de 8e!&lt;/p&gt;
  17369. </content>
  17370.  </entry>
  17371.  <entry>
  17372.    <title>Fronteers Vragenuurtje</title>
  17373.    <link href="https://www.fronteers.nl/nl/blog/2009/04/vragenuurtje"/>
  17374.    <updated>2009-04-13T00:00:00Z</updated>
  17375.    <id>https://www.fronteers.nl/nl/blog/2009/04/vragenuurtje</id>
  17376.    <content xml:lang="nl" type="html">&lt;p&gt;Hoewel we als vereniging op meerdere manieren open staan voor vragen en discussie (&lt;a href=&quot;https://www.fronteers.nl/blog/2008/03/fronteers-op-irc&quot;&gt;irc&lt;/a&gt;, &lt;a href=&quot;https://www.fronteers.nl/contact&quot;&gt;contact&lt;/a&gt;, &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur&quot;&gt;bestuur&lt;/a&gt;, &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies&quot;&gt;alle commissies&lt;/a&gt;, &lt;a href=&quot;https://www.fronteers.nl/blog&quot;&gt;het weblog&lt;/a&gt;), bestaat bij ons toch nog steeds het vermoeden dat de drempel om via deze methoden zomaar wat vragen te uiten te hoog ligt, en dat vragen, onduidelijkheden en discussiepunten bij (potentiële) leden ons vaak niet bereiken.&lt;/p&gt;
  17377. &lt;p&gt;Dit vinden we een probleem, en daarom willen we nu een keertje expliciet (middels deze weblog post) iedereen aanmoedigen om vragen te stellen over de vereniging en onze bezigheden, danwel aan het bestuur, danwel aan de verschillende commissies, danwel aan andere leden.&lt;/p&gt;
  17378. &lt;p&gt;Hoewel het bestuur en de commissievoorzitters zullen meelezen en vragen zullen beantwoorden, willen we tevens expliciet alle (actieve) leden aansporen om ook de hier gestelde vragen te beantwoorden, en jullie mening over discussiepunten te laten horen. Waar de vereniging mee bezig is wordt niet door hogerhand opgelegd, maar komt juist volledig voort uit wat &lt;em&gt;jullie&lt;/em&gt; (c.q. wij) doen. Dus, brand maar los!&lt;/p&gt;
  17379. </content>
  17380.  </entry>
  17381.  <entry>
  17382.    <title>Status update Commissie Diplomering</title>
  17383.    <link href="https://www.fronteers.nl/nl/blog/2009/04/status-update-commissie-diplomering"/>
  17384.    <updated>2009-04-09T00:00:00Z</updated>
  17385.    <id>https://www.fronteers.nl/nl/blog/2009/04/status-update-commissie-diplomering</id>
  17386.    <content xml:lang="nl" type="html">&lt;p&gt;Na een periode van radiostilte hieronder vanuit de Commissie Diplomering een status update.&lt;/p&gt;
  17387. &lt;p&gt;Het eerste jaar van de commissie was productief. We hebben een opzet gemaakt voor de examens, eerst theorie en daarna praktijk. Er zijn bijna 200 theorievragen opgesteld en er heeft een proefexamen plaatsgevonden. Allemaal goede zaken die er voor zorgden dat ik bij de algemene ledenvergadering dan ook positief meldde dat we in dit tempo door zouden blijven gaan.&lt;/p&gt;
  17388. &lt;p&gt;In de praktijk ging het echter anders, dagelijkse werkzaamheden namen meer tijd in beslag dan verwacht. Dit had tot gevolg dat de voltallige commissie, exclusief de voorzitter (ikzelf dus), liet weten niet meer beschikbaar te zijn.&lt;/p&gt;
  17389. &lt;p&gt;Op dit moment zijn we bezig met het invoeren van de vragen, zodat we ze kunnen testen. Voor de andere werkzaamheden, zoals het opzetten van verdere proefexamens en het opstellen van meer vragen, vraag ik bij deze vrijwilligers.&lt;/p&gt;
  17390. &lt;p&gt;Dus mocht je willen bijdragen aan de commissie, neem dan contact op met de commissie, met &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/diplomering#formulier-1&quot;&gt;dit formulier&lt;/a&gt; of via &lt;a href=&quot;http://www.twitter.com/wnas&quot;&gt;twitter&lt;/a&gt;.&lt;/p&gt;
  17391. </content>
  17392.  </entry>
  17393.  <entry>
  17394.    <title>Fronteers Docentendag</title>
  17395.    <link href="https://www.fronteers.nl/nl/blog/2009/04/docentendag"/>
  17396.    <updated>2009-04-06T00:00:00Z</updated>
  17397.    <id>https://www.fronteers.nl/nl/blog/2009/04/docentendag</id>
  17398.    <content xml:lang="nl" type="html">&lt;p&gt;Donderdag 7 mei zal de Fronteers Onderwijs Commissie samen met &lt;a href=&quot;http://mirabeau.nl/&quot;&gt;Mirabeau&lt;/a&gt; een informele studiedag organiseren voor docenten front-end development. Er zijn lezingen—door sprekers uit het vakgebied—over onder andere de &lt;a href=&quot;http://webrichtlijnen.nl/&quot;&gt;webrichtlijnen&lt;/a&gt;, &lt;a href=&quot;http://www.w3.org/TR/css3-roadmap/&quot;&gt;CSS3&lt;/a&gt; en &lt;a href=&quot;http://www.opera.com/company/education/curriculum&quot;&gt;Opera&#39;s Web Standards Curriculum&lt;/a&gt;. Diverse Nederlandse opleidingen zijn hiervoor ondertussen schriftelijk uitgenodigd.&lt;/p&gt;
  17399. &lt;p&gt;De dag vangt aan om half elf. Tijdens het middaguur wordt een lunch verzorgd. Aan het einde van de dag kan met collega docenten geborreld worden. Tussendoor wordt naast de lezingen ook een rondleiding gegeven. Meer informatie, zoals adresgegevens en het programma, staat op &lt;a href=&quot;https://www.fronteers.nl/docentendag&quot;&gt;fronteers.nl/docentendag&lt;/a&gt;.&lt;/p&gt;
  17400. &lt;p&gt;Ben je een docent front-end en/of gerelateerde technieken? Aanmelden kan gratis door het &lt;a href=&quot;https://www.fronteers.nl/docentendag#formulier-1&quot;&gt;aanmeldformulier&lt;/a&gt; in te vullen. Mocht je geen docent zijn, maar er wel een kennen, schroom dan niet hem of haar te verwijzen naar de &lt;a href=&quot;https://www.fronteers.nl/docentendag&quot;&gt;Docentendag pagina&lt;/a&gt;.&lt;/p&gt;
  17401. </content>
  17402.  </entry>
  17403.  <entry>
  17404.    <title>Front-end vraagstukken: Gebruik van javascript libraries</title>
  17405.    <link href="https://www.fronteers.nl/nl/blog/2009/03/fe-vraag-gebruik-javascript-libraries"/>
  17406.    <updated>2009-03-27T00:00:00Z</updated>
  17407.    <id>https://www.fronteers.nl/nl/blog/2009/03/fe-vraag-gebruik-javascript-libraries</id>
  17408.    <content xml:lang="nl" type="html">&lt;p&gt;In het kader van front-end vragen uit de vereniging (&lt;a href=&quot;https://www.fronteers.nl/contact&quot;&gt;vragen blijven welkom&lt;/a&gt;) stelt Jeroen Mulder een aantal gerelateerde vragen over het grootschalig gebruik van javascript libraries:&lt;/p&gt;
  17409. &lt;p&gt;Unobtrusive Javascript is voor de meeste front-end ontwikkelaars een normale zaak geworden. Libraries als jQuery, Dojo en Prototype maken het met functionaliteiten als CSS selectors en event binding nog makkelijker om snel en unobtrusive functionaliteiten in een bestaand document te verwerken.&lt;/p&gt;
  17410. &lt;p&gt;In een website waar op steeds meer plaatsen functionaliteiten in Javascript worden ontwikkeld, hoe zorg je er voor dat een middel tot groot developmentteam dit op een wijze doet die de onderhoudbaarheid en front-end performance niet verslechteren?&lt;/p&gt;
  17411. &lt;p&gt;Specifiek voor degenen die uitgebreide ervaring hebben met het gebruik van een Javascript library: hoeveel werk doe je nog naast het gebruik van de library om de code herbruikbaar en onderhoudbaar te houden?&lt;/p&gt;
  17412. &lt;p&gt;Ik denk dan met name aan de volgende drie vraagstukken:&lt;/p&gt;
  17413. &lt;ol&gt;
  17414. &lt;li&gt;
  17415. &lt;p&gt;Hoe weet een ontwikkelaar of bepaalde Javascript nog wel wordt gebruikt? En zo ja, op welke pagina&#39;s? Het gebruik van CSS selectors in Javascript maakt het net als in CSS zelf niet makkelijk om te zien hoe en waar welke code van toepassing is.&lt;/p&gt;
  17416. &lt;/li&gt;
  17417. &lt;li&gt;
  17418. &lt;p&gt;Hoe debugged een ontwikkelaar een document waarbij de Javascript functionaliteit op een unobtrusive manier wordt toegewezen? Als verschillende stukken code invloed hebben op de interactie van een element, hoe weet een ontwikkelaar waar hij of zij moet zoeken voor de verantwoordelijke code?&lt;/p&gt;
  17419. &lt;/li&gt;
  17420. &lt;li&gt;
  17421. &lt;p&gt;Hoe organiseer je het beste vele kleine Javascript functionaliteiten verspreid over een grote website? Kies je voor een aanpak waarbij je de functionaliteit als plugin inpakt welke volledig autonoom kan werken? Of kies je voor een aanpak waarbij de functionaliteit gevoed moet worden met een stel elementen en instellingen, welke vervolgens zichzelf registreert bij de onDOMReady handler?&lt;/p&gt;
  17422. &lt;/li&gt;
  17423. &lt;/ol&gt;
  17424. </content>
  17425.  </entry>
  17426.  <entry>
  17427.    <title>Front-end vraagstukken: Communicatie over Webrichtlijnen</title>
  17428.    <link href="https://www.fronteers.nl/nl/blog/2009/03/fe-vraag-communicatie-webrichtlijnen"/>
  17429.    <updated>2009-03-18T00:00:00Z</updated>
  17430.    <id>https://www.fronteers.nl/nl/blog/2009/03/fe-vraag-communicatie-webrichtlijnen</id>
  17431.    <content xml:lang="nl" type="html">&lt;p&gt;De commissie online community is bezig een forum voor Fronteers op te zetten. Omdat dit alles niet zo snel gaat als we graag zouden willen, en we toch af en toe vragen langs zien komen waarbij we het idee hebben van &amp;quot;&lt;em&gt;dat&lt;/em&gt; zou perfect op het forum gevraagd kunnen worden,&amp;quot; willen we tot de tijd dat het forum live gaat het weblog gebruiken om leden toch in staat te stellen in één keer een breed publiek te bereiken met hun front-end vragen. Mocht je zelf een front-end vraag uit de praktijk hebben waar je graag input vanuit de hele vereniging over zou hebben—algemeen, om een brede discussie over een onderwerp los te maken, danwel specialistisch, waarbij je zoekt naar iemand die ervaring heeft met het preciese onderwerp waar je meer over wil weten—&lt;a href=&quot;https://www.fronteers.nl/contact&quot;&gt;stuur hem dan in&lt;/a&gt;. We zullen regelmatig één van de ingezonden vragen uitkiezen om op het weblog te plaatsen.&lt;/p&gt;
  17432. &lt;p&gt;Mike van Hoenselaar trapt af met de eerste vraag:&lt;/p&gt;
  17433. &lt;p&gt;De Webrichtlijnen zijn steeds vaker orde van de dag. Ook voor mij, ondanks dat ik geen websites ontwikkel voor overheden. Ik ben constant bezig om deze toe te passen. Toch loop ik tegen enkele dingen aan die ik graag beantwoord zou willen zien. Hoe kun je als front-end ontwikkelaar het beste intern de Webrichtlijnen communiceren, ook als je bedrijf geen overheidssites maakt en dus niet &amp;quot;verplicht&amp;quot; wordt om ze te gebruiken? Zowel naar je collega’s als naar je baas/management? Hoe hebben andere Fronteers dit intern geregeld?&lt;/p&gt;
  17434. </content>
  17435.  </entry>
  17436.  <entry>
  17437.    <title>Notulen bestuursvergadering 16 maart 2009</title>
  17438.    <link href="https://www.fronteers.nl/nl/blog/2016/12/16-03-2009"/>
  17439.    <updated>2009-03-16T00:00:00Z</updated>
  17440.    <id>https://www.fronteers.nl/nl/blog/2016/12/16-03-2009</id>
  17441.    <content xml:lang="nl" type="html">&lt;p&gt;Notulen bestuursvergadering Fronteers, 16 maart 2009 gehouden bij Info.nl in Amsterdam. Aanwezig: Arjan Eising, Krijn Hoetmer, Peter-Paul Koch, Sander van Lambalgen, Tom Greuter en Wybe Weysters (bij het agenda-onderdeel over de Commissie Onderwijs).&lt;/p&gt;
  17442. &lt;h2&gt;Commissie Onderwijs&lt;/h2&gt;
  17443. &lt;p&gt;Robert Jan Verkade heeft zijn functie als commissievoorzitter neergelegd. Wybe Weysters neemt voorlopig tot aan de volgende ALV het stokje van hem over en licht de stand van zaken in de commissie toe aan het bestuur.&lt;/p&gt;
  17444. &lt;p&gt;7 mei a.s. organiseert de Commissie Onderwijs de &lt;a href=&quot;https://www.fronteers.nl/docentendag&quot;&gt;Docentendag&lt;/a&gt;. Primair doel is om docenten op het front-end vlak kennis te laten maken met Fronteers en vice versa. Op de agenda van de docentendag staan ondermeer:&lt;/p&gt;
  17445. &lt;ul&gt;
  17446. &lt;li&gt;
  17447. &lt;p&gt;Het &lt;a href=&quot;http://www.opera.com/company/education/curriculum/&quot;&gt;webstandaardencurriculum&lt;/a&gt; van Opera.&lt;/p&gt;
  17448. &lt;/li&gt;
  17449. &lt;li&gt;
  17450. &lt;p&gt;Een rondleiding door een internetbedrijf (inz. Mirabeau Amsterdam, waar de docentendag plaatsvindt).&lt;/p&gt;
  17451. &lt;/li&gt;
  17452. &lt;li&gt;
  17453. &lt;p&gt;Presentaties over front-endgerelateerde onderwerpen.&lt;/p&gt;
  17454. &lt;/li&gt;
  17455. &lt;li&gt;
  17456. &lt;p&gt;Niels Sijm verzorgt namens de cie. de contacten met het ICTU.&lt;/p&gt;
  17457. &lt;/li&gt;
  17458. &lt;li&gt;
  17459. &lt;p&gt;PPK biedt aan om contact op te nemen met Opera. Wellicht kan er vanuit hun curriculum meer verteld worden. Een andere vraag die hierbij speelt is de vertaling van het curriculum naar het Nederlands. Wybe stelt voor om eerst binnen de cie. te kijken hoe dit aangepakt kan worden (wellicht in samenwerking met het ICTU). Als hij er niet uitkomt zal het bestuur die taak van hem overnemen.&lt;/p&gt;
  17460. &lt;/li&gt;
  17461. &lt;li&gt;
  17462. &lt;p&gt;Krijn zal de informatie over de docentendag online zetten. Wellicht kan dit aangevuld worden met een post van Wybe over de verworvendheden van de commissie Onderwijs tot nu toe.&lt;/p&gt;
  17463. &lt;/li&gt;
  17464. &lt;li&gt;
  17465. &lt;p&gt;Sander wil erover nadenken of het mogelijk is om docenten in het aankomende fronteersforum een eigen plek te geven.&lt;/p&gt;
  17466. &lt;/li&gt;
  17467. &lt;/ul&gt;
  17468. &lt;p&gt;Als het Nederlandstalige curriculum eenmaal rond is, denkt Wybe dat de cie. Onderwijs een meer faciliterende houding kan aannemen. Zo zou de commissie eens in de twee jaar een docentendag kunnen organiseren en verder vooral naar de beschikbare bronnen moeten gaan verwijzen. In dit licht valt het onderhoud van het &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/onderwijs/bronnen&quot;&gt;bronnenoverzicht van Maaike&lt;/a&gt; ook onder de cie. Onderwijs.&lt;/p&gt;
  17469. &lt;h2&gt;Fronteers Congres 2009&lt;/h2&gt;
  17470. &lt;h3&gt;Financiële planning congres&lt;/h3&gt;
  17471. &lt;p&gt;Sander wil graag inzicht in de financiële planning van het congres, met name om inzicht te krijgen in de risico&#39;s en hoe deze vermeden kunnen worden. Peter-Paul antwoordt:&lt;/p&gt;
  17472. &lt;ul&gt;
  17473. &lt;li&gt;De kosten zijn even hoog als vorig jaar.&lt;/li&gt;
  17474. &lt;li&gt;De kaartjes worden duurder.&lt;/li&gt;
  17475. &lt;li&gt;We verwachten meer kaartjes te verkopen.&lt;/li&gt;
  17476. &lt;li&gt;Momenteel is er nog niets bekend over sponsors. PPK houdt het bestuur op de hoogte.&lt;/li&gt;
  17477. &lt;/ul&gt;
  17478. &lt;h3&gt;Andere congresgerelateerde zaken&lt;/h3&gt;
  17479. &lt;ul&gt;
  17480. &lt;li&gt;De locatie staat vast, het wordt &lt;a href=&quot;http://www.felix.meritis.nl/&quot;&gt;Felix Meritis&lt;/a&gt; in Amsterdam.&lt;/li&gt;
  17481. &lt;li&gt;De kaartverkoop start op zijn vroegst 11 mei.&lt;/li&gt;
  17482. &lt;li&gt;Op de volgende bestuursvergadering bepalen we go / no go.&lt;/li&gt;
  17483. &lt;/ul&gt;
  17484. &lt;h2&gt;Betaalde artikelen op fronteers.nl&lt;/h2&gt;
  17485. &lt;p&gt;PPK vroeg zich af of we wat zien in het plaatsen van bestaande artikelen op fronteers.nl. Het zou een stok achter de deur kunnen zijn om kwalitatief goede artikelen op de site tgeplaatst te krijgen.&lt;/p&gt;
  17486. &lt;p&gt;Het voorstel wordt afgewezen. Er zijn veel vrijwilligers die zich belangeloos inzetten voor Fronteers. We zien daarom geen reden om in dit geval onderscheid te maken en auteurs wel te betalen.&lt;/p&gt;
  17487. &lt;h2&gt;Nieuwe voorzitter gezocht&lt;/h2&gt;
  17488. &lt;p&gt;PPK zou graag willen dat iemand anders de voorzittersrol van hem overneemt. Fronteers moet niet te afhankelijk zijn van PPK. De voornaamste taken zijn:&lt;/p&gt;
  17489. &lt;ul&gt;
  17490. &lt;li&gt;Contact met commissievoorzitters onderhouden.&lt;/li&gt;
  17491. &lt;li&gt;Overzicht houden van alle activiteiten.&lt;/li&gt;
  17492. &lt;li&gt;Mensen achter de vodden aan zitten.&lt;/li&gt;
  17493. &lt;/ul&gt;
  17494. &lt;p&gt;Momenteel staat geen van de andere bestuursleden te trappelen om de voorzittersrol op zich te nemen.&lt;/p&gt;
  17495. &lt;h2&gt;Korte opmerkingen&lt;/h2&gt;
  17496. &lt;p&gt;P. Friederichs had de vraag opgeworpen of we een standaardcontract voor ZZP&#39;ers op konden stellen. Hij zou hier zelf een voorzet voor doen, maar we hebben er niets meer van gehoord. Krijn gaat er achteraan.&lt;/p&gt;
  17497. &lt;p&gt;Arjan stelt voor een wedstrijd te organiseren a la CSS OFF. Arjan wil de organisatie op zich nemen. De eerste prijs zou een toegangskaartje naar Fronteers 2009 kunnen zijn.&lt;/p&gt;
  17498. &lt;p&gt;Arjan en Peter-Paul willen master classes voor beginners organiseren. PPK denkt aan iets als &amp;quot;CSS-positioning voor mensen die pas onlangs overgestapt zijn op CSS&amp;quot;. Arjan wil iets met JavaScript doen. Arjan neemt de organisatie op zich en maakt een draaiboek.&lt;/p&gt;
  17499. &lt;p&gt;Er is een vraag van een lid binnengekomen over arbeidsvoorwaarden van front-enders. We vragen ons als bestuur af of we ons hiermee moeten/willen bemoeien. Arjan gaat inventariseren hoe andere verenigingen hiermee omgaan.&lt;/p&gt;
  17500. &lt;h2&gt;Portefeuilleverdeling en doelen&lt;/h2&gt;
  17501. &lt;table&gt;
  17502. &lt;thead&gt;
  17503. &lt;tr&gt;
  17504. &lt;th&gt;Portefeuilleverdeling&lt;/th&gt;
  17505. &lt;th&gt;Voor&lt;/th&gt;
  17506. &lt;th&gt;[Doel (per eind mei 2009)]&lt;/th&gt;
  17507. &lt;/tr&gt;
  17508. &lt;/thead&gt;
  17509. &lt;tbody&gt;
  17510. &lt;tr&gt;
  17511. &lt;td&gt;Financiën en ledenadministratie&lt;/td&gt;
  17512. &lt;td&gt;Krijn&lt;/td&gt;
  17513. &lt;td&gt;Alle leden hebben betaald. Automatische incasso is uitgezocht.&lt;/td&gt;
  17514. &lt;/tr&gt;
  17515. &lt;tr&gt;
  17516. &lt;td&gt;Online community&lt;/td&gt;
  17517. &lt;td&gt;Krijn&lt;/td&gt;
  17518. &lt;td&gt;Profielen en login. Leden kunnen hun interesses, technieken en avatars kwijt in hun profiel. Als dit gerealiseerd is komt het forum.&lt;/td&gt;
  17519. &lt;/tr&gt;
  17520. &lt;tr&gt;
  17521. &lt;td&gt;Website&lt;/td&gt;
  17522. &lt;td&gt;Krijn&lt;/td&gt;
  17523. &lt;td&gt;Atom-feed toevoegen&lt;/td&gt;
  17524. &lt;/tr&gt;
  17525. &lt;tr&gt;
  17526. &lt;td&gt;Vacaturebank&lt;/td&gt;
  17527. &lt;td&gt;Arjan&lt;/td&gt;
  17528. &lt;td&gt;Prijs omlaag schroeven voor oude klanten? Bedrijf dat bijeenkomst organiseert mag gratis vacature plaatsen? Actief bedrijven aanschrijven. Evaluatie na afloop.&lt;/td&gt;
  17529. &lt;/tr&gt;
  17530. &lt;tr&gt;
  17531. &lt;td&gt;Congres&lt;/td&gt;
  17532. &lt;td&gt;PPK&lt;/td&gt;
  17533. &lt;td&gt;Kaartverkoop geregeld.&lt;/td&gt;
  17534. &lt;/tr&gt;
  17535. &lt;tr&gt;
  17536. &lt;td&gt;Bijeenkomsten&lt;/td&gt;
  17537. &lt;td&gt;Arjan&lt;/td&gt;
  17538. &lt;td&gt;De eerste is achter de rug, voor een tweede hebben we een datum.&lt;/td&gt;
  17539. &lt;/tr&gt;
  17540. &lt;tr&gt;
  17541. &lt;td&gt;Masterclasses&lt;/td&gt;
  17542. &lt;td&gt;PPK&lt;/td&gt;
  17543. &lt;td&gt;Meer over bekend.&lt;/td&gt;
  17544. &lt;/tr&gt;
  17545. &lt;tr&gt;
  17546. &lt;td&gt;ALV&lt;/td&gt;
  17547. &lt;td&gt;Tom&lt;/td&gt;
  17548. &lt;td&gt;Voorstel voor datum en locatie.&lt;/td&gt;
  17549. &lt;/tr&gt;
  17550. &lt;tr&gt;
  17551. &lt;td&gt;Webrichtlijnen&lt;/td&gt;
  17552. &lt;td&gt;PPK&lt;/td&gt;
  17553. &lt;td&gt;-&lt;/td&gt;
  17554. &lt;/tr&gt;
  17555. &lt;tr&gt;
  17556. &lt;td&gt;Onderwijs&lt;/td&gt;
  17557. &lt;td&gt;Arjan&lt;/td&gt;
  17558. &lt;td&gt;Verantwoordelijk voor weblogposts&lt;/td&gt;
  17559. &lt;/tr&gt;
  17560. &lt;tr&gt;
  17561. &lt;td&gt;Diplomering&lt;/td&gt;
  17562. &lt;td&gt;PPK&lt;/td&gt;
  17563. &lt;td&gt;Online proefexamen gereed.&lt;/td&gt;
  17564. &lt;/tr&gt;
  17565. &lt;tr&gt;
  17566. &lt;td&gt;Marketing&lt;/td&gt;
  17567. &lt;td&gt;Sander&lt;/td&gt;
  17568. &lt;td&gt;Visie (wat is onze doelgroep?) - brochure&lt;/td&gt;
  17569. &lt;/tr&gt;
  17570. &lt;tr&gt;
  17571. &lt;td&gt;Nieuwsbrief&lt;/td&gt;
  17572. &lt;td&gt;Sander&lt;/td&gt;
  17573. &lt;td&gt;-&lt;/td&gt;
  17574. &lt;/tr&gt;
  17575. &lt;tr&gt;
  17576. &lt;td&gt;Engelse reageerders&lt;/td&gt;
  17577. &lt;td&gt;PPK&lt;/td&gt;
  17578. &lt;td&gt;Link verwijderen vanaf quirksmode.org.&lt;/td&gt;
  17579. &lt;/tr&gt;
  17580. &lt;tr&gt;
  17581. &lt;td&gt;Correspondentie die buiten de $1)uilles valt&lt;/td&gt;
  17582. &lt;td&gt;Tom&lt;/td&gt;
  17583. &lt;td&gt;-&lt;/td&gt;
  17584. &lt;/tr&gt;
  17585. &lt;/tbody&gt;
  17586. &lt;/table&gt;
  17587. </content>
  17588.  </entry>
  17589.  <entry>
  17590.    <title>Webrichtlijn 83: Invoervelden en labels</title>
  17591.    <link href="https://www.fronteers.nl/nl/blog/2009/03/webrichtlijnen-invoervelden-labels"/>
  17592.    <updated>2009-03-03T00:00:00Z</updated>
  17593.    <id>https://www.fronteers.nl/nl/blog/2009/03/webrichtlijnen-invoervelden-labels</id>
  17594.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik het label element om tekst expliciet met een invoerveld in een formulier te associëren. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/formulieren/toegankelijkheid/invoervelden-labels/#r-pd-13-1&quot;&gt;R-pd.13.1&lt;/a&gt;)&lt;/p&gt;
  17595. &lt;p&gt;Deze richtlijn kun je op drie manieren naleven:&lt;/p&gt;
  17596. &lt;pre&gt;&lt;code&gt;&amp;lt;!-- Mogelijkheid 1: --&amp;gt;
  17597. &amp;lt;label&amp;gt;
  17598. Uw naam:
  17599. &amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;naam&amp;quot;&amp;gt;
  17600. &amp;lt;/label&amp;gt;
  17601.  
  17602. &amp;lt;!-- Mogelijkheid 2: --&amp;gt;
  17603. &amp;lt;label for=&amp;quot;naam&amp;quot;&amp;gt;Uw naam:&amp;lt;/label&amp;gt;
  17604. &amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;naam&amp;quot; id=&amp;quot;naam&amp;quot;&amp;gt;
  17605.  
  17606. &amp;lt;!-- Mogelijkheid 3: --&amp;gt;
  17607. &amp;lt;label for=&amp;quot;naam&amp;quot;&amp;gt;
  17608. Uw naam:
  17609. &amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;naam&amp;quot; id=&amp;quot;naam&amp;quot;&amp;gt;
  17610. &amp;lt;/label&amp;gt;
  17611. &lt;/code&gt;&lt;/pre&gt;
  17612. &lt;p&gt;In het tweede geval heb je een &lt;code&gt;for=&amp;quot;&amp;quot;&lt;/code&gt; en &lt;code&gt;id=&amp;quot;&amp;quot;&lt;/code&gt; paartje nodig. Welke manier heeft jouw voorkeur? Waarom?&lt;/p&gt;
  17613. &lt;p&gt;Hoe ver ga je met labels in het volgende voorbeeld:&lt;/p&gt;
  17614. &lt;p&gt;&lt;img src=&quot;https://fronteers.nl/_img/2009/03/labels.png&quot; alt=&quot;Een simpel formulier met tekstlabels en invoervelden, met achter 1 invoerveld het woord &amp;quot;uur&amp;quot; en voor 2 invoervelden een €-teken.&quot; /&gt;&lt;/p&gt;
  17615. &lt;p&gt;En hack je in het volgende voorbeeld met positioning, of gebruik je gewoon 2 labels, ondanks &lt;a href=&quot;http://www.456bereastreet.com/archive/200809/multiple_form_labels_and_screen_readers/&quot;&gt;de problemen&lt;/a&gt;:&lt;/p&gt;
  17616. &lt;p&gt;&lt;img src=&quot;https://fronteers.nl/_img/2009/03/foutmelding.png&quot; alt=&quot;Een invoerveld met een tekstlabel aan de linkerkant en een foutmelding eronder.&quot; /&gt;&lt;/p&gt;
  17617. &lt;p&gt;Hoe vaak kom je nog tegen dat een checkbox of een radio button niet geassocieerd is met een tekstlabel? Erger je je dan ook zo enorm?&lt;/p&gt;
  17618. </content>
  17619.  </entry>
  17620.  <entry>
  17621.    <title>Webrichtlijn 82: Het gebruik van frames</title>
  17622.    <link href="https://www.fronteers.nl/nl/blog/2009/02/webrichtlijnen-frames"/>
  17623.    <updated>2009-02-24T00:00:00Z</updated>
  17624.    <id>https://www.fronteers.nl/nl/blog/2009/02/webrichtlijnen-frames</id>
  17625.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik geen frames op websites. Dit geldt voor zowel reguliere frames binnen framesets, als zogenaamde iframes. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/frames/richtlijnen/#r-pd-12-1&quot;&gt;R-pd.12.1&lt;/a&gt;)&lt;/p&gt;
  17626. &lt;p&gt;Dat frames &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/frames/nadelen/&quot;&gt;veel nadelen hebben&lt;/a&gt;, weet (&lt;a href=&quot;https://www.fronteers.nl/blog/2008/02/webrichtlijnen-r-pd-2-4-en-r-pd-2-5#reactie-718&quot;&gt;bijna&lt;/a&gt;) iedereen. &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/&quot;&gt;HTML 5&lt;/a&gt; ondersteunt ze dan ook niet, hoewel &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#frames-and-framesets&quot;&gt;het tekenen ervan&lt;/a&gt; wel gesneden koek is. Kunnen wij nog cases bedenken waarbij &lt;code&gt;frameset&lt;/code&gt; en &lt;code&gt;frame&lt;/code&gt; wel toegevoegde waarde hebben?&lt;/p&gt;
  17627. &lt;p&gt;Geldt hetzelfde echt voor &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-0.html#the-iframe-element&quot;&gt;inline frames&lt;/a&gt;? Hier zijn toch wel goede toepassingen voor te bedenken? Of geldt het invoegen van een &lt;a href=&quot;https://www.fronteers.nl/blog/2009/02/wordt-noorwegen-ons-voorbeeld#reactie-816&quot;&gt;IE6 upgrade bannertje&lt;/a&gt; niet als een goede case? Heeft een &lt;code&gt;iframe&lt;/code&gt; dezelfde nadelen als gewone frames?&lt;/p&gt;
  17628. &lt;p&gt;Wat vind jij trouwens van de nieuwe &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-0.html#attr-iframe-sandbox&quot;&gt;&lt;code&gt;sandbox&lt;/code&gt;&lt;/a&gt; en &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-0.html#attr-iframe-seamless&quot;&gt;&lt;code&gt;seamless&lt;/code&gt;&lt;/a&gt; attributen die HTML 5 introduceert voor inline frames?&lt;/p&gt;
  17629. &lt;p&gt;En wordt het embedden van een HTML document met het &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content-0.html#the-object-element&quot;&gt;&lt;code&gt;object&lt;/code&gt; element&lt;/a&gt; eigenlijk ook gezien als een &lt;code&gt;iframe&lt;/code&gt;? Of kun je op die manier toch die functionaliteit krijgen &lt;em&gt;en&lt;/em&gt; een puntje scoren voor deze Webrichtlijn? Komt dit door een &lt;a href=&quot;http://www.accessibility.nl/toetsing&quot;&gt;formele inspectie&lt;/a&gt;?&lt;/p&gt;
  17630. </content>
  17631.  </entry>
  17632.  <entry>
  17633.    <title>Wordt Noorwegen ons voorbeeld?</title>
  17634.    <link href="https://www.fronteers.nl/nl/blog/2009/02/wordt-noorwegen-ons-voorbeeld"/>
  17635.    <updated>2009-02-20T00:00:00Z</updated>
  17636.    <id>https://www.fronteers.nl/nl/blog/2009/02/wordt-noorwegen-ons-voorbeeld</id>
  17637.    <content xml:lang="nl" type="html">&lt;p&gt;Even los van het feit dat ze natuurlijk de &lt;a href=&quot;http://www.opera.com/&quot;&gt;beste browser&lt;/a&gt; op aarde maken, zijn een aantal Noren begonnen met &lt;a href=&quot;http://www.cjohansen.no/en/browsers/norway_tells_ie6_users_to_shape_up&quot;&gt;een offensief&lt;/a&gt; tegen Internet Explorer 6.&lt;/p&gt;
  17638. &lt;p&gt;Ook &lt;a href=&quot;http://blog.peterhaza.no/current-international-web-sites-warning-against-internet-explorer-6/&quot;&gt;andere landen&lt;/a&gt; volgen het voorbeeld. Ondertussen is op het &lt;a href=&quot;https://www.fronteers.nl/blog/2008/03/fronteers-op-irc&quot;&gt;Fronteers IRC kanaal&lt;/a&gt; een discussie losgebarsten over de mogelijkheden hier in ons kleine kikkerlandje. We hebben &lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;aardig wat leden&lt;/a&gt; die werken aan de grootste Nederlandse sites (hoewel, Hyves is nog niet vertegenwoordigd ;-), dus gezamenlijk moeten we toch iets kunnen betekenen. Het is nog geen &lt;a href=&quot;https://www.fronteers.nl/blog/2009/02/to-hell-with-bad-browsers&quot;&gt;vinger&lt;/a&gt;, maar wellicht kunnen wij helpen met iets als dit:&lt;/p&gt;
  17639. &lt;pre&gt;&lt;code&gt;&amp;lt;!--[if lte IE 6]&amp;gt;
  17640. &amp;lt;div id=&amp;quot;ie6-upgrade&amp;quot;&amp;gt;
  17641.  &amp;lt;p&amp;gt;Je gebruikt een &amp;lt;strong&amp;gt;zeer verouderde versie&amp;lt;/strong&amp;gt; van Internet Explorer, die een hoop veiligheidsproblemen heeft en hedendaagse webstandaarden slecht ondersteunt. Voor een betere, snellere en veiligere ervaring op het gehele internet en om beter op de toekomst voorbereid te zijn, adviseren we je om &amp;lt;a href=&amp;quot;http://www.microsoft.com/windows/downloads/ie/getitnow.mspx&amp;quot;&amp;gt;Internet Explorer gratis te upgraden&amp;lt;/a&amp;gt;. Werk je bij een bedrijf waarbij je dit zelf niet kunt doen? Vraag dan je systeembeheerder(s) om deze essentiële update.&amp;lt;/p&amp;gt;
  17642.  &amp;lt;p&amp;gt;Je kunt er ook voor kiezen om een &amp;lt;strong&amp;gt;andere browser&amp;lt;/strong&amp;gt; te gaan gebruiken: &amp;lt;a href=&amp;quot;http://www.opera.com/download/&amp;quot;&amp;gt;Opera&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.mozilla.com/firefox/&amp;quot;&amp;gt;Firefox&amp;lt;/a&amp;gt;, &amp;lt;a href=&amp;quot;http://www.apple.com/safari/download/&amp;quot;&amp;gt;Safari&amp;lt;/a&amp;gt; of &amp;lt;a href=&amp;quot;http://www.google.com/chrome&amp;quot;&amp;gt;Chrome&amp;lt;/a&amp;gt; zijn allemaal gratis en vele malen veiliger en sneller dan Internet Explorer.&amp;lt;/p&amp;gt;
  17643. &amp;lt;/div&amp;gt;
  17644. &amp;lt;![endif]--&amp;gt;
  17645. &lt;/code&gt;&lt;/pre&gt;
  17646. &lt;p&gt;Wie doet er mee? Laat het hieronder weten!&lt;/p&gt;
  17647. </content>
  17648.  </entry>
  17649.  <entry>
  17650.    <title>Bijeenkomst op 10 maart, in Amsterdam</title>
  17651.    <link href="https://www.fronteers.nl/nl/blog/2009/02/bijeenkomst-maart"/>
  17652.    <updated>2009-02-18T00:00:00Z</updated>
  17653.    <id>https://www.fronteers.nl/nl/blog/2009/02/bijeenkomst-maart</id>
  17654.    <content xml:lang="nl" type="html">&lt;p&gt;Dinsdag 10 maart zijn we te gast bij het &lt;a href=&quot;http://www.ma-web.nl/&quot;&gt;Mediacollege Amsterdam&lt;/a&gt;.&lt;/p&gt;
  17655. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  17656. &lt;ul&gt;
  17657. &lt;li&gt;18.30 uur: Inloop&lt;/li&gt;
  17658. &lt;li&gt;19.15 uur: Hugo Verlaat, introductie over het Mediacollege Amsterdam, kortweg Ma&lt;/li&gt;
  17659. &lt;li&gt;19.30 uur: &lt;a href=&quot;http://bitstorm.nl/&quot;&gt;Edwin Martin&lt;/a&gt;, over jQuery en enkele geavanceerde mogelijkheden&lt;/li&gt;
  17660. &lt;li&gt;20.30 uur: Vincent Hillenbrink &amp;amp; Marcel Beumer, over SAFE en Suave&lt;/li&gt;
  17661. &lt;li&gt;21.30 uur: Netwerken, borrelen, etc.&lt;/li&gt;
  17662. &lt;/ul&gt;
  17663. &lt;h2&gt;jQuery?&lt;/h2&gt;
  17664. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2008/concept7&quot;&gt;Dojo&lt;/a&gt;, &lt;a href=&quot;https://www.fronteers.nl/congres/2008/speakers#tom-occhino&quot;&gt;MooTools&lt;/a&gt;, en &lt;a href=&quot;https://www.fronteers.nl/congres/2008/speakers#christian-heilmann&quot;&gt;YUI&lt;/a&gt; hebben van Fronteers al wat aandacht gehad, maar jQuery is nog wat onderbelicht gebleven. Dit gaat door onder andere Edwin dit jaar veranderen. Voor zowel beginnende als de al wat gevorderde jQuery gebruiker interessant. En nee, we zijn niet anti-Prototype, maar daarover wellicht &lt;a href=&quot;https://www.fronteers.nl/congres/2009&quot;&gt;later&lt;/a&gt; meer :)&lt;/p&gt;
  17665. &lt;h2&gt;SAFE? Suave?&lt;/h2&gt;
  17666. &lt;p&gt;Stand-Alone Front-Ends, oftewel SAFE, is een combinatie van een ontwikkelaanpak en een architectuur, waarbij de front-end ontwikkelaar centraal staat. Een SAFE applicatie draait direct op elke web server, maar ook vanaf de desktop (bijvoorbeeld via een gemaild .zip bestand). Dankzij een &amp;quot;virtuele server&amp;quot; geschreven in JavaScript en een techniek genaamd &amp;quot;page hijacking&amp;quot; is voor zowel het ontwikkelen als het bekijken van een SAFE applicatie een browser voldoende. Deze aanpak heeft in de praktijk meestal een zeer positieve invloed op website projecten, niet alleen voor de web developer, maar ook voor andere project-teamleden.&lt;/p&gt;
  17667. &lt;p&gt;Het web development framework Suave implementeert a) een virtuele JavaScript server, b) een aantal verschillende page hijacking strategieën en c) een meerstaps XSLT transformator die databound view templates genereert. Met Suave zijn verschillende front-ends ontwikkeld die zowel stand-alone als geïntegreerd in uiteenlopende architecturen draaien, waaronder Java en .NET. Daarnaast bevat het ook een command line build tool op basis van Rhino, die alle view templates in een web applicatie automatisch genereert. Suave is nog volop in ontwikkeling, maar omdat het spoedig - hopelijk 3e kwartaal - een open source project wordt, is een voorproefje zeker op z&#39;n plaats.&lt;/p&gt;
  17668. &lt;p&gt;Vincent en Marcel zullen ons vanavond iets meer vertellen over hun visie en de plannen die zij hebben.&lt;/p&gt;
  17669. &lt;h2&gt;Waar?&lt;/h2&gt;
  17670. &lt;p&gt;Het Ma is zowel met openbaar als met eigen vervoer goed te bereiken. Voor het gemak volgt hieronder een opsomming van mogelijke aanvliegroutes. Trein uitstappen op station Sloterdijk dan nog een korte wandeling van 15 minuten richting Contactweg 36. Tram 12 uitstappen op Haarlemmerweg dan nog 15 minuten lopen. Stadsbus 48 uitstappen op de halte Contactweg vervolgens nog 4 minuten lopen. Auto vanaf de A10/E22 naar de S102. Van de S102, Transformatorweg naar &lt;a href=&quot;http://maps.google.com/maps?q=52.390911,4.856719&quot;&gt;Contactweg 36, 1014 AN Amsterdam&lt;/a&gt;. De auto kan op het parkeerterrein van het Mediacollege Amsterdam worden neergezet. Het is af te raden te parkeren voor de deur, aangezien daar een vergunning voor nodig is.&lt;/p&gt;
  17671. &lt;p&gt;Zoals gebruikelijk is deze bijeenkomst gratis toegankelijk voor leden en niet-leden, maar dien je je wel even &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;aan te melden&lt;/a&gt;.&lt;/p&gt;
  17672. &lt;p&gt;Tot de 10e!&lt;/p&gt;
  17673. </content>
  17674.  </entry>
  17675.  <entry>
  17676.    <title>Webrichtlijn 79, 80 &amp;amp; 81: Tabellen voor lay-out</title>
  17677.    <link href="https://www.fronteers.nl/nl/blog/2009/02/webrichtlijnen-tabellen-voor-layout"/>
  17678.    <updated>2009-02-17T00:00:00Z</updated>
  17679.    <id>https://www.fronteers.nl/nl/blog/2009/02/webrichtlijnen-tabellen-voor-layout</id>
  17680.    <content xml:lang="nl" type="html">&lt;p&gt;Bij het aanpassen van een bestaande website: gebruik CSS voor de presentatie en lay-out van webpagina’s en zie af van tabellen voor lay-out. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/tabellen/layout/richtlijnen/#r-pd-11-8&quot;&gt;R-pd.11.8&lt;/a&gt;) Bij het gebruik van tabellen voor lay-out: gebruik niet meer dan één tabel en gebruik zoveel mogelijk CSS voor de vormgeving van deze tabel. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/tabellen/layout/richtlijnen/#r-pd-11-9&quot;&gt;R-pd.11.9&lt;/a&gt;) Bij het gebruik van tabellen voor lay-out: pas geen toegankelijkheidsmarkup toe. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/tabellen/layout/richtlijnen/#r-pd-11-10&quot;&gt;R-pd.11.10&lt;/a&gt;)&lt;/p&gt;
  17681. &lt;p&gt;Hmm, dus het &lt;em&gt;mag&lt;/em&gt; wel... Of niet? &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/tabellen/layout/richtlijnen/&quot;&gt;&amp;quot;Om aan de Webrichtlijnen te kunnen voldoen, is het gebruik van CSS voor lay-out echter vereist.&amp;quot;&lt;/a&gt; Lekker duidelijk?&lt;/p&gt;
  17682. &lt;p&gt;Nog even in het kort de voordelen van tabellen voor lay-out:&lt;/p&gt;
  17683. &lt;ul&gt;
  17684. &lt;li&gt;Het concept is relatief eenvoudig te begrijpen door webontwikkelaars&lt;/li&gt;
  17685. &lt;li&gt;De meeste ontwikkelsoftware biedt vergaande ondersteuning voor het creëren van lay-out via tabellen&lt;/li&gt;
  17686. &lt;li&gt;Ze ‘werken’&lt;/li&gt;
  17687. &lt;/ul&gt;
  17688. &lt;p&gt;En de nadelen:&lt;/p&gt;
  17689. &lt;ul&gt;
  17690. &lt;li&gt;Ze voldoen niet aan het principe van scheiding tussen structuur en vormgeving&lt;/li&gt;
  17691. &lt;li&gt;Ze zijn inflexibel in vergelijking tot CSS&lt;/li&gt;
  17692. &lt;li&gt;Ze kosten webontwikkelaars meer tijd&lt;/li&gt;
  17693. &lt;li&gt;Ze brengen een probleemloos onderhoud van de inhoud in het geding&lt;/li&gt;
  17694. &lt;li&gt;Indien onnadenkend toegepast, kunnen ze de toegankelijkheid van een pagina belemmeren&lt;/li&gt;
  17695. &lt;/ul&gt;
  17696. &lt;p&gt;Richtlijn 11.9 lijkt een vrijbrief voor ontwikkelaars van sites die in de volgende categorieën vallen:&lt;/p&gt;
  17697. &lt;ul&gt;
  17698. &lt;li&gt;De kennis en ervaring van de betrokken webontwikkelaars is ontoereikend&lt;/li&gt;
  17699. &lt;li&gt;De om te bouwen site is te omvangrijk en maakt daarom het omzetten van de code te langdurig en te complex&lt;/li&gt;
  17700. &lt;/ul&gt;
  17701. &lt;p&gt;Zal deze achterdeur vaak gebruikt gaan worden, als de Webrichtlijnen &lt;a href=&quot;http://webwereld.nl/nieuws/54738/gemeenten-moeten-eind-2010-aan-webrichtlijnen-voldoen.html&quot;&gt;straks&lt;/a&gt; &lt;a href=&quot;https://www.fronteers.nl/blog/2009/02/webrichtlijnen-verplichten&quot;&gt;verplicht worden&lt;/a&gt; voor alle overheden? Wordt dit op dit moment al gedaan? Wie heeft hier ervaring mee?&lt;/p&gt;
  17702. &lt;p&gt;Waarom zijn de Webrichtlijnen hier niet gewoon streng? Zou dat misschien de &lt;a href=&quot;http://www.den-dopper.com/2009/02/10/hoe-kan-de-verkoopbaarheid-en-bruikbaarheid-van-de-webrichtlijnen-vergroot-worden/&quot;&gt;verkoopbaarheid&lt;/a&gt; nog moeilijker maken?&lt;/p&gt;
  17703. </content>
  17704.  </entry>
  17705.  <entry>
  17706.    <title>“To Hell With Bad Browsers”</title>
  17707.    <link href="https://www.fronteers.nl/nl/blog/2009/02/to-hell-with-bad-browsers"/>
  17708.    <updated>2009-02-16T00:00:00Z</updated>
  17709.    <id>https://www.fronteers.nl/nl/blog/2009/02/to-hell-with-bad-browsers</id>
  17710.    <content xml:lang="nl" type="html">&lt;p&gt;Precies 8 jaar geleden publiceerde Jeffrey Zeldman zijn artikel &lt;a href=&quot;http://www.alistapart.com/articles/tohell&quot;&gt;To Hell With Bad Browsers&lt;/a&gt;. In datzelfde jaar kwam Internet Explorer 6 uit. En ondertussen bedienen we deze browser nog steeds met &lt;a href=&quot;http://www.positioniseverything.net/explorer.html&quot;&gt;hacks&lt;/a&gt;. Wanneer wordt het tijd om IE6 ook de vinger te geven?&lt;/p&gt;
  17711. &lt;p&gt;Hoe zit dit bij jullie? Hoeveel werk steek jij nog in IE6? Houden designers zich (onbewust) in, omdat ze geen PNG&#39;tjes met alpha transparantie &amp;quot;kunnen&amp;quot; gebruiken? Is het echt zo erg om een beetje rond te strooien met een &lt;code&gt;zoom: 1;&lt;/code&gt; hier en daar? Of zit het probleem vooral bij JavaScript gerelateerd werk?&lt;/p&gt;
  17712. &lt;p&gt;Zijn de 4% IE6 gebruikers hier op fronteers.nl een beetje tekenend voor overige sites, of zit het meer in de buurt van de 60% (!), zoals op youngprofessionaloftheyear.nl (een site die vooral leeft bij de grotere bedrijven van Nederland)? Zien jullie ook Firefox pieken &#39;s avonds en in het weekend, en diepe IE dalen rond diezelfde tijd? Wat kunnen we hier aan doen? &lt;em&gt;Willen&lt;/em&gt; we hier wel wat aan doen? &lt;a href=&quot;http://friendlybit.com/browsers/motivation-for-building-for-ie6/&quot;&gt;Wie helpen we&lt;/a&gt; als we &lt;a href=&quot;http://www.robertnyman.com/2009/02/09/stop-developing-for-internet-explorer-6/&quot;&gt;stoppen met hacken&lt;/a&gt;?&lt;/p&gt;
  17713. &lt;p&gt;Heeft het zin als we IE6 gewoon een &lt;a href=&quot;http://www.dustindiaz.com/naked-day/&quot;&gt;naked year&lt;/a&gt; bezorgen, zoals Dan Cederholm &lt;a href=&quot;http://www.simplebits.com/notebook/2009/02/13/iegone.html&quot;&gt;zou &lt;em&gt;kunnen&lt;/em&gt; doen&lt;/a&gt;:&lt;/p&gt;
  17714. &lt;pre&gt;&lt;code&gt;&amp;lt;!--[if !IE]&amp;gt;&amp;lt;!--&amp;gt;
  17715. &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;screen.css&amp;quot;&amp;gt;
  17716. &amp;lt;!--&amp;lt;![endif]--&amp;gt;
  17717. &amp;lt;!--[if gte IE 7]&amp;gt;
  17718. &amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;screen.css&amp;quot;&amp;gt;
  17719. &amp;lt;![endif]--&amp;gt;
  17720. &lt;/code&gt;&lt;/pre&gt;
  17721. &lt;p&gt;Waarom durven we het niet gewoon? &lt;em&gt;To Hell With Bad Browsers!&lt;/em&gt; Of zijn we met z&#39;n allen bang dat dat als &amp;quot;To Hell With Some Of Our Users&amp;quot; gezien gaat worden? De bezoekers mogen toch niet de dupe worden? Hoe lang houden we deze situatie nog in stand? Wordt het een combinatie van percentages bekijken en afwegen tegen de kosten van het ontwikkelen voor IE6 (die apart op een offerte kunnen staan), of is dit een vicieuze cirkel?&lt;/p&gt;
  17722. </content>
  17723.  </entry>
  17724.  <entry>
  17725.    <title>Webrichtlijn 73 t/m 78: Anatomie en toegankelijkheid van een tabel</title>
  17726.    <link href="https://www.fronteers.nl/nl/blog/2009/02/webrichtlijnen-anatomie-tabellen"/>
  17727.    <updated>2009-02-10T00:00:00Z</updated>
  17728.    <id>https://www.fronteers.nl/nl/blog/2009/02/webrichtlijnen-anatomie-tabellen</id>
  17729.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik het &lt;code&gt;th&lt;/code&gt; (table header) element voor het beschrijven van een kolom of rij in een tabel met relationele informatie. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/tabellen/relationele-informatie/anatomie/#r-pd-11-2&quot;&gt;R-pd.11.2&lt;/a&gt;) Groepeer rijen met alleen &lt;code&gt;th&lt;/code&gt; (table header) cellen met het &lt;code&gt;thead&lt;/code&gt; (table head) element. Groepeer de rest van de tabel met het &lt;code&gt;tbody&lt;/code&gt; (table body) element. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/tabellen/relationele-informatie/anatomie/#r-pd-11-3&quot;&gt;R-pd.11.3&lt;/a&gt;) Gebruik het &lt;code&gt;scope&lt;/code&gt; attribuut voor het associëren van tabellabels (&lt;code&gt;th&lt;/code&gt; cellen) met kolommen of rijen. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/tabellen/relationele-informatie/toegankelijkheid/#r-pd-11-4&quot;&gt;R-pd.11.4&lt;/a&gt;) Gebruik het &lt;code&gt;header&lt;/code&gt; [sic] en &lt;code&gt;id&lt;/code&gt; element [sic] voor het associëren van tabellabels (&lt;code&gt;th&lt;/code&gt; cellen) met individuele cellen in complexe tabellen. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/tabellen/relationele-informatie/toegankelijkheid/#r-pd-11-5&quot;&gt;R-pd.11.5&lt;/a&gt;) Geef afkortingen voor tabellabels (&lt;code&gt;th&lt;/code&gt; cellen) via het &lt;code&gt;abbr&lt;/code&gt; (abbreviation) attribuut wanneer de lengte van de inhoud van het tabellabel zodanig van lengte is dat herhaling in een spraakbrowser irritatie kan wekken. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/tabellen/relationele-informatie/toegankelijkheid/#r-pd-11-6&quot;&gt;R-pd.11.6&lt;/a&gt;) Gebruik het &lt;code&gt;caption&lt;/code&gt; element of heading markup voor het geven van een koptekst boven een tabel. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/tabellen/relationele-informatie/toegankelijkheid/#r-pd-11-7&quot;&gt;R-pd.11.7&lt;/a&gt;)&lt;/p&gt;
  17730. &lt;p&gt;Iedereen zal de elementen &lt;code&gt;tr&lt;/code&gt;, &lt;code&gt;th&lt;/code&gt; en &lt;code&gt;td&lt;/code&gt; wel kennen. Maar wanneer gebruik jij &lt;code&gt;thead&lt;/code&gt;, &lt;code&gt;tbody&lt;/code&gt; (expliciet) en &lt;code&gt;tfoot&lt;/code&gt;? Het voorbeeld waarbij een &lt;code&gt;thead&lt;/code&gt; bij een print (op papier dus) meerdere keren terugkomt kennen we ondertussen wel, dus die telt niet ;o)&lt;/p&gt;
  17731. &lt;p&gt;&amp;quot;Een rij met alleen &lt;code&gt;th&lt;/code&gt; cellen&amp;quot; is toch iets wat een stuk software zonder problemen automatisch als &lt;code&gt;thead&lt;/code&gt; kan zien? Is dit misschien de reden waarom tabellen &lt;a href=&quot;http://projectcerbera.com/web/study/2007/tables/&quot;&gt;op zoveel verschillende manieren&lt;/a&gt; in elkaar geklust worden? Aan de &lt;a href=&quot;http://www.456bereastreet.com/archive/200410/bring_on_the_tables/&quot;&gt;goede tutorials&lt;/a&gt; ligt het niet, toch?&lt;/p&gt;
  17732. &lt;p&gt;In onze oneindige zoektocht naar &lt;em&gt;toegankelijkheid&lt;/em&gt; is het simpelweg gebruiken van &lt;code&gt;th&lt;/code&gt; elementen natuurlijk niet genoeg. Een tabel &amp;quot;toegankelijk maken&amp;quot; moet namelijk wel moeilijk en op zichzelf al een niet bepaald toegankelijk klusje zijn. &lt;code&gt;scope&lt;/code&gt;, &lt;code&gt;headers&lt;/code&gt;, &lt;code&gt;id&lt;/code&gt; en &lt;code&gt;abbr&lt;/code&gt; attributen (ja, de Webrichtlijnen bevatten in R-pd.11.5 2 fouten, foei!) maken tabellen niet echt leuk om te bewerken. Zeker als die 4 eigenschappen geen invloed hebben op iets wat de content manager &lt;em&gt;ziet&lt;/em&gt;. Als een tabel zo complex is dat je deze &lt;em&gt;extra&lt;/em&gt; informatie mee moet geven, is het dan niet handiger (voor iedereen) om de data in de tabel anders te presenteren? En is het extra werk &lt;a href=&quot;http://james.html5.org/tables/table_inspector.html&quot;&gt;echt wel nodig&lt;/a&gt;?&lt;/p&gt;
  17733. &lt;p&gt;Waarom zou je &lt;code&gt;&amp;lt;th abbr=&amp;quot;Werkzaamheden Randstad&amp;quot;&amp;gt;Werkzaamheden in de Randstad en omstreken&amp;lt;/th&amp;gt;&lt;/code&gt; gebruiken, in plaats van &lt;code&gt;&amp;lt;th&amp;gt;Werkzaamheden Randstad&amp;lt;/th&amp;gt;&lt;/code&gt;, met eventueel &lt;code&gt;title=&amp;quot;Werkzaamheden in de Randstad en omstreken&amp;quot;&lt;/code&gt;? Waarom wel rekening houden met &amp;quot;spraakbrowsers&amp;quot;, maar niet met smalle schermen (of designs)?&lt;/p&gt;
  17734. &lt;p&gt;Waarom is het &lt;code&gt;summary&lt;/code&gt; attribuut trouwens niet in een Webrichtlijn verwerkt? Voelden ze soms al &lt;a href=&quot;http://esw.w3.org/topic/HTML/SummaryForTABLE&quot;&gt;nattigheid&lt;/a&gt; m.b.t. de toekomst en HTML 5? Voor iedereen die de ontwikkeling rondom HTML 5 niet volgt: &lt;code&gt;summary&lt;/code&gt; en &lt;code&gt;abbr&lt;/code&gt; zitten er (nog) niet in. Wat is jouw mening hierover?&lt;/p&gt;
  17735. &lt;p&gt;En voor alle slimme CMS&#39;en die &lt;em&gt;automatisch&lt;/em&gt; &lt;code&gt;headers&lt;/code&gt;, &lt;code&gt;id&lt;/code&gt;, &lt;code&gt;scope&lt;/code&gt; en &lt;code&gt;summary&lt;/code&gt; (&amp;quot;tabel bevat 5 rijen en 6 kolommen&amp;quot;) attributen toevoegen om punten op &lt;a href=&quot;http://www.webrichtlijnen.nl/toetsen/&quot;&gt;de Webrichtlijnentoets&lt;/a&gt; te scoren: hou daar eens mee op ;-)&lt;/p&gt;
  17736. </content>
  17737.  </entry>
  17738.  <entry>
  17739.    <title>Fronteers 2009 congres</title>
  17740.    <link href="https://www.fronteers.nl/nl/blog/2009/02/fronteers-2009-congres"/>
  17741.    <updated>2009-02-09T00:00:00Z</updated>
  17742.    <id>https://www.fronteers.nl/nl/blog/2009/02/fronteers-2009-congres</id>
  17743.    <content xml:lang="nl" type="html">&lt;p&gt;Aangezien het &lt;a href=&quot;https://www.fronteers.nl/congres/2008&quot;&gt;Fronteers 2008 congres&lt;/a&gt; een doorslaand succes was, hebben &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/congres&quot;&gt;we&lt;/a&gt; besloten in 2009 opnieuw een technisch webcongres te organiseren. Het werk is nog maar net begonnen, maar we hebben data en een plaats vastgelegd. We kunnen ook al twee sprekers aankondigen.&lt;/p&gt;
  17744. &lt;p&gt;&lt;a href=&quot;https://www.fronteers.nl/congres/2009&quot;&gt;Fronteers 2009&lt;/a&gt; zal gehouden worden op donderdag 5 en vrijdag 6 november in &lt;a href=&quot;https://www.fronteers.nl/congres/2009/venue&quot;&gt;Felix Meritis&lt;/a&gt; te Amsterdam. De kaartverkoop start in mei, en net zoals vorig jaar kunnen Fronteers-leden een forse korting tegemoet zien.&lt;/p&gt;
  17745. &lt;p&gt;We hebben &lt;a href=&quot;http://stevesouders.com/&quot;&gt;Steve Souders&lt;/a&gt; bereid gevonden ons voor te lichten over de nieuwste inzichten in JavaScript performance, en &lt;a href=&quot;http://nate.koechley.com/&quot;&gt;Nate Koechley&lt;/a&gt; zal spreken over de voortgaande professionalisering van front-end engineering.&lt;/p&gt;
  17746. &lt;p&gt;Hoewel je nog maanden hebt om te beslissen of je wel of niet zult komen, raden we je aan 5 en 6 november alvast in je agenda te noteren. Op de &lt;a href=&quot;https://www.fronteers.nl/congres&quot;&gt;congrespagina&lt;/a&gt; kan je je emailadres achterlaten; we sturen je dan het laatste congresnieuws door zodra het beschikbaar is.&lt;/p&gt;
  17747. &lt;p&gt;Tot ziens op Fronteers 2009!&lt;/p&gt;
  17748. </content>
  17749.  </entry>
  17750.  <entry>
  17751.    <title>Webrichtlijnen verplichten?</title>
  17752.    <link href="https://www.fronteers.nl/nl/blog/2009/02/webrichtlijnen-verplichten"/>
  17753.    <updated>2009-02-05T00:00:00Z</updated>
  17754.    <id>https://www.fronteers.nl/nl/blog/2009/02/webrichtlijnen-verplichten</id>
  17755.    <content xml:lang="nl" type="html">&lt;p&gt;Heet van de pers: SP-kamerlid Ronald van Raak &lt;a href=&quot;http://www.nu.nl/internet/1911961/sp-wil-verplichte-webrichtlijnen-alle-overheden.html&quot;&gt;wil dat de Webrichtlijnen verplicht worden&lt;/a&gt; voor alle overheden.&lt;/p&gt;
  17756. &lt;p&gt;Zoals bekend is naleving van de Webrichtlijnen op dit moment niet verplicht, hoewel de ministeries er zich vrijwillig aan hebben gecommitteerd en zich over het algemeen aan deze verplichting houden. Lagere overheden zouden dit ook kunnen doen, maar tot op heden gaat dat zoals bekend mondjesmaat.&lt;/p&gt;
  17757. &lt;p&gt;Staatssecretaris Bijleveld (Binnenlandse Zaken, CDA) &lt;a href=&quot;http://www.minbzk.nl/actueel?ActItmIdt=116388&quot;&gt;liet vorige maand weten&lt;/a&gt; dat zij een wettelijke verplichting op gespannen voet vond staan met de eigen verantwoordelijkheden van de lagere overheden en er dus van af wilde zien.&lt;/p&gt;
  17758. &lt;p&gt;Van Raak wil lagere overheden toch verplichten de Webrichtlijnen te volgen. Van Raaks argumentatie (zoals gerapporteerd op nu.nl) gaat overigens voornamelijk in op de voordelen die gehandicapten van de Webrichtlijnen ondervinden; bouwkwaliteit wordt niet genoemd.&lt;/p&gt;
  17759. &lt;p&gt;Wat vinden wij hiervan? Moeten alle Nederlandse overheden verplicht worden de Webrichtlijnen na te volgen? Of blijft dit een eigen verantwoordelijkheid van de overheidsinstanties in kwestie?&lt;/p&gt;
  17760. </content>
  17761.  </entry>
  17762.  <entry>
  17763.    <title>Webrichtlijn 72: Tabellen voor relationele informatie</title>
  17764.    <link href="https://www.fronteers.nl/nl/blog/2009/02/webrichtlijnen-tabellen-voor-relationele-informatie"/>
  17765.    <updated>2009-02-03T00:00:00Z</updated>
  17766.    <id>https://www.fronteers.nl/nl/blog/2009/02/webrichtlijnen-tabellen-voor-relationele-informatie</id>
  17767.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik tabellen voor het weergeven van relationele informatie en niet voor lay-out. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/tabellen/relationele-informatie/#r-pd-11-1&quot;&gt;R-pd.11.1&lt;/a&gt;)&lt;/p&gt;
  17768. &lt;p&gt;Zojuist is er weer &lt;a href=&quot;http://rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments&quot;&gt;een hevige discussie&lt;/a&gt; over &lt;a href=&quot;http://www.flownet.com/ron/css-rant.html&quot;&gt;het gebruik van tabellen voor layout&lt;/a&gt; losgebarsten. Dat kunnen wij natuurlijk ook, met deze richtlijn!&lt;/p&gt;
  17769. &lt;p&gt;Wie is het eens met de stelling &amp;quot;CSS should be used for styling, tables should be used for layout&amp;quot;? Zit wel wat in, toch? :-)&lt;/p&gt;
  17770. &lt;p&gt;Gaan &lt;a href=&quot;http://www.sitepoint.com/books/csswrong1/&quot;&gt;CSS tables&lt;/a&gt; (&lt;code&gt;display: table;&lt;/code&gt;, etc.) een einde maken aan deze discussie, of heeft dat hetzelfde probleem? Het idee is toch dat je markup en layout van elkaar wilt scheiden? Is het volgende echt zoveel beter dan een table layout?&lt;/p&gt;
  17771. &lt;pre&gt;&lt;code&gt;&amp;lt;style&amp;gt;
  17772. #main { display: table-row; }
  17773.  #nav { display: table-cell; }
  17774.  #content { display: table-cell; }
  17775. &amp;lt;/style&amp;gt;
  17776.  
  17777. &amp;lt;div id=&amp;quot;main&amp;quot;&amp;gt;
  17778. &amp;lt;div id=&amp;quot;nav&amp;quot;&amp;gt;
  17779.  &amp;lt;ul&amp;gt;
  17780.   &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/&amp;quot;&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
  17781.   &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/over&amp;quot;&amp;gt;Over&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
  17782.   &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/contact&amp;quot;&amp;gt;Contact&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
  17783.  &amp;lt;/ul&amp;gt;
  17784. &amp;lt;/div&amp;gt; &amp;lt;!-- #nav --&amp;gt;
  17785. &amp;lt;div id=&amp;quot;content&amp;quot;&amp;gt;
  17786.  &amp;lt;h1&amp;gt;Over&amp;lt;/h1&amp;gt;
  17787.  &amp;lt;p&amp;gt;Over ons...&amp;lt;/p&amp;gt;
  17788.  &amp;lt;p&amp;gt;Etc.&amp;lt;/p&amp;gt;
  17789. &amp;lt;/div&amp;gt; &amp;lt;!-- #content --&amp;gt;
  17790. &amp;lt;/div&amp;gt; &amp;lt;!-- #main --&amp;gt;
  17791. &lt;/code&gt;&lt;/pre&gt;
  17792. &lt;p&gt;Hiermee zit je toch net zo vast aan je layout als met het volgende:&lt;/p&gt;
  17793. &lt;pre&gt;&lt;code&gt;&amp;lt;table&amp;gt;
  17794. &amp;lt;tr&amp;gt;
  17795.  &amp;lt;td&amp;gt;
  17796.   &amp;lt;ul&amp;gt;
  17797.    &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/&amp;quot;&amp;gt;Home&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
  17798.    &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/over&amp;quot;&amp;gt;Over&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
  17799.    &amp;lt;li&amp;gt;&amp;lt;a href=&amp;quot;/contact&amp;quot;&amp;gt;Contact&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
  17800.   &amp;lt;/ul&amp;gt;
  17801.  &amp;lt;/td&amp;gt;
  17802.  &amp;lt;td&amp;gt;
  17803.   &amp;lt;h1&amp;gt;Over&amp;lt;/h1&amp;gt;
  17804.   &amp;lt;p&amp;gt;Over ons...&amp;lt;/p&amp;gt;
  17805.   &amp;lt;p&amp;gt;Etc.&amp;lt;/p&amp;gt;
  17806.  &amp;lt;/td&amp;gt;
  17807. &amp;lt;/tr&amp;gt;
  17808. &amp;lt;/table&amp;gt;
  17809. &lt;/code&gt;&lt;/pre&gt;
  17810. &lt;p&gt;Maar nu even zonder gekheid: wie weet er überhaupt nog hoe je tabellen gebruikt voor layout? Moet je deze discussie ooit nog aangaan in je werk, en zo ja, welke argumenten hoor je daar?&lt;/p&gt;
  17811. </content>
  17812.  </entry>
  17813.  <entry>
  17814.    <title>Bijeenkomst op 19 januari, in Breda</title>
  17815.    <link href="https://www.fronteers.nl/nl/blog/2009/01/bijeenkomst-januari"/>
  17816.    <updated>2009-01-05T00:00:00Z</updated>
  17817.    <id>https://www.fronteers.nl/nl/blog/2009/01/bijeenkomst-januari</id>
  17818.    <content xml:lang="nl" type="html">&lt;p&gt;Maandagavond 19 januari 2009 (gelukkig nieuwjaar overigens!) zijn we te gast bij &lt;a href=&quot;http://www.e-sites.nl/&quot;&gt;e-sites&lt;/a&gt; in Breda.&lt;/p&gt;
  17819. &lt;p&gt;Het programma is als volgt:&lt;/p&gt;
  17820. &lt;ul&gt;
  17821. &lt;li&gt;18.30 uur: Inloop&lt;/li&gt;
  17822. &lt;li&gt;19.15 uur: Introductie door e-sites&lt;/li&gt;
  17823. &lt;li&gt;19:30 uur: &lt;em&gt;&lt;a href=&quot;http://andrescholten.nl/index.php/andre-scholten/&quot;&gt;André Scholten&lt;/a&gt;&lt;/em&gt;, over SEO&lt;/li&gt;
  17824. &lt;li&gt;20.30 uur: &lt;em&gt;&lt;a href=&quot;http://annevankesteren.nl/about&quot;&gt;Anne van Kesteren&lt;/a&gt;&lt;/em&gt;, over HTML5 (duh), cross-site XMLHttpRequest en querySelector(All)&lt;/li&gt;
  17825. &lt;li&gt;21.30 uur: netwerk en borrel&lt;/li&gt;
  17826. &lt;/ul&gt;
  17827. &lt;p&gt;Een &lt;a href=&quot;http://www.e-sites.nl/over/1595-routebeschrijving.html&quot;&gt;uitgebreide routebeschrijving&lt;/a&gt; is te vinden bij e-sites. Kom je met de trein, dan is het &lt;a href=&quot;http://maps.google.nl/maps?f=q&amp;amp;hl=nl&amp;amp;geocode=&amp;amp;q=Reduitlaan+33,+4814+DC+BREDA&amp;amp;sll=52.469397,5.509644&amp;amp;sspn=3.882285,9.887695&amp;amp;ie=UTF8&amp;amp;ll=51.592922,4.770577&amp;amp;spn=0.007732,0.019312&amp;amp;t=h&amp;amp;z=16&quot;&gt;een klein kwartiertje lopen&lt;/a&gt; vanaf station Breda.&lt;/p&gt;
  17828. &lt;p&gt;Zoals gebruikelijk is deze bijeenkomst gratis toegankelijk voor leden en niet-leden, maar dien je je wel even &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;aan te melden&lt;/a&gt;.&lt;/p&gt;
  17829. &lt;p&gt;Tot de 19e!&lt;/p&gt;
  17830. </content>
  17831.  </entry>
  17832.  <entry>
  17833.    <title>Webrichtlijn 67 &amp;amp; 68: Richtlijnen voor het gebruik van CSS</title>
  17834.    <link href="https://www.fronteers.nl/nl/blog/2008/12/webrichtlijnen-gebruik-van-css"/>
  17835.    <updated>2008-12-09T00:00:00Z</updated>
  17836.    <id>https://www.fronteers.nl/nl/blog/2008/12/webrichtlijnen-gebruik-van-css</id>
  17837.    <content xml:lang="nl" type="html">&lt;p&gt;CSS dient in gelinkte bestanden geplaatst te worden en niet gemengd te worden met de HTML broncode. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/css/richtlijnen/#r-pd-9-1&quot;&gt;R-pd.9.1&lt;/a&gt;) Pagina&#39;s dienen bruikbaar te blijven wanneer CSS door een webbrowser niet ondersteund wordt. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/css/richtlijnen/#r-pd-9-2&quot;&gt;R-pd.9.2&lt;/a&gt;)&lt;/p&gt;
  17838. &lt;p&gt;Wanneer vind jij dat je CSS wel mag mengen met HTML? Met andere woorden; wanneer zijn &lt;code&gt;&amp;lt;style&amp;gt;&lt;/code&gt; (zonder &lt;code&gt;@import&lt;/code&gt;) en &lt;code&gt;style=&amp;quot;&amp;quot;&lt;/code&gt; verdedigbaar?&lt;/p&gt;
  17839. &lt;p&gt;Wat gebruik je liever; &lt;code&gt;&amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;foo.css&amp;quot;&amp;gt;&lt;/code&gt; of &lt;code&gt;&amp;lt;style&amp;gt;@import url(&#39;foo.css&#39;);&amp;lt;/style&amp;gt;&lt;/code&gt;? Of ontwijk je &lt;code&gt;@import&lt;/code&gt; vanwege &lt;a href=&quot;http://developer.yahoo.com/performance/rules.html#csslink&quot;&gt;een andere regel&lt;/a&gt;?&lt;/p&gt;
  17840. &lt;p&gt;Hoe vaak test jij gemaakte templates of sites terwijl stylesheets uit staan? Welke tools gebruik je daarvoor? En waar let je dan op?&lt;/p&gt;
  17841. &lt;p&gt;Gebruik jij trouwens nog steeds CSS hacks en/of filters om bijvoorbeeld Netscape en IE5 voor de Mac te ontzien? Of vinden we IE6 en IE7 met een paar conditional comments tegenwoordig al genoeg extra werk?&lt;/p&gt;
  17842. &lt;p&gt;De webrichtlijnen maken er geen richtlijn van, maar &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/css/technieken/printen/&quot;&gt;print stylesheets&lt;/a&gt; (&lt;code&gt;rel=&amp;quot;stylesheet&amp;quot; media=&amp;quot;print&amp;quot;&lt;/code&gt; dus) worden wel genoemd. Gebruiken we die ondertussen ook allemaal? En vind je dan dat alle pagina&#39;s perfect printbare equivalenten moeten hebben, of is het voor sommige pagina&#39;s (zoals een homepage) minder belangrijk? Hoe bepaal je trouwens hoe je de print stylesheet opzet? In hoeverre wordt hier (ook) een design voor gemaakt en over nagedacht?&lt;/p&gt;
  17843. &lt;p&gt;En om af te sluiten met een flauw puntje: &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/css/technieken/css-vs-tabellen/&quot;&gt;tabellen voor lay-out&lt;/a&gt;. Hoe vaak heb jij zin om het &lt;a href=&quot;http://giveupandusetables.com/&quot;&gt;op te geven&lt;/a&gt;? ;)&lt;/p&gt;
  17844. </content>
  17845.  </entry>
  17846.  <entry>
  17847.    <title>Webrichtlijn 63 t/m 66: Links naar downloadbare bestanden</title>
  17848.    <link href="https://www.fronteers.nl/nl/blog/2008/11/webrichtlijnen-downloadbare-bestanden"/>
  17849.    <updated>2008-11-18T00:00:00Z</updated>
  17850.    <id>https://www.fronteers.nl/nl/blog/2008/11/webrichtlijnen-downloadbare-bestanden</id>
  17851.    <content xml:lang="nl" type="html">&lt;p&gt;Bij het aanbieden van downloadbare bestanden, informeer de bezoeker over hoe deze te downloaden en vervolgens te gebruiken. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/downloadbare-bestanden/#r-pd-8-20&quot;&gt;R-pd.8.20&lt;/a&gt;) Serveer bestanden met het correcte MIME type. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/downloadbare-bestanden/#r-pd-8-20&quot;&gt;R-pd.8.21&lt;/a&gt;) Open links naar downloadbare bestanden niet in een automatisch nieuw venster. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/downloadbare-bestanden/#r-pd-8-22&quot;&gt;R-pd.8.22&lt;/a&gt;) Serveer downloadbare bestanden niet met opzet een onbekend of incorrect MIME type om de browser tot een bepaald gedrag te dwingen. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/downloadbare-bestanden/#r-pd-8-23&quot;&gt;R-pd.8.23&lt;/a&gt;)&lt;/p&gt;
  17852. &lt;p&gt;Hoe informeer jij bezoekers over bijvoorbeeld het type en de grootte van het bestand? Doe je dit middels het &lt;code&gt;title&lt;/code&gt; attribuut, of tussen haakjes? En wat is in dat laatste geval handiger? De uitleg &lt;em&gt;in&lt;/em&gt; de link, of &lt;em&gt;na&lt;/em&gt; de link? Gebruik je voor het type van het bestand ook het &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/structured-client-side-storage.html#attr-hyperlink-type&quot;&gt;&lt;code&gt;type&lt;/code&gt; attribuut&lt;/a&gt;, of gaat dat te ver?&lt;/p&gt;
  17853. &lt;p&gt;Bij wie ligt volgens jou de verantwoordelijkheid voor correcte MIME-types? Hoort dit thuis in een CMS, bij de back-end ontwikkelaars of moet dit vastliggen in de serverconfiguratie? Dit zou een makkelijk te wijzigen lijstje met variabelen moeten zijn, maar waarom is dit zo vaak een probleem? Ligt dit aan (verouderde) software op de server, of aan onwetendheid bij een bepaalde partij? Hoe ga je hier mee om?&lt;/p&gt;
  17854. &lt;p&gt;Links naar downloads niet laten openen in een nieuw venster is een duidelijke richtlijn, maar waarom moeten we voorkomen dat plugins in een browser het bestand ook &lt;em&gt;in&lt;/em&gt; de browser openen? We mogen toch aannemen dat gebruikers hiervoor bewust gekozen hebben bij het installeren van een plugin? Of dat browser bouwers hier wat onderzoek naar gedaan hebben, voordat ze tijd en energie staken in het ontwikkelen van een plugin-architectuur? De &lt;code&gt;Content-disposition: attachment&lt;/code&gt; opmerking leidt nog net niet tot een richtlijn, maar hoe kan het dat zoveel mensen het &lt;em&gt;niet&lt;/em&gt; prettig vinden als een bestand in de browser geopend wordt, terwijl dit wel de standaard instelling is?&lt;/p&gt;
  17855. &lt;p&gt;En bij welk type bestand trekken we de grens? Waarom zou je JPG&#39;jes wel in je browser laten openen, maar PDF&#39;jes niet? Als browsers straks zelf video&#39;s af kunnen spelen, worden ze dan gezien als downloads, of niet?&lt;/p&gt;
  17856. </content>
  17857.  </entry>
  17858.  <entry>
  17859.    <title>Lancering Fronteers Vacaturebank</title>
  17860.    <link href="https://www.fronteers.nl/nl/blog/2008/11/lancering-vacaturebank"/>
  17861.    <updated>2008-11-14T00:00:00Z</updated>
  17862.    <id>https://www.fronteers.nl/nl/blog/2008/11/lancering-vacaturebank</id>
  17863.    <content xml:lang="nl" type="html">&lt;p&gt;Vanaf vandaag is de &lt;a href=&quot;https://www.fronteers.nl/vacaturebank&quot;&gt;Fronteers Vacaturebank&lt;/a&gt; voor iedereen open. In de afgelopen maanden hebben we de interesse gemeten en feedback van bedrijven verzameld. In de komende maanden hopen we, ondanks de kredietcrisis, een aantal mooie vacatures te mogen plaatsen, die zich met name op front-end web development richten.&lt;/p&gt;
  17864. &lt;p&gt;Alle begin is moeilijk, maar we hebben 2 bedrijven gevonden die met ons van start willen gaan. Of beter gezegd; 2 bedrijven die op dit moment een vacature hebben, vonden ons en hebben contact gezocht. Hopelijk kunnen we Yes2Web uit Delft en Tappan Communicatie uit Den Haag snel aan de juiste mensen helpen. Ze zoeken respectievelijk een &lt;a href=&quot;https://www.fronteers.nl/vacaturebank/front-end-webdeveloper-yes2web&quot;&gt;Front-end Webdeveloper&lt;/a&gt; en een &lt;a href=&quot;https://www.fronteers.nl/vacaturebank/junior-webdeveloper-tappan&quot;&gt;Junior Webdeveloper&lt;/a&gt;.&lt;/p&gt;
  17865. &lt;p&gt;De Vacaturebank bevatte al een tijdje enkele vacatures van onze &lt;a href=&quot;https://www.fronteers.nl/congres&quot;&gt;congres&lt;/a&gt; sponsoren. Helaas zijn deze niet allemaal gevuld, maar hopelijk kunnen we door meer bekendheid en promotie van de Vacaturebank vanaf nu wat meer mensen bereiken. Dus, ken je iemand die nog op zoek is, ben je misschien zelf op zoek naar een andere baan, of wil je dat onzekere freelance leven eindelijk vaarwel zeggen? Neem eens een kijkje bij de &lt;a href=&quot;https://www.fronteers.nl/vacaturebank&quot;&gt;Fronteers Vacaturebank&lt;/a&gt;.&lt;/p&gt;
  17866. &lt;p&gt;Natuurlijk houden we je ook op de hoogte &lt;a href=&quot;http://feeds.feedburner.com/FronteersVacaturebank&quot;&gt;per RSS&lt;/a&gt; en kun je &lt;a href=&quot;https://www.fronteers.nl/vacaturebank#per-mail&quot;&gt;je e-mailadres achterlaten&lt;/a&gt;, zodat je nieuwe vacatures rechtstreeks in je mailbox ontvangt.&lt;/p&gt;
  17867. &lt;p&gt;Tot slot; voor bedrijven die ook graag een vacature willen plaatsen, hebben we &lt;a href=&quot;https://www.fronteers.nl/vacaturebank/vacature-toevoegen&quot;&gt;enkele voorwaarden&lt;/a&gt; opgesteld.&lt;/p&gt;
  17868. </content>
  17869.  </entry>
  17870.  <entry>
  17871.    <title>Herinnering: bijeenkomst op 13 november</title>
  17872.    <link href="https://www.fronteers.nl/nl/blog/2008/11/herinnering-bijeenkomst-november"/>
  17873.    <updated>2008-11-10T00:00:00Z</updated>
  17874.    <id>https://www.fronteers.nl/nl/blog/2008/11/herinnering-bijeenkomst-november</id>
  17875.    <content xml:lang="nl" type="html">&lt;p&gt;Voor iedereen dit het gemist heeft, of die nog twijfelt: aanstaande donderdag organiseert SWIS een bijeenkomst in Leiden.&lt;/p&gt;
  17876. &lt;p&gt;De tijd vliegt: Aangezien we volgende maand op bezoek zullen zijn bij Concept7 in het noorden van het land, zal dit alweer de laatste bijeenkomst van het jaar in de Randstad zijn. Komt dus allen! Zie voor meer informatie &lt;a href=&quot;https://www.fronteers.nl/blog/2008/11/bijeenkomst-november&quot;&gt;de agenda&lt;/a&gt; en &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;meld je aan&lt;/a&gt;.&lt;/p&gt;
  17877. &lt;p&gt;Lenny de Rooy, usability consultant bij Tribal Internet Marketing, zal een presentatie geven over het gebruiksvriendelijk maken van websites. Tijdens de presentatie zullen concrete tips worden gegeven waarmee je ervoor kunt zorgen dat bezoekers makkelijker hun weg kunnen vinden en de website beter zal renderen. De tips hebben betrekking op uiteenlopende aspecten, zodat de navigatie, teksten, formulieren, de zoekfunctie en het bestelproces, en zullen worden toegelicht aan de hand van diverse praktijkvoorbeelden.&lt;/p&gt;
  17878. &lt;p&gt;Kamiel Wanrooij van EveryWeb Solutions zal samen met een collega een introductie geven van beperkingen die mensen kunnen hebben bij het gebruik van websites, en de meest gemaakte fouten en oplossingen hiervoor behandelen om deze doelgroep het gebruik van de website zo makkelijk mogelijk te maken. Dit doen ze door de deelnemers een beeld te geven van hoe een internetgebruiker met een (visuele) handicap een aantal websites ervaart.&lt;/p&gt;
  17879. &lt;p&gt;Tot donderdag!&lt;/p&gt;
  17880. </content>
  17881.  </entry>
  17882.  <entry>
  17883.    <title>Aanpassing Normdocument Webrichtlijnen</title>
  17884.    <link href="https://www.fronteers.nl/nl/blog/2008/11/aanpassing-normdocument-webrichtlijnen"/>
  17885.    <updated>2008-11-07T00:00:00Z</updated>
  17886.    <id>https://www.fronteers.nl/nl/blog/2008/11/aanpassing-normdocument-webrichtlijnen</id>
  17887.    <content xml:lang="nl" type="html">&lt;p&gt;In de praktijk blijkt het soms een onhaalbare opgave om een bestaande website volledig in overeenstemming met de Webrichtlijnen te brengen. Dat doet zich met name voor bij hele grote websites of websites met heel veel oude content. De kosten die verbonden zijn aan het aanpassen van dergelijke oude content kunnen dan in de praktijk te hoog zijn. Een officiële toets door een van de inspectie-instellingen van de Stichting Waarmerk drempelvrij zal in de huidige situatie daarom altijd negatief uitpakken.&lt;/p&gt;
  17888. &lt;p&gt;Om aan dit bezwaar tegemoet te komen overweegt de &lt;a href=&quot;http://www.drempelvrij.nl/stichting&quot;&gt;Normcommissie van de Stichting Waarmerk drempelvrij&lt;/a&gt; een aanpassing van zogenoemde &lt;a href=&quot;http://www.drempelvrij.nl/webrichtlijnen&quot;&gt;Normdocument Webrichtlijnen caesura en sampling&lt;/a&gt;. Voordat daartoe wordt overgegaan zou de Normcommissie hierover graag reacties ‘uit het veld’ horen.&lt;/p&gt;
  17889. &lt;p&gt;Het gaat om de volgende toevoeging aan het Normdocument Webrichtlijnen caesura en sampling:&lt;/p&gt;
  17890. &lt;p&gt;Bij bestaande grote websites kan er soms voor worden gekozen bestaande pagina’s niet in overeenstemming met het Normdocument Webrichtlijnen te brengen.
  17891. Dergelijke pagina’s kunnen op verzoek van de eigenaar van de website buiten de sample worden gelaten mits:&lt;/p&gt;
  17892. &lt;ol&gt;
  17893. &lt;li&gt;De website aantoonbaar eerder online was dan de datum van vaststelling van het Normdocument (20 juli 2007).&lt;/li&gt;
  17894. &lt;li&gt;Onmiskenbaar op de site wordt aangegeven dat pagina’s, die voor een vastgelegde cesuurdatum online zijn geplaatst, niet in overeenstemming met het Normdocument zijn en deze pagina’s als zodanig herkenbaar zijn.&lt;/li&gt;
  17895. &lt;li&gt;Pagina’s, die na die cesuurdatum online zijn geplaatst, wel in overeenstemming met het Normdocument zijn.&lt;/li&gt;
  17896. &lt;/ol&gt;
  17897. &lt;p&gt;Het komt er in het kort dus op neer dat oude pagina’s onder bepaalde omstandigheden buiten de sample bij de toetsing aan de Webrichtlijnen kunnen worden gelaten (de sample is de steekproef van pagina’s die door de inspectie-instelling worden getoetst.)
  17898. Nieuwe pagina’s (dus na een door de webeigenaar zelf aangegeven datum) moeten er wel aan voldoen.&lt;/p&gt;
  17899. </content>
  17900.  </entry>
  17901.  <entry>
  17902.    <title>Webrichtlijn 59 t/m 62: Links naar e-mailadressen</title>
  17903.    <link href="https://www.fronteers.nl/nl/blog/2008/11/webrichtlijnen-emailadressen"/>
  17904.    <updated>2008-11-04T00:00:00Z</updated>
  17905.    <id>https://www.fronteers.nl/nl/blog/2008/11/webrichtlijnen-emailadressen</id>
  17906.    <content xml:lang="nl" type="html">&lt;p&gt;Links naar e-mailadressen: het e-mailadres waaraan het te versturen bericht is gericht dient zichtbaar te zijn in de linktekst. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/email-adressen/#r-pd-8-16&quot;&gt;R-pd.8.16&lt;/a&gt;) Links naar e-mailadressen: de URL in het href attribuut van een link naar een e-mailadres, mag alleen het mailto protocol en een e-mailadres bevatten. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/email-adressen/#r-pd-8-17&quot;&gt;R-pd.8.17&lt;/a&gt;) Pas geen technische maatregelen toe op de website om een e-mailadres te verhullen voor spam robots. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/email-adressen/#r-pd-8-18&quot;&gt;R-pd.8.18&lt;/a&gt;) Ga uiterst voorzichtig om met het publiceren van e-mailadressen van bezoekers van de website. Informeer de bezoeker over welke gegevens worden gepubliceerd op de site, of publiceer het e-mailadres van de bezoeker niet. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/email-adressen/#r-pd-8-19&quot;&gt;R-pd.8.19&lt;/a&gt;)&lt;/p&gt;
  17907. &lt;p&gt;Ondanks dat het niet mag: welke hacks/trucjes gebruik jij om e-mailadressen in links &amp;quot;onbereikbaar&amp;quot; te maken voor spambots?&lt;/p&gt;
  17908. &lt;p&gt;Een probleem met contactformulieren is dat het voor de bezoeker vaak niet duidelijk is naar wie dit formulier verzonden wordt en wat er onder water dus allemaal gebeurt. Hoe ga je om met dit probleem?&lt;/p&gt;
  17909. &lt;p&gt;Een ander probleem met (contact)formulieren is dat (spam)robots deze ook automatisch invullen, en zo dus alsnog je inbox vervuilen. Ook bij gastenboeken of reactieformulieren komt dit veel voor. Hoe ga je hier mee om?&lt;/p&gt;
  17910. </content>
  17911.  </entry>
  17912.  <entry>
  17913.    <title>Bijeenkomst op 13 november, in Leiden</title>
  17914.    <link href="https://www.fronteers.nl/nl/blog/2008/11/bijeenkomst-november"/>
  17915.    <updated>2008-11-03T00:00:00Z</updated>
  17916.    <id>https://www.fronteers.nl/nl/blog/2008/11/bijeenkomst-november</id>
  17917.    <content xml:lang="nl" type="html">&lt;p&gt;Volgende week donderdag gaan we op bezoek bij &lt;a href=&quot;http://www.swis.nl/&quot;&gt;SWIS&lt;/a&gt;, in leiden.&lt;/p&gt;
  17918. &lt;p&gt;Het programma ziet er als volgt uit:&lt;/p&gt;
  17919. &lt;ul&gt;
  17920. &lt;li&gt;18.30 uur: Inloop&lt;/li&gt;
  17921. &lt;li&gt;19.30 uur: &lt;em&gt;Demo toegankelijkheid m.b.v. screenreader&lt;/em&gt;, door Kamiel Wanrooij van &lt;a href=&quot;http://everywebsolutions.nl/&quot;&gt;EveryWeb Solutions&lt;/a&gt;&lt;/li&gt;
  17922. &lt;li&gt;20.30 uur: &lt;em&gt;Usability tips &amp;amp; tricks&lt;/em&gt;, door Lenny de Rooy, Usability Consultant bij &lt;a href=&quot;http://www.tribal-im.nl/&quot;&gt;Tribal Internet Marketing&lt;/a&gt;&lt;/li&gt;
  17923. &lt;li&gt;21.30 uur: Afsluiting, discussies, networking &amp;amp; bier&lt;/li&gt;
  17924. &lt;/ul&gt;
  17925. &lt;p&gt;SWIS bevindt zich op een kleine tien minuten lopen van Leiden Centraal Station. De &lt;a href=&quot;http://www.swis.nl/contact/adres_en_route&quot;&gt;volledige routebeschrijving&lt;/a&gt; staat online.&lt;/p&gt;
  17926. &lt;p&gt;Lenny de Rooy, usability consultant bij Tribal Internet Marketing, zal een presentatie geven over het gebruiksvriendelijk maken van websites. Tijdens de presentatie zullen concrete tips worden gegeven waarmee je ervoor kunt zorgen dat bezoekers makkelijker hun weg kunnen vinden en de website beter zal renderen. De tips hebben betrekking op uiteenlopende aspecten, zodat de navigatie, teksten, formulieren, de zoekfunctie en het bestelproces, en zullen worden toegelicht aan de hand van diverse praktijkvoorbeelden.&lt;/p&gt;
  17927. &lt;p&gt;Kamiel Wanrooij van EveryWeb Solutions zal samen met een collega een introductie geven van beperkingen die mensen kunnen hebben bij het gebruik van websites, en de meest gemaakte fouten en oplossingen hiervoor behandelen om deze doelgroep het gebruik van de website zo makkelijk mogelijk te maken. Dit doen ze door de deelnemers een beeld te geven van hoe een internetgebruiker met een (visuele) handicap een aantal websites ervaart.&lt;/p&gt;
  17928. &lt;p&gt;Zoals gebruikelijk is deze bijeenkomst toegankelijk voor zowel leden als niet-leden. Dus, &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;meld je aan&lt;/a&gt;.&lt;/p&gt;
  17929. &lt;p&gt;Tot volgende week!&lt;/p&gt;
  17930. </content>
  17931.  </entry>
  17932.  <entry>
  17933.    <title>Herinnering: bijeenkomst op 16 oktober</title>
  17934.    <link href="https://www.fronteers.nl/nl/blog/2008/10/herinnering-bijeenkomst-oktober"/>
  17935.    <updated>2008-10-13T00:00:00Z</updated>
  17936.    <id>https://www.fronteers.nl/nl/blog/2008/10/herinnering-bijeenkomst-oktober</id>
  17937.    <content xml:lang="nl" type="html">&lt;p&gt;Voor iedereen dit het gemist heeft, of die nog twijfelt: aanstaande donderdag organiseert Mangrove een bijeenkomst in Rotterdam.&lt;/p&gt;
  17938. &lt;p&gt;Met zo&#39;n 50 aanmeldingen belooft het al redelijk druk/gezellig te worden. Zie voor meer informatie &lt;a href=&quot;https://www.fronteers.nl/blog/2008/09/bijeenkomst-oktober&quot;&gt;de agenda&lt;/a&gt; en &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;meld je aan&lt;/a&gt;.&lt;/p&gt;
  17939. &lt;p&gt;Tot donderdag!&lt;/p&gt;
  17940. </content>
  17941.  </entry>
  17942.  <entry>
  17943.    <title>Webrichtlijn 55 &amp;amp; 56: Links voor seriële navigatie</title>
  17944.    <link href="https://www.fronteers.nl/nl/blog/2008/10/webrichtlijnen-seriele-navigatie"/>
  17945.    <updated>2008-10-07T00:00:00Z</updated>
  17946.    <id>https://www.fronteers.nl/nl/blog/2008/10/webrichtlijnen-seriele-navigatie</id>
  17947.    <content xml:lang="nl" type="html">&lt;p&gt;Geef blinde bezoekers extra mogelijkheden om lange lijsten met links over te slaan. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/seriele-navigatie/#r-pd-8-12&quot;&gt;R-pd.8.12&lt;/a&gt;) Geef boven aan pagina’s met veel onderwerpen een pagina-index met links om naar de verschillende onderwerpen te navigeren. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/seriele-navigatie/#r-pd-8-13&quot;&gt;R-pd.8.13&lt;/a&gt;)&lt;/p&gt;
  17948. &lt;p&gt;Mogelijkheden om &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/seriele-navigatie/#lange-lijsten-overslaan&quot;&gt;lange lijsten met links over te slaan&lt;/a&gt;?! Horen die niet gewoon thuis in de screenreader software die men gebruikt? En wat is &lt;em&gt;lang&lt;/em&gt;?&lt;/p&gt;
  17949. &lt;p&gt;Met &#39;skiplinks&#39; aan het begin van een document kan ik nog leven, net als met de &#39;back to top&#39; links (hoewel die &lt;a href=&quot;http://stijlgids.overheid.nl/actueel/weblog/rapport_usability_onderzoek_stijlgids/&quot;&gt;volgens sommige rapporten&lt;/a&gt; toch niet gebruikt worden, zie pagina 26 &amp;amp; 60). Maar soms gaat het te ver.&lt;/p&gt;
  17950. &lt;p&gt;Wat jullie?&lt;/p&gt;
  17951. </content>
  17952.  </entry>
  17953.  <entry>
  17954.    <title>Bijeenkomst op 16 oktober, in Rotterdam</title>
  17955.    <link href="https://www.fronteers.nl/nl/blog/2008/09/bijeenkomst-oktober"/>
  17956.    <updated>2008-09-24T00:00:00Z</updated>
  17957.    <id>https://www.fronteers.nl/nl/blog/2008/09/bijeenkomst-oktober</id>
  17958.    <content xml:lang="nl" type="html">&lt;p&gt;Nu we allemaal weer hersteld zijn van het congres, gaan we verder met de orde van de dag. Voor iedereen die nog steeds niet genoeg heeft gekregen van zijn of haar collega&#39;s en ons vak, organiseert &lt;a href=&quot;http://www.mangrove.nl/&quot;&gt;Mangrove&lt;/a&gt; op donderdag 16 oktober weer een bijeenkomst, in Rotterdam.&lt;/p&gt;
  17959. &lt;p&gt;Het programma ziet er als volgt uit:&lt;/p&gt;
  17960. &lt;ul&gt;
  17961. &lt;li&gt;18.30 uur: Inloop&lt;/li&gt;
  17962. &lt;li&gt;19.30 uur: &lt;em&gt;The web&#39;s hidden agenda&lt;/em&gt;, door Wietse Hage, co-founder en front-end developer bij Milq Media&lt;/li&gt;
  17963. &lt;li&gt;20.30 uur: &lt;em&gt;Frameworks killed the front-end star&lt;/em&gt;, door Joris Verbogt, developer bij Mangrove en Ruben Bos, front-end developer bij Mangrove&lt;/li&gt;
  17964. &lt;li&gt;21.30 uur: Afsluiting, discussies, networking &amp;amp; bier&lt;/li&gt;
  17965. &lt;/ul&gt;
  17966. &lt;p&gt;Volgens Ruben twee mooie presentaties, die beide in het teken staan van toekomstige ontwikkelingen in ons vakgebied en veel discussie teweeg zullen gaan brengen. Kom dus ook naar &lt;a href=&quot;http://mangrove.nl/index.php?pageID=1700&quot;&gt;Mangrove&lt;/a&gt; de 16e!&lt;/p&gt;
  17967. &lt;p&gt;Zoals gebruikelijk is deze bijeenkomst toegankelijk voor zowel leden als niet-leden, en dien je je even &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;aan te melden&lt;/a&gt;, zodat ze bij Mangrove weten hoeveel biervaten er ingeslagen moeten worden.&lt;/p&gt;
  17968. </content>
  17969.  </entry>
  17970.  <entry>
  17971.    <title>Webrichtlijn 52 &amp;amp; 53: Tabben tussen links</title>
  17972.    <link href="https://www.fronteers.nl/nl/blog/2008/09/webrichtlijnen-tabben"/>
  17973.    <updated>2008-09-23T00:00:00Z</updated>
  17974.    <id>https://www.fronteers.nl/nl/blog/2008/09/webrichtlijnen-tabben</id>
  17975.    <content xml:lang="nl" type="html">&lt;p&gt;Voorzie in een logische volgorde van de links op de pagina. Gebruik het tabindex attribuut om van de standaard tabvolgorde van links af te wijken wanneer deze volgorde niet toereikend is voor correct gebruik van de pagina door toetsenbordgebruikers. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/tabben/#r-pd-8-9&quot;&gt;R-pd.8.9&lt;/a&gt;) Maak het tabben naar links niet onmogelijk. Verwijder niet de focus rectangle rondom een link of de mogelijkheid tot focus op een link. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/tabben/#r-pd-8-10&quot;&gt;R-pd.8.10&lt;/a&gt;)&lt;/p&gt;
  17976. &lt;p&gt;Wanneer gebruik jij het &lt;code&gt;tabindex&lt;/code&gt; attribuut? Is onderstaande code een goede case, omdat gebruikers misschien verwachten dat je na je gebruikersnaam kunt tabben naar je wachtwoord? Of zou je de volgorde van de markup wijzigen?&lt;/p&gt;
  17977. &lt;pre&gt;&lt;code&gt;&amp;lt;p&amp;gt;
  17978. &amp;lt;label for=&amp;quot;user&amp;quot;&amp;gt;Gebruikersnaam:&amp;lt;/label&amp;gt;
  17979. &amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;user&amp;quot; id=&amp;quot;user&amp;quot; tabindex=&amp;quot;1&amp;quot;&amp;gt;
  17980. &amp;lt;/p&amp;gt;
  17981. &amp;lt;p&amp;gt;
  17982. &amp;lt;label for=&amp;quot;pass&amp;quot;&amp;gt;Wachtwoord:&amp;lt;/label&amp;gt;
  17983. (&amp;lt;a href=&amp;quot;/wachtwoord-vergeten&amp;quot; tabindex=&amp;quot;3&amp;quot;&amp;gt;vergeten?&amp;lt;/a&amp;gt;)
  17984. &amp;lt;input type=&amp;quot;password&amp;quot; name=&amp;quot;pass&amp;quot; id=&amp;quot;pass&amp;quot; tabindex=&amp;quot;2&amp;quot;&amp;gt;
  17985. &amp;lt;/p&amp;gt;
  17986. &lt;/code&gt;&lt;/pre&gt;
  17987. &lt;p&gt;Begrijp jij nog welke waardes je het attribuut mag geven? &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/tabben/&quot;&gt;Tussen 1 en 32768?&lt;/a&gt; &lt;a href=&quot;http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex&quot;&gt;Tussen 0 and 32767?&lt;/a&gt; &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/editing.html#tabindex&quot;&gt;Of ook negatieve waardes?&lt;/a&gt;&lt;/p&gt;
  17988. &lt;p&gt;Hoeveel designers en/of opdrachtgevers en/of marketingafdelingen willen de &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/tabben/#focus-rectangle&quot;&gt;focus rectangle&lt;/a&gt; nog steeds niet accepteren? Ga je de discussie aan, of geef je toe en doe je &lt;code&gt;:focus { outline: none; }&lt;/code&gt; of iets wat erop lijkt? Of het nog mooiere &lt;code&gt;onfocus=&amp;quot;this.blur()&amp;quot;&lt;/code&gt; en equivalenten?&lt;/p&gt;
  17989. &lt;p&gt;En is dit alles wel ons probleem? Moeten we gebruikers die graag met het toetsenbord door een site navigeren niet gewoon uitleggen hoe &lt;a href=&quot;http://en.wikipedia.org/wiki/Spatial_navigation&quot;&gt;spatial navigation&lt;/a&gt; werkt?&lt;/p&gt;
  17990. &lt;p&gt;Of kunnen we niet gewoon &lt;a href=&quot;http://www.sitepen.com/blog/2008/09/22/accessibility-experiment/&quot;&gt;een site compleet opnieuw maken&lt;/a&gt;? Eentje speciaal voor gebruikers die graag tabben?&lt;/p&gt;
  17991. </content>
  17992.  </entry>
  17993.  <entry>
  17994.    <title>Help mee het Fronteers 2009 congres te organiseren!</title>
  17995.    <link href="https://www.fronteers.nl/nl/blog/2008/09/organisatie-fronteers-2009"/>
  17996.    <updated>2008-09-20T00:00:00Z</updated>
  17997.    <id>https://www.fronteers.nl/nl/blog/2008/09/organisatie-fronteers-2009</id>
  17998.    <content xml:lang="nl" type="html">&lt;p&gt;Hoewel we nog druk bezig zijn met de laatste restjes afronding van Fronteers 2008 - waarvan overigens &lt;a href=&quot;https://www.fronteers.nl/congres/2008/slides&quot;&gt;de slides&lt;/a&gt; nu grotendeels online staan, en &lt;a href=&quot;http://www.bachelor-ict.nl/fronteers08&quot;&gt;video&#39;s vanaf 3 oktober zullen gaan verschijnen&lt;/a&gt; - is de realiteit van het organiseren van een congres dat eigenlijk &lt;em&gt;nu&lt;/em&gt; al begonnen moet worden met nadenken over het congres van volgend jaar.&lt;/p&gt;
  17999. &lt;p&gt;Een buitengewoon groot deel van de organisatie van Fronteers 2008 heeft in de handen van Peter-Paul Koch gelegen. Zoals ook op de ALV is genoemd is de hoeveelheid tijd die dit hem heeft gekost niet voor herhaling vatbaar. We zijn nu dus ook naarstig op zoek naar mensen die zich volledig willen inzetten voor de organisatie van het congres van volgend jaar, waarbij zeker een voorzitter die het voortouw wil nemen met het trekken van het hele traject met open armen zal worden ontvangen.&lt;/p&gt;
  18000. &lt;p&gt;Gelukkig zal het wiel niet opnieuw uitgevonden moeten gaan worden, en er zal een draaiboek aanwezig gaan zijn (in ieder geval in eerste opzet) aan de hand waarvan de organisatie aangepakt kan worden. Tevens zal Peter-Paul betrokken zijn bij de commissie om zijn ervaringen en kennis te delen. Toch zal er nog steeds een flinke hoeveelheid werk verzet moeten worden om wederom een congres van hetzelfde wereldformaat als Fronteers 2008 neer te zetten, en natuurlijk zijn er ook verbeterpunten waar aandacht aan besteed zal moet worden (met de marketing van het congres bovenaan de lijst).&lt;/p&gt;
  18001. &lt;p&gt;Lijkt het jou wel wat om &amp;quot;mede-organisator van Fronteers 2009&amp;quot; op je CV te kunnen zetten? Om de beste front-enders ter wereld samen te brengen hier in Nederland? Om in een enthousiast team te werken aan het opzetten van een wederom geweldig congres? &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/congres&quot;&gt;Meld je dan nu aan voor de congres commissie!&lt;/a&gt;&lt;/p&gt;
  18002. </content>
  18003.  </entry>
  18004.  <entry>
  18005.    <title>Commissie Marketing zoekt leden</title>
  18006.    <link href="https://www.fronteers.nl/nl/blog/2008/09/commissie-marketing-zoekt-leden"/>
  18007.    <updated>2008-09-17T00:00:00Z</updated>
  18008.    <id>https://www.fronteers.nl/nl/blog/2008/09/commissie-marketing-zoekt-leden</id>
  18009.    <content xml:lang="nl" type="html">&lt;p&gt;Tijdens de algemene ledenvergadering bleek dat er vanuit het bestuur en vanuit de vereniging behoefte was om Fronteers meer te promoten. Vanuit dat idee is besloten de commissie marketing op te richten. Voor deze commissie zoeken wij nu leden, die zich samen willen inzetten voor meer bekendheid voor Fronteers en nieuwe communicatie- en promotiemogelijkheden te bedenken.&lt;/p&gt;
  18010. &lt;p&gt;Met de mensen die zich aanmelden willen we samen de doelstellingen van de commissie opstellen en die in het komende jaar bereiken. De doelstellingen waar we momenteel aan denken zijn: Fronteers onder verschillende groepen bekender maken, de status van &amp;quot;Fronteers-lid&amp;quot; te verhogen, en meer leden te werven. De verwachting is dat deze commissie veel samen zal gaan werken met de commissie online community.&lt;/p&gt;
  18011. &lt;p&gt;Wil je lid worden van deze commissie, stuur dan een email naar &lt;a href=&quot;mailto:marketing@fronteers.nl&quot;&gt;marketing@fronteers.nl&lt;/a&gt; met daarin je motivatie en hoeveel tijd je verwacht beschikbaar te hebben voor de commissie marketing.&lt;/p&gt;
  18012. </content>
  18013.  </entry>
  18014.  <entry>
  18015.    <title>Verslag Fronteers 2008</title>
  18016.    <link href="https://www.fronteers.nl/nl/blog/2008/09/verslag-fronteers-2008"/>
  18017.    <updated>2008-09-16T00:00:00Z</updated>
  18018.    <id>https://www.fronteers.nl/nl/blog/2008/09/verslag-fronteers-2008</id>
  18019.    <content xml:lang="nl" type="html">&lt;p&gt;Twee dagen lang spraken grote (internationale) namen uit de industrie over alles wat met CSS, HTML, JavaScript, zoekmachineoptimalisatie, gebruiksvriendelijkheid en toegankelijkheid te maken heeft. Net als vorig jaar speelde Fronteers 2008 zich af in Pakhuis De Zwijger in Amsterdam. Een (onvolledige) sfeerimpressie:&lt;/p&gt;
  18020. &lt;h2&gt;Fronteers congres 2008: Dag 1&lt;/h2&gt;
  18021. &lt;p&gt;Al bij binnenkomst wijst de hoge concentratie iPhones en laptops erop dat we de goede zaal zijn binnengestapt. Aan CSS-guru Bert Bos de eer om het tweedaagse Fronteers-congres te openen. Bert Bos is een van de uitvinders van CSS (Cascading Style Sheets) en werkt momenteel mee aan de nieuwe CSS3-standaard, die front-end developers van een hoop kleine ergernissen zal verlossen.&lt;/p&gt;
  18022. &lt;h2&gt;Ajax, JavaScript frameworks &amp;amp; goede lunch&lt;/h2&gt;
  18023. &lt;p&gt;Terwijl de eerste paneldiscussie, Webrichtlijnen, opstart, wordt het druk in de grote zaal voor de sessie van Backbase. Toch een beetje Nederlands voorloper als het om Ajax-technologie gaat. Medeoprichter Gerbert Kaandorp demonstreert het (commerciële) backbase-framework en legt uit hoe deze is opgezet en gebruikt kan worden. Een interessante presentatie.&lt;/p&gt;
  18024. &lt;p&gt;Na het vechten om het laatste goed belegde broodje, wordt het tijd voor een veelbelovend middagprogramma! Tom Occhino, core developer aan JavaScript-framework Mootools, luidt het middagprogramma in met zijn keynote over object geörienteerd programmeren met JavaScript. Een interessante en vlotte presentatie, alleen is het jammer dat hij iets teveel tijd uittrekt voor het vergelijken van Mootools met &#39;concurrerende&#39; JavaScript-frameworks.&lt;/p&gt;
  18025. &lt;h2&gt;Video&#39;s zonder flash&lt;/h2&gt;
  18026. &lt;p&gt;De discussies houden maar niet op in de meeting-room,  waar inmiddels Dean Edwards, Stuart Langridge en Chris Heilmann met het publiek discussieren over Javascript. Anne van Kesteren, werkzaam bij Opera en heel actief in de werkgroep HTML5 bij het W3C, geeft een sessie over HTML5 in de grote zaal. Het hoogtepunt van de dag.&lt;/p&gt;
  18027. &lt;p&gt;HTML5 is een nieuwe versie van HTML die voorlopig nog in ontwikkeling is. Anne toont ons onder meer het video-element, één van de laatste toevoegingen aan deze nieuwe HTML-standaard. Hierdoor wordt het mogelijk om video in websites te plaatsen zonder gebruik te maken van technieken zoals flash.&lt;/p&gt;
  18028. &lt;h2&gt;Fronteers-partyboot&lt;/h2&gt;
  18029. &lt;p&gt;De dag wordt afgesloten door Stephen Hay die een goed verhaal vertelt over maintainable CSS. Toch blijven de meningen verdeeld en blijven er verschillende werkwijzes om je CSS te onderhouden. Die discussie gaat &#39;s avonds op de Fronteers-partyboot dan ook tot diep in de nacht rustig verder.&lt;/p&gt;
  18030. &lt;h2&gt;Fronteers congres 2008: Dag 2&lt;/h2&gt;
  18031. &lt;p&gt;De eerste dag bij Fronteers was het elke keer weer raak. In elke zin zat wel een verborgen sneer naar Internet Explorer en met name versie 6. Een hele taak dus voor Pete LePage om de kritische zaal enthousiast te krijgen over Internet Explorer 8. Pete LePage brandt gelijk los over de verbeteringen in Internet Explorer 8, momenteel alleen nog als beta te downloaden. De browser lijkt naast een betere ondersteuning voor moderne (en toekomstige) webstandaarden ook eindelijk de webontwikkelaar serieus te nemen. Ons dus.&lt;/p&gt;
  18032. &lt;h2&gt;Verbeteringen voor developers&lt;/h2&gt;
  18033. &lt;p&gt;Eindelijk is er een developer tool als Firebug ingebouwd, inclusief de mogelijkheid om van rendering engine te switchen. CSS 2.1 wordt ondersteund, client-side storage in HTML5 is opgenomen, er kunnen 6 inplaats van 2 html request tegelijk plaatsvinden en goed afvangen van de backbutton bij AJAX applicaties is eindelijk mogelijk. Ook komt Microsoft met een &lt;a href=&quot;http://msdn.microsoft.com/en-us/library/cc196992.aspx&quot;&gt;Webslice microformat&lt;/a&gt;, waarmee website-onderdelen als widgets aan de bezoeker aangeboden kunnen worden.&lt;/p&gt;
  18034. &lt;h2&gt;Conclusie over IE8?&lt;/h2&gt;
  18035. &lt;p&gt;Mooie dingen, maar er mag ook gezegd worden dat veel verbeteringen al meerdere jaren in andere browsers zijn opgenomen. Van een goede paginasearch onder je CTRL+F-knop worden we niet meer enthousiast. Internet Explorer en ook het ontwikkelteam is serieus aan het worden en dat is mooi voor zowel ontwikkelaars als eindgebruikers.&lt;/p&gt;
  18036. &lt;h2&gt;Maintainable Javascript&lt;/h2&gt;
  18037. &lt;p&gt;Het Yahoo! developers network is lekker bezig. Eerder dit jaar waren veel developers bij Kings of Code al erg onder de indruk van Nate Koechley en dit keer komt Chris Heilmann een hoop nuttige dingen vertellen in de sessie Maintainable Javascript. Chris heeft aardig wat &lt;a href=&quot;http://www.wait-till-i.com/books/&quot;&gt;boeken&lt;/a&gt; en publicaties op zijn naam staan, was Chief Development bij Yahoo! en vervult nu voor Yahoo! de rol van Developer evangelist. Zijn sessie is grappig, helder en geeft een hoop tips om Javascript onderhoudbaar te maken voor anderen. Veel internetbureaus zullen hem dankbaar zijn.&lt;/p&gt;
  18038. &lt;h2&gt;Kiezen tussen Javascript frameworks&lt;/h2&gt;
  18039. &lt;p&gt;In de meetingroom is weer een gezonde discussie gaande over Javascript Frameworks, Mootools (Tom Occhino), Backbase (Gerbert Kaandorp) en Base2 (Dean Edwards) zijn aanwezig. Conclusie van de ontwikkelaars zelf: de frameworks verschillen weinig, maar zorg dat je Javascript en het framework dat je kiest, met name als beginner, ook echt begrijpt.&lt;/p&gt;
  18040. &lt;h2&gt;SEO &amp;amp; Accessibility&lt;/h2&gt;
  18041. &lt;p&gt;De volgende paneldiscussie, &#39;SEO en Accessibility&#39;, gaat over overeenkomsten tussen het toegankelijk maken en voor zoekmachines optimaliseren van websites. Naast Vasilis van Gemert van Mirabeau is de sympatieke Brit &lt;a href=&quot;http://www.brucelawson.co.uk/&quot;&gt;Bruce Lawson&lt;/a&gt; aanwezig. In de discussie wordt onder andere de nieuwe &lt;a href=&quot;http://www.w3.org/TR/wai-aria/&quot;&gt;WAI-ARIA standaard&lt;/a&gt; genoemd, een W3C specificatie voor het ontwikkelen van toegankelijke Rich Internet Applications.&lt;/p&gt;
  18042. &lt;p&gt;Dan is het tijd voor de toegift van Fronteers 2008, Andy Clarke, die als een ‘Liam Galagher’ over de mogelijkheden van CSS positioning begint te zingen. Te gekke dingen, maar het merendeel lijkt meer geschikt als inspiratie dan realistische en onderhoudbare oplossingen.&lt;/p&gt;
  18043. &lt;p&gt;Het congres was een succes. Wat was volgens jullie de beste sessie van deze editie?&lt;/p&gt;
  18044. &lt;p&gt;&lt;em&gt;Ruben Bos is auteur van &lt;a href=&quot;http://www.webdesignrules.nl/&quot;&gt;Webdesign Rules!&lt;/a&gt; en werkt als front-end developer bij &lt;a href=&quot;http://www.mangrove.nl/&quot;&gt;Mangrove&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;
  18045. </content>
  18046.  </entry>
  18047.  <entry>
  18048.    <title>Webrichtlijnen zoekt proefkonijnen</title>
  18049.    <link href="https://www.fronteers.nl/nl/blog/2008/09/webrichtlijnen-zoekt-proefkonijnen"/>
  18050.    <updated>2008-09-15T00:00:00Z</updated>
  18051.    <id>https://www.fronteers.nl/nl/blog/2008/09/webrichtlijnen-zoekt-proefkonijnen</id>
  18052.    <content xml:lang="nl" type="html">&lt;p&gt;Zoals bij menig front-end ontwikkelaar bekend zal zijn, heeft de Nederlandse overheid &lt;a href=&quot;http://webrichtlijnen.nl/&quot;&gt;Webrichtlijnen&lt;/a&gt; ontwikkeld. Voor toegankelijke, snelle en beter te onderhouden websites, zullen alle websites van de Rijksoverheid eind 2010 aan deze Webrichtlijnen moeten voldoen.&lt;/p&gt;
  18053. &lt;p&gt;Momenteel wordt een stappenplan ontwikkeld om toepassing van deze Webrichtlijnen gemakkelijker te maken, voor zowel de opdrachtgever als opdrachtnemer. Het doel daarvan, is het versterken van het opdrachtgeverschap bij de (door-)ontwikkeling van websites, zodat uiteindelijk de websites aan de Webrichtlijnen voldoen. Het stappenplan wordt in 2008 en 2009 getoetst door een tiental pilots. Mat behulp van de resultaten daarvan, wordt het gebruik van de Webrichtlijnen nog gemakkelijker in de toekomst.&lt;/p&gt;
  18054. &lt;p&gt;Het programma Overheid heeft Antwoord (ICTU) is voor 2008 en 2009 op zoek naar organisaties die binnenkort een nieuwe website bouwen of een bestaande website gaan aanpassen. U komt dan in aanmerking als pilot website. Ons belang daarbij is het beoordelen van de praktische toepasbaarheid van alle stappen in het proces. Als uw webproject geselecteerd wordt, krijgt u gratis begeleiding door een adviseur bij het doorlopen van het proces.&lt;/p&gt;
  18055. &lt;p&gt;Aanmelden als pilot, kan via de &lt;a href=&quot;http://www.advies.overheid.nl/webrichtlijnen-stappenplan-pilot/&quot;&gt;website van de Webrichtlijnen&lt;/a&gt;. Daar is ook meer informatie te vinden, over de criteria waaraan een pilotwebsite moet voldoen.&lt;/p&gt;
  18056. </content>
  18057.  </entry>
  18058.  <entry>
  18059.    <title>Congres en ALV: een eerste terugblik</title>
  18060.    <link href="https://www.fronteers.nl/nl/blog/2008/09/congres-en-alv-een-eerste-terugblik"/>
  18061.    <updated>2008-09-13T00:00:00Z</updated>
  18062.    <id>https://www.fronteers.nl/nl/blog/2008/09/congres-en-alv-een-eerste-terugblik</id>
  18063.    <content xml:lang="nl" type="html">&lt;p&gt;Het succesvolle Fronteers Congres 2008 is helaas al weer achter de rug. We zijn nu druk bezig gedetailleerde verslaggeving te maken, waaronder een overzicht van alle presentaties. De hoofdsessies van vrijdag zijn op film gezet en verschijnen binnenkort op fronteers.nl. Natuurlijk kun je nu al terugblikken via bijvoorbeeld &lt;a href=&quot;http://www.flickr.com/photos/tags/fronteers2008/&quot;&gt;Flickr&lt;/a&gt;, &lt;a href=&quot;http://technorati.com/search/fronteers2008?authority=n&amp;amp;language=n&quot;&gt;Technorati&lt;/a&gt; of &lt;a href=&quot;http://delicious.com/search?p=forfronteers08&quot;&gt;delicious&lt;/a&gt;.&lt;/p&gt;
  18064. &lt;p&gt;De gerenommeerde sprekers, van Bert Bos tot Dean Edwards, trokken veel mensen naar het Fronteers Congres. Veel bezoekers zijn direct met het kopen van hun kaartje lid geworden van Fronteers. Mede daardoor heeft onze vereniging momenteel 125 leden!&lt;/p&gt;
  18065. &lt;p&gt;Helaas was het congres niet uitverkocht. Gebrek aan marketing is hiervoor waarschijnlijk de voornaamste reden. Sowieso hebben we de conclusie getrokken dat Fronteers wel meer op de voorgrond mag treden. Op de gisteravond gehouden ALV is op initiatief van de leden daarom een commissie &lt;em&gt;Marketing&lt;/em&gt; opgericht. Kilian Valkhof heeft het voorzitterschap op zich genomen.&lt;/p&gt;
  18066. &lt;p&gt;Ook de ALV was een succes. 25 leden waren aanwezig en zij stemden unaniem Sander van Lambalgen, Krijn Hoetmer en Peter-Paul Koch in het bestuur. Binnenkort verschijnt van de ALV een gedetailleerd verslag op fronteers.nl.&lt;/p&gt;
  18067. </content>
  18068.  </entry>
  18069.  <entry>
  18070.    <title>Fronteers 2008 van start</title>
  18071.    <link href="https://www.fronteers.nl/nl/blog/2008/09/fronteers-2008-van-start"/>
  18072.    <updated>2008-09-11T00:00:00Z</updated>
  18073.    <id>https://www.fronteers.nl/nl/blog/2008/09/fronteers-2008-van-start</id>
  18074.    <content xml:lang="nl" type="html">&lt;p&gt;Vandaag is De Dag; vanaf 08:00 uur verzamelen Nederlandse front-end professionals zich bij &lt;a href=&quot;https://www.fronteers.nl/congres/2008/locatie&quot;&gt;Pakhuis De Zwijger&lt;/a&gt; om &lt;a href=&quot;https://www.fronteers.nl/congres/2008/schedule&quot;&gt;een tiental presentaties en een zestal panels&lt;/a&gt; van vooraanstaande nationale en internationale specialisten op het gebied van CSS, JavaScript, toegankelijkheid, SEO, professionalisering en de &lt;a href=&quot;http://webrichtlijnen.overheid.nl/&quot;&gt;Webrichtlijnen&lt;/a&gt; bij te wonen.&lt;/p&gt;
  18075. &lt;p&gt;Aangezien er nog enige kaartjes beschikbaar zijn, hebben we ervoor gezorgd dat je zowel vandaag als morgen een kaartje aan de ingang kunt kopen. Vandaag (donderdag) kost dat 250 euro, morgen (vrijdag) kost het 150 euro. Let op: aan de deur geldt geen Fronteers ledenkorting. Deze kaartverkoop loopt via het online systeem (credit card of iDeal). We nemen geen contant geld aan.&lt;/p&gt;
  18076. &lt;p&gt;Op = op; als we uitverkocht zijn, krijg je helaas geen toegang meer. Vroeg komen is dus beter dan laat komen.&lt;/p&gt;
  18077. &lt;p&gt;Wellicht zien we enige van jullie straks of morgen op het congres.&lt;/p&gt;
  18078. </content>
  18079.  </entry>
  18080.  <entry>
  18081.    <title>Algemene Ledenvergadering Fronteers 2008</title>
  18082.    <link href="https://www.fronteers.nl/nl/blog/2008/09/alv-agenda"/>
  18083.    <updated>2008-09-09T00:00:00Z</updated>
  18084.    <id>https://www.fronteers.nl/nl/blog/2008/09/alv-agenda</id>
  18085.    <content xml:lang="nl" type="html">&lt;p&gt;Aanstaande donderdag en vrijdag vindt het Fronteers Congres 2008 plaats. Op vrijdagavond, aansluitend op het congres, vindt de jaarlijkse algemene ledenvergadering (ALV) van Fronteers plaats. Alle leden zijn hiervoor van harte uitgenodigd.&lt;/p&gt;
  18086. &lt;p&gt;De ALV heeft plaats op vrijdag 12 september in &lt;a href=&quot;http://www.dezwijger.nl/&quot;&gt;Pakhuis de Zwijger&lt;/a&gt;, van 19.00 tot 21.00 uur. De ALV wordt net als vorig jaar voorgezeten door Koen Willems.&lt;/p&gt;
  18087. &lt;p&gt;Agenda:&lt;/p&gt;
  18088. &lt;ol&gt;
  18089. &lt;li&gt;Welkom en opening door de voorzitter&lt;/li&gt;
  18090. &lt;li&gt;Toelichting commissies&lt;/li&gt;
  18091. &lt;li&gt;Toelichting op niet-ingevulde commissies&lt;/li&gt;
  18092. &lt;li&gt;Ingebrachte beleidsvoorstellen&lt;/li&gt;
  18093. &lt;li&gt;Begroting 2009&lt;/li&gt;
  18094. &lt;li&gt;Kascommissieverkiezing&lt;/li&gt;
  18095. &lt;li&gt;Bestuursverkiezing&lt;/li&gt;
  18096. &lt;li&gt;Rondvraag&lt;/li&gt;
  18097. &lt;li&gt;Sluiting&lt;/li&gt;
  18098. &lt;/ol&gt;
  18099. &lt;p&gt;Er zullen 4 beleidsvoorstellen worden ingebracht waarover gestemd moet worden. Deze voorstellen zijn:&lt;/p&gt;
  18100. &lt;p&gt;Voorstel 1:
  18101. Het bestuur reserveert het komende jaar 500 euro voor reiskosten voor de commissie Onderwijs. Het gaat hierbij niet om reiskosten naar vergaderingen, maar om reiskosten van commissieleden die op bezoek gaan bij hogescholen of universiteiten. De voorzitter van deze commissie, Robert Jan Verkade, bepaalt wie wat en hoeveel mag declareren. Mocht hij het maximum van 500 euro bereikt hebben en meer geld nodig hebben, dan dient hij zich weer bij het bestuur te vervoegen.&lt;/p&gt;
  18102. &lt;p&gt;Voorstel 2:
  18103. In de loop van 2009 gaat hopelijk de diplomering lopen. Als we 40 of meer gediplomeerde leden hebben, publiceren we een lijst op Fronteers.nl. (Gediplomeerde niet-leden tellen niet mee, maar worden wel gepubliceerd op fronteers.nl.)&lt;/p&gt;
  18104. &lt;p&gt;Voorstel 3:
  18105. Er wordt een Congrescommissie ingesteld die het Fronteers Congres 2009 gaat organiseren. Deze commissie kan gebruik maken van Peter-Paul Koch&#39;s uitgebreide netwerk, maar Peter-Paul zal geen belangrijke rol in deze commissie op zich nemen. Belangrijkste taken van de commissie: het organiseren én het promoten van het Fronteers Congres 2009. Leden kunnen zich tot en met 31 oktober aanmelden voor deze commissie. Daarna krijgen zij tot 1 januari 2009 de tijd om hun plannen voor de organisatie te ontvouwen. Mocht het bestuur op 1 januari geen vertrouwen hebben in de plannen van deze commissie dan wil het bestuur Voorstel 4 in gang laten treden.&lt;/p&gt;
  18106. &lt;p&gt;Voorstel 4:
  18107. Voor het Congres 2009 komt Peter-Paul Koch met een plan en regelt hij de sprekers. De organisatie en marketing besteden we uit aan een extern bureau. Hiervoor reserveren we 5.000,- euro.&lt;/p&gt;
  18108. &lt;p&gt;Naast de beleidsvoorstellen vinden er ook verkiezingen plaats.&lt;/p&gt;
  18109. &lt;p&gt;Verkiezing 1:
  18110. Er moet een kascommissie gekozen worden die de inkomsten en uitgaven van Fronteers gaat controleren. Gedacht wordt aan 2 personen. Zij mogen geen zitting hebben in het bestuur.&lt;/p&gt;
  18111. &lt;p&gt;Verkiezing 2:
  18112. Peter-Paul Koch treedt af als bestuurslid, en is herkiesbaar. Verder hebben 2 leden zich aangemeld voor het bestuur: Krijn Hoetmer en Sander van Lambalgen. Zij presenteren zich hieronder in het kort. Voor de goede orde: alle drie kandidaten kunnen in het bestuur gekozen worden. Elke kandidaat moet dan 50% van de uitgebrachte stemmen halen. Het huidige bestuur geeft de voorkeur aan een bezetting van 5 man.&lt;/p&gt;
  18113. &lt;blockquote&gt;
  18114. &lt;p&gt;Sinds 27 april 2007 ben ik bij (de oprichtingsplannen van) Fronteers betrokken. Eerst als kat-uit-de-boom-kijker, daarna als ppk-met-zijn-plannen-in-de-gaten-houder in de Commissie Diplomering (waar ik helaas niet veel heb kunnen betekenen; sorry Wilfred), daarna als loze-HTML-commentaarregels-toevoeger aan en CMS-implementeerder-en-hoster van onze website, fronteers.nl, die eind 2007 online ging.&lt;/p&gt;
  18115. &lt;/blockquote&gt;
  18116. &lt;blockquote&gt;
  18117. &lt;p&gt;Ik ben een freelance (ja, nog eentje) web applicatie ontwikkelaar, waarbij mijn verantwoordelijkheden zich meestal uitstrekken langs het hele traject van database architectuur tot het opzetten van de CSS. Het front-end gedeelte van deze werkzaamheden heeft mij altijd het meest aangesproken (vooral complex JavaScript werk), en toen ik begin Juli 2007 voor het eerst hoorde van Fronteers ben ik hier dan ook bijna gelijk bij betrokken geraakt.&lt;/p&gt;
  18118. &lt;/blockquote&gt;
  18119. &lt;p&gt;Het bestuur van Fronteers hoopt jullie aanstaande vrijdag te zien!&lt;/p&gt;
  18120. &lt;p&gt;Met vriendelijke groet,&lt;/p&gt;
  18121. &lt;p&gt;Tom Greuter
  18122. Secretaris Fronteers&lt;/p&gt;
  18123. &lt;p&gt;P.S.
  18124. Als je van plan bent aanwezig te zijn, kun je je &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur#formulier-1&quot;&gt;aanmelden&lt;/a&gt;. Aanmelden is niet verplicht, maar geeft ons enig inzicht in het aantal leden dat van plan is te komen. Thnx!&lt;/p&gt;
  18125. </content>
  18126.  </entry>
  18127.  <entry>
  18128.    <title>Fronteers 2008 - nog 3 dagen</title>
  18129.    <link href="https://www.fronteers.nl/nl/blog/2008/09/fronteers-2008-nog-3-dagen"/>
  18130.    <updated>2008-09-08T00:00:00Z</updated>
  18131.    <id>https://www.fronteers.nl/nl/blog/2008/09/fronteers-2008-nog-3-dagen</id>
  18132.    <content xml:lang="nl" type="html">&lt;p&gt;De voorbereidingen voor &lt;a href=&quot;https://www.fronteers.nl/congres/2008&quot;&gt;Fronteers 2008&lt;/a&gt; zijn zo goed als voltooid. Alle medewerkers, zowel Fronteers vrijwilligers als externe leveranciers, weten wat ze moeten doen, een draaiboek ligt klaar en tot nu toe zijn er geen onaangename verrassingen geweest.&lt;/p&gt;
  18133. &lt;p&gt;We kregen wat vragen over de beschikbaarheid van kaartjes. Derhalve is het goed te vermelden dat we nog niet uitverkocht zijn en dat je nog gewoon een &lt;a href=&quot;https://www.fronteers.nl/congres/2008/kaartverkoop&quot;&gt;kaartje kunt kopen&lt;/a&gt;. Om voor de korting in aanmerking te komen dienen Fronteers leden een kaartje te kopen via de link in de speciale mail die ze hebben ontvangen. (Niet gekregen? &lt;a href=&quot;https://www.fronteers.nl/contact&quot;&gt;Licht ons in&lt;/a&gt;).&lt;/p&gt;
  18134. &lt;p&gt;Inmiddels is ook het &lt;a href=&quot;http://network.fronteers.nl/&quot;&gt;ConfNetwork&lt;/a&gt; online, waar alle bezoekers een login voor hebben gekregen. Heb je geen login gehad? &lt;a href=&quot;http://network.fronteers.nl/editions/2008/user/new&quot;&gt;Meld je dan even aan&lt;/a&gt;.&lt;/p&gt;
  18135. &lt;p&gt;We hopen je donderdag en vrijdag te kunnen begroeten.&lt;/p&gt;
  18136. </content>
  18137.  </entry>
  18138.  <entry>
  18139.    <title>Fronteers 2008: Anne van Kesteren</title>
  18140.    <link href="https://www.fronteers.nl/nl/blog/2008/08/fronteers-2008-update"/>
  18141.    <updated>2008-08-25T00:00:00Z</updated>
  18142.    <id>https://www.fronteers.nl/nl/blog/2008/08/fronteers-2008-update</id>
  18143.    <content xml:lang="nl" type="html">&lt;p&gt;De voorbereidingen voor &lt;a href=&quot;https://www.fronteers.nl/congres/2008&quot;&gt;Fronteers 2008&lt;/a&gt; zijn in volle gang. Vandaag kunnen we aankondigen dat &lt;a href=&quot;http://annevankesteren.nl/&quot;&gt;Anne van Kesteren&lt;/a&gt; heeft toegezegd een sessie over HTML5, en dan vooral over het &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; element, te gaan verzorgen.&lt;/p&gt;
  18144. &lt;p&gt;Verder is de &lt;a href=&quot;https://www.fronteers.nl/congres/2008/sessions&quot;&gt;sessiepagina&lt;/a&gt; live gegaan, zodat je weet waar onze &lt;a href=&quot;https://www.fronteers.nl/congres/2008/speakers&quot;&gt;sprekers&lt;/a&gt; het precies over gaan hebben.&lt;/p&gt;
  18145. &lt;p&gt;Alle &lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;98 leden&lt;/a&gt; hebben gisteravond een mailtje gehad met uitleg over hoe ze hun toegangskaart met korting kunnen aanschaffen. Heb je deze mail niet ontvangen? Neem dan even &lt;a href=&quot;https://www.fronteers.nl/contact&quot;&gt;contact op&lt;/a&gt; met de ledenadministratie.&lt;/p&gt;
  18146. &lt;p&gt;We hopen je op 11 en 12 september te kunnen begroeten.&lt;/p&gt;
  18147. </content>
  18148.  </entry>
  18149.  <entry>
  18150.    <title>Fronteers 2008: kaartverkoop van start; sprekerswijziging</title>
  18151.    <link href="https://www.fronteers.nl/nl/blog/2008/08/update-fronteers-2008-congres"/>
  18152.    <updated>2008-08-18T00:00:00Z</updated>
  18153.    <id>https://www.fronteers.nl/nl/blog/2008/08/update-fronteers-2008-congres</id>
  18154.    <content xml:lang="nl" type="html">&lt;p&gt;Zoals al eerder aangekondigd, zal op 11 en 12 september as. in Pakhuis De Zwijger te Amsterdam het tweede jaarlijkse Fronteers congres plaatsvinden.&lt;/p&gt;
  18155. &lt;p&gt;De &lt;a href=&quot;https://www.fronteers.nl/congres/2008/kaartverkoop&quot;&gt;kaartverkoop&lt;/a&gt; is inmiddels van start gegaan; je kunt dus bestellen. Het verdient de voorkeur dit redelijk snel te doen; met circa 250 kaarten in de verkoop en circa 150 voorinschrijvingen van geinteresseerden zou het wel eens rap kunnen gaan. Bovendien geldt tot en met 31 augustus een early-bird korting van 50 euro.&lt;/p&gt;
  18156. &lt;p&gt;Fronteers-leden krijgen korting op de toegangsprijs en hebben hierover reeds apart bericht ontvangen. Komende week ontvangen zij per e-mail een speciale pagina waarop de korting verwerkt is. Leden hoeven dus &lt;em&gt;niet&lt;/em&gt; een kaartje te kopen via &lt;a href=&quot;https://www.fronteers.nl/congres/2008/kaartverkoop&quot;&gt;de normale weg&lt;/a&gt;. We houden genoeg kaarten voor leden achter de hand, dus paniek is niet nodig.&lt;/p&gt;
  18157. &lt;p&gt;We hebben een wijziging in het programma. Nate Koechley van Yahoo! is helaas verhinderd aan Fronteers 2008 deel te nemen. Gelukkig hebben we &lt;a href=&quot;http://www.stuffandnonsense.co.uk/&quot;&gt;Andy Clarke&lt;/a&gt;, schrijver van &amp;quot;Transcending CSS: The Fine Art of Web Design&amp;quot;, bereid gevonden een sessie over CSS Positioning op zich te nemen.&lt;/p&gt;
  18158. &lt;p&gt;Ook de nevensessies beginnen nu vorm aan te nemen. Er zullen nevensessies zijn over CSS, de Webrichtlijnen, SEO en toegankelijkheid, de professionalisering van ons beroep, en twee sessies over JavaScript, beide met Dean Edwards.&lt;/p&gt;
  18159. &lt;p&gt;Tijdens deze sessies kan het publiek vragen stellen aan de specialisten. Naast de sprekers zullen Chris Mills en Bruce Lawson van Opera, Vasilis van Gemert van Mirabeau, Koen Willems van de Webrichtlijnen en Wilfred Nas van Fronteers aan deze panels deelnemen.&lt;/p&gt;
  18160. &lt;p&gt;De &lt;a href=&quot;https://www.fronteers.nl/congres/2008/speakers&quot;&gt;sprekerslijst&lt;/a&gt; is nu redelijk definitief, maar wijzigingen zijn nog steeds voorbehouden.&lt;/p&gt;
  18161. &lt;p&gt;Fronteers hoopt je op 11 en 12 september te mogen begroeten.&lt;/p&gt;
  18162. </content>
  18163.  </entry>
  18164.  <entry>
  18165.    <title>Herinnering bijeenkomst 19 augustus</title>
  18166.    <link href="https://www.fronteers.nl/nl/blog/2008/08/herinnering-bijeenkomst-augustus"/>
  18167.    <updated>2008-08-15T00:00:00Z</updated>
  18168.    <id>https://www.fronteers.nl/nl/blog/2008/08/herinnering-bijeenkomst-augustus</id>
  18169.    <content xml:lang="nl" type="html">&lt;p&gt;Als je je nog niet aangemeld hebt voor &lt;a href=&quot;https://www.fronteers.nl/blog/2008/07/bijeenkomst-augustus&quot;&gt;de bijeenkomst bij Indivirtual van volgende week&lt;/a&gt;, doe dat dan nu :)&lt;/p&gt;
  18170. &lt;p&gt;Indivirtual heeft ruimte gereserveerd voor zo&#39;n 50 personen. Op dit moment hebben we &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning&quot;&gt;ongeveer 30 aanmeldingen&lt;/a&gt;. Hou hier dus even rekening mee.&lt;/p&gt;
  18171. &lt;p&gt;Thomas Ummels heeft helaas deze week af moeten zeggen, maar Robert Gaal van &lt;a href=&quot;http://wakoopa.com/&quot;&gt;Wakoopa&lt;/a&gt; heeft aangeboden de leegte op te vullen, met een interessant verhaal over het managen van je front-end code. Thanks Robert!&lt;/p&gt;
  18172. </content>
  18173.  </entry>
  18174.  <entry>
  18175.    <title>Fronteers 2008 congres - 11 en 12 september</title>
  18176.    <link href="https://www.fronteers.nl/nl/blog/2008/08/fronteers-2008-congres-11-en-12-september"/>
  18177.    <updated>2008-08-04T00:00:00Z</updated>
  18178.    <id>https://www.fronteers.nl/nl/blog/2008/08/fronteers-2008-congres-11-en-12-september</id>
  18179.    <content xml:lang="nl" type="html">&lt;p&gt;Zoals al eerder aangekondigd zal op 11 en 12 september het Fronteers 2008 congres plaatsvinden in Pakhuis De Zwijger te Amsterdam. Inmiddels is de &lt;a href=&quot;https://www.fronteers.nl/congres/2008/sprekers&quot;&gt;sprekerslijst&lt;/a&gt; vrijwel compleet, en zijn ook de &lt;a href=&quot;https://www.fronteers.nl/congres/2008/kaartverkoop&quot;&gt;kaartprijzen&lt;/a&gt; bekend.&lt;/p&gt;
  18180. &lt;p&gt;Tien bekende sprekers zullen diepgravende technische sessies beleggen over onderwerpen die front-end developers na aan het hart liggen. JavaScript zal behandeld worden door onder andere &lt;a href=&quot;http://dean.edwards.name/&quot;&gt;Dean Edwards&lt;/a&gt; en &lt;a href=&quot;http://kryogenix.org/&quot;&gt;Stuart Langridge&lt;/a&gt;, terwijl &lt;a href=&quot;http://cinnamon.nl/&quot;&gt;Stephen Hay&lt;/a&gt; en mede-uitvinder &lt;a href=&quot;http://www.w3.org/People/Bos/&quot;&gt;Bert Bos&lt;/a&gt; zich over de geheimen van CSS zullen buigen. Tenslotte zal &lt;a href=&quot;http://nate.koechley.com/&quot;&gt;Nate Koechley&lt;/a&gt; de verdergaande professionalisering van ons vakgebied bespreken.&lt;/p&gt;
  18181. &lt;p&gt;De kaartverkoop zal zeer spoedig starten; inmiddels kan je de beschikbare informatie op je gemak bekijken op de &lt;a href=&quot;https://www.fronteers.nl/congres/2008&quot;&gt;Fronteers 2008 pagina&#39;s&lt;/a&gt;.&lt;/p&gt;
  18182. &lt;p&gt;Het congres wordt gesponsord door &lt;a href=&quot;http://backbase.com/&quot;&gt;Backbase&lt;/a&gt;, &lt;a href=&quot;http://info.nl/&quot;&gt;info.nl&lt;/a&gt; en &lt;a href=&quot;http://mirabeau.nl/&quot;&gt;Mirabeau&lt;/a&gt;; verder zijn er nog enkele sponsor-slots open.&lt;/p&gt;
  18183. </content>
  18184.  </entry>
  18185.  <entry>
  18186.    <title>Algemene Ledenvergadering 2008</title>
  18187.    <link href="https://www.fronteers.nl/nl/blog/2008/07/alv"/>
  18188.    <updated>2008-07-24T00:00:00Z</updated>
  18189.    <id>https://www.fronteers.nl/nl/blog/2008/07/alv</id>
  18190.    <content xml:lang="nl" type="html">&lt;p&gt;Na afloop van het &lt;a href=&quot;https://www.fronteers.nl/congres/2008&quot;&gt;Fronteers congres&lt;/a&gt;, zal de ALV van 2008 plaatsvinden. Tijdens deze vergadering zal teruggeblikt worden op het afgelopen jaar. Ook zal er besloten worden wat er het komende bestuursjaar gaat gebeuren met Fronteers. Wij roepen dan ook op, nu al van je te laten horen.&lt;/p&gt;
  18191. &lt;h2&gt;Voorstellen van ideeën&lt;/h2&gt;
  18192. &lt;p&gt;Heb je een goed idee, dat mede front-end ontwikkelaars ook zal aanspreken? Je kunt dat idee dan aandragen. Tijdens de vergadering zal gestemd worden op de ideeën. Je kunt je idee vooraf al bespreken met andere leden in het &lt;a href=&quot;https://www.fronteers.nl/blog/2008/03/fronteers-op-irc&quot;&gt;IRC kanaal&lt;/a&gt; of tijdens een van de &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning&quot;&gt;komende bijeenkomsten&lt;/a&gt;.&lt;/p&gt;
  18193. &lt;p&gt;Om een idee aan te dragen kun je een e-mail sturen naar &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;bestuur@fronteers.nl&lt;/a&gt;. We verzoeken deze ideeën in te sturen voor 31 augustus.&lt;/p&gt;
  18194. &lt;h2&gt;Bestuur&lt;/h2&gt;
  18195. &lt;p&gt;Tijdens de ALV zal ook het bestuur van Fronteers gekozen worden. Conform de statuten dient 1 bestuurslid zijn zetel ter beschikking te stellen, terwijl de overige blijven zitten. Dit om de continuïteit in het bestuur te garanderen.&lt;/p&gt;
  18196. &lt;p&gt;Dat bestuurslid zal Peter-Paul Koch zijn; hij treedt af en stelt zich herkiesbaar. Daarnaast stelt Krijn Hoetmer, die reeds geruime tijd de facto penningmeester is, zich verkiesbaar. Tom Greuter en Arjan Eising zullen als bestuursleden aanblijven.&lt;/p&gt;
  18197. &lt;p&gt;Het huidige bestuur voelt de behoefte aan een vijfde lid, zodat we wat meer handen hebben om de taken over te verdelen. Geïnteresseerde leden kunnen zich aanmelden op &lt;a href=&quot;mailto:bestuur@fronteers.nl&quot;&gt;bestuur@fronteers.nl&lt;/a&gt;. Dat dient ook voor 31 augustus te gebeuren.&lt;/p&gt;
  18198. &lt;p&gt;Tijdens de ledenvergadering zal gestemd worden, en alle bestuurskandidaten met meer dan 50 procent van de stemmen komen in het bestuur. De gekozen bestuursleden kiezen vervolgens uit hun midden een voorzitter, secretaris en penningmeester.&lt;/p&gt;
  18199. &lt;p&gt;Op een later tijdstip wordt meer gepubliceerd op dit weblog, over de agenda, aangedragen ideeën en kandidaten voor het bestuur.&lt;/p&gt;
  18200. </content>
  18201.  </entry>
  18202.  <entry>
  18203.    <title>Opera Web Standards Curriculum</title>
  18204.    <link href="https://www.fronteers.nl/nl/blog/2008/07/opera-web-standards-curriculum"/>
  18205.    <updated>2008-07-09T00:00:00Z</updated>
  18206.    <id>https://www.fronteers.nl/nl/blog/2008/07/opera-web-standards-curriculum</id>
  18207.    <content xml:lang="nl" type="html">&lt;p&gt;Een groot probleem bij het verkondigen en leren van de webstandaarden is een gebrek aan goed lesmateriaal. Zeker, er bestaan tientallen boeken en honderden websites die tips en truuks bevatten, complexe onderwerpen goed uitleggen, en filosoferen over bepaalde aspecten van de webstandaarden. Niettemin overvalt je als beginner soms een gevoel van machteloosheid; er is zoveel te leren dat het lastig is uit te vinden waar je moet beginnen. Veel boeken en sites veronderstellen enige basiskennis, maar wat als je juist die basiskennis mist?&lt;/p&gt;
  18208. &lt;p&gt;Daarom is het &lt;a href=&quot;http://www.opera.com/wsc/&quot;&gt;Opera Web Standards Curriculum&lt;/a&gt; zo&#39;n belangrijke stap voorwaarts. Doel van deze serie artikelen is het geven van een compleet overzicht van alles wat een front-end ontwikkelaar moet weten; van basis-HTML via informatiearchitectuur en kleurentheorie tot gevorderde CSS en JavaScript.&lt;/p&gt;
  18209. &lt;p&gt;Deze cursus is bedoeld voor iedereen die moderne webontwikkeling wil leren, of die even snel iets wil opzoeken (&amp;quot;wat is het correcte gebruik van &lt;/p&gt;&lt;address&gt;?&amp;quot;). Opera hoopt dat vooral universiteiten en hogescholen deze cursus zullen gebruiken om hun lesprogramma te verbeteren, maar de artikelen zijn ook zeer geschikt voor interne trainingen.&lt;p&gt;&lt;/p&gt;
  18210. &lt;p&gt;Uiteindelijk zal de serie uit circa 50 artikelen bestaan, die elk één onderwerp tot in detail uitwerken. Er zijn bijvoorbeeld aparte artikelen over &lt;a href=&quot;https://dev.opera.com/articles/view/17-images-in-html/&quot;&gt;het gebruik van plaatjes&lt;/a&gt;, &lt;a href=&quot;https://dev.opera.com/articles/view/11-typography-on-the-web/&quot;&gt;typografie&lt;/a&gt; of &lt;a href=&quot;https://dev.opera.com/articles/view/14-choosing-the-right-doctype-for-your/&quot;&gt;het kiezen van het juiste doctype&lt;/a&gt;. De bedoeling is dat elk artikel genoeg stof geeft voor een les van circa 1 uur, waarbij de studenten van tevoren een extra uur hebben besteed aan het lezen van het artikel.&lt;/p&gt;
  18211. &lt;p&gt;Op dit moment zijn er 23 artikelen online, en de bedoeling is dat er vanaf nu tot eind september nog eens circa 25 worden gepubliceerd. Dit is dus een werk in voortgang, maar het is nu al duidelijk dat het Opera Web Standards Curriculum een belangrijke rol zal vervullen in het leren en verbreiden van webstandaarden.&lt;/p&gt;
  18212. &lt;/address&gt;</content>
  18213.  </entry>
  18214.  <entry>
  18215.    <title>Webrichtlijn 51: Kleuren en stijlen van links</title>
  18216.    <link href="https://www.fronteers.nl/nl/blog/2008/07/webrichtlijnen-kleuren-stijlen-links"/>
  18217.    <updated>2008-07-08T00:00:00Z</updated>
  18218.    <id>https://www.fronteers.nl/nl/blog/2008/07/webrichtlijnen-kleuren-stijlen-links</id>
  18219.    <content xml:lang="nl" type="html">&lt;p&gt;Links moeten duidelijk te onderscheiden zijn van andere tekst. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/kleuren-stijlen/#r-pd-8-8&quot;&gt;R-pd.8.8&lt;/a&gt;)&lt;/p&gt;
  18220. &lt;p&gt;Twee simpele &#39;regeltjes&#39; voor ons: &lt;code&gt;text-decoration: underline;&lt;/code&gt; over het algemeen alleen bij links gebruiken, en netjes gebruik maken van &lt;a href=&quot;http://meyerweb.com/eric/thoughts/2007/06/11/who-ordered-the-link-states/&quot;&gt;Lazy Visitors Hate Following Anchors&lt;/a&gt; (&lt;code&gt;:link&lt;/code&gt;, &lt;code&gt;:visited&lt;/code&gt;, &lt;code&gt;:hover&lt;/code&gt;, &lt;code&gt;:focus&lt;/code&gt; en &lt;code&gt;:active&lt;/code&gt;).&lt;/p&gt;
  18221. &lt;p&gt;Wat zou er gebeuren als WYSYWIG editors voor het web de &lt;code&gt;&amp;lt;u&amp;gt;&lt;/code&gt;nderline knop uit de toolbar zouden halen?&lt;/p&gt;
  18222. </content>
  18223.  </entry>
  18224.  <entry>
  18225.    <title>Webrichtlijn 48, 49 &amp;amp; 50: Links en client-side scripts</title>
  18226.    <link href="https://www.fronteers.nl/nl/blog/2008/07/webrichtlijnen-links-en-client-side-scripts"/>
  18227.    <updated>2008-07-01T00:00:00Z</updated>
  18228.    <id>https://www.fronteers.nl/nl/blog/2008/07/webrichtlijnen-links-en-client-side-scripts</id>
  18229.    <content xml:lang="nl" type="html">&lt;p&gt;Bij het gebruik van client-side script in combinatie met een link: maak de scriptfunctionaliteit een uitbreiding op de basisfunctionaliteit van de link. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/client-side-scripts/#r-pd-8-5&quot;&gt;R-pd.8.5&lt;/a&gt;) Bij het gebruik van client-side script in combinatie met een link: indien de link nergens naartoe leidt, confronteer de bezoeker zonder ondersteuning voor client-side script dan niet met een niet-werkende link. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/client-side-scripts/#r-pd-8-6&quot;&gt;R-pd.8.6&lt;/a&gt;) Bij het gebruik van client-side script in combinatie met een link: indien noodzakelijk, gebruik client-side script als een uitbreiding op server-side functies. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/client-side-scripts/#r-pd-8-7&quot;&gt;R-pd.8.7&lt;/a&gt;)&lt;/p&gt;
  18230. &lt;p&gt;&lt;code&gt;&amp;lt;a href=&amp;quot;javascript:foo();&amp;quot;&amp;gt;&lt;/code&gt; is natuurlijk verschrikkelijk &lt;em&gt;evil&lt;/em&gt;! Doe dan op z&#39;n minst &lt;code&gt;&amp;lt;a href=&amp;quot;#&amp;quot; onclick=&amp;quot;foo();&amp;quot;&amp;gt;&lt;/code&gt; (of &lt;code&gt;onclick=&amp;quot;[javascript:foo();](http://www.hedgerwow.com/360/dhtml/js_label/)&amp;quot;&lt;/code&gt;, wat wel zo professioneel staat). Maar wat als je deze link met JavaScript genereert?&lt;/p&gt;
  18231. &lt;p&gt;Wat doe je als je een lijst met 20 links hebt, waarvan je er slechts 5 wilt tonen (althans, dat wil de ontwerper). Onder de lijst staat een mooi linkje met &#39;Meer links&#39;, die de overige 15 toont? Hoe voeg je dit met JavaScript toe en wat zet je in het &lt;code&gt;href&lt;/code&gt; attribuut van de link? Hoort dit eigenlijk wel een &lt;code&gt;&amp;lt;a&amp;gt;&lt;/code&gt;&#39;tje te zijn?&lt;/p&gt;
  18232. &lt;p&gt;Tabbladen zijn volgens mij een mooi voorbeeld van hoe je links en scripting kunt combineren. Hoe los je dit op, als je het zelf script? Zorg je ervoor dat de links bookmarkable zijn, of in een nieuwe browser tab zijn te openen? Gebruik je &lt;code&gt;return false;&lt;/code&gt; in de links, of laat je de browser &#39;springen&#39; naar &lt;code&gt;#het-id&lt;/code&gt;?&lt;/p&gt;
  18233. &lt;p&gt;Hoe ver ga je bij bijvoorbeeld carrouselletje met &lt;em&gt;sfeerafbeeldingen&lt;/em&gt;, waar je met JavaScript doorheen kunt klikken? Is dit iets wat je op de back-end ook laat werken, of vinden we dat te veel gedoe? En in dat laatste geval, wat zet je in de &lt;code&gt;href=&amp;quot;&amp;quot;&lt;/code&gt;? En dezelfde vraag voor &lt;em&gt;blokken tekstuele content&lt;/em&gt;, die in een carrousel staan, en waar je stoere Web 2.0 Ajax (&lt;em&gt;niet&lt;/em&gt; AJAX) effectjes overheen gooit.&lt;/p&gt;
  18234. &lt;p&gt;En na al dat geneuzel met het nadenken over twee paden in je site (eentje met en eentje zonder JavaScript) kom je erachter dat je het toch nog niet goed doet. Want je mooie Ajax carrousel werkt misschien &#39;perfect&#39; met en zonder JavaScript, maar hoe werkt het bijvoorbeeld in screenreaders die JavaScript wel ondersteunen, maar animaties met verdwijnende en verschijnende content niet uit kunnen drukken? &lt;a href=&quot;http://www.w3.org/WAI/intro/aria&quot;&gt;ARIA&lt;/a&gt;, met &lt;a href=&quot;http://juicystudio.com/article/wai-aria-live-regions.php&quot;&gt;Live Regions&lt;/a&gt;? Of vinden we het al goed genoeg dat we de webrichtlijnen naleven?&lt;/p&gt;
  18235. </content>
  18236.  </entry>
  18237.  <entry>
  18238.    <title>Webrichtlijn 44, 45, 46 &amp;amp; 47: Linktekst</title>
  18239.    <link href="https://www.fronteers.nl/nl/blog/2008/06/webrichtlijnen-linktekst"/>
  18240.    <updated>2008-06-24T00:00:00Z</updated>
  18241.    <id>https://www.fronteers.nl/nl/blog/2008/06/webrichtlijnen-linktekst</id>
  18242.    <content xml:lang="nl" type="html">&lt;p&gt;Beschrijf niet het mechanisme achter het volgen van een link. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/goede-linktekst-schrijven/#r-pd-8-1&quot;&gt;R-pd.8.1&lt;/a&gt;) Schrijf heldere, beschrijvende tekst voor links. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/goede-linktekst-schrijven/#r-pd-8-2&quot;&gt;R-pd.8.2&lt;/a&gt;) Gebruik het minimum aan tekst dat nodig is om te begrijpen waar de link naartoe leidt. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/goede-linktekst-schrijven/#r-pd-8-3&quot;&gt;R-pd.8.3&lt;/a&gt;) Geef voldoende informatie over de bestemming van een link om onaangename verrassingen voor de bezoeker te voorkomen. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/goede-linktekst-schrijven/#r-pd-8-4&quot;&gt;R-pd.8.4&lt;/a&gt;)&lt;/p&gt;
  18243. &lt;p&gt;Allemaal logische richtlijnen, die vooral belangrijk zijn voor content managers. De Webrichtlijnen halen ook het &lt;code&gt;title&lt;/code&gt; attribuut aan. &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/links-navigatie/goede-linktekst-schrijven/#title-attribuut&quot;&gt;Klik hier&lt;/a&gt; om dat voorbeeld te bekijken. Wanneer gebruik jij dit attribuut om een link te verduidelijken?&lt;/p&gt;
  18244. </content>
  18245.  </entry>
  18246.  <entry>
  18247.    <title>Webrichtlijn 42 &amp;amp; 43: Achtergrondafbeeldingen</title>
  18248.    <link href="https://www.fronteers.nl/nl/blog/2008/06/webrichtlijnen-achtergrondafbeeldingen"/>
  18249.    <updated>2008-06-17T00:00:00Z</updated>
  18250.    <id>https://www.fronteers.nl/nl/blog/2008/06/webrichtlijnen-achtergrondafbeeldingen</id>
  18251.    <content xml:lang="nl" type="html">&lt;p&gt;Decoratieve afbeeldingen dienen zoveel mogelijk door CSS geplaatst te worden. Informatieve afbeeldingen dienen door HTML geplaatst te worden. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/achtergrondafbeeldingen/#r-pd-7-6&quot;&gt;R-pd.7.6&lt;/a&gt;) Het gebruik van CSS Image Replacement technieken die worden toegepast op essentiële informatie wordt afgeraden. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/achtergrondafbeeldingen/#r-pd-7-7&quot;&gt;R-pd.7.7&lt;/a&gt;)&lt;/p&gt;
  18252. </content>
  18253.  </entry>
  18254.  <entry>
  18255.    <title>Fronteers-bijeenkomst: 27 juni Arnhem</title>
  18256.    <link href="https://www.fronteers.nl/nl/blog/2008/06/bijeenkomst-juni"/>
  18257.    <updated>2008-06-13T00:00:00Z</updated>
  18258.    <id>https://www.fronteers.nl/nl/blog/2008/06/bijeenkomst-juni</id>
  18259.    <content xml:lang="nl" type="html">&lt;p&gt;Vrijdag 27 juni zal Fronteers te gast zijn bij de Hogeschool van Arnhem en Nijmegen, bij de faculteit Informatica, Media en Communicatie. Voorafgaand aan de bijeenkomst zal de commissie Diplomering proefexamens afnemen, zie voor meer informatie de &lt;a href=&quot;https://www.fronteers.nl/blog/2008/06/commissie-diplomering-zoekt-proefpersonen&quot;&gt;blogpost Commissie Diplomering zoekt proefpersonen&lt;/a&gt;.&lt;/p&gt;
  18260. &lt;p&gt;Zowel leden als niet-leden zijn van harte welkom bij deze bijeenkomst, maar reserveren is &lt;em&gt;wel&lt;/em&gt; verplicht.&lt;/p&gt;
  18261. &lt;h2&gt;Het programma is als volgt:&lt;/h2&gt;
  18262. &lt;ul&gt;
  18263. &lt;li&gt;18.30 uur: Zaal open, koffie, bier en fris.&lt;/li&gt;
  18264. &lt;li&gt;19.00 uur: Wilfred Nas, voorzitter van de &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/diplomering&quot;&gt;Commissie Diplomering&lt;/a&gt;, over de resultaten van de afgelopen maanden en de &lt;a href=&quot;https://www.fronteers.nl/blog/2008/06/commissie-diplomering-zoekt-proefpersonen&quot;&gt;afgenomen proefexamens&lt;/a&gt;.&lt;/li&gt;
  18265. &lt;li&gt;19.45 uur: Robert Gaal over &lt;a href=&quot;https://www.fronteers.nl/blog/2008/05/hoe-manage-jij-je-front-end-code&quot;&gt;het managen van front-end code&lt;/a&gt;.&lt;/li&gt;
  18266. &lt;li&gt;20.30 uur: Arjan Eising over &amp;quot;toegankelijke webapplicaties: kijken voorbij de webrichtlijnen&amp;quot;.&lt;/li&gt;
  18267. &lt;li&gt;21.15 uur: Bier, fris en networking.&lt;/li&gt;
  18268. &lt;/ul&gt;
  18269. &lt;p&gt;De bijeenkomst vindt plaats in gebouw 4 van de Hogeschool van Arnhem en Nijmegen (faculteit Techniek / Informatica, Media en Communicatie), Ruitenberglaan 26, 6826 CC, Arnhem. Zie ook de &lt;a href=&quot;http://www1.han.nl/restyle/centraal/route/route.xml?map=arnhem&amp;amp;code=4&amp;amp;lang=nld&amp;amp;restyle=on&quot;&gt;routebeschrijving op de website van de HAN&lt;/a&gt;. Je kan je opgeven middels het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning&quot;&gt;formulier op de bijeenkomstenpagina&lt;/a&gt;. Tot vrijdag de 27ste!&lt;/p&gt;
  18270. </content>
  18271.  </entry>
  18272.  <entry>
  18273.    <title>Commissie Diplomering zoekt proefpersonen</title>
  18274.    <link href="https://www.fronteers.nl/nl/blog/2008/06/commissie-diplomering-zoekt-proefpersonen"/>
  18275.    <updated>2008-06-12T00:00:00Z</updated>
  18276.    <id>https://www.fronteers.nl/nl/blog/2008/06/commissie-diplomering-zoekt-proefpersonen</id>
  18277.    <content xml:lang="nl" type="html">&lt;p&gt;De commissie Diplomering heeft de afgelopen maanden gewerkt aan de opzet van diplomering van front-end ontwikkelaars. Zij zijn daarmee zo ver gevorderd, dat er proefexamens afgenomen kunnen worden. Deze proefexamens zullen plaatsvinden op vrijdag 27 juni in Arnhem.&lt;/p&gt;
  18278. &lt;p&gt;Als je tijd en zin hebt om 27 juni de Commissie Diplomering te helpen bij het ontwikkelen van de diplomering, dan verzoeken wij je om jezelf aan te melden. Om 13 uur zal begonnen worden met de theorievragen, en later in de middag zullen vragensessies plaatsvinden. Voor de mensen die hieraan meehelpen, wordt &#39;s avonds een pizzaatje geregeld. Aansluitend zal een Fronteers bijeenkomst plaatsvinden. Meer daarover in een volgende blogpost.&lt;/p&gt;
  18279. &lt;h2&gt;Alle informatie in het kort:&lt;/h2&gt;
  18280. &lt;ul&gt;
  18281. &lt;li&gt;Datum: vrijdag 27 juni&lt;/li&gt;
  18282. &lt;li&gt;Locatie: Hogeschool van Arnhem en Nijmegen (faculteit Techniek / Informatica, Media en Communicatie), Ruitenberglaan 26, 6826 CC, Arnhem. Zie ook de &lt;a href=&quot;http://www1.han.nl/restyle/centraal/route/route.xml?map=arnhem&amp;amp;code=4&amp;amp;lang=nld&amp;amp;restyle=on&quot;&gt;routebeschrijving op de website van de HAN&lt;/a&gt;&lt;/li&gt;
  18283. &lt;li&gt;Aanmelden kan door een bericht te sturen met het formulier op de &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/diplomering&quot;&gt;pagina van de commissie Diplomering&lt;/a&gt;&lt;/li&gt;
  18284. &lt;/ul&gt;
  18285. &lt;p&gt;Wij hopen je te mogen begroeten op 27 juni.&lt;/p&gt;
  18286. </content>
  18287.  </entry>
  18288.  <entry>
  18289.    <title>Sharepoint sessie op 16 juni</title>
  18290.    <link href="https://www.fronteers.nl/nl/blog/2008/06/sharepoint-sessie"/>
  18291.    <updated>2008-06-11T00:00:00Z</updated>
  18292.    <id>https://www.fronteers.nl/nl/blog/2008/06/sharepoint-sessie</id>
  18293.    <content xml:lang="nl" type="html">&lt;p&gt;Op maandag 16 juni organiseert Ordina een Sharepoint sessie in Nieuwegein.&lt;/p&gt;
  18294. &lt;p&gt;Beste Fronteers,&lt;/p&gt;
  18295. &lt;p&gt;Er zijn plaatsen voor jullie gereserveerd op de tribune tijdens de &lt;a href=&quot;http://www.innoveerjijmee.nl/default.asp/id,342/index.html&quot;&gt;Ordina Open Innoveerjijmee&lt;/a&gt; sessie van 16 juni bij ons in Nieuwegein. Kom je ook?&lt;/p&gt;
  18296. &lt;p&gt;De sessie is gratis toegankelijk voor iedereen. Je bent van harte welkom. We verwachten je vanaf 17:30u. Schrijf je in via &lt;a href=&quot;http://www.innoveerjijmee.nl/default.asp/id,307/index.html&quot;&gt;innoveerjijmee.nl&lt;/a&gt;.&lt;/p&gt;
  18297. &lt;h2&gt;Sharepoint sessie, door Jan Tielens van U2U op 16 juni&lt;/h2&gt;
  18298. &lt;h2&gt;Onderwerp&lt;/h2&gt;
  18299. &lt;p&gt;Web 2.0-technologieën zoals ASP.NET AJAX 1.0 en Silverlight 1.0/2 zijn populair voor het verbeteren van de webgebruikerservaring in ASP.NET-webapplicaties en SharePoint. Het eerste deel van deze sessie leert u deze gebruiken in WSS 3.0 en MOSS 2007. Als front-end developers krijgen we steeds meer te maken met nieuwe technologien zoals AJAX en Silverlight. Ook vraagt de markt om implementaties van standaard pakketten als Sharepoint.&lt;/p&gt;
  18300. &lt;p&gt;Het bouwen van Web Parts is een van de meest populaire manieren om SharePoint aan te passen aan de eigen noden en wensen. Het tweede deel van deze sessie kijkt verder dan de typische ‘Hello World’ Web Parts en bespreekt geavanceerde topics zoals custom toolparts, connectable web parts, verbs, Code Acces Security etc. Ook de combinatie met ASP.NET AJAX wordt uitvoerig besproken.&lt;/p&gt;
  18301. &lt;h2&gt;Programma&lt;/h2&gt;
  18302. &lt;ul&gt;
  18303. &lt;li&gt;17.30u: Ontvangst in het Ordina Grand Cafe met buffet&lt;/li&gt;
  18304. &lt;li&gt;18.30u: Presentatie Jan Tielens – “Sharepoint &amp;amp; Silverlight: Building RIAs for WSS 3.0 and MOSS 2007”&lt;/li&gt;
  18305. &lt;li&gt;19.40u: Pauze&lt;/li&gt;
  18306. &lt;li&gt;19.50u: Presentatie Jan Tielens – “SharePoint Web Part Development: Advanced Web Part Development”&lt;/li&gt;
  18307. &lt;li&gt;21.00u: Borrel&lt;/li&gt;
  18308. &lt;/ul&gt;
  18309. &lt;p&gt;Als front-end developer is dit een mooie kans om je kennis te verbreden, en te zien en horen wat de mogelijkheden zijn om van Sharepoint 2007 een rich internet application te maken. &lt;a href=&quot;http://www.innoveerjijmee.nl/default.asp/id,307/index.html&quot;&gt;Meld je dus nu aan op innoveerjijmee.nl&lt;/a&gt; en vermeld mijn naam bij de opmerkingen.&lt;/p&gt;
  18310. &lt;p&gt;Met vriendelijke groet,&lt;/p&gt;
  18311. &lt;p&gt;Wilco Havenaar&lt;/p&gt;
  18312. </content>
  18313.  </entry>
  18314.  <entry>
  18315.    <title>Webrichtlijn 39: Het longdesc attribuut en d-links</title>
  18316.    <link href="https://www.fronteers.nl/nl/blog/2008/06/webrichtlijnen-longdesc"/>
  18317.    <updated>2008-06-10T00:00:00Z</updated>
  18318.    <id>https://www.fronteers.nl/nl/blog/2008/06/webrichtlijnen-longdesc</id>
  18319.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik geen d-links op overheidswebsites. Het gebruik van het longdesc (long description) attribuut verdient de voorkeur wanneer de alternatieve tekst op het alt attribuut ontoereikend is voor het begrip van de informatie in de afbeelding. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/longdesc-attribuut/d-links/#r-pd-7-3&quot;&gt;R-pd.7.3&lt;/a&gt;)&lt;/p&gt;
  18320. &lt;p&gt;Dus, wie gebruikt &lt;code&gt;longdesc&lt;/code&gt;, &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/longdesc-attribuut/uitgebreide-beschrijvingen/&quot;&gt;op een goede manier&lt;/a&gt;?&lt;/p&gt;
  18321. &lt;p&gt;Welke CMS&#39;en bieden ondersteuning voor dit attribuut? En hoe werken die dan?&lt;/p&gt;
  18322. </content>
  18323.  </entry>
  18324.  <entry>
  18325.    <title>Webrichtlijn 37, 38, 40 &amp;amp; 41: Het alt attribuut</title>
  18326.    <link href="https://www.fronteers.nl/nl/blog/2008/06/webrichtlijnen-alt-attribuut"/>
  18327.    <updated>2008-06-03T00:00:00Z</updated>
  18328.    <id>https://www.fronteers.nl/nl/blog/2008/06/webrichtlijnen-alt-attribuut</id>
  18329.    <content xml:lang="nl" type="html">&lt;p&gt;Het alt (alternative) attribuut dient te worden gebruikt op ieder img (image) en area element en dient te worden voorzien van een effectieve alternatieve tekst. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/alt-attribuut/#r-pd-7-1&quot;&gt;R-pd.7.1&lt;/a&gt;) Gebruik geen alt attribuut voor het oproepen van tooltips. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/alt-attribuut/tooltips/#r-pd-7-2&quot;&gt;R-pd.7.2&lt;/a&gt;) Afbeeldingen die staan geplaatst binnen een link dienen een niet-lege alternatieve tekst te hebben om bezoekers die de afbeelding niet zien in staat te stellen de link te volgen. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/navigatie-image-maps/#r-pd-7-4&quot;&gt;R-pd.7.4&lt;/a&gt;) Geef bij het gebruik van image maps voor zowel het img element als ieder area element een effectieve alternatieve tekst aan via het alt attribuut. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/navigatie-image-maps/#r-pd-7-5&quot;&gt;R-pd.7.5&lt;/a&gt;)&lt;/p&gt;
  18330. &lt;p&gt;De webrichtlijnen zijn erg duidelijk over het &lt;code&gt;alt&lt;/code&gt; attribuut en de &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/&quot;&gt;vele voorbeelden&lt;/a&gt;.&lt;/p&gt;
  18331. &lt;p&gt;Deze post gaat over het verplichte karakter van het attribuut en &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/afbeeldingen-alternatieve-tekst/alt-attribuut/alternatieve-tekst-schrijven/&quot;&gt;het schrijven van effectieve teksten&lt;/a&gt;. Dit laatste zou toch vaste kost moeten zijn voor iedere content manager? Hoe kan een CMS een gebruiker begeleiden in het schrijven van een goede tekst?&lt;/p&gt;
  18332. &lt;p&gt;Wat vinden we trouwens van het het idee om &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/section-embedded0.html#alt&quot;&gt;&lt;code&gt;alt&lt;/code&gt; optineel te maken&lt;/a&gt; (in een enkel geval)? Er is al &lt;a href=&quot;http://lists.w3.org/Archives/Public/public-html/2008Apr/thread.html&quot;&gt;genoeg over gediscussieerd&lt;/a&gt;, maar okay..&lt;/p&gt;
  18333. </content>
  18334.  </entry>
  18335.  <entry>
  18336.    <title>Webrichtlijn 35: De DocType Declaratie</title>
  18337.    <link href="https://www.fronteers.nl/nl/blog/2008/05/webrichtlijnen-doctype"/>
  18338.    <updated>2008-05-20T00:00:00Z</updated>
  18339.    <id>https://www.fronteers.nl/nl/blog/2008/05/webrichtlijnen-doctype</id>
  18340.    <content xml:lang="nl" type="html">&lt;p&gt;Elk HTML of XHTML document moet beginnen met een geldige DocType Declaratie. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/paginastructuur/doctype/#r-pd-6-1&quot;&gt;R-pd.6.1&lt;/a&gt;)&lt;/p&gt;
  18341. &lt;p&gt;Hoeveel waarde hecht jij aan de doctype? Is het niet gewoon een irritant ding dat we steeds maar weer kopiëren en plakken?&lt;/p&gt;
  18342. &lt;p&gt;Waarom gebruiken we vanaf nu niet gewoon &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/section-writing0.html#the-doctype&quot;&gt;&lt;code&gt;&amp;lt;!doctype html&amp;gt;&lt;/code&gt;&lt;/a&gt; wat hetzelfde effect heeft in browsers (standards mode triggeren)?&lt;/p&gt;
  18343. &lt;p&gt;Zijn er, zoals de webrichtlijnen beweren, editors die de doctype gebruiken? En heb je daar wat aan tijdens het ontwikkelen van een site?&lt;/p&gt;
  18344. </content>
  18345.  </entry>
  18346.  <entry>
  18347.    <title>Hoe manage jij je front-end code?</title>
  18348.    <link href="https://www.fronteers.nl/nl/blog/2008/05/hoe-manage-jij-je-front-end-code"/>
  18349.    <updated>2008-05-17T00:00:00Z</updated>
  18350.    <id>https://www.fronteers.nl/nl/blog/2008/05/hoe-manage-jij-je-front-end-code</id>
  18351.    <content xml:lang="nl" type="html">&lt;p&gt;De meeste front-enders kennen dit probleem vast wel: je CSS of Javascript code raakt onoverzichtelijk. Je hebt teveel aparte bestanden of te lange bestanden en het wordt moeilijk om dingen terug te vinden, zelfs met een goeie zoekfunctie. Classes worden overbodig en niet verwijderd, stukken markup hebben niet de ID die je verwacht, functies zijn onderverdeeld in verkeerde bestanden, etc.  Het is allemaal niet onmogelijk om bij te houden natuurlijk, iedereen heeft zo z&#39;n routine. En daar gaat deze post over!&lt;/p&gt;
  18352. &lt;p&gt;Hoe manage jij je front-end code? Gebruik je bijvoorbeeld &lt;a href=&quot;http://haml.hamptoncatlin.com/docs/rdoc/classes/Sass.html&quot;&gt;SASS&lt;/a&gt; of &lt;a href=&quot;http://code.google.com/p/blueprintcss/&quot;&gt;Blueprint&lt;/a&gt;? Is er de perfecte IDE die het meer managable maakt? Specificeer je voor alles Classes in Javascript? Heb je een naam-structuur uitgedacht voor je bestanden en mappen? Kortom: wat doe jij om rotzooi te voorkomen? Laat het ons weten.&lt;/p&gt;
  18353. &lt;p&gt;Kleine kanttekening: ik ben zelf ook vaak bezig met Ruby On Rails en de &lt;a href=&quot;http://en.wikipedia.org/wiki/DRY&quot;&gt;DRY&lt;/a&gt; en &lt;a href=&quot;http://en.wikipedia.org/wiki/Model-view-controller&quot;&gt;MVC&lt;/a&gt; methodes daarvan spreken me erg aan. Misschien is een open-source front-end framework met die principes een idee?&lt;/p&gt;
  18354. </content>
  18355.  </entry>
  18356.  <entry>
  18357.    <title>Verslag bijeenkomst bij EveryWeb Solutions</title>
  18358.    <link href="https://www.fronteers.nl/nl/blog/2008/05/verslag-bijeenkomst-bij-everyweb-solutions"/>
  18359.    <updated>2008-05-16T00:00:00Z</updated>
  18360.    <id>https://www.fronteers.nl/nl/blog/2008/05/verslag-bijeenkomst-bij-everyweb-solutions</id>
  18361.    <content xml:lang="nl" type="html">&lt;p&gt;Afgelopen dinsdag was Fronteers te gast bij EveryWeb Solutions. Fronteers leden Tom-Eric Gerritsen en Arjan Eising hebben hiervan &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2008/everyweb-solutions&quot;&gt;een verslag&lt;/a&gt; geschreven.&lt;/p&gt;
  18362. &lt;p&gt;Diegenen die aanwezig waren bij de bijeenkomst, zullen ook gemerkt hebben dat de presentatie van Ruud ietwat in het water viel. Dit voorval wordt nu goedgemaakt met &lt;a href=&quot;http://steltenpower.com/FronteersMeetSVG.html&quot;&gt;een uitgebreide verzameling links&lt;/a&gt; naar SVG onderwerpen. We hopen binnen Fronteers meer van SVG te horen dan alleen deze presentatie.&lt;/p&gt;
  18363. </content>
  18364.  </entry>
  18365.  <entry>
  18366.    <title>Webrichtlijn 34: Open standaarden</title>
  18367.    <link href="https://www.fronteers.nl/nl/blog/2008/05/webrichtlijnen-open-standaarden"/>
  18368.    <updated>2008-05-13T00:00:00Z</updated>
  18369.    <id>https://www.fronteers.nl/nl/blog/2008/05/webrichtlijnen-open-standaarden</id>
  18370.    <content xml:lang="nl" type="html">&lt;p&gt;In het geval dat belangrijke informatie via een gesloten standaard wordt aangeboden, dient men dezelfde informatie ook via een open standaard aan te bieden. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/open-standaarden/#r-pd-5-1&quot;&gt;R-pd.5.1&lt;/a&gt;)&lt;/p&gt;
  18371. &lt;p&gt;Als je bij het gebruik van PNG tegen problemen aanloopt met kleurverschillen in browsers (beschreven in &lt;a href=&quot;http://hsivonen.iki.fi/png-gamma/&quot;&gt;The Sad Story of PNG Gamma “Correction”&lt;/a&gt; en &lt;a href=&quot;http://morris-photographics.com/photoshop/articles/png-gamma.html&quot;&gt;The PNG Gamma Dilemma&lt;/a&gt;), zijn de volgende tools wellicht handig:&lt;/p&gt;
  18372. &lt;ul&gt;
  18373. &lt;li&gt;&lt;a href=&quot;http://psydk.org/PngOptimizer.php&quot;&gt;PngOptimizer&lt;/a&gt;&lt;/li&gt;
  18374. &lt;li&gt;&lt;a href=&quot;http://entropymine.com/jason/tweakpng/&quot;&gt;TweakPNG&lt;/a&gt;&lt;/li&gt;
  18375. &lt;li&gt;&lt;a href=&quot;http://pmt.sourceforge.net/pngcrush/&quot;&gt;PNGCRUSH&lt;/a&gt;&lt;/li&gt;
  18376. &lt;/ul&gt;
  18377. &lt;p&gt;Wat denk jij trouwens van &lt;a href=&quot;http://www.w3.org/Graphics/SVG/&quot;&gt;SVG&lt;/a&gt; als formaat voor afbeeldingen? Is deze open standaard al volwassen genoeg om te gebruiken? Zou er iets veranderen als je &lt;a href=&quot;http://intertwingly.net/blog/2008/04/11/SVG-and-MathML-Annexes-to-HTML5&quot;&gt;SVG rechtstreeks in je HTML kon plakken&lt;/a&gt;?&lt;/p&gt;
  18378. &lt;p&gt;Wellicht dat we &lt;a href=&quot;https://www.fronteers.nl/blog/2008/05/herinnering-bijeenkomst-13-mei&quot;&gt;vanavond&lt;/a&gt; meer te horen krijgen over de voordelen van SVG.&lt;/p&gt;
  18379. &lt;p&gt;En gaat HTML5 &lt;a href=&quot;http://www.w3.org/QA/2007/12/when_will_html_5_support_soone.html&quot;&gt;een oplossing voor het &lt;code&gt;&amp;lt;video&amp;gt;&lt;/code&gt; probleem&lt;/a&gt; vinden? Wat zou het voor het web betekenen als browsers een open standaard voor video (en audio) implementeren? Flash is nu nog de grote speler bij online video, maar is dat wel zo&#39;n probleem? Zeker gezien &lt;a href=&quot;http://www.adobe.com/openscreenproject/&quot;&gt;recente stappen van Adobe&lt;/a&gt;?&lt;/p&gt;
  18380. </content>
  18381.  </entry>
  18382.  <entry>
  18383.    <title>Herinnering: bijeenkomst 13 mei</title>
  18384.    <link href="https://www.fronteers.nl/nl/blog/2008/05/herinnering-bijeenkomst-13-mei"/>
  18385.    <updated>2008-05-09T00:00:00Z</updated>
  18386.    <id>https://www.fronteers.nl/nl/blog/2008/05/herinnering-bijeenkomst-13-mei</id>
  18387.    <content xml:lang="nl" type="html">&lt;p&gt;Zoals eerder aangekondigd zal er op 13 mei (dat is dinsdag aanstaande) een Fronteers-bijeenkomst gehouden worden in Hotel Arena te Amsterdam, georganiseerd door &lt;a href=&quot;http://everywebsolutions.nl/&quot;&gt;EveryWeb Solutions&lt;/a&gt;. De toegang is gratis, en niet-leden zijn van harte welkom. Wel verzoeken we je je komst te melden via het &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;het aanmeldingsformulier&lt;/a&gt;.&lt;/p&gt;
  18388. &lt;h2&gt;Feiten&lt;/h2&gt;
  18389. &lt;ul&gt;
  18390. &lt;li&gt;Waar: De Kloosterzaal van &lt;a href=&quot;http://maps.google.nl/maps?f=q&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=%27s-Gravesandestraat+51,+1092+AA+Amsterdam,+nederland&amp;amp;sll=52.360742,4.907541&amp;amp;sspn=0.013497,0.039911&amp;amp;ie=UTF8&amp;amp;ll=52.361345,4.915352&amp;amp;spn=0.026994,0.079823&amp;amp;t=h&amp;amp;z=14&quot;&gt;Hotel Arena&lt;/a&gt;&lt;/li&gt;
  18391. &lt;li&gt;Wanneer: De zaal gaat om 18:30 uur open; de eerste presentatie zal rond 19:00 uur aanvangen.&lt;/li&gt;
  18392. &lt;li&gt;Wat: Een presentatie van een medewerker van &lt;a href=&quot;http://www.everywebsolutions.nl/&quot;&gt;EveryWeb Solutions&lt;/a&gt; over toegankelijkheid voor blinden en slechtzienden, en een presentatie van &lt;a href=&quot;http://svg.startpagina.nl/&quot;&gt;Ruud Steltenpool&lt;/a&gt; over SVG.&lt;/li&gt;
  18393. &lt;li&gt;En verder: Hapjes en drankjes staan klaar.&lt;/li&gt;
  18394. &lt;/ul&gt;
  18395. </content>
  18396.  </entry>
  18397.  <entry>
  18398.    <title>Bevindingen commissie Openbaar Ledenregister</title>
  18399.    <link href="https://www.fronteers.nl/nl/blog/2008/05/bevindingen-commissie-openbaar-ledenregister"/>
  18400.    <updated>2008-05-08T00:00:00Z</updated>
  18401.    <id>https://www.fronteers.nl/nl/blog/2008/05/bevindingen-commissie-openbaar-ledenregister</id>
  18402.    <content xml:lang="nl" type="html">&lt;p&gt;In januari heeft Sander Aarts zich aangemeld om de commissie Openbaar Ledenregister te leiden. Het bestuur heeft toen drie vragen bij de commissie neergelegd. Vorige week heeft de commissie een advies uitgebracht en zichzelf ontbonden. Het bestuur heeft het advies onverkort overgenomen.&lt;/p&gt;
  18403. &lt;p&gt;Hier volgt het eindrapport van commissievoorzitter Sander Aarts:&lt;/p&gt;
  18404. &lt;p&gt;Zodra je een online ledenlijst voorziet van extra functionaliteit, neigt het al gauw naar een online community. Vandaar dat de Commissie Openbaar Ledenregister besloten heeft het register in eerste instantie zo simpel mogelijk te houden en het stokje vervolgens door te geven aan de Commissie Online Community, die het dan vanuit een iets breder perspectief kan benaderen.&lt;/p&gt;
  18405. &lt;p&gt;De commissie had als &#39;opdracht&#39; de volgende 3 vragen te beantwoorden:&lt;/p&gt;
  18406. &lt;h2&gt;1. Welke leden zullen er precies in het Openbaar Ledenregister getoond worden?&lt;/h2&gt;
  18407. &lt;p&gt;Commissie:
  18408. Alle leden.
  18409. Aangezien er echter nog geen contributie geheven is, en er dus officieel nog geen leden zijn, zullen in eerste instantie alle potentiële leden waarvan het adres bekend is getoond worden. Zodra er gestart wordt met het innen van contributie en er minimaal 50 betalende leden zijn zullen alleen deze &#39;werkelijke&#39; leden worden getoond.&lt;/p&gt;
  18410. &lt;h2&gt;2. Welke informatie zal er precies in het Openbaar Ledenregister getoond worden?&lt;/h2&gt;
  18411. &lt;p&gt;Commissie:
  18412. De naam van het lid en eventueel die van zijn/haar werkgever.
  18413. Omdat de lijst behoorlijk wat concurrenten (werkgevers/zelfstandigen) samenbrengt op een pagina en we degenen bovenaan de lijst, met name boven de vouw, niet teveel willen bevoordelen, hebben we ervoor gekozen om de lijst voorlopig niet te voorzien van links. De commissie is van mening dat een online community met persoonlijke profielpagina&#39;s betere mogelijkheden biedt om dit af te vangen.&lt;/p&gt;
  18414. &lt;h2&gt;3. Is er een reden te bedenken om geen openbaar ledenregister aan te leggen?&lt;/h2&gt;
  18415. &lt;p&gt;Commissie:
  18416. Afgezien van de zojuist genoemde onderlinge concurrentie hebben we geen bezwaar kunnen bedenken.&lt;/p&gt;
  18417. &lt;p&gt;De Commissie Openbaar Ledenregister is van mening dat zij, met het beantwoorden van deze vragen, haar taak vervuld heeft en dus ontbonden kan worden. De leden van deze commissie zijn allemaal overgegaan in de Online Community, en &lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;het ledenregister&lt;/a&gt; valt hier vanaf nu ook onder.&lt;/p&gt;
  18418. &lt;h2&gt;Commissie Online Community&lt;/h2&gt;
  18419. &lt;p&gt;Samen met drie nieuwe leden (Kor Dwarshuis, Arjan Eising en Tom-Eric Gerritsen) gaat de Commissie Online Community nu van start, met onderstaande vragen als richtlijnen:&lt;/p&gt;
  18420. &lt;ul&gt;
  18421. &lt;li&gt;Wat kunnen we doen om leden online met elkaar in contact te brengen?&lt;/li&gt;
  18422. &lt;li&gt;Wat kunnen we doen om de kennis van leden onderling te delen?&lt;/li&gt;
  18423. &lt;li&gt;Wat wordt de inhoud van de profielen van leden?&lt;/li&gt;
  18424. &lt;li&gt;(In hoeverre) moet er een mailinglist komen?&lt;/li&gt;
  18425. &lt;li&gt;(In hoeverre) moet er een forum komen?&lt;/li&gt;
  18426. &lt;li&gt;Wat doen we met andere community websites, zoals LinkedIn en Facebook?&lt;/li&gt;
  18427. &lt;li&gt;Gaat &lt;a href=&quot;https://www.fronteers.nl/blog/2008/03/fronteers-op-irc&quot;&gt;IRC&lt;/a&gt; gelogged worden, en zijn die logs voor iedereen toegankelijk of alleen voor leden?&lt;/li&gt;
  18428. &lt;/ul&gt;
  18429. </content>
  18430.  </entry>
  18431.  <entry>
  18432.    <title>Gesprek Fronteers.nl en FeWeb.be</title>
  18433.    <link href="https://www.fronteers.nl/nl/blog/2008/05/gesprek-fronteers-feweb"/>
  18434.    <updated>2008-05-07T00:00:00Z</updated>
  18435.    <id>https://www.fronteers.nl/nl/blog/2008/05/gesprek-fronteers-feweb</id>
  18436.    <content xml:lang="nl" type="html">&lt;p&gt;Op vrijdag 4 april hebben Arjan Eising en ik een gesprek gehad met &lt;a href=&quot;http://www.bartdewaele.be/&quot;&gt;Bart De Waele&lt;/a&gt;, bestuurslid van &lt;a href=&quot;http://feweb.be/&quot;&gt;FeWeb&lt;/a&gt;, de Vlaamse Federatie van Webontwikkelaars. Dit was bedoeld als kennismakingsgesprek en om te kijken of deze twee verenigingen eventueel tot een samenwerking kunnen komen.&lt;/p&gt;
  18437. &lt;p&gt;FeWeb heeft een andere insteek dan Fronteers; de leden zijn bedrijven en geen personen, en daardoor houdt FeWeb zich ook bezig met zaken zoals het berekenen van de totale economische waarde van de Vlaamse Internetwereld, of juridische en organisatorische aspecten; zaken waar Fronteers zich (vooralsnog) niet mee bezig houdt. (In Nederland zou dit ook eerder onder de auspiciën van het &lt;a href=&quot;http://www.pibn.nl/&quot;&gt;PIBN&lt;/a&gt; vallen.)&lt;/p&gt;
  18438. &lt;p&gt;Niettemin zijn er voldoende aanknopingspunten om tot verdere samenwerking te komen. Net als Fronteers houdt FeWeb zich actief bezig met Educatie: ze hebben onlangs alle Vlaamse hogescholen om de tafel gekregen om over de problemen in het webonderwijs te praten. Uiteraard willen we graag meer weten over de ervaringen die FeWeb daarmee heeft opgedaan.&lt;/p&gt;
  18439. &lt;p&gt;FeWeb wil graag meer weten over de Fronteers-diplomering, dat is wellicht iets dat FeWeb ook kan gebruiken om goede van minder goede front-enders te onderscheiden. Het zou dus kunnen dat de Fronteers-diplomering, als deze eenmaal klaar is, ook in Vlaanderen gebruikt zal worden.&lt;/p&gt;
  18440. &lt;p&gt;Hoewel we nog weinig concrete actiepunten hebben, hebben zowel Fronteers als FeWeb het gevoel dat een samenwerking logisch is en tot nuttige resultaten kan leiden.&lt;/p&gt;
  18441. </content>
  18442.  </entry>
  18443.  <entry>
  18444.    <title>Webrichtlijn 27 t/m 33: URL&#39;s</title>
  18445.    <link href="https://www.fronteers.nl/nl/blog/2008/05/webrichtlijnen-over-urls"/>
  18446.    <updated>2008-05-06T00:00:00Z</updated>
  18447.    <id>https://www.fronteers.nl/nl/blog/2008/05/webrichtlijnen-over-urls</id>
  18448.    <content xml:lang="nl" type="html">&lt;p&gt;Produceer unieke, onveranderende URL&#39;s (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/permanente-unieke-urls/produceren/#r-pd-4-1&quot;&gt;R-pd.4.1&lt;/a&gt;) Dynamisch gegenereerde URL&#39;s dienen nog steeds naar dezelfde inhoud te verwijzen als inhoud wordt gewijzigd of toegevoegd. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/permanente-unieke-urls/produceren/dynamische-urls/#r-pd-4-2&quot;&gt;R-pd.4.2&lt;/a&gt;) Vermijd het gebruik van sessies in URL&#39;s. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/permanente-unieke-urls/produceren/sessies/#r-pd-4-3&quot;&gt;R-pd.4.3&lt;/a&gt;) Zorg voor doorverwijzing naar de nieuwe locatie bij het verplaatsen van informatie. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/permanente-unieke-urls/produceren/doorverwijzing/#r-pd-4-4&quot;&gt;R-pd.4.4&lt;/a&gt;) Automatische doorverwijzing dient, indien mogelijk, uitgevoerd te worden door de server. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/permanente-unieke-urls/produceren/doorverwijzing/methodes/#r-pd-4-5&quot;&gt;R-pd.4.5&lt;/a&gt;) Gebruik vriendelijke URL&#39;s, die leesbaar en herkenbaar zijn. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/permanente-unieke-urls/vriendelijke-urls/#r-pd-4-6&quot;&gt;R-pd.4.6&lt;/a&gt;) Zet een leesbare, uitbreidbare directory-structuur op. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/permanente-unieke-urls/vriendelijke-urls/#r-pd-4-7&quot;&gt;R-pd.4.7&lt;/a&gt;)&lt;/p&gt;
  18449. &lt;p&gt;Helaas zitten vrijwel al deze punten niet binnen het bereik van een front-ender, en zijn we hierbij afhankelijk van het te gebruiken CMS, framework of back-end taal. Het enige wat wij kunnen doen, is &lt;em&gt;geen&lt;/em&gt; gebruik maken van frames en &lt;code&gt;&amp;lt;meta http-equiv=&amp;quot;refresh&amp;quot;&amp;gt;&lt;/code&gt;.&lt;/p&gt;
  18450. &lt;p&gt;Waar we het wel over kunnen hebben, zijn onze voorkeuren. Wat vind &lt;em&gt;jij&lt;/em&gt; een mooie &lt;a href=&quot;http://en.wikipedia.org/wiki/Uniform_Resource_Locator&quot;&gt;URL&lt;/a&gt; (of &lt;a href=&quot;http://en.wikipedia.org/wiki/Uniform_Resource_Identifier&quot;&gt;URI&lt;/a&gt;, of &lt;a href=&quot;http://en.wikipedia.org/wiki/Internationalized_Resource_Identifier&quot;&gt;IRI&lt;/a&gt;)?&lt;/p&gt;
  18451. &lt;p&gt;De webrichtlijnen spreken over het opzetten van een leesbare, uitbreidbare directory-structuur. Hoe doe je dit met bijvoorbeeld tags (die gecombineerd kunnen worden)?&lt;/p&gt;
  18452. &lt;p&gt;Als je wel de controle over de infrastructuur van de URL&#39;s hebt, hoe ver ga je dan? Zorg jij dat iedere pagina op slechts 1 URL te vinden is? Hoe ver ga je met HTTP? Denk je na over het verschil tussen een &lt;code&gt;301&lt;/code&gt; header, en een &lt;code&gt;302&lt;/code&gt;? En als een pagina verwijderd is, gebruik je dan een &lt;code&gt;410&lt;/code&gt;, in plaats van een &lt;code&gt;404&lt;/code&gt;?&lt;/p&gt;
  18453. &lt;p&gt;Hebben wij als front-enders, of de webrichtlijnen..als webrichtlijnen, genoeg overtuigingskracht (gehad) om grote, logge back-end systemen met nette URL&#39;s te laten werken? Of is dit vooral te danken aan SEO bedrijven en zoekmachines?&lt;/p&gt;
  18454. </content>
  18455.  </entry>
  18456.  <entry>
  18457.    <title>Locatie bijeenkomst 13 mei bekend</title>
  18458.    <link href="https://www.fronteers.nl/nl/blog/2008/04/locatie-bijeenkomst-mei"/>
  18459.    <updated>2008-04-28T00:00:00Z</updated>
  18460.    <id>https://www.fronteers.nl/nl/blog/2008/04/locatie-bijeenkomst-mei</id>
  18461.    <content xml:lang="nl" type="html">&lt;p&gt;De locatie van de bijeenkomst op 13 mei is Hotel Arena.&lt;/p&gt;
  18462. &lt;p&gt;Het adres van Hotel Arena is &lt;a href=&quot;http://maps.google.nl/maps?f=q&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=%27s-Gravesandestraat+51,+1092+AA+Amsterdam,+nederland&amp;amp;sll=52.360742,4.907541&amp;amp;sspn=0.013497,0.039911&amp;amp;ie=UTF8&amp;amp;ll=52.361345,4.915352&amp;amp;spn=0.026994,0.079823&amp;amp;t=h&amp;amp;z=14&quot;&gt;&#39;s-Gravesandestraat 51, 1092 AA Amsterdam&lt;/a&gt;.&lt;/p&gt;
  18463. &lt;p&gt;Voor meer informatie over de bijeenkomst, zie &lt;a href=&quot;https://www.fronteers.nl/blog/2008/04/bijeenkomst-mei&quot;&gt;de aankondiging&lt;/a&gt;.&lt;/p&gt;
  18464. </content>
  18465.  </entry>
  18466.  <entry>
  18467.    <title>Kings of Code</title>
  18468.    <link href="https://www.fronteers.nl/nl/blog/2008/04/kings-of-code"/>
  18469.    <updated>2008-04-28T00:00:00Z</updated>
  18470.    <id>https://www.fronteers.nl/nl/blog/2008/04/kings-of-code</id>
  18471.    <content xml:lang="nl" type="html">&lt;p&gt;Op 27 mei aanstaande zal in &lt;a href=&quot;http://www.dezwijger.nl/&quot;&gt;Pakhuis De Zwijger&lt;/a&gt; te Amsterdam het &lt;a href=&quot;http://kingsofcode.nl/&quot;&gt;Kings of Code congres&lt;/a&gt; plaatsvinden, gericht op web programmeurs, zowel front-end als back-end. Sprekers zijn &lt;a href=&quot;http://ejohn.org/&quot;&gt;John Resig&lt;/a&gt; (jQuery), &lt;a href=&quot;http://nate.koechley.com/&quot;&gt;Nate Koechley&lt;/a&gt; (Yahoo!), Mark Birbeck (&lt;a href=&quot;http://www.w3.org/&quot;&gt;W3C&lt;/a&gt;), Folke Lemaitre (&lt;a href=&quot;http://netlog.com/&quot;&gt;Netlog.com&lt;/a&gt;), Nate Abele (&lt;a href=&quot;http://www.cakephp.org/&quot;&gt;CakePHP&lt;/a&gt;) en ikzelf.&lt;/p&gt;
  18472. &lt;p&gt;Kaarten kosten € 160, maar er is een early bird korting van € 30, die tot 1 mei geldt. Het is nog maar een paar dagen tot 1 mei, maar gelukkig heeft Fronteers een promo-code gekregen, bij gebruik waarvan de korting van kracht zal blijven.&lt;/p&gt;
  18473. &lt;ul&gt;
  18474. &lt;li&gt;Promocode: fronteers&lt;/li&gt;
  18475. &lt;/ul&gt;
  18476. &lt;p&gt;We hopen op 27 mei enige Fronteers-leden te kunnen begroeten.&lt;/p&gt;
  18477. </content>
  18478.  </entry>
  18479.  <entry>
  18480.    <title>Voorlopige ledenlijst Fronteers gepubliceerd</title>
  18481.    <link href="https://www.fronteers.nl/nl/blog/2008/04/ledenlijst"/>
  18482.    <updated>2008-04-24T00:00:00Z</updated>
  18483.    <id>https://www.fronteers.nl/nl/blog/2008/04/ledenlijst</id>
  18484.    <content xml:lang="nl" type="html">&lt;p&gt;De &lt;a href=&quot;https://www.fronteers.nl/leden&quot;&gt;voorlopige ledenlijst&lt;/a&gt; van Fronteers is op de website gepubliceerd. Hierin staan alle leden waarvan het adres bekend is. Dit zijn er zo&#39;n 80, van de in de totaal 140 namen die in de database staan.&lt;/p&gt;
  18485. &lt;p&gt;Sta je er nog niet bij? Dan kan het zijn dat we simpelweg je adres nog niet hebben genoteerd. Geef je in dat geval nogmaals op via &lt;a href=&quot;https://www.fronteers.nl/inschrijven&quot;&gt;het aanmeldformulier&lt;/a&gt;. Let erop dat we alleen &lt;em&gt;persoonlijke&lt;/em&gt; adressen voor facturatie bijhouden, niet die van werkgevers. We hebben hiervoor gekozen, om een aantal vragen en mogelijke problemen voorlopig uit de weg te gaan.&lt;/p&gt;
  18486. &lt;p&gt;Het kan ook zijn dat je in de tussentijd een andere werkgever hebt gekregen. Vul om dit te wijzigen ook het aanmeldformulier nogmaals in, met de correcte gegevens. Inloggen op de site, zodat je zelf je gegevens aan kunt passen, wordt later mogelijk voor ieder lid.&lt;/p&gt;
  18487. &lt;p&gt;Vanaf ongeveer 10 mei zullen we beginnen met het innen van contributie bij de leden die op deze lijst staan. Zodra we de 50 contribuanten gepasseerd zijn (waarschijnlijk ergens in juni), zal de ledenlijst alleen de betalende leden bevatten.&lt;/p&gt;
  18488. &lt;p&gt;In een tweede fase zullen profielpagina&#39;s beschikbaar komen voor deze leden, waarbij de inhoud hiervan zal worden bepaald in overleg met de Commissie Online Community.&lt;/p&gt;
  18489. </content>
  18490.  </entry>
  18491.  <entry>
  18492.    <title>Bijeenkomst op 13 mei</title>
  18493.    <link href="https://www.fronteers.nl/nl/blog/2008/04/bijeenkomst-mei"/>
  18494.    <updated>2008-04-23T00:00:00Z</updated>
  18495.    <id>https://www.fronteers.nl/nl/blog/2008/04/bijeenkomst-mei</id>
  18496.    <content xml:lang="nl" type="html">&lt;p&gt;Er is alweer wat tijd verstreken sinds de vorige Fronteers-bijeenkomst. Daarom zijn we verheugd te kunnen melden dat het Amsterdamse bedrijf &lt;a href=&quot;http://everywebsolutions.nl/&quot;&gt;EveryWeb Solutions&lt;/a&gt; heeft aangeboden een nieuwe bijeenkomst te verzorgen op dinsdag 13 mei, met twee interessante sprekers.&lt;/p&gt;
  18497. &lt;p&gt;Iemand van EveryWeb Solutions heeft vroeger computerles aan blinden en slechtzienden gegeven, heeft daar flinke ervaring met toegankelijkheid voor deze groepen aan overgehouden, en zal ons hier iets over vertellen. Daarna zal Ruud Steltenpool een presentatie over SVG, de mogelijkheden en problemen houden.&lt;/p&gt;
  18498. &lt;p&gt;De zaal gaat om 18:30 uur open, de eerste sessie zal rond 19:00 uur aanvang nemen. Er zal ook gelegenheid zijn voor bier en networking.&lt;/p&gt;
  18499. &lt;p&gt;De locatie voor deze bijeenkomst is de Kloosterzaal van Hotel Arena. Het adres van Hotel Arena is &lt;a href=&quot;http://maps.google.nl/maps?f=q&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=%27s-Gravesandestraat+51,+1092+AA+Amsterdam,+nederland&amp;amp;sll=52.360742,4.907541&amp;amp;sspn=0.013497,0.039911&amp;amp;ie=UTF8&amp;amp;ll=52.361345,4.915352&amp;amp;spn=0.026994,0.079823&amp;amp;t=h&amp;amp;z=14&quot;&gt;&#39;s-Gravesandestraat 51, 1092 AA Amsterdam&lt;/a&gt;.&lt;/p&gt;
  18500. &lt;h2&gt;RSVP&lt;/h2&gt;
  18501. &lt;p&gt;EveryWeb Solutions verzoekt mensen die willen langskomen zich van tevoren op te geven. Dit kan middels &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;het aanmeldingsformulier&lt;/a&gt; op deze site.&lt;/p&gt;
  18502. </content>
  18503.  </entry>
  18504.  <entry>
  18505.    <title>Webrichtlijn 25 &amp;amp; 26: Lijsten</title>
  18506.    <link href="https://www.fronteers.nl/nl/blog/2008/04/webrichtlijnen-lijsten"/>
  18507.    <updated>2008-04-22T00:00:00Z</updated>
  18508.    <id>https://www.fronteers.nl/nl/blog/2008/04/webrichtlijnen-lijsten</id>
  18509.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik ol (ordered list) en ul (unordered list) elementen voor het aangeven van lijsten. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/lijsten/#r-pd-3-13&quot;&gt;R-pd.3.13&lt;/a&gt;) Gebruik het dl (definition list), het dt (definition term) en dd (definition data) element voor het aangeven van een lijst met definities. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/lijsten/#r-pd-3-14&quot;&gt;R-pd.3.14&lt;/a&gt;)&lt;/p&gt;
  18510. &lt;p&gt;De webrichtlijnen raden voor (uitgebreide) inhoudsopgaven het gebruik van het &lt;code&gt;&amp;lt;ul&amp;gt;&lt;/code&gt; element aan. Zijn we het daar mee eens?&lt;/p&gt;
  18511. &lt;p&gt;Gebruik jij voor menuutjes wel eens een &lt;code&gt;&amp;lt;ol&amp;gt;&lt;/code&gt; element? Wanneer?&lt;/p&gt;
  18512. &lt;p&gt;En zijn er situaties waarbij een ongeordende lijst toch nummering kan hebben? Met andere woorden: is &lt;em&gt;geordend&lt;/em&gt; hetzelfde als &lt;em&gt;genummerd&lt;/em&gt;?&lt;/p&gt;
  18513. &lt;p&gt;Gebruik jij definitielijsten ook wel eens voor iets anders dan een lijst met begrippen en definities? Is het gebruik bij &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/onderwijs/bronnen/tips-en-tutorials&quot;&gt;de bronnen&lt;/a&gt; en hier in de reacties volgens jou goed gebruik van &lt;code&gt;&amp;lt;dl&amp;gt;&lt;/code&gt;?&lt;/p&gt;
  18514. </content>
  18515.  </entry>
  18516.  <entry>
  18517.    <title>Webrichtlijn 22, 23 &amp;amp; 24: Referenties en citaten</title>
  18518.    <link href="https://www.fronteers.nl/nl/blog/2008/04/webrichtlijnen-referenties-citaten"/>
  18519.    <updated>2008-04-15T00:00:00Z</updated>
  18520.    <id>https://www.fronteers.nl/nl/blog/2008/04/webrichtlijnen-referenties-citaten</id>
  18521.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik het cite element voor referenties naar personen en titels. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/referenties-citaten/#r-pd-3-10&quot;&gt;R-pd.3.10&lt;/a&gt;) Vermijd het gebruik van het q (quotation) element. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/referenties-citaten/#r-pd-3-11&quot;&gt;R-pd.3.11&lt;/a&gt;) Gebruik het blockquote element voor het aangeven van (lange) citaten. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/referenties-citaten/#r-pd-3-12&quot;&gt;R-pd.3.12&lt;/a&gt;)&lt;/p&gt;
  18522. &lt;p&gt;Zijn we het wat betreft referenties naar personen eens met de &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/referenties-citaten/#referenties&quot;&gt;Webrichtlijnen&lt;/a&gt; of met &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/section-text-level.html#the-cite&quot;&gt;HTML 5&lt;/a&gt;? En waar heb jij &lt;code&gt;&amp;lt;cite&amp;gt;&lt;/code&gt; verder wel eens gebruikt?&lt;/p&gt;
  18523. &lt;p&gt;Over het te vermijden &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; element is een tijdje terug een &lt;a href=&quot;http://stijlgids.overheid.nl/actueel/weblog/afkortingen_en_citaten_aangeven/&quot;&gt;interessante discussie&lt;/a&gt; gehouden op het &lt;a href=&quot;http://stijlgids.overheid.nl/actueel/weblog/&quot;&gt;Stijlgids Weblog&lt;/a&gt;. Hebben wij daar nog iets aan toe te voegen? En levert HTML 5 weer &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/section-text-level.html#q&quot;&gt;een oplossing&lt;/a&gt;?&lt;/p&gt;
  18524. &lt;p&gt;Over het &lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt; element is iedereen het volgens mij al eens. Die is puur en alleen om een stuk tekst in te laten springen, en de Webrichtlijnen hebben het daar natuurlijk gewoon verkeerd.&lt;/p&gt;
  18525. </content>
  18526.  </entry>
  18527.  <entry>
  18528.    <title>Webrichtlijn 19, 20 &amp;amp; 21: Tekstopmaak, definities, wijzigingen, superscript en subscript</title>
  18529.    <link href="https://www.fronteers.nl/nl/blog/2008/04/webrichtlijnen-definities-wijzigingen"/>
  18530.    <updated>2008-04-08T00:00:00Z</updated>
  18531.    <id>https://www.fronteers.nl/nl/blog/2008/04/webrichtlijnen-definities-wijzigingen</id>
  18532.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik het dfn (definition) element voor het aangeven van termen, elders gedefiniëerd in een definitielijst. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/tekstopmaak/#r-pd-3-7&quot;&gt;R-pd.3.7&lt;/a&gt;) Gebruik het ins (insertion) en del (deletion) element voor het aangeven van regelmatige wijzigingen in de inhoud van een pagina. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/tekstopmaak/#r-pd-3-8&quot;&gt;R-pd.3.8&lt;/a&gt;) Vermijd het gebruik van het sup (superscript) en sub (subscript) element waar mogelijk. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/tekstopmaak/#r-pd-3-9&quot;&gt;R-pd.3.9&lt;/a&gt;)&lt;/p&gt;
  18533. &lt;p&gt;Even vlug door de laatste 3 richtlijnen van tekstopmaak heen, wat natuurlijk niet wil zeggen dat de discussie hierover ook kort moet zijn!&lt;/p&gt;
  18534. &lt;h2&gt;Definities&lt;/h2&gt;
  18535. &lt;p&gt;Wat betreft het &lt;code&gt;&amp;lt;dfn&amp;gt;&lt;/code&gt; element zijn de webrichtlijnen lekker summier:&lt;/p&gt;
  18536. &lt;blockquote&gt;
  18537. &lt;p&gt;Termen die geschikt zijn voor opname in een definitielijst of glossary elders op de pagina of website, kan worden opgemaakt met het dfn (definition) element.&lt;/p&gt;
  18538. &lt;/blockquote&gt;
  18539. &lt;p&gt;&lt;em&gt;Wie&lt;/em&gt; doet dit? En wat heb je eraan als je het doet?&lt;/p&gt;
  18540. &lt;h2&gt;Wijzigingen&lt;/h2&gt;
  18541. &lt;blockquote&gt;
  18542. &lt;p&gt;Als de informatie op een pagina aan regelmatige wijziging onderhevig is en het belangrijk is dat deze wijzigingen als zodanig zichtbaar zijn, gebruik dan het ins (insert) element voor toevoegingen en het del (deletion) element voor verwijderingen.&lt;/p&gt;
  18543. &lt;/blockquote&gt;
  18544. &lt;p&gt;Dit betekent dus dat een automatische &lt;a href=&quot;http://en.wikipedia.org/wiki/Diff&quot;&gt;&lt;code&gt;diff&lt;/code&gt;&lt;/a&gt; met &lt;code&gt;&amp;lt;ins&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;del&amp;gt;&lt;/code&gt; elementen niet per se goed is. Of niet?&lt;/p&gt;
  18545. &lt;p&gt;Op welke site heb jij markup voor wijzigingen in proza wel eens goed toegepast gezien?&lt;/p&gt;
  18546. &lt;p&gt;En heb jij deze twee elementen wel eens oneigenlijk gebruikt om een validerende pagina op te leveren? Opeens &amp;quot;mag&amp;quot; dit dan:&lt;/p&gt;
  18547. &lt;pre&gt;&lt;code&gt;&amp;lt;a href=&amp;quot;#foo&amp;quot;&amp;gt;
  18548. &amp;lt;ins&amp;gt;
  18549.  &amp;lt;div&amp;gt;
  18550.   &amp;lt;h3&amp;gt;Foo&amp;lt;/h3&amp;gt;
  18551.   &amp;lt;p&amp;gt;Bar&amp;lt;/p&amp;gt;
  18552.  &amp;lt;/div&amp;gt;
  18553. &amp;lt;/ins&amp;gt;
  18554. &amp;lt;/a&amp;gt;
  18555. &lt;/code&gt;&lt;/pre&gt;
  18556. &lt;h2&gt;Superscript en subscript&lt;/h2&gt;
  18557. &lt;p&gt;Hierin zijn de webrichtlijnen wel duidelijk: probeer &lt;code&gt;&amp;lt;sup&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;sub&amp;gt;&lt;/code&gt; te vermijden. Zijn we het daar mee eens? Zijn dit gevaarlijke elementen?&lt;/p&gt;
  18558. </content>
  18559.  </entry>
  18560.  <entry>
  18561.    <title>Handig: veel nuttige links voor front-end ontwikkelaars</title>
  18562.    <link href="https://www.fronteers.nl/nl/blog/2008/04/bronnen"/>
  18563.    <updated>2008-04-04T00:00:00Z</updated>
  18564.    <id>https://www.fronteers.nl/nl/blog/2008/04/bronnen</id>
  18565.    <content xml:lang="nl" type="html">&lt;p&gt;Zoals de meeste ervaren webontwikkelaars wel weten, is er veel onbetrouwbare informatie over het vak te vinden. In boeken, maar vooral op het internet. De meeste mensen die net met het vak beginnen weten dat niet. En dan kan het zomaar gebeuren dat iemand je wijsmaakt dat tabellen een heel handige manier zijn om een pagina op te maken. Of dat het helemaal niet nodig is om al die ingewikkelde codes te leren: je kunt de pagina&#39;s ook gewoon tekenen in Dreamweaver!&lt;/p&gt;
  18566. &lt;p&gt;Daarom leek het de commissie Onderwijs een goed idee om een collectie samen te stellen met links naar betrouwbare informatiebronnen over front-end ontwikkeling. Dit kan als startpunt dienen voor beginnende ontwikkelaars - en misschien dat zelfs een ervaren html&#39;er er nog iets van opsteekt. Daarnaast kan het een informatiebron zijn voor docenten. Ik heb hiervoor &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/onderwijs/bronnen&quot;&gt;een eerste opzet&lt;/a&gt; gemaakt, die vanaf vandaag op deze site te vinden is. Je vindt er links naar goede tutorials, gezaghebbende weblogs, handige tools en nog veel meer.&lt;/p&gt;
  18567. &lt;p&gt;De sites over Flash zijn uitgezocht door &lt;a href=&quot;http://reefscape.net/&quot;&gt;Bob Corporaal&lt;/a&gt;, maar de meeste andere links heb ik zelf gekozen. Ik heb ongetwijfeld nog een aantal goede sites gemist. Opmerkingen en aanvullingen zijn dan ook zeer welkom! Het is de bedoeling dat de pagina&#39;s vanaf nu bijgehouden en aangevuld worden.&lt;/p&gt;
  18568. </content>
  18569.  </entry>
  18570.  <entry>
  18571.    <title>Webrichtlijn 18: Tekstopmaak, afkortingen</title>
  18572.    <link href="https://www.fronteers.nl/nl/blog/2008/04/webrichtlijnen-tekstopmaak-afkortingen"/>
  18573.    <updated>2008-04-01T00:00:00Z</updated>
  18574.    <id>https://www.fronteers.nl/nl/blog/2008/04/webrichtlijnen-tekstopmaak-afkortingen</id>
  18575.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik het abbr (abbreviation) element voor afkortingen indien er onduidelijkheid zou kunnen ontstaan over de betekenis ervan, de afkorting een zeer belangrijke rol speelt in de tekst of wanneer de afkorting niet voorkomt in het Nederlands woordenboek. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/tekstopmaak/#r-pd-3-6&quot;&gt;R-pd.3.6&lt;/a&gt;)&lt;/p&gt;
  18576. &lt;p&gt;Zoals de webrichtlijnen ook opmerken wordt &lt;code&gt;&amp;lt;abbr&amp;gt;&lt;/code&gt; standaard niet ondersteund door Internet Explorer. &lt;code&gt;&amp;lt;acronym&amp;gt;&lt;/code&gt; werkt wel, maar heeft een andere betekenis. Welke gebruik jij? Pas je nog technieken toe om &lt;code&gt;&amp;lt;abbr&amp;gt;&lt;/code&gt; wel functioneel te maken binnen Internet Explorer? Hoe kijk je aan tegen de balans tussen het &lt;em&gt;nut&lt;/em&gt; van dit element, en de hoeveelheid werk om het juist te gebruiken?&lt;/p&gt;
  18577. </content>
  18578.  </entry>
  18579.  <entry>
  18580.    <title>Fronteers congres</title>
  18581.    <link href="https://www.fronteers.nl/nl/blog/2008/03/fronteers-congres"/>
  18582.    <updated>2008-03-19T00:00:00Z</updated>
  18583.    <id>https://www.fronteers.nl/nl/blog/2008/03/fronteers-congres</id>
  18584.    <content xml:lang="nl" type="html">&lt;p&gt;Zoals bekend heeft de Algemene Ledenvergadering afgelopen september besloten dat de eerstvolgende ALV zal worden opgeluisterd door een congres. De voorbereidingen hiervoor zijn inmiddels in gang gezet, en er begint een klein beetje duidelijkheid te komen. De gegevens hieronder zijn nog niet helemaal 100% zeker, maar het is wellicht verstandig alvast een aantekening in je agenda te maken en je baas op de hoogte te stellen. Bovendien willen we graag je mening weten over de inhoud.&lt;/p&gt;
  18585. &lt;ul&gt;
  18586. &lt;li&gt;Wanneer? Donderdag 11 en vrijdag 12 september&lt;/li&gt;
  18587. &lt;li&gt;Waar? &lt;a href=&quot;http://www.dezwijger.nl/&quot;&gt;Pakhuis De Zwijger&lt;/a&gt; te Amsterdam, net als vorig jaar&lt;/li&gt;
  18588. &lt;li&gt;Wat? Op dit moment zijn we nog met het programma bezig, en we willen daarover graag jouw input (zie onder).&lt;/li&gt;
  18589. &lt;li&gt;Kosten? In tegenstelling tot vorig jaar zullen er kosten verbonden zijn aan het congres. Het exacte bedrag is nog niet bekend, maar Fronteers-leden krijgen in elk geval korting.&lt;/li&gt;
  18590. &lt;/ul&gt;
  18591. &lt;p&gt;Aansluitend aan dit congres zal de Fronteers Algemene Ledenvergadering plaatsvinden; naar het zich laat aanzien op vrijdag 12 september na afloop van het congres. Hierover volgen nog nadere mededelingen zodra er meer bekend is. Uiteraard zal de ALV gratis toegankelijk zijn voor alle Fronteers-leden.&lt;/p&gt;
  18592. &lt;p&gt;Wat het programma van het congres betreft: hierover is de congres-organisatie nog in conclaaf. Op dit moment neigen we naar een sterke JavaScript-component, aangezien er veel interesse in deze schitterende taal is.&lt;/p&gt;
  18593. &lt;p&gt;Niettemin zijn nog lang niet alle puntjes op de i gezet, en daarom zouden we graag jouw mening weten. De vraag voor vandaag is dan ook: wat voor sessies zou je graag op het congres zien? Onderwerpen? Vorm? Sprekers? Andere opmerkingen?&lt;/p&gt;
  18594. </content>
  18595.  </entry>
  18596.  <entry>
  18597.    <title>Webrichtlijn 16: Paragrafen, nieuwe regels en alinea’s</title>
  18598.    <link href="https://www.fronteers.nl/nl/blog/2008/03/webrichtlijnen-alineas"/>
  18599.    <updated>2008-03-18T00:00:00Z</updated>
  18600.    <id>https://www.fronteers.nl/nl/blog/2008/03/webrichtlijnen-alineas</id>
  18601.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik het p (paragraph) element voor het aangeven van paragrafen. Gebruik niet het br (linebreak) element voor het scheiden van paragrafen. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/paragrafen/#r-pd-3-4&quot;&gt;R-pd.3.4&lt;/a&gt;)&lt;/p&gt;
  18602. &lt;p&gt;Onder de noemer &#39;Schrijf zowel grammaticaal correcte, als beschrijvende markup (R-pd.3.1)&#39; deze richtlijn over paragrafen.&lt;/p&gt;
  18603. &lt;p&gt;Wat is voor ons een paragraaf? Het &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/paragrafen/#vb-paragraaf-markup&quot;&gt;voorbeeld&lt;/a&gt; in de webrichtlijnen is vrij logisch. Maar waarvoor gebruik jij nog meer een &lt;code&gt;&amp;lt;p&amp;gt;&lt;/code&gt; element?&lt;/p&gt;
  18604. &lt;p&gt;Wanneer was de laatste keer dat jij &lt;code&gt;&amp;lt;br&amp;gt;&amp;lt;br&amp;gt;&lt;/code&gt; typte? Kun je hiermee leven als iemand anders het doet (zoals hier in de reacties :)?&lt;/p&gt;
  18605. &lt;p&gt;Heb je links naar documenten waar &lt;code&gt;&amp;lt;br&amp;gt;&lt;/code&gt; echt volledig mis&lt;code&gt;&amp;lt;br&amp;gt;&lt;/code&gt;uikt wordt? En weet jij, los van gedichten en adressen, nog een legitieme toepassing voor dit element?&lt;/p&gt;
  18606. </content>
  18607.  </entry>
  18608.  <entry>
  18609.    <title>Webrichtlijn 13, 14 &amp;amp; 15: Beschrijvende markup, kopregels</title>
  18610.    <link href="https://www.fronteers.nl/nl/blog/2008/03/webrichtlijnen-beschrijvende-markup-kopregels"/>
  18611.    <updated>2008-03-11T00:00:00Z</updated>
  18612.    <id>https://www.fronteers.nl/nl/blog/2008/03/webrichtlijnen-beschrijvende-markup-kopregels</id>
  18613.    <content xml:lang="nl" type="html">&lt;p&gt;Schrijf zowel grammaticaal correcte, als beschrijvende markup. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/#r-pd-3-1&quot;&gt;R-pd.3.1&lt;/a&gt;) Gebruik markup voor kopregels die de hiërarchie van de informatie op de pagina uitdrukken. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/kopregels/#r-pd-3-2&quot;&gt;R-pd.3.2&lt;/a&gt;) Sla in de markup geen niveaus in de hiërarchie van kopregels over. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/kopregels/#r-pd-3-3&quot;&gt;R-pd.3.3&lt;/a&gt;)&lt;/p&gt;
  18614. &lt;p&gt;De webrichtlijnen leggen veel focus op &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/voorbeelden/&quot;&gt;semantische markup&lt;/a&gt;. &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/#beschrijvende-valide-verschil&quot;&gt;Validiteit wordt even aangehaald&lt;/a&gt; (hoewel dat &lt;em&gt;niet&lt;/em&gt; hetzelfde is als well-formedness). Gestreefd wordt naar zowel &lt;em&gt;grammaticaal correcte&lt;/em&gt; (valide) als &lt;em&gt;beschrijvende&lt;/em&gt; (semantische) markup. Ik denk dat we &lt;a href=&quot;https://www.fronteers.nl/blog/2008/01/webrichtlijnen-r-pd-2-1&quot;&gt;validiteit&lt;/a&gt; al aardig besproken hebben, dus laten we meteen beginnen met semantiek en &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/beschrijvende-markup/het-schrijven-van/kopregels/&quot;&gt;kopregels&lt;/a&gt;.&lt;/p&gt;
  18615. &lt;p&gt;In HTML 4.01 hebben we &lt;a href=&quot;http://www.w3.org/TR/html4/struct/global.html#h-7.5.5&quot;&gt;de keuze&lt;/a&gt; uit &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;h2&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;h3&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;h4&amp;gt;&lt;/code&gt;, &lt;code&gt;&amp;lt;h5&amp;gt;&lt;/code&gt; en &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt;, waarmee we de hiërarchie van de informatie op een pagina kunnen uitdrukken. Volgens de webrichtlijnen mogen we geen niveau overslaan op een pagina. Hoeveel CMS&#39;en volgen die richtlijn ook echt?&lt;/p&gt;
  18616. &lt;p&gt;Wat doe jij meestal met de &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;? Zet je het logo van een site wel eens op het hoogste niveau (zoals hier op fronteers.nl)? Waarom wel/niet? En gebruik jij wel eens meerdere &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;&#39;tjes op 1 pagina?&lt;/p&gt;
  18617. &lt;p&gt;Geef je navigatiemenu&#39;s ook altijd een kop? En hou je daarbij rekening met de hiërarchie in de pagina, of zet je daar soms stiekem gewoon een &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt; boven? :)&lt;/p&gt;
  18618. &lt;p&gt;Zijn er trouwens SEO experts die meelezen en hierover nog iets kunnen vertellen? Hoe belangrijk vinden zoekmachines een goede koppenstructuur? En is het echt zo dat (verborgen) koppen boven een menu de overige kopjes op datzelfde niveau in een pagina minder belangrijk maken? En wat vindt de SEO wereld van bijvoorbeeld &lt;code&gt;&amp;lt;h2&amp;gt;&amp;lt;img src=&amp;quot;...&amp;quot; alt=&amp;quot;Koptekst&amp;quot;&amp;gt;&amp;lt;/h2&amp;gt;&lt;/code&gt;?&lt;/p&gt;
  18619. &lt;p&gt;Tot slot: wat vinden we van toekomstige oplossingen die bijvoorbeeld &lt;a href=&quot;http://www.w3.org/TR/xhtml2/mod-structural.html#sec_8.5.&quot;&gt;XHTML 2&lt;/a&gt; en &lt;a href=&quot;http://www.whatwg.org/specs/web-apps/current-work/multipage/section-sections.html#headings&quot;&gt;HTML 5&lt;/a&gt; voor ogen hebben?&lt;/p&gt;
  18620. </content>
  18621.  </entry>
  18622.  <entry>
  18623.    <title>Fronteers op IRC</title>
  18624.    <link href="https://www.fronteers.nl/nl/blog/2008/03/fronteers-op-irc"/>
  18625.    <updated>2008-03-06T00:00:00Z</updated>
  18626.    <id>https://www.fronteers.nl/nl/blog/2008/03/fronteers-op-irc</id>
  18627.    <content xml:lang="nl" type="html">&lt;p&gt;Vanaf heden is het IRC kanaal #fronteers op freenode - &lt;a href=&quot;irc://irc.freenode.net/fronteers&quot;&gt;irc://irc.freenode.net/fronteers&lt;/a&gt; - opgericht. De doelstelling bij dit kanaal is om een zeer laagdrempelige vorm van communicatie aan te bieden voor alle Fronteers leden, voor zaken waar je geen email aan zou verspillen, maar die toch nuttig kunnen zijn om af en toe eens met mede front-enders te bespreken.&lt;/p&gt;
  18628. &lt;p&gt;Natuurlijk is IRC niet een medium wat iedereen aanspreekt (net als mailinglists dat niet zijn, en web forums niet, en facebook niet, en...), en niemand wordt dan ook geacht hierin aanwezig te zijn, noch zal dit IRC kanaal ooit essentiëel zijn voor betrokkenheid bij de vereniging. Maar mocht IRC &lt;em&gt;wel&lt;/em&gt; jouw medium zijn, dan is dit kanaal vanaf heden dus beschikbaar. Ook niet-leden zijn natuurlijk welkom. De commissie Online Community zal zich binnenkort uiten over andere online vormen van communicatie.&lt;/p&gt;
  18629. &lt;p&gt;Het is met het opzetten van een nieuw IRC kanaal altijd een gok hoe deze zal lopen. Misschien blijkt er helemaal geen animo voor te zijn, en blijft het kanaal na de eerste paar weken volledig uitgestorven. Misschien wordt het een babbel en klets kanaal met weinig toegevoegde waarde. Maar misschien weet het de juiste balans te vinden van low-volume, high-signal interactie, met een mix van technische vragen en sociale interactie. Het is een experiment, en we zullen vanzelf zien hoe het loopt.&lt;/p&gt;
  18630. &lt;p&gt;Mocht je nog nooit van IRC gebruik gemaakt hebben, dan heeft Wikipedia &lt;a href=&quot;http://en.wikipedia.org/wiki/List_of_IRC_clients&quot;&gt;een lijst met mogelijke IRC clients&lt;/a&gt;. Het laagdrempeligst zijn waarschijnlijk de ingebouwde IRC clients van Opera en SeaMonkey, waarbij deze laatste ook als &lt;a href=&quot;https://addons.mozilla.org/en-US/firefox/addon/16&quot;&gt;extensie voor Firefox&lt;/a&gt; beschikbaar is. Als je een IRC client hebt geïnstalleerd zou je vervolgens op de link uit de eerste paragraaf moeten kunnen klikken om automatisch naar het IRC kanaal te gaan. Via je browser kun je &lt;a href=&quot;https://webchat.freenode.net/?channels=fronteers&quot;&gt;freenode Web IRC&lt;/a&gt; gebruiken.&lt;/p&gt;
  18631. &lt;p&gt;Tenslotte nog een policy puntje: we volgen de &lt;a href=&quot;http://freenode.net/channel_guidelines.shtml&quot;&gt;freenode guidelines&lt;/a&gt; en publiceren geen logs voor dit kanaal. Toch zullen individuele deelnemers aan de conversatie wel logs bijhouden, dus vergeet niet dat IRC een publiek medium is.&lt;/p&gt;
  18632. </content>
  18633.  </entry>
  18634.  <entry>
  18635.    <title>Webrichtlijn 12: Web Content Accessibility Guidelines (WCAG) 1.0</title>
  18636.    <link href="https://www.fronteers.nl/nl/blog/2008/03/webrichtlijnen-wcag"/>
  18637.    <updated>2008-03-04T00:00:00Z</updated>
  18638.    <id>https://www.fronteers.nl/nl/blog/2008/03/webrichtlijnen-wcag</id>
  18639.    <content xml:lang="nl" type="html">&lt;p&gt;Bouw een website volgens de richtlijnen van de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/webstandaarden/wcag/#r-pd-2-9&quot;&gt;R-pd.2.9&lt;/a&gt;)&lt;/p&gt;
  18640. &lt;p&gt;Weinig aan toe te voegen...&lt;/p&gt;
  18641. &lt;p&gt;Of misschien toch, met de &lt;a href=&quot;http://wcagsamurai.org/errata/errata.html&quot;&gt;Samurai Errata&lt;/a&gt;? ;-)&lt;/p&gt;
  18642. </content>
  18643.  </entry>
  18644.  <entry>
  18645.    <title>Onderzoek naar marktplaats voor freelance opdrachten</title>
  18646.    <link href="https://www.fronteers.nl/nl/blog/2008/03/onderzoek-naar-marktplaats-voor-freelance-opdrachten"/>
  18647.    <updated>2008-03-03T00:00:00Z</updated>
  18648.    <id>https://www.fronteers.nl/nl/blog/2008/03/onderzoek-naar-marktplaats-voor-freelance-opdrachten</id>
  18649.    <content xml:lang="nl" type="html">&lt;p&gt;Pim Hoogendoorn zoekt naar front-end programmeurs die hij voor zijn afstudeerproject kan interviewen. Hieronder staat zijn boodschap.&lt;/p&gt;
  18650. &lt;p&gt;Nee, geen artikel over het komen tot een betere aansluiting tussen afgestudeerden en de front-end markt. Wel een verzoek van een student bezig in zijn afstudeerjaar. Aangenaam, &lt;a href=&quot;http://www.willenium.nl/&quot;&gt;Pim Hoogendoorn&lt;/a&gt;, student &lt;a href=&quot;http://www.voltijd.hva.nl/interactieve-media/&quot;&gt;Interactieve Media&lt;/a&gt; aan de Hogeschool van Amsterdam. De opleiding om Interactieve Media Professional te worden of zoals ik; een front-end developer.&lt;/p&gt;
  18651. &lt;p&gt;Ik zit inmiddels in het laatste jaar en ben bezig met mijn afstudeerproject omtrent een online marktplaats voor freelancers. Deze marktplaats moet gevuld gaan worden met korte termijn opdrachten voor freelancers. Denk bij korte termijn aan opdrachten van 1 a 2 weken tot maximaal twee maanden. Ook kunnen freelancers zich aanmelden en hun beschikbaarheid tonen. Deze marktplaats zal zich eerst richten op front- en back-end developers. En misschien in de toekomst op opdrachten in andere branches.&lt;/p&gt;
  18652. &lt;p&gt;Nu heb ik een enquete gemaakt voor freelancers om mij te helpen bij mijn onderzoek naar deze marktplaats. En nu wil ik u als lezer uitnodigen om &lt;a href=&quot;http://www.zoomerang.com/survey.zgi?p=WEB227HW7U58M8&quot;&gt;mijn enquete&lt;/a&gt; in te vullen.&lt;/p&gt;
  18653. &lt;p&gt;Alvast bedankt voor uw medewerking. En misschien schrijf ik dat artikel over de betere aansluiting later nog eens. Ik spreek tenslotte uit ervaring.&lt;/p&gt;
  18654. </content>
  18655.  </entry>
  18656.  <entry>
  18657.    <title>Communicatie tussen design en development</title>
  18658.    <link href="https://www.fronteers.nl/nl/blog/2008/02/communicatie-tussen-design-en-development"/>
  18659.    <updated>2008-02-25T00:00:00Z</updated>
  18660.    <id>https://www.fronteers.nl/nl/blog/2008/02/communicatie-tussen-design-en-development</id>
  18661.    <content xml:lang="nl" type="html">&lt;p&gt;Fronteers-lid Reinier Ladan zoekt naar front-end programmeurs die hij voor zijn afstudeerscriptie kan interviewen. Hieronder staat zijn boodschap.&lt;/p&gt;
  18662. &lt;p&gt;Het web is veranderd. Interactieve websites heten tegenwoordig Rich Internet Applications en Web 2.0 is geen modeverschijnsel meer. Steeds meer interactie vindt plaats binnen een webpagina zonder naar een andere url te springen. Ook de methodiek van het ontwikkelen van zulke producten en diensten is veranderd. Alles moet &#39;agile&#39; en met veel iteraties en uiteraard alles in Beta.&lt;/p&gt;
  18663. &lt;p&gt;Maar is de communicatie tussen designers en ontwikkelaars nog wel helder? Komt alles wat de designer heeft bedacht ook goed aan bij de ontwikkelaar? En snapt de ontwikkelaar dan ook meteen hoe een en ander te bouwen? Over dit raakvlak tussen interactiondesigners en front-end developers gaat mijn scriptie. Ik zoek front-end developers die hieraan willen meewerken. Hoe? Ik kom graag twee keer langs. De eerste keer om een interview van maximaal een uur af te nemen met vragen over de huidige flow van design naar front-end development binnen het bedrijf en mogelijke verbeteringen in de communicatie. Een tweede keer kom ik graag langs om mijn bevindingen en verbetervoorstellen voor te leggen en daarover te discussiëren.&lt;/p&gt;
  18664. &lt;p&gt;Ik hoop hiermee een methodiek te ontwikkelen waarmee designers en front-end developers op 1 lijn komen te liggen als het gaat om het ontwikkelen van RIA&#39;s en web 2.0 producten.&lt;/p&gt;
  18665. &lt;p&gt;Interesse? Mail me op &lt;a href=&quot;mailto:reinierl@gmail.com&quot;&gt;reinierl@gmail.com&lt;/a&gt; of bel met 0624872725. Mijn dank is groot!&lt;/p&gt;
  18666. </content>
  18667.  </entry>
  18668.  <entry>
  18669.    <title>Webrichtlijn 9: Cascading Style Sheets (CSS) Level 2.1</title>
  18670.    <link href="https://www.fronteers.nl/nl/blog/2008/02/webrichtlijnen-css"/>
  18671.    <updated>2008-02-19T00:00:00Z</updated>
  18672.    <id>https://www.fronteers.nl/nl/blog/2008/02/webrichtlijnen-css</id>
  18673.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik CSS Level-2.1 volgens de W3C specificatie voor het vormgeven van overheidswebsites. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/webstandaarden/css2-1/#r-pd-2-6&quot;&gt;R-pd.2.6&lt;/a&gt;)&lt;/p&gt;
  18674. &lt;p&gt;Eindelijk &#39;ns wat anders dan dat geneuzel over markup :) Laten we het eens gaan hebben over de presentatie van een website; Cascading Style Sheets.&lt;/p&gt;
  18675. &lt;p&gt;De &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/css/voordelen/&quot;&gt;voordelen van CSS&lt;/a&gt; zijn voor iedereen ondertussen waarschijnlijk wel bekend, maar het is niet verkeerd om ze nog eens door te nemen.&lt;/p&gt;
  18676. &lt;p&gt;&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/css/richtlijnen/#css-3&quot;&gt;CSS Level 3 wordt afgeraden&lt;/a&gt;, dus volgens de richtlijn mogen we alleen de volgende selectors gebruiken:&lt;/p&gt;
  18677. &lt;ul&gt;
  18678. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#universal-selector&quot;&gt;&lt;code&gt;*&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18679. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#type-selectors&quot;&gt;&lt;code&gt;E&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18680. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#descendant-selectors&quot;&gt;&lt;code&gt;E F&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18681. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#child-selectors&quot;&gt;&lt;code&gt;E &amp;gt; F&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18682. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#first-child&quot;&gt;&lt;code&gt;E:first-child&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18683. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes&quot;&gt;&lt;code&gt;E:link&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18684. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#link-pseudo-classes&quot;&gt;&lt;code&gt;E:visited&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18685. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes&quot;&gt;&lt;code&gt;E:active&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18686. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes&quot;&gt;&lt;code&gt;E:hover&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18687. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes&quot;&gt;&lt;code&gt;E:focus&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18688. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#lang&quot;&gt;&lt;code&gt;E:lang(c)&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18689. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors&quot;&gt;&lt;code&gt;E + F&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18690. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#attribute-selectors&quot;&gt;&lt;code&gt;E[foo]&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18691. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#attribute-selectors&quot;&gt;&lt;code&gt;E[foo=&amp;quot;warning&amp;quot;]&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18692. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#attribute-selectors&quot;&gt;&lt;code&gt;E[foo~=&amp;quot;warning&amp;quot;]&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18693. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#attribute-selectors&quot;&gt;&lt;code&gt;E[lang|=&amp;quot;en&amp;quot;]&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18694. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#class-html&quot;&gt;&lt;code&gt;DIV.warning&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18695. &lt;li&gt;&lt;a href=&quot;http://www.w3.org/TR/CSS21/selector.html#id-selectors&quot;&gt;&lt;code&gt;E#myid&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
  18696. &lt;/ul&gt;
  18697. &lt;p&gt;Wie gebruikt er al &lt;a href=&quot;http://www.w3.org/TR/css3-selectors/#selectors&quot;&gt;selectors uit CSS Level 3&lt;/a&gt;? Wat zijn daarbij je ervaringen?&lt;/p&gt;
  18698. &lt;p&gt;Hoe ga je om met IE-only stijlen als &lt;code&gt;zoom: 1;&lt;/code&gt; en &lt;code&gt;filter: alpha(opacity=25);&lt;/code&gt;? Gebruik je die gewoon, ondanks dat ze niet in de standaard zijn opgenomen? Dezelfde vraag natuurlijk voor &lt;code&gt;word-wrap: break-word;&lt;/code&gt;, &lt;code&gt;-moz-opacity&lt;/code&gt;, &lt;code&gt;-o-background-size&lt;/code&gt; en andersoortige eigenschappen die je niet weg kunt moffelen achter een &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/css/richtlijnen/ondersteuning-browsers/#conditional-comments&quot;&gt;conditional comment&lt;/a&gt;.&lt;/p&gt;
  18699. &lt;p&gt;En kan iedereen zich trouwens vinden in de &lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/css/richtlijnen/ondersteuning-browsers/#drie-groepen-browsers&quot;&gt;drie groepen browsers&lt;/a&gt; die de Webrichtlijnen onderscheidt?&lt;/p&gt;
  18700. &lt;p&gt;Zien we deze richtlijn als een beperking? Of als een handvat waar we wat aan hebben? Wanneer vind jij dat CSS Level 3 of modules daarvan ook toegestaan mogen worden?&lt;/p&gt;
  18701. </content>
  18702.  </entry>
  18703.  <entry>
  18704.    <title>Cursus front-end in de maak</title>
  18705.    <link href="https://www.fronteers.nl/nl/blog/2008/02/cursus-front-end"/>
  18706.    <updated>2008-02-14T00:00:00Z</updated>
  18707.    <id>https://www.fronteers.nl/nl/blog/2008/02/cursus-front-end</id>
  18708.    <content xml:lang="nl" type="html">&lt;p&gt;Degenen die de mailinglijst van Fronteers vanaf het begin gevolgd hebben, zullen weten dat ik destijds begonnen ben met het vertalen van &lt;a href=&quot;http://htmldog.com/&quot;&gt;HTMLdog.com&lt;/a&gt;. Op deze website staan heldere teksten die voor beginnende front-end ontwikkelaars een goed leermiddel kan zijn. Voor het vertaalwerk vroeg ik mensen te helpen, vele handen maken immers licht werk.&lt;/p&gt;
  18709. &lt;p&gt;Na een explosieve start met diverse vertalers, daalde spirit tot een nulpunt bij zowel mij als de andere vertalers toen de zomervakantie voorbij was. Dit is iets wat ik van mezelf -als aanstichter van het project- erg betreur. In de actieve tijd is een groot deel van de beginners artikelen vertaald. Het leek echt alsof alles binnen een maand klaar zou zijn.&lt;/p&gt;
  18710. &lt;p&gt;Het is de bedoeling een compleet nieuwe website op te zetten. Deze zal specifiek gericht zijn op docenten en studenten. We kunnen als front-end ontwikkelaars dan gemakkelijk mensen doorsturen, als die websites willen leren maken. Geen verwarrende artikelen voor gevorderden, geen storende nieuwsberichten welke alleen professionals begrijpen. De website zal een heldere plaats zijn om de cursus te volgen, of te downloaden. De vertaalde werken van HTMLdog zouden ook slechts de basis zijn van de website, waarna deze uitgebreid kan worden. Denk aan een basiscursus JavaScript.&lt;/p&gt;
  18711. &lt;p&gt;Maar zoals gezegd, is indertijd het project aan een stille dood gestorven. Daar wil ik nu echter verandering in brengen. Ik heb een planning gemaakt om in de komende maanden alle vertalingen gereed te maken, en de website goed getest online te plaatsen. Na de zomervakantie kan de cursus omarmd worden door onderwijzend Nederland en België.&lt;/p&gt;
  18712. &lt;p&gt;Hiervoor heb ik echter wat hulp nodig. De mensen die destijds hebben geholpen heb ik weer benaderd, maar wil toch een oproep doen om meer helpende handen te vinden. Als je graag mee wilt helpen, dan kun je &lt;a href=&quot;http://arjaneising.nl/about/#contact&quot;&gt;contact opnemen met mij&lt;/a&gt;. Ik zal je dan van meer informatie voorzien.&lt;/p&gt;
  18713. &lt;p&gt;Hierbij overigens ook direct een oproep voor nieuwe ideeën. Wat zou jij van een website met cursus als deze verwachten? Reacties kun je hier achterlaten.&lt;/p&gt;
  18714. </content>
  18715.  </entry>
  18716.  <entry>
  18717.    <title>Bestuurswijzigingen: penningmeester en secretaris</title>
  18718.    <link href="https://www.fronteers.nl/nl/blog/2008/02/bestuurswijzigingen-penningmeester-en-secretaris"/>
  18719.    <updated>2008-02-13T00:00:00Z</updated>
  18720.    <id>https://www.fronteers.nl/nl/blog/2008/02/bestuurswijzigingen-penningmeester-en-secretaris</id>
  18721.    <content xml:lang="nl" type="html">&lt;p&gt;Penningmeester gevonden; secretaris tijdelijk uit de running.&lt;/p&gt;
  18722. &lt;p&gt;Zoals bekend is Fronteers reeds sinds augustus op zoek naar een penningmeester, en heeft de financiele en administratieve afhandeling van het lidmaatschap enige vertraging opgelopen door het ontbreken daarvan.&lt;/p&gt;
  18723. &lt;p&gt;Gelukkig heeft er zich vorige week eindelijk iemand aangemeld: Krijn Hoetmer, die jullie reeds kennen van zijn inspanningen om de Fronteers-site in de lucht te krijgen en houden. Derhalve zal Krijn zich over de financiele zaken buigen, zodat de rest van het bestuur zich op andere dingen kan richten.&lt;/p&gt;
  18724. &lt;p&gt;Formeel wordt Krijn geen bestuurslid, aangezien hij niet door de ALV verkozen is. In praktijk draait hij wegens zijn website-werk overigens al enige tijd mee in het bestuur, dus er zal niet veel veranderen.&lt;/p&gt;
  18725. &lt;p&gt;Daarnaast gaat secretaris Tom Greuter er voor enige tijd uit wegens een operatie en herstelperiode. Tijdens zijn afwezigheid zal bestuurslid Arjan Eising zijn taken waarnemen. We wensen Tom een spoedig herstel; voorlopig is de verwachting dat hij rond eind mei weer in staat zal zijn zijn bestuursfunctie volledig te vervullen.&lt;/p&gt;
  18726. </content>
  18727.  </entry>
  18728.  <entry>
  18729.    <title>Webrichtlijn 7 &amp;amp; 8: Gebruik de Strict variant voor nieuwe websites, en ontwijk de Frameset variant</title>
  18730.    <link href="https://www.fronteers.nl/nl/blog/2008/02/webrichtlijnen-strict-markup"/>
  18731.    <updated>2008-02-12T00:00:00Z</updated>
  18732.    <id>https://www.fronteers.nl/nl/blog/2008/02/webrichtlijnen-strict-markup</id>
  18733.    <content xml:lang="nl" type="html">&lt;p&gt;Bij de bouw van een nieuwe website: gebruik van HTML 4.01 of XHTML 1.0 de Strict variant. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/webstandaarden/html4-01/#r-pd-2-4&quot;&gt;R-pd.2.4&lt;/a&gt;) Gebruik geen frames op overheidswebsites. Gebruik daarom ook niet van HTML 4.01 of XHTML 1.0 de Frameset variant. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/webstandaarden/html4-01/#r-pd-2-5&quot;&gt;R-pd.2.5&lt;/a&gt;)&lt;/p&gt;
  18734. &lt;p&gt;Dus...is er nog iemand die nieuwe templates met een Transitional doctype begint?&lt;/p&gt;
  18735. &lt;p&gt;Het lijkt alsof we een beetje in herhaling vallen, maar dat is ook zo ;) Misschien moeten we voor de discussie maar wat richtlijnen samen gaan pakken.&lt;/p&gt;
  18736. &lt;p&gt;Aangezien frames niet meer van deze tijd zijn en niet meer toegestaan zijn op overheidssites, wordt het gebruik van de Frameset doctype ook afgeraden. Is iedereen het met deze richtlijn eens? Zijn frames echt zo slecht voor toegankelijkheid?&lt;/p&gt;
  18737. &lt;p&gt;Heb jij in de afgelopen 2 jaar nog (i)frames gebruikt? Zo ja, waarvoor?&lt;/p&gt;
  18738. </content>
  18739.  </entry>
  18740.  <entry>
  18741.    <title>Verslag bijeenkomst 8 februari</title>
  18742.    <link href="https://www.fronteers.nl/nl/blog/2008/02/verslag-bijeenkomst"/>
  18743.    <updated>2008-02-11T00:00:00Z</updated>
  18744.    <id>https://www.fronteers.nl/nl/blog/2008/02/verslag-bijeenkomst</id>
  18745.    <content xml:lang="nl" type="html">&lt;p&gt;Een verslag van de bijeenkomst van afgelopen vrijdag is zojuist op de website gepubliceerd.&lt;/p&gt;
  18746. &lt;p&gt;Lees &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2008/info-nl&quot;&gt;het verslag&lt;/a&gt;.&lt;/p&gt;
  18747. </content>
  18748.  </entry>
  18749.  <entry>
  18750.    <title>Webrichtlijn 6: Gebruik bij voorkeur alleen de Strict variant (R-pd.2.3)</title>
  18751.    <link href="https://www.fronteers.nl/nl/blog/2008/02/webrichtlijnen-transitional-markup"/>
  18752.    <updated>2008-02-05T00:00:00Z</updated>
  18753.    <id>https://www.fronteers.nl/nl/blog/2008/02/webrichtlijnen-transitional-markup</id>
  18754.    <content xml:lang="nl" type="html">&lt;p&gt;Bij het aanpassen van een bestaande website: gebruik van HTML 4.01 of XHTML 1.0 alleen de Transitional variant als het gebruik van de Strict variant onmogelijk of onwenselijk is. (&lt;a href=&quot;http://www.webrichtlijnen.nl/handleiding/ontwikkeling/productie/webstandaarden/html4-01/#r-pd-2-3&quot;&gt;R-pd.2.3&lt;/a&gt;)&lt;/p&gt;
  18755. &lt;p&gt;Het lijkt een rekbaar begrip: &amp;quot;onmogelijk of onwenselijk&amp;quot;. Waar leg je de grens?&lt;/p&gt;
  18756. </content>
  18757.  </entry>
  18758.  <entry>
  18759.    <title>Bijeenkomst 8 februari is vol</title>
  18760.    <link href="https://www.fronteers.nl/nl/blog/2008/02/bijeenkomst-8-februari-is-vol"/>
  18761.    <updated>2008-02-05T00:00:00Z</updated>
  18762.    <id>https://www.fronteers.nl/nl/blog/2008/02/bijeenkomst-8-februari-is-vol</id>
  18763.    <content xml:lang="nl" type="html">&lt;p&gt;De Fronteersmeeting van aanstaande vrijdag 8 februari bij Info.nl is vol. We hebben inmiddels meer dan 50 aanmeldingen binnen en dat is wel zo&#39;n beetje het maximum dat in de kantine van &lt;a href=&quot;http://www.info.nl/&quot;&gt;Info.nl&lt;/a&gt; past.&lt;/p&gt;
  18764. &lt;p&gt;Diegenen die zich nu nog aanmelden voor de bijeenkomst zullen op een wachtlijst geplaatst worden. Mochten zich mensen afmelden, dan kunnen we de open plaatsen opvullen. Daarom wil ik met klem verzoeken of diegenen die zich al aangemeld hebben, maar bij nader inzien toch niet kunnen komen, zich af willen melden bij &lt;a href=&quot;mailto:tom@info.nl&quot;&gt;Tom Greuter&lt;/a&gt;. De sprekers van vrijdag, Peter-Paul Koch en Anne van Kesteren, zullen vast niet voor het laatst spreken op een Fronteersbijeenkomst, dus er komt ongetwijfeld nog een gelegenheid om hun te zien.&lt;/p&gt;
  18765. &lt;p&gt;De presentatie van Peter-Paul zal overigens niet gaan over de scheiding tussen presentatie en gedrag, zoals &lt;a href=&quot;https://www.fronteers.nl/blog/2008/01/fronteers-bijeenkomst-8-februari-amsterdam&quot;&gt;eerder&lt;/a&gt; aangekondigd, maar over de nieuwe versie van Internet Explorer, IE8. In zijn presentatie zal Peter-Paul niet alleen ingaan op het bekende ALA-artikel &lt;a href=&quot;http://www.alistapart.com/articles/beyonddoctype&quot;&gt;Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8&lt;/a&gt;, maar wil hij ook een overzicht geven van hoe een en ander nou precies gaat werken.&lt;/p&gt;
  18766. &lt;p&gt;&lt;em&gt;Update 11 februari&lt;/em&gt;: &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2008/info-nl&quot;&gt;Het verslag staat online&lt;/a&gt;.&lt;/p&gt;
  18767. </content>
  18768.  </entry>
  18769.  <entry>
  18770.    <title>Commissie Diplomering zoekt vragen</title>
  18771.    <link href="https://www.fronteers.nl/nl/blog/2008/01/commissie-diplomering-zoekt-vragen"/>
  18772.    <updated>2008-01-26T00:00:00Z</updated>
  18773.    <id>https://www.fronteers.nl/nl/blog/2008/01/commissie-diplomering-zoekt-vragen</id>
  18774.    <content xml:lang="nl" type="html">&lt;p&gt;De &lt;a href=&quot;http://fronteers.nl/vereniging/commissies/diplomering&quot;&gt;Commissie Diplomering&lt;/a&gt; is al aardig op stoom, de laatste maanden zijn we een aantal keren bij elkaar gekomen en we hebben op dit moment een redelijk uitgekristalliseerd plan geformuleerd. Voordat we dat helemaal openbaar gaan maken, willen we het wel eerst uittesten. En daar hebben we jullie hulp bij nodig. Een van de onderdelen van het &lt;em&gt;examen&lt;/em&gt; is namelijk een rondje theorie.&lt;/p&gt;
  18775. &lt;p&gt;Dit doen we om een zo objectief mogelijk oordeel te kunnen vellen. Het probleem met ons werkgebied is namelijk dat er heel moeilijk kan worden getest op een waarheid.&lt;/p&gt;
  18776. &lt;blockquote&gt;
  18777. &lt;p&gt;In our wonderful world of web design, there are 3,647 ways to accomplish the same goal. Approximately.&lt;/p&gt;
  18778. &lt;/blockquote&gt;
  18779. &lt;p&gt;Zo is het mogelijk om bijna ieder probleem op verschillende manieren op te lossen. Waar we dus naar op zoek zijn, zijn vragen over CSS en HTML die zo objectief mogelijk te toetsen zijn. Een goede plek om te beginnen is bij &lt;a href=&quot;http://www.w3.org/TR/&quot;&gt;de specificaties van het W3C&lt;/a&gt;. Bij deze dus de oproep om theorie vragen (en eventueel de bijbehorende antwoorden) over CSS en HTML in te sturen, zodat we zo snel mogelijk genoeg vragen hebben om een (proef)examen te houden.&lt;/p&gt;
  18780. &lt;p&gt;Mocht je hierover nog vragen hebben of meer informatie willen hebben, neem dan &lt;a href=&quot;http://wnas.nl/index.php/contact&quot;&gt;contact&lt;/a&gt; met me op of spreek me aan bij de volgende &lt;a href=&quot;https://www.fronteers.nl/blog/2008/01/fronteers-bijeenkomst-8-februari-amsterdam&quot;&gt;bijeenkomst&lt;/a&gt;.&lt;/p&gt;
  18781. </content>
  18782.  </entry>
  18783.  <entry>
  18784.    <title>Fronteersbijeenkomst 8 februari: 2e spreker bekend</title>
  18785.    <link href="https://www.fronteers.nl/nl/blog/2008/01/fronteersbijeenkomst-8-februari-2e-spreker-bekend"/>
  18786.    <updated>2008-01-24T00:00:00Z</updated>
  18787.    <id>https://www.fronteers.nl/nl/blog/2008/01/fronteersbijeenkomst-8-februari-2e-spreker-bekend</id>
  18788.    <content xml:lang="nl" type="html">&lt;p&gt;Na Peter-Paul Koch is nu ook de tweede spreker op de Fronteersbijeenkomst van 8 februari bekend: &lt;a href=&quot;http://annevankesteren.nl/&quot;&gt;Anne van Kesteren&lt;/a&gt;.&lt;/p&gt;
  18789. &lt;p&gt;Anne zal een korte presentatie geven over het onlangs door het W3C gepubliceerde &lt;a href=&quot;http://www.w3.org/TR/2008/WD-html5-20080122/&quot;&gt;HTML 5&lt;/a&gt; - de markuptaal van het Web. Na deze presentatie van circa vijftien minuten is er ruim tijd voor discussie.&lt;/p&gt;
  18790. &lt;p&gt;Zie de &lt;a href=&quot;https://www.fronteers.nl/blog/2008/01/fronteers-bijeenkomst-8-februari-amsterdam&quot;&gt;oude aankondiging&lt;/a&gt; voor het volledige programma van 8 februari. Om jezelf aan te melden, kun je &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning#formulier-1&quot;&gt;dit formulier&lt;/a&gt; gebruiken.&lt;/p&gt;
  18791. &lt;p&gt;&lt;em&gt;Update 11 februari&lt;/em&gt;: &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2008/info-nl&quot;&gt;Het verslag staat online&lt;/a&gt;.&lt;/p&gt;
  18792. </content>
  18793.  </entry>
  18794.  <entry>
  18795.    <title>Webrichtlijn 4: Gebruik HTML 4.01 of XHTML 1.0 (R-pd.2.1)</title>
  18796.    <link href="https://www.fronteers.nl/nl/blog/2008/01/webrichtlijnen-html-of-xhtml"/>
  18797.    <updated>2008-01-22T00:00:00Z</updated>
  18798.    <id>https://www.fronteers.nl/nl/blog/2008/01/webrichtlijnen-html-of-xhtml</id>
  18799.    <content xml:lang="nl" type="html">&lt;p&gt;Gebruik HTML 4.01 of XHTML 1.0 volgens de W3C specificaties voor de markup van overheidswebsites. (&lt;a href=&quot;http://webrichtlijnen.overheid.nl/handleiding/ontwikkeling/productie/webstandaarden/html4-01/#r-pd-2-1&quot;&gt;R-pd.2.1&lt;/a&gt;)&lt;/p&gt;
  18800. &lt;p&gt;Wat doe je als je van een partij als eis krijgt XHTML &lt;em&gt;1.1&lt;/em&gt; te gebruiken? Zoek je dan gewoon die mooie &lt;a href=&quot;http://hsivonen.iki.fi/doctype/&quot;&gt;Doctype&lt;/a&gt;? Of ga je &lt;a href=&quot;http://www.w3.org/TR/xhtml-media-types/#summary&quot;&gt;steigeren&lt;/a&gt;?&lt;/p&gt;
  18801. &lt;p&gt;Hoe is je ervaring met back-end ontwikkelaars en/of CMS pakketten? Welke problemen kom je wanneer tegen? Wanneer &amp;quot;laat je over je heen lopen&amp;quot; en wanneer niet?&lt;/p&gt;
  18802. &lt;p&gt;Hoe is de verdeling tussen HTML 4.01 en XHTML 1.0 in je werk? Heb je een persoonlijke voorkeur? Waarom? Hoe ver ga je als je voor een bepaalde smaak hebt gekozen? Laat je een &lt;code&gt;&amp;lt;br /&amp;gt;&lt;/code&gt; toe in HTML 4.01? Of een &lt;code&gt;&amp;lt;br&amp;gt;&lt;/code&gt; in een XHTML 1.0 document? Waarom zou het &lt;a href=&quot;http://hixie.ch/advocacy/xhtml&quot;&gt;iets uitmaken&lt;/a&gt; als alles als &lt;code&gt;text/html&lt;/code&gt; wordt verstuurd en browsers het toch als een tag-soepzooitje zien?&lt;/p&gt;
  18803. &lt;p&gt;En is deze hele discussie---en misschien de richtlijn zelf---nog wel relevant met &lt;a href=&quot;http://www.w3.org/html/wg/html5/&quot;&gt;HTML 5&lt;/a&gt; in het verschiet?&lt;/p&gt;
  18804. </content>
  18805.  </entry>
  18806.  <entry>
  18807.    <title>Commissie Openbaar Ledenregister</title>
  18808.    <link href="https://www.fronteers.nl/nl/blog/2008/01/commissie-openbaar-ledenregister"/>
  18809.    <updated>2008-01-17T00:00:00Z</updated>
  18810.    <id>https://www.fronteers.nl/nl/blog/2008/01/commissie-openbaar-ledenregister</id>
  18811.    <content xml:lang="nl" type="html">&lt;p&gt;Sander Aarts heeft zich aangemeld als voorzitter voor de commissie Openbaar Ledenregister. Deze commissie zoekt nog leden.&lt;/p&gt;
  18812. &lt;p&gt;De commissie zal zich in eerste instantie buigen over enkele vragen, die op de &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies/openbaar-ledenregister&quot;&gt;commissiepagina&lt;/a&gt; worden beschreven. Op deze pagina staat ook een formulier waarmee geinteresseerden zich als lid kunnen aanmelden.&lt;/p&gt;
  18813. &lt;p&gt;Naast Openbaar Ledenregister heeft de Algemene Ledenvergadering van 18 september nog vier andere commissies ingesteld:&lt;/p&gt;
  18814. &lt;ul&gt;
  18815. &lt;li&gt;Certificatie: dient Fronteers een formele, geaccrediteerde certificatie in te stellen in plaats van of naast een informele diplomering?&lt;/li&gt;
  18816. &lt;li&gt;Flash: wat kan Fronteers betekenen voor de Flash-gemeenschap?&lt;/li&gt;
  18817. &lt;li&gt;Online Community: op welke wijze kan een online community een bijdrage leveren aan Fronteers? Hoe dient deze online community er precies uit te zien?&lt;/li&gt;
  18818. &lt;li&gt;Webrichtlijnen: hoe kunnen we de Webrichtlijnen beter onder de aandacht brengen? Indien een Webrichtlijn in de praktijk voor problemen zorgt, kunnen we dan aanbevelingen doen voor een verbeterde versie?&lt;/li&gt;
  18819. &lt;/ul&gt;
  18820. &lt;p&gt;Voor geen van deze vier commissies hebben zich nog leden aangemeld. Mocht je geinteresseerd zijn een van deze commissies als voorzitter te gaan opzetten, dan kan je &lt;a href=&quot;https://www.fronteers.nl/contact&quot;&gt;contact&lt;/a&gt; met ons opnemen.&lt;/p&gt;
  18821. </content>
  18822.  </entry>
  18823.  <entry>
  18824.    <title>Webrichtlijn 3: Niet rekenen op optionele technologie (R-pd.1.3)</title>
  18825.    <link href="https://www.fronteers.nl/nl/blog/2008/01/webrichtlijnen-optionele-technologie"/>
  18826.    <updated>2008-01-15T00:00:00Z</updated>
  18827.    <id>https://www.fronteers.nl/nl/blog/2008/01/webrichtlijnen-optionele-technologie</id>
  18828.    <content xml:lang="nl" type="html">&lt;p&gt;Maak de functie van de website niet afhankelijk van optionele technologie, zoals CSS en client-side script: optionele technologie dient de informatie op de site en het gebruik ervan te complementeren en niet de toegang ertoe te belemmeren wanneer deze technologie niet ondersteund wordt. (&lt;a href=&quot;http://webrichtlijnen.overheid.nl/handleiding/ontwikkeling/productie/filosofie/gelaagd-bouwen/optionele-technologie/#r-pd-1-3&quot;&gt;R-pd.1.3&lt;/a&gt;)&lt;/p&gt;
  18829. &lt;p&gt;Volgens de richtlijn zijn er uitzonderingen. Ben jij het met die uitzonderingen eens?&lt;/p&gt;
  18830. &lt;p&gt;Hou je rekening met het feit dat afbeeldingen uit kunnen staan? En dan niet met betrekking tot &lt;a href=&quot;http://annevankesteren.nl/2004/12/alt-attribute&quot;&gt;het &lt;code&gt;alt&lt;/code&gt; attribuut&lt;/a&gt;, maar met oog op &lt;code&gt;image replacement&lt;/code&gt; technieken (&lt;code&gt;text-indent: -9999px; background-image: url(foo.png);&lt;/code&gt; bijvoorbeeld). Hoe ver ga je?&lt;/p&gt;
  18831. &lt;p&gt;Voeg jij HTML met functionaliteit waar JavaScript voor vereist is altijd toe met JavaScript zelf? Of maak je soms een uitzondering? In welke gevallen?&lt;/p&gt;
  18832. &lt;p&gt;Wanneer adviseer je klanten of opdrachtgevers trouwens &lt;a href=&quot;http://webrichtlijnen.overheid.nl/handleiding/ontwikkeling/productie/filosofie/gelaagd-bouwen/site-aanpassen/&quot;&gt;om de hele site opnieuw te (laten) bouwen&lt;/a&gt;?&lt;/p&gt;
  18833. </content>
  18834.  </entry>
  18835.  <entry>
  18836.    <title>Fronteers-bijeenkomst: 8 februari Amsterdam</title>
  18837.    <link href="https://www.fronteers.nl/nl/blog/2008/01/fronteers-bijeenkomst-8-februari-amsterdam"/>
  18838.    <updated>2008-01-11T00:00:00Z</updated>
  18839.    <id>https://www.fronteers.nl/nl/blog/2008/01/fronteers-bijeenkomst-8-februari-amsterdam</id>
  18840.    <content xml:lang="nl" type="html">&lt;p&gt;Na een pauze voor de feestdagen hervat Fronteers zijn bijeenkomstencyclus weer. De eerste bijeenkomst in het nieuwe jaar zal plaatsvinden in de kantine bij &lt;a href=&quot;http://info.nl/&quot;&gt;Info.nl&lt;/a&gt; te Amsterdam op vrijdag 8 februari.&lt;/p&gt;
  18841. &lt;p&gt;Hierbij nodigen we alle geinteresseerden uit deze bijeenkomst bij te wonen. Niet-leden zijn van harte welkom, de toegang is gratis, maar reserveren is &lt;em&gt;wel&lt;/em&gt; noodzakelijk. Dit kun je doen bij Tom Greuter van Info.nl via de &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/planning&quot;&gt;aanmeldingspagina&lt;/a&gt;.&lt;/p&gt;
  18842. &lt;p&gt;Het programma ziet er als volgt uit:&lt;/p&gt;
  18843. &lt;ul&gt;
  18844. &lt;li&gt;18:00 uur - Zaal open; welkom&lt;/li&gt;
  18845. &lt;li&gt;19:00 uur - Eerste presentatie&lt;/li&gt;
  18846. &lt;li&gt;20:00 uur - Tweede presentatie&lt;/li&gt;
  18847. &lt;li&gt;21:00 uur - Eind tweede presentatie; bier en networking&lt;/li&gt;
  18848. &lt;/ul&gt;
  18849. &lt;p&gt;Tijdens dit geheel zal info.nl voor enige catering zorgen; een pilsje of frisje plus een hapje zijn dus beschikbaar.&lt;/p&gt;
  18850. &lt;p&gt;Ikzelf zal een presentatie houden over de scheiding tussen presentatie en gedrag; oftewel: welke effecten zou je in CSS moeten coderen en welke in JavaScript? Persoonlijk ben ik van mening dat CSS thans teveel wordt gebruikt voor effecten die eigenlijk in de JavaScript-laag thuishoren, en ik zal proberen de aanwezigen daarvan te overtuigen. Uiteraard wordt dit gevolgd door discussie.&lt;/p&gt;
  18851. &lt;p&gt;Als tweede spreker zal &lt;a href=&quot;http://annevankesteren.nl/&quot;&gt;Anne van Kesteren&lt;/a&gt; een korte presentatie geven over het onlangs door het W3C gepubliceerde &lt;a href=&quot;http://www.w3.org/TR/2008/WD-html5-20080122/&quot;&gt;HTML 5&lt;/a&gt; - de markuptaal van het Web. Na deze presentatie van circa vijftien minuten is er tijd voor een discussie over HTML 5.&lt;/p&gt;
  18852. &lt;p&gt;Ik hoop op een flinke opkomst. Tot de 8e.&lt;/p&gt;
  18853. &lt;p&gt;&lt;em&gt;Update 5 februari&lt;/em&gt;: De Fronteersmeeting van aanstaande vrijdag 8 februari bij Info.nl is vol. Diegenen die zich nu nog aanmelden voor de bijeenkomst zullen op een wachtlijst geplaatst worden.&lt;/p&gt;
  18854. &lt;p&gt;&lt;em&gt;Update 11 februari&lt;/em&gt;: &lt;a href=&quot;https://www.fronteers.nl/bijeenkomsten/2008/info-nl&quot;&gt;Het verslag staat online&lt;/a&gt;.&lt;/p&gt;
  18855. </content>
  18856.  </entry>
  18857.  <entry>
  18858.    <title>Webrichtlijn 2: Gelaagd bouwen (R-pd.1.2)</title>
  18859.    <link href="https://www.fronteers.nl/nl/blog/2008/01/webrichtlijnen-gelaagd-bouwen"/>
  18860.    <updated>2008-01-08T00:00:00Z</updated>
  18861.    <id>https://www.fronteers.nl/nl/blog/2008/01/webrichtlijnen-gelaagd-bouwen</id>
  18862.    <content xml:lang="nl" type="html">&lt;p&gt;Deze week de tweede richtlijn: Bouw websites volgens het principe van gelaagd bouwen. (&lt;a href=&quot;http://webrichtlijnen.overheid.nl/handleiding/ontwikkeling/productie/filosofie/gelaagd-bouwen/#r-pd-1-2&quot;&gt;R-pd.1.2&lt;/a&gt;)&lt;/p&gt;
  18863. &lt;p&gt;Probeer jij altijd rekening te houden met &lt;em&gt;Progressive Enhancement&lt;/em&gt; en/of &lt;em&gt;Graceful Degradation&lt;/em&gt;? Vind jij dat er een verschil is tussen die twee? Spelen budgetten en deadlines een rol bij je beslissingen? Wanneer vind jij iets wat opgeleverd is eigenlijk onacceptabel? In hoeverre test je de verschillende lagen die je maakt?&lt;/p&gt;
  18864. </content>
  18865.  </entry>
  18866.  <entry>
  18867.    <title>Webrichtlijn 1: Scheiding tussen structuur en vormgeving (R-pd.1.1)</title>
  18868.    <link href="https://www.fronteers.nl/nl/blog/2008/01/webrichtlijnen-scheiding-structuur-vormgeving"/>
  18869.    <updated>2008-01-01T00:00:00Z</updated>
  18870.    <id>https://www.fronteers.nl/nl/blog/2008/01/webrichtlijnen-scheiding-structuur-vormgeving</id>
  18871.    <content xml:lang="nl" type="html">&lt;p&gt;Het leek ons leuk (Gelukkig nieuwjaar overigens!) om een discussie aan te zwengelen over de &lt;a href=&quot;http://webrichtlijnen.overheid.nl/&quot;&gt;webrichtlijnen van de overheid&lt;/a&gt;. Niet in het wilde weg: wat vind je nou van die richtlijnen, maar juist per richtlijn: hoe waardevol, correct, belangrijk is hij? 125 richtlijnen, iedere week 1. Zo zijn we wel even bezig! :P Deze week de eerste richtlijn: Houd structuur en vormgeving zoveel mogelijk gescheiden: gebruik HTML of XHTML voor de structuur van de site en CSS voor de vormgeving ervan. (&lt;a href=&quot;http://webrichtlijnen.overheid.nl/handleiding/ontwikkeling/productie/filosofie/scheiding-structuur-vormgeving/#r-pd-1-1&quot;&gt;R-pd.1.1&lt;/a&gt;)&lt;/p&gt;
  18872. &lt;p&gt;Wanneer wijk jij af van deze richtlijn? Wanneer plaats je CSS &lt;em&gt;wel&lt;/em&gt; rechtstreeks in een HTML bestand? Wat vind je van het toestaan van HTML &lt;em&gt;of&lt;/em&gt; XHTML (de discussie over versienummers komt later...)? Wanneer is het lastig om deze richtlijn na te leven? Kun jij je vinden in alle &lt;a href=&quot;http://webrichtlijnen.overheid.nl/handleiding/ontwikkeling/productie/filosofie/scheiding-structuur-vormgeving/voordelen/&quot;&gt;voordelen&lt;/a&gt; of zie jij ook nadelen?&lt;/p&gt;
  18873. </content>
  18874.  </entry>
  18875.  <entry>
  18876.    <title>De doelstellingen van het W3C zijn meer een visie dan echte regels</title>
  18877.    <link href="https://www.fronteers.nl/nl/blog/2007/12/doelstellingen-w3c-meer-visie-dan-regels"/>
  18878.    <updated>2007-12-24T00:00:00Z</updated>
  18879.    <id>https://www.fronteers.nl/nl/blog/2007/12/doelstellingen-w3c-meer-visie-dan-regels</id>
  18880.    <content xml:lang="nl" type="html">&lt;p&gt;Op ons &lt;a href=&quot;https://www.fronteers.nl/blog/2007/12/welkom&quot;&gt;welkomstbericht&lt;/a&gt; hebben we tientallen reacties gehad. Sommige reacties zijn daarom enigszins ondergesneeuwd. De discussie die &lt;a href=&quot;https://www.fronteers.nl/blog/2007/12/welkom#reactie-40&quot;&gt;Cyppher&lt;/a&gt; aan wilde zwengelen, wil ik daarom hier herhalen.&lt;/p&gt;
  18881. &lt;p&gt;Het W3C is van een initiatiefrijke en visionaire organisatie &#39;gegroeid&#39; naar een logge en op-zichzelf-achterlopende groep mensen. Prachtig dat standaarden ontwikkeld worden, maar vervelend dat een hoop van die standaarden in de praktijk niet werken. Mijn stelling: De doelstellingen van het W3C zijn meer een visie dan echte regels.&lt;/p&gt;
  18882. </content>
  18883.  </entry>
  18884.  <entry>
  18885.    <title>Opzeggingen van Lon &amp;amp; Tino</title>
  18886.    <link href="https://www.fronteers.nl/nl/blog/2007/12/opzeggingen"/>
  18887.    <updated>2007-12-23T00:00:00Z</updated>
  18888.    <id>https://www.fronteers.nl/nl/blog/2007/12/opzeggingen</id>
  18889.    <content xml:lang="nl" type="html">&lt;p&gt;Het ligt niet in mijn bedoeling om elke opzegging van een lid publiekelijk bekend te maken via dit blog, maar de opzeggingen van Lon Boonen (in november) en Tino Zijdel (in december) wil ik jullie niet onthouden. Zij waren namelijk in september jl. nog kandidaat-bestuursleden. Om diverse redenen hebben zij helaas opgezegd.&lt;/p&gt;
  18890. &lt;p&gt;Zonder Lon en Tino missen we een uitgesproken kritisch geluid binnen Fronteers. Ik verwacht en hoop van de leden dat zij het bestuur kritisch zullen blijven volgen en ons er op aan zullen spreken wanneer zij menen dat dit nodig is. Persoonlijk heb ik daar alle vertrouwen in, want al tijdens de &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen/18-09-07&quot;&gt;ALV&lt;/a&gt; hebben jullie je stem duidelijk laten horen! Ik hoop dat dit blog een goed medium is voor de noodzakelijke discussies.&lt;/p&gt;
  18891. </content>
  18892.  </entry>
  18893.  <entry>
  18894.    <title>RSS beschikbaar</title>
  18895.    <link href="https://www.fronteers.nl/nl/blog/2007/12/rss-beschikbaar"/>
  18896.    <updated>2007-12-22T00:00:00Z</updated>
  18897.    <id>https://www.fronteers.nl/nl/blog/2007/12/rss-beschikbaar</id>
  18898.    <content xml:lang="nl" type="html">&lt;p&gt;Op veler verzoek heeft Krijn gisteren de RSS-feed van het blog geactiveerd, dus hang hem gauw in je favoriete reader! Een feed van aankomende bijeenkomsten is in de maak.&lt;/p&gt;
  18899. </content>
  18900.  </entry>
  18901.  <entry>
  18902.    <title>Welkom op Fronteers.nl - deel 2</title>
  18903.    <link href="https://www.fronteers.nl/nl/blog/2007/12/welkom-op-fronteers-nl-deel-2"/>
  18904.    <updated>2007-12-21T00:00:00Z</updated>
  18905.    <id>https://www.fronteers.nl/nl/blog/2007/12/welkom-op-fronteers-nl-deel-2</id>
  18906.    <content xml:lang="nl" type="html">&lt;p&gt;De website staat nu twee dagen live en we zijn al overstelpt door een grote hoeveelheid reacties, zowel op de website als via de mail. We willen van Fronteers een levendige community maken, dus we zijn blij verrast! Er hebben zich nieuwe leden aangemeld, anderen hebben aangegeven zich actief in te willen zetten voor een bepaalde commissie en daarnaast hebben we ook een hoop tips gehad.&lt;/p&gt;
  18907. &lt;p&gt;Uiteindelijk zullen we bij iedereen terugkomen, al zal dat niet binnen een paar dagen gebeuren. Mede door de vakantie van Peter-Paul is onze eerstvolgende bestuursvergadering pas op 15 januari. Dus even geduld alsjeblieft als je denkt &amp;quot;waarom hoor ik nu niets van die gasten?&amp;quot;&lt;/p&gt;
  18908. &lt;p&gt;Je kunt je afvragen waarom we dan de website niet wat later live gebracht hebben? Tja, eigenlijk wilde ik hem gewoon de wereld in schoppen. Achter de schermen kun je wel eeuwig doorgaan met finetunen, maar mij leek de website nu goed genoeg. Bovendien is de ALV alweer drie maanden achter de rug; tijd voor wat HTML-sneeuw!&lt;/p&gt;
  18909. </content>
  18910.  </entry>
  18911.  <entry>
  18912.    <title>Welkom op Fronteers.nl</title>
  18913.    <link href="https://www.fronteers.nl/nl/blog/2007/12/welkom"/>
  18914.    <updated>2007-12-19T00:00:00Z</updated>
  18915.    <id>https://www.fronteers.nl/nl/blog/2007/12/welkom</id>
  18916.    <content xml:lang="nl" type="html">&lt;p&gt;Welkom op de gloednieuwe website van Fronteers, vakvereniging voor front-end developers. Na een paar maanden (non-non-stop) zwoegen en zweten is het dan eindelijk zover!&lt;/p&gt;
  18917. &lt;p&gt;De tijdelijke naam &lt;em&gt;Gilde van Front-Enders&lt;/em&gt; is tijdens &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen/18-09-07&quot;&gt;het oprichtingscongres&lt;/a&gt; in september weggestemd. Hierna is &lt;em&gt;Fronteers&lt;/em&gt; gekozen als verenigingsnaam en in oktober is de vereniging daadwerkelijk opgericht. Middels deze site hopen we iedereen die vragen en onduidelijkheden heeft tegemoet te komen.&lt;/p&gt;
  18918. &lt;p&gt;De informatie op &lt;a href=&quot;http://www.quirksmode.org/branche/&quot;&gt;de tijdelijke site van Peter-Paul Koch&lt;/a&gt; is ondertussen verouderd. Wellicht dat die pagina&#39;s de komende tijd komen te vervallen of door een &lt;code&gt;301&lt;/code&gt; doorgestuurd worden naar deze site, maar dat is aan Peter-Paul.&lt;/p&gt;
  18919. &lt;h2&gt;De website&lt;/h2&gt;
  18920. &lt;p&gt;Het live brengen van de site heeft iets langer geduurd dan in eerste instantie gehoopt. Zoals een paar onbemande &lt;a href=&quot;https://www.fronteers.nl/vereniging/commissies&quot;&gt;commissies&lt;/a&gt; aantonen, zijn vrijwilligers en de tijd die zij vrijmaken schaars. Zo ook voor het ontwerpen, bouwen en inrichten van deze site.&lt;/p&gt;
  18921. &lt;p&gt;Voor het ontwerp en logo moeten we trouwens Andries Reitsma van &lt;a href=&quot;http://www.edendesign.nl/&quot;&gt;Eden Design&lt;/a&gt; hartelijk bedanken. Bij dezen dus! Er zullen nog wel wat puntjes bijgeschaafd moeten worden, maar daar hebben we de kerstdagen voor :)&lt;/p&gt;
  18922. &lt;p&gt;Er staan sowieso nog een hoop toevoegingen in de planning:&lt;/p&gt;
  18923. &lt;ul&gt;
  18924. &lt;li&gt;Verslagen van de reeds gehouden bijeenkomsten&lt;/li&gt;
  18925. &lt;li&gt;De ledenlijst met voornaam, achternaam en werkgever&lt;/li&gt;
  18926. &lt;li&gt;Een onderdeel voor leden achter een login (o.a. adresgegevens online wijzigen)&lt;/li&gt;
  18927. &lt;li&gt;Een soort helpdesk met gestructureerde, onderbouwde links naar interessante sites&lt;/li&gt;
  18928. &lt;li&gt;Een zoekfunctie voor de site&lt;/li&gt;
  18929. &lt;li&gt;Een &#39;schrijf zelf&#39; onderdeel voor het weblog&lt;/li&gt;
  18930. &lt;li&gt;Diverse RSS feeds (bijeenkomsten, weblog, reacties)&lt;/li&gt;
  18931. &lt;li&gt;Hier en daar verbeteringen in de teksten&lt;/li&gt;
  18932. &lt;li&gt;…en waarschijnlijk nog een hoop meer&lt;/li&gt;
  18933. &lt;/ul&gt;
  18934. &lt;p&gt;Voor nu is dit in ieder geval onze website. Hopelijk kan front-end Nederland zijn en haar weg hier vinden.&lt;/p&gt;
  18935. &lt;p&gt;Reacties? Kritiek? Ideeën? Laat je horen! :)&lt;/p&gt;
  18936. </content>
  18937.  </entry>
  18938.  <entry>
  18939.    <title>Penningmeester gezocht</title>
  18940.    <link href="https://www.fronteers.nl/nl/blog/2007/12/penningmeester-gezocht"/>
  18941.    <updated>2007-12-18T00:00:00Z</updated>
  18942.    <id>https://www.fronteers.nl/nl/blog/2007/12/penningmeester-gezocht</id>
  18943.    <content xml:lang="nl" type="html">&lt;p&gt;Het bestuur is nog steeds op zoek naar een penningmeester voor Fronteers.&lt;/p&gt;
  18944. &lt;p&gt;Nu we een officieel geregistreerde vereniging zijn, krijg ik als secretaris allemaal rare post opgestuurd van de KvK, de Belastingdienst en een hele serie derde partijen, wiens voornaamste intentie lijkt te zijn om onze vereniging op een of andere wijze een poot uit te draaien.&lt;/p&gt;
  18945. &lt;p&gt;Geïnteresseerden voor de functie kunnen zich &lt;a href=&quot;https://www.fronteers.nl/contact&quot;&gt;melden bij het bestuur&lt;/a&gt; (gaarne opstellen in rijen van drie).&lt;/p&gt;
  18946. </content>
  18947.  </entry>
  18948.  <entry>
  18949.    <title>Notulen bestuursvergadering 9 oktober online</title>
  18950.    <link href="https://www.fronteers.nl/nl/blog/2007/12/notulen-bestuursvergadering-9-oktober-2007-online"/>
  18951.    <updated>2007-12-18T00:00:00Z</updated>
  18952.    <id>https://www.fronteers.nl/nl/blog/2007/12/notulen-bestuursvergadering-9-oktober-2007-online</id>
  18953.    <content xml:lang="nl" type="html">&lt;p&gt;De notulen van de bestuursvergadering van 9 oktober 2007 zijn nu online te lezen. Deze vergadering werd gehouden net na de officiële oprichting van Fronteers bij de notaris.&lt;/p&gt;
  18954. &lt;p&gt;Lees &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen/09-10-07&quot;&gt;de notulen&lt;/a&gt;.&lt;/p&gt;
  18955. </content>
  18956.  </entry>
  18957.  <entry>
  18958.    <title>Notulen ALV online</title>
  18959.    <link href="https://www.fronteers.nl/nl/blog/2007/12/notulen-alv-online"/>
  18960.    <updated>2007-12-18T00:00:00Z</updated>
  18961.    <id>https://www.fronteers.nl/nl/blog/2007/12/notulen-alv-online</id>
  18962.    <content xml:lang="nl" type="html">&lt;p&gt;De notulen van de Algemene Ledenvergadering van 18 september (tijdens het oprichtingscongres) staan nu online op de Fronteers website.&lt;/p&gt;
  18963. &lt;p&gt;Zojuist heb ik &lt;a href=&quot;https://www.fronteers.nl/vereniging/bestuur/notulen/18-09-07&quot;&gt;de notulen van de oprichtingsvergadering&lt;/a&gt; van Fronteers van 18 september jl. online gezet. De notulen zijn ingezien en zonodig aangevuld door alle kandidaat-bestuursleden van die avond, en door de voorzitter. De notulen moeten eindelijk goedgekeurd worden door de leden, op de volgende ALV.&lt;/p&gt;
  18964. </content>
  18965.  </entry>
  18966. </feed>
  18967.  

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

  1. Download the "valid Atom 1.0" banner.

  2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

  3. Add this HTML to your page (change the image src attribute if necessary):

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=https%3A//fronteers.nl/feeds/blog.xml

Home · About · News · Docs · Terms

 
Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda