Working Draft

Wöchentlicher News-Podcast für Webdesigner und -entwickler

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 498: CSS 2, Web 3.0 und Podcastempfehlungen

13. Oktober 2021 | 3 Kommentare

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.

[00:01:45] Schaunotizen

CSS Spec Terms
Tab Atkins-Bittners Glossar der CSS-Termini.
Windi CSS
Ein zu Tailwind CSS kompatibles Framework, das aber bestimmte Dinge besser meint zu lösen.
What Is Web 3.0 & Why It Matters
Ja was ist denn eigentlich dieses Web 3.0? Und war das nicht eigentlich schon HTML5? Und wie passt das zu Industrie 4.0?
Free Guy
Filmempfehlung: eine US-amerikanische Science-Fiction-Action-Komödie mit Ryan Reynolds in der Hauptrolle.
CSS for JavaScript Developers
Ein Lernkurs, der mit einer gänzlich anderen Perspektive an CSS herangeht. Darüberhinaus empfehlen wir die Kurse von Wes Bos.
Podcastempfehlungen

Revision 497: Glücksrad

6. Oktober 2021 | Keine Kommentare

Nach zehn Wochen war es mal wieder an der Zeit, an unserem Webtechnologie-Glücksrad zu drehen!

[00:01:15] Glücksrad

SVGAnimatedEnumeration
Ähm… hä?
Animated GIF, auf dem ein Typ mit Vokuhila-Frisur mit seinen Lippen die Buchstaben W, T und F formt.
Keine Ahnung, wozu das gut ist. Schnell weiter!
Die :root-Pseudoklasse
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.
Der <image>-Datentyp
In den <image>-Datentyp lassen sich allerlei Dinge stecken:

  • Bilder per url()-Funktion (natürlich)
  • Gradienten aller Art, also lineare, radiale und konische Gradienten, sowie deren repeating-Pendants.
  • ein responsives image-set()
  • die endgeile, aber nirgendwo supportete image()-Funktion
  • das nur in WebKit und Chromium unterstützte cross-fade()
  • sowie das mächtige, aber nur in Firefox implementierte element()
::-webkit-scrollbar und Konsorten
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.
font-variant-east-asian
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.
Die dir-Eigenschaft der Manifest-Datei
Die sagt, in welche Richtung die Schrift der darin hinterlegten Textbausteine läuft. Hammer! 😴💤
Das alignAttribut
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

Revision 496: Tooling rund ums Frontend Tooling

28. September 2021 | Keine Kommentare

Hans und Schepp hatten erneut Jon Uhlmann, aka @jonnitto, zu Gast, den Ihr vielleicht schon aus der Revision 490 über Alpine.js & Petite Vue kennt. Dieses Mal sprachen wir über…🥁

Schaunotizen

[00:01:07] Tooling rund ums Frontend Tooling
Die einen oder anderen erinnern sich, Jon ist als Core-Member stark in die (Weiter-)Entwicklung des Neos CMS involviert. Als klassisches „Headful“-CMS fühlt dieses sich auch für das Frontend zuständig. Und wo Frontend im Spiel ist, da geht es heutzutage nicht ohne das entsprechende Frontend-Tooling in Form von Transpilern, Pre- und Postprozessoren, Task-Runnern und Bundlern. Als da wären:

Hierunter das richtige Werkzeug zu finden und die damit zusammengesetzte Toolchain längerfristig auf Stand zu halten, fällt selbst reinen Frontend-Entwicklern oft schwer – für Allrounder oder Backend-Entwickler, wie sie ein Großteil der Klientel von Neos CMS darstellt, ist das mindestens unangenehm, wenn nicht sogar kaum zu stemmen.

Aus diesem Grund hat Jon sich im Laufe der letzten Jahre mit dem Schreiben von Neos-Tools befasst, die uns diese ganzen Probleme abnehmen, und die die Komplexitäten der vorhin genannten Werkzeuge in einer einfach einzubindenden Black Boxen kapseln. Auf die Art und Weise ist eine stattliche Tool-Sammlung entstanden:

Wir sprechen darüber, für welche Anforderungen Jon Lösungen finden musste und zu welchen Einsichten er im Laufe der Zeit gekommen ist. Und wir sprechen darüber, was diese Tools nicht sind und was Jon auch bewusst nicht in diese Tools verpacken möchte.

Revision 495: Storyblok – Einblicke in ein Startup

21. September 2021 | Keine Kommentare

