Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

August 01, 2023Revision 578: Host Context: Schepp
Weiter geht es mit unserer Reihe host-context()! In dieser Ausgabe rückt Schepp in den Fokus und Vanessa fragt ihn aus.
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:20] host-context(Schepp)
Natürlich reden wir zu Beginn über Scheps Spitznamen und dessen Entstehung und warum seine E-Mail-Adressen und Social-Media-Handles alle gar nicht so heißen. Es geht um Lieblingsfächer in der Schule, Schepps Vorliebe für Windows (und darum, wie die zu bröckeln beginnt). Schepp genießt nach all der Zeit immer noch die Arbeit als Frontend-Engineer und feiert das Bauen gut abgestimmter Komponenten. Es geht um seine Selbstständigkeit und seine Aktivitäten neben Job und Podcast, als da wären: die Webworker NRW und CSS Café Meetups, die Fronteers Konferenz und eine neu begonnene Tätigkeit als Gastdozent bei der Hochschule Düsseldorf. Schepp ist kein Fan von Visual Regression Testing, eher von End-to-End-Tests. Tickets würde er immer in Stunden, nicht in Komplexität schätzen, und TypeScript benutzt er genau nie. Sprachnachrichten sind für ihn „the worst“. Wenn er Zeit hätte, würde er die Programmiersprache Rust lernen und mehr Serien schauen. Stattdessen liest er viel Artikel, Blogposts und taucht in die spannenden Twitter- bzw. X-Threads folgender Accounts ein:
Science Girl
The Cultural Tutor
Verrückte Geschichten
Historic Vids
Massimo
Fascinating
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 7 min
July 13, 2023 Revision 577: Host Context: Vanessa
Wir starten in die neue Reihe des host-context()! Den Start macht Hans, der Vanessa Fragen zu Arbeit und Alltag stellt. Viel Spaß mit host-context(„Vanessa“);
Schaunotizen
[00:02:36] Host Context: Vanessa
In dieser Revision starten wir, unseren Hosts hinter die Kulissen zu sehen. Hans stellt Vanessa Fragen, die sie vorher nicht kannte – was zu unterhaltsamen Antworten führte. Gesprochen wird über alles Mögliche. Von Formel 1 über Spielekonsolen bis hin zu natürlich Technischem. Vanessa berichtet über negative und positive Erfahrungen in der Arbeitswelt. Sie erzählt, warum sie keine konkreten Vorbilder nennen kann, da sie sich Inspiration vielen verschiedenen Personen holt. Das wären zu viele, um sie alle auf einmal zu nennen. Am Ende gibt es als i-Tüpfelchen noch eine ganz typische Interviewfrage, die Vanessa so unvorbereitet trifft, dass sie befürchtet, dass sie das Interview ganz sicher nicht bestanden hat. Aber geschnitten wird beim Working Draft nicht! ;)
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
56 min
July 05, 2023 Revision 576: Qwik
In dieser Episode diskutieren Vanessa und Stefan mit ihrem Gast Bernhard Mayr (Twitter) über das Thema Qwik.
Fronteers Konferenz

Schepp lädt Euch ein, die von ihm mit-organisierte und nicht gewinnorientierte Fronteers Konferenz am 21. und 22. September im niederländischen Utrecht zu besuchen.Es kommen Andy Bell, Lea Verou, Zach Leatherman, Sara Vieira, Laura Kalbag und viele mehr und die Talks behandeln keinerlei aktuelle Frameworks, sondern betrachten jeweils bestimmte Aspekte der Web Plattform oder des Web Craftings. Es geht um neue Color Spaces, Web Components, Performance, Accessibility, Privacy, 3D und sogar LEDs :)
Ein Ticket für die zwei Tage liegt bei 500 EUR zzgl. niederländischer MwSt. und inkludiert sind nicht nur zwei Tage voller toller Vorträge, sondern auch reichlich Essen und Trinken für Euer leibliches Wohl.
Und Utrecht selbst ist auch immer einen Besuch wert, mit seiner Altstadt und ihren Grachten, aber auch ihren spektakulären Neubauten rund um den Hauptbahnhof. Es gibt viele gemütliche Ecken und Restaurants und Utrecht ist die Stadt in den Niederlanden mit der besten Rad-Infrastruktur.
Lust bekommen? Dann findet Ihr alle Infos unter fronteersconf.org.
Schaunotizen
[00:02:40] Qwik
Vanessa gibt zu, dass er das Thema bisher ignoriert hat, aber nachdem er einen Qwik-Kurs bei Frontend Masters belegt hat, hat sie daran Interesse gewonnen. Auch die anderen beachteten das Frameworks anfangs noch nicht. Aber durch ein Treffen mit Miško Hevery, CTO von builder.io und Erfinder von Angular, auf Qwik wurden sie aufmerksam. Zu dritt diskutieren über die Funktionsweise von Qwik und die Richtung, in die sich das Web entwickelt. Dabei gehen die Hosts auf Begriffe wie „Resumability“ ein, und diskutieren über die Geschwindigkeitsvorteile von Qwik. Alle versuchen, den Unterschied zwischen Resumability und Hydration zu erklären, stellen jedoch fest, dass es schwierig ist, es genau zu beschreiben.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 38 min
June 28, 2023Revision 575: Code meets Design: Frontend-Entwicklung
In dieser Episode diskutieren die Gastgeber Vanessa, Schepp und ihre Gästin Franziska Gerz (LinkedIn) über die Verbindung zwischen Frontend-Entwicklung und Design. Franziska ist Softwareentwicklerin bei Whiskey Tango Foxtrot GmbH und teilt ihre Erfahrungen als ehemalige Mediengestalterin, die sich zur Webentwicklerin weiterentwickelt hat und nun auch Führungsaufgaben übernimmt.
Schaunotizen
[00:01:34] Code meets Design: Frontend-Entwicklung
Die Idee zu dieser Folge entstand, nach ein vormaliger Gast nach Tipps zur Gestaltung seines Projekts fragte. Vanessa hatte die Idee, über die Schnittstellen zwischen Frontend-Entwicklung und Design zu sprechen. Dabei stellt sie fest, dass sie normalerweise zwar mit Designern zusammenarbeitet, aber manchmal auch selbst gestalterische Aufgaben selbst übernimmt. Vanessa und Franziska diskutieren die Herausforderungen beim eigenständigen Designen und fragen sich, ob der Beruf des Webdesigners in seiner alten Form noch existiert. Sie teilen ihre persönlichen Erfahrungen und reflektieren über ihre Herangehensweise in Designfragen. Die Episode bietet einen interessanten Einblick in die Verbindung von Frontend-Entwicklung und Design und beleuchtet die verschiedenen Perspektiven der Hosts und ihrer Gästin.
Links
Steve Schoger – The Little Details of UI Design- Link zu YouTube
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 14 min
June 21, 2023 Revision 574: Glücksrad (Applet, Headings, Slots, SVGs, Spellcheck, Screen-API, Border-Images, Indexed DB)
Schepp, Hans, und Peter ließen mal wieder das Glücksrad kreisen!
Fronteers Konferenz

Schepp lädt Euch ein, die von ihm mit-organisierte und nicht gewinnorientierte Fronteers Konferenz am 21. und 22. September im niederländischen Utrecht zu besuchen.Es kommen Andy Bell, Lea Verou, Zach Leatherman, Sara Vieira, Laura Kalbag und viele mehr und die Talks behandeln keinerlei aktuelle Frameworks, sondern betrachten jeweils bestimmte Aspekte der Web Plattform oder des Web Craftings. Es geht um neue Color Spaces, Web Components, Performance, Accessibility, Privacy, 3D und sogar LEDs :)
Ein Ticket für die zwei Tage liegt bei 500 EUR zzgl. niederländischer MwSt. und inkludiert sind nicht nur zwei Tage voller toller Vorträge, sondern auch reichlich Essen und Trinken für Euer leibliches Wohl.
Und Utrecht selbst ist auch immer einen Besuch wert, mit seiner Altstadt und ihren Grachten, aber auch ihren spektakulären Neubauten rund um den Hauptbahnhof. Es gibt viele gemütliche Ecken und Restaurants und Utrecht ist die Stadt in den Niederlanden mit der besten Rad-Infrastruktur.
Lust bekommen? Dann findet Ihr alle Infos unter fronteersconf.org.
Schaunotizen
[00:03:15] Applet-Element
Passend zum (zum Zeitpunkt der Aufnahme) kürzlich veröffentlichten CheerpJ 3.0 überlegen wir, wie wir in heutigen Browsern Java zum Laufen bringen würden und entdecken hotscripts.com wieder.
[00:14:28] Heading-Elemente
Wir verweisen auf die Revision 559, in der wir das Thema bereits erschöpfend beleuchtet hatten.
[00:15:29] slot-Attribut
Peter erklärbärt in Kürze das Slot-Element, woraufhin wir in eine Diskussion über das slotchange-Event und seine Beziehung zu Mutation-, Intersection- und ResizeObserver geraten.
[00:22:59] SVGRadialGradientElement
Peter berichtet von seinen frustrierenden SVG-Erfahrungen mit code.movie und singt ein Loblied auf Inkscape.
[00:32:17] Spellcheck-Attribut
Ihr könnt hören, wie wir uns die diversen Aspekte des Attributs live aus den Specs erarbeiten.
[00:38:50] Screen-API
Die API ist für uns neu, weswegen wir spekulieren müssen, inwiefern sie vielleicht etwas für Fold-Telefone wie das Pixel Fold sein könnte.
[00:45:13] border-image-repeat
Wir grenzen Border Images von den in Revision 574 bereits besprochenen Border Masks ab und sprechen darüber, wie CSS-Standards die den Design-Tends hinterherhecheln (z.B. border-radius).
[00:52:47] IDBRequest/result
Wir verdammen nicht nur IndexedDB in Bausch und Bogen, sondern erklären auch, warum Web SQL als Webstandard nicht funktioniert (wie auch in Browser eingebaute JS-Libraries und Custom Elements). Unsere Meinung: entweder SQLite in die Webapp einbetten oder IndexedDB-Libraries wie localForage und PouchDB verwenden!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 5 min
June 13, 2023 Revision 573: Glücksrad (Events, Bluetooth, Forms, Titles, Mask-Borders, attr-Funktion)
Traditionelles Glücksrad mit Schepp und Peter!
JSCraftCamp

Das JSCraftCamp ist eine zweitägige Unkonferenz, bei der es um Software-Crafting von JavaScript-getriebener Software geht. Hier könnt Ihr nicht nur Euer Sprachverständnis gemeinsam mit anderen aufbauen oder schärfen, es können auch Programmierpattern, Frameworks oder Transpiler Themen für Sessions sein. Da es sich um eine Unkonferenz handelt, gestaltet Ihr alle das Programm zusammen, nach Euren Wünschen!
Wann: Am 30. Juni und 1. Juli 2023
Wo: codecentric, August-Everding-Str. 20, 81671 München
Alle Infos unter jscraftcamp.org.
Schaunotizen
[00:03:19] Event/type
Event-Types mögen banale Strings sein, aber über Events im Allgemeinen gibt es viel zu sagen. So erklärt Peter CustomEvent für überholt, Schepp spricht sich für die ausschließliche Verwendung von Event Capturing aus. Desweiteren fragen wir uns nach den Begründungen für die Unterschiedlichen Bubble- und Compose-Verhaltensweisen unterschiedlicher Events und erinnern an jQuerys delegate().
[00:17:49] BluetoothDevice/name
Ob der sparsame Spezifikationstext darin begründet ist, dass Web Bluetooth nur ein dünner JS-Wrapper über normale Bluetooth-APIs ist? Wir spekulieren.
[00:19:54] Form-Element
Peters Galaxy-Brain-Hot-Take des Tages: Formulare in Single Page Apps sind ein Antipattern! Was brauchts ein absendbares Formular, wenn alle Features des Formulars in JS re-implementiert werden, wie etwa in der React-Variante von Todo MVC?
[00:34:03] Title-Element
Wir haben überraschend viele Meinungen und Fragen zum einfachsten Element aller Zeiten, speziell rund um JS-APIs und die Lokalisierung von Title-Content.
[00:46:01] mask-border-slice
Wir erfahren von der Existenz von mask-border und grenzen es im Ad-hoc-Verfahren von border-image ab.
[00:51:00] attr()
Das nicht realisierte Potenzial (v.A. bzgl. Typisierung wie bei @property) von attr() erfährt eine ausgiebige Würdigung. Spekulationen über bei CSS zusammenarbeitende Browser-Interna führen dazu, dass Peter noch eine Runde über seinen liebsten Firefox-Bug weint.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 19 min
June 06, 2023 Revision 572: Signals
Mit Verstärkung in Form von Bernhard Mayr (Mastodon, Twitter) versuchen Stefan und Peter zu ergründen, was es mit dem Signals-Hype auf sich hat.
JSCraftCamp

Das JSCraftCamp ist eine zweitägige Unkonferenz, bei der es um Software-Crafting von JavaScript-getriebener Software geht. Hier könnt Ihr nicht nur Euer Sprachverständnis gemeinsam mit anderen aufbauen oder schärfen, es können auch Programmierpattern, Frameworks oder Transpiler Themen für Sessions sein. Da es sich um eine Unkonferenz handelt, gestaltet Ihr alle das Programm zusammen, nach Euren Wünschen!
Wann: Am 30. Juni und 1. Juli 2023
Wo: codecentric, August-Everding-Str. 20, 81671 München
Alle Infos unter jscraftcamp.org.
Schaunotizen
[00:01:32] Signals
Nachdem Peter mit seinem React-Projekt dem Signals-Hype bereits auf den Leim gegangen ist und Stefan und Bernhard auf der ng-be diversen Signals-Talks ausgesetzt wurden, probieren wir das Thema genauer auseinanderzunehmen. Wir vergleichen Reaktivitäts-Ansätze von React, Vue, Solid.js, Knockout.js und mobX mit Signals und rollen die Geschichte von Signals auf. Ein Vergleich der Signals-Implementierung in Angular mit der von Preact bringt hervor, dass Signals nicht direkt Magie sind, aber schon ein bisschen implizite Hexerei veranstalten. Am Ende kommen wir noch kurz auf AI (und wie Programming as Theory Building in eine Welt mit Copilot passt), Web Components und TypeScript zu sprechen.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 4 min
June 04, 2023 Revision 571: TypeScript 5.1
Neue TypeScript-Version, Stefan und Peter, Abschweifen. Ihr kennt das Spiel.
JSCraftCamp

