<p>Wie jedes Jahr waren wir auch diesmal zu mehreren auf der <a href="http://2014.beyondtellerrand.com/">beyond tellerrand</a> und haben einen Speaker in einen Hinterhalt gelockt, aus dem er erst nach einem Interview mit uns wieder freigelassen wurde. Unsere Beute diesmal: Niemand geringeres als Chris Coyier von <a href="http://css-tricks.com/">CSS Tricks</a>, <a href="http://codepen.io/">Codepen.io</a> und <a href="http://shoptalkshow.com/">Shoptalkshow</a>, auch bekannt als &#8222;Die Rampensau&#8220;! :) Wir stellten viele Fragen über seinen Werdegang, und sein täglich Brot und Butter. Viel Spaß!</p>


Wie jedes Jahr waren wir auch diesmal zu mehreren auf der beyond tellerrand und
haben einen Speaker in einen Hinterhalt gelockt, aus dem er erst nach einem
Interview mit uns wieder freigelassen wurde.…

Working Draft

Wie jedes Jahr waren wir auch diesmal zu mehreren auf der beyond tellerrand und
haben einen Speaker in einen Hinterhalt gelockt, aus dem er erst nach einem
Interview mit uns wieder freigelassen wurde. Unsere Beute diesmal: Niemand
geringeres als Chris Coyier von CSS Tricks, Codepen.io und Shoptalkshow, auch
bekannt als „Die Rampensau“! :) Wir stellten viele Fragen über seinen Werdegang,
und sein täglich Brot und Butter. Viel Spaß!

Revision 172: Interview mit Chris Coyier

<p>Wir freuen uns außerordentlich mit dem ehemaligen Dauergast <a href="http://twitter.com/helloanselm">Anselm Hannemann</a> einen neuen Moderator in unserer Runde begrüßen zu dürfen. Zur Feier des Tages legen wir auch gleich mit einer tiefgehenden Analyse der Drag &#038; Drop API los und spielen (mehr oder weniger) wieder HTML5 Glücksrad.</p>
<h3>[00:00:32] News</h3>
<dl>
<dt><a href="https://github.com/blog/1831-atom-free-and-open-source-for-everyone">Atom.io</a></dt>
<dd>GitHubs Webtechnologien Editor wird frei und Open Source. Finden wir gut!</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:56] Drag &#038; Drop erklärbärt</dt>
<dd>HTML5 Erklärbär Peter hat sich sehr eingehend mit einer seit Urzeiten vorhandenen API beschäftigt, und Drag &#038; Drop sowohl aus Entwickler-, Anwender- und Historikersicht eingehend aufgearbeitet. Wir erfahren, warum Drag &#038; Drop so eine unglaublich grausame API hat, man gefühlte 2 Millionen Events binden muss und warum Browserdefaults eigentlich mal gegen alles sind. Kleiner Spoiler: Der IE ist an allem Schuld. Außerdem gibt&#8217;s etymologische Aufklärung in Sachen Planeten mit dem Paradebeispiel Neptun. Und ja, das hat auch was mit dem eigentlichen Thema zu tun.</dd>
</dl>
<h3>[00:53:11] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-ruby-element">das ruby Element</a></dt>
<dd>Glücksfee Anselm landet beim Scrollen in einem uns sehr bekannten Thema. Um die unendliche Geschichte zu vermeiden scrollt der Wandernde vom Alten Berg noch einmal und landet bei den <code>ruby</code>-Elementen</dd>
</dl>
<h3>[00:59:40] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/marmelab/gremlins.js/">Gremlins.js</a></dt>
<dd>Mit dieser JS Bibliothek könnt ihr eine Gremlin Horde auf eure App loslassen und sie einem UI Stresstest unterziehen.</dd>
<dt><a href="https://try.github.io/levels/1/challenges/1">Git Code School</a></dt>
<dd>Vorausgesetzt die Server antworten, könnt ihr mit diesem interaktiven Tutorial Git von Grund auf erlernen.</dd>
<dt><a href="http://www.sitepoint.com/tips-accessible-svg/">Accessible SVG</a></dt>
<dd>SVG ist nicht nur Endprodukt einer Illustrator Speicheroption, sondern kann durchaus Semantik enthalten. Wie man auf ARIA-Ebene diese richtig einsetzen kann, zeigt dieser Sitepoint Artikel.</dd>
<dt><a href="http://www.sitepoint.com/using-device-orientation-html5/">HTML5 Device Orientation</a></dt>
<dd>Ebenfalls auf Sitepoint: Ein guter Artikel zur Device Orientation API. Sehr vollständig und gut illustriert.</dd>
</dl>
<h3>[00:00:00] Tipp der Woche</h3>
<dl>
<dt>Argumentationsfeuer für Designsünden</dt>
<dd>Wir alle wissen, dass Scrolling-Areas in Scrolling-Areas nicht funktionieren und kein Mensch Share Buttons klickt. Mit <a href="http://baymard.com/blog/inline-scroll-areas">diesem Artikel</a> beim Baymard Institute und den Datenerhebungen von <a href="http://www.lukew.com/ff/entry.asp?1852">Luke Wroblewski</a> habt ihr nun auch harte Fakten, die ihr im Notfall entgegenhalten könnt.</dd>
</dl>


