knuspermagier.de https://knuspermagier.de Der private Blog von Philipp Waldhauer Fri, 29 May 2020 04:43:53 +0200 de-DE Philipp, der alte Generator <![CDATA[Electron, die Zweite]]> https://knuspermagier.de/posts/2020/tagebuch-gerettet Wed, 27 May 2020 23:10:00 +0200 https://knuspermagier.de/posts/2020/tagebuch-gerettet Puh, da googelt man einmal falsch, schreibt einen langen Blogpost dazu, und schon kommt die Rettung per Twitter. $ yarn global add @vue/cli $ vue create tagebuch $ cd tagebuch $ vue add electron-builder $ yarn electron:serve War doch nicht so schlimm wie erwartet! Bin nach 15 Minuten quasi fertig. (Kauft Mouseless und Glyphfinder!)

Puh, da googelt man einmal falsch, schreibt einen langen Blogpost dazu, und schon kommt die Rettung per Twitter.

$ yarn global add @vue/cli
$ vue create tagebuch
$ cd tagebuch
$ vue add electron-builder
$ yarn electron:serve
tagebuch.png

War doch nicht so schlimm wie erwartet! Bin nach 15 Minuten quasi fertig.

(Kauft Mouseless und Glyphfinder!)

(→ https://knuspermagier.de/posts/2020/tagebuch-gerettet)

]]>
<![CDATA[Bye, bye, Day One]]> https://knuspermagier.de/posts/2020/bye-bye-day-one Wed, 27 May 2020 21:35:00 +0200 https://knuspermagier.de/posts/2020/bye-bye-day-one Irgendwann Ende 2011 fing ich damit an ein Tagebuch zu schreiben. Erst in einem Heftchen, kurze Zeit später per Day One. So füllte sich mein digitales Journal von Jahr zu Jahr mit Einträgen. Manchmal mehr, manchmal weniger. Teilweise habe ich Monate lange Streaks mit täglichen Einträgen, hier und da fehlt ein halbes Jahr. Letzteres ist natürlich sehr schade, aber so ist das mit mir und Habits. 18 Tage scheinen bei mir nicht zu reichen, um eines zu formen! Vor ein paar Monaten startete ich mal wieder einen Versuch, das Tagebuchschreiben zu einem festeren Bestandteil meines Tages werden zu lassen, aktualisierte Day One und kaufte sogar eine Premium-Subscription um den Dark Mode zu bekommen. Meine Freundschaft mit Day One war allerdings schon mit der Einführung von Day One 2.0 vor einigen Jahren leicht angekratzt. Statt weiter auf Dropbox oder iCloud-Sync zu setzen, bauten sie ihr eigenes Sync-System, und eine Verschlüsselung ließ lange auf sich warten. Zusätzlich kamen immer weitere Features hinzu (z.B. Tagebucheinträge Blog-mäßig veröffentlichen, wer will das? Was passiert, wenn ich aus Versehen den Button drücke?), die ich nicht brauchte und das Interface wurde immer überladener und unschöner. Damit ich das alles nicht mehr sehen muss, schrieb ich mir einen iOS Shortcut, mit dem ich Tagebucheinträge schreiben konnte, ohne Day One öffnen zu müssen. Schonmal nicht schlecht. Ein paar Tage später fiel mir dann ein, dass ich noch nicht genug Side Projects habe und baute mir einen neuen Shortcut, der einfach Textdateien im iCloud Drive ablegt, immer, wenn ich einen Tagebucheintrag schreiben will. So einfach! Ich brauche keine Bilder (die sind eh in Photos.app), kein Wetter, keine Location, etc — ein Tagebucheintrag ist ein Text, fertig aus. Ein paar Problemchen gabs natürlich noch. Zum Ersten darf die Shortcuts-App nur in den „Shortcuts“-Ordner im iCloud Drive speichern, lol. Ich schrieb also einen Cronjob auf meinem Mac, der die Dateien automatisch in ein anderes Verzeichnis zieht. Des Weiteren hätte ich die Sachen natürlich gerne verschlüsselt, auch das erledigt mein Cronjob. Als das alles ganz gut lief, kündigte ich die Premium-Subscription und schrieb einen Importer für den Day One-Export. Rund 2.000 Einträge wanderten in meine einfache Dateistruktur. Das letzte, ungelöste Problem: Ich habe keine schöne Methode mehr, die Einträge anzuzeigen, wie schade ist das denn. Mein Plan dafür war es, eine kleine Electron-App zu schreiben, die das Verzeichnis einliest, und alles schön präsentiert. So richtig wichtig war es mir die letzten Monate aber nun auch nicht, und so geriet es in Vergessenheit… Heute googelte ich mal „electron vue getting started“, öffnete drei Tabs, schloss vier Tabs, den Mac und das Arbeitszimmer. Vielleicht baue ich es doch lieber als normale Webseite. (Alle Getting Started-Guides und Boilerplates sahen nicht so aus, als könnte man in fünf Minuten, etwas halbwegs laufendes Hochziehen, das ist ja schonmal sehr abschreckend.)

