Tag: jquery

201414Sep

Responsive Test: Online-Tool für responsive Websites

Mit Screenfly oder resizeMyBrowser stehen bereits Online-Tools zum Testen von Website-Größen bereit: Per iframe kann hier eine beliebige URL geladen und die Seite mit verschiedenen Fenstergrößen betrachtet werden. Mit Responsive Test steht nun ein weiterer Vertreter dieser Art zur Verfügung, der auf AngularJS und Bootstrap basiert.

Responsive Test - Test responsive layout, powered by AngularJS and Bootstrap 3

Das Tool bietet vordefinierte Größen von Smartphones und Tablets an, wodurch sich Media Queries und andere responsive Anpassungen testen lassen. Für jede Option wird ein semantischer Link erzeugt, der die unterschiedlichen Parameter des Tools enthält und somit weitergeleitet werden kann. Bei GitHub findet sich der Quellcode des Projekts.

201308Dez

Headroom.js: Kopfleiste durch Scrolling ausblenden

Der Effekt dürfte mittlerweile schon auf der einen oder anderen Website gesichtet worden sein: Wird durch das Scrollen der Seite ein gewisser Punkt erreicht, verschwindet der Kopfbereich der Seite. Oft handelt es sich dabei um eine kompakte Navigation, die wichtige Elemente beinhaltet. Dieser Effekt kann also nützlich sein, wenn ein Menü innerhalb eines bestimmten Bereichs der Seite angezeigt werden soll.
Wer zu dem Effekt das passende JavaScript-Modul sucht, ist mit Headroom.js gut bedient.

Headroom.js - Hide your header until you need it

Das Plugin kann direkt in JavaScript, in Verbindung mit jQuery oder mit AngularJS verwendet werden. Es bietet verschiedene Optionen wie eine Toleranz, einen vertikalen Offset sowie Klassen, die beim Eintreffen der Ereignisse vergeben werden. Mehr Details gibt es bei GitHub.

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.

201314Jul

Minified.js: Kompakte JavaScript-Bibliothek

JavaScript-Frameworks befinden sich im Umschwung: Durch die Fähigkeiten von HTML5, CSS3 und ECMAScript 5 können viele Szenarien mit nativen Funktionen abgedeckt werden. Dabei kann sogar eine bessere Performance erreicht werden, wenn beispielsweise CSS3-Transitions verwendet werden. Gerade für mobile Webanwendungen ist dieser Aspekt wichtig und so wird die weitere Entwicklung von JavaScript-Bibliotheken vor allem durch Smartphones und Tablets geprägt sein. Daher wird zukünftig nicht immer der volle Umfang eines größeren Frameworks gebraucht werden. Aus diesem Grund werden Kompakt-Frameworks wie Zepto immer beliebter. In diesem Zusammenhang lohnt sich auch ein Blick auf die Bibliothek Minified.js, die von Tim Jansen entwickelt wurde.

Minified.js - A Truly Lightweight JavaScript Library

Es handelt sich ebenfalls um JavaScript-Leichtgewicht, das mit schlanken 4 KB auskommt und dennoch alle wichtigen Features von jQuery oder MooTools beinhaltet. Dazu zählen DOM-Manipulationen, CSS-Anpassungen, Events, Animationen oder Ajax. Minified unterstützt beispielsweise auch Element Factories, die in jQuery derzeit noch fehlen:

  • var MINI = require('minified'), $ = MINI.$, $$ = MINI.$$, EE = MINI.EE;
  • var mySpan = EE('span', 'Hello World');
  •  
  • // Result:
  • <span>Hello World</span>

Weitere Infos finden sich in der API-Referenz oder in der Dokumentation.

201323Mai

Unheap: Übersichtliche jQuery-Plugin-Sammlung

Die Zahl der neu entwickelten jQuery-Plugins dürfte täglich ansteigen. Durch die einfache Architektur ist es sehr einfach, ein jQuery-Plugin zu schreiben. Mittlerweile gibt es bereits große Online-Sammlungen, die in Kategorien unterteilt sind und ein breites Spektrum an Plugins beinhalten.
Eine etwas modernere Auflistung findet sich auf der Seite Unheap: Auch hier wurden die verschiedenen Plugins in Kategorien unterteilt und lassen sich so besser unterscheiden.

Unheap - A tidy repository of jQuery plugins

Unheap ist sehr gut strukturiert und beinhaltet aktuelle Plugins für alle denkbaren Bereiche. Von Navigationen über UI-Widgets bis hin zu Video-Playern und Galerien. Es gibt eine Suchfunktion und neue Plugins können einfach über ein Formular eingereicht werden.
Weitere Sammlungen dieser Art, die nicht auf jQuery beschränkt sind, wären JSDB.io oder Jster.

