<p>Nachdem Stefan zu den regulären Zeiten aktuell nicht mehr teilnehmen kann, haben sich Vanessa, Schepp und die Österreich-Quote früh morgens zu Cappuccino und Hühnerbrühe getroffen. Thema der Sendung: Sämtlicher Research zum Thema Serverless.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:30] Serverless</dt>
<dd><em>Ja, wie ist den das? Bei Serverless gibt&#8217;s doch immer noch Server?</em>. Wieso heißt Serverless eigentlich Serverless, und wie geht das? Stefan referiert über Serverless als Infrastruktur-Prinzip und Serverless als Applikations-Modell. Wir gehen in die Details zu <a href="https://aws.amazon.com/lambda/">AWS Lambda</a>, <a href="https://azure.microsoft.com/de-de/services/functions/">Azure Functions</a>, den <a href="https://workers.cloudflare.com/">Cloudflare Workers</a>, und <a href="https://docs.fastly.com/products/compute-at-edge">Fastly Compute@Edge</a>. Und das auch nur, um die großen Unterschiede der Plattformen herauszustreichen. Daneben gibt es ein paar Details zu <a href="https://docs.fastly.com/products/compute-at-edge">OpenWhisk</a>, <a href="https://docs.fastly.com/products/compute-at-edge">OpenFaaS</a>, <a href="https://knative.dev/docs/">KNative</a>, <a href="https://fission.io/">Fission</a>, <a href="https://keda.sh/">KEDA</a>, etc. Stefan spricht dazu auch auf dem <a href="https://www.youtube.com/watch?v=EXqqsCss8Gk">Rust Linz Meetup</a>. Wer mehr über die Bezahlung wissen will, schaut sich <a href="https://www.troyhunt.com/azure-functions-in-practice/">Troy Hunts Blogpost an</a>. Für komplexere Cloud-Berechnungen gibt es ja mittlerweile Fachleute wie <a href="https://www.duckbillgroup.com/">die Duckbill Group</a>, die einen sehr empfehlenswerten Newsletter betreiben.</dd>
</dl>


Nachdem Stefan zu den regulären Zeiten aktuell nicht mehr teilnehmen kann, haben sich Vanessa, Schepp und die Österreich-Quote früh morgens zu Cappuccino und Hühnerbrühe getroffen. Thema der Sendung: Sämtlicher Research zum Thema Serverless. Schaunotizen [00:02:30] Serverless Ja, wie ist den das? Bei Serverless gibt&#8217;s doch immer noch Server?. Wieso heißt Serverless eigentlich Serverless, und wie [&#8230;]

Working Draft

Nachdem Stefan zu den regulären Zeiten aktuell nicht mehr teilnehmen kann, haben sich Vanessa, Schepp und die Österreich-Quote früh morgens zu Cappuccino und Hühnerbrühe getroffen. Thema der Sendung: Sämtlicher Research zum Thema Serverless.
Schauno[...]

Nachdem Stefan zu den regulären Zeiten aktuell nicht mehr teilnehmen kann, haben sich Vanessa, Schepp und die Österreich-Quote früh morgens zu Cappuccino und Hühnerbrühe getroffen. Thema der Sendung: Sämtlicher Research zum Thema Serverless.
Schaunotizen

[00:02:30] Serverless
Ja, wie ist den das? Bei Serverless gibt’s doch immer noch Server?. Wieso heißt Serverless eigentlich Serverless, und wie geht das? Stefan referiert über Serverless als Infrastruktur-Prinzip und Serverless als Applikations-Modell. Wir gehen in die Details zu AWS Lambda, Azure Functions, den Cloudflare Workers, und Fastly Compute@Edge. Und das auch nur, um die großen Unterschiede der Plattformen herauszustreichen. Daneben gibt es ein paar Details zu OpenWhisk, OpenFaaS, KNative, Fission, KEDA, etc. Stefan spricht dazu auch auf dem Rust Linz Meetup. Wer mehr über die Bezahlung wissen will, schaut sich Troy Hunts Blogpost an. Für komplexere Cloud-Berechnungen gibt es ja mittlerweile Fachleute wie die Duckbill Group, die einen sehr empfehlenswerten Newsletter betreiben.

