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

Di…

Working Draft

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 „Security“ im Frontend gesprochen haben. Mit Frederik Braun (@freddyb)
von Mozilla haben wir endlich wieder jema…

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>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<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><hr>
<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 …

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 Re…

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 geh…

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>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<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><hr>
<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) un…

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 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…

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

<p>Diese Sendung beschäftigt sich mal wieder mit einem Content Management System. Gemeinsam mit <a href="https://twitter.com/sebobo">Sebastian Helzle</a> und <a href="https://twitter.com/robertlemke">Robert Lemke</a> sprechen Rodney und Hans über Neos CMS (<a href="https://twitter.com/neoscms">Twitter</a>).</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:35] <a href="https://www.neos.io/">Neos</a></dt>
<dd>Wir steigen mit der Geschichte von Neos ein und sprechen über die Verbindung zu TYPO3. Robert und Sebastian erklären die architektonischen Ansätze und die Frontend-Transformation von Ext.js zu Ember und schließlich zu React. Wir machen auch einen kleinen Ausflug zu Domain Driven Design (hört auch mal in die <a href="https://workingdraft.de/314/">Revision 314</a>). Außerdem erklären die beiden das Konzept hinter Atomic Fusion, der Templating-Sprach von Neos. Und natürlich darf die Community-Arbeit nicht zu kurz kommen, die bei Neos eine große Rolle spielt.</dd>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.youtube.com/channel/UCQndryIh2s9i3htDrpb6tiw">YouTube Channel</a></dt>
<dd>Gute Videos zu Vorträgen des <a href="https://www.neos.io/community/about-neos/teams.html">Neos-Teams</a></dd>
<dt><a href="https://docs.neos.io/cms/installation-development-setup">Installation-Guide</a></dt>
<dd>Hier geht&#8217;s lang, zum Cold-Start mit Neos</dd>
<dt><a href="https://neosfunding.sandstorm.de/en">Die Foundation</a></dt>
<dd>Ihr könnt das Open Source Projekt über die Foundation finanziell unterstützen</dd>
</dl>


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


SCHAUNOTIZEN

