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 192: Komplizierte Job-Titel und Webfonts-Performance

26. Oktober 2014 | Keine Kommentare

In kleiner Besetzung sind in dieser Folge nur Hans und Anselm dabei, sprechen aber in knapp vierzig Minuten doch über interessante Themen, die uns Webentwickler betreffen—zunächst über ein nicht so technisches, aber trotzdem relevantes Thema, Recruiting, dann sehr technisch über Performanceoptimierung von WebFonts. Abgerundet wie immer mit den besten Links der Woche.

Schaunotizen

[00:00:17] Job Title – it’s complicated
Wir sprechen darüber, wie wir Freunden, Familie und Bekannten unsere Jobs erklären. Aber auch, welchen Stellenwert Job-Bezeichnungen haben und dass es schwer ist, selbst betitelte Freelancer einzuschätzen. Wir diskutieren Tests, Prüfungen und Auszeichnungen und welche Möglichkeiten wir sehen, um Leute im Front-End Bereich einzukategorisieren.Schreibt uns gerne im Kommentarbereich eure Meinung, Einschätzung und was ihr von unseren Vorschlägen haltet. Uns interessiert vor allem auch, wie viel Wert ihr auf Rollen und Titel legt oder ob euer Chef Wert darauf legt und warum.
[00:17:27] Loading webfonts with high performance on responsive websites
Wir besprechen, wie man Webfonts generell auf Webprojekten einbauen sollte, was es für Performanceprobleme generell gibt und wie man diese mit bestimmten Techniken wir asynchronem Laden der Webfonts und speichern im localStorage beheben kann. Außerdem blicken wir ein wenig in die Zukunft, was mit WOFF2.0 möglich sein wird und wie wir selbst mit Webfonts umgehen.

[00:33:30] Links

A Guide to SVG Animations (SMIL)
Sara Soueidan schrieb erneut ein langes, ausführliches und sehr gutes Tutorial über SVG. Diesmal im Fokus: SVG Animations (SMIL).
Quick Research on Pointer Events Performance Issues und ein Kommentar von Alex Sexton
zum gleichen Streit-ThemaNachdem Blink Entwickler Pointer Events entfernt haben und Touch Events bevorzugen, hat Jacob Rossi sich mit den Problemen beschäftigt und hat Interessantes herausgefunden. Alex Sexton stützt die Argumente und stellt die Frage, warum man einen schlechteren Nicht-Standard einem besseren Standard bevorzugen sollte.
LazySizes
Alexander Farkas, der noch vor kurzem einen eigenen Responsive Images Polyfill vorgestellt hat, hat nun auch passend dazu ein lazyload Script geschrieben, welches mit dem sizes-Attribut umgehen kann und ein lazyloading von Responsive Images erlaubt.
Polarr
Polarr ist ein supercooles neues online Tool zum Bearbeiten von Bildern im Browser. In unseren Tests lieferte es nicht nur beeindruckende Ergebnisse, sondern auch eine gute Performance und Vielfalt an Werkzeugen. Unser Fazit: Kann durchaus mit Lightroom oder ähnlichen Tools mithalten, wenn man nur mal schnell Korrekturen am Foto vornehmen möchte.
HireMyFriend
Hier kann man sich anmelden und Empfehlungen für Freunde aussprechen. Ein sehr interessantes Konzept, was wir für gut befinden.
Move fast & break nothing
Zach Holman schreibt über Development und Deployment Strategien und dass man nich alles kaputt gehen lassen kann bei Releases.
Ind.ie Pulse
Mit Pulse gibt es nun den ersten dezentralisierten File Syncronisations Dienst als App

Revision 191: Code Style Checker und Coding Conventions

26. Oktober 2014 | 1 Kommentar

Anselm, Hans, Stefan und Schepp reden heute über Konventionen und das Miteinander in größeren Projekten.

[00:00:18] News

