#CSSConf

Bericht von der CSSConf 2016 in Boston

26.09. -27.09.2016

#CSSConf2016

2 Tage - 16 Vorträge

35 Minuten Vortrag

Übergang: 5 min Interview mit der/dem Vortragenden

Live Transkript und Videoaufnahme

Pause nach 3 bzw. 2 Vorträgen

Fast paced

Kondensierte Information

Bericht von der CSSConf 2016 in Boston

#CSSConf2016

Vortragende und Themen, 26.9.2016

Bericht von der CSSConf 2016 in Boston

  • Sarah Drasner - "Creativity in Programming for Fun and Profit"
  • Brian Jordan - "No Bugs in Sight"
  • Jessica Lord - "Nativize Is the New Normalize"
  • Pete Hunt - "Component-Based Style Reuse"
  • Jen Kramer - "CSS4 Grid: True Layout Finally Arrives"
  • Will Boyd - "Silky Smooth Animation with CSS"
  • Keith J. Grant - "Stop Thinking in Pixels"
  • Lea Verou - "CSS Variables: var(--subtitle)"

#CSSConf2016

Sarah Drasner

Vortragende und Themen, 26.9.2016

  • Kreative Arbeit passiert im Flow

  • Fun-Projekte begünstigen Flow-Zustand

  • Kreativitätstechniken

  • Codingbeispiele

  • Webtechniken

"Creativity in Programming for Fun and Profit"

#CSSConf2016

Creativity in Programming for Fun and Profit

Vortragende und Themen, 26.9.2016

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

 

 

#CSSConf2016

Creativity in Programming for Fun and Profit

Vortragende und Themen, 26.9.2016

 

Codingbeispiele

 

Webtechniken

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

 

 

 

#CSSConf2016

Creativity in Programming for Fun and Profit

Vortragende und Themen, 26.9.2016

 

Flow auch für die BenutzerInnen

 

  • Kognitive Barrieren überschreiten
  • Was brauchen BenutzerInnen wirklich?

 

 

 

#CSSConf2016

Brian Jordan

Vortragende und Themen, 26.9.2016

  • Software Engineer bei code.org
  • code.org fördert Informatikunterricht für Kinder und stellt Tutorials, Unterrichtsmaterial und Programmieroberfläche zur Verfügung.
  • Code Studio erlaubt einfachste Programmierung mit vorgefertigten Befehlsblöcken für Kinder.

Continuous Visual Testing at Code.org

  • Wie automatisieren wir Tests
  • Selenium, Cucumber, @Saucelabs, PDiff, applitools 
  • Jeder schreibt Tests für seine eigenen Features, jeder submit wird getestet.

"No Bugs in Sight"

#CSSConf2016

Jessica Lord

Vortragende und Themen, 26.9.2016

When websites become desktop apps with Electron

  • Erstellung von nativen, betriebssystem unabhängigen/übergreifenden Desktop Apps mit Electron.
  • Chromium, Node.js, HTML, CSS und Electron API 
  • 'Nativize' -> CSS rückbauen, damit die nativen Einstellungen durchschlagen.
  • Tipps und Tricks

"Nativize Is the New Normalize"

#CSSConf2016

Pete Hunt

Vortragende und Themen, 26.9.2016

  • Javascript Guy, mag CSS nicht
  • Arbeitete bei Facebook, Instagram, React, smyte
  • Problem: Beim Entwickeln schon sehen, wie es auschauen wird
  • Wenn App- und CSS-Entwickler nicht die gleiche Person sind
  • Konflikte mit Klassennamen beim Zusammenbau (Kaskade?)
  • single class name selectors, no descendants
  • use just once in your js -> use inline styles -> or not?
  • https://github.com/smyte/jsxstyle

 

 

"Component-Based Style Reuse"

#CSSConf2016

Jen Kramer

Vortragende und Themen, 26.9.2016

  • 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"

#CSSConf2016

"Jen Kramer: CSS4 Grid: True Layout Finally Arrives"

grid

"CSS4 Grid: True Layout Finally Arrives"

#CSSConf2016

"Jen Kramer: 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"

#CSSConf2016

Will Boyd

Vortragende und Themen, 26.9.2016

  • 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"

#CSSConf2016

