Working Draft

Dieses mal wurde die Crew durch den Konferenz-Großmeister Marc Thiele verstärkt. [00:00:19] News Safari 6 and Chrome 21 add image-set to support retina images Damit dürfte klar sein, wie wir in Zukunft responsive images machen werden. Schaunotizen [00:01:00] beyond tellerrand 2012 und Smashing Conference 2012 Wir sind uns einig: besteste Konferenzen ever! Veranstalter Marc Thiele erzählt von den Hintergründen seiner Konferenzen und den Workshops und lässt sich für vergangene Werke angemessen huldigen. Spontan beschließen wir, zwei Karten für die BT2012 zu verlosen (siehe unten). [00:28:02] Let’s Talk about CSS Variables Tab Atkins rechtfertigt die neue, wahrscheinliche Syntax für CSS-Variablen. Wir sind von der Präfix-Sparsamkeit nicht überzeugt; sowas wie Perl kommt ja auch mit mehr als einem Sonderzeichen klar. Ein Update für Hans‘ allumfassenden Artikel über CSS-Variablen gibt es auch schon. [00:38:23] Farbverläufe erklärbärt Peter erklärt die neue Syntax für CSS3-Gradients. Die Änderungen an sich finden wir toll, aber war es die nochmalige Änderung wert? Schließlich gibt es ja traditionell Probleme bei solchen Umstellungen. Und wer würde schon auf solche Webdesign-Meisterwerke verzichten wollen, nur für eine schönere CSS-Syntax? Wir jedenfalls nicht! [00:51:00] Interpreting some of Twitter’s API changes Twitter gibt sich neue API-Terms und das Internet zürnt. Wir auch, aber wir wissen nicht so ganz, wo das jetzt alles enden soll. Rod meint, Twitter könnte uns einfach bezahlen lassen. Aber ob Nicht-Nerds da mitmachen? Die sind ja bisher nicht mal auf kostenlose Alternativen wie Identi.ca oder anderes obskures Zeug augesprungen. So wissen wir auch nicht, ob aus App.net etwas werden könnte. Scheiß Gesamtsituation! [01:12:45] Keine Schaunotizen requirejs/xrayquire Mit diesem RequireJS-Inspector den Modulen unter die Motorhaube sehen. Using ARIA in HTML5 Wer auch nur am Rande an Barrierefreiheit interessiert ist, sollte sich dieses Dokument auf die Großhirnrinde tätowieren lassen. Ernsthaft! CSS Layout Evolution Erklärt CSS3-Layout und beleuchtet auch die Hintergründe. Endlich erfahren, warum CSS-Layout (ohne CSS3) so schwer ist! DropPHP Ein einfacher Dropbox-Client in PHP. Firefox JIT Inspector Firefox-Extension für den geneigten JavaScript-Optimierer. A day in the life of V8 (Slides) Passend zum JIT-Inspector dieser Talk, der erklärt, wie man den von V8 generierten Maschinencode inspiziert. Futter für die Extremsportler unter den JavaScript-Optimierern. Custom Sublime Text Build Systems For Popular Tools And Languages Wie man sich in ST2 Buildsysteme baut. [01:17:00] Verlosung Zwei Karten für die Beyond Tellerrand 2012 zu gewinnen! Es gibt zwei Möglichkeiten für euch, je eine Karte für die Beyond Tellerrand 2012 (besteste Konferenz ever) zu gewinnen: Beantwortet die Frage „in welcher Revision haben wir über Peerbind gesprochen?“ auf möglichst originelle Weise. Egal ob Audio, Video, Text oder Bild, die Jury entscheidet in der nächsten Revision über den Sieger Bastelt Super Mario aus HTML und CSS! Welcher der beste ist, entscheidet die Jury entscheidet in der nächsten Revision Schickt uns Eure Einreichungen via Twitter oder als E-Mail an comments@workingdraft.de. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Die Crew von Working Draft fiel wie die Fliegen Deadlines und Kopfschmerzen zum Opfer. Zum Glück konnte Sebastian Golasch alias @asciidisco die am Ende nur noch aus Rodney und Peter bestehende Rumpftruppe verstärken. Schaunotizen [00:01:17] jQuery 1.8 Released jQuery 1.8 kommt mit besserer Performance und eingedämmten Code-Wachstum daher. Die großen Änderungen sind eher interner Natur. Der Code ausgemistet und so modularisiert, dass man sich jetzt eigene, kleinere Builds erstellen kann. Neue Versionen von Dojo und Prototype (die Älteren unter euch werden sich erinnern) gibt es auch. Allerdings fiel uns niemand ein, der diese Frameworks noch (freiwillig) benutzt. Das Web scheint sich für jQuery entschieden zu haben. [00:15:54] 10 things I hate about Git Steve Bennett kritisiert Git. Im Vergleich zu Subversion sei die Benutzung zu unintuitiv, die Commands und Dokumentation seien ranzig und ein Mangel an Abstraktion sorgt für läste Mehrarbeit. Wir können dem nicht direkt widersprechen, wissen aber, wie man Git benutzbarer macht: ein Branching Model namens Gitflow, quasi Git mit Leitplanken. Das Ganze gibt es auch als Git-Extension und wird von Sebastian allerwärmstens empfohlen. [00:28:09] The Art of staying up to date Wir vergleichen, wie wir den Dschungel an Informationen rund um Webentwicklung für uns persönlich verwalten. Die Informationsgewinnung läuft bei uns allen mehr oder minder gleich (Twitter, RSS, Working Draft), aber die Verwaltung unterscheidet dann doch. Rodney lagert den Webdev-Teil seines Gehirn an diverse Apps aus und findet so jederzeit alle Infos wieder. Peter verweigert sich solcher Tools komplett und vertraut ganz auf Google, Lazyweb und seinen Kopf. Motto: was ich damit nicht wiederfinde, war eh nicht wichtig. Sebastian arbeitet klassisch mit Browser-Bookmarks. Was macht ihr, liebe Leser? [00:56:16] Keine Schaunotizen Fontello Schustert Custom Builds aus diversen Icon-Fonts zusammen. Remote Debugging für Firefox auf Android Nicht ganz unkompliziert, aber wenigstens gibt es diese Anleitung. browserver Verwandelt euren Browser in einem Webserver. A closer look at _.extend and copying properties Der Doktor™ diesmal zu den Untiefen von property assignment im Kontext von Prototypenketten. Just Gauge Rendert euch mittels Raphaël ’ne Gauge in die Seite. PSA – SmashingMag Interns Das SmashingMag sucht (bezahlte) Praktikanten in Freiburg. Neue Version von URI.js Rodneys Library implementiert jetzt URI Templates (RFC 6570) Internationalizing JavaScript Applications Slides und Material zum Thema. Placeholder in SASS Kleiner, nützlicher Hinweis. Impressionist GUI für Impress.js. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Mit dem seltenen Überraschungsgast Peter starten Rodney und Hans in eine neue Revision voller Spiel, Spaß und Abenteuer! [00:00:10] News MySQL 5.6.6 ist da Mit memcached an Bord! Schaunotizen [00:00:40] Neue Syntax in ECMAScript 6 Die nächste Version von JavaScript wird allerlei neue Syntax einführen, wovon Nicholas C. Zakas ein großer Teil ganz und gar nicht gefällt. Rodney und Peter stimmen in diesem Chor voller Inbrunst ein. Fat Arrows machen, wenn überhaupt, nur in CoffeeScript Sinn, Quasi Literals könnten auch einfache Library-Funktionen sein und überhaupt hätten wir nichts gegen etwas mehr Zurückhaltung bei der Einführung von neuer Syntax. Sinnvoller finden wir da schon die neuen Syntaxen für z.B. Klassen und Konstanten, aber generell ist weniger mehr. Peter geht auch davon aus, dass die ES-Macher noch rechtzeitig zur Vernunft kommen. [00:20:33] Support for @supports in Firefox Nightly Ist das Ende von JS-Polyfills nahe? Mit der @supports-Regel können CSS-Autoren den Browser fragen, ob sie eine CSS-Deklaration verstehen und dann entsprechend darauf reagieren. Die Idee finden wir summa summarum ganz großartig. Der Firefox legt nun mit seiner Implementierung vor, doch auch Opera arbeitet dran. Ein weiteres mögliches Feature für die Zukunft, die color()-Funktion, steifen wir auch. [00:31:27] Microsoft commits to WebRTC – just not Google’s version Der Artikel, der Anlass zu diesem Thema ist, enthält nicht viele Informationen, aber das was da ist reicht, um Peter fragen zu lassen: „können wir uns WebRTC an die Backe schmieren?“ Die pluginfreie VOIP-im-Browser-Technologie (s. webrtc.org + dieser umfassender Talk von Googles diesjähriger Entwicklerkonferenz) will jetzt auch Microsoft unterstützen, macht aber das von <video> und <audio> bekannte Codec-Fass auf. Statt sich auf einen Codec zu einigen sei es ja viel besser für den Endnutzer, wenn er die freie Wahl hätte. So wie ihr bei ihrem Stromanbieter! Wir sind nicht alle komplett von dieser Argumentationskette überzeugt. [00:45:19] Keine Schaunotizen Prism Lea Verou hat den bei Dabblet.com verwendeten Syntaxhighlighter geopensourced. Mobilism’s Videos Reinziehen, lernen! gridster.js jQuery-Plugin für rekonfigurierbare Grid-Layouts. Piecon A tiny javascript library for dynamically generating pie charts in your favicons. SCSS-Toolkit Auf SMACSS basierendes Toolkit für SCSS. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Diesmal trafen sich Schepp, Hans, Kahlil und Special Guest Anselm Hannemann zum wöchentlichen Webdev-Geplänkel im virtuellen Working Draft Studio (Skype). Schaunotizen [00:00:40] Discussion about CSS reusability Wir nehmen Chris Coyiers Artikel zum Anlass, um über unsere CSS-Wiederverwendungstaktiken zu reden. [00:17:05] XOXOCO – Is it time for the password-less login? Der Autor beschwert sich über die Usability bei Logins und stellt einen neuen Ansatz vor. Wir sprechen darüber. [00:24:25] Content Security Policy Ein neuer Header für HTTP für mehr Sicherheit. [00:30:40] Troy Hunt: Lessons in website security anti-patterns by Tesco Eine australische Großhandelskette erlaubt sich auf ihrer eCommerce-Webseite jeden erdenklichen Security-Patzer. Wir nehmen das zum Anlass um über Security best practices zu reden. [00:45:40] BinaryJS – Realtime binary streaming for the web using websockets Eine node library um Daten binär zu streamen. Schepp erklärt warum das toll ist. [00:53:00] Separate var statements Kahlil schrob einen Artikel darüber warum er separate var Statements in JavaScript bevorzugt und jeder sagt mal was seine Lieblingsformatierung zur Variablendeklaration in JS ist. [01:05:50] Keine Schaunotizen Backbone.js: Hackers Guide Part 2 Der zweite Teil einer Artikelreihe über die Innereien von Backbone.js Journey Through The JavaScript MVC Jungle Ein hervorrangender Artikel von Addy, der bei der Suche nach dem richtigen MVC Framework in JavaScript sehr hilfreich sein kann. Selling Accessibility – Negative Factors Karl Groves spricht über Schmackhaftmachung von Accessibility. My wife is really getting into whiskey Ein interessantes Interview mit Ben Alman. Summer Reading…and Programming Eine interaktive Buchrezension mit JavaScript Konsole insidrrr – Offenes Kompetenznetzwerk für interaktive Medien Cologne.js BrainCamp Cologne Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Dieses mal waren Schepp, Hans, Kahlil und Special Guest Benedikt Kastl am Start um den Webkram der letzten Woche zu besprechen. [00:00:25] News Outlook 2013 Offline Apps für den Desktop mit Webtechnik Schaunotizen [00:01:30] Seamless iFrames Wir sprechen über Ben Vinegars Vortrag über Seamless iFrames und erklären was das ist. [00:14:40] How we learned to leave default font-size alone and embrace the em Die Filament Group erzählt wie sie am liebsten Font Sizes deklarieren und wir auch. [00:28:40] HTML5 Web applications and libraries survey Wie sehen Mobilentwickler Schwerpunkte bei Plattformen und Frameworks? Und was für Schlüsse kann man daraus ziehen? [00:39:40] Keine Schaunotizen EpicEditor – An embeddable JavaScript Markdown editor Socialite.js Forkit.js Montage and Ninja are here – destroy/dstorey DailyJS: Backbone.js: Hacker’s Guide I18N MySQL Datenbanken abgleichen mit Toad > Datenbanken > MySQL, Synchronisation Alternativ geht das auch mit SQLBalance for MySQL Latency: The New Web Performance Bottleneck – igvita.com Inspire Conference | Leiden, The Netherlands | 9th – 12th December 2012 Die Soundeffekte dieser Folge stammen von Mike Koenig, via soundbible.com. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Scheppman, Hans, Rodney und Kahlil trafen sich dieses mal wieder, um in illustrer Runde so zu tun, als hätten Sie eine Ahnung von Webentwicklung und so. [00:00:15] News getUserMedia() ist in Firefox gelandet Schaunotizen [00:00:39] styles.max.css Daniel Eden schlägt vor, das CSS generell auch dekomprimiert auf dem Server bereit zu halten, damit Anfänger davon lernen können. [00:12:40] It’s time to stop blaming Internet Explorer Den Nicholas C. Zakas ermüdet das ewige IE-Gebashe und wir stimmen in diesen Kanon mit ein. [00:22:06] box-decoration-break in Anmarsch So langsam kommt box-decoration-break in die Browser. Der Schepp und Rodney sinnieren über die Sinnhaftigkeit des Propertys. [00:40:22] X-tag – reduce your html Der Autor behilft sich mit JavaScript, um HTML-Code zu sparen. Wir sinnieren auch hier über die Sinnhaftigkeit dessen. [00:49:48] Keine Schaunotizen Moqup Mockups mit HTML5. Avoiding Faux Weights And Styles With Google Web Fonts Ein Artikel über die richtige Einbindung von Google Web Fonts. CSS Parser Ein CSS Parser aus JavaScript. DailyJS: JS101: The Function Constructor DailyJS erzählt Euch mal was über den Function Constructor. JSConf.US 2012 Videos Die Vorträge von JSConf.US Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Schepp war nicht da, aber mit Rodney, Hans, Kahlil und Peter an Bord waren wir trotzdem beschlussfähig. Haben wir schon erwähnt, dass Rodney seit letzter Woche offizieller Bestandteil der Crew von Working Draft ist? Glückwunsch Rodney! [00:00:22] News Fullscreen-API Jetzt offizieller Working Draft Weniger Prefixes in Firefox Ab Version 16 sind Animationen, Transitions, Transforms und Gradients nicht mehr geprefixt Schaunotizen [00:01:14] Why no FileSystem API in Firefox? Jonas Sicking erklärt, warum wir nicht damit rechnen sollten, die File System und File Writer zeitnah im Firefox vorzufinden. Andere APIs wie z.B. Indexed DB und Web Storage können fast alle Aufgaben der FS-API übernehmen. Wir gehen im Prinzip d‘accord und finden auch, dass die Alternativen einfach viel schöner sind, als der elaboriert-javaeske Code, der bei der FS-API anfällt – man sehe sich nur mal dieses Tutorial an. Und wer gar nicht ohne File System API kann, dem helfen (auf Indexed DB aufsetzende) Polyfills. [00:16:06] Chrome Apps: JavaScript Desktop Development Google hat auf der diesjährigen Google I/O mal wieder die Revolution angekündigt – diesmal sollen‘s Webapps auf dem Desktop werden. Klingt eigentlich ganz schön, nur Peter fühlt sich an Adobe Air erinnert und fragt sich, warum man sich Web-Gefrickel auf der Clientseite wünschen sollte. Immerhin sollen die entstehenden Technologien in die System Applications Working Group eingebracht werden, so dass vielleicht der eine oder andere Webstandard daraus entsteht. [00:30:42] Keine Schaunotizen Git in 15 Minutes Großartiges interaktives Tutorial. GitHub Android App Released Github – jetzt auch für alle, die sich kein iPhone leisten können! PHP – The right way Versucht, den zahllosen ranzigen Tutorials im Web die Stirn zu bieten. Replacing Text in DOM Diese Technik kommt auch mit größeren Tag-Verschachtelungen klar und liefert ein valides Ergebnis. iOS has a :hover problem Erklärt, unter welchen Umstände iOS einen Klick/Tap als :hover interpretiert. TYPO3 Codesprint Freiburg Hans will mit euch am 13. Juli Typo3 aufmöbeln. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Die gesamte Crew war an Bord, allerdings leider auch die Skype-Dämonen. Wir hoffen dass die Themen-Menge für die sporadischen Audio-Fails kompensiert. [00:00:16] News New (experimental) CSS feature: Hierarchies Jetzt zum ausprobieren in Webkit Nightlies Web Intents Seit kurzem offizieller W3C-Draft Schaunotizen [00:01:08] Editoren & IDEs Web-IDE Cloud9 stellt (unter anderem) sein neues Collaboration-Feature vor, während Adobe mit Brackets seine eigene Fassung eines Online-Codeeditors veröffentlicht (mit einigen sehr schicken Features). In der Offline-Welt ist derweil Sublime Text 2.0 Stable erschienen. Ebenfalls offline, aber nicht ganz so traditionell kommt Light Table daher, von dem es mittlerweile erste Brocken zu sehen gibt. Wir finden die Auswahl super, aber können Online-IDEs auch wirklich alles leisten, was ihre Offline-Verwandten können, z.B. Buildprozesse mit PNG-Optimierung? Möglich sein sollte es eigentlich. Peter baut sich seinen eigenen Cloud-Editor, indem er sein Sublime Text 2 nebst Einstellungen mittels Ubuntu One zwischen seinen Rechnern synchronisiert. [00:20:42] Die Zukunft von jQuery jQuery 1.8 ward angekündigt! Neu ist neben automatischen Vendor-Prefixes und so mancher internen Aufräumaktion vor allem Modularität, ganz ähnlich wie bei MooTools. Auch für die Versionen 1.9 und 2.0 laufen bereits die Planungen. Beide Versionen sollen die gleiche API haben – der einzige Unterschied ist, dass sich 2.0 die Unterstützung für alte Internet Explorer spart. Genaueres ist den Slides der jQuery Conference 2012 keynote zu entnehmen. [00:34:20] Yeoman Yeoman hält sich für eine Sammlung von Tools für Frontend-Entwicklung, Kahlil spricht hingegen einfach von „Grunt auf Crack“. Zusätzliche Features sind im wesentlichen Presents und ein paar Extra-Plugins für Grunt. Peter sieht nicht ganz ein, warum er sich von irgendwelchen Hanseln Grunt vorkonfigurieren lassen sollte, wenn er das doch selbst ganz gut kann. [00:54:23] Chrome für iOS Chrome für iOS ist da und findet durchaus unser Gefallen. Er kommt zwar notgedrungen ohne V8 daher und ist daher sogar eigentlich noch langsamer als Safari, aber ein paar Speed-Schmankerl gibt es trotzdem. [01:04:47] Keine Schaunotizen Retinafy your Website Zum Ausdrucken und aufhängen. Tinycon – Favicon Alert Bubbles A small library for manipulating the favicon Introduction To JavaScript Unit Testing Autor Jörn Zaefferer ist für QUnit, das Testframework von jQuery, verantwortlich. Symbolset Eine bessere Icon-Font. Recommendations for building smartphone-optimized websites Google sagt wie sie’s gern hätten. Google IO 2012 Notes Gesammelt von Christian Heilmann. SirPepe/HTML5Resources Peter sammelt Links. Repo.js Sehr schick: Github-Projekte direkt in Websites einbetten! Peity Dynamisch generierte Inline-Graphen. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Überraschung: Sowohl Schepp als auch Peter waren zur Abwechlsung mal wieder an Bord. Der ewige Rod vertrat Hans und Kahlil. [00:00:22] News It’s Official, CSS Media Queries Are a Web Standard CSS3 Media Queries sind eine fertige W3C Recommendation Schaunotizen [00:00:55] The Sabotage of Do Not Track Kommt er oder kommt er nicht, der Do-Not-Track-Header? Und wenn ja, wie? Seit der Microsoft-Ankündigung, den IE10 per Default DNT:1 schicken zu lassen regt sich Widerstand bei den Werbenetzwerken. Ohne irgendwelche Gesetzgebung, als reiner Webstandard, wird es wohl schwer für Do Not Track … [00:18:30] I Want a DAMNodeInserted Event Epischer Hack implementiert einen primitiven DOM-Observer für Insertions, quasi als Teil-Polyfill für die in Revision 71 schon besprochenen DOM Mutation Observers. Der Trick ist zwar recht abgefahren, für Dinge wie accessifyhtml5.js aber sicher von Wert (falls man nicht gerade jQuery verwendet und die entsprechenden Hooks benutzt). [00:29:05] X-Tag – Web Components Workshop und Working with CSS Regions and Shadow DOM Präsentation eines Polyfills für Web Components (ihr wisst schon, Shadow DOM und so) und ein Adobe-Artikel zur Kombination von Shadow DOM und CSS3 Regions. [00:42:35] Der IHK-Zwang muss abgeschafft werden Vladimir Simovic erklärt uns warum der IHK-Zwang in die Tonne getreten gehört. Wir gehen d’accord und fordern zum Unterzeichnen der dazugehörigen Petition auf. [00:57:05] Keine Schaunotizen reFiddle JSFiddle für Regex. Asynchronous programming and continuation-passing style in JavaScript Der Doktor erleuchtet uns über asynchrones JS. DailyJS #js101 Artikel für JavaScript-Einsteiger. Grunt plugins published to Npm Damit man nicht mehr selbst Tasks bauen muss. pageguide.js An interactive guide for web page elements using jQuery and CSS3. 10 things you didn’t know JavaScript could do Von @asciidisco. Cool URIs don’t change Steinalt, aber immer noch relevant und richtig. Shumway & bikeshed.js Flash-Interpreter in JS. CSS generated content and screen readers Die lesen das Zeug vor! Skrollr Scrolling-Library ohne Dependencies. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Dieses mal trafen sich Hans, Sebastian Golasch aka @asciidisco und Kahlil in Skype, um sich durch einen stattliche Anzahl an Themen zu arbeiten. [00:00:40] News image-resolution in Webkit CSS Variables in WebKit (prefixed) Border-Image in Firefox 15 Opera 12 ist da Die IE7-Steuer Schaunotizen [00:02:21] Zombie.js Ein schneller, kopfloser Browser auf Node.js Basis um JavaScript zu testen. Nützlich? [00:14:15] Auf echten mobilen Endgeräten testen ohne Bankrott zu gehen Brad Frost spricht über die Anschaffungskosten für mobile Endgeräte, die man zum testen braucht und macht Vorschläge, wie man Kosten sparen kann. Wir reden darüber und über die weiteren Aufwände, die beim Testen von mobilen Geräten aufkommen. [00:25:34] Mobile Safari auf iOS 6 Welche Features bringt Safari in iOS 6 für uns Webentwickler? [00:31:42] Volo.js Sebastian erklärt uns ausführlich was es mit Volo.js und anderen Dependency Managern für JavaScript im Frontend auf sich hat. [00:45:54] JavaScript Doc Tools Sebastian und Kahlil tauschen sich über ihre Erfahrungen mit JavaScript Dokumentations-Tools wie YUI Doc und docco aus. [00:56:05] Keine Schaunotizen Gradient Finder Findet CSS-Gradients in einem Bild. Mozilla CSS Extensions Liste aller mozillaspezifischen CSS-Erweiterungen. Debunking Responsive CSS Performance Myths CSS Performance-Mythen entkräften ECMAScript 6: Maps, Sets und Weak Maps Peter Kröner über neue JavaScript-Features. Require.js Hogan Plugin Templates im Buildprozess direkt kompilieren. EditorConfig Editoreinstellungen projektweit festlegen. How Browsers Work Internally (Video) Talk von Tali Garsiel auf der Front-Trends 2012. memSQL memSQL ist angeblich 30 mal schneller als SQL Pew Pew Manifesto Adobe propagiert, daß sich JavaScript für große Projekte nicht eignet. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/