Working Draft

Wöchentlicher Podcast für Webdesigner:innen und -entwickler:innen

Unterstützung

Wir optimieren unser Audio mit Auphonic, wo ihr uns Processing-Time kaufen könnt! Alternativ findet Ihr uns auch auf Patreon:

Become a Patron!

Werben bei Working Draft!

Mit zehnjähriger Geschichte und über 5000 Downloads pro Folge ist Working Draft der etablierteste Podcast für Webentwickler im deutschsprachigen Raum. Wenn ihr neue Entwicklerkollegen sucht oder ein Produkt für Webentwickler anbietet, schreibt uns unter sponsoring@workingdraft.de.

Revision 513: Komplexität von Webtechnologien

25. Januar 2022 | 2 Kommentare

Mit 1,5 Gästen in Person von Nico König (Bootcamps und Training bei coding-bootcamps.eu) und Joschi Kuphal (tollwerk.de) eruieren Vanessa, Peter und Schepp Wohl und Wehe von Komplexität in Webtechnologien.

Schaunotizen

[00:00:58] Komplexität
Nicos Aufhänger für das Thema ist der Umgang mit Komplexität speziell im Bootcamp-Kontext. Davon ausgehen kommen wir zur Rule of least power, grübeln über den Mindshare-Bonus von komplexen Tools und rekapitulieren Entwicklung der Webtechnologien und die Expansion der Use Cases für Webtechnologien. Wir erzählen nicht nur Komplexitäts-Geschichten aus der Praxis (vergleichbar mit denen von htmhell.dev), sondern überlegen auch, wie es jeweils so weit kommen konnte. Gegen Ende geht’s außerdem um Titel und Stufen, Nachhaltigkeit und Mehrdeutigkeitstoleranz.

Revision 512: Agile II – Refinement, Wasserfall, Kanban (Sprint 2/2)

19. Januar 2022 | Keine Kommentare

Es ist so weit, wir sprechen wieder mit Nikolaus Rademacher über agile Methoden. Der zweite Sprint, in Revision 510 angekündigt, nun geht es rund.

[00:00:59] Shownotes

Agile II – Refinement, Wasserfall, Kanban
Nachdem es in der letzten Sendung viel um die Grundlagen und die Aufgaben eines:r Entwickler:in im agilen Kontext ging, widmeten wir uns dies Mal den ganz praktischen Themen.
Die Zusammenarbeit zwischen unterschiedlichen Disziplinen wird oft unterschiedlich gehandhabt: UX/UI arbeitet einen Sprint voraus, QA hinten dran – oder doch lieber parallel. Wir sprechen, ob das sinnig ist und wie man dagegen ankommt.
Doch bevor es überhaupt in die Umsetzung geht, sollte man sich mit dem Prozess davor beschäftigen: von der Idee bis zur Umsetzung – und dann vor allem refinen, refinen, refinen.
Anschließend geht es darum, wie man in einem eher klassischeren Unternehmen mit agilen Methoden „embedded“ werden kann, um dann noch auf das Thema Feedback-Kultur zu sprechen zu kommen.
Wir schließen ab mit einer Diskussion rund um die Methode Kanban, sprechen dazu, wann es sinnig sein kann, diese zu verwenden und welche Kriterien erfüllt sein sollten.

Revision 511: Microfrontends bei REWE digital

12. Januar 2022 | 2 Kommentare

Mit Nils Roehrig und Kevin Schoenfeld von REWE digital quatschen Vanessa, Peter und REWE-Digital-Veteran Hans über Microfrontends in der allgemeinen Theorie sowie unter dem Gesichtspunkt der konkreten Umsetzung im Arbeitsalltag von Nils und Kevin.

Schaunotizen

