<p>In dieser Folge widmen wir uns erneut ganz WebKit – und dem, was sich dort aktuell alles tut und in den letzten Monaten getan hat. Schepp und Peter diskutieren neue Features, (alte) Probleme sowie APIs, die bereits in Safari gelandet sind oder bald landen werden.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:09] <a href="https://developer.chrome.com/blog/web-at-io25">Google I/O 2025 &amp; CSS-only Carousels</a></dt>
<dd>Zum Einstieg beklagen wir wie themenarm die Google I/O dieses Jahr für uns Frontend-Menschen war. Das einzig wirklich spannende Ding waren die Vorstellung der CSS-Primitiven für den Bau von Karussells. Allerdings steckt in dem Thema noch sehr viel Arbeit an der Barrierefreiheitsfront, <a href="https://www.sarasoueidan.com/blog/css-carousels-accessibility/">wie Sara Soueidan dargelegt hat</a>. Der Rest bestand aus eilig herbei-geprototypeten Demos.</dd>
<dt>[00:19:34] <a href="https://webkit.org/blog/16967/two-lines-of-cross-document-view-transitions-code-you-can-use-on-every-website-today/">Multipage View Transitions</a></dt>
<dd>Mit nur zwei Zeilen Code aus dem WebKit-Blogpost lassen sich flüssige Seitenübergänge realisieren. Wir berichten von unseren eigenen Versuchen mit View Transitions und verweisen auf die Library <a href="https://github.com/Rich-Harris/ramjet">ramjet</a>, die ähnliche Effekte wie die View Transitions <a href="https://workingdraft.de/218/#:~:text=12%5D%20Keine%20Schaunotizen-,ramjet,-%E2%80%9ERamjet%20makes%20it">schon seit zehn Jahren</a> ermöglicht.</dd>
<dt>[00:25:46] <a href="https://webkit.org/blog/16831/line-height-units/">(Root) Line-Height Units: <code>lh/rlh</code></a></dt>
<dd>WebKit führt neue Einheiten für die Zeilenhöhe ein, die konsistentere Text-Layouts erlauben. Wir schweifen an dieser Stelle kurz ab und sprechen darüber, wie das <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API">CSS Typed OM</a> funktioniert.</dd>
<dt>[00:29:24] <a href="https://webkit.org/blog/16854/margin-trim/"><code>margin-trim</code></a></dt>
<dd>Mit <code>margin-trim</code> lassen sich über den Rand ragende Margins von Kind-Elementen abschneiden, was bestimmte Layouts gegenüber der <code>:first-child/:last-child</code>-Technik deutlich robuster umsetzbar werden lässt.</dd>
<dt>[00:33:52] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-wrap"><code>text-wrap: pretty</code></a></dt>
<dd>Das neue Umbruch-Verhalten <code>text-wrap: pretty</code> sorgt für elegantere Zeilenumbrüche und optimierte Worttrennung. Die WebKit-Menschen haben es aber nicht dabei belassen, mit Chrome nachzuziehen, sondern haben noch kräftig &#8222;<a href="https://de.wikipedia.org/wiki/Gold-Plating">Gold-Plating</a>&#8220; betrieben ‐ mit sehenswertem Ergebnis! Wem das nicht reicht, der kann in Zukunft vielleicht auf Machine-Learning zurückgreifen, um Text nach seinen Vorstellungen zu formatieren, <a href="https://www.youtube.com/watch?v=Y65FRxE7uMc">wie es jemand in diesem Video namens &#8222;Badness 0&#8220; demonstriert</a>.</dd>
<dt>[00:35:20] WebKit-Bug bei Ligaturen</dt>
<dd>So stark WebKit allerdings bei Typografie sonst ist, bei einer Sache verkackt er hart: Bei der Berechnung der Laufweite von Ligaturen. Ligaturen sind eine fantastische Sache und ermöglichen es, Fonts regelrecht zu programmieren. Schrift-Entwicklerin <a href="https://www.youtube.com/watch?v=IzqIDLgVZi8">Ulrike Rausch bildet hier die Speerspitze mit ihren &#8222;Liebe&#8220;-Fonts</a> und dem Font &#8222;<a href="https://liebefonts.com/fonts/liebeheide">Liebe Heide</a>&#8220; im Speziellen. Ein wenig in das Thema eingetaucht ist Schepp neulich auch, als er mit Hilfe eines SVG und <a href="https://github.com/opentypejs/opentype.js">OpenType.js</a> (<code>master</code> Branch) eine Ligatur in eine Schrift eingebaut hat, welche alle Vorkommen eines bestimmten Wortes im Text-Rendering automatisch durch die SVG-Grafik ersetzt. Diese Grafik läuft allerdings weiter als der damit ersetzte Text. Chrome und Firefox bemerken das und passen den Textfluss entsprechend an. Nur WebKit leider nicht, wo nachfolgender Text rechts in die Grafik ragt oder ohne Abstand an der Grafik klebt. <a href="https://faultlore.com/blah/text-hates-you/">Text Rendering Hates You</a>!</dd>
<dt>[00:56:35] Neue Farb-Features</dt>
<dd>Safari kennt nun die (neue) <a href="https://webkit.org/blog/16929/contrast-color/"><code>contrast-color()</code></a>-Funktion, welche automatisch eine kontrastreiche Schriftfarbe basierend auf einer Input-Farbe zurückgibt. Dabei beschränkt sie sich derzeit noch auf die Rückgabe von Weiß oder Schwarz. Wir sprechen über die bewegte Vergangenheit dieser Funktion, die eigentlich mal als <code>color-contrast()</code>-Funktion das Licht der Welt erblicken sollte, und was die Web Accessibility Initiative (WAI) und die <a href="https://www.datawrapper.de/blog/color-contrast-check-data-vis-wcag-apca">Farbkontraste-Berechnung nach APCA</a> mit den aktuellen Limitationen zu tun haben. Das Kontraste-Thema führt uns auch zu Lighthouse und seinen Barrierefreiheits-Checks, die viele Problemfälle nicht erkennnen (können). Aus dieser Tatsache hat Manuel Matuzović sogar ein ganzes Projekt gemacht: <a href="https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/">Building the most inaccessible site possible with a perfect Lighthouse score</a> (<a href="https://vimeo.com/654497457">hier als Video</a>).</p>
<p>Ebenfalls neu ist ein <a href="https://webkit.org/blog/16900/p3-and-alpha-color-pickers/">Upgrade des Color-Inputs</a>, welcher jetzt die HTML-Attribute <code>colorspace</code> sowie das boolsche <code>alpha</code> versteht. Wir finden das gut, allerdings sind wir der Meinung, dass insbesondere die neuen Farbräume mit Bedacht eingesetzt werden sollten, weil eine ganze Kette von Erfordernissen für einen erfolgreichen Einsatz erfüllt sein möchte. Hier stößt man aber auf das Problem, dass HTML selbst keine Möglichkeit zum Feature-Testen und des Alternativ-Pfads kennt, anders als JavaScript oder CSS. Das Problem hat man genauso bei dem relativ neuen <a href="https://webkit.org/blog/15054/an-html-switch-control/"><code>switch</code>-Attribut bei Checkbox-Inputs</a>. Schepp hat das Problem in der Praxis darüberhinaus auch bei Hauptmenüs, die auf Desktop-Geräten einfache <code>&lt;nav&gt;</code>-Elemente sein sollten, auf Mobile aber <code>&lt;dialog&gt;</code>-Elemente, wenn sie sich UI-mäßig in Offcanvas-Menüs umwandeln. Peter berichtet, wie er Menüs unkompliziert (aber semantisch grenzwertig) mit dem <code>&lt;details&gt;</code>-Element auf- und zuklappen lässt. Für solch einen Ansatz spielt einem auch das neue <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::details-content"><code>::details-content</code>-Pseudo-Element</a> in die Karten.</dd>
<dt>[01:15:42] <a href="https://webkit.org/blog/16535/meet-declarative-web-push/">Declarative WebPush</a></dt>
<dd>Mit der Declarative Web Push API lassen sich Push-Nachrichten in Zukunft ganz ohne (schwer zu handhabende) Service Worker konfigurieren. Juhuuu! Wer dennoch lieber Service Worker verwenden möchte, dem empfehlen wir zumindest den Einsatz der Library <a href="https://developer.chrome.com/docs/workbox">Workbox</a>, um es erträglich zu machen.</dd>
<dt>[01:18:51] <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/d">SVGs <code>d</code>-Property in CSS</a></dt>
<dd>WebKit erlaubt nun endlich als letzter Browser im Bunde, das <code>d</code>-Attribut von SVG-Pfaden direkt via CSS zu verändern. <a href="https://bugs.webkit.org/show_bug.cgi?id=234227">Auf diesen Tag hat Peter sehr lange hingefiebert</a> ‐ und sich anderweitig beholfen! Schepp bringt das auf die Idee, ob die <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_Highlight_API">Custom Highlight API</a> nicht auch ein guter Kandidat für Peters Problem hätte sein können.</dd>
</dl>


In dieser Folge widmen wir uns erneut ganz WebKit – und dem, was sich dort
aktuell alles tut und in den letzten Monaten getan hat. Schepp und Peter
diskutieren neue Features, (alte) Probleme sowie API…

Working Draft

In dieser Folge widmen wir uns erneut ganz WebKit – und dem, was sich dort
aktuell alles tut und in den letzten Monaten getan hat. Schepp und Peter
diskutieren neue Features, (alte) Probleme sowie APIs, die bereits in Safari
gelandet sind oder bald landen werden.


SCHAUNOTIZEN

[00:01:09] GOOGLE I/O 2025 & CSS-ONLY CAROUSELS

Zum Einstieg beklagen wir wie themenarm die Google I/O dieses Jahr für uns
Frontend-Menschen war. Das einzig wirklich spannende Ding waren die Vorstellung
der CSS-Primitiven für den Bau von Karussells. Allerdings steckt in dem Thema
noch sehr viel Arbeit an der Barrierefreiheitsfront, wie Sara Soueidan dargelegt
hat. Der Rest bestand aus eilig herbei-geprototypeten Demos.

[00:19:34] MULTIPAGE VIEW TRANSITIONS

Mit nur zwei Zeilen Code aus dem WebKit-Blogpost lassen sich flüssige
Seitenübergänge realisieren. Wir berichten von unseren eigenen Versuchen mit
View Transitions und verweisen auf die Library ramjet, die ähnliche Effekte wie
die View Transitions schon seit zehn Jahren ermöglicht.

[00:25:46] (ROOT) LINE-HEIGHT UNITS: LH/RLH

WebKit führt neue Einheiten für die Zeilenhöhe ein, die konsistentere
Text-Layouts erlauben. Wir schweifen an dieser Stelle kurz ab und sprechen
darüber, wie das CSS Typed OM funktioniert.

[00:29:24] MARGIN-TRIM

Mit margin-trim lassen sich über den Rand ragende Margins von Kind-Elementen
abschneiden, was bestimmte Layouts gegenüber der
:first-child/:last-child-Technik deutlich robuster umsetzbar werden lässt.

[00:33:52] TEXT-WRAP: PRETTY

Das neue Umbruch-Verhalten text-wrap: pretty sorgt für elegantere Zeilenumbrüche
und optimierte Worttrennung. Die WebKit-Menschen haben es aber nicht dabei
belassen, mit Chrome nachzuziehen, sondern haben noch kräftig „Gold-Plating“
betrieben ‐ mit sehenswertem Ergebnis! Wem das nicht reicht, der kann in Zukunft
vielleicht auf Machine-Learning zurückgreifen, um Text nach seinen Vorstellungen
zu formatieren, wie es jemand in diesem Video namens „Badness 0“ demonstriert.

[00:35:20] WEBKIT-BUG BEI LIGATUREN

So stark WebKit allerdings bei Typografie sonst ist, bei einer Sache verkackt er
hart: Bei der Berechnung der Laufweite von Ligaturen. Ligaturen sind eine
fantastische Sache und ermöglichen es, Fonts regelrecht zu programmieren.
Schrift-Entwicklerin Ulrike Rausch bildet hier die Speerspitze mit ihren
„Liebe“-Fonts und dem Font „Liebe Heide“ im Speziellen. Ein wenig in das Thema
eingetaucht ist Schepp neulich auch, als er mit Hilfe eines SVG und OpenType.js
(master Branch) eine Ligatur in eine Schrift eingebaut hat, welche alle
Vorkommen eines bestimmten Wortes im Text-Rendering automatisch durch die
SVG-Grafik ersetzt. Diese Grafik läuft allerdings weiter als der damit ersetzte
Text. Chrome und Firefox bemerken das und passen den Textfluss entsprechend an.
Nur WebKit leider nicht, wo nachfolgender Text rechts in die Grafik ragt oder
ohne Abstand an der Grafik klebt. Text Rendering Hates You!

[00:56:35] NEUE FARB-FEATURES

Safari kennt nun die (neue) contrast-color()-Funktion, welche automatisch eine
kontrastreiche Schriftfarbe basierend auf einer Input-Farbe zurückgibt. Dabei
beschränkt sie sich derzeit noch auf die Rückgabe von Weiß oder Schwarz. Wir
sprechen über die bewegte Vergangenheit dieser Funktion, die eigentlich mal als
color-contrast()-Funktion das Licht der Welt erblicken sollte, und was die Web
Accessibility Initiative (WAI) und die Farbkontraste-Berechnung nach APCA mit
den aktuellen Limitationen zu tun haben. Das Kontraste-Thema führt uns auch zu
Lighthouse und seinen Barrierefreiheits-Checks, die viele Problemfälle nicht
erkennnen (können). Aus dieser Tatsache hat Manuel Matuzović sogar ein ganzes
Projekt gemacht: Building the most inaccessible site possible with a perfect
Lighthouse score (hier als Video).



Ebenfalls neu ist ein Upgrade des Color-Inputs, welcher jetzt die HTML-Attribute
colorspace sowie das boolsche alpha versteht. Wir finden das gut, allerdings
sind wir der Meinung, dass insbesondere die neuen Farbräume mit Bedacht
eingesetzt werden sollten, weil eine ganze Kette von Erfordernissen für einen
erfolgreichen Einsatz erfüllt sein möchte. Hier stößt man aber auf das Problem,
dass HTML selbst keine Möglichkeit zum Feature-Testen und des Alternativ-Pfads
kennt, anders als JavaScript oder CSS. Das Problem hat man genauso bei dem
relativ neuen switch-Attribut bei Checkbox-Inputs. Schepp hat das Problem in der
Praxis darüberhinaus auch bei Hauptmenüs, die auf Desktop-Geräten einfache
<nav>-Elemente sein sollten, auf Mobile aber <dialog>-Elemente, wenn sie sich
UI-mäßig in Offcanvas-Menüs umwandeln. Peter berichtet, wie er Menüs
unkompliziert (aber semantisch grenzwertig) mit dem <details>-Element auf- und
zuklappen lässt. Für solch einen Ansatz spielt einem auch das neue
::details-content-Pseudo-Element in die Karten.

[01:15:42] DECLARATIVE WEBPUSH

Mit der Declarative Web Push API lassen sich Push-Nachrichten in Zukunft ganz
ohne (schwer zu handhabende) Service Worker konfigurieren. Juhuuu! Wer dennoch
lieber Service Worker verwenden möchte, dem empfehlen wir zumindest den Einsatz
der Library Workbox, um es erträglich zu machen.

[01:18:51] SVGS D-PROPERTY IN CSS

WebKit erlaubt nun endlich als letzter Browser im Bunde, das d-Attribut von
SVG-Pfaden direkt via CSS zu verändern. Auf diesen Tag hat Peter sehr lange
hingefiebert ‐ und sich anderweitig beholfen! Schepp bringt das auf die Idee, ob
die Custom Highlight API nicht auch ein guter Kandidat für Peters Problem hätte
sein können.

Revision 670: Neuerungen in WebKit

<p>Dieses Interview ist der letzte von 3 Teilen unserer Serie On Tour @ #headinthecloud. <a href="https://www.mittwald.de/lp/head-in-the-cloud?ref=workingdraft.de">Head in the Cloud</a> ist eine Konferenz von <a href="https://www.mittwald.de/lp/workingdraft?ref=workingdraft.de">Mittwald</a>, die am 13. Juni 2025 in Espelkamp stattfand.</p>
<h3>Web Sustainability</h3>
<p>Mit <a href="https://thorstenjonas.com/?ref=workingdraft.de">Thorsten Jonas</a> &#038; <a href="https://www.mittwald.de/blog/autoren/marvin-hoetger">Marvin Hötger</a>.</p>
<p>Eigentlich muss man sich vielmehr Gedanken machen, welchen Einfluss unsere Webseiten auf die Umwelt haben. Durch Chatbots, Bilder und vieles mehr kann man als Entwickler großen Einfluss auf den CO₂-Fußabdruck einer Webseite haben. Thorsten erklärt, warum das der Fall ist und welche Maßnahmen man noch so ergreifen kann. Marvin gibt einige Beispiele aus der Praxis.</p>
<p>Das Video zum Talk wird zeitnah auf dem <a href="https://www.youtube.com/@mittwald">YouTube Kanal von Mittwald</a> verfügbar sein.</p>


Dieses Interview ist der letzte von 3 Teilen unserer Serie On Tour @
#headinthecloud. Head in the Cloud ist eine Konferenz von Mittwald, die am 13.
Juni 2025 in Espelkamp stattfand.


WEB SUSTAINABILI…

Dieses Interview ist der letzte von 3 Teilen unserer Serie On Tour @
#headinthecloud. Head in the Cloud ist eine Konferenz von Mittwald, die am 13.
Juni 2025 in Espelkamp stattfand.


WEB SUSTAINABILITY

Mit Thorsten Jonas & Marvin Hötger.

Eigentlich muss man sich vielmehr Gedanken machen, welchen Einfluss unsere
Webseiten auf die Umwelt haben. Durch Chatbots, Bilder und vieles mehr kann man
als Entwickler großen Einfluss auf den CO₂-Fußabdruck einer Webseite haben.
Thorsten erklärt, warum das der Fall ist und welche Maßnahmen man noch so
ergreifen kann. Marvin gibt einige Beispiele aus der Praxis.

Das Video zum Talk wird zeitnah auf dem YouTube Kanal von Mittwald verfügbar
sein.

On Tour @ #headinthecloud – Web Sustainability mit Thorsten Jonas & Marvin
Hötger

<p>In dieser Revision sprechen Vanessa und Schepp mit Jannik Lehmann (<a href="https://www.linkedin.com/in/janniklehmann?originalSubdomain=de">LinkedIn</a>), Senior Frontend Developer bei GitLab, darüber, wie man Chat-Applikationen mit gängigen LLM-APIs erstellt. Dabei geht er auf verschiedenste Stolpersteine ein, spricht über Streaming und warum der Kontext so wichtig ist.</p>
<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>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:42] Chat-Applikationen mit gängigen LLM-APIs</dt>
<dd>LLM-APIs unterscheiden sich in zwei zentralen Punkten von klassischen APIs: Erstens sind die Antworten <strong>nicht deterministisch</strong> – das bedeutet, dass ein identischer Prompt bei jedem Request ein anderes Ergebnis liefern kann. Zweitens kommen die Antworten <strong>gestreamt</strong> an – oft in Form von Text-Chunks, die schrittweise per <a href="https://developer.mozilla.org/de-DE/docs/Web/API/Server-sent_events/Using_server-sent_events">Server Sent Events</a> (SSE) an den Client geliefert werden.</p>
<p>Ein typischer Request beginnt mit einem einfachen <a href="https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/overview">Prompt</a> als Plaintext. Die Antwort wird dann dynamisch in Markdown-Form gestreamt. Doch genau dieses gestreamte Markdown bringt etliche Stolperfallen mit: Von XSS- und Prompt-Injection-Risiken über unvollständige <a href="https://mermaid.js.org/">Mermaid</a>-Diagramme bis hin zu halbfertigen Flowcharts und weiteren seltsamen Markdown-Konstrukten, die ein LLM ausgeben kann.</p>
<p>Hier lohnt ein Exkurs in das Thema streambare vs. nicht streambare Dateiformate: HTML ist beispielsweise streambar, da der Browser Bit für Bit lesen und direkt rendern kann. Deshalb gibt es auch Metriken wie „First Meaningful Paint“ und Gründe dafür, warum ein Script-Tag lieber am Ende statt am Anfang einer HTML-Datei stehen sollte. Markdown hingegen ist nicht streambar – es braucht oft Kontext über mehrere Zeilen hinweg, bevor eine Darstellung sinnvoll möglich ist. Genau deshalb ist Markdown als Streaming-Format nicht ganz trivial zu handhaben.</p>
<p>Ein weiteres zentrales Thema ist der Kontext – oder vielmehr: wie wir mit ihm umgehen. Denn LLMs sind per se stateless. Das bedeutet: Jeder einzelne Request muss <strong>alles</strong> enthalten, was das Modell wissen soll – den Prompt, die bisherige Konversation, den System Prompt und ggf. auch hochgeladene Dateien. Aus Erfahrung wissen wir: Alle nutzen am Ende dieselben Modelle, aber wie der Kontext behandelt wird, entscheidet darüber, ob der AI-Assistent genial oder nutzlos wirkt.</p>
<p>Apropos Kontext: LLMs haben ein beschränktes Kontextfenster – je nach Modell unterschiedlich groß, aber immer begrenzt. Was tun, wenn dieses Limit erreicht ist? Strategien wie Sliding Windows (ältere Nachrichten rauswerfen), automatische Zusammenfassungen oder manuelle Priorisierung helfen weiter. Wichtig ist: Mehr Kontext kostet nicht nur mehr Tokens, sondern macht die Anwendung auch langsamer und teurer.</p>
<p data-is-last-node="" data-is-only-node="">Unser Fazit: Die Komplexität solcher Systeme ist hoch – aber genau deshalb ist es so wichtig, mit <strong>kleinsten Prototypen</strong> zu starten. Sie helfen, zentrale Probleme frühzeitig sichtbar zu machen. Wer Lust bekommen hat, sich einmal ein wenig inspirieren zu lassen, dem sei der <a href="https://docs.gitlab.com/user/gitlab_duo_chat/">GitLab Duo Chat</a> ans Herz gelegt. Es befindet sich als Open-Source-Projekt im <a href="https://gitlab.com/gitlab-org/gitlab">GitLab Repository</a> – man freut sich über jeden Merge Request.</p>
</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events">Server-sent Events auf MDN</a></dt>
<dd>Eine Einführung in Server-sent Events für die Einweg-Kommunikation vom Server zum Client.</dd>
<dt><a href="http://htmlpurifier.org/">HTMLPurifier</a></dt>
<dd>Ein Filter zur sicheren Bereinigung von HTML – ideal bei Benutzereingaben.</dd>
<dt><a href="https://chromestatus.com/feature/5814067399491584">Chrome Platform Status: Sanitizer API</a></dt>
<dd>Die Sanitizer API erlaubt sicheres Einfügen von HTML-Inhalten direkt im Browser – ohne eigenes Parsen.</dd>
<dt><a href="https://tailwindcss.com/blog/tailwindcss-typography">Tailwind CSS Typography</a></dt>
<dd>Tailwinds Lösung für schöne Standard-Typografie mit dem `@tailwindcss/typography` Plugin.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP">Content Security Policy auf MDN</a></dt>
<dd>Leitfaden zu CSP zur Vermeidung von XSS und zur Härtung von Webanwendungen.</dd>
<dt><a href="https://www.langchain.com/">LangChain</a></dt>
<dd>Ein Framework, das beim Bau komplexer Anwendungen mit Sprachmodellen hilft.</dd>
<dt><a href="https://gitlab.com/gitlab-org/gitlab">GitLab</a></dt>
<dd>Der Quellcode der beliebten DevOps-Plattform GitLab – vollständig open source.</dd>
<dt><a href="https://handbook.gitlab.com/handbook/marketing/developer-relations/contributor-success/">Contributor Success Team bei GitLab</a></dt>
<dd>Das Team hinter GitLabs Bemühungen, externe Beiträge erfolgreich zu integrieren.</dd>
</dl>


In dieser Revision sprechen Vanessa und Schepp mit Jannik Lehmann (LinkedIn),
Senior Frontend Developer bei GitLab, darüber, wie man Chat-Applikationen mit
gängigen LLM-APIs erstellt. Dabei geht er au…

In dieser Revision sprechen Vanessa und Schepp mit Jannik Lehmann (LinkedIn),
Senior Frontend Developer bei GitLab, darüber, wie man Chat-Applikationen mit
gängigen LLM-APIs erstellt. Dabei geht er auf verschiedenste Stolpersteine ein,
spricht über Streaming und warum der Kontext so wichtig ist.


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:01:42] CHAT-APPLIKATIONEN MIT GÄNGIGEN LLM-APIS

LLM-APIs unterscheiden sich in zwei zentralen Punkten von klassischen APIs:
Erstens sind die Antworten nicht deterministisch – das bedeutet, dass ein
identischer Prompt bei jedem Request ein anderes Ergebnis liefern kann. Zweitens
kommen die Antworten gestreamt an – oft in Form von Text-Chunks, die
schrittweise per Server Sent Events (SSE) an den Client geliefert werden.



Ein typischer Request beginnt mit einem einfachen Prompt als Plaintext. Die
Antwort wird dann dynamisch in Markdown-Form gestreamt. Doch genau dieses
gestreamte Markdown bringt etliche Stolperfallen mit: Von XSS- und
Prompt-Injection-Risiken über unvollständige Mermaid-Diagramme bis hin zu
halbfertigen Flowcharts und weiteren seltsamen Markdown-Konstrukten, die ein LLM
ausgeben kann.

Hier lohnt ein Exkurs in das Thema streambare vs. nicht streambare Dateiformate:
HTML ist beispielsweise streambar, da der Browser Bit für Bit lesen und direkt
rendern kann. Deshalb gibt es auch Metriken wie „First Meaningful Paint“ und
Gründe dafür, warum ein Script-Tag lieber am Ende statt am Anfang einer
HTML-Datei stehen sollte. Markdown hingegen ist nicht streambar – es braucht oft
Kontext über mehrere Zeilen hinweg, bevor eine Darstellung sinnvoll möglich ist.
Genau deshalb ist Markdown als Streaming-Format nicht ganz trivial zu handhaben.

Ein weiteres zentrales Thema ist der Kontext – oder vielmehr: wie wir mit ihm
umgehen. Denn LLMs sind per se stateless. Das bedeutet: Jeder einzelne Request
muss alles enthalten, was das Modell wissen soll – den Prompt, die bisherige
Konversation, den System Prompt und ggf. auch hochgeladene Dateien. Aus
Erfahrung wissen wir: Alle nutzen am Ende dieselben Modelle, aber wie der
Kontext behandelt wird, entscheidet darüber, ob der AI-Assistent genial oder
nutzlos wirkt.

Apropos Kontext: LLMs haben ein beschränktes Kontextfenster – je nach Modell
unterschiedlich groß, aber immer begrenzt. Was tun, wenn dieses Limit erreicht
ist? Strategien wie Sliding Windows (ältere Nachrichten rauswerfen),
automatische Zusammenfassungen oder manuelle Priorisierung helfen weiter.
Wichtig ist: Mehr Kontext kostet nicht nur mehr Tokens, sondern macht die
Anwendung auch langsamer und teurer.

Unser Fazit: Die Komplexität solcher Systeme ist hoch – aber genau deshalb ist
es so wichtig, mit kleinsten Prototypen zu starten. Sie helfen, zentrale
Probleme frühzeitig sichtbar zu machen. Wer Lust bekommen hat, sich einmal ein
wenig inspirieren zu lassen, dem sei der GitLab Duo Chat ans Herz gelegt. Es
befindet sich als Open-Source-Projekt im GitLab Repository – man freut sich über
jeden Merge Request.


LINKS

SERVER-SENT EVENTS AUF MDN

Eine Einführung in Server-sent Events für die Einweg-Kommunikation vom Server
zum Client.

HTMLPURIFIER

Ein Filter zur sicheren Bereinigung von HTML – ideal bei Benutzereingaben.

CHROME PLATFORM STATUS: SANITIZER API

Die Sanitizer API erlaubt sicheres Einfügen von HTML-Inhalten direkt im Browser
– ohne eigenes Parsen.

TAILWIND CSS TYPOGRAPHY

Tailwinds Lösung für schöne Standard-Typografie mit dem
`@tailwindcss/typography` Plugin.

CONTENT SECURITY POLICY AUF MDN

Leitfaden zu CSP zur Vermeidung von XSS und zur Härtung von Webanwendungen.

LANGCHAIN

Ein Framework, das beim Bau komplexer Anwendungen mit Sprachmodellen hilft.

GITLAB

Der Quellcode der beliebten DevOps-Plattform GitLab – vollständig open source.

CONTRIBUTOR SUCCESS TEAM BEI GITLAB

Das Team hinter GitLabs Bemühungen, externe Beiträge erfolgreich zu integrieren.

Revision 669: Chat-Applikationen mit gängigen LLM-APIs

<p>In dieser Folge reden wir mit Jürgen Geuter (<a href="https://tante.cc/">Web</a> / <a href="https://tldr.nettime.org/@tante">Mastodon</a> / <a href="https://www.linkedin.com/in/tante/">LinkedIn</a>), besser bekannt als „Tante“, darüber, wie KI den Alltag von Entwickler:innen verändert – oder eben auch nicht. Zwischen Pragmatismus, Kritik und ein paar Zukunftsfragen schauen wir gemeinsam auf den aktuellen Stand: Was bringt der Einsatz von KI in der Softwareentwicklung tatsächlich, was ist Wunschdenken – und wo wird’s vielleicht sogar gefährlich?</p>
<aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://workshops.de/ki?ref=workingdraft.de" aria-label="Sponsoren Logo"><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 400px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" srcset="https://workingdraft.de/wp-content/uploads/2025/05/workshops-de-workingdraft-share-image.jpg" alt="" /></a></p>
<div class="message_content"><strong>Die KI-Revolution ist da</strong> – bist du bereit, sie aktiv zu gestalten?<br />
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf <a href="https://workshops.de/ki?ref=workingdraft.de">workshops.de/ki</a>.<br />
Mit dem Rabatt-Code <strong>WORKINGDRAFT</strong> sparst du außerdem <strong>10 % auf alle Schulungen</strong>!</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:004:21] KI in der Praxis: Wo hilft sie – und wo (noch) nicht?</dt>
<dd>Wir sprechen darüber, was KI für Entwickler:innen heute leisten kann – jenseits aller Visionen. Tante gibt Einblick in seine Erfahrungen mit Tools wie GitH ub Copilot und reflektiert, wie sehr sie wirklich in den Entwicklungsprozess eingreifen. Spoiler: Für viele bleibt KI eher eine Ergänzung als ein Ersatz.</dd>
<dt>[00:30:11] Der neue Alltag: Produktivität, Frust und neue Abhängigkeiten</dt>
<dd>Auch wenn manche mit KI produktiver arbeiten: Wir beleuchten, wo sie auch Probleme schafft – etwa durch falsche Sicherheit, fehlerhafte Vorschläge oder ein fragiles Vertrauen in Tools, die sich oft wie Blackboxes verhalten.</dd>
<dt>[00:00:00] KI als Risikofaktor – von Bias bis Fehlnutzung</dt>
<dd>Tante erklärt, warum es bei KI nicht nur um Code geht, sondern auch um Verantwortung: Wer trägt die Konsequenzen für Vorschläge, die sich später als falsch herausstellen? Und was passiert, wenn man sie unreflektiert übernimmt?</dd>
<dt>[00:52:55] Arbeitswelt im Wandel: Was bleibt vom Beruf, wenn KI immer mehr übernimmt?</dt>
<dd>Wird die Rolle von Entwickler:innen verschwinden – oder nur transformiert? Wir diskutieren, wie sich Erwartungen, Lernwege und Arbeitsabläufe verändern könnten. Und welche Kompetenzen in Zukunft wichtiger werden als Syntaxwissen.</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://tante.cc/" target="_blank" rel="noopener noreferrer">tante.cc</a></dt>
<dd>Jürgens Blog mit Essays zu Technologie, Gesellschaft und digitaler Verantwortung.</dd>
</dl>


In dieser Folge reden wir mit Jürgen Geuter (Web / Mastodon / LinkedIn), besser
bekannt als „Tante“, darüber, wie KI den Alltag von Entwickler:innen verändert –
oder eben auch nicht. Zwischen Pragmati…

In dieser Folge reden wir mit Jürgen Geuter (Web / Mastodon / LinkedIn), besser
bekannt als „Tante“, darüber, wie KI den Alltag von Entwickler:innen verändert –
oder eben auch nicht. Zwischen Pragmatismus, Kritik und ein paar Zukunftsfragen
schauen wir gemeinsam auf den aktuellen Stand: Was bringt der Einsatz von KI in
der Softwareentwicklung tatsächlich, was ist Wunschdenken – und wo wird’s
vielleicht sogar gefährlich?


UNSER SPONSOR



Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du,
Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten
einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring
dein Team auf das nächste Level!Informier dich jetzt über die aktuellen Kurse
und sichere dir deinen Platz auf workshops.de/ki.
Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!


SCHAUNOTIZEN

[00:004:21] KI IN DER PRAXIS: WO HILFT SIE – UND WO (NOCH) NICHT?

Wir sprechen darüber, was KI für Entwickler:innen heute leisten kann – jenseits
aller Visionen. Tante gibt Einblick in seine Erfahrungen mit Tools wie GitH ub
Copilot und reflektiert, wie sehr sie wirklich in den Entwicklungsprozess
eingreifen. Spoiler: Für viele bleibt KI eher eine Ergänzung als ein Ersatz.

[00:30:11] DER NEUE ALLTAG: PRODUKTIVITÄT, FRUST UND NEUE ABHÄNGIGKEITEN

Auch wenn manche mit KI produktiver arbeiten: Wir beleuchten, wo sie auch
Probleme schafft – etwa durch falsche Sicherheit, fehlerhafte Vorschläge oder
ein fragiles Vertrauen in Tools, die sich oft wie Blackboxes verhalten.

[00:00:00] KI ALS RISIKOFAKTOR – VON BIAS BIS FEHLNUTZUNG

Tante erklärt, warum es bei KI nicht nur um Code geht, sondern auch um
Verantwortung: Wer trägt die Konsequenzen für Vorschläge, die sich später als
falsch herausstellen? Und was passiert, wenn man sie unreflektiert übernimmt?

[00:52:55] ARBEITSWELT IM WANDEL: WAS BLEIBT VOM BERUF, WENN KI IMMER MEHR
ÜBERNIMMT?

Wird die Rolle von Entwickler:innen verschwinden – oder nur transformiert? Wir
diskutieren, wie sich Erwartungen, Lernwege und Arbeitsabläufe verändern
könnten. Und welche Kompetenzen in Zukunft wichtiger werden als Syntaxwissen.


LINKS

TANTE.CC

Jürgens Blog mit Essays zu Technologie, Gesellschaft und digitaler
Verantwortung.

Revision 668: KI im Alltag: Werkzeug, Hype oder Risiko?

<p>Dieses Interview ist einer von 3 Teilen unserer Serie On Tour @ #headinthecloud. <a href="https://www.mittwald.de/lp/head-in-the-cloud?ref=workingdraft.de">Head in the Cloud</a> ist eine Konferenz von <a href="https://www.mittwald.de/lp/workingdraft?ref=workingdraft.de">Mittwald</a>, die am 13. Juni 2025 in Espelkamp stattfand.</p>
<h3>Women in Tech</h3>
<p>Mit <a href="https://www.linkedin.com/in/myrna-goennemann/">Myrna Gönnemann</a>, <a href="https://www.linkedin.com/in/luisa-sofie-faßbender/">Luisa Faßbender</a> &#038; <a href="https://www.linkedin.com/in/anna-maier-045739143/">Anna Maier</a>.</p>
<p>Wie ist es eigentlich in der Tech-Szene als Frau aktiv zu werden? Das besprechen wir mit Myrna, Luisa und Anna. Praktische Tipps, wie man es als Arbeitgeber und Konferenz-Veranstalter inklusiver werden kann. Myrna und Luisa berichten aus ihrer Erfahrung im TYPO3 Team.</p>
<p>Das Video zum Talk wird zeitnah auf dem <a href="https://www.youtube.com/@mittwald">YouTube Kanal von Mittwald</a> verfügbar sein.</p>


Dieses Interview ist einer von 3 Teilen unserer Serie On Tour @ #headinthecloud.
Head in the Cloud ist eine Konferenz von Mittwald, die am 13. Juni 2025 in
Espelkamp stattfand.


WOMEN IN TECH

Mit My…

Dieses Interview ist einer von 3 Teilen unserer Serie On Tour @ #headinthecloud.
Head in the Cloud ist eine Konferenz von Mittwald, die am 13. Juni 2025 in
Espelkamp stattfand.


WOMEN IN TECH

