<p>Wie jetzt? Im TypeScript-affinen Working Draft erlauben wir uns gegen den Heilsbringer zu ketzen? Tatsächlich erlauben wir gegenteilige Meinungen, hergebracht von <a href="https://twitter.com/closingtag">Robert Weber</a>, der schon in <a href="https://workingdraft.de/359/">einigen</a> <a href="https://workingdraft.de/on-tour-ctwebdev-robert-weber/">Sendungen</a> zu Gast war.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:17] <a href="http://closingtag.org/talks/typescript-are-u-sure/#/">Es muss nicht immer TypeScript sein</a></dt>
<dd>Auf Basis seines Vortrags und den Erfahrungen in einem Projekt mit vielen, vielen Back-End Entwicklern gibt Robert bekannt, was nicht alles schlimm und unnötig an TypeScript ist. Er findet sogar Gehör! Und Gegenrede! Beides gleichzeitig! In einer sehr nuancierten Betrachtung reden wir über: <a href="http://earlbarr.com/publications/typestudy.pdf">Warum Types beim Bugfinden total überbewertet sind</a>, <a href="https://fettblog.eu/why-i-use-typescript/">Wie man als JavaScripter zu TypeScript stehen kann</a>, Test Driven Development, <a href="https://fettblog.eu/typescript-jsdoc-superpowers/">JSDoc</a>, <a href="https://www.ecma-international.org/activities/Languages/Language%20overview.pdf">EcmaScript 4</a> und sogar <a href="https://www.adobe.com/devnet/actionscript/learning/as3-fundamentals/data-types.html">Action Script 3</a>. Das und noch vieles mehr in knapp unter 90 Minuten!</dd>
</dl>


Wie jetzt? Im TypeScript-affinen Working Draft erlauben wir uns gegen den Heilsbringer zu ketzen? Tatsächlich erlauben wir gegenteilige Meinungen, hergebracht von Robert Weber, der schon in einigen Sendungen zu Gast war. Schaunotizen [00:02:17] Es muss nicht immer TypeScript sein Auf Basis seines Vortrags und den Erfahrungen in einem Projekt mit vielen, vielen Back-End Entwicklern gibt [&#8230;]

Working Draft

Wie jetzt? Im TypeScript-affinen Working Draft erlauben wir uns gegen den Heilsbringer zu ketzen? Tatsächlich erlauben wir gegenteilige Meinungen, hergebracht von Robert Weber, der schon in einigen Sendungen zu Gast war.
Schaunotizen

[00:02:17] Es [...]

Wie jetzt? Im TypeScript-affinen Working Draft erlauben wir uns gegen den Heilsbringer zu ketzen? Tatsächlich erlauben wir gegenteilige Meinungen, hergebracht von Robert Weber, der schon in einigen Sendungen zu Gast war.
Schaunotizen

[00:02:17] Es muss nicht immer TypeScript sein
Auf Basis seines Vortrags und den Erfahrungen in einem Projekt mit vielen, vielen Back-End Entwicklern gibt Robert bekannt, was nicht alles schlimm und unnötig an TypeScript ist. Er findet sogar Gehör! Und Gegenrede! Beides gleichzeitig! In einer sehr nuancierten Betrachtung reden wir über: Warum Types beim Bugfinden total überbewertet sind, Wie man als JavaScripter zu TypeScript stehen kann, Test Driven Development, JSDoc, EcmaScript 4 und sogar Action Script 3. Das und noch vieles mehr in knapp unter 90 Minuten!

Revision 418: TypeScript ist doof!

<p>In einer extralangen Folge nehmen sich Schepp und Peter Zeit für einen Rückblick auf die Internet-Explorer-Ära und speziell die vom IE etablierten Webtechnologien, die auch heute noch teilweise ihresgleichen suchen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:30] <a href="https://schepp.dev/posts/today-the-trident-era-ends/">Angewandte Internet-Explorer-Historie</a></dt>
<dd>Peter und Schepp besprechen die Inhalte von Schepps viralem Blogpost über das Ende und die Errungenschaften der Trident-Engine und des Internet Explorers. Wir quatschen über den <a href="https://de.wikipedia.org/wiki/Browserkrieg">Browserkrieg</a>, den Einfluss des Internet Explorers auf HTML5, <a href="https://www.youtube.com/watch?v=6QWM3ba6igA">einen alten HTML5-Talk von Peter</a> und die (ernst gemeinte) Frage, ob Chrome der neue IE&nbsp;6 ist.</p>
</dd>
</dl>


In einer extralangen Folge nehmen sich Schepp und Peter Zeit für einen Rückblick auf die Internet-Explorer-Ära und speziell die vom IE etablierten Webtechnologien, die auch heute noch teilweise ihresgleichen suchen. Schaunotizen [00:02:30] Angewandte Internet-Explorer-Historie Peter und Schepp besprechen die Inhalte von Schepps viralem Blogpost über das Ende und die Errungenschaften der Trident-Engine und des Internet [&#8230;]

In einer extralangen Folge nehmen sich Schepp und Peter Zeit für einen Rückblick auf die Internet-Explorer-Ära und speziell die vom IE etablierten Webtechnologien, die auch heute noch teilweise ihresgleichen suchen.
Schaunotizen

[00:02:30] Angewand[...]

In einer extralangen Folge nehmen sich Schepp und Peter Zeit für einen Rückblick auf die Internet-Explorer-Ära und speziell die vom IE etablierten Webtechnologien, die auch heute noch teilweise ihresgleichen suchen.
Schaunotizen

[00:02:30] Angewandte Internet-Explorer-Historie
Peter und Schepp besprechen die Inhalte von Schepps viralem Blogpost über das Ende und die Errungenschaften der Trident-Engine und des Internet Explorers. Wir quatschen über den Browserkrieg, den Einfluss des Internet Explorers auf HTML5, einen alten HTML5-Talk von Peter und die (ernst gemeinte) Frage, ob Chrome der neue IE 6 ist.

Revision 417: Das Ende einer Ära

<p>Kinder, wie die Zeit vergeht! Erst in der <a href="https://workingdraft.de/402/">Revision 402</a> haben wir TypeScript&nbsp;3.7 analysiert und nun steht auch schon Version&nbsp;3.8 vor der Tür. Peter und Stefan nehmen sich dieses Themas (und weitläufig abschweifend auch diverser anderer Themen) an.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:40] <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/">TypeScript 3.8</a></dt>
<dd>Die neue (Non-<a href="https://semver.org/">SemVer</a>) Version von TypeScript bietet diverse Neuheiten, angefangen mit Type-Only Imports and Export. Diese sind vor allem für Angular-Services nützlich, Stefan erwartet aber, <a href="https://fettblog.eu/typescript-assertion-signatures/">wie schon bei Assertion Signatures</a>, auch andere Use Cases. Der Support von <a href="https://github.com/tc39/proposal-class-fields">Private Class Fields</a> haut uns nicht vom Sockel, die neue <a href="https://github.com/tc39/proposal-export-ns-from">Export-NS-From-Syntax</a> gefällt da schon eher. Über <a href="https://v8.dev/features/top-level-await">Top-Level-Await</a> schweifen wir zu den Herausforderugen für die Autoren von JS-Tooling ab, das manchmal Blüten wie <a href="https://medium.com/passpill-project/files-with-mjs-extension-for-javascript-modules-ced195d7c84a">die .mjs-Dateierweiterung</a> treibt. Außerdem geht noch um <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional Chaining</a>, Sinn, Zweck und Nutzer von <a href="https://jsdoc.app/">JSDoc</a>, <code>watchOptions</code> und <a href="https://github.com/TypeStrong/ts-node">ts-node</a>, Incremental Checking sowie Stricter Assignability Checks to Unions with Index Signatures. Was immer das auch sei mag!</dd>
</dl>


