Außerdem: SVGs mit Media Queries responsiv machen

Fast Forward: Material Design in Drupal, Scopes in JavaScript & die Unterschiede zwischen Tests
1 Kommentar

In unserem heutigen Fast Forward geht es um die Integration von Material Design in Drupal, Scopes in JavaScript und die Unterschiede zwischen Unit-, Integration- und Functional Tests. Außerdem zeigen wir, wie man SVGs mit Media Queries responsiv macht und wie man den Status einer JavaScript-App mit MobX managt.

Material Design in Drupal integrieren

Material Design ist eine von Google entwickelte Designsprache, die mit dem Flat-Design arbeitet und früher nur bei Google Now, heute aber in vielen Apps und im Web ihren Einsatz findet. Material Design hat sich zum visuellen Aushängeschild der meisten Google-Apps entwickelt. Jorge Diaz führt in einem Tutorial vor, wie sich Material Design mit dem Bootstrap-Theme und dem Bootstrap-Skin Paper in Drupal integrieren lässt. Dafür muss nur das Bootstrap-Theme in Drupal installiert und Bootstrap-Paper-Skin eingestellt werden. Schon kann man mit der individuellen Anpassung der Seite beginnen. Zu den anpassbaren Elementen zählen Navbar und Dropdowns, Formulare und Input-Elemente, Typographie und Font-Hierarchie sowie Breadcrumbs, Pagers, Blocks und Container.

Scopes in JavaScript

Wer Scopes in JavaScript richtig einsetzt, kann sich vor den üblichen Bugs schützen, die beim Hoisting auftreten können und hat einen besseren Überblick über die Closures. Peleke Sengstacke erläutert in seinem Tutorial neben den Grundlagen von Scopes auch, wie der Interpreter seine Entscheidungen fällt und welche Variablen zu welchem Scope gehören. Während der Kompilation werden die Variablen von den zugehörigen Scopes registriert und während der Ausführung mit ihrem Auftragswert verbunden. Außerdem nimmt er das Hoisting genauer unter die Lupe und beschreibt, warum die ECMAScript-2015-Keywords let und const für die Deklaration der Variablen von entscheidender Bedeutung sind.

Unit, Integration und Functional Tests

Die drei Testarten sind sicher bekannt, aber im Anwendungsfall kann man schnell durcheinander kommen. Fest steht:

  • Unit Tests prüfen individuelle Komponenten und liefern während der Entwicklung schon früh das nötige Feedback.
  • Integration Tests prüfen das Zusammenspiel einzelner Komponenten und sind nützlich, sobald es die zu testenden Komponenten gibt.
  • Functional Tests prüfen die Funktionalität aus Sicht der User und betreffen damit hauptsächlich das Interface.

In seinem Artikel bespricht Eric Elliott sämtliche Tests im Detail.

SVGs mit Media Queries responsiv machen

Responsiveness ist moderner Web-Standard. Zu SVG-Content lässt sich aufgrund seines Grafik-rendernden XML-Tags ein style-Element hinzufügen. Über die üblichen CSS-Selektoren kann das SVG stilistisch weiter angepasst und mit Media Queries responsiv gemacht werden. Jake Archibald zeigt in seinem Artikel, wie die modernen Browser Chrome, Safari, Firefox und Edge mit den Attributen sowie den Daten- und Layout-Ausmaßen von svg, iframe, img, canvasdrawImage und viewBox umgehen. So lässt sich leicht herausfinden, welcher Browser welches spezifische Verhalten aufweist und welche Befehle möglicherweise Bugs verursachen. Für eine genauere Übersicht kann man die vollständige Ergebnistabelle des Entwicklers heranziehen.

Den Status einer JavaScript-App mit MobX managen

Jeder Entwickler, der komplizierte Apps programmiert, kennt das Problem: Je umfangreicher der Code wird, umso schwieriger ist es, die sich verändernden Datensätze fehlerfrei auf alle notwendigen Abschnitte anzuwenden. Und genau das ist für eine erfolgreiche Synchronisierung des UIs notwendig. Mit entsprechend geschalteten Events kann man die betroffenen Teile der App wissen lassen, dass sich etwas verändert hat und synchronisiert werden muss. MobX, eine State-Management-Bibliothek, kann helfen. Matt Ruby stellt in seinem Tutorial die Konzeption von MobX vor und zeigt, wie es angewendet wird. Mit mobx.observable() und autorun() wird ein Callback eingerichtet, der bei einer Veränderung der festgelegten Parameter wie firstName oder lastName ausgelöst wird. Für mehr Informationen verweisen wir auf die umfangreiche MobX-Dokumentation.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

1 Kommentar auf "Fast Forward: Material Design in Drupal, Scopes in JavaScript & die Unterschiede zwischen Tests"

avatar
400
  Subscribe  
Benachrichtige mich zu:
trackback

[…] Beitrag Fast Forward: Material Design in Drupal, Scopes in JavaScript & die Unterschiede zwischen Tests ist auf entwickler.de […]

X
- Gib Deinen Standort ein -
- or -