Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

November 24, 2020 Revision 452: CORS, CORP, (C)ORB, COOP und COEP
Wie Ihr Euch erinnert, hatten wir in Revision 447 Frederik Braun von Mozilla zu Gast, mit dem wir über den Themenblock „Cross-Site-Scripting“ gesprochen haben. Wir hatten damals noch einen zweiten Themenblock auf der Agenda, nämlich „Site Isolation“, zu dem wir aus Zeitgründen nicht mehr kamen und den wir auf eine zukünftige Folge vertagt haben. Hier kommt sie!
Unser Sponsor
Kennst Du das Gefühl… die Projektleitung benötigt dringend die Stunden für das Projekt rückgemeldet, Du hattest aber während der Arbeit am Projekt keine Zeit diese zu notieren? Nun musst Du mühsam alles zusammensuchen um die Stunden zu erfassen? timr unterstützt Dich und Dein Team dabei Eure Zeit mit minimalem Aufwand zu erfassen. Am Ende des Tages ist alles erfasst. Die Projektleitung freut sich weil sie täglich einen Überblick hat. Sie kann damit nicht nur reagieren, sondern agieren. Neben der Projektzeiterfassung könnt Ihr sogar Eure Arbeitszeit erfassen, inkl. Urlaubsanträge.
Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter timr.com/workingdraft.
Schaunotizen
[00:01:46] CORS, CORP, (C)ORB, COOP und COEP
Zur Einführung gehen wir auf eine Angriffsmethode namens „Spectre“ und das Konzept der Site-Isolation ein, um das Problem zu verstehen, für das wir im Folgenden die Lösungen erörtern wollen. Außerdem rufen wir uns ins Gedächtnis, wie die „Same Origin Policy“ in den Browsern greift und wie man seit einigen Jahren per „Cross Origin Resource Sharing“ (CORS) darauf einwirken kann. Und wir klären den Unterschied zwischen „Same Site“ und „Same Origin“. Damit haben wir die Grundlagen gelegt, um einigermaßen neue, fest eingebaute Mechanismen wie (Cross) Origin Request Blocking (Video) ((C)ORB) zu Verstehen, aber vor allem auch, was es mit dem neuen „Cross-Origin Resource Policy“ (CORP) Header auf sich hat. Um es kurz zu machen: Während CORS dem Browser über Origin-Grenzen hinweg Zugriff auf per JavaScript weiterbearbeitete Ressourcen gewährt, verhindert entsprechend gesetztes CORP die passive Anzeige von von fremden Ursprüngen stammender, aber üblicherweise zulässiger Bausteinen wie etwa Bilder. Danach erörtern wir, was es mit einer Gruppe Sicherheitslücken namens „xsleaks“ auf sich hat, um zu verstehen, wie zwei weitere neue HTTP Header namens „Cross-Origin-Opener-Policy“ (COOP) und „Cross-Origin-Embedder-Policy“ (COEP) da hineinspielen. Weil diese ganzen Sicherheitsmaßnahmen die Funktionsweise der Seite stark beeinflussen, ist es ratsam, vor einem Scharfschalten von der Reporting API, respektive dem Report-to-Header Gebrauch zu machen (und Probleme zum Beispiel an sentry.io senden zu lassen). Ob wir am Ende alles richtig gemacht haben und unsere Seite erfolgreich abschotten konnten, können wir im Browser auf der globalen Property window.crossOriginIsolated / self.crossOriginIsolated abfragen. Als Belohnung für unsere Mühen eröffnet uns der Browser Zugang zu Features wie eine hohe Genauigkeit des DOMHighResTimeStamps, SharedArrayBuffers oder performance.measureMemory().
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 25 min
November 17, 2020 Revision 451: Neue Webstandard-Proposals und Podcast-Verstärkung!
Im Rahmen einer Throwback-Folge besprechen nicht nur die üblichen Schepp, Stefan und Peter neue Webstandards/Browser-APIs, sondern begrüßen auch Verstärkung im Podcast-Team!
Unser Sponsor
Kennst Du das Gefühl… die Projektleitung benötigt dringend die Stunden für das Projekt rückgemeldet, Du hattest aber während der Arbeit am Projekt keine Zeit diese zu notieren? Nun musst Du mühsam alles zusammensuchen um die Stunden zu erfassen? timr unterstützt Dich und Dein Team dabei Eure Zeit mit minimalem Aufwand zu erfassen. Am Ende des Tages ist alles erfasst. Die Projektleitung freut sich weil sie täglich einen Überblick hat. Sie kann damit nicht nur reagieren, sondern agieren. Neben der Projektzeiterfassung könnt Ihr sogar Eure Arbeitszeit erfassen, inkl. Urlaubsanträge.
Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter timr.com/workingdraft.
Schaunotizen
[00:01:46] Hallo Vanessa!
Willkommen im Team, Vanessa Böhner! Bekannt aus vergangen Workingdraft-Folgen, von Twitter, von den FrontendFoxes und durch Podcasts über Testing und Wein verstärkt sie nun auch diesen Podcast.
[00:11:15] DOM Parts Proposal
DOM-Parts verstärken das Template-Element, das eigentlich nur ein deklaratives DocumentFragment ist, um Features aus Template-Sprachen wie Handlebars. Im Rahmen des Über-Themas Templating sprechen wir auch über Frontend-Framework-Monokultur, Security, hyperHTML, JSX und statisch vs. dynamisch typsierte Programmiersprachen.
[00:31:20] CentralizedConsentAPI
Die API für die Reduktion von Cookie-Consent-Bannern wird kontrovers diskutiert! Während einige von uns an die API glauben, wittern andere eine Verschwörung gegen das Project Fugu und wieder andere berufen sich auf die via Brave Browser und uBlock Origin umgesetzte Castle Doctrine in der eigenen Web-Experience.
[00:50:10] Cookie-Store
Brauchen wir bessere Frontend-APIs für Coookies? Entsprechende jQuery-Plugins deuten darauf hin. Die neue API verspricht asynchrone Funktionen, Cookie-Events und Cookies im Service Worker. Wir vergleichen die Cookie-API und das entsprechende jQuery-Plugin mit der URL-API und Rodneys URI.js. Außerdem versuchen wir zu ergründen, ob wir asyncrhone APIs brauchen, warum es keinen Cookie-Observer angelehnt an den Mutation Observer gibt und gleichen das Proposal mit Mozillas Positionen zu divsersen Standards ab.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 17 min
November 11, 2020 Revision 450: HTML5-Glücksrad (Image Maps, History API, Time-Element, Custom Elements)
Hans, Schepp und Peter ließen mal wieder das Glücksrad drehen!
Schaunotizen
[00:00:30] Image Maps
Wir versuchen uns daran zu erinnern, wann wir zuletzt Image Maps genutzt haben (serverseitige und wie clientseitige Image Maps) und wie sich Image-Map-Use-Cases zu SVGs verhalten. Schepp gibt außerdem eine Geschichte zum Besten, in der er mithilfe von Buttons im Image-State das antike Shopsystem XT-Commerce gebändigt hat.
[00:14:44] History API
Wir zerreißen die History API und die speziell pushState() in der Luft (siehe auch die Podcast-Kollegen von HTTP 203), verkünden die Ankunft von in Safari, besprechen das Wesen von Webstandards an sich nebst den Aussichten von Open UI und den aktuellen Stand des Hype-Themas Scrollbar-Styling.
[00:25:19]
Wir nutzen die Gelegenheit, um über Datumsformate (speziell das von HTML5) sowie Datenaustauschformate allgemein zu debattieren. Fazit: Jammern bringt nix, Date-Fns draufwerfen und fertig.
[00:51:52] Custom Elements
Neben Web Components quatschen wir auch über Svelte (Thema in Revision 413), StencilJS, Shadow DOM, Houdini, Frames und die Unmöglichkeit, Web-Features abzuschaffen.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 22 min
November 11, 2020 Revision 450: HTML5-Glücksrad (Image Maps, History API, Time-Element, Custom Elements)
Hans, Schepp und Peter ließen mal wieder das Glücksrad drehen!
Schaunotizen
[00:00:30] Image Maps
Wir versuchen uns daran zu erinnern, wann wir zuletzt Image Maps genutzt haben (serverseitige und wie clientseitige Image Maps) und wie sich Image-Map-Use-Cases zu SVGs verhalten. Schepp gibt außerdem eine Geschichte zum Besten, in der er mithilfe von Buttons im Image-State das antike Shopsystem XT-Commerce gebändigt hat.
[00:14:44] History API
Wir zerreißen die History API und die speziell pushState() in der Luft (siehe auch die Podcast-Kollegen von HTTP 203), verkünden die Ankunft von in Safari, besprechen das Wesen von Webstandards an sich nebst den Aussichten von Open UI und den aktuellen Stand des Hype-Themas Scrollbar-Styling.
[00:25:19]
Wir nutzen die Gelegenheit, um über Datumsformate (speziell das von HTML5) sowie Datenaustauschformate allgemein zu debattieren. Fazit: Jammern bringt nix, Date-Fns draufwerfen und fertig.
[00:51:52] Custom Elements
Neben Web Components quatschen wir auch über Svelte (Thema in Revision 413), StencilJS, Shadow DOM, Houdini, Frames und die Unmöglichkeit, Web-Features abzuschaffen.
1 hr 22 min
November 06, 2020 Revision 449: CSS-Tools und -Frameworks
Hans und Peter haben Fragen zu Tools, Frameworks und Grundsatzfragen rund um CSS.
Schaunotizen
[00:00:29] CSS-Tools und -Frameworks
Inspiriert von der großen CSS-Umfrage für 2020 haben Hans und Peter Fragen zu CSS-Tools. Anders als bei der Folge zu State of JS am letzten Jahresende gibt es noch keine Ergebnisse, aber viel zu diskutieren und zu hinterfragen. Wir besprechen den Sinn und Unsinn von Sass, Less, Stylus und PostCSS, sinnieren über Tool wie Autoprefixer, versuchen CSS Frameworks von UI-Libs abzugrenzen (wobei Bootstrap und Primer unserer Ansicht nach Mixturen darstellen) und kommen via Tailwind zu den großen Grundsatzfragen rund um Utility-First-CSS (vgl. Revision 378), CSS in JS, BEM, Atomic Design, Semantisches CSS und den Sinn von Trennung von Markup und Design im Jahr 2020.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
57 min
November 04, 2020 Revision 448: TypeScript 4.1
Am späten Abend eines langen Tages trafen sich Stefan und Peter, um traditionell die Verheißungen der neuesten TypeScript-Version zu interpretieren
Schaunotizen
[00:00:30] TypeScript 4.1 (Beta)
Die Liste der neuen Features beginnt mit Template Literal Types (vgl. Template Literals in JS) sowie rekursiven Conditionals. Daraus resultieren allerlei beeindruckende Tech-Demos wie etwa ein CSS-Selektor-Lexer, eine SQL-Engine und ein Rechtschreibprüfer – alles implementiert als TypeScript-Typ! Den Sinn und/oder Unsinn solcher Features diskutieren wir ebenso in epischer Breite wie die Entstehung und Konzeption von Stefans TypeScript-Buch, die Performance des TS-Compilers (nebst Tools wie Webpack und Vite), React, Preact, Promises, type-challenges und Private Class Fields in TS. Schreibt gerne einen Kommentar, wenn ihr wisst, was es mit den JSX-Factories in React 17 auf sich hat!
[00:00:00] Keine Schaunotizen
Stefans TypeScript-Buch „TypeScript in 50 lessons“
Kauft Stefans Buch! Es ist sehr gut!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 11 min
October 20, 2020 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).
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 11 min
October 13, 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: [email protected].
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!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 40 min
October 08, 2020 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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
55 min
October 04, 2020 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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
47 min