Tag: entwicklung

201628Jan

Nativefier: Native Electron-Apps per Kommandozeile

Ich hatte bereits über ein Tutorial sowie UI-Komponenten für das Chromium-Framework Electron berichtet. Damit lassen sich native Desktop-Anwendungen für Windows, Mac OS X und Linux auf HTML- und JavaScript-Basis erstellen. Wer es besonders einfach möchte, kann jetzt ein Node.js-Package namens Nativefier verwenden. Damit lassen sich mit einem Befehl per Kommandozeile Electron-Apps aus Web-URLs erzeugen.

Nativefier - Wrap any web page natively without even thinking, across Windows, OSX and Linux

Nativefier lädt das aktuelle Electron-Paket herunter und erzeugt die notwendigen Dateien, je nach Plattform. Um beispielsweise Google Maps in eine Electron-App zu packen, ist lediglich folgender Befehl nötig:

  • $ nativefier maps.google.com

Im "resources"-Verzeichnis befindet sich neben den spezifischen JavaScript-Dateien eine generierte nativefier.json, in der die Einstellungen abgelegt sind. Hier sind verschiedene Optionen für die App möglich, wie etwa die Fenstergröße oder die Einstellung des Hauptmenüs. Auf der GitHub-Seite finden sich gesonderte Anleitungen für die verschiedenen Betriebssysteme, um eine komplette Anwendung samt Icon zu erstellen.

201624Jan

X-Ray: Moderner Web-Scraper für Node.js

Dokumente einlesen und spezifische Daten ausgeben — das ist der Zweck von Screen-Scraping. Web-Scraper ermöglichen diese Funktionalität also für HTML-Dokumente und DOM-Elemente. Für Node.js gibt es bereits diverse Screen-Scraper wie Osmosis oder Scraper.js. Etwas mehr Komfort ist mit X-Ray möglich. Mit dem Node.js-Scraper lassen sich beispielsweise auch Paginierungen einbauen.

X-Ray - The next web scraper

Die Bibliothek bietet einfache Selektoren, um DOM-Elemente zu durchsuchen. Unterstützt werden Tags, Klassen, Attribute oder der Inhalt eines Elements. Zudem erlaubt X-Ray Delays und Throttling, wodurch Ajax-Inhalte ausgelesen werden können. Hier ein Beispiel-Snippet für ein einfaches Scraping:

  • var xray = require('x-ray');
  • var x = xray();
  •  
  • x('https://dribbble.com', 'li.group', [{
  • title: '.dribbble-img strong',
  • image: '.dribbble-img [data-src]@data-src',
  • }])
  • .paginate('.next_page@href')
  • .limit(3)
  • .write('results.json');

Das Ergebnis wird hier in eine JSON-Datei geschrieben, kann aber auch an eine weitere Funktion übergeben und darin verarbeitet werden.

201623Jan

JavaScript: Richtige Bedingung für globale Variablen

In JavaScript stößt man hin und wieder auf Besonderheiten, die nicht immer begründet werden können. Wie der Interpreter arbeitet, leuchtet daher nicht in jedem Fall ein. Eine dieser Besonderheiten stellt die Überprüfung von globalen Variablen dar. Hierzu gibt es zwei Möglichkeiten, die sich allerdings in ihrer Art unterscheiden. Das folgende Code-Snippet erzeugt einen Fehler, wenn die globale Variable testVar nicht vorhanden ist.

  • if (testVar) {
  • // Code
  • }

Wer globale Variablen verwenden will, erzeugt diese am besten mit var oder window.variablenName. Und hieraus ergibt sich eine Logik zur Überprüfung, die sich anders verhält: Wenn beim Überprüfen von globalen Variablen, die (noch) nicht vorhanden sind, der window-Namespace vorangestellt wird, schlägt der JavaScript-Interpreter nicht mit einem Fehler aus. Eine bessere Überprüfung könnte dann so aussehen:

  • if (window.testVar) {
  • // Code
  • }

Generell sollten natürlich so wenig globale Variablen wie möglich verwendet werden, um Konflikte mit anderen Bibliotheken zu vermeiden. Daher eignen sich Namespaces oder eine IIFE bestens, um diesem Problem vorzubeugen.