Brick 2.0
Mozilla bringt ihre Web Components Bibliothek auf Version 2.0, und verabschiedet sich damit von x-tag. Ab jetzt soll die Web Components Plattform direkt verwendet werden.
libsass 3.0
Die native (und viel schnellere) Implementierung von Sass erscheint in Version 3.0. Und hat damit endlich eine Menge Features inkludiert, die von Fans der Ruby-Variante hoch geschätzt werden.
IE Windows 10 Technical Preview
Windows 10 kommt, und mit ein neuer Internet Explorer. Was der Browser auf der neuen Plattform bietet, erfahrt ihr hier.

Schaunotizen

[00:03:45] Code Style Checker und Coding Conventions
Obigen Artikel als Ausgangsbasis nutzen wir zu einer ausgiebigen Diskussion rund um Coding Conventions und Code Style Checker. Gut finden wir das alle, genutzt wird neben JSHint unter anderem auch PHP Codesniffer, jscs und SCSS Lint. Wir reden über den JS Formatter als Sublime Plugin von Paul Irish, und lernen die Pre-commit Hooks von Git kennen (und schätzen).

[00:36:12] Keine Schaunotizen

HTTP/2 FAQ
Was Sie schon immer über HTTP/2 wissen wollten, aber bisher nicht zu fragen wagten.
Respimage
Wenn ein Pull Request nicht mehr reicht braucht man eine eigene Bibliothek. Respimage ist der performantere Picturefill.
CSSUrl
Node Tool um URLs im CSS einzubetten. Falls eure bisherigen Tools nicht schon ausreichen.

Revision 190: border:none

4. Oktober 2014 | Keine Kommentare

Schepp und Stefan haben sich diesmal Joschi Kuphal eingeladen, der uns von den Tücken und Späßen des Konferenzorganisation erzählt.

Schaunotizen

[00:01:40] border:none
Joschi erzählt uns von der border:none, der etwas anderen Konferenz. Nicht nur inhaltlich, sondern auch vom Ablauf soll sich das Nürnberger Edelstück vom Rest der Web-Zusammenkünfte unterscheiden. Wir lauschen den organisatorischen Tücken, den großen Plänen und erfahren, warum die border:none so besonders ist. Außerdem gibt es einen Hinweis auf die Nürnberger Web Week und die nächste Ausgabe des Accessibility Clubs. Das ganze findet übrigens in der Woche vom 17. Oktober statt. Lohnt sich!

[01:05:48] Keine Schaunotizen

pup
Ein Stream Editor für Websites mit CSS Selektoren für die Commandline? Also wenn ihr das braucht, hier werdet ihr fündig.
Using Serviceworker today
Jake Archibald erzählt uns, was man mit den in Canary angekommenen Serviceworkern anstellen kann.
Scroll event change in iOS8
Nerviges und unnötiges Parallax vom Designer vorgeworfen bekommen? Kunde guckt nur am iPad nach? Fürchtet euch nicht mehr! iOS8 schafft mit Scroll Events, die dem Desktop ähnlich sind Abhilfe gegen ultimativen Kunden- und Designerfrust, der euch als Entwickler trifft!

Revision 189: iOS 8 und ES6

4. Oktober 2014 | Keine Kommentare

Rod, Hans und Peter sezierten die Features des neuen Safari in iOS 8 und plauderten über ES6, bis uns plötzlich die Zeit ausging.

Schaunotizen

[00:00:12] Safari in iOS 8
Anhand eines Sencha-Blogposts hangeln wir uns durch die Featureliste der neuesten Safari-Version und reden über CSS Blend Modes (Specs Erklär-Artikel, Caniuse), die möglicherweise zum Untergang verdammten CSS Shapes (Specs, Caniuse), WebGL (Specs, Caniuse), HTML Templates (Specs, Caniuse), ES6-Promises Specs, Caniuse) die Navigation Timing API (Specs, Caniuse), SPDY (Specs, Caniuse), das srcset-Attribut (Specs, Caniuse), Indexed DB Specs, Caniuse), die Highres Timing API (Specs, Caniuse), APNG (Specs, Caniuse), SVG Fragment Identifiers Specs, Caniuse), object-fit und object-position (Specs, Caniuse), text-decoration-style (Specs, Caniuse) und diverse weitere Webtechnologien. Abseits davon kommen wir auch auf das jetzt Apps zu Verfügung stehende wkwebkit (mit Nitro) zu spechen, machen uns über Bugs lustig und geben am Ende unseren allgemeinen Gesamteindruck wieder.
[00:50:08] ES6-Workflow
Zu Forschungszwecken hat sich Peter ein ECMAScript 6-Projekt aufgebürdet und berichtet von seinen Erfahrungen. Um ES6 in Browsern von heute zu nutzen braucht man einen Transpiler, der ES6-Code in ES5-Code transformiert. Zur Auswahl stehen Traceur, das Sweet.js-Modul es6-macros und ES6 Transpiler, was trotz Mängeln Peters Favorit ist, kombiniert mit Regenerator. Kurz kommt auch zu Sprache, wie kompliziert es sein kann, die neuen Features in die tägliche Programmierpraxis einfließen zu lassen.

[01:25:29] Keine Schaunotizen

CSS only custom selects
Das ultimative CSS-Styling für Selects.
HTML Elements
Übersichtsseite mit den wichtigsten Facetten aller HTML-Elemente.
All You Need To Know About Vertical-Align
Ein kniffliges Thema umfassend aufbereitet.

Revision 188: AMCSS und Links

22. September 2014 | 1 Kommentar

Hans, Stefan und Peter präsentieren auch heute ein strittiges CSS-Thema, garniert mit ein paar Links.

Schaunotizen

[00:00:21] AMCSS – Attribute Modules for CSS
HTML-Attribute als Attributselektor-Hooks ausdenken, Genie oder Häresie? Wir werden uns nicht ganz einig. Zum einen ist bekannt, dass Browser nicht bekannte Attribute ignorieren (sonst würden data-Attribute gar nicht funktionieren), zum anderen sieht der Standard andere selbst erfundene Attribute nicht vor. Beim Versuch, diese Technologie zu bewerten streifen wir AngularJS mit seinen eigenen ng-*-Attributen und die Custom Element Spec mit der Möglichkeit, sich sogar eigene HTML-Tags auszudenken.

[00:24:17] Keine Schaunotizen

AniJS, Declarative handling library for UI interactions
Passend zum Thema „selbsterfundene Attribute“ verwendet AniJS eben solche Attribute um Animationen zu beschreiben.
Naming CSS Stuff Is Really Hard
Überblicksartikel zu Problemen und Herangehensweisen der Namensfindung in CSS.
Grid by Example
Showcase für Grid-Layout (CSS3).
SVG for JPG Alpha
Ein schöner Hack: JPG + SVG = PNG.

Revision 187: Arbeiten bei GitHub

16. September 2014 | 5 Kommentare

Zur aktuellen Revision haben sich Stefan und der Schepp Mike Adolphs eingeladen, der seines Zeichens im Enterprise Support bei GitHub sitz.

Schaunotizen

[00:00:16] Arbeiten bei GitHub
Mike erzählt uns, was es bedeutet für eine große, amerikanische Firma tätig zu sein, die hauptsächlich aus Leuten besteht, die remote arbeiten und über den ganzen Globus verteilt sind. Wie sind die Rekrutierungsprozesse, die Arbeitsbedingungen, was muss man als Deutscher beachten, wenn man den Schritt in diese Richtung wagt? Wir bekommen einen exklusiven und ausführlichen Einblick in die Arbeitsweisen des wohl wichtigsten Social Networks für Entwickler und lernen das Thema “Support” ganz neu kennen. Eine ausführliche Zusammenfassung des 2 Stunden Gesprächs von Schriftführer Schepp könnt ihr auf gist.github.com einsehen.

[02:14:31] Keine Schaunotizen

Jeffrey Zeldman Documentary
40-minütige Dokumentation über den Blue Beanie Webdesigner.
Batsh
Unix Bash oder Windows Batch? Batsh macht beides, mit JavaScript-ähnlicher Syntax.
Windows Boxes for Vagrant
Modern.ie Virtualisierung über Vagrant? Geht! Endlich!
Angular JS Tips&Tricks
Schepp ist gerade voll in Angular JS drin und findet diese Hinweise sehr hilfreich. Nicht Teil zwei vergessen.
CSS Shapes Editor
CSS Shapes können echt schwierig sein, mit einem tollen Editor allerdings klappt das ziemlich prima und easy. Danke Adobe!
Cross Storage
Zendesk gibt uns eine schöne API, mit der wir alle localStorage Tricks einfach anwenden können, die uns Kommunikation über unterschiedliche Domains erlauben.

Revision 186: RESTful API Design

15. September 2014 | 3 Kommentare

Hans, Schepp und Stefan erzählen diesmal von ihren Erfahrungen in der Zusammenarbeit zwischen Backend und Frontend Entwicklern bei Schnittstellendefinitionen.

[00:00:16] News

YUI
Yahoo stellt die Entwicklung des in die Jahre gekommenen YUI Frameworks ein. Bei der künftigen Technologiewahl durchaus zu berücksichtigen.

Schaunotizen

[00:01:06] Schnittstellendesign
Schepp und Stefan resümieren über ein paar Tools für Entwickler, die sich für das reibungslose Schnittstellendesign eignen, und werfen mit Apiary die neue Offenbarung für kollaborative API Definitionen in den Raum, das wir an dieser Stelle noch einmal jedem ans Herz legen wollen. Zusätzlich spricht man über das “perfekte Lehrbuchprojekt”: Saubere Definitionen, Mock-Objekte, Unit Tests und Co. So wie es halt sein soll. Weiters auf der Empfehlungs-Liste: Fat Free PHP Framework und Postman. REST in peace!

[00:32:55] Keine Schaunotizen

Regex Editoren
Debuggex und Regex 101 sind zwei Regex Testing Tools, die gut visualisieren wie euer regulärer Ausdruck funktioniert.
perf.fail
Von den Performance Gurus zur Schau gestellte Fehltritte, die durchaus zu vermeiden gewesen wären. Gutes Lehrmaterial.
P5.js
Schöne Visualisierungen mit angenehmer API? P5.js macht das.

Revision 185: JS Debuggingstrategien & Network Information API

7. September 2014 | 12 Kommentare

Die aktuelle Folge in (fast) vollständiger Besetzung mit einer Diskussion zum Thema JavaScript Debugging und zur neuen Netzwerk Analyse API.

[00:00:30] News

Sass 3.4 is Released
Sass 3.4 ist draußen mit einigen Kleinigkeiten. Beim Upgrade ist auf die Kompatibilität zu alten Versionen zu achten.

Schaunotizen

[00:00:50] JavaScript Fehlerbehebungstrategien
Peter startete eine Umfrage per Twitter, wie Developer JavaScript Fehler analysieren. Wir diskutieren die beiden Ansätze.
Hans benutzt in erster Linie console.log, weil ihm das Debugging zu umständlich ist, und vielleicht auch weil er keine Übung hat. Wenn er ganz viel Details braucht, dann greift er zum Debugger. Im Verhältnis: eine Verteilung von 80% console.log vs. 20% Debugger.
Meist wird zum Debugger gegriffen, wenn man herausfinden will, wo eine Veränderung ursprünglich herkommt. Wenn man nur Werte analysieren will, nimmt man üblicherweise die Konsole.
Ein Tipp kommt von Peter. Er nutzt console.log als bool’schen Wert für einen bedingten Breakpoint im Debugger, um sich Werte ausgeben zu lassen, ohne wirklich console.log in den JavaScript-Code zu schreiben. Außerdem hat er den Eindruck, dass der Debugger nicht angenehm zu bedienen ist, und er ist manchmal zu punktuell und zu detailliert. Manchmal will man eher weniger tief und in der Breite Code analysieren.
Stefan nutzt gerne die Debugger-eigene Konsole.
[00:17:17] HTML5: Network Information API – Tuts+ Code Tutorial
Stefan meint, über die API kann eine Webseite entscheiden, wie “fett” sie daherkommen will. Peter weißt aber darauf hin, dass die gelieferten Infos, respektive die Folgerungen daraus ganz schön daneben liegen können. Peter fragt sich also, warum entwickeln Google und Co. so eine unbrauchbare API? Schepp meint der Usecase könnte in ChromeOS liegen (vgl. W3C Use Cases). Anselm meint, man kann vielleicht auf bestimmte, “sichere” Abfragen, also z.B. die Abfrage nach “Cellular”, gehen kann. Peter sieht die einzige brauchbare Umsetzung von soetwas in der Art wie Youtube es tut. Anselm liest folgende von der Spec genannten Use Cases vor: Die BBC-Seite warnt bei “Cellular” den Benutzer vor dem Start vor hohen Kosten. Ein weiterer Use Case: der Firefox Marketplace bietet nur dann eine SMS-basierte Authentifizierung an, wenn beim Endgerät “Cellular” entdeckt wird. Anselm sieht den Vorteil gegenüber dem Youtube-Verfahren darin, dass die API viel leichter einzubinden und abzufragen ist. Peter meint weiterhin, die API sei nicht zu gebrauchen.

