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 277: Accessibility Object Model und Custom Elements

19. September 2016 | Keine Kommentare

Rodney, Schepp und Stefan widmen sich heute inoffiziellen und halbgar implementierten Standards um einen Ausblick in eine erstaunliche Zukunft zu bekommen, die jetzt schon zum Greifen nah ist.

Schaunotizen

[00:00:15] Accessibility Object Model
Das AOM erlaubt Lese- und Schreibzugriff auf Accessibility-Daten im Browser. Damit können Applikationen den Status verändern, Tools entsprechende Dinge auswerten, man kann sogar einen Screenreader in JavaScript damit bauen. Das ganze gibt’s halt noch nicht, hat aber zumindest alle wichtigen Browserhersteller an Bord. Selbsternannter Accessibility-Halbwissender Rodney Rehm erklärt uns die Details.
[00:12:27] The Case for Custom Elements
Rob Dodson von Google erklärt wie Custom Elements schon jetzt, ganz ohne der vollständigen Web Components Implementierung und fragwürdiger Browserunterstützung eine sinnvolle Ergänzung im Werkzeuggürtel des Webworkers sind. Kapselung von Daten, Wiederverwendbarkeit weit über JavaScript Frameworks hinaus sind nur ein kleiner Bestandteil. Wir analysieren, vergleichen mit dem Status von Polymer, zerbrechen uns den Kopf zum Shadow DOM und finden’s richtig gut, was man jetzt schon anstellen kann damit. Großes Plus: Mal so schnell alle Benefits von React mit nativen Schnittstellen und einer kleinen 4K API zum DOM-Diffen. Ja warum denn nicht?

[00:34:00] Keine Schaunotizen

I wanted to type a number
Nummernkeyboards, jede Menge davon. Und wie man sie alle richtig, gut und weiterführend einsetzt.
HTC Vive Support in Firefox Nightly
Virtual Reality und Co sind interessant für dich? Dann hat der Firefox Nightly was in petto um herumzuspielen. Höchst experimentell, aber das wollen wir ja so in dieser Revision.
Script’17 Ticketverkauf
Stefans JavaScript Event im Jänner hat mit dem Ticketverkauf begonnen. Die Early Birds gibt’s um 120 Euro (und sind fast alle weg), die Standard-Tickets um 150 Euro inkl. Steuern. Line-up Ankündigung folgt Mitte September.

Revision 276 – Große Module, kleine Module? Viel Code, wenig Code?

15. September 2016 | Keine Kommentare

Hans und Peter lieferten sich eine epische Debatte rund um JavaScript, speziell Module und Dependencies. Am Ende schütteln beide auch noch mal kurz den Kopf über eher originelle Vorschläge zum Thema CSS.

Schaunotizen

[00:00:13] JavaScript-Module – Klein, groß, mittel?
Angestoßen von dem Aufpoppen des Vanilla-JavaScript-Repositories PlainJS (von früher schon bekannt: das in die gleiche Kerbe schlagende Microjs) diskutieren wir ein paar Frontend-JavaScript-Grundsatzfragen. Peter springt wie immer dem designierten Prügelknaben jQuery bei, verweist auf den weniger bloatigen 3.0-Build ohne OldIE-Support und verweist darauf, dass es für Normalsterbliche annhährend unmöglich ist, etwas wie jQuerys text()-Methode nachzubauen (denn innerText ist super-kompliziert). Hans hingegen führt sein CSS Modal an Beleg dafür an, dass es nicht immer jQuery sein muss. Unabhängig von jQuery wollen beide nicht auf Lodash verzichten, obwohl da das bloat-Problem im Prinzip fortbesteht. Große Hoffnungen werden an diverse Methoden zur Dead Code Elmimination gerichtet (z.B. per Rollup oder Babel-Plugin). So könnten große Libraries neben kleinen Libraries (denen wir in Form von isArray und left-pad, vgl. Left-Pad-Gate unterschiedlich viel Respekt zollen) weiter bestehen und verwendet werden, obwohl auch diese ihre ganz eigenen Probleme haben. Am Ende diskutieren wir über den Weg der Zukunft: kleine Module? Große Module mit Erweiterungs-APIs? Web Components?
[00:55:53] Writing Less Damn Code
Heydon Pickering schlägt vor, wir mögen doch bitte weniger CSS schreiben, damit unsere Codebases besser werden mögen. Wir sind da äußerst skeptisch, und sind nicht sicher, ob die Zahl der Zeilen ein so relevanter Qualitätsindikator ist. Komponentenbasiertes CSS wie BEM scheint durchaus geeignet, CSS für die heutige Zeit zu fit zu machen, führt aber naturgmäß zu mehr Code.

