<p>Eine weitere Woche mit einem Gast. Diesmal ist <a href="http://passy.me/">Pascal Hartig aka. Passy</a> vom <a href="http://yeoman.io/">Yeoman</a>&#8211; und <a href="http://todomvc.com/">Todo-MVC</a>-Team mit dabei.</p>
<h3>Keine News</h3>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:58] Open Source</dt>
<dd>Pascal spricht über seine Arbeit im Open-Source-Bereich und erzählt vom Anfang seiner Karriere mit <a href="http://24pullrequests.com/">24 Pull Requests</A>. Dadurch wurde vom TodoMVC-Team rekrutiert, kurz danach folgte Yeoman, dann Bower und nun arbeitet er bei Twitter in London.<br />
Pascal erzählt von der Balance zwischen &#8222;normaler&#8220; Arbeit und Open Source, dem Unterschied zwischen einer kleiner Agentur und der großen Firma Twitter.<br />
Für alle, die auch so enden möchten, gibt er als Tipp, dass man konsistent an OSS Projekten mitarbeitet und nicht nur hier und da ein Pull Request erstellt.</dd>
<dt>[00:20:43] <a href="http://facebook.github.io/react/">React</a></dt>
<dd>Pascals Wunschthema ist Facebooks React, eine Bibliothek für User Interfaces, dessen Hauptfunktion die Erstellung von wiederverwertbaren Komponenten ist. <a href="http://2013.jsconf.eu/speakers/pete-hunt-react-rethinking-best-practices.html">Pete Hunts Talk</a> gibt nähere Einblicke zur Funktionalität: HTML in JS durch virtuelles DOM erstellen, das mit nativem DOM verglichen wird. Das Interessante an React ist, dass es auch mit anderen Frameworks, wie AngularJS o. Ä., kombinierbar ist, da sich React <i>nur</i> um die Views kümmert.<br />
Der größte Nachteil ist wohl die Kombination mit anderen DOM-verändernden Libraries (wie z. B. jQuery), aber auch dieses Problem ist laut Pascal, unter Kontrolle zu bekommen.<br />
<a href="http://facebook.github.io/react/docs/tutorial.html">Reacts Starting-Tutorial</a> ist auf jeden Fall einen Blick wert.</dd>
<dt>[00:31:29] <a href="https://github.com/assetgraph/assetgraph">AssetGraph</a></dt>
<dd>AssetGraph ist der Versuch einen Graphen einer Webseite abzubilden – welche Ressourcen werden von welchen anderen Ressourcen verwendet.<br />
Dadurch ergeben sich Möglichkeiten, wie intelligentes Autocomplete in der IDE, einfache Diagnose von Problemen, Optimierung von Web-Seiten und Applikationen. Die Nachteile sind allerdings die hohe Komplexität und, durch seine Neuartigkeit, die gegebenenfalls noch etwas mühsame Benutzung.</dd>
</dl>
<h3>[00:39:34] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.json-generator.com/">JSON Generator</a></dt>
<dd>Generiert JSON passend zur API-Definition.</dd>
<dt><a href="http://status.modern.ie/">Status IE</a></dt>
<dd>Status IE ist eine Aufzeichnung der aktuellen Feature-Implementierung in Internet Explorer. Chromes Pendent dazu gibt’s <a href="http://www.chromestatus.com/features">hier</a>.</dd>
<dt><a href="https://github.com/mdevils/node-jscs">Node JSCS</a></dt>
<dd>Ein JavaScript Code Style Checker – mehr als nur JSHint.</dd>
</dl>
<h3>[00:41:33] Tipp(s) der Woche</h3>
<dl>
<dt><a href="http://jakearchibald.com/2014/visible-undoes-hidden/">visibility: visible undoes visibility: hidden</a></dt>
<dd>Setzt man visibility: hidden auf ein Element, kann man ein Kinds-Element mit visibility: visible wieder sichtbar machen.</dd>
<dt><a href="https://stackoverflow.com/questions/1606797/use-of-apply-with-new-operator-is-this-possible/8843181#8843181">Use of .apply() with &#8217;new&#8216; operator. Is this possible?</a></dt>
<dd>Beliebig viele Argumente an einen Constructor in JavaScript mit Function.prototype.bind übergeben.</dd>
</dl>


Eine weitere Woche mit einem Gast. Diesmal ist Pascal Hartig aka. Passy vom
Yeoman– und Todo-MVC-Team mit dabei.


KEINE NEWS


SCHAUNOTIZEN

[00:00:58] OPEN SOURCE

Pascal spricht über seine Arbeit i…

Working Draft

Eine weitere Woche mit einem Gast. Diesmal ist Pascal Hartig aka. Passy vom
Yeoman– und Todo-MVC-Team mit dabei.


KEINE NEWS


SCHAUNOTIZEN

[00:00:58] OPEN SOURCE

Pascal spricht über seine Arbeit im Open-Source-Bereich und erzählt vom Anfang
seiner Karriere mit 24 Pull Requests. Dadurch wurde vom TodoMVC-Team rekrutiert,
kurz danach folgte Yeoman, dann Bower und nun arbeitet er bei Twitter in London.
Pascal erzählt von der Balance zwischen „normaler“ Arbeit und Open Source, dem
Unterschied zwischen einer kleiner Agentur und der großen Firma Twitter.
Für alle, die auch so enden möchten, gibt er als Tipp, dass man konsistent an
OSS Projekten mitarbeitet und nicht nur hier und da ein Pull Request erstellt.

[00:20:43] REACT

Pascals Wunschthema ist Facebooks React, eine Bibliothek für User Interfaces,
dessen Hauptfunktion die Erstellung von wiederverwertbaren Komponenten ist. Pete
Hunts Talk gibt nähere Einblicke zur Funktionalität: HTML in JS durch virtuelles
DOM erstellen, das mit nativem DOM verglichen wird. Das Interessante an React
ist, dass es auch mit anderen Frameworks, wie AngularJS o. Ä., kombinierbar ist,
da sich React nur um die Views kümmert.
Der größte Nachteil ist wohl die Kombination mit anderen DOM-verändernden
Libraries (wie z. B. jQuery), aber auch dieses Problem ist laut Pascal, unter
Kontrolle zu bekommen.
Reacts Starting-Tutorial ist auf jeden Fall einen Blick wert.

[00:31:29] ASSETGRAPH

AssetGraph ist der Versuch einen Graphen einer Webseite abzubilden – welche
Ressourcen werden von welchen anderen Ressourcen verwendet.
Dadurch ergeben sich Möglichkeiten, wie intelligentes Autocomplete in der IDE,
einfache Diagnose von Problemen, Optimierung von Web-Seiten und Applikationen.
Die Nachteile sind allerdings die hohe Komplexität und, durch seine
Neuartigkeit, die gegebenenfalls noch etwas mühsame Benutzung.


[00:39:34] KEINE SCHAUNOTIZEN

JSON GENERATOR

Generiert JSON passend zur API-Definition.

STATUS IE

Status IE ist eine Aufzeichnung der aktuellen Feature-Implementierung in
Internet Explorer. Chromes Pendent dazu gibt’s hier.

NODE JSCS

Ein JavaScript Code Style Checker – mehr als nur JSHint.


[00:41:33] TIPP(S) DER WOCHE

VISIBILITY: VISIBLE UNDOES VISIBILITY: HIDDEN

Setzt man visibility: hidden auf ein Element, kann man ein Kinds-Element mit
visibility: visible wieder sichtbar machen.

USE OF .APPLY() WITH ’NEW‘ OPERATOR. IS THIS POSSIBLE?

Beliebig viele Argumente an einen Constructor in JavaScript mit
Function.prototype.bind übergeben.

Revision 166: Open Source, React und AssetGraph

<p>Stefan und Peter haben sich <a href="http://twitter.com/yellowled">Matthias Mees</a> und <a href="http://twitter.com/Flocke">Jens Grochtdreis</a> ins virtuelle Studio geholt um den kürzlich stattgefundenen Webkongress in Erlangen Revue passieren zu lassen, sowie über den Zustand diverser Websites zu philosophieren.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:15] <a href="http://www.webkongress.uni-erlangen.de/">Rückblick Webkongress Erlangen</a></dt>
<dd>Im März fand der dritte Webkongress der Uni Erlangen statt, der sich auch um die Themen kümmert, die nicht so viel Beachtung auf den großen Konferenzen der Branche finden: Barrierefreiheit und Content Management System, zum Beispiel. Jens und Matthias erzählen von ihren Erlebnissen in der Universitätststadt und geben folgende <a href="http://www.video.uni-erlangen.de/course/id/263.html">Anschautipps</a>: Marc Hinse &#8211; <a href="http://www.video.uni-erlangen.de/clip/id/3704.html">Die Gefahren von Webdesign Trends</a>, Wolfgang Wiese &#8211; <a href="http://www.video.uni-erlangen.de/clip/id/3705.html">The Beauty and the Beast</a>, Patrick Lobacher &#8211; <a href="http://www.video.uni-erlangen.de/clip/id/3687.html">Typo 3 Neos</a>, Nils Pooker &#8211; <a href="http://www.video.uni-erlangen.de/clip/id/3702.html">Alles so schön responsive hier?</a>, sowie alle Barrierefreiheits-Talks</dd>
<dt>[00:13:17] <a href="https://twitter.com/pookerman/status/449076290147336192">Die Beschissenheit mancher Websites, und Ihre Gründe</a></dt>
<dd>Warum gibt es immer noch Restaurants, die ihre Menükarten als PDF verlinken und nicht einfach den Text auf der Website zugänglich machen? Wenn es schon so viele Profis gibt, die gute Websites erzeugen, warum findet man immer noch soviel Mist im Web? Und wie geht man als Entwickler/Designer mit der Beratungsresistenz mancher Kunden um? In einer groß angelegten Raunz-Runde versuchen wir die Gründe zu erörtern und lassen sich über einige Misstände der Branche aus.</dd>
<dt>[00:47:04] <a href="http://alistapart.com/column/our-enclosed-space">Our Enclosed Space</a></dt>
<dd>Rachel Andrew schreibt, dass wir uns in einer elitären und sehr kleinen Referenzgruppe bewegen und viel vom echten Leben &#8222;da draussen&#8220; gerne mal vergessen. Oder vergessen würden. Bei all den schönen, tollen, neuen Technologien die auf den Konferenzen propagiert werden, wären doch am Ende die wenigsten heute doch auch wirklich einsetzbar. Vermitteln wir ein falsches Bild und vergessen die Dinge, auf die es wirklich ankommt? Ranting-Runde, Teil 2.</dd>
</dl>
<h3>[01:02:58] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.zehe-edv.de/2014/03/28/was-ist-wai-aria-was-tut-es-und-was-tut-es-nicht/">Was ist WAI-ARIA?</a></dt>
<dd>WAI-ARIA ist eine W3C Recommendation, und Marco Zehe erklärt, was es damit auf sich hat.</dd>
<dt><a href="http://netzartist.de/blog/2014/03/smashingconf-2014/">SmashingConf 2014</a></dt>
<dd>Jan Deppisch erzählt uns seine Highlights der letzen SmashingConf.</dd>
<dt><a href=" http://events.jquery.org/2014/san-diego/">jQuery San Diego</a></dt>
<dd>Videos und Material zur letzten jQuery Konferenz.</dd>
<dt><a href="http://tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/#input_range">Formular Elemente gestalten</a></dt>
<dd>Ein Artikel, wie man Formular Elemente gestalten kann, und ein begleitender Artikel von <a href="http://samples.msdn.microsoft.com/iedevcenter/FormControls/default.html">Microsoft</a> zum gleichen Thema.</dd>
<dt><a href="http://html5-master-class.de/">HTML5 Master Class</a></dt>
<dd>Der CSS Buddha und der HTML5 Erklärbär für drei ganze Tage in Düsseldorf!</dd>
<dt><a href="http://codefront.io/">CodeFront</a></dt>
<dd>Linz bekommt die Front-End Konferenz mit dem schönsten Logo.</dd>
</dl>


Stefan und Peter haben sich Matthias Mees und Jens Grochtdreis ins virtuelle
Studio geholt um den kürzlich stattgefundenen Webkongress in Erlangen Revue
passieren zu lassen, sowie über den Zustand div…

Stefan und Peter haben sich Matthias Mees und Jens Grochtdreis ins virtuelle
Studio geholt um den kürzlich stattgefundenen Webkongress in Erlangen Revue
passieren zu lassen, sowie über den Zustand diverser Websites zu philosophieren.


SCHAUNOTIZEN

[00:00:15] RÜCKBLICK WEBKONGRESS ERLANGEN

Im März fand der dritte Webkongress der Uni Erlangen statt, der sich auch um die
Themen kümmert, die nicht so viel Beachtung auf den großen Konferenzen der
Branche finden: Barrierefreiheit und Content Management System, zum Beispiel.
Jens und Matthias erzählen von ihren Erlebnissen in der Universitätststadt und
geben folgende Anschautipps: Marc Hinse – Die Gefahren von Webdesign Trends,
Wolfgang Wiese – The Beauty and the Beast, Patrick Lobacher – Typo 3 Neos, Nils
Pooker – Alles so schön responsive hier?, sowie alle Barrierefreiheits-Talks

[00:13:17] DIE BESCHISSENHEIT MANCHER WEBSITES, UND IHRE GRÜNDE

Warum gibt es immer noch Restaurants, die ihre Menükarten als PDF verlinken und
nicht einfach den Text auf der Website zugänglich machen? Wenn es schon so viele
Profis gibt, die gute Websites erzeugen, warum findet man immer noch soviel Mist
im Web? Und wie geht man als Entwickler/Designer mit der Beratungsresistenz
mancher Kunden um? In einer groß angelegten Raunz-Runde versuchen wir die Gründe
zu erörtern und lassen sich über einige Misstände der Branche aus.

[00:47:04] OUR ENCLOSED SPACE

Rachel Andrew schreibt, dass wir uns in einer elitären und sehr kleinen
Referenzgruppe bewegen und viel vom echten Leben „da draussen“ gerne mal
vergessen. Oder vergessen würden. Bei all den schönen, tollen, neuen
Technologien die auf den Konferenzen propagiert werden, wären doch am Ende die
wenigsten heute doch auch wirklich einsetzbar. Vermitteln wir ein falsches Bild
und vergessen die Dinge, auf die es wirklich ankommt? Ranting-Runde, Teil 2.


[01:02:58] KEINE SCHAUNOTIZEN

WAS IST WAI-ARIA?

WAI-ARIA ist eine W3C Recommendation, und Marco Zehe erklärt, was es damit auf
sich hat.

SMASHINGCONF 2014

Jan Deppisch erzählt uns seine Highlights der letzen SmashingConf.

JQUERY SAN DIEGO

Videos und Material zur letzten jQuery Konferenz.

FORMULAR ELEMENTE GESTALTEN

Ein Artikel, wie man Formular Elemente gestalten kann, und ein begleitender
Artikel von Microsoft zum gleichen Thema.

HTML5 MASTER CLASS

Der CSS Buddha und der HTML5 Erklärbär für drei ganze Tage in Düsseldorf!

CODEFRONT

Linz bekommt die Front-End Konferenz mit dem schönsten Logo.

Revision 165: Über den Webkongress Erlangen und den Zustand mancher Website

<p>Die Revision 164 ist mit einigen Gästen gespickt: <a href="http://fabian-beiner.de/de/artikel/">Fabian Beiner</a>, <a href="http://marius-eisenbraun.de/">Marius Eisenbraun</a> und <a href="http://www.marcelkoch.net/">Marcel Koch</a>. Drei unterschiedliche Gäste, mit denen wir über ein Thema sprechen, das uns alle zusammenführt: Wie funktioniert unsere Branche?</p>
<h3>[00:02:30] News</h3>
<dl>
<dt><a href="http://hacklang.org/">Hack</a></dt>
<dd>Hack ist eine Erweiterung von PHP, auf der Virtuellen Maschine HVVM läuft und die Sprache um Typensicherheit ergänzt.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:03:22] Einstieg in die Berufswelt des Web</dt>
<dd>Marius ist daran interessiert, wie der Einstieg in die Berufswelt eines Web-Entwicklers einfach ist. Wir sprechen über Sprungbretter, wie Agenturen und Open Source Projekte.</dd>
<dt>[00:22:42] Wie funktioniert eine Webagentur?</dt>
<dd>Im Allgemeinen sind Agenturen oft etwas anders organisiert, als Teams, die an einem Produkt arbeiten. Die Vor- und Nachteile für uns Web-Entwickler sind ein Diskussionspunkt. Mit Marcel haben wir einen Agentur-Arbeiter dabei, Hans, der Schepp und Fabian haben durch ihrer freiberufliche Tätigkeit immer wieder Berührungspunkte mit Agenturen. Jeder berichtet ein bisschen über seine Erfahrungen.</dd>
<dt>[00:35:20] <a href="http://www.nerd-zone.com/devcamp/">DevCamp Karlsruhe</a></dt>
<dd>Das Developer-Camp in Karlsruhe richtete sich an Developer aus alle Bereichen &#8211; nicht nur Web. Fabian spricht über seine Erfahrungen mit diesem und auch anderen BarCamps. Wir diskutieren über deren Bedeutung für unsere Szene und deren Besucher.</dd>
<dt>[00:43:06] <a href="https://twitter.com/bitbonk/status/448134492356882432">JavaScript Minifier-Tools</a></dt>
<dd><a href="https://twitter.com/bitbonk">@bitbonk</a> fragt:</p>
<blockquote class="twitter-tweet" lang="en">
<p><a href="https://twitter.com/workingdraft">@workingdraft</a> Welchem JavaScript minifier gebt ihr den Vorzug? <a href="https://twitter.com/search?q=%23noobquestion&amp;src=hash">#noobquestion</a></p>
<p>&mdash; bit bonk (@bitbonk) <a href="https://twitter.com/bitbonk/statuses/448134492356882432">March 24, 2014</a></p></blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script><br />
Wir sind der Meinung, dass es nicht unbedingt drauf ankommt, dass man ein bestimmtest Tool, wie Uglify oder Closure Compiler verwendet, sondern dass überhaupt einen zur Anwendung bringt.
</dd>
<dt>[00:52:34] Unobtrusive Javascript vs. Angular, Backbone and Co.</dt>
<dd>Heut zu Tage gibt es sehr viele Single Page Applications und Webpages, die ohne JavaScript keinerlei Funktion mehr bieten. Ein Diskussionspunkt über den wir schon öfter sprachen. Doch diesmal führt uns die Diskussion zum Thema, was eigentlich eine App und was eine Website ist.</dd>
</dl>
<h3>[01:08:38] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/">Introducing the Canvas Debugger in Firefox Developer Tools</a></dt>
<dd>Mozilla implementiert (neben einem <a href="https://brendaneich.com/2014/03/mozilla-news/">neuen CEO</a>) einen Debugger für das Canvas-Element, mit dessen Hilfe es leichter wird, mit <code>&lt;canvas&gt;</code> zu arbeiten.</dd>
<dt><a href="http://www.indiegogo.com/projects/picture-element-implementation-in-blink">Picture element implementation in Blink</a></dt>
<dd>Eine IndieGoGo Kampagne zur Implementierung des Picture elements in Blink von <a href="http://blog.yoav.ws/">Yoav Weiss</a>. Unserer Meinung nach unterstützenswert.</dd>
<dt><a href="http://harpjs.com/">HarpJS</a></dt>
<dd>Ein weiterer Statischer Webseiten Generator.</dd>
<dt><a href="http://bootstrappingdesign.com/">Bootstrapping Design eBook: Become the Designer your Startup needs.</a></dt>
<dd>Dieses design-lastige Buch ist &#8211; laut Marcels Empfehlung &#8211; auch sehr für Programmierer geeignet.</dd>
<dt><a href="http://www.webdesignrepo.com/">Web-Design Repo</a></dt>
<dd>Eine riesige Anzahl an Web-Development und -Design Links.</dd>
<dt><a href="http://tedgoas.github.io/Cerberus/">Cerberus &#8211; Responsive Email Patterns</a></dt>
<dd>HTML-E-Mail-Templates sind immer noch ein schwieriges Thema. Cerberus versucht den Schmerz bei der Erstellung solcher Templates zu mindern.</dd>
<dt><a href="http://internations.github.io/antwort/guide.html">Antwort</a></dt>
<dd>Ähnlich wie Cerberus, ist Antwort ein Responsive HTML-E-Mail-Template.</dd>
<dt><a href="http://easings.net/de">Easings Cheat Sheet</a></dt>
<dd>Wenn man gerade mal nicht weiß, wie Easings (Transitions-Verläufe) in CSS oder JavaScript funktionieren, kann man hier nachsehen.</dd>
</dl>
<h2>Gewinnspiel</h2>
<p>Fabian verlost dankenswerterweise ein Exemplar von Peter Gasstons Buch <a href="https://www.dpunkt.de/buecher/4527/moderne-webentwicklung.html">Moderne Webentwicklung</a>. Alles was ihr tun müsst: Sagt uns in den Kommentaren, warum genau ihr dieses Buch braucht!</p>


Die Revision 164 ist mit einigen Gästen gespickt: Fabian Beiner, Marius
Eisenbraun und Marcel Koch. Drei unterschiedliche Gäste, mit denen wir über ein
Thema sprechen, das uns alle zusammenführt: Wie …

Die Revision 164 ist mit einigen Gästen gespickt: Fabian Beiner, Marius
Eisenbraun und Marcel Koch. Drei unterschiedliche Gäste, mit denen wir über ein
Thema sprechen, das uns alle zusammenführt: Wie funktioniert unsere Branche?


[00:02:30] NEWS

HACK

Hack ist eine Erweiterung von PHP, auf der Virtuellen Maschine HVVM läuft und
die Sprache um Typensicherheit ergänzt.


SCHAUNOTIZEN

[00:03:22] EINSTIEG IN DIE BERUFSWELT DES WEB

Marius ist daran interessiert, wie der Einstieg in die Berufswelt eines
Web-Entwicklers einfach ist. Wir sprechen über Sprungbretter, wie Agenturen und
Open Source Projekte.

[00:22:42] WIE FUNKTIONIERT EINE WEBAGENTUR?

Im Allgemeinen sind Agenturen oft etwas anders organisiert, als Teams, die an
einem Produkt arbeiten. Die Vor- und Nachteile für uns Web-Entwickler sind ein
Diskussionspunkt. Mit Marcel haben wir einen Agentur-Arbeiter dabei, Hans, der
Schepp und Fabian haben durch ihrer freiberufliche Tätigkeit immer wieder
Berührungspunkte mit Agenturen. Jeder berichtet ein bisschen über seine
Erfahrungen.

[00:35:20] DEVCAMP KARLSRUHE

Das Developer-Camp in Karlsruhe richtete sich an Developer aus alle Bereichen –
nicht nur Web. Fabian spricht über seine Erfahrungen mit diesem und auch anderen
BarCamps. Wir diskutieren über deren Bedeutung für unsere Szene und deren
Besucher.

[00:43:06] JAVASCRIPT MINIFIER-TOOLS

@bitbonk fragt:



> @workingdraft Welchem JavaScript minifier gebt ihr den Vorzug? #noobquestion
> 
> — bit bonk (@bitbonk) March 24, 2014


Wir sind der Meinung, dass es nicht unbedingt drauf ankommt, dass man ein
bestimmtest Tool, wie Uglify oder Closure Compiler verwendet, sondern dass
überhaupt einen zur Anwendung bringt.

[00:52:34] UNOBTRUSIVE JAVASCRIPT VS. ANGULAR, BACKBONE AND CO.

Heut zu Tage gibt es sehr viele Single Page Applications und Webpages, die ohne
JavaScript keinerlei Funktion mehr bieten. Ein Diskussionspunkt über den wir
schon öfter sprachen. Doch diesmal führt uns die Diskussion zum Thema, was
eigentlich eine App und was eine Website ist.


[01:08:38] KEINE SCHAUNOTIZEN

INTRODUCING THE CANVAS DEBUGGER IN FIREFOX DEVELOPER TOOLS

Mozilla implementiert (neben einem neuen CEO) einen Debugger für das
Canvas-Element, mit dessen Hilfe es leichter wird, mit <canvas> zu arbeiten.

PICTURE ELEMENT IMPLEMENTATION IN BLINK

Eine IndieGoGo Kampagne zur Implementierung des Picture elements in Blink von
Yoav Weiss. Unserer Meinung nach unterstützenswert.

HARPJS

Ein weiterer Statischer Webseiten Generator.

BOOTSTRAPPING DESIGN EBOOK: BECOME THE DESIGNER YOUR STARTUP NEEDS.

Dieses design-lastige Buch ist – laut Marcels Empfehlung – auch sehr für
Programmierer geeignet.

WEB-DESIGN REPO

Eine riesige Anzahl an Web-Development und -Design Links.

CERBERUS – RESPONSIVE EMAIL PATTERNS

HTML-E-Mail-Templates sind immer noch ein schwieriges Thema. Cerberus versucht
den Schmerz bei der Erstellung solcher Templates zu mindern.

ANTWORT

Ähnlich wie Cerberus, ist Antwort ein Responsive HTML-E-Mail-Template.

EASINGS CHEAT SHEET

Wenn man gerade mal nicht weiß, wie Easings (Transitions-Verläufe) in CSS oder
JavaScript funktionieren, kann man hier nachsehen.


GEWINNSPIEL

Fabian verlost dankenswerterweise ein Exemplar von Peter Gasstons Buch Moderne
Webentwicklung. Alles was ihr tun müsst: Sagt uns in den Kommentaren, warum
genau ihr dieses Buch braucht!

Revision 164: Die Welt der Webagenturen

<p>Mangels Themen zockten sich Hans, Schepp und Peter durch vier Runden CSS-Glücksrad. Nachdem sie dort keine großen Erfolge feiern konnten, verlasen sie die Links und ließen es gut sein.</p>
<h3>HTML5-Glücksrad</h3>
<dl>
<dt>[00:00:50] <a href="http://www.w3.org/TR/css3-conditional/">CSS Conditionals</a></dt>
<dd>Eine Spezifikation aus der Abteilung CSS-Fundament, zu deren Unterpunkt <a href="http://www.w3.org/TR/css3-conditional/#at-media">@media-Syntax</a> uns nicht viel einfiel. Schepp erklärte das only-Keyword in Media Queries und am Ende schweiften wir in Richtung Cargo-Cult-Techniken in CSS und JS ab.</dd>
<dt>[00:07:27] <a href="http://www.w3.org/TR/css3-marquee/">CSS Marquee</a></dt>
<dd>Marquee in CSS? Gibt es weder auf Caniuse noch in MDN noch, wie wir feststellen mussten, in irgendeinem Browser. Über mögliche Use Cases dachten wir trotzdem ein wenig nach.</dd>
<dt>[00:13:59] <a href="http://www.w3.org/TR/css3-transforms/">CSS Transforms</a></dt>
<dd>CSS-Transforms kann man über bequeme Funktionen, aber auch über <a href="http://www.w3.org/TR/css3-transforms/#matrix-interpolation">Transformationsmatrizen</a> festlegen. Wir stellten fest, dass wir diese Möglichkeit bisher eher selten nutzen, was daran liegt, dass wir eher selten CSS-Transformationen durch Code errechnen lassen (dann dafür wären sie gut geeignet). Ein weiteres interessantes Detail ist, dass das <a href="http://dev.w3.org/csswg/cssom/">CSS OM</a> beim Abfragen von Transformationen immer mit Matrizen antwortet. Schließlich schweifen wir in Richtung <a href="http://www.w3.org/TR/css3-transforms/#funcdef-skew">skew-Transforms</a> ab (die Schepp mal für Schatteneffekte brauchte) und reden über die Auswirkungen von <a href="http://www.peterkroener.de/fragen-zu-html5-und-co-beantwortet-7-doctypes-css-transformationen-codecs-semantik/">Transforms auf den Stacking Context</a> (die es <a href="http://www.w3.org/TR/css3-color/#transparency">auch bei opacity</a> geben soll).</dd>
<dt>[00:27:00] <a href="http://www.w3.org/TR/selectors4/">CSS Selectors Level 4</a></dt>
<dd>Nachdem Peter ein wenig über <a href="http://www.w3.org/TR/selectors/#empty-pseudo">:empty in Selectors Level 3</a> (kaputt) und <a href="http://www.w3.org/TR/selectors4/#the-blank-pseudo">:blank in Selectors Level 4</a> (nicht kaputt) gerantet hatte, versuchten wir ohne großen Erfolg das Wesen der <a href="http://www.w3.org/TR/selectors4/#table-pseudos">Grid-Structural Selectors</a> zu erraten. Mehr Erfolg haben wir bei den Themen Parent Selector, <a href="http://www.w3.org/TR/selectors/#last-child-pseudo">:last-child</a> und den technischen (Performance-)Probleme dahinter. Zum Schluss erklärte Peter nochmal kurz, warum es kein CSS4 gibt und wir stellten erfreut fest, dass die Kombinatoren <code>+</code> und <code>~</code> selbst im IE7 funktionieren.</dd>
</dl>
<h3>[00:41:40] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://css-tricks.com/popping-hidden-overflow/">Popping Out of Hidden Overflow</a></dt>
<dd>Beschreibt einen interessanten Edge Case bei der Arbeit mit Overflows in CSS.</dd>
<dt><a href="http://nicolasgallagher.com/custom-css-preprocessing/">Custom CSS preprocessing</a></dt>
<dd>Wie man sein eigenes kleines CSS-Tool baut.</dd>
<dt><a href="http://codefest.herzogtumcleve.de/">codefest.herzogtumcleve.de</a></dt>
<dd>Ein aus rheinischer Solidarität gespeister Tipp von Schepp.</dd>
<dt><a href="http://amasad.me/2014/03/09/lesser-known-javascript-debugging-techniques/">Lesser-Known JavaScript Debugging Techniques</a></dt>
<dd>Besonders interessant: die DebugUtils.</dd>
<dt><a href="https://github.com/t32k/stylestats">Stylestats</a></dt>
<dd>Produziert interessante Statistiken zu Stylesheets.</dd>
</dl>


Mangels Themen zockten sich Hans, Schepp und Peter durch vier Runden
CSS-Glücksrad. Nachdem sie dort keine großen Erfolge feiern konnten, verlasen
sie die Links und ließen es gut sein.


HTML5-GLÜCKSR…

Mangels Themen zockten sich Hans, Schepp und Peter durch vier Runden
CSS-Glücksrad. Nachdem sie dort keine großen Erfolge feiern konnten, verlasen
sie die Links und ließen es gut sein.


HTML5-GLÜCKSRAD

[00:00:50] CSS CONDITIONALS

Eine Spezifikation aus der Abteilung CSS-Fundament, zu deren Unterpunkt
@media-Syntax uns nicht viel einfiel. Schepp erklärte das only-Keyword in Media
Queries und am Ende schweiften wir in Richtung Cargo-Cult-Techniken in CSS und
JS ab.

[00:07:27] CSS MARQUEE

Marquee in CSS? Gibt es weder auf Caniuse noch in MDN noch, wie wir feststellen
mussten, in irgendeinem Browser. Über mögliche Use Cases dachten wir trotzdem
ein wenig nach.

[00:13:59] CSS TRANSFORMS

CSS-Transforms kann man über bequeme Funktionen, aber auch über
Transformationsmatrizen festlegen. Wir stellten fest, dass wir diese Möglichkeit
bisher eher selten nutzen, was daran liegt, dass wir eher selten
CSS-Transformationen durch Code errechnen lassen (dann dafür wären sie gut
geeignet). Ein weiteres interessantes Detail ist, dass das CSS OM beim Abfragen
von Transformationen immer mit Matrizen antwortet. Schließlich schweifen wir in
Richtung skew-Transforms ab (die Schepp mal für Schatteneffekte brauchte) und
reden über die Auswirkungen von Transforms auf den Stacking Context (die es auch
bei opacity geben soll).

[00:27:00] CSS SELECTORS LEVEL 4

Nachdem Peter ein wenig über :empty in Selectors Level 3 (kaputt) und :blank in
Selectors Level 4 (nicht kaputt) gerantet hatte, versuchten wir ohne großen
Erfolg das Wesen der Grid-Structural Selectors zu erraten. Mehr Erfolg haben wir
bei den Themen Parent Selector, :last-child und den technischen
(Performance-)Probleme dahinter. Zum Schluss erklärte Peter nochmal kurz, warum
es kein CSS4 gibt und wir stellten erfreut fest, dass die Kombinatoren + und ~
selbst im IE7 funktionieren.


[00:41:40] KEINE SCHAUNOTIZEN

POPPING OUT OF HIDDEN OVERFLOW

Beschreibt einen interessanten Edge Case bei der Arbeit mit Overflows in CSS.

CUSTOM CSS PREPROCESSING

Wie man sein eigenes kleines CSS-Tool baut.

CODEFEST.HERZOGTUMCLEVE.DE

Ein aus rheinischer Solidarität gespeister Tipp von Schepp.

LESSER-KNOWN JAVASCRIPT DEBUGGING TECHNIQUES

Besonders interessant: die DebugUtils.

STYLESTATS

Produziert interessante Statistiken zu Stylesheets.

Revision 163: CSS-Glücksrad und Links

