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://twitter.com/wwsiv">Twitter</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]

<description>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!</description>

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.

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!

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://twitter.com/wwsiv">Twitter</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]

<description>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!</description>

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.

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!

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://twitter.com/wwsiv">Twitter</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>

<description>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!</description>

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!

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!

Fediverse und Arbeiten bei Automattic mit Matthias Pfefferle

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://twitter.com/wwsiv">Twitter</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>

<description>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! ❤️</description>

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://twitter.com/wwsiv">Twitter</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]

<description>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!</description>

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.

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!

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

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

Wo wir sind ist vorne.

Details

Recent Episodes