201622Jan

CoreSheet: Responsives Sass/CSS3-Framework

Für die Websites meiner Open Source-Projekte habe ich bisher eine CSS-Codebasis sowie ein entsprechendes HTML-Template eingesetzt. Da ich den CSS-Code stetig erweitert habe, ist daraus schließlich ein eigenes Framework entstanden. Es hat eine eigene Website erhalten und steht ab sofort bei GitHub, NPM und Bower zur Verfügung: CoreSheet stellt ein responsives Sass/CSS3-Framework dar, das ein prozentuales Grid-System sowie verschiedene Komponenten enthält. Dazu zählen gestaltete Formulare, Tabellen, Navigationsmenüs, Schaltflächen sowie ein Sticky Footer.

CoreSheet - Responsive Sass/CSS3 framework including a grid system

CoreSheet an sich ist kompakt und beinhaltet nur rudimentäre CSS-Resets und -Normalisierungen. Das primäre Layout setzt sich aus einem horizontal zentrierten Container und den Spalten des Grid-Systems bzw. Rasters zusammen. Das Grid-System ist wie alle anderen Komponenten konfigurierbar, so dass die Anzahl der Spalten und die Breite der Stege eingestellt werden können. Es gibt einen zentralen Breakpoint bei 767px, bei dem alle Elemente umbrechen und auf die volle Breite des Fensters gestreckt werden. Mit den bestehenden Konzepten und Elementen von CoreSheet können direkt responsive Seiten-Layouts erstellt werden. Die Grundidee besteht in einem minimalistischen Framework, das durch eigene Stile erweitert und so auf das Erscheinungsbild (Corporate Design) des eigenen Projekts zugeschnitten wird.
Es gibt zudem Themes, die als Vorlage genutzt werden können. Die Kompilierung der SCSS-Dateien erfolgt durch Gulp. Durch die beiliegende gulpfile.js werden die Sass-Dateien von CoreSheet (Framework, Konfiguration und Theme) eingelesen und die finale CSS-Datei inklusive der minifizierten Variante werden erzeugt. Ein Watcher für die Echtzeit-Aktualisierung ist ebenfalls enthalten.

201619Jan

Vue.js: Modernes und kompaktes Reactive-Framework

Es gibt einen neuen Stern am Framework-Himmel, der sich neben anderen Web 3.0-Frameworks wie React, AngularJS oder Riot.js aufstellt: Es ist von Vue.js die Rede und es sei gleich vorab erwähnt, dass diese Bibliothek auf jeden Fall einen Blick wert ist. Sie vereint Konzepte von React und AngularJS, bleibt dabei aber einfach und dennoch komfortabel. Vue.js bietet reaktive Data-Bindings, um DOM und Daten zu synchronisieren. Es kommt mit einer Template-Sprache, Filtern, Directives, Komponenten und sogar Mixins.

Vue.js - Reactive Components for Modern Web Interfaces

Das Framework biete im Grunde alles, was eine moderne Webanwendung oder mobile App benötigt. Für Single-Page-Applications (SPAs) darf auch ein Router nicht fehlen. Hier ein Code-Snippet, welches Event Handling demonstriert. Der HTML-Code:

  • <div id="example-2">
  • <button v-on:click="say('hi')">Say Hi</button>
  • <button v-on:click="say('what')">Say What</button>
  • </div>

Und der JavaScript-Teil:

  • new Vue({
  • el: '#example-2',
  • methods: {
  • say: function(msg) {
  • alert(msg);
  • }
  • }
  • });

Die Entwickler hinter Vue.js haben sogar einen ausführlichen Vergleich mit den führenden Web-Frameworks zusammengestellt, in dem die einzelnen Unterschiede sowie Nachteile sehr genau beleuchtet werden. Hier wird auch die Funktionsweise von Vue.js noch deutlicher. Bei GitHub steht das Projekt bereit und hat mittlerweile Version 1.0 erreicht.

201618Jan

VerbalExpressions: Reguläre Ausdrücke leicht gemacht