Wir freuen uns außerordentlich mit dem ehemaligen Dauergast Anselm Hannemann
einen neuen Moderator in unserer Runde begrüßen zu dürfen. Zur Feier des Tages
legen wir auch gleich mit einer tiefgehenden…

Wir freuen uns außerordentlich mit dem ehemaligen Dauergast Anselm Hannemann
einen neuen Moderator in unserer Runde begrüßen zu dürfen. Zur Feier des Tages
legen wir auch gleich mit einer tiefgehenden Analyse der Drag & Drop API los und
spielen (mehr oder weniger) wieder HTML5 Glücksrad.


[00:00:32] NEWS

ATOM.IO

GitHubs Webtechnologien Editor wird frei und Open Source. Finden wir gut!


SCHAUNOTIZEN

[00:00:56] DRAG & DROP ERKLÄRBÄRT

HTML5 Erklärbär Peter hat sich sehr eingehend mit einer seit Urzeiten
vorhandenen API beschäftigt, und Drag & Drop sowohl aus Entwickler-, Anwender-
und Historikersicht eingehend aufgearbeitet. Wir erfahren, warum Drag & Drop so
eine unglaublich grausame API hat, man gefühlte 2 Millionen Events binden muss
und warum Browserdefaults eigentlich mal gegen alles sind. Kleiner Spoiler: Der
IE ist an allem Schuld. Außerdem gibt’s etymologische Aufklärung in Sachen
Planeten mit dem Paradebeispiel Neptun. Und ja, das hat auch was mit dem
eigentlichen Thema zu tun.


[00:53:11] GLÜCKSRAD

DAS RUBY ELEMENT

Glücksfee Anselm landet beim Scrollen in einem uns sehr bekannten Thema. Um die
unendliche Geschichte zu vermeiden scrollt der Wandernde vom Alten Berg noch
einmal und landet bei den ruby-Elementen


[00:59:40] KEINE SCHAUNOTIZEN

GREMLINS.JS

Mit dieser JS Bibliothek könnt ihr eine Gremlin Horde auf eure App loslassen und
sie einem UI Stresstest unterziehen.

GIT CODE SCHOOL

Vorausgesetzt die Server antworten, könnt ihr mit diesem interaktiven Tutorial
Git von Grund auf erlernen.

ACCESSIBLE SVG

SVG ist nicht nur Endprodukt einer Illustrator Speicheroption, sondern kann
durchaus Semantik enthalten. Wie man auf ARIA-Ebene diese richtig einsetzen
kann, zeigt dieser Sitepoint Artikel.