Das JSCraftCamp ist eine zweitägige Unkonferenz, bei der es um Software-Crafting von JavaScript-getriebener Software geht. Hier könnt Ihr nicht nur Euer Sprachverständnis gemeinsam mit anderen aufbauen oder schärfen, es können auch Programmierpattern, Frameworks oder Transpiler Themen für Sessions sein. Da es sich um eine Unkonferenz handelt, gestaltet Ihr alle das Programm zusammen, nach Euren Wünschen!
Wann: Am 30. Juni und 1. Juli 2023
Wo: codecentric, August-Everding-Str. 20, 81671 München
Alle Infos unter jscraftcamp.org.
Schaunotizen
[00:01:27] TypeScript 5.1
Bevor wir uns in die neuen Features von TS5.1 stürzen, blicken wir zurück auf die in Revision 560 besprochene Version 5.0 und überlegen, warum sich bisher (die nun ja auch in ECMAScript standardisierten) Decorators nicht weiter durchgesetzt haben – Schwenks zu Yehuda Katz und Ember bzw. Glimmer inklusive. An der Feature-Front beginnt der Abbau der Unterschiede zwischen void (nicht zu verwechseln mit void, siehe Stefans Artikel zum Thema) und undefined, was wir begrüßen. Ebenfalls aufgeweicht werden die Anforderungen an die Typen von Getter and Setter-Signaturen, v.a. um Legacy-Use-Cases rund um Stylesheets (jenseits von Constructable Stylesheets) zu bedienen. Anlässlich diverser Anpassungen der JSX-Typen (u.a. für mögliche zukünftige Promise-Komponenten in React) waschen wir ein wenig React-Schmutzwäsche und feiern und besprechen die Genese des Dynatrace App Toolkit. Da uns zu den weiteren Kleinigkeiten nicht ganz so viel einfällt, verlegen wir uns zum Ende hin auf Werbung! Peter empfiehlt eine VS-Code-Extension für schönere TypeScript-Fehlermeldungen und hat einen Text zu unknown-Overloads geschrieben, wohingegen Stefan gleich ein ganzes zweites Buch zu TypeScript zur Papier gebracht hat.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 5 min
May 23, 2023 Revision 570: KI: Integration leicht gemacht
In dieser Revision sprechen Hans und Vanessa (Working Draft Host | Frontend Lead bei zavvy.io) über dein Einbau von KI in die Website. Es werden verschiedene Aspekte der Integration von künstlicher Intelligenz (KI) diskutiert, insbesondere im Hinblick auf die Herausforderungen und Lösungen, die bei diesem Prozess auftreten können.
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:20] KI: Integration leicht gemacht
Vanessa hat im Vorfeld eine umfassende Evaluierung verschiedener Editoren durchgeführt und sich schließlich für Tiptap entschieden. Alternativen waren Editor.js, CKEditor, Tiny MCE, und noch viele mehr. Die Hauptkriterien für ihre Entscheidung waren die Flexibilität und die Möglichkeit zur Erweiterung um eigene Blöcke und Knoten. Der Editor Tiptap ermöglicht es, dass eine KI-Komponente integriert wird, die mittels einer eigenen Backend-Kommunikation und der OpenAI Completion API betrieben wird.
Während des Integrationsprozesses stellte sich das sogenannte Prompt Engineering als eine neue Herausforderung dar. Vanessa konzentrierte sich hierbei hauptsächlich auf das Frontend, um die richtigen Endpunkte im Backend aufzurufen und die nachfolgenden Aktionen wie das Auswechseln oder Hinzufügen von Texten zu verbinden. Eine wichtige Überlegung war dabei, dass bei manchen Anfragen Texte komplett ausgetauscht werden mussten, während sie bei anderen Anfragen an den bestehenden Text angehängt werden mussten.
Ein großer Bestandteil des Integrationsprozesses war auch das Feedback-Management, welches einen wichtigen Beitrag zur kontinuierlichen Verbesserung des Modells geleistet hat. Durch das Feedback konnte das Modell regelmäßig trainiert und optimiert werden, was zu einer verbesserten Genauigkeit und Effektivität der KI-Komponente führte.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 12 min
May 17, 2023 Revision 569: Von Link-Checkern und Rabbit Holes
In dieser Revision des Working Draft Podcasts dürfen wir Matthias Endler (Web / GitHub / Twitter / Mastodon) als Gast begrüßen, der sich als selbständiger Softwareentwickler und Consultant, hauptsächlich in der Programmiersprache Rust verdingt. Ursprünglich aus Bayern, hat Matthias Informatik in Bayreuth studiert und arbeitete ab 2014 für Trivago in Düsseldorf. Er hat viele Erfahrungen mit Backend-Entwicklung, insbesondere mit Elastic Search, Containern und Cloud-Technologien. Er ist Mitbetreiber der Plattform „Open Podcast„, Autor einer Video-Serie namens „Hello, Rust!“ und Erfinder der GitHub „codeprints„.
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 ein Hosting mit Strom aus 100% erneuerbaren Energien. Also, worauf wartest du? Geh jetzt auf mittwald.de/workingdraft und buch dein erstes Projekt!
Schaunotizen
[00:02:23] Von Link-Checkern und Rabbit Holes
Matthias ist unter anderem Autor des URL-Crawlers/Link-Checkers lychee und wir wollen heute über die vielen Aspekte eines solchen Unterfangens sprechen, die man gemeinhin nicht sieht oder bedenkt. Matthias entwickelte den Crawler als Tool, um eine wachsende Liste von Code-Analyse-Tools für PHP zu verwalten. Die Liste begann als einfache Markdown-Datei und wuchs schließlich auf über 700 Tools und zog auf GitHub 11.000 Sterne an. Matthias fand jedoch heraus, dass die Wartung der Liste mit all ihren Links eine zeitaufwendige und frustrierende Aufgabe war. Aus diesem Grund entschied er sich, einen Link-Checker zu verwenden. Er testete verschiedene vorhandene Link-Checker, fand aber kein Tool, das seinen Anforderungen entsprach. Daher entschied er sich, sein eigenes Tool zu entwickeln. Was zunächst wie eine einfache Aufgabe klang, entpuppte sich als eine Herausforderung mit vielen Hürden und Lernmöglichkeiten. Und was als Wochenendprojekt begann, entwickelte sich zu einem größeren Projekt, als andere Entwickler auf sein Tool aufmerksam wurden und es nutzen wollten.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 11 min