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 480: Web Component Design mit Joy Heron

8. Juni 2021 | Keine Kommentare

Fullstack-Entwicklerin, CSS-Feinschmeckerin und Webstandards-Liebhaberin Joy Heron (Twitter, Webseite, Case-Podcast) fand sich im virtuellen Workingdraft-Studio ein, um mit Schepp, Peter und Vanessa über Web Components zu fachsimpeln.

Schaunotizen

[00:01:36] Web Components und Web Component Design
Wir beginnen damit, die Unterschiede zwischen Web Components und Framework-Komponenten herauszuarbeiten und bequatschen dabei mit Custom Elements, Shadow DOM und dem template-Element die wesentlichen Bestandteile von Web Components. Wir besprechen Accessibility-Fragen, wägen HTML-Seiten gegen SPAs ab (relevant: Removing client-side React.js (but keeping it on the server) resulted in a 50% performance improvement on our landing page) und besprechen das Für und Wider von Polyfills für Web Components. Ergebnis: gutes Web-Component-Design braucht keine Polyfills (aber wenn, dann sollte es ein leichtgewichtiger Polyfill sein). Außerdem kommen zukünftige (Deklaratives Shadow DOM) und verflossene (HTML Imports) APIs rund um Web Components zu Sprache. Über die Frage des Einsatzspektrums und denkbarer Alternativen zu sowohl Web Components als auch fetten Frameworks (hyperHTML, µland) kommen wir zu der Frage, welche Wert das Wissen um Webstandards-Basics (mit Event.preventDefault() als Beispiel) heutzutage überhaupt hat. Gegen Ende verweisen wir noch auf die MDN-Doku zu Web Components, Joy’s Talk Web Components: Maintaining and Reusing your Frontend, Brad Frost’s Artikel zu front-of-the-front-end and back-of-the-front-end web development und Joy’s Kompendium Responsible Web Applications. Zudem stellt Peter für frühstens 2027 einen Blogpost über OOP-DOM mit Elementen in Aussicht.

Revision 479: Late-Night mit Feedback Culture, Basecamp, Design Sprints

1. Juni 2021 | Keine Kommentare

Eine weitere Late Night Ausgabe mit Kahlil und Stefan im Überleitungsmarathon!

Schaunotizen

[00:00:59] Changes at Basecamp
Nachdem die Menschen von Basecamp in den Late Night Episoden regelmäßig auftauchen müssen wir natürlich kurz über den Mitarbeiter-Exodus und die vorangegangene Kommunikation reden. In einem zusätzlichen Artikel gibt es mehr Information. Wir sind erstaunlicherweise anderer Meinung!
10/50/99% Feedback
Apropos Feedback! Machen Sie das Logo doch bitte größer, morgen gehen wir live! Damit solche Dinge nicht passieren bietet es sich an das richtige Feedback zur richtigen Zeit zu geben. Der Artikel veranschaulicht das sehr gut und wir reden über unsere Erfahrungen. Stefan schwört auf die Technik der Design Sprints um schnell Meter zu machen.
Web Components at GitHub
GitHub verwendet schon lange Web Components und berichtet. Das Catalyst Toolkit hilft GitHub Entwickler:innen dabei, schneller und einfacher ans Ziel zu kommen. Wir sind immer noch skeptisch ob Web Components, jetzt wo sie wirklich da sind, tatsächlich als Allheilmittel durchgehen. Irgendwo mittendrin erwähnt Stefan auch noch Proxies, und wir kommen wieder ganz vorne an.

Revision 478: Abschweifen mit TypeScript 4.3

26. Mai 2021 | Keine Kommentare

Unter dem Vorwand, eine neue TypeScript-Version zu besprechen, trafen sich Stefan und Peter und quatschten in Wahrheit über Delphi, Balkonpflanzen, Rust, Napoleon, Go(tt) und die Welt.

[00:00:58] Schaunotizen

