Außerdem: Smooth Scrolling in JavaScript

Fast Forward: Drupal 8.2.3 und 7.52 sind erschienen & Accessibility für Web-Komponenten
Keine Kommentare

Heute im Fast Forward: Drupal 8.2.3 und 7.52 sind erschienen und bringen wichtige Security-Fixes mit. Außerdem zeigt ein Tutorial, wie sich eine bessere Accessibility für Web-Komponenten erreichen lässt und wie es mit dem Smooth Scrolling in JavaScript klappt. Des Weiteren haben wir Tipps für den Umgang mit Ramda.js und für die Generierung von dynamischem Inline-CSS mit serverseitigem JavaScript für euch.

Mit Ramda.js für mehr Funktionalität durchstarten

Funktionalität und Praktikabilität sind Kennzeichen effektiven JavaScript-Programmierens. Ramda.js ist eine moderne JavaScript-Bibliothek, mit der sich viele Vorteile funktionalen Programmierens umsetzen lassen: Erhöhte Composability und Flexibilität sowie robusterer Code mit größerer Fehlertoleranz. Der IT-Consultant Florian Rappl erläutert in seinem Tutorial den Einstieg in das Functional-Programming mit Ramda.js. Neben der Struktur und Konzeption von Ramda.js zeigt er, wie man mit der Installation eines Node.js-Projekts einsteigt, wie die Utility-Methoden funktionieren und die Lens-Funktionen arbeiten. Detailliertere Informationen gibt es im Tutorial oder in der Ramda-Dokumentation.

Dynamisches Inline-CSS mit serverseitigem JavaScript

Die Ausstiegsraten einer Website werden maßgeblich von deren Ladedauer beeinflusst. Wer diese optimieren will, muss verstehen, wie der Browser Ressourcen wie CSS- oder JavaScript-Dateien herunterlädt, interpretiert und schließlich rendert. Um sich schlau zu machen, kann man auf Tools wie die Chrome Developer Tools Timeline oder Googles PageSpeed Insights zurückgreifen. Sally Young empfiehlt in ihrem Artikel, das Tool Critical zu verwenden – insbesondere, wenn man nur das kritische CSS in sein HTML-Dokument integrieren will. Wer Critical nutzen möchte, muss PhantomJS verwenden. Mit einer serverseitigen Auszeichnung lassen sich weiterhin einige Performance-Optimierungen erreichen und man muss nicht für jede Seite und Navigation einzeln kritisches CSS generieren.

Smooth Scrolling in JavaScript

Smooth Scrolling ist nichts Neues mehr, wohl jeder Entwickler kennt den „weichen“ Scrollvorgang zum Ziel eines seiteninternen Links bereits. Mit Jump.js steht dafür eine Option zur Verfügung, die ausschließlich auf pures JavaScript setzt. Die Anpassung der Links muss dabei jedoch von Hand erfolgen. Wie Giulio Mainardi erklärt, kümmert sich die Library tatsächlich nur um den Scrollvorgang. Auch ist die Funktion auf einen vertikalen Scrollvorgang des Viewports beschränkt. Dennoch lohnt sich ein Blick auf Jump.js, da die Library durch ihre Einfachheit besticht: 42 Zeilen Sourcecode, geschrieben in ECMAScript 2015 JavaScript und ohne externe Dependencies sind alles, was das Tool zum weichen Scrollen braucht. Mainardis Einführung in die Arbeit  mit Jump.js ist somit länger als der Sourcecode von Jump.js – bietet dafür aber einen umfassenden Einblick in die Arbeit mit der Library.

Drupal 8.2.3 und 7.52 erschienen

Mit Drupal 8.2.3 und 7.52 sind zwei neue Drupal-Version erschienen. Im Vordergrund der Updates stehen wichtige Security-Fixes; behoben werden insbesondere im Drupal-Core gefundene Schwachstellen, die als „moderately criticial“ eingestuft wurden. Mehr Informationen zu den Sicherheitslücken bietet das zugehörige Security Advisory (SA-CORE-2016-005). Weitere Fixes bieten die neuen Drupal-Versionen nicht, sie stehen auf der Projektwebsite zum Download zur Verfügung:

Das Update auf eine der neuen Version wird allen Usern empfohlen.

Accessibility für seine Web-Komponenten erreichen

Accessibility ist moderner Web-Standard. Wer seine Web-Komponenten accessible machen will, sollte auf mehrere Faktoren achten, etwa eine semantisch sinnvolle Auszeichnung, Tastatur-Unterstützung und visuelle Accessibility. Artem Tabalin hat einen Guide zusammengestellt, in dem er diese drei Faktoren eingehend bespricht. Er führt vor, wie eine sinnvolle Semantik in HTML auszusehen hat, damit Screen-Reader und User-freundliche Komponenten einwandfrei funktionieren. Hierfür und für das Keyboard-only-Element arbeitet er unter anderem mit ARIA-Attributen. Außerdem veranschaulicht er, wie die visuellen Komponenten so konfiguriert werden, dass sie einerseits im High-Contrast-Mode aber auch andererseits ohne Farben angezeigt werden können.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -