Working Draft

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.

[00:00:14] Tools are [not] the Problem Schepp und Anselm debattieren zu zweit mit kleinen Abschweifungen über den Artikel von Peter Paul Koch, die Gegendarstellung von Sebastian Markbåge bezüglich der Facebook Instant Articles Ankündigung, zu der auch Tim Kadlec im Bezug auf Performance Stellung nimmt. Wir fragen uns, was der richtige Weg ist, warum es so unterschiedliche Meinungen zu dem Thema gibt und wie der Missstand denn zu beheben wäre. [00:37:33] SVG Icon Systeme Probleme Wir nehmen den Artikel Implementing an SVG Icons System von Damon Bauer zum Anlass und sprechen über SVG. Anselm erzählt von Iconfonts, dem Wechsel zu SVG und etlichen kleinen Problemchen, die er beim Einsatz gefunden hat. Schepp pflichtet bei, wir stellen aber auch fest, dass SVG einfach super coole Sachen wie Vererbungen kann, die wir super nützlich finden. Außerdem erwähnten wir die Grunt-Tasks grunt-svgmin und grunt-svg-sprite. [00:59:44] Verlosung Ja, der Schepp hat eine Lizenz von Jetbrains zu viel und möchte sie unter unsere Hörer bringen. Schreibt dazu einfach eure Erfahrungen, Tipps oder Probleme mit SVG Icons in die Kommentare und dazu, ob ihr PHPStorm oder WebStorm haben möchtet. Die Verlosung findet zur Revision 223 statt… [01:01:15] Keine Schaunotizen Lovefield SQL-ähnliche Syntax schreiben schreiben und JavaScript IndexedDB Queries herausbekommen? Das macht Lovefield für euch. Leider nicht ganz schlank als Library. Windows 95 Yeah, Windows 95 läuft nun im Browser!

Natürlich waren wir auch dieses Mal wieder auf der (grandiosen) beyond tellerrand // Düsseldorf und haben uns wie gehabt einen der Sprecher herausgeangelt und zu einem Interview genötigt :) Getroffen hat es niemanden geringeres als Sara Soueidan, der CSS- und SVG-Shooting-Star des letzten Jahres. Wir sprachen allerdings genau nicht über technische Themen, sondern interessierten uns viel mehr für ihren Hintergrund. Foto mit freundlicher Genehmigung von Gunnar Bittersmann

Dieses Mal haben sich Peter, Hans, Rodney und Stefan zusammengefunden, um ein wenig von der Arbeit mit ECMAScript 6 zu berichten. Schaunotizen [00:00:10] ES6 in der Praxis Hans und Stefan berichten davon, wie ihre Erfahrungen mit dem Einsatz von ES6. Es geht dabei um Tools, und inwiefern es einem im Vergleich zum Vorgänger das Leben einfacher macht. Darüberhinaus reden wir auch darüber, wie zweckmäßig der Einsatz von ES6 heute schon ist und wie spekulieren darüber, wie lange es wohl dauern wird, bis es im Alltag angekommen sein wird. [00:25:36] ES6 Module-Loader sind wieder gestrichen Nicht undiskutiert bleiben durfte auch die Tatsache, dass die TC39 in letzter Sekunde in Sachen ES6 Module-Loader einen Rückzieher gemacht hat, und JavaScript damit weiterhin ohne einen solchen dastehen wird. Wir reden über die möglichen Gründe für diesen Schritt und darüber, welche Möglichkeiten man derzeit für’s Module Laden hat. Dabei fällt auch das Stichwort „Universal Module Definition“. [00:40:12] Keine Schaunotizen ramjet „Ramjet makes it looks as though one DOM element is capable of transforming into another, no matter where the two elements sit in the DOM tree.“ WOW! Git-Extras Hilfereiche Toolsammlung für Git Nr. 1 Hub Hilfereiche Toolsammlung für Git Nr. 2 LanguageTool Ein Open Source Grammatikfehler-Suchprogramm

Da diese Woche nichts spannendes passiert war, ließen Peter, Hans und Anselm den Schepp einfach ein wenig von seinem aktuellen Offline-First-Projekt erzählen. Schaunotizen [00:00:11] Offline First Schepp bastelt eine „appige“ Mobile-Variante seines Projektes Salz&Brot und verfolgt dabei den Offline-First-Gedanken. Dafür verwendet er unter anderem den Application Cache in Kombination mit grunt-appcache und den Scripts aus einem Artikel von HTML5 Rocks.Für den Daten-Sync wird gechunktes JSON (via Oboe.js) gestreamt und (aus einer Reihe von Gründen und mit teilweiser Kompression) mit localStorage gespeichert, nicht mit IndexedDB. Desweiteren kommen AngularJS, jQuery und jQuery-Plugins zum Einsatz. Für die Zukunft plant Schepp, den Suchalgorithmus in einen Web Worker auszulagern, Optimierungen mit der Page Visibility API einzubauen, add to homescreen in Chrome zu nutzen und natürlich Service Worker und Push Notfications zu Felde zu führen. [00:40:17] Keine Schaunotizen The WebKit Open Source Project – Web Platform Status Status diverser Technologien in der Webkit-Engine, ganz wie vom IE-Team vorgemacht. mdo-ular CSS Video eines kurzen Talks über writing better CSS with fewer, more flexible guidelines that help put the focus on what’s between the curly braces..

