Digging the digital

how-to

Mar 2, 2025 ∞
Waarom installeer ik Linux op een Macbook Pro?
Het is geen politieke keuze omdat ze weer op X adverteren. Het is ook niet dat ik afscheid wil nemen van het OS waar ik al zeker 15 jaar gebruik van maak. Maar er lonkt soms iets. En er zijn van die kleine momenten die dan samen komen.
Zo las ik de overpeinzingen van Denny Henke op zijn blog, om een overstap te maken. Hij maakt hele bewuste keuzes en deelt zijn proces stap voor stap. Ik vind dat mooi om te lezen en het zette bij mij iets in beweging.
Mijn lief kocht een tijdje terug een nieuwe laptop, waardoor haar huidige laptop ineens niets lag te doen. Het scherm werkt niet helemaal goed, het energiemanagement is een soort van non-existent, maar de laptop werkt. Mits er een stroomkabel in zit. En als je er niet teveel van vraagt met apps en energieconsumptie (je kunt er geen lokale AI modellen op draaien).
Ik heb nog altijd een goed werkende 27" Apple Cinema Display op mijn werkplek staan
Ik zit steeds vaker te denken om op de laptop die ik voor mijn werk heb, een betere scheiding te maken tussen privé en professioneel. Nu zit ik vaak nog privé zaken te doen op mijn werklaptop. Niet dat dit een heel groot probleem is, maar ergens voel ik er toch meer voor om dat beter te scheiden.
Dus waarom geen bootable installatie van Linux Mint maken en die op een oude MacBook Pro installeren? En nee, niet naast MacOS, maar als enige installatie. Met een USB-stick en een goed stappenplan, ben je in 30 minuten klaar.
En het ging vrij vlekkeloos.
Na het opstarten herkent de laptop automatisch de grotere Cinema display, de WiFi wordt meteen opgepikt. Het gaat allemaal vrij goed.
Ik wil de komende tijd een logboek bij te houden met mijn installatie- en gebruiksperikelen. Mogelijk kan dat in de toekomst andere overstappers/meelifters helpen.
De eerste stappen
Na opnieuw opstarten moest ik meteen de zolder op. Want mijn draadloze toetsenbord en trackpad waren niet bereikbaar via Bluetooth. Ik wilde niet meteen gaan klooien met drivers en allerlei extra stappen. Dus ik haalde een USB muis en toetsenbord van zolder. Aansluiten en gaan. Eenvoudig.
Mijn eerste installatie is die van 1Password. Ik heb al mijn wachtwoorden in een Family account en gelukkig bieden ze een Linux installatie aan. Eerlijk is eerlijk, het is meteen een beetje een gedoe, met dingen in de terminal. Maar het kan en het werkt. Als ik 1Password heb, dan kan ik weer vrijwel overal bij.
Vervolgens installeerde ik Git via de commandline (sudo apt install git, veel moeilijker is het niet) zodat ik eenvoudig diverse repos kan ophalen
Ik installeerde Obsidian via de ingebouwde Software Manager. Mijn vault waar ik op de Mac in werk, synchroniseer ik niet met hun dienst, maar met git. Die ga ik dus nog overzetten. Maar ik wil eerst kijken of ik op een slimme manier mijn installatie met plugins kan overzetten van Mac naar Linux.
Ik maakte nieuwe ssh-keys aan (ssh-keygen) zodat ik weer eenvoudig en wachtwoordloos kan inloggen op mijn servers bij Hetzner.
Ik installeerde Homebrew. Ik moet nog kijken wat ik er verder mee wil installeren, maar het is alvast handig om klaar te hebben staan.
Ik installeerde Emacs. Ik begin op deze machine met een vanilla Emacs, ik volgde de “basic and capable configuration” van prot om al een wat fijnere werking te hebben. Emacs is al jaren mijn hobby-editor. Zoals sommigen een old-timer in de garage hebben staan om op zondag aan te klussen, zo heb ik software uit 1985 om op zondag mee te klussen.
Thunderbird was al geinstalleerd, dus daar de mail mee ophalen was eenvoudig het aanmelden van mijn mailaccount.
Wat moet ik nog uitzoeken?
Er zijn best wel wat zaken die ik moet uitzoeken. Ik ben niet van plan helemaal over te stappen van Apple naar Linux. We hebben in het gezin allemaal een iPhone, we gebruiken de gezamenlijke foto-mogelijkheden, dus een complete overstap zie ik niet snel gebeuren. Ik moet wel bedenken hoe ik eenmaal niet op de vaste werkplek thuis, toch toegang heb tot prive zaken. Zoals een Obsidian vault, bestanden of andere dingen. Ik denk dat een soort remote desktop wel mogelijk moet zijn. Zodat ik op de werklaptop kan inloggen op de Linux machine thuis ofzo? Moet ik dus nog uitzoeken.
Na meer dan een decennium op een Mac werken is de muscle memory in mijn vingers er. Dat merk ik met de sneltoetsen die ik zo gewend ben van mijn Mac. Die niet werken op Linux. Of in elk geval, nóg niet.
Ook zoiets, accenten op letters. Ik heb nog geen idee hoe ik die er snel op krijg terwijl ik typ. Ik ben gewend om bv alt-e e te tikken voor een e met accent. Dat is in Linux iets anders, met de zgn compose-key. Die kan ik zelf instellen, dus dat is nu right-alt, dan werkt het prima.
Andere sneltoetsen zoals de alt, ctrl en windows toets op het keyboard, die moet ik nog eens rustig mappen zodat ik weer op normale snelheid kan tikken.
Ik heb op mijn Mac diverse kleine configuraties staan, zoals API keys voor diverse diensten. Die moet ik nog omzetten.
Een goede windowmanager voor Linux Mint installeren en configureren.
En zo zijn er gaandeweg vast nog tientallen kleine verbeteringen die ik kan instellen. Maar ik heb geen haast. Het is een hobby. Ik hoef er niet direct heel productief mee te zijn.
Also on Bluesky
Feb 28, 2025 ∞
Nieuwe email provider gezocht
Sinds 2018 gebruik ik de emailservice van Fastmail om al mijn mail op eigen domeinen te verzenden en ontvangen. Het werkt prima. De webinterface mag een opfrisser krijgen, maar verder is het allemaal in orde. We hebben 2 accounts op eigen domein en we betalen in totaal zo’n $120 per jaar. Maar toch begint het weer te schuren. Het bedrijf is gevestigd in Australië, de mailservers van Fastmail staan in de USA. Plus ze bieden geen end-to-end encryptie. Anders gezegd, er is een mogelijkheid dat anderen meelezen met mail. De mail die bij me binnenkomt en die ik verzend is niet heel spannend. Maar toch. Net als met de ouderwetsche briefpost vind ik het een prettig gevoel dat ik een envelop kan sturen die dicht is bij verzending en bij aankomst. Of ze bij PostNL inmiddels ook metadata verzamelen van verzender en ontvanger met briefpost, dat weet ik niet. Lijkt me sterk, maar dat is een ander verhaal.
Goed, tijd voor een alternatief voor Fastmail. Een provider in Europa vind ik wel zo prettig, uiteraard alles veilig en encrypted, een moderne interface (sneltoetsen please!) en bij voorkeur agenda-functionaliteit bij de dienst. Ik kom een paar namen steeds tegen. Soverin en Startmail uit Nederland en Tuta in Duitsland. Protonmail kom ik natuurlijk ook veel tegen, maar voor wat we nodig hebben zou dat een 50% prijsstijging zijn. Daar moet ik dan wel even over nadenken.
Heeft iemand ervaringen met een van deze providers? Ik hoor het graag!
Also on Bluesky
Feb 19, 2025 ∞
Samenvattingen bij blogposts
Sinds mijn verhuizing van zelf-geïnstalleerde en -onderhouden WordPress naar hier-heb-je-geld-regel-het Micro.blog hosting, ben ik best tevreden over de laatstgenoemde service. Het is gewoon heel eenvoudig. Ik schrijf, ik publiceer, ik ga verder. Ik hoef me niet per sé bezig te houden met nieuwe functionaliteiten, met updates, met gedoe. Want eerlijk is eerlijk, WordPress was best wel vaak gedoe. Of eigenlijk, het uitgangspunt dat ik alles in eigen beheer had, leidde er toe dat ik van alles bedacht omdat het kon. Niet dat het altijd zo handig was om te maken of te onderhouden.
Maar goed. Ik ben dus blij met Micro.blog. Niet in de minste plaats omdat eigenaar/helpdesk/programmeur/man-met-mening Manton in een constant tempo vernieuwingen en updates doorvoert. Zo is het nu mogelijk om samenvattingen van een post te maken. Dat klinkt voor menig WordPress-adept als een “pffffff…gast! Dat kunnen we al jáááren!” en dat klopt. Ik maakte er soms wel eens gebruik van. Zeker bij langere posts is het handig om een samenvatting in een feed of social post aan te bieden. Je schrijft de samenvatting zelf, maar zoals Manton het in bovenstaande link zegt, je kunt het ook door AI laten genereren. Mja, zou kunnen. Als ik gebruik maak van de web-interface van Micro.blog. Maar dat doe ik niet. Vrijwel al mijn posts zijn geschreven in Drafts of Obsidian, via een koppeling met de Micro.blog API. Ik gebruik plugin voor Drafts en plugin voor Obsidian. Nu is het dus wachten tot deze plugins updates hebben waarmee ik eventuele samenvattingen kan toevoegen aan langere posts.
Want no way dat ik zelf die plugins ga aanpassen omdat ik niet kan wachten… toch? Tóch?
PS: Om het effect van de samenvatting wel te zien, heb ik voor deze ene keer de post geschreven in Drafts, maar daarna gepubliceerd via de officiële webinterface. Vooruit dan. En de samenvatting via AI is gewoon slecht. Sorry Manton.

