<p>Es herrscht Saure-Gurken-Zeit und die Themenliste war gähnend leer. Zum Glück konnte die Hörerschaft Hans, Peter und Stefan mit zwei Fragen gerade noch davon abhalten, eine Null-Minuten-Revision zu fabrizieren.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:14] Hörerfrage: <a href="https://twitter.com/malteriechmann/status/390883254984654848">Wie nutzt ihr Webfonts?</a></dt>
<dd>Die Gretchenfrage spitzt sich auf die Entscheidung zwischen Fonthostern und Selfhosting zu. Hans macht gewzungenermaßen manche Projekte mit <a href="https://typekit.com/">Typekit</a>, obwohl er die Einbußen an Kontrolle und Performance nicht schätzt. Stefan leidet sehr unter Lizenzproblemen, weil es viele Fonts entweder gar nicht als Webfonts oder nur mit Mondpreisen und schlimmen Lizenzbedingungen von <a href="http://www.fonts.com/de/web-fonts">Fonts.com</a> gibt. Ersatz-Fonts sind da oft die beste Lösung. Für die Suche nach dem richtigen Font-Anbieter empfehlen wir <a href="http://webtypobuch.de/">das Webtypobuch von Gerrit van Aaken</a>.</dd>
<dt>[00:17:12] Hörerfrage: <a href="https://twitter.com/bln42/status/391592494179180544">Mit welchen Entwicklungsumgebungen arbeitet ihr?</a></dt>
<dd>Wie fast die gesamte Web-Welt scheinen wir dem <a href="http://www.sublimetext.com/">Sublime-Text</a>-Virus anheim gefallen zu sein. Der Editor ist schnell, schön, auf jeder Plattform verfügbar, preiswert und allgemein unsere erste Wahl. Einigkeit herrscht ebenfalls darüber, dass auf Platz zwei <a href="http://www.jetbrains.com/webstorm/">WebStorm</a> zu verorten ist, was mehr eine IDE als ein Editor, aber ebenfalls sehr tauglich ist (jedenfalls verglichen mit <a href="http://aptana.com/">Aptana</a>, über das Stefan und Peter Gruselgeschichten erzählen). Kein Gespräch über Sublime Text kommt ohne Plugin-, Theme- und Tricktipps aus uns so reden wir auch über <a href="http://emmet.io/">Emmet</a> (Früher Zen Coding), das Multicursor-Feature, den Cloud-Sync-Tipp von Peter, <a href="http://ternjs.net/">Tern</a>, <a href="https://github.com/spadgos/sublime-jsdocs">DocBlockr</a>, <a href="https://github.com/SublimeText/Origami">Origami</a>, <a href="https://github.com/gornostal/Modific">Modific</a>, <a href="http://www.jshint.com/">JSHint</a> und andere <a href="https://github.com/SublimeLinter/SublimeLinter">Linter für ST</a>, <a href="http://editorconfig.org/">EditorConfig</a> (und das <a href="https://github.com/sindresorhus/editorconfig-sublime">ST-Plugin</a>) sowie <a href="https://github.com/buymeasoda/soda-theme/">das Soda-Theme</a>.
</dd>
</dl>
<h3>[00:46:00] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-css-user-agent-style-sheet-and-presentational-hints">Standardstyles für Elemente</a></dt>
<dd>
Trotzdem die HTML5-Specs vorschreiben, wie Elemente standardmäßig auszusehen haben, reden wir trotzdem über <a href="http://meyerweb.com/eric/tools/css/reset/">Reset-Stylesheets</a>, <a href="http://necolas.github.io/normalize.css/">normalize.css</a>, <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a>, <a href="https://github.com/drublic/init">Init</a> und das <a href="http://www.whatwg.org/specs/web-apps/current-work/#text-(type=text)-state-and-search-state-(type=search)">Search-Input</a>.</dd>
</dl>
<h3>[00:55:40] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/SirPepe/Unsync">SirPepe/Unsync</a></dt>
<dd>Kleine JS-Library von Peter.</dd>
<dt><a href="https://github.com/nelsonic/learn-travis">learn-travis</a></dt>
<dd>Ein reich bebildertes Travis-Tutorial.</dd>
</dl>


Es herrscht Saure-Gurken-Zeit und die Themenliste war gähnend leer. Zum Glück
konnte die Hörerschaft Hans, Peter und Stefan mit zwei Fragen gerade noch davon
abhalten, eine Null-Minuten-Revision zu fa…

Working Draft

Es herrscht Saure-Gurken-Zeit und die Themenliste war gähnend leer. Zum Glück
konnte die Hörerschaft Hans, Peter und Stefan mit zwei Fragen gerade noch davon
abhalten, eine Null-Minuten-Revision zu fabrizieren.


SCHAUNOTIZEN

[00:00:14] HÖRERFRAGE: WIE NUTZT IHR WEBFONTS?

Die Gretchenfrage spitzt sich auf die Entscheidung zwischen Fonthostern und
Selfhosting zu. Hans macht gewzungenermaßen manche Projekte mit Typekit, obwohl
er die Einbußen an Kontrolle und Performance nicht schätzt. Stefan leidet sehr
unter Lizenzproblemen, weil es viele Fonts entweder gar nicht als Webfonts oder
nur mit Mondpreisen und schlimmen Lizenzbedingungen von Fonts.com gibt.
Ersatz-Fonts sind da oft die beste Lösung. Für die Suche nach dem richtigen
Font-Anbieter empfehlen wir das Webtypobuch von Gerrit van Aaken.

[00:17:12] HÖRERFRAGE: MIT WELCHEN ENTWICKLUNGSUMGEBUNGEN ARBEITET IHR?

Wie fast die gesamte Web-Welt scheinen wir dem Sublime-Text-Virus anheim
gefallen zu sein. Der Editor ist schnell, schön, auf jeder Plattform verfügbar,
preiswert und allgemein unsere erste Wahl. Einigkeit herrscht ebenfalls darüber,
dass auf Platz zwei WebStorm zu verorten ist, was mehr eine IDE als ein Editor,
aber ebenfalls sehr tauglich ist (jedenfalls verglichen mit Aptana, über das
Stefan und Peter Gruselgeschichten erzählen). Kein Gespräch über Sublime Text
kommt ohne Plugin-, Theme- und Tricktipps aus uns so reden wir auch über Emmet
(Früher Zen Coding), das Multicursor-Feature, den Cloud-Sync-Tipp von Peter,
Tern, DocBlockr, Origami, Modific, JSHint und andere Linter für ST, EditorConfig
(und das ST-Plugin) sowie das Soda-Theme.


[00:46:00] GLÜCKSRAD

STANDARDSTYLES FÜR ELEMENTE

Trotzdem die HTML5-Specs vorschreiben, wie Elemente standardmäßig auszusehen
haben, reden wir trotzdem über Reset-Stylesheets, normalize.css, HTML5
Boilerplate, Init und das Search-Input.


[00:55:40] KEINE SCHAUNOTIZEN

SIRPEPE/UNSYNC

Kleine JS-Library von Peter.

LEARN-TRAVIS

Ein reich bebildertes Travis-Tutorial.

Revision 142: Webfonts und IDEs

<p>Hans, Stefan und Peter luden sich dieses Mal Ole Michaelis (<a href="https://twitter.com/CodeStars">@codestars</a>) ein, um sich zum Thema DevOps erleuchten zu lassen. Ole arbeitet tagsüber bei <a href="http://de.jimdo.com/">Jimdo</a>, organisiert des Nachts Konferenzen wie <a href="http://socoded.com/">So Coded</a> und <a href="https://speakerdeck.com/nesquick/next-level-devops">erzählt viel über DevOps</a>.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:57] DevOps</dt>
<dd>Ole <a href="https://speakerdeck.com/nesquick/next-level-devops">definiert DevOps</a> als eine Mischung aus dem Dasein eines (Backend-) Developers und den Aufgaben einer Operations-Abteilung (Deployment, Metering, Infrastruktur). Er versucht dabei vor allem, seinen Team in die Lage zu versetzen, selbst Operations-Aufgaben zu übernehmen oder dafür die Extra-Abteilung zu brauchen. Dem schließt sich eoine Debatte über de Rollenverteilung im Team an, bei der wir über den <a href="http://en.wikipedia.org/wiki/Bus_factor">Bus-Faktor</a>, <a lang="en" href="http://de.wikipedia.org/wiki/Kontinuierliche_Integration">Continuous Integration</a> und <a href="http://de.wikipedia.org/wiki/Software_as_a_Service">SaaS</a> philosophieren. Vor allem treibt uns die Frage um: was passiert denn wenn Amazon und/oder Github mal down sind (was im Einzelfall ja schon mal vorkommt). Auch <i lang="en">Code Ownership</i> und die Rechtslage, wenn Code ins Ausland wandert, sind interessante Probleme. Außerdem erwähnen wir:</p>
<ul>
<li><a href="http://jenkins-ci.org/">http://jenkins-ci.org/</a> und <a href="https://travis-ci.org/">https://travis-ci.org/</a>
<li><a href="http://puppetlabs.com/">http://puppetlabs.com/</a> und <a href="http://www.opscode.com/chef/">http://www.opscode.com/chef/</a>
<li><a href="https://npmjs.org/">https://npmjs.org/</a> und <a href="http://bower.io/">http://bower.io/</a>
</ul>
</dd>
<dt>[00:22:40] Statische Seiten</dt>
<dd>Nachdem wir <a href="http://workingdraft.de/138/">die ganze Revision 138 über CMS geredet haben</a> wird es auch mal Zeit die Gegenseite, d.h. statisches HTML zu beleuchten. Außerdem baut Ole ohnehin gerade etwas mit <a href="https://github.com/mojombo/jekyll">Jekyll</a>. Peter erzählt Gruselstory von Padawanen, deren Webseite gehackt wurde während er eine Schulung gab und dass er seither CMS aus Sicherheitsgründen am liebsten nie wieder anfassen würde. Das Problem ist nur: wie macht man dann Nutzerinteraktion (reicht <a href="http://disqus.com/">Disqus</a> für Kommentare?) und wie bietet man nicht-nerdigen Redakteuren ein schönes Interface? Am Rande fallen die Namen des akut gehypten <a href="http://ghost.org/">Ghost</a> und des weniger gehypten <a href="http://cmf.symfony.com/">Symfony CMF</a>.</dd>
</dl>
<h3>[00:38:33] Glücksrad</h3>
<dl>
<dt>Outline-Algorithmus</dt>
<dd>Wir reden über Theorie und Praxis des <a href="http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/">Outline-Algorithmus</a>, SEO und <a href="http://schema.org/">schema.org</a>.</dd>
</dl>
<h3>[00:46:31] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://yahooeng.tumblr.com/post/62383009835/javascript-modules-amd-and-the-road-ahead">Javascript Modules, AMD, and the road ahead.</a></dt>
<dd>Ein Vergleich zwischen AMD, CommonJS und ES6-Modulen. Einen <a href="https://npmjs.org/package/amdclean">Konverter</a> als Node-Modul gibt es auch schon.</dd>
<dt><a href="http://4waisenkinder.de/blog/2013/09/21/getting-started-with-web-components-and-polymer-dot-js/">Getting Started With Web Components and polymer.js</a></dt>
<dd>Einführung in die faszinierende Welt der Web Components.</dd>
<dt><a href="http://www.peterkroener.de/internet-explorer-blob-urls-web-workers-die-same-origin-policy-und-der-ie-bugtracker/">Internet Explorer, Blob URLs, Web Workers, die Same Origin Policy und der IE-Bugtracker</a></dt>
<dd>Ein Rant von Peter über seinen aktuellen Lieblings-Bug im IE. <a href="https://connect.microsoft.com/IE/feedback/details/801810/web-workers-from-blob-urls-in-ie-10-and-11">Hier ist der Bug Report bei Microsoft</a>.</dd>
<dt><a href="http://www.meetup.com/stahlstadt-js/">StahlstadtJS</a></dt>
<dd>JS-Meetup in Linz.</dd>
<dt><a href="http://2014.jsunconf.eu/">JSunconference</a></dt>
<dd>Ist zwar erst im April 2014, aber vormerken kann man sich das Ganze schon mal.</dd>
</dl>


Hans, Stefan und Peter luden sich dieses Mal Ole Michaelis (@codestars) ein, um
sich zum Thema DevOps erleuchten zu lassen. Ole arbeitet tagsüber bei Jimdo,
organisiert des Nachts Konferenzen wie So C…

Hans, Stefan und Peter luden sich dieses Mal Ole Michaelis (@codestars) ein, um
sich zum Thema DevOps erleuchten zu lassen. Ole arbeitet tagsüber bei Jimdo,
organisiert des Nachts Konferenzen wie So Coded und erzählt viel über DevOps.


SCHAUNOTIZEN

[00:00:57] DEVOPS

Ole definiert DevOps als eine Mischung aus dem Dasein eines (Backend-)
Developers und den Aufgaben einer Operations-Abteilung (Deployment, Metering,
Infrastruktur). Er versucht dabei vor allem, seinen Team in die Lage zu
versetzen, selbst Operations-Aufgaben zu übernehmen oder dafür die
Extra-Abteilung zu brauchen. Dem schließt sich eoine Debatte über de
Rollenverteilung im Team an, bei der wir über den Bus-Faktor, Continuous
Integration und SaaS philosophieren. Vor allem treibt uns die Frage um: was
passiert denn wenn Amazon und/oder Github mal down sind (was im Einzelfall ja
schon mal vorkommt). Auch Code Ownership und die Rechtslage, wenn Code ins
Ausland wandert, sind interessante Probleme. Außerdem erwähnen wir:



 * http://jenkins-ci.org/ und https://travis-ci.org/
 * http://puppetlabs.com/ und http://www.opscode.com/chef/
 * https://npmjs.org/ und http://bower.io/

[00:22:40] STATISCHE SEITEN

Nachdem wir die ganze Revision 138 über CMS geredet haben wird es auch mal Zeit
die Gegenseite, d.h. statisches HTML zu beleuchten. Außerdem baut Ole ohnehin
gerade etwas mit Jekyll. Peter erzählt Gruselstory von Padawanen, deren Webseite
gehackt wurde während er eine Schulung gab und dass er seither CMS aus
Sicherheitsgründen am liebsten nie wieder anfassen würde. Das Problem ist nur:
wie macht man dann Nutzerinteraktion (reicht Disqus für Kommentare?) und wie
bietet man nicht-nerdigen Redakteuren ein schönes Interface? Am Rande fallen die
Namen des akut gehypten Ghost und des weniger gehypten Symfony CMF.


[00:38:33] GLÜCKSRAD

OUTLINE-ALGORITHMUS

Wir reden über Theorie und Praxis des Outline-Algorithmus, SEO und schema.org.


[00:46:31] KEINE SCHAUNOTIZEN

JAVASCRIPT MODULES, AMD, AND THE ROAD AHEAD.

Ein Vergleich zwischen AMD, CommonJS und ES6-Modulen. Einen Konverter als
Node-Modul gibt es auch schon.

GETTING STARTED WITH WEB COMPONENTS AND POLYMER.JS

Einführung in die faszinierende Welt der Web Components.

INTERNET EXPLORER, BLOB URLS, WEB WORKERS, DIE SAME ORIGIN POLICY UND DER
IE-BUGTRACKER

Ein Rant von Peter über seinen aktuellen Lieblings-Bug im IE. Hier ist der Bug
Report bei Microsoft.

STAHLSTADTJS

JS-Meetup in Linz.

JSUNCONFERENCE

Ist zwar erst im April 2014, aber vormerken kann man sich das Ganze schon mal.

Revision 141: Devops, statische Seiten und Links

<p>Viele Bothaner erlitten den Tod bis endlich <a href="https://twitter.com/patrick_h_lauke">Patrick Lauke</a> den Weg in unsere Sendung fand. Dort angekommen erhellte er uns über Touch- und Pointer-Events und glich seine Meinung über Toolchains und ARIA-Kurse mit Schepp und Peter ab.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:10] Toolchain-Kult?</dt>
<dd>Früher war alles einfacher, da brauchte man nur Notepad und einen FTP-Client. Heute hingegen machte Patrick die Erfahrung, dass er 3 Tage lang an seiner Toolchain herumfrickeln musste um einen Pull Request abzusetzen und er fragt sich, ob das so sein muss. Peter findet, dass die FTP-Notepad-Zeit angewandte Barbarei war und der Trubel um <a href="http://gruntjs.com/">Grunt</a> und Co seine Berechtigung hat. Er würde sogar behaupten, dass speziell moderne Browser-Devtools einen Einstieg eher erleichtern könnten. Schepp wirft ein, dass mit GUI-Programmen wie <a href="http://alphapixels.com/prepros/">Prepros</a> das Setup auch nicht ganz so nerdig und beschwerlich sein muss.</dd>
<dt>[00:17:50] <a href="http://de.slideshare.net/redux/javascript-days-25092013">Getting touchy &#8211; an introduction to touch and pointer events</a></dt>
<dd>Patricks aktuelles Lieblingsthema sind Touch- und Pointer-Events, an deren Historie, Funktionsweise und Verbuggtheit er in dreistündigen Workshops abarbeitet&nbsp;&ndash; für uns gibt es die Express-Version. Wir sprechen über <a href="http://www.w3.org/TR/touch-events/">Touch-Events</a>, Touch-Delays, Mouseover-Menüs, Movement-Events, Erkennung von Touchscreens (<a href="http://workingdraft.de/120/">nicht</a> <a href="https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/">gut</a>), <a href="http://www.w3.org/TR/pointerevents/">Pointer-Events</a>, <a href="http://blogs.msdn.com/b/eternalcoding/archive/2013/01/16/hand-js-a-polyfill-for-supporting-pointer-events-on-every-browser.aspx">Polyfills für Pointer-Events</a>, Browserbugs (siehe auch <a href="http://workingdraft.de/137/">Revision 137</a>) und über die Fortschrittsbremsen von der Obsttheke.</p>
<dt>[00:54:43] <a href="https://webaccessibility.withgoogle.com/preview">Introduction to Web Accessibility</a></dt>
<dd>Wie kann ein kostenloser vierteiliger Kurs zu Barrierefreiheit für eine Kontroverse sorgen? Ganz einfach, man muss nur Google sein und <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a> mit Accessibility allgemein verwechseln. Statt gleich die richtigen Elemente zu verwenden (Peter besteht darauf, zu erwähnen, dass das <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#semantics-0">genau so wichtig ist wie korrekte Syntax</a>) accessibilisiert der Kurs Div-Suppen. Die enthaltenen ARIA-Infos sind solide, als Gesamtbarrierefreiheitslösung ist der Kurs aber höchst zweifelhaft. Desweiteren plaudern wir über <a href="http://www.chromevox.com/">Chrome Vox</a> und seine <a href="http://accessibility.oit.ncsu.edu/dev/screen-reader-tests/chromevox/chromevox-api.html">A</a><a href="http://quadatsch.files.wordpress.com/2009/09/sexsite_sound.jpg?w=450">P</a><a href="http://accessibility.oit.ncsu.edu/dev/screen-reader-tests/chromevox/chromevox-api.html">I</a> sowie <a href="http://www.marcozehe.de/2013/09/07/why-accessibility-apis-matter/">Accessibility-APIs allgemein</a>.</dd>
</dl>
<h3>[01:07:17] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://hacks.mozilla.org/2013/09/new-features-in-the-firefox-developer-tools-episode-26/">New Features in the Firefox Developer Tools: Episode 26</a></dt>
<dd>Firebug ist obsolet und die Chrome-Devtools sind bald eingeholt.</dd>
<dt><a href="http://www.minimamente.com/magic-css3-animations/">Magic CSS3 Anaimations</a></dt>
<dd>Eine weitere Library voller CSS3-Animationen.</dd>
<dt><a href="http://blog.rodneyrehm.de/archives/25-Revisioning-Assets-using-base.html">Revisioning Assets using &lt;base&gt;</a></dt>
<dd>Einer dieser schönen, langen, hackigen Trip Reports von Rodney.</dd>
<dt><a href="http://insidrrr.de/">insidrrr | Offenes Kompetenznetzwerk für interaktive Medien</a></dt>
<dd>Geheimtipp vom Schepp.</dd>
</dl>


Viele Bothaner erlitten den Tod bis endlich Patrick Lauke den Weg in unsere
Sendung fand. Dort angekommen erhellte er uns über Touch- und Pointer-Events und
glich seine Meinung über Toolchains und ARI…

Viele Bothaner erlitten den Tod bis endlich Patrick Lauke den Weg in unsere
Sendung fand. Dort angekommen erhellte er uns über Touch- und Pointer-Events und
glich seine Meinung über Toolchains und ARIA-Kurse mit Schepp und Peter ab.


SCHAUNOTIZEN

[00:02:10] TOOLCHAIN-KULT?

Früher war alles einfacher, da brauchte man nur Notepad und einen FTP-Client.
Heute hingegen machte Patrick die Erfahrung, dass er 3 Tage lang an seiner
Toolchain herumfrickeln musste um einen Pull Request abzusetzen und er fragt
sich, ob das so sein muss. Peter findet, dass die FTP-Notepad-Zeit angewandte
Barbarei war und der Trubel um Grunt und Co seine Berechtigung hat. Er würde
sogar behaupten, dass speziell moderne Browser-Devtools einen Einstieg eher
erleichtern könnten. Schepp wirft ein, dass mit GUI-Programmen wie Prepros das
Setup auch nicht ganz so nerdig und beschwerlich sein muss.

[00:17:50] GETTING TOUCHY – AN INTRODUCTION TO TOUCH AND POINTER EVENTS

Patricks aktuelles Lieblingsthema sind Touch- und Pointer-Events, an deren
Historie, Funktionsweise und Verbuggtheit er in dreistündigen Workshops
abarbeitet – für uns gibt es die Express-Version. Wir sprechen über
Touch-Events, Touch-Delays, Mouseover-Menüs, Movement-Events, Erkennung von
Touchscreens (nicht gut), Pointer-Events, Polyfills für Pointer-Events,
Browserbugs (siehe auch Revision 137) und über die Fortschrittsbremsen von der
Obsttheke.



[00:54:43] INTRODUCTION TO WEB ACCESSIBILITY

Wie kann ein kostenloser vierteiliger Kurs zu Barrierefreiheit für eine
Kontroverse sorgen? Ganz einfach, man muss nur Google sein und WAI-ARIA mit
Accessibility allgemein verwechseln. Statt gleich die richtigen Elemente zu
verwenden (Peter besteht darauf, zu erwähnen, dass das genau so wichtig ist wie
korrekte Syntax) accessibilisiert der Kurs Div-Suppen. Die enthaltenen
ARIA-Infos sind solide, als Gesamtbarrierefreiheitslösung ist der Kurs aber
höchst zweifelhaft. Desweiteren plaudern wir über Chrome Vox und seine API sowie
Accessibility-APIs allgemein.


[01:07:17] KEINE SCHAUNOTIZEN

NEW FEATURES IN THE FIREFOX DEVELOPER TOOLS: EPISODE 26

Firebug ist obsolet und die Chrome-Devtools sind bald eingeholt.

MAGIC CSS3 ANAIMATIONS

Eine weitere Library voller CSS3-Animationen.

REVISIONING ASSETS USING <BASE>

Einer dieser schönen, langen, hackigen Trip Reports von Rodney.

INSIDRRR | OFFENES KOMPETENZNETZWERK FÜR INTERAKTIVE MEDIEN

Geheimtipp vom Schepp.

Revision 139: Toolchain-Kult und Touch-Events

<p>Eine spontane Revision mit spontanen Gästen und einem noch spontaneren Twitter. Eine fünf Minuten vor Start zusammengestoppelte Besetzung aus <a href="http://www.yellowled.de">Matthias Mees</a>, <a href="http://grochtdreis.de">Jens Grochtdreis</a>, Stefan und Schepp diskutiert über die Dinge, die dem Webworker seit jeher graue Haare und Falten bereiten: Content Management Systeme.</p>
<h3>[00:00:45] News</h3>
<dl>
<dt><a href="http://blog.jquery.com/2013/09/19/jquery-1-11-and-2-1-beta-1-released/">jQuery 1.11 and 2.1 Beta 1 Released</a></dt>
<dd>Die Beta der neuen jQuery ist erschienen, mit einigen interessanten Änderungen, unter anderem einer neuen, AMD-lastigen Architektur.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:07] <a href="#">Content Management Systeme</a></dt>
<dd>In einer stundenlangenen Plauderei nehmen die furchtlosen Frontend-Vier ein CMS nach dem anderen unter die Lupe. Wir beleuchten das Für und Wider der kommerziellen Systeme wie Reddot und Imperia, brechen die eine oder andere Lanze für <a href="http://www.perun.net/2012/08/08/das-kleine-feine-cms-processwire-reduzierung-aufs-wesentliche/">ProcessWire</a> und <a href="http://getkirby.com">Kirby</a>. Außerdem erklären wir, wie man mit den <a href="http://wordpress.org/plugins/json-api/">JSON API</a>, <a href="http://www.advancedcustomfields.com/">Advanced Custom Fields</a> und <a href="http://wordpress.org/plugins/super-cpt/">Super Custom Page Tyoes</a> auch aus WordPress ein ganz anständiges System machen kann. Jens und Stefan verlieren auch das eine oder andere Wort über <a href="http://grochtdreis.de/weblog/2013/09/13/statische-seitengeneratoren/">statische Seitengeneratoren</a>, wie zum Beispiel <a href="http://jekyllrb.com/">Jekyll</a> oder das in <a href="http://www.fettblog.eu/blog/2013/09/02/using-assemble-io-with-yeoman-ios-webapp-gruntfile/">Grunt integrierbare Assemble</a>. Und wer noch nicht genug Namedropping hat: Mit einer Liste der <a href="http://trends.builtwith.com/cms">weltweiten CMS Anteile</a> werfen wir ein halbes Auge auch noch auf Joomla, Redaxo, Typo 3, Drupal, ModX, Expression Engine, Serendipity, Pico und viele weitere. Ob wir mit diesem Rundumschlag eine schlußendliche Empfehlung abgeben können?</dd>
</dl>
<h3>[01:10:48] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://fronteers.nl/congres/2012/sessions/i-can-smell-your-cms-phil-hawksworth">I can smell your CMS</a></dt>
<dd>Ein zum Thema passender Talk von Phil Hawksworth auf der letztjährigen Fronteers.</dd>
<dt><a href="http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review">Safari iOS7 &#8211; HTML5, Problems und APIs</a></dt>
<dd>Mobile Web Advokat Max Firtman gibt einen sehr ausführlichen Überblick über sämtliche Änderungen des letzten Mobile Safari Updates.</dd>
<dt><a href="http://css-tricks.com/complete-guide-table-element/">Complete Guide to the &lt;table&gt; element</a></dt>
<dd>Apropos ausführlich. Das war auch Chris Coyier bei der wohl ultimativen Übersicht zu den Tabellen.</dd>
<dt><a href="http://www.einfach-fuer-alle.de/artikel/barrierefreie-datentabellen/">Barrierefreie Datentabellen</a></dt>
<dd>Dazu passend: Benimmregeln für die richtige und barrierefreie Verwendung ebenjener.</dd>
<dt><a href="http://css-tricks.com/controlling-css-animations-transitions-javascript/">Controlling CSS Animations/Transitions with JavaScript</a></dt>
<dd>Wieder CSS-Tricks, diesmal mit einem Gastbeitrag zu den Möglichkeiten, wie man über JavaScript CSS Animationen und Transitions steuern kann.</dd>
<dt><a href="http://labs.bigroomstudios.com/libraries/animo-js">animo.js</a></dt>
<dd>Sexy, sexy CSS Animations über eine sehr angenehm zu bedienende JavaScript API.</dd>
<dt><a href="http://getfireshell.com/">Fireshell</a></dt>
<dd>Wem ein Yeoman zu umfangreich und wuchtig ist, kann es mit Todd Mottos Fireshell versuchen. Oder gleich zu Hans&#8216; <a href="https://github.com/drublic/init">Init</a> greifen.</dd>
<dt><a href="http://jackiebalzer.com/color">Sass Color Functions</a></dt>
<dd>Jackie Balzer zeigt, welche Sass Farbfunktionen es gibt. Und das nicht nur in Prosa und Code, sondern mit einem sehr ansehnlichen Tutorial.</dd>
</dl>


Eine spontane Revision mit spontanen Gästen und einem noch spontaneren Twitter.
Eine fünf Minuten vor Start zusammengestoppelte Besetzung aus Matthias Mees,
Jens Grochtdreis, Stefan und Schepp diskuti…

Eine spontane Revision mit spontanen Gästen und einem noch spontaneren Twitter.
Eine fünf Minuten vor Start zusammengestoppelte Besetzung aus Matthias Mees,
Jens Grochtdreis, Stefan und Schepp diskutiert über die Dinge, die dem Webworker
seit jeher graue Haare und Falten bereiten: Content Management Systeme.


[00:00:45] NEWS

JQUERY 1.11 AND 2.1 BETA 1 RELEASED

Die Beta der neuen jQuery ist erschienen, mit einigen interessanten Änderungen,
unter anderem einer neuen, AMD-lastigen Architektur.


SCHAUNOTIZEN

[00:02:07] CONTENT MANAGEMENT SYSTEME

In einer stundenlangenen Plauderei nehmen die furchtlosen Frontend-Vier ein CMS
nach dem anderen unter die Lupe. Wir beleuchten das Für und Wider der
kommerziellen Systeme wie Reddot und Imperia, brechen die eine oder andere Lanze
für ProcessWire und Kirby. Außerdem erklären wir, wie man mit den JSON API,
Advanced Custom Fields und Super Custom Page Tyoes auch aus WordPress ein ganz
anständiges System machen kann. Jens und Stefan verlieren auch das eine oder
andere Wort über statische Seitengeneratoren, wie zum Beispiel Jekyll oder das
in Grunt integrierbare Assemble. Und wer noch nicht genug Namedropping hat: Mit
einer Liste der weltweiten CMS Anteile werfen wir ein halbes Auge auch noch auf
Joomla, Redaxo, Typo 3, Drupal, ModX, Expression Engine, Serendipity, Pico und
viele weitere. Ob wir mit diesem Rundumschlag eine schlußendliche Empfehlung
abgeben können?


[01:10:48] KEINE SCHAUNOTIZEN

I CAN SMELL YOUR CMS

Ein zum Thema passender Talk von Phil Hawksworth auf der letztjährigen
Fronteers.

SAFARI IOS7 – HTML5, PROBLEMS UND APIS

Mobile Web Advokat Max Firtman gibt einen sehr ausführlichen Überblick über
sämtliche Änderungen des letzten Mobile Safari Updates.

COMPLETE GUIDE TO THE <TABLE> ELEMENT

Apropos ausführlich. Das war auch Chris Coyier bei der wohl ultimativen
Übersicht zu den Tabellen.

BARRIEREFREIE DATENTABELLEN

Dazu passend: Benimmregeln für die richtige und barrierefreie Verwendung
ebenjener.

CONTROLLING CSS ANIMATIONS/TRANSITIONS WITH JAVASCRIPT

Wieder CSS-Tricks, diesmal mit einem Gastbeitrag zu den Möglichkeiten, wie man
über JavaScript CSS Animationen und Transitions steuern kann.

ANIMO.JS

Sexy, sexy CSS Animations über eine sehr angenehm zu bedienende JavaScript API.

FIRESHELL

Wem ein Yeoman zu umfangreich und wuchtig ist, kann es mit Todd Mottos Fireshell
versuchen. Oder gleich zu Hans‘ Init greifen.

SASS COLOR FUNCTIONS

Jackie Balzer zeigt, welche Sass Farbfunktionen es gibt. Und das nicht nur in
Prosa und Code, sondern mit einem sehr ansehnlichen Tutorial.

Revision 138: Auf der roten CMS Couch

<p>Aus Mangel an aktuellen Themen geben Peter, Stefan und der Schepp einen Rundumschlag zum Thema Mobile Browser. Wir plaudern fröhlich aus dem Nähkästchen, erzählen von unseren Erfahrungen und präsentieren die irrsinnigsten Browserquirks, die selbst dem IE6 alle Ehre gemacht hätten.</p>
<h3>[00:00:17] News</h3>
<dl>
<dt><a href="http://blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html">Adobe Generator for Photoshop CC</a></dt>
<dd>Echtzeit Assets direkt aus Photoshop in eure App? Geht mit dieser offziellen Erweiterung von Adobe.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:05:00] HTML5 Video mit MP4</dt>
<dd>Schepp erzählt von seinen jüngsten Erfahrungen mit HTML5 Videos auf mobilen Browsern, und welche Browser sich trotz allen Vorkehrungen sich durch einen bestimmten Grund querstellen, wenn es um das Abspielen von MP4 geht. Peter und Stefan raten mehrmals falsch, die Lösung ist umso augenöffnender</dd>
<dt>[00:11:08] Scrolling</dt>
<dd>Schon mal eine Seite mit &#8222;tollen&#8220; Scrollingeffekten auf iOS Safari angesehen? Scrolling blockiert den Render-Thread aus diversen Gründen, Abhilfe schaffen JavaScript Bibliotheken wie <a href="https://github.com/cubiq/iscroll">iScroll</a> und <a href="http://joehewitt.github.io/scrollability/">Scrollability</a>, aber auch nur bedingt, wie Stefan auf Android 2.x geräten schmerzhaft erfahren musste.</dd>
<dt>[00:18:07] Rendering Geschwindigkeit</dt>
<dd>Peter erzählt von seinen Kursen mit HTML5 Padawanen und wie sogar auf Desktop-Browsern keine ordentliche Renderperformance zustande kommt (<a href="http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode">Continuous Painting Mode</a> ist des Rätsels Lösung). Schepp empfiehlt CSS Transforms statt herkömmlichen Positionierungsmöglichkeiten, wenn es um flüssige Animationen geht und predigt und erklärt Browser-Verständnis, wie in seinem letzten Artikel in der <a href="http://screengui.de/magazin/magazin-archiv/detail/big-brother.html">Screenguide</a>.</dd>
<dt>[00:28:30] Debugging</dt>
<dd>Während man sich in den mobilen Urzeiten meist mit dem alert()-Debugger Abhilfe schaffen musste, gibt es jetzt mittlerweile ein paar sehr gute Tools, die einem dabei helfen. <a href="http://html.adobe.com/edge/inspect/>Edge Inspect</a> ist ganz brauchbar, trotz der zum Teil klapprigen Adobe Server. Alternativ dazu gibt es aber auch Weinre oder die Möglichkeit, sich mittels <a href="http://andydavies.me/blog/2013/08/19/creating-page-load-waterfalls-for-older-mobile-devices/">Command Line Tools Wasserfalldiagramme</a> zu erstellen und im Web zu betrachten. Zu guter Letzt stellen wir noch das <a href="http://www.iunbug.com/mihtool">MIHTool</a> vor.</dd>
<dt>[00:38:46] Mobile Safari, IE10 und die Android Eigenheiten</dt>
<dd>Wer aktuell für den iOS Safari entwickelt muss sich auf diverse IE6 und WWII Vergleiche einstellen. Wir plaudern über unsere Erfahrungen mit den verschiedenen Plattformen und deren Standardbrowsern und kommen zum Schluß, dass wir nur noch von IE6en umgeben sind. Außerdem erwähnen wir clevere Hacks, wie Peters <a href="http://www.peterkroener.de/indexed-db-die-neue-html5-datenbank-im-browser-teil-2-browsermacken-tools-und-polyfills/">IndexDB Polyfill</a>, erwähnen das <a href="https://github.com/ftlabs/fastclick">300ms Klick Delay</a> und welche Probleme man damit hat, und verdammen neue Browser, die selbst die einfachsten Viewport Anweisungen nicht ohne Extraeinladungen verstehen.</dd>
<dt>[01:08:57] Audio</dt>
<dd>Die Klammer schließt sich. War Video schon ein gebrochenes Ding, geht es mit HTML5 Audio weiter. Stefan erzählt von der Ein-Klick-Regel und erwähnt Soundsprites, und wir geben Hinweise auf Audio-Bibliotheken wie <a href="http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library">Howler</a>, <a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager2</a> und <a href="https://github.com/ddprrt/roadie.js">Roadie.js</a></dd>
<dt>[01:15:04] Get Firefox</dt>
<dd>Zu guter Letzt brechen wir noch eine Lanze für <a href="http://getfirefox.com">Firefox</a>, dem mobilen Browser der im Moment wohl alles richtig zu machen scheint.</dd>
</dl>
<h3>[01:16:55] Glücksrad</h3>
<dl>
<dt><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-template-element">Das Template Element</a></dt>
<dd>Schepp erklärt uns das &lt;template&gt;-Element, mit dem wir kleine HTML Schnippsel für die spätere Verwerndung zwischenlagern können.</dd>
</dl>
<h3>[01:21:00] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.html5rocks.com/en/tutorials/canvas/inspection/">Canvas Inspection With Dev Tools</a></dt>
<dd>Der Titel sagt alles. Das geht jetzt, und ist echt prima.</dd>
<dt><a href="https://border-none.net/">border:none 2013</a></dt>
<dd>Apropos Mobile Devices. Die border:none aus dem Hause Thiele bringt zum Open Device Lab Day auch noch eine Minikonferenz mit hochkarätigem Line-Up und starkem Mobileinschlag.</dd>
<dt><a href="http://www.opensourcepress.de/de/produkte/ECMAScript-5/10365/978-3-95539-063-1">ECMAScript 5</a></dt>
<dd>Peters aktuellstes Schriftstück aus dem Open Source Press Verlag könnt ihr hier finden.</dd>
</dl>


Aus Mangel an aktuellen Themen geben Peter, Stefan und der Schepp einen
Rundumschlag zum Thema Mobile Browser. Wir plaudern fröhlich aus dem
Nähkästchen, erzählen von unseren Erfahrungen und präsentie…

Aus Mangel an aktuellen Themen geben Peter, Stefan und der Schepp einen
Rundumschlag zum Thema Mobile Browser. Wir plaudern fröhlich aus dem
Nähkästchen, erzählen von unseren Erfahrungen und präsentieren die irrsinnigsten
Browserquirks, die selbst dem IE6 alle Ehre gemacht hätten.


[00:00:17] NEWS

ADOBE GENERATOR FOR PHOTOSHOP CC

Echtzeit Assets direkt aus Photoshop in eure App? Geht mit dieser offziellen
Erweiterung von Adobe.


SCHAUNOTIZEN

[00:05:00] HTML5 VIDEO MIT MP4

Schepp erzählt von seinen jüngsten Erfahrungen mit HTML5 Videos auf mobilen
Browsern, und welche Browser sich trotz allen Vorkehrungen sich durch einen
bestimmten Grund querstellen, wenn es um das Abspielen von MP4 geht. Peter und
Stefan raten mehrmals falsch, die Lösung ist umso augenöffnender

[00:11:08] SCROLLING

Schon mal eine Seite mit „tollen“ Scrollingeffekten auf iOS Safari angesehen?
Scrolling blockiert den Render-Thread aus diversen Gründen, Abhilfe schaffen
JavaScript Bibliotheken wie iScroll und Scrollability, aber auch nur bedingt,
wie Stefan auf Android 2.x geräten schmerzhaft erfahren musste.

[00:18:07] RENDERING GESCHWINDIGKEIT

Peter erzählt von seinen Kursen mit HTML5 Padawanen und wie sogar auf
Desktop-Browsern keine ordentliche Renderperformance zustande kommt (Continuous
Painting Mode ist des Rätsels Lösung). Schepp empfiehlt CSS Transforms statt
herkömmlichen Positionierungsmöglichkeiten, wenn es um flüssige Animationen geht
und predigt und erklärt Browser-Verständnis, wie in seinem letzten Artikel in
der Screenguide.

[00:28:30] DEBUGGING

Während man sich in den mobilen Urzeiten meist mit dem alert()-Debugger Abhilfe
schaffen musste, gibt es jetzt mittlerweile ein paar sehr gute Tools, die einem
dabei helfen. Command Line Tools Wasserfalldiagramme zu erstellen und im Web zu
betrachten. Zu guter Letzt stellen wir noch das MIHTool vor.

[00:38:46] MOBILE SAFARI, IE10 UND DIE ANDROID EIGENHEITEN

Wer aktuell für den iOS Safari entwickelt muss sich auf diverse IE6 und WWII
Vergleiche einstellen. Wir plaudern über unsere Erfahrungen mit den
verschiedenen Plattformen und deren Standardbrowsern und kommen zum Schluß, dass
wir nur noch von IE6en umgeben sind. Außerdem erwähnen wir clevere Hacks, wie
Peters IndexDB Polyfill, erwähnen das 300ms Klick Delay und welche Probleme man
damit hat, und verdammen neue Browser, die selbst die einfachsten Viewport
Anweisungen nicht ohne Extraeinladungen verstehen.

[01:08:57] AUDIO

Die Klammer schließt sich. War Video schon ein gebrochenes Ding, geht es mit
HTML5 Audio weiter. Stefan erzählt von der Ein-Klick-Regel und erwähnt
Soundsprites, und wir geben Hinweise auf Audio-Bibliotheken wie Howler,
SoundManager2 und Roadie.js

[01:15:04] GET FIREFOX

Zu guter Letzt brechen wir noch eine Lanze für Firefox, dem mobilen Browser der
im Moment wohl alles richtig zu machen scheint.


[01:16:55] GLÜCKSRAD

DAS TEMPLATE ELEMENT

Schepp erklärt uns das <template>-Element, mit dem wir kleine HTML Schnippsel
für die spätere Verwerndung zwischenlagern können.


[01:21:00] KEINE SCHAUNOTIZEN

CANVAS INSPECTION WITH DEV TOOLS

Der Titel sagt alles. Das geht jetzt, und ist echt prima.

BORDER:NONE 2013

Apropos Mobile Devices. Die border:none aus dem Hause Thiele bringt zum Open
Device Lab Day auch noch eine Minikonferenz mit hochkarätigem Line-Up und
starkem Mobileinschlag.

ECMASCRIPT 5

Peters aktuellstes Schriftstück aus dem Open Source Press Verlag könnt ihr hier
finden.

Revision 137: Mobile Browser Wonderland

<p>Zur Revision 136 war <a href="http://www.stn.my/">Stefan Nitzsche</a> zu Gast, der mit uns ein wenig über seine Projekte und seinen Workflow redete.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:45] <a href="http://smashingconf.com/">Smashing Conference</a></dt>
<dd>Stefan war gerade am Tag der Aufnahme bei der Smashing Conference zu Gast und erzählt von den interessanten Vorträgen. Unter anderem hat ihm der Talk von <a href="https://twitter.com/lukew">Luke Wroblewski</a> sehr gut gefallen, der das Thema Mobile Web weiter geführt hat und über eine Zukunft mit mehreren Devices für jede Person spricht und wie uns diese beeinflusst. Dazu sprechen wir unter anderem über <a href="http://blogs.windows.com/ie/b/ie/archive/2013/07/17/the-companion-web-the-internet-and-how-we-use-it-is-evolving.aspx">Microsofts Companion Web</a> und unsere Eindrücke zum Thema.</dd>
<dt>[00:22:41] Design-Workflow</dt>
<dd>Heutzutage ist Design fürs Web nicht einfach nur eben mal eine Photoshop-Datei. Oft genug haben wir über Design um Browser gehört und gesprochen. Wie aber sieht die Realität aus? Und wie gehen Experten wie Stefan die Sache an? Dabei fiel dann auch der Name <a href="http://thedoublethink.com/2009/08/tufte%E2%80%99s-principles-for-visualizing-quantitative-information/">Edward Tufte ob der von ihm geprägten &#8222;Data-Ink Ratio&#8220;</a>.</dd>
</dl>
<h3>[00:46:41] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/audreyr/favicon-cheat-sheet">Favicon Cheat Sheet</a></dt>
<dd>Viele Tips und Tricks, wie man Favicons und Apple-Touch-Icons baut.</dd>
<dt><a href="http://lab.ejci.net/favico.js/">favico.js</a></dt>
<dd>favico.js ändert das Favicon client-seitig dynamisch. Ideal für Notifications.</dd>
<dt><a href="http://blog.teamtreehouse.com/implementing-native-drag-and-drop">Implementing Native Drag and Drop</a></dt>
<dd>Ein Tutorial, welches beschreibt, wie man cross-browser natives Drag and Drop verwendet.</dd>
<dt><a href="http://devsmeetup.de/">Developer Meetup in Freiburg</a></dt>
<dd>Am 27. September veranstaltet Hans wieder ein Developer Meetup in Freiburg. Dieses mal zum Thema &#8222;Backend &#8211; Frontend &#8211; Happy End?&#8220;.</dd>
</dl>


Zur Revision 136 war Stefan Nitzsche zu Gast, der mit uns ein wenig über seine
Projekte und seinen Workflow redete.


SCHAUNOTIZEN

[00:01:45] SMASHING CONFERENCE

Stefan war gerade am Tag der Aufnahm…

Zur Revision 136 war Stefan Nitzsche zu Gast, der mit uns ein wenig über seine
Projekte und seinen Workflow redete.


SCHAUNOTIZEN

[00:01:45] SMASHING CONFERENCE

Stefan war gerade am Tag der Aufnahme bei der Smashing Conference zu Gast und
erzählt von den interessanten Vorträgen. Unter anderem hat ihm der Talk von Luke
Wroblewski sehr gut gefallen, der das Thema Mobile Web weiter geführt hat und
über eine Zukunft mit mehreren Devices für jede Person spricht und wie uns diese
beeinflusst. Dazu sprechen wir unter anderem über Microsofts Companion Web und
unsere Eindrücke zum Thema.

[00:22:41] DESIGN-WORKFLOW

Heutzutage ist Design fürs Web nicht einfach nur eben mal eine Photoshop-Datei.
Oft genug haben wir über Design um Browser gehört und gesprochen. Wie aber sieht
die Realität aus? Und wie gehen Experten wie Stefan die Sache an? Dabei fiel
dann auch der Name Edward Tufte ob der von ihm geprägten „Data-Ink Ratio“.


[00:46:41] KEINE SCHAUNOTIZEN

FAVICON CHEAT SHEET

Viele Tips und Tricks, wie man Favicons und Apple-Touch-Icons baut.

FAVICO.JS

favico.js ändert das Favicon client-seitig dynamisch. Ideal für Notifications.

IMPLEMENTING NATIVE DRAG AND DROP

Ein Tutorial, welches beschreibt, wie man cross-browser natives Drag and Drop
verwendet.

DEVELOPER MEETUP IN FREIBURG

Am 27. September veranstaltet Hans wieder ein Developer Meetup in Freiburg.
Dieses mal zum Thema „Backend – Frontend – Happy End?“.

