Außerdem: Gesichtsnähe erkennen mit JavaScript

Fast Forward Spezial: Glas-Effekte mit Raphaël, Best Practices für Sinon.js & Breeze.js
Kommentare

Und gleich der nächste Teil unserer themenspezifischen Fast Forward-Reihe, diesmal mit Fokus auf JavaScript. Den Einstieg machen Beiträge zu gleich drei JS-Libraries: mit der JS Graphics Library Raphaël lassen sich tolle Transparenzeffekte kreieren, Sinon.js dagegen macht bei Unit-Tests Server und Datenbanken überflüssig und Breeze.js hilft dabei, bessere Queries zu schreiben. Außerdem geht es um die bessere Planung von Background-Tasks und die Möglichkeit, per Gesichtserkennungssoftware die Nähe des Users zum Bildschirm zu bestimmen.

Glas-Effekte mit Raphaël

Manchmal soll ein Overlay einen bestimmten Bereich einer Website abdecken, aber nicht gänzlich unsichtbar machen – ein transparenter Effekt ist hier notwendig. Dafür gibt es nun diverse Optionen, eine ziemlich bequeme stellt die JS-Graphics-Library Raphaël dar. Damit lässt sich ein Glas-Effekt einfach über definierte Inhalte legen und über den Code jederzeit problemlos bearbeiten. Die Library hat gegenüber anderen Lösungen nicht nur den Vorteil, dass sie leicht zu benutzen ist; die damit erstellten Glas-Effekte sind außerdem nicht von einer HTML5-Unterstützung abhängig, sondern funktionieren auch mit anderen HTML-Versionen.

Best Practices für Sinon.js

Sinon.js ist eine praktische Library für Unit Tests in JavaScript. Der Vorteil ist, dass man mit ihr darauf verzichten kann, extra Server oder Datenbanken für das Testing aufzusetzen. Allerdings ist es nicht so einfach, das Tool zu erlernen. Zum Beispiel: was sind Spies, Stubs, Mocks? Ein neues Tutorial von Jani Hartikainen erklärt nicht nur, dass es sich dabei um sogenannte Test Doubles handelt, sondern auch, wann und wie man sie einsetzt. Darüber hinaus werden einige Best Practises aufgelistet, die helfen sollten, den Einstieg zu erleichtern.

Bessere Queries mit Breeze.js schreiben

Das rapide Anwachsen von Datenvolumen macht ihre Pflege immer schwieriger. Viele Entwickler wollen die Probleme, die dadurch in ihrem Job entstehen, gerne umschiffen – und das ist auch möglich. Eine Library, die ihnen dabei hilft, ihre Arbeit zu erleichtern, ist Breeze.js. In seinem Artikel spricht Taulant Spahiu über die Geschichte hinter Breeze.js und erklärt, wie man mit der Library bessere Queries schreiben kann.

Fast Forward Spezial im Überblick

Alle Beiträge aus unserer Reihe Fast Forward Spezial finden Sie hier.

Webperformance: Background-Tasks in JavaScript planen

JavaScript-Funktionen und script-Befehle haben immer Vorrang – und das ist auch sinnvoll. Aber manchmal hat ihr Prioritätenstatus auch erhebliche Nachteile. Lange Scripte blockieren andere Aufgaben und führen dazu, dass Browser langsamer reagieren. Aber nicht jedes Script muss notwendigerweise gleich zu Beginn geladen werden. Es gibt auch weniger wichtige Hintergrundprozesse, die nicht direkt die User Experience beeinflussen. Wie die Performance der eigenen Seite durch die Planung von Background-Tasks in JavaScript verbessert werden kann, erklärt Craig Buckler in seinem Artikel.

Gesichtsnähe erkennen mit JavaScript

Niemand liest Anleitungen, das ist für Entwickler eigentlich ein Fluch. Andererseits entsteht so zumindest der Ansporn, elegante und benutzerfreundliche Problemlösungen zu finden. Das hat sich auch Peter Bengtsson gedacht und einen JavaScript-basierten Algorithmus geschrieben, um Usern nicht umständlich erklären zu müssen, wie nah sie ihr Gesicht vor einer Webcam platzieren müssen. Dazu greift er auf das Gesichtserkennungsprojekt CVV zurück und lässt abhängig von einem dynamischen Durchschnittswert für die Entfernung entsprechende Meldungen an den User durchgeben. Wer alle Aspekte des Tutorials durcharbeiten will, dem sei geraten, schon mal ein Lineal zu suchen.

Aufmacherbild: Glass framework on metal background, Vector design template. (modifiziert) von Shutterstock / Urheberrecht: sirapob

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -