Working Draft

Hans, Peter und Stefan erkunden Details von Babels Zukunftsplanung und bewerben in dreister Form Konferenzen, Konferenz-Ersatzveranstaltungen und Workshops. Schaunotizen [00:00:10] Removing Babel’s Stage Presets Babel plant, Presets (gemäß der Stages des TC39-Prozesses gebündelte Implementierungen neuer ESScript-Features) abzuschaffen. Bei der Diskussion dieser Nachricht kommt heraus, dass wir kaum Presets benutzen, sondern eher Einzelfeatures wie Object Spread und Class Properties nachrüsten. Wir sprechen über unsere Transpiler-Nutzung im Wandel der Zeit, Babel als Experimentier-Plattform für z.B. den Pipeline Operator, über Smoosh Gate und Modul-Bundler wie Parcel und Webpack. Im übrigen sind wir der Auffassung, dass wir alle dem Babel-Macher Henry Zhu für eine harte Arbeit ein mehr Geldeinheiten rüberschieben sollten! [00:37:19] Keine Schaunotizen NightlyGrill Das beste Event, dass man anstelle einer Konferenz besuchen könnte. OAuth2 Workshop am 18.10. Lasst euch in Nürnberg von Aaron Parecki erleuchten! Webkongress Erlangen Gemütliche Konferenz im gemütlichen Erlangen.

In dieser Revision widmen wir uns mal einem Soft-Skill und reden über Herausforderungen bei der Kommunikation im Team und darüber, wie gute Kommunikation aussehen kann. Als Fachmann für diese Themen haben wir uns Coder & Kommunikations-Coach Marcel Koch (@_mknet_) in die Sendung geholt. Schaunotizen [00:00:50] Kommunikation im Team Während unserer Unterhaltung erwähnten wir folgende Publikationen: Die kommunikationspsychologischen Modelle Rhetorik – Die Kunst der Rede im digitalen Zeitalter (Buch / Hörbuch) Soft Skills für Softwareentwickler: Fragetechniken, Konfliktmanagement, Kommunikationstypen und -modelle [01:11:42] Keine Schaunotizen transform Ein Online-Transformationstool zur Umwandlung von Daten in zahlreiche Formate belly „Git shortcuts for common tasks“

Hans, Peter und Stefan nehmen den aktuellen Release von TypeScript 3.0 her um über ihre Erfahrungen mit dem Thema zu plaudern. Querbeet, von einsteigerfreundlich bis zu unverschämt fortgeschritten. Schaunotizen [00:00:17] TypeScript 3.0 Die dritte Version von TypeScript ist da, und bringt gar nicht mal so viele Features mit sich. Das liegt zum einen daran, dass TypeScript bewusst und richtig auf semantische Versionierung pfeifft (jedes Release ist ein breaking change) und lieber durchzählt. So kann man auch einfach mal einen „unknown“ Typ reinschmuggeln oder die React Unterstützung verbessern. In unserer Elaboration reden wir über mapped types, conditional types und wie union types sowieso alles einfacher machen. Nach einem kurzen Ausflug zu ParcelJS, JSX und eierlegenden Wollmilchtools schließen wir auch ab mit einer kleinen Diskussion zu Typsystemen im Allgemeinen, und Type Aliases vs Interfaces im Konkreten. Zuviel des Guten? Wir revisionieren gerne noch einmal Schritt für Schritt. Keine Schaunotizen Type Zoo Fesche Typoperatoren im Stile von Readonly, Partial und Pick. Typelevel TS Type level Programmmierung. Typical Experimentelle Typ primitive. TypeScript oddities Ein Vortrag von Stefan zu TypeScript und Schrägheiten, die auftreten können.

Schepp und Stefan haben sich Verstärkung aus Zürich geholt. Martin Splitt, seit kurzem Dev Rel bei Google für die Google Suche, klärt einige Mythen auf. Schaunotizen [00:00:54] Die Google Suche Der Googlebot, der Seiten in Googles Suchindex aufnimmt, hat JavaScript aktiviert. Soviel ist soweit bekannt. Doch was bedeutet das im Detail? Martin gibt uns Auskunft über Browserversion, Feature Set, das Vorgehen des Google Bots bei Links und weiteres. Wir erfahren, welche Voodoo Tricks so gar nichts bewirken und worauf man tatsächlich schauen muss, wenn Google die Seite indizieren soll. Als Hilfe gibt’s Werkzeuge wie die bekannte Search Console formerly known as Webmaster tools und den weniger bekannten Mobile Friendly Test