Mit Myrna Gönnemann, Luisa Faßbender & Anna Maier.

Wie ist es eigentlich in der Tech-Szene als Frau aktiv zu werden? Das besprechen
wir mit Myrna, Luisa und Anna. Praktische Tipps, wie man es als Arbeitgeber und
Konferenz-Veranstalter inklusiver werden kann. Myrna und Luisa berichten aus
ihrer Erfahrung im TYPO3 Team.

Das Video zum Talk wird zeitnah auf dem YouTube Kanal von Mittwald verfügbar
sein.

On Tour @ #headinthecloud – Women in Tech mit Myrna Gönnemann, Luisa Faßbender &
Anna Maier

<p>Nach mehreren Folgen im KI-Block zu Tools und Technik sprechen wir diesmal mit <a href="https://markus.oberlehner.net/">Markus Oberlehner</a> über eine grundlegendere Frage: Kann eine KI Entwickler:innen ersetzen? Markus war schon zweimal bei uns zu Gast – in <a href="https://workingdraft.de/473">Revision 473 zu Vue 3</a> und <a href="https://workingdraft.de/535">Revision 535 über Testing mit Cypress und Vitest</a>. Diesmal geht’s um das Spannungsfeld zwischen KI-Hype, echtem Mehrwert im Alltag und langfristigen Auswirkungen auf die Branche.</p>
<aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://workshops.de/ki?ref=workingdraft.de" aria-label=""><img class="alignnone size-medium wp-image-3774" style="display: block; max-width: 400px; width: 100%; float: right; margin-bottom: 1rem; margin-left: 1rem;" srcset="https://workingdraft.de/wp-content/uploads/2025/05/workshops-de-workingdraft-share-image.jpg" alt="" /></a></p>
<div class="message_content"><strong>Die KI-Revolution ist da</strong> – bist du bereit, sie aktiv zu gestalten?<br />
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf <a href="https://workshops.de/ki?ref=workingdraft.de">workshops.de/ki</a>.<br />
Mit dem Rabatt-Code <strong>WORKINGDRAFT</strong> sparst du außerdem <strong>10 % auf alle Schulungen</strong>!</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:33] Kann eine KI Entwickler:innen ersetzen?</dt>
<dd>Markus erzählt, wie er anfangs begeistert war – besonders mit dem Sprung von ChatGPT 3 zu [ChatGPT 4](https://openai.com/gpt-4). Für einen Moment schien es, als müsste bald niemand mehr selbst coden. Doch dann kam die Ernüchterung. Neue [agentic Modelle](https://www.talkdesk.com/de-de/blog/agentic-ai/) und Tools wie [Gemini 2.5](https://blog.google/technology/google-deepmind/gemini-model-thinking-updates-march-2025/), [Claude 4](https://www.anthropic.com/news/claude-4) oder [DeepSeek R1](https://deepseek-r1.com/de/) machen Hoffnung – aber die Realität bleibt durchwachsen.</p>
<p>Die zentrale Frage ist: Ersetzt KI den ganzen Job – oder „nur“ das Coden? Wir sind uns einig: Entwickler:innen machen weit mehr als nur Code zu schreiben. Kommunikation, Konzeption, QA-Abstimmung – all das bleibt. Dass KI etwa 20 % der Arbeit übernehmen kann, klingt für Markus realistisch. Beim schnellen Prototyping hilft KI bereits enorm.</p>
<p>Aktuell arbeitet Markus wieder mit [GitHub Copilot](https://github.com/features/copilot), nachdem er [Cursor](https://www.cursor.so/) eine Weile ausprobiert hatte. Autovervollständigung ist für ihn mittlerweile Alltag. Aber: Macht das wirklich produktiver? Ob KI-Nutzung ein echter Wettbewerbsvorteil ist, bleibt unklar.</p>
<p>Spannend wird es bei der Frage: Was passiert, wenn KI Junior-Entwickler:innen ersetzt? Denn wo keine Juniors nachrücken, fehlen später auch Seniors. KI könnte also nicht nur Arbeitskraft, sondern auch Ausbildungspfade gefährden.</p>
<p>Ein sinnvolles Einsatzgebiet sieht Markus bei Aufgaben, die sonst eher lästig sind – etwa Refactorings oder Library-Upgrades. Doch genau da hapert’s noch. Seine Erfahrungen bei der Migration von [Nuxt 2 auf 3](https://nuxt.com/docs/migration/overview) waren eher ernüchternd. Auch bei komplexen Kombinationen – etwa [React 19](https://react.dev/blog/2024/12/05/react-19) mit [Next.js 15](https://nextjs.org/blog/next-15) oder [Remix](https://remix.run/) – liefern KI-Tools oft Mischmasch aus alten und neuen Patterns.</p>
<p>Unterschiede gibt’s auch zwischen den Frameworks: [React](https://react.dev/) wird gut unterstützt, [Vue](https://vuejs.org/) weniger, bei [Svelte](https://svelte.dev/) wird’s noch dünner. Der Grund: KI kann nur gut, was sie oft genug gesehen hat.</p>
<p>Markus&#8216; Fazit ist realistisch: Für schnelle MVPs ist KI ein gutes Tool. Für langfristige Architektur oder Legacy-Code eher nicht. Zwischen Hype und Ernüchterung bleibt KI ein mächtiges Werkzeug – aber nur, wenn man es gezielt und reflektiert einsetzt.</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://techcrunch.com/2025/04/29/microsoft-ceo-says-up-to-30-of-the-companys-code-was-written-by-ai/">Microsoft CEO says up to 30% of the company’s code was written by AI</a></dt>
<dd>Ein Interview mit Satya Nadella über den aktuellen Einfluss von KI auf Softwareentwicklung bei Microsoft.</dd>
<dt><a href="https://www.heise.de/news/Weg-von-AWS-37signals-spart-mit-eigenem-Speicher-jaehrlich-1-3-Millionen-Dollar-10379632.html">1,3 Millionen Dollar gespart: 37signals zieht Daten von AWS auf eigene Server um</a></dt>
<dd>Ein Erfahrungsbericht darüber, wie 37signals mit eigener Infrastruktur massiv Kosten senkt.</dd>
</dl>


Nach mehreren Folgen im KI-Block zu Tools und Technik sprechen wir diesmal mit
Markus Oberlehner über eine grundlegendere Frage: Kann eine KI Entwickler:innen
ersetzen? Markus war schon zweimal bei un…

Nach mehreren Folgen im KI-Block zu Tools und Technik sprechen wir diesmal mit
Markus Oberlehner über eine grundlegendere Frage: Kann eine KI Entwickler:innen
ersetzen? Markus war schon zweimal bei uns zu Gast – in Revision 473 zu Vue 3
und Revision 535 über Testing mit Cypress und Vitest. Diesmal geht’s um das
Spannungsfeld zwischen KI-Hype, echtem Mehrwert im Alltag und langfristigen
Auswirkungen auf die Branche.


UNSER SPONSOR



Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du,
Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten
einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring
dein Team auf das nächste Level!Informier dich jetzt über die aktuellen Kurse
und sichere dir deinen Platz auf workshops.de/ki.
Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!




SCHAUNOTIZEN

[00:01:33] KANN EINE KI ENTWICKLER:INNEN ERSETZEN?

Markus erzählt, wie er anfangs begeistert war – besonders mit dem Sprung von
ChatGPT 3 zu [ChatGPT 4](https://openai.com/gpt-4). Für einen Moment schien es,
als müsste bald niemand mehr selbst coden. Doch dann kam die Ernüchterung. Neue
[agentic Modelle](https://www.talkdesk.com/de-de/blog/agentic-ai/) und Tools wie
[Gemini
2.5](https://blog.google/technology/google-deepmind/gemini-model-thinking-updates-march-2025/),
[Claude 4](https://www.anthropic.com/news/claude-4) oder [DeepSeek
R1](https://deepseek-r1.com/de/) machen Hoffnung – aber die Realität bleibt
durchwachsen.



Die zentrale Frage ist: Ersetzt KI den ganzen Job – oder „nur“ das Coden? Wir
sind uns einig: Entwickler:innen machen weit mehr als nur Code zu schreiben.
Kommunikation, Konzeption, QA-Abstimmung – all das bleibt. Dass KI etwa 20 % der
Arbeit übernehmen kann, klingt für Markus realistisch. Beim schnellen
Prototyping hilft KI bereits enorm.

Aktuell arbeitet Markus wieder mit [GitHub
Copilot](https://github.com/features/copilot), nachdem er
[Cursor](https://www.cursor.so/) eine Weile ausprobiert hatte.
Autovervollständigung ist für ihn mittlerweile Alltag. Aber: Macht das wirklich
produktiver? Ob KI-Nutzung ein echter Wettbewerbsvorteil ist, bleibt unklar.

Spannend wird es bei der Frage: Was passiert, wenn KI Junior-Entwickler:innen
ersetzt? Denn wo keine Juniors nachrücken, fehlen später auch Seniors. KI könnte
also nicht nur Arbeitskraft, sondern auch Ausbildungspfade gefährden.

Ein sinnvolles Einsatzgebiet sieht Markus bei Aufgaben, die sonst eher lästig
sind – etwa Refactorings oder Library-Upgrades. Doch genau da hapert’s noch.
Seine Erfahrungen bei der Migration von [Nuxt 2 auf
3](https://nuxt.com/docs/migration/overview) waren eher ernüchternd. Auch bei
komplexen Kombinationen – etwa [React
19](https://react.dev/blog/2024/12/05/react-19) mit [Next.js
15](https://nextjs.org/blog/next-15) oder [Remix](https://remix.run/) – liefern
KI-Tools oft Mischmasch aus alten und neuen Patterns.

Unterschiede gibt’s auch zwischen den Frameworks: [React](https://react.dev/)
wird gut unterstützt, [Vue](https://vuejs.org/) weniger, bei
[Svelte](https://svelte.dev/) wird’s noch dünner. Der Grund: KI kann nur gut,
was sie oft genug gesehen hat.

Markus‘ Fazit ist realistisch: Für schnelle MVPs ist KI ein gutes Tool. Für
langfristige Architektur oder Legacy-Code eher nicht. Zwischen Hype und
Ernüchterung bleibt KI ein mächtiges Werkzeug – aber nur, wenn man es gezielt
und reflektiert einsetzt.


LINKS

MICROSOFT CEO SAYS UP TO 30% OF THE COMPANY’S CODE WAS WRITTEN BY AI

Ein Interview mit Satya Nadella über den aktuellen Einfluss von KI auf
Softwareentwicklung bei Microsoft.

1,3 MILLIONEN DOLLAR GESPART: 37SIGNALS ZIEHT DATEN VON AWS AUF EIGENE SERVER UM

Ein Erfahrungsbericht darüber, wie 37signals mit eigener Infrastruktur massiv
Kosten senkt.

Revision 667: Kann eine KI Entwickler:innen ersetzen?

<p>Dieses Interview ist einer von 3 Teilen unserer Serie On Tour @ #headinthecloud. <a href="https://www.mittwald.de/lp/head-in-the-cloud?ref=workingdraft.de">Head in the Cloud</a> ist eine Konferenz von <a href="https://www.mittwald.de/lp/workingdraft?ref=workingdraft.de">Mittwald</a>, die am 13. Juni 2025 in Espelkamp stattfand.</p>
<h3>This Way Up: Zwei Jahre Platform Engineering zwischen Stück-, Gefahr- und Sammelgut</h3>
<p>Mit <a href="https://www.linkedin.com/in/mathias-gebbe/">Mathias Gebbe</a>, <a href="https://www.linkedin.com/in/aljoschap/">Aljoscha Bollmann</a></p>
<p>Aljoscha und Matze sprechen über die Learnings ihres Platform Engineering Teams &#8211; was hat gut geklappt, was funktioniert vielleicht auch nicht so einfach. Neben praktischen Tipps, gibt’s auch einige Insights aus der Arbeit für den Logistik-Dienstleister Hellmann und vor allem erfahrt ihr auch, was es mit Stück-, Gefahr- und Sammelgut auf sich hat.</p>
<p>Das Video zum Talk wird zeitnah auf dem <a href="https://www.youtube.com/@mittwald">YouTube Kanal von Mittwald</a> verfügbar sein.</p>


Dieses Interview ist einer von 3 Teilen unserer Serie On Tour @ #headinthecloud.
Head in the Cloud ist eine Konferenz von Mittwald, die am 13. Juni 2025 in
Espelkamp stattfand.


THIS WAY UP: ZWEI JAH…

Dieses Interview ist einer von 3 Teilen unserer Serie On Tour @ #headinthecloud.
Head in the Cloud ist eine Konferenz von Mittwald, die am 13. Juni 2025 in
Espelkamp stattfand.


THIS WAY UP: ZWEI JAHRE PLATFORM ENGINEERING ZWISCHEN STÜCK-, GEFAHR- UND
SAMMELGUT

Mit Mathias Gebbe, Aljoscha Bollmann

Aljoscha und Matze sprechen über die Learnings ihres Platform Engineering Teams
– was hat gut geklappt, was funktioniert vielleicht auch nicht so einfach. Neben
praktischen Tipps, gibt’s auch einige Insights aus der Arbeit für den
Logistik-Dienstleister Hellmann und vor allem erfahrt ihr auch, was es mit
Stück-, Gefahr- und Sammelgut auf sich hat.

Das Video zum Talk wird zeitnah auf dem YouTube Kanal von Mittwald verfügbar
sein.

On Tour @ #headinthecloud – Platform Engineering mit Mathias Gebbe & Aljoscha
Bollmann

<p>In unserem KI-Block geht’s diesmal wieder um den Einsatz von Künstlicher Intelligenz in der Webentwicklung – von Codegenerierung über Tool-Integrationen bis hin zu lokalen Modellen und neuen Standards, die die Zusammenarbeit zwischen Mensch und Maschine verändern könnten. Dazu haben wir Max Marschall eingeladen (Consultant bei <a href="https://www.thinktecture.com/thinktects/max-marschall/">ThinkTecture</a>, <a href="https://www.linkedin.com/in/max-marschall-518214170/?trk=public_profile_browsemap&amp;originalSubdomain=de">LinkedIn</a>), der mit Vanessa und Schepp über seine Erfahrungen spricht. Wir diskutieren Tooling, werfen einen kritischen Blick auf technische und ethische Grundlagen – und Max bringt’s auf den Punkt: Wir arbeiten immer mehr mit „Sprache als Interface“.</p>
<aside class="message long-message">
<h3>Unser Sponsor</h3>
<p>  <a href="https://workshops.de/ki?ref=workingdraft.de" aria-label"zu workshops.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;"
                                                              srcset="https://workingdraft.de/wp-content/uploads/2025/05/workshops-de-workingdraft-share-image.jpg"
                                                              alt=""/></a></p>
<div class="message_content">
<strong>Die KI-Revolution ist da</strong> – bist du bereit, sie aktiv zu gestalten?<br />
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!</p>
<p>Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf <a href="https://workshops.de/ki?ref=workingdraft.de">workshops.de/ki</a>.<br />
Mit dem Rabatt-Code <strong>WORKINGDRAFT</strong> sparst du außerdem <strong>10 % auf alle Schulungen</strong>!</p></div>
</aside>
<aside class="message long-message">
<h2>Unser Sponsor</h2>
<p><a href="https://workshops.de/ki?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;" srcset="https://workingdraft.de/wp-content/uploads/2025/05/workshops-de-workingdraft-share-image.jpg" alt="" /></a></p>
<div class="message_content"><strong>Die KI-Revolution ist da</strong> – bist du bereit, sie aktiv zu gestalten?<br />
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf <a href="https://workshops.de/ki?ref=workingdraft.de">workshops.de/ki</a>.<br />
Mit dem Rabatt-Code <strong>WORKINGDRAFT</strong> sparst du außerdem <strong>10 % auf alle Schulungen</strong>!</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:06:15] LLMs</dt>
<dd>Wir sprechen über die Basis fast aller heutigen KI-Anwendungen: LLMs. Schepp erinnert sich an seine ersten Gehversuche mit der <a href="https://www.tabnine.com/">Tabnine-Erweiterung für JetBrains</a>, Max bringt die aktuelle Entwicklung ein – von klassischem Machine Learning bis zu ChatGPT. Dabei bleibt klar: Die Vorschläge sollte man nicht blind übernehmen. Und auch das Thema Urheberrecht beim Training von Modellen lassen wir nicht außen vor.</dd>
<dt>[00:13:15] Komplexität der Aufgaben</dt>
<dd>Je komplexer die Aufgabe, desto schwieriger tut sich KI. Das stellen Max und Vanessa schnell fest. Bei einfachen Problemen funktioniert’s oft erstaunlich gut – bei größeren Projekten sinkt der Nutzen oder es schleichen sich Fehler ein.</dd>
<dt>[00:21:42] Agentic Code Editors</dt>
<dd>Wir werfen einen Blick auf Editoren, die mehr können als einfache Prompts: sogenannte Agentic Code Editors. Max hat verschiedenste Tools ausprobiert – von <a href="https://neovim.io/">NeoVim</a> über <a href="https://code.visualstudio.com/">VS Code</a> bis <a href="https://www.jetbrains.com/de-de/">JetBrains</a>. Tools wie <a href="https://windsurf.com/editor">Windsurf</a> oder Cursor liefern echte Kontextunterstützung. Vanessa bleibt lieber bei ChatGPT, weil dort klar ist: Kontext gibt’s keinen. Wir reden auch über <code>@commands</code> zur gezielten Aufgabensteuerung und Use Cases wie Variablennamen oder Talktitel finden.</dd>
<dt>[00:30:47] Coding Rules</dt>
<dd>Wir sprechen über <a href="https://codingrules.ai">CodingRules.ai</a> und ähnliche Tools, mit denen wir einmal definieren können, welche Stilregeln gelten – z. B. ob <code>fat arrow functions</code> oder ECMAScript-Imports verwendet werden sollen. Max nutzt solche Tools projektbezogen – und schaltet z. B. in einen „Architekturmodus“ oder „Doku-Modus“ um.</dd>
<dt>[00:34:45] Memory Bank</dt>
<dd>Langfristiger Kontext ist das Stichwort: Mit Tools wie <a href="https://github.com/vanzan01/cursor-memory-bank">Cursor Memory Bank</a> oder <a href="https://cline.bot/">Cline.bot</a> lassen sich Informationen dauerhaft speichern – z. B. welche Tools im Projekt verwendet werden. Cline legt dafür Markdown-Dateien an, wie in den <a href="https://docs.cline.bot/prompting/cline-memory-bank">Cline Docs</a> beschrieben.</dd>
<dt>[00:39:56] Lokale LLMs</dt>
<dd>Datenschutz ist ein großes Thema – gerade im Unternehmenskontext. Wir sprechen über lokale LLMs mit <a href="https://ollama.com/">Ollama</a> oder <a href="https://azure.microsoft.com/en-us/products/cognitive-services/openai-service/">ChatGPT via Azure</a>. So lassen sich Modelle datenschutzkonform nutzen – ohne dass Inhalte ins Training einfließen.</dd>
<dt>[00:45:18] MCP (Model Context Protocol)</dt>
<dd>Max bringt MCP ins Spiel – das <a href="https://www.anthropic.com/news/model-context-protocol">Model Context Protocol</a> von <a href="https://www.anthropic.com/">Anthropic</a>. Eine neue Schnittstelle, mit der sich LLMs standardisiert mit externen Tools wie Datenbanken oder Backends verbinden lassen.</dd>
<dt>[00:51:02] Generatoren</dt>
<dd>Wir reden über Tools wie <a href="https://v0.dev/">V0</a>, <a href="https://lovable.dev/">Lovable</a>, <a href="https://bolt.new/">Bolt.new</a> und <a href="https://www.builder.io/">Builder.io</a>. Sie liefern per Prompt komplette Frontends – oft als React-Komponenten. Das spart Zeit, ist aber in der Praxis oft auf generische Anwendungen begrenzt. Kevin hat in <a href="https://workingdraft.de/661/">Revision 665</a> ähnliche Erfahrungen gemacht.</dd>
<dt>[01:00:31] Chrome Dev Tools</dt>
<dd>Auch die <a href="https://developer.chrome.com/docs/devtools/">Chrome DevTools</a> bekommen KI-Funktionen. Max berichtet, dass man dort künftig Fragen zum Code stellen oder Styles ändern kann – spannend, auch wenn er selbst das lieber direkt in der IDE macht. Firefox testet laut <a href="https://support.mozilla.org/en-US/kb/ai-chatbot">Support-Artikel</a> eigene KI-Features.</dd>
<dt>[01:13:39] CLI Integration</dt>
<dd>Wer im Terminal zu Hause ist, schaut sich Tools wie <a href="https://aider.chat/">Aider</a> oder <a href="https://www.warp.dev/">Warp</a> an. Wir sprechen über diesen <a href="https://piotrzan.medium.com/5-must-have-command-line-ai-tools-839b0cf95c97">Medium-Artikel mit 5 Must-Have CLI-AI-Tools</a>, in dem praktische Tools gesammelt sind.</dd>
<dt>[01:15:57] Platform Tooling</dt>
<dd>Auch rund um GitHub, Jira &amp; Co. zieht KI ein. Automatische Pull Request Reviews, Ticket-Zusammenfassungen, Textoptimierungen – das verändert unsere Workflows und spart Zeit.</dd>
</dl>


In unserem KI-Block geht’s diesmal wieder um den Einsatz von Künstlicher
Intelligenz in der Webentwicklung – von Codegenerierung über Tool-Integrationen
bis hin zu lokalen Modellen und neuen Standards…

In unserem KI-Block geht’s diesmal wieder um den Einsatz von Künstlicher
Intelligenz in der Webentwicklung – von Codegenerierung über Tool-Integrationen
bis hin zu lokalen Modellen und neuen Standards, die die Zusammenarbeit zwischen
Mensch und Maschine verändern könnten. Dazu haben wir Max Marschall eingeladen
(Consultant bei ThinkTecture, LinkedIn), der mit Vanessa und Schepp über seine
Erfahrungen spricht. Wir diskutieren Tooling, werfen einen kritischen Blick auf
technische und ethische Grundlagen – und Max bringt’s auf den Punkt: Wir
arbeiten immer mehr mit „Sprache als Interface“.


UNSER SPONSOR



Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du,
Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten
einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring
dein Team auf das nächste Level!



Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf
workshops.de/ki.
Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!


UNSER SPONSOR



Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du,
Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten
einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring
dein Team auf das nächste Level!Informier dich jetzt über die aktuellen Kurse
und sichere dir deinen Platz auf workshops.de/ki.
Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!


SCHAUNOTIZEN

[00:06:15] LLMS

Wir sprechen über die Basis fast aller heutigen KI-Anwendungen: LLMs. Schepp
erinnert sich an seine ersten Gehversuche mit der Tabnine-Erweiterung für
JetBrains, Max bringt die aktuelle Entwicklung ein – von klassischem Machine
Learning bis zu ChatGPT. Dabei bleibt klar: Die Vorschläge sollte man nicht
blind übernehmen. Und auch das Thema Urheberrecht beim Training von Modellen
lassen wir nicht außen vor.

[00:13:15] KOMPLEXITÄT DER AUFGABEN

Je komplexer die Aufgabe, desto schwieriger tut sich KI. Das stellen Max und
Vanessa schnell fest. Bei einfachen Problemen funktioniert’s oft erstaunlich gut
– bei größeren Projekten sinkt der Nutzen oder es schleichen sich Fehler ein.

[00:21:42] AGENTIC CODE EDITORS

Wir werfen einen Blick auf Editoren, die mehr können als einfache Prompts:
sogenannte Agentic Code Editors. Max hat verschiedenste Tools ausprobiert – von
NeoVim über VS Code bis JetBrains. Tools wie Windsurf oder Cursor liefern echte
Kontextunterstützung. Vanessa bleibt lieber bei ChatGPT, weil dort klar ist:
Kontext gibt’s keinen. Wir reden auch über @commands zur gezielten
Aufgabensteuerung und Use Cases wie Variablennamen oder Talktitel finden.

[00:30:47] CODING RULES

Wir sprechen über CodingRules.ai und ähnliche Tools, mit denen wir einmal
definieren können, welche Stilregeln gelten – z. B. ob fat arrow functions oder
ECMAScript-Imports verwendet werden sollen. Max nutzt solche Tools
projektbezogen – und schaltet z. B. in einen „Architekturmodus“ oder
„Doku-Modus“ um.

[00:34:45] MEMORY BANK

Langfristiger Kontext ist das Stichwort: Mit Tools wie Cursor Memory Bank oder
Cline.bot lassen sich Informationen dauerhaft speichern – z. B. welche Tools im
Projekt verwendet werden. Cline legt dafür Markdown-Dateien an, wie in den Cline
Docs beschrieben.

[00:39:56] LOKALE LLMS

Datenschutz ist ein großes Thema – gerade im Unternehmenskontext. Wir sprechen
über lokale LLMs mit Ollama oder ChatGPT via Azure. So lassen sich Modelle
datenschutzkonform nutzen – ohne dass Inhalte ins Training einfließen.

[00:45:18] MCP (MODEL CONTEXT PROTOCOL)

Max bringt MCP ins Spiel – das Model Context Protocol von Anthropic. Eine neue
Schnittstelle, mit der sich LLMs standardisiert mit externen Tools wie
Datenbanken oder Backends verbinden lassen.

[00:51:02] GENERATOREN

Wir reden über Tools wie V0, Lovable, Bolt.new und Builder.io. Sie liefern per
Prompt komplette Frontends – oft als React-Komponenten. Das spart Zeit, ist aber
in der Praxis oft auf generische Anwendungen begrenzt. Kevin hat in Revision 665
ähnliche Erfahrungen gemacht.

[01:00:31] CHROME DEV TOOLS

Auch die Chrome DevTools bekommen KI-Funktionen. Max berichtet, dass man dort
künftig Fragen zum Code stellen oder Styles ändern kann – spannend, auch wenn er
selbst das lieber direkt in der IDE macht. Firefox testet laut Support-Artikel
eigene KI-Features.

[01:13:39] CLI INTEGRATION

Wer im Terminal zu Hause ist, schaut sich Tools wie Aider oder Warp an. Wir
sprechen über diesen Medium-Artikel mit 5 Must-Have CLI-AI-Tools, in dem
praktische Tools gesammelt sind.

[01:15:57] PLATFORM TOOLING

Auch rund um GitHub, Jira & Co. zieht KI ein. Automatische Pull Request Reviews,
Ticket-Zusammenfassungen, Textoptimierungen – das verändert unsere Workflows und
spart Zeit.

Revision 666: KI in der Webentwicklung

<p>Weiter in unserem KI-Block geht es mit Kevin Chromik (<a href="https://kevinchromik.de/">Webseite</a>, <a href="https://www.linkedin.com/in/kevinchromik/">LinkedIn</a>), Content Creator (<a href="https://www.youtube.com/kevinchromik">YouTube</a>). Kevin berichtet Hans und Vanessa seine Erfahrungen darüber, wie er mit KI Tools 3x schneller Apps programmieren kann.</p>
<aside class="message long-message">
<h3>Unser Sponsor</h3>
<p><a href="https://mittwald.de/hitc?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;" srcset="https://workingdraft.de/wp-content/uploads/2023/03/Podcast_Banner_Mittwald_-Hosting_neu_gedacht_945x314px.jpg" alt="" /></a></p>
<div class="message_content">
<p>Am <strong>13. Juni 2025</strong> lädt mittwald zum <strong>Head in the Cloud Summit</strong> ein – ein Tag voller<br />
Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um<br />
voneinander zu lernen.</p>
<p>Freu dich auf spannende Talks und Sessions zu <strong>Cloud &amp; DevOps</strong>, <strong>Technology</strong> und<br />
<strong>Culture &amp; Creativity</strong>. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends<br />
von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche.</p>
<p>Die Tickets sind begrenzt, also schnell buchen auf <a href="https://mittwald.de/hitc?ref=workingdraft.de">mittwald.de/hitc</a>.</p>
</div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:30] Wie ich mit KI 3x schneller Apps programmiere</dt>
<dd>3x schneller entwickeln! Ja, das ist eine YouTube-Clickbait Headline! Es wird schnell klar: Die KI übernimmt zwar nicht alles, aber sie kann an vielen Stellen den Entwicklungsprozess deutlich beschleunigen – manchmal sogar um das Dreifache. Kevin berichtet über eine App, die er zusammen mit einem anderem YouTuber in <a href="https://flutter.dev/">Flutter</a> mit Hilfe von KI-Tools gebaut hat. Der Anwendungsfall ist hierbei, dass sie nur zu zweit an dieser App schreiben, und beide zuvor nicht mit Flutter gearbeitet haben. Sie müssen bei dieser App auch keinen strikten Design Richtlinien folgen, sondern können der KI mehr Freiheiten geben.</p>
<p>Ein großes Thema ist die Frage nach dem Kontext: Tools wie <a href="https://chatgpt.com/">ChatGPT</a> liefern oft brauchbare Antworten, kennen aber die eigene Codebase nicht. Das macht ihre Vorschläge schnell unbrauchbar oder zumindest nicht optimal integrierbar. Ganz anders sieht es bei Tools wie <a href="https://www.cursor.com/">Cursor</a> oder <a href="https://windsurf.com/editor">Windsurf</a> aus, die direkt in die IDE eingebunden werden – z. B. in <a href="https://code.visualstudio.com/">VS Code</a> – und Zugriff auf das gesamte Projekt haben. Damit können sie nicht nur präziser helfen, sondern auch bessere Architekturvorschläge machen oder konkrete Codeabschnitte erklären.</p>
<p>Besonders spannend ist Kevins Ansatz, KI nicht unbedingt zum „schnelleren Programmieren“ im klassischen Sinne zu nutzen, sondern vielmehr für alles drumherum. Beim Prototyping etwa hilft KI, Ideen schnell zu visualisieren – auch wenn der produzierte Code am Ende verworfen wird. Kevin erzählt von einem Beispiel, als er ein Award-System in seine <a href="https://streak.kevinchromik.de/">Habit-Tracker-App</a> einbauen wollte: Die Idee war noch nicht ausgereift, doch <a href="https://windsurf.com/editor">Windsurf</a> konnte dennoch eine erste Oberfläche erzeugen, mit der man experimentieren konnte – inklusive Animationen. Der Code war nicht perfekt, aber als Sparringspartner war die KI extrem hilfreich.</p>
<p>Wir sprechen auch über den Unterschied zwischen eigenen Programmiersprachen und fremden: Ist man mit KI auch in der eigenen Sprache wirklich schneller? Und wie sinnvoll ist KI eigentlich für Junior-Entwickler:innen? Kevin und Vanessa sehen hier Chancen, aber auch Risiken. Während <a href="https://stackoverflow.com/questions">Stack Overflow</a> oft ein notwendiger Umweg ist, bei dem man sich zwangsläufig mit dem Problem auseinandersetzt, liefern KI-Tools direkte Lösungen – ohne Umweg, ohne Kontext. Das kann zu schnellen Ergebnissen führen, aber auch dazu, dass Lernprozesse übersprungen werden.</p>
<p class="" data-start="2208" data-end="2421">Trotzdem: Gute Tools wie <a href="https://windsurf.com/editor">Windsurf</a> ermöglichen inzwischen Rückfragen zur Codebase wie „Erklär mir mal die Architektur dieser App“ – und das kann gerade für weniger erfahrene Entwickler:innen ein echter Gewinn sein.</p>
<p>Ein weiteres Thema ist Codequalität. Kevin berichtet, dass er seine <a href="https://streak.kevinchromik.de/">Habit-Tracker-App</a> bewusst mit einer sauberen Architektur gebaut hat – auch wenn sie funktional simpel ist. Er merkt an: Je besser man selbst entwickelt, desto mehr stört einen der Output von KI, weil viele Vorschläge einfach qualitativ nicht mithalten können. Viel Code im Netz ist schlicht schlecht – und KI reproduziert diesen leider oft. Gute Entwickler:innen sind in den meisten Fällen noch deutlich besser als jede KI.</p>
<p>Zum Abschluss diskutieren wir noch mit Hans, ob man heute noch zusätzliche Libraries braucht – oder ob KI-Tools wie <a href="https://v0.dev/">V0 von Vercel</a> mit ihren fertigen Komponenten schon ausreichen, um direkt damit zu starten.</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://www.builder.io/blog/windsurf-vs-cursor">Windsurf vs. Cursor (Builder.io)</a></dt>
<dd>Ein Vergleich zweier KI-gestützter Entwicklungsumgebungen, die im Podcast thematisiert werden.</dd>
<dt><a href="https://cucumber.io/">Cucumber</a></dt>
<dd>Testing-Tool für verhaltensgesteuerte Entwicklung – im Gespräch als potenzieller KI-Anwendungsfall erwähnt.</dd>
<dt><a href="https://vercel.com/v0">v0 von Vercel</a></dt>
<dd>KI-gestütztes Tool zum Erzeugen von UI-Komponenten – im Gespräch als Beispiel für automatisierte Entwicklung.</dd>
</dl>


Weiter in unserem KI-Block geht es mit Kevin Chromik (Webseite, LinkedIn),
Content Creator (YouTube). Kevin berichtet Hans und Vanessa seine Erfahrungen
darüber, wie er mit KI Tools 3x schneller Apps …

Weiter in unserem KI-Block geht es mit Kevin Chromik (Webseite, LinkedIn),
Content Creator (YouTube). Kevin berichtet Hans und Vanessa seine Erfahrungen
darüber, wie er mit KI Tools 3x schneller Apps programmieren kann.


UNSER SPONSOR



Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller
Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker,
Developer und Digitalagenturen, um
voneinander zu lernen.

Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und
Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis
hin zu den Trends
von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche.

Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc.


SCHAUNOTIZEN

[00:01:30] WIE ICH MIT KI 3X SCHNELLER APPS PROGRAMMIERE

3x schneller entwickeln! Ja, das ist eine YouTube-Clickbait Headline! Es wird
schnell klar: Die KI übernimmt zwar nicht alles, aber sie kann an vielen Stellen
den Entwicklungsprozess deutlich beschleunigen – manchmal sogar um das
Dreifache. Kevin berichtet über eine App, die er zusammen mit einem anderem
YouTuber in Flutter mit Hilfe von KI-Tools gebaut hat. Der Anwendungsfall ist
hierbei, dass sie nur zu zweit an dieser App schreiben, und beide zuvor nicht
mit Flutter gearbeitet haben. Sie müssen bei dieser App auch keinen strikten
Design Richtlinien folgen, sondern können der KI mehr Freiheiten geben.



Ein großes Thema ist die Frage nach dem Kontext: Tools wie ChatGPT liefern oft
brauchbare Antworten, kennen aber die eigene Codebase nicht. Das macht ihre
Vorschläge schnell unbrauchbar oder zumindest nicht optimal integrierbar. Ganz
anders sieht es bei Tools wie Cursor oder Windsurf aus, die direkt in die IDE
eingebunden werden – z. B. in VS Code – und Zugriff auf das gesamte Projekt
haben. Damit können sie nicht nur präziser helfen, sondern auch bessere
Architekturvorschläge machen oder konkrete Codeabschnitte erklären.

Besonders spannend ist Kevins Ansatz, KI nicht unbedingt zum „schnelleren
Programmieren“ im klassischen Sinne zu nutzen, sondern vielmehr für alles
drumherum. Beim Prototyping etwa hilft KI, Ideen schnell zu visualisieren – auch
wenn der produzierte Code am Ende verworfen wird. Kevin erzählt von einem
Beispiel, als er ein Award-System in seine Habit-Tracker-App einbauen wollte:
Die Idee war noch nicht ausgereift, doch Windsurf konnte dennoch eine erste
Oberfläche erzeugen, mit der man experimentieren konnte – inklusive Animationen.
Der Code war nicht perfekt, aber als Sparringspartner war die KI extrem
hilfreich.

Wir sprechen auch über den Unterschied zwischen eigenen Programmiersprachen und
fremden: Ist man mit KI auch in der eigenen Sprache wirklich schneller? Und wie
sinnvoll ist KI eigentlich für Junior-Entwickler:innen? Kevin und Vanessa sehen
hier Chancen, aber auch Risiken. Während Stack Overflow oft ein notwendiger
Umweg ist, bei dem man sich zwangsläufig mit dem Problem auseinandersetzt,
liefern KI-Tools direkte Lösungen – ohne Umweg, ohne Kontext. Das kann zu
schnellen Ergebnissen führen, aber auch dazu, dass Lernprozesse übersprungen
werden.

Trotzdem: Gute Tools wie Windsurf ermöglichen inzwischen Rückfragen zur Codebase
wie „Erklär mir mal die Architektur dieser App“ – und das kann gerade für
weniger erfahrene Entwickler:innen ein echter Gewinn sein.

Ein weiteres Thema ist Codequalität. Kevin berichtet, dass er seine
Habit-Tracker-App bewusst mit einer sauberen Architektur gebaut hat – auch wenn
sie funktional simpel ist. Er merkt an: Je besser man selbst entwickelt, desto
mehr stört einen der Output von KI, weil viele Vorschläge einfach qualitativ
nicht mithalten können. Viel Code im Netz ist schlicht schlecht – und KI
reproduziert diesen leider oft. Gute Entwickler:innen sind in den meisten Fällen
noch deutlich besser als jede KI.

Zum Abschluss diskutieren wir noch mit Hans, ob man heute noch zusätzliche
Libraries braucht – oder ob KI-Tools wie V0 von Vercel mit ihren fertigen
Komponenten schon ausreichen, um direkt damit zu starten.


LINKS

WINDSURF VS. CURSOR (BUILDER.IO)

Ein Vergleich zweier KI-gestützter Entwicklungsumgebungen, die im Podcast
thematisiert werden.

CUCUMBER

Testing-Tool für verhaltensgesteuerte Entwicklung – im Gespräch als potenzieller
KI-Anwendungsfall erwähnt.

V0 VON VERCEL

KI-gestütztes Tool zum Erzeugen von UI-Komponenten – im Gespräch als Beispiel
für automatisierte Entwicklung.

Revision 665: Wie ich mit KI 3x schneller Apps programmiere

<p>Extensions für TYPO3 entwickeln – klingt erstmal nach Handarbeit. Aber was passiert, wenn man gängige KI-Tools wie ChatGPT oder Codegenerierungsdienste an den Prozess lässt? Martin Helmich hat’s ausprobiert – und berichtet von den praktischen Herausforderungen, Erfolgen und Fallstricken beim Einsatz von KI im TYPO3-Kontext.   </p>
<aside class="message long-message">
<h3>Unser Sponsor</h3>
<p>  <a href="https://workshops.de/ki?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;"
                                                              srcset="https://workingdraft.de/wp-content/uploads/2025/05/workshops-de-workingdraft-share-image.jpg"
                                                              alt=""/></a></p>
<div class="message_content">
<strong>Die KI-Revolution ist da</strong> – bist du bereit, sie aktiv zu gestalten?<br />
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!</p>
<p>Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf <a href="https://workshops.de/ki?ref=workingdraft.de">workshops.de/ki</a>.<br />
Mit dem Rabatt-Code <strong>WORKINGDRAFT</strong> sparst du außerdem <strong>10 % auf alle Schulungen</strong>!</p></div>
</aside>
<dt>[00:01:36] TYPO3-Extensions bauen mit AI</dt>
<dd>Martin erklärt, wie er ein KI-gestütztes Projekt aufgesetzt hat, das TYPO3-Extensions auf Basis von Prompts generiert. Ziel war es nicht, produktiven Code zu erzeugen, sondern auszuloten, was mit heutigen Tools bereits möglich ist – und wo man mit durchdachten Prompts tatsächlich Zeit und Struktur gewinnt.</p>
<p>Wir diskutieren, welche Aufgaben sich für KI besonders eignen – z. B. die Generierung von TCA-Definitionen, Sprachdateien oder Konfigurationsklassen – und wie sich generierter Code später weiterverwenden lässt. Dabei wird klar: Ohne ein tiefes Verständnis des TYPO3-Ökosystems bringt die beste KI wenig.</p>
<p>Ein spannender Punkt: Wie lassen sich Prompt-Vorlagen standardisieren? Könnte man daraus ein öffentliches Tool bauen, das TYPO3-Entwicklung beschleunigt – ohne dass es gleich „AI-first“ wird?</p>
<p>Daneben geht’s um die Frage, wie man mit Blackbox-Code umgeht, der nicht aus dem Editor kommt, sondern aus einem Prompt. Und wie viel man einer KI zutrauen will, wenn es nicht nur um technische Korrektheit, sondern auch um konzeptuelle Entscheidungen geht.</p>
<p>Zum Schluss wagen wir noch einen kleinen Ausblick: Wo geht das hin – in TYPO3, aber auch allgemein im Web-Stack? Und was braucht es, damit KI bei der Extension-Entwicklung mehr wird als nur ein Gimmick?</dd>
</dl>
<h3>Links</h3>
<dl>
<dt><a href="https://typo3.org/project/association">TYPO3 Association</a></dt>
<dd>Martin ist dort im Vorstand aktiv</dd>
<dt><a href="https://www.mittwald.de/lp/smart-extension-builder">Smart Extension Builder von Mittwald</a></dt>
<dd>KI-gestütztes Tool zum Generieren von TYPO3-Extensions</dd>
<dt><a href="https://dify.ai/">Dify</a></dt>
<dd>Tool zum Erstellen eigener KI-Anwendungen – als Backend für Martins Projekt im Einsatz</dd>
<dt><a href="https://getrector.com/">Rector</a></dt>
<dd>Automatisiertes Refactoring-Tool für PHP</dd>
<dt><a href="https://web.lmarena.ai/">WebDev Arena</a></dt>
<dd>Plattform zum Vergleichen von KI-Modellen beim Webdesign – man gibt einen Prompt ein und sieht, wie verschiedene Modelle daraus eine Website bauen (erwähnt in <a href="https://front-end-fire.com/episodes/94/">Front-End Fire #94</a>).</dd>
</dl>


Extensions für TYPO3 entwickeln – klingt erstmal nach Handarbeit. Aber was
passiert, wenn man gängige KI-Tools wie ChatGPT oder Codegenerierungsdienste an
den Prozess lässt? Martin Helmich hat’s auspr…

Extensions für TYPO3 entwickeln – klingt erstmal nach Handarbeit. Aber was
passiert, wenn man gängige KI-Tools wie ChatGPT oder Codegenerierungsdienste an
den Prozess lässt? Martin Helmich hat’s ausprobiert – und berichtet von den
praktischen Herausforderungen, Erfolgen und Fallstricken beim Einsatz von KI im
TYPO3-Kontext.


UNSER SPONSOR



Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du,
Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten
einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring
dein Team auf das nächste Level!



Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf
workshops.de/ki.
Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!

[00:01:36] TYPO3-EXTENSIONS BAUEN MIT AI

Martin erklärt, wie er ein KI-gestütztes Projekt aufgesetzt hat, das
TYPO3-Extensions auf Basis von Prompts generiert. Ziel war es nicht, produktiven
Code zu erzeugen, sondern auszuloten, was mit heutigen Tools bereits möglich ist
– und wo man mit durchdachten Prompts tatsächlich Zeit und Struktur gewinnt.



Wir diskutieren, welche Aufgaben sich für KI besonders eignen – z. B. die
Generierung von TCA-Definitionen, Sprachdateien oder Konfigurationsklassen – und
wie sich generierter Code später weiterverwenden lässt. Dabei wird klar: Ohne
ein tiefes Verständnis des TYPO3-Ökosystems bringt die beste KI wenig.

Ein spannender Punkt: Wie lassen sich Prompt-Vorlagen standardisieren? Könnte
man daraus ein öffentliches Tool bauen, das TYPO3-Entwicklung beschleunigt –
ohne dass es gleich „AI-first“ wird?

Daneben geht’s um die Frage, wie man mit Blackbox-Code umgeht, der nicht aus dem
Editor kommt, sondern aus einem Prompt. Und wie viel man einer KI zutrauen will,
wenn es nicht nur um technische Korrektheit, sondern auch um konzeptuelle
Entscheidungen geht.

Zum Schluss wagen wir noch einen kleinen Ausblick: Wo geht das hin – in TYPO3,
aber auch allgemein im Web-Stack? Und was braucht es, damit KI bei der
Extension-Entwicklung mehr wird als nur ein Gimmick?


LINKS

TYPO3 ASSOCIATION

Martin ist dort im Vorstand aktiv

SMART EXTENSION BUILDER VON MITTWALD

KI-gestütztes Tool zum Generieren von TYPO3-Extensions

DIFY

Tool zum Erstellen eigener KI-Anwendungen – als Backend für Martins Projekt im
Einsatz

RECTOR

Automatisiertes Refactoring-Tool für PHP

WEBDEV ARENA

Plattform zum Vergleichen von KI-Modellen beim Webdesign – man gibt einen Prompt
ein und sieht, wie verschiedene Modelle daraus eine Website bauen (erwähnt in
Front-End Fire #94).

Revision 664: TYPO3-Extensions bauen mit AI

<p>Schon wieder eine neue Buzzword-KI? Nicht ganz. In dieser Folge sprechen wir mit <a href="https://www.linkedin.com/in/robinboehm/">Robin Böhm</a> über Agentic AI – ein Konzept, das gerade massiv Fahrt aufnimmt. Statt auf einen Prompt zu warten, werden KI-Agenten selbst aktiv: Sie analysieren Aufgaben, planen Schritte und setzen diese eigenständig um. Was bedeutet das für Entwickler:innen, Tools – und letztlich für uns als Nutzer:innen?</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:36] Agentic AI</dt>
<dd>Robin gibt einen praxisnahen Überblick: Was macht eine KI „agentisch“? Wie wird festgelegt, was ein Agent darf – und was nicht? Wir steigen ein mit einem technischen Abriss der Konzepte, die aktuell unter dem Schlagwort Agentic AI diskutiert werden: Fähigkeiten, Kontrollinstanzen, Kontextverwaltung und mehr.</p>
<p>Dabei geht es auch um Frameworks wie LangChain, den Umgang mit JSON-Kommandostrukturen, und um frühe Ansätze für Protokolle, mit denen Agenten sich gegenseitig über ihre Fähigkeiten austauschen können. Robin vergleicht den aktuellen Stand mit „Super Nintendo-Level“ – was aber nicht heißt, dass das Ganze ungefährlich wäre. Denn die nächste Iteration ist vielleicht nicht weit entfernt.</p>
<p>Wir diskutieren, wie Agentic AI bereits heute in Projekten auftaucht, wo es echte Automatisierungsvorteile gibt – und wo wir dringend Grenzen ziehen müssen. Besonders spannend wird es, wenn Robin beschreibt, wie sich unsere Erwartungen an „Tools“ verändern: Weg vom klassischen Button-Klick, hin zur Zieldefinition – und der Agent übernimmt.</p>
<p>Am Ende steht die Frage: Wie behalten wir als Entwickler:innen die Kontrolle – und wie gestalten wir diese Systeme so, dass sie nicht nur mächtig, sondern auch nachvollziehbar und verantwortungsvoll sind?</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/hwchase17/langchain">LangChain</a></dt>
<dd>Ein populäres Framework für agentenbasierte KI-Anwendungen – bringt Tools, Speicher und Entscheidungslogik zusammen.</dd>
<dt><a href="https://arxiv.org/abs/2308.08155">ReAct Prompting</a></dt>
<dd>Ein Konzept, das Denk- und Aktionsschritte kombiniert – oft Basis für agentisches Verhalten bei LLMs.</dd>
</dl>


Schon wieder eine neue Buzzword-KI? Nicht ganz. In dieser Folge sprechen wir mit
Robin Böhm über Agentic AI – ein Konzept, das gerade massiv Fahrt aufnimmt.
Statt auf einen Prompt zu warten, werden KI…

Schon wieder eine neue Buzzword-KI? Nicht ganz. In dieser Folge sprechen wir mit
Robin Böhm über Agentic AI – ein Konzept, das gerade massiv Fahrt aufnimmt.
Statt auf einen Prompt zu warten, werden KI-Agenten selbst aktiv: Sie
analysieren Aufgaben, planen Schritte und setzen diese eigenständig um. Was
bedeutet das für Entwickler:innen, Tools – und letztlich für uns als
Nutzer:innen?


SCHAUNOTIZEN

[00:01:36] AGENTIC AI

Robin gibt einen praxisnahen Überblick: Was macht eine KI „agentisch“? Wie wird
festgelegt, was ein Agent darf – und was nicht? Wir steigen ein mit einem
technischen Abriss der Konzepte, die aktuell unter dem Schlagwort Agentic AI
diskutiert werden: Fähigkeiten, Kontrollinstanzen, Kontextverwaltung und mehr.



Dabei geht es auch um Frameworks wie LangChain, den Umgang mit
JSON-Kommandostrukturen, und um frühe Ansätze für Protokolle, mit denen Agenten
sich gegenseitig über ihre Fähigkeiten austauschen können. Robin vergleicht den
aktuellen Stand mit „Super Nintendo-Level“ – was aber nicht heißt, dass das
Ganze ungefährlich wäre. Denn die nächste Iteration ist vielleicht nicht weit
entfernt.

Wir diskutieren, wie Agentic AI bereits heute in Projekten auftaucht, wo es
echte Automatisierungsvorteile gibt – und wo wir dringend Grenzen ziehen müssen.
Besonders spannend wird es, wenn Robin beschreibt, wie sich unsere Erwartungen
an „Tools“ verändern: Weg vom klassischen Button-Klick, hin zur Zieldefinition –
und der Agent übernimmt.

Am Ende steht die Frage: Wie behalten wir als Entwickler:innen die Kontrolle –
und wie gestalten wir diese Systeme so, dass sie nicht nur mächtig, sondern auch
nachvollziehbar und verantwortungsvoll sind?


KEINE SCHAUNOTIZEN

LANGCHAIN

Ein populäres Framework für agentenbasierte KI-Anwendungen – bringt Tools,
Speicher und Entscheidungslogik zusammen.

REACT PROMPTING

Ein Konzept, das Denk- und Aktionsschritte kombiniert – oft Basis für
agentisches Verhalten bei LLMs.

Revision 663: Agentic AI – was kommt nach Prompting?

<p>Diesmal zu Gast: Jens Jacobsen (<a href="https://www.benutzerfreun.de/">benutzerfreun.de</a>, <a href="https://www.linkedin.com/in/jens-jacobsen-benutzerfreund/">LinkedIn</a>), Autor &amp; Digital-Experte. Jens schrieb das Buch <a href="https://www.benutzerfreun.de/websites-entwickeln-mit-ki/">Websites entwickeln mit KI</a> und erzählt Peter und Vanessa, wie das am besten geht, und warum er lieber von Webseiten &#8222;besser&#8220;, anstatt &#8222;schneller&#8220; entwickeln spricht. Das Buch richtet sich an alle mit einem gewissen technischen Verständnis – etwa Produktmanager:innen, Entwickler:innen oder Designer:innen – aber auch erfahrenere Techies werden darin wertvolle Einblicke finden.</p>
<aside class="message long-message">
<h3>Unser Sponsor</h3>
<p>  <a href="https://workshops.de/ki?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;"
                                                              srcset="https://workingdraft.de/wp-content/uploads/2025/05/workshops-de-workingdraft-share-image.jpg"
                                                              alt=""/></a></p>
<div class="message_content">
<strong>Die KI-Revolution ist da</strong> – bist du bereit, sie aktiv zu gestalten?<br />
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du, Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring dein Team auf das nächste Level!</p>
<p>Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf <a href="https://workshops.de/ki?ref=workingdraft.de">workshops.de/ki</a>.<br />
Mit dem Rabatt-Code <strong>WORKINGDRAFT</strong> sparst du außerdem <strong>10 % auf alle Schulungen</strong>!</p></div>
</aside>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] Entwickeln mit KI</dt>
<dd>Im Gespräch geht es darum, warum es nicht ausreicht, sich in einer Minute eine Website „zusammenklicken“ zu lassen – selbst wenn einem viele Tools genau das versprechen. Zwar entsteht dann formal eine Webseite, doch in den seltensten Fällen eine gute. Jens betont, wie wichtig es ist, sich zunächst Gedanken über das Geschäftsmodell zu machen, bevor man überhaupt an die technische Umsetzung denkt. Besonders bei Portfolio-Seiten oder kleinen Online-Shops kann man zwar viel mit KI erledigen, aber ohne Substanz nützt das beste Tool wenig.</dd>
<dd>
<p class="" data-start="1066" data-end="1631">Wir diskutieren auch die wachsende Zahl an KI-Tools: Jens hat über 70 davon getestet – und nur drei haben ihn wirklich überzeugt. Die meisten Tools funktionieren nach einem simplen Prinzip: Man gibt einen Titel, vielleicht ein paar Stichpunkte ein, und bekommt daraufhin eine generische Website auf Basis eines Templates. Jens warnt davor, sich von solchen „auf Knopfdruck“-Lösungen blenden zu lassen. Gute Tools hingegen stellen erst einmal Fragen – etwa zur Zielgruppe oder zur Struktur der Seite – und entwickeln daraus eine erste Sitemap oder sogar Wireframes.</p>
<p class="" data-start="1633" data-end="2043">Auch das Thema Arbeitswelt spielt eine Rolle: Wird KI langfristig Jobs im UX-Design oder Vertrieb gefährden, weil es inzwischen KI-gestütztes User-Testing und automatisierte Verkaufsanalysen gibt? Peter merkt dazu an: „Wenn’s nichts kostet, kann man’s auch siebenmal ausprobieren.“ Eine Realität, die einerseits Chancen schafft, andererseits aber auch Druck auf klassische Rollen im Unternehmen ausüben könnte. Doch Jens kontert damit, dass man dann eben sieben Versionen von irgendeiner Webseite hätte, aber nicht einer, die den eigentlichen Zweck tatsächlich richtig erfüllt.</p>
<p class="" data-start="2045" data-end="2386">Am Ende bleibt festzuhalten: Man muss heutzutage wohl leider nicht mehr programmieren können, um mit KI Webseiten zu erstellen – aber ein gewisses technisches Verständnis hilft. Das heißt aber noch lange nicht, dass eine sinnvolle Webseite dabei herauspurzelt. Nur eben irgendeine. Die eigentliche Arbeit &#8211; worum es geht, die Texte, die Bilder &#8211; dabei kann KI sehr hilfreich sein und als ein Sparring-Partner dienen. Wer nicht nur auf schnelle Ergebnisse, sondern auf durchdachte, nachhaltige Weblösungen setzt, findet in Jens&#8216; Buch einen hilfreichen Wegweiser durch die Tool-Landschaft und den KI-Dschungel.</p>
</dd>
</dl>
<h3>Links</h3>
<ul>
<li>📘 <strong data-start="1653" data-end="1675">Das Buch von Jens:</strong> <a href="https://www.benutzerfreun.de/websites-entwickeln-mit-ki/">Websites entwickeln mit KI</a><br data-start="1707" data-end="1710" />Ein praktischer Guide für alle, die Webseiten effizient mit KI planen und umsetzen wollen – ohne dabei Qualität und Strategie aus dem Blick zu verlieren.</li>
</ul>


Diesmal zu Gast: Jens Jacobsen (benutzerfreun.de, LinkedIn), Autor &
Digital-Experte. Jens schrieb das Buch Websites entwickeln mit KI und erzählt
Peter und Vanessa, wie das am besten geht, und warum …

Diesmal zu Gast: Jens Jacobsen (benutzerfreun.de, LinkedIn), Autor &
Digital-Experte. Jens schrieb das Buch Websites entwickeln mit KI und erzählt
Peter und Vanessa, wie das am besten geht, und warum er lieber von Webseiten
„besser“, anstatt „schneller“ entwickeln spricht. Das Buch richtet sich an alle
mit einem gewissen technischen Verständnis – etwa Produktmanager:innen,
Entwickler:innen oder Designer:innen – aber auch erfahrenere Techies werden
darin wertvolle Einblicke finden.


UNSER SPONSOR



Die KI-Revolution ist da – bist du bereit, sie aktiv zu gestalten?
Workshops.DE macht dich fit für die Praxis: In intensiven Schulungen lernst du,
Künstliche Intelligenz nicht nur zu verstehen, sondern gezielt in Projekten
einzusetzen. Ob vor Ort, remote oder als individuelle Firmenschulung – bring
dein Team auf das nächste Level!



Informier dich jetzt über die aktuellen Kurse und sichere dir deinen Platz auf
workshops.de/ki.
Mit dem Rabatt-Code WORKINGDRAFT sparst du außerdem 10 % auf alle Schulungen!


SCHAUNOTIZEN

[00:00:00] ENTWICKELN MIT KI

Im Gespräch geht es darum, warum es nicht ausreicht, sich in einer Minute eine
Website „zusammenklicken“ zu lassen – selbst wenn einem viele Tools genau das
versprechen. Zwar entsteht dann formal eine Webseite, doch in den seltensten
Fällen eine gute. Jens betont, wie wichtig es ist, sich zunächst Gedanken über
das Geschäftsmodell zu machen, bevor man überhaupt an die technische Umsetzung
denkt. Besonders bei Portfolio-Seiten oder kleinen Online-Shops kann man zwar
viel mit KI erledigen, aber ohne Substanz nützt das beste Tool wenig.

Wir diskutieren auch die wachsende Zahl an KI-Tools: Jens hat über 70 davon
getestet – und nur drei haben ihn wirklich überzeugt. Die meisten Tools
funktionieren nach einem simplen Prinzip: Man gibt einen Titel, vielleicht ein
paar Stichpunkte ein, und bekommt daraufhin eine generische Website auf Basis
eines Templates. Jens warnt davor, sich von solchen „auf Knopfdruck“-Lösungen
blenden zu lassen. Gute Tools hingegen stellen erst einmal Fragen – etwa zur
Zielgruppe oder zur Struktur der Seite – und entwickeln daraus eine erste
Sitemap oder sogar Wireframes.

Auch das Thema Arbeitswelt spielt eine Rolle: Wird KI langfristig Jobs im
UX-Design oder Vertrieb gefährden, weil es inzwischen KI-gestütztes User-Testing
und automatisierte Verkaufsanalysen gibt? Peter merkt dazu an: „Wenn’s nichts
kostet, kann man’s auch siebenmal ausprobieren.“ Eine Realität, die einerseits
Chancen schafft, andererseits aber auch Druck auf klassische Rollen im
Unternehmen ausüben könnte. Doch Jens kontert damit, dass man dann eben sieben
Versionen von irgendeiner Webseite hätte, aber nicht einer, die den eigentlichen
Zweck tatsächlich richtig erfüllt.

Am Ende bleibt festzuhalten: Man muss heutzutage wohl leider nicht mehr
programmieren können, um mit KI Webseiten zu erstellen – aber ein gewisses
technisches Verständnis hilft. Das heißt aber noch lange nicht, dass eine
sinnvolle Webseite dabei herauspurzelt. Nur eben irgendeine. Die eigentliche
Arbeit – worum es geht, die Texte, die Bilder – dabei kann KI sehr hilfreich
sein und als ein Sparring-Partner dienen. Wer nicht nur auf schnelle Ergebnisse,
sondern auf durchdachte, nachhaltige Weblösungen setzt, findet in Jens‘ Buch
einen hilfreichen Wegweiser durch die Tool-Landschaft und den KI-Dschungel.


LINKS

 * 📘 Das Buch von Jens: Websites entwickeln mit KI
   Ein praktischer Guide für alle, die Webseiten effizient mit KI planen und
   umsetzen wollen – ohne dabei Qualität und Strategie aus dem Blick zu
   verlieren.

Revision 662: Entwickeln mit KI

Working Draft ist der deutschsprachige Podcast für Frontend-Entwicklung, Webdesign und UI Engineering.

Bei uns geht’s um HTML, CSS, JavaScript, Frameworks wie React, Vue und Angular, Responsive Webdesign, User-Interfaces, moderne UI-Patterns, Barrierefreiheit, Tooling, Design-Systeme, Webstandards und mehr.

Unser Team besteht aus erfahrenen Frontend-Entwickler:innen aus Deutschland und Österreich – mit Gästen aus der Praxis, die regelmäßig Einblicke in aktuelle Tech-Themen geben. Ob neue CSS-Features, die Zukunft von JavaScript, KI im Frontend-Workflow oder einfach gute UI-Erfahrungen: Wir reden drüber – jede Woche neu.

PODLIST

Working Draft

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

Neue Episoden

Revision 670: Neuerungen in WebKit

Working Draft

On Tour @ #headinthecloud – Web Sustainability mit Thorsten Jonas & Marvin Hötger

Working Draft

Revision 669: Chat-Applikationen mit gängigen LLM-APIs

Working Draft

Revision 668: KI im Alltag: Werkzeug, Hype oder Risiko?

Working Draft

On Tour @ #headinthecloud – Women in Tech mit Myrna Gönnemann, Luisa Faßbender & Anna Maier

Working Draft

Revision 667: Kann eine KI Entwickler:innen ersetzen?

Working Draft

On Tour @ #headinthecloud – Platform Engineering mit Mathias Gebbe & Aljoscha Bollmann

Working Draft

Revision 666: KI in der Webentwicklung

Working Draft

Revision 665: Wie ich mit KI 3x schneller Apps programmiere

Working Draft

Revision 664: TYPO3-Extensions bauen mit AI

Working Draft

Revision 663: Agentic AI – was kommt nach Prompting?

Working Draft

Revision 662: Entwickeln mit KI

Working Draft