Diese Sendung soll nie aufhören? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/barrierefreiheit-gaming-und-der-ganze-rest-mit-svenja/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Wie benutzt eine blinde Person Websites? Wie entwickelt sie? Was sind übliche Stolpersteine im Web? Wie träumt eine blinde Person? Wie denkt sie über Farben, über Typografie? Wie zockt eine blinde Person eigentlich Computerspiele und welche Hilfsmittel braucht sie dafür? All das und noch viel mehr dürften wir die blinde Developerin und Gamerin Svenja fragen! Dabei ging uns eine ganze Lichterkette auf . Dazu lernen wir noch, wie man im Browser den Akkustatus ausliest, und Sarah erzählt vom Leben jenseits des Codes. 
Über drei Stunden mit den lieblichsten Stimmchen der Tech-Podcast-Welt. Kringelig.

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



Retro



<ul class="wp-block-list">
<li>Moritz: Umzug – [00:09:47]</li>



<li>Svenja: A11Y-Sessions – [00:11:54]</li>



<li>Sarah: A Life Beyond Coding – [00:21:27]</li>



<li>Moritz: Bildgenerierung mit ChatGPT Pro – [00:41:56]</li>
</ul>



Property der Woche: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery" target="_blank" rel="noreferrer noopener">navigator.getBattery()</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/API/BatteryManager" target="_blank" rel="noreferrer noopener">BatteryManager</a> – [00:59:00]



<ul class="wp-block-list">
<li><a href="https://caniuse.com/?search=getBattery" target="_blank" rel="noreferrer noopener">caniuse: getBattery()</a></li>



<li><a href="https://codepen.io/SarahGross/pen/QwWejrx?editors=1112" target="_blank" rel="noreferrer noopener">Sarahs CodePen-Demo</a></li>
</ul>



Entscheide Dich! – [01:06:30]



Einschub Sarah: ChatGPT-Dadaismus – [01:12:11]



<ul class="wp-block-list">
<li><a href="https://chatgpt.com/share/6800f8f4-29b0-8006-8680-7790c4538fd0" target="_blank" rel="noreferrer noopener">ChatGPT-Session nachlesen</a></li>
</ul>



Tagesthema



<ul class="wp-block-list">
<li>1. Allgemein – [01:14:54]
<ul class="wp-block-list">
<li><a href="https://svenja-blog.de/" target="_blank" rel="noreferrer noopener">svenja-blog.de</a></li>



<li><a href="https://mstdn.games/@svenja" target="_blank" rel="noreferrer noopener">@svenja@mstdn.games</a></li>



<li><a href="https://www.bemyeyes.com/" target="_blank" rel="noreferrer noopener">be my eyes</a></li>
</ul>
</li>



<li>2. Web – [01:57:37]
<ul class="wp-block-list">
<li><a href="https://www.youtube.com/watch?v=M3Uog0F4-Ac" target="_blank" rel="noreferrer noopener">Our approach to accessibility at Miro, a real-time collaboration platform &#8211; axe-con 2023</a> auf YouTube</li>



<li><a href="https://adrianroselli.com/2025/03/dont-use-fake-bold-or-italic-in-social-media.html" target="_blank" rel="noreferrer noopener">Adrian Roselli: Don’t Use Fake Bold or Italic in Social Media</a></li>
</ul>
</li>



<li>3. Gaming – [02:39:52]
<ul class="wp-block-list">
<li><a href="https://www.youtube.com/watch?v=g4xxRk5umx8" target="_blank" rel="noreferrer noopener">How Blind People Play Stardew Valley With This Accessibility Mod!</a> auf YouTube</li>
</ul>
</li>
</ul>



GeilTeil



<ul class="wp-block-list">
<li>Sarah: Web Weekly / Browser choice – [02:58:05]
<ul class="wp-block-list">
<li><a href="https://webweekly.email/" target="_blank" rel="noreferrer noopener">Web Weekly — Your friendly web development newsletter</a></li>



<li><a href="https://wowirsindistvorne.show/grosse-und-kleine-helfer-mit-stefan-judis/">Folge 66: Große und kleine Helfer mit Stefan Judis</a></li>



<li><a href="https://beeps.website/blog/2025-03-29-browser-choice-is-an-accessibility-consideration/" target="_blank" rel="noreferrer noopener">Browser choice is an accessibility consideration</a></li>
</ul>
</li>



<li>Svenja: <a href="https://pen-and-paper.info/" target="_blank" rel="noreferrer noopener">pen-and-paper.info</a> – [03:01:01]</li>
</ul>



Das Ende – [03:05:20]

Wie benutzt eine blinde Person Websites? Wie entwickelt sie? Was sind übliche Stolpersteine im Web? Wie träumt eine blinde Person? Wie denkt sie über Farben, über Typografie? Wie zockt eine blinde Person eigentlich Computerspiele und welche Hilfsmittel braucht sie dafür? All das und noch viel mehr dürften wir die blinde Developerin und Gamerin Svenja fragen! Dabei ging uns eine ganze Lichterkette auf . Dazu lernen wir noch, wie man im Browser den Akkustatus ausliest, und Sarah erzählt vom Leben jenseits des Codes.
Über drei Stunden mit den lieblichsten Stimmchen der Tech-Podcast-Welt. Kringelig.

Wo wir sind ist vorne.

Wie benutzt eine blinde Person Websites? Wie entwickelt sie? Was sind übliche Stolpersteine im Web? Wie träumt eine blinde Person? Wie denkt sie über Farben, über Typografie? Wie zockt eine blinde Person eigentlich Computerspiele?

Barrierefreiheit, Gaming und der ganze Rest mit Svenja

Diese Sendung soll nie aufhören? 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-ix-embedded-content/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
HAA-TEH-EMM-ELL! Embeds! Auf dem Weg durch den Dev-Dschungel verschlug es die beiden Semantik-Abenteurer Sarah und Moritz in die Untiefen der eingebetteten Inhalte. Totgeglaubte Kreaturen wie embed und object, treffen auf echte Klassiker (iframe) und new Kids in Town (fencedframe). Ein wilder Ritt durch die Vergangenheit, Gegenwart mit einer Prise Zukunftsmusik. Und seid auch das nächste Mal wieder dabei, wenn es wieder heißt: Wie man sich embedded, so liegt man!

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



Retro



<ul class="wp-block-list">
<li>Sarah: Scan Server Add-On for Home Assistant – [00:03:51]
<ul class="wp-block-list">
<li><a href="https://github.com/Connum/addon-debian-base-scansupport" target="_blank" rel="noreferrer noopener">addon-debian-base-scansupport</a></li>



<li><a href="https://github.com/Connum/homeassistant-addon-scanserver" target="_blank" rel="noreferrer noopener">homeassistant-addon-scanserver</a></li>



<li><a href="https://wowirsindistvorne.show/html-von-a-bis-z-z-viii-video-und-audio/#comment-20683">Schepp&#8217;s Kommentar zur letzten Folge</a></li>
</ul>
</li>



<li>Moritz: Danke für Spenden und Abos – [00:15:18]
<ul class="wp-block-list">
<li><a href="https://wwsiv.de/spende" target="_blank" rel="noreferrer noopener">wwsiv.de/spende</a></li>
</ul>
</li>



<li>Sarah: OSS development vent – [00:20:31]
<ul class="wp-block-list">
<li><a href="https://github.com/opentypejs/opentype.js" target="_blank" rel="noreferrer noopener">opentype.js</a></li>
</ul>
</li>



<li>Moritz: <a href="https://pa11y.org/" target="_blank" rel="noreferrer noopener">pa11y</a> + pa11y-dashboard – [00:25:48]</li>



<li>Moritz: Accesibility Resources – [00:35:50]</li>



<li><a href="https://mastodon.social/@MoritzGlantz/114177168049139470" target="_blank" rel="noreferrer noopener">Mastodon Thread</a></li>



