Working Draft

Anselm, Hans, Peter und Stefan versammelten sich in vorösterlicher Stimmung um in Eintracht mal wieder festzustellen, wie kaputt doch alles ist. Schaunotizen [00:00:12] That’s so fetch! Jake Archibald verteidigt die unter Beschuss geratene Fetch-API. Fetch soll als Ersatz für das alterwürdige XHR dienen, wird aber unter anderem kritisert, weil man laufende Requests (noch) nicht abbrechen kann. Man diskutiert darüber und denkt über abbrechbare Promises nach, was Peter aufs heftigste kritisiert. Streams wärend vielleicht sinnvoller. Während das unfertige Fetch bereits in neue Noch-Nicht-Standards wie Service Worker integriert wird, Object.observe() ziemlich kaputt ist und asynchrone Funktionen (mit dem gleichen Nichtabbrechbarkeits-Problem wie Fetch) dank BabelJS bereits verwendet werden diskutieren wir, ob heutzutage nicht zu viel halbgares Zeug im Browser landet. [00:32:20] Zentralisierte dezentrale Versionskontrolle In der Woche vor der Aufnahme dieser Revision war Github tagelang aufgrund von DDOS-Angriffen kaum zu erreichen. In Folge dessen war Bower kaputt, manche Builds funktionieren nicht – wir berichten von unseren Erfahrungen und machen uns Gedanken über mögliche Abhilfen. Man kann sich zwar ein eigenes Zentralrepository stricken (z.B. mit GitHub Enterprise oder GitLab), muss da aber das Für und Wider sorgfältig abwägen. [00:54:35] Keine Schaunotizen Gulp Cheat Sheet Nomen est omen. GitHub TODO > Issue Hook Git-Hook, der TODO-Kommentare in Github-Issues verwandelt. So Coded 2015 Ist eine Konferenz, müsst ihr hin. Front Trends Ticket von Hans Hans hat Tickets zur Front-Trends 2015 übrig und will sie loswerden.

Rodney, Anselm, Schepp und Stefan trotzen sämtlichen Bahnproblemen und stellen Schlechtredner gnadenlos bloss. [00:00:18] News Opera Mini server upgrade Operas Presto existiert tatsächlich noch. Und hat sogar ein Update erfahren: Auf den Render-Servern des Opera Mini. Flexbox, rem Einheiten und vieles mehr sind jetzt auch nun hier verfügbar. Schaunotizen [00:03:07] React is a terrible idea Kaum ein weiteres Pamphlet ging so viral wie Panda Strikes Äpfel und Birnen Vergleich zu React. Wir schütteln verbal Köpfe und zeigen deutlich, warum dieser Beitrag auf so vielen Twitter-Zeitleisten kam, und warum die eigentlichen Inhalte mehr schlecht als recht sind. Man hört schon in den Schaunotizen den allgemeinen Konsens heraus, wie wir zu dem Thema stehen, und hinterfragen kritisch und reflektiert diverse Punkte aus dem Schrieb. [00:46:40] Keine Schaunotizen Lint like it’s 2015 ES6, Babel, ESLint? So geht’s. Introduction to fetch() fetch() (a.k.a das native $.ajax) gibt’s nun in Chrome, der Artikel erklärt die Funktionsweise. Push Notifications on the open web Notification API und Web Push Notficiations jetzt in Chrome 42. Hier wird erklärt, wie man solche entwickelt. Detecting injected content from third-parties on your site Der Titel sagt alles. Gute Sicherheitslehre von Paul Kinlan. UI Animation Reviews: Web Navigation Wieder mal ein UX Thema. Von Val Head im Screencast.

