Working Draft

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. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

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. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

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). Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Hans und Peter fragten in dieser Revision Christian Lück (Web, Github, Twitter), seines Zeichens einer der Maintainer von React PHP, zu seinem Lieblingsthema aus. Schaunotizen [00:00:43] ReactPHP ReactPHP ist ein Open-Source-Projekt, das aus Node.js bekannte Konzepte (v.a. asynchrones IO) für PHP umsetzt. Ein Use Case hierfür wäre alles, was mit Kommunikation und Datenströmen zu tun hat, für 0815-Webseiten eignet sich ReactPHP nicht so sehr (und es würde bei traditionellen Hostern auch nicht ohne weiteres funktionieren). Und so quatschten wir über Streaming-APIs, Event Loops, Streams, Promises, synchrone und asynchrone Funktionen in PHP … Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Inspiriert von einem vergleichsweise dünnen Artikel über ein paar unspektakuläre JS-Neuerungen diskutierten Schepp, Hans, Stefan und Peter ihre persönlichen Favoriten in der JS-Feature-Pipeline. Schaunotizen [00:00:12] Kommende JavaScript-Features Wir bespechen sowohl kommende Features die wir gut finden als auch einige, die uns nicht zusagen. Im einzelnen kommen zur Sprache: der Safe Navigation Operator (auch bereits bekannt aus CoffeeScript o.Ä.) der Nullish Coalescing Operator (bekannt aus PHP o.Ä.) der Pipeline Operator (bekannt aus Elm) Asynchrone Iteration Private Methoden und private Felder für Klassen das Global-Proposal Decorators BigInt Dynamisches Import und Metainformationen für Imports Unterstriche in Zahlen flatMap Observables(bekannt aus u.A. RxJS) Außerdem erträumt sich Peter Selbstdefinierte Equality-Logik, ist aber pessimistisch Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Nachdem wir in Revision 147 schon einmal über das PHP Framework Laravel gesprochen haben, dachten wir uns, es sei langsam mal wieder Zeit für eine Auffrischung. Deshalb ist in dieser Revision Johannes Pichler unser Gast und wir sprechen gemeinsam über die Neuerungen und technischen Gegebenheiten von Laravel. Schaunotizen [00:02:00] Laravel Johannes erklärt, was es seit der Revision 147 alles Neues zum Thema Laravel gibt. Wir sprechen über Bootstrapping, Facades, Collections, Events, Queues und vieles mehr. Anhand eines praktischen Beispiels hangeln wir uns an einer Umsetzung einer Applikation entlang: REST Schnittstelle fürs Frontend Datenhaltung in DB mit Produkten, User, Metadaten User Daten kommen von Schnittstelle und können gecacht werden Übergeben von Daten an Payment Schnittstelle Darüber hinaus sprechen wir über die Möglichkeiten, Laravel fürs Frontend einzusetzen. Weitere Links: Eloquent ORM Spark – User Verwaltung Bezahlungsmethode Lumen – ein Micro-Service Framework Artisan – das Commandline Interface Horizon – Redis Monitoring Tool Dusk – End to End Testing [00:55:14] Keine Schaunotizen Laravel Docs Viele gute Videos zum Thema Laravel und rund ums Thema. Ideal für jeden Einsteiger und auch Fortgeschrittene. Laracasts Viele gute Videos zum Thema Laravel und rund ums Thema. Ideal für jeden Einsteiger und auch Fortgeschrittene. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Hans und Peter nutzen beide Visual Studio Code und geben ihre Tool-, Extension-, und Konfigurations-Tipps zum besten! Anlass waren die Veröffentlichung des Artikels Top JavaScript VSCode Extensions for Faster Development sowie vscodecandothat.com. Schaunotizen [00:00:08] Visual Studio Code Hans und Peter nutzen beide früher Sublime Text und sind nun großteils auf Visual Studio Code umgestiegen. VS Code ist umfassend erweiterbar und konfigurierbar, also gibt es viel an Extensions und Geheimtipps zu verteilen. Neben eingebauten Features wie dem Debugger, dem Git-Support und der visuellen Anpassbarkeit (hier ein Bild von Peters Ton-in-Ton-Setup) gibt es eine Menge von Extensions zu besprechen: Import Cost TODO highlight GitLens vscode-jest (für Integration in Jest) coverage-gutters css-triggers (mit Daten von csstriggers.com) HTMLHint EditorConfig gitignore (ähnliche Extensions gibt es auch für die Config-Files von Docker, Jenkins etc.) HTML Escape Instant Markdown und markdownlint WordCounter Außerdem sprechen wir über das integrierte Terminal von VS Code und warum wir stattdessen Hyper und Terminator benutzen und warum damit unsere Benutzung der Desktop-Manager Divvy und Unity einhergeht. [00:54:53] Keine Schaunotizen Scrolling Hans empfiehlt den Artikel Scroll to the future sowie die CSS-Features scroll-behavior und Scroll Snap Points. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Mangels tagesaktueller Themen spielten wir in Person von Schepp, Peter, Hans und Stefan mal wieder eine Runde HTML5-Glücksrad. [00:00:00] Glücksrad [00:00:47] Drag & Drop Von der Benutzung der nativen HTML5-D&D-Api ohne Library raten wir dringend ab, wenngleich Peter zur Zeit eine entsprechende React-Library sucht. Für seine Zwecke nicht brauchbar sind, aber trotzdem erwähnt wurden Draggable Dragula Filepond Interact.js und Sortable. [00:08:30] Das Form-Element Damit er selbst nichts zu diesem Thema erzählen muss, fordert Peter den Rest der Mannschaft zu Quick-Fire-Funfacts über Formulare auf. Und sie gehen ihm tatsächlich auf den Leim! Schepp informiert darüber, dass Submit-Buttons selbst Werte übermitteln (ihre value-Eigenschaft), Hans unterliegt einem kleinen Irrtum bzgl. Input-Types, Stefan findet einen Use Case für Fieldsets und Legend-Elemente. Am Ende versuchen wir noch zu klären, warum die TextSelection-Api bei Number nicht fluppt und betrauern zum wiederholten Male die schlechte Unterstützung für das inputmode-Attribut. [00:20:24] Das Script-Element Wir kommen über async und defer relativ schnell zu document.write(). Und dann ist der Weg nicht mehr weit zum 90s WebDev Meetup und einen faszinierenden Talk über Netscape Navigator 2.0. Früher war eben doch nicht alles besser! [00:28:15] document.open() Wir verwechseln erst mal alle document.open() mit window.open() und sinnieren ein wenig über die verloren gegangene Kulturtechnik des Popups. Mit der egentlichen Funktion wissen wir nicht viel anzufangen, allerdings hat Jake Archibald mal etwas lustiges damit zusammengehackt. [00:34:50] Das tbody-Element Gehört zusammen mit thead und tfoot zu den obskursten HTML-Elementen. Wir quatschen über Tabellenelemente allgemein, wobei Hans und Peter besonders intensiv debattieren, ob ein Datagrid-Element in den HTML-Standard gehören sollte (der IE4 konnte das sogar schon mal). [00:50:16] Das beforeunload-Event Wir sprechen über window.alert(), window.prompt() und window.confirm() sowie mögliche Use Cases für das Unload-Event. Je nachdem was man vorhat, ist man mit entweder der Beacon API oder Background Sync besser bedient. Wenn das alles nun bloß auch überall funktionieren würde … Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Als Gäste sind diesmal Nik Graf und Patrick Stapfer zu Gast. Nik ist den Zuhörern schon aus Sendungen zum Thema React und Serverless bekannt. Patrick ist zum ersten Mal richtig mit dabei. Schaunotizen [00:03:00] ReasonML Unsere beiden Gäste Nik und Patrick erklären Hans, das ReasonML eine Meta Language basierend auf OCaml ist und gerade einigen Hype erfährt. Gerade im React Umfeld ist ReasonML gerade sehr sichtbar – React wurde ursprünglich mal in ReasonML implementiert. ReasonML wird zu JavaScript transpiliert. Die Verwendung mit Rollup und Webpack ermöglicht BuckleScript. [00:57:17] Keine Schaunotizen ReasonML für Beginner Nik hat einige Video-Tutorials aufgenommen. Diese sind bei Egghead verfügbar. ReasonML Discord Channel Für jegliche Frage relevant und hilfreich: die ReasonMl Community. ReasonConf Vom 11. – 13. Mai fand die erste Reason Conference in Wien statt. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Für diese Revision haben wir uns den Robin Mehner (@rmehner auf Twitter) eingeladen, der nicht nur (Mit-)Organisator verschiedener Berliner Meetups wie der BerlinJS oder der Up.front ist, sondern auch der Reject.JS-Konferenz (als es sie noch gab). Wir quatschten mit Robin über seine Erfahrungen und Learnings beim Bau von offline-fähigen Web Apps, über die Erwartungshaltung von Benutzern dieser Anwendungen und über die Service Worker Technologie und ihre Fallstricke im Speziellen. Schaunotizen [00:01:08] (Progressive) Web Apps Im Verlauf unseres Gesprächs über den Bau und den Betrieb von Web-Apps, berührten wir folgende Punkte (not in order of appearance): Service Worker Intro Talk: „The ServiceWorker is coming, look busy“ Service Worker Support in Browsern PWAs in iOS Die Service Worker Toolbox Das fantastische Google Workbox Toolkit Talk zu Service Worker Gotschas: „ServiceWorkers Outbreak: index-sw-9a4c43b4b47781ca619eaaf5ac1db.js“ Push Notifications Die web-push Library Building Botnets on ServiceWorkers Service Worker Offline Analytics [01:04:16] Keine Schaunotizen Nightly Build 2018 Auch dieses Jahr gibt es wieder eine Ausgabe von Hans‘, Anselms, Sebastians und Davids After-Work-Konferenz im Herbst in Köln-Ehrenfeld. Diesmal aber in einer neuen Location. Thema ist „Die Zukunft des Arbeitens“. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/