<p>Hans, Vanessa, Peter und Schepp trafen sich unter dem Vorwand, die „Neuerungen“ von Safari 15 zu diskutieren, kamen dabei aber über Umwege auch auf Browser Extensions sowie das Pro und Contra von Bookmarks zu sprechen</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:01] <a href="https://developer.apple.com/documentation/safari-release-notes/safari-15-beta-release-notes">Safari 15</a></dt>
<dd>Die Jünger des heiligen Steve haben anlässlich <a href="https://developer.apple.com/wwdc21/">der letzten WWDC</a> (<a href="https://developer.apple.com/videos/play/wwdc2021/10029/">Video</a>) eine neue <a href="https://developer.apple.com/documentation/safari-release-notes/safari-15-beta-release-notes">neue Safari-Version</a> in Petto. Enthalten sind null PWA-Features, diverse UI-Updates (v.A. Tab Groups), Unterstützug für <code>&lt;meta name="theme-color"&gt;</code> (was wir hinsichtlich der <a href="https://caniuse.com/meta-theme-color">Browserunterstützung</a> und des Dark-Pattern-Patenzials gründlich besprechen) und <code>aspect-ratio</code> für Iframes – <a href="https://blog.theodo.com/2018/01/responsive-iframes-css-trick/">ein Hack weniger!</a></dd>
<dt>[00:00:00] Bookmarks und Browser-Synchronisierung</dt>
<dd>In einem kurzen Exkurs predigt Hans mit Verve die Vorzüge vereinheitlichter Browser-Synchronisierung, speziell für Bookmarks. Peter vetritt halbherzig das Team Hirnsieb. Als Tools für Bookmarking und Wissens-Orga empfehlen wir <strong>Chrome</strong> und seine Einbauten (Hans) <a>Pocket</a> (Schepp) <a href="https://apps.apple.com/de/app/abyss-read-later/id1507396839">Abyss</a> (Vanessa) und <a href="https://obsidian.md/">Obsidian</a> (Peter).</dd>
<dt>[00:00:00] Browser-Extensions und Webseiten-Eingriffe</dt>
<dd>Außerdem neu in Safari: Unterstützung für <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">Web Extensions</a>, (fast) ganz wie in Chrome und Firefox! Anlässlich dessen berichtet Schepp von seinen Erfahrungen mit Chrome-Extensions-Entwicklung und schimpft besonders auf die extrem nutzlose <a href="https://developer.chrome.com/docs/extensions/">Dokumentation</a>. Über Extensions kommen wir zum Über-Thema „Elemente, die in Webseiten eingreifen“ (Extensions wie <a href="https://www.grammarly.com/">Grammarly</a>, <a href="https://lock.cmpxchg8b.com/passmgrs.html">PW-Manager</a>), die zusammen mit der allgemeinen Komplexitätszunahme (Responsive Design, Dark/Light Mode, <a href="https://medium.engineering/the-curious-case-of-disappearing-polish-s-fa398313d4df">bizarren Bugs auf allen Ebenen</a> Entwickler:innen in den Wahnsinn treiben. Kann man dem Wahnsinn mit Tools wie <a href="https://sentry.io/welcome/">Sentry</a>, <a href="https://sizzy.co/">Sizzy</a> und <a href="https://polypane.app/">Polypane</a> begegnen, oder sollten wir alle doch lieber was mit Holz machen? Hans hat die ultimative Antwort auf diese Frage …</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/Schepp/dom-treemap-devtools-extension">DOM Treemap</a></dt>
<dd>Schepps in der Revision angesprochene Browser-Erweiterung, mit der man in die Tiefen seines DOM Baums auf der Suche nach den verloren DOM-Knoten hinabsteigen kann. Gibt es für <a href="https://chrome.google.com/webstore/detail/dom-treemap/albnoggfgnooeefdjpncieecohhblonh">Chrome</a> und für <a href="https://addons.mozilla.org/en-US/firefox/addon/dom-treemap/">Firefox</a>.</dd>
</dl>


Hans, Vanessa, Peter und Schepp trafen sich unter dem Vorwand, die „Neuerungen“
von Safari 15 zu diskutieren, kamen dabei aber über Umwege auch auf Browser
Extensions sowie das Pro und Contra von Book…

Working Draft

Hans, Vanessa, Peter und Schepp trafen sich unter dem Vorwand, die „Neuerungen“
von Safari 15 zu diskutieren, kamen dabei aber über Umwege auch auf Browser
Extensions sowie das Pro und Contra von Bookmarks zu sprechen


SCHAUNOTIZEN

[00:01:01] SAFARI 15

Die Jünger des heiligen Steve haben anlässlich der letzten WWDC (Video) eine
neue neue Safari-Version in Petto. Enthalten sind null PWA-Features, diverse
UI-Updates (v.A. Tab Groups), Unterstützug für <meta name="theme-color"> (was
wir hinsichtlich der Browserunterstützung und des Dark-Pattern-Patenzials
gründlich besprechen) und aspect-ratio für Iframes – ein Hack weniger!

[00:00:00] BOOKMARKS UND BROWSER-SYNCHRONISIERUNG

In einem kurzen Exkurs predigt Hans mit Verve die Vorzüge vereinheitlichter
Browser-Synchronisierung, speziell für Bookmarks. Peter vetritt halbherzig das
Team Hirnsieb. Als Tools für Bookmarking und Wissens-Orga empfehlen wir Chrome
und seine Einbauten (Hans) Pocket (Schepp) Abyss (Vanessa) und Obsidian (Peter).

[00:00:00] BROWSER-EXTENSIONS UND WEBSEITEN-EINGRIFFE

Außerdem neu in Safari: Unterstützung für Web Extensions, (fast) ganz wie in
Chrome und Firefox! Anlässlich dessen berichtet Schepp von seinen Erfahrungen
mit Chrome-Extensions-Entwicklung und schimpft besonders auf die extrem nutzlose
Dokumentation. Über Extensions kommen wir zum Über-Thema „Elemente, die in
Webseiten eingreifen“ (Extensions wie Grammarly, PW-Manager), die zusammen mit
der allgemeinen Komplexitätszunahme (Responsive Design, Dark/Light Mode,
bizarren Bugs auf allen Ebenen Entwickler:innen in den Wahnsinn treiben. Kann
man dem Wahnsinn mit Tools wie Sentry, Sizzy und Polypane begegnen, oder sollten
wir alle doch lieber was mit Holz machen? Hans hat die ultimative Antwort auf
diese Frage …


KEINE SCHAUNOTIZEN

DOM TREEMAP

Schepps in der Revision angesprochene Browser-Erweiterung, mit der man in die
Tiefen seines DOM Baums auf der Suche nach den verloren DOM-Knoten hinabsteigen
kann. Gibt es für Chrome und für Firefox.

Revision 483: Safari 15 und Browser-Extensions aller Art

<p>Nachdem es schon wieder <a href="https://workingdraft.de/376/">zweieinhalb Jahre her ist</a>, dass wir unseren letzten Blick auf Angular geworfen haben, luden wir uns <a href="https://martinakraus.github.io/">Martina Kraus</a> ein, um uns wieder auf Stand zu bringen.</p>
<p>Martina twittert als <a href="https://twitter.com/martinakraus11">@martinakraus11</a>, ist selbstständige Beraterin, Trainerin und Sprecherin zum Thema Angular, und das nicht erst seit gestern. Zudem organisiert sie <a href="https://www.meetup.com/angular-heidelberg/">zahlreichen</a> <a href="https://www.meetup.com/RheinNeckarJS/">Meetups</a> in der Heidelberger Region. Aufgrund dieser zahlreichen Aktivitäten ist sie mittlerweile zur Google Developer Expert (GDE) für Angular avanciert und tauscht sich dementsprechend viel mit dem Angular Core-Team zu Wünschen aus der Community und neuen Entwicklungen des Frameworks aus.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] <a href="#">Angular im Jahr 2021</a></dt>
<dd>Die aktuell neuste Version des Frameworks ist die Version 12, die mittlerweile voll auf den Compiler &#8222;Ivy&#8220; setzt, welcher in unserer letzten Folge vor zweieinhalb Jahren noch Zukunftsmusik war. Einer der ganz großen Vorteile von Ivy ist, dass der erzeugte Code im Gegensatz zu früher getreeshaked werden kann, was Angular-Anwendungen, die nicht von Angular bereitgestellten Features nutzen, deutlich kleiner werden lässt.</p>
<p>Außerdem beschreitet das Framework einen interessanten neuen Pfad, nämlich indem es zunehmend auf TypeScript zugunsten von ES 2017 verzichtet. Das kommt insofern unerwartet, als dass Angular bei seiner Einführung 2016 als erstes JavaScript-Framework überhaupt voll auf TypeScript gesetzt hat und die anderen beiden großen Frameworks jetzt erst bei Angulars Level an TypeScript-Unterstützung angekommen sind. Auf Typinferenz muss dabei niemand verzichten, denn Angular 12 setzt auf einen neuen Modus namens &#8222;Strict&#8220;, der von der Autorin erwartet, dass alle Variablen, die an einem Template hängen, initialisiert werden müssen. Und dadurch ist dann von Anfang an klar, um was für einen Datentyp es sich handelt. Wir sind gespannt, ob andere Frameworks hier nachziehen werden.</p>
<p>Nach wie vor bereitet der Umstieg vom alten Compiler auf Ivy allerdings hier und da noch Probleme, weil nämlich Angular-Libraries für beide Compiler adaptiert werden müssen. Hier gibt es aber Schützenhilfe von Tools wie dem Angular Compatibility Compiler (ngcc) &#8211; und auch Martina <a href="https://www.youtube.com/watch?v=33CNQD8qJbw">hat dazu dankenswerterweise einen Talk auf Lager</a>. Zudem hat Ivy noch ein paar eher halb-offizielle Features wie Higher Order Components oder Custom Change Detection, die in Zukunft ausgereiftere Interfaces benötigen. Auch dazu <a href="https://www.youtube.com/watch?v=slm77hiemM0">hat Martina einen Talk parat</a>!</p>
<p>Eine weitere wichtige Neuerung von Angular 12 ist dass es mit Webpack 5 daherkommt. Dieses erleichtert vor allem das Orchestrieren von in Angular gebauten Micro-Frontends, was so vormals nur <a href="https://github.com/manfredsteyer/angular-microfrontend">mit der Microfrontend-Library von Manfred Steyer</a> möglich war (siehe dazu auch den <a href="https://www.angulararchitects.io/en/konferenzen/the-micro-frontend-revolution-module-federation-with-angular/">Talk vom ihm</a>).</p>
<p>Wer nach dem Hören unserer Folge Lust auf Angular bekommen hat, dem empfiehlt Martina den Einstieg über das Angular-eigene Einsteiger-Toturial &#8222;<a href="https://angular.io/tutorial/toh-pt1">Tour of Heroes</a>&#8222;, oder aber <a href="https://pro.academind.com/p/angular-essentials-angular-2-with-typescript">die Tutorials von Maximilian Schwarzmüller, aka Academind</a>.</p>
<p>Geht es hingegen darum, Feedback los zu werden, dann schickt eine Mail an devrel@angular.io, oder wendet Euch an die DevRel <a href="https://twitter.com/twerske">Emma Twersky</a>, oder geht den Weg über eine*n GDE wie Martina.</dd>
</dl>