Will Boyd, "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"

#CSSConf2016

Will Boyd, "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"

#CSSConf2016

Will Boyd, "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"

#CSSConf2016

Keith J. Grant

Keith J. Grant, "Stop Thinking in Pixels"

  • 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"

#CSSConf2016

Keith J. Grant, "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"

#CSSConf2016

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"

Vortragende und Themen, 26.9.2016

#CSSConf2016

Keith J. Grant, "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"

#CSSConf2016

Lea Verou

Vortragende und Themen, 26.9.2016

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

CSS Variablen = CSS custom properties

:root { --bg: blue;} 

body { background: var(--bg);}

"CSS Variables: var(--subtitle)"

#CSSConf2016

Lea Verou, "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)"

#CSSConf2016

Lea Verou, "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)"

#CSSConf2016

Lea Verou, "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)"

#CSSConf2016

Vortragende und Themen, 27.9.2016

Bericht von der CSSConf 2016 in Boston

Sara Soueidan - "SVG IRL"
Henri Helvetica - "The Hateful Weight"
Miriam Suzanne - "Sass Map Magic"
Zach Green - "Webpack and CSS"
Emily Hayman -"It's Time To Ditch The Grid System"
Justin McDowell - "Bauhaus in the Browser"

Amelia Bellamy-Royds - "The Great SVG RetCon"
Alisha Ramos - "Coding is a Privilege"

#CSSConf2016

Sara Soueidan

Vortragende und Themen, 27.9.2016

  • Developer of the Year in the 2015 net awards
  • Selbständige Webdesignerin, Consultant, Trainerin, Autorin
  • lebt im Libanon
  • Umsetzung von smashing magazine Website

Focus "in real life" - oder "learning to love hacks"

"SVG IRL"

#CSSConf2016

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"

Vortragende und Themen, 27.9.2016

#CSSConf2016

  • 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"

Henri "Helvetica", "The Hateful Weight"

#CSSConf2016

Miriam Suzanne

  • Oddbird - Consulting, Software Architektur 
  • Autorin  Jump Start Sass, O'Reilly
  • Möglichkeit den Code lesbarer zu machen
  • Keywords liefern den passenden Code
  • Maps sind ähnlich Arrays, zur Gruppierung von Eigenschaften
  • Merging Maps, Berechnungen, Selbst-Referenzierung
  • Automatische Style guides, Einsatz in json, Datenspeicherung
  • Einsatz am Beispiel von Susy

"Sass Map Magic"

Vortragende und Themen, 27.9.2016

#CSSConf2016

Zach Green

Senior UX Developer bei Alley Interactive

...

"Webpack and CSS"

Vortragende und Themen, 27.9.2016

#CSSConf2016

Emily Hayman

  • Floated grids - Vordefinierte Breiten, nicht Content orientiert/definiert
  • Dann kam Flexbox
  • Kondensierte Einführung in flexbox und flexbox + SASS

"It's Time To Ditch The Grid System"

Vortragende und Themen, 27.9.2016

#CSSConf2016

Justin McDowell

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

"Bauhaus in the Browser"

Vortragende und Themen, 27.9.2016

#CSSConf2016

  • 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"

Justin McDowell-, "Bauhaus in the Browser"

#CSSConf2016

  • 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"

Justin McDowell-, "Bauhaus in the Browser"

#CSSConf2016

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"

Vortragende und Themen, 27.9.2016

#CSSConf2016

  • 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"

Vortragende und Themen, 27.9.2016

#CSSConf2016

Alisha Ramos

Design Director bei Vox Media, Washington, D.C.

  • Diversity in Tech immer noch niedrig (US)
  • Primär Weiß dominiert.
  • Ihre eigene Story ...

"Coding is a Privilege"

Vortragende und Themen, 27.9.2016

#CSSConf2016

ich bin

  • Dr. Eva Broermann
  • gebürtige Nürnbergerin
  • seit 20 Jahren zuhause in Wien
  • vienneva.com
  • Contao Partnerin
  • CSS-begeistert
  • Hobby-Jazz-Sängerin
  • @vienneva

CSSConf2016

By Eva Broermann

CSSConf2016

Bericht von der CSSConf 2016 in Boston

  • 1,909