knuspermagier.de

Er bloggt noch? Krass!

Beyond the mere visual aspect of code, the shape of a piece of code can carry information by itself. Being able to decipher this information allows to glean indications about the code at a glance, even before starting to read it

The Shapes of Code auf fluentcpp.com, via Jan

Beim Programmieren geht es mir oft so, dass ich mit dem Code unzufrieden bin, weil irgendwas nicht richtig aussieht. Oft ist es einfach nur die in diesem Artikel beschriebene Form des Codes, die mich stört.

Übrigens geht es mir beim Go spielen oft ähnlich, wenn man Formen baut, die einem nicht gefallen, sind sie oft auch schlecht.

Ein Design für die Rezepte-App

Bei der Rezepte-App hänge ich so langsam fest. Je nachdem, worauf ich gerade Lust habe, baue ich ein Feature ein. Zeit zum preppen dank Corona? Endlich kann ich die Lager-Seite einbauen, damit ich aufschreiben kann, was im Keller liegt. Habe ich das fertig, könnte ich in die Rezept-Ansicht einbauen, dass direkt gehighlighted wird, welche Zutaten noch da sind, ups, da ist ja noch anderer Bug, ach und dies und das.

Am Ende ist nichts fertig und alles kaputter als vorher.

Auf wenn es natürlich Spaß macht, so wild herum zu wüten — und Spaß ist ja das einzige was für mich bei Sideprojects zählt, was wahrscheinlich der Grund ist, warum ich nie was fertig bekomme — entschied ich mich, die ganze etwas strukturierter anzugehen und legte mehrere Projekte mit Tasks in Things an.

screenshot-2020-05-24-at-16.11.34.png
Wow, der Hintergrund von Things ist gar nicht weiß?

Des Weiteren fehlten mir zur völligen Vollendung noch ein paar Designs nach denen ich mich richten kann. Seit jeher programmiere ich eigentlich ungern an Sachen, die am Ende nicht schön werden — wahrscheinlich noch ein Grund, warum ich nie was fertig bekomme.

Wie auch immer. Ich kann das zwar nicht, denn wenn ich es könnte, wär ich Designer und nicht Programmierer, denn Designer ist der coolere Job, da ist man nämlich nicht darauf angewiesen, dass man einen Designer hat, damit das Endprodukt schön ist, aber immerhin kann ich figma.com in die Adresszeile meines Browsers eingeben und ein paar Boxen aufziehen. (Ich kann natürlich auch Sketch starten, aber ich wollte hip sein)

rezepte-app-design.png

Ein paar Stunden später hatte ich ein paar Screens fertig, und auch jetzt, zwei Tage später, find ich sie sogar noch ganz gut. Fast so gut, dass ich mir vorstellen könnte, sie umzusetzen! Natürlich werde ich am Ende sicherlich noch ein paar Stunden mit Hannah die Feinheiten einarbeiten, aber ich bin halbwegs zufrieden mit dieser Grundlage.

Wird die Rezepte-App jemals fertig werden? Immerhin habe ich nach ein paar Stunden Aufräum-, Konzept- und Designarbeit jetzt einen genaueren Überblick über die Features, die ich mir wünsche, welche noch fehlen. Zusätzlich war es mal eine gute Abwechslung zum programmieren. Kann man mal machen!

screenshot-2020-05-24-at-15.48.59.png

Wie gesagt, ich hab mal einen aktuellen Apple-Datenexport gezogen. Insgesamt überraschend wenig Inhalt, das Witzigste ist wohl diese sehr sinnvolle Datei.

Die Möglichkeit, auf einen Rutsch alle Fotos von der iCloud herunterzuladen, hat Apple geschickt versteckt. Auf der Apple Privacy Website wählt man einfach die letzte Checkbox und legt noch fest, wie groß die ZIP-Dateien sein sollen, die Apple da zusammenstellt. Bingo!

Alle Fotos aus iCloud herunterladen auf vowe.net

Eine der guten Sachen, die die DSGVO uns bringt: Unternehmen müssten alle Daten exportierbar machen. Ist vielleicht ein gangbarer Weg, seine iCloud-Bibliothek regelmäßig zu sichern.