Also on Bluesky
Feb 8, 2025 ∞
Alternatief reactiesysteem gevraagd
Bij de vorige blogpost over de Nederlandse bloggerslijst, kreeg ik goede aanbevelingen via zowel Mastodon als via het reactieysteem op deze blog zelf. Dank! De integratie van Micro.blog (alle slimheid die deze boel draaiende houdt) en sociale netwerken (de goeie!) is prima op orde. Maker Manton heeft zelfs een reactie systeem in het CMS ingebouwd. Maar om daar een reactie achter te laten moet je eerst inloggen met Mastodon, Bluesky of Micro.blog zelf. En dat wil ik toch liever niet. Ik heb geen last van spam via reacties, dus een eenvoudig reactie-paneel-ding is prima voor me. Dus heb ik Cusdis een-soort-van-ingebakken. Met wat script, spuug en schietgebedjes hangt onder elke post de mogelijkheid om “gewoon” een reactie achter te laten. Maar de vormgeving van dat Cusdis ding is verschrikkelijk! Horrendous! Een abomenatie zou men zeggen in vroeger tijden. Ik krijg de kleuren niet op orde, het formaat van de teksten, het hangt er allemaal maar een beetje bij. En dat is zonde.
Maar goed, ik doe het er mee net als jullie, mijn lieve lezers. Want ik krijg er zo nu en dan een reactie op en dat is leuk. Maar het oog wil ook wat. Het mag allemaal wat netter. Ik krijg het niet voor elkaar met mijn beperkte kennis van scripting, CSS en HTML. De AI-overlords heb ik al eens een paar keer om gevraagd, maar daar kwam ik niet veel verder mee.
Wat zijn alternatieven voor zo’n reactiesysteem? Dit blog is een statisch blog, gebouwd in Hugo. Dus er zou toch wel iéts moeten zijn?
Dus euh… laat een reactie achter :-)
Also on Bluesky
Jan 10, 2025 ∞
SPARK! Toon random kennis in Obsidian
Boven de multi-kolom layout op mijn Obsidian homepage laad ik continu een random paragraaf uit de Tao Te Ching. Door op een button te klikken verandert de paragraaf en kan ik naar het origineel doorklikken voor verdere studie. Ik maakte hiervoor een eigen script, in samenspraak met de chatbot Claude van Anthropic.

Hier kreeg ik best wat vragen over, “hoe kan ik dat script zelf gebruiken? Welke onderdelen moet ik aanpassen?”
Om dat op te lossen én een eigen micro-obsessie te beantwoorden, ben ik weer samen met mijn buddy Claude aan de slag gegaan. In deze blogpost leg ik je uit hoe je dit script kunt installeren, hoe je het op een pagina plaatst én ik vraag je om feedback!
PS: De micro-obsessie is “Hoe kan ik met AI een ruw idee voor een script vormgeven en verder brengen?”
Wat doet SPARK?
Allereerst, de naam ✨ SPARK! Die staat voor
• Summoning
• Paragraphs
• As
• Random
• Knowledge
Met dank aan Claude voor het zetje in de juiste richting met deze naam. Ik stuurde het deze kant op, Claude kwam met de juiste volgorde van de woorden.
Met Spark kun je op elke pagina in Obsidian een random deel van een tekst uit je Obsidian vault halen. Je kunt zelf instellen uit welke folder de teksten komt, hoeveel paragrafen je wilt tonen, de tekst en styling van de Spark-button en eventuele emoji.
Installatie
Uiteindelijk maak ik van dit script een plugin, maar ik wil graag met mijn lezers en de Digitale Fitheid community eerst wat proefdraaien, daarom is het nu nog wat handwerk en moet je een beetje meer je best doen. Ik heb geprobeerd de installatie voor nu zo eenvoudig mogelijk te maken. De installatie bestaat uit 3 delen:
• Het script installeren
• Het script aanroepen en configureren
• Er is geen stap 3
Het is een vereiste dat je de Dataview plugin (Obsidian / Github) hebt geïnstalleerd en je in de instellingen de optie “Enable Javascript queries” aan hebt staan.
Script installeren
Ik heb de volledige code van het script op Github gezet, inclusief tekstbestanden om mee te testen. Je kunt er een kijkje onder de motorkap nemen, of direct het complete pakket downloaden als zipfile. Als je het hebt gedownload, unzip het en plaats alle mappen en bestanden in je vault. Doe dit niet in Obsidian zelf, maar via de Finder of Windows Verkenner. Maak een map demofolder in je vault en zet daar de submappen en de losse bestanden in. Het belangrijkste is dat er een bestand genaamd “spark.js” aanwezig is. Hernoem het eventueel naar deze naam als nodig. De map demofolder in je vault ziet er dan als volgt uit:

Het maakt niet uit waar je spark.js plaatst in Obsidian, maar het is slim om dit bestand spark.js in een map /scripts te plaatsen, waar je al je scripts bij elkaar houdt. Of zet het in een eigen structuur met een templates map, of een andere map waar je alles bij elkaar houdt wat betreft automatisering en scripting in Obsidian. Heb je zo’n map nog niet, maak dan gewoon een map “scripts” en plaats hem daar.
Script aanroepen en configuren
Je hebt waarschijnlijk al een idee hebt waar je dit script voor wilt gebruiken en dat je een map hebt met bestanden die je wilt aanroepen. Zo niet, dan help ik je wat op weg. Ik heb drie mappen toegevoegd met voorbeeld teksten:
• /alice: De volledige tekst van Alice in Wonderland, in afzonderlijke hoofdstukken. Met dank aan Project Gutenberg
• /tao te ching: De vertaling van dit belangrijke boek is van Ursula K. Le Guin. Gedownload van The Way and it’s Virtue en opnieuw opgemaakt voor persoonlijk gebruik.
• /bloghelden: Mijn eigen boek uit 2010 over de geschiedenis van de Nederlandse blogosfeer. Ook vrij te gebruiken via mijn github repo.
De map /tags kun je gebruiken om te testen met verplichte of uitgesloten tags.
Met de standaard configuratie werkt SPARK al direct met de bijgesloten Tao Te Ching. Je roept het script als volgt aan:
• Maak een nieuw bestand in Obsidian.
• Plaats hier de volgende code
dv.view("spark");
(zet voorafgaand aan bovenstaande eerst ```dataviewjs en sluit af met ```)

• En zet de pagina in Reading mode, of als je Live Preview aan hebt staan, zie je direct het resultaat.

Configuratie van Spark
In het script staan een aantal standaard instellingen. Van de naam van de folder om te gebruiken tot het aantal paragrafen en de styling van de button.
Ik heb nu de volgende instellingen gemaakt die je kunt aanpassen.
• sourceFolder: De map waar je bestanden in zijn te vinden. Default: ‘demofolder/tao te ching’
• buttonText: De tekst die op de button staat. Default: ‘✨ Spark Knowledge’
• buttonStyle: De CSS om je button vorm te geven. Default: background-color: var(--interactive-accent); color: var(--text-on-accent); padding: 8px 16px; border: none; border-radius: var(--radius-s); margin-bottom: 1em; cursor: pointer; font-size: var(--font-ui-small); transition: all 0.2s ease; ,
• linkEmoji: Een emoji voorafgaand aan de linktekst onder de paragraaf. Default: ‘✨’
• showTitle: Laat de titel van het bestand zien voorafgaand aan de random paragraaf. Default: false
• maxParagraphs: Kies het maximaal aantal paragrafen om te tonen. Default: 1
• addDividers: Bij meer dan één paragraaf (zie maxParagraphs), plaats een horizontale lijn tussen de paragrafen. Default: false
• excludeTags: Bestanden met deze tags worden niet meegenomen in de random knowledge. Default: [’exclude’, ‘private’],
• requireTags: Alleen bestanden met deze tags tonen in de random knowledge. Default: [],
• excludePatterns: Hou specifieke tekstpatronen weg uit de keuze van paragrafen. Default: [ ‘> Note’, ‘> note’]
In het bestand Demo Script.md dat is toegevoegd kun je een aantal voorbeelden vinden van configuraties.
Voorbeelden
(zet eerst ```dataviewjs en sluit af met ```)
await dv.view("spark",{
sourceFolder:"demofolder/alice",
showTitle: true,
});
await dv.view("spark",{
buttonText:"🌟 More wisdom!",
linkEmoji: "🪄",
showTitle: true,
maxParagraphs: 1,
addDividers: true
});
await dv.view("spark",{
sourceFolder:"demofolder/tags",
includedTags: ["tonen"],
});
Feedback
Ik hoop dat deze uitleg je voldoende handvatten geeft om dit script eens te testen in je eigen vault. Dit script leest alleen bestaande bestanden. Het schrijft niets weg, houdt geen statistieken bij, stuurt niets naar LLM modellen of maakt andere mensen slimmer anders dan jezelf.
Ik stel het op prijs als je me wilt helpen met verbeterde versies van het script. Mijn verlanglijst voor volgende versies is nu al:
• Dataview-query’s als bron gebruiken
• CSS linken aan een extern bestand (beter beheerbaar)
• Conversie naar plugin
Wat ik graag aan feedback zou willen ontvangen:
• Kun je hier iets mee? Zo ja, waar gebruik je het nu voor?
• Zo nee, wat mis je nog om het bruikbaar te maken?
• Welke functionaliteit zou het voor jou onmisbaar maken?
• En met welke functionaliteit ga je het actief aan anderen tonen of doorvertellen?
• Wat kan beter in bovenstaande uitleg?
• Wat kan beter in de uitleg in het Readme bestand op Github?
Dank je wel voor je tijd en aandacht. Laat je kennis ✨SPARKEN!
SPARK op Github
Also on Bluesky
Jan 4, 2025 ∞
Hoe maak je 3 kolommen in Obsidian?
In deze blog laat ik je zien hoe je op een pagina in Obsidian het aantal kolommen kunt aanpassen. Dit is gebaseerd op een eerdere blogpost over mijn startpagina in Obsidian en vragen die ik kreeg uit de community.
Tijdens een Digitale Fitheid meetup liet ik zien hoe ik mijn startpagina in Obsidian heb opgebouwd. Dit wekte bij veel aanwezigen de aandacht, waardoor ik een blogpost schreef hoe je deze pagina kunt nabouwen met de juiste plug-ins, code en instellingen.

