<p>In Ermangelnung großer Themen ließen Stefan, Schepp, Peter und Anselm mal wieder das Glücksrad rotieren.</p>
<h3>[00:00:15] News</h3>
<dl>
<dt><a href="https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only?hl=en">Geolocation API removed from unsecured origins in Chrome 50</a></dt>
<dd>Ab jetzt gibt es Ortung nur noch mit HTTPS.</dd>
</dl>
<h3>[00:00:46] Glücksrad</h3>
<dl>
<dt><a href="https://html.spec.whatwg.org/multipage/browsers.html#dom-open">window.open()</a></dt>
<dd>Popups, blast from the past! Wir erinnern uns an die seltsamen Parameter dieser Funktion (die interessanterweise in <a href="https://drafts.csswg.org/cssom-view/#the-features-argument-to-the-open()-method">einer CSS-Spezifikation</a> festgehalten sind) sowie an <a href="https://mathiasbynens.github.io/rel-noopener/">rel=noopener</a>.</dd>
<dt><a href="https://www.w3.org/TR/css3-marquee/">CSS Marquee Module Level 3</a></dt>
<dd>Stellt sich raus: das gibt‘s gar nicht.</dd>
<dt>CSS Scroll Snap Points</dt>
<dd>Kurze Diskussion über Sinn und Zweck der Scroll Snap Points, die <a href="https://www.w3.org/TR/css-snappoints-1/">zwei</a> <a href="https://drafts.csswg.org/css-scroll-snap/">verschiedenen</a> Spezifikationsversionen und Vorreiterrolle des IE.</dd>
<dt>Microdata</dt>
<dd>Erfolgloser Versuch, zwischen <a href="http://microformats.org/">Microformats</a>, <a href="http://rdfa.info/">RDFa</a> und <a href="https://html.spec.whatwg.org/#microdata">HTML5-Microdata</a> den Überblick zu behalten. Anschließende Grundsatzdebatte über Semantik (und <a href="http://json-ld.org/">JSON-LD</a>), SEO (und <a href="https://schema.org/">schema.org</a>) und <a href="https://xkcd.com/927/">Standards</a>.</dd>
<dt><a href="https://www.w3.org/TR/css-round-display-1/">CSS Round Display</a></dt>
<dd>Wurde bereits in <a href="http://workingdraft.de/236/">Revision 236</a> für mehr so mittelgut befunden.</dd>
<dt>a href=&#8220;https://www.w3.org/TR/css3-hyperlinks/&#8220;>CSS3 Hyperlink Presentation Module</a></dt>
<dd>Ein weiterer ad acta gelegter Spezifikationsentwurf.</dd>
<dt><a href="https://www.w3.org/TR/CSS1/">Cascading Style Sheets, level 1</a></dt>
<dd>Wir bewundern das revolutionäre Frühwerk der Standards-Entwicklung.</dd>
</dl>
<h3>[00:53:33] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://jakearchibald.com/2016/caching-best-practices/">Caching best practices &amp; max-age gotchas</a></dt>
<dd>Jake Archibald in gewohnt lehrreich-humorvollem Stil.</dd>
</dl>


In Ermangelnung großer Themen ließen Stefan, Schepp, Peter und Anselm mal wieder
das Glücksrad rotieren.


[00:00:15] NEWS

GEOLOCATION API REMOVED FROM UNSECURED ORIGINS IN CHROME 50

Ab jetzt gibt e…

Working Draft

In Ermangelnung großer Themen ließen Stefan, Schepp, Peter und Anselm mal wieder
das Glücksrad rotieren.


[00:00:15] NEWS

GEOLOCATION API REMOVED FROM UNSECURED ORIGINS IN CHROME 50

Ab jetzt gibt es Ortung nur noch mit HTTPS.


[00:00:46] GLÜCKSRAD

WINDOW.OPEN()

Popups, blast from the past! Wir erinnern uns an die seltsamen Parameter dieser
Funktion (die interessanterweise in einer CSS-Spezifikation festgehalten sind)
sowie an rel=noopener.

CSS MARQUEE MODULE LEVEL 3

Stellt sich raus: das gibt‘s gar nicht.

CSS SCROLL SNAP POINTS

Kurze Diskussion über Sinn und Zweck der Scroll Snap Points, die zwei
verschiedenen Spezifikationsversionen und Vorreiterrolle des IE.

MICRODATA

Erfolgloser Versuch, zwischen Microformats, RDFa und HTML5-Microdata den
Überblick zu behalten. Anschließende Grundsatzdebatte über Semantik (und
JSON-LD), SEO (und schema.org) und Standards.

CSS ROUND DISPLAY

Wurde bereits in Revision 236 für mehr so mittelgut befunden.

A HREF=“HTTPS://WWW.W3.ORG/TR/CSS3-HYPERLINKS/“>CSS3 HYPERLINK PRESENTATION
MODULE

Ein weiterer ad acta gelegter Spezifikationsentwurf.

CASCADING STYLE SHEETS, LEVEL 1

Wir bewundern das revolutionäre Frühwerk der Standards-Entwicklung.


[00:53:33] KEINE SCHAUNOTIZEN

CACHING BEST PRACTICES & MAX-AGE GOTCHAS

Jake Archibald in gewohnt lehrreich-humorvollem Stil.

Revision 262: News, Glücksrad, Links

<p>Anselm, Schepp und Stefan nehmen sich zwei herumsurrende Artikel als Anstoß für ein ausgedehntes Plaudern aus dem Nähkästchen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:27] <a href="https://sarasoueidan.com/blog/icon-fonts-to-svg/">Converting Font Icons to SVG</a></dt>
<dd>Sara Soueidan erklärt den Icon Fonts den Tod mit diesem ausführlichen Migrations-Guide. Wir sprechen über unsere Erfahrungen und den Problemchen, loben aber auch gleichzeitig neue Workflows und ein viel &#8222;sauberes&#8220; Entwicklungserlebnis.</dd>
<dt>[00:25:20] <a href="http://alistapart.com/article/container-queries-once-more-unto-the-breach">Container Queries: Once more unto the breach</a></dt>
<dd>Media Queries sind fein, man stößt allerdings schnell an seine Grenzen wenn man nicht das gesamte Bild betrachten möchte, sondern im Detail pro Komponente das Look and Feel bestimmen möchte. Container Queries sind der Titel einer neuen Spezifikation, die sich genau um solche Dinge kümmern wollen. Wir erklären warum die ehemals genannten &#8222;Element Queries&#8220; nun anders heißen, welches grundlegende Problem mit dieser Neubenamsung umgangen wird und wie man sie heute schon einsetzen kann. Schepp zum Beispiel schwört auf diesen <a href="https://github.com/marcj/css-element-queries">Polyfill</a>.</dd>
</dl>
<h3>[00:51:21] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.npmjs.com/package/hotel">Hotel</a></dt>
<dd>Hotel lässt alle eure Entwicklungsserver und die damit verbundenen Host-Einträge bequem über eine Weboberfläche verwalten.</dd>
<dt><a href="http://riotjs.com/">Riot.js</a></dt>
<dd>Eine User Interface Bibliothek, die sich an React hält aber mit deutlich geringerem Footprint auskommt.</dd>
<dt><a href="https://github.com/morishitter/stylefmt">Stylefmt</a></dt>
<dd>Coding Guidelines sind wichtig, sie einzuhalten kann schwer sein. Stylefmt formatiert eure Stylesheets nach einem festgelegten Regelwerk. Pre-Commit-Hook, und fertig ist die Einheitlichkeit.</dd>
<dt><a href="https://github.com/nolanlawson/rollupify">Rollupify</a></dt>
<dd>Rollup ist groß. Browserify ist groß. Beides zusammen gibt laut Engineering-Meister Rodney in seinem Projekt über 40% Platzeinsparung. Hossa!</dd>
</dl>


Anselm, Schepp und Stefan nehmen sich zwei herumsurrende Artikel als Anstoß für
ein ausgedehntes Plaudern aus dem Nähkästchen.


SCHAUNOTIZEN

[00:00:27] CONVERTING FONT ICONS TO SVG

Sara Soueidan er…

Anselm, Schepp und Stefan nehmen sich zwei herumsurrende Artikel als Anstoß für
ein ausgedehntes Plaudern aus dem Nähkästchen.


SCHAUNOTIZEN

[00:00:27] CONVERTING FONT ICONS TO SVG

Sara Soueidan erklärt den Icon Fonts den Tod mit diesem ausführlichen
Migrations-Guide. Wir sprechen über unsere Erfahrungen und den Problemchen,
loben aber auch gleichzeitig neue Workflows und ein viel „sauberes“
Entwicklungserlebnis.

[00:25:20] CONTAINER QUERIES: ONCE MORE UNTO THE BREACH

Media Queries sind fein, man stößt allerdings schnell an seine Grenzen wenn man
nicht das gesamte Bild betrachten möchte, sondern im Detail pro Komponente das
Look and Feel bestimmen möchte. Container Queries sind der Titel einer neuen
Spezifikation, die sich genau um solche Dinge kümmern wollen. Wir erklären warum
die ehemals genannten „Element Queries“ nun anders heißen, welches grundlegende
Problem mit dieser Neubenamsung umgangen wird und wie man sie heute schon
einsetzen kann. Schepp zum Beispiel schwört auf diesen Polyfill.


[00:51:21] KEINE SCHAUNOTIZEN

HOTEL

Hotel lässt alle eure Entwicklungsserver und die damit verbundenen Host-Einträge
bequem über eine Weboberfläche verwalten.

RIOT.JS

Eine User Interface Bibliothek, die sich an React hält aber mit deutlich
geringerem Footprint auskommt.

STYLEFMT

Coding Guidelines sind wichtig, sie einzuhalten kann schwer sein. Stylefmt
formatiert eure Stylesheets nach einem festgelegten Regelwerk. Pre-Commit-Hook,
und fertig ist die Einheitlichkeit.

ROLLUPIFY

Rollup ist groß. Browserify ist groß. Beides zusammen gibt laut
Engineering-Meister Rodney in seinem Projekt über 40% Platzeinsparung. Hossa!

Revision 261: SVG Icons, Element/Container Queries

<p>Zwei Änderungen in der Spezifikation sorgen für den nötigen Gesprächsstoff in der nächsten Stunde. Rodney, Hans und Stefan stellen sich Fragen zur HTML Sektionierung und JavaScript Modulen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:20] <a href="https://lists.w3.org/Archives/Public/public-html/2016Apr/0032.html">H1-H6 statt beliebiger Sektionsverschachtelungen</a></dt>
<dd>Die wunderbaren Möglichkeiten des HTML5 Outlining Algorithmus. Großartiges wurde von ihm erwartet, die Implementierung auf Seiten der Werkzeugshersteller und Webseiten-Entwickler hält sich allerdings in Grenzen. Schade, wie wir finden. Wir resümieren über unsere eigene Verwendung und hinterfragen den Entscheid, ob es gut ist die <code>&lt;section&gt;</code> Verschachtelung als Best Practice Beispiel aus der Spezifikation zu nehmen. Denn nach einem Herausnehmen folgt meistens ein Vergessen &#8230;</dd>
<dt>[00:26:57] <a href="https://blog.whatwg.org/js-modules">Adding JavaScript modules to the web platform</a></dt>
<dd>JavaScript Module! Wir reden hier nicht von Entwicklungsmustern oder Werkzeugs-Gedöhns, sondern vom echten Zeug: JavaScript Module im Browser. Was bringt die Spezifikation, warum hat es so lange gedauert, und wie schaut die Zukunft damit aus. Rodney steht unseren Fragen Rede und Antwort.</dd>
</dl>
<h3>[00:44:26] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://js-kongress.de/">JS Kongress</a></dt>
<dd>In München steht ein Kongresshaus. Eins, zwei, JavaScript. 2 Tage, 16 Speaker, Brezen. Stefan ist dort.</dd>
<dt><a href="https://github.com/GoogleChrome/sw-toolbox">Service Worker Toolbox</a></dt>
<dd>Die Service Worker Toolbox bringt Express-ähnliches Routing und Standardfunktionalität wie &#8222;Netzwerk zuerst! Cache danach!&#8220;. Erleichtert die Arbeit für Standard-Tasks.</dd>
<dt><a href="https://www.youtube.com/playlist?list=PL4eq2DPpyBblc8aQAd516-jGMdAhEeUiW">EmberConf 2016</a></dt>
<dd>Das Stefan nicht alleine mit seiner Ember.js Freude ist zeigen die Videos der EmberConf. Mindestens 20 andere Menschen auf diesem Erdball nutzen das Framework. Leute, die gerne mehr darüber lernen wollen, sollen sich diese Case Studies sehr detailliert anschauen.</dd>
</dl>


Zwei Änderungen in der Spezifikation sorgen für den nötigen Gesprächsstoff in
der nächsten Stunde. Rodney, Hans und Stefan stellen sich Fragen zur HTML
Sektionierung und JavaScript Modulen.


SCHAUNOT…

Zwei Änderungen in der Spezifikation sorgen für den nötigen Gesprächsstoff in
der nächsten Stunde. Rodney, Hans und Stefan stellen sich Fragen zur HTML
Sektionierung und JavaScript Modulen.


SCHAUNOTIZEN

[00:00:20] H1-H6 STATT BELIEBIGER SEKTIONSVERSCHACHTELUNGEN

Die wunderbaren Möglichkeiten des HTML5 Outlining Algorithmus. Großartiges wurde
von ihm erwartet, die Implementierung auf Seiten der Werkzeugshersteller und
Webseiten-Entwickler hält sich allerdings in Grenzen. Schade, wie wir finden.
Wir resümieren über unsere eigene Verwendung und hinterfragen den Entscheid, ob
es gut ist die <section> Verschachtelung als Best Practice Beispiel aus der
Spezifikation zu nehmen. Denn nach einem Herausnehmen folgt meistens ein
Vergessen …

[00:26:57] ADDING JAVASCRIPT MODULES TO THE WEB PLATFORM

JavaScript Module! Wir reden hier nicht von Entwicklungsmustern oder
Werkzeugs-Gedöhns, sondern vom echten Zeug: JavaScript Module im Browser. Was
bringt die Spezifikation, warum hat es so lange gedauert, und wie schaut die
Zukunft damit aus. Rodney steht unseren Fragen Rede und Antwort.


[00:44:26] KEINE SCHAUNOTIZEN

JS KONGRESS

In München steht ein Kongresshaus. Eins, zwei, JavaScript. 2 Tage, 16 Speaker,
Brezen. Stefan ist dort.

SERVICE WORKER TOOLBOX

Die Service Worker Toolbox bringt Express-ähnliches Routing und
Standardfunktionalität wie „Netzwerk zuerst! Cache danach!“. Erleichtert die
Arbeit für Standard-Tasks.

EMBERCONF 2016

Das Stefan nicht alleine mit seiner Ember.js Freude ist zeigen die Videos der
EmberConf. Mindestens 20 andere Menschen auf diesem Erdball nutzen das
Framework. Leute, die gerne mehr darüber lernen wollen, sollen sich diese Case
Studies sehr detailliert anschauen.

Revision 260: Spezifikations-Neuheiten

