Je komt ze overal tegen. In elke stad op alle wegen. QR codes. Posters, spotjes op tv, busjes van de aannemer, folders, in de kroeg voor de bierkaart. Super handig. Scheelt je toch weer een URL intikken met je dikke vingers op je telefoonschermpje. Ik roeptoeter al jaren over de gevaren van die QR codes maar eindelijk lijkt dit nu ook een beetje door te dringen her en der.

Quishing dus. QR’s gebruiken voor je scam. Jaren worden we verteld dat we niet zomaar op alle links moeten klikken, maar QR’s worden vaak gewoon ongezien gescand en geopend. En het is natuurlijk ook heel handig, maar het blijft wel opletten. De bezochte pagina kan verwijzen naar een nagemaakte site van de scammer of erger, installeert malware via een zeroday waarvan je iOS nog niet op de hoogte was. Natuurlijk, je standaard QR code scanner op je telefoon laat subtiel de URL zien waar je naar toe gaat maar je ziet maar een deel van de URL. Afhankelijk van je scanner is dat het eerste deel van de URL (niet handig) of alleen het hoofddomein (handiger). Daarnaast maken mensen gebruik van obscure QR scan apps die zelfs direct de URL openen zonder tussenkomst van de gebruiker. Ook steeds vaker, QR codes in phishing mails. De standaard security en scanning tools op je pc kunnen door het gebruik van de QR code niet zonder meer de URL’s goed checken.

Ik las over een poc met betrekking tot deelfietsen. Iemand plakte zijn eigen QR code op de deelfiets met er groot boven ‘scan to unlock’. De pagina verwees direct naar een betaalsite waar de niet vermoedende tourist 10 euro moest betalen. Na betaling gebeurde er natuurlijk niks maar was de scammer gevlogen. Geen idee of het waar is, maar ik vond het goed voorstelbaar.

Hier had ik het over met mijn security officer en we besloten een test te doen. Wij trainen al ons personeel jaarlijks op security en onderdeel daarvan is dat we leren niet zomaar elke link te openen of om op knopjes te drukken. We waren benieuwd of onze collega’s dat ook niet deden met QR codes. Op onze kantoren in Utrecht, Parijs en Montreal hingen we aan de buitenkant van ons pand een QR code op die verwees naar een op Netlify gehoste simpele (uiteraard volledig overengineerd met Astro en CI/CD) pagina met een invul formulier op mee te doen met de ‘challenge 2023’. Een onguur persoon die ons zou willen hacken zou immers hetzelfde kunnen doen door een poster te maken en die op de buitenkant van ons pand te plakken om ons te verleiden zijn malafide site te bezoeken.

Mijn hypothese was dat we binnen een week minimaal 10 hits er op zouden hebben. Het koste mij minder dan 3 dagen. De verleiding om mee te doen met de 2023 challenge was blijkbaar voldoende om een onduidelijke URL te openen, een veld in te vullen met je naam en op een knop te rammen. In theorie waren de hackers een stapje verder binnen in ons bedrijf.

Let dus op! Een aantal dingen om op te letten

1. Bij het scannen, let op de URL waar je op gaat klikken. Probeer vooral het hoofddomein te checken

2. Bij het maken van QR’s, valideer of de QR goed is gemaakt en niet stiekem ergens anders naar toe gaat. Bij het schrijven van dit stukje gebruikte ik de QR generator van Vistaprint (want bovenaan in Google) maar bij controle bleek die niet naar het domein te gaan die ik had ingesteld maar via een tussenpartij. En aan de QR code zie je niks.

3. Let extra op bij QR’s vanuit mail. Eigenlijk hetzelfde concept als links in je mails die je altijd goed moet controleren maar je standaard scanners gaan namelijk niet af.

4. Scan liever geen QR’s op straat op papiertjes of stickers

5. Gebruik geen losse QR apps maar alleen de native camera van iOS of Android

