Working Draft

Nach dem Vue-Einstieg aus Revision 365 besprechen wir in dieser Revision mit Vanessa Böhner (Web, Twitter) die kniffligen Feinheiten des jünsten Sterns am Framework-Himmel. Schaunotizen [00:01:32] Vue.js Deep Dive Wie bringt man Vue.js zum praktischen Einsatz? Vanessa erzählt, wie man diverse Micro-Vue-SPAs in Legacy-Projekte (PHP + jQuery + Vue) einfließen lassen kann und wie die Kommunikation zwischen den verschiedenen Frontend-Universen funktionieren kann.Außerdem sprechen wir über Vuex, Vuex ORM, Vue CLI, Vue auf Codesandbox.org und nur gaaaanz wenig über Vue vs. React vs. Angular. Statische Seiten auf Vue-Basis lassen sich im Blitzverfahren mit dem (per quantenmechanischer Inspirationsverschränkung mit next.js verbundenen) Framework Nuxt basteln, was Vanessa z.B. für ihren Wein-Podcast genutzt hat. Zum Ende hin kommen wir kurz auf Testing mit Jest, Cypress und vue-test-utils zu sprechen. [01:02:06] Keine Schaunotizen Munich Frontend Meetup Besucht Vanessas Heimspiel-Meetup! Webentwicklung Bad Nauheim Das junge Meetup zwischen Gießen und Frankfurt a.M. hat im Dezember Peter zu Gast. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Aus einem magischen Königreich von einer verzauberten Insel kam Patrick H. Lauke (Senior Accessibility Guru bei The Paciello Group und fleißge Tweetschleuder) zu uns, um uns von der Entstehung und Weiterentwicklung von Pointer Events zu berichten. Schaunotizen [00:01:14] Pointer Events Pointer Events sind im Prinzip Touch Events 2.0 (zuletzt in Revision 139 mit Patrick besprochen) und bieten ein Event-Modell für alle denkbaren Inputgeräte- und Methoden (Maus, Touch, Stylus, Leap Motion usw.). Die Browserunterstützung ist brauchbar (demnächst gibt’s Pointer Events sogar in Apple-Browsern) und ein Polyfill ist verfügbar. Neben den technischen Details des aktuellen Standards quatschen wir auch über kommende Features in Pointer Events Level 3 (z.B. mehr Low-Level-APIs), Eingabemethoden der Zukunft, Patricks Dasein als Spezifikationsschreiber, Webstandards-Politik und das leidige Patente-Thema. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Gemeinsam mit unserem Gast Roman Kuba sprechen wir noch einmal ausführlicher über Vue.js, ein JavaScript-Framework, das sich in letzter Zeit sehr großer Beliebtheit erfreut. Schaunotizen [00:01:14] Vue.js Bereits in Revision 283 sprachen wir mit Roman mal über Vue.js. In dieser Revision lassen wir die Grundzüge von Vue.js noch mal Revue passieren und sprechen darüber, welche Vor- und Nachteile Vue im Gegensatz zu React oder Angular hat. Einige Interessante Links zum Thema: Vue-Enterprise-Boilerplate von Chris Fritz Talk von Evan You von Februar Vue.js Amsterdam Roman spricht darüber, wie man Vue in einer existierenden Code-Base anwenden kann. Vue ist Community Sponsored, wer spenden möchte kann das über Open Collective tun. So geht es mit Vue.js weiter. [00:53:00] Keine Schaunotizen VueJS Berlin Roman wird auf der VueJS Berlin einen Vortrag halten. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Hans, Peter und Stefan nehmen einen aktuellen GitHub Ausfall zum Anlass um über Katastrophen und deren Vermeidung zu reden. Schaunotizen [00:00:09] Keine Panik! Bei GitHub fliegen ein paar Datenbanken in die Luft, und schon steht das halbe Internet. Damit man in solchen Fällen trotzdem immer noch fröhlich „shippen“ kann, liegt vor allem an guten Ausfall-Plänen und sauberer Kommunikationsstrategie. Wir reden über War Room meetings, Umgängen mit AWS Ausfällen, wie wir Dank Artifactor Dingen wie dem Left-Pad Gate aus dem Weg gehen kann. Wir spannen den Bogen zu persönlichen Backup-Strategien und hören uns Peters Backup-Pläne an, und was wir mit 14 Jahre alten Cloud-E-Mail Postfächern tun sollten. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Stefan, Schepp und Peter starteten mit dem Plan, ein wenig von aktuellen Webtech-Herausforderungen in ihrer alltäglichen Arbeit zu erzählen. Aus Zeitgründen hat es nur für für die Berichte von zwei von drei Personen gereicht. Schaunotizen [00:00:20] Woran arbeiten wir gerade? Schepp werkelt am Frontend der Rheinischen Post (und anderen Zeitungen aus dem Verlag), während Stefan sich für Dynatrace betätigt. Seine Hauptaufgabe besteht darin, das alte GWT-Frontend durch Angular zu ersetzen, v.A. durch eine Onboarding-Prozedur. Wie betrachten die beachtliche öffentliche Komponentensammlung von Dynatrace und philosophieren über die Seltenheit von Greenfield-Projekte verglichen mit heroischen Migrationen. Davon kann auch Schepp ein Lied singen, der nicht nur die neueste Version der RP mitgebaut hat, sondern die Idee dahinter auch Nicht-Frontendlern und übergeordneten Stakeholdern kommunizieren musste. Heraus kam ein skinbares Designsystem, das vielseitig eingesetzt wird (man vergleiche rp-online.de mit wz.de). Am Ende kommen wir zu einer Diskussion rund um Werbung, JavaScript-Werbemittel, die Advertising Bubble und beenden die Sendung bevor Peter eine Gelegenheit hatte, von seinen Kämpfen mit dem CSSOM zu berichten (siehe auch: JSSS). [01:10:07] Keine Schaunotizen DACHFest 2018 Schepp bewirbt das DACHfest 2018 am 10. und 11. November in München. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Nächster Halt des Hype-Train: der Bahnhof Workingdaft-Süd! Damit uns keine Verzögerungen im Betriebsablauf heimsuchen stellt Gast Tobias Oberrauch (Xing, Twitter), seines Zeichens KI-Consultant, für uns die Weichen in Sachen künstlicher Intelligenz. Schaunotizen [00:00:54] KI und ML Tobias gibt uns einen High-Level-Einstieg in künstliche Intelligenz, neuronale Netze und maschinelles Lernen (in den Geschmacksrichtungen supervised, reinforcement und unsupervised). Wir quatschen unter anderm über die Möglichkeiten und Grenzen bei Bilderkennung, autonomem fahren und von KI allgemein. Als Bastler interessiert uns natürlich besonders, wie man neuronale Netze reparieren kann (schwierig) oder sie sich selbst basteln kann. Tobias empfehlt für lezteres Tensor Flow, Keras und Kaggle. Mit diesen und ähnlichen Tools lässt sich eine Reihe anstellen, wie sowohl die KI-Experimente von Google als auch diverse KI-Fails (u.A. von Google, Amazon, YouTube) belegen. [00:00:55:00] Keine Schaunotizen Neural Network Playground Spielplatz für einfache KI-Experimente. Cloud-Lernen mit Google und Microsoft Die wolkigen Lösungen der großen Anbieter Algorithmia Algorithms Marktplatz für KI-Algorithmen. Teach Yourself Deep Learning with TensorFlow and Udacity Kurs von Google First Steps with tensorflow.js Tutorial für Machine Learning im Browser Introduction to Machine Learning for Coders Ein weiteres ML-Tutorial Tickets für die dotJS und dotCSS abzugeben! Meldet euch bei Hans wenn ihr Interesse habt! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Wie es der Zufall wollte, trafen sich Hans, Schepp und Peter an einem Aufnahmetag in Köln. So kam es zu einer jener seltenen Revisionen ohne laggende VOIP-Software. Trotzdem ging es am Ende ging dann doch wieder um Performance und fittere Frontend-Frameworks. Schaunotizen [00:00:41] Performance und intelligentere Frameworks Unter dem Label Idle Until Urgent stellt Philip Walton einen neuen Ansatz zur Initialisierung von Frontend-Komponenten vor. Das Prinzip scheint uns vielversprechend zu sein, weswegen wir auführlich über den Ansatz, unsere eigenen Erfahrungen mit vergleichbaren Patterns und die jeweils verwendeten APIs (DOMContentLoaded, Mutation Observer, Intersection Observer, getBoundingClientRect()) fachsimpeln. Da die manuelle Implementierung solcher Patterns aber immer recht mühsam ist, fordern wir ihre Implementierung in den JavaScript-Frameworks der Zukunft. React Fiber und worker-dom gehen grob in uns genehme Richtungen. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Stefan und Peter haben für diese Revision als Entschuldigung vorzubringen, dass der eine als frischgebackener Papa und der andere als überarbeiteter Erklärbär Schlafdefizite aufweisen, bei denen ein Bailout dringend angebracht gewesen wäre. Stattdessen gibt’s einen Podcast. Schaunotizen [00:00:16] CSS-Gate Der äußerest umtriebige Max Stoiber (u.A. Autor von Styled Components) hat mit einem harmlos anmutenden Quiz eine mittelschwere Kontroverse rund um CSS, die Daseinsberechtigung von CSS und das Ansehen von CSS-Schreibern ausgelöst. Beim folgenden Fehlversuch, aus der Kontroverse irgendeine Art von Lehre zu ziehen, ranten wir unter anderem über den Webkongress Erlangen, React (und die Spinner die’s nutzen), Next.js, Material UI und speziell Peters Meinung dazu und das unausweichliche Paretoprinzip Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