HTML5, lange nach dem Hype. Was war gut, was weniger, was nutzen wir tatsächlich und wie hat sich die Weiterentwicklung geändert. Hans, Peter und Stefan resümieren. Schaunotizen [00:00:10] HTML5 number inputs – Comma and period as decimal marks Den Artikel über schwer lokalisierbare number-<input>s nehmen wir zum Anlass um über Erfolg und Misserfolg von HTML5 Technologien zu reden. Wo ging gewaltig was schief, welche Dinge sind passabel geraten. Wie schaut der Entwicklungsprozess heute aus und gefällt er uns? Kleiner Spoiler vorweg: Wir sind nicht sonderlich begeistert und haben dutzende Verbesserungsvorschläge, sehen aber gewissen Dingen positiv entgegen. Frage an die Hörerschaft: Welche HTML5 Technologien habt ihr regelmäßig und gut im Einsatz, wo seht ihr Verbesserungspotential? Zum Thema gehören: das inputmode-Attribut, ein Video zu Zahlen (ohne Graf) und Douglas Crockford als Chuck Norris [00:34:12] Intent to deprecate: Insecure usage of powerful features Blink-Entwickler überlegen, Features wie Webcam, Geolocation, etc. nur noch über HTTPS zur Verfügung zu stellen. Eine Entwicklung, die wir begrüßen und entsprechend kritisch analysieren. [00:46:00] Keine Schaunotizen List of pseudo elements Vendor-prefixte Pseudo Elemente wollen wir nicht! Aber zu wissen, welche es für welche Hersteller es gibt, ist trotzdem eine gute Sache. ngConf Videos In der ersten Märzwoche fand die ngConf statt. Tolle Sachen sind dort passiert, und ein paar sehr lehrreiche Talks gabs auch. Alles dokumentiert auf YouTube. EmberConf Videos Beinah selbe Zeit, anderes Framework. Nicht minder schlechter Inhalt. Hochwertige Keynote und sehr interessante Einblicke in die aktuelle Entwicklung rund um Ember.js. Side Effects in CSS Phil Walton bricht eine weitere Lanze für BEM. Slideout Off Canvas Menü zum Dazuinstallieren? Und eines, das sogar funktioniert? Hans ist davon überzeugt.

Herr Rossi hat das Glück gefunden. In einem Spartaner. Jacob, seines Zeichens Project Manager bei Microsoft für den IE Nachfolger, erzählt ausführlich alles, was wir vom Projekt wissen wollten und uns nicht fragen trauten. Ab nun in Englisch: Shownotes [00:02:08] Project Spartan Jacob gives deep insights behind the strategy of Spartan, how it’s related to the Internet Explorer of old, and what we as web developers can expect from it. Included are: The difference between EdgeHTML and Trident, Enterprise Mode (not related to Leonard Nimoy) and overall performance discussion. [00:44:49] WebRTC and ORTC Microsoft’s browser was still lacking a WebRTC implementation. This will change with Spartan, and more: We also will get the next level called „Object RTC“. Jacob explains what’s behind. [00:47:45] Pointer Events vs Touch Events Jacob not only is deeply involved in Project Spartan, but has also co-written the sublime and solid Pointer Events API. He explains how it came to fruition, and how Microsoft will behave with not having Apple on board. While the Working Draft crew is strongly ranting about Apple’s broken Touch API, Jacob calls Safari developers „nice guys“ and tells how it came to reverse engineering the standard by the W3C and the implementation in Windows Phone. [01:00:09] Vendor Prefixes and what could be their successor? This also leads us to a discussion on vendor prefixes, which we all think are bad and should be avoided. Nevertheless, browser vendors need to test things. Jacob gives ideas. Nothing written in stone, tough

Peter, Rodney, Hans und Anselm nahmen sich aktuelle Themen zum Anlass, mal ganz grundsätzlich die Lage rund um Webfonts (bescheiden) und JS-Module (kompliziert) auszudiskutieren. Schaunotizen [00:00:10] Font Loading Revisited with Font Events Die Filament Group widmet sich in epischer Breite dem überaus kniffligen Problem des Webfont-Ladens. Da @font-face CSS bzw. das Rendering blockiert (mit unterschiedlichen Effekten in unterschiedlichen Browsern), gibt es zahllose Font-mit-JS-Lade-Techniken, die allesamt mehr oder minder Hacks sind. Es soll mal eine Font-Face-API geben (Polyfill, Wrapper-Library) doch eigentlich sind wir uns einig: hier liegt ein Browser- bzw. Spezifikations-Bug vor und die ganze JS-Hackerei ist äußerst unbefriedigend. [00:15:45] JavaScript-Module Dichtmachung des jQuery-Plugin-Repositories nehmen wir zum Anlass, ausführlich über JavaScript-Module (AMD vs. CommonJS vs. ES6) zu quatschen. Peter und Hans glauben dass es lange dauern wird bis ES6-Module in Browsern ankommen werden, sie aber dank Transpilern schon schneller adaptiert werden könnten, wenn die Entwicklerschaft will. Warum sie das ggf. nicht unbedingt möchte, erkkärt Rodney aus seiner Enterpriseperspektive. Nur wenn er demnächst ein komplett neues Script basteln würde, könnte sich Rod die Nutzung von ES6-Module vorstellen, wenn er denn davon ausgehen kann, dass die Community solche Module in der Breite denn schon akzeptiert (was fraglich ist). Und natürlich ist keine Moduldiskussion komplett ohne einen Schwenk in dem Themenbereich Isomorphic JavaScript. [00:52:22] Keine Schaunotizen Transitioning to SCSS at Scale Etsy hat seine bizarr gigantische CSS-Codebase auf SCSS transformiert und dabei einige bemerkenswerte Techniken zum Einsatz gebracht.