Kinder, wie die Zeit vergeht! Erst in der Revision 402 haben wir TypeScript&#160;3.7 analysiert und nun steht auch schon Version&#160;3.8 vor der Tür. Peter und Stefan nehmen sich dieses Themas (und weitläufig abschweifend auch diverser anderer Themen) an. Schaunotizen [00:00:40] TypeScript 3.8 Die neue (Non-SemVer) Version von TypeScript bietet diverse Neuheiten, angefangen mit Type-Only Imports [&#8230;]

Kinder, wie die Zeit vergeht! Erst in der Revision 402 haben wir TypeScript 3.7 analysiert und nun steht auch schon Version 3.8 vor der Tür. Peter und Stefan nehmen sich dieses Themas (und weitläufig abschweifend auch diverser anderer Them[...]

Kinder, wie die Zeit vergeht! Erst in der Revision 402 haben wir TypeScript 3.7 analysiert und nun steht auch schon Version 3.8 vor der Tür. Peter und Stefan nehmen sich dieses Themas (und weitläufig abschweifend auch diverser anderer Themen) an.
Schaunotizen

[00:00:40] TypeScript 3.8
Die neue (Non-SemVer) Version von TypeScript bietet diverse Neuheiten, angefangen mit Type-Only Imports and Export. Diese sind vor allem für Angular-Services nützlich, Stefan erwartet aber, wie schon bei Assertion Signatures, auch andere Use Cases. Der Support von Private Class Fields haut uns nicht vom Sockel, die neue Export-NS-From-Syntax gefällt da schon eher. Über Top-Level-Await schweifen wir zu den Herausforderugen für die Autoren von JS-Tooling ab, das manchmal Blüten wie die .mjs-Dateierweiterung treibt. Außerdem geht noch um Optional Chaining, Sinn, Zweck und Nutzer von JSDoc, watchOptions und ts-node, Incremental Checking sowie Stricter Assignability Checks to Unions with Index Signatures. Was immer das auch sei mag!

Revision 416: TypeScript 3.8

<p>Diese Revision fragt Schepp das dynamische Duo aus Hans und Peter über ihr SAAS-Projekt <a href="https://warhol.io/">Warhol</a> aus.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:30] <a href="https://warhol.io/">Warhol</a></dt>
<dd>Hans und Peter plaudern und über Sinn, Zweck und Umsetzung ihres Tools, das aus Pattern Libraries Test für Webdesign generiert (<a href="https://www.youtube.com/watch?v=OJyYHrM3VNs&amp;feature=emb_title">Demo-Video</a>). Wir sprechen über Sinn und Zweck von Pattern Libraries, vergleichen Warhol mit SiteEffect sowie Screenshot-Tools für Visual Regression Testing, besprechen mögliche Use Cases für automatisiertes Design-Testing und kommen auch auf Details wie Warhols Browser-Extension und Warhol&#8217;s Law zu sprechen.</dd>
</dl>


Diese Revision fragt Schepp das dynamische Duo aus Hans und Peter über ihr SAAS-Projekt Warhol aus. Schaunotizen [00:00:30] Warhol Hans und Peter plaudern und über Sinn, Zweck und Umsetzung ihres Tools, das aus Pattern Libraries Test für Webdesign generiert (Demo-Video). Wir sprechen über Sinn und Zweck von Pattern Libraries, vergleichen Warhol mit SiteEffect sowie Screenshot-Tools [&#8230;]

Diese Revision fragt Schepp das dynamische Duo aus Hans und Peter über ihr SAAS-Projekt Warhol aus.
Schaunotizen

[00:00:30] Warhol
Hans und Peter plaudern und über Sinn, Zweck und Umsetzung ihres Tools, das aus Pattern Libraries Test für Webdesign [...]

Diese Revision fragt Schepp das dynamische Duo aus Hans und Peter über ihr SAAS-Projekt Warhol aus.
Schaunotizen

[00:00:30] Warhol
Hans und Peter plaudern und über Sinn, Zweck und Umsetzung ihres Tools, das aus Pattern Libraries Test für Webdesign generiert (Demo-Video). Wir sprechen über Sinn und Zweck von Pattern Libraries, vergleichen Warhol mit SiteEffect sowie Screenshot-Tools für Visual Regression Testing, besprechen mögliche Use Cases für automatisiertes Design-Testing und kommen auch auf Details wie Warhols Browser-Extension und Warhol’s Law zu sprechen.

Revision 414: Warhol

<p>In diese Revision dreht sich alles um Werbung und Tracking Scripte. Denn Hans interviewte Schepp  anlässlich <a href="https://schepp.dev/posts/ad-integration-in-2020/">seines Blogposts zu dem Thema</a> aus Dezember.</p>
<style>
.ionos a.message_link {
  margin: 0 0 1rem; width: 100%;
  border-bottom: 0;
  display: block;
}
.ionos a.message_link img { 
  margin: 0 auto;
}
</style>
<aside class="message ionos">
<h2>Unser Sponsor</h2>
<p><a href="https://www.ionos.de/workingdraft" class="message_link"><img src="https://workingdraft.de/wp-content/uploads/2020/01/ionos.png" alt="" class="alignnone size-medium wp-image-3774" style="display: block; max-width: 100%;" /></a></p>
<div class="message_content"><a href="https://www.ionos.de/workingdraft">Hier kannst du mehr über IONOS erfahren</a>.</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:26] <a href="https://schepp.dev/posts/ad-integration-in-2020/">Werbung und Tracker domptieren</a></dt>
<dd>Zunächst erklärt Schepp, wie Werbung heutzutage in Webseiten gelangen, nämlich <a href="https://de.wikipedia.org/wiki/Programmatic_Advertising">vollautomatisiert</a>, und wie wenig Kontrolle man dadurch über die tatsächliche Auswahl hat. </p>
<p>Dann reden wir über den Konflikt von Werbung mit einem echten responsiven Ansatz, und <a href="https://schepp.dev/posts/ad-integration-in-2020/#ads-%26-responsiveness">Lösungsmöglichkeiten</a>.</p>
<p>Werbemittel sind meist auch nicht performant programmiert, sondern eher hemdsärmelig. Deshalb findet man darin auch oft das antike und render-blockierende <code>document.write</code>. Schepp hat eine <a href="https://schepp.dev/posts/ad-integration-in-2020/#lazy-loading-ads-for-better-performance>Lösung entwickelt</a>, die <code>document.write</code> asynchron werden lässt.</p>
<p>Werbeslots, die auf einer Seite ständig auf und zuklappen, je nachdem welche Werbung darin geladen wird, stören den Lesefluss gewaltig. Ein <a href="https://schepp.dev/posts/ad-integration-in-2020/#bringing-stability-back-to-layout">Ansatz mit <code>position: sticky</code> hilft hier aus der Misere</a>.</p>
<p>Sogenannte Wolkenkratzer- oder Hintergrundbild-Anzeigen neigen dazu, dafür zu sorgen, dass sie immer sichtbar sind. Das kann zur Folge haben, dass sie manchmal wichtige UI wie den Webseiten-Kopf oder das Off-Canvas-Menü abdecken und diese Elemente dadurch unbedienbar werden. <a href="https://schepp.dev/posts/ad-integration-in-2020/#winning-the-z-index-wars">Der Trick hier ist, die Werbung in einem Container einzufangen</a>, und diesen dann geschickt in den restlichen Stacking Context einzubinden.</p>
<p>Zu guter Letzt entpuppen sich Werbeanzeigen manchmal als Trojanische Pferde, deren eigentliches Ziel es ist, unbemerkt sensible Daten der User zu stehlen. Dafür lesen sie vorhandene, oder heimlich eingefügte Inputs aus. Dem hat Schepp einen Riegel vorgeschoben, <a href="https://schepp.dev/posts/ad-integration-in-2020/#shielding-our-users">indem er den Prototypen des Input Elements gepatcht hat</a>.</dd>
</dl>