Revision 494: Serverless

<p>Diesmal trafen sich Vanessa und Schepp, um über ein ganzes <a href="https://de.wikipedia.org/wiki/Potpourri_(Gef%C3%A4%C3%9F)">Potpourri</a> an aktuellen Themen aus der Web-Standards-Welt zu sprechen. Und über Münchener Restaurants.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:20] <a href="https://css-tricks.com/almanac/properties/a/accent-color/"><code>accent-color</code></a></dt>
<dd>Mit <code>accent-color</code> könnt Ihr zukünftig bestimmen, in welcher Farbe farbliche Bestandteile von nativen Inputs dargestellt werden. Zu der Farbe optimal kontrastierende Icon- und Textfarben gibt es kostenlos obendrauf. <a href="https://chromestatus.com/feature/4752739957473280">Kommt mit Chrome 93 und Firefox 92</a>.</dd>
<dt>[00:19:16] <a href="https://developer.chrome.com/blog/shared-element-transitions-for-spas/">Smooth and simple page transitions with the shared element transition API</a></dt>
<dd>Team Chromium testet die Praxistauglichkeit einer neuen Idee in Form eines Origin-Trials: die <a href="https://github.com/WICG/shared-element-transitions/">Shared Element Transitions API</a>. Die Idee ist grundsätzlich richtig cool, Frage ist, ob sie in der aktuell geplanten Umsetzungsform zukunftstauglich genug ist, oder ob wir &#8222;schlauere&#8220; technische Ansätze brauchen, wie man sie etwa in <a href="https://dev.to/buhrmi/svelte-component-transitions-5ie">Svelte</a> oder <a href="https://github.com/Rich-Harris/ramjet">Ramjet</a> findet. Schaut sie Euch an und gebt dem Team Feedback!</dd>
<dt>[00:30:55] <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1065085">Implement window.{alert, prompt, confirm} removal from cross-origin iframes</a></dt>
<dd>Team Chromium hat sich vor ein paar Wochen mit dem Release von Chrome 92 so richtig in die Nesseln gesetzt. Denn man hatte iframes dort um die Fähigkeit beschnitten, alerts, confirms oder prompts auszulösen. An sich löblich aus Sicherheitssicht. Weil man zuvor ein paar relevante Nutzungsszenarien übersehen hatte und diese doch recht drastische Änderung im Vorfeld nicht kommuniziert hatte, kam es wie es kommen musste: Reichlich Webentwickler*innen-Exkremente trafen die Windpaddel des großen Google-Bugtracker-Ventilators. Und so kam es, dass Google die Änderung nach anfänglicher Gegenwehr zurückgerollt und auf Anfang 2022 vertagt hat.</dd>
<dt>[00:37:00] <a href="https://how-i-experience-web-today.com/">How I experience the web today</a></dt>
<dd>Lustige Seite, die auf leicht übertriebene Art und Weise zeigt, wie kaputt das Web heutzutage ist.</dd>
<dt>[00:47:41] <a href="https://tailwindcss.com/">Nachteile von Tailwind CSS</a></dt>
<dd>Eeeendlich packt Vanessa mal mit Dingen aus, die ihr bei Tailwind auf die Füße gefallen sind <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f973.png" alt="🥳" class="wp-smiley" style="height: 1em; max-height: 1em;" /> Tatsächlich muss man aber sagen, wäre man auch mit BEM &#038; Co nicht viel besser aus der Nummer rausgekommen. Aber immer spannend, diese Berichte aus der Praxis!</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.stefanjudis.com/newsletter/">Stefan&#8217;s Web Weekly</a></dt>
<dd>Auf das Thema <code>accent-color</code> kamen wir aufgrund des wöchentlichen Newsletters von Stefan Judis, den Ihr vielleicht schon als Gast unseres Podcasts kennengelernt habt.</dd>
<dt><a href="https://restaurant-inszenario.de/">Restaurant Inszenario</a></dt>
<dd>Tolles Münchener Restaurant mit ziemlich langatmig ladenden Webseite.</dd>
<dt><a href="https://pagetransitions.netlify.app/">Page Transitions Travel App</a></dt>
<dd>Sarah Drasners Page Transitions Demo.</dd>
<dt><a href="https://auphonic.com/">Auphonic</a></dt>
<dd>Der von vermutlich allen Podcastern genutzte Audio-Verschönerungsdienst.</dd>
<dt><a href="https://unroll.me">Unroll.me</a></dt>
<dd>Ein leicht zu bedienender Newsletter-Abmelde-Service.</dd>
</dl>


