User Experience: Barrierefreie SVGs

Scalable Vector Graphics (SVG) haben sich im Web zum bevorzugten Grafikformat entwickelt. Viele Entwickler und Designer sind bereits dazu übergegangen, Icon-Fonts und alte Grafiken im .pg, .gif- oder .png-Format durch SVGs zu ersetzen. Die Umstellung wirkt sich ebenfalls auf die User Experience von Nutzern aus, die auf adaptive Technologien wie beispielsweise Screen-Reader angewiesen sind. Was bei der Implementierung von SVGs zu beachten ist, damit sie barrierefrei ausgegeben werden, erklärt Heather Migliorisi in ihrem Artikel.

D3.js: Bunte, bewegte Bilder aus Daten erzeugen

D3 ist eine JavaScript-Library für die Visualisierung von Daten. Die Entwickler des Projekts beschreiben es so: „ D3 helps you bring data to life“ – und zwar unter Verwendung von HTML, SVG und CSS. Wie das dann aussehen kann, zeigt die D3.js-Website anhand zahlreicher cooler Beispiele. Manche davon sind sogar interaktiv! Allerdings hat ja jeder mal klein angefangen. Darum lohnt sich ein Blick in das Tutorial von Mark Brown, das die Basics der Library von der einfachen Form bis zur animierten Visualisierung ausführlich erklärt.

Die besten CSS Tools

CSS Tools gibt es wie Sand am Meer – na gut, nicht ganz. Zahlreich sind die Optionen aber schon, die Entwicklern zur Verfügung stehen, um ihren CSS-Code zu erstellen und zu bearbeiten. Oly Su stellt darum einige Favoriten vor: Atomic, ITCSS und BEM. Atomic Design ist auf das responsive Webdesign ausgerichtet und hilft dabei, die einzelnen Elemente eines CSS-Styles zu entwerfen; ITCSS strukturiert und gruppiert die einzelnen Styles; BEM ist eine Methodologie, die bei der Erstellung modularer CSS-Styles hilft. Wie das CSS-Design dann mit allen drei Tools zusammen funktioniert, verrät Oly Su im zugehörigen Artikel.

Android-Firmware verstehen

Mit Android ist das ja so eine Sache … selbst, wenn es mal nichts über neue Sicherheitslücken im OS selbst zu berichten gibt, kann man beinahe schon zuverlässig darauf tippen, dass es irgendwo anders eine zu finden gibt. Viele Nutzer vertrauen daher auf sich selbst und nutzen daher Custom ROMs. Schließlich gilt: Jeder weiß, dass man Android-Betriebssysteme einfach vom Device schmeißen und durch Custom ROMs ersetzen kann. Aber jetzt kommt die Bonusfrage: Wofür steht ROM eigentlich? Und warum kann man damit das ganze Gerät kaputt machen, wenn man sich blöd anstellt? Wer genauer wissen möchte, was es mit Android Firmware, dem Bootloader und dem OEM-Key des mobilen Betriebssystems auf sich hat, sollte einen Blick auf den Artikel von Ashraff Hathibelagal werfen.

Composer Package Types – die Diskussion

Just gestern ist eine überaus interessante Diskussion auf GitHub gestartet worden – es geht dabei um die Frage, welche Composer Package Types auf Packagist gehostet werden sollen und welche nicht. Initiiert wurde sie durch Helmut Hummel, der auf einen Absatz in der Composer-Dokumentation verweist, in der geschrieben steht, dass Projekte, die ein eigenes Ökosystem besitzen und deren Packages so spezifisch sind, dass sie nicht für eine breitere Masse der Community nützlich sind, von Packagist getrennt angeboten werden sollten. Als Beispiel werden in der Dokumentation WordPress-Plugins genannt.

Nicht ganz zu unrecht verweist Hummel auf Symfony-Bundles, die ebenfalls sehr Projekt-spezifisch seien und dennoch auf packagist.org zu finden sind – wie steht es dann also um Packages von TYPO3, Drupal und Co?

Die Diskussion ist noch relativ frisch, aber durchaus interessant. Wir folgen also Hummels Aufruf und fragen:

Dear #PHP community. I would be interested in your opinion https://t.co/wbKmvGeBM6 //cc @lsmith @webmozart #composerphp

— Helmut Hummel (@helhum) 14. August 2016

ES6 Template Literals benutzen

Schon von Template Literals gehört? Die sind neu in ES6 und können ganz schön viel. Unter anderem betreffen die damit einhergehenden Neuerungen an JavaScript die Template Functions und Expressions in Templates. Außerdem können sie auch dazu genutzt werden, richtig gute HTML & XML Templates zu erstellen. Das alles erläutert Kurt Cagle in seinem ES6 Template Literals Tutorial.