<p>In Revision 162 sind zwei Gäste mit von der Partie. Zum einen Mozillas Accessibility Experte <a href="http://www.zehe-edv.de/">Marco Zehe</a>, der bereits zu Gast war, sowie <a href="http://tomascaspers.de/">Tomas Caspers</a>, der sich seit vielen Jahren mit dem Thema Accessibility beschäftigt und bei uns zum ersten Mal dabei ist.</p>
<h3>[00:01:43] News</h3>
<dl>
<dt><a href="http://blog.sass-lang.com/posts/184094-sass-33-is-released">Sass 3.3.0</a></dt>
<dd>Sass ist in der Version 3.3.0 veröffentlicht worden und bringt einige Neuerungen mit sich.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:28] <a href="http://www.w3.org/WAI/IndieUI/">Indie UI und Accessibility</a></dt>
<dd>Mit unseren beiden Themen-Gästen sprechen wir über das Thema Accessibility. Aufhänger dafür ist der Editors-Draft zu Indie UI, der sich mit der Verallgemeinerung von <a href="https://dvcs.w3.org/hg/IndieUI/raw-file/default/src/indie-ui-events.html">Benutzer-Input Events</a> und <a href="https://dvcs.w3.org/hg/IndieUI/raw-file/default/src/indie-ui-context.html">sichtbaren Einstellungen</a> beschäftigt.<br />
Marco ist, wie auch <a href="http://tink.co.uk/2014/02/thoughts-on-screen-reader-detection/">manch anderer</a>, mit dem Konzept von Indie UI <a href="http://www.marcozehe.de/2014/02/27/why-screen-reader-detection-on-the-web-is-a-bad-thing/">nicht so ganz einverstanden</a> und diskutiert seine Position mit Tomas, der den Ansatz der Spezifikation schon mal <a href="http://www.karlgroves.com/2014/02/28/should-we-detect-screen-readers-is-the-wrong-question/">richtig findet</a>.<br />
Im Laufe der Diskussion driften wir auf die Erfahrungen der beiden mit dem allgemeinen Thema Accessibility ab.
</dd>
</dl>
<h3>[01:03:25] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://andyshora.com/grunt-yslow.html">Grunt YSlow</a></dt>
<dd>Grunt YSlow ist eine Grunt Task, die die Performance einer Website anhand der Metriken von Yahoo!s YSlow analysiert.</dd>
<dt><a href="https://www.npmjs.org/package/grunt-pagespeed">Grunt PageSpeed</a></dt>
<dd>Grunt PageSpeed ist das Pendant zur YSlow Implementierung als Grunt Task, basierend auf Google PageSpeed.</dd>
<dt><a href="https://github.com/katiefenn/parker">Parker</a></dt>
<dd>Das CSS Analyse-Tool Parker ermittelt Metriken eines Stylesheets und ist als CLI verfügbar.</dd>
<dt><a href="https://github.com/paypal/bootstrap-accessibility-plugin">Bootstrap Accessibility Plugin</a></dt>
<dd>Die Entwickler bei Paypal haben die Grundfunktionalität von Bootstrap so erweitert, dass die einzelnen Module zugänglicher sind und dies in ein Plugin verpackt.</dd>
<dt><a href="http://www.zehe-edv.de/2014/02/07/ich-kehre-zu-windows-zurueck/">Umstieg von Mac auf Windows</a></dt>
<dd>Marco hat sich für die Rückkehr zu Windows entschieden und beschreibt warum er diesen Schritt geht.</dd>
<dt><a href="http://csforum2014.com/">Content Strategy Forum</a></dt>
<dd>Vom 1. bis 3. Juli findet in Frankfurt das Content Strategy Forum. Im Call For Papers sind die Organisatoren auch an Front-End Entwicklung und die Schnittmengen mit der Content-Erstellung interessiert.</dd>
</dl>


In Revision 162 sind zwei Gäste mit von der Partie. Zum einen Mozillas
Accessibility Experte Marco Zehe, der bereits zu Gast war, sowie Tomas Caspers,
der sich seit vielen Jahren mit dem Thema Accessi…

In Revision 162 sind zwei Gäste mit von der Partie. Zum einen Mozillas
Accessibility Experte Marco Zehe, der bereits zu Gast war, sowie Tomas Caspers,
der sich seit vielen Jahren mit dem Thema Accessibility beschäftigt und bei uns
zum ersten Mal dabei ist.


[00:01:43] NEWS

SASS 3.3.0

Sass ist in der Version 3.3.0 veröffentlicht worden und bringt einige Neuerungen
mit sich.


SCHAUNOTIZEN

[00:02:28] INDIE UI UND ACCESSIBILITY

Mit unseren beiden Themen-Gästen sprechen wir über das Thema Accessibility.
Aufhänger dafür ist der Editors-Draft zu Indie UI, der sich mit der
Verallgemeinerung von Benutzer-Input Events und sichtbaren Einstellungen
beschäftigt.
Marco ist, wie auch manch anderer, mit dem Konzept von Indie UI nicht so ganz
einverstanden und diskutiert seine Position mit Tomas, der den Ansatz der
Spezifikation schon mal richtig findet.
Im Laufe der Diskussion driften wir auf die Erfahrungen der beiden mit dem
allgemeinen Thema Accessibility ab.


[01:03:25] KEINE SCHAUNOTIZEN

GRUNT YSLOW

Grunt YSlow ist eine Grunt Task, die die Performance einer Website anhand der
Metriken von Yahoo!s YSlow analysiert.

GRUNT PAGESPEED

Grunt PageSpeed ist das Pendant zur YSlow Implementierung als Grunt Task,
basierend auf Google PageSpeed.

PARKER

Das CSS Analyse-Tool Parker ermittelt Metriken eines Stylesheets und ist als CLI
verfügbar.

BOOTSTRAP ACCESSIBILITY PLUGIN

Die Entwickler bei Paypal haben die Grundfunktionalität von Bootstrap so
erweitert, dass die einzelnen Module zugänglicher sind und dies in ein Plugin
verpackt.

UMSTIEG VON MAC AUF WINDOWS

Marco hat sich für die Rückkehr zu Windows entschieden und beschreibt warum er
diesen Schritt geht.

CONTENT STRATEGY FORUM

Vom 1. bis 3. Juli findet in Frankfurt das Content Strategy Forum. Im Call For
Papers sind die Organisatoren auch an Front-End Entwicklung und die
Schnittmengen mit der Content-Erstellung interessiert.

Revision 162: Indie UI

<p>Es war Rosenmontag und der großteil des Workingdraft-Teams bereitete sich auf das halten diverser Workshops vor. Um einem Monolog zu entkommen lud sich Rodney die Herren <a href="http://christianheilmann.com/">Christian Heilmann</a> und <a href="http://asciidisco.com/">Sebastian Golasch</a> ein, um ein wenig über Christians Vortrag an der <a href="http://www.gentics.com/jquery-eu-2014/page/2014/eu.html">jQuery Europe</a> zu schnacken.</p>
<h3>Schaunotizen</h3>
<dl>
<dt><a href="http://videoservice.apa.at/Player/UniversalPlayer.aspx?guid=5abd4cdf-1b84-4837-aa4d-0e75732fa8c2">[00:01:04] TE;DL &#8211; Too Easy, Didn&#8217;t Learn (video)</a></dt>
<dd>Mit jedem Tool und mit jeder Abstraktion vereinfachen wir uns die Arbeit. Was wir jedoch nicht vereinfachen ist das Lernen und Verstehen der Dinge, die wir in eine Abstraktion oder Tool gepresst haben. Wir beleuchten den »Just build a tool for that«-Hype einmal von der anderen Seite.</dd>
<dt><a href="http://darobin.github.io/formic/specs/json/">[00:46:04] W3C HTML JSON form submission (Unofficial Draft)</a></dt>
<dd>Ein Vorschlag <code>&lt;form&gt;</code> Elemente neben <code>application/x-www-form-urlencoded</code> auch als <code>application/json</code> absenden zu lassen. Wir diskutieren die Vorzüge und Probleme des Vorschlags. Wir kommen auch kurz auf das recht unbekannte Objekt <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects"><code>FormData</code></a> zu sprechen, von dem wir dachten, dass es den Umgang mit Formularen bereits vereinfachen würde &#8211; was sich dann leider doch nicht als der heilige Gral der Formulardatenverarbeitung herausstellt.</dd>
</dl>
<h3>[01:06:53] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/">CSS performance revisited: selectors, bloat and expensive styles</a></dt>
<dd>Komplexe CSS Selektoren sind wohl eine kleinere Bremse als überschüssiges, ungenützes CSS.</dd>
<dt><a href="http://www.sitepoint.com/cross-browser-web-fonts-part-3/">Cross-browser Web Fonts part 3: Hyphens, Text Rendering, and Font Feature Settings</a></dt>
<dd>Der Artikel erklärt wie das Beeinflussen von Ligaturen, Kerning, Fractionals, Ordinals, etc. funktioniert.</dd>
<dt><a href="http://blog.teamtreehouse.com/use-html5-sectioning-elements#tw.2242014">How to Use The HTML5 Sectioning Elements</a></dt>
<dd>Wann nutze ich <code>&lt;section&gt;</code>, wann <code>&lt;article&gt;</code> und wann doch lieber nur ein <code>&lt;div&gt;</code>?</dd>
<dt><a href="https://gist.github.com/desandro/4657744">layout thrashing in jQuery</a></dt>
<dd>Welche jQuery-Funktionen können sich negativ auf die Rendering-Performance auswirken?</dd>
<dt><a href="http://blog.tastejs.com/rewriting-a-webapp-with-ecmascript-6/">Rewriting A WebApp in ES6</a></dt>
<dd>Man nehme eine Backbone Applikation und schreibe große Teile davon mit EcmaScript6 neu. Weil man kann.</dd>
</dl>


Es war Rosenmontag und der großteil des Workingdraft-Teams bereitete sich auf
das halten diverser Workshops vor. Um einem Monolog zu entkommen lud sich Rodney
die Herren Christian Heilmann und Sebasti…

Es war Rosenmontag und der großteil des Workingdraft-Teams bereitete sich auf
das halten diverser Workshops vor. Um einem Monolog zu entkommen lud sich Rodney
die Herren Christian Heilmann und Sebastian Golasch ein, um ein wenig über
Christians Vortrag an der jQuery Europe zu schnacken.


SCHAUNOTIZEN

[00:01:04] TE;DL – TOO EASY, DIDN’T LEARN (VIDEO)

Mit jedem Tool und mit jeder Abstraktion vereinfachen wir uns die Arbeit. Was
wir jedoch nicht vereinfachen ist das Lernen und Verstehen der Dinge, die wir in
eine Abstraktion oder Tool gepresst haben. Wir beleuchten den »Just build a tool
for that«-Hype einmal von der anderen Seite.

[00:46:04] W3C HTML JSON FORM SUBMISSION (UNOFFICIAL DRAFT)

Ein Vorschlag <form> Elemente neben application/x-www-form-urlencoded auch als
application/json absenden zu lassen. Wir diskutieren die Vorzüge und Probleme
des Vorschlags. Wir kommen auch kurz auf das recht unbekannte Objekt FormData zu
sprechen, von dem wir dachten, dass es den Umgang mit Formularen bereits
vereinfachen würde – was sich dann leider doch nicht als der heilige Gral der
Formulardatenverarbeitung herausstellt.


[01:06:53] KEINE SCHAUNOTIZEN

CSS PERFORMANCE REVISITED: SELECTORS, BLOAT AND EXPENSIVE STYLES

Komplexe CSS Selektoren sind wohl eine kleinere Bremse als überschüssiges,
ungenützes CSS.

CROSS-BROWSER WEB FONTS PART 3: HYPHENS, TEXT RENDERING, AND FONT FEATURE
SETTINGS

Der Artikel erklärt wie das Beeinflussen von Ligaturen, Kerning, Fractionals,
Ordinals, etc. funktioniert.

HOW TO USE THE HTML5 SECTIONING ELEMENTS

Wann nutze ich <section>, wann <article> und wann doch lieber nur ein <div>?

LAYOUT THRASHING IN JQUERY

Welche jQuery-Funktionen können sich negativ auf die Rendering-Performance
auswirken?

REWRITING A WEBAPP IN ES6

Man nehme eine Backbone Applikation und schreibe große Teile davon mit
EcmaScript6 neu. Weil man kann.

Revision 161: Too Easy, Didn’t Learn

<p>Für diese Revision luden sich Schepp und Peter den Node-Nerd Golo Roden (<a href="https://twitter.com/goloroden">Twitter</a>, <a href="http://www.goloroden.de/">Webseite</a>) ein und plauderten über Node.JS und ganz allgemein den Zustand von JavaScript in Gegenwart und Zukunft.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:50] JavaScript aus der Perspektive eines Backend-Entwicklers</dt>
<dd>Golo erzählt, wie man aus der C#-Welt an JavaScript gerät und das ganze dann auch vernünftig lernt. Gemeinsam sind wir der Auffassung, dass nach den ersten Copy-Paste-Basteleien die Lektüre von <a href="http://www.oreilly.de/catalog/9780596517748/">The Good Parts</a> und <a href="http://shop.oreilly.com/product/9780596805531.do">The Definitive Guide</a> angebracht sind.</dd>
<dt>[00:15:50] ES6 und Async</dt>
<dd>Golo und Peter debattieren die Vor- und Nachteile von ES6-Features wie <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions">Arrow Functions</a>, <a href="http://tc39wiki.calculist.org/es6/classes/">Klassen</a> und <a href="http://www.peterkroener.de/ecmascript-6-generators/">Generator Functions</a> (nebst <a href="https://github.com/visionmedia/co">Libraries</a>), wobei neben <a href="https://github.com/caolan/async">Async.js</a> auch die Artikel <a href="http://steve-yegge.blogspot.de/2006/03/execution-in-kingdom-of-nouns.html">Execution in the Kingdom of Nouns</a> und <a href="http://www.paulgraham.com/diff.html">What Made Lisp different</a> zur Sprache kommen.</dd>
<dt>[00:43:22] Node 0.12</dt>
<dd>Nachdem wir festgestellt haben, dass wir alle schon Node benutzt haben bevor es cool war (Version 0.4) erzählt Golo ein wenig über das kommende Node-Release 0.12. Wir sprechen über instabile APIs und Module, <a href="https://github.com/visionmedia">TJ Holowaychuk</a>, <a href="https://github.com/zpao/spidernode">SpiderNode</a> (mittlerweile eingestellt) und die Causa Joyent versus Strongloop.</dd>
<dt>[00:57:50] <a href="https://twitter.com/mkuehnel/status/437690535047069696">Hörer-Frage: Koa vs Express</a></dt>
<dd>Bei der Frage <a href="http://expressjs.com/">Express</a> versus <a href="http://koajs.com/">Koa</a> (beides Webframeworks) sind wir uns einig: Koa taugt erstmal nur als Spielzeug. Golo weist darauf hin, dass ES6 noch nicht in Node Standardmäßig aktiviert ist und Peter hat obendrein noch kein Vertrauen in die Stabilität von Koa selbst. Der aktuelle Hype erinnert uns ein wenig an die leicht überhypte Frage <a href="http://gruntjs.com/">Grunt</a> versus <a href="http://gulpjs.com/">Gulp</a>.</dd>
<dt>[01:03:44] Wie lernt man am besten Node?</dt>
<dd>Peter behauptet, Node wäre ganz einfach, sofern man JavaScript schon kann; die APIs lernt man besten, indem man wie in jeder anderen Programmiersprache einfache Programme schreibt. Golo geht im Prinzip d‘accord, sieht die größte Hürde im etwas unübersichtlichen Ökosystem von Node. Hilfe findet man natürlich am besten in Golos Buch <a href="http://www.amazon.de/Node-js-hochperformante-echtzeitf%C3%A4hige-Webanwendungen-professionell/dp/389864829X">Node.js &amp; Co: Skalierbare, hochperformante und echtzeitfähige Webanwendungen professionell in JavaScript entwickeln</a>.</dd>
<dt>[01:09:27] <a href="http://www.enterjs.de/">EnterJS</a></dt>
<dd>Golo erzählt von seiner Konferenz EnterJS, die vom 30. Juni bis 2. Juli in Köln stattfindet. Thema ist JavaScript im Unternehmenskontext.</dd>
</dl>
<h3>[01:13:19] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://randomuser.me/">Random User Generator</a></dt>
<dd>Placekitten für User-Daten.</dd>
<dt><a href="http://fettblog.eu/blog/2014/02/20/no-prefixes/">noPrefixes flag in Modernizr</a></dt>
<dd>Stefan bloggt über Fortschritte im Kampf gegen Vendor-Prefixes an der Modernizr-Front</dd>
<dt><a href="https://github.com/w3c-webmob/installable-webapps/blob/gh-pages/ios_standalone/README.md">Installable Standalone WebApps</a></dt>
<dd>Ein Überblick über den Status Quo.</dd>
<dt><a href="http://wurfljs.com/">WURFL.js &#8211; Client Side, meet Server Side</a></dt>
<dd>Die bekannte Device Detection Library jetzt auch clientseitig.</dd>
<dt><a href="http://w3.eleqtriq.com/2014/02/the-4-slice-scaling-technique-for-svg/">The 4 Slice Scaling Technique for SVG</a></dt>
<dd>SVG-Nerd Dirk Weber SVG-Slicing für Fortgeschrittene.</dd>
<dt><a href="http://blogs.adobe.com/webplatform/2014/02/24/using-blend-modes-in-html-canvas/">Using blend modes in HTML Canvas</a></dt>
<dd>Ein weniger bekanntes HTML5-Feature wird vom Adobe-Team beleuchtet.</dd>
</dl>


Für diese Revision luden sich Schepp und Peter den Node-Nerd Golo Roden
(Twitter, Webseite) ein und plauderten über Node.JS und ganz allgemein den
Zustand von JavaScript in Gegenwart und Zukunft.


SC…

Für diese Revision luden sich Schepp und Peter den Node-Nerd Golo Roden
(Twitter, Webseite) ein und plauderten über Node.JS und ganz allgemein den
Zustand von JavaScript in Gegenwart und Zukunft.


SCHAUNOTIZEN

[00:01:50] JAVASCRIPT AUS DER PERSPEKTIVE EINES BACKEND-ENTWICKLERS

Golo erzählt, wie man aus der C#-Welt an JavaScript gerät und das ganze dann
auch vernünftig lernt. Gemeinsam sind wir der Auffassung, dass nach den ersten
Copy-Paste-Basteleien die Lektüre von The Good Parts und The Definitive Guide
angebracht sind.

[00:15:50] ES6 UND ASYNC

Golo und Peter debattieren die Vor- und Nachteile von ES6-Features wie Arrow
Functions, Klassen und Generator Functions (nebst Libraries), wobei neben
Async.js auch die Artikel Execution in the Kingdom of Nouns und What Made Lisp
different zur Sprache kommen.

[00:43:22] NODE 0.12

Nachdem wir festgestellt haben, dass wir alle schon Node benutzt haben bevor es
cool war (Version 0.4) erzählt Golo ein wenig über das kommende Node-Release
0.12. Wir sprechen über instabile APIs und Module, TJ Holowaychuk, SpiderNode
(mittlerweile eingestellt) und die Causa Joyent versus Strongloop.

[00:57:50] HÖRER-FRAGE: KOA VS EXPRESS

Bei der Frage Express versus Koa (beides Webframeworks) sind wir uns einig: Koa
taugt erstmal nur als Spielzeug. Golo weist darauf hin, dass ES6 noch nicht in
Node Standardmäßig aktiviert ist und Peter hat obendrein noch kein Vertrauen in
die Stabilität von Koa selbst. Der aktuelle Hype erinnert uns ein wenig an die
leicht überhypte Frage Grunt versus Gulp.

[01:03:44] WIE LERNT MAN AM BESTEN NODE?

Peter behauptet, Node wäre ganz einfach, sofern man JavaScript schon kann; die
APIs lernt man besten, indem man wie in jeder anderen Programmiersprache
einfache Programme schreibt. Golo geht im Prinzip d‘accord, sieht die größte
Hürde im etwas unübersichtlichen Ökosystem von Node. Hilfe findet man natürlich
am besten in Golos Buch Node.js & Co: Skalierbare, hochperformante und
echtzeitfähige Webanwendungen professionell in JavaScript entwickeln.

[01:09:27] ENTERJS

Golo erzählt von seiner Konferenz EnterJS, die vom 30. Juni bis 2. Juli in Köln
stattfindet. Thema ist JavaScript im Unternehmenskontext.


[01:13:19] KEINE SCHAUNOTIZEN

RANDOM USER GENERATOR

Placekitten für User-Daten.

NOPREFIXES FLAG IN MODERNIZR

Stefan bloggt über Fortschritte im Kampf gegen Vendor-Prefixes an der
Modernizr-Front

INSTALLABLE STANDALONE WEBAPPS

Ein Überblick über den Status Quo.

WURFL.JS – CLIENT SIDE, MEET SERVER SIDE

Die bekannte Device Detection Library jetzt auch clientseitig.

THE 4 SLICE SCALING TECHNIQUE FOR SVG

SVG-Nerd Dirk Weber SVG-Slicing für Fortgeschrittene.

USING BLEND MODES IN HTML CANVAS

Ein weniger bekanntes HTML5-Feature wird vom Adobe-Team beleuchtet.

Revision 160: Node, JavaScript, Links

<p>Gästefrei sind diesmal Schepp, Rodney und Stefan mit am Start, um mit Grunt nach dem Hype in Klausur zu gehen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:29] Grunt</dt>
<dd>Grunt ist ja nun schon eine Weile bekannt und im Einsatz, und erfreut sich immer größerer Beliebtheit bei den Entwicklern. Sogar Schepp hat seine selbstgebastelten Buildscripts für diverse Projekte verlassen und ist in die Grunt-Welt eingetaucht. Wird reden über den Einsatz des Buildtools in großen und kleinen Projekten, und wie man sich das effiziente Entwickeln, vor allem in Hinblick auf CI und CD ohne Grunt eigentlich nicht mehr vorstellen kann. Plugins die erwähnt werden sind unter anderem <a href="https://www.npmjs.org/package/grunt-spritesmith">spritesmith</a>, <a href="https://www.npmjs.org/package/grunt-autoprefixer">autoprefixer</a>, <a href="https://www.npmjs.org/package/grunt-svgmin">svgmin</a>, <a href="https://www.npmjs.org/package/grunt-contrib-cssmin">cssmin</a> und <a href="https://www.npmjs.org/package/grunt-connect">connect</a>. Außerdem empfiehlt Rodney, statt <a href="https://www.npmjs.org/package/load-grunt-tasks">load-grunt-tasks</a> besser <a href="https://www.npmjs.org/package/matchdep">matchdep</a> zu verwenden. Wer übrigens das letzte aus Grunt herauskitzeln will, dem empfehlen wir <a href="http://www.html5rocks.com/en/tutorials/tooling/supercharging-your-gruntfile/">Paul Bakaus Artikel auf HTML5 Rocks</a></dd>
</dl>
<h3>[00:47:27] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/prasmussen/chrome-cli">Chrome CLI</a></dt>
<dd>Viel im Terminal? Mit der Chrome CLI kann man seinen Entwicklungsbrowser nun auch bequem von der Kommandozeile aus steuern.</dd>
<dt><a href="http://www.sitepoint.com/sass-extend-nobody-told-you/">What nobody told you about Sass @extend</a></dt>
<dd>Hugo Giraudel schreibt über die Funktionsweise und Gefahren der Sass <code>@extend</code> Methode.</dd>
<dt><a href="http://tryhandlebarsjs.com/">Try Handlebars</a></dt>
<dd>Handlebars templates direkt im Browser ausprobieren und sehen, ob selbstgeschriebene Helper funktionieren. Geht hier.</dd>
<dt><a href="https://github.com/sindresorhus/pageres">Pageres</a></dt>
<dd>Mit Sindre Sorhus neuem Tool kann man Screenshots von der Kommandozeile aus machen.</dd>
<dt><a href="http://www.integralist.co.uk/posts/refactoring-techniques/">Refactoring Techniques</a></dt>
<dd>Wie man richtig Refactoring betreibt wird in diesem Artikel erklärt.</dd>
<dt><a href="https://github.com/mdevils/node-jscs">JavaScript Code Style Checker</a></dt>
<dd>Ein weiterer Code Style Checker, aber höchst konfigurierbar und bis aufs kleinste anzupassen</dd>
<dt><a href="http://alistapart.com/article/web-animation-at-work">Web Animation at Work</a></dt>
<dd>Rachel Nabors beschreibt ihr Steckenpferd in diesem List Apart Artikel.</dd>
<dt><a href="http://css-tricks.com/draggable-elements-push-others-way/">Draggable elements that push others out of way</a></dt>
<dd>Chris Coyier schreibt über ein Design Pattern, und die unterschiedlichen Wege und Bibliotheken, es zufriedenstellend umzusetzen.</dd>
</dl>
<h3>[00:53:25] Tipp der Woche</h3>
<dl>
<dt><a href="http://blog.rodneyrehm.de/archives/35-Including-Data-From-Github.html">Including data from Github</a></dt>
<dd>Tipp von Rodney: Wenn man mal Github files im Rohformat braucht, hat man mit diesen Services viel Freude.</dd>
</dl>


Gästefrei sind diesmal Schepp, Rodney und Stefan mit am Start, um mit Grunt nach
dem Hype in Klausur zu gehen.


SCHAUNOTIZEN

[00:00:29] GRUNT

Grunt ist ja nun schon eine Weile bekannt und im Einsat…

Gästefrei sind diesmal Schepp, Rodney und Stefan mit am Start, um mit Grunt nach
dem Hype in Klausur zu gehen.


SCHAUNOTIZEN

[00:00:29] GRUNT

Grunt ist ja nun schon eine Weile bekannt und im Einsatz, und erfreut sich immer
größerer Beliebtheit bei den Entwicklern. Sogar Schepp hat seine
selbstgebastelten Buildscripts für diverse Projekte verlassen und ist in die
Grunt-Welt eingetaucht. Wird reden über den Einsatz des Buildtools in großen und
kleinen Projekten, und wie man sich das effiziente Entwickeln, vor allem in
Hinblick auf CI und CD ohne Grunt eigentlich nicht mehr vorstellen kann. Plugins
die erwähnt werden sind unter anderem spritesmith, autoprefixer, svgmin, cssmin
und connect. Außerdem empfiehlt Rodney, statt load-grunt-tasks besser matchdep
zu verwenden. Wer übrigens das letzte aus Grunt herauskitzeln will, dem
empfehlen wir Paul Bakaus Artikel auf HTML5 Rocks


[00:47:27] KEINE SCHAUNOTIZEN

CHROME CLI

Viel im Terminal? Mit der Chrome CLI kann man seinen Entwicklungsbrowser nun
auch bequem von der Kommandozeile aus steuern.

WHAT NOBODY TOLD YOU ABOUT SASS @EXTEND

Hugo Giraudel schreibt über die Funktionsweise und Gefahren der Sass @extend
Methode.

TRY HANDLEBARS

Handlebars templates direkt im Browser ausprobieren und sehen, ob
selbstgeschriebene Helper funktionieren. Geht hier.

PAGERES

Mit Sindre Sorhus neuem Tool kann man Screenshots von der Kommandozeile aus
machen.

REFACTORING TECHNIQUES

Wie man richtig Refactoring betreibt wird in diesem Artikel erklärt.

JAVASCRIPT CODE STYLE CHECKER

Ein weiterer Code Style Checker, aber höchst konfigurierbar und bis aufs
kleinste anzupassen

WEB ANIMATION AT WORK

Rachel Nabors beschreibt ihr Steckenpferd in diesem List Apart Artikel.

DRAGGABLE ELEMENTS THAT PUSH OTHERS OUT OF WAY

Chris Coyier schreibt über ein Design Pattern, und die unterschiedlichen Wege
und Bibliotheken, es zufriedenstellend umzusetzen.


[00:53:25] TIPP DER WOCHE

INCLUDING DATA FROM GITHUB

Tipp von Rodney: Wenn man mal Github files im Rohformat braucht, hat man mit
diesen Services viel Freude.

Revision 159: Grunt im Einsatz

<p>In der heutigen Revision haben Hans, Peter und Stefan den Performance-König <a href="http://tobias.is/who/">Tobias Baldauf</a> eingeladen, um über aktuelle Trends und gute Ratschläge in Sachen Webperformance zu plaudern.</p>
<h3>[00:01:08] News</h3>
<dl>
<dt><a href="http://www.mozilla.org/en-US/firefox/27.0/releasenotes/">Firefox 27</a></dt>
<dd>Neuer Release des Independent Browser, mit der neuen CSS Eigenschaft <code>all:unset</code> und einigen anderen Änderungen.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:56] Bleeding Edge Bildoptimierung</dt>
<dd>Tobias erzählt über aktuelle Trends in der Bildoptimierung, und wie man aus langgedienten Grafikformaten wie JPEG dank Machine Learning noch weitere 10% rausholen möchte.</dd>
<dt>[00:07:56] <a href="http://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/">Renderingoptimierungsmöglichkeiten bei Webfonts</a></dt>
<dd>Chrome hat seinen Webfont Renderingprozess neu gelöst, und zeigt nach 30 Sekunden ohne geladener Font eine Fallbackschrift an. Außerdem erzählen wir welche weiteren Steuerungsmöglichkeiten es gibt, ob <code><a href="https://developer.mozilla.org/de/docs/Web/CSS/text-rendering">text-rendering</a></code> Unterschiede macht und wie man <a href="http://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/">Subsetting</a> richtig einsetzen kann!</dd>
<dt>[00:13:15] Automatisiert Performance Metriken generieren</dt>
<dd>Performance kann und soll man klarerweise messen. Tobias gibt Tipps und verweist auf Tools wie <a href="https://github.com/macbre/phantomas">Phantomas</a> (samt <a href="https://github.com/stefanjudis/grunt-phantomas">Grunt-Plugin</a>) und das <a href="http://httparchive.org/">HTTP Archive</a>.</dd>
<dt>[00:17:41] <a href="http://praegnanz.de/weblog/webfonts-fette-fehlerquelle">Viele Schriftschnitte vs. Performance</a></dt>
<dd>Der Schriftenkaiser Gerrit van Aaken ruft zu Recht auf, verschiedene Fettschnitte in Webfonts zu beachten. Doch was des Designers Freud&#8216; ist des Performanceoptimierers Leid. Wo liegt die optimale Grenze, und welche Möglichkeiten würden wir uns wünschen um beide Welten zufrieden zu stellen. Wir philosophieren.</dd>
<dt>[00:22:06] Performance-Guidelines und -Budgets</dt>
<dd>Performance ist wichtig und kann auch gut argumentiert bzw. verkauft werden! Stefan erzählt von Kompromissen aus dem täglichen Agenturleben und welche Probleme man sich fernhält, wenn man das Performance-Augenmerk von Anfang an in Betracht zieht. Der Rest stimmt in der Reflexion mit ein und gibt Ratschläge.</dd>
<dt>[00:27:58] <a href="https://twitter.com/christophrumpel/status/430731865205374976">Leserfrage: Unsere Erfahrungen zu custom styled Inputs</a></dt>
<dd>Stammhörer Christoph Rumpel fragt, wie man Formularelemente am besten stylen kann, und welche Bibliotheken bzw. Tools wir dafür nehmen. Eine Antwort mit einem Plottwist. Erwähnt werden: Ryan Seddons <a href="http://www.thecssninja.com/css/custom-inputs-using-css">Technik über :checked Attribut</a> und das ähnlich funktionierende <a href="https://github.com/micjamking/Navigataur">Navigataur</a>. Außerdem wird es Zeit <code>alert</code> und <code>confirm</code> wieder aus ihrer Versenkung zu bringen!</dd>
<dt>[00:35:37] <a href="http://jakearchibald.com/2014/dont-use-flexbox-for-page-layout/">Layoutgeschwindigkeit von CSS Flexbox</a></dt>
<dd>CSS Flexbox rendert langsam und hat nicht unbedenkliche Aufbaustrukturen. Doch lieber CSS3 Grid-Layouts verwenden! Doch was, wenn manches davon noch gar nicht in den aktuellen Browsern implementiert wurde? Wir ranten über Angebot und Nachfrage, den IE9 und die Zukunft des Internet Explorers, und geben Peter in einer spontanen Selbsthilfegruppensitzung Platz.</dd>
<dt>[00:46:47] <a href="https://twitter.com/owzim/status/431829497353342976">Leserfrage: Gute Onlinecommunities für Webentwicklung?</a></dt>
<dd>Christian fragt: Welche guten Onlinecommunities gibt es? Die Leute kurz vor oder jenseits der 30 erzählen mit weißen Rauschebärten über die gute, alte Forenzeit, dass deren Abgesang eigentlich eh nicht so schlecht ist, und warum Twitter und Co. sich in den letzten Jahren behauptet haben.</dd>
</dl>
<h3>[00:58:52] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/drdk/dr-css-inliner">CSS Above the fold Inliner</a></dt>
<dd>Dinge, die über der Fenstergrenze passieren sollten auch besonders schnell sichtbar sein. Dieses PhantomJS basierte Tool hilft!</dd>
<dt><a href="http://maddesigns.de/responsive-images-lazy-loading-2151.html">Responsive Images &#038; Lazy Loading</a></dt>
<dd>Der sehr aktive Sven Wolfermann über Responsive Images und Lazy Loading. Pflichtartikel</dd>
</dl>
<h3>Tipp der Woche</h3>
<dt><a href="http://topcoat.io/">Topcoat.io</a></dt>
<dd>Man braucht fesches UI, ohne sich dabei gleich Boliden wie Bootstrap oder Foundation zu installieren, hat Ansprüche auf Performance und Anpassung? Dann sollte man auf Adobes Topcoat einen genaueren Blick werfen.</dd>


In der heutigen Revision haben Hans, Peter und Stefan den Performance-König
Tobias Baldauf eingeladen, um über aktuelle Trends und gute Ratschläge in Sachen
Webperformance zu plaudern.


[00:01:08] NE…

In der heutigen Revision haben Hans, Peter und Stefan den Performance-König
Tobias Baldauf eingeladen, um über aktuelle Trends und gute Ratschläge in Sachen
Webperformance zu plaudern.


[00:01:08] NEWS

FIREFOX 27

Neuer Release des Independent Browser, mit der neuen CSS Eigenschaft all:unset
und einigen anderen Änderungen.


SCHAUNOTIZEN

[00:01:56] BLEEDING EDGE BILDOPTIMIERUNG

Tobias erzählt über aktuelle Trends in der Bildoptimierung, und wie man aus
langgedienten Grafikformaten wie JPEG dank Machine Learning noch weitere 10%
rausholen möchte.

[00:07:56] RENDERINGOPTIMIERUNGSMÖGLICHKEITEN BEI WEBFONTS

Chrome hat seinen Webfont Renderingprozess neu gelöst, und zeigt nach 30
Sekunden ohne geladener Font eine Fallbackschrift an. Außerdem erzählen wir
welche weiteren Steuerungsmöglichkeiten es gibt, ob text-rendering Unterschiede
macht und wie man Subsetting richtig einsetzen kann!

[00:13:15] AUTOMATISIERT PERFORMANCE METRIKEN GENERIEREN