Diesmal trafen sich Vanessa und Schepp, um über ein ganzes Potpourri an aktuellen Themen aus der Web-Standards-Welt zu sprechen. Und über Münchener Restaurants. Schaunotizen [00:01:20] accent-color Mit accent-color könnt Ihr zukünftig bestimmen, in welcher Farbe farbliche Bestandteile von nativen Inputs dargestellt werden. Zu der Farbe optimal kontrastierende Icon- und Textfarben gibt es kostenlos obendrauf. Kommt [&#8230;]

Diesmal trafen sich Vanessa und Schepp, um über ein ganzes Potpourri an aktuellen Themen aus der Web-Standards-Welt zu sprechen. Und über Münchener Restaurants.
Schaunotizen

[00:01:20] accent-color
Mit accent-color könnt Ihr zukünftig bestimmen, in[...]

Diesmal trafen sich Vanessa und Schepp, um über ein ganzes Potpourri an aktuellen Themen aus der Web-Standards-Welt zu sprechen. Und über Münchener Restaurants.
Schaunotizen

[00:01:20] accent-color
Mit accent-color könnt Ihr zukünftig bestimmen, in welcher Farbe farbliche Bestandteile von nativen Inputs dargestellt werden. Zu der Farbe optimal kontrastierende Icon- und Textfarben gibt es kostenlos obendrauf. Kommt mit Chrome 93 und Firefox 92.
[00:19:16] Smooth and simple page transitions with the shared element transition API
Team Chromium testet die Praxistauglichkeit einer neuen Idee in Form eines Origin-Trials: die Shared Element Transitions API. Die Idee ist grundsätzlich richtig cool, Frage ist, ob sie in der aktuell geplanten Umsetzungsform zukunftstauglich genug ist, oder ob wir „schlauere“ technische Ansätze brauchen, wie man sie etwa in Svelte oder Ramjet findet. Schaut sie Euch an und gebt dem Team Feedback!
[00:30:55] Implement window.{alert, prompt, confirm} removal from cross-origin iframes
Team Chromium hat sich vor ein paar Wochen mit dem Release von Chrome 92 so richtig in die Nesseln gesetzt. Denn man hatte iframes dort um die Fähigkeit beschnitten, alerts, confirms oder prompts auszulösen. An sich löblich aus Sicherheitssicht. Weil man zuvor ein paar relevante Nutzungsszenarien übersehen hatte und diese doch recht drastische Änderung im Vorfeld nicht kommuniziert hatte, kam es wie es kommen musste: Reichlich Webentwickler*innen-Exkremente trafen die Windpaddel des großen Google-Bugtracker-Ventilators. Und so kam es, dass Google die Änderung nach anfänglicher Gegenwehr zurückgerollt und auf Anfang 2022 vertagt hat.
[00:37:00] How I experience the web today
Lustige Seite, die auf leicht übertriebene Art und Weise zeigt, wie kaputt das Web heutzutage ist.
[00:47:41] Nachteile von Tailwind CSS
Eeeendlich packt Vanessa mal mit Dingen aus, die ihr bei Tailwind auf die Füße gefallen sind  Tatsächlich muss man aber sagen, wäre man auch mit BEM & Co nicht viel besser aus der Nummer rausgekommen. Aber immer spannend, diese Berichte aus der Praxis!

Keine Schaunotizen

Stefan’s Web Weekly
Auf das Thema accent-color kamen wir aufgrund des wöchentlichen Newsletters von Stefan Judis, den Ihr vielleicht schon als Gast unseres Podcasts kennengelernt habt.
Restaurant Inszenario
Tolles Münchener Restaurant mit ziemlich langatmig ladenden Webseite.
Page Transitions Travel App
Sarah Drasners Page Transitions Demo.
Auphonic
Der von vermutlich allen Podcastern genutzte Audio-Verschönerungsdienst.
Unroll.me
Ein leicht zu bedienender Newsletter-Abmelde-Service.

Revision 493: accent-color, page transitions, alert()-Gate & Tailwind

<p>Was gibt es eigentlich Neues bei <a href="https://webpack.js.org/blog/2020-10-10-webpack-5-release/">Webpack 5</a>? Das erzählt uns <a href="https://twitter.com/wsokra">Tobias Koppers (@wSokra)</a>, der Gründer von <a href="https://webpack.js.org/">Webpack</a>, und gibt uns Einblicke in seine Zukunftspläne.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] Der aktueller Status von Webpack</dt>
<dd>In <a href="https://workingdraft.de/289/">Revision 289: Tiefe Einblicke in die Webpack Entwicklung</a> aus dem Jahr 2017 sprachen wir bereits mit Tobias über Webpack. Gestartet als ein sog. <a href="https://www.ackee.de/blog/webpack-moderne-webentwicklung">Module Bundler</a>. Damals sprachen wir über Updates bzgl. Version 2. Seitdem hat sich einiges getan. Heutzutage bezeichnet Tobias Webpack als &#8222;Frontend Web App Optimizer&#8220;. Er vergleicht den heutigen Stand von Webpack mit ähnlichen Tools, den &#8222;Bundlern&#8220; <a href="https://rollupjs.org/guide/en/">Rollup</a> und <a href="https://parceljs.org/">Parcel</a> und den &#8222;No-Bundlern&#8220; <a href="https://www.snowpack.dev/">Snowpack</a> und <a href="https://vitejs.dev/">Vite</a>.</dd>
<dd>Im Anschluss besprechen Hans, Vanessa und Tobias die Neuerungen von Webpack 5, wie Persistent und Long Term Caching, Module Federation, HMR Verbesserungen, TypeScript Typings, WebAssembly Support, und noch viele mehr.</dd>
<dd>Ein endloser Support für Webpack 4 ist nicht geplant. Um nun all diese neuen Features nutzen zu können, heißt es also: migrieren! Wie Tobias im Podcast erzählt, ist die Anzahl der &#8222;Breaking Changes&#8220; gering.  Dank des <a href="https://webpack.js.org/migrate/5/">Migration Guides</a> sollte dies kein Problem sein.</dd>
</dl>


