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.

Sponsoren gesucht!

Als Podcast versuchen wir die Qualität der Aufnahmen hoch zu halten. Dafür verwenden wir Tools, die nicht kostenlos sind. Auch unser Aufnahme-Equipment kostet Geld.

Mit rund 15.000 Downloads pro Folge im Schnitt haben wir Herausforderungen im Hosting zu bewältigen, vor allem der Traffic ist recht hoch.

Um diese Kosten decken zu können, suchen wir Sponsoren. Wenn ihr unseren Podcast gut findest, sprecht mit euren Chefs. Bei Interesse, kontaktiert uns per E-Mail: sponsoring@workingdraft.de.

Revision 322: Colloq

11. Dezember 2017 | Keine Kommentare

Linz, München, Köln, Lissabon, Hongkong. Der wohl verteilteste Working Draft bis heute dreht sich um Dinge die entstehen, wenn man gemeinsam an einem Ort ist. So haben Holger Bartel, Tobias Tom und unser hauseigener Anselm eines schönen Tages in Düsseldorf beschlossen, die Event Plattform Colloq ins Leben zu rufen. Wir lauschen der Motivation und lernen aus den Erfahrungen.

Schaunotizen

[00:00:00] Colloq
Wir erfahren von unserem internationalen Trio warum es etwas wie Colloq braucht, wie man ein solches Projekt ins Leben ruft und wie man sich von Datenfriedhöfen à la Lanyrd unterscheiden will. Dahinter stecken ein ausgeklügeltes Geschäftsmodell, viel Planung und ein unpopulärer, dafür wohl viel effizienterer Technologie-Stack aus PHP, eigenen Frameworks und ganz React-freiem JavaScript Code. Gehostet auf Digital Ocean und gecached bis dorthinaus präsentiert sich nicht nur eine gut bedienbare, sondern vor allem entscheidend flotte Plattform, die auch für Meetups taugt. Wie macht man das mit dem Zeitinvestment? Wir erfahren es in einer Projekt-Retrospektive.

Revision 321: HTTP/2 Server Push

10. Dezember 2017 | 1 Kommentar

Im Duett über die Tücken der modernen HTTP/2 Server. Mit Anselm und Stefan

[00:00:15] News

Colloq
Anselms Projekt zur Verbesserung der Event-Aufbereitung ist endlich da! Tolles Service für Teilnehmer und Gastgeber
Firefox Quantum
Der neue Firefox ist komplett anders unter der Haube, und dann auch noch sauschnell. Toller Rewrite der in die Jahre gekommenen Browserengine.

Schaunotizen

[00:04:50] HTTP/2 push is tougher than I thought
Jake Archibald kramt einen alten Artikel hoch und macht nochmal darauf aufmerksam, dass im HTTP/2 Land nicht alles heile ist. Anselm und Stefan teilen Erfahrungen und erläutern, warum es nicht mehr die Silberkugel für jedes Problem gibt. Außerdem erwähnen wir die beliebten HTTP/2 Server wie Caddy Server und die sehr fortgeschrittene Implementierung in Node.js

[00:30:12] Keine Schaunotizen

ComLink
Wrapper rund um postMessage() macht Kommunizieren einfacher.
Luxon
Das neue Moment.js mit fescher und moderner API.
Accessible React Apps
Macht eure React Apps barrierefrei. Der Artikel gibt Grundlagentipps und zeigt Tools.

Revision 320: API- und Load-Testing in der Cloud

2. Dezember 2017 | Keine Kommentare

Dieses mal hatten wir Lars Wolff von Stormforger zu Gast. Stormforger ist ein API- und Load-Testing-Tool, das uns auffiel, weil sich die Testszenarien per JavaScript beschreiben lassen. Darüber wollten wir mehr wissen…

Schaunotizen

[00:02:40] API- und Load-Testing mit Stormforger
Im Laufe unseres Gesprächs fielen diverse Dinge und Themen, die wir verlinken wollten, und Lars hat später noch ein paar mehr dazugepackt. Hier sind sie:

[01:00:01] Keine Schaunotizen

Cologne Web Performance Optimization Group
Das eine Meetup in Köln, in das Lars involviert ist…
AWS Cologne
…und das andere.

Revision 319: Templates, Super Cookies, Animationen

28. November 2017 | Keine Kommentare

Schepp, Hans, Peter und Stefan sprechen über mögliche Standards, Browserfeatures v.s. Privacy und dem ewigen Kreuz mit Animationen.

Schaunotizen

[00:00:16] HTML Template Instantiation
Ein Proposal möchte das gute alte Template-Element, das eigentlich nur ein inaktives DocumentFragment bereitstellt, zu einem logikfreien Template-System a la Handlebars aufmotzen. Wir vergleichen den Ansatz von Handlebars mit dem von Liquid o.Ä., sind uns uneins, ob man Template-Elemente im Angesicht von Template Litereals überhaupt braucht und überlegen, wie ob man fortgeschrittenere Konzepte wie Data Binding oder die Render-VM von Glimmer auch in einen Webstandard integrieren könnte. Am Ende ranten wir noch kurz darüber ab, dass Mobile Safari nichts mit FormData anzufangen weiß (eine Tatsache, die zwischenzeitlich zum Glück widerlegt werden konnte).
[00:21:06] Firefox takes a bite out of the canvas super cookie
Firefox schränkt aus Privacygründen ein Browser-Feature ein, was dem Schepp (der dieses Feature für harmlose Zwecke einsetzt) gar nicht schmeckt. Wir erörtern Fragen rund das Abfragen von Nutzer-Zustimmung für diverse delikate Browserfeatures (z.B. mit der Permissions API).
[00:33:02] anime.js und Animationen allgemein
Stefan empfiehlt eine Library für SVG-Animationen und lobpreist vor allem die anschauliche Dokumentation. Ohne viel Mühe lassen sich effektvolle Animationen basteln (mehr auf Codepen).Wir stellen trotz dieser Tollen Library einen Mangel an Standards und Go-To-Lösungen rund um Animationen fest.

[00:47:12] Keine Schaunotizen

Umar Hansa: A Modern Front-end Workflow
Beeindruckender Talk von der Fronteers Conference 2017.

Revision 318: Strukturiertes CSS

21. November 2017 | 6 Kommentare

Die neuste Revision haben wir gemeinsam mit Jens Grochtdreis aufgenommen. Als Ausgangspunkt haben wir sein Buch zum Thema Modulare Webentwicklung genommen, dass er in den letzten Jahren geschrieben hat.

Keine News

Schaunotizen

[00:00:54] Modulare Webentwicklung
Jens erklärt uns, was man unter Modularer Webentwicklung versteht. Er beschreibt, was seiner Meinung nach die effektivste Art und Weise der Webseiten-Entwicklung ist. Wir vergleichen aktuelle Entwicklungsmuster und sprechen über unsere eigenen Erfahrungen. Wir erwähnen auch Airbnbs Arbeiten zum Thema Living Styleguide.

[01:08:09] Keine Schaunotizen

Heml
Einfach saubere und responsive E-Mail-Layouts.
SkateJS
Eine JavaScript Library, um das Arbeiten mit Custom Elements im Browser zu vereinfachen.
Frontend-Checklist
Eine Checklist für alle Frontend-bezogenen Themen einer Website.
Snyk + Google Lighthouse = ❤
Googles Lighthouse „befragt“ nun Snyk bei einem Audit der Website und kann damit Security Vulnerabilities erkennen.
A Look at Bootstrap 4’s New Reset: Reboot.css
Reboot.css ist ein neues Reset.css, dass im Rahmen der Entwicklung von Bootstrap 4 entstanden ist.

Revision 317: Post-PostCSS

20. November 2017 | 1 Kommentar

Stefan, Hans und Schepp geben Erfahrungsberichte zu dem in Revision 224 zum ersten Mal vorgestellten PostCSS.

Schaunotizen

[00:00:17] PostCSS
PostCSS ist gleichzeitig wenig und auch vieles. Das Framework selbst bietet nicht mehr und nicht weniger als eine Möglichkeit CSS in einen Abstract Syntax Tree zu verwandeln, und das später wieder in CSS zu verwandeln. Erst die Plugins mit all den möglichen Transformationen machen PostCSS zu dem mächtigen Werkzeug, das es sein will. Und ab diesem Punkt scheiden sich die Geister. Während Schepp Präprozessoren-Features nur schwer zusammenstellen kann, Stefan die „Nutz das CSS der Zukunft“ Message mit fake news abstempelt, liebt Hans die Flexibilität und Einfachheit des Werkzeugs. Wir plaudern eine Stunde aus dem Nähkästchen und zeigen drei doch sehr unterschiedliche Erfahrungen.

[00:52:20] Keine Schaunotizen

The whole web at maximum FPS: How WebRender gets rid of jank
Firefox ist wieder schnell, und Lin Clark erklärt wieso.
Introducing OpenType Variable Fonts
Variable Fonts erlaubt viel Schnitt-Anpassung für wenig Datentransfer. In diesem Artikel wird erklärt wie das funktioniert.
Special session: OpenType
… ebenso in diesem Video.
Get the advantages of TypeScript without transpiling
TypeScript features kann man auch nutzen ohne sich die Sprache einzukaufen. Mit etwas JSDoc und Tooling wird erklärt wie.
RuhrJS Videos
Die RuhrJS Videos sind schon da! Tolle Konferenz mit interesannten Vorträgen.

Revision 316: Google Lighthouse

19. November 2017 | 2 Kommentare

Hans, Stefan und Schepp nahmen mal wieder einen Artikel als Anlass über ein umfassenderes Thema zu reden, was diesmal Google Lighthouse war.

Schaunotizen