Met de app “feeeed” (vier e’s, geen hoofdletter…) kun je je eigen feed samenstellen. Niet die rommel van Twitter of Facebook, maar gewoon je eigen mooie overzicht. Je kan bijvoorbeeld je foto’s, rss feeds, Mastodon of aantal stappen toevoegen aan feeeed, en die maakt er dan een overzichtelijke lijst van waar je rustig doorheen kan scrollen. Je hoeft je nergens voor aan te melden want alles gebeurt gewoon op je telefoon. Ook wel weer eens aardig. Bovendien heb je niet het gevoel dat je uitgeknepen wordt door het grootkapitaal, omdat je zelf bepaald wat je in je feed wilt zien. Tip dus!

Deze parel van de App Store is bovendien helemaal gratis en bevat geen reclame! Wat een feest. Downloaden dus!. Wel alleen voor iOS.

Sinds kort heeft geensnor.nl ook een zoekfunctie. Omdat de boel al weer drie jaar statisch is, kunnen we niet eenvoudig een query loslaten op de database. Toch is het ons gelukt om een fraaie zoekfunctie neer te zetten. Hoe? Lees snel verder!

Om een zoekfunctie op een statische website te maken, zijn er eigenlijk twee opties.

Optie 1: Hosted

Je kan een hosted oplossing als Agolia of Typsens gebruiken. Hierbij kun je je aanmelden (bah) bij een derde partij die je site gaat indexeren en waar je dan doorheen kan zoeken. Deze optie past erg goed bij mensen die lelijkheid, rancune en rot tot gemankeerde adagia hebben verheven, van waaronder ze dagelijks zinloos voortploeteren in hun kleinburgelijke, kapotte leventje in een schier oneindige herhaling van peilloze dieptepunten.

Optie 2: Frontend

Gelukkig zijn er voor rechtgeschapen, optimistische wereldverbeteraars met het hart op de juiste plek en een scherp oog voor esthetiek en vakmanschap, zoals wij onszelf van geensnor.nl graag zien, nog andere oplossingen. Deze oplossingen maken gebruik van Javascript in de frontend van de applicatie. Ideaal voor statische sites dus. Nadeel van deze oplossing is dat de browser zelf moet zoeken en dat kan traag worden.

Pagefind

Na een gedegen zoektocht zijn we uiteindelijk bij Pagefind uitgekomen. Pagefind genereert tijdens het builden van de site een aantal bestanden die de zoekindex bevat. Dit doet hij in verschillende bestanden zodat niet de hele index in één ingeladen hoeft te worden, waar door het zoeken niet traag wordt. Met allerlei tags in de pagina templates kun je het indexeren nog wat tweaken. Zo kun je bijvoorbeeld aangeven dat de voorpagina niet wordt geindexeerd om dubbele zoekresultaten te voorkomen. De maker van Pagefind legt het allemaal rustig uit in deze video:

Installatie

Pagefind toevoegen aan geensnor.nl is niet zo lastig. Het begint zoals zo vaak met het toevoegen van een dependency

npm install --save-dev pagefind

Op dit site van Pagefind staat een stuk code voor een voorgebakken zoekveld. Deze kun je zelf helemaal aanpassen (of zelf bouwen), maar hij is nog niet zo verkeerd dus gebruiken we deze voorlopig.

Pagefind moet vervolgens de index gaan genereren. Dit doet hij na het builden van de site, dus daarvoor moet er zoiets als dit aan de scripts van package.json worden toegevoegd.

"postbuild": "pagefind --source _site"

Omdat geensnor.nl een Jekyll site is, krijg je dit als build command bij Netlify

jekyll build && npm install && npm run postbuild

Het eindresultaat staat op de alle berichten pagina. Zoekze!

Niet zo lang geleden heeft Elon Musk onze mooie nieuwsbrief de nek om gedraaid. In deze nieuwsbrief kwamen we elke maand met een prettige Italo Banger aanzetten. Vandaag komen we met goed nieuws: we gaan deze mooie verzameling nieuw leven inblazen! Alle Bangers zijn zorgvuldig verzameld in een speciale Soundcloud playlist! Hopelijk neemt die lul van een Elon Musk Soundcloud niet over….

