<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Development Tools nieuws en tips | Nixo News</title>
	<atom:link href="https://nixonews.nl/category/webdevelopment/development-tools/feed/" rel="self" type="application/rss+xml" />
	<link>https://nixonews.nl</link>
	<description>Het laatste nieuws over AI, Webdesign en Development</description>
	<lastBuildDate>Sat, 19 Sep 2026 22:06:58 +0000</lastBuildDate>
	<language>nl-NL</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>AMD GPU lokale AI draaien: ROCm vs Vulkan uitgelegd</title>
		<link>https://nixonews.nl/amd-gpu-lokale-ai-rocm-vulkan-setup/</link>
					<comments>https://nixonews.nl/amd-gpu-lokale-ai-rocm-vulkan-setup/#respond</comments>
		
		<dc:creator><![CDATA[Sepp Stokbroekx]]></dc:creator>
		<pubDate>Sat, 19 Sep 2026 22:06:54 +0000</pubDate>
				<category><![CDATA[Development Tools]]></category>
		<category><![CDATA[Webdevelopment]]></category>
		<category><![CDATA[AMD GPU]]></category>
		<category><![CDATA[development tools]]></category>
		<category><![CDATA[GPU compute]]></category>
		<category><![CDATA[HIP SDK]]></category>
		<category><![CDATA[LLM]]></category>
		<category><![CDATA[LM Studio]]></category>
		<category><![CDATA[lokale AI]]></category>
		<category><![CDATA[Ollama]]></category>
		<category><![CDATA[ROCm]]></category>
		<category><![CDATA[Vulkan]]></category>
		<guid isPermaLink="false">https://nixonews.nl/amd-gpu-lokale-ai-rocm-vulkan-setup/</guid>

					<description><![CDATA[AMD GPU en lokale AI-modellen draaien is een frustrerende combo. ROCm herkent je GPU niet, Vulkan doet het wel maar is trager. Twee tools lossen dit op.]]></description>
										<content:encoded><![CDATA[<p><strong>Kort antwoord:</strong> Met een AMD GPU lokale AI draaien lukt niet altijd meteen: lokale AI-tools zoals Ollama of LM Studio herkennen je GPU niet automatisch. ROCmFix lost de herkenningSfout op met één Python-commando. InferBench meet daarna welke backend, ROCm of Vulkan, sneller is op jouw specifieke GPU. Zonder deze stap gooi je rekenkracht weg.</p>
<h2>Waarom herkent Ollama je AMD GPU niet?</h2>
<p>Lokale AI-tools zoals Ollama en LM Studio zijn gebouwd met Nvidia in gedachten. AMD-ondersteuning is er wel, maar vraagt meer handwerk. De kern van het probleem: ROCm, de software-laag die AMD-GPU&#8217;s laat praten met AI-frameworks, herkent niet elke GPU-architectuur automatisch. Nieuwere of minder gangbare AMD-chips krijgen een foutmelding, terwijl de hardware zelf prima modellen kan draaien.</p>
<p>ROCm staat voor Radeon Open Compute. Het is AMD&#8217;s antwoord op CUDA, de technologie van Nvidia waarmee GPU&#8217;s rekentaken uitvoeren zoals AI. Het probleem: ROCm heeft een lijst van officieel ondersteunde GPU-architecturen. Valt jouw kaart er net buiten, dan crasht de software of negeert hij je GPU gewoon.</p>
<p>De workaround die al jaren de ronde doet op forums: stel de omgevingsvariabele <code>HSA_OVERRIDE_GFX_VERSION</code> handmatig in. Hiermee vertel je ROCm dat jouw GPU zich moet gedragen als een andere, wel ondersteunde architectuur. Werkt prima, maar je moet weten welke waarde je invult. Verkeerde waarde? Crashes, trage output, of een model dat helemaal niet laadt.</p>
<p>Ik heb dit zelf verkeerd ingeschat toen ik voor het eerst een lokaal model probeerde te draaien op een AMD-systeem. Ik dacht dat het een driver-probleem was en heb een uur gezocht in de verkeerde richting. Het was gewoon die ene omgevingsvariabele. Sindsdien check ik dit altijd als eerste bij AMD-hardware.</p>
<p>Meer weten over hoe AI-tools en hardware samenwerken in een development-setup? In dit overzicht over <a href="/ai-code-editor-cursor-windsurf-zed-vergelijking/">AI code editors vergelijken in 2026</a> bespreek ik ook hoe de onderliggende hardware je workflow beïnvloedt.</p>
<h2>ROCmFix: één commando, GPU herkend</h2>
<p>ROCmFix is een Python-script dat de HSA_OVERRIDE_GFX_VERSION-instelling automatisch bepaalt en instelt. Het leest je GPU-informatie uit het Windows-register of via lspci op Linux, zoekt de juiste architectuurwaarde op, en schrijft de variabele permanent weg. Je hoeft geen forumdraden door te spitten voor de juiste waarde.</p>
<p>De tool werkt op zowel Windows als Linux. Op Windows leest hij de PCI-ID van je GPU uit het register. Op Linux gebruikt hij <code>lspci</code>, het standaardcommando om hardware-informatie op te vragen. Op basis van die ID zoekt ROCmFix de juiste GFX-versie op en stelt die in.</p>
<p>Draaien doe je zo:</p>
<pre><code>python rocmfix.py</code></pre>
<p>Wil je eerst checken wat er allemaal geïnstalleerd is? Gebruik dan:</p>
<pre><code>python rocmfix.py doctor</code></pre>
<p>Dat geeft een overzicht van je geïnstalleerde HIP SDK en Vulkan-componenten. Handig als startpunt voordat je begint met modellen laden.</p>
<p>ROCmFix werkt met CMD, PowerShell, Bash, Zsh en Fish. Je stelt de variabele permanent in of alleen voor de huidige sessie, afhankelijk van wat je kiest. Permanent is handig als je altijd met dezelfde GPU werkt. Sessie-instelling is beter als je wisselt tussen systemen of GPU&#8217;s.</p>
<p>Let op: ROCmFix is een community-tool, geen officieel AMD-product. Controleer altijd de broncode voordat je een onbekend script uitvoert met systeemtoegang.</p>
<h2>ROCm of Vulkan: welke backend is sneller op jouw GPU?</h2>
<p>Als je GPU eenmaal herkend is, komt de volgende vraag: draai je je modellen via de ROCm/HIP-backend of via Vulkan? Vulkan is een grafische API die je ook voor compute-taken inzet. ROCm is specifiek gebouwd voor GPU-rekentaken. Welke sneller is, verschilt per GPU-generatie. InferBench meet dit automatisch op jouw systeem.</p>
<p>Vulkan en ROCm/HIP geven op papier andere prestaties. In de praktijk hangt het af van je specifieke GPU, het model dat je draait, en de hoeveelheid VRAM die je tot je beschikking hebt.</p>
<p>InferBench automatiseert het vergelijken. Het werkt zo:</p>
<ol>
<li>Eerst stuurt het een warm-up query, zodat het model volledig in VRAM geladen is.</li>
<li>Dan dwingt het een VRAM-unload tussen elke testrun, zodat caching de resultaten niet vertekent.</li>
<li>Het berekent de mediaan van tokens per seconde (tok/s) en de TTFT (Time-to-First-Token, de tijd tot het eerste woord verschijnt).</li>
</ol>
<p>Die twee getallen zeggen je alles. Tok/s bepaalt hoe snel een lang antwoord gegenereerd wordt. TTFT bepaalt hoe snel de tool <em>voelt</em> voor de gebruiker. Een hoge tok/s met een hoge TTFT is frustrerend in gebruik, ook al is de totaalsnelheid goed.</p>
<p>Naar mijn idee is InferBench de ontbrekende schakel die mensen altijd overslaan. Ze draaien een model, het lijkt te werken, en ze stoppen daar. Maar zonder meting weet je niet of je 40% snelheid laat liggen omdat je de verkeerde backend gebruikt. Dat is zonde als je toch al de moeite hebt genomen om alles lokaal op te zetten.</p>
<p>Zie ook hoe lokale AI-tools passen in een bredere developer-workflow in dit artikel over <a href="/developer-rol-ai-tijdperk-veranderingen/">de rol van developers in het AI-tijdperk</a>.</p>
<h2>Wanneer kies je voor een lokale LLM-setup op AMD?</h2>
<p>Lokaal draaien van een AI-model heeft voordelen: geen API-kosten, geen data die de deur uitgaat, en je kunt offline werken. Maar het vraagt meer technische kennis dan een cloud-API aanroepen. Op AMD-hardware vraagt het nog wat extra stappen. Dit is mijn eerlijke afweging van wanneer het de moeite waard is.</p>
<p>Ik zou een lokale AMD-setup overwegen als je aan drie van de volgende vier punten voldoet:</p>
<ul>
<li>Je hebt een AMD GPU met minimaal 8 GB VRAM (minder werkt, maar dan draai je alleen kleine modellen).</li>
<li>Je verwerkt gevoelige data die je niet naar een externe API wilt sturen.</li>
<li>Je maakt intensief gebruik van AI en de API-kosten lopen op.</li>
<li>Je hebt een half uur om de setup te doen en wil geen cloudafhankelijkheid.</li>
</ul>
<p>Heb je een Nvidia GPU? Dan is de setup aanzienlijk eenvoudiger. CUDA werkt zonder gedoe, en Ollama herkent de meeste Nvidia-kaarten direct. AMD vraagt die extra ROCmFix-stap.</p>
<p>Heb je geen eigen GPU of wil je niet sleutelen? Dan is een cloud-API gewoon sneller en goedkoper voor de meeste use cases. De tools die hier besproken worden zijn voor developers die bewust kiezen voor lokaal draaien en de technische overhead accepteren.</p>
<p>Als je al werkt met lokale AI in je projecten, bekijk dan ook hoe je <a href="/llm-model-migratie-ai-applicaties/">van het ene LLM-model naar het andere migreert</a> zonder dat je applicatie omvalt.</p>
<div class="nn-related-posts">
<h3>Dit vind je misschien ook interessant</h3>
<ul>
<li><a href="https://nixonews.nl/deerflow-open-source-multi-agent-framework/">DeerFlow: open-source multi-agent framework van ByteDance</a></li>
<li><a href="https://nixonews.nl/zelf-digital-signage-bouwen-open-source/">Digital signage open source: Visio-Display zelf bouwen en beheren</a></li>
<li><a href="https://nixonews.nl/ide-stijl-portfolio-nextjs-gsap/">Portfolio website bouwen als IDE met Next.js en GSAP</a></li>
</ul>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://nixonews.nl/amd-gpu-lokale-ai-rocm-vulkan-setup/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Digital signage open source: Visio-Display zelf bouwen en beheren</title>
		<link>https://nixonews.nl/zelf-digital-signage-bouwen-open-source/</link>
					<comments>https://nixonews.nl/zelf-digital-signage-bouwen-open-source/#respond</comments>
		
		<dc:creator><![CDATA[Sepp Stokbroekx]]></dc:creator>
		<pubDate>Fri, 28 Aug 2026 06:03:54 +0000</pubDate>
				<category><![CDATA[Development Tools]]></category>
		<category><![CDATA[Webdevelopment]]></category>
		<category><![CDATA[digital signage]]></category>
		<category><![CDATA[Docker]]></category>
		<category><![CDATA[Flask]]></category>
		<category><![CDATA[kiosk]]></category>
		<category><![CDATA[linux]]></category>
		<category><![CDATA[open source]]></category>
		<category><![CDATA[Python]]></category>
		<category><![CDATA[self-hosting]]></category>
		<category><![CDATA[server beheer]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<guid isPermaLink="false">https://nixonews.nl/zelf-digital-signage-bouwen-open-source/</guid>

					<description><![CDATA[Visio-Display is een gratis, zelf te hosten platform waarmee je schermen op afstand beheert. Geen abonnement, volledige controle. Maar wanneer is dit slim en wanneer kies je toch voor een betaalde dienst?]]></description>
										<content:encoded><![CDATA[<p><strong>Kort antwoord:</strong> Visio-Display is een gratis digital signage open source platform (GPL-3.0 licentie) waarmee je meerdere schermen centraal beheert via een webinterface. Je installeert het op je eigen server met één commando, hebt volledige controle over je data en betaalt geen maandabonnement. De keerzijde: je bent zelf verantwoordelijk voor onderhoud, updates en herstel bij problemen.</p>
<h2>Wat is digital signage eigenlijk?</h2>
<p>Digital signage is het aansturen van schermen op afstand. Denk aan de menukaart bij een café, een welkomstscherm in een kantoor of een promobord in een winkel. Normaal betaal je maandelijks voor de software die dat regelt. Visio-Display gooit dat model om: je host het zelf, betaalt niets per maand en hebt volledige controle.</p>
<p>De meeste digital signage-oplossingen werken als een SaaS-abonnement: je betaalt per scherm, per maand, voor software die op andermans servers draait. Dat klinkt prima tot je zes schermen hebt en de factuur oploopt naar honderden euro&#8217;s per jaar.</p>
<p>Visio-Display pakt dit anders aan. Het is een digital signage open source platform (de broncode is vrij beschikbaar en je mag het gratis gebruiken en aanpassen) dat je op je eigen server installeert. Technisch draait het op Python, Flask en PostgreSQL, met Docker Compose voor de deployment. Je beheert alles via een webinterface: welk scherm toont wat, wanneer en hoe lang.</p>
<p>Wat opvalt is dat het project verder gaat dan alleen een filmpje op een scherm zetten. Het dekt de hele operationele kant: planning op datum en tijd, prioriteitscampagnes die automatisch terugvallen op het normale schema, een ingebouwde editor voor aankondigingen en een QR-codegenerator. Dat is meer dan je verwacht van een gratis project. De vraag is wel hoe stabiel dit is op de lange termijn als de ontwikkelaar ermee stopt, maar dat geldt voor elk open-source project.</p>
<h2>Hoe werkt de installatie in de praktijk?</h2>
<p>Eén commando en de installer regelt de rest: prerequisites checken, repository klonen, secrets genereren, containers bouwen en opstarten. In de praktijk heb je wel een Linux-server nodig met Docker en Docker Compose al geïnstalleerd. Voor iemand die dat gewend is, duurt de installatie tien minuten.</p>
<p>De installatie start je met dit commando op je Linux-server:</p>
<p><code>bash &lt;(curl -fsSL https://raw.githubusercontent.com/woofix/visio_display/main/server-install.sh)</code></p>
<p>De installer doorloopt de volgende stappen: hij checkt of Docker en Git aanwezig zijn, kloont de repository, genereert beveiligingstokens, maakt een beheerdersaccount aan en start de hele stack op. Je kiest tussendoor de taal (Frans of Engels) en geeft een paar basisinstellingen in. Daarna heb je een werkende omgeving.</p>
<p>Let op: je hebt een server nodig die 24/7 online is. Een goedkope VPS van vijf euro per maand werkt prima als je maar een paar schermen hebt. Maar die server moet je zelf bijhouden, patchen en monitoren. Als je liever focust op je eigen werk en niet op serveronderhoud, is een betaalde SaaS-oplossing alsnog goedkoper dan het klinkt.</p>
<p>Er is ook een handmatige Docker Compose-installatie gedocumenteerd voor mensen die elke stap zelf willen controleren. Dat is de veiligere keuze als je weet wat je doet.</p>
<h2>Hoe beheer je schermen op afstand?</h2>
<p>Elk scherm draait als een Linux-kiosk-client en stuurt elke 30 seconden een heartbeat naar de server. Valt het scherm weg? Na vijf minuten markeert de server het als offline. Komt het terug online, dan herkent de server het automatisch. Geen handmatig opnieuw koppelen.</p>
<p>Remote beheer van schermen is normaal een gedoe: een scherm valt weg, iemand moet er fysiek naartoe, opnieuw inloggen, opnieuw koppelen. Visio-Display lost dat op met een systemd-service (een achtergrondproces dat automatisch start bij het opstarten van de computer) op elke client.</p>
<p>Die service stuurt elke 30 seconden een signaal naar de server. Valt het scherm weg door stroomuitval of een netwerkprobleem? De server markeert het na vijf minuten als offline. Zodra het scherm herstart en weer online komt, pakt de service het gewoon op. Geen handmatige tussenkomst.</p>
<p>Via de webinterface zie je per scherm: is het online, welk scherm laat het zien, en je kunt een screenshot opvragen. Remote acties als herstarten, afsluiten, opnieuw installeren of updaten doe je ook vanuit de interface. Deployment van nieuwe Linux-clients gaat via SSH (een beveiligde verbinding om op afstand in te loggen op een server).</p>
<p>Vergelijk dit met hoe je <a href="/ai-wordpress-code-begrijpen-verbeteren/">WordPress-infrastructuur op afstand monitort en automatiseert</a>: het principe is hetzelfde. Ik vraag me af hoe dit werkt met grote aantallen schermen, zeg vijftig of meer. De documentatie geeft daar geen antwoord op.</p>
<h2>Voor wie is self-hosted digital signage een goed idee?</h2>
<p>Ben je technisch onderlegd, beheer je al een server en vind je privacy of databeheer belangrijk? Dan is Visio-Display interessant. Ben je ondernemer die gewoon wil dat zijn schermen werken zonder erover na te denken? Dan is een betaalde dienst eerlijker. Self-hosting is geen gratis lunch, het is een andere manier van betalen: met tijd in plaats van geld.</p>
<p>De eerlijke afweging is deze: self-hosted software is alleen gratis als je eigen tijd niets waard is. En dat is zelden zo.</p>
<p>Visio-Display is een goede keuze voor:</p>
<ul>
<li>Developers of IT-beheerders die toch al een server runnen</li>
<li>Organisaties met strikte eisen aan dataopslag (geen data op externe servers)</li>
<li>Projecten met veel schermen waar een SaaS-abonnement snel duur wordt</li>
<li>Mensen die willen experimenteren en leren</li>
</ul>
<p>Het is geen goede keuze voor:</p>
<ul>
<li>Ondernemers zonder technische achtergrond die gewoon een scherm willen aansturen</li>
<li>Situaties waar 99,9% uptime kritisch is (je bent zelf verantwoordelijk)</li>
<li>Teams zonder iemand die Docker en Linux begrijpt</li>
</ul>
<p>Er zijn betaalde alternatieven zoals ScreenCloud, Yodeck of Screenly die voor 10 tot 20 euro per scherm per maand alles regelen inclusief support. Als je twee schermen hebt, is dat 240 tot 480 euro per jaar. Dat is wat het je kost om er niet over na te hoeven denken. Soms is dat de betere investering.</p>
<p>Wil je weten hoe zulke afwegingen voor andere development-tools uitpakken? <a href="/ai-code-editor-cursor-windsurf-zed-vergelijking/">Mijn vergelijking van AI-code-editors Cursor, Windsurf en Zed</a> gaat over hetzelfde principe: gratis vs. betaald, en wat het je in de praktijk kost.</p>
<div class="nn-related-posts">
<h3>Dit vind je misschien ook interessant</h3>
<ul>
<li><a href="https://nixonews.nl/ide-stijl-portfolio-nextjs-gsap/">Portfolio website bouwen als IDE met Next.js en GSAP</a></li>
<li><a href="https://nixonews.nl/wordpress-7-0-3-beveiligingsupdate-xss-kwetsbaarheden/">WordPress beveiliging: versie 7.0.3 dicht 12 lekken, dit moet je weten</a></li>
<li><a href="https://nixonews.nl/developer-rol-ai-tijdperk-veranderingen/">Developer rol AI-tijdperk: wat ik er zelf van merk in 2026</a></li>
</ul>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://nixonews.nl/zelf-digital-signage-bouwen-open-source/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Portfolio website bouwen als IDE met Next.js en GSAP</title>
		<link>https://nixonews.nl/ide-stijl-portfolio-nextjs-gsap/</link>
					<comments>https://nixonews.nl/ide-stijl-portfolio-nextjs-gsap/#respond</comments>
		
		<dc:creator><![CDATA[Sepp Stokbroekx]]></dc:creator>
		<pubDate>Tue, 18 Aug 2026 08:04:18 +0000</pubDate>
				<category><![CDATA[Development Tools]]></category>
		<category><![CDATA[Webdevelopment]]></category>
		<category><![CDATA[animaties]]></category>
		<category><![CDATA[frontend]]></category>
		<category><![CDATA[gsap]]></category>
		<category><![CDATA[ide]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[next.js]]></category>
		<category><![CDATA[portfolio]]></category>
		<category><![CDATA[tailwind css]]></category>
		<category><![CDATA[vercel]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<guid isPermaLink="false">https://nixonews.nl/ide-stijl-portfolio-nextjs-gsap/</guid>

					<description><![CDATA[Een portfolio dat eruitziet als VS Code. Hoe bouw je een cinematic IDE-interface met Next.js, Tailwind en GSAP? Dit is de aanpak die ik zelf zou volgen.]]></description>
										<content:encoded><![CDATA[<p><strong>Kort antwoord:</strong> Portfolio website bouwen als IDE doe je met Next.js voor routing, Tailwind CSS voor de geometrische layout en GSAP voor animaties zoals een split-gate preloader. De file-tree navigatie werkt als router: klik op een bestand en de inhoud wisselt. Technisch zijn dit gewoon React-componenten met een donker thema en strikte CSS grid. Bouwtijd: realistisch 40 tot 80 uur voor een werkende versie.</p>
<h2>Waarom een standaard portfolio je niet meer opvalt?</h2>
<p>De meeste developer-portfolio&#8217;s zien er hetzelfde uit. Hero-sectie, zwevende mockups, contactformulier. Dat was drie jaar geleden al saai. Wil je opvallen, dan bouw je iets dat mensen niet verwachten. Een IDE-interface is zo&#8217;n keuze: die laat direct zien hoe je denkt als developer, nog voor iemand een regel code leest.</p>
<p>Ik begrijp waarom de meeste portfolios op elkaar lijken. Je zoekt een template, past de kleuren aan, voegt je projecten toe en klaar. Werkt ook prima als je gewoon een URL wilt sturen. Maar als je echt wilt laten zien dat je code schrijft en systemen bouwt, is een generieke pagina een gemiste kans.</p>
<p>Een IDE-stijl portfolio doet iets anders. Het laat de <em>manier</em> zien waarop je werkt, niet alleen de uitkomsten. Bezoeker klikt op <code>about.html</code> in een file-tree aan de linkerkant, en de inhoud verschijnt rechts. Dat voelt als VS Code. Voor een developer-doelgroep is dat onmiddellijk herkenbaar.</p>
<p>Dit is de sterkste route als je solliciteert bij een tech-bedrijf of freelance-klanten aantrekt die zelf ook technisch zijn. Voor een kapper of een coach raad ik dit af, want die doelgroep heeft er niets aan. Maar voor een developer? Perfect. Check ook hoe <a href="/ai-code-editor-cursor-windsurf-zed-vergelijking/">AI-code-editors zoals Cursor en Windsurf je bouwtijd flink kunnen verkorten</a>.</p>
<h2>Welke tech stack gebruik je voor een IDE-portfolio?</h2>
<p>De kern is Next.js voor routing en componentstructuur, Tailwind CSS voor de strakke geometrische styling, en GSAP voor animaties. GSAP staat voor GreenSock Animation Platform: een JavaScript-bibliotheek waarmee je complexe, vloeiende animaties bouwt die je met gewone CSS niet voor elkaar krijgt. DotLottie verzorgt lichte vectoranimaties voor de laadschermen.</p>
<p>Next.js is hier de logische keuze. Je krijgt automatisch routing op basis van je bestandsstructuur, en Vercel deployt het zonder configuratie. Dat scheelt je minstens een uur aan deployment-gedoe.</p>
<p>Tailwind CSS zorgt voor de strikte CSS grid die het IDE-gevoel geeft. Geen flexbox-gedoe waarbij de sidebar ineens over de content schuift op mobiel. Met Tailwinds utility-classes bouw je exact de layout die je wilt, en je stelt de breakpoints strak in.</p>
<p>Dan GSAP. Dit is waar de magie zit. De preloader gebruikt een zogenaamde <em>split-gate reveal</em>: twee donkere vlakken die van het scherm schuiven, omhoog en omlaag, zodat de IDE eronder tevoorschijn komt. Dat bouw je met een GSAP-timeline, zo:</p>
<p><code>gsap.timeline()<br />.to('.gate-top', { y: '-100%', duration: 0.8, ease: 'power2.inOut' })<br />.to('.gate-bottom', { y: '100%', duration: 0.8, ease: 'power2.inOut' }, '&lt;')</code></p>
<p>De <code>'&lt;'</code> laat beide animaties tegelijk starten. Simpel maar effectief. Voor de knipperende terminal-cursor gebruik je gewoon een CSS keyframe-animatie op een solid blok: geen extra library nodig.</p>
<h2>Hoe bouw je de file-tree navigatie die als router werkt?</h2>
<p>De file-tree is de kern van de interface. Bestanden zoals about.html of projects.js staan in een linker sidebar. Klik erop en de rechter weergave wisselt van inhoud. In Next.js implementeer je dit met een state-variabele die bijhoudt welk bestand actief is, gecombineerd met conditionele rendering van je content-componenten.</p>
<p>De file-tree zelf bouwen is niet het moeilijkste. Je maakt een array van objecten met bestandsnamen en bijbehorende componenten, en rendert die als een lijst. Klikken zet de actieve state, en de content-zone toont het bijbehorende component.</p>
<p>Schematisch ziet dat er zo uit:</p>
<p><code>const files = [<br />  { name: 'about.html', component: &lt;About /&gt; },<br />  { name: 'projects.js', component: &lt;Projects /&gt; },<br />  { name: 'experience.ts', component: &lt;Experience /&gt; },<br />];</p>
<p>const [active, setActive] = useState(files[0]);</p>
<p>// In de sidebar:<br />files.map(f =&gt; &lt;li onClick={() =&gt; setActive(f)}&gt;{f.name}&lt;/li&gt;)</p>
<p>// In de content-zone:<br />{active.component}</code></p>
<p>Let op: op mobiel blijft de standaardfout dat de sidebar open blijft na het klikken op een bestand. De content staat dan half verborgen achter de navigatie. De oplossing is een state-dispatcher die de sidebar automatisch sluit zodra je een bestand selecteert. Één regel extra logica in je click-handler, maar het scheelt veel frustratie bij gebruikers op telefoon.</p>
<p>Voor de styling gebruik je CSS grid met een vaste breedte voor de sidebar (<code>w-48</code> of <code>w-64</code> in Tailwind) en de rest voor de content. Zorg dat de grid niet breekt op kleinere schermen door de sidebar op mobiel standaard verborgen te zetten.</p>
<h2>Hoe deploy je dit zonder hoofdpijn op Vercel?</h2>
<p>Vercel en Next.js zijn gemaakt voor elkaar. Je pusht naar GitHub, Vercel detecteert automatisch dat het een Next.js-project is en bouwt het. Geen serverconfig, geen pipeline handmatig instellen. Je koppelt je domein aan Vercel&#8217;s nameservers en HTTPS is direct geregeld. Voor .dev-domeinen is HTTPS trouwens verplicht, niet optioneel.</p>
<p>De deployment is het makkelijkste deel van dit project. Maak een Vercel-account, koppel je GitHub-repository en Vercel doet de rest. Bij elke push naar je main-branch bouwt Vercel automatisch een nieuwe versie en zet die live. Geen handmatige FTP-uploads, geen server die je zelf beheert.</p>
<p>Eén ding om op te letten: gebruik je een <code>.dev</code>-domein, dan is HTTPS verplicht. Dat zit ingebakken in de TLD zelf. Browsers weigeren HTTP-verbindingen naar .dev-adressen. Vercel regelt dit automatisch via hun edge-netwerk, dus je hoeft er niets voor te doen.</p>
<p>Wil je het repository privé houden? Dat kan gewoon. Vercel heeft toegang tot je GitHub-repo voor de build, maar de code blijft privé voor de buitenwereld. Handig als je werk voor klanten in de repo hebt staan dat je niet wil delen.</p>
<p>Vergelijk je dit met traditionele WordPress-hosting: dit is sneller, goedkoper voor een statische site, en je hebt geen plugin-updates of beveiligingslekken om je druk over te maken. Voor meer context over <a href="/wordpress-7-0-3-beveiligingsupdate-xss-kwetsbaarheden/">WordPress beveiligingsupdates en wat je daarmee moet</a> heb ik eerder geschreven.</p>
<h2>Is dit voor elke developer de juiste keuze?</h2>
<p>Eerlijk antwoord: nee. Een IDE-portfolio is indrukwekkend als je doelgroep technisch is. Maar bouw je websites voor lokale ondernemers of werk je als freelance designer voor niet-technische klanten, dan slaat dit concept de plank mis. Ken je doelgroep voordat je 60 uur in een custom preloader stopt.</p>
<p>Mijn onderbouwde standpunt: ik zou dit type portfolio alleen bouwen als je weet dat de mensen die het bekijken er iets mee kunnen. Een CTO die een developer aanneemt? Die snapt de file-tree direct en is onder de indruk. Een MKB-ondernemer die een website wil laten bouwen? Die raakt verdwaald en klikt weg.</p>
<p>Wees ook realistisch over de bouwtijd. GSAP leren, de split-gate animatie debuggen op Safari (want Safari doet altijd iets anders), de mobiele sidebar goed laten werken: reken op 40 tot 80 uur als je dit from scratch bouwt en GSAP nog niet kent. Ken je GSAP al, dan kom je eerder uit op 20 tot 30 uur.</p>
<p>Wil je sneller resultaat? Gebruik een bestaande template als startpunt en pas die aan. Dat levert in 8 tot 10 uur een werkende versie op. Minder origineel, maar wel sneller live.</p>
<p>Wil je AI inzetten bij het bouwen van dit soort animaties? Ik heb goede ervaringen met Claude Code voor web-animaties. Het schrijft GSAP-code op basis van een beschrijving, wat je veel trial-and-error bespaart. En als je wil weten hoe <a href="/developer-rol-ai-tijdperk-veranderingen/">de rol van developers verandert in het AI-tijdperk</a>, dat is ook de moeite waard om te lezen.</p>
<div class="nn-related-posts">
<h3>Dit vind je misschien ook interessant</h3>
<ul>
<li><a href="https://nixonews.nl/wordpress-7-0-3-beveiligingsupdate-xss-kwetsbaarheden/">WordPress beveiliging: versie 7.0.3 dicht 12 lekken, dit moet je weten</a></li>
<li><a href="https://nixonews.nl/developer-rol-ai-tijdperk-veranderingen/">Developer rol AI-tijdperk: wat ik er zelf van merk in 2026</a></li>
<li><a href="https://nixonews.nl/ai-code-editor-cursor-windsurf-zed-vergelijking/">AI code editor kiezen: Cursor, Windsurf of Zed in 2026?</a></li>
</ul>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://nixonews.nl/ide-stijl-portfolio-nextjs-gsap/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>WordPress beveiliging: versie 7.0.3 dicht 12 lekken, dit moet je weten</title>
		<link>https://nixonews.nl/wordpress-7-0-3-beveiligingsupdate-xss-kwetsbaarheden/</link>
					<comments>https://nixonews.nl/wordpress-7-0-3-beveiligingsupdate-xss-kwetsbaarheden/#respond</comments>
		
		<dc:creator><![CDATA[Sepp Stokbroekx]]></dc:creator>
		<pubDate>Fri, 07 Aug 2026 08:06:37 +0000</pubDate>
				<category><![CDATA[Development Tools]]></category>
		<category><![CDATA[Webdevelopment]]></category>
		<category><![CDATA[beveiligingsupdate]]></category>
		<category><![CDATA[cross-site scripting]]></category>
		<category><![CDATA[webdevelopment]]></category>
		<category><![CDATA[wordpress 7.0.3]]></category>
		<category><![CDATA[wordpress beveiliging]]></category>
		<category><![CDATA[wordpress update]]></category>
		<category><![CDATA[XSS kwetsbaarheid]]></category>
		<guid isPermaLink="false">https://nixonews.nl/wordpress-7-0-3-beveiligingsupdate-xss-kwetsbaarheden/</guid>

					<description><![CDATA[WordPress heeft versie 7.0.3 uitgebracht met patches voor 12 kwetsbaarheden. Eén ervan scoort 8.9/10 en zit op je inlogpagina. Update nu.]]></description>
										<content:encoded><![CDATA[<p><strong>Kort antwoord:</strong> WordPress beveiliging staat onder druk: versie 7.0.3 dicht 12 kwetsbaarheden, waaronder een XSS-lek op de inlogpagina met een ernstscore van 8.9/10. Dat lek heeft geen ingelogde aanvaller nodig, maar werkt pas als iemand met een account op jouw site op iets klikt. Bij de meeste installaties regelt de automatische update dit, maar check het meteen in je dashboard.</p>
<h2>Wat zit er precies in WordPress 7.0.3?</h2>
<p>WordPress 7.0.3 lost twaalf beveiligingsproblemen op in één keer. Dat is ongewoon veel. Normaal zijn het er één of twee per release. Drie van de twaalf zijn serieus genoeg om direct aandacht aan te geven: een XSS-lek op de inlogpagina, een SSRF-probleem in URL-validatie, en een privilege-escalatie op multisite-installaties. De rest is minder urgent maar alsnog de moeite van patchen waard.</p>
<p>Twaalf kwetsbaarheden in één release is niet normaal voor WordPress core. De meeste lekken zitten in blokken die bijdragers kunnen gebruiken, zoals de Post Date block, Post Content block en de Quick Edit-functie. XSS staat voor Cross-Site Scripting: een aanval waarbij kwaadaardige code de pagina ingaat en de browser van een nietsvermoedende gebruiker die code dan uitvoert.</p>
<p>De meeste van die twaalf vereisen een account met minimaal de rol Contributor, wat het risico beperkt. Maar drie kwetsbaarheden vallen in een andere categorie. Die bespreek ik hieronder apart.</p>
<p>Overigens heeft de toename van gevonden lekken deels te maken met AI-gestuurde beveiligingstests. Beveiligingsonderzoekers gebruiken AI-tools om code sneller te scannen op patronen die mensen missen. Goed voor de veiligheid op lange termijn, maar het betekent ook dat het aantal meldingen de komende tijd niet daalt.</p>
<h2>Het XSS-lek op de inlogpagina scoort 8.9/10. Hoe werkt dat?</h2>
<p>Dit is het gevaarlijkste lek van de batch. Het zit op de inlogpagina van WordPress en heeft een ernstscore van 8.9 op 10. Een aanvaller heeft geen account nodig om het lek te triggeren, vandaar de naam &#8216;pre-auth&#8217;. Toch is de kans op misbruik beperkt, want de aanval werkt alleen als iemand met een account op jouw site op een speciaal geconstrueerde link klikt.</p>
<p>Stel je voor: een aanvaller bouwt een nep-website met een link die eruitziet als jouw WordPress-inlogpagina. Als een beheerder of redacteur op die link klikt, draait er kwaadaardige code in zijn browser. In het ergste geval escaleert dat naar Remote Code Execution (RCE), wat inhoudt dat code op jouw server actief wordt.</p>
<p>Dat klinkt alarmerend, en dat is het ook, maar de aanval vereist social engineering. De aanvaller moet de juiste persoon overtuigen om op de juiste link te klikken. Beveiligingsonderzoekers schatten de kans op actief misbruik als laag in, juist omdat die menselijke stap er altijd tussen zit.</p>
<p>De fix gaat terug tot alle WordPress-versies vanaf 4.7. Draai je nog een oudere versie, dan is de patch er alsnog, maar je moet wel updaten.</p>
<p>Voor wie zijn WordPress-installaties beheert: <a href="/ai-wordpress-code-begrijpen-verbeteren/">AI inzetten om WordPress-code te analyseren en te verbeteren</a> helpt je sneller onveilige patronen te spotten in custom code die je zelf hebt toegevoegd.</p>
<h2>SSRF en privilege-escalatie: ook serieus nemen?</h2>
<p>Naast het XSS-lek zijn er twee andere kwetsbaarheden die aandacht verdienen. SSRF staat voor Server-Side Request Forgery: een aanval waarbij de server verzoeken stuurt naar interne netwerkadressen. De derde is een privilege-escalatie op multisite-installaties waarbij een gewone gebruiker een nieuwe site kan aanmaken.</p>
<p>SSRF in URL-validatie klinkt technisch, maar de kern is dit: als een aanvaller de server laat communiceren met interne IP-adressen (link-local ranges), kan gevoelige informatie uitlekken die normaal niet van buitenaf bereikbaar is. Denk aan configuratiedata van je server of interne services. Hoe ernstig dit precies is voor standaard WordPress-hosting is nog niet volledig gedocumenteerd, maar de patch is er en dat telt.</p>
<p>De privilege-escalatie op multisites is relevant als je WordPress Multisite draait met open gebruikersregistratie. Een normale gebruiker kan dan een nieuwe subsite aanmaken op jouw netwerk. Voor een universiteits-intranet of een platform met honderden subsites is dat een echt probleem. Voor een standaard WordPress-site met één domein speelt dit niet.</p>
<p>Ga naar je WordPress-dashboard, klik op Instellingen, dan Netwerk als je multisite draait. Staat gebruikersregistratie aan en weet je niet waarom, zet hem dan uit.</p>
<div class="nn-related-posts">
<h3>Dit vind je misschien ook interessant</h3>
<ul>
<li><a href="https://nixonews.nl/developer-rol-ai-tijdperk-veranderingen/">Developer rol AI-tijdperk: wat ik er zelf van merk in 2026</a></li>
<li><a href="https://nixonews.nl/ai-code-editor-cursor-windsurf-zed-vergelijking/">AI code editor kiezen: Cursor, Windsurf of Zed in 2026?</a></li>
<li><a href="https://nixonews.nl/ai-versnelling-exponentieel-zelfverbeterende-modellen/">AI versnelt zichzelf, wat dat in de praktijk betekent voor jou</a></li>
</ul>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://nixonews.nl/wordpress-7-0-3-beveiligingsupdate-xss-kwetsbaarheden/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>AI code editor kiezen: Cursor, Windsurf of Zed in 2026?</title>
		<link>https://nixonews.nl/ai-code-editor-cursor-windsurf-zed-vergelijking/</link>
					<comments>https://nixonews.nl/ai-code-editor-cursor-windsurf-zed-vergelijking/#respond</comments>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Wed, 22 Apr 2026 09:56:56 +0000</pubDate>
				<category><![CDATA[Development Tools]]></category>
		<category><![CDATA[Webdevelopment]]></category>
		<category><![CDATA[AI agents]]></category>
		<category><![CDATA[ai development]]></category>
		<category><![CDATA[code editor]]></category>
		<category><![CDATA[productiviteit]]></category>
		<guid isPermaLink="false">https://nixonews.nl/?p=198</guid>

					<description><![CDATA[Drie AI-code-editors, drie verschillende karakters. Welke past bij hoe jij werkt? Mijn ervaring na een half jaar met alle drie naast elkaar.]]></description>
										<content:encoded><![CDATA[<p><strong>Kort antwoord:</strong> Voor de meeste developers is <a href="https://cursor.com" rel="noopener" target="_blank">Cursor</a> de beste <a href="/ai-tools-ondernemers/">AI code editor</a>: het werkt direct goed zonder configuratie en de AI-integratie is volwassen. <a href="https://windsurf.com" rel="noopener" target="_blank">Windsurf</a> is interessant als je veel autonome agentische taken laat draaien, voor 15 euro per maand. <a href="https://zed.dev" rel="noopener" target="_blank">Zed</a> is razendsnel maar nog ruw aan de randen. Ik gebruik Cursor zelf dagelijks voor klantprojecten, en Zed open ik soms voor snelle bewerkingen op grote files.</p>
<h2>Cursor: de veilige keuze die gewoon werkt</h2>
<p>Cursor is een fork van VS Code met sterke AI-integratie ingebouwd. Het werkt direct goed zonder config-bestanden te moeten aanraken. AI-completions zijn snel, het Composer-paneel voor multi-file edits is intuïtief, en de agent-mode kun je op klantenprojecten gebruiken zonder bange momentjes.</p>
<p>Ik gebruik Cursor sinds een half jaar dagelijks voor klantprojecten. Wat ik fijn vind: het is gewoon VS Code met AI erop, dus al mijn extensies werken nog en mijn keybindings ook. Geen leercurve.</p>
<p>De AI-integratie is volwassen: tab-completion is snel, in-editor chat begrijpt context van het hele bestand, en agent-mode kan zelfstandig multi-file changes doen die ik daarna review. Voor klantcode hou ik agent-mode op handmatige bevestiging, laat de AI niet ongezien door productiecode banjeren.</p>
<p>Prijs: 20 dollar per maand voor Pro. Dat is gelijk aan ChatGPT Plus, maar je krijgt er een werkende editor bij. Als je dagelijks codeert verdient dat zich snel terug.</p>
<h2>Windsurf: voor wie verder wil dan completions</h2>
<p>Windsurf is gemaakt voor agentische workflows. Het verschil met Cursor: de AI denkt vooruit en stelt zelf vervolgstappen voor. Voor 15 euro per maand een sterke optie, vooral als je AI als junior collega wilt inzetten op grotere taken.</p>
<p>Wat Windsurf onderscheidt is hoe diep de AI in je workflow zit. Bij een wijziging stelt hij vaak proactief voor om de bijbehorende tests, documentatie of types ook bij te werken. Dat is meer dan completions, het voelt als een collega die meedenkt.</p>
<p>De keerzijde: meer keuzes, dus meer ingrijpen om te voorkomen dat hij dingen wijzigt die jij niet wilde. Voor mij persoonlijk werkt dat minder fijn dan Cursor&#8217;s terughoudendere aanpak. Maar ik ken developers die er juist voor kiezen omdat het ze sneller maakt op grote refactors.</p>
<h2>Zed: snelheid boven alles, nog ruw aan de randen</h2>
<p>Zed is een editor in Rust gebouwd, met realtime collaboration en native AI-integratie. Voor het openen en doorzoeken van grote codebases is hij merkbaar sneller dan Cursor of VS Code. Maar het ecosysteem is jong en de AI-features zijn nog niet zo geslepen als bij de concurrentie.</p>
<p>Wat me bij Zed steeds opvalt: het opent een grote repository in een seconde, terwijl Cursor 5 tot 10 seconden nodig heeft. Voor wie veel met grote codebases werkt is dat een groot verschil over een werkdag.</p>
<p>Maar de AI-integratie loopt achter. Tab-completions zijn er, multi-file agentic edits zijn beperkter. Voor pure tekst-editing op snelheid is Zed top, voor zwaar AI-werk pak ik nog Cursor erbij. Beide naast elkaar werkt prima, ze gebruiken dezelfde keybindings als VS Code.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://nixonews.nl/ai-code-editor-cursor-windsurf-zed-vergelijking/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