[00:00:59] Microfrontends
Über das Thema Microfrontends (zuletzt behandelt in den Revisionen 384 und 407) berichten Nils und Kevin aus der Perspektive von für REWE digital tätigen Frontend-Nerds. Nach kurzem rekapitulieren der Grundbegrifflichkeiten (Microfrontends = anwendung der Microservice-Idee für Web-Frontends) geht es direkt an’s Eingemachte: wir bequatschen Tradoffs von Dependency-Handling und Komponenten-Entkopplung, Herausforderungen in der Kommunikation (sowohl innerhalb größerer Organisationen als auch auf technischer Ebene) und den Umgang mit Designsystemen. Anhang von Beispielen für große und kleine Microfrontends bei Rewe digital beleuchten wir Fragen rund um Modularisierung, Komposition und Aufteilung von Microfrontends, diskutieren wie Microfrontends mit Server-Side-Rendering verheiratet werden können, streifen den Problemkomplex „Serverseitige Web Components“ und kommen dann auf Performance-Optimierung und Caching zu sprechen. Zum Ende geht’s um Project Mosaic, den Umgang mit zentralisierten Ressourcen (LocalStorage, Routing o.Ä.), Event-Handling, die Migration weg vom Frontend-Monolithen, das Zusammenspiel von Microfront- und Microbackend sowie Aspekte, die nicht sauber in eine Domäne passen. Tradeoffs, wohin man auch schaut!

Weiterführende Links:

Revision 510: Die Rolle & Verantwortung von Entwickler:innen in agilen Teams (Sprint 1/2)

4. Januar 2022 | Keine Kommentare

Über das Thema der Rolle und Verantwortung von Entwicklern und Entwicklerinnen in agilen Teams reden unsere Hosts Hans, Peter und Vanessa heute mit Nikolaus Rademacher, Senior Frontend Entwickler bei sipgate. Da sich das Thema als unendlich erweist, betrachten wir diese Revision als einen ersten Sprint und lassen in ein paar Wochen Teil 2 folgen.

Schaunotizen

[00:00:58] Die Rolle & Verantwortung von Entwickler:innen in agilen Teams
Wir versuchen zu ergründen, wie sich Methoden des agilen Arbeitens in große Unternehmen einführen lassen. Wir diskutieren, ob sich Scrum und die anderen Techniken und Prinzipien des Agile Manifesto am besten von oben oder von unten einführen lassen. Über die Umsetzung von agilen Techniken kommen wir zu Fragen der Wissenvermittlung und dem Unterschied zwischen echtem agilen Arbeiten in Kontrast zum gedankenloses Anwenden von Regeln. Wir singen ein Loblied auf Retro und Refinement, beleuchten (unter dem Eindruck von log4j) den Umgang mit plötzlichen Bugs und Notfällen und deklarieren die Woche zur optimalen Sprit-Dauer. Zum Ende hin kommen wir zum Auf- und Abbau von technischen Schulden, diskutieren die Tradeoffs der Tschernobyl-Betonsarg-Ansatzes für Tech Debt und beschließen den nächsten Revisions-Sprint der agilen Workingdraft.

Revision 509: Letzte Runde Glücksrad für 2021

28. Dezember 2021 | 1 Kommentar

Dieses Mal hat Schepp Patrick Lipinski aka Lippe aka @dickelippe zu einer Runde Glücksrad zu Gast. Wir kennen Patrick schon sehr lange von dem ganzen Konferenz-Getingele, besser bekannt unter dem Begriff „Klassenfahrt“, und bei der letzten gemeinsamen Konferenz kamen wir darauf, dass er doch einmal Gast bei uns sein könnte. Gesagt, getan!

[00:00:59] Glücksrad

