Mein Reiseführer zum Woodhack 2017

Back to overview

Hallo, ich bin Jörn! Hier gebe ich einen kleinen Rückblick zum Woodhack 2017.

Der diesjährige Woodhack, Sevenvals jährlicher Hackathon auf dem Land, war mein erster richtiger Hackathon überhaupt. Von den rund 150 Mitarbeitern habe ich zwar in meinen 7 Monaten bei Sevenval eine ganze Reihe Kollegen kennengelernt, aber gerade das Berliner Team war mir noch größtenteils komplett neu. Bei den Themenvorschlägen hatte ich vorher zwei Ideen im Wiki eingetragen, aber noch keine Rückmeldung erhalten, ob es dafür Interesse gab. Entsprechend war ich auf alles gespannt: Die neuen Kollegen, den Ort, das Hacken, die Ideen und die Ergebnisse.

Vorweg mein Fazit: Es war toll und hat sich gelohnt. Jedes einzelne Projekt war interessant und hatte am Ende was zu präsentieren. Und es war eine super Gelegenheit, um auch Kollegen, mit denen man im Alltag weniger oft zusammenarbeitet, kennenzulernen und gemeinsam etwas Neues auf die Beine zu stellen.

Neben Christians Rückblick auf seinen ersten Woodhack möchte ich im Folgenden ausgewählte Projekte vorstellen, mit denen ich mich im Nachgang beschäftigen konnte (wo möglich mit Links zum Selberanschauen).

 

 

Alexa Friendly Ping

“starte eine erinnerung für {User} in {Dauer}” – so sieht eins der Text(!) Samples aus, mit dem der Alexa Skill gefüttert wird. Wenn Alexa das versteht, wird es dann tatsächlich den genannten User nach Ablauf der genannten Dauer (hier eine “AMAZON.DURATION”) erinnern. Das könnte ein Meeting sein, oder der gerade aufgesetzte Tee, oder vielleicht die nächste Kicker Runde. “Alexa, erinnere mich in fünf Minuten” – hier gibt es keinen expliziten User, damit soll Alexa den Sprecher als User interpretieren – wie das funktioniert, ist mir allerdings nicht klar. Auch das Rollout bzw. Setup kann ich mir noch nicht ganz vorstellen: Müsste Alexa in jedem Büro Raum stehen? Oder reicht ein Gerät in der Küche? Letzteres könnte in Kombination mit der ebenfalls beim Hackathon gebauten iOS App funktionieren, die z.B. Erinnerung als Push Notification bekommt. Dann wäre der Workflow: In der Küche Tee aufsetzen, Alexa die Erinnerung aufgeben, dann an den Arbeitsplatz zurückkehren und per Push Notification an den fertigen Tee erinnert werden. Und vermutlich dann eine Stunde später merken, dass man die Push Notification nicht bemerkt oder ignoriert hat und der Tee inzwischen kalt ist… da hilft nur: noch mehr Technik!

 

arena.io – Coding Game Simulator

In klassischer “Not Invented Here” Manier wurde hier versucht, ein kompetitives Programmierspiel zu bauen, obwohl es da bereits sehr runde Lösungen wie CodinGame gibt. Weil die Zeit beim Woodhack sehr limitiert ist, hat sich das Team für ein sehr simples Spiel entschieden, das jeder kennt und den Fokus auf das “drumherum” ermöglicht: Tic-Tac-Toe (auch bekannt als “Drei gewinnt”). Hier verweise ich gerne auf die Slides und das Repository auf GitHub.

PS: Ich habe mal CodinGame ausprobiert – weniger Gamification und ein zugänglicherer Einstieg würden dem schon gut tun. Nicht jedes Rad ist gleich rund…

 

Batpicker – The Sevenval Datepicker

