Working Draft

In ewiger Jagd nach besserer Audioqualität und stabileren Servern sponsort uns diesmal Wire, der sichere Open Source Messaging Client für all eure Plattformen. [00:01:04] News Loading Stylesheets in Body In Revision 254 besprochen, nun Realität: Chrome kann nun progressiv Stylesheets laden, ähnlich wie JavaScript Dateien. Schaunotizen [00:02:48] JavaScript parse and compile time Bei all den Evangelien zur Web performance neigen wir dazu, die Zeit zu vernachlässigen, in der JavaScript geparsed und kompiliert wird. Die Zeit, die in den meisten Wasserfalldiagrammen gähnend weiße Leere verursacht. Die Leute von Google wollen das nun ändern und gehen gleich in mehreren Artikeln groß darauf ein. Allen voran Addy Osmanis Text zur Startup Performance, aber auch Paul Lewis, der die Parse & Compile Zeit von SPA frameworks verglichen hat. Dazu noch ein Video von Alex Russel und Hinweis auf das PRPL pattern. Nicht nur Google beschäftigt sich damit, sondern auch Nolan Lawson von Microsoft. Wir diskutieren, teilen unsere Erfahrung mit und geben einen Rundumschlag. [00:29:35] Safari 10.1 Safari 10.1 ist da und — hallo — da hat sich was geändert! Wir gehen die Feature Liste durch und freuen uns über ein paar Entscheidungen, die getroffen wurden. . [00:38:10] WebGPU Voll im Trend: Direkter und standardisierter Zugriff auf die Grafikkarte im Web Browser. Apple’s Webkit Engine macht da mit einem neuen Interface von sich reden, so aber auch Google und Mozilla. Die Relevanz für uns Webworker sei mal dahingestellt, spannend ist das Thema trotzdem. [00:46:00] Keine Schaunotizen Gatsby Statischer Seitengenerator mit React. Web Components, the React way React und Web Components mischen geht nicht? Stimmt nicht! Der Artikel zeigt, wie man das am Saubersten macht. Mo.js Bewegung im Web, schön!

Einem Hörertipp zum Anlass haben wir uns den Autor Tobias Koppers sowie einen der Maintainer, Johannes Ewald, des Webpack Projektes eingeladen und den beiden viele wertvolle Tipps entlockt und über die Zukunft ausgefragt. Schaunotizen [00:01:00] Webpack Wir lassen uns zunächst erklären, was Webpack ist, wer unsere beiden Gäste sind und welche Rolle sie bei Webpack spielen und fragen uns, wofür man Webpack braucht. Natürlich lassen wir uns auch erklären, wie so ein riesiges Open Source Projekt funktioniert und wo die Probleme liegen. Wir lassen uns erklären, warum man ganz einfach zu Webpack 2 migrieren kann und gar keine so großen Unterschiede zwischen den Versionen existieren. Zuletzt fragen wir natürlich noch unsere Gäste über die Zukunftspläne von Webpack aus und stellen fest, dass es an interessanten Ideen definitiv nicht mangelt. [00:53:00] Keine Schaunotizen Webpack Open Collective Hier sammelt das Webpack Team Spenden für die Entwicklung des Projektes. Google Research HTTP/2 Server Push Nebenbei sprach Johannes Ewald an, dass er eine Studie von Google Mitarbeitern fand, die HTTP/2 Server Push näher beleuchtet, vor allem wie starke Vorteile das aktuell bringen kann. Das wollen wir euch nicht vorenthalten.

Zur Revision 288 haben wir uns einen Gast aus der Schweiz eingeladen: Roger Dudler, der CTO von Frontify. Gemeinsam sprechen wir über Frontify und das Thema Styleguides. Schaunotizen [00:00:36] Frontify Roger erzählt über seine Arbeit bei Frontify. Frontify befasst sich vor allem mit Marken-Management und der Zusammenarbeit von Entwicklern und Designern. Außerdem berichtet Roger darüber, wie sie Fractal als Inspiration für die eigenen Ideen genutzt haben. Mehr Informationen zu Zepplin gibt es hier. Fronifys Pattern Library API Module findet hier hier. Roger auf Twitter oder per Mail. [00:48:46] Keine Schaunotizen Clean Code concepts adapted for JavaScript Guidelines zum Schreiben von sauberem JavaScript Code. The end of the clearfix hack? Braucht man den Clearfix-Hack bald nicht mehr? display: flow-root; soll das Problem lösen. Detecting text in an image on the web in real-time Text von Bildern lesen – mit JavaScript.

Anselm und Hans haben dieses mal Joschi Kuphal (seine Firma, Twitter) zu Gast. Keine News Schaunotizen [00:00:53] Microinformationen Joschi Kuphal beschäftigt sich seit vielen Jahren mit Microinformationen – Informationen, die gerade Suchmaschinen helfen, Inhalte besser zu erkennen (sein Parser). Aufgrund seiner Expertise, hilft er uns als unwissende das Thema zu verstehen. Er erklärt uns die Unterschiede zwischen den einzelnen Formaten: Microformats 2, Microdata, JSON LD und RDFa. [00:43:25] CoderDojo Joschi hat in Nürnberg aus Eigeninitiative (eigenes Kind) vor ca. 2 Jahren das CoderDojo gegründet. Dort lernen Mentoren mit Kindern spielerisch Robotik und Programmierung. Die Veranstaltungen gibt es weltweit. Beim CoderDojo in Nürnberg gab es nun eine Crowdfunding Kampagne, um 50 gute Stühle für die Kinder zu besorgen. Mentoren sind beim CoderDojo überall herzlich willkommen. Wenn man Interesse an der Organisation eines eigenen Dojos hat sollte einfach Leute finden, die mitmachen möchten, und den Anregungen der Mutter-Foundation folgen oder andere CoderDojos fragen. [01:02:28] Keine Schaunotizen WDRL – Web Development Reading List | The 2016 Almanac Anselm hat alle Links seiner WDRL von 2016 in einem übersichtlichen Nachschlagewerk aufbereitet.

Auf der Reise durch Frontend-Framework-Mordor sehen sich die Gefährten des Teams Working Draft unversehens dem Aurelia-Framework gegenüber. Aber keine Angst: die heldenhafte Katharina Bähr (Blog, Twitter) ist dabei und beantwortet jede Frage, die Schepp, Hans und Peter zu Aurelia haben. Schaunotizen [00:01:02] Aurelia Katharina ist Webentwicklerin bei Zühlke und berichtet von ihren Einsatzerfahrungen mit Aurelia. Aurelia ist ein OpenSource-Projekt (MIT-Lizenz) aus der Feder des ehemaligen Angular-Entwicklers Rob Eisenberg bzw. seiner Firma Blue Spire. Aurelia ist ein modulares Frontend-JavaScript-Framework und setzt auf moderne Webstandards statt Neuerfindungen. So kommt anstelle von Eigenbau-JS-Dialekten ES6 zum Einsatz und Web Components finden ebenfalls Verwendung (aktuelle Typinformationen für TypeScript gibt es natürlich trotzdem). Das Framework folgt dem Convention-Over-Configuration-Paradigma und enthält so ziemlich alle Features, die man von einem Frontend-Framework erwarten würde (Data Binding usw.), einzig Server-Side-Rendering fehlt noch. Des weiteren sprechen wir über die Aurelia-Community, speziell im deutschsprachigen Raum, Aurelia-Plugins (u.A. für jQuery, KendoUI, Electron, Cordova) vergleichen Aurelia mit Ember, React, Angular und Konsorten und sprechen am Ende über geplante Features und Katharinas Wunschzettel für die nächsten Versionen. [00:54:35] Keine Schaunotizen How I converted my React app to VanillaJS (and whether or not it was a terrible idea) Erhellende kleine Reise durch das Innenleben von Frontend-Webapps. Hyper – HTML/CSS/JS Terminal Na, wie lange haltet ihr das Video auf der Startseite aus, ehe ihr auf den Download-Button drücken müsst? Videos vom JS Kongress 2016 Youtube-Playlist mit vielen ca. 25 Minuten kurzen Talks.

Zum Jahresende haben sich Hans, Anselm, Schepp und Stefan niemand geringeren als Vitaly Friedman vom Smashing Magazine eingeladen, um ausgiebig über aktuelle Trends, Vitalys Werdegang und natürlich das Smashing Magazine zu plaudern. Schaunotizen [00:01:24] Vitaly Friedman Vitaly erzählt uns von seinem Werdegang: Aufgewachsen in Weißrussland kommt er zur Jahrtausendwende nach Deutschland und bringt sich im Autodidakt die nötigen Dinge fürs Web Design bei (und schwört immer noch auf Adobe Imagestyler). Nach einigen Projekten landet er bei Doktor Web und schließlich beim Smashing Magazine. [00:18:50] Web Performance und Style Guides Vitaly ist auch als Consultant unterwegs und berät weltweit Firmen zu UX und Technikthemen. Aktuell beschäftigt er sich sehr stark mit Web Performance (siehe oben) und Pattern Libraries. Wir plaudern über aktuelle Technologien und Tools zu diesen Themen, und sind sehr begeistert von Air/Shots, HTTP/2 und Zeplin. [00:49:52] Des Frequent Flyers Geldspartipps. Vitaly fliegt viel. Sehr, sehr viel. Viele Reisen bedeuten auch viele kleine Optimierungsmöglichkeiten, wie man das maximale aus einem minimalen Flugbudget bekommt. [01:12:54] Schreiben für das Smashing Magazine Das Smashing Magazine hat sich von einer Top-Ten-Listen-Seite zu einem der renommiertesten Web Magazine gemausert. Dazu gehört eine unglaublich genaue Qualitätskontrolle und auch viel Ausmusterung des Contents. Vitaly erzählt über den Review Prozess, Stefan steuert seine eigenen Erfahrungen bei.

