instant-thinking.de

just enough to get you started and leave you confused

Hochzeitstag

| Kommentare

Heute vor sieben1 Jahren haben Kathi und ich geheiratet.

Ich wünsche der besten Ehefrau der Welt und mir eine wundervolle Kupferhochzeit2 und freue mich auf das nächste Jahr im aufregenden Hafen der Ehe.

  1. SIEBEN!

  2. Es gibt wirklich wunderliche Listen im Internet…

3

| Kommentare

Heute vor drei Jahren kam Nina auf die Welt. Und da so ein zweites Kind unfassbarerweise immer noch schneller groß wird als das erste, kann ich auch gar nicht so recht sagen, wo die Zeit geblieben ist.

Tochterkind, du hast deinen eigenen Kopf mit deinen eigenen Vorstellungen und das ist auch ganz genau richtig so. Dazu hast du im letzten Jahr auch deine eigene Brille bekommen. Für noch mehr Durchblick in den kommenden Zeiten. Mit drei Jahren wird das alles sicher noch mal interessanter mit dir werden.

Allesalles Liebe zu deinem dritten Geburtstag, rock on.

Octopress und Piwik

| Kommentare

Nachdem ich im letzten Post berichtet hatte, wie man ein Piwik auf Uberspace installiert1 geht es nun darum, eine Website2 mit dem notwendigen Piwik-Tracking-Code auszustatten.

Websites tracken mit Piwik

Diesen kann man manuell in der Piwik-Administration zusammenklicken und dann manuell auf allen zu trackenden Seiten einfügen aber das kann ja niemand wollen.

Daher sammelt die Piwik-Integrations-Site Links zu Plugins für mehr als 65 verschiedene Systeme, die dann automatisch dafür sorgen dass der Tracking-Code auf allen Seiten erscheint. Da sind sehr große und bekannte Systeme dabei wie Wordpress, Typo3 und Drupal. Auch etwas exotischere Kandidaten wie Hudson/Jenkins und GetSimple sind verfügbar.

Da werden also viele Leute sehr schnell glücklich werden.

Nun geht es hier in erster Linie eben um meine Seite und die wird immer noch mit einem antiken Octopress betrieben und das ist auf der Integrations-Site von Piwik nicht verzeichnet.

octopress-piwik auf GitHub

Der erste Google-Treffer für “piwik octopress” liefert dann auch einen guten Startpunkt: Das GitHub-Repo octpress-piwik von jcbedier. Der letzte Commit stammt aus dem Jahr 2014 aber grundsätzlich ist hier schon alles notwendige drin.

Über die Ansicht des Netzwerks des Repos habe ich dann den Fork des Users paskal gefunden, der den allgemeinen Teil des Tracking-Codes Ende November auf den aktuellen Stand gebracht hat.

OpenSource at work… Man muss es einfach lieben.

Installation und Konfiguration von octopress-piwik

Genau diesen Stand der Dinge habe ich dann auch wie folgt für instant-thinking.de verwendet.

Piwik-Variablen in _config.yml einfügen

Als erstes werden die erforderlichen Werte für die Site in der zentralen Octopress-Konfigurationsdatei _config.yml eingesetzt.

_config.yml
1
2
3
# Piwik
piwik_url: piwik.instant-thinking.de
piwik_siteid: 1

Die piwik_url ist einfach die Website, auf der euer Piwik läuft und die piwik_siteid ist die durch Piwik vergebene Nummer der Website.

Piwik-Code inkludieren

Als nächstes wird die Stelle für den Einbau des Tracking-Codes bestimmt. Das geschieht hier in der after_footer.html, die durch Octopress in allen Posts inkludiert wird. Direkt nach dem Disqus-Plugin folgt hier nun das Piwik-Plugin in der Zeile 2:

source/_includes/after_footer.html
1
2
3
{% include disqus.html %}
{% include piwik_analytics.html %}
{% include custom/after_footer.html %}

Was jetzt noch fehlt ist die Datei mit dem Tracking-Code an sich. Daher muss nun die piwik_analytics.html aus dem Repo auch im Verzeichnis source/_includes/ zum liegen kommen.

Und das war es dann auch schon. Ein rake generate weiter wird der Tracking-Code an der passenden Stelle eingebaut. Im Safari-Web-Inspector schaut das dann so aus:

Fortan wird der Code also mit jedem Seitenaufruf auf instant-thinking.de ausgeführt und zählt den Besuch. Klasse!

Production vs. Development

Immer wenn ich gerade einen Post schreibe, diesen aber noch nicht veröffentlich habe, benutze ich die Octopress Vorschau-Funktion um mir den aktuellen Stand direkt neben meinem Editor im Browser anzuschauen. Im Moment schaut das genau so aus:

Das ist super, ich mag das sehr so zu schreiben.

Das Problem ist, dass jeder Aufruf der Vorschau nun auch den Piwik-Code aufruft und dieser die Statistiken für instant-thinking.de mit Einträgen füttert die zu einem Post gehören, den es noch gar nicht wirklich gibt. Dass ich damit außerdem den uninteressantesten Besucher der Welt3 überproportional häufig in die Zahlen bekomme ist natürlich auch nicht gut.

Was also her muss ist eine Differenzierung zwischen der produktiven Website im Internet und dem lokalen Vorschaumodus.

Ich nahm eigentlich an, dass das ein gelöstes Problem sein müsste aber es scheint doch nicht ganz einfach zu sein

Also dachte ich mir, bevor ich mit Piwik-Plugins und der entsprechenden Config rumhantiere wäre es doch eigentlich eine gute Idee, das Problem direkter anzugehen.

Octopress ist ja im Prinzip Jekyll und Jekyll kann ein Jekyll environment spezifizieren, welches dann in Liquid-Tags abgefragt werden kann.

So weit so gut, nur ist mein Jekyll halt antik4 und kennt diese Option nicht. Unter der Auflistung von jekyll --help habe ich aber die Option --url [URL] Set custom site.url gefunden. Die ist weniger elegant, lässt sich aber in Kombination mit rake für den hier vorliegenden Zweck im Prinzip genauso verwenden wie das fancy environment.

Den Aufruf von jekyll in dem preview-Task in meinem Rakefile habe ich daher um die Option --url 'http://localhost:4000' ergänzt. Der diff des Tasks schaut so aus:

Preview Task aus Rakefile
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
desc "preview the site in a web browser"
task :preview do
  raise "### You haven't set anything up yet. First run `rake install` to set up an Octopress theme." unless File.directory?(source_dir)
  puts "Starting to watch source with Jekyll and Compass. Starting Rack on port #{server_port}"
  system "compass compile --css-dir #{source_dir}/stylesheets" unless File.exist?("#{source_dir}/stylesheets/screen.css")
-  jekyllPid = Process.spawn({"OCTOPRESS_ENV"=>"preview"}, "jekyll --auto")
+  jekyllPid = Process.spawn({"OCTOPRESS_ENV"=>"preview"}, "jekyll --auto --url 'http://localhost:4000'")
  compassPid = Process.spawn("compass watch")
  rackupPid = Process.spawn("rackup --port #{server_port}")

  trap("INT") {
    [jekyllPid, compassPid, rackupPid].each { |pid| Process.kill(9, pid) rescue Errno::ESRCH }
    exit 0
  }

  [jekyllPid, compassPid, rackupPid].each { |pid| Process.wait(pid) }
end

Den Piwik-Code in der piwik_analytics.html habe ich dann in eine weitere if-Bedingung5 gewickelt die ihn nur dann inkludiert, wenn die site.url nicht http://localhost:4000 ist:

source/_includes/piwik_analytics.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{% if site.piwik_url %}
{% if site.url != "http://localhost:4000" %}
<!-- Piwik -->
<script type="text/javascript">
  var _paq = _paq || [];
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//{{ site.piwik_url }}/";
    _paq.push(['setTrackerUrl', u+'piwik.php']);
    _paq.push(['setSiteId', '{{ site.piwik_siteid }}']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
  })();
</script>
<noscript><p><img src="//{{ site.piwik_url }}/piwik.php?idsite={{ site.piwik_siteid }}" style="border:0;" alt="" /></p></noscript>
<!-- End Piwik Code -->
{% endif %}
{% endif %}

Das ganze klappte so verblüffend gut, dass ich das Plugin-Repo auf Github forkte und die beiden Vorgänger mit Pull requests bedachte.

