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/die-vereinigten-staaten-von-html-istan/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Die Highlights aus der „The state of HTML“-Umfrage! Wir sind zurück (wenn auch nur kurz, weil Sabbatical und Reisen und so) und haben eine bunte Wundertüte HTML im Ge(p|b)äck! Für euch haben wir uns die erste State of HTML-Umfrage angeschaut und über unsere Highlights, neue Elemente, Attribute und APIs gesprochen. Als da wären selectlist, contenteditable="plaintext-only", Akkordeons mit purem HTML, die Popover-API, das Model-Element und vieles vieles mehr! Kurz und knackig, aber zackig! &#x2764;&#xfe0f;

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



Retro



<ul>
<li>Constantin: <a href="https://www.48design.com/de/news/2023/10/06/php_apcu-dll-5.1.22-windows-binaries-php-8.2/" target="_blank" rel="noreferrer noopener">APCu Extension für PHP 8.2 unter Windows</a> – [00:03:4]</li>



<li>Moritz: Als PDF scannen mit OCR &#8211; Windows vs Mac – [00:07:48]
<ul>
<li><a href="https://www.naps2.com/" target="_blank" rel="noreferrer noopener">NAPS2</a></li>



<li><a href="https://www.giga.de/downloads/windows-7/tipps/windows-fax-und-scan-so-geht-s-ohne-probleme/" target="_blank" rel="noreferrer noopener">GIGA-Artikel zu Windows Fax und Scan</a></li>
</ul>
</li>



<li>Constantin: <a href="https://bestdayfinder.com/europapark/de/" target="_blank" rel="noreferrer noopener">bestdayfinder.com</a> – [00:19:55]</li>



<li>Constantin: CSS Subgrid in Chrome 117 – [00:27:53]
<ul>
<li><a href="https://caniuse.com/css-subgrid" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>
</li>
</ul>



Tagesthema: State of HTML – [00:31:08]



<ul>
<li>GitHub: <a href="https://github.com/Devographics/surveys" target="_blank" rel="noreferrer noopener">repo</a> / <a href="https://github.com/Devographics/surveys/discussions/categories/state-of-html-2023-features" target="_blank" rel="noreferrer noopener">Feature-Liste</a> </li>
</ul>



<ol>
<li>Forms – [00:35:28]
<ul>
<li>autocomplete-Attribut: <a href="https://wowirsindistvorne.show/season2after-content-sommerpause/">Folge 29: #season2::after { content: &#8222;Sommerpause&#8220; }</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture" target="_blank" rel="noreferrer noopener">HTML Media Capture</a></li>



<li>input.showPicker(): <a href="https://wowirsindistvorne.show/demos/showpicker.html" target="_blank" rel="noreferrer noopener">Demo</a></li>



<li>FormData API: <a href="https://codepen.io/Connum/pen/yLGdRgX" target="_blank" rel="noreferrer noopener">FormData() Demo</a></li>



<li>&lt;selectlist> (ehemals &lt;selectmenu>): <a href="https://wowirsindistvorne.show/select-from-menu/">Folge 39: SELECT * FROM MENU</a></li>



<li>contenteditable=&#8220;plaintext-only&#8220;: <a href="https://caniuse.com/mdn-html_global_attributes_contenteditable_plaintext-only" target="_blank" rel="noreferrer noopener">caniuse</a></li>



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



<li>Interactivity – [00:53:21]
<ul>
<li><a href="https://codepen.io/davatron5000/pen/gOZQxBv" target="_blank" rel="noreferrer noopener">details[name] Tabs Experiment</a></li>



<li>Popover API: <a href="https://wowirsindistvorne.show/lebenszeichen/">Folge 56: Lebenszeichen</a> / <a href="https://codepen.io/MoritzGiessmann/pen/XWoBJpN" target="_blank" rel="noreferrer noopener">Moritz&#8216; Demo</a></li>



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



<li>Element API &#8211; <a href="https://caniuse.com/mdn-api_element_getattributenames" target="_blank" rel="noreferrer noopener">getAttributeNames(): MDN</a> / <a href="https://caniuse.com/mdn-api_element_replacechildren" target="_blank" rel="noreferrer noopener">replaceChildren(): MDN</a></li>
</ul>
</li>



<li>Content – [01:05:02]
<ul>
<li>loading=&#8220;lazy&#8220;: <a href="https://wowirsindistvorne.show/ccc-corona-cloud-und-chaos/">Folge 2: CCC: Corona, Cloud und Chaos</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset" target="_blank" rel="noreferrer noopener">srcset</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" target="_blank" rel="noreferrer noopener">sizes</a> Attribute (<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images" target="_blank" rel="noreferrer noopener">Responsive Images</a>)</li>



<li>Content-Security Policy (CSP): <a href="https://wowirsindistvorne.show/policy-htaccess-http-xss-csp-ole-ole/">Folge 48: Policy, htaccess &amp; HTTP – XSS, CSP, Olé Olé</a></li>



<li>fetchpriority-Attribut: <a href="https://caniuse.com/?search=fetchpriority" target="_blank" rel="noreferrer noopener">caniuse</a> / -Property: <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority" target="_blank" rel="noreferrer noopener">MDN</a></li>



<li>blocking=&#8220;render&#8220;: <a href="https://github.com/whatwg/html/issues/7131" target="_blank" rel="noreferrer noopener">whatwg/html Issue</a></li>



<li>&lt;model> für AR/VR/3D Content: <a href="https://immersive-web.github.io/model-element/" target="_blank" rel="noreferrer noopener">W3C Draft</a></li>



<li>controlslist: <a href="https://wicg.github.io/controls-list/explainer.html" target="_blank" rel="noreferrer noopener">WICG Explainer</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList" target="_blank" rel="noreferrer noopener">Property (MDN)</a> / <a href="https://caniuse.com/mdn-api_htmlmediaelement_controlslist" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li>Internationalization Features: <a href="https://wowirsindistvorne.show/a11y-i18n-ftw-wtf/">Folge 4: A11Y I18N FTW! WTF?</a> / <a href="https://wowirsindistvorne.show/4-eher-unbekannte-properties/">Folge 52: 4 eher unbekannte Properties</a></li>
</ul>
</li>



<li>Accessibility – [01:29:28]
<ul>
<li>focusgroup: <a href="https://open-ui.org/components/focusgroup.explainer/" target="_blank" rel="noreferrer noopener">Open UI Explainer</a> / <a href="https://www.stefanjudis.com/today-i-learned/roving-tabindex/" target="_blank" rel="noreferrer noopener">Was ist &#8222;roving tabindex&#8220;?</a></li>



<li>&lt;search role=&#8220;search&#8220;>: <a href="https://caniuse.com/mdn-html_elements_search" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>
</li>



<li>Native-like Web Apps – [01:34:41]
<ul>
<li><a href="https://wicg.github.io/file-system-access/" target="_blank" rel="noreferrer noopener">File System Access API</a></li>



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



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



<li><a href="https://wicg.github.io/manifest-incubations/index.html#file_handlers-member" target="_blank" rel="noreferrer noopener">File Handling API</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window_Controls_Overlay_API" target="_blank" rel="noreferrer noopener">Window Controls Overlays API</a></li>
</ul>
</li>
</ol>



GeilTeil: <a href="https://satellitemap.space/" target="_blank" rel="noreferrer noopener">StarLink Satellite Tracker</a> – [01:44:50]



Das Ende – [01:49:12]



<ul>
<li><a href="https://wowirsindistvorne.show/unterstuetzen/">Unterstützen</a></li>
</ul>

Die Highlights aus der „The state of HTML“-Umfrage! Wir sind zurück (wenn auch nur kurz, weil Sabbatical und Reisen und so) und haben eine bunte Wundertüte HTML im Ge(p|b)äck! Für euch haben wir uns die erste State of HTML-Umfrage angeschaut und über unsere Highlights, neue Elemente, Attribute und APIs gesprochen. Als da wären selectlist, contenteditable="plaintext-only", Akkordeons mit purem HTML, die Popover-API, das Model-Element und vieles vieles mehr! Kurz und knackig, aber zackig! ❤️

Wo wir sind ist vorne.

Für euch haben wir uns die erste State of HTML-Umfrage angeschaut und über unsere Highlights gesprochen. Als da wären selectlist, contenteditable=&quot;plaintext-only&quot;, Akkordeons mit purem HTML, die Popover-API, das Model-Element und vieles vieles mehr!

Die Highlights aus der „The state of HTML“-Umfrage! Wir sind zurück (wenn auch nur kurz, weil Sabbatical und Reisen und so) und haben eine bunte Wundertüte HTML im Ge(p|b)äck! Für euch haben wir uns die erste State of HTML-Umfrage angeschaut und über unsere Highlights, neue Elemente, Attribute und APIs gesprochen. Als da wären selectlist, contenteditable=&quot;plaintext-only&quot;, Akkordeons mit purem HTML, die Popover-API, das Model-Element und vieles vieles mehr! Kurz und knackig, aber zackig! ❤️

Die vereinigten Staaten von HTML-istan

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-von-a-bis-z-z-iii-text-content-teil-2/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Die letzte Folge vor der Sommerpause! Wir ＜b＞ sprechen die HTML-Elemente blockquote, figure, figcaption, hr und pre. Dazu gibt’s eine Prise Support-Gerante und -Gelobe, komische Windows-Ordnernamen und ein CSS-Geilteil. Für spitzfindige Wortspüle ist es leider zu heiß. Sorry!

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



