Tag: tricks

201514Mai

Tooltip.js: MouseOver-Skript mit HTML-Konfiguration

Vor 5 Jahren hatte ich ein Tutorial veröffentlicht, das die Entwicklung eines eigenen jQuery-Tooltip-Plugins beschreibt. Das daraus resultierende Plugin kann zwar immer noch eingesetzt werden, doch mittlerweile bieten sich andere Techniken an, um Seiten eine spezifische JavaScript-Funktionalität hinzuzufügen. Daher habe ich das Skript Tooltip.js entwickelt, das sich an AngularJS orientiert und auf eine HTML-Konfiguration setzt.

Tooltip.js - A basic mouseover tooltip script

Dementsprechend können DOM-Elemente per data-Attribut mit der Tooltip-Funktionalität versehen werden. Anschließend wird noch ein Tooltip-Text benötigt, der aus dem entsprechenden title-Attribut gelesen wird. Über einen JSON-Option-String lassen sich einzelne Tooltip-Elemente zudem anpassen.

Weiterlesen...
201506Mai

JavaScript: Einführung in die Konzepte von React.js

Mit React.js stellen die Entwickler von Facebook schon seit geraumer Zeit eine Alternative zu AngularJS oder anderen MVW-Frameworks zur Verfügung. Zuletzt wurde mit React Native sogar ein Framework vorgestellt, mit dem sich native Mobile-Apps auf der Basis des JavaScript-Frameworks entwickeln lassen.
Der Einstieg in das vielseitige Framework gestaltet sich aber nicht unbedingt einfach, da verschiedene Konzepte verwendet werden und komplexe Bereiche abgedeckt werden. Die Entwickler von RisingStack haben daher ein ausführliches Tutorial veröffentlicht, das die Welt von React besser verständlich machen soll.

React - A JavaScript library for building user interfaces

Behandelt werden in dem Artikel die grundlegenden Themen rund um die JavaScript-Bibliothek. React setzt auf ES6 (mittels Babel-Transpiler) und Komponenten, die wiederum JSX-Templates beinhalten. Bei JSX handelt es sich um eine JavaScript-Erweiterung, welche die direkte Einbindung von XML-Code in JavaScript und Zwei-Wege-Bindings ermöglicht. React verarbeitet schließlich die JSX-Views, verknüpft dynamische Daten (Backend) in einem virtuellem DOM, welches für die Präsentation sorgt und auf Änderungen wartet (unidirektionaler Datenfluss). Dieser Sachverhalt wird ausführlich in dem Artikel beschrieben und am Ende wird noch eine mögliche Anwendungsstruktur aufgezeigt.
Mittlerweile ist auch schon der zweite Teil von insgesamt drei Teilen veröffentlicht worden.

201522Apr

JS.ORG: Subdomain für JavaScript-Entwickler per GitHub

Für JavaScript-Entwickler, die bereits über einen GitHub-Account verfügen, gibt es jetzt eine Möglichkeit, das eigene Github-User-Repository mit einer JS.ORG-Subdomain zu verknüpfen. Auf der Website finden sich die notwendigen Schritte: Im Grunde muss nur die gewünschte JS.ORG-Subdomain dem CNAME-Eintrag des User-Repositories hinzugefügt werden. Ob der gewünschte Domain-Präfix noch frei ist, kann hier eingesehen werden.

JS.ORG - Providing nice and free domains for GitHub Pages since 2015

Ist die CNAME-Datei erstellt und in das User-Repository übertragen worden, muss ein Pull-Request auf das JS.ORG-Repository gemacht werden. Der Entwickler verspricht, den gewünschten CNAME-Eintrag innerhalb von 24 Stunden der Liste hinzuzufügen. Die Domain ist dann aktiv und das User-Repository ist von diesem Zeitpunkt an nicht mehr über *.github.io, sondern *.js.org erreichbar.

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...
201528Mär

Node.js: Einfacher Webserver mit connect und serve-static

Ich habe das Skript schon seit einiger Zeit im Einsatz und mittlerweile dürfte es auch allgemein bekannt sein, wie sich mit Node.js und den Modulen connect und serve-static einfache Webserver einrichten lassen. Wenn es wirklich nur darum geht, schnell und unkompliziert HTML-, JavaScript- und CSS-Dateien auszuliefern, muss nicht gleich das umfangreiche Express.js-Framework verwendet werden. Mit dem folgendem Setup kann das Vorhaben schneller umgesetzt werden, da die genutzten Module kompakter ausfallen als Express.js.

Zuerst müssen dazu die beiden Module lokal installiert werden:

  • npm install connect serve-static

Anschließend kann der Webserver mit diesem Skript erzeugt werden:

  • var connect = require('connect');
  • var serveStatic = require('serve-static');
  • var http = require('http');
  •  
  • var app = connect().use(serveStatic(__dirname));
  •  
  • http.createServer(app).listen(3000);