Nachdem es schon wieder zweieinhalb Jahre her ist, dass wir unseren letzten
Blick auf Angular geworfen haben, luden wir uns Martina Kraus ein, um uns wieder
auf Stand zu bringen.

Martina twittert als…

Nachdem es schon wieder zweieinhalb Jahre her ist, dass wir unseren letzten
Blick auf Angular geworfen haben, luden wir uns Martina Kraus ein, um uns wieder
auf Stand zu bringen.

Martina twittert als @martinakraus11, ist selbstständige Beraterin, Trainerin
und Sprecherin zum Thema Angular, und das nicht erst seit gestern. Zudem
organisiert sie zahlreichen Meetups in der Heidelberger Region. Aufgrund dieser
zahlreichen Aktivitäten ist sie mittlerweile zur Google Developer Expert (GDE)
für Angular avanciert und tauscht sich dementsprechend viel mit dem Angular
Core-Team zu Wünschen aus der Community und neuen Entwicklungen des Frameworks
aus.


SCHAUNOTIZEN

[00:01:00] ANGULAR IM JAHR 2021

Die aktuell neuste Version des Frameworks ist die Version 12, die mittlerweile
voll auf den Compiler „Ivy“ setzt, welcher in unserer letzten Folge vor
zweieinhalb Jahren noch Zukunftsmusik war. Einer der ganz großen Vorteile von
Ivy ist, dass der erzeugte Code im Gegensatz zu früher getreeshaked werden kann,
was Angular-Anwendungen, die nicht von Angular bereitgestellten Features nutzen,
deutlich kleiner werden lässt.



Außerdem beschreitet das Framework einen interessanten neuen Pfad, nämlich indem
es zunehmend auf TypeScript zugunsten von ES 2017 verzichtet. Das kommt insofern
unerwartet, als dass Angular bei seiner Einführung 2016 als erstes
JavaScript-Framework überhaupt voll auf TypeScript gesetzt hat und die anderen
beiden großen Frameworks jetzt erst bei Angulars Level an
TypeScript-Unterstützung angekommen sind. Auf Typinferenz muss dabei niemand
verzichten, denn Angular 12 setzt auf einen neuen Modus namens „Strict“, der von
der Autorin erwartet, dass alle Variablen, die an einem Template hängen,
initialisiert werden müssen. Und dadurch ist dann von Anfang an klar, um was für
einen Datentyp es sich handelt. Wir sind gespannt, ob andere Frameworks hier
nachziehen werden.

Nach wie vor bereitet der Umstieg vom alten Compiler auf Ivy allerdings hier und
da noch Probleme, weil nämlich Angular-Libraries für beide Compiler adaptiert
werden müssen. Hier gibt es aber Schützenhilfe von Tools wie dem Angular
Compatibility Compiler (ngcc) – und auch Martina hat dazu dankenswerterweise
einen Talk auf Lager. Zudem hat Ivy noch ein paar eher halb-offizielle Features
wie Higher Order Components oder Custom Change Detection, die in Zukunft
ausgereiftere Interfaces benötigen. Auch dazu hat Martina einen Talk parat!

Eine weitere wichtige Neuerung von Angular 12 ist dass es mit Webpack 5
daherkommt. Dieses erleichtert vor allem das Orchestrieren von in Angular
gebauten Micro-Frontends, was so vormals nur mit der Microfrontend-Library von
Manfred Steyer möglich war (siehe dazu auch den Talk vom ihm).

Wer nach dem Hören unserer Folge Lust auf Angular bekommen hat, dem empfiehlt
Martina den Einstieg über das Angular-eigene Einsteiger-Toturial „Tour of
Heroes„, oder aber die Tutorials von Maximilian Schwarzmüller, aka Academind.

Geht es hingegen darum, Feedback los zu werden, dann schickt eine Mail an
devrel@angular.io, oder wendet Euch an die DevRel Emma Twersky, oder geht den
Weg über eine*n GDE wie Martina.

Revision 482: Angular im Jahr 2021

<p>Rod und Peter hatten <a href="https://twitter.com/uhligtobias">Tobias Uhlig</a> zu Gast, der als federführende Kraft hinter dem Framework <a href="https://github.com/neomjs/neo">neo.mjs</a> einiges zu Multithreading in Webapps zu erzählen weiß.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] Worker, Tiere, Sensationen!</dt>
<dd>Nach den üblichen Vergleichen von Tobias&#8216; neo.mjs mit Angular und co geht es umgehend an&#8217;s Eingemachte. Wie quatschen nicht nur über <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Dedicated Worker</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker">Shared Worker</a> und <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service Worker</a> (nebst <a href="https://github.com/ampproject/worker-dom">Worker DOM</a>), sondern auch über <a href="https://developer.mozilla.org/en-US/docs/Web/API/MessageChannel">Message Channels</a> bzw. Message Ports (und ihre <a href="https://developer.mozilla.org/en-US/docs/Web/API/Transferable">Transferierbarkeit</a>) und Asynchronität im Allgemeinen. Anhand von neo.mjs kauen wir Fragen von Remote Method Access, handgedengeltem VDOM und abgestuftem TypeScript-Support in modernen Tools durch. Auch über die im Jahre 2021 ggf. noch verbleibende Relevanz von Drag &amp; Drop und Multi-Window-Apps denken wir laut nach und verweisen gegen Ende auf Tobias&#8216; <a href="https://neomjs.github.io/pages/node_modules/neo.mjs/dist/production/apps/covid/index.html">Covid-Dashboard</a> als eine neo.mjs-Demo.</dd>
</dl>


Rod und Peter hatten Tobias Uhlig zu Gast, der als federführende Kraft hinter
dem Framework neo.mjs einiges zu Multithreading in Webapps zu erzählen weiß.


SCHAUNOTIZEN

[00:01:00] WORKER, TIERE, SEN…

Rod und Peter hatten Tobias Uhlig zu Gast, der als federführende Kraft hinter
dem Framework neo.mjs einiges zu Multithreading in Webapps zu erzählen weiß.


SCHAUNOTIZEN

[00:01:00] WORKER, TIERE, SENSATIONEN!

Nach den üblichen Vergleichen von Tobias‘ neo.mjs mit Angular und co geht es
umgehend an’s Eingemachte. Wie quatschen nicht nur über Dedicated Worker, Shared
Worker und Service Worker (nebst Worker DOM), sondern auch über Message Channels
bzw. Message Ports (und ihre Transferierbarkeit) und Asynchronität im
Allgemeinen. Anhand von neo.mjs kauen wir Fragen von Remote Method Access,
handgedengeltem VDOM und abgestuftem TypeScript-Support in modernen Tools durch.
Auch über die im Jahre 2021 ggf. noch verbleibende Relevanz von Drag & Drop und
Multi-Window-Apps denken wir laut nach und verweisen gegen Ende auf Tobias‘
Covid-Dashboard als eine neo.mjs-Demo.

Revision 481: Multithreading, Web Worker, Shared Worker und
Multi-Screen-Applications mit Tobias Uhlig

<p>Fullstack-Entwicklerin, CSS-Feinschmeckerin und Webstandards-Liebhaberin <strong>Joy Heron</strong> (<a href="https://twitter.com/iamjoyheron">Twitter</a>, <a href="https://joyheron.com/">Webseite</a>, <a href="https://www.case-podcast.org/">Case-Podcast</a>) fand sich im virtuellen Workingdraft-Studio ein, um mit Schepp, Peter und Vanessa über Web Components zu fachsimpeln.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://www.netidee.at/?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 400px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2020/06/netidee-banner-1.jpg" alt="" /></a></p>
<div class="message_content">netidee ist die große Internet Förderaktion in Österreich. Bis zu 1. Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. <a href="https://www.netidee.at/?ref=workingdraft.de">Hier kannst du mehr über netidee erfahren</a>.</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:36] Web Components und Web Component Design</dt>
<dd>Wir beginnen damit, die Unterschiede zwischen Web Components und Framework-Komponenten herauszuarbeiten und bequatschen dabei mit <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">Custom Elements</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">Shadow DOM</a> und dem <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template">template-Element</a> die wesentlichen Bestandteile von Web Components. Wir besprechen Accessibility-Fragen, wägen HTML-Seiten gegen SPAs ab (relevant: <a href="https://www.youtube.com/watch?v=V8oTJ8OZ5S0">Removing client-side React.js (but keeping it on the server) resulted in a 50% performance improvement on our landing page</a>) und besprechen das Für und Wider von Polyfills für Web Components. Ergebnis: gutes Web-Component-Design braucht keine Polyfills (aber wenn, dann sollte es ein <a href="https://github.com/ungap/custom-elements">leichtgewichtiger Polyfill</a> sein). Außerdem kommen zukünftige (<a href="https://web.dev/declarative-shadow-dom/">Deklaratives Shadow DOM</a>) und verflossene (<a href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports">HTML Imports</a>) APIs rund um Web Components zu Sprache. Über die Frage des Einsatzspektrums und denkbarer Alternativen zu sowohl Web Components als auch fetten Frameworks (<a href="https://github.com/WebReflection/hyperHTML">hyperHTML</a>, <a href="https://github.com/WebReflection/uland">µland</a>) kommen wir zu der Frage, welche Wert das Wissen um Webstandards-Basics (mit <a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault">Event.preventDefault()</a> als Beispiel) heutzutage überhaupt hat. Gegen Ende verweisen wir noch auf <a href="https://developer.mozilla.org/de/docs/Web/Web_Components">die MDN-Doku zu Web Components</a>, Joy&#8217;s Talk <a href="https://www.youtube.com/watch?v=CGEk-W8p13M">Web Components: Maintaining and Reusing your Frontend</a>, Brad Frost&#8217;s Artikel zu <a href="https://bradfrost.com/blog/post/front-of-the-front-end-and-back-of-the-front-end-web-development/">front-of-the-front-end and back-of-the-front-end web development</a> und Joy&#8217;s Kompendium <a href="https://responsibleweb.app/">Responsible Web Applications</a>. Zudem stellt Peter für frühstens 2027 einen Blogpost über OOP-DOM mit Elementen in Aussicht.</dd>
</dl>


