Working Draft

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. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

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: Die Window-Eingabeaufforderung, PowerShell, die WSL, Git Bash Git für Windows mit den UNIX Tools installieren Windows Build Tool Chocolatey, der Windows-Paketmanager Homebrew, der Mac-Paketmanager VS Code Dreamweaver PHPStorm bzw. WebStorm MacBook Pro 13 2020 Dell XPS 13 iPad (Air) mit Sidecar Höhenverstellbarer Schreibtisch Profi-Bürostuhl ESLint / Prettier Git in PHPStorm, PHPStorm Tips by Christoph Rumpel Sequel Pro für Mac / Postico 2 für Mac / HeidiSQL für Windows SQLite in VS Code MongoDB: Robo 3t auf Mac / MongoDB Compass Swagger.io Postman für REST Services, Insomnia, PHPStorm REST Tool Chrome Canary nebenher mit abgeschalteten Sicherheitsfeatures Browserstack, Open Device Lab (Sven Wolfermann) BrowserSync / Ghostlab / Polypane / Responsively App Blogpost: Running WebKit on Windows NVM / NVM für Windows Passwortverwaltung mit 1-Password, Chrome Passwort-Manager: Have I been pawned-DB + .well-known–Verzeichnis ImageOptim, Squoosh.app, SVGOMG Der Working Draft Newsletter Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

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: Apple Human Interface Guidelines AxeCore von den Deque Labs WAVE Web Accessibility Evaluation Tool Manuel Matuzović: Building the most inaccessible site possible with a perfect Lighthouse score Web Content Accessibility Guidelines (WCAG) The New York Times Modale Das inert-Attribut WAI-ARIA Authoring Practices 1.1 Sarah Higley prefers-reduced-motion Windows High Contrast Mode Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

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 Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

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! Unser Sponsor Die professionelle – weil ganzheitliche – Digitalisierung von Geschäftsmodellen ist unser Business. Renommierten Unternehmen aus der Lotterie- und Versicherungsbranche bieten wir von unseren Büros in Hamburg, Düsseldorf und Zürich aus, effiziente Produkte und Komplettlösungen aus einer Hand – von der Entwicklung einer digitalen Strategie bis hin zu ihrer Umsetzung. Bei sum.cumo findest du ein Umfeld vor, in dem sich alle Bereiche ständig weiterentwickeln wollen und in dem wir Veränderungen offen gegenüberstehen. Mit diesen Voraussetzungen meistern wir unser gesundes Unternehmenswachstum und legen dabei Wert auf einen absolut respektvollen, offenen und unkomplizierten Umgang miteinander legen. 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. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

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. Unser Sponsor Factorial ist eine Digitalagentur mit einem internationalen Team und dem Fokus auf Open Source Technologien, die für regionale und internationale Kunden Technologien entwickelt. Mit Kompetenzen im Bereich Development, Design und Projektmanagement treibt die Agentur die digitale Transformation ihrer Kunden voran. Zu den Anwendungsbereichen zählen unter anderem Hosting, Content Management, Qualitätssicherung, Automatisierung und die Integration heterogener Systemlandschaften. Mehr Infos zu den aktuellen Stellenausschreibungen gibt es hier: www.factorial.io/de/jobs. In diesem Video stellt unser Kollege Julian den Frontend Job bei Factorial vor. 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. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Kahlil und Stefan treffen sich wieder zu einem nächtlichen Diskurs rund um Webentwicklung. Die gewohnten Next.js Architektur Referenzen inklusive. Unser Sponsor Netidee ist die größte Internet Förderaktion in Österreich. Bis zu 1 Million Euro liegen im Fördertopf. Gefördert werden innovative Projekte oder Hochschularbeiten, die das Internet weiterentwickeln und einen gesellschaftlichen Mehrwert liefern. Hier kannst du mehr über netidee erfahren. Schaunotizen [00:01:34] Late Night Fühlen wir uns in der Webentwicklungs-Community noch wohl? Stefan berichtet von seinem jüngsten Twitter Fallout und beschreibt, warum er nach über 8 Jahren auf Twitter endlich den Block-Button gefunden hat. Kahlil erklärt versteckte Twitter-Funktionalität, und wir stimmen im ewigen Geschrei Pro- und Contra-Tailwind, Pro- und Contra-React, mal für ein gemäßigtes Mittel. Nichts ist so toll oder so schlecht, wie man das rundum hört. Des weiteren erzählen wir von den ersten Erlebnissen mit Clubhouse, dem Unterschied zu regulärem Podcasting, und wie die schwarze Szene auch dieses Medium groß gemacht hat. Zu guter Letzt gibt es Geschichten aus dem Agenturleben. Welche Projekte sind gut verlaufen? Welche grottenschlecht? Kann Agentur funktionieren oder muss das Modell überdacht werden Aus den Schaunotizen: Angie Jones als Twitter-Empfehlung. Katrina Owen und The Scandalous Story of Dreadful Code Written By The Best Of Us zum Nachsehen. Martin Fowlers Buch Refactoring als dringende Empfehlung auch für JavaScript Entwickler:innen. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Vanessa, Schepp und Stefan reden heute mit Mathias Schäfer (@molily) über Testing mit Angular. Schaunotizen [00:00:29] Testing Angular Nachdem Mathias im Jahr 2017 sein Werk „Robust Clientside JavaScript“ veröffentlich hat, ist das nun erschienene „Testing Angular“ so etwas wie dessen Fortführung. Angular musste in dem Fall als Framework herhalten, allerdings können Mathias Empfehlungen aus dem Buch auf alle anderen Frameworks übertragen werden. Angular hat den Vorteil, dass es zu Beginn etwas mehr Tooling mitliefert als etwa React. Das Problem ist aber, dass man anschließend ohne Unterstützung bei der Test-Methodik allein gelassen wird. Diese Lücke wollte Mathias schließen. Dabei ist Mathias ohne vorgefertigte Meinung gestartet. Stattdessen ging es ihm darum, Testing zu durchdenken und zu einer eigenen Position zu kommen, die dann begründet wird. Das Buch erklärt, was sinnvolle Tests sind. Für Mathias sind es diejenigen Tests, die Komponenten als Ganzes testen, also inklusive dem DOM und nicht nur die dahinterstehende (Klassen-)Logik. Letzteres nennt man „White-Box-Tests“, weil man zum Testen wissen muss, wie das JavaScript aufgebaut ist. Besser sind aber die „Black-Box-Tests“, die das HTML abtesten und denen völlig egal ist, was hinter den Kulissen an Abläufen notwendig ist. Diese Art von Tests nehmen zudem stärker die Nutzerperspektive ein und sie gehen bei späteren Refactorings weniger oft kaputt, was weniger Wartungsaufwände an den Tests zur Folge hat. Mathias reiht sich damit hinter Vordenker wie Kent C. Dodds ein. Was Mathias als mitgeliefertes Werkzeug nicht überzeugt hat, ist Protractor, und zwar vorwiegend weil es WebDriver-basiert ist und weil es ein paar seiner ehemaligen Verzahnungen mit Angular verloren hat. Stattdessen bevorzugt er Cypress, das wir vor nicht allzu langer Zeit hier im Podcast zum Thema hatten. Folgende Links spielen im Laufe unseres Gesprächs eine Rolle: Mathias‘ Testing Helpers Spectator TS Mockito ng Mocks PlayWright Das Buch „Testing Angular Applications“ von Manning Keine Schaunotizen expect(Exception) Vanessas Podcast über Frontend Testing. flowchart.fun Eine Web-App, in der man Flußdiagramme mit Hilfe von speziellem Markup schreibt/zeichnet Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Anders als ursprünglich geplant geht es in dieser Revision nicht mit dem vergangene Woche angekündigten Thema weiter. Unseren Hauptakteur, Peter, hatte es nämlich gesundheitlich dahingerafft, so dass Hans und Schepp sich auf ein alternatives Thema verlegen mussten. Angeregt durch eine konkrete Situation aus dem Job landeten wir bei „CSS in JS“. Schaunotizen [00:00:30] CSS in JS Ausgehend von der Frage, was man denn heutzutage am Besten für eine CSS-in-JS-Lösung anwendet, also ob JSS, CSS Modules oder doch eher Styled Components arbeiten wir uns nach und nach durch den gesamten CSS-Technologiepark durch. Wir reden über die Vorteile der JS-basierten Lösungen und vergleichen sie mit reinen Konventionen wie BEM. Wir blicken zurück auf unsere Folge über TailwindCSS und verweisen auf die sehr lesenswerten Kommentare, die wir dazu bekommen haben. Und auch Nils Binder hat zu TailwindCSS einen sehr lesenswerten Blogpost geschrieben. Wir erwähnen die CSS-Heldinnen Ana Tudor und Lea Verou. Und wir kommen aus irgendwelchen Gründen Douglas Crockfords Buch „JavaScript The Good Parts“. Keine Schaunotizen Das CSS Café Weil CSS ohnehin unser Thema war, pluggen wir einfach Mal dieses Online-Meetup, in dem der oben schon verlinkte Nils Binder, wie auch der Schepp mitwirken. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Peter hat mal wieder ein randständiges Webstandards-Thema beforscht und berichtet in dieser Revision Hans und Schepp von seinen Erkenntnissen. Unser Sponsor Das große Online-Trainingsevent für JavaScript, Angular, React, HTML & CSS Vier Tracks mit über 40 Workshops von mehr als 25 (inter-)national bekannten Trainern:innen vermitteln tiefgehend, wie Sie JavaScript- & HTML-basierte Anwendungen optimal planen und erfolgreich realisieren, welche Stärken und Schwächen die Technologien haben und wie Sie bei der Wahl geeigneter Architekturen vorgehen sollten. Als JavaScript- oder HTML-Einsteiger:in oder -Umsteiger:in ist der Fundamentals Day die beste Vorbereitung auf die Workshoptage! Anschließend erwarten Sie Themen, wie Electron, Project Fugu, Cypress oder TypeScript. Mit dem 4-in-1-Paket buchen Sie also ein Event & können gleichzeitig an allen vier teilnehmen! Alle aktuellen Online und Vor-Ort-Trainings und Events finden Sie unter: e-academy.net Mehr Infos zu den JavaScript Days: javascript-days.de Schaunotizen [00:01:59] Event Handler (für Web Components) In Peters jüngstem Blogpost geht es um Event Handler für Web Components. Wir klären zunächst die Beziehung zwischen Event Handlers (mit on beginnende Properties und Attribute) und Event Listeners und besprechen dann, wie Event Handler genau funktionieren (Spoiler: es ist kompliziert). Danach diskutieren wir, ob auch die Custom Events von Custom Elements (aka Web Web Components) über Event Handler ansteuerbar sein sollten. Für den Ja-Fall hat Peter das OnEventMixin gebaut, das Event-Handler-Logik in Web-Component-Klassen hineinpatched. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/