Dieter Petereit 12. März 2014

Unausweichlich: 10 aktuelle JavaScript-Lösungen, an denen ich nicht vorbeikam

Haben Sie schon “You might not need jQuery” gelesen? Diese Site hat bekanntlich in den letzten Wochen einige Wellen geschlagen. Grundtenor der Aussage ist, dass man sich besser damit beschäftigen sollte, die Fähigkeiten moderner Browser direkt aka standardkonform anzusprechen, anstatt sich auf jQuery zu verlassen, um damit im Grunde dasselbe Ergebnis zu erzielen. Ich finde den Ansatz zwar nachvollziehbar und ansprechend, aber. Welcher Developer kann schon sicher sagen, welcher Browser nicht für die Nutzung der Seite verwendet werden wird? Ich tue mich schwer, jQuery zu verbannen, bin jedoch von jeher auch stets den JavaScript-Lösungen zugetan, die eben nicht auf dem Framework (oder einem anderen) basieren. Derzeit würde ich nicht empfehlen, sich auf pures CSS zu verlassen, selbst wenn es theoretisch machbar erscheint. Ohne JavaScript kommt man ohnehin nicht aus, also wieso sollte es man nicht zusätzlich da nutzen, wo es sinnvoll ist? Die folgenden Scripts haben mich in letzter Zeit besonders überzeugt…

JavaScript: Wieso denn nicht?

Die Verwendung von JavaScript ist nicht nur da sinnvoll, wo es keine anderen guten Optionen gibt. Die Verwendung von JavaScript, so wie ich sie verstehe, is schon da sinnvoll, wo andere Lösungen komplexer sind, mehr Codezeilen benötigen oder in anderer Weise hinter JavaScript zurückfallen. Bevor ich mir die Pfoten an 10 Zeilen Prefixed Code breche, nehme ich ein gutes JavaScript. Die meisten Projekte, an denen ich (mit)arbeite, setzen ohnehin auf jQuery, insofern stellt sich die Frage nach der Nutzung bereits vorhandener Funktionalität zumeist gar nicht erst. Einige meiner kleineren Projekte verzichten zwar auf jQuery, nutzen aber JavaScript auf die ein oder andere Art. Auch da gibt es also keinen Grund, auf JavaScript zu verzichten, selbst wenn ich es könnte.

Bevor ich noch den Eindruck erwecke, hier missionieren zu wollen, lassen Sie sich von den folgenden Tools überzeugen. Links zu Demo und Repository finden Sie unterhalb des Beitrags im Abschnitt "Links zum Artikel":

ProgressJS

progressjs-w550

ProgressJS ist eine JavaScript- und CSS3-Bibliothek zur Erstellung und Verwaltung von optisch sehr ansprechenden Fortschrittsbalken für beliebige Objekte innerhalb einer Seite. Afshin Mehrabani aus Teheran veröffentlichte das Tool Mitte Februar 2014. Es befindet sich noch im frühen Beta-Stadium.

Die Verwendung ist einfach. ProgressJS kann für die ganze Seite eingesetzt werden. In diesem Modus zeigt das Script einen Fortschrittsbalken am oberen Ende des sichtbaren Browserfensters. Nachdem Sie ProgressJS und das zugehörige CSS eingebaut haben, aktivieren Sie das Tool für diesen Anwednungszweck so:

progressJs().start();

Soll ProgressJS nur ein spezielles Element behandeln, sieht der Call etwas anders aus:

progressJs("#targetElement").start();

Schauen Sie sich die Demo an und laden das Script von Github herunter. ProgressJS steht unter MIT-Lizenz und ist daher kostenfrei privat, wie kommerziell verwendbar.

WOW.js

wowjs-w550

Wow.js versteckt HTML-Elemente bis sie den Viewport erreichen. Warum Sie das wollen sollten? Nun, es bringt etwas Leben in Ihre ansonsten sehr statischen Webseiten.

Um Animationen zu verwenden, setzt Wow.js auf separate CSS Animations-Bibliotheken. Im Standard wird Animate.css verwendet. Sie können eine Bibliothek Ihrer Wahl verwenden, indem Sie den entsprechenden Embed-Link ändern.

Nachdem Sie Wow.js eingebettet und wie folgt initialisiert haben,


