Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

February 18, 2020 Revision 413: Svelte
Das Warten hat endlich ein Ende: Nach mehreren Monaten der intensiven Suche — fast schon ein Running Gag! — ist nun jemand mit fundamentalem Svelte-Wissen ins virtuelle Studio reingeschneit: Vanessa Böhner, die treuen Hörern mit ihren versierten Einblicken zu Vue, Frontend-Testing und Micro Frontends bekannt sein dürfte, hat sich im Zuge des Relaunchs ihrer Seite intensiv mit Svelte auseinander gesetzt. Noch intensiver, nachdem die Einladung zum Podcast kam. Podcast Driven Development, sozusagen. In gewohnter Qualität und Genauigkeit gibt uns Vanessa den Svelte Deep Dive, beantwortet alle Fragen zu Framework, Framework-Geschichte und Use Cases.
Unser Sponsor
Storyblok is a Headless Content Management System that provides developers with all the flexibility they need to build reliable and fast websites whilst giving content creators with no coding skills the ability to edit content independently of the developer. Thanks to the headless approach your content can not only be used for one website, which is the case if you use a monolithic CMS like WordPress. Storyblok empowers you to use your content on iOS and Android apps, as well as any other platform of choice (IoT, smartwatch, AR/VR) through Application Programming Interfaces (“APIs”).
You can read more about Storyblok and use their free plan, reach them on Twitter or in their live chat.
Schaunotizen
[00:01:32] Svelte
Svelte ist anders. Die Rückkehr von „write less, do more“, und exklusiv compiler-orientiert. Das Ergebnis: Wenig Framework, hohe Developer Ergonomie. Durch schlaue Konventionen und dem Aufbrauch gewohnter Framework-Strukturen schafft es Svelte mit einer mächtigen Template Sprache und 0 Boilerplate Code echt Spaß zu machen, und erstaunlich wenig Code zu produzieren. Das Hello World überzeugt, aber auch im späteren Verlauf zeigt Svelte, dass es mit allen Wassern gewaschen ist. Für moderne JAMstack Architekturen gibt es mit Sapper ein auf Svelte basierte Next.js Äquivalent, Styling ist first class citizen und ebenso flott. Wir sind begeistert wie schon lange nicht mehr, und dass, obwohl es noch keinen TypeScript Support gibt. Für weitere Lektüre empfiehlt sich der Svelte Blog, ein Realworld Beispiel, sowie Benchmarks und eine kritische Auseinandersetzung im Vergleich zu anderen Frameworks. Dass Svelte sauflott ist, sieht man auch in sehr anschaulich in diesem Tweet
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 12 min
February 11, 2020 Revision 412: Veröffentlichung von JS-Libraries
Hans und Peter hatten diesmal das Vergnügen, sich mit dem langjährigen Podcast-Hörer Tobias Barth (freischaffender Frontend- und gelegentlicher Node-Entwickler, zu finden in Web, Twitter und auf Dev.to) über die Prozesse und Tools rund um die Veröffentlichung von JavaScript-Paketen austauschen zu dürfen.
Unser Sponsor
Hier kannst du mehr über IONOS erfahren.
Schaunotizen
[00:02:45] Veröffentlichung von Libraries
Die Perspektiven eines kleinen Startups (Peter und Hans mit Warhol.io) und Tobias (MediaMarkt/Saturn) bzgl. Library-Entwicklung und -Veröffentlichung prallen aufeinander! Neben offensichtlichen Fragen wie Dependencies vs. Selbstschreiben (vgl. Revision 397 zu Preact) geht auch um das Handwerk des NPM-Paket-Veröffentlichens mit Semver (bevorzugt mit automatischen Versionsnummern via standard-version und/oder semantic-release) und dem publish-Kommando. Die kniffligen Entscheidungen im Library-Build-Prozess nehmen besonderes Gewicht ein: wie genau passen TypeScript, Babel, Rollup (vgl. Revision 405), Webpack und ähnliche Tools in den Prozess? Was bewirken die Felder main, browser, module und types in der package.json? Am Ende dürfen Verweise auf ein paar Alltags-Helfer nicht fehlen, allen voran das Link-Kommendo (gibt es für NPM wie auch für yarn), die Peer Dependencies, das Dedupe-Kommando und allgemeine Tools wie Prettier, ESLint, Travis, Circle CI, Greenkeeper und Dependabot.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 4 min
February 06, 2020 Revision 411: Web Animations
Schepp und Stefan bekommen heute Verstärkung von Lisi Linhart, ihres Zeichens Webentwicklerin und Dozentin an der FH Salzburg, die uns einen ausführlichen und genauen Rundumschlag in Sachen Web Animation gibt.
Schaunotizen
[00:00:27] Web Animations
Die Wege im Web zu animieren sind vielseitig. Wir beginnen unsere Reise bei den Einstiegsdrogen wie CSS Transitions und Animations, die zwar limitiert, aber doch für viele Dinge schön ausreichend sind. Den weiteren Weg gehen wir zur Web Animations API, sehr ählich zu CSS Animations, aber in JavaScript und deshalb über den property-Animationen erhaben. Wem das nicht ausreicht, kann sich in die weite Welt der SVG und Canvas Animationen trauen, und zahlreiche Tools wie Greensock und ähnliches ausprobieren. Zum Abschluß gehen wir in Richtung Animations-Tools, Export-Möglichkeiten, das CSS Houdini Animation Worklet und geben zahlreiche Resourcen und Erfahrungsberichte. Links gibt’s übrigens eine Menge, deswegen bitte schnell in die nächste Sektion um den zahlreichen Namen zu folgen!
Links
Pratical Web Animation – Script’20
Lisis Vortrag auf der Script’19. Ein prima Überblick mit zahlreichen Beispielen
Awesome Web Animation
Das Infoportal für alle, die animieren wollen. Bücher, Artikel, Tutorials, Tools
Keyframe.rs
Livestreams von Animationsexperten
CSS Animations vs Web Animations API
Wann das eine, wann das andere?
GSAP Codepen Collection
Zahlreiche Pens zu dem auf Greensock basierten Animations-Plugin
GSAP 3
Was kann GSAP 3 eigentlich?
Houdini’s Animation Worklet
Detaillierte Beschreibung auf Googles Webdeveloper Info-Seiten
Tween.js
Tweening in JavaScript
Fabric.js
Eine Zeichenbibliothek für Canvas
Pixel.js
Eine Game Engine für Canvas
Phaser
Noch ein Gaming Framework
Scroll-linked Animation
Ein Proposal zur Animations-API die auf Scroll Offsets reagiert
Spirit
Ein Timeline-Tool für Web Animationen
Tumult Hype
Noch ein Animations-Tool
Lottie
After Effect Animationen exportieren, mobile und im Web verwenden!
Uni Salzburg auf der OTS Conf
Lisis Fachhochschule gut präsentiert
Der Bauer
Vor 20 Jahren im Browser, jetzt als Artefakt auf YouTube
Barcamp: The next Wek
2x im Jahr ein fesches, web-affines Barcamp kurz vor dem wundervollen Salzburg
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr
January 28, 2020 Revision 410: Cliqz Browser and Search Engine

