#Notizen 01. März 2018 – 23. März 2018

Notizen März 2018

Ich versuche mich mal am beliebten "this month I learned" Format. Weil ich in den letzten Monaten aber immer gesammelt und nie gepublished habe, versuche ich es so: zu Monatsbeginn schreibe ich einen Anfang, und dann ergänze ich im Laufe des Monats. Das gibt auch Raum für kleine Sachen, die es nie zu eigenen Blogposts schaffen. Mal schauen wie das wird.

Default Parameters in Javascript ... nicht im IE 11

Fangen wir gleich mal an mit dem Fail der Woche. Einmal ZEIT Online Production kaputtmachen für alte Browser. Wie? Durch den Gebrauch von default Parametern in JavaScript:

function(myParam, optionalParam = true) { ... }

Das ist ein Feature aus ES2015 funktioniert deshalb leider nicht für den Internet Explorer 11 abwärts. Also, wenn man nicht babelt, muss man das wieder einkassieren und in der Funktion selbst den Default-Wert definieren:

function(myParam, optionalParam) {
    optionalParam = (typeof optionalParam !== 'undefined') ?  optionalParam : true;
}

document.currentScript

Das zweite JS Learning des Tages: man kann im JS Code dasjenige script-DOM-Element selektieren, in dem der Code läuft. Einfach via document.currentScript.