Announcing TypeScript 4.3 RC
Es steht eine neue TypeScript-Version vor der Tür, die wir Feature für Feature durchkauen und dabei immer wieder bis zum Mond abschweifen. Der Umstand, dass ConstructorParameters<Type> nun auch für abstract Classes funktioniert, führt uns direkt ins traditionelle OOP-Roasting. Dabei erwähnen wir nicht nur Stefans Artikel zum Constructor Interface Pattern, sondern auch Fehlleistungen aus dem Hause Bloomberg.com. Über den Wert der Always-Truthy Promise Checks sind wir uns ebenso uneinig wie über die diversen Upgrades des TS-Compilers, nutzen letzteres Thema jedoch zum Abschweifen in Richtung Bazel, esbuild, Go (und den legendären Generics-Hack) und Rust. Neue Editor-Features von TS lassen uns über die Beziehung zwischen TypeScript und VS Code philosophieren, bevor es an die ersten Neuerungen von TS 4.3 geht, die uns wirklich interessieren. Tweaks am den Typen von Gettern und Settern sind nicht die Weltformel, aber gerade für Web Components schon ein sinnvolles Feature. Unabhängig davon fordert Peter einen Rust-artigen unsafe-Block für TS, damit Löcher im Typsystem besser behandelt werden können). Der Klassenkampf setzt sich mit override nebst --noImplicitOverride sowie #private (jetzt auch für Methoden) fort, was wir auf sehr zurückhaltende Weise begrüßen. Contextual Narrowing for Generics (eine selektive Aufschlauung der Typsystems) und Template String Type Improvements (eine weitere selektive Aufschlauung der Typsystems) sagt uns da schon mehr zu. Gegen Ende verfransen wir uns dann mit einen Proposal für do-Expressions, Napoleons Rückzug aus Moskau, ReasonML/ReScript, Delphi, GTK und Empfehlungen für die Revionen 446 und 175 dann vollends.

Revision 477: Komponentenbibliotheken und Design Systeme

18. Mai 2021 | Keine Kommentare

Mit Fabian Friedl, DesignOps Team Lead bei Dynatrace, sprechen Vanessa, Hans und Stefan über Komponentenbibliotheken und Design Systeme.

Schaunotizen

[00:00:00] Komponentenbibliotheken und Design Systeme
Bevor ins Detail eingestiegen wird, erklärt Fabian erst einmal was eine Komponentenbibliothek überhaupt ist. Ein Hauptziel von Komponentenbibliotheken ist es, Konsistenz zwischen mehreren Applikation herzustellen. Darüberhinaus können sie allerdings auch Mehraufwand deutlich minimieren. So muss beispielsweise bei einem Redesign oder bei einer Erweiterung nicht jedes Featureteam die Änderung umsetzen. Stattdessen kommen Änderungen vom Team der Komponentenbibliothek. Die Basis von Komponentenbibliotheken sind Design Systeme. Als i-Tüpfelchen können Designer:innen und Entwickler:innen Design Tokens verwenden. Design Tokens geben atomic Styles an, die für verschiedene Plattformen, wie iOS, Android oder als Custom Properties für Web, exportiert werden können. Selbstverständlich kann es auch Nachteile geben. Doch diese lassen sich durch Organisation umgehen. Fabians Team arbeitet eng mit dem Designteam zusammen, eigentlich sind sie eher ein Team. Es gibt wöchentliche Designreviews, die für einen frühen Austausch sorgen. Eine wichtige Frage, die sich dann beim Entwickeln stellt ist: Wer ist der Konsument? Ist es ein komplettes Open Source Projekt, wie viele Feature Teams greifen auf die Bibliothek zu? Unabhängig davon, jeder Konsument der Bibliothek wird eine gute Dokumentation benötigen. Noch besser sind sogar Copy & Paste Snippets zum Ausprobieren. Je besser die Dokumentation ist, desto mehr erspart man sich Nachrichten über Chatsysteme mit immer den gleiche Fragen. Weiteres Material in den Links

Links

Angular CDK
Stilfreier Grundbaukasten für barrierefreie Angular Komponenten
Calender Kit
Schon mal ein Kalender-Widget gebaut? Hier gibt’s kopflose Unterstützung.
React-aria
React Hooks von Adobe zur Erstellung barrierefreier Komponenten. Sehr qualitativ!
Headless UI
Headless Components von den Tailwind Machern in React und Vue
Reach
Stilfreie, barrierefreie React Komponenten
Polaris
Das Shopify Design System
Barista
Das Dynatrace Design System
Learnings from building a component Library
Fabians Vortrag auf der NG-DE

Revision 476: Recruiting und Karriere

11. Mai 2021 | 2 Kommentare

Anlässlich der Tatsache, dass Vanessa gerade mit Mitarbeiter*innen-Suche beschäftigt ist, sprachen wir über das Thema „Recruiting und Karriere“.

Schaunotizen

[00:01:00] Recruiting und Karriere
Wie ihr vielleicht wisst, arbeitet Vanessa in einem kleinen Startup, dessen Entwicklungsabteilung wachsen soll. Vanessa fiel dabei die Aufgabe zu, neue Menschen zu casten. Alle potentiellen Kandidaten landen zunächst einmal in einer Tabelle des Tools Notion. Alle infrage kommenden Kandidaten bittet Vanessa, ob sie auf ein GutHub-Repo oder auf einen GitHub-Commit verweisen können, auf den sie besonders Stolz sind. Das hilft Ihr, ein Gefühl für die Kandidatin oder den Kandidaten zu bekommen. Wer die Hürde nimmt, den erwartet eine Coding Challenge, welche auf 6 Stunden getimeboxed ist. Das ganze stellt immer eine Art Aufgabe dar, wie Vanessa sie jeden Tag umsetzen muss. Meist ist die Aufgabe umfangreicher als dass man sie in den 6 Stunden schaffen könnte. Vanessa interessiert, ob generell etwas Lauffähiges herauskommt, welche Entscheidungen die Person getroffen hat und wie ihr Coding-Stil ausschaut. Da die Challenge via GitHub bereitgestellt wird, sieht sie nebenbei auch, wie die Kandidatin oder der Kandidat mit Git umgeht. Nach Abschluss der Aufgabe führt Vanessa ein 90 min. technisches Interview. Dieses dient einem beiderseitig noch besseren Kennenlernen, und dem Bantworten von Fragen. Vanessa freut sich hierbei besonders über Verbesserungsideen was Technik oder UX angeht der Aufgabe angeht. Code-Fehler in der Coding Challenge werden jedenfalls verziehen, wenn es menschlich passt! Das letzte Interview schließlich ist der das, in dem es um Gehaltsvorstellungen geht.