Das führte nach dem Merge zu einem interessanten Network-Graph und außerdem dazu, dass im octpress-piwik Haupt-Repo von jcbedier nun der aktuelle Piwik-Code enthalten ist und meine kleine Erweiterung für alle geneigten Octopress-User nutzbar ist.

  1. Durchaus lesenswert, ohne ein fertig installiertes Piwik macht dieser Post hier auch keinen sonderlich großen Sinn, macht er nicht?

  2. Diese Website hier um genau zu sein…

  3. nämlich mich…

  4. Die Version hier ist 0.11.0, aktuell ist 3.4.2. Räusper

  5. Ein if and if-Konstrukt scheint es in Liquid nicht zu geben…

Piwik auf Uberspace installieren - Edition Early 2017

| Kommentare

Piwik ist eine Open Source Lösung um Zugriffe auf Websites zu loggen und zu analysieren. Dabei setzt Piwik sehr auf Datenschutz und anonymisiert schon im Auslieferungszustand die IP-Adressen der Besucher. Ebenfalls out-of-the-box unterstützt1 Piwik Do-not-Track Einstellungen. Und natürlich bleiben die Daten in der eigenen Datenbank. Bereits 2011 wurde Piwik vom Unabhängigen Landeszentrum für Datenschutz Schleswig-Holstein empfohlen. Das ULD hat damals auch Hinweise und Empfehlungen zu Piwik erstellt, die auch heute noch gut und richtig sind. Da lohnt sich der ein oder andere Blick, da wird man nicht dümmer von.

Das Webinterface ist außerdem richtig gut gelungen und lässt sich gut und flüssig bedienen.

Piwik ist mithin ein Neugiertool für Websitebetreiber, welches auch die datenschutzrechtlichen Aspekte der Besucher berücksichtigt. Gute Sache.

Ich hatte vor sehr viel Zeit Google Analytics eingesetzt und dann damals bei der Migration auf Octopress damit aufgehört und einen Eintrag names Piwik für instant-thinking.de auf meine ToDo-Liste gesetzt. Fast genau fünf Jahre später ist das jetzt auch schon fertig…

Die Anforderungen von Piwik passten nicht so ganz genau zu den aktuell standardmäßig vorhandenen Bedingungen bei Uberspace und daher schreibe ich im folgenden auf, wie ich Piwik im Februar 2017 auf Uberspace eingerichtet habe.

Piwik herunterladen

Als allererstes habe ich Piwik heruntergeladen. Ob man das letztlich in einer Subdomain2 oder in einem Unterordner haben möchte ist eigentlich recht egal.

Der Download funktioniert am leichtesten per wget https://builds.piwik.org/piwik.zip im gewünschten Verzeichnis. Im Anschluss noch entpacken und die Datei How to install piwik.html löschen.

Nach dem Aufruf der Piwik-URL hatte Piwik dann aber über die PHP-Version gemeckert…

PHP-Version anpassen

So wie im Uberspace-Wiki beschrieben lässt sich die PHP-Version über die Datei ~/etc/phpversion einstellen. Nimmt man hier jedoch die von Piwik empfohlene 7er Version, wirft Piwik mit 500er Fehlern um sich. Daher stellt man am besten wie folgt die 5.6er Version ein:

~/etc/phpversion
1
2
3
$ cat ~/etc/phpversion
## 2013-11-18 /usr/local/sbin/uberspace-account-create.sh
PHPVERSION=5.6

Damit ist Piwik aber noch nicht grundsätzlich zufrieden. Zusätzlich muss eine eigene php.ini in ~/etc/ angelegt werden3:

php.ini kopieren
1
test -f ~/etc/php.ini || cp -a /package/host/localhost/php-$PHPVERSION/lib/php.ini ~/etc/

Und dort dann die folgende Option raussuchen und durch das entfernen des Semikolons aktivieren:

raw_post_data Option
1
always_populate_raw_post_data = -1

Zum Schluss den PHP-Interpreter mit killall php-cgi neu starten. Damit ist PHP fertig konfiguriert. Die Systemprüfung sollte nun zufrieden sein:

MariaDB Datenbank erstellen

