Tilt-Effekte mit tilt.js

Hallo Welt

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.

React NodeGui

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

Tailwind

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

Windows-Terminal mit Cygwin

Wer noch Cygwin für alte Projekte einsetzt, kann dieses auch mit dem neuen Windows-Terminal zu verwenden. In den Einstellungen von Windows-Terminal kann Cygwin über einen klick auf den Button "+ Neues Profil hinzufügen" hinzugefügt werden. Als Befehlszeile muss der Pfad zu Cygwin gefolgt von den Parametern -i -l angegeben werden.

Beispiel:C:\Cygwin\bin\bash.exe -i -l

Alle weiteren Parameter wie Name und Register-Titel können nach Belieben gewählt werden. Das neue Windows-Terminal kann über den Windows-Store heruntergelanden werden.

Dialoge aus Bash mit Dialog, Zenity und Yad

Wer sein Bash-Script unter Linux mit einer "grafischen" Oberfläche ausstatten will, hat viele Möglichkeiten. Dialog ermöglicht das Erstellen von Dialogboxen auf der Konsole. Für einen Installer oder ein Konfigurations-Script is das aber ausreichen oder sogar erwünscht. Mit Dialog aufgewertete Skripte sind für den User wesentlich einfacher zu bedienen als reine Konsolenanwendungen. Dialog bietet viele Möglichkeiten, User-Inputs abzufragen oder Informationen anzuzeigen. Dialog kann auch unter WSL oder Cygwin ausgeführt werden. Auf gängigen Linuxdistributionen ist es standardmäßig installiert oder steht als Paket zur Verfügung.

Beispiel:

dialog --textbox "Informationen\n\nHier finden Sie wichtige Informationen zu\nragersweb.de" 0 0
dialog --yesno "Wollen wir weitermachen?" 0 0
dialog --inputbox "Wie heißen Sie?" 0 0 Mustermann
dialog --gauge "Please wait" 10 70 10

Neben Dialog gibt es auch XDialog, welches kompatibel ist, aber auf den X-Server setzt, wodurch GUI-Dialogboxen erstellt werden. Leider wird XDialog nicht mehr aktiv weiterentwickelt. Als Alternative biete sich seit neustem Zenity an. Bei Zenity handelt es sich um ein Gnome-Projekt wodurch die Weiterentwicklung recht sicher ist. Leider hat Zenity nicht so viele Optionen wie Dialog oder XDialog. Es Verfügt aber über die Funktionalität Benachrichtigungen anzuzeigen, was ausgesprochen Praktisch sein kann.

Beispiel:

zenity --question --text "Was soll ich nur machen?"
zenity --password --username
zenity --calendar --text "Geburtstag wählen:"
zenity --list --text "Bitte Option wählen:" --checklist --column "Optionen" --column "Info" 1 Trinken
zenity --notification --window-icon="info" --text="There are system updates necessary!"

Mit Yad existiert ein Fork von Zenity, der mehr Optionen bietet. Zenity Commands sollten auch in Yad funktionieren. Allerding muss hier über den --borders Befehl selbst für das passende Padding gesorgt werden. Yad kann unter Ubuntu über sudo apt-get install yad installiert werden.

yad --title 'Beispiel Fenster' --window-icon=gtk-about --geometry=400x100 --button=gtk-close --text 'Hallo Welt!' --borders 1

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

KeePassXC - Das hübschere KeePass

KeePassXC ist eine modernere Alternative zu Keepass. Wie beim Original handelt es sich um ein OpenSource-Projekt, es ist für Windows, Linux und MacOs verfügbar. KeePassXC ist komplett kompatibel mit dem originalen KeePass. Es ist keine Konvertierung der kdbx-Datei notwendig. Im Gegensatz zum originalen Keepass verfügt KeePassXC über eine modernere Oberfläche und bietet einige Komfortfunktionen. Dazu gehören unter anderem: Autoupdates, lokalisierte Oberfläche (ohne manuelle Downloads von Sprachdateien) und natürlich Autofill für alle gängigen Browser. Über ein separates Browser-Plugin werden Passwörter automatisch ausgefüllt. Allerdings ist es immer noch notwendig sich selbst um die Synchronisierung der kdbx-Datein kümmern. Das ist entweder über einen CloudStorage-Anbieter wie Google, Microsoft, Dropbox usw. möglich oder man setzt auf ein eigenes NAS bzw. Next-/ Owncloud.