In trauter Zweisamkeit diskutieren Stefan und Anselm über den Drang zu sechzig Frames pro Sekunde. [00:00:21] News Browsersync 2.0 Die neue Version des Entwicklertools kommt mit graphischer Oberfläche und verstärktem weinre Support. Schaunotizen [00:03:10] FLIP your animations Geschwindigkeitsrausch: Paul Lewis stellt eine Micro Optimisation für CSS Transitions und Animations vor, und wir fragen uns nur: Warum gibt’s das nicht nativ in den Browsern? In der anschließenden Diskussion sprechen wir über Sinn und Unsinn dieser feingranularen Optimierungen und stehen für „nichts implementieren, was eigentlich schon so funktionieren sollte“ ein. [00:17:48] 60 fps on the mobile web Da der DOM für Flipbook viel zu langsam war hat man kurzerhand mit Canvas und React das ganze Ding selbst implementiert (The Fast). Damit aber auch gleich einen massiven Shitstorm der Community ausgelöst (The Furious). Wir hinterfragen die Mutter dieses Gedanken, loben die Vielseitigkeit von React und analysieren ab welchem Zeitpunkt man mehr Probleme damit schafft als löst. Gegen Ende stehen wieder einmal für „nichts implementieren, was eigentlich schon so funktionieren sollte“ ein und verweisen auf Chris Heilmanns exzellenter Sicht der Dinge zu diesem Thema. [00:41:51] CSS Variables are a bad idea Aaron Gustafson schreibt den „considered harmful“ Artikel der keiner sein möchte und spricht sich gegen CSS Variablen aus. Den Grundgedanken hinter seinen Überlegungen verstanden versucht Stefan allerdings zu missionieren: Sieht man die Spezifikation als Variablen im Sinne eines Präprozessors sollte man es wirklich besser bleiben lassen. Hat man allerdings den Scope der „CSS Custom Properties“ (so wie sie eigentlich heißen) erkannt, hat man damit ein mächtiges Werkzeug in der Hand, für das es viele ungelöste Use Cases gibt. Vorsicht sei geboten bei Poylfills wie Pleeease. Wenn man’s wirklich meint, lassen sich CSS Custom Properties nicht polyfillen, ohne massiv Browserfeatures nach zu implementieren. Und wir wissen ja, dass wir „nichts implementieren, was eigentlich so funtionieren sollte“. Ein Hinweis auf Rodneys Artikel zu dem Thema aus dem Jahr 2013 sei noch einmal sehr ans Herz gelegt. [00:56:39] Keine Schaunotizen Designing for the Elderly Worauf man achten muss, wenn man für ältere Menschen designed. Guter Artikel auf Smashing Magazine. Plumin.js Schreib dir deinen eigenen Webfont mit einer pfiffigen JavaScript API. Wir sagen nur Wow! Revisiting LESS Als Sass User schreibt Stefan über seine Erfahrungen mit der zwangsbeglückten Nutzung von LESS. Die herausragenden Features scheinen banal, sind aber am Ende die, die am glücklichsten machen.

