Working Draft

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

Spenden für Soundqualität!

Alle Spenden fließen zu 100% in die Anschaffung von besserer Aufnahme-Hardware.

Revision 181: Module, Events, Verlosung

31. Juli 2014 | Keine Kommentare

Mit dem Herrn Golasch an Bord ranteten wir (Hans, Schepp und Peter) über JavaScript-Module und erzählten von selbstorganisierten Klein-Events, für die wir an Ort und Stelle auch Tickets verlosen.

Schaunotizen

[00:00:14] NPM AMD ES6 JSPM OMG WTF BBQ
Ohne so richtig konkreten Anlass sprachen wir über verschiedene Ansätze für JavaScript-Module. ES6-Module sind zwar praktisch fertig, aber noch von keinem Browser (oder sonst irgendwas) unterstützt. Beim Gespräch über die heute nutzbaren Alternativen lässt Peter kein gutes Haar an AMD bzw. RequireJS und dem damit verbundenen Konfigurationskrieg. Sein Alternativ-Vorschlag Browserify bringt Node-Module in den Browser, hat aber seine ganz eigenen Macken. Auch über den Package-Manager-Wildwuchs zürnen wir; zum Glück haben wir heutzutage „nur“ noch NPM, Bower und toolspezifische Manager wie Atmosphere von Meteor an der Backe, was uns aber trotzdem recht viel erscheint. Ungeachtet dessen setzen wir für die nahe Zunkunft Hoffnung in noch einen Package Manager: JSPM ist ein auf ES6 aufsetzender Allesfresser, der die Modulformatsgrenzen zwischen ES6, AMD und allem übrigen verschwimmen lässt (Talk auf der JSConf). Zum Abschluss geben wir ein paar alltagstaugliche Modul-Tool-Tipps von uns (grunt-bower-clean, dependo) und erklären, warum yepnope.js nicht mehr das Mittel der Wahl sein sollte.
[00:37:12] Dalekathon
Sebastian und Rodney rufen zur regen Beteiligung an ihrem fünftägigen Dalek.js-Hackathon auf. Gerne auch online!
[00:44:25] NightlyBuild.io – Tickets zu gewinnen!
Die halbe Workingdraft-Truppe veranstaltet (mit Verstärkung) eine After-Work-Konferenz in Köln! Für kleines Geld wird viel geboten. Sebastian und Hans erzählen auch direkt, wie man so etwas auf die Beine stellt. Wer die 35 € nicht selbst stemmen, sondern eins von zwei Tickets gewinnen möchte, soll uns einfach seinen sehnlichsten Speaker-Wunsch mitteilen.

[01:01:18] Keine Schaunotizen

jit-grunt
Automatisches und vor allem schnelles laden von Grunt-Plugins.
Speed in Software Development
Monströser Artikel zum Thema Geschwindigkeit und Produktivität bei Softwareentwicklung.

Revision 180: Media Queries und Web-Worker Analysen

28. Juli 2014 | Keine Kommentare

Hans, Schepp und Anselm fanden dieses mal zwei spannende Themen, die uns als responsive Webentwickler mehr oder weniger betreffen und es gibt eine Menge Linktipps.

Schaunotizen

[00:00:19] The Future of Media Queries
Nachdem in neuen Spezifikationen immer mehr neue Media Query Typen auftauchen, nehmen wir dies als Anlass, um über den Sinn und Unsinn von zu spezifischer Auswahl an Media Queries und die damit einhergehenden Problematiken für Entwickler zu sprechen. Auf mögliche Alternativen zu Media Queries und die in der Präsentation aufgezeigten Lösungen gehen wir kurz ein und geben unsere Meinung kund.
[00:19:48] Front-End Technology Survey Round-Up und die Webkrauts Umfrage-Ergebnisse
Zwei umfangreiche Umfragen im Front-End und Webentwicklungsbereich nahmen wir zum Anlass, um über Verwendung und Verbreitung von Front-End Technologien zu sprechen, um herauszufinden, wie nischenhaft unsere verwendeten Tools wirklich sind und wie verbreitet Bootstrap tatsächlich ist. Im zweiten Teil, der Webkrauts-Umfrage, geht es hingegen mehr um den Webworker an sich, seine Arbeitsweise, sein Einkommen, Arbeitszeiten und Weiterbildungmöglichkeiten. Wir sprechen, wie es uns ergeht, was wir aus den Ergebnissen für Rückschlüsse ziehen können und wo wir die Szene ganz anders eingeschätzt hätten…

[00:51:56] Links

LXJS (2014) Videos
Alle Videos der LXJS Konferenz in Lissabon, Portugal, sind bereits online auf ihrem YouTube Kanal ansehbar und bringen eine Menge Wissen mit. Alles in allem lohnenswerte Stunden Material, die man sich ansehen sollte.
How a browser paints a Pixel
Paul Lewis erklärt ganz beiläufig an Hand von perceived Performance Optimierung (aka 60fps) wie ein Browser eigentlich CSS in Pixel umwandelt, was dabei passiert und wie man vermeiden kann, die Performance einer Seite kaputt zu machen, weil der Browser zu viele Pixelberechnungen in der Zeit durchführen muss, als dass er dies noch flüssig darstellen könnte.
Durchstarten mit Gulp
Wer sich noch nicht richtig mit Gulp beschäftigen konnte, aber einen guten Einstieg sucht, dem sei dieser ausführliche Artikel empfohlen, der Schritt für Schritt erklärt, wie man Gulp aufsetzt, Tasks einrichtet, konfiguriert und seine Abläufe damit automatisieren kann.
CSS / SVG Clipping
Sara Soueidan erklärt in ihrem Blogartikel ausführlich, wie man mit CSS und / oder SVG seine HTML, CSS oder SVG Elemente mit Clip-Paths beschneiden kann und so in schöne Formen wie Hexagone oder Freiformen bringt.
Simplicity
Bastian Allgeier schreibt in seinem Artikel „Simplicity“ über die Veränderung unseres Workflows. Oftmals sinnieren wir darüber, welche Toolchain wir für ein Projekt brauchen und lassen dabei die eigentliche kreative Arbeit außen vor. Er appelliert daran, sich auf das Wesentliche zu konzentrieren und sich nicht auf technische Hilfsmittel zu beschränken.
Technical Dept 101
Ein Einstieg, um zu verstehen, woher Legacy-Code kommt, wie dieser entstehen kann und warum Code-Rewrites notwendig sind. Zum besseren Verständnis für Manager oder andere Außenstehende, die nicht selbst in der Coder-Rolle stecken.
NightlyBuild.io
Zum Zeitpunkt der Revisionsaufnahme noch nicht bereit, mittlerweile online: Die Website zur nächtlichen 1-Tageskonferenz im September in Köln, mitorganisiert unter anderem von Hans und Anselm. Die Tickets kosten 35€ und es sind noch ein paar erhältlich.

Revision 179: Web Components

26. Juli 2014 | 1 Kommentar

Revision 179 ohne besondere Vorkommnisse.

[00:00:10] News

position: sticky aus Blink entfernt
Die Blink-Entwickler (Google) entfernen position: sticky erst mal wieder, bis sie das Compositing System erneuert haben.
Chrome Canary Connection Emulation
Die Chrome Developer Tools können nun Verbindungsgeschwindigkeit simulieren.

Schaunotizen

[00:01:27] Web Components
Web-Components wird als Oberbegriff für Technologien, die HTML um neue, eigene Elemente (also komplette Interfaces) erweitern.
Das HTML5 video-Tag erzeugt im Browser beispielsweise einen Player, bestehend aus verschiedenen Elementen, diese werden mithilfe des ShadowDOM gebaut. Dazu kommt die Funktionalität, die dahinter steht: Das alles ist durch Web-Components für Web-Interface-Entwickler nun auch möglich. Und zwar bereits ab sofort, denn das Polymer Framework für Web-Component Umsetzung bietet die neuen Technologien cross-browser an.
Einige grundlegenden Dinge werden von Todd Motto und Peter in seiner Artikel-Serie zum Thema noch mal ausführlicher beschrieben.
Wir diskutieren über die Anzahl der Dateien, die geladen werden müssen: Styles, HTML, JS pro Component. Unsere Schlussfolgerung: dies wird nicht mehr all zu wichtig sein, wenn man SPDY verwendet, da man besser Deltas als große Dateien durchs Kabel jagt. Auch Probleme mit den Spezifikationen sprechen wir ans: Peter vermisst bei Components beispielsweise das Responsive Web-Design und auch sogenannte Element Queries fehlen noch. Des weiteren hat man zum Thema Barrierefreiheit von Components auch noch nicht viel gehört.

