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 410: Cliqz Browser and Search Engine

28. Januar 2020 | Keine Kommentare


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 | Keine Kommentare

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 | Keine Kommentare

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!

Revision 403: Meta-Frameworks

10. Dezember 2019 | 8 Kommentare

Schepp, Kahlil und Hans quatschen über APIs, die sich von Frameworks-Features zu Browser-APIs entwickeln.

Schaunotizen

[00:01:39] Meta-Frameworks
Kahlil hat auf der React Rally einen berichtenswerten Talk von Nicole Sullivan alias @stubbornella aufgeschnappt. Thema ist die Zusammenarbeit des Chrome-Teams mit diversen Framework-Entwicklern, bei der das Ziel ist, den Browser zu einer besseren Plattform für die diversen Web-Frameworks zu machen. Eine wichtiges Takeaway aus dem Talk ist die offizielle Google-Empfehlung, Meta-Frameworks wie Next.js (ein Wrapper um React) und Nuxt.js (ein Wrapper um Vue) einzusetzen um Performance-Best-Practices wie SSR auf Framework-Ebene zu etablieren. Aus der Zusammenarbeit zwischen React und Google sind unter anderem die Main thread Scheduling APIs und isInputPending in Chrome zurückgeflossen. Wir quatschen über 7 Principles of Rich Web Applications, create-react-app, Frameworks allgemein, Server-Side Rendering, HTML5 Boilerplate, Ember Fastboot, Code Splitting, CSS Modules (nicht das JS-Projekt), Web Components, GatsbyJS, Uberspace und mögliche Gründe gegen den Einsatz von Meta-Frameworks.

Flattr this!

Revision 402: TypeScript 3.7

19. November 2019 | 3 Kommentare

Hans, Schepp und Stefan analysieren ein Best-Of der kommenden TypeScript Version 3.7.

Schaunotizen

[00:00:59] TypeScript 3.7
Mittlerweile kommen ausführliche TypeScript-Revisionen halbjährlich beim Working Draft. Vor ca. einem Jahr (und 50 Revisionen) haben sich Hans, Peter und Stefan ausführlich über Version 3.0 unterhalten. Laut Hans sogar episch! Ein halbes Jahr und 30 Revisionen später gab’s eine Einführung in TypeScript im Backend. Weitere 20 Revisionen später kommen nun eine Reihe fantastischer Features in Version 3.7 an: Assertion signatures, nullish coalescing, optional chaining, recursive types, top-level await und ES private fields. Eine ganze Reihe an Dingen, von der sich alle recht begeistert zeigen. Wir geben Infos, Hintergrund, und streuen noch einige eigene TypeScript Erfahrungen mit ein. Mittlerweile ist es nämlich bei uns allen angekommen. Und wird wohl auch nicht mehr so schnell wegkommen.

Keine Schaunotizen

Fettblog
Stefans Blog hat sich zur TypeScript-Ressource verwandelt.
Understanding Type Predicates
Neben Stefans Artikel zum Thema etwas aktuelleres auf Dev.to.

Flattr this!