Notizen von der CSS Dev Conf 2016

Ich habe jedes einzelne CSS Dev Conf besucht, jetzt das fünfte Jahr in Folge. Ich habe Konferenzen, die einen eher engen Fokus haben, immer besonders genossen. Da sich diese Konferenz, wenig überraschend, weitgehend auf CSS konzentriert, dient sie meiner Meinung nach jedes Jahr als ein interessanter Zustandsbericht der CSS-Gemeinschaft, zumindest für mich.

In den vergangenen Jahren haben sich Themen wie Preprozessoren, Architektur, Testing und Performance herauskristallisiert... letztes Jahr würde ich sagen, war es SVG.

Vorbehalt!

Die CSS Dev Conf ist eine Konferenz mit mehreren Tracks, außerdem musste ich die "Best of"-Vorträge verpassen, da ich zu dieser Zeit die CodePen Show & Tell moderiert habe. Dies ist also keine vollständig repräsentative Darstellung der gesamten Konferenz. Entschuldigung! Kommt nächstes Jahr wieder!

Mike Riethmuller sprach über responsive Typografie

Genauer gesagt: „Advanced Fluid Typography“. Er gewann auch den Best of Show! Gut verdient, meiner Meinung nach.

Er führte uns durch die Funktionsweise von calc() und begann dann, Viewport-Einheiten einzubeziehen und alles auf die Schriftgröße anzuwenden. Das Ergebnis kann „fließende Typografie“ sein, also Typografie, die sich basierend auf der Bildschirmbreite mit Minima und Maxima anpasst. Es ist cooler als die alleinige Verwendung von Viewport-Einheiten (oder SVG), da man die Skalierung begrenzen kann.

Siehe den Pen Präzise responsive Typografie von Mike (@MadeByMike) auf CodePen.

Dies kann anstelle von Media Query Breakpoints verwendet werden, um die Schriftgröße in festen Schritten anzupassen.

Es ist eine große Sache, weil

1. Es ist ähnlich dem Unterschied zwischen adaptiven Layouts und responsiven Layouts. Wir wissen alle, dass das Responsive in diesem Bereich gewonnen hat.
2. Die Anpassung der Schriftgröße an Breakpoints ist ziemlich ruckelig und nicht annähernd so befriedigend wie diese Methode.
3. Es ist im Grunde eine Einzeiler-Codezeile, sodass die Übernahme dieser Idee ziemlich einfach sein sollte.

Und das ist noch nicht alles! Wenn die Typografie proportional zueinander skaliert würde, wäre das so ähnlich wie SVG <text>. Die Grenzen sind ein Unterscheidungsmerkmal, aber auch die Konzepte können erweitert werden auf

• Fließende modulare Skala: Eine Überschrift könnte auf einem großen Bildschirm 1,5x größer sein als die nächste, aber auf einem kleinen Bildschirm nur 1,2x größer (aber auf einer fließenden Skala!)
• Fließender vertikaler Rhythmus: Nicht nur die Schriftgröße ändert sich, sondern auch der Zeilenabstand und andere Abstände.

Wir haben es in die Blogs auf CodePen integriert.

David Khourshid sprach über Reaktive Animationen

Das war ein ernsthaftes CSS-Tricksen. Alles basiert auf der Fähigkeit, CSS-Variablen mit JavaScript zu manipulieren. Es ist, als würde man CSS tiefen Zugriff auf DOM-Events geben.

David implementierte seine Demos mit RxJS und seiner eigenen Helferbibliothek RxCSS.

Sein ähnlicher Vortrag von einer früheren Konferenz

Seit der CSS Dev Conf hat David eine Sammlung wilder Demos zusammengestellt, die durch CSS-Variablen möglich sind. Es hat auch mehrere andere inspiriert, dieses Gebiet zu erforschen, wie dieses

Siehe den Pen CSS-Variablen als Datenfeedback von Jase (@jasesmith) auf CodePen.

Alicia Sedlock sprach darüber, wie man Burnout bekämpft