Hans, Schepp und Peter fanden sich zusammen um einfach mal eine komplette Revision über nichts anderes als HTTP-Header zu quatschen! Schaunotizen [00:00:10] HTTP-Header Bei der Besprechung des geplanten feature-policy-Headers, der helfen soll Third-Party-Scripts einzuhegen, erfährt Peter von der Existenz des Google Tag Managers. Weitere security-relevante Header sind CSP und CORS (wobei hier besonders die praktischen Umgehungs-Proxies zu beachten sind) sowie service-worker-allowed und x-frame-options. Ebenfalls in die gleiche Kerbe schlagend, aber nicht ganz so umfassend unterstützt werden auf die eine oder andere Weise DNT und der prähistorische P3P-Header. Das Thema der effizienten Ressourcenübermittlung wird über Link, Cache Digests, Client Hints sowie Prefetch, Preload und Preconnect bedient. Als finalen Geheimtipp verweist Schepp auf Transfer-Encoding: chunked und dazugehörige Fußangeln.

Der Schepp, Rodney und Hans sprechen über die Entwicklung von serverseitigen Applikationen mit Node. Unser Sponsor Diese Folge wird gesponsert vom neuen CV-Tool “GravityCV”, für einfaches, flexibles und schnelles erstellen und versenden Deines Lebenslaufs. “GravityCV” – Professionelles Design & hoher Datenschutz für dein CV. Kostenlos anmelden unter gravitycv.com. Schaunotizen [00:01:27] CLI Tools Selbstgeschriebene Command Line Interface (CLI) Tools sind hilfreich, wenn man viel auf der Command Line unterwegs ist. Mit Node kann man eigene Tools sehr einfach schreiben. Wir erklären wie und welche Module dabei helfen können. Hier eine Auswahl der genannten: Meow – Argument Parsing opn – Liest einzelne Dateien oder Websites ora – Aktivitätsindikator (Spinner) prompt – Abfragen von User-Input shelljs – Einheitliche Command Line API für Windows, Linux und Mac as-table – Tabellarische Daten ausgeben decompress und archiver – Einfacher Umgang mit zip, tar und Co. keytar – Lokaler Passwort-Speicher Zur Installation eines eigenen CLI kann man einfach ein Paket von NPM installieren oder direkt von GitHub per entsprechendem Command: npm install -g git+ssh://@github.com:username/repository.git [00:20:40] Serverseitige Services Natürlich sprechen wir auch drüber, wie man einen Service mit Node bauen kann. Wir haben alle mehr oder minder viel Erfahrung damit und diskutieren über unsere Ansätze. Grundsätzlich sind wir der Meinung, dass Services sich immer an die 12 Factors halten sollten. Einige Tools die wir empfehlen: Express – HTTP Server, Middleware-Pattern pino (für Express: express-pino-logger) – Serverseitiges Logging fluentd – Logging auf stdout Sequelize – ORM Modul für MySQL, MariaDB, Postgres finale-rest – RESTful Implementierung für Sequelize Models in Express Passport – Authentifizierungslirary Helmet – Header Management in Express Apps, hier steht wies geht, hier auch. dotenv – Configuration einfach verwalten mit einem Dotfile brakes – Hystrix equivalent in Node zur Umsetzung des CircuitBreaker-Patterns

Kollege Sven Wolfermann kommt zu Besuch und erläutert mit uns den Stand der Performance Optimierungen im Jahr 2018. Schaunotizen [00:00:50] Performance Gemeinsam mit Sven diskutieren wir, was man heutzutage alles machen soll und kann, um die Geschwindigkeit der Webseiten zu verbessern. Wir beginnen einsteigerfreundlich mit diversen Werkzeugen wie Webpagetest, und gehen dann auf neue Browserfeatures ein, die uns die Optimierung einfacher machen. Mit dabei sind preload und ES Module. In Sachen Fonts besprechen wir Variable Fonts, Subfont und das neue font-display property. Außerdem gibt’s einen Rundumschlag über Lazy Loading, u.a. mit der Intersection Observer API. [01:21:54] Keine Schaunotizen To push or not to push. Der Patrick Hamann kennt sich halt mit HTTP/2 super gut aus. Zeigt er auch hier. performance.now() Performance Konferenz (!) in Amsterdam (!!) mit Steve Souders (!!!) und Paul Irish (!!!!) und noch vielen, vielen anderen? Fixbesuch im November. Google Workbox Die Workbox hilft prima, wenn man offlinefähige Websites und PWAs machen will. PWA Builder Noch ein wenig einfacher und oft ausreichend ist Microsofts PWA Builder.

