knuspermagier.de

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:

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!

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!

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.

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?

„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.

Zucchini-Käse-Puffer

Früher gab es ein viel besseres Rezept für Zucchini-Käse-Puffer, mit Kicherbsenmehl, Feta und ohne Eier. Achja und Salat mit Cranberries und Orangen-Soße! Dieses Rezept dagegen ist echt stark mittelmäßig.

(Hatte die Karotte leider schon weggetuppert, daher durch eine Spitzpaprika ersetzt. Farblich schön!)

★★☆☆☆

Mein Problem mit Plex

Seit ein paar Monaten habe ich einen Plex-Server im Betrieb, auf dem ich ein paar Sachen lagere, zum Beispiel Konzert-Videos von YouTube, Dinge aus Mediatheken (danke, youtube-dl) und so Kram.

Umso mehr ich es benutze, umso genervter bin ich allerdings. Klar funktionieren die Apps gut und so, aber es ist so überladen mit Features, die keiner braucht.

Angefangen bei der Benennung der Dateien, damit alles erkannt wird, über die ganzen Standard-Menüpunkte, die keiner braucht und dann das ganze Transcoding, dass man gefühlt an vierhundert Stellen abschalten muss, weil der Raspberry es nicht packt und auch gar nichts transcoded werden muss, da alle Geräte h624 abspielen können.

Eigentlich will ich einfach nur ein Webinterface mit Thumbnails, und wenn man eins anklickt, geht ein HTML5-Videoplayer auf. Hätte man da nicht das doofe Problem, dass es natürlich nicht auf dem Apple TV geht und vielleicht will man irgendwann auch noch ein Offline-Feature für die nächste Bahnfahrt in 4.000 Jahren.

Also doch lieber Plex. Oder etwas anders? Markus empfahl mir letztens Jellyfin, aber das scheint keine Apple TV-App zu haben. Was gibts sonst noch für Alternativen?

Gefüllte Maxi-Tortellini in Spinatrahm

Normalerweise nehmen wir solche Rezepte ja nicht, weil zu langweilig sind. Diese Woche gabs aber wohl nichts anderes! War ok, die Walnüsse in Chili-Öl waren ganz witzig!

★★★★☆