<p>Es ist so weit, wir sprechen wieder mit <a href="https://www.rademacher.digital/">Nikolaus Rademacher</a> über agile Methoden. Der zweite Sprint, in <a href="https://workingdraft.de/510/">Revision 510</a> angekündigt, nun geht es rund.</p>
<h3>[00:00:59] Shownotes</h3>
<dl>
<dt>Agile II &#8211; Refinement, Wasserfall, Kanban</dt>
<dd>Nachdem es in der letzten Sendung viel um die Grundlagen und die Aufgaben eines:r Entwickler:in im agilen Kontext ging, widmeten wir uns dies Mal den ganz praktischen Themen.<br />
Die Zusammenarbeit zwischen unterschiedlichen Disziplinen wird oft unterschiedlich gehandhabt: UX/UI arbeitet einen Sprint voraus, QA hinten dran &#8211; oder doch lieber parallel. Wir sprechen, ob das sinnig ist und wie man dagegen ankommt.<br />
Doch bevor es überhaupt in die Umsetzung geht, sollte man sich mit dem Prozess davor beschäftigen: von der Idee bis zur Umsetzung &#8211; und dann vor allem refinen, refinen, refinen.<br />
Anschließend geht es darum, wie man in einem eher klassischeren Unternehmen mit agilen Methoden &#8222;embedded&#8220; werden kann, um dann noch auf das Thema Feedback-Kultur zu sprechen zu kommen.<br />
Wir schließen ab mit einer Diskussion rund um die Methode Kanban, sprechen dazu, wann es sinnig sein kann, diese zu verwenden und welche Kriterien erfüllt sein sollten.</dd>
</dl>


Es ist so weit, wir sprechen wieder mit Nikolaus Rademacher über agile Methoden. Der zweite Sprint, in Revision 510 angekündigt, nun geht es rund. [00:00:59] Shownotes Agile II &#8211; Refinement, Wasserfall, Kanban Nachdem es in der letzten Sendung viel um die Grundlagen und die Aufgaben eines:r Entwickler:in im agilen Kontext ging, widmeten wir uns dies [&#8230;]

Working Draft

Es ist so weit, wir sprechen wieder mit Nikolaus Rademacher über agile Methoden. Der zweite Sprint, in Revision 510 angekündigt, nun geht es rund.
[00:00:59] Shownotes

Agile II – Refinement, Wasserfall, Kanban
Nachdem es in der letzten Sendun[...]

Es ist so weit, wir sprechen wieder mit Nikolaus Rademacher über agile Methoden. Der zweite Sprint, in Revision 510 angekündigt, nun geht es rund.
[00:00:59] Shownotes

Agile II – Refinement, Wasserfall, Kanban
Nachdem es in der letzten Sendung viel um die Grundlagen und die Aufgaben eines:r Entwickler:in im agilen Kontext ging, widmeten wir uns dies Mal den ganz praktischen Themen.
Die Zusammenarbeit zwischen unterschiedlichen Disziplinen wird oft unterschiedlich gehandhabt: UX/UI arbeitet einen Sprint voraus, QA hinten dran – oder doch lieber parallel. Wir sprechen, ob das sinnig ist und wie man dagegen ankommt.
Doch bevor es überhaupt in die Umsetzung geht, sollte man sich mit dem Prozess davor beschäftigen: von der Idee bis zur Umsetzung – und dann vor allem refinen, refinen, refinen.
Anschließend geht es darum, wie man in einem eher klassischeren Unternehmen mit agilen Methoden „embedded“ werden kann, um dann noch auf das Thema Feedback-Kultur zu sprechen zu kommen.
Wir schließen ab mit einer Diskussion rund um die Methode Kanban, sprechen dazu, wann es sinnig sein kann, diese zu verwenden und welche Kriterien erfüllt sein sollten.

Revision 512: Agile II – Refinement, Wasserfall, Kanban (Sprint 2/2)

<p>Mit <a href="https://twitter.com/drunknzombiecow"><strong>Nils Roehrig</strong></a> und <strong>Kevin Schoenfeld</strong> von REWE digital quatschen Vanessa, Peter und REWE-Digital-Veteran Hans über Microfrontends in der allgemeinen Theorie sowie unter dem Gesichtspunkt der konkreten Umsetzung im Arbeitsalltag von Nils und Kevin.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] Microfrontends</dt>
<dd>Über das Thema <a href="https://micro-frontends.org/">Microfrontends</a> (zuletzt behandelt in den Revisionen <a href="https://workingdraft.de/384/">384</a> und <a href="https://workingdraft.de/407/">407</a>) berichten Nils und Kevin aus der Perspektive von für <a href="https://www.rewe-digital.com/">REWE digital</a> tätigen Frontend-Nerds. Nach kurzem rekapitulieren der Grundbegrifflichkeiten (Microfrontends = anwendung der Microservice-Idee für Web-Frontends) geht es direkt an&#8217;s Eingemachte: wir bequatschen Tradoffs von Dependency-Handling und Komponenten-Entkopplung, Herausforderungen in der Kommunikation (sowohl innerhalb größerer Organisationen als auch auf technischer Ebene) und den Umgang mit Designsystemen. Anhang von Beispielen für große und kleine Microfrontends bei Rewe digital beleuchten wir Fragen rund um Modularisierung, Komposition und Aufteilung von Microfrontends, diskutieren wie Microfrontends mit Server-Side-Rendering verheiratet werden können, streifen den Problemkomplex „Serverseitige Web Components“ und kommen dann auf Performance-Optimierung und Caching zu sprechen. Zum Ende geht&#8217;s um <a href="https://www.mosaic9.org/">Project Mosaic</a>, den Umgang mit zentralisierten Ressourcen (LocalStorage, Routing o.Ä.), Event-Handling, die Migration weg vom Frontend-Monolithen, das Zusammenspiel von Microfront- und Microbackend sowie Aspekte, die nicht sauber in eine Domäne passen. Tradeoffs, wohin man auch schaut!</p>
<p>Weiterführende Links:</p>
<ul>
<li><a href="https://micro-frontends.org/">micro-frontends.org</a></li>
<li><a href="https://speakerdeck.com/drunknzombiecow/micro-frontends-im-rewe-shop-evolution-eines-headers-1">Micro-Frontends im REWE Shop &#8211; Evolution eines Headers</a> (Slides)</li>
<li><a href="https://github.com/rewe-digital-incubator/integration-patterns">Example integration-patterns</a> (Beispiele von REWE digital)</li>
</ul>
</dd>
</dl>


Mit Nils Roehrig und Kevin Schoenfeld von REWE digital quatschen Vanessa, Peter und REWE-Digital-Veteran Hans über Microfrontends in der allgemeinen Theorie sowie unter dem Gesichtspunkt der konkreten Umsetzung im Arbeitsalltag von Nils und Kevin. Schaunotizen [00:00:59] Microfrontends Über das Thema Microfrontends (zuletzt behandelt in den Revisionen 384 und 407) berichten Nils und Kevin aus der [&#8230;]

Mit Nils Roehrig und Kevin Schoenfeld von REWE digital quatschen Vanessa, Peter und REWE-Digital-Veteran Hans über Microfrontends in der allgemeinen Theorie sowie unter dem Gesichtspunkt der konkreten Umsetzung im Arbeitsalltag von Nils und Kevin.
S[...]

Mit Nils Roehrig und Kevin Schoenfeld von REWE digital quatschen Vanessa, Peter und REWE-Digital-Veteran Hans über Microfrontends in der allgemeinen Theorie sowie unter dem Gesichtspunkt der konkreten Umsetzung im Arbeitsalltag von Nils und Kevin.
Schaunotizen

[00:00:59] Microfrontends
Über das Thema Microfrontends (zuletzt behandelt in den Revisionen 384 und 407) berichten Nils und Kevin aus der Perspektive von für REWE digital tätigen Frontend-Nerds. Nach kurzem rekapitulieren der Grundbegrifflichkeiten (Microfrontends = anwendung der Microservice-Idee für Web-Frontends) geht es direkt an’s Eingemachte: wir bequatschen Tradoffs von Dependency-Handling und Komponenten-Entkopplung, Herausforderungen in der Kommunikation (sowohl innerhalb größerer Organisationen als auch auf technischer Ebene) und den Umgang mit Designsystemen. Anhang von Beispielen für große und kleine Microfrontends bei Rewe digital beleuchten wir Fragen rund um Modularisierung, Komposition und Aufteilung von Microfrontends, diskutieren wie Microfrontends mit Server-Side-Rendering verheiratet werden können, streifen den Problemkomplex „Serverseitige Web Components“ und kommen dann auf Performance-Optimierung und Caching zu sprechen. Zum Ende geht’s um Project Mosaic, den Umgang mit zentralisierten Ressourcen (LocalStorage, Routing o.Ä.), Event-Handling, die Migration weg vom Frontend-Monolithen, das Zusammenspiel von Microfront- und Microbackend sowie Aspekte, die nicht sauber in eine Domäne passen. Tradeoffs, wohin man auch schaut!
Weiterführende Links:

micro-frontends.org
Micro-Frontends im REWE Shop – Evolution eines Headers (Slides)
Example integration-patterns (Beispiele von REWE digital)

Revision 511: Microfrontends bei REWE digital

<p>Über das Thema der Rolle und Verantwortung von Entwicklern und Entwicklerinnen in agilen Teams reden unsere Hosts Hans, Peter und Vanessa heute mit <a href="https://www.rademacher.digital/">Nikolaus Rademacher</a>, Senior Frontend Entwickler bei sipgate. Da sich das Thema als unendlich erweist, betrachten wir diese Revision als einen ersten Sprint und lassen in ein paar Wochen Teil 2 folgen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:58] Die Rolle &amp; Verantwortung von Entwickler:innen in agilen Teams</dt>
<dd>Wir versuchen zu ergründen, wie sich Methoden des agilen Arbeitens in große Unternehmen einführen lassen. Wir diskutieren, ob sich <a href="https://de.wikipedia.org/wiki/Scrum">Scrum</a> und die anderen Techniken und <a href="https://agilemanifesto.org/principles.html">Prinzipien</a> des <a href="https://agilemanifesto.org/">Agile Manifesto</a> am besten von oben oder von unten einführen lassen. Über die Umsetzung von agilen Techniken kommen wir zu Fragen der Wissenvermittlung und dem Unterschied zwischen echtem agilen Arbeiten in Kontrast zum gedankenloses Anwenden von Regeln. Wir singen ein Loblied auf Retro und Refinement, beleuchten (unter dem Eindruck von <a href="https://de.wikipedia.org/wiki/Log4j#Bekanntwerden_einer_Sicherheitsl%C3%BCcke_im_Dezember_2021">log4j</a>) den Umgang mit plötzlichen Bugs und Notfällen und deklarieren die Woche zur optimalen Sprit-Dauer. Zum Ende hin kommen wir zum Auf- und Abbau von technischen Schulden, diskutieren die Tradeoffs der Tschernobyl-Betonsarg-Ansatzes für Tech Debt und beschließen den nächsten Revisions-Sprint der agilen Workingdraft.</dd>
</dl>