[00:00:14] Google Lighthouse
Ein Artikel von Umar Hansa über Chromes Paint Timing API bringt uns auf die Idee, ein wenig über Googles Lighthouse zu plaudern. Lighthouse ist sowas wie das ultimative Website-Auditing-Tool, das Kriterien aus dem Bereich Progressive Web Apps, Performance, Barrierefreiheit und allgemein best-Practices unterstützt. Zudem werden Webseiten seit kurzem auch auf Sicherheitslücken in verwendeten JavaScript-Bibliotheken getestet. Damit löst es auch auch ein Stück weit die alten Google Pagespeed Insights ab. Als Hintergrund zu den sogenannten „passiven Eventlistenern“ verweist Schepp auf ein sehr interessantes Blogpost dazu im Edge Blog. Und warum externe Links besser als Attribut [rel="noopener"] verpasst bekommen sollten, das hat vor einiger Zeit Jake Archibald verbloggt.

[00:45:56] Keine Schaunotizen

PWA Checklist
Eine Checkliste von Dingen, die beim Bauen von Progressive Web Apps zu beachten sind.
wretch
Syntaktischer Zucker für die Fetch API.

Revision 315: React Lizenzänderung, abortable fetch

5. November 2017 | Keine Kommentare

Stefan und Anselm behandeln im Duett zwei News und schmücken Sie zum vollen Thema aus.

Schaunotizen

[00:00:30] React Lizenzänderung
Die toxische BSD+Patents Lizenz, wie ist sie entstanden, was sind die Probleme, und warum ändert Facebook jetzt alles. Wir erklären und n00ben in der großen Open Source Lizenzwelt herum.
[00:19:44] Abortable fetch
Stell dir vor du machst eine fesche API und jeder ist so „Prima, wie mach ich das jetzt wieder weg?“. Fetch-calls kann man im Firefox und bald auch in Edge und Chrome wieder abbrechen. Damit wird die schöne, neue Promise-basierte API zum vollwertigen XHR Ersatz.

[00:26:45] Keine Schaunotizen

The Miracle of Generators
Toller Talk von Bodil Stokke zum Thema ES Generatoren auf der Frontendconf.
Script’18
Stefans JavaScript Konferenz geht in die nächste Runde. Das Line-Up inkludiert Leute wie Simona Cotin, Phil Hawksworth, Charlie Gerard und den Vue.js Erfinder Evan You.

Revision 314: DDD, CQRS und WTF

20. Oktober 2017 | 3 Kommentare

Gast Golo Roden (Twitter, Github, Webseite) erleuchtet in dieser Revision Hans und Peter in Sachen Domain Driven Design sowie Command and Query Responsibility Seggregation. Aufgrund technischer Schwierigkeiten bei der Aufnahme, gibt es diesmal nur unseren Gast in hoher Audioqualität.

Schaunotizen

[00:01:21] DDD, CQRS, WTF
DDD (Domain Driven Design) ist ein Pattern zum Übersetzen von fachlichen Anforderungen in Software und versteht sich als Gegenentwurf zu CRUD. Anhand des Beispiels einer Urlaubsantragsverwaltung erklärt Golo, wie DDD funktioniert. Mit dem Label CQRS wird die Verteilung der Architektur auf zwei Datenbanken(eine für den Store, eine für denormalisierte View-Daten) beschrieben. Unterschiedliche Datenbanksysteme kommen für unterschiedliche Anforderungen (z.B. Postgres oder Apache Kafka als Event Store, MongoDB für Snapshots) zum Einsatz. Golo hat mit Wolkenkit auch ein eigenes Dual License-DDD-Framework (Docs, Slack).

Revision 313: Origin Trials

13. Oktober 2017 | Kommentare deaktiviert für Revision 313: Origin Trials

In dieser eher kurz geratenen Episode schauen Hans und Schepp sich das recht neue Konzept der Origin Trials an.

[00:00:16] News

Yarn 1.0
Yarn 1.0 ist raus und bietet neuerdings Workspaces.

Schaunotizen

[00:00:40] Origin Trials
Mit den Origin Trials setzt (zunächst) das Chrome-Team eine Idee um, über die wir vor zwei Jahren in einer Folge mit Jacob Rossi sprachen. Das Problem, das die Origin Trials lösen wollen, ist dass es für Browserhersteller bislang schwierig war, neue Features in der Breite zu testen, ohne dass Entwickler sie in ihrer unfertigen Form aufgreifen und damit Fakten für die Zukunft schaffen. Der Trend geht ja schon einige Zeit weg von vendor-prefixten Vorabversionen hin zu einem Feature-Flag-System. Das Problem am Feature-Flag-System ist jedoch, dass nur die Entwickler selbst etwas testen können, sie das Feature aber nicht an ihren Usern testen können. Das geht nun mit den Origin Trials. Bei diesen beantragt ein Seitenbesitzer, dass für die Besucher seiner Domain ein bestimmtes, derzeit verfügbares Vorab-Feature im Browser für eine begrenzte Zeit freigeschaltet wird. Das Feature kann also in der Breite getestet werden,
ohne sich dauerhaft festzusetzen.