Tag: tricks

201325Nov

jQuery Evergreen: jQuery-API für moderne Webbrowser

Moderne Webbrowser, die mit ECMAScript 5 ausgestattet sind, bieten bereits eine umfangreiche Funktionssammlung, die nicht mehr komplett mit jQuery ersetzt werden muss. Die Selector-Engines der Browser wurden erweitert und mit CSS3 lassen sich viele Animationen umsetzen, für die vorher jQuery notwendig war. Aus diesem Grund gibt es bereits diverse Micro-Libraries wie Min.js oder Zepto, die nur mit dem Nötigsten ausgestattet sind.
Lars Kappert hat nun mit jQuery Evergreen auch das jQuery-Pendant fertiggestellt: Eine API, welche auf die Fähigkeiten von aktuellen Webbrowsern aufbaut und dennoch den Komfort der beliebten JavaScript-Bibliothek bietet.

jQuery Evergreen - Lean and mean jQuery API for modern browsers

So lassen sich Events mi ".on()" und ".off()" zuweisen und entfernen und DOM-Manipulationen mit "addClass()" sind ebenfalls möglich. Weiterhin wurde die "find()"-Methode sowie "$.attr()" eingebaut. Lediglich die komplexeren Bereiche von jQuery wie "$.animate", "$.ajax" und "$.Deferred" wurden nicht umgesetzt. Für Internet Explorer 9 wird zudem ein Polyfill benötigt, der den Browser um die native "classList"-API erweitert.
jQuery Evergreen wurde übrigens im ES6-Stil geschrieben und in Module gekapselt. Es kann in den gängigen Browsern verwendet werden, da es mit dem ES6 Module Transpiler in AMD-Syntax konvertiert wurde.

201324Nov

JavaScript: Type-Checking mit Object.prototype.toString()

JavaScript ist dynamisch typisiert — und objektorientiert. Ersteres hat nicht immer positive Folgen im Alltag eines Entwicklers: Typfehler treten erst zur Laufzeit auf und auch das Feststellen von Typen ist nicht ganz einfach, da die Funktion "typeof" stets den Typ "object" zurückgibt. Folgende Abfragen verdeutlichen das Ganze:

  • typeof []; // object
  • typeof {}; // object
  • typeof null; // object
  • typeof document.createElement("div"); // object
  • typeof /abcd/; // object

Hilfreich ist die Verwendung von "typeof" also nicht, wenn der Typ wirklich genau bestimmt werden soll. Abhilfe schafft hier die native Funktion "Object.prototype.toString()", mit der sich auch der Name der Klasse zurückggeben lässt, von welcher das Objekt abgeleitet wurde. Für die maximale Typkontrolle sind dann noch ein paar Anpassungen notwendig, da beispiels "NaN" auch als "Number" gewertet wird. Diese Anpassungen haben die Entwickler von Badoo umgesetzt und in diesem Beitrag veröffentlicht. Die daraus entstandene Hilfsfunktion "type()" kann also sehr nützlich sein, wenn es um die Bestimmung von Typen in JavaScript geht.

201320Nov

TogetherJS: Echtzeit-Kollaboration auf Website einbinden

Das Projekt ist zwar schon etwas älter, aber vielleicht nicht jedem bekannt: Mit Mozillas TogetherJS lässt sich ein kleines Tool zur Echtzeit-Kollaboration auf einer beliebigen Website einbetten: Nach der Einbindung wird eine kompakte Benutzeroberfläche eingeblendet, über die sich weitere Benutzer zu der aktiven Sitzung einladen lassen. Teilnehmer innerhalb einer Session können dann auf der Website miteinander chatten und die Elemente der Seite verwenden. Andere Benutzer können dabei den Mauszeiger und die Tastatureingaben in Echtzeit verfolgen.

TogetherJS - Collaboration made easy

TogetherJS arbeitet mit Web Sockets und ein Mozilla-Server (Hub) kümmert sich um das Weiterleiten der Pakete. Lediglich das Skript und ein Button zur Aktivierung müssen auf der gewüntschten Website eingebunden werden.

  • <script src="https://togetherjs.com/togetherjs-min.js"></script>
  • <button onclick="TogetherJS(this); return false;">Start TogetherJS</button>

Auf der Website des Projekts gibt es auch Beispiele, die das Testen von TogetherJS in Echtzeit erlauben. Das Skript dürfte sich für viele Szenarien als nützlich erweisen, beispielsweise bei Hilfestellungen in einem Content-Management-System oder um Website-Feedback einzuholen.

201317Nov

Apollo.js: Mini-Bibliothek für CSS-Klassen-Manipulation

Die Bedeutung von Standalone-Bibliotheken wird immer wichtiger und so müssen nicht mehr alle Aufgaben in JavaScript zwingend mit jQuery gelöst werden. Wenn es also etwa um die Manipulation von CSS-Klassennamen geht, also das Hinzufügen, Entfernen oder Überprüfen von CSS-Klassen eines DOM-Elements, dann kann eine kleine Bibliothek wie Apollo.js aushelfen.

Apollo.js - Standalone class manipulation API for HTML5 and legacy DOM

Das kompakte Skript biete eine kleine API, welche die Methoden "addClass", "removeClass", "toggleClass" und "hasClass" bereitstellt. Die Bezeichnungen dürften selbsterklärend sein und die Verwendung ist ebenfalls einfach:

  • Apollo.addClass(document.body, "js");

