Working Draft Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer

In dieser Revision hat Schepp Henning Koch (Web / Twitter / LinkedIn) aus
Augsburg zu Gast, der Mitgründer von Makandra ist, einem Team aus Ruby- und
JavaScript-Entwicklern, UI-Designern und „Obstleuten“, die maßgeschneiderte
Lösungen für ihre Kunden entwickeln. Thema des Gesprächs ist „HTML over the
Wire“. Henning ist zudem der Maintainer von Unpoly, einem Open-Source-Tool, das
genau diesen Ansatz verfolgt.


SCHAUNOTIZEN

[00:01:52] HTML OVER THE WIRE

Wir starten mit der Feststellung, dass „HTML over the Wire“ erst in letzter Zeit
stark an Popularität und Momentum gewonnen hat, obwohl das Konzept bereits seit
langer Zeit existiert. So gab es schon früher Ansätze, wie z.B. „Laravel
Livewire“, über das wir auch schon in Revision 499 mit Christoph Rumpel
sprachen.



Sodann geht es zu den Vorteilen von „HTML over the Wire“, wie z.B. die
Möglichkeit, kleine Fragmente einer Seite auszutauschen, ohne die gesamte Seite
neu laden zu müssen, sowie die Möglichkeit, Animationen und non-disruptive
Navigationen zu haben, ohne den ganzen heutzutage üblichen clientseitigen
Aufwand. Teil des Konzepts ist die Tatsache, dass viel Logik und
Datenverarbeitung wieder vom Frontend zum Server zurück wandert, und
Frontend-Entwickler*innen sich wieder auf das klassische Frontend und
User-Interface konzentrieren können. Es sind keine JSON-API-Endpoints und auch
keine clientseitigen Renderer mehr erforderlich, um Daten hin und her zu
schicken und in HTML umzuwandeln, was die Last auf den Clients deutlich
reduziert. Frontend-Entwickler*innen können zwar weiterhin eigenes Scripting
verwenden, wo es sinnvoll ist, aber das Heavy-Lifting wird vom Server
übernommen.

Schließlich sprechen wir über die Entstehung von Unpoly und wie es im Rahmen von
Hennings Tätigkeit bei Makranda entstanden ist. Bei Makranda machen sie vor
allem Greenfield-Projekte und hatten in der Vergangenheit schlechte Erfahrungen
mit jQuery-Spaghetti-Haufen und AngularJS gemacht. Das Team wollte eine Lösung,
die weniger Code erfordert und die Logik nicht so stark verteilt. Dies führte
schließlich zur Entwicklung von Unpoly. Das Framework setzt von seiner
Philosophie her stark auf Progressive Enhancement und unterstützt
Entwickler*innen dabei, barrierearme Produkte damit umzusetzen. Spannend ist
auch das Konzept der „Layers“, mit denen Dinge wie Offcanvas-Menüs, Overlays und
Popovers orchestriert werden.


KEINE SCHAUNOTIZEN

DER UNPOLY ELEVATOR PITCH

Ein Präsentationsdeck, das die Motivation hinter Unpoly und seine Vorzüge und
Features abhandelt.


ANMELDUNG ZUR REVISION 600 IM ONLINE FORMAT

HIER GEHT’S ZUR ANMELDUNG AUF MEETUP

Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem
einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der
einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren
Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und
dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung
einzutauchen. Wir freuen uns auf euch!

In dieser Revision haben wir Martin Dilger zu Gast, der als selbstständiger
Entwickler, Berater und Trainer tätig ist. Mit ihm sprechen wir darüber, wie
Entwickler*innen ihre Arbeit effizienter strukturieren und sich kontinuierlich
verbessern können.


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

VOM CHAOS ZUM CODE – WIE DEVELOPER IHRE ARBEIT EFFIZIENT STRUKTURIEREN

Wir kennen alle das Gefühl, wenn die Woche vor uns liegt und wir keinen Plan
haben, wie wir alles unter einen Hut bekommen sollen. Martin hat da einen Trick:
Er teilt seine Woche in Arbeitszeit, Familienzeit und – ganz wichtig – „me“-Zeit
auf.



Und um den Überblick zu behalten, hat er eine Wissensdatenbank in Notion
erstellt, in der er sein ganzes Know-how der letzten zehn Jahre gespeichert hat.
Über 100.000 Einträge! So hat er beim nächsten Mal oft gleich eine Anleitung,
wie es besser geht. Zudem sind da nicht nur seine Aufgaben und Projekte drin,
sondern auch interessante Dinge, die er im Netz findet. Eine wahre Goldgrube!

Ein Prozent besser – jede Woche: Die „Ein-Prozent-Methode“ bedeutet, dass wir
versuchen, uns jede Woche um ein kleines bisschen zu verbessern. Es ist zwar
Arbeit, sich ständig zu fragen: „Was kann ich besser machen?“. Aber es lohnt
sich!

Deep Work: Wir alle kennen das – wir versuchen uns auf eine Aufgabe zu
konzentrieren und dann… PLING! Eine neue E-Mail. PLING! Ein neues
Slack-Nachricht. PLING! Mama ruft an. Martins Lösung? Konzentrieren wir uns auf
„Deep Work“. Wir schalten alles aus und tauchen wir tief in unsere Arbeit ein.
Und wenn jemand fragt, warum wir nicht sofort antworten? Wir sind einfach zu
beschäftigt damit, genial zu sein! :D

Empathie ist für Martin ein super wichtiger Bestandteil erfolgreicher
Entwicklerarbeit. Ein guter Softwareentwickler sollte sich in die Lage anderer
versetzen können. Und Transparenz? Genau so wichtig! Damit alle im Team und die
Kunden immer genau wissen, was los ist. Und natürlich darf auch die
Kommunikation nicht zu kurz kommen. Transparente Kommunikation zwischen
Teammitgliedern und Entwicklern ist das A und O.


ANMELDUNG ZUR REVISION 600 IM ONLINE FORMAT

HIER GEHT’S ZUR ANMELDUNG AUF MEETUP

Feiert am 07.01. von 15 bis 18 Uhr mit uns die 600. Podcast-Episode bei einem
einzigartigen Online-Event! Wir veranstalten eine Fishbowl-Diskussion, bei der
einige Teilnehmer im ‘inneren Kreis’ diskutieren, während andere im ‘äußeren
Kreis’ zuhören und dann einsteigen können. Es ist eine interaktive und
dynamische Form des Austauschs, perfekt, um tief in das Thema Webentwicklung
einzutauchen. Wir freuen uns auf euch!

In dieser Revision tauchen wir mit Hans und Vanessa in die spannende Welt des
Recruitings ein. Sie teilen ihre Expertise und Erfahrungen über den Prozess des
Einstellens von Webentwickler:innen und geben wertvolle Einblicke in die
Herausforderungen und Lösungsansätze in diesem Bereich.


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:54] WEBENTWICKLER:INNEN ERFOLGREICH EINSTELLEN – EINBLICKE MIT HANS &
VANESSA

Hans und Vanessa sprechen über die komplexen und dynamischen Aspekte des
Einstellungsprozesses für Webentwickler:innen. Sie beginnen mit einer Diskussion
über die wichtigen Qualifikationen und Fähigkeiten, die in der heutigen
schnelllebigen Technologiewelt von Webentwickler:innen erwartet werden, und
gehen dabei insbesondere auf gefragte Programmiersprachen, Frameworks und Tools
ein.

Das Gespräch führt weiter zu den Feinheiten des Bewerbungsprozesses und den
Interviewfragen, die darauf abzielen, sowohl die technischen Fähigkeiten als
auch die kulturelle Eignung eines Kandidaten zu bewerten. Sie betonen dabei die
Wichtigkeit von Soft Skills und deren Bewertung im Einstellungsprozess, und
heben die Rolle von UX/UI-Kenntnissen und anderen Frontend-Aufgaben hevor.



Die Diskussion nimmt eine interessante Wendung, als die Vor- und Nachteile der
Einstellung von Remote-Entwicklern sowie die Herausforderungen und Chancen der
globalen Talentmärkte beleuchtet werden. Das Thema Onboarding und Weiterbildung
wird ebenfalls angeschnitten, wobei Strategien erörtert werden, wie Unternehmen
neue Webentwickler erfolgreich in ihre Teams integrieren und deren
kontinuierliche Entwicklung fördern können.

Ein weiterer kritischer Punkt ist das Erkennen des Bedarfs an neuen Stellen und
worauf man bei der Analyse von Lebensläufen achten sollte. Hans und Vanessa
teilen ihre Ansichten über den Stellenwert von Cultural Fit im Vergleich zu
Technical Fit und diskutieren die unterschiedlichen Ansätze zur technischen
Bewertung von Kandidaten, darunter technische Tests, Coding Challenges und Live
Coding.

Abschließend beleuchten sie die Wichtigkeit von Diversität und Inklusion in
Tech-Teams und besprechen, wie Unternehmen durch gezielte Maßnahmen Inklusion
fördern können. Sie schließen mit einer Betrachtung von Probezeiten und der
Frage, ob und wie Bezahlung in diesem Kontext gehandhabt werden sollte.

Dieses Jahr wird ein besonderes Jubiläum gefeiert: 10 Jahre Kirby CMS!
Gratulation hierzu von unserer Seite 🎉 🎂

Mit unserem Gast und einem der Köpfe hinter Kirby, Bastian Allgeier, werfen wir
einen Blick zurück und natürlich auch nach vorne.


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!


[00:02:25] KEINE SCHAUNOTIZEN

10 JAHRE KIRBY CMS

Bastian teilt persönliche Einblicke und wertvolle Lektionen aus einem Jahrzehnt
der Entwicklung und Gestaltung des Content Management Systems. Wir reden über
die Meilen- und Stolpersteine, die Bastian und sein Team auf ihrem Weg erlebt
haben.



Als er über den großen Sprung von Version 2 zu Version 3 spricht, reflektiert
Bastian offen über das, was er als den größten Fehler in der Geschichte von
Kirby bezeichnet – einen kompletten Rewrite. Dieser ehrgeizige Schritt brachte
zwar immense Herausforderungen mit sich, doch gleichzeitig war es eine
Erfahrung, die das Team zusammenbrachte und die zukünftige Entwicklung
maßgeblich prägte. Mit den daraus gewonnenen Erkenntnissen und dem Feedback der
engagierten Kirby-Gemeinschaft verlagerte sich der Fokus weg von revolutionären
Updates hin zu einem vorsichtigeren, evolutionären Entwicklungsprozess.

Dem Team spielte in die Karten, dass es nach Version 3 keinen dringenden Bedarf
für einen schnellen Release einer weiteren Version gab, weder vonseiten der
Entwickler- noch der Nutzerschaft. Diese Freiheit, ohne Druck arbeiten zu
können, ermöglichte es dem Team, in aller Ruhe an Features zu arbeiten, die sie
und ihre Kunden gleichermaßen begeisterten.

Statt auf Größe und Spektakel zu setzen, strebt das Team nach kontinuierlicher
Verbesserung und der Verfeinerung von Kirby, sodass jede Version auf der
vorherigen aufbaut und den Nutzern einen echten Mehrwert bietet.

Mit Vorfreude blickt Bastian auf das anstehende zehnjährige Jubiläum von Kirby.
Dieser Meilenstein ist nicht nur eine Feier der Vergangenheit, sondern auch eine
Gelegenheit, auf eine Zukunft zu blicken, in der Kirby weiterhin die Balance
zwischen Benutzerfreundlichkeit und technischer Exzellenz hält.

In der heutigen Folge beschäftigen wir uns mit Tiptap, einem Editor-Framework,
das als Open-Source-Software unter der MIT-Lizenz verfügbar ist. Zu Gast haben
wir dafür Philip Isik (Web / X (ehemals Twitter)), Miterfinder und
Co-Geschäftsführer von Tiptap.


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:24] TIPTAP

Tiptap hat sich aus einem Agenturgeschäft entwickelt, bei dem die Macher nach
drei Jahren feststellten, dass sie mehr als nur Agenturarbeit waren und den
Wunsch hatten, eigene Produkte zu entwickeln. Aus einem Agenturgeschäft wurde
ein Produktgeschäft. Dieser Übergang ist nicht immer einfach, und es gibt viele
Dinge zu beachten, wenn man diesen Schritt wagt.



Ein weiteres spannendes Thema in dieser Folge ist das Bezahlmodell von Tiptap.
Wir diskutieren, wie man ein Produkt entwickelt, das sowohl kostenfrei als auch
kostenpflichtig ist, und wie man die richtige Balance zwischen kostenlosen und
kostenpflichtigen Features findet. Es wird erörtert, wie man mit
Nice-to-have-Features umgeht und wie man diese in ein Bezahlmodell integrieren
kann.

Als Besonderes Extra für unsere Hörer:innen versprechen wir eine Folge-Episode
mit tiefgehenden technischen Details. Schreibt‘ uns all deine Fragen an
comments@workingdraft.de oder im Working Draft Community Slack. Wir freuen uns
auf deine Fragen!

Die alljährliche CSS-Umfrage „State of CSS“ hat ihre 2023er-Ergebnisse
veröffentlicht, und wie es sich für einen anständigen Frontend-Podcast gehört,
tun auch wir unsere Gedanken dazu kund. Schepp und Peter führen in diesem
zweiten Teil zu Ende, was sie zwei Wochen zuvor mit Vanessa begonnen haben.


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:03:36] DIE COLOR()-FUNCTION

Die color()-Function soll in Zukunft all die einzelnen Farbräumen und
Farbraummodellen gewidmeten CSS-Funktionen wie rgb() oder hsl() ersetzen. Denn
es drängen immer mehr Farbräume, und in deren Windschatten auch immer mehr
Farbraummodelle für den Zugriff darauf in unsere Browser: Display p3, LAB, LCH,
okLAB und okLCH.

[00:09:44] INTERPOLATION COLORSPACES

Auch für das Aussehen von Farbverläufen spielt die Wahl des Farbmodells eine
große Rolle. Wir reden darüber, dass okLAB und okLCH verbesserte Versionen der
nicht-„ok“-Versionen sind, bei denen verschiedene Parameter für die menschliche
Wahrnehmung von Farben angepasst sind, wodurch verschiedene Farben mit gleicher
im Programmcode eingestellter Sättigung und Helligkeit auch in der Praxis eine
vergleichbare Sättigung und Helligkeit aufweisen.

[00:14:22] RELATIVE COLORS

Die CSS Color Spec führt in Level 5 mit Hilfe der Relative Color Syntax die
Möglichkeit ein, Farben im Grunde genommen zu destrukturieren und neu
zusammenzusetzen. Sehr praktisch für Design-Systeme!

[00:15:58] IST CSS EINE PROGRAMMIERSPRACHE?

Weil wir sind, wie wir sind, schweifen wir an dieser Stelle ab und befassen uns
mit der Frage, ob CSS denn nun eine Programmiersprache ist, oder nicht. Dafür
spricht, dass es in CSS zunehmend Features gibt, die man eher von einer
Programmiersprache erwarten würde, wie ineinander schachtelbare Funktionen,
Trigonometrische Funktionen, gehackte oder echte toggle()-Funktionen. Sicher
sind wir uns darin, dass CSS nicht trivial zu beherrschen ist und dass auch ein
ganz eigenes Gedankenmodell erfordert.

[00:33:40] ACCENT-COLOR

accent-color ist ein sehr billiges und nicht störendes Werkzeug, um analog zu
typografischen Anpassungen Interfaces gleich ein bisschen netter zu machen. Es
scheinen nur nicht ganz so viele Umfrageteilnehmer zu kennen.

[00:35:44] INTERACTIONS

In der Umfrage haben Themen wie Scrollen, Swipen und Pinchen ein eigenes Kapitel
namens „Interactions“ spendiert bekommen. Wir sind große Fans von CSS Scroll
Snapping und wissen zu berichten, dass eine weitere Ausbaustufe mit so Dingen,
wie der :snapped-Pseudoklasse oder neuen Snap-Events ansteht. Adam Argyle, der
daran federführend arbeitet, hat auf dem CSS Day 2022 einen tollen Vortrag mit
sehr beeindruckenden Demos über den Themenkomplex gehalten.



Wir erwähnen außerdem lobend die Eigenschaft overscroll-behavior, die
sogenanntes „Scroll-Chaining“ verhindert, also dass wenn man z.B. ein Overlay
bis zum Schluss gescrollt hat und man dann weiterscrollt, das Dokument dahinter
auf einmal anfängt zu s