Retro



<ul>
<li>Immer noch remote &#8211; Hot Tub Stream wann? – [00:04:07]</li>



<li>Constantin: &#8222;The specified device name is invalid&#8220; – [00:09:04]
<ul>
<li><a href="https://answers.microsoft.com/en-us/windows/forum/all/why-cant-i-create-a-folder-with-con-name/23c86662-4988-4c7d-9c2d-3e33d4413de3" target="_blank" rel="noreferrer noopener">Antwort auf Microsoft Community</a></li>
</ul>
</li>



<li>Moritz: <a href="https://moritzgiessmann.de/accessibility-cheatsheet/" target="_blank" rel="noreferrer noopener">Accessibility Cheatsheet</a> update – [00:11:59]</li>



<li>Letzte Folge vor der Sommerpause / Positives zum Vodafone-Support – [00:13:09]</li>
</ul>



Property der Woche: animation-composition – [00:22:06]



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



<li><a href="https://developer.chrome.com/articles/css-animation-composition/" target="_blank" rel="noreferrer noopener">Chrome Developers</a> (<a href="https://codepen.io/web-dot-dev/pen/VwGRBVX" target="_blank" rel="noreferrer noopener">Demo</a>)</li>



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



Tagesthema



<ol>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote" target="_blank" rel="noreferrer noopener">blockquote</a> – [00:31:04]
<ul>
<li><a href="https://codepen.io/arron21/pen/MWYVKdZ" target="_blank" rel="noreferrer noopener">Demo</a></li>
</ul>
</li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure" target="_blank" rel="noreferrer noopener">figure</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption" target="_blank" rel="noreferrer noopener">figcaption</a> – [00:39:10]</li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr" target="_blank" rel="noreferrer noopener">hr</a> – [00:46:45]
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-hr-element" target="_blank" rel="noreferrer noopener">HTML Standard</a></li>



<li><a href="https://codepen.io/ibrahimjabbari/pen/DPQaWB" target="_blank" rel="noreferrer noopener">10 Simple Styles for Horizontal Rules</a></li>



<li><a href="https://codepen.io/MoritzGiessmann/pen/qBQPoRV" target="_blank" rel="noreferrer noopener">Moritz&#8216; Demo</a></li>
</ul>
</li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre" target="_blank" rel="noreferrer noopener">pre</a> – [00:54:58]</li>
</ol>



GeilTeil: <a href="https://kittygiraudel.github.io/selectors-explained/" target="_blank" rel="noreferrer noopener">Selectors Explained</a> – [01:00:33]



Das Ende – [01:03:22]

Die letzte Folge vor der Sommerpause! Wir ＜b＞ sprechen die HTML-Elemente blockquote, figure, figcaption, hr und pre. Dazu gibt’s eine Prise Support-Gerante und -Gelobe, komische Windows-Ordnernamen und ein CSS-Geilteil. Für spitzfindige Wortspüle ist es leider zu heiß. Sorry!

Wir ＜b＞ sprechen die HTML-Elemente blockquote, figure, figcaption, hr und pre. Dazu gibt’s eine Prise Support-Gerante und -Gelobe, komische Windows-Ordnernamen und ein CSS-Geilteil.

HTML von a bis z-z III: Text Content (Teil 2)

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/konferenzorganisation-mit-marc-thiele/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Heißer als der Sommer ist nur #WWSIV mit Marc Thiele! Wir sprechen über seine ganze Historie der Konferenzen, von FFK bis zur Beyond Tellerrand, wie man Sprecher*innen auswählt, welche Venues gut sind und wie viele Details eine gute Konferenz ausmachen. Dazu gibt’s noch Buchtipps, Musik-Empfehlungen, das prefers-contrast Media-Query und ein geiles Teil. Das alles in nur zwei Stunden. Hot!

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



Retro



<ul>
<li>Constantin: <a href="https://www.youtube.com/watch?v=R-Qoj1FE2RQ" target="_blank" rel="noreferrer noopener">GPN Live-Aufzeichnung auf YouTube</a> – [00:04:55]</li>



<li>Moritz: DJ-Set – [00:09:00]</li>
</ul>



Property der Woche: prefers-contrast – [00:12:37]



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



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



Entscheide Dich! – [00:20:10]



<ul>
<li><a href="https://vimeo.com/336620810" target="_blank" rel="noreferrer noopener">Trailer 1</a> / <a href="https://vimeo.com/372453246" target="_blank" rel="noreferrer noopener">Trailer 2</a></li>
</ul>



Tagesthema: Konferenz-Organisation – [00:29:29]



<ul>
<li><a href="https://wowirsindistvorne.show/beyond-btconf/">Folge 55: Beyond. #btconf</a></li>



<li><a href="https://www.youtube.com/watch?v=gWXXFrIu8Cc&amp;t=2343s" target="_blank" rel="noreferrer noopener">Elise Mansbridge: Breaking the black-box security coprocessor in the Nintendo Switch</a> („done by paw“)</li>



<li><a href="https://beyondtellerrand.com/events/dusseldorf-2023/speakers/emily-anhalt" target="_blank" rel="noreferrer noopener">Talk von Emily Anhalt</a></li>



<li>Bands
<ul>
<li><a href="https://www.vandenplas.de/" target="_blank" rel="noreferrer noopener">Vanden Plas</a></li>



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



<li><a href="https://en.wikipedia.org/wiki/Birds_of_Tokyo" target="_blank" rel="noreferrer noopener">Birds of Tokyo</a></li>
</ul>
</li>



<li>Bücher
<ul>
<li><a href="https://www.amazon.de/-/en/Rick-Rubin/dp/1838858636/ref=sr_1_1?keywords=the+creative+act&amp;qid=1687210637&amp;sprefix=the+cre%2Caps%2C101&amp;sr=8-1&amp;tag=wwsiv-21" target="_blank" rel="noreferrer noopener">The Creative Act: A Way of Being</a></li>



<li><a href="https://www.amazon.de/-/en/Hans-Rosling/dp/3548060412/ref=sr_1_1?crid=YSUYOH9SNV8G&amp;keywords=factfulness&amp;qid=1687210620&amp;sprefix=fact%2Caps%2C102&amp;sr=8-1&amp;tag=wwsiv-21" target="_blank" rel="noreferrer noopener">Factfulness: Wie wir lernen, die Welt so zu sehen, wie sie wirklich ist</a></li>



<li><a href="https://www.amazon.de/-/en/Swantje-Allmers/dp/3800666596/ref=sr_1_1?keywords=on+the+way+to+new+work&amp;qid=1687210676&amp;sprefix=on+the+way%2Caps%2C97&amp;sr=8-1&amp;tag=wwsiv-21" target="_blank" rel="noreferrer noopener">On the Way to New Work: Wenn Arbeit zu etwas wird, was Menschen stärkt</a></li>



<li><a href="https://www.amazon.de/-/en/Eleonoor-Jap-Sam/dp/9492852659/ref=sr_1_1?crid=AHL7S8K0ZHFR&amp;keywords=how+to+design+a+post+fossil+world&amp;qid=1687210814&amp;sprefix=how+to+design+a+post+fossil+worl%2Caps%2C91&amp;sr=8-1&amp;tag=wwsiv-21" target="_blank" rel="noreferrer noopener">Solar Futures: How to Design a Post-Fossil World With the Sun</a></li>



<li><a href="https://www.amazon.de/-/en/Carla-Diana-ebook/dp/B087K24J4W/ref=sr_1_1?crid=2M4J98ZL7RR5N&amp;keywords=my+robot+gets+me&amp;qid=1687210865&amp;sprefix=my+robot+gets+me%2Caps%2C89&amp;sr=8-1&amp;tag=wwsiv-21" target="_blank" rel="noreferrer noopener">My Robot Gets Me: How Social Design Can Make New Products More Human</a></li>



<li><a href="https://www.amazon.de/-/en/Mike-Kus/dp/1913947688/ref=sr_1_1?crid=2573HME7ANOTN&amp;keywords=the+pocket+photographer&amp;qid=1687210882&amp;sprefix=the+pocket+photographer%2Caps%2C83&amp;sr=8-1&amp;tag=wwsiv-21" target="_blank" rel="noreferrer noopener">The Pocket Photographer: How to take beautiful photos with your phone</a></li>
</ul>
</li>
</ul>



GeilTeil – [02:03:19]



<ul>
<li><a href="https://front-end.social/@stefan" target="_blank" rel="noreferrer noopener">Stefan Judis auf Mastodon</a></li>



<li><a href="https://botsin.space/@randomMDN" target="_blank" rel="noreferrer noopener">@randomMDN@botsin.space</a></li>
</ul>



Das Ende – [02:04:54]



<ul>
<li><a href="https://dribbble.com/workshops/moritz-gie%C3%9Fmann" target="_blank" rel="noreferrer noopener">Dribble A11Y Session</a></li>
</ul>

Heißer als der Sommer ist nur #WWSIV mit Marc Thiele! Wir sprechen über seine ganze Historie der Konferenzen, von FFK bis zur Beyond Tellerrand, wie man Sprecher*innen auswählt, welche Venues gut sind und wie viele Details eine gute Konferenz ausmachen. Dazu gibt’s noch Buchtipps, Musik-Empfehlungen, das prefers-contrast Media-Query und ein geiles Teil. Das alles in nur zwei Stunden. Hot!

