Digi Craft Updates

Eine Rückschau auf die erste Digi Craft Version. Darunter sichtbar die erste Version des Passwortgenerators, Ideen für eine Workflow-Management-, Editor-App und Skripte mit Aufgaben und Übungen zum Programmieren. Ich plane sehr stark, eine Editor-App mit KI-Unterstützung zu schreiben, um mich mal mit der entsprechenden API auseinanderzusetzen, und danach weiteren Ideen rund um programmatische KI-Nutzung nachzugehen.

Einstieg in 3D für geplante Musikvideos und 3D Webanwendungen. Das Logo wurde mit Blender modelliert und mit Three.js und React Three Fiber in die Webseite eingebettet. 10 Stunden hat es dann doch gedauert für den erneuten Einstieg in Blender und die Umsetzung mit dem unbekannten Three.js.

Nach unglaublich langer Zeit ist neue Musik von mir fertig geworden, in einem Zug, als zusammenhängender Vollzeit-Produktionsprozess. Die Qualität konnte gesteigert werden, sowie die Zuverlässigkeit am Ende brauchbares, gut verkäufliches Material zu haben. Einer erfolgreichen Musikproduzentenkarriere steht damit nichts mehr im Wege.

Vieles muss für das neue Framework angepasst werden, wozu Zeit und Lust fehlt. Erst mal fliegt nur alles raus, was für eine erste Präsentation des neuen Frameworks nicht in absehbarer Zeit umgesetzt werden kann.

Da ich gerade eher Content erzeuge, fällt mir auf, dass meine derzeitige Webseite eigentlich völlig ok ist. Gibt Fehler und Responsive müsste man etwas verbessern, aber sonst und vom Design her sogar besser als die Ideen, die ich zuletzt hatte.

Das neue Design soll mehr für Anwendungen passen, die auch relativ viel Text haben, so wie bei meinem Content eigentlich. Ein Beispiel könnten Anwendungen mit viel Textkomponenten sein, informationsbasierte Anwendungen mit Grafiken, Charts, News, ein Intranet vielleicht.

Das Framework bietet ein Gerüst für eine Fullstack-Webanwendung in TypeScript in einem PNPM Monorepo. Es gibt ein System für die Organisation der beteiligten Komponenten, einen headless Backend und vorgefertigte Buildprozesse. Es gibt ein Content Management System auf Entwicklerebene. D.h. ein HTML-Kundiger, kann Content erstellen, ohne ein extra CMS Backend. Das Framework ist auf einem mittleren Entwicklungsstand. Einige Sachen sind schon gemacht, vieles wird sich aber wohl noch ändern und kommt dazu.

Das Framework gibt es kostenlos, bleibt aber Eigentum von Digi Craft zum Stand des Projektstarts bis zum Ende mit allen Weiterentwicklungen. Der Quellcode ist offen für alle Mitarbeitenden aber nicht darüber hinaus.

Mit KI die Imagery zu den Tracks gemacht. Finde, das sind unglaubliche Bilder. Teilweise so fremd und nah zugleich. Wie ein neuartiges Fokusglas oder Kaleidoskop, das man in die Finger bekommen hat.

Die letzten Entwicklungen haben mich bewogen, mich erneut der Musik zu widmen. Da die Produktionsmöglichkeiten noch in Arbeit sind, habe ich erst mal die Präsentationsseite verschönert und heraufgestuft.

Auf der Suche nach einer Cross-Platform Desktop-Technologie habe ich schließlich Java Swing und C# MAUI aussortiert und bin wieder zurück zu den Webtechnologien, die für den Desktop geeignet sind. Java Swing ist zwar ausgereift, aber doch sehr uninteressant geworden. Die Visual Studio IDE kann Jetbrains nicht das Wasser reichen und Jetbrains Rider ist mir momentan zu teuer.

Folglich bliebe Electron, mit dem ich schon Erfahrung habe. Auf der Suche nach Alternativen bin ich aber auf Rust mit Tauri gestoßen, was als performantere und sicherere Alternative zu Electron gehandelt wird. Mittels WebAssembly kann man auch Webseiten nur in Rust schreiben. WebAsemmbly gilt zwar noch nicht als ernsthafter Konkurrent zu JavaScript, das könnte sich aber in der Zukunft ändern. Der Vorteil ist hier, dass man eine Programmiersprache der Wahl verwenden kann und einige Programmiersprachen, darunter C++, C#, Java, Python, Go, Rust und TypeScript, bereits nach WebAssembly kompilieren.

