Sarah Drasner

• Front-End Entwicklerin, webanimationworkshops.com

• Schreibt auf css-tricks.com.

• Autorin bei O’Reilly  "SVG Animations"

• Kreative Arbeit passiert im Flow

• Fun-Projekte begünstigen Flow-Zustand

• Kreativitätstechniken

• Codingbeispiele

• Webtechniken

"Creativity in Programming for Fun and Profit"

Creativity in Programming for Fun and Profit

Kreative Arbeit passiert im Flow

Fun-Projekte begünstigen Flow-Zustand

Kreativitätstechniken:

• Hinterfrage die Grundannahmen
• Erfinde künstliche Grenzen
• Setze Techniken anders ein, als gewohnt
• Verbinde Techniken
• Verwende OpenSource als Werkzeug

Creativity in Programming for Fun and Profit

Codingbeispiele

Webtechniken

• SVG
• React
• Request Animation Frame
• GreenSock
• CSS

Creativity in Programming for Fun and Profit

Flow auch für die BenutzerInnen

• Kognitive Barrieren überschreiten
• Was brauchen BenutzerInnen wirklich?

Jen Kramer

• Harvard University Extension School
• Online Kurse für lynda.com, O'Reilly Media, Aquent Gymnasium

• Kein CSS Level 4. Module erreichen unabhängig von einander Level 4 oder höher.
• HTML 5.1, W3C Proposed Recommendation, 15 September 2016
• float 
  • Problem: gleich hohe Spalten
• flexbox  
  • Definiert jeweils eine Zeile
  • Gleiche Höhen, Positionierung oben, unten, mittig, Umordnen

"CSS4 Grid: True Layout Finally Arrives"

grid

• Browsersupport:

  • noch nicht produktiv, z.T. implementiert noch hinter flags

    • Firefox about:config layout.css.grid.enabled

    • chrome://flags/

• Beispiele, Tutorials

  • www.gridbyexample.com

  • css-tricks.com/snippets/css/complete-guide-grid/

  • 24ways.org/2012/css3-grid-layout/

"CSS4 Grid: True Layout Finally Arrives"

grid

• Keine Zeilen, sondern 2-dimensional
• Layout geeignet
• Benannte grid-Bereiche
• Accessibility freundlich
• Abstände leicht zu setzen
• Zusammenspiel mit flexbox

Aktuell:

• Browsersupport abwärts: floats sind immer noch solide
• Flexbox ist derzeit cutting edge
• Grid kommt ... aber wann?

"CSS4 Grid: True Layout Finally Arrives"

Will Boyd

• UX engineer, JavaScript Entwickler, CSS fanatic
• codersblock.com

• Arbeit des Browsers: 60 frames pro Sekunde, 16,7 ms pro frame
  • Loading - HTML, Dom-Tree
  • Rendering - Layout: CSS, Animations, errechnet Geometrie 
  • Painting - Element als Pixels (Rastern, Bitmaps im Speicher)
  • Displaying

"Silky Smooth Animation with CSS"

• Threads (Main, Raster, Compositor)
• GPU-Thread - Pixel auf den Bildschirm bringen
• Animationen mit Re-Rendering:
  • width, height, margin, heading, top, bottom, left, right, fontsize ...
• Animationen mit Re-Painting:
  • color, background-color, box-shadow, border-radius
• Animationen via GPU-acceleration (kein reflow oder repaint):
  • transform, opacity, filter* (except blur or drop-shadow).

"Silky Smooth Animation with CSS"

• Chrome kann sichtbar machen, welche Arbeit der Browser verrichtet.

  Entwicklertools, Timeline

• Eigenschaften austauschen um Reredering/Repainting zu vermeiden

• Beispiel Bewegung: Keyframe animations
  • anstatt left -> transform (translateX)
• Beispiel Fortschrittsbalken:
  • width ersetzt durch transform(scaleX)
• Beispiel Buttonfarbe:
  • background-color ersetzt durch filter(grayscale und hue)

"Silky Smooth Animation with CSS"

• weitere Vorteile

  • unabhängig vom Mainthread (z.B. Javascript "stört nicht")

  • Antialiasing anstatt Pixelhopsen

"Silky Smooth Animation with CSS"

Keith J. Grant

• Autor von CSS in Depth (50% Rabatt)
• CSS Entwickler beim New York Stock Excange

• Relative Größeneinheiten: em, rem, vw vh ...
• Schwierigkeit Größen direkt zu berechnen
• Vererbbarkeit beeinflusst Größe
• begünstigen Skalierbarkeit

"Stop Thinking in Pixels"

font-size: 1.2 em (->16px*1,2=19,2px), margin: 1.2 em (->19,2px*1,2=23,04px)

Empfehlung:

rem für font-size (relativ - Berechnung aus der Root font-size des html Elements)

px für borders

em für margin, padding, border-radius

line-height ohne Einheit ;-)

"Stop Thinking in Pixels"

Warum spezielle Font-Größen, für Überschriften

-> Typographic Scale - Robert Bringhurst

Wichtig ist die Skalierung: Schriftgrößen im Verhältnis rauf und runter skalieren

->>benutze einen Skalar http://www.type-scale.com 

Egal welche Ebene, auch bei verschachtelten ems ist man immer in der Skala

ems Skalierbarkeit auch für Abstände! ->responsive

Positionierung von Icons -> skalierender Abstand bei Vergrößerung der Schrift.

"Stop Thinking in Pixels"

Responsive Design

Alles relativ zur root font-size definiert -> an brekapoints nur die ändern.

Root font-size z.B. Breitenabhägig vw -> skaliert von alleine

