<p>In dieser Revision besprechen wir Organisationsstrukturen. Dabei haben wir einen Fokus auf UnFIX, ein Organisationsdesign, worüber uns <a href="http://www.milanmatull.com/">Milan Matull</a>, Managing Partner bei <a href="https://www.factorial.io/en">Factorial</a>, viel zu erzählen hat. Milan war bereits Gast beim Working Draft in <a href="https://workingdraft.de/464/">Revision 464</a> zum Thema TailwindCSS 2.0 und in <a href="https://workingdraft.de/516/">Revision 516</a> zum Thema TailwindCSS 3.0.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://mittwald.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 350px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2023/03/Podcast_Banner_Mittwald_-Hosting_neu_gedacht_945x314px.jpg" alt="" /></a></p>
<div class="message_content">
<p>Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell.</p>
<p>mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf <a href="https://mittwald.de/workingdraft?ref=workingdraft.de">mittwald.de/workingdraft</a> und buch dein erstes Projekt!</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:11] Organisationstruktur &#8222;UNFIX&#8220;</dt>
<dd>Unterschiedliche Unternehmensgrößen benötigen unterschiedliche Modelle, um Teams und Arbeit zu strukturieren. Milan und seine Kolleg:innen setzten in der Vergangenheit auf das &#8222;<a href="https://nativdigital.com/viable-system-model/">Viable System Model</a>&#8220; (VSM). Das <a href="https://agilescrumgroup.de/spotify-modell/">Spotify-Model</a> ist seit Jahren ein fester Bestandteil in Diskussion, wie man Teams am besten aufstellen könnte. Für größere Strukturen gibt es Modelle, die auf Scrum aufbauen, wie <a href="https://www.atlassian.com/de/agile/agile-at-scale/what-is-safe">SAFe</a> und <a href="https://www.atlassian.com/de/agile/agile-at-scale/less">leSS</a>. Sind flache Hierarchien gewünscht eignen sich <a href="https://agilescrumgroup.de/holacracy/#:~:text=Bei%20Holacracy%20(zu%20Deutsch%3A%20Holakratie,Entscheidungsfindung%20und%20selbststeuernde%20Teams%20aus.">Holacracy</a>, allerdings ebenfalls VSM und <a href="https://unfix.com/">UnFIX</a>. Denn gefragt sind Modelle, die sich ständig an das Unternehmen anpassen können, wie auch <a href="https://management30.com/">Management 3.0</a> und <a href="https://teamtopologies.com/">Team Topologies</a>. Milan erzählt, worum genau es im UnFIX Modell geht. Es unterscheidet sich v.a. darin, dass es kein starres Framework ist. Das mag den Einstieg etwas erschweren, aber sorgt für viel Flexibilität, sobald es notwendig wird.</dd>
</dl>


In dieser Revision besprechen wir Organisationsstrukturen. Dabei haben wir einen
Fokus auf UnFIX, ein Organisationsdesign, worüber uns Milan Matull, Managing
Partner bei Factorial, viel zu erzählen ha…

Working Draft

In dieser Revision besprechen wir Organisationsstrukturen. Dabei haben wir einen
Fokus auf UnFIX, ein Organisationsdesign, worüber uns Milan Matull, Managing
Partner bei Factorial, viel zu erzählen hat. Milan war bereits Gast beim Working
Draft in Revision 464 zum Thema TailwindCSS 2.0 und in Revision 516 zum Thema
TailwindCSS 3.0.


UNSER SPONSOR



Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie
wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die
Decke gehen, deine Seite bleibt immer rasend schnell.

mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und
Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur,
benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server
selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs
kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen
Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade
beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine
Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet
bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting.
Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein
erstes Projekt!


SCHAUNOTIZEN

[00:02:11] ORGANISATIONSTRUKTUR „UNFIX“

Unterschiedliche Unternehmensgrößen benötigen unterschiedliche Modelle, um Teams
und Arbeit zu strukturieren. Milan und seine Kolleg:innen setzten in der
Vergangenheit auf das „Viable System Model“ (VSM). Das Spotify-Model ist seit
Jahren ein fester Bestandteil in Diskussion, wie man Teams am besten aufstellen
könnte. Für größere Strukturen gibt es Modelle, die auf Scrum aufbauen, wie SAFe
und leSS. Sind flache Hierarchien gewünscht eignen sich Holacracy, allerdings
ebenfalls VSM und UnFIX. Denn gefragt sind Modelle, die sich ständig an das
Unternehmen anpassen können, wie auch Management 3.0 und Team Topologies. Milan
erzählt, worum genau es im UnFIX Modell geht. Es unterscheidet sich v.a. darin,
dass es kein starres Framework ist. Das mag den Einstieg etwas erschweren, aber
sorgt für viel Flexibilität, sobald es notwendig wird.

Revision 561: Organisationstruktur „UnFIX“

<p>Nach einer Pause nehmen Stefan und Peter wieder das allquartalige Besprechen der neuesten TypeScript-Version auf. Und möglicherweise gibt es noch andere semi-relevante Themen wie React-Beef, Klassenkampf und PHP.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:01] <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/">TypeScript 5.0</a></dt>
<dd>Wie gewohnt rekapitulieren für anlässlich der Beta einer neuen TypeScript-Version das TypeScript-Versionierungs-Schema und tauchen danach tief in die spannenderen neuen Features ein. An erster Stelle stehen die neuen, <a href="https://github.com/tc39/proposal-decorators">dem ECMAScript-Standard entsprechenden</a> <strong>Decorators</strong>. Diese ergänzen in TypeScript die weiterhin verfügbaren <a href="https://www.typescriptlang.org/docs/handbook/decorators.html">Legacy Decorators</a>, deren Unterschiede zum Standard und Herkunft aus den Ruinen von <a href="https://en.wikipedia.org/wiki/AtScript">AtScript</a> wir besprechen. <a href="https://devblogs.microsoft.com/typescript/announcing-typescript-5-0-beta/#const-type-parameters">const Type Parameters</a> halten wir für eine sinnvolle Ergänzung, ebenso die Änderungen am Config-File-Format und die neue Unterstützung <code>export type *</code>. Die in 5.0 anstehenden Änderungen an Enums sind auch nicht schlecht, Enums selbst hingegen schon.</dd>
<dt>[00:42:27] Hidden Bonus Track/dt></p>
<dd>In einer etwas außer Kontrolle geratenen Vorbesprechung sprechen wir über den aktuellen React-Beef in der Frontend-Welt, Peters jüngste Erfahrungen<br />
mit PHP und <a href="https://laravel.com/">Laravel</a> sowie die Beziehung zwischen (und die Qualität von) React, <a href="https://nextjs.org/">Next.js</a> und <a href="https://vercel.com/">Vercel</a>.</dd>
</dl>


Nach einer Pause nehmen Stefan und Peter wieder das allquartalige Besprechen der
neuesten TypeScript-Version auf. Und möglicherweise gibt es noch andere
semi-relevante Themen wie React-Beef, Klassenka…

Nach einer Pause nehmen Stefan und Peter wieder das allquartalige Besprechen der
neuesten TypeScript-Version auf. Und möglicherweise gibt es noch andere
semi-relevante Themen wie React-Beef, Klassenkampf und PHP.


SCHAUNOTIZEN

[00:01:01] TYPESCRIPT 5.0

Wie gewohnt rekapitulieren für anlässlich der Beta einer neuen
TypeScript-Version das TypeScript-Versionierungs-Schema und tauchen danach tief
in die spannenderen neuen Features ein. An erster Stelle stehen die neuen, dem
ECMAScript-Standard entsprechenden Decorators. Diese ergänzen in TypeScript die
weiterhin verfügbaren Legacy Decorators, deren Unterschiede zum Standard und
Herkunft aus den Ruinen von AtScript wir besprechen. const Type Parameters
halten wir für eine sinnvolle Ergänzung, ebenso die Änderungen am
Config-File-Format und die neue Unterstützung export type *. Die in 5.0
anstehenden Änderungen an Enums sind auch nicht schlecht, Enums selbst hingegen
schon.

[00:42:27] HIDDEN BONUS TRACK/DT>



In einer etwas außer Kontrolle geratenen Vorbesprechung sprechen wir über den
aktuellen React-Beef in der Frontend-Welt, Peters jüngste Erfahrungen
mit PHP und Laravel sowie die Beziehung zwischen (und die Qualität von) React,
Next.js und Vercel.

Revision 560: TypeScript 5.0

