<?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>Archief Knowledge Base - Utilewebsites</title>
	<atom:link href="https://www.utilewebsites.nl/knowledgebase/feed/" rel="self" type="application/rss+xml" />
	<link>https://www.utilewebsites.nl/knowledgebase/</link>
	<description></description>
	<lastBuildDate>Mon, 05 Jan 2026 15:18:44 +0000</lastBuildDate>
	<language>nl-NL</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0</generator>
	<item>
		<title>Overzichtskaart: Open-Source AI Video &#038; Image Modellen (Januari 2026)</title>
		<link>https://www.utilewebsites.nl/knowledgebase/overzichtskaart-open-source-ai-video-image-modellen-januari-2026/</link>
		
		<dc:creator><![CDATA[UtileWebsites]]></dc:creator>
		<pubDate>Mon, 05 Jan 2026 15:03:25 +0000</pubDate>
				<guid isPermaLink="false">https://www.utilewebsites.nl/?post_type=wz_knowledgebase&#038;p=5505</guid>

					<description><![CDATA[<p>Dit artikel beschrijft de krachtigste open-source modellen voor het genereren van video en afbeeldingen. U kunt deze modellen volledig lokaal installeren mits u over een geschikte GPU beschikt. Hoewel 12 GB VRAM vaak als ondergrens wordt gezien voor de grotere modellen, maken gekwantiseerde versies (veelal te vinden op Hugging Face) het mogelijk om deze modellen met aanzienlijk minder geheugen (al vanaf 8 GB) te draaien. 1. Video Generatie Modellen Wan 2.1 / 2.2 Hunyuan Video (v1.5) LTX Video (LTXV) Kandinsky 5.0 Video (Lite &#38; Pro) Gespecialiseerde Video Fine-tunes 2. Image Generatie Modellen FLUX.2 Qwen Image 2512 Z-Image (Turbo)</p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/overzichtskaart-open-source-ai-video-image-modellen-januari-2026/">Overzichtskaart: Open-Source AI Video &amp; Image Modellen (Januari 2026)</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Dit artikel beschrijft de krachtigste open-source modellen voor het genereren van video en afbeeldingen. U kunt deze modellen volledig lokaal installeren mits u over een geschikte GPU beschikt. Hoewel 12 GB VRAM vaak als ondergrens wordt gezien voor de grotere modellen, maken <strong>gekwantiseerde</strong> versies (veelal te vinden op <a href="https://huggingface.co/" target="_blank" rel="noreferrer noopener">Hugging Face</a>) het mogelijk om deze modellen met aanzienlijk minder geheugen (al vanaf 8 GB) te draaien.</p>



<h2 class="wp-block-heading">1. Video Generatie Modellen</h2>



<h3 class="wp-block-heading"><strong>Wan 2.1 / 2.2</strong></h3>



<ul class="wp-block-list">
<li><strong>Beschrijving:</strong> De huidige standaard voor open-source video. Zeer stabiel in beweging en anatomie.</li>



<li><strong>Gebruik:</strong> Hoogwaardige cinematografie, realistische menselijke acties.</li>



<li><strong>GitHub (Model):</strong> <a href="https://github.com/Wan-Video/Wan2.1" target="_blank" rel="noreferrer noopener">Wan-Video/Wan2.1</a></li>



<li><strong>ComfyUI Node:</strong> <a href="https://github.com/kijai/ComfyUI-WanVideoWrapper" target="_blank" rel="noreferrer noopener">kijai/ComfyUI-WanVideoWrapper</a></li>
</ul>



<h3 class="wp-block-heading"><strong>Hunyuan Video (v1.5)</strong></h3>



<ul class="wp-block-list">
<li><strong>Beschrijving:</strong> Tencent's vlaggenschip model met 13 miljard parameters, nu in v1.5 met verbeterde prompt-adherentie en een "distilled" versie voor snelheid.</li>



<li><strong>Gebruik:</strong> Complexe tekstuele instructies en lange scènes.</li>



<li><strong>GitHub (Model):</strong> <a href="https://github.com/Tencent-Hunyuan/HunyuanVideo" target="_blank" rel="noreferrer noopener">Tencent-Hunyuan/HunyuanVideo</a></li>



<li><strong>ComfyUI Node:</strong> <a href="https://github.com/kijai/ComfyUI-HunyuanVideoWrapper" target="_blank" rel="noreferrer noopener">kijai/ComfyUI-HunyuanVideoWrapper</a></li>
</ul>



<h3 class="wp-block-heading"><strong>LTX Video (LTXV)</strong></h3>



<ul class="wp-block-list">
<li><strong>Beschrijving:</strong> Een DiT-gebaseerd model gericht op real-time generatie en efficiëntie op consumenten-GPU's.</li>



<li><strong>Gebruik:</strong> Snelle previews en real-time video-to-video transformaties.</li>



<li><strong>GitHub (Model):</strong> <a href="https://github.com/Lightricks/LTX-Video" target="_blank" rel="noreferrer noopener">Lightricks/LTX-Video</a></li>



<li><strong>ComfyUI Node:</strong> <a href="https://github.com/Lightricks/ComfyUI-LTXVideo" target="_blank" rel="noreferrer noopener">Lightricks/ComfyUI-LTXVideo</a></li>
</ul>



<h3 class="wp-block-heading"><strong>Kandinsky 5.0 Video (Lite &amp; Pro)</strong></h3>



<ul class="wp-block-list">
<li><strong>Beschrijving:</strong> Een suite van modellen gebaseerd op de <em>Cross-Attention Diffusion Transformer</em> (CrossDiT). De <strong>Lite (2B)</strong> versie is razendsnel en draait op consumenten-GPU's, terwijl de <strong>Pro (19B)</strong> versie cinematografische 10-seconden clips genereert met complexe camerabewegingen.</li>



<li><strong>Gebruik:</strong> Veelzijdige videocreatie (Text-to-Video en Image-to-Video) met sterke ondersteuning voor diverse talen en artistieke stijlen.</li>



<li><strong>GitHub (Model):</strong> <a href="https://github.com/kandinskylab/kandinsky-5" target="_blank" rel="noreferrer noopener">kandinskylab/kandinsky-5</a></li>



<li><strong>ComfyUI Template:</strong> <a href="https://docs.comfy.org/tutorials/video/kandinsky/kandinsky-5" target="_blank" rel="noreferrer noopener">Kandinsky 5 Video Workflow (Official)</a></li>
</ul>



<h3 class="wp-block-heading"><strong>Gespecialiseerde Video Fine-tunes</strong></h3>



<ul class="wp-block-list">
<li><strong>SCAIL:</strong> Studio-grade karakteranimatie (pose-to-video) met 3D-consistentie.
<ul class="wp-block-list">
<li><strong>GitHub:</strong> <a href="https://github.com/zai-org/SCAIL" target="_blank" rel="noreferrer noopener">zai-org/SCAIL</a> | <strong>ComfyUI:</strong> <a href="https://github.com/kijai/ComfyUI-WanVideoWrapper" target="_blank" rel="noreferrer noopener">ComfyUI-SCAIL-Pose</a> (onderdeel van WanVideoWrapper).</li>
</ul>
</li>



<li><strong>MoCha:</strong> De standaard voor het naadloos vervangen van personages in bestaande video's.
<ul class="wp-block-list">
<li><strong>GitHub:</strong> <a href="https://github.com/Orange-3DV-Team/MoCha" target="_blank" rel="noreferrer noopener">Orange-3DV-Team/MoCha</a> | <strong>ComfyUI:</strong> Geïntegreerd in <a href="https://github.com/kijai/ComfyUI-WanVideoWrapper" target="_blank" rel="noreferrer noopener">WanVideoWrapper</a>.</li>
</ul>
</li>



<li><strong>Nexus 1.3B</strong> : <strong>Beschrijving:</strong> Een gespecialiseerde fine-tune van de Wan 1.3B architectuur, ontwikkeld binnen het Nexus-project. Dit model is specifiek getraind op "Nexus-data" voor complexe menselijke bewegingen. <strong>Gebruik:</strong> Dans, vechtsporten en gym-oefeningen waarbij anatomische correctheid cruciaal is. <strong>GitHub (Model):</strong> <a href="https://github.com/PKU-YuanGroup/OpenS2V-Nexus" target="_blank" rel="noreferrer noopener">PKU-YuanGroup/OpenS2V-Nexus</a> <strong>ComfyUI Node:</strong> Ondersteund via de <a href="https://github.com/kijai/ComfyUI-WanVideoWrapper" target="_blank" rel="noreferrer noopener">WanVideoWrapper</a>. </li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading">2. Image Generatie Modellen</h2>



<h3 class="wp-block-heading"><strong>FLUX.2</strong></h3>



<ul class="wp-block-list">
<li><strong>Beschrijving:</strong> De opvolger van FLUX.1. Biedt fotorealisme en tekst-rendering die commerciële modellen zoals Midjourney evenaart.</li>



<li><strong>Gebruik:</strong> Alles van marketingmateriaal tot complexe digitale kunst.</li>



<li><strong>GitHub (Model):</strong> <a href="https://github.com/black-forest-labs/flux2" target="_blank" rel="noreferrer noopener">black-forest-labs/flux2</a></li>



<li><strong>ComfyUI Node:</strong> <a href="https://github.com/city96/ComfyUI-GGUF" target="_blank" rel="noreferrer noopener">city96/ComfyUI-GGUF</a> (voor GGUF quantisaties).</li>
</ul>



<h3 class="wp-block-heading"><strong>Qwen Image 2512</strong></h3>



<ul class="wp-block-list">
<li><strong>Beschrijving:</strong> Een geavanceerd model van Alibaba dat uitblinkt in het volgen van instructies voor afbeeldingsbewerking.</li>



<li><strong>Gebruik:</strong> Laag-gebaseerde bewerkingen en complexe composities.</li>



<li><strong>GitHub (Model):</strong> <a href="https://github.com/QwenLM/Qwen-Image" target="_blank" rel="noreferrer noopener">QwenLM/Qwen-Image</a></li>



<li><strong>ComfyUI Node:</strong> Gebruik de <a href="https://github.com/ltdrdata/ComfyUI-Manager" target="_blank" rel="noreferrer noopener">ComfyUI-Manager</a> en zoek op "Qwen2-VL".</li>
</ul>



<h3 class="wp-block-heading"><strong>Z-Image (Turbo)</strong></h3>



<ul class="wp-block-list">
<li><strong>Beschrijving:</strong> Een 6B parameter model van Alibaba dat in slechts 8 stappen resultaten van topniveau levert.</li>



<li><strong>Gebruik:</strong> Real-time generatie en systemen met beperkte hardware.</li>



<li><strong>GitHub (Model):</strong> <a href="https://github.com/Tongyi-MAI/Z-Image" target="_blank" rel="noreferrer noopener">Tongyi-MAI/Z-Image</a></li>



<li><strong>ComfyUI Node:</strong> Geïntegreerd via <a href="https://github.com/kijai/ComfyUI-WanVideoWrapper" target="_blank" rel="noreferrer noopener">WanVideoWrapper</a> of direct via diffusers.</li>
</ul>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/overzichtskaart-open-source-ai-video-image-modellen-januari-2026/">Overzichtskaart: Open-Source AI Video &amp; Image Modellen (Januari 2026)</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Ontdek ComfyUI: de modulaire visuele AI-engine voor creatieve workflows</title>
		<link>https://www.utilewebsites.nl/knowledgebase/ontdek-comfyui-de-modulaire-visuele-ai-engine-voor-creatieve-workflows/</link>
		
		<dc:creator><![CDATA[UtileWebsites]]></dc:creator>
		<pubDate>Sat, 27 Sep 2025 06:58:51 +0000</pubDate>
				<guid isPermaLink="false">https://www.utilewebsites.nl/?post_type=wz_knowledgebase&#038;p=5453</guid>

					<description><![CDATA[<p>AI-ontwikkeling gaat razendsnel. Elke week verschijnt er wel een nieuw model met weer andere mogelijkheden: hogere kwaliteit, nieuwe stijlen of compleet nieuwe functies. Maar hoe kunt u al die innovaties zelf testen, zonder afhankelijk te zijn van dure cloudservices? Het antwoord kan zijn: ComfyUI. Wat is ComfyUI? ComfyUI is een krachtige en modulaire visuele AI-engine die werkt met stable diffusion-workflows. In plaats van een gesloten interface krijgt u een grafiek- en knooppunten-gebaseerd canvas. Daarmee bouwt u uw eigen AI-pijplijnen door knooppunten te verbinden, te vertakken en aan te passen. Dit geeft u maximale vrijheid om precies de workflow te maken&#160;<a href="https://www.utilewebsites.nl/knowledgebase/ontdek-comfyui-de-modulaire-visuele-ai-engine-voor-creatieve-workflows/" class="read-more">Continue Reading</a></p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/ontdek-comfyui-de-modulaire-visuele-ai-engine-voor-creatieve-workflows/">Ontdek ComfyUI: de modulaire visuele AI-engine voor creatieve workflows</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">AI-ontwikkeling gaat razendsnel. <strong>Elke week verschijnt er wel een nieuw model</strong> met weer andere mogelijkheden: hogere kwaliteit, nieuwe stijlen of compleet nieuwe functies. Maar hoe kunt u al die innovaties zelf testen, zonder afhankelijk te zijn van dure cloudservices? Het antwoord kan zijn: <strong>ComfyUI</strong>.</p>



<h3 class="wp-block-heading">Wat is ComfyUI?</h3>



<p class="wp-block-paragraph">ComfyUI is een krachtige en modulaire visuele AI-engine die werkt met <strong>stable diffusion-workflows</strong>. In plaats van een gesloten interface krijgt u een <strong>grafiek- en knooppunten-gebaseerd canvas</strong>. Daarmee bouwt u uw eigen AI-pijplijnen door knooppunten te verbinden, te vertakken en aan te passen. Dit geeft u maximale vrijheid om precies de workflow te maken die u nodig hebt.</p>



<figure class="wp-block-image size-full"><a href="https://www.utilewebsites.nl/wp-content/uploads/2025/09/comfyUI.jpg"><img fetchpriority="high" decoding="async" width="840" height="494" src="https://www.utilewebsites.nl/wp-content/uploads/2025/09/comfyUI.jpg" alt="" class="wp-image-5454" srcset="https://www.utilewebsites.nl/wp-content/uploads/2025/09/comfyUI.jpg 840w, https://www.utilewebsites.nl/wp-content/uploads/2025/09/comfyUI-300x176.jpg 300w, https://www.utilewebsites.nl/wp-content/uploads/2025/09/comfyUI-768x452.jpg 768w" sizes="(max-width: 840px) 100vw, 840px" /></a></figure>



<h3 class="wp-block-heading">Test zelf de nieuwste modellen</h3>



<p class="wp-block-paragraph">Omdat AI-modellen zich zo snel ontwikkelen, wilt u ze natuurlijk direct kunnen uitproberen. Beschikt u over een pc met voldoende hardware — bijvoorbeeld een <strong>NVIDIA RTX-videokaart met minstens 8GB VRAM</strong> — dan kunt u ComfyUI lokaal installeren. Zo draait u de nieuwste modellen gewoon op uw eigen systeem, zonder wachtrijen of kosten per prompt.</p>



<h3 class="wp-block-heading">Workflows opslaan, delen en hergebruiken</h3>



<p class="wp-block-paragraph">Wat ComfyUI extra krachtig maakt, is dat u niet alleen workflows kunt maken, maar ook eenvoudig <strong>opslaan en delen</strong>. Bestanden zoals afbeeldingen, video’s of 3D-modellen bevatten metadata waarmee de volledige workflow automatisch wordt herbouwd zodra u ze in ComfyUI sleept. Dit is ideaal voor samenwerking, het leren van anderen of gewoon om snel opnieuw te experimenteren.</p>



<h3 class="wp-block-heading">Open-source en multiplatform</h3>



<p class="wp-block-paragraph">ComfyUI is volledig <strong>gratis en open-source</strong>, en beschikbaar voor <strong>Windows, Linux en macOS</strong>. Of u nu een creatieve maker bent die visueel wil experimenteren, of een developer die technisch de diepte in wil: de tool past zich aan uw workflow aan.</p>



<h3 class="wp-block-heading">Waarom kiezen voor ComfyUI?</h3>



<ul class="wp-block-list">
<li><strong>Flexibel en modulair</strong>: bouw uw eigen AI-workflows.</li>



<li><strong>Toekomstbestendig</strong>: test gemakkelijk de nieuwste modellen.</li>



<li><strong>Lokaal draaien</strong>: geen cloudkosten of afhankelijkheid.</li>



<li><strong>Community-driven</strong>: deel, remix en hergebruik workflows.</li>
</ul>



<p class="wp-block-paragraph">Kortom: wilt u écht de regie in handen nemen over AI-creatie, en alle nieuwe modellen die elke week verschijnen zelf ontdekken? Dan is <strong>ComfyUI dé engine om mee aan de slag te gaan</strong>.</p>



<p class="wp-block-paragraph"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f449.png" alt="👉" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Download ComfyUI via de officiële website:</strong> <a href="https://www.comfy.org/">https://www.comfy.org/</a></p>


        <div id="utilehelp-chatbot" class="utilehelp-chatbot utilehelp-collapsed">
            <div class="utilehelp-chat-header utilehelp-chat-toggle" style="cursor:pointer;">
                <div class="utilehelp-chat-header-logo">
                    <span>U</span>
                </div>
                <div>
                    <div class="utilehelp-chat-header-title">
                        UtileHelp AI Assistent                        <span class="utilehelp-beta-label">BETA</span>
                    </div>
                    <div class="utilehelp-chat-header-desc">Stel uw vraag over onze diensten, support of kennisbank.</div>
                </div>
                <button class="utilehelp-chat-start-btn" type="button" style="margin-left:auto;">Start chat</button>
            </div>
            <div class="utilehelp-chat-body" style="display:none;">
                <div class="utilehelp-chat-window"></div>
                <form class="utilehelp-chat-form">
                    <input type="text" name="message" class="utilehelp-chat-input" placeholder="Typ uw vraag..." required />
                    <button type="submit" class="utilehelp-chat-send" aria-label="Verstuur">
                        <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                            <path d="M12 5l6 6h-4v8h-4v-8H6z"/>
                        </svg>
                    </button>
                </form>
                <div class="utilehelp-chat-disclaimer">
                    <small>Dit is een <b>beta</b> versie. De AI-assistent is in training en kan mogelijk niet altijd de juiste of volledige informatie geven. Controleer belangrijke antwoorden altijd zelf of neem contact op met ons team.</small>                </div>
                <div class="utilehelp-chat-loading" style="display:none;">Bezig met laden...</div>
            </div>
        </div>
        <script>
        window.utilehelp_ajax = {
            ajax_url: 'https://www.utilewebsites.nl/wp-admin/admin-ajax.php',
            nonce:    '9f5ff93f10',
            lang:     'nl'
        };
        // Toggle chat open/close
        jQuery(function($){
            $('#utilehelp-chatbot .utilehelp-chat-header, #utilehelp-chatbot .utilehelp-chat-start-btn').on('click', function(e){
                var $bot = $('#utilehelp-chatbot');
                var $body = $bot.find('.utilehelp-chat-body');
                $body.slideToggle(220);
                $bot.toggleClass('utilehelp-collapsed utilehelp-open');
                // Focus input bij openen
                if($bot.hasClass('utilehelp-open')) {
                    setTimeout(function() {
                        $body.find('.utilehelp-chat-input').focus();
                    }, 250);
                }
                e.stopPropagation();
            });
        });
        </script>
        
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/ontdek-comfyui-de-modulaire-visuele-ai-engine-voor-creatieve-workflows/">Ontdek ComfyUI: de modulaire visuele AI-engine voor creatieve workflows</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Veilige Headless Architectuur met Ionic Vue en een PHP JWT-API</title>
		<link>https://www.utilewebsites.nl/knowledgebase/een-veilige-ionic-vue-app-bouwen-met-een-php-jwt-api/</link>
		
		<dc:creator><![CDATA[UtileWebsites]]></dc:creator>
		<pubDate>Sun, 13 Jul 2025 09:29:17 +0000</pubDate>
				<guid isPermaLink="false">https://www.utilewebsites.nl/?post_type=wz_knowledgebase&#038;p=5389</guid>

					<description><![CDATA[<p>Een handleiding voor het beveiligen van headless systemen met JSON Web Tokens. Inleiding: Waarom JWT voor Headless Beveiliging? Headless betekent dat uw backend uitsluitend data levert, zonder presentatie­laag—bijvoorbeeld een PHP-API die alleen JSON terugstuurt naar een mobiele app of JavaScript-frontend. In zo’n stateless omgeving werkt traditionele sessie­authenticatie niet soepel: de server moet elke request onafhankelijk verwerken zonder gebruikers­sessies bij te houden. JSON Web Tokens (JWT) bieden een compacte, self-contained en veilige manier om autorisatie­gegevens mee te sturen. De client ontvangt na inloggen een token dat bij elke API-call wordt meegestuurd, waardoor uw backend eenvoudig kan verifiëren of de gebruiker geautoriseerd&#160;<a href="https://www.utilewebsites.nl/knowledgebase/een-veilige-ionic-vue-app-bouwen-met-een-php-jwt-api/" class="read-more">Continue Reading</a></p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/een-veilige-ionic-vue-app-bouwen-met-een-php-jwt-api/">Veilige Headless Architectuur met Ionic Vue en een PHP JWT-API</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Een handleiding voor het beveiligen van headless systemen met JSON Web Tokens.</p>



<h3 class="wp-block-heading"><strong>Inleiding: Waarom JWT voor Headless Beveiliging?</strong></h3>



<figure class="wp-block-image size-large is-resized"><a href="https://www.utilewebsites.nl/wp-content/uploads/2025/07/jwt_headless_app_ionic_vue3.jpg"><img decoding="async" width="1024" height="877" src="https://www.utilewebsites.nl/wp-content/uploads/2025/07/jwt_headless_app_ionic_vue3-1024x877.jpg" alt="" class="wp-image-5401" style="width:360px;height:auto" srcset="https://www.utilewebsites.nl/wp-content/uploads/2025/07/jwt_headless_app_ionic_vue3-1024x877.jpg 1024w, https://www.utilewebsites.nl/wp-content/uploads/2025/07/jwt_headless_app_ionic_vue3-300x257.jpg 300w, https://www.utilewebsites.nl/wp-content/uploads/2025/07/jwt_headless_app_ionic_vue3-768x658.jpg 768w, https://www.utilewebsites.nl/wp-content/uploads/2025/07/jwt_headless_app_ionic_vue3-1536x1316.jpg 1536w, https://www.utilewebsites.nl/wp-content/uploads/2025/07/jwt_headless_app_ionic_vue3.jpg 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></figure>



<p class="wp-block-paragraph"><strong>Headless</strong> betekent dat uw backend uitsluitend data levert, zonder presentatie­laag—bijvoorbeeld een PHP-API die alleen JSON terugstuurt naar een mobiele app of JavaScript-frontend. In zo’n stateless omgeving werkt traditionele sessie­authenticatie niet soepel: de server moet elke request onafhankelijk verwerken zonder gebruikers­sessies bij te houden.</p>



<p class="wp-block-paragraph">JSON Web Tokens (JWT) bieden een compacte, self-contained en veilige manier om autorisatie­gegevens mee te sturen. De client ontvangt na inloggen een token dat bij elke API-call wordt meegestuurd, waardoor uw backend eenvoudig kan verifiëren of de gebruiker geautoriseerd is.</p>



<h3 class="wp-block-heading"><strong>De Anatomie van een JWT</strong></h3>



<ul class="wp-block-list">
<li><strong>Header:</strong> Bevat metadata zoals het algoritme (<code>alg</code>) en het type token (<code>typ</code>).</li>



<li><strong>Payload:</strong> Bevat de “claims”—gegevens over de gebruiker (<code>sub</code>), de issuer (<code>iss</code>), en de expiration (<code>exp</code>). U kunt hier ook rollen of permissies toevoegen.</li>



<li><strong>Signature:</strong> Een cryptografische handtekening over header en payload, met uw geheime sleutel, om manipulatie te voorkomen.</li>
</ul>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h3 class="wp-block-heading"><strong>Deel 1: De PHP Backend – Een JWT API Bouwen</strong></h3>



<p class="wp-block-paragraph">In dit deel bouwen we de PHP-backend die tokens uitgeeft en valideert. We gebruiken <code>firebase/php-jwt</code> om JWT’s aan te maken en te controleren, en zorgen voor strikte claim- en algoritme­validatie.</p>



<ul class="wp-block-list">
<li><strong>Structuur:</strong>
<ul class="wp-block-list">
<li><code>api/login.php</code>: Valideert inloggegevens en geeft een JWT (access + refresh) terug.</li>



<li><code>api/refresh.php</code>: Ververst het access token met een geldig refresh token.</li>



<li><code>api/secure-data.php</code>: Beveiligd endpoint; alleen toegankelijk met een geldig access token.</li>



<li><code>.env</code>: Bevat uw geheime sleutels (<code>JWT_SECRET</code> en <code>JWT_REFRESH_SECRET</code>).</li>
</ul>
</li>



<li><strong>Installatie:</strong><br>    <pre class="wp-block-code"><code>composer require firebase/php-jwt</code></pre><br>  </li>
</ul>



<h4 class="wp-block-heading"><strong>1. Token Genereren (login.php)</strong></h4>



<pre class="wp-block-code"><code>&lt;?php
require __DIR__ . '/vendor/autoload.php';
use Firebase\JWT\JWT;

// Laad geheim uit .env
$secret       = getenv('JWT_SECRET');
$refreshSecret= getenv('JWT_REFRESH_SECRET');

// Valideer gebruiker...
if (validUser($_POST&#91;'email'], $_POST&#91;'password'])) {
    $now = time();
    $accessPayload = &#91;
        'iss' =&gt; 'https://uw-domein.nl',
        'aud' =&gt; 'https://uw-domein.nl',
        'iat' =&gt; $now,
        'exp' =&gt; $now + 900,        // 15 minuten
        'sub' =&gt; getUserId(),
        'role'=&gt; 'user'
    ];
    $refreshPayload = &#91;
        'iss' =&gt; 'https://uw-domein.nl',
        'aud' =&gt; 'https://uw-domein.nl',
        'iat' =&gt; $now,
        'exp' =&gt; $now + 604800,     // 1 week
        'sub' =&gt; getUserId()
    ];
    $accessToken  = JWT::encode($accessPayload, $secret, 'HS256');
    $refreshToken = JWT::encode($refreshPayload, $refreshSecret, 'HS256');
    echo json_encode(&#91;'accessToken'=&gt;$accessToken, 'refreshToken'=&gt;$refreshToken]);
    exit;
}
http_response_code(401);
echo json_encode(&#91;'error'=&gt;'Ongeldige inloggegevens']);
</code></pre>



<h4 class="wp-block-heading"><strong>2. Token Valideren (secure-data.php)</strong></h4>



<pre class="wp-block-code"><code>&lt;?php
require __DIR__ . '/vendor/autoload.php';
use Firebase\JWT\JWT;
use Firebase\JWT\Key;

$secret = getenv('JWT_SECRET');
$auth   = $_SERVER&#91;'HTTP_AUTHORIZATION'] ?? '';
if (preg_match('/Bearer\s(\S+)/', $auth, $m)) {
    try {
        $token = $m&#91;1];
        $decoded = JWT::decode($token, new Key($secret, 'HS256'));
        // Controleer iss en aud
        if ($decoded-&gt;iss !== 'https://uw-domein.nl' || $decoded-&gt;aud !== 'https://uw-domein.nl') {
            throw new Exception('Invalid token issuer or audience');
        }
        echo json_encode(&#91;'data'=&gt;'Beveiligde informatie']);
        exit;
    } catch (Exception $e) {
        http_response_code(401);
        echo json_encode(&#91;'error'=&gt;'Toegang geweigerd']);
        exit;
    }
}
http_response_code(401);
echo json_encode(&#91;'error'=&gt;'Geen token gevonden']);
</code></pre>



<h4 class="wp-block-heading"><strong>3. Refresh Endpoint (refresh.php)</strong></h4>



<pre class="wp-block-code"><code>&lt;?php
require __DIR__ . '/vendor/autoload.php';
use Firebase\JWT\JWT;
use Firebase\JWT\Key;

$refreshSecret = getenv('JWT_REFRESH_SECRET');
$body = json_decode(file_get_contents('php://input'), true);
try {
    $decoded = JWT::decode($body&#91;'refreshToken'], new Key($refreshSecret, 'HS256'));
    $now = time();
    $newAccess = &#91;
        'iss'=&gt;'https://uw-domein.nl','aud'=&gt;'https://uw-domein.nl',
        'iat'=&gt;$now,'exp'=&gt;$now+900,'sub'=&gt;$decoded-&gt;sub
    ];
    $token = JWT::encode($newAccess, getenv('JWT_SECRET'), 'HS256');
    echo json_encode(&#91;'accessToken'=&gt;$token]);
} catch (Exception $e) {
    http_response_code(401);
    echo json_encode(&#91;'error'=&gt;'Ongeldig refresh token']);
}
</code></pre>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h3 class="wp-block-heading"><strong>Deel 2: De Ionic Vue App – API Communicatie met Axios</strong></h3>



<p class="wp-block-paragraph">In dit deel bouwen we de frontend in Ionic Vue. We installeren Axios, maken een service voor al onze API-calls inclusief refresh-token-rotatie, en implementeren veilige opslag.</p>



<h4 class="wp-block-heading"><strong>1. Secure Storage &amp; Axios Setup</strong></h4>



<p class="wp-block-paragraph">Installeer eerst secure storage plugin voor Capacitor:</p>



<pre class="wp-block-code"><code>npm install @capacitor-community/secure-storage</code></pre>



<pre class="wp-block-code"><code>// src/services/AxiosService.js
import axios from 'axios';
import { SecureStoragePlugin } from '@capacitor-community/secure-storage';

const API_URL = import.meta.env.VITE_API_URL || 'https://www.jouw-domein.nl/api';
const storage = new SecureStoragePlugin();

const axiosInstance = axios.create({ baseURL: API_URL, headers:{'Content-Type':'application/json'} });

axiosInstance.interceptors.request.use(async config =&gt; {
  const token = await storage.get({ key:'accessToken' });
  if (token.value) config.headers.Authorization = `Bearer ${token.value}`;
  return config;
});

export default axiosInstance;
</code></pre>



<h4 class="wp-block-heading"><strong>2. Login &amp; Token Opslag (<code>LoginPage.vue</code>)</strong></h4>



<pre class="wp-block-code"><code>&lt;script setup&gt;
import { SecureStoragePlugin } from '@capacitor-community/secure-storage';
import axiosService from '@/services/AxiosService';
const storage = new SecureStoragePlugin();

async function handleLogin() {
  const resp = await axiosService.post('/login.php', params);
  await storage.set({ key:'accessToken', value:resp.data.accessToken });
  await storage.set({ key:'refreshToken', value:resp.data.refreshToken });
  router.push('/tabs/dashboard');
}
&lt;/script&gt;
</code></pre>



<h4 class="wp-block-heading"><strong>3. Refresh Logic</strong></h4>



<p class="wp-block-paragraph">In uw interceptor kunt u bij 401 automatisch een refresh-call doen:</p>



<pre class="wp-block-code"><code>axiosInstance.interceptors.response.use(null, async error =&gt; {
  if (error.response?.status === 401) {
    const refresh = await storage.get({key:'refreshToken'});
    const { data } = await axios.post('/refresh.php', { refreshToken: refresh.value });
    await storage.set({key:'accessToken', value:data.accessToken});
    error.config.headers.Authorization = `Bearer ${data.accessToken}`;
    return axiosInstance.request(error.config);
  }
  return Promise.reject(error);
});</code></pre>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h3 class="wp-block-heading"><strong>Best Practices &amp; Veiligheid</strong></h3>



<ul class="wp-block-list">
<li>Gebruik altijd HTTPS voor transportbeveiliging.</li>



<li>Bewaar tokens in veilige opslag (bv. Capacitor Secure Storage), niet in localStorage.</li>



<li>Implementeer access- en refresh-tokenrotatie voor kortlevende sessies.</li>



<li>Valideer altijd <code>iss</code>, <code>aud</code> en <code>alg</code> aan serverzijde.</li>



<li>Beperk token-payload tot minimaal noodzakelijke data.</li>
</ul>



<h3 class="wp-block-heading"><strong>Conclusie</strong></h3>



<p class="wp-block-paragraph">Deze gids onderstreept dat echte beveiliging begint bij een “security-first” architectuur: korte levensduur tokens, dual-tokenstrategie, veilige client-opslag en strikte server-validatie. Met deze lagenaanpak bouwt u een veerkrachtige, productieklare headless applicatie die bestand is tegen moderne dreigingen.</p>


<p>```</p><p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/een-veilige-ionic-vue-app-bouwen-met-een-php-jwt-api/">Veilige Headless Architectuur met Ionic Vue en een PHP JWT-API</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Draai een Large Language Model (LLM) lokaal met Ollama</title>
		<link>https://www.utilewebsites.nl/knowledgebase/draai-een-large-language-model-llm-lokaal-met-ollama/</link>
		
		<dc:creator><![CDATA[UtileWebsites]]></dc:creator>
		<pubDate>Sun, 13 Jul 2025 08:57:25 +0000</pubDate>
				<guid isPermaLink="false">https://www.utilewebsites.nl/?post_type=wz_knowledgebase&#038;p=5374</guid>

					<description><![CDATA[<p>Introductie Wilt u experimenteren met Large Language Models (LLM's) zonder afhankelijk te zijn van cloud-diensten? Met Ollama kunt u krachtige open-source taalmodellen direct op uw eigen computer draaien. Dit garandeert niet alleen uw privacy, maar geeft u ook volledige controle over uw data en de modellen die u gebruikt. In dit artikel leggen we stap voor stap uit hoe u Ollama installeert, een LLM lokaal kunt gebruiken en hoe u dit kunt integreren met populaire ontwikkelaarstools zoals LangChain en Visual Studio Code. Wat is Ollama? Ollama is een tool die het proces van het downloaden, opzetten en draaien van LLM's,&#160;<a href="https://www.utilewebsites.nl/knowledgebase/draai-een-large-language-model-llm-lokaal-met-ollama/" class="read-more">Continue Reading</a></p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/draai-een-large-language-model-llm-lokaal-met-ollama/">Draai een Large Language Model (LLM) lokaal met Ollama</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></description>
										<content:encoded><![CDATA[<h3 class="wp-block-heading">Introductie</h3>
<p>Wilt u experimenteren met Large Language Models (LLM's) zonder afhankelijk te zijn van cloud-diensten? Met <strong>Ollama</strong> kunt u krachtige open-source taalmodellen direct op uw eigen computer draaien. Dit garandeert niet alleen uw privacy, maar geeft u ook volledige controle over uw data en de modellen die u gebruikt. In dit artikel leggen we stap voor stap uit hoe u Ollama installeert, een LLM lokaal kunt gebruiken en hoe u dit kunt integreren met populaire ontwikkelaarstools zoals LangChain en Visual Studio Code.</p>
<p data-wp-editing="1"><a href="https://www.utilewebsites.nl/wp-content/uploads/2025/07/ollama-lokale-AI-e1752397806395.jpg"><img decoding="async" class="alignnone size-full wp-image-5379" src="https://www.utilewebsites.nl/wp-content/uploads/2025/07/ollama-lokale-AI-e1752397806395.jpg" alt="" width="1024" height="736" srcset="https://www.utilewebsites.nl/wp-content/uploads/2025/07/ollama-lokale-AI-e1752397806395.jpg 1024w, https://www.utilewebsites.nl/wp-content/uploads/2025/07/ollama-lokale-AI-e1752397806395-300x216.jpg 300w, https://www.utilewebsites.nl/wp-content/uploads/2025/07/ollama-lokale-AI-e1752397806395-768x552.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<hr class="wp-block-separator has-alpha-channel-opacity" />
<h3 class="wp-block-heading">Wat is Ollama?</h3>
<p>Ollama is een tool die het proces van het downloaden, opzetten en draaien van LLM's, zoals Llama 3, aanzienlijk vereenvoudigt. Het verpakt modelgewichten en configuraties in één bestand, vergelijkbaar met hoe Docker werkt voor applicaties. Dit maakt het voor zowel ontwikkelaars als enthousiastelingen gemakkelijk om met LLM's aan de slag te gaan.</p>
<hr class="wp-block-separator has-alpha-channel-opacity" />
<h3 class="wp-block-heading">Systeemvereisten</h3>
<p>Voordat u begint, is het belangrijk om te controleren of uw systeem aan de minimale vereisten voldoet. Voor het draaien van kleinere modellen (rond 7 miljard parameters) wordt het volgende aangeraden:</p>
<ul>
<li><strong>RAM:</strong> Minimaal <strong>8 GB</strong>, maar <strong>16 GB</strong> wordt aanbevolen voor betere prestaties.</li>
<li><strong>Opslag:</strong> Voldoende vrije schijfruimte voor de modellen, die enkele gigabytes groot kunnen zijn.</li>
</ul>
<p>Voor grotere modellen heeft u aanzienlijk meer RAM en mogelijk een krachtige videokaart (GPU) nodig.</p>
<hr class="wp-block-separator has-alpha-channel-opacity" />
<h3 class="wp-block-heading">Installatie</h3>
<p>Ollama is beschikbaar voor Windows, macOS en Linux.</p>
<ol>
<li><strong>Download Ollama:</strong> Ga naar de officiële website van Ollama op <a href="https://ollama.com/" target="_blank" rel="noreferrer noopener">https://ollama.com/</a> en download het installatiebestand voor uw besturingssysteem.</li>
<li><strong>Installeer Ollama:</strong> Voer het gedownloade bestand uit en volg de installatie-instructies. Na de installatie draait Ollama op de achtergrond.</li>
</ol>
<hr class="wp-block-separator has-alpha-channel-opacity" />
<h3 class="wp-block-heading">Een model downloaden en draaien</h3>
<ol>
<li><strong>Open de terminal:</strong>
<ul>
<li><strong>Windows:</strong> Open het Startmenu, typ <code>cmd</code> of <code>Terminal</code> en druk op Enter.</li>
<li><strong>macOS:</strong> Open de <code>Terminal</code>-app vanuit de map Hulpprogramma's.</li>
<li><strong>Linux:</strong> Open uw favoriete terminal-emulator.</li>
</ul>
</li>
<li><strong>Download een model:</strong> Kies een model uit de Ollama-bibliotheek (te vinden op <a href="https://ollama.com/library" target="_blank" rel="noreferrer noopener">https://ollama.com/library</a>). Een populair en krachtig model om mee te beginnen is <strong>Llama 3.1</strong>. U downloadt het met het volgende commando:</li>
</ol>
<pre class="wp-block-code"><code>ollama pull llama3.1</code></pre>
<p>Dit kan even duren, afhankelijk van de grootte van het model en uw internetsnelheid.</p>
<ol start="3">
<li><strong>Draai het model:</strong> Zodra de download voltooid is, kunt u het model direct in uw terminal gebruiken met het volgende commando:</li>
</ol>
<pre class="wp-block-code"><code>ollama run llama3.1</code></pre>
<hr class="wp-block-separator has-alpha-channel-opacity" />
<h3 class="wp-block-heading">Interactie en Handige Commando's</h3>
<p>Na het <code>run</code> commando kunt u direct beginnen met het stellen van vragen of het geven van opdrachten aan het model. U chat als het ware met de LLM in uw terminal.</p>
<ul>
<li><code>ollama list</code>: Toont een lijst van alle modellen die u lokaal heeft gedownload.</li>
<li><code>ollama rm &lt;modelnaam&gt;</code>: Verwijdert een specifiek model om schijfruimte vrij te maken.</li>
<li><code>/bye</code>: Sluit de huidige chatsessie met een model.</li>
</ul>
<hr class="wp-block-separator has-alpha-channel-opacity" />
<h3 class="wp-block-heading">Integratie met LangChain</h3>
<p><strong>LangChain</strong> is een populair framework voor het bouwen van applicaties met LLM’s. U kunt uw lokaal draaiende Ollama-model eenvoudig integreren in zowel <strong>Python</strong>- als <strong>JavaScript/TypeScript</strong>-projecten.</p>
<h4 class="wp-block-heading">Python</h4>
<ol>
<li><strong>Installeer de Python-package:</strong></li>
</ol>
<pre class="wp-block-code"><code>pip install langchain-ollama</code></pre>
<ol start="2">
<li><strong>Gebruik in uw code:</strong></li>
</ol>
<pre class="wp-block-code"><code class="language-python" lang="python">from langchain_ollama import ChatOllama

llm = ChatOllama(model="llama3.1")
response = llm.invoke("Wat is de hoofdstad van Nederland?")
print(response.content)</code></pre>
<h4 class="wp-block-heading">Node.js (JavaScript/TypeScript)</h4>
<p>LangChain is ook beschikbaar voor JavaScript/TypeScript, ideaal voor back-ends (Node.js) of front-end frameworks (zoals Vue.js, React of Svelte).</p>
<ol>
<li><strong>Installeer via npm of yarn:</strong></li>
</ol>
<pre class="wp-block-code"><code># Voor npm
npm install @langchain/ollama

# Voor yarn
yarn add @langchain/ollama</code></pre>
<ol start="2">
<li><strong>Gebruik in uw code:</strong></li>
</ol>
<pre class="wp-block-code"><code class="language-javascript" lang="javascript">import { ChatOllama } from "@langchain/ollama";

async function main() {
  const llm = new ChatOllama({ model: "llama3.1" });
  const response = await llm.invoke("Wat is de hoofdstad van Nederland?");
  console.log(response.content);
}

main();</code></pre>
<p>Zo kunt u zowel in uw Python-backend als in uw JavaScript-stack naadloos schakelen tussen cloud-providers en uw eigen lokale Ollama-instance.</p>
<hr class="wp-block-separator has-alpha-channel-opacity" />
<h3 class="wp-block-heading">Integratie met Visual Studio Code</h3>
<p>U kunt uw lokaal draaiende LLM ook gebruiken als aanvulling op uw ontwikkelomgeving in <strong>Visual Studio Code</strong>. Dit geeft u de mogelijkheid om code te genereren en vragen te stellen met uw eigen, lokaal gehoste model.</p>
<ol>
<li><strong>Zorg dat Ollama draait:</strong> Het Ollama-proces moet op de achtergrond actief zijn.</li>
<li><strong>Installeer een compatibele extensie:</strong> Zoek in de VS Code Marketplace naar een extensie die Ollama-integratie biedt, zoals <strong>Continue</strong>.</li>
<li><strong>Configureer de extensie:</strong> Volg de instructies van de extensie om Ollama als provider in te stellen en selecteer het model dat u wilt gebruiken (bijvoorbeeld <code>llama3.1</code>).</li>
</ol>
<p>Nu kunt u in de chat-interface van de extensie uw lokale model aanroepen voor code-suggesties en andere programmeertaken, volledig binnen uw eigen omgeving.</p>
<hr class="wp-block-separator has-alpha-channel-opacity" />
<h3 class="wp-block-heading">Conclusie</h3>
<p>Ollama maakt het lokaal draaien van LLM's toegankelijk voor een breed publiek. Of u nu een ontwikkelaar bent die een AI-toepassing wil bouwen met LangChain, of uw programmeerworkflow in VS Code wilt verbeteren, met Ollama kunt u snel en eenvoudig aan de slag. Door de actieve community en de voortdurende ontwikkeling is Ollama een uitstekende keuze voor iedereen die de wereld van <strong>lokale AI</strong> wil verkennen.</p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/draai-een-large-language-model-llm-lokaal-met-ollama/">Draai een Large Language Model (LLM) lokaal met Ollama</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Hoe installeert u een lokale LLM op Ubuntu 24.10 met LM Studio?</title>
		<link>https://www.utilewebsites.nl/knowledgebase/hoe-installeer-je-een-lokale-llm-op-ubuntu-24-10-met-lm-studio/</link>
		
		<dc:creator><![CDATA[UtileWebsites]]></dc:creator>
		<pubDate>Tue, 28 Jan 2025 18:46:17 +0000</pubDate>
				<guid isPermaLink="false">https://www.utilewebsites.nl/?post_type=wz_knowledgebase&#038;p=5210</guid>

					<description><![CDATA[<p>Met LM Studio kunt u lokale AI-modellen (LLMs) draaien op uw eigen computer, zonder cloud-services zoals OpenAI. In deze gids leert u hoe u LM Studio installeert, een LLM downloadt, test, en hoe u de API-server opstart om het model in uw eigen applicaties te gebruiken. 1. LM Studio downloaden en installeren LM Studio wordt geleverd als een AppImage, een zelfstandig uitvoerbaar bestand. Volg deze stappen om het te installeren: 2. LM Studio toevoegen aan het applicatiemenu Maak een .desktop-bestand zodat LM Studio in uw menu verschijnt: Plak deze inhoud en pas het pad aan: Sla op met CTRL+O, sluit&#160;<a href="https://www.utilewebsites.nl/knowledgebase/hoe-installeer-je-een-lokale-llm-op-ubuntu-24-10-met-lm-studio/" class="read-more">Continue Reading</a></p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/hoe-installeer-je-een-lokale-llm-op-ubuntu-24-10-met-lm-studio/">Hoe installeert u een lokale LLM op Ubuntu 24.10 met LM Studio?</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p class="wp-block-paragraph">Met <strong>LM Studio</strong> kunt u <strong>lokale AI-modellen (LLMs)</strong> draaien op uw eigen computer, zonder cloud-services zoals OpenAI. In deze gids leert u hoe u <strong>LM Studio installeert</strong>, een <strong>LLM downloadt</strong>, <strong>test</strong>, en hoe u de <strong>API-server</strong> opstart om het model in uw eigen applicaties te gebruiken.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>1. LM Studio downloaden en installeren</strong></h2>



<p class="wp-block-paragraph">LM Studio wordt geleverd als een <strong>AppImage</strong>, een zelfstandig uitvoerbaar bestand. Volg deze stappen om het te installeren:</p>



<ol class="wp-block-list">
<li><strong>Download LM Studio</strong>
<ul class="wp-block-list">
<li>Ga naar <a href="https://lmstudio.ai/">lmstudio.ai</a> en download de <strong>Linux AppImage</strong>.</li>



<li>Bewaar het bestand in een map zoals <code>~/Applications/</code>.</li>
</ul>
</li>



<li><strong>Maak het bestand uitvoerbaar</strong><br>Open een terminal en voer het volgende commando uit: <code>chmod +x ~/Applications/LM-Studio-*.AppImage</code></li>



<li><strong>Start LM Studio</strong> <code>~/Applications/LM-Studio-*.AppImage</code>. U kunt LM Studio nu gebruiken, maar laten we ervoor zorgen dat het ook <strong>in uw applicatiemenu</strong> staat.</li>
</ol>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>2. LM Studio toevoegen aan het applicatiemenu</strong></h2>



<p class="wp-block-paragraph">Maak een <code>.desktop</code>-bestand zodat LM Studio in uw menu verschijnt:</p>



<pre class="wp-block-code"><code>nano ~/.local/share/applications/LM-Studio.desktop
</code></pre>



<p class="wp-block-paragraph">Plak deze inhoud en <strong>pas het pad aan</strong>:</p>



<pre class="wp-block-code"><code>&#091;Desktop Entry]
Type=Application
Name=LM Studio
Exec=/home/user/Applications/LM-Studio-0.3.8-4-x64.AppImage --no-sandbox
Icon=/home/user/Applications/lmstudio-icon.png
Terminal=false
Categories=Development;AI;
</code></pre>



<p class="wp-block-paragraph">Sla op met <code>CTRL+O</code>, sluit met <code>CTRL+X</code>, en update het menu:</p>



<pre class="wp-block-code"><code>update-desktop-database ~/.local/share/applications
</code></pre>



<p class="wp-block-paragraph">Nu kunt u LM Studio openen vanuit het menu! <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f389.png" alt="🎉" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>



<figure class="wp-block-image size-large"><a href="https://www.utilewebsites.nl/wp-content/uploads/2025/01/llmstudio-interface.png"><img loading="lazy" decoding="async" width="1024" height="643" src="https://www.utilewebsites.nl/wp-content/uploads/2025/01/llmstudio-interface-1024x643.png" alt="" class="wp-image-5211" srcset="https://www.utilewebsites.nl/wp-content/uploads/2025/01/llmstudio-interface-1024x643.png 1024w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llmstudio-interface-300x188.png 300w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llmstudio-interface-768x482.png 768w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llmstudio-interface-1536x965.png 1536w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llmstudio-interface.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>3. Een lokaal LLM-model downloaden</strong></h2>



<ol class="wp-block-list">
<li>Open <strong>LM Studio</strong> en ga naar <strong>Model Search</strong>.</li>



<li>Zoek bijvoorbeeld <strong>Llama 3.2 1B Instruct</strong> (lichtgewicht en goed voor beginners).</li>



<li>Selecteer een <strong>Q4_K_M of Q8_0 kwantisatie</strong> (hoe lager de bitwaarde, hoe minder RAM-verbruik).</li>



<li>Wacht tot de download is voltooid.</li>
</ol>



<figure class="wp-block-image size-large"><a href="https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-model-downloaden.png"><img loading="lazy" decoding="async" width="1024" height="643" src="https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-model-downloaden-1024x643.png" alt="" class="wp-image-5213" srcset="https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-model-downloaden-1024x643.png 1024w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-model-downloaden-300x188.png 300w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-model-downloaden-768x482.png 768w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-model-downloaden-1536x965.png 1536w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-model-downloaden.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>4. Testen of het model werkt</strong></h2>



<ul class="wp-block-list">
<li>Ga naar <strong>Chats</strong> in LM Studio.</li>



<li>Kies een <strong>nieuw gesprek</strong> en selecteer het geladen model.</li>



<li>Typ vragen zoals: <code>"Wat is de hoofdstad van Frankrijk?" "Leg kwantummechanica uit in simpele taal." "Wat is LLM model Llama-3.3-1B?"</code> </li>



<li>Als het model antwoordt, werkt alles!</li>
</ul>



<figure class="wp-block-image size-large"><a href="https://www.utilewebsites.nl/wp-content/uploads/2025/01/test-llm.png"><img loading="lazy" decoding="async" width="1024" height="643" src="https://www.utilewebsites.nl/wp-content/uploads/2025/01/test-llm-1024x643.png" alt="" class="wp-image-5215" srcset="https://www.utilewebsites.nl/wp-content/uploads/2025/01/test-llm-1024x643.png 1024w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/test-llm-300x188.png 300w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/test-llm-768x482.png 768w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/test-llm-1536x965.png 1536w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/test-llm.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>5. De LLM API-server starten voor gebruik in uw eigen app</strong></h2>



<p class="wp-block-paragraph">Wilt u LM Studio integreren in uw eigen <strong>Python-app</strong> of chatbot? Start dan de <strong>lokale server</strong>:</p>



<ol class="wp-block-list">
<li>Open <strong>LM Studio</strong> en zet <strong>"Developer mode"</strong> aan.</li>



<li>Klik op <strong>"Start Server"</strong> (de server draait dan op <code>http://127.0.0.1:1234</code>).</li>



<li>Test of het werkt: <code>curl http://127.0.0.1:1234/v1/models</code></li>
</ol>



<figure class="wp-block-image size-large"><a href="https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-running-servr.png"><img loading="lazy" decoding="async" width="1024" height="643" src="https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-running-servr-1024x643.png" alt="" class="wp-image-5217" srcset="https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-running-servr-1024x643.png 1024w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-running-servr-300x188.png 300w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-running-servr-768x482.png 768w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-running-servr-1536x965.png 1536w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/llm-running-servr.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<figure class="wp-block-image size-large"><a href="https://www.utilewebsites.nl/wp-content/uploads/2025/01/afbeeldingjson.png"><img loading="lazy" decoding="async" width="1024" height="643" src="https://www.utilewebsites.nl/wp-content/uploads/2025/01/afbeeldingjson-1024x643.png" alt="" class="wp-image-5228" srcset="https://www.utilewebsites.nl/wp-content/uploads/2025/01/afbeeldingjson-1024x643.png 1024w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/afbeeldingjson-300x188.png 300w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/afbeeldingjson-768x482.png 768w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/afbeeldingjson-1536x965.png 1536w, https://www.utilewebsites.nl/wp-content/uploads/2025/01/afbeeldingjson.png 2048w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></a></figure>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>6. Voorbeeld: LLM gebruiken in een Python-app</strong></h2>



<p class="wp-block-paragraph">Hier is een voorbeeld van hoe u een <strong>API-aanroep</strong> doet naar uw lokale LLM:</p>



<pre class="wp-block-code"><code>import requests

url = "http://127.0.0.1:1234/v1/chat/completions"
headers = {"Content-Type": "application/json"}
data = {
    "model": "llama-3.2-1b-instruct",
    "messages": &#091;{"role": "user", "content": "Wat is de hoofdstad van Frankrijk?"}]
}

response = requests.post(url, json=data, headers=headers)
print(response.json())
</code></pre>



<p class="wp-block-paragraph">Om een <strong>JSON-geformatteerd POST-verzoek</strong> in <strong>PHP</strong> te verzenden om te communiceren met de <strong>API van LM Studio</strong>, kunt u de <strong>cURL-bibliotheek</strong> van PHP gebruiken. Hier is hoe u de code kunt structureren:</p>



<pre class="wp-block-code"><code>&lt;?php
// API endpoint URL
$url = 'http://127.0.0.1:1234/v1/chat/completions';

// Data to be sent in the POST request
$data = &#091;
    'model' =&gt; 'llama-3.2-1b-instruct',
    'messages' =&gt; &#091;
        &#091;'role' =&gt; 'user', 'content' =&gt; 'Wat is de hoofdstad van Frankrijk?']
    ]
];

// Initialize cURL session
$ch = curl_init($url);

// Encode data to JSON format
$payload = json_encode($data);

// Set cURL options
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);
curl_setopt($ch, CURLOPT_HTTPHEADER, &#091;
    'Content-Type: application/json',
    'Content-Length: ' . strlen($payload)
]);

// Execute cURL request
$response = curl_exec($ch);

// Check for errors
if ($response === false) {
    $error = curl_error($ch);
    curl_close($ch);
    die('cURL Error: ' . $error);
}

// Close cURL session
curl_close($ch);

// Decode and display the response
$result = json_decode($response, true);
print_r($result);
?&gt;
</code></pre>



<p class="wp-block-paragraph">Dit stuurt een vraag naar het <strong>lokale LLM</strong> en print het antwoord.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>7. Minimum systeemvereisten voor LM Studio</strong></h2>



<p class="wp-block-paragraph">Wilt u een <strong>lokale LLM draaien</strong>? Dit zijn de minimale en aanbevolen specificaties:</p>



<figure class="wp-block-table"><table class="has-fixed-layout"><thead><tr><th>Onderdeel</th><th>Minimale specs</th><th>Aanbevolen specs</th></tr></thead><tbody><tr><td><strong>CPU</strong></td><td>Intel Core i5 (AVX2)</td><td>Intel i7/i9 of AMD Ryzen 7/9</td></tr><tr><td><strong>RAM</strong></td><td>8 GB</td><td>16-32 GB (voor grotere modellen)</td></tr><tr><td><strong>Opslag</strong></td><td>10 GB vrije ruimte</td><td>50 GB+ (voor meerdere modellen)</td></tr><tr><td><strong>GPU</strong></td><td>Niet vereist</td><td>NVIDIA GPU met CUDA voor snellere prestaties</td></tr></tbody></table></figure>



<p class="wp-block-paragraph">Hoe krachtiger uw <strong>CPU/GPU</strong>, hoe sneller de LLM zal reageren. <strong>Een GPU zoals een NVIDIA RTX 3060+</strong> kan het proces <strong>flink versnellen</strong>.</p>



<hr class="wp-block-separator has-alpha-channel-opacity"/>



<h2 class="wp-block-heading"><strong>Conclusie</strong></h2>



<p class="wp-block-paragraph">Met LM Studio kunt u <strong>lokale AI-modellen draaien, testen en gebruiken</strong> zonder afhankelijk te zijn van cloud-diensten. Of u nu een <strong>chatbot, AI-assistent of embedded LLM</strong> wilt maken, dit is een geweldige manier om AI lokaal te draaien. <img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f680.png" alt="🚀" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>


        <div id="utilehelp-chatbot" class="utilehelp-chatbot utilehelp-collapsed">
            <div class="utilehelp-chat-header utilehelp-chat-toggle" style="cursor:pointer;">
                <div class="utilehelp-chat-header-logo">
                    <span>U</span>
                </div>
                <div>
                    <div class="utilehelp-chat-header-title">
                        UtileHelp AI Assistent                        <span class="utilehelp-beta-label">BETA</span>
                    </div>
                    <div class="utilehelp-chat-header-desc">Stel uw vraag over onze diensten, support of kennisbank.</div>
                </div>
                <button class="utilehelp-chat-start-btn" type="button" style="margin-left:auto;">Start chat</button>
            </div>
            <div class="utilehelp-chat-body" style="display:none;">
                <div class="utilehelp-chat-window"></div>
                <form class="utilehelp-chat-form">
                    <input type="text" name="message" class="utilehelp-chat-input" placeholder="Typ uw vraag..." required />
                    <button type="submit" class="utilehelp-chat-send" aria-label="Verstuur">
                        <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
                            <path d="M12 5l6 6h-4v8h-4v-8H6z"/>
                        </svg>
                    </button>
                </form>
                <div class="utilehelp-chat-disclaimer">
                    <small>Dit is een <b>beta</b> versie. De AI-assistent is in training en kan mogelijk niet altijd de juiste of volledige informatie geven. Controleer belangrijke antwoorden altijd zelf of neem contact op met ons team.</small>                </div>
                <div class="utilehelp-chat-loading" style="display:none;">Bezig met laden...</div>
            </div>
        </div>
        <script>
        window.utilehelp_ajax = {
            ajax_url: 'https://www.utilewebsites.nl/wp-admin/admin-ajax.php',
            nonce:    '9f5ff93f10',
            lang:     'nl'
        };
        // Toggle chat open/close
        jQuery(function($){
            $('#utilehelp-chatbot .utilehelp-chat-header, #utilehelp-chatbot .utilehelp-chat-start-btn').on('click', function(e){
                var $bot = $('#utilehelp-chatbot');
                var $body = $bot.find('.utilehelp-chat-body');
                $body.slideToggle(220);
                $bot.toggleClass('utilehelp-collapsed utilehelp-open');
                // Focus input bij openen
                if($bot.hasClass('utilehelp-open')) {
                    setTimeout(function() {
                        $body.find('.utilehelp-chat-input').focus();
                    }, 250);
                }
                e.stopPropagation();
            });
        });
        </script>
        
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/hoe-installeer-je-een-lokale-llm-op-ubuntu-24-10-met-lm-studio/">Hoe installeert u een lokale LLM op Ubuntu 24.10 met LM Studio?</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Stappen om een PDF te downloaden en weer te geven in een Ionic Vue-app (Android/iOS):</title>
		<link>https://www.utilewebsites.nl/knowledgebase/stappen-om-een-pdf-te-downloaden-en-weer-te-geven-in-een-ionic-vue-app-android-ios/</link>
		
		<dc:creator><![CDATA[UtileWebsites]]></dc:creator>
		<pubDate>Sat, 30 Nov 2024 09:20:47 +0000</pubDate>
				<guid isPermaLink="false">https://www.utilewebsites.nl/?post_type=wz_knowledgebase&#038;p=5168</guid>

					<description><![CDATA[<p>2. Component Code (Web en Mobile)Voeg de volgende code toe als component in je Ionic Vue-project: 3. Toelichting 4. Compatibiliteit</p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/stappen-om-een-pdf-te-downloaden-en-weer-te-geven-in-een-ionic-vue-app-android-ios/">Stappen om een PDF te downloaden en weer te geven in een Ionic Vue-app (Android/iOS):</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-image size-full is-resized"><a href="https://www.utilewebsites.nl/wp-content/uploads/2024/11/pdf_donwload_in_app_android_ios.jpg"><img loading="lazy" decoding="async" width="411" height="471" src="https://www.utilewebsites.nl/wp-content/uploads/2024/11/pdf_donwload_in_app_android_ios.jpg" alt="" class="wp-image-5158" style="width:306px;height:auto" srcset="https://www.utilewebsites.nl/wp-content/uploads/2024/11/pdf_donwload_in_app_android_ios.jpg 411w, https://www.utilewebsites.nl/wp-content/uploads/2024/11/pdf_donwload_in_app_android_ios-262x300.jpg 262w" sizes="auto, (max-width: 411px) 100vw, 411px" /></a></figure>

<ol class="wp-block-list">
<li><strong>Installeer Vereiste Packages</strong> Voeg de benodigde libraries toe aan je project:</li>
</ol>

<pre class="wp-block-code"><code>npm install pdfjs-dist @capacitor/filesystem @capacitor-community/http
</code></pre>

<p class="wp-block-paragraph">2. <strong>Component Code (Web en Mobile)</strong><br/>Voeg de volgende code toe als component in je Ionic Vue-project:</p>

<pre class="wp-block-code"><code>&lt;template>
  &lt;ion-page>
    &lt;ion-header>
      &lt;ion-toolbar>
        &lt;ion-title>PDF Viewer&lt;/ion-title>
      &lt;/ion-toolbar>
    &lt;/ion-header>
    &lt;ion-content class="ion-padding">
      &lt;ion-button @click="downloadAndRenderPdf">Download PDF&lt;/ion-button>
      &lt;!-- PDF.js rendering container -->
      &lt;div v-if="pdfUrl">
        &lt;canvas ref="pdfCanvas" style="width: 100%;">&lt;/canvas>
      &lt;/div>
    &lt;/ion-content>
  &lt;/ion-page>
&lt;/template>

&lt;script>
import { defineComponent, watch } from "vue";
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent, IonButton } from "@ionic/vue";
import { Filesystem, Directory } from "@capacitor/filesystem";
import { CapacitorHttp } from "@capacitor/core";
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf';

// Set the workerSrc to the imported worker
pdfjsLib.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.mjs",
  import.meta.url
).toString();

import { Capacitor } from '@capacitor/core';

// Add detailed platform and path logging
const platform = Capacitor.getPlatform();
console.log('Platform detection:', {
  platform,
  isAndroid: platform === 'android',
  isWeb: platform === 'web'
});

export default defineComponent({
  name: "TestpdfPage",
  components: {
    IonPage,
    IonHeader,
    IonToolbar,
    IonTitle,
    IonContent,
    IonButton,
  },
  data() {
    return {
      pdfUrl: null, // URL of the PDF to be rendered
    };
  },
  methods: {
    // Method to download and render the PDF
    async downloadAndRenderPdf() {
      try {
        console.log("Starting PDF download process...");

        const pdfUrl = "https://example.com/sample.pdf";
        const fileName = "temp.pdf";
        const dirPath = "downloaded";
        const savedFilePath = `${dirPath}/${fileName}`;

        console.log("Downloading PDF using CapacitorHttp from:", pdfUrl);

        // Clean up the existing directory
        try {
          await Filesystem.rmdir({
            path: dirPath,
            directory: Directory.Data,
            recursive: true,
          });
          console.log("Cleaned up existing directory");
        } catch (e) {
          console.log("No existing directory to clean up");
        }

        // Download PDF using native HTTP
        const response = await CapacitorHttp.get({
          url: pdfUrl,
          responseType: "arraybuffer",
        });

        console.log("Download response:", response);

        // Check if response.data is a string (Base64) or an ArrayBuffer
        let base64Data;
        if (typeof response.data === 'string') {
          // Data is already Base64-encoded
          base64Data = response.data;
          console.log("Received data is a Base64 string");
        } else {
          // Convert ArrayBuffer to Base64
          base64Data = this.arrayBufferToBase64(response.data);
          console.log("Converted ArrayBuffer to Base64");
        }

        console.log("Base64 data length:", base64Data.length);

        // Save to device storage
        try {
          await Filesystem.mkdir({
            path: dirPath,
            directory: Directory.Data,
            recursive: true,
          });
          console.log("Created directory for PDF");

          await Filesystem.writeFile({
            path: savedFilePath,
            data: base64Data,
            directory: Directory.Data,
          });

          console.log("File saved locally");

          // Check if the file exists and get its size
          const fileStat = await Filesystem.stat({
            path: savedFilePath,
            directory: Directory.Data,
          });

          console.log("File exists:", fileStat.uri);
          console.log("File size in bytes:", fileStat.size);

          if (fileStat.size === 0) {
            console.error("Downloaded file is empty.");
            return;
          }

          // Set the PDF URL to display it
          this.pdfUrl = "data:application/pdf;base64," + base64Data;
        } catch (fsError) {
          console.error("Filesystem Error:", fsError);
          throw fsError;
        }
      } catch (error) {
        console.error("Operation Failed:", error);
      }
    },
    // Method to render the PDF on a canvas
    async renderPdf() {
      console.log("Starting PDF rendering process...");

      const canvas = this.$refs.pdfCanvas;
      if (!canvas) {
        console.error("Canvas element not found");
        return;
      }
      console.log("Canvas element found");

      const ctx = canvas.getContext("2d");
      if (!ctx) {
        console.error("Failed to get 2D context");
        return;
      }
      console.log("2D context obtained");

      try {
        const pdf = await pdfjsLib.getDocument(this.pdfUrl).promise;
        console.log("PDF document fetched successfully");

        const page = await pdf.getPage(1);
        console.log("Page 1 of PDF document fetched successfully");

        const viewport = page.getViewport({ scale: 1.5 });
        console.log("Viewport created with scale 1.5");

        canvas.width = viewport.width;
        canvas.height = viewport.height;
        console.log("Canvas dimensions set to width:", viewport.width, "height:", viewport.height);

        const renderContext = {
          canvasContext: ctx,
          viewport: viewport,
        };

        console.log("Starting PDF page render");
        await page.render(renderContext).promise;
        console.log("PDF rendered successfully");
      } catch (error) {
        console.error("Error rendering PDF:", JSON.stringify(error, Object.getOwnPropertyNames(error)));
      }
    },
    // Helper method to convert ArrayBuffer to Base64
    arrayBufferToBase64(buffer) {
      let binary = "";
      const bytes = new Uint8Array(buffer);
      const len = bytes.byteLength;
      for (let i = 0; i &lt; len; i++) {
        binary += String.fromCharCode(bytes&#91;i]);
      }
      return btoa(binary);
    },
  },
  watch: {
    // Watcher to render the PDF when the URL changes
    pdfUrl(newUrl) {
      if (newUrl) {
        this.$nextTick(() => {
          this.renderPdf();
        });
      }
    }
  }
});
&lt;/script>
</code></pre>

<p class="wp-block-paragraph">3. <strong>Toelichting</strong></p>

<ul class="wp-block-list">
<li><strong>HTTP Plugin</strong>: Hiermee download je bestanden veilig en effectief op mobiele apparaten.</li>



<li><strong>Filesystem Plugin</strong>: Hiermee sla je bestanden lokaal op in de <code>Documents</code>-directory, essentieel voor Android/iOS.</li>



<li><strong>PDF.js</strong>: Verantwoordelijk voor het renderen van PDF's in een canvas-element.</li>
</ul>

<p class="wp-block-paragraph">4. <strong>Compatibiliteit</strong></p>

<ul class="wp-block-list">
<li><strong>Android/iOS</strong>: Zorg ervoor dat je permissies instelt voor bestandstoegang in je <code>AndroidManifest.xml</code> en <code>Info.plist</code>.</li>



<li><strong>Web</strong>: PDF.js werkt direct met een externe URL zonder dat lokale opslag nodig is.</li>
</ul>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/stappen-om-een-pdf-te-downloaden-en-weer-te-geven-in-een-ionic-vue-app-android-ios/">Stappen om een PDF te downloaden en weer te geven in een Ionic Vue-app (Android/iOS):</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Realtime Console Log Uitlezen voor Testen op iPhone en iPad met Ontwikkelaarstools</title>
		<link>https://www.utilewebsites.nl/knowledgebase/realtime-console-log-uitlezen-voor-testen-op-iphone-en-ipad-met-ontwikkelaarstools/</link>
		
		<dc:creator><![CDATA[UtileWebsites]]></dc:creator>
		<pubDate>Thu, 29 Aug 2024 08:41:39 +0000</pubDate>
				<guid isPermaLink="false">https://www.utilewebsites.nl/?post_type=wz_knowledgebase&#038;p=5123</guid>

					<description><![CDATA[<p>Het debuggen van mobiele websites of applicaties is essentieel om ervoor te zorgen dat ze correct werken op verschillende apparaten. Als u werkt met iPhones en iPads, biedt Apple krachtige tools om realtime de console log uit te lezen. In dit artikel bespreek ik hoe u deze ontwikkelaarstools kunt gebruiken om de console log van een iPhone of iPad uit te lezen tijdens het testen. Benodigdheden Om de console log van een iPhone of iPad uit te lezen, heeft u de volgende zaken nodig: Stappen om de Console Log uit te lezen Stap 1: Installeer Xcode Als u Xcode nog&#160;<a href="https://www.utilewebsites.nl/knowledgebase/realtime-console-log-uitlezen-voor-testen-op-iphone-en-ipad-met-ontwikkelaarstools/" class="read-more">Continue Reading</a></p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/realtime-console-log-uitlezen-voor-testen-op-iphone-en-ipad-met-ontwikkelaarstools/">Realtime Console Log Uitlezen voor Testen op iPhone en iPad met Ontwikkelaarstools</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Het debuggen van mobiele websites of applicaties is essentieel om ervoor te zorgen dat ze correct werken op verschillende apparaten. Als u werkt met iPhones en iPads, biedt Apple krachtige tools om realtime de console log uit te lezen. In dit artikel bespreek ik hoe u deze ontwikkelaarstools kunt gebruiken om de console log van een iPhone of iPad uit te lezen tijdens het testen.</p>



<h2 class="wp-block-heading">Benodigdheden</h2>



<p class="wp-block-paragraph">Om de console log van een iPhone of iPad uit te lezen, heeft u de volgende zaken nodig:</p>



<ul class="wp-block-list">
<li>Een iPhone of iPad met iOS/iPadOS</li>



<li>Een MacBook met macOS</li>



<li>Een Lightning- of USB-C-kabel</li>



<li>Xcode (Apple's Integrated Development Environment)</li>
</ul>



<h2 class="wp-block-heading">Stappen om de Console Log uit te lezen</h2>



<h3 class="wp-block-heading"><strong>Stap 1: Installeer Xcode</strong></h3>



<p class="wp-block-paragraph">Als u Xcode nog niet hebt geïnstalleerd, kunt u dit doen via de Mac App Store. Xcode bevat essentiële ontwikkelaarstools die nodig zijn om de console log van een iPhone of iPad uit te lezen.</p>



<h3 class="wp-block-heading"><strong>Stap 2: Schakel de Ontwikkelaarsmodus in op uw iPhone/iPad</strong></h3>



<p class="wp-block-paragraph">Voordat u de console log kunt uitlezen, moet u de ontwikkelaarsmodus op uw apparaat activeren:</p>



<ol class="wp-block-list">
<li>Ga naar <code>Instellingen > Privacy en beveiliging</code> op uw iPhone of iPad.</li>



<li>Scroll naar beneden en zet <code>Ontwikkelaarsmodus</code> aan.</li>



<li>Volg de aanwijzingen om uw apparaat opnieuw op te starten en de ontwikkelaarsmodus te activeren.</li>
</ol>



<h3 class="wp-block-heading"><strong>Stap 3: Activeer Web Inspector</strong></h3>



<p class="wp-block-paragraph">De Web Inspector is een tool waarmee u de HTML, CSS en JavaScript van een website in realtime kunt inspecteren en debuggen:</p>



<ol class="wp-block-list">
<li>Open <code>Instellingen > Safari > Geavanceerd</code> op uw iPhone of iPad.</li>



<li>Zet de schakelaar voor <code>Web Inspector</code> aan.</li>
</ol>



<h3 class="wp-block-heading"><strong>Stap 4: Verbind uw iPhone/iPad met uw MacBook</strong></h3>



<p class="wp-block-paragraph">Gebruik een Lightning- of USB-C-kabel om uw iPhone of iPad met uw MacBook te verbinden. Hierdoor kan uw MacBook de activiteiten op uw apparaat monitoren.</p>



<h3 class="wp-block-heading"><strong>Stap 5: Open Safari op uw MacBook</strong></h3>



<p class="wp-block-paragraph">Om toegang te krijgen tot de console log:</p>



<ol class="wp-block-list">
<li>Ga naar <code>Safari > Voorkeuren > Geavanceerd</code> op uw MacBook.</li>



<li>Vink <code>Toon Ontwikkel-menu in menubalk</code> aan.</li>
</ol>



<h3 class="wp-block-heading"><strong>Stap 6: Start de Web Inspector</strong></h3>



<p class="wp-block-paragraph">Met de Web Inspector kunt u nu de console log van uw iPhone of iPad uitlezen:</p>



<ol class="wp-block-list">
<li>Ga naar de menubalk in Safari en klik op <code>Ontwikkel</code>.</li>



<li>U zou de naam van uw iPhone of iPad moeten zien onder het Ontwikkel-menu.</li>



<li>Beweeg de muis over de naam van uw apparaat en selecteer de website of webpagina die u aan het bekijken bent op uw iPhone of iPad.</li>



<li>Hierdoor wordt de Web Inspector geopend, waarin u de console log in realtime kunt bekijken en analyseren.</li>
</ol>



<h2 class="wp-block-heading">Conclusie</h2>



<p class="wp-block-paragraph">Met de bovenstaande stappen kunt u eenvoudig de console log uitlezen van een iPhone of iPad tijdens het testen. Dit stelt u in staat om in realtime problemen op te sporen en op te lossen, wat cruciaal is voor het optimaliseren van mobiele websites en applicaties. Door gebruik te maken van de Web Inspector in Safari, kunnen fouten snel worden geïdentificeerd en aangepakt, wat de algehele kwaliteit van de ontwikkelde software verbetert.</p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/realtime-console-log-uitlezen-voor-testen-op-iphone-en-ipad-met-ontwikkelaarstools/">Realtime Console Log Uitlezen voor Testen op iPhone en iPad met Ontwikkelaarstools</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Belangrijkste Programmeerprincipes en Voorbeelden</title>
		<link>https://www.utilewebsites.nl/knowledgebase/belangrijkste-programmeerprincipes-en-voorbeelden/</link>
		
		<dc:creator><![CDATA[UtileWebsites]]></dc:creator>
		<pubDate>Thu, 29 Aug 2024 07:10:33 +0000</pubDate>
				<guid isPermaLink="false">https://www.utilewebsites.nl/?post_type=wz_knowledgebase&#038;p=5103</guid>

					<description><![CDATA[<p>Welkom bij deze gids waarin we enkele fundamentele programmeerprincipes verkennen, ondersteund met duidelijke voorbeelden in PHP, JavaScript en Python. Of u nu een beginner bent of uw kennis wilt opfrissen, deze gids helpt u om essentiële concepten beter te begrijpen. Tip: Codevoorbeelden in dit artikel kunnen interactief worden uitgevoerd in uw favoriete code-editor. Experimenteer met de code om te zien hoe deze werkt! 1. Variabelen en Datatypen Een variabele is een naam die verwijst naar een locatie in het geheugen waar een waarde is opgeslagen. Datatypen bepalen wat voor soort waarde een variabele kan bevatten, zoals integers, strings, en booleans. Voorbeeld&#160;<a href="https://www.utilewebsites.nl/knowledgebase/belangrijkste-programmeerprincipes-en-voorbeelden/" class="read-more">Continue Reading</a></p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/belangrijkste-programmeerprincipes-en-voorbeelden/">Belangrijkste Programmeerprincipes en Voorbeelden</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Welkom bij deze gids waarin we enkele fundamentele programmeerprincipes verkennen, ondersteund met duidelijke voorbeelden in PHP, JavaScript en Python. Of u nu een beginner bent of uw kennis wilt opfrissen, deze gids helpt u om essentiële concepten beter te begrijpen.</p>



<p class="wp-block-paragraph"><strong>Tip:</strong> Codevoorbeelden in dit artikel kunnen interactief worden uitgevoerd in uw favoriete code-editor. Experimenteer met de code om te zien hoe deze werkt!</p>



<h2 class="wp-block-heading">1. Variabelen en Datatypen</h2>



<p class="wp-block-paragraph">Een variabele is een naam die verwijst naar een locatie in het geheugen waar een waarde is opgeslagen. Datatypen bepalen wat voor soort waarde een variabele kan bevatten, zoals integers, strings, en booleans.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>$age = 25;  // Integer
$name = "John";  // String
$isStudent = true;  // Boolean</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>let age = 25;  // Integer
let name = "John";  // String
let isStudent = true;  // Boolean</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code>age = 25  # Integer
name = "John"  # String
is_student = True  # Boolean</code></pre>



<h2 class="wp-block-heading">2. Control Flow (If-Else, Loops)</h2>



<p class="wp-block-paragraph">Control flow statements bepalen de volgorde waarin de code wordt uitgevoerd. Dit maakt het mogelijk om beslissingen te nemen (if-else) en herhaalde acties uit te voeren (loops).</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>$score = 85;
if ($score &gt;= 90) {
    echo "A";
} elseif ($score &gt;= 80) {
    echo "B";
} else {
    echo "C";
}</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>let score = 85;
if (score &gt;= 90) {
    console.log("A");
} else if (score &gt;= 80) {
    console.log("B");
} else {
    console.log("C");
}</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code>score = 85
if score &gt;= 90:
    print("A")
elif score &gt;= 80:
    print("B")
else:
    print("C")</code></pre>



<h2 class="wp-block-heading">3. Functies</h2>



<p class="wp-block-paragraph">Functies zijn blokken van herbruikbare code die kunnen worden aangeroepen met een naam. Ze helpen bij het organiseren van code en vermijden duplicatie.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>function greet($name) {
    return "Hello, " . $name;
}
echo greet("Alice");  // Output: Hello, Alice</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>function greet(name) {
    return "Hello, " + name;
}
console.log(greet("Alice"));  // Output: Hello, Alice</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code>def greet(name):
    return "Hello, " + name

print(greet("Alice"))  # Output: Hello, Alice</code></pre>



<h2 class="wp-block-heading">4. Arrays en Lijsten</h2>



<p class="wp-block-paragraph">Arrays en lijsten zijn verzamelingen van waarden die kunnen worden benaderd via indexen. Ze zijn handig om meerdere gegevens in één variabele op te slaan.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>$fruits = array("Apple", "Banana", "Cherry");
echo $fruits&#91;1];  // Output: Banana</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>let fruits = &#91;"Apple", "Banana", "Cherry"];
console.log(fruits&#91;1]);  // Output: Banana</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code>fruits = &#91;"Apple", "Banana", "Cherry"]
print(fruits&#91;1])  # Output: Banana</code></pre>



<h2 class="wp-block-heading">5. Objectgeoriënteerd Programmeren (OOP)</h2>



<p class="wp-block-paragraph">OOP is een programmeerparadigma gebaseerd op het concept van "objecten", die data (attributen) en functies (methoden) bundelen. Het helpt bij het structureren van complexe programma's.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>class Car {
    public $color;
    public function __construct($color) {
        $this-&gt;color = $color;
    }
    public function honk() {
        return "Beep!";
    }
}
$myCar = new Car("red");
echo $myCar-&gt;honk();  // Output: Beep!</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>class Car {
    constructor(color) {
        this.color = color;
    }
    honk() {
        return "Beep!";
    }
}
let myCar = new Car("red");
console.log(myCar.honk());  // Output: Beep!</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code>class Car:
    def __init__(self, color):
        self.color = color
    
    def honk(self):
        return "Beep!"

my_car = Car("red")
print(my_car.honk())  # Output: Beep!</code></pre>



<h2 class="wp-block-heading">6. Modulariteit</h2>



<p class="wp-block-paragraph">Modulariteit gaat over het opdelen van een programma in kleinere, zelfstandige onderdelen (modules). Dit bevordert hergebruik en maakt de code makkelijker te begrijpen en te onderhouden.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>// math_functions.php
function add($a, $b) {
    return $a + $b;
}

// main.php
include 'math_functions.php';
echo add(5, 10);  // Output: 15</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>// mathFunctions.js
export function add(a, b) {
    return a + b;
}

// main.js
import { add } from './mathFunctions.js';
console.log(add(5, 10));  // Output: 15</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code># math_functions.py
def add(a, b):
    return a + b

# main.py
from math_functions import add
print(add(5, 10))  # Output: 15</code></pre>



<h2 class="wp-block-heading">7. Debugging en Foutenafhandeling</h2>



<p class="wp-block-paragraph">Debugging is het proces van het identificeren en oplossen van fouten in de code. Foutenafhandeling zorgt ervoor dat uw programma op een gecontroleerde manier met fouten omgaat.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>try {
    $result = 10 / 0;
} catch (Exception $e) {
    echo "Caught exception: " . $e-&gt;getMessage();
}</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>try {
    let result = 10 / 0;
} catch (e) {
    console.log("Caught exception: " + e.message);
}</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code>try:
    result = 10 / 0
except Exception as e:
    print("Caught exception:", str(e))</code></pre>



<h2 class="wp-block-heading">8. Recursie</h2>



<p class="wp-block-paragraph">Recursie is een programmeertechniek waarbij een functie zichzelf aanroept. Het wordt vaak gebruikt voor het oplossen van problemen die kunnen worden opgedeeld in kleinere, vergelijkbare problemen.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>function factorial($n) {
    if ($n === 0) {
        return 1;
    } else {
        return $n * factorial($n - 1);
    }
}
echo factorial(5);  // Output: 120</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>function factorial(n) {
    if (n === 0) {
        return 1;
    } else {
        return n * factorial(n - 1);
    }
}
console.log(factorial(5));  // Output: 120</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code>def factorial(n):
    if n == 0:
        return 1
    else:
        return n * factorial(n - 1)

print(factorial(5))  # Output: 120</code></pre>



<h2 class="wp-block-heading">9. DRY (Don't Repeat Yourself)</h2>



<p class="wp-block-paragraph">Dit principe benadrukt het belang van het vermijden van duplicatie in uw code. Herhaal geen logica; gebruik in plaats daarvan functies of modules om code herbruikbaar te maken.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>// Definieer een functie om herhaling te voorkomen
function calculateArea($width, $height) {
    return $width * $height;
}

$area1 = calculateArea(5, 10);
$area2 = calculateArea(7, 3);</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>// Definieer een functie om herhaling te voorkomen
function calculateArea(width, height) {
    return width * height;
}

let area1 = calculateArea(5, 10);
let area2 = calculateArea(7, 3);</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code># Definieer een functie om herhaling te voorkomen
def calculate_area(width, height):
    return width * height

area1 = calculate_area(5, 10)
area2 = calculate_area(7, 3)</code></pre>



<h2 class="wp-block-heading">10. KISS (Keep It Simple, Stupid)</h2>



<p class="wp-block-paragraph">Houd uw code zo eenvoudig mogelijk. Complexe oplossingen zijn vaak moeilijker te onderhouden en te debuggen. Door uw code simpel te houden, minimaliseer u de kans op fouten.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>// Een eenvoudige berekening zonder onnodige complexiteit
function add($a, $b) {
    return $a + $b;
}
echo add(5, 10);</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>// Een eenvoudige berekening zonder onnodige complexiteit
function add(a, b) {
    return a + b;
}
console.log(add(5, 10));</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code># Een eenvoudige berekening zonder onnodige complexiteit
def add(a, b):
    return a + b

print(add(5, 10))</code></pre>



<h2 class="wp-block-heading">11. YAGNI (You Aren't Gonna Need It)</h2>



<p class="wp-block-paragraph">Voeg alleen functionaliteit toe die op dit moment nodig is. Het anticiperen op toekomstige behoeften kan leiden tot onnodige complexiteit en bloat in uw code.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>// Voeg geen onnodige functies toe
function multiply($a, $b) {
    return $a * $b;
}
echo multiply(5, 10);</code></pre>



<pre class="wp-block-code"><code>// Voeg geen onnodige functies toe
function multiply(a, b) {
    return a * b;
}
console.log(multiply(5, 10));</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code># Voeg geen onnodige functies toe
def multiply(a, b):
    return a * b

print(multiply(5, 10))</code></pre>



<h2 class="wp-block-heading">12. Documentatie</h2>



<p class="wp-block-paragraph">Zorg ervoor dat uw code goed gedocumenteerd is, zodat anderen (of jijzelf in de toekomst) het gemakkelijk kunnen begrijpen. Dit omvat niet alleen commentaar in de code, maar ook duidelijke README-bestanden en architectuurnotities.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>// Bereken het oppervlakte van een rechthoek
function calculateArea($width, $height) {
    return $width * $height;
}

// Gebruiksvoorbeelden
$area = calculateArea(5, 10);
echo $area;  // Output: 50</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>// Bereken het oppervlakte van een rechthoek
function calculateArea(width, height) {
    return width * height;
}

// Gebruiksvoorbeelden
let area = calculateArea(5, 10);
console.log(area);  // Output: 50</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code># Bereken het oppervlakte van een rechthoek
def calculate_area(width, height):
    return width * height

# Gebruiksvoorbeelden
area = calculate_area(5, 10)
print(area)  # Output: 50</code></pre>



<h2 class="wp-block-heading">13. Efficiëntie en Schaalbaarheid</h2>



<p class="wp-block-paragraph">Code moet niet alleen functioneel zijn, maar ook efficiënt en schaalbaar. Dit omvat het vermijden van onnodige loops, optimaliseren van geheugenbeheer, en het gebruik van technieken zoals profilering om prestatieknelpunten te identificeren.</p>



<h3 class="wp-block-heading">Voorbeeld in PHP:</h3>



<pre class="wp-block-code"><code>// Gebruik van een efficiënte loop
$numbers = range(1, 100);
$sum = array_sum($numbers);
echo $sum;  // Output: 5050</code></pre>



<h3 class="wp-block-heading">Voorbeeld in JavaScript:</h3>



<pre class="wp-block-code"><code>// Gebruik van een efficiënte loop
let numbers = Array.from({length: 100}, (_, i) =&gt; i + 1);
let sum = numbers.reduce((acc, curr) =&gt; acc + curr, 0);
console.log(sum);  // Output: 5050</code></pre>



<h3 class="wp-block-heading">Voorbeeld in Python:</h3>



<pre class="wp-block-code"><code># Gebruik van een efficiënte loop
numbers = range(1, 101)
sum = sum(numbers)
print(sum)  # Output: 5050</code></pre>



<p class="wp-block-paragraph"></p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/belangrijkste-programmeerprincipes-en-voorbeelden/">Belangrijkste Programmeerprincipes en Voorbeelden</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>De Angst voor AI in Softwareontwikkeling: Risico’s van Codeverspreiding en Privacyverlies</title>
		<link>https://www.utilewebsites.nl/knowledgebase/de-angst-voor-ai-in-softwareontwikkeling-risicos-van-codeverspreiding-en-privacyverlies/</link>
		
		<dc:creator><![CDATA[UtileWebsites]]></dc:creator>
		<pubDate>Tue, 13 Aug 2024 22:16:10 +0000</pubDate>
				<guid isPermaLink="false">https://www.utilewebsites.nl/?post_type=wz_knowledgebase&#038;p=5089</guid>

					<description><![CDATA[<p>De angst dat het gebruik van AI-tools in softwareontwikkeling kan leiden tot het onbedoeld delen of trainen van AI-modellen met gevoelige code is begrijpelijk, maar de realiteit is complex en hangt af van hoe deze tools worden gebruikt en beheerd. Hoewel de zorgen reëel zijn, zijn er ook sterke argumenten die de voordelen van AI in softwareontwikkeling benadrukken. Veelvoorkomende Zorgen van Ontwikkelaars Waarom de Voordelen Zwaarder Kunnen Wegen Wat Zegt OpenAI Hierover? OpenAI stelt dat gegevens die via hun API worden verwerkt, niet worden gebruikt om het model verder te trainen zonder expliciete toestemming van de gebruiker. Dit biedt een&#160;<a href="https://www.utilewebsites.nl/knowledgebase/de-angst-voor-ai-in-softwareontwikkeling-risicos-van-codeverspreiding-en-privacyverlies/" class="read-more">Continue Reading</a></p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/de-angst-voor-ai-in-softwareontwikkeling-risicos-van-codeverspreiding-en-privacyverlies/">De Angst voor AI in Softwareontwikkeling: Risico’s van Codeverspreiding en Privacyverlies</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">De angst dat het gebruik van AI-tools in softwareontwikkeling kan leiden tot het onbedoeld delen of trainen van AI-modellen met gevoelige code is begrijpelijk, maar de realiteit is complex en hangt af van hoe deze tools worden gebruikt en beheerd. Hoewel de zorgen reëel zijn, zijn er ook sterke argumenten die de voordelen van AI in softwareontwikkeling benadrukken.</p>



<h3 class="wp-block-heading">Veelvoorkomende Zorgen van Ontwikkelaars</h3>



<ol class="wp-block-list">
<li><strong>Betrouwbaarheid van AI-Gegenereerde Code</strong>: Ontwikkelaars vragen zich af hoe betrouwbaar de code is die door AI wordt gegenereerd. Er is een risico dat deze code minder geoptimaliseerd of veilig is dan handgeschreven code, wat extra werk kan vereisen om fouten te corrigeren.</li>



<li><strong>Banenverlies door Automatisering</strong>: Een andere zorg is dat AI-tools, door repetitieve taken te automatiseren, bepaalde banen in de softwareontwikkeling zouden kunnen vervangen, wat vragen oproept over de toekomstige rol van menselijke ontwikkelaars.</li>



<li><strong>Ethische Implicaties</strong>: Ontwikkelaars maken zich zorgen over de ethische implicaties van AI, zoals bias in AI-modellen en de mogelijkheid dat AI onbedoeld discriminerende algoritmen creëert.</li>



<li><strong>Intellectueel Eigendom en Juridische Kwesties</strong>: Er is onzekerheid over wie de eigenaar is van door AI gegenereerde code en wat de juridische implicaties zijn als deze code gebaseerd blijkt te zijn op bestaande, mogelijk auteursrechtelijk beschermde code.</li>



<li><strong>Afhankelijkheid van AI</strong>: Er is ook bezorgdheid dat teams te afhankelijk kunnen worden van AI-tools, waardoor essentiële programmeervaardigheden verloren kunnen gaan en de mogelijkheid om zonder AI te werken, wordt beperkt.</li>
</ol>



<h3 class="wp-block-heading">Waarom de Voordelen Zwaarder Kunnen Wegen</h3>



<ol class="wp-block-list">
<li><strong>Verhoogde Productiviteit</strong>: AI-tools zoals GitHub Copilot kunnen ontwikkelaars aanzienlijk helpen bij het schrijven van code, het vinden van fouten, en het versnellen van repetitieve taken. Dit betekent dat ontwikkelteams sneller producten kunnen leveren en zich kunnen concentreren op meer complexe problemen die creatief en strategisch denken vereisen.</li>



<li><strong>Minimalisatie van Risico's</strong>: Bedrijven kunnen gevoelige informatie zoals API-sleutels, wachtwoorden, en andere beveiligingsgerelateerde code eenvoudig buiten AI-tools houden. Door strikte richtlijnen en best practices te volgen, zoals het gebruik van environment variables voor gevoelige informatie, kunnen de risico's verder worden beperkt.</li>



<li><strong>Mogelijkheid om AI Veilig te Integreren</strong>: Veel organisaties hebben al frameworks en processen ontwikkeld die AI veilig integreren in hun ontwikkelcyclus. Dit omvat het beperken van AI-toegang tot specifieke onderdelen van de codebase en het gebruiken van AI in sandboxed omgevingen, zodat gevoelige code en bedrijfsgeheimen niet in gevaar komen.</li>



<li><strong>Concurrentievoordeel</strong>: Bedrijven die AI-tools efficiënt gebruiken, hebben vaak een concurrentievoordeel omdat ze sneller op de markt kunnen komen met nieuwe functies en producten. Dit kan cruciaal zijn in sectoren waar snelheid en innovatie van levensbelang zijn.</li>
</ol>



<h3 class="wp-block-heading">Wat Zegt OpenAI Hierover?</h3>



<p class="wp-block-paragraph">OpenAI stelt dat gegevens die via hun API worden verwerkt, niet worden gebruikt om het model verder te trainen zonder expliciete toestemming van de gebruiker. Dit biedt een zekere mate van bescherming voor bedrijven die gevoelige code willen delen via tools zoals GPT-4. Voor meer informatie hierover kun je <a style="color:blue" href="https://openai.com/enterprise-privacy">de officiële documentatie van OpenAI</a> raadplegen.</p>



<h3 class="wp-block-heading">Wat Zegt GitHub Copilot Hierover?</h3>



<p class="wp-block-paragraph">GitHub Copilot, beheerd door Microsoft, volgt een vergelijkbaar beleid waarbij geen specifieke stukjes code worden opgeslagen of gebruikt voor verdere training tenzij de gebruiker hiervoor toestemming geeft. Dit helpt bij het minimaliseren van het risico op het onbedoeld delen van vertrouwelijke informatie. Meer details hierover kun je vinden op <a style="color:blue" href="https://github.com/features/copilot#faq">de GitHub Copilot FAQ-pagina</a>.</p>



<h3 class="wp-block-heading">Is de Angst Terecht?</h3>



<p class="wp-block-paragraph">De angst is begrijpelijk, vooral voor bedrijven die met gevoelige of eigendomsgebonden code werken. Hoewel de kans klein is dat AI-tools zoals GPT-4 of Copilot vertrouwelijke code daadwerkelijk verspreiden, is het risico niet volledig uit te sluiten. Het is essentieel dat bedrijven de risico's goed afwegen en voorzorgsmaatregelen nemen om gevoelige informatie te beschermen.</p>



<h3 class="wp-block-heading">Beperkingen van AI-Tools</h3>



<p class="wp-block-paragraph">AI-modellen in 2024 zoals GPT-4 en GitHub Copilot hebben beperkingen, zoals beperkte contextverwerking en het onvermogen om de volledige complexiteit van een softwareproject te begrijpen. Dit maakt ze minder geschikt om zonder menselijke supervisie een volledig softwarepakket te beheren.</p>



<h3 class="wp-block-heading">Conclusie</h3>



<p class="wp-block-paragraph">Hoewel er risico's zijn verbonden aan het gebruik van AI in softwareontwikkeling, kunnen deze vaak worden beheerst door de juiste veiligheidsmaatregelen te nemen. De voordelen van verhoogde productiviteit en snellere ontwikkelcycli wegen vaak zwaarder dan de relatief kleine risico's, vooral wanneer gevoelige informatie zorgvuldig wordt behandeld. Hierdoor kan AI een waardevolle toevoeging zijn aan moderne softwareontwikkelingsprocessen.</p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/de-angst-voor-ai-in-softwareontwikkeling-risicos-van-codeverspreiding-en-privacyverlies/">De Angst voor AI in Softwareontwikkeling: Risico’s van Codeverspreiding en Privacyverlies</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Einde van Windows 10: Een Tijdperk Sluit Af, Maar Alternatieven Blijven Beschikbaar</title>
		<link>https://www.utilewebsites.nl/knowledgebase/einde-van-windows-10-een-tijdperk-sluit-af-maar-alternatieven-blijven-beschikbaar/</link>
		
		<dc:creator><![CDATA[UtileWebsites]]></dc:creator>
		<pubDate>Sat, 25 May 2024 09:06:44 +0000</pubDate>
				<guid isPermaLink="false">https://www.utilewebsites.nl/?post_type=wz_knowledgebase&#038;p=5014</guid>

					<description><![CDATA[<p>Einde van Windows 10: Een Tijdperk Sluit Af, Maar Alternatieven Blijven Beschikbaar Op 14 oktober 2025 stopt Microsoft officieel met de ondersteuning van Windows 10. Dit betekent dat er geen beveiligingsupdates meer zullen worden uitgebracht, waardoor miljoenen computers, die technisch gezien nog prima functioneren, kwetsbaar worden voor beveiligingsrisico's. Voor veel gebruikers kan dit een probleem vormen, vooral als hun hardware niet compatibel is met de nieuwste versies van Windows. Gelukkig zijn er robuuste en veelzijdige alternatieven: Debian 12 en Ubuntu 24.04 LTS. Waarom Debian 12? Debian 12 is een lichtgewicht, maar krachtige Linux-distributie die op een breed scala aan hardware&#160;<a href="https://www.utilewebsites.nl/knowledgebase/einde-van-windows-10-een-tijdperk-sluit-af-maar-alternatieven-blijven-beschikbaar/" class="read-more">Continue Reading</a></p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/einde-van-windows-10-een-tijdperk-sluit-af-maar-alternatieven-blijven-beschikbaar/">Einde van Windows 10: Een Tijdperk Sluit Af, Maar Alternatieven Blijven Beschikbaar</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<h3 class="wp-block-heading">Einde van Windows 10: Een Tijdperk Sluit Af, Maar Alternatieven Blijven Beschikbaar</h3>



<p class="wp-block-paragraph">Op 14 oktober 2025 stopt Microsoft officieel met de ondersteuning van Windows 10. Dit betekent dat er geen beveiligingsupdates meer zullen worden uitgebracht, waardoor miljoenen computers, die technisch gezien nog prima functioneren, kwetsbaar worden voor beveiligingsrisico's. Voor veel gebruikers kan dit een probleem vormen, vooral als hun hardware niet compatibel is met de nieuwste versies van Windows. Gelukkig zijn er robuuste en veelzijdige alternatieven: <strong>Debian 12</strong> en <strong>Ubuntu 24.04 LTS</strong>.</p>



<h4 class="wp-block-heading">Waarom Debian 12?</h4>



<p class="wp-block-paragraph">Debian 12 is een lichtgewicht, maar krachtige Linux-distributie die op een breed scala aan hardware werkt. Het biedt een veilig en stabiel besturingssysteem zonder de noodzaak van frequente hardware-upgrades. Debian 12 kan naadloos werken op zowel oudere computers als moderne laptops en MacBooks met Intel-processors.</p>



<h5 class="wp-block-heading">Minimale Systeemeisen voor Debian 12</h5>



<ul class="wp-block-list">
<li><strong>RAM:</strong> 2 GB of meer</li>



<li><strong>CPU:</strong> Dual-core processor met een minimale kloksnelheid van 1GHz</li>



<li><strong>Opslag:</strong> Minstens 20GB schijfruimte</li>



<li><strong>USB-drive:</strong> 8 GB of groter voor installatie</li>
</ul>



<h4 class="wp-block-heading">Ondersteunde Hardware</h4>



<p class="wp-block-paragraph">Debian 12 is bijzonder geschikt voor oudere systemen die anders mogelijk niet meer bruikbaar zouden zijn. Bijvoorbeeld:</p>



<ul class="wp-block-list">
<li><strong>Laptops en Desktops:</strong> Compatibel met systemen uit het begin van 2010 en later.</li>



<li><strong>MacBooks:</strong> Compatibel met MacBooks met Intel-processors vanaf het modeljaar 2006.</li>
</ul>



<h3 class="wp-block-heading">Waarom Ubuntu 24.04 LTS?</h3>



<p class="wp-block-paragraph">Ubuntu 24.04 LTS (Long Term Support) is een populaire keuze voor zowel beginners als gevorderde gebruikers. Het biedt een gebruiksvriendelijke interface, een breed scala aan vooraf geïnstalleerde software, en een uitstekende gemeenschapsondersteuning. Ubuntu heeft iets hogere systeemeisen dan Debian, maar blijft toegankelijk voor de meeste computers.</p>



<h4 class="wp-block-heading">Minimale Systeemeisen voor Ubuntu 24.04 LTS</h4>



<ul class="wp-block-list">
<li><strong>RAM</strong>: 4 GB of meer (2 GB mogelijk voor de lichtgewicht <em>Ubuntu MATE</em> of <em>Lubuntu</em>)</li>



<li><strong>CPU</strong>: Dual-core processor van 2 GHz of hoger</li>



<li><strong>Opslag</strong>: Minstens 25 GB schijfruimte</li>



<li><strong>USB-drive</strong>: 8 GB of groter voor installatie</li>
</ul>



<h4 class="wp-block-heading">Ondersteunde Hardware</h4>



<p class="wp-block-paragraph">Ubuntu staat bekend om zijn brede hardware-ondersteuning en wordt vaak aanbevolen voor moderne en oudere systemen:</p>



<ul class="wp-block-list">
<li><strong>Laptops en Desktops</strong>: Compatibel met systemen vanaf ongeveer 2010.</li>



<li><strong>MacBooks</strong>: Ondersteunt zowel Intel- als Apple Silicon-processors met aanvullende configuratie.</li>
</ul>



<h2 class="wp-block-heading">Softwarealternatieven voor Populaire Windows-toepassingen</h2>



<p class="wp-block-paragraph">Een van de grootste zorgen bij het overstappen naar een nieuw besturingssysteem is het vinden van vervangende software voor de applicaties die men gewend is. Gelukkig bieden zowel Debian 12 als Ubuntu 24.04 LTS uitstekende alternatieven voor de meest gebruikte programma's op Windows:</p>



<h4 class="wp-block-heading">Mail</h4>



<p class="wp-block-paragraph"><strong>Thunderbird</strong></p>



<ul class="wp-block-list">
<li>Een krachtig, open-source e-mailprogramma met uitgebreide functionaliteiten zoals kalenderintegratie, contactbeheer en ondersteuning voor meerdere e-mailaccounts.</li>



<li><a href="https://www.thunderbird.net/" style="color: blue; text-decoration: underline;">Thunderbird downloaden</a></li>
</ul>



<h4 class="wp-block-heading">Photoshop</h4>



<p class="wp-block-paragraph"><strong>GIMP (GNU Image Manipulation Program)</strong></p>



<ul class="wp-block-list">
<li>Een gratis, open-source beeldbewerkingsprogramma dat veel van dezelfde functies biedt als Adobe Photoshop, waaronder lagen, filters en uitgebreide bewerkingstools.</li>



<li><a href="https://www.gimp.org/" style="color: blue; text-decoration: underline;">GIMP downloaden</a></li>
</ul>



<h4 class="wp-block-heading">Illustrator</h4>



<p class="wp-block-paragraph"><strong>Inkscape</strong></p>



<ul class="wp-block-list">
<li>Een open-source vectorafbeeldingstool die een breed scala aan functies biedt voor grafisch ontwerp en illustratie, vergelijkbaar met Adobe Illustrator.</li>



<li><a href="https://inkscape.org/" style="color: blue; text-decoration: underline;">Inkscape downloaden</a></li>
</ul>



<h4 class="wp-block-heading">PowerPoint</h4>



<p class="wp-block-paragraph"><strong>LibreOffice Impress</strong></p>



<ul class="wp-block-list">
<li>Onderdeel van de LibreOffice-suite, Impress biedt uitgebreide functies voor het maken en bewerken van presentaties, vergelijkbaar met Microsoft PowerPoint.</li>



<li><a href="https://www.libreoffice.org/" style="color: blue; text-decoration: underline;">LibreOffice downloaden</a></li>
</ul>



<h4 class="wp-block-heading">Word</h4>



<p class="wp-block-paragraph"><strong>LibreOffice Writer</strong></p>



<ul class="wp-block-list">
<li>LibreOffice Writer is een krachtig tekstverwerkingsprogramma dat volledig compatibel is met Microsoft Word-documenten en een breed scala aan opmaak- en bewerkingstools biedt.</li>



<li><a href="https://www.libreoffice.org/" style="color: blue; text-decoration: underline;">LibreOffice downloaden</a></li>
</ul>



<h4 class="wp-block-heading">Excel</h4>



<p class="wp-block-paragraph"><strong>LibreOffice Calc</strong></p>



<ul class="wp-block-list">
<li>Een uitgebreide spreadsheet-applicatie die compatibel is met Microsoft Excel-bestanden en tal van functies biedt voor gegevensanalyse en visualisatie.</li>



<li><a href="https://www.libreoffice.org/" style="color: blue; text-decoration: underline;">LibreOffice downloaden</a></li>
</ul>



<h4 class="wp-block-heading">Audio - Wavelab</h4>



<p class="wp-block-paragraph"><strong>Audacity</strong></p>



<ul class="wp-block-list">
<li>Een gratis, open-source audio-editor en -opnametoepassing die een breed scala aan bewerkingsmogelijkheden biedt voor zowel beginners als professionals.</li>



<li><a href="https://www.audacityteam.org/" style="color: blue; text-decoration: underline;">Audacity downloaden</a></li>
</ul>



<h4 class="wp-block-heading">Videobewerking</h4>



<p class="wp-block-paragraph"><strong>DaVinci Resolve</strong></p>



<ul class="wp-block-list">
<li>Een krachtige, gratis videobewerkingssoftware die professionele functies biedt voor het bewerken, kleurcorrectie, audio post-productie en visuele effecten.</li>



<li><a href="https://www.blackmagicdesign.com/products/davinciresolve/" style="color: blue; text-decoration: underline;">DaVinci Resolve downloaden</a></li>
</ul>



<h4 class="wp-block-heading">Programmering</h4>



<p class="wp-block-paragraph"><strong>Visual Studio Code (VSCode)</strong></p>



<ul class="wp-block-list">
<li>Een gratis, krachtige code-editor van Microsoft met ondersteuning voor vele programmeertalen en extensies.</li>



<li><a href="https://code.visualstudio.com/" style="color: blue; text-decoration: underline;">VSCode downloaden</a></li>
</ul>



<h4 class="wp-block-heading">Antivirus</h4>



<p class="wp-block-paragraph"><strong>ClamAV</strong></p>



<ul class="wp-block-list">
<li>Een open-source antivirusprogramma voor Linux, geschikt voor het detecteren van verschillende soorten malware.</li>



<li><a href="https://www.clamav.net/" style="color: blue; text-decoration: underline;">ClamAV downloaden</a></li>
</ul>



<h4 class="wp-block-heading">Media Player</h4>



<p class="wp-block-paragraph"><strong>VLC Media Player</strong></p>



<ul class="wp-block-list">
<li>Een gratis, open-source mediaspeler die vrijwel alle audio- en videoformaten ondersteunt.</li>



<li>Biedt mogelijkheden voor het afspelen en omzetten van dvd's, het streamen van media over een netwerk, en het toevoegen van ondertitels.</li>



<li><a href="https://www.videolan.org/vlc/" style="color: blue; text-decoration: underline;">VLC downloaden</a></li>
</ul>



<h3 class="wp-block-heading">Conclusie</h3>



<p class="wp-block-paragraph">Het einde van de ondersteuning voor Windows 10 in oktober 2025 hoeft niet het einde te betekenen van de bruikbaarheid van uw huidige hardware. Door over te stappen op <strong>Debian 12</strong> of <strong>Ubuntu 24.04 LTS</strong> kunt u uw computer een nieuw leven geven zonder in te boeten op functionaliteit of veiligheid. Beide besturingssystemen bieden een breed scala aan open-source software, waarmee u vrijwel alle taken kunt uitvoeren die u gewend bent op Windows. Of u nu kiest voor de stabiliteit van Debian of de gebruiksvriendelijke ervaring van Ubuntu, u profiteert van een veiliger, efficiënter en toekomstbestendig besturingssysteem.</p>



<p class="wp-block-paragraph"><strong>Stap vandaag nog over op Debian 12 of Ubuntu 24.04 LTS en ontdek een wereld van mogelijkheden!</strong></p>



<ul class="wp-block-list">
<li><a href="https://www.debian.org/" style="color: blue; text-decoration: underline;">Debian 12 downloaden</a></li>



<li><a style="color: blue; text-decoration: underline;" href="https://ubuntu.com/download/desktop">Ubuntu 24 downloaden</a></li>
</ul>



<p class="wp-block-paragraph">Met deze overstap zorgt u ervoor dat uw systeem veilig, stabiel, up-to-date blijft en stukken sneller wordt. Het grote voordeel ten opzichte van Windows 10 is dat deze systemen aanzienlijk efficiënter en sneller presteren, zelfs op oudere hardware.</p>



<p class="wp-block-paragraph"></p>
<p>Het bericht <a href="https://www.utilewebsites.nl/knowledgebase/einde-van-windows-10-een-tijdperk-sluit-af-maar-alternatieven-blijven-beschikbaar/">Einde van Windows 10: Een Tijdperk Sluit Af, Maar Alternatieven Blijven Beschikbaar</a> verscheen eerst op <a href="https://www.utilewebsites.nl">Utilewebsites</a>.</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