Wir sprechen mit Marc Thiele über seine ganze Historie der Konferenzen, von FFK bis zur Beyond Tellerrand, wie man Sprecher*innen auswählt etc. Dazu gibt’s noch Buchtipps, das prefers-contrast Media-Query und ein geiles Teil.

Konferenzorganisation mit Marc Thiele

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/var-vars-a-new-scope/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Für unseren ersten LIVE-Podcast vor echtem Publikum, haben wir die schönsten Merkwürdigkeiten und Frontend-Demos ausgegraben, die wir bislang so hier hatten. OL-Edgecases, schlimm animierte Scrollbalken, Selectmenu, Regenbogen-Cursor und was sonst nebst obligatorischem Gelaber in die knappe Stunde passte, die wir zur Verfügung hatten. Wers visueller mag, kann sich den Video-Mitschnitt ansehen (Shownotes). 
Eine Sendung für den/die Kenner*in.

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



<ul>
<li><a href="https://media.ccc.de/v/gpn21-27-var-wars-a-new-scope-best-of-wo-wir-sind-ist-vorne-live" target="_blank" rel="noreferrer noopener">Live-Aufzeichnung auf der GPN21 in der Mediathek ansehen</a></li>
</ul>



Retro – [00:07:36]



Property der Woche – [00:12:47]



Entscheide Dich! Moritz vs. Constantin – [00:13:15]



Tagesthema: CSS Overkill – [00:16:38]



<ol>
<li>OL Demos mit Attributen und Edgecases: <a href="https://codepen.io/MoritzGiessmann/pen/KKVzgod" target="_blank" rel="noreferrer noopener">Moritz</a> + <a href="https://codepen.io/Connum/pen/yLxdeRe" target="_blank" rel="noreferrer noopener">Constantin</a> – [00:17:48]</li>



<li><a href="https://codepen.io/MoritzGiessmann/pen/RwowQGX" target="_blank" rel="noreferrer noopener">Scrollbalken to the max</a> + <a href="https://codepen.io/Connum/pen/JjejmyB" target="_blank" rel="noreferrer noopener">background: inherit</a> + <a href="https://codepen.io/Connum/pen/OJaJBRL" target="_blank" rel="noreferrer noopener">SVG Animation</a> – [00:26:45]</li>



<li><a href="https://codepen.io/MoritzGiessmann/pen/LYOqgjQ" target="_blank" rel="noreferrer noopener">selectmenu madness</a> – [00:31:51]</li>



<li><a href="https://codepen.io/MoritzGiessmann/pen/qBqzvyw" target="_blank" rel="noreferrer noopener">rainbow caret cursor</a> – [00:45:34]</li>



<li><a href="https://codepen.io/matuzo/pen/MWqgmYq?editors=1100" target="_blank" rel="noreferrer noopener">::file-selector-button</a> – [00:48:58]</li>
</ol>



GeilTeil – [00:51:01]



<ul>
<li><a href="https://www.htmhell.dev/" target="_blank" rel="noreferrer noopener">HTMHell</a></li>
</ul>



DasEnde – [00:54:09]

Für unseren ersten LIVE-Podcast vor echtem Publikum, haben wir die schönsten Merkwürdigkeiten und Frontend-Demos ausgegraben, die wir bislang so hier hatten. OL-Edgecases, schlimm animierte Scrollbalken, Selectmenu, Regenbogen-Cursor und was sonst nebst obligatorischem Gelaber in die knappe Stunde passte, die wir zur Verfügung hatten. Wers visueller mag, kann sich den Video-Mitschnitt ansehen (Shownotes).
Eine Sendung für den/die Kenner*in.

OL-Edgecases, schlimm animierte Scrollbalken, Selectmenu, Regenbogen-Cursor und was sonst nebst obligatorischem Gelaber in die knappe Stunde passte, die wir auf der GPN zur Verfügung hatten.

Für unseren ersten LIVE-Podcast vor echtem Publikum, haben wir die schönsten Merkwürdigkeiten und Frontend-Demos ausgegraben, die wir bislang so hier hatten. OL-Edgecases, schlimm animierte Scrollbalken, Selectmenu, Regenbogen-Cursor und was sonst nebst obligatorischem Gelaber in die knappe Stunde passte, die wir zur Verfügung hatten. Wers visueller mag, kann sich den Video-Mitschnitt ansehen (Shownotes).
Eine Sendung für den/die Kenner*in.

VAR WARS: A New Scope

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/lebenszeichen/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Da sinnwa wieder! Eine kleine, aber feine Folge zum wieder rein kommen. Wir besprechen die CSS-Popover API, die WebAIM Million Accessibility-Auswertung und kündigen zukünftige Live-Auftritte an, z.b. eine Live-Podcast-Aufnahme bei der GPN21. Aber täuscht euch nicht, wir haben noch Großes vor!

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



Retro 



<ul>
<li>Hörer*innen aus verschiedenen Ländern – [00:03:54]</li>



<li>Hörer*innen-Treffen in Karlsruhe – [00:08:23]
<ul>
<li>Anmeldung &amp; Infos: <a href="https://zumpad.zum.de/p/ODm0hNho_nsREhg_mvOB" target="_blank" rel="noreferrer noopener">https://zumpad.zum.de/p/ODm0hNho_nsREhg_mvOB</a></li>
</ul>
</li>



<li>WWSIV goes GPN – [00:11:01]
<ul>
<li>Schedule: <a href="https://cfp.gulas.ch/gpn21/schedule/" target="_blank" rel="noreferrer noopener">https://cfp.gulas.ch/gpn21/schedule/</a></li>
</ul>
</li>



<li>Live-DJ-Set – [00:15:19]</li>



<li>Constantin: Dropbox/GDrive OAuth, API-Dschungel – [00:18:13]</li>
</ul>



Property der Woche: Popover API – [00:27:08]



<ul>
<li><a href="https://developer.chrome.com/blog/whats-new-css-ui-2023/" target="_blank" rel="noreferrer noopener">Chrome Developers: What&#8217;s new in CSS and UI: I/O 2023 Edition</a></li>



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



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



<li><a href="https://codepen.io/web-dot-dev/pen/PoyRaZe" target="_blank" rel="noreferrer noopener">Demo zu @position-fallback / @try / anchor()</a></li>
</ul>



GeilTeil



<ul>
<li> <a href="https://www.apple.com/de/newsroom/2023/05/apple-previews-live-speech-personal-voice-and-more-new-accessibility-features/" target="_blank" rel="noreferrer noopener">AI Stimm-Synthese</a> – [00:41:55]</li>



<li><a href="https://webaim.org/projects/million/" target="_blank" rel="noreferrer noopener">WebAIM Million</a> – [00:44:03]</li>
</ul>



Das Ende – [00:52:02]

Da sinnwa wieder! Eine kleine, aber feine Folge zum wieder rein kommen. Wir besprechen die CSS-Popover API, die WebAIM Million Accessibility-Auswertung und kündigen zukünftige Live-Auftritte an, z.b. eine Live-Podcast-Aufnahme bei der GPN21. Aber täuscht euch nicht, wir haben noch Großes vor!

Da sinnwa wieder! Wir besprechen die CSS-Popover API, die WebAIM Million Accessibility-Auswertung und kündigen zukünftige Live-Auftritte an, z.b. eine Live-Podcast-Aufnahme bei der GPN21. Aber täuscht euch nicht, wir haben noch Großes vor!

Lebenszeichen

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/beyond-btconf/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Wir waren in Düsseldorf auf der Beyond Tellerrand Konferenz und berichten von Talks und Treffen und Essen und Menschen. Beim Hörer*innentreffen trafen wir zum ersten Mal im Real Life auf euch, die beste Community der Welt, aber auch Gäste dieses Podcasts. Dazu gab es nicht zuletzt eine Menge toller Vorträge bei der bestenWebKonferenzWoGibt&#x2122;&#xfe0f; #klassenfahrt. Hach war das schön &#x2764;&#xfe0f;

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



Retro



<ul>
<li>Moritz: Kamera-Arm – [00:02:38]
<ul>
<li><a href="https://wowirsindistvorne.show/equipment/">Equipment</a></li>
</ul>
</li>



<li>Moritz: Neuer Merch-Shop – [00:06:15]</li>



<li>Constantin: <a href="https://github.com/nuxodin/domProxy/tree/v1.0.0" target="_blank" rel="noreferrer noopener">domProxy</a> – [00:09:47]</li>



<li>Moritz: Monatlich unterstützen – [00:15:02]</li>
</ul>



Property der Woche: CSS Subgrid ab Chromium 114 – [00:17:26]



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



<li>Subgrid <a href="https://codepen.io/yisi/pen/GbRdWG" target="_blank" rel="noreferrer noopener">Demo 1</a> / <a href="https://codepen.io/michellebarker/pen/gJzxBW" target="_blank" rel="noreferrer noopener">Demo 2</a></li>



<li><a href="https://chromestatus.com/roadmap" target="_blank" rel="noreferrer noopener">Chrome Platform Status</a></li>
</ul>



Tagesthema: #btconf Düsseldorf 2023 – [00:23:41]