Noch ein Fall von Not Invented Here Syndrom oder eine echte Chance, ein großes Loch zu stopfen? Ich bin mir da auch im Anschluss unsicher, aber das Ergebnis war vielversprechend. Das Team hatte sich zum Ziel gesetzt, einen Datepicker in JavaScript zu implementieren, der klein und flexibel ist und endlich all die Anforderungen, die im Projektgeschäft vorkommen, erfüllen kann. Und das noch barrierefrei (accessible) und responsive. Die Demo sah gut aus: Auf genügend großem Bildschirm liegt der Batpicker über Teilen der Seite, sodass der Text-Input sichtbar bleibt. Auf kleinen Formaten füllt er die komplette Seite aus, und mit vertikalem Scrolling kann man flott zwischen den Monaten wechseln. Eine Bedienung per Tastatur geht ebenfalls, und Änderungen direkt am Input (mit type=date, was leider immer noch sehr viele Einschränkungen mitbringt) werden mit dem Batpicker gesynct (andersrum sowieso).

Ich bin gespannt, ob das Projekt über den Woodhack hinaus eine Zukunft hat. Mich interessiert vor allem, wie die Internationalisierung gelöst ist (oder gelöst werden soll), ob zum Beispiel Globalize eingesetzt werden soll. Das ermöglicht über seinen Compiler sehr kompakte Builds, die über das Webpack Plugin auch sehr leicht zu konfigurieren sind. Auch spannend: Die Accessibility! Tastatur-Steuerung ist bereits vorhanden; ob das Focus Management gut genug ist, würde ich gerne testen. Davon hängt dann auch stark ab, ob es mit Screenreadern wie JAWS, NVDA oder VoiceOver einsetzbar ist. Letzteres gibt es neben OSX auch auf dem iPhone, was aber durch den Touchscreen wieder ganz anders funktioniert.

 

CMS in a container

Eine neue Markdown-Datei oder eine Textänderung in ein Git Repository pushen, und schon ist die Änderung online im Firmenblog sichtbar! Die Idee ist nicht ganz neu, aber die Umsetzung ist meistens mit Stolpersteinen verbunden. Beim “CMS in a container”-Projekt war das Ziel, diese Pipeline beispielhaft umzusetzen, und am Ende eine neue Website für den Woodhack präsentieren zu können.

Für den Teil des auf Git-basierenden Blogs wurden ein paar Technologien getestet und schnell verworfen (grav, mavo), am Ende hat sich hugo durchgesetzt. Es bezeichnet sich selbst als Static Site Generator (ähnlich wie z.B. Jekyll), kommt mit Themes daher und unterstützt Markdown.

Für die komplette Pipeline wird benötigt:

  • ein Git-Repository, z.B. bei GitHub, hier selbst gehostetes GitLab
  • ein Jenkins Job, der bei Änderungen im Git Repo ausgeführt wird
  • ein Docker Hub Repostory, wird vom Jenkins Job aktualisiert
  • ein Projekt bei sloppy.io für das Hosting des Docker Containers
  • eine Config für wao.io, für Optimierung und Analytics
  • ein DNS Eintrag! Hier für woodhack.de, zeigt auf wao.io

Wenn es einmal läuft, ist es flott und zuverlässig.

 

Signup from Bandname

Hinter diesem seltsamen Namen verbergen sich zwei Projekte, deren Grundidee ich selbst beigesteuert hatte. Erfreulicherweise fanden sich für beide Ideen mehrere Interessenten, daher wurde kurzfristig entschlossen, zusammen an beiden Projekten zu arbeiten. Nach etwas Orientierung und Grundlagen schaffen (wir hatten uns für eine GitHub Organization entschieden und dort Repos angelegt), zogen wir uns erstmal in eine ruhige Ecke im Grashof zurück, um dort mit nur einem Laptop (für Notizen) etwas Brainstorming und Planung zu betreiben. Nach etwa einer halben Stunde hatten wir auch die ersten Aufgaben verteilt, um dann im lauteren großen Raum loslegen zu können. Präsentiert haben wir dann am Ende beide Projekte hintereinander:

 

banGen

