Working Draft

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

Spenden für Soundqualität!

Unsere Aufnahmen werden optimiert mit Auphonic.
Flattern oder direkt bei Auphonic spenden.

Sponsoren gesucht!

Als Podcast versuchen wir die Qualität der Aufnahmen hoch zu halten. Dafür verwenden wir Tools, die nicht kostenlos sind. Auch unser Aufnahme-Equipment kostet Geld.

Mit rund 15.000 Downloads pro Folge im Schnitt haben wir Herausforderungen im Hosting zu bewältigen, vor allem der Traffic ist recht hoch.

Um diese Kosten decken zu können, suchen wir Sponsoren. Wenn ihr unseren Podcast gut findest, sprecht mit euren Chefs. Bei Interesse, kontaktiert uns per E-Mail: sponsoring@workingdraft.de.

Revision 314: DDD, CQRS und WTF

20. Oktober 2017 | 1 Kommentar

Gast Golo Roden (Twitter, Github, Webseite) erleuchtet in dieser Revision Hans und Peter in Sachen Domain Driven Design sowie Command and Query Responsibility Seggregation. Aufgrund technischer Schwierigkeiten bei der Aufnahme, gibt es diesmal nur unseren Gast in hoher Audioqualität.

Schaunotizen

[00:01:21] DDD, CQRS, WTF
DDD (Domain Driven Design) ist ein Pattern zum Übersetzen von fachlichen Anforderungen in Software und versteht sich als Gegenentwurf zu CRUD. Anhand des Beispiels einer Urlaubsantragsverwaltung erklärt Golo, wie DDD funktioniert. Mit dem Label CQRS wird die Verteilung der Architektur auf zwei Datenbanken(eine für den Store, eine für denormalisierte View-Daten) beschrieben. Unterschiedliche Datenbanksysteme kommen für unterschiedliche Anforderungen (z.B. Postgres oder Apache Kafka als Event Store, MongoDB für Snapshots) zum Einsatz. Golo hat mit Wolkenkit auch ein eigenes Dual License-DDD-Framework (Docs, Slack).

Revision 313: Origin Trials

13. Oktober 2017 | Keine Kommentare

In dieser eher kurz geratenen Episode schauen Hans und Schepp sich das recht neue Konzept der Origin Trials an.

[00:00:16] News

Yarn 1.0
Yarn 1.0 ist raus und bietet neuerdings Workspaces.

Schaunotizen

[00:00:40] Origin Trials
Mit den Origin Trials setzt (zunächst) das Chrome-Team eine Idee um, über die wir vor zwei Jahren in einer Folge mit Jacob Rossi sprachen. Das Problem, das die Origin Trials lösen wollen, ist dass es für Browserhersteller bislang schwierig war, neue Features in der Breite zu testen, ohne dass Entwickler sie in ihrer unfertigen Form aufgreifen und damit Fakten für die Zukunft schaffen. Der Trend geht ja schon einige Zeit weg von vendor-prefixten Vorabversionen hin zu einem Feature-Flag-System. Das Problem am Feature-Flag-System ist jedoch, dass nur die Entwickler selbst etwas testen können, sie das Feature aber nicht an ihren Usern testen können. Das geht nun mit den Origin Trials. Bei diesen beantragt ein Seitenbesitzer, dass für die Besucher seiner Domain ein bestimmtes, derzeit verfügbares Vorab-Feature im Browser für eine begrenzte Zeit freigeschaltet wird. Das Feature kann also in der Breite getestet werden,
ohne sich dauerhaft festzusetzen.

Revision 312: Zusammenarbeit von Designern und Entwicklern

15. September 2017 | 1 Kommentar

Hans und Peter durften diesmal David Hellmann und Justin Schueler auf der Podcast-Gästeliste begrüßen, mit denen sie über die ewig komplizierte Zusammenarbeit von Designern und Entwicklern sprachen.

Schaunotizen

[00:01:29] Designer sind vom Mars, Entwickler von der Venus
Unter dem Groben Thema „Zusammenarbeit von Devs und Designern“ geht es rund um alle denkbaren Probleme und Vorgehensweisen, vom althergebrachten Photoshop-in-CSS-übersetzen bis hin zu agiler Entwicklung mit Design und Konzeption. Als empfehlenswerte Software-Tools empfehlen unsere Gäste natürlich Sketch, Zeplin, Invision und Abstract. Am Ende sprechen wir auch kurz über den Kampf gegen Strukturen und etablierte, alte Prozesse, den jeder geneigte Freund der agilen Methoden nur zu gut kennt.