Detaillierter Artikel zu currentScript von Dr. Axel Rauschmayer mit veralteten Angaben zur Browser-Unterstützung. Caniuse bestätigt eine gute Unterstützung: [https://www.caniuse.com/#search=currentScript](Browser-Unterstützung von document.currentScript bei caniuse.com).

Allerdings wieder ohne den IE11. Und weil wir da ja keinen Bug haben wollen (siehe oben), gibt es einen schönen Polyfill:

var currentScript = document.currentScript || (function() {
    var scripts = document.getElementsByTagName('script');
    return scripts[scripts.length - 1];
})();

Wozu braucht man das? Um z.B. ein Script-Tag wegzuräumen, nachdem es seine Arbeit getan hat.

<script>
    var currentScript = document.currentScript;
    var parent = currentScript.parentNode;
    var newDiv = document.createElement('div');
    newDiv.setAttribute('class', 'wurstbrot');
    parent.replaceChild(newDiv, currentScript);
</script>

Im Übrigen, unintuitiverweise:

// String.replace Parameter Reihenfolge: search, replace
str.replace(regexp|substr, newSubStr|function);

// Node.replaceChild Parameter Reihenfolge: replace, search
parentNode.replaceChild(newChild, oldChild);

Ich dachte das sei eine Spezialität von PHP.

Ich lese begeistert den Software Lead Weekly Newsletter von Oren Ellenbogen, der auch das lesenswerte Buch Leading Snowflakes geschrieben hat.

Früher interessierte mich der Social Media Watchblog von Martin Giesler nicht so sehr. Für meinen Geschmack ging es zu sehr um "Plattform X hat jetzt Funktion Y" und "die 10 besten Tipps für Whatever". Ich habe ihn aber erneut abonniert, und freue mich dass es um mehr Meta-Theman geht. Mobile Payment via Wechat und Whatsapp, wie gehts bei der Google News Initiative weiter, Facebooks Rolle bei der Verfolgung der Rohinja oder eine Zusammenfassung zum Cambridge Analytics "Skandal". Themen wie Entlassungen von Mitarbeitern bei Snapchat überlese ich weiterhin.

Accessibility Weekly von David A. Kennedy: schöner wöchentlicher Digest zu Accessibility.

Accessibility Dashboard

Bin letztens über das "pa11y Dashboard" gestolpert, was Acessibility-Test-Scores für verschiedene Seiten auf einem Dashboard aufmalt. Das ist aber gerade im Umbruch. Ein Rewrite namens "Sidekick" ist WIP und funktioniert noch nicht. Da sind mein Kollege Valentin und ich auf die Idee gekommen, dass wir ja schon ein Dashboard haben, in das man pa11y-Testergebnisse reinmalen kann. Und zwar ein Graphite/Grafana, das wir für Sitespeed Performance Monitoring benutzen.

Also haben wir ein kleines CSript geschrieben, das pa11y-tests parallel laufen lässt und die Ergebnisse an eine Graphite Instanz sendet. Ergebnis ist ein kleines Repo: a11y-dashboard-connector: Es ist ein zaghafter Anfang, und noch hardcoded für unsere Zwecke, aber immerhin.

CSS Keylogger und andere Schweinereien

Keylogging via CSS: vor einigen Tagen ging ein GitHub Repo um, das zeigte, wie man CSS als Keylogger missbrauchen kann: CSS Keylogger.

input[type="password"][value$="p"] {
  background: url('/password?p');
}

In seinem Blogpost Third party CSS is not safe erfindet Jake Archibald weitere Möglichkeiten, wie 3rd Party CSS eine Seite manipulieren kann. Sehr spannend, aber nur nebenbei im Artikel erwähnt: wenn ein Angreifer die Cache Storage vollschreibt, kann er Clients dauerhaft kompromittieren, auch wenn das schadhafte Script längst von der Seite entfernt wurde. Fazit:

Third party content is not safe – Jake Archibald

Performance bei Wikimedia

Wikimedia hat ein eigenes Performance Team (Traumjob!), und wie es sicht gehört arbeiten die transparent. Also kann man in deren Backlog verfolgen, alle Dashboards ansehen, und sie veröffentlichen auch Blog-Posts.

Ethical Design and Development

Zwei schöne Artikel dazu: Ethical Design: The Practical Getting-Started Guide im Smashing Magazine und Oaths, pledges and manifestos: a master list of ethical tech values auf Medium.

Zu dem Thema ist mir das Buch "White hat UX" untergekommen, was ich mit gleich mal gekauft habe. Ich werde in diesem Blog berichten. Das eBook kostet nur $7.50, das kann man auch mal anonym an seine Produktentwicklung spenden.

Next Gerenartion Clearfix

Es gibt ein natives Clearfix in CSS. Chris Coyier schrieb schon 2016 darüber, Rachel Andrew Anfang 2017. Allerdings ist die Browser-Unterstützung recht mager: nur Firefox und Chrome unterstützen display: flow-root. Wenn ich jetzt den Draft-Revision-usw. Lebenszyklus der CSSWG verstehen würde...

Hinter Docker herräumen

Mein Kollege Wolfgang hat was schönes entdeckt: Docker-Container werden nicht automatisch gelöscht nachdem ein Job mit ihnen lief. Wir benutzen Docker für Sitespeed-Tests, die alle paar Minuten laufen. Das nimmt nicht viel Platz weg, aber summiert sich und verlangsamt auch einige Befehle. Man findet die Dinger via docker container ls --all, kann einmal durchwischen mit docker container prune und verhindert das Ansammeln, indem man den Job mit docker run --rm startet.

Resilient CSS

Jen Simmons https://hacks.mozilla.org/2018/03/how-to-write-css-that-works-in-every-browser-even-the-old-ones/

The idea of the web is, to work for everyone, independent of the device. A good reminder by Jen Simmons what the idea of the web is https://www.youtube.com/watch?v=u00FY9vADfQ

Lesetipps

Lasagne Code ist eine schöne neue Metapher, die ich im Artikel Lasagna code - too many layers? gelernt habe. Der Autor plädiert nicht gegen Layer im Code, sondern für die richtige Dosis und Art. Ich finde das Gleichnis auch noch auf einer anderen Ebene (no pun intended) spannend: bei der Infrastruktur. Einmal Proxy-Cache ist cool. Mehrere Ebenen mit eigenen Regeln und Verzweigungen führt zu einer Situation wie bei Spaghetti Code, nur als Lasagne.

"Die Sicherheitstechnik funktionierte wie vorgesehen - auf dem Niveau der 1960er Jahre, dem Tiefpunkt der Gesetzgebung in der Kerntechnik." – Sehr spannender postmortem Artikel zur Fukushima-Kernschmelze bei Golem.de.

China setzt eine neue Marke im Bereich Geo-Engineering: China needs more water. So it's building a rain-making network three times the size of Spain