Working Draft

Zur Revision 256 ergab es sich, dass wir uns eine ganze Sendung lang einer Hörerfrage widmeten, welche uns im Rahmen der Revision 253 – CMS, CMS, CMS! gestellt wurde. Schaunotizen [00:00:36] Hörerfrage CMS-Workflow Ein Hörer, Tilman, fragte, wie wir denn mit unterschiedlichen Bereichen bei der Webseiten-Entwicklung umgehen, wenn wir mit Content Management Systemen arbeiten. Wir sprechen darüber, welche CMS wir verwenden, welche Rollen wir in diesen Projekten einnehmen und wie wir moderne Frontends im Zusammenspiel mit fast jedem CMS bauen können. [00:51:39] Keine Schaunotizen Styling broken Images Bilder, die nicht geladen werden können, sehen meistens etwas „zerschossen“ aus. Mithilfe dieses Tutorials lässt sich da Abhilfe schaffen. Material Conference 2016 in Island Dieses Jahr wird erstmalig die Material Conference stattfinden. Eine Konferenz, die das Web als „Material“ untersucht. Die Veranstalter brauchen eure Hilfe und haben eine Kickstarter Campaign ins Leben gerufen. Schaut’s euch mal an. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Hans und Peter hatten keine Themen, also plauderten sie ein wenig über die diversen Hacks, die sie in ihren langen und ruhmreichen Frontendler-Karrieren so auf die Browser-Welt losgelassen haben. Schaunotizen [00:00:09] Hack the Planet Angestoßen durch lave, eine Art JSON für ganz harte (und wohl eine Ergänzung zum Structured clone algorithm), pflügen Hans und Peter durch ihr Hack-Archiv. Angefangen bei klassischen CSS-Hacks über Conditional Comments und dem hasLayout-Allheilmittel zoom: 1 geht es recht bald zum Thema Clearfix und seinen divseren Permutationen im Wandel der Zeit (Hans schwört auf overflow: hidden). Peters Lieblings-CSS-Hack bleibt hingegen .wichtig, .egal:not(.egal){}. In Folge betreten wir das Feld der HTML-Hacks, spekulieren über Details im head– sowie über Anwendungsfälle des noscript-Elements. Da data-Attribute letztlich auch nur die Großzügigkeit des HTML-Parsers ausnutzen, sortieren wir diese (speziell ohne data-Präfix) auch in der Hack-Rubrik ein. Wir beenden das Thema mit Erzählungen aus der React-Hackerei, erwähnen neben dem Universal-Schlangenöl setTimeout(fn, 0) auch das modernere setImmediate(fn) und hören auf, bevor wir auf noch schrägere Hacks als Peters Funktionsverasynchronisierungslibrary zu sprechen kommen. [00:43:30] Keine Schaunotizen tbranyen/diffhtml: Easily swap out markup with an intelligent virtual dom Für alle, denen React zu High-Level ist. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Der wöchentliche News-Podcast hat wieder mal Neuigkeiten! Nebenbei wird noch über progressives Laden von CSS Dateien philosophiert. Anselm, Hans, Schepp und Stefan diesmal im Boot. [00:00:25] News Grunt 1.0 Release Candidate Nein! Doch! Oh! Oder: Die Hölle friert zu und Node kommt ohne Dependencies aus. Grunt 1.0.0. bringt das verwaiste Projekt auf den aktuellen Stand mit NPM, löst einige bekannte Bugs und ist ein wichtiger Schritt zur Reanimation des Projektes. Statt dem Big Bang gibt’s jetzt die bekannte API gesichert und veröffentlicht. Touch Action CSS Property Die touch-action CSS Eigenschaft bekommt Browserreichweite. Hier gibt’s Informationen dazu. Transitioning from SPDY to HTTP2 Chrome schmeißt in absehbarer Zeit SPDY raus. Hier gibt’s Informationen für Leute, die ihre Server noch damit betreiben. Schaunotizen [00:04:10] The future of loading CSS Jake Archibald beschreibt eine gravierende Änderung in Chromes Lade- und Renderstrategie für blockierende CSS Dateien. Diese Änderung (die in Edge schon so umgesetzt wird) erlaubt, CSS auch an anderen Stellen als dem Head zu laden und so progressiv Stylesheets für gewisse Bereiche der Website nachzuladen. Jake belegt dies mit einem entsprechenden Demo und einigen Use Cases. Wir beleuchten die Vor- und Nachteile und diskutieren über Properties wie lazyload und postpone [00:24:54] Keine Schaunotizen Finessing feColorMatrix Una beleuchtet SVG Filter Eigenschaften bis ins äußerste Detail. New ways to make your web app jank with Houdini Houdini, eine Einführung. Hier gibt’s massiv Informationen und erste Code-Beispiele zum erweiterbaren CSS Standard. Creating Fun and Immersive Audio Experiences with Web Audio Die Web Audio API kann viel. Hier findet man ein paar gute Beispiele und Anwendungsfälle. The Fab Four technique to create Responsive Emails without Media Queries Eine sehr einfache, aber doch effektive Implementierung von Element Queries mit calc, min-width und max-width . Art directed responsive images Automatische Art Direction für responsive Images? Hier. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Obwohl es nicht die Kernkompetenz von Anselm, Stefan und Peter ist, waren diese Revision mal wieder Content Management Systeme dran. Dazu kommen die üblichen drei Links. Schaunotizen [00:00:10] CMS, CMS, CMS! Cory Etzkorn hat mit Choosing the Best CMS einen langen, detaillierten Artikel über Content Management Systeme geschrieben, an dem wir uns entlang hangeln. Stefan ist ein Fan des flexiblen Craft CMS – außer richtig guten Lösungen für Mehrsprachigkeit und Content Staging fehlt es an nichts. Einigkeit herrscht darüber, dass unter den Homepage-Zusammenklick-Baukästen Squarespace der beste Baukasten ist. An WordPress finden wir besonders die Vielfalt und Flexibilität beeindruckend, speziell dass man mit sehr wenig Fachwissen sehr weit kommen kann. Während keiner von uns Siteleaf kennt, können wir umso mehr positives über Kirby (kleines textbasiertes CMS) sagen. Der nerdige statische Seitengenerator Jekyll wird gerade von Peter evaluiert, doch vor Langsamkeit und Ruby-Gefrickel wird gewarnt. Für Software-Nerds ist die Kombination von Jekyll mit Github Pages sehr zu empfehlen, jedoch ist es prinzipbedingt nicht unbedingt kundentauglich. Das gilt auch für das ähnliche Middleman, das einem noch mehr Ruby-Skills als Jekyll abverlangt. Zum Ende geben wir noch unsere gänzlich unfundierten Meinungen und Vorurteile zu Drupal, Typo3, Joomla, MODx und Perch zum Besten. Als kostenlose Geschäftsidee offerieren wir das Konzept Static Site Generator als App mit gegenüber klassischen CMS klaren Vorteilen bei Sicherheit und Performance. [00:56:31] Keine Schaunotizen Investigating the overhead cost of compiled es2015 Konkrete Zahlen zum Aufbläh-Effekt von JS-Transpilern. CSS Variables: Why Should You Care? Kurzer Überblick. Anlass: demnächst auch in Chrome! Let’s Encrypt Smart Renew.sh Damit das Zertifikat auch in Zukunft schön knackig und frisch bleibt. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Hans, Peter und Rodney hatten erst keine so richtig interessanten Themen zur Hand, doch als die Podcast-Vorbesprechung in eine Diskussion über JavaScript-Tools versank, war klar, was zu tun ist… Schaunotizen [00:00:22] JavaScript-Tools Eine mäandernde Debatte über die Vor- und Nachteile von Tools wie TypeScript und Flow, den epischen Kampf zwischen Webpack und Rollup (mit Tree Shaking, vergleiche Revision 248), Oldie-Tools wie dem Closure Compiler, RequireJS, Backbone.js und Marionette.js und den Schmerzen, die ein alter Web-Stack so mit sich bringt. [00:42:01] Keine Schaunotizen cq-prolyfill Ein Container-Query-Prolyfill für die Risikofreudigen. Shippable Leichtgewichtiges CI-Tool. Angular 2 Master Class in Düsseldorf Wenn Schepp das empfiehlt, muss es gut sein! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Die Revision 251 ist auch wieder hochkarätig besetzt: Wir haben uns Malte Ubl von Google eingeladen um über AMP zu sprechen und uns erklären zu lassen, was es mit diesem Projekt auf sich hat. Schaunotizen [00:01:11] AMP Um besser zu verstehen, was es mit Googles Projekt AMP auf sich hat, haben wir uns Malte Ubl, den Projektleiter mal eingeladen und uns erklären lassen, worum es geht. Maltes Artikel, warum AMP schnell ist. Ein weiterer Artikel zum Thema AMP ist hier zu finden. Ein WordPress Plugin gibt es auch. [00:43:20] 2016 will be the year of concurrency on the web WebWorker sind das neue heiße Ding und werden 2016 einen starken Aufschwung erleben, meint Malte. Wir unterhalten uns darüber, wie wir mit der Parallelität im Web umgehen. [00:55:31] Keine Schaunotizen Understand promises before you start using async/await Dieser Artikel hilft, erst mal Promises zu verstehen, bevor man sich mit weiterer Asynchronität in ES2016 beschäftigt. JavaScript web apps considered valuable Ein Statement zum Thema JavaScript Applikationen. Arialinter Arialinter ist ein Tool, dass die Verwendung von Aria-Attributen überprüft. Cycle.js Fundamentals – Course by @andrestaltz Ein Video-Kurs zum Thema Cycle.js und Reactive Programming. How to make your web app installable Wer wissen möchte, was man tuen muss um Websites auf Smartphones app-ähnlich zu installieren, sollte diesen Artikel lesen. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

