<p>Zur Abwechslung beschäftigen wir uns in dieser Revision einmal nicht mit Technik, sondern mit dem relativ neuen Phänomen der Coding Bootcamps. Mit dabei sind Marie von der Wehl (<a href="mailto:mar%69e.vonderwe%68l@sumc%75%6Do.com">marie.vonderwehl@sumcumo.com</a> / <a href="https://twitter.com/MarWehl">@MarWehl</a>), die ein solches Bootcamp im vergangenen Jahr bei <a href="https://www.neuefische.de/">neue fische</a> in Hamburg durchlaufen ist, sowie Franziska Gertz (<a href="mailto:%66r%61nzi%73ka.gert%7A@su%6Dc%75m%6F%2Ec%6Fm">franziska.gertz@sumcumo.com</a> / <a href="https://twitter.com/frau_scholle">@frau_scholle</a>), die als Teamlead für UI Engineers bei <a href="https://www.sumcumo.com/">sum.como</a> von vielen Vorzügen der Bootcamp-Abgänger zu berichten weiß.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:27] <a href="#">Coding Bootcamps</a></dt>
<dd>Von Marie erfahren wir zunächst, wie sie als Logopädin auf die Idee kommt, es doch lieber mit der Programmiererei zu versuchen, und wie sie auf das Angebot der &#8222;neuen fische&#8220; gestoßen ist. Wir reden darüber, wie der erste Kontakt zum Anbieter zustande kam und wie anschließend die Ausbildung im Schnelldurchlauf sowohl vom Ablauf her als auch inhaltlich vonstatten ging. Natürlich wollen wir auch wissen, wie sich solche Bootcamps ihre Leistung entlohnen lassen. Und schließlich interessiert uns, wie Marie sich nach der abgeschlossenen Ausbildung auf dem Arbeitsmarkt geschlagen hat.</p>
<p>Von Franzi wiederum bekommen wir attestiert, dass diese Bootcamps tatsächlich tollen Output liefern und ihre Firma derweil einige &#8222;neue fische&#8220;-Abgänger beschäftigt, nämlich ganze drei Entwicklerinnen und zwei Entwickler. Franzi und ihr gesamtes Team genießen die Begeisterung und den Wissensdurst, den alle Bootcamp-Abgänger gleichermaßen in die Firma einbringen (und den man bei Marie hört). Gleichzeitig ist aber auch klar, dass so ein Bootcamp nur der Anfang ist und so unterstützt und begleitet ihr Team die Neueinsteiger:innen, so dass sie sich bestmöglich in der Praxis einfinden (oder auch in Vue anstelle des im Bootcamp behandelten React).</p>
<p>Uns hat das Befragen der beiden sehr viel Spaß gemacht und wenn Ihr oder bekannte von Euch ebenfalls über ein Coding Bootcamp nachdenken, dann hört diese Folge und kommt gerne auf Marie oder Franzi mit weiteren Fragen zu. Und wenn Ihr selbst ein solches Bootcamp absolviert habt, dann würde uns interessieren, wie Eure Erfahrung war. Hinterlasst gerne eine Nachricht in unserem <a href="https://workingdraft.de/430/#comment">Kommentarbereich</a>!</dd>
</dl>


Zur Abwechslung beschäftigen wir uns in dieser Revision einmal nicht mit Technik, sondern mit dem relativ neuen Phänomen der Coding Bootcamps. Mit dabei sind Marie von der Wehl (marie.vonderwehl@sumcumo.com / @MarWehl), die ein solches Bootcamp im vergangenen Jahr bei neue fische in Hamburg durchlaufen ist, sowie Franziska Gertz (franziska.gertz@sumcumo.com / @frau_scholle), die als Teamlead für [&#8230;]

Working Draft

Zur Abwechslung beschäftigen wir uns in dieser Revision einmal nicht mit Technik, sondern mit dem relativ neuen Phänomen der Coding Bootcamps. Mit dabei sind Marie von der Wehl (marie.vonderwehl@sumcumo.com / @MarWehl), die ein solches Bootcamp im v[...]

Zur Abwechslung beschäftigen wir uns in dieser Revision einmal nicht mit Technik, sondern mit dem relativ neuen Phänomen der Coding Bootcamps. Mit dabei sind Marie von der Wehl (marie.vonderwehl@sumcumo.com / @MarWehl), die ein solches Bootcamp im vergangenen Jahr bei neue fische in Hamburg durchlaufen ist, sowie Franziska Gertz (franziska.gertz@sumcumo.com / @frau_scholle), die als Teamlead für UI Engineers bei sum.como von vielen Vorzügen der Bootcamp-Abgänger zu berichten weiß.
Schaunotizen

[00:00:27] Coding Bootcamps
Von Marie erfahren wir zunächst, wie sie als Logopädin auf die Idee kommt, es doch lieber mit der Programmiererei zu versuchen, und wie sie auf das Angebot der „neuen fische“ gestoßen ist. Wir reden darüber, wie der erste Kontakt zum Anbieter zustande kam und wie anschließend die Ausbildung im Schnelldurchlauf sowohl vom Ablauf her als auch inhaltlich vonstatten ging. Natürlich wollen wir auch wissen, wie sich solche Bootcamps ihre Leistung entlohnen lassen. Und schließlich interessiert uns, wie Marie sich nach der abgeschlossenen Ausbildung auf dem Arbeitsmarkt geschlagen hat.
Von Franzi wiederum bekommen wir attestiert, dass diese Bootcamps tatsächlich tollen Output liefern und ihre Firma derweil einige „neue fische“-Abgänger beschäftigt, nämlich ganze drei Entwicklerinnen und zwei Entwickler. Franzi und ihr gesamtes Team genießen die Begeisterung und den Wissensdurst, den alle Bootcamp-Abgänger gleichermaßen in die Firma einbringen (und den man bei Marie hört). Gleichzeitig ist aber auch klar, dass so ein Bootcamp nur der Anfang ist und so unterstützt und begleitet ihr Team die Neueinsteiger:innen, so dass sie sich bestmöglich in der Praxis einfinden (oder auch in Vue anstelle des im Bootcamp behandelten React).
Uns hat das Befragen der beiden sehr viel Spaß gemacht und wenn Ihr oder bekannte von Euch ebenfalls über ein Coding Bootcamp nachdenken, dann hört diese Folge und kommt gerne auf Marie oder Franzi mit weiteren Fragen zu. Und wenn Ihr selbst ein solches Bootcamp absolviert habt, dann würde uns interessieren, wie Eure Erfahrung war. Hinterlasst gerne eine Nachricht in unserem Kommentarbereich!

Revision 430: Berufseinstieg per Coding Bootcamp

<p>Schepp, Kahlil und Peter diskutierten in <em>epischer</em> Breite die Erfolge und Misserfolge von HTML5 und <em>viele</em> andere Dinge</p>
<style>
.long-message a.message_link {
  margin: 0 0 1rem; width: 100%;
  border-bottom: 0;
  display: block;
}
.long-message a.message_link img {
  margin: 0 auto;
}
</style>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://www.netidee.at/?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 100%; float: left; margin-bottom: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/06/netidee-banner-1.jpg" alt="" /></a></p>
<div class="message_content">netidee ist die große Internet Förderaktion in Österreich. Bis zu 1. Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. <a href="https://www.netidee.at/?ref=workingdraft.de">Hier kannst du mehr über netidee erfahren</a>.</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:40] HTML5 in Vergangenheit, Gegenwart und Zukunft</dt>
<dd>Vor 10 Jahren erblickte Peters HTML5-Buch das Licht der Welt, woraufhin er <a href="https://www.peterkroener.de/das-html5-buch/">ein HTML5-Fazit verfasste</a>. Diese Revision sollte die Talkshow-Audioversion des Artikels werden, doch wir sprachen am Ende nicht nur über <a href="https://htmlparser.info/parser/">HTML-Parser</a>, SGML vs. HTML vs. XHTML, HTML5-Formularvalidierung sowie Video- und Audio-Elemente, sondern vor allem über TinyMCE, PWA, Service Worker, Push Notifications, Abstraktion und Über-Abstraktion, <a href="https://de.wikipedia.org/wiki/There_are_known_knowns">Unknown unknowns</a> in Webstandards, <a href="https://github.com/extensibleweb/manifesto">das Extensible Web Manifesto</a>, <a href="https://www.youtube.com/watch?v=vtIfVPtN6io">Performance</a>, Podcasts und Musicals.</dd>
</dl>


