<p>Zum Thema CSS-Refactoring luden wir uns neben dem anerkannten CSS-Buddha <a href="http://grochtdreis.de/">Jens Grochtdreis</a> auch <a href="http://www.creinartz.de/">Christoph Reinartz</a> an, der bei Trivago Frontend Lead ist, und aus aktuellem Anlass einiges zu erzählen hatte&nbsp;&hellip;</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:22] Project Ironman</dt>
<dd>
Christoph erzählt, wie aus dem nicht besonders strukturierten Code, der das UI der Hotelsuchmaschine Trivago bildete, eine aufgeräumte <a href="https://medium.com/@pistenprinz/rebuilding-an-aircraft-on-the-fly-a-pattern-library-integration-at-trivago-b2fd6954a88e#.xdi16uyl0">UI Pattern Library</a> wurde. Wir sprechen über <a href="https://medium.com/@pistenprinz/large-scale-css-refactoring-at-trivago-4602113c4a26#.7wt2phefv">CSS-Refactorings</a>, Styleguides und Styleguide-Generatoren (z.B. <a href="http://patternpack.org/">PatternPack</a> und <a href="https://frontify.com/">Frontify</a>), <a href="http://acss.io/">Atomic CSS</a>, <a href="https://speakerdeck.com/marcelosomers/fight-the-zombie-pattern-library">die Zombie-Pattern-Library</a>&nbsp;&hellip; und vermutlich erwähnen wir auch Bootstrap ein- oder zweimal.</dd>
</dl>
<h3>[01:11:07] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://jaxenter.de/agile-schaetzen-interview-bohlen-44461">Interview zu Aufwandsschätzungen bei Software-Entwicklung</a></dt>
<dd>Auch auf Frontend-Projekte anwendbar.</dd>
<dt><a href="http://www.scottohara.me/article/not-really-about-the-button.html">It&#8217;s not really about the button&nbsp;&hellip;</a></dt>
<dd>&#8222;A quickie on landmark discoverability&#8220;</dd>
<dt><a href="http://david-peter.de/cube-composer/">Cube Composer</a></dt>
<dd>Funktionale Programmierung lernen, indem man Würfelchen zusammenklickt.</dd>
</dl>


Zum Thema CSS-Refactoring luden wir uns neben dem anerkannten CSS-Buddha Jens
Grochtdreis auch Christoph Reinartz an, der bei Trivago Frontend Lead ist, und
aus aktuellem Anlass einiges zu erzählen ha…

Working Draft

Zum Thema CSS-Refactoring luden wir uns neben dem anerkannten CSS-Buddha Jens
Grochtdreis auch Christoph Reinartz an, der bei Trivago Frontend Lead ist, und
aus aktuellem Anlass einiges zu erzählen hatte …


SCHAUNOTIZEN

[00:02:22] PROJECT IRONMAN

Christoph erzählt, wie aus dem nicht besonders strukturierten Code, der das UI
der Hotelsuchmaschine Trivago bildete, eine aufgeräumte UI Pattern Library
wurde. Wir sprechen über CSS-Refactorings, Styleguides und
Styleguide-Generatoren (z.B. PatternPack und Frontify), Atomic CSS, die
Zombie-Pattern-Library … und vermutlich erwähnen wir auch Bootstrap ein- oder
zweimal.


[01:11:07] KEINE SCHAUNOTIZEN

INTERVIEW ZU AUFWANDSSCHÄTZUNGEN BEI SOFTWARE-ENTWICKLUNG

Auch auf Frontend-Projekte anwendbar.

IT’S NOT REALLY ABOUT THE BUTTON …

„A quickie on landmark discoverability“

CUBE COMPOSER

Funktionale Programmierung lernen, indem man Würfelchen zusammenklickt.

Revision 275: Project Ironman

<p>In dieser Revision haben Schepp, Hans und Stefan <a href="https://twitter.com/inoverse">Aaron Czichon</a> zu Gast um ausführlich über das mobile Crossplattform Framework Ionic zu sprechen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:44] <a href="http://ionic.io/">Ionic, Cordova, Phonegap</a></dt>
<dd>Ionic ist ein auf Angular (2) basierendes Framework, dass für schnelle, plattformübergreifende Mobilentwicklung gestaltet wurde und auf Cordova aufbaut. Aaron erklärt ausführlich die Entwicklung, die das Projekt Phonegap seit 2011 durchgemacht hat, und welche Rolle es im Entstehen des Ionic Frameworks einnimmt. Wir sprechen über Gestaltungsmöglichkeiten, die Ionic Cloud und finden heraus, dass man auch ganz gut ohne Phonegap/Cordova Kern mit Ionic Applikationen gestalten kann. Sehr aufschlußreiche Reise! Aaron gibt übrigens zum Thema Workshops, unter anderem auf <a href="http://ionicframework.de/">seiner eigenen Website</a> und bei den <a href="http://angular-days.de/">Angular Days</a> in Berlin.</dd>
<h3>[00:33:15] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://ishadeed.com/article/css-writing-mode/">CSS Writing Mode</a></dt>
<dd>Den Textfluss mal eben auf den Kopf stellen? Mit diesem ewig vorhandenen, doch gerne übersehenen Property geht das teilweise besser als mit CSS Transforms.</dd>
<dt><a href="http://devtoolschallenger.com/">DevTools Challenger</a></dt>
<dd>Mozilla macht mit dem DevTools Challenger auf sich aufmerksam. Interaktives Spiel, dass einlädt die Firefox Tools ausgiebig zu testen.</dd>
<dt><a href="https://air.mozilla.org/bay-area-rust-meetup-february-2016/">webrender</a></dt>
<dd>webrender ist eine sehr interessante Entwicklung für den Servo Browser (und andere), die es ermöglicht superschnell CSS Direktiven auf der GPU zu zeichnen. Zukunftsmusik für einen Zukunftsbrowser, aber etwas, dass wir im Blickfeld haben sollten</dd>
</dl>


In dieser Revision haben Schepp, Hans und Stefan Aaron Czichon zu Gast um
ausführlich über das mobile Crossplattform Framework Ionic zu sprechen.


SCHAUNOTIZEN

[00:01:44] IONIC, CORDOVA, PHONEGAP

I…

In dieser Revision haben Schepp, Hans und Stefan Aaron Czichon zu Gast um
ausführlich über das mobile Crossplattform Framework Ionic zu sprechen.


SCHAUNOTIZEN

[00:01:44] IONIC, CORDOVA, PHONEGAP

Ionic ist ein auf Angular (2) basierendes Framework, dass für schnelle,
plattformübergreifende Mobilentwicklung gestaltet wurde und auf Cordova aufbaut.
Aaron erklärt ausführlich die Entwicklung, die das Projekt Phonegap seit 2011
durchgemacht hat, und welche Rolle es im Entstehen des Ionic Frameworks
einnimmt. Wir sprechen über Gestaltungsmöglichkeiten, die Ionic Cloud und finden
heraus, dass man auch ganz gut ohne Phonegap/Cordova Kern mit Ionic
Applikationen gestalten kann. Sehr aufschlußreiche Reise! Aaron gibt übrigens
zum Thema Workshops, unter anderem auf seiner eigenen Website und bei den
Angular Days in Berlin.


