Working Draft

Schepp, Hans und Stefan nutzen die steigenden Temperaturen um Unklarheiten aus dem Weg zu räumen. Schaunotizen [00:00:19] HTTP/2 Server Push Ein Artikel von Google’s Tool Advokaten erklärt nicht nur, wie man HTTP/2 Server Push in den DevTools vom Chrome erkennt, sondern wie das Gerüst sich unter der Haube verhält. Eine Unstimmigkeit nehmen wir zum Anstoß um über das grundlegende Prinzip von Server Push zu reden, diverse Anwendungsfälle zu finden und Licht ins Dunkel zu bringen. Dazu passend sind weitere Literatur von Simone Bordet auf Stackoverflow und ein passendes Video von selbigem. Wer HTTP/2 Server Push jetzt schon einsetzen möchte, kann das zum Beispiel schon über CloudFlare tun. [00:22:17] AMP supercharges Link Rot Kollege Anselm macht sich über langlebige URLs Gedanken und wir stimmen ein. Nothing lasts forever, und AMP ist anscheinend jetzt schon dem Linkverfall verschrieben. Leider ist das bei vielen Ressourcen so. Abhilfe schaffen SEO-Abmahnungen und Archive.org. Ein Projekt, dass man unterstützen soll. [00:34:25] Keine Schaunotizen WDRL.info Auch ein Projekt, dass man unterstützen soll ist Anselms Web Development Reading List. Mehr Newsletter braucht man nicht. Comprehensive Webfonts Webfont Ladestrategien. Alle. Mit Vorteilen. Und Nachteilen. Speeding up Babel transpilation with compact mode Babel ist 5x schneller wenn man die Leerzeichen per default weglässt. Building and maintaining atomic design systems with Pattern Lab Pattern Lab 2 ist draussen und großartig! Node.js Implementierung, flexible Templating-Sprachen. Kein vordefiniertes Atomic Design. Bravo! Can’t you make it more like Bootstrap Musstet ihr schon mal Designsysteme unter Entwickler bringen? Alice Bartlett schon. Und nicht nur für eine Handvoll Webseiten, sondern für 177 verschiedene Webauftritte der Financial Times. Ein Erfahrungsbericht.

Diesmal reichte die Themenliste nur für eine Kurzrevision mit Schepp, Peter und Stefan. Dazu kommen die üblichen drei Links. Schaunotizen [00:00:12] Debugger vs. console.log() epic throwdown challenge Angeregt von einem „Debugger? Brauche ich nicht!“-Artikel debattieren wir die Vor- und Nachteile von Debuggern und console.log() – denn tatsächlich nutzen viele auch namhafte Entwickler keinen Debugger (Peter erwähnt hier das Buch Coders at Work). Mit leichter Chrome-Schlagseite berichten wir von unseren Erfahrungen mit dem debugger-Statement, Source Maps, Console-Methoden jenseits von log() (Chrome, Firefox), Blackboxing (Chrome, Firefox), Node-Debugging mit Chrome und mit Visual Studio Code sowie divserse anderen Debugging-Techniken – bis hin zum etwas exotischen Web Audio Editor in Firefox. [00:28:40] Keine Schaunotizen Innovating with HTTP 2.0 Server Push Aktualisierter Artikel zu HTTP 2.0 Server Push. pedroborges/kirby-autogit Git für Kirby. Frontend Conference Zurich Konferenz mit 1A Lineup!

Die Working Draft Crew ist ja nicht nur fleissig am sprechen, sondern lädt auch gern mal Sprechende zu der einen oder anderen Veranstaltung ein. Hans, Schepp und Stefan plaudern über Organisation von Meetups und Konferenzen Schaunotizen [00:00:17] Titelthema Was euch nun erwartet ist eine knappe Stunde Plaudern aus dem Nähkästchen. Wir sprechen über Hosting, wechselnde Gastgeber, Sponsoring. Die Vorteile von Meetups, die Vorteile von Konferenzen. Und weil wir unsere Finger doch in einigen Projekten haben, gibt’s hier eine Auflistung ebenjener: Hans: Nightly Build 2016 Schepp: Webworker NRW Meetup Multimediatreff – Der Multimediatreff kommt wieder! Vermutlich Ende November Stefan: Technologieplauscherl Meetup Stahlstadt.js Meetup Script’17 – JavaScript Event [00:54:41] Keine Schaunotizen CSJS – ECMAScript 2016 Stylesheets Stefan hat ja sehr eindeutige Meinungen zu CSS in JS Methodologien. Diese hier findet er allerdings ganz sauber! Gilt das schon als Hölle zufrieren? Lightbike Performance Budgets und Webdriver. Fein.