Piwik benötigt außerdem eine Datenbank. Entweder MySQL ab Version 5.5 oder den Nachfolger MariaDB. Auf Uberspace wird MySQL nur in der Version 5.1 angeboten. Glücklicherweise gibt es bis zum nächsten OS-Update eine4 Übergangslösung mit der MariaDB 10.0.

Die Benutzung dieser Übergangslösung hat zur Folge, dass es keinen direkten Zugriff auf die Backups der Datenbank gibt und dass die DB im Frühjahr 2017 noch mal auf die dann offizielle Lösung migriert werden muss.

Wenn das keine Showstopper sind feuert man einfach den Befehl uberspace-setup-mariadb ab und schon wird eine neue MariaDB aufgesetzt. Die Verbindungsdaten werden in ~/.my.mariadb.cnf abgelegt.

Um eine neue Datenbank für Piwik anzulegen wird nun die MySQL-Shell mit mysql --defaults-file=~/.my.mariadb.cnf gestartet. Die anzulegende Datenbank muss mit eurem Uberspace-Accountnamen gefolgt von einem Unterstrich beginnen. Ein passendes Beispiel für den Accountnamen hugo wäre etwa mysql> CREATE DATABASE hugo_piwik;.

Außerdem zu beachten ist, dass die Übergangslösung mit der loopback-IP und dem Port 33075 arbeitet. Damit Piwik den Port mitbekommt muss man ihn direkt nach dem Hostnamen, getrennt mit einem Doppelpunkt angeben. User und Passwort könnt ihr einfach aus eurer ~/.my.mariadb.cnf abschreiben. Das ganze sollte dann ungefähr so aussehen:

Und das war es auch schon mit der grundsätzlichen Einrichtung, die restliche Basis-Installation geht ziemlich geradeaus vonstatten.

Previous Work

Als Grundlage für die erfolgreiche Installation von Piwik dienten mir vor allem die herausragend guten Dokumentationsseiten von Piwik und Uberspace. Die sind beide wirklich großartig gemacht. Außerdem halfen mir die Posts von Rob Tranquillo6 und intux7 sehr bei dem Einstieg in die Materie.


Ich hoffe, dass mein Post in dieser Tradition hilfreich sein kann. Wenn mein Piwik dann von der Übergangslösung weitergezogen werden muss werde ich dann auch wieder berichten.

Im nächsten Post wird außerdem die zweckmäßige Einbindung einer auf Octopress basierenden Website in Piwik erklärt.

  1. Und beachtet…

  2. So habe ich das gemacht…

  3. So noch nicht vorhanden…

  4. Wie immer hervorragend dokumentierte…

  5. anstelle des Standards 3306…

  6. Aus 2015…

  7. Aus 2016…

QuickLinks vom 12. Januar bis zum 27. Februar

| Kommentare

Meine pinboard.in-Links vom 12. Januar bis zum 27. Februar:

  • Macmoji - Slack/GitHub/Trello emoji for your mac! 😁 💥 💻
  • Vico - is an evolving programmers’ editor with vi key bindings and support for TextMate bundles.
  • Find Safari Tabs with AppleScript - If you sometimes find yourself with so many tabs in Safari that you can’t find things and end up opening them again in a new tab, this script can help.
  • fritz-speed - The fritz-speed scripts query the TR-064 interface of a Fritz!Box using the fritzconnection package and then uses RRDtool to collect, aggregate and graph the data.
  • Fluor - is a tool that allows you to automatically change the behavior of the keyboard’s fn keys depending on the active application.
  • PaceCoach - optimizes your songs to match your running cadence and keep you on pace. Create a customized playlist of any songs you want, set your desired tempo, and PaceCoach will automatically adjust the tempo of your music to match your pace. Import your Spotify playlists or simply use your own local music. PaceCoach can change the tempo without changing the pitch, so the song is exactly as the artist record it, only now at a tempo that you can run to comfortably!
  • Miniflux - is a minimalist open source RSS reader and compatible with the Fever API. It features a responsive design and works with your smartphone, tablet or desktop.
  • Hyper - is a JS/HTML/CSS Terminal for Linux, Windows and macOS. The goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards.
  • iCepa - is an iOS system-wide VPN Tor client. It uses Tor.framework to manage its Tor instance, and tun2tor to bridge VPN traffic to Tor. The project is in progress, and currently alpha-quality.
  • tapiriik - synchronizes your fitness activities between Garmin Connect, Runkeeper, Strava, TrainingPeaks, SportTracks.mobi, Endomondo, RideWithGPS, TrainerRoad, Motivato, Velo Hero, Epson RUNSENSE, Dropbox, and Smashrun (your heart rate, cadence, power, and temperature data syncs too).