Performance kann und soll man klarerweise messen. Tobias gibt Tipps und verweist
auf Tools wie Phantomas (samt Grunt-Plugin) und das HTTP Archive.

[00:17:41] VIELE SCHRIFTSCHNITTE VS. PERFORMANCE

Der Schriftenkaiser Gerrit van Aaken ruft zu Recht auf, verschiedene
Fettschnitte in Webfonts zu beachten. Doch was des Designers Freud‘ ist des
Performanceoptimierers Leid. Wo liegt die optimale Grenze, und welche
Möglichkeiten würden wir uns wünschen um beide Welten zufrieden zu stellen. Wir
philosophieren.

[00:22:06] PERFORMANCE-GUIDELINES UND -BUDGETS

Performance ist wichtig und kann auch gut argumentiert bzw. verkauft werden!
Stefan erzählt von Kompromissen aus dem täglichen Agenturleben und welche
Probleme man sich fernhält, wenn man das Performance-Augenmerk von Anfang an in
Betracht zieht. Der Rest stimmt in der Reflexion mit ein und gibt Ratschläge.

[00:27:58] LESERFRAGE: UNSERE ERFAHRUNGEN ZU CUSTOM STYLED INPUTS

Stammhörer Christoph Rumpel fragt, wie man Formularelemente am besten stylen
kann, und welche Bibliotheken bzw. Tools wir dafür nehmen. Eine Antwort mit
einem Plottwist. Erwähnt werden: Ryan Seddons Technik über :checked Attribut und
das ähnlich funktionierende Navigataur. Außerdem wird es Zeit alert und confirm
wieder aus ihrer Versenkung zu bringen!

[00:35:37] LAYOUTGESCHWINDIGKEIT VON CSS FLEXBOX

CSS Flexbox rendert langsam und hat nicht unbedenkliche Aufbaustrukturen. Doch
lieber CSS3 Grid-Layouts verwenden! Doch was, wenn manches davon noch gar nicht
in den aktuellen Browsern implementiert wurde? Wir ranten über Angebot und
Nachfrage, den IE9 und die Zukunft des Internet Explorers, und geben Peter in
einer spontanen Selbsthilfegruppensitzung Platz.

[00:46:47] LESERFRAGE: GUTE ONLINECOMMUNITIES FÜR WEBENTWICKLUNG?

Christian fragt: Welche guten Onlinecommunities gibt es? Die Leute kurz vor oder
jenseits der 30 erzählen mit weißen Rauschebärten über die gute, alte Forenzeit,
dass deren Abgesang eigentlich eh nicht so schlecht ist, und warum Twitter und
Co. sich in den letzten Jahren behauptet haben.


[00:58:52] KEINE SCHAUNOTIZEN

CSS ABOVE THE FOLD INLINER

Dinge, die über der Fenstergrenze passieren sollten auch besonders schnell
sichtbar sein. Dieses PhantomJS basierte Tool hilft!

RESPONSIVE IMAGES & LAZY LOADING

Der sehr aktive Sven Wolfermann über Responsive Images und Lazy Loading.
Pflichtartikel


TIPP DER WOCHE

TOPCOAT.IO

Man braucht fesches UI, ohne sich dabei gleich Boliden wie Bootstrap oder
Foundation zu installieren, hat Ansprüche auf Performance und Anpassung? Dann
sollte man auf Adobes Topcoat einen genaueren Blick werfen.

Revision 158: Performance, Performance, Performance; sowie Leserfragen

<p>Keine Gäste, trotzdem Themen in einer – mal wieder – etwas längeren Sendung.</p>
<h3>Keine News</h3>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:20] <a href="http://studiotendra.com/2014/01/29/html-is-too-complex/">HTML is too complex</a></dt>
<dd>Wir stellen uns die Frage, ob HTML mit den Additionen in HTML5 zu komplex für uns Developer geworden ist. Hans vertritt die Meinung, dass mehr Möglichkeiten auch verbesserte Semantik mit sich bringt. Rodney ist da eher skeptisch, in wie fern dies dem durchschnittlichen Web Entwickler tatsächlich hilft.</dd>
<dt>[00:12:00] <a href="https://medium.com/p/f98103d09ce1">Putting CSS in the head</a></dt>
<dd>Basierend auf Hans&#8216; Artikel und dessen Vorläufer &#8222;<a href="https://medium.com/coding-design/24888fbbd2e2">What’s with putting the CSS in the head?</a>&#8220; diskutieren wir die Vor– und Nachteile von der Platzierung des CSS inline im Head-Element einer Website. Wir sprechen über allgemeine Performance, CDNs und die Use Cases dieser Technik.</dd>
<dt>[00:29:19] <a href="http://www.mnot.net/blog/2014/01/30/http2_expectations">Nine Things to Expect from HTTP/2</a></dt>
<dd>Wir erklären HTTP/2 und SPDY etwas genauer. Die beiden neuen Netzwerk-Technologien sind gerade auf dem aufsteigenden Ast und werden uns Web-Entwicklern die Arbeit, gerade im Bezug auf Netzwerk-Performance erleichtern, sobald sie dann bei der breiten Masse angekommen sind. Testen, ob eine Website SPDY einsetzt, kann man mit <a href="http://spdycheck.org/">SPDY-Check</a> und eine gute Erklärung zum Thema SPDY Push <a href="http://www.youtube.com/watch?v=4Ai_rrhM8gA">gibt&#8217;s in diesem Video</a>.</dd>
<dt>[00:49:19] <a href="http://aerotwist.com/blog/bye-bye-layer-hacks/">CSS Will Change</a></dt>
<dd>Aktuell nutzen wir CSS 3D-Transforms um Grafik-Hardware-Beschleunigung für Elemente zu erreichen, damit diese flüssiger rendern. Mit der CSS-Eigenschaft <code>will-change</code> soll diesem Hack nun abgeholfen werden.</dd>
</dl>
<h3>[00:55:06] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html">HTML5 Media</a></dt>
<dd>Die Audio- und Video-API sind wichtige Bestandteile von HTML5. Leider sind diese allerdings für komplexere Anwendungen noch ziemlich inkonsistent in den verschiedenen Browsers implementiert. Schepp erzählt von seinen Erfahrungen.</dd>
</dl>
<h3>[01:04:06] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://maddesigns.de/static-site-generators-2138.html">Static Site Generators</a></dt>
<dd>Eine Sammlung von Static Site Generatoren gibt Sven Wolfermann inklusive Wertung. Hans möchte zusätzlich sein <a href="http://use-init.com/">INIT</a> Projekt anpreisen.</dd>
<dt><a href="http://www.youtube.com/user/takeoffconference">Take Off Conf Videos</a></dt>
<dd>Die Videos der Take Off Conference, die Ende Januar statt fand, sind bereits online.</dd>
<dt><a href="https://speakerdeck.com/phuu/frontendlondon-serviceworker-and-the-offline-web">Service Worker</a></dt>
<dd>Ein Slidedeck mit allen Infos zu Service Workern.</dd>
</dl>


Keine Gäste, trotzdem Themen in einer – mal wieder – etwas längeren Sendung.


KEINE NEWS


SCHAUNOTIZEN

[00:00:20] HTML IS TOO COMPLEX

Wir stellen uns die Frage, ob HTML mit den Additionen in HTML5…

Keine Gäste, trotzdem Themen in einer – mal wieder – etwas längeren Sendung.


KEINE NEWS


SCHAUNOTIZEN

[00:00:20] HTML IS TOO COMPLEX

Wir stellen uns die Frage, ob HTML mit den Additionen in HTML5 zu komplex für
uns Developer geworden ist. Hans vertritt die Meinung, dass mehr Möglichkeiten
auch verbesserte Semantik mit sich bringt. Rodney ist da eher skeptisch, in wie
fern dies dem durchschnittlichen Web Entwickler tatsächlich hilft.

[00:12:00] PUTTING CSS IN THE HEAD

Basierend auf Hans‘ Artikel und dessen Vorläufer „What’s with putting the CSS in
the head?“ diskutieren wir die Vor– und Nachteile von der Platzierung des CSS
inline im Head-Element einer Website. Wir sprechen über allgemeine Performance,
CDNs und die Use Cases dieser Technik.

[00:29:19] NINE THINGS TO EXPECT FROM HTTP/2

Wir erklären HTTP/2 und SPDY etwas genauer. Die beiden neuen
Netzwerk-Technologien sind gerade auf dem aufsteigenden Ast und werden uns
Web-Entwicklern die Arbeit, gerade im Bezug auf Netzwerk-Performance
erleichtern, sobald sie dann bei der breiten Masse angekommen sind. Testen, ob
eine Website SPDY einsetzt, kann man mit SPDY-Check und eine gute Erklärung zum
Thema SPDY Push gibt’s in diesem Video.

[00:49:19] CSS WILL CHANGE

Aktuell nutzen wir CSS 3D-Transforms um Grafik-Hardware-Beschleunigung für
Elemente zu erreichen, damit diese flüssiger rendern. Mit der CSS-Eigenschaft
will-change soll diesem Hack nun abgeholfen werden.


[00:55:06] GLÜCKSRAD

HTML5 MEDIA

Die Audio- und Video-API sind wichtige Bestandteile von HTML5. Leider sind diese
allerdings für komplexere Anwendungen noch ziemlich inkonsistent in den
verschiedenen Browsers implementiert. Schepp erzählt von seinen Erfahrungen.


[01:04:06] KEINE SCHAUNOTIZEN

STATIC SITE GENERATORS

Eine Sammlung von Static Site Generatoren gibt Sven Wolfermann inklusive
Wertung. Hans möchte zusätzlich sein INIT Projekt anpreisen.

TAKE OFF CONF VIDEOS

Die Videos der Take Off Conference, die Ende Januar statt fand, sind bereits
online.

SERVICE WORKER

Ein Slidedeck mit allen Infos zu Service Workern.

Revision 157: Komplexes Markup, Styles Inlinen und HTTP/2