Fullstack-Entwicklerin, CSS-Feinschmeckerin und Webstandards-Liebhaberin Joy
Heron (Twitter, Webseite, Case-Podcast) fand sich im virtuellen
Workingdraft-Studio ein, um mit Schepp, Peter und Vanessa ü…

Fullstack-Entwicklerin, CSS-Feinschmeckerin und Webstandards-Liebhaberin Joy
Heron (Twitter, Webseite, Case-Podcast) fand sich im virtuellen
Workingdraft-Studio ein, um mit Schepp, Peter und Vanessa über Web Components zu
fachsimpeln.


UNSER SPONSOR



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


SCHAUNOTIZEN

[00:01:36] WEB COMPONENTS UND WEB COMPONENT DESIGN

Wir beginnen damit, die Unterschiede zwischen Web Components und
Framework-Komponenten herauszuarbeiten und bequatschen dabei mit Custom
Elements, Shadow DOM und dem template-Element die wesentlichen Bestandteile von
Web Components. Wir besprechen Accessibility-Fragen, wägen HTML-Seiten gegen
SPAs ab (relevant: Removing client-side React.js (but keeping it on the server)
resulted in a 50% performance improvement on our landing page) und besprechen
das Für und Wider von Polyfills für Web Components. Ergebnis: gutes
Web-Component-Design braucht keine Polyfills (aber wenn, dann sollte es ein
leichtgewichtiger Polyfill sein). Außerdem kommen zukünftige (Deklaratives
Shadow DOM) und verflossene (HTML Imports) APIs rund um Web Components zu
Sprache. Über die Frage des Einsatzspektrums und denkbarer Alternativen zu
sowohl Web Components als auch fetten Frameworks (hyperHTML, µland) kommen wir
zu der Frage, welche Wert das Wissen um Webstandards-Basics (mit
Event.preventDefault() als Beispiel) heutzutage überhaupt hat. Gegen Ende
verweisen wir noch auf die MDN-Doku zu Web Components, Joy’s Talk Web
Components: Maintaining and Reusing your Frontend, Brad Frost’s Artikel zu
front-of-the-front-end and back-of-the-front-end web development und Joy’s
Kompendium Responsible Web Applications. Zudem stellt Peter für frühstens 2027
einen Blogpost über OOP-DOM mit Elementen in Aussicht.

Revision 480: Web Component Design mit Joy Heron

<p>Eine weitere Late Night Ausgabe mit Kahlil und Stefan im Überleitungsmarathon!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] <a href="https://world.hey.com/jason/changes-at-basecamp-7f32afc5">Changes at Basecamp</a></dt>
<dd>Nachdem die Menschen von Basecamp in den Late Night Episoden regelmäßig auftauchen müssen wir natürlich kurz über den Mitarbeiter-Exodus und die vorangegangene Kommunikation reden. In einem zusätzlichen Artikel gibt es <a href="https://www.platformer.news/p/-how-basecamp-blew-up">mehr Information</a>. Wir sind erstaunlicherweise anderer Meinung!</dd>
<dt><a href="https://i-am-brennan.medium.com/the-10-50-99-approach-to-feedback-e32157865c50">10/50/99% Feedback</a></dt>
<dd>Apropos Feedback! Machen Sie das Logo doch bitte größer, morgen gehen wir live! Damit solche Dinge nicht passieren bietet es sich an das richtige Feedback zur richtigen Zeit zu geben. Der Artikel veranschaulicht das sehr gut und wir reden über unsere Erfahrungen. Stefan schwört auf die Technik der <a href="https://www.smashingmagazine.com/printed-books/user-experience-revolution/">Design Sprints</a> um schnell Meter zu machen.</dd>
<dt><a href="https://github.blog/2021-05-04-how-we-use-web-components-at-github/">Web Components at GitHub</a></dt>
<dd>GitHub verwendet schon lange Web Components und berichtet. Das <a href="https://github.github.io/catalyst/">Catalyst Toolkit</a> hilft GitHub Entwickler:innen dabei, schneller und einfacher ans Ziel zu kommen. Wir sind immer noch skeptisch ob Web Components, jetzt wo sie wirklich da sind, tatsächlich als Allheilmittel durchgehen. Irgendwo mittendrin erwähnt Stefan auch noch <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy">Proxies</a>, und wir kommen wieder ganz vorne an.</dd>
</dl>


Eine weitere Late Night Ausgabe mit Kahlil und Stefan im Überleitungsmarathon!


SCHAUNOTIZEN

[00:00:59] CHANGES AT BASECAMP

Nachdem die Menschen von Basecamp in den Late Night Episoden regelmäßig
a…

Eine weitere Late Night Ausgabe mit Kahlil und Stefan im Überleitungsmarathon!


SCHAUNOTIZEN

[00:00:59] CHANGES AT BASECAMP

Nachdem die Menschen von Basecamp in den Late Night Episoden regelmäßig
auftauchen müssen wir natürlich kurz über den Mitarbeiter-Exodus und die
vorangegangene Kommunikation reden. In einem zusätzlichen Artikel gibt es mehr
Information. Wir sind erstaunlicherweise anderer Meinung!

10/50/99% FEEDBACK

Apropos Feedback! Machen Sie das Logo doch bitte größer, morgen gehen wir live!
Damit solche Dinge nicht passieren bietet es sich an das richtige Feedback zur
richtigen Zeit zu geben. Der Artikel veranschaulicht das sehr gut und wir reden
über unsere Erfahrungen. Stefan schwört auf die Technik der Design Sprints um
schnell Meter zu machen.

WEB COMPONENTS AT GITHUB

GitHub verwendet schon lange Web Components und berichtet. Das Catalyst Toolkit
hilft GitHub Entwickler:innen dabei, schneller und einfacher ans Ziel zu kommen.
Wir sind immer noch skeptisch ob Web Components, jetzt wo sie wirklich da sind,
tatsächlich als Allheilmittel durchgehen. Irgendwo mittendrin erwähnt Stefan
auch noch Proxies, und wir kommen wieder ganz vorne an.

Revision 479: Late-Night mit Feedback Culture, Basecamp, Design Sprints

<p>Unter dem Vorwand, eine neue TypeScript-Version zu besprechen, trafen sich Stefan und Peter und quatschten in Wahrheit über Delphi, Balkonpflanzen, Rust, Napoleon, Go(tt) und die Welt.</p>
<h3>[00:00:58] Schaunotizen</h3>
<dl>
<dt><a href="https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/">Announcing TypeScript 4.3 RC</a></dt>
<dd>Es steht eine neue TypeScript-Version vor der Tür, die wir Feature für Feature durchkauen und dabei immer wieder bis zum Mond abschweifen. Der Umstand, dass <a href="https://www.typescriptlang.org/docs/handbook/utility-types.html#constructorparameterstype"><code>ConstructorParameters&lt;Type&gt;</code></a> nun auch für <a href="https://www.typescriptlang.org/docs/handbook/2/classes.html#abstract-classes-and-members"><code>abstract</code> Classes</a> funktioniert, führt uns direkt ins traditionelle OOP-Roasting. Dabei erwähnen wir nicht nur <a href="https://fettblog.eu/typescript-interface-constructor-pattern/">Stefans Artikel zum Constructor Interface Pattern</a>, sondern auch <a href="https://twitter.com/sir_pepe/status/1394343214337904643">Fehlleistungen aus dem Hause Bloomberg.com</a>. Über den Wert der Always-Truthy Promise Checks sind wir uns ebenso uneinig wie über die diversen Upgrades des TS-Compilers, nutzen letzteres Thema jedoch zum Abschweifen in Richtung <a href="https://bazel.build/">Bazel</a>, <a href="https://esbuild.github.io/">esbuild</a>, <a href="https://golang.org/">Go</a> (und den <a href="https://www.reddit.com/r/rust/comments/5penft/parallelizing_enjarify_in_go_and_rust/dcsgk7n/">legendären Generics-Hack</a>) und <a href="https://www.rust-lang.org/">Rust</a>. Neue Editor-Features von TS lassen uns über die Beziehung zwischen TypeScript und <a href="https://code.visualstudio.com/">VS Code</a> philosophieren, bevor es an die ersten Neuerungen von TS 4.3 geht, die uns wirklich interessieren. Tweaks am den Typen von Gettern und Settern sind nicht die Weltformel, aber gerade für Web Components schon ein sinnvolles Feature. Unabhängig davon fordert Peter einen Rust-artigen <code>unsafe</code>-Block für TS, damit <a href="https://www.peterkroener.de/ambiguitaetstoleranz-loecher-und-constructor-funktionen/">Löcher im Typsystem</a> besser behandelt werden können). Der Klassenkampf setzt sich mit <code>override</code> nebst <code>--noImplicitOverride</code> sowie <code>#private</code> (jetzt auch für Methoden) fort, was wir auf sehr zurückhaltende Weise begrüßen. Contextual Narrowing for Generics (eine selektive Aufschlauung der Typsystems) und Template String Type Improvements (eine weitere selektive Aufschlauung der Typsystems) sagt uns da schon mehr zu. Gegen Ende verfransen wir uns dann mit <a href="https://github.com/tc39/proposal-do-expressions">einen Proposal für do-Expressions</a>, <a href="https://en.wikipedia.org/wiki/Charles_Joseph_Minard#/media/File:Minard.png">Napoleons Rückzug aus Moskau</a>, <a href="https://reasonml.github.io/">ReasonML</a>/<a href="https://rescript-lang.org/">ReScript</a>, <a href="https://de.wikipedia.org/wiki/Embarcadero_Delphi">Delphi</a>, <a href="https://www.gtk.org/">GTK</a> und Empfehlungen für die Revionen <a href="https://workingdraft.de/446/">446</a> und <a href="https://workingdraft.de/175/">175</a> dann vollends.</dd>
</dl>


Unter dem Vorwand, eine neue TypeScript-Version zu besprechen, trafen sich
Stefan und Peter und quatschten in Wahrheit über Delphi, Balkonpflanzen, Rust,
Napoleon, Go(tt) und die Welt.


[00:00:58] SC…

Unter dem Vorwand, eine neue TypeScript-Version zu besprechen, trafen sich
Stefan und Peter und quatschten in Wahrheit über Delphi, Balkonpflanzen, Rust,
Napoleon, Go(tt) und die Welt.


[00:00:58] SCHAUNOTIZEN

ANNOUNCING TYPESCRIPT 4.3 RC

Es steht eine neue TypeScript-Version vor der Tür, die wir Feature für Feature
durchkauen und dabei immer wieder bis zum Mond abschweifen. Der Umstand, dass
ConstructorParameters<Type> nun auch für abstract Classes funktioniert, führt
uns direkt ins traditionelle OOP-Roasting. Dabei erwähnen wir nicht nur Stefans
Artikel zum Constructor Interface Pattern, sondern auch Fehlleistungen aus dem
Hause Bloomberg.com. Über den Wert der Always-Truthy Promise Checks sind wir uns
ebenso uneinig wie über die diversen Upgrades des TS-Compilers, nutzen letzteres
Thema jedoch zum Abschweifen in Richtung Bazel, esbuild, Go (und den legendären
Generics-Hack) und Rust. Neue Editor-Features von TS lassen uns über die
Beziehung zwischen TypeScript und VS Code philosophieren, bevor es an die ersten
Neuerungen von TS 4.3 geht, die uns wirklich interessieren. Tweaks am den Typen
von Gettern und Settern sind nicht die Weltformel, aber gerade für Web
Components schon ein sinnvolles Feature. Unabhängig davon fordert Peter einen
Rust-artigen unsafe-Block für TS, damit Löcher im Typsystem besser behandelt
werden können). Der Klassenkampf setzt sich mit override nebst
--noImplicitOverride sowie #private (jetzt auch für Methoden) fort, was wir auf
sehr zurückhaltende Weise begrüßen. Contextual Narrowing for Generics (eine
selektive Aufschlauung der Typsystems) und Template String Type Improvements
(eine weitere selektive Aufschlauung der Typsystems) sagt uns da schon mehr zu.
Gegen Ende verfransen wir uns dann mit einen Proposal für do-Expressions,
Napoleons Rückzug aus Moskau, ReasonML/ReScript, Delphi, GTK und Empfehlungen
für die Revionen 446 und 175 dann vollends.

Revision 478: Abschweifen mit TypeScript 4.3

<p>Mit <a href="https://twitter.com/fabian_friedl">Fabian Friedl</a>, DesignOps Team Lead bei <a href="https://www.dynatrace.com/">Dynatrace</a>, sprechen Vanessa, Hans und Stefan über Komponentenbibliotheken und Design Systeme.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] Komponentenbibliotheken und Design Systeme</dt>
<dd>Bevor ins Detail eingestiegen wird, erklärt Fabian erst einmal was eine Komponentenbibliothek überhaupt ist. Ein Hauptziel von Komponentenbibliotheken ist es, Konsistenz zwischen mehreren Applikation herzustellen. Darüberhinaus können sie allerdings auch Mehraufwand deutlich minimieren. So muss beispielsweise bei einem Redesign oder bei einer Erweiterung nicht jedes Featureteam die Änderung umsetzen. Stattdessen kommen Änderungen vom Team der Komponentenbibliothek. Die Basis von Komponentenbibliotheken sind Design Systeme. Als i-Tüpfelchen können Designer:innen und Entwickler:innen <a href="https://www.w3.org/community/design-tokens/">Design Tokens</a> verwenden. Design Tokens geben atomic Styles an, die für verschiedene Plattformen, wie iOS, Android oder als Custom Properties für Web, exportiert werden können. Selbstverständlich kann es auch Nachteile geben. Doch diese lassen sich durch Organisation umgehen. Fabians Team arbeitet eng mit dem Designteam zusammen, eigentlich sind sie eher ein Team. Es gibt wöchentliche Designreviews, die für einen frühen Austausch sorgen. Eine wichtige Frage, die sich dann beim Entwickeln stellt ist: Wer ist der Konsument? Ist es ein komplettes Open Source Projekt, wie viele Feature Teams greifen auf die Bibliothek zu? Unabhängig davon, jeder Konsument der Bibliothek wird eine gute Dokumentation benötigen. Noch besser sind sogar Copy &amp; Paste Snippets zum Ausprobieren. Je besser die Dokumentation ist, desto mehr erspart man sich Nachrichten über Chatsysteme mit immer den gleiche Fragen. Weiteres Material in den Links</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://material.angular.io/cdk/categories">Angular CDK</a></dt>
<dd>Stilfreier Grundbaukasten für barrierefreie Angular Komponenten</dd>
<dt><a href="https://akveo.github.io/nebular/docs/components/calendar-kit/overview#nbcalendarkitmodule">Calender Kit</a></dt>
<dd>Schon mal ein Kalender-Widget gebaut? Hier gibt&#8217;s kopflose Unterstützung.</dd>
<dt><a href="https://react-spectrum.adobe.com/react-aria/index.html">React-aria</a></dt>
<dd>React Hooks von Adobe zur Erstellung barrierefreier Komponenten. Sehr qualitativ!</dd>
<dt><a href="https://headlessui.dev/">Headless UI</a></dt>
<dd>Headless Components von den Tailwind Machern in React und Vue</dd>
<dt><a href="https://reach.tech/">Reach</a></dt>
<dd>Stilfreie, barrierefreie React Komponenten</dd>
<dt><a href="https://polaris.shopify.com/design/colors#section-color-roles">Polaris</a></dt>
<dd>Das Shopify Design System</dd>
<dt><a href="https://barista.dynatrace.com">Barista</a></dt>
<dd>Das Dynatrace Design System</dd>
<dt><a href="https://www.youtube.com/watch?v=kwW2HNlpdwM">Learnings from building a component Library</a></dt>
<dd>Fabians Vortrag auf der NG-DE</dd>
</dl>


Mit Fabian Friedl, DesignOps Team Lead bei Dynatrace, sprechen Vanessa, Hans und
Stefan über Komponentenbibliotheken und Design Systeme.


SCHAUNOTIZEN

[00:00:00] KOMPONENTENBIBLIOTHEKEN UND DESIGN S…

Mit Fabian Friedl, DesignOps Team Lead bei Dynatrace, sprechen Vanessa, Hans und
Stefan über Komponentenbibliotheken und Design Systeme.


SCHAUNOTIZEN

[00:00:00] KOMPONENTENBIBLIOTHEKEN UND DESIGN SYSTEME

Bevor ins Detail eingestiegen wird, erklärt Fabian erst einmal was eine
Komponentenbibliothek überhaupt ist. Ein Hauptziel von Komponentenbibliotheken
ist es, Konsistenz zwischen mehreren Applikation herzustellen. Darüberhinaus
können sie allerdings auch Mehraufwand deutlich minimieren. So muss
beispielsweise bei einem Redesign oder bei einer Erweiterung nicht jedes
Featureteam die Änderung umsetzen. Stattdessen kommen Änderungen vom Team der
Komponentenbibliothek. Die Basis von Komponentenbibliotheken sind Design
Systeme. Als i-Tüpfelchen können Designer:innen und Entwickler:innen Design
Tokens verwenden. Design Tokens geben atomic Styles an, die für verschiedene
Plattformen, wie iOS, Android oder als Custom Properties für Web, exportiert
werden können. Selbstverständlich kann es auch Nachteile geben. Doch diese
lassen sich durch Organisation umgehen. Fabians Team arbeitet eng mit dem
Designteam zusammen, eigentlich sind sie eher ein Team. Es gibt wöchentliche
Designreviews, die für einen frühen Austausch sorgen. Eine wichtige Frage, die
sich dann beim Entwickeln stellt ist: Wer ist der Konsument? Ist es ein
komplettes Open Source Projekt, wie viele Feature Teams greifen auf die
Bibliothek zu? Unabhängig davon, jeder Konsument der Bibliothek wird eine gute
Dokumentation benötigen. Noch besser sind sogar Copy & Paste Snippets zum
Ausprobieren. Je besser die Dokumentation ist, desto mehr erspart man sich
Nachrichten über Chatsysteme mit immer den gleiche Fragen. Weiteres Material in
den Links


LINKS

ANGULAR CDK

Stilfreier Grundbaukasten für barrierefreie Angular Komponenten

CALENDER KIT

Schon mal ein Kalender-Widget gebaut? Hier gibt’s kopflose Unterstützung.

REACT-ARIA

React Hooks von Adobe zur Erstellung barrierefreier Komponenten. Sehr
qualitativ!

HEADLESS UI