[00:33:15] KEINE SCHAUNOTIZEN

CSS WRITING MODE

Den Textfluss mal eben auf den Kopf stellen? Mit diesem ewig vorhandenen, doch
gerne übersehenen Property geht das teilweise besser als mit CSS Transforms.

DEVTOOLS CHALLENGER

Mozilla macht mit dem DevTools Challenger auf sich aufmerksam. Interaktives
Spiel, dass einlädt die Firefox Tools ausgiebig zu testen.

WEBRENDER

webrender ist eine sehr interessante Entwicklung für den Servo Browser (und
andere), die es ermöglicht superschnell CSS Direktiven auf der GPU zu zeichnen.
Zukunftsmusik für einen Zukunftsbrowser, aber etwas, dass wir im Blickfeld haben
sollten

Revision 274: Ionic Framework

<p>This time we had no one less than <a href="https://twitter.com/html5test">Niels Leenheer</a> from Drachten in Holland as our guest, creator of <a href="https://html5test.com">HTML5test.com</a>, owner of the forth largest <a href="https://html5test.com/devicelab">open device lab</a> in the world and browser connaisseur.</p>
<h3>Discussion Topics</h3>
<dl>
<dt>[00:01:47] On the rise and fall of open device labs</dt>
<dd>Managing one of the largest open device labs in the world, we asked Niels how well the concept is being accepted by the developer community. We learned how exactly he manages these inquiries and what type of people ask for device testing. And of course we also talked about all the aspects that &#8211; contrary to initial expectations &#8211; does not work, and why that is.</dd>
<dt>[00:19:36] <a href="http://html5test.com">HTML5test.com</a></dt>
<dd>Device testing lead us right to the next topic which was the benchmarking site html5test.com. Incepted in 2010 the site quickly became a respected authority for information seeking developers, browser vendors and the press. And most importantly it pushed browser vendors forward and helped steer development into the right directions.</dd>
<dt>[00:25:54] <a href="https://frontendne.co.uk/talks/weird-browsers">Weird Browsers</a></dt>
<dd>Working on html5test.com brought a lot of browser-specific quirks to Niels&#8216; attention and so he shared a few interesting stories with us. We talked about &#8222;smart&#8220; TV browser, console browsers, eBook-reader browsers and browsers that hide in VR glasses. Astonishingly most of the times these browsers act pretty normal, except for when they don&#8217;t. Then things are getting pretty weird!</dd>
<dt>[00:52:21] Browser Sniffing</dt>
<dd>The conclusio of the above topic was that some broken features cannot really be feature detected. So either we manage a very defensive approach that allows sites to gracefully degrade without breaking on strange browsers. But if we don&#8217;t, and we need to resort to user agent sniffing which traps to look out for. Niels suggests using one of two libraries doing a good job a browser detection: One being the <a href="http://www.uaparser.org/">UA Parser</a> and the other one being the <a href="https://github.com/piwik/device-detector">Piwik Device Detector</a>.</dd>
</dl>
<h3>[01:03:41] A Ticket Raffle!</h3>
<dl>
<dt><a href="https://www.codetalks.de/">Win two tickets for the code.talks in Hamburg!</a></dt>
<dd>We already twittered it: Niels is giving away two 100% discount codes for the code.talks conference in Hamburg at the end of September. Anyone that comments below or tweets to <a href="https://twitter.com/html5test">@html5test</a> the exact number of devices he currently has in his device lab qualifies for our raffle. The Raffle ends Sunday, 4th of September.</dd>
</dl>


This time we had no one less than Niels Leenheer from Drachten in Holland as our
guest, creator of HTML5test.com, owner of the forth largest open device lab in
the world and browser connaisseur.


DIS…

This time we had no one less than Niels Leenheer from Drachten in Holland as our
guest, creator of HTML5test.com, owner of the forth largest open device lab in
the world and browser connaisseur.


DISCUSSION TOPICS

[00:01:47] ON THE RISE AND FALL OF OPEN DEVICE LABS

Managing one of the largest open device labs in the world, we asked Niels how
well the concept is being accepted by the developer community. We learned how
exactly he manages these inquiries and what type of people ask for device
testing. And of course we also talked about all the aspects that – contrary to
initial expectations – does not work, and why that is.

[00:19:36] HTML5TEST.COM

Device testing lead us right to the next topic which was the benchmarking site
html5test.com. Incepted in 2010 the site quickly became a respected authority
for information seeking developers, browser vendors and the press. And most
importantly it pushed browser vendors forward and helped steer development into
the right directions.

[00:25:54] WEIRD BROWSERS

Working on html5test.com brought a lot of browser-specific quirks to Niels‘
attention and so he shared a few interesting stories with us. We talked about
„smart“ TV browser, console browsers, eBook-reader browsers and browsers that
hide in VR glasses. Astonishingly most of the times these browsers act pretty
normal, except for when they don’t. Then things are getting pretty weird!

[00:52:21] BROWSER SNIFFING

The conclusio of the above topic was that some broken features cannot really be
feature detected. So either we manage a very defensive approach that allows
sites to gracefully degrade without breaking on strange browsers. But if we
don’t, and we need to resort to user agent sniffing which traps to look out for.
Niels suggests using one of two libraries doing a good job a browser detection:
One being the UA Parser and the other one being the Piwik Device Detector.


[01:03:41] A TICKET RAFFLE!

WIN TWO TICKETS FOR THE CODE.TALKS IN HAMBURG!

We already twittered it: Niels is giving away two 100% discount codes for the
code.talks conference in Hamburg at the end of September. Anyone that comments
below or tweets to @html5test the exact number of devices he currently has in
his device lab qualifies for our raffle. The Raffle ends Sunday, 4th of
September.

Revision 273: Open Device Labs, HTML5Test.com and Weird Browsers

