<p>Erneut trafen sich Stefan und Peter unter dem Vorwand einer neuen TypeScript-Version um ihrem <a href="https://twitter.com/fhemberger/status/1458379683674955778">Zorn</a> über alle möglichen Gesamtsituationen Luft zu machen.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://1-horn.com/WorkingDraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 350px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/11/business-1horn.jpg" alt="" /></a></p>
<div class="message_content">
<p>Als Digital-Agentur beraten und unterstützen die BUSINESS UNICORNS aus Velen ihre Kunden in den Bereichen Digitalisierung, Marketing und Branding.</p>
<p>Bei der Konzeption von Markenidentitäten und der Umsetzung von Individualentwicklungen legen die BUSINESS UNICORNS stets ihre Aufmerksamkeit auf die User Experience der jeweiligen Zielgruppen.</p>
<p>Zudem fokussieren sie sich zunehmend auf die Digitalisierung und Transformation in Bereichen der ökologischen, ökonomischen und sozialen Nachhaltigkeit. Ziel ist es, die Grenzen des aktuell möglichen mit User-Centered Design und Development zu erweitern.</p>
<p>Mehr dazu erfahrt ihr unter: <a href="https://1-horn.com/WorkingDraft?ref=workingdraft.de">1-horn.com/WorkingDraft</a></p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:55] State of the ECMAScript Module</dt>
<dd><a href="https://github.com/microsoft/TypeScript/issues/46452">TypeScript wollte besseren ESM-Support ausrollen und hat&#8217;s dann doch nicht getan.</a> Warum? Weil aktuell JS-Module ein einziges Chaos sind! Wir gedenken den Ahnen (<a href="https://requirejs.org/">RequireJS-</a> und <a href="https://nodejs.org/docs/latest/api/modules.html">CommonJS-Modulen</a> sowie <a href="https://browserify.org/">Browserify</a>) und verfluchen sie für das, zu dem sie den <a href="https://xkcd.com/927/">ESM-Standard</a> verleitet haben. Zwischen unserem Geschipfe sprechen wir auch über modul-relevante Tools der nächsten (<a href="https://rome.tools/">Rome</a>, <a href="https://github.com/vitejs/vite">Vite</a>, <a href="https://esbuild.github.io/">esbuild</a>, <a href="https://github.com/swc-project/swc">swc</a>, <a href="https://deno.land/">deno</a>) und letzten Generation (<a href="https://jestjs.io/">Jest</a>, <a href="https://developers.google.com/closure/compiler">Closure Compiler</a>, <a href="https://lesscss.org/">Less</a>, <a href="https://sass-lang.com/">Sass</a>), sowie ein wenig über React, die <a href="https://scriptconf.org/">ScriptConf</a>, <a href="https://leerob.io/blog/rust">Rust (und andere Sprachen) als die Zukunft von JS-Infrastruktur</a> und <a href="https://de.wikipedia.org/wiki/LLVM">LLVM</a>.</dd>
<dt>[00:00:00] <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/">TypeScript 4.5</a></dt>
<dd>So sehr uns das Modul-Chaos ärgert, so gut finden wir dann doch <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#tailrec-conditional">Tail-Recursion Elimination für rekursive Typen</a> (übrigens ein ES6-Feature, <a href="https://kangax.github.io/compat-table/es6/">das bis heute fast in keiner JS-Engine funktioniert</a>), <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-5/#lib-node-modules"><code>lib</code>-Upgrades</a> und Use Cases wie den <a href="https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver">ResizeObserver</a>, Neuerungen für Template String Types, Top-Level-Await, Private Field Presence Checks, <a href="https://2ality.com/2021/01/import-assertions.html">Import Asertions</a>, <a href="https://jsdoc.app/">JSDOC</a>, <a href="https://tsdoc.org/">TSDOC</a> und <a href="https://de.wikipedia.org/wiki/SOAP">SOAP</a>.</dd>
</dl>


Erneut trafen sich Stefan und Peter unter dem Vorwand einer neuen TypeScript-Version um ihrem Zorn über alle möglichen Gesamtsituationen Luft zu machen. Unser Sponsor Als Digital-Agentur beraten und unterstützen die BUSINESS UNICORNS aus Velen ihre Kunden in den Bereichen Digitalisierung, Marketing und Branding. Bei der Konzeption von Markenidentitäten und der Umsetzung von Individualentwicklungen legen die [&#8230;]

Working Draft

Erneut trafen sich Stefan und Peter unter dem Vorwand einer neuen TypeScript-Version um ihrem Zorn über alle möglichen Gesamtsituationen Luft zu machen.

Unser Sponsor


Als Digital-Agentur beraten und unterstützen die BUSINESS UNICORNS aus Velen ih[...]

Erneut trafen sich Stefan und Peter unter dem Vorwand einer neuen TypeScript-Version um ihrem Zorn über alle möglichen Gesamtsituationen Luft zu machen.

Unser Sponsor


Als Digital-Agentur beraten und unterstützen die BUSINESS UNICORNS aus Velen ihre Kunden in den Bereichen Digitalisierung, Marketing und Branding.
Bei der Konzeption von Markenidentitäten und der Umsetzung von Individualentwicklungen legen die BUSINESS UNICORNS stets ihre Aufmerksamkeit auf die User Experience der jeweiligen Zielgruppen.
Zudem fokussieren sie sich zunehmend auf die Digitalisierung und Transformation in Bereichen der ökologischen, ökonomischen und sozialen Nachhaltigkeit. Ziel ist es, die Grenzen des aktuell möglichen mit User-Centered Design und Development zu erweitern.
Mehr dazu erfahrt ihr unter: 1-horn.com/WorkingDraft


Schaunotizen

[00:01:55] State of the ECMAScript Module
TypeScript wollte besseren ESM-Support ausrollen und hat’s dann doch nicht getan. Warum? Weil aktuell JS-Module ein einziges Chaos sind! Wir gedenken den Ahnen (RequireJS- und CommonJS-Modulen sowie Browserify) und verfluchen sie für das, zu dem sie den ESM-Standard verleitet haben. Zwischen unserem Geschipfe sprechen wir auch über modul-relevante Tools der nächsten (Rome, Vite, esbuild, swc, deno) und letzten Generation (Jest, Closure Compiler, Less, Sass), sowie ein wenig über React, die ScriptConf, Rust (und andere Sprachen) als die Zukunft von JS-Infrastruktur und LLVM.
[00:00:00] TypeScript 4.5
So sehr uns das Modul-Chaos ärgert, so gut finden wir dann doch Tail-Recursion Elimination für rekursive Typen (übrigens ein ES6-Feature, das bis heute fast in keiner JS-Engine funktioniert), lib-Upgrades und Use Cases wie den ResizeObserver, Neuerungen für Template String Types, Top-Level-Await, Private Field Presence Checks, Import Asertions, JSDOC, TSDOC und SOAP.

Revision 505: ES-Module und ein bisschen TypeScript 4.5

<p>Aller guten Dinge sind drei, und so kam es dass wir <a href="https://uhlmann.pro/">Jon Uhlmann</a> (<a href="https://twitter.com/jonnitto">@jonnitto</a>) zum dritten Mal als Gast einladen konnten, um mit ihm über den Themenkomplex &#8222;Analytics &amp; Tracking Tools&#8220; zu sprechen. Unsere vorherigen Ausgaben mit ihm findet Ihr unter <a href="https://workingdraft.de/490/">Revision 490: Alpine JS &amp; Petit Vue mit Jon Uhlmann</a> und <a href="https://workingdraft.de/496/">Revision 496: Tooling rund ums Frontend Tooling</a>.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://lotum.com/de/jobs/dev?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/11/workindraft.de_1.jpg" alt="" /></a></p>
<div class="message_content">Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung zu erschaffen, die jeden Tag Millionen Freund:innen und Familien gemeinsam spielen. Die Spiele wie 4 Bilder 1 Wort und Quiz Planet wurden schon in 27 Sprachen von über 800 Millionen Nutzer:innen weltweit installiert. Unsere Entwicklungsteams (aktuell 13 Entwickler:innen, 2 BI Developer, 6 Product Designer:innen und 3 Game Leads/POs) arbeiten dabei stark autonom und legen Wert auf eleganten und einfach wartbaren Code. <a href="https://lotum.com/de/jobs/dev?ref=workingdraft.de">Erfahre hier mehr darüber</a>, wie es ist, bei uns zu arbeiten.</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:50] Analytics- &amp; Tracking-Tools</dt>
<dd>Wir beginnen mit einer Aufzählung der verschiedenen Arten an Analytics- &amp; Tracking-Tools: Angefangen hat alles Ende der Neunziger mit Perl-befeuerten <a href="https://www.besucherzaehler-kostenlos.de/">Besucherzählern</a> und dem <a href="https://de.wikipedia.org/wiki/Logdateianalyse">Auswerten von Server Logs</a> &#8211; z.B. mit <a href="https://awstats.sourceforge.io/">AWStats</a>, das auch wir hier vom Podcast noch heute benutzen, um unsere Downloadzahlen zu tracken. Mitte der Zweitausender <a href="https://de.wikipedia.org/wiki/Urchin_(Software)">kaufte Google die Firma Urchin inklusive Ihres gleichnamigen Analytics-Tools</a>, welches im Anschluss in &#8222;Google Analytics&#8220; umbenannt und zur kostenlosen Nutzung freigegeben wurde. Entsprechend explodierte danach der Einsatz dieses Tools. Noch etwas später wurden Werkzeuge populär, die Besuchersessions tracken Besucherverhalten in Heatmaps abbilden, wie z.B. <a href="https://www.hotjar.com/">Hotjar</a>. Die neueste Errungenschaft sind sogenannte &#8222;Retargeting&#8220;-Pixel, mit denen Werbetreibende, aber auch Facebook erkennen, dass man sich für bestimmte Themen interessiert und die einem fortan mit immer wieder dieselbe Werbung schwer auf den Keks gehen können.</p>
<p>Die Vorteile dieser Tools liegen auf der Hand. Gleichzeitig ist Datensparsamkeit ein erstrebenswertes Ziel, weil Daten in falschen Händen auch gegen einen verwendet werden kann. Aus diesem Grund entwickeln sich immer mehr Betriebssysteme und Browser in Richtung Privacy, so dass man entweder ganz vor Tracking geschützt wird oder nur noch dann getrackt wird, wenn man selbst zustimmt (was in diesem Fall wohl nur noch 10% der Nutzer*innen tun):</p>
<ul>
<li>Der <a href="https://de.wikipedia.org/wiki/Brave_(Browser)">Brave Browser</a></li>
<li>Apples <a href="https://developer.apple.com/documentation/apptrackingtransparency">App Tracking Transparency</a> und die <a href="https://www.apple.com/safari/docs/Safari_White_Paper_Nov_2019.pdf">Intelligent Tracking Prevention</a> in Safari, oder</li>
<li>Firefox&#8216; <a href="https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop">Enhanced Tracking Protection</a></li>
</ul>
<p>Gleichzeitig entwickelt sich ein Markt für alternative, DSGVO-konformere Tools, wahlweise zum Selberhosten oder in der Cloud:</p>
<ul>
<li><a href="https://matomo.org/">Matomo</a></li>
<li><a href="https://plausible.io/">Plausible.io</a></li>
<li><a href="https://piwikpro.de/">Piwik Pro</a></li>
<li><a href="https://sentry.io/">Sentry</a></li>
</ul>
<p>Insgesamt 60 Tools listet <a href="https://plausible.io/blog/google-analytics-alternatives">dieses Blogpost</a> auf.</p>
<p>Wie erwähnen außerdem die Möglichkeiten, ganz ohne eigenes Tracking interessante Erkenntnisse aus der <a href="https://search.google.com/search-console">Google Search Console</a> oder dem <a href="https://developers.google.com/web/tools/chrome-user-experience-report/">Chrome User Experience Report</a> (CrUX) zu gewinnen.</dd>
</dl>


Aller guten Dinge sind drei, und so kam es dass wir Jon Uhlmann (@jonnitto) zum dritten Mal als Gast einladen konnten, um mit ihm über den Themenkomplex &#8222;Analytics &#38; Tracking Tools&#8220; zu sprechen. Unsere vorherigen Ausgaben mit ihm findet Ihr unter Revision 490: Alpine JS &#38; Petit Vue mit Jon Uhlmann und Revision 496: Tooling [&#8230;]

Aller guten Dinge sind drei, und so kam es dass wir Jon Uhlmann (@jonnitto) zum dritten Mal als Gast einladen konnten, um mit ihm über den Themenkomplex „Analytics & Tracking Tools“ zu sprechen. Unsere vorherigen Ausgaben mit ihm fin[...]

Aller guten Dinge sind drei, und so kam es dass wir Jon Uhlmann (@jonnitto) zum dritten Mal als Gast einladen konnten, um mit ihm über den Themenkomplex „Analytics & Tracking Tools“ zu sprechen. Unsere vorherigen Ausgaben mit ihm findet Ihr unter Revision 490: Alpine JS & Petit Vue mit Jon Uhlmann und Revision 496: Tooling rund ums Frontend Tooling.

Unser Sponsor

Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung zu erschaffen, die jeden Tag Millionen Freund:innen und Familien gemeinsam spielen. Die Spiele wie 4 Bilder 1 Wort und Quiz Planet wurden schon in 27 Sprachen von über 800 Millionen Nutzer:innen weltweit installiert. Unsere Entwicklungsteams (aktuell 13 Entwickler:innen, 2 BI Developer, 6 Product Designer:innen und 3 Game Leads/POs) arbeiten dabei stark autonom und legen Wert auf eleganten und einfach wartbaren Code. Erfahre hier mehr darüber, wie es ist, bei uns zu arbeiten.

Schaunotizen

[00:01:50] Analytics- & Tracking-Tools
Wir beginnen mit einer Aufzählung der verschiedenen Arten an Analytics- & Tracking-Tools: Angefangen hat alles Ende der Neunziger mit Perl-befeuerten Besucherzählern und dem Auswerten von Server Logs – z.B. mit AWStats, das auch wir hier vom Podcast noch heute benutzen, um unsere Downloadzahlen zu tracken. Mitte der Zweitausender kaufte Google die Firma Urchin inklusive Ihres gleichnamigen Analytics-Tools, welches im Anschluss in „Google Analytics“ umbenannt und zur kostenlosen Nutzung freigegeben wurde. Entsprechend explodierte danach der Einsatz dieses Tools. Noch etwas später wurden Werkzeuge populär, die Besuchersessions tracken Besucherverhalten in Heatmaps abbilden, wie z.B. Hotjar. Die neueste Errungenschaft sind sogenannte „Retargeting“-Pixel, mit denen Werbetreibende, aber auch Facebook erkennen, dass man sich für bestimmte Themen interessiert und die einem fortan mit immer wieder dieselbe Werbung schwer auf den Keks gehen können.
Die Vorteile dieser Tools liegen auf der Hand. Gleichzeitig ist Datensparsamkeit ein erstrebenswertes Ziel, weil Daten in falschen Händen auch gegen einen verwendet werden kann. Aus diesem Grund entwickeln sich immer mehr Betriebssysteme und Browser in Richtung Privacy, so dass man entweder ganz vor Tracking geschützt wird oder nur noch dann getrackt wird, wenn man selbst zustimmt (was in diesem Fall wohl nur noch 10% der Nutzer*innen tun):

Der Brave Browser
Apples App Tracking Transparency und die Intelligent Tracking Prevention in Safari, oder
Firefox‘ Enhanced Tracking Protection

Gleichzeitig entwickelt sich ein Markt für alternative, DSGVO-konformere Tools, wahlweise zum Selberhosten oder in der Cloud:

Matomo
Plausible.io
Piwik Pro
Sentry

Insgesamt 60 Tools listet dieses Blogpost auf.
Wie erwähnen außerdem die Möglichkeiten, ganz ohne eigenes Tracking interessante Erkenntnisse aus der Google Search Console oder dem Chrome User Experience Report (CrUX) zu gewinnen.

Revision 504: Analytics- & Tracking-Tools

<p>Vanessa und Peter tauschen sich in dieser Revision überraschend ausgiebig zu diversen CSS-, HTML- und Accessibility-Problemchen/Features aus.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://heise.de/s/P4zZ?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 300px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/11/webdev.jpg" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von der <a href="https://heise.de/s/P4zZ?ref=workingdraft.de">c&#8217;t &lt;webdev&gt;</a>. Die c&#8217;t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet &#8211; Corona-bedingt online. Am 23. und 30. November sowie am 7. Dezember behandelt sie drei Themen, die für jeden Frontend-Entwickler zentral sein sollten: Barrierrefreiheit, Performace und Testing.</p>
<p>Das Programm und alle Informationen findet Ihr auf der Homepage unter <a href="https://heise.de/s/P4zZ?ref=workingdraft.de">ctwebdev.de</a>, für weitere Fragen könnt Ihr Jo Bager unter <a href="mailto:jo@ct.de">jo@ct.de</a> kontaktieren.</p>
<p>Mit dem Code WORKINGDRAFT gibt es 20% Rabatt auf das Kombiticket (alle drei Tage).</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] Kleinkram</dt>
<dd>Vanessa hat festgestellt, dass <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#viewport-percentage_lengths">Viewport-relative Einheiten</a> und vor allem <code>vh</code> nur bedingt existieren&nbsp;&ndash; zumindest in mobilen Browsern. Browser-Heuristiken und bestimmte Verhaltensweisen von (mobilen) Browsern treiben uns in Sachen horizontalem Scrolling, <a href="https://github.com/KittyGiraudel/a11y-dialog">Accessible Dialog-Design</a> und <code>:focus-visible</code> um. Wir quatschen kurz über Safari-Bugs und Selektor-Hacking, agitieren für die Verwendung von <code>input[type=email]</code> sowie die Nicht-Verwendung von <code>autofocus</code>. Über Peters Geheimtipp <a href="https://github.com/posthtml/posthtml">PostHTML</a> (wie <a href="https://postcss.org/">PostCSS</a>, nur für HTML) kommen wir zur Frontend-Gretchenfrage, zur <a href="https://postcss.org/">Digital Ocean App Platform</a>, Mobilfunktarifen und G&#8217;schichten aus&#8217;m Zug. Themenrelevant geht es weiter mit unserer (erfolglosen) Suche nach Use Cases für <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content">fit-content</a> und <code>inline-flex</code> (zu finden in <a href="https://tailwindui.com/">Tailwind UI</a>), CSS Debugging, noch mehr Scrolling/Overflow-Problemen <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=596223&#038;q=596223&#038;can=2">Emoji-Bugs in Chrome</a>, <a href="https://caninclude.glitch.me/">Can I Include</a>, <a href="https://inclusive-components.design/cards/">Inclusive Card Components</a> und <a href="https://github.com/css-modules/css-modules">CSS Modules</a>.</dd>
</dl>


Vanessa und Peter tauschen sich in dieser Revision überraschend ausgiebig zu diversen CSS-, HTML- und Accessibility-Problemchen/Features aus. Unser Sponsor Diese Folge wird gesponsert von der c&#8217;t &#60;webdev&#62;. Die c&#8217;t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet &#8211; Corona-bedingt online. Am 23. und 30. November sowie am 7. Dezember [&#8230;]

Vanessa und Peter tauschen sich in dieser Revision überraschend ausgiebig zu diversen CSS-, HTML- und Accessibility-Problemchen/Features aus.

Unser Sponsor


Diese Folge wird gesponsert von der c’t <webdev>. Die c’t ist eine Kon[...]

Vanessa und Peter tauschen sich in dieser Revision überraschend ausgiebig zu diversen CSS-, HTML- und Accessibility-Problemchen/Features aus.

Unser Sponsor


Diese Folge wird gesponsert von der c’t <webdev>. Die c’t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet – Corona-bedingt online. Am 23. und 30. November sowie am 7. Dezember behandelt sie drei Themen, die für jeden Frontend-Entwickler zentral sein sollten: Barrierrefreiheit, Performace und Testing.
Das Programm und alle Informationen findet Ihr auf der Homepage unter ctwebdev.de, für weitere Fragen könnt Ihr Jo Bager unter jo@ct.de kontaktieren.
Mit dem Code WORKINGDRAFT gibt es 20% Rabatt auf das Kombiticket (alle drei Tage).


Schaunotizen

[00:00:00] Kleinkram
Vanessa hat festgestellt, dass Viewport-relative Einheiten und vor allem vh nur bedingt existieren – zumindest in mobilen Browsern. Browser-Heuristiken und bestimmte Verhaltensweisen von (mobilen) Browsern treiben uns in Sachen horizontalem Scrolling, Accessible Dialog-Design und :focus-visible um. Wir quatschen kurz über Safari-Bugs und Selektor-Hacking, agitieren für die Verwendung von input[type=email] sowie die Nicht-Verwendung von autofocus. Über Peters Geheimtipp PostHTML (wie PostCSS, nur für HTML) kommen wir zur Frontend-Gretchenfrage, zur Digital Ocean App Platform, Mobilfunktarifen und G’schichten aus’m Zug. Themenrelevant geht es weiter mit unserer (erfolglosen) Suche nach Use Cases für fit-content und inline-flex (zu finden in Tailwind UI), CSS Debugging, noch mehr Scrolling/Overflow-Problemen Emoji-Bugs in Chrome, Can I Include, Inclusive Card Components und CSS Modules.

Revision 503: CSS-, HTML-, und Accessibility-Kleinkram

<p>Hans, Schepp und Peter ließen mehrfach das so genannte <a href="https://workingdraft.de/gluecksrad">Workingdraft-Glücksrad</a> rotieren, erhielten jedoch bei fast jeder Umdrehung einen kapitalen Wissens-Zonk.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://lotum.com/de/jobs/dev?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/11/workindraft.de_4.jpg" alt="" /></a></p>
<div class="message_content">Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung zu erschaffen, die jeden Tag Millionen Freund:innen und Familien gemeinsam spielen. Die Spiele wie 4 Bilder 1 Wort und Quiz Planet wurden schon in 27 Sprachen von über 800 Millionen Nutzer:innen weltweit installiert. Unsere Entwicklungsteams (aktuell 13 Entwickler:innen, 2 BI Developer, 6 Product Designer:innen und 3 Game Leads/POs) arbeiten dabei stark autonom und legen Wert auf eleganten und einfach wartbaren Code. <a href="https://lotum.com/de/jobs/dev?ref=workingdraft.de">Erfahre hier mehr darüber</a>, wie es ist, bei uns zu arbeiten.</div>
</aside>
<h3>[00:01:48] Glücksrad</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types_API">Trusted Types API</a>/<a href="https://developer.mozilla.org/en-US/docs/Web/API/TrustedTypePolicyFactory/isScript">isScript</a></dt>
<dd>Eine Anti-XSS-API, die in den Revisionen <a href="https://workingdraft.de/447/">447</a> und <a href="https://workingdraft.de/486/">486</a> (mit Gast <a href="https://frederik-braun.com/">Frederik Braun</a>/<a href="https://twitter.com/freddyb">@freddyb</a>) schon mal Thema war.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Content_Index_API">Content Index API</a></dt>
<dd>Eine PWA-API für die Definition von Offline-Metadaten. <a href="https://web.dev/content-indexing-api/">Funktioniert sogar schon in Chrome auf Android!</a></dd>
<dt>WebRTC/<a href="https://developer.mozilla.org/en-US/docs/Web/API/RTCRtpSender">RTCRtpSender</a></dt>
<dd>Mit WebRTC haben wir allesamt keine Erfahrung, Peter kann dafür über Frust mit der verwandten <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder">MediaRecorder-API</a> berichten. Statt Browser-Inkompatibilitäten mit Dingen wie <a href="https://github.com/webrtcHacks/adapter">adapter</a> auszugleichen würden wir vermutlich, ganz wie <a href="https://www.joinclubhouse.com/">Clubhouse</a>, WebRTC als SAAS einkaufen.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid">:invalid-Pseudoklasse</a></dt>
<dd>Der unserer Einschätzung nach mäßig nützliche Indikator für Formularfeld-Gültigkeit wird in Selectors Level&amp;nbp;4 durch <a href="https://www.w3.org/TR/selectors-4/#user-pseudos"><code>:user-invalid</code></a> ergänzt..</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior-x">overscroll-behavior-x</a></dt>
<dd>Einmal unbekannte, aber <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior">nützliche CSS-Features</a> für 500 bitte!.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem">menuitem</a>-Element</dt>
<dd>Ein extrem totes, <a href="https://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">Firefox-only</a>-HTML-Element lässt uns über Contextmenüs und dazugehörige <a href="https://github.com/swisnl/jQuery-contextMenu">jQuery-Plugins</a> nachdenken.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Keyboard_API">Keyboard API</a></dt>
<dd>Wir suchen mit mäßigem Erfolg nach Use Cases für die Keyboard API.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Cache">Cache API</a></dt>
<dd>Stellt sich raus: Der Cache kann immer noch nur GET-Requests speichern und funktioniert auch außerhalb vom Service Worker!</dd>
</dl>


Hans, Schepp und Peter ließen mehrfach das so genannte Workingdraft-Glücksrad rotieren, erhielten jedoch bei fast jeder Umdrehung einen kapitalen Wissens-Zonk. Unser Sponsor Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung [&#8230;]

Hans, Schepp und Peter ließen mehrfach das so genannte Workingdraft-Glücksrad rotieren, erhielten jedoch bei fast jeder Umdrehung einen kapitalen Wissens-Zonk.

Unser Sponsor

Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Andr[...]

Hans, Schepp und Peter ließen mehrfach das so genannte Workingdraft-Glücksrad rotieren, erhielten jedoch bei fast jeder Umdrehung einen kapitalen Wissens-Zonk.

Unser Sponsor

Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung zu erschaffen, die jeden Tag Millionen Freund:innen und Familien gemeinsam spielen. Die Spiele wie 4 Bilder 1 Wort und Quiz Planet wurden schon in 27 Sprachen von über 800 Millionen Nutzer:innen weltweit installiert. Unsere Entwicklungsteams (aktuell 13 Entwickler:innen, 2 BI Developer, 6 Product Designer:innen und 3 Game Leads/POs) arbeiten dabei stark autonom und legen Wert auf eleganten und einfach wartbaren Code. Erfahre hier mehr darüber, wie es ist, bei uns zu arbeiten.

[00:01:48] Glücksrad

Trusted Types API/isScript
Eine Anti-XSS-API, die in den Revisionen 447 und 486 (mit Gast Frederik Braun/@freddyb) schon mal Thema war.
Content Index API
Eine PWA-API für die Definition von Offline-Metadaten. Funktioniert sogar schon in Chrome auf Android!
WebRTC/RTCRtpSender
Mit WebRTC haben wir allesamt keine Erfahrung, Peter kann dafür über Frust mit der verwandten MediaRecorder-API berichten. Statt Browser-Inkompatibilitäten mit Dingen wie adapter auszugleichen würden wir vermutlich, ganz wie Clubhouse, WebRTC als SAAS einkaufen.
:invalid-Pseudoklasse
Der unserer Einschätzung nach mäßig nützliche Indikator für Formularfeld-Gültigkeit wird in Selectors Level&nbp;4 durch :user-invalid ergänzt..
overscroll-behavior-x
Einmal unbekannte, aber nützliche CSS-Features für 500 bitte!.
menuitem-Element
Ein extrem totes, Firefox-only-HTML-Element lässt uns über Contextmenüs und dazugehörige jQuery-Plugins nachdenken.
Keyboard API
Wir suchen mit mäßigem Erfolg nach Use Cases für die Keyboard API.
Cache API
Stellt sich raus: Der Cache kann immer noch nur GET-Requests speichern und funktioniert auch außerhalb vom Service Worker!

Revision 502: Unglücksrad

<p>Im Rahmen der etablierten Traditionen nehmen Stefan und Peter das Release einer neuen TypeScript-Version zum Anlass, um über alles außer über TypeScript zu sprechen.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://heise.de/s/P4zZ?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 350px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/11/logo.png" alt="" /></a></p>
<div class="message_content">
<p>Diese Folge wird gesponsert von der <a href="https://heise.de/s/P4zZ?ref=workingdraft.de">c&#8217;t &lt;webdev&gt;</a>. Die c&#8217;t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet &#8211; Corona-bedingt online. Am 23. und 30. November sowie am 7. Dezember behandelt sie drei Themen, die für jeden Frontend-Entwickler zentral sein sollten: Barrierrefreiheit, Performace und Testing.</p>
<p>Das Programm und alle Informationen findet Ihr auf der Homepage unter <a href="https://heise.de/s/P4zZ?ref=workingdraft.de">ctwebdev.de</a>, für weitere Fragen könnt Ihr Jo Bager unter <a href="mailto:jo@ct.de">jo@ct.de</a> kontaktieren.</p>
<p>Mit dem Code WORKINGDRAFT gibt es 20% Rabatt auf das Kombiticket (alle drei Tage).</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:48] <a href="https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html">TypeScript 4.4</a></dt>
<dd>Am Rande sprechen wir über die Features von TS 4.4, doch eigentlich geht es eher um CSS Grid, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof">den typeof-Operator</a>, <a href="https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html">Template Literal Types</a>, <a href="https://github.com/codemix/ts-sql">TS-SQL</a>, das <a href="https://www.npmjs.com/package/commander">commander</a>-Package, <a href="https://www.fastify.io/">Fastify</a> (anstelle von <a href="https://expressjs.com/">Express</a>), <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbols</a>, Nodes <a href="https://nodejs.org/api/process.html">process-Object</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag">@@toStringTag</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">ES-Proxies</a>. Auf etwas höherem Abstraktionslevel fragen wir uns, ob TypeScript demnächst mal fertig ist (Antwort: nö, es gibt in Sachen <a href="https://de.wikipedia.org/wiki/Erbauer_(Entwurfsmuster)">Builder Pattern</a>/<a href="https://de.wikipedia.org/wiki/Fluent_Interface">Fluent Interface</a> noch theoretischen Aufholbedarf), sprechen über, Prototype-Patching, <a href="https://www.typescriptlang.org/docs/handbook/2/conditional-types.html">Conditional Types</a>, <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#excludetype-excludedunion">Exclude&lt;T&gt;</a>, Rust, Haskell, Dependent Types und Performance (mit besonderem Fokus auf Next-Generation Tools wie <a href="https://github.com/evanw/esbuild">esbuild</a>, <a href="https://nextjs.org/">Next.js</a>, <a href="https://github.com/swc-project/swc">SWC</a>, <a href="https://rome.tools/">Rome</a> und <a href="https://deno.land/">Deno</a>) … und die Brücke zu <a href="https://de.wikipedia.org/wiki/Nero_Burning_ROM">Nero Burning ROM</a> schlagen wir auch noch irgendwie. Kurz bevor Stefan aus seinem Konferenzraum geworfen wurde sprechen wie noch kurz über <a href="https://fettblog.eu/typescript-typing-catch-clauses/">Typen für Try-Catch</a>, <code>any</code>, <code>unknown</code> und <code>unsafe</code>, wundern uns über <a href="https://github.com/tc39/proposal-class-static-block#ecmascript-class-static-initialization-blocks">static blocks in classes</a>, gedenken der Gefallenen (ECMAScript 4, <a href="E4X https://de.wikipedia.org/wiki/ECMAScript_for_XML">E4X</a>, SOAP, <a href="https://github.com/tyrasd/jxon">JXON</a>) und blicken kurz auf das, was uns TypeScript 4.5 (z.Z. in der Beta-Phase) in Kürze bringen wird.</dd>
</dl>