Das heißt, mein neuer Ansatz lautet nicht TypeScript für Client und Server, sondern WebAssembly und Rust. Um mich in Rust einzulernen wird es zunächst ein kleines Konsolenprojekt geben, an dem ich bereits arbeite und danach entweder eine Desktop-App mit Tauri oder WebAssemblys für meine Webseite.

Nach einigen Tagen zäher Auseinandersetzung mit Paket- und Buildmanagern, steht nun ein Monorepo-Projekt, das man zwar noch manuell builden muss, sich aber auf die grundlegenden Bausteine (pnpm/workspaces, tsconfig, noch ohne webpack config) beschränkt.

Bei der vorherigen Version von Digi Craft ging es darum, möglichst schnell, möglichst viel Content, vorzugsweise Apps zu erzeugen. Bei der bisherigen Neuumsetzung zeichnet sich bereits ab, dass mehr an der Basis gearbeitet werden muss, um späteren Build- und Deployment-Problemen nicht nackt gegenüberzustehen. Genauso soll die neue Architektur sehr sorgfältig ausgearbeitet werden, um das geplante Spektrum an Apps und Tools einheitlich tragen zu können.

Diesmal soll es auch mehr fürs Auge geben. Dafür soll ein SVG Modul sorgen, das sowohl als Übungsplatz für SVG, als auch als Basis für die SVG-Editor-App dienen soll. Der für meine Verhältnisse riesige SVG Editor hat schon eine Menge Ideen und wird meine Fähigkeit, größere Projekte umzusetzen und mit TypeScript/React umzugehen, weiter verbessern.

Nur ein Bild bleibt vom bisherigen Entwicklungsstand. Die Komplexität fällt aus dem Rahmen und erfordert ein Redesign an mehreren Stellen. Deshalb wird neu mit verbesserter Architektur begonnen. Die bereits fertigen Teile werden angepasst und nach und nach umgezogen.

Coder's SVG Editor mit funktionierendem Tutorial.

Ganz selten klatscht man einen Algo hin, der dann auf Anhieb funktioniert. Hier wird im path: Command[] -Array eine Koordinate über ihren x/y key gesucht, um ihren x/y Wert zu ändern. (Arbeitscode, keine optimierte Form.)

case types.path: {
   let command: Command
   let commandKey: string
   e.path!.some(com => {
      const keys = Object.keys(com)
      let found = false
      keys.some(key => {
         if (key !== 'type' && formItem[0] in <Coord>com[key]) {
            found = true
            command = com
            commandKey = key
            return
         }
      })
      if (found) return com
   })
   const idx = e.path?.indexOf(command!)
   const part = command![commandKey!]! as Coord
   const keys = Object.keys(part)
   part[keys[0]] = part[keys[0]] + (x ?? 0)
   part[keys[1]] = part[keys[1]] + (y ?? 0)
   command![commandKey!]! = part
   e.path!.splice(idx!, 1, command!)
}
						

Source Code Ansicht hinzugefügt. Kommentare folgen.

Eine Radio App für mich.

Erfasse deine Arbeitszeit nach dem neuen Arbeitszeitmodell.

Programmiert in 10 Stunden - 489 Codezeilen - 49 Zeilen/Stunde.

Features:

• Anzeige eines Jahreskalenders.
• Eingeben der Arbeitszeit für jeden Tag.
• Berechnung der Freizeit aus der geleisteten Mehrzeit.

Erstelle Listen mit Der Entscheider und lass dir die Entscheidung abnehmen.

Programmiert in 9 Stunden - 384 Codezeilen - 42 Zeilen/Stunde.

Features:

• Entscheidungslisten erstellen
• Zufallsgenerator, um ein Listenelement auszuwählen

Der Chess Notation Trainer soll Schachanfängern den Einstieg in die Eröffnungstheorie erleichtern.

Programmiert in 42 Stunden - 1670 Codezeilen - 40 Zeilen/Stunde.

Features:

• Figuren mit Maus und Texteingabe bewegen.
• Exakter Zehntelsekunden Zeitgeber, um Rekorde festzuhalten.
• Verschiedene Eröffnungen und bekannte Partien zum üben.

Eine Tool-Idee aus Andrew Huberman's Forschung, das ein Defizit der alltäglichen "Augenarbeit" beheben soll.

Aufgabe: "ich brauche eine javascript funktion, die aus eine wert von 1 bis 10 zwei werte erzeugt, die sich diametral von 0.1 bis 1 bewegen."

