Mit zwölfjähriger Geschichte und über 5.000 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.
17. Mai 2022 | Kommentare deaktiviert für Revision 530: Von Katas, Craft Camps und Code Retreats
Schepp begrüßte diesmal jemanden, dessen Aktivitäten er schon seit Jahren auf Twitter verfolgt: Wolfram Kriesing aus München (Blog / Twitter).
Schaunotizen
[00:01:00] Von Katas, Craft Camps und Code Retreats
Wolfram ist nicht nur ein Urgestein der IT, sondern war auch Early Adopter der Sprache JavaScript. Zeitgleich mit dem Aufkommen der ersten JavaScript-Just-in-Time-Compiler gründete Wolfram mit einer Handvoll weiterer Visionäre die auf JavaScript spezialisierte Firma uxebu. Dort hantierte man schon frühzeitig mit Enterprise-JavaScript-Frameworks wie dem Dojo Toolkit und entwickelte einen Konverter für Flashs SWF-Dateien namens Pixel Plant und zahlreiche weitere Open Source Lösungen.
Wolframs Passion für die Sprache führte ihn immer tiefer in den Fuchsbau und schließlich zum Konzept des Test-Driven-Developments (TDD). Wir reden darüber, wieso TDD nicht nur ein guter Ansatz zum Entwickeln ist, sondern sich mindestens ebenso gut zum Lernen und Verstehen einer Sache eignet.
Und schließlich reden wir auch über zahlreiche Lernplattformen und Events, die Wolfram zu den zuvor genannten Themen aus der Taufe gehoben hat:
Das JSCraftCamp – eine Software-Crafting-Unkonferenz, nur eben fokussiert auf die Sprache JavaScript. Das nächste Camp wartet am 17. und 18. Juni 2022 in München auf Euch!
Die JavaScript Katas – eine Sammlung von Coding-Herausforderungen, genannt Katas, die einem helfen sollen, sich mit der Funktionsweise einzelner JavaScript-Bestandteile vertraut zu machen. Der Clou ist, dass das Ganze natürlich in einen TDD-Unterbau eingebettet ist.
Die JavaScript Code Retreats – eine weitere Event-Serie, in der Wolfram mit einem Münchener Ableger mitmischt. Diese Ein-Tages-Events finden zeitgleich weltweit statt und auch dort geht es darum, seine Skills mit Hilfe von TDD auf das nächste Level zu hieven.
Das JavaScript The Language Meetup – hier wird nur aller feinstes JavaScript in Form von TDD-getriebenem Mob-Programming serviert und verköstigt.
26. April 2022 | Kommentare deaktiviert für Revision 527: Vue State Management
Diese Revision ist Vanessa in die Rolle der Gästin geschlüpft und hat Schepp etwas zum Thema „State Management“ in Vue erzählt.
Schaunotizen
[00:00:00] Vue State Management
Wir beginnen mit einem Rückblick auf Vue 1 und 2 und die dort etablierten Global- und Options APIs
Vue 3 hat dann, angelehnt an Reacts Hooks, die Composables und die Composition API eingeführt, sowie die Reactivity API, die einen alle aus der Prop-Drilling-Hölle befreien – wenn man denn weiterhin ohne waschechten Store arbeiten wollte.
Ist die Entscheidung für einen Store gefallen, dann hieß der früher immer Vuex und war der vom Vue-Team mitentwickelte und offiziell empfohlene. Parallel dazu hat sich ein weiterer Store entwickelt, nämlich Pinia, und der ist über die Zeit so gut geworden, dass er nun offiziell zu Vuex 4’s Nachfolger ernannt wurde. Pinia spielt besser mit TypeScript und auch mit Server-Side-Rendering zusammen, und lässt sich ähnlich wie die oben genannte Composition API ansteuern.
Und dann gibt es schließlich noch Harlem.js, das sich auf die Composition- und Reactivity APIs stützt, und somit nur mit Vue 3 arbeitet.
Vanessas Fazit lautet: Benutzt gerne weiter Vuex, wenn Ihr es schon im Einsatz habt, setzt aber auf Pinia, wenn Ihr neue Projekte aufsetzt. Harlem.js hingegen sagt ihr vom Ansatz her spontan nicht so zu.
6. April 2022 | Kommentare deaktiviert für Revision 524: Design Systeme
Für diese Ausgabe haben wir uns wieder einen Gast eingeladen: David Jost, mit dem wir in über einer Stunde das Thema „Design Systeme“ von all seinen Seiten beleuchten. Und das sind mehr, als man in seiner Naivität gemeinhin glaubt.
15. Februar 2022 | Kommentare deaktiviert für Revision 516: Tailwind CSS v3.0
Nachdem wir in der Vergangenheit bereits zu Tailwind 1 und Tailwind 2 entsprechende Episoden aufgenommen haben, haben wir uns anlässlich des Erscheinens der Version 3 erneut mit unserem letztmaligen Gast Milan zusammengesetzt.
Wir beginnen mit einem kurzen Recap, was das Tailwind-Framework sein möchte. Wir stellen beim Blick in The State of CSS fest, dass Tailwinds Bekanntheitsgrad und Popularität in den letzten zwei Jahren stark gestiegen ist. Mit der Version 3 haben sich die Macher dank eines neuen Just-in-Time-Compilers von bisherigen Limitierungen befreit – und dabei das Ego von JIT-Compiler-Pionieren gekränkt. Ob die Macher des Prettier-Plugins Headwind ob der Einführung eines offiziellen Plugins zum automatischen Sortieren von Tailwind-Klassen in HTML beleidigt sind, ist hingegen nicht überliefert. Für Entwickler, welche kein Node in ihren Stacks verbauen dürfen oder möchten, gibt es ebenfalls neu die eigenständige Tailwind CLI. Ansonsten bringt Tailwind 3, von allen Fesseln befreit, mehr von bislang schon Bewährtem: Mehr moderne CSS APIs, mehr Farben, mehr Media Queries, mehr Internationalisierung und mehr Feinschliff.
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!
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.
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.
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.
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.
Ü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.
Ü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.
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!
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 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. 🙁
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.
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.
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.
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.
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):
Vanessa, Hans und Schepp verwandeln in dieser Revision die Vorbesprechung in die eigentlich Sendung, in der es ausnahmsweise Mal nicht nur um knallharte Fakten und technische Themen geht.
Stefan nutzt sie gerne, um an sie seine CSS Custom Properties zu hängen, aber sonst fristet die Pseudoklasse in unserem Alltag ein eher tristes Dasein.
Wir reden über Scrollbar-Styling im alten IE und wie man darauf heutzutage in den verschiedenen Browsern einwirkt, nämlich neben der ::-webkit-scrollbar-Familie für WebKit und Chromium, mit dem per W3C abgesegnetem scrollbar-width und scrollbar-color im Firefox. In neueren IEs und dem davon abgeleiteten Edge ließ sich eine hässliche Scrollbar immerhin noch via -ms-overflow-style: -ms-autohiding-scrollbar; verstecken.
Eine CSS-Eigenschaft, um offenbar eine Art asiatischer Ligaturen zu steuern. Von asiatischer Sprache haben wir leider alle keine Ahnung, aber uns fällt dieser tolle Talk von Florian Rivoal zu dem Thema ein: Line breaking and related properties from CSS Text.
So deprecated, dass sogar MDN sich weigert, es zu erklären. Früher haben wir es aber genutzt, um Inhalte im Netscape-Browser horizontal zu zentrieren, nachdem es dafür im IE ja das <center>-Element gab.
Zu guter Letzt: Programmiersprachen-Bashing Royal Rumble!
Aus irgendwelchen Gründen kommen wir vom rechten Pfad ab und driften über die historischen Eigenheiten von PHP hin zur Programmiersprache MUMPS. Und weil wir sowieso schonmal dabei sind, möchten wir Euch diesen Talk von einer vergangenen React Conf empfehlen: Let’s Program Like It’s 1999 von Lee Byron
Impressum: Christian Schaefer, Postfach 26 04 29, 40097 Düsseldorf, comments@workingdraft.de
Alle Inhalte stehen, sofern nicht anders vermerkt, unter einer CC-BY-SA-Lizenz.
