Als Podcast versuchen wir die Qualität der Aufnahmen hoch zu halten. Dafür verwenden wir Equipment und Tools, die nicht kostenlos sind. Und jede Folge kostet Zeit: Aufnehmen, Schneiden und Shownotes schreiben, Gäste und Termine koordinieren.
Mit rund 15.000 Downloads pro Folge im Schnitt haben wir auch Herausforderungen im Hosting zu bewältigen.
Um diese Kosten decken zu können, suchen wir Sponsoren. Wir glauben, dass unser Podcast eine gute Plattform ist, um darüber gleichgesinnte Programmierkollegen als Verstärkung für Euer Team zu finden. Wenn Ihr das auch so seht, dann sprecht doch mal mit Euren Chefs.
Bei Interesse, kontaktiert uns per E-Mail: sponsoring@workingdraft.de.
Heute sprechen wir über Container-Software wie VMs, Docker und Kubernetes und wie diese ineinander greifen.
Keine News
Schaunotizen
[00:00:34] DevOps – Was sind eigentlich diese Container (und mehr)?
Erst mal müssen wir klären, was es mit diesen Container-basierten Systemen eigentlich auf sich hat und wie Docker dieses System umsetzt. Dazu sprechen wir über Virtual Machines und wie diese sich im Gegensatz zu Docker positionieren. Danach gibt Frederic uns einen Einblick in Kubernetes und was das System tut.
Wir haben uns kurz vor Heiligabend den Mario Heiderich eingeladen, um über grauenvolle, abstruse und schier unlösbare Sicherheitslücken moderner Browser zu reden. Der richtige Stoff für besinnliche Weihnachtsstimmung und frohlockende Ausblicke ins neue Jahr!
Schaunotizen
[00:00:11] DOM Clobbering, XSS via CSS, Template Injection, etc.
Mario Heiderich, ehemaliger Webentwickler, heutiger Security-Experte, erzählt uns von den ganzen, dunklen Seiten der modernen Webentwicklung, die verheerende Schäden anrichten können, ohne das wir uns richtig wehren können. So beschreibt er aktuelle Sicherheitslücken in den Template Engines von AngularJS oder KendoUI und hält auch fest, dass diese Dinge gerne von den Bibliotheksherstellern auch mal auf die lange Bank geschoben werden (wie beispielsweise Frederic Hembergers jQuery Pull Request von „neulich“ zeigt). Es gibt Hilfestellungen, wie beispielswiese Marios DOMPurify, mit dem man Zeichenketten auf verdächtigen Code prüfen und gegebenenfalls bereinigen kann.
Es muss allerdings nicht immer JavaScript sein. Mit CSS kann man mit Hilfe der @-moz-document Regel und Regular Expressions im Firefox ganz einfach Session Token aus der URL klauen. Mario erklärt ausserdem, wie man die Paint-Zyklen der Browser und CSS Filter dazu ausnutzen kann, um auf bestimmte Zeichen zu schließen, die der Benutzer eingibt. Zukünftige Spaßquelle bieten SVGs im Allgemeinen und SVGs in Webfonts im Speziellen.
Ebenfalls lückenreich und angriffsanfällig ist der DOM. Mit In the DOM, no one will hear you scream gibt es einen mittlerweile sehr bekannten Talk von Mario, der uns das Prinzip des DOM Clobbering näherbringt. Der Abwärtskompatibilität von HTML sei es geschuldet, dass man derartige Dinge überhaupt durchführen kann.
Dass man allerdings auch mit kommenden Technologien allerlei Unfung anstellen kann, zeigt der Ausblick auf Template Strings in EcmaScript 6. Mario sieht sich in seiner Rolle für die nächsten Jahre auf jeden Fall beschäftigt.
Abhilfe gewünscht? Mario lässt uns nicht im Schneeregen stehen, sondern gibt auch ein paar hilfreiche Schutzhinweise. Für hundertprozentige Absicherung empfiehlt die Workingdraft Crew eine Ausbildung zum Reisbauer auf dem zweiten Bildungsweg.
Weitere Links zu den Themen, die besprochen wurden:
Schon wieder ein Flexbox Tutorial? Ja! Dieses zeigt allerdings interaktiv und ausführlich, was es mit den Properties flex-grow, flex-shrink und flex-basis auf sich hat.
Die Stammbesetzung von Schepp, Peter, Hans und Stefan durfte in der aktuellen Revision Frederic Hemberger als Gast begrüßen, um uns über die unterschiedlichen Use Cases von Vagrant zu informieren. Spontan stieß auch noch unser treuer Hörer Marius hinzu, der ebenfalls in die Lobeshymnen einstimmte.
Die Entwicklungsumgebung braucht Java, man will sich die eigene Maschine aber nicht versauen? PHP in einer Uraltversion gefordert, die man lokal nicht mehr zum Laufen kriegt? Oder einfach zwischen den Kollegen die gleichen Rahmenparameter für die Entwicklung herstellen? Mit Vagrant alles kein Problem. Frederic und Stefan sind seit längerem Fan des Commandline Tools, welches das Aufsetzen, Steuern und Konfigurieren von virtuellen (Linux-)Maschinen kinderleicht und versionierbar macht. Die beiden machen — unterstützt von Marius — dem Rest der Truppe die Vor- und Nachteile an einigen Beispielen schmackhaft und sprechen vom ultimativen Test- und Reproduzierbarkeitsnirvana. Wer auf den Geschmack gekommen ist und mehr als Ubuntu braucht, wird übrigens auf Vagrantbox.es fündig. WordPressentwickler sollten sich VagrantPress genauer ansehehn.
Die Hörerfrage von Marius wurde nicht nur über Twitter, sondern auch gleich live in der Sendung vom Fragesteller persönlich eingeworfen: Welche client-seitigen Fehlerreporting Tools verwenden wir eigentlich, und welche Dienste sind uns da am geläufigsten? Frederic schwört auf eine eigene Lösung, bestehend aus ca. 60 Zeilen Code, die ihm beim Ermitteln von Edge Cases schon einige Male enorm geholfen hat. Außerdem gab Paul Irish auf Google Plus einen guten Überblick über geläufige Services.
Der Application Cache war als Offlinemechanismus eine durchaus ambitionierte Angelegenheit, ging bei uns aber nie über den Demostatus hinaus. Wir erörtern die Gründe und geben auch Positivbeispiele. Erwähnung findet auch Frederics Manifest Validator und ein Blick in die Zukunft mit Service Workern.
Wer mit Bower und Sass Komponenten arbeitet bzw. solche sogar entwickelt, kann in dieser Ode an das !default Flag erkennen, wie man diese für Außenstehende konfigurierbar macht.
Stefans Wahlheimatstadt Linz bekommt eine Entwicklerkonferenz. Eine einmalige Gelegenheit mit einem ansehnlichen Line-Up, auch für Frontend Entwickler.
Man lernt eben nie aus: Im OS Terminal kann man bei gedrücktem Option Key und einem Klick die Cursorposition ändern. Enorm hilfreich bei langen Commandline-Befehlen.
Die Not macht erfinderisch: Aus akutem Mangel an Themen zauberten Schepp, Peter und Stefan eine sehr JavaScript-lastige Revision aus dem Hut, die sich mit brandneuen bzw. noch nicht so geläufigen Technologien auseinandersetzt:
Bei seinen Arbeiten am object-fit Polyfill mit Anselm stieß Schepp auf die (älteren, mittlerweile obsoleten) DOM Mutation Events bzw. die (neueren, flotteren) Mutation Observer, mit denen sich Änderungen an DOM Knoten ab IE9 fein überwachen lassen. Schepp erzählt von seinen Erfahrungen und nennt Anwendungsmöglichkeiten, und verrät auch wie man rein theoretisch im alten IE8 etwas ähnliches nutzen könnte.
Aus dem Webtechnologienlabor des Erklärbärs kommt ein feiner Artikel zu den neuen Generator Funktionen, die mit ECMAScript 6 spruchreif werden, und in Chrome via Flag und den Nightly Builds von Firefox sogar schon eingesetzt werden können. Peter erklärt Syntax und Funktionsweise und gibt einen Anwendungsfall an, mit dem man der Callback-Hölle entfliehen und ins asynchrone Nirvana eintreten kann. Das Schöne: Mit ES6 auf ES3 Transpilern wie Traceur und dem dazu passenden Grunt task lässt sich das ganze sogar heute schon einsetzen!
jQuery Plugins seien passé? Nicht wenn man so ein sauber implementiertes und sogar auf Touchgeräten absolut funktionierendes Sliding Control vorgesetzt bekommt.
Auf die IndexedDB mit der aus localStorage bekannten API zugreifen. LocalForage von Mozilla macht das möglich.
Advent, Advent …
Die besinnlichste Zeit des Jahres wäre nicht dasselbe ohne die beliebten Advent(s)kalender von 24 ways, Perfplanet und natürlich den Webkrauts. Gerade bei letzterem empfehlen wir Frederic Hembergers HTTP Header Artikel.
Google bastelt einen Performance-Proxy für mobiles Surfen, vergleichbar mit Opera Turbo. Jede (nicht-HTTPS) Anfrage wird durch einen Google-Server getunnelt, der Performancetuning mit z.B. SPDY und mod_pagespeed vernimmt, bevor die Daten an den Nutzer weitergeleitet werden. Performance-Papst Schepp findet die Idee total klasse, während sich Peter fragt, ob man wirklich jeden seiner HTTP-Requests zu Google tragen möchte – viel besser wäre es doch, die Mobilfunknetze auszubauen.
Noch sind Media Queries Level 4 alles andere fertig, aber ein bisschen Spec-Exegese kann man schon betreiben. Der Artikel von Stu Cox und wir reiben uns ein wenig am Media Feature pointer, das nicht ganz durchdacht scheint. Nicht zuletzt fehlt eine Option für den Minority Report Mode. Wäre es nicht besser, wenn wir einfach weniger Annahmen über die Eingabegeräte der Nutzer machen würden?
Ilya Grigorik will, dass wir genauere Annahmen über die Endgeräte der Surfer machen können und spezifiziert einen HTTP-Header für solche Informationen. Peter fühlt sich bei sowas an die History of the browser user-agent string, Viewports und andere Flunkereien durch Browser erinnert und fragt sich, warum dieses mal alles anders sein sollte.
Old and busted: MODx. New Hotness: ProcessWire! Der ehemalige MODx-Pontifex Marc und Peter granteln über Fehlentwicklungen bei MODx und Marc sowie CMS Critic kennen die Lösung. ProcessWire ist ein relativ neues CMS, das alles einfach hält und das richtig macht, was MODx in jüngerer Zeit so verbockt.
Sueddeutsche.de hat sich einen Relaunch gegönnt. Während das Ergebnis aus Designperspektive ganz ok ist animiert die technische Umsetzung doch eher zum Gruseln. In Anbetracht recht erratisch erscheinender Tag-Verteilung nennt Marc den Quelltext „verunfallt“ und in der Tat muss man sich fragen, warum man eine seit Monaten veraltete jQuery-Version gleich zwei mal einbettet. Responsive ist das Ganze natürlich nicht, aber das wäre bei den ca. 2 MB Datenvolumen ohnehin nicht besonders hilfreich. Der Aspekt der Barrierefreiheit ist auch eher eigenwillig umgesetzt worden. Summa Summarum: Epic Fail.
Während alle anderen auf tollen Konferenzen rumturnen, trümmerten Sebastian, Anselm, Frederic und Peter eine weitere Revision eures Lieblingspodcasts ein. Extradicker Dank geht an Schepp, der die total mißratene Tonspur noch einigermaßen gerettet hat.
Unfasslich aber wahr: je nach TLD (!) macht der mobile Safari mal dieses, mal jenes. Das war allerdings nicht der größte Smartphone-Hersteller-Fail dieser Woche …
Mithilfe eines Iframes (ihr seht, es hat etwas mit Webentwicklung zu tun!) kann man Samsung-Telefone bricken. Nachdem man vor lachen wieder Luft bekommt, sollte man eine Fix-App wie diese installieren um sich abzusichern. Mit einem Hersteller-Update ist nicht zu rechnen, denn das würde bedeuten, dass Smartphones vollwertige Computer sind und das wollen SIE eigentlich gar nicht. Die Aluhüte Frederic und Peter verweisen auf den war on general computation.
BrowserID (nicht zu verwechseln mit dem ranzigen Theming-System) bietet einen Login für das ganze Web … so wie OpenID nur in benutzbar. Und Persona, Mozillas Implementierung davon, ist nun in der Beta-Phase. Besonders schön ist, dass eine Migration vom Jetzt-Zustand in die BrowserID-Welt möglich scheint, da das System ein überzeigendes Design hat. Finden wie gut!
TypeScript erschien erst wenige Stunden vor der Aufnahme der Sendung, aber ein bisschen oberflächlichen Spaß wollten wir und nicht nehmen lassen. Angeblich ist TS die Secret Sauce für JavaScript Development at Application Scale, aber wir ziehen eher kritische Vergleiche zu CoffeeScript und Roy.
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.
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.
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!
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.