CSS‘ appearance-Property
Los geht es mit der appearance-Property. Patrick und Schepp stellen fest, dass sie diese CSS-Eigenschaft eigentlich immer nur mit dem Wert none verwenden. Gibt es auch andere Use-Cases? Schepp kommt außerdem in den Sinn, dass man im neuesten Edge Canary das vom Open UI Projekt konzipierte, und frei umgestaltbare <selectmenu> ausprobieren kann. Wir debattieren zum Abschluss kurz über Reset vs. Normalize und über die neueste Form des Resets.
Das <applet>-Element
Die Anfangszeiten des Webs grüßen und wir erinnern uns an Java-Applet-getriebene Wellen-Effekte auf Websites. Auch Java-getrieben, aber anders schlimm: Die Log4j-Sicherheitslücke, über die Kristian Köhntopp ein herrliches Meinungsstück geschrieben hat.
Das title-Attribut
Wird leider meist als Tooltip oder von SEOs missbraucht. Wo das title-Attribut sinnvoll eingesetzt werden kann, ist z. B. als Sidekick des <abbr>-Elements.
Der CSS-Datentyp <time-percentage>
Mehr als das, was wir in MDN lesen können, wissen wir in der Folge selbst nicht über diesen Datentyp: Er darf wahlweise ein Zeitwert oder ein Prozentwert (einer Zeit) sein. Anders als Schepp vermutet, hat das Ganze aber nichts mit den neuen Scroll-Linked-Animations zu tun.
Die Gyroscope API
Eine der ersten APIs, die mit HTML5 aus der Taufe gehoben wurden. Schepp erinnert sich, dass Macbooks auch ein eingebautes Gyroskop/Accelerometer haben, auf welches man aus Browsern heraus zugreifen kann.
Die CSS :host-context()-Pseudoklasse
Über diese Pseudoklasse kann eine Webcomponent trotz Shadow-DOM-Barriere herausfinden, in was für einem Light-DOM-Baum ihr Shadow-Dom-Host steckt. Gut, wenn die Komponente sich an verschiedene Kontexte anpassen können soll.
CSS Global Keywords
Globale Keywords in CSS wären Dinge wie auto, none, inherit, revert oder initial, die man in so gut wie jede Eigenschaft stecken kann.
HTMLs inputmode-Attribut
Über das inputmode-Attribut können Web-Entwickelnde auf einem <input>-Element steuern, welche Art von Softkeyboard zur Eingabe angezeigt wird. Praktisch, wenn es etwa in einer Anmeldung ein Feld gibt, in dem man entweder seine E-Mail-Adresse oder seinen Benutzernamen eingeben kann.
Web Animations API Keyframe Effects iterationComposite-Eigenschaft
Diese Eigenschaft, von der wir zuvor noch nicht gehört haben, scheint zu steuern, ob erneute Animationsdurchgänge einen vorherigen Wert ersetzen oder sich aufaddieren. Tja, wieder was gelernt und vielleicht brauchen wir es eines Tages mal? Sowohl Patrick als auch Schepp haben die Web Animations API bislang noch nicht eingesetzt, allerdings kommt Schepp eine bestimmte Folge der „HTTP 203“-Serie in den Sinn, in welcher Jake ein ganz bestimmtes Problem nur mit Hilfe des Web Animations API lösen konnte. Sehenswert!
Der CSS-Datentyp ratio
Wurde der ratio-Datentyp früher ausschließlich in Media Queries genutzt, kommt er neuerdings auch in der CSS-Eigenschaft namens aspect-ratio zum Einsatz.
Die Presentation API
Wir wissen nur eines: Es gibt sie wohl. Wer weiß, wofür sie gut ist: Bitte melden! 😅
CSS‘ @property-Rule
Wir finden diese ist das Beste des ganzen CSS-Houdini-Projekts und verweisen auf Schepps Darlegungen in der 33-ten Folge des „Wo wir sind ist vorne“-Podcasts (ab 00:12:31).

Links