<p>Hans, Schepp und Peter spielen <a href="https://workingdraft.de/gluecksrad/">Glücksrad!</a></p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://mittwald.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 350px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2023/03/Podcast_Banner_Mittwald_-Hosting_neu_gedacht_945x314px.jpg" alt="" /></a></p>
<div class="message_content">
<p>Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die Decke gehen, deine Seite bleibt immer rasend schnell.</p>
<p>mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur, benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting. Also, worauf wartest du? Geh jetzt auf <a href="https://mittwald.de/workingdraft?ref=workingdraft.de">mittwald.de/workingdraft</a> und buch dein erstes Projekt!</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:04:15] <a href="https://developer.mozilla.org/en-US/docs/Web/API/Selection/isCollapsed">Selection.prototype.isCollapsed</a></dt>
<dd>Auf der Suche nach Use Cases fällt uns erst auf, wie vergleichsweise mühsam Copy/Paste per JS via <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand">execCommand</a> war, was heutzutage mit der <a href="https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API">Clipboard API</a> sehr viel besser geht.</dd>
<dt>[00:09:00] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b">&lt;b&gt;</a></dt>
<dd>Hans referiert perfekt über Sinn und Unsinn des ehemaligen Bold-Elements inkl. Abgrenzung vom Kollegen <code>&lt;i&gt;</code>. Wir philosophieren darüber, welche Elemente die Bold- und Italic-Buttons in einem WYSIWYG-Editor ins Dokument setzen wollen und streifen dabei Use Cases für<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl"><code>&lt;dl&gt;</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark"><code>&lt;mark&gt;</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd"><code>&lt;kbd&gt;</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp"><code>&lt;xmp&gt;</code></a>. Für letzteres ermittelt Peter sogar per Live-Recherche die Namensherkunft (xmp für &#8222;Example&#8220; laut <a href="https://www.w3.org/TR/WD-html2/html-spec_5.html#SEC37">HTML 2.0</a>).</dd>
<dt>[00:25:37] <a href="https://developer.mozilla.org/en-US/docs/Web/API/StereoPannerNode/StereoPannerNode">StereoPannerNode</a></dt>
<dd>Ein Bestandteil der <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, zu dem uns nicht besonders viel einfällt.</dd>
<dt>[00:28:50] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta">&lt;meta&gt;</a></dt>
<dd>Wir diskutieren über Sinn und Unsinn von per Meta-Tag eingebauten Microdata-Informationen, v.a. in den Geschmacksrichtungen <a href="https://ogp.me/">OpenGraph</a> (mit <a href="https://www.opengraph.xyz/">verfügbarem Validator</a>) und <a href="https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards">Twitler</a> (ohne Validator). Am Ende kommen wir noch auf Charsets (auch via Meta-Tag setzbar, unter anderem auch in einer <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-http-equiv">Langfassung</a>) und die Kollegen von <a href="https://wowirsindistvorne.show/">Wo wir sind ist vorne</a> zu sprechen.</dd>
<dt>[00:38:17] <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaError/message">MediaError.message</a></dt>
<dd>Zu <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaError/code#media_error_code_constants">Media-Error-Codes</a> selbst haben wir nicht besonders viel beizutragen, aber Peter nutzt die Gelegenheit, um für DIY-Error-Klassen zu argumentieren.</dd>
<dt>[00:46:54] <a href="https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/ariaColSpan">ElementInternals.ariaColSpan</a></dt>
<dd>Eine API, mit der sich per <a href="https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals">ElementInternals</a> (von uns kürzlich in der <a href="https://workingdraft.de/557/">Revision 557</a> ausführlicher besprochen) der Defaultwert für <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan">aria-colspan</a> setzen lässt.</dd>
<dt>[00:51:27] <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt; &#8211; &lt;h6&gt;</a></dt>
<dd>Und täglich grüßt der <a href="https://www.accessibility-developer-guide.com/examples/headings/html-5-outline/">Outline-Algorithmus!</a> Wir kauen das altbekannte Problem der Überschriften in user-generated Content durch und diskutieren, unter welchen Umständen wir <a href="https://html.spec.whatwg.org/#the-hgroup-element">&lt;hgroup&gt;</a>, <a href="https://html.spec.whatwg.org/#the-header-element">&lt;header&gt;</a> oder etwas ganz anderes einsetzen.</dd>
</dl>


Hans, Schepp und Peter spielen Glücksrad!


UNSER SPONSOR



Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie
wieder Sorgen um Performance-Einbrüche machen. Der Traffic ka…

Hans, Schepp und Peter spielen Glücksrad!


UNSER SPONSOR



Maximale Performance für all deine Projekte? Bei mittwald brauchst du dir nie
wieder Sorgen um Performance-Einbrüche machen. Der Traffic kann ruhig durch die
Decke gehen, deine Seite bleibt immer rasend schnell.

mittwald hat Hosting neu gedacht und alles auf die besonderen Anforderungen und
Workloads von Agenturen und Freelancern optimiert – inklusive Infrastruktur,
benutzerfreundlicher Oberfläche und flexiblen Tarifen. Egal, ob du deinen Server
selbst konfigurieren möchtest oder das mittwald-Team sich um die optimalen Specs
kümmern soll. Der persönliche Kundenservice unterstützt dich 24/7 bei allen
Fragen rundum WordPress, TYPO3, Shopware oder was auch immer dich gerade
beschäftigt. Im firmeneigenen und TÜV-zertifizierten Rechenzentrum sind deine
Daten in sicheren Händen. Und das Beste? Wer seine Projekte bei mittwald hostet
bekommt nicht nur die besten Server, sondern auch 100% CO2-neutrales Hosting.
Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein
erstes Projekt!


SCHAUNOTIZEN

[00:04:15] SELECTION.PROTOTYPE.ISCOLLAPSED

Auf der Suche nach Use Cases fällt uns erst auf, wie vergleichsweise mühsam
Copy/Paste per JS via execCommand war, was heutzutage mit der Clipboard API sehr
viel besser geht.

[00:09:00] <B>

Hans referiert perfekt über Sinn und Unsinn des ehemaligen Bold-Elements inkl.
Abgrenzung vom Kollegen <i>. Wir philosophieren darüber, welche Elemente die
Bold- und Italic-Buttons in einem WYSIWYG-Editor ins Dokument setzen wollen und
streifen dabei Use Cases für<dl>, <mark>, <kbd> und <xmp>. Für letzteres
ermittelt Peter sogar per Live-Recherche die Namensherkunft (xmp für „Example“
laut HTML 2.0).

[00:25:37] STEREOPANNERNODE

Ein Bestandteil der Web Audio API, zu dem uns nicht besonders viel einfällt.

[00:28:50] <META>

Wir diskutieren über Sinn und Unsinn von per Meta-Tag eingebauten
Microdata-Informationen, v.a. in den Geschmacksrichtungen OpenGraph (mit
verfügbarem Validator) und Twitler (ohne Validator). Am Ende kommen wir noch auf
Charsets (auch via Meta-Tag setzbar, unter anderem auch in einer Langfassung)
und die Kollegen von Wo wir sind ist vorne zu sprechen.

[00:38:17] MEDIAERROR.MESSAGE

Zu Media-Error-Codes selbst haben wir nicht besonders viel beizutragen, aber
Peter nutzt die Gelegenheit, um für DIY-Error-Klassen zu argumentieren.

[00:46:54] ELEMENTINTERNALS.ARIACOLSPAN

Eine API, mit der sich per ElementInternals (von uns kürzlich in der Revision
557 ausführlicher besprochen) der Defaultwert für aria-colspan setzen lässt.

[00:51:27] <H1> – <H6>

Und täglich grüßt der Outline-Algorithmus! Wir kauen das altbekannte Problem der
Überschriften in user-generated Content durch und diskutieren, unter welchen
Umständen wir <hgroup>, <header> oder etwas ganz anderes einsetzen.

Revision 559: Glücksrad

<p>Nachdem Vanessa und Hans sich vor zwölf Wochen <a href="https://workingdraft.de/546/">in der Revision 546</a> über Ihre Wege in den Beruf ausgetauscht haben, nämlich einerseits das Studium, andererseits das &#8222;zufällige Hineinschlittern&#8220; nach dem Abitur, meldeten sich Stefan Macke (<a href="https://twitter.com/StefanMacke">Twitter</a> / <a href="https://it-berufe-podcast.de/">IT-Berufe-Podcast</a>) und Marcel Koch (<a href="https://twitter.com/_mknet_">Twitter</a> / <a href="https://mastodon.social/@mknet">Mastodon</a> / <a href="https://www.marcelkoch.net/">Web</a>) bei uns, weil wir weder Ausbildung, noch duales Studium als mögliche Wege in den Beruf beleuchtet haben. Das lag aber schlicht daran, dass wir von beidem keine Ahnung haben, und so haben wir die beiden als Experten eingeladen und das Ganze nachgeholt.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://workshops.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/12/Working-Draft-Banner.jpg" alt="" /></a></p>
<div class="message_content">
<p>Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.</p>
<p>Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.</p>
<p>Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei <a href="https://workshops.de/workingdraft?ref=workingdraft.de">Workshops.DE</a> genau richtig.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:05] Per dualer Ausbildung oder dualem Studium in den IT-Beruf</dt>
<dd>Zunächst lernen wir den Unterschied zwischen dualem Studium, dualer Ausbildung und der rein schulische Ausbildung. Über die ersten beiden wollen wir reden.</p>
<p>In den dualen Ausbildungen lernt man praktisch und gegen Bezahlung in einem Betrieb und flankiert wird das durch eine schulische Ausbildung entweder in einer Hoch- oder Berufsschule. Letzteres wäre das, was man unter einer dualen Ausbildung versteht. Insgesamt führt die Ausbildung seit 2020 zu sieben möglichen Ausbildungsberufen:</p>
<ul>
<li>Fachinformatiker*in Anwendungsentwicklung, für alle die später gerne programmiern möchten</li>
<li>Fachinformatiker*in Systemintegration, für alle die später als Administrator*in tätig sein möchten</li>
<li>Fachinformatiker*in Prozessanalyse, mit der man später KI programmiert oder SAP implementiert</li>
<li>Fachinformatiker*in digitale Vernetzung, mit der man später z.B. IoT-Produkte entwickeln kann.</li>
<li>IT-Systemelektroniker*in, für alle, die Lust auf Hardwarebauen haben</li>
<li>Kauffrau/-mann für Digitalisierungsmanagement, mit der man später digitale Prozesse in Betrieben optmiert, und</li>
<li>Kauffrau/-mann für IT-Systemmanagement, für alle, die später IT verkaufen möchten.</li>
</ul>
<p>Die IT-Ausbildungsberufe sind unter Männern die zweibeliebteste Gattung, unter Frauen sehen sie allerdings erst an Platz zehn.</p>
<p>Diese duale Ausbildung dauert üblicherweise 3 Jahre, wird meist auf 2,5 Jahre verkürzt, kann im Extremfall aber auch auf 1,5 Jahre halbiert werden. Eine Abschlussprüfung findet anders als man denken würde nicht erst am Ende der Ausbildung statt. Stattdessen gibt es eine über die Gesamtzeit &#8222;gestreckte Abschlussprüfung&#8220;, deren erster Teil nach 18 Monaten für alle sieben Ausbildungsberufe identisch abgelegt wird. Die Ausbildung beginnt damit breit gefächert und erst danach geht es tief in die Spezialisierung. Ganz zum Schluss der Ausbildung kommt das Abschlussprojekt, eine Art &#8222;Gesellenstück&#8220; an dem man zwischen 40 und 80 Stunden arbeitet, sowie die Präsentation desselben, einem 15 minütigen Fachgespräch darüber und einer schriftliche Dokumentation, die zwischen 30 und 60 Seiten zählt.</p>
<p>Ausbildungen bringen einem aus Stefans Sicht mehr Praxiswissen und sie sind anerkannt und sehr gefragt.</p>
<p>Entscheidend für den Erfolg ist, dass man einen Betrieb findet, der einen anständig an die Hand nimmt und ausbildet und für den man nicht nur eine billige Arbeitskraft ist. Hier muss man ganz zu Beginn gut drauf schauen, wo man gelandet ist und ob es eine gute Idee ist, die gesamte Ausbildung im Betrieb zu bleiben.</p>
<p>Ein Studium ist dahingehend akademischer angelegt. Im dualen Studium arbeitet man aber ebenso praktisch in einem Betrieb, welcher nicht nur die Studiengebühren von 25.000 EUR übernimmt, sondern einem auch ein Gehalt von 1.200 EUR brutto zahlt. Im Gegenzug bindet man sich nach Abschluss des Studiums für anderthalb bis zwei Jahre an den Betrieb &#8211; oft will man tatsächlich aber auch gar nicht weg.</p>
<p>Insgesamt können wir festhalten, dass sowohl Marcel als auch Stefan den Weg einer Ausbildung oder eines dualen Studiums sehr empfehlen können.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://it-berufe-podcast.de/duales-studium-mit-gerda-feldhaus-elena-hollen-und-markus-amshove-anwendungsentwickler-podcast-110/">Duales Studium mit Gerda Feldhaus, Elena Hollen und Markus Amshove – Anwendungsentwickler-Podcast #110</a></dt>
<dd>In dieser Episode seines Anwendungsentwickler-Podcasts diskutiert Stefan mit Gerda Feldhaus, Elena Hollen und Markus Amshove die Vor- und Nachteile eines dualen Studium.</dd>
<dt><a href="https://it-berufe-podcast.de/">Der IT-Berufe-Podcast</a></dt>
<dd>Stefans IT-Berufe-Podcast bringt seit 2015 Inhalte rund um die Ausbildung in den verschiedenen IT-Berufen.</dd>
<dt><a href="https://www.fachinformatiker.de/">Fachinformatiker.de</a></dt>
<dd>Fachinformatiker.de ist laut eigener Aussage die größte IT-Community rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.</dd>
</dl>


Nachdem Vanessa und Hans sich vor zwölf Wochen in der Revision 546 über Ihre
Wege in den Beruf ausgetauscht haben, nämlich einerseits das Studium,
andererseits das „zufällige Hineinschlittern“ nach de…

Nachdem Vanessa und Hans sich vor zwölf Wochen in der Revision 546 über Ihre
Wege in den Beruf ausgetauscht haben, nämlich einerseits das Studium,
andererseits das „zufällige Hineinschlittern“ nach dem Abitur, meldeten sich
Stefan Macke (Twitter / IT-Berufe-Podcast) und Marcel Koch (Twitter / Mastodon /
Web) bei uns, weil wir weder Ausbildung, noch duales Studium als mögliche Wege
in den Beruf beleuchtet haben. Das lag aber schlicht daran, dass wir von beidem
keine Ahnung haben, und so haben wir die beiden als Experten eingeladen und das
Ganze nachgeholt.


UNSER SPONSOR



Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet
Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über
80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig
unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative
Weiterbildungsangebote zu schaffen.

Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und
Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker,
Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale
Angular.DE, ReactJS.DE und VueJS.DE.

Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich
Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid
ihr bei Workshops.DE genau richtig.


SCHAUNOTIZEN

[00:02:05] PER DUALER AUSBILDUNG ODER DUALEM STUDIUM IN DEN IT-BERUF

Zunächst lernen wir den Unterschied zwischen dualem Studium, dualer Ausbildung
und der rein schulische Ausbildung. Über die ersten beiden wollen wir reden.



In den dualen Ausbildungen lernt man praktisch und gegen Bezahlung in einem
Betrieb und flankiert wird das durch eine schulische Ausbildung entweder in
einer Hoch- oder Berufsschule. Letzteres wäre das, was man unter einer dualen
Ausbildung versteht. Insgesamt führt die Ausbildung seit 2020 zu sieben
möglichen Ausbildungsberufen:

 * Fachinformatiker*in Anwendungsentwicklung, für alle die später gerne
   programmiern möchten
 * Fachinformatiker*in Systemintegration, für alle die später als
   Administrator*in tätig sein möchten
 * Fachinformatiker*in Prozessanalyse, mit der man später KI programmiert oder
   SAP implementiert
 * Fachinformatiker*in digitale Vernetzung, mit der man später z.B. IoT-Produkte
   entwickeln kann.
 * IT-Systemelektroniker*in, für alle, die Lust auf Hardwarebauen haben
 * Kauffrau/-mann für Digitalisierungsmanagement, mit der man später digitale
   Prozesse in Betrieben optmiert, und
 * Kauffrau/-mann für IT-Systemmanagement, für alle, die später IT verkaufen
   möchten.

Die IT-Ausbildungsberufe sind unter Männern die zweibeliebteste Gattung, unter
Frauen sehen sie allerdings erst an Platz zehn.

Diese duale Ausbildung dauert üblicherweise 3 Jahre, wird meist auf 2,5 Jahre
verkürzt, kann im Extremfall aber auch auf 1,5 Jahre halbiert werden. Eine
Abschlussprüfung findet anders als man denken würde nicht erst am Ende der
Ausbildung statt. Stattdessen gibt es eine über die Gesamtzeit „gestreckte
Abschlussprüfung“, deren erster Teil nach 18 Monaten für alle sieben
Ausbildungsberufe identisch abgelegt wird. Die Ausbildung beginnt damit breit
gefächert und erst danach geht es tief in die Spezialisierung. Ganz zum Schluss
der Ausbildung kommt das Abschlussprojekt, eine Art „Gesellenstück“ an dem man
zwischen 40 und 80 Stunden arbeitet, sowie die Präsentation desselben, einem 15
minütigen Fachgespräch darüber und einer schriftliche Dokumentation, die
zwischen 30 und 60 Seiten zählt.

Ausbildungen bringen einem aus Stefans Sicht mehr Praxiswissen und sie sind
anerkannt und sehr gefragt.

Entscheidend für den Erfolg ist, dass man einen Betrieb findet, der einen
anständig an die Hand nimmt und ausbildet und für den man nicht nur eine billige
Arbeitskraft ist. Hier muss man ganz zu Beginn gut drauf schauen, wo man
gelandet ist und ob es eine gute Idee ist, die gesamte Ausbildung im Betrieb zu
bleiben.

Ein Studium ist dahingehend akademischer angelegt. Im dualen Studium arbeitet
man aber ebenso praktisch in einem Betrieb, welcher nicht nur die
Studiengebühren von 25.000 EUR übernimmt, sondern einem auch ein Gehalt von
1.200 EUR brutto zahlt. Im Gegenzug bindet man sich nach Abschluss des Studiums
für anderthalb bis zwei Jahre an den Betrieb – oft will man tatsächlich aber
auch gar nicht weg.

Insgesamt können wir festhalten, dass sowohl Marcel als auch Stefan den Weg
einer Ausbildung oder eines dualen Studiums sehr empfehlen können.


KEINE SCHAUNOTIZEN

DUALES STUDIUM MIT GERDA FELDHAUS, ELENA HOLLEN UND MARKUS AMSHOVE –
ANWENDUNGSENTWICKLER-PODCAST #110

In dieser Episode seines Anwendungsentwickler-Podcasts diskutiert Stefan mit
Gerda Feldhaus, Elena Hollen und Markus Amshove die Vor- und Nachteile eines
dualen Studium.

DER IT-BERUFE-PODCAST

Stefans IT-Berufe-Podcast bringt seit 2015 Inhalte rund um die Ausbildung in den
verschiedenen IT-Berufen.

FACHINFORMATIKER.DE

Fachinformatiker.de ist laut eigener Aussage die größte IT-Community rund um
Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Revision 558: Per dualer Ausbildung oder dualem Studium in den IT-Beruf

<p>Schepp und Peter nahmen die Veröffentlichung der Safari Technology Previews <a href="https://webkit.org/blog/13686/release-notes-for-safari-technology-preview-161/">161</a> und <a href="https://webkit.org/blog/13703/release-notes-for-safari-technology-preview-162/">162</a> zum Anlass, die dort frisch implementierten Features zu diskutieren und zu kommentieren.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:25] Best of Safari Technology Preview</dt>
<dd>Los geht es mit neuen Media-Query-Features, speziell <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion"><code>prefers-reduced-motion</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast"><code>prefers-contrast</code></a> (die in den Previews nicht neu sind, aber jetzt besser debugged werden können). Wir diskutieren die Hürden im praktischen Einsatz dieser Features (sowie von <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme"><code>prefers-color-scheme</code></a>) und erinnern an <a href="https://blog.codinghorror.com/a-tribute-to-the-windows-31-hot-dog-stand-color-scheme/">Hotdog Stand</a>. Die Unterstützung von <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@property"><code>@property</code></a> fehlt nach den neuesten Safari-Updates nun nur noch <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1684605">in Firefox</a>, aber insgesamt sieht es für das <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API">CSS Typed OM</a> und das Houdini-Projekt eher nicht so glänzend aus (<a href="https://workingdraft.de/534/">Working Draft berichtete bereits</a>). Über Fragen des Umgangs mit immer komplexerem CSS kommen wir zum Thema <a href="https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/">Selektor-Performance von <code>:has()</code></a>, die sich mit dem <a href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool/">Profi-Profiling-Tool von Chrome</a> messen lässt. Die Unterstützung von <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid"><code>:user-invalid</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid"><code>:user-valid</code></a> feiern wir marginal enthusiastischer als die von <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Assertions#other_assertions">Lookbehind Assertions in Regulären Ausdrücken</a> und wir nehmen die (beinahe) bestehende Existenz des <a href="https://github.com/tc39/proposal-resizablearraybuffer">ResizableArrayBuffer</a> zur Kenntnis. Safari wird nun als letzter fehlender Browser Unterstützung für <a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas">OffscreenCanvas</a> bekommen, was Peter dazu bringt, <a href="https://www.peterkroener.de/canvas-hardwarebeschleunigung-per-javascript-selektiv-abschalten/">seine jüngsten Abenteuer rund um <code>willReadFrequently</code></a> nochmal wiederzugeben. Zum Ende hin quatschen wir noch über <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin-trim"><code>margin-trim</code></a>, CSS Subgrids, <a href="https://web.dev/declarative-shadow-dom/">Declarative Shadow DOM</a>,  <a href="https://de.wikipedia.org/wiki/ECMAScript_for_XML">E4X</a>,  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals"><code>HTMLElement.attachInternals()</code></a> bzw. <a href="https://web.dev/more-capable-form-controls/">Form-associated custom elements</a>, globale Event Handler und die Zukunft von Safari und der ganzen weiten Browserwelt.</dd>
</dl>


Schepp und Peter nahmen die Veröffentlichung der Safari Technology Previews 161
und 162 zum Anlass, die dort frisch implementierten Features zu diskutieren und
zu kommentieren.


SCHAUNOTIZEN

[00:01:…

Schepp und Peter nahmen die Veröffentlichung der Safari Technology Previews 161
und 162 zum Anlass, die dort frisch implementierten Features zu diskutieren und
zu kommentieren.


SCHAUNOTIZEN

[00:01:25] BEST OF SAFARI TECHNOLOGY PREVIEW

Los geht es mit neuen Media-Query-Features, speziell prefers-reduced-motion und
prefers-contrast (die in den Previews nicht neu sind, aber jetzt besser debugged
werden können). Wir diskutieren die Hürden im praktischen Einsatz dieser
Features (sowie von prefers-color-scheme) und erinnern an Hotdog Stand. Die
Unterstützung von @property fehlt nach den neuesten Safari-Updates nun nur noch
in Firefox, aber insgesamt sieht es für das CSS Typed OM und das Houdini-Projekt
eher nicht so glänzend aus (Working Draft berichtete bereits). Über Fragen des
Umgangs mit immer komplexerem CSS kommen wir zum Thema Selektor-Performance von
:has(), die sich mit dem Profi-Profiling-Tool von Chrome messen lässt. Die
Unterstützung von :user-invalid und :user-valid feiern wir marginal
enthusiastischer als die von Lookbehind Assertions in Regulären Ausdrücken und
wir nehmen die (beinahe) bestehende Existenz des ResizableArrayBuffer zur
Kenntnis. Safari wird nun als letzter fehlender Browser Unterstützung für
OffscreenCanvas bekommen, was Peter dazu bringt, seine jüngsten Abenteuer rund
um willReadFrequently nochmal wiederzugeben. Zum Ende hin quatschen wir noch
über margin-trim, CSS Subgrids, Declarative Shadow DOM, E4X,
HTMLElement.attachInternals() bzw. Form-associated custom elements, globale
Event Handler und die Zukunft von Safari und der ganzen weiten Browserwelt.

Revision 557: Neues in WebKit

<p>Über Domain-Driven Design (DDD) sprechen Hans und Vanessa mit dem Gast <a href="https://www.fbenz.net/">Florian Benz</a>, VP of Engineering bei <a href="https://de.scalable.capital/">Scalable Capital</a>. Florian beleuchtet dabei vor Allem dir Umsetzung samt Stolpersteinen in der Realität.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://demodern.de/jobs?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/09/banner_demodern.jpg" alt="" /></a></p>
<div class="message_content">
<p>Wir sind Demodern – wir sehen uns als Agentur einer neuen Generation: offen, unkompliziert, 100% digital. Gegründet von Designern, liegt unsere Leidenschaft in innovativen, digitalen Inszenierungen und einer sinnvollen User Experience. Wir entwickeln unsere Projekte gemeinsam mit Spezialisten aus Strategie, Design, UX und Development. &#8222;Let&#8217;s push things forward&#8220; ist unser Leitsatz und Philosophie. Darin steckt unsere eigene Veränderung, aber auch, Projekte neu zu betrachten und zu rechtem Mehrwert zu bringen.</p>
<p>Ihr könnt gerne Kontakt zu <a href="https://www.linkedin.com/in/florian-herlings/">Florian</a> oder <a href="https://linkedin.com/in/marisa-ingwersen-9753a9a4">Marisa</a> direkt aufnehmen &#8211; oder ihr schaut auf <a href="https://demodern.de/jobs?ref=workingdraft.de">demodern.de/jobs</a> vorbei.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[02:14:00] Domain-Driven Design</dt>
<dd>Florian begann die ersten Schritte mit Domain-Driven Design (im Folgenden mit &#8222;DDD&#8220; abgekürzt) in Teams bei Scalable Capital im Jahr 2019. Zu den größten Herausforderungen zählte, wie man das theoretische Wissen über DDD konkret umsetzen. Bei der Theorie geht Florian speziell auf folgende Teile von DDD ein: <strong>Explorativ</strong>, <strong>strategisch</strong> und <strong>taktisch</strong>. Genauer erläutert er die folgenden Komponenten von taktischem Design: <em>Value Objects, Entities, Aggregrates, Repositories, Services </em>und<em> Factories.</em></dd>
<dd>Ein Hauptbestandteil von DDD ist es, eine gemeinsame Sprache zu entwickeln. Das ist jedoch gar nicht so einfach. Vor allem, wenn die allgemeine Code-Sprache bei Projekten oft Englisch ist, aber die Dokumentationssprache z.B. Deutsch. Doch wenn das Team einmal so weit ist, macht es die gemeinsame Sprache für alle einfacher. Für Entwickler:innen im Speziellen, den Code zu strukturieren und eine sehr wichtige Frage zu beantworten: Wo gehört dieser Code überhaupt hin?</dd>
</dl>
<h3>Links</h3>
<ul>
<li><a href="https://www.wiley.com/en-us/Patterns,+Principles,+and+Practices+of+Domain+Driven+Design-p-9781118714706">Patterns, Principles, and Practices of Domain-Driven Design</a><br />
Scott Millett, Nick Tune</li>
<li><a href="https://www.domainlanguage.com/ddd/">&#8222;The Big Blue Book&#8220;</a><br />
Domain-Driven Design: Tackling Complexity in the Heart of Software —Eric Evans</li>
<li><a href="https://www.youtube.com/watch?v=2JB1_e5wZmU">Domain Modeling Made Functional </a>—Scott Wlaschin, KanDDDinsky 2019</li>
<li><a href="https://www.youtube.com/watch?v=IcgmSRJHu_8">Making Impossible States Impossible</a>—Richard Feldman, elm-conf 2016</li>
<li><a href="https://dev.to/flbenz/kotlin-and-domain-driven-design-value-objects-4m32">Kotlin and Domain-Driven Design-Value Objects</a>—Florian Benz 2020</li>
<li><a href="https://github.com/ddd-crew/welcome-to-ddd">DDD Crew</a> &#8211; Welcome to Domain-Driven Design (DDD)<br />
&#8222;This project contains definitions of DDD and fundamental concepts to reduce the learning curve and confusion.&#8220;</li>
</ul>
<h3>Verwandte Revisionen</h3>
<ul>
<li><a href="https://workingdraft.de/314/">Revision 314: DDD, CQRS und WTF</a></li>
</ul>


Über Domain-Driven Design (DDD) sprechen Hans und Vanessa mit dem Gast Florian
Benz, VP of Engineering bei Scalable Capital. Florian beleuchtet dabei vor Allem
dir Umsetzung samt Stolpersteinen in der…

Über Domain-Driven Design (DDD) sprechen Hans und Vanessa mit dem Gast Florian
Benz, VP of Engineering bei Scalable Capital. Florian beleuchtet dabei vor Allem
dir Umsetzung samt Stolpersteinen in der Realität.


UNSER SPONSOR



Wir sind Demodern – wir sehen uns als Agentur einer neuen Generation: offen,
unkompliziert, 100% digital. Gegründet von Designern, liegt unsere Leidenschaft
in innovativen, digitalen Inszenierungen und einer sinnvollen User Experience.
Wir entwickeln unsere Projekte gemeinsam mit Spezialisten aus Strategie, Design,
UX und Development. „Let’s push things forward“ ist unser Leitsatz und
Philosophie. Darin steckt unsere eigene Veränderung, aber auch, Projekte neu zu
betrachten und zu rechtem Mehrwert zu bringen.

Ihr könnt gerne Kontakt zu Florian oder Marisa direkt aufnehmen – oder ihr
schaut auf demodern.de/jobs vorbei.


SCHAUNOTIZEN

[02:14:00] DOMAIN-DRIVEN DESIGN

Florian begann die ersten Schritte mit Domain-Driven Design (im Folgenden mit
„DDD“ abgekürzt) in Teams bei Scalable Capital im Jahr 2019. Zu den größten
Herausforderungen zählte, wie man das theoretische Wissen über DDD konkret
umsetzen. Bei der Theorie geht Florian speziell auf folgende Teile von DDD ein:
Explorativ, strategisch und taktisch. Genauer erläutert er die folgenden
Komponenten von taktischem Design: Value Objects, Entities, Aggregrates,
Repositories, Services und Factories.

Ein Hauptbestandteil von DDD ist es, eine gemeinsame Sprache zu entwickeln. Das
ist jedoch gar nicht so einfach. Vor allem, wenn die allgemeine Code-Sprache bei
Projekten oft Englisch ist, aber die Dokumentationssprache z.B. Deutsch. Doch
wenn das Team einmal so weit ist, macht es die gemeinsame Sprache für alle
einfacher. Für Entwickler:innen im Speziellen, den Code zu strukturieren und
eine sehr wichtige Frage zu beantworten: Wo gehört dieser Code überhaupt hin?


LINKS

 * Patterns, Principles, and Practices of Domain-Driven Design
   Scott Millett, Nick Tune
 * „The Big Blue Book“
   Domain-Driven Design: Tackling Complexity in the Heart of Software —Eric
   Evans
 * Domain Modeling Made Functional —Scott Wlaschin, KanDDDinsky 2019
 * Making Impossible States Impossible—Richard Feldman, elm-conf 2016
 * Kotlin and Domain-Driven Design-Value Objects—Florian Benz 2020
 * DDD Crew – Welcome to Domain-Driven Design (DDD)
   „This project contains definitions of DDD and fundamental concepts to reduce
   the learning curve and confusion.“


VERWANDTE REVISIONEN

 * Revision 314: DDD, CQRS und WTF

Revision 556: Domain-Driven Design

<p><a href="https://chat.openai.com/">Chat GPT</a> ist in aller Munde, was Vanessa und (besonders) Hans und Peter zu einer lebhaften Diskussion rund um AI und ML speziell im Webdev-Kontext verleitet.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://workshops.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/12/Working-Draft-Banner.jpg" alt="" /></a></p>
<div class="message_content">
<p>Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.</p>
<p>Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.</p>
<p>Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei <a href="https://workshops.de/workingdraft?ref=workingdraft.de">Workshops.DE</a> genau richtig.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:18] Chat GPT &amp; Co</dt>
<dd>Nach einem kurzen Begriffsklärungsversuch debattieren wir um ChatGPG und Co (v.a. Githubs <a href="https://github.com/features/copilot">Copilot</a>, Adobes <a href="https://podcast.adobe.com/enhance">Enhance Speech</a>, und Descripts <a href="https://www.youtube.com/watch?v=8ABeZ0cxLNE">textbasiertem Videoeditor</a>). Wir versuchen Use Cases für die Tools zu kategorisieren, die darin inhärenten Chancen und Risiken abzuwägen und überlegen, inwiefern Quellennachverfolgung und <a href="https://de.wikipedia.org/wiki/Explainable_Artificial_Intelligence">Explainable AI</a> denkbar und glaubwürdig sind. Am Ende stellt sich die Frage, ob in Zukunft ganze hochwertige Webseiten automatisch generiert werden können oder ob AI auch weiterhin daran scheitert, Algorithmen für sortierte Arrays nicht nur auszuspucken, sondern auch zu bewerten.</dd>
</dl>


Chat GPT ist in aller Munde, was Vanessa und (besonders) Hans und Peter zu einer
lebhaften Diskussion rund um AI und ML speziell im Webdev-Kontext verleitet.


UNSER SPONSOR



Workshops.DE bietet IT-…

Chat GPT ist in aller Munde, was Vanessa und (besonders) Hans und Peter zu einer
lebhaften Diskussion rund um AI und ML speziell im Webdev-Kontext verleitet.


UNSER SPONSOR



Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet
Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über
80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig
unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative
Weiterbildungsangebote zu schaffen.

Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und
Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker,
Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale
Angular.DE, ReactJS.DE und VueJS.DE.

Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich
Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid
ihr bei Workshops.DE genau richtig.


SCHAUNOTIZEN

[00:02:18] CHAT GPT & CO

Nach einem kurzen Begriffsklärungsversuch debattieren wir um ChatGPG und Co
(v.a. Githubs Copilot, Adobes Enhance Speech, und Descripts textbasiertem
Videoeditor). Wir versuchen Use Cases für die Tools zu kategorisieren, die darin
inhärenten Chancen und Risiken abzuwägen und überlegen, inwiefern
Quellennachverfolgung und Explainable AI denkbar und glaubwürdig sind. Am Ende
stellt sich die Frage, ob in Zukunft ganze hochwertige Webseiten automatisch
generiert werden können oder ob AI auch weiterhin daran scheitert, Algorithmen
für sortierte Arrays nicht nur auszuspucken, sondern auch zu bewerten.

Revision 555: ChatGPT & Co

<p>Diese Revision traf eine rekordverdächtigen Anzahl Gäste und Hosts aufeinander: Vanessa, Stefan und Schepp begrüßten Joe Ray Gregory, David Müllerchen und Robin Böhm an ihrem virtuellen Kaminfeuer.</p>
<p>Joe aus Hamburg kennt Ihr aus den Revisionen <a href="https://workingdraft.de/520/">Revision 520: Unit-Testing / Testing Library</a> und <a href="https://workingdraft.de/552/">Revision 552: Frontend Development im Jahr 2023</a>.</p>
<p>Robin aus Berlin (<a href="https://twitter.com/robinboehm">Twitter</a> / <a href="https://workshops.de/">Web</a>) wird nur langjährigen Hörer*innen von seinem Besuch vor 10 Jahren aus <a href="https://workingdraft.de/130/">Revision 130: AngularJS – Superheroic JavaScript MVW Framework</a> ein Begriff sein.</p>
<p>David Müllerchen (<a href="https://twitter.com/webdave_de">Twitter</a> / <a href="https://webdave.de/start">Web</a>), ebenfalls aus Hamburg, bildete den Dritten im Bunde.</p>
<p>Alle unsere Gäste sind Webentwickler, Berater, Trainer, Meetup-Organisatoren und David sogar <a href="https://www.twitch.tv/webdave_de">Twitcher</a>. Die einen präferieren Angular, der andere eher Vue.js. Aber vor allem haben sie alle drei Vorerfahrung im Konferenzorganisieren und haben sich zuletzt für eine große Community-Konferenz zusammengetan. Wie das kam und welchen Hürden die drei und ihr Team auf dem Weg dahin zu überwinden hatten, darüber reden wir in dieser Ausgabe!</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:59] Konferenzorganisation in Zeiten einer Pandemie</dt>
<dd>Den Anfang nahm alles mit der Angular-Konferenz <a href="https://2019.ng-de.org/">NG-DE 2019</a>, die sehr viel Aufwand, aber auch ein großer Erfolg war und die sich für eine Wiederholung empfahl. Trotz Ausstiegs seiner Co-Organisatoren aufgrund von Erschöpfung, buchte Robin die Location erneut für das darauffolgende Jahr. Wir wissen alle, was dann geschah: 1 Pandemie. Von nun an wurde es eine Zitterpartie, ob eine Konferenz in 2020 überhaupt noch möglich werden würde, und wenn nicht, wie sich die Location bei all verhalten würde. Zum Glück hat sie mitgezogen. In 2020 wurde aus der geplanten Konferenz nichts mehr und alle Bemühungen um das Event wurden auf Eis gelegt. Das änderte sich in 2021, als sich nicht nur die pandemische Situation verbesserte, sondern Robin in David und Joe auch neue Mitstreiter fand. Joes Hinzustoßen mündete in einem zusätzlichen Konferenztag, welcher dem Framework Vue.js gewidmet werden sollte.</p>
<p>Die eigentliche Konferenz-Organisation und die Sprecherauswahl baute auf lange erarbeitete Blaupausen der JSConf.EU, ergänzt um Tipps anderer Organisatoren wie denjenigen der JSUnconf, der RuhrJS oder des JSKongress&#8216;. Für die Auswahl der Vorträge hieß das, dass man einen &#8222;Call for Papers&#8220; ausgerufen hatte und die eintrudelnden Vorträge anonymisiert und in einen &#8222;Blind-Voting&#8220;-Prozess überführt wurden.</p>
<p>Neben der aufwendigen Sprecher*innen-Auswahl musste natürlich ein Budget geplant und Ticketpreise davon abgeleitet werden. Es mussten Sprecherreisen und -unterkünfte organisiert und gebucht werden. Es galt, eine Location für die Abendveranstaltung zu finden, Webseiten zu bauen, Promomaterial herzustellen, Werbung zu machen.</p>
<p>Und das Team legte auch viel Wert darauf, verantwortungsvoll auf die Situation mit der Pandemie einzugehen und Masken und Tests anzubieten, Systeme zu entwickeln wie Menschenansammlungen vermieden werden konnten, und Besucher*innen die Möglichkeit zu geben, zu signalisieren wenn Sie lieber mit Maskentragenden Gespräche führen wollten.</p>
<p>Nachdem all das auf Spur war, wurde es auf den letzten Metern doch noch &#8222;spannend&#8220;, denn es stellte sich heraus, dass zeitgleich eine große Messe in Berlin angesetzt war, die die Preise der Unterkünfte hat in die Höhe schnellen lassen, bis hin zu dem Punkt wo Teilnehmende es sich nicht mehr hätten leisten können. Auch hier zog die Location, aber auch die Community mit und das Event wurde kurzerhand um wenige Tage verlegt.</p>
<p>Am Ende wurden <a href="https://ng-de.org/">NG DE 2022</a> und <a href="https://conf.vuejs.de/">vuejs.de Conf</a> Gott sei Dank erneut ein großer Erfolg und hat sich all die Mühe und das Zittern gelohnt. 🥳</dd>
</dl>


Diese Revision traf eine rekordverdächtigen Anzahl Gäste und Hosts aufeinander:
Vanessa, Stefan und Schepp begrüßten Joe Ray Gregory, David Müllerchen und Robin
Böhm an ihrem virtuellen Kaminfeuer.

J…

Diese Revision traf eine rekordverdächtigen Anzahl Gäste und Hosts aufeinander:
Vanessa, Stefan und Schepp begrüßten Joe Ray Gregory, David Müllerchen und Robin
Böhm an ihrem virtuellen Kaminfeuer.

Joe aus Hamburg kennt Ihr aus den Revisionen Revision 520: Unit-Testing /
Testing Library und Revision 552: Frontend Development im Jahr 2023.

Robin aus Berlin (Twitter / Web) wird nur langjährigen Hörer*innen von seinem
Besuch vor 10 Jahren aus Revision 130: AngularJS – Superheroic JavaScript MVW
Framework ein Begriff sein.

David Müllerchen (Twitter / Web), ebenfalls aus Hamburg, bildete den Dritten im
Bunde.

Alle unsere Gäste sind Webentwickler, Berater, Trainer, Meetup-Organisatoren und
David sogar Twitcher. Die einen präferieren Angular, der andere eher Vue.js.
Aber vor allem haben sie alle drei Vorerfahrung im Konferenzorganisieren und
haben sich zuletzt für eine große Community-Konferenz zusammengetan. Wie das kam
und welchen Hürden die drei und ihr Team auf dem Weg dahin zu überwinden hatten,
darüber reden wir in dieser Ausgabe!


SCHAUNOTIZEN

[00:00:59] KONFERENZORGANISATION IN ZEITEN EINER PANDEMIE

Den Anfang nahm alles mit der Angular-Konferenz NG-DE 2019, die sehr viel
Aufwand, aber auch ein großer Erfolg war und die sich für eine Wiederholung
empfahl. Trotz Ausstiegs seiner Co-Organisatoren aufgrund von Erschöpfung,
buchte Robin die Location erneut für das darauffolgende Jahr. Wir wissen alle,
was dann geschah: 1 Pandemie. Von nun an wurde es eine Zitterpartie, ob eine
Konferenz in 2020 überhaupt noch möglich werden würde, und wenn nicht, wie sich
die Location bei all verhalten würde. Zum Glück hat sie mitgezogen. In 2020
wurde aus der geplanten Konferenz nichts mehr und alle Bemühungen um das Event
wurden auf Eis gelegt. Das änderte sich in 2021, als sich nicht nur die
pandemische Situation verbesserte, sondern Robin in David und Joe auch neue
Mitstreiter fand. Joes Hinzustoßen mündete in einem zusätzlichen Konferenztag,
welcher dem Framework Vue.js gewidmet werden sollte.



Die eigentliche Konferenz-Organisation und die Sprecherauswahl baute auf lange
erarbeitete Blaupausen der JSConf.EU, ergänzt um Tipps anderer Organisatoren wie
denjenigen der JSUnconf, der RuhrJS oder des JSKongress‘. Für die Auswahl der
Vorträge hieß das, dass man einen „Call for Papers“ ausgerufen hatte und die
eintrudelnden Vorträge anonymisiert und in einen „Blind-Voting“-Prozess
überführt wurden.

Neben der aufwendigen Sprecher*innen-Auswahl musste natürlich ein Budget geplant
und Ticketpreise davon abgeleitet werden. Es mussten Sprecherreisen und
-unterkünfte organisiert und gebucht werden. Es galt, eine Location für die
Abendveranstaltung zu finden, Webseiten zu bauen, Promomaterial herzustellen,
Werbung zu machen.

Und das Team legte auch viel Wert darauf, verantwortungsvoll auf die Situation
mit der Pandemie einzugehen und Masken und Tests anzubieten, Systeme zu
entwickeln wie Menschenansammlungen vermieden werden konnten, und Besucher*innen
die Möglichkeit zu geben, zu signalisieren wenn Sie lieber mit Maskentragenden
Gespräche führen wollten.

Nachdem all das auf Spur war, wurde es auf den letzten Metern doch noch
„spannend“, denn es stellte sich heraus, dass zeitgleich eine große Messe in
Berlin angesetzt war, die die Preise der Unterkünfte hat in die Höhe schnellen
lassen, bis hin zu dem Punkt wo Teilnehmende es sich nicht mehr hätten leisten
können. Auch hier zog die Location, aber auch die Community mit und das Event
wurde kurzerhand um wenige Tage verlegt.

Am Ende wurden NG DE 2022 und vuejs.de Conf Gott sei Dank erneut ein großer
Erfolg und hat sich all die Mühe und das Zittern gelohnt. 🥳

Revision 554: Konferenzorganisation in Zeiten einer Pandemie

<p>Nachdem sich Vanessa und Peter <a href="https://workingdraft.de/549/">in ihrem ersten Anlauf</a> noch um ein strukturiertes Abarbeiten des <a href="https://survey.devographics.com/survey/state-of-js/2022">Fragenkatalogs der 2022er State of JS-Umfrage</a> bemüht hatten, ergehen wir uns dieses Mal in eher freier Assoziation, schaffen es dabei aber auch, die verbleibenden 98% der Umfrage in einer Revision abzufertigen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:58] <a href="https://stateofjs.com/en-us/">State of JS</a></dt>
<dd>Die zweite Hälfte des State of JS befasst sich mit Tools und Frameworks, die wir eher abstrakt diskutieren. Zu den relevanten Fragen zählt die von State of JS getroffene Unterscheidung zwischen Frontend- und &#8222;Render-Frameworks&#8220; (<a href="https://nextjs.org/">Next</a>, <a href="https://nuxtjs.org/">Nuxt</a>, <a href="https://www.gatsbyjs.com/">Gatsby</a> etc.), die Frage inwiefern Frontend-Frameworks eher ein Management als ein Entwickler-Tool sind und wie Web Components dazu passen. Ob wir jemals weniger Frameworks haben (oder werden haben wollen) und ob uns der <a href="https://de.wikipedia.org/wiki/Milit%C3%A4risch-industrieller_Komplex">framework-industrielle Komplex</a> überhaupt lässt, bleibt trotz des kreativen Einsatzes von Auto-Analogien (u.A. zur <a href="https://de.wikipedia.org/wiki/W%C3%A4hlhebel#Revolver-_und_Kr%C3%BCckstockschaltung">Pistolenschaltung</a>) ungeklärt. Zu Sinn und Zweck von Mobile Frameworks haben wir eher wenig beizutragen, feiern aber Browser-Devtools wie DOM-Breakpoints (<a href="https://developer.chrome.com/docs/devtools/javascript/breakpoints/">Chrome</a>, <a href="https://firefox-source-docs.mozilla.org/devtools-user/debugger/break_on_dom_mutation/index.html">Firefox</a>), Hover-State-Enforcing (<a href="https://coderwall.com/p/ttavvw/force-element-state-in-chrome-inspector">Chrome</a>, <a href="https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#page-inspector-how-to-examine-and-edit-css-viewing-common-pseudo-classes">Firefox</a>), Resource Overrides (<a href="https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii">Chrome-Extension</a>) und In-Devtools-Suchfunktionen gründlich ab (und anwesende Performance-Päpste finden darüber hinaus an an <a href="https://www.chromium.org/developers/how-tos/trace-event-profiling-tool/">Chromes Trace-Tools gefallen</a>). Weitere ehrenswerte Nennungen erfahren <a href="https://sentry.io/welcome/">Sentry</a>, die (einigermaßen) gute alte <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Formularvalidierung</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog?retiredLocale=de"><code>&lt;dialog&gt;</code></a> und <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details?retiredLocale=de"><code>&lt;details&gt;</code></a>, die <a href="https://developer.chrome.com/docs/web-platform/view-transitions/">View Transition API</a> und generell alles aus der <a href="https://workingdraft.de/552/">Revision 552 zu Frontend Development im Jahr 2023</a>.</dd>
</dl>


Nachdem sich Vanessa und Peter in ihrem ersten Anlauf noch um ein strukturiertes
Abarbeiten des Fragenkatalogs der 2022er State of JS-Umfrage bemüht hatten,
ergehen wir uns dieses Mal in eher freier A…

Nachdem sich Vanessa und Peter in ihrem ersten Anlauf noch um ein strukturiertes
Abarbeiten des Fragenkatalogs der 2022er State of JS-Umfrage bemüht hatten,
ergehen wir uns dieses Mal in eher freier Assoziation, schaffen es dabei aber
auch, die verbleibenden 98% der Umfrage in einer Revision abzufertigen.


SCHAUNOTIZEN

[00:00:58] STATE OF JS

Die zweite Hälfte des State of JS befasst sich mit Tools und Frameworks, die wir
eher abstrakt diskutieren. Zu den relevanten Fragen zählt die von State of JS
getroffene Unterscheidung zwischen Frontend- und „Render-Frameworks“ (Next,
Nuxt, Gatsby etc.), die Frage inwiefern Frontend-Frameworks eher ein Management
als ein Entwickler-Tool sind und wie Web Components dazu passen. Ob wir jemals
weniger Frameworks haben (oder werden haben wollen) und ob uns der
framework-industrielle Komplex überhaupt lässt, bleibt trotz des kreativen
Einsatzes von Auto-Analogien (u.A. zur Pistolenschaltung) ungeklärt. Zu Sinn und
Zweck von Mobile Frameworks haben wir eher wenig beizutragen, feiern aber
Browser-Devtools wie DOM-Breakpoints (Chrome, Firefox), Hover-State-Enforcing
(Chrome, Firefox), Resource Overrides (Chrome-Extension) und
In-Devtools-Suchfunktionen gründlich ab (und anwesende Performance-Päpste finden
darüber hinaus an an Chromes Trace-Tools gefallen). Weitere ehrenswerte
Nennungen erfahren Sentry, die (einigermaßen) gute alte Formularvalidierung,
<dialog> und <details>, die View Transition API und generell alles aus der
Revision 552 zu Frontend Development im Jahr 2023.

Revision 553: State of JS2, Framework Boogaloo

<p>Zum Jahreswechsel haben wir uns mit <a href="https://jgreg.dev/">Joe Ray Gregory</a> (<a href="https://twitter.com/joeraygregory">@joyraygregory</a>) hingesetzt und zusammen darüber orakelt, welche neuen Tools und Paradigmen die Frontend Entwicklung im Jahr 2023 prägen könnten. Joe ist Frontend-Entwickler und Trainer aus Hamburg und Ihr kennt ihn vielleicht aus der <a href="https://workingdraft.de/520/">Revision 520 über Unit-Testing</a>.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://workshops.de/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/12/Working-Draft-Banner.jpg" alt="" /></a></p>
<div class="message_content">
<p>Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über 80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative Weiterbildungsangebote zu schaffen.</p>
<p>Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker, Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale Angular.DE, ReactJS.DE und VueJS.DE.</p>
<p>Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid ihr bei <a href="https://workshops.de/workingdraft?ref=workingdraft.de">Workshops.DE</a> genau richtig.</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:45] Frontend Development im Jahr 2023</dt>
<dd>Wir reden natürlich über Frontend-Frameworks und denken, dass der Schwenk hin zu Frameworks fortsetzen wird, bei denen Server-Side-Rendering und so wenig JaVaScript im Client der Standard ist. Prominentestes Beispiel hierfür ist <a href="https://astro.build/">Astro</a>, aber auch <a href="https://nextjs.org/">NextJS</a> und <a href="https://nuxtjs.org/">NuxtJS</a> entwickeln sich in diese Richtung.</p>
<p>Außerdem werden sich Web Components als Auslieferungsform weiter etablieren.</p>
<p>Für eine bessere Performance wird alles weiter in Richtung &#8222;Actor Model&#8220; entwickelt, also dass ein Main-Thread möglichst viel Arbeit in separate Threads auslagert (höre auch <a href="https://workingdraft.de/329/">Revision 329 zum Actor Model</a>). Eine Schlüsselrolle wird das Tool <a href="https://partytown.builder.io/">Partytown</a> spielen.</p>
<p>Als Unterstützung bei der Entwicklung werden Mikro-Bibliotheken aus dem <a href="https://unjs.io/">UnJS</a>-Pool große gebräuchliche Bibliotheken wie Axios oder auch Lodash ersetzen.</p>
<p>Im Testing wird <a href="https://playwright.dev/">Playwright</a> seinen Marktanteil weiterausbauen.</p>
<p>Für die Komponenten-basierte Entwicklung wird <a href="https://storybook.js.org/">Storybook</a> zwar das Goto-Werkzeug bleiben, aber daneben wird sich <a href="https://histoire.dev/">Histoire</a> aus dem Vue-Umfeld ähnlich etablieren können wie zuvor auch schon <a href="https://vitejs.dev/">Vite</a>.</p>
<p>In Sachen Bundler und Build-Tools kommt allerlei Neues auf uns zu: <a href="https://turbo.build/pack">Turbopack</a> wird der Nachfolger von Webpack und dann gibt es vom Erfinder von Babel noch eine ganze Build-Suite namens <a href="https://rome.tools/">Rome</a>, die Code-Formattier, Code-Linter, Com- &amp; Transpiler, Bundler, sowie das Testing-Tool aus einer Hand sein will. Beiden ist gemeinsam, dass sie aus Performance-Gründen auf Rust bauen, was derzeit auch im Trend zu sein scheint und von <a href="https://swc.rs/">SWC</a>, Parcels <a href="https://github.com/parcel-bundler/lightningcss">Lightning CSS</a> und <a href="https://esbuild.github.io/">esbuild</a> (allerdings in Go) vorexerziert wurde. Darüber, ob das immer nötig ist oder ob ein wenig Nacharbeit an JavaScript-Code nicht der erste Zwischenstopp sein müsste, <a href="https://marvinh.dev/blog/speeding-up-javascript-ecosystem/">fragt sich da Marvin Hagemeister</a>.</p>
<p>Aus dem CSS-Bereich kommend werden die <a href="https://www.bram.us/2021/03/28/css-container-queries-a-first-look-and-demo/">Container Queries</a> ganz viel neue Möglichkeiten eröffnen, sobald diese <a href="https://caniuse.com/css-container-queries">in allen Browsern freigeschaltet sind</a>.</p>
<p>Monorepos werden ein Thema werden, dank exzellentem Tool-Support durch <a href="https://pnpm.io/">pnpm</a>, <a href="https://turbo.build/">Turborepo</a> oder <a href="https://lerna.js.org/">Lerna</a> (das allerdings <a href="https://dev.to/mbarzeev/lerna-is-no-longer-maintained-now-what-part-1-4kd6">nicht mehr maintained wird</a>).</p>
<p>Und schließlich schauen wir auch gespannt darauf, was der NodeJS- und Deno-Konkurrent <a href="https://bun.sh/">Bun</a>, dessen JavaScript-Engine nicht auf Googles V8, sondern auf Apple JavaScriptCore bsisert, zukünftig in die Waagschalde werfen wird.</dd>
</dl>
<h3>[00:00:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://console-ninja.com/">Console Ninja</a></dt>
<dd>VSCode-Erweiterung, um Consolen-Output direkt in der IDE zu haben.</dd>
</dl>


Zum Jahreswechsel haben wir uns mit Joe Ray Gregory (@joyraygregory) hingesetzt
und zusammen darüber orakelt, welche neuen Tools und Paradigmen die Frontend
Entwicklung im Jahr 2023 prägen könnten. Jo…

Zum Jahreswechsel haben wir uns mit Joe Ray Gregory (@joyraygregory) hingesetzt
und zusammen darüber orakelt, welche neuen Tools und Paradigmen die Frontend
Entwicklung im Jahr 2023 prägen könnten. Joe ist Frontend-Entwickler und Trainer
aus Hamburg und Ihr kennt ihn vielleicht aus der Revision 520 über Unit-Testing.


UNSER SPONSOR



Workshops.DE bietet IT-Schulungen für moderne Web-Entwicklung. Dabei arbeitet
Workshops.DE nicht als reiner Vermittler, sondern bildet eine Community aus über
80 Trainer:innen, welche gemeinsam Material erstellen, sich gegenseitig
unterstützen und weiterbilden, um möglichst nachhaltige und hochqualitative
Weiterbildungsangebote zu schaffen.

Ein starker Fokus liegt hierbei auf den Frontend-Frameworks Angular, React und
Vue. Neben diesen gibt es aber auch Weiterbildungen im Bereich Docker,
Kubernetes und Spring Boot. Zum Netzwerk gehören ebenfalls die Community-Portale
Angular.DE, ReactJS.DE und VueJS.DE.

Seid ihr auf der Suche nach einer qualitativen Weiterbildung im Bereich
Web-Entwicklung oder möchtet euch selbst als Trainer:in einbringen? Dann seid
ihr bei Workshops.DE genau richtig.


SCHAUNOTIZEN

[00:01:45] FRONTEND DEVELOPMENT IM JAHR 2023

Wir reden natürlich über Frontend-Frameworks und denken, dass der Schwenk hin zu
Frameworks fortsetzen wird, bei denen Server-Side-Rendering und so wenig
JaVaScript im Client der Standard ist. Prominentestes Beispiel hierfür ist
Astro, aber auch NextJS und NuxtJS entwickeln sich in diese Richtung.



Außerdem werden sich Web Components als Auslieferungsform weiter etablieren.

Für eine bessere Performance wird alles weiter in Richtung „Actor Model“
entwickelt, also dass ein Main-Thread möglichst viel Arbeit in separate Threads
auslagert (höre auch Revision 329 zum Actor Model). Eine Schlüsselrolle wird das
Tool Partytown spielen.

Als Unterstützung bei der Entwicklung werden Mikro-Bibliotheken aus dem
UnJS-Pool große gebräuchliche Bibliotheken wie Axios oder auch Lodash ersetzen.

Im Testing wird Playwright seinen Marktanteil weiterausbauen.

Für die Komponenten-basierte Entwicklung wird Storybook zwar das Goto-Werkzeug
bleiben, aber daneben wird sich Histoire aus dem Vue-Umfeld ähnlich etablieren
können wie zuvor auch schon Vite.

In Sachen Bundler und Build-Tools kommt allerlei Neues auf uns zu: Turbopack
wird der Nachfolger von Webpack und dann gibt es vom Erfinder von Babel noch
eine ganze Build-Suite namens Rome, die Code-Formattier, Code-Linter, Com- &
Transpiler, Bundler, sowie das Testing-Tool aus einer Hand sein will. Beiden ist
gemeinsam, dass sie aus Performance-Gründen auf Rust bauen, was derzeit auch im
Trend zu sein scheint und von SWC, Parcels Lightning CSS und esbuild (allerdings
in Go) vorexerziert wurde. Darüber, ob das immer nötig ist oder ob ein wenig
Nacharbeit an JavaScript-Code nicht der erste Zwischenstopp sein müsste, fragt
sich da Marvin Hagemeister.

Aus dem CSS-Bereich kommend werden die Container Queries ganz viel neue
Möglichkeiten eröffnen, sobald diese in allen Browsern freigeschaltet sind.

Monorepos werden ein Thema werden, dank exzellentem Tool-Support durch pnpm,
Turborepo oder Lerna (das allerdings nicht mehr maintained wird).

Und schließlich schauen wir auch gespannt darauf, was der NodeJS- und
Deno-Konkurrent Bun, dessen JavaScript-Engine nicht auf Googles V8, sondern auf
Apple JavaScriptCore bsisert, zukünftig in die Waagschalde werfen wird.


[00:00:00] KEINE SCHAUNOTIZEN

CONSOLE NINJA

VSCode-Erweiterung, um Consolen-Output direkt in der IDE zu haben.

Revision 552: Frontend Development im Jahr 2023

<p>Mit Gast Alexander Neumann (<a href="https://github.com/fd0">Github</a>), seines Zeichens Entwickler der FOSS-Backup-Software <a href="https://restic.net/">Restic</a> quatschen wir über Backups, Backup-Strategien und Backup-Fails.</p>
<hr><aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://nordvpn.com/workingdraft?ref=workingdraft.de"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 500px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" src="https://workingdraft.de/wp-content/uploads/2022/11/nord-logo-horizontal@1x.png" alt="" /></a></p>
<div class="message_content">
<p>Dieser Podcast wird von NordVPN unterstützt. NordVPN ist ein Premium-VPN-Anbieter, der sich durch regelmäßige Updates mit neuen und praktischen Funktionen von der Konkurrenz abhebt. In Kombination mit einem fairen Preis und der jahrelangen Erfahrung des Teams, das aus Cybersicherheits- und IT-Experten besteht, blickt NordVPN auf eine inzwischen 10-jährige Firmengeschichte zurück. Ein VPN ermöglicht die Verbindung ins Internet über einen virtuellen privaten Server eines spezifischen Standorts und verschleiert dabei die eigene IP-Adresse. Zusätzlich wird so der Datenverkehr verschlüsselt und sorgt so für mehr Anonymität im Netz.<br />
Damit auch du sicher im Internet unterwegs sein kannst, schau bei <a href="https://nordvpn.com/workingdraft?ref=workingdraft.de">nordvpn.com/workingdraft</a> vorbei und teste 30 Tage lang risikofrei mit der 30-Tage-Geld-zurück-Garantie!</p>
</div>
</aside><hr>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:58] Backups!</dt>
<dd>Unsere Einstiegsfrage ist: Was ist überhaupt ein Backup? Ist Backup gleich Backup? Wir beleuchten unterschiedliche Backup-Strategien (für den Alltag und für Spezialfälle wie Datenbanken) und kommen über den Vergleich von Restic mit der <a href="https://de.wikipedia.org/wiki/Time_Machine_(Apple)">Konkurrenz vom morschen Obstbaum</a> zu technischen Praxisfragen rund ums Backup. Über Fragen des Wie und Warum von inkrementellen Backups kommen wir zu Themen rund ums Backup-Rückgrat &#8211; Content Defined Chunking (im Falle von Restic via <a href="https://github.com/restic/chunker">chunker</a>), den <a href="https://de.wikipedia.org/wiki/Volume_Shadow_Copy_Service">Volume Shadow Copy Service</a>, <a href="https://de.wikipedia.org/wiki/ZFS_(Dateisystem)">ZFS</a>, etc. Jenseits der schieren Technik ist bei Backups aber auch der Faktor Mensch relevant und wir kommen nicht umhin, Restore-Complacency und Backup-auch-wirklich-machen-Strategien zu besprechen. Konkret am Beispiel von Restic sprechen für über Überlegungen zu Verschlüsselung und Sicherheit, Redundanz, <a href="https://de.wikipedia.org/wiki/Vorw%C3%A4rtsfehlerkorrektur">Forward Error Correction</a>, Kompression und Multi-Device-Backups. Zum Schluss geht&#8217;s natürlich auch ein wenig um OSS-Themen wie die Zukunftsplanung von Restic und das Community-Management.</dd>
</dl>