For our 250th episode, we managed to get our greedy hands on no one less than Bruce Lawson from Opera. Having barely returned from a trip to Asia and still dizzy from his jetlag, we managed to extract a whole bunch of classified information on CSS Houdini out of him (also thanks to our German interview style). And a little bit more as well: Show Notes [00:02:01] Safari 9.1 We talked about the new Safari version, what features it brings, and how it looks like it’s the first installment of a new rapid release cycle. [00:12:13] The CSS Houdini Project Bruce told us what the purpose of CSS Houdini is, how at came to be, which parts it consists of, and when to expect first experiments shipping to us in a browser (maybe this year already!). [00:37:50] Subgrids Considered Essential Prompted by a blog post from Eric Meyer we discussed the current CSS Grids spec and how it is badly lacking a subgrids feature. [00:51:18] Links The web accessibility basics Accessibility can never be overly discussed. Marco wrote a good roundup on how do accessibility basics right, and he also takes a glimpse at a few more advanced things. Simple standalone toggletip widget pattern Likewise, Steve Faulkner from the Partiello Group showcases a prototype for an accessible info tooltip widget. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Das ist doch alles kaputt. Entweder sind’s die eigenen Webseiten, die sich partout gegen Wissen und Gewissen wehren, oder gar ganze Dienste, die einem das Blaue vom Himmel für wenig bis gar kein Geld versprechen. Peter, Hans, Anselm und Stefan debattieren über „Gewollt Böse“. Schaunotizen [00:00:26] On Accessibility and the Lack of Proper HTML Was bringt sauberes HTML wenn ein hingeschleudertes DIV ebenso funktioniert und dem gestreßten Webentwickler einiges an Nerven spart. Ja, sogar die Deadline einhalten lässt. Wie sieht der Gute Wille aus, und wie die bittere Realität. Was bringt es, Qualität in seinen Code bringen, wenn es der Benutzer am Ende sowieso nicht sieht. Wir nehmen Ian Devlins Artikel und den von Michiel Bijl als Anlass für die Diskussion. [00:44:36] Choose Your Own HTTPS Dienste wie Cloudflare versprechen HTTPS, HTTP/2, ein CDN, Super Caching und etliche andere Services, die Webseiten schneller, robuster und sicherer machen. Das alles zum Nulltarif. Das es nichts im Leben umsonst gibt, gibt’s natürlich einen Haken. Anselm klärt auf und zeigt die bittere Realität. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Mit Dr. Axel Rauschmayer als Gast haben wir das virtuelle Working Draft Studio kurzerhand in ein ECMAScript-Sprechzimmer umgewandelt. Schaunotizen [00:02:50] ECMAScript 6/7/2015/2016 Axel ist vor allem für seine umfassenden Forschungen zu den neuen Sprachstandards für JavaScript bekannt. In der Sprechstunde nehmen wir sämtliche neuen Sprachfeatures auseinander, reden über syntaktischen Zucker, neue Konzepte und Implementierungen. Außerdem gibt es noch folgendes: Mixins zur Mehrfachvererbung in JavaScript Generator-basierender Flow Control mit co Infos zum TC39 Prozess Aktuelle ECMAScript proposals und ihre Stufe Infos zum TC39 Prozess von Axel selbst Dieses Beispiel, das im Zusammenhang mit Destructuring und Iterables genannt wird: let arr = ['a', 'b', 'c']; for (let [k,v] of arr.entries()) { console.log(`key = ${k}, value = ${v}`); } // Output: // key = 0, value = a // key = 1, value = b // key = 2, value = c Außerdem sprechen wir über das kommende ECMAScript 7, JavaScript Module, und warum die umstrittensten Sachen wie Klassen gleichzeitig zu den wichtigsten fürs JavaScript Ökosystem gehören. Für weitere Informationen empfehlen wir das ECMAScript 6 Buch sowie das Doctor’s Diary. [00:39:54] RollupJS RollupJS ist der neueste Schrei im Modul-Bundling. Hat aber auch einen Grund. Mit ECMAScript 6 Modulen und Technologien wie Tree Shaking kann er etwas, dass bisherige Modulbundler sträflich vernachlässigten: Nur das ins Bundle schmeissen, das man auch wirklich braucht. Der Doktor klärt auf. Auch hier und hier. [01:03:20] Keine Schaunotizen CDNs Rodney kennt eine Menge CDNs, wo JavaScript Developer ihre Bibliotheken gut verteilen können: RawGit (alles von GitHub) BowerCDN (alles von Bower) BrowserifyCDN (alles von NPM) cdnjs jsDelivr TL:DR; Man Pages Wenn Unix manuals zu geschwätzig sind, kommt man mit tldr schnell zu den Beispielen. Do I Use Node Tool, dass dir sagt ob du CSS Features verwendest, die deine zu unterstützenden Browser vielleicht gar nicht können. Chrome CPU Throttling Seit neuestem kann man in den Chrome (Canary) Dev Tools auch die CPU Leistung drosseln. Exploring ES6 Das ECMAScript 6 Buch des Doktors. Setting up ES6 Ein Addon zum vorigen Buch, das sich ums Tool-Setup kümmert. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Zum Jahresabschluss holten wir uns mal wieder den Kahlil ins Haus und besprachen mit ihm das Konzept der reaktiven funktionalen Programmierung anhand der JavaScript-Frameworks cycle.js, Rx und Bacon.js. Schaunotizen [00:00:13] Reaktive funktionale Programmierung Reactive Extensions Cycle.js Bacon.js Observables: Collections auf einer Zeitleiste zur Datentransformation Kahlil: „Es ist wie Rohre legen“ Talk zu Cycle: What if the user was a function? Slides zu Bacon: Functional Reactive Programming and Bacon.js MVI-Pattern, Komponenten, React Grundlagen funktionaler Programmierung [01:14:37] Keine Schaunotizen postcss-bem-linter A BEM linter for postcss stylelint A mighty, modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets. Descriptive Podcast zum Thema „Programmer Origin Stories“ Reactive „A podcast in which we merge, filter, scan and map streams of thoughts and talk about software engineering, culture, and technology.“ Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/