In diese Revision dreht sich alles um Werbung und Tracking Scripte. Denn Hans interviewte Schepp anlässlich seines Blogposts zu dem Thema aus Dezember. Unser Sponsor Hier kannst du mehr über IONOS erfahren. Schaunotizen [00:02:26] Werbung und Tracker domptieren Zunächst erklärt Schepp, wie Werbung heutzutage in Webseiten gelangen, nämlich vollautomatisiert, und wie wenig Kontrolle man dadurch [&#8230;]

In diese Revision dreht sich alles um Werbung und Tracking Scripte. Denn Hans interviewte Schepp  anlässlich seines Blogposts zu dem Thema aus Dezember.

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

In diese Revision dreht sich alles um Werbung und Tracking Scripte. Denn Hans interviewte Schepp  anlässlich seines Blogposts zu dem Thema aus Dezember.

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


Unser Sponsor

Hier kannst du mehr über IONOS erfahren.

Schaunotizen

[00:02:26] Werbung und Tracker domptieren
Zunächst erklärt Schepp, wie Werbung heutzutage in Webseiten gelangen, nämlich vollautomatisiert, und wie wenig Kontrolle man dadurch über die tatsächliche Auswahl hat. 
Dann reden wir über den Konflikt von Werbung mit einem echten responsiven Ansatz, und Lösungsmöglichkeiten.
Werbemittel sind meist auch nicht performant programmiert, sondern eher hemdsärmelig. Deshalb findet man darin auch oft das antike und render-blockierende document.write. Schepp hat eine

Revision 415: Werbung und Tracker domptieren

<p>Das Warten hat endlich ein Ende: Nach mehreren Monaten der intensiven Suche &#8212; fast schon ein Running Gag! &#8212; ist nun jemand mit fundamentalem Svelte-Wissen ins virtuelle Studio reingeschneit: <a href="https://twitter.com/vannsl">Vanessa Böhner</a>, die treuen Hörern mit ihren versierten Einblicken zu <a href="https://workingdraft.de/367/">Vue</a>, <a href="https://workingdraft.de/375/">Frontend-Testing</a> und <a href="https://workingdraft.de/407">Micro Frontends</a> bekannt sein dürfte, hat sich im Zuge des Relaunchs ihrer Seite intensiv mit <a href="https://svelte.dev">Svelte</a> auseinander gesetzt. Noch intensiver, nachdem die Einladung zum Podcast kam. <a href="https://twitter.com/vannsl/status/1213807658324676609">Podcast Driven Development</a>, sozusagen. In gewohnter Qualität und Genauigkeit gibt uns Vanessa <em>den</em> Svelte Deep Dive, beantwortet alle Fragen zu Framework, Framework-Geschichte und Use Cases.</p>
<style>
a.message_link {
  float: right;
  margin: 1rem 2rem; width: 100%; width: 400px;
  border-bottom: 0;
}
</style>
<aside class="message">
<p><a href="https://www.storyblok.com?ref=workingdraft.de" class="message_link"><img src="https://workingdraft.de/wp-content/uploads/2019/07/storyblok-colored.png" alt="" class="alignnone size-medium wp-image-3774" style="display: block; max-width: 100%;" /></a></p>
<h2>Unser Sponsor</h2>
<div class="message_content">
Storyblok is a Headless Content Management System that provides developers with all the flexibility they need to build reliable and fast websites whilst giving content creators with no coding skills the ability to edit content independently of the developer. Thanks to the headless approach your content can not only be used for one website, which is the case if you use a monolithic CMS like WordPress. Storyblok empowers you to use your content on iOS and Android apps, as well as any other platform of choice (IoT, smartwatch, AR/VR) through Application Programming Interfaces (“APIs”).</p>
<p>You can read more about <a href="https://www.storyblok.com/?ref=workingdraft.de">Storyblok</a> and <a href="https://www.storyblok.com/free?ref=workingdraft.de">use their free plan</a>, reach them on <a href="https://www.twitter.com/storyblok">Twitter</a> or in their live chat.
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:32] <a href="https://svelte.dev">Svelte</a></dt>
<dd>Svelte ist anders. Die Rückkehr von &#8222;write less, do more&#8220;, und exklusiv compiler-orientiert. Das Ergebnis: Wenig Framework, hohe Developer Ergonomie. Durch schlaue Konventionen und dem Aufbrauch gewohnter Framework-Strukturen schafft es Svelte mit einer mächtigen Template Sprache und 0 Boilerplate Code echt Spaß zu machen, und erstaunlich wenig Code zu produzieren. Das Hello World überzeugt, aber auch im späteren Verlauf zeigt Svelte, dass es mit allen Wassern gewaschen ist. Für moderne JAMstack Architekturen gibt es mit <a href="https://sapper.svelte.dev/">Sapper</a> ein auf Svelte basierte Next.js Äquivalent, Styling ist first class citizen und ebenso flott. Wir sind begeistert wie schon lange nicht mehr, und dass, obwohl es noch keinen TypeScript Support gibt. Für weitere Lektüre empfiehlt sich der <a href="https://svelte.dev/blog">Svelte Blog</a>, ein <a href="https://github.com/sveltejs/realworld">Realworld</a> Beispiel, sowie <a href="https://medium.com/free-code-camp/a-realworld-comparison-of-front-end-frameworks-with-benchmarks-2019-update-4be0d3c78075">Benchmarks</a> und <a href="https://medium.com/javascript-in-plain-english/why-svelte-wont-kill-react-3cfdd940586a">eine kritische Auseinandersetzung im Vergleich zu anderen Frameworks</a>. Dass Svelte sauflott ist, sieht man auch in <a href="https://twitter.com/Rich_Harris/status/1200807516529147904">sehr anschaulich in diesem Tweet</a></dd>
</dl>


Das Warten hat endlich ein Ende: Nach mehreren Monaten der intensiven Suche &#8212; fast schon ein Running Gag! &#8212; ist nun jemand mit fundamentalem Svelte-Wissen ins virtuelle Studio reingeschneit: Vanessa Böhner, die treuen Hörern mit ihren versierten Einblicken zu Vue, Frontend-Testing und Micro Frontends bekannt sein dürfte, hat sich im Zuge des Relaunchs ihrer Seite [&#8230;]

Das Warten hat endlich ein Ende: Nach mehreren Monaten der intensiven Suche — fast schon ein Running Gag! — ist nun jemand mit fundamentalem Svelte-Wissen ins virtuelle Studio reingeschneit: Vanessa Böhner, die treuen Hörern mit ihren ve[...]

Das Warten hat endlich ein Ende: Nach mehreren Monaten der intensiven Suche — fast schon ein Running Gag! — ist nun jemand mit fundamentalem Svelte-Wissen ins virtuelle Studio reingeschneit: Vanessa Böhner, die treuen Hörern mit ihren versierten Einblicken zu Vue, Frontend-Testing und Micro Frontends bekannt sein dürfte, hat sich im Zuge des Relaunchs ihrer Seite intensiv mit Svelte auseinander gesetzt. Noch intensiver, nachdem die Einladung zum Podcast kam. Podcast Driven Development, sozusagen. In gewohnter Qualität und Genauigkeit gibt uns Vanessa den Svelte Deep Dive, beantwortet alle Fragen zu Framework, Framework-Geschichte und Use Cases.

a.message_link {
  float: right;
  margin: 1rem 2rem; width: 100%; width: 400px;
  border-bottom: 0;
}



Unser Sponsor

