TiddlyWiki

Die “eierlegende Wollmilchsau” der Wikis

Linux Cafe am 06.04.2022


Diese Präsentation befindet sich im Git-Repo unter presentation/files/presentation.html

vs. Brain

Hatten Sie schon mal das Gefühl,
Ihr Gehirn sei nicht groß genug,
um sich alles zu merken,
was Ihnen wichtig ist?
Willkommen bei TiddlyWiki, dem einzigartigen nicht-linearen
Web-Notizbuch, das Ihnen hilft Ihre Ideen zu sammeln,
zu strukturieren und weiterzugeben.

TiddlyWiki

TiddlyWiki besteht aus sogenannten “Tiddlern”. Die Philosophie eines Tiddlers ist es, die Möglichkeiten der Wiederverwendbarkeit zu maximieren.

Dies wird dadurch erreicht, dass Informationen in gerade so kleine Einheiten “zerlegt” werden, dass sie für sich genommen, noch Sinn machen.

Warum TiddlyWiki?

Ich habe viele Wikis ausprobiert. Obwohl es sehr gute Ansätze gibt, hat man meist das Problem, dass man einen Server oder Dienst benötigt um das Wiki zu benutzen oder zu betreiben.

Die Inhalte werden meistens in einer Datenbank gespeichert und sind nur verfügbar wenn mehrere Dienste (z.B. Webserver + Datenbank) funktionieren.

TiddlyWiki in seiner einfachsten Form besteht nur aus einer einzigen HTML-Datei, d.h. alles was ich benötige ist ein aktueller HTML5-Browser.

Tiddlywiki ist sehr zukunftssicher. Ein einmal erstelltes TiddlyWiki (eine HTML-Datei) wird auch in einigen Jahren noch von jedem HTML5 Browser darstellbar sein.

Darum TiddlyWiki !

  • von jedem bedienbar
  • TiddlyWiki kann leicht an die eigenen Bedürfnisse angepasst werden
  • Bilder und andere Dateien werden Base64-kodiert in der HTML-Datei gespeichert
  • Export einzelner Tiddler (z.B. zur Weitergabe) möglich
  • Upgrades sind nicht nötig aber möglich und sehr einfach.
  • Alles in einer Datei aber jederzeit wieder “zerlegbar”
  • Import von Bildern und Inhalten per Drag & Drop möglich

Darum erst recht TiddlyWiki !

  • Portabel
  • bei Bedarf verschlüsselt (standalone Version)
  • leicht zu bedienen
  • einfach zu erlernen
  • modular und hochgradig anpassbar
  • Einfache und erweiterte Suche
  • sehr gute Dokumentation
  • Unterstützung von Bildern
  • funktioniert auch auf Mobilgeräten

Anwendungsmöglichkeiten

  • Aufgaben-Manager
  • Notizblock
  • Manager für Teamprotokolle oder Chatlogs
  • Persönliches Memo
  • Tägliches Journal
  • Code-Notizen
  • Persönliche Gesundheitsakte
  • Dokumentationen

Plattformen

  • TiddlyWiki in einer HTML-Datei
  • TiddlyDesktop zum einfacheren Editieren und zur Verwaltung vieler TiddlyWiki-HTML-Dateien
  • TiddlyWiki im Beaker Browser
  • TiddlyWiki on Node.js - die “Server-Version”

Demo - TiddlyWiki self-contained (1 Datei)

  • die “sich-selbst-beinhaltende” Variante von TiddlyWiki besteht aus nur einer HTML-Datei. Sie kann mit jedem aktuellen Browser geöffnet werden.

  • Nachteil beim Öffnen mit dem Browser: Die Datei muss bei Änderungen ständig “überspeichert” werden.

Demo - TiddlyDesktop

Zur einfacheren Verwaltung von lokalen TiddlyWiki-HTML-Dateien empfiehlt sich die Software TiddlyDesktop. Sie erspart das ständige Überspeichern der HTML-Datei und legt automatisch Sicherungskopien an.

https://github.com/Jermolene/TiddlyDesktop