CSS‘ -webkit-text-stroke-Property
Patrick erzählte in der Vorbesprechung von der Möglichkeit, farbige Text-Umrandungen nicht nur in SVG, sondern auch in HTML per CSS zu setzen. 😊
CSS‘ paint-order-Property
Die zweite CSS-Eigenschaft, von der Patrick erzählte, war paint-order, das in Kombination mit -webkit-text-stroke nützlich wäre, um eine Umrandung wirklich nur außen herum gehen zu lassen, indem man den Hintergrund/Fill drüber legt. Leider wird diese noch nicht außerhalb von SVG unterstützt. 🙁
Patrick sucht aktuell eine Position als UX-Engineer!
Ihr fragt, was macht denn ein UX-Engineer eigentlich? Kein Problem, auch hier können wir wieder auf die Kollegen vom „Wo wir sind ist vorne“-Podcast verweisen, die zu dem Thema eine Folge mit Dirk Ginader aufgenommen haben. Wer also jemanden weiß, der jemanden weiß… Immer her mit den Jobangeboten!

Revision 508: Lernen, Weiterbildung und Wissenserweiterung

21. Dezember 2021 | 3 Kommentare

Einmal alles andersherum! Diesmal führt unser Gast Ole Michaelis, Software-Entwickler, Konferenzsprecher, Organisator und Jonglierer, ein Interview mit unseren Hosts Hans und Vanessa zum Thema „wie schafft man sich eigentlich neues Wissen drauf“?

Schaunotizen

[00:00:59] Lernen, Weiterbildung und Wissenserweiterung
Ole erzählt uns zu Beginn, dass er mittlerweile lange genug im Bereich der (Web-)Entwicklungen arbeitet, um bei neuen Frameworks und Bibliotheken das Gefühl zu bekommen: das gab’s doch fast genauso vorher schonmal! Im Anschluss wird diskutiert, wie man eigentlich Trends und Hypes erkennt, und von Konzepten unterscheidet, die sich im Endeffekt durchsetzen werden oder durchgesetzt haben.

Auf dieser Grundlage, erörtern sie, we man sich dafür entscheidet, was man sich tatsächlich genauer ansieht und lernt. Für Ole war es zum Beispiel Haskell, worauf sich Vanessa hin an ihre schöne Standard ML (SML) Zeit in der Universität erinnert. Weiterhin werden verschiedene Medien zum Lernen besprochen, wie zum Beispiel Videos auf YouTube, Newsletter (Links siehe unten), Kursplattformen, etc.

Die nächste Frage, wenn man schon einmal angefangen hat zu lernen, ist die, wann man wieder aufhört. Ab welchem Zeitpunkt entscheidet man sich dafür, dass man genug über dieses Thema weiß?

Abschließend, ein sehr wichtiger Aspekt, geben Ole, Hans und Vanessa ihre Meinung zum Thema „Lernen während der Arbeitszeit“ bzw. „Lernen finanziert durch die Firma“ ab. Alle sind sehr interessiert an der Meinung der Hörerrinnen und Hörer!

Links

Revision 507: Der Web Almanac 2021

14. Dezember 2021 | 1 Kommentar

Diese Revision nehmen Vanessa und Schepp die Veröffentlichung des diesjährigen Web Almanac zum Anlass, sich ein paar der darin beleuchteten Bereiche heraus zu picken und über die Daten und Erkenntnisse zu reden.

Schaunotizen

[00:01:00] Der Web Almanac 2021
Aufgrund des großen Umfangs und der Detailtiefe entscheiden wir uns, uns auf ein paar wenige Themen aus dem Almanac zu beschränken. Unsere Wahl fällt auf JavaScript, Structured Data, Accessibility, Page Weight und CMS. Wir kommen relativ zu Anfang auf das Thema Security zu sprechen und nennen das Audit-Werkzeug Snyk, verweisen auf eine vergangene Revision zum Thema Mutated XSS erinnern uns an Blogposts, die beschreiben, wie man npm-Pakete theoretisch zum Abgreifen von Daten missbrauchen könnte oder wie es praktisch tatsächlich passiert. Schepp lernt nebenbei, dass es einen SourceMap-HTTP-Header gibt. Hinsichtlich Accessibility verweisen wir auf eine gar nicht so alte Episode von uns, erwähnen Manuel Matuzovićs Experiment, diversen automatisierten Accessibility-Audits trotz völlig unzugänglicher Webseite perfekte Accessibility-Scores abzutrotzen und dass wir beim Accessibility-Club in einem Vortrag von Karl Groves gelernt haben, was sogenannte Accessibility-Overlays doch für ein Schlangenöl sind. Im Abschnitt CMS sind wir positiv davon überrascht, wie gut TYPO3 im Bereich Performance abschneidet und wir erwähnen auch kurz das Headless CMS Storyblok, dessen Macher vor nicht all zu langer Zeit bei uns waren.