ist es betriebsbereit und wartet auf Elemente, die mit der Klasse wow ausgestattet sind. Diese Elemente werden von nun an unsichtbar gehalten, bis der Benutzer weit genug gescrollt hat, dass sie eigentlich sichtbar sein müssten. Sobald das passiert, werden die Elemente sichtbar gemacht.

Damit das dann auch dem Auge schmeichelt, können Sie verschiedene Animationen auf das Element loslassen:

Mein toller Inhalt wird jetzt sichtbar

Wow.js wurde ersonnen vom bekannten Vincent LeMoign aka Webalys und geschrieben von Matthieu Aussaguel. Es steht ebenfalls zur kostenfreien privaten und kommerziellen Nutzung unter der MIT-Lizenz zur Verfügung.

Dug.js

dugjs-w550

Rogie King aus dem amerikanischen Montana suchte einen Weg, sein Dribbble-Portfolio auf seiner eigenen Webseite zu zeigen. Er fand heraus, dass Dribbble JSONP-kompatible Feeds anbietet und ersann daraufhin Dug.js. Dieses kleine JavaScript ist in der Lage, beliebige JSONP-Feeds auszulesen und ansprechend aufbereitet anzuzeigen.

Alles, was Sie benötigen, ist eine JSONP-kompatible API und ein HTML-Template für die Anzeige. 500px, Instagram, Pinterest, Dribbble (offensichtlich), Github – alle bieten JSONP. Mit Dug.js erstellen Sie nun auf einfache Weise einen Output des Feeds für Ihre Seite, etwa so:

Weitere Parameter zur verfeinerten Steuerung stehen bereit. Auch Dug.js steht kostenfrei zur Verfügung. Hier gilt sogar die erstaunliche WTFPL (do What The Fuck you want to Public License). Hmm ;-)

Zoomerang.js

zoomerangjs-w550

Evan You, der Macher von Zoomerang, lebt in New York und arbeitet für Google. Zoomerang.js fokussiert sich auf eine einzige Aufgabe, tut das jedoch besonders gut. Das JavaScript erlaubt es Ihnen, beliebige Elemente auf Ihrer Seite ein- und wieder auszuzoomen. Dabei ist es egal, um was für eine Art Element es sich handelt, sei es ein Bild, ein Text oder was auch immer. Dabei bleibt die eigentliche Seite scrollbar. Ein- und Auszoomen funktioniert nach dem Schalter-Prinzip, ein Klick auf ein Element zoomt ein, ein erneuter Klick zoomt wieder aus.

Zoomerang.js steht zum Download auf Github bereit und kann kostenfrei privat und kommerziell unter den Bedingungen der MIT-Lizenz genutzt werden.

Placeholdem

placeholdem-w550

Der Webentwickler Jack Rugile aus Denver im amerikanischen Colorado wollte, dass Platzhalter in Eingabefeldern nicht nur verschwinden, sobald der Focus auf dem Eingabefeld liegt, sondern auch wieder sichtbar werden on Blur. Zudem wollte er nicht nur ein simples Ausblenden und Einblenden, sondern legte Wert auf ein inkrementelles Löschen und Zurückschreiben. Und genau das tut Placeholdem.

Fügen Sie einen Platzhalter zu einem Eingabefeld oder einer Textarea hinzu:

Dann lassen Sie Placeholdem auf alle Elemente mit Platzhaltern los:

Placeholdem( document.querySelectorAll( '[placeholder]' ) );

Das ist schon alles. Placeholdem kann kostenlos privat und kommerziell genutzt werden. Es gelten die Bedingungen der MIT-Lizenz.

scrollReveal.js

scrollrevealjs-w550

scrollReveal.js von Julian Lloyd aus dem sonnigen Kalifornien ist derzeit eher ein Experiment, denn eine robuste Lösung. Dennoch, was man sieht, ist durchaus viel versprechend. scrollReveal animiert Elemente beim Eintritt in den Viewport. Uninteressant? Schauen Sie sich die Demo an.

Worin sich scrollReveal.js von anderen ähnlichen Lösungen absetzt, sind die weichen Animationen, die noch dazu natürlich-sprachlich definiert werden. Hier ist ein Beispiel:

Foo
Bar
Baz