Über das Thema der Rolle und Verantwortung von Entwicklern und Entwicklerinnen in agilen Teams reden unsere Hosts Hans, Peter und Vanessa heute mit Nikolaus Rademacher, Senior Frontend Entwickler bei sipgate. Da sich das Thema als unendlich erweist, betrachten wir diese Revision als einen ersten Sprint und lassen in ein paar Wochen Teil 2 folgen. Schaunotizen [&#8230;]

Über das Thema der Rolle und Verantwortung von Entwicklern und Entwicklerinnen in agilen Teams reden unsere Hosts Hans, Peter und Vanessa heute mit Nikolaus Rademacher, Senior Frontend Entwickler bei sipgate. Da sich das Thema als unendlich erweist,[...]

Über das Thema der Rolle und Verantwortung von Entwicklern und Entwicklerinnen in agilen Teams reden unsere Hosts Hans, Peter und Vanessa heute mit Nikolaus Rademacher, Senior Frontend Entwickler bei sipgate. Da sich das Thema als unendlich erweist, betrachten wir diese Revision als einen ersten Sprint und lassen in ein paar Wochen Teil 2 folgen.
Schaunotizen

[00:00:58] Die Rolle & Verantwortung von Entwickler:innen in agilen Teams
Wir versuchen zu ergründen, wie sich Methoden des agilen Arbeitens in große Unternehmen einführen lassen. Wir diskutieren, ob sich Scrum und die anderen Techniken und Prinzipien des Agile Manifesto am besten von oben oder von unten einführen lassen. Über die Umsetzung von agilen Techniken kommen wir zu Fragen der Wissenvermittlung und dem Unterschied zwischen echtem agilen Arbeiten in Kontrast zum gedankenloses Anwenden von Regeln. Wir singen ein Loblied auf Retro und Refinement, beleuchten (unter dem Eindruck von log4j) den Umgang mit plötzlichen Bugs und Notfällen und deklarieren die Woche zur optimalen Sprit-Dauer. Zum Ende hin kommen wir zum Auf- und Abbau von technischen Schulden, diskutieren die Tradeoffs der Tschernobyl-Betonsarg-Ansatzes für Tech Debt und beschließen den nächsten Revisions-Sprint der agilen Workingdraft.

Revision 510: Die Rolle & Verantwortung von Entwickler:innen in agilen Teams (Sprint 1/2)

<p>Dieses Mal hat Schepp <a href="https://patricklipinski.de/">Patrick Lipinski</a> aka <a href="https://lip.pe/">Lippe</a> aka <a href="https://twitter.com/dickelippe">@dickelippe</a> zu einer Runde Glücksrad zu Gast. Wir kennen Patrick schon sehr lange von dem ganzen Konferenz-Getingele, besser bekannt unter dem Begriff &#8222;Klassenfahrt&#8220;, und bei der letzten gemeinsamen Konferenz kamen wir darauf, dass er doch einmal Gast bei uns sein könnte. Gesagt, getan!</p>
<h3>[00:00:59] Glücksrad</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/appearance">CSS&#8216; <code>appearance</code>-Property</a></dt>
<dd>Los geht es mit der <code>appearance</code>-Property. Patrick und Schepp stellen fest, dass sie diese CSS-Eigenschaft eigentlich immer nur mit dem Wert <code>none</code> verwenden. Gibt es auch andere Use-Cases? Schepp kommt außerdem in den Sinn, dass man <a href="https://twitter.com/patrickbrosset/status/1470346157100568579">im neuesten Edge Canary</a> das vom <a href="https://open-ui.org/">Open UI Projekt</a> konzipierte, und frei umgestaltbare <code>&lt;selectmenu&gt;</code> ausprobieren kann. Wir debattieren zum Abschluss kurz über Reset vs. Normalize und über <a href="https://elad.medium.com/the-new-css-reset-53f41f13282e">die neueste Form des Resets</a>.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/applet">Das &lt;applet&gt;-Element</a></dt>
<dd>Die Anfangszeiten des Webs grüßen und wir erinnern uns <a href="http://www.jaydax.co.uk/ilakeeffect.html">an Java-Applet-getriebene Wellen-Effekte</a> auf Websites. Auch Java-getrieben, aber anders schlimm: Die Log4j-Sicherheitslücke, über das <a href="https://twitter.com/isotopp">Kristian Köhntopp</a> <a href="https://blog.koehntopp.info/2021/12/14/funktioniert-wie-spezifiziert.html">ein herrliches Meinungsstück geschrieben hat</a>.</dd>
<dt><a href="https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute">Das <code>title</code>-Attribut</a></dt>
<dd>Wird leider meist als Tooltip oder von SEOs missbraucht. Wo das <code>title</code>-Attribut sinnvoll eingesetzt werden kann, ist z. B. als Sidekick des <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr">&lt;abbr&gt;-Elements</a>.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/time-percentage">Der CSS-Datentyp <code>&lt;time-percentage&gt;</code></a></dt>
<dd>Mehr als das, was wir in MDN lesen können, wissen wir in der Folge selbst nicht über diesen Datentyp: Er darf wahlweise ein Zeitwert oder ein Prozentwert (einer Zeit) sein. Anders als Schepp vermutet, hat das Ganze aber nichts mit den neuen <a href="https://css-tricks.com/scroll-linked-animations-with-the-web-animations-api-waapi-and-scrolltimeline/">Scroll-Linked-Animations</a> zu tun.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Gyroscope">Die Gyroscope API</a></dt>
<dd>Eine der ersten APIs, die mit HTML5 aus der Taufe gehoben wurden. Schepp erinnert sich, dass Macbooks auch ein eingebautes Gyroskop/Accelerometer haben, <a href="https://news.ycombinator.com/item?id=2192087">auf das man aus Browsern heraus zugreifen kann</a>.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:host-context()">Die CSS <code>:host-context()</code>-Pseudoklasse</a></dt>
<dd>Über diese Pseudoklasse kann eine Webcomponent trotz Shadow-DOM-Barriere herausfinden, in was für einem Light-DOM-Baum ihr Shadow-Dom-Host steckt. Gut, wenn die Komponente sich an verschiedene Kontexte anpassen können soll.</dd>
<dt>CSS Global Keywords</dt>
<dd>Globale Keywords in CSS wären Dinge wie <code>auto</code>, <code>none</code>, <code>inherit</code>, <code>revert</code> oder <code>initial</code>, die man in so gut wie jede Eigenschaft stecken kann.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode">HTMLs <code>inputmode</code>-Attribut</a></dt>
<dd>Über das <code>inputmode</code>-Attribut können Web-Entwickelnde auf einem &lt;input&gt;-Element steuern, welche Art von Softkeyboard zur Eingabe angezeigt wird. Praktisch, wenn es etwa in einer Anmeldung ein Feld gibt, in dem man entweder seine E-Mail-Adresse oder seinen Benutzernamen eingeben kann.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect">Web Animations API Keyframe Effects <code>iterationComposite</code>-Eigenschaft</a></dt>
<dd>Diese Eigenschaft, von der wir zuvor noch nicht gehört haben, scheint zu steuern, ob erneute Animationsdurchgänge einen vorherigen Wert ersetzen oder sich aufaddieren. Tja, wieder was gelernt und vielleicht brauchen wir es eines Tages mal? Sowohl Patrick als auch Schepp haben die Web Animations API bislang noch nicht eingesetzt, allerdings kommt Schepp <a href="https://www.youtube.com/watch?v=9-6CKCz58A8">eine bestimmte Folge</a> der <a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcIAKIQFsNbV0JDws_G_bnNo9">&#8222;HTTP 203&#8220;-Serie</a> in den Sinn, in welcher Jake ein ganz bestimmtes Problem nur mit Hilfe des Web Animations API lösen konnte. Sehenswert!</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/ratio">Der CSS-Datentyp <code>ratio</code></a></dt>
<dd>Wurde der <code>ratio</code>-Datentyp früher ausschließlich in Media Queries genutzt, kommt er neuerdings auch in der CSS-Eigenschaft namens <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio"><code>aspect-ratio</code></a> zum Einsatz.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Presentation_API">Die Presentation API</a></dt>
<dd>Wir wissen nur eines: Es gibt sie wohl. Wer weiß, wofür sie gut ist: Bitte melden! <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f605.png" alt="😅" class="wp-smiley" style="height: 1em; max-height: 1em;" /></dd>
<dt>CSS&#8216; <code>@property</code>-Rule</dt>
<dd>Wir finden diese ist das Beste des ganzen <a href="https://web.dev/houdini-how/">CSS-Houdini-Projekts</a> und verweisen auf <a href="https://wowirsindistvorne.show/web-performance-mit-christian-schepp-schaefer/#:~:text=Schepp%3A%20CSS%20%40property%20Rule">Schepps Darlegungen in der 33-ten Folge des &#8222;Wo wir sind ist vorne&#8220;-Podcasts</a> (ab 00:12:31).</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-stroke">CSS&#8216; <code>-webkit-text-stroke</code>-Property</a></dt>
<dd>Patrick erzählte in der Vorbesprechung von der Möglichkeit, farbige Text-Umrandungen nicht nur in SVG, sondern auch in HTML per CSS setzen. <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f60a.png" alt="😊" class="wp-smiley" style="height: 1em; max-height: 1em;" /></dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order">CSS&#8216; <code>paint-order</code>-Property</a></dt>
<dd>Die zweite CSS-Eigenschaft, von der Patrick erzählte, war <code>paint-order</code>, das in Kombination mit <code>-webkit-text-stroke</code> nützlich wäre, um eine Umrandung wirklich nur außen herum gehen zu lassen, indem man den Hintergrund/Fill drüber legt. Leider wird diese noch nicht außerhalb von SVG unterstützt. <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f641.png" alt="🙁" class="wp-smiley" style="height: 1em; max-height: 1em;" /></dd>
<dt><a href="https://patricklipinski.de/">Patrick sucht aktuell eine Position als UX-Engineer!</a></dt>
<dd>Ihr fragt, was macht denn ein UX-Engineer eigentlich? Kein Problem, auch hier können wir wieder auf die Kollegen vom <a href="https://wowirsindistvorne.show">&#8222;Wo wir sind ist vorne&#8220;-Podcast</a> verweisen, <a href="https://wowirsindistvorne.show/ux-engineering-barrierefreiheit-mit-dirk-ginader/">die zu dem Thema eine Folge mit Dirk Ginader aufgenommen haben</a>. Wer also jemanden weiß, der jemanden weiß… Immer her mit den Jobangeboten!</dd>
</dl>


Dieses Mal hat Schepp Patrick Lipinski aka Lippe aka @dickelippe zu einer Runde Glücksrad zu Gast. Wir kennen Patrick schon sehr lange von dem ganzen Konferenz-Getingele, besser bekannt unter dem Begriff &#8222;Klassenfahrt&#8220;, und bei der letzten gemeinsamen Konferenz kamen wir darauf, dass er doch einmal Gast bei uns sein könnte. Gesagt, getan! [00:00:59] Glücksrad CSS&#8216; [&#8230;]

Dieses Mal hat Schepp Patrick Lipinski aka Lippe aka @dickelippe zu einer Runde Glücksrad zu Gast. Wir kennen Patrick schon sehr lange von dem ganzen Konferenz-Getingele, besser bekannt unter dem Begriff „Klassenfahrt“, und bei der letzt[...]

Dieses Mal hat Schepp Patrick Lipinski aka Lippe aka @dickelippe zu einer Runde Glücksrad zu Gast. Wir kennen Patrick schon sehr lange von dem ganzen Konferenz-Getingele, besser bekannt unter dem Begriff „Klassenfahrt“, und bei der letzten gemeinsamen Konferenz kamen wir darauf, dass er doch einmal Gast bei uns sein könnte. Gesagt, getan!
[00:00:59] Glücksrad

CSS‘ appearance-Property
Los geht es mit der appearance-Property. Patrick und Schepp stellen fest, dass sie diese CSS-Eigenschaft eigentlich immer nur mit dem Wert none verwenden. Gibt es auch andere Use-Cases? Schepp kommt außerdem in den Sinn, dass man im neuesten Edge Canary das vom Open UI Projekt konzipierte, und frei umgestaltbare <selectmenu> ausprobieren kann. Wir debattieren zum Abschluss kurz über Reset vs. Normalize und über die neueste Form des Resets.
Das <applet>-Element
Die Anfangszeiten des Webs grüßen und wir erinnern uns an Java-Applet-getriebene Wellen-Effekte auf Websites. Auch Java-getrieben, aber anders schlimm: Die Log4j-Sicherheitslücke, über das Kristian Köhntopp ein herrliches Meinungsstück geschrieben hat.
Das title-Attribut
Wird leider meist als Tooltip oder von SEOs missbraucht. Wo das title-Attribut sinnvoll eingesetzt werden kann, ist z. B. als Sidekick des <abbr>-Elements.
Der CSS-Datentyp <time-percentage>
Mehr als das, was wir in MDN lesen können, wissen wir in der Folge selbst nicht über diesen Datentyp: Er darf wahlweise ein Zeitwert oder ein Prozentwert (einer Zeit) sein. Anders als Schepp vermutet, hat das Ganze aber nichts mit den neuen Scroll-Linked-Animations zu tun.
Die Gyroscope API
Eine der ersten APIs, die mit HTML5 aus der Taufe gehoben wurden. Schepp erinnert sich, dass Macbooks auch ein eingebautes Gyroskop/Accelerometer haben, auf das man aus Browsern heraus zugreifen kann.
Die CSS :host-context()-Pseudoklasse
Über diese Pseudoklasse kann eine Webcomponent trotz Shadow-DOM-Barriere herausfinden, in was für einem Light-DOM-Baum ihr Shadow-Dom-Host steckt. Gut, wenn die Komponente sich an verschiedene Kontexte anpassen können soll.
CSS Global Keywords
Globale Keywords in CSS wären Dinge wie auto, none, inherit, revert oder initial, die man in so gut wie jede Eigenschaft stecken kann.
HTMLs inputmode-Attribut
Über das inputmode-Attribut können Web-Entwickelnde auf einem <input>-Element steuern, welche Art von Softkeyboard zur Eingabe angezeigt wird. Praktisch, wenn es etwa in einer Anmeldung ein Feld gibt, in dem man entweder seine E-Mail-Adresse oder seinen Benutzernamen eingeben kann.
Web Animations API Keyframe Effects iterationComposite-Eigenschaft
Diese Eigenschaft, von der wir zuvor noch nicht gehört haben, scheint zu steuern, ob erneute Animationsdurchgänge einen vorherigen Wert ersetzen oder sich aufaddieren. Tja, wieder was gelernt und vielleicht brauchen wir es eines Tages mal? Sowohl Patrick als auch Schepp haben die Web Animations API bislang noch nicht eingesetzt, allerdings kommt Schepp eine bestimmte Folge der „HTTP 203“-Serie in den Sinn, in welcher Jake ein ganz bestimmtes Problem nur mit Hilfe des Web Animations API lösen konnte. Sehenswert!
Der CSS-Datentyp ratio
Wurde der ratio-Datentyp früher ausschließlich in Media Queries genutzt, kommt er neuerdings auch in der CSS-Eigenschaft namens aspect-ratio zum Einsatz.
Die Presentation API
Wir wissen nur eines: Es gibt sie wohl. Wer weiß, wofür sie gut ist: Bitte melden! 
CSS‘ @property-Rule
Wir finden diese ist das Beste des ganzen CSS-Houdini-Projekts und verweisen auf Schepps Darlegungen in der 33-ten Folge des „Wo wir sind ist vorne“-Podcasts (ab 00:12:31).

Links

CSS‘ -webkit-text-stroke-Property
Patrick erzählte in der Vorbesprechung von der Möglichkeit, farbige Text-Umrandungen nicht nur in SVG, sondern auch in HTML per CSS setzen. 
CSS‘ paint-order-Property
Die zweite CSS-Eigenschaft, von der Patrick erzählte, war paint-order, das in Kombination mit [...]

Revision 509: Letzte Runde Glücksrad für 2021

<p>Einmal alles andersherum! Diesmal führt unser Gast <a href="https://mchls.works/">Ole Michaelis</a>, Software-Entwickler, Konferenzsprecher, Organisator und Jonglierer, ein Interview mit unseren Hosts Hans und Vanessa zum Thema &#8222;wie schafft man sich eigentlich neues Wissen drauf&#8220;?</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] Lernen, Weiterbildung und Wissenserweiterung</dt>
<dd>Ole erzählt uns zu Beginn, dass er mittlerweile lange genug im Bereich der (Web-)Entwicklungen arbeitet, um bei neuen Frameworks und Bibliotheken das Gefühl zu bekommen: das gab&#8217;s doch fast genauso vorher schonmal! Im Anschluss wird diskutiert, wie man eigentlich Trends und Hypes erkennt, und von Konzepten unterscheidet, die sich im Endeffekt durchsetzen werden oder durchgesetzt haben.</p>
<p>Auf dieser Grundlage, erörtern sie, we man sich dafür entscheidet, was man sich tatsächlich genauer ansieht und lernt. Für Ole war es zum Beispiel <a href="https://www.haskell.org/">Haskell</a>, worauf sich Vanessa hin an ihre schöne <a href="https://de.wikipedia.org/wiki/Standard_ML">Standard ML (SML)</a> Zeit in der Universität erinnert. Weiterhin werden verschiedene Medien zum Lernen besprochen, wie zum Beispiel Videos auf YouTube, Newsletter (Links siehe unten), Kursplattformen, etc.</p>
<p>Die nächste Frage, wenn man schon einmal angefangen hat zu lernen, ist die, wann man wieder aufhört. Ab welchem Zeitpunkt entscheidet man sich dafür, dass man genug über dieses Thema weiß?</p>
<p>Abschließend, ein sehr wichtiger Aspekt, geben Ole, Hans und Vanessa ihre Meinung zum Thema &#8222;Lernen während der Arbeitszeit&#8220; bzw. &#8222;Lernen finanziert durch die Firma&#8220; ab. Alle sind sehr interessiert an der Meinung der Hörerrinnen und Hörer!</dd>
</dl>
<h3>Links</h3>
<ul>
<li>Tools
<ul>
<li><a href="https://apps.apple.com/de/app/things-3/id904237743">Things 3</a></li>
<li><a href="https://apps.apple.com/de/app/abyss-read-later/id1507396839">Abyss</a></li>
</ul>
</li>
<li>Programmierspiele und Co.
<ul>
<li><a href="https://adventofcode.com/">Advent of Code</a></li>
<li><a href="https://tomorrowcorporation.com/humanresourcemachine">Human Resource Machine</a></li>
<li><a href="http://www.langtonant.com/">Langton Ant</a></li>
<li><a href="https://playgameoflife.com/">Game of Life</a></li>
<li><a href="https://play.elevatorsaga.com/">Elevator Saga</a></li>
</ul>
</li>
<li>Newsletter
<ul>
<li><a href="https://www.stefanjudis.com/newsletter/">Newsletter von Stefan Judis</a></li>
<li><a href="https://www.htmhell.dev/">HTMHell</a></li>
<li><a href="https://www.getrevue.co/profile/workingdraft">Release Notes</a> von Working Draft</li>
</ul>
</li>
</ul>


Einmal alles andersherum! Diesmal führt unser Gast Ole Michaelis, Software-Entwickler, Konferenzsprecher, Organisator und Jonglierer, ein Interview mit unseren Hosts Hans und Vanessa zum Thema &#8222;wie schafft man sich eigentlich neues Wissen drauf&#8220;? Schaunotizen [00:00:59] Lernen, Weiterbildung und Wissenserweiterung Ole erzählt uns zu Beginn, dass er mittlerweile lange genug im Bereich der (Web-)Entwicklungen arbeitet, um bei [&#8230;]

Einmal alles andersherum! Diesmal führt unser Gast Ole Michaelis, Software-Entwickler, Konferenzsprecher, Organisator und Jonglierer, ein Interview mit unseren Hosts Hans und Vanessa zum Thema „wie schafft man sich eigentlich neues Wissen drau[...]

Einmal alles andersherum! Diesmal führt unser Gast Ole Michaelis, Software-Entwickler, Konferenzsprecher, Organisator und Jonglierer, ein Interview mit unseren Hosts Hans und Vanessa zum Thema „wie schafft man sich eigentlich neues Wissen drauf“?
Schaunotizen

[00:00:59] Lernen, Weiterbildung und Wissenserweiterung
Ole erzählt uns zu Beginn, dass er mittlerweile lange genug im Bereich der (Web-)Entwicklungen arbeitet, um bei neuen Frameworks und Bibliotheken das Gefühl zu bekommen: das gab’s doch fast genauso vorher schonmal! Im Anschluss wird diskutiert, wie man eigentlich Trends und Hypes erkennt, und von Konzepten unterscheidet, die sich im Endeffekt durchsetzen werden oder durchgesetzt haben.
Auf dieser Grundlage, erörtern sie, we man sich dafür entscheidet, was man sich tatsächlich genauer ansieht und lernt. Für Ole war es zum Beispiel Haskell, worauf sich Vanessa hin an ihre schöne Standard ML (SML) Zeit in der Universität erinnert. Weiterhin werden verschiedene Medien zum Lernen besprochen, wie zum Beispiel Videos auf YouTube, Newsletter (Links siehe unten), Kursplattformen, etc.
Die nächste Frage, wenn man schon einmal angefangen hat zu lernen, ist die, wann man wieder aufhört. Ab welchem Zeitpunkt entscheidet man sich dafür, dass man genug über dieses Thema weiß?
Abschließend, ein sehr wichtiger Aspekt, geben Ole, Hans und Vanessa ihre Meinung zum Thema „Lernen während der Arbeitszeit“ bzw. „Lernen finanziert durch die Firma“ ab. Alle sind sehr interessiert an der Meinung der Hörerrinnen und Hörer!

Links

Tools

Things 3
Abyss


Programmierspiele und Co.

Advent of Code
Human Resource Machine
Langton Ant
Game of Life
Elevator Saga


Newsletter

Newsletter von Stefan Judis
HTMHell
Release Notes von Working Draft

Revision 508: Lernen, Weiterbildung und Wissenserweiterung

<p>Diese Revision nehmen Vanessa und Schepp die Veröffentlichung des diesjährigen Web Almanac zum Anlass, sich ein paar der darin beleuchteten Bereiche heraus zu picken und über die Daten und Erkenntnisse zu reden.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] <a href="https://almanac.httparchive.org/en/2021/">Der Web Almanac 2021</a></dt>
<dd>Aufgrund des großen Umfangs und der Detailtiefe entscheiden wir uns, uns auf ein paar wenige Themen aus dem Almanac zu beschränken. Unsere Wahl fällt auf <a href="https://almanac.httparchive.org/en/2021/javascript">JavaScript</a>, <a href="https://almanac.httparchive.org/en/2021/structured-data">Structured Data</a>, <a href="https://almanac.httparchive.org/en/2021/accessibility">Accessibility</a>, <a href="https://almanac.httparchive.org/en/2021/page-weight">Page Weight</a> und <a href="https://almanac.httparchive.org/en/2021/cms">CMS</a>. Wir kommen relativ zu Anfang auf das Thema Security zu sprechen und nennen das Audit-Werkzeug <a href="https://snyk.io/">Snyk</a>, verweisen auf eine vergangene Revision zum Thema <a href="https://workingdraft.de/447/">Mutated XSS</a> erinnern uns an Blogposts, die beschreiben, <a href="https://medium.com/hackernoon/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5">wie man npm-Pakete theoretisch zum Abgreifen von Daten missbrauchen könnte</a> oder <a href="https://blog.expo.dev/ua-parser-js-and-malicious-npm-packages-8c13ee4141a">wie es praktisch tatsächlich passiert</a>. Schepp lernt nebenbei, dass es einen <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap"><code>SourceMap</code>-HTTP-Header</a> gibt. Hinsichtlich Accessibility verweisen wir auf eine gar nicht so alte <a href="https://workingdraft.de/503/">Episode von uns</a>, erwähnen Manuel Matuzovićs Experiment, diversen automatisierten Accessibility-Audits trotz völlig unzugänglicher Webseite perfekte Accessibility-Scores abzutrotzen und dass wir beim Accessibility-Club in einem Vortrag von Karl Groves gelernt haben, was sogenannte <a href="https://www.youtube.com/watch?v=2ea1TRSjN94">Accessibility-Overlays doch für ein Schlangenöl sind</a>. Im Abschnitt CMS sind wir positiv davon überrascht, wie gut TYPO3 im Bereich Performance abschneidet und wir erwähnen auch kurz das Headless CMS Storyblok, dessen Macher vor nicht all zu langer Zeit <a href="https://workingdraft.de/495/">bei uns waren</a>.</dd>
</dl>