<p>Da die Stammbesetzung diesmal extrem spärlich besetzt und zudem unsere Themenauswahl begrenzt war, lud sich Anselm für die Sendung <a href="http://mxstbr.com/">Max Stoiber</a> ein, um über React Entwicklung und den mittlerweile nicht mehr so einfachen Einstieg in die Front-end Entwicklung zu sprechen. </p>
<h3>[00:00:54] News</h3>
<dl>
<dt><a href="http://gruntjs.com/blog/2016-04-04-grunt-1.0.0-released">Grunt 1.0.0</a></dt>
<dd>Endlich ist die stabile Version 1.0.0 von Grunt veröffentlicht worden, die jede Menge Bugs behebt und Kleinigkeiten verbessert.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:10] <a href="https://github.com/mxstbr/react-boilerplate">React Boilerplate</a></dt>
<dd>Wir nehmen das von Max entwickelte React Boilerplate als Anlass, um über React Application Development zu sprechen und kämmen hier den gesamten Stack durch: Wir beginnen bei Erleichterungen im Workflow, Refactoring hin zu allumfassenden Components und die Erfahrung, die Max machen konnte. Wir sprechen über <a href="https://github.com/amwmedia/plop">Component Generators</a>, Server-Side Rendering, <a href="https://css-tricks.com/css-modules-part-1-need/">CSS Modules</a> und versuchen zu lösen, warum so viele React Applications nur mittelmäßigen Code ausgeben.</dd>
<dt>[00:22:10] <a href="https://github.com/mxstbr/ama/issues/8">„… nobody has a clue what they&#8217;re doing”</a></dt>
<dd>ist ein Statement von Max, als er von einem Junior-Developer gefragt wurde, ob er sich auf eine Stelle bewerben solle, weil er die Anforderungen nicht ganz erfüllen könne. Wir sprechen über den Einstieg in die Frontend Entwicklung, die heutigen Hürden dabei und warum es<br />
wohl keinen Frontend Entwickler geben wird, der von sich behaupten kann, alles zu wissen. Abschließend sehen wir in die Zukunft und erzählen, wie wir uns diese vorstellen.</dd>
</dl>
<h3>[00:41:29] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://medium.com/@nikgraf/why-you-should-enforce-dangling-commas-for-multiline-statements-d034c98e36f8#.1gl6equg0">Why you should enforce Dangling Commas for Multiline Statements</a></dt>
<dd>Max hat uns noch einen Link mitgebracht, in dem erklärt wird, warum Dangling Commas durchaus sinnvoll sein können.</dd>
</dl>


Da die Stammbesetzung diesmal extrem spärlich besetzt und zudem unsere
Themenauswahl begrenzt war, lud sich Anselm für die Sendung Max Stoiber ein, um
über React Entwicklung und den mittlerweile nicht…

Da die Stammbesetzung diesmal extrem spärlich besetzt und zudem unsere
Themenauswahl begrenzt war, lud sich Anselm für die Sendung Max Stoiber ein, um
über React Entwicklung und den mittlerweile nicht mehr so einfachen Einstieg in
die Front-end Entwicklung zu sprechen.


[00:00:54] NEWS

GRUNT 1.0.0

Endlich ist die stabile Version 1.0.0 von Grunt veröffentlicht worden, die jede
Menge Bugs behebt und Kleinigkeiten verbessert.


SCHAUNOTIZEN

[00:02:10] REACT BOILERPLATE

Wir nehmen das von Max entwickelte React Boilerplate als Anlass, um über React
Application Development zu sprechen und kämmen hier den gesamten Stack durch:
Wir beginnen bei Erleichterungen im Workflow, Refactoring hin zu allumfassenden
Components und die Erfahrung, die Max machen konnte. Wir sprechen über Component
Generators, Server-Side Rendering, CSS Modules und versuchen zu lösen, warum so
viele React Applications nur mittelmäßigen Code ausgeben.

[00:22:10] „… NOBODY HAS A CLUE WHAT THEY’RE DOING”

ist ein Statement von Max, als er von einem Junior-Developer gefragt wurde, ob
er sich auf eine Stelle bewerben solle, weil er die Anforderungen nicht ganz
erfüllen könne. Wir sprechen über den Einstieg in die Frontend Entwicklung, die
heutigen Hürden dabei und warum es
wohl keinen Frontend Entwickler geben wird, der von sich behaupten kann, alles
zu wissen. Abschließend sehen wir in die Zukunft und erzählen, wie wir uns diese
vorstellen.


[00:41:29] KEINE SCHAUNOTIZEN

WHY YOU SHOULD ENFORCE DANGLING COMMAS FOR MULTILINE STATEMENTS

Max hat uns noch einen Link mitgebracht, in dem erklärt wird, warum Dangling
Commas durchaus sinnvoll sein können.

Revision 259: React Entwicklung und Frontend Einstieg

<p>Schepp, Peter und Anselm erklären nochmal, was beim npm-Gate so abging und warum wir endlich mal vorher nachdenken sollten, wie wir Tools und Workflows aufbauen, statt erst dann, wenn es zu spät ist. Und danach nehmen wir uns gleich noch ein Thema vor, was nach wie vor spannend bleibt: Warum bauen wir so lahme Seiten, vor allem für mobile Endgeräte?</p>
<h3>[00:00:11] News</h3>
<dl>
<dt><a href="http://www.hanselman.com/blog/DevelopersCanRunBashShellAndUsermodeUbuntuLinuxBinariesOnWindows10.aspx">Developers can run Bash Shell and user-mode Ubuntu Linux binaries on Windows 10</a></dt>
<dd>Was sollen wir noch dazu sagen, außer: Endlich! Und: Das ist großartig!</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:47] <a href="https://twitter.com/wesbos/status/712414056150384640/photo/1">Left-Pad / npm-Gate</a></dt>
<dd>Der Entwickler eines npm Moduls für eine Left-Pad Function hat <a href="https://www.npmjs.com/package/left-pad">selbiges ge-unpublished</a> und damit das halbe Internet kaputt gemacht. Da leider Babel und viele andere Projekte dieses als Dependency verwendeten, schlugen sofort alle CI Systeme fehl. Daraus entstand eine hitzige Debatte um kleine Module in JavaScript, npm und Workflows an sich. Wir sprechen darüber und versuchen herauszufinden, wie wir robustere Workflows bauen können ohne Module nur zu copy-pasten. Seitdem gibt es eine neue <a href="http://blog.npmjs.org/post/141905368000/changes-to-npms-unpublish-policy">npm unpublish policy</a>, <a href="https://medium.com/@Rich_Harris/how-to-not-break-the-internet-with-this-one-weird-trick-e3e2d57fee28#.btpazbyfi">Lösungs-Ansätze</a> und auch direkt <a href="https://medium.com/@boennemann/your-just-considered-harmful-679db7366b95#.fishn1x4i">neue npm</a> <a href="https://medium.com/@Rich_Harris/how-to-not-break-the-internet-with-this-one-weird-trick-e3e2d57fee28#.btpazbyfi">Problemchen</a>. Aber da wäre ja auch noch <a href="http://bower.io/">Bower</a> und auch sowas wie das <a href="https://ipfs.io/ipfs/QmTkzDwWqPbnAh5YiV5VwcTLnGdwSNsNTn2aDxdXBFca7D/example#/ipfs/QmQwAP9vFjbCtKvD8RkJdCvPHqLQjZfW7Mqbbqx18zd8j7/git/readme.md">relativ unbekannte IPFS</a>, was sich ziemlich gut als distributed package manager eignen würde.</dd>
<dt>[00:28:38] <a href="https://blog.runspired.com/2016/03/25/the-chrome-distortion-chrome-alters-our-expectations-in-highly-negative-ways/">The Chrome Distortion: how Chrome negatively alters our expectations.</a></dt>
<dd>Diesen doch sehr fraglichen Artikel-Titel haben wir zum Anlass genommen, zu hinterfragen, warum wir überhaupt feststellen können, dass mobile Browser langsam sind und ob das überhaupt die Ursache des Problems ist? Wir kommen selbstverständlich zu einem ganz anderen Schluss, denn wir bauen einfach <a href="http://idlewords.com/talks/website_obesity.htm">immer unnötig größere Seiten</a>, mit vielen unnötigen Spielereien. Trotzdem versuchen wir, unsere Verantwortung dann am Ende auf die Browser zu schieben, einfach um uns besser zu fühlen. Letztendlich sprechen wir auch noch über Projektmanagement und Verantwortung als Entwickler, sowie Hardware, die Nicht-Entwickler besitzen.</dd>
<h3>[01:28:48] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://mathiasbynens.github.io/rel-noopener/#hax">link rel=noopener</a></dt>
<dd>Ein neues Attribut, um zu verhindern, dass <code>window.opener</code> durch nutzergenerierten Inhalt missbraucht werden kann.</dd>
<dt><a href="http://slemgrim.com/kickstart-into-server-push/">A kick-start into server push</a></dt>
<dd>Ein leicht verständlicher Artikel zum Thema Server Push.</dd>
<dt><a href="http://node.green/">Node.green</a></dt>
<dd>Eine coole tabellarische Aufstellung, welches ECMA-Script Feature in welcher Node Version unterstützt wird.</dd>
<dt><a href="https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/">Referrer and cache control APIs for <code>fetch()</code></a></dt>
<dd>Auch wenn es noch ein klein wenig dauert, bis zum Firefox 48 Release, finden wir diese Features äußerst hilfreich und ihr könnt gleich mal anfangen, das zu nutzen.</dd>
</dl>


Schepp, Peter und Anselm erklären nochmal, was beim npm-Gate so abging und warum
wir endlich mal vorher nachdenken sollten, wie wir Tools und Workflows aufbauen,
statt erst dann, wenn es zu spät ist. …

Schepp, Peter und Anselm erklären nochmal, was beim npm-Gate so abging und warum
wir endlich mal vorher nachdenken sollten, wie wir Tools und Workflows aufbauen,
statt erst dann, wenn es zu spät ist. Und danach nehmen wir uns gleich noch ein
Thema vor, was nach wie vor spannend bleibt: Warum bauen wir so lahme Seiten,
vor allem für mobile Endgeräte?


[00:00:11] NEWS

DEVELOPERS CAN RUN BASH SHELL AND USER-MODE UBUNTU LINUX BINARIES ON WINDOWS 10

Was sollen wir noch dazu sagen, außer: Endlich! Und: Das ist großartig!


SCHAUNOTIZEN

[00:00:47] LEFT-PAD / NPM-GATE

Der Entwickler eines npm Moduls für eine Left-Pad Function hat selbiges
ge-unpublished und damit das halbe Internet kaputt gemacht. Da leider Babel und
viele andere Projekte dieses als Dependency verwendeten, schlugen sofort alle CI
Systeme fehl. Daraus entstand eine hitzige Debatte um kleine Module in
JavaScript, npm und Workflows an sich. Wir sprechen darüber und versuchen
herauszufinden, wie wir robustere Workflows bauen können ohne Module nur zu
copy-pasten. Seitdem gibt es eine neue npm unpublish policy, Lösungs-Ansätze und
auch direkt neue npm Problemchen. Aber da wäre ja auch noch Bower und auch sowas
wie das relativ unbekannte IPFS, was sich ziemlich gut als distributed package
manager eignen würde.

[00:28:38] THE CHROME DISTORTION: HOW CHROME NEGATIVELY ALTERS OUR EXPECTATIONS.

Diesen doch sehr fraglichen Artikel-Titel haben wir zum Anlass genommen, zu
hinterfragen, warum wir überhaupt feststellen können, dass mobile Browser
langsam sind und ob das überhaupt die Ursache des Problems ist? Wir kommen
selbstverständlich zu einem ganz anderen Schluss, denn wir bauen einfach immer
unnötig größere Seiten, mit vielen unnötigen Spielereien. Trotzdem versuchen
wir, unsere Verantwortung dann am Ende auf die Browser zu schieben, einfach um
uns besser zu fühlen. Letztendlich sprechen wir auch noch über Projektmanagement
und Verantwortung als Entwickler, sowie Hardware, die Nicht-Entwickler besitzen.


[01:28:48] KEINE SCHAUNOTIZEN

LINK REL=NOOPENER

Ein neues Attribut, um zu verhindern, dass window.opener durch nutzergenerierten
Inhalt missbraucht werden kann.

A KICK-START INTO SERVER PUSH

Ein leicht verständlicher Artikel zum Thema Server Push.

NODE.GREEN

Eine coole tabellarische Aufstellung, welches ECMA-Script Feature in welcher
Node Version unterstützt wird.

REFERRER AND CACHE CONTROL APIS FOR FETCH()

Auch wenn es noch ein klein wenig dauert, bis zum Firefox 48 Release, finden wir
diese Features äußerst hilfreich und ihr könnt gleich mal anfangen, das zu
nutzen.

Revision 258: Das npm Debakel und warum wir so lahme Seiten bauen

<p>Es war mal wieder an der Zeit, dass wir uns Gäste zur Verstärkung ins virtuelle Studio holen. Nachdem sich die letzten Revisionen viel um Content Management Systeme die Arbeit als Frontend-Entwickler mit ihnen gedreht haben, lag es nahe, dass wir uns mal mit den Leuten hinter dem rein API-basierten &#8222;headless&#8220; CMS <a href="https://www.contentful.com/">Contentful</a> unterhalten. Aus Berlin zugeschaltet waren <a href="https://twitter.com/RouvenWessling">Rouven Weßling</a> und <a href="https://github.com/geigerzaehler">Thomas Scholtes</a>.  </p>
<p>Wir redeten über die Idee hinter dem CMS und seine Aufteilung in ein Multiuser-Fähiges Backend und fünf Teil-APIs:</p>
<ul>
<li><a href="https://www.contentful.com/developers/docs/concepts/apis/#content-delivery-api">die Content Delivery API</a>, deren Inhalte <a href="https://www.contentful.com/blog/2015/11/05/cdn/">vom Fastly CDN ausgeliefert werden</a></li>
<li><a href="https://www.contentful.com/developers/docs/concepts/apis/#content-management-api">die Content Management API</a>, das mehrbenutzer- und <a href="https://www.contentful.com/blog/2016/02/16/roles-and-permissions/">rechte-/rollenfähig ist</a></li>
<li><a href="https://www.contentful.com/developers/docs/concepts/apis/#images-api">die Images API</a>, die Bilder per URL-Parameter resizen, croppen und dekorieren kann und auf <a href="https://www.contentful.com/blog/2015/11/05/cdn/">Amazons CloudFront CDN aufsetzt</a></li>
<li>die neue <a href="https://www.contentful.com/developers/docs/concepts/uiextensions/">Widgets API</a>, mit der sich das Backend-Interface um selbstentwickelte Eingabefelder aufbohren lässt</li>
<li>und über <a href="https://www.contentful.com/developers/docs/concepts/apis/#content-preview-api">die Content Preview API</a>, über die man eine Vorschau seiner Inhalte an der Content Delivery API vorbei abruft.</li>
</ul>
<p>Wir erfuhren außerdem weitere schöne Details, nämlich dass Contentful <a href="https://www.contentful.com/developers/docs/concepts/locales/">Mehrsprachigkeit, respektive Lokalisierbarkeit ermöglicht</a>. Und auch dass man mit Hilfe der <a href="https://www.contentful.com/developers/docs/concepts/sync/">Content Delivery Sync API</a> seine Daten zur Offline-Speicherung im Client regelmäßig abgleichen kann. Wohlwollend nahmen wir zur Kenntnis, <a href="https://www.contentful.com/blog/2015/09/22/markdown/">dass Rich Content ausschließlich im Markdown-Format verarbeitet wird</a>. Mehrere Seiten lassen sich mit Hilfe von <a href="http://docs.contentfulcda.apiary.io/#reference/spaces">Spaces</a> unter einem Account betreiben. Volltextsuchen sind dank der <a href="http://docs.contentfulcda.apiary.io/#reference/search-parameters">Search API</a> leicht zu implementieren. Und es lassen sich <a href="http://docs.contentfulcma.apiary.io/#resources-webhooks">Webhooks</a> einrichten, die jedes Mal getriggert werden, wenn Inhalte aktualisiert wurden.</p>
<p>Wer nun Blut geleckt hat: Contentful bietet für den schnellen Einstieg eine Reihe <a href="https://github.com/contentful">von fertigen SDKs und Plugins</a> für <a href="https://www.contentful.com/blog/2016/03/08/js-sdk-cda-v3/">JavaScript</a> und alle gängigen serverseitigen Sprachen sowie für diverse Frameworks, native Plattformen und statische Seitengeneratoren.</p>
<p>Zu guter Letzt wiesen wir noch auf ein interessantes Gast-Posting im Firmenblog hin, wo beschrieben wird, <a href="https://www.contentful.com/blog/2016/02/10/snipcart-middleman-contentful/">wie man mit Contentful und Snipcart sogar ein Shopsystem abbilden kann</a>.</p>
<p>Der einzige Nachteil, den wir während des ganzen Gesprächs an dem CMS ausmachen konnten: Durch die Art und Weise des Hostings lässt sich nicht sicherstellen, dass Inhalte ausschließlich in Europa gespeichert sind (zumindest derzeit).</p>
<p>Wir sind beeindruckt. Salespitch bestanden!</p>


