<p>Weil Schepp sich in letzter Zeit auch mit Service Workern beschäftigt hat, und weil sowohl <a href="https://steffenjahr.de/2017/05/12/microsoft-edge-and-you-pwa-service-worker-ahead/">Microsoft</a> als auch <a href="https://twitter.com/webmaxru/status/893027996659060738">Apple</a> an ihnen arbeiten, ließen Hans und Anselm sich von ihm ein paar Erfahrungen aus der Praxis berichten.   </p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:14] <a href="https://developers.google.com/web/fundamentals/getting-started/primers/service-workers">Service Worker</a></dt>
<dd>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 <code>async/await</code>-Konstrukten entgegentritt. Hilfreich beim Einarbeiten in das Thema sind verschiedene Online-Tutorials, Howtos und Tools, als da wären:</p>
<ul>
<li><a href="https://serviceworke.rs/">Das Service Worker Cookbook</a></li>
<li><a href="https://developers.google.com/web/tools/lighthouse/">Lighthouse</a> (auch als <a href="https://developers.google.com/web/tools/lighthouse/#cli">CLI</a>, mit mehr Freiheiten)</li>
<li><a href="https://sonarwhal.com/">sonar</a></li>
<li><a href="http://manifoldjs.com/">PWA Builder</a></li>
<li><a href="https://github.com/GoogleChrome/sw-toolbox">Die Service Worker Toolbox</a> und <a href="https://github.com/GoogleChrome/sw-toolbox/tree/master/lib/strategies">ihre verschiedenen Cache-Strategien</a></li>
<li><a href="https://www.youtube.com/watch?v=CPP9ew4Co0M">Alexander Pope: ServiceWorkers Outbreak: index-sw-9a4c43b4b47781ca619eaaf5ac1db.js | JSConf EU 2017</a></li>
</ul>
</dd>
</dl>
<h3>[00:31:07] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://mxb.at/blog/youre-offline/">You&#8217;re Offline</a></dt>
<dd>Max Böck beschäftigt sich als einer von wenigen mit der Frage, wie eine UI reagieren sollte, wenn man offline geht.</dd>
<dt><a href="https://pudding.cool/process/resize/">How many users resize their browser?</a></dt>
<dd>Zitat: &#8222;TL;DR: 2-3% of users resize their browser, and you should care.&#8220;</dd>
<dt><a href="https://csswizardry.com/2017/07/performance-and-resilience-stress-testing-third-parties/">Performance and Resilience: Stress-Testing Third Parties</a></dt>
<dd>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.</dd>
</dl>


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 …

Working Draft

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:



 * Das Service Worker Cookbook
 * Lighthouse (auch als CLI, mit mehr Freiheiten)
 * sonar
 * PWA Builder
 * Die Service Worker Toolbox und ihre verschiedenen Cache-Strategien
 * Alexander Pope: ServiceWorkers Outbreak:
   index-sw-9a4c43b4b47781ca619eaaf5ac1db.js | JSConf EU 2017


[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 310: Service Worker – Bericht aus der Praxis

<p>Themen? Wer braucht denn schon Themen! </p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:20] Kein Thema</dt>
<dd>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 <a href="https://www.youtube.com/watch?v=cD9utLH3QOk">die ausgetüftelten Performance-Optimierungen von Lo-Dash</a></dd>
</dl>


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ün…

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

Revision 309: Kein Thema

<p>Von CSS-Guru Sven Wolfermann (<a href="http://maddesigns.de/">Webseite</a>, <a href="https://twitter.com/maddesigns?lang=de">Twitter</a>) ließen sich Hans und Peter erzählen, was denn modernes CSS so alles zu leisten im Stande ist.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:57] CSS-Features, die man heutzutage verwenden muss</dt>
<dd>Zu den Must-Haves im Jahr 2017 gehören ganz klar <a href="https://developer.mozilla.org/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Flexbox</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc">calc()</a> und <a href="https://snook.ca/archives/html_and_css/font-size-with-rem">rem</a>&nbsp;&ndash; 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 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background-position">background-position</a> mit vier Werten, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword">currentColor</a> (v.a. zum Styling von SVG-Icons), <a href="https://css-tricks.com/almanac/properties/u/user-select/">user-select</a> (noch mit Vendor-Prefix) und die noch immer völlig unterbewerteten <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS-Counter</a>.</dd>
<dt>[00:23:40] Features die man Real-Life verwenden kann</dt>
<dd>Neben den gut unterstützten <a href="https://www.sitepoint.com/css-viewport-units-quick-start/">Viewport-Units vw/vh/vmin/vmax</a> sind auch die weniger weit verbreiten Font-Detail-Properties <a href="https://developer.mozilla.org/de/docs/Web/CSS/font-feature-settings">font-feature-settings</a>, <a href="https://developer.mozilla.org/de/docs/Web/CSS/font-stretch">font-stretch</a>, <a href="https://developer.mozilla.org/de/docs/Web/CSS/font-size-adjust">font-size-adjust</a>, <a href="https://developer.mozilla.org/de/docs/Web/CSS/font-variant-alternates">font-variant-alternates</a> und <a href="https://developer.mozilla.org/de/docs/Web/CSS/font-kerning">font-kerning</a> brauchbar, denn wenn die mal nicht funtkionieren fällt es kaum jemandem auf. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap">overflow-wrap</a> als Ergänzung zu <a href="https://developer.mozilla.org/de/docs/Web/CSS/hyphens">hyphens</a> ist ebenso weit verbreitet wie <a href="https://developer.mozilla.org/de/docs/Web/CSS/@font-face/unicode-range">Unicode Range</a>, <a href="https://developer.mozilla.org/de/docs/Web/CSS/writing-mode">Writing Mode</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">Custom Properties</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@supports">Feature Queries (@supports)</a>, <a href="https://developer.mozilla.org/de/docs/Web/CSS/object-fit">Object-Fit</a> und  <a href="https://css-tricks.com/position-sticky-2/">position:sticky</a>. Auch einige wenige Features aus <a href="https://www.w3.org/TR/mediaqueries-4/">Media Queries Level 4</a> funktionieren in modernen Browsern bereits.</dd>
<dt>[01:03:18] Zukunftsaussichten und Wünsche</dt>
<dd>
Neben dem frommen Wunsch, dass sich allerlei bekannte Features möglichst schnell durchsetzen mögen (<b>Grid</b>, <b>Shapes</b>, <b>Blend-Modes</b>, <b>filter</b>) ist Sven besonders scharf auf <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display">font-display</a> und <a href="https://www.chromestatus.com/feature/5734273533345792">line-height-step</a>. Beim <b>Styling von Inputs</b> gibt es Fortschritte, aber auch da sehen wir noch Luft nach oben. Letzter Wunsch: die <a href="https://drafts.csswg.org/css-color/">color()-Funktion</a> möge sich zeitnah durchsetzen!</dd>
</dl>


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 HEUTZUTA…

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 308: CSS mit Sven Wolfermann

