Working Draft

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

Spenden für Soundqualität!

Unsere Aufnahmen werden optimiert mit Auphonic.
Dort könnt Ihr uns Processing-Time kaufen.

Alternativ findet Ihr uns jetzt auch auf Patreon:

Become a Patron!

Ihr sucht neue Kollegen? 🤔 Wir suchen Sponsoren!

Als Podcast versuchen wir die Qualität der Aufnahmen hoch zu halten. Dafür verwenden wir Equipment und Tools, die nicht kostenlos sind. Und jede Folge kostet Zeit: Aufnehmen, Schneiden und Shownotes schreiben, Gäste und Termine koordinieren.

Mit rund 15.000 Downloads pro Folge im Schnitt haben wir auch Herausforderungen im Hosting zu bewältigen.

Um diese Kosten decken zu können, suchen wir Sponsoren. Wir glauben, dass unser Podcast eine gute Plattform ist, um darüber gleichgesinnte Programmierkollegen als Verstärkung für Euer Team zu finden. Wenn Ihr das auch so seht, dann sprecht doch mal mit Euren Chefs. Bei Interesse, kontaktiert uns per E-Mail: sponsoring@workingdraft.de.

Revision 447: XSS und die HTML Sanitizer API

20. Oktober 2020 | 2 Kommentare

Viel zu lange ist es her (nämlich fast 6 Jahre), dass wir das letzte Mal über das Thema „Security“ im Frontend gesprochen haben. Mit Frederik Braun (@freddyb) von Mozilla haben wir endlich wieder jemand zu Gast, der sich damit auskennt und der uns über neue fiese Tricks und aktuelle wie auch zukünftige Abwehrstrategien ins Bild setzen kann.

Schaunotizen

[00:00:30] XSS und die HTML Sanatizer API
Angefangen bei einer Begriffsdefinition von Cross-Site-Scripting, aka XSS, und ihrem historischen Einsatz arbeiten wir uns langsam vor zu den eher neueren Kategorien der „Script Gadgets (Video)“ (PDF) und der „Mutated XSS“ (Video) (Slides), bei denen im ersten Fall ein Frontend-Framework wie Bootstrap, und im zweiten die im Browser eingebauten (und standardisierten) HTML-Parser und -Serialisierer clever zu Komplizen gemacht werden. In solch einem Fall helfen einem Content Security Policy (CSP) oder auch Tools wie HTML Purifier, DOMPurify oder Bleach nicht. Und auch Chromes Konzept der Trusted Types dürfte für den Durchschnittsentwickler nicht geeignet sein. Deshalb arbeitet Frederik bei Mozilla neuerdings an einer in den Browser eingebauten HTML Sanitizer API, die all die oben beschriebenen Schwächen nicht hat (benötigt aktuell den Firefox Nightly mit aktiviertem dom.security.sanitizer.enabled-Flag in about:configure).

Revision 446: State of the Art PHP 2020

13. Oktober 2020 | 5 Kommentare

Hans, Schepp und Peter lassen sich von PHP-Oberguru Sebastian Bergmann (bekannt von thePHP.cc und PHPUnit, online zu finden unter sebastian-bergmann.de sowie auf GitHub und Twitter) erklären, was PHP im Jahr 2020 alles so zu bieten hat. Es stellt sich raus: nicht alles an 2020 ist eine Vollkatastrophe!

Schaunotizen