<li>Moritz: Freelancing. Fun with Screenreaders – [00:47:22]</li>
</ul>



Property der Woche: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API" target="_blank" rel="noreferrer noopener">Screen Wake Lock API</a> – [00:49:02]



Tagesthema: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" target="_blank" rel="noreferrer noopener">embed</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" target="_blank" rel="noreferrer noopener">object</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" target="_blank" rel="noreferrer noopener">iframe</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fencedframe" target="_blank" rel="noreferrer noopener">fencedframe</a> – [00:54:49]



<ul class="wp-block-list">
<li><a href="https://docs.google.com/spreadsheets/d/1TtOMr_w58HvqNBv4RIWX021Lxm6m5ajYOcRykrPdAJc/edit?gid=248650818#gid=248650818" target="_blank" rel="noreferrer noopener">Markup 2024 Spreadsheet der meist genutzten HTML-Elemente</a></li>



<li><a href="https://www.w3.org/TR/html401/struct/objects.html" target="_blank" rel="noreferrer noopener">W3C: Objects, Images, and Applets</a></li>



<li>referrer-policy &#8211; <a href="https://wowirsindistvorne.show/html-von-a-bis-z-z-iv-a-tag-to-rule-them-all/">Folge: 62 HTML VON A BIS Z-Z IV: A Tag To Rule Them All</a></li>



<li>CSP &#8211; <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://caniuse.com/?search=fencedframe" target="_blank" rel="noreferrer noopener">fencedframe auf caniuse.com</a></li>
</ul>



GeilTeil: REVENGE.CSS – [01:36:09]



<ul class="wp-block-list">
<li><a href="https://github.com/Heydon/REVENGE.CSS" target="_blank" rel="noreferrer noopener">Heydon/REVENGE.CSS</a></li>



<li><a href="https://github.com/ffoodd/a11y.css" target="_blank" rel="noreferrer noopener">ffoodd/a11y.css</a></li>
</ul>



Das Ende – [01:40:54]

HAA-TEH-EMM-ELL! Embeds! Auf dem Weg durch den Dev-Dschungel verschlug es die beiden Semantik-Abenteurer Sarah und Moritz in die Untiefen der eingebetteten Inhalte. Totgeglaubte Kreaturen wie embed und object, treffen auf echte Klassiker (iframe) und new Kids in Town (fencedframe). Ein wilder Ritt durch die Vergangenheit, Gegenwart mit einer Prise Zukunftsmusik. Und seid auch das nächste Mal wieder dabei, wenn es wieder heißt: Wie man sich embedded, so liegt man!

Auf dem Weg durch den Dev-Dschungel verschlug es die beiden Abenteurer Sarah und Moritz in die Untiefen der eingebetteten Inhalte. Totgeglaubte Kreaturen wie embed und object, treffen auf echte Klassiker (iframe) und new Kids in Town (fencedframe).

HTML VON A BIS Z-Z IX: Embedded Content

Diese Sendung soll nie aufhören? 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-viii-video-und-audio/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Die HTML-Serie zieht weiter, dem Sultan ists wurscht. Aber uns nicht! Wir sezieren Audio- und Video-Element mit allen möglichen Attributen, Track und Source und Soße mit Scharf! Als Beilagen gibt es einen Ausflug zu hassOS Add-Ons und den ultimativen Web Standards Battle Rap! Yo!

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



Retro



<ul class="wp-block-list">
<li>Sarah: Berufliche Veränderung – [00:04:37]
<ul class="wp-block-list">
<li><a href="https://sarahg.de" target="_blank" rel="noreferrer noopener">sarahg.de</a></li>
</ul>
</li>



<li>Sarah: Uberspace + Vaultwarden + Bitwarden = <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/2764.png" alt="❤" class="wp-smiley" style="height: 1em; max-height: 1em;" /> – [00:12:45]
<ul class="wp-block-list">
<li>Uberlab: <a href="https://lab.uberspace.de/guide_vaultwarden/" target="_blank" rel="noreferrer noopener">vaultwarden</a> / <a href="https://lab.uberspace.de/guide_syncthing/" target="_blank" rel="noreferrer noopener">syncthing</a></li>
</ul>
</li>



<li>Moritz: MacBook pro 16&#8243; vs 14&#8243; – [00:16:06]</li>



<li>Moritz: Teaser Web Standards Battle Rap – [00:19:36]</li>



<li>Sarah: Bastelprojekt scan server als hassOS Add-On – [00:22:08]
<ul class="wp-block-list">
<li><a href="http://www.sane-project.org/" target="_blank" rel="noreferrer noopener">SANE</a></li>



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



<li><a href="https://github.com/Connum/homeassistant-addon-scanserver" target="_blank" rel="noreferrer noopener">homeassistant-addon-scanserver</a></li>
</ul>
</li>
</ul>



Property der Woche: Javascript Temporal – [00:40:30]



<ul class="wp-block-list">
<li><a href="https://developer.mozilla.org/en-US/blog/javascript-temporal-is-coming/" target="_blank" rel="noreferrer noopener">MDN Blog Post zu Javascript Temporal</a></li>



<li><a href="https://wowirsindistvorne.show/ist-das-frontend-oder-kann-das-weg/">Folge 3: Ist das Frontend, oder kann das weg?</a></li>
</ul>



Tagesthema: &lt;video&gt; und &lt;audio&gt; – [00:46:05]



<ul class="wp-block-list">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" target="_blank" rel="noreferrer noopener">&lt;video&gt;</a></li>



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



<li><a href="https://caniuse.com/mdn-html_elements_audio_autoplay">caniuse autoplay</a></li>



<li><a href="https://codepen.io/MoritzGlantz/pen/JojGjao" target="_blank" rel="noreferrer noopener">Moritz&#8216; CodePen-Demo</a></li>



<li><a href="https://wicg.github.io/controls-list/explainer.html" target="_blank" rel="noreferrer noopener">HTMLMediaElement controlsList explained</a></li>



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



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



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



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



<li><a href="https://brenopolanski.github.io/html5-video-webvtt-example/" target="_blank" rel="noreferrer noopener">WebVTT-Demo</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Ranges" target="_blank" rel="noreferrer noopener">Accept-Ranges Header (Range Requests)</a></li>



<li><a href="https://blog.shahednasser.com/how-to-style-an-audio-element/" target="_blank" rel="noreferrer noopener">How to Style an Audio Element</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Containers" target="_blank" rel="noreferrer noopener">Media container formats (file types)</a></li>



<li><a href="https://dequeuniversity.com/rules/axe/4.0/audio-caption" target="_blank" rel="noreferrer noopener">audio captions</a></li>



<li><a href="https://www.iandevlin.com/blog/2015/12/html5/webvtt-and-audio/" target="_blank" rel="noreferrer noopener">Ian Devlin: WebVTT and Audio</a></li>



<li><a href="https://www.youtube.com/watch?v=jD4JZsGaCo8" target="_blank" rel="noreferrer noopener">Korrekte Aussprache: Synthesizer</a></li>
</ul>



GeilTeil: <a href="https://www.youtube.com/watch?v=zTFWgEBVf6Q" target="_blank" rel="noreferrer noopener">It all means nothing in the end / Amy Hupe / FFConf 2024</a> – [01:40:18]



Web Standards Battle Rap – [01:43:59]



Das Ende – [01:47:27]

Die HTML-Serie zieht weiter, dem Sultan ists wurscht. Aber uns nicht! Wir sezieren Audio- und Video-Element mit allen möglichen Attributen, Track und Source und Soße mit Scharf! Als Beilagen gibt es einen Ausflug zu hassOS Add-Ons und den ultimativen Web Standards Battle Rap! Yo!