Es war mal wieder an der Zeit, dass wir uns Gäste zur Verstärkung ins virtuelle
Studio holen. Nachdem sich die letzten Revisionen viel um Content Management
Systeme die Arbeit als Frontend-Entwickler …

Es war mal wieder an der Zeit, dass wir uns Gäste zur Verstärkung ins virtuelle
Studio holen. Nachdem sich die letzten Revisionen viel um Content Management
Systeme die Arbeit als Frontend-Entwickler mit ihnen gedreht haben, lag es nahe,
dass wir uns mal mit den Leuten hinter dem rein API-basierten „headless“ CMS
Contentful unterhalten. Aus Berlin zugeschaltet waren Rouven Weßling und Thomas
Scholtes.

Wir redeten über die Idee hinter dem CMS und seine Aufteilung in ein
Multiuser-Fähiges Backend und fünf Teil-APIs:

 * die Content Delivery API, deren Inhalte vom Fastly CDN ausgeliefert werden
 * die Content Management API, das mehrbenutzer- und rechte-/rollenfähig ist
 * die Images API, die Bilder per URL-Parameter resizen, croppen und dekorieren
   kann und auf Amazons CloudFront CDN aufsetzt
 * die neue Widgets API, mit der sich das Backend-Interface um selbstentwickelte
   Eingabefelder aufbohren lässt
 * und über die Content Preview API, über die man eine Vorschau seiner Inhalte
   an der Content Delivery API vorbei abruft.

Wir erfuhren außerdem weitere schöne Details, nämlich dass Contentful
Mehrsprachigkeit, respektive Lokalisierbarkeit ermöglicht. Und auch dass man mit
Hilfe der Content Delivery Sync API seine Daten zur Offline-Speicherung im
Client regelmäßig abgleichen kann. Wohlwollend nahmen wir zur Kenntnis, dass
Rich Content ausschließlich im Markdown-Format verarbeitet wird. Mehrere Seiten
lassen sich mit Hilfe von Spaces unter einem Account betreiben. Volltextsuchen
sind dank der Search API leicht zu implementieren. Und es lassen sich Webhooks
einrichten, die jedes Mal getriggert werden, wenn Inhalte aktualisiert wurden.

Wer nun Blut geleckt hat: Contentful bietet für den schnellen Einstieg eine
Reihe von fertigen SDKs und Plugins für JavaScript und alle gängigen
serverseitigen Sprachen sowie für diverse Frameworks, native Plattformen und
statische Seitengeneratoren.

Zu guter Letzt wiesen wir noch auf ein interessantes Gast-Posting im Firmenblog
hin, wo beschrieben wird, wie man mit Contentful und Snipcart sogar ein
Shopsystem abbilden kann.

Der einzige Nachteil, den wir während des ganzen Gesprächs an dem CMS ausmachen
konnten: Durch die Art und Weise des Hostings lässt sich nicht sicherstellen,
dass Inhalte ausschließlich in Europa gespeichert sind (zumindest derzeit).

Wir sind beeindruckt. Salespitch bestanden!

Revision 257: Contentful – Das API-first CMS

<p>Zur Revision 256 ergab es sich, dass wir uns eine ganze Sendung lang einer Hörerfrage widmeten, welche uns im Rahmen der <a href="http://workingdraft.de/253/">Revision 253 – CMS, CMS, CMS!</a> gestellt wurde.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:36] <a href="http://workingdraft.de/253/#comment-10808">Hörerfrage CMS-Workflow</a></dt>
<dd>Ein Hörer, Tilman, fragte, wie wir denn mit unterschiedlichen Bereichen bei der Webseiten-Entwicklung umgehen, wenn wir mit Content Management Systemen arbeiten. Wir sprechen darüber, welche CMS wir verwenden, welche Rollen wir in diesen Projekten einnehmen und wie wir moderne Frontends im Zusammenspiel mit fast jedem CMS bauen können.</dd>
</dl>
<h3>[00:51:39] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://bitsofco.de/styling-broken-images/">Styling broken Images</a></dt>
<dd>Bilder, die nicht geladen werden können, sehen meistens etwas &#8222;zerschossen&#8220; aus. Mithilfe dieses Tutorials lässt sich da Abhilfe schaffen.</dd>
<dt><a href="https://www.kickstarter.com/projects/material16/material-conference-2016">Material Conference 2016 in Island</a></dt>
<dd>Dieses Jahr wird erstmalig die Material Conference stattfinden. Eine Konferenz, die das Web als &#8222;Material&#8220; untersucht. Die Veranstalter brauchen eure Hilfe und haben eine Kickstarter Campaign ins Leben gerufen. Schaut’s euch mal an.</dd>
</dl>


Zur Revision 256 ergab es sich, dass wir uns eine ganze Sendung lang einer
Hörerfrage widmeten, welche uns im Rahmen der Revision 253 – CMS, CMS, CMS!
gestellt wurde.


SCHAUNOTIZEN

[00:00:36] HÖRERF…

Zur Revision 256 ergab es sich, dass wir uns eine ganze Sendung lang einer
Hörerfrage widmeten, welche uns im Rahmen der Revision 253 – CMS, CMS, CMS!
gestellt wurde.


SCHAUNOTIZEN

[00:00:36] HÖRERFRAGE CMS-WORKFLOW

Ein Hörer, Tilman, fragte, wie wir denn mit unterschiedlichen Bereichen bei der
Webseiten-Entwicklung umgehen, wenn wir mit Content Management Systemen
arbeiten. Wir sprechen darüber, welche CMS wir verwenden, welche Rollen wir in
diesen Projekten einnehmen und wie wir moderne Frontends im Zusammenspiel mit
fast jedem CMS bauen können.


[00:51:39] KEINE SCHAUNOTIZEN

STYLING BROKEN IMAGES

Bilder, die nicht geladen werden können, sehen meistens etwas „zerschossen“ aus.
Mithilfe dieses Tutorials lässt sich da Abhilfe schaffen.

MATERIAL CONFERENCE 2016 IN ISLAND

Dieses Jahr wird erstmalig die Material Conference stattfinden. Eine Konferenz,
die das Web als „Material“ untersucht. Die Veranstalter brauchen eure Hilfe und
haben eine Kickstarter Campaign ins Leben gerufen. Schaut’s euch mal an.

Revision 256: Arbeiten mit einem CMS – Berichte aus der Praxis