Dies fand bei der Zielgruppe großen Anklang. Danach gab es eine lebhafte Diskussion mit vielen guten Fragen, die tiefer in das Thema eindrangen. Ich habe den Begriff „Brownout“ gelernt, was ein treffenderer Begriff für Überforderung und eine vorübergehende Auszeit ist, während „Burnout“ für ernstere Pausen steht.

Dan Wilson sprach über Pfadanimationen

Dies war ein perfekter Vortrag für die CSS Dev Conf, da er hochmoderne CSS-Techniken beinhaltete (die Namen dieser Eigenschaften wurden erst Wochen vorher geändert) und es Spaß macht, damit zu spielen.

Dan sprach nicht über SVG-Pfadanimationen, die nur wirklich über SMIL möglich sind, was immer noch dem Untergang geweiht scheint. Dies sind Pfade direkt in CSS, wie

.thing-that-moves {
  /* "Old" syntax. Available in Blink browsers as of ~October 2015 */
  motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
 
  /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */
  offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
}

Siehe den Pen Photo Sharer (CSS Motion Path Demo) von Dan Wilson (@danwilson) auf CodePen.

Rachel Nabors sprach über die Kommunikation von Animationen

Aus ihrem Artikel mit demselben Titel.

Trent Walton erzählte uns vom saisonalen Webentwickler

Trent sprach eloquent über Balance.

Die Vorträge auf der CSS Dev Conf könnten eingeteilt werden nach: Philosophisch, Abenteuerlich, Konstruktiv und Restaurativ. Ebenso die Menschen, über was sie sprechen und wofür sie sich einsetzen. In all diesen gibt es Stärke und Vernunft, aber es kann auch zu Frustration führen. Diese Kategorien spiegeln sich sogar in unserer Arbeit und unseren Gemeinschaften wider, wo es ebenfalls frustrierend und inspirierend sein kann.

Wes Bos zeigte anwendbare ES6-Tipps

Wes hat die Gabe, Konzepte auf verdauliche und augenöffnende Weise zu vermitteln. Direkter Link zum Vortrag.

Gregor Adams sprach über beeindruckende Kunst mit CSS

Gregor ist ein Code-Künstler und sprach über Web-Technologien und Kunst und Geometrie und all die wunderbaren Dinge, in die ich jeden Tag durch die CodePen-Community eintauche.

Ich liebe es, wenn Gregor auf kleine Ideen kommt und viel experimentiert, um eine bestimmte Technik oder Idee zu erforschen. Letztes Jahr waren es Fraktale. Dieses Jahr bekamen wir einen Einblick in viele verschiedene Ideen.

Siehe den Pen Hexagon- / Trixel-Zeichen-App [Prototyp] von Gregor Adams (@pixelass) auf CodePen.

Clarissa Peterson sprach über die Erstellung schöner, zugänglicher und benutzerfreundlicher Formulare

Ich mag die Betonung auf „schön“ von Clarissa. Wenn man sich für Formularzugänglichkeit einsetzt, muss dies nicht auf Kosten der Ästhetik gehen. Tatsächlich helfen gut gestaltete Formulare mit ausreichendem Abstand, einladenden Farben und klaren Zuständen bei der Zugänglichkeit.

Hier mangelt es nicht an Beispielen!

Sarah Drasner sprach über Kreativität in der Programmierung

Kreativität macht Spaß, aber sie ist nicht *nur* Spaß. Sie ist gut für dein Gehirn und dein Geschäft.

Cecy Correa half uns, unser GIF-Spiel zu verbessern

Der Vortrag wurde am Ende köstlich nerdig, als Cecy erklärte, wie man seine eigene GIF-Bibliothek aufbauen kann, indem man sie kostenlos auf GitHub hostet und dann einen Bash-Alias erstellt, um sie zu durchsuchen und teilbare URLs zurückzugeben.

alias gif-search="~/absolute/path/to/gif-repo ls | grep"

$ gif-search query

Eli Fitch sprach über wahrgenommene Leistung