Wisst ihr, wo semantisches (X)HTML, CSS und ganz, ganz, ganz viel Responsive Design unglaublich wichtig ist? Bei Büchern! Jedes EPUB ist im Grunde ein gezipptes Bündel an Web Dokumenten, für euren Lesespaß optimiert. Wie sehr sich diese Ausprägung der Web Technologien allerdings vom Rest der weiten Web Welt unterscheidet, erklären Sven Wolfermann und Robert Weber. Schaunotizen [00:02:00] EPUB, Mobi und PDF In E-Books stecken Webtechnologien. Und zwar eine ganze Menge. Sven und Robert erklären wie man von Word Dokumenten (dem Verlags-Format Nummer 1) zu semantischen HTML Dokumenten kommt, und welche Werkzeuge es dafür benötigt. Danach hören wir uns an, wie man das ganze in ein EPUB Format bringt und wo sich die E-Reader von den Webbrowsern unterscheiden. Dabei lernen wir von Mammoth, Cheerio, den Standards für Publikationen mit Web Technologien, PrinceXML und DocRaptor. Weitere Infos gibt’s zu EPUB, EPUB 3.1, CSS Paged Media Module Level 3 und CSS Books. Anschließend sehen wir uns an, wie man mit Print Stylesheets tatsächlich sowas wie Bücher produzieren kann, die direkt in den Druck gehen. Wahrscheinlich hatten die Belesenen von euch eines der Bücher sogar schon in der Hand. Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

