Om ongewenste advertenties of malafide of ongepaste websites uit je thuisnetwerk te weren, kun je gebruikmaken van DNS-filtering, bij voorkeur gecentraliseerd zodat je dit niet op elke client afzonderlijk hoeft in te stellen. We bekijken diverse oplossingen: in de cloud, op een computer en op een NAS.

We leggen je eerst kort uit wat DNS is en hoe het werkt. DNS (Domain Name System) is een hiërarchisch opgebouwd systeem dat domeinnamen omzet naar ip-adressen. Wanneer je een URL zoals www.id.nl invoert in je browser, vraagt je browser eerst aan de lokale ‘resolver’ om de hostgegevens. Normaal gesproken wordt eerst het bestand hosts geraadpleegd, dat standaard te vinden is in de map %windir%\System32\drivers\etc.

Levert dit niets op, dan wordt eventueel een interne resolver geraadpleegd, bijvoorbeeld binnen je eigen netwerk. Ook niks? Dan wordt je DNS-verzoek doorgestuurd naar een DNS-recursor, zoals die van je internetprovider of een DNS-provider zoals Cloudflare. Als de gevraagde gegevens niet in de cache van de recursor staan, zal de DNS-recursor de root-nameservers raadplegen voor de DNS-records. Als alles goed gaat, ontvangt de DNS-recursor de gevraagde informatie stapsgewijs, van nl naar id.nl naar www.id.nl, en levert deze de nodige informatie met het ip-adres af aan je applicatie.

Het is ook mogelijk om een DNS-proxy of aangepaste DNS-server in te stellen die het DNS-verzoek eerst controleert aan de hand van een regel- of filterset. Als de aangevraagde domeinnaam op deze lijst staat, wordt het verzoek geblokkeerd of omgeleid volgens de ingestelde regels.

We bekijken hieronder enkele gratis DNS-filters. Eerst een publieke cloudfilter (OpenDNS), vervolgens twee uiteenlopende filters op een Windows-pc (NxFilter en Pi-hole) en tot slot een filter op een NAS (AdGuard Home).

Cloud

DNS-server-met-filter

De gemakkelijkste oplossing, waarvoor je geen extra apparaat nodig hebt, is het opzetten van een cloudgebaseerde DNS-server met ingebouwde filtering. Er zijn verschillende clouddiensten beschikbaar die deze mogelijkheid bieden, vaak gratis. We bespreken hier een van de populairste diensten, namelijk OpenDNS. In het kader ‘Andere cloudfilters’ vind je meer alternatieven.

De eenvoudigste oplossing is het gebruik van OpenDNS Family Shield, dat voornamelijk is bedoeld om ‘volwassen inhoud’ te blokkeren. Je hoeft alleen maar het ip-adres van de primaire en secundaire DNS-servers in te vullen: 208.67.222.123 en 208.67.220.123. Op de website van OpenDNS vind je hoe je dit doet op machineniveau: voor desktops en laptops (Windows, macOS en Linux), voor mobiele apparaten (iOS, Android, spelconsoles enzovoort) en op netwerkniveau. Aangezien een gecentraliseerde aanpak de insteek van dit artikel is, kiezen wij de laatste optie. Als je op de OpenDNS-pagina klikt op Home routers recommended, dan krijg je stap voor stap instructies voor tientallen routermodellen om de DNS-adressen aan te passen.

Over het algemeen komt het erop neer dat je het ip-adres van de webinterface van je router in je browser invoert, inlogt bij je router en vervolgens in een sectie zoals Internet (Advanced Settings) zowel de primaire als de secundaire DNS-server aanpast en opslaat.

In elke router kun je de DNS-serveradressen aanpassen, maar het is soms even zoeken.

In de gratis tool DNS Jumper (Windows) hoef je de gewenste DNS-filterservers maar te selecteren.

OpenDNS Home

OpenDNS Family Shield is een handige oplossing die je één keer instelt en daarna kunt vergeten, maar helaas heb je geen controle over de instellingen. Met OpenDNS Home, ook gratis, heb je meer zeggenschap over de filtering en kun je bovendien logs raadplegen.

Registreer je eerst. Vervolgens moet je de DNS-servers wijzigen op je pc of, nog beter, in je router. Daarna controleer je op https://welcome.opendns.com of de DNS-servers correct zijn ingesteld. Klik daarna op de link in de registratie-e-mail die je hebt ontvangen om toegang te krijgen tot je online dashboard op https://dashboard.opendns.com.

Klik hier op Add a network en voer het WAN-ip-adres van je router in (www.whatismyip.org kan je dit vertellen). Bevestig de toevoeging met Add this network. OpenDNS verwacht wel dat dit ip-adres ongewijzigd blijft. Als je een dynamisch ip-adres van je internetprovider hebt (wat meestal altijd het geval is), kun je toch de koppeling behouden door je aan te melden met je OpenDNS-account en de naam van je OpenDNS-netwerk via een gratis DDNS-client zoals OpenDNS Updater (let op: de client wordt direct gedownload).

Op het tabblad Settings van je OpenDNS-dashboard klik je op je ip-adres en selecteer je Custom. Nu kun je zelf kiezen welke van de bijna zestig filtercategorieën je wilt activeren, zodat de bijbehorende websites automatisch worden geblokkeerd. Onderaan kun je ook handmatig websites toevoegen aan de zwarte of witte lijst. Bevestig je aanpassingen met Apply. In het linkermenu kun je tevens Stats and Logs activeren en via Customization de meldingen personaliseren die gebruikers te zien krijgen wanneer ze geblokkeerde sites proberen te bezoeken.

Je kunt uit enkele tientallen filtercategorieën kiezen en zelf ook sites toevoegen.

Windows

NxFilter downloaden

Het gebruik van een (gratis) DNS-server in de cloud heeft enkele voordelen: je hebt er zelf bijna geen omkijken naar en het vereist geen extra machines of systeembronnen. Er is helaas wel een nadeel: de beheermogelijkheden zijn beperkt.

Met de gratis applicatie NxFilter krijg je meer controle over het beheer. Het programma heeft minimale systeemeisen en kan zelfs probleemloos worden gebruikt in een domeinnetwerk met honderden gebruikers, zoals we zelf hebben ervaren.

Op de website vind je instructies voor installatie op Windows en Linux, evenals voor Docker en pfSense. We zullen hier de installatie en configuratie op Windows bespreken.

We gaan ervan uit dat je over een (eventueel wat oudere) pc met Windows beschikt, die dan als DNS-proxy zal fungeren, waarna die dus wel ingeschakeld moet blijven. Klik op de NxFilter-pagina op Download om het nieuwste exe-bestand op te halen (in ons geval nxfilter-4.6.6.4.exe) door met de rechtermuisknop op de link te klikken en Link opslaan als te kiezen.

In de volgende drie paragrafen vertellen we je hoe je NxFilter installeert en lichten we de basisconfiguratie op het gebied van beleidsregels en gebruikersbeheer toe, maar weet dat er nog veel meer mogelijk is.

NxFilter kun je in diverse pakketvormen downloaden.

NxFilter installeren

Start vervolgens het gedownloade bestand. De installatie is vereist slechts enkele muisklikken, waarbij de bestanden standaard in de map C:\nxfilter worden geplaatst. Op het einde van het proces wordt onder meer aan je gevraagd om het batchbestand instsvc.bat uit te voeren (in C:\nxfilter\bin, bij voorkeur als administrator). Dit zorgt ervoor dat de vereiste firewallregels worden toegepast (zo moeten udp-poort 53 en tcp-poorten 80 en 443 geopend zijn) en dat de NxFilter-service automatisch wordt gestart. Wil je de voortgang in de gaten houden, open dan Windows PowerShell en voer het volgende commando uit:

Om te controleren of de NxFilter-service correct werkt, druk je op Windows-toets+R en voer je services.msc uit.

Als alles goed is, kun je je browser openen en naar https://localhost/admin gaan. Log in met admin (Name) en admin (Password) om toegang te krijgen tot het NxFilter-dashboard. Indien nodig, klik je op Geavanceerd / Doorgaan om toestemming te geven.

Controleer vervolgens bij System / Setup of het adres bij Block Redirection IP is ingesteld op het interne ip-adres van je NxFilter-machine. Je leest hier hoe je dit adres vindt. Zorg ervoor dat je dit adres ook instelt als DNS-server op de gewenste clients of op je hele netwerk via je router. De router zal automatisch de DNS-server doorgeven aan de clients, op voorwaarde dat de DHCP-dienst op automatisch (en niet handmatig) staat ingesteld.

Controleer tevens bij Classifier / Jahaslist hoeveel domeinen standaard geblokkeerd zullen worden. Dit moeten er minstens 4,6 miljoen zijn. Je kunt deze lijst na dertig dagen gratis blijven gebruiken voor maximaal twintig gebruikers.

De installatie van NxFilter is (op de achtergrond) volop bezig.

Beleidsregels NxFilter

De NxFilter-service is actief en je hebt het ip-adres van je NxFilter-machine ingesteld als DNS-server op je client(s) of netwerk. Ga nu vanaf die client(s) naar willekeurige websites. Ga vervolgens naar het Logging / DNS Request-gedeelte van je NxFilter-dashboard. Hier worden de bezochte url’s weergegeven, inclusief het tijdstip en het ip-adres van de client. Deze lijst wordt ongeveer elke minuut automatisch bijgewerkt. Goed om te weten: je past de naam en het wachtwoord van de beheerder aan via System / Admin. Het is wel zo veilig om gelijk te doen.

Natuurlijk wil je zelf bepalen welke filters en categorieën actief moeten zijn. Ga naar het tabblad Policy, selecteer Policy en druk bij Default op Edit. Zorg ervoor dat het vakje Enable Filter is aangevinkt. Controleer ook de waarde van Screen time (standaard staat deze op 120 minuten).

Ga vervolgens naar het tabblad Blocked categories en vink alle categorieën aan die je wilt blokkeren. Er zijn er 56, waaronder Gambling, Phishing/Malware, Drugs, Porn, Proxy/Anonymizer en Violence. Bevestig je keuze met Submit.

Ga ook naar het tabblad Screen time categories. Websites uit de geselecteerde categorieën kunnen per dag maximaal gedurende het aantal minuten worden bekeken dat bij Screen time is ingesteld. Deze beperking is vooral nuttig wanneer je die wilt toepassen op specifieke gebruikers.

Je kunt op tientallen thematische categorieën filteren.

Gebruikers NxFilter

Om per gebruiker of gebruikersgroep andere regels toe te passen, moet je in NxFilter een authenticatiemethode instellen. Ga naar System / Setup en vink Enable User Authentication aan. Bevestig met Submit. Ga vervolgens naar User / User en klik op Create om een nieuwe gebruiker toe te voegen. Vul de naam van de gebruiker in en bevestig met Submit. Klik daarna op Edit naast de toegevoegde gebruiker. Als de gebruiker normaal gesproken vanaf een eigen apparaat werkt met een statisch ip-adres, open hier dan het tabblad ADD IP. Voer het ip-adres in bij Start IP en, als het om een ip-bereik gaat, ook bij End IP. Je kunt deze stappen herhalen voor meerdere ip-adressen.