Demo - TiddlyWiki on Node.js

  • Die “Server-Variante” von TiddlyWiki ist dann sinnvoll, wenn Tiddler einer größeren Menge an Personen zugänglich gemacht werden sollen, z.B. als zentrale Dokumentations-Plattform in einer Firma.

  • Alle können dann auch gleichzeitig neue Tiddler anlegen oder Tiddler bearbeiten. Rechteverwaltung ist möglich

  • Das gleichzeitige Bearbeiten des gleichen Tiddlers ist nicht möglich.

  • Aus der “Server-Variante” kann wieder eine einzelne TiddlyWiki-HTML-Datei (self-contained) erstellt werden und vieles mehr!

Demo - TiddlyWiki mit Beaker Browser

Eigentlich für einen ganz anderen Anwendungsfall gebaut ermöglicht es der “Beaker Browser” ebenfalls eine lokale TiddlyWiki-Datei sauber zu managen.

Zusätzlich hat er das Feature das Wiki dann mit anderen Beaker-Browser-Nutzern zu teilen (wenn gewünscht).

https://beakerbrowser.com/

Aber jetzt geht’s los!

Ich werde nun zeigen, wie ich aus einem leeren TiddlyWiki meine derzeitige Vorlage erstellt habe.

Bitte beachten, dass das Tiddlywiki ggf. immer überspeichert werden muss, wenn Änderungen durchgeführt wurden.

01 TiddlyWiki herunterladen

Erstelle nach dem Herunterladen eine Kopie der Datei empty.html und benutze die Kopie für die weiteren Schritte.

02 Markdown und Highlight Plugin

  • Control-Panel → Plugins → Get more plugins → Suchfeld “Markdown”
  • Markdown und Highlight Plugin installieren.

03 Grundeinstellungen

  • Sprachen downloaden:
    Control-Panel → Plugins → Get more plugins → Languages → Suchfeld “deutsch” → Paket “de-DE Deutsch (Deutschland)” installieren

  • Seitenleiste:
    Control-Panel → Design → Theme Tweaks → Seitenleiste Darstellung → “Variable Story, fixe Seitenleiste” einstellen

  • Titel und Untertitel:
    Control-Panel → Info → Basis → Titel und Untertitel usw. einstellen

04 TiddlyWiki “Tools” konfigurieren

  • Seitenleiste → Tools → z.B. folgende Auswahl:

05 Der Reiter “Inhalt”

  • neuer Tiddler mit Tag: $:/tags/SideBar
Titel      : Inhalt
Neuer Tag: $:/tags/SideBar
Typ        : -
Text       :

<!-- unterhalb kopieren -->
Wiki Content
<div class="tc-table-of-contents">
<<toc-selective-expandable "Inhalt" "!title[$:/config/NewJournal/Tags]sort[modified]">>
<!-- <<toc-selective-expandable "Inhalt" "!title[$:/config/NewJournal/Tags]sort[title]">> -->
</div>
<!-- oberhalb kopieren -->

zusätzlich: 
Feld einfügen  : list-before
Feld Text / Wert: $:/core/ui/SideBar/Open

06 Der Bereich “Aufgaben” A

  • Tiddler 01 “Aufgaben” mit Tag: Inhalt
Title       : Aufgaben
tag name(s) : Inhalt
Typ         : -
Text        : -

06 Der Bereich “Aufgaben” B

  • Tiddler 02 “ToDo” mit Tag: Aufgaben
Title       : ToDo
tag name(s) : Aufgaben
Typ         : -
Text        :
<!-- copy below here -->
<$list filter='[!has[draft.of]tag[task]!tag[done]sort[created]]'>
<$checkbox tag='done'> <$link to={{!!title}}>
<$view field='created' format='date' template='DDth mmm 0hh:0mm'/> - <$view field='title'/><br>
</$link>
</$checkbox>
</$list>
<!-- copy above here -->

06 Der Bereich “Aufgaben” C

  • Tiddler 03 “Erledigt”