Klacker-Header in Gedenken an Terry Pratchett

| Kommentare

Auf der Scheibenwelt gibt es ein Semaphorennetzwerk. Ein mechanisches System aus Türmen zur scheibenweiten Nachrichtenübertragung. Durch Klappen werden die Nachrichten kodiert und von Turm zu Turm weitergereicht1. Erfunden wurde es von Robert Liebherz.

Aufgrund des Geräuschs, das beim auf- und zuklappen der Klappen entsteht, werden die Türme Klacker genannt.

Aus dem ursprünglichen Klackersystem entwickelte Klaus Liebherz, der Sohn des ursprünglichen Erfinders, den Großen Strang, kam aber dann durch einen rätselhaften Unfall ums Leben.

Sein Vater fügte daraufhin seinen Namen in den Overhead der Klacker ein und kodierte ihn mit GNU. Was bedeutet:

  • G: Leite die Nachricht weiter
  • N: Logge die Nachricht nicht
  • U: Wenn das Ende der Verbindung erreicht ist, sende die Nachricht wieder zurück

Das ganze findet nur im Overhead der Nachrichten statt, alle regulären Nachrichteninhalte bleiben unverändert. Eine tolle Idee.

Ein Mann ist nicht tot, solange sein Name gesprochen wird.

Ab die Post Prolog Kapitel 4 - Seite 96

Und weil Terry Pratchett traurigerweise 2015 verstarb aber das Internet tollerweise voller Fans der Scheibenwelt ist, wurde aus einem r/discworld Reddit-Thread heraus die Website GNU Terry Pratchett erstellt. Dort kann man beliebigen Text in Klacker-Nachrichten kodieren.

Es wird aber auch und vor allem erklärt, wie man für die verschiedensten Serversysteme2 einen X-Clacks-Overhead konfiguriert.

Wenn man der Anleitung für einen Apache-Webserver folgt und die .htaccess um die folgenden Zeilen erweitert:

.htaccess mit Klacker Overhead
1
2
3
<IfModule headers_module>
  header set X-Clacks-Overhead "GNU Terry Pratchett"
</IfModule>

Dann liefert der Webserver fortan in jeder Antwort nicht nur die angefrage Website aus, sondern auch den Inhalt des X-Clacks-Overhead. Wenn man dann genau hinschaut, kann man das auch sehen:

Um das genaue Hinschauen etwas einfacher zu machen, wurde sogar eine Chrome Browser Extension und ein Firefox Add-on entwickelt. Da passiert aber erst einmal genau nichts, nur ein dunkles Klacker-Icon wird angezeigt.

Landet man aber auf einer Website, die den Klacker-Overhead ausliefert, wird der Text und der Klacker-Code angezeigt:

Ich bin da ja vielleicht etwas merkwürdig, aber ich finde das wirklich wundertoll. Danke Internet, danke Sir Terry.

(via: Arno Welzel)

  1. Wer sich an das allseits bekannte und beliebte Internet auf diesem Planeten erinnert fühlt denkt genau in die richtige Richtung…

  2. Die natürlich auch auf diesem Planeten einiges an Overhead für die Nachrichten benötigen…

6

| Kommentare

Heute vor sechs Jahren kam Linus auf die Welt.

Aus dem kleinen Bündel Mensch ist mittlerweile ein angehendes Schulkind geworden. Sechs Jahre sind verflogen. Etwas lesen, etwas schreiben, rechnen, die Uhr, Wackelzähne, Pokémon Go, Gruppensprecher, Seepferdchen, angehende Bronze und sogar die ersten Meter Radfahren ohne die Stützräder1 waren im vergangenen Jahr große Themen.

Es werden noch einige folgen. Die Vorbereitungen für die Schule laufen ja gerade erst an, es wird mit an Sicherheit grenzender Wahrscheinlichkeit nicht langweilig.