Revision 136: Smashing Conference und ein moderner Design-Workflow

<p>In der heutigen Revision holen sich Schepp und Stefan <a href="http://twitter.com/yellowled">Matthias Mees aus dem hohen Norden</a> vors Mikro, um über Progressive Enhancement und Twitters Paketmanager Bower zu quatschen.</p>
<h3>[00:01:36] News</h3>
<dl>
<dt><a href="https://stripe.com/global#germany">Stripe</a></dt>
<dd>Der Online Payment Provider Stripe ist jetzt auch in Deutschland verfügbar.</dd>
<dt><a href="http://my.opera.com/desktopteam/blog/2013/08/27/opera-16">Opera 16 released</a></dt>
<dd>Nachdem durch den Umstieg auf Blink Opera kurzzeitig seine Geolocation-Fähigkeit verloren hat, ist mit Version 16 nun wieder alles komplett.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:02:41] <a href="http://danielmall.com/articles/progressive-enhancement/">Progressive Enhancement &#8211; Still alive and kicking.</a></dt>
<dd>Progressive Enhancement wird von der Community in der letzten Zeit wieder ordentlich heiß diskutiert und lässt nach <a href="http://jakearchibald.com/2013/progressive-enhancement-still-important/">Jake Archibalds</a> Post vor ein paar Monaten auch einige andere Stimmen zu Wort kommen. Wie Daniel Mall, der mit seinem Tumblr <a href="http://sighjavascript.tumblr.com/">Sigh, JavaScript</a> eine virtuelle Hall of Shame für Websites, die so ohne JavaScript mal gar nicht funktionieren, eröffnet hat. Wir plaudern über über unsere Erfahrungen mit deaktiviertem JavaScript und fragen uns, ob die Fragestellung nach Sinn oder Unsinn von Progressive Enhancement nicht eher eine Frage der Entwicklungsqualität sein sollte.</dd>
<dt>[00:19:00] <a href="http://yellowled.de/archiv/46/Asset-Verwaltung-mit-Bower.html">Bower &#8211; A package manager for the web</a></dt>
<dd>Seit einiger Zeit ist Twitters <a href="http://bower.io/">Bower</a> schon veröffentlicht, und durch Tools wie <a href="http://yeoman.io">Yeoman</a> schon in den Arbeitsablauf einiger Webentwickler fest integriert, ohne dass man es unbedingt mitbekommen hat. Von Matthias&#8216; Blogbeitrag ausgehend, erklären wir die Funktionsweise des <a href="http://sindresorhus.com/bower-components/">Paketmanagers</a>, wo die großen Stärken liegen und worauf Nutzer achten sollen, wenn es in ihren Workflow integriert werden soll.</dd>
</dl>
<h3>[00:44:30] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://github.com/jpillora/xdomain">XDomain</a></dt>
<dd>Cross Origin Resource Sharing leicht gemacht. Diese JavaScript Bibliothek kümmert sich um all eure CORS Anliegen. Prädikat: cheffig. </dd>
<dt><a href="http://tympanus.net/codrops/2013/08/28/transitions-for-off-canvas-navigations/">Transitions for Off-Canvas Navigations</a></dt>
<dd>Dass Off-Canvas Navigationen nicht immer lahm wie bei der Facebook-App aussehen müssen, zeigen die Leute bei Typmanus mit diesem gelungenen Demo.</dd>
<dt><a href="http://css-tricks.com/html5-progress-element/">HTML5 Progress Element</a></dt>
<dd>Pankaj Parashar zeigt in seinem Gastartikel bei CSS Tricks, in welchem Status das HTML5 Progress Element ist, und was man mittlerweile alles damit anstellen kann.</dd>
<dt><a href="http://anfragenausderhoelle.tumblr.com/">Anfragen aus der Hölle</a></dt>
<dd>Marc Hinse made our day mit unser aller Lieblingstumblr rund um Kundenanfragen und Sonderwünsche. Zum scheppig lachen!</dd>
</dl>


In der heutigen Revision holen sich Schepp und Stefan Matthias Mees aus dem
hohen Norden vors Mikro, um über Progressive Enhancement und Twitters
Paketmanager Bower zu quatschen.


[00:01:36] NEWS

ST…

In der heutigen Revision holen sich Schepp und Stefan Matthias Mees aus dem
hohen Norden vors Mikro, um über Progressive Enhancement und Twitters
Paketmanager Bower zu quatschen.


[00:01:36] NEWS

STRIPE

Der Online Payment Provider Stripe ist jetzt auch in Deutschland verfügbar.

OPERA 16 RELEASED

Nachdem durch den Umstieg auf Blink Opera kurzzeitig seine Geolocation-Fähigkeit
verloren hat, ist mit Version 16 nun wieder alles komplett.


SCHAUNOTIZEN

[00:02:41] PROGRESSIVE ENHANCEMENT – STILL ALIVE AND KICKING.

Progressive Enhancement wird von der Community in der letzten Zeit wieder
ordentlich heiß diskutiert und lässt nach Jake Archibalds Post vor ein paar
Monaten auch einige andere Stimmen zu Wort kommen. Wie Daniel Mall, der mit
seinem Tumblr Sigh, JavaScript eine virtuelle Hall of Shame für Websites, die so
ohne JavaScript mal gar nicht funktionieren, eröffnet hat. Wir plaudern über
über unsere Erfahrungen mit deaktiviertem JavaScript und fragen uns, ob die
Fragestellung nach Sinn oder Unsinn von Progressive Enhancement nicht eher eine
Frage der Entwicklungsqualität sein sollte.

[00:19:00] BOWER – A PACKAGE MANAGER FOR THE WEB

Seit einiger Zeit ist Twitters Bower schon veröffentlicht, und durch Tools wie
Yeoman schon in den Arbeitsablauf einiger Webentwickler fest integriert, ohne
dass man es unbedingt mitbekommen hat. Von Matthias‘ Blogbeitrag ausgehend,
erklären wir die Funktionsweise des Paketmanagers, wo die großen Stärken liegen
und worauf Nutzer achten sollen, wenn es in ihren Workflow integriert werden
soll.


[00:44:30] KEINE SCHAUNOTIZEN

XDOMAIN

Cross Origin Resource Sharing leicht gemacht. Diese JavaScript Bibliothek
kümmert sich um all eure CORS Anliegen. Prädikat: cheffig.

TRANSITIONS FOR OFF-CANVAS NAVIGATIONS

Dass Off-Canvas Navigationen nicht immer lahm wie bei der Facebook-App aussehen
müssen, zeigen die Leute bei Typmanus mit diesem gelungenen Demo.

HTML5 PROGRESS ELEMENT

Pankaj Parashar zeigt in seinem Gastartikel bei CSS Tricks, in welchem Status
das HTML5 Progress Element ist, und was man mittlerweile alles damit anstellen
kann.

ANFRAGEN AUS DER HÖLLE

Marc Hinse made our day mit unser aller Lieblingstumblr rund um Kundenanfragen
und Sonderwünsche. Zum scheppig lachen!

Revision 135: Progressive Enhancement, Sigh JavaScript und Bower

<p>Trotz angespannter Themenlage griffen Hans, Schepp und Peter zu den Mikrofonen. Letzter verpennte in Folge das Schreiben der Schaunotizen, was leichte Verzögerungen im Betriebsablauf der weiteren Veröffentlichung nach sich zog.</p>
<h3>[00:00:13] News</h3>
<dl>
<dt><a href="http://yeoman.io/blog/hello-1.0.html">Yeoman 1.0</a></dt>
<dd>Hurra, hurra, die 1.0 ist da.</dd>
<dt><a href="https://github.com/twbs/bootstrap/releases">Bootstrap 3.0</a></dt>
<dd>Aller guten Dinge sind 3.0.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:36] <a href="http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/">Heydon Pickering: Semantic CSS With Intelligent Selectors</a></dt>
<dd>Dass wir alle den Artikel nicht gelesen haben, ist uns Anlass genug, um einfach mal so über CSS zu reden. Hans erzählt von seinem Traum-CSS und hat Zorn auf Styling im Bootstrap-Style, wo Design effektiv per HTML-Klassen-Vergabe umgesetzt wird. Die Komposition von Styles per Extends im Präprozessor-Code scheint die bessere Alternative. Trotzdem bringt Hans für Präprozessor-Zweifler Verständnis auf&nbsp;&ndash; Peter nicht ganz so sehr. In Anschluss fragen wir uns, in welcher Reihenfolge man CSS und SASS lernen sollte und ob es je einen reinen CSS-Relaunch ohne HTML-Änderungen gegeben hat (Spoiler Alert: natürlich nicht).</p>
</dd>
</dl>
<h3>[00:38:20] CSS3-Glücksrad</h3>
<dl>
<dt><a href="http://www.w3.org/TR/css3-gcpm/">CSS Generated Content for Paged Media</a></dt>
<dd>Eine Papiertiger-Spezifikation verleitet uns zum Nachdenken, wie und ob man denn Leaders mit CSS-Bordmitteln zurechthacken könnte. Peter meint mal gehört zu haben, dass <a href="http://www.princexml.com/">PrinceXML</a> guten Support für Print-Foo hat.</dd>
<dt><a href="http://www.w3.org/TR/css3-transforms/#transform-functions">Der Matrix-Filter der CSS3-Transformations-Spezifikationen</a></dt>
<dd>Wir stellen fest, dass sich unser Verhältnis zur Mathematik nicht nur dank Transformationsmatrizen stark entspannt hat und lobpreisen <a href="http://www.youtube.com/watch?v=ONN3jBly364">Steven Wittens Mathe-Talk von der Full Frontal 2012</a>.</dd>
</dl>
<h3>[00:47:41] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.html2pdf.it/">html2pdf.it</a></dt>
<dd>Baut PDFs aus Webseiten (Print-CSS vorausgesetzt).</dd>
<dt><a href="http://ricostacruz.com/nprogress/">NProgress</a></dt>
<dd>Hippe Fortschrittsbalken im Youtube-Stil.</dd>
<dt><a href="https://gist.github.com/ebidel/6314025">Web Components Resources</a></dt>
<dd>Massenhaft Links zum Thema Web Components.</dd>
<dt><a href="http://www.heydonworks.com/article/font-hacking">Font Hacking</a></dt>
<dd>Älterer, aber guter Artikel voller Tricks rund um Webfonts.</dd>
<dt><a href="http://tridiv.com/">Tridiv</a></dt>
<dd>CSS-3D-Editor.</dd>
<dt><a href="http://2013.playandmake.com/">PLAY &amp; MAKE 20013</a></dt>
<dd>Unsere allwöchentliche Event-Empfehlung.</dd>
</dl>


Trotz angespannter Themenlage griffen Hans, Schepp und Peter zu den Mikrofonen.
Letzter verpennte in Folge das Schreiben der Schaunotizen, was leichte
Verzögerungen im Betriebsablauf der weiteren Verö…

Trotz angespannter Themenlage griffen Hans, Schepp und Peter zu den Mikrofonen.
Letzter verpennte in Folge das Schreiben der Schaunotizen, was leichte
Verzögerungen im Betriebsablauf der weiteren Veröffentlichung nach sich zog.


[00:00:13] NEWS

YEOMAN 1.0

Hurra, hurra, die 1.0 ist da.

BOOTSTRAP 3.0

Aller guten Dinge sind 3.0.


SCHAUNOTIZEN

[00:00:36] HEYDON PICKERING: SEMANTIC CSS WITH INTELLIGENT SELECTORS