Hans, der in einem größeren Unternehmen arbeitet, legt wiederum mehr Wert auf einen solchen „Cultural Fit“, als auf den Coding Stil. Seiner Meinung nach ist das Knowhow etwas, das man den Personen beibiegen kann. Dieses „Zusammenpassen“ muss man von beiden Seiten gesehen, auch wichtig dass die Firma zu der Person passt. Zum Zusammenpassen gehört auch die Frage, würden die Person das Unternehmen hin und wieder in München besuchen, oder käme das nicht infrage? Darüberhinaus soll die Kandidatin oder der Kandidat Lust auf Neues haben und Dinge anschieben wollen. Hans` Meinung nach gibt es nämlich sehr viele Menschen, die die Dinge gerne so belassen wollen, wie sie sind. Die wären allerdings weniger für das Unternehmen geeignet, für das er arbeitet. Darum hat Hans den Recruitment-Prozess umgedreht: Als allererstes versucht Hans mit einer Kollegin oder einem Kollegen zusammen in einem 30- bis 45-minütigen Gespräch herauszufinden, ob beide Seiten zusammenpassen. So merkt man schnell, wenn es nicht passt und beide Seiten haben keinen zu großen Zeit-Invest vorab tätigen müssen. Erst danach folgt der fachliche Test in Form einer Reihe technischer Fragen und Challenges, für welche Hans das Tool Codility nutzt, das auf 60 Minuten Zeit begrenzt ist. Danach folgt das technische Interview. Hier ist für Hans wichtig, was die Person über bestimmte Konzepte denkt, wie z.B. Lifecycle Hooks. Für ihn ist vor allem interessant, wie die Leute antworten, nicht so sehr der Inhalt selbst. So ist es auch okay, wenn jemand etwas nicht weiß. Es geht ihm darum, mit der Kandidatin oder dem Kandidaten ins Gespräch kommen und Lust auf eine zukünftige Zusammenarbeit zu bekommen.

Im Verlauf unseres Gesprächs kommen wir auch auf das Thema „Freelancer“ zu sprechen. Vanessa findet Freelancer schwierig, weil die meist nicht die ganzen Hürden überwinden müssen, die die Festangestellten nehmen mussten, und auch, weil sie mehr verdienen. Der Punkt wiederum führt uns zum nächsten Thema „Verdienstmöglichkeiten“: Vanessa findet, es sollen alle möglichst gleich und angemessen verdienen. Bei Hans im Unternehmen gibt es für verschiedene Tätigkeiten vordefinierte Gehaltskorridore. Dadurch sind die Gehälter recht homogen. Zumindest vermutet er das, denn in seinem Arbeitsvertrag steht die Klausel, dass Angestellte nicht über ihr Gehalt sprechen dürfen. Hier wirft Schepp ein, dass so eine Klausel überhaupt nicht zulässig ist und er der Meinung ist, dass das nur ein Werkzeug ist, mit dem ein Arbeitgeber seine Belegschaft klein hält. Zum Thema „Verdienst als Freelancer“ schildert er seine Beobachtung, dass man zu jedem Stundensatz seine passenden Kunden findet und dass gerade die Kunden, die mit hohen Stundensätzen kein Problem haben auch immer zügig bezahlen. Schepp weist auch darauf hin, dass die Summen, die Freelancer fordern, die Nachteile ausgleichen, die sie gegenüber Festangestellten haben: Sie können jederzeit aus den Diensten entlassen werden, sie müssen bei der Sozialversicherung den Arbeitgeberanteil mittragen, sie werden bei Krankheit nicht weiterbezahlt und jeder Urlaub kostet Freelancer doppelt Geld: In Form von tatsächlichen Urlaubskosten, plus dem Verdienstausfall. Hier pflichtet Vanessa bei, dass sie Freelancer kennt, die deswegen, und aus Reputationsgründen, über Jahre hinweg keinen Urlaub gemacht haben. Im Bereich der Festanstellung findet Hans, dass Senior Engineers in Deutschland zwar gut, aber nicht sensationell gut verdienen, und dass die größten Gehaltssprünge meist mit Arbeitgeberwechsel einhergehen. Als Weiterentwicklung der Karriere bleibt Engineers meist nur der Weg ins Management. Die Seite www.engineeringladders.com gibt Ratschläge für die Karriere.

Eine erfreuliche Beobachtung, die Hans in den letzten Jahren gemacht hat, ist dass die Bewerber immer diverser und facettenreicher werden. Das findet Hans richtig gut! Vanessa meint, das komme aber noch stark auf die Firma an, bei der man ist.

Zu guter Letzt sind wir uns auch alle einig, dass uns sogenannte „Perks“, also Dinge wie Kickertisch, Obstkorb & Co eigentlich nicht so wichtig sind. Sie sind zwar angenehm, aber nicht entscheidend.

Keine Schaunotizen

Revision 440: Engineering Manager und andere Karrierepfade
Vor knapp einem halben Jahr haben sich auch schon Kahlil und Stefan über das Thema „Karriere“ unterhalten. Falls Ihr die Folge noch nicht kennt: Es lohnt sich reinzuhören!
git rerere
Die Funktion git rerere steht für „reuse recorded resolution“. Was es damit auf sich hat, lest Ihr hier.

Revision 475: Unser Development-Setup

4. Mai 2021 | 3 Kommentare

Auf Hörer:innen-Wunsch hin ging es in dieser Revision um unser eigenes Development-Setup. Hans stellte dabei die Mac-, Schepp die Windows-Fraktion. Leider hatte es Peter gesundheitlich erneut so zerlegt, dass wir keine Linux-Perpektive beisteuern konnten.

Schaunotizen

[00:01:00] Unser Development-Setup
Angefangen bei Software, arbeiteten wir uns zu Hardware-Themen vor, um danach wieder in die entgegengesetzte Richtung abzudriften. Folgende Werkzeuge, seien sie „soft“ oder „hard“, fanden dabei Erwähnung:

Revision 474: Barrierefreiheit in Single Page Applications

27. April 2021 | Keine Kommentare

Anlässlich der Veröffentlichung seines Buches „Accessible Vue“ luden wir Barrierefreiheitsexperte Marcus Herrmann (@_marcusherrmann) aus Berlin zu uns ein, um über Barrierefreiheit im Allgemeinen und über die besonderen Herausforderungen der barrierearmen Programmierung von Single-Page-Applications im Besonderen zu sprechen.

Schaunotizen

[00:02:00] Barrierefreiheit in Single Page Applications
Folgende Links spielten während unseres Gesprächsverlaufs eine Rolle:

Revision 473: Vue 3, taugts?

20. April 2021 | Keine Kommentare

Im September 2020 war das Release von Vue 3. Ein gutes halbes Jahr später besprechen wir mit Markus Oberlehner über Erfahrungen über die Einsatz der Änderungen in echten Projekten.

Schaunotizen

[00:00:59] Vue 3 und die Composition API
Über keine eine andere Änderung bei Vue 3 wird so viel gesprochen wie die Composition API. Denn, wenn man das so möchte, hat sie den größten Effekt auf die Programmierweise von Frontend Applikation mit Vue.js. Zudem gibt es Performance Boosts, das Entfernen des notwendig Root-Elements jeder Single File Component und die Möglichkeit mehrere v-models an Kind Komponenten zu binden. Die sind zwar alle super, aber deswegen haben Hans, Schepp, Vanessa und Markus auch nicht viel dazu gesagt. Vergleichbar ist die umumstrittene Composition API mit React Hooks, von denen sie wohl auch inspiriert war, wie Evan You, der Erfinder von Vue.js, in einem Tweet von 2018 durchblicken lässt. Markus und Vanessa sind sich einig, dass die Composition API eine tolle Sache ist, aber die Best Practices noch fehlen. Glücklicherweise sorgt Markus auf seinem Blog mit vielen hilfreichen Artikeln. Er berichtet über das Group, Extract, Share Konzept, den Einsatzgebieten von watch und watchEffect und Möglichkeiten im State Management, auch ganz ohne Vuex. Markus erzählt ebenfalls von swrv, einem state-while-revalidate Plugin.  Außerdem gibt es ein Open Source Projekt über Lazy Hydration auf Github. Zum Abschluss besprechen sie den Support von TypeScript und IDE Extensions wie Vetur, Vue DX und Volar. Wer Vue 3 jetzt mal ausprobieren möchte, kann sich auf dem SFC Playground austoben.

Keine Schaunotizen

markus.oberlehner.net/blog
Der Blog von Markus.
Revision 365
Vue.js – Eine Einleitung
Revision 367
Vue.js – Der Deep Dive

Revision 472: GraphQL in 2021

13. April 2021 | 2 Kommentare

Lukas Holzer, seines Zeichens Senior Software Engineer bei Dynatrace bringt Hans, Stefan und Peter auf den neuesten Stand was GraphQL und speziell Developer-Experience-Upgrades im Zusammenhang mit GraphQL angeht!

Schaunotizen

[00:01:33] GraphQL in 2021
Obwohl wir in Revision 382 den Kampf REST vs. GraphQL bereits durchgekaut hatten, lässt sich Backend-Noob Peter GraphQL und die nochmal kurz erklären.
Zusammenfassung: Facebook baut GraphQL und Over-Download beim Anzeigen der Timeline zu verhindern, macht es Open Source, gibt es an die GraphQL Foundation ab und ein Ökosystem mit Tools wie Swagger und Clients wie Apollo entsteht. Ein Beispiel zum herumklicken ist die GraphQL-API von SpaceX. Lukas macht sich im GraphQL-Kontext vor allem Gedanken um die Developer Experience und den Implementierungsaufwand von GraphQL. Hierbei geht’s vor allem um Codegenerierung, die Zusammenarbeit von TypeScript und GraphQL (z.B. mit openapi-typescript), Data Stitching und andere Herausforderungen beim Groß-Einsatz, was u.a. die Integration von Nicht-GraphQL-Services mit GraphQL Mesh einschließt.
Wir debattieren des Weiteren die großen Fragen des API-Designs an sich, Netflix‘ GraphQL-Einsatz, Frontend-Tooling (v.a. esbuild vite und Snowpack) und den blast from the Past in der jüngsten Cookie Bar.

Revision 471: UX und UI trifft Frontend-Development

6. April 2021 | 3 Kommentare

In dieser Woche durften wir Matthias Ott begrüßen. Neben seinen Artikeln über Front-end und Design-Themen, schreibt er einen Newsletter zu den Themen.

Schaunotizen

[00:01:30] UI und Development: State of the Art
In den letzten Jahren hat sich einiges getan. In Revision 312 haben wir zuletzt über die Zusammenarbeit von Design und Development gesprochen. Somit ist eine Bestandsaufnahme notwendig. Matthias erzählt uns von seinen Erfahrungen und modernem Tooling.
Darüber hinaus sprechen wir über die Art und Weise, wie man gut mit einander kommunizieren kann. Denn das ist das entscheidende, um gute Frontends zu liefern. Außerdem vielleicht auch Component Based Design :) Aber hört selbst.