In diesem Jahr war ich das erste Mal bei der JSUnconf in Hamburg. Praktischerweise habe ich ein Diversity ergattern können – vielen Dank nochmal dafür an die Organisatoren!
CoffeeJS – How I hacked my coffee machine
Dominik Kundel
Dominik und ein Kumpel haben sich überlegt, dass es cool wäre, wenn Alexa auch Kaffee machen könnte und haben dafür ihre Kaffeemaschine gehackt und zu einem IOT-Device gemacht. Zuerst haben sie die Maschine aufgemacht, um zu schauen, wie die Verkabelung etc. aussieht. Dann haben sie alles mit einem Tessel 2 verbunden, um herauszufinden, welche Pins für welche Funktion zuständig sind und haben alles noch ein wenig angepasst. Um die Kaffeemaschine zu steuern, wurde das Hyper Text Coffee Pot Control Protocol (HTCPCP) genutzt, mit dem man z.B. milk-type oder addition-type definieren und das coffee:// URI scheme nutzen kann. Alles wurde zusammengeschraubt und die Maschine lief – ein neues IOT-Device war geboren.
Alpha 2048 – Reinforcement learning in the browser
Lian Li
Lian hatte die Idee, das Spiel 2048 einem Computer mit Hilfe von Machine Learning beizubringen. Bei diesem Spiel ist das Spielfeld 4×4 Kacheln groß und es geht darum, dieses Grid in eine Richtung zu verschieben, um abgebildete Zahlen zu addieren. Mit jedem Spielzug kommt eine neue Zahl dazu. Man gewinnt, wenn ein Spielfeld den Wert 2048 erreicht. Das Spiel einer Maschine beizubringen stellte sich als gar nicht so einfach heraus, da es unter anderem schwierig war, einen Reward zu definieren. Lian hat Ansätze wie reinforcement learning (sag dem System, was etwas besser bzw. etwas schlechter ist) oder temporal difference learning (Monte Carlo Methoden) angewendet. Mehr Infos dazu findet ihr in meiner Sketchnote:
Web security in 2017
Johann Hofmann
Bei sicheren Webseiten sollten die Verbindungen, die Webinhalte und der Zugang zu den Fähigkeiten des Geräts (z.B. Push Notifications) sicher sein. Um sichere Verbindungen gewährleisten zu können, sollte man dringend zu HTTPS umsteigen, da Angreifer bei HTTP den Traffic abschöpfen und imitieren könnten. HTTPS schützt die Vertraulichkeit und Integrität von den Daten der Webseite und deren Nutzern während der Übertragung. Außerdem gibt es immer mehr Browser, die die Nutzer auf unsichere Webseiten hinweisen. Zertifikate kann man heutzutage z.B. mit Let’s Encrypt sehr einfach bekommen. Sichere Webinhalte sollten der Same Origin Policy (Gleiche-Herkunft-Richtlinie) und der Content Security Policy unterliegen. Zusätzlich sollte die Subresource Integrity überprüft werden, eine Sicherheitsfunktion, mit der der Browser verifizieren kann, dass die geholten Daten ohne unerwartete Manipulation geliefert werden. Sicheren Zugang zu Geräten erhält man, wenn man die nativen Zugänge verstärkt nutzt und pre-prompts nutzt, um den Nutzer im Kontext und ohne Überraschung anzusprechen.
How browsers work
Kruno Knego
Kruno hat sich angeschaut, wie ein Browser eigentlich arbeitet, denn er meint, dass man etwas erst richtig verstehen kann, wenn man es selber baut. Der Rendering Engine Flow sieht dabei wie folgt aus:
- Parsing: Das Dokument wird in eine Struktur übersetzt, die der Code nutzen kann
- Render Tree:
- wird generiert währen der DOM Baum gebaut wird
- die visuellen Elemente stehen in der Reihenfolge, in der sie erscheinen werden
- switch cases (none, inline, block,…)
- Layout:
- Position/Größe wird berechnet
- rekursiver Prozess beginnt im Root-Objekt
- Dirty Bit System
- globales und inkrementelles Layout
- Paint:
- Rendering Tree wird durchquert
- globales un inkrementelles Zeichnen
- spezifische Reihenfolge
Measuring Web Performance
Michael Geers
Was kann man messen?
- Seitenressourcen
- Wurde die Seite geladen?
- time to first byte
- Cachability
- SpeedIndex
- benutzerdefinierte Metriken
- visuelle Metriken
Wie kann man das messen?
- Netzwerk Drosselung in den DEV-Tools
- Modus für langsame Geräte einstellen
Welche Tools kann man dafür nutzen?
- Yahoo YSlow
- Google Page Speed Insights
- WebPage Test
- Sitespeed.io
- Google Lighthouse
Neural Network Playground
Oliver Zeigermann
Oliver hat in seinem Talk gezeigt, wie man mit dem Playground von Tensorflow herumspielen und dabei herausfinden kann, wie ein neuronales Netzwerk funktioniert. Mehr dazu in der Sketchnote:
Stop breaking the web and start server side rendering (Next.js)
Henrik Wenz
Next.js ist ein minimalistisches Framework für serverseitig gerenderte React Applikationen. Es löst das serverseitige Rendering, das Splitten des Codes, clientseitige Seitentransitionen, CSS Isolierung, erweiterbare Build Systeme und mehr:
There will bre grid – CSS Grid
Marco Pantaleo
Zu Beginn wurden Webseiten mit Frames gebaut. Diese waren zwar einfach zu nutzen, allerdings schlecht für Suchmaschinen. Dann folgte das Tabellenlayout – leichtes Ausrichten und Zentrieren war möglich, aber es war nur gut für fixe Layouts. Mit CSS Layouts wurde alles einfacher, denn nun konnte man Elemente floaten, Clears einbauen und Display inline-block nutzen. Mit Flexbox kam 2013 ein noch flexibleres System heraus. Relativ frisch ist nun CSS Grid auf dem Markt, dass mittlerweile auch mit (fast) allen Browsern kompatibel ist. Welche Funktionen es so hat, seht ihr in meiner Sketchnote:
