Diese Revision hatten wir Benedikt Meurer (Web, Twitter, Github), seines Zeichens Tech Lead bei V8, zu Gast.
Schaunotizen
- [00:00:55] Die V8 JavaScript Engine
- Benedikt erzählt uns, was sich in V8 seit Revision 8 und der Einführung von Crankshaft getan hat. Eigentlich ist kein Stein auf dem anderen geblieben. Nach einem kleinen Überblick über optimierende Compiler allgemein und JS-JITs in Chrome klärt uns Benedikt über die zahlreichen Limitierungen von Crankshaft auf. Diese spielen im aktuellen Chrome mit Ignition als Bytecode-Generator und TurboFan als Crankshaft-Ersatz keine Rolle mehr. Jenseits Chrome-spezifischer Details sprechen wir über Array-Subclassing (sollte man sein lassen), die Zahl 11 (in Spinal Tap und im Aufzug) und Micro-Benchmarks vs. Real-World-Workloads. Als wichtigste Performance-Best-Practices kristallisieren sich Captain-Obvious-Erkenntnisse wie „Ideomatic JS schreiben“ und „Objekte monomorph halten“ heraus. Gegen Ende sprechen wie über die Performance-Charakteristika von neue ES-Datenstrukturen, Modulen, Workersn,
const und modernen ES-Standards allgemein und kommen auch auf die Top 3 Performance-Irrtümer zu sprechen.
Die neuste Sendung steht ganz im Zeichen von Serverless-Architektur und der Thematik außen herum. Wir haben uns zwei Gäste zum Thema eingeladen, die sich auskennen: Nik Graf und Philipp Müns. Nik und Philipp arbeiten gemeinsam an einem Open-Source Serverless-Framework.
Schaunotizen
- [00:02:29] Serverless
- Wir sprechen über Serverless-Architekturen, wie sie von Martin Fowler beschrieben werden, definieren was Serverless bedeutet und wie es sich von einer „klassischen“ Container-basierten Architektur unterscheidet. Neben den Fallstricken und Vorteilen, sprechen wir auch über generelle Funktionalitäten, die speziell im Bereich Serverless zu beachten sind. Darüberhinaus schneiden wir auch das Thema Event-Driven-Architecture an.
Einige Links und Lösungen, die wir erwähnten:
- Serverless Starting-Point: Go Lambda
- Serverless Quickstart-Guide und Beispiele
- Video: Nik Graf zum Thema REST API Bau mit Serverless in Node.js und mit Datenbank-Anbindung
- Amazon Lamda Edge: quasi Functions im CDN
- Amazon Fargate (Container in der Cloud)
- Amazon Aurora (SQL Database as a Function)
- V8 Snapshots zur Reduktion der Cold Start Zeiten von Node.js Functions
In diesem Zusammenhang sei auch noch einmal die Revision 314 mit Golo Roden erwähnt, die sich mit den architektonischen Grundlagen von Domain Driven Development und event-basierten Architekturen beschäftigt.
[01:27:09] Keine Schaunotizen
- Reason Conf
- Vom 11. – 13. Mai findet in Wien die erste ReasonML Konferenz statt.
- Workshop „Datenschutz im Web — Fallstricke, Strategien, Risikomanagement, DSGVO“
- Ab Mai (2018) ändert sich das Datenschutz-Recht in Europa. Wer mehr darüber erfahren möchte, sollte am Workshop in Nürnberg am 05. März teilnehmen.
- Let’s make multi-colored icons with SVG symbols and CSS variables
- Multiple Farben in SVG-Icons.
Diesmal haben wir ohne Gast in einer kompakten Ausgabe mit dem Schepp, Rodney und Hans über die Problematik der Geolocation API und das Dialog-Element gesprochen.
Schaunotizen
- [00:00:18] Geolocation API
- Hans beschäftigte sich in der näheren Vergangenheit mit der Usability der Geolocation API. Wir unterhalten uns über die notwendigen Schritte um die Adresse eines Nutzers auszulesen, sofern diese/r zustimmt. In diesem Kontext sprechen wir auch über die Usability und User Experience der Web Permission API.
- [00:17:40] HTML Dialog-Element
- Mit Dialogen auf Webseiten ist das so eine Sache: Als Entwickler hat man ziemlich viel zutun, um ein Dialog-Element auch aus Accessibility-Sicht einigermaßen benutzbar zu machen. Nun soll dies durch das bereits lange Zeit in der Spezifikation befindliche native HTML-Element
<dialog> verbessert werden. Wird das gelingen? Wo liegen die Probleme mit dem Element? Rodney klärt auf.
Keine Links
Dieses Mal hatten wir Jan Krutisch zu Gast, der mit uns einen Ausflug in die Welt der Synthesizer und Audioeffekte unternahm. Thema war nämlich die Web Audio API, mit der Jan das Glück hat, sich immer wieder beschäftigen zu dürfen, etwa in Form des liv3c0ders oder der Novation Circuit Components.
Schaunotizen
- [00:02:53] Die Web Audio API
- Wir lernen, dass die Web Audio API einem Fließband-System ähnelt: Gespeist wird es aus einer Ton-Quelle (MP3 oder Oszillator), die im Folgenden durch beliebige viele angestöpselte Modifikator-Stationen verändert wird, bevor das Resultat dann ausgegeben wird. Im einfachsten Fall kommt dabei Kunst heraus, im besten Fall ein Produkt für den Musikbereich, wie Ableton Learning Music oder Loop Drop. Folgende verlinkenswerte Stichworte fielen im Verlauf unseres Gesprächs:
Dieses mal hatten wir Lars Wolff von Stormforger zu Gast. Stormforger ist ein API- und Load-Testing-Tool, das uns auffiel, weil sich die Testszenarien per JavaScript beschreiben lassen. Darüber wollten wir mehr wissen…
Schaunotizen
- [00:02:40] API- und Load-Testing mit Stormforger
- Im Laufe unseres Gesprächs fielen diverse Dinge und Themen, die wir verlinken wollten, und Lars hat später noch ein paar mehr dazugepackt. Hier sind sie:
[01:00:01] Keine Schaunotizen
- Cologne Web Performance Optimization Group
- Das eine Meetup in Köln, in das Lars involviert ist…
- AWS Cologne
- …und das andere.
Hans, Stefan und Schepp nahmen mal wieder einen Artikel als Anlass über ein umfassenderes Thema zu reden, was diesmal Google Lighthouse war.
Schaunotizen
- [00:00:14] Google Lighthouse
- Ein Artikel von Umar Hansa über Chromes Paint Timing API bringt uns auf die Idee, ein wenig über Googles Lighthouse zu plaudern. Lighthouse ist sowas wie das ultimative Website-Auditing-Tool, das Kriterien aus dem Bereich Progressive Web Apps, Performance, Barrierefreiheit und allgemein best-Practices unterstützt. Zudem werden Webseiten seit kurzem auch auf Sicherheitslücken in verwendeten JavaScript-Bibliotheken getestet. Damit löst es auch auch ein Stück weit die alten Google Pagespeed Insights ab. Als Hintergrund zu den sogenannten „passiven Eventlistenern“ verweist Schepp auf ein sehr interessantes Blogpost dazu im Edge Blog. Und warum externe Links besser als Attribut
[rel="noopener"] verpasst bekommen sollten, das hat vor einiger Zeit Jake Archibald verbloggt.
[00:45:56] Keine Schaunotizen
- PWA Checklist
- Eine Checkliste von Dingen, die beim Bauen von Progressive Web Apps zu beachten sind.
- wretch
- Syntaktischer Zucker für die Fetch API.
In dieser eher kurz geratenen Episode schauen Hans und Schepp sich das recht neue Konzept der Origin Trials an.
[00:00:16] News
- Yarn 1.0
- Yarn 1.0 ist raus und bietet neuerdings Workspaces.
Schaunotizen
- [00:00:40] Origin Trials
- Mit den Origin Trials setzt (zunächst) das Chrome-Team eine Idee um, über die wir vor zwei Jahren in einer Folge mit Jacob Rossi sprachen. Das Problem, das die Origin Trials lösen wollen, ist dass es für Browserhersteller bislang schwierig war, neue Features in der Breite zu testen, ohne dass Entwickler sie in ihrer unfertigen Form aufgreifen und damit Fakten für die Zukunft schaffen. Der Trend geht ja schon einige Zeit weg von vendor-prefixten Vorabversionen hin zu einem Feature-Flag-System. Das Problem am Feature-Flag-System ist jedoch, dass nur die Entwickler selbst etwas testen können, sie das Feature aber nicht an ihren Usern testen können. Das geht nun mit den Origin Trials. Bei diesen beantragt ein Seitenbesitzer, dass für die Besucher seiner Domain ein bestimmtes, derzeit verfügbares Vorab-Feature im Browser für eine begrenzte Zeit freigeschaltet wird. Das Feature kann also in der Breite getestet werden,
ohne sich dauerhaft festzusetzen.
Weil Schepp sich in letzter Zeit auch mit Service Workern beschäftigt hat, und weil sowohl Microsoft als auch Apple an ihnen arbeiten, ließen Hans und Anselm sich von ihm ein paar Erfahrungen aus der Praxis berichten.
Schaunotizen
- [00:00:14] Service Worker
- Schepp berichtete, wir es Service Worker in erster Linie zur Steigerung der Ladezeiten, wie auch zur Offlinifizierung einsetzt. Nicht ohne sich dabei in einem asynchronen Script-Dschungel zu verstricken, dem man am besten mit
async/await-Konstrukten entgegentritt. Hilfreich beim Einarbeiten in das Thema sind verschiedene Online-Tutorials, Howtos und Tools, als da wären:
[00:31:07] Keine Schaunotizen
- You’re Offline
- Max Böck beschäftigt sich als einer von wenigen mit der Frage, wie eine UI reagieren sollte, wenn man offline geht.
- How many users resize their browser?
- Zitat: „TL;DR: 2-3% of users resize their browser, and you should care.“
- Performance and Resilience: Stress-Testing Third Parties
- Harry Roberts erklärt, wie man die Auswirkungen von 3rd Party Scripten auf die eigene Webseite analysiert und quantifiziert, und wie man die eigene Seite gegen Ausfälle bei externen Anbietern abhärtet.
Als kleinen Themen- und Tapetenwechsel haben wir uns für diese Folge die Datenjournalisten Kira Schacht und Phil Ninh von Journocode eingeladen, um etwas über ihr Berufsfeld und den Herstellungsprozess von datengetriebenen und/oder interaktiven Reportagen zu erfahren.
Schaunotizen
- [00:00:18] Datenjournalismus
- In unserem Gespräch erkunden wir, was Datenjournalismus, aka „Data Driven Journalism“ (DDJ), überhaupt ist und wann er zum ersten Mal in Erscheinung getreten ist. Vorreiter in der Welt in Sachen datengetriebener Publikationen sind The New York Times und The Guardian, während es in Deutschland die Berliner Morgenpost und in Österreich der Standard und das ORF sind. Wir reden darüber, wie ein solches Reportage-Projekt ans Rollen kommt, und wir reden über die Schwierigkeit der Beschaffung von brauchbaren bzw. gut formatierten Daten hier in unseren Gefilden. Natürlich kommen wir als technischer Podcast irgendwann auch auf das Thema „Tooling“: Welche Software und welche Bibliotheken kommen bei der Datenaufbereitung und später bei der Präsentation zum Einsatz? Das wäre z.B. OpenRefine zur Datenbereinigung (Zitat: „A free, open source, powerful tool for working with messy data“), R für die Extraktion von statistischen Daten und Libraries wie d3.js für eine anschauliche Präsentation im Web.
Keine Schaunotizen
- Journocode
- Die Gruppierung aus Dortmund hat es sich zur Aufgabe gemacht, Datenjournalismus zu fördern, indem Journalisten ans Programmieren, und vis versa Coder und Statistiker an Journalismus herangeführt werden. Zu diesem Zweck gibt es regelmäßig Meetups und Hack-Sessions.
- Snow Fall – The Avalanche at Tunnel Creek
- Das von unseren Gästen erwähnte „Interactive Story Telling“-Projekt der New York Times.
- Berliner Morgenpost Interaktiv
- Landingpage für Datenjournalismus-Projekte der Berliner Morgenpost.
- Rheinische Post Interaktiv
- Landingpage für Datenjournalismus-Projekte der Rheinischen Post.
- Tour de France in Düsseldorf
- Das im Gespräch erwähnte Projekt, an dem Kira und Phil gerade saßen.
- Video: Hacking the Visual Norm – Nadieh Bremer
- „During this talk Nadieh will take you through several of her data visualisation projects, both from the business environment of her day job and the experiments made in her evenings.“
- Video: Des Traynor – Creating Dashboards – Data Visualisations that Resonate
- „Info-graphics & data visualisations are popping up everywhere and they don’t always make sense. Many horrible acts have been committed in the name of ‚Making this chart seem a bit more fun'“
- Video: Alex Graul | Using JS to build bigger, better datavis to enlighten and elate
- „With this talk I want to show you how to design and build not just simple and not-so-simple charts to illustrate data but how to design & architect larger more complex pieces of content that tell stories and illustrate ideas.“
- Netzwerk Recherche Konferenz 2017
- Die alljährliche Konferenz des Netzwerk Recherche e.V., ein gemeinnütziger Verein, der 2001 von Journalistinnen und Journalisten gegründet wurde, um die journalistische Recherche und den Qualitätsjournalismus in Deutschland zu stärken.
Hans und Schepp telefonierten sich diesmal zusammen und sprachen über die weite Verbreitung und Vorteile moderner Browser-APIs.
Schaunotizen
- [00:00:15] Native Browser-APIs
- Schepp hat sich in letzter Zeit verstärkt damit befasst, wie man auf einer klassischen Webseite den ganzen JavaScript-Balast loswerden kann. Ziel des Ganzen ist zum einen, Download- und Parsezeiten zu vermeiden, aber auch eine schnelle Ausführungsgeschwindigkeit zu erhalten, bedingt durch den dahintersteckenden, nativen C-Code. Und da sieht es eigentlich recht gut aus mit APIs und deren Support durch Browser. Folgende Themenbereiche lassen sich heute ohne viel zusätzliches JavaScript gut bedienen:
- DOM-Traversal: Dank querySelector(), querySelectorAll(), closest(), previousSibling(), nextSibling() alles kein Hexenwerk mehr. Hilfreich sind dabei die Tricks, um Element-Collections in iterierbare Arrays umzuwandeln.
- DOM-Manipulation: Auch viel leichter geworden, dank before(), after() oder replaceWith(). Mehrere Styles lassen sich prima „en bloc“ per
Object.assign(elem.style, { color: '#fff', fontSize: '1rem' }) mit bestehenden Eigenschaften zusammenmergen.
- Event Delegation: Dank nunmehr einheitlicher addEventListener()-Methode, durchgehendem Capture-Phase-Support und Element.matches() recht einfach selbst umzusetzen.
- Umgang mit Arrays: Schon ES5 war ein Meilenstein und es wird nur besser: forEach(), filter(), map(), reduce(), sort(), find(), findIndex(), includes(), every(), entries() und values(). Und dann gibt es da ja noch die Spread- und Rest-Operatoren.
- Umgang mit Objekten: Hier hat ES6 mit assign() und keys() den Grundstein gelegt. Nun wurde u.a. entries() und values() nachgelegt.
- Für Karusell-Slider bieten sich die CSS Snap Points an.
- Für das Schriften-Laden die CSS Font Loading API.
- Für das Lazyloading von Bildern kann man heutzutage gut die Intersection Observer API verwenden.
- Und für weiches Scrollen auf der Seite steht neuerdings die CSS-Eigenschaft scroll-behavior mit dem Wert
smooth zur Verfügung.
[00:57:09] Keine Schaunotizen
- How the minmax() Function Works
- Die CSS Grid Spec führt eine
minmax()-Funktion ein, welche recht praktisch ist.
- Lea Verou – CSS Variables: var(–subtitle);
- Wie alle Talks von Lea sehr sehenswert, diesmal mit dem Thema CSS Custom Properties (im Volksmund „CSS Variablen“) zum Thema.
- Essential apps for switching from Mac to Windows
- Tolle Ressource für Entwickler, die an einem Wechsel zu Windows interessiert sind, ergänzend zu dem vor zwei Revisionen schon einmal verlinkten „Turning Windows into an environment ready for modern development„.
- Inside Chrome: The Secret Project to Crush IE and Remake the Web
- Weil Chrome bald 10 Jahre alt wird dachten wir, verlinken wir dieses historische Fundstück.
