Working Draft

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: Das Service Worker Cookbook Lighthouse (auch als CLI, mit mehr Freiheiten) sonar PWA Builder Die Service Worker Toolbox und ihre verschiedenen Cache-Strategien Alexander Pope: ServiceWorkers Outbreak: index-sw-9a4c43b4b47781ca619eaaf5ac1db.js | JSConf EU 2017 [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.

Themen? Wer braucht denn schon Themen! Schaunotizen [00:00:20] Kein Thema Stefan, Schepp und (vor allem) Peter geben sich der freien Webtech-Assoziation hin und fordern allerlei. Unter anderem wünschen wir uns Ersatz für allerlei etablierte Tools, DOM-Diffing jenseits des Main-Threads und vieles andere. Zur Sprache kommen außerdem die ausgetüftelten Performance-Optimierungen von Lo-Dash

Von CSS-Guru Sven Wolfermann (Webseite, Twitter) ließen sich Hans und Peter erzählen, was denn modernes CSS so alles zu leisten im Stande ist. Schaunotizen [00:00:57] CSS-Features, die man heutzutage verwenden muss Zu den Must-Haves im Jahr 2017 gehören ganz klar Flexbox, calc() und rem – wer hier noch zu den Oldschool-Alternativen Float-Layout, Kopfrechnen und em zurückgreifen will, braucht dafür sehr gute Gründe. Ebenfalls mittlerweile zu 100% im Browser-Mainstream angekommen sind background-position mit vier Werten, currentColor (v.a. zum Styling von SVG-Icons), user-select (noch mit Vendor-Prefix) und die noch immer völlig unterbewerteten CSS-Counter. [00:23:40] Features die man Real-Life verwenden kann Neben den gut unterstützten Viewport-Units vw/vh/vmin/vmax sind auch die weniger weit verbreiten Font-Detail-Properties font-feature-settings, font-stretch, font-size-adjust, font-variant-alternates und font-kerning brauchbar, denn wenn die mal nicht funtkionieren fällt es kaum jemandem auf. overflow-wrap als Ergänzung zu hyphens ist ebenso weit verbreitet wie Unicode Range, Writing Mode, Custom Properties, Feature Queries (@supports), Object-Fit und position:sticky. Auch einige wenige Features aus Media Queries Level 4 funktionieren in modernen Browsern bereits. [01:03:18] Zukunftsaussichten und Wünsche Neben dem frommen Wunsch, dass sich allerlei bekannte Features möglichst schnell durchsetzen mögen (Grid, Shapes, Blend-Modes, filter) ist Sven besonders scharf auf font-display und line-height-step. Beim Styling von Inputs gibt es Fortschritte, aber auch da sehen wir noch Luft nach oben. Letzter Wunsch: die color()-Funktion möge sich zeitnah durchsetzen!

Hans und Anselm quatschen in bestem Wissen und doch einiger Ausführlichkeit über Bildformate und Bildoptimierung auf Webseiten und geben wertvolle Tipps für Webentwickler und Designer, um bessere Bildqualität bei geringer Dateigröße auszuliefern. Alles mit praktischen Tipps und nicht nur Theorie. Schaunotizen [00:00:13] Bildformate und -optimierung Angesichts der Tatsache, dass Apple im Herbst mit HEIF ein ganz neues Bildformat an die Massen bringen wird, sehen wir uns gewillt, noch einmal für fast alle gängigen Probleme und Herausforderungen im Alltag des Webentwicklers und Designers Lösungen zu finden und Empfehlungen zu geben. Wir sprechen über Barrierefreiheit, Suchmaschinenoptimierung, Bildoptimierung auf dem eigenen Rechner oder dem Server und generelle Workflows und Ideen, um auch Kunden mitzugeben, wie Bilder optimiert werden können. [00:52:32] Keine Schaunotizen sonar sonar ist ein absolut umfangreiches, flexibles Linting-Tool für Webseiten mit Dutzenden an Anwendungsszenarien.

Mit Manuel Matuzović von den Webclerks gehen wir in den Themen Accessibility und CSS Grids in ein Nachspiel und ergänzen frühere Folgen. Von der Stammpartie mit dabei: Schepp, Hans und Stefan. Schaunotizen [00:03:07] Mit einfachen Mitteln Accessibility verbessern Manuel gibt in seinen Artikeln und Beispielen einen guten Rundumschlag zum Thema Barrierefreiheit. Wir unterhalten uns über seine Artikel, sowie etliche weitere Quellen, die uns in Accessibility noch weiterhelfen können. Zu empfehlen sind die A11ycasts von Google, den in die Jahre gekommenen aber immer noch gültigen Eintrag im YUI Theatre (2, 3) und Heydons Inclusive Components wenns um SPAs geht. Manuel hat auf Codepen noch weitere Beispiele. Außerdem sehen wir uns den Focus Ring genauer an und lassen alte Diskussionen über das lang-Attribut erneut aufkochen, so wie damals im HTML 5 Boilerplate, Hans und Anwesende erinnern sich. [00:52:49] Grid auto layout CSS Grid ist nun auch in den Preview Versionen von Edge verfügbar und damit beinah flächendeckend. Wir schauen uns ein wichtiges Feature im Vergleich zur IE10+ Version an, nämlich Auto Layout. Und erklären damit auch gleich ein paar Grundkonzepte, basierend auf Stefans Artikel. Unser Grundsatz: Grid kann man schon gut jetzt einsetzen, vor allem wenn man nicht die ganze Magie benötigt. Für den Schuß Extra-Magie gibt es gute Fallbacks [01:16:18] Keine Schaunotizen place-items Zentrieren in einer CSS Shorthand. Lässt glatt die Hölle zufrieren. space-evenly Eine neue Raumverteilung für Flexbox. Service Workers Outbreak Fesches Video von der JSConf EU zum Thema Service Workers. Parsing JavaScript: Better lazy than eager Die Münchner V8 Garde wieder in bester Form: Marja Hölltä erklärt JavaScript Parsing Interna.

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.

Eine knifflige Problemstellung mit einem der dutzend AWS Dienste brachte Hans und Stefan in den Dialog. Prompt war ein Working Draft Thema geboren. So gesellte sich noch Anselm dazu um die Diskussionsrunde zu komplettieren und einen guten Rundumschlag über die modernen Hosting-Möglichkeiten über den Wolken geben. [00:00:15] News NPM 5 NPM 5 ist draussen und hat etliche Neuerungen hinsichtlich Versionslocks, Download-Performance u.ä. Das vielleicht größte NPM Upgrade seit semi-flachen Abhängigkeitsbäumen. Schaunotizen [00:05:32] Cloud Hosting Vorbei sind die Zeiten, in denen man sich beim Rechenzentrum nebenan ein paar hundert Megabyte für’s teure Geld besorgte. Heute sind alle hippen Websites und Web-Applikationen in der Cloud! Wir erzählen von unseren Erfahrungen mit Diensten wie AWS und den damit verbundenen Services wie S3, EC2, CF, SES, RDS, MFG, KTHXBYE. Zahlreiche Kürzel, für die man jeweils ein eigenes Diplom benötigt. Da machen es 1-Click Dienstleister wie Digital Ocean, Heroku, Now und Netlify doch um einiges einfacher, und helfen auch die Kosten entsprechend zu kalkulieren. Wenn man nämlich nach Stunde und Megabyte bezahlt, kann das einem bei entsprechend hohem Traffic schonmal böse überraschen [00:55:30] Keine Schaunotizen H2 Push is tougher than I thought Schönes neues HTTP2 Feature, allerdings noch nicht reif genug, mein Jake Archibald. Preload, Prefetch & Priorities in Chrome Ein Artikel von Addy Osmani beschreibt wie sich die neuen HTML Attribute auf den Ladevorgang im Chrome Browser auswirken. 11 things I learned reading the Flexbox spec In der Spezifikation von Flexbox stecken ein paar spannende Details, die man berücksichtigen kann wenn man mit den Properties jongliert. 70% CSS Repetition Quasi Nachlese zu unserer Revision 301.

Rodney und Peter hockten sich zusammen um über sehr neue und sehr alte JavaScript-Technologie zu schwafeln. Schaunotizen [00:00:12] Prepack Prepack ist ein „partial evaluator for JavaScript“. Prepack führt, sofern möglich, den Initialisierungs-Code eines JS-Bundles in einem Compile-Schritt aus, damit es der Browser nicht zur Laufzeit machen muss. Es werden z.B. Closures wegoptimiert und Berechnungen durchgeführt, wo immer dies möglich ist. In eine ähnliche Kerbe schlägt das bereits mehrfach in diesem Podcast erwähnte optimize-js, was weniger kann, aber schon eingesetzt werden kann. Prepack hingegen ist noch Alpha-Software (obwohl es schon ein Webpack-Plugin gibt), was wir anhand von mehreren Code-Samples erfahren. [00:13:32] Früher war alles besser anders Das HTTP Archive hat Statistiken über verbreitete JS-Libraries gesammelt und wir lassen es uns nicht nehmen, die Top 10 einzeln durchzusprechen. Auf Platz 1 thront wenig überraschend jQuery, über jQuery UI auf Nummer 2 (und Rodneys Schwank zur position()-Funktion) wundern wir uns hingegen schon etwas. Zu den ollen Polyfill-Libraries Modernizer (Platz 3) und YepNope (Platz 5) fällt uns vor allem eine Reflow-Visualisierung mit der alten Modernizer-Webseite als Testsubjekt ein. Bootstraps JS-Komponenten auf Platz 4 verwundern nur mäßig, FlexSlider an Position 6 war uns völlig unbekannt. Die Erinnerung an swfobject (Platz 7) bewegt Rodney zu Geständnissen aus einer Jugend voller ActionScript. Das achtplatzierte Underscore.js lebt in Form von lo-dash bis heute in unseren package.json-Files weiter. Mit Grausen denken wir an die Google-Maps-API (Platz 9), wenn auch Peter neue Ideen zum nicht-sachgerechten Einsatz von Maps und Headless Browser anzubieten hat. Die Liste endet mit Moment.js auf Platz 10, was uns aus irgendwelchen Gründen zur PHP-Funktion strtotime() abschweifen lässt. Da das aber kein geeigneter Abschluss für einen Podcast im Jahre des Herrn 2017 ist, wirft Rodney zum Schluss noch einen persönlichen Platz 11 in die Runde: Libraries für Layout-Rearrangements wie FLIP (was Rodneys Favorit Vue.js von Haus aus macht). Libraries wie Vue und Tools wie Babel zeigen aber ganz klar auf wohin der Trend geht: weg von Insellösungen, hin zu integrierten Tools und Frameworks. [01:06:14] Keine Schaunotizen ECMAScript modules in browsers Gewohnte Erklärbär-Qualität aus dem Hause Jake Archibald. Getting Started with Headless Chrome PhantomJS ist tot, es lebe Headless Chrome! Turning Windows into an environment ready for modern development Tools für Windows. Install npm packages globally without sudo on macOS and Linux Pakete global für den jeweiligen User installieren. zeit/pkg Bundlet Node-Apps in Executables. Videos von der JSConf EU 2017 Schöne kurze Talks.

Letzte Revision noch über ihn, bzw. einen seiner Artikel gesprochen, heute schon in unserer Sendung: Jens Oliver Meiert! Wir haben ihn auf der gerade vergangenen beyond tellerrand Düsseldorf zufällig getroffen und ihn erfolgreich in ein Interview zum Thema CSS verstrickt. Schaunotizen [00:00:18] Optimierung und Wartbarkeit von CSS Wir sprachen mit Jens über sein aktuelles Forschungsthema, nämlich der Frage, wie man CSS besser optimieren und gleichzeitig gut wartbar halten kann. Ausgangslage war Jens‘ Erkenntnis, dass 70% des CSS, das die Durchschnittsseite mit sich herumschleift, aus vorher bereits definierten Deklarationen besteht. Das daraus resultierende Gespräch führte uns über Bootstrap und die Möglichkeit, es an die eigenen Bedürfnisse anzupassen, über Tachyons, Yahoos Atomic CSS, und OOCSS hin zu Googles GWT. Zur weiteren Erforschung des Themenkomplexes bittet Jens in einem Artikel darum, seine Umfrage das Thema betreffend auszufüllen. Keine Schaunotizen Alle Videos der beyond tellerrand Düsseldorf 2017 Die Videos der beyonds gehen mittlerweile so schnell online, da fehlt nicht mehr viel, dass man die Talks dort schon vor dem Bühnenauftritt sehen kann. Wenn Ihr nicht die Zeit findet, alle Videos zu schauen, dann doch wenigstens das von Espen Brunborg.