Als de gebruiker vanaf willekeurige apparaten werkt of als deze apparaten geen statisch ip-adres hebben, moet je een wachtwoord instellen in het Edit-venster van de gebruiker. Als iemand zich aanmeldt vanaf een apparaat waarvan het ip-adres niet bekend is bij NxFilter, zal er een inlogvenster verschijnen waarin de gebruikersnaam en het wachtwoord moeten worden ingevoerd. De geldigheidsduur van een inlogsessie kun je instellen bij System / Setup onder Login Session TTL (standaard is dit 20 minuten).

In het Edit-venster van een geselecteerde gebruiker koppel je de gewenste filtersets bij Work-time Policy en bij Free-time Policy. Voor die laatste bepaal je bij Policy / Free time zelf welke dagen of tijdstippen NxFilter als ‘vrije tijd’ moet beschouwen, eventueel met aangepaste filterregels.

Oeps! Toon is één keer tegen een filter aangelopen.

Docker

NxFilter biedt gedetailleerde monitoring en filtering van het webverkeer van clients, maar ben je voornamelijk geïnteresseerd in het blokkeren van vervelende advertenties, dan is de gratis tool Pi-hole een uitstekende keuze. Oorspronkelijk was Pi-hole alleen beschikbaar voor Raspberry Pi, maar inmiddels kun je het ook op Linux en via Docker op Windows installeren. Voor het installeren van Pi-hole via Docker op Windows, kun je Docker Desktop voor Windows downloaden.

Zorg ervoor dat je Windows 10 21H1 of Windows 11 21H2 of nieuwer hebt, een 64bit-processor met SLAT en minstens 4 GB geheugen. Daarnaast moet hardware-virtualisatie ingeschakeld zijn in de UEFI/BIOS. We gaan ervan uit dat je WSL2 (Windows Subsystem voor Linux) gebruikt als backend voor Docker. Deze werkt iets sneller en is ook nodig voor Windows Home.

Om WSL2 te activeren, open je de Opdrachtprompt als administrator en voer je het commando wsl --install uit. Herstart Windows en voer vervolgens het gedownloade Docker-bestand uit. De installatie vereist slechts enkele muisklikken, maar kan even duren. Eventueel laat je het vinkje staan bij Install required Windows components for WSL 2. Nadat de installatie is voltooid, herstart je Windows en voer je Docker Desktop uit als administrator.

In Docker Desktop klik je op het tandwielpictogram en open je het venster General. Plaats een vinkje bij Use the WSL 2 based engine en bevestig met Apply & restart.

Docker Desktop is er helemaal klaar voor.

Pi-hole installeren

Zodra Docker klaar is, moet je de ‘container-installatie’ van Pi-hole toevoegen. Een container is geen volwaardige virtuele machine, maar eerder een geïsoleerde entiteit binnen je besturingssysteem. Voer Opdrachtprompt uit als administrator en voer het volgende commando uit:

Daarna voer je op de Opdrachtprompt het volgende commando uit:

Vervang <intern-ip-adres> door het interne ip-adres van je machine en <wachtwoord> door het gewenste wachtwoord voor het beheer van je Pi-hole-installatie. Laat DNS1 staan op 127.17.0.1 (localhost). Voor DNS2 en DNS3 hebben we in dit voorbeeld voor de DNS-servers van Cloudflare gekozen, maar je kunt ook andere DNS-providers kiezen.

Wil je Pi-hole nog verder finetunen, bekijk dan de extra parameters via deze GitHub-pagina. Houd het voornamelijk bij de Recommended Variables en Optional variables, of eventueel de Advanced variables.

Houd er rekening mee dat de machine nu fungeert als een soort DNS-proxy voor andere apparaten in je netwerk en dus zorg je er het best voor dat je deze machine een statisch ip-adres geeft.

Start nu Docker Desktop op als administrator. Je zou de pihole-container moeten zien in het Containers-gedeelte. Je kunt deze starten en stoppen via de bijbehorende knop bij Actions.

De installatie van Pi-hole in Docker regel je met twee commando’s.

Instellingen Pi-hole

Je verifieert snel of Pi-hole actief is door met de browser van die machine naar http://127.17.0.1/admin te gaan. Nadat je bent ingelogd met het eerder ingestelde wachtwoord, kom je in je dashboard terecht. Hier krijg je een overzicht van alle (DNS-)aanvragen van de aangesloten clients, inclusief een lijst met de top 10 toegestane en geblokkeerde domeinen.

De specifieke domeinen die worden geblokkeerd, kun je regelen met filterlijsten. Ga hiervoor naar het gedeelte Adlists en voer het adres van de gewenste lijsten in bij Address. Er zijn verschillende lijsten beschikbaar, bijvoorbeeld deze en op https://firebog.net. Populaire lijsten zijn die van OSID en Steven Black. Bevestig met Add en zorg ervoor dat de knop Enabled is ingeschakeld voor de toegevoegde lijsten. Het is raadzaam om vervolgens Tools / Update Gravity te openen en op Update te klikken.

Om specifieke domeinen te blokkeren of altijd toe te staan, ga je naar het gedeelte Domains. Voer het domein in en klik op Add to Blacklist of Add to Whitelist. Vink het vakje Add domain as wildcard aan als je ook de bijbehorende subdomeinen aan de lijst wilt toevoegen.

Het is tevens mogelijk om clients te groeperen (via Groups en Clients) en vervolgens de toegevoegde adlists toe te wijzen aan een specifieke groep met Group assignment. Zo kun je verschillende lijsten activeren op basis van de clients die Pi-hole gebruiken. Verken ook de andere opties van Pi-hole en experimenteer gerust.