<p>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.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:13] <a href="https://iso.500px.com/heif-first-nail-jpegs-coffin/">Bildformate und -optimierung</a></dt>
<dd>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.</dd>
</dl>
<h3>[00:52:32] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://sonarwhal.com/">sonar</a></dt>
<dd>sonar ist ein absolut umfangreiches, flexibles Linting-Tool für Webseiten mit Dutzenden an Anwendungsszenarien.</dd>
</dl>


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 Bild…

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 307: HEIF, Bildformate und -optimierung

<p>Mit <a href="https://twitter.com/mmatuzo">Manuel Matuzović</a> von den <a href="https://twitter.com/wearewebclerks">Webclerks</a> 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.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:07] <a href="https://medium.com/@matuzo/writing-javascript-with-accessibility-in-mind-a1f6a5f467b9">Mit einfachen Mitteln Accessibility verbessern</a></dt>
<dd>Manuel gibt in seinen Artikeln und Beispielen einen guten Rundumschlag zum Thema Barrierefreiheit. Wir unterhalten uns über seine <a href="https://medium.com/alistapart/writing-html-with-accessibility-in-mind-a62026493412">Artikel</a>, sowie etliche weitere Quellen, die uns in Accessibility noch weiterhelfen können. Zu empfehlen sind die <a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g">A11ycasts von Google</a>, den in die Jahre gekommenen aber immer noch gültigen Eintrag im <a href="https://yuiblog.com/blog/2010/08/16/video-zakas-tsaran/">YUI Theatre</a> (<a href="https://yuiblog.com/blog/category/accessibility">2</a>, <a href="https://yuiblog.com/blog/2007/06/12/video-intro-to-screen-magnifiers/">3</a>) und Heydons <a href="https://inclusive-components.design/">Inclusive Components</a> wenns um SPAs geht. Manuel hat auf <a href="https://codepen.io/matuzo/pen/awdevz">Codepen</a> noch weitere <a href="https://codepen.io/matuzo/pen/LLGKmP">Beispiele</a>. Außerdem sehen wir uns den <a href="https://github.com/WICG/focus-ring">Focus Ring</a> genauer an und lassen alte Diskussionen über das lang-Attribut erneut aufkochen, so wie damals im <a href="https://github.com/h5bp/html5-boilerplate/commit/d916a720253d171a9b54818f2a07d14acbd2e4c7">HTML 5 Boilerplate</a>, Hans und Anwesende erinnern sich.</dd>
<dt>[00:52:49] <a href="https://fettblog.eu/grid-concepts/">Grid auto layout</a></dt>
<dd>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 <a href="https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks">Fallbacks</a></dd>
</dl>
<h3>[01:16:18] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/place-items">place-items</a></dt>
<dd>Zentrieren in einer CSS Shorthand. Lässt glatt die Hölle zufrieren.</dd>
<dt><a href="https://codepen.io/matuzo/pen/GmXVWo?editors=1100">space-evenly</a></dt>
<dd>Eine neue Raumverteilung für Flexbox.</dd>
<dt><a href="https://www.youtube.com/watch?v=CPP9ew4Co0M&amp;index=5">Service Workers Outbreak</a></dt>
<dd>Fesches Video von der JSConf EU zum Thema Service Workers.</dd>
<dt><a href="https://www.youtube.com/watch?v=Fg7niTmNNLg&#038;index=10">Parsing JavaScript: Better lazy than eager</a></dt>
<dd>Die Münchner V8 Garde wieder in bester Form: Marja Hölltä erklärt JavaScript Parsing Interna.</dd>
</dl>


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.


SCHAU…

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 306: Accessibility und CSS Grids

<p>Als kleinen Themen- und Tapetenwechsel haben wir uns für diese Folge die Datenjournalisten <a href="https://twitter.com/daten_drang">Kira Schacht</a> und <a href="https://twitter.com/philninh">Phil Ninh</a> von <a href="http://journocode.com/">Journocode</a> eingeladen, um etwas über ihr Berufsfeld und den Herstellungsprozess von datengetriebenen und/oder interaktiven Reportagen zu erfahren.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:18] <a href="https://de.wikipedia.org/wiki/Datenjournalismus">Datenjournalismus</a></dt>
<dd>In unserem Gespräch erkunden wir, was Datenjournalismus, aka &#8222;Data Driven Journalism&#8220; (DDJ), überhaupt ist und wann er zum ersten Mal in Erscheinung getreten ist. Vorreiter in der Welt in Sachen datengetriebener Publikationen sind <a href="https://www.nytimes.com/">The New York Times</a> und <a href="https://www.theguardian.com/international">The Guardian</a>, während es in Deutschland die <a href="https://www.morgenpost.de">Berliner Morgenpost</a> und in Österreich der <a href="http://derstandard.at">Standard</a> und das <a href="http://orf.at/">ORF</a> 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 &#8222;Tooling&#8220;: Welche Software und welche Bibliotheken kommen bei der Datenaufbereitung und später bei der Präsentation zum Einsatz? Das wäre z.B. <a href="http://openrefine.org/">OpenRefine</a> zur Datenbereinigung (Zitat: &#8222;A free, open source, powerful tool for working with messy data&#8220;), <a href="https://www.r-project.org/">R</a> für die Extraktion von statistischen Daten und Libraries wie <a href="https://d3js.org/">d3.js</a> für eine anschauliche Präsentation im Web.</dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="http://journocode.com/">Journocode</a></dt>
<dd>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 <a href="http://journocode.com/events/">gibt es regelmäßig Meetups und Hack-Sessions</a>.</dd>
<dt><a href="http://www.nytimes.com/projects/2012/snow-fall/#/">Snow Fall – The Avalanche at Tunnel Creek</a></dt>
<dd>Das von unseren Gästen erwähnte &#8222;Interactive Story Telling&#8220;-Projekt der New York Times.</dd>
<dt><a href="https://www.morgenpost.de/interaktiv/">Berliner Morgenpost Interaktiv</a></dt>
<dd>Landingpage für Datenjournalismus-Projekte der Berliner Morgenpost.</dd>
<dt><a href="https://interaktiv.rp-online.de/">Rheinische Post Interaktiv</a></dt>
<dd>Landingpage für Datenjournalismus-Projekte der Rheinischen Post.</dd>
<dt><a href="https://interaktiv.rp-online.de/tour-de-france-2017">Tour de France in Düsseldorf</a></dt>
<dd>Das im Gespräch erwähnte Projekt, an dem Kira und Phil gerade saßen.</dd>
<dt><a href="https://www.youtube.com/watch?v=gBFtER8yHVY">Video: Hacking the Visual Norm – Nadieh Bremer</a></dt>
<dd>&#8222;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.&#8220;</dd>
<dt><a href="https://vimeo.com/channels/beyondtellerrand/34784156">Video: Des Traynor – Creating Dashboards – Data Visualisations that Resonate</a></dt>
<dd>&#8222;Info-graphics &#038; data visualisations are popping up everywhere and they don&#8217;t always make sense. Many horrible acts have been committed in the name of &#8218;Making this chart seem a bit more fun'&#8220;</dd>
<dt><a href="https://vimeo.com/channels/fronteers12/52851512">Video: Alex Graul | Using JS to build bigger, better datavis to enlighten and elate</a></dt>
<dd>&#8222;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 &#038; architect larger more complex pieces of content that tell stories and illustrate ideas.&#8220;</dd>
<dt><a href="https://netzwerkrecherche.org/termine/konferenzen/jahreskonferenzen/nr-jahreskonferenz-2017/">Netzwerk Recherche Konferenz 2017</a></dt>
<dd>Die alljährliche Konferenz des <a href="https://netzwerkrecherche.org">Netzwerk Recherche e.V.</a>, 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.</dd>
</dl>


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 Herstellungsprozes…

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.

Revision 305: Datenjournalismus

