<p>Nach dem großen Erfolg <a href="https://workingdraft.de/gluecksrad/">des neuen Glücksrads</a> in der <a href="/487">letzten Revision</a> ließe es Schepp, Vanessa und Peter nochmal drehen – diesmal verstärkt um Gücksrad-Veteran <b>Stefan Judis</b> (<a href="https://twitter.com/stefanjudis">Twitter</a>, <a href="https://www.stefanjudis.com/newsletter/">Newsletter</a>) der auch Autor des <a href="https://twitter.com/randommdn?lang=de">Random-MDN-Bots</a> auf Twitter ist.</p>
<h3>[00:01:02] Glücksrad</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/XRPermissionDescriptor">XRPermissionDescriptor</a></dt>
<dd>Ein unspannendes, von keinem Browser unterstütztes Objekt-Interface für <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API">WebXR</a>.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position_value"><code>position</code>-Value</a></dt>
<dd>Wir amüsieren uns kurz über <a href="http://howtocenterincss.com/">vertikale Zentrierung in CSS</a>, dann legt Schepp dar, wie %-Positionierung für <code>background-position</code> funktioniert. Am Ende finden wir trotz großer Mühen nicht viele Use Cases für <code>background-position</code> in der Gegenwart.</dd>
<dt><a href="https://developer.mozilla.org/docs/Web/HTML/Global_attributes/inputmode">inputmode-Attribut</a></dt>
<dd>Während es einfach ist zu klären, was <code>inputmode</code> an sich macht, suchen wir länger nach Use Cases für <code>inputmode="none"</code>. Gedacht ist dieser für indirekt kontrollierte Inputs, wobei Peter vorübergehend der Fehlannahme aufsitzt, dass das auch (besser?) per <a href="https://html.spec.whatwg.org/#the-output-element"><code>&lt;output&gt;</code></a> gemacht werden könnte (stimmt nicht, <code>&lt;output&gt;</code> wird von Formularen <a href="https://html.spec.whatwg.org/#category-submit">nicht submitted</a>).</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Locks_API">Web Locks API</a></dt>
<dd>Allgemeinem Unverständnis zum Trotz hält Peter eine Brandrede für eine einebaute Web Locks API.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/direction">direction</a></dt>
<dd>Wo <code>direction</code> ist, sind das <a href="https://html.spec.whatwg.org/#attr-dir">HTML-Attribut <code>dir</code></a> sowie <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode">writing-mode</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation">text-orientation</a> nicht fern. Außerdem stellen wir fest, dass <a href="https://gankra.github.io/blah/text-hates-you/">Text-Rendering extrem knifflig ist</a>.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/Manifest/start_url">start_url in Web App Manifests</a></dt>
<dd>Wir sinnieren über den Umstand, dass so gut wie alles in Web App Manifests eine optonale Kann-Angabe ist und fragen uns, was <a href="https://www.opera.com/de">Opera</a> eigentlich so macht.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/WheelEvent/deltaMode">deltaMode auf WheelEvents</a></dt>
<dd>Mühsam arbeiten wir heraus, was der <code>deltaMode</code> auf <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event">Wheel-Events</a> wohl soll und was alles als Mausrad durchgeht.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemscope">itemscope-Attribut</a></dt>
<dd>Schepp legt dar, was HTML5-Mirodata für SEO zu leisten imstande ist, erklärt <a href="https://schema.org/">schema.org</a> und empfiehlt <a href="https://json-ld.org/">JSON-LD</a> als Alternative.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace">@namespace</a></dt>
<dd>XML, Baby! Und wo wir schon mal in der Vergangenheit sind, sprechen wir auch über ICQ und <a href="https://twitter.com/WebDesignMuseum/status/1416047469444550658">das Release von Chrome 1</a> irgendwann 2009.</dd>
</dl>


Nach dem großen Erfolg des neuen Glücksrads in der letzten Revision ließe es Schepp, Vanessa und Peter nochmal drehen – diesmal verstärkt um Gücksrad-Veteran Stefan Judis (Twitter, Newsletter) der auch Autor des Random-MDN-Bots auf Twitter ist. [00:01:02] Glücksrad XRPermissionDescriptor Ein unspannendes, von keinem Browser unterstütztes Objekt-Interface für WebXR. position-Value Wir amüsieren uns kurz über vertikale Zentrierung [&#8230;]

Working Draft

Nach dem großen Erfolg des neuen Glücksrads in der letzten Revision ließe es Schepp, Vanessa und Peter nochmal drehen – diesmal verstärkt um Gücksrad-Veteran Stefan Judis (Twitter, Newsletter) der auch Autor des Random-MDN-Bots auf Twitter ist.
[00:[...]

Nach dem großen Erfolg des neuen Glücksrads in der letzten Revision ließe es Schepp, Vanessa und Peter nochmal drehen – diesmal verstärkt um Gücksrad-Veteran Stefan Judis (Twitter, Newsletter) der auch Autor des Random-MDN-Bots auf Twitter ist.
[00:01:02] Glücksrad

XRPermissionDescriptor
Ein unspannendes, von keinem Browser unterstütztes Objekt-Interface für WebXR.
position-Value
Wir amüsieren uns kurz über vertikale Zentrierung in CSS, dann legt Schepp dar, wie %-Positionierung für background-position funktioniert. Am Ende finden wir trotz großer Mühen nicht viele Use Cases für background-position in der Gegenwart.
inputmode-Attribut
Während es einfach ist zu klären, was inputmode an sich macht, suchen wir länger nach Use Cases für inputmode="none". Gedacht ist dieser für indirekt kontrollierte Inputs, wobei Peter vorübergehend der Fehlannahme aufsitzt, dass das auch (besser?) per <output> gemacht werden könnte (stimmt nicht, <output> wird von Formularen nicht submitted).
Web Locks API
Allgemeinem Unverständnis zum Trotz hält Peter eine Brandrede für eine einebaute Web Locks API.
direction
Wo direction ist, sind das HTML-Attribut dir sowie writing-mode und text-orientation nicht fern. Außerdem stellen wir fest, dass Text-Rendering extrem knifflig ist.
start_url in Web App Manifests
Wir sinnieren über den Umstand, dass so gut wie alles in Web App Manifests eine optonale Kann-Angabe ist und fragen uns, was Opera eigentlich so macht.
deltaMode auf WheelEvents
Mühsam arbeiten wir heraus, was der deltaMode auf Wheel-Events wohl soll und was alles als Mausrad durchgeht.
itemscope-Attribut
Schepp legt dar, was HTML5-Mirodata für SEO zu leisten imstande ist, erklärt schema.org und empfiehlt JSON-LD als Alternative.
@namespace
XML, Baby! Und wo wir schon mal in der Vergangenheit sind, sprechen wir auch über ICQ und das Release von Chrome 1 irgendwann 2009.

Revision 488: Glücksrad 2.1 Transitional

<p>Vanessa, Schepp und Peter ließen das Glückrad kreiseln. Aber es ist ein neues Glücksrad! <a href="https://workingdraft.de/gluecksrad/">Die offizielle Workingdraft-Glücksrad-Webapp</a>, die auf MDN-Daten basiert, setzt uns nicht mehr nur HTML-Elemente vor, sondern spuckt auch DOM-APIs, JS-Features und CSS-Gedöns aus.</p>
<h3>[00:01:02] Glücksrad</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre">pre-Element</a></dt>
<dd>Wer hätte das gedacht? Das <code>pre</code>-Element hat ein <code>width</code>-Attribut (das wir nicht benutzen sollten)! Sonstige Erkenntnisse zum Element: es kann kein Shadow-Host sein (das können nur <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow#elements_you_can_attach_a_shadow_to">ausgewählte Elemente</a> sein) und <a href="https://html.spec.whatwg.org/#other-elements,-attributes-and-apis">xmp-Elemente sind unter der Haube auch nur pre-Elemente</a> (zumindest näherungsweise).</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/Manifest">Icons im Web Manifest</a></dt>
<dd>Wir sinnieren über Manifest-Icons, <code>apple-touch-icon</code>, <code>theme-color</code>, die allgemeine Meta-Tag-Inflation, Icon- und <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont-Generatoren</a> sowie die <a href="https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">bulletproof @font-face syntax</a>.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation">text-orientation</a></dt>
<dd>Wir setzen die CSS-Eigenschaft <code>text-orientation</code> in den Kontext zu z.B. <a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/ruby">Ruby-Annotationen</a> und schaffen es am Ende auf wundersame Weise, bei <a href="https://pi-hole.net/">Pi-hole</a> zu landen.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/blend-mode">blend-mode</a></dt>
<dd>Wir versuchen zu erahnen, wie viel <code>blend-mode</code> (nicht zu verwechseln mit <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode">background-blend-mode</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode">mix-blend-mode</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix()">color-mix()</a>) tatsächlich verwendet wird und landen bei der einzigen Quelle, die dererlei Fragen zu beantworten vermag: <a href="https://almanac.httparchive.org/en/2020/">dem State of the Web Report</a>.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMPointReadOnly">DOMPointReadOnly</a></dt>
<dd>Brauchen wir <a href="https://developer.mozilla.org/en-US/docs/Web/API/DOMPointReadOnly/DOMPointReadOnly">einen Constructor</a> für ein einfaches Objekt mit vier Feldern? Wir suchen nach Pro-Argumenten.</dd>
<dt>CSS-Typ <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/ratio">ratio</a></dt>
<dd>Der <code>ratio</code>-Typ (nicht zu verwechseln mit <a href="https://css-tricks.com/almanac/properties/a/aspect-ratio/">aspect-ratio</a> oder <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio">aspect-ratio</a>) führt uns in eine Diskussion höherer CSS-Mathematik.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-block-end">scroll-margin-block-end</a></dt>
<dd>Eine der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties">Logical CSS Properties</a> lässt uns mental zu Scroll-Snapping, <a href="https://schepp.dev/posts/css-only-carousel/">der Anwendung von Scroll-Snapping</a> und <a href="https://wowirsindistvorne.show/the-elder-scrolls-der-alte-scrollt/">den Kollegen von WWSIV</a> scrollen.</dd>
<dt><a href="https://html.spec.whatwg.org/#the-i-element">i-Element</a></dt>
<dd>Wir grezen <code>i</code> gegen <code>em</code> ab und sinnieren über Bootrap und Accessibility</dd>
</dl>


Vanessa, Schepp und Peter ließen das Glückrad kreiseln. Aber es ist ein neues Glücksrad! Die offizielle Workingdraft-Glücksrad-Webapp, die auf MDN-Daten basiert, setzt uns nicht mehr nur HTML-Elemente vor, sondern spuckt auch DOM-APIs, JS-Features und CSS-Gedöns aus. [00:01:02] Glücksrad pre-Element Wer hätte das gedacht? Das pre-Element hat ein width-Attribut (das wir nicht benutzen sollten)! Sonstige Erkenntnisse [&#8230;]

Vanessa, Schepp und Peter ließen das Glückrad kreiseln. Aber es ist ein neues Glücksrad! Die offizielle Workingdraft-Glücksrad-Webapp, die auf MDN-Daten basiert, setzt uns nicht mehr nur HTML-Elemente vor, sondern spuckt auch DOM-APIs, JS-Features u[...]

Vanessa, Schepp und Peter ließen das Glückrad kreiseln. Aber es ist ein neues Glücksrad! Die offizielle Workingdraft-Glücksrad-Webapp, die auf MDN-Daten basiert, setzt uns nicht mehr nur HTML-Elemente vor, sondern spuckt auch DOM-APIs, JS-Features und CSS-Gedöns aus.
[00:01:02] Glücksrad

pre-Element
Wer hätte das gedacht? Das pre-Element hat ein width-Attribut (das wir nicht benutzen sollten)! Sonstige Erkenntnisse zum Element: es kann kein Shadow-Host sein (das können nur ausgewählte Elemente sein) und xmp-Elemente sind unter der Haube auch nur pre-Elemente (zumindest näherungsweise).
Icons im Web Manifest
Wir sinnieren über Manifest-Icons, apple-touch-icon, theme-color, die allgemeine Meta-Tag-Inflation, Icon- und Webfont-Generatoren sowie die bulletproof @font-face syntax.
text-orientation
Wir setzen die CSS-Eigenschaft text-orientation in den Kontext zu z.B. Ruby-Annotationen und schaffen es am Ende auf wundersame Weise, bei Pi-hole zu landen.
blend-mode
Wir versuchen zu erahnen, wie viel blend-mode (nicht zu verwechseln mit background-blend-mode, mix-blend-mode und color-mix()) tatsächlich verwendet wird und landen bei der einzigen Quelle, die dererlei Fragen zu beantworten vermag: dem State of the Web Report.
DOMPointReadOnly
Brauchen wir einen Constructor für ein einfaches Objekt mit vier Feldern? Wir suchen nach Pro-Argumenten.
CSS-Typ ratio
Der ratio-Typ (nicht zu verwechseln mit aspect-ratio oder aspect-ratio) führt uns in eine Diskussion höherer CSS-Mathematik.
scroll-margin-block-end
Eine der Logical CSS Properties lässt uns mental zu Scroll-Snapping, der Anwendung von Scroll-Snapping und den Kollegen von WWSIV scrollen.
i-Element
Wir grezen i gegen em ab und sinnieren über Bootrap und Accessibility

Revision 487: Glücksrad 2.0

<p>Es ist Zeit sich auch mal den aktuellen Software-Produkten rund um die allgegenwärtige Corona-Pandemie zu beschäftigen.</p>
<p>Wir sind sehr froh, dass wir <a href="https://bkastl.de/">Bianca Kastl</a> (<a href="https://twitter.com/bkastl">Twitter</a>) dafür gewinnen konnten. Sie beschäftigt sich seit geraumer Zeit mit der Integration von Corona-Daten für die Gesundheitsämter und Applikationen, die in diesem Kontext auch für die Bevölkerung zur Verfügung stehen. Dabei sprechen wir vollem über die Vorteile und Probleme der Luca-App.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:10] Corona App &#8211; Wirkungsweise, Vorteile und Nachteile</dt>
<dd>Um eine gute Grundlage für unsere Diskussion zu legen, sprechen wir darüber warum es Apps wie die Luca-App oder die Corona-Warn-App gibt und wie sie funktionieren. Gerade auf technischer Seite gibt es einige Unterschiede, die wir erläutern und erklären, was dabei zu beachten ist.</dd>
<dt>[00:17:08] <a href="https://bkastl.de/notes/luca-app-lucatrack-und-andere-gefahren">Probleme der Luca-App</a></dt>
<dd>Die Luca-App unterstützt Geschäfte und Restaurants Gästelisten und Check-ins nachzuhalten und tritt dabei als zentraler Datentreuhänder auf. Wir gehen auf das technischen Setup der App ein, sprechen über Verschlüsselung der Daten und die Datenübermittlung an Gesundheitsämter.</p>
<p>Darüber kommen wir dann auf die Probleme der App zu sprechen.</p>
<ul>
<li><a href="https://github.com/lucaapp/security-concept/issues/28">Offene und erratbare URLs</a> &#8211; <a href="https://zerforschung.org/tags/databreach">Related</a></li>
<li>Offene Keys / Schlüsselanhänger</li>
<li><a href="https://vimeo.com/558459255">Input- und Output-Sanitation</a></li>
<li><a href="https://twitter.com/mame82/status/1405855701830938627">DoS mit Contextwechseln</a></li>
</ul>
<p>Mehr &#8222;Fails&#8220; der Luca-App finden sich auf <a href="https://timeline.luca.fail/">der entsprechenden Website dazu</a>.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt>CSV Injection über die Luca-App</dt>
<dd><a href="https://www.zeit.de/digital/datenschutz/2021-04/luca-app-gesundheitsaemter-corona-kontaktverfolgung-hackerangriff-risiko">Der erste Zeit Artikel</a> und <a href="https://www.zeit.de/digital/2021-05/luca-app-gesundheitsaemter-hackerangriff-risiko-kontaktverfolgung-coronavirus">das Follow-up</a>.</dd>
<dt><a href="https://www.ndr.de/nachrichten/info/She-likes-tech-26-Bianca-Kastl,audio903842.html">Bianca als Gast beim NDR Podcast</a></dt>
</dl>


Es ist Zeit sich auch mal den aktuellen Software-Produkten rund um die allgegenwärtige Corona-Pandemie zu beschäftigen. Wir sind sehr froh, dass wir Bianca Kastl (Twitter) dafür gewinnen konnten. Sie beschäftigt sich seit geraumer Zeit mit der Integration von Corona-Daten für die Gesundheitsämter und Applikationen, die in diesem Kontext auch für die Bevölkerung zur Verfügung stehen. [&#8230;]

Es ist Zeit sich auch mal den aktuellen Software-Produkten rund um die allgegenwärtige Corona-Pandemie zu beschäftigen.
Wir sind sehr froh, dass wir Bianca Kastl (Twitter) dafür gewinnen konnten. Sie beschäftigt sich seit geraumer Zeit mit der Integ[...]

Es ist Zeit sich auch mal den aktuellen Software-Produkten rund um die allgegenwärtige Corona-Pandemie zu beschäftigen.
Wir sind sehr froh, dass wir Bianca Kastl (Twitter) dafür gewinnen konnten. Sie beschäftigt sich seit geraumer Zeit mit der Integration von Corona-Daten für die Gesundheitsämter und Applikationen, die in diesem Kontext auch für die Bevölkerung zur Verfügung stehen. Dabei sprechen wir vollem über die Vorteile und Probleme der Luca-App.
Schaunotizen

[00:03:10] Corona App – Wirkungsweise, Vorteile und Nachteile
Um eine gute Grundlage für unsere Diskussion zu legen, sprechen wir darüber warum es Apps wie die Luca-App oder die Corona-Warn-App gibt und wie sie funktionieren. Gerade auf technischer Seite gibt es einige Unterschiede, die wir erläutern und erklären, was dabei zu beachten ist.
[00:17:08] Probleme der Luca-App
Die Luca-App unterstützt Geschäfte und Restaurants Gästelisten und Check-ins nachzuhalten und tritt dabei als zentraler Datentreuhänder auf. Wir gehen auf das technischen Setup der App ein, sprechen über Verschlüsselung der Daten und die Datenübermittlung an Gesundheitsämter.
Darüber kommen wir dann auf die Probleme der App zu sprechen.

Offene und erratbare URLs – Related
Offene Keys / Schlüsselanhänger
Input- und Output-Sanitation
DoS mit Contextwechseln

Mehr „Fails“ der Luca-App finden sich auf der entsprechenden Website dazu.

Keine Schaunotizen

CSV Injection über die Luca-App
Der erste Zeit Artikel und das Follow-up.
Bianca als Gast beim NDR Podcast

Revision 486: Corona-Apps: Vorteile und Probleme am Beispiel der Luca App

<p>Anlässlich der offiziellen Verkündung von ECMAScript 2021 fanden sich Hans, Schepp und Peter zusammen, um nicht nur die Feature-Liste des neuesten JavaScript-Standards zu rekapitulieren, sondern dabei auch etwas in Zukunft und Vergangenheit von ECMAScript zu blicken.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] <a href="https://www.ecma-international.org/publications-and-standards/standards/ecma-262/">Habemus ES2021</a></dt>
<dd>Wir scheitern in gewohnter Manier daran, die Feature-Liste von ECMAScript ohne allzugroße Abschweifer durchzugehen. Vorweg: <a href="https://kangax.github.io/compat-table/es2016plus/">der Browsersupport ist gar nicht schlecht!</a> Zum neuen <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll">String.prototype.replaceAll()</a> haben wir nur zu ergänzen, dass es genau wie <a href="https://www.peterkroener.de/string-prototype-replace-ist-eine-falle/">String.prototype.replace()</a> eine Falle enthält, in die zumindest Peter schon mal getappt ist. Die besprechung der neuen <a href="https://exploringjs.com/impatient-js/ch_operators.html#logical-assignment-operators">Logical Assignment Operators</a> führt uns zu den fehlenden <a href="https://github.com/tc39/proposal-throw-expressions">throw-Expressions</a> (die Peter in <a href="https://github.com/SirPepe/shed">seiner Toolsammlung</a> durch eine <a href="https://github.com/SirPepe/shed/blob/main/docs/modules/error.md#fail">fail()-Funktion</a> halbgar ersetzt). <a href="https://exploringjs.com/impatient-js/ch_numbers.html#numeric-separator-number-literals">Numeric Separators</a> nehmen wir einfach zur Kenntnis, während <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/any">Promise.any()</a> zu einer länglichen Debatte rund um das Wesen von Promises und Observables (<a href="https://github.com/tc39/proposal-observable">eingeschlafenes Proposal</a>, lebendige Implementierung <a href="https://www.learnrxjs.io/">RxJS</a>) führt. Klassen haben mehr private-Features (in Firefox <a href="https://hacks.mozilla.org/2021/06/implementing-private-fields-for-javascript/">originell implementiert</a>) und die neuen Memory-Manangement-Helper <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef">WeakRef</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry">FinalizationRegistry</a> werden die meisten Entwickler:innen sehr selten brauchen. Zum Abschluss wünscht sich Peter noch do-Expressions in gut (d.h. nicht wie im <a href="https://github.com/tc39/proposal-do-expressions">Proposal</a>) sowie <code>tmp</code>-Variablen.</dd>
</dl>


Anlässlich der offiziellen Verkündung von ECMAScript 2021 fanden sich Hans, Schepp und Peter zusammen, um nicht nur die Feature-Liste des neuesten JavaScript-Standards zu rekapitulieren, sondern dabei auch etwas in Zukunft und Vergangenheit von ECMAScript zu blicken. Schaunotizen [00:00:29] Habemus ES2021 Wir scheitern in gewohnter Manier daran, die Feature-Liste von ECMAScript ohne allzugroße Abschweifer durchzugehen. Vorweg: [&#8230;]

Anlässlich der offiziellen Verkündung von ECMAScript 2021 fanden sich Hans, Schepp und Peter zusammen, um nicht nur die Feature-Liste des neuesten JavaScript-Standards zu rekapitulieren, sondern dabei auch etwas in Zukunft und Vergangenheit von ECMA[...]

Anlässlich der offiziellen Verkündung von ECMAScript 2021 fanden sich Hans, Schepp und Peter zusammen, um nicht nur die Feature-Liste des neuesten JavaScript-Standards zu rekapitulieren, sondern dabei auch etwas in Zukunft und Vergangenheit von ECMAScript zu blicken.
Schaunotizen

[00:00:29] Habemus ES2021
Wir scheitern in gewohnter Manier daran, die Feature-Liste von ECMAScript ohne allzugroße Abschweifer durchzugehen. Vorweg: der Browsersupport ist gar nicht schlecht! Zum neuen String.prototype.replaceAll() haben wir nur zu ergänzen, dass es genau wie String.prototype.replace() eine Falle enthält, in die zumindest Peter schon mal getappt ist. Die besprechung der neuen Logical Assignment Operators führt uns zu den fehlenden throw-Expressions (die Peter in seiner Toolsammlung durch eine fail()-Funktion halbgar ersetzt). Numeric Separators nehmen wir einfach zur Kenntnis, während Promise.any() zu einer länglichen Debatte rund um das Wesen von Promises und Observables (eingeschlafenes Proposal, lebendige Implementierung RxJS) führt. Klassen haben mehr private-Features (in Firefox originell implementiert) und die neuen Memory-Manangement-Helper WeakRef und FinalizationRegistry werden die meisten Entwickler:innen sehr selten brauchen. Zum Abschluss wünscht sich Peter noch do-Expressions in gut (d.h. nicht wie im Proposal) sowie tmp-Variablen.

Revision 485: ES2021 & Beyond

<p>Schepp und Peter erfreuten sich in dieser Revision an der Anwesenheit von <strong>Martin Donath</strong> (<a href="https://twitter.com/squidfunk">Twitter</a>, <a href="https://github.com/squidfunk">Github</a>), der nicht nur Maintainer von <a href="https://squidfunk.github.io/mkdocs-material/">Material for MkDocs</a> ist, sondern auch daran arbeitet, mit <a href="https://stylezen.io/">Stylezen</a> das beste CSS-Intellisense diesseits der Baikal-Amur-Magistrale zu erschaffen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] CSS Tücken und Tooling</dt>
<dd>In einem exzentrischen Orbit kreisen wir um das Thema Tools für CSS und die mit diesen Tools und/oder CSS einhergehenden Herausforderungen. Das Tool-Thema enthält neben Prä/Postprozessoren wie <a href="https://github.com/postcss/postcss">PostCSS</a>, <a href="https://lesscss.org/">Less</a> und <a href="https://sass-lang.com/">Sass</a> auch Konzepte wie <a href="http://getbem.com/introduction/">BEM</a>/<a href="https://kulturbanause.de/faq/itcss-inverted-triangle-css/">ITCSS</a>/<a href="https://github.com/stubbornella/oocss/wiki">OOCSS</a>, konkrete Frameworks a la <a href="https://tailwindcss.com/">Tailwind</a> und Addons wie <a href="https://github.com/css-modules/css-modules">CSS Modules</a>. Diesen Erstellungs-Tools gegenüber stehen Analyse- und QA-Ansätze wie Visual Regression Testing (mit Varianten wie <a href="https://warhol.io/">Warhol</a> und SiteEffect) und relativ simplen <a href="https://stylelint.io/">Lintern</a>. Martins Stylezen ist da etwas anders: aufbauend auf der Idee, <a href="https://css-tricks.com/css-is-a-strongly-typed-language/">dass CSS eigentlich eine statisch typisierte Sprache ist</a>und inspriert von <a href="https://twitter.com/argyleink">Adam Argyle</a>, wird Stylezen eine Art TypeScript für CSS (<a href="https://twitter.com/stylezencss/status/1318203509842595840">Stylezen-Extension für VS Code in Aktion</a>). Am Rande geht es außerdem um <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">Custom Properties</a>, <a href="https://krautpress.de/2021/css-container-queries/">Container Queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment">CSS Containment</a>, warum niemand CSS ernst nimmt, <a href="https://stylezen.io/blog/the-cognitive-complexity-of-css/">die kognitive Komplexität von CSS</a>, Web Components (v.a. <a href="https://workingdraft.de/480/">Revision 480</a>), <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a>, <a href="https://css.oddbird.net/scope/explainer/">Scoped CSS</a>, <a href="https://workers.cloudflare.com/">Cloud Flare Workers</a>, <a href="https://www.npmjs.com/package/csstype">csstype</a>, die absurde Komplexität von <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a>, <a href="https://mootools.net/">Mootools</a> und die Freuden der Webstandards-Spezifikations-Exegese.</dd>
</dl>


Schepp und Peter erfreuten sich in dieser Revision an der Anwesenheit von Martin Donath (Twitter, Github), der nicht nur Maintainer von Material for MkDocs ist, sondern auch daran arbeitet, mit Stylezen das beste CSS-Intellisense diesseits der Baikal-Amur-Magistrale zu erschaffen. Schaunotizen [00:00:59] CSS Tücken und Tooling In einem exzentrischen Orbit kreisen wir um das Thema Tools [&#8230;]

Schepp und Peter erfreuten sich in dieser Revision an der Anwesenheit von Martin Donath (Twitter, Github), der nicht nur Maintainer von Material for MkDocs ist, sondern auch daran arbeitet, mit Stylezen das beste CSS-Intellisense diesseits der Baika[...]

Schepp und Peter erfreuten sich in dieser Revision an der Anwesenheit von Martin Donath (Twitter, Github), der nicht nur Maintainer von Material for MkDocs ist, sondern auch daran arbeitet, mit Stylezen das beste CSS-Intellisense diesseits der Baikal-Amur-Magistrale zu erschaffen.
Schaunotizen

[00:00:59] CSS Tücken und Tooling
In einem exzentrischen Orbit kreisen wir um das Thema Tools für CSS und die mit diesen Tools und/oder CSS einhergehenden Herausforderungen. Das Tool-Thema enthält neben Prä/Postprozessoren wie PostCSS, Less und Sass auch Konzepte wie BEM/ITCSS/OOCSS, konkrete Frameworks a la Tailwind und Addons wie CSS Modules. Diesen Erstellungs-Tools gegenüber stehen Analyse- und QA-Ansätze wie Visual Regression Testing (mit Varianten wie Warhol und SiteEffect) und relativ simplen Lintern. Martins Stylezen ist da etwas anders: aufbauend auf der Idee, dass CSS eigentlich eine statisch typisierte Sprache istund inspriert von Adam Argyle, wird Stylezen eine Art TypeScript für CSS (Stylezen-Extension für VS Code in Aktion). Am Rande geht es außerdem um Custom Properties, Container Queries, CSS Containment, warum niemand CSS ernst nimmt, die kognitive Komplexität von CSS, Web Components (v.a. Revision 480), Shadow DOM, Scoped CSS, Cloud Flare Workers, csstype, die absurde Komplexität von CSS Grid, Mootools und die Freuden der Webstandards-Spezifikations-Exegese.

Revision 484: CSS Tücken und Tooling

<p>Hans, Vanessa, Peter und Schepp trafen sich unter dem Vorwand, die „Neuerungen“ von Safari 15 zu diskutieren, kamen dabei aber über Umwege auch auf Browser Extensions sowie das Pro und Contra von Bookmarks zu sprechen</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:01] <a href="https://developer.apple.com/documentation/safari-release-notes/safari-15-beta-release-notes">Safari 15</a></dt>
<dd>Die Jünger des heiligen Steve haben anlässlich <a href="https://developer.apple.com/wwdc21/">der letzten WWDC</a> (<a href="https://developer.apple.com/videos/play/wwdc2021/10029/">Video</a>) eine neue <a href="https://developer.apple.com/documentation/safari-release-notes/safari-15-beta-release-notes">neue Safari-Version</a> in Petto. Enthalten sind null PWA-Features, diverse UI-Updates (v.A. Tab Groups), Unterstützug für <code>&lt;meta name="theme-color"&gt;</code> (was wir hinsichtlich der <a href="https://caniuse.com/meta-theme-color">Browserunterstützung</a> und des Dark-Pattern-Patenzials gründlich besprechen) und <code>aspect-ratio</code> für Iframes – <a href="https://blog.theodo.com/2018/01/responsive-iframes-css-trick/">ein Hack weniger!</a></dd>
<dt>[00:00:00] Bookmarks und Browser-Synchronisierung</dt>
<dd>In einem kurzen Exkurs predigt Hans mit Verve die Vorzüge vereinheitlichter Browser-Synchronisierung, speziell für Bookmarks. Peter vetritt halbherzig das Team Hirnsieb. Als Tools für Bookmarking und Wissens-Orga empfehlen wir <strong>Chrome</strong> und seine Einbauten (Hans) <a>Pocket</a> (Schepp) <a href="https://apps.apple.com/de/app/abyss-read-later/id1507396839">Abyss</a> (Vanessa) und <a href="https://obsidian.md/">Obsidian</a> (Peter).</dd>
<dt>[00:00:00] Browser-Extensions und Webseiten-Eingriffe</dt>
<dd>Außerdem neu in Safari: Unterstützung für <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">Web Extensions</a>, (fast) ganz wie in Chrome und Firefox! Anlässlich dessen berichtet Schepp von seinen Erfahrungen mit Chrome-Extensions-Entwicklung und schimpft besonders auf die extrem nutzlose <a href="https://developer.chrome.com/docs/extensions/">Dokumentation</a>. Über Extensions kommen wir zum Über-Thema „Elemente, die in Webseiten eingreifen“ (Extensions wie <a href="https://www.grammarly.com/">Grammarly</a>, <a href="https://lock.cmpxchg8b.com/passmgrs.html">PW-Manager</a>), die zusammen mit der allgemeinen Komplexitätszunahme (Responsive Design, Dark/Light Mode, <a href="https://medium.engineering/the-curious-case-of-disappearing-polish-s-fa398313d4df">bizarren Bugs auf allen Ebenen</a> Entwickler:innen in den Wahnsinn treiben. Kann man dem Wahnsinn mit Tools wie <a href="https://sentry.io/welcome/">Sentry</a>, <a href="https://sizzy.co/">Sizzy</a> und <a href="https://polypane.app/">Polypane</a> begegnen, oder sollten wir alle doch lieber was mit Holz machen? Hans hat die ultimative Antwort auf diese Frage …</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/Schepp/dom-treemap-devtools-extension">DOM Treemap</a></dt>
<dd>Schepps in der Revision angesprochene Browser-Erweiterung, mit der man in die Tiefen seines DOM Baums auf der Suche nach den verloren DOM-Knoten hinabsteigen kann. Gibt es für <a href="https://chrome.google.com/webstore/detail/dom-treemap/albnoggfgnooeefdjpncieecohhblonh">Chrome</a> und für <a href="https://addons.mozilla.org/en-US/firefox/addon/dom-treemap/">Firefox</a>.</dd>
</dl>


Hans, Vanessa, Peter und Schepp trafen sich unter dem Vorwand, die „Neuerungen“ von Safari 15 zu diskutieren, kamen dabei aber über Umwege auch auf Browser Extensions sowie das Pro und Contra von Bookmarks zu sprechen Schaunotizen [00:01:01] Safari 15 Die Jünger des heiligen Steve haben anlässlich der letzten WWDC (Video) eine neue neue Safari-Version in [&#8230;]

Hans, Vanessa, Peter und Schepp trafen sich unter dem Vorwand, die „Neuerungen“ von Safari 15 zu diskutieren, kamen dabei aber über Umwege auch auf Browser Extensions sowie das Pro und Contra von Bookmarks zu sprechen
Schaunotizen

[00:01:01] Safari[...]

Hans, Vanessa, Peter und Schepp trafen sich unter dem Vorwand, die „Neuerungen“ von Safari 15 zu diskutieren, kamen dabei aber über Umwege auch auf Browser Extensions sowie das Pro und Contra von Bookmarks zu sprechen
Schaunotizen

[00:01:01] Safari 15
Die Jünger des heiligen Steve haben anlässlich der letzten WWDC (Video) eine neue neue Safari-Version in Petto. Enthalten sind null PWA-Features, diverse UI-Updates (v.A. Tab Groups), Unterstützug für <meta name="theme-color"> (was wir hinsichtlich der Browserunterstützung und des Dark-Pattern-Patenzials gründlich besprechen) und aspect-ratio für Iframes – ein Hack weniger!
[00:00:00] Bookmarks und Browser-Synchronisierung
In einem kurzen Exkurs predigt Hans mit Verve die Vorzüge vereinheitlichter Browser-Synchronisierung, speziell für Bookmarks. Peter vetritt halbherzig das Team Hirnsieb. Als Tools für Bookmarking und Wissens-Orga empfehlen wir Chrome und seine Einbauten (Hans) Pocket (Schepp) Abyss (Vanessa) und Obsidian (Peter).
[00:00:00] Browser-Extensions und Webseiten-Eingriffe
Außerdem neu in Safari: Unterstützung für Web Extensions, (fast) ganz wie in Chrome und Firefox! Anlässlich dessen berichtet Schepp von seinen Erfahrungen mit Chrome-Extensions-Entwicklung und schimpft besonders auf die extrem nutzlose Dokumentation. Über Extensions kommen wir zum Über-Thema „Elemente, die in Webseiten eingreifen“ (Extensions wie Grammarly, PW-Manager), die zusammen mit der allgemeinen Komplexitätszunahme (Responsive Design, Dark/Light Mode, bizarren Bugs auf allen Ebenen Entwickler:innen in den Wahnsinn treiben. Kann man dem Wahnsinn mit Tools wie Sentry, Sizzy und Polypane begegnen, oder sollten wir alle doch lieber was mit Holz machen? Hans hat die ultimative Antwort auf diese Frage …

Keine Schaunotizen

DOM Treemap
Schepps in der Revision angesprochene Browser-Erweiterung, mit der man in die Tiefen seines DOM Baums auf der Suche nach den verloren DOM-Knoten hinabsteigen kann. Gibt es für Chrome und für Firefox.

Revision 483: Safari 15 und Browser-Extensions aller Art

<p>Nachdem es schon wieder <a href="https://workingdraft.de/376/">zweieinhalb Jahre her ist</a>, dass wir unseren letzten Blick auf Angular geworfen haben, luden wir uns <a href="https://martinakraus.github.io/">Martina Kraus</a> ein, um uns wieder auf Stand zu bringen.</p>
<p>Martina twittert als <a href="https://twitter.com/martinakraus11">@martinakraus11</a>, ist selbstständige Beraterin, Trainerin und Sprecherin zum Thema Angular, und das nicht erst seit gestern. Zudem organisiert sie <a href="https://www.meetup.com/angular-heidelberg/">zahlreichen</a> <a href="https://www.meetup.com/RheinNeckarJS/">Meetups</a> in der Heidelberger Region. Aufgrund dieser zahlreichen Aktivitäten ist sie mittlerweile zur Google Developer Expert (GDE) für Angular avanciert und tauscht sich dementsprechend viel mit dem Angular Core-Team zu Wünschen aus der Community und neuen Entwicklungen des Frameworks aus.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] <a href="#">Angular im Jahr 2021</a></dt>
<dd>Die aktuell neuste Version des Frameworks ist die Version 12, die mittlerweile voll auf den Compiler &#8222;Ivy&#8220; setzt, welcher in unserer letzten Folge vor zweieinhalb Jahren noch Zukunftsmusik war. Einer der ganz großen Vorteile von Ivy ist, dass der erzeugte Code im Gegensatz zu früher getreeshaked werden kann, was Angular-Anwendungen, die nicht von Angular bereitgestellten Features nutzen, deutlich kleiner werden lässt.</p>
<p>Außerdem beschreitet das Framework einen interessanten neuen Pfad, nämlich indem es zunehmend auf TypeScript zugunsten von ES 2017 verzichtet. Das kommt insofern unerwartet, als dass Angular bei seiner Einführung 2016 als erstes JavaScript-Framework überhaupt voll auf TypeScript gesetzt hat und die anderen beiden großen Frameworks jetzt erst bei Angulars Level an TypeScript-Unterstützung angekommen sind. Auf Typinferenz muss dabei niemand verzichten, denn Angular 12 setzt auf einen neuen Modus namens &#8222;Strict&#8220;, der von der Autorin erwartet, dass alle Variablen, die an einem Template hängen, initialisiert werden müssen. Und dadurch ist dann von Anfang an klar, um was für einen Datentyp es sich handelt. Wir sind gespannt, ob andere Frameworks hier nachziehen werden.</p>
<p>Nach wie vor bereitet der Umstieg vom alten Compiler auf Ivy allerdings hier und da noch Probleme, weil nämlich Angular-Libraries für beide Compiler adaptiert werden müssen. Hier gibt es aber Schützenhilfe von Tools wie dem Angular Compatibility Compiler (ngcc) &#8211; und auch Martina <a href="https://www.youtube.com/watch?v=33CNQD8qJbw">hat dazu dankenswerterweise einen Talk auf Lager</a>. Zudem hat Ivy noch ein paar eher halb-offizielle Features wie Higher Order Components oder Custom Change Detection, die in Zukunft ausgereiftere Interfaces benötigen. Auch dazu <a href="https://www.youtube.com/watch?v=slm77hiemM0">hat Martina einen Talk parat</a>!</p>
<p>Eine weitere wichtige Neuerung von Angular 12 ist dass es mit Webpack 5 daherkommt. Dieses erleichtert vor allem das Orchestrieren von in Angular gebauten Micro-Frontends, was so vormals nur <a href="https://github.com/manfredsteyer/angular-microfrontend">mit der Microfrontend-Library von Manfred Steyer</a> möglich war (siehe dazu auch den <a href="https://www.angulararchitects.io/en/konferenzen/the-micro-frontend-revolution-module-federation-with-angular/">Talk vom ihm</a>).</p>
<p>Wer nach dem Hören unserer Folge Lust auf Angular bekommen hat, dem empfiehlt Martina den Einstieg über das Angular-eigene Einsteiger-Toturial &#8222;<a href="https://angular.io/tutorial/toh-pt1">Tour of Heroes</a>&#8222;, oder aber <a href="https://pro.academind.com/p/angular-essentials-angular-2-with-typescript">die Tutorials von Maximilian Schwarzmüller, aka Academind</a>.</p>
<p>Geht es hingegen darum, Feedback los zu werden, dann schickt eine Mail an devrel@angular.io, oder wendet Euch an die DevRel <a href="https://twitter.com/twerske">Emma Twersky</a>, oder geht den Weg über eine*n GDE wie Martina.</dd>
</dl>


Nachdem es schon wieder zweieinhalb Jahre her ist, dass wir unseren letzten Blick auf Angular geworfen haben, luden wir uns Martina Kraus ein, um uns wieder auf Stand zu bringen. Martina twittert als @martinakraus11, ist selbstständige Beraterin, Trainerin und Sprecherin zum Thema Angular, und das nicht erst seit gestern. Zudem organisiert sie zahlreichen Meetups in [&#8230;]

Nachdem es schon wieder zweieinhalb Jahre her ist, dass wir unseren letzten Blick auf Angular geworfen haben, luden wir uns Martina Kraus ein, um uns wieder auf Stand zu bringen.
Martina twittert als @martinakraus11, ist selbstständige Beraterin, Tr[...]

Nachdem es schon wieder zweieinhalb Jahre her ist, dass wir unseren letzten Blick auf Angular geworfen haben, luden wir uns Martina Kraus ein, um uns wieder auf Stand zu bringen.
Martina twittert als @martinakraus11, ist selbstständige Beraterin, Trainerin und Sprecherin zum Thema Angular, und das nicht erst seit gestern. Zudem organisiert sie zahlreichen Meetups in der Heidelberger Region. Aufgrund dieser zahlreichen Aktivitäten ist sie mittlerweile zur Google Developer Expert (GDE) für Angular avanciert und tauscht sich dementsprechend viel mit dem Angular Core-Team zu Wünschen aus der Community und neuen Entwicklungen des Frameworks aus.
Schaunotizen

[00:01:00] Angular im Jahr 2021
Die aktuell neuste Version des Frameworks ist die Version 12, die mittlerweile voll auf den Compiler „Ivy“ setzt, welcher in unserer letzten Folge vor zweieinhalb Jahren noch Zukunftsmusik war. Einer der ganz großen Vorteile von Ivy ist, dass der erzeugte Code im Gegensatz zu früher getreeshaked werden kann, was Angular-Anwendungen, die nicht von Angular bereitgestellten Features nutzen, deutlich kleiner werden lässt.
Außerdem beschreitet das Framework einen interessanten neuen Pfad, nämlich indem es zunehmend auf TypeScript zugunsten von ES 2017 verzichtet. Das kommt insofern unerwartet, als dass Angular bei seiner Einführung 2016 als erstes JavaScript-Framework überhaupt voll auf TypeScript gesetzt hat und die anderen beiden großen Frameworks jetzt erst bei Angulars Level an TypeScript-Unterstützung angekommen sind. Auf Typinferenz muss dabei niemand verzichten, denn Angular 12 setzt auf einen neuen Modus namens „Strict“, der von der Autorin erwartet, dass alle Variablen, die an einem Template hängen, initialisiert werden müssen. Und dadurch ist dann von Anfang an klar, um was für einen Datentyp es sich handelt. Wir sind gespannt, ob andere Frameworks hier nachziehen werden.
Nach wie vor bereitet der Umstieg vom alten Compiler auf Ivy allerdings hier und da noch Probleme, weil nämlich Angular-Libraries für beide Compiler adaptiert werden müssen. Hier gibt es aber Schützenhilfe von Tools wie dem Angular Compatibility Compiler (ngcc) – und auch Martina hat dazu dankenswerterweise einen Talk auf Lager. Zudem hat Ivy noch ein paar eher halb-offizielle Features wie Higher Order Components oder Custom Change Detection, die in Zukunft ausgereiftere Interfaces benötigen. Auch dazu hat Martina einen Talk parat!
Eine weitere wichtige Neuerung von Angular 12 ist dass es mit Webpack 5 daherkommt. Dieses erleichtert vor allem das Orchestrieren von in Angular gebauten Micro-Frontends, was so vormals nur mit der Microfrontend-Library von Manfred Steyer möglich war (siehe dazu auch den Talk vom ihm).
Wer nach dem Hören unserer Folge Lust auf Angular bekommen hat, dem empfiehlt Martina den Einstieg über das Angular-eigene Einsteiger-Toturial „Tour of Heroes„, oder aber die Tutorials von Maximilian Schwarzmüller, aka Academind.
Geht es hingegen darum, Feedback los zu werden, dann schickt eine Mail an devrel@angular.io, oder wendet Euch an die DevRel Emma Twersky, oder geht den Weg über eine*n GDE wie Martina.

Revision 482: Angular im Jahr 2021

<p>Rod und Peter hatten <a href="https://twitter.com/uhligtobias">Tobias Uhlig</a> zu Gast, der als federführende Kraft hinter dem Framework <a href="https://github.com/neomjs/neo">neo.mjs</a> einiges zu Multithreading in Webapps zu erzählen weiß.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] Worker, Tiere, Sensationen!</dt>
<dd>Nach den üblichen Vergleichen von Tobias&#8216; neo.mjs mit Angular und co geht es umgehend an&#8217;s Eingemachte. Wie quatschen nicht nur über <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Dedicated Worker</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">Shared Worker</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> (nebst <a href="https://github.com/ampproject/worker-dom">Worker DOM</a>), sondern auch über <a href="https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel">Message Channels</a> bzw. Message Ports (und ihre <a href="https://developer.mozilla.org/en-US/docs/Web/API/Transferable">Transferierbarkeit</a>) und Asynchronität im Allgemeinen. Anhand von neo.mjs kauen wir Fragen von Remote Method Access, handgedengeltem VDOM und abgestuftem TypeScript-Support in modernen Tools durch. Auch über die im Jahre 2021 ggf. noch verbleibende Relevanz von Drag &amp; Drop und Multi-Window-Apps denken wir laut nach und verweisen gegen Ende auf Tobias&#8216; <a href="https://neomjs.github.io/pages/node_modules/neo.mjs/dist/production/apps/covid/index.html">Covid-Dashboard</a> als eine neo.mjs-Demo.</dd>
</dl>


Rod und Peter hatten Tobias Uhlig zu Gast, der als federführende Kraft hinter dem Framework neo.mjs einiges zu Multithreading in Webapps zu erzählen weiß. Schaunotizen [00:01:00] Worker, Tiere, Sensationen! Nach den üblichen Vergleichen von Tobias&#8216; neo.mjs mit Angular und co geht es umgehend an&#8217;s Eingemachte. Wie quatschen nicht nur über Dedicated Worker, Shared Worker und [&#8230;]

Rod und Peter hatten Tobias Uhlig zu Gast, der als federführende Kraft hinter dem Framework neo.mjs einiges zu Multithreading in Webapps zu erzählen weiß.
Schaunotizen

[00:01:00] Worker, Tiere, Sensationen!
Nach den üblichen Vergleichen von Tobias[...]

Rod und Peter hatten Tobias Uhlig zu Gast, der als federführende Kraft hinter dem Framework neo.mjs einiges zu Multithreading in Webapps zu erzählen weiß.
Schaunotizen

[00:01:00] Worker, Tiere, Sensationen!
Nach den üblichen Vergleichen von Tobias‘ neo.mjs mit Angular und co geht es umgehend an’s Eingemachte. Wie quatschen nicht nur über Dedicated Worker, Shared Worker und Service Worker (nebst Worker DOM), sondern auch über Message Channels bzw. Message Ports (und ihre Transferierbarkeit) und Asynchronität im Allgemeinen. Anhand von neo.mjs kauen wir Fragen von Remote Method Access, handgedengeltem VDOM und abgestuftem TypeScript-Support in modernen Tools durch. Auch über die im Jahre 2021 ggf. noch verbleibende Relevanz von Drag & Drop und Multi-Window-Apps denken wir laut nach und verweisen gegen Ende auf Tobias‘ Covid-Dashboard als eine neo.mjs-Demo.

Revision 481: Multithreading, Web Worker, Shared Worker und Multi-Screen-Applications mit Tobias Uhlig

<p>Fullstack-Entwicklerin, CSS-Feinschmeckerin und Webstandards-Liebhaberin <strong>Joy Heron</strong> (<a href="https://twitter.com/iamjoyheron">Twitter</a>, <a href="https://joyheron.com/">Webseite</a>, <a href="https://www.case-podcast.org/">Case-Podcast</a>) fand sich im virtuellen Workingdraft-Studio ein, um mit Schepp, Peter und Vanessa über Web Components zu fachsimpeln.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://www.netidee.at/?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 400px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/06/netidee-banner-1.jpg" alt="" /></a></p>
<div class="message_content">netidee ist die große Internet Förderaktion in Österreich. Bis zu 1. Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. <a href="https://www.netidee.at/?ref=workingdraft.de">Hier kannst du mehr über netidee erfahren</a>.</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:36] Web Components und Web Component Design</dt>
<dd>Wir beginnen damit, die Unterschiede zwischen Web Components und Framework-Komponenten herauszuarbeiten und bequatschen dabei mit <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">Custom Elements</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> und dem <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template">template-Element</a> die wesentlichen Bestandteile von Web Components. Wir besprechen Accessibility-Fragen, wägen HTML-Seiten gegen SPAs ab (relevant: <a href="https://www.youtube.com/watch?v=V8oTJ8OZ5S0">Removing client-side React.js (but keeping it on the server) resulted in a 50% performance improvement on our landing page</a>) und besprechen das Für und Wider von Polyfills für Web Components. Ergebnis: gutes Web-Component-Design braucht keine Polyfills (aber wenn, dann sollte es ein <a href="https://github.com/ungap/custom-elements">leichtgewichtiger Polyfill</a> sein). Außerdem kommen zukünftige (<a href="https://web.dev/declarative-shadow-dom/">Deklaratives Shadow DOM</a>) und verflossene (<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports">HTML Imports</a>) APIs rund um Web Components zu Sprache. Über die Frage des Einsatzspektrums und denkbarer Alternativen zu sowohl Web Components als auch fetten Frameworks (<a href="https://github.com/WebReflection/hyperHTML">hyperHTML</a>, <a href="https://github.com/WebReflection/uland">µland</a>) kommen wir zu der Frage, welche Wert das Wissen um Webstandards-Basics (mit <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault">Event.preventDefault()</a> als Beispiel) heutzutage überhaupt hat. Gegen Ende verweisen wir noch auf <a href="https://developer.mozilla.org/de/docs/Web/Web_Components">die MDN-Doku zu Web Components</a>, Joy&#8217;s Talk <a href="https://www.youtube.com/watch?v=CGEk-W8p13M">Web Components: Maintaining and Reusing your Frontend</a>, Brad Frost&#8217;s Artikel zu <a href="https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/">front-of-the-front-end and back-of-the-front-end web development</a> und Joy&#8217;s Kompendium <a href="https://responsibleweb.app/">Responsible Web Applications</a>. Zudem stellt Peter für frühstens 2027 einen Blogpost über OOP-DOM mit Elementen in Aussicht.</dd>
</dl>


Fullstack-Entwicklerin, CSS-Feinschmeckerin und Webstandards-Liebhaberin Joy Heron (Twitter, Webseite, Case-Podcast) fand sich im virtuellen Workingdraft-Studio ein, um mit Schepp, Peter und Vanessa über Web Components zu fachsimpeln. Unser Sponsor netidee ist die große Internet Förderaktion in Österreich. Bis zu 1. Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und [&#8230;]

Fullstack-Entwicklerin, CSS-Feinschmeckerin und Webstandards-Liebhaberin Joy Heron (Twitter, Webseite, Case-Podcast) fand sich im virtuellen Workingdraft-Studio ein, um mit Schepp, Peter und Vanessa über Web Components zu fachsimpeln.

Unser Sponsor[...]

Fullstack-Entwicklerin, CSS-Feinschmeckerin und Webstandards-Liebhaberin Joy Heron (Twitter, Webseite, Case-Podcast) fand sich im virtuellen Workingdraft-Studio ein, um mit Schepp, Peter und Vanessa über Web Components zu fachsimpeln.

Unser Sponsor

netidee ist die große Internet Förderaktion in Österreich. Bis zu 1. Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. Hier kannst du mehr über netidee erfahren.

Schaunotizen

[00:01:36] Web Components und Web Component Design
Wir beginnen damit, die Unterschiede zwischen Web Components und Framework-Komponenten herauszuarbeiten und bequatschen dabei mit Custom Elements, Shadow DOM und dem template-Element die wesentlichen Bestandteile von Web Components. Wir besprechen Accessibility-Fragen, wägen HTML-Seiten gegen SPAs ab (relevant: Removing client-side React.js (but keeping it on the server) resulted in a 50% performance improvement on our landing page) und besprechen das Für und Wider von Polyfills für Web Components. Ergebnis: gutes Web-Component-Design braucht keine Polyfills (aber wenn, dann sollte es ein leichtgewichtiger Polyfill sein). Außerdem kommen zukünftige (Deklaratives Shadow DOM) und verflossene (HTML Imports) APIs rund um Web Components zu Sprache. Über die Frage des Einsatzspektrums und denkbarer Alternativen zu sowohl Web Components als auch fetten Frameworks (hyperHTML, µland) kommen wir zu der Frage, welche Wert das Wissen um Webstandards-Basics (mit Event.preventDefault() als Beispiel) heutzutage überhaupt hat. Gegen Ende verweisen wir noch auf die MDN-Doku zu Web Components, Joy’s Talk Web Components: Maintaining and Reusing your Frontend, Brad Frost’s Artikel zu front-of-the-front-end and back-of-the-front-end web development und Joy’s Kompendium Responsible Web Applications. Zudem stellt Peter für frühstens 2027 einen Blogpost über OOP-DOM mit Elementen in Aussicht.

Revision 480: Web Component Design mit Joy Heron

<p>Eine weitere Late Night Ausgabe mit Kahlil und Stefan im Überleitungsmarathon!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] <a href="https://world.hey.com/jason/changes-at-basecamp-7f32afc5">Changes at Basecamp</a></dt>
<dd>Nachdem die Menschen von Basecamp in den Late Night Episoden regelmäßig auftauchen müssen wir natürlich kurz über den Mitarbeiter-Exodus und die vorangegangene Kommunikation reden. In einem zusätzlichen Artikel gibt es <a href="https://www.platformer.news/p/-how-basecamp-blew-up">mehr Information</a>. Wir sind erstaunlicherweise anderer Meinung!</dd>
<dt><a href="https://i-am-brennan.medium.com/the-10-50-99-approach-to-feedback-e32157865c50">10/50/99% Feedback</a></dt>
<dd>Apropos Feedback! Machen Sie das Logo doch bitte größer, morgen gehen wir live! Damit solche Dinge nicht passieren bietet es sich an das richtige Feedback zur richtigen Zeit zu geben. Der Artikel veranschaulicht das sehr gut und wir reden über unsere Erfahrungen. Stefan schwört auf die Technik der <a href="https://www.smashingmagazine.com/printed-books/user-experience-revolution/">Design Sprints</a> um schnell Meter zu machen.</dd>
<dt><a href="https://github.blog/2021-05-04-how-we-use-web-components-at-github/">Web Components at GitHub</a></dt>
<dd>GitHub verwendet schon lange Web Components und berichtet. Das <a href="https://github.github.io/catalyst/">Catalyst Toolkit</a> hilft GitHub Entwickler:innen dabei, schneller und einfacher ans Ziel zu kommen. Wir sind immer noch skeptisch ob Web Components, jetzt wo sie wirklich da sind, tatsächlich als Allheilmittel durchgehen. Irgendwo mittendrin erwähnt Stefan auch noch <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">Proxies</a>, und wir kommen wieder ganz vorne an.</dd>
</dl>


Eine weitere Late Night Ausgabe mit Kahlil und Stefan im Überleitungsmarathon! Schaunotizen [00:00:59] Changes at Basecamp Nachdem die Menschen von Basecamp in den Late Night Episoden regelmäßig auftauchen müssen wir natürlich kurz über den Mitarbeiter-Exodus und die vorangegangene Kommunikation reden. In einem zusätzlichen Artikel gibt es mehr Information. Wir sind erstaunlicherweise anderer Meinung! 10/50/99% Feedback [&#8230;]

Eine weitere Late Night Ausgabe mit Kahlil und Stefan im Überleitungsmarathon!
Schaunotizen

[00:00:59] Changes at Basecamp
Nachdem die Menschen von Basecamp in den Late Night Episoden regelmäßig auftauchen müssen wir natürlich kurz über den Mitarbe[...]

Eine weitere Late Night Ausgabe mit Kahlil und Stefan im Überleitungsmarathon!
Schaunotizen

[00:00:59] Changes at Basecamp
Nachdem die Menschen von Basecamp in den Late Night Episoden regelmäßig auftauchen müssen wir natürlich kurz über den Mitarbeiter-Exodus und die vorangegangene Kommunikation reden. In einem zusätzlichen Artikel gibt es mehr Information. Wir sind erstaunlicherweise anderer Meinung!
10/50/99% Feedback
Apropos Feedback! Machen Sie das Logo doch bitte größer, morgen gehen wir live! Damit solche Dinge nicht passieren bietet es sich an das richtige Feedback zur richtigen Zeit zu geben. Der Artikel veranschaulicht das sehr gut und wir reden über unsere Erfahrungen. Stefan schwört auf die Technik der Design Sprints um schnell Meter zu machen.
Web Components at GitHub
GitHub verwendet schon lange Web Components und berichtet. Das Catalyst Toolkit hilft GitHub Entwickler:innen dabei, schneller und einfacher ans Ziel zu kommen. Wir sind immer noch skeptisch ob Web Components, jetzt wo sie wirklich da sind, tatsächlich als Allheilmittel durchgehen. Irgendwo mittendrin erwähnt Stefan auch noch Proxies, und wir kommen wieder ganz vorne an.

Revision 479: Late-Night mit Feedback Culture, Basecamp, Design Sprints

<p>Unter dem Vorwand, eine neue TypeScript-Version zu besprechen, trafen sich Stefan und Peter und quatschten in Wahrheit über Delphi, Balkonpflanzen, Rust, Napoleon, Go(tt) und die Welt.</p>
<h3>[00:00:58] Schaunotizen</h3>
<dl>
<dt><a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/">Announcing TypeScript 4.3 RC</a></dt>
<dd>Es steht eine neue TypeScript-Version vor der Tür, die wir Feature für Feature durchkauen und dabei immer wieder bis zum Mond abschweifen. Der Umstand, dass <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#constructorparameterstype"><code>ConstructorParameters&lt;Type&gt;</code></a> nun auch für <a href="https://www.typescriptlang.org/docs/handbook/2/classes.html#abstract-classes-and-members"><code>abstract</code> Classes</a> funktioniert, führt uns direkt ins traditionelle OOP-Roasting. Dabei erwähnen wir nicht nur <a href="https://fettblog.eu/typescript-interface-constructor-pattern/">Stefans Artikel zum Constructor Interface Pattern</a>, sondern auch <a href="https://twitter.com/sir_pepe/status/1394343214337904643">Fehlleistungen aus dem Hause Bloomberg.com</a>. Über den Wert der Always-Truthy Promise Checks sind wir uns ebenso uneinig wie über die diversen Upgrades des TS-Compilers, nutzen letzteres Thema jedoch zum Abschweifen in Richtung <a href="https://bazel.build/">Bazel</a>, <a href="https://esbuild.github.io/">esbuild</a>, <a href="https://golang.org/">Go</a> (und den <a href="https://www.reddit.com/r/rust/comments/5penft/parallelizing_enjarify_in_go_and_rust/dcsgk7n/">legendären Generics-Hack</a>) und <a href="https://www.rust-lang.org/">Rust</a>. Neue Editor-Features von TS lassen uns über die Beziehung zwischen TypeScript und <a href="https://code.visualstudio.com/">VS Code</a> philosophieren, bevor es an die ersten Neuerungen von TS 4.3 geht, die uns wirklich interessieren. Tweaks am den Typen von Gettern und Settern sind nicht die Weltformel, aber gerade für Web Components schon ein sinnvolles Feature. Unabhängig davon fordert Peter einen Rust-artigen <code>unsafe</code>-Block für TS, damit <a href="https://www.peterkroener.de/ambiguitaetstoleranz-loecher-und-constructor-funktionen/">Löcher im Typsystem</a> besser behandelt werden können). Der Klassenkampf setzt sich mit <code>override</code> nebst <code>--noImplicitOverride</code> sowie <code>#private</code> (jetzt auch für Methoden) fort, was wir auf sehr zurückhaltende Weise begrüßen. Contextual Narrowing for Generics (eine selektive Aufschlauung der Typsystems) und Template String Type Improvements (eine weitere selektive Aufschlauung der Typsystems) sagt uns da schon mehr zu. Gegen Ende verfransen wir uns dann mit <a href="https://github.com/tc39/proposal-do-expressions">einen Proposal für do-Expressions</a>, <a href="https://en.wikipedia.org/wiki/Charles_Joseph_Minard#/media/File:Minard.png">Napoleons Rückzug aus Moskau</a>, <a href="https://reasonml.github.io/">ReasonML</a>/<a href="https://rescript-lang.org/">ReScript</a>, <a href="https://de.wikipedia.org/wiki/Embarcadero_Delphi">Delphi</a>, <a href="https://www.gtk.org/">GTK</a> und Empfehlungen für die Revionen <a href="https://workingdraft.de/446/">446</a> und <a href="https://workingdraft.de/175/">175</a> dann vollends.</dd>
</dl>


Unter dem Vorwand, eine neue TypeScript-Version zu besprechen, trafen sich Stefan und Peter und quatschten in Wahrheit über Delphi, Balkonpflanzen, Rust, Napoleon, Go(tt) und die Welt. [00:00:58] Schaunotizen Announcing TypeScript 4.3 RC Es steht eine neue TypeScript-Version vor der Tür, die wir Feature für Feature durchkauen und dabei immer wieder bis zum Mond abschweifen. Der [&#8230;]

Unter dem Vorwand, eine neue TypeScript-Version zu besprechen, trafen sich Stefan und Peter und quatschten in Wahrheit über Delphi, Balkonpflanzen, Rust, Napoleon, Go(tt) und die Welt.
[00:00:58] Schaunotizen

Announcing TypeScript 4.3 RC
Es steht e[...]

Unter dem Vorwand, eine neue TypeScript-Version zu besprechen, trafen sich Stefan und Peter und quatschten in Wahrheit über Delphi, Balkonpflanzen, Rust, Napoleon, Go(tt) und die Welt.
[00:00:58] Schaunotizen

Announcing TypeScript 4.3 RC
Es steht eine neue TypeScript-Version vor der Tür, die wir Feature für Feature durchkauen und dabei immer wieder bis zum Mond abschweifen. Der Umstand, dass ConstructorParameters<Type> nun auch für abstract Classes funktioniert, führt uns direkt ins traditionelle OOP-Roasting. Dabei erwähnen wir nicht nur Stefans Artikel zum Constructor Interface Pattern, sondern auch Fehlleistungen aus dem Hause Bloomberg.com. Über den Wert der Always-Truthy Promise Checks sind wir uns ebenso uneinig wie über die diversen Upgrades des TS-Compilers, nutzen letzteres Thema jedoch zum Abschweifen in Richtung Bazel, esbuild, Go (und den legendären Generics-Hack) und Rust. Neue Editor-Features von TS lassen uns über die Beziehung zwischen TypeScript und VS Code philosophieren, bevor es an die ersten Neuerungen von TS 4.3 geht, die uns wirklich interessieren. Tweaks am den Typen von Gettern und Settern sind nicht die Weltformel, aber gerade für Web Components schon ein sinnvolles Feature. Unabhängig davon fordert Peter einen Rust-artigen unsafe-Block für TS, damit Löcher im Typsystem besser behandelt werden können). Der Klassenkampf setzt sich mit override nebst --noImplicitOverride sowie #private (jetzt auch für Methoden) fort, was wir auf sehr zurückhaltende Weise begrüßen. Contextual Narrowing for Generics (eine selektive Aufschlauung der Typsystems) und Template String Type Improvements (eine weitere selektive Aufschlauung der Typsystems) sagt uns da schon mehr zu. Gegen Ende verfransen wir uns dann mit einen Proposal für do-Expressions, Napoleons Rückzug aus Moskau, ReasonML/ReScript, Delphi, GTK und Empfehlungen für die Revionen 446 und 175 dann vollends.

Revision 478: Abschweifen mit TypeScript 4.3

<p>Mit <a href="https://twitter.com/fabian_friedl">Fabian Friedl</a>, DesignOps Team Lead bei <a href="https://www.dynatrace.com/">Dynatrace</a>, sprechen Vanessa, Hans und Stefan über Komponentenbibliotheken und Design Systeme.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] Komponentenbibliotheken und Design Systeme</dt>
<dd>Bevor ins Detail eingestiegen wird, erklärt Fabian erst einmal was eine Komponentenbibliothek überhaupt ist. Ein Hauptziel von Komponentenbibliotheken ist es, Konsistenz zwischen mehreren Applikation herzustellen. Darüberhinaus können sie allerdings auch Mehraufwand deutlich minimieren. So muss beispielsweise bei einem Redesign oder bei einer Erweiterung nicht jedes Featureteam die Änderung umsetzen. Stattdessen kommen Änderungen vom Team der Komponentenbibliothek. Die Basis von Komponentenbibliotheken sind Design Systeme. Als i-Tüpfelchen können Designer:innen und Entwickler:innen <a href="https://www.w3.org/community/design-tokens/">Design Tokens</a> verwenden. Design Tokens geben atomic Styles an, die für verschiedene Plattformen, wie iOS, Android oder als Custom Properties für Web, exportiert werden können. Selbstverständlich kann es auch Nachteile geben. Doch diese lassen sich durch Organisation umgehen. Fabians Team arbeitet eng mit dem Designteam zusammen, eigentlich sind sie eher ein Team. Es gibt wöchentliche Designreviews, die für einen frühen Austausch sorgen. Eine wichtige Frage, die sich dann beim Entwickeln stellt ist: Wer ist der Konsument? Ist es ein komplettes Open Source Projekt, wie viele Feature Teams greifen auf die Bibliothek zu? Unabhängig davon, jeder Konsument der Bibliothek wird eine gute Dokumentation benötigen. Noch besser sind sogar Copy &amp; Paste Snippets zum Ausprobieren. Je besser die Dokumentation ist, desto mehr erspart man sich Nachrichten über Chatsysteme mit immer den gleiche Fragen. Weiteres Material in den Links</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://material.angular.io/cdk/categories">Angular CDK</a></dt>
<dd>Stilfreier Grundbaukasten für barrierefreie Angular Komponenten</dd>
<dt><a href="https://akveo.github.io/nebular/docs/components/calendar-kit/overview#nbcalendarkitmodule">Calender Kit</a></dt>
<dd>Schon mal ein Kalender-Widget gebaut? Hier gibt&#8217;s kopflose Unterstützung.</dd>
<dt><a href="https://react-spectrum.adobe.com/react-aria/index.html">React-aria</a></dt>
<dd>React Hooks von Adobe zur Erstellung barrierefreier Komponenten. Sehr qualitativ!</dd>
<dt><a href="https://headlessui.dev/">Headless UI</a></dt>
<dd>Headless Components von den Tailwind Machern in React und Vue</dd>
<dt><a href="https://reach.tech/">Reach</a></dt>
<dd>Stilfreie, barrierefreie React Komponenten</dd>
<dt><a href="https://polaris.shopify.com/design/colors#section-color-roles">Polaris</a></dt>
<dd>Das Shopify Design System</dd>
<dt><a href="https://barista.dynatrace.com">Barista</a></dt>
<dd>Das Dynatrace Design System</dd>
<dt><a href="https://www.youtube.com/watch?v=kwW2HNlpdwM">Learnings from building a component Library</a></dt>
<dd>Fabians Vortrag auf der NG-DE</dd>
</dl>


Mit Fabian Friedl, DesignOps Team Lead bei Dynatrace, sprechen Vanessa, Hans und Stefan über Komponentenbibliotheken und Design Systeme. Schaunotizen [00:00:00] Komponentenbibliotheken und Design Systeme Bevor ins Detail eingestiegen wird, erklärt Fabian erst einmal was eine Komponentenbibliothek überhaupt ist. Ein Hauptziel von Komponentenbibliotheken ist es, Konsistenz zwischen mehreren Applikation herzustellen. Darüberhinaus können sie allerdings auch Mehraufwand [&#8230;]

Mit Fabian Friedl, DesignOps Team Lead bei Dynatrace, sprechen Vanessa, Hans und Stefan über Komponentenbibliotheken und Design Systeme.
Schaunotizen

[00:00:00] Komponentenbibliotheken und Design Systeme
Bevor ins Detail eingestiegen wird, erklärt [...]

Mit Fabian Friedl, DesignOps Team Lead bei Dynatrace, sprechen Vanessa, Hans und Stefan über Komponentenbibliotheken und Design Systeme.
Schaunotizen

[00:00:00] Komponentenbibliotheken und Design Systeme
Bevor ins Detail eingestiegen wird, erklärt Fabian erst einmal was eine Komponentenbibliothek überhaupt ist. Ein Hauptziel von Komponentenbibliotheken ist es, Konsistenz zwischen mehreren Applikation herzustellen. Darüberhinaus können sie allerdings auch Mehraufwand deutlich minimieren. So muss beispielsweise bei einem Redesign oder bei einer Erweiterung nicht jedes Featureteam die Änderung umsetzen. Stattdessen kommen Änderungen vom Team der Komponentenbibliothek. Die Basis von Komponentenbibliotheken sind Design Systeme. Als i-Tüpfelchen können Designer:innen und Entwickler:innen Design Tokens verwenden. Design Tokens geben atomic Styles an, die für verschiedene Plattformen, wie iOS, Android oder als Custom Properties für Web, exportiert werden können. Selbstverständlich kann es auch Nachteile geben. Doch diese lassen sich durch Organisation umgehen. Fabians Team arbeitet eng mit dem Designteam zusammen, eigentlich sind sie eher ein Team. Es gibt wöchentliche Designreviews, die für einen frühen Austausch sorgen. Eine wichtige Frage, die sich dann beim Entwickeln stellt ist: Wer ist der Konsument? Ist es ein komplettes Open Source Projekt, wie viele Feature Teams greifen auf die Bibliothek zu? Unabhängig davon, jeder Konsument der Bibliothek wird eine gute Dokumentation benötigen. Noch besser sind sogar Copy & Paste Snippets zum Ausprobieren. Je besser die Dokumentation ist, desto mehr erspart man sich Nachrichten über Chatsysteme mit immer den gleiche Fragen. Weiteres Material in den Links

Links

Angular CDK
Stilfreier Grundbaukasten für barrierefreie Angular Komponenten
Calender Kit
Schon mal ein Kalender-Widget gebaut? Hier gibt’s kopflose Unterstützung.
React-aria
React Hooks von Adobe zur Erstellung barrierefreier Komponenten. Sehr qualitativ!
Headless UI
Headless Components von den Tailwind Machern in React und Vue
Reach
Stilfreie, barrierefreie React Komponenten
Polaris
Das Shopify Design System
Barista
Das Dynatrace Design System
Learnings from building a component Library
Fabians Vortrag auf der NG-DE

Revision 477: Komponentenbibliotheken und Design Systeme

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 488: Glücksrad 2.1 Transitional

Working Draft

Revision 487: Glücksrad 2.0

Working Draft

Revision 486: Corona-Apps: Vorteile und Probleme am Beispiel der Luca App

Working Draft

Revision 485: ES2021 & Beyond

Working Draft

Revision 484: CSS Tücken und Tooling

Working Draft

Revision 483: Safari 15 und Browser-Extensions aller Art

Working Draft

Revision 482: Angular im Jahr 2021

Working Draft

Revision 481: Multithreading, Web Worker, Shared Worker und Multi-Screen-Applications mit Tobias Uhlig

Working Draft

Revision 480: Web Component Design mit Joy Heron

Working Draft

Revision 479: Late-Night mit Feedback Culture, Basecamp, Design Sprints

Working Draft

Revision 478: Abschweifen mit TypeScript 4.3

Working Draft

Revision 477: Komponentenbibliotheken und Design Systeme

Working Draft