KeePassXC kann unter keepassxc.org herunterladen werden. Das passende Browserplugin für Chrome findet ihr hier.

Vivaldi, der bessere Opera

Bei Vidvalid handelt es sich um einen Chromium-Bassierter Browser von einem der Ursprünglichen Machern von Opera. Nachdem Opera sich immer weiter von seinen Ursprüngen als Browser für Power-Nutzer weg entwickelt hat, beschloss Jon Stephenson von Tetzchne einen Neuanfang zu wagen und begann mit der Entwicklung von Vivaldi. Vivaldi ist inzwischen für Windows, Linux, MacOs und Android verfügbar. Der Browser ist kostenlos aber nicht OpenSource.

Wie der Ursprüngliche Opera (bis ca. Version 12) bietet Vivaldi eine Vielzahl von Anpassungsmöglichkeiten. Die Oberfläche von Vivaldi basiert auf React.js, die Benutzeroberfläche des Browsers wird also ebenfalls HTML gerendert. Durch die Benutzung von Chromium als Rendering-Engine ist mit keinerlei Inkompatibilität zu rechnen. Das ist ein großer Voreilt gegenüber den alten Opera Versionen die noch eine eigene Engine hatten. Da inzwischen alle Browser mit Ausnahme von Firefox auf der Chromium-Engine basieren (ja, auch Microsoft Edge) sind hier keine Vor- oder Nachteile gegenüber anderen Browsern zu erwarten. Das Alleinstellungsmerkmahl von Vivaldi sind seine vielen Einstellungsmöglichkeiten. Die Oberfläche kann besser angepasst werden als bei anderen Browsern und viele Funktionen die bei anderen Browsern Plugins benötigen sind bereits integriert. So z.B. die Schnellwahl, der Ad-Blocker, Mausgesten (vor, zurück, Seite schließen usw.), Tabvorschau, Lesezeichen Synchronisierung, Passwort Synchronisierung (End-To-End-Verschlüsselung mit separatem Passwort möglich) und vieles mehr. Erweiterungen können über den Chrome-Webstore installiert werden.

Eine vollständige Liste der Features sowie den Download findet man unter: vivaldi.com

Lunacy - Kostenlose Sketch Alternative für Windows

Lunacy ist ein kostenloses Grafik / Layoutprogramm von Icons8. Es kann Sketch-Files zu öffnen, bearbeiten und speichern. Im Gegensatz zu Sketch ist Lunacy für Windows, MacOS und seit Kurzem auch für Linux verfügbar. Finanziert wird Lunacy über die enge Integration von Icons8.

Icons8 bietet kostenlose sowie kostenpflichtige Medien wie Bilder oder Icons an. Diese könne Komfortabels in Lunacy genutzt werden müssen es aber nicht. Generell können gängigen Medien wie JPG, PNG und SVG usw. importiert werden.

Mehr Information zu Lunacy gibt es hier.

Glances - System-Monitor mit erweiterten Statistiken

Glances ist eine in Python geschriebener Prozess- und Ressourcen-Monitor. In der Grundfunktionalität kann er mit top oder htop verglichen werden. Glances zeigt unter anderem Informationen zu CPU, Speicher, Auslastung, Prozessen, Netzwerk, Festplatten und Temperatur. Er ist neben Linux und FreeBSD auch für Windows verfügbar. Über eine API oder ein Webinterface können die erfassten Daten auch remote eingesehen oder weiterverarbeitet werden. Alle erfassten Werte können auch als CSV-Datei exportiert oder in InfluxDB, Cassandra, OpenTSDB, StatsD, ElasticSeachr, RabbidMQ importiert werden. Natürlich kann Glances auch mit Grafana zusammen arbeiten.

Weitere Informationen zu Glances gibt es hier