Headless Components von den Tailwind Machern in React und Vue

REACH

Stilfreie, barrierefreie React Komponenten

POLARIS

Das Shopify Design System

BARISTA

Das Dynatrace Design System

LEARNINGS FROM BUILDING A COMPONENT LIBRARY

Fabians Vortrag auf der NG-DE

Revision 477: Komponentenbibliotheken und Design Systeme

<p>Anlässlich der Tatsache, dass Vanessa gerade mit Mitarbeiter*innen-Suche beschäftigt ist, sprachen wir über das Thema &#8222;Recruiting und Karriere&#8220;.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] Recruiting und Karriere</dt>
<dd>Wie ihr vielleicht wisst, arbeitet Vanessa in einem kleinen Startup, dessen Entwicklungsabteilung wachsen soll. Vanessa fiel dabei die Aufgabe zu, neue Menschen zu casten. Alle potentiellen Kandidaten landen zunächst einmal in einer Tabelle des Tools <a href="https://www.notion.so/Tables-66a1cce8fb6f4f64b9996f4146c51fad">Notion</a>. Alle infrage kommenden Kandidaten bittet Vanessa, ob sie auf ein GutHub-Repo oder auf einen GitHub-Commit verweisen können, auf den sie besonders Stolz sind. Das hilft Ihr, ein Gefühl für die Kandidatin oder den Kandidaten zu bekommen. Wer die Hürde nimmt, den erwartet eine Coding Challenge, welche auf 6 Stunden getimeboxed ist. Das ganze stellt immer eine Art Aufgabe dar, wie Vanessa sie jeden Tag umsetzen muss. Meist ist die Aufgabe umfangreicher als dass man sie in den 6 Stunden schaffen könnte. Vanessa interessiert, ob generell etwas Lauffähiges herauskommt, welche Entscheidungen die Person getroffen hat und wie ihr Coding-Stil ausschaut. Da die Challenge via GitHub bereitgestellt wird, sieht sie nebenbei auch, wie die Kandidatin oder der Kandidat mit Git umgeht. Nach Abschluss der Aufgabe führt Vanessa ein 90 min. technisches Interview. Dieses dient einem beiderseitig noch besseren Kennenlernen, und dem Bantworten von Fragen. Vanessa freut sich hierbei besonders über Verbesserungsideen was Technik oder UX angeht der Aufgabe angeht. Code-Fehler in der Coding Challenge werden jedenfalls verziehen, wenn es menschlich passt! Das letzte Interview schließlich ist der das, in dem es um Gehaltsvorstellungen geht.</p>
<p>Hans, der in einem größeren Unternehmen arbeitet, legt wiederum mehr Wert auf einen solchen &#8222;Cultural Fit&#8220;, als auf den Coding Stil. Seiner Meinung nach ist das Knowhow etwas, das man den Personen beibiegen kann. Dieses &#8222;Zusammenpassen&#8220; muss man von beiden Seiten gesehen, auch wichtig dass die Firma zu der Person passt. Zum Zusammenpassen gehört auch die Frage, würden die Person das Unternehmen hin und wieder in München besuchen, oder käme das nicht infrage? Darüberhinaus soll die Kandidatin oder der Kandidat Lust auf Neues haben und Dinge anschieben wollen. Hans` Meinung nach gibt es nämlich sehr viele Menschen, die die Dinge gerne so belassen wollen, wie sie sind. Die wären allerdings weniger für das Unternehmen geeignet, für das er arbeitet. Darum hat Hans den Recruitment-Prozess umgedreht: Als allererstes versucht Hans mit einer Kollegin oder einem Kollegen zusammen in einem 30- bis 45-minütigen Gespräch herauszufinden, ob beide Seiten zusammenpassen. So merkt man schnell, wenn es nicht passt und beide Seiten haben keinen zu großen Zeit-Invest vorab tätigen müssen. Erst danach folgt der fachliche Test in Form einer Reihe technischer Fragen und Challenges, für welche Hans das Tool <a href="https://www.codility.com/">Codility</a> nutzt, das auf 60 Minuten Zeit begrenzt ist. Danach folgt das technische Interview. Hier ist für Hans wichtig, was die Person über bestimmte Konzepte denkt, wie z.B. Lifecycle Hooks. Für ihn ist vor allem interessant, wie die Leute antworten, nicht so sehr der Inhalt selbst. So ist es auch okay, wenn jemand etwas nicht weiß. Es geht ihm darum, mit der Kandidatin oder dem Kandidaten ins Gespräch kommen und Lust auf eine zukünftige Zusammenarbeit zu bekommen.</p>
<p>Im Verlauf unseres Gesprächs kommen wir auch auf das Thema &#8222;Freelancer&#8220; zu sprechen. Vanessa findet Freelancer schwierig, weil die meist nicht die ganzen Hürden überwinden müssen, die die Festangestellten nehmen mussten, und auch, weil sie mehr verdienen. Der Punkt wiederum führt uns zum nächsten Thema &#8222;Verdienstmöglichkeiten&#8220;: Vanessa findet, es sollen alle möglichst gleich und angemessen verdienen. Bei Hans im Unternehmen gibt es für verschiedene Tätigkeiten vordefinierte Gehaltskorridore. Dadurch sind die Gehälter recht homogen. Zumindest vermutet er das, denn in seinem Arbeitsvertrag steht die Klausel, dass Angestellte nicht über ihr Gehalt sprechen dürfen. Hier wirft Schepp ein, dass so eine Klausel <a href="https://www.mdr.de/brisant/ratgeber/tiktok-gehalt-arbeitskollegen-sprechen-100.html">überhaupt nicht zulässig ist</a> und er der Meinung ist, dass das nur ein Werkzeug ist, mit dem ein Arbeitgeber seine Belegschaft klein hält. Zum Thema &#8222;Verdienst als Freelancer&#8220; schildert er seine Beobachtung, dass man zu jedem Stundensatz seine passenden Kunden findet und dass gerade die Kunden, die mit hohen Stundensätzen kein Problem haben auch immer zügig bezahlen. Schepp weist auch darauf hin, dass die Summen, die Freelancer fordern, die Nachteile ausgleichen, die sie gegenüber Festangestellten haben: Sie können jederzeit aus den Diensten entlassen werden, sie müssen bei der Sozialversicherung den Arbeitgeberanteil mittragen, sie werden bei Krankheit nicht weiterbezahlt und jeder Urlaub kostet Freelancer doppelt Geld: In Form von tatsächlichen Urlaubskosten, plus dem Verdienstausfall. Hier pflichtet Vanessa bei, dass sie Freelancer kennt, die deswegen, und aus Reputationsgründen, über Jahre hinweg keinen Urlaub gemacht haben. Im Bereich der Festanstellung findet Hans, dass Senior Engineers in Deutschland zwar gut, aber nicht sensationell gut verdienen, und dass die größten Gehaltssprünge meist mit Arbeitgeberwechsel einhergehen. Als Weiterentwicklung der Karriere bleibt Engineers meist nur der Weg ins Management. Die Seite <a href="http://www.engineeringladders.com/">www.engineeringladders.com</a> gibt Ratschläge für die Karriere.</p>
<p>Eine erfreuliche Beobachtung, die Hans in den letzten Jahren gemacht hat, ist dass die Bewerber immer diverser und facettenreicher werden. Das findet Hans richtig gut! Vanessa meint, das komme aber noch stark auf die Firma an, bei der man ist.</p>
<p>Zu guter Letzt sind wir uns auch alle einig, dass uns sogenannte &#8222;Perks&#8220;, also Dinge wie Kickertisch, Obstkorb &amp; Co eigentlich nicht so wichtig sind. Sie sind zwar angenehm, aber nicht entscheidend.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://workingdraft.de/440/">Revision 440: Engineering Manager und andere Karrierepfade</a></dt>
<dd>Vor knapp einem halben Jahr haben sich auch schon Kahlil und Stefan über das Thema &#8222;Karriere&#8220; unterhalten. Falls Ihr die Folge noch nicht kennt: Es lohnt sich reinzuhören!</dd>
<dt><a href="https://git-scm.com/book/de/v2/Git-Tools-Rerere"><code>git rerere</code></a></dt>
<dd>Die Funktion <code>git rerere</code> steht für „reuse recorded resolution“. Was es damit auf sich hat, lest Ihr hier.</dd>
</dl>


Anlässlich der Tatsache, dass Vanessa gerade mit Mitarbeiter*innen-Suche
beschäftigt ist, sprachen wir über das Thema „Recruiting und Karriere“.


SCHAUNOTIZEN

[00:01:00] RECRUITING UND KARRIERE

Wie…

Anlässlich der Tatsache, dass Vanessa gerade mit Mitarbeiter*innen-Suche
beschäftigt ist, sprachen wir über das Thema „Recruiting und Karriere“.


SCHAUNOTIZEN

[00:01:00] RECRUITING UND KARRIERE

Wie ihr vielleicht wisst, arbeitet Vanessa in einem kleinen Startup, dessen
Entwicklungsabteilung wachsen soll. Vanessa fiel dabei die Aufgabe zu, neue
Menschen zu casten. Alle potentiellen Kandidaten landen zunächst einmal in einer
Tabelle des Tools Notion. Alle infrage kommenden Kandidaten bittet Vanessa, ob
sie auf ein GutHub-Repo oder auf einen GitHub-Commit verweisen können, auf den
sie besonders Stolz sind. Das hilft Ihr, ein Gefühl für die Kandidatin oder den
Kandidaten zu bekommen. Wer die Hürde nimmt, den erwartet eine Coding Challenge,
welche auf 6 Stunden getimeboxed ist. Das ganze stellt immer eine Art Aufgabe
dar, wie Vanessa sie jeden Tag umsetzen muss. Meist ist die Aufgabe
umfangreicher als dass man sie in den 6 Stunden schaffen könnte. Vanessa
interessiert, ob generell etwas Lauffähiges herauskommt, welche Entscheidungen
die Person getroffen hat und wie ihr Coding-Stil ausschaut. Da die Challenge via
GitHub bereitgestellt wird, sieht sie nebenbei auch, wie die Kandidatin oder der
Kandidat mit Git umgeht. Nach Abschluss der Aufgabe führt Vanessa ein 90 min.
technisches Interview. Dieses dient einem beiderseitig noch besseren
Kennenlernen, und dem Bantworten von Fragen. Vanessa freut sich hierbei
besonders über Verbesserungsideen was Technik oder UX angeht der Aufgabe angeht.
Code-Fehler in der Coding Challenge werden jedenfalls verziehen, wenn es
menschlich passt! Das letzte Interview schließlich ist der das, in dem es um
Gehaltsvorstellungen geht.



