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 336: DSGVO

13. April 2018 | 3 Kommentare

Für alle Entwickler, die mit personenbezogenen Daten arbeiten ist der 25. Mai 2018 ein spezielles Datum. Eine Richtlinie der EU, welche aktuell in vielen Firmen kurz vor Frist behandelt werden muss, erhält an diesem Tag ohne Wenn und Aber ihre Wirksamkeit: die Datenschutzgrundverordnung, kurz DSGVO oder englisch GDPR (General Data Protection Regulation).

Da dieses Thema so präsent ist, haben wir uns drei Experten zum Thema eingeladen:

Schaunotizen

[00:03:40] DSGVO
Die Datenschutzgrundverordnung birgt einige Herausforderungen für Entwickler und IT Projektarbeiter. Wir beleuchten diese und unterhalten uns über UX-Herausforderungen wie das Cookie-Overlay und Doppel-Opt-In, sowie das Löschen von nutzerspezifischen Daten in komplexen Systemen, die Behandlung von Cookies, LocalStorage und anderen Client-seitigen Speichermöglichkeiten.
Es stellt sich heraus, dass das alles ganz schön komplex ist und die Gesetzgebung noch nicht eindeutig: Es fehlt die Auslegung der Judikative, die in den nächsten Jahren Klarheit schaffen wird.

[01:24:00] Keine Schaunotizen

Workshop
Die Gäste organisieren einen weiteren Workshop im Umfeld der Beyond Tellerrand Konferenz in Düsseldorf. Dieser findet am 9. Mai 2018 statt. Für alle Interessierten: Es gibt noch Tickets.

Revision 335: EME? CDM? DRM? CENC? IDK!

13. April 2018 | Keine Kommentare

Anselm, Hans und Rodney lassen sich von Sebastian Golasch alles rund um DRM (Digital Rights Management, auch Dumb Restrictions Mania) erklären. Sebastian wollte eigentlich nur Netflix in Kodi zum Laufen bringen. Wir stellen wieder einmal fest: Kaninchenlöcher können ganz schön tief sein…

Schaunotizen

[00:02:00] Web Video DRM
Ein epischer Monolog, gelegentlich unterbrochen von Fragen und Halbwissen, entfaltet sich, im Zuge dessen folgende Stichworte eine Rolle spielen:

Revision 334: Typographie im Web

1. April 2018 | Keine Kommentare

Nachdem sich kurzfristig krankheitsbedingt eine kleine Moderatoren-Knappheit eingestellt hat, konnten wir glücklicherweise einen tollen Gast für die Sendung gewinnen:
Oliver Schöndorfer (Twitter), seines Zeichens Designer und Typographie-Liebhaber erklärt uns den aktuellen Horizont der Web-Typographie.

Schaunotizen

[00:08:33] Web-Typographie
Die Verwendung von Schriftarten auf Webseiten, die über die Standart-Schriften hinaus geht, ist sehr weit verbreitet. Oliver erklärt uns, wie man die Schriften aus Design-Perspektive richtig verwendet und was dabei zu beachten ist. Auch die technische Seite beleuchten wir.
Hier einige weiterführende Links zum Thema:

[00:51:50] Variable Fonts
Ein Thema das uns in der Zukunft im Bezug auf Webfonts sicher noch stark beschäftigen wird sind Variable Fonts. Diese variablen Schriften bieten unglaublich viele Möglichkeiten um Schriftschnitte einer einzigen Schriftart performant ins Web zu bringen.

Keine Schaunotizen

Revision 333: Webcompat und Open Source Arbeit

30. März 2018 | Keine Kommentare

Zur Revision 333 haben wir uns Ola Gasidlo eingeladen und über Themen gesprochen, die sie bewegen. Ola arbeitet bei Mozilla vor allem am Projekt Webcompat, das auf der Website als „Bug reporting for the internet“ beschrieben wird.

Schaunotizen

[00:00:30] Webcompat
Ola erklärt uns, was es mit Webcompat auf sich hat und wie sie versucht mit ihrer Arbeit gemeinsam mit ihren Kollegen dazu beizutragen, das Internet als Ganzes zu verbessern. Die Platform Webcompat funktioniert wie ein Bugtracker für das gesamte Web. Webcompat macht es für Entwicklerinnen und Entwickler und andere „Webworker“ einfach Bugs, die in Browsern oder auf Webseiten auffallen, zu reporten. Die Experten des Teams kümmern sich dann um die Nachbearbeitung und das Nachhalten des Bugs bei den entsprechenden Unternehmen. Wie genau das funktioniert wissen nun spätestens nach dem Interview alle Zuhörenden.
[00:14:35] Open Source Arbeit
Durch ihre Arbeit an einem vergangenen Projekt ist Ola im Open Source Bereich sehr aktiv. Wir unterhalten uns darüber, wie man zu Open Source Projekten kommt, welche Verantwortung dies mit sich bringt, über ihre Arbeit mit der Community und vieles mehr. Für alle Interessierten gibt es die Open Tech School, Your First PR und den Open Source Friday. Für die Open Tech School in Dortmund ist Madeleine eine Ansprechpartnerin.

Revision 332: Die V8 JavaScript Engine

26. März 2018 | 1 Kommentar

Diese Revision hatten wir Benedikt Meurer (Web, Twitter, Github), seines Zeichens Tech Lead bei V8, zu Gast.

Schaunotizen

[00:00:55] Die V8 JavaScript Engine
Benedikt erzählt uns, was sich in V8 seit Revision 8 und der Einführung von Crankshaft getan hat. Eigentlich ist kein Stein auf dem anderen geblieben. Nach einem kleinen Überblick über optimierende Compiler allgemein und JS-JITs in Chrome klärt uns Benedikt über die zahlreichen Limitierungen von Crankshaft auf. Diese spielen im aktuellen Chrome mit Ignition als Bytecode-Generator und TurboFan als Crankshaft-Ersatz keine Rolle mehr. Jenseits Chrome-spezifischer Details sprechen wir über Array-Subclassing (sollte man sein lassen), die Zahl 11 (in Spinal Tap und im Aufzug) und Micro-Benchmarks vs. Real-World-Workloads. Als wichtigste Performance-Best-Practices kristallisieren sich Captain-Obvious-Erkenntnisse wie „Ideomatic JS schreiben“ und „Objekte monomorph halten“ heraus. Gegen Ende sprechen wie über die Performance-Charakteristika von neue ES-Datenstrukturen, Modulen, Workersn, const und modernen ES-Standards allgemein und kommen auch auf die Top 3 Performance-Irrtümer zu sprechen.

Revision 331: Serverless

2. März 2018 | 2 Kommentare

Die neuste Sendung steht ganz im Zeichen von Serverless-Architektur und der Thematik außen herum. Wir haben uns zwei Gäste zum Thema eingeladen, die sich auskennen: Nik Graf und Philipp Müns. Nik und Philipp arbeiten gemeinsam an einem Open-Source Serverless-Framework.

Schaunotizen

[00:02:29] Serverless
Wir sprechen über Serverless-Architekturen, wie sie von Martin Fowler beschrieben werden, definieren was Serverless bedeutet und wie es sich von einer „klassischen“ Container-basierten Architektur unterscheidet. Neben den Fallstricken und Vorteilen, sprechen wir auch über generelle Funktionalitäten, die speziell im Bereich Serverless zu beachten sind. Darüberhinaus schneiden wir auch das Thema Event-Driven-Architecture an.

Einige Links und Lösungen, die wir erwähnten:

  • Serverless Starting-Point: Go Lambda
  • Serverless Quickstart-Guide und Beispiele
  • Video: Nik Graf zum Thema REST API Bau mit Serverless in Node.js und mit Datenbank-Anbindung
  • Amazon Lamda Edge: quasi Functions im CDN
  • Amazon Fargate (Container in der Cloud)
  • Amazon Aurora (SQL Database as a Function)
  • V8 Snapshots zur Reduktion der Cold Start Zeiten von Node.js Functions

In diesem Zusammenhang sei auch noch einmal die Revision 314 mit Golo Roden erwähnt, die sich mit den architektonischen Grundlagen von Domain Driven Development und event-basierten Architekturen beschäftigt.

[01:27:09] Keine Schaunotizen

Reason Conf
Vom 11. – 13. Mai findet in Wien die erste ReasonML Konferenz statt.
Workshop „Datenschutz im Web — Fallstricke, Strategien, Risikomanagement, DSGVO“
Ab Mai (2018) ändert sich das Datenschutz-Recht in Europa. Wer mehr darüber erfahren möchte, sollte am Workshop in Nürnberg am 05. März teilnehmen.
Let’s make multi-colored icons with SVG symbols and CSS variables
Multiple Farben in SVG-Icons.

Revision 330: Geolocation API und das HTML Dialog-Element

28. Februar 2018 | Keine Kommentare

Diesmal haben wir ohne Gast in einer kompakten Ausgabe mit dem Schepp, Rodney und Hans über die Problematik der Geolocation API und das Dialog-Element gesprochen.

Schaunotizen

[00:00:18] Geolocation API
Hans beschäftigte sich in der näheren Vergangenheit mit der Usability der Geolocation API. Wir unterhalten uns über die notwendigen Schritte um die Adresse eines Nutzers auszulesen, sofern diese/r zustimmt. In diesem Kontext sprechen wir auch über die Usability und User Experience der Web Permission API.
[00:17:40] HTML Dialog-Element
Mit Dialogen auf Webseiten ist das so eine Sache: Als Entwickler hat man ziemlich viel zutun, um ein Dialog-Element auch aus Accessibility-Sicht einigermaßen benutzbar zu machen. Nun soll dies durch das bereits lange Zeit in der Spezifikation befindliche native HTML-Element <dialog> verbessert werden. Wird das gelingen? Wo liegen die Probleme mit dem Element? Rodney klärt auf.

Keine Links

Revision 329: Actor Model und CSS Paint API

18. Februar 2018 | Kommentare deaktiviert für Revision 329: Actor Model und CSS Paint API

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 | Kommentare deaktiviert für Revision 327: UI-Engineering

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