Verstanden? Chat GPT jedenfalls hat und haut das einfach so raus:

Es gibt 4 Einstellung für die Helligkeit der Seite:

Der dunkle Modus spart Energie; helle Schrift auf dunklem Hintergrund soll besser für die Augen sein. In einer hellen Umgebung ist das aber eher anstrengend für die Augen.

Jetzt musste ich doch noch schnell ein Tool für mich schreiben. In Erfolge kann man seine Erfolge festhalten. (Programmiert an 1 Tag)

Das soll fürs erste alles sein. Der Rubel muss wieder rollen. Die gesteckten Ziele, Homepage nach React/Next, Redesign des Passwortgenerators/Long Pass Maker, allgemein die Weiterbildung in TypeScript und React wurden erreicht. Seit Dezember 2022 120 Stunden, also 3 Wochen für das vorliegende Werk inklusive Einarbeitung in die Bibliotheken, Frameworks und in TypeScript, ohne die Wörterdatenbank. In der nächsten Zeit wird ein "Web Application Security" Kurs bearbeitet. Vielleicht gibt's noch Zeit für zwei vielversprechende Tools.

In diesem Update:

• Änderungen am Layout, andere Schrift. Das UI-Framework wurde erweitert.
• Das "Digi Craft" Logo als React Komponente. Der Schriftzug wird programmatisch erzeugt. Animation und ein vollständiges Alphabet war gewünscht, fällt aber aus dem Zeitrahmen.
• Die Musiktitel wurden kommentiert.

Der Passwortgenerator erreicht den 'Usable' State und heißt jetzt Long Pass Maker.

• Bei der Erweiterung des Zahlen(reihen)ratespiels kam zum ersten mal ein Reducer zum Einsatz, der das State-Handling vereinfacht. Link
• Für das Handling des LocalStorage im Zuge der Programmierung einer Option zur dauerhaften Anzeige von extern eingebundenen Bildern wurde eine Custom Hook gebaut. Link
• Für die Formularzeilen des Passwortgenerators wurde mittels Context und State Custom Hook ein lokaler Store gebaut, der Funktionalität für Zeilenbearbeitung und API Aufrufe aus den Komponenten auslagert und so die Beherrschbarkeit des Source Codes verbessert.

Man kann schon sagen, dass das Thema Hooks nicht ganz einfach ist am Anfang.

Das kleinste Spiel der (Programmier-) Welt mit Leveln! Link

Die vormals auf Facebook gefplegte Linkliste wurde teilweise auf digi-craft übertragen.

Der seit der ersten Webseitenversion existierende Beitrag zu moderneren Passwörtern, der als Begründung für den Passwortgenerator steht, wurde überarbeitet und erweitert.

Im Zuge des Redesigns des Passwortgenerators wurde der Laravel-Backend durch Express.js ersetzt. Express.js ist ein Web Application Framework, mit dem man vorzugsweise REST APIs umsetzt.

Die Digi Craft Homepage wurde auf Next.js umgesetzt. Mit Next.js werden mit React geschriebene Webseiten statisch vorgeneriert und sind somit zugänglicher für Suchmaschinenindizierung.

Das kleine DevOps-Tool "Pasteback" zeigt sich als recht nützlich. Nicht nur als Verzeichnis- und Befehlsspeicher, auch als Mini-Wiki oder Bookmark-Speicher - jede Art von One-Liner und auch mehrzeilig kann mit wenigen, kurzen Eingaben das Clipboard mit dem häufig genutzten Text befüllt werden. Programmiert in Go für WSL.

Nach sieben Tagen Bearbeitung erreicht das DJ-Tool "mixmatch" den "usable" Status und wartet auf frische Daten zur Bestimmung der notwendigsten Features. Programmiert in JavaScript/React/Electron.

Wieder ein bisschen schlauer bei HTML/CSS/JavaScript/Responsive geht die neue, rein statische Homepage online.

Ein kleines JavaScript Build-Tool sorgt dafür, dass die gemeinsamen HTML Seitenteile aus einem Template in die einzelnen Unterseiten kopiert werden. So kann auf JavaScript oder einen Backend verzichtet werden.

Die vormalige React Single Page Homepage wird aus Gründen der Erreichbarkeit und Kompatibilität auf exotischen Systemen nicht fortgesetzt, ist aber weiterhin über den Album-Bereich zugreifbar (soon).