Nach dem Start über die Kommandozeile ist der Server dann per http://localhost:3000 erreichbar. Das Skript steht auch als Gist bereit. Wer alternativ nach einer universellen Lösung für statische Webserver unter Windows und Mac OS X sucht, sollte einen Blick auf den Fenix Web Server werfen. Hier wird auch gleich noch eine Benutzeroberfläche geboten, welche per Klick die Verwaltung von mehreren lokalen Webservern und deren Neustart ermöglicht.

201516Mär

jQuery: Kurzanleitung für Deferred-Objekte und Promises

Um in JavaScript die sogenannte "Callback Hell" zu verhindern, können sich JavaScript-Entwickler seit jQuery 1.5 dem Deferred-Objekt und damit verbundenen Promises bedienen. Dabei handelt es sich um ein Konzept, mit dem sich asynchrone Programmabläufe besser steuern lassen. Dies kann beispielsweise bei Ajax-Abfragen, Animationen oder Benutzerinteraktionen der Fall sein.

jQuery - Kurzanleitung für Deferred-Objekte und Promises

Zusammen mit dem Deferred-Objekt können also Promises und entsprechende Funktionen wie $.then() und $.when() eingesetzt werden. Weiterhin können Callbacks mit .done() und .fail() ausgeführt werden, nachdem ein Promise aufgelöst (per resolve oder reject) wurde. Um die ganzen Begrifflichkeiten und den Zusammenhang von Deferred-Objekten und Promises besser zu verstehen, können Interessierte einen Blick in die Anleitung von Vasanth Krishnamoorthy werfen. Der Entwickler zeigt hier anhand eines einfachen Beispiels die Funktionsweise von Deferred-Objekten auf. Schließlich wird auch die synchrone Version des Beispiels aufgezeigt, wodurch das Konzept noch besser verständlich wird.

201511Mär

ANNE: Stack aus AngularJS, Node, Neo4J und Express

Für moderne Webanwendungen muss nicht immer ein LAMP-Stack (Linux, Apache, MySQL, PHP) her: Dank der Beliebtheit von Node.js und NoSQL-Datenbanken eröffnen sich Webentwicklern in diesem Bereich neue Möglichkeiten. Mit Node.js steht ein plattformunabhängiges Server-System bereit, das mit bestehenden NoSQL-Lösungen harmoniert. Zusammen mit dem Express-Framework, das sich mittlerweile als Quasi-Standard etabliert hat, werden neue Konstellationen möglich, um eine Webanwendung zu betreiben. MEAN (MongoDB, Express, AngularJS, Node.js) stellt einen dieser Technologie-Stacks dar.
Wer hier noch eine weitere Alternative sucht, könnte mit dem ANNE Stack (AngularJS, Node, Neo4J, Express) gut beraten sein: Hier kommt die Graph DB Neo4j zum Einsatz, die eine RESTful API bietet und über die Cypher-Syntax angesprochen werden kann.

ANNE Stack - AngularJS, Node, Neo4J and Express

In dem Blog-Eintrag von 42id wird der ANNE Stack anhand eines Problems beschrieben. Die dazugehörige Beispiel-Anwendung, ein System zur Verwaltung von Medikamenten, steht bei GitHub zum Download bereit. Der Stack dient in jedem Fall als Inspiration und gibt Einblick in eine mögliche Server-Anwendung auf Basis von Node.js.

201529Jan

is.js: Micro-Framework für Überprüfungen und Vergleiche

Dass nahezu alles in JavaScript wie ein Objekt behandelt wird, dürfte mittlerweile bekannt sein. Um den genauen Typ einer Variable herauszufinden, ist die Verwendung von "Object.prototype.toString()" nötig. Wer in seinem Projekt nicht unbedingt ein fertiges Framework einsetzt, das bereits mit Methoden zur Überprüfung und Validierung verschiedener Arten ausgestattet ist, kann einen Blick auf das Micro-Framework is.js werfen.

is.js - micro check library

Die Bibliothek ist denkbar einfach zu benutzen und bietet eine große Anzahl an fertigen Routinen zur Überprüfung von Variablen an. Dazu zählen Typ-Überprüfungen, reguläre Ausdrücke, Zeitangaben, Strings, mathematische Vergleiche und User-Agent-Variablen (Gerät, Betriebssystem, Browser, etc.).

Ein paar Beispiele:

  • is.email('test@test.com');
  • is.alphaNumeric('y3s');
  • is.weekend(new Date('07/03/1985'));
  • is.all.even([4, 2, 7]);
  • is.ios()

Mit der Bibliothek lässt sich also unter Umständen viel Zeit sparen. Die Größe der JavaScript-Datei in minifizierter Form beläuft sich auf rund 11 KB.