Het dashboard van Pi-hole geeft je in één oogopslag allerlei nuttige informatie.

NAS

AdGuard Home

Wanneer je een DNS-filter zoals NxFilter of Pi-hole op Windows installeert, is het in principe nodig dat dat systeem altijd is ingeschakeld, wat extra stroomverbruik betekent. Heb je een geschikte NAS (die toch aanstaat), dan is het wellicht handiger en energiezuiniger om je DNS-filter daarop te installeren.

Het installeren van een DNS-filter op een NAS is mogelijk voor Pi-hole en met enige moeite ook voor NxFilter. Maar we willen graag een derde optie aanbevelen: AdGuard Home. Dit pakket kan goed worden vergeleken met Pi-hole, maar het gaat iets efficiënter om met systeembronnen, biedt standaard ondersteuning voor DNS-over-HTTPS en heeft ook enkele opties voor ouderlijk toezicht.

Voor het installeren van AdGuard Home maken we gebruik van een kant-en-klare Docker-container.

Het is belangrijk dat je NAS deze functionaliteit ondersteunt. We hebben dit getest op een populair model, Synology DS220+ met DSM 7.x. De procedure op andere NAS-apparaten is vergelijkbaar.

AdGuard Home is zeker een waardig alternatief voor Pi-hole.

Container-installatie

Meld je aan bij de webinterface van de NAS en installeer indien nodig de app Container Manager (DSM 7.2 of hoger) of Docker. Start daarna de app File Station en open de map Docker. Maak een nieuwe map genaamd adguard aan. Binnen deze map maak je twee submappen: config en data. Gebruik kleine letters voor de namen van deze drie mappen.

Ga nu naar het Configuratiescherm en selecteer Taakplanner. Klik op Maken, kies vervolgens Geplande taak en selecteer Door de gebruiker gedefinieerd script. Vul Installatie AdGuard in bij Taak en selecteer root als Gebruiker. Verwijder het vinkje bij Ingeschakeld. Op het tabblad Planning selecteer je Uitvoeren op de volgende datum en kies je Niet herhalen. Plaats desgewenst een vinkje bij Uitvoerdetails verzenden via e-mail en voer je e-mailadres in.

Vul het volgende script in bij Opdracht uitvoeren:

Bevestig twee keer met OK en voer desgevraagd je DSM-wachtwoord in. Selecteer de taak Installatie AdGuard en klik op Uitvoeren en vervolgens op Ja.

De Docker-container van AdGuard Home draait.

Configuratie

Open na afloop je browser en typ http://<nas-ip-adres>:3000 in. Je komt terecht in de configuratiewizard van AdGuard Home. Klik op Beginnen. In het volgende venster wijzig je het veld Poort achter Luister interface (Alle interfaces) naar (bijvoorbeeld) 9080, zodat de poort geen conflict veroorzaakt met een eventuele webserver die standaard op poort 80 luistert.

Als alles goed gaat, verschijnt er een reeks adressen waarop de webinterface van AdGuard Home beschikbaar is. Laat het veld Luister interface van de DNS-server ingesteld op Poort 53. Als er een foutmelding verschijnt dat er mogelijk al een andere DNS-server actief is op je NAS (zoals Pi-hole?), moet je die eerst stopzetten of verwijderen. Zo nodig verwijder je ook de app DHCP Server uit het Synology Package Center.

Als die mogelijke foutmelding is opgelost, druk dan op Volgende in de wizard en vul een Gebruikersnaam en Wachtwoord (2x) in voor de beheerinterface. Bevestig met Volgende. Je ontvangt nu instructies om het DNS-adres aan te passen en naar je NAS (AdGuard Home) te laten verwijzen voor diverse platformen. Rond af met Volgende en klik op Open Dashboard. Meld je aan met de zojuist aangemaakte gebruikersnaam en wachtwoord.

Het dashboard van AdGuard Home, met overzichtelijke statistieken. 

Filters

Je ontvangt nu overzichtelijke statistieken van de DNS-aanvragen van de verbonden clients. Zo nodig klik je op Ververs statistieken. Het kan zijn dat niet alle gewenste aanvragen geblokkeerd worden, maar je kunt extra lijsten toevoegen via het tabblad Filters / DNS Blokkeerlijsten. Klik op Blokkeerlijst toevoegen / Uit de lijst selecteren en vink de gewenste lijsten aan. Je kunt ook op Aangepaste lijst toevoegen klikken en de url en een beschrijving van een geschikte lijst invullen. Met behulp van Regex (reguliere expressies) is het ook mogelijk om domeinen te blokkeren die specifieke woorden in hun domeinnaam bevatten, bijvoorbeeld ‘porn’. Dit kun je doen via Filters / Aangepaste filterregels. We hebben helaas niet voldoende ruimte om hier verder op in te gaan.

Weet wel dat je via Instellingen ook een module voor ouderlijk toezicht kunt inschakelen. Plaats een vinkje bij Gebruik AdGuard Ouderlijk toezicht web service. Daarnaast kun je ook verschillende bekende webdiensten blokkeren (zoals Facebook, Discord, Netflix en ongeveer zestig andere diensten) via Filters / Geblokkeerde services. Je kunt ook bepaalde domeinen altijd toestaan via Filters / DNS-toelatingslijsten.

Een blokkeerlijst toevoegen is een kwestie van een vinkje plaatsen.