Aus akuter Themen-Ermangelung drehen Anselm und Stefan wieder mal am Rad. Erstaunlicherweise gibt’s zum ganz einfachen Elementen wieder außerordentlich viel zu lernen. [00:00:23] News jQuery 3 ist raus! jQuery 3 wurde released und bietet allerlei Neuerungen. Alte Browser müssen nun dazu geschaltet werden, alle asynchronen Calls sind Promise-kompatibel, usw. Mehr dazu in dem Blog Beitrag. Nginx on HTTP/2 on Google Chrome bug Nginx ist toll, HTTP/2 ist toll, Chrome ist toll, Ubuntu auch toll. In der Mischung: Oft nicht verwendbar. Ein ganz prekärer Bug hat sich eingeschlichen, der Google Chrome User unter falschen Voraussetzungen nicht das schöne neue HTTP/2 konsumieren lässt. Dieser Artikel zeigt die Abhilfe. [00:04:01] Glücksrad Das img-Element Das img Element ist ja allseits bekannt, hat aber doch ein paar Besonderheiten, die es zu klären gibt. Wir reden über Image maps und das crossorigin Attribut, und lassen alt gediente Input Elemente wieder aufleben. Sections and headings Schönes neues HTML. HTML5 kam, versprach gute Strukturen, und weder Screenreader noch Browser nahmen das ganze an. Entwickler hingegen, die ein wenig Gespür für Semantik haben, sahen darin riesige Vorteile. Wir resümieren. Das wbr Element Wieviele Möglichkeiten gibt es eigentlich, dem Browser zu sagen wann er abtrennen soll. Oder wie er abtrennen soll. Oder wenn er’s bleiben lassen soll. Und warum sind denn alle unterschiedlich? Mal ein Element, mal eine Entity. Im CSS kriegt man’s sowieso nicht sauber hin. Wo bitte ist die all-in-one Lösung. [00:35:47] Keine Schaunotizen ECMAScript 2016 Standard Die siebte Fassung von ECMAScript — die 2016er Edition — ist fertig. Hier kann man den gesamten Standard nachlesen. Wenn man denn will. Promises — all the wrong ways Getify beschwert sich über falsche Anwendung von Promises. Fairerweise gibt er auch gleich Lösungsvorschläge mit. Form validation techniques So viele Infos zu korrekter Formularvalidierung. Wo hören die Browser-Funktionalitäten auf, wo muss man selbst ran. JSConf Budapest Viele, viele schöne Videos von der JSConf in Budapest.

Wir waren mal wieder reif für einen Gast und so luden wir diese Revision den Daniel Mies zu uns ein. Schaunotizen [00:01:02] TypeScript Wir wählten TypeScript als Hauptthema dieser Folge, weil Daniel in seinen JavaScript-basierten Projekten reichlich gute Erfahrung damit gemacht hat. TypeScript ist im Prinzip ein Superset von EcmaScript Next, also reinrassiges JavaScript mit ein paar wenigen, aber wichtigen Erweiterungen oben drauf. Diese Erweiterungen haben nur einen Zweck, nämlich die Entwicklung in der Sprache JavaScript robuster und angenehmer zu gestalten. Die Eckpfeiler dafür sind: Typisierung von Variablen zur Absicherung gegen Typ-Fehler Interfaces zur Typisierung ganzer Objektstrukturen Decorators zur Anreicherung von Funktionen/Methoden um weitere Aufrufe All diese Features ermöglichen es einer TypeScript-fähigen IDE schon zum Zeitpunkt der Codeerstellung Fehler zu erkennen, und sie ermöglichen auch bessere Code-Assistenz-Werkzeuge. Um Typisierung und Interfaces auch für externe JavaScript-Bibliotheken nutzen zu können, gibt es das Typings-Projekt, eine Sammlung von Typ- und Interface-Definitionen für all die populären Libraries. Wer jetzt Blut geleckt hat: Die TypeScript-Doku ist laut Daniel sehr gut. Darüberhinaus hat Damiel selbst eine kleine Einführung geschrieben. Zu guter Letzt gibt dann noch das exzellente TypeScript Book, das Pattern und Best-Practices dokumentiert. [00:35:38] State of the gap Abschließend beschäftigten wir noch mit der Frage, ob Adobe Cordova / PhoneGap in Zeiten moderner Browser überhaupt noch benötigt wird. Wir denken schon, auch wenn diese Bedarfsmomente eher selten sind. [00:56:18] Keine Schaunotizen CSS Line Spacing Exposed Hier taucht der Autor tief in die Layout-Mechaniken von CSS Zeilendurchschüssen ein. Jugend hackt – Mit Code die Welt verbessern „Jugend hackt“ ist eine Veranstaltungsreihe, die bundesweit stattfindet, sowie in der Schweiz, und die junge Leute an das Thema „Programmieren“ heranführen soll. Dafür werden kontinuierlich erfahrene Mentoren gesucht, die den Neulingen helfend zur Seite stehen. Vielleicht wäre das ja auch mal was für Euch?