<ul>
<li><a href="https://beyondtellerrand.com/events/dusseldorf-2023/speakers" target="_blank" rel="noreferrer noopener">Beyond Tellerrand</a></li>
</ul>



<ol>
<li>Über die Talks – [00:25:05]
<ul>
<li><a href="https://www.youtube.com/@btconf" target="_blank" rel="noreferrer noopener">@btconf YouTube-Kanal</a>
<ul>
<li><a href="https://www.youtube.com/watch?v=2ZUqa-lTbnU" target="_blank" rel="noreferrer noopener">Sophie Koonin – This Website Is under Construction, a Love Letter to the Personal Website</a></li>



<li><a href="https://www.youtube.com/watch?v=5kixsu_yeHs" target="_blank" rel="noreferrer noopener">Scott Kellum – Mapping Typography</a>
<ul>
<li><a href="https://www.figma.com/proto/7hZ9z8OXLAaIhqrFJK503f/Mapping-Typogrpahy?page-id=0%3A1&amp;node-id=2-38&amp;viewport=2046%2C345%2C0.02&amp;scaling=contain&amp;starting-point-node-id=2%3A38" target="_blank" rel="noreferrer noopener">Slides</a></li>



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



<li><a href="https://developer.chrome.com/blog/css-text-wrap-balance/" target="_blank" rel="noreferrer noopener">text-wrap: balance</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries#container_query_length_units" target="_blank" rel="noreferrer noopener">MDN: Container query length units</a></li>
</ul>
</li>



<li><a href="https://www.youtube.com/watch?v=bMIinVQ-AE8" target="_blank" rel="noreferrer noopener">Aoi Yamaguchi – 瞑想と書：Meditation with Calligraphy</a>
<ul>
<li><a href="https://vimeo.com/241742818" target="_blank" rel="noreferrer noopener">Making a Mark</a></li>



<li><a href="https://www.netflix.com/title/81028343" target="_blank" rel="noreferrer noopener">ONI: Thunder God&#8217;s Tale (Oni: Die Geschichte der Donnergöttin) auf Netflix</a><a href="https://www.youtube.com/@btconf"></a></li>
</ul>
</li>



<li><a href="https://www.youtube.com/watch?v=gUvSyqV7lz0" target="_blank" rel="noreferrer noopener">Gemma O&#8217;Brien – How to be an Ultra Artist</a></li>



<li><a href="https://www.youtube.com/watch?v=VEmWkdBco00&amp;feature=youtu.be" target="_blank" rel="noreferrer noopener">Emily Anhalt – The 7 Traits of an Emotionally Fit Leader</a><a href="https://www.youtube.com/@btconf"></a></li>
</ul>
</li>
</ul>
</li>



<li>Über das &#8222;Drumherum&#8220; – [01:04:36]
<ul>
<li><a href="https://wowirsindistvorne.show/web-performance-mit-christian-schepp-schaefer/">Folge 33: Web Performance mit Christian &#8222;Schepp&#8220; Schaefer</a></li>



<li><a href="https://wowirsindistvorne.show/accessibility-frontend-und-der-ganze-rest-mit-manuel-matuzovic/">Folge 53: Accessibility, Frontend und der ganze Rest mit Manuel Matuzović</a></li>



<li><a href="https://wowirsindistvorne.show/ux-engineering-barrierefreiheit-mit-dirk-ginader/">Folge 34: UX-Engineering &amp; Barrierefreiheit mit Dirk Ginader</a></li>



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



<li><a href="https://ericholscher.com/blog/2017/aug/2/pacman-rule-conferences/" target="_blank" rel="noreferrer noopener">Eric Holscher: The Pac-Man Rule at Conferences</a></li>



<li><a href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" target="_blank" rel="noreferrer noopener">Sonja Weckenmann: ARIA-Live-Regionen</a></li>
</ul>
</li>
</ol>



Das Ende – [01:23:17]

Wir waren in Düsseldorf auf der Beyond Tellerrand Konferenz und berichten von Talks und Treffen und Essen und Menschen. Beim Hörer*innentreffen trafen wir zum ersten Mal im Real Life auf euch, die beste Community der Welt, aber auch Gäste dieses Podcasts. Dazu gab es nicht zuletzt eine Menge toller Vorträge bei der bestenWebKonferenzWoGibt™️ #klassenfahrt. Hach war das schön ❤️

Düsseldorf. Beyond Tellerrand Konferenz. Talks und Treffen und Essen und Menschen. Beim Hörer*innentreffen trafen wir zum ersten Mal im Real Life auf euch, die beste Community der Welt, aber auch Gäste dieses Podcasts und sahen tolle Vorträge.

Beyond. #btconf

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-von-a-bis-z-z-iii-text-content/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
HTML, HTML, immer nur HTML! In unserer beliebten Reihe besprechen wir heute alles was mit HTML-Listen zu tun hat (menu, ol, ul, dl etc.) inklusive einiger Tricks die ol auf Lager hat. Dazu kommen die Klassiker p und div (is not a button) und erklären, warum letzteres nur verwendet werden soll, wenn einem gar nichts anderes einfällt. Dazu servieren wir den Termin für unser Hörer*innentreffen, versuchen iFrames ohne Reload zu verschieben und lernen mit welchem Tool man Bilder neu ausleuchten kann. 
Tsching·de·ras·sa·bum! &#x1f941;

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



Retro



<ul>
<li>Moritz: Hörer*innen-Treffen – [00:04:22]
<ul>
<li><a href="https://ti.to/beyondtellerrand/dusseldorf-2023/with/cmayaqo2jfg,w4pawgaewwm" target="_blank" rel="noreferrer noopener">Anmeldung zum btconf Warmup</a></li>
</ul>
</li>



<li>Constantin: iframe-Reload beim Verschieben im DOM – [00:07:32]
<ul>
<li>Bug-Tickets: <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=254144" target="_blank" rel="noreferrer noopener">Mozilla</a> / <a href="https://bugs.webkit.org/show_bug.cgi?id=13574#c10" target="_blank" rel="noreferrer noopener">Webkit</a> / <a href="https://github.com/whatwg/html/issues/5484#issuecomment-620481794" target="_blank" rel="noreferrer noopener">WHATWG</a></li>
</ul>
</li>



<li>Moritz: <a href="https://strawpoll.com/polls/2ayLklxBBZ4/results" target="_blank" rel="noreferrer noopener">DJ-Namen Abstimmung</a> – [00:16:08]</li>
</ul>



Tagesthema – [00:20:23]



<ol>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul" target="_blank" rel="noreferrer noopener">&lt;ul&gt;</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol" target="_blank" rel="noreferrer noopener">&lt;ol&gt;</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu" target="_blank" rel="noreferrer noopener">&lt;menu&gt;</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li" target="_blank" rel="noreferrer noopener">&lt;li&gt;</a> – [00:22:32]
<ul>
<li><a href="https://wowirsindistvorne.show/grosser-konzern-vs-kleine-klitsche/">Folge 9: Großer Konzern vs. Kleine Klitsche</a></li>



<li><a href="https://codepen.io/MoritzGiessmann/pen/KKVzgod" target="_blank" rel="noreferrer noopener">Moritz’ Demo</a> / <a href="https://codepen.io/Connum/pen/yLxdeRe" target="_blank" rel="noreferrer noopener">Constantins Fork mit noch mehr Edge Cases</a></li>
</ul>
</li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p" target="_blank" rel="noreferrer noopener">&lt;p&gt;</a> – [00:39:11]</li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl" target="_blank" rel="noreferrer noopener">&lt;dl&gt;</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt" target="_blank" rel="noreferrer noopener">&lt;dt&gt;</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd" target="_blank" rel="noreferrer noopener">&lt;dd&gt;</a> – [00:41:41]</li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div" target="_blank" rel="noreferrer noopener">&lt;div&gt;</a> – [00:51:01]
<ul>
<li><a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-div-element" target="_blank" rel="noreferrer noopener">WHATWG Standard</a></li>



<li><a href="https://medium.com/@Cuadraman/how-i-approach-html-divitis-53368c5c0b1a" target="_blank" rel="noreferrer noopener">How I approach HTML Divitis</a></li>



<li><a href="https://benmyers.dev/blog/clickable-divs/" target="_blank" rel="noreferrer noopener">How (Not) to Build a Button</a></li>
</ul>
</li>
</ol>



GeilTeil: <a href="https://clipdrop.co/relight" target="_blank" rel="noreferrer noopener">Relight</a> von <a href="https://clipdrop.co/" target="_blank" rel="noreferrer noopener">clipdrop</a> – [01:04:09]



Das Ende – [01:10:40]

HTML, HTML, immer nur HTML! In unserer beliebten Reihe besprechen wir heute alles was mit HTML-Listen zu tun hat (menu, ol, ul, dl etc.) inklusive einiger Tricks die ol auf Lager hat. Dazu kommen die Klassiker p und div (is not a button) und erklären, warum letzteres nur verwendet werden soll, wenn einem gar nichts anderes einfällt. Dazu servieren wir den Termin für unser Hörer*innentreffen, versuchen iFrames ohne Reload zu verschieben und lernen mit welchem Tool man Bilder neu ausleuchten kann. 
Tsching·de·ras·sa·bum! 🥁