HTML5 DEVICE ORIENTATION

Ebenfalls auf Sitepoint: Ein guter Artikel zur Device Orientation API. Sehr
vollständig und gut illustriert.


[00:00:00] TIPP DER WOCHE

ARGUMENTATIONSFEUER FÜR DESIGNSÜNDEN

Wir alle wissen, dass Scrolling-Areas in Scrolling-Areas nicht funktionieren und
kein Mensch Share Buttons klickt. Mit diesem Artikel beim Baymard Institute und
den Datenerhebungen von Luke Wroblewski habt ihr nun auch harte Fakten, die ihr
im Notfall entgegenhalten könnt.

Revision 171: Drag & Drop erklärbärt

<p>Eine kurze und knackige Episode zu diversen Themen, inklusive den Gewinnern der Verlosung aus <a href="/167/">Revision 167</a></p>
<h3>[00:00:00] News</h3>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/Firefox/Releases/29">Firefox 29</a></dt>
<dd>Firefox 29 ist da, inklusive CSS Variablen und <code>will-change</code> Attribut hinter Flag, und einer nicht prefixten Implementierung von <code>box-sizing</code>.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:46] <a href="http://css-tricks.com/icon-fonts-vs-svg/">Icon Fonts vs SVG</a></dt>
<dd>Chris Coyier schreibt über die Vor- und Nachteile von Icon Fonts und (Inline) SVG, und schlägt sich mit nur wenigen Abstrichen ganz klar auf die Seite der skalierbaren Vektoren. Wir sinnieren über Seperation of concerns, fallbacks, mögliche Sicherheitslücken und resümieren mit unseren eigenen Erfahrungen.</dd>
<dt>[00:13:20] <a href="http://blog.circleci.com/adaptive-placeholders/">Adaptive Placeholders</a></dt>
<dd>Auch bekannt als das <a href="http://bradfrostweb.com/blog/post/float-label-pattern/">Float Label Pattern</a> sind &#8222;Adaptive Placeholders&#8220; der nächste Usability Schrei da draussen. Das jetzt viele Leute (u.a. auch <a href="http://snook.ca/archives/html_and_css/floated-label-pattern-css">Jonathan Snook</a>) mit diversen Implementierungen versuchen die Grundidee optimal zu implementieren, zeigt nur wie sympathisch diese Idee Designern wie Entwicklern ist. Dass man allerdings nicht allen JavaScript-freien Implementierungen trauen soll und manches Mal das Web ganz schön verbogen wird, zeigen wir.</dd>
<dt>[00:23:10] <a href="http://www.2ality.com/2014/05/current-script.html">Identifying the current &lt;script&gt; element</a></dt>
<dd>Unser JavaScript Guru Rodney hält eine Audienz der JavaScript Eminenz <a href="http://www.2ality.com">Axel Rauschmayer</a>, und zeigt uns was mit neuen JavaScript APIs wie <code>document.currentScript</code> und <code>document.scripts</code> getan werden kann, und wozu das eigentlich gut ist.</dd>
<dt>[00:33:25] <a href="http://workingdraft.de/167/">Gewinner Decentralize Camp</a></dt>
<dd>In Revision 167 wollten wir von euch wissen, wie man seine Daten &#8222;befreien&#8220; kann. Als Gewinn winken zwei Tickets zum <a href="http://decentralizecamp.com/">Decentralize Camp</a> am 21. Mai in Düsseldorf. Gewonnen haben Sebastian und Philip, wie Rodneys <a href="https://gist.github.com/ddprrt/370eb62c8257dcf8eff3">unparteiisch einwandfreies Auswahl-Skript</a> entschied.</dd>
</dl>
<h3>[00:37:30] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://mattgreer.org/articles/promises-in-wicked-detail/">JavaScript Promises in Wicked Detail</a></dt>
<dd>Noch Fragen zu JavaScript Promises? Hier wird alles äußerst ausführlich beantwortet.</dd>
<dt><a href="http://www.sitepoint.com/whats-difference-sass-scss/">The difference between Sass and SCSS</a></dt>
<dd>Den Unterschied zwischen den beiden Syntax-Varianten von Sass sollten mittlerweile alle Anwender kennen. Die geschichtlichen Hintergründe sind vielleicht noch unbekannt. Hugo Giraudel klärt auf.</dd>
<dt><a href="http://www.newrepublic.com/article/117608/chinese-number-websites-secret-meaning-urls">The Secret Messages Inside Chinese URLs</a></dt>
<dd>Etliche Aha-Effekte in diesem Artikel, der zeigt warum 888888888.com für China eine ganz tolle Domain ist.</dd>
<dt><a href="http://webcomponents.org/">webcomponents.org</a></dt>
<dd>Web Components sind das nächste große Ding, das Portal ist das dazu passende Wissensarchiv.</dd>
</dl>


Eine kurze und knackige Episode zu diversen Themen, inklusive den Gewinnern der
Verlosung aus Revision 167


[00:00:00] NEWS

FIREFOX 29

Firefox 29 ist da, inklusive CSS Variablen und will-change Att…

Eine kurze und knackige Episode zu diversen Themen, inklusive den Gewinnern der
Verlosung aus Revision 167


[00:00:00] NEWS

FIREFOX 29

Firefox 29 ist da, inklusive CSS Variablen und will-change Attribut hinter Flag,
und einer nicht prefixten Implementierung von box-sizing.


SCHAUNOTIZEN

[00:00:46] ICON FONTS VS SVG

Chris Coyier schreibt über die Vor- und Nachteile von Icon Fonts und (Inline)
SVG, und schlägt sich mit nur wenigen Abstrichen ganz klar auf die Seite der
skalierbaren Vektoren. Wir sinnieren über Seperation of concerns, fallbacks,
mögliche Sicherheitslücken und resümieren mit unseren eigenen Erfahrungen.

[00:13:20] ADAPTIVE PLACEHOLDERS

Auch bekannt als das Float Label Pattern sind „Adaptive Placeholders“ der
nächste Usability Schrei da draussen. Das jetzt viele Leute (u.a. auch Jonathan
Snook) mit diversen Implementierungen versuchen die Grundidee optimal zu
implementieren, zeigt nur wie sympathisch diese Idee Designern wie Entwicklern
ist. Dass man allerdings nicht allen JavaScript-freien Implementierungen trauen
soll und manches Mal das Web ganz schön verbogen wird, zeigen wir.

[00:23:10] IDENTIFYING THE CURRENT <SCRIPT> ELEMENT

Unser JavaScript Guru Rodney hält eine Audienz der JavaScript Eminenz Axel
Rauschmayer, und zeigt uns was mit neuen JavaScript APIs wie
document.currentScript und document.scripts getan werden kann, und wozu das
eigentlich gut ist.

[00:33:25] GEWINNER DECENTRALIZE CAMP

In Revision 167 wollten wir von euch wissen, wie man seine Daten „befreien“
kann. Als Gewinn winken zwei Tickets zum Decentralize Camp am 21. Mai in
Düsseldorf. Gewonnen haben Sebastian und Philip, wie Rodneys unparteiisch
einwandfreies Auswahl-Skript entschied.


[00:37:30] KEINE SCHAUNOTIZEN

JAVASCRIPT PROMISES IN WICKED DETAIL

Noch Fragen zu JavaScript Promises? Hier wird alles äußerst ausführlich
beantwortet.

THE DIFFERENCE BETWEEN SASS AND SCSS

Den Unterschied zwischen den beiden Syntax-Varianten von Sass sollten
mittlerweile alle Anwender kennen. Die geschichtlichen Hintergründe sind
vielleicht noch unbekannt. Hugo Giraudel klärt auf.