Nach monatelange Steineklopfen ist es endlich gelungen, mit dem Pepo eine Revision zum abstrakten Thema „Weiterbildung im Frontend-Bereich“ einzutüten. Schaunotizen [00:00:44] Weiterbildung im Frontend-Bereich Warum scheinen so viele Entwickler nur Dienst nach (locker interpretierter) Vorschrift zu schieben? Liegt es daran, dass (Web)-Entwicklung eine so haarige Angelegenheit ist? Wir sprechen über mögliche Ursachen sowie Team-Management und Organisationstechniken, Scrum, Prozessse, Checklisten und Code Reviews sowie Refactoring (speziell von CSS) und Planung von Refactorings.

Anselm, Peter und Stefan stellten mal wieder fest: Webentwicklung ist, als wollte man über 9000 Korken gleichzeitig unter Wasser halten. Und hin und wieder klappt das gar nicht mal so gut. Schaunotizen [00:00:17] CSS außer Rand und Band Einem Artikel über CSS-Unit-Tests stehen wir skeptisch gegenüber, erkennen aber an, dass die Menschheit Mittel und Wege sucht, ihr CSS unter Kontrolle zu bekommen. Dieses ist nämlich oft außer Rand und Band. Wir empfehlen als Gegenmittel Systeme wie BEM, klassische Codequalitätssicherungsmaßnahmen wie Reviewprozesse auf CSS anzuwenden, die Finger von Reset-Stylesheets oder Stylesheets wie Normalize.css zu lassen und ausgiebig zu linten. Stefan empfiehlt außerdem CSS-Workshops mit Harry Roberts, der sich durch weit überdurchschnittliche Checkung in diesem Bereich auszeichnet. [00:29:44] Our best practices are killing mobile web performance Schaden Desktop-Performance-Best-Practices auf Mobile? Zumindest bei Lazy Loading und asynchronem JavaScript sieht es so aus. Generell ist das Aufstellen allgemeingültiger Regeln in einer Welt, in der HTTP2 neben Oldschool-HTTP existiert, nicht ganz einfach. Projekte wie PageSpeed und der SpeedIndex von webpagetest.org (hier von Stefan detailliert erklärt) probieren es trotzdem. Wie wir dann von HighTechWebTech zum Fazit „Make Flash great again“ kommen, verraten wir an dieser Stelle nicht. [00:53:35] Keine Schaunotizen [00:00:00] Learn Redux Video Tutorial Course Der umtriebige Wes Bos erklärbärt in einer kleinen Videoserie Redux. [00:00:00] Web and Chrome at Google I/O 2016 Das für Web-Nerds interessanteste von der I/O 2016.