Revision 506: Herausforderungen beim Bau eines Podcast-Katalogs

7. Dezember 2021 | 5 Kommentare

Anlässlich Hans‘ Mitwirken an der mittlerweile leider eingestellten Hörbuch- und Podcast-Plattform FYEO, reden wir heute über die Herausforderungen, die der Bau eines 1,6 Millionen Podcasts umfassenden Katalogs mit sich bringt.

Schaunotizen

[00:01:02] Herausforderungen beim Bau eines Podcast-Katalogs
Zu Beginn klären wir, wie Podcasts eigentlich gehostet, veröffentlicht und verteilt werden. Viele Podcasts nutzen zum Hosten ihrer Audio-Dateien spezialisierte Anbieter wie anchor.fm oder Podigee. Andere, wie wir, hosten ihre Audios selbst (und erzeugen damit 2 Terabytes an Traffic im Monat, Chapeau an dieser Stelle an ALL-INKL.COM).

In beiden Fällen benötigt man dann einen speziellen Podcast-Atom/RSS-Feed, der entweder von den Hosting-Plattformen ausgespuckt wird, oder von der eigenen Webseite, z.B. in Form eines WordPress mit Podcasting-Plugin.

Aufgrund dieses dezentralen Hosting-Ansatzes, werden Podcasts von den Podcast-Katalogen dieser Welt erst einmal gar nicht gefunden. Stattdessen musss man selbst tätig werden, und sie bei allen gewünschten Plattformen eintragen, sei es bei Apple, Google oder Spotify. Am Apple-iTunes-Verzeichnis wiederum bedienen sich viele weitere, kleinere Podcasting-Plattformen, um Podcasts zu finden und zu ihrem eigenen Fundus hinzuzufügen. So lief das auch bei Hans‘ ehemaligen Projekt.

Fortan ging anschließend darum, mit klugen Herangehensweisen zu erreichen, dass von den Podcastmacher*innen veröffentlichte Episoden schnell auf der Podcast-Plattform angezeigt werden. Das ist insofern nicht so einfach, als dass die Podcast-Feeds einem Pull- statt einem Push-Prinzip folgen, man Feeds aber auch nicht unendlich häufig anfragen kann.

Für Podcaster ist es jedenfalls wünschenswert, auf so vielen Plattformen wie möglich vertreten zu sein, damit der Umfang der Hörerschaft wächst, und andererseits auch, um von Statistiken zu Abspielverhalten und Demografie zu profitieren, die diese Anbieter im Gegenzug bereitstellen.

Keine Schaunotizen

Unsere Audioproducerin Sabine Piel
Seit Sabine uns unterstützt, schaffen wir es endlich, Episoden regelmäßig zu veröffentlichen 🙏❤
Wo wir sind ist vorne № 33: Web Performance
Schepp war zu Gast im sehr empfehlenswerten Frontend-Podcast von Moritz Gießmann und Constantin Groß namens „Wo wir sind ist vorne“. Dort haben die drei einen 3,5-Stunden-Brecher zum Thema „Web Performance“ aufgenommen, bei dem keine Frage mehr offen bleiben dürfte.

Revision 505: ES-Module und ein bisschen TypeScript 4.5

30. November 2021 | 3 Kommentare

Erneut trafen sich Stefan und Peter unter dem Vorwand einer neuen TypeScript-Version um ihrem Zorn über alle möglichen Gesamtsituationen Luft zu machen.

