MiniSearch ist eine JavaScript-Bibliothek, die client- und serverseitige Volltextsuche ermöglicht, indem sie einen invertierten Index im Arbeitsspeicher des Browsers oder Node.js-Servers aufbaut. Der Index wird vollständig im Arbeitsspeicher gehalten, wodurch die Datenmenge, die durchsucht werden kann, begrenzt ist. Auch wird der Index beim Starten immer neu aufgebaut, was für größere Mengen an Daten nicht ideal ist. Bei Versuchen mit ca. 6 MB an Daten hat der Aufbau des Index nur ca. 860 ms gedauert. Eine Fuzzy-Suche war meist in unter einer ms durchgeführt.

MiniSearch ist eine reine JavaScript-Bibliothek ohne externe Abhängigkeiten. Dadurch ist sie auch ideal, wenn ein kleines serverseitiges Projekt mit einer Volltextsuche ausgestattet werden muss, wo Solr oder auch schon Meilisearch viel Overhead benötigen. MiniSearch hingegen kann direkt eingebunden und verwendet werden. Auch die Nutzung im Browser in einer PWA ist ideal.

Die Kernfunktionalität von MiniSearch basiert auf einem Radix Tree (einem platzoptimierten Präfixbaum) für den invertierten Index. Dieser Ansatz macht die Indexierung und Suche nicht nur schnell, sondern auch besonders speichereffizient, was für mobile Browser entscheidend ist.

Es ist möglich, Dokumente zur Laufzeit hinzuzufügen und zu entfernen. Die Bibliothek bietet erweiterte Suchfunktionen wie Präfix-Suche, Fuzzy-Suche für Tippfehler und Field Boosting zur Gewichtung von Feldern, sodass Treffer in Titelfeldern höher bewertet werden können als z.B. in der Beschreibung. MiniSearch bietet viele Funktionen, die man bei einer so kleinen Suche nicht erwarten würde. So generiert Die Auto-Suggestion-Funktionalität Vorschläge direkt aus den indizierten Dokumenten und sortiert sie nach Relevanz.

Im Vergleich zu schwergewichtigen Lösungen wie Solr oder Meilisearch punktet MiniSearch durch minimalen Overhead. Während diese serverbasierten Lösungen erhebliche Ressourcen benötigen, kann MiniSearch direkt im Anwendungsprozess operieren.

Das Patchen von NPM-Paketen bezeichnet das gezielte Verändern des Quellcodes einer externen Bibliothek in einem Node.js-Projekt. Dies wird typischerweise dann notwendig, wenn ein kritischer Bug die eigene Anwendung betrifft, aber das offizielle Update des Paket-Maintainers noch nicht verfügbar ist. Diese Methode eignet sich auch für kleine, projekt-spezifische Anpassungen an einem Paket. Eine Alternative wäre das Erstellen eines Forks des Pakets, was jedoch mit einem erheblich größeren Aufwand verbunden ist.

Vorgehensweise mit patch-package

Ein beliebtes Werkzeug für diesen Prozess ist das NPM-Paket patch-package. Die Vorgehensweise ist wie folgt:

1. Installieren npm i patch-package
2. Erweitern der package.json um einen Postinstall-Step:

...
"scripts": {
     "postinstall": "patch-package"
}
...

3. Manuell anpassen des Codes des zu patchenden Pakets innerhalb des node_modules-Ordners.
4. npx patch-package <paket-name> aufrufen. Dadurch wird ein Diff erstellt und automatisch eine Patch-Datei abgelegt. Der Patch enthält die Unterschiede zwischen dem originalen und dem geänderten Code.
5. Testen: npm i sollte nach der Installation automatisch das Paket patchen. Nachfolgend eine Beispielausgabe des Patchvorgangs:

patch-package
patch-package 8.0.1
Applying patches...
react-slick@0.30.3 ✔

Man sollte Patches immer nur als vorübergehende Lösung betrachten, bis ein offizielles Update des Originalpakets verfügbar ist. Den gefundenen Bug und den erstellten Fix sollte man idealerweise dem Maintainer des Originalpakets melden, beispielsweise via Pull Request auf GitHub. Zudem sollte man beachten, dass Patches bei größeren Updates des Originalpakets Konflikte verursachen können, die dann nach jedem update aufgelöst werden müssen.

Beim Einsatz von Monitoring-Diensten wie UptimeRobot, die HEAD-Anfragen nutzen, um die Verfügbarkeit einer Website zu prüfen, kann es in Astro im Produktionsmodus zu Problemen kommen. Diese Dienste senden oft keinen Origin-Header, was zu einer 403-Antwort führt. HEAD-Anfragen ohne Origin-Header werden von Astro.js im Produktionsmodus abgelehnt, was Monitoring-Dienste wie UptimeRobot dazu veranlasst die Website als down anzusehen. Um das zu beheben kann in der Astro-Konfiguration die Sicherheitsprüfung für den Origin-Header deaktiviert werden.

