JavaScript Shuffle using Fisher–Yates

Let’s shuffle an Array with JavaScript using Fisher-Yates.

var shuffle = function(arr) {
  var i, j, tmp;
    
  for (i = arr.length - 1; i > 0; i--) {
    j = Math.floor(Math.random()*(i+1));
    tmp = arr[j];
    arr[j] = arr[i];
    arr[i] = tmp;
  }
};

Let’s do the same with some DOM nodes.

var shuffleNodes = function(parentNode) {
  var i, el1, el2, tmp;

  for (i = parentNode.children.length - 1; i > 0; i--) {
    el1 = parentNode.children[i];
    el2 = parentNode.children[Math.floor(Math.random()*(i+1))];
    tmp = el2.nextSibling;
    parentNode.insertBefore(el2, el1);
    parentNode.insertBefore(el1, tmp);
  }
};

PostgreSQL und Uberspace

Dummerweise unterstützt Uberspace PostgreSQL nicht out of the box. Allerdings stellen die Uberadmins alle Tools bereit, um sich selbst die Hände ein wenig schmutzig zu machen.

Toast

Zum installieren von PostgreSQL eignet sich toast.

$ toast add http://ftp.postgresql.org/pub/source/v9.2.2/postgresql-9.2.2.tar.gz
$ toast arm postgresql

Dauert einen Moment, sollte aber keine Probleme bereiten.

Konfiguration

Nun muss ein Verzeichnis festgelegt werden, in dem PostgreSQL die Daten ablegen soll.

$ mkdir -p ~/var/pgsql/data
$ initdb ~/var/pgsql/data

Nun kann in der Datei ~/var/pgsql/data/postgresql.conf der SQL-Server konfiguriert werden.

Daemontools

Zur Verwaltung von Daemons empfiehlt das Uberspace Wiki daemontools. Zur initialien Einrichtung von daemontools:

# Nur wenn daemontools noch nicht eingerichtet wurde!
$ uberspace-setup-svscan

Um den PostgreSQL Daemon einzurichten, werden ein paar neue Verzeichnisse angelegt,

$ mkdir -p ~/etc/run-postgresql/log

die run-Datei für PostgreSQL erzeugt,

$ cat > ~/etc/run-postgresql/run <<EOF
#!/bin/sh

POSTMASTER=$HOME/.toast/armed/bin/postmaster
DATADIR=$HOME/var/pgsql/data

exec \$POSTMASTER -D \$DATADIR 2>&1
EOF

die run-Datei für das Logging erstellt

$ cat > ~/etc/run-postgresql/log/run <<EOF
#!/bin/sh

exec multilog t ./main
EOF

und der ganze Kram ausführbar gemacht.

$ chmod +x ~/etc/run-postgresql/run ~/etc/run-postgresql/log/run

Jetzt kann ein Symlink ins service Verzeichnis erstellt werden

$ ln -s ~/etc/run-postgresql ~/service/postgresql

und der Datanbank Server müsste laufen.

$ createdb test
$ psql test

Thats it.

Messing around with data

Die Tage hat GitHub die Gewinner ihrer Data Challenge bekanntgegeben, bei der sehr nette Sachen rum gekommen sind, die bei mir eine Will Ich Auch Reaktion ausgelöst haben. Lustig Daten visualisieren war also Thema der letzten Tage.

Zu Beginn einer Datenvisualisierungsparty stellt sich die Frage nach entsprechenden Daten und da ich gerade mit atropa herumspiele, war recht schnell klar wo die Daten herkommen, die es aufzuhübschen gilt.

Daten

atropa hat eine gut strukturierte Datenbank mit einer überschaubaren, aber ausreichenden Anzahl an Datensätzen. Es ging in erster Linie darum, die Verknüpfung zwischen Videos und Tags zu nutzen. Zwischen den beiden Entitäten besteht eine n:n Beziehung, die folgendermaßen mittels SQLite realisiert ist:

  +------+    +-------------+    +--------+
  | tags |    | tags_videos |    | videos |
  +------+    +-------------+    +--------+
  | id   |    | tag_id      |    | id     |
  | tag  |    | video_id    |    | title  |
  | ...  |    +-------------+    | ...    |
  +------+                       +--------+

Nothing fancy bisher. Den interessanten Teil der Daten hält die Verknüpfungstabelle tags_videos, aus der sich nicht nur Verknüpfungen zwischen Videos und Tags sondern auch zwischen den Videos untereinander ablesen lassen können. Die atropa Datenbank hält heute 63 Videos, 37 Tags und 169 Einträge in der Verknüpfungstabelle - sehr überschaubar.