Im Rahmen der etablierten Traditionen nehmen Stefan und Peter das Release einer neuen TypeScript-Version zum Anlass, um über alles außer über TypeScript zu sprechen. Unser Sponsor Diese Folge wird gesponsert von der c&#8217;t &#60;webdev&#62;. Die c&#8217;t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet &#8211; Corona-bedingt online. Am 23. [&#8230;]

Im Rahmen der etablierten Traditionen nehmen Stefan und Peter das Release einer neuen TypeScript-Version zum Anlass, um über alles außer über TypeScript zu sprechen.

Unser Sponsor


Diese Folge wird gesponsert von der c’t <webdev>. Di[...]

Im Rahmen der etablierten Traditionen nehmen Stefan und Peter das Release einer neuen TypeScript-Version zum Anlass, um über alles außer über TypeScript zu sprechen.

Unser Sponsor


Diese Folge wird gesponsert von der c’t <webdev>. Die c’t ist eine Konferenz für Frontend-Entwickler, die in diesem Winter bereits zum vierten Mal stattfindet – Corona-bedingt online. Am 23. und 30. November sowie am 7. Dezember behandelt sie drei Themen, die für jeden Frontend-Entwickler zentral sein sollten: Barrierrefreiheit, Performace und Testing.
Das Programm und alle Informationen findet Ihr auf der Homepage unter ctwebdev.de, für weitere Fragen könnt Ihr Jo Bager unter jo@ct.de kontaktieren.
Mit dem Code WORKINGDRAFT gibt es 20% Rabatt auf das Kombiticket (alle drei Tage).


Schaunotizen

[00:01:48] TypeScript 4.4
Am Rande sprechen wir über die Features von TS 4.4, doch eigentlich geht es eher um CSS Grid, den typeof-Operator, Template Literal Types, TS-SQL, das commander-Package, Fastify (anstelle von Express), Symbols, Nodes process-Object, @@toStringTag und ES-Proxies. Auf etwas höherem Abstraktionslevel fragen wir uns, ob TypeScript demnächst mal fertig ist (Antwort: nö, es gibt in Sachen Builder Pattern/Fluent Interface noch theoretischen Aufholbedarf), sprechen über, Prototype-Patching, Conditional Types, Exclude<T>, Rust, Haskell, Dependent Types und Performance (mit besonderem Fokus auf Next-Generation Tools wie esbuild, Next.js, SWC, Rome und Deno) … und die Brücke zu Nero Burning ROM schlagen wir auch noch irgendwie. Kurz bevor Stefan aus seinem Konferenzraum geworfen wurde sprechen wie noch kurz über Typen für Try-Catch, any, unknown und unsafe, wundern uns über static blocks in classes, gedenken der Gefallenen (ECMAScript 4, E4X, SOAP, JXON) und blicken kurz auf das, was uns TypeScript 4.5 (z.Z. in der Beta-Phase) in Kürze bringen wird.

Revision 501: ein bisschen TypeScript 4.4 und ganz viel Anderes

<p>Zu Folge 500 haben Schepp, Vanessa, Hans, Peter und Stefan Hörer:innen-Fragen eingesammelt und beantwortet!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>AMA</dt>
<dd>Gefragt nach unseren Lieblings-Folgen von Working Draft finden die Revisionen <a href="https://workingdraft.de/100/">100</a> (mit Paul Irish), <a href="https://workingdraft.de/446/">446</a> (zu PHP) und <a href="https://workingdraft.de/468/">468</a> (CSS in JS Super Throwdown Challenge) Erwähnung, ebenso die Live-Events zum <a href="https://vimeo.com/34328344">SmashingMagazine Meetup #3</a> und <a href="https://www.youtube.com/watch?v=aFEiw0SEMyw">von der beyond tellerrand</a>. In Unkenntnis darüber, wie wenig Zeit wir haben werden, nehmen wie die Frage „Tabs oder Spaces“ <a href="https://twitter.com/ddprrt/status/1212843901507252225">halbwegs ernst</a> und schlagen den Bogen von <a href="https://html5boilerplate.com/">HTML5Boilerplate</a> und <a href="https://coffeescript.org/">CoffeeScript</a> hin zur <a href="https://de.wikipedia.org/wiki/Eclipse_%E2%80%93_Biss_zum_Abendrot">Twilight-Filmserie</a> (hört&#8217;s euch an, es ergibt alles Sinn). Danach geht es um <a href="https://www.tagesschau.de/inland/btw21/afd-flyer-101.html">Nazis</a>, <a href="http://webkrauts.de/">andere Krauts</a> (aber gute Krauts) Probleme mit Google Maps Quereinsteiger, Schepps jugendliches Aussehen, Peters Gamer-Vergangenheit, Hans&#8216; Top 3 NoFX-Picks, Schepps Lieblings-IE-Bugs (doppelter Margin bei <code>float:left</code>) und IE-only-Features (in der Verlosung: <a href="https://schepp.dev/posts/today-the-trident-era-ends/">Exclusions, HTC-Files, Expressions</a>), die Verbannung des Box-Modells aus dem Standard (ebenfalls auf der Abschussliste: <a href="https://html.spec.whatwg.org/#the-autofocus-attribute"><code>autofocus</code></a> und <a href="https://www.w3.org/TR/CSS21/aural.html">Voice-Styling in CSS</a>), das schnelle Verinnerlichen von Webtech-Specs/Techs (<a href="https://twitter.com/brad_frost/status/1451522745825640448">gibt&#8217;s nicht</a>) Front-End Architektur mit <a href="https://svelte.dev/">Svelte</a>/<a href="https://kit.svelte.dev/">SvelteKit</a> (das <a href="https://workingdraft.de/gluecksrad/">Workingdraft-Glücksrad</a> ist in Svelte geschrieben!) <a href="https://twitter.com/css__cafe">CSS Cafe</a> und andere Schepp-Meetups, Webtech-Buch-Schreiberei (siehe auch <a href="https://workingdraft.de/453/">Revision 453</a>), Sport, Lego, Telefonate, Kinder, Teilzeit, Engineering Management, Rust, Go, C++, <a href="https://www.assemblyscript.org/">AssemblyScript</a>, <a href="https://turbinecss.github.io/docs-11.php.html">Turbine</a>, die Composition API von Vue, Schepps <a href="https://www.imdb.com/name/nm1561345/">IMDB-Eintrag</a> und <a href="https://www.youtube.com/watch?v=JpWiax52UGQ">Vergangenheit als 3D-Animator</a>, unsere goldige Audio-Producerin und Präsenz-Podcasting. Im Laufe der Zeit mussten mehr und mehr von uns zu Meetings mit Kindern und/oder Kollegen abreisen, sodass am Ende nur Schepp und Peter verblieben, um etwas über die Zukunft von Working Draft zu philosophieren.</dd>
</dl>


Zu Folge 500 haben Schepp, Vanessa, Hans, Peter und Stefan Hörer:innen-Fragen eingesammelt und beantwortet! Schaunotizen AMA Gefragt nach unseren Lieblings-Folgen von Working Draft finden die Revisionen 100 (mit Paul Irish), 446 (zu PHP) und 468 (CSS in JS Super Throwdown Challenge) Erwähnung, ebenso die Live-Events zum SmashingMagazine Meetup #3 und von der beyond tellerrand. In [&#8230;]

Zu Folge 500 haben Schepp, Vanessa, Hans, Peter und Stefan Hörer:innen-Fragen eingesammelt und beantwortet!
Schaunotizen