Stefan, Schepp und Peter regen sich über das Thema der Woche auf und beenden die Sendung mit ein paar interessanten Links. Schaunotizen [00:00:09] jQuery considered harmful Lea Verou liefert einen der weniger guten Anti-jQuery-Artikel der letzten Monate ab. Weil sie sich vor Wrapper-Elementen und Technologie-Lockdown fürchtet, schlägt sie vor auf jQuery zu verzichten. Dass jQuery zahllose Browserbugs (nicht nur im IE) repariert und durch seine API und seine Plugins Webentwicklern das Leben sehr viel einfacher machen kann, wird übersehen – auch wenn es um jQuery-Alternativen wie Zepto und Shoestring geht. Nur in Ausnahmefällen können wir uns vorstellen, auf jQuery zu verzichten; Schepp berichtet von einem solchen Ausnahmefall. Am Ende richtet sich unser Unverständnis auf Leas Technik zur Erweiterung der DOM-Prototypen „ohne“ Kollisionen. Dass das grundsätzlich eine dumme Idee ist ist seit Ewigkeiten bekannt und würde selbst durch die Symbols in ECMAScript 6 nur ein wenig besser. [00:43:48] Keine Schaunotizen Git Large File Storage Git-Erweiterung für große Binärdateien (PSD etc). Understanding the Real Advantages of Using ESLint Wie sich ESLint zu JSHint verhält und warum es rockt. Gulp-Rezepte Gulp-Guru Stefan sammelt Lösungen für häufige Probleme mit dem trendigsten Buildsystem aller Zeiten.

Schepp, Hans, Stefan und Rodney quatschen über rem, em, px und vh. Schaunotizen [00:00:19] R.I.P. REM, Viva CSS Reference Pixel! In unserer Aufzeichnungswoche ist dieser Artikel halbwegs viral gegangen und auch bei uns am Schirm gelandet. In argwilliger Meinungsmache (hatten wir das nicht schon letztens?) werden Einheiten wie rem und em angefochten und der gute, alte Pixel wieder hochzelebriert. Wir feuern kampflustig mit allem dagegen, was wir haben setzen uns mit der Thematik kritisch auseinander und reflektieren, kommen auch zu dem Schluß dass nicht alles Schwarz-und-Weiß ist. em haben durchaus ihre Verwendung bei relativen Abständen, mit rem lassen sich responsive Fragestellungen äußerst elegant lösen. Einziger Nachteil: Die IEs kleinergleich 10 haben Probleme mit rems (und Rehms!) und Pseudo-Elementen. Darüber hinaus gibt uns Rodney Einblick in die Zusammenarbeit mit seinen Designern, die die fiktive Einheit „bu“ erfunden haben, und streifen folgende Artikel und Videos: You should understand CSS Units A pixel is not a pixel (Video) The mobile viewports (Video) [00:23:09] Precise Control over Responsive Typography Eine interessante Technik, die flüssiges Skalieren von Schriften auf unterschiedlichen Screengrößen erlaubt, gibt uns genug Zündstoff um die sehr beliebten, allerdings umfangreich kaputten Viewport Units wieder aufzuwärmen. Rodney erzählt als Inhaber des Viewport Unit Buggyfills von den Problemen, die seine Anwender haben, und Schepp kennt ein paar gefinkelte Techniken, wie man gut ohne JavaScript beim Fixen auskommt. Darüberhinaus philosophieren wir über Umsetzungsstabilität von Webstandards, den einen oder anderen Hack, und ab welcher Projektgröße die vertretbar sind. Denn: alles, was man halbherzig ausbügelt, kommt wohl irgendwann wieder auf einen zurück. [00:39:31] Keine Schaunotizen IE Diagnostics Adapter Mit den Chrome Dev Tools mal eben den IE debuggen? Microsoft (richtig gelesen!) macht’s möglich. Oppoturnistic Encryption Wem halbgare Werbekampagnen mit gemeinsamen Wunsch nach HTTPS schonmal übel auf den Kopf gefallen sind, darf sich über folgende Lösung von Firefox freuen. Annnotated version of the original jQuery release John Resig kann nicht nur programmieren, sondern auch gut Geschichten erzählen. Hier kombiniert er mit Nähkästchenplauderei zur ersten jQuery Veröffentlichung. Building better interfaces with SVG Die Königin der Vektorgrafiken Sara Soueidan brilliert wieder einmal mit einem Slideset, dass sich gewaschen hat. Auch ohne Tonspur wertvoll! NPM Shrinkpack NPM dependencies in ihrer Version einfrieren und gleichzeitig als Binärdatei für das eigene Team verfügbar machen, so die NPM Repository Abhängigkeit loswerden? Dieses Tool macht’s möglich.