Dass wir alle den Artikel nicht gelesen haben, ist uns Anlass genug, um einfach
mal so über CSS zu reden. Hans erzählt von seinem Traum-CSS und hat Zorn auf
Styling im Bootstrap-Style, wo Design effektiv per HTML-Klassen-Vergabe
umgesetzt wird. Die Komposition von Styles per Extends im Präprozessor-Code
scheint die bessere Alternative. Trotzdem bringt Hans für Präprozessor-Zweifler
Verständnis auf – Peter nicht ganz so sehr. In Anschluss fragen wir uns, in
welcher Reihenfolge man CSS und SASS lernen sollte und ob es je einen reinen
CSS-Relaunch ohne HTML-Änderungen gegeben hat (Spoiler Alert: natürlich nicht).




[00:38:20] CSS3-GLÜCKSRAD

CSS GENERATED CONTENT FOR PAGED MEDIA

Eine Papiertiger-Spezifikation verleitet uns zum Nachdenken, wie und ob man denn
Leaders mit CSS-Bordmitteln zurechthacken könnte. Peter meint mal gehört zu
haben, dass PrinceXML guten Support für Print-Foo hat.

DER MATRIX-FILTER DER CSS3-TRANSFORMATIONS-SPEZIFIKATIONEN

Wir stellen fest, dass sich unser Verhältnis zur Mathematik nicht nur dank
Transformationsmatrizen stark entspannt hat und lobpreisen Steven Wittens
Mathe-Talk von der Full Frontal 2012.


[00:47:41] KEINE SCHAUNOTIZEN

HTML2PDF.IT

Baut PDFs aus Webseiten (Print-CSS vorausgesetzt).

NPROGRESS

Hippe Fortschrittsbalken im Youtube-Stil.

WEB COMPONENTS RESOURCES

Massenhaft Links zum Thema Web Components.

FONT HACKING

Älterer, aber guter Artikel voller Tricks rund um Webfonts.

TRIDIV

CSS-3D-Editor.

PLAY & MAKE 20013

Unsere allwöchentliche Event-Empfehlung.

Revision 134: News, CSS, Links

<p>In Abwesenheit der restlichen Stammbesetzung holt sich Stefan die beiden Gäste <a href="http://helloanselm.com/">Anselm Hannemann</a> und <a href="http://grochtdreis.de/">Jens &#8222;Flocke&#8220; Grochtdreis</a> ins virtuelle Studio. Bei diesem hochkarätigen Aufgebot an Mitsprechern liegen die Hauptpunkte der heutigen Sendung direkt auf dem Tisch: Responsive Webdesign in all seinen Formen. In einer angeregten Diskussion sprechen wir über neue Prozesse für Responsive Webdesign in Agenturen und kommen zu einer ausführlichen Betrachtung von CSS- und Grid-Frameworks. Viel Spaß!</p>
<h3>[00:00:20] News</h3>
<dl>
<dt><a href="https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/">Webkit unterstützt das srcset Attribut</a></dt>
<dd>und legt damit die ersten Pflastersteine in Richtung Responsive Images</dd>
<dt><a href="http://www.opera.com/developer">Opera Developer</a></dt>
<dd> nennt sich die nächtlich aktualisierte Entwicklerversion des norwegischen Browsers. Der neue Channel wurde vor kurzem geöffnet und bietet Entwicklern eine erste Vorschau auf kommende Dinge.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:00] <a href="http://lynn.ru/examples/svg/en.html">Robustes PNG Fallback für SVG</a></dt>
<dd>SVGs sind toll und die Möglichkeiten scheinen schier unbegrenzt. Zu dumm dass ältere Browser nichts damit anfangen können. Alexey Ten zeigt in seinem Artikel, wie man alte Browsereigenheiten ausnutzen kann um aus Browserfixes eine Technik zu entwickeln, die äußerst robust und plattformübergreifend ein PNG als Fallbäck lädt. Eine Technik, die unter anderem auch von <a href="http://css-tricks.com/svg-fallbacks/">Chris Coyier</a> äußerst genau analysiert wurde. Wir diskutieren über diesen und andere Hacks sowie deren Zukunftssicherheit, zeigen Alternativen wie <a href="http://icomoon.io/app/">Icon-Fonts</a> und finden die Sache trotz der einen oder anderen Schwierigkeit toll.</dd>
<dt>[00:14:00] <a href="http://www.mobile-zeitgeist.com/2013/08/07/warum-responsive-webdesign-schrott-ist/">Warum Responsive Web-Design Schrott ist</a></dt>
<dd>Was für eine Woche! Patrick Voelcker hat mit seinem Artikel über den Unsinn von Responsive Webdesign für die heißeste Diskussion des Sommers im deutschsprachigen Webraum gesorgt und nicht nur <a href="http://www.mademyday.de/responsive-webdesign-ist-kein-schrott.html">Marc Hinse</a> oder <a href="http://grochtdreis.de/weblog/2013/08/12/responsive-webdesign-ist-die-zukunft/">Jens selbst</a> mit an- und aufgeregten Gegenantworten vor die Schirme geholt. Wir erklären die eigentlichen Inhalte des Artikels und erzählen, warum &#8222;Warum Responsive Webdesign Schrott ist&#8220; Schrott ist. Denn immerhin geht&#8217;s nicht nur um die Technik, sondern auch um Prozesse, Abläufe und halt eine ganz neue Herangehensweise.</dd>
<dt>[00:26:00] <a href="http://grochtdreis.de/weblog/2013/08/14/responsive-webdesign-benoetigt-kein-framework/">Responsive Webdesign braucht kein Framework.</a></dt>
<dd>Oder doch? Bei all den neuen Vorgehensweisen gibt es in der Responsive Elite etliche <a href="http://www.netmagazine.com/advertorial/responsive-web-design-6-experts-4-questions">Stimmen gegen den Einsatz von Frameworks wie Bootstrap oder Foundation</a>. Stefan erklärt, wie diese Frameworks doch sinnvoll eingesetzt werden können und welche Vorteile sich für Entwickler wie Designer dadurch ergeben.</dd>
<dt>[00:36:20] <a href="http://grochtdreis.de/weblog/2013/08/19/missverstaendnis-framework/">Missverständnis Framework</a></dt>
<dd>Allerdings meint Stefan auch, dass trotz aller Benefits für Entwickler und Designer man irgendwann an die Grenzen eines Frameworks stößt, zumindest bei Bootstrap. Jens bricht einige Lanzen für das deutsche CSS Framework <a href="http://www.yaml.de/">YAML</a>, wir betrachten den Sinn und Unsinn von <a href="http://inuitcss.com/">Harry Roberts inuit.css</a> im Detail, und sprechen über die Erfolgsfaktoren von <a href="http://getbootstrap.com/">Bootstrap</a> und <a href="http://foundation.zurb.com/">Foundation</a>. Schlußendlich halten wir es wie Framework Experte Mark Otto: Ein Framework ist immer nur ein Anfang.</dd>
</dl>
<h3>[00:57:20] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://www.speedawarenessmonth.com/">Speed Awareness Month.</a></dt>
<dd>Auch wenn er schon fast vorüber ist, ist der August immer noch Speed Awareness Month. Diese Website versorgt euch mit Aritkeln und Beiträgen zum Thema Webgeschwindigkeit am Client und am Server.</dd>
<dt><a href="http://wpds-zurich.eventbrite.com/">Web Platform Doc Sprint Zürich.</a></dt>
<dd>Diese Woche in Zürich und am Mittwoch noch nichts vor? Kurz vor der Schweizer Frontendconf findet in der Zentralgasse 37 der Web Platform Doc Sprint statt. Schaut vorbei und unterstützt die verschiedenen Teams beim Aufpeppeln der gemeinschaftlichen Online-Dokumentation. Von der Working Draft Crew sind Hans und Rodney mit am Start.</dd>
<dt><a href="http://helloanselm.com/2013/handle-deprecated-unmaintained-repositories/">Handle deprecated and unmaintained repositories.</a></dt>
<dd>Ist das einstige Pet Project und jQuery Plugin mittlerweile am Verstauben? Das ehemalige Problem bereits perfekt gelöst oder irgendein Megaframework hat eine prominentere Lösung dafür? Gast Anselm gibt in seinem Artikel Tipps und Ratschläge, wie man mit veralteten und schlafengelegten Open Source Projekten verfahren soll.</dd>
<dt><a href="https://github.com/drublic/less-mixins">LESS Mixins.</a></dt>
<dd>Und zu guter Letzt hat Hans seine populären Sass Mixins auch nach LESS portiert. Take what you need!</dd>
</dl>


In Abwesenheit der restlichen Stammbesetzung holt sich Stefan die beiden Gäste
Anselm Hannemann und Jens „Flocke“ Grochtdreis ins virtuelle Studio. Bei diesem
hochkarätigen Aufgebot an Mitsprechern li…

In Abwesenheit der restlichen Stammbesetzung holt sich Stefan die beiden Gäste
Anselm Hannemann und Jens „Flocke“ Grochtdreis ins virtuelle Studio. Bei diesem
hochkarätigen Aufgebot an Mitsprechern liegen die Hauptpunkte der heutigen
Sendung direkt auf dem Tisch: Responsive Webdesign in all seinen Formen. In
einer angeregten Diskussion sprechen wir über neue Prozesse für Responsive
Webdesign in Agenturen und kommen zu einer ausführlichen Betrachtung von CSS-
und Grid-Frameworks. Viel Spaß!


[00:00:20] NEWS

WEBKIT UNTERSTÜTZT DAS SRCSET ATTRIBUT

und legt damit die ersten Pflastersteine in Richtung Responsive Images

OPERA DEVELOPER

nennt sich die nächtlich aktualisierte Entwicklerversion des norwegischen
Browsers. Der neue Channel wurde vor kurzem geöffnet und bietet Entwicklern eine
erste Vorschau auf kommende Dinge.


SCHAUNOTIZEN

[00:01:00] ROBUSTES PNG FALLBACK FÜR SVG

SVGs sind toll und die Möglichkeiten scheinen schier unbegrenzt. Zu dumm dass
ältere Browser nichts damit anfangen können. Alexey Ten zeigt in seinem Artikel,
wie man alte Browsereigenheiten ausnutzen kann um aus Browserfixes eine Technik
zu entwickeln, die äußerst robust und plattformübergreifend ein PNG als Fallbäck
lädt. Eine Technik, die unter anderem auch von Chris Coyier äußerst genau
analysiert wurde. Wir diskutieren über diesen und andere Hacks sowie deren
Zukunftssicherheit, zeigen Alternativen wie Icon-Fonts und finden die Sache
trotz der einen oder anderen Schwierigkeit toll.

[00:14:00] WARUM RESPONSIVE WEB-DESIGN SCHROTT IST

Was für eine Woche! Patrick Voelcker hat mit seinem Artikel über den Unsinn von
Responsive Webdesign für die heißeste Diskussion des Sommers im
deutschsprachigen Webraum gesorgt und nicht nur Marc Hinse oder Jens selbst mit
an- und aufgeregten Gegenantworten vor die Schirme geholt. Wir erklären die
eigentlichen Inhalte des Artikels und erzählen, warum „Warum Responsive
Webdesign Schrott ist“ Schrott ist. Denn immerhin geht’s nicht nur um die
Technik, sondern auch um Prozesse, Abläufe und halt eine ganz neue
Herangehensweise.

[00:26:00] RESPONSIVE WEBDESIGN BRAUCHT KEIN FRAMEWORK.

Oder doch? Bei all den neuen Vorgehensweisen gibt es in der Responsive Elite
etliche Stimmen gegen den Einsatz von Frameworks wie Bootstrap oder Foundation.
Stefan erklärt, wie diese Frameworks doch sinnvoll eingesetzt werden können und
welche Vorteile sich für Entwickler wie Designer dadurch ergeben.

[00:36:20] MISSVERSTÄNDNIS FRAMEWORK

Allerdings meint Stefan auch, dass trotz aller Benefits für Entwickler und
Designer man irgendwann an die Grenzen eines Frameworks stößt, zumindest bei
Bootstrap. Jens bricht einige Lanzen für das deutsche CSS Framework YAML, wir
betrachten den Sinn und Unsinn von Harry Roberts inuit.css im Detail, und
sprechen über die Erfolgsfaktoren von Bootstrap und Foundation. Schlußendlich
halten wir es wie Framework Experte Mark Otto: Ein Framework ist immer nur ein
Anfang.


[00:57:20] KEINE SCHAUNOTIZEN

SPEED AWARENESS MONTH.

Auch wenn er schon fast vorüber ist, ist der August immer noch Speed Awareness
Month. Diese Website versorgt euch mit Aritkeln und Beiträgen zum Thema
Webgeschwindigkeit am Client und am Server.

WEB PLATFORM DOC SPRINT ZÜRICH.

Diese Woche in Zürich und am Mittwoch noch nichts vor? Kurz vor der Schweizer
Frontendconf findet in der Zentralgasse 37 der Web Platform Doc Sprint statt.
Schaut vorbei und unterstützt die verschiedenen Teams beim Aufpeppeln der
gemeinschaftlichen Online-Dokumentation. Von der Working Draft Crew sind Hans
und Rodney mit am Start.

HANDLE DEPRECATED AND UNMAINTAINED REPOSITORIES.

Ist das einstige Pet Project und jQuery Plugin mittlerweile am Verstauben? Das
ehemalige Problem bereits perfekt gelöst oder irgendein Megaframework hat eine
prominentere Lösung dafür? Gast Anselm gibt in seinem Artikel Tipps und
Ratschläge, wie man mit veralteten und schlafengelegten Open Source Projekten
verfahren soll.

LESS MIXINS.

Und zu guter Letzt hat Hans seine populären Sass Mixins auch nach LESS portiert.
Take what you need!

Revision 133: Responsive Webdesign und CSS Frameworks

<p>Schepp und Rodney luden sich <a href="https://twitter.com/asciidisco">Sebastian Golasch</a> ein, um ein wenig was über sein neues Projekt <a href="http://dalekjs.com/">DalekJS</a> zu erfahren.</p>
<h3>[00:00:31] News</h3>
<dl>
<dt><a href="http://www.mozilla.org/en-US/firefox/23.0/releasenotes/">Firefox 23 ist da</a></dt>
<dd>Der neuste Firefox unterstützt jetzt <code>&lt;input type="range"&gt;</code>, mag kein HTTP in HTTPS mehr, erschwert das Abschalten von JavaScript und hat <code>&lt;blink&gt;</code> rausgeworfen.</dd>
</dl>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:01:36] <a href="http://dalekjs.com/">Testing Situation heute &#8211; Hallo DalekJS</a></dt>
<dd>Sebastian erklärt uns die Unterschiede zwischen Unit- Functional- Integration- und sonstigem Testing. Wir sprechen über <a href="http://phantomjs.org/">PhantomJS</a> und <a href="http://slimerjs.org/">SlimerJS</a> &#8211; steuerbare WebKit und Gecko Laufzeiten. Sebastian schwärmt von <a href="http://csste.st/">CSSTest</a>, um seine Styles zu prüfen. Basierend auf der <a href="http://www.w3.org/TR/2013/WD-webdriver-20130117/">WebDriver Specification</a> hat Sebastian sein eigene, Java-freie Alternative zu Selenium gebaut, Damit kann man auch ein paar <a href="https://gist.github.com/asciidisco/6163475">Screenshots machen</a>. Außerdem gibt es einen <a href="https://gist.github.com/tivac/e615413684a6a5db057d">Vergleich CasperJS zu DalekJS</a>.</dd>
</dl>
<h3>[01:03:36] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://webuild.envato.com/blog/techniques-for-mobile-and-responsive-cross-browser-testing/">Techniques for mobile and responsive cross-browser testing</a></dt>
<dd>Welche Dienste und Tools muss man sich für seine Test-Infrastruktur anschauen? Envato klärt auf…</dd>
<dt><a href="http://learningthreejs.com/blog/2013/08/02/how-to-do-a-procedural-city-in-100lines/">How To Do A Procedural City In 100 Lines &#8211; Learning Three.js</a></dt>
<dd>Eine dreidimensionale Stadt generieren &#8211; mit quasi keinem Code…</dd>
<dt><a href="http://jsbin.com/exepef/1/edit"><code>visibility:visible</code> innerhalb von <code>visibility:hidden</code></a></dt>
<dd>Vielleicht für Menüs und ähnliches hilfreich: man kann die CSS-Property <code>visibility</code> in verschachtelten Elementen umkehren.</dd>
<dt><a href="http://smus.com/ultrasonic-networking/">Ultrasonic Networking on the Web</a></dt>
<dd>Man nehme Mikrofon und Lautsprecher und baue sich eine Modem-ähnliche Kommunikationsschnittstelle</dd>
<dt><a href="http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/">Absolute Horizontal And Vertical Centering In CSS</a></dt>
<dd>Viele Wege führen nach Rom, aber nur wenige ohne Stolpersteine…</dd>
<dt><a href="http://karlsruhejs.org/">KarlsruheJS</a></dt>
<dd>Der Working Draft Alumni <a href="http://twitter.com/distilledhype">Kahlil Lechelt</a> möchte das Karlsruher JavaScript MeetUp wiederbeleben und sucht dafür noch Speaker.</dd>
</dl>


Schepp und Rodney luden sich Sebastian Golasch ein, um ein wenig was über sein
neues Projekt DalekJS zu erfahren.


[00:00:31] NEWS

FIREFOX 23 IST DA

Der neuste Firefox unterstützt jetzt <input type…

Schepp und Rodney luden sich Sebastian Golasch ein, um ein wenig was über sein
neues Projekt DalekJS zu erfahren.


[00:00:31] NEWS

FIREFOX 23 IST DA

Der neuste Firefox unterstützt jetzt <input type="range">, mag kein HTTP in
HTTPS mehr, erschwert das Abschalten von JavaScript und hat <blink>
rausgeworfen.


SCHAUNOTIZEN

[00:01:36] TESTING SITUATION HEUTE – HALLO DALEKJS

Sebastian erklärt uns die Unterschiede zwischen Unit- Functional- Integration-
und sonstigem Testing. Wir sprechen über PhantomJS und SlimerJS – steuerbare
WebKit und Gecko Laufzeiten. Sebastian schwärmt von CSSTest, um seine Styles zu
prüfen. Basierend auf der WebDriver Specification hat Sebastian sein eigene,
Java-freie Alternative zu Selenium gebaut, Damit kann man auch ein paar
Screenshots machen. Außerdem gibt es einen Vergleich CasperJS zu DalekJS.


[01:03:36] KEINE SCHAUNOTIZEN

TECHNIQUES FOR MOBILE AND RESPONSIVE CROSS-BROWSER TESTING

Welche Dienste und Tools muss man sich für seine Test-Infrastruktur anschauen?
Envato klärt auf…

HOW TO DO A PROCEDURAL CITY IN 100 LINES – LEARNING THREE.JS

Eine dreidimensionale Stadt generieren – mit quasi keinem Code…

VISIBILITY:VISIBLE INNERHALB VON VISIBILITY:HIDDEN

Vielleicht für Menüs und ähnliches hilfreich: man kann die CSS-Property
visibility in verschachtelten Elementen umkehren.

ULTRASONIC NETWORKING ON THE WEB

Man nehme Mikrofon und Lautsprecher und baue sich eine Modem-ähnliche
Kommunikationsschnittstelle

ABSOLUTE HORIZONTAL AND VERTICAL CENTERING IN CSS

Viele Wege führen nach Rom, aber nur wenige ohne Stolpersteine…

KARLSRUHEJS

Der Working Draft Alumni Kahlil Lechelt möchte das Karlsruher JavaScript MeetUp
wiederbeleben und sucht dafür noch Speaker.

Revision 132: Rund ums Testen

<p>Das Sommerloch hat die Themenliste gefressen! Zum Glück lagen noch ein paar Zuhörerfragen auf Halde, derer sich Rodney, Stefan und Peter annahmen.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:33] Grid-Framework-Empfehlungen</dt>
<dd>Im Brustton der Überzeugung mochten wir keins empfehlen. Peter hat zu wenig Ahnung, Stefan fühlt sich zu schnell eingeschränkt und Rodney ist ein richtiger Entwickler und baut keine Layouts, sondern lässt bauen. Konsens: nehmt halt irgendeins!</dd>
<dt>[00:04:19] Push-Funktionalität</dt>
<dd>Der erfahrene Rodney rantet aus dem Nähkästchen. Außer Long Polling ist kaum was zu gebrauchen, wobei sich zumindest die Protokoll-Inkompatibilitäten vom <a href="http://de.wikipedia.org/wiki/WebSocket">Web Sockets</a> sich auf dem Desktop ausgewachsen haben. Der Geheimtipp für die Zukunft: HTTP über WS tunneln.</dd>
<dt>[00:11:33] Local Storage</dt>
<dd>Stefan und Peter klären erst mal den den App-Begriff, bevor sie <a href="http://hood.ie/">Hoodie</a> großes Potenzial bescheinigen.</dd>
<dt>[00:14:21] Packaging von Webapps zur Offline-Nutzung</dt>
<dd>Rodney ist ein richtiger Entwickler und erzählt daher erst mal etwas über Java. Mehr ist leider auch nicht zu sagen, da ein brauchbarer Webstandard nicht in Sicht ist. Insellösungen wie <a href="http://developer.chrome.com/extensions/apps.html">Chrome Apps</a> kommen dem noch am nächsten, laufen aber eben nur dort.</dd>
<dt>[00:19:57] Die Zukunft von WebP</dt>
<dd>Für die Zukunft von <a href="http://de.wikipedia.org/wiki/WebP">WebP</a> sehen wir eher schwarz. Peter wiederholt <a href="http://news.cnet.com/8301-1023_3-57580664-93/facebook-tries-googles-webp-image-format-users-squawk/">die bekannte Facebook-Fail-Story</a>. One does not simply invent a new image format!</dd>
<dt>[00:25:07] Was ist von &lt;nav&gt; und &lt;menu&gt; zu halten?</dt>
<dd>Aus Gründen der Barrierefreiheit empfiehlt Peter &lt;nav&gt; wärmstens. Rodney prophezeit das Ende von &lt;menu&gt;, das mangels Implementierungen auf der Abschussliste steht.</dd>
<dt>[00:27:23] Was ist von Flexbox zu halten?</dt>
<dd>Peter und Rodney lobpreisen! Stefan ist noch mit Floats schneller, was sich mit Peters Padawan-Beobachtungen deckt. Voll Spannung werden die kommenden Grid-Layout-Standards erwartet. Bis dahin baut man Flexbox wegen der diversen Syntax-Varianten am besten mit <a href="http://the-echoplex.net/flexyboxes/">Flexyboxes</a>.</dd>
</dl>
<h3>[00:35:03] Keine Schaunotizen</h3>
<dl>
<dt><a href="https://vimeo.com/71466029">DalekJS introduction on Vimeo</a></dt>
<dd>DalekJS wird nächste Revision ein Thema sein. Wer schon jetzt einen Einstieg sucht, wird mit diesem Video fündig.</dd>
<dt><a href="https://github.com/jehna/VerbalExpressions">VerbalExpressions</a></dt>
<dd>Regex für Leute die kein Regex können (JS-Lib).</dd>
<dt><a href="http://wpds-zurich.eventbrite.com/">WebPlatform DocSprint Zurich</a></dt>
<dd>Spaß und Erkenntnisgewinn durch Schreiben &#8211; bald auch in Zürich!</dd>
</dl>


Das Sommerloch hat die Themenliste gefressen! Zum Glück lagen noch ein paar
Zuhörerfragen auf Halde, derer sich Rodney, Stefan und Peter annahmen.


SCHAUNOTIZEN

[00:00:33] GRID-FRAMEWORK-EMPFEHLUNGE…

Das Sommerloch hat die Themenliste gefressen! Zum Glück lagen noch ein paar
Zuhörerfragen auf Halde, derer sich Rodney, Stefan und Peter annahmen.


SCHAUNOTIZEN

[00:00:33] GRID-FRAMEWORK-EMPFEHLUNGEN

Im Brustton der Überzeugung mochten wir keins empfehlen. Peter hat zu wenig
Ahnung, Stefan fühlt sich zu schnell eingeschränkt und Rodney ist ein richtiger
Entwickler und baut keine Layouts, sondern lässt bauen. Konsens: nehmt halt
irgendeins!

[00:04:19] PUSH-FUNKTIONALITÄT

Der erfahrene Rodney rantet aus dem Nähkästchen. Außer Long Polling ist kaum was
zu gebrauchen, wobei sich zumindest die Protokoll-Inkompatibilitäten vom Web
Sockets sich auf dem Desktop ausgewachsen haben. Der Geheimtipp für die Zukunft:
HTTP über WS tunneln.

[00:11:33] LOCAL STORAGE

Stefan und Peter klären erst mal den den App-Begriff, bevor sie Hoodie großes
Potenzial bescheinigen.

[00:14:21] PACKAGING VON WEBAPPS ZUR OFFLINE-NUTZUNG

Rodney ist ein richtiger Entwickler und erzählt daher erst mal etwas über Java.
Mehr ist leider auch nicht zu sagen, da ein brauchbarer Webstandard nicht in
Sicht ist. Insellösungen wie Chrome Apps kommen dem noch am nächsten, laufen
aber eben nur dort.

[00:19:57] DIE ZUKUNFT VON WEBP

Für die Zukunft von WebP sehen wir eher schwarz. Peter wiederholt die bekannte
Facebook-Fail-Story. One does not simply invent a new image format!

[00:25:07] WAS IST VON <NAV> UND <MENU> ZU HALTEN?

Aus Gründen der Barrierefreiheit empfiehlt Peter <nav> wärmstens. Rodney
prophezeit das Ende von <menu>, das mangels Implementierungen auf der
Abschussliste steht.

[00:27:23] WAS IST VON FLEXBOX ZU HALTEN?

Peter und Rodney lobpreisen! Stefan ist noch mit Floats schneller, was sich mit
Peters Padawan-Beobachtungen deckt. Voll Spannung werden die kommenden
Grid-Layout-Standards erwartet. Bis dahin baut man Flexbox wegen der diversen
Syntax-Varianten am besten mit Flexyboxes.


[00:35:03] KEINE SCHAUNOTIZEN

DALEKJS INTRODUCTION ON VIMEO

DalekJS wird nächste Revision ein Thema sein. Wer schon jetzt einen Einstieg
sucht, wird mit diesem Video fündig.

VERBALEXPRESSIONS

Regex für Leute die kein Regex können (JS-Lib).

WEBPLATFORM DOCSPRINT ZURICH

Spaß und Erkenntnisgewinn durch Schreiben – bald auch in Zürich!

Revision 131: Zuschauerfragen die Zweite

<p>Fast alle Moderatoren waren ausgeflogen, was also tun? Natürlich eine AngularJS-Sonderrevision! Die hatten wir schon länger geplant, jetzt nutzten wir die Gunst der Stunde. Da Stefan und Schepp beide keine Alltagserfahrung mit AngularJS vorweisen konnten, luden sie sich ein deutsches Experten-Trio bestehend aus <a href="http://angularjs.de/entwickler/robinboehm">Robin Böhm</a>, <a href="http://angularjs.de/entwickler/saschabrink">Sascha Brink</a> und <a href="http://angularjs.de/entwickler/justphil">Philipp Tarasiewicz</a> ein, die im Folgenden eine gute Stunde lang über die Funktionsweise und Vorteile von AngularJS erzählten.</p>
<h3>Schaunotizen</h3>
<dl>
<dt>[00:00:00] <a href="http://angularjs.org/">AngularJS</a></dt>
<dd>Sascha, Robin und Philipp erklären uns, wie AngularJS funktioniert. Dabei erwähnen wir die Seite <a href="http://builtwith.angularjs.org/">Built with AngularJS</a> und dass man <a href="http://deployd.com/">deployd</a> als Datensilo mit einem AngularJS-Frontend <a href="http://docs.deployd.com/docs/collections/examples/a-simple-todo-app-with-angular.md">verknüpfen kann</a>. Und nicht zuletzt natürlich die deutschsprachige Anlaufstelle für alle AngularJS-Entwickler: <a href="http://angularjs.de/">angularjs.de</a></dd>
</dl>
<h3>[00:53:18] Keine Schaunotizen</h3>
<dl>
<dt><a href="http://blogs.msdn.com/b/ie/archive/2013/07/25/ie11-developer-preview-for-windows-7-enabling-next-generation-sites-and-apps-faster.aspx">IE11 Developer Preview for Windows 7</a></dt>
<dd>Wer den IE11 austesten will und Windows 7 schon einsetzt, der muss dazu kein Image von Windows 8.1 mehr herunterladen. Alternativ dazu gibt es für Mac und Linux Banutzer auch <a href="http://www.modern.ie/de-de/virtualization-tools#downloads">ein Windows 7 Image mit integriertem IE11</a>.</dd>
<dt><a href="http://twbs.github.io/bootstrap/">Bootstrap 3 RC1</a></dt>
<dd>Das neue Bootstrap ist jetzt mobile first und flat!</dd>
<dt><a href="http://www.mobilexweb.com/blog/android-browser-eternal-dying">Android and the eternal dying mobile browser</a></dt>
<dd>Auch mit Android 4.3 will der unterentwickelte Android-Browser einfach nicht aussterben. Weiterentwickelt hat er sich auch nicht.</dd>
<dt><a href="http://www.mobify.com/blog/data-uris-are-slow-on-mobile/">On Mobile, Data URIs are 6x Slower than Source Linking</a></dt>
<dd>Mobify hat via Real User Monitoring, genannt RUM, herausgefunden, dass Bilder, die man per Data URI einbettet durch das doppelt nötige Dekodieren deutlich länger laden. Es gilt also, ihren Einsatz hier und da etwas zu begrenzen.</dd>
<dt><a href="http://wingolog.org/archives/2013/05/08/generators-in-v8">Generators in v8</a></dt>
<dd>Ein kleiner Artikel, der die Vorzüge sogenannter Generatoren aus dem kommenden JavaScript-Version ES6 erklärt.</dd>
<dt><a href="http://nerdydata.com/">NerdyData</a></dt>
<dd>Eine Suchmaschine für Quellcode.</dd>
<dt><a href="https://blog.whitehatsec.com/top-10-proactive-web-application-security-measures/#.Uf4goZI71zI">Top 10 Proactive Web Application Security Measures</a></dt>
<dd>10 Sicherheitsmaßnahmen, die man seiner Webseite angedeihen lassen sollte.</dd>
<dt><a href="http://www.thinkster.io/">Thinkster &#8211; A better way to learn AngularJS</a></dt>
<dd>Online-Workshop, um den Umgang mit AngularJS zu lernen.</dd>
<dt><a href="http://jspm.io/">jspm.io</a></dt>
<dd>jspm.io ist ein universeller JavaScript-Modul-Loader, dem es egal ist, ob ein Modul im ES6-, AMD- oder CommonJS-Format vorliegt. Außer aus dem lokalen Projekt kann jspm.io Module auch direkt von Github aus einbinden.</dd>
<dt><a href="http://angularjs.de/">AngularJS.de &#8211; Das deutsche Portal zu AngularJS</a></dt>
<dd>Philipps, Saschas und Robins gemeinsames Projekt.</dd>
</dl>


Fast alle Moderatoren waren ausgeflogen, was also tun? Natürlich eine
AngularJS-Sonderrevision! Die hatten wir schon länger geplant, jetzt nutzten wir
die Gunst der Stunde. Da Stefan und Schepp beide …

Fast alle Moderatoren waren ausgeflogen, was also tun? Natürlich eine
AngularJS-Sonderrevision! Die hatten wir schon länger geplant, jetzt nutzten wir
die Gunst der Stunde. Da Stefan und Schepp beide keine Alltagserfahrung mit
AngularJS vorweisen konnten, luden sie sich ein deutsches Experten-Trio
bestehend aus Robin Böhm, Sascha Brink und Philipp Tarasiewicz ein, die im
Folgenden eine gute Stunde lang über die Funktionsweise und Vorteile von
AngularJS erzählten.


SCHAUNOTIZEN

[00:00:00] ANGULARJS

Sascha, Robin und Philipp erklären uns, wie AngularJS funktioniert. Dabei
erwähnen wir die Seite Built with AngularJS und dass man deployd als Datensilo
mit einem AngularJS-Frontend verknüpfen kann. Und nicht zuletzt natürlich die
deutschsprachige Anlaufstelle für alle AngularJS-Entwickler: angularjs.de


[00:53:18] KEINE SCHAUNOTIZEN

IE11 DEVELOPER PREVIEW FOR WINDOWS 7

Wer den IE11 austesten will und Windows 7 schon einsetzt, der muss dazu kein
Image von Windows 8.1 mehr herunterladen. Alternativ dazu gibt es für Mac und
Linux Banutzer auch ein Windows 7 Image mit integriertem IE11.

BOOTSTRAP 3 RC1

Das neue Bootstrap ist jetzt mobile first und flat!

ANDROID AND THE ETERNAL DYING MOBILE BROWSER

Auch mit Android 4.3 will der unterentwickelte Android-Browser einfach nicht
aussterben. Weiterentwickelt hat er sich auch nicht.

ON MOBILE, DATA URIS ARE 6X SLOWER THAN SOURCE LINKING

Mobify hat via Real User Monitoring, genannt RUM, herausgefunden, dass Bilder,
die man per Data URI einbettet durch das doppelt nötige Dekodieren deutlich
länger laden. Es gilt also, ihren Einsatz hier und da etwas zu begrenzen.

GENERATORS IN V8

Ein kleiner Artikel, der die Vorzüge sogenannter Generatoren aus dem kommenden
JavaScript-Version ES6 erklärt.

NERDYDATA

Eine Suchmaschine für Quellcode.

TOP 10 PROACTIVE WEB APPLICATION SECURITY MEASURES

10 Sicherheitsmaßnahmen, die man seiner Webseite angedeihen lassen sollte.

THINKSTER – A BETTER WAY TO LEARN ANGULARJS

Online-Workshop, um den Umgang mit AngularJS zu lernen.

JSPM.IO

jspm.io ist ein universeller JavaScript-Modul-Loader, dem es egal ist, ob ein
Modul im ES6-, AMD- oder CommonJS-Format vorliegt. Außer aus dem lokalen Projekt
kann jspm.io Module auch direkt von Github aus einbinden.

ANGULARJS.DE – DAS DEUTSCHE PORTAL ZU ANGULARJS

Philipps, Saschas und Robins gemeinsames Projekt.

Revision 130: AngularJS – Superheroic JavaScript MVW Framework

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 142: Webfonts und IDEs

Working Draft

Revision 141: Devops, statische Seiten und Links

Working Draft

Revision 139: Toolchain-Kult und Touch-Events

Working Draft

Revision 138: Auf der roten CMS Couch

Working Draft

Revision 137: Mobile Browser Wonderland

Working Draft

Revision 136: Smashing Conference und ein moderner Design-Workflow

Working Draft

Revision 135: Progressive Enhancement, Sigh JavaScript und Bower

Working Draft

Revision 134: News, CSS, Links

Working Draft

Revision 133: Responsive Webdesign und CSS Frameworks

Working Draft

Revision 132: Rund ums Testen

Working Draft

Revision 131: Zuschauerfragen die Zweite

Working Draft

Revision 130: AngularJS – Superheroic JavaScript MVW Framework

Working Draft