[00:47:22] Keine Schaunotizen

The ServiceWorker: The network layer is yours to own
Ein lustiges Video, welches Service Worker näher erläutert.
“Merge Pull Requests” Considered Harmful
Ein Artikel, der zu besseren Merging-Strategien rät, als den “Merge Pull Request” Button auf GitHub zu verwenden.
HTTP/2
Schepps Präsentation zum Thema HTTP/2 und SPDY deckt so ziemlich die meisten Fragen in diesem Context ab.

Revision 178: Ember.js in der Stahlstadt

10. Juli 2014 | 4 Kommentare

Das vorherrschende Sommerloch veranlasst die Working Draft Crew zu einer Spezialrevision: Peter, Anselm und Stefan geben sich in rekordverdächtigen 8 Minuten die Klinke in die Hand und klappern die Eckpfeiler unseres Newspodcasts ab, bevor wir die Tür und Tor für ein ausgedehntes Face To Face Gespräch rund um Ember.js öffnen. Dazu eingeladen sind Runtastic Mitarbeiter und Stahlstadt.js Organisatoren Clemens Müller, Michael Klein, Jakob Lehner und Manuel Mitasch. Viel Spaß!

[00:00:36] News

Opera Mini auf iOS
Opera hat die neue Version ihres Mini-Browsers für iOS veröffentlicht und mit dem Turbo Mode ein neues, sehr spannendes Feature entworfen: Anstatt wie bislang die gesamte Seite auf den Presto-Servern des norwegischen Browserherstellers vorrendern zu lassen, kann man nun in unterschiedlichen Qualitätsstufen die Bilder reduzieren. JavaScript und CSS wird wie im hauseigenen Safari interpretiert.

[00:02:00] Keine Schaunotizen

A Look At preserveAspectRatio in SVG
Sehr anschaulich und mit vielen Insights erklärt Joni Trythall wie man das Seitenverhältnis in SVG steuert.
Velocity.js
Schneller als CSS3 und so komfortabel wie jQuery.animate? Velocity.js machts möglich.
Grid Layouts in CSS3
Sehr anschauliche und unmfassende Präsentation zu CSS3 Grid Layouts.
Installable Web Apps
JavaScript-Doktor Rauschmayr zeigt den aktuellen Status von installierbaren Web Applikationen unterschiedlichster Plattformen auf.

[00:07:34] Ember.js Interview (Schaunotizen)

Ember.js
Nach dem letzten Linzer JavaScript Meetup — stahlstadt.js — konnte Stefan die Organisatoren zu einer sehr ausführlichen Diskussion rund um das Ember.js Framework gewinnen. Wir erfahren, was Ember mit “ambitionierten Web-Applikationen” meint, welchen Zusammenhang es mit Ruby/Ruby on Rails gibt und welche Prinzipien hinter dem JavaScript Toolset stecken. Außerdem wird aus dem Nähkästchen geplaudert, wie Ember mit Hilfe der Community in die Administrationsoberfläche von Ghost gewandert ist. Bei der nicht unbedingt flachen Lernkurve haben wir ausserdem noch eine Menge Tipps und Informationen für Einsteiger parat!

Ember.js Links

Ember-CLI
Ein ganz eigener Projektgenerator für Ember in Form einer hübschen Command Line.
Ember.js Codeschool
Zwar kostenpflichtig, aber laut Expertenmeinung immer noch der beste Kurs zu Ember.
Ember.js Unit Tests
Die Ember.js Unit Tests geben guten Einblick in die zahlreichen Features des Frameworks.
Ember.js Tutorial Video
Toller Einstieg, der einige Basisfeatures zeigt.
Getting Started with Ember
So wünscht man es sich: Die offizielle Doku ist immer noch die Beste.
Hello Ember
Wie und warum die Blogging-Plattform Ghost sich für Ember entschieden hat. Inklusive Link auf eine der schönsten Github Diskussionen

