Developer

Aktuelle Themen

It’s #FrontendFriday – Animationen und Transitions

es ist wieder Freitag, somit #FrontendFriday und heute schauen wir uns wieder Animationen und Transitions an.

Wozu brauchen wir Animationen?

Animationen sind aus unserem Alltag kaum noch wegzudenken. Zum Beispiel sind sie nicht einfach nur schön zum Anschauen, sondern können auch sehr positiv zur UX beitragen. Wenn man zum Beispiel einen Artikel in den Einkaufswagen legen möchte, können hier Animationen helfen, dem User verstehen zu geben, dass dieser gerade einen Artikel in den Einkaufswagen gelegt hat. Eine weitere Situation sind Ladebalken, welche den User während dem warten bei Laune halten können. Als letzte Situation kann man sich eine Animation auf Buttons vorstellen. Hier kann man bei einem CLICK, das Gefühl vermitteln, dass dieser Button ausgelöst wurde. Somit kann man dem User die Fragen ersparen: Habe ich den Button jetzt gedrückt? Ist der Button überhaupt auslösbar oder ist der deaktiviert?

Wann sollten Animationen abgespielt werden?

Animationen können aber auch als störend  angesehen werden, deswegen sollte man diese immer in Maßen genießen. Wie sagt man so gerne: „Manchmal ist weniger mehr!„. Außerdem sollten Animationen immer einen Sinn ergeben und eine Funktion erfüllen.  Außerdem sollte es keine unnötigen Animationen geben.

Wie lange sollte meine Animation gehen?

Bestimmt hat man schonmal eine fancy Webseite besucht bei der man sich denkt: „Wie lange soll ich hier denn noch warten, ich wollte nur einen Button drücken?!„. Deswegen spielt bei Animationen die Dauer eine wichtige Rolle. So sollten sie nie zu kurz sein, ansonsten bekommt der User nichts mit. Dennoch sollte der User auch nicht warten müssen. Als guten Richtwert kann man sagen, dass die meisten Animationen eine Dauer zwischen 100ms und 500ms haben sollten. Außerdem sollten kleinere Effekte wie hover, fading oder scaling Effekte eine kürzere Dauer bekommen und größere//komplexere Animationen sollten mehr Zeit bekommen.

Library für Animationen

In einer der letzten #FrontendFridays wurde animate.css als Geheimtipp nahegelegt, diese Library habe ich mir dann noch mal genauer angesehen. Hiermit kann man sehr leicht Animationen hinzufügen und diese dann auch später anpassen. Die Funktionalität liegt darin, dass animate.css css-klassen hinzufügt. In denen ist dann die eigentliche Animation beschrieben. Hier ein Auszug aus der „rotateIn“ Animation, welche ich auch in dem Beispiel verwendet habe (https://github.com/daneden/animate.css/blob/master/source/rotating_entrances/rotateIn.css):

 

So würde ein Beispiel aussehen, indem man die Animationen über einen Button auslöst:

Was haben wir heute gelernt?

-Man sollte Animationen nicht vernachlässigen, dennoch sollte man es nicht übertreiben. Außerdem gibt es echt coole Libraries die uns den Alltag um einiges erleichtern können.

 

Wir wünschen euch noch einen wundervollen Freitag und einen guten Start ins Wochenende  :-)

It’s #FrontendFriday – Google macht das Tracking transparent

Es ist bereits allgemein bekannt, dass Google versucht so viel wie möglich von unseren Aktivitäten im Netz (und auch außerhalb) zu tracken. Dennoch möchten wir mit diesem Blogpost das Bewusstsein darüber schärfen, da sicherlich nicht jedem der volle Umfang des Trackings bewusst ist und was der Einzelne dagegen unternehmen kann.

Was wird von Google getrackt?

Aufgezeichnet wird alles wofür ein Google-Konto verwendet wird. Darunter fällt nicht nur der Sucherverlauf von verschiedenen Endgeräten, sondern auch:

  • der Standort-Verlauf (sofern am Handy das GPS eingeschaltet ist),
  • Youtube-Aktivitäten:
    • Was wurde gesucht?
    • Welche Videos wurden angesehen?
    • Welche Videos wurden geliked oder disliked?
    • Welche Videos wurden kommentiert?,
  • Google-Pay Rechnungen und Einkäufe im Play-Store,
  • Reisen und Routen welche mit Google Maps ermittelt wurden

und noch einiges mehr.

Mehr

7 Tipps zum Schreiben von lesbarem Java-Code

Webcast-Online CommunitiesBekanntlich wird Code viel öfter gelesen als geschrieben. Häufig wird er auch von anderen Personen gelesen als von derjenigen, die ihn verfasst hat. Und hast du nicht selbst schon erlebt, dass dein eigener Code nur wenige Monate später völlich unverständlich für dich war…? ;-) Umso wichtiger ist es, dass du dir darüber Gedanken machst, wie du deinen Code so lesbar und verständlich wie möglich gestalten kannst.

Doch was macht lesbaren, verständlichen Code aus? Er ist ausdrucksstark, das heißt er drückt aus was er tut. Und zwar genau das, und nur das.

Allerdings ist das Schreiben von lesbarem Code nicht wirklich leicht. Robert C. Martin („Uncle Bob“) zieht in seinem Buch über Clean Code1 den Vergleich zur Malerei: Es ist einfach zu erkennen ob ein Bild gut oder schlecht gemalt ist. Aber selbst ein gutes Bild zu malen, dafür braucht es viel Übung.

Daher möchte dir die folgenden 7 Tipps an die Hand geben, die dir dabei helfen können, lesbaren Code zu schreiben.Mehr

It’s #FrontendFriday – Kann ich dieses npm Paket nutzen?

Hallo #FrontendFriday-Leser/in,

endlich ist es wieder #FrontendFriday!  Heute geht es um einen sehr effizienten Weg, npm Pakete zu evaluieren, ohne diese vorher auszuprobieren.

Zum Node Package Manager (kurz: npm) gehört neben essentiellen JavaScript Tools auch das globale npm-Repository (https://www.npmjs.com).
Hier finden sich über 1.000.000 JavaScript-Pakete. Die meisten davon sind OpenSource. Im Entwickleralltag stößt man häufig auf Aufgabenstellungen, die durch ein solches npm-Paket gelöst werden könnten.Mehr