In München steht ein Softwarehaus — Eins, Zwei, Browser! ?
Die Bringen einen Browser raus — Eins, Zwei, Browser ?
Mit einer Suchmaschine dran — Eins, Zwei, Browser ?
Die alles kann, was Google kann
Doch an die Daten kommt kein andrer ran
Der Browser ist auch superschnell
Nur wie ist das Geschäftsmodell? ? ? ?
For all our English listeners (and everybody else who is scratching their head due to their lack of knowledge in Bavarian folklore — who could blame you?!): Welcome to the most recent revision of Working Draft, where Krzysztof Modras is telling us how to build your own browser based on Firefox. He also answers the most burning question: why does Europe need its own search engine.
Show Notes
[00:01:00] Cliqz
Cliqz is a browser with an integrated search engine. It shall deliver the same user experience as Google’s ecosystem, but with a strong focus on privacy. Cliqz is based on Firefox, and Krzysztof is telling us how to contribute to the Firefox project, how to write your own UI using web technologies, and what challenges you have to face. We also take a good deal to talk about privacy. Why a European privacy-first search engine matters and what trackers and third-party spyware can do to you. We also referenced the iOS version of their browser as well as their very thorough and interesting to read tech blog. Enjoy!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 6 min
January 21, 2020 Revision 409: Style Containment und Display Lock API
Leise rendert der Schnee bei dieser in der Vorweihnachtszeit aufgenommenen Revision … und damit er das auch halbwegs zügig macht, sprechen Schepp und Peter über zwei Features, die Webentwicklern bessere Kontrolle über das Browser-Rendering geben.
Unser Sponsor
ABOUT YOU ist eines der am schnellsten wachsenden E-Commerce-Unternehmen in Europa mit Hauptsitz in Hamburg. Derzeit ist der Fashion Online Shop in zehn europäischen Märkten vertreten. Die Plattform verarbeitet täglich mehr als 300 Millionen API-Aufrufe und hat insgesamt 15 Millionen aktive Nutzer.
Da das Unternehmen weiterhin schnell wächst, ist ABOUT YOU immer auf der Suche nach neuen, motivierten Talenten. Derzeit sind z.B. Full Stack Developer, Frontend Developer, Dart / Flutter Developer, Quality Assurance Engineer, Project Manager und andere aufregende Führungspositionen frei.
Hört sich spannend an? Bewirb Dich jetzt unter aboutyou.com/bewerben.
Schaunotizen
[00:01:40] CSS Containment
CSS Containment ist mittlerweile ein solider Webstandard (fast jedenfalls) sowie vergleichsweise gut unterstützt und vielerorts gut erklärt, aber eine Auffrischung lohnt sich. Schepp und Peter sprechen über die contain-Eigenschaft und ihre diversen Werte, display:contents (Draft, CanIUse) und position:sticky
[00:25:12] Display Locking
Es gibt einen Entwurf für eine API, die viele Performance-Use-Cases für Intersection Observers abdeckt und dabei noch besser ist! Wir vergleichen das vorgeschlagene rendersubtree-Attribut mit display: none (und klassischem Lazy Loading) sowie Origin Trials mit Vendor Prefixes. Am Ende phantasieren wir ein wenig über einen Polyfill für rendersubtree und eine Layout-Performance-Test-Seite im Stile von JSPerf.
[00:52:44] Keine Schaunotizen
Videos der Performance.now()
Schepp war auf der jüngsten Installation der Web-Performance-Konferenz und empfiehlt zahlreiche Talks.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
56 min
January 14, 2020 Revision 408: Ember.js
Hans und Peter lassen sich von Jessica Jordan (Web, Twitter), ihres Zeichens Software-Engineer bei simplabs und Autorin für The Ember Times alles zum unterschätzen JavaScript-Framework Ember.js erzählen!
Unser Sponsor
Hier kannst du mehr über IONOS erfahren.
Schaunotizen
[00:00:00] Ember.js
Wir lernen wirklich alles über Ember, das sich als ein Framework für komplexe Web Apps beschreiben lässt, bei dem vieles Out of the Box mitgeliefert wird. Von den Anfängen (Talk zu Embers jüngerer Geschichte von Katie Gengler) mit Tilde, Yehuda Katz und Tom Dale bis hin zur jüngsten Octane Editon des Framworks lassen wir nichts aus. Es geht um Entwicklung, Community, Dokumentation, das Ember Tearning Team, The Ember Times, Core-Features und Third-Party-Addons (wie ember-concurrency, EmberCLI Mirage und ember-cli-materialize). Außerdem geht es natürlich um technische Grundkonzepte wie die Struktur einer Ember-App, Routes, die Umsetzung des MVC-Konzepts, Ember Data, Scaffolding, Embers Template-Sprache Handlebars (speziell Helpers und die neue Angle Bracket Syntax nebst Polyfill) Glimmer.js und TypeScript-Support. Am Ende dürfen die Veranstaltungshinweise auf die EmberConf, das EmberFest und das Ember-Meetup Berlin nicht fehlen.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 20 min
January 07, 2020 Revision 407: Micro Frontends mit Project Mosaic
Nachdem alle Co-Hosts der Reihe nach, aufgrund von verschiedenen dringenden Gründen, ausfielen, interviewte Kahlil im Alleingang Vanessa Otto zum Thema Micro Frontends.
Unser Sponsor
Storyblok is a Headless Content Management System that provides developers with all the flexibility they need to build reliable and fast websites whilst giving content creators with no coding skills the ability to edit content independently of the developer. Thanks to the headless approach your content can not only be used for one website, which is the case if you use a monolithic CMS like WordPress. Storyblok empowers you to use your content on iOS and Android apps, as well as any other platform of choice (IoT, smartwatch, AR/VR) through Application Programming Interfaces (“APIs”).You can read more about Storyblok and use their free plan, reach them on Twitter or in their live chat.
Schaunotizen
[00:03:06] Project Mosaic, aka Mosaic 9 & Micro-Frontends
Vanessa erzählt uns kurz was sie mit Mosaic 9 zu tun hat. Danach geht es erstmal darum was Micro-Frontends überhaupt sind, in welchem Fall man diese einsetzen möchte und wie man das machen kann. Ein Mosaic 9 Crash-Kurs kommt dabei natürlich nicht zu kurz. Vanessa erklärt uns, wie sie die verschiedenen Software Projekte aus denen Mosaic 9 besteht, selber bei der Arbeit einsetzt.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 30 min
January 02, 2020 Special Edition: State of JavaScript 2019
Zwischen den Jahren plauderten Hans und Peter außerhalb der Reihe über die Umfrageergebnisse der 2019er-Edition der State of JS.
Schaunotizen
[00:01:15] The State of JavaScript 2019
Von Syntax-Features bis hin zum Eindruck der Gesamtsituation lassen wir fast keinen Aspekt der Umfrage undiskutiert! Neben den Ergebnssen an sich geht es auch um die Front-End Performance Checklist 2019, Async Iterators/Generators (Peters JS-Feature des Jahres 2019, als Ersatz für viele Use Cases von RxJS), Decorators (von Hans in TypeORM fleißig verwendet) Smoosh-Gate, LeftPad-Gate sowie die Working-Draft-Revisionen 404 (Bleeding-Edge JavaScript), 396 (Elm und F#) und 403 (Meta-Frameworks). Natürlich kommen wir auch nicht umhin, gelegentlich auf Warhol zu verweisen.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
2 hr 11 min
December 31, 2019 Revision 406: Standort Linz – ScriptConf
Kahlil, Hans und Peter erfahren in dieser Revison von Stefan alles über die ScriptConf, die JavaScript-Konferenz in Österreichs Tech-Hub Linz.
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.
Besucht am besten gleich den neuen smarten Wunschjob-Assistenten, mit dem es ein leichtes ist JavaScript und TypeScript-Jobs zu finden.
Schaunotizen
[00:01:50] ScriptConf
Stefan erzählt die Geschichte der ScriptConf, beginnend mit der ersten Iteration von 2017, die Stefan und Sebastian nach einem Treffen in einer belgischen Bierbar mehr oder minder spontan anschoben. Als Inspirationsquellen für die ScriptConf dienten neben der Beyond Tellerrand auch die Nightlybuild (seinerzeit mitorganisiert von Hans). Nach einem Rückblick auf die großen Erfolge und kleineren Fehler der Vergangenheit berichtet Stefan von der Planung (dem Quasi-Neustart) für die jüngste Iteration, während Hans Eindrücke aus der Teilnehmer-Perspektive beisteuert. Neben einem Auftritt von Webtech-Tausendsassa Vitaly Friedman bot die ScriptConf den hundertsten Tak von CSS-Überguru Harry Roberts – eine schöne Gelegenheit zu feiern, haben sich Stefan und Harry bei Harrys erstem Talk ja kennengelernt!
Wir kommen nicht umhin festzustellen, dass das Techboom-Land Österreich zur Zeit vor Konferenzen geradezu explodiert: neben der Webclerks-Konferenz, der tsconf.eu und SoCraTes Austria ist hier vor allem die DevOne zu nennen, bei der DynaTrace und damit auch Stefan ihre Finger im Spiel haben. Generell der Standort Linz scheint für viele Software-Entwicklungs-Firmen interessant zu sein. Stefan hat ein paar Ideen, warum das so ist.
Nach einem kurzen Talk-Review der ScriptConf III (von der mittlerweile alle Videos hochgeladen wurden) enden wir mit einem kleinen Exkurs über Software-Entwicklungs-Trend-Zyklen, wozu Kahlil mit Why Isn’t Functional Programming the Norm und Peter mit Object-Oriented Programming is Bad zwei Unterschiedliche Erklär-Ansätze zur Dominanz von Enterprise-OOP zu Felde führen. Und wir decken auf, dass Stefan die tsconf.eu eigentlich nur angeschoben hat, um TypeScript-Erfinder Anders Hejlsberg nach Linz zu lotsen. Aber pssst!
[00:59:40] Keine Schaunotizen
Videos von der ScriptConf III
Alle Talks auf YouTube.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
59 min
December 22, 2019 Revision 405: Rollup.js
Maintainer Lukas Taegert-Atkinson (Twitter, Github) gab uns einen tiefen Einblick in das Was, Warum und Wie des JavaScript-Modul-Bundlers Rollup.js – nicht nur was die Technik angeht, sondern auch mit Fokus auf das Dasein als Open-Source-Maintainer.
Unser Sponsor
ABOUT YOU ist eines der am schnellsten wachsenden E-Commerce-Unternehmen in Europa mit Hauptsitz in Hamburg. Derzeit ist der Fashion Online Shop in zehn europäischen Märkten vertreten. Die Plattform verarbeitet täglich mehr als 300 Millionen API-Aufrufe und hat insgesamt 15 Millionen aktive Nutzer.
Da das Unternehmen weiterhin schnell wächst, ist ABOUT YOU immer auf der Suche nach neuen, motivierten Talenten. Derzeit sind z.B. Full Stack Developer, Frontend Developer, Dart / Flutter Developer, Quality Assurance Engineer, Project Manager und andere aufregende Führungspositionen frei.
Hört sich spannend an? Bewirb Dich jetzt unter aboutyou.com/bewerben.
Schaunotizen
[00:06:03] Rollup.js
Lukas war einst Mathematiker, dann Entwickler … und bekam 2017 nach nur 4 Pull Requests vom Rollup-Ursprungs-Erfinder Rich Harris die Admin-Rechte des Github-Repositories übergeholfen. Im Podcast erzählt Lukas nicht nur, was es mit Rollup technischerseits auf sich hat (es ist ein Modul-Bundler mit Tree Shaking), sondern zeigt auch die Verbindungen zu SystemJS, RequireJS, Browserify und natürlich Webpack auf. Mit letzterem wird Rollup gern verglichen, obwohl die Ähnlichkeiten doch recht überschaubar sind. Wir erfahren alles über die Mechanik hinter Tree Shaking (auch innerhalb von Modulen), den Support von CommonJS und Plugins in Rollup (inklusive Exkursen in die Details der Plugin-Entwicklung) und die Unterstützung von Rollup für CSS, StencilJS, HMR und inkrementelle Rebuilds. Natürlich kommen wir nicht umhin, Rollup (im Rahmen der Möglichkeiten) mit Projekten wie Webpack Parcel und Nollup zu vergleichen. Am Ende geht es natürlich um Pläne für die Rollup-Weiterentwicklung und das Los des Open-Source-Maintainers, der Rollup als ein Nebenher-Projekt pflegt … und natürlich jederzeit auf der Suche nach fleißigen Helfern ist!
[01:00:17] Keine Schaunotizen
Bandcamp von Baldower
Shameless plug der Bandcamp-Page des Konferez-DJs Baldower (bekannt von der beyond tellerrand, Nightly Build, Smashing Conf, Scriptconf usw.)
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 4 min