astro.config.mjs

export default defineConfig({
    security: {
        checkOrigin: false, // for head requests -> uptimerobot
    },
});

Durch das Setzen von checkOrigin: false in der Astro-Konfiguration wird sichergestellt, dass Dienste wie UptimeRobot HEAD-Anfragen erfolgreich durchführen können, ohne eine 403-Antwort zu erhalten.

Hinweis: Diese Einstellung sollte mit Vorsicht verwendet werden, da sie Sicherheitsprüfungen beeinflusst.

Zwei Newcomer vorderen Electron und NW.js bei Erstellen von JavaScript-Desktopaplikationen heraus. Die beiden neuen Tools erzeugen weit kleinere Applikationen als die eingesessenen Konkurrenten. Anwendungen sind nur wenige MB und nicht mehrere Hundert MB groß. So liefern beide keine Chrome-Runtime mit. Dadurch lässt sich schon ca. 60 MB sparen. Gluon setzt einen bereits installierten Chrome oder Firefox voraus. Neutralino setzt auf die in dem jeweiligen Betriebssystem integrierte Browser-Technologien (z.B. gtk-webkit2 unter Linux). Es kann immer noch clientseitiges JavaScript ausgeführt werden, außerdem bieten beide die Möglichkeit ein Backend anzubinden. Diese Funktionalität ist für viele Anwendungsfälle ausreichend, oft wird wahrscheinlich überhaupt keine Backendfunktionalität benötigt, auch wenn solche Anwendungen dann auch als PWA umgesetzt werden könnten, bevorzugen es manche dennoch diese als Desktop-Anwendung zu vertreiben.

Neutralino

Neutralino verzichten auf eine Node.js Runtime. Es kann noch immer auf die integrierten APIs zugegriffen werden. Im Gegensatz zu Gluon stehen über die Neutralion API viele Desktop-Funktionen zur Verfügung. Deswegen kann oft auf ein Backend verzichtet werden. Dennoch kann über IPC/Websockets ein solches angebunden werden. Das Backend kann in beliebiger Technologie umgesetzt werden, solange diese Websockets unterstützt. Es existieren Beispiele für C++ und Node.js. Anwendungen können über das integrierte neu build Befehl für Windows, Linux und MacOS erstellt werden. Teilweise wird auch bereits ARM64 unterstützt.

Gluon

Gluon ist ein noch sehr neues Projekt. Dennoch hat es bereist sehr viel Aufmerksamkeit erzeugt. Als Backend könne Node, Deno oder Bun verwendet werden. Dabei wird die Anbindung an den Client wie bei Neutralino auch über IPC umgesetzt. Leider verfügt Gluon noch über kein integriertes "build"-Kommando. Beide Tools befinden sich momentan noch in einer frühen Entwicklungsphase und sind deswegen nicht für große Anwendungen geeignet. Auch haben sie das Problem, dass der Entwickler nicht weis, in welcher Umgebung seine Anwendung ausgeführt wird. Wer damit leben kann, sollte den beiden Tool auf jeden Fall einmal anschauen.

Mit den beiden Paketen npm-check und npm-check-updates gibt es zwei Tools, die es Entwicklern erleichtern Node.js und Java-/Type-Script Projekte aktuell zu halten. Beide Tools analysieren die package.json bzw. die package-log.json und listen mögliche Updates auf. Im interaktiven Modus können updates Pakete direkt ausgewählt und installiert werden. Es empfiehlt sich Tools über npx auszuführen und nicht lokal/global zu installieren. Dadurch ist gewährleistet, dass immer die aktuellste Version verwendet wird.

npm-check im Interaktiven Modus:

npx npm-check -u 

npm-check-updates im Interaktiven Modus:

npx npm-check-updates --format group --interactive

npm-check bietet im interaktiven Modus (-u) eine detailliertere Darstellung der Pakete gefällt deswegen besser als npm-check-updates.

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

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 WebGLStudio.js handelt es sich um ein komplett im Browser lauffähiges 3D-Toolset zum erstellen und bearbeiten von 3D-Scenen. WebGLStudio.js verfügt über eine eigene auf WebGL basierenden 3D-Engine. Mit den integrierten Shader-Editor ist es möglich Shader mittels Graph-Interface zu erstellen und zu bearbeiten. WebGLStudio bietet ein virtuelles Filesystem, so das Assets einfach im Browserübergreifend verwaltet werden können. Durch dieses System ist auch ein einfaches publizieren der erstellen Inhalte möglich.

Weiter Informationen zu WebGLStudio.js können unter webglstudio.org gefunden werden.