Wir sezieren Audio- und Video-Element mit allen möglichen Attributen, Track und Source und Soße mit Scharf! Als Beilagen gibt es einen Ausflug zu hassOS Add-Ons und den den ultimativen Web Standards Battle Rap! Yo!

HTML VON A BIS Z-Z VIII: video und audio

Diese Sendung soll nie aufhören? 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-vii-img-map-und-area/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Die HTML-Serie geht weiter mit img, map und area. Dabei holen wir ein paar wirklich obskure Implementierungsdetails aus der Mottenkiste. Dazu gibts Infos zu privaten Veränderungen und unserer weiteren Twitch-Karriere.

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



Retro



<ul class="wp-block-list">
<li>Moritz: Neuer Nachname – [00:05:07]
<ul class="wp-block-list">
<li><a href="https://moritzglantz.de/blog/posts/a-change-of-seasons/" target="_blank" rel="noreferrer noopener">A Change of Seasons</a> auf Moritz&#8216; Blog</li>
</ul>
</li>



<li>Sarah: Linux status quo – [00:07:40]</li>



<li>Moritz: <a href="https://moritzglantz.de/morsekode/" target="_blank" rel="noreferrer noopener">Morsekode</a> ·&#8211; ·&#8211; ··· ·· ···- – [00:17:48]</li>



<li>Moritz: <a href="https://workingdraft.de/644/" target="_blank" rel="noreferrer noopener">Working Draft zum Barrierefreiheitsstärkungsgesetz</a> – [00:23:17]</li>



<li>Twitch-Zukunft – [00:25:31]</li>
</ul>



Property der Woche: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing" target="_blank" rel="noreferrer noopener">CSS field-sizing</a> – [00:30:41]



<ul class="wp-block-list">
<li><a href="https://codepen.io/MoritzGlantz/pen/zYNyxPO" target="_blank" rel="noreferrer noopener">CodePen-Demo</a></li>
</ul>



Tagesthema



<ol class="wp-block-list">
<li>&lt;img> – [00:36:40]
<ul class="wp-block-list">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" target="_blank" rel="noreferrer noopener">&lt;img > auf MDN</a></li>



<li><a href="https://www.w3.org/WAI/tutorials/images/decision-tree/" target="_blank" rel="noreferrer noopener">&#8222;alt&#8220; attribute decision tree</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin#" target="_blank" rel="noreferrer noopener">crossorigin auf MDN</a></li>



<li><a href="https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/" target="_blank" rel="noreferrer noopener">What does the image decoding attribute actually do?</a></li>



<li>fetchpriority: <a href="https://wowirsindistvorne.show/die-vereinigten-staaten-von-html-istan/">Folge 60</a></li>



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



<li>loading=&#8220;lazy&#8220;: <a href="https://wowirsindistvorne.show/ccc-corona-cloud-und-chaos/">Folge 2</a></li>



<li>referrerpolicy analog &lt;a>: <a href="https://wowirsindistvorne.show/html-von-a-bis-z-z-iv-a-tag-to-rule-them-all/">Folge 62</a></li>



<li>Stefan Judis: <a href="https://www.stefanjudis.com/notes/should-responsive-images-work-with-container-queries/" target="_blank" rel="noreferrer noopener">Should responsive images work with container queries?</a></li>



<li>Chris Coyier: <a href="https://chriscoyier.net/2023/06/23/sizesauto-is-a-great-idea/" target="_blank" rel="noreferrer noopener">sizes=auto is a great idea</a></li>



<li>Implementation issues:
<ul class="wp-block-list">
<li><a href="https://issues.chromium.org/issues/40862170">Chromium</a></li>



<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1819581" target="_blank" rel="noreferrer noopener">Firefox</a></li>



<li><a href="https://bugs.webkit.org/show_bug.cgi?id=253143" target="_blank" rel="noreferrer noopener">Safari</a></li>
</ul>
</li>
</ul>
</li>



<li>&lt;map> &amp; &lt;area> – [01:08:34]
<ul class="wp-block-list">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map" target="_blank" rel="noreferrer noopener">&lt;map> auf MDN</a></li>



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



<li>Attribute download, href, ping, referrerpolicy, rel, target analog &lt;a>: <a href="https://wowirsindistvorne.show/html-von-a-bis-z-z-iv-a-tag-to-rule-them-all/">Folge 62</a></li>



<li><a href="https://html.spec.whatwg.org/multipage/image-maps.html#image-maps" target="_blank" rel="noreferrer noopener">image maps HTML Standard</a></li>



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



GeilTeil: Musical – [01:33:10]



Das Ende – [01:39:27]

Die HTML-Serie geht weiter mit img, map und area. Dabei holen wir ein paar wirklich obskure Implementierungsdetails aus der Mottenkiste. Dazu gibts Infos zu privaten Veränderungen und unserer weiteren Twitch-Karriere.

Die HTML-Serie geht weiter mit img, map und area. Dabei holen wir ein paar wirklich obskure Implementierungsdetails aus der Mottenkiste. Dazu gibts Infos zu private Veränderungenn und unserer weiteren Twitch-Karriere.

HTML VON A BIS Z-Z VII: img, map und area

Diese Sendung soll nie aufhören? Unterstütze uns mit einer <a href="https://wowirsindistvorne.show/spenden" rel="payment">Spende ♥</a>
Feedback? <a href="https://wowirsindistvorne.show/accessibility-overlays-mit-daniela-kubesch/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Es ist wieder Podcast! Wir sprechen mit Daniela Kubesch über ihre Forschung zu Accessibility Overlays, welche Erkenntnisse sich dadurch gewinnen ließen und auch welche überraschenden Ergebnisse dabei Zutage traten. Dazu gibt’s einen AI-Helper der euch hilft dem LLM eurer Wahl Fragen zu eurem Projekt zu stellen, einen automatischen Website-Accessibility-Scanner (mit Frontend), weihnachtliche Musik und ein diebisches Browser-Plugin. Hohoho! 

<ul class="wp-block-list">
<li>Begrüßung – [00:00:56]</li>



<li>Retro
<ul class="wp-block-list">
<li>Sarah: <a href="https://www.npmjs.com/package/acfp" target="_blank" rel="noreferrer noopener">acfp 1.1.0 auf npm</a> – [00:03:32]</li>



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



<li>Entscheide Dich! – [00:09:57]</li>



<li>Tagesthema – [00:15:00]
<ul class="wp-block-list">
<li>Accessibility Overlays – The good, the bad and the ugly</li>



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



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



<li>GeilTeil
<ul class="wp-block-list">
<li>Moritz: <a href="https://pa11y.org/" target="_blank" rel="noreferrer noopener">Pa11y</a> – [00:52:00]</li>



<li>Moritz: <a href="https://www.youtube.com/watch?v=ojQI3clg40o" target="_blank" rel="noreferrer noopener">Jacob Collier &#8211; Three Christmas Songs (An Abbey Road Live-To-Vinyl Cut)</a> – [00:59:31]</li>



<li>Daniela: <a href="https://chromewebstore.google.com/detail/button-stealer/iiikidmnimlpahbeknmkeonmemajpccj?hl=en">Button Stealer</a> – [01:02:43]
<ul class="wp-block-list">
<li><a href="https://chromewebstore.google.com/detail/netbeep/hcgpboeddcgldkgimfmcnfloonkccfmi">netbeep</a></li>



<li><a href="https://blog.castac.org/2022/04/disability-dongle/" target="_blank" rel="noreferrer noopener">„Disability Dongle“ von Liz Jackson, Alex Haagaard und Rua Williams</a></li>



<li><a href="https://raul.de/allgemein/disability-dongle-wenn-nicht-behinderte-loesungen-fuer-behinderte-menschen-kreieren/" target="_blank" rel="noreferrer noopener">Raúl Krauthausen &#8211; „Disability Dongle“: Wenn nicht behinderte Lösungen für behinderte Menschen kreieren</a></li>



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