Was gibt es eigentlich Neues bei Webpack 5? Das erzählt uns Tobias Koppers (@wSokra), der Gründer von Webpack, und gibt uns Einblicke in seine Zukunftspläne. Schaunotizen [00:00:59] Der aktueller Status von Webpack In Revision 289: Tiefe Einblicke in die Webpack Entwicklung aus dem Jahr 2017 sprachen wir bereits mit Tobias über Webpack. Gestartet als ein [&#8230;]

Was gibt es eigentlich Neues bei Webpack 5? Das erzählt uns Tobias Koppers (@wSokra), der Gründer von Webpack, und gibt uns Einblicke in seine Zukunftspläne.
Schaunotizen

[00:00:59] Der aktueller Status von Webpack
In Revision 289: Tiefe Einblicke [...]

Was gibt es eigentlich Neues bei Webpack 5? Das erzählt uns Tobias Koppers (@wSokra), der Gründer von Webpack, und gibt uns Einblicke in seine Zukunftspläne.
Schaunotizen

[00:00:59] Der aktueller Status von Webpack
In Revision 289: Tiefe Einblicke in die Webpack Entwicklung aus dem Jahr 2017 sprachen wir bereits mit Tobias über Webpack. Gestartet als ein sog. Module Bundler. Damals sprachen wir über Updates bzgl. Version 2. Seitdem hat sich einiges getan. Heutzutage bezeichnet Tobias Webpack als „Frontend Web App Optimizer“. Er vergleicht den heutigen Stand von Webpack mit ähnlichen Tools, den „Bundlern“ Rollup und Parcel und den „No-Bundlern“ Snowpack und Vite.
Im Anschluss besprechen Hans, Vanessa und Tobias die Neuerungen von Webpack 5, wie Persistent und Long Term Caching, Module Federation, HMR Verbesserungen, TypeScript Typings, WebAssembly Support, und noch viele mehr.
Ein endloser Support für Webpack 4 ist nicht geplant. Um nun all diese neuen Features nutzen zu können, heißt es also: migrieren! Wie Tobias im Podcast erzählt, ist die Anzahl der „Breaking Changes“ gering.  Dank des Migration Guides sollte dies kein Problem sein.

Revision: 492 Der aktueller Status von Webpack

<p>Als wir vor fünf Wochen mit <a href="https://bkastl.de/">Bianca Kastl</a> (<a href="https://twitter.com/bkastl">@bkastl</a>) <a href="https://workingdraft.de/486/">unsere Folge zur Luca-App</a> aufgenommen haben, da haben wir ein Thema gestreift, dem wir eine eigene Folge widmen wollten, um es dort nochmal tiefergehender zu betrachten: Dezentrale Architekturen. Und genau das tun wir hiermit!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:01] <a href="https://de.wikipedia.org/wiki/Corona-Warn-App#/media/Datei:Architecture_Overview_Android_v1.svg">Dezentrale Architekturen</a></dt>
<dd>Wir beginnen zunächst mit einer Gegenüberstellung zentraler, dezentraler und hybrider Architekturen: Wie sie funktionieren, wo ihre Vorteile und Nachteile liegen. Anschließend reden wir über <a href="https://de.wikipedia.org/wiki/Thin_Client">Thin</a> und <a href="https://de.wikipedia.org/wiki/Fat_Client">Fat Clients</a>, die mal mehr und mal weniger &#8222;Denkprozess&#8220; und Verwaltung an die Gegenseite weg-delegieren. Wir sprechen bezogen auf Dezentralität auch kurz über die Vor- und Nachteile von Web-basierten Clients. Und schließlich betrachten wir ganz dediziert die Frage der Datensicherheit und Datenhoheit im Kontext der verschiedenen Architekturen. Bianca ist da nicht nur aufgrund ihrer (erfolgreichen) Versuche, <a href="https://bkastl.de/notes/luca-app-lucatrack-und-andere-gefahren">die Sicherheitskonzepte der Luca-App auszuhebeln</a>, sehr bewandert, denn sie ist als Beraterin oder Co-Entwicklerin in ähnlichen Projekten involviert: <a href="https://github.com/iris-connect/iris-client/blob/develop/infrastructure/deployment/docs/Architektur.md">IRIS connect</a> und <a href="https://github.com/InOG-projects/sofort-impfen/blob/main/protokoll.md">sofort-impfen.de</a></dd>
</dl>