Mit Gast Alexander Neumann (Github), seines Zeichens Entwickler der
FOSS-Backup-Software Restic quatschen wir über Backups, Backup-Strategien und
Backup-Fails.


UNSER SPONSOR



Dieser Podcast wird v…

Mit Gast Alexander Neumann (Github), seines Zeichens Entwickler der
FOSS-Backup-Software Restic quatschen wir über Backups, Backup-Strategien und
Backup-Fails.


UNSER SPONSOR



Dieser Podcast wird von NordVPN unterstützt. NordVPN ist ein
Premium-VPN-Anbieter, der sich durch regelmäßige Updates mit neuen und
praktischen Funktionen von der Konkurrenz abhebt. In Kombination mit einem
fairen Preis und der jahrelangen Erfahrung des Teams, das aus Cybersicherheits-
und IT-Experten besteht, blickt NordVPN auf eine inzwischen 10-jährige
Firmengeschichte zurück. Ein VPN ermöglicht die Verbindung ins Internet über
einen virtuellen privaten Server eines spezifischen Standorts und verschleiert
dabei die eigene IP-Adresse. Zusätzlich wird so der Datenverkehr verschlüsselt
und sorgt so für mehr Anonymität im Netz.
Damit auch du sicher im Internet unterwegs sein kannst, schau bei
nordvpn.com/workingdraft vorbei und teste 30 Tage lang risikofrei mit der
30-Tage-Geld-zurück-Garantie!


