<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="nl">
  <title>Marcel van der Hoek</title>
  <id>https://marcelvanderhoek.nl/</id>
  <link href="https://marcelvanderhoek.nl/"/>
  <link rel="self" href="https://marcelvanderhoek.nl/feed.xml"/>
  <updated>2026-06-10T00:00:00.000Z</updated>
  <author><name>Marcel van der Hoek</name></author>
  <entry>
    <title>Eerste artikel</title>
    <id>https://marcelvanderhoek.nl/eerste-artikel/</id>
    <link rel="alternate" href="https://marcelvanderhoek.nl/eerste-artikel/"/>
    <updated>2026-06-10T00:00:00.000Z</updated>
    <summary>Waarom dit blog bestaat en wat je hier kunt verwachten.</summary>
    <content type="html">&lt;p&gt;Dit is het eerste artikel. Gewoon markdown: &lt;strong&gt;vet&lt;/strong&gt;, &lt;em&gt;cursief&lt;/em&gt;, &lt;a href=&quot;https://example.com&quot;&gt;links&lt;/a&gt;,
koppen, lijstjes en codeblokken doen het allemaal.&lt;span class=&quot;sidenote-number&quot;&gt;&lt;/span&gt;&lt;span class=&quot;sidenote&quot;&gt;En dit is een kanttekening: op een breed
scherm zweeft hij hiernaast in de kantlijn, op de telefoon valt hij netjes onder de alinea —
zonder JavaScript.&lt;/span&gt; Naar een ander artikel link je root-relatief op de slug.&lt;/p&gt;
&lt;p&gt;Het beeld hierboven komt uit de frontmatter (&lt;code&gt;image&lt;/code&gt; + &lt;code&gt;imageAlt&lt;/code&gt;); de &lt;code&gt;description&lt;/code&gt; is het
tekstje dat op de voorpagina onder de titel staat. Een kanttekening schrijf je inline met
&lt;code&gt;^[…]&lt;/code&gt;; de nummering gaat vanzelf.&lt;span class=&quot;sidenote-number&quot;&gt;&lt;/span&gt;&lt;span class=&quot;sidenote&quot;&gt;Tweede noot, puur om te laten zien dat de teller
doortelt.&lt;/span&gt;&lt;/p&gt;
&lt;h2&gt;Een tussenkop&lt;/h2&gt;
&lt;p&gt;Meer tekst. Een lijstje:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;rust&lt;/li&gt;
&lt;li&gt;eenvoud&lt;/li&gt;
&lt;li&gt;gewoon HTML&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;En een stukje code:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;&lt;span class=&quot;token keyword&quot;&gt;const&lt;/span&gt; antwoord &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;42&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;En een diagram met &lt;strong&gt;D2&lt;/strong&gt; — dat rendert bij de build naar een statische SVG die meekleurt
met dag en nacht (zonder JavaScript):&lt;/p&gt;
&lt;figure class=&quot;d2&quot; data-d2=&quot;ZGlyZWN0aW9uOiByaWdodApTY2hyaWp2ZW4gLT4gUHVzaGVuIC0+IExpdmUK&quot; data-label=&quot;VmFuIHNjaHJpanZlbiBuYWFyIGxpdmU=&quot;&gt;&lt;/figure&gt;
&lt;p&gt;D2 doet meer dan stroomschema’s. Containers en groepen:&lt;/p&gt;
&lt;figure class=&quot;d2&quot; data-d2=&quot;ZGlyZWN0aW9uOiByaWdodApCZXpvZWtlciAtPiBWUFMubmdpbngKVlBTOiB7CiAgbmdpbnggLT4gYmxvZzogcHJveHkKICBibG9nOiBibG9nLWNvbnRhaW5lcgp9Cg==&quot; data-label=&quot;Q29udGFpbmVycyBlbiBncm9lcGVu&quot;&gt;&lt;/figure&gt;
&lt;p&gt;Een sequence-diagram van de &lt;strong&gt;deployment&lt;/strong&gt; — van push naar live:&lt;/p&gt;
&lt;figure class=&quot;d2&quot; data-d2=&quot;c2hhcGU6IHNlcXVlbmNlX2RpYWdyYW0KR2l0SHViIC0+IENJOiB3b3JrZmxvdyBuYSBwdXNoIG9wIG1haW4KQ0kgLT4gQ0k6IGJ1aWxkICsgdGVzdHMgKyBkb2NrZXItcm9va3Rlc3QKQ0kgLT4gVlBTOiBkZXBsb3kgbmEgZ3JvZW5lIENJClZQUyAtPiBWUFM6IGRlcGxveS5zaCDigJQgZ2l0IHB1bGwsIHJlYnVpbGQsIG5naW54IGxpdmUK&quot; data-label=&quot;RGVwbG95bWVudDogdmFuIHB1c2ggdG90IGxpdmU=&quot;&gt;&lt;/figure&gt;
&lt;p&gt;En de &lt;strong&gt;runtime&lt;/strong&gt; — hoe een bezoeker een (al bij de build gerenderde) pagina krijgt,
achter Cloudflare:&lt;/p&gt;
&lt;figure class=&quot;d2&quot; data-d2=&quot;c2hhcGU6IHNlcXVlbmNlX2RpYWdyYW0KQmV6b2VrZXIgLT4gQ2xvdWRmbGFyZTogR0VUIG1hcmNlbHZhbmRlcmhvZWsubmwKQ2xvdWRmbGFyZSAtPiBob3N0LW5naW54OiBwcm94eSAoVExTKQpob3N0LW5naW54IC0+IGNvbnRhaW5lcjogcHJveHlfcGFzcyAobG9vcGJhY2sgMzEwMCkKY29udGFpbmVyIC0+IGhvc3Qtbmdpbng6IHZvb3JhZiBnZWJvdXdkZSBIVE1MCmhvc3QtbmdpbnggLT4gQ2xvdWRmbGFyZTogSFRNTApDbG91ZGZsYXJlIC0+IEJlem9la2VyOiBIVE1MCg==&quot; data-label=&quot;UnVudGltZTogZWVuIHBhZ2luYSBzZXJ2ZXJlbg==&quot;&gt;&lt;/figure&gt;
&lt;p&gt;Of een datamodel:&lt;/p&gt;
&lt;figure class=&quot;d2&quot; data-d2=&quot;cG9zdDogewogIHNoYXBlOiBzcWxfdGFibGUKICBzbHVnOiBzdHJpbmcKICB0aXRlbDogc3RyaW5nCiAgZGF0dW06IGRhdGUKfQo=&quot; data-label=&quot;RGF0YW1vZGVs&quot;&gt;&lt;/figure&gt;
&lt;p&gt;En een &lt;strong&gt;interactieve demo&lt;/strong&gt; — een werkend stukje HTML, CSS en JavaScript, bij de
build in elkaar gezet tot één statisch bestand en vanaf deze site geserveerd, in
een kader dat pas laadt als het in beeld komt. De pagina zelf blijft gewoon
JavaScript-vrij; de broncode staat eronder, ook voor feedlezers:&lt;/p&gt;
&lt;figure class=&quot;demo&quot;&gt;
&lt;iframe src=&quot;https://marcelvanderhoek.nl/demos/e8720d5304.html&quot; title=&quot;Een ruitje in flexbox&quot; loading=&quot;lazy&quot; height=&quot;360&quot; sandbox=&quot;allow-scripts&quot;&gt;&lt;/iframe&gt;
&lt;noscript&gt;&lt;p&gt;Zonder JavaScript is het voorbeeld hierboven niet interactief — de broncode staat hieronder.&lt;/p&gt;&lt;/noscript&gt;
&lt;p class=&quot;demo-lang&quot;&gt;HTML&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;Klik op het ruitje.&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;p&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;
&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt; &lt;span class=&quot;token attr-name&quot;&gt;id&lt;/span&gt;&lt;span class=&quot;token attr-value&quot;&gt;&lt;span class=&quot;token punctuation attr-equals&quot;&gt;=&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;ruit&lt;span class=&quot;token punctuation&quot;&gt;&quot;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;◆&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;button&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p class=&quot;demo-lang&quot;&gt;CSS&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-css&quot;&gt;&lt;span class=&quot;token selector&quot;&gt;body&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;display&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; flex&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;flex-direction&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; column&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;align-items&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; center&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;font-family&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; system-ui&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
&lt;span class=&quot;token selector&quot;&gt;button&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;font-size&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; 3rem&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;color&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; #5e7c9c&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;background&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;border&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; none&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token property&quot;&gt;cursor&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; pointer&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p class=&quot;demo-lang&quot;&gt;JavaScript&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;document&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;querySelector&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;#ruit&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;addEventListener&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;&#39;click&#39;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;,&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token parameter&quot;&gt;e&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;=&gt;&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;
  e&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;target&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;style&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;rotate &lt;span class=&quot;token operator&quot;&gt;=&lt;/span&gt; &lt;span class=&quot;token template-string&quot;&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;span class=&quot;token interpolation&quot;&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;${&lt;/span&gt;Math&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span class=&quot;token function&quot;&gt;random&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;(&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt; &lt;span class=&quot;token operator&quot;&gt;*&lt;/span&gt; &lt;span class=&quot;token number&quot;&gt;360&lt;/span&gt;&lt;span class=&quot;token interpolation-punctuation punctuation&quot;&gt;}&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token string&quot;&gt;deg&lt;/span&gt;&lt;span class=&quot;token template-punctuation string&quot;&gt;`&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;
&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;)&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/figure&gt;
&lt;p&gt;Wil je een extra afbeelding mét onderschrift in de tekst, gebruik dan een &lt;code&gt;figure&lt;/code&gt;
(markdown laat gewone HTML toe):&lt;/p&gt;
&lt;figure&gt;
  &lt;img src=&quot;https://marcelvanderhoek.nl/img/2026/duinen.svg&quot; alt=&quot;Duinlandschap met laagstaande zon&quot;&gt;
  &lt;figcaption&gt;De duinen bij Monster, vlak voor zonsondergang.&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;blockquote&gt;
&lt;p&gt;En een citaat, want ook dat moet er rustig uitzien.&lt;/p&gt;
&lt;/blockquote&gt;
</content>
  </entry>
</feed>