Voll am podcasten hier, der @workingdraft #btconf pic.twitter.com/4Kzyid5Ujl — position: absolutely (@tcaspers) 10. Mai 2016 Auch dieses Jahr waren wir auf der Düsseldorfer beyond tellerrand, wo wir nicht nur fantastische Talks gesehen, sondern uns auch wieder jemanden zum Ausfragen geschnappt haben. Anstatt dass es wie sonst nur ein Interviewpartner war, ergab es sich, dass wir derer drei zusammenbekamen: Während drinnen Vorträge liefen, starteten Rodney und Schepp mit PPK und Chris Heilmann ein, und zur Pause gesellte sich spontan noch Jeremy Keith dazu. Im Hof des Capitols sitzend sprachen wir, wie sollte es in dieser Runde anders sein, über übertriebenes Tooling und die Kaputtheit des Webs. Für die Ton-Qualität, die eher mittel (und heftig geräuschgefiltert) ist, entschuldigen wir uns, aber ein Interview im Innenbereich war für uns ebenso wenig praktikabel. Viel Spaß beim Hören!

In Ermangelnung großer Themen ließen Stefan, Schepp, Peter und Anselm mal wieder das Glücksrad rotieren. [00:00:15] News Geolocation API removed from unsecured origins in Chrome 50 Ab jetzt gibt es Ortung nur noch mit HTTPS. [00:00:46] Glücksrad window.open() Popups, blast from the past! Wir erinnern uns an die seltsamen Parameter dieser Funktion (die interessanterweise in einer CSS-Spezifikation festgehalten sind) sowie an rel=noopener. CSS Marquee Module Level 3 Stellt sich raus: das gibt‘s gar nicht. CSS Scroll Snap Points Kurze Diskussion über Sinn und Zweck der Scroll Snap Points, die zwei verschiedenen Spezifikationsversionen und Vorreiterrolle des IE. Microdata Erfolgloser Versuch, zwischen Microformats, RDFa und HTML5-Microdata den Überblick zu behalten. Anschließende Grundsatzdebatte über Semantik (und JSON-LD), SEO (und schema.org) und Standards. CSS Round Display Wurde bereits in Revision 236 für mehr so mittelgut befunden. a href=“https://www.w3.org/TR/css3-hyperlinks/“>CSS3 Hyperlink Presentation Module Ein weiterer ad acta gelegter Spezifikationsentwurf. Cascading Style Sheets, level 1 Wir bewundern das revolutionäre Frühwerk der Standards-Entwicklung. [00:53:33] Keine Schaunotizen Caching best practices & max-age gotchas Jake Archibald in gewohnt lehrreich-humorvollem Stil.

Anselm, Schepp und Stefan nehmen sich zwei herumsurrende Artikel als Anstoß für ein ausgedehntes Plaudern aus dem Nähkästchen. Schaunotizen [00:00:27] Converting Font Icons to SVG Sara Soueidan erklärt den Icon Fonts den Tod mit diesem ausführlichen Migrations-Guide. Wir sprechen über unsere Erfahrungen und den Problemchen, loben aber auch gleichzeitig neue Workflows und ein viel „sauberes“ Entwicklungserlebnis. [00:25:20] Container Queries: Once more unto the breach Media Queries sind fein, man stößt allerdings schnell an seine Grenzen wenn man nicht das gesamte Bild betrachten möchte, sondern im Detail pro Komponente das Look and Feel bestimmen möchte. Container Queries sind der Titel einer neuen Spezifikation, die sich genau um solche Dinge kümmern wollen. Wir erklären warum die ehemals genannten „Element Queries“ nun anders heißen, welches grundlegende Problem mit dieser Neubenamsung umgangen wird und wie man sie heute schon einsetzen kann. Schepp zum Beispiel schwört auf diesen Polyfill. [00:51:21] Keine Schaunotizen Hotel Hotel lässt alle eure Entwicklungsserver und die damit verbundenen Host-Einträge bequem über eine Weboberfläche verwalten. Riot.js Eine User Interface Bibliothek, die sich an React hält aber mit deutlich geringerem Footprint auskommt. Stylefmt Coding Guidelines sind wichtig, sie einzuhalten kann schwer sein. Stylefmt formatiert eure Stylesheets nach einem festgelegten Regelwerk. Pre-Commit-Hook, und fertig ist die Einheitlichkeit. Rollupify Rollup ist groß. Browserify ist groß. Beides zusammen gibt laut Engineering-Meister Rodney in seinem Projekt über 40% Platzeinsparung. Hossa!