Working Draft

Dieses Interview ist einer von 5 Teilen unserer Serie On Tour @ #thinkabout19. Im Mai waren wir mal wieder auf einer neuen Konferenz in Köln-Ehrenfeld zu gegen, die sich neben Design- und Development-Themen auch stark mit der Thematik beschäftigt, wie Software unsere Gesellschaft beeinflusst. Die Zwei-Track Konferenz schaffte es mit einer sehr guten Organisation und viel Liebe zum Detail eine gesamtheitlich starke Performance abzugeben und eine hohe Messlatte für eine nächste Episode zu setzen. Und das Beste: Die 2020er Ausgabe steht in den Startlöchern! Die ersten Sprecher sind angekündigt und der Ticketverkauf für die am 4. und 5. Juni 2020 stattfindende Konferenz ist gerade frisch gestartet: https://think-about.io Anika Zeidler: Algorithmic Bias – Diskriminierung durch Algorithmen erkennen und vermeiden Der Einfluss von Code auf unsere Gesellschaft ist durch Machine Learning und das Design der damit verbundenen Algorithmen stärker denn je. Jedes Stück Software, dass geschrieben wird, entsteht mit einem bestimmten „Bias“, einer Art Vorurteil, der durch die Zusammensetzung des Projektteams stark beeinflusst wird, mein Anika. Welche Schritte notwendig sind um diesen Bias zu minimalisieren erläutern wir gemeinsam.

Hans und Peter diskutieren über Patterns in React! Schaunotizen [00:01:25] React, Redux, Hooks und HOCs Redux-Hooks werden ein offizielles Feature, was Hans und Peter zu einer Grundsatzdiskussion über Patterns in React verleitet. Hooks (siehe Revision 385) wurden vor nicht allzulanger Zeit in React eingeführt und haben sich seither in diversen Code Bases breit gemacht – nach einhelliger Meinung (zumindest im Podcast-Studio) mit nicht nur positiven Auswirkungen. Wir diskutieren über verschiedene Patterns rund um State Management in React, Higher-Order Components und Mittel und Wege, Hook-Benutzung von den Nachteilen zu befreien. Hans schlägt hierfür ein Architekturpattern im Stile von Flux vor.

Zur Feier des Tages versammelte sich das komplette Team (Peter, Hans, Rodney, Stefan, Schepp) nebst allen Alumni Markus Schlegel, Kahlil Lechelt und Anselm Hannemann in einer Videokonferenz! Von dieser Revision gibt es also auch eine Youtube-Version mit Bewegtbild: In Video wie in Podcast sprachen wir über das Big Picture: die Webentwicklung (und der Podcast) von damals verglichen mit heute und wie auch wir selbst uns im Laufe der Zeit so verändert haben. Schaunotizen [00:01:50] Gott und die Welt Wir beginnen mit den Anfängen von Working Draft (Revision 1: Sencha Animator, Webfernsehen und Firesheep), die damals unter anderem Peters Blog-Linkliste ersetzte. Damals waren er und Schepp mit originellen Projekten wie Turbine und dem CSS-JS-Booster befasst und wurden dann von Markus zum Podcast rekrutiert. Gestützt durch unser Metadaten-Archiv ermitteln wir, dass Anselm zuerst in Revision 36 („Ohne Jan, aber mit Delay“) und Kahlil erstmals in Folge 37 („speak.js, Native Client und JS-MVC-Frameworks“) dabei waren. In Revision 40 („Zerskyped“) taucht erstmals Rodney auf und Hans feiert seine Workingdraft-Premiere mit Revision 44 („HTTP-Statuscodes, TYPO3 und ’n Echo, echo, cho, o….“). Wie die frühen Revisionstitel erkennen lassen, hatten wir früher noch erheblich mehr mit Tonproblemen zu kämpfen und auch die Web-Technik war damals eine andere. So kommen wir auch in dieser Revision nicht umhin, über JavaScript-Frameworks iin Vergangenheit, Gegenwart und Zukunft (ggf. powered by WASM) zu sprechen und wieder mal etwas technischer zu werden …

