Working Draft

Mit Schepp, Stefan, Peter, Hans und Anselm ging es diesmal nach einem kurzen Schlenker in die CSS-Zukunft mit voller Kraft auf die Meta-Ebene. Schaunotizen [00:00:15] Proposing CSS input modality Wir bespechen einen Vorschlag für Media Queries für Eingabe-Verfahren. Dabei tangieren wir Selectors Level 4, Schepps DIY-Spezial-Lösung für Touch-Detection, Focus-Styles und Barrierefreiheit und das nicht ganz JS-Tool what-input, das sich ebenfalls mit dem Erkennen von Eingebemodi befasst. [00:13:24] What’s wrong with the web Wir stimmen ein vielstimmiges Wehklagen über den Ist-Zustand des WWW an. Angefangen bei diesem lächerlichen Verge-Artikel von vor einiger Zeit über Werbeblockerei und langsame Webseiten allgemein (und wie GQ schnell wurde) bis hin zu lästiger Werbung haben wir uns über viel zu beschweren. Datensammelei (vertreten durch u.A. segment.com und geblockt durch disconnect.me und Ghostery) darf auch nicht fehlen. Am Ende kommen wir zu Peters Schlechte-Computer-Hypothese, die sich auch in der Präsentation Web Design: The First 100 Years wiederfindet. Ach, und das WLAN im ICE ist natürlich auch doof. [01:09:17] Keine Schaunotizen npm-windows-upgrade Upgrade npm on Windows, easily and automatically. Punched Card Coding Ein Fachmann erzählt davon, wie man interaktive HTML-E-Mails erschafft. Ein kreatives Hack-Feuerwerk und absolutes Must-See. Tern is getting ES6 support ES6 für Tern … wenn wir die Kohle dafür aufbringen. Was wir tun sollten.

Weder Sommerhitze noch Sommerloch konnten Stefan, Schepp und Peter davon abhalten das einzige nennenswerte Thema der Woche in eigentlich völlig ungebührlicher Breite durchzukauen. Schaunotizen [00:00:10] Stop pushing the web forward Peter-Paul Koch fordert ein Moratorium über neue Browserfeatures und wir sind einigermaßen perplex. Nicht nur glauben wir, dass PPK weiß, dass sich das nicht durchsetzen lässt, auch über Motivation und Ziele hinter dieser Forderung sind wir ziemlich verwirrt und wir halten sie am Ende für ziemlichen Käse. Schützenhilfe bekommen wir aus der Richtung von Jake Archibald und Bruce Lawson, die ebenfalls nicht viel mit dem Moratorium anfangen können. [00:37:32] Keine Schaunotizen Designing for Performance – free online Ein Einsteiger-Buch über Performance für Designer, jetzt kostenlos online.

Heute gibt es mal wieder ein Interview von uns, und zwar mit der VoIP-Firma Sipgate zum Thema „Arbeitsstrukturen“. Anlass ist ein sehr detaillierter und wahnsinnig interessanter Artikel der Firma darüber, wie man dort zu Werke geht. Für uns klang das so ungewöhnlich und so gut, dass wir dachten, wir lassen uns das „System Sipgate“ nochmal persönlich erklären. Unsere Gesprächspartner bei Sipgate waren die Texterin Anna Müller und der Backend-Entwickler David Hasenbeck. Schaunotizen [00:00:00] Willkommen bei Sipgate! Wie wir arbeiten. Eine Bedienungsanleitung. „Jedes Unternehmen hat seinen Mikrokosmos mit eigenen Regeln und individuellen Gepflogenheiten — so auch wir bei sipgate. Um neuen Kolleginnen und Kollegen einen schnellen Einstieg in unseren Modus Operandi zu ermöglichen, haben wir diese Bedienungsanleitung verfasst. Und dann festgestellt, dass diese vielleicht auch für andere interessant sein könnte.“ – Oh ja, sehr interessant! [00:31:41] Verlosung Gewinnt ein Ticket für die NightlyBuild 2015 Wir verlosen ein Ticket für die Anfang September in Köln stattfindende Abend-Konferenz NightlyBuild 2015. Wer Lust drauf hat, kommentiert hier drunter und landet dann automatisch im Topf. Sinnvolle Kommentare werden bevorzugt. [00:32:34] Keine Schunotizen Styling SVG Content with CSS An in-depth article on how to style the contents of the SVG element and overcome some challenges it brings.