<p>Hans und Peter hatten keine Themen, also plauderten sie ein wenig über die diversen Hacks, die sie in ihren langen und ruhmreichen Frontendler-Karrieren so auf die Browser-Welt losgelassen haben.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:09] Hack the Planet</dt>
<dd>
<p>Angestoßen durch <a href="https://github.com/jed/lave">lave</a>, eine Art JSON für ganz harte (und wohl eine Ergänzung zum <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">Structured clone algorithm</a>), pflügen Hans und Peter durch ihr Hack-Archiv. Angefangen bei klassischen <a href="http://www.webdevout.net/css-hacks">CSS-Hacks</a> über <a href="https://de.wikipedia.org/wiki/Conditional_Comments">Conditional Comments</a> und dem <a href="http://www.satzansatz.de/cssd/onhavinglayout.html">hasLayout-Allheilmittel <code>zoom: 1</code></a> geht es recht bald zum Thema Clearfix und seinen divseren Permutationen im Wandel der Zeit (Hans schwört auf <code>overflow: hidden</code>). Peters Lieblings-CSS-Hack bleibt hingegen <code>.wichtig, .egal:not(.egal){}</code>. In Folge betreten wir das Feld der HTML-Hacks, spekulieren über Details im <a href="https://html.spec.whatwg.org/#the-head-element">head</a>&#8211; sowie über Anwendungsfälle des <a href="https://html.spec.whatwg.org/#the-noscript-element">noscript</a>-Elements. Da <a href="https://html.spec.whatwg.org/#custom-data-attribute">data-Attribute</a> letztlich auch nur die Großzügigkeit des HTML-Parsers ausnutzen, sortieren wir diese (speziell ohne data-Präfix) auch in der Hack-Rubrik ein. Wir beenden das Thema mit Erzählungen aus der React-Hackerei, erwähnen neben dem Universal-Schlangenöl <code>setTimeout(fn, 0)</code> auch das modernere <a href="https://developer.mozilla.org/de/docs/Web/API/Window/setImmediate">setImmediate(fn)</a> und hören auf, bevor wir auf noch schrägere Hacks als Peters <a href="https://github.com/SirPepe/Unsync">Funktionsverasynchronisierungslibrary</a> zu sprechen kommen.</dd>
</dl>
<h3>[00:43:30] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/tbranyen/diffhtml">tbranyen/diffhtml: Easily swap out markup with an intelligent virtual dom</a></dt>
<dd>Für alle, denen React zu High-Level ist.</dd>
</dl>


Hans und Peter hatten keine Themen, also plauderten sie ein wenig über die
diversen Hacks, die sie in ihren langen und ruhmreichen Frontendler-Karrieren so
auf die Browser-Welt losgelassen haben.


SC…

Hans und Peter hatten keine Themen, also plauderten sie ein wenig über die
diversen Hacks, die sie in ihren langen und ruhmreichen Frontendler-Karrieren so
auf die Browser-Welt losgelassen haben.


SCHAUNOTIZEN

[00:00:09] HACK THE PLANET

Angestoßen durch lave, eine Art JSON für ganz harte (und wohl eine Ergänzung zum
Structured clone algorithm), pflügen Hans und Peter durch ihr Hack-Archiv.
Angefangen bei klassischen CSS-Hacks über Conditional Comments und dem
hasLayout-Allheilmittel zoom: 1 geht es recht bald zum Thema Clearfix und seinen
divseren Permutationen im Wandel der Zeit (Hans schwört auf overflow: hidden).
Peters Lieblings-CSS-Hack bleibt hingegen .wichtig, .egal:not(.egal){}. In Folge
betreten wir das Feld der HTML-Hacks, spekulieren über Details im head– sowie
über Anwendungsfälle des noscript-Elements. Da data-Attribute letztlich auch nur
die Großzügigkeit des HTML-Parsers ausnutzen, sortieren wir diese (speziell ohne
data-Präfix) auch in der Hack-Rubrik ein. Wir beenden das Thema mit Erzählungen
aus der React-Hackerei, erwähnen neben dem Universal-Schlangenöl setTimeout(fn,
0) auch das modernere setImmediate(fn) und hören auf, bevor wir auf noch
schrägere Hacks als Peters Funktionsverasynchronisierungslibrary zu sprechen
kommen.


[00:43:30] KEINE SCHAUNOTIZEN

TBRANYEN/DIFFHTML: EASILY SWAP OUT MARKUP WITH AN INTELLIGENT VIRTUAL DOM

Für alle, denen React zu High-Level ist.

Revision 255: Hack the Planet!

<p>Der wöchentliche News-Podcast hat wieder mal Neuigkeiten! Nebenbei wird noch über progressives Laden von CSS Dateien philosophiert. Anselm, Hans, Schepp und Stefan diesmal im Boot.</p>
<h3>[00:00:25] News</h3>
<dl>
<dt><a href="http://gruntjs.com/blog/2016-02-11-grunt-1.0.0-rc1-released">Grunt 1.0 Release Candidate</a></dt>
<dd>Nein! Doch! Oh! Oder: Die Hölle friert zu und Node kommt ohne Dependencies aus. Grunt 1.0.0. bringt das verwaiste Projekt auf den aktuellen Stand mit NPM, löst einige bekannte Bugs und ist ein wichtiger Schritt zur Reanimation des Projektes. Statt dem Big Bang gibt&#8217;s jetzt die bekannte API gesichert und veröffentlicht.</dd>
<dt><a href="https://gist.github.com/gajus/bbf06ea2e37047b01e70">Touch Action CSS Property</a></dt>
<dd>Die <code>touch-action</code> CSS Eigenschaft bekommt Browserreichweite. Hier gibt&#8217;s Informationen dazu.</dd>
<dt><a href="http://blog.chromium.org/2016/02/transitioning-from-spdy-to-http2.html">Transitioning from SPDY to HTTP2</a></dt>
<dd>Chrome schmeißt in absehbarer Zeit SPDY raus. Hier gibt&#8217;s Informationen für Leute, die ihre Server noch damit betreiben.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:04:10] <a href="https://jakearchibald.com/2016/link-in-body/">The future of loading CSS</a></dt>
<dd>Jake Archibald beschreibt eine gravierende Änderung in Chromes Lade- und Renderstrategie für blockierende CSS Dateien. Diese Änderung (die in Edge schon so umgesetzt wird) erlaubt, CSS auch an anderen Stellen als dem Head zu laden und so progressiv Stylesheets für gewisse Bereiche der Website nachzuladen. Jake belegt dies mit einem entsprechenden Demo und einigen Use Cases. Wir beleuchten die Vor- und Nachteile und diskutieren über Properties wie <code>lazyload</code> und <code><a href="http://schepp.github.io/HTML5-WPO-Slides/#/2/22">postpone</a></code></dd>
</dl>
<h3>[00:24:54] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://alistapart.com/article/finessing-fecolormatrix">Finessing feColorMatrix</a></dt>
<dd>Una beleuchtet SVG Filter Eigenschaften bis ins äußerste Detail.</dd>
<dt><a href="https://surma.link/things/houdini-intro/">New ways to make your web app jank with Houdini</a></dt>
<dd>Houdini, eine Einführung. Hier gibt&#8217;s massiv Informationen und erste Code-Beispiele zum erweiterbaren CSS Standard.</dd>
<dt><a href="http://www.sitepoint.com/creating-fun-immersive-audio-experiences-web-audio/">Creating Fun and Immersive Audio Experiences with Web Audio</a></dt>
<dd>Die Web Audio API kann viel. Hier findet man ein paar gute Beispiele und Anwendungsfälle.</dd>
<dt><a href="https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.3vk3yj3og">The Fab Four technique to create Responsive Emails without Media Queries</a></dt>
<dd>Eine sehr einfache, aber doch effektive Implementierung von Element Queries mit <code>calc</code>, <code>min-width</code> und <code>max-width</code> .</dd>
<dt><a href="http://cloudinary.com/blog/automatically_art_directed_responsive_images">Art directed responsive images</a></dt>
<dd>Automatische Art Direction für responsive Images? Hier.</dd>
</dl>


Der wöchentliche News-Podcast hat wieder mal Neuigkeiten! Nebenbei wird noch
über progressives Laden von CSS Dateien philosophiert. Anselm, Hans, Schepp und
Stefan diesmal im Boot.


[00:00:25] NEWS

…

Der wöchentliche News-Podcast hat wieder mal Neuigkeiten! Nebenbei wird noch
über progressives Laden von CSS Dateien philosophiert. Anselm, Hans, Schepp und
Stefan diesmal im Boot.


[00:00:25] NEWS

GRUNT 1.0 RELEASE CANDIDATE

Nein! Doch! Oh! Oder: Die Hölle friert zu und Node kommt ohne Dependencies aus.
Grunt 1.0.0. bringt das verwaiste Projekt auf den aktuellen Stand mit NPM, löst
einige bekannte Bugs und ist ein wichtiger Schritt zur Reanimation des
Projektes. Statt dem Big Bang gibt’s jetzt die bekannte API gesichert und
veröffentlicht.

TOUCH ACTION CSS PROPERTY

Die touch-action CSS Eigenschaft bekommt Browserreichweite. Hier gibt’s
Informationen dazu.

TRANSITIONING FROM SPDY TO HTTP2

Chrome schmeißt in absehbarer Zeit SPDY raus. Hier gibt’s Informationen für
Leute, die ihre Server noch damit betreiben.


SCHAUNOTIZEN

[00:04:10] THE FUTURE OF LOADING CSS

Jake Archibald beschreibt eine gravierende Änderung in Chromes Lade- und
Renderstrategie für blockierende CSS Dateien. Diese Änderung (die in Edge schon
so umgesetzt wird) erlaubt, CSS auch an anderen Stellen als dem Head zu laden
und so progressiv Stylesheets für gewisse Bereiche der Website nachzuladen. Jake
belegt dies mit einem entsprechenden Demo und einigen Use Cases. Wir beleuchten
die Vor- und Nachteile und diskutieren über Properties wie lazyload und postpone


[00:24:54] KEINE SCHAUNOTIZEN

FINESSING FECOLORMATRIX

Una beleuchtet SVG Filter Eigenschaften bis ins äußerste Detail.

NEW WAYS TO MAKE YOUR WEB APP JANK WITH HOUDINI

Houdini, eine Einführung. Hier gibt’s massiv Informationen und erste
Code-Beispiele zum erweiterbaren CSS Standard.

CREATING FUN AND IMMERSIVE AUDIO EXPERIENCES WITH WEB AUDIO

Die Web Audio API kann viel. Hier findet man ein paar gute Beispiele und
Anwendungsfälle.

THE FAB FOUR TECHNIQUE TO CREATE RESPONSIVE EMAILS WITHOUT MEDIA QUERIES

Eine sehr einfache, aber doch effektive Implementierung von Element Queries mit
calc, min-width und max-width .

ART DIRECTED RESPONSIVE IMAGES

Automatische Art Direction für responsive Images? Hier.

Revision 254: Progressively loaded CSS, Grunt 1.0

<p>Obwohl es nicht die Kernkompetenz von Anselm, Stefan und Peter ist, waren diese Revision mal wieder Content Management Systeme dran. Dazu kommen die üblichen drei Links.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:10] CMS, CMS, CMS!</dt>
<dd>Cory Etzkorn hat mit <a href="http://coryetzkorn.com/blog/choosing-the-best-cms/">Choosing the Best CMS</a> einen langen, detaillierten Artikel über Content Management Systeme geschrieben, an dem wir uns entlang hangeln. Stefan ist ein Fan des flexiblen <a href="https://craftcms.com/">Craft CMS</a>&nbsp;&ndash; außer richtig guten Lösungen für Mehrsprachigkeit und Content Staging fehlt es an nichts. Einigkeit herrscht darüber, dass unter den Homepage-Zusammenklick-Baukästen <a href="https://squarespace.com/">Squarespace</a> der beste Baukasten ist. An <a href="https://wordpress.org/">WordPress</a> finden wir besonders die Vielfalt und Flexibilität beeindruckend, speziell dass man mit sehr wenig Fachwissen sehr weit kommen kann. Während keiner von uns <a href="http://www.siteleaf.com/">Siteleaf</a> kennt, können wir umso mehr positives über  <a href="https://getkirby.com/">Kirby</a> (kleines textbasiertes CMS) sagen. Der nerdige statische Seitengenerator <a href="https://jekyllrb.com/">Jekyll</a> wird gerade von Peter evaluiert, doch vor Langsamkeit und Ruby-Gefrickel wird gewarnt. Für Software-Nerds ist die Kombination von Jekyll mit <a href="https://pages.github.com/">Github Pages</a> sehr zu empfehlen, jedoch ist es prinzipbedingt nicht unbedingt kundentauglich. Das gilt auch für das ähnliche <a href="https://middlemanapp.com/">Middleman</a>, das einem noch mehr Ruby-Skills als Jekyll abverlangt. Zum Ende geben wir noch unsere gänzlich unfundierten Meinungen und Vorurteile zu <a href="https://www.drupal.org/">Drupal</a>, <a href="https://typo3.org/">Typo3</a>, <a href="http://www.joomla.de/">Joomla</a>, <a href="http://de.modx.com/">MODx</a> und <a href="https://grabaperch.com/">Perch</a> zum Besten. Als kostenlose Geschäftsidee offerieren wir das Konzept Static Site Generator als App mit gegenüber klassischen CMS klaren Vorteilen bei Sicherheit und Performance.</dd>
</dl>
<h3>[00:56:31] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/samccone/The-cost-of-transpiling-es2015-in-2016">Investigating the overhead cost of compiled es2015</a></dt>
<dd>Konkrete Zahlen zum Aufbläh-Effekt von JS-Transpilern.</dd>
<dt><a href="https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care">CSS Variables: Why Should You Care?</a></dt>
<dd>Kurzer Überblick. Anlass: demnächst auch in Chrome!</dd>
<dt><a href="https://github.com/ScottHelme/Lets-Encrypt-Smart-Renew">Let’s Encrypt Smart Renew.sh</a></dt>
<dd>Damit das Zertifikat auch in Zukunft schön knackig und frisch bleibt.</dd>
</dl>