Schepp, Hans und Stefan im Gespräch mit Thomas Steiner von Google. Seines Zeichens Dev Advocate für Project Fugu. Unser Sponsor VisionX ist eine Low-Code Plattform die Unternehmen unterstützt Applikationen schneller zu entwickeln. VisionX hilft dabei die eigene Softwareentwicklung zu beschleunigen und komplexe Applikationen mit geringem Aufwand zu erstellen. Schaunotizen [00:04:00] The Web Capabilities Project – Fugu Warum denn immer Electron Apps installieren oder gleich mit Cordova Hybrid-Apps bauen, wenn das Web an sich im Browser doch eh so viele Möglichkeiten bieten? Nun, vielleicht fehlt doch das eine oder andere. Wie File System Access, oder Zugriff auf wichtige Kontakte. Vielleicht die Direkt-Verbindung zu SMS, Background Sync von Inhalten und mehr? Tja, es gibt doch etwas, das in Betriebssystemen steck und man irgendwie gerne im Browser auch haben möchte. Hier setzt Project Fugu an. Fugu bietet dem Web das zarte und absolut köstlichste Filet, dass man für Apps finden kann. Bei allem anderen kann man sich gleich mal giftigst verschlucken (erzählen die Simpsons). APIs für den Browser, die aus dem Web endlich die Applikationsplattform machen, die es schon immer sein sollte. Mit im Programm: Alles vorher genannte und noch viel, viel mehr. Wie der API Tracker verrät. Ein ambitioniertes Projekt, bei dem viel Hirnschmalz und noch mehr Kommunikation drinsteckt. Thomas erzählt uns von der generellen Herangehensweise, der offenen Entwicklung, Kollaboration mit Partnern und Browserherstellern, und auch wie alles ins große Bild von Google passt. Viel Wissen verpackt in knackige anderthalb Stunden. Viel Spaß! [01:23:31] Keine Schaunotizen Google IO/19: Unlocking New Capabilities for the Web Der Talk von Thomas und seinem Kollegen Pete LePage zum Thema Fugu.

Kahlil und Hans erzählen von Refactoring-Projekten mit und zu TypeScript Unser Sponsor devjobs.at ist Österreichs erste Job- und Karriereplattform SPEZIELL für Software Entwickler:innen. UND wurde von Grund auf von Developern für Developer konzipiert. Das Besondere auf dem Portal sind auf Programmierer:innen abgestimmte Stelleninserate und Firmenpräsentationen, welche umfassende Einblicke in die Entwicklungsabteilung geben. Damit ihr immer den passenden Job findet, funktioniert devjobs.at mit einer neuen, auf KI basierten Such- und Matchingtechnologie. Jetzt schon nutzen mehr als 500 Entwickler:innen täglich das Portal des Mitte Juni gelaunchten Linzer Startups. Ob JavaScript oder TypeScript auf devjobs.at findet ihr euren passenden Job. Schaunotizen [00:01:50] Refactoring Das heutige Refactoring-Thema beginnt mit Kahlils Projekt, das 5 Jahre alt ist und mit Knockout gebaut ist. Nach einem Rant von Peter darüber, dass früher (in einer Welt mit 2-Way-Databinding) auch nicht alles schlecht war und einem kurzen Ausflug in das Œuvre von Andrea Giammarchi (hyperHTML, lighterhtml und neverland) geht es wieder um das eigentliche Thema. Wir setzen Joel Spolskys legendäres Anti-Rewrite-Essay in Kontext und lassen auch Hans von einem langen Migrations-Projekt (JS nach TS) erzählen. Am Ende erwähnen wir noch einen TypeScript-Hack und TypeScript/JSDoc-Magie. [01:14:40] Keine Schaunotizen NodeGUI Kahlil möchte euch das neueste Tool für Desktop-Apps mit JavaScript ans Herz legen.

This interview is part of our four-part series On Tour @ #cssday. [00:09:31] Elika J. Etemad (Fantasai): Line Layout & Vertical Rhythm and Florian Rivoal: Line Breaking Elika and Florian both work a lot on CSS Specifications. We discuss the different topics of Line Breaking and Vertical Layout for text which were the talks of the both speakers. After some historical background we speak about the challenges the W3C Experts face when writing specifications and how they evolve over time. Both Elika and Florian are also members of the W3C Advisory Board. They give us a short insight in what the board does and how the processes at W3C affect their work. About the conference In June 2019 we visited beautiful Amsterdam again to be part of CSS Day 2019 (with a UI special) taking place at Compagnietheater. CSS Day is organised since 2013 by Peter-Paul Koch, Krijn Hoetmer, and Martijn van Duuren – the people behind performance.now(), Mobilism and dsgnday. This year’s edition featured great CSS talks going into details of how CSS properties like word-break work and talks about more design focused topics like how we can design better interfaces. We’re sure there will be another CSS Day next year. So stay tuned.