Vor ziemlich genau einem Jahr telefonierten Rodney und Schepp sich zusammen, und starteten den Versuch einer Technologie-Prognose für das nachfolgende Jahr: Welche brandneuen Technologien, Frameworks, Tools und Methodiken würden 2016 Fahrt aufnehmen? Heute blicken wir zu dritt zurück auf diese Folge und schauen, was davon eingetreten ist. Soviel lässt sich sagen: Wir lagen bei mindestens so vielen Vermutungen richtig, wie wir auch falsch lagen. Ganz am Ende wagen wir sogar noch einen vorsichtigen Ausblick auf 2017. Schaunotizen [00:00:14] Der Jahr-2016-Progonosen-Check Folgende URLs passierten im Verlauf der Diskussion unsere Browser-Adresszeilen: Is Service Worker ready yet? Sites using SSL by Default Sites using HTTP/2 Software and Services supporting HTTP/2 Subgrids considered essential

Zur Revision 283 des Working Draft durften wir wieder einmal zwei Gäste empfangen. Mit dabei waren Christoph Rumpel, den ihr bereits aus der Revisionen 147 kennt, und Roman Kuba, der noch nicht dabei war. Geballte Österreichische Power im Haus! Die beiden brachten jeweils ein Thema mit, das wir ausführlich diskutieren konnten. Keine News Schaunotizen [00:01:25] vue.js Der neue Rising Star am JavaScript-Framework-Himmel ist ohne Zweifel vue.js. Roman klärt uns auf, was das Framework so toll macht und wie er darauf kam. Wir diskutieren Unterschiede und Parallelen zu den bekannten Frameworks Angular.js und React.js. Für alle Interessierten bietet der Vue.js Feed alle News. Den erwähnten Laracast findet ihr hier. [00:41:07] Chatbots Auch auf dem aufsteigenden Ast befinden sich Chatbots. Die kleinen Helferchen stehen uns in Form von Siri und „OK Google“ ständig zur Verfügung. Allerdings verbirgt sich dahinter so viel mehr. Christoph hat sich mit dem Thema ausführlicher beschäftigt und berichtet unter anderem von der ersten Chatbot-Conference und Gehversuche mit Chatbots in seiner Agentur. [01:10:47] Keine Schaunotizen Fullstack Radio – Vue.js Ein weiterer Podcast zum Thema Vue.js. NELA Chatbot Der erste Chatbot, den Christophs Agentur Liechtenecker entwickelte.

Ein weiteres Mal widmen wir uns Googles AMP. Um nach der Revision mit dem AMP-Projektleiter auch mal die Nutzerperspektive kennen zu lernen, luden wir uns Tobias Block aus Düsseldorf ein, der sich als Mobile-Frontend-Developer für RP-Online verdingt und uns Einblicke aus der täglichen AMP-Praxis gab. Schaunotizen [00:01:20] AMP aus Anwenderperspektive Nach einem kurzen AMP-Überblick kommen wir zum Kernfeature von AMP: eine komplexen Webseite eines großen Unternehmens ist mit AMP einfach schnell zu machen. Wir sprechen unter anderem über AMP und Werbung, Erträge, Links, Pageviews mit AMP, vergleichen AMP mit normalen mobilen Webseiten, spekulieren über finstere Machenschaften auf Seiten von Google, Features und noch offene Wünsche und wie sich AMP als Werkzeug auf Ganze-Firma-Skala betrachten lässt.

Stefan hat sich heute Nik Graf und Max Stoiber vom React Vienna Meetup eingeladen um die diesjährige Reactive Conf und den aktuellen State of React zu besprechen. Viel Spaß! [00:00:18] News Node.js 7.0 Release Node 7 ist draußen und zu 98% ES2015 kompatibel. Schaunotizen [00:00:40] The State of React Wir plaudern ausgiebig über die Tage vor und während der Reactive Conference. Beginnend beim letzten React Vienna Meetup bis hin zu den großen Ankündigungen und die kommenden Projekte. Um unseren anhaltenden Bewusstsseinstrom zu verfolgen gibt es hier eine Linkliste mit den wichtigsten Beiträgen: Next.js Vimbox Cypress Flowtype Elm Elm Plot Reason A life on the command line Graph QL Relay