Die Revision 347 steht ganz im Zeichen der Autorisierung mit OAuth. Zumindest sprechen wir viel über OAuth. Und zwar mit Johannes Pichler, der bei karriere.at als Backend-Entwickler unterwegs ist. Schaunotizen [00:01:13] Was ist OAuth? Johannes erklärt erst mal was OAuth ist und bringt uns das Thema der Autorisierung näher. Wir lernen JSON Web Tokens kennen. [00:12:36] Security, Anwendungsfälle und Implementierungen Wir sprechen über Praktikabilität, Sicherheit und weitere Punkte einer guten Autorisierung. Darüber hinaus sprechen wir ein Praxis-Beispiel durch und schauen auf Implementierungen von Dienstleistern wie Facebook und Google. Keine Schaunotizen code.talks 2017 – Protect your API with OAuth2 Ein gutes Intro zu OAuth2.

Einige Jahre nach der ersten Sendung (158) mit Trivago- und Ex-Akamai Performance-Experte Tobias Baldauf (Twitter, GitHub) ist es wieder so weit: Tobias besucht uns und gibt sein Wissen preis. Dieses mal besprechen wir sehr gezielt das Thema Bildoptimierungen. Schaunotizen [00:01:36] SQIP – aktueller Status, die Zukunft SQIP ist eine Rendering-Technologie, die auf SVG basiert. Diese ermöglicht es kleine Platzhalter-Bilder zu erstellen und auszuliefern, bevor das eigentliche Bild geladen ist. Es gibt einige Implementierungen in CMS, wie Gatsby und Kirby. [00:13:55] Progressives Image Encoding Abseits von SQIP, sprechen wir über Bild-Encodings, die Bilder schneller rendern. Dazu zählt Progressive JPEG. Weitere Links: Intersection Observer API JPEG-Rehabilitation im Angesicht der Radware-Studie Der paradoxe Kayak-Effekt SVGO – SVG Optimierungstool ImageOptim – Bild-Optimierungs-GUI für macOS Einige Bild-Formate, die man auch mal nutzen kann: MOZJPEG WebP, (wenn auch z.Z. nur in diesen Browsern unterstützt) JPEG 2000 JPEG XR HEIFF FLIF Image-Optimierung + Art Direction in der Cloud: Cloudinary MSS – Regions of Interest in Bildern finden [00:55:04] Web Performance Budgets != Fixed Thresholds Web Performance Budgets sind sehr beliebt, sollten aber keine festen Thresholds haben, argumentiert Tobias. [01:04:32] UX: Web Performance und Revenue Impact Oft ist die Erwartung, dass man durch Bildkompression bessere Performance erreicht und somit Nutzer mehr durch Bildgalerien klicken. Nachforschungen von Trivago zeigen allerdings, dass die Benutzer einige Zeit brauchen, bis die bessere Performance beim Benutzer verstanden ist. Das bedeutet also: Geduld, Kadenz beachten, User in Kohorten einteilen. [01:11:35] Ein Ausblick auf die Bildalgorithmen der Zukunft Wir sprechen über die Zukunft und schauen auf die zunehmende Fragmentierung im Image-Format-Markt. Tobias skizziert Custom Decoder für Bilder mit WebAssembly. [01:23:28] Keine Schaunotizen Neue WebPerf Conferences in Europa: DeltaV Es gibt wieder eine Konferenz in Europa die sich mit dem Thema Web Performance beschäftigt.

Zur aktuellen Sendung ist Frederic Hemberger (Web, Twitter) zu Gast, der erst kürzlich mit uns über die Beziehung von DevOps zur Täglichen Arbeit als Webentwickler gesprochen. 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. Keine Schaunotizen KubeWeekly DER wöchentliche Newsletter rund um Kubernetes. KubeCon’18 EU Präsentationen und Videos der KubeCon 2018 EU. Kubernetes Forum Für alle, die mal was diskutieren wollen (zum Thema Kubernetes).