Irgendwann Ende 2011 fing ich damit an ein Tagebuch zu schreiben. Erst in einem Heftchen, kurze Zeit später per Day One. So füllte sich mein digitales Journal von Jahr zu Jahr mit Einträgen. Manchmal mehr, manchmal weniger. Teilweise habe ich Monate lange Streaks mit täglichen Einträgen, hier und da fehlt ein halbes Jahr. Letzteres ist natürlich sehr schade, aber so ist das mit mir und Habits. 18 Tage scheinen bei mir nicht zu reichen, um eines zu formen!

Vor ein paar Monaten startete ich mal wieder einen Versuch, das Tagebuchschreiben zu einem festeren Bestandteil meines Tages werden zu lassen, aktualisierte Day One und kaufte sogar eine Premium-Subscription um den Dark Mode zu bekommen.

Meine Freundschaft mit Day One war allerdings schon mit der Einführung von Day One 2.0 vor einigen Jahren leicht angekratzt. Statt weiter auf Dropbox oder iCloud-Sync zu setzen, bauten sie ihr eigenes Sync-System, und eine Verschlüsselung ließ lange auf sich warten. Zusätzlich kamen immer weitere Features hinzu (z.B. Tagebucheinträge Blog-mäßig veröffentlichen, wer will das? Was passiert, wenn ich aus Versehen den Button drücke?), die ich nicht brauchte und das Interface wurde immer überladener und unschöner.

Damit ich das alles nicht mehr sehen muss, schrieb ich mir einen iOS Shortcut, mit dem ich Tagebucheinträge schreiben konnte, ohne Day One öffnen zu müssen. Schonmal nicht schlecht.

Ein paar Tage später fiel mir dann ein, dass ich noch nicht genug Side Projects habe und baute mir einen neuen Shortcut, der einfach Textdateien im iCloud Drive ablegt, immer, wenn ich einen Tagebucheintrag schreiben will. So einfach!

Ich brauche keine Bilder (die sind eh in Photos.app), kein Wetter, keine Location, etc — ein Tagebucheintrag ist ein Text, fertig aus.


Ein paar Problemchen gabs natürlich noch. Zum Ersten darf die Shortcuts-App nur in den „Shortcuts“-Ordner im iCloud Drive speichern, lol. Ich schrieb also einen Cronjob auf meinem Mac, der die Dateien automatisch in ein anderes Verzeichnis zieht.

Des Weiteren hätte ich die Sachen natürlich gerne verschlüsselt, auch das erledigt mein Cronjob.

Als das alles ganz gut lief, kündigte ich die Premium-Subscription und schrieb einen Importer für den Day One-Export. Rund 2.000 Einträge wanderten in meine einfache Dateistruktur.


Das letzte, ungelöste Problem: Ich habe keine schöne Methode mehr, die Einträge anzuzeigen, wie schade ist das denn.

Mein Plan dafür war es, eine kleine Electron-App zu schreiben, die das Verzeichnis einliest, und alles schön präsentiert. So richtig wichtig war es mir die letzten Monate aber nun auch nicht, und so geriet es in Vergessenheit…


Heute googelte ich mal „electron vue getting started“, öffnete drei Tabs, schloss vier Tabs, den Mac und das Arbeitszimmer. Vielleicht baue ich es doch lieber als normale Webseite.