Als wir vor fünf Wochen mit Bianca Kastl (@bkastl) unsere Folge zur Luca-App aufgenommen haben, da haben wir ein Thema gestreift, dem wir eine eigene Folge widmen wollten, um es dort nochmal tiefergehender zu betrachten: Dezentrale Architekturen. Und genau das tun wir hiermit! Schaunotizen [00:01:01] Dezentrale Architekturen Wir beginnen zunächst mit einer Gegenüberstellung zentraler, dezentraler [&#8230;]

Als wir vor fünf Wochen mit Bianca Kastl (@bkastl) unsere Folge zur Luca-App aufgenommen haben, da haben wir ein Thema gestreift, dem wir eine eigene Folge widmen wollten, um es dort nochmal tiefergehender zu betrachten: Dezentrale Architekturen. Un[...]

Als wir vor fünf Wochen mit Bianca Kastl (@bkastl) unsere Folge zur Luca-App aufgenommen haben, da haben wir ein Thema gestreift, dem wir eine eigene Folge widmen wollten, um es dort nochmal tiefergehender zu betrachten: Dezentrale Architekturen. Und genau das tun wir hiermit!
Schaunotizen

[00:01:01] Dezentrale Architekturen
Wir beginnen zunächst mit einer Gegenüberstellung zentraler, dezentraler und hybrider Architekturen: Wie sie funktionieren, wo ihre Vorteile und Nachteile liegen. Anschließend reden wir über Thin und Fat Clients, die mal mehr und mal weniger „Denkprozess“ und Verwaltung an die Gegenseite weg-delegieren. Wir sprechen bezogen auf Dezentralität auch kurz über die Vor- und Nachteile von Web-basierten Clients. Und schließlich betrachten wir ganz dediziert die Frage der Datensicherheit und Datenhoheit im Kontext der verschiedenen Architekturen. Bianca ist da nicht nur aufgrund ihrer (erfolgreichen) Versuche, die Sicherheitskonzepte der Luca-App auszuhebeln, sehr bewandert, denn sie ist als Beraterin oder Co-Entwicklerin in ähnlichen Projekten involviert: IRIS connect und sofort-impfen.de

Revision 491: Dezentrale Architekturen

<p>Diesmal geht es wieder rein in die moderne Welt der Frontend Entwicklung. Mit <a href="https://www.jonnitto.ch/">Jon Uhlmann</a>, <a href="https://www.neos.io/de">Neos</a>-Core Team Members, sprechen Hans und Vanessa über <a href="https://alpinejs.dev/">alpine.js</a> und <a href="https://github.com/vuejs/petite-vue">Petite Vue</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59]  AlpineJS &amp; Petite Vue</dt>
<dd>AlpineJS und Petite Vue sind beides ähnliche, sehr leichtgewichtige Frontend Frameworks. Um eine Vorstellung davon zu bekommen, bezeichnet Jon sie als das <a href="https://jquery.com/">jQuery</a> des modernern Webs oder <a href="https://tailwindcss.com/">TailwindCSS</a> des JavaScripts. Mögliche Use Cases sind Formvalidierung, Modals, Nachladen von Content, <a href="https://www.kunkalabs.com/mixitup/">MixItUp Filters</a> und mehr. Die Frameworks benötigen keinen <a href="https://t3n.de/news/eigentlich-virtuelles-dom-858160/">virtuellen DOM</a>. Dadurch sind die Pakete der Frameworks vergleichsweise klein. Petite Vue kommt mit 5kB. Dennoch steht Entwickler:innen die komplette <a href="https://v3.vuejs.org/guide/reactivity-fundamentals.html#reactivity-fundamentals">Reaktivität auf Basis von Vue.js</a> zur Verfügung, was den Kern beider Frameworks bildet. Auch globales State Management kann z.B. mit <a href="https://alpinejs.dev/globals/alpine-store">$store</a> betrieben werden. Wie so oft sind beide der Frameworks trotz ihrer geringen Größe daher auch für größere Projekte geeignet. Neben der kleinen Größe des Builds, was vor allem Vorteile für die User Experience bringt, nennt Jon die schnelle Lernkurve und das damit verbundene schnell erreichte Ziel auf Seiten der Developer Experience als Pluspunkt. Außerdem untersützen die Frameworks Entwickler:innen beim Thema Barrierefreiheit. Als einzigen Nachteil sieht er das fehlende Tree-Shaking. Unterscheiden kann man AlpineJS und Petite Vue aktuell quasi nur in der Größe der vorhandenen Features. Petite Vue ist 3 Jahre jünger als AlpineJS. Dadurch fehlen hier (noch) Features wie Transitions. Aber natürlich sind wir hier guter Dinge! Weitere gute Nachrichten sind, dass Testing wie gewohnt zum Beispiel mit Jest und Cypress, durchgeführt werden kann. Wir wünschen viel Spaß beim Ausprobieren der beiden verlinkten Codepens!</dd>
</dl>
<h3>Links</h3>
<ul>
<li><a href="https://codepen.io/jonnitto/pen/OJmEKpw">AlpineJS Todo MVC Codepen</a></li>
<li><a href="https://codepen.io/jonnitto/pen/dyWKQJG">Petite-Vue Todo MVC Codepen</a></li>
</ul>
<h3>Verwandte Revisionen</h3>
<ul>
<li><a href="https://workingdraft.de/441/">Neos CMS Revision 441</a></li>
<li><a href="https://workingdraft.de/474/">Barrierefreiheit in Single Page Applications Revision 474</a></li>
<li><a href="https://workingdraft.de/473/">Vue 3, taugts? Revision 473</a></li>
<li><a href="https://workingdraft.de/462/">Jest 27 Revision 462</a></li>
</ul>


