Working Draft

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.

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.

Schaunotizen

[00:00:15] Native Browser-APIs

Schepp hat sich in letzter Zeit verstärkt damit befasst, wie man auf einer klassischen Webseite den ganzen JavaScript-Balast loswerden kann. Ziel des Ganzen ist zum einen, Download- und Parsezeiten zu vermeiden, aber auch eine schnelle Ausführungsgeschwindigkeit zu erhalten, bedingt durch den dahintersteckenden, nativen C-Code. Und da sieht es eigentlich recht gut aus mit APIs und deren Support durch Browser. Folgende Themenbereiche lassen sich heute ohne viel zusätzliches JavaScript gut bedienen:

[00:57:09] Keine Schaunotizen

How the minmax() Function Works

Die CSS Grid Spec führt eine minmax()-Funktion ein, welche recht praktisch ist.

Lea Verou – CSS Variables: var(–subtitle);

Wie alle Talks von Lea sehr sehenswert, diesmal mit dem Thema CSS Custom Properties (im Volksmund „CSS Variablen“) zum Thema.

Essential apps for switching from Mac to Windows

Tolle Ressource für Entwickler, die an einem Wechsel zu Windows interessiert sind, ergänzend zu dem vor zwei Revisionen schon einmal verlinkten „Turning Windows into an environment ready for modern development„.

Inside Chrome: The Secret Project to Crush IE and Remake the Web

Weil Chrome bald 10 Jahre alt wird dachten wir, verlinken wir dieses historische Fundstück.

Hans und Schepp telefonierten sich diesmal zusammen und sprachen über die weite Verbreitung und Vorteile moderner Browser-APIs.

Schaunotizen

[00:00:15] Native Browser-APIs

Schepp hat sich in letzter Zeit verstärkt damit befasst, wie man auf einer klassischen Webseite den ganzen JavaScript-Balast loswerden kann. Ziel des Ganzen ist zum einen, Download- und Parsezeiten zu vermeiden, aber auch eine schnelle Ausführungsgeschwindigkeit zu erhalten, bedingt durch den dahintersteckenden, nativen C-Code. Und da sieht es eigentlich recht gut aus mit APIs und deren Support durch Browser. Folgende Themenbereiche lassen sich heute ohne viel zusätzliches JavaScript gut bedienen:

DOM-Traversal: Dank querySelector(), querySelectorAll(), closest(), previousSibling(), nextSibling() alles kein Hexenwerk mehr. Hilfreich sind dabei die Tricks, um Element-Collections in iterierbare Arrays umzuwandeln.

DOM-Manipulation: Auch viel leichter geworden, dank before(), after() oder replaceWith(). Mehrere Styles lassen sich prima „en bloc“ per Object.assign(elem.style, { color: '#fff', fontSize: '1rem' }) mit bestehenden Eigenschaften zusammenmergen.

Event Delegation: Dank nunmehr einheitlicher addEventListener()-Methode, durchgehendem Capture-Phase-Support und Element.matches() recht einfach selbst umzusetzen.

Umgang mit Arrays: Schon ES5 war ein Meilenstein und es wird nur besser: forEach(), filter(), map(), reduce(), sort(), find(), findIndex(), includes(), every(), entries() und values(). Und dann gibt es da ja noch die Spread- und Rest-Operatoren.

Umgang mit Objekten: Hier hat ES6 mit assign() und keys() den Grundstein gelegt. Nun wurde u.a. entries() und values() nachgelegt.

Für Karusell-Slider bieten sich die CSS Snap Points an.

Für das Schriften-Laden die CSS Font Loading API.

Für das Lazyloading von Bildern kann man heutzutage gut die Intersection Observer API verwenden.

Und für weiches Scrollen auf der Seite steht neuerdings die CSS-Eigenschaft scroll-behavior mit dem Wert smooth zur Verfügung.

[00:57:09] Keine Schaunotizen

How the minmax() Function Works

Die CSS Grid Spec führt eine minmax()-Funktion ein, welche recht praktisch ist.

Lea Verou – CSS Variables: var(–subtitle);

Wie alle Talks von Lea sehr sehenswert, diesmal mit dem Thema CSS Custom Properties (im Volksmund „CSS Variablen“) zum Thema.

Essential apps for switching from Mac to Windows

Tolle Ressource für Entwickler, die an einem Wechsel zu Windows interessiert sind, ergänzend zu dem vor zwei Revisionen schon einmal verlinkten „Turning Windows into an environment ready for modern development„.

Inside Chrome: The Secret Project to Crush IE and Remake the Web

Weil Chrome bald 10 Jahre alt wird dachten wir, verlinken wir dieses historische Fundstück.

[00:00:15] News

NPM 5

NPM 5 ist draussen und hat etliche Neuerungen hinsichtlich Versionslocks, Download-Performance u.ä. Das vielleicht größte NPM Upgrade seit semi-flachen Abhängigkeitsbäumen.

Schaunotizen

[00:05:32] Cloud Hosting

Vorbei sind die Zeiten, in denen man sich beim Rechenzentrum nebenan ein paar hundert Megabyte für’s teure Geld besorgte. Heute sind alle hippen Websites und Web-Applikationen in der Cloud! Wir erzählen von unseren Erfahrungen mit Diensten wie AWS und den damit verbundenen Services wie S3, EC2, CF,

SES, RDS, MFG, KTHXBYE. Zahlreiche Kürzel, für die man jeweils ein eigenes Diplom benötigt. Da machen es 1-Click Dienstleister wie Digital Ocean, Heroku, Now und Netlify doch um einiges einfacher, und helfen auch die Kosten entsprechend zu kalkulieren. Wenn man nämlich nach Stunde und Megabyte bezahlt, kann das einem bei entsprechend hohem Traffic schonmal böse überraschen

[00:55:30] Keine Schaunotizen

H2 Push is tougher than I thought

Schönes neues HTTP2 Feature, allerdings noch nicht reif genug, mein Jake Archibald.

Preload, Prefetch & Priorities in Chrome

Ein Artikel von Addy Osmani beschreibt wie sich die neuen HTML Attribute auf den Ladevorgang im Chrome Browser auswirken.

11 things I learned reading the Flexbox spec

In der Spezifikation von Flexbox stecken ein paar spannende Details, die man berücksichtigen kann wenn man mit den Properties jongliert.

70% CSS Repetition

Quasi Nachlese zu unserer Revision 301.

Eine knifflige Problemstellung mit einem der dutzend AWS Dienste brachte Hans und Stefan in den Dialog. Prompt war ein Working Draft Thema geboren. So gesellte sich noch Anselm dazu um die Diskussionsrunde zu komplettieren und einen guten Rundumschlag über die modernen Hosting-Möglichkeiten über den Wolken geben.

[00:00:15] News

NPM 5

NPM 5 ist draussen und hat etliche Neuerungen hinsichtlich Versionslocks, Download-Performance u.ä. Das vielleicht größte NPM Upgrade seit semi-flachen Abhängigkeitsbäumen.

Schaunotizen

[00:05:32] Cloud Hosting

Vorbei sind die Zeiten, in denen man sich beim Rechenzentrum nebenan ein paar hundert Megabyte für’s teure Geld besorgte. Heute sind alle hippen Websites und Web-Applikationen in der Cloud! Wir erzählen von unseren Erfahrungen mit Diensten wie AWS und den damit verbundenen Services wie S3, EC2, CF,

SES, RDS, MFG, KTHXBYE. Zahlreiche Kürzel, für die man jeweils ein eigenes Diplom benötigt. Da machen es 1-Click Dienstleister wie Digital Ocean, Heroku, Now und Netlify doch um einiges einfacher, und helfen auch die Kosten entsprechend zu kalkulieren. Wenn man nämlich nach Stunde und Megabyte bezahlt, kann das einem bei entsprechend hohem Traffic schonmal böse überraschen

[00:55:30] Keine Schaunotizen

H2 Push is tougher than I thought

Schönes neues HTTP2 Feature, allerdings noch nicht reif genug, mein Jake Archibald.

Preload, Prefetch & Priorities in Chrome

Ein Artikel von Addy Osmani beschreibt wie sich die neuen HTML Attribute auf den Ladevorgang im Chrome Browser auswirken.

11 things I learned reading the Flexbox spec

In der Spezifikation von Flexbox stecken ein paar spannende Details, die man berücksichtigen kann wenn man mit den Properties jongliert.

70% CSS Repetition

Quasi Nachlese zu unserer Revision 301.

Schaunotizen

[00:00:12] Prepack

