Tag Archives: Testing

Quick-Hints #13

Animiertes SVG mit Clipping Masks

Mit dem nötigen Talent oder dank einer engen Zusammenarbeit mit Grafiker, können dank Clipping Mask sehr einfach sehr coole Animationen mit SVG entstehen. So wird in folgender Demo ein iPhone 5C nach und nach aufgebaut, alles im puren SVG: http://www.pencilscoop.com/demos/animating-svg-clipping-masks/; dort findet ihr auch das entsprechende Tutorial.

Canvas für mehr Performance?

Continue reading

Front-end / visual (regression) testing

Auch wenn Fehler in Änderungen am CSS, aufgrund ihrer visuellen Sichtbarkeit, häufig schnell auffallen, halte ich gerade in komplexen und umfangreichen Projekten Regressionstest für sehr sinnvoll.

Regressionstest verfolgen den Zweck, bereits getestetes, nach Änderungen im Gesamtprodukt*, erneut zu testen und so deren Fehlerfreiheit weiterhin zu gewährleisten.

Im Fall des Testens der Visualität einer WebApp, geschieht dies häufig und am einfachsten über einen Screenshotvergleich. Das (automatisierte) Vergleichen von Screenshots hat den Vorteil, dass nicht die Cascading Style Sheets (CSS) direkt getestet werden, sondern deren Auswirkung auf die Visualität. Was wiederum bedeutet, dass auch alle anderen Systemteile, die die Visualität verändern, mitgetestet werden. Dank der großartigen Community gibt es für diesen Zweck bereits viele einsetzbare Tools. Folgend eine Liste der mir bekannten:

Screenshot by Huddle for PhantomCSS

Screenshot by Huddle for PhantomCSS

Screenshot-Vergleich:

Sonstiges:

Ich konnte bisher noch keine Erfahrung mit diesen Tools sammeln, im Überblick sind aber Wraith, PhotoBox und PhantomCSS meine Favoriten. Mehr zum Thema CSS Testing findet sich (in Englisch) im Entwickler-Blog von Huddle, von denen auch eines der oben genannten Produkte kommt (PhantomCSS).

Du kennst noch weitere Libraries, Frameworks und Tools, zum Testen von CSS? Dann schreibs bitte in die Kommentare, ich werde die Liste entsprechend erweitern.

* Soll heissen, dass die Änderungen, weshalb regressionsgetestet wird, nicht zwangsweise (oder offensichtlich) das zu Testende betreffen.

Quick-Hints #7

Als Webentwickler muss man sein Produkt ständig in mehreren Browsern und am besten noch in mehreren Umgebungen testen. Hier eine schöne Möglichkeit: http://blog.mattbailey.co/post/50337824984/grunt-synchronised-testing-between-browsers-devices

Mit SVG-Grafiken in Webseiten kann man viele schöne Dinge anstellen. Zum Beispiel ein Logo / eine Schrift animieren: http://jakearchibald.com/2013/animated-line-drawing-svg/

Ein paar nette CSS3 Effekte für Menüs / Links sind unter folgendem Link zu finden: http://tympanus.net/Development/CreativeLinkEffects/. Um diese auch in vielen Browsern nutzen zu können, empfiehlt sich der Einsatz eines Autoprefixers, zum Beispiel: http://css-tricks.com/autoprefixer/

Für Fälle, in denen man das letzte Element eines Arrays möchte, gibt es viele Möglichkeiten. Wenn man wert auf die Performance legt sollte man ganz klar “array[array.length – 1]; benutzen. Siehe: http://jsperf.com/get-last-item-from-array/10