Kurz für Band Name Generator: Hier war die Idee, einen Namensgenerator für Metal Bands mit einem Whois Lookup für die Verfügbarkeit von Domains zu kombinieren. Das Prinzip lässt sich für allerhand Themen oder Produkte anwenden, ich hatte aber nun mal den konkreten Bedarf, einen Namen für meine Metal Band zu finden. Zusätzlich zum eigentlichen Namensgenerator, für den wir das metal-name npm Paket verwenden, und die Prüfung der Verfügbarkeit (via cybersquatter, ebenfalls ein npm Paket), kamen dann noch eine Liste von Synonymen sowie ein Logo-Generator. Theoretisch lässt sich auch der gewählte Bandname von Hand editieren, um dafür dann Synonyme zu laden – dort gibt es allerdings immer noch einen Bug, den wir am späten Freitagnachmittag auch nicht mehr beheben konnten. Am Ende waren wir aber mit dem Ergebnis sehr zufrieden.

Den kompletten Source Code gibt es auf GitHub, eine Demo läuft unter bangen.sloppy.zone. Da wir eine Server-Komponente haben (node.js mit Express), hosten wir die App als Docker Container auf sloppy.io.

 

Signup From Hell

Was passiert eigentlich, wenn Designer und Entwickler jedes Dark Pattern, das sie sonst natürlich meiden, absichtlich verbauen, und sich andere Gemeinheiten überlegen können? Das war der Ansatz für Signup From Hell, eine Art Rätselspiel, bei dem es darum geht, einen feindseligen Registrierungsprozess zu Ende zu bringen. Ich hatte dafür ein paar Ideen mitgebracht, aber beim gemeinsamen Brainstorming wurde direkt erschreckend viel sadistische kreative Energie freigesetzt und es mangelte uns nicht an Ideen.

Um mit mehreren Entwicklern an verschiedenen Stellen des Prozess arbeiten zu können, haben Erik und Antonia eine kleine Abstraktion entwickelt, die auf <fieldset>s basiert. Jedes davon wird erstmal automatisch versteckt, bis auf das erste. Wenn ein Schritt gelöst wurde, wird das nächste angezeigt. Und über einen speziellen Query-Parameter lassen sich (als Entwickler) gezielt einzelne Schritte anspringen, um z.B. an Schritt 5 von 6 arbeiten zu können.

Auch hier gibt es den kompletten Source Code auf GitHub. Da es hier keine Server-Komponente gibt, ist die Demo auf GitHub Pages gehostet.

 

Stop Motion Video

Fotografie, Bild-, Audio- und Videobearbeitung, Framerates, Projektmanagement, Zeitplanung – das hat zwar alles nichts oder wenig mit Programmierung zu tun, aber deshalb die Beteiligten als Nicht-Techies zu sehen? Das scheint mir Quatsch zu sein. Wer bei einem Hackathon ein Projekt macht, ist ein Techie, fertig. Entsprechend ist auch das Stop Motion Video Projekt von Christian, David, Felix, Katharina und Martin ein Techie Projekt, beim Woodhack gut aufgehoben und hat sich auch den Publikumspreis als bestes Projekt gut verdient.

Idee war, fürs Recruiting ein Video zu produzieren, was ein paar der Perks zeigt, die Sevenval zu bieten hat, wie z.B. günstiges Leasing von (E-)Bikes oder wöchentliches Mitarbeiter-Frühstück. Wer das Ergebnis sieht, kann bestätigen, dass dies sehr gut gelungen ist. Nicht nur grafisch macht es einiges her, auch die Vertonung tut einiges zur Sache:

 

Weitere Projekte

Neben den oben genannten Projekten gab es noch vier weitere. Die zugehörigen Präsentationen haben mich beim Woodhack neugierig auf mehr gemacht, aber bislang konnte ich sie mir noch nicht so detailliert anschauen. Natürlich sollen diese Projekte an dieser Stelle nicht unerwähnt bleiben: Das sind Kckr Slack App, Monitoring mit Prometheus, Saliency-aware JPEG Encoder und WA Analyzer + Config Automator + Lead Machine.

Bis zum nächsten Jahr!

Back to overview