(Alle Getting Started-Guides und Boilerplates sahen nicht so aus, als könnte man in fünf Minuten, etwas halbwegs laufendes Hochziehen, das ist ja schonmal sehr abschreckend.)

(→ https://knuspermagier.de/posts/2020/bye-bye-day-one)

]]>
<![CDATA[The Shapes of Code]]> https://knuspermagier.de/posts/2020/the-shapes-of-code Tue, 26 May 2020 17:20:00 +0200 https://knuspermagier.de/posts/2020/the-shapes-of-code 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.

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.

(→ https://knuspermagier.de/posts/2020/the-shapes-of-code)

]]>
<![CDATA[Ein Design für die Rezepte-App]]> https://knuspermagier.de/posts/2020/ein-design-f-r-die-rezepte-app Sun, 24 May 2020 16:10:00 +0200 https://knuspermagier.de/posts/2020/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. 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) 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!

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!

(→ https://knuspermagier.de/posts/2020/ein-design-f-r-die-rezepte-app)

]]>
<![CDATA[Apple DSGVO-Export]]> https://knuspermagier.de/posts/2020/apple-dsgvo-export Sun, 24 May 2020 15:45:00 +0200 https://knuspermagier.de/posts/2020/apple-dsgvo-export Wie gesagt, ich hab mal einen aktuellen Apple-Datenexport gezogen. Insgesamt überraschend wenig Inhalt, das Witzigste ist wohl diese sehr sinnvolle Datei.
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.

(→ https://knuspermagier.de/posts/2020/apple-dsgvo-export)

]]>
<![CDATA[Alle Fotos aus iCloud herunterladen]]> https://knuspermagier.de/posts/2020/alle-fotos-aus-icloud-herunterladen Thu, 21 May 2020 19:20:00 +0200 https://knuspermagier.de/posts/2020/alle-fotos-aus-icloud-herunterladen 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.

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.

(→ https://knuspermagier.de/posts/2020/alle-fotos-aus-icloud-herunterladen)

]]>
<![CDATA[Kindle Haul]]> https://knuspermagier.de/posts/2020/kindle-haul Thu, 21 May 2020 16:30:00 +0200 https://knuspermagier.de/posts/2020/kindle-haul Zwei Bücher, bei denen ich nicht widerstehen konnte sie zum Neuerscheinungspreis zu kaufen, als Hunger Games- und Thelen-Fanboy.
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.

(→ https://knuspermagier.de/posts/2020/kindle-haul)

]]>
<![CDATA[Fancy Suchleiste]]> https://knuspermagier.de/posts/2020/fancy-suchleiste Wed, 20 May 2020 17:40:00 +0200 https://knuspermagier.de/posts/2020/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. .suchleiste-wrp { max-width: 600px; padding: 2rem; margin: 6rem auto; } .suchleiste { padding: 2rem; border: 1px solid #efefef; font-size: 1.6rem; } .suchleiste-pill { font-size: 1.6rem; background-color: #ba193a; border-radius: 15px; padding: 1rem 2rem; margin-right: 1rem; color: white; } .suchleiste-cursor { padding-left: 0.5rem; border-right: 1px solid black; animation: fade 756ms ease-in-out infinite; } @keyframes fade { 0%{opacity: 1;} 50%{opacity: 0;} 100%{opacity: 1;} } .codeframe { display: block; width: 100%; max-width: 600px; border: 0; margin: 6rem auto; } 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!

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!

(→ https://knuspermagier.de/posts/2020/fancy-suchleiste)

]]>
<![CDATA[Small World]]> https://knuspermagier.de/posts/2020/small-world Tue, 19 May 2020 10:00:00 +0200 https://knuspermagier.de/posts/2020/small-world
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.

(→ https://knuspermagier.de/posts/2020/small-world)

]]>
<![CDATA[Suche]]> https://knuspermagier.de/posts/2020/suche Sun, 17 May 2020 17:50:00 +0200 https://knuspermagier.de/posts/2020/suche Ich habe eben mal das Such-Formular (ganz unten) reaktiviert. Endlich findet man wieder Dinge auf dieser Seite!

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

(→ https://knuspermagier.de/posts/2020/suche)

]]>