Mit dem Open-Source-Tool NSIS lassen sich über Script-Dateien, Installer für Windows erstellen. Dabei gibt es unzählige Optionen und Anpassungsmöglichkeiten. Das Erstellen eines rudimentären Installers ist dadurch leider aufwändig. Hat man sich aber einmal alle benötigten Features zusammengesucht stehen die erstellten Installer kommerziellen Lösungen in nichts nach. NSIS wurde von den Machern von Winamp ins Leben gerufen und wird auch bei großen kommerziellen Produkten eingesetzt.

Nachfolgen ein Beispiel-Script zum Erstellen eines Installers:

!include "MUI2.nsh"

Name "ragersComicImporter"
OutFile "ragersComicImporter Setup.exe"

InstallDir "$PROGRAMFILES\ragersComicImporter"
RequestExecutionLevel admin
Unicode True


!define MUI_ABORTWARNING
!define MUI_ICON "..\public\icons\icon.ico"
!define MUI_HEADERIMAGE_RIGHT
!define MUI_WELCOMEFINISHPAGE_BITMAP "..\public\images\Wizard.bmp"

;Pages
!insertmacro MUI_PAGE_WELCOME
!insertmacro MUI_PAGE_LICENSE "..\LICENSES.md"
!insertmacro MUI_PAGE_DIRECTORY
!insertmacro MUI_PAGE_INSTFILES

!insertmacro MUI_LANGUAGE "English"

Section 
    SetOutPath $INSTDIR
    WriteUninstaller $INSTDIR\uninstaller.exe
    # File /r ..\dist\*
    File ..\dist\icon.ico

    CreateShortcut "$SMPROGRAMS\ragersComicImporter.lnk" "$INSTDIR\ragersComicImporter.exe" "$INSTDIR\icon.ico"
    CreateShortcut "$DESKTOP\ragersComicImporter.lnk" "$INSTDIR\ragersComicImporter.exe" "$INSTDIR\icon.ico"

    WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\ragersComicImporter" \
                 "DisplayName" "ragersComicImporter"
    WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\ragersComicImporter" \
                 "DisplayIcon" "$INSTDIR\icon.ico"
    WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\ragersComicImporter" \
                 "Publisher" "ragerWorks"
    WriteRegStr HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\ragersComicImporter" \
                    "UninstallString" '"$INSTDIR\uninstaller.exe"'

SectionEnd

Section "uninstall"
    Delete "$INSTDIR\uninstaller.exe"
    Delete "$SMPROGRAMS\ragersComicImporter.lnk"
    Delete "$DESKTOP\ragersComicImporter.lnk"

    DeleteRegKey HKLM "Software\Microsoft\Windows\CurrentVersion\Uninstall\ragersComicImporter"

    RMDir  /r $INSTDIR
SectionEnd

Bei tilt.js handelt es sich um eine Java-Script-Bibliothek zum Erstellen von Tilt-Effekten. Diese können auf beliebige HTML-Elemente angewendet werden. Ursprünglich nur für jQuery gibt es inzwischen sowohl eine Vanilla.js als auch eine React-Variante. Mit dem Tilt-Effekten können überraschende Eyecatcher erstellt werden. Ein Beispiel ist über diesem Text zu sehen. Um den Effekt zu Aktiveren ist es notwendig mit der Maus über den Button "Hallo Welt" zu fahren.

NodeGui und React NodeGui sind zwei neue Bindings von Node.js an Qt. React NodeGui setzt dabei auf NodeGui. Mit den beiden Bibliotheken können GUIs für Windows, Linux und MacOs erstellt werden. Man merkt an allen Enden das es sich noch um zwei sehr junge Bibliotheken handelt. Vor allem in React NodeGui sind nur Basics umgesetzt und es existieren nur wenige Komponenten. Die Dokumentation der Verfügbaren Komponenten zum momentanen Zeitpunkt teilweise nicht vorhandenen. Es ist zwar möglich Grids, Tabs oder Dialoge zu erstellen, allerdings existiert noch keinerlei Dokumentation. Bei meinen Tests bin ich auch auf einige Bugs gestoßen. So funktioniert das Auto-Refresh der GUI wärend der Entwicklung nicht zuverlässig und Teilweise ändern Komponenten grundlos ihre Größe, so wurden z. B. Tabs bei jedem Wechsel zu einer anderen Tab etwas größer.

In dem jetzigen Zustand kann man die beiden Bibliotheken für den produktive Einsatz empfehlen. Trotzdem handelt es sich um sehr interessante Projekte.

Da alles komplett im Node.js-Prozess läuft, gibt es keine problematischen Kontextwechsel zwischen Browser und Node-Runtime wie bei Elektron. Auch sind die von NodeGui bzw. React NodeGui erstellten Dist-Packages kleiner als die von Electron oder NW.js.

