Working Draft

Eine Kombination aus Sommerloch, EM, WWDC und Schepps Urlaub sorgt erneut für Magerkost bei den Themen. Kann man nichts machen! Dafür führen wir mit den News einen neuen Sendungsbestandteil ein, bei dem es in Zukunft (?) immer ein paar kurze Update-Durchsagen geben soll. [00:00:11] News Transitions, Transforms and Animations may be released unprefixed Die CSS Working Group erklärt Transitions, Transforms und Animationen für praktisch fertig und der IE 10 verzichtet auch bereits auf Vendor-Prefixes hierfür. MySQL Root Exploit In manche MySQL-Versionen kann man sich mit beliebigen Passwörtern einloggen. Schaunotizen [00:01:19] JSON vs. MessagePack vs. JSON5 Mit MessagePack, einer binären Abwandlung des JSON-Formats, meint jemand seinen Traffic halbieren zu können. Uns kommt das wie Blödsinn vor und wir sehen auch nicht so wirklich viel Potenzial für MessagePack in der Webentwicklung. Auch der Autor von MessagePack geht d‘accord. Besser finden wir da schon JSON5, eine ECMAScript5-konforme Erweiterung von JSON, die etwas weniger strikt ist – eine gute Idee für Konfigurationsdateien. [00:11:02] Keine Schaunotizen Third-Party JavaScript Development: The Future! Bocoup spekuliert über die Mittel der Zukunft für Third-Party-JS. gmaps.js Wrapper für die Google Maps-API, der alles sehr sehr sehr viel bequemer macht. Bunyip Automatisches, paralleles Client-Side-Unittesting in beliebigen Browsern. Trying out ECMAScript.next’s for…of loop in Firefox 13 Axel Rauschmayer über Iteratoren im kommenden ECMAScript-Standard. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Schepp war im Urlaub, Kahlil verhindert und die Themenliste war leer. Also besprachen Hans und Peter diesmal eben nur ein einziges Thema. Schaunotizen [00:01:02] Sweep the Sleaze Oliver Reichenstein meint, dass der Nutzen von Social-Media-Buttons (Facebook, Twitter usw.) zweifelhaft, der bei ihrem Einsatz entstehende Schaden für Image und Seitenperformance hingegen ziemlich sicher sei. Peter mag nicht ganz zustimmen und meint: wenn man es richtig macht, stören die Dinger zumindest nicht. [00:18:03] Keine Schaunotizen Code Painter Code Painter is a JavaScript beautifier that instead of asking you to manually specify the desired formatting style, can infer it from a code sample provided by you. Videos von Fluent 2012 Kurzweilige Vorträge von Nerds mit Kaliber. Sorting – We’re Doing It Wrong Rodney Rehm steigt aber mal so richtig tief in das Thema „sortieren in JavaScript ein“. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Zu Gast war diese Woche Anselm Hannemann, den wir mit seinem Fachwissen gerne wieder eingeladen haben. Außerdem waren der Schepp und Hans mit von der Partie. Schaunotizen [00:00:00] Quota Management API Wenn man mit client-seitigem Speicher experimentiert (localStorage, IndexedDB, File API) ist es schwierig abzuschätzen, wann der Speicher eines Geräts erschöpft ist. Dafür gibt es die neue Quota Management API, die genau dieses Problem lösen soll. [00:00:00] CSS Compositing & Blending Adobe veröffentlicht die neusten Spielereien, die sie sich ausgedacht haben. Dazu gehören das Composing und das Blending, die aus Photoshop, Illustrator und anderer Adobe Software bekannt sind. Für SVG gibt es diese Effekte bereits, nun also auch für CSS. Wir finden diese Entwicklungen super; nach Flash erkennt Adobe worauf es im Web ankommt! [00:00:00] CORS: Louis Rémi reicht’s nicht Möchte man asynchron Abfragen zwischen verschiedenen Domains absetzten, ist man aktuell ziemlich beschränkt. Dieses Problem soll durch CORS gelöst werden. Louis Rémi ist allerdings der Meinung, dass das nicht reicht, da Dienste wie Twitter oder Facebook ihre Schnittstellen noch nicht CORS-ready zur Verfügung stellen. Der Artikel erschien bereits Ende letzen Jahres. [00:00:00] Die Responsive Images Story Anselm berichtet über die aktuelle Lage der Responsive Images. Von seinem ersten Vorschlag auf der Mailinglist, über die Entstehung der W3C Community Group, bis hin zu den jüngsten Kontroversen gibt Anselm eine gute Übersicht. Wir sprechen außerdem drüber, was unsere Vorstellungen von Responsive Images sind und wie die W3C und die WHATWG ihre Arbeit machen. [00:00:00] Über die Smashing Conference Die Smashing Conference wird zum ersten mal in Freiburg abgehalten. Bastian Allgeier hat die Website für die Konferenz mit seinem file-basierten CMS Kirby gebaut und beschreibt wie. Wir sind große Fans von Kirby und unterstützen auch die Smashing Conference gerne. Wer mehr Infos zu Freiburg möchte, schreibt Hans gerne eine Mail. [00:00:00] Keine Schaunotizen Adobe Brackets: An Introduction Eine Einführung in Adobes Open Source Code Editor, der für Front-end Entwickler gemacht wird. Das Projekt ist auf GitHub und in HTML, CSS und JavaScript programmiert. NUMBOO Magazin Das NUMBOO Magazin ist ein deutsches Magazin für Webdesign und Webentwicklung mit einigen interessanten Themen. CSS Flexbox Carousel Andi Smith zeigt, wie man ein Carousel mit Flexbox bauen kann. JavaScriptSQL Eine Datenbank-Engine komplett in JavaScript geschrieben. Über fixe Positionierung und scrollen in iOS Remy Sharp geht auf die Probleme mit fix positionierten Elementen im zusammenwirken mit dem Scrollen auf iOS-Geräten ein und beschriebt die besten Lösungswege. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Die Stammbesatzung trat an und brauchte zum Sortieren der Themen länger als für die Aufnahme. Trotzdem ist noch einiges an Material übrig geblieben. Schaunotizen [00:00:22] SASS versus LESS Chris Coyier vergleicht SASS mit LESS und kürt ersteres zum Gewinner. Für rechten Widerspruch reicht es bei uns nicht, da wir SASS in Kombination mit Compass und CodeKit auch nicht so ganz schlecht finden. Die etwas nerdigere Fraktion findet aber auch die Kombination Stylus + Nib + Grunt ganz gut. Naja, jeder wie er will :) [00:22:00] Media Queries Level 4 CSS4 ist im Anmarsch und die neuen Media Queries führen neben einem Script-Detektor auch ein Feature ein, mit dem man herausfinden kann, ob ein Gerät so etwas wie ein „Mousover“ (d.h. die Hover-Pseudoklasse) überhaupt leisten kann. Ob ein Gerät einen Tochscreen hat, kann man zwar schon mit proprietären Mitteln herausfinden, aber ein Touchscreen muss Mouseover-Funktionalität ja nicht zwingend ausschließen. [00:27:57] Google Bot now crawls arbitrary Javascript sites Wir sind uns überhaupt nicht einig, ob das nicht schon alter Käse ist und ob man aus dieser Entdeckung irgend etwas für die tägliche Arbeit ableiten sollte. Was meint ihr? [00:41:20] Google Chrome Canary: webkitdirectory attribute walkthrough Addy Osmani erklärt, wie man aus der HTML5 File API, einem neuen HTML-Attribut und etwas Trickserei etwas backen kann, dass Drag & Drop von ganzen Verzeichnissen in Webapps ermöglicht. [00:47:55] Keine Schaunotizen SpahQL Query-Sprache für komplexe JavaScript-Objekte. JSCheck-Tutorial Einführung in ein neues Test-Framework von Douglas Crockford, das mit Zufalls-Inputs arbeitet. Responsive Tables Ein Ansatz für Responsive Tabellen. Our Approach to Routing in Ember.js Man kann es so oder so machen. Ember.js macht es so. wysihtml5 – A better approach to rich text editing Qualität aus dem Hause Xing. How To Choose The Right Face For A Beautiful Body Typoraphie-Tutorial. GitHub for Windows Nach dem Github-Client für Mac gibt es nun auch einen für Windows. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Zur aktuellen Sendung fanden sich der Schepp, Kahlil und Hans ein, um wie gewohnt die wichtigsten Neuerungen und Entdeckungen der Woche zu besprechen. Schaunotizen [00:00:30] JavaScript-Fehler schneller Analysieren mit Error.stack Das Internet Explorer Team vom Microsoft erläutert, wie man mit dem neuen Error-Objekt in JavaScript leichter debuggen kann. Viel besser als zum Beispiel mit console.log() kann man mit Error.stack eine komplette Stack-Trace des Fehlers bekommen, den man abgefangen hat. Ziemlich gut! [00:08:23] CSS keyframe based JavaScript events Da JavaScript-Events für CSS Keyframe-Animationen irgendwie noch nicht so ausgereift sind, hat sich Ionuţ Staicu darüber Gedanken gemacht, wie man dem Zeit aktuellen Fortschritt einer Animation mit einem Event beschreiben kann. Mithilfe von requestAnimationFrame findet er eine Lösung. Wir grübeln allerdings noch über den exakten Einsatzbereich. [00:15:54] Let’s Get Physical (Units) Die aktuellen CSS-Einheiten wie em, px und % findet Boris Smus nicht ausreichend, um Styles für die verschiedenen Geräte der Gegenwart (Smartphones, Desktops, TVs…) zu schreiben. Deshalb plädiert er dafür eine tatsächliche physikalische Einheit einzuführen, die auch richtig funktioniert. Nicht so wie das im Moment mit mm, in und so weiter ist. [00:31:09] Hitch – Stärke Aussagekraft durch besseres CSS ist die Devise Hitch ist eine JavaScript Library, die als “Postprocessor” agiert und das angegebene CSS um Pseudoklassen wie :has erweitert. Damit bekommen Stylesheets ungeahnte Funktionen, die man vielleicht gar nicht braucht. [00:42:46] DOM MutationObserver – Auf DOM-Änderungen reagieren ohne die Performance zu killen Als Weiterentwicklung der Mutation Events sind die MutationObserver nun auch im Firefox gelandet. Wir sprechen darüber, wozu diese nützlich sein können und wie man sie aktuell einsetzen kann. [00:55:15] Keine Schaunotizen Tooling & The Webapp Development Stack Auf der jQueryConf präsentierte Paul Irish, welche Tools wir als Web-devs zur Zeit zur Verfügung haben. Gute Zusammenstellung. Application Cache is a Douchebag Wie man mit dem Applikation fertig werden kann oder eben auch nicht, beschreibt Jake Archibald in seinem ALA-Artikel. HTML5 Audio — The State of Play Von der HTML5 Audio API hat man schon länger nichts mehr gehört. Hier der aktuelle Stand. Giving the Velocity website a performance makeover Case Study zum Thema Performance Optimierung anhand der Website der Velocity-Konferenz. The Toolbox Eine Sammlung an hilfreichen Apps und Tools aus dem Bereich der Webentwicklung, die man so gerne wieder vergisst. jQuery Vector Maps SVG-basierte Karten als jQuery Plugin. cssarrowplease Kleine Pfeile mit CSS Pseudo-Elementen kreieren und den Code dazu kopieren! jQuery Knob Interessantes jQuery Plugin, das Rädchen erzeugt, die aussehen, wie ein Volume-Wheel und dazu noch super für Touch-Devices geeignet sind. jQuery.ish jQuery.ish ist eine Micro-JS-Library, die ein paar wenige jQuery-Funktionen beinhaltet. Genau richtig in manchen Fällen. How To Survive A Robot Uprising Wichtiger “Lehrfilm”, wie man einen Angriff von Robotern auf die Menschheit überlebt. Aufgrund der aktuellen Lage, bitte dringend ansehen! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

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/

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/

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] <dialog> 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/

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/

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/