Niet alleen het saaie en repetitieve werk wordt vervangen door AI. Je bent óók als kenniswerker niet meer zeker van een baan. Software wordt al grotendeels door AI geschreven. Gelukkig kun je daar als hobbyprogrammeur ook enorm van profiteren. Het brengt naast tijdwinst ook veel gemak. We helpen je op weg met drie praktische tools: ChatGPT, Aider en de Windsurf Editor. We maken enkele eenvoudige voorbeelden, zodat je een helder beeld hebt van je potentiële workflow.

Grote taalmodellen zijn al zo goed dat je comfortabel complete programma’s door AI kunt laten maken, zelfs zonder enige programmeerkennis. Afhankelijk van de tools die je gebruikt, voelt dat toch alsof je samen aan code werkt, ook wel pair-programmeren genoemd. Je houdt dus enige controle en kunt er, als je oplet, veel van leren. Ook al wordt het harde werk door AI gedaan.

Een bijkomend voordeel is dat je heel gericht aanpassingen kunt laten doen of vragen kunt stellen over de code, zonder dat je de documentatie of websites als Stack Overflow hoeft door te spitten. Het is geen verrassing dat laatstgenoemde website met fors dalende bezoekersaantallen te maken heeft. Ook andere taken, zoals het schrijven van de documentatie, zijn snel geregeld.

In dit artikel gaan we een eenvoudig programma maken met AI, zodat je een goed beeld hebt van de workflow. We gebruiken drie verschillende tools. We starten met het vertrouwde ChatGPT, al kun je ook bijvoorbeeld voor Claude of Gemini kiezen. Daarna gaan we met Aider in combinatie met Git aan de slag. Daarmee werk je ‘samen’ aan programmacode via de opdrachtprompt, in ons voorbeeld binnen het vertrouwde Visual Studio Code. Tot slot gaan we met de Windsurf Editor aan de slag, een completere grafische ontwikkelomgeving met geïntegreerde AI-features, die je van begin tot eind ondersteunt bij het maken van je programma. 

ChatGPT

Chatbot

Grote taalmodellen (LLM’s) vormen de basis voor chatbots als OpenAI’s ChatGPT en Anthropics Claude, maar óók voor de tools die we hierna behandelen. Feitelijk benaderen we de chatbots in dit eerste deel van het artikel rechtstreeks, via een browser of app. De andere tools gebruiken de API van deze bedrijven. Raadpleeg eventueel voor het starten met ChatGPT deze basiscursus.

De nieuwere modellen (we gebruiken overwegend ChatGPT 4o en Claude 3.5 Sonnet) laten heel goede resultaten zien voor programmeertaken. Ze helpen uiteraard niet alleen om programmacode te schrijven maar kunnen code ook uitleggen, fouten oplossen en de documentatie schrijven. Ook kun je uitstekend brainstormen over een project of ideeën. Het is daarom, óók als je andere tools voor programmeren gebruikt, enorm praktisch om erbij te hebben! Toegang tot ChatGPT is gratis met beperkingen. Een abonnement is minder gelimiteerd en geeft vaak toegang tot nieuwere modellen (zoals o1 of o3-mini). Zo’n abonnement is niet bruikbaar voor de andere tools, die gebruiken namelijk de API waarvoor je aparte credits moet aanschaffen.

Een chatbot biedt goede ondersteuning bij al je programmeervragen.

Eerste stappen

We beginnen met een eenvoudig voorbeeld en vragen aan ChatGPT om een spelletje boter-kaas-en-eieren te maken, ook wel bekend als tic-tac-toe. Hoewel het Engels soms betere resultaten kan geven, werken we voor dit artikel volledig in het Nederlands. We starten met deze prompt: “Maak een volledig functionele boter-kaas-en-eieren voor in een browser. Maak de HTML-structuur, voeg CSS-stijlen toe en implementeer de JavaScript-logica. Maak een scheiding tussen HTML, CSS en JavaScript. Zorg dat het programma responsief is zodat het bij elke schermgrootte werkt.”

ChatGPT genereert de gevraagde code. Je kunt individueel de HTML, CSS en JavaScript kopiëren. Om het te proberen, kun je alles plakken op websites als www.jsfiddle.net en www.codepen.io. Voor dit voorbeeld hebben we bij JSFiddle een projectpagina aangemaakt. We gaan dit voorbeeld in de volgende stappen verder verbeteren, steeds met links naar de verbeterde versie.

De eerste versies van het spel boter-kaas-en-eieren.

Geluiden toevoegen

We vragen ChatGPT om het programma aan te passen, zodat er een geluid wordt afgespeeld bij elke zet. ChatGPT voegt daarop een audio-element toe aan de HTML-code. Het past ook het script aan om dit aan te roepen bij elke zet. Je moet nog wel zelf het mp3-bestand plaatsen in de uiteindelijke programmamap of een volledige link naar het mp3-bestand invullen in de HTML-code:

Er zijn overigens veel websites waar je leuke geluidseffecten kunt vinden die je vrij kunt gebruiken, waaronder Pixabay. Op deze pagina zie je onze aangepaste versie.

De aangepaste HTML-code bevat een verwijzing naar een mp3-bestand.

Computertegenstander

We vragen ChatGPT vervolgens om een slimme computertegenstander toe te voegen, waarbij aan het begin van het spel wordt gekozen wie er mag beginnen. Via deze webpagina kun je deze versie zien. De computertegenstander blijkt in eerste instantie overigens helemaal niet zo slim, waardoor je makkelijk je potjes wint. Maar dat is snel opgelost. Na ons verzoek om de computertegenstander slimmer te maken, controleert het programma voortaan eerst op mogelijke winnende zetten en blokkeert het de tegenstander indien nodig. Als er geen direct winnende of blokkerende zetten zijn, kiest het een willekeurige lege cel. Deze slimmere versie kun je hier bekijken.