Visualisierung

Meine Recherche nach Möglichkeiten schöne (interaktive) Graphen zu ploten hat mich zu D3.js geführt, die mit einem beeindruckenden Set an Beispielen aufwarten. D3.js ist eine freie JavaScript Library, die genau für einen Zweck geschaffen wurde - Data Visualization - YES. Bewaffnet mit diesem mächtigen Tool kann es los gehen.

Fishnet

Nachdem ich mir die D3 Beispiele angeschaut hatte, musste natürlich etwas abgefahrenes her, irgendwas mit ganz viel Interaktion - Infotransport ist egal, hauptsache fancy. Ich habe mich dann für einen so genannten Force Graphen entschieden, um die Verknüpfungen der Videos untereinander darzustellen.

Der erste Schritt ist mit ein wenig SQL Magie die Verknüpfungen aus der Datenbank zu holen:

SELECT DISTINCT tv.video_id x, _tv.video_id y
FROM tags_videos tv
INNER JOIN tags_videos _tv
ON tv.tag_id = _tv.tag_id
WHERE x < y

Eine kurze Erläuterung:

DISTINCT, da ich an doppelten Einträgen (wenn zwei Videos über mehrere verschiedene Tags miteinander verbunden sind) nicht interessiert bin.

WHERE x < y, um doppelte Ergebnisse zu vermeiden, die eine kommutative Verknüpfung nun einmal mit sich bringt.

Der zweite Schritt ist diese und noch ein paar allgemeine Video Daten mittels AJAX vom atropa Server zu holen und gegen die D3 Lib zu schmeißen. D3 bereitet das Ganze dann so auf, dass man recht einfach mittels SVG einen schönen Graphen zusammen schieben kann.

Die Kreise stellen die Videos dar, die über Tags miteinander verbunden sind. Klar! Das ganze ist nicht wirklich informativ aber brutal interaktiv. Try it yourself! Den Source Code gibt es auf GitHub.

Tagmap

Der zweite Versuch sollte übersichtlicher werden und die Verwendung von Tags visualisieren - Ähnlich einer TagCloud, nur in nett. Dafür eignet sich am besten eine Treemap.

Some SQL:

SELECT t.id, t.tag, count(tv.tag_id) num
FROM tags t
JOIN tags_videos tv
ON tv.tag_id = t.id
GROUP BY t.id

Wieder Ajax, wieder D3, aber diesmal kein SVG, sondern simple div Elemente:

Ziemlich klar, denke ich. Je größer die Box, desto populärer der Tag. Try it yourself! and get the code.

Fountain

Das beste zum Schluss. Wieder ging es darum die Verknüpfung zwischen Videos abzubilden. Diesmal sollte es aber anschaulicher werden, als im ersten Versuch. Das SQL Query bleibt gleich und auch SVG ist wieder im Spiel:

Link & Code.

All in All

Meine ersten Data Visualization Übungen waren soweit recht simpel aber ziemlich spaßig. D3 is super fancy(!) and makes it a breeze. Zu finden sind alle Graphen auf der Übersichtsseite. Thats it.

atropa API / Key based authentication

atropa hat eine API bekommen (Primär um eine saubere Schnittstelle für die Chrome extension bereit zu stellen, aber das ist ein anderes Thema). Ein spannender Punkt an einer API ist die Authenfizierung – Nach ein wenig stöbern, bin ich auf diesen Artikel gestoßen, der die grundsätzliche Funktionsweise einer schlüsselbasierten Authentifizierungsmethode erläutert.

Das Grundprinzip ist recht simpel, aber großartig:

  • Der Client bekommt einen public Key (username) und einen private Key (some Hash).
  • Wenn der Client nun eine Anfrage an den Server senden will, erstellt er für die Daten die gesendet werden sollen – mit Hilfe des private Keys – eine Signatur und hängt diese Signatur an die Anfrage an. (Der public Key sollte sich auch unter den signierten Daten befinden.)
  • Der Server (der auch den private Key kennt) erstellt eine Signatur der empfangen Daten und vergleicht die Signaturen miteinander. Wenn sie gleich sind, ist alles roger und die Anfrage wird bearbeitet.

Mega fancy! Für einen atropa (bash) Client sieht das dann so aus:

# The private key
key='XXXXXXXXXXXXXXXXXXXXXXXXXXXXX'

# The data we want to send
uri='/api/videos/3.json?username=joe&tags=foo,bar'