Einen Dialekt im Team (bestehend aus Hans, Peter, Anselm und Stefan), zig Dialekte in unserer Themenliste. Schaunotizen [00:00:28] JavaScript Dialekte Wir nehmen den jüngsten Artikel des Doktors zu Googles SoundScript zum Anlass mal generell über JavaScript Dialekte und deren Sinnhaftigkeit bzw. -losigkeit zu reden. Wir erkennen, dass SoundScript etwas ganz anderes vorhat als Googles andere Dialekte wie AtScript und mit der zwingenden VM-Unterstützung wohl weiterhin Nische bleiben wird. Bei der Diskussion zu Dialekten und statischer Typisierung ebenso im Programm: TypeScript, CoffeeScript, Facebook’s Typechecker Flow, sowie der ursprüngliche und eingestampfte Versuch von EcmaScript in der Zombie-Version 4. Sämtliche Themen in Union finden sich dann in einem anschließenden Review zu EcmaScript 6 und den Möglichkeiten mit SweetJS und 6to5 (jetzt BabelJS). Mit der unausweichlichen Frage: Werden wir das überhaupt nutzen? Gegen Ende brechen wir allerdings eine Lanze für ReactJS (und den damit verbundenen JSX Dialekt): Sieht auf den ersten Blick etwas abstoßend aus, macht aber Spaß. [00:41:18] Keine Schaunotizen htaccess Snippets Mal wieder was für Apache konfigurieren? Hier gibt’s Rezepte. Gibt’s ebenso vom HTML5 Boilerplate für verschiedene Servertypen. Client-side templating’s major bug Tim Kadlec beschreibt seine sehr interessante Sicht bez. Client-side Templating. EcmaScript 5 compatibilty table Für mittlerweile ausrangierte Browser. Reframing Accessibilty for the Web Accessibility hat nicht zwingend mit Behinderungen zu tun. Der Artikel von A List Apart klärt gut auf. Codrops CSS Reference Sehr umfangreiche und mit vielen, vielen Beispielen ausgestattete CSS Referenz von Sara Soueidan.

Mit Ehrengast Michael Kühnel (@mkuehnel, Selbstbeschreibung „Webentwickler seit seit Netscape 4.7“) ackerten sich Schepp, Hans, Peter und Stefan durch die Themen der Woche. [00:02:22] News HTML5 Boilerplate 5.0 Die neueste Version des allseits beliebten Webseiten-Starterkits. Schaunotizen [00:02:54] 6to5, 2to3 Der neueste ES6-Transpiler im Hype-Durchlauferhitzer ist aktuell 6to5, laut der ECMAScript 6 compatibility table mit der größten Feature-Abdeckung überhaupt. Nachdem Hans eine mäßig steile ES6-These in den Raum geworfen hat, beginnt ein unausgeschlafener Peter über alles mögliche aus dem ES6-Dunstkreis (v.a. Klassen und die diversen Tools und Transpiler) abzuranten. Zentrale Aussage: so viel wird sich für Otto Normalentwickler gar nicht ändern, dann die meisten Features einer Programmiersprache benutzt man in 90% der Fälle eh nicht. [00:37:30] Yeoman Michael ist Yeoman-Fan und lässt seiner Begeisterung freien Lauf. Vor allem wirbt er dafür, eigene Generatoren zu bauen, was mit Hilfe der Docs und dem Yeoman-Generator für Yeoman-Generatoren (yo dawg) auch ganz einfach ist. Mit Inquirer.js wird Prompting einfach und auch testen ist ganz einfach. Selbst Generators für WordPress und Typo3 sollen in freier Wildbahn gesichtet worden sein. [00:57:19] Keine Schaunotizen FormatJS Diverse JavaScript-Libs um Daten nutzerfreundlich zu formatieren. Making Pinterest — Demystifying SEO with experiments Die wissenschaftliche Methodik (est. 1700) erreicht Pinterest bzw. Suchmaschinenoptimierer. Das ist schon eine Meldung wert! Devdocs.io Die Webdev-Dokumentations-Metasuchmaschine ist jetzt offlinefähig! [01:01:28] Jobbörse Software-Entwickler in Kassel gesucht Michaels Firma (Softwarehaus mit Sitz in Kassel und Bonn) sucht fähige Entwickler – vom Frontendler bis hin zum Java-Guru.