<p>Hans und Schepp telefonierten sich diesmal zusammen und sprachen über die weite Verbreitung und Vorteile moderner Browser-APIs.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:15] Native Browser-APIs</dt>
<dd>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 <a href="https://twitter.com/HenriHelvetica/status/877924754195324928">Parsezeiten</a> 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:</p>
<ul>
<li>DOM-Traversal: Dank <a href="https://developer.mozilla.org/de/docs/Web/API/Element/querySelector">querySelector()</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll">querySelectorAll()</a>, <a href="https://developer.mozilla.org/de/docs/Web/API/Element/closest">closest()</a>, <a href="https://developer.mozilla.org/de/docs/Web/API/Node/previousSibling">previousSibling()</a>, <a href="https://developer.mozilla.org/de/docs/Web/API/Node/nextSibling">nextSibling()</a> alles kein Hexenwerk mehr. Hilfreich sind dabei <a href="https://twitter.com/rauschma/status/874041577223729153">die Tricks</a>, um Element-Collections in iterierbare Arrays umzuwandeln.</li>
<li>DOM-Manipulation: Auch viel leichter geworden, dank <a href="https://developer.mozilla.org/de/docs/Web/API/ChildNode/before">before()</a>, <a href="https://developer.mozilla.org/de/docs/Web/API/ChildNode/after">after()</a> oder <a href="https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/replaceWith">replaceWith()</a>. Mehrere Styles lassen sich prima &#8222;en bloc&#8220; per <code>Object.assign(elem.style, { color: '#fff', fontSize: '1rem' })</code> mit bestehenden Eigenschaften zusammenmergen.</li>
<li>Event Delegation: Dank nunmehr einheitlicher addEventListener()-Methode, durchgehendem <a href="https://www.quirksmode.org/blog/archives/2008/04/delegating_the.html">Capture-Phase</a>-Support und <a href="https://developer.mozilla.org/de/docs/Web/API/Element/matches">Element.matches()</a> recht einfach selbst umzusetzen.
<li>Umgang mit Arrays: Schon ES5 war ein Meilenstein und es wird nur besser: <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a>, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">filter()</a>, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map()</a>, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce">reduce()</a>, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">sort()</a>, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/find">find()</a>, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex">findIndex()</a>, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/includes">includes()</a>, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/every">every()</a>, <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/entries">entries()</a> und <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/values">values()</a>. Und dann gibt es da ja noch die <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_operator">Spread-</a> und <a href="http://exploringjs.com/es6/ch_destructuring.html#sec_rest-operator">Rest-Operatoren</a>.</li>
<li>Umgang mit Objekten: Hier hat ES6 mit <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/assign">assign()</a> und <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">keys()</a> den Grundstein gelegt. Nun wurde u.a. <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/entries">entries()</a> und <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object/values">values()</a> nachgelegt.</li>
<li>Für Karusell-Slider bieten sich die <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap_Points">CSS Snap Points</a> an.</li>
<li>Für das Schriften-Laden die <a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API">CSS Font Loading API</a>.</li>
<li>Für das Lazyloading von Bildern kann man heutzutage gut die <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> verwenden.</li>
<li>Und für weiches Scrollen auf der Seite steht neuerdings die CSS-Eigenschaft <a href="https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior">scroll-behavior</a> mit dem Wert <code>smooth</code> zur Verfügung.</li>
</ul>
</dd>
</dl>
<h3>[00:57:09] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://bitsofco.de/how-the-minmax-function-works/">How the minmax() Function Works</a></dt>
<dd>Die CSS Grid Spec führt eine <code>minmax()</code>-Funktion ein, welche recht praktisch ist.</dd>
<dt><a href="https://www.youtube.com/watch?v=2an6-WVPuJU">Lea Verou &#8211; CSS Variables: var(&#8211;subtitle);</a></dt>
<dd>Wie alle Talks von Lea sehr sehenswert, diesmal mit dem Thema CSS Custom Properties (im Volksmund &#8222;CSS Variablen&#8220;) zum Thema.</dd>
<dt><a href="https://char.gd/blog/2017/essential-apps-for-switching-from-mac-to-windows">Essential apps for switching from Mac to Windows</a></dt>
<dd>Tolle Ressource für Entwickler, die an einem Wechsel zu Windows interessiert sind, ergänzend zu dem vor zwei Revisionen schon einmal verlinkten &#8222;<a href="https://github.com/felixrieseberg/windows-development-environment">Turning Windows into an environment ready for modern development</a>&#8222;.</dd>
<dt><a href="https://www.wired.com/2008/09/mf-chrome/">Inside Chrome: The Secret Project to Crush IE and Remake the Web</a></dt>
<dd>Weil Chrome bald 10 Jahre alt wird dachten wir, verlinken wir dieses historische Fundstück.</dd>
</dl>


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 letzt…

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.

Revision 304: Native Browser-APIs

<p>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.</p>
<h3>[00:00:15] News</h3>
<dl>
<dt><a href="http://blog.npmjs.org/post/161081169345/v500">NPM 5</a></dt>
<dd>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.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:05:32] Cloud Hosting</dt>
<dd>Vorbei sind die Zeiten, in denen man sich beim Rechenzentrum nebenan ein paar hundert Megabyte für&#8217;s teure Geld besorgte. Heute sind alle hippen Websites und Web-Applikationen in der Cloud! Wir erzählen von unseren Erfahrungen mit Diensten wie <a href="https://aws.amazon.com/de/">AWS</a> und den damit verbundenen Services wie S3, EC2, CF,<br />
 SES, RDS, MFG, KTHXBYE. Zahlreiche Kürzel, für die man jeweils ein eigenes Diplom benötigt. Da machen es 1-Click Dienstleister wie <a href="https://www.digitalocean.com/">Digital Ocean</a>, <a href="https://www.heroku.com/">Heroku</a>, <a href="https://zeit.co/now">Now</a> und <a href="https://www.netlify.com/">Netlify</a> 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</dd>
</dl>
<h3>[00:55:30] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/">H2 Push is tougher than I thought</a></dt>
<dd>Schönes neues HTTP2 Feature, allerdings noch nicht reif genug, mein Jake Archibald.</dd>
<dt><a href="https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf">Preload, Prefetch &#038; Priorities in Chrome</a></dt>
<dd>Ein Artikel von Addy Osmani beschreibt wie sich die neuen HTML Attribute auf den Ladevorgang im Chrome Browser auswirken.</dd>
<dt><a href="https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b">11 things I learned reading the Flexbox spec</a></dt>
<dd>In der Spezifikation von Flexbox stecken ein paar spannende Details, die man berücksichtigen kann wenn man mit den Properties jongliert.</dd>
<dt><a href="https://meiert.com/en/blog/20170531/70-percent-css-repetition/">70% CSS Repetition</a></dt>
<dd>Quasi Nachlese zu unserer Revision <a href="/301/">301</a>.</dd>
</dl>


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 Diskussions…

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.

Revision 303: Cloud Hosting

<p>Rodney und Peter hockten sich zusammen um über sehr neue und sehr alte JavaScript-Technologie zu schwafeln.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:12] <a href="https://prepack.io/">Prepack</a></dt>
<dd>Prepack ist ein &#8222;partial evaluator for JavaScript&#8220;. 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 <a href="https://github.com/nolanlawson/optimize-js">optimize-js</a>, was weniger kann, aber schon eingesetzt werden kann. Prepack hingegen ist noch Alpha-Software (obwohl es schon <a href="https://github.com/gajus/prepack-webpack-plugin">ein Webpack-Plugin</a> gibt), was wir anhand von mehreren Code-Samples erfahren.
</dd>
<dt>[00:13:32] Früher war alles <del>besser</del> anders</dt>
<dd>Das <a href="http://httparchive.org/">HTTP Archive</a> hat <a href="https://discuss.httparchive.org/t/javascript-library-detection/955">Statistiken über verbreitete JS-Libraries gesammelt</a> und wir lassen es uns nicht nehmen, die Top&nbsp;10 einzeln durchzusprechen. Auf Platz&nbsp;1 thront wenig überraschend jQuery, über <a href="https://jqueryui.com/">jQuery UI</a> auf Nummer&nbsp;2 (und Rodneys Schwank zur <a href="http://api.jqueryui.com/position/">position()-Funktion</a>) wundern wir uns hingegen schon etwas. Zu den ollen Polyfill-Libraries <a href="http://yepnopejs.com/">Modernizer</a> (Platz&nbsp;3) und <a href="http://yepnopejs.com/">YepNope</a> (Platz&nbsp;5) fällt uns vor allem eine <a href="https://www.youtube.com/watch?v=I2MJiJxGQsY">Reflow-Visualisierung</a> mit der alten Modernizer-Webseite als Testsubjekt ein. <a href="http://getbootstrap.com/javascript/">Bootstraps JS-Komponenten</a> auf Platz&nbsp;4 verwundern nur mäßig, <a href="https://github.com/woocommerce/FlexSlider">FlexSlider</a> an Position&nbsp;6 war uns völlig unbekannt. Die Erinnerung an <a href="https://github.com/swfobject/swfobject">swfobject</a> (Platz&nbsp;7) bewegt Rodney zu Geständnissen aus einer Jugend voller ActionScript. Das achtplatzierte  <a href="http://underscorejs.org/">Underscore.js</a> lebt in Form von <a href="https://lodash.com/">lo-dash</a> bis heute in unseren package.json-Files weiter. Mit Grausen denken wir an die Google-Maps-API (Platz&nbsp;9), wenn auch Peter neue Ideen zum nicht-sachgerechten Einsatz von Maps und Headless Browser anzubieten hat. Die Liste endet mit <a href="https://momentjs.com/">Moment.js</a> auf Platz&nbsp;10, was uns aus irgendwelchen Gründen zur <a href="http://php.net/manual/de/function.strtotime.php">PHP-Funktion strtotime()</a> 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&nbsp;11 in die Runde: Libraries für Layout-Rearrangements wie <a href="https://aerotwist.com/blog/flip-your-animations/">FLIP</a> (was Rodneys Favorit <a href="https://vuejs.org/">Vue.js</a> 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.</dd>
<h3>[01:06:14] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://jakearchibald.com/2017/es-modules-in-browsers/">ECMAScript modules in browsers</a></dt>
<dd>Gewohnte Erklärbär-Qualität aus dem Hause Jake Archibald.</dd>
<dt><a href="https://developers.google.com/web/updates/2017/04/headless-chrome">Getting Started with Headless Chrome</a></dt>
<dd>PhantomJS ist tot, es lebe Headless Chrome!</dd>
<dt><a href="https://github.com/felixrieseberg/windows-development-environment">Turning Windows into an environment ready for modern development</a></dt>
<dd>Tools für Windows.</dd>
<dt><a href="https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md">Install npm packages globally without sudo on macOS and Linux</a></dt>
<dd>Pakete global für den jeweiligen User installieren.</dd>
<dt><a href="https://github.com/zeit/pkg">zeit/pkg</a></dt>
<dd>Bundlet Node-Apps in Executables.</dd>
<dt><a href="https://www.youtube.com/playlist?list=PL37ZVnwpeshFmAPr65sU2O5WMs7_CGjs_#jsconfeu2017">Videos von der JSConf EU 2017</a></dt>
<dd>Schöne kurze Talks.</dd>
</dl>


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“. Prep…

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.

Revision 302: Zukunft und Vergangenheit von JS-Tools und Libraries

<p>Letzte Revision noch über ihn, bzw. einen <a href="https://meiert.com/de/publications/">seiner Artikel</a> gesprochen, heute schon in unserer Sendung: <a href="https://twitter.com/j9t">Jens Oliver Meiert</a>! Wir haben ihn auf der gerade vergangenen beyond tellerrand Düsseldorf zufällig getroffen und ihn erfolgreich in ein Interview zum Thema CSS verstrickt.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:18] <a href="https://meiert.com/en/blog/20170514/maintainability-survey/">Optimierung und Wartbarkeit von CSS</a></dt>
<dd>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&#8216; 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 <a href="http://getbootstrap.com/customize/">an die eigenen Bedürfnisse anzupassen</a>, über <a href="http://tachyons.io/">Tachyons</a>, Yahoos <a href="https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/">Atomic CSS</a>, und <a href="https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/">OOCSS</a> hin zu Googles <a href="http://www.gwtproject.org/">GWT</a>. Zur weiteren Erforschung des Themenkomplexes bittet Jens <a href="https://meiert.com/en/blog/20170514/maintainability-survey/">in einem Artikel</a> darum, <a href="https://docs.google.com/forms/d/e/1FAIpQLSe8HjnEoVFBevk80_MKH2Te5SmAs8p6cJbdQWVgC1V-OorMUw/viewform">seine Umfrage das Thema betreffend auszufüllen</a>. </dd>
</dl>
<h3>Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.youtube.com/watch?v=bmq8SKjRqwQ&#038;list=PL8ZzmQWppBBs6kqSsYUdgyNpUZgOsAGSi">Alle Videos der beyond tellerrand Düsseldorf 2017</a></dt>
<dd>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 <a href="https://www.youtube.com/watch?v=7_FeYJaiAh4&#038;list=PL8ZzmQWppBBs6kqSsYUdgyNpUZgOsAGSi&#038;index=6">das von Espen Brunborg</a>.</dd>
</dl>


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 …

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.

Revision 301: Optimierung und Wartbarkeit von CSS

<p>Revision 300! Aus Gründen™ gab es diesmal aber keine Spezial-Sonder-Revision, sondern Anselm, Schepp, Stefan und Peter ließen einfach das Glücksrad kreisen.</p>
<h3>Glücksrad</h3>
<dl>
<dt>[00:01:06] <a href="https://html.spec.whatwg.org/#canvas">Canvas-Element</a></dt>
<dd>Schepp nutzt die Canvas gerne für <a href="https://davidwalsh.name/convert-canvas-image">Bild-Dateiformat-Konvertierung</a> und <a href="https://www.html5rocks.com/en/tutorials/canvas/imagefilters/">Bildmanipulation</a> und berichtet, wie man (u.A. mit <a href="https://github.com/tsayen/dom-to-image">dom-to-image</a>) via JS, SVG und Canvas Screenshots vom aktuellen DOM machen kann. Außerdem erfahren wir von der Existenz von <a href="http://html5-demos.appspot.com/static/css/webkit-canvas.html">Canvas-Hintergründen in CSS</a> und der <a href="https://developer.mozilla.org/de/docs/Web/API/OffscreenCanvas">Offscreen Canvas</a>.</dd>
<dt>[00:09:17] <a href="https://html.spec.whatwg.org/#network">Web Sockets</a></dt>
<dd>Einstimmiges Urteil: alle lieben <a href="https://socket.io/">Socket.IO</a>. Größere Datenmengen mit <a href="https://webrtc.org/">WebRTC</a> durch die Gegend zu schaufeln hat hingegen noch keiner von uns versucht.</dd>
<dt>[00:16:45] <a href="https://html.spec.whatwg.org/#parsing">Der HTML-Parser</a></dt>
<dd>Peter feiert den in HTML5 spezifizierten HTML-Parser hart, denn vorher haben Browser teils sehr exotische Parsing-Strategien verfolgt&nbsp;&ndash; das MS-Team hat <a href="https://blogs.windows.com/msedgedev/2017/04/19/modernizing-dom-tree-microsoft-edge/#kA7Lkghbl4VsaXuR.97">ihren irren Legacy-Parser kürzlich erläutert</a>. Kein Wunder, dass man da früher den <a href="https://github.com/aFarkas/html5shiv">html5shiv</a> brauchte!</dd>
<dt>[00:22:21] <a href="https://html.spec.whatwg.org/#date-state-(type=date)">input[type=date]</a></dt>
<dd>Kurze Diskussion um das beste und schlimmste Webtech-Feature aller Zeiten. Dass es allerdings nicht die <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl">ECMAScript Internationalization API</a> unterstützt, ist schon doof.</dd>
<dt>[00:28:58] <a href="https://html.spec.whatwg.org/#assigning-keyboard-shortcuts">Keyboard-Shortcuts</a></dt>
<dd>Schepp verblüfft uns, indem er sich sofort an <a href="https://meiert.com/de/publications/articles/20041113/">einen Artikel über Accesskeys</a> erinnert&nbsp;&ndash; von 2004! Unser Fazit: Accesskeys sind für die Tonne, JS-Keyboard-Shortcuts allerdings nicht unbedingt.</dd>
<dt>[00:37:00] <a href="https://html.spec.whatwg.org/#tables">Tabellen</a></dt>
<dd>Während wir anfangs noch tatsächlich über Tabellen sprechen (u.A. die jQuery-Plugins <a href="https://datatables.net/">DataTables</a> und <a href="http://js-grid.com/">jsGrid</a>) schweifen wir kurz in Richtung „Verdienste langlebiger JS-Libraries“ ab; unter anderem fallen die Namen <a href="https://dojotoolkit.org/">Dojo</a> (dem wir Promises und Module in JS zu verdanken haben), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, <a href="http://www.telerik.com/kendo-ui">Kendo UI</a> und <a href="https://mootools.net/">MooTools</a>. Zum Ende hin geht es wieder kurz um Tabellen (speziell die weithin unbekannten Attribute <code>scope</code> und <code>headers</code>) und <a href="https://www.iandevlin.com/blog/2013/06/css/css-stacking-with-display-table">Layout-Tricks</a>, die sich mit Tabellen abziehen lassen.</dd>
</dl>


Revision 300! Aus Gründen™ gab es diesmal aber keine Spezial-Sonder-Revision,
sondern Anselm, Schepp, Stefan und Peter ließen einfach das Glücksrad kreisen.


GLÜCKSRAD

[00:01:06] CANVAS-ELEMENT

Sch…

Revision 300! Aus Gründen™ gab es diesmal aber keine Spezial-Sonder-Revision,
sondern Anselm, Schepp, Stefan und Peter ließen einfach das Glücksrad kreisen.


GLÜCKSRAD

[00:01:06] CANVAS-ELEMENT

Schepp nutzt die Canvas gerne für Bild-Dateiformat-Konvertierung und
Bildmanipulation und berichtet, wie man (u.A. mit dom-to-image) via JS, SVG und
Canvas Screenshots vom aktuellen DOM machen kann. Außerdem erfahren wir von der
Existenz von Canvas-Hintergründen in CSS und der Offscreen Canvas.

[00:09:17] WEB SOCKETS

Einstimmiges Urteil: alle lieben Socket.IO. Größere Datenmengen mit WebRTC durch
die Gegend zu schaufeln hat hingegen noch keiner von uns versucht.

[00:16:45] DER HTML-PARSER

Peter feiert den in HTML5 spezifizierten HTML-Parser hart, denn vorher haben
Browser teils sehr exotische Parsing-Strategien verfolgt – das MS-Team hat ihren
irren Legacy-Parser kürzlich erläutert. Kein Wunder, dass man da früher den
html5shiv brauchte!

[00:22:21] INPUT[TYPE=DATE]

Kurze Diskussion um das beste und schlimmste Webtech-Feature aller Zeiten. Dass
es allerdings nicht die ECMAScript Internationalization API unterstützt, ist
schon doof.

[00:28:58] KEYBOARD-SHORTCUTS

Schepp verblüfft uns, indem er sich sofort an einen Artikel über Accesskeys
erinnert – von 2004! Unser Fazit: Accesskeys sind für die Tonne,
JS-Keyboard-Shortcuts allerdings nicht unbedingt.

[00:37:00] TABELLEN

Während wir anfangs noch tatsächlich über Tabellen sprechen (u.A. die
jQuery-Plugins DataTables und jsGrid) schweifen wir kurz in Richtung „Verdienste
langlebiger JS-Libraries“ ab; unter anderem fallen die Namen Dojo (dem wir
Promises und Module in JS zu verdanken haben), ExtJS, Kendo UI und MooTools. Zum
Ende hin geht es wieder kurz um Tabellen (speziell die weithin unbekannten
Attribute scope und headers) und Layout-Tricks, die sich mit Tabellen abziehen
lassen.

Revision 300: Glücksrad!

<p>In dieser Revision haben wir das Vergnügen, uns von <strong>Stefan Judis</strong> (<a href="https://twitter.com/stefanjudis">Twitter</a>, <a href="https://github.com/stefanjudis">GitHub</a>, <a href="https://www.stefanjudis.de/">Webseite</a>) alles über Electron erzählen zu lassen.</p>
<p>Ein vorerst letztes mal wird unser Podcast von <a href="http://workingdraft.wire.com">Wire</a> gesponsort, dem <a href="https://www.heise.de/newsticker/meldung/Sicherheits-Audit-von-Krypto-Messenger-Wire-abgeschlossen-3621550.html">sicheren</a> <a href="https://github.com/wireapp">Open Source</a> Messaging Client für all eure Plattformen, welcher auch den Desktop als First-Class-Citizen betrachtet. Jetzt auch mit Open-Source-Server-Komponenten!</p>
<p><a href="http://workingdraft.wire.com" style="display: block; margin: 1em 0; width: 100%; max-width: 500px"><img loading="lazy" src="http://workingdraft.de/wp-content/uploads/2017/02/Wire-800x350.png" alt="" width="800" height="350" class="alignleft size-full wp-image-3294" style="width: 100%; height: auto" srcset="https://workingdraft.de/wp-content/uploads/2017/02/Wire-800x350.png 800w, https://workingdraft.de/wp-content/uploads/2017/02/Wire-800x350-300x131.png 300w, https://workingdraft.de/wp-content/uploads/2017/02/Wire-800x350-768x336.png 768w" sizes="(max-width: 800px) 100vw, 800px" /></a></p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:05] <a href="https://electron.atom.io/">Electron</a></dt>
<dd>Mit Electron können Frontend-Entwickler mit HTML, CSS und JavaScript Desktop-Apps für alle Plattformen bauen&nbsp;&ndash; mit Zugriff auf das Dateisystem und allem. Es handelt sich um ein auf <a href="https://www.chromium.org/">Chromium</a> und <a href="https://nodejs.org/en/">Node</a> basierendes Projekt aus der Feder von Github, das aus dem <a href="https://atom.io/">Atom-Editor</a> geboren wurde. Andere bekannte Electron-Apps sind <a href="https://code.visualstudio.com/">Visual Studio Code</a> und <a href="https://hyper.is/">Hyper</a>. Wir diskutieren Fragen und um Cross-Plattform-Apps und Accessibility sowie die Vergleiche von Electron mit PWAs, <a href="https://de.wikipedia.org/wiki/Adobe_Integrated_Runtime">Adobe AIR</a> und <a href="https://josephg.com/blog/electron-is-flash-for-the-desktop/">Flash</a>. Außerdem gibt uns Stefan einen kleinen App-Bastel-Walkthrough, bei dem wir speziell auf Tools wie den <a href="https://www.npmjs.com/package/nativefier">nativefier</a>, <a href="https://github.com/electron-userland/electron-packager">electron-packager</a> und <a href="https://github.com/electron-userland/electron-builder">electron-builder</a> eingehen. Weitere Ressourcen sind bei <a href="https://github.com/sindresorhus/awesome-electron">Sindre Sorhus</a> und im Projekt <a href="https://github.com/electron-userland">Electron Userland</a> zu finden.</dd>
</dl>
<h3>[00:42:54] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://community.risingstack.com/the-definitive-guide-to-object-streams-in-node-js/">The Definitive Guide to Object Streams in Node.js</a></dt>
<dd>Unser liebster Österreicher erklärbärt ein gar nicht mal so unkompliziertes Thema.</dd>
<dt><a href="https://scriptconf.org/blog/javascript-is-a-buffet-not-the-enemy-chris-heilmann/">JavaScript is a buffet, not the enemy</a></dt>
<dd>Talk von Chris Heilmann (auf einer von unserem liebsten Österreicher organisierten Konferenz).</dd>
<dt><a href="https://snippets.now.sh/">Sublime Text, Atom &amp; VS Code snippet generator</a></dt>
<dd>Gerade für VS Code ein Segen, denn dessen doofes JSON-Format erlaubt auch bei mehrzeiligen Snippets keine Zeilenumbrüche.</dd>
<dt><a href="https://helloanselm.com/2017/flow-root-supports/">Using flow-root today</a></dt>
<dd>Clearfix 2.0, erklärt von Anselm.</dd>
<dt><a href="https://madebymike.com.au/writing/the-invisible-parts-of-CSS/">The invisible parts of CSS</a></dt>
<dd>Diverse nicht-offensichtliche Teile von CSS anschaulich erklärt.</dd>
</dl>