Hans, der in einem größeren Unternehmen arbeitet, legt wiederum mehr Wert auf
einen solchen „Cultural Fit“, als auf den Coding Stil. Seiner Meinung nach ist
das Knowhow etwas, das man den Personen beibiegen kann. Dieses „Zusammenpassen“
muss man von beiden Seiten gesehen, auch wichtig dass die Firma zu der Person
passt. Zum Zusammenpassen gehört auch die Frage, würden die Person das
Unternehmen hin und wieder in München besuchen, oder käme das nicht infrage?
Darüberhinaus soll die Kandidatin oder der Kandidat Lust auf Neues haben und
Dinge anschieben wollen. Hans` Meinung nach gibt es nämlich sehr viele Menschen,
die die Dinge gerne so belassen wollen, wie sie sind. Die wären allerdings
weniger für das Unternehmen geeignet, für das er arbeitet. Darum hat Hans den
Recruitment-Prozess umgedreht: Als allererstes versucht Hans mit einer Kollegin
oder einem Kollegen zusammen in einem 30- bis 45-minütigen Gespräch
herauszufinden, ob beide Seiten zusammenpassen. So merkt man schnell, wenn es
nicht passt und beide Seiten haben keinen zu großen Zeit-Invest vorab tätigen
müssen. Erst danach folgt der fachliche Test in Form einer Reihe technischer
Fragen und Challenges, für welche Hans das Tool Codility nutzt, das auf 60
Minuten Zeit begrenzt ist. Danach folgt das technische Interview. Hier ist für
Hans wichtig, was die Person über bestimmte Konzepte denkt, wie z.B. Lifecycle
Hooks. Für ihn ist vor allem interessant, wie die Leute antworten, nicht so sehr
der Inhalt selbst. So ist es auch okay, wenn jemand etwas nicht weiß. Es geht
ihm darum, mit der Kandidatin oder dem Kandidaten ins Gespräch kommen und Lust
auf eine zukünftige Zusammenarbeit zu bekommen.

Im Verlauf unseres Gesprächs kommen wir auch auf das Thema „Freelancer“ zu
sprechen. Vanessa findet Freelancer schwierig, weil die meist nicht die ganzen
Hürden überwinden müssen, die die Festangestellten nehmen mussten, und auch,
weil sie mehr verdienen. Der Punkt wiederum führt uns zum nächsten Thema
„Verdienstmöglichkeiten“: Vanessa findet, es sollen alle möglichst gleich und
angemessen verdienen. Bei Hans im Unternehmen gibt es für verschiedene
Tätigkeiten vordefinierte Gehaltskorridore. Dadurch sind die Gehälter recht
homogen. Zumindest vermutet er das, denn in seinem Arbeitsvertrag steht die
Klausel, dass Angestellte nicht über ihr Gehalt sprechen dürfen. Hier wirft
Schepp ein, dass so eine Klausel überhaupt nicht zulässig ist und er der Meinung
ist, dass das nur ein Werkzeug ist, mit dem ein Arbeitgeber seine Belegschaft
klein hält. Zum Thema „Verdienst als Freelancer“ schildert er seine Beobachtung,
dass man zu jedem Stundensatz seine passenden Kunden findet und dass gerade die
Kunden, die mit hohen Stundensätzen kein Problem haben auch immer zügig
bezahlen. Schepp weist auch darauf hin, dass die Summen, die Freelancer fordern,
die Nachteile ausgleichen, die sie gegenüber Festangestellten haben: Sie können
jederzeit aus den Diensten entlassen werden, sie müssen bei der
Sozialversicherung den Arbeitgeberanteil mittragen, sie werden bei Krankheit
nicht weiterbezahlt und jeder Urlaub kostet Freelancer doppelt Geld: In Form von
tatsächlichen Urlaubskosten, plus dem Verdienstausfall. Hier pflichtet Vanessa
bei, dass sie Freelancer kennt, die deswegen, und aus Reputationsgründen, über
Jahre hinweg keinen Urlaub gemacht haben. Im Bereich der Festanstellung findet
Hans, dass Senior Engineers in Deutschland zwar gut, aber nicht sensationell gut
verdienen, und dass die größten Gehaltssprünge meist mit Arbeitgeberwechsel
einhergehen. Als Weiterentwicklung der Karriere bleibt Engineers meist nur der
Weg ins Management. Die Seite www.engineeringladders.com gibt Ratschläge für die
Karriere.

Eine erfreuliche Beobachtung, die Hans in den letzten Jahren gemacht hat, ist
dass die Bewerber immer diverser und facettenreicher werden. Das findet Hans
richtig gut! Vanessa meint, das komme aber noch stark auf die Firma an, bei der
man ist.

Zu guter Letzt sind wir uns auch alle einig, dass uns sogenannte „Perks“, also
Dinge wie Kickertisch, Obstkorb & Co eigentlich nicht so wichtig sind. Sie sind
zwar angenehm, aber nicht entscheidend.


KEINE SCHAUNOTIZEN

REVISION 440: ENGINEERING MANAGER UND ANDERE KARRIEREPFADE

Vor knapp einem halben Jahr haben sich auch schon Kahlil und Stefan über das
Thema „Karriere“ unterhalten. Falls Ihr die Folge noch nicht kennt: Es lohnt
sich reinzuhören!

GIT RERERE

Die Funktion git rerere steht für „reuse recorded resolution“. Was es damit auf
sich hat, lest Ihr hier.

Revision 476: Recruiting und Karriere

<p>Auf Hörer:innen-Wunsch hin ging es in dieser Revision um unser eigenes Development-Setup. Hans stellte dabei die Mac-, Schepp die Windows-Fraktion. Leider hatte es Peter gesundheitlich erneut so zerlegt, dass wir keine Linux-Perpektive beisteuern konnten.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] Unser Development-Setup</dt>
<dd>Angefangen bei Software, arbeiteten wir uns zu Hardware-Themen vor, um danach wieder in die entgegengesetzte Richtung abzudriften. Folgende Werkzeuge, seien sie &#8222;soft&#8220; oder &#8222;hard&#8220;, fanden dabei Erwähnung:</p>
<ul>
<li>Die Window-Eingabeaufforderung, <a href="https://de.wikipedia.org/wiki/PowerShell">PowerShell</a>, die <a href="https://de.wikipedia.org/wiki/Windows-Subsystem_f%C3%BCr_Linux">WSL</a>, <a href="https://gitforwindows.org/">Git Bash</a></li>
<li><a href="https://medium.com/@GalarnykMichael/install-git-on-windows-9acf2a1944f0">Git für Windows mit den UNIX Tools installieren</a></li>
<li><a href="https://github.com/felixrieseberg/windows-build-tools#readme">Windows Build Tool</a></li>
<li><a href="https://chocolatey.org/">Chocolatey</a>, der Windows-Paketmanager</li>
<li><a href="https://brew.sh/index_de">Homebrew</a>, der Mac-Paketmanager</li>
<li><a href="https://code.visualstudio.com/">VS Code</a></li>
<li><a href="https://www.adobe.com/de/products/dreamweaver.html">Dreamweaver</a></li>
<li><a href="https://www.jetbrains.com/de-de/phpstorm/">PHPStorm</a> bzw. <a href="https://www.jetbrains.com/de-de/webstorm/">WebStorm</a></li>
<li><a href="https://www.apple.com/de/macbook-pro-13/">MacBook Pro 13 2020</a></li>
<li><a href="https://www.dell.com/de-de/shop/laptops/xps-13-laptop/spd/xps-13-9310-laptop">Dell XPS 13</a></li>
<li><a href="https://support.apple.com/de-de/HT210380">iPad (Air) mit Sidecar</a></li>
<li>Höhenverstellbarer Schreibtisch</li>
<li><a href="https://www.kinnarps.de/produkte/sitzmoebel/buerodrehstuehle/">Profi-Bürostuhl</a></li>
<li><a href="https://eslint.org/">ESLint</a> / <a href="https://prettier.io/">Prettier</a></li>
<li><a href="https://www.jetbrains.com/help/phpstorm/using-git-integration.html#set-passwords-for-git-remotes">Git in PHPStorm</a>, <a href="https://blog.jetbrains.com/phpstorm/2020/04/new-video-series-phpstorm-tips-with-christoph-rumpel/">PHPStorm Tips by Christoph Rumpel</a></li>
<li><a href="https://www.sequelpro.com/">Sequel Pro</a> für Mac / <a href="https://releases.postico.app/">Postico 2</a> für Mac / <a href="https://www.heidisql.com/">HeidiSQL</a> für Windows</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=alexcvzz.vscode-sqlite">SQLite in VS Code</a></li>
<li>MongoDB: <a href="https://robomongo.org/">Robo 3t</a> auf Mac / <a href="https://www.mongodb.com/products/compass">MongoDB Compass</a></li>
<li><a href="https://swagger.io/">Swagger.io</a></li>
<li><a href="https://www.postman.com/">Postman</a> für REST Services, <a href="https://insomnia.rest/">Insomnia</a>, <a href="https://www.jetbrains.com/help/phpstorm/testing-restful-web-services.html">PHPStorm REST Tool</a></li>
<li><a href="https://www.google.com/intl/de/chrome/canary/">Chrome Canary</a> nebenher <a href="https://stackoverflow.com/questions/35432749/disable-web-security-in-chrome-48">mit abgeschalteten Sicherheitsfeatures</a></li>
<li><a href="https://www.browserstack.com/">Browserstack</a>, <a href="http://odl.maddesigns.de/">Open Device Lab (Sven Wolfermann)</a></li>
<li><a href="https://browsersync.io/">BrowserSync</a> / <a href="https://www.vanamco.com/">Ghostlab</a> / <a href="https://polypane.app/">Polypane</a> / <a href="https://responsively.app/">Responsively App</a></li>
<li>Blogpost: <a href="https://schepp.dev/posts/running-webkit-on-windows/">Running WebKit on Windows</a></li>
<li><a href="https://github.com/nvm-sh/nvm">NVM</a> / <a href="https://github.com/coreybutler/nvm-windows">NVM für Windows</a></li>
<li>Passwortverwaltung mit <a href="https://1password.com/">1-Password</a>, Chrome Passwort-Manager: <a href="https://haveibeenpwned.com/">Have I been pawned-DB</a> + <a href="https://serverfault.com/questions/795467/for-what-is-the-well-known-folder">.well-known</a>&#8211;<a href="https://ma.ttias.be/well-known-directory-webservers-aka-rfc-5785/">Verzeichnis</a></li>
<li><a href="https://imageoptim.com/mac">ImageOptim</a>, <a href="https://squoosh.app/">Squoosh.app</a>, <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a></li>
<li><a href="https://workingdraft.de/newsletter">Der Working Draft Newsletter</a></li>
</ul>
</dd>
</dl>


Auf Hörer:innen-Wunsch hin ging es in dieser Revision um unser eigenes
Development-Setup. Hans stellte dabei die Mac-, Schepp die Windows-Fraktion.
Leider hatte es Peter gesundheitlich erneut so zerle…

Auf Hörer:innen-Wunsch hin ging es in dieser Revision um unser eigenes
Development-Setup. Hans stellte dabei die Mac-, Schepp die Windows-Fraktion.
Leider hatte es Peter gesundheitlich erneut so zerlegt, dass wir keine
Linux-Perpektive beisteuern konnten.


SCHAUNOTIZEN

[00:01:00] UNSER DEVELOPMENT-SETUP

Angefangen bei Software, arbeiteten wir uns zu Hardware-Themen vor, um danach
wieder in die entgegengesetzte Richtung abzudriften. Folgende Werkzeuge, seien
sie „soft“ oder „hard“, fanden dabei Erwähnung:



 * Die Window-Eingabeaufforderung, PowerShell, die WSL, Git Bash
 * Git für Windows mit den UNIX Tools installieren
 * Windows Build Tool
 * Chocolatey, der Windows-Paketmanager
 * Homebrew, der Mac-Paketmanager
 * VS Code
 * Dreamweaver
 * PHPStorm bzw. WebStorm
 * MacBook Pro 13 2020
 * Dell XPS 13
 * iPad (Air) mit Sidecar
 * Höhenverstellbarer Schreibtisch
 * Profi-Bürostuhl
 * ESLint / Prettier
 * Git in PHPStorm, PHPStorm Tips by Christoph Rumpel
 * Sequel Pro für Mac / Postico 2 für Mac / HeidiSQL für Windows
 * SQLite in VS Code
 * MongoDB: Robo 3t auf Mac / MongoDB Compass
 * Swagger.io
 * Postman für REST Services, Insomnia, PHPStorm REST Tool
 * Chrome Canary nebenher mit abgeschalteten Sicherheitsfeatures
 * Browserstack, Open Device Lab (Sven Wolfermann)
 * BrowserSync / Ghostlab / Polypane / Responsively App
 * Blogpost: Running WebKit on Windows
 * NVM / NVM für Windows
 * Passwortverwaltung mit 1-Password, Chrome Passwort-Manager: Have I been
   pawned-DB + .well-known–Verzeichnis
 * ImageOptim, Squoosh.app, SVGOMG
 * Der Working Draft Newsletter

Revision 475: Unser Development-Setup

<p>Anlässlich der Veröffentlichung seines Buches &#8222;<a href="https://accessible-vue.com/">Accessible Vue</a>&#8220; luden wir Barrierefreiheitsexperte <a href="https://marcus.io/">Marcus Herrmann</a> (<a href="https://twitter.com/_marcusherrmann">@_marcusherrmann</a>) aus Berlin zu uns ein, um über Barrierefreiheit im Allgemeinen und über die besonderen Herausforderungen der barrierearmen Programmierung von Single-Page-Applications im Besonderen zu sprechen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:00] <a href="https://accessible-vue.com/">Barrierefreiheit in Single Page Applications</a></dt>
<dd>Folgende Links spielten während unseres Gesprächsverlaufs eine Rolle:</p>
<ul>
<li><a href="https://developer.apple.com/design/human-interface-guidelines/accessibility/overview/introduction/">Apple Human Interface Guidelines</a></li>
<li><a href="https://github.com/dequelabs/axe-core">AxeCore von den Deque Labs</a></li>
<li><a href="https://wave.webaim.org/">WAVE Web Accessibility Evaluation Tool</a></li>
<li><a href="https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/">Manuel Matuzović: Building the most inaccessible site possible with a perfect Lighthouse score</a></li>
<li><a href="https://www.w3.org/WAI/standards-guidelines/wcag/">Web Content Accessibility Guidelines (WCAG)</a></li>
<li><a href="https://www.nytimes.com/">The New York Times</a></li>
<li><a href="https://www.tpgi.com/the-current-state-of-modal-dialog-accessibility/">Modale</a></li>
<li>Das <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert">inert</a>-Attribut</li>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
<li><a href="https://sarahmhigley.com/">Sarah Higley</a></li>
<li><a href="https://web.dev/prefers-reduced-motion/">prefers-reduced-motion </a></li>
<li><a href="https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/">Windows High Contrast Mode</a></li>
</ul>
</dd>
</dl>


Anlässlich der Veröffentlichung seines Buches „Accessible Vue“ luden wir
Barrierefreiheitsexperte Marcus Herrmann (@_marcusherrmann) aus Berlin zu uns
ein, um über Barrierefreiheit im Allgemeinen und …

Anlässlich der Veröffentlichung seines Buches „Accessible Vue“ luden wir
Barrierefreiheitsexperte Marcus Herrmann (@_marcusherrmann) aus Berlin zu uns
ein, um über Barrierefreiheit im Allgemeinen und über die besonderen
Herausforderungen der barrierearmen Programmierung von Single-Page-Applications
im Besonderen zu sprechen.


SCHAUNOTIZEN

[00:02:00] BARRIEREFREIHEIT IN SINGLE PAGE APPLICATIONS

Folgende Links spielten während unseres Gesprächsverlaufs eine Rolle:



 * Apple Human Interface Guidelines
 * AxeCore von den Deque Labs
 * WAVE Web Accessibility Evaluation Tool
 * Manuel Matuzović: Building the most inaccessible site possible with a perfect
   Lighthouse score
 * Web Content Accessibility Guidelines (WCAG)
 * The New York Times
 * Modale
 * Das inert-Attribut
 * WAI-ARIA Authoring Practices 1.1
 * Sarah Higley
 * prefers-reduced-motion
 * Windows High Contrast Mode

Revision 474: Barrierefreiheit in Single Page Applications

<p>Im September 2020 war das <a href="https://github.com/vuejs/vue-next/releases/tag/v3.0.0">Release von Vue 3</a>. Ein gutes halbes Jahr später besprechen wir mit <a href="https://markus.oberlehner.net/">Markus Oberlehner</a> über Erfahrungen über die Einsatz der Änderungen in echten Projekten.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] Vue 3 und die Composition API</dt>
<dd>Über keine eine andere Änderung bei <a href="https://v3.vuejs.org/">Vue 3</a> wird so viel gesprochen wie die Composition API. Denn, wenn man das so möchte, hat sie den größten Effekt auf die Programmierweise von Frontend Applikation mit Vue.js. Zudem gibt es Performance Boosts, das Entfernen des notwendig Root-Elements jeder Single File Component und die Möglichkeit mehrere v-models an Kind Komponenten zu binden. Die sind zwar alle super, aber deswegen haben Hans, Schepp, Vanessa und Markus auch nicht viel dazu gesagt. Vergleichbar ist die umumstrittene Composition API mit <a href="https://reactjs.org/docs/hooks-intro.html">React Hooks</a>, von denen sie wohl auch inspiriert war, wie <a href="https://evanyou.me/">Evan You</a>, der Erfinder von Vue.js, in <a href="https://twitter.com/youyuxi/status/1056042395891105793?s=20">einem Tweet</a> von 2018 durchblicken lässt. Markus und Vanessa sind sich einig, dass die Composition API eine tolle Sache ist, aber die Best Practices noch fehlen. Glücklicherweise sorgt Markus auf seinem Blog mit vielen hilfreichen Artikeln. Er berichtet über das <a href="https://markus.oberlehner.net/blog/group-extract-share-working-with-the-vue-composition-api/">Group, Extract, Share</a> Konzept, den Einsatzgebieten von <a href="https://markus.oberlehner.net/blog/watch-vs-watcheffect-when-to-use-what-with-vue/">watch und watchEffect</a> und Möglichkeiten im <a href="https://markus.oberlehner.net/blog/application-state-management-with-vue-3/">State Management</a>, auch ganz ohne <a href="https://next.vuex.vuejs.org/">Vuex</a>. Markus erzählt ebenfalls von <a href="https://github.com/Kong/swrv">swrv</a>, einem <em>state-while-revalidate </em>Plugin<em>.</em>  Außerdem gibt es ein Open Source Projekt über <a href="https://github.com/maoberlehner/vue-lazy-hydration">Lazy Hydration</a> auf Github. Zum Abschluss besprechen sie den<a href="https://v3.vuejs.org/guide/typescript-support.html"> Support von TypeScript</a> und IDE Extensions wie <a href="https://vuejs.github.io/vetur/">Vetur</a>, <a href="https://marketplace.visualstudio.com/items?itemName=znck.vue-language-features">Vue DX</a> und <a href="https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar">Volar</a>. Wer Vue 3 jetzt mal ausprobieren möchte, kann sich auf dem <a href="https://github.com/workingdraft/revisions/projects/69#card-58887453">SFC Playground</a> austoben.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://markus.oberlehner.net/blog/">markus.oberlehner.net/blog</a></dt>
<dd>Der Blog von Markus.</dd>
<dt><a href="https://workingdraft.de/365/">Revision 365</a></dt>
<dd>Vue.js &#8211; Eine Einleitung</dd>
<dt><a href="https://workingdraft.de/367/">Revision 367</a></dt>
<dd>Vue.js &#8211; Der Deep Dive</dd>
</dl>


Im September 2020 war das Release von Vue 3. Ein gutes halbes Jahr später
besprechen wir mit Markus Oberlehner über Erfahrungen über die Einsatz der
Änderungen in echten Projekten.


SCHAUNOTIZEN

[00…

Im September 2020 war das Release von Vue 3. Ein gutes halbes Jahr später
besprechen wir mit Markus Oberlehner über Erfahrungen über die Einsatz der
Änderungen in echten Projekten.


SCHAUNOTIZEN

[00:00:59] VUE 3 UND DIE COMPOSITION API

Über keine eine andere Änderung bei Vue 3 wird so viel gesprochen wie die
Composition API. Denn, wenn man das so möchte, hat sie den größten Effekt auf
die Programmierweise von Frontend Applikation mit Vue.js. Zudem gibt es
Performance Boosts, das Entfernen des notwendig Root-Elements jeder Single File
Component und die Möglichkeit mehrere v-models an Kind Komponenten zu binden.
Die sind zwar alle super, aber deswegen haben Hans, Schepp, Vanessa und Markus
auch nicht viel dazu gesagt. Vergleichbar ist die umumstrittene Composition API
mit React Hooks, von denen sie wohl auch inspiriert war, wie Evan You, der
Erfinder von Vue.js, in einem Tweet von 2018 durchblicken lässt. Markus und
Vanessa sind sich einig, dass die Composition API eine tolle Sache ist, aber die
Best Practices noch fehlen. Glücklicherweise sorgt Markus auf seinem Blog mit
vielen hilfreichen Artikeln. Er berichtet über das Group, Extract, Share
Konzept, den Einsatzgebieten von watch und watchEffect und Möglichkeiten im
State Management, auch ganz ohne Vuex. Markus erzählt ebenfalls von swrv, einem
state-while-revalidate Plugin.  Außerdem gibt es ein Open Source Projekt über
Lazy Hydration auf Github. Zum Abschluss besprechen sie den Support von
TypeScript und IDE Extensions wie Vetur, Vue DX und Volar. Wer Vue 3 jetzt mal
ausprobieren möchte, kann sich auf dem SFC Playground austoben.


KEINE SCHAUNOTIZEN

MARKUS.OBERLEHNER.NET/BLOG

Der Blog von Markus.

REVISION 365

Vue.js – Eine Einleitung

REVISION 367

Vue.js – Der Deep Dive

Revision 473: Vue 3, taugts?

<p><a href="https://twitter.com/luka5c0m">Lukas Holzer</a>, seines Zeichens Senior Software Engineer bei Dynatrace bringt Hans, Stefan und Peter auf den neuesten Stand was <a href="https://graphql.org/">GraphQL</a> und speziell Developer-Experience-Upgrades im Zusammenhang mit GraphQL angeht!</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<div class="message_content">
<a href="https://www.sumcumo.com/?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/04/SC_Banner_Audio-AD.jpg" alt="" /></a></p>
<p>Die professionelle – weil ganzheitliche – Digitalisierung von Geschäftsmodellen ist unser Business. Renommierten Unternehmen aus der Lotterie- und Versicherungsbranche bieten wir von unseren Büros in Hamburg, Düsseldorf und Zürich aus, effiziente Produkte und Komplettlösungen aus einer Hand – von der Entwicklung einer digitalen Strategie bis hin zu ihrer Umsetzung. Bei sum.cumo findest du ein Umfeld vor, in dem sich alle Bereiche ständig weiterentwickeln wollen und in dem wir Veränderungen offen gegenüberstehen. Mit diesen Voraussetzungen meistern wir unser gesundes Unternehmenswachstum und legen dabei Wert auf einen absolut respektvollen, offenen und unkomplizierten Umgang miteinander legen.</p></div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:33] GraphQL in 2021</dt>
<dd>Obwohl wir in <a href="https://workingdraft.de/382/">Revision 382</a> den Kampf REST vs. GraphQL bereits durchgekaut hatten, lässt sich Backend-Noob Peter GraphQL und die nochmal kurz erklären. <br />
Zusammenfassung: Facebook baut GraphQL und Over-Download beim Anzeigen der Timeline zu verhindern, macht es Open Source, gibt es an die <a href="https://foundation.graphql.org/">GraphQL Foundation</a> ab und ein Ökosystem mit Tools wie <a href="https://swagger.io/">Swagger</a> und Clients wie <a href="https://www.apollographql.com/">Apollo</a> entsteht. Ein Beispiel zum herumklicken ist die <a href="http://api.spacex.land/graphql/">GraphQL-API von SpaceX</a>. Lukas macht sich im GraphQL-Kontext vor allem Gedanken um die Developer Experience und den Implementierungsaufwand von GraphQL. Hierbei geht&#8217;s vor allem um Codegenerierung, die Zusammenarbeit von TypeScript und GraphQL (z.B. mit <a href="https://github.com/drwpow/openapi-typescript">openapi-typescript</a>), Data Stitching und andere Herausforderungen beim Groß-Einsatz, was u.a. die Integration von Nicht-GraphQL-Services mit <a href="https://github.com/Urigo/graphql-mesh">GraphQL Mesh</a> einschließt.<br />
Wir debattieren des Weiteren die großen Fragen des API-Designs an sich, <a href="https://netflixtechblog.com/how-netflix-scales-its-api-with-graphql-federation-part-1-ae3557c187e2">Netflix&#8216; GraphQL-Einsatz</a>, Frontend-Tooling (v.a. <a href="https://github.com/evanw/esbuild">esbuild</a> <a href="https://github.com/vitejs/vite">vite</a> und <a href="https://www.snowpack.dev/">Snowpack</a>) und den blast from the Past in der <a href="https://www.youtube.com/watch?v=bJdefMsie24">jüngsten Cookie Bar</a>.
</dd>
</dl>


Lukas Holzer, seines Zeichens Senior Software Engineer bei Dynatrace bringt
Hans, Stefan und Peter auf den neuesten Stand was GraphQL und speziell
Developer-Experience-Upgrades im Zusammenhang mit Gra…

Lukas Holzer, seines Zeichens Senior Software Engineer bei Dynatrace bringt
Hans, Stefan und Peter auf den neuesten Stand was GraphQL und speziell
Developer-Experience-Upgrades im Zusammenhang mit GraphQL angeht!


UNSER SPONSOR

Die professionelle – weil ganzheitliche – Digitalisierung von Geschäftsmodellen
ist unser Business. Renommierten Unternehmen aus der Lotterie- und
Versicherungsbranche bieten wir von unseren Büros in Hamburg, Düsseldorf und
Zürich aus, effiziente Produkte und Komplettlösungen aus einer Hand – von der
Entwicklung einer digitalen Strategie bis hin zu ihrer Umsetzung. Bei sum.cumo
findest du ein Umfeld vor, in dem sich alle Bereiche ständig weiterentwickeln
wollen und in dem wir Veränderungen offen gegenüberstehen. Mit diesen
Voraussetzungen meistern wir unser gesundes Unternehmenswachstum und legen dabei
Wert auf einen absolut respektvollen, offenen und unkomplizierten Umgang
miteinander legen.


SCHAUNOTIZEN

[00:01:33] GRAPHQL IN 2021

Obwohl wir in Revision 382 den Kampf REST vs. GraphQL bereits durchgekaut
hatten, lässt sich Backend-Noob Peter GraphQL und die nochmal kurz erklären.
Zusammenfassung: Facebook baut GraphQL und Over-Download beim Anzeigen der
Timeline zu verhindern, macht es Open Source, gibt es an die GraphQL Foundation
ab und ein Ökosystem mit Tools wie Swagger und Clients wie Apollo entsteht. Ein
Beispiel zum herumklicken ist die GraphQL-API von SpaceX. Lukas macht sich im
GraphQL-Kontext vor allem Gedanken um die Developer Experience und den
Implementierungsaufwand von GraphQL. Hierbei geht’s vor allem um
Codegenerierung, die Zusammenarbeit von TypeScript und GraphQL (z.B. mit
openapi-typescript), Data Stitching und andere Herausforderungen beim
Groß-Einsatz, was u.a. die Integration von Nicht-GraphQL-Services mit GraphQL
Mesh einschließt.
Wir debattieren des Weiteren die großen Fragen des API-Designs an sich, Netflix‘
GraphQL-Einsatz, Frontend-Tooling (v.a. esbuild vite und Snowpack) und den blast
from the Past in der jüngsten Cookie Bar.

Revision 472: GraphQL in 2021

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen

PODLIST

Working Draft

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen.

Neue Episoden

Revision 483: Safari 15 und Browser-Extensions aller Art

Working Draft

Revision 482: Angular im Jahr 2021

Working Draft

Revision 481: Multithreading, Web Worker, Shared Worker und Multi-Screen-Applications mit Tobias Uhlig

Working Draft

Revision 480: Web Component Design mit Joy Heron

Working Draft

Revision 479: Late-Night mit Feedback Culture, Basecamp, Design Sprints

Working Draft

Revision 478: Abschweifen mit TypeScript 4.3

Working Draft

Revision 477: Komponentenbibliotheken und Design Systeme

Working Draft

Revision 476: Recruiting und Karriere

Working Draft

Revision 475: Unser Development-Setup

Working Draft

Revision 474: Barrierefreiheit in Single Page Applications

Working Draft

Revision 473: Vue 3, taugts?

Working Draft

Revision 472: GraphQL in 2021

Working Draft