Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
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” gele­sen? Diese Site hat bekannt­lich in den letz­ten Wochen eini­ge Wellen geschla­gen. Grundtenor der Aussage ist, dass man sich bes­ser damit beschäf­ti­gen soll­te, die Fähigkeiten moder­ner Browser direkt aka stan­dard­kon­form anzu­spre­chen, anstatt sich auf jQuery zu ver­las­sen, um damit im Grunde das­sel­be Ergebnis zu erzie­len. Ich fin­de den Ansatz zwar nach­voll­zieh­bar und anspre­chend, aber. Welcher Developer kann schon sicher sagen, wel­cher Browser nicht für die Nutzung der Seite ver­wen­det wer­den wird? Ich tue mich schwer, jQuery zu ver­ban­nen, bin jedoch von jeher auch stets den JavaScript-Lösungen zuge­tan, die eben nicht auf dem Framework (oder einem ande­ren) basie­ren. Derzeit wür­de ich nicht emp­feh­len, sich auf pures CSS zu ver­las­sen, selbst wenn es theo­re­tisch mach­bar erscheint. Ohne JavaScript kommt man ohne­hin nicht aus, also wie­so soll­te es man nicht zusätz­lich da nut­zen, wo es sinn­voll ist? Die fol­gen­den Scripts haben mich in letz­ter Zeit beson­ders über­zeugt…

JavaScript: Wieso denn nicht?

Die Verwendung von JavaScript ist nicht nur da sinn­voll, wo es kei­ne ande­ren guten Optionen gibt. Die Verwendung von JavaScript, so wie ich sie ver­ste­he, is schon da sinn­voll, wo ande­re Lösungen kom­ple­xer sind, mehr Codezeilen benö­ti­gen oder in ande­rer Weise hin­ter JavaScript zurück­fal­len. Bevor ich mir die Pfoten an 10 Zeilen Prefixed Code bre­che, neh­me ich ein gutes JavaScript. Die meis­ten Projekte, an denen ich (mit)arbeite, set­zen ohne­hin auf jQuery, inso­fern stellt sich die Frage nach der Nutzung bereits vor­han­de­ner Funktionalität zumeist gar nicht erst. Einige mei­ner klei­ne­ren Projekte ver­zich­ten zwar auf jQuery, nut­zen aber JavaScript auf die ein oder ande­re Art. Auch da gibt es also kei­nen Grund, auf JavaScript zu ver­zich­ten, selbst wenn ich es könn­te.

Bevor ich noch den Eindruck erwe­cke, hier mis­sio­nie­ren zu wol­len, las­sen Sie sich von den fol­gen­den Tools über­zeu­gen. Links zu Demo und Repository fin­den Sie unter­halb des Beitrags im Abschnitt “Links zum Artikel”:

ProgressJS

progressjs-w550

ProgressJS ist eine JavaScript- und CSS3-Bibliothek zur Erstellung und Verwaltung von optisch sehr anspre­chen­den Fortschrittsbalken für belie­bi­ge Objekte inner­halb einer Seite. Afshin Mehrabani aus Teheran ver­öf­fent­lich­te das Tool Mitte Februar 2014. Es befin­det sich noch im frü­hen Beta-Stadium.

Die Verwendung ist ein­fach. ProgressJS kann für die gan­ze Seite ein­ge­setzt wer­den. In die­sem Modus zeigt das Script einen Fortschrittsbalken am obe­ren Ende des sicht­ba­ren Browserfensters. Nachdem Sie ProgressJS und das zuge­hö­ri­ge CSS ein­ge­baut haben, akti­vie­ren Sie das Tool für die­sen Anwednungszweck so:

progressJs().start();

Soll ProgressJS nur ein spe­zi­el­les Element behan­deln, sieht der Call etwas anders aus:

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

Schauen Sie sich die Demo an und laden das Script von Github her­un­ter. ProgressJS steht unter MIT-Lizenz und ist daher kos­ten­frei pri­vat, wie kom­mer­zi­ell ver­wend­bar.

WOW.js

wowjs-w550

Wow.js ver­steckt HTML-Elemente bis sie den Viewport errei­chen. Warum Sie das wol­len soll­ten? Nun, es bringt etwas Leben in Ihre ansons­ten sehr sta­ti­schen Webseiten.

Um Animationen zu ver­wen­den, setzt Wow.js auf sepa­ra­te CSS Animations-Bibliotheken. Im Standard wird Animate.css ver­wen­det. Sie kön­nen eine Bibliothek Ihrer Wahl ver­wen­den, indem Sie den ent­spre­chen­den Embed-Link ändern.

Nachdem Sie Wow.js ein­ge­bet­tet und wie folgt initia­li­siert haben,


ist es betriebs­be­reit und war­tet auf Elemente, die mit der Klasse wow aus­ge­stat­tet sind. Diese Elemente wer­den von nun an unsicht­bar gehal­ten, bis der Benutzer weit genug gescrollt hat, dass sie eigent­lich sicht­bar sein müss­ten. Sobald das pas­siert, wer­den die Elemente sicht­bar gemacht.

Damit das dann auch dem Auge schmei­chelt, kön­nen Sie ver­schie­de­ne Animationen auf das Element los­las­sen:

Mein toller Inhalt wird jetzt sichtbar

Wow.js wur­de erson­nen vom bekann­ten Vincent LeMoign aka Webalys und geschrie­ben von Matthieu Aussaguel. Es steht eben­falls zur kos­ten­frei­en pri­va­ten und kom­mer­zi­el­len Nutzung unter der MIT-Lizenz zur Verfügung.

Dug.js

dugjs-w550

Rogie King aus dem ame­ri­ka­ni­schen Montana such­te einen Weg, sein Dribbble-Portfolio auf sei­ner eige­nen Webseite zu zei­gen. Er fand her­aus, dass Dribbble JSONP-kom­pa­ti­ble Feeds anbie­tet und ersann dar­auf­hin Dug.js. Dieses klei­ne JavaScript ist in der Lage, belie­bi­ge JSONP-Feeds aus­zu­le­sen und anspre­chend auf­be­rei­tet anzu­zei­gen.

Alles, was Sie benö­ti­gen, ist eine JSONP-kom­pa­ti­ble API und ein HTML-Template für die Anzeige. 500px, Instagram, Pinterest, Dribbble (offen­sicht­lich), Github – alle bie­ten JSONP. Mit Dug.js erstel­len Sie nun auf ein­fa­che Weise einen Output des Feeds für Ihre Seite, etwa so:

Weitere Parameter zur ver­fei­ner­ten Steuerung ste­hen bereit. Auch Dug.js steht kos­ten­frei zur Verfügung. Hier gilt sogar die erstaun­li­che 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 arbei­tet für Google. Zoomerang.js fokus­siert sich auf eine ein­zi­ge Aufgabe, tut das jedoch beson­ders gut. Das JavaScript erlaubt es Ihnen, belie­bi­ge Elemente auf Ihrer Seite ein- und wie­der aus­zu­zoo­men. Dabei ist es egal, um was für eine Art Element es sich han­delt, sei es ein Bild, ein Text oder was auch immer. Dabei bleibt die eigent­li­che Seite scroll­bar. Ein- und Auszoomen funk­tio­niert nach dem Schalter-Prinzip, ein Klick auf ein Element zoomt ein, ein erneu­ter Klick zoomt wie­der aus.

Zoomerang.js steht zum Download auf Github bereit und kann kos­ten­frei pri­vat und kom­mer­zi­ell unter den Bedingungen der MIT-Lizenz genutzt wer­den.

Placeholdem

placeholdem-w550

Der Webentwickler Jack Rugile aus Denver im ame­ri­ka­ni­schen Colorado woll­te, dass Platzhalter in Eingabefeldern nicht nur ver­schwin­den, sobald der Focus auf dem Eingabefeld liegt, son­dern auch wie­der sicht­bar wer­den on Blur. Zudem woll­te er nicht nur ein simp­les Ausblenden und Einblenden, son­dern leg­te Wert auf ein inkre­men­tel­les Löschen und Zurückschreiben. Und genau das tut Placeholdem.

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

Dann las­sen Sie Placeholdem auf alle Elemente mit Platzhaltern los:

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

Das ist schon alles. Placeholdem kann kos­ten­los pri­vat und kom­mer­zi­ell genutzt wer­den. Es gel­ten die Bedingungen der MIT-Lizenz.

scrollReveal.js

scrollrevealjs-w550

scrollReveal.js von Julian Lloyd aus dem son­ni­gen Kalifornien ist der­zeit eher ein Experiment, denn eine robus­te Lösung. Dennoch, was man sieht, ist durch­aus viel ver­spre­chend. scrollReveal ani­miert Elemente beim Eintritt in den Viewport. Uninteressant? Schauen Sie sich die Demo an.

Worin sich scrollReveal.js von ande­ren ähn­li­chen Lösungen absetzt, sind die wei­chen Animationen, die noch dazu natür­lich-sprach­lich defi­niert wer­den. Hier ist ein Beispiel:

Foo
Bar
Baz

Wollen Sie nicht jedes­mal auf’s neue län­ge­re Definitionen ver­fas­sen, kön­nen Sie per var config Animationen vor­de­fi­nie­ren.

Auch scrollReveal steht unter der MIT-Lizenz und kann daher frei pri­vat und kom­mer­zi­ell ein­ge­stezt wer­den. Das Projekt wur­de inspi­riert durch Codrops cbpScroller.js.

Tether

tether-w550

Tether ist eine aus­ge­wach­se­ne Funktionsbibliothek, die es Ihnen ermög­licht, Elemente an ande­re Elemente zu flan­schen. Das klingt erst ein­mal sim­pel. Dabei ist Tether ein sehr durch­dach­tes, funk­ti­ons­rei­ches Tool, dem man die Hirnkraft ansieht, die in es geflos­sen ist.

Um Elemente mit­ein­an­der zu ver­bin­den defi­nie­ren Sie Punkte auf bei­den Elementen. Das Element, mit dem ein ande­res ver­bun­den wer­den soll, nennt sich Target. Tether sorgt nun dafür, dass die bei­den defi­nier­ten Punkte über­ein­an­der gehal­ten wer­den. Die Definition der Punkte erfolgt natür­lich-sprach­lich. Hier ist ein Beispiel:

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

Tether wird erstellt und erwei­tert von HubSpot aus Cambridge und kann als Open Source frei ver­wen­det wer­den. Schauen Sie auf jeden Fall in HubSpots Github-Repository. Dort gibt es eine gan­ze Reihe inter­es­san­ter Projekte, teil­wei­se auf Tether basie­rend.

imagesLoaded

imagesloaded-w550

imagesLoaded ist ein leicht­ge­wich­ti­ges Toll für einen ein­zel­nen Zweck. Es gibt ein Event aus, wenn Bilder gela­den wur­den. Dieses Event kann man dann aus­le­sen und pro­gramm­lo­gisch dar­auf reagie­ren. Erkennt imagesLoaded die Verfügbarkeit von jQuery, arbei­tet es als Plugin. Wenn nicht, arbei­tet es allein.

imagesLoaded wird ent­wi­ckelt von Tomas Sardyha und David DeSandro. Das Tool steht unter MIT-Lizenz kos­ten­frei zur Verwendung bereit.

simpleCart(js)

simplecartjs-w550

Mit simpleCart.js bau­en Sie auf ein­fachs­te Weise Warenkorbfunktionalität in belie­bi­ge Websites ein. Wenn Sie wis­sen, wie man Klassen an HTMl-Elemente anfügt und JavaScript in HTML-Dokumente ein­bet­tet, dann hält Sie kaum noch etwas vom Verkaufen Ihrer Produkte über die eige­ne Website ab. Nun müs­sen Sie sich noch auf die vor­ge­ge­be­nen Zahlungsprovider Amazon Payments, Google Checkout oder Paypal ein­las­sen kön­nen und schon kann’s los­ge­hen. Ein E-Mail-Checkout ist in Arbeit, aber noch nicht fer­tig.

Der Einbau eines Warenkorbs mit simpleCart.js ist, wie der Name ver­mu­ten lässt, sim­pel. Um die Funktionalität ver­füg­bar zu machen, reicht fol­gen­der Aufruf:


Nun müs­sen Sie noch Produkte hin­zu­fü­gen, die zum Verkauf ste­hen. Definieren Sie belie­big vie­le sog. Shelf-Items auf die fol­gen­de Weise:

Awesome T-shirt

$35.99 Add to Cart

Nachdem alles, was der Besucher sieht, von Ihnen geschrie­ben wird, kann simpleCart.js ent­spre­chend inter­na­tio­nal ver­wen­det wer­den. Steuern und Währungen pas­sen Sie im Rahmen des Funktionsaufrufes an.

simpleCart.js wird ent­wi­ckelt von Wojo Design aus dem ame­ri­ka­ni­schen Chicago. Es ist mit einer Doppellizenz (MIT und GPL) aus­ge­stat­tet und kann kos­ten­frei für pri­va­te und kom­mer­zi­el­le Projekte ver­wen­det wer­den.

Sticker.js

stickerjs-w550

Sticker.js von Jongmin Kim aus New York ist kei­ne rei­ne JavaScript-LÖsung, son­dern ver­lässt sich zusätz­lich auf CSS3. Dadurch ist es beschränkt auf die Verwendung in moder­nen Browsern. Der IE wird ab Version 10 unter­stützt.

Um zu ver­ste­hen, was Sticker.js leis­tet, emp­fiehlt sich ein Blick auf die Demo. Mit Sticker.js ani­mier­te Elemente ver­hal­ten sich wie Aufkleber, die man von ver­schie­de­nen Seiten abzie­hen und wie­der anpap­pen kann. Das Ziehen und Pappen erfolgt beim Hovern mit der Maus über dem Element. Die Optik wird mit­tels CSS kon­trol­liert und das JavaScript kann mit Klassen und IDs glei­cher­ma­ßen umge­hen.

Das ist eine Grundkonfiguration:

 
    

Nun fügen wir ein Bild oder eine Hintergrundfarbe hin­zu:

    .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 las­sen wir die Methode drauf los:

Sticker.init('.sticker');

Sticker.js steht eben­falls unter der MIT-Lizenz. Es ist dem­entspre­chend kos­ten­los, sowohl pri­vat, wie auch kom­mer­zi­ell nutz­bar.

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.

14 Kommentare

  1. Einige Interessante Plugins, die ich noch nicht kann­te. WOW.js wer­de ich im aktu­el­len Projekt ein­set­zen. Thx

  2. Danke für die­sen tol­len Artikel!

  3. Mag ja sein, dass Du seit 1994 “dabei” bist.
    Dabei pas­siert aller­dings genau das, was die Crux an “30 Jahren Erfahrung” ist:
    Man ver­kalkt leicht.
    Ich bin neu.

    (Also eigent­lich bin ich alt.
    Also so um die 50.
    Aber ich bin ganz neu im WebDesign & Co.)
    Ich fin­de HTML5 und CSS3 ehr­lich gesagt, geil.
    Und ich fra­ge mich, was alle gegen die Klarheit,
    Schönheit und Reinheit die­ser Tools haben.
    (Und ganz heim­lich fra­ge ich mich, ob die Szene
    ein­fach nur Angst vor etwas Neuem hat, das
    ent­mys­ti­fi­ziert, ent­glo­ri­fi­ziert.)
    Was Du -und mit Dir so vie­le ande­re vor­schla­gen-
    wirkt auf mich wie Veganer: Veganer Analog-Käse,
    vega­ner Analog-Joghurt, Wurst, Mayonaise – alles
    irgend­wie “so wie”. Nur nicht echt.
    Bist Mitte Januar war ich noch ein voll­kom­men
    durch­schnitt­li­cher WebUser und Otto-Normal-Verbraucher.
    Mir gin­gen all die­se 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 ein­fach. Habe vor Jahren mei­nen Kunden von der Verwendung von JS schon aus Kompatibilitätsgründen weit­ge­hend abge­ra­ten. Aber nun, im Jahre 2014 (“was küm­mert mich mein Geschwätz von …”), kom­me ich ohne nicht mehr aus. Warum auch? Schrottbrowser wie der IE6 sind zum Glück fast ver­schwun­den und mit jQuery und ande­ren Produkten kann man effi­zi­ent Code erstel­len, der vor­aus­sicht­lich – zur Not mit klei­nen Updates – die nächs­ten Jahre noch funk­tio­nie­ren wird (mehr oder weni­ger, viel­leicht, hof­fent­lich).

    2020 wird mich mein Geschwätz – ach, las­sen wir das …

  5. Hallo Dieter, es wäre echt deut­lich ein­fa­cher wenn die ein­zel­nen Lösungen auch ver­linkt wären. Sei es in der Überschrift oder bei nem Keyword.

    • Obendrüber steht, das­se unten­drun­ter ver­linkt sind. Und so isses auch ;-)

      • Direkt bei der ein­zel­nen Lösung wäre auch mei­ner Ansicht nach etwas anwen­dungs­freund­li­cher (und zusätz­lich mit _blank als Ziel)
        Wenn man den Text liest, will man meist schnell das Demo anschau­en. So muss man erst irgend­wo in die Mitte die­ser Seite scrol­len (zwi­schen Content und Kommentaren), nach­her wie­der den Punkt fin­den, wo man vor­her war.
        Wenn ich alles gele­sen habe und bei den Links lan­de, weiß ich nicht mehr, was mich vor­hin alles neu­gie­rig gemacht hat­te.
        Vorteil von HTML im Gegensatz zu Buch-Fußnoten soll ja angeb­lich eine direk­te Verlinkungsmöglichkeit sein ;-p

      • Bis auf das Blank habe ich es heu­te bereits beher­zigt ;-)

Schreibe einen Kommentar

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