Storyblok is a Headless Content Management System that provides developers with all the flexibility they need to build reliable and fast websites whilst giving content creators with no coding skills the ability to edit content independently of the developer. Thanks to the headless approach your content can not only be used for one website, which is the case if you use a monolithic CMS like WordPress. Storyblok empowers you to use your content on iOS and Android apps, as well as any other platform of choice (IoT, smartwatch, AR/VR) through Application Programming Interfaces (“APIs”).
You can read more about Storyblok and use their free plan, reach them on Twitter or in their live chat.


Schaunotizen

[00:01:32] Svelte
Svelte ist anders. Die Rückkehr von „write less, do more“, und exklusiv compiler-orientiert. Das Ergebnis: Wenig Framework, hohe Developer Ergonomie. Durch schlaue Konventionen und dem Aufbrauch gewohnter Framework-Strukturen schafft es Svelte mit einer mächtigen Template Sprache und 0 Boilerplate Code echt Spaß zu machen, und erstaunlich wenig Code zu produzieren. Das Hello World überzeugt, aber auch im späteren Verlauf zeigt Svelte, dass es mit allen Wassern gewaschen ist. Für moderne JAMstack Architekturen gibt es mit Sapper ein auf Svelte basierte Next.js Äquivalent, Styling ist first class citizen und ebenso flott. Wir sind begeistert wie schon lange nicht mehr, und dass, obwohl es noch keinen TypeScript Support gibt. Für weitere Lektüre empfiehlt sich der Svelte Blog, ein Realworld Beispiel, sowie Benchmarks und eine kritische Auseinandersetzung im Vergleich zu anderen Frameworks. Dass Svelte sauflott ist, sieht man auch in sehr anschaulich in diesem Tweet

Revision 413: Svelte

<p>Hans und Peter hatten diesmal das Vergnügen, sich mit dem langjährigen Podcast-Hörer <strong>Tobias Barth</strong> (freischaffender Frontend- und gelegentlicher Node-Entwickler, zu finden in <a href="http://tobias-barth.net/">Web</a>, <a href="https://twitter.com/4nduril">Twitter</a> und auf <a href="https://dev.to/4nduril">Dev.to</a>) über die Prozesse und Tools rund um die Veröffentlichung von JavaScript-Paketen austauschen zu dürfen.</p>
<style>
.ionos a.message_link {
  margin: 0 0 1rem; width: 100%;
  border-bottom: 0;
  display: block;
}
.ionos a.message_link img { 
  margin: 0 auto;
}
</style>
<aside class="message ionos">
<h2>Unser Sponsor</h2>
<p><a href="https://www.ionos.de/workingdraft" class="message_link"><img src="https://workingdraft.de/wp-content/uploads/2020/01/ionos.png" alt="" class="alignnone size-medium wp-image-3774" style="display: block; max-width: 100%;" /></a></p>
<div class="message_content"><a href="https://www.ionos.de/workingdraft">Hier kannst du mehr über IONOS erfahren</a>.</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:45] Veröffentlichung von Libraries</dt>
<dd>
Die Perspektiven eines kleinen Startups (Peter und Hans mit <a href="https://warhol.io">Warhol.io</a>) und Tobias (MediaMarkt/Saturn) bzgl. Library-Entwicklung und -Veröffentlichung prallen aufeinander! Neben offensichtlichen Fragen wie Dependencies vs. Selbstschreiben (vgl. <a href="https://workingdraft.de/397/">Revision 397 zu Preact</a>) geht auch um das Handwerk des NPM-Paket-Veröffentlichens mit <a href="https://semver.org/">Semver</a> (bevorzugt mit automatischen Versionsnummern via <a href="https://www.npmjs.com/package/standard-version">standard-version</a> und/oder <a href="https://github.com/semantic-release/semantic-release">semantic-release</a>) und dem <a href="https://docs.npmjs.com/cli/publish">publish</a>-Kommando. Die kniffligen Entscheidungen im Library-Build-Prozess nehmen besonderes Gewicht ein: wie genau passen <a href="https://www.typescriptlang.org/">TypeScript</a>, <a href="https://babeljs.io/">Babel</a>, <a href="https://rollupjs.org/">Rollup</a> (vgl. <a href="https://workingdraft.de/405/">Revision 405</a>), <a href="https://webpack.js.org/">Webpack</a> und ähnliche Tools in den Prozess? Was bewirken die Felder <a href="https://docs.npmjs.com/files/package.json#main"><code>main</code></a>, <a href="https://docs.npmjs.com/files/package.json#browser"><code>browser</code></a>, <a href="https://stackoverflow.com/questions/42708484/what-is-the-module-package-json-field-for"><code>module</code></a> und <a href="https://www.typescriptlang.org/docs/handbook/declaration-files/publishing.html#including-declarations-in-your-npm-package"><code>types</code></a> in der package.json? Am Ende dürfen Verweise auf ein paar Alltags-Helfer nicht fehlen, allen voran das Link-Kommendo (gibt es <a href="https://docs.npmjs.com/cli/link.html">für NPM</a> wie auch <a href="https://yarnpkg.com/lang/en/docs/cli/link/">für yarn</a>), die <a href="https://nodejs.org/en/blog/npm/peer-dependencies/">Peer Dependencies</a>, das <a href="https://docs.npmjs.com/cli/dedupe.html">Dedupe-Kommando</a> und allgemeine Tools wie <a href="https://prettier.io/">Prettier</a>, <a href="https://eslint.org/">ESLint</a>, <a href="https://travis-ci.org/">Travis</a>, <a href="https://circleci.com/">Circle CI</a>, <a href="https://greenkeeper.io/">Greenkeeper</a> und <a href="https://dependabot.com/">Dependabot</a>.</dd>
</dl>