Title       : Erledigt
tag name(s) : Aufgaben
Tag         : -
Text        :
<!-- copy below here -->
<$list filter='[!has[draft.of]tag[task]tag[done]sort[created]]'>
<$checkbox tag='done'> ~~<$link to={{!!title}}><$view field='created' format='date' template='DDth mmm 0hh:0mm'/> - <$view field='title'/></$link>~~</$checkbox><br>
</$list>
<!-- copy above here -->

06 Arbeiten mit “Aufgaben” D

  • Um eine neue Aufgabe hinzuzufügen, erzeuge einfach einen neuen Tiddler und weise ihm den Tag task zu

  • Beobachte dabei die Bereiche “Todo” und “Erledigt” wenn du die Checkboxen benutzt.

07 Der Bereich “Journal”

  • Erstellen des Bereichs “Journal” mit Tag: Inhalt
Titel       : Journal
Neuer Tag   : Inhalt
Typ         : -
Text        :
  • Nun wird beim Erstellen eines neuen Tiddlers vom Typ “Journal” automatisch ein Tiddler mit dem aktuellen Datum und dem Tag Journal erzeugt, in den wir unser “Tages-Journal” schreiben können. - Demo

08 Umgang mit Bildern

  • Bilder können ganz einfach per Drag & Drop zum Wiki hinzugefügt werden.
  • Sie sollten ihren Bildern immer einen Tag hinzufügen, z.B. image und den Namen ggf. anpassen.
  • “Bild-Tiddler” können mit folgendem Syntax in Tiddler eingefügt werden:
[img[Motovun Jack.jpg]]
[img[https://tiddlywiki.com/favicon.ico]]
[img[An explanatory tooltip|Motovun Jack.jpg]]
[img width=32 [Motovun Jack.jpg]]
[img width=32 class="tc-image" [Motovun Jack.jpg]]
{{Motovun Jack.jpg}}
  • Mit dem Markdown-Plugin ist auch der Markdown-Syntax möglich
  • Es wird immer der Name des Bild-Tiddlers angegeben
  • Der “Transclusion-Syntax” “{{Jack.jpg}}” erlaubt keine Zusatzparameter - Demo

09 Der Bereich “SysTools”

  • “SysTools” Tiddler im Bereich “Inhalt” mit dem Tag Inhalt
Titel : SysTools
Tag   : Inhalt
Text  :
<!-- copy below here -->
<$list filter='[!has[draft.of]tag[SysTools]sort[title]]'>
<$link to={{!!title}}>
<$view field='title'/><br>
</$link>
</$list>
<!-- copy above here -->

09a “* BILDER zeige Systembilder”

  • “* BILDER zeige Systembilder” Tiddler mit dem Tag SysTools
Titel : * BILDER zeige Systembilder
Tag   : SysTools
Typ   : -
Text  :
<!-- copy below here -->
<table>
<tr>
<th>Schatten-Tiddler Name</th>
<th>gerendertes Bild</th>
</tr>
<$list filter="[all[shadows]sort[title]prefix[$:/core/ui/Buttons/]]" variable=info>
<tr>
<td><$link to=<<info>>></$link></td>
<td><$transclude tiddler=<<info>>/></td>
</tr>
</$list>
</table>

<table>
<tr>
<th>Schatten-Tiddler Name</th>
<th>Gerendertes Bild</th>
</tr>
<$list filter="[all[shadows]sort[title]prefix[$:/core/images/]]" variable=info>
<tr>
<td><$link to=<<info>>></$link></td>
<td><$transclude tiddler=<<info>>/></td>
</tr>
</$list>
</table>
<!-- copy above here -->

09b “* BILDER zeige importierte Bilder”

  • “* BILDER zeige importierte Bilder” Tiddler mit dem Tag SysTools
Title       : * BILDER zeige importierte Bilder
tag name(s) : SysTools
Typ   : -
Text        :
<!-- copy below here -->
<table>
<tr>
<th>Tiddler Name</th>
<th>Image rendered</th>
</tr>
<$list filter="[!has[draft.of]tag[image]sort[created]]" variable=info>
<tr>
<td><$link to=<<info>>></$link></td>
<td><$transclude tiddler=<<info>>/></td>
</tr>
</$list>
</table>
<!-- copy above here -->

09c “* TIDDLER ohne Verschlagwortung”

  • “* TIDDLER ohne Verschlagwortung” Tiddler mit dem Tag SysTools
Title       : * TIDDLER ohne Verschlagwortung
tag name(s) : SysTools
Typ   : -
Text        :
<!-- copy below here -->
<table>
<tr>
<th>Tiddlers without Tags</th>
</tr>
<$list  filter="[untagged[]!prefix[$:]]" variable=info>
<tr>
<td><$link to=<<info>>></$link></td>
</tr>
</$list>
</table>
<!-- copy above here -->

10 Der Bereich “Dokumentationen”

  • Wir erstellen einen neuen Tiddler “Dokumentationen” mit dem Tag Inhalt
Title       : Dokumentationen
tag name(s) : Inhalt
Typ         : -
Text        :

Alle zukünftigen Tiddler denen wir den Tag Dokumentationen zuweisen erscheinen unter “Dokumentationen”.

11+12 Farbige Stempel + Markdown-Tabellen-Stempel

  • Man kann in den TiddlyWiki-Editor eigene Stempel integrieren
  • Es sind /prefix und /suffix Stempel möglich
  • Zwecks Übersichtlichkeit sollte auch den Stempeln ein Tag zugwiesen werden, z.B. STEMPEL
  • In den Unterlagen befindet sich die Datei stempel.json mit allen im Demo benutzten Stempeln
  • https://github.com/boschkundendienst/linux-cafe-april-2022.git
  • Demo

13 Eine Auswahl von Tiddlern exportieren

  • Mit dem Werkzeug “Tools → Erweiterte Suche” lässt sich sehr schnell eine Auswahl an Tiddlern exportieren

  • Am besten mit einem “Filter” arbeiten, z.B. [tag[STEMPEL]]

  • Mit dem kleinen Export-Icon können dann alle gefilterten Tiddler auf einmal in eine .json-Datei exportiert werden

  • Demo

14 Daten in Tiddlern

Es gibt 2 Standard-Formate:

  • Wörterbuch-Tiddler (Dictionary Tiddler)
okt:31
nov:30
dez:31
  • JSON-Tiddler
{"okt":31,"nov":30,"dez":31}
  • Auslesen mit Transklusion, z.B.
{{Tiddlername##okt}} → 31
{{Tiddlername##nov}} → 30
{{Tiddlername##dez}} → 31
  • Demo

15 Die Startseite

TiddlyWiki kann automatisch ein Inhaltsverzeichnis (TOC) generieren

  • Erstelle folgenden Tiddler mit dem Namen “Startseite”
Title: Startseite
Tag: -
Typ: -

<!-- copy below -->
<div class="tc-table-of-contents">
<<toc-expandable "Inhalt" "sort[title]">>
</div>
<!-- copy above -->
  • Dieser Tiddler zeigt automatisch alle mit dem Tag “Inhalt” versehenen Tiddler an.

  • Diese “Startseite” kannst Du nun auch in den TiddlyWiki-Grundeinstellungen als “Standard-Tiddler” festlegen

  • Demo

16 Tutorial in “Play with Docker” ausprobieren

Für dieses Tutorial wurde eigens ein Github Repo geschaffen. Es enthält alles was man benötigt um ein TiddlyWiki beim Dienst Play with Docker laufen zu lassen (4h Limit).

Klone dazu einfach das Repo und arbeite im enthaltenen TiddlyWiki (presentation/files/linux-cafe-04-2022.html) einfach den Punkt 16 ab

Demo

17 Weiterführende Informationen

TiddlyWiki Homepage

TiddlyWiki Upgrader

Deutsche Version von Tiddlywiki herunterladen

A Gentle Guide to TiddlyWiki

TW5 Magick - TiddlyWiki Tricks

Die Seitenleiste beim Start automatisch ausblenden

Videos von Francis Meetze

The End




<tiddlywiki>The End</tiddlywiki>


Q & A




<tiddlywiki>Fragerunde</tiddlywiki>