how-to

    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.

    Animatie van de veranderende tekst

    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:

    mappen staan geordend binnen een digitale omgeving verschillende bestandsnamen tonen hun inhoud en structuur de achtergrond toont een overzicht van een computerinterface

    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 ```)

    codefragment toont een functie die een visuele weergave aanroept de omgeving lijkt op programmeer- of ontwikkelsoftware en bevat tekst die niet is getranscribeerd

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

    Een tekstuele inhoud beschrijft de zachte en taaie aard van levende dingen en de tegenstelling met dode zaken omringd door een donkere achtergrond met opvallende kleuren. Er is tekst aanwezig.

    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

    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

    Twee kolommen met tekstvakken zijn zichtbaar waarin instructies en informatie zijn geplaatst over het gebruik ervan de achtergrond is licht en eenvoudig met een zachte kleurstelling Naar dit willen.

    Drie kolommen met tekst staan naast elkaar op een lichte achtergrond elk met een titel en instructies voor inhoudselementen er zijn geen beelden of grafische afbeeldingen zichtbaar 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.

    Een document met tekst in meerdere kolommen beschrijft belangrijke secties en instructies om links en tekst te plaatsen op een lichte achtergrond met een navigatiebalk bovenaan. 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 >>

    Een document met verschillende tekstkolommen toont instructies en belangrijke notities over het plaatsen van links en teksten op een lichtgekleurde achtergrond. Er is een kader om specifieke tekst. 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!

    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!

    Screenshot van de AIdventskalender

    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?

    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

    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.

    Overview CSS Snippets

    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.

    CSS Snippets reloaded

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

    Overview CSS properties

    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!

    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.

    Frank Meeuwsen staat gebarend naast een groene ton op een podium met een banner op de achtergrond in een zaal met gordijnen

    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.

    Startpagina van mijn Obsidian

    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.

    Lijsten met taken zijn zichtbaar op een digitale interface waarin gebruikers items kunnen verwerken en beheren binnen een werkplek omgeving met kolommen voor inbox en uit te werken taken

    Een digitale interface toont recente updates aan de linkerkant met een lijst van onderwerpen en documenten aan de rechterkant die aan leesmap zijn toegevoegd in een overzichtelijke opmaak.

    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.

    Screenshot van het theme

    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.