[00:55:20] Keine Schaunotizen

webdevs – der Podcast
Im webdevs Podcast wird in lockerer Runde über verschiedenste Themen aus Design und Development geschnackt.

Revision 311: CSS-Klassen und Binär-ASTs

13. September 2017 | Keine Kommentare

Stefan und Peter befassten sich diese Woche mit Theorie und Praxis von CSS-Klassen-Benennung und warfen einen Blick auf das geplante binäre JS-AST-Format.

Schaunotizen

[00:00:09] CSS Utility Classes and „Separation of Concerns“
Adam Wathan illustriert in einem Blogpost seine Reise durch diverse CSS-Klassen-Benennungs-Paradigmen und wir sind mit an Bord. In Phase 1 steht der Traum der „semantischen Klassen“ im Vordergrund (illustriert durch den guten alten CSS Zen Garden), Phase 2 dreht sich um BEM und die Behandlung von Klassen als CSS-HTML-Bridge und in Phase 3 endet der Autor bei allen Ernstes bei Atomic CSS. Wir halten uns mit Kritik an den diversen besonders extremistischen Paradigmen nicht zurück. Peter mag BEM (mit Ausnahmen), Stefan steht auf Scalable CSS mit Harry Roberts mit Inverted Triangle (ITCSS).
[00:35:44] Towards a JavaScript Binary AST
In aller Kürze werfen wir einem Blick auf das kommende binäre AST-Format (AST = Abstract Syntax Tree, vgl. Esprima) für JavaScript. Dieser verspricht besseres Minifying und vor allem schnelleres Parsing.

[00:57:16] Keine Schaunotizen

Font-size: An Unexpectedly Complex CSS Property
Ein kleiner Blick in den sehr tiefen Abgrund, den die CSS-Eigenschaft font-size darstellt.

Revision 310: Service Worker – Bericht aus der Praxis

8. September 2017 | 1 Kommentar

Weil Schepp sich in letzter Zeit auch mit Service Workern beschäftigt hat, und weil sowohl Microsoft als auch Apple an ihnen arbeiten, ließen Hans und Anselm sich von ihm ein paar Erfahrungen aus der Praxis berichten.

Schaunotizen

[00:00:14] Service Worker
Schepp berichtete, wir es Service Worker in erster Linie zur Steigerung der Ladezeiten, wie auch zur Offlinifizierung einsetzt. Nicht ohne sich dabei in einem asynchronen Script-Dschungel zu verstricken, dem man am besten mit async/await-Konstrukten entgegentritt. Hilfreich beim Einarbeiten in das Thema sind verschiedene Online-Tutorials, Howtos und Tools, als da wären:

[00:31:07] Keine Schaunotizen

You’re Offline
Max Böck beschäftigt sich als einer von wenigen mit der Frage, wie eine UI reagieren sollte, wenn man offline geht.
How many users resize their browser?
Zitat: „TL;DR: 2-3% of users resize their browser, and you should care.“
Performance and Resilience: Stress-Testing Third Parties
Harry Roberts erklärt, wie man die Auswirkungen von 3rd Party Scripten auf die eigene Webseite analysiert und quantifiziert, und wie man die eigene Seite gegen Ausfälle bei externen Anbietern abhärtet.

Revision 309: Kein Thema

2. September 2017 | Keine Kommentare

Themen? Wer braucht denn schon Themen!

Schaunotizen

[00:00:20] Kein Thema
Stefan, Schepp und (vor allem) Peter geben sich der freien Webtech-Assoziation hin und fordern allerlei. Unter anderem wünschen wir uns Ersatz für allerlei etablierte Tools, DOM-Diffing jenseits des Main-Threads und vieles andere. Zur Sprache kommen außerdem die ausgetüftelten Performance-Optimierungen von Lo-Dash

Revison 308: CSS mit Sven Wolfermann

7. August 2017 | Kommentare deaktiviert für Revison 308: CSS mit Sven Wolfermann

Von CSS-Guru Sven Wolfermann (Webseite, Twitter) ließen sich Hans und Peter erzählen, was denn modernes CSS so alles zu leisten im Stande ist.

Schaunotizen