Prepack ist ein „partial evaluator for JavaScript“. Prepack führt, sofern möglich, den Initialisierungs-Code eines JS-Bundles in einem Compile-Schritt aus, damit es der Browser nicht zur Laufzeit machen muss. Es werden z.B. Closures wegoptimiert und Berechnungen durchgeführt, wo immer dies möglich ist. In eine ähnliche Kerbe schlägt das bereits mehrfach in diesem Podcast erwähnte optimize-js, was weniger kann, aber schon eingesetzt werden kann. Prepack hingegen ist noch Alpha-Software (obwohl es schon ein Webpack-Plugin gibt), was wir anhand von mehreren Code-Samples erfahren.

[00:13:32] Früher war alles besser anders

Das HTTP Archive hat Statistiken über verbreitete JS-Libraries gesammelt und wir lassen es uns nicht nehmen, die Top 10 einzeln durchzusprechen. Auf Platz 1 thront wenig überraschend jQuery, über jQuery UI auf Nummer 2 (und Rodneys Schwank zur position()-Funktion) wundern wir uns hingegen schon etwas. Zu den ollen Polyfill-Libraries Modernizer (Platz 3) und YepNope (Platz 5) fällt uns vor allem eine Reflow-Visualisierung mit der alten Modernizer-Webseite als Testsubjekt ein. Bootstraps JS-Komponenten auf Platz 4 verwundern nur mäßig, FlexSlider an Position 6 war uns völlig unbekannt. Die Erinnerung an swfobject (Platz 7) bewegt Rodney zu Geständnissen aus einer Jugend voller ActionScript. Das achtplatzierte Underscore.js lebt in Form von lo-dash bis heute in unseren package.json-Files weiter. Mit Grausen denken wir an die Google-Maps-API (Platz 9), wenn auch Peter neue Ideen zum nicht-sachgerechten Einsatz von Maps und Headless Browser anzubieten hat. Die Liste endet mit Moment.js auf Platz 10, was uns aus irgendwelchen Gründen zur PHP-Funktion strtotime() abschweifen lässt. Da das aber kein geeigneter Abschluss für einen Podcast im Jahre des Herrn 2017 ist, wirft Rodney zum Schluss noch einen persönlichen Platz 11 in die Runde: Libraries für Layout-Rearrangements wie FLIP (was Rodneys Favorit Vue.js von Haus aus macht). Libraries wie Vue und Tools wie Babel zeigen aber ganz klar auf wohin der Trend geht: weg von Insellösungen, hin zu integrierten Tools und Frameworks.

[01:06:14] Keine Schaunotizen

ECMAScript modules in browsers

Gewohnte Erklärbär-Qualität aus dem Hause Jake Archibald.

Getting Started with Headless Chrome

PhantomJS ist tot, es lebe Headless Chrome!

Turning Windows into an environment ready for modern development

Tools für Windows.

Install npm packages globally without sudo on macOS and Linux

Pakete global für den jeweiligen User installieren.

zeit/pkg

Bundlet Node-Apps in Executables.

Videos von der JSConf EU 2017

Schöne kurze Talks.

Rodney und Peter hockten sich zusammen um über sehr neue und sehr alte JavaScript-Technologie zu schwafeln.

Schaunotizen

[00:00:12] Prepack

Prepack ist ein „partial evaluator for JavaScript“. Prepack führt, sofern möglich, den Initialisierungs-Code eines JS-Bundles in einem Compile-Schritt aus, damit es der Browser nicht zur Laufzeit machen muss. Es werden z.B. Closures wegoptimiert und Berechnungen durchgeführt, wo immer dies möglich ist. In eine ähnliche Kerbe schlägt das bereits mehrfach in diesem Podcast erwähnte optimize-js, was weniger kann, aber schon eingesetzt werden kann. Prepack hingegen ist noch Alpha-Software (obwohl es schon ein Webpack-Plugin gibt), was wir anhand von mehreren Code-Samples erfahren.

[00:13:32] Früher war alles besser anders