<p>Rodney, Anselm, Schepp und Stefan nehmen aktuelle Entwicklungen im CSS Standard sowie statische Seitengeneratoren für Großprojekte in Angriff.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:25] <a href="https://www.smashingmagazine.com/2016/08/using-a-static-site-generator-at-scale-lessons-learned/">Statische Seitengeneratoren für Großprojete und Metalsmith</a></dt>
<dd>Stefan hat das letzte Jahr damit verbracht 2000 HTML Seiten in einen statischen Buildprozess zu bringen, und spricht von seinen Erfahrungen. Wie Rodney ist er schnell zum Schluß gekommen, dass Tools wie <a href="http://www.metalsmith.io/">Metalsmith</a> dank ihrer feinen Plugin-Architektur am Besten für die vielreichenden Ansprüche unserer Webseiten taugen. Rodney baut die Ally.js Dokumentation damit, und nutzt Dinge wie Cheerio und ein <a href="https://github.com/medialize/ally.js/blob/master/build/metalsmith/plugins/prepare.js">selbstgeschriebens Plugin</a> um Markup nach dem Parsen zu verändern. Stefan erzählt von den Bemühungen die Stack für den gewöhnlichen Content-Autor so angenehm wie möglich zu machen und zeigt Tools wie den <a href="https://www.npmjs.com/package/liquid-linter">Liquid Linter</a></dd>
<dt>[00:30:25] <a href="http://www.xanthir.com/b4iW0">CSS Function Syntaxes</a></dt>
<dd>Weil man die <code>color</code> Funktion mit bestehenden Mitteln nicht problemlos definieren kann schraubt man an einer neuen CSS Funktionssyntax, die sich mehr an den Properties orientiert. Damit verbunden ist ein Refactoring sämtlicher existierenden CSS Funktionen, auch jenen, die schon seit IE-Zeiten im Einsatz sind. Sehr kontrovers, aber doch durchdacht. Wir geben unseren Senf dazu und überlegen ob man das auch anders hätte lösen können.</dd>
</dl>
<h3>[00:44:42] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters-in-ecmascript-6/">How To Use Arguments And Parameters In ECMAScript 6</a></dt>
<dd>Umfangreiche Erklärung zu allen Anwendungsarten von Argumenten und Parametern in ES6.</dd>
<dt><a href="https://eager.io/blog/the-history-of-the-url-domain-and-protocol/">The History of the URL</a></dt>
<dd>Geschichtlicher Exkurs zum Fundament des Web. Samt <a href="https://eager.io/blog/the-history-of-the-url-path-fragment-query-auth/">Fortsetzung</a></dd>
</dl>


Rodney, Anselm, Schepp und Stefan nehmen aktuelle Entwicklungen im CSS Standard
sowie statische Seitengeneratoren für Großprojekte in Angriff.


SCHAUNOTIZEN

[00:00:25] STATISCHE SEITENGENERATOREN FÜ…

Rodney, Anselm, Schepp und Stefan nehmen aktuelle Entwicklungen im CSS Standard
sowie statische Seitengeneratoren für Großprojekte in Angriff.


SCHAUNOTIZEN

[00:00:25] STATISCHE SEITENGENERATOREN FÜR GROSSPROJETE UND METALSMITH

Stefan hat das letzte Jahr damit verbracht 2000 HTML Seiten in einen statischen
Buildprozess zu bringen, und spricht von seinen Erfahrungen. Wie Rodney ist er
schnell zum Schluß gekommen, dass Tools wie Metalsmith dank ihrer feinen
Plugin-Architektur am Besten für die vielreichenden Ansprüche unserer Webseiten
taugen. Rodney baut die Ally.js Dokumentation damit, und nutzt Dinge wie Cheerio
und ein selbstgeschriebens Plugin um Markup nach dem Parsen zu verändern. Stefan
erzählt von den Bemühungen die Stack für den gewöhnlichen Content-Autor so
angenehm wie möglich zu machen und zeigt Tools wie den Liquid Linter

[00:30:25] CSS FUNCTION SYNTAXES

Weil man die color Funktion mit bestehenden Mitteln nicht problemlos definieren
kann schraubt man an einer neuen CSS Funktionssyntax, die sich mehr an den
Properties orientiert. Damit verbunden ist ein Refactoring sämtlicher
existierenden CSS Funktionen, auch jenen, die schon seit IE-Zeiten im Einsatz
sind. Sehr kontrovers, aber doch durchdacht. Wir geben unseren Senf dazu und
überlegen ob man das auch anders hätte lösen können.


[00:44:42] KEINE SCHAUNOTIZEN

HOW TO USE ARGUMENTS AND PARAMETERS IN ECMASCRIPT 6

Umfangreiche Erklärung zu allen Anwendungsarten von Argumenten und Parametern in
ES6.

THE HISTORY OF THE URL

Geschichtlicher Exkurs zum Fundament des Web. Samt Fortsetzung

Revision 272: Statische Seitengeneratoren, Metalsmith und CSS Funktionssyntax

<p>Schepp, Hans und Stefan nutzen die steigenden Temperaturen um Unklarheiten aus dem Weg zu räumen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:19] <a href="https://medium.com/totally-tooling-tears/issue-5-http-2-push-9c6eba8d6d7c#.q6njuebpn">HTTP/2 Server Push</a></dt>
<dd>Ein Artikel von Google&#8217;s Tool Advokaten erklärt nicht nur, wie man HTTP/2 Server Push in den DevTools vom Chrome erkennt,<br />
sondern wie das Gerüst sich unter der Haube verhält. Eine Unstimmigkeit nehmen wir zum Anstoß um über das grundlegende Prinzip von Server Push zu reden, diverse Anwendungsfälle zu finden und Licht ins Dunkel zu bringen. Dazu passend sind weitere Literatur von <a href="http://stackoverflow.com/questions/29352282/do-browser-cancel-server-push-when-resource-is-in-cache/29354100#29354100">Simone Bordet auf Stackoverflow</a> und ein <a href="https://www.youtube.com/watch?v=QpLtBftqM04">passendes Video von selbigem</a>. Wer HTTP/2 Server Push jetzt schon einsetzen möchte, kann das zum Beispiel schon über <a href="https://blog.cloudflare.com/announcing-support-for-http-2-server-push-2/">CloudFlare</a> tun.</dd>
<dt>[00:22:17] <a href="https://helloanselm.com/2016/amp-supercharges-link-rot/">AMP supercharges Link Rot</a></dt>
<dd>Kollege Anselm macht sich über langlebige URLs Gedanken und wir stimmen ein. Nothing lasts forever, und AMP ist anscheinend jetzt schon dem Linkverfall verschrieben. Leider ist das bei vielen Ressourcen so. Abhilfe schaffen SEO-Abmahnungen und Archive.org. Ein Projekt, dass man unterstützen soll. </dd>
</dl>
<h3>[00:34:25] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://wdrl.info/">WDRL.info</a></dt>
<dd>Auch ein Projekt, dass man unterstützen soll ist Anselms Web Development Reading List. Mehr Newsletter braucht man nicht.</dd>
<dt><a href="https://www.zachleat.com/web/comprehensive-webfonts/">Comprehensive Webfonts</a></dt>
<dd>Webfont Ladestrategien. Alle. Mit Vorteilen. Und Nachteilen.</dd>
<dt><a href="https://blog.mariusschulz.com/2016/07/12/speeding-up-babel-transpilation-with-compact-mode">Speeding up Babel transpilation with compact mode</a></dt>
<dd>Babel ist 5x schneller wenn man die Leerzeichen per default weglässt.</dd>
<dt><a href="https://www.smashingmagazine.com/2016/07/building-maintaining-atomic-design-systems-pattern-lab/">Building and maintaining atomic design systems with Pattern Lab</a></dt>
<dd>Pattern Lab 2 ist draussen und großartig! Node.js Implementierung, flexible Templating-Sprachen. Kein vordefiniertes Atomic Design. Bravo!</dd>
<dt><a href="https://www.youtube.com/watch?v=y4ggoN2xtAY">Can&#8217;t you make it more like Bootstrap</a></dt>
<dd>Musstet ihr schon mal Designsysteme unter Entwickler bringen? Alice Bartlett schon. Und nicht nur für eine Handvoll Webseiten, sondern für 177 verschiedene Webauftritte der Financial Times. Ein Erfahrungsbericht.</dd>
</dl>