In deze blogpost leg ik je uit hoe je de twee kolommen op de pagina kunt uitbreiden naar drie of meer. Als je nog geen idee hebt hoe je twee kolommen kunt krijgen op een Obsidian pagina, dan adviseer ik je eerst mijn eerdere handleiding door te nemen en dan hier terug te komen.
Goed, het idee is dus dat we van dit
Naar dit willen.
Je ziet hier niet alleen drie kolommen, maar eveneens dat ze over de hele breedte van je scherm zichtbaar zijn. Om daar mee te beginnen, dat krijg je voor elkaar als je de CSS snippet MCL Wide-view hebt geïnstalleerd (zie voorgaande handleiding, subkopje CSS) en je in de properties/YAML van de pagina kiest voor “cssClasses” met de waarde “wide-page”. Hiermee krijg je direct een bredere pagina.
Voor we verder gaan, zorg ook dat je MCL Multi Column.css hebt geïnstalleerd. Wederom, check mijn eerdere handleiding om dat stap voor stap te doen.
Nu gaan we van twee naar drie kolommen. Om dit zo duidelijk te maken, laat ik je de screenshots zien van de pagina in “Source mode”. Als je in Obsidian in edit-mode zit, kun je via het menu View naar Source Mode. Of via het drie-puntjes-menu rechtsboven de pagina. Of via het Commando Pallet naar “Toggle Live Preview/Source mode” Dit is in Obsidian de ruwe, onbewerkte tekst. De daadwerkelijke tekst zoals deze in het onderliggende bestand staat, zonder opmaak of live preview vanuit Obsidian. Hieronder zie je de onbewerkte tekst uit het bestand met twee kolommen. Ik heb markers 1 t/m 4 toegevoegd in het screenshot op plekken die van belang zijn.
Je ziet hier de volgende code
>[!Multi-column]
>> [!important] ## Dit is kolom 1
>> Hier plaats je links, teksten, wat je maar wilt. 
>> - Dat kan met lijsten, of niet. 
>
>>[!important] ## Dit is kolom 2
>> Hier plaats je links, teksten, wat je maar wilt. 
>> - Dat kan met lijsten, of niet. 
Het volgende is belangrijk:
1. De regel >[!Multi-column] geeft de start aan van de kolommenstructuur.
2. Elke opvolgende regel die start met >> zal in de eerste kolom zichtbaar zijn.
3. Tot je één keer > tikt. Dat is het einde van de kolom en het teken om de volgende kolom te starten,
4. Elke regel die in de tweede kolom hoort, krijgt weer >> voorafgaand.
Zoals je ziet hoef je de multi-kolom niet af te sluiten. Een witruimte is voldoende om de kolom af te sluiten.
Om een extra kolom te maken, hoef je dus alleen een extra blok toe te voegen met > en de inhoud voorafgaan met >>
Eenvoudig niet waar? Zo kun je blijven uitbreiden met kolommen. Hou er wel rekening mee dat ze per kolom smaller en minder leesbaar worden.
Op deze manier kun je met een beetje code je eigen pagina’s fraai vormgeven. Wil je meer weten over de mogelijkheden met multi-kolom, lees dan de documentatie en voorbeelden door.
Succes!
Also on Bluesky
Dec 1, 2024 ∞
Ik liet AI een adventskalender maken
De afgelopen weken had ik losse ideeën die nu samen zijn gekomen in een klein project wat ik zojuist live zette. De AIdventskalender 2024. Een persoonlijk project om AI en programmeren samen te brengen. Een adventskalender die elke dag een tip geeft om de feestmaand door te komen met behulp van AI diensten. Voor playlists, gedichten en films. Wat bracht me tot dit project? Drie losse momenten.
1. Terwijl ik met iemand praatte over adventskalenders, vroeg ik me af of het domein AIdventskalender.nl nog vrij zou zijn. Ja dus.
2. Mijn oude blog Digging the Digital draait nog altijd op WordPress, maar liever wil ik die omzetten in een statische site, zodat het minder resources kost. En eenvoudiger ergens is te hosten. Ik wil daarom kijken hoe ik die site in Hugo kan omzetten, een framework voor statische sites
3. In POKI, de Podcast over Kunstmatige Intelligentie, hoorde ik Wietse praten over manieren om programmeerwerk over te laten nemen door AI.
Breng dat allemaal bij elkaar in mijn hoofd… en ik heb weer een projectje!

De route
In een aantal avonden maakte ik de AIdventskalender. Ik heb echter geen letter code zelf geschreven. Alles is door AI gegenereerd, ik heb het eenvoudigweg steeds geknipt en geplakt in een code-editor. Krijg ik een foutmelding? Dan geef ik de foutmelding aan de chatbot (Claude Pro in dit geval) en die ging aan de slag voor me om het te verbeteren. Ik heb wel meer dan alleen Claude gebruikt. De allereerste versie van de site kwam uit Open Hands, een open source platform met software development agents. Met behulp van AI kun je een eerste ruwe versie van een app laten maken. Die versie heb ik overgenomen in VSCode en ben daarna met behulp van de chatbot Claude stap voor stap alles gaan verbeteren.
Je kunt een groot deel meelezen in het chatverslag dat ik op Github heb gepubliceerd.
Notities
Het hele traject ging zeker niet van een leien dakje. We zijn er nog echt niet om AI zelfstandig aan de slag te zetten voor een project als dit. Wat me zoal opviel in het hele proces:
• Ik moest sowieso een hoop troubleshooten rondom de lokale installatie van Hugo. Tenminste, dat dacht ik. Maar Claude ging in een rabbit-hole van versies en plugins die uiteindelijk niet nodig bleek te zijn. Door zelf goed op te letten wat er aan antwoorden kwam en tussentijds ook wat bij te lezen via de good old zoekmachine.
• Wat me brengt bij: Enige kennis is wel handig. Zowel van programmeren in het algemeen als van verschillende pakketten. De code die ik kreeg was soms verouderd, soms besloot Claude andere variabelen te gebruiken. Of het vergat hele stukken opnieuw aan te bieden. Als je de basisprincipes van programmeren enigszins herkent, kun je al snel aangeven waar de chatbot beter zijn best moet doen.
• Een systeem prompt is zeker handig. Daarmee geef je basis instructies aan de chatsessie. Hier kon ik steeds mee tweaken zoals de opdracht om altijd de volledige code plus eventuele aanpassingen terug te geven.
• Claude is heel vriendelijk. Aan de hand van de code en de werking had het al snel door dat ik een adventskalender maakte. Daarop kwam het met suggesties om de kalender wat meer aan te kleden. Niet alle suggesties waren even waardevol, maar er zat soms wat aardigs tussen wat me op nieuwe richtingen bracht.
• Met logisch nadenken kom je best ver. Als ik zelf het idee had dat we onnodige code maakte, dan vroeg ik dat, stelde een alternatief voor en hoe Claude dat zou oppakken. Soms gingen we dan de goede kant op, soms gaf Claude aan waarom het wel handig is om een bepaalde keuze te maken.
• Je eigen creativiteit helpt. Bijvoorbeeld, ik wilde een Javascript om de deur van elke dag echt als deur te openen en sluiten. Na wat iteraties met Claude had ik een versie waar ik tevreden over ben. Claude had dit zelf (nog) niet bedacht.
• Ik liet Claude een eenvoudig Bash-script schrijven om direct 24 dagen aan ideeën rondom Kerstmis en AI te genereren. En om deze direct in het juiste bestandsformat op te slaan. Om eerlijk te zijn, de teksten waren allemaal te generiek. Voor elk deurtje heb ik de tekst zelf herschreven en er eigen links bij gezocht. Dus eigenlijk is de content is van mij, de code van Claude.
• Er zaten steeds een paar dagen tussen de sessies dat ik met Claude werkte. Ik kon soms met de bestaande chatsessie doorgaan. Maar door de populariteit van Claude, kreeg ik meldingen dat chatsessies niet té lang moesten worden en ik beter een nieuwe sessie kon beginnen. Dat betekende dat ik weer allerlei kennis moest overhevelen, zoals bestanden en afspraken.
• Sowieso helpt het om bestanden te uploaden met je code. HTML, Javascript, CSS, Claude eet alles en kan je dan veel gerichter helpen. Zelfs screenshots van mijn browser-console met debug-berichten konden Claude de goede kant op sturen.
Ik had nog geen ervaring met Github Actions, een manier om automatisch taken en workflows uit te voeren in Github repositories. Met behulp van Claude kreeg ik alle uitleg, achtergrondinformatie en stappenplan. Toegepast op mijn situatie. Door iets nieuws te leren (Github Actions in dit geval) en het direct in een lopend project toe te passen, geeft mij meer voldoening dan eerst alle achtergronden te kennen en het stapje voor stapje via een Hello World voorbeeld te leren. Zo ook met het werken in Hugo templates, de projectstructuur en hoe content en templates samen tot een site leiden.
Creativiteit is een vereiste
Ik ben over de afgelopen 2 weken zo’n 6 uur met dit project bezig geweest. Van registratie van de domeinnaam tot publicatie van de huidige versie. Leuk om hier eens mee bezig te zijn. Ik heb geen ambitie om software engineer te worden, of een full stack developer. Maar soms heb je van die ideeën die je wel zelf tot leven wil brengen. De code die ik door Claude heb laten maken zal door menselijke intelligentie en kennis zeker sneller, compacter en efficiënter kunnen. Goede creatieve developers zijn echt nog altijd nodig. Hun kennis, levenservaring en creatief vermogen brengt een project veel verder dan wat AI nu kan. Als dit een proof of concept is, dan zou ik het vervolg zeker door een creatieve developer verder laten oppakken.
Geniet de komende maand van de AIdventskalender! Alles is statisch gehost, je kunt de broncode zelf bekijken en verbeteren als je wilt.
Wat vind je er van?
Also on Bluesky
Nov 16, 2024 ∞
Handleiding voor mijn startpagina in Obsidian
Na de publicatie van de blogpost over mijn startpagina kreeg ik al snel een paar vragen. Lezers die de stappen volgden, kwamen er niet helemaal uit. Ik besloot zelf eens aan de slag te gaan met een lege Obsidian vault en ik kwam al snel tot de conclusie dat ik met zeven-mijlslaarzen door de mogelijkheden was gegaan. Ik had een paar essentiële stappen overgeslagen, simpelweg om dat ik niet meer wist dat ze nodig waren. Ik heb mijn startpagina al lange tijd actief en had het nooit gedocumenteerd. Nu dus wel.
En neem ik jullie mee door de stappen die je zet om een zelfde soort pagina te krijgen.

