Working Draft

Wöchentlicher News-Podcast für Webdesigner und -entwickler

Spenden für Soundqualität!

Unsere Aufnahmen werden optimiert mit Auphonic.
Flattern oder direkt bei Auphonic spenden.

Revision 253 – CMS, CMS, CMS!

28. Februar 2016 | 12 Kommentare

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.

Revision 252: Yo Dawg I heard you like JavaScript so I put a transpiler into your MVC so you can type check while you tree shake

7. Februar 2016 | 2 Kommentare

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!

Revision 251: Googles AMP und die Zukunft der Parallelität

30. Januar 2016 | Kommentare deaktiviert für Revision 251: Googles AMP und die Zukunft der Parallelität

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.

Revision 250: Achtung Baby!

26. Januar 2016 | 3 Kommentare

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.

Revision 249: Sauberes HTML, Gratis CDNs

17. Januar 2016 | 5 Kommentare

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.

Revision 248: ECMAScript 6 und 7

10. Januar 2016 | 1 Kommentar

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:

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:

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.

Revision 247: Reaktive funktionale Programmierung

31. Dezember 2015 | 5 Kommentare

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

[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.“

Revision 246: Der Blick in die Glaskugel

25. Dezember 2015 | 2 Kommentare

Da sich das Jahr dem Ende zuneigt, haben sich Rodney und Schepp die Glaskugel geschnappt und wagen ein paar Prognosen für 2016: Welche Webtechnologien werden massenfähig? Welches Framework spielt eine gewichtige Rolle? Mit welcher neuen Technologie dürfen wir herumspielen?

[00:00:14] Unsere Prognosen für 2016

[01:05:03] Keine Schaunotizen

The “Blur Up” Technique for Loading Background Images
Schöne Art und Weise, niedrigaufgelöste weichgezeichnete Bilder als Platzhalter für die höher aufgelösten zu verwenden

Revision 245: Web Components und Links

19. Dezember 2015 | Kommentare deaktiviert für Revision 245: Web Components und Links

Schepp, Stefan und Peter debattierten Web Components und verteilten die allwöchentliche Ladung Links.

Schaunotizen

[00:00:10] Web Components und Gremlin.js
Angeregt durch das Erscheinen der Minimal-Web-Components-Library Gremlin.js (nicht zu verwechseln mit dem Test-Tool Gremlins.js) plaudern wir über Web Components allgemein. Neben Web Components in unserem Alltag (nicht existent) geht es um Custom Elements, WAI-ARIA, Mutation Observers, und
Handlebars.js sowie die möglichen Alternativ-Libraries X-Tag und Polymer. Am Ende stellen wir in Frage, ob für man für den Funktionsumfang von Gremlin.js überhaupt Gremlin.js selbst braucht.

[00:37:20] Keine Schaunotizen

Zwei Flexbox-Links
Flexbox Grid Finesse gibt Tipps für den Einsatz von Flexbox für Grid-Layouts. Flexbox’s Best-Kept Secret zeigt, was man im Flexbox-Kontext mit Auto-Margins anstellen kann.
Taking Let’s Encrypt for a Spin
Tim Kadlec beschreibt, wie einfach es ist, Let’s encrypt zu verwenden.
Optimizing performance of multi-tier web applications using HTTP/2 push
Das Push-Feature von HTTP/2 erklärt.
HTTP/2 is here! Goodbye SPDY? Not quite yet
Warum SPDY auch in einer Welt mit HTTP/2 erst mal noch wichtig ist.

Revision 244: Accessibility Deep Dive und ally.js

4. Dezember 2015 | 1 Kommentar

Zur Feierlichkeit des ally.js Release haben sich Rodney, Anselm und Hans niemand geringeren als Marco Zehe eingeladen, der für Mozilla im Bereich Accessibility arbeitet.

Schaunotizen

[00:01:44] Marcos iPhone Accessibility Erfahrungen
Etwas abseits vom Web-Thema lassen wir uns von Marco erzählen, warum iPhones solch eine tolle Sache für Blinde sind und wie er sich damit schnell und einfach selbst in fremden Regionen zurechtfinden kann.
[00:17:42] What even is a table? A quick look at Accessibility APIs
Wir nehmen dann einen Talk als Anlass, über die Zugänglichkeit von Tabellen zu sprechen und schweifen ab in generelle Diskussionen über Semantik. Wer aber zum Beispiel mit responsive Tables arbeiten möchte, der kann mit einigen Tricks arbeiten und bewusst eine div-Suppe kreieren, die dann mit aria-roles ausgestattet wird, um semantisch wieder zur Tabelle zu werden. Wichtig ist allerdings, dass man abschließend ein aria-readonly="true" Attribut setzt, denn sonst wäre die Tabelle als bearbeitbar gekennzeichnet.
[00:47:30] ally.js
Unser Rodney hat sich 14 Monate lang damit auseinandergesetzt, wie Accessibility in verschiedenen Browsern umgesetzt wird und eine Art jQuery für Barrierefreiheit gebaut. In diesem kleinen Tutorial kannst du lernen, wie du einen accessible Dialog bauen kannst. Wir besprechen die Probleme damit, dass es viel zu tun gibt und wir hoffen, dass die Library in vielen Projekten zukünftig zu finden sein wird.
[01:19:55] Abschließende Accessibility Tipps
Abschließend wollte Anselm von Rodney und Marco noch ein paar kleine Alltags-Tipps wissen, die jeder von uns umsetzen kann. Rodney beschreibt seinen Ansatz von Accessibility aus Eigennutz durch Tastaturnutzung, Marco erklärt, warum ein leeres alt="" oft wichtiger ist als gar keins, dass Kontraste wichtig sind und wie ärgerlich es ist, wenn Seiten pinch-to-zoom deaktivieren.