Ganz unverhofft gesellte sich diese Revision der gute Chris Heilmann auf einen Plauderabend zu uns. [00:00:45] News „WebKit’s JavaScriptCore and Web Inspector now have a code coverage profiler that tells you what JS code has executed“ Die News der Woche ist dieses neue Feature des kommenden Safari bzw. des jetzigen WebKit-Nightlys, mit Hilfe dessen man ungenutzte Code-Stellen in seinem JavaScript ausfindig machen kann. Schaunotizen [00:03:02] ES6 Template Strings Die neuen ESCMAScript 6/2015 Template Strings erlauben in ihren Backticks viele neue String-Spielereien, wie etwa Multiline-Strings, Variablen-Ersetzung innerhalb des Strings, Filterung und Internationalisierung. Mit dem Browsersupport sieht es leider noch nicht so gut aus, aber es gibt Transpiler und Polyfills dafür. [00:17:25] Chris Heilmann geht zu Microsoft Dass für Chris bei Mozilla die Luft ein wenig raus war, war ja bekannt. Dass er jetzt zu Microsoft geht war hingegen ein ganz schöne Überraschung (Aaron Gustafson übrigens ebenfalls). Wir sprachen mit Chris über seine Zeit bei Mozilla und seine Aufgaben und Pläne im neuen Job. Außerdem durfte auch Microsofts Spartan Browser in unserer Diskussion nicht fehlen. [01:06:42] Erkenntnis der Woche display: flex doesn’t work for button elements Rodney erzählt von seinen erfolglosen Versuchen, die Firefox-Buttons in eine Flexbox-Konstruktion zu zwängen. Er erzählt uns außerdem, warum das alles sowas von nicht funktioniert und welchen Workaround-Joker man erfolgreich ziehen kann. [01:17:40] Keine Schaunotizen JavaScript Application Architecture On The Road To 2015 Addy Osmani legt uns seine Sicht auf die JavaScript-Architektur des Jahres 2015 in einem ellenlangen Artikel dar. Lesenswert! A Vision for Our Sass Felicity Evans formuliert und erklärt in diesem ALA-Artikel Ihr Manifest für guten SASS-Code-Stil. Gehen wir sehr mit d’accord! Useful SVGO[ptimization] Tools Sara Soueidan bietet hier ein kleines Roundup an verschiedenen GUIs und Ausprägungen des SVG-Optimierers SVGO auf. Gutes Thema! Using WEBP/JPEG 2000/JPEG-XR/APNG Now With Picturefill and Modernizr Zoltan “Du Lac” Hawryluk, Urgestein der Webszene, widmet sich der Frage, welche Vorzüge die verschiedenen exotischeren Bildformate abseits von JPEG haben und wie man sie im Alltag einsetzen kann. Erschöpfend, gut!

Zur 205. begrüßen Anselm und Stefan Schrödingers Co-Host (ist er aktiv, ist er es nicht?) Kahlil Lechelt wieder im virtuellen Studio. Die (Wieder-)Entdeckung eines vielversprechenden Frameworks hat ihn zurückgerufen. [00:01:03] News IO.js Node.js ohne Node.js? Ein Open Source Fork der JavaScript-Umgebung beschäftigt die Szene. Dieser Beitrag klärt auf. Firefox 35 Allerlei sinnvolle Neuerungen in der 35er Version des Fuches. Schaunotizen [00:04:40] Perceived Performance & fetch() Folgender Gedankengang: Ein Polyfill zum kommenden fetch-Befehl wird veröffentlicht und kommt gut an (in Kürze: verdauliches XHR mit Promies). Ein gewisser Steve Souders bringt seine Meinung, dass es doch ideal wäre mit diesem Standard auch Ladebalken steuern zu lassen, um dem User eine gewisse Geschwindigkeit anzuzeigen, oder im schlimmsten Fall vorzugaukeln. Hat bei eBay ja auch gut funktioniert. Wir sprechen — im Vorgaukel-Falle — von unseren eigenen Erfahrungen und überlegen, wie so ein Standard ideal aussehen könnte. [00:26:46] Ampersand.js Aufgepumptes Backbone.js mit saftiger Tool-Chain im Hintergrund? Kahlil hat Ampersand für sich entdeckt und schwärmt uns im Beinah-Monolog entsprechend vor. Wer damit noch nichts zu tun hatte bisher, und sich nicht irgendwelchen Hype-Frameworks verschrieben hat, sollte durchaus einen längeren Blick darauf werfen. Ebenso erwähnt: Jade als Templating-Language und das Buch der AmpersandJS Entwickler Human Javascript. [00:55:18] Keine Schaunotizen GitHub Cheat Sheet Was mit Git und GitHub doch alles möglich ist. Tolle Kniffe, die oft unentdeckt bleiben.