Revision 177: CSS-Benamung, Glücksrad, Links

8. Juli 2014 | 1 Kommentar

Sommerloch und Fußball haben sich verschworen, um unsere Themenliste auszudünnen. Also sprechen wir kurzerhand über einen Artikel von Hans, der sein Werk vor Peter, Anselm und Stefan verteidigt.

Schaunotizen

[00:00:33] CSS Naming Conventions: Less Rules, more Fun
Hans argumentiert für einfachere CSS-Konventionen, als sie in den etablierten und sehr ausführlichen bekannten Systemen Smacss, OOCSS und BEM propagiert werden. Vier einfache Konzepte sollten reichen. Peter sieht ein mögliches Problem darin, dass ein einfaches System besonders kompetente Entwickler erfordert. Fazit: ein Webentwickler-Team braucht Kompetenz, Zeit und gute Kommunikation, um wirklich gutes CSS abzuliefern.

[00:27:22] Glücksrad

Autofill-Features
Nach einem kurzen Irrweg in Richtung JavaScript-Links reden wir über die Features, die HTML5 rund um Autocompletion für Formulare bringt. Das ist auf dem Papier im Moment noch etwas beeindruckender als im Browser.

[00:35:20] Keine Schaunotizen

Videos von der JSConf US
Schlaue Leute erzählen in kurzen Videos schlaue Dinge.
Normalize OpenType
Drop-in-CSS-Modul für schönere Typografie.
Philip Roberts: Help, I’m stuck in an event-loop. on Vimeo
Anschauliche Erklärung von Asynchronität in JavaScript.
Falsehoods Programmers Believe
Artikelsammlung voller klassischer Programmierer-Irrtümer betreffend Namen, Adressen, Zeiten und vielem vielem mehr.

Revision 176: will-change, Critical Path und z-index

28. Juni 2014 | Keine Kommentare

Ungeachtet der Fußball-WM widmete sich das leeterarische Quartett, diesmal bestehend aus Anselm, Hans, Rodney und Peter, einigen kleinen Neuheiten aus der Frontend-Welt.

[00:00:30] News

Improving Viewport Unit Support in WebKit
Endlich (weitgehend) bugfreie Viewport-Units auch in WebKit.
IE Developer Channel
Regelmäßig erscheinende Dev-Versionen des IE! Ein Traum wird wahr.

Schaunotizen

[00:01:07] will-change
Ein Opera-Artikel erklärt die neue CSS-Eigenschaft will-change. Im Prinzip handelt es sich um die Standardisierung des 3D-Transform-Hacks. Wir erläutern nochmals die technischen Hintergründe und diskutieren über Sinnhaftigkeit, Art und mögliche Häufigkeit des Einsatzes dieses neuen Features.
[00:17:06] Critical Path
Eine Webseite bietet einen Critical Path CSS Generator an, den wir zum Anlass nehmen das Thema gründlich zu beleuchten. Zunächst kaprizieren wir uns auf CSS-Inlining, das unter anderem Hans etwas kritisch sieht. Gegen Ende schweifen wir in eine Debatte über Tools im Allgemeinen und Uncss im Speziellen ab, erinnern an Revision 166 und landem am Ende bei Penthouse.
[00:47:36] Sassy Z-Index Management For Complex Layouts
Ein Sass-Mixin löst ein Problem, dessen Existenz von Rodney und Peter bestritten wird. Beim Klärungsversuch vergleichen wir unsere Projekte und wie wir darin z-index verwenden.

[01:01:47] Keine Schaunotizen

beeplay.js
Töne mit JavaScript erzeugen. DJ Rod mixt live im Studio eine Huldigung auf seinen Arbeitgeber ab.
The Humble Button Element
Wichtige Semantik-(Argumentations)-Nachhilfe.

Revision 175: Die Open Source Reise des Jan Lehnardt

16. Juni 2014 | 2 Kommentare

Zur 175. Revision haben wir uns mit Jan Lehnardt einen Riesen der deutschen Open Source Szene eingeladen. Entsprechend riesig ist auch diese Mammutepisode mit über zweieinhalb Stunden. Doch soviel sei gesagt: Der Umfang verspricht auch sehr viele interessante Insights! Viel Spaß!