[00:01:…

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


SCHAUNOTIZEN

[00:01:35] NEOS

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


KEINE SCHAUNOTIZEN

YOUTUBE CHANNEL

Gute Videos zu Vorträgen des Neos-Teams

INSTALLATION-GUIDE

Hier geht’s lang, zum Cold-Start mit Neos

DIE FOUNDATION

Ihr könnt das Open Source Projekt über die Foundation finanziell unterstützen

Revision 441: Neos CMS

<p>Willkommen zur zweiten Late Night DadOps Folge mit Stefan und Kahlil. Die beiden haben sich mal wieder zu später Stunde vor die Mics geklemmt um über Dinge zu sprechen die sie gerade bewegen. </p>
<h3>[00:00:28] Schaunotizen</h3>
<p>Thema dieses mal ist der Karrierepfad des Engineering Managers. Kahlil wechselte Ende letzten Jahres in diesen Beruf und gibt einen Einblick in seine Eindrücke bisher und was das eigentlich ist.</p>
<p>Stefan hat über die letzten Jahre bei Dynatrace die Karrieremöglichkeiten dort mit entwickelt um den Entwicklern dort bessere Entwicklungsmöglichkeiten zu bieten. Er plaudert aus dem Nähkästchen.   </p>
<h3>[01:15:43] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://managingup.simplecast.com/">Podcast: Managing UP</a></dt>
<dd>Ein sehr schöner Podcast in dem langjährige Engineering Manager über die Herausforderungen sprechen kreative und technische Teams zu managen.</dd>
</dl>


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


[00:00…

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


[00:00:28] SCHAUNOTIZEN

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

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


[01:15:43] KEINE SCHAUNOTIZEN

PODCAST: MANAGING UP

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

Revision 440: Engineering Manager und andere Karrierepfade

<p><a href="https://florianherlings.de/">Florian Herlings</a> betätigt sich bei <a href="https://www.spiced-academy.com/de">SPICED Academy</a> als Coach bei Coding Bootcamps und plaudert in dieser Revision zum Vorteil von Hans und Peter aus dem Nähkästchen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:28]</dt>
<dd>Florian erzählt vom Dasein als Coach für Coding Bootcamps, nachdem wir die andere Seite <a href="https://workingdraft.de/430/">in Revision 430 (Berufseinstieg per Coding Bootcamp) schon kennenlernen durften</a>. Der Weg der vom Entwickler zum Coach, der Arbeitsalltag, das Up-To-Date-Bleiben und von die Veränderungen, die einem Coach selbst durch seine Tätigkeit zuteil werden, sind allesamt Thema. Auch die Unterschiede von Bootcamp-Coaching zur Erklärbär-Tätigkeit von Peter (der fast ausschließlich Schulungen für erfahrene Nerds macht) werden besprochen, vor allem was die Wissensvermittlung angeht. Gemeinsamkeiten gibt es aber auch!</dd>
</dl>


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


SCHAUNOTIZEN

[00:00:28]

Florian…

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


SCHAUNOTIZEN

[00:00:28]

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

Revision 439: Bootcamp-Coaching mit Florian Herlings

<p><strong>Marcel Poelker</strong> (<a href="http://twitter.com/marcel_plk">Twitter</a>) ist CTO von <a href="https://www.taledo.com/"><b>Taledo</b></a> (<a href="https://twitter.com/taledocom">Twitter</a>, <a href="https://www.instagram.com/taledocom/">Insta</a>), einer digitalen Recruiting-Plattform, und erzählt Schepp und Peter in dieser Revision, wie der Weg vom Nerd zum Startup-Gründer aussieht.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] Von Studium bis Startup</dt>
<dd>Wir machen einen Rundumschlag der Startup-Gründung von der Ideenfindung bis zum fertigen Produkt! Beginnend mit Marcels Werdegang (von der Uni via Festanstellung zur Gründung) und dem Finden der Co-Gründer plaudern wir über die Anfänge eines bootstrapped Startups. Wir besprechen, wie man über Irrungen und Wirrungen das passende Projekt findet, das Henne-Ei-Problem löst und Product-Market-Fit erreicht. Die Gewichtung von Fragen wie der Wahl der passenden Technologien (im Falle Taledos Ruby on Rails) und Investoren führt uns bis in die Details der täglichen Entscheidungen, etwa bzgl. der Preisgestaltung von Produkten.</dd>
</dl>
<h3>[00:00:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.igalia.com/open-prioritization/">Igalia Open Prioritization</a></dt>
<dd>Einer neuer Ansatz Webbrowser-Feature-Priorisierung zu crowdfunden. Das ist doch mal etwas wirklich neues!</dd>
</dl>


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

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


SCHAUNOTIZEN

[00:00:30] VON STUDIUM BIS STARTUP

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


[00:00:00] KEINE SCHAUNOTIZEN

IGALIA OPEN PRIORITIZATION

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

Revision 438: Unternehmensgründung mit Marcel Poelker

<p>Nach <a href="https://workingdraft.de/431/">SelfHTML</a> feierten am 23. Juli 2020 auch die <a href="https://developer.mozilla.org/">MDN Web Docs</a> ein Jubiläum, nämlich ihr fünfzehnjähriges Bestehen. Für uns ein toller Anlass, einen Gast einzuladen, mit dem wir schon länger sprechen wollten: <a href="https://twitter.com/atopal">Kadir Topal</a>, Mozilla-Urgestein und Product Lead der MDN Web Docs.</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>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://www.neos.io/" class="message_link"><img loading="lazy" width="1024" height="598" class="alignnone size-medium wp-image-4839" style="display: block; float: right; margin-bottom: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/08/sponsoring-neos.jpg" alt="" srcset="https://workingdraft.de/wp-content/uploads/2020/08/sponsoring-neos.jpg 1024w, https://workingdraft.de/wp-content/uploads/2020/08/sponsoring-neos-300x175.jpg 300w, https://workingdraft.de/wp-content/uploads/2020/08/sponsoring-neos-768x449.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<div class="message_content">Unser Patreon Markus ist Core-Entwickler des CMS Neos und Sponsor dieser Revision! Neos ist aus einem Typo3-Fork entstanden, doch steht mittlerweile auf eigenen, sehr modernen Füßen! In einem voll integrierten Inline-Editor lassen sich die semantisch strukturierten Inhalte mit einer eigenen (JSX-artigen) DSL auf jede beliebige Weise darstellen, was Neos zu einem vielseitigen Tool für Websites, eCommerce-Anwendungen, PWAs und andere Web-Projekte macht. Die Community rund um Neos vertritt dabei eine Philosophie der Offenheit und Innovation und stellt sehr beeindruckende Events auf die Beine. Demnächst erscheint die LTS-Version 5.3 von Neos. <a href="https://www.neos.io/">Alle Infos dazu findet ihr auf neos.io</a>.</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:50] <a href="https://hacks.mozilla.org/2020/07/mdn-web-docs-15-years-young/">15 Jahre MDN Web Docs</a></dt>
<dd>Zusammen mit Kadir rollen wir den <a href="https://developer.mozilla.org/en-US/docs/MDN_at_ten/History_of_MDN">Werdegang der MDN Web Docs</a> auf &#8211; von ihren Anfängen als Netscape DevEdge unter AOL, über das &#8222;Mozilla Developer Network&#8220; hin zur <a href="https://blog.mozilla.org/opendesign/future-mdn-focus-web-docs/">Browser-agnostischen und allumfassenden Dokumentation fürs Web, wie sie sich heute darstellt</a>, und die zu gleichen Teilen <a href="https://developer.mozilla.org/en-US/docs/MDN/MDN_Product_Advisory_Board">von allen Browser-Herstellern co-finanziert und gemanaged wird</a> (außer Apple natürlich).</p>
<p>Dann widmen wir uns neueren Entwicklungen, die den Status der MDN Web Docs als Anlaufpunkt für Webentwickler zementiert haben. Das wären zum einen die ab 2018 in den Beschreibungstexten eingebetteten <a href="https://hacks.mozilla.org/2018/03/bringing-interactive-examples-to-mdn/">interaktiven Code-Samples</a>. Desweiteren <a href="https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-data-collaboration/">die 2019 verkündete</a>, zusammen mit <a href="https://caniuse.com/">Can I Use</a> von Grund auf neu konzipierten Kompatibilitätstabellen, aka &#8222;MDN browser compatibility data&#8220;, die <a href="https://github.com/mdn/browser-compat-data">auf GitHub liegen</a>, und dort von jederfrau, aber vor allem den Browser-Herstellern regelmäßig erweitert werden. Mittlerweile finden sie nicht nur bei MDN und Can I Use selbst Verwendung, <a href="https://hacks.mozilla.org/2018/03/hack-on-mdn-building-useful-tools-with-browser-compatibility-data/">sondern auch in Lintern, Prefixern und IDEs wie Visual Studio Code</a>. Und drittens sind es regelmäßige (remote) Nutzertests und die jährlich stattfindende &#8222;MDN Developer Needs Assessment&#8220;_umfrage, deren Ergebnisse im <a href="https://insights.developer.mozilla.org/">Web DNA Report</a> mündet und die sogar <a href="https://blog.chromium.org/2020/06/improving-chromiums-browser.html">Google dazu bewegt haben, Geld in die Hand zu nehmen, um konkurrierende Browser besser zu machen</a>.</p>
<p>Für die Zukunft ist geplant, Einsteiger-Leitfäden in der <a href="https://developer.mozilla.org/en-US/docs/Learn">MDN Learning Area</a> bereitzustellen, die nicht mehr nur Browser-Technologien zum Fokus haben, sondern die beim Einstieg in JavaScript-Frameworks oder Node.js helfen.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute">Contributing to MDN</a></dt>
<dd>Sollten wir Euer Interesse geweckt haben und Ihr Euch fragt, wie Ihr Euch in das Projekt einbringen könnt, dann ist hier der richtige Anlaufpunkt für Euch.</dd>
<dt><a href="https://shop.spreadshirt.de/mdn-store-eu/">MDN Web Docs Store</a></dt>
<dd>Wenn Ihr das MDN-Projekt lieber finanziell unterstützen möchtet, dann schaut Euch im MDN Web Docs Store um und vielleicht findet Ihr dort das eine oder andere an Merch, das Euch gefällt?</dd>
</dl>


Nach SelfHTML feierten am 23. Juli 2020 auch die MDN Web Docs ein Jubiläum,
nämlich ihr fünfzehnjähriges Bestehen. Für uns ein toller Anlass, einen Gast
einzuladen, mit dem wir schon länger sprechen w…

Nach SelfHTML feierten am 23. Juli 2020 auch die MDN Web Docs ein Jubiläum,
nämlich ihr fünfzehnjähriges Bestehen. Für uns ein toller Anlass, einen Gast
einzuladen, mit dem wir schon länger sprechen wollten: Kadir Topal,
Mozilla-Urgestein und Product Lead der MDN Web Docs.


UNSER SPONSOR



Unser Patreon Markus ist Core-Entwickler des CMS Neos und Sponsor dieser
Revision! Neos ist aus einem Typo3-Fork entstanden, doch steht mittlerweile auf
eigenen, sehr modernen Füßen! In einem voll integrierten Inline-Editor lassen
sich die semantisch strukturierten Inhalte mit einer eigenen (JSX-artigen) DSL
auf jede beliebige Weise darstellen, was Neos zu einem vielseitigen Tool für
Websites, eCommerce-Anwendungen, PWAs und andere Web-Projekte macht. Die
Community rund um Neos vertritt dabei eine Philosophie der Offenheit und
Innovation und stellt sehr beeindruckende Events auf die Beine. Demnächst
erscheint die LTS-Version 5.3 von Neos. Alle Infos dazu findet ihr auf neos.io.


SCHAUNOTIZEN

[00:01:50] 15 JAHRE MDN WEB DOCS

Zusammen mit Kadir rollen wir den Werdegang der MDN Web Docs auf – von ihren
Anfängen als Netscape DevEdge unter AOL, über das „Mozilla Developer Network“
hin zur Browser-agnostischen und allumfassenden Dokumentation fürs Web, wie sie
sich heute darstellt, und die zu gleichen Teilen von allen Browser-Herstellern
co-finanziert und gemanaged wird (außer Apple natürlich).



Dann widmen wir uns neueren Entwicklungen, die den Status der MDN Web Docs als
Anlaufpunkt für Webentwickler zementiert haben. Das wären zum einen die ab 2018
in den Beschreibungstexten eingebetteten interaktiven Code-Samples. Desweiteren
die 2019 verkündete, zusammen mit Can I Use von Grund auf neu konzipierten
Kompatibilitätstabellen, aka „MDN browser compatibility data“, die auf GitHub
liegen, und dort von jederfrau, aber vor allem den Browser-Herstellern
regelmäßig erweitert werden. Mittlerweile finden sie nicht nur bei MDN und Can I
Use selbst Verwendung, sondern auch in Lintern, Prefixern und IDEs wie Visual
Studio Code. Und drittens sind es regelmäßige (remote) Nutzertests und die
jährlich stattfindende „MDN Developer Needs Assessment“_umfrage, deren
Ergebnisse im Web DNA Report mündet und die sogar Google dazu bewegt haben, Geld
in die Hand zu nehmen, um konkurrierende Browser besser zu machen.

Für die Zukunft ist geplant, Einsteiger-Leitfäden in der MDN Learning Area
bereitzustellen, die nicht mehr nur Browser-Technologien zum Fokus haben,
sondern die beim Einstieg in JavaScript-Frameworks oder Node.js helfen.


KEINE SCHAUNOTIZEN

CONTRIBUTING TO MDN

Sollten wir Euer Interesse geweckt haben und Ihr Euch fragt, wie Ihr Euch in das
Projekt einbringen könnt, dann ist hier der richtige Anlaufpunkt für Euch.

MDN WEB DOCS STORE

Wenn Ihr das MDN-Projekt lieber finanziell unterstützen möchtet, dann schaut
Euch im MDN Web Docs Store um und vielleicht findet Ihr dort das eine oder
andere an Merch, das Euch gefällt?

Revision 437: 15 Jahre MDN!

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen

PODLIST

Working Draft

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen.

Neue Episoden

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

Revision 441: Neos CMS

Working Draft

Revision 440: Engineering Manager und andere Karrierepfade

Working Draft

Revision 439: Bootcamp-Coaching mit Florian Herlings

Working Draft

Revision 438: Unternehmensgründung mit Marcel Poelker

Working Draft

Revision 437: 15 Jahre MDN!

Working Draft