<li>Das Ende – [01:07:36]
<ul class="wp-block-list">
<li><a href="https://dnikub.dev/" target="_blank" rel="noreferrer noopener">dnikub.dev</a></li>
</ul>
</li>
</ul>

Es ist wieder Podcast! Wir sprechen mit Daniela Kubesch über ihre Forschung zu Accessibility Overlays, welche Erkenntnisse sich dadurch gewinnen ließen und auch welche überraschenden Ergebnisse dabei Zutage traten. Dazu gibt’s einen AI-Helper der euch hilft dem LLM eurer Wahl Fragen zu eurem Projekt zu stellen, einen automatischen Website-Accessibility-Scanner (mit Frontend), weihnachtliche Musik und ein diebisches Browser-Plugin. Hohoho!

Wir sprechen mit Daniela Kubesch über ihre Forschung zu Accessibility Overlays. Testaufbau, Ablauf, Ergebnisse, Erkenntnisse, aber auch welche überraschenden Ergebnisse dabei Zutage traten.

Accessibility Overlays mit Daniela Kubesch

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/wir-sind-zwei-berliner-sondersendung-subscribe11/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Wir sind Berliner! Oder Pfannkuchen?! Oder Eier… lassen wir das. Wir waren auf der Podcast-Konferenz „Subscribe“ in Berlin und haben im Hotel vor Ort noch eine Sendung zu unseren Eindrücken der Konferenz aufgenommen. Technik, Programmiersprachen, PR, Transkripte, Networking und ermunternde Worte. Alles war dabei. Nächstes mal wieder Frontend. Versprochen!

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



Retro: SUBSCRIBE11 Sondersendung – [00:04:17]



<ul class="wp-block-list">
<li><a href="https://ultraschall.fm/" target="_blank" rel="noreferrer noopener">Ultraschall &#8211; HighEnd Podcasting für alle</a></li>



<li>ZEIT-Podcast <a href="https://www.zeit.de/serie/alles-gesagt" target="_blank" rel="noreferrer noopener">&#8222;Alles gesagt?&#8220;</a></li>



<li><a href="https://das-sendezentrum.de/subscribe/sub11/" target="_blank" rel="noreferrer noopener">Konferenz-Website</a></li>



<li><a href="https://media.ccc.de/c/subscribe11" target="_blank" rel="noreferrer noopener">SUBSCRIBE11-Videos auf media.ccc.de</a></li>



<li><a href="https://pretalx.c3voc.de/subscribe11/talk/PCCWDW/" target="_blank" rel="noreferrer noopener">Unser Talk &#8222;Twitch für Podcastende&#8220;</a> (VOD <a href="https://www.twitch.tv/videos/2279861438" target="_blank" rel="noreferrer noopener">auf Twitch</a>)</li>



<li><a href="https://www.bauhausfaces.com/" target="_blank" rel="noreferrer noopener">&#8222;Bauhaus Faces&#8220; Podcast</a></li>



<li><a href="https://python-podcast.de/show/" target="_blank" rel="noreferrer noopener">Python Podcast</a></li>



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



<li><a href="https://stoplight.io/solutions" target="_blank" rel="noreferrer noopener">Stoplight Studio</a></li>



<li><a href="https://docs.podlove.org/podlove-publisher/api/" target="_blank" rel="noreferrer noopener">Podlove API Docs</a></li>



<li><a href="https://laravel.com/" target="_blank" rel="noreferrer noopener">Laravel PHP Framework</a></li>



<li><a href="https://github.com/protonemedia/laravel-ffmpeg" target="_blank" rel="noreferrer noopener">laravel-ffmpeg</a></li>



<li><a href="https://www.mural.co/" target="_blank" rel="noreferrer noopener">Mural</a></li>
</ul>

Wir sind Berliner! Oder Pfannkuchen?! Oder Eier… lassen wir das. Wir waren auf der Podcast-Konferenz „Subscribe“ in Berlin und haben im Hotel vor Ort noch eine Sendung zu unseren Eindrücken der Konferenz aufgenommen. Technik, Programmiersprachen, PR, Transkripte, Networking und ermunternde Worte. Alles war dabei. Nächstes mal wieder Frontend. Versprochen!

Wir waren auf der Podcast-Konferenz „Subscribe“ in Berlin und haben im Hotel vor Ort noch eine Sendung zu unseren Eindrücken der Konferenz aufgenommen. Technik, Programmiersprachen, PR, Transkripte, Networking und ermunternde Worte.

Wir sind zwei Berliner! (Sondersendung SUBSCRIBE11)

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/grosse-und-kleine-helfer-mit-stefan-judis/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Auferstanden nach Wochen der Stille präsentiert sich #WWSIV wieder mit Gast! Mit Stefan Judis sprechen wir über Web Standards, Inspiration und wo er die immer heißen News für seinen Newsletter her bekommt. Dazu gibts einen Font mit eingebautem Syntax-Highlighting und Heimautomatisierung. Tinkerbell hätte keine zauberhaftere Folge herbeiklamüsern können 

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



Retro



<ul class="wp-block-list">
<li>Sarah: Heimautomatisierung mit <a href="https://www.home-assistant.io/" target="_blank" rel="noreferrer noopener">Home Assistant</a> – [00:04:53]</li>



<li>Moritz: <a href="https://wowirsindistvorne.myspreadshop.de/accessibility+cheat+sheet+poster-A66d890cf3de4d46a1d11c267?productType=1304&amp;sellable=krqpql57yji0LrO7OgV9-1304-202&amp;appearance=1&amp;size=29" target="_blank" rel="noreferrer noopener">Accessibility Cheat Sheet wieder im Shop als Poster</a> – [00:16:43]</li>



<li>Stefan: Web Components Aufreger – [00:19:57]
<ul class="wp-block-list">
<li><a href="https://github.com/web-platform-tests/interop" target="_blank" rel="noreferrer noopener">interop</a></li>



<li><a href="https://web-platform-tests.org/" target="_blank" rel="noreferrer noopener">web-platform-tests</a></li>
</ul>
</li>



<li>Moritz: <a href="https://das-sendezentrum.de/subscribe/" target="_blank" rel="noreferrer noopener">Subscribe</a> Podcastenden Konferenz – [00:26:16]</li>



<li>Sarah: PHP <a href="https://www.php.net/manual/en/function.token-get-all.php" target="_blank" rel="noreferrer noopener">token_get_all()</a> – [00:28:41]</li>



<li>Moritz: <a href="https://keychron.de/de/products/keychron-k1-max-qmk-wireless-custom-mechanical-keyboard-iso-layout-collection?variant=42822534365321" target="_blank" rel="noreferrer noopener">Keychron K1 Max</a> – [00:32:06]
<ul class="wp-block-list">
<li><a href="https://www.zsa.io/moonlander" target="_blank" rel="noreferrer noopener">ZSA Moonlander</a></li>



<li><a href="https://entropia.de/GPN18:kinX:_keyboard_hacking" target="_blank" rel="noreferrer noopener">GPN18: keyboard hacking</a></li>
</ul>
</li>
</ul>



Property der Woche: display: flow-root – [00:43:33]



<ul class="wp-block-list">
<li><a href="https://codepen.io/rachelandrew/pen/RKgevX" target="_blank" rel="noreferrer noopener">CodePen-Demo von Rachel Andrews</a></li>



<li><a href="https://caniuse.com/flow-root" target="_blank" rel="noreferrer noopener">caniuse</a></li>
</ul>



90er-Action-Spielzeug-KI-Werbeblock – [00:50:39]



Entscheide Dich – [00:54:32]



Tagesthema: Große und kleine Helfer – [01:01:52]



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



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



<li><a href="https://indieweb.org/Homebrew_Website_Club" target="_blank" rel="noreferrer noopener">Homebrew Website Club</a></li>



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



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