Schepp, Hans und Stefan nutzen die steigenden Temperaturen um Unklarheiten aus
dem Weg zu räumen.


SCHAUNOTIZEN

[00:00:19] HTTP/2 SERVER PUSH

Ein Artikel von Google’s Tool Advokaten erklärt nicht n…

Schepp, Hans und Stefan nutzen die steigenden Temperaturen um Unklarheiten aus
dem Weg zu räumen.


SCHAUNOTIZEN

[00:00:19] HTTP/2 SERVER PUSH

Ein Artikel von Google’s Tool Advokaten erklärt nicht nur, wie man HTTP/2 Server
Push in den DevTools vom Chrome erkennt,
sondern wie das Gerüst sich unter der Haube verhält. Eine Unstimmigkeit nehmen
wir zum Anstoß um über das grundlegende Prinzip von Server Push zu reden,
diverse Anwendungsfälle zu finden und Licht ins Dunkel zu bringen. Dazu passend
sind weitere Literatur von Simone Bordet auf Stackoverflow und ein passendes
Video von selbigem. Wer HTTP/2 Server Push jetzt schon einsetzen möchte, kann
das zum Beispiel schon über CloudFlare tun.

[00:22:17] AMP SUPERCHARGES LINK ROT

Kollege Anselm macht sich über langlebige URLs Gedanken und wir stimmen ein.
Nothing lasts forever, und AMP ist anscheinend jetzt schon dem Linkverfall
verschrieben. Leider ist das bei vielen Ressourcen so. Abhilfe schaffen
SEO-Abmahnungen und Archive.org. Ein Projekt, dass man unterstützen soll.


[00:34:25] KEINE SCHAUNOTIZEN

WDRL.INFO

Auch ein Projekt, dass man unterstützen soll ist Anselms Web Development Reading
List. Mehr Newsletter braucht man nicht.

COMPREHENSIVE WEBFONTS

Webfont Ladestrategien. Alle. Mit Vorteilen. Und Nachteilen.

SPEEDING UP BABEL TRANSPILATION WITH COMPACT MODE

Babel ist 5x schneller wenn man die Leerzeichen per default weglässt.

BUILDING AND MAINTAINING ATOMIC DESIGN SYSTEMS WITH PATTERN LAB

Pattern Lab 2 ist draussen und großartig! Node.js Implementierung, flexible
Templating-Sprachen. Kein vordefiniertes Atomic Design. Bravo!

CAN’T YOU MAKE IT MORE LIKE BOOTSTRAP

Musstet ihr schon mal Designsysteme unter Entwickler bringen? Alice Bartlett
schon. Und nicht nur für eine Handvoll Webseiten, sondern für 177 verschiedene
Webauftritte der Financial Times. Ein Erfahrungsbericht.

Revision 271: HTTP/2 Server Push und Link Rot

<p>Diesmal reichte die Themenliste nur für eine Kurzrevision mit Schepp, Peter und Stefan. Dazu kommen die üblichen drei Links.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:12] Debugger vs. console.log() epic throwdown challenge</dt>
<dd>Angeregt von einem <a href="http://lemire.me/blog/2016/06/21/i-do-not-use-a-debugger/">„Debugger? Brauche ich nicht!“</a>-Artikel debattieren wir die Vor- und Nachteile von Debuggern und <code>console.log()</code>&nbsp;&ndash; denn tatsächlich nutzen viele auch namhafte Entwickler keinen Debugger (Peter erwähnt hier das Buch <a href="http://www.amazon.de/gp/product/1430219483/ref=as_li_tl?ie=UTF8&#038;camp=1638&#038;creative=6742&#038;creativeASIN=1430219483&#038;linkCode=as2&#038;tag=petedediekuns-21">Coders at Work</a>). Mit leichter Chrome-Schlagseite berichten wir von unseren Erfahrungen mit <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger">dem debugger-Statement</a>, <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">Source Maps</a>, Console-Methoden jenseits von <code>log()</code> (<a href="https://developers.google.com/web/tools/chrome-devtools/debug/console/?utm_source=dcc">Chrome</a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Console">Firefox</a>), Blackboxing (<a href="https://developer.chrome.com/devtools/docs/blackboxing">Chrome</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">Firefox</a>), <a href="https://mattdesl.svbtle.com/debugging-nodejs-in-chrome-devtools">Node-Debugging mit Chrome</a> und mit <a href="https://code.visualstudio.com/">Visual Studio Code</a><br />
sowie divserse anderen Debugging-Techniken&nbsp;&ndash; bis hin zum etwas exotischen <a href="https://developer.mozilla.org/de/docs/Tools/Web_Audio_Editor">Web Audio Editor</a> in Firefox.
</dd>
</dl>
<h3>[00:28:40] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/">Innovating with HTTP 2.0 Server Push</a></dt>
<dd>Aktualisierter Artikel zu HTTP 2.0 Server Push.</dd>
<dt><a href="https://github.com/pedroborges/kirby-autogit">pedroborges/kirby-autogit</a></dt>
<dd>Git für Kirby.</dd>
<dt><a href="https://frontendconf.ch/">Frontend Conference Zurich</a></dt>
<dd>Konferenz mit 1A Lineup!</dd>
</dl>


Diesmal reichte die Themenliste nur für eine Kurzrevision mit Schepp, Peter und
Stefan. Dazu kommen die üblichen drei Links.


SCHAUNOTIZEN

[00:00:12] DEBUGGER VS. CONSOLE.LOG() EPIC THROWDOWN CHALLE…

Diesmal reichte die Themenliste nur für eine Kurzrevision mit Schepp, Peter und
Stefan. Dazu kommen die üblichen drei Links.


SCHAUNOTIZEN

[00:00:12] DEBUGGER VS. CONSOLE.LOG() EPIC THROWDOWN CHALLENGE

Angeregt von einem „Debugger? Brauche ich nicht!“-Artikel debattieren wir die
Vor- und Nachteile von Debuggern und console.log() – denn tatsächlich nutzen
viele auch namhafte Entwickler keinen Debugger (Peter erwähnt hier das Buch
Coders at Work). Mit leichter Chrome-Schlagseite berichten wir von unseren
Erfahrungen mit dem debugger-Statement, Source Maps, Console-Methoden jenseits
von log() (Chrome, Firefox), Blackboxing (Chrome, Firefox), Node-Debugging mit
Chrome und mit Visual Studio Code
sowie divserse anderen Debugging-Techniken – bis hin zum etwas exotischen Web
Audio Editor in Firefox.


[00:28:40] KEINE SCHAUNOTIZEN

INNOVATING WITH HTTP 2.0 SERVER PUSH

Aktualisierter Artikel zu HTTP 2.0 Server Push.

PEDROBORGES/KIRBY-AUTOGIT

Git für Kirby.

FRONTEND CONFERENCE ZURICH

Konferenz mit 1A Lineup!

Revision 270: Debugging und Links

<p>Die Working Draft Crew ist ja nicht nur fleissig am sprechen, sondern lädt auch gern mal Sprechende zu der einen oder anderen Veranstaltung ein. Hans, Schepp und Stefan plaudern über Organisation von Meetups und Konferenzen</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:17] Titelthema</dt>
<dd>Was euch nun erwartet ist eine knappe Stunde Plaudern aus dem Nähkästchen. Wir sprechen über Hosting, wechselnde Gastgeber, Sponsoring. Die Vorteile von Meetups, die Vorteile von Konferenzen. Und weil wir unsere Finger doch in einigen Projekten haben, gibt&#8217;s hier eine Auflistung ebenjener:</p>
<p>Hans:</p>
<ul>
<li><a href="https://www.nightlybuild.io">Nightly Build 2016</a></li>
</ul>
<p>Schepp:</p>
<ul>
<li><a href="http://webworker-nrw.de/">Webworker NRW Meetup</a></li>
<li><a href="http://multimediatreff.de/">Multimediatreff</a> &#8211; Der Multimediatreff kommt wieder! Vermutlich Ende November</a></li>
</ul>
<p>Stefan:</p>
<ul>
<li><a href="http://technologieplauscherl.at/">Technologieplauscherl Meetup</a></li>
<li><a href="http://www.meetup.com/de-DE/stahlstadt-js/">Stahlstadt.js Meetup</a></li>
<li><a href="http://www.scriptconf.org/">Script&#8217;17</a> &#8211; JavaScript Event</li>
</ul>
</dd>
</dl>
<h3>[00:54:41] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/rtsao/csjs">CSJS &#8211; ECMAScript 2016 Stylesheets</a></dt>
<dd>Stefan hat ja sehr eindeutige Meinungen zu CSS in JS Methodologien. Diese hier findet er allerdings ganz sauber! Gilt das schon als Hölle zufrieren?</dd>
<dt><a href="https://github.com/voxmedia/lightbike">Lightbike</a></dt>
<dd>Performance Budgets und Webdriver. Fein.</dd>
</dl>