Als extra bonus voegen we op zeer onregelmatige tijden, zeer obscure tracks toe, van uiteenlopende kwaliteit. Volg die playlist dus als je in wel in bent voor een avontuurtje!

Geensnor.nl heeft geen cookiemelding. Die hebben we niet omdat we ook geen cookies gebruiken. Soms willen we echter wel een leuke YouTube video plaatsen om de verhalen hier extra schwung te geven. Dan is het wel opletten geblazen, want YouTube wil toch graag zoveel mogelijk cookies en andere rommel over je heen storten. Om de redacteuren van Geensnor hierbij te helpen, hebben we sinds kort een speciale GitHub Action.

De Action kijkt of er er ergens in een post het domein https://www.youtube-nocookie.com voorkomt. Als hij er een vindt, vervangt hij die door https://www.youtube-nocookie.com. Dit domein plaatst namelijk geen cookies waardoor we weer een beetje meer GDPR compliant zijn! Kan me voorstellen dat iedereen met een fatsoenlijke blog zoiets wil, en daarom staat deze Action onder aan dit bericht. De redacteuren kunnen natuurlijk ook gewoon goed opletten, maar toen de Action de eerste keer draaide heeft hij er toch maar weer mooi 15 posts recht gezet! Met een redactie als die van Geensnor kun je natuurlijk ook bijna niet voorkomen dat er af en toe iets doorheen schiet. Op deze manier zouden we bijvoorbeeld ook UTM (Urchin Tracking Module) links geautomatiseerd kunnen verwijderen. Maar dat is weer iets voor een volgende keer.

De Action zelf staat op in de Workflows op GitHub

Andrew Bedwell wil een nieuw record vestigen. Hij wil met een zeilboot van één meter lang de oceaan oversteken. Hij wil dit doen om geld in te zamelen voor onderzoek naar kanker. Hij wil in mei 2023 vertrekken, en voor die tijd heeft hij nog 20.000 pond nodig.

In de onderstaande YouTube video geeft hij een “rondleiding” door z’n boot, genaamd The Big C. In The Big C kan hij natuurlijk niet staan, en eigenlijk ook niet liggen. Als hij wil slapen snoert hij zich in en doet hij een soort piepschuim helm op. Die helm past precies in de bolling van het enige luikje waardoor hij rechtop blijft zitten. En dat dan 90 dagen. Pure hel lijkt me…. Verder heeft hij weinig ruimte voor eten, dus eet hij 90 dagen hetzelfde.

Wil je Andrew ondersteunen op z’n verschrikkelijke reis? Hij zamelt geld in via gofundme.

Sterkte Andrew!

Op woensdag 15 maart 2023 zijn de verkiezingen voor de Provinciale Staten en voor de waterschappen. De stembureaus zijn open van 07.30 tot 21.00 uur. Als u stemt, heeft u invloed op wat er de komende jaren gebeurt in uw provincie en uw waterschap. Ook heeft u indirect invloed op de verkiezing van de Eerste Kamer.

Nee, dit is geen doorgedraaide ChatGPT, maar rijksoverheid.nl die subtiel op onze burgerplicht wijst. Om een keuze te maken tussen de partijen is het natuurlijk veel beter om te kijken naar hoe ze in het verleden gestemd hebben, dan om luisteren naar mooie verhaaltjes. “Vriend van Geensnor” Thijs vond dat ook, en kwam met partijgedrag.nl aanzetten. Op deze site kun je zien welke partijen op elkaar lijken. ChristenUnie blijkt dus het meeste op D66 te lijken….Gekkenhuis…

Heb je als je dit leest zin om ook zoiets te beginnen: de oprichter van partijgedrag.nl is op zoek naar een opvolger.