[00:01:00] News

Beyond Tellerrand Tickets
Die Beyond Tellerrand kommt nach Berlin! Tickets gibt es ab sofort.

Schaunotizen

[00:01:29] CouchDB
Zum Open Source Ruhm gekommen ist Jan mit der NoSQL Datenbank CouchDB. Jan erzählt von seinen Anfängen in der Community, seiner Rolle bei Apache und gibt Einblick in die strukturellen Unterschiede zwischen seinem Baby, PouchDB, TouchDB und der MongoDB.
[00:24:04] Mustache.js
Es gibt kaum einen Web-Entwickler, der noch nicht mit Logic Less Templates und der Mustache-style Syntax zu tun hatte. Jan zeichnet sich für die populäre JavaScript Implementierung des nicht minder populären Konzepts verantwortlich und erklärt auch, warum Dinge wie HoganJS ganz in Ordnung sind, und dass man Jacob ‘Fat’ Thorton auch gern umarmen darf.
[00:33:48] Hoodie
Jans neuestes Baby ist Hood.ie, die Offline First, No Backend Architektur die alle Frontend-Gebete erhört. Was dahinter steckt und wie es dem Projekt so geht, erfährt ihr hier. Sehr empfehlenswert dazu auch Alex’ Talk auf der JSConf.eu
[01:07:33] Willkommen in der Neighbourhoodie!
Die Hoodies haben einen Firma gegründet und nennen sie “The Hoodie Firm”. Wie man ein Business mit Open Source Fokus aufbaut, welche Dinge für Jan einen wichtige Rolle spielen, warum Frauen in der Technik absolut wichtig sind und wie das Business Modell der Neighbourhoodie läuft, gibt es an dieser Stelle.
[01:43:51] JSConf.eu
Der Call For Speakers zur Berliner Ausgabe der JSConf ist offen, und Jan erzählt aus dem Nähkästchen vom Organisieren.

[02:22:23] Keine Schaunotizen

JSNice
Mal wieder zuviel Uglify im Code? JSNice versucht mit statistischen Methoden euren minimierten Code wieder zu verhübschen und den Bezeichnern anständige Namen zu verpassen.
SVG Animations
Wer dieses großartige Slidedeck zu SVG Animationen der ebenso großartigen Sara Soueidan noch nicht gesehen hat, sollte schleunigst diesen Link klicken.
SVG Symbol
Chris Coyier erklärt SVG Symbole und deren Einsatz.
SVG4Everybody
SVG für OldIE? Polyfill. Hier.
Mutation Observers
Hatten wir schonmal im Podcast, Addy Osmani gibt schriftlich dazu seinen Senf auch ab.
AniJS
ermöglicht Animations über deklarative Markup Anweisungen.
AMD Clean
Wer mit CommonJS/AMD Modulen arbeitet, kann überflüssigen Code bei einer kombinierten Datei hiermit entfernen.
Headroom.js
Menüzeile nur beim Hochscrollen, so wie’s der Mobile Chrome macht? Damit.
Responsive Images
sind mittlerweile Realität! Hier eine Zusammenfassung.

Revision 174: Front-End-Workflow

15. Juni 2014 | 7 Kommentare

Schepp, Anselm und Hans fanden sich für Revision 174 zusammen und referieren zum Spezial-Thema Moderner Front-End-Workflow.

[00:00:13] News

Launching status.modern.ie & Internet Explorer platform priorities
Microsoft veröffentlich status.modern.ie als Open Source Projekt und hofft auf die Hilfe beim erfassen von Feature-Support in den übrigen Browsern. Außerdem steht die nächste Version des Internet Explorers an.
Understanding web pages better
Googles Page Crawling Algorithmus versteht nun noch mehr JavaScript.
Preview the new caniuse.com features
Eine Preview des neuen caniuse.com-Designs.

Schaunotizen