SCHAUNOTIZEN

[00:00:58] BACKUPS!

Unsere Einstiegsfrage ist: Was ist überhaupt ein Backup? Ist Backup gleich
Backup? Wir beleuchten unterschiedliche Backup-Strategien (für den Alltag und
für Spezialfälle wie Datenbanken) und kommen über den Vergleich von Restic mit
der Konkurrenz vom morschen Obstbaum zu technischen Praxisfragen rund ums
Backup. Über Fragen des Wie und Warum von inkrementellen Backups kommen wir zu
Themen rund ums Backup-Rückgrat – Content Defined Chunking (im Falle von Restic
via chunker), den Volume Shadow Copy Service, ZFS, etc. Jenseits der schieren
Technik ist bei Backups aber auch der Faktor Mensch relevant und wir kommen
nicht umhin, Restore-Complacency und Backup-auch-wirklich-machen-Strategien zu
besprechen. Konkret am Beispiel von Restic sprechen für über Überlegungen zu
Verschlüsselung und Sicherheit, Redundanz, Forward Error Correction, Kompression
und Multi-Device-Backups. Zum Schluss geht’s natürlich auch ein wenig um
OSS-Themen wie die Zukunftsplanung von Restic und das Community-Management.

Revision 551: Restic – Backups, aber richtig

