Soms lijkt het wel alsof een statische website meer problemen oplevert, dan het oplost. Zo hebben we eerder al problemen met zoeken en reageren moeten omzeilen. In deze aflevering van de serie “Waarom kan dit ook al niet met met mijn statische site?”:

Eenvoudig een link delen

hehe, ze springen over geheugenbanken heen

Het probleem

Iedereen kent het wel. Je ziet iets vets op internet en je wilt het tegen iedereen vertellen. Vroeger zette het je op Facebook of Twitter (Ik blijf gewoon Twitter zeggen…), maar daar wil je tegenwoordig niet meer dood gevonden worden. Daarnaast heb je een geweldig, moderne statische site waar je zelf heer en meester bent en waar je kan doen wat je wilt…..denk je….

Toch lukt het je maar niet om je vette linkje vanaf je telefoon, op je hippe site te krijgen. Technisch gezien kan het misschien wel, maar dan moet je eerst aan de slag met het aanmaken van een nieuw Markdown bestand op je telefoon, om die vervolgens in Git te proppen. Je bent bekant de halve avond bezig voor dat je zeker weet dat de drie vaste bezoekers van je site, je vette linkje kunnen zien.

Kortom, ellende.

De oplossing

De oplossing hangt weer van hacks en amateurisme aan elkaar, maar is daardoor niet minder charmant:

  1. Via een Apple Opdracht haal je de link op van de pagina die je wilt delen. Omdat je de opdracht in het “deelmenu” van iOS kan zetten, kun je eigenlijk alles wat je tegenkomt, in elke app, via de opdracht versturen.
  2. De Apple Opdracht stuurt je link via de url door naar een formulier. Dit formulier is eigenlijk een soort mini CMS die alles om zet naar een Markdown bestand met de juiste inhoud. In het formulier kun je de titel en omschrijving nog aanpassen.
  3. Dit formulier verzend vervolgens alle informatie weer naar GitHub waar alles op de juiste manier (Frontmatter enzo), in de juiste repository terecht komt. Je moet natuurlijk wel van tevoren ingelogd zijn op GitHub.
  4. Even op Commit drukken en je link is gedeeld!

Elk bericht krijgt nu standaard de tag “Internet” mee, maar dat kan ook nog getweaked worden.

Extra bonus

Soms is de link die je wilt delen, een YouTube video. Deze wil je natuurlijk het liefst mooi embedden in je site, maar zoals we al eerder hebben uitgelegd, gaat dat niet zonder de hele AVG op je nek te krijgen. Maar gelukkig hebben we daarvoor ook een oplossing gevonden! Niet alleen wordt een YouTube link gedetecteerd en automatisch geëmbed. Hij wordt ook automatisch omgezet naar het youtube-nocookie.com domein, zodat er niet zomaar cookies worden geplaatst. Helemaal makkelijk, helemaal super!

Meer lezen

RSS naar Mastodon illustratie

Als je een leuk Mastodon account weet en je wilt die graag in je RSS reader gebruiken, is er geen enkel probleem. Zet gewoon .rss achter de URL, en tada, daar is de RSS feed.

Andersom is het lastiger. De RSS feed moet regelmatig worden controleerd op nieuwe berichten. Als er dan iets wijzigt moet het nieuwe (en alleen het nieuwe…) bericht worden omgezet naar een Toot en naar Mastodon worden gestuurd. Maar ik zou deze post natuurlijk niet schrijven, als ik daar geen oplossing voor heb gevonden: Echo van Robb Knight. Echo doet precies wat het moet doen: RSS feeds checken en Tooten.

Houtje touwtje

Omdat ik te skeer ben voor een webhoster met Nodejs ondersteuning, heb ik mijn Synology NAS aan het werk gezet. Tussen 10:00 en 22:00 draait hij nu elke twee uur Echo. In Echo heb ik de RSS feed- en Mastodon account van geensnor.nl geconfigureerd zodat we de Fediverse geautomatiseerd volpompen met berichten van geensnor.nl

En zo hebben we weer wat los spul aan elkaar geknoopt…..

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

feeeed logo

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.

Plaatje van Midjourney om de boel wat op de leuken. Voegt weinig toe, ik weet het....

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 in z'n kleine bootje

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!

crappy dall-e plaatje van een stemmer

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.