Hans und Peter hatten diesmal das Vergnügen, sich mit dem langjährigen Podcast-Hörer Tobias Barth (freischaffender Frontend- und gelegentlicher Node-Entwickler, zu finden in Web, Twitter und auf Dev.to) über die Prozesse und Tools rund um die Veröffentlichung von JavaScript-Paketen austauschen zu dürfen. Unser Sponsor Hier kannst du mehr über IONOS erfahren. Schaunotizen [00:02:45] Veröffentlichung von Libraries [&#8230;]

Hans und Peter hatten diesmal das Vergnügen, sich mit dem langjährigen Podcast-Hörer Tobias Barth (freischaffender Frontend- und gelegentlicher Node-Entwickler, zu finden in Web, Twitter und auf Dev.to) über die Prozesse und Tools rund um die Veröff[...]

Hans und Peter hatten diesmal das Vergnügen, sich mit dem langjährigen Podcast-Hörer Tobias Barth (freischaffender Frontend- und gelegentlicher Node-Entwickler, zu finden in Web, Twitter und auf Dev.to) über die Prozesse und Tools rund um die Veröffentlichung von JavaScript-Paketen austauschen zu dürfen.

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


Unser Sponsor

Hier kannst du mehr über IONOS erfahren.

Schaunotizen

[00:02:45] Veröffentlichung von Libraries

Die Perspektiven eines kleinen Startups (Peter und Hans mit Warhol.io) und Tobias (MediaMarkt/Saturn) bzgl. Library-Entwicklung und -Veröffentlichung prallen aufeinander! Neben offensichtlichen Fragen wie Dependencies vs. Selbstschreiben (vgl. Revision 397 zu Preact) geht auch um das Handwerk des NPM-Paket-Veröffentlichens mit Semver (bevorzugt mit automatischen Versionsnummern via standard-version und/oder semantic-release) und dem publish-Kommando. Die kniffligen Entscheidungen im Library-Build-Prozess nehmen besonderes Gewicht ein: wie genau passen TypeScript, Babel, Rollup (vgl. Revision 405), Webpack und ähnliche Tools in den Prozess? Was bewirken die Felder main, browser, module und types in der package.json? Am Ende dürfen Verweise auf ein paar Alltags-Helfer nicht fehlen, allen voran das Link-Kommendo (gibt es für NPM wie auch für yarn), die Peer Dependencies, das Dedupe-Kommando und allgemeine Tools wie Prettier, ESLint, Travis, Circle CI, Greenkeeper und Dependabot.

Revision 412: Veröffentlichung von JS-Libraries

<p>Schepp und Stefan bekommen heute Verstärkung von <a href="https://twitter.com/lisi_linhart">Lisi Linhart</a>, ihres Zeichens Webentwicklerin und Dozentin an der <a href="https://www.fh-salzburg.ac.at/">FH Salzburg</a>, die uns einen ausführlichen und genauen Rundumschlag in Sachen Web Animation gibt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:27] Web Animations</dt>
<dd>Die Wege im Web zu animieren sind vielseitig. Wir beginnen unsere Reise bei den Einstiegsdrogen wie CSS Transitions und Animations, die zwar limitiert, aber doch für viele Dinge schön ausreichend sind. Den weiteren Weg gehen wir zur Web Animations API, sehr ählich zu CSS Animations, aber in JavaScript und deshalb über den property-Animationen erhaben. Wem das nicht ausreicht, kann sich in die weite Welt der SVG und Canvas Animationen trauen, und zahlreiche Tools wie Greensock und ähnliches ausprobieren. Zum Abschluß gehen wir in Richtung Animations-Tools, Export-Möglichkeiten, das CSS Houdini Animation Worklet und geben zahlreiche Resourcen und Erfahrungsberichte. Links gibt&#8217;s übrigens eine Menge, deswegen bitte schnell in die nächste Sektion um den zahlreichen Namen zu folgen!</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://www.youtube.com/watch?v=UUqb2K4irAY">Pratical Web Animation &#8211; Script&#8217;20</a></dt>
<dd>Lisis Vortrag auf der Script&#8217;19. Ein prima Überblick mit zahlreichen Beispielen</dd>
<dt><a href="https://awesome-web-animation.netlify.com/">Awesome Web Animation</a></dt>
<dd>Das Infoportal für alle, die animieren wollen. Bücher, Artikel, Tutorials, Tools</dd>
<dt><a href="https://keyframe.rs/">Keyframe.rs</a></dt>
<dd>Livestreams von Animationsexperten</dd>
<dt><a href="https://css-tricks.com/css-animations-vs-web-animations-api/">CSS Animations vs Web Animations API</a></dt>
<dd>Wann das eine, wann das andere?</dd>
<dt><a href="https://codepen.io/collection/ANaOod">GSAP Codepen Collection</a></dt>
<dd>Zahlreiche Pens zu dem auf Greensock basierten Animations-Plugin</dd>
<dt><a href="https://greensock.com/3">GSAP 3</a></dt>
<dd>Was kann GSAP 3 eigentlich?</dd>
<dt><a href="https://developers.google.com/web/updates/2018/10/animation-worklet">Houdini&#8217;s Animation Worklet</a></dt>
<dd>Detaillierte Beschreibung auf Googles Webdeveloper Info-Seiten</dd>
<dt><a href="https://github.com/tweenjs/tween.js/">Tween.js</a></dt>
<dd>Tweening in JavaScript</dd>
<dt><a href="http://fabricjs.com/">Fabric.js</a></dt>
<dd>Eine Zeichenbibliothek für Canvas</dd>
<dt><a href="http://rastating.github.io/pixel.js/">Pixel.js</a></dt>
<dd>Eine Game Engine für Canvas</dd>
<dt><a href="https://phaser.io/">Phaser</a></dt>
<dd>Noch ein Gaming Framework</dd>
<dt><a href="https://wicg.github.io/scroll-animations/">Scroll-linked Animation</a></dt>
<dd>Ein Proposal zur Animations-API die auf Scroll Offsets reagiert</dd>
<dt><a href="https://spiritapp.io/">Spirit</a></dt>
<dd>Ein Timeline-Tool für Web Animationen</dd>
<dt><a href="https://tumult.com/hype/">Tumult Hype</a></dt>
<dd>Noch ein Animations-Tool</dd>
<dt><a href="http://airbnb.io/lottie/#/">Lottie</a></dt>
<dd>After Effect Animationen exportieren, mobile und im Web verwenden!</dd>
<dt><a href="https://www.youtube.com/watch?v=q2o282JIr_E&amp;list=PLX7w4eZtqxCLQOmZ3I-I--cvRn_6Oogk_&amp;index=10">Uni Salzburg auf der OTS Conf</a></dt>
<dd>Lisis Fachhochschule gut präsentiert</dd>
<dt><a href="https://www.youtube.com/watch?v=1C5R47Ofv9o">Der Bauer</a></dt>
<dd>Vor 20 Jahren im Browser, jetzt als Artefakt auf YouTube</dd>
<dt><a href="https://www.meetup.com/de-DE/salzburgwebdev/events/261417069/">Barcamp: The next Wek</a></dt>
<dd>2x im Jahr ein fesches, web-affines Barcamp kurz vor dem wundervollen Salzburg</dd>
</dl>