THE SECRET MESSAGES INSIDE CHINESE URLS

Etliche Aha-Effekte in diesem Artikel, der zeigt warum 888888888.com für China
eine ganz tolle Domain ist.

WEBCOMPONENTS.ORG

Web Components sind das nächste große Ding, das Portal ist das dazu passende
Wissensarchiv.

Revision 170: Inline SVGs vs Icon Fonts, Adaptive Placeholders und currentScript

<p>Da Peter und <a href="http://www.grochtdreis.de/">Jens Grochtdreis</a> zufällig gerade in Düsseldorf weilten, wo sie über drei Tage verteilt ihre <a href="http://html5-master-class.de/">HTML5 MasterClass</a> gaben, dachte Schepp sich: Warum nicht das Angenehme mit dem Nützlichen verbinden, sich mit den Jungs im Biergarten treffen, und ein Mikro auf den Tisch stellen? Gesagt, getan! Statt über das übliche Nerd-Zeugs zu reden, rekapitulierten wir, wie wir im Laufe der Jahre durch Ereignisse und Dinge die wir bewusst taten zu dem beruflichen Punkt angelangten, an dem wir jetzt stehen.</p>
<p>Da wir in einem Biergarten nahe einer Straße saßen, kann die Tonqualität diesmal nicht ganz mit denen der übrigen Folgen mithalten. <a href="http://auphonic.com/">auphonic</a> hat allerdings wieder mal etwas sehr Brauchbares herbeigezaubert. &lt;3</p>
<h3>[00:42:21] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.gitignore.io/">gitignore.io</a></dt>
<dd>Create useful .gitignore files for your project</dd>
<dt><a href="https://puphpet.com/">PuPHPet</a></dt>
<dd>Online GUI Configurator for Puppet &#038; Vagrant</dd>
<dt><a href="https://projectparfait.adobe.com/">Adobe&#8217;s Project Parfait</a></dt>
<dd>PSD CSS Extraction, Measurements and Image Optimization Service for the Web</dd>
</dl>


Da Peter und Jens Grochtdreis zufällig gerade in Düsseldorf weilten, wo sie über
drei Tage verteilt ihre HTML5 MasterClass gaben, dachte Schepp sich: Warum nicht
das Angenehme mit dem Nützlichen verbi…

Da Peter und Jens Grochtdreis zufällig gerade in Düsseldorf weilten, wo sie über
drei Tage verteilt ihre HTML5 MasterClass gaben, dachte Schepp sich: Warum nicht
das Angenehme mit dem Nützlichen verbinden, sich mit den Jungs im Biergarten
treffen, und ein Mikro auf den Tisch stellen? Gesagt, getan! Statt über das
übliche Nerd-Zeugs zu reden, rekapitulierten wir, wie wir im Laufe der Jahre
durch Ereignisse und Dinge die wir bewusst taten zu dem beruflichen Punkt
angelangten, an dem wir jetzt stehen.

Da wir in einem Biergarten nahe einer Straße saßen, kann die Tonqualität diesmal
nicht ganz mit denen der übrigen Folgen mithalten. auphonic hat allerdings
wieder mal etwas sehr Brauchbares herbeigezaubert. <3


[00:42:21] KEINE SCHAUNOTIZEN

GITIGNORE.IO

Create useful .gitignore files for your project

PUPHPET

Online GUI Configurator for Puppet & Vagrant

ADOBE’S PROJECT PARFAIT

PSD CSS Extraction, Measurements and Image Optimization Service for the Web

Revision 169: Plausch im Biergarten