An diesem lauen Sommerabend telefonieren sich Anselm, Hans und Peter zusammen, um letzte wichtige Fragen vor dem Urlaub zu klären. Als da wären… Schaunotizen [00:00:13] Ask me Anything Reddit und Sindre Sorhus zum Vorbild, hat Anselm auf GitHub eine sogenannte „Ask me Anything“-Sektion (AMA) aufgemacht, auf der jedermann ihn zu allem befragen kann. Ob er jedem immer antwortet und was das Ganze für einen Sinn haben könnte, das wollen Hans und Peter in einem persönlichen AMA gerne herausfinden. Fest steht: Hans sieht für sich da nicht viel Sinn drin und Peter antwortet bei sich im Blog eigentlich nur auf Fachfragen. [00:14:57] You Might Not Need Underscore Peter und Hans unterhalten sich eine gute Dreiviertelstunde über die Nützlichkeit von Underscore bzw. seinem Zwilling lodash, und ob die Bibliotehken dank neuerer ECMAScript Features nicht vielleicht sogar gänzlich überflüssig geworden sind. Wir stellen fest: Beide haben ihre ganz eigenen Perspektiven auf die Dinge. [00:58:18] Keine Schaunotizen Introducing Material Design Lite Google stellt die UI-Bibliothek Material Design Lite vor, die es erlaubt, den Material Design Look & Feel mit jedem beliebigen MVC-Framework zu verheiraten. Web Platform Incubator Community Group (WICG) Ihr habt eine Idee für einen neuen nützlichen Webstandard? Ihr habt Lust, Eure Idee bis zu einer Spezifikation voranzutreiben? Diese Community Group soll Euch dabei helfen, Eure Idee zu validieren und sie gedanklich wie auch inhaltlich „zur Marktreife“ zu bringen, auf dass sie am Ende tatsächlich in eine gut durchdachte und dokumentierte Spezifikation münden kann.

Diesmal widmen Hans, Rodney und Schepp sich einzig und allein einem Thema, und zwar… Schaunotizen [00:00:22] Progressive Enhancement Angeregt durch eine Diskussion auf Twitter zwischen Jake Archibald und Jeremy Keith, und aufgrund des Artikels von Jeremy, sprachen wir darüber, inwieweit wir das Thema „Progressive Enhancement“ in unsere Projekte implementieren.. Rodney erwähnte dabei Aaron Gustafsons Konzept der Interface Experience Maps. Wir stellten auch fest, dass wenn man eine Single Page Webapp baut, es sehr schwierig wird, einen Ausfall von JavaScript mit einzuplanen. [00:42:06] Keine Schaunotizen Watchman Ein generischer Watcher/Taskrunner, von Facebook. Oldie but Goldie!

Rodney, Anselm, Peter und Stefan klären Missverständnisse zu Web Components und Web Assembly auf. Schaunotizen [00:00:16] Practical questions around web components Ian Feather hat im Zuge seines Besuches bei der EdgeConf einen Artikel zum Thema Web Components geschrieben, und versucht Anwenderfragen zu beantworten. Rodney, der ebenfalls beim gleichen Event war, erinnert sich an die Diskussionsrunden, die denen zugrunde liegen. Wir gehen munter Frage für Frage durch, und verstricken uns gleich bei Nummer 2 in eine Diskussion, die das gesamte Konzept kritisch hinterfragt. Sind Web Components heute schon nutzbar? Gibt es bei Web Designern überhaupt einen Nutzen dafür? Oder doch wieder nur ein Fehlschlag, weil sich nicht mal standard HTML Elemente damit umsetzen lassen können? Unsere Ansichten gibt’s hier. [00:57:48] Web Assembly Web Assembly wurde groß angekündigt und kaum einer weiß, was er jetzt damit zu tun hat. Rodney erzählt von Beweggründen und gibt Einblicke hinter das Format. [01:12:13] Keine Schaunotizen CSSConf 2015 Die CSSConf war und Videos gibt’s auch schon! NightlyBuild 2015 Die NightlyBuild geht in die zweite Runde!