Linus, Sohn, wir haben sehr großes Glück dich zu haben. Mache so weiter, erlebe die letzten Tage als Großer in deinem Kindergarten und freue dich auf die Anfangszeit als i-Dötz in der Schule. Das wird großartig, du wirst das toll machen.

Es fällt mir sehr schwer, mir auszumalen was du heute in einem Jahr wieder an Ideen und Wissen aufgesogen haben wirst. Um so mehr freue ich mich drauf, es heraus zu finden.

Jetzt aber allesalles Gute & Liebe zu deinem sechsten Geburtstag.

  1. Wir hatten schon nicht mehr damit gerechnet, von wem kann er das nur haben?

QuickLinks vom 18. November bis zum 12. Januar

| Kommentare

Meine pinboard.in-Links vom 18. November bis zum 12. Januar:

  • Munki - is a set of tools that, used together with a webserver-based repository of packages and package metadata, can be used by OS X administrators to manage software installs (and in many cases removals) on OS X client machines.
  • ripgrep - is a line oriented search tool that combines the usability of The Silver Searcher (an ack clone) with the raw speed of GNU grep. ripgrep works by recursively searching your current directory for a regex pattern. ripgrep has first class support on Windows, Mac and Linux, with binary downloads available for every release.
  • MediathekViewWeb - ist eine simple, alternative Oberfläche für die Filmlisten des MediathekView Projekts.
  • InSpec - is compliance as code – a human-readable language for automating the continuous testing and compliance auditing of your entire infrastructure. You can also use it to verify if your servers and applications are configured correctly.
  • TagSpaces - is an open source personal data manager. It helps you organize and browse your files on every platform.
  • Paru - is a simple Ruby wrapper around pandoc, the great multi-format document converter. Paru supports automating pandoc by writing Ruby programs and using pandoc in your Ruby programs. Paru also supports writing pandoc filters in Ruby.
  • hilite.me - converts your code snippets into pretty-printed HTML format, easily embeddable into blog posts, emails and websites.
  • Mail-in-a-Box - Mail-in-a-Box lets you become your own mail service provider in a few easy steps. It’s sort of like making your own gmail, but one you control from top to bottom. Technically, Mail-in-a-Box turns a fresh cloud computer into a working mail server. But you don’t need to be a technology expert to set it up.
  • XKPasswd - is a secure memorable password generator inspired by xkcd #936.
  • Drop to GIF - Zero-click movie to GIF conversion. Select a folder to watch and every movie saved or moved into that folder will be converted to an animated GIF.

2016 in VDSL-Zahlen

| Kommentare

Eine FritzBox kann einmal im Monat eine Mail versenden in der sie eine Übersicht über alle aufgelaufenen Verbindungsdaten hübsch aufbereitet. In diesem Fall interessieren die Telefonverbindungen, Signalraten und sonstiges Zeugs nicht so sehr. Vielmehr sind die übertragenen Datenvolumina Thema dieses Posts.

Einstellen lässt sich der Mailversand ziemlich einfach über System → Push Service1, die entsprechende Option ist die FRITZ!Box-Info.

Von Michel hatte ich nach seinem 2015er Zahlen-Post im letzten Januar ein praktisches Tabellentemplate erhalten, in das ich nun nach seinem Vorbild die Auswertungen der FritzBox eingetragen habe2. Durch seinen aktuellen 2016er-Zahlen-Post wurde ich nun wieder daran erinnert, danke Michel!

Die Daten des Jahres 2016 schauen hier aus wie folgt, die Spitzenreiter sind jeweils fett ausgezeichnet:

Monat Upload (MB) Download (MB) Gesamt (MB)
Januar 43.523 134.636 178.159
Februar 36.123 150.017 186.140
März 46.062 149.592 195.654
April 58.243 114.047 172.290
Mai 77.410 152.724 230.134
Juni 60.818 133.169 193.987
Juli 98.805 130.978 229.783
August 104.508 124.720 229.228
September 55.063 219.831 274.894
Oktober 91.635 337.786 429.421
November 46.722 223.811 270.533
Dezember 46.930 202.345 249.275
2016 765.842 2.073.656 2.839.498