Wahrgenommene Leistung ist die wichtigste Art von Leistung. Elis Emoji-Analogie brachte mich auf die Idee, dass ich lieber 20 Meilen Umweg fahre und 8 Minuten länger brauche, als im Stillstand im Stau zu stehen.

Eines der Mini-Themen, das in Elis Vortrag aufkam, waren gefälschte Fortschrittsbalken. Während der Show & Tell später demonstrierte ich, wie man den Fortschritt eines (gefälschten) Fortschrittsbalkens mithilfe der random()-Funktion in Sass randomisieren könnte

Siehe den Pen Randomisierte Easing für Fortschrittsbalken von Chris Coyier (@chriscoyier) auf CodePen.

Michael Cohen sprach über das Ausmusterung unserer Grid-Systeme und die Einführung des CSS Grid Moduls

Ich denke, Michael hat Recht damit, dass irgendwann das, was wir heute als „Grid-Systeme“ betrachten, ausgemustert wird.

Ich freue mich auf Grid hauptsächlich, weil ich denke, dass es eine neue Ära der Layout-Kreativität einläuten wird. Das ist sicherlich das, wofür Jen Simmons plädiert!

Jen Simmons sprach über echte Art Direction im Web

Grid-Layout ist definitiv ein Thema in diesem Jahr. Aber Jens Keynote handelt von mehr als nur „Grid wird cool“; sie plädiert für viele moderne Werkzeuge, die ein enormes kreatives Potenzial freisetzen: Flexbox, Shapes, Columns und mehr.

Dieser Vortrag von einer früheren Konferenz

Rachel Andrew sprach über „Alles wissen“

Rachel spricht viel über CSS Grid-Layout, was uns einen Dreifachschlag davon gegeben hätte, aber Rachel war eine Keynote-Sprecherin und hielt einen persönlicheren und historischen Vortrag über das Web.

Grundlagen, Leute.

Joah Gerstenberg sprach über HTTP/2

Speziell... „Wie es Frontend-Entwickler beeinflusst“.

Ich wünschte, ich hätte dabei sein und Fragen stellen können, denn ich habe definitiv welche. Sagen wir, wir haben HTTP/2 bereits aktiviert (ich habe es). Ist es *bereits* ein Anti-Pattern, Assets zu verketten? Gibt es Beispiel-Websites, die wir uns ansehen können, um die Performance-Vergleiche vor und nach dem Stoppen der Verkettung von Assets zu sehen? Wenn ich aufhöre, Assets zu verketten, ist das dann nur hilfreich und niemals schädlich? Gibt es Browser/Plattformen/Versionen, die ich damit beeinträchtigen würde?

Keith Grant sagte uns, wir sollen aufhören, in Pixeln zu denken

Dieser Vortrag auf einer früheren Konferenz

Relative Einheiten sind gut. Hier gibt es mehr, um Sie zu überzeugen.

Brian Graves sprach über die Verwendung von CSS von morgen heute

„Wohin wir gehen, brauchen wir keine Preprozessoren.“

Mein Favorit: @apply. Es ist wie Mixins/Extends (in Preprozessoren), obwohl es keine Duplizierung von Code/Selektoren erfordert, um das zu tun, was es tut.

Siehe den Pen Test der CSS @apply-Regel-Unterstützung von Serg Hospodarets (@malyw) auf CodePen.

Jonathan Snook sprach mit uns über responsive Web-Apps mit Container Queries

Ich habe diesen leider verpasst und der einzige Link, den ich dazu habe, ist die EQCSS („Element Queries“)-Website. Ich denke jedoch, „Container Queries“ ist der wahrscheinlichere Name, vielleicht?

Jonathan wird den Ansatz des Shopify-Admin-Teams untersuchen, um die komplexen Interaktionen zwischen allen Komponenten der Anwendung zu verwalten und innerhalb eines Monats ein vollflächig responsives Design zu realisieren. Er wird auch untersuchen, wie dieser Ansatz derzeit bei Xero eingesetzt wird, um Einheit zwischen verschiedenen Technologie-Stacks zu schaffen und den Entwicklungsprozess zu beschleunigen.