Für die heutige Revision haben Schepp, Anselm und Stefan sich Lisa Gringl aus Kärnten/Wien/Tirol ins virtuelle Studio geholt, um über Grenzen und Brücken von Design und Code zu sprechen. Schaunotizen [00:01:15] Datenvisualisierung Eins von Lisas Steckenpferden sind umfangreiche und interaktive Visualisierungen großer Datenmengen, die sie als Designerin mit D3 umsetzt, und erst vor kurzem in einem Talk auf der Future of Web Design“ Konferenz in London ausführlicher erklärte. Erwähnt werden: Flowing Data und der Sketch Data Populator [00:04:00] Coden als Webdesigner — Die Praxis Da Lisas Ursprünge in der Entwicklung liegen und erst später die Entscheidung zur Designerin gefallen ist, liegt ihr die Umsetzung der kreativen Ergebnisse naturgemäß am Herzen. Sie spricht über Workflows, Tools wie Sketch und Framer, den Einsatz von Template Libraries und Styleguides, und dass man für Ember zum Beispiel sehr schön solche Patternbibliotheken erstellen kann. Ebenso erwähnt werden die flexiblen Grenzen und die einzelnen Schritte, die ein Endprodukt annehmen kann. [00:44:33] Design-Versionierung Da Lisas Designs auch einige Iterationen durchlaufen, kann sie als codende Kreative durchaus ein Liedchen von „_v2“, „_final“ und „_really_final_this_time“ Dateien erzählen. Der Wunsch liegt an einem anständigen Versionierungstool, wie wir es von Git und Konsorten her kennen. Genannt werden Tools wie die InvisionApp, Pixelapse und das bereits ausprobierte und für gut befundene Git LFS [00:52:13] PostCSS Zum Abschluß wird noch das aktuell gehypte PostCSS durch die Mangel genommen. Und das artet ganz schnell in einen Rant seitens Stefan aus. Wir klären auf, was PostCSS und Ableger wie CSSNext und Pleeeease vorgeben zu sein, aber sie schlußendlich wirklich sind, und welche Gefahren diese Tools bergen wenn man sich nicht grundlegend mit dem Unterbau beschäftigt. Postprocessoren als Transpiler sind ein Mythos, wie schon der weise Rodney Rehm vor einem Jahr verkündete. Ausnahmsweise finden wir einmal nicht alles schlecht und loben den Einsatz von rem/pixel Fallbacks und richtiges Postprocessing wie Autoprefixer, sowie die unglaubliche Erweiterbarkeit, mit der sich in der Theorie andere Präprozessoren auch umsetzen lassen könnten. [01:17:02] Keine Schaunotizen GitFlow considered harmful Noch ein Considered Harmful Artikel, aber einer, den man durchaus mal durchlesen kann. Framer.js CoffeeScript gestärktes Prototyping-Tool für interaktive Abläufe. Von Designern empfohlen!

Schepp, Peter, Rodney und Stefan üben sich als Verschwörungstheoretiker. Grundsatz ihrer Theorie: Unfertige Standards, die ohne Präfix in Browsern landen und so der jeweiligen Firma einen Vorsprung liefern. Was liegt, das pickt, denn pactum sund servanda. Die heutigen Exponate: Schaunotizen [00:00:20] Safari 9 Die aktuelle Version des Safaris ist in einem Previewrelease verfügbar, und die Reaktionen sind eher bescheiden. Mit dem Force Touch Callbacks übergeht man schnell mal alle Bemühungen in Richtung Pointer Events, AirPlay Support ist hochproprietär, kommt aber als Standard daher, und die neuen Erweiterungen des link-Elements sorgen für umständliche Hotfixes bei anderen Browsern. Halbfertige Dinge kommen mit Präfix in den Browser, total unfertige und unabgesegnte CSS Eigenschaften total ohne. Wir gehen die gesamte Feature Liste durch und geben zu jedem Punkt Senf ab. Großes Urteil: Für ein Jahr Pause ziemlich dünn, und noch dazu mit zuviel fragwürdigen Erweiterungen ausgestattet als dass wir das gut finden würden. Wir fühlen uns an die 90er und einen bestimmten anderen Browser rückerinnert. [00:41:29] The State of Web Components Mozilla gibt Auskunft über den aktuellen Stand der Web Components Standards, und wir sprechen über deren tatsächliche Verwendbarkeit. Stefan findet Type Extensions im Sinne von Progressive Enhancement gut, Peter wirft aber gekonnt den beschränkten Use-Case ebenjener ein, weil die Implementierung wichtige Zugriffe auf diverse Funktionalitäten unterbindet. Wir sehen uns dem AppCache Problem gegenüber: Gute Idee, aber zu hohe Abstraktion macht’s unbrauchbar. Das zeigt auch der Versuch, HTML in Custom Elements nachzuimplementieren. Wir halten es am Schluß wie Schepp: In Ruhe abwarten und Tee trinken. Wenn’s fertig ist kann man’s ja verwenden [00:56:00] Tota11y Ein weiteres Accessibility Tool, dass uns sagen soll wo unsere Barrierefreiheitsschnitzer sind. Peter fühlt sich an bereits vorher gescheiterte Versuche erinnert, Rodney will das eher als ersten, allerdings nicht finalen Check automatisiert. In einer finalen Runde meinen wir, dass barrierefreiem Webdesign in der Geschäftswelt nicht genug Bedeutung bemessen wird und für eine ausführliche Umsetzung vor allem das Bewusstsein dafür sowie Fachkräfte fehlen. [01:10:16] Keine Schaunotizen PurifyCSS Baut auf CleanCSS auf und schmeisst unnützen CSS Code weg, checkt allerdings, welche Klassen durch JavaScript verändert werden When Responsive Images Get Ugly Massenweise Edge Cases für srcset und picture, sowie Lösungsansätze. Vieles davon vielleicht nicht in der realen Welt nötig, aber dennoch gut zu wissen.