Das sind in Gesamtsumme fast 3 Terabyte übertragene Daten3. Offsite-Backups, Dropbox- und iCloud-Nutzung, Musik- und Video-Streaming sowie HomeOffice verursachen offenbar wirklich einiges an Traffic4.

Warum genau nun der August den Upload-Rekord hält und der Oktober so dermaßen viel Download verzeichnet ist mir aber dennoch eher unklar…

Mal schauen ob wir in 2017 die TR-069/064 Schnittstelle mal einer sinnvollerern5 Benutzung via Fritz Speed zuführen können…

(via: Pixelscheucher)

  1. Warum dieser Mailversand von AVM Push Service genannt wird kann ich auch nicht erklären…

  2. Manuell. Von Hand. Da ist noch Optimierungspotential vorhanden…

  3. Das macht umgerechnet knapp 353 double-layer DVDs oder immerhin noch 60 double-layer BlueRays

  4. Dazu muss man sich ja auch noch den mobilen Traffic rechnen…

  5. Und rein internen

Schickere Fußnoten mit Octopress

| Kommentare

Ich mag Fußnoten1. Ich mag es, Sie einfach schreiben zu können und sie hübsch sortiert am Ende meiner Texte zu wissen.

Ich mag es aber auch, sie schick und gut klick- und tapbar auf der Website zu sehen. Zu diesem Zweck kommt hier bigfoot.js2 zum Einsatz3.

Installation von bigfoot.js

Auf der bigfoot.js-Website kann man in einer sehr komfortablen Demo die verschiedenen Stile ausprobieren und herunterladen. Ich hatte hier ganz lange den Default mit den Instaper inspirierten drei Punkten benutzt, schwenkte nun aber auf den Numeric-Stil um. Die für den gewünschten Stil benötigten Dateien kann man sich dann direkt auf der Website herunterladen.

Auf dem folgenden Screenshot kann man die beiden Stile sehr schön betrachten4:

Wenn man dann den Download für den Numeric-Stil heruntergeladen und ausgepackt hat, findet man eine kleine Verzeichnisstruktur vor:

Was dann wo hin muss ist von Webseite zu Webseite unterschiedlich. Hier ist eine hübsch gemachte Anleitung für Jekyll-Blogs. Bei meiner5 auf Octopress basierenden Installation habe ich einfach bigfoot-number.css und bigfoot.min.js in die entsprechenden Verzeichnisse unter source/stylesheets/ und source/javascripts/ kopiert.

Das war es auch schon in Sachen Installation.

Konfiguration von bigfoot.js

Damit die beiden neuen Dateien auch berücksichtigt werden, müssen sie unter source/_includes/custom/head.html noch eingebunden werden:

1
2
3
4
5
6
7
8
9
10
11
12
<!-- Add BigFoot Footnotes Javascript and CSS -->
<style>@import url("/stylesheets/bigfoot-number.css");</style>
<script type="text/javascript" src="/javascripts/bigfoot.min.js"></script>
<script type="text/javascript">
    jQuery.bigfoot({
    actionOriginalFN: "hide",
    activateOnHover: "true",
    deleteOnUnhover: "true",
    hoverDelay: "500"
    });
</script>
<!-- End BigFoot Footnotes Javascript and CSS -->

Nachdem die beiden Dateien in den Zeilen 2 und 3 dem restlichen System bekannt gemacht wurden folgt dann noch die Konfiguration für die Fußnoten:

  • In Zeile 6 werden die Fußnoten am Ende eines Post ausgeblendet.
  • In den Zeilen 7 und 8 wird festgelegt, dass es ausreicht mit dem Mauszeiger über einer Fußnote zu hovern damit sie angezeigt wird.
  • Und in der Zeile 9 wird die Verzögerung dafür auf eine halbe Sekunde eingestellt.

Das habe ich so nahezu eins zu eins von Uwe Honekamp übernommen.

Hauptseiten-Fix

Ein Problem bleibt.

Gelegentlich schreibe ich eher längliche Posts. Für diese trenne ich durch ein <!-- more --> Tag den Großteil ab, was dazu führt, dass man erst nach einem Klick auf den Weiterlesen → Button den ganzen Post sieht und auf der Hauptseite nur ein Teil des Posts zu sehen ist.

Das führt dann wiederum dazu, dass die Fußnoten für den zu sehenden Teil fehlen und/oder kaputt sind. Nicht so schön.