Apollo überprüft die Fähigkeiten des Browsers und greift, sofern möglich, auf die "classList"-API von HTML5 zurück. Für Legacy-Browser werden reguläre Ausdrücke als Polyfill verwendet. Die Bibliothek ist auch für moderne Websites noch interessant, da Internet Explorer 9 die classList-API noch nicht unterstützt.

201312Nov

Firefox: Shader Editor ermöglicht Echtzeit-Bearbeitung

Für OpenGL- bzw. WebGL-Entwickler dürfte dank Mozilla ein kleiner Traum in Erfüllung gehen: Ab Firefox 27, der momentan über den Nightly-Kanal heruntergeladen werden kann (inzwischen schon Version 28), wird in den Firefox Developer Tools ein "Shader Editor" integriert sein. Wie in diesem Artikel nachzulesen ist, kann der Shader Editor über die Einstellungen des Entwickler-Panels aktiviert werden. Die Seite muss neu geladen werden, damit der WebGL-Kontext erkannt werden kann. Ist dies geschehen, können alle einzelnen Shader-Programme der laufenden WebGL-Anwendung in Echtzeit bearbeitet oder deaktiviert werden. Dabei ist besonders hilfreich, dass die Codes des Vertex- und Fragment-Shaders separat voneinander bearbeitet werden können.

Firefox - Live editing WebGL shaders with Firefox Developer Tools

Allein die "Epic Citadel"-Anwendung, eine Web-Demo der Unreal Engine, verwendet über 200 verschiedene Shader — also kleine Programme, welche direkt auf der GPU der Grafikkarte ausgeführt werden und grafische Echtzeit-Effekte erlauben. Mit Shadern lassen sich hochkomplexe Visualisierungen und Animationen umsetzen, die allerdings nicht immer leicht zu verstehen sind. Daher stellt der Shader Editor eine große Hilfe dar, wenn es um das Verständnis eines Shader-Programms geht. Wer den Editor ausprobieren will, kann beispielsweise auch die Shader der GLSL Sandbox verändern und die Auswirkungen sofort betrachten.

201311Nov

AngularJS: Release 1.2.0, Caching und Animationen

Auch bei AngularJS hat sich in dieser Woche wieder Einiges getan: Zum einen wurde die stabile Version 1.0.8 nun durch den Release der Version 1.2.0 ersetzt — hier gibt es einige Neuerungen, die unter Anderem Animationen, striktes Escaping, die ng-repeat-Directive sowie die "Controller as"-Syntax betreffen. Weiterhin gibt es ein paar Tipps zum Caching mittels "$cacheFactory" und der Verwendung eines LRU-Caches (Least Recently Used) und schließlich wurde noch ein Artikel über Performance-Optimierung durch DOM-Caching und Watcher-Anpassungen veröffentlicht.

AngularJS - Superheroic JavaScript MVW Framework

Den Round-Up gibt es hier als Liste:

201310Nov

JavaScript: Performance-Analyse mit window.performance

JavaScript steckt voller Überraschungen: Wie Stefan Judis in seinem Artikel schreibt, gibt es im globalen window-Scope ein performance-Objekt, das interessante Information zur Website-Leistung beinhaltet. Innerhalb dieses Objekts stehen wiederum die Objekte "timing", "navigation" und "memory" zur Verfügung, die Aufschluss über die verschiedenen Bereiche geben: Das "timing"-Objekt vom Typ "PerformanceTiming" beispielsweise listet etliche Zeitmessungen der Latenzen einer Website auf, so dass hieraus bestimmte Ereignisse abgeleitet werden können.

Journey of Discovery - the Global window.performance Object

Stefan Judis hat diesbezüglich ein Gist veröffentlicht, das sich gut im "Snippets"-Bereich der Chrome-Entwicklertools ablegen lässt (unter Firefox stehen noch nicht alle Funktionen des performance-Objekts bereit). Die Snippets basieren auf den Messungen des timing-Objekts und zeigen die Zeiten an, die etwa für DNS-Lookups, das "DOMContentLoaded"-Event oder das "document.load"-Event benötigt wurden.
Weiterhin lässt sich mit dem window.performance-Objekt analysieren, welche Elemente einer Seite ein Bottleneck sein könnten: Mit "window.performance.getEntries()" etwa können die Ladezeiten für einzelne Web-Ressourcen abgefragt werden, so dass daraus Optimierungen erarbeitet werden können.

201308Nov

GlyphSearch: Icons in bekannten Icon-Sets finden

Der Einsatz von Web-Schriftarten und damit verbundenen "Icon Fonts" wird immer selbstverständlicher, da moderne Webbrowser OpenType- und TrueType-Schriftarten nativ unterstützen. Firefox und Internet Explorer ermöglichen individuelle Schriften schon seit geraumer Zeit durch WOFF und EOT und somit sind entsprechende Icon Font-Pakete stark im Trend: Sie heißen Font Awesome, GLYPHICONS oder Ionicons und enthalten etliche Symbole, die kostenlos verwendet werden können.

GlyphSearch: Search for icons from Font Awesome, Glyphicons, and Ionicons

Ein Überblick der enthaltenen Icons findet sich auf den Websites der Icon-Set-Anbieter. Wer in allen Sets zugleich eine Suche ausführen möchte, kann dazu GlyphSearch verwenden. Eine kleine Suchmaschine, welche den Suchbegriff auf die genannten Icon-Pakete anwendet und entsprechende Treffer liefert.