Wollen Sie nicht jedesmal auf’s neue längere Definitionen verfassen, können Sie per var config Animationen vordefinieren.

Auch scrollReveal steht unter der MIT-Lizenz und kann daher frei privat und kommerziell eingestezt werden. Das Projekt wurde inspiriert durch Codrops cbpScroller.js.

Tether

tether-w550

Tether ist eine ausgewachsene Funktionsbibliothek, die es Ihnen ermöglicht, Elemente an andere Elemente zu flanschen. Das klingt erst einmal simpel. Dabei ist Tether ein sehr durchdachtes, funktionsreiches Tool, dem man die Hirnkraft ansieht, die in es geflossen ist.

Um Elemente miteinander zu verbinden definieren Sie Punkte auf beiden Elementen. Das Element, mit dem ein anderes verbunden werden soll, nennt sich Target. Tether sorgt nun dafür, dass die beiden definierten Punkte übereinander gehalten werden. Die Definition der Punkte erfolgt natürlich-sprachlich. Hier ist ein Beispiel:

new Tether({
  element: yellowBox,
  target: greenBox,
  attachment: 'top right',
  targetAttachment: 'top left'
});

Tether wird erstellt und erweitert von HubSpot aus Cambridge und kann als Open Source frei verwendet werden. Schauen Sie auf jeden Fall in HubSpots Github-Repository. Dort gibt es eine ganze Reihe interessanter Projekte, teilweise auf Tether basierend.

imagesLoaded

imagesloaded-w550

imagesLoaded ist ein leichtgewichtiges Toll für einen einzelnen Zweck. Es gibt ein Event aus, wenn Bilder geladen wurden. Dieses Event kann man dann auslesen und programmlogisch darauf reagieren. Erkennt imagesLoaded die Verfügbarkeit von jQuery, arbeitet es als Plugin. Wenn nicht, arbeitet es allein.

imagesLoaded wird entwickelt von Tomas Sardyha und David DeSandro. Das Tool steht unter MIT-Lizenz kostenfrei zur Verwendung bereit.

simpleCart(js)

simplecartjs-w550

Mit simpleCart.js bauen Sie auf einfachste Weise Warenkorbfunktionalität in beliebige Websites ein. Wenn Sie wissen, wie man Klassen an HTMl-Elemente anfügt und JavaScript in HTML-Dokumente einbettet, dann hält Sie kaum noch etwas vom Verkaufen Ihrer Produkte über die eigene Website ab. Nun müssen Sie sich noch auf die vorgegebenen Zahlungsprovider Amazon Payments, Google Checkout oder Paypal einlassen können und schon kann’s losgehen. Ein E-Mail-Checkout ist in Arbeit, aber noch nicht fertig.

Der Einbau eines Warenkorbs mit simpleCart.js ist, wie der Name vermuten lässt, simpel. Um die Funktionalität verfügbar zu machen, reicht folgender Aufruf:


Nun müssen Sie noch Produkte hinzufügen, die zum Verkauf stehen. Definieren Sie beliebig viele sog. Shelf-Items auf die folgende Weise:

Awesome T-shirt

$35.99 Add to Cart

Nachdem alles, was der Besucher sieht, von Ihnen geschrieben wird, kann simpleCart.js entsprechend international verwendet werden. Steuern und Währungen passen Sie im Rahmen des Funktionsaufrufes an.

simpleCart.js wird entwickelt von Wojo Design aus dem amerikanischen Chicago. Es ist mit einer Doppellizenz (MIT und GPL) ausgestattet und kann kostenfrei für private und kommerzielle Projekte verwendet werden.

Sticker.js

stickerjs-w550

Sticker.js von Jongmin Kim aus New York ist keine reine JavaScript-LÖsung, sondern verlässt sich zusätzlich auf CSS3. Dadurch ist es beschränkt auf die Verwendung in modernen Browsern. Der IE wird ab Version 10 unterstützt.

Um zu verstehen, was Sticker.js leistet, empfiehlt sich ein Blick auf die Demo. Mit Sticker.js animierte Elemente verhalten sich wie Aufkleber, die man von verschiedenen Seiten abziehen und wieder anpappen kann. Das Ziehen und Pappen erfolgt beim Hovern mit der Maus über dem Element. Die Optik wird mittels CSS kontrolliert und das JavaScript kann mit Klassen und IDs gleichermaßen umgehen.