Weiterführende Informationen gibt es unter: nodegui.org und react.nodegui.org

Bei Tailwind handelt es sich um ein neues CSS-Framework, welches einen neuen Ansatz verfolgt. Tailwind stellt ein Set an CSS-Klassen zur Verfügung, die jeweils nur eine CSS-Eigenschaft festlegen. Ein Entwickler braucht keine eigenen CSS-Klassen bzw. eigenen CSS-Code schreiben. Das Styling erfolgt ausschließlich über das Setzen von Klassen. Nachfolgend ein Beispiel für einen Container mit zwei Buttons. Durch das zuweisen mehrer Klassen wird das Design des Buttons bestimmt. Der Ansatz von Tailwind ist dabei nur in Kombination mit einem Framework sinnvoll, das Komponenten unterstützt, da sonst viele Code-Duplikationen auftreten und das Design nicht mehr zentral geändert werden kann.

<div class="flex-auto flex space-x-3">
      <button class="flex items-center justify-center bg-black text-white" type="submit">Ok</button>
      <button class="flex items-center justify-center border border-gray-300" type="button">Cancel</button>
</div>

Tailwind funktioniert in der Mehrheit der Awendungsfälle. Es eignet sich gut, wenn keine Designer vorhanden sind und der Programmierer selbst das Design entwirft, da spezielle Anforderungen mit den vorhandenen Klassen oft nicht umsetzbar sind. Bei komplexeren Designs kann es leider schnell zu einer sehr langen Kette an CSS-Klassen kommen.

Tailwind kann über npm install tailwindcss installiert werden.

Weitere Informationen gibt es unter: tailwindcss.com

Bei Next.js handelt es sich um ein React basiertes Framework von Vercel. Next.js bietet bereits "out of the box" viele Funktionen, die man sonst bei einem React Projekt manuell hinzufügen muss:

• JS / Typescript Support
• Datei basiertes Routing
• SSR (Server Side Rendering)
• Code Splitting
• Image Optimierung
• API Routes (keine zusätzlichen Abhängigkeiten benötigt)
• Fast Refresh (kein Neuladen während der Entwicklung notwendig)

Es nimmt dem Entwickler viele Entscheidungen ab. So muss man Babel und Webpack nicht selbst konfigurieren kann aber dennoch eingreifen wenn es notwendig sein solle. Next.js ist kompatibel mit den meisten React.js Bibliotheken. Mit SWR steht Next.js eine mächtige Bibliotheken für Client-Side-Data-Fetching zur Seite. Weitere Informationen gibt es unter: nextjs.org

Früher war es schwierig, Node.js-Skripte an Nutzer ohne Node.js-Hintergrund weiterzugeben, da deren Systeme eine Node.js-Laufzeitumgebung benötigten, die fast nie vorinstalliert war. Dank des Pkg-Tools von "Zeit" kann man Skripte nun bequem in ausführbare Dateien umwandeln.

Die Installation von Pkg ist mit einem Befehl erledigt.

npm install -g pkg

Danach kann ein beliebiges Node.js-Script über das Kommando:

pkg <filename>.js 

in ein Executable gepackt werden. Beim ersten verwenden von Pkg lädt das Tool automatisch die benötigen Node.js-Runtimes herunter:

$ pkg index.js
> pkg@4.4.9
> Targets not specified. Assuming:
	node12-linux-x64, node12-macos-x64, node12-win-x64
> Fetching base Node.js binaries to PKG_CACHE_PATH
	fetched-v12.18.1-linux-x64   [====================] 100%
	fetched-v12.18.1-win-x64     [====================] 100%
	fetched-v12.18.1-macos-x64   [====================] 100%

Bei einem erneuten Aufruf werden automatisch gecachte Node.js-Runtimes verwendet so das das Paketieren viel schneller durchgeführt wird. Ohne Angabe von Parametern werden automatisch Executables für Windows, MacOS und Linux erstellt. Über zusätzlichen Parameter kann genau spezifiziert werden welche Node.js-Version verwendet und für welche Systeme ein Executable erstellt werden soll. Leider sind die erstellten Executables sehr groß. Für die Version 12 von Node.js bei einem einfachen "Hello World"-Programm mit ca. 40 MB zu rechnen. Durch einfaches zippen kann die Größe auf ca. 12 MB reduziert werden. Die Großen Executables sind der Funktionsweise von Pkg geschuldet: Scripte werden mit einer Runtime zusammen in eine Executable gepackt und nicht etwa kompiliert. Dies ist bei interpretierten Scriptsprachen nicht vorgesehen. Dennoch ist Pkg ein interessantes Tool wenn man mal schnell ein "kleines" Script weitergeben möchte.