Mit Code-Golf-Großmeister Marvin Hagemeister (Webseite, Twitter) hatten wir in dieser Revision das Vergnügen, das Warum und das Wie von Preact zu ergründen. Schaunotizen [00:01:00] Preact Preact (Github) ist ein 3kb-Front-Framework mit einer React-artige API. Wegen des schon immer ausgezeichneten Supports für Server-Side-Rendering fand Marvin erst Interesse an Preact und dann uns seinen Weg in das ca. 5 akive Personen zählende Kern-Team. Wir kommen natürlich nicht umhin, die Mittel und Wege zum 3kb-Framework zu besprechen. Zum Ziel führen (neben dem Luxus, anders als React nicht jede Zeile Code von Facebook unterstützen zu müssen) der Verzicht auf ein eigenes Event-System, Anpassungen im Code-Stil (z.B. Prototypen statt Klassen) und natürlich Code-Golf. Mittlerweile hat Preact als Unterbau von unter Anderem Google AMP, Smashing Magazine und dev.to allerdings selbst diverse Großprojekte zu supporten. Wir besprechen DOM-Diffing vs. Virtual-DOM-Diffing, Fragen der React-Kompatibilität, Performance, das Addon-System von Preact (mit Projekten wie preact-router und wouter), Minifizierer (Google Closure Compiler und Terser), Zukunftfragen und natürlich das Dasein als Open-Source-Contributer-Dasein in Kombination mit einem (fast) normalen Job.

Dieses Interview ist einer von 5 Teilen unserer Serie On Tour @ #thinkabout19. Im Mai waren wir mal wieder auf einer neuen Konferenz in Köln-Ehrenfeld zu gegen, die sich neben Design- und Development-Themen auch stark mit der Thematik beschäftigt, wie Software unsere Gesellschaft beeinflusst. Die Zwei-Track Konferenz schaffte es mit einer sehr guten Organisation und viel Liebe zum Detail eine gesamtheitlich starke Performance abzugeben und eine hohe Messlatte für eine nächste Episode zu setzen. [00:01:07] Christopher Grebs: Maintain your ancient projects without getting lost Wir haben uns mit Christopher über seine Erfahrungen in der fast 10 Jahre alten Code von add-ons.mozilla.org unterhalten. Er gab uns einige Einblicke über die Ansätze von Refactorings und welche Methoden ein guter Ansatz zum Umgang mit historisch entstandenen Code sind. Wir teilen auch unsere eigenen Erfahrungen.

Hans, Schepp und Stefan bekommen Besuch von Daniel Bachler, der uns über Front-End Entwicklung mit rein funktionalen Programmiersprachen aufklärt. Unser Sponsor Mit StormForger kannst du Last- und Performancetests automatisiert in der Cloud durchführen. Lerne, das Verhalten deiner Software-Architektur, deiner Infrastruktur (z.B. AWS Cloud), deiner API und deiner Web-Applikation besser zu verstehen. Melde dich kostenfrei unter stormforger.com/podcast an und nutze den vollen Funktionsumfang in unserer Trial-Version. DevOps und die Cloud sind auch wichtige Themen für uns und unsere Kunden. Deswegen hier noch zwei Veranstaltungshinweise: Am 19.09.2019 tagt bei uns die AWS User Group Cologne mit einem Special zu Kubernetes. Es gibt Talks von Giant Swarm CTO Timo sowie Mindcurv Technical Lead Stefan und Solutions Architect David. Schaut gerne vorbei! meetup.com/aws-cologne Direkt am nächsten Tag, Freitag den 20.09.2019, findet unser (kostenloses) Enterprise Performance Lab statt. Dort gibt es Vorträge und informativem Austausch zu digitaler Produktentwicklung, Software-Architektur, Agile & Performance Testing, Digital Transformation, DevOps und Cloud. Konzipiert ist das Ganze für Menschen aus der digitalen Produktentwicklung und IT, die vor komplexen Fragestellungen stehen. Falls Ihr teilnehmen wollt oder Ihr jemanden kennt, für den das interessant sein könnte, dann findet Ihr alle Infos unter stormforger.com/events. Schaunotizen [00:02:45] Elm Das noch sehr junge Elm ist so etwas wie Haskell im Browser, allerdings zugänglicher und mit vielen schönen Runtime Features, die Fremdbibliotheken fast unnötig machen. Eine strikte funktionale Ausrichtung, alles immutable, superstarke Typisierung keine Side Effects dank Steuer-Strukturen und der Abstinenz von null sorgt für — hört, hört — keinerlei Laufzeitfehler! Mit der Elm Architecture bekommen wir auch so etwas wie Redux frei Haus geliefert (oder bekommen wir mit Redux die Elm Architektur geliefert?) und können fesche Web-Anwendungen bauen. Eigenheiten, Vor- und Nachteile und wie man mit JavaScript spricht, erfährt ihr alles hier. Weiteres Info-Material ist weiter unten verlinkt [00:43:40] F# F# von Microsoft ist seit 2002 der funktionale Bruder von C# für die .NET Laufzeitumgebung. Mit Microsofts Offenheit gegenüber neuen Technologien gibt’s das auch jetzt auf Linux, und seit neuem auch im Browser. Dank Fable übersetzt man den F# Syntaxbaum auf etwas Babel-kompatibels. Mit dem SAFE-Stack ist man dann auch End-to-End F# fähig, und Bolero geht erste Schritte Richtung Web Assembly. Weiteres Lernmaterial wieder weiter unten. [01:07:30] Keine Schaunotizen F# for Fun and Profit DIE Referenz für funktionalie Programmierung, nicht nur zu F#. Making impossible states impossible Legendäres Video von Rich Feldman über die großen Vorteile von funktionalen Programmiersprachen: Keine unvorhergesehenen Fälle! Make Web Apps Fun and Easy to Refactor Daniels eigener Vortrag zu Elm. Elm Guides Elm zum lernen. Try Elm Elm zum (online) ausprobieren.

