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 329: Actor Model und CSS Paint API

18. Februar 2018 | Keine Kommentare

Schepp, Hans, Anselm und Peter durften diesmal Surma (Web, Twitter) begrüßen und sich mit ihm einmal quer durch den zukünftigen Web-Stack philosophieren.

[00:01:00] News

Using page speed in mobile search ranking
Es ist offiziell: Ladegeschwindigkeit wirkt sich ab Juli auf die Suchaschinen-Platzierung aus.

Schaunotizen

[00:02:37] Performance und das Actor Model
Inspiriert von Sprachen wie Erlang, Elixir und Pony hat sich Surma mit dem Actor Model beschäftigt und das Ergebnis seiner Überlegungen auch aufgeschrieben. Actor sind Prozesse, die lokalen State haben und über Messages mit anderen Actors kommunizieren können. Im Browser ließe sich dieses Konzept z.B. mit Web Workers umsetzen – da ein Worker exakt einen OS-Thread in Anspruch nimmt, bietet es sich an, für den korrekt dimensionierten Worker-Pool die Anzahl der Cores im Rechner mit navigator.hardware_concurrency zu ermitteln. Die Kommunikation ließe sich mit einer Library wie Comlink umsetzen und der Main-Thread könnte zu einem reinen UI-Rendering-Thread herabgestuft werden. Außerdem sprechen wir noch über hyperHTML, litHTML, Service Worker, was Spiele-Entwickler für ein Startup tun könnten und gleiten langsam in das Thema Houdini über.
[00:48:34] Houdini und die CSS Paint API
Neu in Chrome (Version 65) ist jetzt eine erste Implementierung der CSS Paint API. Dieses erste Feature aus dem Houdini-Projekt (erklärt von Bruce Lawson in Revision 250) ermöglicht DIY-CSS-Painting – Surma erklärt die Details. Außerdem kommen wir noch auf den Canvas Super Cookie zu sprechen, der in Revision 319 Thema war.

Revision 328: Web Components

6. Februar 2018 | 2 Kommentare

In dieser Revision war Working-Draft-Alumnus Kahlil (Webseite, Twitter, Podcast) zu Gast um mit Hans und Peter über Web Components zu plaudern.

[00:00:45] News

Service Worker landen in Safari und Edge
Jeweils in den neuen Preview-Builds.

Schaunotizen

[00:01:08] Web Components
Inspiriert durch einen Artikel von Mikeal Rogers berichtet Kahlil von seiner Begeisterung für Web Components. Neben konkreten Webstandards wie Custom Elements, Shadow DOM, Template-Elementen und HTML Imports (RIP) und Tools im Stile von Polymer und dem CDN unpkg treibt uns auch die Frage nach dem Warum und den möglichen Vorteilen von Web Components um. Während Kahlil in Web Components, kombiniert mit modernen Template-Libraries (lit-html, hyperHTML/viperHTML) bzw. Data Binding für Template Elemente (wie in Revision 319 besprochen) eine Alternative zu bzw. neue Basis für Frontend-JS-Frameworks sieht – zu nennen wären neben Polymer X-Tag und Stencil – ist Peter weniger euphorisch. Die durch Web Components hergestellte Interoperabilität von Komponenten kann ein großes Plus sein (EA-Erfahrungsbericht bei der Polymer-Conf), doch wie oft sich das wirklich positiv zu Buche schlägt, bleibt dahingestellt. Peter setzt selbst Web Components ein (html-import, scoped-style), sieht sie jedoch nur als eine für sehr bestimmte Anwendungsfälle brauchbare HTML-Abstraktion, quasi das jQuery-Plugin 2.0.

[01:02:48] Keine Schaunotizen

Native form validation
PPK wendet sich gewohnter Detailversessenheit der Funktionsweise und der Browserunterstützung von HTML5-Formularvalidierung zu.
Reactive Podcast
Kahlils Podcast: „Three friends talk about tech, culture and software development“

Revision 327: UI-Engineering

31. Januar 2018 | Keine Kommentare

Nachdem wir das Thema „Zusammenarbeit von Designern und Entwicklern“ in Revision 312 schon besprochen hatten legen wir diesmal noch eine Schippe drauf. Unsere Gäste Dennis Reimann (Webseite, Twitter) und Jan Persiel (Webseite, Twitter) nehmen sich dieses Problems auf ihre eigene Weise an und berichten uns von ihrem Kampf für interdisziplinäres UI-Engineering.

Schaunotizen

[00:02:00] Zusammenarbeit von Designern und Entwicklern
Softwareentwickler Dennis Reimann und Designer Jan Persiel sind die Köpfe hinter uiengineering.de, einer Initiative für die Verbesserung der Zusammenarbeit zwischen Design und Entwicklung. Unter dem Schlagwort #uiengineering werden Best Practices verbreitet, gegen die Trennung der Gewerke agitiert und interdisziplinäre Ansätze für UI-Engineering gefordert. Dennis und Jan plaudern über die Grundlagen von gutem UI-Engineering, die Arbeit in Greenfield- und Brownfield-Projekten, über Prototyping (mit Papier und Whiteboard), den Umgang mit besonders schwierigen Fällen (Personen und Unternehmen), den ROI von UI-Engineering (mit Trivago als einem von vielen Beispielen) Style Tiles, Tools und die Umsetzung von UI-Engineering in Agenturarbeit und Produktentwicklung. Und fällt noch der Name UIengine, das Ein Werkzeug zum Erzeugen und Verwalten eines Design Systems ist und von Jan und Dennis entwickelt wurde.

[01:15:00] Keine Schaunotizen

I’m harvesting credit card numbers and passwords from your site. Here’s how.
Spoiler: npm install

Revision 326: TYPO3 Performance

22. Januar 2018 | 3 Kommentare

Anselm und Stefan begrüßen heute TYPO3 Experten Marcus Schwemer um den Performance-Krücken von TYPO3 auf die Spur zu kommen.

Schaunotizen

[00:01:10] TYPO3 Performance
TYPO3 Performanceprobleme sind wie Oger: Sie haben Schichten, und es wachsen weiße Härchen aus ihnen wenn man sie zu lange in der Sonne legt. Deshalb zwiebelt Marcus die Probleme in sieben Schichten auf und erklärt mit Erfahrung und ganzheitlichem Blick, was man alles tun kann:

  1. Auslieferung: TYPO3 Kniffe für das ausliefern der Assets
  2. Frontend: Vieles, für das man Frontend Worklfows braucht, geht auch mit einer Prise TypoScript
  3. TYPO3 Cache: Die umfangreiche Cache-API und die damit verbundenen Cache-Stores für Zwischenergebnisse von Teilbereichen
  4. Extensions: Kein TYPO3 Projekt ohne Erweiterungen. Die bringen wieder einen ganzen Sack an eigenen Performanceproblemen mit
  5. Das CMS an sich: Mal eine Woche lang CMS aktualisieren? Zahlt sich aus!
  6. Services: PHP7.x ist nicht nur superschnell, sondern auch Basis für TYPO3 8. NGINX soll auch ganz gut sein
  7. Hardware: Virtualisierung macht flexible Architekturen möglich.

Nachdem aller guten Schichten sieben sind, gibt es nach dem Rundumschlag noch den generellen Hinweis: Der Teufel steckt im Detail. Diese und weitere Tipps gibt es auch auf Marcus‘ Blog.

Revision 325: Die Web Audio API

14. Januar 2018 | Keine Kommentare

Dieses Mal hatten wir Jan Krutisch zu Gast, der mit uns einen Ausflug in die Welt der Synthesizer und Audioeffekte unternahm. Thema war nämlich die Web Audio API, mit der Jan das Glück hat, sich immer wieder beschäftigen zu dürfen, etwa in Form des liv3c0ders oder der Novation Circuit Components.

Schaunotizen

[00:02:53] Die Web Audio API
Wir lernen, dass die Web Audio API einem Fließband-System ähnelt: Gespeist wird es aus einer Ton-Quelle (MP3 oder Oszillator), die im Folgenden durch beliebige viele angestöpselte Modifikator-Stationen verändert wird, bevor das Resultat dann ausgegeben wird. Im einfachsten Fall kommt dabei Kunst heraus, im besten Fall ein Produkt für den Musikbereich, wie Ableton Learning Music oder Loop Drop. Folgende verlinkenswerte Stichworte fielen im Verlauf unseres Gesprächs:

Revision 324: PHP

31. Dezember 2017 | 2 Kommentare

Anselm, Hans, Stefan und Schepp haben sich heute Hans-Christian Otto eingeladen, um über das oft missverstandene und viel Spott ausgesetztem PHP zu reden.

Schaunotizen

[00:02:39] PHP
„Ich bin ja eigentlich PHP Entwickler“ ist der Running Gag von Christian bei JavaScript Konferenzen1. Sorgt für Lacher, ist aber durchaus ernst gemeint. Nutzen ja auch viele. Sehr viele. Wir reden über die großen Vorteile, Vorurteile, Nachteile und Nachwehen diverser Versionen, Syntaxen, APIs und Frameworks von PHP. Zu Sprache kommen Symfony, Laravel (samt Laracasts), OPCache, HHVM, PHP7 und Phar. Auch hochexperimentelles ☢️ wie ReactPHP kommt zur Sprache.

Wer schöneres PHP schreiben will, schaut sich den PHP Mess Detector, den Qafoo Blog, das PHP Design Patterns Buch und vor allem die PSRs an.

[01:07:00] Keine Schaunotizen

24 Accessibility
A11Y Advent(s)kalender. Yay!

Iteration 323: (Asynchrone) Iteratoren

26. Dezember 2017 | Kommentare deaktiviert für Iteration 323: (Asynchrone) Iteratoren

Hans und Peter sprachen diesmal über SmartSteckdosen mit Wifi, den Spritverbrauch von 4er-BMW und YouPorn. Aufgezeichnet haben Sie aber nur die Diskussion über (asynchrone) Iteratoren in modernem JS.

Schaunotizen

[00:00:14] (Asynchrone) Iteratoren in JavaScript
Das Iterator-Protokoll sorgt dafür, dass allerlei unterschiedliche JS-Objekte wie Maps, Sets, Arrays, Arguments und jQuery-Objekten mit Standard-Sprachkonstrukten wie for-of-Schleifen funktionieren. Schlüsseltechnologie für das Iterator-Protokoll sind Symbols, die String-basierte Protokolle wie __proto__ ersetzen. Das Iterator-Protokoll ist auch die Basis für Asynchrone Funktionen. Die vergleichsweise neue async/await-Syntax macht das direkte Arbeiten mit Callbacks und Promises überflüssig. Neu geplant ist jetzt das Proposal für asynchrone Iteration für z.B. die Arbeit mit Streams. Teil des Proposals ist das neue for-await-of-Statement speziell für asynchrone Iteratoren. Das Propsal ist im ECMAScript-Standardisierungs-Prozess auf Stage 3 angekommen und wird auch bereits von einem Babel-Plugin unterstützt.

Revision 322: Colloq

11. Dezember 2017 | Kommentare deaktiviert für Revision 322: Colloq

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 | Kommentare deaktiviert für Revision 320: API- und Load-Testing in der Cloud

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.