201419Sep

Timesheet.js: Skript für zeitbasierte Balkendiagramme

Um vergangene Ereignisse untereinander auf einer Zeitachse, ähnlich wie bei einem Gantt-Diagramm, darzustellen, gibt es verschiedene Möglichkeiten. Für JavaScript etwa könnte das Skript Timesheet.js behilflich sein, das eine derartige Visualisierung durch CSS3 ermöglicht. Die Mini-Bibliothek benötigt kein externes Framework und lässt sich schnell anpassen.

Timesheet.js - JavaScript library for simple HTML5 / CSS3 time sheets

Als Eingabe wird lediglich ein JavaScript-Array benötigt, das die verschiedenen Ereignisse in serialisierter Form beinhaltet. Timesheet.js kümmert sich um die Darstellung, wobei es einige Einschränkungen gibt: Per CSS ist eine feste Breite von 720px vorgegeben und auch ein Scrollen (wie etwa bei Chronoline.js) innerhalb des Bereichs, in dem die Daten dargestellt werden, ist nicht möglich. Hier muss unter Umständen also Hand angelegt werden, doch aufgrund der Einfachheit des Skripts dürfte dies kein Problem darstellen. Alles Weitere findet sich auf GitHub.

201417Sep

Breach: Erweiterbarer Webbrowser auf Node.js-Basis

Mit Node.js und Chromium lassen sich die unterschiedlichsten Anwendungen umsetzen und ein Webbrowser liegt daher auf der Hand: Mit Breach steht nun ein erster moderner Ansatz bereit, der die beiden Projekt verbindet. Der Browser-Code besteht dementsprechend aus JavaScript-Modulen, während die Benutzeroberfläche mit HTML und CSS erzeugt wird. Interessant bei dem Browser-Konzept ist die Tatsache, dass es sich bei den Modulen und Node.js-Module handelt, die in Echtzeit installiert und aktiviert werden können. Auch Änderungen am Modul-Code können per Kontextmenü nachgeladen werden, ohne dass der Browser geschlossen werden muss.

Breach - A browser for the HTML5 era

Der aktuelle Stand von Breach kann sich bereits sehen lassen, auch wenn momentan nur die Kernmodule, wie etwa die Tabs, zu den Hauptmerkmalen zählen. Doch der Ansatz könnte sich in der kommenden Zeit zu einer Alternative für Entwickler mausern, da eigene Features schnell und einfach per npm hinzugefügt werden können. Breach steht aktuell leider nur für Mac OS X und Linux bereit, was sich jedoch ebenfalls ändern könnte. Das Projekt basiert auf der ExoBrowser-Plattform und diese lässt sich auch unter Windows kompilieren.
Wer dann noch nicht genug von Node.js hat, sollte sich Node OS ansehen — ein komplettes Betriebssystem, das auf einem Linux-Kernel und Node.js/npm basiert.

201415Sep

Chartist.js: Skript für responsive SVG-Diagramme

Sie heißen Highcharts, Raphaël, D3.js oder gar C3.js: Interaktive Chart-Bibliotheken, mit denen sich SVG-Diagramme aller Art erstellen lassen. Dank HTML5 ist die Darstellung von Vektorgrafiken und -Graphen kein Problem mehr und durch JavaScript lässt sich Interaktivität hinzufügen.
Dem Entwickler Gion Kunz genügte dieser Zustand allerdings noch nicht, denn er wollte eine SVG-Bibliothek, die noch einfacher zu konfigurieren ist und zudem auch mit responsiven Websites funktioniert. Daher schuf er das Skript Chartist.js, dessen Diagramme sich unter Anderem mit CSS und SASS anpassen lassen. Hier sind zudem Animationen möglich.

Chartist.js - Simple responsive charts

Weiterhin lässt sich die Bibliothek per JavaScript konfigurieren, wobei hier auf eine Art Media Queries zurückgegriffen werden kann:

  • var responsiveOptions = [
  • ['screen and (max-width: 640px)', {
  • showLine: false,
  • axisX: {
  • labelInterpolationFnc: function(value) {
  • return 'Week ' + value;
  • }
  • }
  • }]
  • ];

Dadurch sind auch skalierbare Auswertungen einfach umzusetzen, die zudem auf Smartphones und Tablets optimiert werden können. Mehr Infos gibt es wieder bei GitHub.

201414Sep

Responsive Test: Online-Tool für responsive Websites

Mit Screenfly oder resizeMyBrowser stehen bereits Online-Tools zum Testen von Website-Größen bereit: Per iframe kann hier eine beliebige URL geladen und die Seite mit verschiedenen Fenstergrößen betrachtet werden. Mit Responsive Test steht nun ein weiterer Vertreter dieser Art zur Verfügung, der auf AngularJS und Bootstrap basiert.

Responsive Test - Test responsive layout, powered by AngularJS and Bootstrap 3

Das Tool bietet vordefinierte Größen von Smartphones und Tablets an, wodurch sich Media Queries und andere responsive Anpassungen testen lassen. Für jede Option wird ein semantischer Link erzeugt, der die unterschiedlichen Parameter des Tools enthält und somit weitergeleitet werden kann. Bei GitHub findet sich der Quellcode des Projekts.