<p>Wenig Themen, viel Diskussion! Peter, Rodney und Stefan besprechen Browserbugs, die keine sein sollten und sinnieren über einen jüngst veröffentlichten A List Apart Artikel, den man wohl ohne Weiteres in die Kategorie &#8222;Große Erschütterung der Macht&#8220; stecken darf.</p>
<h3>[00:00:15] News</h3>
<dl>
<dt><a href="http://dev.w3.org/csswg/css-transitions/">CSS Editor&#8217;s Draft contains links to Shepherd</a></dt>
<dd>Noch in Beta und in starker Bearbeitung, aber nach jahrelanger Wartezeit endlich Realität: Im CSS Editor&#8217;s Draft der W3C werden die Shepherd Tests verlinkt.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] <a href="http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html">Viewport Units in iOS</a></dt>
<dd>Trotz recht weitreichender <a href="http://caniuse.com/viewport-units">Kompatibilität</a> und echtem Bedarf sind Viewport Units <a href="https://code.google.com/p/chromium/issues/detail?id=137617">überaus</a> <a href="https://code.google.com/p/chromium/issues/detail?id=168840">buggy</a> und <a href="https://bugs.webkit.org/show_bug.cgi?id=94158">beinah unbrauchbar</a>, wie Rodney jüngst herausfinden musste. Wir sprechen über die <a href="https://developer.mozilla.org/de/docs/Web/CSS/length#Relativ_zum_Viewport">eigentliche Nutzung</a> und wie man Dank <a href="http://dev.w3.org/csswg/cssom/">CSSOM</a> zu einem netten <a href="https://github.com/rodneyrehm/viewport-units-buggyfill">Buggyfill</a> kommt (Term coined by <a href="http://twitter.com/asciidisco">Sebastian Golasch</a>.</dd>
<dt>[00:24:05] <a href="http://alistapart.com/blog/post/css-regions-considered-harmful">CSS Regions considered harmful</a></dt>
<dd>Wenn einer der <a href="https://de.wikipedia.org/wiki/H%C3%A5kon_Wium_Lie">CSS Erfinder</a> CSS Regions öffentlich für Scheiße erklärt, kann das Internet schonmal Kopf stehen. Browserhersteller treten den Rückzug an und nehmen <a href="http://news.cnet.com/8301-1023_3-57617840-93/reversing-course-google-rejects-adobe-web-publishing-tech/">experimentelle Implementierungen aus der Codebase</a>. Wir sprechen über Sinn und Unsinn, Web vs. Webtechnologie und  den Bedarf an &#8222;Generated Content&#8220;. Außerdem flattert pünktlich zur Sendung ein sehr interessanter <a href="http://flippinawesome.org/2014/01/27/css-regions-matter/">Pro-Artikel</a> von <a href="http://twitter.com/SaraSoueidan">Sara Soueidan</a> zum Thema herein.</dd>
</dl>
<h3>[00:44:31] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#table-sorting-model">Table Sorting Model</a></dt>
<dd>Tabellensortieren im Browser, wie einst beim guten, alten jQuery Tablesorter! Existiert momentan allerdings nur am Papier.</dd>
</dl>
<h3>[00:49:25] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.peterkroener.de/html5-drag-drop-fuer-dateien/">Drag &#038; Drop für Dateien</a></dt>
<dd>Peter beschreibt eine uralte API, mit der man sogar ganz brauchbare Dinge anstellen kann. Erster Teil einer Minireihe.</dd>
<dt><a href="http://toddmotto.com/avoiding-anonymous-javascript-functions/">Avoiding anonymous JavaScript funcitons</a></dt>
<dd>Todd Motto erklärt anonyme Funktionen, deren Nachteil und wie man sie vermeidet.</dd>
<dt><a href="https://github.com/evilstreak/markdown-js">Markdown.js</a></dt>
<dd>Markdown Parser in JavaScript. Mitsamt Abstract Syntax Tree.</dd>
</dl>


Wenig Themen, viel Diskussion! Peter, Rodney und Stefan besprechen Browserbugs,
die keine sein sollten und sinnieren über einen jüngst veröffentlichten A List
Apart Artikel, den man wohl ohne Weiteres…

Wenig Themen, viel Diskussion! Peter, Rodney und Stefan besprechen Browserbugs,
die keine sein sollten und sinnieren über einen jüngst veröffentlichten A List
Apart Artikel, den man wohl ohne Weiteres in die Kategorie „Große Erschütterung
der Macht“ stecken darf.


[00:00:15] NEWS

CSS EDITOR’S DRAFT CONTAINS LINKS TO SHEPHERD

Noch in Beta und in starker Bearbeitung, aber nach jahrelanger Wartezeit endlich
Realität: Im CSS Editor’s Draft der W3C werden die Shepherd Tests verlinkt.


SCHAUNOTIZEN

[00:01:00] VIEWPORT UNITS IN IOS

Trotz recht weitreichender Kompatibilität und echtem Bedarf sind Viewport Units
überaus buggy und beinah unbrauchbar, wie Rodney jüngst herausfinden musste. Wir
sprechen über die eigentliche Nutzung und wie man Dank CSSOM zu einem netten
Buggyfill kommt (Term coined by Sebastian Golasch.

[00:24:05] CSS REGIONS CONSIDERED HARMFUL

Wenn einer der CSS Erfinder CSS Regions öffentlich für Scheiße erklärt, kann das
Internet schonmal Kopf stehen. Browserhersteller treten den Rückzug an und
nehmen experimentelle Implementierungen aus der Codebase. Wir sprechen über Sinn
und Unsinn, Web vs. Webtechnologie und den Bedarf an „Generated Content“.
Außerdem flattert pünktlich zur Sendung ein sehr interessanter Pro-Artikel von
Sara Soueidan zum Thema herein.


[00:44:31] GLÜCKSRAD

TABLE SORTING MODEL

Tabellensortieren im Browser, wie einst beim guten, alten jQuery Tablesorter!
Existiert momentan allerdings nur am Papier.


[00:49:25] KEINE SCHAUNOTIZEN

DRAG & DROP FÜR DATEIEN

Peter beschreibt eine uralte API, mit der man sogar ganz brauchbare Dinge
anstellen kann. Erster Teil einer Minireihe.

AVOIDING ANONYMOUS JAVASCRIPT FUNCITONS

Todd Motto erklärt anonyme Funktionen, deren Nachteil und wie man sie vermeidet.

MARKDOWN.JS

Markdown Parser in JavaScript. Mitsamt Abstract Syntax Tree.

Revision 156: Viewport Units in iOS und Gegenwind für CSS Regions

<p>Revision 155 ging zwar ohne Gäste an den Start, dafür war Rodney aber top in Form und erzählt über sein letztes Projekt. Über Kommentare zu den Themen freuen wir uns und beantworten diese (manchmal zeitversetzt).</p>
<h3>Keine News</h3>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:18] <a href="http://blog.rodneyrehm.de/archives/33-libsass.js-An-Emscripten-Experiment.html">Sass.js</a></dt>
<dd>Rodney und <a href="https://github.com/asciidisco">Sebastian</a> arbeiteten vor kurzer Zeit an einem Port von <a href="https://github.com/hcatlin/libsass">libsass</a> nach JavaScript mit <a href="https://github.com/kripken/emscripten">Emscripten</a> um Sass im Browser kompilieren zu können (zum Beispiel für Services wie Dabblet). libsass ist eine C-Compiler für Sass, der unter anderem auch in <a href="https://github.com/andrew/node-sass">node-sass</a> Anwendung findet. Rod erzählt über seine Reise hinab ins C++-Kaninchenloch und weist auf eine <a href="http://shoptalkshow.com/episodes/070-with-hampton-catlin/">Shoptalk Folge</a> mit dem SASS-Erfinder und libsass-Autoren) hin.<br />
Fazit: solide C/C++-Kenntnisse sind empfohlen für Emscripten-Experimente</dd>
<dt>[00:29:51] <a href="https://twitter.com/malteriechmann/status/423400547425603584">Konferenzen 2014</a></dt>
<dd>Auf die Hörerfrage von Malte antworten wir mit einer Liste: Welche Konferenzen sollte man 2014 besuchen, wenn man die Working Draft Crew treffen will?</p>
<ul>
<li><a href="http://reasons.to/">Reasons</a>, London</li>
<li><a href="http://2013.dconstruct.org/">dConstruct</a>, Brighton</li>
<li><a href="http://2013.lxjs.org/">LXJS</a>, Lissabon</li>
<li><a href="http://javascript-days.de/2014/">JavaScript Days / HTML5 Days</a>, München</li>
<li><a href="http://www.gentics.com/jquery-eu-2014/page/2014/eu.html">jQuery Europe</a>, Wien</li>
<li><a href="http://smashingconf.com/">Smashing Conf</a>, Oxford</li>
<li><a href="http://edgeconf.com/2014-london/">Edge Conf</a>, London</li>
<li><a href="http://beyondtellerrand.com/">Beyond Tellerrand</a>, Düsseldorf</li>
<li><a href="http://fronteers.nl/congres/2014">Fronteers</a>, Amsterdam</li>
<li><a href="http://www.dotjs.eu/">dotJS</a>, Paris</li>
</ul>
</dl>
<h3>Diese Woche haben wir nicht am Glücksrad gedreht</h3>
<h3>[00:51:41] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://speaking.io/">Speaking.io</a></dt>
<dd>Eine Website, die sich ums Public Speaking dreht und wertvolle Tips für Speaker bereit hält.</dd>
<dt><a href="http://www.gistboxapp.com/">GistBoxApp</a></dt>
<dd>GistBoxApp ergänzt gist.github.com mit tagging, suche und weiterem. Also quasi alles Nützliche, was fehlt.</dd>
<dt><a href="https://github.com/btford/zone.js/">Zone.js</a></dt>
<dd>Execution Context für JavaScript Development.</dd>
<dt><a href="https://github.com/veltman/principles">Principles for making things for the web</a></dt>
<dd>Eine Zusammenstellung an Richtlinien, die man beachten sollte, wenn man fürs Web entwickelt.</dd>
</dl>


Revision 155 ging zwar ohne Gäste an den Start, dafür war Rodney aber top in
Form und erzählt über sein letztes Projekt. Über Kommentare zu den Themen freuen
wir uns und beantworten diese (manchmal ze…

Revision 155 ging zwar ohne Gäste an den Start, dafür war Rodney aber top in
Form und erzählt über sein letztes Projekt. Über Kommentare zu den Themen freuen
wir uns und beantworten diese (manchmal zeitversetzt).


KEINE NEWS


SCHAUNOTIZEN

[00:00:18] SASS.JS

Rodney und Sebastian arbeiteten vor kurzer Zeit an einem Port von libsass nach
JavaScript mit Emscripten um Sass im Browser kompilieren zu können (zum Beispiel
für Services wie Dabblet). libsass ist eine C-Compiler für Sass, der unter
anderem auch in node-sass Anwendung findet. Rod erzählt über seine Reise hinab
ins C++-Kaninchenloch und weist auf eine Shoptalk Folge mit dem SASS-Erfinder
und libsass-Autoren) hin.
Fazit: solide C/C++-Kenntnisse sind empfohlen für Emscripten-Experimente

[00:29:51] KONFERENZEN 2014

Auf die Hörerfrage von Malte antworten wir mit einer Liste: Welche Konferenzen
sollte man 2014 besuchen, wenn man die Working Draft Crew treffen will?



 * Reasons, London
 * dConstruct, Brighton
 * LXJS, Lissabon
 * JavaScript Days / HTML5 Days, München
 * jQuery Europe, Wien
 * Smashing Conf, Oxford
 * Edge Conf, London
 * Beyond Tellerrand, Düsseldorf
 * Fronteers, Amsterdam
 * dotJS, Paris


DIESE WOCHE HABEN WIR NICHT AM GLÜCKSRAD GEDREHT


[00:51:41] KEINE SCHAUNOTIZEN

SPEAKING.IO

Eine Website, die sich ums Public Speaking dreht und wertvolle Tips für Speaker
bereit hält.

GISTBOXAPP

GistBoxApp ergänzt gist.github.com mit tagging, suche und weiterem. Also quasi
alles Nützliche, was fehlt.

ZONE.JS

Execution Context für JavaScript Development.

PRINCIPLES FOR MAKING THINGS FOR THE WEB

Eine Zusammenstellung an Richtlinien, die man beachten sollte, wenn man fürs Web
entwickelt.

Revision 155: Sass.js und die Konferenzen 2014

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 166: Open Source, React und AssetGraph

Working Draft

Revision 165: Über den Webkongress Erlangen und den Zustand mancher Website

Working Draft

Revision 164: Die Welt der Webagenturen

Working Draft

Revision 163: CSS-Glücksrad und Links

Working Draft

Revision 162: Indie UI

Working Draft

Revision 161: Too Easy, Didn’t Learn

Working Draft

Revision 160: Node, JavaScript, Links

Working Draft

Revision 159: Grunt im Einsatz

Working Draft

Revision 158: Performance, Performance, Performance; sowie Leserfragen

Working Draft

Revision 157: Komplexes Markup, Styles Inlinen und HTTP/2

Working Draft

Revision 156: Viewport Units in iOS und Gegenwind für CSS Regions

Working Draft

Revision 155: Sass.js und die Konferenzen 2014

Working Draft