100 Folgen

Der wöchentliche News-Podcast für Webdesigner und -entwickler.
Supported uns bei Patreon: https://patreon.com/workingdraft

Working Draft » Podcast Feed Peter Kröner, Hans Christian Reinl, Rodney Rehm, Stefan Baumgartner, Kahlil Lechelt und Christian Schaefer

    • Technologie
    • 4.8 • 50 Bewertungen

Der wöchentliche News-Podcast für Webdesigner und -entwickler.
Supported uns bei Patreon: https://patreon.com/workingdraft

    Revision 447: XSS und die HTML Sanitizer API

    Revision 447: XSS und die HTML Sanitizer API

    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).

    • 1 Std. 10 Min.
    Revision 446: State of the Art PHP 2020

    Revision 446: State of the Art PHP 2020

    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!

    Unser Sponsor

    Seit 2016 ist ecx.io Teil der Agenturfamilie iX des IT-Giganten IBM und gehört somit zu einer der größten Digitalagenturen Europas.
    Die Marke IBM iX ist in Deutschland noch recht unbekannt, aber das soll jetzt geändert werden! Denn das Team arbeitet gemeinsam an tollen Projekten für namhafte Kunden wie z.B. Henkel, Fressnapf und Cyberport. Die Entwickler, Product Owner, Consultants und Designer entwickeln ihre innovativen Arbeitsweisen dabei kontinuierlich weiter. ecx.io sucht unter anderem auch Frontend Entwickler. Neugierig geworden? Wenn ihr mehr über die Projekte, Arbeitsweisen und aktuelle Stellenpositionen erfahren wollt, dann besucht die Website: ecx.io oder meldet Euch bei Sissi Kistner: sissi@ecx.io.

    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!

    • 1 Std. 39 Min.
    Revision 445: Color Fonts und Shared Array Buffer

    Revision 445: Color Fonts und Shared Array Buffer

    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.

    • 54 Min.
    Revision 444: Neue Developer-Tools

    Revision 444: Neue Developer-Tools

    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.

    • 46 Min.
    Revision 443: Select-Styling und Computed Styles

    Revision 443: Select-Styling und Computed Styles

    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!

    a.message_link {
    margin: 0 0 1rem; width: 100%;
    border-bottom: 0;
    display: block;
    }
    a.message_link img {
    margin: 0 0 0 1rem;
    max-width: 25rem;
    width: 100%;
    }


    Unser Sponsor


    tradingtwins sucht einen Frontend-Developer für den Aufbau einer digitalen Angebotsplattform. Wenn Du Spezialist für HTML/CSS und Javascript bist, solltest du dir das Startup mal genauer ansehen. Dich erwartet eine Schlüsselrolle in einem Kanban-Team aus Designern und Entwicklern. tradingtwins sitzt im Herzen von Köln, hat aktuell 11 Mitarbeiter. Zwei der drei Gründer sind selbst Entwickler. Sie bauen ein spannendes Produkt mit langfristigem Fokus, sind profitabel und solide finanziert.
    Eine ausführliche Jobbeschreibung, sämtliche Kontaktdaten und weitere offene Stellen findest du unter www.tradingtwins.com/workingdraft.


    Schaunotizen

    [00:01:42] Select-Styling, Farb-Fonts und Unicode
    Schepp sah sich der Aufgabe gegenüber, mit nativen – -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.

    • 1 Std. 19 Min.
    Revision 442: „Next Level“-End-to-End-Testing

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

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

    • 1 Std. 8 Min.

Kundenrezensionen

4.8 von 5
50 Bewertungen

50 Bewertungen

Andreas Kriegsloch ,

Besser als Blogs lesen

Witzig sich beim Radfahren Code snippets vorzustellen. Funktioniert aber ganz gut.

M.Enaah ,

Top Podcast zu Webentwicklungsthemen

Sehr interessant und informativ.

Sapkra ,

Gute Themen, jedoch durchwachsene Audioqualität

Extrem gute Themen, jedoch ist oft die Audioqualität der Gäste extrem schlecht und fast in jedem Podcast tauchen einfach mehrfach ca. 5 Sekunden lange Pausen auf.
Ihr würdet eure Qualität enorm steigern, wenn ihr mehr Arbeit in den Schnitt stecken würdet und validiert wie ihr mit euren Gästen eine bessere Audioquaiät bereitstellen könnt.
Bei Revision 346 ist der Gast teilweise gar nicht zu verstehen, da sich die Lautstärke andauernd ändert, er in einem Raum sitzt der sehr hallt und weit weg vom Mikrofon sitzt. Das sind alles Dinge, die vermeidbar sind.

Thematisch definitiv weiter so! Die Idee mit dem durchscrollen der W3 Docs war großartig.

Top‑Podcasts in Technologie

Zuhörer haben auch Folgendes abonniert: