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

May 10, 2012 Revision 70: JS Styleguides, Barrierefreiheit & Web Intents
Als Gast war diesmal wieder Frederic Hemberger am Start, der uns immer gerne mit seinem Fachwissen zur Seite steht.
Wir möchten auch noch einmal auf unseren Live-Stream und den IRC-Chat auf Freenode im Channel #workingdraft hinweisen. Wir sind immer montags ab 20 Uhr live, wenn nicht anders angekündigt. Die neusten Infos gibt’s immer auf Twitter und bei Google+.
Schaunotizen
[00:00:18] JavaScript Styleguides
Addy Osmani befasst sich mit Programmierrichtlinien in JavaScript. Er führt dabei idiomatic.js, den jQuery Core Style Guide und viele weitere Best Practices an, die wir diskutieren. Hans hat über seine persönlichen Richtlinien in HTML und CSS einen Post geschrieben.
Außerdem sprechen wir über Ben “Cowboy” Almans Blogpost zum Thema var-Deklarationen.
[00:19:00] Barrierefreiheit und die Beschwerdekultur im Internet
Domingos de Oliveira findet es schade, dass Accessibility-Experten sich aufregen, wenn Webseiten nicht perfekt zugänglich sind; sie sollten lieber mal die Dinge loben, die überhaupt gemacht werden. Marco Zehe gibt mit seinem MMT Talk einen guten Einblick, was es für Sehbehinderte Menschen bedeutet, Barrierefreiheit zu genießen.
[00:35:20] A Step for Open Sharing: AddThis Integrates Web Intents
Zum Thema Web Intents: Was ist das eigentlich? Und nutzt das jemand?
AddThis integriert Web Intents mit Fallback und schreibt darüber. Sieht vielversprechend aus!
[00:44:28] Keine Schaunotizen
Videos vom MMT29
So langsam gehen die Videos vom MMT 29 in Köln online. Hier findet ihr zum beispiel Peters.
The Web Platform: Browser Technologies
Schöne Übersicht über die einzelen Specs, Caniuse/MDN-Links, etc.
Die neue Git-Homepage
GitHub hat eine neue Präsentationswebseite mit Dokumentation für Git erstellt.
Node WebKit Agent
Die WebKit Developer-Tools für Node.
Backbone.js CRUD Application
Eine Single-Page CRUD Application mit Backbone.js und Twitter Bootstrap.
Bessere Performance mit element.classList
Mr. Paul Irish zeigt, wie man die Performance von bspw. Animationen mit element.classList drastisch verbessern kann.
Cross-Browser Fullscreen API
Sindre Sorhus hat einen Wrapper für die Fullscreen API gebaut, der auf allen browsern funktioniert, die die Fullscreen API supporten.
G+-Zirkelteiler mit nur JS-Menschen
Für alle, die noch nicht genug Leute eingekreist haben.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
51 min
May 10, 2012 Revision 70: JS Styleguides, Barrierefreiheit & Web Intents
Als Gast war diesmal wieder Frederic Hemberger am Start, der uns immer gerne mit seinem Fachwissen zur Seite steht.
Wir möchten auch noch einmal auf unseren Live-Stream und den IRC-Chat auf Freenode im Channel #workingdraft hinweisen. Wir sind immer montags ab 20 Uhr live, wenn nicht anders angekündigt. Die neusten Infos gibt’s immer auf Twitter und bei Google+.
Schaunotizen
[00:00:18] JavaScript Styleguides
Addy Osmani befasst sich mit Programmierrichtlinien in JavaScript. Er führt dabei idiomatic.js, den jQuery Core Style Guide und viele weitere Best Practices an, die wir diskutieren. Hans hat über seine persönlichen Richtlinien in HTML und CSS einen Post geschrieben.
Außerdem sprechen wir über Ben “Cowboy” Almans Blogpost zum Thema var-Deklarationen.
[00:19:00] Barrierefreiheit und die Beschwerdekultur im Internet
Domingos de Oliveira findet es schade, dass Accessibility-Experten sich aufregen, wenn Webseiten nicht perfekt zugänglich sind; sie sollten lieber mal die Dinge loben, die überhaupt gemacht werden. Marco Zehe gibt mit seinem MMT Talk einen guten Einblick, was es für Sehbehinderte Menschen bedeutet, Barrierefreiheit zu genießen.
[00:35:20] A Step for Open Sharing: AddThis Integrates Web Intents
Zum Thema Web Intents: Was ist das eigentlich? Und nutzt das jemand?
AddThis integriert Web Intents mit Fallback und schreibt darüber. Sieht vielversprechend aus!
[00:44:28] Keine Schaunotizen
Videos vom MMT29
So langsam gehen die Videos vom MMT 29 in Köln online. Hier findet ihr zum beispiel Peters.
The Web Platform: Browser Technologies
Schöne Übersicht über die einzelen Specs, Caniuse/MDN-Links, etc.
Die neue Git-Homepage
GitHub hat eine neue Präsentationswebseite mit Dokumentation für Git erstellt.
Node WebKit Agent
Die WebKit Developer-Tools für Node.
Backbone.js CRUD Application
Eine Single-Page CRUD Application mit Backbone.js und Twitter Bootstrap.
Bessere Performance mit element.classList
Mr. Paul Irish zeigt, wie man die Performance von bspw. Animationen mit element.classList drastisch verbessern kann.
Cross-Browser Fullscreen API
Sindre Sorhus hat einen Wrapper für die Fullscreen API gebaut, der auf allen browsern funktioniert, die die Fullscreen API supporten.
G+-Zirkelteiler mit nur JS-Menschen
Für alle, die noch nicht genug Leute eingekreist haben.
51 min
May 02, 2012 Revision 69: CSS Battle Royale – Opera <3 -webkit, Conditional CSS & Content-Choreographie
Drei Themen, drei Buchstaben – CSS! Nur die Crew war wieder zu viert am Start.
Schaunotizen
[00:00:31] Opera implementiert -webkit-Präfixes
Zunächst passiert das nur im Mobile-Emulator, aber die Geist geht nicht mehr zurück in die Flasche – bald werden diverse Webkit-Präfixes auch in Opera funktionieren. Grund ist, dass viele Mobile-Webseiten nur auf Webkit optimiert werden, obwohl Opera in diesem Sektor einiges an Marktanteil hat. Das Webentwickler-Universum reagiert auf diese Meldung mit Shitstorms und Mimimi, doch wir sehen das eher entspannt.
[00:31:22] Conditional CSS
Jeremy Keith erfindet einen überaus komplizierten Nachbau für window.matchMedia und auf CSS-Tricks gibt es auch eine entsprechende Demo. Wozu das Ganze wenn es doch schon Polyfills gibt? Ein Vorteil ist, dass man mit Conditional CSS keine Media Queries mehr in Script und Style duplizieren muss, sondern alles aus CSS heraus steuern kann.
[00:43:18] Content Choreography in Responsive Web Design
Demo eines Responsive Designs, das auf normalen Bildschirmgrößen Floats und für kleine Maße Flexbox verwendet. Peter ist nicht sonderlich überzeugt davon, einfach vorauszusetzen, dass alle Geräte mit kleinen Bildschirm Flexbox (was nicht die stabilste Spezifikation ist) beherrschen und beschwört trollend die Geister von Vendor-Prefix-Gate 2.0. Schepp hingegen gefällt es.
[00:53:03] Keine Schaunotizen
idb.filesystem.js
Filesystem-API-Polyfill via Indexed DB.
Optimizing with the timeline panel
Wie man die Timeline in Web Inspector für Performanceforschung nutzt.
CSS background-attachment: local
Eins von diesen eher unbekannten CSS-Features erklärt und demonstriert.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
58 min
May 02, 2012 Revision 69: CSS Battle Royale – Opera
Drei Themen, drei Buchstaben – CSS! Nur die Crew war wieder zu viert am Start.
Schaunotizen
[00:00:31] Opera implementiert -webkit-Präfixes
Zunächst passiert das nur im Mobile-Emulator, aber die Geist geht nicht mehr zurück in die Flasche – bald werden diverse Webkit-Präfixes auch in Opera funktionieren. Grund ist, dass viele Mobile-Webseiten nur auf Webkit optimiert werden, obwohl Opera in diesem Sektor einiges an Marktanteil hat. Das Webentwickler-Universum reagiert auf diese Meldung mit Shitstorms und Mimimi, doch wir sehen das eher entspannt.
[00:31:22] Conditional CSS
Jeremy Keith erfindet einen überaus komplizierten Nachbau für window.matchMedia und auf CSS-Tricks gibt es auch eine entsprechende Demo. Wozu das Ganze wenn es doch schon Polyfills gibt? Ein Vorteil ist, dass man mit Conditional CSS keine Media Queries mehr in Script und Style duplizieren muss, sondern alles aus CSS heraus steuern kann.
[00:43:18] Content Choreography in Responsive Web Design
Demo eines Responsive Designs, das auf normalen Bildschirmgrößen Floats und für kleine Maße Flexbox verwendet. Peter ist nicht sonderlich überzeugt davon, einfach vorauszusetzen, dass alle Geräte mit kleinen Bildschirm Flexbox (was nicht die stabilste Spezifikation ist) beherrschen und beschwört trollend die Geister von Vendor-Prefix-Gate 2.0. Schepp hingegen gefällt es.
[00:53:03] Keine Schaunotizen
idb.filesystem.js
Filesystem-API-Polyfill via Indexed DB.
Optimizing with the timeline panel
Wie man die Timeline in Web Inspector für Performanceforschung nutzt.
CSS background-attachment: local
Eins von diesen eher unbekannten CSS-Features erklärt und demonstriert.
58 min
April 30, 2012 Revision 68: Ein <dialog> aus scharfem Pink und Grunzern
Mit Frederic Hemberger als hochkarätigem Ersatz für den ausgeflogenen Peter stürzten wir uns auf aktuelle und liegen gebliebene Themen.
Schaunotizen
[00:00:20] Kein Hot Pink mehr in der Boilerplate
HTML5 Boilerplate hatte lange Zeit Pink als Hintergrundfarbe für markierten Text eingesetzt, im Vertrauen darauf, dass Webentwickler clever genug sein würden, das bei Bedarf zu ändern. Drollige Vorstellung.
[00:08:14] Grunt
Grunt is a task-based command line build tool for JavaScript projects. Frederic übersetzt das für uns.
[00:18:17]
Neue Elemente für HTML5? Immer wieder gerne!
[00:28:44] Mobile Testing
Wie testet man mobile? So geht das! Bleibt noch das leidige Problem mit dem Download unnötiger Ressourcen, doch auch da gibt es ja Ansätze.
[00:43:05] jQuery – The Little Things
Rodney Rehm in Hochform erklärt und demonstriert den Unterschied zwischen „It works“ und gutem Code.
[00:49:34] Keine Schaunotizen
Uberspace-Videotutorial
Wie der beste Hoster der Welt funktioniert, erklärt in bewegten Bildern.
JavaScript Enlightment: Free PDF eBook
Verflucht sei die elende Kostenloskultur im Internet.
Miso Dataset
Clientseitige Datentransformation vom Fach.
BEM
Umdenken für das Frontend.
Modern Web Development, Part 1 – The Webkit Inspector
Auftakt einer Serie über die optimale Webdev-Toolchain.
dGrid
Grid-Komponente für Dojo.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr
April 30, 2012 Revision 68: Ein <dialog> aus scharfem Pink und Grunzern
Mit Frederic Hemberger als hochkarätigem Ersatz für den ausgeflogenen Peter stürzten wir uns auf aktuelle und liegen gebliebene Themen.
Schaunotizen
[00:00:20] Kein Hot Pink mehr in der Boilerplate
HTML5 Boilerplate hatte lange Zeit Pink als Hintergrundfarbe für markierten Text eingesetzt, im Vertrauen darauf, dass Webentwickler clever genug sein würden, das bei Bedarf zu ändern. Drollige Vorstellung.
[00:08:14] Grunt
Grunt is a task-based command line build tool for JavaScript projects. Frederic übersetzt das für uns.
[00:18:17]
Neue Elemente für HTML5? Immer wieder gerne!
[00:28:44] Mobile Testing
Wie testet man mobile? So geht das! Bleibt noch das leidige Problem mit dem Download unnötiger Ressourcen, doch auch da gibt es ja Ansätze.
[00:43:05] jQuery – The Little Things
Rodney Rehm in Hochform erklärt und demonstriert den Unterschied zwischen „It works“ und gutem Code.
[00:49:34] Keine Schaunotizen
Uberspace-Videotutorial
Wie der beste Hoster der Welt funktioniert, erklärt in bewegten Bildern.
JavaScript Enlightment: Free PDF eBook
Verflucht sei die elende Kostenloskultur im Internet.
Miso Dataset
Clientseitige Datentransformation vom Fach.
BEM
Umdenken für das Frontend.
Modern Web Development, Part 1 – The Webkit Inspector
Auftakt einer Serie über die optimale Webdev-Toolchain.
dGrid
Grid-Komponente für Dojo.
1 hr
April 19, 2012 Revision 67: Meteor, Media Queries, Light Table
Mit allen Mann an Deck stürzten wir uns auf die Themen der Woche. Jedenfalls auf die, die nichts mit Semikolons zu tun hatten.
Schaunotizen
[00:00:20] Meteor
Ein recht beeindruckend anmutendes Echtzeit-Web-Framework. Wir finden, dass es höchste Eisenbahn wurde, dass mal jemand so etwas baut. Dumm nur, dass man den Security-Aspekt komplett vergessen hat und auch, dass Meteor unter GPL steht, finden wir (und andere) mehr so mittelgut. Ähnliche Projekte mit teils ähnlichen, teils anderen Problemen sind Derby, Firebase und Spacemagic.
[00:15:21] Media Query & Asset Downloading Results
Lädt ein Browser Bilder herunter, die er, weil sie in nicht zutreffenden Media Queries stehen, gar nicht laden müsste? Die Antwort ist ein klares Jain. Bilder stattdessen einfach inlinen? Was passiert mit Fonts (denen man ja auch via unicode-range oder Font.js zu Leibe rücken könnte)? Und warum standardisiert das nicht endlich mal jemand? Fragen über Fragen.
[00:31:30] Spielereien mit CSS Regions
Kreative Zweckentfremdungen von CSS Regions. Schade nur, dass die Aussichten in Richtung Standardisierung und Stabilisierung eher mau sind.
[00:45:44] Light Table
Ein innovatives IDE-Konzept, das sich u.A. aus diesem Talk ableitet. Alle finden es toll und wir überwiegend auch. Die nächsten geplanten Schritte sehen einen Kickstarter sowie das zeitnahe Opensourcing vor. Man darf gespannt sein.
[00:55:12] Move Over 1024×768: The Most Popular Screen Resolution On The Web Is Now 1366×768
Öh, naja. Darüber, ob man sich überhaupt noch Gedanken um Auflösungen machen sollte, kann man aber in der Tat debattieren, was wir uns auch nicht nehmen lassen.
[01:11:47] Keine Schaunotizen
The Current State of HTML5 Forms
Detaillierter Überblick über HTML5-Formularfeatures mit regelmäßigen Updates.
Understanding MVVM
Addy Osmani erklärt wortreich MVVM.
Mobile Patterns
Galerie für mobile UIs.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 15 min
April 18, 2012 Revision 67: Meteor, Media Queries, Light Table
Mit allen Mann an Deck stürzten wir uns auf die Themen der Woche. Jedenfalls auf die, die nichts mit Semikolons zu tun hatten.
Schaunotizen
[00:00:20] Meteor
Ein recht beeindruckend anmutendes Echtzeit-Web-Framework. Wir finden, dass es höchste Eisenbahn wurde, dass mal jemand so etwas baut. Dumm nur, dass man den Security-Aspekt komplett vergessen hat und auch, dass Meteor unter GPL steht, finden wir (und andere) mehr so mittelgut. Ähnliche Projekte mit teils ähnlichen, teils anderen Problemen sind Derby, Firebase und Spacemagic.
[00:15:21] Media Query & Asset Downloading Results
Lädt ein Browser Bilder herunter, die er, weil sie in nicht zutreffenden Media Queries stehen, gar nicht laden müsste? Die Antwort ist ein klares Jain. Bilder stattdessen einfach inlinen? Was passiert mit Fonts (denen man ja auch via unicode-range oder Font.js zu Leibe rücken könnte)? Und warum standardisiert das nicht endlich mal jemand? Fragen über Fragen.
[00:31:30] Spielereien mit CSS Regions
Kreative Zweckentfremdungen von CSS Regions. Schade nur, dass die Aussichten in Richtung Standardisierung und Stabilisierung eher mau sind.
[00:45:44] Light Table
Ein innovatives IDE-Konzept, das sich u.A. aus diesem Talk ableitet. Alle finden es toll und wir überwiegend auch. Die nächsten geplanten Schritte sehen einen Kickstarter sowie das zeitnahe Opensourcing vor. Man darf gespannt sein.
[00:55:12] Move Over 1024×768: The Most Popular Screen Resolution On The Web Is Now 1366×768
Öh, naja. Darüber, ob man sich überhaupt noch Gedanken um Auflösungen machen sollte, kann man aber in der Tat debattieren, was wir uns auch nicht nehmen lassen.
[01:11:47] Keine Schaunotizen
The Current State of HTML5 Forms
Detaillierter Überblick über HTML5-Formularfeatures mit regelmäßigen Updates.
Understanding MVVM
Addy Osmani erklärt wortreich MVVM.
Mobile Patterns
Galerie für mobile UIs.
1 hr 15 min
April 13, 2012 Revision 66: CSS-Variablen, Homo-Ehe und ein Werbeblock
Was könnte besser zum just gewesenen Osterfest passen als die Revision 666 eines nerdigen Webdev-Podcasts? Kahlil, Hans und Peter sahen das genau so.
Schaunotizen
[00:00:25] CSS-Vars Reloaded
Variablen in CSS sind jetzt ein offizieller Working Draft und die Syntax hat sich auch gebessert. Wir spekulieren, warum sie nicht noch simpler ist (z.B. $foo statt var-foo) und kommen zu keinem Ergebnis. Am Dollarzeichen kann es nicht liegen, das gibt es ja auch in Selectors Level 3 und Level 4
[00:10:17] The select menu navigation pattern
Select-Elemente taugen nicht als Navigationsmittel sagt der Andy Clarke. Wir gehen prinzipiell d’accord, aber große Navis responsive zu machen, ohne den ganzen Bildschirm zuzukleistern, ist auch nicht leicht …
[00:31:00] Brendan Eich ist homophob
Der JavaScript-Erfinder hat eine vierstellige im Kampf gegen die Homo-Ehe gestiftet. Wir wissen zwar nicht, ob das ein Thema für die Sendung ist, empören uns aber trotzdem. Aber was nun? Am besten verabschiedet man sich einfach von der Idee, JS sei eine Community und gewöhnt sich daran, dass es nur eine weitere Progammiersprache ist, die eben auch von Neandertalern und Spinnern benutzt und entwickelt wird.
[00:40:24] Werbeblock
Peter hat in seiner nächsten HTML5-Schulung noch Platz für ein paar Padawane. Schepp wiederum zettelt mit ein paar Mitstreitern einen Webworkerstammtisch in Düsseldorf an, der sich erstmalig am 12.04.2012 im Coworking Space Garage Bilk zusammenfand. Das nächste mal am 24.05.2012 um 19h und danach an jedem 3ten Donnerstag im Monat. Kahlil schlussendich verbloggt ab jetzt regelmäßig die illsten Links von neulich.
[00:47:47] Keine Schaunotizen
Round-up of web browser internals resources
Wer wissen will, wie Browser unter der Haube funktionieren, ist hier genau richtig.
locache
Framework für Local Storage
CoffeeScript in der Browser-Konsole
Gibt es für Chrome und Firefox
AngularJS Tutorial + Anatomy of Backbone
Kompakte Video-Tutorials
Emblr
Tumblr zur Sammlung von Links zu Ember.js
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
54 min
April 13, 2012 Revision 66: CSS-Variablen, Homo-Ehe und ein Werbeblock
Was könnte besser zum just gewesenen Osterfest passen als die Revision 666 eines nerdigen Webdev-Podcasts? Kahlil, Hans und Peter sahen das genau so.
Schaunotizen
[00:00:25] CSS-Vars Reloaded
Variablen in CSS sind jetzt ein offizieller Working Draft und die Syntax hat sich auch gebessert. Wir spekulieren, warum sie nicht noch simpler ist (z.B. $foo statt var-foo) und kommen zu keinem Ergebnis. Am Dollarzeichen kann es nicht liegen, das gibt es ja auch in Selectors Level 3 und Level 4
[00:10:17] The select menu navigation pattern
Select-Elemente taugen nicht als Navigationsmittel sagt der Andy Clarke. Wir gehen prinzipiell d’accord, aber große Navis responsive zu machen, ohne den ganzen Bildschirm zuzukleistern, ist auch nicht leicht …
[00:31:00] Brendan Eich ist homophob
Der JavaScript-Erfinder hat eine vierstellige im Kampf gegen die Homo-Ehe gestiftet. Wir wissen zwar nicht, ob das ein Thema für die Sendung ist, empören uns aber trotzdem. Aber was nun? Am besten verabschiedet man sich einfach von der Idee, JS sei eine Community und gewöhnt sich daran, dass es nur eine weitere Progammiersprache ist, die eben auch von Neandertalern und Spinnern benutzt und entwickelt wird.
[00:40:24] Werbeblock
Peter hat in seiner nächsten HTML5-Schulung noch Platz für ein paar Padawane. Schepp wiederum zettelt mit ein paar Mitstreitern einen Webworkerstammtisch in Düsseldorf an, der sich erstmalig am 12.04.2012 im Coworking Space Garage Bilk zusammenfand. Das nächste mal am 24.05.2012 um 19h und danach an jedem 3ten Donnerstag im Monat. Kahlil schlussendich verbloggt ab jetzt regelmäßig die illsten Links von neulich.
[00:47:47] Keine Schaunotizen
Round-up of web browser internals resources
Wer wissen will, wie Browser unter der Haube funktionieren, ist hier genau richtig.
locache
Framework für Local Storage
CoffeeScript in der Browser-Konsole
Gibt es für Chrome und Firefox
AngularJS Tutorial + Anatomy of Backbone
Kompakte Video-Tutorials
Emblr
Tumblr zur Sammlung von Links zu Ember.js
54 min