<p>Nachdem mit <a href="https://typescript-book.com/">TypeScript in 50 Lessons</a> Stefans zweites Buch erschienen ist, quatschte er mit Peter (seines Zeichens Autor der antiken HTML5-Steintafel <a href="https://www.amazon.de/HTML5-Webseiten-innovativ-zukunftssicher-Kr%C3%B6ner/dp/3941841343/ref=sr_1_1?__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&amp;dchild=1&amp;keywords=html5+kr%C3%B6ner&amp;qid=1604314964&amp;sr=8-1">HTML5. Webseiten innovativ und zukunftssicher</a>) über das Schreiben von Webtech-Büchern.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] Schreiben von (Webtech-) Büchern</dt>
<dd>Stefan und Peter vergleichen die Entstehung ihrer drei Werke (TypeScript in 50 Lessons, HTML5. Webseiten innovativ und zukunftssicher und Stefans Erstwerk <a href="https://www.manning.com/books/front-end-tooling-with-gulp-bower-and-yeoman/?a_aid=fettblog&amp;a_bid=238ac06a">Front-End Tooling with Gulp, Bower, and Yeoman</a>) unter den Gesichtspunkten Recherche, Workflow, Lernings, Wegen zum Buch-Deal, Halbwertszeit von verschriftlichtem Webtech-Wissen und Produktion. Wir klären, ob sich Webtech-Bücherschreiben lohnt (für verschiedene Definitionen des Wortes &#8222;lohnt&#8220;), besprechen den Umgang mit seltsamem Feedback und <a href="https://www.amazon.de/product-reviews/3941841343/ref=acr_dp_hist_1?ie=UTF8&amp;filterByStar=one_star&amp;reviewerType=all_reviews#reviews-filter-bar">komischen Rezensionen</a> und sinnieren ein wenig über Screencasting und Video-Produktion.</dd>
</dl>


Nachdem mit TypeScript in 50 Lessons Stefans zweites Buch erschienen ist, quatschte er mit Peter (seines Zeichens Autor der antiken HTML5-Steintafel HTML5. Webseiten innovativ und zukunftssicher) über das Schreiben von Webtech-Büchern. Schaunotizen [00:00:29] Schreiben von (Webtech-) Büchern Stefan und Peter vergleichen die Entstehung ihrer drei Werke (TypeScript in 50 Lessons, HTML5. Webseiten innovativ und zukunftssicher [&#8230;]

Working Draft

Nachdem mit TypeScript in 50 Lessons Stefans zweites Buch erschienen ist, quatschte er mit Peter (seines Zeichens Autor der antiken HTML5-Steintafel HTML5. Webseiten innovativ und zukunftssicher) über das Schreiben von Webtech-Büchern.
Schaunotizen
[...]

Nachdem mit TypeScript in 50 Lessons Stefans zweites Buch erschienen ist, quatschte er mit Peter (seines Zeichens Autor der antiken HTML5-Steintafel HTML5. Webseiten innovativ und zukunftssicher) über das Schreiben von Webtech-Büchern.
Schaunotizen

[00:00:29] Schreiben von (Webtech-) Büchern
Stefan und Peter vergleichen die Entstehung ihrer drei Werke (TypeScript in 50 Lessons, HTML5. Webseiten innovativ und zukunftssicher und Stefans Erstwerk Front-End Tooling with Gulp, Bower, and Yeoman) unter den Gesichtspunkten Recherche, Workflow, Lernings, Wegen zum Buch-Deal, Halbwertszeit von verschriftlichtem Webtech-Wissen und Produktion. Wir klären, ob sich Webtech-Bücherschreiben lohnt (für verschiedene Definitionen des Wortes „lohnt“), besprechen den Umgang mit seltsamem Feedback und komischen Rezensionen und sinnieren ein wenig über Screencasting und Video-Produktion.

Revision 453: Webtech-Bücher schreiben

<p>Wie Ihr Euch erinnert, hatten wir in <a href="https://workingdraft.de/447/">Revision 447</a> <a href="https://frederik-braun.com/">Frederik Braun</a> 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!</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<div class="message_content">
<a class="message_link" href="https://www.timr.com/workingdraft"><img class="alignnone size-medium wp-image-4839" style="display: block; float: right; margin-left: 0.5rem; margin-bottom: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/11/Working-Draft-Banner-klein.png" alt="" /></a></p>
<p>Kennst Du das Gefühl&#8230; 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? <a href="https://www.timr.com/workingdraft">timr</a> 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.</p>
<p>Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter <a class="message_link" href="https://www.timr.com/workingdraft">timr.com/workingdraft</a>.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:46] CORS, CORP, (C)ORB, COOP und COEP</dt>
<dd>Zur Einführung gehen wir auf eine Angriffsmethode namens &#8222;<a href="https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)">Spectre</a>&#8220; und das Konzept der <a href="https://security.googleblog.com/2018/07/mitigating-spectre-with-site-isolation.html">Site-Isolation</a> 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 &#8222;<a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">Same Origin Policy</a>&#8220; in den Browsern greift und wie man seit einigen Jahren per &#8222;<a href="https://w3c.github.io/webappsec-cors-for-developers/">Cross Origin Resource Sharing</a>&#8220; (CORS) darauf einwirken kann. Und wir klären den Unterschied <a href="https://web.dev/same-site-same-origin/">zwischen &#8222;Same Site&#8220; und &#8222;Same Origin&#8220;</a>. Damit haben wir die Grundlagen gelegt, um einigermaßen neue, fest eingebaute Mechanismen wie <a href="https://www.chromium.org/Home/chromium-security/corb-for-developers">(Cross) Origin Request Blocking</a> (<a href="https://www.youtube.com/watch?v=_5rX6pt0A_k">Video</a>) ((C)ORB) zu Verstehen, aber vor allem auch, was es mit dem neuen &#8222;<a href="https://resourcepolicy.fyi/">Cross-Origin Resource Policy</a>&#8220; (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 &#8222;<a href="https://github.com/xsleaks/xsleaks/wiki/Browser-Side-Channels">xsleaks</a>&#8220; auf sich hat, um zu verstehen, wie zwei weitere neue HTTP Header namens &#8222;<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Opener-Policy">Cross-Origin-Opener-Policy</a>&#8220; (COOP) und &#8222;<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cross-Origin-Embedder-Policy">Cross-Origin-Embedder-Policy</a>&#8220; (COEP) da hineinspielen. Weil diese ganzen Sicherheitsmaßnahmen die Funktionsweise der Seite stark beeinflussen, ist es ratsam, vor einem Scharfschalten von der <a href="https://developer.mozilla.org/en-US/docs/Web/API/Reporting_API">Reporting API</a>, respektive dem <code>Report-to</code>-Header Gebrauch zu machen (und Probleme zum Beispiel an <a href="https://docs.sentry.io/product/security-policy-reporting/">sentry.io</a> 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 <code><a href="https://web.dev/coop-coep/">window.crossOriginIsolated / self.crossOriginIsolated</a></code> abfragen. Als Belohnung für unsere Mühen eröffnet uns der Browser Zugang zu Features wie <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now">eine hohe Genauigkeit des DOMHighResTimeStamps</a>, <a href="https://workingdraft.de/445/">SharedArrayBuffers</a> oder <code><a href="https://web.dev/monitor-total-page-memory-usage/">performance.measureMemory()</a></code>.</dd>
</dl>


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 [&#8230;]

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

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

Revision 452: CORS, CORP, (C)ORB, COOP und COEP

<p>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!</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<div class="message_content">
<a class="message_link" href="https://www.timr.com/workingdraft"><img class="alignnone size-medium wp-image-4839" style="display: block; float: right; margin-bottom: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/11/Working-Draft-Banner-klein.png" alt="" /></a></p>
<p>Kennst Du das Gefühl&#8230; 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? <a href="https://www.timr.com/workingdraft">timr</a> 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.</p>
<p>Teste timr 14 Tage kostenlos und hol Dir 10% Rabatt auf Deinen ersten Kauf unter <a class="message_link" href="https://www.timr.com/workingdraft">timr.com/workingdraft</a>.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:46] Hallo Vanessa!</dt>
<dd>Willkommen im Team, <a href="https://vannsl.io/">Vanessa Böhner</a>! Bekannt aus vergangen Workingdraft-Folgen, <a href="https://twitter.com/vannsl">von Twitter</a>, von den <a href="https://twitter.com/FrontendFoxes">FrontendFoxes</a> und durch Podcasts über <a href="https://www.expect-exception.fail/">Testing</a> und <a href="https://ausbaufaehig-podcast.de/">Wein</a> verstärkt sie nun auch diesen Podcast.</dd>
<dt>[00:11:15] <a href="https://github.com/rniwa/webcomponents/blob/add-dom-parts-proposal/proposals/DOM-Parts.md">DOM Parts Proposal</a></dt>
<dd>DOM-Parts verstärken das <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template">Template-Element</a>, das eigentlich nur ein deklaratives <a href="https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment/DocumentFragment">DocumentFragment</a> ist, um Features aus Template-Sprachen wie <a href="https://handlebarsjs.com/">Handlebars</a>. Im Rahmen des Über-Themas Templating sprechen wir auch über Frontend-Framework-Monokultur, <a href="https://workingdraft.de/447/">Security</a>, <a href="https://github.com/WebReflection/hyperHTML">hyperHTML</a>, JSX und statisch vs. dynamisch typsierte Programmiersprachen.</dd>
<dt>[00:31:20] <a href="https://github.com/WebKit/explainers/blob/8a52223b086773ac0486af8927bf23d7d2f216b5/CentralizedConsentAPI/README.md">CentralizedConsentAPI</a></dt>
<dd>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 <a href="https://workingdraft.de/399/">Project Fugu</a> und wieder andere berufen sich auf die via <a href="https://brave.com/">Brave Browser</a> und <a href="https://de.wikipedia.org/wiki/UBlock_Origin">uBlock Origin</a> umgesetzte <a href="https://en.wikipedia.org/wiki/Castle_doctrine">Castle Doctrine</a> in der eigenen Web-Experience.</dd>
<dt>[00:50:10] <a href="https://wicg.github.io/cookie-store/explainer.html">Cookie-Store</a></dt>
<dd>Brauchen wir bessere Frontend-APIs für Coookies? <a href="https://plugins.jquery.com/cookie/">Entsprechende jQuery-Plugins</a> 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 <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL">URL-API</a> und Rodneys <a href="https://medialize.github.io/URI.js/">URI.js</a>. Außerdem versuchen wir zu ergründen, ob wir asyncrhone APIs brauchen, warum es keinen Cookie-Observer angelehnt an den <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver">Mutation Observer</a> gibt und gleichen das Proposal mit <a href="https://mozilla.github.io/standards-positions/">Mozillas Positionen zu divsersen Standards</a> ab.</dd>
</dl>


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&#8230; 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 [&#8230;]

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 dr[...]

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.

Revision 451: Neue Webstandard-Proposals und Podcast-Verstärkung!

<p>Hans, Schepp und Peter ließen mal wieder das Glücksrad drehen!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] Image Maps</dt>
<dd>Wir versuchen uns daran zu erinnern, wann wir zuletzt <a href="https://html.spec.whatwg.org/#image-maps">Image Maps</a> 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 <a href="https://html.spec.whatwg.org/#image-button-state-(type=image)">Buttons im Image-State</a> das antike Shopsystem XT-Commerce gebändigt hat.</dd>
<dt>[00:14:44] History API</dt>
<dd>Wir zerreißen die <a href="https://html.spec.whatwg.org/#history">History API</a> und die speziell <a href="https://html.spec.whatwg.org/#dom-history-pushstate">pushState()</a> in der Luft (siehe auch <a href="https://podcastaddict.com/episode/110894716">die Podcast-Kollegen von HTTP 203</a>), verkünden <a href="https://twitter.com/stefanjudis/status/1320259247750381568">die Ankunft</a> von <code>&lt;input type="date"&gt;</code> in Safari, besprechen das Wesen von Webstandards an sich nebst den Aussichten von <a href="https://www.youtube.com/watch?v=2S2nSqh6EUw">Open UI</a> und den aktuellen Stand des Hype-Themas <a href="https://css-tricks.com/almanac/properties/s/scrollbar-color/">Scrollbar-Styling</a>.</dd>
<dt>[00:25:19] <a href="https://html.spec.whatwg.org/#the-time-element">&lt;time&gt;</a></dt>
<dd>Wir nutzen die Gelegenheit, um über Datumsformate (speziell <a href="https://html.spec.whatwg.org/#valid-date-string">das von HTML5</a>) sowie Datenaustauschformate allgemein zu debattieren. Fazit: Jammern bringt nix, <a href="https://date-fns.org/">Date-Fns</a> draufwerfen und fertig.</dd>
<dt>[00:51:52] <a href="https://html.spec.whatwg.org/#custom-elements">Custom Elements</a></dt>
<dd>Neben Web Components quatschen wir auch über <a href="https://svelte.dev/">Svelte</a> (Thema in <a href="https://workingdraft.de/413/">Revision 413</a>), <a href="https://stenciljs.com/">StencilJS</a>, Shadow DOM, Houdini, <a href="https://html.spec.whatwg.org/#frames">Frames</a> und die Unmöglichkeit, Web-Features abzuschaffen.</dd>
</dl>


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 [&#8230;]

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[...]

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 <input type="date"> 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] <time>
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.

Revision 450: HTML5-Glücksrad (Image Maps, History API, Time-Element, Custom Elements)

<p>Hans und Peter haben Fragen zu Tools, Frameworks und Grundsatzfragen rund um CSS.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] CSS-Tools und -Frameworks</dt>
<dd>Inspiriert von der <a href="https://survey.stateofjs.com/survey/state-of-css/2020">großen CSS-Umfrage für 2020</a> haben Hans und Peter Fragen zu CSS-Tools. Anders als bei der <a href="https://workingdraft.de/special-2019/">Folge zu State of JS am letzten Jahresende</a> 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 <a href="https://autoprefixer.github.io/">Autoprefixer</a>, versuchen CSS Frameworks von UI-Libs abzugrenzen (wobei <a href="https://getbootstrap.com/">Bootstrap</a> und <a href="https://primer.style">Primer</a> unserer Ansicht nach Mixturen darstellen) und kommen via <a href="https://tailwindcss.com/">Tailwind</a> zu den großen Grundsatzfragen rund um Utility-First-CSS (vgl. <a href="https://workingdraft.de/378">Revision 378</a>), CSS in JS, BEM, Atomic Design, Semantisches CSS und den Sinn von Trennung von Markup und Design im Jahr 2020.</dd>
</dl>


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 [&#8230;]

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[...]

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.

Revision 449: CSS-Tools und -Frameworks

<p>Am späten Abend eines langen Tages trafen sich Stefan und Peter, um traditionell die Verheißungen der neuesten TypeScript-Version zu interpretieren</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-1-beta/">TypeScript 4.1 (Beta)</a></dt>
<dd>Die Liste der neuen Features beginnt mit Template Literal Types (vgl. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">Template Literals in JS</a>) sowie rekursiven Conditionals. Daraus resultieren allerlei beeindruckende Tech-Demos wie etwa ein <a href="https://www.typescriptlang.org/play?ts=4.1.0-dev.20200920#code/C4TwDgpgBASg9gV2NAvFA3lMBDYALALigGdgAnASwDsBzAGigGM8KAbAEzIioH4j4kEANoBdKAF8A3AChQkKAAVsZbAFsAatlYJUJctRpQAPlCoJVAIwhljUC3DisI2KrYsUa1YDLnQAymCsFMAAPH5QEAAeyFTsxHqUtAwAIhHR3HEJBgB8UGjhUTGZAAYAJOjUAGbWUAAq4uXJDRVU1TYAquLFUDxQQrUMAHTDAUGh7SnZYkRCfiI+4NBKZMQQSvjLoet4m2lF8aSJNLloirg7ysB7GfHFBOVVNTBdPWcqGlo6UETbmwvyy1WyzUxBCv0uxBOUGkUDOGwh11i8VE0NhsN6KJhaJ+5028UKNz6hwMYixaNeQkBa1xlzBNLIwGIQgADCIpqjyd84RcGfj0kiifoklBhoNHh1SZy0RiqeCGXT4byWWyhsNZcoQSF2uyyZyZvNZIs3kDzgq8H4hYYCQLibQodsLUdEZkAEQuinTY3U96g0bBM2OgwMADkAHpg9lsv8lqaAMIIMhcKjAATIBgKLiVCiRZ3xYEfbTCNl5DnxxPcFOIZC5jBYc5EcXcwO0CQc9FNy0122GXXtoSijMQLORVWDdX4AOWnVS-VtrmiaPcgDqwTwsZYHCTITLScrghrqYg6cz2Zr+c0hdEUKEWO224Tu8Px6H2eyDCxosPxFqcG2oJ3FaHkIwbMGwnDcMGIjpnGD6AVWR6KCekSRnQ0gGr4sDwd+v7nKCX7PsOZ4agWOgomgV4lliX41pi5IYpK2KYYIfL7H0h4MXRfQDucK74OuYFbl+yoEa+HGMdR1qZEIT4isMjYwBAqjYNQBhfmJnH9mqPGrvxm7cCEQmsiJyGjl+P5-gZinKVQqlYcZ05SvO6FGu0VAAO4qGAITqFC6g0WIvRUBAABuNREH5knIo27QBVA7RchF-JSdFo6NkusXxSYrkedgXlLrkRBBaFZCLgAYmwyBkN5vk0aKLggLFfmFSF1gyNIlQIFQjDABQcCuGQWEhLUB7wVeAAUooDcxRC1AAlDNGBYlwwAJv1WEyOI7Wdd1vWuIwXC4NS+AAEIIGB1jeSNgjjVNyDEOF81QBNwzKDQ91QOVrCVVq7meQZWHmbh1WRrNeS5N2i2wstq1PaDKC5MGwZQNg8T1Rt0jSKGABUWMwljUAAKKRGogQQHjobSIwfWkFAACCYBgNRaC3RAxBjVi6C6jg+BEIjyPxFTVCkKhsLiCLkNotzhBQMG9hwAA1qGBAUOwSMo0w1PAOLsKgXpVBECzbO9hLUpS7z2BIHgcBkErKtqwLmvG2LuqzeLzuzRjgs0xYZ0cNsJb7c4yDbKd51kGN9OM1hHvSD7YHbGNoOhqG8My8Gse++wCeyw48vBgwACMABMScpwjcuK8X6dx375xjTnCv56YCCsKwpep-gA1uYTibW-XZit1AFCo641DBVoKtQOPhbBh7NdZ3XDd5yGxcAMxN8GFv4NbTcAJwAOwAGzt+XuehmvoZb1bNsH4f1eZ9nlTYPLEAbyzs9QMnHd4F3PcDeHwZXLyyoHANya1BCz2kEAA">CSS-Selektor-Lexer</a>, eine <a href="https://github.com/codemix/ts-sql">SQL-Engine</a> und ein <a href="https://github.com/kkuchta/TSpell">Rechtschreibprüfer</a> &#8211; alles implementiert als TypeScript-Typ! Den Sinn und/oder Unsinn solcher Features diskutieren wir ebenso in epischer Breite wie die Entstehung und Konzeption von <a href="https://typescript-book.com/">Stefans TypeScript-Buch</a>, die Performance des TS-Compilers (nebst Tools wie Webpack und <a href="https://github.com/vitejs/vite">Vite</a>), React, Preact, Promises, <a href="https://github.com/type-challenges/type-challenges">type-challenges</a> 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!</dd>
</dl>
<h3>[00:00:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://typescript-book.com/">Stefans TypeScript-Buch „TypeScript in 50 lessons“</a></dt>
<dd>Kauft Stefans Buch! Es ist sehr gut!</dd>
</dl>


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 [&#8230;]

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 Lite[...]

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!

Revision 448: TypeScript 4.1

<p>Viel zu lange ist es her (<a href="https://workingdraft.de/202/">nämlich fast 6 Jahre</a>), dass wir das letzte Mal über das Thema &#8222;Security&#8220; im Frontend gesprochen haben. Mit <a href="https://frederik-braun.com/">Frederik Braun</a> (<a href="https://twitter.com/freddyb">@freddyb</a>) 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.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] <a href="https://twitter.com/freddyb/status/1304331981166174208">XSS und die HTML Sanatizer API</a></dt>
<dd>Angefangen bei einer Begriffsdefinition von <a href="https://de.wikipedia.org/wiki/Cross-Site-Scripting">Cross-Site-Scripting</a>, aka XSS, und ihrem historischen Einsatz arbeiten wir uns langsam vor zu den eher neueren Kategorien der &#8222;<a href="https://www.youtube.com/watch?v=i6Ug8O23DMU">Script Gadgets (Video)</a>&#8220; (<a href="https://owasp.org/www-pdf-archive/OWASP_BeNeLux-Day_2017_Bypassing_XSS_mitigations_via_script_gadgets_Sebastian_Lekies.pdf">PDF</a>) und der <a href="https://www.youtube.com/watch?v=wDHHpZ-dgcE">&#8222;Mutated XSS&#8220; (Video)</a> (<a href="https://www.slideshare.net/x00mario/the-innerhtml-apocalypse">Slides</a>), bei denen im ersten Fall ein Frontend-Framework wie Bootstrap, und im zweiten die im Browser eingebauten (und <a href="https://htmlparser.info/">standardisierten</a>) HTML-Parser und -Serialisierer clever zu Komplizen gemacht werden. In solch einem Fall helfen einem <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">Content Security Policy</a> (CSP) oder auch Tools wie <a href="http://htmlpurifier.org/">HTML Purifier</a>, <a href="https://github.com/cure53/DOMPurify">DOMPurify</a> oder <a href="https://pypi.org/project/bleach/">Bleach</a> nicht. Und auch Chromes Konzept der <a href="https://web.dev/trusted-types/">Trusted Types</a> dürfte für den Durchschnittsentwickler nicht geeignet sein. Deshalb <a href="https://twitter.com/freddyb/status/1304331981166174208">arbeitet Frederik</a> bei Mozilla neuerdings an einer in den Browser eingebauten <a href="https://freddyb.neocities.org/sanitizer.html">HTML Sanitizer API</a>, die all die oben beschriebenen Schwächen nicht hat (benötigt aktuell den <a href="https://www.mozilla.org/de/firefox/channel/desktop/">Firefox Nightly</a> mit aktiviertem <code>dom.security.sanitizer.enabled</code>-Flag in <code>about:configure</code>).</dd>
</dl>


Viel zu lange ist es her (nämlich fast 6 Jahre), dass wir das letzte Mal über das Thema &#8222;Security&#8220; 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 [&#8230;]

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 u[...]

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 447: XSS und die HTML Sanitizer API

<p>Hans, Schepp und Peter lassen sich von PHP-Oberguru <strong>Sebastian Bergmann</strong> (bekannt von <a href="https://thephp.cc">thePHP.cc</a> und <a href="https://phpunit.de/">PHPUnit</a>, online zu finden unter <a href="https://sebastian-bergmann.de/">sebastian-bergmann.de</a> sowie auf <a href="https://github.com/sebastianbergmann">GitHub</a> und <a href="https://twitter.com/s_bergmann/">Twitter</a>) erklären, was PHP im Jahr 2020 alles so zu bieten hat. Es stellt sich raus: nicht alles an 2020 ist eine Vollkatastrophe!</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a class="message_link" href="https://www.ecx.io/?ref=workingdraft.de"><img class="alignnone size-medium wp-image-4839" style="display: block; float: right; margin-bottom: 1rem; max-width: 15rem;" src="https://workingdraft.de/wp-content/uploads/2020/10/ecxio_logo_black_RGB_Zeichenfläche-1.png" alt="" /></a></p>
<div class="message_content">Seit 2016 ist <a href="https://www.ecx.io/?ref=workingdraft.de">ecx.io</a> Teil der Agenturfamilie iX des IT-Giganten IBM und gehört somit zu einer der größten Digitalagenturen Europas.<br />
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: <a class="message_link" href="https://www.ecx.io/?ref=workingdraft.de">ecx.io</a> oder meldet Euch bei Sissi Kistner: <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;&#115;&#105;&#115;&#115;&#105;&#64;&#101;&#99;&#120;&#46;&#105;&#111;">&#115;&#105;&#115;&#115;&#105;&#64;&#101;&#99;&#120;&#46;&#105;&#111;</a>.</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:15] PHP</dt>
<dd>Wir spannen <a href="https://de.wikipedia.org/wiki/Versionsgeschichte_von_PHP">den Bogen</a> 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 <a href="https://de.wikipedia.org/wiki/Rasmus_Lerdorf">Rasmus Lerdorf</a> ü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 <a href="https://hhvm.com/">HHVM</a> 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 <a href="https://www.php.net/manual/de/language.oop5.traits.php">Traits</a>, 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 <a href="https://getcomposer.org/">Composer</a> und <a href="https://psalm.dev/">Psalm</a>, Frameworks wie <a href="https://laravel.com/">Lavarel</a>, <a href="https://nette.org/">Nette</a> und <a href="https://typo3.org/">TYPO3</a>, Paamayim Nekudotayim, IBM-Mainframes und die Borg.</dd>
</dl>
<h3>[01:33:12] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://thephp.cc/dates/2021/01/the-online-php-conference">The Online PHP Conference 2021</a></dt>
<dd>Schaut bei der von Sebastians Firma angekurbelten Online-PHP-Konferenz vorbei!</dd>
</dl>


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 [&#8230;]

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 si[...]

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!

Revision 446: State of the Art PHP 2020

<p>Schepp und Peter betätigen sich in dieser Revision mal wieder mit einem Blick auf ihre jüngsten Experimente mit Browser-APIs aller Arten.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:10] Follow-up zu Color-Fonts</dt>
<dd>In der <a href="https://workingdraft.de/443/">Revision 443</a> quatschten wir bereits über Schepps Abenteuer mit <a href="https://www.colorfonts.wtf/">bunten Webfonts</a>, die zu zufriedenstellenden Ergebnissen in Chrome und Chrome-Derivaten führten, nicht aber in Firefox. Jetzt kennen wir den Grund: der <a href="https://birdfont.org/">Birdfont</a>-Output waren nicht Firefox-kompatibel! Mit <a href="https://www.cr8software.net/type.html">Type</a> lässt sich das aber reparieren. Weitere Themen sind fehlende Flaggen in <a href="https://de.wikipedia.org/wiki/Segoe_UI">Segoe&nbsp;UI</a>, die <a href="https://en.wikipedia.org/wiki/Emoji#The_origin_of_Emoji_pictograms_(1990s)">Emoji-Historie</a>, Flaggen-Emoji, Emoji-Ligaturen <a href="https://blog.emojipedia.org/emoji-flags-explained/">Emoji-Flaggen</a> und das Select-Element als Power-User-Tool.</dd>
<dt>[00:20:00] State-Management im Array Buffer</dt>
<dd>Nachdem wir mit Surma schon mal über <a href="https://workingdraft.de/422/">Off-Main-Thread-Apps gesprochen hatten</a> hat Peter versuchsweise die gleiche Idee mit <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer">SharedArrayBuffer</a> umgesetzt&nbsp;&ndash; ganz ohne <code>postMessage</code>! Wir sprechen über State- und Message-Buffer <a href="https://de.wikipedia.org/wiki/Concise_Binary_Object_Representation">CBOR</a>, <a href="https://de.wikipedia.org/wiki/Spectre_(Sicherheitsl%C3%BCcke)">Spectre</a>, Service Worker, <a href="https://developers.google.com/web/updates/2018/05/beyond-spa">die Zukunft von SPA</a> und <a href="https://momentjs.com/docs/#/-project-status/">das Ende der aktiven Weiterentwicklung von Moment.js</a>.
</dd>
</dl>


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 [&#8230;]

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 Abent[...]

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 445: Color Fonts und Shared Array Buffer

<p>Hans und Peter haben zwei neue Tools für sich entdeckt, von denen sie in dieser Revision berichten.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:40] <a href="https://clinicjs.org/">ClinicJS</a></dt>
<dd>Hans hat ein Memory Leak gejagt und ClinicJS hat sehr dabei geholfen. Neben den diversen Sub-Tools sprechen wir auch über <a href="https://nodemon.io/">Nodemon</a>, <a href="https://github.com/TypeStrong/ts-node">ts-node</a>, Callbacks, Promises, Node, <a href="https://deno.land/">Deno</a> und das Buch <a href="https://en.wikipedia.org/wiki/Coders_at_Work">Coders at Work</a>.</dd>
<dt>[00:30:19] <a href="https://www.tabnine.com/">TabNine</a></dt>
<dd>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.</dd>
</dl>


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 [&#8230;]

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 auc[...]

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 444: Neue Developer-Tools

<p>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!</p>
<style>
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%;
}
</style>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a class="message_link" href="https://www.tradingtwins.com/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-4839" style="display: block; float: right; margin-bottom: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/09/tradingtwins-banner.jpg" alt="" /></a></p>
<div class="message_content">
<p>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.</p>
<p>Eine ausführliche Jobbeschreibung, sämtliche Kontaktdaten und weitere offene Stellen findest du unter <a href="https://www.tradingtwins.com/workingdraft?ref=workingdraft.de">www.tradingtwins.com/workingdraft</a>.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:42] Select-Styling, Farb-Fonts und Unicode</dt>
<dd>Schepp sah sich der Aufgabe gegenüber, mit nativen <code>&lt;select&gt;</code>&#8211; <code>&lt;option&gt;</code>-Elementen eine Länderauswahl mit bunten Landesflaggen zu bauen. Native Elemente haben viele Vorteile, sind aber <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element">Replaced Elements</a> und daher spätestens seit <a href="https://wiki.mozilla.org/Electrolysis">Firefox Electrolysis</a> in allen Browsern ungestaltbar. Schepp griff zu <a href="https://www.colorfonts.wtf/">farbigen Fonts</a> und dem <a href="https://birdfont.org/">Font-Editor Birdfont</a> um sich einer Problemlösung anzunähern. Des Weiteren geht es um <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range">unicode-range</a>, Zero-Width-Spaces, <a href="https://de.wikipedia.org/wiki/Ligatur_(Typografie)">Ligaturen</a> und Swingerclubs.</dd>
<dt>[00:51:15] Computed Styles auslesen</dt>
<dd>Peter hat dank <a href="http://warhol.io/">Warhol</a> in der letzten Zeit viel mit dem CSSOM (dem <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model">ollen CSSOM</a>, nicht <a href="https://developer.mozilla.org/en-US/docs/Web/Houdini">Houdini</a>) zu tun und berichtet von den Herausforderungen beim Auslesen von Computed Styles. Es geht um <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle">window.getComputedStyle()</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/computedStyleMap"><code>Element.computedStyleMap()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/--*">Custom Properties</a>, Browser, Browserbugs in Chrome (v.a. mit <a href="https://developer.mozilla.org/de/docs/Web/CSS/font-feature-settings">font-feature-settings</a>) und die <a href="https://www.youtube.com/watch?v=Z-nXRZkge2U">Implementierung von Single-Page-Apps in Netscape-Browsern</a>.</dd>
</dl>


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! Unser Sponsor tradingtwins sucht einen Frontend-Developer für den [&#8230;]

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 Comp[...]

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 <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 443: Select-Styling und Computed Styles

<p>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! <a href="https://marvinh.dev/">Marvin Hagemeister</a>, welcher letztes Jahr <a href="https://workingdraft.de/397/">schon einmal bei uns zum Thema Preact und Code-Golfing in der Sendung war</a> und der gerade mit seinen Mitstreitern an <a href="https://github.com/preactjs/preact/issues/2621">Preact 11</a> arbeitet, schlug vor, mit uns über End-to-End-Testing zu reden. Nachdem wir uns letztens <a href="https://workingdraft.de/436/">mit Frontend-Unit-Testing beschäftigt hatten</a> ein wunderbar passendes Thema. Also griffen wir zu! :)</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:32] <a href="https://www.npmjs.com/package/pentf">&#8222;Next Level&#8220; End-to-End-Testing</a></dt>
<dd>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. <a href="https://github.com/karma-runner/karma">Karma</a> mit dem darunter befindlichen <a href="https://www.w3.org/TR/webdriver/">WebDriver</a> war für das Preact-Szenario nicht geeignet, weil es an bestimmten Stellen durch den genutzten Stack limitiert wird. An <a href="https://jestjs.io/">Jest</a> wiederum stört, dass dieses keine echte Browser zum Testen nutzt, sondern nur ein simuliertes DOM (<a href="https://github.com/jsdom/jsdom">jsdom</a>), das aber manche Dinge, wie zum Beispiel <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer</a> nicht implementiert. Und wenn man Jest mit <a href="https://github.com/puppeteer/puppeteer/">Puppeteer </a>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: <a href="https://www.npmjs.com/package/pentf">pentf</a>.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://replay.io/">Replay</a></dt>
<dd>&#8222;A new debugger for recording and replaying the web.&#8220;</dd>
<dt><a href="https://github.com/microsoft/playwright">Playwright</a></dt>
<dd>&#8222;Playwright is a Node.js library to automate Chromium, Firefox and WebKit with a single API.&#8220;</dd>
</dl>


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 [&#8230;]

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 sch[...]

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 442: „Next Level“-End-to-End-Testing

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 453: Webtech-Bücher schreiben

Working Draft

Revision 452: CORS, CORP, (C)ORB, COOP und COEP

Working Draft

Revision 451: Neue Webstandard-Proposals und Podcast-Verstärkung!

Working Draft

Revision 450: HTML5-Glücksrad (Image Maps, History API, Time-Element, Custom Elements)

Working Draft

Revision 449: CSS-Tools und -Frameworks

Working Draft

Revision 448: TypeScript 4.1

Working Draft

Revision 447: XSS und die HTML Sanitizer API

Working Draft

Revision 446: State of the Art PHP 2020

Working Draft

Revision 445: Color Fonts und Shared Array Buffer

Working Draft

Revision 444: Neue Developer-Tools

Working Draft

Revision 443: Select-Styling und Computed Styles

Working Draft

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

Working Draft