Heute: alles was mit HTML-Listen zu tun hat (menu, ol, ul, dl etc.) inklusive einiger Tricks die ol auf Lager hat. Dazu kommen die Klassiker p und div (is not a button).

HTML, HTML, immer nur HTML! In unserer beliebten Reihe besprechen wir heute alles was mit HTML-Listen zu tun hat (menu, ol, ul, dl etc.) inklusive einiger Tricks die ol auf Lager hat. Dazu kommen die Klassiker p und div (is not a button) und erklären, warum letzteres nur verwendet werden soll, wenn einem gar nichts anderes einfällt. Dazu servieren wir den Termin für unser Hörer*innentreffen, versuchen iFrames ohne Reload zu verschieben und lernen mit welchem Tool man Bilder neu ausleuchten kann. 
Tsching·de·ras·sa·bum! 🥁

HTML von a bis z-z III: Text Content

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/accessibility-frontend-und-der-ganze-rest-mit-manuel-matuzovic/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Lobsteriooo, Lobsteriaaaaa! Mit Manuel Matuzović sprechen wir über seine Computergeschichte, Accessibility, HTMLHell, 100DaysOfCss, Motivation und wie man es schafft viele Dinge auf einmal zu machen. Dazu gibt’s eine CSS-Property die es schon lange gibt, aber uns dreien lange unbekannt war und das ganze Accessibility Toolset von Manuel. Achja. Fast vergessen: &#x1f99e;&#x1f99e;&#x1f99e;

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



Retro



<ul>
<li>Moritz: auf Twitter geblockt: A dramatic turn of events. Twice. – [00:06:16]</li>



<li>Constantin: User-Agent reduction in Chrome – [00:13:27]
<ul>
<li><a href="https://developer.chrome.com/en/blog/user-agent-reduction-android-model-and-version/" target="_blank" rel="noreferrer noopener">Chrome Developers: Prepare for Chrome’s user‑agent reduction</a></li>



<li><a href="https://www.chromium.org/updates/ua-reduction/" target="_blank" rel="noreferrer noopener">Chromium Project updates: User-Agent Reduction</a></li>
</ul>
</li>



<li>Manuel: Outing als <a href="https://www.fontsquirrel.com/fonts/lobster" target="_blank" rel="noreferrer noopener">Lobster</a>-Hasser – [00:17:46]</li>



<li>Moritz: <a href="https://feedback.karlsruhe.de/" target="_blank" rel="noreferrer noopener">KA-Feedback App</a> Feedback Feedback – [00:18:21]</li>
</ul>



Property der Woche: ::file-selector-button – [00:22:55]



<ul>
<li>Manuels Blog-Beitrag: <a href="https://www.matuzo.at/til/til49/" target="_blank" rel="noreferrer noopener">You can style the file selector button of file upload elements.</a></li>



<li>Manuels CodePen-Demo: <a href="https://codepen.io/matuzo/pen/MWqgmYq?editors=1100" target="_blank" rel="noreferrer noopener">Styling the file selector</a></li>



<li><a href="https://caniuse.com/mdn-css_selectors_file-selector-button" target="_blank" rel="noreferrer noopener">caniuse ::file-selector-button / ::-webkit-file-upload-button / ::-ms-browse</a></li>
</ul>



Entscheide Dich! – [00:27:39]



Thema-Vorgeplänkel: Winamp, Typescript und schlechtes Markup – [00:34:03]



Tagesthema



<ol>
<li>Was hast du gegen Lobster? – [00:41:22]
<ul>
<li><a href="https://www.graphicpie.com/similar-fonts-and-free-alternatives-to-lobster/" target="_blank" rel="noreferrer noopener">Similar Fonts and Free Alternatives to Lobster</a><a href="https://www.graphicpie.com/author/admin/"></a></li>
</ul>
</li>



<li>Wie kamst du zum Computer? – [00:47:10]</li>



<li>Und wie zur Accessibility? – [00:49:14]</li>



<li>Woher nimmst du all die Zeit und Motivation? – [00:55:27]</li>



<li>Wie kam die Idee zu HTMLHell zustande? – [01:00:40]
<ul>
<li><a href="https://wowirsindistvorne.show/semantic-htmhell/">Folge: 15 Semantic HTMHELL</a></li>



<li><a href="https://www.htmhell.dev/" target="_blank" rel="noreferrer noopener">HTMhell.dev</a></li>
</ul>
</li>



<li><a href="https://www.matuzo.at/blog/2022/100-days-of-more-or-less-modern-css/" target="_blank" rel="noreferrer noopener">100 Days Of More Or Less Modern CSS</a> – [01:03:50]
<ul>
<li><a href="https://www.matuzo.at/blog/2023/100daysof-day82/" target="_blank" rel="noreferrer noopener">Day 82: value processing</a></li>
</ul>
</li>



<li>Was vermisst du noch an CSS? – [01:11:32]
<ul>
<li><a href="https://www.matuzo.at/blog/2023/css-wish-list/" target="_blank" rel="noreferrer noopener">My CSS wish list</a></li>
</ul>
</li>



<li>Treffen wir uns auf der btconf? – [01:15:49]</li>



<li>Wie sieht für dich ein typischer Accessibility Test aus? – [01:17:42]</li>



<li>Wie stellst du sicher, dass du nichts vergisst? – [01:21:27]
<ul>
<li><a href="https://validator.w3.org/" target="_blank" rel="noreferrer noopener">W3C Markup Validation Service</a></li>



<li><a href="https://www.deque.com/axe/devtools/" target="_blank" rel="noreferrer noopener">Axe Dev Tools</a></li>



<li><a href="https://www.w3.org/WAI/eval/report-tool/" target="_blank" rel="noreferrer noopener">WCAG-EM-Report-Tool</a></li>



<li><a href="https://www.deque.com/axe-con/sessions/our-approach-to-accessibility-at-miro-a-realtime-collaboration-platform/" target="_blank" rel="noreferrer noopener">Accessibility bei Miro</a></li>
</ul>
</li>



<li>HTML first – [01:40:17]
<ul>
<li><a href="https://www.11ty.dev/" target="_blank" rel="noreferrer noopener">Eleventy</a></li>



<li><a href="https://enhance.dev/docs/" target="_blank" rel="noreferrer noopener">Enhance</a></li>



<li><a href="https://astro.build/" target="_blank" rel="noreferrer noopener">Astro</a></li>



<li><a href="https://alpinejs.dev/" target="_blank" rel="noreferrer noopener">Alpine.js</a></li>



<li><a href="https://github.com/vuejs/petite-vue" target="_blank" rel="noreferrer noopener">petite-vue</a></li>



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



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



<li>Wo unterrichtest du? / Kann man dich für Vorträge/Fortbildungen buchen? – [01:52:21]
<ul>
<li><a href="https://www.matuzo.at/" target="_blank" rel="noreferrer noopener">matuzo.at</a></li>



<li><a href="https://www.leandus.de/" target="_blank" rel="noreferrer noopener">LeanDUS</a></li>
</ul>
</li>
</ol>



GeilTeil



<ul>
<li>Moritz: <a href="https://randoma11y.com/" target="_blank" rel="noreferrer noopener">Randoma11y</a> – [01:55:31]</li>



<li>Manuel: Musikempfehlungen – [01:59:24]
<ul>
<li><a href="https://www.youtube.com/watch?v=OzomoW6qGSI" target="_blank" rel="noreferrer noopener">El Michels Affair &#8211; Shimmy Shimmy Ya</a></li>



<li><a href="https://www.youtube.com/watch?v=qxvOXFg6WuA" target="_blank" rel="noreferrer noopener">Team Scheisse &#8211; ERFURT</a></li>



<li><a href="https://www.youtube.com/watch?v=wcKfYMxdqMo" target="_blank" rel="noreferrer noopener">Team Scheisse &#8211; KARSTADTDETEKTIV</a></li>



<li><a href="https://twitter.com/Schmidtlepp/status/1635553657025355781" target="_blank" rel="noreferrer noopener">Christopher Lauer auf Twitter zu Karstadt</a></li>



<li><a href="https://www.youtube.com/c/kurtrazelli" target="_blank" rel="noreferrer noopener">Kurt Razelli</a></li>



<li>Rapper lesen Rapper: <a href="https://www.youtube.com/channel/UCFIvLwx5KJyYmV3Nv-PSLdQ" target="_blank" rel="noreferrer noopener">YouTube</a> / <a href="https://de.wikipedia.org/wiki/Rapper_lesen_Rapper" target="_blank" rel="noreferrer noopener">Wikipedia</a></li>



<li><a href="https://www.youtube.com/watch?v=bVi8_Zj-jkg" target="_blank" rel="noreferrer noopener">Dexter liest: &#8222;Bodak Yellow&#8220;</a></li>
</ul>
</li>
</ul>



Das Ende – [02:06:37]

Lobsteriooo, Lobsteriaaaaa! Mit Manuel Matuzović sprechen wir über seine Computergeschichte, Accessibility, HTMLHell, 100DaysOfCss, Motivation und wie man es schafft viele Dinge auf einmal zu machen. Dazu gibt’s eine CSS-Property die es schon lange gibt, aber uns dreien lange unbekannt war und das ganze Accessibility Toolset von Manuel. Achja. Fast vergessen: 🦞🦞🦞

