Losstopschade

Die zurück­gespulte Text-VHS von Daniel Diekmeier. Archiv. Jetzt abonnieren →

5 Ergebnisse mit dem Tag #programmieren. ← Zur Startseite

Cambio

Letztes Jahr hat mir Clara ein neues Kartenspiel beigebracht, das sie wiederum von Eva gelernt hatte, die es wiederum von Lea gelernt hatte: Cambio. ich hatte vorher noch nie davon gehört, aber es macht sehr viel Spaß und wir haben es seitdem schon viele Male gespielt.

Für das Spiel braucht man ein gewöhnliches Poker-Set. Bis die Regeln nach viel stiller Post bei uns angekommen waren, hatten sich bereits ein paar Hausregeln eingeschlichen, aber wir spielen ungefähr nach diesen Regeln.

Als sich im September andeutete, dass demnächst wieder Weihnachten vor der Tür stehen würde, kam mir die Idee: Was, wenn ich ein eigenes Kartenspiel gestalte, das ich dann in meinem cambiospielenden Freundeskreis verschenken kann? Wie schwer kann das schon sein?

Ein Kartenspiel zu gestalten ist ziemlich schwer

Das erste Problem war, die notwendigen Figuren zu zeichnen. Ein Pokerspiel enthält 15 Bildkarten: jeweils vier Buben, Damen und Könige, plus drei Joker. Ich habe die Figuren alle am iPad gezeichnet, in Procreate, und das dauerte ewig.

Procreate hat eine Funktion für Punktspiegelung – eigentlich nice, denn klassischerweise sind viele Pokerkarten ja punktgespiegelt. Leider ist die Funktion überhaupt nicht flexibel und ich konnte sie dadurch nicht so gut gebrauchen wie ursprünglich gehofft. Aber besser als nichts!

Ansonsten hatte ich noch einige Probleme damit, meine Freunde ausreichend naturgetreu abzubilden, aber da kann ich nun wirklich niemandem etwas vorwerfen außer mir selbst.

Das nächste Problem war das Layout.

Ich probierte, eine Karte in Pixelmator Pro zu designen, und obwohl das grundsätzlich funktionierte, hat es mich direkt von der Vorstellung abgebracht, dass das eine gute Idee sein könnte. Es dauerte ewig, alles richtig zu positionieren. Für die erste Karte, eine Karo 10, brauchte ich ungefähr eine Stunde.

Ja, hier sind noch ein paar zusätzliche Ebenen aktiviert, aber ihr versteht schon.

Aber noch schlimmer: Ich würde innerhalb des Prozesses natürlich gerne ein paar unterschiedliche Varianten ausprobieren: Verschiedene Varianten der Symbolgrafiken, unterschiedliche Positionierungen und Größen der Symbole, unterschiedliche Schriftarten, unterschiedliche Farben … die Vorstellung, jedes Mal einen großen Haufen Pixelmator-Ebenen manuell aktualisieren zu müssen, wenn ich meine Meinung ändere, ließ mir direkt Angst- und Anstrengungsschweiß ausbrechen.

Wie so oft fiel mir dann ein, dass ich zum Glück Programmierer bin, und ich schrieb ein Script, das mir die Karten generieren kann. Innerhalb des Scripts kann ich verschiedene Parameter setzen:

  • Die SVGs, die als Symbolgrafiken verwendet werden sollen
  • Die fünf Farben (Herz, Karo, Kreuz, Pik, Joker)
  • Die genauen Positionen der Symbole auf der Karte

Ich konnte sogar Funktionen einbauen, die mir beim Gestalten helfen konnten: Ob der Schnittrand angezeigt werden soll oder nicht, automatische Punktspiegelung der Bildkarten, automatische Ausrichtung aller Zahlenkarten … vielleicht schon zu viel, aber wenn man erstmal anfängt, zu Automatisieren, dann muss man es auch durchziehen.

Das Script brauchte, nachdem ich es ein bisschen optimiert hatte, ungefähr 8 Sekunden, um alle 55 Karten zu generieren. Zum tatsächlichen Designen habe ich meistens nur eine Karte auf einmal generieren lassen, was quasi verzögerungsfreies Arbeiten ermöglicht hat.

(Für automatisches Ausführen, wenn ich Dateien speichere, benutze ich gerne entr, ursprünglich empfohlen von Julia Evans)

Als ich endlich irgendwann 55 fertige PNGs herumliegen hatte, konnte ich die Karten endlich bestellen. Zu diesem Zeitpunkt war ich schon relativ spät dran (es war inzwischen der 10. Dezember), aber entgegen dem, was meine langatmige Beschreibung vermuten lässt, war der zeitaufwändigste Teil nicht die Automatisierung (die dauerte nur etwa einen Tag), sondern das Zeichnen der vielen Karten. (Das dauerte mehrere Wochen, in denen ich jeweils Abends daran gearbeitet habe.)

Gedruckt habe ich sie schließlich bei meinspiel.de, die das wirklich sehr gut gemacht haben. Die Webseite ist etwas anstrengend und ich habe eine Weile gebraucht, um das korrekte PDF zu generieren, das sie sich wünschen, aber mit dem Ergebnis bin ich extrem zufrieden. A propos:

Das Ergebnis

Die Karten kamen rechtzeitig vor Weihnachten an, die Versorgung meiner Freunde mit neckischen Spielkarten war also gesichert.

Gibt es Sachen, die ich ändern würde? Ein paar Kleinigkeiten! In Cambio haben die beiden roten Könige eine besondere Bedeutung, darum war es etwas töricht von mir, Karo dunkelblau zu färben. Überhaupt sind die Farben etwas dunkel geworden (Dunkelblau, Dunkelgrün und Schwarz sehen sich ausgedruckt viel ähnlicher als es auf meinen Bildschirmen der Fall war.)

Insgesamt bin ich extrem froh, es gemacht zu haben, und würde es jederzeit™ wieder tun. Ein schönes Projekt für kalte Winterabende!

JSON direkt aus Postgres auslesen

Neulich musste ich einige Daten aus einer Postgres-Datenbank sammeln, um mit ihnen zu arbeiten. Ich brauchte eine Liste von den IDs von allen Elementen in einer Tabelle, und ihren zugehörigen Namen. Mit diesen Daten wollte ich dann von Puppeteer ein PDF für jede ID erstellen lassen, und die Dateien mit dem Namen versehen.

Als Ausgangspunkt hätte ich also gerne ein JSON gehabt, damit ich es direkt in mein Node.js Script werfen kann, aber ich hatte keine Lust, mir für das einmalige Auslesen der IDs und Namen extra einen Datenbankzugriff mit dem pg Package oder so zu bauen. Hm! Was tun?

Glücklicherweise konnte ich dann herausfinden, dass Postgres eine eingebaute Funktion hat, die genau das macht: json_object_agg!

Angenommen, wir haben diese Tabelle:

id name username
1 Daniel danjel
2 Clara wundertaeter

Dann können wir die folgende Abfrage machen (ich mache meine Abfragen meistens in Postico), und Postgres aggregiert das direkt in ein JSON Object!

SELECT json_object_agg(
  "user".id,
  "user".username
) FROM "user";

Das Ergebnis sieht dann so aus:

{
  "1": "danjel",
  "2": "wundertaeter"
}

Mit psql geht das sogar direkt im Terminal:

psql --tuples-only -d lesetagebuch_dev \
  -c "SELECT
  json_object_agg(\"user\".id, \"user\".username)
  FROM \"user\";" | jq

Durch das --tuples-only werden Header und Footer von psql übersprungen, so dass das Ergebnis direkt in jq gepiped oder mit > data.json in eine Datei gespeichert werden kann.

Die Suche nach dieser Funktion hat vermutlich etwas länger gedauert, als eine CSV aus Postico zu exportieren, aber falls ich so etwas ähnliches irgendwann noch mal machen muss, geht es dafür viel schneller, und macht mehr Spaß. (Und damit ich es nicht vergesse, schreibe ich es auf!)

The Humble Zero Width Space

Mein liebstes Satzzeichen ist vermutlich das breitenlose Leerzeichen. Ich mag Dinge, die gleichzeitig sinnvoll, absurd, witzig und etwas obskur sind, und da gehört dieses Leerzeichen definitiv dazu. (Das klingt, als wäre ich eine Figur aus einem Buch von John Green, but stay with me.)

Vielleicht seid ihr überrascht, dass es überhaupt mehr als ein Leerzeichen gibt. Um ehrlich zu sein: Bei meiner „Recherche“ für diesen Artikel war ich selbst überrascht, dass Wikipedia achtzehn verschiedene Leerzeichen in Computersystemen auflistet. Oh je. So weit wollte ich gar nicht gehen!

Das breitenlose Leerzeichen benutze ich eigentlich nur, wenn ich in einem Tweet gerne einen Genitiv benutzen möchte, zum Beispiel „Ich mag @danjel​s leckere Pizza.“ Im Englischen wäre das unproblematisch, aber im Deutschen möchte ich ja nicht „@danjel’s“ schreiben (oder gar „@danjel s“), sondern halt „@danjels“. Damit das „s“ aber nicht zum Nutzernamen gezählt wird, muss man es mit einem, ihr ahnt es, breitenlosen Leerzeichen abtrennen: „@danjel​s“. (Ihr seht es nicht, aber hier ist ein Leerzeichen zwischen l und s!) Das ist der beste Twitterhack, den ich kenne, und bestimmt habe ich ihn von Max Friedrich.

Das breitenlose Leerzeichen eignet sich hervorragend, um Kollegen, Computersysteme und natürlich sich selbst zu verwirren. Zum Beispiel: Schreibt mal einen Artikel über breitenlose Leerzeichen, in dem breitenlose Leerzeichen vorkommen, und überprüft vor dem Veröffentlichen, ob ihr auch keins vergessen habt. Viel Spaß!

Mir geht es aber auch noch um etwas anderes: Manchmal sitze ich da und habe irgendeine diffuse Lust, irgendwas zu programmieren, aber weiß nicht, was. Ich könnte etwas an meinen bestehenden Projekten machen, aber die sind irgendwie so ernst. Manchmal würde ich lieber eine Kleinigkeit machen, die von allem anderen unabhängig ist, aber dafür müsste man erstmal eine Idee haben, und … so sitze ich manchmal stundenlang da und mache nichts.

Aber neulich, als ich mal wieder „Breitenloses Leerzeichen“ in Wikipedia (meiner liebsten Quelle für obskure Satzzeichen) gesucht habe, um es in einem Tweet benutzen zu können, dachte ich: Warum baue ich nicht endlich eine Seite, die genau das macht? Und das habe ich jetzt, und hier ist sie:

Besucht sie und holt euch eure eigenen Leerzeichen: Humble Zero Width Space ↗.

Die Seite besteht nur aus einer einzigen HTML-Datei, in die ich ein bisschen CSS und JavaScript reingeschrieben habe. Von der Idee bis zum Deploy (und damit meine ich, dass ich die Datei per FTP auf meinen Uberspace geschoben habe) dauerte es etwa fünfzehn Minuten. Ich kann nur empfehlen, sowas ab und zu mal zu machen, um sich zu erinnern, wie es sich anfühlt!

Jemand, der Nein sagt

Es ist schön, tolle Kollegen zu haben. Kollegen, mit denen man sich Schritt für Schritt durch gruselige Interfaces klicken kann, um zusammen Lösungen zu finden. Kollegen, mit denen man beim Pair Programming mal in eine Tangente über COBOL abrutscht. Aber manchmal ist es schön, Kollegen zu haben, die auch mal „Nein“ sagen.

Vor ein paar Tagen habe ich meinen Kopf für zwei Stunden gegen ein Problem gehauen, aber das einzige, was nachzugeben drohte, war mein Schädel. Die genauen Details sind nicht besonders interessant (und schwer zu erklären). Es sei nur gesagt, dass ich kurz davor war, extrem viel Aufwand zu betreiben, um einen sehr kleinen Effekt in einer App zu erzielen.

Irgendwann hatte ich schon dutzende Zeilen Code geschrieben und dachte mir: Dieser Code (und die ganze Idee!) ist so unglaublich kompliziert, ich erzähle mal Timo davon. Vielleicht hat er eine bessere Idee, wie ich das umsetzen kann. Vielleicht kennt er einen coolen React Trick, den ich nicht kenne, mit dem es ein Einzeiler wird! Also erzählte ich ihm von meinem Problem. Schon während ich aufschrieb, was ich gerne machen würde, wurde mir klar, dass meine Idee noch komplizierter war, als ich vorher dachte. Timo las meine Nachricht und durchlief die fünf Stadien der Trauer:

  1. Er verstand nicht, was ich will
  2. Nach einer zweiten, ausführlicheren Erklärung verstand er dann doch, was ich will
  3. Er sagte, dass es vermutlich keine gute Idee ist
  4. Er erzählte, dass er mal etwas Ähnliches programmieren musste, aber dass es furchtbar war und er es nicht nochmal machen würde
  5. Er wiederholte, dass es vermutlich keine gute Idee ist

Schlussendlich waren wir uns einig, dass es keine einfache Möglichkeit gibt, meine Idee umzusetzen (wenn überhaupt!), und dass ich es einfach lassen sollte. Das war die (hoffentlich) beste Entscheidung für das Projekt, das Budget und die Codebase, die alle drei von wildgewordenem Drauflosprogrammieren hätten gesprengt werden können.

Sich gegenseitig zu unterstützen, um gute Lösungen zu finden, finde ich gut und es macht mir viel Spaß. Aber mindestens genauso gut finde ich, zusammen auch mal einen Schritt zurückzutreten und zu beschließen, dass etwas eine ganz und gar übertriebene Idee ist. Dabei ist es wichtig, dass alle Beteiligten geerdet genug sind, dass nicht einer sowas sagt wie „Und dann löte ich den Flux Kompensator direkt in den Connection-Pool und dadurch exhumiere ich dann den rückwärtsgepolten Neutronengenerator, und alles nur mit dreiundsiebzig npm Packages“ und der andere nur anerkennend nickt und sowas sagt wie „Oh krass.“

Vielleicht muss man öfter nicht nur „Können wir das bauen?“ fragen, sondern auch „Sollten wir das bauen?“ und „Ist das komplett übertrieben?“ Denn oft – öfter, als man denkt – ist die Antwort, einfach ruhig zu bleiben und nichts zu machen. Auch mal schön!

Salt Bae

Clara (bekannt aus dem Comic über die Peanut Butter Caramel Chocolate Tarte) und ich backen gerne. Sowohl zusammen, als auch … gegeneinander? Nein, das ist nicht das richtige Wort. Füreinander. Okay.

Wir mögen auch den YouTube-Kanal von Bon Appétit, weil wir Menschen mit Puls sind.

Jedenfalls fügen sich diese beiden Tatsachen auf magische Art zusammen und das Ergebnis ist, dass wir immer mal wieder Rezepte aus dem Bon Appétit Angebot backen.

Besonders gut fanden wir bis jetzt:

Aber alle diese Rezepte eint nicht nur, wie unglaublich lecker die Ergebnisse sind, sondern auch das Problem, dass die Salzmenge nicht in Gramm angegeben wird, sondern in Teelöffeln der beiden Salzsorten Diamond Crystal Kosher Salt oder Morton Kosher Salt. (Disclaimer: Bei den verlinkten Rezepten wird bei einem tatsächlich zusätzlich eine Grammzahl genannt und zwei nennen keine Sorten, sondern nur das Volumen in Teelöffeln.)

Als Clara also mal wieder fluchend in der Küche stand, wir erst Siri fragten (die es natürlich nicht wusste), dann googelten, auf komischen Webseiten landeten und schließlich einen Dreisatz rechnen mussten, dachte ich mir: Moment mal, ich bin doch Softwareentwickler! Software könnte dieses Problem lösen!

Und so setzte ich mich hin, programmierte in ungefähr einer Sekunde die Logik (einen Computer dazu zu bringen, einen Dreisatz zu rechnen, ist nicht sonderlich schwer), und dann noch einen Tag lang ein neckisches Design dazu. Zwischendurch holte ich mich immer mal wieder Feedback von echten Nutzer*innen (indem ich Clara ein iPhone hinhielt und „Do you like this?!?!?!?!“ rief). Das Ergebnis heißt Salt Bae und sieht so aus:

(Am Anfang hieß es kurz Salt Pal, aber dann klärte mich Clara auf, was ein Salt Bae ist, und ich änderte den Namen sofort.)

Vielleicht ist dieses kleine Stück Software ja auch für euch interessant. Denkt an mich, wenn ihr mal Salz esst! Passt auf euch auf! Bye!

Direkt zu Salt Bae →


Absatz für Nerds: Salt Bae ist Open Source auf Github! Das Interface habe ich mit Svelte gebaut und das hat viel Spaß gemacht. Das war erst meine zweite Berührung mit Svelte, und die erste, die das Licht der Welt erblickt!