ChatGPT is een tool die gebruikmaakt van grote taalmodellen getraind door OpenAI om tekst te produceren die lijkt op tekst geschreven door een menselijke gebruiker. Deze tool kan worden gebruikt om snel en gemakkelijk teksten te produceren, zoals blogposts of artikelen, zonder dat u zich zorgen hoeft te maken over spelling- of grammaticafouten. ChatGPT kan ook helpen om uw gedachten beter te structureren en om een logische en gemakkelijk te volgen tekst te produceren.

Een van de voordelen van blogposts schrijven met ChatGPT is dat het een snelle en efficiënte manier is om een post te schrijven. In plaats van te wachten op inspiratie of te worstelen met writer’s block, kunt u gewoon uw ideeën in ChatGPT typen en de assistent zal deze veranderen in een leesbaar en goed geschreven stuk tekst.

Een ander voordeel is dat ChatGPT u kan helpen om uw gedachten beter te structureren. Door uw ideeën in korte zinnen te typen, kunt u ze gemakkelijker ordenen en maken ze meer zin. Dit maakt het eenvoudiger om een logisch en gemakkelijk te volgen blogpost te schrijven.

Ten slotte kan ChatGPT ook helpen om grammatica- en spellingfouten te verminderen. De assistent is getraind om teksten te schrijven die voldoen aan de hoge standaarden van de taal, dus u hoeft zich geen zorgen te maken over fouten die u misschien over het hoofd ziet.

Het mooie van ChatGPT is dat het gemakkelijk te gebruiken is. U hoeft alleen maar uw ideeën in te typen en de assistent doet de rest. Dit betekent dat u meer tijd heeft om te focussen op het onderwerp van uw blogpost en om te zorgen dat het zo goed mogelijk wordt gelezen door uw publiek.

In feite is deze blogpost ook met ChatGPT geschreven. Door deze tool te gebruiken, was het gemakkelijker om de voordelen van het schrijven van blogposts met ChatGPT te benadrukken en om een duidelijk en vloeiend stuk tekst te produceren. Dus als u op zoek bent naar een manier om uw blogposts sneller en gemakkelijker te schrijven, dan is ChatGPT misschien wel de oplossing voor u.

Stroom is duur en het klimaat gaat naar de tering. Redenen genoeg om wat aan je stroomverbruik te doen. Maar hoe kom je erachter wat effectief is? En wanneer heb je die ledlampen eigenlijk terugverdiend? De trouwe lezer van Geensnor weet nu waarschijnlijk al waar dit heen gaat: we hebben weer iets nieuws gemaakt. Klopt helemaal trouwe lezer! Dit keer is het een tool om stroomkosten besparingen door te rekenen.

Geld besparen was nog nooit zo leuk en makkelijk!

Oke, wat is dit nu weer?

Door stroomkosten, de kosten van je investering en wat verbruiksgegevens in te vullen, vertelt de tool je hoeveel geld je bespaart en wanneer je je investering hebt terugverdiend. En hoewel een duurzamere wereld niet bij jezelf begint, is het toch aardig om te weten dat je besparking wel iets doet met je CO₂ uitstoot. Door de cijfers aan te passen, kun je kijken of je besparing effectief is.

Voorbeeld bitte

Stel je TV staat het grootste gedeelte van de dag standby. Dit verbruikt, samen met dat irritante klote kastje van je kabelmaatschappij, 20 watt. Het leven is al druk genoeg, dus ‘s avonds gaan de slofjes aan en kijk je ook nog 3 uur per dag TV wat 100 watt verbruikt. Je betaalt 30 cent per kWh aan stroom. Omdat je je hele huis al vol dure Philips Hue spullen hebt hangen, ben je benieuwd of je zo’n Hue Smart Plug van 45 euro vlot hebt terugverdiend. Een kort bezoekje aan onze fijne tool, levert je binnen enkele ogenblikken de volgende conclusie op.

Dus met andere woorden: na een jaar heb je hem terugverdiend. Aanschaffen dus! En omdat je de lulligste niet bent, klik je voor je aanschaf op deze affiliate link van bol.com waardoor je de makers van de tool ook nog een fijne kerst bezorgt.