<li>Stefans News-Quellen: <a href="https://web-platform-dx.github.io/web-features-explorer/" target="_blank" rel="noreferrer noopener">Web features explorer</a> &amp; <a href="https://bcd-watch.igalia.com/" target="_blank" rel="noreferrer noopener">BCD Watch</a></li>
</ul>



GeilTeil



<ul class="wp-block-list">
<li>Moritz: <a href="https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/" target="_blank" rel="noreferrer noopener">Font with Built In Syntax Highlighting</a> – [02:06:37]</li>



<li>Stefan: <a href="https://squoosh.app/" target="_blank" rel="noreferrer noopener">squoosh.app</a> – [02:10:12]</li>
</ul>



Das Ende – [02:11:38]

Auferstanden nach Wochen der Stille präsentiert sich #WWSIV wieder mit Gast! Mit Stefan Judis sprechen wir über Web Standards, Inspiration und wo er die immer heißen News für seinen Newsletter her bekommt. Dazu gibts einen Font mit eingebautem Syntax-Highlighting und Heimautomatisierung. Tinkerbell hätte keine zauberhaftere Folge herbeiklamüsern können

Mit Stefan Judis sprechen wir über Web Standards, Inspiration und wo er die immer heißen News für seinen Newsletter her bekommt. Dazu gibts einen Font mit eingebautem Syntax-Highlighting und Heimautomatisierung.

Große und kleine Helfer mit Stefan Judis

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-vi-inline-text-semantics-teil-2/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Wir sprechen über die HTML-Elemente q, ruby, rt, rp, s, samp, time und viele mehr! Dazu unsere ersten Gehversuche mit Container-Queries, gedünstet in einem leckeren Sud von AI-Geplapper und wie man LLMs lokal und schnell laufen lassen kann. Delish!

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



Retro



<ul>
<li>Sarah: Zum ersten Mal container queries verwendet – [00:08:01]</li>



<li>Moritz: <a href="https://moritzgiessmann.de/blog/posts/setting-up-xampp-on-macos-sonoma-with-local-user-folder/">XAMPP auf MacOS mit UserDir</a> – [00:21:31]</li>



<li>Sarah: claude.ai vs chatGPT – [00:27:13]</li>



<li>Moritz: RSS Feeds – [00:35:19]
<ul>
<li><a href="https://moritzgiessmann.de/blog/posts/get-the-news-you-want-when-you-want-an-intro-to-rss-feeds/">Get the News You Want, When You Want: An Intro to RSS Feeds</a></li>
</ul>
</li>



<li>Moritz: Accessibility Cheat Sheet Poster und Merch – [00:40:56]
<ul>
<li><a href="https://wwsiv.de/merch">WWSIV Merch inklusive Accessibility Poster</a> </li>
</ul>
</li>
</ul>



Property der Woche: Element.scrollIntoViewIfNeeded() – [00:42:39]



<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewIfNeeded">MDN</a> / <a href="https://caniuse.com/?search=scrollIntoViewIfNeeded">caniuse</a></li>



<li>scroll behavior: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior">MDN</a> / <a href="https://caniuse.com/mdn-css_properties_scroll-behavior_smooth">caniuse</a></li>
</ul>



Tagesthema: Inline Text Semantics (Teil II) – [00:49:56]



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



<ol>
<li>&lt;q&gt; – [00:51:43]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">MDN</a> / <a href="https://codepen.io/MoritzGiessmann/pen/GRborQZ" target="_blank" rel="noreferrer noopener">Demo</a></li>
</ul>
</li>



<li>&lt;ruby&gt;, &lt;rt&gt;, &lt;rp&gt; – [00:56:17]
<ul>
<li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby">&lt;ruby&gt;</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rt">&lt;rt&gt;</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/rp">&lt;rp&gt;</a></li>



<li><a href="https://docs.google.com/spreadsheets/d/1Ta5Ck7y3W6LCn2CeGtW7dAdLF6Lh5wV2UBQJZTz3W5Q/edit?gid=1883388700#gid=1883388700" target="_blank" rel="noreferrer noopener">Web Almanac Tag-Verbreitung</a></li>
</ul>
</li>



<li>Bonus: &lt;tt&gt; – [01:07:39]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tt">MDN</a></li>
</ul>
</li>



<li>&lt;s&gt; – [01:09:25]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s">MDN</a></li>
</ul>
</li>



<li>&lt;samp&gt; – [01:14:03]
<ul>
<li><a href="https://wowirsindistvorne.show/html-von-a-bis-z-z-v-inline-text-semantics-teil-1/">Folge 63: HTML von a bis z-z V: Inline Text Semantics (Teil 1)</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp">MDN</a></li>
</ul>
</li>



<li>&lt;small&gt; – [01:17:03]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small">MDN</a></li>
</ul>
</li>



<li>&lt;span&gt; – [01:19:16]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span">MDN</a></li>
</ul>
</li>



<li>&lt;sub&gt;, &lt;sup&gt; – [01:24:37]
<ul>
<li>MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub">&lt;sub&gt;</a> / <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup">&lt;sup&gt;</a></li>
</ul>
</li>



<li>&lt;time&gt; – [01:32:27]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time">MDN</a></li>



<li><a href="https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-duration-string">HTML Spec: valid duration string</a></li>
</ul>
</li>



<li>&lt;u&gt; – [01:45:40]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u">MDN</a></li>
</ul>
</li>



<li>&lt;var&gt; – [01:50:47]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var">MDN</a></li>
</ul>
</li>



<li>&lt;wbr&gt; – [01:52:53]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr">MDN</a></li>
</ul>
</li>
</ol>



GeilTeil: <a href="https://ollama.com/">Ollama</a> – [01:57:42]



Nachtrag Sarah: <a href="https://codepen.io/SarahGross/pen/GRboErJ" target="_blank" rel="noreferrer noopener">Spelling correction UI using &lt;ruby> &amp; &lt;rp> <rt>elements</rt> Demo auf CodePen</a> – [02:08:12]



Das Ende – [02:15:14]

Wir sprechen über die HTML-Elemente q, ruby, rt, rp, s, samp, time und viele mehr! Dazu unsere ersten Gehversuche mit Container-Queries, gedünstet in einem leckeren Sud von AI-Geplapper und wie man LLMs lokal und schnell laufen lassen kann. Delish!