Es ist sehr interessant zu sehen, wie große Produktionsseiten diesen Weg gehen. Das ist es, was ich (fälschlicherweise) angenommen habe, was mit Container Queries nicht passiert. Ich vermute immer noch, dass, sobald sich eine gewisse Dynamik bei der nativen Browserunterstützung dafür entwickelt, dies ein brandheißes Thema in CSS sein wird. Dann kann ein echtes Polyfill erstellt werden und das Konzept wird Lawine machen.

Kevin Lamping sprach über automatisiertes UI-Testing

CSS-Testing ist ein weiteres Thema, das schon lange existiert, aber nie wirklich viel Schwung bekommt. Es ist schwierig. Es ist fragil. Es ist begrenzt in dem, was es tun kann. Wenn man all das vorher weiß, macht es die Beschäftigung damit nicht sehr attraktiv. Ich denke, persönlich müsste ich eine wirklich große, wirklich missionskritische Website haben und eine Person, deren Aufgabe es ist, sich ausschließlich mit CSS-Testing zu beschäftigen.

Es scheint, dass Kevin viele dieser bekannten Herausforderungen angeht und ein Repository hochgeladen hat, das dies demonstriert.

Matt Vanderpol sprach darüber, wie man eine Living Style Guide aus CSS generiert

Ich liebe es, wie sich die Diskussion über Styleguides von „habe einen“ zu „wie man ihn einfach erstellen, nutzen und verwalten kann“ entwickelt hat.

Adam McCombs sprach darüber, wie Pattern Libraries Ihr Leben verändern können

Pattern Libraries ermöglichen es Ihnen, Systeme statt Seiten zu entwickeln.

Wissen Sie, was eine wirklich lustige Styleguide/Pattern-Library-Präsentation wäre, um all die klugen Dinge, die darüber gesagt werden, zu ergänzen? Wenn Leute ihren Styleguide nehmen und ein Design, das sie bauen müssen, live coden, indem sie den Guide verwenden. Ich denke, das würde den Punkt, den viele Leute machen, schön hervorheben, wie Styleguides die endgültigen Designs schneller zu bauen und konsistenter machen.

Estelle Weyl sprach über inklusiven Code

Wie sie sagt, in anderen Worten: Einfach. Schnell. Zugänglich.

Die erste Regel für die Verwendung von ARIA ist: Wenn Sie ein natives HTML-Element oder ein Attribut mit der bereits integrierten semantischen Funktionalität verwenden können, tun Sie das stattdessen!

— Nasty Woman (@estellevw) 25. Februar 2016

Ivan Wilson sprach über das geheime Leben von Formularen

Es kann nicht genug dafür geworben werden, Formulare korrekt zu gestalten.

Vincent Nalupta sprach über KonMari CSS

KonMari, wie in Marie Kondos KonMari-Methode: „Die magische Lebensveränderung durch Aufräumen“ (Buch). Angwendet auf CSS bedeutet es: Analysieren, Planen, Refaktorisieren, Optimieren.

Julia Konivestska sprach über Datenvisualisierung mit responsivem d3.js

Ein Teil des Vortrags befasste sich mit dem Erstellen eines Diagramms wie diesem von Grund auf: von den Daten über die Bibliotheken und APIs bis hin zur Umsetzung. Dann wurde es responsiv gemacht, was das Messen von Dingen in JavaScript und das erneute Rendern des Diagramms beinhaltete.

Das sind großartige Dinge zu wissen, aber es brachte mich auch zum Nachdenken über native Möglichkeiten in SVG, um die Responsivität zu unterstützen. Einige davon kamen kürzlich zum Vorschein, als ich mit Robins Balkendiagramm herumspielte. Es stellt sich heraus, dass man eine ganze Menge erreichen kann, indem man gar keine viewBox verwendet.

---

Wenn ich ein Thema oder die *heißesten Themen* auswählen müsste, würde ich sagen CSS-Variablen und Grid.