[00:02:15] PHP
Wir spannen den Bogen von dem PHP aus Sebastians Anfangstagen (die ca. 21 Jahre her sind) hin zu den neuesten Features von PHP 8. Beginnend mit der Originalidee von Rasmus Lerdorf über die Jahre des Wildwuchs (die den heutigen Ruf von PHP immer noch prägen) bis hin zu den Anfängen der Gegenwart (mit Verbesserungen an PHP-Interna, Facebooks u.a. von HHVM geprägtem Einsatz für PHP und den Versuchen eine Spezifikation von PHP zu schreiben) lassen wir kein Kapitel der bewegten Geschichte aus. An moderneren Features kommen unter anderem Traits, Typ-Annotationen, und mögliche zukünftige Generics zur Sprache. Konkrete Features in PHP8 sind unter anderem der JIT, Union Types, Attributes und zahlreiche Aufräumaktionen, speziell an Interna. Für die Zukunft stehen u.A. Features wie Editions (inspiriert von Rust) und weitere Aufräumaktionen an. Am Rande geht es außerdem um Tools wie Composer und Psalm, Frameworks wie Lavarel, Nette und TYPO3, Paamayim Nekudotayim, IBM-Mainframes und die Borg.

[01:33:12] Keine Schaunotizen

The Online PHP Conference 2021
Schaut bei der von Sebastians Firma angekurbelten Online-PHP-Konferenz vorbei!

Revision 445: Color Fonts und Shared Array Buffer

8. Oktober 2020 | Keine Kommentare

Schepp und Peter betätigen sich in dieser Revision mal wieder mit einem Blick auf ihre jüngsten Experimente mit Browser-APIs aller Arten.

Schaunotizen

[00:01:10] Follow-up zu Color-Fonts
In der Revision 443 quatschten wir bereits über Schepps Abenteuer mit bunten Webfonts, die zu zufriedenstellenden Ergebnissen in Chrome und Chrome-Derivaten führten, nicht aber in Firefox. Jetzt kennen wir den Grund: der Birdfont-Output waren nicht Firefox-kompatibel! Mit Type lässt sich das aber reparieren. Weitere Themen sind fehlende Flaggen in Segoe UI, die Emoji-Historie, Flaggen-Emoji, Emoji-Ligaturen Emoji-Flaggen und das Select-Element als Power-User-Tool.
[00:20:00] State-Management im Array Buffer
Nachdem wir mit Surma schon mal über Off-Main-Thread-Apps gesprochen hatten hat Peter versuchsweise die gleiche Idee mit SharedArrayBuffer umgesetzt – ganz ohne postMessage! Wir sprechen über State- und Message-Buffer CBOR, Spectre, Service Worker, die Zukunft von SPA und das Ende der aktiven Weiterentwicklung von Moment.js.

Revision 444: Neue Developer-Tools

4. Oktober 2020 | Keine Kommentare

Hans und Peter haben zwei neue Tools für sich entdeckt, von denen sie in dieser Revision berichten.

Schaunotizen

[00:01:40] ClinicJS
Hans hat ein Memory Leak gejagt und ClinicJS hat sehr dabei geholfen. Neben den diversen Sub-Tools sprechen wir auch über Nodemon, ts-node, Callbacks, Promises, Node, Deno und das Buch Coders at Work.
[00:30:19] TabNine
Kurz vor Beginn der Aufzeichnung ist Peter über das AI-Autocomplete-Tool TabNine gestolpert, das als IDE-Extension daherkommt. Wir quatschen über TypeScript, (Teil-) Automatisierung für Entwickler, das Pareto-Prinzip und über die Fähigkeiten und Fehler von AI allgemein.

Revision 443: Select-Styling und Computed Styles

22. September 2020 | Keine Kommentare

Aufgrund außerplanmäßiger Ausfälle geplanter Gäste erzählt Schepp etwas von seinen Versuchen, mit allen Mitteln Select-Elemente zu stylen (was nicht gehen sollte, aber trotzdem einigermaßen klappt) und Peter von seinen Versuchen, Elementen ihre Computed Styles zu entlocken (was trivial sein sollte, aber knifflig ist). Moderiert vom unvergleichlichen Hans!

Schaunotizen

