Tag: werkzeuge

201516Apr

Node.js: Skripte per Windows-Kontextmenü ausführen

Node.js-Entwickler, die in Windows unterwegs sind, können von der Anpassbarkeit des Systems Gebrauch machen und beispielsweise das Kontextmenü dazu nutzen, Node.js-Skripte direkt per Klick auszuführen. Dazu braucht es nur ein paar Einträge in der Windows-Registrierung sowie den dazugehörigen Befehl. Voraussetzung ist, das Node.js auf dem Rechner installiert ist. Dann lassen sich Skripte einfach über den Befehl cmd in Verbindung mit der Node-Anwendung ausführen.

Node.js - Skripte per Windows-Kontextmenü ausführen

Mit dem Parameter /k wird cmd dazu angewiesen, den Prozess nicht zu beenden. Das entsprechende Fenster, also die Eingabeaufforderung, bleibt in diesem Fall nach der Ausführung des Skripts bestehen. Wer hingegen nur das Skript ausführen und das dazugehörige Konsolenfenster direkt wieder schließen möchte, verwendet stattdessen einfach den Parameter /c.

Weiterlesen...
201501Apr

React Native: Native Apps mit React/JavaScript erstellen

Und noch einmal Facebook: Bei den hauseigenen Open Source-Projekten tut sich momentan etwas. Noch steht die Veröffentlichung der eigenen IDE namens Nuclide aus und inzwischen wurde auch das Framework React Native zum Open Source-Projekt gemacht. Damit lassen sich native Apps für mobile Geräte auf Basis von React erzeugen. Derzeit steht nur die iOS-Version bereit, womit sich jedoch schon arbeiten lässt. Installiert wird das Framework per Node.js und auch die App-Entwicklung stützt sich ganz auf die V8-Engine: Zu Beginn läuft ein lokaler Server, auf den die App zugreift, so dass die App bzw. der View bei Code-Änderungen nur per Tastenkürzel neu geladen und nicht neu kompiliert werden muss.

React Native - A framework for building native apps using React

Das Beispiel funktioniert soweit einwandfrei, doch will man komplexere Anwendungen erstellen oder andere React-Widgets benutzen, erfordert es schon tiefer gehende Kenntnisse des Facebook-Frontend-Frameworks. Bei GitHub finden sich schon etliche Beispiele, welche die verschiedenen Komponenten oder gar Spiele demonstrieren.
Insgesamt ist der Ansatz interessant, doch für echte Cross-Plattform-Apps auf JavaScript-Basis empfiehlt sich bis auf Weiteres immer noch Ionic, das auf AngularJS, PhoneGap und Cordova basiert und eigene JavaScript-/CSS-Komponenten bietet. Wer also ohnehin schon mit AngularJS vertraut ist, dürfte mit dem Ionic Framework bestens bedient sein. Auch hier geht die App-Entwicklung dank Node.js und LiveReload extrem schnell von statten.

201528Mär

Nuclide: Facebook-IDE für React, Hack und Flow

Die Entwickler von Facebook bereiten derzeit die Veröffentlichung einer quelloffenen Entwicklungsumgebung (IDE) vor, die den Namen Nuclide trägt und auf GitHubs Atom-Editor basiert. Nuclide wird die volle Unterstützung (Auto-Vervollständigung, Syntaxhervorhebung, etc.) für die Eigenentwicklungen von Facebook enthalten: Dazu zählt zum einen das Projekt Hack, einem Just-In-Timer-Compiler für PHP, der unter Anderem statische Typisierung bietet. Weiterhin wird Flow unterstützt, mit dem statische Typisierung auch in JavaScript möglich wird. Und schließlich unterstützt Nuclide das React-Framework, dem Frontend-Kern von Facebook.

Nuclide - a unified IDE

Man darf gespannt sein, wie Nuclide bei den Entwicklern ankommen wird. Bisher sieht das Projekt vielversprechend aus, auch wenn derzeit nur ein Screenshot verfügbar ist. Es wird sich zeigen, ob es sich wirklich um eine voll ausgestattete IDE handelt, die mit WebStorm mithalten kann — dieser hat sich mittlerweile zum Platzhirsch gemausert und immerhin bietet dieser ebenfalls Support für React und JSX-Templates. Zudem werden Meteor- und PhoneGap/Cordova/Ionic-Anwendungen unterstützt und auch die Entwicklung mit Polymer, TypeScript, Dart, Node.js, ES6, Gulp, Grunt und CSS3 werden wesentlich erleichtert.
Die Open-Source-Projekte von Facebook sind übrigens hier einsehbar.

201509Mär

TreeQL: Bibliothek für JSON-Abfragen und -Mutationen

Die Arbeit mit JSON-Datenstrukturen gehört fast schon zum Alltag eines Webentwicklers. Der Komplexität sind hier keine Grenzen gesetzt und gerade das Filtern von JSON-Daten kann immer wieder eine Herausforderung darstellen. Bei dieser Aufgabe könnte beispielsweise die Bibliothek TreeQL Abhilfe schaffen, mit der sich JSON-Strukturen durch gezielte Abfragen (Queries) auslesen und verändern lassen.

Wenn beispielsweise folgende Struktur gegeben ist:

  • var data = {
  • people: [{
  • name: "Andrei",
  • age: 28
  • }, {
  • name: "Homer Simpson",
  • age: 60
  • }, {
  • name: "Corina",
  • age: 28
  • }]
  • };

Dann können mithilfe von TreeQL beispielsweise alle Personen mit einem Alter von 28 ausgegeben werden:

  • treeql.query(data, {
  • age: 28
  • }, function(node) {%
  • // 1: node = { name: "Andrei", age: 28 }
  • // 2: node = { name: "Corina", age: 28 }
  • });

Zudem können neben statischen Filtern auch Funktionen verwendet werden, um beispielsweise Berechnungen in die Filterung mit einfließen zu lassen. Schließlich ist es mit der Bibliothek noch möglich, die entsprechenden Datensätze zu verändern: So könnten mit einem Query etwa alle Altersangabe im obigen Beispiel um 2 Jahre erhöht werden.
TreeQL dürfte damit ein interessantes Werkzeug sein, wenn es um die Arbeit mit größeren JSON-Datensätzen geht. Ein ähnliches Projekt stellt JSONSelect dar.

201410Nov

Firefox Developer Edition: Webbrowser für Webentwickler

Anlässlich des zehnjährigen Jubiläums von Firefox hat Mozilla heute die Firefox Developer Edition veröffentlicht, die speziell an Webentwickler gerichtet ist und verschiedene Tools zum Entwickeln moderner WebApps bietet. Der neue Browser soll vor allem das plattformübergreifende Arbeiten von einem Gerät aus erleichtern, was durch das Add-On "Valence" (zuvor: Firefox Tools Adapter) erreicht wird. Dabei handelt es sich um eine Erweiterung, welche die Anbindung an Android-, iOS- oder Firefox OS-Geräte (also Tablets und Smartphones) ermöglicht.

Firefox Developer Edition

Die Firefox Developer Edition besteht also in erster Linie aus dem aktuellen Firefox-Build, der WebIDE und dem Valence-Add-On: Damit können lokale WebApps aber auch Remote-Projekte mit den gängigen Firefox-Tools (Web-Konsole, Seiten-Inspektor, Javascript-Debugger, Netzwerkanalyse, Audio-Editor, etc.) untersucht werden. Die WebIDE enthält verschiedene Integrationen von Laufzeitumgebungen wie beispielsweise einem Simulator, einem Remote-Browser, einer Chrome Desktop-Anwendung, einer Firefox OS-App oder einer normalen Website. Für das Debuggen von Android-Apps wird natürlich ein entsprechender USB-Treiber für das angeschlossene Smartphone benötigt und die Android Debug Bridge (ADB) muss das Gerät per adb devices auflisten. Unter Mac OS X gestaltet sich der Prozess für iDevices etwas einfacher. Besteht schließlich eine USB-Verbindung, können die Tabs des Smartphone-Browsers mit dem Inspektor oder der Konsole bearbeitet werden. Schließlich ist noch ein Tool zur schnellen Kommunikation enthalten: Per Klick können Links erzeugt werden, die dann an andere Entwickler weitergeschickt werden können, wodurch eventuelle Probleme direkt im Browser-Chat diskutiert werden können.
Die Developer Edition von Firefox ersetzt damit den Aurora-Build und wird alle 6 Wochen neue Funktionen erhalten.

201403Nov

Mozilla: Neuer Browser von Entwicklern für Entwickler

Der Browserhersteller Mozilla hat schon seit geraumer Zeit eigene F12-Entwicklertools in seinen Browser integriert, die einen Inspektor, einen Debugger, eine Konsole sowie Laufzeit- und Netzwerkanalyse-Tools beinhalten. Bei diesen Werkzeugen soll es laut einem aktuellen Blog-Eintrag jedoch nicht bleiben: Am Montag, dem 10. November wird es soweit sein und Mozilla wird einen neuen Browser vorstellen, der speziell an Webentwickler gerichtet ist. Es geht dabei vor allem um den Entwicklungsprozess, der auch das Testen auf verschiedenen Plattformen und Geräten beinhaltet. Dieser Prozess ist in der Tat sehr zeitaufreibend, wenn eine Seite beispielsweise unter Android 4.0, 4.1, 4.2, 4.3, 4.4 sowie iOS 6, 7 und 8 getestet werden soll und dabei noch verschiedene Smartphones und Tablets mit unterschiedlichen Auflösungen und Pixeldichten ins Spiel kommen.

Firefox Developer Tool - Netzerkmonitor

Viele Informationen gibt der Mozilla-Beitrag nicht preis. Lediglich die Integration der WebIDE sowie dem Firefox Tools Adapter wird genannt. Man darf also gespannt sein, was Mozilla an diesem Montag auf den Markt bringen wird.

201413Okt

AngularJS: Directives und Services für Material Design

Die neuen Material Design-Spezifikationen von Google dürften mittlerweile in aller Munde sein. Dabei handelt es sich um Design-Guidelines, die unter Anderem bei Android 5.0 für die Optik eingesetzt werden. Die Guidelines enthalten etliche Richtlinien und Empfehlungen für die Gestaltung von interaktiven Anwendungen, die auf mehrere Endgeräte ausgelegt sind. Das "Material Design" orientiert sich dabei stark an haptischen Gegebenheiten wie taktilem Feedback.
Mit dem Paper Elements Sampler des Polymer Projects stehen bereits Web-Komponenten bereit, die den Ideen des Material Designs folgen. Nun haben einige Core-Entwickler von AngularJS und Ionic das Ganze auch für AngularJS umgesetzt.

Material Design for AngularJS Apps

Eine Demo-Seite gibt es hier. Es handelt sich in erster Linie um erweiterte Attribute für bestehende DOM-Elemente und Directives/Services. Ein Beispiel für einen Material Design-Button:

  • <md-button noink class="md-button-colored">
  • Button (noInk)
  • </md-button>

Die Directives bestehen aus etlichen Bedienelementen wie Schaltflächen, Listen, Radio-Buttons, Slider, Header, Schalter, Tabs, Toolbars und vielem mehr. Viel Spaß beim Ausprobieren!

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.