Tag: html-css

201527Mai

Mobile Apps: Entwicklung mit einer JavaScript-Codebasis

Es ist wieder Zeit für eine Matrix: Diesmal geht es um die Entwicklung von mobilen Apps mit einer zentralen JavaScript-Codebasis. Dies wird mit bestimmten Frameworks möglich, die Cross-Plattform-Support durch HTML oder eine dynamische Runtime ermöglichen. Zu diesem Thema habe ich daher die Mobile App Framework Matrix entwickelt. Sie zeigt Technologien auf, mit denen sich iOS-/Android-Apps durch einen zentralen JavaScript-Code entwickeln lassen. Webentwickler sollen sich ein Bild von den derzeitigen Technologien und ihren Kehrseiten machen können.

Mobile App Framework Matrix - iOS-/Android-Apps in JavaScript entwickeln

Da mobile Cross-Plattform-Apps unterschiedliche Anforderungen haben, eignet sich nicht jede Lösung für jedes Szenario. Wenn es um Erweiterbarkeit, Leistung und Skalierbarkeit geht, variieren die Frameworks in verschiedenen Bereichen.

Weiterlesen...
201514Mai

plainJS: Sammlung mit Vanilla-JavaScript-Bibliotheken

JavaScript-Code, der nicht auf externe Bibliotheken angewiesen ist, bezeichnet man auch als Vanilla-JavaScript. Die Entwicklung der Browser und Webstandards ist in den letzten Jahren soweit fortgeschritten, dass JavaScript-Frameworks wie jQuery oder Dojo immer mehr in den Hintergrund treten. Ich hatte hierzu bereits einen ausführlichen Artikel veröffentlicht. Aus diesem Grund stellt sich vielen Entwicklern die Frage, ob für das nächste Projekt überhaupt noch jQuery oder ein anderes Framework zur Vereinfachung eingesetzt werden soll: Mit ECMAScript 5 und der stärker werdenden Verbreitung moderner Browser stehen im Grunde alle Funktionen bereit, die beispielsweise mit jQuery vereinfacht werden.

plainJS - The Vanilla JavaScript Repository

Daher gibt es jetzt schon etliche Skripte, die nicht auf ein Framework setzen und sich stattdessen ES5-Features zunutze machen. Eine Sammlung solcher Skripte steht nun mit plainJS bereit, die in unterschiedliche Kategorien eingeteilt ist: UI, Eingabe, Medien, Navigation, Effekte und Sonstiges. Hier finden sich also kleine Bibliotheken für alle erdenklichen Bereiche einer modernen Website.

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...
201530Apr

Visual Studio Code: Cross-Plattform-Editor für Entwickler

Anlässlich der Build 2015 hat Microsoft ein wirklich interessantes Projekt für Webentwickler vorgestellt: Visual Studio Code heißt eine neue, kostenlose und plattformübergreifende (Windows, Mac OS X, Linux) Entwicklungsumgebung, die an Webentwickler gerichtet ist. Der Editor basiert auf Electron (zuvor Atom Shell) und damit auf Node.js, HTML und CSS. Dennoch bietet er alles, was das Entwickler-Herz begehrt: Bracket-Matching, IntelliSense, Multi-Cursor-Support, Parameter-Hints, Snippets, Breakpoints, Git-Integration und vieles mehr. Die Anwendung gibt Entwicklern 3 Themes zur Auswahl und die Konfiguration ist direkt über die Bearbeitung von JSON-Dateien möglich.

Visual Studio Code - Cross-Plattform-Editor für Webentwickler

Obwohl Visual Studio Code bisher nur in der Version 0.1.0 vorliegt, hat er sich schon jetzt als ultimatives Tool für Node.js-Apps bewährt: Node.js-Anwendungen können einfach per Knopfdruck gestartet und analysiert werden (Breakpoints, Step-Through, etc.) und in der Sidebar werden in Echtzeit die aktuellen Variablen angezeigt. Damit dürfte Microsoft ein kleiner Durchbruch gelungen sein, denn das Tool ist trotz seiner Kompaktheit sehr umfangreich. Es werden sämtliche Web-Sprachen (HTML, JavaScript, CSS, Less, Sass, TypeScript, PHP, CoffeeScript, Go, Handlebars, Markdown, Python, Ruby, SQL, YAML, etc.) unterstützt und durch seine Anpassbarkeit könnte Visual Studio Code schon bald zum Standard im Bereich kostenloser Editoren für Webentwickler werden. Natürlich gibt es weiterhin GitHubs Atom und auch Facebooks Nuclide könnte interessant werden.
Und Visual Studio 2015 wird es ebenfalls in sich haben: Laut einem Blog-Beitrag will man verstärkt auf die Entwicklung mobiler Apps setzen. Hier werden bisher Apache Cordova und Xamarin genannt. Es bleibt also spannend.