Obwohl es nicht die Kernkompetenz von Anselm, Stefan und Peter ist, waren diese
Revision mal wieder Content Management Systeme dran. Dazu kommen die üblichen
drei Links.


SCHAUNOTIZEN

[00:00:10] CMS…

Obwohl es nicht die Kernkompetenz von Anselm, Stefan und Peter ist, waren diese
Revision mal wieder Content Management Systeme dran. Dazu kommen die üblichen
drei Links.


SCHAUNOTIZEN

[00:00:10] CMS, CMS, CMS!

Cory Etzkorn hat mit Choosing the Best CMS einen langen, detaillierten Artikel
über Content Management Systeme geschrieben, an dem wir uns entlang hangeln.
Stefan ist ein Fan des flexiblen Craft CMS – außer richtig guten Lösungen für
Mehrsprachigkeit und Content Staging fehlt es an nichts. Einigkeit herrscht
darüber, dass unter den Homepage-Zusammenklick-Baukästen Squarespace der beste
Baukasten ist. An WordPress finden wir besonders die Vielfalt und Flexibilität
beeindruckend, speziell dass man mit sehr wenig Fachwissen sehr weit kommen
kann. Während keiner von uns Siteleaf kennt, können wir umso mehr positives über
Kirby (kleines textbasiertes CMS) sagen. Der nerdige statische Seitengenerator
Jekyll wird gerade von Peter evaluiert, doch vor Langsamkeit und Ruby-Gefrickel
wird gewarnt. Für Software-Nerds ist die Kombination von Jekyll mit Github Pages
sehr zu empfehlen, jedoch ist es prinzipbedingt nicht unbedingt kundentauglich.
Das gilt auch für das ähnliche Middleman, das einem noch mehr Ruby-Skills als
Jekyll abverlangt. Zum Ende geben wir noch unsere gänzlich unfundierten
Meinungen und Vorurteile zu Drupal, Typo3, Joomla, MODx und Perch zum Besten.
Als kostenlose Geschäftsidee offerieren wir das Konzept Static Site Generator
als App mit gegenüber klassischen CMS klaren Vorteilen bei Sicherheit und
Performance.


[00:56:31] KEINE SCHAUNOTIZEN

INVESTIGATING THE OVERHEAD COST OF COMPILED ES2015

Konkrete Zahlen zum Aufbläh-Effekt von JS-Transpilern.

CSS VARIABLES: WHY SHOULD YOU CARE?

Kurzer Überblick. Anlass: demnächst auch in Chrome!

LET’S ENCRYPT SMART RENEW.SH

Damit das Zertifikat auch in Zukunft schön knackig und frisch bleibt.

Revision 253: CMS, CMS, CMS!

<p>Hans, Peter und Rodney hatten erst keine so richtig interessanten Themen zur Hand, doch als die Podcast-Vorbesprechung in eine Diskussion über JavaScript-Tools versank, war klar, was zu tun ist&#8230;</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:22] JavaScript-Tools</dt>
<dd>Eine mäandernde Debatte über die Vor- und Nachteile von Tools wie <a href="http://www.typescriptlang.org/">TypeScript</a> und <a href="http://flowtype.org/">Flow</a>, den epischen Kampf zwischen <a href="https://webpack.github.io/">Webpack</a> und <a href="http://rollupjs.org/">Rollup</a> (mit Tree Shaking, vergleiche Revision <a href="http://workingdraft.de/248/">248</a>), Oldie-Tools wie dem <a href="https://closure-compiler.appspot.com/home">Closure Compiler</a>, <a href="http://requirejs.org/">RequireJS</a>, <a href="http://backbonejs.org/">Backbone.js</a> und <a href="http://marionettejs.com/">Marionette.js</a> und den Schmerzen, die ein alter Web-Stack so mit sich bringt.</dd>
</dl>
<h3>[00:42:01] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/ausi/cq-prolyfill">cq-prolyfill</a></dt>
<dd>Ein Container-Query-Prolyfill für die Risikofreudigen.</dd>
<dt><a href="https://shippable.com/">Shippable</a></dt>
<dd>Leichtgewichtiges CI-Tool.</dd>
<dt><a href="https://www.eventbrite.de/e/angular-2-master-class-dusseldorf-tickets-21015847967">Angular 2 Master Class in Düsseldorf</a></dt>
<dd>Wenn Schepp das empfiehlt, muss es gut sein!</dd>
</dl>