Die Working Draft Crew ist ja nicht nur fleissig am sprechen, sondern lädt auch
gern mal Sprechende zu der einen oder anderen Veranstaltung ein. Hans, Schepp
und Stefan plaudern über Organisation von …

Die Working Draft Crew ist ja nicht nur fleissig am sprechen, sondern lädt auch
gern mal Sprechende zu der einen oder anderen Veranstaltung ein. Hans, Schepp
und Stefan plaudern über Organisation von Meetups und Konferenzen


SCHAUNOTIZEN

[00:00:17] TITELTHEMA

Was euch nun erwartet ist eine knappe Stunde Plaudern aus dem Nähkästchen. Wir
sprechen über Hosting, wechselnde Gastgeber, Sponsoring. Die Vorteile von
Meetups, die Vorteile von Konferenzen. Und weil wir unsere Finger doch in
einigen Projekten haben, gibt’s hier eine Auflistung ebenjener:



Hans:

 * Nightly Build 2016

Schepp:

 * Webworker NRW Meetup
 * Multimediatreff – Der Multimediatreff kommt wieder! Vermutlich Ende November

Stefan:

 * Technologieplauscherl Meetup
 * Stahlstadt.js Meetup
 * Script’17 – JavaScript Event


[00:54:41] KEINE SCHAUNOTIZEN

CSJS – ECMASCRIPT 2016 STYLESHEETS

Stefan hat ja sehr eindeutige Meinungen zu CSS in JS Methodologien. Diese hier
findet er allerdings ganz sauber! Gilt das schon als Hölle zufrieren?

LIGHTBIKE

Performance Budgets und Webdriver. Fein.

Revision 268: Konferenz- und Meetup-Organisation

<p>Aus akuter Themen-Ermangelung drehen Anselm und Stefan wieder mal am Rad. Erstaunlicherweise gibt&#8217;s zum ganz einfachen Elementen wieder außerordentlich viel zu lernen.</p>
<h3>[00:00:23] News</h3>
<dl>
<dt><a href="https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/">jQuery 3 ist raus!</a></dt>
<dd>jQuery 3 wurde released und bietet allerlei Neuerungen. Alte Browser müssen nun dazu geschaltet werden, alle asynchronen Calls sind Promise-kompatibel, usw. Mehr dazu in dem Blog Beitrag.</dd>
<dt><a href="https://www.nginx.com/blog/supporting-http2-google-chrome-users/">Nginx on HTTP/2 on Google Chrome bug</a></dt>
<dd>Nginx ist toll, HTTP/2 ist toll, Chrome ist toll, Ubuntu auch toll. In der Mischung: Oft nicht verwendbar. Ein ganz prekärer Bug hat sich eingeschlichen, der Google Chrome User unter falschen Voraussetzungen nicht das schöne neue HTTP/2 konsumieren lässt. Dieser Artikel zeigt die Abhilfe.</dd>
</dl>
<h3>[00:04:01] Glücksrad</h3>
<dl>
<dt><a href="https://html.spec.whatwg.org/#the-img-element">Das <code>img</code>-Element</a></dt>
<dd>Das <code>img</code> Element ist ja allseits bekannt, hat aber doch ein paar Besonderheiten, die es zu klären gibt. Wir reden über Image maps und das <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image">crossorigin</a></code> Attribut, und lassen alt gediente Input Elemente wieder aufleben.</dd>
<dt><a href="https://html.spec.whatwg.org/#sections-and-headings">Sections and headings</a></dt>
<dd>Schönes neues HTML. HTML5 kam, versprach gute Strukturen, und weder Screenreader noch Browser nahmen das ganze an. Entwickler hingegen, die ein wenig Gespür für Semantik haben, sahen darin riesige Vorteile. Wir resümieren.</dd>
<dt><a href="https://developer.mozilla.org/en/docs/Web/HTML/Element/wbr">Das <code>wbr</code> Element</a></dt>
<dd>Wieviele Möglichkeiten gibt es eigentlich, dem Browser zu sagen wann er abtrennen soll. Oder wie er abtrennen soll. Oder wenn er&#8217;s bleiben lassen soll. Und warum sind denn alle unterschiedlich? Mal ein Element, mal eine Entity. Im CSS kriegt man&#8217;s sowieso nicht sauber hin. Wo bitte ist die all-in-one Lösung.</dd>
</dl>
<h3>[00:35:47] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.ecma-international.org/ecma-262/7.0/index.html">ECMAScript 2016 Standard</a></dt>
<dd>Die siebte Fassung von ECMAScript &#8212; die 2016er Edition &#8212; ist fertig. Hier kann man den gesamten Standard nachlesen. Wenn man denn will.</dd>
<dt><a href="https://blog.getify.com/promises-wrong-ways/">Promises &#8212; all the wrong ways</a></dt>
<dd>Getify beschwert sich über falsche Anwendung von Promises. Fairerweise gibt er auch gleich Lösungsvorschläge mit.</dd>
<dt><a href="https://bitsofco.de/form-validation-techniques/#addingmultipleerrormessagestoonetooltip">Form validation techniques</a></dt>
<dd>So viele Infos zu korrekter Formularvalidierung. Wo hören die Browser-Funktionalitäten auf, wo muss man selbst ran.</dd>
<dt><a href="https://www.youtube.com/playlist?list=PL37ZVnwpeshE6PbF5GB4hvtU3A4HqMfxf">JSConf Budapest</a></dt>
<dd>Viele, viele schöne Videos von der JSConf in Budapest.</dd>
</dl>


Aus akuter Themen-Ermangelung drehen Anselm und Stefan wieder mal am Rad.
Erstaunlicherweise gibt’s zum ganz einfachen Elementen wieder außerordentlich
viel zu lernen.


[00:00:23] NEWS

JQUERY 3 IST …

Aus akuter Themen-Ermangelung drehen Anselm und Stefan wieder mal am Rad.
Erstaunlicherweise gibt’s zum ganz einfachen Elementen wieder außerordentlich
viel zu lernen.


[00:00:23] NEWS

JQUERY 3 IST RAUS!

jQuery 3 wurde released und bietet allerlei Neuerungen. Alte Browser müssen nun
dazu geschaltet werden, alle asynchronen Calls sind Promise-kompatibel, usw.
Mehr dazu in dem Blog Beitrag.

NGINX ON HTTP/2 ON GOOGLE CHROME BUG

Nginx ist toll, HTTP/2 ist toll, Chrome ist toll, Ubuntu auch toll. In der
Mischung: Oft nicht verwendbar. Ein ganz prekärer Bug hat sich eingeschlichen,
der Google Chrome User unter falschen Voraussetzungen nicht das schöne neue
HTTP/2 konsumieren lässt. Dieser Artikel zeigt die Abhilfe.


[00:04:01] GLÜCKSRAD

DAS IMG-ELEMENT

Das img Element ist ja allseits bekannt, hat aber doch ein paar Besonderheiten,
die es zu klären gibt. Wir reden über Image maps und das crossorigin Attribut,
und lassen alt gediente Input Elemente wieder aufleben.

SECTIONS AND HEADINGS

Schönes neues HTML. HTML5 kam, versprach gute Strukturen, und weder Screenreader
noch Browser nahmen das ganze an. Entwickler hingegen, die ein wenig Gespür für
Semantik haben, sahen darin riesige Vorteile. Wir resümieren.

DAS WBR ELEMENT

Wieviele Möglichkeiten gibt es eigentlich, dem Browser zu sagen wann er
abtrennen soll. Oder wie er abtrennen soll. Oder wenn er’s bleiben lassen soll.
Und warum sind denn alle unterschiedlich? Mal ein Element, mal eine Entity. Im
CSS kriegt man’s sowieso nicht sauber hin. Wo bitte ist die all-in-one Lösung.


[00:35:47] KEINE SCHAUNOTIZEN

ECMASCRIPT 2016 STANDARD

Die siebte Fassung von ECMAScript — die 2016er Edition — ist fertig. Hier kann
man den gesamten Standard nachlesen. Wenn man denn will.

PROMISES — ALL THE WRONG WAYS

Getify beschwert sich über falsche Anwendung von Promises. Fairerweise gibt er
auch gleich Lösungsvorschläge mit.

FORM VALIDATION TECHNIQUES

So viele Infos zu korrekter Formularvalidierung. Wo hören die
Browser-Funktionalitäten auf, wo muss man selbst ran.

JSCONF BUDAPEST

Viele, viele schöne Videos von der JSConf in Budapest.

Revision 267: News und Glücksrad

<p>Wir waren mal wieder reif für einen Gast und so luden wir diese Revision den <a href="https://twitter.com/danielmies">Daniel Mies</a> zu uns ein.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:02] <a href="https://www.typescriptlang.org/">TypeScript</a></dt>
<dd>Wir wählten TypeScript als Hauptthema dieser Folge, weil Daniel in seinen JavaScript-basierten Projekten reichlich gute Erfahrung damit gemacht hat. TypeScript ist im Prinzip ein Superset von EcmaScript Next, also reinrassiges JavaScript mit ein paar wenigen, aber wichtigen Erweiterungen oben drauf. Diese Erweiterungen haben nur einen Zweck, nämlich die Entwicklung in der Sprache JavaScript robuster und angenehmer zu gestalten. Die Eckpfeiler dafür sind: </p>
<ul>
<li>Typisierung von Variablen zur Absicherung gegen Typ-Fehler</li>
<li>Interfaces zur Typisierung ganzer Objektstrukturen</li>
<li><a href="https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841#.2e76pj3s5">Decorators</a> zur Anreicherung von Funktionen/Methoden um weitere Aufrufe</li>
</ul>
<p>All diese Features ermöglichen es einer TypeScript-fähigen IDE schon zum Zeitpunkt der Codeerstellung Fehler zu erkennen, und sie ermöglichen auch bessere Code-Assistenz-Werkzeuge.</p>
<p>Um Typisierung und Interfaces auch für externe JavaScript-Bibliotheken nutzen zu können, gibt es das <a href="https://github.com/typings/typings">Typings</a>-Projekt, eine Sammlung von Typ- und Interface-Definitionen für all die populären Libraries.</p>
<p>Wer jetzt Blut geleckt hat: Die <a href="https://www.typescriptlang.org/docs/tutorial.html">TypeScript-Doku</a> ist laut Daniel sehr gut. Darüberhinaus hat Damiel selbst <a href="https://blog.codecentric.de/2016/03/einfuehrung-in-typescript-setup-und-typsystem/">eine kleine Einführung geschrieben</a>. Zu guter Letzt gibt dann noch das exzellente <a href="https://github.com/basarat/typescript-book">TypeScript Book</a>, das Pattern und Best-Practices dokumentiert.
</dd>
<dt>[00:35:38] <a href="https://remysharp.com/2016/05/28/state-of-the-gap">State of the gap</a></dt>
<dd>Abschließend beschäftigten wir noch mit der Frage, ob Adobe Cordova / PhoneGap in Zeiten moderner Browser überhaupt noch benötigt wird. Wir denken schon, auch wenn diese Bedarfsmomente eher selten sind.</dd>
</dl>
<h3>[00:56:18] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://tavmjong.free.fr/blog/?p=1632">CSS Line Spacing Exposed</a></dt>
<dd>Hier taucht der Autor tief in die Layout-Mechaniken von CSS Zeilendurchschüssen ein.</dd>
<dt><a href="http://jugendhackt.de/">Jugend hackt &#8211; Mit Code die Welt verbessern</a></dt>
<dd>&#8222;Jugend hackt&#8220; ist eine Veranstaltungsreihe, die bundesweit stattfindet, sowie in der Schweiz, und die junge Leute an das Thema &#8222;Programmieren&#8220; heranführen soll. Dafür werden kontinuierlich erfahrene Mentoren gesucht, die den Neulingen helfend zur Seite stehen. Vielleicht wäre das ja auch mal was für Euch?</dd>
</dl>


Wir waren mal wieder reif für einen Gast und so luden wir diese Revision den
Daniel Mies zu uns ein.


SCHAUNOTIZEN

[00:01:02] TYPESCRIPT

Wir wählten TypeScript als Hauptthema dieser Folge, weil Dan…

Wir waren mal wieder reif für einen Gast und so luden wir diese Revision den
Daniel Mies zu uns ein.


