TLTR ⚡; In diesem Artikel führe ich dich durch meine persönliche Reise, von Dezember 2023 bis heute – eine viermonatige Zeitreise, in der ich mich nach fast 15 Jahren wieder intensiver mit JavaScript beschäftigt habe. Warum fange ich überhaupt wieder mit der Programmierung an, und welche unerwarteten Hürden haben sich mir offenbart?
Das Fundament unserer Arbeit als UX-Designer: Struktur
Es ist manchmal allzu leicht, die grundlegenden Prinzipien zu vergessen. Dort stand ich, voller Eifer, meine ersten Plugins der Welt zu präsentieren. Nachdem ich den ersten Indexly-Prototyp fertiggestellt hatte, fand ich mich in einem scheinbar endlosen Kreislauf von Refactoring und strukturellen Anpassungen wieder. Wie es bei allen persönlichen Projekten der Fall ist, war auch dies ein guter Reminder, wie wichtig die richtige Planung und unser geliebter Designprozess eigentlich sind. Natürlich dachte ich bei meinem eigenen Projekt: Hey, ich weiß doch genau, was ich bauen will, da brauche ich kein Konzept, Design oder irgendeine Art von Planung – immerhin habe ich doch schon alles in meinem Kopf! Im kommenden Prozess sollte ich noch öfter merken, wie falsch ich eigentlich lag und wie viel extra Arbeit ich mir aufgebürdet habe. Aus eigener Erfahrung (und als Reminder an mein zukünftiges Ich): Bevor du dich in die Schlacht stürzt, nimm dir die Zeit für eine solide Planung, das beinhaltet sowohl das Konzept als auch das Design. Diese sollen dich im Prozess dabei unterstützen, auf Kurs zu bleiben und nicht jede Abfahrt mitzunehmen. Egal ob es der MVP-Ansatz ist oder die YAGNI-Philosophie – "You aren’t gonna need it". Setze dir Grenzen und fokussiere dich auf das, was du umsetzen willst. Sobald das erste Fundament steht, kannst du immer noch ausbauen. Setze nur das um, was du tatsächlich in dem Moment für den Projektstand benötigst, und versuche, deine Arbeit nicht zu sehr mit "hätte, könnte, sollte" aufzublähen. Das kannst du immer noch machen, wenn es benötigt wird, im aktuellen Zustand würde es das Projekt nur unnötig verkomplizieren und den gesamten Projektverlauf nach hinten ziehen.
Figmas Grenzen
Meine erste naive Annahme war, dass Figma bzw. die Plugins reines JavaScript sind und ich somit auch alle üblichen Bordmittel und Funktionen nutzen könnte – dies sollte sich im späteren Prozess als gravierender Denkfehler herausstellen. Zudem ist die Strukturierung der Daten auch noch relativ kompliziert, da es im Kern nur die code.ts und die UI.html gibt. Einfach weitere HTML-Daten oder einfache CSS-Daten zu implementieren, ist leider nicht ohne Weiteres möglich. Was das Warten und Schreiben meines Codes unnötig kompliziert gemacht hat, besonders mit meinem eigenen Anspruch, alles in der Vanilla-Programmierung zu handhaben, ohne den Einsatz von Third-Party-Libraries oder Frameworks (Typescript mal außen vor). Objektorientierte Programmierung (OOP) oder Microservices sind damit erstmal raus – zumindest für die Struktur, die ich mir vorgestellt hatte. Mit dem Release von Notely machte ich einige Anpassungen und habe meine Struktur soweit angepasst, dass ich alles über JavaScript in mein Plugin lade, um so meine Plugins step by step zu modularisieren und wieder wartbar zu machen. Im Prozess habe ich mir meine eigene Plugin-Boilerplate erstellt, damit ich zum einen eine Codebasis habe, die ich für alle Plugins nutzen kann, und mir zum anderen keine Gedanken um die UI machen muss – ohne, dass meine Plugin-UI zu sehr nach dem typischen Einheitsbrei aussieht.
Datenschutz
Die Sicherstellung der Sicherheit meiner Plugins stellte eine erhebliche Herausforderung dar. Es war für mich keine Option, einen Webservice anzuschließen oder irgendeine andere Art von Third-Party-Service zu nutzen, alles sollte "vanilla" sein und jede einzelne Codezeile in meinem Plugin sollte meinen eigenen Ansprüchen genügen. Somit stellte ich direkt am Anfang einige Regeln auf:
- Kein Fremdcode.
- Alles soweit wie möglich in Vanilla JavaScript, CSS, HTML.
- Keine Kommunikation mit dem Internet – die Nutzerdaten sollen beim Nutzer bleiben und nicht mit externen Diensten geteilt werden.
Dies bringt natürlich einige Herausforderungen mit sich. Alles, was man sich normalerweise mit der Anbindung von irgendwelchen Plugins erleichtern könnte, war natürlich außen vor. Auch die Datenspeicherung sollte im späteren Prozess noch zur Herausforderung werden. Indexly und auch alle Einstellungen sollten zu 100% lokal funktionieren. Mit dieser Prämisse stellte ich einige Experimente an. So schreibt Indexly seine Einstellungen weder in den Local Storage noch in irgendeinen Webservice, stattdessen nutzt Indexly die eigenen "Table of Contents" als Cache für gesetzte Einstellungen. Sobald der Nutzer in Figma ein Indexsheet auswählt, werden auch genau diese Einstellungen wieder auf Indexly übertragen. Mittlerweile habe ich drei Plugins im Figma-Store, alle drei folgen meinen gesetzten Prinzipien. Mal wird ein unsichtbares Objekt in Figma als Datenspeicher missbraucht oder sogar direkt in Figma oder im verschlüsselten Local Storage geschrieben.
Meine Sichtbarkeit nach außen
Es gestaltete sich deutlich schwieriger als erwartet, meine Plugins in die Hände der ersten Nutzer zu bekommen. Naiverweise habe ich es mir im Nachhinein wohl wie folgt vorgestellt:
- Geile Plugins erstellen.
- …
- Viele Nutzer!
Die harsche Realität sieht allerdings ganz anders aus. Am Anfang habe ich gehofft, dass ich mich ein wenig auf die offiziellen Figma-Kanäle verlassen könnte, immerhin würden sie nach ein paar Postings bestimmt meine Plugins aufgreifen und mal reposten – dem war natürlich nicht so. Wenn man nicht gerade hunderttausend Follower hat oder Twitter Premium nutzt, dann scheint man einfach keine Chance zu haben. Dennoch merkte ich, dass sich mehr und mehr Nutzer mit meinen Plugins beschäftigten, und diese scheinbar auch ganz gerne nutzen, auch wenn die Verbreitung deutlich langsamer voranging, als ich es mir vorgestellt habe – freue ich mich doch über jeden einzelnen Nut
zer und jeden neuen hart erkämpften Follower auf X/Twitter. Ich habe vor einer Ewigkeit @RaikenStudio für Sideprojekte erstellt und diesen für meine Plugins reaktiviert. Hier zeigten sich dann aber auch schnell die Grenzen. Einfach mal Sichtbarkeit gewinnen war nicht, so begann ich Twitter einfach immer mehr als kleinen Dev-Log zu nutzen, aber wirklich Reichweite hatte ich keine und es wollte auch bis heute nicht wirklich mehr werden. Schon bald sollte ich auch herausfinden, woran das lag.
Nach wenigen Wochen bekam ich von X/Twitter folgende Meldung angezeigt: "Hey, deine Tweets sind jetzt nach 60 Tweets für die Außenwelt sichtbar!"… Ernsthaft, was zum Teufel? Das unterstrich die harte Realität, dass es praktisch unmöglich ist, irgendeine organische Reichweite mittels X/Twitter zu erlangen, wenn man nicht gerade bereit ist, auch dafür zu zahlen. In Zukunft werde ich sicherlich mit den Premium-Optionen experimentieren, alleine um zu sehen, ob sich da tatsächlich etwas tut und der extra Preis wert ist – hier halte ich dich gerne auf dem Laufenden.
Lektion gelernt
Meine Ansprüche und Ambitionen waren wie Brandbeschleuniger für meine noch vorhandene Freizeit und brannten sich durch das bisschen an Freizeit, was noch da war. In Kombination mit der fehlenden Konzeption und dem Design führten sie zu einigen durchgemachten Feierabenden und Wochenenden. Ein schier endloser Kreislauf von Refactorings und Umbauten. An sich sollte mir dieses Szenario mehr als vertraut sein, immerhin mache ich doch beruflich nichts anderes, als meine Partner und Kunden zu den internen Entwicklungsprozessen zu beraten und ja, manchmal auch zu belehren. Dennoch, gefangen im Optimismus, glaubte ich, meine Reise – dieser Solo-Flug – würde anders verlaufen, immerhin bin ich doch Profi und habe eine ganz konkrete Vorstellung in meinem Kopf, was soll da bitte schiefgehen? (Berühmte letzte Worte). Nun habe ich meine Lektion gelernt und werde mehr darauf achten, auch bei privaten Projekten eine solide Basis zu erarbeiten, bevor ich achtlos meine eigenen wertvollen Ressourcen verschwende... oder auch nicht… Während ich diesen Artikel schreibe, finde ich mich mit denselben Dilemmata bei meinem neuesten Projekt, meinem Notely Plugin, wieder. Trotz des sehr guten technischen Konzepts drohte das Plugin zu einem endlosen Projekt zu werden, wer braucht schon ein Design?... Jup, auch hier habe ich mich wieder selbst überlistet, und die erhoffte Zeitersparnis sollte zu einem wahren Zeitfresser mutieren. Fast forward, sind meine Plugins live, wenn dich der Artikel ein wenig neugierig gemacht hat, riskiere gerne einen Blick! Über Feedback und Anregungen würde ich mich sehr freuen:
Hast du schon ähnliche Erfahrungen gemacht, oder würdest dich gerne austauschen, vielleicht hast du auch noch Feedback für mich? Dann freue ich mich auf deinen Kommentar.
Bis jetzt hat noch keiner kommentiert. Sei der/die erste!