[00:00:57] CSS-Features, die man heutzutage verwenden muss
Zu den Must-Haves im Jahr 2017 gehören ganz klar Flexbox, calc() und rem – wer hier noch zu den Oldschool-Alternativen Float-Layout, Kopfrechnen und em zurückgreifen will, braucht dafür sehr gute Gründe. Ebenfalls mittlerweile zu 100% im Browser-Mainstream angekommen sind background-position mit vier Werten, currentColor (v.a. zum Styling von SVG-Icons), user-select (noch mit Vendor-Prefix) und die noch immer völlig unterbewerteten CSS-Counter.
[00:23:40] Features die man Real-Life verwenden kann
Neben den gut unterstützten Viewport-Units vw/vh/vmin/vmax sind auch die weniger weit verbreiten Font-Detail-Properties font-feature-settings, font-stretch, font-size-adjust, font-variant-alternates und font-kerning brauchbar, denn wenn die mal nicht funtkionieren fällt es kaum jemandem auf. overflow-wrap als Ergänzung zu hyphens ist ebenso weit verbreitet wie Unicode Range, Writing Mode, Custom Properties, Feature Queries (@supports), Object-Fit und position:sticky. Auch einige wenige Features aus Media Queries Level 4 funktionieren in modernen Browsern bereits.
[01:03:18] Zukunftsaussichten und Wünsche
Neben dem frommen Wunsch, dass sich allerlei bekannte Features möglichst schnell durchsetzen mögen (Grid, Shapes, Blend-Modes, filter) ist Sven besonders scharf auf font-display und line-height-step. Beim Styling von Inputs gibt es Fortschritte, aber auch da sehen wir noch Luft nach oben. Letzter Wunsch: die color()-Funktion möge sich zeitnah durchsetzen!

Revision 307: HEIF, Bildformate und -optimierung

25. Juli 2017 | 3 Kommentare

Hans und Anselm quatschen in bestem Wissen und doch einiger Ausführlichkeit über Bildformate und Bildoptimierung auf Webseiten und geben wertvolle Tipps für Webentwickler und Designer, um bessere Bildqualität bei geringer Dateigröße auszuliefern. Alles mit praktischen Tipps und nicht nur Theorie.

Schaunotizen

[00:00:13] Bildformate und -optimierung
Angesichts der Tatsache, dass Apple im Herbst mit HEIF ein ganz neues Bildformat an die Massen bringen wird, sehen wir uns gewillt, noch einmal für fast alle gängigen Probleme und Herausforderungen im Alltag des Webentwicklers und Designers Lösungen zu finden und Empfehlungen zu geben. Wir sprechen über Barrierefreiheit, Suchmaschinenoptimierung, Bildoptimierung auf dem eigenen Rechner oder dem Server und generelle Workflows und Ideen, um auch Kunden mitzugeben, wie Bilder optimiert werden können.

[00:52:32] Keine Schaunotizen

sonar
sonar ist ein absolut umfangreiches, flexibles Linting-Tool für Webseiten mit Dutzenden an Anwendungsszenarien.

Revision 306: Accessibility und CSS Grids

3. Juli 2017 | 3 Kommentare

Mit Manuel Matuzović von den Webclerks gehen wir in den Themen Accessibility und CSS Grids in ein Nachspiel und ergänzen frühere Folgen. Von der Stammpartie mit dabei: Schepp, Hans und Stefan.

Schaunotizen

[00:03:07] Mit einfachen Mitteln Accessibility verbessern
Manuel gibt in seinen Artikeln und Beispielen einen guten Rundumschlag zum Thema Barrierefreiheit. Wir unterhalten uns über seine Artikel, sowie etliche weitere Quellen, die uns in Accessibility noch weiterhelfen können. Zu empfehlen sind die A11ycasts von Google, den in die Jahre gekommenen aber immer noch gültigen Eintrag im YUI Theatre (2, 3) und Heydons Inclusive Components wenns um SPAs geht. Manuel hat auf Codepen noch weitere Beispiele. Außerdem sehen wir uns den Focus Ring genauer an und lassen alte Diskussionen über das lang-Attribut erneut aufkochen, so wie damals im HTML 5 Boilerplate, Hans und Anwesende erinnern sich.
[00:52:49] Grid auto layout
CSS Grid ist nun auch in den Preview Versionen von Edge verfügbar und damit beinah flächendeckend. Wir schauen uns ein wichtiges Feature im Vergleich zur IE10+ Version an, nämlich Auto Layout. Und erklären damit auch gleich ein paar Grundkonzepte, basierend auf Stefans Artikel. Unser Grundsatz: Grid kann man schon gut jetzt einsetzen, vor allem wenn man nicht die ganze Magie benötigt. Für den Schuß Extra-Magie gibt es gute Fallbacks