Anstelle den selben Weg wie Uwe Honekamp zu gehen und einfach immer alle Posts vollständig auf der Startseite anzeigen zu lassen, bin ich dank Syeong Gan dazu übergegangen, die sichtbaren Fußnotenmarker einfach als simple, hochgestellte Zahlen anzuzeigen, die dann eben keine Funktion haben.

Das wird durch das folgende footnotes.rb Plugin erledigt, dass bei mir unter plugins/footnotes.rb liegt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Title: Footnote Liquid Filter
# Author: Syeong Gan
# Description: Liquid filters to modify footnote markup (useful for blog index
#     pages where the same footnote reference may be used multiple times as
#     articles are compiled)
#
# via: http://syeong.jcsg.com/2012/07/07/octopress-footnote-problem/

module FootnoteLiquidFilters
    # Appends a random integer to the footnote reference link
    #     Note, this is a hackish workaround (not foolproof if the same random
    #     happens to be generated twice)
    def rename_footnote_link(input)
        random = rand(100)
        input.gsub(/fn:fn\d+/, '\0-'+"#{random}").gsub(/fnref:fn\d+/, '\0-'+"#{random}")
    end

    # Removes footnote links entirely
    def remove_footnote_link(input)
        input.gsub(/<a .+ rel\=\"footnote\">(\d+)<\/a>/, '\1').gsub(/<a .+ rel\=\"reference\">.+<\/a>/, '')
    end
end

Liquid::Template.register_filter(FootnoteLiquidFilters)

Ich habe es in Zeile 15 minimal angepasst, um meine fn Notation für Fußnoten abzubilden.

Die so eingerichteten neuen Filter rename_footnote_link und remove_footnote_link müssen nun auch noch aufgerufen werden. Das geschieht in der Datei source/_includes/article.html die bei mir nun wie folgt ausschaut:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{% unless page.no_header %}
  <header>
    {% if index %}
      <h1 class="entry-title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1>
    {% else %}
      <h1 class="entry-title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}</h1>
    {% endif %}
    {% unless page.meta == false %}
      <p class="meta">
        {% include post/date.html %}{{ time }}
        {% if site.disqus_short_name and page.comments != false and site.disqus_show_comment_count == true %}
         | <a href="{% if index %}{{ root_url }}{{ post.url }}{% endif %}#disqus_thread">Kommentare</a>
        {% endif %}
      </p>
    {% endunless %}
  </header>
{% endunless %}
{% if index %}
  {% capture excerpted %}{{ content | has_excerpt }}{% endcapture %}
  {% if excerpted == 'true' %}
  <div class="entry-content">{{ content | excerpt | remove_footnote_link }}</div>
    <footer>
      <a rel="full-article" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
    </footer>
  {% else %}
  <div class="entry-content">{{ content | excerpt | rename_footnote_link }}</div>
  {% endif %}
{% else %}
<div class="entry-content">{{ content }}</div>
{% endif %}

Der Aufruf remove_footnote_link erfolgt in der Zeile 21 für Fußnoten die ausgeblendet werden weil sie hinter einem <!-- more --> Tag verschwunden sind.

Und in Zeile 26 wird der Link für die Fußnoten durch rename_footnote_link durch eine Zufallszahl ergänzt, um möglichst eindeutige Fußnotenlinks für die vollständig auf der Hauptseite abgebildeten Posts zu haben6.

Und damit fahre ich nun schon seit Januar 20147 sehr gut. Zur Nachahmung empfohlen.

  1. Das kommt ziemlich sicher daher, dass ich das Gesamtwerk von Adams und Pratchett verschlungen habe…

  2. Laut eigener Aussage A jQuery plugin for empowering footnotes Inspired by Instapaper. Built for mobile devices and responsive designs. und es verspricht da wirklich nicht zu viel…

  3. Und das bereits seit fast drei Jahren. Man kommt ja zu nichts…

  4. Und es gibt noch einen dritten namens Bottom. Den fand ich aber noch nie sehr ansprechend…

  5. Schon recht gut abgehangenen…

  6. So eindeutig wie rand(100) eben sein kann…

  7. Das ist ja nun wirklich schon eine ganze Weile…