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 416: TypeScript 3.8

17. März 2020 | Kommentare deaktiviert für Revision 416: TypeScript 3.8

Kinder, wie die Zeit vergeht! Erst in der Revision 402 haben wir TypeScript 3.7 analysiert und nun steht auch schon Version 3.8 vor der Tür. Peter und Stefan nehmen sich dieses Themas (und weitläufig abschweifend auch diverser anderer Themen) an.

Schaunotizen

[00:00:40] TypeScript 3.8
Die neue (Non-SemVer) Version von TypeScript bietet diverse Neuheiten, angefangen mit Type-Only Imports and Export. Diese sind vor allem für Angular-Services nützlich, Stefan erwartet aber, wie schon bei Assertion Signatures, auch andere Use Cases. Der Support von Private Class Fields haut uns nicht vom Sockel, die neue Export-NS-From-Syntax gefällt da schon eher. Über Top-Level-Await schweifen wir zu den Herausforderugen für die Autoren von JS-Tooling ab, das manchmal Blüten wie die .mjs-Dateierweiterung treibt. Außerdem geht noch um Optional Chaining, Sinn, Zweck und Nutzer von JSDoc, watchOptions und ts-node, Incremental Checking sowie Stricter Assignability Checks to Unions with Index Signatures. Was immer das auch sei mag!

Flattr this!

Revision 414: Warhol

3. März 2020 | Kommentare deaktiviert für Revision 414: Warhol

Diese Revision fragt Schepp das dynamische Duo aus Hans und Peter über ihr SAAS-Projekt Warhol aus.

Schaunotizen

[00:00:30] Warhol
Hans und Peter plaudern und über Sinn, Zweck und Umsetzung ihres Tools, das aus Pattern Libraries Test für Webdesign generiert (Demo-Video). Wir sprechen über Sinn und Zweck von Pattern Libraries, vergleichen Warhol mit SiteEffect sowie Screenshot-Tools für Visual Regression Testing, besprechen mögliche Use Cases für automatisiertes Design-Testing und kommen auch auf Details wie Warhols Browser-Extension und Warhol’s Law zu sprechen.

Flattr this!

Revision 415: Werbung und Tracker domptieren

25. Februar 2020 | Kommentare deaktiviert für Revision 415: Werbung und Tracker domptieren

In diese Revision dreht sich alles um Werbung und Tracking Scripte. Denn Hans interviewte Schepp anlässlich seines Blogposts zu dem Thema aus Dezember.

Schaunotizen

[00:02:26] Werbung und Tracker domptieren
Zunächst erklärt Schepp, wie Werbung heutzutage in Webseiten gelangen, nämlich vollautomatisiert, und wie wenig Kontrolle man dadurch über die tatsächliche Auswahl hat.

Dann reden wir über den Konflikt von Werbung mit einem echten responsiven Ansatz, und Lösungsmöglichkeiten.

Werbemittel sind meist auch nicht performant programmiert, sondern eher hemdsärmelig. Deshalb findet man darin auch oft das antike und render-blockierende document.write. Schepp hat eine Ansatz mit position: sticky hilft hier aus der Misere.

Sogenannte Wolkenkratzer- oder Hintergrundbild-Anzeigen neigen dazu, dafür zu sorgen, dass sie immer sichtbar sind. Das kann zur Folge haben, dass sie manchmal wichtige UI wie den Webseiten-Kopf oder das Off-Canvas-Menü abdecken und diese Elemente dadurch unbedienbar werden. Der Trick hier ist, die Werbung in einem Container einzufangen, und diesen dann geschickt in den restlichen Stacking Context einzubinden.

Zu guter Letzt entpuppen sich Werbeanzeigen manchmal als Trojanische Pferde, deren eigentliches Ziel es ist, unbemerkt sensible Daten der User zu stehlen. Dafür lesen sie vorhandene, oder heimlich eingefügte Inputs aus. Dem hat Schepp einen Riegel vorgeschoben, indem er den Prototypen des Input Elements gepatcht hat.

Flattr this!

Revision 413: Svelte

18. Februar 2020 | Kommentare deaktiviert für 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.

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

Flattr this!

Revision 412: Veröffentlichung von JS-Libraries

11. Februar 2020 | Kommentare deaktiviert für 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.

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 | Kommentare deaktiviert für 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

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

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 | Kommentare deaktiviert für 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!

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 | Kommentare deaktiviert für 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 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!