Diese Revision nehmen Vanessa und Schepp die Veröffentlichung des diesjährigen Web Almanac zum Anlass, sich ein paar der darin beleuchteten Bereiche heraus zu picken und über die Daten und Erkenntnisse zu reden. Schaunotizen [00:01:00] Der Web Almanac 2021 Aufgrund des großen Umfangs und der Detailtiefe entscheiden wir uns, uns auf ein paar wenige Themen aus [&#8230;]

Diese Revision nehmen Vanessa und Schepp die Veröffentlichung des diesjährigen Web Almanac zum Anlass, sich ein paar der darin beleuchteten Bereiche heraus zu picken und über die Daten und Erkenntnisse zu reden.
Schaunotizen

[00:01:00] Der Web Alma[...]

Diese Revision nehmen Vanessa und Schepp die Veröffentlichung des diesjährigen Web Almanac zum Anlass, sich ein paar der darin beleuchteten Bereiche heraus zu picken und über die Daten und Erkenntnisse zu reden.
Schaunotizen

[00:01:00] Der Web Almanac 2021
Aufgrund des großen Umfangs und der Detailtiefe entscheiden wir uns, uns auf ein paar wenige Themen aus dem Almanac zu beschränken. Unsere Wahl fällt auf JavaScript, Structured Data, Accessibility, Page Weight und CMS. Wir kommen relativ zu Anfang auf das Thema Security zu sprechen und nennen das Audit-Werkzeug Snyk, verweisen auf eine vergangene Revision zum Thema Mutated XSS erinnern uns an Blogposts, die beschreiben, wie man npm-Pakete theoretisch zum Abgreifen von Daten missbrauchen könnte oder wie es praktisch tatsächlich passiert. Schepp lernt nebenbei, dass es einen SourceMap-HTTP-Header gibt. Hinsichtlich Accessibility verweisen wir auf eine gar nicht so alte Episode von uns, erwähnen Manuel Matuzovićs Experiment, diversen automatisierten Accessibility-Audits trotz völlig unzugänglicher Webseite perfekte Accessibility-Scores abzutrotzen und dass wir beim Accessibility-Club in einem Vortrag von Karl Groves gelernt haben, was sogenannte Accessibility-Overlays doch für ein Schlangenöl sind. Im Abschnitt CMS sind wir positiv davon überrascht, wie gut TYPO3 im Bereich Performance abschneidet und wir erwähnen auch kurz das Headless CMS Storyblok, dessen Macher vor nicht all zu langer Zeit bei uns waren.

Revision 507: Der Web Almanac 2021

<p>Anlässlich Hans&#8216; Mitwirken an der mittlerweile leider eingestellten Hörbuch- und Podcast-Plattform FYEO, reden wir heute über die Herausforderungen, die der Bau eines 1,6 Millionen Podcasts umfassenden Katalogs mit sich bringt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:02] Herausforderungen beim Bau eines Podcast-Katalogs</dt>
<dd>Zu Beginn klären wir, wie Podcasts eigentlich gehostet, veröffentlicht und verteilt werden. Viele Podcasts nutzen zum Hosten ihrer Audio-Dateien spezialisierte Anbieter wie <a href="https://anchor.fm/">anchor.fm</a> oder <a href="https://www.podigee.com/">Podigee</a>. Andere, wie wir, hosten ihre Audios selbst (und erzeugen damit 2 Terabytes an Traffic im Monat, Chapeau an dieser Stelle an <a href="https://all-inkl.com/">ALL-INKL.COM</a>).</p>
<p>In beiden Fällen benötigt man dann einen speziellen <a href="https://podcasters.apple.com/support/823-podcast-requirements">Podcast-Atom/RSS-Feed</a>, der entweder von den Hosting-Plattformen ausgespuckt wird, oder von der eigenen Webseite, z.B. in Form eines WordPress mit <a href="https://de.wordpress.org/plugins/podlove-podcasting-plugin-for-wordpress/">Podcasting-Plugin</a>.</p>
<p>Aufgrund dieses dezentralen Hosting-Ansatzes, werden Podcasts von den Podcast-Katalogen dieser Welt erst einmal gar nicht gefunden. Stattdessen musss man selbst tätig werden, und sie bei allen gewünschten Plattformen eintragen, sei es bei <a href="https://podcasters.apple.com/">Apple</a>, <a href="https://podcasts.google.com/">Google</a> oder <a href="https://podcasters.spotify.com/">Spotify</a>. Am Apple-iTunes-Verzeichnis wiederum bedienen sich viele weitere, kleinere Podcasting-Plattformen, um Podcasts zu finden und zu ihrem eigenen Fundus hinzuzufügen. So lief das auch bei Hans&#8216; ehemaligen Projekt.</p>
<p>Fortan ging anschließend darum, mit klugen Herangehensweisen zu erreichen, dass von den Podcastmacher*innen veröffentlichte Episoden schnell auf der Podcast-Plattform angezeigt werden. Das ist insofern nicht so einfach, als dass die Podcast-Feeds einem Pull- statt einem Push-Prinzip folgen, man Feeds aber auch nicht unendlich häufig anfragen kann.</p>
<p>Für Podcaster ist es jedenfalls wünschenswert, auf so vielen Plattformen wie möglich vertreten zu sein, damit der Umfang der Hörerschaft wächst, und andererseits auch, um von Statistiken zu Abspielverhalten und Demografie zu profitieren, die diese Anbieter im Gegenzug bereitstellen.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="mailto:p%69%65%6C.s%61%62%69ne@%67o%6Fglem%61%69l.com">Unsere Audioproducerin Sabine Piel</a></dt>
<dd>Seit Sabine uns unterstützt, schaffen wir es endlich, Episoden regelmäßig zu veröffentlichen <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f64f.png" alt="🙏" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/13.0.0/72x72/2764.png" alt="❤" class="wp-smiley" style="height: 1em; max-height: 1em;" /></dd>
<dt><a href="https://wowirsindistvorne.show/web-performance-mit-christian-schepp-schaefer/">Wo wir sind ist vorne № 33: Web Performance</a></dt>
<dd>Schepp war zu Gast im sehr empfehlenswerten Frontend-Podcast von Moritz Gießmann und Constantin Groß namens &#8222;Wo wir sind ist vorne&#8220;. Dort haben die drei einen 3,5-Stunden-Brecher zum Thema &#8222;Web Performance&#8220; aufgenommen, bei dem keine Frage mehr offen bleiben dürfte.</dd>
</dl>


Anlässlich Hans&#8216; Mitwirken an der mittlerweile leider eingestellten Hörbuch- und Podcast-Plattform FYEO, reden wir heute über die Herausforderungen, die der Bau eines 1,6 Millionen Podcasts umfassenden Katalogs mit sich bringt. Schaunotizen [00:01:02] Herausforderungen beim Bau eines Podcast-Katalogs Zu Beginn klären wir, wie Podcasts eigentlich gehostet, veröffentlicht und verteilt werden. Viele Podcasts nutzen zum Hosten ihrer [&#8230;]

Anlässlich Hans‘ Mitwirken an der mittlerweile leider eingestellten Hörbuch- und Podcast-Plattform FYEO, reden wir heute über die Herausforderungen, die der Bau eines 1,6 Millionen Podcasts umfassenden Katalogs mit sich bringt.
Schaunotizen

[[...]

Anlässlich Hans‘ Mitwirken an der mittlerweile leider eingestellten Hörbuch- und Podcast-Plattform FYEO, reden wir heute über die Herausforderungen, die der Bau eines 1,6 Millionen Podcasts umfassenden Katalogs mit sich bringt.
Schaunotizen

[00:01:02] Herausforderungen beim Bau eines Podcast-Katalogs
Zu Beginn klären wir, wie Podcasts eigentlich gehostet, veröffentlicht und verteilt werden. Viele Podcasts nutzen zum Hosten ihrer Audio-Dateien spezialisierte Anbieter wie anchor.fm oder Podigee. Andere, wie wir, hosten ihre Audios selbst (und erzeugen damit 2 Terabytes an Traffic im Monat, Chapeau an dieser Stelle an ALL-INKL.COM).
In beiden Fällen benötigt man dann einen speziellen Podcast-Atom/RSS-Feed, der entweder von den Hosting-Plattformen ausgespuckt wird, oder von der eigenen Webseite, z.B. in Form eines WordPress mit Podcasting-Plugin.
Aufgrund dieses dezentralen Hosting-Ansatzes, werden Podcasts von den Podcast-Katalogen dieser Welt erst einmal gar nicht gefunden. Stattdessen musss man selbst tätig werden, und sie bei allen gewünschten Plattformen eintragen, sei es bei Apple, Google oder Spotify. Am Apple-iTunes-Verzeichnis wiederum bedienen sich viele weitere, kleinere Podcasting-Plattformen, um Podcasts zu finden und zu ihrem eigenen Fundus hinzuzufügen. So lief das auch bei Hans‘ ehemaligen Projekt.
Fortan ging anschließend darum, mit klugen Herangehensweisen zu erreichen, dass von den Podcastmacher*innen veröffentlichte Episoden schnell auf der Podcast-Plattform angezeigt werden. Das ist insofern nicht so einfach, als dass die Podcast-Feeds einem Pull- statt einem Push-Prinzip folgen, man Feeds aber auch nicht unendlich häufig anfragen kann.
Für Podcaster ist es jedenfalls wünschenswert, auf so vielen Plattformen wie möglich vertreten zu sein, damit der Umfang der Hörerschaft wächst, und andererseits auch, um von Statistiken zu Abspielverhalten und Demografie zu profitieren, die diese Anbieter im Gegenzug bereitstellen.

Keine Schaunotizen

Unsere Audioproducerin Sabine Piel
Seit Sabine uns unterstützt, schaffen wir es endlich, Episoden regelmäßig zu veröffentlichen 
Wo wir sind ist vorne № 33: Web Performance
Schepp war zu Gast im sehr empfehlenswerten Frontend-Podcast von Moritz Gießmann und Constantin Groß namens „Wo wir sind ist vorne“. Dort haben die drei einen 3,5-Stunden-Brecher zum Thema „Web Performance“ aufgenommen, bei dem keine Frage mehr offen bleiben dürfte.

Revision 506: Herausforderungen beim Bau eines Podcast-Katalogs

<p>Erneut trafen sich Stefan und Peter unter dem Vorwand einer neuen TypeScript-Version um ihrem <a href="https://twitter.com/fhemberger/status/1458379683674955778">Zorn</a> über alle möglichen Gesamtsituationen Luft zu machen.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://1-horn.com/WorkingDraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 350px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/11/business-1horn.jpg" alt="" /></a></p>
<div class="message_content">
<p>Als Digital-Agentur beraten und unterstützen die BUSINESS UNICORNS aus Velen ihre Kunden in den Bereichen Digitalisierung, Marketing und Branding.</p>
<p>Bei der Konzeption von Markenidentitäten und der Umsetzung von Individualentwicklungen legen die BUSINESS UNICORNS stets ihre Aufmerksamkeit auf die User Experience der jeweiligen Zielgruppen.</p>
<p>Zudem fokussieren sie sich zunehmend auf die Digitalisierung und Transformation in Bereichen der ökologischen, ökonomischen und sozialen Nachhaltigkeit. Ziel ist es, die Grenzen des aktuell möglichen mit User-Centered Design und Development zu erweitern.</p>
<p>Mehr dazu erfahrt ihr unter: <a href="https://1-horn.com/WorkingDraft?ref=workingdraft.de">1-horn.com/WorkingDraft</a></p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:55] State of the ECMAScript Module</dt>
<dd><a href="https://github.com/microsoft/TypeScript/issues/46452">TypeScript wollte besseren ESM-Support ausrollen und hat&#8217;s dann doch nicht getan.</a> Warum? Weil aktuell JS-Module ein einziges Chaos sind! Wir gedenken den Ahnen (<a href="https://requirejs.org/">RequireJS-</a> und <a href="https://nodejs.org/docs/latest/api/modules.html">CommonJS-Modulen</a> sowie <a href="https://browserify.org/">Browserify</a>) und verfluchen sie für das, zu dem sie den <a href="https://xkcd.com/927/">ESM-Standard</a> verleitet haben. Zwischen unserem Geschipfe sprechen wir auch über modul-relevante Tools der nächsten (<a href="https://rome.tools/">Rome</a>, <a href="https://github.com/vitejs/vite">Vite</a>, <a href="https://esbuild.github.io/">esbuild</a>, <a href="https://github.com/swc-project/swc">swc</a>, <a href="https://deno.land/">deno</a>) und letzten Generation (<a href="https://jestjs.io/">Jest</a>, <a href="https://developers.google.com/closure/compiler">Closure Compiler</a>, <a href="https://lesscss.org/">Less</a>, <a href="https://sass-lang.com/">Sass</a>), sowie ein wenig über React, die <a href="https://scriptconf.org/">ScriptConf</a>, <a href="https://leerob.io/blog/rust">Rust (und andere Sprachen) als die Zukunft von JS-Infrastruktur</a> und <a href="https://de.wikipedia.org/wiki/LLVM">LLVM</a>.</dd>
<dt>[00:00:00] <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/">TypeScript 4.5</a></dt>
<dd>So sehr uns das Modul-Chaos ärgert, so gut finden wir dann doch <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#tailrec-conditional">Tail-Recursion Elimination für rekursive Typen</a> (übrigens ein ES6-Feature, <a href="https://kangax.github.io/compat-table/es6/">das bis heute fast in keiner JS-Engine funktioniert</a>), <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#lib-node-modules"><code>lib</code>-Upgrades</a> und Use Cases wie den <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">ResizeObserver</a>, Neuerungen für Template String Types, Top-Level-Await, Private Field Presence Checks, <a href="https://2ality.com/2021/01/import-assertions.html">Import Asertions</a>, <a href="https://jsdoc.app/">JSDOC</a>, <a href="https://tsdoc.org/">TSDOC</a> und <a href="https://de.wikipedia.org/wiki/SOAP">SOAP</a>.</dd>
</dl>


Erneut trafen sich Stefan und Peter unter dem Vorwand einer neuen TypeScript-Version um ihrem Zorn über alle möglichen Gesamtsituationen Luft zu machen. Unser Sponsor Als Digital-Agentur beraten und unterstützen die BUSINESS UNICORNS aus Velen ihre Kunden in den Bereichen Digitalisierung, Marketing und Branding. Bei der Konzeption von Markenidentitäten und der Umsetzung von Individualentwicklungen legen die [&#8230;]

Erneut trafen sich Stefan und Peter unter dem Vorwand einer neuen TypeScript-Version um ihrem Zorn über alle möglichen Gesamtsituationen Luft zu machen.

Unser Sponsor


Als Digital-Agentur beraten und unterstützen die BUSINESS UNICORNS aus Velen ih[...]

Erneut trafen sich Stefan und Peter unter dem Vorwand einer neuen TypeScript-Version um ihrem Zorn über alle möglichen Gesamtsituationen Luft zu machen.

Unser Sponsor


Als Digital-Agentur beraten und unterstützen die BUSINESS UNICORNS aus Velen ihre Kunden in den Bereichen Digitalisierung, Marketing und Branding.
Bei der Konzeption von Markenidentitäten und der Umsetzung von Individualentwicklungen legen die BUSINESS UNICORNS stets ihre Aufmerksamkeit auf die User Experience der jeweiligen Zielgruppen.
Zudem fokussieren sie sich zunehmend auf die Digitalisierung und Transformation in Bereichen der ökologischen, ökonomischen und sozialen Nachhaltigkeit. Ziel ist es, die Grenzen des aktuell möglichen mit User-Centered Design und Development zu erweitern.
Mehr dazu erfahrt ihr unter: 1-horn.com/WorkingDraft


Schaunotizen

[00:01:55] State of the ECMAScript Module
TypeScript wollte besseren ESM-Support ausrollen und hat’s dann doch nicht getan. Warum? Weil aktuell JS-Module ein einziges Chaos sind! Wir gedenken den Ahnen (RequireJS- und CommonJS-Modulen sowie Browserify) und verfluchen sie für das, zu dem sie den ESM-Standard verleitet haben. Zwischen unserem Geschipfe sprechen wir auch über modul-relevante Tools der nächsten (Rome, Vite, esbuild, swc, deno) und letzten Generation (Jest, Closure Compiler, Less, Sass), sowie ein wenig über React, die ScriptConf, Rust (und andere Sprachen) als die Zukunft von JS-Infrastruktur und LLVM.
[00:00:00] TypeScript 4.5
So sehr uns das Modul-Chaos ärgert, so gut finden wir dann doch Tail-Recursion Elimination für rekursive Typen (übrigens ein ES6-Feature, das bis heute fast in keiner JS-Engine funktioniert), lib-Upgrades und Use Cases wie den ResizeObserver, Neuerungen für Template String Types, Top-Level-Await, Private Field Presence Checks, Import Asertions, JSDOC, TSDOC und SOAP.

Revision 505: ES-Module und ein bisschen TypeScript 4.5

<p>Aller guten Dinge sind drei, und so kam es dass wir <a href="https://uhlmann.pro/">Jon Uhlmann</a> (<a href="https://twitter.com/jonnitto">@jonnitto</a>) zum dritten Mal als Gast einladen konnten, um mit ihm über den Themenkomplex &#8222;Analytics &amp; Tracking Tools&#8220; zu sprechen. Unsere vorherigen Ausgaben mit ihm findet Ihr unter <a href="https://workingdraft.de/490/">Revision 490: Alpine JS &amp; Petit Vue mit Jon Uhlmann</a> und <a href="https://workingdraft.de/496/">Revision 496: Tooling rund ums Frontend Tooling</a>.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://lotum.com/de/jobs/dev?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/11/workindraft.de_1.jpg" alt="" /></a></p>
<div class="message_content">Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung zu erschaffen, die jeden Tag Millionen Freund:innen und Familien gemeinsam spielen. Die Spiele wie 4 Bilder 1 Wort und Quiz Planet wurden schon in 27 Sprachen von über 800 Millionen Nutzer:innen weltweit installiert. Unsere Entwicklungsteams (aktuell 13 Entwickler:innen, 2 BI Developer, 6 Product Designer:innen und 3 Game Leads/POs) arbeiten dabei stark autonom und legen Wert auf eleganten und einfach wartbaren Code. <a href="https://lotum.com/de/jobs/dev?ref=workingdraft.de">Erfahre hier mehr darüber</a>, wie es ist, bei uns zu arbeiten.</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:50] Analytics- &amp; Tracking-Tools</dt>
<dd>Wir beginnen mit einer Aufzählung der verschiedenen Arten an Analytics- &amp; Tracking-Tools: Angefangen hat alles Ende der Neunziger mit Perl-befeuerten <a href="https://www.besucherzaehler-kostenlos.de/">Besucherzählern</a> und dem <a href="https://de.wikipedia.org/wiki/Logdateianalyse">Auswerten von Server Logs</a> &#8211; z.B. mit <a href="https://awstats.sourceforge.io/">AWStats</a>, das auch wir hier vom Podcast noch heute benutzen, um unsere Downloadzahlen zu tracken. Mitte der Zweitausender <a href="https://de.wikipedia.org/wiki/Urchin_(Software)">kaufte Google die Firma Urchin inklusive Ihres gleichnamigen Analytics-Tools</a>, welches im Anschluss in &#8222;Google Analytics&#8220; umbenannt und zur kostenlosen Nutzung freigegeben wurde. Entsprechend explodierte danach der Einsatz dieses Tools. Noch etwas später wurden Werkzeuge populär, die Besuchersessions tracken Besucherverhalten in Heatmaps abbilden, wie z.B. <a href="https://www.hotjar.com/">Hotjar</a>. Die neueste Errungenschaft sind sogenannte &#8222;Retargeting&#8220;-Pixel, mit denen Werbetreibende, aber auch Facebook erkennen, dass man sich für bestimmte Themen interessiert und die einem fortan mit immer wieder dieselbe Werbung schwer auf den Keks gehen können.</p>
<p>Die Vorteile dieser Tools liegen auf der Hand. Gleichzeitig ist Datensparsamkeit ein erstrebenswertes Ziel, weil Daten in falschen Händen auch gegen einen verwendet werden kann. Aus diesem Grund entwickeln sich immer mehr Betriebssysteme und Browser in Richtung Privacy, so dass man entweder ganz vor Tracking geschützt wird oder nur noch dann getrackt wird, wenn man selbst zustimmt (was in diesem Fall wohl nur noch 10% der Nutzer*innen tun):</p>
<ul>
<li>Der <a href="https://de.wikipedia.org/wiki/Brave_(Browser)">Brave Browser</a></li>
<li>Apples <a href="https://developer.apple.com/documentation/apptrackingtransparency">App Tracking Transparency</a> und die <a href="https://www.apple.com/safari/docs/Safari_White_Paper_Nov_2019.pdf">Intelligent Tracking Prevention</a> in Safari, oder</li>
<li>Firefox&#8216; <a href="https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop">Enhanced Tracking Protection</a></li>
</ul>
<p>Gleichzeitig entwickelt sich ein Markt für alternative, DSGVO-konformere Tools, wahlweise zum Selberhosten oder in der Cloud:</p>
<ul>
<li><a href="https://matomo.org/">Matomo</a></li>
<li><a href="https://plausible.io/">Plausible.io</a></li>
<li><a href="https://piwikpro.de/">Piwik Pro</a></li>
<li><a href="https://sentry.io/">Sentry</a></li>
</ul>
<p>Insgesamt 60 Tools listet <a href="https://plausible.io/blog/google-analytics-alternatives">dieses Blogpost</a> auf.</p>
<p>Wie erwähnen außerdem die Möglichkeiten, ganz ohne eigenes Tracking interessante Erkenntnisse aus der <a href="https://search.google.com/search-console">Google Search Console</a> oder dem <a href="https://developers.google.com/web/tools/chrome-user-experience-report/">Chrome User Experience Report</a> (CrUX) zu gewinnen.</dd>
</dl>


Aller guten Dinge sind drei, und so kam es dass wir Jon Uhlmann (@jonnitto) zum dritten Mal als Gast einladen konnten, um mit ihm über den Themenkomplex &#8222;Analytics &#38; Tracking Tools&#8220; zu sprechen. Unsere vorherigen Ausgaben mit ihm findet Ihr unter Revision 490: Alpine JS &#38; Petit Vue mit Jon Uhlmann und Revision 496: Tooling [&#8230;]

Aller guten Dinge sind drei, und so kam es dass wir Jon Uhlmann (@jonnitto) zum dritten Mal als Gast einladen konnten, um mit ihm über den Themenkomplex „Analytics & Tracking Tools“ zu sprechen. Unsere vorherigen Ausgaben mit ihm fin[...]

Aller guten Dinge sind drei, und so kam es dass wir Jon Uhlmann (@jonnitto) zum dritten Mal als Gast einladen konnten, um mit ihm über den Themenkomplex „Analytics & Tracking Tools“ zu sprechen. Unsere vorherigen Ausgaben mit ihm findet Ihr unter Revision 490: Alpine JS & Petit Vue mit Jon Uhlmann und Revision 496: Tooling rund ums Frontend Tooling.

Unser Sponsor

Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung zu erschaffen, die jeden Tag Millionen Freund:innen und Familien gemeinsam spielen. Die Spiele wie 4 Bilder 1 Wort und Quiz Planet wurden schon in 27 Sprachen von über 800 Millionen Nutzer:innen weltweit installiert. Unsere Entwicklungsteams (aktuell 13 Entwickler:innen, 2 BI Developer, 6 Product Designer:innen und 3 Game Leads/POs) arbeiten dabei stark autonom und legen Wert auf eleganten und einfach wartbaren Code. Erfahre hier mehr darüber, wie es ist, bei uns zu arbeiten.

Schaunotizen

[00:01:50] Analytics- & Tracking-Tools
Wir beginnen mit einer Aufzählung der verschiedenen Arten an Analytics- & Tracking-Tools: Angefangen hat alles Ende der Neunziger mit Perl-befeuerten Besucherzählern und dem Auswerten von Server Logs – z.B. mit AWStats, das auch wir hier vom Podcast noch heute benutzen, um unsere Downloadzahlen zu tracken. Mitte der Zweitausender kaufte Google die Firma Urchin inklusive Ihres gleichnamigen Analytics-Tools, welches im Anschluss in „Google Analytics“ umbenannt und zur kostenlosen Nutzung freigegeben wurde. Entsprechend explodierte danach der Einsatz dieses Tools. Noch etwas später wurden Werkzeuge populär, die Besuchersessions tracken Besucherverhalten in Heatmaps abbilden, wie z.B. Hotjar. Die neueste Errungenschaft sind sogenannte „Retargeting“-Pixel, mit denen Werbetreibende, aber auch Facebook erkennen, dass man sich für bestimmte Themen interessiert und die einem fortan mit immer wieder dieselbe Werbung schwer auf den Keks gehen können.
Die Vorteile dieser Tools liegen auf der Hand. Gleichzeitig ist Datensparsamkeit ein erstrebenswertes Ziel, weil Daten in falschen Händen auch gegen einen verwendet werden kann. Aus diesem Grund entwickeln sich immer mehr Betriebssysteme und Browser in Richtung Privacy, so dass man entweder ganz vor Tracking geschützt wird oder nur noch dann getrackt wird, wenn man selbst zustimmt (was in diesem Fall wohl nur noch 10% der Nutzer*innen tun):

Der Brave Browser
Apples App Tracking Transparency und die Intelligent Tracking Prevention in Safari, oder
Firefox‘ Enhanced Tracking Protection

Gleichzeitig entwickelt sich ein Markt für alternative, DSGVO-konformere Tools, wahlweise zum Selberhosten oder in der Cloud:

Matomo
Plausible.io
Piwik Pro
Sentry

Insgesamt 60 Tools listet dieses Blogpost auf.
Wie erwähnen außerdem die Möglichkeiten, ganz ohne eigenes Tracking interessante Erkenntnisse aus der Google Search Console oder dem Chrome User Experience Report (CrUX) zu gewinnen.

Revision 504: Analytics- & Tracking-Tools

<p>Vanessa und Peter tauschen sich in dieser Revision überraschend ausgiebig zu diversen CSS-, HTML- und Accessibility-Problemchen/Features aus.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://heise.de/s/P4zZ?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 300px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/11/webdev.jpg" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von der <a href="https://heise.de/s/P4zZ?ref=workingdraft.de">c&#8217;t &lt;webdev&gt;</a>. Die c&#8217;t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet &#8211; Corona-bedingt online. Am 23. und 30. November sowie am 7. Dezember behandelt sie drei Themen, die für jeden Frontend-Entwickler zentral sein sollten: Barrierrefreiheit, Performace und Testing.</p>
<p>Das Programm und alle Informationen findet Ihr auf der Homepage unter <a href="https://heise.de/s/P4zZ?ref=workingdraft.de">ctwebdev.de</a>, für weitere Fragen könnt Ihr Jo Bager unter <a href="mailto:jo@ct.de">jo@ct.de</a> kontaktieren.</p>
<p>Mit dem Code WORKINGDRAFT gibt es 20% Rabatt auf das Kombiticket (alle drei Tage).</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] Kleinkram</dt>
<dd>Vanessa hat festgestellt, dass <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#viewport-percentage_lengths">Viewport-relative Einheiten</a> und vor allem <code>vh</code> nur bedingt existieren&nbsp;&ndash; zumindest in mobilen Browsern. Browser-Heuristiken und bestimmte Verhaltensweisen von (mobilen) Browsern treiben uns in Sachen horizontalem Scrolling, <a href="https://github.com/KittyGiraudel/a11y-dialog">Accessible Dialog-Design</a> und <code>:focus-visible</code> um. Wir quatschen kurz über Safari-Bugs und Selektor-Hacking, agitieren für die Verwendung von <code>input[type=email]</code> sowie die Nicht-Verwendung von <code>autofocus</code>. Über Peters Geheimtipp <a href="https://github.com/posthtml/posthtml">PostHTML</a> (wie <a href="https://postcss.org/">PostCSS</a>, nur für HTML) kommen wir zur Frontend-Gretchenfrage, zur <a href="https://postcss.org/">Digital Ocean App Platform</a>, Mobilfunktarifen und G&#8217;schichten aus&#8217;m Zug. Themenrelevant geht es weiter mit unserer (erfolglosen) Suche nach Use Cases für <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content">fit-content</a> und <code>inline-flex</code> (zu finden in <a href="https://tailwindui.com/">Tailwind UI</a>), CSS Debugging, noch mehr Scrolling/Overflow-Problemen <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=596223&#038;q=596223&#038;can=2">Emoji-Bugs in Chrome</a>, <a href="https://caninclude.glitch.me/">Can I Include</a>, <a href="https://inclusive-components.design/cards/">Inclusive Card Components</a> und <a href="https://github.com/css-modules/css-modules">CSS Modules</a>.</dd>
</dl>