[00:01:42] Select-Styling, Farb-Fonts und Unicode
Schepp sah sich der Aufgabe gegenüber, mit nativen <select><option>-Elementen eine Länderauswahl mit bunten Landesflaggen zu bauen. Native Elemente haben viele Vorteile, sind aber Replaced Elements und daher spätestens seit Firefox Electrolysis in allen Browsern ungestaltbar. Schepp griff zu farbigen Fonts und dem Font-Editor Birdfont um sich einer Problemlösung anzunähern. Des Weiteren geht es um unicode-range, Zero-Width-Spaces, Ligaturen und Swingerclubs.
[00:51:15] Computed Styles auslesen
Peter hat dank Warhol in der letzten Zeit viel mit dem CSSOM (dem ollen CSSOM, nicht Houdini) zu tun und berichtet von den Herausforderungen beim Auslesen von Computed Styles. Es geht um window.getComputedStyle(), Element.computedStyleMap(), Custom Properties, Browser, Browserbugs in Chrome (v.a. mit font-feature-settings) und die Implementierung von Single-Page-Apps in Netscape-Browsern.

Revision 442: „Next Level“-End-to-End-Testing

15. September 2020 | Keine Kommentare

Als sich abzeichnete, dass uns kein gutes Thema einfallen würde, konsultierten wir Twitter, um zu fragen, ob jemand dort Lust und Zeit hat, über ein mitgebrachtes Thema zu quatschen. Und wir hatten Glück! Marvin Hagemeister, welcher letztes Jahr schon einmal bei uns zum Thema Preact und Code-Golfing in der Sendung war und der gerade mit seinen Mitstreitern an Preact 11 arbeitet, schlug vor, mit uns über End-to-End-Testing zu reden. Nachdem wir uns letztens mit Frontend-Unit-Testing beschäftigt hatten ein wunderbar passendes Thema. Also griffen wir zu! :)

Schaunotizen

[00:00:32] „Next Level“ End-to-End-Testing
Natürlich war Preact der initiale Grund für Marvin, sich mit End-to-End-Testing-Frameworks zu beschäftigen, denn Marvin suchte nach einem Tool, das das von Preact erzeugte DOM extrahieren und gegen einen Snapshot testen konnte. Darüberhinaus arbeitet Marvin zur Zeit bei der Firma, die hinter den Tonie Boxen steckt. Und auch dort war man auf der Suche nach einem Testing-Framework, das den gesamten Flow von Inbetriebnahme einer neuen Tonie Box, über das Flashen per Web-Oberfläche hin zum Kauf und Teilen von Hörbüchern abtesten konnte. Karma mit dem darunter befindlichen WebDriver war für das Preact-Szenario nicht geeignet, weil es an bestimmten Stellen durch den genutzten Stack limitiert wird. An Jest wiederum stört, dass dieses keine echte Browser zum Testen nutzt, sondern nur ein simuliertes DOM (jsdom), das aber manche Dinge, wie zum Beispiel Intersection Observer nicht implementiert. Und wenn man Jest mit Puppeteer verknüpft, dann kann man keine zwei parallelen Browser-Instanzen steuern. Was macht man also, wenn man nichts vernünftiges findet? Genau! Sein eigenes Testing-Framework programmieren: pentf.

Keine Schaunotizen

Replay
„A new debugger for recording and replaying the web.“
Playwright
„Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API.“

Revision 441: Neos CMS

9. September 2020 | 1 Kommentar

Diese Sendung beschäftigt sich mal wieder mit einem Content Management System. Gemeinsam mit Sebastian Helzle und Robert Lemke sprechen Rodney und Hans über Neos CMS (Twitter).

Schaunotizen

[00:01:35] Neos
Wir steigen mit der Geschichte von Neos ein und sprechen über die Verbindung zu TYPO3. Robert und Sebastian erklären die architektonischen Ansätze und die Frontend-Transformation von Ext.js zu Ember und schließlich zu React. Wir machen auch einen kleinen Ausflug zu Domain Driven Design (hört auch mal in die Revision 314). Außerdem erklären die beiden das Konzept hinter Atomic Fusion, der Templating-Sprach von Neos. Und natürlich darf die Community-Arbeit nicht zu kurz kommen, die bei Neos eine große Rolle spielt.