Schepp und Stefan bekommen heute Verstärkung von Lisi Linhart, ihres Zeichens Webentwicklerin und Dozentin an der FH Salzburg, die uns einen ausführlichen und genauen Rundumschlag in Sachen Web Animation gibt. Schaunotizen [00:00:27] Web Animations Die Wege im Web zu animieren sind vielseitig. Wir beginnen unsere Reise bei den Einstiegsdrogen wie CSS Transitions und Animations, die [&#8230;]

Schepp und Stefan bekommen heute Verstärkung von Lisi Linhart, ihres Zeichens Webentwicklerin und Dozentin an der FH Salzburg, die uns einen ausführlichen und genauen Rundumschlag in Sachen Web Animation gibt.
Schaunotizen

[00:00:27] Web Animations[...]

Schepp und Stefan bekommen heute Verstärkung von Lisi Linhart, ihres Zeichens Webentwicklerin und Dozentin an der FH Salzburg, die uns einen ausführlichen und genauen Rundumschlag in Sachen Web Animation gibt.
Schaunotizen

[00:00:27] Web Animations
Die Wege im Web zu animieren sind vielseitig. Wir beginnen unsere Reise bei den Einstiegsdrogen wie CSS Transitions und Animations, die zwar limitiert, aber doch für viele Dinge schön ausreichend sind. Den weiteren Weg gehen wir zur Web Animations API, sehr ählich zu CSS Animations, aber in JavaScript und deshalb über den property-Animationen erhaben. Wem das nicht ausreicht, kann sich in die weite Welt der SVG und Canvas Animationen trauen, und zahlreiche Tools wie Greensock und ähnliches ausprobieren. Zum Abschluß gehen wir in Richtung Animations-Tools, Export-Möglichkeiten, das CSS Houdini Animation Worklet und geben zahlreiche Resourcen und Erfahrungsberichte. Links gibt’s übrigens eine Menge, deswegen bitte schnell in die nächste Sektion um den zahlreichen Namen zu folgen!

Links

Pratical Web Animation – Script’20
Lisis Vortrag auf der Script’19. Ein prima Überblick mit zahlreichen Beispielen
Awesome Web Animation
Das Infoportal für alle, die animieren wollen. Bücher, Artikel, Tutorials, Tools
Keyframe.rs
Livestreams von Animationsexperten
CSS Animations vs Web Animations API
Wann das eine, wann das andere?
GSAP Codepen Collection
Zahlreiche Pens zu dem auf Greensock basierten Animations-Plugin
GSAP 3
Was kann GSAP 3 eigentlich?
Houdini’s Animation Worklet
Detaillierte Beschreibung auf Googles Webdeveloper Info-Seiten
Tween.js
Tweening in JavaScript
Fabric.js
Eine Zeichenbibliothek für Canvas
Pixel.js
Eine Game Engine für Canvas
Phaser
Noch ein Gaming Framework
Scroll-linked Animation
Ein Proposal zur Animations-API die auf Scroll Offsets reagiert
Spirit
Ein Timeline-Tool für Web Animationen
Tumult Hype
Noch ein Animations-Tool
Lottie
After Effect Animationen exportieren, mobile und im Web verwenden!
Uni Salzburg auf der OTS Conf
Lisis Fachhochschule gut präsentiert
Der Bauer
Vor 20 Jahren im Browser, jetzt als Artefakt auf YouTube
Barcamp: The next Wek
2x im Jahr ein fesches, web-affines Barcamp kurz vor dem wundervollen Salzburg

Revision 411: Web Animations

<p><quote><br />
In München steht ein Softwarehaus &#8212; <em>Eins, Zwei, Browser!</em> <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
Die Bringen einen Browser raus &#8212; <em>Eins, Zwei, Browser</em> <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
Mit einer Suchmaschine dran &#8212; <em>Eins, Zwei, Browser</em> <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
Die alles kann, was Google kann<br />
Doch an die Daten kommt kein andrer ran<br />
Der Browser ist auch superschnell<br />
Nur wie ist das Geschäftsmodell? <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f37b.png" alt="🍻" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f3b6.png" alt="🎶" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <img src="https://s.w.org/images/core/emoji/13.0.0/72x72/1f3ba.png" alt="🎺" class="wp-smiley" style="height: 1em; max-height: 1em;" /><br />
</quote></p>
<p lang="en">For all our English listeners (and everybody else who is scratching their head due to their lack of knowledge in <a href="https://www.youtube.com/watch?v=zxHelCzB1QI">Bavarian folklore</a> &#8212; who could blame you?!): Welcome to the most recent revision of Working Draft, where <a href="https://twitter.com/chrmod">Krzysztof Modras</a> is telling us how to build your own browser based on Firefox. He also answers the most burning question: why does Europe need its own search engine.</p>
<h3 lang="en">Show Notes</h3>
<dl lang="en">
<dt>[00:01:00] <a href="https://cliqz.com/desktop">Cliqz</a></dt>
<dd>Cliqz is a browser with an integrated search engine. It shall deliver the same user experience as Google&#8217;s ecosystem, but with a strong focus on privacy. Cliqz is based on Firefox, and Krzysztof is telling us how to contribute to the Firefox project, how to write your own UI using web technologies, and what challenges you have to face. We also take a good deal to talk about privacy. Why a <a href="https://beta.cliqz.com/">European privacy-first search engine</a> matters and what <a href="https://whotracks.me/">trackers and third-party spyware can do to you</a>. We also referenced the <a href="https://apps.apple.com/de/app/cliqz-browser/id1065837334">iOS version of their browser</a> as well as their very thorough and interesting to read <a href="https://0x65.dev/">tech blog</a>. Enjoy!</dd>
</dl>


In München steht ein Softwarehaus &#8212; Eins, Zwei, Browser! 🎶 Die Bringen einen Browser raus &#8212; Eins, Zwei, Browser 🎶 Mit einer Suchmaschine dran &#8212; Eins, Zwei, Browser 🎶 Die alles kann, was Google kann Doch an die Daten kommt kein andrer ran Der Browser ist auch superschnell Nur wie ist das Geschäftsmodell? 🍻 🎶 [&#8230;]

In München steht ein Softwarehaus — Eins, Zwei, Browser! 
Die Bringen einen Browser raus — Eins, Zwei, Browser 
Mit einer Suchmaschine dran — Eins, Zwei, Browser 
Die alles kann, was Google kann
Doch an die Daten kommt kein andrer[...]

In München steht ein Softwarehaus — Eins, Zwei, Browser! 
Die Bringen einen Browser raus — Eins, Zwei, Browser 
Mit einer Suchmaschine dran — Eins, Zwei, Browser 
Die alles kann, was Google kann
Doch an die Daten kommt kein andrer ran
Der Browser ist auch superschnell
Nur wie ist das Geschäftsmodell?   

For all our English listeners (and everybody else who is scratching their head due to their lack of knowledge in Bavarian folklore — who could blame you?!): Welcome to the most recent revision of Working Draft, where Krzysztof Modras is telling us how to build your own browser based on Firefox. He also answers the most burning question: why does Europe need its own search engine.
Show Notes

[00:01:00] Cliqz
Cliqz is a browser with an integrated search engine. It shall deliver the same user experience as Google’s ecosystem, but with a strong focus on privacy. Cliqz is based on Firefox, and Krzysztof is telling us how to contribute to the Firefox project, how to write your own UI using web technologies, and what challenges you have to face. We also take a good deal to talk about privacy. Why a European privacy-first search engine matters and what trackers and third-party spyware can do to you. We also referenced the iOS version of their browser as well as their very thorough and interesting to read tech blog. Enjoy!

Revision 410: Cliqz Browser and Search Engine

<p>Leise rendert der Schnee bei dieser in der Vorweihnachtszeit aufgenommenen Revision&nbsp;&hellip; und damit er das auch halbwegs zügig macht, sprechen Schepp und Peter über zwei Features, die Webentwicklern bessere Kontrolle über das Browser-Rendering geben.</p>
<style>
a.message_link {
  float: right;
  margin: 1rem 2rem; width: 100%; width: 300px;
  border-bottom: 0;
}
</style>
<aside class="message">
<p><a href="https://aboutyou.com/bewerben" class="message_link"><img src="https://workingdraft.de/wp-content/uploads/2019/12/191213_AY_Tech_PRstatement.png" width="300" height="300" alt="" class="alignnone size-medium wp-image-4471" style="display: block; max-width: 100%;" /></a></p>
<h2>Unser Sponsor</h2>
<div class="message_content">
<a href="https://aboutyou.com/bewerben">ABOUT YOU</a> ist eines der am schnellsten wachsenden E-Commerce-Unternehmen in Europa mit Hauptsitz in Hamburg. Derzeit ist der Fashion Online Shop in zehn europäischen Märkten vertreten. Die Plattform verarbeitet täglich mehr als 300 Millionen API-Aufrufe und hat insgesamt 15 Millionen aktive Nutzer.<br />
Da das Unternehmen weiterhin schnell wächst, ist ABOUT YOU immer auf der Suche nach neuen, motivierten Talenten. Derzeit sind z.B. Full Stack Developer, Frontend Developer, Dart / Flutter Developer, Quality Assurance Engineer, Project Manager und andere  aufregende Führungspositionen frei.</p>
<p>Hört sich spannend an? Bewirb Dich jetzt unter <a href="https://aboutyou.com/bewerben">aboutyou.com/bewerben</a>.
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:40] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/contain">CSS Containment</a></dt>
<dd>
CSS Containment ist mittlerweile <a href="https://www.w3.org/TR/css-contain-1/">ein solider Webstandard</a> (fast jedenfalls) sowie <a href="https://caniuse.com/#feat=css-containment">vergleichsweise gut unterstützt</a> und <a href="https://blogs.igalia.com/mrego/2019/01/11/an-introduction-to-css-containment/">vielerorts gut erklärt</a>, aber eine Auffrischung lohnt sich. Schepp und Peter sprechen über die <code>contain</code>-Eigenschaft und ihre diversen Werte, <code>display:contents</code> (<a href="https://drafts.csswg.org/css-display/#box-generation">Draft</a>, <a href="https://caniuse.com/#feat=css-display-contents">CanIUse</a>) und <a href="http://maddesigns.de/css3-position-sticky-2279.html"><code>position:sticky</code></a></dd>
<dt>[00:25:12] <a href="https://github.com/WICG/display-locking">Display Locking</a></dt>
<dd>
Es gibt einen Entwurf für eine API, die viele Performance-Use-Cases für <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observers</a> abdeckt und dabei noch besser ist! Wir vergleichen das vorgeschlagene <code>rendersubtree</code>-Attribut mit <code>display: none</code> (und klassischem Lazy Loading) sowie <a href="https://www.chromium.org/blink/origin-trials">Origin Trials</a> mit Vendor Prefixes. Am Ende phantasieren wir ein wenig über einen Polyfill für <code>rendersubtree</code> und eine Layout-Performance-Test-Seite im Stile von JSPerf.</dd>
</dl>
<h3>[00:52:44] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.youtube.com/playlist?list=PLjnstNlepBvMqV4uPl3coTTTjPXgh-OMj">Videos der Performance.now()</a></dt>
<dd>Schepp war auf der jüngsten Installation der Web-Performance-Konferenz und empfiehlt zahlreiche Talks.</dd>
</dl>


Leise rendert der Schnee bei dieser in der Vorweihnachtszeit aufgenommenen Revision&#160;&#8230; und damit er das auch halbwegs zügig macht, sprechen Schepp und Peter über zwei Features, die Webentwicklern bessere Kontrolle über das Browser-Rendering geben. Unser Sponsor ABOUT YOU ist eines der am schnellsten wachsenden E-Commerce-Unternehmen in Europa mit Hauptsitz in Hamburg. Derzeit ist der Fashion [&#8230;]

Leise rendert der Schnee bei dieser in der Vorweihnachtszeit aufgenommenen Revision … und damit er das auch halbwegs zügig macht, sprechen Schepp und Peter über zwei Features, die Webentwicklern bessere Kontrolle über das Browser-Renderin[...]

Leise rendert der Schnee bei dieser in der Vorweihnachtszeit aufgenommenen Revision … und damit er das auch halbwegs zügig macht, sprechen Schepp und Peter über zwei Features, die Webentwicklern bessere Kontrolle über das Browser-Rendering geben.

a.message_link {
  float: right;
  margin: 1rem 2rem; width: 100%; width: 300px;
  border-bottom: 0;
}



Unser Sponsor

ABOUT YOU ist eines der am schnellsten wachsenden E-Commerce-Unternehmen in Europa mit Hauptsitz in Hamburg. Derzeit ist der Fashion Online Shop in zehn europäischen Märkten vertreten. Die Plattform verarbeitet täglich mehr als 300 Millionen API-Aufrufe und hat insgesamt 15 Millionen aktive Nutzer.
Da das Unternehmen weiterhin schnell wächst, ist ABOUT YOU immer auf der Suche nach neuen, motivierten Talenten. Derzeit sind z.B. Full Stack Developer, Frontend Developer, Dart / Flutter Developer, Quality Assurance Engineer, Project Manager und andere  aufregende Führungspositionen frei.
Hört sich spannend an? Bewirb Dich jetzt unter aboutyou.com/bewerben.


Schaunotizen

[00:01:40] CSS Containment

CSS Containment ist mittlerweile ein solider Webstandard (fast jedenfalls) sowie vergleichsweise gut unterstützt und vielerorts gut erklärt, aber eine Auffrischung lohnt sich. Schepp und Peter sprechen über die contain-Eigenschaft und ihre diversen Werte, display:contents (Draft, CanIUse) und position:sticky
[00:25:12] Display Locking

Es gibt einen Entwurf für eine API, die viele Performance-Use-Cases für Intersection Observers abdeckt und dabei noch besser ist! Wir vergleichen das vorgeschlagene rendersubtree-Attribut mit display: none (und klassischem Lazy Loading) sowie Origin Trials mit Vendor Prefixes. Am Ende phantasieren wir ein wenig über einen Polyfill für rendersubtree und eine Layout-Performance-Test-Seite im Stile von JSPerf.

[00:52:44] Keine Schaunotizen

Videos der Performance.now()
Schepp war auf der jüngsten Installation der Web-Performance-Konferenz und empfiehlt zahlreiche Talks.

Revision 409: Style Containment und Display Lock API

<p>Hans und Peter lassen sich von <strong>Jessica Jordan</strong> (<a href="https://jessica-jordan.github.io/">Web</a>, <a href="https://twitter.com/jjordan_dev">Twitter</a>), ihres Zeichens Software-Engineer bei <a href="https://simplabs.com/">simplabs</a> und Autorin für <a href="https://the-emberjs-times.ongoodbits.com/">The Ember Times</a> alles zum unterschätzen JavaScript-Framework <a href="https://emberjs.com/"><b>Ember.js</b></a> erzählen!</p>
<style>
.ionos a.message_link {
  margin: 0 0 1rem; width: 100%;
  border-bottom: 0;
  display: block;
}
.ionos a.message_link img { 
  margin: 0 auto;
}
</style>
<aside class="message ionos">
<h2>Unser Sponsor</h2>
<p><a href="https://www.ionos.de/workingdraft" class="message_link"><img src="https://workingdraft.de/wp-content/uploads/2020/01/ionos.png" alt="" class="alignnone size-medium wp-image-3774" style="display: block; max-width: 100%;" /></a></p>
<div class="message_content"><a href="https://www.ionos.de/workingdraft">Hier kannst du mehr über IONOS erfahren</a>.</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] Ember.js</dt>
<dd>Wir lernen wirklich <em>alles</em> über Ember, das sich als ein Framework für komplexe Web Apps beschreiben lässt, bei dem vieles Out of the Box mitgeliefert wird. Von den Anfängen (<a href="https://www.youtube.com/watch?v=8JqLAEbkwPs">Talk zu Embers jüngerer Geschichte von Katie Gengler</a>) mit <a href="https://www.tilde.io/">Tilde</a>, <a href="https://yehudakatz.com/">Yehuda Katz</a> und <a href="https://tomdale.net/">Tom Dale</a> bis hin zur jüngsten <a href="https://emberjs.com/editions/octane/">Octane Editon</a> des Framworks lassen wir nichts aus. Es geht um Entwicklung, Community, <a href="https://emberjs.com/learn">Dokumentation</a>, <a href="https://github.com/ember-learn">das Ember Tearning Team</a>,  <a href="https://the-emberjs-times.ongoodbits.com/">The Ember Times</a>, Core-Features und Third-Party-Addons (wie <a href="http://ember-concurrency.com/">ember-concurrency</a>, <a href="https://www.ember-cli-mirage.com/">EmberCLI Mirage</a> und <a href="https://github.com/mike-north/ember-cli-materialize">ember-cli-materialize</a>). Außerdem geht es natürlich um technische Grundkonzepte wie die Struktur einer Ember-App, Routes, die Umsetzung des MVC-Konzepts, <a href="https://github.com/emberjs/data">Ember Data</a>, Scaffolding, Embers Template-Sprache <a href="https://handlebarsjs.com/">Handlebars</a> (speziell <a href="https://github.com/helpers/handlebars-helpers">Helpers</a> und die neue <a href="https://github.com/emberjs/rfcs/blob/master/text/0311-angle-bracket-invocation.md">Angle Bracket Syntax</a> nebst <a href="https://github.com/rwjblue/ember-angle-bracket-invocation-polyfill">Polyfill</a>) <a href="https://glimmerjs.com/">Glimmer.js</a> und <a href="https://ember-cli-typescript.com/">TypeScript-Support</a>. Am Ende dürfen die Veranstaltungshinweise auf die <a href="https://emberconf.com/">EmberConf</a>, das <a href="https://emberfest.eu/">EmberFest</a> und das <a href="https://www.meetup.com/de-DE/Ember-js-Berlin/">Ember-Meetup Berlin</a> nicht fehlen.</dd>
</dl>


