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/7-technik-offenbarungen-im-wandel-der-zeit/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Aufgebrochen, um den Folgenlängenrekord zu brechen, sprechen wir über AOL-CDs, alte und neue (IT-)Technik und unsere verworrenen Programmierer-Wege aus grauer Vorzeit ins Jetzt. Nebenher zeigen wir was clip-path so alles kann und haben neue Hörbuch-Empfehlungen für euch. Eigentlich sollte der DAZN-Praktikant unseren Sendungstitel schreiben, aber wir wurden leider von seinem Wish-Pendant wyld weggeflext. AMK!

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



Retro



<ul>
<li>Constantin: End-to-end-Tests mit Cypress – [00:02:36]
<ul>
<li><a href="https://cypress.io" target="_blank" rel="noreferrer noopener">cypress.io</a></li>



<li><a href="https://workingdraft.de/458/" target="_blank" rel="noreferrer noopener">Working Draft Revision 458: Cypress</a></li>
</ul>
</li>
</ul>



<ul>
<li>Moritz: Git-Gegrummel und die Suche nach dem Git-Gott – [00:11:48]</li>



<li>Constantin: Vue-Bug, yarn link / npm link – [00:18:05]
<ul>
<li><a href="https://github.com/vuejs/vue-next/blob/master/.github/contributing.md" target="_blank" rel="noreferrer noopener">Vue.js Contributing Guide</a></li>



<li><a href="https://classic.yarnpkg.com/en/docs/cli/link/" target="_blank" rel="noreferrer noopener">yarn link</a> / <a href="https://docs.npmjs.com/cli/v6/commands/npm-link" target="_blank" rel="noreferrer noopener">npm link</a></li>
</ul>
</li>



<li>Moritz: Von Telekommunikationsanbietern und Schwerölmotoren – [00:26:38]</li>



<li>Constantin: Arbeitsplatzergonomie dank Kompendium der Mediengestaltung – [00:39:30]
<ul>
<li><a href="https://amzn.to/3d6zuST" target="_blank" rel="noreferrer noopener">Monitor-Ständer</a> (Affiliate-Link!)</li>



<li><a href="https://www.vitra.com/de-de/office/product/details/id-trim" target="_blank" rel="noreferrer noopener">Moritz’ Bürostuhl</a></li>



<li>BG ETEM: <a href="https://www.bgetem.de/medien-service/grafiken-zur-sicherheit-und-gesundheit-am-arbeitsplatz/gesundheit/ergonomie" target="_blank" rel="noreferrer noopener">Ergonomie</a> / <a href="https://www.bgetem.de/arbeitssicherheit-gesundheitsschutz/themen-von-a-z-1/arbeitsbedingte-gesundheitsgefahren/bildschirmarbeit" target="_blank" rel="noreferrer noopener">Bildschirmarbeit</a></li>



<li>IHK Reutlingen: <a href="https://www.reutlingen.ihk.de/service/ratgeber-das-sollten-sie-wissen/ergonomie-am-schreibtisch/" target="_blank" rel="noreferrer noopener">Ergonomie am Schreibtisch</a></li>
</ul>
</li>



<li>Moritz: &#8222;scrum&#8220;.split(&#8222;&#8220;).reverse().join(&#8222;&#8220;)
<ul>
<li><a href="https://twitter.com/MoritzGiessmann/status/1357312355529539584" target="_blank" rel="noreferrer noopener">Tweet</a></li>



<li><a href="https://de.wikipedia.org/wiki/Scrum" target="_blank" rel="noreferrer noopener">Wikipedia: Scrum</a></li>
</ul>
</li>
</ul>



Property der Woche: clip-path – [00:51:06]



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



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



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



<li><a href="https://caniuse.com/mdn-css_properties_clip-path_path" target="_blank" rel="noreferrer noopener">caniuse path() in clip-path</a></li>



<li><a href="https://bennettfeely.com/clippy/" target="_blank" rel="noreferrer noopener">CSS clip-path maker „Clippy“</a></li>



<li><a href="https://css-tricks.com/animating-with-clip-path/" target="_blank" rel="noreferrer noopener">CSS-Tricks zu clip-path-Animationen</a></li>



<li>Beispiele: <a href="https://jsfiddle.net/acesmndr/sdqv469b/" target="_blank" rel="noreferrer noopener">Floating Action Button</a> / <a href="https://codepen.io/Connum/pen/oNYYOgo" target="_blank" rel="noreferrer noopener">Image Reveal</a> (mit <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noreferrer noopener">IntersectionObserver</a>) </li>
</ul>


<div class="wp-block-image">
<figure class="aligncenter size-large"><img loading="lazy" decoding="async" width="305" height="310" src="https://wowirsindistvorne.show/wp-content/uploads/2021/02/grafik.png" alt="sehr flauschiger Hundewelpen" class="wp-image-661" srcset="https://wowirsindistvorne.show/wp-content/uploads/2021/02/grafik.png 305w, https://wowirsindistvorne.show/wp-content/uploads/2021/02/grafik-295x300.png 295w" sizes="(max-width: 305px) 100vw, 305px" /></figure></div>


Tagesthema: Erinnerungen, Errungenschaften und Erkenntnisse – [01:13:40]



<ul>
<li><a href="https://de.wikipedia.org/wiki/No_More_AOL_CDs" target="_blank" rel="noreferrer noopener">„No more AOL CDs“</a></li>



<li><a href="https://media1.tenor.com/images/57be98e29301d66a64df742bf656733e/tenor.gif?itemid=4565904" target="_blank" rel="noreferrer noopener">„War Flashback Dog“-Meme</a></li>
</ul>



<ol>
<li>Programmierung !== Nullen und Einsen – [01:37:06]
<ul>
<li><a href="http://whatmyfriendsthinkido.net/web-development/" target="_blank" rel="noreferrer noopener">whatmyfriendsthinkido.net/web-development</a></li>



<li><a href="https://en.wikipedia.org/wiki/Nibbles_(video_game)" target="_blank" rel="noreferrer noopener">NIBBLES.BAS</a></li>



<li><a href="https://en.wikipedia.org/wiki/Gorillas_(video_game)" target="_blank" rel="noreferrer noopener">GORILLAS.BAS</a></li>



<li><a href="https://de.wikipedia.org/wiki/QBasic" target="_blank" rel="noreferrer noopener">QBasic</a></li>



<li><a href="https://adarkroom.doublespeakgames.com/" target="_blank" rel="noreferrer noopener">Textadventure „A Dark Room“</a></li>
</ul>
</li>



<li>Internet-Geschwindigkeit, Download-Größen, Speicherplatz – [01:51:15]
<ul>
<li><a href="https://de.wikipedia.org/wiki/Lochkarte" target="_blank" rel="noreferrer noopener">Wikipedia: Lochkarte</a></li>



<li><a href="https://www.computerworld.ch/technik/digitalisierung/entwicklung-festplatte-1311683.html" target="_blank" rel="noreferrer noopener">Die Geschichte der Festplatte</a></li>



<li><a href="https://de.wikipedia.org/wiki/Iomega_Zip" target="_blank" rel="noreferrer noopener">Iomega ZIP</a></li>



<li><a href="https://de.m.wikipedia.org/wiki/Tesa#Tesa_als_Datenspeicher" target="_blank" rel="noreferrer noopener">Wikipedia: Tesa als Datenspeicher</a> („Tesa-ROM“)</li>
</ul>
</li>



<li>Bunte Pixel auf dem Bildschirm – [02:13:44]
<ul>
<li><a href="https://www.youtube.com/watch?v=3BJU2drrtCM">Slowmo guys TV</a></li>



<li><a href="https://www.retrogames.info/" target="_blank" rel="noreferrer noopener">RetroGames e.V.</a></li>



<li><a href="https://de.wikipedia.org/wiki/3dfx_Voodoo_Graphics" target="_blank" rel="noreferrer noopener">3dfx Voodoo Graphics</a></li>



<li><a href="https://www.youtube.com/watch?v=FsaM2zxy6UE" target="_blank" rel="noreferrer noopener">Stunts aka. 4D Sports Driving (Let’s Play)</a></li>



<li><a href="https://de.wikipedia.org/wiki/Vektorbildschirm" target="_blank" rel="noreferrer noopener">Wikipedia: Vektorbildschirm</a></li>
</ul>
</li>



<li>Mausrad, optische Mäuse – [02:33:31]
<ul>
<li><a href="https://amzn.to/3qiOGQq" target="_blank" rel="noreferrer noopener">Logitech G603</a> (Affiliate-Link!)</li>
</ul>
</li>



<li>Vektorgrafiken
<ul>
<li><a href="https://www.amazon.de/-/en/gp/product/B00004TOR1?pf_rd_r=ETQGFPQYCGN99W1RYBFS&amp;pf_rd_p=f6634045-2cd8-4654-8338-b9246a89c6f1&amp;pd_rd_r=6eb28495-1744-4412-b4ca-770278815c1b&amp;pd_rd_w=U3jp1&amp;pd_rd_wg=OvkMW&amp;linkCode=ll1&amp;tag=wwsiv-21&amp;linkId=d66258f7d192c9bb846a498b9b56bb14&amp;language=en_GB&amp;ref_=as_li_ss_tl" target="_blank" rel="noreferrer noopener">Kais Power Goo</a> (Affiliate-Link!)</li>
</ul>
</li>



<li>border-radius, box-shadow, keine Sliding Doors mehr – [02:47:24]</li>



<li>PNGs mit Alphatransparenz im IE6 dank HTC-Datei – [02:52:30]</li>
</ol>



GeilTeil



<ul>
<li>Moritz: Quality Land 2.0 &#8211; <a href="https://amzn.to/3deGVaN" target="_blank" rel="noreferrer noopener">Buch</a> / <a href="https://amzn.to/3jI7rdN" target="_blank" rel="noreferrer noopener">Hörbuch</a> (Affiliate-Links!) – [02:56:55]</li>



<li>Constantin: <a href="https://www.youtube.com/watch?v=zHL9GP_B30E" target="_blank" rel="noreferrer noopener">Vsauce &#8211; „Illusions of Time“ auf YouTube</a> – [03:09:21]</li>
</ul>



Verabschiedung – [03:10:53]

Aufgebrochen, um den Folgenlängenrekord zu brechen, sprechen wir über AOL-CDs, alte und neue (IT-)Technik und unsere verworrenen Programmierer-Wege aus grauer Vorzeit ins Jetzt. Nebenher zeigen wir was clip-path so alles kann und haben neue Hörbuch-Empfehlungen für euch. Eigentlich sollte der DAZN-Praktikant unseren Sendungstitel schreiben, aber wir wurden leider von seinem Wish-Pendant wyld weggeflext. AMK!

Wo wir sind ist vorne.

Themen: AOL-CDs, alte und neue (IT-)Technik und unsere verworrenen Programmierer-Wege aus grauer Vorzeit bis ins Jetzt. Nebenher zeigen wir das clip-path so alles kann und haben neue Hörbuch-Empfehlungen für euch.

7 Technik-Offenbarungen im Wandel der Zeit

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/the-elder-scrolls-der-alte-scrollt/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Auferstanden von den Toten! #WWSIV ist zurück! In unserem Scrolling-Spezial sprechen wir über Scroll-Snapping, overflow-anchor, smoothes Scrolling und Scrollbar-Design, das einen das Fürchten lehrt. Dazu erzählt Moritz welche seine langjährigen Liebslingsapps sind und Constantin berichtet von freshem ViteJS Frontend-Tooling. Ein gelungener Wiedereinstand ohne Risiken.

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



Retro



<ul id="block-4849df91-0566-488e-abd1-d50c6a85aab4">
<li>Moritz: Software, die schon seit Jahren toll ist – [00:02:37]
<ul>
<li><a href="https://www.pocketcasts.com/" target="_blank" rel="noreferrer noopener">Pocket Casts</a></li>



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



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



<li>Constantin: Entwicklung mit Vite – [00:14:23 ]
<ul>
<li><a href="https://vitejs.dev/" target="_blank" rel="noreferrer noopener">vitejs.dev</a></li>



<li><a href="https://twitter.com/youyuxi/status/1354643112640053252" target="_blank" rel="noreferrer noopener">Tweet von Evan You</a> zum Projekt mit 5.800 Modulen</li>



<li><a href="https://www.youtube.com/watch?v=xXrhg26VCSc" target="_blank" rel="noreferrer noopener">Evan Yous Talk &#8222;Vite and VitePress&#8220; </a>von der VueConf Toronto (<a href="https://docs.google.com/presentation/d/1X1hrFw18v67bEniTPpaI_DBulLdkKNFEc_3nVEm95mM/edit#slide=id.p" target="_blank" rel="noreferrer noopener">Slides</a>)</li>



<li><a href="https://caniuse.com/es6-module" target="_blank" rel="noreferrer noopener">ES6 ESM Browser-Support</a></li>



<li><a href="https://jestjs.io/" target="_blank" rel="noreferrer noopener">Jest</a> (der Name war mir entfallen&#8230;)</li>



<li><a href="https://twitter.com/youyuxi/status/1354584410482499585" target="_blank" rel="noreferrer noopener">Tweet von Evan You</a> zum vue-cli-Ersatz</li>



<li><a href="https://cli.vuejs.org/" target="_blank" rel="noreferrer noopener">vue-cli</a></li>
</ul>
</li>



<li>Moritz: Datenschutz-Frühjahrsputz – [00:25:22]
<ul>
<li><a href="https://twitter.com/MoritzGiessmann/status/1347551173092532227" target="_blank" rel="noreferrer noopener">Privacy Tweet</a></li>



<li><a href="https://signal.org/" target="_blank" rel="noreferrer noopener">Signal Messenger</a></li>



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



<li><a href="https://twitter.com/Snowden/status/1347217810368442368" target="_blank" rel="noreferrer noopener">Tweet von Edward Snowden</a></li>



<li><a href="https://www.google.com/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=&amp;ved=2ahUKEwjkjLTFz8PuAhUGjaQKHe-4DGUQFjAAegQIBBAC&amp;url=https%3A%2F%2Fapps.nextcloud.com%2Fapps%2Fdeck&amp;usg=AOvVaw0Ds6CdWRu2HqqCpm9FEF09" target="_blank" rel="noreferrer noopener">Nextcloud Deck</a> </li>
</ul>
</li>



<li>Constantin: <a href="http://music.apple.com/" target="_blank" rel="noreferrer noopener">Apple Music</a> (schon wieder…) – [00:31:44]
<ul>
<li><a href="https://instant.page/">instant.page</a></li>
</ul>
</li>



<li>Moritz: Vodafone Ticketsystem und Wartungsarbeiten – [00:44:08] </li>
</ul>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="800" height="300" src="https://wowirsindistvorne.show/wp-content/uploads/2021/01/Speedtests_machen_ungluecklick.jpg" alt="" class="wp-image-601" srcset="https://wowirsindistvorne.show/wp-content/uploads/2021/01/Speedtests_machen_ungluecklick.jpg 800w, https://wowirsindistvorne.show/wp-content/uploads/2021/01/Speedtests_machen_ungluecklick-300x113.jpg 300w, https://wowirsindistvorne.show/wp-content/uploads/2021/01/Speedtests_machen_ungluecklick-768x288.jpg 768w" sizes="(max-width: 800px) 100vw, 800px" /></figure>



Property der Woche: aspect-ratio – [00:50:17]



<ul>
<li><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></li>



<li><a href="https://codepen.io/MoritzGiessmann/pen/ExgBevp" target="_blank" rel="noreferrer noopener">Demo 1</a> / <a href="https://codepen.io/MoritzGiessmann/pen/ExgBevp" target="_blank" rel="noreferrer noopener">Demo 2</a></li>



<li><a href="https://css-tricks.com/aspect-ratio-boxes/" target="_blank" rel="noreferrer noopener">Alte Tricks</a></li>



<li><a href="https://blog.kulturbanause.de/2020/09/css-aspect-ratio-seitenverhaeltnis/" target="_blank" rel="noreferrer noopener">Artikel &#8222;CSS aspect-ratio&#8220; bei Kulturbanause</a></li>
</ul>



Kein Spam-Spot (Spend-Spot?) – [00:57:48]



<ul>
<li><a href="https://streamelements.com/wwsiv/tip" target="_blank" rel="noreferrer noopener">Produktion unterstützen</a></li>
</ul>



Tagesthema: Scrollen ohne Ende – [00:58:54]



<ul>
<li>1. CSS Scroll Snap – [01:01:07]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-snappoints" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://codepen.io/chriscoyier/full/pMRgwW" target="_blank" rel="noreferrer noopener">Demo horizontal</a> </li>



<li><a href="https://webkit.org/demos/scroll-snap/" target="_blank" rel="noreferrer noopener">Webkit-Demoseite</a></li>
</ul>
</li>



<li>2. Stylebare Scrollbars – [01:05:58 ]
<ul>
<li><a href="https://drafts.csswg.org/css-scrollbars-1/">W3C</a> / <a href="https://caniuse.com/css-scrollbar" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://css-tricks.com/almanac/properties/s/scrollbar/" target="_blank" rel="noreferrer noopener">CSS Tricks</a></li>



<li><a href="https://codepen.io/MoritzGiessmann/pen/RwowQGX" target="_blank" rel="noreferrer noopener">Demo</a></li>
</ul>
</li>



<li>3. overflow-anchor – [01:19:50]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/css-overflow-anchor" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://css-tricks.com/fixing-smooth-scrolling-with-find-on-page/" target="_blank" rel="noreferrer noopener">CSS Tricks</a> / <a href="https://css-tricks.com/almanac/properties/s/scrollbar/" target="_blank" rel="noreferrer noopener">#2</a></li>



<li><a href="https://www.youtube.com/watch?v=xrVN7J_yIG8&amp;feature=emb_logo">YouTube-Video Gegenüberstellung</a></li>



<li><a href="https://codepen.io/chriscoyier/pen/bGbeBdp" target="_blank" rel="noreferrer noopener">Demo</a></li>



<li><a href="https://colinjmiller.medium.com/css-scroll-anchoring-my-experience-8335a72a8719" target="_blank" rel="noreferrer noopener">Konkreter Anwendungsfall</a></li>
</ul>
</li>



<li>(Nachtrag zu Scroll Snap) – [01:27:25]</li>



<li>4. scroll-behavior: smooth – [01:29:00]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=scroll-behavior" target="_blank" rel="noreferrer noopener">caniuse</a></li>



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



<li>Am Ende des Themas – [01:37:49] </li>
</ul>



Das GeilTeil: Netscape im Brexit-Vertrag und unter Windows 10 – [01:41:21]



<ul>
<li><a href="https://assets.publishing.service.gov.uk/government/uploads/system/uploads/attachment_data/file/948119/EU-UK_Trade_and_Cooperation_Agreement_24.12.2020.pdf">Brexit-Vertrag</a> (Seite 921)</li>



<li><a href="https://www.youtube.com/watch?v=KaOzsEawyHg" target="_blank" rel="noreferrer noopener">YouTube-Video Netscape Navigator unter Windows 10</a></li>
</ul>



Die WWSIV-Fibel / Gedankenspiele – [01:56:09]

Auferstanden von den Toten! #WWSIV ist zurück! In unserem Scrolling-Spezial sprechen wir über Scroll-Snapping, overflow-anchor, smoothes Scrolling und Scrollbar-Design, das einen das Fürchten lehrt. Dazu erzählt Moritz welche seine langjährigen Liebslingsapps sind und Constantin berichtet von freshem ViteJS Frontend-Tooling. Ein gelungener Wiedereinstand ohne Risiken.

In unserem Scrolling-Spezial sprechen wir über Scroll-Snapping, overflow-anchor, smoothes Scrolling und Scrollbar-Design, das einen das Fürchten lehrt. Ein gelungener Wiedereinstand ohne Risiken.

The elder scrolls (der Alte scrollt)

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/rueckblick-ausblick-nitpick/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
In der letzten Folge des Jahres resümieren wir über ein Jahr voller neuer JS/ES/CSS Features und schauen in die Glaskugel für 2021. Ob Flexbox-Gap, String.prototype.replaceAll() oder Logical Assignment Operators. Wir haben sie alle! Daneben sprechen wir über die Web Neural Network API und kündigen unsere Weihnachts-Verlosung an. Heute ist nicht alle Tage, wir hör’n uns wieder, keine Frage!

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



Retro



<ul>
<li>Constantin: Quo vadis, Google? – [00:06:02]
<ul>
<li><a href="https://www.heise.de/news/Google-Home-integriert-Apple-Music-4983230.html">Heise: Google Home integriert Apple Music</a></li>



<li><a href="https://www.golem.de/news/verhaltenskodex-google-verabschiedet-sich-von-don-t-be-evil-1805-134479.html" target="_blank" rel="noreferrer noopener">Golem: Google verabschiedet sich von &#8222;Don’t be evil&#8220;</a></li>



<li><a href="https://www.golem.de/news/maschinelles-lernen-google-mitarbeiter-protestieren-gegen-militaerprojekt-maven-1804-133733.html" target="_blank" rel="noreferrer noopener">Golem: Google-Mitarbeiter protestieren gegen Militärprojekt Maven</a></li>
</ul>
</li>
</ul>



<ul>
<li>Moritz: <a href="https://brave.com/" target="_blank" rel="noreferrer noopener">Brave Browser</a> – [00:29:13]</li>



<li>Constantin: Ergebnisse ‘<a href="https://stateofcss.com/" target="_blank" rel="noreferrer noopener">State of Cs</a>’, <a href="https://stateofjs.com/" target="_blank" rel="noreferrer noopener">State of JS 2020</a> – [00:37:04]</li>



<li>Ankündigung: Geschenke!!! <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f381.png" alt="🎁" class="wp-smiley" style="height: 1em; max-height: 1em;" /> – [00:37:53]</li>



<li>Moritz: <a href="https://almanac.httparchive.org/en/2020/" target="_blank" rel="noreferrer noopener">Web Almanac 2020</a> – [00:38:58]</li>
</ul>



Property der Woche: Web Neural Network API (WebNN) – [00:41:58]



<ul>
<li><a href="https://webmachinelearning.github.io/webnn/" target="_blank" rel="noreferrer noopener">Draft Community Group Report</a></li>



<li><a href="https://www.w3.org/2020/Talks/mlws/nh_webnn.pdf" target="_blank" rel="noreferrer noopener">Präsentation</a> von Ningxin Hu</li>



<li><a href="https://github.com/webmachinelearning/webnn-polyfill" target="_blank" rel="noreferrer noopener">webnn-polyfill</a></li>



<li>Beispiele: <a href="https://intel.github.io/webml-polyfill/examples/index.html" target="_blank" rel="noreferrer noopener">Intel</a> / <a href="https://github.com/webmachinelearning/webnn-samples" target="_blank" rel="noreferrer noopener">Github</a></li>
</ul>



Tagesthema: Rückblick und Ausblick &#8211; ES2020/ES2021, CSS &amp; HTML – [00:51:16]



<ul>
<li><a href="https://dev.to/albertomontalesi/everything-new-coming-in-es2021-2l5l?s=09" target="_blank" rel="noreferrer noopener">dev.to: Everything new coming in ES2021</a></li>



<li>String.prototype.replaceAll() &#8211; <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-javascript_builtins_string_replaceall" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>img loading=&#8220;lazy&#8220; &#8211; <a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading#Images_and_iframes" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/loading-lazy-attr" target="_blank" rel="noreferrer noopener">caniuse</a> [<a href="https://wowirsindistvorne.show/ccc-corona-cloud-und-chaos/">Folge 2</a>, <a href="https://wowirsindistvorne.show/season1aftercontent-die-12-reiter-der-webokalypse/">Folge 12</a>]</li>



<li>Logical Assignment Operators &#8211; ||= <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-javascript_operators_logical_or_assignment" target="_blank" rel="noreferrer noopener">caniuse</a>; &amp;&amp;= <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-javascript_operators_logical_and_assignment" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>Flexbox gap-Property &#8211; <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gap" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/flexbox-gap" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>Numeric separators &#8211; <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Numeric_separators" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-javascript_grammar_numeric_separators" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>CSS conic-gradient() &#8211; <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient()" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=conic-gradient" target="_blank" rel="noreferrer noopener">caniuse</a> / <a href="https://codepen.io/Connum/pen/MWjbyNE" target="_blank" rel="noreferrer noopener">CodePen Karomuster-Demo</a></li>



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



<li>Intl API [<a href="https://wowirsindistvorne.show/a11y-i18n-ftw-wtf/" target="_blank" rel="noreferrer noopener">Folge 4</a>]: Intl.ListFormat &#8211; <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ListFormat" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-javascript_builtins_intl_listformat_supportedlocalesof" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>rel=&#8220;noopener&#8220; [<a href="https://wowirsindistvorne.show/bada55-c55-c01025/">Folge 5</a>]</li>
</ul>



GeilTeil: <a href="https://g.co/arts/Mx37outs66GjFfuEA" target="_blank" rel="noreferrer noopener nofollow">Google Experiments – Blob Opera</a> – [01:26:15]



Geschenke!!! <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f381.png" alt="🎁" class="wp-smiley" style="height: 1em; max-height: 1em;" /> – [01:31:00]



Verabschiedung: Weihnachtszeit ist <a href="https://streamelements.com/wwsiv/tip" target="_blank" rel="noreferrer noopener">Spendenzeit</a>! <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f385.png" alt="🎅" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f936.png" alt="🤶" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f384.png" alt="🎄" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f4b0.png" alt="💰" class="wp-smiley" style="height: 1em; max-height: 1em;" /> – [01:36:05]

In der letzten Folge des Jahres resümieren wir über ein Jahr voller neuer JS/ES/CSS Features und schauen in die Glaskugel für 2021. Ob Flexbox-Gap, String.prototype.replaceAll() oder Logical Assignment Operators. Wir haben sie alle!  Daneben sprechen wir über die Web Neural Network API und kündigen unsere Weihnachts-Verlosung an. Heute ist nicht alle Tage, wir hör’n uns wieder, keine Frage!

In der letzten Folge des Jahres resümieren wir über ein Jahr voller neuer JS/ES/CSS Features und schauen in die Glaskugel für 2021. Daneben sprechen wir über die Web Neural Network API und kündigen unsere Weihnachts-Verlosung an.

Rückblick, Ausblick, nitpick

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/48-dinge-die-du-nie-ueber-selbstaendigkeit-wissen-wolltest/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Selbständigkeits-Spezial! Mit unserem Gast Fabian Groß besprechen wir was man als Anfänger über Selbständigkeit wissen sollte: Rechtsformen, was in eine ordentliche Rechnung gehört, Steuern, Stundensätze, Akquise, IHK, Künstersozialkasse und wer am Ende alles noch die Hand aufhält und Geld von einem will. Die Häppchen schmieren sich schließlich nicht von alleine!

Begrüßung: Hörer:innenfeedback – [00:00:53]



Retro



<ul id="block-4849df91-0566-488e-abd1-d50c6a85aab4">
<li>Fabian: Internetstörung Vodafone – [00:04:25]</li>



<li>Moritz: AV-Receiver (again), Moritz im t3n-Magazin – [00:07:18]
<ul>
<li><a href="https://twitter.com/t3n/status/1329055251350102018" target="_blank" rel="noreferrer noopener">t3n-Tweet</a></li>
</ul>
</li>



<li>Constantin: Play Music Zwangsumstellungsfail zu YouTube Music – [00:09:31]
<ul>
<li><a href="https://gcemetery.co/" target="_blank" rel="noreferrer noopener">Google Cemetary</a></li>
</ul>
</li>



<li>Moritz: Unity-Engine – [00:16:54]
<ul>
<li><a href="https://unity.com/" target="_blank" rel="noreferrer noopener">Unity-Engine</a></li>



<li><a href="https://godotengine.org/" target="_blank" rel="noreferrer noopener">Godot-Engine</a></li>
</ul>
</li>



<li>Constantin: iOS Kiosk-Modus / Guided Access – [00:22:36]</li>



<li>Moritz: HTML Sanitizer API / das Web neu erfinden – [00:28:09]
<ul>
<li><a href="https://wicg.github.io/sanitizer-api/" target="_blank" rel="noreferrer noopener">Draft</a></li>



<li><a href="https://workingdraft.de/447/" target="_blank" rel="noreferrer noopener">„Working Draft“-Folge</a></li>



<li><a href="https://twitter.com/brucel/status/1331359683022630912?s=20" target="_blank" rel="noreferrer noopener">Tweet von @brucel auf Twitter</a></li>
</ul>
</li>
</ul>



Property der Woche: animation-delay mit Negativwert – [00:31:22]



<ul>
<li>MDN: <a href="https://developer.mozilla.org/de/docs/Web/CSS/animation" target="_blank" rel="noreferrer noopener">Animation Property</a> / <a href="https://developer.mozilla.org/de/docs/Web/CSS/animation-delay" target="_blank" rel="noreferrer noopener">animation-delay</a></li>



<li><a href="https://codepen.io/MoritzGiessmann/pen/XWWovQP" target="_blank" rel="noreferrer noopener">Codepen Playing Animation Demo</a></li>
</ul>



Spam-Spot: Kratzermörder – [00:36:53]



Tagesthema: Selbstständigkeit und Freelancertum – [00:39:39]



Disclaimer: Wir dürfen und können keine Rechts- oder Steuerberatung leisten, es handelt sich hier ausschließlich um Erfahrungswerte!



<ol>
<li>Künstlersozialkasse – [00:40:58]</li>



<li>Rechnungsstellung und Buchhaltungstools – [00:52:52]
<ul>
<li><a href="https://www.buhl.de/meinbuero/" target="_blank" rel="noreferrer noopener">WISO Mein Büro</a></li>



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



<li><a href="https://lexoffice.de">lexoffice.de</a></li>
</ul>
</li>



<li>Mehrwertsteuer, Umsatzsteuer, Freibeträge und Rücklagen – [01:09:02]</li>



<li>Steuerberater – [01:15:55]</li>



<li>Gesellschaftsformen, Gründungsprozess – [01:24:50]</li>



<li>IHK-Pflichtmitgliedschaft – [01:30:10]</li>



<li>Wer will sonst noch Geld? / Registereinträge / Betrügerei – [01:34:53]</li>



<li>Stundensatz, Verwaltungsaufwand, Produktivanteil, Zeittracking – [01:40:13]
<ul>
<li><a href="https://www.kickstarter.com/projects/timeular/zeio-the-most-simple-time-tracking-solution?lang=de" target="_blank" rel="noreferrer noopener">Zeittracking-Würfel auf Kickstarter</a></li>
</ul>
</li>



<li>Preisverhandlungen, Kundengespräche, Akquise – [01:59:23]</li>



<li>Freelancing vs Selbstständigkeit, Scheinselbständigkeitsfalle – [02:13:30]</li>



<li>Nebenkosten, Auflagen, Haftung – [02:20:21]</li>
</ol>



GeilTeil: The Futur – [02:26:26]



<ul>
<li><a href="https://www.youtube.com/c/thefuturishere/" target="_blank" rel="noreferrer noopener">The Futur</a> auf YouTube</li>



<li><a href="https://www.youtube.com/c/TheFuturAcademy/" target="_blank" rel="noreferrer noopener">The Futur Academy</a></li>



<li><a href="https://www.youtube.com/c/thefuturishere/channels" target="_blank" rel="noreferrer noopener">weitere Kanäle</a></li>
</ul>



Verabschiedung: Bewerten, spenden und weiterempfehlen – [02:29:10]

Selbständigkeits-Spezial! Mit unserem Gast Fabian Groß besprechen wir was man als Anfänger über Selbständigkeit wissen sollte: Rechtsformen, was in eine ordentliche Rechnung gehört, Steuern, Stundensätze, Akquise, IHK, Künstersozialkasse und wer am Ende alles noch die Hand aufhält und Geld von einem will. Die Häppchen schmieren sich schließlich nicht von alleine!

Mit unserem Gast Fabian Groß besprechen was man als Anfänger über Selbständigkeit wissen sollte: Rechtsformen, was in eine ordentliche Rechnung gehört, Steuern, Stundensätze, Akquise, IHK, Künstersozialkasse uvm.!

48 Dinge, die du (nie) über Selbständigkeit wissen wolltest

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/til-ttl-tagged-template-literals/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Befeuert von leckerem HörerInnenbier tauchen wir ein in die Untiefen der (Tagged) Template Literals und erklären, warum sie der derzeit coolste Weg sind, in JavaScript Strings und Variablen miteinander zu verheiraten. Dabei sprechen wir auch über die XSS-Sicherheit von JS-Strings im Allgemeinen. Nebenher lernt ihr, wie man PC-Shortcuts auf dem Mac verwenden kann und mit welchen Hacker-Tools ihr vor euren FreundInnen angeben könnt. Eine runde Sache. So wie Käse.

Begrüßung: Bier-Spende – [00:00:53]



<ul>
<li>Biere vom <a rel="noreferrer noopener" href="http://www.ruesselsheimerbrauhaus.de/" target="_blank">Rüsselsheimer Brauhaus</a>, gespendet von <a rel="noreferrer noopener" href="https://twitter.com/carlosreithofer" target="_blank">@carlosreithofer</a> <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f37b.png" alt="🍻" class="wp-smiley" style="height: 1em; max-height: 1em;" /></li>
</ul>



Retro



<ul id="block-ab59a86e-b749-41e4-95dc-bed2811315bb">
<li>Moritz: – [00:04:58]
<ul>
<li><a href="https://karabiner-elements.pqrs.org/" target="_blank" rel="noreferrer noopener">Karabiner Elements</a>: MacOS Keyboard Customizer</li>



<li>Karabiner <a href="https://ke-complex-modifications.pqrs.org/#pc_shortcuts-list-group" target="_blank" rel="noreferrer noopener">Konfigurationen</a></li>
</ul>
</li>
</ul>



<ul id="block-ab59a86e-b749-41e4-95dc-bed2811315bb">
<li>Constantin: Opentype.js contextual substitution gemerged – [00:12:04]</li>
</ul>



<ul id="block-ab59a86e-b749-41e4-95dc-bed2811315bb">
<li>Moritz: Container Queries in Chromium – [00:14:08]
<ul>
<li><a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/u1AKdrXhPGI/wrJb-unhAgAJ" target="_blank" rel="noreferrer noopener">Ticket</a></li>
</ul>
</li>
</ul>



Property der Woche: navigator.sendBeacon() – [00:17:32]



<ul>
<li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon" target="_blank" rel="noreferrer noopener">sendBeacon</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event" target="_blank" rel="noreferrer noopener">unload Event</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event" target="_blank" rel="noreferrer noopener">visibilitychange Event</a> </li>



<li>caniuse: <a href="https://caniuse.com/beacon">sendBeacon</a> / <a href="https://caniuse.com/?search=visibilitychange" target="_blank" rel="noreferrer noopener">visibilitychange</a></li>



<li><a href="https://bugs.webkit.org/show_bug.cgi?id=188329&amp;s_tact=C43301PW" target="_blank" rel="noreferrer noopener">Webkit-Bug</a></li>
</ul>



Spontan-Live-Spam-Spot: Hartes B(r)ett – [00:25:33]



Tagesthema: (Tagged) Template Literals – [00:27:23]



<ul>
<li>Template Literals a.k.a. Template Strings: <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/template_strings" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/template-literals" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://www.youtube.com/watch?v=MJ7jbQJXF68" target="_blank" rel="noreferrer noopener">hurz()</a></li>



<li><a href="https://codepen.io/Connum/pen/oNLmXRo?editors=0012" target="_blank" rel="noreferrer noopener">CodePen-Demo zu Tag-Argumenten</a></li>



<li>Anwendungsbeispiele (<a href="https://github.com/kay-is/awesome-tagged-templates" target="_blank" rel="noreferrer noopener">umfangreiche Sammlung</a>)
<ul>
<li><a href="https://github.com/styled-components/styled-components" target="_blank" rel="noreferrer noopener">styled-components</a></li>



<li><a href="https://github.com/apollographql/graphql-tag" target="_blank" rel="noreferrer noopener">graphql-tag</a></li>



<li><a href="https://github.com/3846masa/lit-date" target="_blank" rel="noreferrer noopener">lit-date</a></li>



<li><a href="https://www.npmjs.com/package/common-tags" target="_blank" rel="noreferrer noopener">common-tags</a></li>
</ul>
</li>



<li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax" target="_blank" rel="noreferrer noopener">Spread Operator (&#8230;)</a></li>



<li>VS Code Syntax Highlighting in Template Literals
<ul>
<li><a href="https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html https://marketplace.visualstudio.com/items?itemName=bashmish.es6-string-css https://marketplace.visualstudio.com/items?itemName=zjcompt.es6-string-javascript" target="_blank" rel="noreferrer noopener">es6-string-html</a></li>



<li><a href="https://marketplace.visualstudio.com/items?itemName=bashmish.es6-string-css" target="_blank" rel="noreferrer noopener">es6-string-css</a></li>



<li><a href="https://marketplace.visualstudio.com/items?itemName=zjcompt.es6-string-javascript" target="_blank" rel="noreferrer noopener">es6-string-javascript</a></li>
</ul>
</li>



<li>Sicherheit
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Safely_inserting_external_content_into_a_page" target="_blank" rel="noreferrer noopener">safely inserting external content into a page</a></li>



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



GeilTeil: eDEX-UI – [01:03:36]



<ul>
<li><a href="https://github.com/GitSquared/edex-ui" target="_blank" rel="noreferrer noopener">eDEX-UI</a></li>



<li><a href="http://hackertyper.com/" target="_blank" rel="noreferrer noopener">Hackertyper</a></li>
</ul>



Verabschiedung: [Lack gesoffen], Spenden, Weiterempfehlen – [01:14:01]

Befeuert von leckerem HörerInnenbier tauchen wir ein in die Untiefen der (Tagged) Template Literals und erklären, warum sie der derzeit coolste Weg sind, in JavaScript Strings und Variablen miteinander zu verheiraten. Dabei sprechen wir auch über die XSS-Sicherheit von JS-Strings im Allgemeinen. Nebenher lernt ihr, wie man PC-Shortcuts auf dem Mac verwenden kann und mit welchen Hacker-Tools ihr vor euren FreundInnen angeben könnt. Eine runde Sache. So wie Käse.

Gespräch über (Tagged) Template Literals als coolster Weg in JavaScript, Strings und Variablen miteinander zu verheiraten, ohne die XSS-Sicherheit von JS-Strings auszusparen. PC-Shortcuts auf dem Mac, Hacker-Tools zum Angeben. Alles ist dabei!

TIL: TTL (Tagged Template Literals)

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/the-holy-state-of-css/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Willkommen zum offiziellen #WWSIV-Audiokommentar von "The State of CSS"! Hier bleibt keine Wissenslücke verborgen und kein Feature unangetastet. Wir füllen gemeinsam die Umfrage aus, kommentieren, bewerten und entdecken die eine oder andere Perle. 
Neben einem frisch dampfenden Spamspot erläutern wir noch die Tücken von :focus-visible und lassen uns in die WASM-Welt der singenden Münder entführen (aus der es kein Zurück gibt). Ein Heidenspaß für die ganze Familie (ab 18)!

Begrüßung: Dank für die Spenden, Geburtstagsständchen – [00:00:52]



Retro



<ul>
<li>Moritz: Twitter-Glocke drücken, OSC-Protokoll – [00:08:40]
<ul>
<li><a href="https://de.wikipedia.org/wiki/Open_Sound_Control" target="_blank" rel="noreferrer noopener">Open Sound Control</a></li>
</ul>
</li>



<li>Constantin: Opentype.js / OpenType-Spezifikation / (Unit-)Tests – [00:13:26]
<ul>
<li><a href="https://github.com/opentypejs/opentype.js">opentype.js auf GitHub</a></li>



<li><a href="https://docs.microsoft.com/en-us/typography/opentype/spec/" target="_blank" rel="noreferrer noopener">OpenType-Spezifikation</a></li>
</ul>
</li>
</ul>



<ul>
<li>Moritz: AV-Receiver-Odyssee – [00:18:27]</li>



<li>Constantin: Kundenprojekt CoVID-19 Online-Testergebnisabfrage – [00:22:03]</li>
</ul>



Property der Woche: :focus-visible – [00:26:00]



<ul>
<li>MDN: <a href="https://developer.mozilla.org/de/docs/Web/CSS/:-moz-focusring" target="_blank" rel="noreferrer noopener">:-moz-focusring</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible" target="_blank" rel="noreferrer noopener">:focus-visible</a></li>



<li><a href="https://css-tricks.com/almanac/selectors/f/focus-visible/" target="_blank" rel="noreferrer noopener">CSS-tricks</a></li>



<li>Chromium Blog: <a href="https://blog.chromium.org/2020/09/giving-users-and-developers-more.html" target="_blank" rel="noreferrer noopener">Giving users and developers more control over focus</a></li>



<li><a href="https://caniuse.com/?search=focus-visible" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>



Spam-Spot: Datierung – [00:41:37]



<ul>
<li>Hintergrundmusik: „Take Me Now!“ von Nick Chapman aus dem Album „Wakka Chikka Wakka Chikka: Porn Music for the Masses, Volume 1“ Lizenz: <a href="http://creativecommons.org/licenses/by-nc/2.0/" target="_blank" rel="noreferrer noopener">CC BY-NC 2.0</a></li>



<li><a href="https://archive.org/details/netlabels" target="_blank" rel="noreferrer noopener">Netlabels Collection</a> des Internet Archive</li>
</ul>



Tagesthema: State of CSS 2020 – [00:45:04]



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



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



<li>Moritz’ <a href="https://moritzgiessmann.de/epileptomat/" target="_blank" rel="noreferrer noopener">Epileptomat</a></li>



<li>CodePen <a href="https://codepen.io/MoritzGiessmann/pen/bpJLi" target="_blank" rel="noreferrer noopener">Try to print this</a></li>



<li><a href="https://tympanus.net/codrops/" target="_blank" rel="noreferrer noopener">Codrops</a></li>
</ul>



GeilTeil Constantin: Choir auf [adult swim] – [02:04:56]



<ul>
<li><a href="https://www.adultswim.com/etcetera/choir/" target="_blank" rel="noreferrer noopener">Choir Tech-Demo/-Spielerei auf adultswim</a></li>



<li>Korrektur: Cartoon Network, nicht Comedy Central</li>
</ul>



Verabschiedung: – [02:10:01]

Willkommen zum offiziellen #WWSIV-Audiokommentar von "The State of CSS"! Hier bleibt keine Wissenslücke verborgen und kein Feature unangetastet. Wir füllen gemeinsam die Umfrage aus, kommentieren, bewerten und entdecken die eine oder andere Perle. 
Neben einem frisch dampfenden Spamspot erläutern wir noch die Tücken von :focus-visible und lassen uns in die WASM-Welt der singenden Münder entführen (aus der es kein Zurück gibt). Ein Heidenspaß für die ganze Familie (ab 18)!

Willkommen zum offiziellen #WWSIV-Audiokommentar von &quot;The State of CSS&quot;! Wir füllen gemeinsam die Umfrage aus, kommentieren, bewerten und entdecken die eine oder andere Perle. Ein Heidenspaß für die ganze Familie (ab 18)!

Willkommen zum offiziellen #WWSIV-Audiokommentar von &quot;The State of CSS&quot;! Hier bleibt keine Wissenslücke verborgen und kein Feature unangetastet. Wir füllen gemeinsam die Umfrage aus, kommentieren, bewerten und entdecken die eine oder andere Perle. 
Neben einem frisch dampfenden Spamspot erläutern wir noch die Tücken von :focus-visible und lassen uns in die WASM-Welt der singenden Münder entführen (aus der es kein Zurück gibt). Ein Heidenspaß für die ganze Familie (ab 18)!

The Holy State of CSS

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/semantic-htmhell/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
TAGS TAGS TAGS! Moritz hat sich an Spaghetticode verschluctk. Ein Anlass mit euch über semantisches HTML zu reden, frei nach dem Motto: &#x1f3b6; Wieso? Weshalb? Warum? Wer nicht fragt bleibt unedukiert. &#x1f3b5; 
Bonusmaterial: Die 5 hinreißendsten Text-Dekorationen von Constantin (&#x1f525;&#x1f525;&#x1f525;), die erotischsten HTML-Tags (vielleicht gelogen) und ein überaus maßvoller Spam-Spot.

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



Retro



<ul>
<li>Constantin: Follow-up Color Fonts – [00:04:42]
<ul>
<li><a rel="noreferrer noopener" href="https://liebefonts.com/fonts/liebeheide" target="_blank">LiebeHeide</a></li>



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



<li>Moritz: Firefox vs Chrome <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f94a.png" alt="🥊" class="wp-smiley" style="height: 1em; max-height: 1em;" /> – [00:09:15]</li>



<li>Constantin: Vue 3.0, InDesign Bug seit 2009 – [00:12:36]
<ul>
<li><a rel="noreferrer noopener" href="https://t3n.de/news/vue-3-piece-hat-einiges-react-1323687/" target="_blank">Artikel auf t3n.de</a></li>



<li><a rel="noreferrer noopener" href="https://vuejs.de/artikel/vuejs-3-release/" target="_blank">Artikel auf vuejs.de</a></li>



<li><a rel="noreferrer noopener" href="https://madewithvuejs.com/blog/vue-3-roundup" target="_blank">Artikel auf madewithvuejs.com</a></li>



<li><a rel="noreferrer noopener" href="https://twitter.com/GrossConstantin/status/1309523064951111680" target="_blank">Tweet an Adobe-Support</a></li>



<li><a rel="noreferrer noopener" href="https://community.adobe.com/t5/indesign/print-export-book-as-spreads/td-p/1301134?page=1" target="_blank">Issue in Adobe Support Community</a> (2009)</li>



<li><a rel="noreferrer noopener" href="https://indesign.uservoice.com/forums/601180-adobe-indesign-bugs/suggestions/36552196--even-and-odd-pages-from-consecutive-files-in-a" target="_blank">Uservoice Issue #1</a></li>



<li><a rel="noreferrer noopener" href="https://indesign.uservoice.com/forums/601021-adobe-indesign-feature-requests/suggestions/38069860-empower-indesign-books-to-export-pdf-s-that-disp" target="_blank">Uservoice Issue #2</a></li>
</ul>
</li>



<li>Moritz: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-Aktion (Podcast-exklusiv) <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f929.png" alt="🤩" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f984.png" alt="🦄" class="wp-smiley" style="height: 1em; max-height: 1em;" /> – [00:18:39]</li>



<li>Constantin: wp-shortcode-tree, OpenSource, Hacktoberfest – [00:22:09]
<ul>
<li><a rel="noreferrer noopener" href="https://github.com/unematiii/wp-shortcode-tree" target="_blank">wp-shortcode-tree GitHub repository</a></li>



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



Property der Woche: Font-Spezial Teil II – [00:28:23]



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



<li>text-decoration-style: wavy – <a rel="noreferrer noopener" href="https://caniuse.com/mdn-css_properties_text-decoration-style_wavy" target="_blank">caniuse</a></li>



<li>text-decoration-color: – <a rel="noreferrer noopener" href="https://caniuse.com/mdn-css_properties_text-decoration-color" target="_blank">caniuse</a></li>



<li>text-decoration-thickness: – <a rel="noreferrer noopener" href="https://caniuse.com/mdn-css_properties_text-decoration-thickness" target="_blank">caniuse</a> (aktuell nur Firefox und Safari!)</li>



<li>text-decoration-skip-ink: – <a rel="noreferrer noopener" href="https://caniuse.com/mdn-css_properties_text-decoration-skip-ink" target="_blank">caniuse</a></li>



<li>text-underline-offset: – <a rel="noreferrer noopener" href="https://caniuse.com/mdn-css_properties_text-underline-offset" target="_blank">caniuse</a> (aktuell nur Firefox und Safari!)</li>



<li><a rel="noreferrer noopener" href="https://twitter.com/b0rk/status/1286314250529640449" target="_blank">Tweet von Julia Evans: Cheatsheet zu CSS-Einheiten</a></li>



<li>ch-Unit: <a rel="noreferrer noopener" href="https://caniuse.com/#feat=ch-unit" target="_blank">caniuse</a></li>



<li>Schreibmaschinen-Effekt mit ch und steps():
<ul>
<li><a rel="noreferrer noopener" href="https://codepen.io/denic/pen/GRoOxbM" target="_blank">CodePen-Demo</a></li>



<li><a rel="noreferrer noopener" href="https://lea.verou.me/2011/09/pure-css3-typing-animation-with-steps/" target="_blank">Artikel von Lea Verou</a></li>



<li><a rel="noreferrer noopener" href="https://designmodo.com/steps-css-animations/" target="_blank">Artikel zu steps()</a></li>



<li><a rel="noreferrer noopener" href="https://designmodo.com/demo/stepscss/" target="_blank">steps()-Demos</a></li>
</ul>
</li>
</ul>



Spam-Spot: LED-Maßband – [00:47:45]



Spontan-GeilTeil: <a href="https://www.cameo.com/" target="_blank" rel="noreferrer noopener">cameo.com</a> – [00:49:24]



Tagesthema: Semantisches HTML <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f47f.png" alt="👿" class="wp-smiley" style="height: 1em; max-height: 1em;" /> – [00:53:21]



<ul>
<li>Wiktionary: <a rel="noreferrer noopener" href="https://en.wiktionary.org/wiki/divitis" target="_blank">&#8222;divitis&#8220;</a></li>



<li><a rel="noreferrer noopener" href="https://www.duden.de/rechtschreibung/Semantik" target="_blank">Duden-Definition &#8222;Semantik&#8220;</a></li>



<li><a href="https://twitter.com/MoritzGiessmann/status/1314940977598132224" target="_blank" rel="noreferrer noopener">Moritz’ Twitter-Thread</a></li>



<li><a rel="noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">Alle HTML-Elemente</a></li>



<li>CodePen: <a rel="noreferrer noopener" href="https://codepen.io/MoritzGiessmann/pen/wvWwZeW" target="_blank">semantische Kommentare</a> / <a rel="noreferrer noopener" href="https://codepen.io/MoritzGiessmann/pen/oNLvOgQ" target="_blank">Sectioning Beispiel</a></li>



<li><a rel="noreferrer noopener" href="http://microformats.org/" target="_blank">Microformats</a></li>



<li><a rel="noreferrer noopener" href="https://www.w3.org/TR/microdata/" target="_blank">Microdata</a> / <a rel="noreferrer noopener" href="https://search.google.com/structured-data/testing-tool/u/0/" target="_blank">Google Testtool für strukturierte Daten</a></li>



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



<li>Semantic Quiz: <a rel="noreferrer noopener" href="https://codepen.io/websanity/pen/lzJop" target="_blank">#1</a> / <a rel="noreferrer noopener" href="https://codepen.io/lsirivong/pen/ekBxI" target="_blank">#2</a> / <a rel="noreferrer noopener" href="https://codepen.io/pankajparashar/pen/bFhyf" target="_blank">#3</a></li>



<li><a rel="noreferrer noopener" href="https://codepen.io/collection/XLqxzv" target="_blank">Semantic HTML CodePen Collection</a></li>



<li><a href="https://moritzgiessmann.de/accessibility-cheatsheet/" target="_blank" rel="noreferrer noopener">Moritz’ Accessibility Cheatsheet</a></li>



<li><a rel="noreferrer noopener" href="https://www.bogotobogo.com/HTML5/HTML5_Tutorial_Semantic_Elements.php#headerExample" target="_blank">Artikel zu &lt;hgroup&gt;</a></li>



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



GeilTeil Constantin: Scammer-Abwehr mit <a rel="noreferrer noopener" href="https://www.youtube.com/c/JimBrowning" target="_blank">Jim Browning</a> – [01:46:45]



<ul>
<li><a rel="noreferrer noopener" href="https://www.youtube.com/watch?v=hSP_0iLzTgk&amp;feature=youtu.be" target="_blank">&#8222;Showing a scammer his REAL details&#8220;</a></li>
</ul>



GeilTeil Moritz: <a href="https://www.htmhell.dev" target="_blank" rel="noreferrer noopener">htmhell.dev</a> – [01:57:27]



Verabschiedung: Feedback!!!!11einself – [02:01:56]

TAGS TAGS TAGS! Moritz hat sich an Spaghetticode verschluctk. Ein Anlass mit euch über semantisches HTML zu reden, frei nach dem Motto: 🎶 Wieso? Weshalb? Warum? Wer nicht fragt bleibt unedukiert. 🎵
Bonusmaterial: Die 5 hinreißendsten Text-Dekorationen von Constantin (🔥🔥🔥), die erotischsten HTML-Tags (vielleicht gelogen) und ein überaus maßvoller Spam-Spot.

TAGS TAGS TAGS! Moritz hat sich an Spaghetticode verschluctk. Ein Anlass euch mal die Welt der gehaltvollen HTML-Tags nahezulegen.
Bonusmaterial: Die 5 hinreißendsten Text-Dekorationen von Constantin und ein überaus maßvoller Spam-Spot.

TAGS TAGS TAGS! Moritz hat sich an Spaghetticode verschluctk. Ein Anlass mit euch über semantisches HTML zu reden, frei nach dem Motto: 🎶 Wieso? Weshalb? Warum? Wer nicht fragt bleibt unedukiert. 🎵
Bonusmaterial: Die 5 hinreißendsten Text-Dekorationen von Constantin (🔥🔥🔥), die erotischsten HTML-Tags (vielleicht gelogen) und ein überaus maßvoller Spam-Spot.

Semantic HTMHELL

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/webtypografie-mit-gerrit-van-aaken/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Bäm! Zurück aus der Sommerpause begrüßen wir mit Gerrit van Aaken unseren ersten echten #WWSIV-Gast! Begebt euch mit uns auf eine Achterbahnfahrt durch die Typografie im Web, von PHP-Image-Replacement über sIFR und cufón bis hin zu @font-face und variablen Fonts. Nebenher sprechen wir über unicode-range, diverse Font-Features, Mate, Fahrräder und ihr werdet Zeuge unserer ersten Live-Podcast-Spende. Wie immer getreu unserem Motto: alles neu macht der September!

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



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



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



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



 Retro Gerrit: BEM (block element modifier) – [00:12:48]



<ul>
<li>Retro Moritz: Spenden, SpamSpot-Spende-Twitter-Block, Sticker – [00:15:59]</li>



<li><a href="https://streamelements.com/wwsiv/tip" target="_blank" rel="noreferrer noopener">Spendier ein Bier!</a></li>
</ul>



Nachtrag Gerrit: Club Mate Post, dev-Domain – [00:19:08]



<ul>
<li><a href="https://praegnanz.de/weblog/beobachtungen-auf-der-republica08" target="_blank" rel="noreferrer noopener">Gerrits Club Mate Post</a></li>



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



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



Retro Constantin: TV legt Internet lahm, pdfparser PHP library – [00:20:25]



<ul>
<li><a href="https://www.golem.de/news/openreach-alter-fernseher-stoert-adsl-fuer-ein-ganzes-dorf-2009-151034.html" target="_blank" rel="noreferrer noopener">„Alter Fernseher stört ADSL für ein ganzes Dorf“</a></li>



<li>PDF-Spezifikation: <a href="https://www.adobe.com/content/dam/acom/en/devnet/pdf/pdfs/pdf_reference_archives/PDFReference.pdf" target="_blank" rel="noreferrer noopener">1.4</a> / <a href="https://www.adobe.com/content/dam/acom/en/devnet/pdf/pdfs/PDF32000_2008.pdf" target="_blank" rel="noreferrer noopener">1.7</a></li>



<li><a href="https://github.com/smalot/pdfparser" target="_blank" rel="noreferrer noopener">smalot/pdfparser</a> / <a href="https://www.pdfparser.org/" target="_blank" rel="noreferrer noopener">https://www.pdfparser.org</a></li>
</ul>



Property der Woche: Font-Spezial – [00:25:22]



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



<li><a href="https://jrgraphix.net/research/unicode_blocks.php" target="_blank" rel="noreferrer noopener">https://jrgraphix.net/research/unicode_blocks.php</a></li>



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



<li>Beispiel – Icon in input gelöst mit unicode-range: <a href="https://carsharing-deutschland.de" target="_blank" rel="noreferrer noopener">https://carsharing-deutschland.de</a></li>



<li>font-feature-settings: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=font-feature-settings" target="_blank" rel="noreferrer noopener">caniuse</a> / <a href="https://css-tricks.com/almanac/properties/f/font-feature-settings/" target="_blank" rel="noreferrer noopener">css-tricks</a></li>



<li>font-variant: <a href="https://caniuse.com/mdn-css_properties_font-variant" target="_blank" rel="noreferrer noopener">caniuse</a></li>



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



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



Tagesthema: Webtypografie



<ol>
<li>Geschichte der Webtypografie – [00:41:35]
<ul>
<li><a rel="noreferrer noopener" href="https://www.fontsquirrel.com/" target="_blank">https://www.fontsquirrel.com/</a></li>
</ul>
</li>



<li>Herausforderungen der Webtypografie heute – [00:56:29]</li>



<li>Variable fonts – [01:00:24]
<ul>
<li><a rel="noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide" target="_blank">MDN</a> / <a rel="noreferrer noopener" href="https://caniuse.com/#feat=variable-fonts" target="_blank">caniuse</a></li>



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



<li>Inter variable font Demos: <a rel="noreferrer noopener" href="https://rsms.me/inter/" target="_blank">https://rsms.me/inter/</a></li>



<li><a rel="noreferrer noopener" href="https://codepen.io/mandymichael/pen/oNxYrPz" target="_blank">Jello-Demo</a> von <a rel="noreferrer noopener" href="https://twitter.com/Mandy_Kerr" target="_blank">Mandy Michael</a></li>
</ul>
</li>



<li>Lizenzierungsmodelle – [01:12:56]
<ul>
<li><a rel="noreferrer noopener" href="https://twitter.com/GrossConstantin/status/1285860619892281345" target="_blank">Twitter-Konversation mit Gerrit</a></li>



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



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



<li>Fragen an Gerrit: Lieblingsschrift? Häufige Fehler? – [01:22:23]</li>
</ol>



GeilTeil



<ul>
<li>Gerrit: <a rel="noreferrer noopener" href="https://www.vanmoof.com" target="_blank">vanMoof E-Bike</a> – [01:33:08]</li>



<li>Moritz: Color Font <a rel="noreferrer noopener" href="https://liebefonts.com/fonts/liebeheide" target="_blank">LiebeHeide</a> – [01:41:17]</li>



<li>Constantin: <a rel="noreferrer noopener" href="https://www.fontself.com/" target="_blank">Fontself</a> Plugin für Illustrator – [01:44:46]</li>
</ul>



Verabschiedung – [01:46:43]

Bäm! Zurück aus der Sommerpause begrüßen wir mit Gerrit van Aaken unseren ersten echten #WWSIV-Gast! Begebt euch mit uns auf eine Achterbahnfahrt durch die Typografie im Web, von PHP-Image-Replacement über sIFR und cufón bis hin zu @font-face und variablen Fonts. Nebenher sprechen wir über unicode-range, diverse Font-Features, Mate, Fahrräder und ihr werdet Zeuge unserer ersten Live-Podcast-Spende. Wie immer getreu unserem Motto: alles neu macht der September!

Begebt euch mit uns auf eine Achterbahnfahrt durch die Typografie im Web, von PHP-Image-Replacement über sIFR und cufón bis hin zu @font-face und variablen Fonts. Nebenher sprechen wir über unicode-range, diverse Font-Features, Mate und Fahrräder.

Webtypografie mit Gerrit van Aaken

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/special-gekommen-um-zu-bleiben/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Aus dem Versuch, ein kurzes Lebenszeichen aus der Sommerpause abzusetzen, wurde in gewohnter WWSIV-Manier mal eben eine halbe Stunde. Vollgestopft mit (exklusiven!!11) Tech-News, Blödeleien und eigens kreiertem Biermischgetränk verraten wir euch außerdem, auf was ihr euch in der ersten Folge von Staffel 2 freuen könnt. DISCLAIMER: Dies ist keine richtige Folge! Zwinker-Smiley.

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



BiMa &amp; GLUMP – [00:01:08]



<ul>
<li><a href="http://www.alkoholcola.de/" target="_blank" rel="noreferrer noopener nofollow">http://www.alkoholcola.de/</a></li>
</ul>



Ein Arm namens Howard – [00:03:11]



<ul>
<li><a href="https://www.thomann.de/de/km_23860.htm?partner_id=86018">K&amp;M 23860 BK Tisch-Mikrofonarm</a></li>
</ul>



Entlasswelle bei Mozilla, Zukunft von MDN? – [00:04:29]



Chromium issue status updates zu :is() und :where() – [00:10:07]



<ul>
<li><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=808904#c15" target="_blank" rel="noreferrer noopener">issue zu :where()</a></li>



<li><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=568705#c27" target="_blank" rel="noreferrer noopener">issue zu :is()</a></li>
</ul>



Fortsetzung Web-Technik-Docs: WebPlatform – [00:11:04]



<ul>
<li><a href="https://webplatform.github.io/">https://webplatform.github.io/</a></li>
</ul>



Korrektur: Shadow Of The Tomb Raider – [00:13:05]



Accessibility Cheatsheet auf Norwegisch – [00:15:05]



<ul>
<li><a href="https://moritzgiessmann.de/accessibility-cheatsheet/" target="_blank" rel="noreferrer noopener">Das Original auf Englisch</a></li>



<li><a href="https://uu.difi.no/">https://uu.difi.no/</a></li>
</ul>



WWSIV Mystery: Moritz ist etwas großem auf der Spur (evtl.) – [00:17:13]



Ausblick auf die zweite Staffel – [00:17:13]



Knoff-Hoff mit Moritz: Remote-Autogramm-Stift – [00:24:19]



Verspäteter Disclaimer: Dies ist keine richtige Folge! – [00:25:49]

Aus dem Versuch, ein kurzes Lebenszeichen aus der Sommerpause abzusetzen, wurde in gewohnter WWSIV-Manier mal eben eine halbe Stunde. Vollgestopft mit (exklusiven!!11) Tech-News, Blödeleien und eigens kreiertem Biermischgetränk verraten wir euch außerdem, auf was ihr euch in der ersten Folge von Staffel 2 freuen könnt. DISCLAIMER: Dies ist keine richtige Folge! Zwinker-Smiley.

Wir melden uns mit einem (kurzen?) Lebenszeichen aus der Sommerpause und verraten euch schon ein bisschen, auf was ihr euch in der ersten Folge von Staffel 2 freuen könnt.

Special: Gekommen um zu bleiben!

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/season1aftercontent-die-12-reiter-der-webokalypse/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Alles hat ein Ende nur #WWSIV hat viele! Im Finale der ersten Staffel schauen wir zurück auf ein halbes Jahr Podcast, zu welchen der Themen es neue Entwicklungen gibt und was sich seit Folge 0 verändert hat. Daneben berichtet Constantin von seinen ersten Erfahrungen mit Rust und wir schauen in die Browser-Feature-Glaskugel für die kommenden Releases. Ende September kommen wir zurück mit Staffel 2, Freudentränen und Lachsalven. Bis dahin schickt ihr uns eure Lieblingsbiere, bleibt uns gewogen und empfehlt uns weiter! Auf bald!

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



<ul>
<li><a href="https://www.treverer.com/2016/07/ikea-bier-kroenleins/" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Review zum Möbelhaus-Bier auf treverer.com</a></li>
</ul>



Retro Constantin – [00:09:57]



<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://doc.rust-lang.org/book/" target="_blank" rel="noreferrer noopener">The Rust Programming Language</a></li>



<li>pdfreader: <a aria-label="undefined (opens in a new tab)" href="https://www.npmjs.com/package/pdfreader" target="_blank" rel="noreferrer noopener">npm</a> / <a aria-label="undefined (opens in a new tab)" href="https://github.com/adrienjoly/npm-pdfreader" target="_blank" rel="noreferrer noopener">github</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://developers.lexoffice.io/docs" target="_blank" rel="noreferrer noopener nofollow">Lexoffice Public API</a> </li>
</ul>



Retro Moritz – [00:25:37]



<ul>
<li>stylelint: <a aria-label="undefined (opens in a new tab)" href="https://www.npmjs.com/package/stylelint" target="_blank" rel="noreferrer noopener">npm</a> / <a href="https://github.com/stylelint/stylelint" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">github</a></li>



<li>terser: <a href="https://www.npmjs.com/package/terser" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">npm</a> / <a href="https://github.com/terser/terser" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">github</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://www.javascripttutorial.net/es6/octal-and-binary-literals/" target="_blank" rel="noreferrer noopener">Binary literals</a></li>
</ul>



Die Property der Woche – [00:32:08]



<ul>
<li>&#8222;gap&#8220; Properties für flexbox: <a aria-label="undefined (opens in a new tab)" href="https://caniuse.com/#feat=flexbox-gap" target="_blank" rel="noreferrer noopener">caniuse</a> / <a aria-label="undefined (opens in a new tab)" href="https://gist.github.com/OliverJAsh/7f29d0fa1d35216ec681d2949c3fe8b7" target="_blank" rel="noreferrer noopener">Gist mit Workaround</a></li>



<li>MDN: <a aria-label="undefined (opens in a new tab)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/revert" target="_blank" rel="noreferrer noopener">revert</a> / <a aria-label="undefined (opens in a new tab)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/unset" target="_blank" rel="noreferrer noopener">unset</a> / <a aria-label="undefined (opens in a new tab)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/initial" target="_blank" rel="noreferrer noopener">initial</a> / <a aria-label="undefined (opens in a new tab)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/all" target="_blank" rel="noreferrer noopener">all:</a></li>
</ul>



Spam-Spot: Schwitzhitze – [00:57:40]



Tagesthema – [00:59:28] 



<ul>
<li>Implementation tickets
<ul>
<li>loading=”lazy” für iframes: <a aria-label="undefined (opens in a new tab)" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1622090" target="_blank" rel="noreferrer noopener">Firefox</a> / <a aria-label="undefined (opens in a new tab)" href="https://bugs.webkit.org/show_bug.cgi?id=196698" target="_blank" rel="noreferrer noopener">Safari</a></li>



<li>LCH-Farben in CSS: <a aria-label="undefined (opens in a new tab)" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1026287" target="_blank" rel="noreferrer noopener">Chromium</a> / <a aria-label="undefined (opens in a new tab)" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1352757" target="_blank" rel="noreferrer noopener">Firefox</a> / <a aria-label="undefined (opens in a new tab)" href="https://bugs.webkit.org/show_bug.cgi?id=205675" target="_blank" rel="noreferrer noopener">Safari</a></li>
</ul>
</li>



<li><a aria-label="undefined (opens in a new tab)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/color-gamut" target="_blank" rel="noreferrer noopener">@media ( color-gamut: &#8230; ) auf MDN</a></li>



<li><a href="https://www.filamentgroup.com/lab/html-includes/" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">&#8222;HTML Includes That Work Today&#8220;</a></li>



<li><a href="https://ishoudinireadyyet.com/">https://ishoudinireadyyet.com/</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://laragon.org/" target="_blank" rel="noreferrer noopener">https://laragon.org/</a></li>
</ul>



GeilTeil – [01:54:23]



<ul>
<li><a href="https://audiomass.co/" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">https://audiomass.co/</a></li>
</ul>



Verabschiedung – [01:58:43]

Alles hat ein Ende nur #WWSIV hat viele! Im Finale der ersten Staffel schauen wir zurück auf ein halbes Jahr Podcast, zu welchen der Themen es neue Entwicklungen gibt und was sich seit Folge 0 verändert hat. Daneben berichtet Constantin von seinen ersten Erfahrungen mit Rust und wir schauen in die Browser-Feature-Glaskugel für die kommenden Releases. Ende September kommen wir zurück mit Staffel 2, Freudentränen und Lachsalven. Bis dahin schickt ihr uns eure Lieblingsbiere, bleibt uns gewogen und empfehlt uns weiter! Auf bald!

Alles hat ein Ende nur #WWSIV hat viele! Im Finale der ersten Staffel schauen wir zurück auf ein halbes Jahr Podcast, zu welchen der Themen es neue Entwicklungen gibt und was sich seit Folge 0 verändert hat.

#season1::after{content: "Die 12 Reiter der Webokalypse"}

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/jaeger-der-verlorenen-css-features-kapitel-ii/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Container Queries, Background-Opacity, Multiple Pseudo Elements, der Wahnsinn nimmt kein Ende! Wir werfen sechs weitere CSS-Schnipsel in den Wunschbrunnen, ranten über ISPs, spielen mit mask-image und lassen euch an den Merkwürdigkeiten von Ebay-Kleinanzeigen-Dialogen teilhaben. Das erste Sequel das besser ist als das Original. Versprochen.

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



Retro gemeinsam – [00:08:52]



<ul>
<li><a href="https://twitter.com/wwsiv/status/1281653415039434752" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Tweet zur Sendungsverschiebung</a></li>
</ul>



Retro Moritz – [00:24:50]



<ul>
<li><a aria-label="undefined (opens in a new tab)" href="http://technikwuerze.de/" target="_blank" rel="noreferrer noopener">Technikwürze Podcast</a> / <a aria-label="undefined (opens in a new tab)" href="https://twitter.com/technikwuerze/status/1283419169195786241" target="_blank" rel="noreferrer noopener">Ankündigungs-Tweet</a></li>



<li><a href="https://archiveprogram.github.com/" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener nofollow">GitHub Archive Program</a></li>
</ul>



Retro Constantin – [00:32:05]



<ul>
<li>48design/phmiley: <a aria-label="undefined (opens in a new tab)" href="https://packagist.org/packages/48design/phmiley" target="_blank" rel="noreferrer noopener">Packagist</a> / <a aria-label="undefined (opens in a new tab)" href="https://github.com/48design/phmiley" target="_blank" rel="noreferrer noopener">GitHub</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://gist.github.com/rmoriz/5296881" target="_blank" rel="noreferrer noopener">Gist mit Liste von SaaS-Anbietern für Continuous Integration</a> / <a aria-label="undefined (opens in a new tab)" href="https://github.com/features/actions" target="_blank" rel="noreferrer noopener">GitHub Actions</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://fontforge.org/" target="_blank" rel="noreferrer noopener nofollow">FontForge</a> (<a aria-label="undefined (opens in a new tab)" href="https://github.com/fontforge/fontforge" target="_blank" rel="noreferrer noopener nofollow">auf GitHub</a>)</li>



<li><a href="https://ansuz.sooke.bc.ca/entry/131" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Matthew Skala: &#8222;The Terrible Secret of OpenType Glyph Substitution&#8220;</a></li>
</ul>



Die Property der Woche – [00:47:20]



<ul>
<li>mask-image: <a aria-label="undefined (opens in a new tab)" href="https://codepen.io/MoritzGiessmann/pen/rNxdYvJ" target="_blank" rel="noreferrer noopener">Demo</a> / <a aria-label="undefined (opens in a new tab)" href="https://caniuse.com/#feat=mdn-css_properties_mask-image" target="_blank" rel="noreferrer noopener">caniuse</a> / <a aria-label="undefined (opens in a new tab)" href="https://drafts.fxtf.org/css-masking-1/#the-mask-image" target="_blank" rel="noreferrer noopener">Spec</a> / <a href="https://www.mediaevent.de/css-mask-image-bilder-maskieren-freistellen/" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Beispiele</a></li>
</ul>



Sp@m-M@il für dich (live): Kleinanzeigen – [00:53:11]



Tagesthema – [00:59:02] 



<ul>
<li>1. Container Queries – [00:59:44]</li>



<li>2. background-opacity – [01:06:39]
<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://caniuse.com/#feat=object-fit" target="_blank" rel="noreferrer noopener">caniuse object-fit/object-position</a></li>



<li>object-fit: <a aria-label="undefined (opens in a new tab)" href="https://css-tricks.com/almanac/properties/o/object-fit/" target="_blank" rel="noreferrer noopener">css-tricks</a> / <a aria-label="undefined (opens in a new tab)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit" target="_blank" rel="noreferrer noopener">MDN</a></li>



<li>object-position: <a aria-label="undefined (opens in a new tab)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/object-position" target="_blank" rel="noreferrer noopener">MDN</a></li>
</ul>
</li>



<li>3. Multiple pseudo elements – [01:10:36]</li>



<li>4. Previous sibling selector – [01:13:04]
<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://caniuse.com/#feat=css-has" target="_blank" rel="noreferrer noopener">caniuse :has()</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://developer.microsoft.com/en-us/microsoft-edge/status/" target="_blank" rel="noreferrer noopener nofollow">Microsoft Edge Platform Status</a></li>
</ul>
</li>



<li>5. text-size: fit-box – [01:19:50]
<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://css-tricks.com/fitting-text-to-a-container/" target="_blank" rel="noreferrer noopener">css-tricks: &#8222;Fitting Text to a&nbsp;Container&#8220;</a></li>
</ul>
</li>



<li>6. viewport hooks / scroll hooks – [01:22:54]</li>
</ul>



GeilTeil Moritz – [01:32:32]



<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://www.youtube.com/watch?v=aEb5gNsmGJ8" target="_blank" rel="noreferrer noopener">Kary Perry &#8211; Never Really Over auf YouTube</a></li>



<li>Zedd </li>
</ul>



GeilTeil Constantin – [01:32:32]



<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://css-art.com/" target="_blank" rel="noreferrer noopener">css-art.com</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://a.singlediv.com/" target="_blank" rel="noreferrer noopener">Lynn Fisher: A Single Div</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://codepen.io/Connum/pen/LYGXWaQ?editors=1100" target="_blank" rel="noreferrer noopener">Pure CSS Baby Yoda</a> CodePen</li>



<li><a href="https://codepen.io/MoritzGiessmann/pen/wayZrm" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Rock Paper Scissors Lizard Spock</a> CodePen</li>
</ul>



Verabschiedung – [01:46:24]

Container Queries, Background-Opacity, Multiple Pseudo Elements, der Wahnsinn nimmt kein Ende! Wir werfen sechs weitere CSS-Schnipsel in den Wunschbrunnen, ranten über ISPs, spielen mit mask-image und lassen euch an den Merkwürdigkeiten von Ebay-Kleinanzeigen-Dialogen teilhaben. Das erste Sequel das besser ist als das Original. Versprochen.

Container Queries, Background-Opacity, Multiple Pseudo Elements, der Wahnsinn nimmt kein Ende! Wir werfen sechs weitere CSS-Schnipsel in den Wunschbrunnen und ranten über ISPs.

Jäger der verlorenen CSS-Features – Kapitel II

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/jaeger-der-verlorenen-css-features-kapitel-i/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Schon mal die am höchsten gewertete Antwort zu einer Frage auf Stack Overflow gelesen und gedacht: geht das nicht in GEIL? Vielleicht mit CSS ohne JS-Polyfill? Wieso hat das noch keiner standardisiert? Wir spielen „CSS-Wünsch-dir-was“ und starten eine Liste der Most-Wanted-CSS-Features 2020 (Bindestriche-für-alle!-!) Passend dazu stellt Constantin die noch dampfend frischen :is()- und :where()-Pseudoklassen vor und Moritz enthüllt seine heimliche Liebe zu Klett-Kabelbinder. Eine Serie die fortgesetzt werden wird. Und Futur II ohne Reue.

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



Retro Constantin – [00:03:31]



<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://packagist.org/packages/48design/phmiley#" target="_blank" rel="noreferrer noopener">48design/phmiley</a></li>
</ul>



Retro Moritz – [00:08:37]



<ul>
<li><a href="https://de.wikipedia.org/wiki/R%C3%B6mische_Zahlschrift" target="_blank" rel="noreferrer noopener">Römische Zahlschrift (Wikipedia)</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://html.spec.whatwg.org/#the-ol-element" target="_blank" rel="noreferrer noopener">&lt;ol&gt;-Element Specs</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://gist.github.com/140bytes/962807/forks" target="_blank" rel="noreferrer noopener">140bytes Archiv</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://v5.getbootstrap.com/" target="_blank" rel="noreferrer noopener">Bootstrap v5</a></li>
</ul>



Die Property der Woche – [00:14:35]



<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:is" target="_blank" rel="noreferrer noopener">MDN :is()</a> / <a aria-label="undefined (opens in a new tab)" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:where" target="_blank" rel="noreferrer noopener">MDN :where()</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://webplatform.news/issues/2020-06-04" target="_blank" rel="noreferrer noopener">„CSS :is() and :where() are coming to browsers“</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://webkit.org/blog/10580/release-notes-for-safari-technology-preview-106/" target="_blank" rel="noreferrer noopener">Safari Tech Preview 106 Release Notes</a></li>



<li>Chrome Bug-Tickets: <a aria-label="undefined (opens in a new tab)" href="https://bugs.chromium.org/p/chromium/issues/detail?id=568705" target="_blank" rel="noreferrer noopener">#568705</a> / <a aria-label="undefined (opens in a new tab)" href="https://bugs.chromium.org/p/chromium/issues/detail?id=808904" target="_blank" rel="noreferrer noopener">#808904</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://twitter.com/stefanjudis/status/1264628338397777921" target="_blank" rel="noreferrer noopener">Video zur Spezifizität von Stefan Judis auf Twitter</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://hacks.mozilla.org/2020/06/a-new-regexp-engine-in-spidermonkey/" target="_blank" rel="noreferrer noopener">Neue RegEx-Engine in Spidermonkey</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/78" target="_blank" aria-label="undefined (opens in a new tab)" rel="noreferrer noopener">Firefox 78 Release Notes</a></li>
</ul>



Spam-Spot: Info-Piraten – [00:24:12] 



Tagesthema – [00:28:38] 



<ul>
<li>1. Parent-Selektor, parentsUntil(), :has() – [00:31:22]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has" target="_blank" rel="noreferrer noopener">MDN :has()</a> / <a aria-label="undefined (opens in a new tab)" href="https://caniuse.com/#search=has()" target="_blank" rel="noreferrer noopener">caniuse :has()</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://api.jquery.com/parentsUntil/" target="_blank" rel="noreferrer noopener">jQuerys parentsUntil()</a></li>
</ul>
</li>



<li>2. ::nth-letter() / ::nth-word() / ::nth-line() – [00:39:26]
<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://adactio.com/journal/14408" target="_blank" rel="noreferrer noopener">&#8222;An nth-letter selector in CSS&#8220; auf adactio</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://css-tricks.com/a-call-for-nth-everything/" target="_blank" rel="noreferrer noopener">&#8222;A Call for&nbsp;::nth-everything&#8220; auf css-tricks</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://github.com/FWeinb/nthEverything" target="_blank" rel="noreferrer noopener">nthEverything mit JS</a></li>
</ul>
</li>



<li>3. Fully styleable form elements – [00:46:14]
<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://www.youtube.com/watch?v=ZFvPLrKZywA" target="_blank" rel="noreferrer noopener">&#8222;HTML isn’t done! (Chrome Dev Summit 2019)&#8220;</a> von Greg Whitworth, Nicole Sullivan (OOCSS)</li>



<li><a aria-label="undefined (opens in a new tab)" href="https://www.filamentgroup.com/lab/select-css.html" target="_blank" rel="noreferrer noopener">&#8222;Styling a Select Like It’s 2019&#8220;</a></li>
</ul>
</li>



<li>4. animation/transition zu Wert &#8222;auto&#8220; – [00:56:40]</li>



<li>5. shape-inside – [01:02:14]
<ul>
<li><a aria-label="undefined (opens in a new tab)" href="http://jsfiddle.net/kUJq8/5/" target="_blank" rel="noreferrer noopener">Fake shape-inside mittels DIV-Suppe</a></li>



<li><a aria-label="undefined (opens in a new tab)" href="https://codepen.io/noahblon/pen/pjvPPN" target="_blank" rel="noreferrer noopener">Fake mittels shape-outside und SVG</a></li>
</ul>
</li>



<li>6. Styleable scrollbars – [01:08:55]
<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://caniuse.com/#feat=css-scrollbar" target="_blank" rel="noreferrer noopener">caniuse CSS scrollbar styling</a></li>
</ul>
</li>
</ul>



Das GeilTeil – [01:23:28]



<ul>
<li><a aria-label="undefined (opens in a new tab)" href="https://amzn.to/383u2vh" target="_blank" rel="noreferrer noopener">Klett-Kabelbinder</a> (Affiliate-Link)</li>



<li><a aria-label="undefined (opens in a new tab)" href="https://browserdefaultstyles.com/" target="_blank" rel="noreferrer noopener">browserdefaultstyles.com</a></li>
</ul>



Verabschiedung – [01:28:24]

Schon mal die am höchsten gewertete Antwort zu einer Frage auf Stack Overflow gelesen und gedacht: geht das nicht in GEIL? Vielleicht mit CSS ohne JS-Polyfill? Wieso hat das noch keiner standardisiert? Wir spielen „CSS-Wünsch-dir-was“ und starten eine Liste der Most-Wanted-CSS-Features 2020 (Bindestriche-für-alle!-!) Passend dazu stellt Constantin die noch dampfend frischen :is()- und :where()-Pseudoklassen vor und Moritz enthüllt seine heimliche Liebe zu Klett-Kabelbinder. Eine Serie die fortgesetzt werden wird. Und Futur II ohne Reue.

Schon mal die am höchsten gewertete Antwort zu einer Frage auf Stack Overflow gelesen und gedacht: Wieso hat das noch keiner standardisiert? Wir spielen „CSS-Wünsch-dir-was“ und starten eine Liste der Most-Wanted-CSS-Features 2020!

Jäger der verlorenen CSS-Features – Kapitel I

Latenight-Frontend-Talkshow rund um Webdesign und Entwicklung. Es reden sich um ＜HEAD＞ und Kragen: HTML-Fundamentalist Moritz Glantz und JavaScript-Jongleurin Sarah Groß.  Dabei geht es bei N+1 Kaltgetränken um die ganze Welt des Frontend-Developments: UX, HTML, CSS, JavaScript, Tooling, Frameworks, uswusf.  Füße hoch und Ohren auf für "Wo wir sind ist vorne"!

PODLIST

Wo wir sind ist vorne.

Neue Episoden

7 Technik-Offenbarungen im Wandel der Zeit

Wo wir sind ist vorne.

The elder scrolls (der Alte scrollt)

Wo wir sind ist vorne.

Rückblick, Ausblick, nitpick

Wo wir sind ist vorne.

48 Dinge, die du (nie) über Selbständigkeit wissen wolltest

Wo wir sind ist vorne.

TIL: TTL (Tagged Template Literals)

Wo wir sind ist vorne.

The Holy State of CSS

Wo wir sind ist vorne.

Semantic HTMHELL

Wo wir sind ist vorne.

Webtypografie mit Gerrit van Aaken

Wo wir sind ist vorne.

Special: Gekommen um zu bleiben!

Wo wir sind ist vorne.

#season1::after{content: "Die 12 Reiter der Webokalypse"}

Wo wir sind ist vorne.

Jäger der verlorenen CSS-Features – Kapitel II

Wo wir sind ist vorne.

Jäger der verlorenen CSS-Features – Kapitel I

Wo wir sind ist vorne.