Vanessa und Peter tauschen sich in dieser Revision überraschend ausgiebig zu diversen CSS-, HTML- und Accessibility-Problemchen/Features aus. Unser Sponsor Diese Folge wird gesponsert von der c&#8217;t &#60;webdev&#62;. Die c&#8217;t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet &#8211; Corona-bedingt online. Am 23. und 30. November sowie am 7. Dezember [&#8230;]

Vanessa und Peter tauschen sich in dieser Revision überraschend ausgiebig zu diversen CSS-, HTML- und Accessibility-Problemchen/Features aus.

Unser Sponsor


Diese Folge wird gesponsert von der c’t <webdev>. Die c’t ist eine Kon[...]

Vanessa und Peter tauschen sich in dieser Revision überraschend ausgiebig zu diversen CSS-, HTML- und Accessibility-Problemchen/Features aus.

Unser Sponsor


Diese Folge wird gesponsert von der c’t <webdev>. Die c’t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet – Corona-bedingt online. Am 23. und 30. November sowie am 7. Dezember behandelt sie drei Themen, die für jeden Frontend-Entwickler zentral sein sollten: Barrierrefreiheit, Performace und Testing.
Das Programm und alle Informationen findet Ihr auf der Homepage unter ctwebdev.de, für weitere Fragen könnt Ihr Jo Bager unter jo@ct.de kontaktieren.
Mit dem Code WORKINGDRAFT gibt es 20% Rabatt auf das Kombiticket (alle drei Tage).


