Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

June 28, 2014 Revision 176: will-change, Critical Path und z-index
Ungeachtet der Fußball-WM widmete sich das leeterarische Quartett, diesmal bestehend aus Anselm, Hans, Rodney und Peter, einigen kleinen Neuheiten aus der Frontend-Welt.
[00:00:30] News
Improving Viewport Unit Support in WebKit
Endlich (weitgehend) bugfreie Viewport-Units auch in WebKit.
IE Developer Channel
Regelmäßig erscheinende Dev-Versionen des IE! Ein Traum wird wahr.
Schaunotizen
[00:01:07] will-change
Ein Opera-Artikel erklärt die neue CSS-Eigenschaft will-change. Im Prinzip handelt es sich um die Standardisierung des 3D-Transform-Hacks. Wir erläutern nochmals die technischen Hintergründe und diskutieren über Sinnhaftigkeit, Art und mögliche Häufigkeit des Einsatzes dieses neuen Features.
[00:17:06] Critical Path
Eine Webseite bietet einen Critical Path CSS Generator an, den wir zum Anlass nehmen das Thema gründlich zu beleuchten. Zunächst kaprizieren wir uns auf CSS-Inlining, das unter anderem Hans etwas kritisch sieht. Gegen Ende schweifen wir in eine Debatte über Tools im Allgemeinen und Uncss im Speziellen ab, erinnern an Revision 166 und landem am Ende bei Penthouse.
[00:47:36] Sassy Z-Index Management For Complex Layouts
Ein Sass-Mixin löst ein Problem, dessen Existenz von Rodney und Peter bestritten wird. Beim Klärungsversuch vergleichen wir unsere Projekte und wie wir darin z-index verwenden.
[01:01:47] Keine Schaunotizen
beeplay.js
Töne mit JavaScript erzeugen. DJ Rod mixt live im Studio eine Huldigung auf seinen Arbeitgeber ab.
The Humble Button Element
Wichtige Semantik-(Argumentations)-Nachhilfe.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 6 min
June 28, 2014 Revision 176: will-change, Critical Path und z-index
Ungeachtet der Fußball-WM widmete sich das leeterarische Quartett, diesmal bestehend aus Anselm, Hans, Rodney und Peter, einigen kleinen Neuheiten aus der Frontend-Welt.
[00:00:30] News
Improving Viewport Unit Support in WebKit
Endlich (weitgehend) bugfreie Viewport-Units auch in WebKit.
IE Developer Channel
Regelmäßig erscheinende Dev-Versionen des IE! Ein Traum wird wahr.
Schaunotizen
[00:01:07] will-change
Ein Opera-Artikel erklärt die neue CSS-Eigenschaft will-change. Im Prinzip handelt es sich um die Standardisierung des 3D-Transform-Hacks. Wir erläutern nochmals die technischen Hintergründe und diskutieren über Sinnhaftigkeit, Art und mögliche Häufigkeit des Einsatzes dieses neuen Features.
[00:17:06] Critical Path
Eine Webseite bietet einen Critical Path CSS Generator an, den wir zum Anlass nehmen das Thema gründlich zu beleuchten. Zunächst kaprizieren wir uns auf CSS-Inlining, das unter anderem Hans etwas kritisch sieht. Gegen Ende schweifen wir in eine Debatte über Tools im Allgemeinen und Uncss im Speziellen ab, erinnern an Revision 166 und landem am Ende bei Penthouse.
[00:47:36] Sassy Z-Index Management For Complex Layouts
Ein Sass-Mixin löst ein Problem, dessen Existenz von Rodney und Peter bestritten wird. Beim Klärungsversuch vergleichen wir unsere Projekte und wie wir darin z-index verwenden.
[01:01:47] Keine Schaunotizen
beeplay.js
Töne mit JavaScript erzeugen. DJ Rod mixt live im Studio eine Huldigung auf seinen Arbeitgeber ab.
The Humble Button Element
Wichtige Semantik-(Argumentations)-Nachhilfe.
1 hr 6 min
June 16, 2014 Revision 175: Die Open Source Reise des Jan Lehnardt
Zur 175. Revision haben wir uns mit Jan Lehnardt einen Riesen der deutschen Open Source Szene eingeladen. Entsprechend riesig ist auch diese Mammutepisode mit über zweieinhalb Stunden. Doch soviel sei gesagt: Der Umfang verspricht auch sehr viele interessante Insights! Viel Spaß!
[00:01:00] News
Beyond Tellerrand Tickets
Die Beyond Tellerrand kommt nach Berlin! Tickets gibt es ab sofort.
Schaunotizen
[00:01:29] CouchDB
Zum Open Source Ruhm gekommen ist Jan mit der NoSQL Datenbank CouchDB. Jan erzählt von seinen Anfängen in der Community, seiner Rolle bei Apache und gibt Einblick in die strukturellen Unterschiede zwischen seinem Baby, PouchDB, TouchDB und der MongoDB.
[00:24:04] Mustache.js
Es gibt kaum einen Web-Entwickler, der noch nicht mit Logic Less Templates und der Mustache-style Syntax zu tun hatte. Jan zeichnet sich für die populäre JavaScript Implementierung des nicht minder populären Konzepts verantwortlich und erklärt auch, warum Dinge wie HoganJS ganz in Ordnung sind, und dass man Jacob ‚Fat‘ Thorton auch gern umarmen darf.
[00:33:48] Hoodie
Jans neuestes Baby ist Hood.ie, die Offline First, No Backend Architektur die alle Frontend-Gebete erhört. Was dahinter steckt und wie es dem Projekt so geht, erfährt ihr hier. Sehr empfehlenswert dazu auch Alex‘ Talk auf der JSConf.eu
[01:07:33] Willkommen in der Neighbourhoodie!
Die Hoodies haben einen Firma gegründet und nennen sie „The Hoodie Firm“. Wie man ein Business mit Open Source Fokus aufbaut, welche Dinge für Jan einen wichtige Rolle spielen, warum Frauen in der Technik absolut wichtig sind und wie das Business Modell der Neighbourhoodie läuft, gibt es an dieser Stelle.
[01:43:51] JSConf.eu
Der Call For Speakers zur Berliner Ausgabe der JSConf ist offen, und Jan erzählt aus dem Nähkästchen vom Organisieren.
[02:22:23] Keine Schaunotizen
JSNice
Mal wieder zuviel Uglify im Code? JSNice versucht mit statistischen Methoden euren minimierten Code wieder zu verhübschen und den Bezeichnern anständige Namen zu verpassen.
SVG Animations
Wer dieses großartige Slidedeck zu SVG Animationen der ebenso großartigen Sara Soueidan noch nicht gesehen hat, sollte schleunigst diesen Link klicken.
SVG Symbol
Chris Coyier erklärt SVG Symbole und deren Einsatz.
SVG4Everybody
SVG für OldIE? Polyfill. Hier.
Mutation Observers
Hatten wir schonmal im Podcast, Addy Osmani gibt schriftlich dazu seinen Senf auch ab.
AniJS
ermöglicht Animations über deklarative Markup Anweisungen.
AMD Clean
Wer mit CommonJS/AMD Modulen arbeitet, kann überflüssigen Code bei einer kombinierten Datei hiermit entfernen.
Headroom.js
Menüzeile nur beim Hochscrollen, so wie’s der Mobile Chrome macht? Damit.
Responsive Images
sind mittlerweile Realität! Hier eine Zusammenfassung.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
2 hr 28 min
June 15, 2014 Revision 174: Front-End-Workflow
Schepp, Anselm und Hans fanden sich für Revision 174 zusammen und referieren zum Spezial-Thema Moderner Front-End-Workflow.
[00:00:13] News
Launching status.modern.ie & Internet Explorer platform priorities
Microsoft veröffentlich status.modern.ie als Open Source Projekt und hofft auf die Hilfe beim erfassen von Feature-Support in den übrigen Browsern. Außerdem steht die nächste Version des Internet Explorers an.
Understanding web pages better
Googles Page Crawling Algorithmus versteht nun noch mehr JavaScript.
Preview the new caniuse.com features
Eine Preview des neuen caniuse.com-Designs.
Schaunotizen
[00:02:27] Moderne Art zu entwickeln (agil, modular, etc.)
Was ist eigentlich die moderne Art zu Entwickeln? Hilft agiles Development (zum Beispiel mit Scrum) uns Entwicklern oder verbreiten die vielen Meetings eher Unmut? Wir sprechen auch über komponenten-basiertes Entwickeln, gerade im Bezug auf große Webprojekte.
[00:38:25] How ‚DevOps‘ is Killing the Developer
Christoph Rumpel ist der Meinung, dass wir die Rolle von DevOps näher beleuchten sollten. Was sich hinter dem Begriff DevOps verbirgt und wie wir in unseren Teams mit den Arbeiten abseits der eigentlichen Web-Programmierung umgehen, diskutieren wir.
[00:52:12] A Maintainable Style Guide
Style Guides helfen ein Projekt zwischen Designern und Entwicklern besser zu managen und die Kommunikation zu erleichtern. Ian Feather ist der Meinung, dass Style Guides nur Sinn machen, wenn Sie mit dem Code aus dem Projekt selbst erstellt werden und beschreibt die Technik, die Lonely Planet verwendet, um ihren Style Guide zu erzeugen. Wir besprechen diese und decken die Vor- und Nachteile auf.
[01:08:03] Keine Schaunotizen
XSS Game
Ein Hacker-Game mit dem man Cross-Site-Scripting lernt und so Attacken vermeiden kann.
Implement Custom Gestures
Eine Rund-Um-Erklärung zu Touch Input Gesten auf technischer und user-experience Ebene.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 11 min
June 15, 2014 Revision 175: Die Open Source Reise des Jan Lehnardt
Zur 175. Revision haben wir uns mit Jan Lehnardt einen Riesen der deutschen Open Source Szene eingeladen. Entsprechend riesig ist auch diese Mammutepisode mit über zweieinhalb Stunden. Doch soviel sei gesagt: Der Umfang verspricht auch sehr viele interessante Insights! Viel Spaß!
[00:01:00] News
Beyond Tellerrand Tickets
Die Beyond Tellerrand kommt nach Berlin! Tickets gibt es ab sofort.
Schaunotizen
[00:01:29] CouchDB
Zum Open Source Ruhm gekommen ist Jan mit der NoSQL Datenbank CouchDB. Jan erzählt von seinen Anfängen in der Community, seiner Rolle bei Apache und gibt Einblick in die strukturellen Unterschiede zwischen seinem Baby, PouchDB, TouchDB und der MongoDB.
[00:24:04] Mustache.js
Es gibt kaum einen Web-Entwickler, der noch nicht mit Logic Less Templates und der Mustache-style Syntax zu tun hatte. Jan zeichnet sich für die populäre JavaScript Implementierung des nicht minder populären Konzepts verantwortlich und erklärt auch, warum Dinge wie HoganJS ganz in Ordnung sind, und dass man Jacob ‚Fat‘ Thorton auch gern umarmen darf.
[00:33:48] Hoodie
Jans neuestes Baby ist Hood.ie, die Offline First, No Backend Architektur die alle Frontend-Gebete erhört. Was dahinter steckt und wie es dem Projekt so geht, erfährt ihr hier. Sehr empfehlenswert dazu auch Alex‘ Talk auf der JSConf.eu
[01:07:33] Willkommen in der Neighbourhoodie!
Die Hoodies haben einen Firma gegründet und nennen sie „The Hoodie Firm“. Wie man ein Business mit Open Source Fokus aufbaut, welche Dinge für Jan einen wichtige Rolle spielen, warum Frauen in der Technik absolut wichtig sind und wie das Business Modell der Neighbourhoodie läuft, gibt es an dieser Stelle.
[01:43:51] JSConf.eu
Der Call For Speakers zur Berliner Ausgabe der JSConf ist offen, und Jan erzählt aus dem Nähkästchen vom Organisieren.
[02:22:23] Keine Schaunotizen
JSNice
Mal wieder zuviel Uglify im Code? JSNice versucht mit statistischen Methoden euren minimierten Code wieder zu verhübschen und den Bezeichnern anständige Namen zu verpassen.
SVG Animations
Wer dieses großartige Slidedeck zu SVG Animationen der ebenso großartigen Sara Soueidan noch nicht gesehen hat, sollte schleunigst diesen Link klicken.
SVG Symbol
Chris Coyier erklärt SVG Symbole und deren Einsatz.
SVG4Everybody
SVG für OldIE? Polyfill. Hier.
Mutation Observers
Hatten wir schonmal im Podcast, Addy Osmani gibt schriftlich dazu seinen Senf auch ab.
AniJS
ermöglicht Animations über deklarative Markup Anweisungen.
AMD Clean
Wer mit CommonJS/AMD Modulen arbeitet, kann überflüssigen Code bei einer kombinierten Datei hiermit entfernen.
Headroom.js
Menüzeile nur beim Hochscrollen, so wie’s der Mobile Chrome macht? Damit.
Responsive Images
sind mittlerweile Realität! Hier eine Zusammenfassung.
2 hr 28 min
June 15, 2014 Revision 174: Front-End-Workflow
Schepp, Anselm und Hans fanden sich für Revision 174 zusammen und referieren zum Spezial-Thema Moderner Front-End-Workflow.
[00:00:13] News
Launching status.modern.ie & Internet Explorer platform priorities
Microsoft veröffentlich status.modern.ie als Open Source Projekt und hofft auf die Hilfe beim erfassen von Feature-Support in den übrigen Browsern. Außerdem steht die nächste Version des Internet Explorers an.
Understanding web pages better
Googles Page Crawling Algorithmus versteht nun noch mehr JavaScript.
Preview the new caniuse.com features
Eine Preview des neuen caniuse.com-Designs.
Schaunotizen
[00:02:27] Moderne Art zu entwickeln (agil, modular, etc.)
Was ist eigentlich die moderne Art zu Entwickeln? Hilft agiles Development (zum Beispiel mit Scrum) uns Entwicklern oder verbreiten die vielen Meetings eher Unmut? Wir sprechen auch über komponenten-basiertes Entwickeln, gerade im Bezug auf große Webprojekte.
[00:38:25] How ‚DevOps‘ is Killing the Developer
Christoph Rumpel ist der Meinung, dass wir die Rolle von DevOps näher beleuchten sollten. Was sich hinter dem Begriff DevOps verbirgt und wie wir in unseren Teams mit den Arbeiten abseits der eigentlichen Web-Programmierung umgehen, diskutieren wir.
[00:52:12] A Maintainable Style Guide
Style Guides helfen ein Projekt zwischen Designern und Entwicklern besser zu managen und die Kommunikation zu erleichtern. Ian Feather ist der Meinung, dass Style Guides nur Sinn machen, wenn Sie mit dem Code aus dem Projekt selbst erstellt werden und beschreibt die Technik, die Lonely Planet verwendet, um ihren Style Guide zu erzeugen. Wir besprechen diese und decken die Vor- und Nachteile auf.
[01:08:03] Keine Schaunotizen
XSS Game
Ein Hacker-Game mit dem man Cross-Site-Scripting lernt und so Attacken vermeiden kann.
Implement Custom Gestures
Eine Rund-Um-Erklärung zu Touch Input Gesten auf technischer und user-experience Ebene.
1 hr 11 min
May 30, 2014 Revision 173: Neues aus der Zukunft
Da die Themenliste nach dem Ausmisten diesmal etwas dünn ausfiel, besprachen Schepp, Anselm und Peter einfach drei neue Features in Chrome 36, der jüngst den Beta-Status erreicht hat.
Schaunotizen
[00:00:35] element.animate()
JavaScript-Animationen steigen aus den Gräbern empor – allerdings in einer mit der CSS-Animations-Engine verzahnten und daher sehr performanten Form. Wer performante JS-Animationen schon heute haben will kann entweder auf einen Polyfill oder die Library VelocityJS zurückgreifen. Jake Archibald hat die Details zu der neuen Animations-API mal im Smashing Magazine aufgeschrieben
[00:07:46] HTML Imports
Klingt wie include() aus PHP, ist aber besser! HTML Imports laden und parsen HTML-Dokumente, die für JS als Document-Objekt bereitgestellt werden. Das Ganze funktioniert auch mit CORS, hat ein async-Attribut und kann via Vulcanize optimiert werden. Peter erklärt die JS-API und Use Cases für HTML Imports, während sich Schepp wehmütig an glorreiche Tage mit XSLT zurückerinnert.
[00:17:28] Object.observe()
Während DOM Mutation Observers das DOM auf Änderungen überwachen (siehe Revision 148), achtet Object.observe() auf alle Arten von JS-Objekten (und Array.observe() auf Arrays). Wichtig ist das vor allem für die Data-Binding-Funktionalität in modernen MVC-Frameworks. Nachdem wir den fälligen Polyfill erwähnt haben, schweifen wir etwas ab und reden auch noch über HTC-Dateien im alten IE, CSS Expressions im alten IE und Polymer (für alles außer dem alten IE)
[00:34:30] Keine Schaunotizen
EmpireJS
Konferenztalks auf Youtube.
Compressor Head
Datenkompression als solche anschaulich als Video erklärt.
Fluxxor
Facebooks M und C für die Kombination mit der View-Engine React.
Performance Budget with Grunt
Ein Grunt-Task, der motzt, wenn man langsame Webseiten baut.
Script-injected „async scripts“ considered harmful
Ein subtiles Detail über dynamisch eingefügte Scripts.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
39 min
May 29, 2014 Revision 173: Neues aus der Zukunft
Da die Themenliste nach dem Ausmisten diesmal etwas dünn ausfiel, besprachen Schepp, Anselm und Peter einfach drei neue Features in Chrome 36, der jüngst den Beta-Status erreicht hat.
Schaunotizen
[00:00:35] element.animate()
JavaScript-Animationen steigen aus den Gräbern empor – allerdings in einer mit der CSS-Animations-Engine verzahnten und daher sehr performanten Form. Wer performante JS-Animationen schon heute haben will kann entweder auf einen Polyfill oder die Library VelocityJS zurückgreifen. Jake Archibald hat die Details zu der neuen Animations-API mal im Smashing Magazine aufgeschrieben
[00:07:46] HTML Imports
Klingt wie include() aus PHP, ist aber besser! HTML Imports laden und parsen HTML-Dokumente, die für JS als Document-Objekt bereitgestellt werden. Das Ganze funktioniert auch mit CORS, hat ein async-Attribut und kann via Vulcanize optimiert werden. Peter erklärt die JS-API und Use Cases für HTML Imports, während sich Schepp wehmütig an glorreiche Tage mit XSLT zurückerinnert.
[00:17:28] Object.observe()
Während DOM Mutation Observers das DOM auf Änderungen überwachen (siehe Revision 148), achtet Object.observe() auf alle Arten von JS-Objekten (und Array.observe() auf Arrays). Wichtig ist das vor allem für die Data-Binding-Funktionalität in modernen MVC-Frameworks. Nachdem wir den fälligen Polyfill erwähnt haben, schweifen wir etwas ab und reden auch noch über HTC-Dateien im alten IE, CSS Expressions im alten IE und Polymer (für alles außer dem alten IE)
[00:34:30] Keine Schaunotizen
EmpireJS
Konferenztalks auf Youtube.
Compressor Head
Datenkompression als solche anschaulich als Video erklärt.
Fluxxor
Facebooks M und C für die Kombination mit der View-Engine React.
Performance Budget with Grunt
Ein Grunt-Task, der motzt, wenn man langsame Webseiten baut.
Script-injected „async scripts“ considered harmful
Ein subtiles Detail über dynamisch eingefügte Scripts.
39 min
May 24, 2014 Revision 172: Interview mit Chris Coyier
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ß!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
31 min
May 24, 2014 Revision 171: Drag & Drop erklärbärt
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 4 min