As Schepp was left alone by his co-moderators (due to valid reasons) he reached out to Niels Leenheer in order to chat a bit about the Web Bluetooth and Web USB APIs. And as you might already have guessed this episode is in English :) Shownotes [00:02:25] Web Bluetooth We talk about how Bluetooth is structured and how we see it and interface it from the browser. We mantion the GATT standard/protocol and how you can find many devices documented in the OpenGATT Registry. We talk about LEGO stuff that can be remotely controlled via Web Bluetooth, like the LEGO Batmobile (hardware / demo) or the LEGO Tracked Racer which you combine with an SBrick Bluetooth receiver in order to then control it with the help of sbrick.js. We also talked about „the physical web“ in the form of Bluetooth beacons, and we talked about beacons that can run JavaScript on themselves! If you prefer Bluetooth-interfacable microcontrollers, then you might wanna have a look at the Espruino and its Bluetooth extension. And then finally, we also talked about Web USB and how there are security considerations to be made. [01:05:41] Links Videos of Niels doing weird things Namely: Fun with Bluetooth! Fronteers Conference 2018: October 4th/5th in Amsterdam One of the oldest and still one of the best frontend conferences in Western Europe! Non-profit and again with an amazing and diverse lineup. Although this time in a new venue in order to be able to offer more seats. Check it out, Western Germans… performance.now() Conference: November 8th/9th, Amsterdam The first edition of many more to come, this conference fills the vacuum that Velocity created and features a breath-taking array of webperf speakers. Don’t miss this once in a lifetime lineup! Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/