Hans, Peter und Rodney hatten erst keine so richtig interessanten Themen zur
Hand, doch als die Podcast-Vorbesprechung in eine Diskussion über
JavaScript-Tools versank, war klar, was zu tun ist…


SCH…

Hans, Peter und Rodney hatten erst keine so richtig interessanten Themen zur
Hand, doch als die Podcast-Vorbesprechung in eine Diskussion über
JavaScript-Tools versank, war klar, was zu tun ist…


SCHAUNOTIZEN

[00:00:22] JAVASCRIPT-TOOLS

Eine mäandernde Debatte über die Vor- und Nachteile von Tools wie TypeScript und
Flow, den epischen Kampf zwischen Webpack und Rollup (mit Tree Shaking,
vergleiche Revision 248), Oldie-Tools wie dem Closure Compiler, RequireJS,
Backbone.js und Marionette.js und den Schmerzen, die ein alter Web-Stack so mit
sich bringt.


[00:42:01] KEINE SCHAUNOTIZEN

CQ-PROLYFILL

Ein Container-Query-Prolyfill für die Risikofreudigen.

SHIPPABLE

Leichtgewichtiges CI-Tool.

ANGULAR 2 MASTER CLASS IN DÜSSELDORF

Wenn Schepp das empfiehlt, muss es gut sein!

Revision 252: Yo Dawg I heard you like JavaScript so I put a transpiler into
your MVC so you can type check while you tree shake

<p>Die Revision 251 ist auch wieder hochkarätig besetzt: Wir haben uns <a href="https://medium.com/@cramforce">Malte Ubl</a> von Google eingeladen um über <a href="https://www.ampproject.org/">AMP</a> zu sprechen und uns erklären zu lassen, was es mit diesem Projekt auf sich hat.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:11] <a href="https://www.ampproject.org/">AMP</a></dt>
<dd>Um besser zu verstehen, was es mit Googles Projekt AMP auf sich hat, haben wir uns Malte Ubl, den Projektleiter mal eingeladen und uns erklären lassen, worum es geht. Maltes Artikel, <a href="https://medium.com/@cramforce/why-amp-is-fast-7d2ff1f48597#.8ip7h12s1">warum AMP schnell ist</a>. Ein weiterer <a href="http://www.mondaynote.com/2016/01/18/googles-amp-poised-to-take-the-lead-from-facebooks-and-apples-walled-gardens/">Artikel zum Thema AMP ist hier zu finden</a>. Ein <a href="https://wordpress.org/plugins/amp/">WordPress Plugin</a> gibt es auch.</dd>
<dt>[00:43:20] <a href="https://medium.com/@cramforce/2016-will-be-the-year-of-concurrency-on-the-web-c39b1e99b30f#.u8g4m3u1b">2016 will be the year of concurrency on the web</a></dt>
<dd>WebWorker sind das neue heiße Ding und werden 2016 einen starken Aufschwung erleben, meint Malte. Wir unterhalten uns darüber, wie wir mit der Parallelität im Web umgehen.</dd>
</dl>
<h3>[00:55:31] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8#.dfjfbs4o8">Understand promises before you start using async/await</a></dt>
<dd>Dieser Artikel hilft, erst mal Promises zu verstehen, bevor man sich mit weiterer Asynchronität in ES2016 beschäftigt.</dd>
<dt><a href="http://molily.de/javascript-web-apps/">JavaScript web apps considered valuable</a></dt>
<dd>Ein Statement zum Thema JavaScript Applikationen.</dd>
<dt><a href="https://github.com/globant-ui/arialinter">Arialinter</a></dt>
<dd>Arialinter ist ein Tool, dass die Verwendung von Aria-Attributen überprüft.</dd>
<dt><a href="https://egghead.io/series/cycle-js-fundamentals">Cycle.js Fundamentals &#8211; Course by @andrestaltz</a></dt>
<dd>Ein Video-Kurs zum Thema Cycle.js und Reactive Programming.</dd>
<dt><a href="https://medium.com/@franciov/how-to-make-your-web-app-installable-8b71571605e">How to make your web app installable</a></dt>
<dd>Wer wissen möchte, was man tuen muss um Websites auf Smartphones app-ähnlich zu installieren, sollte diesen Artikel lesen.</dd>
</dl>


Die Revision 251 ist auch wieder hochkarätig besetzt: Wir haben uns Malte Ubl
von Google eingeladen um über AMP zu sprechen und uns erklären zu lassen, was es
mit diesem Projekt auf sich hat.


SCHAUN…

Die Revision 251 ist auch wieder hochkarätig besetzt: Wir haben uns Malte Ubl
von Google eingeladen um über AMP zu sprechen und uns erklären zu lassen, was es
mit diesem Projekt auf sich hat.


SCHAUNOTIZEN

[00:01:11] AMP

Um besser zu verstehen, was es mit Googles Projekt AMP auf sich hat, haben wir
uns Malte Ubl, den Projektleiter mal eingeladen und uns erklären lassen, worum
es geht. Maltes Artikel, warum AMP schnell ist. Ein weiterer Artikel zum Thema
AMP ist hier zu finden. Ein WordPress Plugin gibt es auch.

[00:43:20] 2016 WILL BE THE YEAR OF CONCURRENCY ON THE WEB

WebWorker sind das neue heiße Ding und werden 2016 einen starken Aufschwung
erleben, meint Malte. Wir unterhalten uns darüber, wie wir mit der Parallelität
im Web umgehen.


[00:55:31] KEINE SCHAUNOTIZEN

UNDERSTAND PROMISES BEFORE YOU START USING ASYNC/AWAIT

Dieser Artikel hilft, erst mal Promises zu verstehen, bevor man sich mit
weiterer Asynchronität in ES2016 beschäftigt.

JAVASCRIPT WEB APPS CONSIDERED VALUABLE

Ein Statement zum Thema JavaScript Applikationen.

ARIALINTER

Arialinter ist ein Tool, dass die Verwendung von Aria-Attributen überprüft.

CYCLE.JS FUNDAMENTALS – COURSE BY @ANDRESTALTZ

Ein Video-Kurs zum Thema Cycle.js und Reactive Programming.

HOW TO MAKE YOUR WEB APP INSTALLABLE

Wer wissen möchte, was man tuen muss um Websites auf Smartphones app-ähnlich zu
installieren, sollte diesen Artikel lesen.

Revision 251: Googles AMP und die Zukunft der Parallelität

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 262: News, Glücksrad, Links

Working Draft

Revision 261: SVG Icons, Element/Container Queries

Working Draft

Revision 260: Spezifikations-Neuheiten

Working Draft

Revision 259: React Entwicklung und Frontend Einstieg

Working Draft

Revision 258: Das npm Debakel und warum wir so lahme Seiten bauen

Working Draft

Revision 257: Contentful – Das API-first CMS

Working Draft

Revision 256: Arbeiten mit einem CMS – Berichte aus der Praxis

Working Draft

Revision 255: Hack the Planet!

Working Draft

Revision 254: Progressively loaded CSS, Grunt 1.0

Working Draft

Revision 253: CMS, CMS, CMS!

Working Draft

Revision 252: Yo Dawg I heard you like JavaScript so I put a transpiler into your MVC so you can type check while you tree shake

Working Draft

Revision 251: Googles AMP und die Zukunft der Parallelität

Working Draft