[01:16:18] Keine Schaunotizen

place-items
Zentrieren in einer CSS Shorthand. Lässt glatt die Hölle zufrieren.
space-evenly
Eine neue Raumverteilung für Flexbox.
Service Workers Outbreak
Fesches Video von der JSConf EU zum Thema Service Workers.
Parsing JavaScript: Better lazy than eager
Die Münchner V8 Garde wieder in bester Form: Marja Hölltä erklärt JavaScript Parsing Interna.

Revision 305: Datenjournalismus

26. Juni 2017 | Kommentare deaktiviert für Revision 305: Datenjournalismus

Als kleinen Themen- und Tapetenwechsel haben wir uns für diese Folge die Datenjournalisten Kira Schacht und Phil Ninh von Journocode eingeladen, um etwas über ihr Berufsfeld und den Herstellungsprozess von datengetriebenen und/oder interaktiven Reportagen zu erfahren.

Schaunotizen

[00:00:18] Datenjournalismus
In unserem Gespräch erkunden wir, was Datenjournalismus, aka „Data Driven Journalism“ (DDJ), überhaupt ist und wann er zum ersten Mal in Erscheinung getreten ist. Vorreiter in der Welt in Sachen datengetriebener Publikationen sind The New York Times und The Guardian, während es in Deutschland die Berliner Morgenpost und in Österreich der Standard und das ORF sind. Wir reden darüber, wie ein solches Reportage-Projekt ans Rollen kommt, und wir reden über die Schwierigkeit der Beschaffung von brauchbaren bzw. gut formatierten Daten hier in unseren Gefilden. Natürlich kommen wir als technischer Podcast irgendwann auch auf das Thema „Tooling“: Welche Software und welche Bibliotheken kommen bei der Datenaufbereitung und später bei der Präsentation zum Einsatz? Das wäre z.B. OpenRefine zur Datenbereinigung (Zitat: „A free, open source, powerful tool for working with messy data“), R für die Extraktion von statistischen Daten und Libraries wie d3.js für eine anschauliche Präsentation im Web.

Keine Schaunotizen

Journocode
Die Gruppierung aus Dortmund hat es sich zur Aufgabe gemacht, Datenjournalismus zu fördern, indem Journalisten ans Programmieren, und vis versa Coder und Statistiker an Journalismus herangeführt werden. Zu diesem Zweck gibt es regelmäßig Meetups und Hack-Sessions.
Snow Fall – The Avalanche at Tunnel Creek
Das von unseren Gästen erwähnte „Interactive Story Telling“-Projekt der New York Times.
Berliner Morgenpost Interaktiv
Landingpage für Datenjournalismus-Projekte der Berliner Morgenpost.
Rheinische Post Interaktiv
Landingpage für Datenjournalismus-Projekte der Rheinischen Post.
Tour de France in Düsseldorf
Das im Gespräch erwähnte Projekt, an dem Kira und Phil gerade saßen.
Video: Hacking the Visual Norm – Nadieh Bremer
„During this talk Nadieh will take you through several of her data visualisation projects, both from the business environment of her day job and the experiments made in her evenings.“
Video: Des Traynor – Creating Dashboards – Data Visualisations that Resonate
„Info-graphics & data visualisations are popping up everywhere and they don’t always make sense. Many horrible acts have been committed in the name of ‚Making this chart seem a bit more fun'“
Video: Alex Graul | Using JS to build bigger, better datavis to enlighten and elate
„With this talk I want to show you how to design and build not just simple and not-so-simple charts to illustrate data but how to design & architect larger more complex pieces of content that tell stories and illustrate ideas.“
Netzwerk Recherche Konferenz 2017
Die alljährliche Konferenz des Netzwerk Recherche e.V., ein gemeinnütziger Verein, der 2001 von Journalistinnen und Journalisten gegründet wurde, um die journalistische Recherche und den Qualitätsjournalismus in Deutschland zu stärken.