Voor we beginnen, zet de Community plugins aan in Obsidian als je dat nog niet had.
Theme
Installeer het theme Annapuccin. Ga in de Obsidian settings naar Appearance > Themes > Manage > AnuPpuccin > Install and use.
Plugins
• Installeer en activeer Dataview (Obsidian/Github)
• Installeer en activeer Callout manager (Obsidian/Github)
• Installeer en activeer Style Settings plugin (Obsidian/Github)
Op het moment dat je de Style Settings activeert, kun je de instellingen van je thema al helemaal aanpassen. Ga naar de opties van Style Settings en je ziet de mogelijkheden van het AnuPpuccin theme. Het mooie van deze plugin is dat ik mijn settings kan exporteren en voor jullie weer beschikbaar kan stellen. Dus installeer mijn style-settings.json (rechtermuisknop, opslaan als) en je hebt direct de juiste instellingen. Klik op import in de Style Settings en kies het zojuist gedownloade style-settings.json als bestand. Nu heb je voor het theme dezelfde instellingen als ik heb.
CSS
Nu gaan we het mogelijk maken dat je kolommen op je pagina kunt maken en je deze over de hele breedte kunt plaatsen. Verder heb ik wat extra code om kleur aan je pagina te geven. De Modular CSS Layout bestanden kun je los downloaden vanaf de eigen Github pagina. Kies MCL Wide Views.css en klik op “Download Raw File” rechts in de balk met iconen. Doe hetzelfde met MCL Multi Column.css.
Verder heb je ook dit CSS bestand (rechtermuisknop, opslaan als…) nodig, het zijn extra call-outs die Nick Milo van Linking your Thinking eens heeft gemaakt. Download het bestand en sla het lokaal op bij de twee andere CSS bestanden.
In Obsidian ga je weer naar Settings > Appearance en scroll je naar beneden. Hier zie je het blok “CSS Snippets” met rechts er van het icoon van een folder.

Klik er op en open de map snippets in je Finder/Verkenner Hier zet je de drie gedownloade bestanden: nick-milo-callouts.css, MCL Multi Column.css en MCL Wide view.css Klik bij het kopje CSS Snippets nu op het reload-icoon en activeer de drie CSS bestanden.

Nu kun je bij een notitie in de Properties (YAML) toevoegen cssClass:wide-page om je notitie over de hele breedte te tonen.

Multi Column
Voor de Multi-Column mogelijkheid, kun je het beste beginnen met de documentatie van de CSS. Deze is behoorlijk uitgebreid en neemt je stap voor stap mee in de mogelijkheden
Ik gebruik voor mijn pagina nu de Multi Column Callout optie. Zie ook de broncode van mijn startpagina op Github. Klik op deze pagina op de knop “Raw” en kopieer de code die je ziet in een eigen notitie. Je kunt daarna alles per blok gaan tweaken. De dataviews en links zullen niet werken, die moet je naar je eigen situatie omzetten.
Via Settings > Callout Manager kun je alle kleuren en iconen van je callouts aanpassen naar je eigen smaak.
Hopelijk heb ik je zo ver genoeg op weg geholpen om je eigen startpagina kleur en vorm te geven. Ik ben benieuwd naar je resultaten!
Also on Bluesky
Nov 16, 2024 ∞
Hoe ziet mijn Obsidian startpagina er uit?
Gisteren was de maandelijkse PKM avond van de Digitale Fitheid community in het fraai vernieuwde Seats2Meet te Utrecht. De co-workspace zit sinds kort op een nieuwe lokatie en is compleet nieuw opgebouwd. De zaal, de gezamenlijke ruimtes en de voorzieningen, alles ziet er pico bello uit. Samen met de bijeenkomst die voortaan op vrijdagavond is in plaats van maandagavond, zorgde dat voor nieuwe en andere energie had ik het idee. De groep was niet zo groot, maar de interesse en het enthousiasme er niet minder om.
Het onderwerp van deze editie is MOC, Maps of Content. Ik heb dit zelf gedefinieerd als “Een inhoudsopgave als een gestructureerde kaart van ideeën en inzichten die volgens jou bij elkaar horen”. Een MOC kan visueel zijn of tekstueel, of een combinatie. MOC’s worden veel gebruikt in apps als Obsidian, Notion en aanverwante kennismanagement software.
Ik besloot om deze keer eens het spits af te bijten en mijn persoonlijke Obsidian startpagina te laten zien.