<p>Als Gast konnten Schepp, Hans und Peter diesmal <a href="http://paulbakaus.com">Paul Bakaus</a> begrüßen (bekannt für jQuery UI, später bei Zynga), der heute als Developer Advocate für Google unterwegs ist.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:05] <a href="http://paulbakaus.com/tutorials/performance/the-illusion-of-motion/">The Illusion of Motion</a></dt>
<dd>Paul klärt uns über die Hintergründe von Bildschirmdarstellung auf. Die Kernfrage ist: warum zielen wir bei der Performanceoptimierung im Web auf 60 FPS, wenn doch z.B. Filme mit 24 FPS auskommen? Wir reden über Bewegungsunschärfe, das amerikanische Stromnetz, das Auge, CRTs und LCDs, den Flicker Fusion Threshold, <a href="http://www.nvidia.de/object/g-sync-monitor-technology-de.html">G-Sync</a>, Fernseher und Fernseherhersteller, Zwischenbildberechnung sowie die Lufthansa.</dd>
<dt>[00:25:11] Bildkompression</dt>
<dd>Paul wundert sich, warum so wenig in Sachen Bildkompression passiert, obwohl dort doch das meiste Optimierungspotenzial schlummert. Trotzdem es so manches Tool gibt (wir erwähnen unter anderem <a href="http://pngmini.com/">ImageAlpha</a>, <a href="http://www.jpegmini.com/">JPEGMini</a>, <a href="https://github.com/technopagan/adept-jpg-compressor">adept-jpg-compressor</a> und <a href="http://pngquant.org/">pngquant</a>) fehlt es noch an ausreichend smarten Tools. Auch <a href="https://de.wikipedia.org/wiki/WebP">WebP</a> (und den damit verbundenen <a href="http://www.cnet.com/news/facebook-tries-googles-webp-image-format-users-squawk/">Griff ins Klo</a> durch Facebook), <a href="https://github.com/adobe-photoshop/generator-assets">Photoshops Generator-Funktionalität für Bilder</a> und ein <a href="http://www.lukew.com/ff/entry.asp?1797">Performance-Artikel von Luke Wroblewski</a> kommen zur Sprache.</dd>
<dt>[00:47:01] <a href="http://paulbakaus.com/2014/04/16/winning-for-users/">Winning for Users</a></dt>
<dd>In einem Artikel empfiehlt Paul eine auf die User ausgerichtete Argumentationslinie für Webtechnologie. Peter lässt es sich nicht nehmen, den Advocatus Diaboli für Native Apps zu spielen. Schepp empfiehlt in diesem Kontext <a href="http://vimeo.com/91027416">den spektakulären Talk &#8222;How to destroy the web&#8220;</a> von Bruce Lawson.</dd>
</dl>
<h3>[01:02:32] Keine Schaunotizen</h3>
<dl>
<dt>Cheat Sheets für <a href="http://robdodson.me/blog/2014/04/10/shadow-dom-css-cheat-sheet/">Shadow DOM</a> und <a href="https://github.com/tiimgreen/github-cheat-sheet">Github</a></dt>
<dd>Vor allem letzterer ist von epischer Länge und Tiefe.</dd>
<dt><a href="http://www.smashingmagazine.com/2014/04/15/understanding-css-timing-functions/">Understanding CSS Timing Functions</a></dt>
<dd>Wirklich <em>alles</em> was es über Timing Functions zu wissen gibt.</dd>
<dt><a href="http://www.browserstage.com/">BrowserStage: Web Automation That Just Works</a></dt>
<dd>Wir haben es nicht getestet, aber einen Blick scheint dieses Produkt wert.</dd>
<dt><a href="http://conditionerjs.com/">Conditioner.js</a></dt>
<dd>Zitat: <i>Frizz free, environment-aware, javascript modules.</i></dd>
<dt><a href="https://www.eventbrite.com/e/web-platform-doc-sprint-dusseldorf-tickets-2009968871">Düsseldorfer Web Platform Doc Sprint</a></dt>
<dd>Am 18. Mai Docs schreiben und grillen in Düsseldorf .</dd>
</dl>