Schaunotizen

[00:01:55] State of the ECMAScript Module
TypeScript wollte besseren ESM-Support ausrollen und hat’s dann doch nicht getan. Warum? Weil aktuell JS-Module ein einziges Chaos sind! Wir gedenken den Ahnen (RequireJS- und CommonJS-Modulen sowie Browserify) und verfluchen sie für das, zu dem sie den ESM-Standard verleitet haben. Zwischen unserem Geschimpfe sprechen wir auch über modul-relevante Tools der nächsten (Rome, Vite, esbuild, swc, deno) und letzten Generation (Jest, Closure Compiler, Less, Sass), sowie ein wenig über React, die ScriptConf, Rust (und andere Sprachen) als die Zukunft von JS-Infrastruktur und LLVM.
[00:00:00] TypeScript 4.5
So sehr uns das Modul-Chaos ärgert, so gut finden wir dann doch Tail-Recursion Elimination für rekursive Typen (übrigens ein ES6-Feature, das bis heute fast in keiner JS-Engine funktioniert), lib-Upgrades und Use Cases wie den ResizeObserver, Neuerungen für Template String Types, Top-Level-Await, Private Field Presence Checks, Import Asertions, JSDOC, TSDOC und SOAP.

Revision 504: Analytics- & Tracking-Tools

23. November 2021 | 1 Kommentar

Aller guten Dinge sind drei, und so kam es dass wir Jon Uhlmann (@jonnitto) zum dritten Mal als Gast einladen konnten, um mit ihm über den Themenkomplex „Analytics & Tracking Tools“ zu sprechen. Unsere vorherigen Ausgaben mit ihm findet Ihr unter Revision 490: Alpine JS & Petit Vue mit Jon Uhlmann und Revision 496: Tooling rund ums Frontend Tooling.

Schaunotizen

[00:01:50] Analytics- & Tracking-Tools
Wir beginnen mit einer Aufzählung der verschiedenen Arten an Analytics- & Tracking-Tools: Angefangen hat alles Ende der Neunziger mit Perl-befeuerten Besucherzählern und dem Auswerten von Server Logs – z.B. mit AWStats, das auch wir hier vom Podcast noch heute benutzen, um unsere Downloadzahlen zu tracken. Mitte der Zweitausender kaufte Google die Firma Urchin inklusive Ihres gleichnamigen Analytics-Tools, welches im Anschluss in „Google Analytics“ umbenannt und zur kostenlosen Nutzung freigegeben wurde. Entsprechend explodierte danach der Einsatz dieses Tools. Noch etwas später wurden Werkzeuge populär, die Besuchersessions tracken Besucherverhalten in Heatmaps abbilden, wie z.B. Hotjar. Die neueste Errungenschaft sind sogenannte „Retargeting“-Pixel, mit denen Werbetreibende, aber auch Facebook erkennen, dass man sich für bestimmte Themen interessiert und die einem fortan mit immer wieder dieselbe Werbung schwer auf den Keks gehen können.

Die Vorteile dieser Tools liegen auf der Hand. Gleichzeitig ist Datensparsamkeit ein erstrebenswertes Ziel, weil Daten in falschen Händen auch gegen einen verwendet werden kann. Aus diesem Grund entwickeln sich immer mehr Betriebssysteme und Browser in Richtung Privacy, so dass man entweder ganz vor Tracking geschützt wird oder nur noch dann getrackt wird, wenn man selbst zustimmt (was in diesem Fall wohl nur noch 10% der Nutzer*innen tun):

Gleichzeitig entwickelt sich ein Markt für alternative, DSGVO-konformere Tools, wahlweise zum Selberhosten oder in der Cloud:

Insgesamt 60 Tools listet dieses Blogpost auf.

Wie erwähnen außerdem die Möglichkeiten, ganz ohne eigenes Tracking interessante Erkenntnisse aus der Google Search Console oder dem Chrome User Experience Report (CrUX) zu gewinnen.