[00:40:57] Keine Schaunotizen

grunt-split-images
CSS in verschiedene Dateien verteilen, die zum einen Layout, zum anderen Stylingbilder betreffen. Letztere lässt sich dann praktisch per Lazy Loading nachladen.
Building markdown-based developer docs
Markdown-basierte Dokumentation im Code, die sich automatisiert auslesen lässt.
Let’s build a browser engine!
Ein Tutorial, das beschreibt, wie man eine eigene Browser Engine bauen kann.
How to secure your site in an afternoon
SSL für die eigene Website in nur wenigen Schritten.

Revision 184: Web Components Type Extension und Rework.css

19. August 2014 | Keine Kommentare

Zwei Stühle, drei Meinungen: Beschaulich kleine Runde mit angenehmen Fortbildungsfaktor.

Schaunotizen

[00:00:17] Rework.css
Stefan hat sich näher mit dem Rework.css Framework beschäftigt, einer Node.js Bibliothek die CSS Manipulationen erlaubt, und unter anderem den Grundstein für Projekte wie das auf die Nase gefallene Myth oder Styl legt. Auch Nicolas Ghallagers SUIT Framework bekommt dadurch eine Zwischensprache. Wir erklären, dass man durch die plugingestützte Architektur sich schnell ein ganz passables Tool stricken kann um sich — nicht unähnlich zum Autoprefixer — bei etlichen Standardaufgaben die Drecksarbeit erledigen zu lassen. Zaubern wird man aber dennoch nicht können.
[00:23:44] Why Web Components are ready for production
Web Components sind ja im Moment der letzte Schrei, doch wenn man sich die Kompatibilitätstabelle ansieht, schaut es abseits der Blink-Umgebungen — von generellem Commitment abgesehen — eher düster aus. TJ Van Toll meint allerdings, dass man gewisse Bereiche aus dem Gebiet der Web Components auch schon heute verwenden kann. Peter nimmt diesen Artikel zum Anlass um über seine jüngsten Recherchen zum Thema Type Extensions zu referieren, die mittlereile auch von Github im Live Environment eingesetzt werden.

[00:50:15] Keine Schaunotizen

Tablesaw
Das dreckige Dutzend an Responsive Tables Techniken, vereint in einer knackigen JavaScript Library von der Filament Group.

Revision 183: Web Manifest Spec und Links

17. August 2014 | 5 Kommentare

Schepp und Peter zogen mit Heldenmut in die Schlacht gegen das Sommerloch. Aber ob das alleine reicht?

Schaunotizen

[00:00:16] The Web Manifest specification
Der HTML5 Doctor verbreitet die Kunde kündet von der Web Manifest specification, einem Entwurf für ein Webapp-Metadaten-Format. Peter findet es gut, Schepp ist eher gedämpft begeistert. Wir reden über installierbare Webapps, Service Workers, App Cache, humans.txt und Open Web Platform Daily Digest.

[00:28:38] Keine Schaunotizen

Markov Chains
Markow-Ketten bunt und animiert erklärt.
Understanding SVG Coordinate Systems & Transformations
Epische dreiteilige SVG-Artikelserie aus der Feder Sara Soueidans.