Diesmal geht es wieder rein in die moderne Welt der Frontend Entwicklung. Mit Jon Uhlmann, Neos-Core Team Members, sprechen Hans und Vanessa über alpine.js und Petite Vue. Schaunotizen [00:00:59]  AlpineJS &#38; Petite Vue AlpineJS und Petite Vue sind beides ähnliche, sehr leichtgewichtige Frontend Frameworks. Um eine Vorstellung davon zu bekommen, bezeichnet Jon sie als das [&#8230;]

Diesmal geht es wieder rein in die moderne Welt der Frontend Entwicklung. Mit Jon Uhlmann, Neos-Core Team Members, sprechen Hans und Vanessa über alpine.js und Petite Vue.
Schaunotizen

[00:00:59]  AlpineJS & Petite Vue
AlpineJS und Petite Vue s[...]

Diesmal geht es wieder rein in die moderne Welt der Frontend Entwicklung. Mit Jon Uhlmann, Neos-Core Team Members, sprechen Hans und Vanessa über alpine.js und Petite Vue.
Schaunotizen

[00:00:59]  AlpineJS & Petite Vue
AlpineJS und Petite Vue sind beides ähnliche, sehr leichtgewichtige Frontend Frameworks. Um eine Vorstellung davon zu bekommen, bezeichnet Jon sie als das jQuery des modernern Webs oder TailwindCSS des JavaScripts. Mögliche Use Cases sind Formvalidierung, Modals, Nachladen von Content, MixItUp Filters und mehr. Die Frameworks benötigen keinen virtuellen DOM. Dadurch sind die Pakete der Frameworks vergleichsweise klein. Petite Vue kommt mit 5kB. Dennoch steht Entwickler:innen die komplette Reaktivität auf Basis von Vue.js zur Verfügung, was den Kern beider Frameworks bildet. Auch globales State Management kann z.B. mit $store betrieben werden. Wie so oft sind beide der Frameworks trotz ihrer geringen Größe daher auch für größere Projekte geeignet. Neben der kleinen Größe des Builds, was vor allem Vorteile für die User Experience bringt, nennt Jon die schnelle Lernkurve und das damit verbundene schnell erreichte Ziel auf Seiten der Developer Experience als Pluspunkt. Außerdem untersützen die Frameworks Entwickler:innen beim Thema Barrierefreiheit. Als einzigen Nachteil sieht er das fehlende Tree-Shaking. Unterscheiden kann man AlpineJS und Petite Vue aktuell quasi nur in der Größe der vorhandenen Features. Petite Vue ist 3 Jahre jünger als AlpineJS. Dadurch fehlen hier (noch) Features wie Transitions. Aber natürlich sind wir hier guter Dinge! Weitere gute Nachrichten sind, dass Testing wie gewohnt zum Beispiel mit Jest und Cypress, durchgeführt werden kann. Wir wünschen viel Spaß beim Ausprobieren der beiden verlinkten Codepens!

Links

AlpineJS Todo MVC Codepen
Petite-Vue Todo MVC Codepen

Verwandte Revisionen

Neos CMS Revision 441
Barrierefreiheit in Single Page Applications Revision 474
Vue 3, taugts? Revision 473
Jest 27 Revision 462

Revision 490: Alpine JS & Petit Vue mit Jon Uhlmann

<p>Vanessa und Peter hatten zwei Open-Source-Schwergewichte zu Gast, mit denen sie über das (Über)-Leben als OSS-Entwickler plauderten. <strong>Martin Donath</strong> (<a href="https://twitter.com/squidfunk">Twitter</a>, <a href="https://github.com/squidfunk">Github</a>) war zuletzt in <a href="https://workingdraft.de/484/">Revision 484</a> zu CSS und <a href="https://stylezen.io/">stylezen</a> zu Gast und entwickelt <a href="https://squidfunk.github.io/mkdocs-material/">Material for MkDocs</a>. <strong>Marvin Hagemeister</strong> (<a href="https://marvinh.dev/">Webseite</a>, <a href="https://twitter.com/marvinhagemeist">Twitter</a>, <a href="https://github.com/marvinhagemeister">Github</a>) ist für seine Arbeit an <a href="https://preactjs.com/">Preact</a> bekannt und war genau zu diesem Thema zuletzt in <a href="https://workingdraft.de/397/">Revision 397</a> zu Gast.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] (Über)-Leben mit Open Source</dt>
<dd>Nachdem wir kurz <a href="https://de.wikipedia.org/wiki/Open_Source">OSS</a> und <a href="https://de.wikipedia.org/wiki/Freie_Software">FOSS</a> gegeneinander abgrenzen, geht&#8217;s um den OSS-Alltag. Zunächst geht&#8217;s um Projekt-Management: wie werden Maintainance und Support geregelt, wie können Komplexität und Feature-Requests im Rahmen gehalten werden, wie fängt man überhaupt an (z.B. via <a href="https://www.frontendfoxes.org/">Frontend Foxes</a>) und wie sieht ein Open-Source-Projekt-Lifecycle aus? Wie besprechen im Anschlss Funding-Fragen (<a href="https://github.com/sponsors">Github Sponsors</a>, das <a href="https://github.com/sponsorware/docs">Sponsorware-Konzept</a>) und <a href="https://squidfunk.github.io/mkdocs-material/insiders/">wie das Funding bei MkDocs</a> und Preact genau abläuft, <a href="https://babeljs.io/blog/2021/05/10/funding-update">Funding-Fails bei Babel</a> sowie <a href="https://twitter.com/squidfunk/status/1259832077668810752">Martins Projekt-Umfrage für MkDocs</a>. Am Ende geht&#8217;s um Lizenzen, Amazon, Influx DB und Redis, ethische Lizenzklauseln und <a href="https://creativecommons.org/licenses/?lang=de">Creative Commons</a>.</dd>
</dl>


Vanessa und Peter hatten zwei Open-Source-Schwergewichte zu Gast, mit denen sie über das (Über)-Leben als OSS-Entwickler plauderten. Martin Donath (Twitter, Github) war zuletzt in Revision 484 zu CSS und stylezen zu Gast und entwickelt Material for MkDocs. Marvin Hagemeister (Webseite, Twitter, Github) ist für seine Arbeit an Preact bekannt und war genau zu diesem Thema [&#8230;]

Vanessa und Peter hatten zwei Open-Source-Schwergewichte zu Gast, mit denen sie über das (Über)-Leben als OSS-Entwickler plauderten. Martin Donath (Twitter, Github) war zuletzt in Revision 484 zu CSS und stylezen zu Gast und entwickelt Material for [...]

Vanessa und Peter hatten zwei Open-Source-Schwergewichte zu Gast, mit denen sie über das (Über)-Leben als OSS-Entwickler plauderten. Martin Donath (Twitter, Github) war zuletzt in Revision 484 zu CSS und stylezen zu Gast und entwickelt Material for MkDocs. Marvin Hagemeister (Webseite, Twitter, Github) ist für seine Arbeit an Preact bekannt und war genau zu diesem Thema zuletzt in Revision 397 zu Gast.
Schaunotizen

[00:01:00] (Über)-Leben mit Open Source
Nachdem wir kurz OSS und FOSS gegeneinander abgrenzen, geht’s um den OSS-Alltag. Zunächst geht’s um Projekt-Management: wie werden Maintainance und Support geregelt, wie können Komplexität und Feature-Requests im Rahmen gehalten werden, wie fängt man überhaupt an (z.B. via Frontend Foxes) und wie sieht ein Open-Source-Projekt-Lifecycle aus? Wie besprechen im Anschlss Funding-Fragen (Github Sponsors, das Sponsorware-Konzept) und wie das Funding bei MkDocs und Preact genau abläuft, Funding-Fails bei Babel sowie Martins Projekt-Umfrage für MkDocs. Am Ende geht’s um Lizenzen, Amazon, Influx DB und Redis, ethische Lizenzklauseln und Creative Commons.

Revision 489: (Über-)Leben mit Open Source, feat. Marvin Hagemeister und Martin Donath

<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;]

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

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 494: Serverless

Working Draft

Revision 493: accent-color, page transitions, alert()-Gate & Tailwind

Working Draft

Revision: 492 Der aktueller Status von Webpack

Working Draft

Revision 491: Dezentrale Architekturen

Working Draft

Revision 490: Alpine JS & Petit Vue mit Jon Uhlmann

Working Draft

Revision 489: (Über-)Leben mit Open Source, feat. Marvin Hagemeister und Martin Donath

Working Draft

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