Schaunotizen

[00:00:00] Kleinkram
Vanessa hat festgestellt, dass Viewport-relative Einheiten und vor allem vh nur bedingt existieren – zumindest in mobilen Browsern. Browser-Heuristiken und bestimmte Verhaltensweisen von (mobilen) Browsern treiben uns in Sachen horizontalem Scrolling, Accessible Dialog-Design und :focus-visible um. Wir quatschen kurz über Safari-Bugs und Selektor-Hacking, agitieren für die Verwendung von input[type=email] sowie die Nicht-Verwendung von autofocus. Über Peters Geheimtipp PostHTML (wie PostCSS, nur für HTML) kommen wir zur Frontend-Gretchenfrage, zur Digital Ocean App Platform, Mobilfunktarifen und G’schichten aus’m Zug. Themenrelevant geht es weiter mit unserer (erfolglosen) Suche nach Use Cases für fit-content und inline-flex (zu finden in Tailwind UI), CSS Debugging, noch mehr Scrolling/Overflow-Problemen Emoji-Bugs in Chrome, Can I Include, Inclusive Card Components und CSS Modules.

Revision 503: CSS-, HTML-, und Accessibility-Kleinkram

<p>Hans, Schepp und Peter ließen mehrfach das so genannte <a href="https://workingdraft.de/gluecksrad">Workingdraft-Glücksrad</a> rotieren, erhielten jedoch bei fast jeder Umdrehung einen kapitalen Wissens-Zonk.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://lotum.com/de/jobs/dev?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/11/workindraft.de_4.jpg" alt="" /></a></p>
<div class="message_content">Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung zu erschaffen, die jeden Tag Millionen Freund:innen und Familien gemeinsam spielen. Die Spiele wie 4 Bilder 1 Wort und Quiz Planet wurden schon in 27 Sprachen von über 800 Millionen Nutzer:innen weltweit installiert. Unsere Entwicklungsteams (aktuell 13 Entwickler:innen, 2 BI Developer, 6 Product Designer:innen und 3 Game Leads/POs) arbeiten dabei stark autonom und legen Wert auf eleganten und einfach wartbaren Code. <a href="https://lotum.com/de/jobs/dev?ref=workingdraft.de">Erfahre hier mehr darüber</a>, wie es ist, bei uns zu arbeiten.</div>
</aside>
<h3>[00:01:48] Glücksrad</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API">Trusted Types API</a>/<a href="https://developer.mozilla.org/en-US/docs/Web/API/TrustedTypePolicyFactory/isScript">isScript</a></dt>
<dd>Eine Anti-XSS-API, die in den Revisionen <a href="https://workingdraft.de/447/">447</a> und <a href="https://workingdraft.de/486/">486</a> (mit Gast <a href="https://frederik-braun.com/">Frederik Braun</a>/<a href="https://twitter.com/freddyb">@freddyb</a>) schon mal Thema war.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API">Content Index API</a></dt>
<dd>Eine PWA-API für die Definition von Offline-Metadaten. <a href="https://web.dev/content-indexing-api/">Funktioniert sogar schon in Chrome auf Android!</a></dd>
<dt>WebRTC/<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpSender">RTCRtpSender</a></dt>
<dd>Mit WebRTC haben wir allesamt keine Erfahrung, Peter kann dafür über Frust mit der verwandten <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder">MediaRecorder-API</a> berichten. Statt Browser-Inkompatibilitäten mit Dingen wie <a href="https://github.com/webrtcHacks/adapter">adapter</a> auszugleichen würden wir vermutlich, ganz wie <a href="https://www.joinclubhouse.com/">Clubhouse</a>, WebRTC als SAAS einkaufen.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid">:invalid-Pseudoklasse</a></dt>
<dd>Der unserer Einschätzung nach mäßig nützliche Indikator für Formularfeld-Gültigkeit wird in Selectors Level&amp;nbp;4 durch <a href="https://www.w3.org/TR/selectors-4/#user-pseudos"><code>:user-invalid</code></a> ergänzt..</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x">overscroll-behavior-x</a></dt>
<dd>Einmal unbekannte, aber <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior">nützliche CSS-Features</a> für 500 bitte!.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem">menuitem</a>-Element</dt>
<dd>Ein extrem totes, <a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">Firefox-only</a>-HTML-Element lässt uns über Contextmenüs und dazugehörige <a href="https://github.com/swisnl/jQuery-contextMenu">jQuery-Plugins</a> nachdenken.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API">Keyboard API</a></dt>
<dd>Wir suchen mit mäßigem Erfolg nach Use Cases für die Keyboard API.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Cache">Cache API</a></dt>
<dd>Stellt sich raus: Der Cache kann immer noch nur GET-Requests speichern und funktioniert auch außerhalb vom Service Worker!</dd>
</dl>


