JavaScript wurde 1995 von Netscape entwickelt und nannte sich zunächst LiveScript. Im Gegensatz zu HTML handelt es sich nicht um eine textbasierte Dokumentbeschreibungssprache, sondern um eine vollwertige Programmierungssprache.
Seit der Version 2.0 wurde es als Standard in Netscapes Browser Navigator implementiert. Da der Browser damals sehr populär war, verbreitete sich JavaScript sehr schnell und wurde in regelmäßigen Abständen weiterentwickelt. Nicht zu verwechseln ist es mit JAVA, welches von Sun entwickelt wurde, denn JavaScript ist im Aufbau deutlich einfacher, dafür jedoch auch eingeschränkter in den Möglichkeiten und ganz abgesehen davon für andere Zwecke gedacht.
Denn im Gegensatz zu Java stellt es eine unmittelbare Ergänzung und Erweiterung zu HTML dar und eignet sich insbesondere für Animationen, dynamische WWW-Seiten, einfache Anwendungsprogrammierungen oder die Projektsteuerung. Schärfster Konkurrent von JavaScript dürfte JScript sein, eine eigene Scriptsprache von Microsoft, die in die eigenen Browser implementiert wurde. Die beiden Sprachen ähneln sich stark, versuchen aber immer wieder, sich mit Weiterentwicklungen voneinander abzuheben.
jQuery gilt als verhältnismäßig einfacher und damit auch empfehlenswerter Einstieg, um mit JavaScript zu arbeiten. Es beseitigt die Nachteile von JavaScript, indem es eine sehr viel höhere Browserkompatibilität bietet und dementsprechend eine einheitliche Vorgehensweise. Zudem lassen sich viele Möglichkeiten und Optionen mithilfe von nur wenigen Zeilen Code umsetzen. Im Detail handelt es sich bei jQuery um eine freie JavaScript-Bibliothek, die Funktionen zur DOM-Navigation und -Manipulation bereithält. Mittlerweile nutzt nahezu jede zweite Website weltweit jQuery, in vielen Content-Management-Systemen und Frameworks wird es außerdem direkt als Standard mitgeliefert. Darunter beispielsweise Wordpress, Joomla oder Drupal.
Gerade komplexe Webanwendungen setzen der Rechenleistung des Clients häufig zu. Vor allem auf mobilen Geräten ist es wichtig, besondere Vorsorge dafür zu treffen, dass alles flott läuft. Mit der neuen User-Timing-API können Ladezeiten einfach und vor allem präzise per JavaScript getestet werden. Denn die Messwerte beziehen ihre Werte der High-Resolution-Time-API, welche Zeiten auf die Mikrosekunde genau messen kann. Mit der Navigation-Timing-API ist es zudem möglich, Ladezeiten einer Website anhand vordefinierter Messpunkte zu ermitteln. Dank der komplexen und teils präzisen Messmöglichkeiten können Entwickler gut feststellen, an welchen Stellen innerhalb einer Anwendung es hakt.
Ist der Browser, wie wir ihn heute kennen, ein Auslaufmodell? Können wir auch ohne ihn das Web nutzen? Die Antwort auf die zweite Frage ist ein klares Ja. Das Headless Web macht es möglich.
Wir schreiben das Frühjahr des Jahres 2018. Es handelt sich um das Jahr, in dem sich Progressive Web Apps aller Prognose nach endgültig durchsetzen dürften. Wenn du dich mit dem Thema bisher nicht beschäftigt hast, dann wird es jetzt höchste Zeit. Wir helfen dir dabei.
Lebendige Effekte auf Websites können dir im Wettbewerb um die Aufmerksamkeit der Nutzer gute Dienste leisten. Du denkst vielleicht direkt an parallaxes Scrolling. Das aber ist nicht die einzige Option für dynamisches Webdesign.
Das Abarbeiten von Checklisten hilft nachgewiesenermaßen dabei, die Qualität dessen zu verbessern, für das die jeweilige Checkliste entworfen wurde. Die Front-End Checklist von David Dias widmet sich dem Thema Webentwicklung und lässt keine Aspekte vermissen.
Der Website-Builder Wix bietet künftig auch die Möglichkeit, Code zu schreiben und zu bearbeiten. Das ist aber nicht die größte Neuerung am neuen Produkt Wix Code.
Bewegen muss es sich, sonst ist es nicht modern. Das gilt natürlich auch für den Hintergrund deiner Website. Bubbly Backgrounds ist zu deinen Diensten.
Vermisst du die Neunziger und die Anfänge der grafischen Oberflächen für den Massenmarkt? Dann habe ich hier eine funktionsfähige Version Windows 95 für dich, die du nicht zu installieren brauchst.
Dank HTML5-Canvas und der dazugehörigen Möglichkeiten rund um die JavaScript-Methode „getContext(„2d“)“ kannst du nahezu uneingeschränkt im Browser zeichnen. Methoden wie „lineTo()“ und „arc()“ sind nur zwei einfache Beispiele, wie du Zeichnungen per JavaScript anlegst. Mit DrawerJs bringst du gleich ein ganzes Zeichenprogramm, das mit HTML5-Canvas realisiert wurde, in deinen Browser.
Zeichnen fast wie in Photoshop
DrawerJs ist eine JavaScript-Bibliothek, die ein umfangreiches Zeichenprogramm direkt in deinem Browser startet. Ähnlich wie in einer klassischen Anwendung, werden dir eine Zeichenfläche sowie verschiedene Werkzeugleisten dargestellt.
So wählst du aus den Zeichenwerkzeugen zum Beispiel das Freihandwerkzeug aus, mit dem du ganz individuell zeichnen kannst. Die Linien- und Pfeilwerkzeuge erlauben es dir, gerade Linien und Pfeile auf die Zeichenfläche zu bringen. Kreise und Rechtecke sind ebenso möglich, wie Polygone mit beliebig vielen Seiten.
Es gibt eine Optionenleiste, die zu jedem Werkzeug kontextbezogene Funktionen anzeigt. So kannst du zum Beispiel die Linienfarbe und -stärke einstellen, sowie die Füllfarbe und die Opazität.
Skalieren, drehen, verschieben und wegradieren
Alle auf der Zeichenfläche platzierten Formen können skaliert, gedreht und verschoben werden. Dazu wählst du die entsprechende Form aus und nutzt die verschiedenen Anfasser, um die Form anzupassen. Über das Kontextmenü verschiebst du Formen in den Vorder- oder Hintergrund.
Wie es sich für ein Zeichenprogramm gehört, darf ein Radiergummi nicht fehlen. Dieses radiert alles weg, was ihm in den Weg kommt. Anders als beispielsweise in Photoshop, kennt DrawerJs keine Ebenen, wenngleich die einzelnen Formen selbst einzeln bearbeitet werden können. Beim Radieren werden jedoch alle Formen berücksichtigt, über die du mit dem Radiergummi kommst.
Bilder einfügen
Du kannst nicht nur zeichnen, sondern auch Bilder einfügen. Dazu wählst du aus deinen lokalen Dateien eine Bilddatei aus, die anschließend in die Zeichenfläche im Browser eingefügt wird. Du kannst die Bilder skalieren, drehen und auf der Zeichenfläche verschieben.
Selbst das Beschneiden von eingefügten Bildern ist möglich. Außerdem lässt sich ein Bild als Hintergrund verwenden. Dieses wird dann entweder auf die gesamte Zeichenfläche skaliert oder so verkleinert, dass es in die Zeichenfläche passt. Dabei wird der Hintergrund entweder zentriert oder in einer Ecke platziert. Der Hintergrund bleibt im Übrigen vom Radiergummi verschont.
Text einfügen und bearbeiten
Auch an ein Textwerkzeug haben die Macher von DrawerJs gedacht. Damit platzierst du ein Textfeld an beliebiger Stelle auf der Leinwand. Anschließend gibst du den gewünschten Text ein und passt ihn über die Optionenleiste an.
So wählst du unter anderem die Schriftgröße und -farbe aus. Auch Formatierungen, wie fett und kursiv, sind möglich. In den Voreinstellungen gibt es eine kleine Auswahl an Schriften. Diese lässt sich aber nach Belieben anpassen und erweitern.
Das betrifft übrigens ebenso die Farbpalette. Die dort voreingestellten Farben veränderst und erweiterst du ganz nach Belieben. Optional nutzt du eine HTML5-Farbpalette.
Natürlich kannst du Texte beliebig auf der Zeichenfläche drehen, skalieren und verschieben.
Zeichnung im Bitmap-Format
Bei den HTML5-Canvas-Zeichnungen handelt es sich um reine Bitmaps. Sobald du mit der Maus die Zeichenfläche verlässt und woanders hinklickst, wird die Zeichnung ins PNG-Format konvertiert und als Data-URI im Browser dargestellt. Per Rechtsklick auf die Zeichnung kannst du diese zum Beispiel herunterladen.
Sobald du wieder in die Zeichenfläche klickst, kommst du wieder in den Bearbeitungsmodus und kannst weiter zeichnen.
DrawerJs in eigene Website einbauen
Die DrawerJs-Bibliothek lässt sich sehr individuell anpassen und in deine eigene Website einfügen. Dank der API hast du zahlreiche Möglichkeiten, wie die Zeichenfläche und die verschiedenen Werkzeugleisten dargestellt werden sollen.
Zunächst müssen verschiedene JavaScript- und CSS-Dateien eingebunden werden. Anschließend lädst du per JavaScript die Bibliothek und übergibst die verschiedenen Parameter, mit denen du die Bibliothek anpasst. Außerdem sind jQuery und Font Awesome notwendig, um DrawerJs zum Laufen zu bekommen.
Im Beispiel wird eine neue Instanz von DrawerJs dem Element mit der ID „canvas-editor“ zugewiesen. Über die Variable „customLocalization“ übergibst du ein JSON-Literal mit den einzelnen Bezeichnungen unter anderem für die Werkzeuge. Du hast also die Möglichkeit, diese ins Deutsche zu übersetzen.
Über „drawerPlugins“ definierst du, welche Werkzeuge deine Zeichenanwendung haben soll. So legst du individuell fest, ob du zum Beispiel das Einfügen von Bildern oder das Ausführen im Vollbildmodus gestatten möchtest.
Im Vollbildmodus erinnert DrawerJs fast an ein gängiges Zeichenprogramm. Dir steht da der gesamte Bildschirm zur Verfügung und die verschiedenen Werkzeugleisten werden am Bildschirmrand dargestellt.
Werkzeugleiste und Zeichenfläche anpassen
Um deine Version von DrawerJs ganz individuell deinen Anforderungen anpassen zu können, erlaubt dir die API sogar, die Zeichen-Werkzeugleiste separat von der Zeichenfläche zu platzieren. Dazu übergibst du einfach die ID eines HTML-Elementes, in welchem die Werkzeugleiste dargestellt werden soll. Dabei entscheidest du, ob eine Werkzeugleiste immer an derselben Stelle stehen oder mitscrollen soll. Die Optionenleiste kann auch als Popup erscheinen, was gerade bei Mobilgeräten von Vorteil ist. Bei Bedarf schaltest du die kompletten Werkzeugleisten aus und steuerst die Werkzeuge direkt über die eigene API von DrawerJs.
Die hier gezeigte Konfiguration fügst du zu den anderen Konfigurationen im JSON-Literal des DrawerJs-Aufrufs ein.
Auch bezüglich der Zeichenfläche gibt es einige Konfigurationsmöglichkeiten. So definierst du zum Beispiel den Rahmen der Zeichenfläche und ob diese transparent sein soll.
Optional fügst du eine „Minimalisieren“-Schaltfläche hinzu, welche die gesamte Anwendung innerhalb deines Browsers auf eine kleine Werkzeugleiste minimiert. Darüber kannst du die Anwendung wieder maximieren oder schließen.
Außerdem kannst du die gesamte Anwendung bei Bedarf innerhalb ihres Elternelementes verschiebbar machen. Über ein entsprechendes Werkzeug ziehst du die Zeichenfläche samt Werkzeugleisten an eine beliebige Position.
Zusammen mit dem ebenfalls optionalen transparenten Hintergrund erreichst du einen schönen Effekt, weil deine Zeichenfläche den jeweiligen Hintergrund deiner Website durchscheinen lässt. Der jeweilige Ausschnitt deiner Website dienst dann quasi als Zeichenfläche.
Zeichnungen individuell verwenden und bearbeiten
Je nach Anwendungsfall möchtest du die Zeichnungen, die Besucher deiner Website anlegen, weiter verwenden. Hier stellt dir die API von DrawerJs die Möglichkeit zur Verfügung, das JSON-Literal mit der Zeichnung an eine beliebige Funktion zu übergeben.
Über diese Funktion kannst du die Zeichendaten beispielsweise per Ajax versenden und in einer Datenbank speichern oder per E-Mail verschicken. Hierdurch bekommt das Tool einen echten Mehrwert.
Über die API entwickelst du zusätzlich eigene Funktionen, mit denen du zur Zeit Text mit ihrer Gestaltung in die Zeichenfläche einfügen kannst. Formen lassen sich per API derzeit noch nicht erstellen, was sich zukünftig aber ändern soll.
Kosten und Fazit
Pro Website kostet DrawerJs 199 Euro. Darin enthalten sind alle zukünftigen Updates – und zwar ohne zeitliche Einschränkung. Außerdem gibt es einen technischen E-Mail-Support und eine 30-tägige Geld-zurück-Garantie. Im September-Update wird es zudem eine Screenshot-Funktion geben, bei der du einen Screenshot deines Browsers oder Destops als Bild oder Hintergrund einfügen kannst.
Für 699 gibt es die Developer-Edition mit dem gesamten Quelltext. Diese Edition erlaubt es dir zudem, DrawerJs auf beliebig vielen Websites zu verwenden.
Außerdem kannst du DrawerJs ausgiebig auf der Website des Anbieters testen. Dort findest du einige Beispiel-Implementierungen. Derzeit werden auch Plug-ins für verschiedene gängige WYSIWYG-Editoren hergestellt. Den Anfang macht dabei „Imperavi Redactor V3“.
Noch vor einigen Jahren war JavaScript mehr als umstritten. Nervige Werbe-Pop-ups führten dazu, dass die Programmiersprache oft ganz grundsätzlich blockiert wurde. Mittlerweile ist JavaScript aus dem modernen Webdesign nicht mehr wegzudenken. Vor allem im mobilen Internet spielt JavaScript eine wichtige Rolle – unter anderem zur Medienwiedergabe, aber auch für Geolocation und moderne Navigationen. Doch wie gut verträgt sich JavaScript mit Suchmaschinen? Was musst du beachten?
Suchmaschinen haben dazugelernt
Zunächst einmal sei gesagt, dass die Zeiten vorbei sind, in denen Suchmaschinen mit JavaScript gar nichts anfangen konnten. Waren per JavaScript geladene Inhalte früher unsichtbar für Suchmaschinen, haben die Suchmaschinen mittlerweile dazugelernt. Und wenn ich von Suchmaschinen spreche, ist natürlich vor allem Google gemeint. Denn der Suchriese ist nach wie vor das Maß aller Dinge.
So ist JavaScript keine grundsätzliche Hürde mehr für Google. Allerdings bedeutet dies nicht, dass du JavaScript völlig bedenkenlos einsetzen kannst. Da Google immer ein großes Geheimnis daraus macht, wie sein Suchalgorithmus funktioniert, sind folgende Tipps immer mit etwas Vorsicht zu genießen.
Inhalte per Load- statt User-Events laden
Oftmals werden Events eingesetzt, um per JavaScript Inhalte einer Website zu ändern. Hier gilt, dass Suchmaschinen in der Regel nur solche Inhalte berücksichtigen, die über Load-Events geladen werden.
Diese Ereignisse werden vom Browser gefeuert, sobald der DOM-Baum einer Seite geladen ist. Suchmaschinen wie Google lassen Load-Events beim Crawlen zu, sodass in der Regel der Seiteninhalt erst nach Ausführen der Load-Events indiziert wird.
User-Events werden jedoch nicht geladen. Das heißt, alle Veränderungen, die zum Beispiel über Click- oder Touch-Events ausgelöst werden, bleiben beim Indizieren unberücksichtigt.
Push-States und URLs
Damit Google eine Seite indizieren kann, muss diese immer zwingend über eine URL erreichbar sein. Daher können Click-Events auch nicht berücksichtigt werden, da diese immer einen vom Benutzer individuell herbeigeführten Inhalt darstellen.
Dank der Push-State-API von JavaScript ist es mittlerweile ja möglich, die URL einer Seite zu beeinflussen. So kannst du die komplette Navigation einer Seite per JavaScript realisieren, indem du per „pushState()“ die im Browser dargestellte URL änderst und gleichzeitig per JavaScript Inhalte lädst und ersetzt.
Da Google URLs, die ausschließlich per Push-State-API realisiert werden, nicht indizieren kann, muss jede per „pushState()“ erstellte URL immer auch eine „real existierende“ URL besitzen.
Dies ist übrigens nicht nur für Suchmaschinen interessant, sondern auch für soziale Netzwerke. Denn du kannst nur solche Seiten dort teilen, die über eine „echte“ URL verfügen. Denn auch Facebook und Twitter müssen Inhalte aus einer Seite extrahieren, was nur funktioniert, wenn die URL vorhanden ist.
Wichtig ist, dass du per „pushState()“ immer korrekte URLs erzeugt, die immer auch per JavaScript den richtigen Inhalt besitzen. Eine falsche Push-State-URL, die keine neuen Inhalte lädt, führt möglicherweise dazu, dass es du doppeltem Content kommt. Und das wiederum mögen Suchmaschinen ja auch nicht.
JavaScript nicht ausschließen
Es ist zwar selbstverständlich, sei aber dennoch erwähnt. Du musst natürlich dafür sorgen, dass JavaScript-Dateien für Suchmaschinen nicht ausgeschlossen sind. Werden über die „robots.txt“ JavaScript-Dateien grundsätzlich verboten, haben Suchmaschinen keine Möglichkeit, auf diese zuzugreifen.
Da JavaScript selbst ja keinerlei indizierbare Inhalte besitzt, wird es für Suchmaschinen gerne mal versteckt.
Progressive Enhancement
Trotz aller Möglichkeiten, die Google und andere Suchmaschinen dir geben, um per JavaScript erstellte Inhalte zu crawlen, ist die sicherste Methode immer noch das sogenannte „Progressive Enhancement“.
Dieses Prinzip verfolgt den Ansatz, dass Inhalte so aufzubereiten sind, dass sie immer unabhängig von Browser beziehungsweise Crawler verfügbar sind.
Konkret bedeutet dies, dass Texte, Bilder und andere Inhalte, die von einer Suchmaschine gefunden und durchsucht werden sollen, nach Möglichkeit ohne JavaScript auskommen sollen.
Dies bedeutet allerdings für den Webentwickler immer ein oft erheblichen Mehraufwand. Denn jede Seite muss im Grunde auch ohne JavaScript alle Inhalte bereitstellen. Je nach Art und Aufbereitung der Inhalte kommen möglicherweise auch Kompromisse in Frage, bei denen nur wichtige Inhalte auch ohne JavaScript bereitgestellt werden.
Hier musst du abwägen, welcher Aufwand für dein Projekt vertretbar ist.
Korrekte Semantik
Ob mit oder ohne JavaScript: In jedem Fall ist es wichtig, dass deine Inhalte semantisch korrekt ausgezeichnet sind. Auch Überschriften, die per JavaScript geladen werden, müssen mit den entsprechenden HTML-Elementen ausgezeichnet werden.
Denn hier gelten dieselben Regeln wie für normale Inhalte. Letztendlich ist für Google entscheidend, wie der HTML-Quelltext nach dem Ausführen von JavaScript aussieht. Da ist die Wahl der richtigen Elemente entscheidend.
Crawler-Ansicht testen
Entscheidest du dich dazu, Inhalte ausschließlich per JavaScript zu laden (also nicht nach dem „Progressive Enhancement“-Prinzip), solltest du testen, ob Suchmaschinen deine Inhalte tatsächlich korrekt und vollständig sehen und crawlen können.
So hilft dir zum Beispiel die „Search Console“ von Google. Unter „Crawling“ findest du die Funktion „Abruf wie durch Google“. Hier kannst du dir deine Website für Desktop- oder Mobilgeräte so darstellen lassen, wie Google sie tatsächlich crawlt.
Es gibt aber auch andere, meist kostenpflichtige Tools wie SEO.JS und prerender.io, die sich darauf spezialisiert haben, Websites dahingegend zu prüfen, ob JavaScript-Inhalt beim Crawlen korrekt und vollständig dargestellt werden. Bei komplexen Projekten mag das eine sinnvolle Ergänzung sein.
Frameworks wie jQuery gehören zu den bekanntesten und weit verbreitetsten Helfer, die auf Websites eingesetzt werden. Das Framework ermöglicht es, schnell und unkompliziert auf HTML-Elemente zuzugreifen und diese zu manipulieren oder per CSS zu gestalten. Ich selbst bin kein großer Freund von solchen Frameworks und versuche, sie – wo immer es geht – zu vermeiden. Das funktioniert nicht immer, ist aber häufig problemlos machbar.
jQuery und Co. und der große Ballast
Gerade jQuery hat sich in den letzten Jahren zu einer Art Schweizer Taschenmesser für JavaScript entwickelt. Das Frameworks bietet unzählige Methoden, Eigenschaften und Ereignisse, von denen die Meisten wohl nur ein Bruchteil benötigen.
Auch wenn jQuery in der aktuellen komprimierten Fassung auf gerade einmal 85 Kilobyte kommt, bliebe ein Großteil des Frameworks in meinen Projekten ungenutzt. Man kann es kleinlich nennen, dass mir 85 Kilobyte solch Kopfzerbrechen bereiten. Aber als Webentwickler ist mir ein schlanker Code, der nur das beinhaltet, was auch tatsächlich gebraucht wird, wichtig.
Jetzt ist jQuery mittlerweile zu einer Art Standard in der Webentwicklung geworden. Daher sind viele andere Frameworks mittlerweile als Plugins für jQuery entwickelt. Will ich diese nutzen, muss ich auch jQuery nutzen. Hier zeigt sich im besonderen Maße, was solche Frameworks für Nachteile mit sich bringen.
Denn letztlich benötige ich jQuery dann nur, um das Plugin nutzen zu können. Da sind mir 85 Kilobyte dann in der Tat zu viel.
Doppelt gemoppelt: Was jQuery kann, kann JavaScript oft auch
Mit der Einführung von HTML5 hat auch JavaScript einen großen Sprung gemacht. Viele Funktionen, die bislang nur per jQuery möglich waren, sind nun auch ebenso einfach als native JavaScript-Methoden vorhanden.
Das gilt zum Beispiel für das Hinzufügen und Entfernen von JavaScript-Klassen. Mit der „classList“-API kannst du dies ähnlich wie in jQuery realisieren.
Eine der wichtigsten Funktionen in jQuery ist die Möglichkeit, per „$()“ auf beliebige Elemente zuzugreifen – und zwar in Anlehnung an CSS-Selektoren. Selbst dieses Alleinstellungsmerkmal von jQuery ist mittlerweile mit der Methode „querySelector()“ in JavaScript aufgegriffen worden.
Im Beispiel wird allen „<li>“-Elementen, die Kinder eines „<ol>“-Elementes sind, die Klasse „new“ zugewiesen. In jQuery ist ein entsprechender Aufruf kaum kürzer – vor allem aber nicht weniger kompliziert.
$("ol li").addClass("new");
In vielen Fällen benötige ich jQuery also gar nicht, sondern kann mit JavaScript auf ähnlich einfachem Wege arbeiten.
Performance vs. Einfachheit
jQuery und seine weniger bekannten Freunde machen es einem in vielen Fällen sehr viel einfacher, mit JavaScript zu arbeiten. Aber nicht immer ist der einfach Weg auch der Beste – gerade wenn es um die Performance geht.
Denn sowohl die jQuery-Methode „$()“ als auch die JavaScript-Methode „querySelector()“ schneiden in Sachen Performance schlechter ab als die Methoden „getElementsByTagName()“ oder „getElementsByID()“. Denn bei „$()“ und „querySelector()“ wird zunächst der komplette DOM-Baum eines Dokumentes nach entsprechenden zutreffenden Elementen durchsucht.
Die beiden Methoden „getElementsByTagName()“ oder „getElementsByID()“ kommen deutlich schneller ans Ziel. Natürlich sind die letztgenannten Methoden für Entwickler zuweilen mit mehr Aufwand verbunden. Auch hier mag der geringe Unterschied bei der Performance vernachlässigbar sein. Man sollte sich dessen jedoch bewusst sein.
Vorteil: einheitliche Browser-Kompatibilität
Jetzt will ich natürlich auch nicht so tun, als sei jQuery durch und durch überflüssig. Denn es hat ja seinen Grund, warum es immer noch sehr erfolgreich und beliebt ist. Ein Vorteil ist natürlich die einfache Anwendung.
Darüber hinaus haben solche Frameworks natürlich den Vorteil, dass sie eine breite Browser-Kompatibilität mit sich bringen. Während ich bei nativen Methoden immer schauen muss, welcher Browser ab welcher Version sie unterstützt, macht jQuery mir das einfacher.
Denn für jede jQuery-Version weiß ich, welche Browser und Versionen unterstützt werden. Gerade wer für ältere Versionen des Internet Explorers entwickelt, hat mit jQuery in der aktuellen Version die Sicherheit, dass dieser ab Version 9 unterstützt wird.
Und wer ältere Browser noch unterstützen möchte, kann auf ältere Versionen von jQuery zurückgreifen. Das erleichtert die Entwicklung von Websites, da man schon im Vorfeld weiß, welche Browser denn mit an Bord sind.
Frameworks fürs Spezielle
Jetzt bin ich also jemand, der – wenn immer es möglich und sinnvoll ist – auf Frameworks verzichtet. Möglich ist es eigentlich immer. Denn grundsätzlich kann man ja alles selbst in JavaScript programmieren. Nur sinnvoll ist es natürlich nicht immer.
Es gibt natürlich Situationen, in denen der Aufwand, eine komplexe JavaScript-Programmierung selbst zu entwickeln, in keiner Relation zum Ergebnis steht. Wer mit JavaScript zum Beispiel 3D-Animationen erstellen möchte, kann sich natürlich selbst sein eigenes 3D-Framework bauen.
Hier ist es hingegen mehr als sinnvoll, auf ein stabiles und möglichst leichtes Framework zurückzugreifen. In solchen Fällen ist es mir aber immer wichtig, dass dieses Framework nicht auf andere Frameworks wie jQuery aufbaut, sondern unabhängig verwendet werden kann.
Fazit
Natürlich ist die Frage, ob man auf Frameworks setzt oder nicht, durchaus eine ideologische. Denn der Gewinn an Schnelligkeit ist in vielen Fällen marginal. Aber man sollte als Entwickler nicht aus bloßer Bequemlichkeit auf jQuery und Co. zurückgreifen.
Denn natives JavaScript kann häufig all das, was jQuery kann, selbst auch abdecken. Gerade wer für zeitgemäße Browser entwickelt und die Abwärtskompatibilität eh in Grenzen hält, kommt gut ohne dieses Framework aus.
Responsive Webdesign hat sich zum Standard entwickelt. Von modernen Apps und Websites erwartet man heutzutage geradezu, dass sie sich an verschiedesten Auflösungen in möglichst idealer Weise anpassen. So ergibt sich ein optimales Benutzererlebnis, ganz egal, welches Gerät oder welche Auflösung genutzt wird. Inhalte, Bilder und Videos sollten sich in gleicher Weise fließend verhalten, um unterschiedliche Viewports bestmöglich zu bedienen.
Das Problem ist nicht mehr ganz so akut wie noch vor einigen Jahren. Dennoch surfen auch heutzutage noch zu viele Menschen mit einem veralteten Browser. Wenn deine Website sehr modern ausgestattet ist, werden diese Menschen keinen Spaß daran haben. Bevor sie deshalb sauer auf dich werden, weise sie doch einfach freundlich darauf hin, dass sie mit einem antiquarischen Seitenbetrachter unterwegs sind.
Entschuldige, aber dein Browser ist uralt.
Hinweisgeber wie „Outdated Browser” gab es vor einigen Jahren noch wie Sand am Meer. Aber keiner sah so gut aus, wie der, den ich dir heute vorstelle. „Outdated Browser” kommt in vielen verschiedenen Sprachen, darunter Deutsch, als Kombination aus JavaScript und CSS daher. Das Tool steht unter der MIT-Lizenz auf Github zur kostenfreien Verwendung bereit und unterliegt keinerlei Abhängigkeiten. Du kannst es also als unabhängige Lösung verwenden.
Die komprimierte Version des JavaScript wiegt gerade einmal rund 3kb. Die ebensolche Version des CSS bringt es auf 1kb. Verschiedene Sprachen werden als HTML-Dateien mitgeliefert. Diese wiegen jeweils um die 0,3kb.
Die Verwendung ist einfach. Du benötigst die minifizierte JS, sowie selbige CSS und den Ordner lang. Alle benötigten Dateien sind im Downloadarchiv enthalten. Stelle das Paket in deinem Webspace bereit und binde die Dateien entsprechend im Head (CSS) und im Body (JS) deiner Website ein. Direkt nach dem öffnenden Body setzt du dann ein Div mit der ID outdated. Hierdurch wird das JavaScript getriggert.
Das Einbinden und Aktivieren der Lösung dauert nur wenige Minuten. Die Optik könntest du anpassen, sie ist allerdings im modernen Flat Design gehalten und von daher out-of-the-box sicherlich für die meisten Fälle bereits hübsch genug.
Wird die Seite nun mit einem modernen Browser besucht, passiert nichts. Kommt ein Besucher mit einem nicht aktuellen Browser, wird er mittels eines Headers sanft darauf hingewiesen, dass es für seinen Browser eine aktuellere Version gibt. Klickt er auf diesen Hinweis, wird die folgende politisch korrekte Übersicht eingeblendet.
Wichtig zu wissen ist, dass die Lösung gezielt auf Desktop-Browser abzielt und nur dafür eingesetzt werden kann. Bevor du das kritisierst, soltest du nochmal kurz nachdenken, ob es auf mobilen Geräten überhaupt veraltete Browser gibt. Eher nicht, oder? Gut, wenn du noch mit Android 2.01 unterwegs bist vielleicht, aber dann ist das nicht eh dein vordringlichstes Problem.
Outdated auf allen Ebenen
Wer sich das JavaScript und das CSS näher ansieht, wird vermutlich die Hände über dem Kopf zusammen schlagen. Der Code macht nämlich der Bezeichnung Outdated alle Ehre. Die Erklärung ist indes einfach und nachvollziehbar. Damit „Outdated Browser” in alten Browsern funktioniert, muss es natürlich eben für diese alten Gesellen geschrieben sein. Da ist kein Platz für moderne Ansätze.
„Outdated Browser” ist eine Lösung der portugiesischen Design-Agentur Büro und steht auf Github zum Download und zur Mitwirkung zur Verfügung. Nutzer selbstgehosteter WordPress-Installationen können das Tool direkt als Plugin verwenden und sich so den Einbau erleichtern. Der Vollständigkeit halber sei erwähnt, dass es weitere vorgefertigte Module gibt, und zwar für Ruby, Drupal, Magento, Contao und Yii2.
Der Alltag hat dich fest im Griff? Routine ist natürlich nicht immer schlecht. Sie lässt sich sogar stetig optimieren. Die zehn Tools, die wir dir heute vorstellen, helfen dabei.
Mit dem richtigen Werkzeug macht sogar Spaß, was du als letztes damit assoziiert hättest, etwa das Aufbauen von Tabellen. Glaubst du nicht? Schau dir unsere zehn Entwickler-Tools an und entscheide danach selbst.
Der HTML Table Generator baut für dich Standard-Tabellen mit div oder table Tags. Eine interaktive Preview zeigt dir, ob du auf dem richtigen Weg bist.
Erstellt von: divtable Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.
Wenn dein Stylesheet so klein wie möglich sein soll, dann ist CSSNano für dich das richtige. Es komprimiert nicht nur, sondern entfernt auch alte Vendorprefixe und mehr.
Erstellt von: ben-eb Lizenz: kostenlos verwendbar unter MIT-Lizenz
Wenn du etwas Leben in die Bude bringen willst, dann ist dieser Service was für dich. Wirf ihm eine Handvoll Sprites zu und es baut eine komplette Animation für dich.
Erstellt von: Elior Shalev Tabeka Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.
