Working Draft

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

Spenden für Soundqualität!

Unsere Aufnahmen werden optimiert mit Auphonic.
Dort könnt Ihr uns Processing-Time kaufen.

Alternativ findet Ihr uns jetzt auch auf Patreon:

Become a Patron!

Ihr sucht neue Kollegen? 🤔 Wir suchen Sponsoren!

Als Podcast versuchen wir die Qualität der Aufnahmen hoch zu halten. Dafür verwenden wir Equipment und Tools, die nicht kostenlos sind. Und jede Folge kostet Zeit: Aufnehmen, Schneiden und Shownotes schreiben, Gäste und Termine koordinieren.

Mit rund 15.000 Downloads pro Folge im Schnitt haben wir auch Herausforderungen im Hosting zu bewältigen.

Um diese Kosten decken zu können, suchen wir Sponsoren. Wir glauben, dass unser Podcast eine gute Plattform ist, um darüber gleichgesinnte Programmierkollegen als Verstärkung für Euer Team zu finden. Wenn Ihr das auch so seht, dann sprecht doch mal mit Euren Chefs. Bei Interesse, kontaktiert uns per E-Mail: sponsoring@workingdraft.de.

Revision 412: Veröffentlichung von JS-Libraries

11. Februar 2020 | Keine Kommentare

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.

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.

Flattr this!

Revision 411: Web Animations

6. Februar 2020 | Keine Kommentare

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

Flattr this!

Revision 410: Cliqz Browser and Search Engine

28. Januar 2020 | 1 Kommentar


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!

Flattr this!

Revision 409: Style Containment und Display Lock API

21. Januar 2020 | Keine Kommentare

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.

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.

Flattr this!

Revision 408: Ember.js

14. Januar 2020 | Keine Kommentare

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!

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.

Flattr this!

Revision 407: Micro Frontends mit Project Mosaic

7. Januar 2020 | Keine Kommentare

Nachdem alle Co-Hosts der Reihe nach, aufgrund von verschiedenen dringenden Gründen, ausfielen, interviewte Kahlil im Alleingang Vanessa Böhnert zum Thema Micro Frontends.

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.

Flattr this!

Special Edition: State of JavaScript 2019

2. Januar 2020 | 3 Kommentare

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.

Flattr this!

Revision 406: Standort Linz – ScriptConf

31. Dezember 2019 | Keine Kommentare

Kahlil, Hans und Peter erfahren in dieser Revison von Stefan alles über die ScriptConf, die JavaScript-Konferenz in Österreichs Tech-Hub Linz.

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.

Flattr this!

Revision 405: Rollup.js

22. Dezember 2019 | Kommentare deaktiviert für 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.

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.)

Flattr this!

Revision 404: Bleeding-Edge JavaScript

18. Dezember 2019 | Kommentare deaktiviert für Revision 404: Bleeding-Edge JavaScript

This revision we had the pleasure to sit down with Christophe Porteneuve (@porteneuve) who is based in Paris. Christophe made his entry to web development almost twenty-five years ago and is well known in today’s JavaScript scene since back in the days when he became core team member of prototype.js (who still remmebers this?). Nowadays he runs the consultancy & training company Delicious Insights together with a pertner where they offer (Node-)JS, Tooling and Git Workshops. On top of that Christophe can usually be found MC’ing the dotJS Conferences.

Shownotes

[00:04:14] Bleeding-Edge JavaScript
In our fireside-chat we talked about old and new JavaScript additions, which we find very helpful, if not even mind-blowing. We started off with an older but underappreciated feature, ES Proxies, as Christophe just recently held a talk about those at the Fronteers Conference (Slides). Proxies allow to watch objects like in immer.js or like in Vue.js 3, or build traps in order to instrument property access, or to do meta-programming.

Afterwards we talked about how new features find their way into JavaScript, what ECMA is, what JavaScript, what TC-39 and the different „Stages“ means and why JavaScript today is still a trademark of Oracle in the United States.

And of course we also talked about these features:

This time we have two links for you:

Delicious Insights Screencasts
We can really recommend Christophe’s screencasts. Right now there are four available for you to watch:

  • Git Core Concepts (this one is free)
  • “Git undo” or the art of rolling back
  • JavaScript: this is it (about the „this“ keyword)
  • Writing Modern Async JavaScript

The later three ones are not free, but as listeners of this podcast, you get a 30% discount until January 15th, 2020, with this link: screencasts.delicious-insights.com/?coupon=WORKINGDRAFT-30-OFF.

Think About! Conference 2020
The second thing, we’d like to promote is next year’s iteration of the Think About! Conference. The inaugural 2-day-conference happened this year in Cologne and not only were we blown away but the concept and contents, we also happened to do five super interesting interviews there: workingdraft.de/category/on-tour/thinkabout19/. Ticket sales for next year opened and there are still Early Bird Tickets left, for EUR 380 instead of the regular EUR 500.

Flattr this!