<p>Diese Folge haben wir Principal Frontend Architect <a href="https://lisilinhart.info/about">Lisi Linhardt</a>, welche <a href="https://workingdraft.de/411/">schon einmal bei uns zu Gast war</a>, damals jedoch in einer anderen Rolle. Mittlerweile arbeitet Lisi schon seit zwei Jahren beim Österreichischen Startup und Headless CMS Anbieter <a href="https://www.storyblok.com/">Storyblok</a>,<a href="https://workingdraft.de/495/"> über das wir auch mal eine Revision aufgenommen haben</a>.</p>
<h3>Schaunotizen</h3>
<p>Mit Lisi reden wir diese Revision über allerlei verschiedene Dinge. Die Klammer drumherum lautet jedoch…</p>
<dl>
<dt>[00:00:59] Lead Developers &#038; Remote Work</dt>
<dd>Angefangen hat Lisi bei Storyblok als Frontend-Lead, heutzutage ist sie aber eher Team-Lead. Das heißt, während sie früher die Architektur geprägt hat, ist sie heute mehr ein Bindeglied zwischen verschiedenen Gewerken, hat ein Auge auf Dokumentation, aber auch das Onboarding neuer Mitarbeiter.</p>
<p>Vanessa kann sich derzeit noch mehr auf Architektur und Technik konzentrieren, was der geringeren Größe des Startups (<a href="https://www.zavvy.io/">Zavvy</a>) geschuldet ist, in dem sie als Frontend-Lead beschäftigt ist. Dennoch gibt es auch Phasen, in denen sie nicht zum Coden kommt und mehr Manager-Aufgaben zu erledigen hat. Das frustriert sie dann manchmal etwas, weil sie den Eindruck hat, dass sie &#8222;nichts schafft&#8220;.</p>
<p>Lustigerweise geht das Onboarding bei Storyblok auch mit der Zavvy-App vonstatten. Es gibt für die verschiedenen Mitarbeiter verschiedene Onboarding-Jouneys und auch Team-Buddys.</p>
<p>Dokumentation verfasste Lisi früher gerne mal in <a href="https://www.notion.so/">Notion</a> &#8211; die Dokumentation, die sie heutzutage verfasst, liegt aber in der Regel mit im Repository. Vanessa nutzt dafür gerne <a href="https://github.com/mermaid-js/mermaid">mermaid.js</a>.</p>
<p>Wir schweifen dann ab in Richtung Benennung von Dingen in Code und wer da welche Präferenzen hat. </p>
<p>Anschließend kommen wir zum Thema &#8222;Remote&#8220;. Denn Storyblok ist eine der wenigen Remote-only-Firmen, die es so gibt. Gekommen ist das durch das Wachstum während der Pandemie (auch hier nochmal der Verweis auf die <a href="https://workingdraft.de/495/">Revision 495: Storyblok – Einblicke in ein Startup</a>). Wir sind uns einig, dass Remote dann doof ist, wenn nur einzelne Personen remote sitzen, während der Großteil des Teams physisch beieinander sitzt. Die Einzelpersonen werden da schnell mal aus dem Kommunikationsfluss ausgeklinkt.</p>
<p>Wichtig ist, regelmäßig physische Team-Meetings zu veranstalten. So gibt es bei Storyblok einmal im Jahr ein sogenanntes &#8222;Offsite&#8220;, wo die gesamte Firma aufeinander trifft. </p>
<p>Vanessa vermisst bei der Remote-Arbeit manchmal den Flurfunk.</p>
<p>Als die größte Herausforderung sieht Lisi das Arbeiten über verschiedene Zeitzonen hinweg an. Eine Lösung besteht darin, möglichst viel Kommunikation asynchron ablaufen zu lassen. Das meiste an Kommunikation entfällt aber meist auf das eigene Team und wird mit zunehmender Gewerk-Entfernung rapide weniger. Das heißt, die Herausforderung stellt sich am ehesten für das eigene Team.</p>
<p>Wir debattieren darüber, ob es wichtig ist, dass alle in Calls ihre Videokameras anhaben oder nicht, welche Arbeitszeiten man in einem weltweiten Remote-Setting hat, inwiefern Fokuszeiten helfen und wann Feierabend ist. Schepp ist hier der Meinung, dass man Kommunikation als empfangende Instanz steuern sollte, also zum Beispiel durch Abschalten von Benachrichtigungen zu bestimmten Zeiten.</p>
<p>Was im Remote-Setting auch schwieriger wird, ist bei Kollegen festzustellen, wenn es ihnen nicht so gut geht. Retros aber ein Werkzeug, um zu sehen, wie alle so drauf sind.
</dd>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.amazon.de/-/en/Erin-Meyer/dp/1610392760">The Culture Map: Decoding How People Think, Lead, and Get Things Done Across Cultures</a></dt>
<dd>Für Menschen, die in internationalen Teams arbeiten, mag Lisi gerne dieses Buch hier zur Lektüre empfehlen.</dd>
</dl>


Diese Folge haben wir Principal Frontend Architect Lisi Linhardt, welche schon
einmal bei uns zu Gast war, damals jedoch in einer anderen Rolle. Mittlerweile
arbeitet Lisi schon seit zwei Jahren beim …

Diese Folge haben wir Principal Frontend Architect Lisi Linhardt, welche schon
einmal bei uns zu Gast war, damals jedoch in einer anderen Rolle. Mittlerweile
arbeitet Lisi schon seit zwei Jahren beim Österreichischen Startup und Headless
CMS Anbieter Storyblok, über das wir auch mal eine Revision aufgenommen haben.


SCHAUNOTIZEN

Mit Lisi reden wir diese Revision über allerlei verschiedene Dinge. Die Klammer
drumherum lautet jedoch…

[00:00:59] LEAD DEVELOPERS & REMOTE WORK

Angefangen hat Lisi bei Storyblok als Frontend-Lead, heutzutage ist sie aber
eher Team-Lead. Das heißt, während sie früher die Architektur geprägt hat, ist
sie heute mehr ein Bindeglied zwischen verschiedenen Gewerken, hat ein Auge auf
Dokumentation, aber auch das Onboarding neuer Mitarbeiter.



Vanessa kann sich derzeit noch mehr auf Architektur und Technik konzentrieren,
was der geringeren Größe des Startups (Zavvy) geschuldet ist, in dem sie als
Frontend-Lead beschäftigt ist. Dennoch gibt es auch Phasen, in denen sie nicht
zum Coden kommt und mehr Manager-Aufgaben zu erledigen hat. Das frustriert sie
dann manchmal etwas, weil sie den Eindruck hat, dass sie „nichts schafft“.

Lustigerweise geht das Onboarding bei Storyblok auch mit der Zavvy-App
vonstatten. Es gibt für die verschiedenen Mitarbeiter verschiedene
Onboarding-Jouneys und auch Team-Buddys.

Dokumentation verfasste Lisi früher gerne mal in Notion – die Dokumentation, die
sie heutzutage verfasst, liegt aber in der Regel mit im Repository. Vanessa
nutzt dafür gerne mermaid.js.

Wir schweifen dann ab in Richtung Benennung von Dingen in Code und wer da welche
Präferenzen hat.

Anschließend kommen wir zum Thema „Remote“. Denn Storyblok ist eine der wenigen
Remote-only-Firmen, die es so gibt. Gekommen ist das durch das Wachstum während
der Pandemie (auch hier nochmal der Verweis auf die Revision 495: Storyblok –
Einblicke in ein Startup). Wir sind uns einig, dass Remote dann doof ist, wenn
nur einzelne Personen remote sitzen, während der Großteil des Teams physisch
beieinander sitzt. Die Einzelpersonen werden da schnell mal aus dem
Kommunikationsfluss ausgeklinkt.

Wichtig ist, regelmäßig physische Team-Meetings zu veranstalten. So gibt es bei
Storyblok einmal im Jahr ein sogenanntes „Offsite“, wo die gesamte Firma
aufeinander trifft.

Vanessa vermisst bei der Remote-Arbeit manchmal den Flurfunk.

Als die größte Herausforderung sieht Lisi das Arbeiten über verschiedene
Zeitzonen hinweg an. Eine Lösung besteht darin, möglichst viel Kommunikation
asynchron ablaufen zu lassen. Das meiste an Kommunikation entfällt aber meist
auf das eigene Team und wird mit zunehmender Gewerk-Entfernung rapide weniger.
Das heißt, die Herausforderung stellt sich am ehesten für das eigene Team.

Wir debattieren darüber, ob es wichtig ist, dass alle in Calls ihre Videokameras
anhaben oder nicht, welche Arbeitszeiten man in einem weltweiten Remote-Setting
hat, inwiefern Fokuszeiten helfen und wann Feierabend ist. Schepp ist hier der
Meinung, dass man Kommunikation als empfangende Instanz steuern sollte, also zum
Beispiel durch Abschalten von Benachrichtigungen zu bestimmten Zeiten.

Was im Remote-Setting auch schwieriger wird, ist bei Kollegen festzustellen,
wenn es ihnen nicht so gut geht. Retros aber ein Werkzeug, um zu sehen, wie alle
so drauf sind.


KEINE SCHAUNOTIZEN

THE CULTURE MAP: DECODING HOW PEOPLE THINK, LEAD, AND GET THINGS DONE ACROSS
CULTURES

Für Menschen, die in internationalen Teams arbeiten, mag Lisi gerne dieses Buch
hier zur Lektüre empfehlen.

Revision 550: Lead Developers & Remote Work

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 561: Organisationstruktur „UnFIX“

Working Draft

Revision 560: TypeScript 5.0

Working Draft

Revision 559: Glücksrad

Working Draft

Revision 558: Per dualer Ausbildung oder dualem Studium in den IT-Beruf

Working Draft

Revision 557: Neues in WebKit

Working Draft

Revision 556: Domain-Driven Design

Working Draft

Revision 555: ChatGPT & Co

Working Draft

Revision 554: Konferenzorganisation in Zeiten einer Pandemie

Working Draft

Revision 553: State of JS2, Framework Boogaloo

Working Draft

Revision 552: Frontend Development im Jahr 2023

Working Draft

Revision 551: Restic – Backups, aber richtig

Working Draft

Revision 550: Lead Developers & Remote Work

Working Draft