AMA
Gefragt nach unseren Lieblings-Folgen von Working Draft finden die Revisionen 100 (mit Paul Irish), 446 (zu PHP) und 468 (C[...]

Zu Folge 500 haben Schepp, Vanessa, Hans, Peter und Stefan Hörer:innen-Fragen eingesammelt und beantwortet!
Schaunotizen

AMA
Gefragt nach unseren Lieblings-Folgen von Working Draft finden die Revisionen 100 (mit Paul Irish), 446 (zu PHP) und 468 (CSS in JS Super Throwdown Challenge) Erwähnung, ebenso die Live-Events zum SmashingMagazine Meetup #3 und von der beyond tellerrand. In Unkenntnis darüber, wie wenig Zeit wir haben werden, nehmen wie die Frage „Tabs oder Spaces“ halbwegs ernst und schlagen den Bogen von HTML5Boilerplate und CoffeeScript hin zur Twilight-Filmserie (hört’s euch an, es ergibt alles Sinn). Danach geht es um Nazis, andere Krauts (aber gute Krauts) Probleme mit Google Maps Quereinsteiger, Schepps jugendliches Aussehen, Peters Gamer-Vergangenheit, Hans‘ Top 3 NoFX-Picks, Schepps Lieblings-IE-Bugs (doppelter Margin bei float:left) und IE-only-Features (in der Verlosung: Exclusions, HTC-Files, Expressions), die Verbannung des Box-Modells aus dem Standard (ebenfalls auf der Abschussliste: autofocus und Voice-Styling in CSS), das schnelle Verinnerlichen von Webtech-Specs/Techs (gibt’s nicht) Front-End Architektur mit Svelte/SvelteKit (das Workingdraft-Glücksrad ist in Svelte geschrieben!) CSS Cafe und andere Schepp-Meetups, Webtech-Buch-Schreiberei (siehe auch Revision 453), Sport, Lego, Telefonate, Kinder, Teilzeit, Engineering Management, Rust, Go, C++, AssemblyScript, Turbine, die Composition API von Vue, Schepps IMDB-Eintrag und Vergangenheit als 3D-Animator, unsere goldige Audio-Producerin und Präsenz-Podcasting. Im Laufe der Zeit mussten mehr und mehr von uns zu Meetings mit Kindern und/oder Kollegen abreisen, sodass am Ende nur Schepp und Peter verblieben, um etwas über die Zukunft von Working Draft zu philosophieren.

Revision 500: AMA!

<p>Hans, Stefan und Vanessa hatten nach langer Zeit wieder das Vergnügen mit Backend-Entwickler <a href="https://christoph-rumpel.com/">Christoph Rumpel</a> (<a href="https://twitter.com/christophrumpel?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor">@christophrumpel</a>), Autor von <a href="https://laravelcoreadventures.com/">Laravel Core Adventures</a> und <a href="https://masteringphpstorm.com/">Mastering PhpStorm,</a> ein <a href="https://larastreamers.com/">Larastreamer</a> und Host des Podcasts <a href="https://callitaday.transistor.fm/">Call it a day</a>, sprechen zu dürfen, diesmal über <a href="https://laravel-livewire.com/">Laravel Livewire</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] Laravel Livewire</dt>
<dd>Laravel Livewire ist ein PHP/Laravel Package von <a href="https://twitter.com/calebporzio">Caleb Poruio</a>, der ebenfalls der Autor von <a href="https://alpinejs.dev/">Alpine.js</a> ist. Dieses Package eignet sich v.a. für Fullstack oder stark backend-lastige Developer Teams. Es ermöglichst dynamische Interface Funktionen, ohne tatsächliches JavaScript geschrieben werden muss. Die Grunfunktion basiert auf server-side gerendertem HTML Partials, ähnlich wir <a href="https://github.com/defunkt/jquery-pjax">PJAX</a> von <a href="https://jquery.com/">jQuery</a>. Doch alle Frontend Entwickler:innen wissen: Heutzutage bleibt es selten bei &#8222;einfach nur JavaScript&#8220;. Bei einem Framework wie Laravel Livewire fällt auch der Aufbau und die Wartung von Bundlern und ähnlichem Tooling weg. Die Idee kommt vom Framework <a href="https://www.phoenixframework.org/">Phoenix</a> von <a href="https://elixir-lang.org/">Elixir</a>. Ein ähnliches Framework für C#, um client-side Webapplikationen zu bauen, ist <a href="https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor">Blazor</a>. Vergleichbar in der Welt von <a href="https://rubyonrails.org/">Ruby on Rails</a> ist <a href="https://hotwired.dev/">Hotwire</a>. Als Beispiel nimmt Christoph uns mit in eine server-side geladene Applikation mit den üblichen Page Reloads. Nun landet man auf einer Seite mit einer Tabelle, für die es sich anbieten würde, wenn man diese Daten nun auch sortieren oder filtern könnte &#8211; und statt einem Page Reload lieber einen kurzen Loading Spinner anzeigen möchte. Darüberhinaus eignet es sich für Echtzeit-Validierung, Auto-Saving, Suchen, Auto-completes, dynamischen Dropdowns, Datei Uploads und vielem mehr. Auch das Schreiben von Tests mit mit Livewire kein Problem. Es hat sogar noch den Vorteil, dass dadurch, dass die Logik nicht in ein JavaScript Framework ausgelagert wurde, es keine zusätzlichen Integrations- oder Ende-zu-Ende-Test zwischen Frontend und Backend benötigt. Christoph bringt uns zwei Beispiele mit (siehe Links). Abschließend gibt es noch zu beachten, dass Entwickler:innen auf die Performance achten müssen, da ja jede Aktion einen Request erzeugen wird. Anm. der Redaktion: Performance ist aber auch mit einer Single-Page Applikation o.ä. auch nicht einfach, v.a. wenn erst einmal ein 4k Video geladen wird. Darüberhinaus gilt es auch den Überblick über sensitive Daten zu behalten, da durch Livewire eine offene Schnittstelle zum Client entsteht.</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://github.com/christophrumpel/larastreamers/blob/main/tests/Feature/Http/Livewire/ImportYoutubeChannelTest.php#L61-L72">ChannelTest1</a> + <a href="https://github.com/christophrumpel/larastreamers/blob/main/tests/Feature/Http/Livewire/ImportYoutubeChannelTest.php#L21-L42">ChannelTest2</a></dt>
<dd>Zwei Livewire Tests von Christoph Rumpel.</dd>
<dt><a href="https://calebporzio.com/how-livewire-works-a-deep-dive">Livewire Deep Dive</a></dt>
<dd>How Livewire works (a deep dive) von Autor Caleb Porzio</dd>
<dt><a href="https://inertiajs.com/">Inertia.js</a></dt>
<dd>Das Pendant zu Livewire &#8211; eine server-side Webapplikation</dd>
<dt><a href="https://github.com/christophrumpel/larastreamers">Larastreamers GitHub Repository</a></dt>
<dd>Die Codebase von Larastreamers</dd>
<dt><a href="https://tallstack.dev/">TALL Stack</a></dt>
<dd>Tailwind, Alpine.js, Laravel und Livewire</dd>
<dt><a href="https://github.com/mattwaler/tea-stack">TEA Stack</a></dt>
<dd>Tailwind, Eleventy und Alpine.js</dd>
</dl>
<h3>Verwandte Revisionen</h3>
<dl>
<dt><a href="https://workingdraft.de/490/">Revision 490</a></dt>
<dd>Verwandte Revision über Alpine.js and Petite Vue.</dd>
<dt>
<dt><a href="https://workingdraft.de/147/">Revision 127</a></dt>
<dd>Historische Revision über das INIT Boilerplatz und das Laravel PHP-Framework mit Christoph Rumpel aus 2013.</dd>
<dt><a href="https://workingdraft.de/283/">Revision 283</a></dt>
<dd>Vue.js und Chatbots mit Christoph Rumpel aus 2016.</dd>
</dt>
</dl>


