Frontend Conference 2016

Frontend Conference 2016

In diesem Jahr hatten sechs Personen der Skill Group “Frontend” (Beat GebistorfMatthias GigerDominic ModalekElena WessolekJan WidmerDino Ziermann), zwei UXler (Daniel DemelAxel Schäfer) und zwei Mitarbeiter von HR (Nadine Mueller, René Paparusso) das Vergnügen, die Frontend Conference am 1. und 2. September in Zürich zu besuchen.

Tagungsstätte war die alte Papierfabrik auf dem Gelände der Sihlcity. Insgesamt kamen 400 Besucher aus den verschiedensten Ländern von denen mehr als 20 einen Vortrag zu den Themen Frontend, UX und Design hielten.

Meistens hatten wir die Wahl zwischen zwei verschiedenen Vorträgen, da die überwiegende Zeit zwei Vorträge zur gleichen Zeit liefen. Im folgenden werde ich die – aus Sicht der Frontend Skill Group – interessantesten Vorträge kurz vorstellen.

Andy Clarke, The Fine Art Of Web Design

Andy Clark hat in seinem Vortrag darauf aufmerksam gemacht, dass sich heutige Webdesigns sehr ähneln. In der Regel verwenden sie 12-Spalten-Grids, woraus eine gewisse Ähnlichkeit in Layouts resultiert und die Vielfalt verloren geht. Er zeigte deshalb Gestaltungsmöglichkeiten auf, wie eine Seite individueller wird, um sie an die Bedürfnisse des Inhalts anzupassen und Emotionen zu wecken (Stichwort: „Geschichte erzählen“):

  • Der Unterschied zwischen Web und Print sollte nach Möglichkeit verringert werden
  • Typographie ist der Schlüssel zu einer guten Webseite
  • Über eine neue Anordnung von Überschriften und Text nachdenken
  • Mit Weissraum „Luft zum Atmen“ schaffen. Eine breite Spalte lässt den User zeitlich länger verweilen als über einer deutlich schmaleren Spalte (Vergleich: Comic-Layout)
  • Es können natürliche Prinzipien wie z. B. Fibonacci für den Entwurf eines Layouts verwendet werden. Natürliche Muster empfinden wir Menschen als vertraut und  schön.
  • Je nach Bedarf können mehrere Gridsysteme mit einer unterschiedlichen Anzahl/Aufteilung der Spalten verwendet werden, um verschiedenen Content bestmöglich darzustellen

SlidesVideo

Eva Lotta Lamm, 5 Steps To Change Note Taking

In Eva Lotta Lamms Vortrag ging es um das Thema Notizen und wie diese mit Hilfe von Sketches besser aufbereitet werden können, um mehr Aussagekraft zu erzeugen als eine einfache Stichpunktliste. Dazu bediente sich Eva Lotta Lamm dem Live Sketching und skizzierte mit flinker Hand was sie erzählte. Die fünf wichtigsten Learnings waren:

  1. In kleinen BÜNDELN notieren
  2. Wichtiges GROSS schreiben
  3. Eine visuelle HIERARCHIE einbauen
  4. STRUKTURIEREN
  5. Visuelle MARKIERUNGEN setzen

Das Ergebnis Ihres Vortrags ist auf Twitter zu sehen.
Video

Martin Splitt, Rendering Performance

Martin Splitt machte sich stark für ein ruhigeres Leben von geplagten Pixeln. Konkret erläuterte er, wie man das Relayouting und Repainting eines Grossteils der Webseite durch das forcieren von Layers und durch eine geschickte Anwendung von CSS Properties verhindern kann. Dies ermöglicht flüssigere Animationen, was zu einem – gefühlt – performanteren Benutzererlebnis führt. Namentlich reduziert man Relayouting und Repainting durch 3D Transformationen, das CSS Property will-change, Animationen in einem Layer und der Nutzung von den beiden Elementen canvas und video. Welche CSS Properties ein Relayouting oder Repainting auslösen, ist auf csstriggers ersichtlich.

SlidesVideo