Het aangepaste script op een canvas in ChatGPT.

Uiterlijk verfraaien

Als laatste hebben we gevraagd het uiterlijk wat mooier te maken. Hierbij wordt voornamelijk de CSS-code aangepast om de visuele stijl van het spel te verbeteren. Het resultaat is geslaagd: ChatGPT geeft de achtergrond een mooi kleurverloop. Ook zijn de stijlen van de knoppen en speelvelden aangepast. Het levert een veel moderner en aantrekkelijker uiterlijk op.

Je kunt ChatGPT uiteraard steeds vragen om het script of een deel daarvan uit te leggen. Ben je het overzicht over de wijzigingen kwijt, dan kun je uiteraard ook vragen om de laatste HTML-code in te zien, of de laatste versie van het script. Eventueel op een canvas. Toch misten wij in ChatGPT soms wat overzicht en is het bovendien lastig om een stapje terug te doen als een aanpassing niet het gewenste resultaat oplevert. Dit zijn zaken die we in het volgende deel gaan aanpakken met Aider.

De gemoderniseerde versie van boter-kaas-en-eieren.

Aider

Opdrachtprompt

Voor grotere programmeerprojecten is het werken met een chatbot al snel vervelend en verwarrend. Veel praktischer is een tool die met jouw eigen projectbestanden werkt en zelf of samen de gewenste aanpassingen maakt. Als je geen moeite hebt met het werken met een opdrachtprompt, is Aider een uitstekende optie. Die tool helpt met het schrijven en aanpassen van code.

Aider is opensource en werkt met heel veel LLM’s samen. Hier gebruiken we de API voor Claude 3.5 Sonnet, maar je kunt ook de API van OpenAI gebruiken of een LLM die je zelf lokaal draait of elders, zoals via OpenRouter. De integratie met Git is enorm praktisch. Voor elke aangebrachte wijziging voert het een ‘commit’ uit, voorzien van een duidelijke omschrijving, zodat je achteraf een goed overzicht met alle veranderingen hebt en ook stapjes terug kunt doen. Niet alle alternatieven bieden dit en dat is vooral een gemis als er iets fout gaat en je geen idee meer hebt hoe je dat moet oplossen.

Aider werkt samen met alle gangbare LLM’s.

Voorbereiding

We willen weer laten zien hoe je het spelletje boter-kaas-en-eieren met Aider zou kunnen maken. We gebruiken het voor velen vertrouwde programma Visual Studio Code onder Windows en installeren Aider via een opdrachtprompt binnen die ontwikkelomgeving. Binnen de editor kun je uiteraard alle gegenereerde bestanden bekijken en handmatig aanpassen. Voor de installatie van Aider heb je Python nodig. Zet tijdens de installatie van Python een vinkje bij Add python.exe to PATH, zodat je Python vanuit elke map kunt aanroepen.

Installeer ook Visual Studio Code als je dat nog niet eerder hebt gedaan. Visual Studio Code biedt een mogelijkheid om Copilot als assistent te gebruiken, maar dat slaan we hier over.

Installeer ook Git, zodat versiebeheer mogelijk is. Kies tijdens de installatie van Git voor het gebruik van Visual Studio Code als standaardeditor. Verder kun je alle standaardinstellingen accepteren. Als je Python, Visual Studio Code en Git hebt geïnstalleerd, kun je door met de installatie van Aider.

Installeer Python onder Windows voordat je met Aider aan de slag gaat.

Installatie Aider

We kunnen nu Aider installeren. Open daarvoor Visual Studio Code en kies in het menu de optie Terminal / New Terminal. Verander de terminal, via de optie rechtsboven in het venster, naar Git Bash. Installeer daarna Aider met de volgende twee opdrachten:

Sluit de terminalvenster via het kruisje rechtsboven. Open dan een nieuwe terminal en wissel weer naar Git Bash. Als je Aider niet kunt aanroepen met aider zul je het PATH moeten uitbreiden met de aangegeven opdracht, zoals in het voorbeeld hieronder:

Zorg dat je in dit voorbeeld voor Claude 3.5 Sonnet een API-sleutel hebt en voldoende credits om mee te beginnen (zie het kader ‘API-sleutel maken voor Claude’). Exporteer deze API-sleutel zodat Aider deze direct kan gebruiken:

Maak nu een nieuwe map voor je toepassing, blader naar die map en maak een Git-repository:

Je kunt nu beginnen met programmeren, met de ondersteuning van Aider!

We installeren Aider om het binnen Visual Studio Code te gebruiken.

Programma maken

We gaan ons eerste programma maken. Zorg dat je een terminalvenster hebt geopend en bent gewisseld naar Git Bash. De assistent start je dan met de volgende opdracht:

Er wordt de eerste keer gevraagd om .aider* en .env toe te voegen aan .gitignore. Dat raden we aan! Hiermee voorkom je dat deze bestanden, vaak met wachtwoorden en dergelijke, per ongeluk in je Git-repository worden opgenomen en daardoor in potentie online komen, als je de repository via GitHub beschikbaar maakt.

Via de prompt kun je nu je opdrachten afvuren. We vragen zoals eerder om een volledig functionele en responsieve boter-kaas-en-eieren voor in een browser met de vereiste HTML-structuur, CSS-stijlen en JavaScript-logica in aparte bestanden.

Aider gaat direct aan de slag en laat heel overzichtelijk alle aanpassingen zien, met een beschrijving van de uiteindelijke functionaliteit. Het vraagt netjes of het de nieuwe bestanden mag maken (index.html, styles.css en script.js) en daarna of het deze mag openen in een browser. Het spel is in deze eerste versie volledig responsief met een duidelijke gebruikersinterface, houdt de speelstatus bij, detecteert wanneer iemand wint of als het een gelijkspel is, heeft een knop om het spel opnieuw te starten en is helemaal in het Nederlands. Een goed begin!