Schepp, Kahlil und Peter diskutierten in epischer Breite die Erfolge und Misserfolge von HTML5 und viele andere Dinge Unser Sponsor netidee ist die große Internet Förderaktion in Österreich. Bis zu 1. Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. Hier kannst du mehr [&#8230;]

Schepp, Kahlil und Peter diskutierten in epischer Breite die Erfolge und Misserfolge von HTML5 und viele andere Dinge

.long-message a.message_link {
  margin: 0 0 1rem; width: 100%;
  border-bottom: 0;
  display: block;
}
.long-message a.message_li[...]

Schepp, Kahlil und Peter diskutierten in epischer Breite die Erfolge und Misserfolge von HTML5 und viele andere Dinge

.long-message a.message_link {
  margin: 0 0 1rem; width: 100%;
  border-bottom: 0;
  display: block;
}
.long-message a.message_link img {
  margin: 0 auto;
}


Unser Sponsor

netidee ist die große Internet Förderaktion in Österreich. Bis zu 1. Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. Hier kannst du mehr über netidee erfahren.

Schaunotizen

[00:01:40] HTML5 in Vergangenheit, Gegenwart und Zukunft
Vor 10 Jahren erblickte Peters HTML5-Buch das Licht der Welt, woraufhin er ein HTML5-Fazit verfasste. Diese Revision sollte die Talkshow-Audioversion des Artikels werden, doch wir sprachen am Ende nicht nur über HTML-Parser, SGML vs. HTML vs. XHTML, HTML5-Formularvalidierung sowie Video- und Audio-Elemente, sondern vor allem über TinyMCE, PWA, Service Worker, Push Notifications, Abstraktion und Über-Abstraktion, Unknown unknowns in Webstandards, das Extensible Web Manifesto, Performance, Podcasts und Musicals.

Revision 429: HTML5 in Vergangenheit, Gegenwart und Zukunft

<p>Hans und Rodney unterhalten sich über <a href="https://deno.land/">Deno</a>, das ziemlich genau zwei Jahre nach dem <a href="https://github.com/denoland/deno/commit/f7c5e19081920f59ce2006d3255a58fb611b6a17">ersten Commit</a> in <a href="https://deno.land/v1">Version 1.0 veröffentlicht</a> wurde.</p>
<style>
.long-message a.message_link {
  margin: 0 0 1rem; width: 100%;
  border-bottom: 0;
  display: block;
}
.long-message a.message_link img {
  margin: 0 auto;
}
</style>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://www.netidee.at/?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 100%; float: left; margin-bottom: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/06/netidee-banner-1.jpg" alt="" /></a></p>
<div class="message_content">netidee ist die große Internet Förderaktion in Österreich. Bis zu 1. Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. <a href="https://www.netidee.at/?ref=workingdraft.de">Hier kannst du mehr über netidee erfahren</a>.</div>
</aside>
<h3>[00:00:27] Schaunotizen</h3>
<dl>
<dt><a href="https://deno.land">Deno</a></dt>
<dd>Mit Deno versucht Ryan Dahl bei der Entwicklung von Node.js gemachten Fehler zu korrigieren. Wir erklären wie Deno auf ein <a href="https://www.npmjs.com/">Package Management</a> verzichtet und stattdessen auf das direkte Referenzieren von einzelnen Ressourcen &#8222;im Internet&#8220; setzt (ähnlich wie Browser <a href="https://html.spec.whatwg.org/multipage/webappapis.html#integration-with-the-javascript-module-system">ES6 Module Specifiers auflösen</a>). Deno setzt außerdem von Haus aus auf <a href="https://www.typescriptlang.org/">TypeScript</a> (erlaubt aber dennoch schnödes JavaScript). Compiler und Bundler sind mit an Board und dürften Diskussionen um Tooling erstmal etwas dämpfen. Mit einer ausbalancierten <a href="https://doc.deno.land/https/github.com/denoland/deno/releases/latest/download/lib.deno.d.ts">Runtime API</a> und breiter gehenden <a href="https://deno.land/std">Standard Library</a> erlaubt Deno schon eine ganze Menge direkt ab Werk. Wir machen uns zwar stellenweise über das eine oder andere Fundstück in der Standard Library lustig, glauben jedoch, dass diese Art des betreuten Wohnens angenehmer sein dürfte, als wir das vom SIY (Search for It Yourself) des Node/NPM Campingplatzes gewohnt sind. Wenigstens einer von mehr zu bieten, als nur mal eben die Doku zu überfliegen: Hans von seinen ersten <a href="https://drublic.de/blog/starting-with-deno-porting-express-app/">Gehversuchen mit Deno</a>. Am Ende bleiben wir aber vermutlich doch eher auf der konservativen Seite und warten mal ab was im nächsten Jahr mit Deno passiert, bevor wir uns von Node.js trennen.</dd>
</dl>


Hans und Rodney unterhalten sich über Deno, das ziemlich genau zwei Jahre nach dem ersten Commit in Version 1.0 veröffentlicht wurde. Unser Sponsor netidee ist die große Internet Förderaktion in Österreich. Bis zu 1. Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. Hier [&#8230;]

Hans und Rodney unterhalten sich über Deno, das ziemlich genau zwei Jahre nach dem ersten Commit in Version 1.0 veröffentlicht wurde.

.long-message a.message_link {
  margin: 0 0 1rem; width: 100%;
  border-bottom: 0;
  display: block;
}
.long-mess[...]

Hans und Rodney unterhalten sich über Deno, das ziemlich genau zwei Jahre nach dem ersten Commit in Version 1.0 veröffentlicht wurde.

.long-message a.message_link {
  margin: 0 0 1rem; width: 100%;
  border-bottom: 0;
  display: block;
}
.long-message a.message_link img {
  margin: 0 auto;
}


Unser Sponsor

netidee ist die große Internet Förderaktion in Österreich. Bis zu 1. Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. Hier kannst du mehr über netidee erfahren.

[00:00:27] Schaunotizen

Deno
Mit Deno versucht Ryan Dahl bei der Entwicklung von Node.js gemachten Fehler zu korrigieren. Wir erklären wie Deno auf ein Package Management verzichtet und stattdessen auf das direkte Referenzieren von einzelnen Ressourcen „im Internet“ setzt (ähnlich wie Browser ES6 Module Specifiers auflösen). Deno setzt außerdem von Haus aus auf TypeScript (erlaubt aber dennoch schnödes JavaScript). Compiler und Bundler sind mit an Board und dürften Diskussionen um Tooling erstmal etwas dämpfen. Mit einer ausbalancierten Runtime API und breiter gehenden Standard Library erlaubt Deno schon eine ganze Menge direkt ab Werk. Wir machen uns zwar stellenweise über das eine oder andere Fundstück in der Standard Library lustig, glauben jedoch, dass diese Art des betreuten Wohnens angenehmer sein dürfte, als wir das vom SIY (Search for It Yourself) des Node/NPM Campingplatzes gewohnt sind. Wenigstens einer von mehr zu bieten, als nur mal eben die Doku zu überfliegen: Hans von seinen ersten Gehversuchen mit Deno. Am Ende bleiben wir aber vermutlich doch eher auf der konservativen Seite und warten mal ab was im nächsten Jahr mit Deno passiert, bevor wir uns von Node.js trennen.

Revision 428: Deno

<p>Schepp führt Hans und Peter durch <a href="https://schepp.github.io/css-next/#/">eine Präsentation über neue CSS-Features</a>, die er für das <a href="https://www.meetup.com/de-DE/Web-Meetup-Cologne/">Meetup Web Design Cologne</a> vorbereitet hatte.</p>
<h3>[00:00:29] Schaunotizen</h3>
<dl>
<dt><a href="https://schepp.github.io/css-next/#/">CSS Next</a></dt>
<dd>Ungeachtet der komplizierten Frage, <a href="https://www.smashingmagazine.com/2020/03/css4-pros-cons-discussion/">ob es so etwas wie ein CSS4 gibt</a> oder geben sollte (siehe auch <a href="https://workingdraft.de/420/">Revision 420</a>) starten wir einen wilden Ritt durch neue CSS-Features! Wir sprechen über <a href="http://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/">LCH-Farben</a>, neue Lösungen für <a href="https://www.mediaevent.de/css/position-float.html">Floats</a> und <a href="https://blog.kulturbanause.de/2013/03/clearfix-fuer-gefloatete-css-layouts/">Clearfixes</a>, <code>attr()</code> 2.0, <a href="https://css-tricks.com/aspect-ratio-boxes/">Seitenverhältnisse</a> (<a href="https://css-tricks.com/fluid-width-video/">auch für Video</a>) Scrollbar-Styling (<a href="https://workingdraft.de/417/">mit Shoutout an den IE6</a>) und Houdini, speziell das <a href="https://developers.google.com/web/updates/2018/03/cssom">Typed CSSOM</a> und die <a href="https://developers.google.com/web/updates/2018/01/paintapi">Paint-API</a>. Mehr neue Features findet ihr unter <a href="https://cssdb.org/">cssdb.org</a> und <a href="https://schepp.github.io/css-next/#/">in Schepps Präsentation</a> (Chrome Canary empfohlen).</dd>
</dl>


Schepp führt Hans und Peter durch eine Präsentation über neue CSS-Features, die er für das Meetup Web Design Cologne vorbereitet hatte. [00:00:29] Schaunotizen CSS Next Ungeachtet der komplizierten Frage, ob es so etwas wie ein CSS4 gibt oder geben sollte (siehe auch Revision 420) starten wir einen wilden Ritt durch neue CSS-Features! Wir sprechen über [&#8230;]

Schepp führt Hans und Peter durch eine Präsentation über neue CSS-Features, die er für das Meetup Web Design Cologne vorbereitet hatte.
[00:00:29] Schaunotizen

CSS Next
Ungeachtet der komplizierten Frage, ob es so etwas wie ein CSS4 gibt oder geben[...]

Schepp führt Hans und Peter durch eine Präsentation über neue CSS-Features, die er für das Meetup Web Design Cologne vorbereitet hatte.
[00:00:29] Schaunotizen

CSS Next
Ungeachtet der komplizierten Frage, ob es so etwas wie ein CSS4 gibt oder geben sollte (siehe auch Revision 420) starten wir einen wilden Ritt durch neue CSS-Features! Wir sprechen über LCH-Farben, neue Lösungen für Floats und Clearfixes, attr() 2.0, Seitenverhältnisse (auch für Video) Scrollbar-Styling (mit Shoutout an den IE6) und Houdini, speziell das Typed CSSOM und die Paint-API. Mehr neue Features findet ihr unter cssdb.org und in Schepps Präsentation (Chrome Canary empfohlen).

Revision 427: CSS Next

<p>Eine nie dagewesenen Neuheit: HTML5-Glücksrad mit Gast! Der aus Funk, Fernsehen und <a href="https://workingdraft.de/424/">Revision 424</a> bekannte <strong>Stefan Judis</strong> (<a href="https://twitter.com/@stefanjudis">Twitter</a>, <a href="https://www.stefanjudis.com/">Web</a>), seines Zeichens Devrel bei <a href="https://www.contentful.com/">Contentful</a>, scrollte mit Schepp und Peter durch die <a href="https://html.spec.whatwg.org/">HTML-Specs</a>, um frei über Webstandards und Trends zu assoziieren.</p>
<h3>Glücksrad</h3>
<dl>
<dt>[00:00:29] <a href="https://html.spec.whatwg.org/#the-submitevent-interface">event.submitter</a></dt>
<dd>Hätten Sie&#8217;s gewusst? <code>event.submitter</code> (<a href="https://developer.mozilla.org/en-US/docs/Web/API/SubmitEvent/submitter">MDN</a>) verrät, welcher Button zum Absenden eines Formulars verwendet wurde. Wir fragen uns, wozu das gut sein könnte, lernen die <a href="https://html.spec.whatwg.org/#dom-form-requestsubmit"><code>requestSubmit()</code>-Methode</a> kennen und Peter gelingt es erneut, sich über React zu echauffieren.</dd>
<dt>[00:12:00] <a href="https://html.spec.whatwg.org/#microdata">Microdata</a></dt>
<dd>Sind Microformats (zuvor Thema in den Revisionen <a href="https://workingdraft.de/262/">262</a> und <a href="https://workingdraft.de/287/">287</a>) und damit das Semantic Web wie auch RSS und APIs als Gefallene des Web2.0-Kriegs zu rubrizieren? Uns fallen nur wenige aktuelle Use Cases für HTML5-Microdata oder <a href="http://microformats.org/">Microformats</a> oder <a href="https://de.wikipedia.org/wiki/JSON-LD">JSON-LD</a> ein. Sie sind Bewohner <a href="https://www.youtube.com/watch?v=BxV14h0kFs0">einer längst untergegangenen Welt</a>.</dd>
<dt>[00:18:48] <a href="https://html.spec.whatwg.org/#server-sent-events">Server-Sent Events</a> aka <a href="https://caniuse.com/#feat=eventsource">Event Source</a></dt>
<dd>Ein (soweit wir es sagen können) kaum genutzter Webstandard lässt uns zu <a href="https://github.com/localForage/localForage">localForage</a>, <a href="https://kilianvalkhof.com/2020/accessibility/accessibility-is-an-unknown-unknown/">Accessibility</a> und dem jüngsten <a href="https://medium.com/javascript-in-plain-english/is-promise-post-mortem-cab807f18dcc">Dependency-Desaster in JavaScript</a> abschweifen.</dd>
<dt>[00:37:28] <a href="https://html.spec.whatwg.org/#audiotracklist-and-videotracklist-objects">Tracks</a></dt>
<dd>Für den Einsatz mit dem <a href="https://html.spec.whatwg.org/#the-track-element"><code>&lt;track&gt;</code>-Element</a> ersann man das ureigene <a href="https://w3c.github.io/webvtt/">WebVTT-Format</a>, das uns dezent an <a href="https://wiki.selfhtml.org/wiki/SVG/SMIL">SMIL</a> erinnert (auch wenn SMIL, des größeren Alters zum Trotz <a href="https://caniuse.com/#feat=svg-smil">noch weniger gut</a> als WebVTT <a href="https://caniuse.com/#search=vtt">unterstützt wird</a>).</dd>
<dt>[00:48:42] <a href="https://html.spec.whatwg.org/#headings-and-sections">Sections, Headlines und Outlines</a></dt>
<dd>Wir lassen das <a href="https://css-tricks.com/document-outline-dilemma/">Outline-Drama</a> revue passieren. Vom an sich <a href="https://html.spec.whatwg.org/#sectioning-content-2">sehr eleganten Algorithmus</a> ist außer ein paar <a href="https://html.spec.whatwg.org/#sections-and-headings">Browser-Standardstyles</a> nicht viel geblieben.</dd>
<dt>[01:03:32] <a href="https://html.spec.whatwg.org/#the-meter-element"><code>&lt;meter&gt;</code></a> und <a href="https://html.spec.whatwg.org/#the-progress-element"><code>&lt;progress&gt;</code></a></dt>
<dd>Warum gibt es Extra-Elemente für Fortschrittsbalken und Klapp-Dialoge a la <a href="https://html.spec.whatwg.org/#the-details-element"><code>&lt;details&gt;</code></a>, aber kein eingebautes Tab Widget? Peter versucht sich an einer Erklärung.</dd>
</dl>
<p>Am Ende landen wir unsersehens in <a href="https://tc39.es/ecma262/#sec-additional-properties-of-the-string.prototype-object">den ECMAScript-Specs</a> und staunen über die diversen weniger bekannten Rudimente in JavaScript. Vielleicht machen wir nächstes Mal ein JavaScript-Glücksrad?</p>


Eine nie dagewesenen Neuheit: HTML5-Glücksrad mit Gast! Der aus Funk, Fernsehen und Revision 424 bekannte Stefan Judis (Twitter, Web), seines Zeichens Devrel bei Contentful, scrollte mit Schepp und Peter durch die HTML-Specs, um frei über Webstandards und Trends zu assoziieren. Glücksrad [00:00:29] event.submitter Hätten Sie&#8217;s gewusst? event.submitter (MDN) verrät, welcher Button zum Absenden eines Formulars [&#8230;]

Eine nie dagewesenen Neuheit: HTML5-Glücksrad mit Gast! Der aus Funk, Fernsehen und Revision 424 bekannte Stefan Judis (Twitter, Web), seines Zeichens Devrel bei Contentful, scrollte mit Schepp und Peter durch die HTML-Specs, um frei über Webstandar[...]

Eine nie dagewesenen Neuheit: HTML5-Glücksrad mit Gast! Der aus Funk, Fernsehen und Revision 424 bekannte Stefan Judis (Twitter, Web), seines Zeichens Devrel bei Contentful, scrollte mit Schepp und Peter durch die HTML-Specs, um frei über Webstandards und Trends zu assoziieren.
Glücksrad

[00:00:29] event.submitter
Hätten Sie’s gewusst? event.submitter (MDN) verrät, welcher Button zum Absenden eines Formulars verwendet wurde. Wir fragen uns, wozu das gut sein könnte, lernen die requestSubmit()-Methode kennen und Peter gelingt es erneut, sich über React zu echauffieren.
[00:12:00] Microdata
Sind Microformats (zuvor Thema in den Revisionen 262 und 287) und damit das Semantic Web wie auch RSS und APIs als Gefallene des Web2.0-Kriegs zu rubrizieren? Uns fallen nur wenige aktuelle Use Cases für HTML5-Microdata oder Microformats oder JSON-LD ein. Sie sind Bewohner einer längst untergegangenen Welt.
[00:18:48] Server-Sent Events aka Event Source
Ein (soweit wir es sagen können) kaum genutzter Webstandard lässt uns zu localForage, Accessibility und dem jüngsten Dependency-Desaster in JavaScript abschweifen.
[00:37:28] Tracks
Für den Einsatz mit dem <track>-Element ersann man das ureigene WebVTT-Format, das uns dezent an SMIL erinnert (auch wenn SMIL, des größeren Alters zum Trotz noch weniger gut als WebVTT unterstützt wird).
[00:48:42] Sections, Headlines und Outlines
Wir lassen das Outline-Drama revue passieren. Vom an sich sehr eleganten Algorithmus ist außer ein paar Browser-Standardstyles nicht viel geblieben.
[01:03:32] <meter> und <progress>
Warum gibt es Extra-Elemente für Fortschrittsbalken und Klapp-Dialoge a la <details>, aber kein eingebautes Tab Widget? Peter versucht sich an einer Erklärung.

Am Ende landen wir unsersehens in den ECMAScript-Specs und staunen über die diversen weniger bekannten Rudimente in JavaScript. Vielleicht machen wir nächstes Mal ein JavaScript-Glücksrad?

Revision 426: gastliches Glücksrad mit Stefan Judis

<p>Nachdem Peter, motiviert durch <a href="http://warhol.io/">Warhol</a>, mal wieder einige Zeit im absurden Paralleluniversum semi-relevanter Teile der HTML-Spezifikation verbracht hatte, musste er in dieser Revision Schepp und Hans davon im Detail erzählen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] <a href="https://www.peterkroener.de/welche-html-elemente-sind-immer-unsichtbar/">Welche Elemente sind eigentlich immer unsichtbar?</a></dt>
<dd>Auf der Suche nach permanent unsichtbaren HTML-Elementen kommen wir zu manch überraschender Erkenntnis. Vieles, das wir für unsichtbar hielten, kann sichbare Effekte haben, anderem hingegen ist auch mit dem größten CSS-Brecheisen (das wäre die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/content">content-Eigenschaft</a>) keine optische Nebenwirkung zu entlocken. Als wahrhaft unsichtbar erweisen sich ausschließlich <a href="https://html.spec.whatwg.org/#embedded-content-rendering-rules"><code>&lt;audio&gt;</code>-Elemente ohne <code>controls</code>-Attribut</a>, <a href="https://html.spec.whatwg.org/#hidden-elements"><code>&lt;input type="hidden"&gt;</code></a>, <a href="https://html.spec.whatwg.org/#hidden-elements"><code>&lt;noscript&gt;</code> <em>wenn</em> Scripting aktiviert ist</a>, <a href="https://html.spec.whatwg.org/#tables-2"><code>&lt;form&gt;</code>-Elemente, die <em>direkte Kinder</em> von <code>&lt;table&gt;</code>, <code>&lt;thead&gt;</code>, <code>&lt;tbody&gt;</code>, <code>&lt;tfoot&gt;</code> oder <code>&lt;tr&gt;</code> sind</a><a>, sowie Inhalte von <span lang="en">Replaced Elements</span> (d.h. <code>&lt;source&gt;</code> und <code>&lt;track&gt;</code> in <code>&lt;video&gt;</code> bzw. <code>&lt;audio&gt;</code> und Fallback-Inhalt in unterstützen <code>&lt;video&gt;</code>-, <code>&lt;audio&gt;</code>&#8211; und <code>&lt;canvas&gt;</code>-Elementen). </a></dd>
</dl>


Nachdem Peter, motiviert durch Warhol, mal wieder einige Zeit im absurden Paralleluniversum semi-relevanter Teile der HTML-Spezifikation verbracht hatte, musste er in dieser Revision Schepp und Hans davon im Detail erzählen. Schaunotizen [00:00:30] Welche Elemente sind eigentlich immer unsichtbar? Auf der Suche nach permanent unsichtbaren HTML-Elementen kommen wir zu manch überraschender Erkenntnis. Vieles, das wir für [&#8230;]

Nachdem Peter, motiviert durch Warhol, mal wieder einige Zeit im absurden Paralleluniversum semi-relevanter Teile der HTML-Spezifikation verbracht hatte, musste er in dieser Revision Schepp und Hans davon im Detail erzählen.
Schaunotizen

[00:00:30][...]

Nachdem Peter, motiviert durch Warhol, mal wieder einige Zeit im absurden Paralleluniversum semi-relevanter Teile der HTML-Spezifikation verbracht hatte, musste er in dieser Revision Schepp und Hans davon im Detail erzählen.
Schaunotizen

[00:00:30] Welche Elemente sind eigentlich immer unsichtbar?
Auf der Suche nach permanent unsichtbaren HTML-Elementen kommen wir zu manch überraschender Erkenntnis. Vieles, das wir für unsichtbar hielten, kann sichbare Effekte haben, anderem hingegen ist auch mit dem größten CSS-Brecheisen (das wäre die content-Eigenschaft) keine optische Nebenwirkung zu entlocken. Als wahrhaft unsichtbar erweisen sich ausschließlich <audio>-Elemente ohne controls-Attribut, <input type="hidden">, <noscript> wenn Scripting aktiviert ist, <form>-Elemente, die direkte Kinder von <table>, <thead>, <tbody>, <tfoot> oder <tr> sind, sowie Inhalte von Replaced Elements (d.h. <source> und <track> in <video> bzw. <audio> und Fallback-Inhalt in unterstützen <video>-, <audio>– und <canvas>-Elementen).

Revision 425: Unsichtbares HTML

<p>Mit <strong>Stefan Judis</strong> (<a href="https://twitter.com/@stefanjudis">Twitter</a>, <a href="https://www.stefanjudis.com/">Web</a>), seines Zeichens Devrel bei <a href="https://www.contentful.com/">Contentful</a>, plauderten Schepp, Hans und Peter über Webdev-Tools im Allgemeinen und die Auswirkungen von Tools auf den Webdev-Alltag im Besonderen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] Tools</dt>
<dd>Stefan hat <a href="https://tiny-helpers.dev/">Tiny-Helpers</a> in die Welt gesetzt und hat daher seine ganz eigene Sicht auf Webdev-Tools aller Art. Wir plaudern über <a href="https://nextjs.org/">Next.js</a> PHP, Typescript, <a href="https://ant.apache.org/">Ant</a>, <a href="https://yeoman.io/">Yeoman</a>, <a href="https://gruntjs.com/">Grunt</a>, <a href="https://gulpjs.com/">Gulp</a>, <a href="https://webpack.js.org/">Webpack</a>, <a href="https://rollupjs.org/">Rollup</a>, <a href="https://github.com/nvm-sh/nvm">NVM</a>, <a href="https://parceljs.org/">Parcel</a>, Abenteuer mit Google Maps und <a href="https://opendevicelab.com/">OpenDeviceLab.com</a>, <a href="https://romejs.dev/">Rome</a>, <a href="https://www.snowpack.dev/">Snowpack</a>, <a href="https://www.algolia.com/">Algolio</a>, die Vor- und Nachteile des Einkaufs bei Cloud-Händler und zu guter letzt über Stefans liebste Tiny Helpers: <a href="https://namae.dev/">Namae</a>, <a href="https://fonty.dizoo.bg/">Fonty</a> und den <a href="https://cssgrid-generator.netlify.app/">CSS-Grid-Generator</a>. Die Workingdraft-Crew empfiehlt ihrerseits die Online-Regex-IDEs <a href="https://regex101.com/">Regex101</a> und <a href="https://regexr.com/">Regexr</a>.</dd>
</dl>


Mit Stefan Judis (Twitter, Web), seines Zeichens Devrel bei Contentful, plauderten Schepp, Hans und Peter über Webdev-Tools im Allgemeinen und die Auswirkungen von Tools auf den Webdev-Alltag im Besonderen. Schaunotizen [00:00:30] Tools Stefan hat Tiny-Helpers in die Welt gesetzt und hat daher seine ganz eigene Sicht auf Webdev-Tools aller Art. Wir plaudern über Next.js PHP, [&#8230;]

Mit Stefan Judis (Twitter, Web), seines Zeichens Devrel bei Contentful, plauderten Schepp, Hans und Peter über Webdev-Tools im Allgemeinen und die Auswirkungen von Tools auf den Webdev-Alltag im Besonderen.
Schaunotizen

[00:00:30] Tools
Stefan hat [...]

Mit Stefan Judis (Twitter, Web), seines Zeichens Devrel bei Contentful, plauderten Schepp, Hans und Peter über Webdev-Tools im Allgemeinen und die Auswirkungen von Tools auf den Webdev-Alltag im Besonderen.
Schaunotizen

[00:00:30] Tools
Stefan hat Tiny-Helpers in die Welt gesetzt und hat daher seine ganz eigene Sicht auf Webdev-Tools aller Art. Wir plaudern über Next.js PHP, Typescript, Ant, Yeoman, Grunt, Gulp, Webpack, Rollup, NVM, Parcel, Abenteuer mit Google Maps und OpenDeviceLab.com, Rome, Snowpack, Algolio, die Vor- und Nachteile des Einkaufs bei Cloud-Händler und zu guter letzt über Stefans liebste Tiny Helpers: Namae, Fonty und den CSS-Grid-Generator. Die Workingdraft-Crew empfiehlt ihrerseits die Online-Regex-IDEs Regex101 und Regexr.

Revision 424: Tools!

<p>Hans und Peter lassen sich in dieser Revision von <strong>Roland Kuhn</strong> (<a href="https://rolandkuhn.com/">Web</a>, <a href="https://twitter.com/rolandkuhn">Twitter</a>), Autor von <a href="https://www.reactivedesignpatterns.com/">Reactive Design Patterns</a> alles über Reacive Systems und Webtechnologie in Industrieanwendungen erzählen.</p>
<h3>[00:00:29] Schaunotizen</h3>
<dl>
<dt>Reactive Systems</dt>
<dd>Rolands erzählt von seiner Reise, die ihn über den Umweg der Raumfahrt zu <a href="https://de.wikipedia.org/wiki/Scala_(Programmiersprache)">Scala</a>, <a href="https://akka.io/">Akka</a> schließlch zum <a href="https://www.reactivemanifesto.org/">Reactive Manifesto</a> und zur Gründung von <a href="https://www.actyx.com/">Actyx</a> führte. Wie sprechen darüber, wie Web und P2P mit Industrieanwendungen zusammengehen, kommen um das Thema Blockchain nicht herum und sprechen über <a href="https://www.datprotocol.com/">das Dat-Protokoll</a>, <a href="https://ipfs.io/">IPFS</a>, <a href="https://beakerbrowser.com/">den Beaker Browser</a>, Event Sourcing (vgl. <a href="https://workingdraft.de/314/">Revision 314</a>) <a href="https://de.wikipedia.org/wiki/Lamport-Uhr">Lamport-Uhren</a>, reaktive Programmierung sowie CouchDB/PouchDB (siehe <a href="https://workingdraft.de/175/">Revision 175</a>).</dd>
</dl>


Hans und Peter lassen sich in dieser Revision von Roland Kuhn (Web, Twitter), Autor von Reactive Design Patterns alles über Reacive Systems und Webtechnologie in Industrieanwendungen erzählen. [00:00:29] Schaunotizen Reactive Systems Rolands erzählt von seiner Reise, die ihn über den Umweg der Raumfahrt zu Scala, Akka schließlch zum Reactive Manifesto und zur Gründung von Actyx [&#8230;]

Hans und Peter lassen sich in dieser Revision von Roland Kuhn (Web, Twitter), Autor von Reactive Design Patterns alles über Reacive Systems und Webtechnologie in Industrieanwendungen erzählen.
[00:00:29] Schaunotizen

Reactive Systems
Rolands erzähl[...]

Hans und Peter lassen sich in dieser Revision von Roland Kuhn (Web, Twitter), Autor von Reactive Design Patterns alles über Reacive Systems und Webtechnologie in Industrieanwendungen erzählen.
[00:00:29] Schaunotizen

Reactive Systems
Rolands erzählt von seiner Reise, die ihn über den Umweg der Raumfahrt zu Scala, Akka schließlch zum Reactive Manifesto und zur Gründung von Actyx führte. Wie sprechen darüber, wie Web und P2P mit Industrieanwendungen zusammengehen, kommen um das Thema Blockchain nicht herum und sprechen über das Dat-Protokoll, IPFS, den Beaker Browser, Event Sourcing (vgl. Revision 314) Lamport-Uhren, reaktive Programmierung sowie CouchDB/PouchDB (siehe Revision 175).

Revision 423: Reactive Systems

<p>Nachdem es schon wieder unglaubliche zwei Jahre her ist, <a href="https://workingdraft.de/329/">dass wir mit ihm über das &#8222;Actor Model&#8220; reden durften</a>, war es nun höchste Eisenbahn, <a href="https://twitter.com/dassurma">Surma</a> wieder einzuladen und über aktuelle Entwicklungen im (multigethreadedten) Web zu plaudern.</p>
<h3>[00:00:29] Schaunotizen</h3>
<dl>
<dt>Web Worker</dt>
<dd>Eines von Surmas Steckenpferden ist es, alles was nicht bei &#8222;Drei!&#8220; auf dem Baum ist in separate Threads auszulagern. Wir sprechen über Sinn und Zweck dieser Heranangehensweise am Beispiel der Projekte <a href="https://squoosh.app/">Squoosh</a> und <a href="https://proxx.app/">Proxx</a> des Chrome Developer Relations Teams (siehe auch die <a href="https://github.com/GoogleChromeLabs/">Google Chrome Labs auf Github</a>). Wir erfahren, dass das Ziel dabei weniger ist, mehr Geschwindigkeit auf ohnehin schnellen Plattformen herauszuholen, sondern vielmehr dem UI-Thread auf <a href="https://www.youtube.com/watch?v=L55ko0wzsPo">Einsteiger-Hardware</a> den Rücken frei zu halten.</dd>
<dt>ComLink</dt>
<dd>Einer der Nachteile von Web Worker ist die Tatsache, dass sie anstrengend im Umgang sind. Moderne Programmierparadigmen und Surmas Open-Source-Projekt <a href="https://github.com/GoogleChromeLabs/comlink">ComLink</a> schaffen hier allerdings Abhilfe. Und auch wenn das Motto &#8222;Comlink makes WebWorkers enjoyable&#8220; lautet, so lässt sich diese Bibliothek auch ganz prima für eine angenehme Kommunikation mit Service Workern oder über Frame-Grenzen hinweg einsetzen (also im Prinzip alles, was auf das Message-Interface setzt).</dd>
<dt>Wasm, WASI und Interface Types</dt>
<dd>Surma kennt sich aber nicht nur mit elegant programmierbarem Multithreading aus, sondern auch mit <a href="https://www.youtube.com/watch?v=njt-Qzw0mVY">WebAssembly</a>, kurz: Wasm. So nutzt unter anderem das eingangs erwähnte Squoosh unter der Haube von C++ nach Wasm portierte, gebräuchliche Bildkompressoren wie MozJPEG oder OptiPNG. Wir unterhielten uns außerdem über kommende Neuerungen wie <a href="https://www.youtube.com/watch?v=B-ign0dW51o">Interface Types</a>, sowie nochmal über WASI (höre dazu auch <a href="https://workingdraft.de/394/">Revision 394</a>). Und wir sinnierten über den Grund, weswegen es so aussieht, als ob Wasm schaffen wird, was Java und Silverlight nicht gelungen ist, nämlich das langersehnte, universelle Runtime-Environment zu werden.</p>
<blockquote class="twitter-tweet">
<p dir="ltr" lang="en">If WASM+WASI existed in 2008, we wouldn&#8217;t have needed to created Docker. That&#8217;s how important it is. Webassembly on the server is the future of computing. A standardized system interface was the missing link. Let&#8217;s hope WASI is up to the task! <a href="https://t.co/wnXQg4kwa4">https://t.co/wnXQg4kwa4</a></p>
<p>— Solomon Hykes (@solomonstre) <a href="https://twitter.com/solomonstre/status/1111004913222324225?ref_src=twsrc%5Etfw">March 27, 2019</a></p></blockquote>
<p><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/GoogleChromeLabs/import-from-worker">rollup-plugin-off-main-thread</a></dt>
<dd>Dieses Plugin für den Bundler Rollup macht es möglich ES Modules innerhalb von Workern zu nutzen.</dd>
<dt><a href="https://github.com/surma/rollup-plugin-off-main-thread">importFromWorker()</a></dt>
<dd>Dieses andere Projekt von Surma in Zusammenarbeit mit <a href="https://twitter.com/_developit">Jason Miller</a> ermöglicht es, analog zu ES Modulen, Funktionen aus Web Workern transparent in den UI-Thread &#8222;zu importieren&#8220; und sie dort wie gewohnt zu nutzen.</dd>
<dt><a href="https://www.youtube.com/playlist?list=PL6ed-L7Ni0yQ1pCKkw1g3QeN2BQxXvCPK">WebAssembly Summit 2020</a></dt>
<dd>Kurz vor Corona-Ladenschluss fand der von Surma organisierte WebAssembly Summit statt, dessen Videos online zum Binge-Watchen bereit stehen.</dd>
<dt><a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcIAKIQFsNbV0JDws_G_bnNo9">HTTP 203</a></dt>
<dd>In ihrer Videoserie diskutieren Surma und <a href="https://twitter.com/jaffathecake">Jake Archibald</a> regelmäßig neue Web Features und Konzepte, garniert mit einer guten Portion Humor :)</dd>
<dt><a href="https://developers.google.com/web/shows/http203/podcast">HTTP 203 Podcast</a></dt>
<dd>Nachdem dank Coronavirus auch die Google Developer Relations Menschen von zu Hause arbeiten müssen, setzen Jake und Surma ihre Serie nun einfach in Form eines Podcasts fort (we approve!).</dd>
</dl>


Nachdem es schon wieder unglaubliche zwei Jahre her ist, dass wir mit ihm über das &#8222;Actor Model&#8220; reden durften, war es nun höchste Eisenbahn, Surma wieder einzuladen und über aktuelle Entwicklungen im (multigethreadedten) Web zu plaudern. [00:00:29] Schaunotizen Web Worker Eines von Surmas Steckenpferden ist es, alles was nicht bei &#8222;Drei!&#8220; auf dem Baum ist [&#8230;]

Nachdem es schon wieder unglaubliche zwei Jahre her ist, dass wir mit ihm über das „Actor Model“ reden durften, war es nun höchste Eisenbahn, Surma wieder einzuladen und über aktuelle Entwicklungen im (multigethreadedten) Web zu plaudern[...]

Nachdem es schon wieder unglaubliche zwei Jahre her ist, dass wir mit ihm über das „Actor Model“ reden durften, war es nun höchste Eisenbahn, Surma wieder einzuladen und über aktuelle Entwicklungen im (multigethreadedten) Web zu plaudern.
[00:00:29] Schaunotizen

Web Worker
Eines von Surmas Steckenpferden ist es, alles was nicht bei „Drei!“ auf dem Baum ist in separate Threads auszulagern. Wir sprechen über Sinn und Zweck dieser Heranangehensweise am Beispiel der Projekte Squoosh und Proxx des Chrome Developer Relations Teams (siehe auch die Google Chrome Labs auf Github). Wir erfahren, dass das Ziel dabei weniger ist, mehr Geschwindigkeit auf ohnehin schnellen Plattformen herauszuholen, sondern vielmehr dem UI-Thread auf Einsteiger-Hardware den Rücken frei zu halten.
ComLink
Einer der Nachteile von Web Worker ist die Tatsache, dass sie anstrengend im Umgang sind. Moderne Programmierparadigmen und Surmas Open-Source-Projekt ComLink schaffen hier allerdings Abhilfe. Und auch wenn das Motto „Comlink makes WebWorkers enjoyable“ lautet, so lässt sich diese Bibliothek auch ganz prima für eine angenehme Kommunikation mit Service Workern oder über Frame-Grenzen hinweg einsetzen (also im Prinzip alles, was auf das Message-Interface setzt).
Wasm, WASI und Interface Types
Surma kennt sich aber nicht nur mit elegant programmierbarem Multithreading aus, sondern auch mit WebAssembly, kurz: Wasm. So nutzt unter anderem das eingangs erwähnte Squoosh unter der Haube von C++ nach Wasm portierte, gebräuchliche Bildkompressoren wie MozJPEG oder OptiPNG. Wir unterhielten uns außerdem über kommende Neuerungen wie Interface Types, sowie nochmal über WASI (höre dazu auch Revision 394). Und wir sinnierten über den Grund, weswegen es so aussieht, als ob Wasm schaffen wird, was Java und Silverlight nicht gelungen ist, nämlich das langersehnte, universelle Runtime-Environment zu werden.

If WASM+WASI existed in 2008, we wouldn’t have needed to created Docker. That’s how important it is. Webassembly on the server is the future of computing. A standardized system interface was the missing link. Let’s hope WASI is up to the task! https://t.co/wnXQg4kwa4
— Solomon Hykes (@solomonstre) March 27, 2019


Keine Schaunotizen

rollup-plugin-off-main-thread
Dieses Plugin für den Bundler Rollup macht es möglich ES Modules innerhalb von Workern zu nutzen.
importFromWorker()
Dieses andere Projekt von Surma in Zusammenarbeit mit Jason Miller ermöglicht es, analog zu ES Modulen, Funktionen aus Web Workern transparent in den UI-Thread „zu importieren“ und sie dort wie gewohnt zu nutzen.
WebAssembly Summit 2020
Kurz vor Corona-Ladenschluss fand der von Surma organisierte WebAssembly Summit statt, dessen Videos online zum Binge-Watchen bereit stehen.
HTTP 203
In ihrer Videoserie diskutieren Surma und Jake Archibald regelmäßig neue Web Features und Konzepte, garniert mit einer guten Portion Humor :)
HTTP 203 Podcast
Nachdem dank Coronavirus auch die Google Developer Relations Menschen von zu Hause arbeiten müssen, setzen Jake und Surma ihre Serie nun einfach in Form eines Podcasts fort (we approve!).

Revision 422: Web Worker, ComLink und WASM

<p>In dieser Revision wurde Peter von Hans und Rodney über den Inhalt <a href="https://www.peterkroener.de/javascript-generators-durch-die-array-linse-betrachtet/">seines Posts über JavaScript-Generators</a> ausgequetscht</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] Use Cases für Generators</dt>
<dd>Nachdem Generators an sich zuletzt 2013 <a href="https://workingdraft.de/148/">Thema bei uns waren</a> und wir im <a href="https://workingdraft.de/special-2019/">Special zum Ende von 2019</a> nur kurz über die <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/asyncIterator">asynchrone Variante</a> von Generators gesprochen haben, geht es diesmal um die ganz normalen <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator">Generators</a>. Wir sprechen über Generators als solche, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Iteration_protocols">Iterations-Protokolle in modernem ECMAScript</a>, <a href="https://github.com/facebook/regenerator">Regenerator</a>, <a href="https://github.com/redux-saga/redux-saga">redux-saga</a>, andere Use Cases für Generatoren und am Ende auch kurz über die <a href="https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker">TreeWalker-API</a>.</dd>
</dl>


In dieser Revision wurde Peter von Hans und Rodney über den Inhalt seines Posts über JavaScript-Generators ausgequetscht Schaunotizen [00:00:30] Use Cases für Generators Nachdem Generators an sich zuletzt 2013 Thema bei uns waren und wir im Special zum Ende von 2019 nur kurz über die asynchrone Variante von Generators gesprochen haben, geht es diesmal um [&#8230;]

In dieser Revision wurde Peter von Hans und Rodney über den Inhalt seines Posts über JavaScript-Generators ausgequetscht
Schaunotizen

[00:00:30] Use Cases für Generators
Nachdem Generators an sich zuletzt 2013 Thema bei uns waren und wir im Special[...]

In dieser Revision wurde Peter von Hans und Rodney über den Inhalt seines Posts über JavaScript-Generators ausgequetscht
Schaunotizen

[00:00:30] Use Cases für Generators
Nachdem Generators an sich zuletzt 2013 Thema bei uns waren und wir im Special zum Ende von 2019 nur kurz über die asynchrone Variante von Generators gesprochen haben, geht es diesmal um die ganz normalen Generators. Wir sprechen über Generators als solche, Iterations-Protokolle in modernem ECMAScript, Regenerator, redux-saga, andere Use Cases für Generatoren und am Ende auch kurz über die TreeWalker-API.

Revision 421: Use Cases für Generators

<p>This time, again in English, we invited Adam Argyle of Google (take a look at his fancy <a href="https://nerdy.dev/">website</a> and <a href="https://twitter.com/argyleink">Twitter</a>) to our show to talk about his work especially in the field of CSS specification writing.</p>
<h3>[00:00:30] Schaunotizen</h3>
<dl>
<dt><a href="https://visbug.web.app/">VisBug</a></dt>
<dd>VisBug is a tool for designers and developers which helps you to edit design changes and communicate it in code. This enables designers to handle design testing and fixes on their own on production websites and helps you to give more valuable feedback even if you don&#8217;t know how to code. Shameless self promotion: Take a look at <a href="https://warhol.io/">Warhol</a> if you want to take it a step further and automate design testing.</dd>
<dt>CSS Specifications</dt>
<dd>Adam works on a couple of CSS Specifications and drafts for the spec which we talk about. We take a look at what <a href="https://www.w3.org/TR/css-color-4/">Colors currently can do</a> and what changes are coming up in <a href="https://www.w3.org/TR/css-color-5/">Colors Module Level 5</a>. Then there is <a href="https://www.w3.org/TR/css-typed-om-1/">Typed OM</a> which is part of the Houdini APIs and we discuss changes that are coming to the default form controls. To close the discussion we take a quick look at CSS&#8216; future.</dd>
</dl>
<h3>[00:00:30] Keine Schaunotizen</h3>
<dl>
<dt>[00:00:30] <a href="https://pod.link/thecsspodcast">The CSS Podcast</a></dt>
<dd>Together with Una Kravets, Adam has his own (pretty new) podcast where they discuss CSS-related topics in depth.</dd>
</dl>


This time, again in English, we invited Adam Argyle of Google (take a look at his fancy website and Twitter) to our show to talk about his work especially in the field of CSS specification writing. [00:00:30] Schaunotizen VisBug VisBug is a tool for designers and developers which helps you to edit design changes and [&#8230;]

This time, again in English, we invited Adam Argyle of Google (take a look at his fancy website and Twitter) to our show to talk about his work especially in the field of CSS specification writing.
[00:00:30] Schaunotizen

VisBug
VisBug is a tool fo[...]

This time, again in English, we invited Adam Argyle of Google (take a look at his fancy website and Twitter) to our show to talk about his work especially in the field of CSS specification writing.
[00:00:30] Schaunotizen

VisBug
VisBug is a tool for designers and developers which helps you to edit design changes and communicate it in code. This enables designers to handle design testing and fixes on their own on production websites and helps you to give more valuable feedback even if you don’t know how to code. Shameless self promotion: Take a look at Warhol if you want to take it a step further and automate design testing.
CSS Specifications
Adam works on a couple of CSS Specifications and drafts for the spec which we talk about. We take a look at what Colors currently can do and what changes are coming up in Colors Module Level 5. Then there is Typed OM which is part of the Houdini APIs and we discuss changes that are coming to the default form controls. To close the discussion we take a quick look at CSS‘ future.

[00:00:30] Keine Schaunotizen

[00:00:30] The CSS Podcast
Together with Una Kravets, Adam has his own (pretty new) podcast where they discuss CSS-related topics in depth.

Revision 420: CSS Specifications & VisBug

<p>Pestbedingt fielen uns die Gäste aus, sodass Schepp und Peter einfach spontan ein paar Runden HTML5-Glücksrad spielten.</p>
<h3>[00:00:27] Glücksrad</h3>
<dl>
<dt><a href="https://html.spec.whatwg.org/#linkTypes">Link Types</a></dt>
<dd>Ein Link ist in HTML nicht unbedingt ein <code>&lt;a&gt;</code>-Element, sondern ggf. auch eine Image Map, ein Formular oder ein <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link">&lt;link&gt;</a>-Element. Über dieses und die diversen Sorten von Links quatschen wir ausgiebig. Performance-Papst Schepp kriegt außerdem die Kurve zu <a href="https://www.w3.org/TR/resource-hints/">Resource Hints</a> und <a href="https://developers.google.com/web/updates/2019/02/priority-hints">Priority Hints</a>.</dd>
<dt><a href="https://html.spec.whatwg.org/#the-formdataevent-interface">FormData-Event</a></dt>
<dd>Das FormData-Event ist uns beiden völlig neu und entsprechend fällt uns nichts schlaues dazu ein. Klar, es gehört zu FormData (<a href="https://xhr.spec.whatwg.org/#formdata">Specs</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">MDN</a>), was von Safari nur sehr unzureichend unterstützt wird (wie unter anderem auch <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList">classList</a>), aber sonst?</dd>
<dt><a href="https://html.spec.whatwg.org/#the-meta-element">Meta-Element</a></dt>
<dd>Den Treffer auf dem Meta-Element nehmen wir zum Anlass, die Fähigkeiten und Use Cases des <a href="https://html.spec.whatwg.org/#attr-meta-http-equiv"><code>http-equiv</code>-Attributs</a> ausgiebig zu diskutieren.</dd>
<dt>(Shared) <a href="https://html.spec.whatwg.org/#workers">Workers</a></dt>
<dd><a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker/SharedWorker">Shared Worker</a> sind Multi-Client-Worker. Peter fordert, wie ungefähr alle drei Sekunden, neue Frontend-Frameworks auf Worker-Basis, wofür Schepp mit <a href="https://github.com/neomjs/neo">neo.mjs</a> bereits einen Kandidaten kennt. Außerdem erwähnen wir noch <a href="https://github.com/GoogleChromeLabs/comlink">Comlink</a> und diskutieren das Für und Wider von <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Local_storage">LocalStorage</a> als Kommunikationsmittel.</dd>
<dt><a href="https://html.spec.whatwg.org/#client-side-form-validation">Form Validation</a></dt>
<dd>Ist die HTML5-Formularvalidierung gut oder mehr so mittel? Es wird kontrovers! Auf <a href="https://webwewant.fyi/">webwewant.fyi</a> gibt es noch einige offene Wünsche, andererseits ist die Validierung mächtig genug, um mit ihrer Hilfe ein <a href="https://vimeo.com/364369506">HTML/CSS-Mariocart</a> zu bauen. Gegen Ende bewundern wir ein wenig <a href="https://www.thisiscolossal.com/2019/11/css-portraits-diana-smith/">CSS-Kunst</a>.</dd>
</dl>


Pestbedingt fielen uns die Gäste aus, sodass Schepp und Peter einfach spontan ein paar Runden HTML5-Glücksrad spielten. [00:00:27] Glücksrad Link Types Ein Link ist in HTML nicht unbedingt ein &#60;a&#62;-Element, sondern ggf. auch eine Image Map, ein Formular oder ein &#60;link&#62;-Element. Über dieses und die diversen Sorten von Links quatschen wir ausgiebig. Performance-Papst Schepp kriegt [&#8230;]

Pestbedingt fielen uns die Gäste aus, sodass Schepp und Peter einfach spontan ein paar Runden HTML5-Glücksrad spielten.
[00:00:27] Glücksrad

Link Types
Ein Link ist in HTML nicht unbedingt ein <a>-Element, sondern ggf. auch eine Image Map, [...]

Pestbedingt fielen uns die Gäste aus, sodass Schepp und Peter einfach spontan ein paar Runden HTML5-Glücksrad spielten.
[00:00:27] Glücksrad

Link Types
Ein Link ist in HTML nicht unbedingt ein <a>-Element, sondern ggf. auch eine Image Map, ein Formular oder ein <link>-Element. Über dieses und die diversen Sorten von Links quatschen wir ausgiebig. Performance-Papst Schepp kriegt außerdem die Kurve zu Resource Hints und Priority Hints.
FormData-Event
Das FormData-Event ist uns beiden völlig neu und entsprechend fällt uns nichts schlaues dazu ein. Klar, es gehört zu FormData (Specs, MDN), was von Safari nur sehr unzureichend unterstützt wird (wie unter anderem auch classList), aber sonst?
Meta-Element
Den Treffer auf dem Meta-Element nehmen wir zum Anlass, die Fähigkeiten und Use Cases des http-equiv-Attributs ausgiebig zu diskutieren.
(Shared) Workers
Shared Worker sind Multi-Client-Worker. Peter fordert, wie ungefähr alle drei Sekunden, neue Frontend-Frameworks auf Worker-Basis, wofür Schepp mit neo.mjs bereits einen Kandidaten kennt. Außerdem erwähnen wir noch Comlink und diskutieren das Für und Wider von LocalStorage als Kommunikationsmittel.
Form Validation
Ist die HTML5-Formularvalidierung gut oder mehr so mittel? Es wird kontrovers! Auf webwewant.fyi gibt es noch einige offene Wünsche, andererseits ist die Validierung mächtig genug, um mit ihrer Hilfe ein HTML/CSS-Mariocart zu bauen. Gegen Ende bewundern wir ein wenig CSS-Kunst.

Revision 419: HTML5-Glücksrad

Wöchentlicher News-Podcast für Webdesigner und -entwickler

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 430: Berufseinstieg per Coding Bootcamp

Working Draft

Revision 429: HTML5 in Vergangenheit, Gegenwart und Zukunft

Working Draft

Revision 428: Deno

Working Draft

Revision 427: CSS Next

Working Draft

Revision 426: gastliches Glücksrad mit Stefan Judis

Working Draft

Revision 425: Unsichtbares HTML

Working Draft

Revision 424: Tools!

Working Draft

Revision 423: Reactive Systems

Working Draft

Revision 422: Web Worker, ComLink und WASM

Working Draft

Revision 421: Use Cases für Generators

Working Draft

Revision 420: CSS Specifications & VisBug

Working Draft

Revision 419: HTML5-Glücksrad

Working Draft