SCHAUNOTIZEN

[00:01:02] TYPESCRIPT

Wir wählten TypeScript als Hauptthema dieser Folge, weil Daniel in seinen
JavaScript-basierten Projekten reichlich gute Erfahrung damit gemacht hat.
TypeScript ist im Prinzip ein Superset von EcmaScript Next, also reinrassiges
JavaScript mit ein paar wenigen, aber wichtigen Erweiterungen oben drauf. Diese
Erweiterungen haben nur einen Zweck, nämlich die Entwicklung in der Sprache
JavaScript robuster und angenehmer zu gestalten. Die Eckpfeiler dafür sind:



 * Typisierung von Variablen zur Absicherung gegen Typ-Fehler
 * Interfaces zur Typisierung ganzer Objektstrukturen
 * Decorators zur Anreicherung von Funktionen/Methoden um weitere Aufrufe

All diese Features ermöglichen es einer TypeScript-fähigen IDE schon zum
Zeitpunkt der Codeerstellung Fehler zu erkennen, und sie ermöglichen auch
bessere Code-Assistenz-Werkzeuge.

Um Typisierung und Interfaces auch für externe JavaScript-Bibliotheken nutzen zu
können, gibt es das Typings-Projekt, eine Sammlung von Typ- und
Interface-Definitionen für all die populären Libraries.

Wer jetzt Blut geleckt hat: Die TypeScript-Doku ist laut Daniel sehr gut.
Darüberhinaus hat Damiel selbst eine kleine Einführung geschrieben. Zu guter
Letzt gibt dann noch das exzellente TypeScript Book, das Pattern und
Best-Practices dokumentiert.

[00:35:38] STATE OF THE GAP

Abschließend beschäftigten wir noch mit der Frage, ob Adobe Cordova / PhoneGap
in Zeiten moderner Browser überhaupt noch benötigt wird. Wir denken schon, auch
wenn diese Bedarfsmomente eher selten sind.


[00:56:18] KEINE SCHAUNOTIZEN

CSS LINE SPACING EXPOSED

Hier taucht der Autor tief in die Layout-Mechaniken von CSS Zeilendurchschüssen
ein.

JUGEND HACKT – MIT CODE DIE WELT VERBESSERN

„Jugend hackt“ ist eine Veranstaltungsreihe, die bundesweit stattfindet, sowie
in der Schweiz, und die junge Leute an das Thema „Programmieren“ heranführen
soll. Dafür werden kontinuierlich erfahrene Mentoren gesucht, die den Neulingen
helfend zur Seite stehen. Vielleicht wäre das ja auch mal was für Euch?

Revision 266: TypeScript

<p>Nach monatelange Steineklopfen ist es endlich gelungen, mit <a href="https://twitter.com/derPepo">dem Pepo</a> eine Revision zum abstrakten Thema „Weiterbildung im Frontend-Bereich“ einzutüten.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:44] Weiterbildung im Frontend-Bereich</dt>
<dd>
Warum scheinen so viele Entwickler nur Dienst nach (locker interpretierter) Vorschrift zu schieben? Liegt es daran, dass <a href="http://www.stilldrinking.org/programming-sucks">(Web)-Entwicklung eine so haarige Angelegenheit</a> ist? Wir sprechen über mögliche Ursachen sowie Team-Management und Organisationstechniken, Scrum, Prozessse, Checklisten und Code Reviews sowie Refactoring (<a href="https://speakerdeck.com/creinartz/large-scale-css-refactoring">speziell von CSS</a>) und Planung von Refactorings.</dd>
</dl>


Nach monatelange Steineklopfen ist es endlich gelungen, mit dem Pepo eine
Revision zum abstrakten Thema „Weiterbildung im Frontend-Bereich“ einzutüten.


SCHAUNOTIZEN

[00:00:44] WEITERBILDUNG IM FRON…

Nach monatelange Steineklopfen ist es endlich gelungen, mit dem Pepo eine
Revision zum abstrakten Thema „Weiterbildung im Frontend-Bereich“ einzutüten.


SCHAUNOTIZEN

[00:00:44] WEITERBILDUNG IM FRONTEND-BEREICH

Warum scheinen so viele Entwickler nur Dienst nach (locker interpretierter)
Vorschrift zu schieben? Liegt es daran, dass (Web)-Entwicklung eine so haarige
Angelegenheit ist? Wir sprechen über mögliche Ursachen sowie Team-Management und
Organisationstechniken, Scrum, Prozessse, Checklisten und Code Reviews sowie
Refactoring (speziell von CSS) und Planung von Refactorings.

Revision 265: Weiterbildung im Frontend

<p>Anselm, Peter und Stefan stellten mal wieder fest: Webentwicklung ist, als wollte man über 9000 Korken gleichzeitig unter Wasser halten. Und hin und wieder klappt das gar nicht mal so gut.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:17] CSS außer Rand und Band</dt>
<dd>Einem <a href="http://tomek.wiszniewski.cc/how-css-unit-tests-helped-us-move-fast/">Artikel über CSS-Unit-Tests</a> stehen wir skeptisch gegenüber, erkennen aber an, dass die Menschheit Mittel und Wege sucht, ihr CSS unter Kontrolle zu bekommen. <a href="http://www.csspurge.com/">Dieses ist nämlich oft außer Rand und Band</a>. Wir empfehlen als Gegenmittel Systeme wie <a href="http://getbem.com/introduction/">BEM</a>, klassische Codequalitätssicherungsmaßnahmen wie Reviewprozesse auf CSS anzuwenden, die Finger von Reset-Stylesheets oder Stylesheets wie <a href="https://necolas.github.io/normalize.css/">Normalize.css</a> zu lassen und <a href="https://github.com/CSSLint/csslint">ausgiebig</a> <a href="https://github.com/stylelint/stylelint">zu</a> <a href="https://github.com/brigade/scss-lint">linten</a>. Stefan empfiehlt außerdem CSS-Workshops mit <a href="http://csswizardry.com/">Harry Roberts</a>, der sich durch weit überdurchschnittliche Checkung in diesem Bereich auszeichnet.</dd>
<dt>[00:29:44] <a href="http://molily.de/mobile-web-performance/">Our best practices are killing mobile web performance</a></dt>
<dd>
Schaden Desktop-Performance-Best-Practices auf Mobile? Zumindest bei Lazy Loading und asynchronem JavaScript sieht es so aus. Generell ist das Aufstellen allgemeingültiger Regeln in einer Welt, in der <a href="http://slidedeck.io/Schepp/HTTP-2">HTTP2</a> neben Oldschool-HTTP existiert, nicht ganz einfach. Projekte wie <a href="https://developers.google.com/speed/pagespeed/">PageSpeed</a> und der SpeedIndex von <a href="http://www.webpagetest.org/">webpagetest.org</a> (<a href="http://fettblog.eu/speed-index-explained-topconf/">hier von Stefan detailliert erklärt</a>) probieren es trotzdem. Wie wir dann von HighTechWebTech zum Fazit „Make Flash great again“ kommen, verraten wir an dieser Stelle nicht.</dd>
</dl>
<h3>[00:53:35] Keine Schaunotizen</h3>
<dl>
<dt>[00:00:00] <a href="https://learnredux.com/">Learn Redux Video Tutorial Course</a></dt>
<dd>Der umtriebige Wes Bos erklärbärt in einer kleinen Videoserie Redux.</dd>
<dt>[00:00:00] <a href="https://www.youtube.com/playlist?list=PLNYkxOF6rcIDz1TzmmMRBC-kd8zPRTQIP">Web and Chrome at Google I/O 2016</a></dt>
<dd>Das für Web-Nerds interessanteste von der I/O 2016.</dd>
</dl>