In dieser Revision haben wir das Vergnügen, uns von Stefan Judis (Twitter,
GitHub, Webseite) alles über Electron erzählen zu lassen.

Ein vorerst letztes mal wird unser Podcast von Wire gesponsort, de…

In dieser Revision haben wir das Vergnügen, uns von Stefan Judis (Twitter,
GitHub, Webseite) alles über Electron erzählen zu lassen.

Ein vorerst letztes mal wird unser Podcast von Wire gesponsort, dem sicheren
Open Source Messaging Client für all eure Plattformen, welcher auch den Desktop
als First-Class-Citizen betrachtet. Jetzt auch mit
Open-Source-Server-Komponenten!




SCHAUNOTIZEN

[00:03:05] ELECTRON

Mit Electron können Frontend-Entwickler mit HTML, CSS und JavaScript
Desktop-Apps für alle Plattformen bauen – mit Zugriff auf das Dateisystem und
allem. Es handelt sich um ein auf Chromium und Node basierendes Projekt aus der
Feder von Github, das aus dem Atom-Editor geboren wurde. Andere bekannte
Electron-Apps sind Visual Studio Code und Hyper. Wir diskutieren Fragen und um
Cross-Plattform-Apps und Accessibility sowie die Vergleiche von Electron mit
PWAs, Adobe AIR und Flash. Außerdem gibt uns Stefan einen kleinen
App-Bastel-Walkthrough, bei dem wir speziell auf Tools wie den nativefier,
electron-packager und electron-builder eingehen. Weitere Ressourcen sind bei
Sindre Sorhus und im Projekt Electron Userland zu finden.


[00:42:54] KEINE SCHAUNOTIZEN

THE DEFINITIVE GUIDE TO OBJECT STREAMS IN NODE.JS

Unser liebster Österreicher erklärbärt ein gar nicht mal so unkompliziertes
Thema.

JAVASCRIPT IS A BUFFET, NOT THE ENEMY

Talk von Chris Heilmann (auf einer von unserem liebsten Österreicher
organisierten Konferenz).

SUBLIME TEXT, ATOM & VS CODE SNIPPET GENERATOR

Gerade für VS Code ein Segen, denn dessen doofes JSON-Format erlaubt auch bei
mehrzeiligen Snippets keine Zeilenumbrüche.

USING FLOW-ROOT TODAY

Clearfix 2.0, erklärt von Anselm.

THE INVISIBLE PARTS OF CSS

Diverse nicht-offensichtliche Teile von CSS anschaulich erklärt.

Revision 299: Electron

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen

PODLIST

Working Draft

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen.

Neue Episoden

Revision 310: Service Worker – Bericht aus der Praxis

Working Draft

Revision 309: Kein Thema

Working Draft

Revision 308: CSS mit Sven Wolfermann

Working Draft

Revision 307: HEIF, Bildformate und -optimierung

Working Draft

Revision 306: Accessibility und CSS Grids

Working Draft

Revision 305: Datenjournalismus

Working Draft

Revision 304: Native Browser-APIs

Working Draft

Revision 303: Cloud Hosting

Working Draft

Revision 302: Zukunft und Vergangenheit von JS-Tools und Libraries

Working Draft

Revision 301: Optimierung und Wartbarkeit von CSS

Working Draft

Revision 300: Glücksrad!

Working Draft

Revision 299: Electron

Working Draft