Mit Manuel Matuzović sprechen wir über seine Computergeschichte, Accessibility, HTMLHell, 100DaysOfCss, Motivation und wie man es schafft viele Dinge auf einmal zu machen. Dazu gibt’s eine CSS-Property und das ganze Accessibility Toolset von Manuel.

Accessibility, Frontend und der ganze Rest mit Manuel Matuzović

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/4-eher-unbekannte-properties/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Als kurze Verschnaufpause zwischen dem Trommelfeuer der HTML-Elemente präsentieren wir euch 4 eher unbekannte Properties. Darunter CSS margin-trim, leading-trim (+ text-edge), die JavaScript Local Fonts API und JavaScript Intl.Segmenter(). Dazu gibt es unter anderem unsere Faxnummer und das Geilteil ist diese Mal etwas zum Rumspielen. Flutschi plutschi bäng bäng!

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



Retro



<ul>
<li>Moritz: Faxnummer – 0721 47046487 – [00:04:28]</li>



<li>Constantin: <a href="https://www.npmjs.com/package/husky" target="_blank" rel="noreferrer noopener">Husky</a> – [00:07:01]
<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>



<li>Moritz: Bewertungen, Apple Podcasts Banner per Metatag – [00:08:45]</li>



<li>Constantin: Yoda Conditions – [00:12:15]</li>



<li>Moritz: Solarstrom – [00:15:36]</li>



<li>Constantin: caniuse jetzt mit Hinweis zu IE11 – [00:18:44]</li>



<li>Moritz: Danke für Spenden – [00:21:00]</li>
</ul>



Tagesthema – [00:21:46]



<ol>
<li>Local Fonts API – [00:23:19]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Local_Font_Access_API#browser_compatibility" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-api_window_querylocalfonts" target="_blank" rel="noreferrer noopener">caniuse</a> / <a href="https://developer.chrome.com/en/articles/local-fonts/" target="_blank" rel="noreferrer noopener">Chrome Developers</a></li>



<li><a href="https://boxy-svg.com/blog/15/enabling-local-system-fonts-support" target="_blank" rel="noreferrer noopener">Boxy SVG Editor</a></li>



<li><a href="https://webkit.org/tracking-prevention/#anti-fingerprinting" target="_blank" rel="noreferrer noopener">Tracking Prevention in WebKit</a></li>



<li><a href="https://wowirsindistvorne.show/demos/local_fonts_api/" target="_blank" rel="noreferrer noopener">Constantins Local Fonts API Demo</a></li>



<li><a href="https://wowirsindistvorne.show/policy-htaccess-http-xss-csp-ole-ole/">Folge 48: Policy, htaccess &amp; HTTP – XSS, CSP, Olé Olé</a></li>



<li><a href="https://wowirsindistvorne.show/webtypografie-mit-gerrit-van-aaken/">Folge 14: Webtypografie mit Gerrit van Aaken</a></li>
</ul>
</li>



<li>CSS margin-trim – [00:39:52]
<ul>
<li><a href="https://caniuse.com/mdn-css_properties_margin-trim" target="_blank" rel="noreferrer noopener">caniuse</a></li>



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



<li>Einschub: esbuild &amp; Dart Sass – [00:50:27]
<ul>
<li><a href="https://esbuild.github.io/" target="_blank" rel="noreferrer noopener">esbuild</a></li>



<li><a href="https://sass-lang.com/dart-sass" target="_blank" rel="noreferrer noopener">Dart Sass</a></li>



<li><a href="https://github.com/elk-zone/elk" target="_blank" rel="noreferrer noopener">elk-zone Mastodon Client</a></li>
</ul>
</li>



<li>Intl.Segmenter() – [00:58:18]
<ul>
<li><a href="https://wowirsindistvorne.show/a11y-i18n-ftw-wtf/">Folge 4: A11Y I18N FTW! WTF?</a></li>



<li><a href="https://wowirsindistvorne.show/rueckblick-ausblick-nitpick/">Folge 19: Rückblick, Ausblick, nitpick</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Segmenter" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/mdn-javascript_builtins_intl_segmenter" target="_blank" rel="noreferrer noopener">caniuse</a></li>



<li><a href="https://codepen.io/Connum/pen/oNPzYwB?editors=0012" target="_blank" rel="noreferrer noopener">Constantins Demo</a></li>
</ul>
</li>



<li>CSS leading-trim und text-edge – [01:09:21]
<ul>
<li><a href="https://medium.com/microsoft-design/leading-trim-the-future-of-digital-typesetting-d082d84b202" target="_blank" rel="noreferrer noopener">Leading-Trim: The Future of Digital Typesetting</a></li>



<li>W3C Spec CSS Inline Layout Module Level 3: <a href="https://www.w3.org/TR/css-inline-3/#leading-trim" target="_blank" rel="noreferrer noopener">leading-trim</a> / <a href="https://www.w3.org/TR/css-inline-3/#propdef-text-edge" target="_blank" rel="noreferrer noopener">text-edge</a></li>
</ul>
</li>
</ol>



GeilTeil: <a href="https://particle-love.com/" target="_blank" rel="noreferrer noopener">Particle Love</a> – [01:22:19]



Das Ende – [01:28:14]

Als kurze Verschnaufpause zwischen dem Trommelfeuer der HTML-Elemente präsentieren wir euch 4 eher unbekannte Properties. Darunter CSS margin-trim, leading-trim (+ text-edge), die JavaScript Local Fonts API und JavaScript Intl.Segmenter(). Dazu gibt es unter anderem unsere Faxnummer und das Geilteil ist diese Mal etwas zum Rumspielen. Flutschi plutschi bäng bäng!

Als kurze Verschnaufpause zwischen dem Trommelfeuer der HTML-Elemente präsentieren wir euch 4 eher unbekannte Properties. Darunter CSS margin-trim, leading-trim (+ text-edge), die JavaScript Local Fonts API und JavaScript Intl.Segmenter().

4 eher unbekannte Properties

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-von-a-bis-z-z-ii-inhaltszerstueckelung/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Entwickler*innen, Entwickler*innen, Entwickler*innen! Semantische Inhaltssektionierungselemente sind das Thema. Weil so keiner bei Google findet: wir sprechen über die HTML-Elemente die den Inhalt grob strukturieren, wie header, footer, main, section, article etc. Dabei geht’s auch mal in die eine oder andere Untiefen der impliziten roles. Dazu servieren YouTube CSS-Tutorials und zeigen was man mit der Shape-Detection API so anstellen kann. Wer in der HTMHölle lebt, wird diese Sendung lieben!

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



Retro



<ul>
<li>Retro Constantin: Custom-Input-A11Y-Rabbit-Hole &amp; CSS-Wünsche – [00:07:11]
<ul>
<li><a href="https://github.com/w3c/csswg-drafts/issues/3080" target="_blank" rel="noreferrer noopener">CSSWG: Do we need :focus-visible-within?</a></li>



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



<li>Moritz: <a href="https://wowirsindistvorne.show/html-von-lta-bis-ltz-z-i-back-to-the-root/#comments">Kommentare zur letzten Folge</a> – [00:26:50]</li>
</ul>



Property der Woche: Shape Detection API – [00:33:22]



<ul>
<li><a href="https://developer.chrome.com/articles/shape-detection/" target="_blank" rel="noreferrer noopener">Shape Detection API bei Chrome Developers</a></li>



<li><a href="https://codepen.io/cassie-codes/pen/jKaVqo?editors=1010" target="_blank" rel="noreferrer noopener">Shy Blob Face Detection CodePen</a> (&#8222;Experimental Web Platform Features&#8220;-Flag in Chrome!)</li>
</ul>



Tagesthema: Content Sectioning



<ol>
<li>Warum überhaupt Content Sectioning? – [00:37:44]</li>



<li>&lt;address&gt; – [00:44:47]</li>



<li>&lt;article&gt; – [00:48:36]</li>



<li>&lt;aside&gt; – [00:54:40]</li>



<li>&lt;footer&gt; – [00:58:39]</li>



<li>&lt;header&gt; – [01:01:58]</li>



<li>&lt;h1&gt;-&lt;h6&gt; – [01:08:31]</li>



<li>&lt;main&gt; – [01:17:26]</li>



<li>Einwurf WWSIF Shorts und AI – [01:25:17]</li>



<li>&lt;nav&gt; – [01:31:05]</li>



<li>&lt;section&gt; – [01:36:46]</li>



<li>Accessibility und aria-label – [01:40:52]</li>
</ol>



GeilTeil



<ul>
<li>Constantin: <a href="https://www.youtube.com/@KevinPowell" target="_blank" rel="noreferrer noopener">CSS-Tutorials von KevinPowell</a> – [01:45:01]




<ul>
<li><a href="https://www.youtube.com/watch?v=b--q6Fsf_cA" target="_blank" rel="noreferrer noopener">Can I create Netflix’s video carousel with CSS only?</a></li>
</ul>



<ul>
<li><a href="https://www.youtube.com/watch?v=lWu5zf_S9R4" target="_blank" rel="noreferrer noopener">How To Write Semantic CSS</a><a href="https://www.youtube.com/@KevinPowell"></a></li>
</ul>
</li>



<li>Moritz: <a href="https://www.microsoft.com/de-de/download/internet-explorer.aspx" target="_blank" rel="noreferrer noopener">IE11 ab 14. Februar nicht mehr verfügbar</a> – [01:49:01]</li>
</ul>



Das Ende – [01:51:11]

Entwickler*innen, Entwickler*innen, Entwickler*innen! Semantische Inhaltssektionierungselemente sind das Thema. Weil so keiner bei Google findet: wir sprechen über die HTML-Elemente die den Inhalt grob strukturieren, wie header, footer, main, section, article etc. Dabei geht’s auch mal in die eine oder andere Untiefen der impliziten roles. Dazu servieren YouTube CSS-Tutorials und zeigen was man mit der Shape-Detection API so anstellen kann. Wer in der HTMHölle lebt, wird diese Sendung lieben!

Wir sprechen über die HTML-Elemente die den Inhalt grob strukturieren, wie header, footer, main, section, article etc. Dabei geht’s auch mal in die eine oder andere Untiefen der impliziten roles. Wer in der HTMHölle lebt, wird diese Sendung lieben!

HTML von a bis z-z II: Inhaltszerstückelung

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-von-lta-bis-ltz-z-i-back-to-the-root/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Jetzt ist es wieder mal soweit es war auch allerhöchste Zeit, sprechen über HTML, tut uns furchtbar leid! Wie immer länger als der Rest, also bitte keinen Neid, halt der lab’rigste Podcast, bei aller Bescheidenheit! Haben wir euch gefehlt? Habt ihr uns vermisst? Ist euch jetzt klar, dass mit Frontend die Welt schöner ist? Seid ihr wieder froh? Na, was für ein Glück, Wir sagen hallo welt!, denn wir sind zurück! 
Wir lungern in Social-Media rum, HTML von a-z, wir fangen an mit title, base, html und link und head! Die neue Serie hat zum Ziel, HTML und davon viel, und einmal komplett durch die Spec, von head bis track! Habt ihr uns vermisst? Haben wir euch gefailt? Habt ihr heimlich geweint und die Tage gezählt? Ja, wir sind zurück – es riecht nach CPU, Wo wir sind ist vorne, aus Kallsruuuh!
Wie ein Merge-Konflikt in einem Git-Repository, Wie ein plötzlicher Error in der schönsten CSP, Die einen finden’s Schei�e, die ander’n finden’s stark Genau wie jedes Jahr: 
Wir sind wieder da!

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



Retro



<ul>
<li>Retro Moritz: Pocket Casts jetzt Open Source – [00:04:59]
<ul>
<li><a href="https://github.com/Automattic/pocket-casts-ios" target="_blank" rel="noreferrer noopener">iOS app repository</a></li>



<li><a href="https://github.com/Automattic/pocket-casts-android" target="_blank" rel="noreferrer noopener">Android app repository</a></li>
</ul>
</li>



<li>Constantin: Spielereien beim Büro-Umbau – [00:10:40]
<ul>
<li><a href="https://a.wwsiv.de/-/en/Studio-Illuminated-Decorative-Recording-Decoration/dp/B09Z86YZYB/ref=sr_1_2?crid=K72QDNMOQ009&amp;keywords=auf+luft&amp;qid=1674849329&amp;sprefix=on+air%2Caps%2C119&amp;sr=8-2" target="_blank" rel="noreferrer noopener sponsored nofollow">On Air USB-Licht</a> (Affiliate&#8211;Link!)</li>



<li><a href="https://a.wwsiv.de/dp/B0B9BZS32N?psc=1&amp;ref=ppx_yo2ov_dt_b_product_details" target="_blank" rel="noreferrer noopener sponsored nofollow">Shelly Plug S</a> (Affiliate&#8211;Link!)</li>



<li><a href="https://a.wwsiv.de/-/en/gp/product/B09G2GQQNW/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&amp;psc=1" target="_blank" rel="noreferrer noopener sponsored nofollow">Yeelight LED Strip</a> (Affiliate&#8211;Link!)</li>



<li><a href="https://a.wwsiv.de/dp/B099NVJ216?psc=1&amp;ref=ppx_yo2ov_dt_b_product_details" target="_blank" rel="noreferrer noopener sponsored nofollow">Tesa Powerstrip Cable Clips</a> (Affiliate&#8211;Link!)</li>
</ul>
</li>



<li>Moritz: Elk.zone Entwicklung mit StackBlitz – [00:17:30]
<ul>
<li><a href="https://github.com/elk-zone/elk" target="_blank" rel="noreferrer noopener">Repository</a></li>
</ul>
</li>



<li>Constantin: <a href="https://codepen.io/Connum/pen/abjbpPo?editors=1111" target="_blank" rel="noreferrer noopener">:read-write Visualisierung</a> – [00:24:23]
<ul>
<li><a href="https://wowirsindistvorne.show/policy-htaccess-http-xss-csp-ole-ole/">Folge 48 Policy, htaccess &amp; HTTP – XSS, CSP, Olé Olé</a></li>



<li><a href="https://wowirsindistvorne.show/w-ai-hnachtsrueckblick/">Folge 49: W-AI-hnachtsrückblick</a>
<ul>
<li></li>
</ul>
</li>
</ul>
</li>



<li>Moritz: <a href="https://amzn.to/3XKP4bl" target="_blank" rel="noreferrer noopener sponsored nofollow">Jumpsuit/Onesie</a> (Affiliate-Link!) – [00:28:03]</li>



<li>Neues Merch-Motiv – [00:30:07]</li>
</ul>



Property der Woche: History.scrollRestauration – [00:32:23]



<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration" target="_blank" rel="noreferrer noopener">MDN</a></li>



<li><a href="https://harttle.land/scroll-restoration-demos/history-restoration.html" target="_blank" rel="noreferrer noopener">Demo</a></li>
</ul>



Tagesthema – [00:37:10]



<ol>
<li>Einleitung zu HTML allgemein – [00:41:59]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank" rel="noreferrer noopener">HTML elements reference</a></li>



<li><a href="http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf">HTML5 Element Flow Chart</a></li>
</ul>
</li>



<li></li>



<li>Main Root: &lt;html&gt; – [00:44:11]</li>



<li>Document Metadata: &lt;base&gt; – [00:49:23]
<ul>
<li><a href="https://codepen.io/Connum/pen/xxJzWZj?editors=1002" target="_blank" rel="noreferrer noopener">&lt;base&gt; Order Demo</a></li>



<li><a href="https://codepen.io/Connum/pen/poZKLNe" target="_blank" rel="noreferrer noopener">&lt;base href&gt; Anchor Links Demo</a></li>
</ul>
</li>



<li>&lt;head&gt; – [00:58:05]</li>



<li>&lt;link&gt; – [01:01:01]
<ul>
<li><a href="https://codepen.io/Connum/pen/eYjKMQr?editors=1012" target="_blank" rel="noreferrer noopener">&lt;link rel=&#8220;preload&#8220; as=&#8220;fetch&#8220;&gt; Demo</a></li>
</ul>
</li>



<li>&lt;meta&gt; – [01:18:45]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Void_element" target="_blank" rel="noreferrer noopener">MDN: Void element</a></li>



<li><a href="https://wiki.selfhtml.org/wiki/HTML/Elemente/meta" target="_blank" rel="noreferrer noopener">SELFHTML zu &lt;meta&gt;</a></li>
</ul>
</li>



<li>&lt;style&gt; – [01:36:11]
<ul>
<li><a href="https://wowirsindistvorne.show/policy-htaccess-http-xss-csp-ole-ole/">Folge 48: Policy, htaccess &amp; HTTP – XSS, CSP, Olé Olé</a></li>



<li><a href="https://mdn.github.io/css-examples/alt-style-sheets/" target="_blank" rel="noreferrer noopener">rel=&#8220;alternate stylesheet&#8220; Demo</a> (Firefox: Ansicht &gt; Webseiten-Stil)</li>
</ul>
</li>



<li>&lt;title&gt; – [01:40:52]</li>



<li>Sectioning Root: &lt;body&gt; – [01:43:14]</li>
</ol>



Das GeilTeil: <a href="https://muted.io/" target="_blank" rel="noreferrer noopener">muted.io</a> – [01:47:48]



Das Ende – [01:58:10]

Jetzt ist es wieder mal soweit es war auch allerhöchste Zeit, sprechen über HTML, tut uns furchtbar leid! Wie immer länger als der Rest, also bitte keinen Neid, halt der lab’rigste Podcast, bei aller Bescheidenheit! Haben wir euch gefehlt? Habt ihr uns vermisst? Ist euch jetzt klar, dass mit Frontend die Welt schöner ist? Seid ihr wieder froh? Na, was für ein Glück, Wir sagen hallo welt!, denn wir sind zurück!
Wir lungern in Social-Media rum, HTML von a-z, wir fangen an mit title, base, html und link und head! Die neue Serie hat zum Ziel, HTML und davon viel, und einmal komplett durch die Spec, von head bis track! Habt ihr uns vermisst? Haben wir euch gefailt? Habt ihr heimlich geweint und die Tage gezählt? Ja, wir sind zurück – es riecht nach CPU, Wo wir sind ist vorne, aus Kallsruuuh!

Wie ein Merge-Konflikt in einem Git-Repository, Wie ein plötzlicher Error in der schönsten CSP, Die einen finden’s Schei�e, die ander’n finden’s stark Genau wie jedes Jahr:
Wir sind wieder da!

Die neue Serie hat zum Ziel, HTML und davon viel, und einmal komplett durch die Spec! Ja, wir sind zurück – es riecht nach CPU, Wo wir sind ist vorne, aus Kallsruuuh!

Jetzt ist es wieder mal soweit es war auch allerhöchste Zeit, sprechen über HTML, tut uns furchtbar leid! Wie immer länger als der Rest, also bitte keinen Neid, halt der lab’rigste Podcast, bei aller Bescheidenheit! Haben wir euch gefehlt? Habt ihr uns vermisst? Ist euch jetzt klar, dass mit Frontend die Welt schöner ist? Seid ihr wieder froh? Na, was für ein Glück, Wir sagen hallo welt!, denn wir sind zurück!
Wir lungern in Social-Media rum, HTML von a-z, wir fangen an mit title, base, html und link und head! Die neue Serie hat zum Ziel, HTML und davon viel, und einmal komplett durch die Spec, von head bis track! Habt ihr uns vermisst? Haben wir euch gefailt? Habt ihr heimlich geweint und die Tage gezählt? Ja, wir sind zurück – es riecht nach CPU, Wo wir sind ist vorne, aus Kallsruuuh!

Wie ein Merge-Konflikt in einem Git-Repository, Wie ein plötzlicher Error in der schönsten CSP, Die einen finden’s Schei�e, die ander’n finden’s stark Genau wie jedes Jahr:
Wir sind wieder da!

HTML von a bis z-z I: Back to the root

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/w-ai-hnachtsrueckblick/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Wir sprechen über die aktuelle AI-Landschaft in Form von AI-Bildgeneratoren wie Midjourney, Dall-e und Stable Diffusion, aber auch Text-AI wie ChatGPT und zeigen, dass AI sogar mittlerweile Musik machen kann. Außerdem: Welche Web-Technologien sind neu am Horizont und was kam nicht so richtig in die Pötte. Dazu resümieren wir über den feuerspeienden Scheiße-Twi(s)tter und geben Empfehlungen, wie man es im Homeoffice schön kuschlig hat. 
Die Zukunft ist Pink! &#x1f496;

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



<ul>
<li>Constantin: :read-write im Einsatz – [00:05:21]</li>



<li>Moritz: Codeanalyse mit Sonarqube – [00:07:54]
<ul>
<li><a href="https://wowirsindistvorne.show/rage-macht-die-nase-frei/">Folge 37: Rage macht die Nase frei</a></li>
</ul>
</li>



<li>Constantin: <a href="https://www.git-installer.com/" target="_blank" rel="noreferrer noopener">git-installer</a> &#8211; WordPress Plugin um Themes bei Github zu hosten und von dort aus zu synchronisieren – [00:15:09]
<ul>
<li><a href="https://github.com/marketplace/actions/http-request-action" target="_blank" rel="noreferrer noopener">GitHub Action: HTTP Request Action</a></li>
</ul>
</li>



<li>Moritz: Apple Watch App-Entwicklung – [00:18:54]</li>



<li>Constantin: mal wieder Hardware-Sonderfall – [00:27:08]</li>



<li>Constantin: twitter sperrt unliebsame Journalisten – [00:31:13]
<ul>
<li><a href="https://mastodon.social/@wwsiv" target="_blank" rel="noreferrer noopener">@wwsiv@mastodon.social</a></li>
</ul>
</li>
</ul>



Property der Woche: HTTP Header &#8222;Clear-Site-Data&#8220; – [00:40:58]



<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Clear-Site-Data" target="_blank" rel="noreferrer noopener">MDN</a> / <a href="https://caniuse.com/?search=clear-site-data" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>



Tagesthema



<ol>
<li>AI und kein Ende – [00:49:07]
<ul>
<li><a href="https://www.zeit.de/digital/2020-11/richard-socher-kuenstliche-intelligenz-interviewpodcast-alles-gesagt" target="_blank" rel="noreferrer noopener">Alles gesagt?: Richard Socher, was denken Maschinen?</a></li>



<li><a href="https://arstechnica.com/information-technology/2022/12/artstation-artists-stage-mass-protest-against-ai-generated-artwork/" target="_blank" rel="noreferrer noopener">Proteste gegen AI-Kunst</a></li>



<li><a href="https://s3.eu-central-1.amazonaws.com/mtmellor/blog/tonfilmrevolution/tonfilm-verbieten.png" target="_blank" rel="noreferrer noopener">Der Tonfilm &#8211; Eine Gefahr für den Musikerberuf und für die Musikkultur</a></li>



<li><a href="https://www.reddit.com/r/de/comments/5mcnck/rettet_unsere_k%C3%BCnstler_tonfilm_ist_mord/" target="_blank" rel="noreferrer noopener">Rettet unsere Künstler! Tonfilm ist Mord!</a></li>



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



<li>Rückblick – [01:26:13]
<ul>
<li><a href="https://wowirsindistvorne.show/machts-gut-und-danke-fuer-die-kommentare/">Folge 42: Macht’s gut, und danke für die Kommentare!</a></li>



<li><a href="https://wowirsindistvorne.show/jaeger-der-verlorenen-css-features-kapitel-i/">Folge 10: Jäger der verlorenen CSS-Features – Kapitel I</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://wowirsindistvorne.show/i-can-hasparent-selector/">Folge 41: I can :has(parent selector)?</a></li>



<li><a href="https://open-ui.org/prototypes/selectmenu" target="_blank" rel="noreferrer noopener">selectmenu</a></li>



<li><a href="https://wowirsindistvorne.show/select-from-menu/">Folge 39: SELECT * FROM MENU</a></li>



<li><a href="https://github.com/Fyrd/caniuse/issues/6194" target="_blank" rel="noreferrer noopener">caniuse issue zu selectmenu</a></li>



<li>subgrid tickets: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=618969" target="_blank" rel="noreferrer noopener">Chromium</a> / <a href="https://bugs.webkit.org/show_bug.cgi?id=202115" target="_blank" rel="noreferrer noopener">Safari #1</a> / <a href="https://bugs.webkit.org/show_bug.cgi?id=236821" target="_blank" rel="noreferrer noopener">Safari #2</a></li>



<li><a href="https://caniuse.com/css-subgrid" target="_blank" rel="noreferrer noopener">caniuse subgrid</a></li>



<li><a href="https://wowirsindistvorne.show/frontend-feldfruechte-mit-anselm-hannemann/">Folge 40: Frontend &amp; Feldfrüchte mit Anselm Hannemann</a></li>



<li><a href="https://www.a.wwsiv.de/-/en/gp/product/B00BD1C2YM/ref=ppx_yo_dt_b_search_asin_title?ie=UTF8&amp;psc=1" target="_blank" rel="noreferrer noopener sponsored nofollow">Bingenheimer Saatgut &#8211; Winter Postelein (Amazon Referral-Link)</a></li>
</ul>
</li>
</ol>



Das GeilTeil: Wärmflaschen und Onesies – [01:43:51] Das Ende: DANKE! – [01:51:12]

Wir sprechen über die aktuelle AI-Landschaft in Form von AI-Bildgeneratoren wie Midjourney, Dall-e und Stable Diffusion, aber auch Text-AI wie ChatGPT und zeigen, dass AI sogar mittlerweile Musik machen kann. Außerdem: Welche Web-Technologien sind neu am Horizont und was kam nicht so richtig in die Pötte. Dazu resümieren wir über den feuerspeienden Scheiße-Twi(s)tter und geben Empfehlungen, wie man es im Homeoffice schön kuschlig hat.
Die Zukunft ist Pink! 💖

Themen: die aktuelle AI-Landschaft in Form von AI-Bildgeneratoren wie Midjourney, Dall-e und Stable Diffusion, aber auch ChatGPT. AI kann mittlerweile Musik. Außerdem: Welche Web-Technologien sind neu am Horizont und was kam nicht so richtig in die Pötte.

Wir sprechen über die aktuelle AI-Landschaft in Form von AI-Bildgeneratoren wie Midjourney, Dall-e und Stable Diffusion, aber auch Text-AI wie ChatGPT und zeigen, dass AI sogar mittlerweile Musik machen kann. Außerdem: Welche Web-Technologien sind neu am Horizont und was kam nicht so richtig in die Pötte. Dazu resümieren wir über den feuerspeienden Scheiße-Twi(s)tter und geben Empfehlungen, wie man es im Homeoffice schön kuschlig hat.
Die Zukunft ist Pink! 💖

W-AI-hnachtsrückblick

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

Die vereinigten Staaten von HTML-istan

Wo wir sind ist vorne.

HTML von a bis z-z III: Text Content (Teil 2)

Wo wir sind ist vorne.

Konferenzorganisation mit Marc Thiele

Wo wir sind ist vorne.

VAR WARS: A New Scope

Wo wir sind ist vorne.

Lebenszeichen

Wo wir sind ist vorne.

Beyond. #btconf

Wo wir sind ist vorne.

HTML von a bis z-z III: Text Content

Wo wir sind ist vorne.

Accessibility, Frontend und der ganze Rest mit Manuel Matuzović

Wo wir sind ist vorne.

4 eher unbekannte Properties

Wo wir sind ist vorne.

HTML von a bis z-z II: Inhaltszerstückelung

Wo wir sind ist vorne.

HTML von a bis z-z I: Back to the root

Wo wir sind ist vorne.

W-AI-hnachtsrückblick

Wo wir sind ist vorne.