201510Mär

Konva: Framework für HTML5-Canvas-Anwendungen

Die Arbeit mit HTML5 und dem canvas-Element gestaltet sich je nach Anforderung unterschiedlich komplex. Für Browsergames oder grafische Webanwendungen empfiehlt sich der Einsatz einer JavaScript-Bibliothek, die bereits mit grundlegenden Canvas-Funktionalitäten ausgestattet ist. KineticJS dürfte hier der bekannteste Vertreter sein.
Mit Konva steht eine weitere Bibliothek zur Verfügung, die als Fork von KineticJS gestartet wurde. Dabei handelt es sich ebenfalls um eine JavaScript-/HTML5-/Canvas-Bibliothek, die auf die Entwicklung von grafischen Desktop- und Mobile-Anwendungen ausgelegt ist.

Konva - 2D HTML5 canvas framework for desktop and mobile applications

Konva bietet eine objektorientierte API, Verschachtelung von Knoten, Ebenen, Caching, Animationen, Tweens, Drag 'n' Drop, Filter, Selektoren und sogar Kollisionserkennung. Gelungen sind bei dem Projekt auch die Dokumentation sowie die API-Dokumentation. Das Framework kann schließlich auch als Node.js-Modul oder per Bower installiert werden.

201419Nov

THREE.BasicThirdPersonGame: Ein WebGL-Game-Starterkit

Für die englische Version meiner Website habe ich ein kleines WebGL-Spiel entwickelt, bei dem es sich um einfaches Jump 'n' Run-Prinzip im dreidimensionalen Raum handelt. Dabei kommen die Bibliotheken THREE.js (3D-Engine) und Cannon.js (Physik-Engine) zum Einsatz. Während der Entwicklung des Spiels ist die Idee zu einem kleinen Framework gekommen, das jetzt unter dem Namen THREE.BasicThirdPersonGame als Open Source-Projekt bereitsteht.

THREE.BasicThirdPersonGame - Game Starter Kit in THREE.js + Cannon.js

Dabei handelt es sich also um eine Basis für mögliche 3D-WebGL-Browserspiele, bei denen der Spieler aus der Perspektive der dritten Person verfolgt wird. Während THREE.js die Darstellung übernimmt, sind durch Cannon.js physikalisch korrekte Berechnungen möglich, was sich unter Anderem durch die Verwendung von Starrkörpern (Rigid bodies) auszeichnet. Eine virtuelle Spielwelt kann dank Rigid bodies mit Eigenschaften wie Gravitation, Reibung und Federung versehen werden.

Weiterlesen...
201417Nov

CustomScrollbar: Eigene Scrollbars auf Websites nutzen

Das Thema ist zwar nicht gänzlich neu, aber aus gegebenem Anlass war es an der Zeit, eine eigene Entwicklung anzufertigen: Die Rede ist von individuellen Scrollbars auf Websites, die per CSS angepasst werden können. Bis heute gibt es keine native Möglichkeit, das Aussehen der Scrollbalken in Webbrowsern anzupassen. Zum einen sind die Scroll-Elemente in Browsern unterschiedlich implementiert (Chrome etwa kommt mit einer eigenen Lösung) und zum Anderen sind die Bedienelemente vom Betriebssystem abhängig. Natürlich gibt es bereits etliche JavaScript- oder jQuery-Lösungen für eigene Scrollbars, doch diese fallen sehr unterschiedlich aus. Ich habe daher ein kleines Skript entwickelt, das auf das eigentliche Verhalten der Browser-Scollbars zurückgreift und keine zusätzlichen Berechnungen benötigt.

CustomScrollbar - Eigene Scrollbars auf Websites nutzen

Dementsprechend bleibt das jeweilige Verhalten des Browser-Scrollings, was das Beschleunigen und Abbremsen des Scrollbalkens beinhaltet. Es wird also lediglich das native Scollbar-Element ausgeblendet und ein eigener div-Container wird darüber gelegt. Enstanden ist daraus schließlich CustomScrollbar, eine kompakte JavaScript-Lösung für die genannte Problematik.

Weiterlesen...
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.