Für diese Revision durften wir Dominik Angerer (@domangerer und Sebastian Gierlinger (@sebgie) als unsere Gäste begrüßen. Die beiden sind in Tateinheit mit unserem Stefan Ausrichter diverser Tech-Events in Linz: dem Stahlstadt.js-Meetup, der Script und auch der TSConf:EU. Darüber hinaus sind sie aber auch führende Köpfe hinter dem noch jungen aber sehr erfolgreichen Startup Storyblok, das das gleichnamige Headless CMS betreibt.

Schaunotizen

[00:00:59] Storyblok – Einblicke in ein Startup
Anlässlich des Rollouts von Teilen der Version 2 von Storyblok hat uns interessiert, wie es überhaupt dazu kam, dass Storyblok gegründet wurde, was das Headless CMS von anderen existierenden Angeboten unterscheidet und was für weitere Entwicklungen das Team zu ihrem heutigen, starken Standing geführt haben. Wir reden über Remote Work, welches seit Anbeginn zur DNA der Firma gehört, mit all seinen Vor- und Nachteilen. Wir reden über enormes Wachstum und wie Corona besseres Team-Building vereitelt. Und natürlich wollen wir auch wissen, wie es zum Entschluss einer Version 2 kam und wie das Team bei dessen Entwicklung und Ausrollen vorgeht. Wir erfahren, dass im Prinzip alles mit einem Style Guide und einer daraus abgeleiteten Komponenten-Bibliothek namens „block.ink“ seinen Anfang nahm, welche erforderlich wurde, um die vielen neu angeheuerten Mitarbeiter auf eine gemeinsame Linie zu bringen. Basierend darauf entschied man sich bei Storyblok für einen graduellen Rollout der Version 2, bei dem nicht das ganze Interface auf einen Schlag ersetzt wurde, sondern nach und nach immer mehr Teile davon. Die Benutzer wurden zunächst noch nicht auf die neue Version gezwungen, sondern sie dürfen freiwillig in das V2-Beta-Programm wechseln. Und schließlich dokumentiert das Team alle seine Vorhaben, die es für Version 2 hegt, in seiner Public Roadmap.

Keine Schaunotizen

ES.next News
Den ES.next News(letter) können wir allen JavaScript- und JS-Tooling-Interessierten sehr ans Herz legen. Kuratiert wird er von JavaScript-Koryphäe Axel Rauschmayer (@rauschma) and JS Kongress-Co-Organisator Johannes Weber (@jowe). Jede Woche landen bei den Abonnenten nicht mehr aber auch nicht weniger als 5 interessante Links im Posteingang.

Revision 494: Serverless

14. September 2021 | Keine Kommentare

Nachdem Stefan zu den regulären Zeiten aktuell nicht mehr teilnehmen kann, haben sich Vanessa, Schepp und die Österreich-Quote früh morgens zu Cappuccino und Hühnerbrühe getroffen. Thema der Sendung: Sämtlicher Research zum Thema Serverless.

Schaunotizen

[00:02:30] Serverless
Ja, wie ist den das? Bei Serverless gibt’s doch immer noch Server?. Wieso heißt Serverless eigentlich Serverless, und wie geht das? Stefan referiert über Serverless als Infrastruktur-Prinzip und Serverless als Applikations-Modell. Wir gehen in die Details zu AWS Lambda, Azure Functions, den Cloudflare Workers, und Fastly Compute@Edge. Und das auch nur, um die großen Unterschiede der Plattformen herauszustreichen. Daneben gibt es ein paar Details zu OpenWhisk, OpenFaaS, KNative, Fission, KEDA, etc. Stefan spricht dazu auch auf dem Rust Linz Meetup. Wer mehr über die Bezahlung wissen will, schaut sich Troy Hunts Blogpost an. Für komplexere Cloud-Berechnungen gibt es ja mittlerweile Fachleute wie die Duckbill Group, die einen sehr empfehlenswerten Newsletter betreiben.

Revision 493: accent-color, page transitions, alert()-Gate & Tailwind

7. September 2021 | 6 Kommentare

Diesmal trafen sich Vanessa und Schepp, um über ein ganzes Potpourri an aktuellen Themen aus der Web-Standards-Welt zu sprechen. Und über Münchener Restaurants.

Schaunotizen

[00:01:20] accent-color
Mit accent-color könnt Ihr zukünftig bestimmen, in welcher Farbe farbliche Bestandteile von nativen Inputs dargestellt werden. Zu der Farbe optimal kontrastierende Icon- und Textfarben gibt es kostenlos obendrauf. Kommt mit Chrome 93 und Firefox 92.
[00:19:16] Smooth and simple page transitions with the shared element transition API
Team Chromium testet die Praxistauglichkeit einer neuen Idee in Form eines Origin-Trials: die Shared Element Transitions API. Die Idee ist grundsätzlich richtig cool, Frage ist, ob sie in der aktuell geplanten Umsetzungsform zukunftstauglich genug ist, oder ob wir „schlauere“ technische Ansätze brauchen, wie man sie etwa in Svelte oder Ramjet findet. Schaut sie Euch an und gebt dem Team Feedback!
[00:30:55] Implement window.{alert, prompt, confirm} removal from cross-origin iframes
Team Chromium hat sich vor ein paar Wochen mit dem Release von Chrome 92 so richtig in die Nesseln gesetzt. Denn man hatte iframes dort um die Fähigkeit beschnitten, alerts, confirms oder prompts auszulösen. An sich löblich aus Sicherheitssicht. Weil man zuvor ein paar relevante Nutzungsszenarien übersehen hatte und diese doch recht drastische Änderung im Vorfeld nicht kommuniziert hatte, kam es wie es kommen musste: Reichlich Webentwickler*innen-Exkremente trafen die Windpaddel des großen Google-Bugtracker-Ventilators. Und so kam es, dass Google die Änderung nach anfänglicher Gegenwehr zurückgerollt und auf Anfang 2022 vertagt hat.
[00:37:00] How I experience the web today
Lustige Seite, die auf leicht übertriebene Art und Weise zeigt, wie kaputt das Web heutzutage ist.
[00:47:41] Nachteile von Tailwind CSS
Eeeendlich packt Vanessa mal mit Dingen aus, die ihr bei Tailwind auf die Füße gefallen sind 🥳 Tatsächlich muss man aber sagen, wäre man auch mit BEM & Co nicht viel besser aus der Nummer rausgekommen. Aber immer spannend, diese Berichte aus der Praxis!

Keine Schaunotizen

Stefan’s Web Weekly
Auf das Thema accent-color kamen wir aufgrund des wöchentlichen Newsletters von Stefan Judis, den Ihr vielleicht schon als Gast unseres Podcasts kennengelernt habt.
Restaurant Inszenario
Tolles Münchener Restaurant mit ziemlich langatmig ladenden Webseite.
Page Transitions Travel App
Sarah Drasners Page Transitions Demo.
Auphonic
Der von vermutlich allen Podcastern genutzte Audio-Verschönerungsdienst.
Unroll.me
Ein leicht zu bedienender Newsletter-Abmelde-Service.

Revision 492: Der aktueller Status von Webpack

1. September 2021 | Keine Kommentare

Was gibt es eigentlich Neues bei Webpack 5? Das erzählt uns Tobias Koppers (@wSokra), der Gründer von Webpack, und gibt uns Einblicke in seine Zukunftspläne.

Schaunotizen

[00:00:59] Der aktueller Status von Webpack
In Revision 289: Tiefe Einblicke in die Webpack Entwicklung aus dem Jahr 2017 sprachen wir bereits mit Tobias über Webpack. Gestartet als ein sog. Module Bundler. Damals sprachen wir über Updates bzgl. Version 2. Seitdem hat sich einiges getan. Heutzutage bezeichnet Tobias Webpack als „Frontend Web App Optimizer“. Er vergleicht den heutigen Stand von Webpack mit ähnlichen Tools, den „Bundlern“ Rollup und Parcel und den „No-Bundlern“ Snowpack und Vite.
Im Anschluss besprechen Hans, Vanessa und Tobias die Neuerungen von Webpack 5, wie Persistent und Long Term Caching, Module Federation, HMR Verbesserungen, TypeScript Typings, WebAssembly Support, und noch viele mehr.
Ein endloser Support für Webpack 4 ist nicht geplant. Um nun all diese neuen Features nutzen zu können, heißt es also: migrieren! Wie Tobias im Podcast erzählt, ist die Anzahl der „Breaking Changes“ gering.  Dank des Migration Guides sollte dies kein Problem sein.

Revision 491: Dezentrale Architekturen

24. August 2021 | Keine Kommentare

Als wir vor fünf Wochen mit Bianca Kastl (@bkastl) unsere Folge zur Luca-App aufgenommen haben, da haben wir ein Thema gestreift, dem wir eine eigene Folge widmen wollten, um es dort nochmal tiefergehender zu betrachten: Dezentrale Architekturen. Und genau das tun wir hiermit!

Schaunotizen

[00:01:01] Dezentrale Architekturen
Wir beginnen zunächst mit einer Gegenüberstellung zentraler, dezentraler und hybrider Architekturen: Wie sie funktionieren, wo ihre Vorteile und Nachteile liegen. Anschließend reden wir über Thin und Fat Clients, die mal mehr und mal weniger „Denkprozess“ und Verwaltung an die Gegenseite weg-delegieren. Wir sprechen bezogen auf Dezentralität auch kurz über die Vor- und Nachteile von Web-basierten Clients. Und schließlich betrachten wir ganz dediziert die Frage der Datensicherheit und Datenhoheit im Kontext der verschiedenen Architekturen. Bianca ist da nicht nur aufgrund ihrer (erfolgreichen) Versuche, die Sicherheitskonzepte der Luca-App auszuhebeln, sehr bewandert, denn sie ist als Beraterin oder Co-Entwicklerin in ähnlichen Projekten involviert: IRIS connect und sofort-impfen.de

Revision 490: Alpine JS & Petit Vue mit Jon Uhlmann

17. August 2021 | 4 Kommentare

Diesmal geht es wieder rein in die moderne Welt der Frontend Entwicklung. Mit Jon Uhlmann, Neos-Core Team Members, sprechen Hans und Vanessa über alpine.js und Petite Vue.

Schaunotizen

[00:00:59]  AlpineJS & Petite Vue
AlpineJS und Petite Vue sind beides ähnliche, sehr leichtgewichtige Frontend Frameworks. Um eine Vorstellung davon zu bekommen, bezeichnet Jon sie als das jQuery des modernern Webs oder TailwindCSS des JavaScripts. Mögliche Use Cases sind Formvalidierung, Modals, Nachladen von Content, MixItUp Filters und mehr. Die Frameworks benötigen keinen virtuellen DOM. Dadurch sind die Pakete der Frameworks vergleichsweise klein. Petite Vue kommt mit 5kB. Dennoch steht Entwickler:innen die komplette Reaktivität auf Basis von Vue.js zur Verfügung, was den Kern beider Frameworks bildet. Auch globales State Management kann z.B. mit $store betrieben werden. Wie so oft sind beide der Frameworks trotz ihrer geringen Größe daher auch für größere Projekte geeignet. Neben der kleinen Größe des Builds, was vor allem Vorteile für die User Experience bringt, nennt Jon die schnelle Lernkurve und das damit verbundene schnell erreichte Ziel auf Seiten der Developer Experience als Pluspunkt. Außerdem untersützen die Frameworks Entwickler:innen beim Thema Barrierefreiheit. Als einzigen Nachteil sieht er das fehlende Tree-Shaking. Unterscheiden kann man AlpineJS und Petite Vue aktuell quasi nur in der Größe der vorhandenen Features. Petite Vue ist 3 Jahre jünger als AlpineJS. Dadurch fehlen hier (noch) Features wie Transitions. Aber natürlich sind wir hier guter Dinge! Weitere gute Nachrichten sind, dass Testing wie gewohnt zum Beispiel mit Jest und Cypress, durchgeführt werden kann. Wir wünschen viel Spaß beim Ausprobieren der beiden verlinkten Codepens!

Links

Verwandte Revisionen

Revision 489: (Über-)Leben mit Open Source, feat. Marvin Hagemeister und Martin Donath

11. August 2021 | Keine Kommentare

Vanessa und Peter hatten zwei Open-Source-Schwergewichte zu Gast, mit denen sie über das (Über)-Leben als OSS-Entwickler plauderten. Martin Donath (Twitter, Github) war zuletzt in Revision 484 zu CSS und stylezen zu Gast und entwickelt Material for MkDocs. Marvin Hagemeister (Webseite, Twitter, Github) ist für seine Arbeit an Preact bekannt und war genau zu diesem Thema zuletzt in Revision 397 zu Gast.

Schaunotizen

[00:01:00] (Über)-Leben mit Open Source
Nachdem wir kurz OSS und FOSS gegeneinander abgrenzen, geht’s um den OSS-Alltag. Zunächst geht’s um Projekt-Management: wie werden Maintainance und Support geregelt, wie können Komplexität und Feature-Requests im Rahmen gehalten werden, wie fängt man überhaupt an (z.B. via Frontend Foxes) und wie sieht ein Open-Source-Projekt-Lifecycle aus? Wie besprechen im Anschlss Funding-Fragen (Github Sponsors, das Sponsorware-Konzept) und wie das Funding bei MkDocs und Preact genau abläuft, Funding-Fails bei Babel sowie Martins Projekt-Umfrage für MkDocs. Am Ende geht’s um Lizenzen, Amazon, Influx DB und Redis, ethische Lizenzklauseln und Creative Commons.