# Creating the signature
sig="$(echo -n "$uri" | openssl sha1 -hmac "$key" | cut -d' ' -f2)"

# Sending the request
curl -X PUT -d"signature=${sig}" "https://atropa.wurstcase.net${uri}"

Nie wieder Passwörter (seien sie noch so verschlüsselt) übers Netz senden.

Alle Anfragen an die atropa API müssen signiert sein, sonst werden sie abgelehnt. Hier noch schnell die Methoden:

Alle Videos des Benutzers holen:

GET /api/videos.json

Ein bestimmtes Video holen:

GET /api/videos/{id}.json

Ein Video erstellen:

POST /api/videos.json

Ein Video bearbeiten:

PUT /api/videos/{id}.json

Ein Video löschen:

DELETE /api/videos/{id}.json

Ähnlich sieht es bei den Tags aus:

GET    /api/tags.json       # Alle Tags holen
GET    /api/tags/{id}.json  # Einen Tag holen
POST   /api/tags.json       # Tag hinzufügen
PUT    /api/tags/{id}.json  # Tag aktualisieren
DELETE /api/tags/{id}.json  # Tag löschen

Die User hingegen haben derzeit nur eine Methode:

GET /api/users/{id}.json

Thats it, much fun!

sqlite3 backup

$ sqlite3 db.sqlite3 '.backup main backup.sqlite3'

Note: Check if the .backup command is available before doin anything!

atropa on rails

Das Gesamte wurstcase Projekt ist zu uberspace umgezogen und da uberspace Ruby unterstützt, habe ich mir mal das Rails Framework angeschaut und kurzerhand atropa auf auf Ruby portiert.

Mein Eindruck.. Ruby fetzt! Eine wesentlich logischere, konsistentere und durchdachtere Sprache als PHP, die sauberen Code erlaubt und mehr Spaß beim tippen macht.

Rails hingegen fühlt sich etwas bevormundent an. Alles ist irgendwie magic und die Konfigurationsmöglichkeiten halten sich in Grenzen. Ich konnte mit Convention over Configuration noch nie viel anfangen. Dafür geht die Entwicklung verdammt schnell – für atropa habe ich eine Nacht gebraucht, obwohl ich weder Ahnung von Ruby noch von Rails hatte.

All in all werde ich weiter bei Ruby bleiben, mich aber nach alternativen Frameworks umschauen.

local-repo 1.6

local-repo ist ein Repository Manager für lokale Arch Linux Repositories – written in Python. Das ganze ist recht praktisch, wenn man beispielsweise Pakete aus dem AUR auf mehreren Rechnern nutzen möchte, aber sich die Zeit sparen will, die Programme für jeden Rechner einzeln zu kompilieren.

Zum Ausprobieren empfehle ich something like this

mkdir test && local-repo test -A vim-html5-git

Diese Befehle legen ein neues Repo im Verzeichnis test an und fügen das Paket vim-html5-git aus dem AUR hinzu.

Doku, GitHub, AUR

dkm-graphik & blogwurst

dkm hat eine neue Seite bekommen – YAY. Es ist eine Mischung aus Blog und Portfolio und alle sind zufrieden.

Unter der Haube läuft Blogwurst – Mein leichtgewichtiges Bloggrundgerüst, auf das man alles mögliche oben drauf bauen kann, ohne jedes mal bei 0 starten zu müssen. Ist recht nett & based on Fuel.

Projekt Weiss

Habe gestern mit dkm die Website für das Projekt Weiss fertig gestellt. Im Rahmen der Buchmesse Leipzig 2012 wurde dort von Gestaltern und Bauingenieuren ein Messestand aus lustigen kleinen Pappquadraten aufgebaut. Ziemlich fancy! Weiterhin wird das Projekt Zeichen vorgestellt, in dem sich die Gestalter mit Zeichen und Zeichensystemen auseinander gesetzt und am Ende fancige Bücher produziert haben. Also ab nach Leipzig, Stand angucken, Zeuch kaufen…

Die Seite hat ein ganz nettes Feature, called fancyFocus. Da der Content auf zwei Spalten verteilt ist, musste etwas her, um die fokussierte Spalte hervorzuheben… Ergo – die nicht fokussierte Spalte wird halbtransparent. Ganz klar! Gesteuert wird der Quatsch über die Position des Mauszeigers. jQuery kam zum Einsatz, da auch IE User ihre Freude haben sollen, allerdings ist das auch mit reinem CSS3 umsetzbar. Try Or Die!