Hans, Peter und Anselm plaudern diesmal wieder einmal über ein paar ihrer Lieblingsthemen: Tooling und Performance mit und ohne Frameworks. Dabei kommen wir auch nicht umhin, hier und da abzuschweifen und Randthemen aufzugreifen. Schaunotizen [00:00:12] Is React really fast? So ganz haben wir nicht verstanden, worauf die Daten im Artikel basieren, aber unseren Senf geben wir natürlich schon dazu. Allein schon, weil die Meinungen von Peter, Hans und Anselm nicht übereinstimmen. Als Nebenschauplatz finden wir heraus, warum Linkbaiting Artikel funktionieren (ganz was neues). Denn die eigentliche Frage zu dem Thema ist ja: Performt das Tool, das ich nutze, für den Zweck, den ich habe? Und ist measured Performance zwischen verschiedenen Frameworks wirklich das Problem? Wir glauben nicht… [00:16:48] Tools to notify you when dependencies update Da wären wir wieder beim Lieblings-Thema: Tooling. Diesmal geht es darum, wie man dependencies updaten kann, über neue Versionen informiert wird. Und während Peter dazu plädiert, dass das unnötig sei, weil eh keiner seine dependencies updated, sagen Hans und Anselm, dass sie dafür durchaus Anwendungsfälle haben und teilweise solche Tools auch aktiv nutzen. Nebenschauplatz hier: Sollte man selbst Scripte wie Slider nochmal schreiben oder lieber doch auf ein vorhandenes Tool zurückgreifen? [00:38:07] Links Browser Remote Mit Browser Remote wird es möglich via Chrome Extension fremde Chrome Browser zu debuggen, was für Kunden-Remote-Debugging gegebenenfalls sehr hilfreich sein kann.

[00:00:39] News Please update Picturefill Ein kleines Public Service Annoucement der Responsive Images Group: Holt euch den neuen Picturefill. Der ist den Standards nahe und rüstet dort auf wo’s nötig ist.. Schaunotizen [00:01:33] PatternLab Stefan hat’s schon bei einigen Projekten im Einsatz, Schepp hat gerade den Intensivkurs vom Großmeister Brad Frost selbst absolviert: PatternLab, das Tool, dass allen Beteiligten eines Projektes hilft Designs, Technik und Responsiveness besser zu verstehen und zu managen. Wir erzählen von unseren Erfahrungen mit dem Tool und der Atomic Design Herangehensweise, und räumen mit Vorurteilen und Missverständnissen auf. In Summe also ein „Was tut es, und wozu ist das jetzt gut?“. Darüber hinaus erzählt Stefan, wie er das Grundprinzip in ein eigenes Tool verwandeln konnte, dass näher an dem von ihm verwendeten CMS liegt, und auch dort eine nötige Brücke im Entwicklungsfluss stellt. [00:38:25] Keine Schaunotizen Art directing SVG using Viewbox Ein SVG Artikel über das viewbox-Attribut. Natürlich von Sara Soueidan. Mosaic Academy Schnellcheck für eure JavaScript Kenntnisse. Gut für Training und Verständnis.. text-rendering: optimizeSpeed vs optimizeLegibility Schöneres Font-Rendering wirkt sich massiv auf die perceived performance der Seite aus. Canvas Recording Browserscreen in einer Canvas aufzeichnen und über Web-RTC durch die Gegend schicken? Geht anscheinend. Galen CSS Tests mit toller Beschreibungssprache. Zwar Selenium, aber gute Idee.