201516Aug

Update: Web Development Tools mit allen Projekten

Heute gibt es noch eine weitere Neuigkeit in eigener Sache: Ich wollte meine bisherigen Anwendungen und Skripte für Webentwickler in einer großen Übersicht sammeln und darstellen. Dazu habe ich mein User-Repository bei GitHub verwendet. Dort finden sich jetzt die Web Development Tools. Hierbei handelt es sich um eine interaktive 3D-Darstellung, die ich mit der Famous Engine umgesetzt habe.

Web Development Tools - the complete collection

Die Seite besteht aus einer abstrakten Landschaft, auf der die verschiedenen Projekte verteilt sind. Zudem gibt es die vier Kategorien "Web Development", "User Interface Design", "Comparisons" und "Game Development", in denen die Tools zu finden sind. Die Landschaft wird um zukünftige Projekte erweitert werden. Viel Spaß beim Ausprobieren!

201515Aug

Update: Node.js-Snippets im Überblick

Es gibt seit langem wieder ein Update in eigener Sache: Für meine eigenen Node.js-Skripte habe ich eine kleine Übersichtsseite namens Node.js Snippets entwickelt, auf der die Snippets aufgelistet sind. Dort finden sich neben dem eigentlichen Quellcode des Skripts noch Links zur JavaScript-Datei und dem dazugehörigen Gist.

Node.js Snippets Collection

Die Seite stellt eine reine Auflistung dar und versteht sich als fortlaufendes Projekt. Bisher finden sich dort die beiden Skripte SimpleWebServer und AutoReload.

201514Aug

Node.js: Module vergleichen mit NPMCompare

Wer Projekte mit Node.js umsetzt, wird die große Auswahl an fertigen Modulen zu schätzen wissen. Häufig gibt es für eine bestimmte Aufgabe nicht nur ein Modul, sondern gleich mehrere. Welches der vorhandenen Module dann passender für ein Projekt ist, hängt in erster Linie von den Anforderungen ab. Weitere Faktoren könnten beispielsweise Lizenz, letzte Änderungen, Issues, Downloads oder Abhängigkeiten zu anderen Modulen sein. Wenn derartige Faktoren von Modulen verglichen werden sollen, könnte eine Website wie NPMCompare hilfreich sein.

NPMCompare - Easily search and compare between npm packages

Auf der Seite können zwei oder mehrere Node-Module per Suchfunktion in den direkten Vergleich gebracht werden. Anschließend gibt es eine Auflistung verschiedener Bereiche: Versionsnummer, Links, Lizenz, letzte Änderungen, durchschnittliche Veröffentlichung von Versionen, zugehörige Entwickler, Abhängigkeiten, tägliche/wöchentliche/monatliche Downloads, Anzahl der Forks sowie offene Issues und Pull Requests.

201528Jul

JavaScript: Toast-Benachrichtigungen im Web verwenden

Benutzer von Android-Geräten werden sie kennen: Bei Toast-Benachrichtigungen handelt es sich um eine Nachricht, die für eine bestimmte Zeit am unteren Bildschirmrand angezeigt wird und nach einer gewissen Zeit ausgeblendet wird. In einer Webanwendung könnte diese Funktionalität für diverse Zwecke eingesetzt werden — so könnte beispielsweise der Benutzer darüber informiert werden, ob seine Formulardaten erfolgreich gespeichert wurden.
Wer eine Nachbildung der Android-Toast-Nachrichten für HTML sucht, kann einen Blick auf ToastIt.js werfen. Dabei handelt es sich um ein kompaktes Skript (alternativ NPM-Modul), das die entsprechende Benachrichtigung in den Browser bringt.

ToastIt.js - html toast messages

Die Demo zeigt das Skript in Aktion. Die Verwendung ist denkbar einfach:

  • toastit(text, timeout, options)

Bei den Optionen können Attribute gesetzt werden, die anschließend als CSS-Eigenschaft auf die ToastIt-Benachrichtigung übertragen werden.