Next.js

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

Pkg – Node.js Kommandozeilenprogramme einfach verteilen

Lange war es umständlich ein in Node.js geschriebenes Script an nicht Node.js-Entwickler weiterzugeben, da auf dem System des Nutzers eine Node.js-Runtime vorhanden sein musste. Das ist außerhalb des Node.js Umfelds fast nie der Fall. Selbst unter Linux gehört Node.js nicht zur Standartinstallation. Mit dem Pkg-Tool von "Zeit" ist es aber inzwischen ein leichtes Scripte als ausführbare Programme zu packen.

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.

LÖVE - Eine Open-Source 2D Lua-Game-Engine

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.

OpenSCAD - 3D-Modelle programmieren

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

Shine - Dynamische Schatten als Text-Effekt

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.

Cylon.js - Javascript für das internet der Dinge

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.

WebGLStudio.js - 3D-Toolkit im Browser

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.

Material Design Lite

Mit der CSS Library Material Design Lite von Google existiert endlich eine offizielle CSS und JS Implementierung die einfach in bestehende Projekte und Infrastrukturen integriert werden kann. Bisher war die Verwendung im Web offiziell nur über Polymer möglich.

Weitere Infos zu Material Design Lite gibt es auf der Projektseite: getmdl.io

Project Anarchy

Project Anarchy ist ein in der neuen Version erschienen. Bei Project Anarchy handelt es sich um eine 3D-Gameengine die in der Hauptsache für Mobile-Platformen entwickelt wurde. Mit Project Anarchy können Spiele für Android, IOS and Trizin erstellt werden. Ein Export nach Windows ist ebenfalls möglich benötigt aber eine kostenpflichtige Lizenz. In den früheren Versionen waren noch Autodesk Scaleform und Autodesk Beast integriert, in der aktuellen Version ist das nicht mehr der Fall.

Momentan besteht aus diesen Komponenten:

  • Havok Vision Engine
  • Havok Physics
  • Havok Animation Studio

Weitere Informationen zu Project Anarchy findet man unter: projectanarchy.com. Zahlreiche Video-Tutorials sind hier zu finden.