Hans, Stefan und Vanessa hatten nach langer Zeit wieder das Vergnügen mit Backend-Entwickler Christoph Rumpel (@christophrumpel), Autor von Laravel Core Adventures und Mastering PhpStorm, ein Larastreamer und Host des Podcasts Call it a day, sprechen zu dürfen, diesmal über Laravel Livewire. Schaunotizen [00:00:59] Laravel Livewire Laravel Livewire ist ein PHP/Laravel Package von Caleb Poruio, der ebenfalls [&#8230;]

Hans, Stefan und Vanessa hatten nach langer Zeit wieder das Vergnügen mit Backend-Entwickler Christoph Rumpel (@christophrumpel), Autor von Laravel Core Adventures und Mastering PhpStorm, ein Larastreamer und Host des Podcasts Call it a day, spreche[...]

Hans, Stefan und Vanessa hatten nach langer Zeit wieder das Vergnügen mit Backend-Entwickler Christoph Rumpel (@christophrumpel), Autor von Laravel Core Adventures und Mastering PhpStorm, ein Larastreamer und Host des Podcasts Call it a day, sprechen zu dürfen, diesmal über Laravel Livewire.
Schaunotizen

[00:00:59] Laravel Livewire
Laravel Livewire ist ein PHP/Laravel Package von Caleb Poruio, der ebenfalls der Autor von Alpine.js ist. Dieses Package eignet sich v.a. für Fullstack oder stark backend-lastige Developer Teams. Es ermöglichst dynamische Interface Funktionen, ohne tatsächliches JavaScript geschrieben werden muss. Die Grunfunktion basiert auf server-side gerendertem HTML Partials, ähnlich wir PJAX von jQuery. Doch alle Frontend Entwickler:innen wissen: Heutzutage bleibt es selten bei „einfach nur JavaScript“. Bei einem Framework wie Laravel Livewire fällt auch der Aufbau und die Wartung von Bundlern und ähnlichem Tooling weg. Die Idee kommt vom Framework Phoenix von Elixir. Ein ähnliches Framework für C#, um client-side Webapplikationen zu bauen, ist Blazor. Vergleichbar in der Welt von Ruby on Rails ist Hotwire. Als Beispiel nimmt Christoph uns mit in eine server-side geladene Applikation mit den üblichen Page Reloads. Nun landet man auf einer Seite mit einer Tabelle, für die es sich anbieten würde, wenn man diese Daten nun auch sortieren oder filtern könnte – und statt einem Page Reload lieber einen kurzen Loading Spinner anzeigen möchte. Darüberhinaus eignet es sich für Echtzeit-Validierung, Auto-Saving, Suchen, Auto-completes, dynamischen Dropdowns, Datei Uploads und vielem mehr. Auch das Schreiben von Tests mit mit Livewire kein Problem. Es hat sogar noch den Vorteil, dass dadurch, dass die Logik nicht in ein JavaScript Framework ausgelagert wurde, es keine zusätzlichen Integrations- oder Ende-zu-Ende-Test zwischen Frontend und Backend benötigt. Christoph bringt uns zwei Beispiele mit (siehe Links). Abschließend gibt es noch zu beachten, dass Entwickler:innen auf die Performance achten müssen, da ja jede Aktion einen Request erzeugen wird. Anm. der Redaktion: Performance ist aber auch mit einer Single-Page Applikation o.ä. auch nicht einfach, v.a. wenn erst einmal ein 4k Video geladen wird. Darüberhinaus gilt es auch den Überblick über sensitive Daten zu behalten, da durch Livewire eine offene Schnittstelle zum Client entsteht.

Links

ChannelTest1 + ChannelTest2
Zwei Livewire Tests von Christoph Rumpel.
Livewire Deep Dive
How Livewire works (a deep dive) von Autor Caleb Porzio
Inertia.js
Das Pendant zu Livewire – eine server-side Webapplikation
Larastreamers GitHub Repository
Die Codebase von Larastreamers
TALL Stack
Tailwind, Alpine.js, Laravel und Livewire
TEA Stack
Tailwind, Eleventy und Alpine.js

Verwandte Revisionen

Revision 490
Verwandte Revision über Alpine.js and Petite Vue.

Revision 127
Historische Revision über das INIT Boilerplatz und das Laravel PHP-Framework mit Christoph Rumpel aus 2013.
Revision 283
Vue.js und Chatbots mit Christoph Rumpel aus 2016.

Revision 499: Laravel Livewire

<p>Vanessa, Hans und Schepp verwandeln in dieser Revision die Vorbesprechung in die eigentlich Sendung, in der es ausnahmsweise Mal nicht nur um knallharte Fakten und technische Themen geht.</p>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://lotum.com/de/jobs/dev?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2021/10/workindraft.de_3-1.jpg" alt="" /></a></p>
<div class="message_content">Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung zu erschaffen, die jeden Tag Millionen Freund:innen und Familien gemeinsam spielen. Die Spiele wie 4 Bilder 1 Wort und Quiz Planet wurden schon in 27 Sprachen von über 800 Millionen Nutzer:innen weltweit installiert. Unsere Entwicklungsteams (aktuell 13 Entwickler:innen, 2 BI Developer, 6 Product Designer:innen und 3 Game Leads/POs) arbeiten dabei stark autonom und legen Wert auf eleganten und einfach wartbaren Code. <a href="https://lotum.com/de/jobs/dev?ref=workingdraft.de">Erfahre hier mehr darüber</a>, wie es ist, bei uns zu arbeiten.</div>
</aside>
<h3>[00:01:45] Schaunotizen</h3>
<dl>
<dt><a href="https://www.xanthir.com/blog/b4E50">CSS Spec Terms</a></dt>
<dd>Tab Atkins-Bittners Glossar der CSS-Termini.</dd>
<dt><a href="https://windicss.org/">Windi CSS</a></dt>
<dd>Ein zu Tailwind CSS kompatibles Framework, das aber bestimmte Dinge besser meint zu lösen.</dd>
<dt><a href="https://medium.com/fabric-ventures/what-is-web-3-0-why-it-matters-934eb07f3d2b">What Is Web 3.0 &amp; Why It Matters</a></dt>
<dd>Ja was ist denn eigentlich dieses Web 3.0? Und war das nicht eigentlich schon HTML5? Und wie passt das zu Industrie 4.0?</dd>
<dt><a href="https://de.wikipedia.org/wiki/Free_Guy">Free Guy</a></dt>
<dd>Filmempfehlung: eine US-amerikanische Science-Fiction-Action-Komödie mit Ryan Reynolds in der Hauptrolle.</dd>
<dt><a href="https://css-for-js.dev/">CSS for JavaScript Developers</a></dt>
<dd>Ein Lernkurs, der mit einer gänzlich anderen Perspektive an CSS herangeht. Darüberhinaus empfehlen wir <a href="https://wesbos.com/courses">die Kurse von Wes Bos</a>.</dd>
<dt>Podcastempfehlungen</dt>
<dd>
<ul>
<li><a href="https://syntax.fm/">Syntax.fm</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLeXlULyOtEnfkxd4yLoPT7ckxxPmNncN0">Software Architektur im Stream</a></li>
<li><a href="https://techleadjournal.dev/">Techlead.Journal()</a></li>
<li><a href="https://http203.libsyn.com/">HTTP/203</a></li>
<li><a href="https://www.programmier.bar/podcast">Programmierbar</a></li>
<li><a href="https://wowirsindistvorne.show/">Wo wir sind ist vorne</a></li>
<li><a href="https://devchat.tv/show/javascript-jabber/">JavaScript Jabber</a></li>
<li><a href="https://changelog.com/jsparty">JS Party</a></li>
<li><a href="https://alphalist.com/podcast">alphalist CTO Podcast</a></li>
<li><a href="https://www.vox.com/land-of-the-giants-podcast">Land of the Giants Podcast</a></li>
</ul>
</dd>
</dl>


Vanessa, Hans und Schepp verwandeln in dieser Revision die Vorbesprechung in die eigentlich Sendung, in der es ausnahmsweise Mal nicht nur um knallharte Fakten und technische Themen geht. Unser Sponsor Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist [&#8230;]

Vanessa, Hans und Schepp verwandeln in dieser Revision die Vorbesprechung in die eigentlich Sendung, in der es ausnahmsweise Mal nicht nur um knallharte Fakten und technische Themen geht.

Unser Sponsor

Bei Lotum konzipieren, entwickeln und betreib[...]

Vanessa, Hans und Schepp verwandeln in dieser Revision die Vorbesprechung in die eigentlich Sendung, in der es ausnahmsweise Mal nicht nur um knallharte Fakten und technische Themen geht.

Unser Sponsor

Bei Lotum konzipieren, entwickeln und betreiben wir Mobile Games für Android und iOS sowie innovative Plattformen wie Facebook Instant Games und Snapchat. Unser Ziel ist es, in kleinen Teams Produkte von großer Bedeutung zu erschaffen, die jeden Tag Millionen Freund:innen und Familien gemeinsam spielen. Die Spiele wie 4 Bilder 1 Wort und Quiz Planet wurden schon in 27 Sprachen von über 800 Millionen Nutzer:innen weltweit installiert. Unsere Entwicklungsteams (aktuell 13 Entwickler:innen, 2 BI Developer, 6 Product Designer:innen und 3 Game Leads/POs) arbeiten dabei stark autonom und legen Wert auf eleganten und einfach wartbaren Code. Erfahre hier mehr darüber, wie es ist, bei uns zu arbeiten.

[00:01:45] Schaunotizen

CSS Spec Terms
Tab Atkins-Bittners Glossar der CSS-Termini.
Windi CSS
Ein zu Tailwind CSS kompatibles Framework, das aber bestimmte Dinge besser meint zu lösen.
What Is Web 3.0 & Why It Matters
Ja was ist denn eigentlich dieses Web 3.0? Und war das nicht eigentlich schon HTML5? Und wie passt das zu Industrie 4.0?
Free Guy
Filmempfehlung: eine US-amerikanische Science-Fiction-Action-Komödie mit Ryan Reynolds in der Hauptrolle.
CSS for JavaScript Developers
Ein Lernkurs, der mit einer gänzlich anderen Perspektive an CSS herangeht. Darüberhinaus empfehlen wir die Kurse von Wes Bos.
Podcastempfehlungen


Syntax.fm
Software Architektur im Stream
Techlead.Journal()
HTTP/203
Programmierbar
Wo wir sind ist vorne
JavaScript Jabber
JS Party
alphalist CTO Podcast
Land of the Giants Podcast

Revision 498: CSS 2, Web 3.0 und Podcastempfehlungen

<p>Nach zehn Wochen war es mal wieder an der Zeit, an unserem <a href="https://workingdraft.de/gluecksrad/">Webtechnologie-Glücksrad</a> zu drehen! </p>
<h3>[00:01:15] Glücksrad</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedEnumeration"><code>SVGAnimatedEnumeration</code></a></dt>
<dd>Ähm&#8230; hä?<br />
<a href="https://workingdraft.de/wp-content/uploads/2021/10/wtf1.gif"><img src="https://workingdraft.de/wp-content/uploads/2021/10/wtf1.gif" alt="Animated GIF, auf dem ein Typ mit Vokuhila-Frisur mit seinen Lippen die Buchstaben W, T und F formt." width="498" height="370" class="alignleft size-full wp-image-5471" style="max-width: calc(100vw - 104px); height: auto" /></a><br />
Keine Ahnung, wozu das gut ist. Schnell weiter!</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:root">Die <code>:root</code>-Pseudoklasse</a></dt>
<dd>Stefan nutzt sie gerne, um an sie seine CSS Custom Properties zu hängen, aber sonst fristet die Pseudoklasse in unserem Alltag ein eher tristes Dasein.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image">Der <code>&lt;image&gt;</code>-Datentyp</a></dt>
<dd>In den <code>&lt;image&gt;</code>-Datentyp lassen sich allerlei Dinge stecken:</p>
<ul>
<li>Bilder per <code>url()</code>-Funktion (natürlich)</li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/gradient">Gradienten</a> aller Art, also lineare, radiale und konische Gradienten, sowie deren <code>repeating</code>-Pendants.</li>
<li>ein responsives <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set()"><code>image-set()</code></a></li>
<li>die endgeile, aber nirgendwo supportete <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image/image()"><code>image()</code></a>-Funktion</li>
<li>das nur in WebKit und Chromium unterstützte <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cross-fade()"><code>cross-fade()</code></a></li>
<li>sowie das mächtige, aber nur in Firefox implementierte <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/element()"><code>element()</code></a></li>
</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar"><code>::-webkit-scrollbar</code></a> und Konsorten</dt>
<dd>Wir reden über <a href="http://www.spectrum-research.com/V2/projects_scrollbar_generator.asp">Scrollbar-Styling im alten IE</a> und wie man darauf heutzutage in den verschiedenen Browsern einwirkt, nämlich neben der <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar"><code>::-webkit-scrollbar</code></a>-Familie für WebKit und Chromium, mit dem per W3C abgesegnetem <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width">scrollbar-width</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color">scrollbar-color</a> im Firefox. In neueren IEs und dem davon abgeleiteten Edge ließ sich eine hässliche Scrollbar immerhin noch via <code>-ms-overflow-style: -ms-autohiding-scrollbar;</code> verstecken.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-east-asian"><code>font-variant-east-asian</code></a></dt>
<dd>Eine CSS-Eigenschaft, um offenbar eine Art asiatischer Ligaturen zu steuern. Von asiatischer Sprache haben wir leider alle keine Ahnung, aber uns fällt dieser tolle Talk von Florian Rivoal zu dem Thema ein: <a href="https://vimeo.com/346825764">Line breaking and related properties from CSS Text</a>.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/Manifest/dir">Die <code>dir</code>-Eigenschaft der Manifest-Datei</a></dt>
<dd>Die sagt, in welche Richtung die Schrift der darin hinterlegten Textbausteine läuft. Hammer! <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f634.png" alt="😴" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f4a4.png" alt="💤" class="wp-smiley" style="height: 1em; max-height: 1em;" /></dd>
<dt>Das <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement/align"> <code>align</code>&#8211;</a>Attribut</dt>
<dd>So deprecated, dass sogar MDN sich weigert, es zu erklären. Früher haben wir es aber genutzt, um Inhalte im Netscape-Browser horizontal zu zentrieren, nachdem es dafür im IE ja das <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center"><code>&lt;center&gt;</code></a>-Element gab.</dd>
<dt>Zu guter Letzt: Programmiersprachen-Bashing Royal Rumble!</dt>
<dd>Aus irgendwelchen Gründen kommen wir vom rechten Pfad ab und driften über <a href="https://www.i-programmer.info/news/98-languages/6758-the-reason-for-the-weird-php-function-names.html">die historischen Eigenheiten von PHP</a> hin zur Programmiersprache <a href="https://de.wikipedia.org/wiki/MUMPS">MUMPS</a>. Und weil wir sowieso schonmal dabei sind, möchten wir Euch diesen Talk von einer vergangenen React Conf empfehlen: <a href="https://www.youtube.com/watch?v=vG8WpLr6y_U">Let&#8217;s Program Like It&#8217;s 1999</a> von Lee Byron</dd>
</dl>


Nach zehn Wochen war es mal wieder an der Zeit, an unserem Webtechnologie-Glücksrad zu drehen! [00:01:15] Glücksrad SVGAnimatedEnumeration Ähm&#8230; hä? Keine Ahnung, wozu das gut ist. Schnell weiter! Die :root-Pseudoklasse Stefan nutzt sie gerne, um an sie seine CSS Custom Properties zu hängen, aber sonst fristet die Pseudoklasse in unserem Alltag ein eher tristes Dasein. [&#8230;]

Nach zehn Wochen war es mal wieder an der Zeit, an unserem Webtechnologie-Glücksrad zu drehen! 
[00:01:15] Glücksrad

SVGAnimatedEnumeration
Ähm… hä?

Keine Ahnung, wozu das gut ist. Schnell weiter!
Die :root-Pseudoklasse
Stefan nutzt sie gern[...]

Nach zehn Wochen war es mal wieder an der Zeit, an unserem Webtechnologie-Glücksrad zu drehen! 
[00:01:15] Glücksrad

SVGAnimatedEnumeration
Ähm… hä?

Keine Ahnung, wozu das gut ist. Schnell weiter!
Die :root-Pseudoklasse
Stefan nutzt sie gerne, um an sie seine CSS Custom Properties zu hängen, aber sonst fristet die Pseudoklasse in unserem Alltag ein eher tristes Dasein.
Der <image>-Datentyp
In den <image>-Datentyp lassen sich allerlei Dinge stecken:

Bilder per url()-Funktion (natürlich)
Gradienten aller Art, also lineare, radiale und konische Gradienten, sowie deren repeating-Pendants.
ein responsives image-set()
die endgeile, aber nirgendwo supportete image()-Funktion
das nur in WebKit und Chromium unterstützte cross-fade()
sowie das mächtige, aber nur in Firefox implementierte element()

::-webkit-scrollbar und Konsorten
Wir reden über Scrollbar-Styling im alten IE und wie man darauf heutzutage in den verschiedenen Browsern einwirkt, nämlich neben der ::-webkit-scrollbar-Familie für WebKit und Chromium, mit dem per W3C abgesegnetem scrollbar-width und scrollbar-color im Firefox. In neueren IEs und dem davon abgeleiteten Edge ließ sich eine hässliche Scrollbar immerhin noch via -ms-overflow-style: -ms-autohiding-scrollbar; verstecken.
font-variant-east-asian
Eine CSS-Eigenschaft, um offenbar eine Art asiatischer Ligaturen zu steuern. Von asiatischer Sprache haben wir leider alle keine Ahnung, aber uns fällt dieser tolle Talk von Florian Rivoal zu dem Thema ein: Line breaking and related properties from CSS Text.
Die dir-Eigenschaft der Manifest-Datei
Die sagt, in welche Richtung die Schrift der darin hinterlegten Textbausteine läuft. Hammer! 
Das  align–Attribut
So deprecated, dass sogar MDN sich weigert, es zu erklären. Früher haben wir es aber genutzt, um Inhalte im Netscape-Browser horizontal zu zentrieren, nachdem es dafür im IE ja das <center>-Element gab.
Zu guter Letzt: Programmiersprachen-Bashing Royal Rumble!
Aus irgendwelchen Gründen kommen wir vom rechten Pfad ab und driften über die historischen Eigenheiten von PHP hin zur Programmiersprache MUMPS. Und weil wir sowieso schonmal dabei sind, möchten wir Euch diesen Talk von einer vergangenen React Conf empfehlen: Let’s Program Like It’s 1999 von Lee Byron

Revision 497: Glücksrad

<p>Hans und Schepp hatten erneut <a href="https://www.uhlmann.pro/">Jon Uhlmann</a>, aka <a href="https://twitter.com/jonnitto">@jonnitto</a>, zu Gast, den Ihr vielleicht schon aus der <a href="https://workingdraft.de/490/">Revision 490 über Alpine.js &#038; Petite Vue</a> kennt. Dieses Mal sprachen wir über&hellip;<img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f941.png" alt="🥁" class="wp-smiley" style="height: 1em; max-height: 1em;" /></p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:07] Tooling rund ums Frontend Tooling</dt>
<dd>Die einen oder anderen erinnern sich, Jon ist als Core-Member stark in die (Weiter-)Entwicklung des <a href="https://workingdraft.de/441">Neos CMS</a> involviert. Als klassisches &#8222;Headful&#8220;-CMS fühlt dieses sich auch für das Frontend zuständig. Und wo Frontend im Spiel ist, da geht es heutzutage nicht ohne das entsprechende Frontend-Tooling in Form von Transpilern, Pre- und Postprozessoren, Task-Runnern und Bundlern. Als da wären:</p>
<ul>
<li><a href="https://webpack.js.org/">Webpack</a> (<a href="https://workingdraft.de/492/">Revision 492</a> &amp; <a href="https://workingdraft.de/289/">Revision 289</a>)</li>
<li><a href="https://gulpjs.com/">Gulp</a> (<a href="https://workingdraft.de/152/">Revision 152</a>)</li>
<li><a href="https://rollupjs.org/guide/en/">RollupJS</a> (<a href="https://workingdraft.de/405/">Revision 405</a>)</li>
<li><a href="https://babeljs.io/">Babel</a> (<a href="https://workingdraft.de/354/">Revision 354</a> &amp; <a href="https://workingdraft.de/393/">Revision 393</a>)</li>
<li><a href="https://esbuild.github.io/">esbuild</a></li>
<li><a href="https://postcss.org/">PostCSS</a> <a href="https://workingdraft.de/317/">Revision 317</a></li>
<li><a href="https://sass-lang.com/">Sass</a> <a href="https://workingdraft.de/72/">Revision 72</a></li>
</ul>
<p>Hierunter das richtige Werkzeug zu finden und die damit zusammengesetzte Toolchain längerfristig auf Stand zu halten, fällt selbst reinen Frontend-Entwicklern oft schwer &#8211; für Allrounder oder Backend-Entwickler, wie sie ein Großteil der Klientel von Neos CMS darstellt, ist das mindestens unangenehm, wenn nicht sogar kaum zu stemmen.</p>
<p>Aus diesem Grund hat Jon sich im Laufe der letzten Jahre mit dem Schreiben von Neos-Tools befasst, die uns diese ganzen Probleme abnimmt, und die die Komplexitäten der vorhin genannten Werkzeuge in einer einfach einzubindenden Black Box kapselt. Auf die Art und Weise ist eine stattliche Tool-Sammlung entstanden:</p>
<ul>
<li><a href="https://github.com/jonnitto/gulpfile.js">gulpfile.js</a></li>
<li><a href="https://github.com/CarbonPackages/Carbon.Gulp">Carbon.Gulp</a></li>
<li>Webpack: <a href="https://github.com/neos/Neos.NeosIo">NeosIo</a></li>
<li><a href="https://github.com/CarbonPackages/Carbon.Rollup">Carbon.Rollup</a></li>
<li>und jetzt, ganz neu, kulminierend in: <a href="https://github.com/CarbonPackages/Carbon.Pipeline">Carbon.Pipeline</a></li>
</ul>
<p>Wir sprechen darüber, für welche Anforderungen Jon Lösungen finden musste und zu welchen Einsichten er im Laufe der Zeit gekommen ist. Und wir sprechen darüber, was diese Tools nicht sind und was Jon auch bewusst nicht in diese Tools verpacken möchte.
</dd>
</dl>
</dl>


Hans und Schepp hatten erneut Jon Uhlmann, aka @jonnitto, zu Gast, den Ihr vielleicht schon aus der Revision 490 über Alpine.js &#038; Petite Vue kennt. Dieses Mal sprachen wir über&#8230;🥁 Schaunotizen [00:01:07] Tooling rund ums Frontend Tooling Die einen oder anderen erinnern sich, Jon ist als Core-Member stark in die (Weiter-)Entwicklung des Neos CMS involviert. [&#8230;]

Hans und Schepp hatten erneut Jon Uhlmann, aka @jonnitto, zu Gast, den Ihr vielleicht schon aus der Revision 490 über Alpine.js & Petite Vue kennt. Dieses Mal sprachen wir über…
Schaunotizen

[00:01:07] Tooling rund ums Frontend Tooling
D[...]

Hans und Schepp hatten erneut Jon Uhlmann, aka @jonnitto, zu Gast, den Ihr vielleicht schon aus der Revision 490 über Alpine.js & Petite Vue kennt. Dieses Mal sprachen wir über…
Schaunotizen

[00:01:07] Tooling rund ums Frontend Tooling
Die einen oder anderen erinnern sich, Jon ist als Core-Member stark in die (Weiter-)Entwicklung des Neos CMS involviert. Als klassisches „Headful“-CMS fühlt dieses sich auch für das Frontend zuständig. Und wo Frontend im Spiel ist, da geht es heutzutage nicht ohne das entsprechende Frontend-Tooling in Form von Transpilern, Pre- und Postprozessoren, Task-Runnern und Bundlern. Als da wären:

Webpack (Revision 492 & Revision 289)
Gulp (Revision 152)
RollupJS (Revision 405)
Babel (Revision 354 & Revision 393)
esbuild
PostCSS Revision 317
Sass Revision 72

Hierunter das richtige Werkzeug zu finden und die damit zusammengesetzte Toolchain längerfristig auf Stand zu halten, fällt selbst reinen Frontend-Entwicklern oft schwer – für Allrounder oder Backend-Entwickler, wie sie ein Großteil der Klientel von Neos CMS darstellt, ist das mindestens unangenehm, wenn nicht sogar kaum zu stemmen.
Aus diesem Grund hat Jon sich im Laufe der letzten Jahre mit dem Schreiben von Neos-Tools befasst, die uns diese ganzen Probleme abnimmt, und die die Komplexitäten der vorhin genannten Werkzeuge in einer einfach einzubindenden Black Box kapselt. Auf die Art und Weise ist eine stattliche Tool-Sammlung entstanden:

gulpfile.js
Carbon.Gulp
Webpack: NeosIo
Carbon.Rollup
und jetzt, ganz neu, kulminierend in: Carbon.Pipeline

Wir sprechen darüber, für welche Anforderungen Jon Lösungen finden musste und zu welchen Einsichten er im Laufe der Zeit gekommen ist. Und wir sprechen darüber, was diese Tools nicht sind und was Jon auch bewusst nicht in diese Tools verpacken möchte.

Revision 496: Tooling rund ums Frontend Tooling

<p>Für diese Revision durften wir Dominik Angerer (<a href="https://twitter.com/domangerer">@domangerer</a> und Sebastian Gierlinger (<a href="https://twitter.com/sebgie">@sebgie</a>) als unsere Gäste begrüßen. Die beiden sind in Tateinheit mit unserem Stefan Ausrichter diverser Tech-Events in Linz: dem <a href="https://www.meetup.com/stahlstadt-js/">Stahlstadt.js</a>-Meetup, der <a href="https://scriptconf.org/">Script</a> und auch der <a href="https://tsconf.eu/">TSConf:EU</a>. Darüber hinaus sind sie aber auch führende Köpfe hinter dem noch jungen aber sehr erfolgreichen Startup <a href="https://www.storyblok.com/">Storyblok</a>, das das gleichnamige Headless CMS betreibt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] Storyblok &#8211; Einblicke in ein Startup</dt>
<dd>Anlässlich des Rollouts von Teilen der Version 2 von Storyblok hat uns interessiert, wie es überhaupt dazu kam, dass Storyblok gegründet wurde, was das Headless CMS von anderen existierenden Angeboten unterscheidet und was für weitere Entwicklungen das Team zu ihrem heutigen, starken Standing geführt haben. Wir reden über Remote Work, welches seit Anbeginn zur DNA der Firma gehört, mit all seinen Vor- und Nachteilen. Wir reden über enormes Wachstum und wie Corona besseres Team-Building vereitelt. Und natürlich wollen wir auch wissen, wie es zum Entschluss einer Version 2 kam und wie das Team bei dessen Entwicklung und Ausrollen vorgeht. Wir erfahren, dass im Prinzip alles mit einem Style Guide und einer daraus abgeleiteten Komponenten-Bibliothek namens &#8222;<a href="http://blok.ink">block.ink</a>&#8220; seinen Anfang nahm, welche erforderlich wurde, um die vielen neu angeheuerten Mitarbeiter auf eine gemeinsame Linie zu bringen. Basierend darauf entschied man sich bei Storyblok für einen graduellen Rollout der Version 2, bei dem nicht das ganze Interface auf einen Schlag ersetzt wurde, sondern nach und nach immer mehr Teile davon. Die Benutzer wurden zunächst noch nicht auf die neue Version gezwungen, sondern sie dürfen <a href="https://www.storyblok.com/v2">freiwillig in das V2-Beta-Programm wechseln</a>. Und schließlich dokumentiert das Team alle seine Vorhaben, die es für Version 2 hegt, in seiner <a href="https://www.storyblok.com/roadmap">Public Roadmap</a>.</dd>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="http://esnextnews.com/">ES.next News</a></dt>
<dd>Den ES.next News(letter) können wir allen JavaScript- und JS-Tooling-Interessierten sehr ans Herz legen. Kuratiert wird er von JavaScript-Koryphäe <a href="https://2ality.com/">Axel Rauschmayer</a> (<a href="https://twitter.com/rauschma">@rauschma</a>) and <a href="https://jskongress.medium.com/">JS Kongress</a>-Co-Organisator Johannes Weber (<a href="https://twitter.com/jowe">@jowe</a>). Jede Woche landen bei den Abonnenten nicht mehr aber auch nicht weniger als 5 interessante Links im Posteingang.</dd>
</dl>


Für diese Revision durften wir Dominik Angerer (@domangerer und Sebastian Gierlinger (@sebgie) als unsere Gäste begrüßen. Die beiden sind in Tateinheit mit unserem Stefan Ausrichter diverser Tech-Events in Linz: dem Stahlstadt.js-Meetup, der Script und auch der TSConf:EU. Darüber hinaus sind sie aber auch führende Köpfe hinter dem noch jungen aber sehr erfolgreichen Startup Storyblok, das [&#8230;]

Für diese Revision durften wir Dominik Angerer (@domangerer und Sebastian Gierlinger (@sebgie) als unsere Gäste begrüßen. Die beiden sind in Tateinheit mit unserem Stefan Ausrichter diverser Tech-Events in Linz: dem Stahlstadt.js-Meetup, der Script [...]

Für diese Revision durften wir Dominik Angerer (@domangerer und Sebastian Gierlinger (@sebgie) als unsere Gäste begrüßen. Die beiden sind in Tateinheit mit unserem Stefan Ausrichter diverser Tech-Events in Linz: dem Stahlstadt.js-Meetup, der Script und auch der TSConf:EU. Darüber hinaus sind sie aber auch führende Köpfe hinter dem noch jungen aber sehr erfolgreichen Startup Storyblok, das das gleichnamige Headless CMS betreibt.
Schaunotizen

[00:00:59] Storyblok – Einblicke in ein Startup
Anlässlich des Rollouts von Teilen der Version 2 von Storyblok hat uns interessiert, wie es überhaupt dazu kam, dass Storyblok gegründet wurde, was das Headless CMS von anderen existierenden Angeboten unterscheidet und was für weitere Entwicklungen das Team zu ihrem heutigen, starken Standing geführt haben. Wir reden über Remote Work, welches seit Anbeginn zur DNA der Firma gehört, mit all seinen Vor- und Nachteilen. Wir reden über enormes Wachstum und wie Corona besseres Team-Building vereitelt. Und natürlich wollen wir auch wissen, wie es zum Entschluss einer Version 2 kam und wie das Team bei dessen Entwicklung und Ausrollen vorgeht. Wir erfahren, dass im Prinzip alles mit einem Style Guide und einer daraus abgeleiteten Komponenten-Bibliothek namens „block.ink“ seinen Anfang nahm, welche erforderlich wurde, um die vielen neu angeheuerten Mitarbeiter auf eine gemeinsame Linie zu bringen. Basierend darauf entschied man sich bei Storyblok für einen graduellen Rollout der Version 2, bei dem nicht das ganze Interface auf einen Schlag ersetzt wurde, sondern nach und nach immer mehr Teile davon. Die Benutzer wurden zunächst noch nicht auf die neue Version gezwungen, sondern sie dürfen freiwillig in das V2-Beta-Programm wechseln. Und schließlich dokumentiert das Team alle seine Vorhaben, die es für Version 2 hegt, in seiner Public Roadmap.
Keine Schaunotizen

ES.next News
Den ES.next News(letter) können wir allen JavaScript- und JS-Tooling-Interessierten sehr ans Herz legen. Kuratiert wird er von JavaScript-Koryphäe Axel Rauschmayer (@rauschma) and JS Kongress-Co-Organisator Johannes Weber (@jowe). Jede Woche landen bei den Abonnenten nicht mehr aber auch nicht weniger als 5 interessante Links im Posteingang.

Revision 495: Storyblok – Einblicke in ein Startup

<p>Nachdem Stefan zu den regulären Zeiten aktuell nicht mehr teilnehmen kann, haben sich Vanessa, Schepp und die Österreich-Quote früh morgens zu Cappuccino und Hühnerbrühe getroffen. Thema der Sendung: Sämtlicher Research zum Thema Serverless.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:30] Serverless</dt>
<dd><em>Ja, wie ist den das? Bei Serverless gibt&#8217;s doch immer noch Server?</em>. Wieso heißt Serverless eigentlich Serverless, und wie geht das? Stefan referiert über Serverless als Infrastruktur-Prinzip und Serverless als Applikations-Modell. Wir gehen in die Details zu <a href="https://aws.amazon.com/lambda/">AWS Lambda</a>, <a href="https://azure.microsoft.com/de-de/services/functions/">Azure Functions</a>, den <a href="https://workers.cloudflare.com/">Cloudflare Workers</a>, und <a href="https://docs.fastly.com/products/compute-at-edge">Fastly Compute@Edge</a>. Und das auch nur, um die großen Unterschiede der Plattformen herauszustreichen. Daneben gibt es ein paar Details zu <a href="https://docs.fastly.com/products/compute-at-edge">OpenWhisk</a>, <a href="https://docs.fastly.com/products/compute-at-edge">OpenFaaS</a>, <a href="https://knative.dev/docs/">KNative</a>, <a href="https://fission.io/">Fission</a>, <a href="https://keda.sh/">KEDA</a>, etc. Stefan spricht dazu auch auf dem <a href="https://www.youtube.com/watch?v=EXqqsCss8Gk">Rust Linz Meetup</a>. Wer mehr über die Bezahlung wissen will, schaut sich <a href="https://www.troyhunt.com/azure-functions-in-practice/">Troy Hunts Blogpost an</a>. Für komplexere Cloud-Berechnungen gibt es ja mittlerweile Fachleute wie <a href="https://www.duckbillgroup.com/">die Duckbill Group</a>, die einen sehr empfehlenswerten Newsletter betreiben.</dd>
</dl>


Nachdem Stefan zu den regulären Zeiten aktuell nicht mehr teilnehmen kann, haben sich Vanessa, Schepp und die Österreich-Quote früh morgens zu Cappuccino und Hühnerbrühe getroffen. Thema der Sendung: Sämtlicher Research zum Thema Serverless. Schaunotizen [00:02:30] Serverless Ja, wie ist den das? Bei Serverless gibt&#8217;s doch immer noch Server?. Wieso heißt Serverless eigentlich Serverless, und wie [&#8230;]

Nachdem Stefan zu den regulären Zeiten aktuell nicht mehr teilnehmen kann, haben sich Vanessa, Schepp und die Österreich-Quote früh morgens zu Cappuccino und Hühnerbrühe getroffen. Thema der Sendung: Sämtlicher Research zum Thema Serverless.
Schauno[...]

Nachdem Stefan zu den regulären Zeiten aktuell nicht mehr teilnehmen kann, haben sich Vanessa, Schepp und die Österreich-Quote früh morgens zu Cappuccino und Hühnerbrühe getroffen. Thema der Sendung: Sämtlicher Research zum Thema Serverless.
Schaunotizen

[00:02:30] Serverless
Ja, wie ist den das? Bei Serverless gibt’s doch immer noch Server?. Wieso heißt Serverless eigentlich Serverless, und wie geht das? Stefan referiert über Serverless als Infrastruktur-Prinzip und Serverless als Applikations-Modell. Wir gehen in die Details zu AWS Lambda, Azure Functions, den Cloudflare Workers, und Fastly Compute@Edge. Und das auch nur, um die großen Unterschiede der Plattformen herauszustreichen. Daneben gibt es ein paar Details zu OpenWhisk, OpenFaaS, KNative, Fission, KEDA, etc. Stefan spricht dazu auch auf dem Rust Linz Meetup. Wer mehr über die Bezahlung wissen will, schaut sich Troy Hunts Blogpost an. Für komplexere Cloud-Berechnungen gibt es ja mittlerweile Fachleute wie die Duckbill Group, die einen sehr empfehlenswerten Newsletter betreiben.

Revision 494: Serverless

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 505: ES-Module und ein bisschen TypeScript 4.5

Working Draft

Revision 504: Analytics- & Tracking-Tools

Working Draft

Revision 503: CSS-, HTML-, und Accessibility-Kleinkram

Working Draft

Revision 502: Unglücksrad

Working Draft

Revision 501: ein bisschen TypeScript 4.4 und ganz viel Anderes

Working Draft

Revision 500: AMA!

Working Draft

Revision 499: Laravel Livewire

Working Draft

Revision 498: CSS 2, Web 3.0 und Podcastempfehlungen

Working Draft

Revision 497: Glücksrad

Working Draft

Revision 496: Tooling rund ums Frontend Tooling

Working Draft

Revision 495: Storyblok – Einblicke in ein Startup

Working Draft

Revision 494: Serverless

Working Draft