a3032fce-845c-44e8-b123-c88ee547c146.png

Zwei Bücher, bei denen ich nicht widerstehen konnte sie zum Neuerscheinungspreis zu kaufen, als Hunger Games- und Thelen-Fanboy.

Fancy Suchleiste

Stellt euch vor, ihr habt eine Rezepte-App mit einer Suche und ihr wolltet schon immer so eine Suchleiste, die ein bisschen so ist, wie in jeder halbwegs fancy Mail-App, oder so, und zwar, dass man neben der normalen Volltext-Suche auch so Facetten hat, nach denen man suchen kann. In den Mail-Apps sind das dann Sachen wie Absender und Empfänger, und hier halt zum Beispiel Zutaten oder Tags.

Nun ist die Frage, wie baut man sowas. Im Grunde ist es ein <input>-Feld, aber mit etwas fancyness, damit die Facetten automatisch erkannt und anders eingefärbt werden. Dazu soll man sie natürlich noch einfach mit einem Klick entfernen können, oder wenn man Backspace drückt, etc.

Aussehen soll es etwa so:

Zutat: Karotte Zutat: Dill lecker essen

Da ich gerne verstehe, wie etwas funktioniert, wollte ich es gerne selber bauen. Also abgesehen davon habe ich auch ca. vier Sekunden gegoogelt, aber fand auch kein npm-Package, dass das leistet. Suchte aber auch nur nach “fancy schmancy search box”.

Mein erster Gedanke war ein <input>-Feld zu nehmen, wo man Sachen eingibt, und das von einem <div> mit den gerenderten Elementen zu überdecken. Problem dabei: Wo bleibt der Cursor, und woher weiß man wo man gerade tippt? blöde Idee.

Da ich einen Blogpost daraus machen wollte, habe ich den Zwischenstand allerdings aufgehoben, hier eine Live Demo:

Nachdem ich mit der ersten sehr naiven Version nicht weiter kam, dachte ich kurz an contenteditable. Mit diesem Attribut kann man ja jedes HTML-Element zu einem Eingabefeld machen, toll! Ich las zwar in den letzten Jahren immer sehr viel Negatives, und es ist in meinem Kopf eher unter considered evil abgespeichert. Aber was solls!

Iframes sagen mehr als tausend Worte, hier also schonmal das Ergebnis:

Doch wie funktioniert es? Irgendwie low-leveliger, als mir lieb ist. Ich überwache die input-Events von meinem editierbaren <div> und entscheide für jede gedrückte Taste, was passieren soll. Letztendlich sammle ich immer alle Buchstaben in einem Buffer, und sobald ein Leerzeichen getippt wird, wird der aktuelle Buffer in ein Token-Array gespeichert und geleert. Bei nem Backspace wird der letzte Token gelöscht, etc etc.

    input(ev) {
        const type = ev.inputType;
        const char = ev.data;

        if(type === 'deleteContentBackward') {
            if(this.currentBuffer.trim().length) {
                this.currentBuffer = this.currentBuffer.substring(0, this.currentBuffer.length -1);
            } else {
                if(this.tokens.length) {
                    this.tokens.splice(this.tokens.length - 1, 1);
                }
            }
        } else {
            if(char === ' ') {
                this.tokens.push(this.currentBuffer);
                this.currentBuffer = ' ';
            }

            this.currentBuffer += char;
        }

        this.$refs.wurst.innerHTML = 
            this.render(this.tokens) + ' ' + this.currentBuffer;

        placeCaretAtEnd(this.$refs.wurst);
    },

Immer wenn ich solchen Code schreibe, der irgendwas mit einzelnen Zeichen macht, fühle ich mich schmutzig und denke, dass ich lieber eine fertige Library nehmen sollte, aber Ziel dieser Aktion war es ja, zu verstehen, wie das funktionieren könnte. Daher waschen wir uns kurz die Hände und machen weiter!

Nach jedem Event rendere ich dann alle Tokens neu in das <div> und setze den Cursor mit einer von Stack Overflow geklauten Funktion wieder ans Ende (hab kein Interesse daran, zu verstehen, wie man den Focus ans Ende setzt)