Vitaly Friedman, Dirty Little Tricks From The Dark Corners Of Front-End

Wie jedes Jahr war auch Vitaly Friedman – Editor-in-Chief des Smashing Magazines – auf der Frontend Conference vertreten und hat uns auf eine Reise durch verschiedene Frontend Probleme mitgenommen. Seine Frontend-Tricks gehen von Genial bis “Evil” und man sollte wohl besser nur die genialen in einem Projekt anwenden. Nachfolgend sind ein paar dieser Tricks kurz beschrieben:

  1. Pseudo elements for styling
    Um die Separatoren von z. B. Telefon- oder IBAN Nummern bei Parsing- oder Kopier-Aktionen nicht mühsam per JS wieder entfernen zu müssen, können einfach :before/:after Elemente verwendet und dementsprechend gestylt werden.
  2. Hintergrundfarbe und Padding bei mehrzeiligen Textblöcken
    Wenn man background-color und padding bei einem mehrzeiligen Textblock angibt, bekommt nur die erste und die letzte Zeile ein padding. Mit Hilfe von text-shadow kann ein Abstand erzeugt werden, der alle Zeilen betrifft.
  3. Fully Functional Shopping Cart in E-Mails
    Vitaly hat uns gezeigt, dass man mit über 100 Radiobuttons/Checkboxes einen voll funktionsfähigen Warenkorb in einer E-Mail abbilden kann, indem viel CSS, ein Checkbox-Hack und CSS Counters eingesetzt werden. Dieser Punkt kann wohl ganz klar in die Kategorie “Evil” geschoben werden.

SlidesVideo

Harry Roberts, Refactoring CSS Without Losing Your Mind

Harry Roberts nahm sich dem Thema Refactoring an. Als wichtigsten Punkt nannte er die Aufteilung in mehrere kleine Abschnitte, die nach und nach umgeschrieben werden, damit der Überblick nicht verloren geht. Ausserdem zeigte er, wann ein Refactoring ansteht und wann man es besser sein lassen sollte.

Wann ist der richtige Zeitpunkt für ein Refactoring?

  • Wenn die Wartungskosten höher sind als die Kosten, den Code neu zu schreiben
  • Wenn die aktuelle Version die Arbeit verlangsamt
  • Wenn eine neue Version nennenswerte Vorteile bringt

Wann sollte man ein Refactoring besser bleiben lassen?

  • Wenn wir nicht verlangsamt werden
  • Wenn es etwas ist, das ignoriert werden kann
  • Wenn es etwas ist, das in einem späteren Rewrite (z.b. in einem Jahr) gemacht werden kann
  • Wenn ein komplettes Rewrite mehr Sinn macht

Video

Tim Perry, Promises Are So Passé

In JavaScript gibt es bisher zwei gebräuchliche Wege, um die Resultate asynchroner Operationen zu verarbeiten. Einerseits der Einsatz von Callbacks und andererseits die Nutzung von Promises, die mit ES6 im Jahre 2015 eingeführt wurden. Tim Perry gibt sich jedoch mit beiden Herangehensweisen nicht zufrieden, da sie beide gewisse Nachteile wie tiefe Verschachtelungen oder separate Scopes mit sich bringen. Dieser unnötige Overhead kann mit Hilfe von Generatoren und der neuen Async-/Await-Syntax vermieden werden. Diese Technologie wird ihren Weg zu uns mit ES7 (2017) finden.

Video

Fazit
Das Wichtigste einer Conference sind ihre Vorträge. Deshalb ist es toll, dass alle Talks aufgezeichnet werden und anschließend im Web zugänglich sind, so dass man sich auch im Nachhinein einen verpassten oder besonders spannenden Vortrag nochmals ansehen kann. Die Mischung der verschiedenen Vorträge fand ich grundsätzlich gelungen, hätte mich aber auch über aktuelle Themen wie z. B. Webpack, React, Angular oder ähnliches gefreut. Einen Besuch kann ich in jedem Fall empfehlen.

Sammlung Slides & Videos
Donnerstag, 1. September
Freitag, 2. September

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>