Keine Schaunotizen

YouTube Channel
Gute Videos zu Vorträgen des Neos-Teams
Installation-Guide
Hier geht’s lang, zum Cold-Start mit Neos
Die Foundation
Ihr könnt das Open Source Projekt über die Foundation finanziell unterstützen

Revision 440: Engineering Manager und andere Karrierepfade

1. September 2020 | Keine Kommentare

Willkommen zur zweiten Late Night DadOps Folge mit Stefan und Kahlil. Die beiden haben sich mal wieder zu später Stunde vor die Mics geklemmt um über Dinge zu sprechen die sie gerade bewegen.

[00:00:28] Schaunotizen

Thema dieses mal ist der Karrierepfad des Engineering Managers. Kahlil wechselte Ende letzten Jahres in diesen Beruf und gibt einen Einblick in seine Eindrücke bisher und was das eigentlich ist.

Stefan hat über die letzten Jahre bei Dynatrace die Karrieremöglichkeiten dort mit entwickelt um den Entwicklern dort bessere Entwicklungsmöglichkeiten zu bieten. Er plaudert aus dem Nähkästchen.

[01:15:43] Keine Schaunotizen

Podcast: Managing UP
Ein sehr schöner Podcast in dem langjährige Engineering Manager über die Herausforderungen sprechen kreative und technische Teams zu managen.

Revision 439: Bootcamp-Coaching mit Florian Herlings

25. August 2020 | Kommentare deaktiviert für Revision 439: Bootcamp-Coaching mit Florian Herlings

Florian Herlings betätigt sich bei SPICED Academy als Coach bei Coding Bootcamps und plaudert in dieser Revision zum Vorteil von Hans und Peter aus dem Nähkästchen.

Schaunotizen

[00:00:28]
Florian erzählt vom Dasein als Coach für Coding Bootcamps, nachdem wir die andere Seite in Revision 430 (Berufseinstieg per Coding Bootcamp) schon kennenlernen durften. Der Weg der vom Entwickler zum Coach, der Arbeitsalltag, das Up-To-Date-Bleiben und von die Veränderungen, die einem Coach selbst durch seine Tätigkeit zuteil werden, sind allesamt Thema. Auch die Unterschiede von Bootcamp-Coaching zur Erklärbär-Tätigkeit von Peter (der fast ausschließlich Schulungen für erfahrene Nerds macht) werden besprochen, vor allem was die Wissensvermittlung angeht. Gemeinsamkeiten gibt es aber auch!

Revision 438: Unternehmensgründung mit Marcel Poelker

19. August 2020 | Kommentare deaktiviert für Revision 438: Unternehmensgründung mit Marcel Poelker

Marcel Poelker (Twitter) ist CTO von Taledo (Twitter, Insta), einer digitalen Recruiting-Plattform, und erzählt Schepp und Peter in dieser Revision, wie der Weg vom Nerd zum Startup-Gründer aussieht.

Schaunotizen

[00:00:30] Von Studium bis Startup
Wir machen einen Rundumschlag der Startup-Gründung von der Ideenfindung bis zum fertigen Produkt! Beginnend mit Marcels Werdegang (von der Uni via Festanstellung zur Gründung) und dem Finden der Co-Gründer plaudern wir über die Anfänge eines bootstrapped Startups. Wir besprechen, wie man über Irrungen und Wirrungen das passende Projekt findet, das Henne-Ei-Problem löst und Product-Market-Fit erreicht. Die Gewichtung von Fragen wie der Wahl der passenden Technologien (im Falle Taledos Ruby on Rails) und Investoren führt uns bis in die Details der täglichen Entscheidungen, etwa bzgl. der Preisgestaltung von Produkten.

[00:00:00] Keine Schaunotizen

Igalia Open Prioritization
Einer neuer Ansatz Webbrowser-Feature-Priorisierung zu crowdfunden. Das ist doch mal etwas wirklich neues!