Hans und Peter lassen sich von Jessica Jordan (Web, Twitter), ihres Zeichens Software-Engineer bei simplabs und Autorin für The Ember Times alles zum unterschätzen JavaScript-Framework Ember.js erzählen! Unser Sponsor Hier kannst du mehr über IONOS erfahren. Schaunotizen [00:00:00] Ember.js Wir lernen wirklich alles über Ember, das sich als ein Framework für komplexe Web Apps beschreiben [&#8230;]

Hans und Peter lassen sich von Jessica Jordan (Web, Twitter), ihres Zeichens Software-Engineer bei simplabs und Autorin für The Ember Times alles zum unterschätzen JavaScript-Framework Ember.js erzählen!

.ionos a.message_link {
  margin: 0 0 1rem; [...]

Hans und Peter lassen sich von Jessica Jordan (Web, Twitter), ihres Zeichens Software-Engineer bei simplabs und Autorin für The Ember Times alles zum unterschätzen JavaScript-Framework Ember.js erzählen!

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


Unser Sponsor

Hier kannst du mehr über IONOS erfahren.

Schaunotizen

[00:00:00] Ember.js
Wir lernen wirklich alles über Ember, das sich als ein Framework für komplexe Web Apps beschreiben lässt, bei dem vieles Out of the Box mitgeliefert wird. Von den Anfängen (Talk zu Embers jüngerer Geschichte von Katie Gengler) mit Tilde, Yehuda Katz und Tom Dale bis hin zur jüngsten Octane Editon des Framworks lassen wir nichts aus. Es geht um Entwicklung, Community, Dokumentation, das Ember Tearning Team,  The Ember Times, Core-Features und Third-Party-Addons (wie ember-concurrency, EmberCLI Mirage und ember-cli-materialize). Außerdem geht es natürlich um technische Grundkonzepte wie die Struktur einer Ember-App, Routes, die Umsetzung des MVC-Konzepts, Ember Data, Scaffolding, Embers Template-Sprache Handlebars (speziell Helpers und die neue Angle Bracket Syntax nebst Polyfill) Glimmer.js und TypeScript-Support. Am Ende dürfen die Veranstaltungshinweise auf die EmberConf, das EmberFest und das Ember-Meetup Berlin nicht fehlen.

Revision 408: Ember.js

<p>Nachdem alle Co-Hosts der Reihe nach, aufgrund von verschiedenen dringenden Gründen, ausfielen, interviewte Kahlil im Alleingang <a href="https://vannsl.io/">Vanessa Böhnert</a> zum Thema Micro Frontends.</p>
<style>
a.message_link {
  float: right;
  margin: 1rem 2rem; width: 100%; width: 400px;
  border-bottom: 0;
}
</style>
<aside class="message">
<p><a href="https://www.storyblok.com?ref=workingdraft.de" class="message_link"><img src="https://workingdraft.de/wp-content/uploads/2019/07/storyblok-colored.png" alt="" class="alignnone size-medium wp-image-3774" style="display: block; max-width: 100%;" /></a></p>
<h2>Unser Sponsor</h2>
<div class="message_content">
Storyblok is a Headless Content Management System that provides developers with all the flexibility they need to build reliable and fast websites whilst giving content creators with no coding skills the ability to edit content independently of the developer. Thanks to the headless approach your content can not only be used for one website, which is the case if you use a monolithic CMS like WordPress. Storyblok empowers you to use your content on iOS and Android apps, as well as any other platform of choice (IoT, smartwatch, AR/VR) through Application Programming Interfaces (“APIs”).</p>
<p>You can read more about <a href="https://www.storyblok.com/?ref=workingdraft.de">Storyblok</a> and <a href="https://www.storyblok.com/free?ref=workingdraft.de">use their free plan</a>, reach them on <a href="https://www.twitter.com/storyblok">Twitter</a> or in their live chat.
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:06] <a href="https://www.mosaic9.org/">Project Mosaic, aka Mosaic 9</a> &#038; Micro-Frontends</dt>
<dd>Vanessa erzählt uns kurz was sie mit Mosaic 9 zu tun hat. Danach geht es erstmal darum was Micro-Frontends überhaupt sind, in welchem Fall man diese einsetzen möchte und wie man das machen kann. Ein Mosaic 9 Crash-Kurs kommt dabei natürlich nicht zu kurz. Vanessa erklärt uns, wie sie die verschiedenen Software Projekte aus denen Mosaic 9 besteht, selber bei der Arbeit einsetzt.</dd>
</dl>


Nachdem alle Co-Hosts der Reihe nach, aufgrund von verschiedenen dringenden Gründen, ausfielen, interviewte Kahlil im Alleingang Vanessa Böhnert zum Thema Micro Frontends. Unser Sponsor Storyblok is a Headless Content Management System that provides developers with all the flexibility they need to build reliable and fast websites whilst giving content creators with no coding skills the [&#8230;]

Nachdem alle Co-Hosts der Reihe nach, aufgrund von verschiedenen dringenden Gründen, ausfielen, interviewte Kahlil im Alleingang Vanessa Böhnert zum Thema Micro Frontends.

a.message_link {
  float: right;
  margin: 1rem 2rem; width: 100%; width: 40[...]

Nachdem alle Co-Hosts der Reihe nach, aufgrund von verschiedenen dringenden Gründen, ausfielen, interviewte Kahlil im Alleingang Vanessa Böhnert zum Thema Micro Frontends.

a.message_link {
  float: right;
  margin: 1rem 2rem; width: 100%; width: 400px;
  border-bottom: 0;
}



Unser Sponsor

Storyblok is a Headless Content Management System that provides developers with all the flexibility they need to build reliable and fast websites whilst giving content creators with no coding skills the ability to edit content independently of the developer. Thanks to the headless approach your content can not only be used for one website, which is the case if you use a monolithic CMS like WordPress. Storyblok empowers you to use your content on iOS and Android apps, as well as any other platform of choice (IoT, smartwatch, AR/VR) through Application Programming Interfaces (“APIs”).
You can read more about Storyblok and use their free plan, reach them on Twitter or in their live chat.


Schaunotizen

[00:03:06] Project Mosaic, aka Mosaic 9 & Micro-Frontends
Vanessa erzählt uns kurz was sie mit Mosaic 9 zu tun hat. Danach geht es erstmal darum was Micro-Frontends überhaupt sind, in welchem Fall man diese einsetzen möchte und wie man das machen kann. Ein Mosaic 9 Crash-Kurs kommt dabei natürlich nicht zu kurz. Vanessa erklärt uns, wie sie die verschiedenen Software Projekte aus denen Mosaic 9 besteht, selber bei der Arbeit einsetzt.

Revision 407: Micro Frontends mit Project Mosaic

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

PODLIST

Working Draft

Eine neue Revision eures Lieblingspodcasts™

Neue Episoden

Revision 418: TypeScript ist doof!

Working Draft

Revision 417: Das Ende einer Ära

Working Draft

Revision 416: TypeScript 3.8

Working Draft

Revision 414: Warhol

Working Draft

Revision 415: Werbung und Tracker domptieren

Working Draft

Revision 413: Svelte

Working Draft

Revision 412: Veröffentlichung von JS-Libraries

Working Draft

Revision 411: Web Animations

Working Draft

Revision 410: Cliqz Browser and Search Engine

Working Draft

Revision 409: Style Containment und Display Lock API

Working Draft

Revision 408: Ember.js

Working Draft

Revision 407: Micro Frontends mit Project Mosaic

Working Draft