Jaja, de makers

Ja, de makers ja. De makers zijn dezelfde stevelingen die onlangs nog de site van Omloop De Snor naar het pantheon der moderniteit hebben verheven, door hem om te bouwen in Astro, opgeleukt met een krokantje van TailwindCSS. Als je hier meer van wilt weten, kun je het bericht hieronder lezen.

Voor de stroomkosten besparing berekenen tool (hmm, misschien nog een goede naam verzinnen), hebben ze iets vergelijkbaars gedaan. Behalve Astro en TailwindCSS, hebben ze in dit geval ook nog wat Svelte gebruikt. Svelte biedt net wat meer mogelijkheden en werkt verder heel prima. Als je ook geinig webdingen wilt maken, zou ik er zeker eens naar kijken.

Alles staat op GitHub, mocht je nog een goed idee hebben.

Soms beruipt je het gevoel dat je site niet meer helemaal haantje de voorste is. Hij staat nog wel prima live, maar je denkt dat er meer in het leven moet zijn dan wat plukjes HTML met wat CSS er doorheen geroerd. Dat gevoel bekroop ons onlangs bij www.omloopdesnor.nl. We besloten direct om de handen uit de mouwen te steken en de achterstand in één klap goed te maken met Astro en Tailwind CSS. Deze frameworks zijn zo gillend hip en afgrijselijk modern dat we de toekomst weer met vertrouwen tegemoet zien!

Astro

Als eerste Astro. Tjonge wat een beest. Astro is een static site generator die met behulp van Javascript je site in elkaar zet. Astro genereert bloedsnelle sites doordat ze zo min mogelijk Javascript in je website proppen. Astro doet dat bijvoorbeeld veel beter dan de grote broer NextJS die je leuke websiteje als een kerstboom vol met Javascript hangt, waardoor hij niet meer vooruit te branden is. Daarom staan er op YouTube ook video’s met de strekking “Astro crushes NextJS performance”.

Island architectuur

Een ander goed idee van Astro is hun “Island architecture”. Bij deze architectuur breekt Astro je website bij het genereren op in kleine, onafhankelijke componenten (de eilanden). Vervolgens kun je per eiland bepalen hoe deze geladen wordt en of er Javascript voor nodig is. Er wordt geen Javascript geladen als dat niet echt nodig is voor de werking van je eiland. Super efficient! Voor onze eigen www.omloopdesnor.nl boeit dit trouwens totaal niet, want we hebben geen onderdelen die Javascript nodig hebben. Maar toch leuk.

Tailwind CSS

Niet zo nieuw Astro, maar wel veel bekender is Tailwind CSS. Met Tailwind CSS hoeft je geen CSS classes meer in een apart CSS bestand te maken, maar is alles “Utility first”. In plaats van gehannes met zelf bedachte CSS classes, hannes je de standaard classes van Tailwind CSS gewoon in je HTML. Je kan dus, net als in de nineties, gewoon alle styling inline in je HTML code zetten. Je divje ziet er dan bijvoorbeeld zo uit:

<div class="absolute inset-x-0 top-0 z-10 origin-top-right transform p-2 transition md:hidden">

Niet mega overzichtelijk, maar dat is nooit het sterke punt van CSS geweest. Al met al werkt het best aardig.

Tot slot: Prestaties

Maar dan de prestaties. Nou, ga daar maar eens goed voor zitten. Volgens Google kan de site niet veel sneller dan dit! 100 van de 100 punten hebben we gekregen.

En nu hoor ik je denken: “Ja, maar Joris. Dit is een mini site met een paar foto’s erop. Waar heb je het in godsnaam over?”. En daar heb je volkomen gelijk in. Deze site krijg je ook zonder fancy technieken wel snel. Maar wat is daar de lol van? Ik ben een enorme Javascript/Typescript noob, maar het is altijd leuk om een beetje te pielen. Vandaar.