HTML von a bis z-z V: Inline Text Semantics (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/something-old-something-new/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Nach langer Sendepause sind wir zurück! Ganz nach dem Motto „Developer-Gruppentherapie“ schlägt das Themenpendel dieser Sendung mal wieder deutlich auf die persönliche Seite: Sarah berichtet über ihre Namens- und Pronomenänderung, wir sprechen über die Beyond Tellerrand und die Gulaschprogrammiernacht, wie man per E-Perso Führungszeugnisse und Meldebescheinigungen beantragt und Moritz erzählt was er in seinem Sabbatical über sich selbst gelernt hat. Dazu erklären wir noch wie man seinen RSS-Feed stylen kann und wie das Windows 10 Hintergrundbild gebaut wurde. 
Unsere persönlichste Sendung!

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



Retro



<ul>
<li>Sarah: Namensänderung – [00:04:48]</li>



<li>Moritz: Behördenkram mit E-Perso – [00:07:29]
<ul>
<li><a href="https://www.fuehrungszeugnis.bund.de/ffw/form/display.do?%24context=ED01FF8592E112B378B7" target="_blank" rel="noreferrer noopener">Führungszeugnis beim BfJ online beantragen</a></li>



<li><a href="https://www.service-bw.de/onlineantraege/onlineantrag?processInstanceId=f3PbnedPBrOib4hxslNFFg" target="_blank" rel="noreferrer noopener">Meldebescheinigung BW</a></li>



<li><a href="https://design-system.service.gov.uk/" target="_blank" rel="noreferrer noopener">UK Design System</a></li>
</ul>
</li>



<li>Sarah: Beyond Tellerrand – [00:21:51]
<ul>
<li><a href="https://www.youtube.com/@btconf" target="_blank" rel="noreferrer noopener">beyond tellerrand auf YouTube</a></li>
</ul>
</li>



<li>Hot Tub Stream – [00:32:35]</li>



<li>Moritz: GPN – [00:35:16]
<ul>
<li><a href="https://media.ccc.de/v/gpn22-498-tastaturen-ein-drama-mit-10-fingern" target="_blank" rel="noreferrer noopener">Tastaturen &#8211; Ein Drama mit 10 Fingern</a></li>



<li><a href="https://media.ccc.de/v/gpn22-359-usb-wie-funktioniert-das-eigentlich-certified-usb4-version-2-0-" target="_blank" rel="noreferrer noopener">USB, wie funktioniert das eigentlich? Certified USB4 (Version 2.0)</a></li>



<li><a href="https://media.ccc.de/v/gpn22-303-passkeys-login-ohne-passwort-" target="_blank" rel="noreferrer noopener">Passkeys – Login ohne Passwort (?)</a></li>
</ul>
</li>



<li>Moritz: Hotelbewertungen – [00:46:20]</li>
</ul>



Tagesthema: Im Sabbatical gelernt / Sabbatical &amp; Workation – [00:52:57]



GeilTeil



<ul>
<li>Sarah: Windows 10 Hintergrundbild Entstehung – [01:44:51]
<ul>
<li><a href="https://www.pcgamer.com/gaming-industry/i-was-shocked-to-find-out-the-windows-10-desktop-background-wasnt-computer-generated-but-a-picture-of-light-being-shot-through-an-actual-window/" target="_blank" rel="noreferrer noopener">Artikel auf PC Gamer</a></li>



<li><a href="https://www.youtube.com/watch?v=6nw-TgbXNj8" target="_blank" rel="noreferrer noopener">YouTube-Video</a></li>
</ul>
</li>



<li>Moritz: XSL – [01:49:30]
<ul>
<li><a href="https://darekkay.com/blog/rss-styling/" target="_blank" rel="noreferrer noopener">Darek Kay: Style your CSS feed</a></li>



<li><a href="https://moritzgiessmann.de/blog/feed.xml" target="_blank" rel="noreferrer noopener">https://moritzgiessmann.de/blog/feed.xml</a></li>



<li><a href="https://moritzgiessmann.de/blog/xsl/rss.xsl" target="_blank" rel="noreferrer noopener">https://moritzgiessmann.de/blog/xsl/rss.xsl</a></li>



<li><a href="https://moritzgiessmann.de/blog/xsl/rss.css" target="_blank" rel="noreferrer noopener">https://moritzgiessmann.de/blog/xsl/rss.css</a></li>
</ul>
</li>
</ul>



Das Ende – [02:00:52]

Nach langer Sendepause sind wir zurück! Ganz nach dem Motto „Developer-Gruppentherapie“ schlägt das Themenpendel dieser Sendung mal wieder deutlich auf die persönliche Seite: Sarah berichtet über ihre Namens- und Pronomenänderung, wir sprechen über die Beyond Tellerrand und die Gulaschprogrammiernacht, wie man per E-Perso Führungszeugnisse und Meldebescheinigungen beantragt und Moritz erzählt was er in seinem Sabbatical über sich selbst gelernt hat. Dazu erklären wir noch wie man seinen RSS-Feed stylen kann und wie das Windows 10 Hintergrundbild gebaut wurde.
Unsere persönlichste Sendung!

Wir sprechen über die Beyond Tellerrand und die Gulaschprogrammiernacht, wie man per E-Perso Führungszeugnisse und Meldebescheinigungen beantragt, was man im Sabbatical über sich selbst lernt und wie man RSS-Feeds stylen kann.

Something Old, Something New

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-v-inline-text-semantics-teil-1/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Unsere „Hey Tut Mir Leid“-Serie geht weiter! Wir versuchen uns an einer semantischen Entwirrung der Elemente b, strong, i und em, erklären wofür bdi und bdo gebraucht werden und wurschteln und noch durch die Specs von dfn, kbd und mark. Dazu zeigen noch wir wo man GitHub Repo Statistiken findet. Wir hören uns wieder im Mai! 

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



Retro



<ul>
<li>Moritz: <a href="https://moritzgiessmann.de/morsekode/" target="_blank" rel="noreferrer noopener">Morsekode</a> – [00:05:51]</li>



<li>Constantin: Danke fürs fleißige Zuhören – [00:11:57]</li>



<li>Moritz: Jetzt als <a href="https://www.twitch.tv/wowirsindistvorne_dev" target="_blank" rel="noreferrer noopener">wowirsindistvorne_dev auf Twitch</a> – [00:13:55]</li>



<li>Moritz: <a href="https://github.com/MoritzGiessmann/leitfaden-barrierefreiheit-fuer-redakteurinnen" target="_blank" rel="noreferrer noopener">Leitfaden Barrierefreiheit für Redakteur*innen</a> – [00:19:15]</li>



<li>Moritz: FireFox Add-Ons <a href="https://addons.mozilla.org/de/firefox/addon/no-target-blank/" target="_blank" rel="noreferrer noopener">No Target Blank</a> &amp; <a href="https://addons.mozilla.org/de/firefox/addon/yewtube-redirect/" target="_blank" rel="noreferrer noopener">YewTube</a> Redirect – [00:21:47]
<ul>
<li><a href="https://drhyperion451.github.io/does-uBO-bypass-yt/" target="_blank" rel="noreferrer noopener">uBlock Origin YouTube Status Check</a></li>
</ul>
</li>
</ul>



Tagesthema: Inline Text Semantics (Teil 1) – [00:26:46]



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



<ol>
<li>&lt;abbr&gt; – [00:29:45]</li>



<li>&lt;b&gt; vs &lt;strong&gt; vs &lt;i&gt; vs &lt;em&gt; – [00:33:56]</li>



<li>&lt;bdi> &amp; &lt;bdo> – [00:53:02]
<ul>
<li><a href="https://de.wikipedia.org/wiki/Unicode-Bidi-Algorithmus" target="_blank" rel="noreferrer noopener">Unicode-Bidi-Algorithmus auf Wikipedia</a></li>



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



<li>&lt;br&gt; – [00:58:54]</li>



<li>&lt;cite&gt; – [01:07:30]</li>



<li>&lt;code&gt; – [01:12:09]</li>



<li>&lt;data> – [01:14:07]
<ul>
<li><a href="https://mastodon.social/@sir_pepe/111839081094816916" target="_blank" rel="noreferrer noopener">Peter Kröners Toot</a></li>
</ul>
</li>



<li>&lt;dfn&gt; – [01:20:11]</li>



<li>&lt;kbd&gt; – [01:26:09]</li>



<li>&lt;mark&gt; – [01:31:28]</li>
</ol>



GeilTeil: GitHub Insights – [01:38:52]



<ul>
<li>github.com/&lt;username&gt;/&lt;repository&gt;/graphs/traffic</li>
</ul>



Das Ende – [01:43:56]

Unsere „Hey Tut Mir Leid“-Serie geht weiter! Wir versuchen uns an einer semantischen Entwirrung der Elemente b, strong, i und em, erklären wofür bdi und bdo gebraucht werden und wurschteln und noch durch die Specs von dfn, kbd und mark. Dazu zeigen noch wir wo man GitHub Repo Statistiken findet. Wir hören uns wieder im Mai!

Unsere „Hey Tut Mir Leid“-Serie geht weiter! Wir versuchen uns an einer semantischen Entwirrung der Elemente b, strong, i und em, erklären wofür bdi und bdo gebraucht werden und wurschteln und noch durch die Specs von dfn, kbd und mark.

HTML von a bis z-z V: Inline Text Semantics (Teil 1)

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-iv-a-tag-to-rule-them-all/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Zurück aus der Winterpause sprechen wir in unserer HTML-Serie über das HTML-Tag, das dem World Wide Web seine Fäden verleiht: Das A-Tag, auch bekannt als Link (nicht der der immer mit der Prinzessin verwechselt wird). Dabei geht es um alle möglichen bekannten und unbekannten Attribute, Protokolle (mailto: mit Soße und Scharf), aber auch Barrierefreiheit, Styling und UX. Schärft eure Schwerter, Kopfhörer auf und rein da!

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



Retro



<ul>
<li>Constantin: PSA (mental) health – [00:04:25]</li>



<li>Moritz: Moritz: Neuer Blog / 11ty – [00:08:46]
<ul>
<li><a href="http://moritzgiessmann.de/blog/" target="_blank" rel="noreferrer noopener">Moritz&#8216; neuer Blog</a></li>



<li><a href="http://contrast-ratio.org/" target="_blank" rel="noreferrer noopener">Contrast Ratio Accessibility Tool</a></li>
</ul>
</li>



<li>Constantin: Hot-Tub-Stream – [00:14:57]
<ul>
<li><a href="https://www.twitch.tv/wowirsindistvorne_dev" target="_blank" rel="noreferrer noopener">WWSIV auf Twitch </a></li>
</ul>
</li>



<li>Moritz: AI Rabbit Hole Tetris – [00:18:21]
<ul>
<li><a href="https://moritzgiessmann.de/blog/posts/checkbox-tetris-ai-experiment/" target="_blank" rel="noreferrer noopener">Blog-Beitrag zum Checkbox-Tetris-AI-Experiment</a></li>
</ul>
</li>
</ul>



Tagesthema – [00:26:10]



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



<li><a href="https://info.cern.ch/hypertext/WWW/TheProject.html" target="_blank" rel="noreferrer noopener">Das allererste HTML-Dokument</a></li>



<li><a href="https://wowirsindistvorne.show/demos/a-element/" target="_blank" rel="noreferrer noopener">Moritz&#8216; &lt;a&gt;-Demo</a></li>
</ul>







<ol>
<li>download – [00:32:46]</li>



<li>href – [00:35:34]
<ul>
<li><a href="https://wowirsindistvorne.show/html-von-lta-bis-ltz-z-i-back-to-the-root/">Folge 50: HTML von a bis z-z I: Back to the root</a></li>



<li><a href="https://developer.mozilla.org/en-US/docs/Web/Text_fragments" target="_blank" rel="noreferrer noopener">Text Fragments auf MDN</a></li>



<li>caniuse: <a href="https://caniuse.com/?search=FragmentDirective" target="_blank" rel="noreferrer noopener">FragmentDirective</a> / <a href="https://caniuse.com/mdn-css_selectors_target-text" target="_blank" rel="noreferrer noopener">::target-text CSS selector</a></li>



<li><a href="https://talk.observablehq.com/t/is-media-fragments-still-used/3829" target="_blank" rel="noreferrer noopener">Is Media Fragments Still Used?</a></li>



<li><a href="https://web.dev/articles/video-and-source-tags#specify_start_and_end_times" target="_blank" rel="noreferrer noopener">The &lt;video&gt; and &lt;source&gt; tags</a></li>
</ul>
</li>



<li>href-Protokolle – [00:50:00]
<ul>
<li><a href="https://www.simplilearn.com/tutorials/html-tutorial/html-mailto" target="_blank" rel="noreferrer noopener">A Complete Guide To HTML Mailto Attribute</a></li>



<li><a href="https://www.ietf.org/rfc/rfc3966.txt" target="_blank" rel="noreferrer noopener">Fax-Protokoll RFC</a></li>



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



<li>hreflang – [00:59:24]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang" target="_blank" rel="noreferrer noopener">globales lang-Attribut auf MDN</a></li>
</ul>
</li>



<li>ping – [01:01:16]
<ul>
<li><a href="https://caniuse.com/ping" target="_blank" rel="noreferrer noopener">ping-Attribut auf caniuse</a></li>



<li><a href="https://css-tricks.com/the-ping-attribute-on-anchor-links/" target="_blank" rel="noreferrer noopener">CSS-Tricks-Artikel zum ping-Attribut</a></li>



<li>DDoS: <a href="https://www.imperva.com/blog/archive/the-ping-is-the-thing-popular-html5-feature-used-to-trick-chinese-mobile-users-into-joining-latest-ddos-attack/" target="_blank" rel="noreferrer noopener">The Ping is the Thing: Popular HTML5 Feature Used to Trick Chinese Mobile Users into Joining Latest DDoS Attack</a></li>
</ul>
</li>



<li>referrerpolicy – [01:07:40]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy" target="_blank" rel="noreferrer noopener">Referrer-Policy Header auf MDN</a></li>
</ul>
</li>



<li>rel – [01:08:56]
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel#nofollow" target="_blank" rel="noreferrer noopener">rel-Attribut auf MDN</a></li>



<li><a href="https://wowirsindistvorne.show/bada55-c55-c01025/">Folge 5: #BADA55 #C55 #C01025</a></li>
</ul>
</li>



<li>target – [01:15:58]</li>



<li>type – [01:22:19]</li>



<li>Link-Accessibility – [01:23:04]
<ul>
<li><a href="https://codepen.io/MoritzGiessmann/pen/nxbKeg" target="_blank" rel="noreferrer noopener">Moritz&#8216; Demo: Skip Links with CSS Transitions</a></li>



<li><a href="https://webaim.org/techniques/skipnav/" target="_blank" rel="noreferrer noopener">WebAim: Skip Navigation Links</a></li>



<li><a href="http://contrast-ratio.org/" target="_blank" rel="noreferrer noopener">Contrast Ratio Accessibility Tool</a></li>



<li><a href="https://www.w3.org/TR/WCAG22/#focus-appearance" target="_blank" rel="noreferrer noopener">WCAG 2.2 zu Focus Appearance</a></li>



<li><a href="https://wowirsindistvorne.show/semantic-htmhell/">Folge 15: Semantic HTMHELL</a></li>
</ul>
</li>
</ol>



GeilTeil



<ul>
<li>Constantin: <a href="https://www.ardmediathek.de/serie/feuer-und-flamme/staffel-7/Y3JpZDovL3dkci5kZS9mZXVlcnVuZGZsYW1tZQ/7" target="_blank" rel="noreferrer noopener">Feuer &amp; Flamme (WDR) in der Mediathek</a> – [01:48:40]</li>



<li>Moritz: GitHub CodeSpaces – [01:54:03]
<ul>
<li><a href="https://github.com/11ty/eleventy-base-blog" target="_blank" rel="noreferrer noopener">eleventy-base-blog auf GitHub</a></li>
</ul>
</li>
</ul>



Das Ende – [01:58:29]

Zurück aus der Winterpause sprechen wir in unserer HTML-Serie über das HTML-Tag, das dem World Wide Web seine Fäden verleiht: Das A-Tag, auch bekannt als Link (nicht der der immer mit der Prinzessin verwechselt wird). Dabei geht es um alle möglichen bekannten und unbekannten Attribute, Protokolle (mailto: mit Soße und Scharf), aber auch Barrierefreiheit, Styling und UX. Schärft eure Schwerter, Kopfhörer auf und rein da!

Thema: Das a-Tag, auch bekannt als Link. Dabei geht es um alle möglichen bekannten und unbekannten Attribute, Protokolle (mailto: mit Soße und Scharf), aber auch Barrierefreiheit, Styling und UX.

HTML VON A BIS Z-Z IV: A Tag To Rule Them All

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/fediverse-und-arbeiten-bei-automattic-mit-matthias-pfefferle/#comment-text">Kommentar</a> oder <a href="https://mastodon.social/@wwsiv">Mastodon</a>.
Zu Weihnachten eine Folge mit Gast! Mit Matthias Pfefferle sprechen wir über den aktuellen Stand des Fediverse, Mastodon, die Arbeit bei Automattic (WordPress) und sein ActivityPub Plugin. Dazu gibt’s noch native Input-Switches und eine weihnachtliche CSS-Farben-Geschichte. Merry X-(HTML)-MAS!

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



<ul>
<li><a href="https://wowirsindistvorne.show/open-web-mit-matthias-pfefferle/">Folge 47: Open Web mit Matthias Pfefferle</a></li>
</ul>



Retro



<ul>
<li>Moritz: Dank für Spenden, Subs und Merch-Kauf – [00:05:22]</li>



<li>Constantin: Vue Grenzen ausreizen – [00:06:35]
<ul>
<li><a href="https://github.com/FranckFreiburger/vue3-sfc-loader/pulls" target="_blank" rel="noreferrer noopener">vue3-sfc-loader</a></li>



<li><a href="https://twitter.com/fireship_dev/status/1737475143222317123" target="_blank" rel="noreferrer noopener">&#8222;The untold history of web development&#8220;</a></li>
</ul>
</li>



<li>Moritz-Framework-Logo-Off-Topic-Einschub – [00:11:21]
<ul>
<li><a href="https://cottonbureau.com/people/mgx" target="_blank" rel="noreferrer noopener">Moritz&#8216; Shirt-Motive</a></li>
</ul>
</li>



<li>Moritz: FritzBox Schuld an Internet-Problemen? – [00:18:00]
<ul>
<li><a href="https://mastodon.social/@MoritzGiessmann/111612726003729025" target="_blank" rel="noreferrer noopener">Moritz&#8216; Mastodon-Thread</a></li>



<li><a href="https://avm.de/service/wissensdatenbank/dok/FRITZ-Box-6591-Cable/241_LAN-Verbindungen-werden-nur-mit-100-Mbit-s-hergestellt?t_id=6016012" target="_blank" rel="noreferrer noopener">AVM Support-Artikel</a></li>



<li><a href="https://www.caldigit.com/ethernet-port-on-the-ts4-or-ts3-plus-does-not-work-properly/" target="_blank" rel="noreferrer noopener">CalDigit Support-Artikel</a></li>
</ul>
</li>



<li>Moritz: Blogging-Alternative zu WordPress gesucht – [00:22:27]</li>
</ul>



Property der Woche: Native HTML checkbox switch – [00:31:54]



<ul>
<li><a href="https://codepen.io/Rik/pen/gOEYZgE?editors=1000" target="_blank" rel="noreferrer noopener">checkbox switch CodePen-Demo</a> (nur Safari TP)</li>



<li><a href="https://github.com/whatwg/html/issues/4180" target="_blank" rel="noreferrer noopener">whatwg issue</a></li>



<li><a href="https://front-end.social/@jensimmons/111619406228013314" target="_blank" rel="noreferrer noopener">Jen Simmons&#8216; Toot zu Safari TP 185</a></li>
</ul>



Tagesthema – [00:41:17]



<ol>
<li>Entwicklung des Fediverse seit dem letzten Besuch – [00:42:10]
<ul>
<li><a href="https://flipboard.com/" target="_blank" rel="noreferrer noopener">Flipboard</a></li>



<li><a href="https://mastodon.ar.al/@aral" target="_blank" rel="noreferrer noopener">Aral Balkan auf Mastodon</a></li>



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



<li>Was machst du jetzt genau? – [00:54:56]</li>



<li>Wie ist die Arbeit bei Automatic? – [00:58:56]</li>



<li>Welche Tools nutzt ihr intern? – [01:03:42]
<ul>
<li><a href="https://wordpress.com/p2/" target="_blank" rel="noreferrer noopener">P2</a></li>
</ul>
</li>



<li>Wunsch oder Wirklichkeit? – [01:11:32]
<ul>
<li><a href="https://notiz.blog/2023/10/23/the-next-big-social-network-is-just-the-web/" target="_blank" rel="noreferrer noopener">&#8222;The next big social network is just the Web&#8220;</a></li>



<li>iOS Mastodon Clients: <a href="https://apps.apple.com/us/app/mammoth-for-mastodon/id1667573899" target="_blank" rel="noreferrer noopener">Mammoth</a> / <a href="https://apps.apple.com/us/app/mastoot/id1501485410" target="_blank" rel="noreferrer noopener">Mastoot</a></li>
</ul>
</li>



<li>Status Quo <a href="https://wordpress.org/plugins/activitypub/" target="_blank" rel="noreferrer noopener">ActivityPub Plugin</a> – [01:35:58]
<ul>
<li><a href="https://www.zeit.de/serie/alles-gesagt" target="_blank" rel="noreferrer noopener">&#8222;Alles gesagt?&#8220; Podcast</a></li>



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



GeilTeil: rebeccapurple – [01:48:34]



<ul>
<li><a href="https://medium.com/@valgaze/the-hidden-purple-memorial-in-your-web-browser-7d84813bb416" target="_blank" rel="noreferrer noopener">“The “Hidden” Purple Memorial in Your Web Browser” auf Medium</a></li>



<li><a href="https://www.zeldman.com/2014/06/10/the-color-purple/" target="_blank" rel="noreferrer noopener">Jeffrey Zeldman: The Color Purple</a></li>



<li><a href="https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/" target="_blank" rel="noreferrer noopener">Eric Meyer&#8217;s Blog</a> / <a href="https://mastodon.social/@Meyerweb" target="_blank" rel="noreferrer noopener">Eric Meyer auf Mastodon</a></li>



<li><a href="https://drafts.csswg.org/css-color/#valdef-color-rebeccapurple" target="_blank" rel="noreferrer noopener">CSS Color Module Level 4</a></li>
</ul>



Das Ende – [01:57:24]



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

Zu Weihnachten eine Folge mit Gast! Mit Matthias Pfefferle sprechen wir über den aktuellen Stand des Fediverse, Mastodon, die Arbeit bei Automattic (WordPress) und sein ActivityPub Plugin. Dazu gibt’s noch native Input-Switches und eine weihnachtliche CSS-Farben-Geschichte. Merry X-(HTML)-MAS!

Mit Matthias Pfefferle sprechen wir über den aktuellen Stand des Fediverse, Mastodon, die Arbeit bei Automattic (WordPress) und sein ActivityPub Plugin. Dazu gibt’s noch native Input-Switches und eine weihnachtliche CSS-Geschichte. Merry X-(HTML)-MAS!

Fediverse und Arbeiten bei Automattic mit Matthias Pfefferle

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

Barrierefreiheit, Gaming und der ganze Rest mit Svenja

Wo wir sind ist vorne.

HTML VON A BIS Z-Z IX: Embedded Content

Wo wir sind ist vorne.

HTML VON A BIS Z-Z VIII: video und audio

Wo wir sind ist vorne.

HTML VON A BIS Z-Z VII: img, map und area

Wo wir sind ist vorne.

Accessibility Overlays mit Daniela Kubesch

Wo wir sind ist vorne.

Wir sind zwei Berliner! (Sondersendung SUBSCRIBE11)

Wo wir sind ist vorne.

Große und kleine Helfer mit Stefan Judis

Wo wir sind ist vorne.

HTML von a bis z-z V: Inline Text Semantics (Teil 2)

Wo wir sind ist vorne.

Something Old, Something New

Wo wir sind ist vorne.

HTML von a bis z-z V: Inline Text Semantics (Teil 1)

Wo wir sind ist vorne.

HTML VON A BIS Z-Z IV: A Tag To Rule Them All

Wo wir sind ist vorne.

Fediverse und Arbeiten bei Automattic mit Matthias Pfefferle

Wo wir sind ist vorne.