Tatsächlich funktioniert das schon ganz gut so und nach 20 Minuten rumprobieren war meine Neugier auch erstmal gestillt.

Der nächste Schritt wäre jetzt, die einzelnen Tokens als Vue-Komponenten zu rendern, damit ich ihnen mehr Funktionen geben kann. Ob das klappt, erzähle ich beim nächsten Mal!

Martin Suter
Small World
★★★★★

Nach einem Podcast-Auftritt dachte ich, ich versuchs mal mit einem Buch von Martin Suter. Ich bereute es nicht. Es fängt zwar etwas langsam an, wird dann plötzlich sehr hart und zum Ende hin spannend! Sehr schön.

Ich habe eben mal das Such-Formular (ganz unten) reaktiviert. Endlich findet man wieder Dinge auf dieser Seite!

Kickstarter-Erfolge

Ich nehme mal das Stöckchen von Raphael (unsere Blog-Blase wächst und gedeiht!!) und nutze die Chance hier von meinen Kickstarter-Erfolgen zu erzählen.

Ehrlich gesagt bin ich überrascht, dass mein Account überhaupt noch existiert, denn eigentlich bin ich so enttäuscht von dem ganzen Müll, den es da nur noch gibt, dass ich dachte, ich hätte den Account mittlerweile gelöscht.

Nun gut, hier die große Liste meiner... gebackenen Sachen:


Broken Sword - the Serpents Curse

Ich liebte Baphomets Fluch, auch wenn ich es in meiner Jugend nie zu Ende spielte. Als der Kickstarter für Teil 5 kam, bezahlte ich 100$ für ein Super-Mega-Paket, spielte endlich mal den ersten Teil durch und ignorierte erfolgreich alle anderen Teile, inklusive dem fünften. Immerhin verkaufte ich die Collectors Edition irgendwann für 20 Mark auf eBay.


Planetary Annihilation

Ein weiteres PC-Spiel, was gut aussah. 40$, nie gespielt.


Saving Glass Negative Images

Keine Ahnung, warum ich hier 10$ rein kippte.


Maia

Inspired heavily by the 70's Sci-fi aesthetic, Maia is a colony management simulator where you must keep your colonists safe, fed and happy.

Kam raus, interessierte mich nicht mehr. 10 Pfund.


Elite: Dangerous

Einer der großen Weltraum-Simulatoren, die ewig brauchten um raus zu kommen. Gibts Star Citizen mittlerweile? 20 Pfund!

img_4376.jpg

Espruino

Ein Arduino, den man aber mit JavaScript befüllen kann. 74 Pfund kostete es mich, aber es kam an und ich hab auch ein paar Quatschsachen damit gemacht, zum Beispiel diese Lichterkette 👍🏻


Cartography

Ein Brettspiel. Nie gespielt, aber immerhin kam es an! 50$.


RHINOSHIELD

Eine schrottige, hässliche iPhone-Hülle für 15 Pfund.


Exploding Kittens

Ein Kartenspiel von Oatmeal. Kam an, wurde auch häufiger gespielt. Frage mich nur, warum ich 50$ dafür zahlte. 👍


Domus Affordable Smart Home Automation

Es sollten günstige smarte Steckdosen werden, ich zahlte 69 Kanadische Dollar und bekam niemals etwas geliefert.


1972 - Nakagin Capsule Tower

Ein Fotobuch über ein einen Turm in Japan. Kam an, war ganz schön und naja, 75$ sind für ein Fotobuch fast noch ein okayer Betrag.


Wie oben schon gesagt, eigentlich dachte ich, der Account wäre weg. Ich habe nicht vor, noch weiter Geld in Kickstarter-Projekte zu versenken, und das gar nicht mal, weil meine bisherigen Projekte so erfolglos waren — der Großteil wurde ausgeliefert — sondern, weil meine Aufmerksamkeitsspanne dafür einfach zu gering ist. Wenn das Spiel, das ich vor 2 Jahren unterstützt habe, endlich rauskommt, interessiert es mich einfach meistens nicht mehr.

Hating in Public