Das ist eine Grundkonfiguration:

 
    

Nun fügen wir ein Bild oder eine Hintergrundfarbe hinzu:

    .sticker {
        width: 180px;
        height: 180px;
    }

    // add image
    .example-1 .sticker-img {
        background-image: url(heroes-2.png);
    }

    // add color
    .example-2 .sticker-img {
        background-color: #ff4a85;
    }

    // change shadow opacity
    .example-2 .sticker-shadow {
        opacity: 0.6;
    }

Und dann lassen wir die Methode drauf los:

Sticker.init('.sticker');

Sticker.js steht ebenfalls unter der MIT-Lizenz. Es ist dementsprechend kostenlos, sowohl privat, wie auch kommerziell nutzbar.

Links zum Artikel:

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

14 Kommentare

  1. Einige Interessante Plugins, die ich noch nicht kannte. WOW.js werde ich im aktuellen Projekt einsetzen. Thx

  2. Danke für diesen tollen Artikel!

  3. Mag ja sein, dass Du seit 1994 „dabei“ bist.
    Dabei passiert allerdings genau das, was die Crux an „30 Jahren Erfahrung“ ist:
    Man verkalkt leicht.
    Ich bin neu.

    (Also eigentlich bin ich alt.
    Also so um die 50.
    Aber ich bin ganz neu im WebDesign & Co.)
    Ich finde HTML5 und CSS3 ehrlich gesagt, geil.
    Und ich frage mich, was alle gegen die Klarheit,
    Schönheit und Reinheit dieser Tools haben.
    (Und ganz heimlich frage ich mich, ob die Szene
    einfach nur Angst vor etwas Neuem hat, das
    entmystifiziert, entglorifiziert.)
    Was Du -und mit Dir so viele andere vorschlagen-
    wirkt auf mich wie Veganer: Veganer Analog-Käse,
    veganer Analog-Joghurt, Wurst, Mayonaise – alles
    irgendwie „so wie“. Nur nicht echt.
    Bist Mitte Januar war ich noch ein vollkommen
    durchschnittlicher WebUser und Otto-Normal-Verbraucher.
    Mir gingen all diese Hampelfeatures und das Gedöns und
    Gezappele SO DERMAßEN auf den Sack !
    Was spricht gegen Reinheit und Klarheit, gegen Transparenz?

  4. Die Sache mit der Missionierung ist gar nicht so einfach. Habe vor Jahren meinen Kunden von der Verwendung von JS schon aus Kompatibilitätsgründen weitgehend abgeraten. Aber nun, im Jahre 2014 („was kümmert mich mein Geschwätz von …“), komme ich ohne nicht mehr aus. Warum auch? Schrottbrowser wie der IE6 sind zum Glück fast verschwunden und mit jQuery und anderen Produkten kann man effizient Code erstellen, der voraussichtlich – zur Not mit kleinen Updates – die nächsten Jahre noch funktionieren wird (mehr oder weniger, vielleicht, hoffentlich).

    2020 wird mich mein Geschwätz – ach, lassen wir das …

  5. Hallo Dieter, es wäre echt deutlich einfacher wenn die einzelnen Lösungen auch verlinkt wären. Sei es in der Überschrift oder bei nem Keyword.

    • Obendrüber steht, dasse untendrunter verlinkt sind. Und so isses auch ;-)

      • Direkt bei der einzelnen Lösung wäre auch meiner Ansicht nach etwas anwendungsfreundlicher (und zusätzlich mit _blank als Ziel)
        Wenn man den Text liest, will man meist schnell das Demo anschauen. So muss man erst irgendwo in die Mitte dieser Seite scrollen (zwischen Content und Kommentaren), nachher wieder den Punkt finden, wo man vorher war.
        Wenn ich alles gelesen habe und bei den Links lande, weiß ich nicht mehr, was mich vorhin alles neugierig gemacht hatte.
        Vorteil von HTML im Gegensatz zu Buch-Fußnoten soll ja angeblich eine direkte Verlinkungsmöglichkeit sein ;-p

      • Bis auf das Blank habe ich es heute bereits beherzigt ;-)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.