calc(0.5em+1vw) ->Minimale Größe ab der nicht mehr skaliert wird.

"Stop Thinking in Pixels"

Lea Verou

• Wissenschaftlerin am MIT Computer Science and Artificial Intelligence Lab,
• Mitglied der CSS Workgroup, früher Angestellte bei W3C
• Buchautorin CSS Secrets (O'Reilly)

"CSS Variables: var(--subtitle)"

• CSS Custom propertiest werden vererbt
  • ausschalten mit * {--variable:intial;}
  • --foo=; invalide, --foo= ; foo ist leer
• Funktioniert nicht in url(). 
• Soll mit CSS-Variablen gerechnet werden, ist es besser sie als Zahl zu setzen und später die Einheit über calc() zu definieren. Die Variable ist dann universeller einsetzbar.
  • --size:6
    --length:calc(var(--size) + 1em);

• Variablen selbst sind nicht animierbar, aber ihre Werte können in Animationen benutzt werden. - Makes sense.

"CSS Variables: var(--subtitle)"

• Variablen erleichtern den Einsatz von Mutationen eines Elements.
  Die Grunddefinitionen bleiben gleich und nur die Variablen werden geändert, z.B. Farben, border-radius etc.
• Praktisch um CSS-Eigenschaften mit Browser-Prefix auf eine Variable zu reduzieren.
  • --clip-path:initial; keine Vererbung
    -webkit-clip-path: var(--clip-path);
    clip-path:var(--clip-path);
    dann nur noch –clip-path setzen und es geht in jedem Browser.

"CSS Variables: var(--subtitle)"

• Mächtig in Kombination mit javascript um die Variablen zu setzen
  • z.B. über Eventlistener (Mausposition, Scrollposition, Input Value) und calc() um mit den Variablen einen Effekt zu erzielen.
  • Vorteil: Styles bleiben im CSS. → Antwort auf React-Vortrag.

CSS-Variablen sind bereits einsetzbar.

http://W3c.org/TR/css-variables

http://drafts.csswg.org/css-variables

"CSS Variables: var(--subtitle)"

Henri "Helvetica"

• @HenriHelvetica
• Webdesigner aus Toronto
• Performance und Accessibility als wichtigste Aspekte im Web

• Feature-itis und hohes Datenaufkommen, stört nicht in "First world" aber ... 
• Immer mehr Bilder (Smartphones)  - brauchen aber Ladezeit
• Interessante Statistiken: Vergleich Ladezeit, Conversion, ...
• Browser interactions
• Network throtteling (Chrome DevTools)
• Bildformate im Vergleich

"The Hateful Weight"

• Bildformate
  • gif - veraltet
  • png - enthält Exif-Metadaten, 16-17% der Dateigröße - entfernen,
    gute Browserunterstützung
  • jpg - enthält Exif-Metadaten, gute Browserunterstützung, Unterformate
    • ​jpg2000 (apple)
    • jpgXR (MS)
  • svg - Vektorformat, für Illustrationen, Logos, gute Browserunterstützung,
    gute Komprimierung mit gzip
  • webp - derzeit schlecht unterstützt (Chrome und Opera, Safari testet) - sehr gute Dateigrößen - sehr gute Kompression - könnte jpg ersetzen

"The Hateful Weight"

Justin McDowell

• Frontend Developer
• Blog revoltpuppy.com 
• Artikel auf Alistapart

• Nachbau von Bauhaus Magazin und Kunst im Webbrowser (responsive)
• viewport units
• transforms
• grid
• shapes
• blending modes

"Bauhaus in the Browser"

• viewport units

  • Fließende responsive, graphisch ausgerichtet Typographie

  • Vortrag von Keith J. Grant

• transforms
  • Ausrichtung von (graphischen) Elementen
  • using viewport units,
    transform-origin,
    transform:translate(),
    rotate();
    transform:perspective() oder perspective: …;translateZ;
    Blogartikel über Zoom ähnliche Effekte.

"Bauhaus in the Browser"

• grid

  • Piet Mondrian

  • Funktioniert in Edge and IE11

  • Chrome und Firefox mit developer flag

  • Siehe Vortrag von Jen Kramer 

• shapes
  • Text umfließt eine Form
  • bisher nur  shape-outside umgesetzt
    • float element, shape-outside: content-box ellipse(); oder circle, inset, polygon, auch kombinierbar mit border-radius

"Bauhaus in the Browser"

Amelia Bellamy-Royds

• SVG2 Workinggroup,  Invited Expert on SVG+ARIA
• Autorin auf css-tricks.com
• SVG-Autorin bei O'Reilly

• Scalable Vector Graphics 
• Ret = Retroactive → go back and fix the past ->
• Con = Continuity: Man kann niemand zum Update zwingen.
• SVG2 Cadidate Recommendation 15.9.2016 → Browsers sollen das implementieren
• Spezifikationen einsehen; Artikel dazu von Amelia.
• Abstimmen, damit Browser die Spezifikationen umsetzen

"The Great SVG RetCon"

• Wenige Features wurden entfernt: kein Browsersupport, kaum verwendet
• Markup:
  • SVG1 → XML
  • SVG2 → SVG ist ein Document model in XML oder HTML
• Inline SVG code wird von Browern schon als HTML interpretiert
• Standalone SVG-Dateien sind noch XML
• Links: Xlink deprecated, wird aber noch aktuell (Safari) ->XML verwenden
• Styles: CSS funktioniert mit SVG, Eigenschaften z.T. als XML attributes
• Einige Attribute können über CSS gesetzt werden
• transforms: Möglich per CSS; Vorsicht: Koordinatensystem unterschiedlich

"The Great SVG RetCon"