Een Map of Content kan een lijst met links zijn, maar ik bedacht dat het meer kan zijn. Als ik namelijk mijn Obsidian open zie ik dit.

Deze pagina bestaat uit een aantal elementen die als springplank dienen voor mijn werk in Obsidian. Ik kan verder naar beneden scrollen om meer blokken te zien met doorkijkjes in mijn systeem.


Ik vind het prettig om een startpagina te hebben die ik zelf graag zie. Vorm en functie zijn voor mij even belangrijk. Daarom besteed ik best wat aandacht aan de vormgeving en de stijl van de pagina. Ik ben verre van een professioneel ontwerper, maar ik probeer er wel een eigen draai aan te geven.
Degenen die gisteren aanwezig waren zien dat ik inmiddels een paar kleine veranderingen heb gemaakt. Omdat ik gisteren vertelde over mijn startpagina in plaats van er alleen naar keek, kwam ik tot het besef dat ik niet alles even hard nodig heb op een startpagina. En later in gesprekken met onder andere Remco kwam ik op een idee om er nog iets nieuws aan toe te voegen. Daar zo meer over.
Opbouw van de pagina
Let op: Voor een stap-voor-staphandleiding hoe je alles installeert en instelt, heb ik een extra blogpost gemaakt.
De pagina is opgebouwd met een aantal elementen en plugins.
• Modular CSS Layout
• Dataview
• Callout Manager
Ik maak gebruik van het AnuPpuccin theme inclusief Rainbow Folders.

Kolommen op je pagina
Met de Modular CSS Layout (via Github) snippets kan ik de twee kolommen maken met blokken. De documentatie van de snippets is behoorlijk overzichtelijk, zodat je snel al een aardig overzicht krijgt van je pagina. Tevens gebruik ik Wide View CSS van deze serie, zodat ik de content over de hele breedte van mijn scherm heb.
Elk blok bestaat uit een doorkijkje via Dataview queries. Deze plugin is voor elke serieuze Obsidian gebruiker een must-have. Je kunt met Dataview (Obsidian / Github) enorm flexibel zoekopdrachten in je verzameling notities doen en ze op allerlei manieren weergeven. Het voert te ver om er in deze blogpost diep op alle mogelijkheden in te gaan. Wel wil ik speciaal aandacht geven aan een nieuwe toevoeging op de startpagina: een random paragraaf uit de Tao Te Ching.
Random paragraaf weergeven
Ik heb de complete Tao Te Ching per hoofdstuk in mijn Frankopedia staan. Ik lees nu de vertaling en interpretatie van Ursula K. Le Guin, er zijn natuurlijk meer vertalingen en interpretaties te vinden. Met een combinatie van Javascript, Dataview en veel hulp van Claude AI, kon ik een weergave maken zoals ik wilde:
• Kies een random hoofdstuk.
• Kies daar een random paragraaf uit
• Geef deze weer met een link naar het originele bestand
• En maak een knop waarmee ik direct een nieuwe random paragraaf kan weergeven. Steeds als ik naar mijn startpagina ga, krijg ik een nieuwe vers te zien. En met een druk op de knop kan ik nog een vers lezen als ik dat wil.

Het script dat ik hier voor gebruik heb ik op Github gezet. Let op, je moet dit script in een dataviewjs-blok zetten. En het is zo op maat gemaakt voor mijn versies van de hoofdstukken, je kunt dit niet direct hergebruiken. Maar haal er je eigen inspiratie uit waar nodig.
Blokken en emoji
Met de Callout Manager (Obsidian/Github) geef ik kleuren en emoji aan de blokken. Eigenlijk is elk blok een grote callout en met de plugin kan ik eenvoudig eigen kleuren en emoji aan de blokken geven.
Dat is de manier waarop ik mijn startpagina nu maak. Ik tweak soms wat blokken, ik voeg wat toe of verwijder weer eens wat. Zo blijft het voor mij een dynamische en frisse weergave van mijn notities.
Je kunt op deze pagina de Markdown en invulling van de kolommen vinden die ik gebruik. Klik op “Raw”, kopieer en pas aan waar nodig voor je eigen invulling!
Digitale Fitheid
Dankzij de voorbeelden van andere aanwezigen kwam ik weer op nieuwe ideeën. Zo blijf ik geïntrigeerd over de visuele stijl van de Excalidraw-plugin, waar Marieke van Vliet enorm enthousiast over vertelde. Muhammed Ali Kilic gaf ons een doorkijkje in zijn Maps of Content en zijn manier van notities aan elkaar verbinden. Hij gebruikt daar alleen notities voor, en geen tags of andere systemen. Een mooi, schaalbaar en flexibel systeem. Martijn nam ons mee in zijn wereld van tovertypen, dagelijks korte updates in zijn systeem zetten en 30 jaar aan herinneringen koppelen.
De PKM avonden van de Digitale Fitheid community zijn vrij toegankelijk. Kom gerust eens langs als je meer wilt weten over de manieren waarop je je eigen digitale fitheid kunt verbeteren.
Also on Bluesky