Nils erwähnte letztens lobend diese Learning in Public-Liste von Tania Rascia. Im ersten Moment dachte ich natürlich sofort, dass ich das auch brauche. Toll! Eine weitere Liste!

Nach weiterem Herumdenken fiel mir allerdings auf, dass ich so gar nicht arbeite, bzw. lerne. Selten habe ich den Gedanken, dass ich mich jetzt dringend mit Webpack oder Drag and Drop beschäftigen will, bei mir kommt das eher auf Projektbasis. Brauche ich für meine Rezepte-App eine gute Volltext-Suche? Okay, dann lerne ich jetzt mal Elastic Search. (Oder RediSearch, was ich viel süßer finde!).

Was ich allerdings mal anfangen könnte, wäre eine Liste von Sachen, die ich gerne weniger hassen würde. Es gibt so ein paar Technologien, mit denen ich schon ein bisschen was gemacht habe, wo der Funke aber noch nicht übergesprungen ist. Ich weiß, Hass ist ein starkes Wort, nennen wir es vielleicht… Abneigung.

03107e46-2c8a-4bed-af8a-3d0c76f8e2f5.jpeg
Ich, beim Navigieren durch den Dschungel der Web-Frameworks, 2017

Eine dieser Sache ist React. Immer wenn ich React-Code sehe, möchte ich am Liebsten alles schließen und wegrennen — ich bin einfach kein Freund von JSX und der allgemeinen Art wie man React-Code schreibt. Hauptsache alles super kurz und clever.

Also in Wirklichkeit liegt es natürlich daran, dass ich mich bisher nicht genügend damit beschäftigt habe. Ich habe die Hoffnung, dass mir das alles mit mehr Praxis auch schöner vorkommt. Vielleicht sogar JSX?


Zweiter Punkt auf der Liste: Docker. Schon öfter benutzt, aber immer nervt mich etwas tierisch, oder klappte einfach nicht so, wie ich es mir vorstellte. Am Ende krieg ich das meiste dann doch immer zum Laufen, hatte bisher aber auch noch keinen „wow, wie geil is das denn, ich will nur noch damit arbeiten“-Moment.


Was die beiden Sachen verbindet ist wahrscheinlich die Tatsache, dass sie eine ziemliche Lernkurve aufzuweisen haben und ich eher mit Sachen klar komme, die sofort funktionieren, und wo ich sofort den Benefit sehe. Hallo Vue.js! It just works.

Die andere Sache ist wieder, dass ich gerne Projektbasiert arbeite, und bei welchem Projekt wäre es denn von Vorteil React zu benutzen, statt Vue, was ich schon kenne (und liebe). In meiner Freizeit habe ich keine Kapazität dafür, mir zwei Dinge anzueignen, die mehr oder weniger für das gleiche Einsatzgebiet da sind.


Wahrscheinlich sollte ich die Liste eher „Dinge, die ich gerne weniger hassen würde, weil sie vielleicht für meinen Lebenslauf wichtig sind“ nennen. React und Docker sind so angesagt, da fühlt man sich ganz schlecht, wenn man nur Vue kann und seine Applikationen noch auf echten VMs laufen lässt. Wie nennt man das Gefühl? Technik-FOMO?

Oder eher Fear of abgehängt werden?

e287f70f-b9ce-44c1-bc1d-7544d5cf0a48.jpeg
Dieses Schaf hat noch nie ein Kubernetes-Cluster aufgesetzt und es ist ihm egal.

„Liste, der Dinge, die gerade angesagt sind und mit denen ich mich beschäftigen sollte, die ich aber nie abarbeiten werde, da ich in der Freizeit keine Lust habe, mich mit Sachen zu beschäftigen, die mir keinen Spaß bereiten, aber vielleicht hab ich ja doch noch irgendwann eine Projekt-Idee, bei der ich eine dieser Sachen einsetzen kann, also besser mal aufschreiben, bevor ich sie vergesse.“


Also eigentlich wollte ich hauptsächlich sagen, wie cool ich den Blog von Tania Rascia finde, dann fiel mir aber ein, dass ich mal wieder über JSX und Docker heulen wollte. Upsi.