Als Gast konnten Schepp, Hans und Peter diesmal Paul Bakaus begrüßen (bekannt
für jQuery UI, später bei Zynga), der heute als Developer Advocate für Google
unterwegs ist.


SCHAUNOTIZEN

[00:01:05] TH…

Als Gast konnten Schepp, Hans und Peter diesmal Paul Bakaus begrüßen (bekannt
für jQuery UI, später bei Zynga), der heute als Developer Advocate für Google
unterwegs ist.


SCHAUNOTIZEN

[00:01:05] THE ILLUSION OF MOTION

Paul klärt uns über die Hintergründe von Bildschirmdarstellung auf. Die
Kernfrage ist: warum zielen wir bei der Performanceoptimierung im Web auf 60
FPS, wenn doch z.B. Filme mit 24 FPS auskommen? Wir reden über
Bewegungsunschärfe, das amerikanische Stromnetz, das Auge, CRTs und LCDs, den
Flicker Fusion Threshold, G-Sync, Fernseher und Fernseherhersteller,
Zwischenbildberechnung sowie die Lufthansa.

[00:25:11] BILDKOMPRESSION

Paul wundert sich, warum so wenig in Sachen Bildkompression passiert, obwohl
dort doch das meiste Optimierungspotenzial schlummert. Trotzdem es so manches
Tool gibt (wir erwähnen unter anderem ImageAlpha, JPEGMini, adept-jpg-compressor
und pngquant) fehlt es noch an ausreichend smarten Tools. Auch WebP (und den
damit verbundenen Griff ins Klo durch Facebook), Photoshops
Generator-Funktionalität für Bilder und ein Performance-Artikel von Luke
Wroblewski kommen zur Sprache.

[00:47:01] WINNING FOR USERS

In einem Artikel empfiehlt Paul eine auf die User ausgerichtete
Argumentationslinie für Webtechnologie. Peter lässt es sich nicht nehmen, den
Advocatus Diaboli für Native Apps zu spielen. Schepp empfiehlt in diesem Kontext
den spektakulären Talk „How to destroy the web“ von Bruce Lawson.


[01:02:32] KEINE SCHAUNOTIZEN

CHEAT SHEETS FÜR SHADOW DOM UND GITHUB

Vor allem letzterer ist von epischer Länge und Tiefe.

UNDERSTANDING CSS TIMING FUNCTIONS

Wirklich alles was es über Timing Functions zu wissen gibt.

BROWSERSTAGE: WEB AUTOMATION THAT JUST WORKS

Wir haben es nicht getestet, aber einen Blick scheint dieses Produkt wert.

CONDITIONER.JS

Zitat: Frizz free, environment-aware, javascript modules.

DÜSSELDORFER WEB PLATFORM DOC SPRINT

Am 18. Mai Docs schreiben und grillen in Düsseldorf .

Revision 168: Monitore, Bildkompression, Links