Das HTTP Archive hat Statistiken über verbreitete JS-Libraries gesammelt und wir lassen es uns nicht nehmen, die Top 10 einzeln durchzusprechen. Auf Platz 1 thront wenig überraschend jQuery, über jQuery UI auf Nummer 2 (und Rodneys Schwank zur position()-Funktion) wundern wir uns hingegen schon etwas. Zu den ollen Polyfill-Libraries Modernizer (Platz 3) und YepNope (Platz 5) fällt uns vor allem eine Reflow-Visualisierung mit der alten Modernizer-Webseite als Testsubjekt ein. Bootstraps JS-Komponenten auf Platz 4 verwundern nur mäßig, FlexSlider an Position 6 war uns völlig unbekannt. Die Erinnerung an swfobject (Platz 7) bewegt Rodney zu Geständnissen aus einer Jugend voller ActionScript. Das achtplatzierte Underscore.js lebt in Form von lo-dash bis heute in unseren package.json-Files weiter. Mit Grausen denken wir an die Google-Maps-API (Platz 9), wenn auch Peter neue Ideen zum nicht-sachgerechten Einsatz von Maps und Headless Browser anzubieten hat. Die Liste endet mit Moment.js auf Platz 10, was uns aus irgendwelchen Gründen zur PHP-Funktion strtotime() abschweifen lässt. Da das aber kein geeigneter Abschluss für einen Podcast im Jahre des Herrn 2017 ist, wirft Rodney zum Schluss noch einen persönlichen Platz 11 in die Runde: Libraries für Layout-Rearrangements wie FLIP (was Rodneys Favorit Vue.js von Haus aus macht). Libraries wie Vue und Tools wie Babel zeigen aber ganz klar auf wohin der Trend geht: weg von Insellösungen, hin zu integrierten Tools und Frameworks.

[01:06:14] Keine Schaunotizen

ECMAScript modules in browsers

Gewohnte Erklärbär-Qualität aus dem Hause Jake Archibald.

Getting Started with Headless Chrome

PhantomJS ist tot, es lebe Headless Chrome!

Turning Windows into an environment ready for modern development

Tools für Windows.

Install npm packages globally without sudo on macOS and Linux

Pakete global für den jeweiligen User installieren.

zeit/pkg

Bundlet Node-Apps in Executables.

Videos von der JSConf EU 2017

Schöne kurze Talks.

Schaunotizen

[00:00:18] Optimierung und Wartbarkeit von CSS

Wir sprachen mit Jens über sein aktuelles Forschungsthema, nämlich der Frage, wie man CSS besser optimieren und gleichzeitig gut wartbar halten kann. Ausgangslage war Jens‘ Erkenntnis, dass 70% des CSS, das die Durchschnittsseite mit sich herumschleift, aus vorher bereits definierten Deklarationen besteht. Das daraus resultierende Gespräch führte uns über Bootstrap und die Möglichkeit, es an die eigenen Bedürfnisse anzupassen, über Tachyons, Yahoos Atomic CSS, und OOCSS hin zu Googles GWT. Zur weiteren Erforschung des Themenkomplexes bittet Jens in einem Artikel darum, seine Umfrage das Thema betreffend auszufüllen.

Keine Schaunotizen

Alle Videos der beyond tellerrand Düsseldorf 2017

Die Videos der beyonds gehen mittlerweile so schnell online, da fehlt nicht mehr viel, dass man die Talks dort schon vor dem Bühnenauftritt sehen kann. Wenn Ihr nicht die Zeit findet, alle Videos zu schauen, dann doch wenigstens das von Espen Brunborg.

Letzte Revision noch über ihn, bzw. einen seiner Artikel gesprochen, heute schon in unserer Sendung: Jens Oliver Meiert! Wir haben ihn auf der gerade vergangenen beyond tellerrand Düsseldorf zufällig getroffen und ihn erfolgreich in ein Interview zum Thema CSS verstrickt.

Schaunotizen

[00:00:18] Optimierung und Wartbarkeit von CSS

Wir sprachen mit Jens über sein aktuelles Forschungsthema, nämlich der Frage, wie man CSS besser optimieren und gleichzeitig gut wartbar halten kann. Ausgangslage war Jens‘ Erkenntnis, dass 70% des CSS, das die Durchschnittsseite mit sich herumschleift, aus vorher bereits definierten Deklarationen besteht. Das daraus resultierende Gespräch führte uns über Bootstrap und die Möglichkeit, es an die eigenen Bedürfnisse anzupassen, über Tachyons, Yahoos Atomic CSS, und OOCSS hin zu Googles GWT. Zur weiteren Erforschung des Themenkomplexes bittet Jens in einem Artikel darum, seine Umfrage das Thema betreffend auszufüllen.

Keine Schaunotizen

Alle Videos der beyond tellerrand Düsseldorf 2017

Die Videos der beyonds gehen mittlerweile so schnell online, da fehlt nicht mehr viel, dass man die Talks dort schon vor dem Bühnenauftritt sehen kann. Wenn Ihr nicht die Zeit findet, alle Videos zu schauen, dann doch wenigstens das von Espen Brunborg.