[00:02:27] Moderne Art zu entwickeln (agil, modular, etc.)
Was ist eigentlich die moderne Art zu Entwickeln? Hilft agiles Development (zum Beispiel mit Scrum) uns Entwicklern oder verbreiten die vielen Meetings eher Unmut? Wir sprechen auch über komponenten-basiertes Entwickeln, gerade im Bezug auf große Webprojekte.
[00:38:25] How ‘DevOps’ is Killing the Developer
Christoph Rumpel ist der Meinung, dass wir die Rolle von DevOps näher beleuchten sollten. Was sich hinter dem Begriff DevOps verbirgt und wie wir in unseren Teams mit den Arbeiten abseits der eigentlichen Web-Programmierung umgehen, diskutieren wir.
[00:52:12] A Maintainable Style Guide
Style Guides helfen ein Projekt zwischen Designern und Entwicklern besser zu managen und die Kommunikation zu erleichtern. Ian Feather ist der Meinung, dass Style Guides nur Sinn machen, wenn Sie mit dem Code aus dem Projekt selbst erstellt werden und beschreibt die Technik, die Lonely Planet verwendet, um ihren Style Guide zu erzeugen. Wir besprechen diese und decken die Vor- und Nachteile auf.

[01:08:03] Keine Schaunotizen

XSS Game
Ein Hacker-Game mit dem man Cross-Site-Scripting lernt und so Attacken vermeiden kann.
Implement Custom Gestures
Eine Rund-Um-Erklärung zu Touch Input Gesten auf technischer und user-experience Ebene.

Revision 173: Neues aus der Zukunft

30. Mai 2014 | Keine Kommentare

Da die Themenliste nach dem Ausmisten diesmal etwas dünn ausfiel, besprachen Schepp, Anselm und Peter einfach drei neue Features in Chrome 36, der jüngst den Beta-Status erreicht hat.

Schaunotizen

[00:00:35] element.animate()
JavaScript-Animationen steigen aus den Gräbern empor – allerdings in einer mit der CSS-Animations-Engine verzahnten und daher sehr performanten Form. Wer performante JS-Animationen schon heute haben will kann entweder auf einen Polyfill oder die Library VelocityJS zurückgreifen. Jake Archibald hat die Details zu der neuen Animations-API mal im Smashing Magazine aufgeschrieben
[00:07:46] HTML Imports
Klingt wie include() aus PHP, ist aber besser! HTML Imports laden und parsen HTML-Dokumente, die für JS als Document-Objekt bereitgestellt werden. Das Ganze funktioniert auch mit CORS, hat ein async-Attribut und kann via Vulcanize optimiert werden. Peter erklärt die JS-API und Use Cases für HTML Imports, während sich Schepp wehmütig an glorreiche Tage mit XSLT zurückerinnert.
[00:17:28] Object.observe()
Während DOM Mutation Observers das DOM auf Änderungen überwachen (siehe Revision 148), achtet Object.observe() auf alle Arten von JS-Objekten (und Array.observe() auf Arrays). Wichtig ist das vor allem für die Data-Binding-Funktionalität in modernen MVC-Frameworks. Nachdem wir den fälligen Polyfill erwähnt haben, schweifen wir etwas ab und reden auch noch über HTC-Dateien im alten IE, CSS Expressions im alten IE und Polymer (für alles außer dem alten IE)

[00:34:30] Keine Schaunotizen

EmpireJS
Konferenztalks auf Youtube.
Compressor Head
Datenkompression als solche anschaulich als Video erklärt.
Fluxxor
Facebooks M und C für die Kombination mit der View-Engine React.
Performance Budget with Grunt
Ein Grunt-Task, der motzt, wenn man langsame Webseiten baut.
Script-injected “async scripts” considered harmful
Ein subtiles Detail über dynamisch eingefügte Scripts.

Revision 172: Interview mit Chris Coyier

24. Mai 2014 | 2 Kommentare

Wie jedes Jahr waren wir auch diesmal zu mehreren auf der beyond tellerrand und haben einen Speaker in einen Hinterhalt gelockt, aus dem er erst nach einem Interview mit uns wieder freigelassen wurde. Unsere Beute diesmal: Niemand geringeres als Chris Coyier von CSS Tricks, Codepen.io und Shoptalkshow, auch bekannt als “Die Rampensau”! :) Wir stellten viele Fragen über seinen Werdegang, und sein täglich Brot und Butter. Viel Spaß!