Hans, Schepp und Peter ließen mehrfach das so genannte Workingdraft-Glücksrad rotieren, erhielten jedoch bei fast jeder Umdrehung einen kapitalen Wissens-Zonk. Unser Sponsor Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung [&#8230;]

Hans, Schepp und Peter ließen mehrfach das so genannte Workingdraft-Glücksrad rotieren, erhielten jedoch bei fast jeder Umdrehung einen kapitalen Wissens-Zonk.

Unser Sponsor

Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Andr[...]

Hans, Schepp und Peter ließen mehrfach das so genannte Workingdraft-Glücksrad rotieren, erhielten jedoch bei fast jeder Umdrehung einen kapitalen Wissens-Zonk.

Unser Sponsor

Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung zu erschaffen, die jeden Tag Millionen Freund:innen und Familien gemeinsam spielen. Die Spiele wie 4 Bilder 1 Wort und Quiz Planet wurden schon in 27 Sprachen von über 800 Millionen Nutzer:innen weltweit installiert. Unsere Entwicklungsteams (aktuell 13 Entwickler:innen, 2 BI Developer, 6 Product Designer:innen und 3 Game Leads/POs) arbeiten dabei stark autonom und legen Wert auf eleganten und einfach wartbaren Code. Erfahre hier mehr darüber, wie es ist, bei uns zu arbeiten.

[00:01:48] Glücksrad

Trusted Types API/isScript
Eine Anti-XSS-API, die in den Revisionen 447 und 486 (mit Gast Frederik Braun/@freddyb) schon mal Thema war.
Content Index API
Eine PWA-API für die Definition von Offline-Metadaten. Funktioniert sogar schon in Chrome auf Android!
WebRTC/RTCRtpSender
Mit WebRTC haben wir allesamt keine Erfahrung, Peter kann dafür über Frust mit der verwandten MediaRecorder-API berichten. Statt Browser-Inkompatibilitäten mit Dingen wie adapter auszugleichen würden wir vermutlich, ganz wie Clubhouse, WebRTC als SAAS einkaufen.
:invalid-Pseudoklasse
Der unserer Einschätzung nach mäßig nützliche Indikator für Formularfeld-Gültigkeit wird in Selectors Level&nbp;4 durch :user-invalid ergänzt..
overscroll-behavior-x
Einmal unbekannte, aber nützliche CSS-Features für 500 bitte!.
menuitem-Element
Ein extrem totes, Firefox-only-HTML-Element lässt uns über Contextmenüs und dazugehörige jQuery-Plugins nachdenken.
Keyboard API
Wir suchen mit mäßigem Erfolg nach Use Cases für die Keyboard API.
Cache API
Stellt sich raus: Der Cache kann immer noch nur GET-Requests speichern und funktioniert auch außerhalb vom Service Worker!

Revision 502: Unglücksrad

<p>Im Rahmen der etablierten Traditionen nehmen Stefan und Peter das Release einer neuen TypeScript-Version zum Anlass, um über alles außer über TypeScript zu sprechen.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://heise.de/s/P4zZ?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 350px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/11/logo.png" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von der <a href="https://heise.de/s/P4zZ?ref=workingdraft.de">c&#8217;t &lt;webdev&gt;</a>. Die c&#8217;t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet &#8211; Corona-bedingt online. Am 23. und 30. November sowie am 7. Dezember behandelt sie drei Themen, die für jeden Frontend-Entwickler zentral sein sollten: Barrierrefreiheit, Performace und Testing.</p>
<p>Das Programm und alle Informationen findet Ihr auf der Homepage unter <a href="https://heise.de/s/P4zZ?ref=workingdraft.de">ctwebdev.de</a>, für weitere Fragen könnt Ihr Jo Bager unter <a href="mailto:jo@ct.de">jo@ct.de</a> kontaktieren.</p>
<p>Mit dem Code WORKINGDRAFT gibt es 20% Rabatt auf das Kombiticket (alle drei Tage).</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:48] <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html">TypeScript 4.4</a></dt>
<dd>Am Rande sprechen wir über die Features von TS 4.4, doch eigentlich geht es eher um CSS Grid, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">den typeof-Operator</a>, <a href="https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html">Template Literal Types</a>, <a href="https://github.com/codemix/ts-sql">TS-SQL</a>, das <a href="https://www.npmjs.com/package/commander">commander</a>-Package, <a href="https://www.fastify.io/">Fastify</a> (anstelle von <a href="https://expressjs.com/">Express</a>), <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbols</a>, Nodes <a href="https://nodejs.org/api/process.html">process-Object</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag">@@toStringTag</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">ES-Proxies</a>. Auf etwas höherem Abstraktionslevel fragen wir uns, ob TypeScript demnächst mal fertig ist (Antwort: nö, es gibt in Sachen <a href="https://de.wikipedia.org/wiki/Erbauer_(Entwurfsmuster)">Builder Pattern</a>/<a href="https://de.wikipedia.org/wiki/Fluent_Interface">Fluent Interface</a> noch theoretischen Aufholbedarf), sprechen über, Prototype-Patching, <a href="https://www.typescriptlang.org/docs/handbook/2/conditional-types.html">Conditional Types</a>, <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#excludetype-excludedunion">Exclude&lt;T&gt;</a>, Rust, Haskell, Dependent Types und Performance (mit besonderem Fokus auf Next-Generation Tools wie <a href="https://github.com/evanw/esbuild">esbuild</a>, <a href="https://nextjs.org/">Next.js</a>, <a href="https://github.com/swc-project/swc">SWC</a>, <a href="https://rome.tools/">Rome</a> und <a href="https://deno.land/">Deno</a>) … und die Brücke zu <a href="https://de.wikipedia.org/wiki/Nero_Burning_ROM">Nero Burning ROM</a> schlagen wir auch noch irgendwie. Kurz bevor Stefan aus seinem Konferenzraum geworfen wurde sprechen wie noch kurz über <a href="https://fettblog.eu/typescript-typing-catch-clauses/">Typen für Try-Catch</a>, <code>any</code>, <code>unknown</code> und <code>unsafe</code>, wundern uns über <a href="https://github.com/tc39/proposal-class-static-block#ecmascript-class-static-initialization-blocks">static blocks in classes</a>, gedenken der Gefallenen (ECMAScript 4, <a href="E4X https://de.wikipedia.org/wiki/ECMAScript_for_XML">E4X</a>, SOAP, <a href="https://github.com/tyrasd/jxon">JXON</a>) und blicken kurz auf das, was uns TypeScript 4.5 (z.Z. in der Beta-Phase) in Kürze bringen wird.</dd>
</dl>


