Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/der-web-almanac-ist-sowas-von-2021/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
In unserer ersten Folge 2022 besprechen wir Interessantes aus dem Web Almanac 2021, also z.B. die beliebtesten JavaScript Frameworks und Libraries, wie es im Web mit Komprimierung ausschaut, die beliebtesten CSS-IDs, Klassennamen, Einheiten, Farbnotationen und vieles mehr! Zusätzlich werfen einen Blick auf den Accessibility-Zustand des Webs und erklären die CSS-Pseudoklasse :target. 
Vollangriff auf 2022! Jetzt!

Begrüßung – [00:00:55]



Retro



<ul>
<li>Constantin: Audio-Setup Störgeräusch beseitigt – [00:06:22]</li>



<li>Moritz: Developer Fatigue – [00:11:08]</li>



<li>Constantin: Halbleitermangel-Stilblüten: Druckerpatronenchips – [00:14:38]
<ul>
<li><a href="https://www.canon.de/support/business-product-support/interim-toner/" target="_blank" rel="noreferrer noopener">Canon Deutschland: Interim-Toner</a></li>



<li><a href="https://boingboing.net/2022/01/08/forced-by-shortages-to-sell-chipless-cartridges-canon-tells-customers-how-to-bypass-drm-warnings.html" target="_blank" rel="noreferrer noopener">&#8222;Forced by shortages to sell chipless ink cartridges, Canon tells customers how to bypass DRM warnings&#8220;</a></li>



<li><a href="https://www.superpatronen.de/" target="_blank" rel="noreferrer noopener">Superpatronen</a></li>
</ul>
</li>



<li>Moritz: <a href="https://open.spotify.com/show/54K1DpiQYHBHSnIO6OzSKs" target="_blank" rel="noreferrer noopener">WWSIV bei Spotify</a> – [00:20:56]</li>



<li>Moritz: #WWSIV hat 1000 Twitter-Follower <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f426.png" alt="🐦" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f389.png" alt="🎉" class="wp-smiley" style="height: 1em; max-height: 1em;" /> – [00:25:03]</li>
</ul>



Property der Woche: :target – [00:26:47]



<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:target" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_selectors_target" target="_blank" rel="noreferrer noopener">caniuse</a> </li>



<li><a href="https://codepen.io/gschier/full/HCoqh" target="_blank" rel="noreferrer noopener">Pure CSS Lightbox CodePen</a></li>



<li><a href="https://codepen.io/MoritzGiessmann/pen/mdBvyyb?editors=1100" target="_blank" rel="noreferrer noopener">Moritz’ :target-Demo CodePen</a></li>
</ul>



Tagesthema: <a href="https://almanac.httparchive.org/en/2021/" target="_blank" rel="noreferrer noopener">Web Almanac 2021</a> – [00:31:56]



<ol>
<li><a href="https://almanac.httparchive.org/en/2021/http" target="_blank" rel="noreferrer noopener">HTTP</a> – [00:35:55]
<ul>
<li><a href="https://caniuse.com/http3" target="_blank" rel="noreferrer noopener">caniuse HTTP/3</a></li>
</ul>
</li>



<li>Markup: <a href="https://almanac.httparchive.org/en/2021/markup#document-size" target="_blank" rel="noreferrer noopener">Dateigröße</a>, <a href="https://almanac.httparchive.org/en/2021/markup#doctypes" target="_blank" rel="noreferrer noopener">Doctype</a> – [00:42:16]</li>



<li><a href="https://almanac.httparchive.org/en/2021/javascript#libraries-usage" target="_blank" rel="noreferrer noopener">JavaScript Libraries</a> – [00:49:43]</li>



<li><a href="https://almanac.httparchive.org/en/2021/compression" target="_blank" rel="noreferrer noopener">Komprimierung</a> – [01:02:58]
<ul>
<li><a href="https://almanac.httparchive.org/en/2021/markup#compression" target="_blank" rel="noreferrer noopener">Markup-Komprimierung</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/javascript#compression" target="_blank" rel="noreferrer noopener">JS-Komprimierung</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/compression#trends-in-http-compression" target="_blank" rel="noreferrer noopener">Trends</a></li>
</ul>
</li>



<li>CSS – [01:13:07]
<ul>
<li> Highlight: <a href="https://almanac.httparchive.org/en/2021/css#fig-4" target="_blank" rel="noreferrer noopener">2368 CSS Files auf einer Seite</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-6" target="_blank" rel="noreferrer noopener">Beliebteste Klassennamen</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-7" target="_blank" rel="noreferrer noopener">Die beliebtesten IDs</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-14" target="_blank" rel="noreferrer noopener">Beliebteste CSS-Einheiten</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-15" target="_blank" rel="noreferrer noopener">CSS-Einheiten nach Properties</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-23" target="_blank" rel="noreferrer noopener">CSS-Farbnotationen</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-24" target="_blank" rel="noreferrer noopener">CSS-Farbnamen</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-28" target="_blank" rel="noreferrer noopener">6089 Bilder per CSS geladen</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-36" target="_blank" rel="noreferrer noopener">Flexbox und Grid</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-37" target="_blank" rel="noreferrer noopener">20% der Seiten nutzen Multicolumn Layout</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-39" target="_blank" rel="noreferrer noopener"><code>transition</code>-Werte</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-42" target="_blank" rel="noreferrer noopener">Beliebteste timing functions</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/css#fig-63" target="_blank" rel="noreferrer noopener">Nicht existierende Properties</a></li>
</ul>
</li>



<li>Accessibility – [01:43:25]
<ul>
<li><a href="https://almanac.httparchive.org/en/2021/accessibility#fig-2" target="_blank" rel="noreferrer noopener">Zoom ausgeschaltet</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/accessibility#language-identification" target="_blank" rel="noreferrer noopener">lang-Attribut</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/accessibility#fig-6" target="_blank" rel="noreferrer noopener">Focus overwrites: <code>outline: 0</code></a></li>



<li><a href="https://almanac.httparchive.org/en/2021/accessibility#fig-8" target="_blank" rel="noreferrer noopener">main, header, nav und footer</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/accessibility#fig-10" target="_blank" rel="noreferrer noopener">tabindex</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/accessibility#fig-11" target="_blank" rel="noreferrer noopener">korrekte Headline-Struktur</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/accessibility#fig-13" target="_blank" rel="noreferrer noopener">Captchas</a></li>



<li><a href="https://almanac.httparchive.org/en/2021/accessibility#fig-14" target="_blank" rel="noreferrer noopener">inaccessible form inputs</a></li>
</ul>
</li>
</ol>



GeilTeil – [02:10:07] 



<ul>
<li><a href="https://amzn.to/34SkzcV" target="_blank" rel="noreferrer noopener sponsored nofollow">Carolin Wiedemann: „Zart und frei: Vom Sturz des Patriarchats”</a> (Referral-Link!)</li>
</ul>



Das Ende – [02:19:58]

In unserer ersten Folge 2022 besprechen wir Interessantes aus dem Web Almanac 2021, also z.B. die beliebtesten JavaScript Frameworks und Libraries, wie es im Web mit Komprimierung ausschaut, die beliebtesten CSS-IDs, Klassennamen, Einheiten, Farbnotationen und vieles mehr! Zusätzlich werfen einen Blick auf den Accessibility-Zustand des Webs und erklären die CSS-Pseudoklasse :target.
Vollangriff auf 2022! Jetzt!

Wo wir sind ist vorne.

Wir besprechen den Web Almanac 2021. Die beliebtesten JavaScript Frameworks und Libraries, wie es im Web mit Komprimierung ausschaut, die beliebtesten CSS-IDs, Klassennamen, Einheiten, Farbnotationen und vieles mehr!

In unserer ersten Folge 2022 besprechen wir Interessantes aus dem Web Almanac 2021, also z.B. die beliebtesten JavaScript Frameworks und Libraries, wie es im Web mit Komprimierung ausschaut, die beliebtesten CSS-IDs, Klassennamen, Einheiten, Farbnotationen und vieles mehr! Zusätzlich werfen einen Blick auf den Accessibility-Zustand des Webs und erklären die CSS-Pseudoklasse :target.
Vollangriff auf 2022! Jetzt!

Der Web Almanac ist sowas von 2021

Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/geil-geiler-wo-wir-sind-ist-geilteil-das-ist-unsere-geilste-folge/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Spezialfolge: GeilTeile satt! Unsere GeilTeil-Liste war so lang, dass wir eine ganze Folge draus gemacht haben! Die letzte Folge des Jahres ist voller Tools, Tipps und Denkanstöße fürs neue Jahr. Zusätzlich sprechen wir noch darüber welche neuen Regeln ab Dezember 2021 für Internet- und Handyverträge gelten (Stichwort: Gesetz für „faire Verbraucherverträge“). 
Lasst euch verzaubern! &#x1f4ab;

Begrüßung – [00:00:52]



Retro



<ul>
<li>Constantin: Wieder am PC &#8211; aber Probleme gehen weiter – [00:05:26]</li>



<li>Moritz: Verbraucherschutzstärkung Internetgeschwindigkeit – [00:13:57]
<ul>
<li><a href="https://www.heise.de/news/Weniger-zahlen-fuer-zu-langsames-Internet-Gesetz-staerkt-Verbraucher-6279579.html" target="_blank" rel="noreferrer noopener">Heise: Weniger zahlen für zu langsames Internet? Gesetz stärkt Verbraucher</a></li>
</ul>
</li>



<li>Constantin: Verbraucherschutzstärkung Vertragsverlängerung – [00:20:18]</li>
</ul>



Tagesthema: GeilTeil-Spezial – [00:24:31]



<ul>
<li>Moritz: CSS is Awesome – [00:27:41]
<ul>
<li><a href="https://twitter.com/ppk/status/1140617885309644800" target="_blank" rel="noreferrer noopener">Tweet von @ppk</a></li>



<li><a href="https://twitter.com/MoritzGiessmann/status/1469266671156219906" target="_blank" rel="noreferrer noopener">Moritz’ Tweet mit Meme „Say the line, Senior Dev!“</a></li>
</ul>
</li>



<li>Constantin: <a href="https://www.browserstack.com/" target="_blank" rel="noreferrer noopener">BrowserStack</a> – [00:33:02]
<ul>
<li><a href="https://browsershots.org/" target="_blank" rel="noreferrer noopener">browsershots.org</a></li>



<li><a href="https://www.vanamco.com/" target="_blank" rel="noreferrer noopener">vanamco.com</a></li>
</ul>
</li>



<li>Moritz: Flexbox &#8211; visuelle Hilfen – [00:45:16]
<ul>
<li><a href="https://flexbox.malven.co/" target="_blank" rel="noreferrer noopener">flexbox.malven.co</a></li>
</ul>
</li>



<li>Constantin: <a href="https://polyfill.io" target="_blank" rel="noreferrer noopener">polyfill.io</a> – [00:47:01]
<ul>
<li><a href="https://modernizr.com/" target="_blank" rel="noreferrer noopener">modernizr</a></li>



<li><a href="https://github.com/SlexAxton/yepnope.js/" target="_blank" rel="noreferrer noopener">yepnope.js</a></li>
</ul>
</li>



<li>Moritz: <a href="https://compress-or-die.com/" target="_blank" rel="noreferrer noopener">compress or die</a> – [00:52:46]
<ul>
<li><a href="https://tinypng.com/" target="_blank" rel="noreferrer noopener">tinypng</a>/<a href="https://tinyjpg.com/" target="_blank" rel="noreferrer noopener">tinyjpg</a></li>



<li><a href="https://jakearchibald.github.io/svgomg/" target="_blank" rel="noreferrer noopener">svgomg</a></li>
</ul>
</li>



<li>Constantin: Einkäufe selbst Scannen und mobil bezahlen – [00:56:42]
<ul>
<li><a href="https://www.edeka.de/services/bonusprogramme/genuss-app/scan-go.jsp" target="_blank" rel="noreferrer noopener">Edeka Scan &amp; Go</a></li>



<li>Lieferdienst „<a href="https://gorillas.io/de" target="_blank" rel="noreferrer noopener">Gorillas</a>“</li>
</ul>
</li>



<li>Moritz: <a href="https://typefacts.com/" target="_blank" rel="noreferrer noopener">Typefacts.com</a> – []
<ul>
<li><a href="https://wowirsindistvorne.show/webtypografie-mit-gerrit-van-aaken/">Folge 14: Webtypografie mit Gerrit van Aaken</a></li>
</ul>
</li>



<li>Constantin: <a href="https://myclientwants.com/" target="_blank" rel="noreferrer noopener">myclientwants.com</a> – [01:10:40]</li>



<li>Moritz: <a href="https://coolors.co/" target="_blank" rel="noreferrer noopener">coolors.co</a> – [01:18:30]</li>



<li>Constantin: Microsoft PowerToys Color Picker – [01:23:02]
<ul>
<li>PowerToys: <a href="https://docs.microsoft.com/en-us/windows/powertoys/" target="_blank" rel="noreferrer noopener">Infos &amp; Dokumentation</a> / <a href="https://github.com/microsoft/PowerToys/releases/" target="_blank" rel="noreferrer noopener">Repo &amp; Download</a></li>
</ul>
</li>



<li>Moritz: <a href="https://coolbackgrounds.io/" target="_blank" rel="noreferrer noopener">coolbackgrounds.io</a> – [01:28:04]</li>



<li>Moritz: <a href="https://cssdb.org/" target="_blank" rel="noreferrer noopener">cssdb.org</a> – [01:32:43]</li>



<li>Moritz: Firefox DevTools &#8211; welcher Container scrollt? – [01:34:36]
<ul>
<li><a href="https://twitter.com/FirefoxDevTools/status/1281267511409864705" target="_blank" rel="noreferrer noopener">Tweet von Firefox DevTools</a></li>
</ul>
</li>



<li>Moritz: <a href="https://pavellaptev.github.io/web-dark-ages/" target="_blank" rel="noreferrer noopener">Dark ages of the Web</a> – [01:36:01]</li>



<li>Moritz: <a href="http://apps.workflower.fi/vocabs/css/en" target="_blank" rel="noreferrer noopener">CSS Vocabulary</a> – [01:39:24]</li>
</ul>



Das Ende: Verlosungsankündigung – [01:44:32]

Spezialfolge: GeilTeile satt! Unsere GeilTeil-Liste war so lang, dass wir eine ganze Folge draus gemacht haben! Die letzte Folge des Jahres ist voller Tools, Tipps und Denkanstöße fürs neue Jahr. Zusätzlich sprechen wir noch darüber welche neuen Regeln ab Dezember 2021 für Internet- und Handyverträge gelten (Stichwort: Gesetz für „faire Verbraucherverträge“).
Lasst euch verzaubern! 💫

GeilTeile satt! Unsere GeilTeilliste war so lang, dass wir eine ganze Folge draus gemacht haben! Die letzte Folge des Jahres ist voller Tools, Tipps und Denkanstöße fürs neue Jahr. Lasst euch verzaubern! &amp;#x1f4ab;

Spezialfolge: GeilTeile satt! Unsere GeilTeil-Liste war so lang, dass wir eine ganze Folge draus gemacht haben! Die letzte Folge des Jahres ist voller Tools, Tipps und Denkanstöße fürs neue Jahr. Zusätzlich sprechen wir noch darüber welche neuen Regeln ab Dezember 2021 für Internet- und Handyverträge gelten (Stichwort: Gesetz für „faire Verbraucherverträge“).
Lasst euch verzaubern! 💫

Geil, geiler, WO WIR SIND IST GEILTEIL: Das ist unsere geilste Folge!

Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/ux-engineering-barrierefreiheit-mit-dirk-ginader/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Wer füllt die Lücke zwischen UX-Designern und Software-Engineers? HTML lernen? Wozu? Warum Accessibility und wie? Unser Gast Dirk Ginader erklärt uns die Rolle von UX-Engineers bei Google, wie der Konzern Barrierefreiheit in seine Prozesse implementiert hat und was es neben Bällebädern, Sterneköchen und Massagen noch über die Arbeit beim Suchmaschinenriesen zu wissen gibt. Dazu reichen wir die CSS-Properties "widows" & "orphans" und bringen mit CSS-Art unsere Lüfter zum glühen. Eine vorweihnachtliche Folge zum Liebhaben. Hach!

Begrüßung – [00:00:53]



<ul>
<li><a href="https://twitter.com/ginader" target="_blank" rel="noreferrer noopener">@ginader bei Twitter</a></li>
</ul>



Retro



<ul>
<li>Constantin: Ganz viele <a href="https://de.wikipedia.org/wiki/Liste_von_Abk%C3%BCrzungen_(Netzjargon)#R" target="_blank" rel="noreferrer noopener">RTFM</a>-Momente – [00:05:42]</li>



<li>Moritz: Laissez-faire Leffe-bière – [00:08:13]</li>
</ul>



Property der Woche: widows &amp; orphans – [00:09:28]



<ul>
<li><a href="https://wowirsindistvorne.show/10-merkwuerdig-unbekannte-css-eigenschaften-und-zwei-frameworks/">Folge 32: 10 merkwürdig unbekannte CSS-Eigenschaften (und zwei Frameworks)</a></li>



<li><a href="https://de.wikipedia.org/wiki/Hurenkind_und_Schusterjunge" target="_blank" rel="noreferrer noopener">„Hurenkind und Schusterjunge“ auf Wikipedia</a></li>



<li>columns: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/columns" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_columns" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://css-tricks.com/guide-responsive-friendly-css-columns/" target="_blank" rel="noreferrer noopener">CSS Tricks</a></li>



<li><a href="https://www.smashingmagazine.com/2019/01/css-multiple-column-layout-multicol/" target="_blank" rel="noreferrer noopener">Smashing Magazine</a></li>



<li><a href="https://drafts.csswg.org/css-break/#widows-orphans" target="_blank" rel="noreferrer noopener">CSS Fragmentation Module Level 3 Draft</a></li>



<li><a href="https://codepen.io/Connum/pen/NWgJrZp" target="_blank" rel="noreferrer noopener">Constantins CodePen-Demo</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/widows" target="_blank" rel="noreferrer noopener">MDN widows</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/orphans" target="_blank" rel="noreferrer noopener">MDN orphans</a> / <a href="https://caniuse.com/css-widows-orphans" target="_blank" rel="noreferrer noopener">caniuse widows &amp; orphans</a></li>
</ul>



Entscheide Dich – [00:18:14]



Tagesthema: UX-Engineering &amp; Accessibility – [00:28:04]



<ol>
<li>Wie bist Du zu Google und zum UX Engineering gekommen? – [00:28:45]7
<ul>
<li><a href="http://dir.kg/uxe-erik" target="_blank" rel="noreferrer noopener">Erik Haddad: What Does a UX Engineer Do, Exactly? A Little Bit of Everything</a></li>
</ul>
</li>



<li>UX Engineering vs. Frontend Development – [00:37:46]
<ul>
<li><a href="http://dir.kg/why-uxes" target="_blank" rel="noreferrer noopener">Why Google Needs UXEs</a></li>



<li><a href="https://css-tricks.com/the-great-divide/" target="_blank" rel="noreferrer noopener">CSS Tricks: The Great Divide</a></li>
</ul>
</li>



<li>Woran arbeitest Du gerade? – [00:51:26]</li>



<li>Wie ist Accessibility bei Google organisiert? – [00:59:56]</li>



<li>Einfache Punkte, die jeder umsetzen kann (keine Ausreden mehr)? – [01:03:36]</li>



<li>A11Y Datenbasis und Testing-Tools bei Google – [01:12:33]
<ul>
<li><a href="https://tenon.io/" target="_blank" rel="noreferrer noopener">tenon.io</a></li>
</ul>
</li>



<li>Was unterscheidet die Arbeit bei Google von den anderen? – [01:21:40]</li>



<li>User Testing – [01:27:57]
<ul>
<li><a href="http://dir.kg/user-study" target="_blank" rel="noreferrer noopener">User Study: Devs watching QA test the product</a></li>
</ul>
</li>



<li>Welche Mythen und Fragen zu Google begegnen Dir ständig? – [01:34:07]</li>
</ol>



GeilTeil



<ul>
<li>Constantin: CSS Art auf die Spitze getrieben – [01:38:58]
<ul>
<li><a href="https://codepen.io/ivorjetski/pen/ZEyyzXm" target="_blank" rel="noreferrer noopener">CodePen von Ben Evans</a></li>
</ul>
</li>



<li>Dirk: <a href="http://dir.kg/htmlz" target="_blank" rel="noreferrer noopener">HTML ZED etsy store</a> – [01:44:08]</li>
</ul>



Das Ende – [01:45:04]



<ul>
<li><a href="https://wwsiv.de/merch" target="_blank" rel="noreferrer noopener">Kauft Merch!</a></li>
</ul>

Wer füllt die Lücke zwischen UX-Designern und Software-Engineers? HTML lernen? Wozu? Warum Accessibility und wie? Unser Gast Dirk Ginader erklärt uns die Rolle von UX-Engineers bei Google, wie der Konzern Barrierefreiheit in seine Prozesse implementiert hat und was es neben Bällebädern, Sterneköchen und Massagen noch über die Arbeit beim Suchmaschinenriesen zu wissen gibt. Dazu reichen wir die CSS-Properties "widows" & "orphans" und bringen mit CSS-Art unsere Lüfter zum glühen. Eine vorweihnachtliche Folge zum Liebhaben. Hach!

Wer füllt die Lücke zwischen UX-Designern und Software-Engineers? HTML lernen? Wozu? Warum Accessibility und wie? Wir sprechen mit Dirk Ginader über UX-Engineering und Barrierefreihei bei Google.

Wer füllt die Lücke zwischen UX-Designern und Software-Engineers? HTML lernen? Wozu? Warum Accessibility und wie? Unser Gast Dirk Ginader erklärt uns die Rolle von UX-Engineers bei Google, wie der Konzern Barrierefreiheit in seine Prozesse implementiert hat und was es neben Bällebädern, Sterneköchen und Massagen noch über die Arbeit beim Suchmaschinenriesen zu wissen gibt. Dazu reichen wir die CSS-Properties &quot;widows&quot; &amp; &quot;orphans&quot; und bringen mit CSS-Art unsere Lüfter zum glühen. Eine vorweihnachtliche Folge zum Liebhaben. Hach!

UX-Engineering & Barrierefreiheit mit Dirk Ginader

Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/web-performance-mit-christian-schepp-schaefer/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Schnell, schneller, performant! Zusammen mit Performance-Papst Christian "Schepp" Schaefer liefern wir einen der gewaltigsten Gesamtabrisse über Performance im Web: Von Time to First Byte (TTFB) und First Contentful Paint (FCP) über den Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Renderzeiten, flüssigen Animationen, Prefetching, HTTP-Headern und Caching bis hin zu Performance-Testing-Tools wurde wirklich nichts ausgelassen was man zu guter Web-Performance wissen muss. Nebenher besprechen wir CSS "input-security". Unsere bislang kompletteste Themensendung. Zack zack!

Begrüßung – [00:00:54]



<ul>
<li><a href="http://www.1000getraenke.de/biertest/stauder-bierchen,7251.html" target="_blank" rel="noreferrer noopener">Stauder &#8222;Bierchen&#8220; (aus Essen): &#8222;hopfig, fruchtig, ehrlich!&#8220;</a></li>
</ul>



 Retro – [00:05:35]



<ul>
<li>Constantin: Code Copy&amp;Paste mit verstecktem Schadcode
<ul>
<li><a href="https://dev.to/dotnetsafer/rip-copy-and-paste-from-stackoverflow-trojan-source-solution-4p8f" target="_blank" rel="noreferrer noopener">dev.to: RIP Copy and Paste from Stackoverflow! <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f6a8.png" alt="🚨" class="wp-smiley" style="height: 1em; max-height: 1em;" /> (+Trojan Source Solution)</a></li>



<li><a href="https://www.trojansource.codes/" target="_blank" rel="noreferrer noopener">Studie Uni Cambridge: trojansource.codes</a></li>



<li><a href="https://github.com/nickboucher/trojan-source" target="_blank" rel="noreferrer noopener">GitHub-Repo nickboucher</a>/<a href="https://github.com/nickboucher/trojan-source" target="_blank" rel="noreferrer noopener">trojan-source</a></li>



<li><a href="https://marketplace.visualstudio.com/items?itemName=nhoizey.gremlins" target="_blank" rel="noreferrer noopener">Gremlins tracker for Visual Studio Code</a></li>
</ul>
</li>



<li>Moritz: Free Accessibility Audits für NGOs? – [00:10:34]
<ul>
<li><a href="https://twitter.com/MoritzGiessmann/status/1459989912049041408?s=20" target="_blank" rel="noreferrer noopener">Tweet</a> </li>
</ul>
</li>



<li>Schepp: CSS @property Rule – [00:12:31]
<ul>
<li><a href="https://css-tricks.com/using-absolute-value-sign-rounding-and-modulo-in-css-today/" target="_blank" rel="noreferrer noopener">Ana Tudor &#8211; Using Absolute Value, Sign, Rounding and Modulo in CSS Today</a></li>



<li><a href="https://codepen.io/Schepp/pen/LYNZzWY" target="_blank" rel="noreferrer noopener">Animierte zoom-Eigenschaft (in Chrome) als Slide-open/close-Technik</a></li>



<li><a href="https://schepp.github.io/imagery-on-the-web/#/4/5" target="_blank" rel="noreferrer noopener">Animieren von verschiedenen anderen Dingen dank @property</a>&nbsp;+ (Navigation per Cursor hoch/runter)</li>
</ul>
</li>



<li>Constantin: Subgrid-Fortschritt in Chrome dank Microsoft – [00:18:33]
<ul>
<li><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=618969" target="_blank" rel="noreferrer noopener">Chromium Bugtracker Subgrid Support Ticket</a></li>
</ul>
</li>
</ul>



Property der Woche: input-security – [00:19:45]



<ul>
<li><a href="https://drafts.csswg.org/css-ui/#input-security" target="_blank" rel="noreferrer noopener">Draft</a></li>



<li><a href="https://css-tricks.com/the-options-for-password-revealing-inputs/" target="_blank" rel="noreferrer noopener">CSS Tricks: The Options for Password Revealing&nbsp;Inputs</a></li>
</ul>



Entscheide Dich – [00:23:34]



Tagesthema: Web Performance – [00:29:25] 



<ol>
<li>Vorstellung Schepp: DOM Treemap, Setup, Podcasting – [00:29:48]
<ul>
<li><a href="https://github.com/Schepp/dom-treemap-devtools-extension" target="_blank" rel="noreferrer noopener">DOM Treemap</a></li>



<li><a href="https://polypane.app/" target="_blank" rel="noreferrer noopener">Polypane Browser</a></li>
</ul>
</li>



<li>Time to First Byte (TTFB) – [01:02:54]
<ul>
<li><a href="https://web.dev/time-to-first-byte/" target="_blank" rel="noreferrer noopener">Server Antwortzeiten</a></li>



<li><a href="https://calendar.perfplanet.com/2009/progressive-rendering-via-multiple-flushes/" target="_blank" rel="noreferrer noopener">Early Flushing</a></li>



<li><a href="https://www.smashingmagazine.com/2018/10/performance-server-timing/" target="_blank" rel="noreferrer noopener">Server Timing Header</a></li>
</ul>
</li>



<li>First Contentful Paint (FCP) – [01:06:16]
<ul>
<li><a href="https://web.dev/fcp/" target="_blank" rel="noreferrer noopener">First Contentful Paint</a></li>



<li><a href="https://vimeo.com/646056322" target="_blank" rel="noreferrer noopener">Harry Roberts &#8211; Get Your “head” Straight</a>&nbsp;und&nbsp;<a href="https://css-tricks.com/newsletter/270-wheres-your-head-at/" target="_blank" rel="noreferrer noopener">ct.css</a></li>



<li><a href="https://www.filamentgroup.com/lab/load-css-simpler/" target="_blank" rel="noreferrer noopener">Filament Group Lazy CSS Trick</a></li>



<li>CSS dank&nbsp;<a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">Tailwind</a>&nbsp;klein halten </li>



<li><a href="https://www.fontsquirrel.com/" target="_blank" rel="noreferrer noopener">Schriften bei Font-Squirrel &#8222;subsetten&#8220;</a></li>



<li><a href="https://rwt.io/typography-tips/progressive-font-enrichment-reinventing-web-font-performance" target="_blank" rel="noreferrer noopener">Progressive Font Enrichment</a> / <a href="https://fonts.gstatic.com/experimental/incxfer_demo" target="_blank" rel="noreferrer noopener">Demo</a></li>



<li><a href="https://web.dev/preload-critical-assets/" target="_blank" rel="noreferrer noopener">Preloading von Fonts, sowie kritischem CSS &amp; JS</a></li>



<li><a href="https://web.dev/codelab-text-compression-brotli/" target="_blank" rel="noreferrer noopener">Kompression mit Brotli</a></li>



<li><a href="http://perfectionkills.com/experimenting-with-html-minifier" target="_blank" rel="noreferrer noopener">Experimenting with HTML minifier</a></li>



<li><a href="https://twitter.com/addyosmani/status/938078402430382080" target="_blank" rel="noreferrer noopener">Bilder mit decoding=&#8220;async&#8220;</a></li>
</ul>
</li>



<li>Largest Contentful Paint (LCP) – [01:40:14]
<ul>
<li><a href="https://web.dev/lcp/" target="_blank" rel="noreferrer noopener">Largest Contentful Paint</a></li>



<li><a href="https://www.stefanjudis.com/today-i-learned/how-to-preload-responsive-images-with-imagesizes-and-imagesrcset/" target="_blank" rel="noreferrer noopener">Preloading responsiver Bilder</a></li>



<li><a href="https://www.youtube.com/watch?v=F1kYBnY6mwg" target="_blank" rel="noreferrer noopener">Bildformate: AVIF, WebP oder JPEG</a></li>



<li><a href="https://web.dev/lcp-lazy-loading/" target="_blank" rel="noreferrer noopener">LCP-Bilder nicht mit loading=&#8220;lazy&#8220; ausstatten</a></li>



<li><a href="https://web.dev/priority-hints/" target="_blank" rel="noreferrer noopener">Priority Hints &amp; Origin Trials</a></li>



<li><a href="https://developers.google.com/web/updates/2019/02/priority-hints" target="_blank" rel="noreferrer noopener">importance-Attribut</a></li>
</ul>
</li>



<li>Time to Interactive (TTI), Total Blocking Time (TBT) &amp; First Input Delay (FID) – [01:49:54]
<ul>
<li><a href="https://web.dev/tti/" target="_blank" rel="noreferrer noopener">Time to Interactive</a></li>



<li><a href="https://web.dev/tbt/" target="_blank" rel="noreferrer noopener">Total Blocking Time</a></li>



<li><a href="https://web.dev/fid/" target="_blank" rel="noreferrer noopener">First Input Delay</a></li>



<li><a href="https://schepp.github.io/native-browser-apis/#/" target="_blank" rel="noreferrer noopener">JavaScript ersetzen durch native Browser-Funktionen</a></li>



<li><a href="https://calendar.perfplanet.com/2018/doing-differential-serving-in-2019/" target="_blank" rel="noreferrer noopener">JavaScript parallel als ES6 und ES5 per &#8222;Differential Loading&#8220; ausliefern</a></li>



<li><a href="https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/#deferred-functionality" target="_blank" rel="noreferrer noopener">Lazy Komponenten Initialisierung via Intersection Observer</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback" target="_blank" rel="noreferrer noopener">requestIdleCallback()</a></li>



<li><a href="https://engineering.fb.com/2019/04/22/developer-tools/isinputpending-api/" target="_blank" rel="noreferrer noopener">IsInputPending API</a></li>
</ul>
</li>



<li>Cumulative Layout Shift (CLS) – [01:56:37]
<ul>
<li><a href="https://web.dev/cls/" target="_blank" rel="noreferrer noopener">Cumulative Layout Shift</a></li>



<li><a href="https://twitter.com/bkastl/status/931077544484528128" target="_blank" rel="noreferrer noopener">SVG Platzhalter Technik für Bilder</a></li>



<li><a href="https://web.dev/optimize-cls/#modern-best-practice" target="_blank" rel="noreferrer noopener">CSS aspect-ratio-Eigenschaft</a></li>



<li><a href="https://schepp.dev/posts/ad-integration-in-2020/#bringing-stability-back-to-layout" target="_blank" rel="noreferrer noopener">Werbung per position: sticky in ggf. größerem Container platzieren</a></li>
</ul>
</li>



<li>Renderzeiten verringern – [02:06:59]
<ul>
<li><a href="https://github.com/Schepp/dom-treemap-devtools-extension" target="_blank" rel="noreferrer noopener">DOM Treemap</a></li>



<li><a href="https://web.dev/content-visibility/" target="_blank" rel="noreferrer noopener">content-visibility</a></li>



<li><a href="https://www.smashingmagazine.com/2019/12/browsers-containment-css-contain-property/" target="_blank" rel="noreferrer noopener">CSS Containment</a></li>
</ul>
</li>



<li>Flüssige Animationen – [02:12:04]
<ul>
<li><a href="https://www.youtube.com/watch?v=gTHAn-nkQnI" target="_blank" rel="noreferrer noopener">Ariya Hidayat &#8211; Fluid User Interface with Hardware Acceleration</a></li>



<li><a href="https://www.youtube.com/watch?v=8uAYE5G1gSs" target="_blank" rel="noreferrer noopener">Colt McAnlis &#8211; Web Page Design with the GPU in mind</a></li>



<li><a href="https://surma.dev/things/forcing-layers/" target="_blank" rel="noreferrer noopener">Layers and how to force them</a></li>
</ul>
</li>



<li>Vorarbeiten – [02:18:55]
<ul>
<li><a href="https://web.dev/link-prefetch/" target="_blank" rel="noreferrer noopener">Prefetch resources to speed up future navigations</a></li>



<li><a href="https://web.dev/speculative-prerendering/" target="_blank" rel="noreferrer noopener">Prerender</a></li>



<li><a href="https://github.com/GoogleChromeLabs/quicklink" target="_blank" rel="noreferrer noopener">quicklink.js &#8211; Preloading basierend auf Maus-Position und Sichtbarkeit im Viewport</a></li>



<li><a href="https://github.com/guess-js/guess" target="_blank" rel="noreferrer noopener">guess.js Speculative Prefetching/Preloading</a></li>



<li><a href="https://www.youtube.com/watch?v=Faaf5tzqvZg" target="_blank" rel="noreferrer noopener">Divya Sasidharan &#8211; Predictive Prefetching</a></li>



<li><a href="https://instant.page/" target="_blank" rel="noreferrer noopener">instant.page</a></li>



<li><a href="https://github.com/turbolinks/turbolinks" target="_blank" rel="noreferrer noopener">turbolinks</a></li>



<li><a href="https://wpspeedmatters.com/quicklink-vs-instant-page-vs-flying-pages/" target="_blank" rel="noreferrer noopener">quicklink vs. instant.page vs. flying pages</a></li>



<li><a href="https://github.com/MoOx/pjax" target="_blank" rel="noreferrer noopener">pjax</a></li>
</ul>
</li>



<li>HTTP/1.1/2/3 &amp; Caching – [02:30:17]
<ul>
<li><a href="https://schepp.github.io/HTTP-2/#/" target="_blank" rel="noreferrer noopener">HTTP Geschichte von Version 0.9 bis zur Version 2</a></li>



<li><a href="https://blog.cloudflare.com/http3-the-past-present-and-future/" target="_blank" rel="noreferrer noopener">HTTP/3: the past, the present, and the future</a></li>



<li><a href="https://csswizardry.com/2019/03/cache-control-for-civilians/" target="_blank" rel="noreferrer noopener">Harry Roberts &#8211; Cache Control for Civilians</a></li>



<li><a href="https://de.wordpress.org/plugins/wp-super-cache/" target="_blank" rel="noreferrer noopener">WP Super Cache</a></li>
</ul>
</li>



<li>Responsiv auf die Datenrate reagieren – [2:45:58]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data" target="_blank" rel="noreferrer noopener">prefers-reduced-data CSS media feature</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API" target="_blank" rel="noreferrer noopener">Network Information API</a></li>



<li><a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints#network_hints" target="_blank" rel="noreferrer noopener">Network Information in &#8222;Client Hints&#8220;-HTTP-Headern</a></li>



<li><a href="https://schepp.dev/posts/ad-integration-in-2020/#politely-bowing-out-when-the-user's-connection-is-constrained" target="_blank" rel="noreferrer noopener">Bei niedrigem Durchsatz Werbung abschalten</a></li>



<li><a href="https://docs.google.com/document/d/1RDA23zSNdDuIcxZTX9Xo3zlD2fxf8dZg9-e0YaJQv0g/edit#" target="_blank" rel="noreferrer noopener">Network Information API v2: Rebooting the Network Information API</a></li>
</ul>
</li>



<li>Tools &amp; Services – [02:51:23]
<ul>
<li>prefers-reduced-date: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-data" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_at-rules_media_prefers-reduced-data" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://webpagetest.org/" target="_blank" rel="noreferrer noopener">Webpagetest</a></li>



<li><a href="https://nooshu.com/blog/2019/10/02/how-to-read-a-wpt-waterfall-chart/" target="_blank" rel="noreferrer noopener">How to read a WebPageTest Waterfall View chart</a></li>



<li><a href="https://www.speedcurve.com/" target="_blank" rel="noreferrer noopener">Speedcurve</a></li>



<li><a href="https://calibreapp.com/" target="_blank" rel="noreferrer noopener">Calibre</a></li>



<li><a href="https://treo.sh/" target="_blank" rel="noreferrer noopener">Treo</a></li>



<li><a href="https://developers.google.com/web/tools/chrome-user-experience-report/" target="_blank" rel="noreferrer noopener">CrUX &#8211; Chrome UX Report</a></li>



<li><a href="https://web.dev/chrome-ux-report-bigquery/" target="_blank" rel="noreferrer noopener">Using the Chrome UX Report on BigQuery</a></li>
</ul>
</li>
</ol>



GeilTeil – [03:16:29]



<ul>
<li>Schepp:
<ul>
<li><a href="https://www.nvidia.com/de-de/geforce-now/" target="_blank" rel="noreferrer noopener">NVIDIA GeForce Now</a></li>



<li><a href="https://www.xbox.com/de-DE/xbox-game-pass" target="_blank" rel="noreferrer noopener">XBOX Game Pass (Ultimate)</a></li>
</ul>
</li>



<li>Moritz: Vorträge von der Beyond Tellerrand kostenlos ansehen – [03:25:00]
<ul>
<li><a href="https://vimeo.com/showcase/9016378" target="_blank" rel="noreferrer noopener">beyond tellerrand &#8211; DÜSSELDORF 2021</a></li>
</ul>
</li>
</ul>



Das Ende – [03:26:51]

Schnell, schneller, performant! Zusammen mit Performance-Papst Christian "Schepp" Schaefer liefern wir einen der gewaltigsten Gesamtabrisse über Performance im Web: Von Time to First Byte (TTFB) und First Contentful Paint (FCP) über den Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Renderzeiten, flüssigen Animationen, Prefetching, HTTP-Headern und Caching bis hin zu Performance-Testing-Tools wurde wirklich nichts ausgelassen was man zu guter Web-Performance wissen muss. Nebenher besprechen wir CSS "input-security". Unsere bislang kompletteste Themensendung. Zack zack!

Schnell, schneller, performant! Zusammen mit Performance-Papst Christian &quot;Schepp&quot; Schaefer liefern wir einen der gewaltigsten Gesamtabrisse über Performance im Web. Alles über Performance in einer Folge! Unser bislang kompletteste Themensendung. Zack zack!

Schnell, schneller, performant! Zusammen mit Performance-Papst Christian &quot;Schepp&quot; Schaefer liefern wir einen der gewaltigsten Gesamtabrisse über Performance im Web: Von Time to First Byte (TTFB) und First Contentful Paint (FCP) über den Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Renderzeiten, flüssigen Animationen, Prefetching, HTTP-Headern und Caching bis hin zu Performance-Testing-Tools wurde wirklich nichts ausgelassen was man zu guter Web-Performance wissen muss. Nebenher besprechen wir CSS &quot;input-security&quot;. Unsere bislang kompletteste Themensendung. Zack zack!

Web Performance mit Christian "Schepp" Schaefer

Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/10-merkwuerdig-unbekannte-css-eigenschaften-und-zwei-frameworks/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Es war wieder "State of CSS"-Time! Kennst du schon "break-before", "mix-blend-mode", "@scroll-timeline" und weißt wie Container Queries funktionieren? Wie steht’s mit "color-gamut", "perspective" oder Intrinsic Sizing mit z.B. "fit-content"? In dieser Folge besprechen wir wieder die Eigenschaften, die uns aus der Umfrage noch unbekannt waren, unseren Geburtstagsstream und rätseln über die Zukunft der Entwicklung mit GitHub Copilot. Wer die "17 CSS-Eigenschaften, die wir noch nicht kannten" mochte, wird diese Folge LIEBEN! &#x2764;&#xfe0f;

Begrüßung – [00:00:53]



Retro



<ul>
<li>Constantin: WWSIV-Geburtstagsglitzer – [00:04:03]
<ul>
<li>&#8222;Geburtstagsstream! 2 Jahre #WWSIV!&#8220; auf YouTube: <a href="https://youtu.be/AmuORtMgTtc" target="_blank" rel="noreferrer noopener">Teil 1</a>, <a href="https://youtu.be/NKCUw-E4_v0" target="_blank" rel="noreferrer noopener">Teil 2</a></li>
</ul>
</li>



<li>Moritz: WWSIV ist immer und überall – [00:06:48]</li>
</ul>



Tagesthema: Noch mehr unbekannte CSS-Eigenschaften – [00:12:47] 



<ol>
<li>Break rules in pages, regions und multicolumn – [00:14:48]
<ul>
<li>break-before: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-before" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=break-before" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>break-inside: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=break-inside" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>break-after: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-after" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=break-after" target="_blank" rel="noreferrer noopener">caniuse</a> / <a href="https://www.w3.org/Talks/2012/0913-CSS-Amsterdam/demo-multicol/break-after.pdf" target="_blank" rel="noreferrer noopener">Demo-PDF</a> / <a href="https://codepen.io/MoritzGiessmann/pen/vYJJdoR" target="_blank" rel="noreferrer noopener">CodePen-Demo</a></li>
</ul>
</li>



<li>Container Queries – [00:21:06]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-container-queries" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident" target="_blank" rel="noreferrer noopener">&lt;custom-ident&gt;</a></li>



<li>CodePen: <a href="https://codepen.io/collection/XQrgJo" target="_blank" rel="noreferrer noopener">Demo-Collection</a> / <a href="https://codepen.io/rachelandrew/pen/NWdaxde" target="_blank" rel="noreferrer noopener">Demo 1</a> / <a href="https://codepen.io/jh3y/pen/poeyxba" target="_blank" rel="noreferrer noopener">Demo 2</a> (nur in Chromium-Browsern mit gesetztem Flag!)</li>



<li><a href="https://wowirsindistvorne.show/jaeger-der-verlorenen-css-features-kapitel-ii/">Folge 11: Jäger der verlorenen CSS-Features – Kapitel II</a></li>



<li><a href="https://wowirsindistvorne.show/til-ttl-tagged-template-literals/">Folge 17: TIL: TTL (Tagged Template Literals)</a></li>
</ul>
</li>



<li>mix-blend-mode – [00:31:14]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_mix-blend-mode" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>background-blend-mode: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=background-blend-mode" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>
</li>



<li>color-gamut – [00:36:37]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-gamut" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_at-rules_media_color-gamut" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://wowirsindistvorne.show/7-technik-offenbarungen-im-wandel-der-zeit/">Folge 21: 7 Technik-Offenbarungen im Wandel der Zeit</a></li>
</ul>
</li>



<li>perspective – [00:39:32]
<ul>
<li><a href="https://css-tricks.com/how-css-perspective-works/" target="_blank" rel="noreferrer noopener">CSS Tricks</a></li>
</ul>
</li>



<li>Intrinsic Sizing: min-content, max-content, fit-content – [00:46:35]
<ul>
<li>Intrinsic &amp; Extrinsic Sizing: <a href="https://caniuse.com/intrinsic-width" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>block-size: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/block-size" target="_blank" rel="noreferrer noopener">MDN</a></li>



<li>writing-mode: <a href="https://wowirsindistvorne.show/17-css-eigenschaften-die-wir-noch-nicht-kannten/">Folge 28: 17 CSS-Eigenschaften, die wir noch nicht kannten</a></li>



<li>min-content: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-content" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=min-content" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>max-content: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-content" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=max-content" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>fit-content: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=fit-content" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>fint-content(): <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content()" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=fit-content()" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>
</li>



<li>color() – [00:51:22]
<ul>
<li><a href="https://drafts.csswg.org/css-color/#color-function" target="_blank" rel="noreferrer noopener">Draft</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color()" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-color-function" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>
</li>



<li>@scroll-timeline – [00:56:55]
<ul>
<li><a href="https://caniuse.com/css-scroll-timeline">caniuse</a></li>



<li><a href="https://wowirsindistvorne.show/jaeger-der-verlorenen-css-features-kapitel-ii/">Folge 11: Jäger der verlorenen CSS-Features – Kapitel II</a></li>



<li><a href="https://greensock.com/gsap/" target="_blank" rel="noreferrer noopener">GSAP</a> mit <a href="https://greensock.com/scrolltrigger/" target="_blank" rel="noreferrer noopener">ScrollTrigger plugin</a></li>



<li><a href="https://css-tricks.com/practical-use-cases-for-scroll-linked-animations-in-css-with-scroll-timelines/" target="_blank" rel="noreferrer noopener">Use-cases bei CSS-Tricks</a></li>



<li>The Future of CSS: Scroll-Linked Animations with <code>@scroll-timeline</code>: <a href="https://www.bram.us/2021/02/23/the-future-of-css-scroll-linked-animations-part-1/" target="_blank" rel="noreferrer noopener">Part 1</a> / <a href="https://www.bram.us/2021/03/04/the-future-of-css-scroll-linked-animations-part-2/" target="_blank" rel="noreferrer noopener">Part 2</a></li>



<li><a href="https://codepen.io/argyleink/pen/bGexogN" target="_blank" rel="noreferrer noopener">CodePen-Demo</a> (nur mit experimental web platform features flag)</li>
</ul>
</li>



<li>color-scheme – [01:02:05]
<ul>
<li><a href="https://www.w3.org/TR/css-color-adjust-1/#color-scheme-prop" target="_blank" rel="noreferrer noopener">Draft</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_color-scheme" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>prefers-color-scheme: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=prefers-color-scheme" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>
</li>



<li><a href="https://asmcss.com/" target="_blank" rel="noreferrer noopener">Assembler CSS</a>, <a href="https://ant.design/" target="_blank" rel="noreferrer noopener">Ant Design</a> – [01:06:16]</li>



<li>Houdini @property – [01:21:54]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@property" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=%40property" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>
</li>



<li>CSS Masks, CSS Shapes (Folgen 11 und 21) – [01:24:24]
<ul>
<li>mask-image: <a href="https://wowirsindistvorne.show/jaeger-der-verlorenen-css-features-kapitel-ii/">Folge 11: Jäger der verlorenen CSS-Features – Kapitel II</a></li>



<li>CSS Shapes: <a href="https://wowirsindistvorne.show/7-technik-offenbarungen-im-wandel-der-zeit/">Folge 21: 7 Technik-Offenbarungen im Wandel der Zeit</a></li>
</ul>
</li>
</ol>



GeilTeil – [01:26:00]



Verabschiedung – [01:36:24]

Es war wieder "State of CSS"-Time! Kennst du schon "break-before", "mix-blend-mode", "@scroll-timeline" und weißt wie Container Queries funktionieren? Wie steht’s mit "color-gamut", "perspective" oder Intrinsic Sizing mit z.B. "fit-content"? In dieser Folge besprechen wir wieder die Eigenschaften, die uns aus der Umfrage noch unbekannt waren, unseren Geburtstagsstream und rätseln über die Zukunft der Entwicklung mit GitHub Copilot. Wer die "17 CSS-Eigenschaften, die wir noch nicht kannten" mochte, wird diese Folge LIEBEN! ❤️

Kennst du schon &quot;break-before&quot;, &quot;mix-blend-mode&quot;, &quot;@scroll-timeline&quot; und weißt wie Container Queries funktionieren? In dieser Folge besprechen wir wieder die Eigenschaften, die uns aus der Umfrage noch unbekannt waren. Und Bier, Bier gab es auch.

Es war wieder &quot;State of CSS&quot;-Time! Kennst du schon &quot;break-before&quot;, &quot;mix-blend-mode&quot;, &quot;@scroll-timeline&quot; und weißt wie Container Queries funktionieren? Wie steht’s mit &quot;color-gamut&quot;, &quot;perspective&quot; oder Intrinsic Sizing mit z.B. &quot;fit-content&quot;? In dieser Folge besprechen wir wieder die Eigenschaften, die uns aus der Umfrage noch unbekannt waren, unseren Geburtstagsstream und rätseln über die Zukunft der Entwicklung mit GitHub Copilot. Wer die &quot;17 CSS-Eigenschaften, die wir noch nicht kannten&quot; mochte, wird diese Folge LIEBEN! ❤️

10 merkwürdig unbekannte CSS-Eigenschaften (und zwei Frameworks)

Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/html-sanitizer-api-mit-frederik-braun/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Strings bereinigen mit Web-Standards! Was klingt wie ein Arbeitsauftrag der Wäscherei vom Puff nebenan, könnte bald Einzug in die Browserwelt halten: die HTML Sanitizer API! Sie tritt an um HTML Strings, die mit JavaScript gebaut werden, endlich sicher, und Libraries wie DOMPurify überflüssig zu machen. String rein, sicheres HTML raus. Wie, was, wo und warum erklärt uns Frederik Braun, Staff Security Engineer bei Mozilla und Mitverfasser des W3C Standard-Drafts. Dazu berichten wir noch vom Twitch Leak, und Constantin erklärt und die CSS-Eigenschaft "offset". Eine Runde Sache (die ins Eck musste, oder so).

Begrüßung – [00:00:53]



Retro



<ul>
<li>Moritz: Let’s Encrypt Stammzertifikat abgelaufen – [00:02:42]</li>



<li>Constantin: WWSIV beim &#8222;IONOS Tech Up!&#8220; – [00:05:11]
<ul>
<li><a href="https://techup.ionos.de/pages/mediathek/" target="_blank" rel="noreferrer noopener">IONOS Mediathek</a></li>



<li><a href="https://wowirsindistvorne.show/17-css-eigenschaften-die-wir-noch-nicht-kannten/">Folge 28: 17 CSS-Eigenschaften, die wir noch nicht kannten</a></li>
</ul>
</li>



<li>Moritz: Was ist eine Podcast-Folge wert? – [00:06:15]
<ul>
<li><a href="https://www1.wdr.de/mediathek/audio/zeitzeichen/index.html" target="_blank" rel="noreferrer noopener">WDR ZeitZeichen</a></li>
</ul>
</li>



<li>Constantin: Internet-Ausdrucker – [00:09:07]</li>



<li>Moritz: Twitch-Leak – [00:12:42]</li>
</ul>



Property der Woche: CSS offset(-path) – [00:16:59]



<ul>
<li><a href="https://cssbattle.dev" target="_blank" rel="noreferrer noopener">CSSBattle.dev</a> =&gt; <a href="https://cssbattle.dev/player/p92JNyzKK4Q8Dovv0rZe13ao9ao1" target="_blank" rel="noreferrer noopener">Constantin battlen</a></li>



<li>offset: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/offset" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_offset" target="_blank" rel="noreferrer noopener">caniuse</a> / <a href="https://www.w3.org/TR/motion-1/" target="_blank" rel="noreferrer noopener">Draft</a></li>



<li>offset-anchor: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/offset-anchor" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_offset" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>offset-distance: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/offset-distance" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_offset-distance" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>offset-path: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/offset-path" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-motion-paths" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>offset-position: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/offset-position" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_offset-position" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>offset-rotate: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/offset-rotate" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_offset-rotate" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>



Vorstellung Frederik – [00:22:26] 



Entscheide Dich! – [00:23:19]



<ul>
<li><a href="https://www.zeit.de/serie/alles-gesagt?utm_referrer=https%3A%2F%2Fwowirsindistvorne.show%2F" target="_blank" rel="noreferrer noopener nofollow">ZEIT ONLINE Podcast &#8222;Alles gesagt?&#8220;</a></li>
</ul>



Kurzer Ausschweif zu mobilen OS und FirefoxOS – [00:26:57]



<ul>
<li><a href="https://wowirsindistvorne.show/vscode-edge-dev-tools-mit-chris-heilmann/">Folge 27: VSCode &amp; Edge Dev Tools mit Chris Heilmann</a></li>
</ul>



Tagesthema: HTML Sanitizer API – [00:31:34] 



<ul>
<li><a href="https://wicg.github.io/sanitizer-api/" target="_blank" rel="noreferrer noopener">Draft</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=sanitizer%20api" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://wowirsindistvorne.show/til-ttl-tagged-template-literals/">Folge 17: TIL: TTL (Tagged Template Literals)</a></li>
</ul>



<ol>
<li>Wie ist es zur Entwicklung dieses Standards gekommen (XSS) – [00:33:26]
<ul>
<li><a href="https://owasp.org/www-community/attacks/xss/" target="_blank" rel="noreferrer noopener">OWASP: Cross Site Scripting (XSS)</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy" target="_blank" rel="noreferrer noopener">MDN: Same-origin policy</a></li>



<li><a href="https://github.com/cure53/DOMPurify" target="_blank" rel="noreferrer noopener">DOMPurify</a></li>
</ul>
</li>



<li>innerHTML vs DOM-Methoden – [00:52:04]
<ul>
<li><a href="https://github.com/freddyb/html2dom" target="_blank" rel="noreferrer noopener">html2dom</a></li>



<li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template" target="_blank" rel="noreferrer noopener">&lt;template&gt;</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot" target="_blank" rel="noreferrer noopener">&lt;slot&gt;</a></li>



<li><a href="https://heideri.ch/" target="_blank" rel="noreferrer noopener">Mario Heiderich</a></li>



<li><a href="https://en.wikipedia.org/wiki/Anne_van_Kesteren" target="_blank" rel="noreferrer noopener">Anne van Kesteren</a></li>
</ul>
</li>



<li>Wie soll die API funktionieren? – [00:56:41]
<ul>
<li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Sanitizer/Sanitizer" target="_blank" rel="noreferrer noopener">Sanitizer()</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/API/Sanitizer/sanitize" target="_blank" rel="noreferrer noopener">Sanitizer.sanitize()</a> </li>



<li><a href="https://research.securitum.com/dompurify-bypass-using-mxss/" target="_blank" rel="noreferrer noopener">Michał Bentkowski: Write-up of DOMPurify 2.0.0 bypass using mutation XSS</a></li>



<li><a href="https://research.securitum.com/mutation-xss-via-mathml-mutation-dompurify-2-0-17-bypass/" target="_blank" rel="noreferrer noopener">Michał Bentkowski: Mutation XSS via namespace confusion – DOMPurify &lt; 2.0.17 bypass</a></li>
</ul>
</li>



<li>Wie kann man Ideen und Feedback einbringen? – [01:17:10]
<ul>
<li><a href="https://www.mozilla.org/en-US/firefox/developer/" target="_blank" rel="noreferrer noopener">Firefox Developer Edition</a></li>



<li><a href="https://sanitizer-api.dev/" target="_blank" rel="noreferrer noopener">HTML Sanitizer API Playground</a></li>



<li><a href="https://web.dev/sanitizer/" target="_blank" rel="noreferrer noopener">Safe DOM manipulation with the Sanitizer API</a></li>



<li><a href="https://github.com/WICG/sanitizer-api" target="_blank" rel="noreferrer noopener">GitHub repository</a></li>
</ul>
</li>



<li>Wann ist mit der Implementierung der API zu rechnen? – [01:25:38]
<ul>
<li><a href="http://cure53.prompt.ml/567f25ab1/0" target="_blank" rel="noreferrer noopener">prompt(1) to win</a></li>



<li><a href="https://alf.nu/alert1" target="_blank" rel="noreferrer noopener">alert(1) to win</a></li>
</ul>
</li>



<li>Bedingungen für XSS-Sicherheit mit den Default Options – [01:29:04]
<ul>
<li><a href="https://twitter.com/freddyb" target="_blank" rel="noreferrer noopener">Frederik Braun auf Twitter: @freddyb</a></li>
</ul>
</li>



<li>Wie läuft die Kommunikation untereinander? – [01:45:07]</li>



<li>Wie hoch sind die Hürden, an Standards mitzuarbeiten? – [01:49:02]</li>



<li>Wie läuft die Einigung ab? – [01:57:28]</li>
</ol>



Wie ist es, bei Mozilla zu arbeiten? – [02:03:14] 



<ul>
<li><a href="https://www.mozilla.org/de/about/manifesto/" target="_blank" rel="noreferrer noopener">Mozilla Manifest</a></li>



<li><a href="https://donate.mozilla.org/de/" target="_blank" rel="noreferrer noopener">Spenden an Mozilla</a></li>



<li><a href="https://foundation.mozilla.org/de/" target="_blank" rel="noreferrer noopener">Mozilla Foundation</a></li>
</ul>



GeilTeil



<ul>
<li>Moritz: <a href="https://how-i-experience-web-today.com/" target="_blank" rel="noreferrer noopener">how-i-experience-web-today.com</a> – [02:17:56]</li>



<li>Frederik: <a href="https://git-scm.com/docs/git-worktree" target="_blank" rel="noreferrer noopener">git worktree</a> – [02:20:35]
<ul>
<li><a href="https://wowirsindistvorne.show/oh-git-oh-gott-mit-michael-van-engelshoven/">Folge 25: Oh Git oh Gott! mit Michael van Engelshoven</a></li>
</ul>
</li>
</ul>



Verabschiedung und Schlusswort – [02:24:39]

Strings bereinigen mit Web-Standards! Was klingt wie ein Arbeitsauftrag der Wäscherei vom Puff nebenan, könnte bald Einzug in die Browserwelt halten: die HTML Sanitizer API! Sie tritt an um HTML Strings, die mit JavaScript gebaut werden, endlich sicher, und Libraries wie DOMPurify überflüssig zu machen. String rein, sicheres HTML raus. Wie, was, wo und warum erklärt uns Frederik Braun, Staff Security Engineer bei Mozilla und Mitverfasser des W3C Standard-Drafts. Dazu berichten wir noch vom Twitch Leak, und Constantin erklärt und die CSS-Eigenschaft "offset". Eine Runde Sache (die ins Eck musste, oder so).

Strings bereinigen mit Web-Standards! Die HTML Sanitizer API tritt an um HTML Strings, die mit JavaScript gebaut werden, endlich sicher, und Libraries wie DOMPurify überflüssig zu machen. String rein, sicheres HTML raus. Eine Runde Sache!

Strings bereinigen mit Web-Standards! Was klingt wie ein Arbeitsauftrag der Wäscherei vom Puff nebenan, könnte bald Einzug in die Browserwelt halten: die HTML Sanitizer API! Sie tritt an um HTML Strings, die mit JavaScript gebaut werden, endlich sicher, und Libraries wie DOMPurify überflüssig zu machen. String rein, sicheres HTML raus. Wie, was, wo und warum erklärt uns Frederik Braun, Staff Security Engineer bei Mozilla und Mitverfasser des W3C Standard-Drafts. Dazu berichten wir noch vom Twitch Leak, und Constantin erklärt und die CSS-Eigenschaft &quot;offset&quot;. Eine Runde Sache (die ins Eck musste, oder so).

HTML Sanitizer API mit Frederik Braun

Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/retro-speck-tiefe/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
In unserer Sommerpausen-End-Retro gibt es viel zu besprechen. Werden alert(), prompt() und confirm() abgeschafft? Sind in Zukunft alle Klammern bunt? Kann man vermeintlich kostenlosen Stockbilderportalen wie z.B. Unsplash oder Pixabay trauen, oder drohen Abmahnungen und Abzocke? Kann man Tastaturen mit Reis wiederbeleben? Hat sich Apple heimlich gegen Constantin verschworen? Ihr seht schon, die List ist schier endlos. Bei (belgischem) Bier besprechen wir mal wieder die schönste Nebensache der Welt. Achja, Coding. Darüber reden wir auch.

Begrüßung – [00:00:52]



<ul>
<li><a href="https://discord.gg/HZhtbceJvt" target="_blank" rel="noreferrer noopener">WWSIV-Discord-Server</a></li>
</ul>



Retro – [00:12:42]



<ul>
<li>Constantin: StackOverflow-Jubiläum (<a href="https://wowirsindistvorne.show/stapelueberfluss/">Folge 1</a>) – [00:15:56]</li>



<li>Moritz: Müssen wir über alert() reden? – [00:19:24]
<ul>
<li><a href="https://adactio.com/journal/18369" target="_blank" rel="noreferrer noopener">https://adactio.com/journal/18369</a></li>



<li><a href="https://canistilluse.com/" target="_blank" rel="noreferrer noopener">https://canistilluse.com/</a></li>



<li><a href="https://www.chromestatus.com/feature/5148698084376576" target="_blank" rel="noreferrer noopener">https://www.chromestatus.com/feature/5148698084376576</a></li>



<li>dialog-Element: <a href="https://caniuse.com/dialog" target="_blank" rel="noreferrer noopener">caniuse</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_blank" rel="noreferrer noopener">MDN</a></li>
</ul>
</li>



<li>Constantin: Abzock-Masche bei free stock photos – [00:30:53]
<ul>
<li><a href="https://unsplash.com/" target="_blank" rel="noreferrer noopener nofollow">Unsplash</a> / <a href="https://pixabay.com/de/" target="_blank" rel="noreferrer noopener nofollow">Pixabay</a> / <a href="https://www.pixelio.de/" target="_blank" rel="noreferrer noopener">Pixelio</a></li>
</ul>
</li>



<li>Urlaubs-Blues und Mid-Life-Crisis – [00:39:55]
<ul>
<li><a href="https://www.spiegel.de/reise/motivationsloch-was-hilft-gegen-den-post-urlaubs-blues-a-fe64f741-82dd-43b2-8b12-1e75d695c10d" target="_blank" rel="noreferrer noopener nofollow">Spiegel: Was hilft gegen den Post-Urlaubs-Blues?</a></li>
</ul>
</li>



<li><a href="https://podlovers.org/episode/podcast-produktion-mit-moritz-giesmann/" target="_blank" rel="noreferrer noopener">Moritz im Podlovers-Podcast</a> (<a href="https://wowirsindistvorne.show/schrei-aus-von-der-rueckbuehne/" target="_blank" rel="noreferrer noopener">Folge 26</a>) – [00:48:36]</li>



<li>Constantin: VS Code bracket pairs (<a href="https://wowirsindistvorne.show/vscode-edge-dev-tools-mit-chris-heilmann/">Folge 27</a>) – [00:50:28]
<ul>
<li><a href="https://twitter.com/codepo8/status/1433753236389912594" target="_blank" rel="noreferrer noopener">Tweet von Chris Heilmann</a></li>
</ul>
</li>



<li>Moritz: Sprechpausen und Podcatcher-Features – [00:51:51]</li>



<li>Bier-Pause – [00:55:43]</li>



<li>Constantin: Apple-Rant die 278. &#8211; UI/UX-Edition – [00:57:38]</li>



<li>Moritz: Neues iPhone – [01:14:01]</li>



<li>Spenden-Dank – [01:21:01]</li>



<li>Moritz: Cola in der Tastatur kommt zum Glück nur selten vur – [01:25:28]</li>



<li>Status-Update zu Constantins Desktop-Hardware – [01:30:53]</li>
</ul>



GeilTeil(e)



<ul>
<li>Moritz: GitHub . – [01:45:01]</li>



<li>Moritz: <a href="https://podcasts.apple.com/de/podcast/alles-gesagt/id1374777021?i=1000528951198" target="_blank" rel="noreferrer noopener">Sabine Rückert im &#8222;Alles Gesagt&#8220; Podcast</a> – [01:50:32]</li>



<li>Moritz: <a href="https://twitter.com/wwsiv/status/1437017216197726209" target="_blank" rel="noreferrer noopener">Gurkenumfrage</a> – [01:55:29]</li>



<li>Moritz: <a href="https://www.etsy.com/de/listing/1085695181/hmassgeschneiderte-von-lauke" target="_blank" rel="noreferrer noopener nofollow">Hyper Hyper! Text Markup Language</a> – [01:58:54]</li>



<li><a href="https://www.youtube.com/watch?v=-UBcxKiS550" target="_blank" rel="noreferrer noopener">Dirty Loops &amp; Cory Wong &#8211; Follow The Light</a> – [02:01:21]</li>
</ul>



Verabschiedung – [02:10:05]

In unserer Sommerpausen-End-Retro gibt es viel zu besprechen. Werden alert(), prompt() und confirm() abgeschafft? Sind in Zukunft alle Klammern bunt? Kann man vermeintlich kostenlosen Stockbilderportalen wie z.B. Unsplash oder Pixabay trauen, oder drohen Abmahnungen und Abzocke? Kann man Tastaturen mit Reis wiederbeleben? Hat sich Apple heimlich gegen Constantin verschworen? Ihr seht schon, die List ist schier endlos. Bei (belgischem) Bier besprechen wir mal wieder die schönste Nebensache der Welt. Achja, Coding. Darüber reden wir auch.

Werden alert(), prompt() und confirm() abgeschafft? Kann man vermeintlich kostenlosen Stockbilderportalen wie z.B. Unsplash oder Pixabay trauen, oder drohen Abmahnungen und Abzocke? Bei (belgischem) Bier besprechen wir die schönste Nebensache der Welt.

Retro-Speck-Tiefe

Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/season2after-content-sommerpause/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Staffelfinale! Der Sommer ist da, #WWSIV paukt vor der Sommerpause nochmal auf die Haue, ach nee, andersrum. Wir schauen zurück auf die Highlights aus Staffel 2 und erzählen was sich seitdem geändert hat. Außerdem stellen wir euch unterschätzte Design-Tools vor und zeigen euch was mit dem autocomplete-Attribut so alles möglich ist. Bleibt uns gewogen. Wir hören uns im September wieder. &#x1f48b;&#x1f48b;&#x1f48b;

Begrüßung – [00:00:59]



Retro



<ul>
<li>Moritz: Design Tools, <a href="https://www.figma.com/" target="_blank" rel="noreferrer noopener">Figma</a>, <a href="https://quant-ux.com/" target="_blank" rel="noreferrer noopener">Quant-UX</a> – [00:04:23]</li>



<li>Constantin: CSS Containment Performance-Verbesserung? – [00:09:39]</li>
</ul>



Property der Woche: autocomplete – [00:12:13]



<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=autocomplete" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://codepen.io/Connum/pen/RwpeLar" target="_blank" rel="noreferrer noopener">CodePen-Demo</a></li>



<li><a href="https://getbootstrap.com/docs/5.0/helpers/visually-hidden/" target="_blank" rel="noreferrer noopener">Bootstrap: Visually hidden</a></li>
</ul>



Tagesthema: Rückblick auf Staffel 2 – [00:20:06]



<ol>
<li><a href="https://wowirsindistvorne.show/webtypografie-mit-gerrit-van-aaken/">014 Webtypografie mit Gerrit van Aaken</a> – [00:23:45]
<ul>
<li><a href="https://liebefonts.com/fonts/liebeheide" target="_blank" rel="noreferrer noopener">LiebeHeide Webfont</a></li>
</ul>
</li>



<li><a href="https://wowirsindistvorne.show/semantic-htmhell/">015 Semantic HTMHELL</a> – [00:27:00]
<ul>
<li><a href="https://www.htmhell.dev/" target="_blank" rel="noreferrer noopener">HTMHell.dev</a></li>



<li><a href="https://discord.gg/HZhtbceJvt" target="_blank" rel="noreferrer noopener">WWSIV Discord-Server</a></li>
</ul>
</li>



<li><a href="https://wowirsindistvorne.show/the-holy-state-of-css/">016 The Holy State of CSS</a> – [00:30:55]</li>



<li><a href="https://wowirsindistvorne.show/til-ttl-tagged-template-literals/">017 TIL: TTL (Tagged Template Literals)</a> – [00:32:55]
<ul>
<li><a href="https://css-tricks.com/say-hello-to-css-container-queries/" target="_blank" rel="noreferrer noopener">CSS Tricks: Say Hello to CSS Container Queries</a></li>
</ul>
</li>



<li><a href="https://wowirsindistvorne.show/48-dinge-die-du-nie-ueber-selbstaendigkeit-wissen-wolltest/">018 48 Dinge, die du (nie) über Selbständigkeit wissen wolltest</a> – [00:37:30]
<ul>
<li>Sanitizer API: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Sanitizer" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-api_sanitizer" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>
</li>



<li><a href="https://wowirsindistvorne.show/rueckblick-ausblick-nitpick/">019 Rückblick, Ausblick, nitpick</a> – [00:43:39]</li>



<li><a href="https://wowirsindistvorne.show/the-elder-scrolls-der-alte-scrollt/">020 The elder scrolls (der Alte scrollt)</a> – [00:47:54]</li>



<li><a href="https://wowirsindistvorne.show/7-technik-offenbarungen-im-wandel-der-zeit/">021 7 Technik-Offenbarungen im Wandel der Zeit</a> – [00:51:30]</li>



<li><a href="https://wowirsindistvorne.show/svg-sprites-und-andere-iconartigkeiten/">022 SVG-Sprites und andere Iconartigkeiten</a> – [00:56:11]</li>



<li><a href="https://wowirsindistvorne.show/wo-wir-sind-ist-wunschkonzert/">023 Wo wir sind ist Wunschkonzert</a> – [01:02:24]</li>



<li><a href="https://wowirsindistvorne.show/editor-ide-und-cmd-ufo-svg-ohjemine/">024 Editor, IDE und CMD, UFO, SVG, ohjemine</a> – [01:04:07]</li>



<li><a href="https://wowirsindistvorne.show/oh-git-oh-gott-mit-michael-van-engelshoven/">025 Oh Git oh Gott! mit Michael van Engelshoven</a> – [01:08:46]</li>



<li><a href="https://wowirsindistvorne.show/schrei-aus-von-der-rueckbuehne/">026 Schrei-aus von der Rückbühne</a> – [01:13:19]
<ul>
<li><a href="https://missing.csail.mit.edu/" target="_blank" rel="noreferrer noopener">MIT: The Missing Semester of Your CS Education</a></li>
</ul>
</li>



<li><a href="https://wowirsindistvorne.show/vscode-edge-dev-tools-mit-chris-heilmann/">027 VSCode &amp; Edge Dev Tools mit Chris Heilmann</a> – [01:15:09]</li>



<li><a href="https://wowirsindistvorne.show/17-css-eigenschaften-die-wir-noch-nicht-kannten/">028 17 CSS-Eigenschaften, die wir noch nicht kannten</a> – [01:19:46]</li>
</ol>



GeilTeil: <a href="https://colors.lol/" target="_blank" rel="noreferrer noopener">colors.lol</a> – [01:23:52]



Verabschiedung – [01:27:26]

Staffelfinale! Der Sommer ist da, #WWSIV paukt vor der Sommerpause nochmal auf die Haue, ach nee, andersrum. Wir schauen zurück auf die Highlights aus Staffel 2 und erzählen was sich seitdem geändert hat. Außerdem stellen wir euch unterschätzte Design-Tools vor und zeigen euch was mit dem autocomplete-Attribut so alles möglich ist. Bleibt uns gewogen. Wir hören uns im September wieder. 💋💋💋

Wir schauen zurück auf die Highlights aus Staffel 2 und besprechen was sich seitdem geändert hat. Außerdem stellen wir euch unterschätzte Design-Tools vor und zeigen euch was mit dem autocomplete-Attribut so alles möglich ist. &amp;#x1f48b;&amp;#x1f48b;&amp;#x1f48b;

#season2::after { content: "Sommerpause" }

Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/17-css-eigenschaften-die-wir-noch-nicht-kannten/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Jenseits von Grid, Color und Width tauchen wir ein, in die dunkle Welt der wenig bekannten CSS-Features. Kennst du z.B. schon "image-rendering", "aspect-ratio", "touch-action", oder "overscroll-behavior"? Wir auch erst seit dieser Sendung. Dazu kündigen wir noch unser offizielles Merch an und erklären, warum die Tech-Commuity vermutlich vor allen anderen geimpft sein wird. Fun Fun Fun!

Begrüßung: – [00:00:53]



Retro



<ul id="block-243a6482-0231-45a6-88f8-2a446605a776">
<li>Constantin: Stack Overflow für 1,8 Milliarden US-Dollar verkauft – [00:02:20]
<ul>
<li><a href="https://techcrunch.com/2021/06/02/stack-overflow-acquired-by-prosus-for-a-reported-1-8-billion/" target="_blank" rel="noreferrer noopener">techcrunch</a> / <a href="https://www.golem.de/news/entwicklungscommunity-finanzinvestor-kauft-stack-overflow-fuer-1-8-milliarden-2106-156999.html" target="_blank" rel="noreferrer noopener">golem</a> / <a href="https://www.heise.de/news/Stack-Overflow-wird-von-Tech-Investor-Prosus-uebernommen-6061206.html" target="_blank" rel="noreferrer noopener">heise</a></li>
</ul>
</li>



<li>Moritz: <a href="https://www.meetup.com/de-DE/CSS-Cafe/" target="_blank" rel="noreferrer noopener">CSS Café</a> – [00:08:38]</li>



<li>Constantin: Gute Arbeit, die keiner bezahlen will – [00:11:48]
<ul>
<li><a href="https://github.com/TobseF/impf-bot" target="_blank" rel="noreferrer noopener">impf-bot</a></li>
</ul>
</li>



<li><a href="https://supergeek.de/de/wowirsindistvorne/" target="_blank" rel="noreferrer noopener">WWSIV-Merch</a>! – [00:26:35]</li>
</ul>



Tagesthema: State of CSS revisited – [00:29:10]



<ul>
<li><a href="https://wowirsindistvorne.show/the-holy-state-of-css/" target="_blank" rel="noreferrer noopener">Folge № 16: The Holy State of CSS</a></li>
</ul>



<ol>
<li>text-align-last: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-align-last" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-text-align-last" target="_blank" rel="noreferrer noopener">caniuse</a> – [00:30:16]</li>



<li>initial-letter: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/initial-letter" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-initial-letter" target="_blank" rel="noreferrer noopener">caniuse</a> – [00:35:24]</li>



<li>font-variant-numeric: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/font-variant-numeric" target="_blank" rel="noreferrer noopener">caniuse</a> – [00:38:57]
<ul>
<li><a href="https://wowirsindistvorne.show/webtypografie-mit-gerrit-van-aaken/" target="_blank" rel="noreferrer noopener">Folge № 14: Webtypografie mit Gerrit van Aaken</a></li>
</ul>
</li>



<li>font-display: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-font-rendering-controls" target="_blank" rel="noreferrer noopener">caniuse</a> – [00:42:51]
<ul>
<li><a href="https://www.youtube.com/watch?v=-lPTshDcr7o" target="_blank" rel="noreferrer noopener">Font-Display – Supercharged</a> auf YouTube</li>



<li>CSS-Tricks: <a href="https://css-tricks.com/almanac/properties/f/font-display/" target="_blank" rel="noreferrer noopener">font-display</a> / <a href="https://css-tricks.com/google-fonts-and-font-display/" target="_blank" rel="noreferrer noopener">Google Fonts and font-display</a></li>
</ul>
</li>



<li>image-rendering: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-crisp-edges" target="_blank" rel="noreferrer noopener">caniuse</a> – [00:49:12]</li>



<li>CSS Subgrid: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=subgrid" target="_blank" rel="noreferrer noopener">caniuse</a> – [00:52:57]
<ul>
<li><a href="contents auf caniuse" target="_blank" rel="noreferrer noopener">display: contents auf caniuse</a></li>



<li><a href="https://css-irl.info/subgrid-is-here/" target="_blank" rel="noreferrer noopener">CSS In Real Life: Subgrid is here</a></li>



<li><a href="https://www.youtube.com/watch?v=vxOj7CaWiPU" target="_blank" rel="noreferrer noopener">Hello Subgrid! – Rachel Andrew at CSSconf EU 2019</a> auf YouTube</li>



<li><a href="https://codepen.io/michellebarker/pen/gJzxBW" target="_blank" rel="noreferrer noopener">Demo (nur Firefox)</a></li>



<li><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=618969" target="_blank" rel="noreferrer noopener">Chromium Bug Ticket zu Subgrid</a></li>
</ul>
</li>



<li>CSS Writing Modes: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-writing-mode" target="_blank" rel="noreferrer noopener">caniuse</a> – [00:59:17]</li>



<li>CSS Exclusions: <a href="https://caniuse.com/css-exclusions" target="_blank" rel="noreferrer noopener">caniuse</a> – [01:01:24]
<ul>
<li><a href="https://css-tricks.com/exclusions-will-hopefully-be-like-more-powerful-grid-friendly-floats/" target="_blank" rel="noreferrer noopener">CSS Tricks: Exclusions will hopefully be like more powerful grid-friendly&nbsp;floats</a></li>



<li><a href="https://github.com/w3c/csswg-drafts/issues/3308#issuecomment-441269086" target="_blank" rel="noreferrer noopener">Print-Anwendungsbeispiel</a></li>
</ul>
</li>



<li>aspect-ratio: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_aspect-ratio" target="_blank" rel="noreferrer noopener">caniuse</a> – [01:06:39]</li>



<li>backdrop-filter: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-backdrop-filter" target="_blank" rel="noreferrer noopener">caniuse</a> – [01:09:07]
<ul>
<li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" target="_blank" rel="noreferrer noopener">&lt;dialog&gt;</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop" target="_blank" rel="noreferrer noopener">::backdrop</a> (ist aber was ganz anderes!)</li>
</ul>
</li>



<li>overscroll-behavior: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_overscroll-behavior" target="_blank" rel="noreferrer noopener">caniuse</a> – [01:13:01]
<ul>
<li><a href="https://codepen.io/MoritzGiessmann/pen/LYWdoxe" target="_blank" rel="noreferrer noopener">Demo</a></li>
</ul>
</li>



<li>content-visibility: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-content-visibility" target="_blank" rel="noreferrer noopener">caniuse</a> – [01:19:37]
<ul>
<li>contain-intrinsic-size: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/contain-intrinsic-size" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_contain-intrinsic-size" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://www.youtube.com/watch?v=FFA-v-CIxJQ" target="_blank" rel="noreferrer noopener">Slashing layout cost with content-visibility &#8211; HTTP 203</a> auf YouTube</li>
</ul>
</li>



<li>CSS Containment: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-containment" target="_blank" rel="noreferrer noopener">caniuse</a> – [01:24:09]
<ul>
<li>Einwurf: <a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">Tailwind CSS</a> – [01:29:19]</li>
</ul>
</li>



<li>touch-action: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-touch-action" target="_blank" rel="noreferrer noopener">caniuse</a> – [01:30:33]
<ul>
<li><a href="https://codepen.io/MoritzGiessmann/pen/xxqWoYB" target="_blank" rel="noreferrer noopener">Demo</a></li>
</ul>
</li>



<li>:any-link: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-any-link" target="_blank" rel="noreferrer noopener">caniuse</a> – [01:42:33]</li>



<li>:default: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:default" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-default-pseudo" target="_blank" rel="noreferrer noopener">caniuse</a> – [01:43:52]</li>



<li>:indeterminate: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate" target="_blank" rel="noreferrer noopener">MDN</a> – [01:30:33]
<ul>
<li>caniuse: <a href="https://caniuse.com/indeterminate-checkbox" target="_blank" rel="noreferrer noopener">indeterminate checkboxes</a> / <a href="https://caniuse.com/css-indeterminate-pseudo" target="_blank" rel="noreferrer noopener">:indeterminate</a></li>



<li><a href="https://css-tricks.com/almanac/selectors/i/indeterminate/" target="_blank" rel="noreferrer noopener">CSS Tricks :indeterminate</a></li>
</ul>
</li>



<li>(overflow-anchor &#8211; hatten wir schon in <a href="https://wowirsindistvorne.show/the-elder-scrolls-der-alte-scrollt/">Folge № 20</a>) – [01:52:56]</li>
</ol>



Eigenwerbung – [01:55:42]



<ul>
<li><a href="https://twitch.tv/wwsiv" target="_blank" rel="noreferrer noopener">Wo wir sind ist vorne auf Twitch</a></li>



<li><a href="https://www.youtube.com/channel/UCNvxkvGSZVEf_6MMTzJLXWg" target="_blank" rel="noreferrer noopener">Wo wir sind ist vorne auf YouTube</a></li>
</ul>



GeilTeil



<ul>
<li>Constantin: <a href="https://pointerpointer.com/" target="_blank" rel="noreferrer noopener">pointerpointer.com</a> – [01:58:55]</li>



<li>Moritz: <a href="https://stylestage.dev/" target="_blank" rel="noreferrer noopener">stylestage.dev</a> – [02:02:13]</li>
</ul>



Verabschiedung – [02:05:28]



<ul>
<li><a href="https://supergeek.de/de/wowirsindistvorne/" target="_blank" rel="noreferrer noopener">WWSIV-Merch-Shop</a></li>



<li><a href="https://www.twitch.tv/wowirsindistvorne_dev" target="_blank" rel="noreferrer noopener">Wo wir sind ist vorne auf Twitch</a></li>
</ul>

Jenseits von Grid, Color und Width tauchen wir ein, in die dunkle Welt der wenig bekannten CSS-Features. Kennst du z.B. schon "image-rendering", "aspect-ratio", "touch-action", oder "overscroll-behavior"? Wir auch erst seit dieser Sendung. Dazu kündigen wir noch unser offizielles Merch an und erklären, warum die Tech-Commuity vermutlich vor allen anderen geimpft sein wird. Fun Fun Fun!

Jenseits von Grid, Color und Width tauchen wir ein, in die dunkle Welt der wenig bekannten CSS-Features. Kennst du z.B. schon &quot;image-rendering&quot;, &quot;aspect-ratio&quot;, &quot;touch-action&quot;, oder &quot;overscroll-behavior&quot;?

Jenseits von Grid, Color und Width tauchen wir ein, in die dunkle Welt der wenig bekannten CSS-Features. Kennst du z.B. schon &quot;image-rendering&quot;, &quot;aspect-ratio&quot;, &quot;touch-action&quot;, oder &quot;overscroll-behavior&quot;? Wir auch erst seit dieser Sendung. Dazu kündigen wir noch unser offizielles Merch an und erklären, warum die Tech-Commuity vermutlich vor allen anderen geimpft sein wird. Fun Fun Fun!

17 CSS-Eigenschaften, die wir noch nicht kannten

Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/vscode-edge-dev-tools-mit-chris-heilmann/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Developer Advocacy meets VSCode meets MS-Edge. Mit unserem Gast Christian Heilmann sprechen wir darüber, wie es ist, für große Firmen auf noch größerer Welttournee zu sein und wie Microsoft derzeit daran arbeitet, VSCode mit Edge zu einem noch besseren Entwicklererlebnis zu machen. Nebenbei streifen wir noch CSS color-contrast() und warum FirefoxOS vielleicht gar keine so schlechte Idee war. Ein Spaß für die ganze Familie!

Begrüßung: Vorstellung <a href="http://ChristianHeilmann.com" target="_blank" rel="noreferrer noopener">Chris Heilmann</a> – [00:00:53]



Retro



<ul>
<li>Constantin: WordPress, PHP und Cryptographie – [00:07:46]
<ul>
<li><a href="https://github.com/paragonie/random_compat" target="_blank" rel="noreferrer noopener">random_compat</a> / <a href="https://github.com/paragonie/sodium_compat" target="_blank" rel="noreferrer noopener">sodium_compat</a></li>



<li><a href="https://github.com/defuse/php-encryption" target="_blank" rel="noreferrer noopener">defuse/phpencryption</a></li>
</ul>
</li>



<li>Christian: Git SSH Keys und VS Code OAuth – [00:12:15]</li>



<li>Moritz: CSS-Spezi(fizi)tätsirrsinn – [00:15:05]
<ul>
<li><a href="https://codepen.io/MoritzGiessmann/pen/BaWBZpR" target="_blank" rel="noreferrer noopener">CodePen</a></li>



<li><a href="https://stackoverflow.com/questions/9906794/internet-explorers-css-rules-limits" target="_blank" rel="noreferrer noopener">IE-Bug mit Buffer-Overflow bei Stylesheets</a> (StackOverflow)</li>
</ul>
</li>



<li>Merchandise-Teaser – [00:19:58]</li>
</ul>



Property der Woche: CSS color-contrast() – [00:21:01]



<ul>
<li><a href="https://developer.apple.com/safari/technology-preview/release-notes/#r124" target="_blank" rel="noreferrer noopener">Safari Technology Preview Release 124</a></li>



<li>Tickets: <a href="https://trac.webkit.org/changeset/273683/webkit/" target="_blank" rel="noreferrer noopener">Webkit</a> / <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1708923" target="_blank" rel="noreferrer noopener">Firefox</a> / <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=1111385" target="_blank" rel="noreferrer noopener">Chromium</a></li>



<li><a href="https://www.w3.org/TR/css-color-5/#colorcontrast" target="_blank" rel="noreferrer noopener">color-contrast() im W3C-Draft CSS Color Module Level 5</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast%28%29" target="_blank" rel="noreferrer noopener">color-contrast() auf MDN</a></li>



<li><a href="https://github.com/Fyrd/caniuse/issues/5405" target="_blank" rel="noreferrer noopener">caniuse-Issue</a></li>
</ul>



Tagesthema-Vorgeplänkel: Windows vs Mac vs Linux bei Microsoft – [00:26:24]



Tagesthema: Yahoo/Mozilla/MS, VS Code &amp; Edge Dev Tools – [00:30:17]



<ol>
<li>Arbeit bei Yahoo vs Mozilla vs Microsoft – [00:31:30]</li>



<li>Developer Evangelism / Developer Advocacy – [00:46:42]
<ul>
<li><a href="https://developer-advocacy.com/">https://developer-advocacy.com/</a></li>
</ul>
</li>



<li>Edge Dev Tools in VS Code, Extensions, Tooling – [00:58:11]
<ul>
<li><a href="https://aka.ms/devtools-for-code" target="_blank" rel="noreferrer noopener">Microsoft Edge Tools for VS Code</a></li>



<li><a href="https://code.visualstudio.com/docs/editor/debugging#_launch-versus-attach-configurations" target="_blank" rel="noreferrer noopener">launch.json</a></li>



<li>VS Code Extensions: <a href="https://marketplace.visualstudio.com/items?itemName=webhint.vscode-webhint" target="_blank" rel="noreferrer noopener">webhint</a> / <a href="https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens" target="_blank" rel="noreferrer noopener">Error Lens</a> / <a href="https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets" target="_blank" rel="noreferrer noopener">vscode-pets</a></li>
</ul>
</li>



<li>Dev Tools Developer Experience &amp; Feedback – [01:17:38]</li>



<li><a href="https://de.wikipedia.org/wiki/Firefox_OS" target="_blank" rel="noreferrer noopener">Firefox OS</a>, PWAs – [01:29:07]
<ul>
<li><a href="https://www.youtube.com/watch?v=nfuoOGSMBXE" target="_blank" rel="noreferrer noopener">BEHIND THE CODE: The one who created his own path</a> (YouTube)</li>



<li>KaiOS: <a href="https://de.wikipedia.org/wiki/KaiOS" target="_blank" rel="noreferrer noopener">Wikipedia</a> / <a href="https://www.kaiostech.com/" target="_blank" rel="noreferrer noopener">KaiOS Website</a></li>



<li><a href="https://pwabuilder.com" target="_blank" rel="noreferrer noopener">pwabuilder.com</a></li>
</ul>
</li>



<li>Konferenzen – [01:36:56]
<ul>
<li><a href="https://beyondtellerrand.com/" target="_blank" rel="noreferrer noopener">beyond tellerrand</a></li>



<li><a href="https://halfstackconf.com/" target="_blank" rel="noreferrer noopener">HalfStack</a></li>



<li><a href="https://smashingconf.com/" target="_blank" rel="noreferrer noopener">smashing conf</a></li>



<li><a href="https://www.dotjs.io/" target="_blank" rel="noreferrer noopener">dotJS</a> / <a href="https://www.dotcss.io/" target="_blank" rel="noreferrer noopener">dotCSS</a></li>



<li><a href="https://www.ted.com/" target="_blank" rel="noreferrer noopener">TED talks</a></li>
</ul>
</li>
</ol>



GeilTeil: <a href="https://gitmoji.dev" target="_blank" rel="noreferrer noopener">gitmoji.dev</a> – [01:41:55]



Verabschiedung – [01:44:31]



<ul>
<li><a href="https://news.microsoft.com/de-de/developer-stories-chris-heilmann-der-code-poet/" target="_blank" rel="noreferrer noopener">Developer Stories: Chris Heilmann, der Code-Poet</a></li>
</ul>

Developer Advocacy meets VSCode meets MS-Edge. Mit unserem Gast Christian Heilmann sprechen wir darüber, wie es ist, für große Firmen auf noch größerer Welttournee zu sein und wie Microsoft derzeit daran arbeitet, VSCode mit Edge zu einem noch besseren Entwicklererlebnis zu machen. Nebenbei streifen wir noch CSS color-contrast() und warum FirefoxOS vielleicht gar keine so schlechte Idee war. Ein Spaß für die ganze Familie!

Mit unserem Gast Christian Heilmann sprechen wir darüber, wie es ist, für große Firmen auf noch größerer Welttournee zu sein und wie Microsoft derzeit daran arbeitet, VSCode mit Edge zu einem noch besseren Entwicklererlebnis zu machen.

VSCode & Edge Dev Tools mit Chris Heilmann

Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/schrei-aus-von-der-rueckbuehne/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Zur Staffelmitte gibt’s Podcast Technik! Wir stellen die Technik und den Workflow hinter #WWSIV vor. Dabei sprechen wir über Audiosoftware, Mikrofone, Audiointerfaces, Wordpress, Podlove, StudioLink und alles was man so braucht. Bis auf Kabel, aber Kabel mag eh keiner. 
Dazu servieren wir noch eine Scheibe CSS accent-color und fabulieren über die digitale Zukunft von weltweiter Bildung. &#x1f525; Lit.

 Begrüßung – [00:00:52]



Retro



<ul>
<li>Moritz: Retro Moritz: <a href="https://about.gitlab.com/" target="_blank" rel="noreferrer noopener">GitLab</a> mit <a href="https://marketplace.visualstudio.com/items?itemName=GitLab.gitlab-workflow" target="_blank" rel="noreferrer noopener">GitLab Workflow</a> extension in VSCode – [00:03:26]</li>



<li>Constantin: DSGVO, Rate Limiting &amp; IP Hashing– [00:10:36]</li>



<li>Moritz: <a href="https://twitter.com/wwsiv/status/1383158027755384833" target="_blank" rel="noreferrer noopener">Twitter-Umfrage</a> &#8211; Wo hört ihr uns? – [00:21:28]</li>



<li>Constantin: Google verortet mich im Niemandsland – [00:25:51]</li>



<li>Moritz: <a href="https://twitter.com/wwsiv/status/1383158027755384833" target="_blank" rel="noreferrer noopener">Front&amp;End</a> T-Shirt bei Cottonbureau – [00:31:17]
<ul>
<li><a href="https://www.youtube.com/channel/UCYjk_zY-iYR8YNfJmuzd70A/videos" target="_blank" rel="noreferrer noopener">Epic Meal Time</a> auf YouTube</li>
</ul>
</li>



<li>Beide: Wir sind Twitch-Affiliate / von Anfang an werbefrei – [00:39:02]
<ul>
<li><a href="https://www.twitch.tv/wowirsindistvorne_dev" target="_blank" rel="noreferrer noopener">Wo wir sind ist vorne auf Twitch</a></li>
</ul>
</li>
</ul>



Property der Woche: accent-color – [00:44:21]



<ul>
<li>Aktivierung in Chrome Canary: chrome://flags/#enable-experimental-web-platform-features</li>



<li><a href="https://css-accent-color.glitch.me/" target="_blank" rel="noreferrer noopener">Demo</a></li>
</ul>



Tagesthema: WWSIV-Backstage-Führung – [00:54:39]



<ul>
<li><a href="https://wowirsindistvorne.show/equipment/" target="_blank" rel="noreferrer noopener">Unser Equipment</a> (Hardware &amp; Software)</li>



<li>1. Website – [00:25:51]</li>



<li>2. Software – [01:06:56]</li>



<li>3. Hardware – [01:26:35]</li>



<li>4. Publizieren / Podcast Directories &amp; Catcher – [01:48:04]</li>
</ul>



GeilTeil



<ul>
<li>Constantin: <a href="https://missing.csail.mit.edu/2020/" target="_blank" rel="noreferrer noopener">MIT &#8211; The Missing Semester</a> – [01:52:31]</li>



<li>Moritz: <a href="https://imperavi.com/books/web-interface-handbook/" target="_blank" rel="noreferrer noopener">Web Interface Handbook</a> – [02:05:25]</li>
</ul>



Verabschiedung – [02:11:00]



<ul>
<li><a href="https://podcasterinnen.org/">podcasterinnen.org</a></li>
</ul>

Zur Staffelmitte gibt’s Podcast Technik! Wir stellen die Technik und den Workflow hinter #WWSIV vor. Dabei sprechen wir über Audiosoftware, Mikrofone, Audiointerfaces, Wordpress, Podlove, StudioLink und alles was man so braucht. Bis auf Kabel, aber Kabel mag eh keiner.
Dazu servieren wir noch eine Scheibe CSS accent-color und fabulieren über die digitale Zukunft von weltweiter Bildung. 🔥 Lit.

Wir stellen die Technik und den Workflow hinter #WWSIV vor. Dabei sprechen wir über Audiosoftware, Mikrofone, Audiointerfaces, Wordpress, Podlove, StudioLink und alles was man so braucht. Bis auf Kabel, aber Kabel mag eh keiner.

Zur Staffelmitte gibt’s Podcast Technik! Wir stellen die Technik und den Workflow hinter #WWSIV vor. Dabei sprechen wir über Audiosoftware, Mikrofone, Audiointerfaces, Wordpress, Podlove, StudioLink und alles was man so braucht. Bis auf Kabel, aber Kabel mag eh keiner.
Dazu servieren wir noch eine Scheibe CSS accent-color und fabulieren über die digitale Zukunft von weltweiter Bildung. 🔥 Lit.

Schrei-aus von der Rückbühne

Wir haben dich gut unterhalten? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/oh-git-oh-gott-mit-michael-van-engelshoven/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Wir haben gerufen, der Git-Missionar hat geantwortet! Nachdem wir immer wieder von Git-Wehwehchen berichtet hatten, haben wir diesmal Verstärkung! Unser wunderbarer Gast Michael van Engelshoven erklärt die Grundkonzepte hinter der Versionsverwaltung Git und bringt Licht in unsere dunkelsten Git-Wissenslücken. Dabei besprechen wir neben bekannten Konzepten wie commit, pull, push und merge auch Squashing, Rebasing, Workflows, GUIs, Tools und wie gute Commit-Messages aussehen sollen. Um alles zu verstehen müssen wir selbst die Sendung noch ca. 493 Mal hören, aber hey, hat ja keiner gesagt, dass das hier ein Spaziergang werden würde. Deep.

 Begrüßung: Vorstellung Michael – [00:00:53]



Retro



<ul>
<li>Constantin: PC kaputt – [00:04:27]</li>



<li>Moritz: MacBook am Limit: Software Live-Stream-Encoding – [00:06:57]</li>



<li>Michael: Bootstrap Utilities =&gt; Tailwind – [00:11:05]
<ul>
<li><a href="https://getbootstrap.com/" target="_blank" rel="noreferrer noopener">Bootstrap</a></li>



<li><a href="https://tailwindcss.com/" target="_blank" rel="noreferrer noopener">Tailwind</a></li>



<li><a href="https://www.scootersoftware.com/features.php" target="_blank" rel="noreferrer noopener">Beyond Compare</a></li>
</ul>
</li>



<li>Moritz: <a href="https://meiert.com/en/blog/the-web-development-glossary/" target="_blank" rel="noreferrer noopener">The Web Development Glossary</a> – [00:16:29]
<ul>
<li><a href="https://twitter.com/MoritzGiessmann/status/1301901132017655810" target="_blank" rel="noreferrer noopener">Tweet</a></li>
</ul>
</li>
</ul>



Property der Woche: Object.entries() – [00:18:06]



<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/object-entries" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>



Tagesthema: Git – [00:21:28]



<ol>
<li>Grundkonzepte: Hashing, .git-Ordner, Struktur, Referenzen – [00:22:01]
<ul>
<li><a href="https://git-scm.com/docs/git-cat-file" target="_blank" rel="noreferrer noopener">git cat-file -p {commit-hash}</a></li>



<li><a href="https://www.techopedia.com/definition/5739/directed-acyclic-graph-dag" target="_blank" rel="noreferrer noopener">„Directed Acyclic Graph (DAG)“ Definition auf techopedia</a></li>
</ul>
</li>



<li>Branch-Umbenennung (z.B. master -&gt; main) – [00:45:27]
<ul>
<li><a href="https://www.git-tower.com/learn/git/faq/git-rename-master-to-main/" target="_blank" rel="noreferrer noopener">git branch -m master main</a></li>
</ul>
</li>



<li>Command-Übersicht, Graph-Darstellung, visuelle Lern-Tools – [00:50:08]
<ul>
<li><a href="https://git-scm.com/docs/git/de" target="_blank" rel="noreferrer noopener">git-scm.com Dokumentation (auch auf Deutsch)</a></li>



<li><a href="https://marketplace.visualstudio.com/items?itemName=matsz.pasteoverflow" target="_blank" rel="noreferrer noopener">VS Code Extension PasteOverflow</a></li>



<li><a href="https://git-scm.com/docs/git-log" target="_blank" rel="noreferrer noopener">git log &#8211;graph &#8211;oneline &#8211;all</a></li>



<li><a href="https://learngitbranching.js.org/?locale=de_DE" target="_blank" rel="noreferrer noopener">learngitbranching.js.org</a></li>



<li><a href="https://git-school.github.io/visualizing-git/" target="_blank" rel="noreferrer noopener">Git School: Visualizing Git</a></li>
</ul>
</li>



<li>GUIs und Git-Workflows für Einsteiger – [00:56:21]
<ul>
<li><a href="https://desktop.github.com/">GitHub for Desktop</a></li>
</ul>
</li>



<li>Rebase vs. Merge Commits / Rebase-Merge-Konflikt-Hölle – [00:58:45]
<ul>
<li><a href="https://www.atlassian.com/git/tutorials/merging-vs-rebasing" target="_blank" rel="noreferrer noopener">Merging vs. Rebasing</a></li>



<li><a href="https://git-scm.com/docs/git-rerere" target="_blank" rel="noreferrer noopener">git rerere</a></li>
</ul>
</li>



<li>Commits zusammenfassen (sqash/fixup) – [01:14:00]
<ul>
<li><a href="https://git-scm.com/docs/git-rebase" target="_blank" rel="noreferrer noopener">git rebase -i origin/master</a></li>



<li><a href="http://git-scm.com/docs/git-config/de" target="_blank" rel="noreferrer noopener">git config &#8211;global core.editor &#8222;{Pfad zum Editor}&#8220;</a> (Editor-Pfad mit zusätzlichem Parameter, z.B. <code style="white-space: nowrap;">-wait</code> für VS Code und Atom, oder <code style="white-space: nowrap;">-w</code> für Sublime Text, damit git auf das Schließen der Datei wartet)</li>



<li><code>pick</code> ändern zu <code>fixup</code> (oder <code>squash</code> für neue Commit-Message)</li>



<li>Speichern in vim: <code>Esc</code> &gt; <code>:wq</code> &gt; <code>Enter</code></li>
</ul>
</li>



<li>Warum überhaupt Versionsverwaltung / gute Commit-Messages – [01:29:50]
<ul>
<li><a href="https://git-scm.com/docs/git-reflog" target="_blank" rel="noreferrer noopener">git reflog</a></li>



<li><a href="https://www.conventionalcommits.org/de/v1.0.0/" target="_blank" rel="noreferrer noopener">Conventional Commits</a></li>



<li><a href="https://semver.org/lang/de/" target="_blank" rel="noreferrer noopener">Semantic Versioning (SemVer)</a></li>



<li><a href="https://github.com/typicode/husky" target="_blank" rel="noreferrer noopener">typicode/husky</a></li>



<li><a href="https://stackoverflow.com/questions/184618/what-is-the-best-comment-in-source-code-you-have-ever-encountered" target="_blank" rel="noreferrer noopener">Witzige Code-Kommentare</a></li>



<li><a href="https://blog.sebastian-daschner.com/entries/git-commit-fixup-autosquash#:~:text=Fixup%20commits%20produce%20commits%20that,and%20rebase%20the%20subsequent%20commits." target="_blank" rel="noreferrer noopener">fixup commits und &#8211;autosquash</a></li>



<li><a href="https://git-scm.com/docs/git-cherry-pick" target="_blank" rel="noreferrer noopener">git cherry-pick</a></li>
</ul>
</li>



<li>Commit aufsplitten – [01:45:17]
<ul>
<li><a href="https://git-scm.com/docs/git-add/de" target="_blank" rel="noreferrer noopener">git add -p</a></li>
</ul>
</li>



<li>Team/Arbeitsprozesse auf git umstellen / Git vs SVN – [01:49:35]
<ul>
<li><a href="https://amzn.to/3e9KJsB" target="_blank" rel="noreferrer noopener">O’Reilly: Version Control with Git</a> (Affiliate Link)</li>



<li><a href="https://nvie.com/posts/a-successful-git-branching-model/" target="_blank" rel="noreferrer noopener">A successful Git branching model</a></li>



<li><a href="https://guides.github.com/introduction/flow/" target="_blank" rel="noreferrer noopener">GitHub flow</a></li>
</ul>
</li>



<li>„geheime“ Git-Commands, die praktische Dinge tun – [02:00:22]
<ul>
<li><a href="https://git-scm.com/docs/git-bisect" target="_blank" rel="noreferrer noopener">git bisect</a></li>



<li><a href="https://github.com/newren/git-filter-repo" target="_blank" rel="noreferrer noopener">git-filter-repo</a></li>
</ul>
</li>
</ol>



GeilTeil



<ul>
<li>Michael: <a href="https://www.youtube.com/watch?v=X-iSQQgOd1A" target="_blank" rel="noreferrer noopener">Coding Adventure: Ant and Slime Simulations (YouTube)</a> – [02:07:36]</li>



<li>Constantin: Gitlet.js – [02:11:13]
<ul>
<li><a href="http://gitlet.maryrosecook.com/docs/gitlet.html" target="_blank" rel="noreferrer noopener">Git in 600 Wörtern und 1000 Zeilen JavaScript</a></li>



<li>„Git from the inside out“: <a href="https://maryrosecook.com/blog/post/git-from-the-inside-out" target="_blank" rel="noreferrer noopener">Textversion</a> / <a href="https://www.youtube.com/watch?v=fCtZWGhQBvo" target="_blank" rel="noreferrer noopener">Talk auf YouTube</a></li>
</ul>
</li>
</ul>

Wir haben gerufen, der Git-Missionar hat geantwortet! Nachdem wir immer wieder von Git-Wehwehchen berichtet hatten, haben wir diesmal Verstärkung! Unser wunderbarer Gast Michael van Engelshoven erklärt die Grundkonzepte hinter der Versionsverwaltung Git und bringt Licht in unsere dunkelsten Git-Wissenslücken. Dabei besprechen wir neben bekannten Konzepten wie commit, pull, push und merge auch Squashing, Rebasing, Workflows, GUIs, Tools und wie gute Commit-Messages aussehen sollen. Um alles zu verstehen müssen wir selbst die Sendung noch ca. 493 Mal hören, aber hey, hat ja keiner gesagt, dass das hier ein Spaziergang werden würde. Deep.

Unser Gast Michael van Engelshoven erklärt die Grundkonzepte hinter Git. Dabei besprechen wir neben bekannten Konzepten wie commit, pull, push und merge auch Squashing, Rebasing, Workflows, GUIs, Tools und wie gute Commit-Messages aussehen sollen.

Oh Git oh Gott! mit Michael van Engelshoven

Latenight-Frontend-Talkshow rund um Webdesign und Entwicklung. Es reden sich um ＜HEAD＞ und Kragen: HTML-Fundamentalist Moritz Glantz und JavaScript-Jongleurin Sarah Groß.

PODLIST

Wo wir sind ist vorne.

Latenight-Frontend-Talkshow rund um Webdesign und Entwicklung. Es reden sich um ＜HEAD＞ und Kragen: HTML-Fundamentalist Moritz Glantz und JavaScript-Jongleurin Sarah Groß.

Neue Episoden

Der Web Almanac ist sowas von 2021

Wo wir sind ist vorne.

Geil, geiler, WO WIR SIND IST GEILTEIL: Das ist unsere geilste Folge!

Wo wir sind ist vorne.

UX-Engineering & Barrierefreiheit mit Dirk Ginader

Wo wir sind ist vorne.

Web Performance mit Christian "Schepp" Schaefer

Wo wir sind ist vorne.

10 merkwürdig unbekannte CSS-Eigenschaften (und zwei Frameworks)

Wo wir sind ist vorne.

HTML Sanitizer API mit Frederik Braun

Wo wir sind ist vorne.

Retro-Speck-Tiefe

Wo wir sind ist vorne.

#season2::after { content: "Sommerpause" }

Wo wir sind ist vorne.

17 CSS-Eigenschaften, die wir noch nicht kannten

Wo wir sind ist vorne.

VSCode & Edge Dev Tools mit Chris Heilmann

Wo wir sind ist vorne.

Schrei-aus von der Rückbühne

Wo wir sind ist vorne.

Oh Git oh Gott! mit Michael van Engelshoven

Wo wir sind ist vorne.