201320Mai

jQuery: Native JavaScript-Äquivalente zu Funktionen

Frameworks wie jQuery oder MooTools zeichnen sich vor allem durch ihre einfache und intuitive Schreibweise aus. Hinter den Framework-Funktionen stecken meist komplexere Mechanismen, da Elemente mit speziellen Eigenschaften ausgestattet werden. Manche Funktionalitäten lassen sich aber mittlerweile auch sehr leicht nativ umsetzen, wodurch die Performance erhöht werden kann. Dieser Aspekt ist gerade bei mobilen Geräten sehr wichtig, da hier die Qualität einer WebApp durch übermäßige jQuery-Operationen schnell sinken kann.
Lee Brimelow von Adobe hat in einem Beitrag ein paar jQuery-Funktionen aufgezeigt, die in aktuellen Browsern mit nativen JavaScript-Funktionen ersetzt werden können.

Lee Brimelow - Native equivalents of jQuery functions

In der Aufzählung finden sich so die Äquivalente für Selektoren, DOM-Manipulationen und CSS-Änderungen, wie zum Beispiel:

  • jQuery:
  • $(document.body).append("<div id='myDiv'><img src='im.gif' /></div>");
  •  
  • JavaScript:
  • var frag = document.createDocumentFragment();
  •  
  • var myDiv = document.createElement("div");
  • myDiv.id = "myDiv";
  •  
  • var im = document.createElement("img");
  • im.src = "im.gif";
  •  
  • myDiv.appendChild(im);
  • frag.appendChild(myDiv);
  • document.body.appendChild(frag);

Sicherleicht ist die jQuery-Syntax kompakter, aber die native Schreibweise lässt sich einfach in einer Funktion verpacken und wenn es um Performance geht, sollten die integrierten Fähigkeiten des Browsers auf jeden Fall ausgenutzt werden. Wer wissen möchte, welcher Browser neuere Selektoren wie "querySelectorAll" unterstützt, kann dies auf CanIUse.com nachschlagen.
Lee Brimelow hat übrigens auch Benchmarks aufgestellt, in denen der Unterschied von jQuery zu nativen Funktionen deutlich wird.

201326Mär

Flat UI: Modernes PSD- und HTML-Interface-Kit

Im Rahmen einer Marketing-Aktion wurde kürzlich eine kostenlose Variante des "Flat UI"-Interface-Kits von Designmodo veröffentlicht. Der entsprechende Blog-Eintrag zeigt das User Interface und enthält Links zu den PSD-Dateien und der HTML-Version. Auf der Demo-Website können die Bedienelemente ausprobiert werden. Die HTML-Version basiert auf Twitters Bootstrap-Framework und macht zudem Gebrauch von Sass.

Flat UI

Das User Interface-Kit enthält verschiedene Farbschemata sowie Bedienelemte aller Art (Buttons, Progress Bars, Checkboxes, Slider, Tags, Navigationen und Icons). Die Quelldateien der HTML-Version stehen bei GitHub zum Download bereit. Darin enthalten sind neben den Sass-Modulen auch diverse jQuery-Plugins, HTML5-Shivs und die angefertigten Symbol-Schriftarten.

201325Mär

ThreeSixty: jQuery-Plugin für 360°-Ansichten

Fotografische Abbildungen von Objekten auf einer Website sind in der Regel zweidimensional und wenig interaktiv. Soll das Objekt von mehreren Perspektiven aus betrachtet werden können, bieten sich inzwischen verschiedene Methoden an: Neben dem Erstellen und Einbinden eines 3D-Modells per WebGL oder Flash kann in manchen Fällen auch die klassische Methode ausreichend sein. Hierbei werden die unterschiedlichen Ansichten des Objekts als Grafiken hinterlegt und dann je nach Mausinteraktionen angezeigt. Diese Pseudo-3D-Methode bewährt sich immer noch, da fotorealistische Abbildungen möglich sind und eine Rundum-Ansicht auf Basis der hinterlegten Bilder oft ausreichend ist.
Das jQuery-Plugin ThreeSixty kann in diesem Fall für die Interaktivität sorgen.

ThreeSixty - A jQuery plugin for creating draggable 360s

Das Plugin benötigt lediglich ein data-Attribut mit dem Dateipfad und einen Aufruf, in dem die Mausrichtung angegeben wird:

  • HTML:
  • <div class="threesixty" data-path="assets/img/src/gem{index}.JPG" data-count="61"></div>
  •  
  • jQuery:
  • $('.threesixty').threeSixty({
  • dragDirection: 'horizontal'
  • });

Anschließend lässt sich das Pseudo-3D-Objekt virtuell rotieren. Das Beispiel auf der Website dürfte die Funktionalität verdeutlichen.