Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung Webdesign

HTML5-APIs im Einsatz: So misst du Geschwindigkeiten mit User Timing und Navigation Timing

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.

Kategorien
Design JavaScript & jQuery Programmierung UI/UX

Wenn das Webdesign verschwindet: Headless Browser brauchen keine schöne Gestalt

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.

Kategorien
Design JavaScript & jQuery Programmierung Responsive Design UI/UX Webdesign

Was sind Progressive Web Apps und wieso sollte dich das interessieren?

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.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung UI/UX

Einfache Lösungen für dynamisches Webdesign mit HTML5-Data-Attributen

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.

Kategorien
Boilerplates & andere Tools Design HTML/CSS JavaScript & jQuery Programmierung UI/UX

Perfekt für Webentwickler: Die Front-End Checklist sorgt für Code-Qualität

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.

Kategorien
Apps HTML/CSS JavaScript & jQuery Responsive Design Webdesign

Progressive Web Apps: Mit HTML5 und JavaScript zur fast nativen App

Native Apps für Android- und iOS-Geräte haben in vielerlei Hinsicht große Vorteile gegenüber per HTML5 und JavaScript entwickelter Webanwendungen.

Kategorien
Design Editoren HTML/CSS JavaScript & jQuery Programmierung

Innovativ: Wix Code beschleunigt die Erstellung von Web-Applikationen massiv

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.

Kategorien
Design Essentials Freebies, Tools und Templates JavaScript & jQuery Programmierung UI/UX

Bubbly Backgrounds: Bewegte Hintergründe für deine Website

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.

Kategorien
Design Essentials Freebies, Tools und Templates HTML/CSS Icons & Fonts JavaScript & jQuery Programmierung

Tool-Tipp: Moving Letters mit Anime.js und CSS

Animierte Schriften sind ein Hingucker. Richtig eingesetzt, können sie ein Design aufwerten. Moving Letters stellt dir 16 fantastische Effekte bereit.

Kategorien
Design JavaScript & jQuery Programmierung

Nostalgiealarm: Windows 95 im Browser

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.

Kategorien
JavaScript & jQuery Programmierung

JavaScript: Mit DrawerJs einfach im Browser zeichnen

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.

$(document).ready(function () {
 	var drawer = new DrawerJs.Drawer(null, {
 	  texts: customLocalization,
 	  plugins: drawerPlugins,
 	  defaultImageUrl: '/images/drawer.jpg'
 	}, 600, 600);
 	$('#canvas-editor').append(drawer.getHtml());
 	drawer.onInsert();
});

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.

toolbars: {
 	drawingTools: {
     position: 'top', 
 	  positionType: 'outside',
 	  customAnchorSelector: '#custom-toolbar-here'
 	}
}

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.

drawer: {
 	borderCss: '1px dashed rgb(195, 194, 194)',
 	borderCssEditMode: '1px dashed rgb(195, 194, 194)',
 	backgroundCss: 'transparent'
 }

Anwendung minimalisieren und verschieben

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“.

Kategorien
JavaScript & jQuery SEO & Online-Marketing

JavaScript und Suchmaschinen: Das solltest du beachten

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.

Kategorien
JavaScript & jQuery Programmierung Webdesign

Framework jQuery: die Vorteile und Nachteile

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.

document.querySelector("ol li").classList.add("new");

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.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung Responsive Design

So integrierst du Videos responsiv in deine Website

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.

Kategorien
Design HTML/CSS JavaScript & jQuery Programmierung

Outdated Browser: Freies Projekt informiert deine Besucher über den Zustand ihres Browsers

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.

Kategorien
Boilerplates & andere Tools Design HTML/CSS JavaScript & jQuery Programmierung UI/UX

Januar 2017: 10 nützliche Tools für Webentwickler

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.

Titel: HTML Table Generator

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.

div-table
Erstellt von: divtable
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Hammer

Hammer bringt Gesten-Support und minimiert die Klickverzögerung.

hammer
Erstellt von: freie Kontributoren
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Kute.js

Diese Animations-Engine ist nicht nur zu schicken, sondern auch zu schnellen Resultaten zu gebrauchen. Fallbacks bringt sie überdies mit.

kute
Erstellt von: thednp
Lizenz: MIT-Lizenz, also kostenlos verwendbar.

Titel: Bless CSS

Bless CSS bringt Lösungen für den schlechtesten Browser der Welt. Du weißt schon, welchen ich meine.

bless
Erstellt von: Paul Young
Lizenz: mitgelieferte Lizenz beachten

Titel: Patterns Lib

Die Patterns Library liefert eine Sammlung fertiger Interaktions-Patterns, die du mittels CSS-Klassen und HTML-Attribute an den Start bringst.

patterns
Erstellt von: patternslib
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: CSSNano

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.

cssnano
Erstellt von: ben-eb
Lizenz: kostenlos verwendbar unter MIT-Lizenz

Titel: Egjs

Egjs bietet ein Bündel an interaktiven UI-Elementen mit schönen Effekten.

egjs
Erstellt von: Naver Corp
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Universal Collection of Transitions

Mit den GLSL-Transitions zauberst du fantastische Bildeffekte.

glsl
Erstellt von: Glslio
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Sprite Spirit

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.

sprite-spirit
Erstellt von: Elior Shalev Tabeka
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.

Titel: Bootstrap 4 Cheat Sheet

Bootstrap 4 ist kurz vor da. Dieses Cheat-Sheet hilft dir beim Einstieg.

bootstrap4-cheat-sheet
Erstellt von: Bootstrap Creative
Lizenz: Als „Free” bezeichnet, keine dezidierte Lizenz angegeben.