Im Rahmen der etablierten Traditionen nehmen Stefan und Peter das Release einer neuen TypeScript-Version zum Anlass, um über alles außer über TypeScript zu sprechen. Unser Sponsor Diese Folge wird gesponsert von der c&#8217;t &#60;webdev&#62;. Die c&#8217;t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet &#8211; Corona-bedingt online. Am 23. [&#8230;]

Im Rahmen der etablierten Traditionen nehmen Stefan und Peter das Release einer neuen TypeScript-Version zum Anlass, um über alles außer über TypeScript zu sprechen.

Unser Sponsor


Diese Folge wird gesponsert von der c’t <webdev>. Di[...]

Im Rahmen der etablierten Traditionen nehmen Stefan und Peter das Release einer neuen TypeScript-Version zum Anlass, um über alles außer über TypeScript zu sprechen.

Unser Sponsor


Diese Folge wird gesponsert von der c’t <webdev>. Die c’t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet – Corona-bedingt online. Am 23. und 30. November sowie am 7. Dezember behandelt sie drei Themen, die für jeden Frontend-Entwickler zentral sein sollten: Barrierrefreiheit, Performace und Testing.
Das Programm und alle Informationen findet Ihr auf der Homepage unter ctwebdev.de, für weitere Fragen könnt Ihr Jo Bager unter jo@ct.de kontaktieren.
Mit dem Code WORKINGDRAFT gibt es 20% Rabatt auf das Kombiticket (alle drei Tage).


