Working Draft

Wöchentlicher News-Podcast für Webdesigner und -entwickler

Spenden für Soundqualität!

Unsere Aufnahmen werden optimiert mit Auphonic.
Flattern oder direkt bei Auphonic spenden.

Revision 273: Open Device Labs, HTML5Test.com and Weird Browsers

26. August 2016 | Keine Kommentare

This time we had no one less than Niels Leenheer from Drachten in Holland as our guest, creator of HTML5test.com, owner of the forth largest open device lab in the world and browser connaisseur.

Discussion Topics

[00:01:47] On the rise and fall of open device labs
Managing one of the largest open device labs in the world, we asked Niels how well the concept is being accepted by the developer community. We learned how exactly he manages these inquiries and what type of people ask for device testing. And of course we also talked about all the aspects that – contrary to initial expectations – does not work, and why that is.
[00:19:36] HTML5test.com
Device testing lead us right to the next topic which was the benchmarking site html5test.com. Incepted in 2010 the site quickly became a respected authority for information seeking developers, browser vendors and the press. And most importantly it pushed browser vendors forward and helped steer development into the right directions.
[00:25:54] Weird Browsers
Working on html5test.com brought a lot of browser-specific quirks to Niels‘ attention and so he shared a few interesting stories with us. We talked about „smart“ TV browser, console browsers, eBook-reader browsers and browsers that hide in VR glasses. Astonishingly most of the times these browsers act pretty normal, except for when they don’t. Then things are getting pretty weird!
[00:52:21] Browser Sniffing
The conclusio of the above topic was that some broken features cannot really be feature detected. So either we manage a very defensive approach that allows sites to gracefully degrade without breaking on strange browsers. But if we don’t, and we need to resort to user agent sniffing which traps to look out for. Niels suggests using one of two libraries doing a good job a browser detection: One being the UA Parser and the other one being the Piwik Device Detector.

[01:03:41] A Ticket Raffle!

Win two tickets for the code.talks in Hamburg!
We already twittered it: Niels is giving away two 100% discount codes for the code.talks conference in Hamburg at the end of September. Anyone that comments below or tweets to @html5test the exact number of devices he currently has in his device lab qualifies for our raffle. The Raffle ends Sunday, 4th of September.

Revision 272: Statische Seitengeneratoren, Metalsmith und CSS Funktionssyntax

20. August 2016 | Keine Kommentare

Rodney, Anselm, Schepp und Stefan nehmen aktuelle Entwicklungen im CSS Standard sowie statische Seitengeneratoren für Großprojekte in Angriff.

Schaunotizen

[00:00:25] Statische Seitengeneratoren für Großprojete und Metalsmith
Stefan hat das letzte Jahr damit verbracht 2000 HTML Seiten in einen statischen Buildprozess zu bringen, und spricht von seinen Erfahrungen. Wie Rodney ist er schnell zum Schluß gekommen, dass Tools wie Metalsmith dank ihrer feinen Plugin-Architektur am Besten für die vielreichenden Ansprüche unserer Webseiten taugen. Rodney baut die Ally.js Dokumentation damit, und nutzt Dinge wie Cheerio und ein selbstgeschriebens Plugin um Markup nach dem Parsen zu verändern. Stefan erzählt von den Bemühungen die Stack für den gewöhnlichen Content-Autor so angenehm wie möglich zu machen und zeigt Tools wie den Liquid Linter
[00:30:25] CSS Function Syntaxes
Weil man die color Funktion mit bestehenden Mitteln nicht problemlos definieren kann schraubt man an einer neuen CSS Funktionssyntax, die sich mehr an den Properties orientiert. Damit verbunden ist ein Refactoring sämtlicher existierenden CSS Funktionen, auch jenen, die schon seit IE-Zeiten im Einsatz sind. Sehr kontrovers, aber doch durchdacht. Wir geben unseren Senf dazu und überlegen ob man das auch anders hätte lösen können.

[00:44:42] Keine Schaunotizen

How To Use Arguments And Parameters In ECMAScript 6
Umfangreiche Erklärung zu allen Anwendungsarten von Argumenten und Parametern in ES6.
The History of the URL
Geschichtlicher Exkurs zum Fundament des Web. Samt Fortsetzung

Revision 271: HTTP/2 Server Push und Link Rot

5. August 2016 | Keine Kommentare

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.

Revision 270: Debugging und Links

5. August 2016 | 1 Kommentar

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!

Revision 268: Konferenz- und Meetup-Organisation

31. Juli 2016 | Keine Kommentare

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:

Schepp:

Stefan:

[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.

Revision 267: News und Glücksrad

10. Juli 2016 | Keine Kommentare

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.

Revision 266: TypeScript

29. Juni 2016 | 1 Kommentar

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?

Revision 265: Weiterbildung im Frontend

20. Juni 2016 | 4 Kommentare

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.

Revision 264: Make Flash great again

13. Juni 2016 | 3 Kommentare

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.

Revision 263: Im Gespräch mit PPK, Chris Heilmann und Jeremy Keith

29. Mai 2016 | 5 Kommentare

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!