Bei LÖVE oft auch Löve2d oder Love genannt handelt es sich um eine rudimentäre 2D-Game-Engine. LÖVE bringt seine eigene LUA Runtime mit und ermöglicht das Entwickeln unter Windows, MacOS, und Linux. Es existiert auch eine Runtime für Android. Die Installation unter Windows gestaltet sich durch eine Installer sehr einfach. LÖVE Spiele werden wie auch in PICO-8 mit LUA entwickelt, wobei LÖVE aber keinerlei Tools bereit stellt. Für die Entwicklung wird also ein separater Editor/IDE benötigt. Grafiken und Sounds müssen ebenfalls extern erstellt werden. Alle Game-Ressourcen werden einfach in einem Ordner abgelegt. Die einzige Bedingung von LÖVE ist das der Ordner eine main.lua enthält welche als Startpunkt für die Game-Engine dient. LÖVE stellt Grafik, Sound und Eingabe-Funktionen bereit. Es existieren zahlreiche Libraries für LÖVE, leider sind viele nicht mehr kompatibel mit der aktuellsten Version und wurden schon seit Jahren nicht mehr geupdatet. Wenn man mehrerer Libraries verwendet entsteht schnell ein durcheinander, da es anscheinend keine Standards für die Installation gibt, legt jede nicht native Lua-Erweiterung seine DLLs in einem anderen Ordner ab. Einige wenige LÖVE-Libraries können schon über Luarocks installiert werden, hoffentlich vereinfacht sich die Installation in der Zukunft. LÖVE Spiele können in *.love Dateien gepackt werden um sie zu teilen. Dabei handelt es sich lediglich um umbenannte Zip-Dateien. Leider funktionieren viele der LÖVE-Libraries nach dem Packen nicht mehr. Es ist zwar ebenfalls über Umwege möglich eine Executable zu erstellen, diese Plagen aber die selben Probleme wie die Love-Dateien, externe Libraries werden nicht mehr gefunden. Wegen dieser Probleme und des begrenzten Funktionsumfangs von LÖVE bieten sich andere Game-Engine an wenn man nicht alles von Grund auf selbst implementieren will.

LÖVE kann unter love2d.org heruntergeladen werden.

Meist werden 3D-Inhalten mit grafischen Tools wie Maya, AutoCAD, Blender, 3D Coat oder ähnlichen erstellt. Allerdings ist es auch möglich 3D-Modelle durch Code zu erstellen. Mit dem OpenSouce-Programm OpenSCAD können Modelle durch SCAD-Code programmiert werden. Aus einfachen Grundformen können mit Boolean-Operationen komplexere Formen erstellt werden. OpenSCAD eignet sich hervorragend zum Erstellen von Modellen für den 3D-Druck. OpenSCAD kann direkt STL-Dateien exportieren. Es existieren zahlreiche Bibliotheken um oft verwendete Objekte wie Schrauben oder Aluschienen direkt per include in eigene Projekte zu importieren. Durch das Schreiben von Modulen können auch aufwändige Modelle über Parameter schnell angepasst werden.

OpenSCAD kann unter www.openscad.org heruntergeladen werden. Das Programm wird für Windows, Linux und MacOS angeboten. Mit OpenJSCAD existiert auch ein Ableger der zum Programmieren der Modelle auf JavaScript setzt und direkt im Browser ausgeführt werden kann (SCAD-Import vorhanden).

ragersWeb

Mit der JavaScript-Bibliothek Shine können Schatten-Text-Effekte erstellt werden. Besonders bei großen Texten wirken diese Effekte sehr gut und sind dadurch ein perfekter Blickfang. Die Bibliothek setzt bei der Umsetzung auf die CSS-Eigenschaften boxShadow und textShadow. Werden diese vom Browser nicht unterstützt, wird der Effekt nicht dargestellt. Der Effekt funktioniert bei Texten und Boxen.

Shine kann unter bigspaceship.github.io/shine.js heruntergeladen werden.

Bei Cylon.js handelt es sich um ein Node-Modul, es ermöglicht den einfachen Zugriff auf viele unterschiedliche Hardwareplatformen (momentan 43). Dabei wird der eigentliche JavaScript-Code entweder auf einem PC ausgeführt wodurch z.B einen Arduino nicht mehr autark ist, oder kann bei leistungsfähiger Hardware wie z.B einem Rasspery Pi direkt auf dem System ausgeführt werden. Bei der Verwendung von Hardware die nicht in der Lage ist den Node.js Code selbstständig auszuführen werden die verarbeiteten Befehle über unterschiedliche Protokolle an das Board geschickt und dort dann ausgeführt. Mit dem Arduino erfolgt die Datenübertragung per Firmata Protokoll, dafür muss ein spezielles Image auf den Arduino geflasht werden. Neben Firmata werden je nach Platform auch noch andere Protokolle unterstützt.

Eine Tutorial über die Verwendung von Cylon.js findet ihr z.B. hier.

Mit Johnny-Five existiert noch eine zweites Node-Modul welches einen ähnlichen Funktionsumfang bietet.