<p>Die aktuelle Sendung steht ganz im Zeichen der Dezentralisierung. Passend dazu sind <a href="https://twitter.com/marcthiele">Marc Thiele</a> und <a href="http://bastianallgeier.com/">Bastian Allgeier</a> als Gäste mit dabei, die gemeinsam am 21. Mai das erste <a href="http://decentralizecamp.com/">Decentralize Camp</a> veranstalten.</p>
<h3>[00:00:32] News</h3>
<dl>
<dt><a href="http://www.w3.org/TR/css-line-grid-1/">CSS Line Grid Module Level 1</a></dt>
<dd>Working Draft: Das CSS Line Grid Module befasst sich damit, Inhalte an einer vertikalen Baseline auszurichten.</dd>
<dt><a href="http://dev.w3.org/csswg/css-extensions/">CSS Extensions</a></dt>
<dd>Achtung: Editor’s Draft! Dieser spezifiziert die Möglichkeit der Erweiterung von CSS mittels eigener Eigenschaften, at-Rules, Selektor-Kombinationen und mehr.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:57] <a href="http://decentralizecamp.com/">Decentralize Camp</a></dt>
<dd>Das erste Decentralize Camp findet am 21. Mai 2014 in Düsseldorf statt und kostet gerade mal 30 Euro! <a href="http://decentralizecamp.com/registration">Anmeldungen werden auf der Website entgegen genommen</a>.</dd>
<dt>[00:46:57] Verlosung: Tipp, wie man seine Daten &#8222;befreien&#8220; kann</dt>
<dd>Wer einen guten Tipp oder ein gutes Howto parat hat, mit dem man seine Daten aus den großen Datensilos heraus in heimische Gewässer bekommt, der poste es in den Kommentaren. Jeder nimmt dann automatisch an einer Verlosung zweier Karten für das Decentralize Camp teil.</dd>
</dl>
<h3>[00:53:13] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.webrocker.de/2014/04/14/meine-eigene-kleine-datenwolke/">Meine eigene kleine Datenwolke</a></dt>
<dd>Tom Arnold berichtet über seine Erfahrungen mit <a href="http://owncloud.org/">ownCloud</a>, seiner eigenen, dezentralen Cloud.</dd>
<dt><a href="http://www.regexr.com/">RegExr</a></dt>
<dd>RegExr ist das perfekte Tool zum Testen von Regulären Ausdrücken.</dd>
</dl>


Die aktuelle Sendung steht ganz im Zeichen der Dezentralisierung. Passend dazu
sind Marc Thiele und Bastian Allgeier als Gäste mit dabei, die gemeinsam am 21.
Mai das erste Decentralize Camp veranstal…

Die aktuelle Sendung steht ganz im Zeichen der Dezentralisierung. Passend dazu
sind Marc Thiele und Bastian Allgeier als Gäste mit dabei, die gemeinsam am 21.
Mai das erste Decentralize Camp veranstalten.


[00:00:32] NEWS

CSS LINE GRID MODULE LEVEL 1

Working Draft: Das CSS Line Grid Module befasst sich damit, Inhalte an einer
vertikalen Baseline auszurichten.

CSS EXTENSIONS

Achtung: Editor’s Draft! Dieser spezifiziert die Möglichkeit der Erweiterung von
CSS mittels eigener Eigenschaften, at-Rules, Selektor-Kombinationen und mehr.


SCHAUNOTIZEN

[00:01:57] DECENTRALIZE CAMP

Das erste Decentralize Camp findet am 21. Mai 2014 in Düsseldorf statt und
kostet gerade mal 30 Euro! Anmeldungen werden auf der Website entgegen genommen.

[00:46:57] VERLOSUNG: TIPP, WIE MAN SEINE DATEN „BEFREIEN“ KANN

Wer einen guten Tipp oder ein gutes Howto parat hat, mit dem man seine Daten aus
den großen Datensilos heraus in heimische Gewässer bekommt, der poste es in den
Kommentaren. Jeder nimmt dann automatisch an einer Verlosung zweier Karten für
das Decentralize Camp teil.


[00:53:13] KEINE SCHAUNOTIZEN

MEINE EIGENE KLEINE DATENWOLKE

Tom Arnold berichtet über seine Erfahrungen mit ownCloud, seiner eigenen,
dezentralen Cloud.

REGEXR

RegExr ist das perfekte Tool zum Testen von Regulären Ausdrücken.

Revision 167: Das Decentralize Camp

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

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

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 172: Interview mit Chris Coyier

Working Draft

Revision 171: Drag & Drop erklärbärt

Working Draft

Revision 170: Inline SVGs vs Icon Fonts, Adaptive Placeholders und currentScript

Working Draft

Revision 169: Plausch im Biergarten

Working Draft

Revision 168: Monitore, Bildkompression, Links

Working Draft

Revision 167: Das Decentralize Camp

Working Draft

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