Aider heeft het programma voor ons uitgewerkt.

Aanpassingen maken

We vragen opnieuw in natuurlijke taal om wijzigingen te maken. De workflow is erg prettig. Aider geeft eerst aan welke bestanden waarschijnlijk moeten worden gewijzigd. Voor het geluid stelt het bijvoorbeeld wijzigingen in index.html en script.js voor. Dan vraagt Aider of het deze bestanden mag toevoegen aan de chat.

Als de radartjes zijn uitgedraaid, na interactie met Claude, geeft Aider heel nauwkeurig aan welke regels in welke bestanden moeten worden gewijzigd. Ook geeft Aider aan dat je een mp3-bestand genaamd move.mp3 in dezelfde map moet plaatsen.

We vragen Aider daarna ook om een slimme computertegenstander toe te voegen. Die is meteen heel slim en probeert direct te winnen als dat kan, blokkeert winnende zetten van de tegenstander, probeert het centrum te veroveren en kiest anders voor hoeken of willekeurige zetten.

Tot slot vragen we Aider om het programma te verfraaien met een moderner uiterlijk. Dat levert een flinke metamorfose op. Bekijk hier het resultaat.

Via een comfortabel proces maakt het alle gewenste aanpassingen.

Integratie met Git

De standaard integratie met Git biedt veel voordelen. Als Aider aanpassingen maakt aan een bepaald bestand zal het in Git een heldere beschrijving toevoegen aan de zogeheten commit. In Visual Studio Code kun je deze historische aanpassingen eenvoudig terugzien. Klik daarvoor op een bestand en open in de balk aan de linkerkant Timeline. Zorg dat de filterinstelling is ingesteld op Git History.

Nu zie je de commit-geschiedenis van het geselecteerde bestand. Door op een specifieke commit te klikken, kun je de aangebrachte wijzigingen bekijken. Binnen Aider zijn er ook nog wat trucjes. Zo kun je met /diff zien wat de laatste veranderingen zijn. Met /undo kun je die eenvoudig ongedaan maken.

We hebben de repository op GitHub gezet. Ook hier kun je alle veranderingen bekijken. Open daarvoor een bestand, zoals script.js, en ga dan rechtsboven naar History. Hier zie je de verschillende wijzigingen. Als je op een van de aanpassingen klikt, zie je netjes welke veranderingen in de code zijn gemaakt.

Je kunt handig zien welke historische wijzigingen zijn aangebracht in bestanden.

Git en GitHub

Aider gebruikt een git-repository. Sommige mensen verwarren dit met GitHub. Je kunt met Git prima alleen een lokale repository maken, op het systeem waarop je met Aider werkt. Optioneel kun je deze repository met GitHub verbinden, zodat je in feite een kopie in de cloud hebt. Dat is voor jezelf wel heel praktisch, omdat je veel makkelijker de wijzigingen kunt bijhouden en bestuderen. En je kunt ook met anderen samenwerken aan code.

Ook interessant om te lezen: GitHub Codespaces: altijd de juiste tools bij de hand

We hebben de repository gedeeld met GitHub, zodat je alle veranderingen kunt inzien.

Windsurf Editor

 Complete ontwikkelomgeving

Zoek je een completere ontwikkelomgeving met geïntegreerde AI, dan zijn Cursor AI en Windsurf Editor twee populaire opties. Cursor AI is een gevestigde speler, maar krijgt steeds meer concurrentie van het nieuwere Windsurf Editor. Beide ontwikkelteams blijven verbeteringen doorvoeren om niet voor elkaar onder te doen.

Beide programma’s zijn bovendien klonen van Visual Studio Code, de bekende editor van Microsoft die we ook voor Aider hebben gebruikt. Daarom lijken ze in veel opzichten op elkaar. Het kan handig zijn om verschillende thema’s te gebruiken als je ze naast elkaar gebruikt, zodat je ze uit elkaar kunt houden.

Windsurf Editor werkt met een ingebouwde assistent genaamd Cascade.

Cascade

We hebben ook in Windsurf geprobeerd om het spelletje boter-kaas-en-eieren uit dit artikel te maken. De assistent in Windsurf Editor heet Cascade; via het Cascade-deelvenster kun je hem direct aan het werk zetten. Een leuk detail is dat niet alleen code wordt gegenereerd, maar dat er ook veel aanvullende acties voor je worden uitgevoerd, zoals het aanmaken van een map voor je project en voor de geluiden, en het maken van een mp3-bestand.

Bij elke stap kun je zien welke bestanden worden aangepast en de voorgestelde wijzigingen controleren en bevestigen. Je hoeft niet, zoals bij Aider, zelf een API-sleutel te regelen voor toegang. Je gebruikt steeds het model van Cascade en de administratieve kant wordt via je account geregeld, op basis van credits (zie volgende paragraaf). Zo’n diepere integratie is heel praktisch. Toch heeft de workflow veel overeenkomsten met Aider.

Via een deelvenster kun je een conversatie met Cascade voeren.

Werken met credits

Windsurf werkt met credits voor verschillende taken. Zo worden User Prompt-credits voor elke interactie met de assistent gebruikt en Flow Action-credits voor alle acties die worden uitgevoerd. Als je de limiet bereikt voor het premiummodel, wordt overgeschakeld naar het basismodel. De proefperiode van 14 dagen geeft je ruim voldoende credits om het voorbeeldprogramma uit dit artikel te maken. Sterker nog, je hebt ongeveer vijftien keer meer credits dan nodig, dus je kunt ook grotere en complexere programma’s proberen te maken.