Schaunotizen

[00:01:48] TypeScript 4.4
Am Rande sprechen wir über die Features von TS 4.4, doch eigentlich geht es eher um CSS Grid, den typeof-Operator, Template Literal Types, TS-SQL, das commander-Package, Fastify (anstelle von Express), Symbols, Nodes process-Object, @@toStringTag und ES-Proxies. Auf etwas höherem Abstraktionslevel fragen wir uns, ob TypeScript demnächst mal fertig ist (Antwort: nö, es gibt in Sachen Builder Pattern/Fluent Interface noch theoretischen Aufholbedarf), sprechen über, Prototype-Patching, Conditional Types, Exclude<T>, Rust, Haskell, Dependent Types und Performance (mit besonderem Fokus auf Next-Generation Tools wie esbuild, Next.js, SWC, Rome und Deno) … und die Brücke zu Nero Burning ROM schlagen wir auch noch irgendwie. Kurz bevor Stefan aus seinem Konferenzraum geworfen wurde sprechen wie noch kurz über Typen für Try-Catch, any, unknown und unsafe, wundern uns über static blocks in classes, gedenken der Gefallenen (ECMAScript 4, E4X, SOAP, JXON) und blicken kurz auf das, was uns TypeScript 4.5 (z.Z. in der Beta-Phase) in Kürze bringen wird.

Revision 501: ein bisschen TypeScript 4.4 und ganz viel Anderes

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 512: Agile II – Refinement, Wasserfall, Kanban (Sprint 2/2)

Working Draft

Revision 511: Microfrontends bei REWE digital

Working Draft

Revision 510: Die Rolle & Verantwortung von Entwickler:innen in agilen Teams (Sprint 1/2)

Working Draft

Revision 509: Letzte Runde Glücksrad für 2021

Working Draft

Revision 508: Lernen, Weiterbildung und Wissenserweiterung

Working Draft

Revision 507: Der Web Almanac 2021

Working Draft

Revision 506: Herausforderungen beim Bau eines Podcast-Katalogs

Working Draft

Revision 505: ES-Module und ein bisschen TypeScript 4.5

Working Draft

Revision 504: Analytics- & Tracking-Tools

Working Draft

Revision 503: CSS-, HTML-, und Accessibility-Kleinkram

Working Draft

Revision 502: Unglücksrad

Working Draft

Revision 501: ein bisschen TypeScript 4.4 und ganz viel Anderes

Working Draft