Reguläre Ausdrücke sind auch in der Webentwicklung ein wichtiges Werkzeug, wenn es beispielsweise um die Validierung von Zeichenketten geht. Die Ausdrücke an sich können jedoch schnell sehr komplex werden und diese sind nicht immer leicht zu meistern. Zwar gibt es Tools zur Visualisierung von regulären Ausdrücken, allerdings hilft das nur bedingt.
Vereinfachen lassen sich die Ausdrücke aber dennoch: Zum Beispiel mit einer Bibliothek wie VerbalExpressions, die auch für JavaScript (Browser und Node.js) zur Verfügung steht.

VerbalExpressions - JavaScript Regular Expressions made easy

Dabei handelt es sich um eine Art Hochsprache für reguläre Ausdrücke, die solche durch einfache Funktionen generiert. So lassen sich verschiedene Bedingungen durch Chaining aneinander hängen. Mit Funktionen wie maybe() oder anythingBut() können dann komplexe Abfragen vereinfacht geschrieben werden:

  • var tester = VerEx()
  • .startOfLine()
  • .then('http')
  • .maybe('s')
  • .then('://')
  • .maybe('www.')
  • .anythingBut(' ')
  • .endOfLine();
  •  
  • var testMe = 'https://www.google.com';
  •  
  • if (tester.test(testMe)) {
  • alert('We have a correct URL'); // Output
  • } else {
  • alert('The URL is incorrect');
  • }
  •  
  • console.log(tester);
  • // Output: /^(http)(s)?(\:\/\/)(www\.)?([^\ ]*)$/

Die VerbalExpressions-Bibliothek steht bei GitHub bereit und gibt es gibt Portierungen für nahe zu jede Sprache, darunter PHP, Dart, Swift, Java, Lua und C#.

201615Jan

Chakra: Microsofts JavaScript-Engine wird Open Source

Wie seit kurzem auf dem MSEdge-Developer-Blog zu lesen ist, steht der Quellcode des Kerns der JavaScript-Engine "Chakra" jetzt bei GitHub bereit. Bei Chakra handelt es sich um die JavaScript-Engine von Microsoft, die seit Internet Explorer 9 im Einsatz ist. Bei GitHub steht nun "ChakraCore" zur Verfügung: Dabei handelt es sich um die Kernmodule der Engine, die sich aus verschiedenen Komponenten wie dem JIT-Compiler, dem Interpreter und der Runtime zusammensetzt. Mehr dazu findet sich in der Architektur-Übersicht.

ChakraCore - JavaScript-Engine von Microsoft nun Open Source

ChakraCore beherrscht ECMAScript 2015 und lässt sich zudem mit der JSRT-API (JavaScript Runtime) nutzen. So kann die Engine in eigenen Anwendungen genutzt werden. Der in C++ geschriebene Code kann für x86-, x64- oder ARM-Plattformen kompiliert werden. Dazu ist mindestens Windows 7 (mit SP1) sowie Visual Studio 2013 oder 2015 erforderlich. Eine Linux-Portierung der Engine ist laut Microsoft schon geplant.

201611Jan

Imba: Neue Web-Sprache für Ruby- und Python-Fans

Wer gerne mit Ruby oder Python entwickelt und bei seiner nächsten Webanwendung verstärkt JavaScript einsetzen möchte, könnte einen Blick auf Imba werfen. Dabei handelt es sich um eine neue Web-Sprache, die nach JavaScript kompiliert und sowohl auf der Client- als auch auf der Serverseite eingesetzt werden kann. Der Compiler kann per npm installiert und anschließend per CLI genutzt werden.

Imba - Create complex web apps with ease

Imba versteht sich als minimalistische Sprache und vereint verschiedene Konzepte, unter Anderem auch Konzepte von React und JSX. Zudem arbeitet es in einer TodoMVC-Beispielanwendung bis zu 10x schneller als React. Die Syntax von Imba ist an Ruby angelehnt und es stehen komfortable Funktionen für die Erzeugung und Manipulation von DOM-Elementen bereit. Auf der Website finden sich diverse Beispiele, bei denen auch der generierte JavaScript-Code eingesehen werden kann. Ein Blick in die Dokumentation dürfte mehr Klarheit schaffen.