[01:06:33] Keine Schaunotizen

google/closure-compiler-js
JS-API für Googles Closure Complier, Gulp-Task inklusive.
Start Building with Web Bluetooth and Progressive Web Apps
Kleines Tutorial zu Web Bluetooth.

Revision 275 – Project Ironman

11. September 2016 | Keine Kommentare

Zum Thema CSS-Refactoring luden wir uns neben dem anerkannten CSS-Buddha Jens Grochtdreis auch Christoph Reinartz an, der bei Trivago Frontend Lead ist, und aus aktuellem Anlass einiges zu erzählen hatte …

Schaunotizen

[00:02:22] Project Ironman
Christoph erzählt, wie aus dem nicht besonders strukturierten Code, der das UI der Hotelsuchmaschine Trivago bildete, eine aufgeräumte UI Pattern Library wurde. Wir sprechen über CSS-Refactorings, Styleguides und Styleguide-Generatoren (z.B. PatternPack und Frontify), Atomic CSS, die Zombie-Pattern-Library … und vermutlich erwähnen wir auch Bootstrap ein- oder zweimal.

[01:11:07] Keine Schaunotizen

Interview zu Aufwandsschätzungen bei Software-Entwicklung
Auch auf Frontend-Projekte anwendbar.
It’s not really about the button …
„A quickie on landmark discoverability“
Cube Composer
Funktionale Programmierung lernen, indem man Würfelchen zusammenklickt.

Revision 274: Ionic Framework

29. August 2016 | Keine Kommentare

In dieser Revision haben Schepp, Hans und Stefan Aaron Czichon zu Gast um ausführlich über das mobile Crossplattform Framework Ionic zu sprechen.

Schaunotizen

[00:01:44] Ionic, Cordova, Phonegap
Ionic ist ein auf Angular (2) basierendes Framework, dass für schnelle, plattformübergreifende Mobilentwicklung gestaltet wurde und auf Cordova aufbaut. Aaron erklärt ausführlich die Entwicklung, die das Projekt Phonegap seit 2011 durchgemacht hat, und welche Rolle es im Entstehen des Ionic Frameworks einnimmt. Wir sprechen über Gestaltungsmöglichkeiten, die Ionic Cloud und finden heraus, dass man auch ganz gut ohne Phonegap/Cordova Kern mit Ionic Applikationen gestalten kann. Sehr aufschlußreiche Reise! Aaron gibt übrigens zum Thema Workshops, unter anderem auf seiner eigenen Website und bei den Angular Days in Berlin.

[00:33:15] Keine Schaunotizen

CSS Writing Mode
Den Textfluss mal eben auf den Kopf stellen? Mit diesem ewig vorhandenen, doch gerne übersehenen Property geht das teilweise besser als mit CSS Transforms.
DevTools Challenger
Mozilla macht mit dem DevTools Challenger auf sich aufmerksam. Interaktives Spiel, dass einlädt die Firefox Tools ausgiebig zu testen.
webrender
webrender ist eine sehr interessante Entwicklung für den Servo Browser (und andere), die es ermöglicht superschnell CSS Direktiven auf der GPU zu zeichnen. Zukunftsmusik für einen Zukunftsbrowser, aber etwas, dass wir im Blickfeld haben sollten

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

26. August 2016 | 3 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 | Kommentare deaktiviert für Revision 268: Konferenz- und Meetup-Organisation

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 | Kommentare deaktiviert für Revision 267: News und Glücksrad

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.