Buiten die proefperiode is, om het premiummodel te gebruiken, een upgrade naar de Pro-versie bijna onvermijdelijk (ca. 18 euro per maand). Je hebt dan wel elke maand een ruime hoeveelheid credits en kunt vrij voordelig credits bijkopen.

Windsurf Editor werkt met een systeem van credits.

Of je nu graag uitgebreid kookt of elke avond snel klaar wilt zijn: een slimme keukenindeling maakt het verschil. Alles moet logisch op zijn plek staan, zodat je moeiteloos overal bij kunt en na afloop ook weinig tijd kwijt bent aan opruimen.

Lees ook: Fornuis op maat: kies het aantal pitten dat bij je past

Vaatwasser, gootsteen en vuilnisbak

Heb je plannen voor een nieuwe keuken? Denk dan nu al na over welke slimme keuzes je kunt maken met de indeling. Plaats bijvoorbeeld de vaatwasser, de spoelbak en de afvalemmer dicht bij elkaar. Je hoeft dan nooit ver te lopen met vieze borden en je kunt ze makkelijk leegschrapen, eventueel afspoelen en direct inruimen. Staat de afvalbak in een kastje direct naast de vaatwasser? Let er dan op dat je het deurtje nog goed kunt openen als de deur van de vaatwasser omlaag staat. Dat werkt makkelijker bij het inruimen. Plaats verder de vaatwasser niet direct tegen een zijmuur. Tijdens het inruimen loop je dan sneller kans op spetters tegen de muur.

Werkblad en kookplaat

Het werkblad is meer dan alleen een plek om iets op te zetten. Je gebruikt het om te snijden, te mixen, spullen neer te leggen en borden op te scheppen. Zorg daarom dat je voldoende vrije werkruimte overhoudt – dus niet alles volbouwen met apparatuur. Plaats de spoelbak of kookplaat liever niet op een hoek. Je hebt aan beide kanten plek nodig, zodat je je handen vrij kunt houden en spetters opvangt. Reken aan weerszijden minimaal veertig centimeter. Dat oogt niet alleen rustiger, het werkt ook prettiger. Handig om te weten: bij je keukenspecialist wordt hiervoor vaak de term aflegruimte gebruikt. En nog even over de kookplaat: plaats die bij voorkeur niet pal naast de koelkast of een hoge kast; dat geeft weinig bewegingsvrijheid en maakt het lastig om met meerdere mensen tegelijk in de keuken te staan.

©Olga Yastremska and Leonid Yastremskiy

Koelkast

Een koelkast gebruik je vaker dan je denkt – gemiddeld zo'n 35 keer per dag. Zet 'm daarom op een plek waar je er makkelijk bij kunt, ook als je vanuit de woonkamer even snel iets wilt pakken. Zet de koelkast liever niet helemaal achterin of op een plek waar je niet vanzelf langsloopt; dat is al snel onhandig in het dagelijks gebruik. Let ook op de temperatuur rondom de koelkast. Zet hem niet naast een oven, radiator of op een plek waar veel zonlicht komt. Kan het echt niet anders, zorg dan voor een isolerende tussenplaat en houd minstens drie centimeter ruimte vrij tussen warmtebron en koelkast.

Gebruik de keuken-driehoek

In de basis draait een keuken om drie functies: koken, spoelen en koelen. Je fornuis, gootsteen en koelkast vormen samen een denkbeeldige driehoek. Als de afstanden tussen deze drie goed gekozen zijn, werk je prettiger. Staan ze te ver van elkaar, dan loop je onnodig veel. Staan ze te dicht bij elkaar, dan dan wordt het al snel krap en onhandig. Een keukenspecialist kan helpen bij het vinden van een goede verhouding, maar je merkt het zelf vaak ook al als iets net niet lekker werkt.

Optimale werkhoogte

Ook de hoogte van je werkplekken telt mee. Een oven op armhoogte is een stuk prettiger dan op kniehoogte, zeker als je vaak bakt. Het voorkomt bukken. Heb je een kleine keuken? Kies dan voor een compacte oven of voor een fornuis met geïntegreerde oven. Datzelfde geldt voor de vaatwasser: als je die wat hoger plaatst, spaar je je rug en knieën. Voor de kookplaat geldt een andere regel: meet de afstand van je onderarm tot het werkblad. Is die ongeveer twaalf centimeter, dan zit je goed qua houding en belast je je schouders niet onnodig.

Apparatuur wat hoger plaatsen (als dat kan) heeft nog een voordeel. Wanneer je kleine kinderen hebt rondlopen, kunnen die er minder makkelijk bij. Wel zo veilig!

©lev dolgachov

Opbergruimte

Tot slot: denk na over hoe je spullen opbergt. Onderkastjes bieden veel ruimte, maar vragen vaak veel van je rug. Bovenkastjes kunnen juist weer te hoog zijn. Een buffetkast biedt uitkomst: wat je dagelijks gebruikt zet je op ooghoogte, wat minder vaak nodig is kan best wat lager of juist hoger.

Slim indelen = een fijnere keuken!

Een goede keuken draait niet alleen om de juiste apparatuur, maar vooral ook om slimme keuzes die het koken makkelijker maken. Denk na over looproutes, werkhoogtes en voldoende bewegingsruimte. Positioneer alles op logische plekken, zorg voor een werkblad met voldoende vrije ruimte en let op kleine details zoals de draairichting van kastdeurtjes. Daarmee wordt de keuken (nog meer) het hart van je huis!