In dieser Revision kitzelte unser Gast Philipp Kühn (Webseite, Github, Twitter), seines Zeichens Gründer von Ueberdosis und Scrumpy, unsere Nerven mit den neuesten Gruselgeschichten aus der WYSIWYG-Krypta und erzählte uns alles über sein eigenes WYSIWYG-Werk Tiptap. Unser Sponsor Storyblok ist ein headless CMS, das die Grenze zwischen einem traditionellen CMS und einem Pagebuilder sprengt. Das Verwalten digitaler Inhalte mit einem CMS kann eine schwierige Aufgabe sein. Ohne eine visuelle Vorschau arbeiten Redakteure oft blind vor sich hin und benötigen selbst für einfache Änderungen Anweisungen. Storyblok bietet die Benutzererfahrung eines Pagebuilders mit einer modernen, vollständig API-basierten Architektur. Das gibt dem Entwickler die Freiheit bei der Wahl der Technologie und dem Editor eine selbsterklärende und intuitive Oberfläche. Du kannst mehr über Storyblok lesen und ihren kostenlosen Plan ausprobieren, sie auf Twitter oder in ihrem Live-Chat erreichen. Schaunotizen [00:03:20] WYSIWYG Wir beginnen mir einer Bestandsaufnahme: das olle HTML-Standard-Attribut contenteditable ist noch immer so gruselig wie es in der Kreidezeit bereits war uns seine etablierten Nutzer CKEditor und TinyMCE sind ebenso solide wie angestaubt. Leider führen die diversen Alternativen wie der Medium Editor und Quill auf der Haben-Seite kein „solide“ zu Felde, sondern glänzen eher durch Bugs (Medium Editor) und Einschränkungen (Qill). Solidität wäre aber eine der Kern-Anforderungen einer modernen WYSIWYG-Lösung, zusammen mit stetiger Weiterentwicklung (wg. vieler Edge Cases), extremer Anpassbarkeit des UI sowie der Unterstützung dynamischer Inhalte (z.b. @username-Referenzen in Text). Die heute gängige Grundlage eines jeden WYSIWYG-Editors mit Unterstützung für die genannten Features ist ProseMirror aus der Feder von Marijn Haverbeke (Webseite, Github, Twitter), das eher ein Editor-Toolkit als ein WYSIWYG-Editor ist. ProseMirror ist, anders als CodeMirror, sehr lowlevelig und sogleich verlieren wir uns in diversen Details. Damit sich aber nicht jeder Entwickler in Details verlieren muss, hat Philipp TipTap entwickelt, einen CodeMirror-basierten WYSIWYG-Baukausten für VueJS. Tiptap ist highleveliger als Code Mirror und renderless, was wir ausgiebig bequatschen, ebenso wie Collaboration-Features, das junge, knackige Vue und sein Ökosystem und contenteditable 2.0 als mögliches neues (standardbasierte) Fundament für die WYSIWYG-Editoren von morgen.