Anselm, Peter und Stefan stellten mal wieder fest: Webentwicklung ist, als
wollte man über 9000 Korken gleichzeitig unter Wasser halten. Und hin und wieder
klappt das gar nicht mal so gut.


SCHAUNOTI…

Anselm, Peter und Stefan stellten mal wieder fest: Webentwicklung ist, als
wollte man über 9000 Korken gleichzeitig unter Wasser halten. Und hin und wieder
klappt das gar nicht mal so gut.


SCHAUNOTIZEN

[00:00:17] CSS AUSSER RAND UND BAND

Einem Artikel über CSS-Unit-Tests stehen wir skeptisch gegenüber, erkennen aber
an, dass die Menschheit Mittel und Wege sucht, ihr CSS unter Kontrolle zu
bekommen. Dieses ist nämlich oft außer Rand und Band. Wir empfehlen als
Gegenmittel Systeme wie BEM, klassische Codequalitätssicherungsmaßnahmen wie
Reviewprozesse auf CSS anzuwenden, die Finger von Reset-Stylesheets oder
Stylesheets wie Normalize.css zu lassen und ausgiebig zu linten. Stefan
empfiehlt außerdem CSS-Workshops mit Harry Roberts, der sich durch weit
überdurchschnittliche Checkung in diesem Bereich auszeichnet.

[00:29:44] OUR BEST PRACTICES ARE KILLING MOBILE WEB PERFORMANCE

Schaden Desktop-Performance-Best-Practices auf Mobile? Zumindest bei Lazy
Loading und asynchronem JavaScript sieht es so aus. Generell ist das Aufstellen
allgemeingültiger Regeln in einer Welt, in der HTTP2 neben Oldschool-HTTP
existiert, nicht ganz einfach. Projekte wie PageSpeed und der SpeedIndex von
webpagetest.org (hier von Stefan detailliert erklärt) probieren es trotzdem. Wie
wir dann von HighTechWebTech zum Fazit „Make Flash great again“ kommen, verraten
wir an dieser Stelle nicht.


[00:53:35] KEINE SCHAUNOTIZEN

[00:00:00] LEARN REDUX VIDEO TUTORIAL COURSE

Der umtriebige Wes Bos erklärbärt in einer kleinen Videoserie Redux.

[00:00:00] WEB AND CHROME AT GOOGLE I/O 2016

Das für Web-Nerds interessanteste von der I/O 2016.

Revision 264: Make Flash great again

<blockquote class="twitter-tweet" data-lang="de">
<p lang="de" dir="ltr">Voll am podcasten hier, der <a href="https://twitter.com/workingdraft">@workingdraft</a> <a href="https://twitter.com/hashtag/btconf?src=hash">#btconf</a> <a href="https://t.co/4Kzyid5Ujl">pic.twitter.com/4Kzyid5Ujl</a></p>
<p>&mdash; position: absolutely (@tcaspers) <a href="https://twitter.com/tcaspers/status/729990542503882752">10. Mai 2016</a></p></blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<p>Auch dieses Jahr waren wir auf der Düsseldorfer <a href="https://beyondtellerrand.com/blog/wrap-up-dus2016">beyond tellerrand</a>, wo wir nicht nur <a href="https://vimeo.com/channels/beyondtellerrand/videos">fantastische Talks</a> gesehen, sondern uns auch wieder jemanden zum Ausfragen geschnappt haben. Anstatt dass es wie sonst nur ein Interviewpartner war, ergab es sich, dass wir derer drei zusammenbekamen: Während drinnen Vorträge liefen, starteten Rodney und Schepp mit <a href="https://twitter.com/ppk">PPK</a> und <a href="https://twitter.com/codepo8">Chris Heilmann</a> ein, und zur Pause gesellte sich spontan noch <a href="https://twitter.com/adactio">Jeremy Keith</a> dazu. Im Hof des Capitols sitzend sprachen wir, wie sollte es in dieser Runde anders sein, über übertriebenes Tooling und die Kaputtheit des Webs. Für die Ton-Qualität, die eher mittel (und heftig geräuschgefiltert) ist, entschuldigen wir uns, aber ein Interview im Innenbereich war für uns ebenso wenig praktikabel. Viel Spaß beim Hören!</p>


> Voll am podcasten hier, der @workingdraft #btconf pic.twitter.com/4Kzyid5Ujl
> 
> — position: absolutely (@tcaspers) 10. Mai 2016



Auch dieses Jahr waren wir auf der Düsseldorfer beyond tellerrand…

> Voll am podcasten hier, der @workingdraft #btconf pic.twitter.com/4Kzyid5Ujl
> 
> — position: absolutely (@tcaspers) 10. Mai 2016



Auch dieses Jahr waren wir auf der Düsseldorfer beyond tellerrand, wo wir nicht
nur fantastische Talks gesehen, sondern uns auch wieder jemanden zum Ausfragen
geschnappt haben. Anstatt dass es wie sonst nur ein Interviewpartner war, ergab
es sich, dass wir derer drei zusammenbekamen: Während drinnen Vorträge liefen,
starteten Rodney und Schepp mit PPK und Chris Heilmann ein, und zur Pause
gesellte sich spontan noch Jeremy Keith dazu. Im Hof des Capitols sitzend
sprachen wir, wie sollte es in dieser Runde anders sein, über übertriebenes
Tooling und die Kaputtheit des Webs. Für die Ton-Qualität, die eher mittel (und
heftig geräuschgefiltert) ist, entschuldigen wir uns, aber ein Interview im
Innenbereich war für uns ebenso wenig praktikabel. Viel Spaß beim Hören!

Revision 263: Im Gespräch mit PPK, Chris Heilmann und Jeremy Keith

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 275: Project Ironman

Working Draft

Revision 274: Ionic Framework

Working Draft

Revision 273: Open Device Labs, HTML5Test.com and Weird Browsers

Working Draft

Revision 272: Statische Seitengeneratoren, Metalsmith und CSS Funktionssyntax

Working Draft

Revision 271: HTTP/2 Server Push und Link Rot

Working Draft

Revision 270: Debugging und Links

Working Draft

Revision 268: Konferenz- und Meetup-Organisation

Working Draft

Revision 267: News und Glücksrad

Working Draft

Revision 266: TypeScript

Working Draft

Revision 265: Weiterbildung im Frontend

Working Draft

Revision 264: Make Flash great again

Working Draft

Revision 263: Im Gespräch mit PPK, Chris Heilmann und Jeremy Keith

Working Draft