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 200: The Indie Web

14. Dezember 2014 | Keine Kommentare

Zum 200. Jubiläum luden Schepp, Anselm und Stefan niemand geringeren als Jeremy Keith ein. Viel Spaß bei unserer ausgiebigen Plauderei zum “Indie Web”. Die Episode und alle Shownotes sind dieses Mal auf Englisch!

For our 200th anniversay Schepp, Anselm and Stefan invited Jeremy Keith. Enjoy our excessive talk about the Indie Web!

Schaunotizen

[00:00:39] The Indie Web Building Blocks
Jeremy explains what’s the meaning behind the whole indie web term and why it exists. He continues to explain the technical basics: Decentralizing sources, authenticate on websites using your very own website and a social network of choice, sharing links to your blog posts to the social networks and getting mentions from twitter etc on your website and store them there. You can do this with just one requirement: if you have your own domain. It even can work on static sites and there are open source services like Bridgy that help you with concatenating the external sources.
[00:22:57] IndieWebCamps
We talk about the people who are part of the indiewebcamp thing and how it’s been created. It was created to create solutions and not only discuss stuff. We also speak about how to teach people about indie technology, how to learn to integrate it and where you can do so. Finally we talk about content ownership and the problem with external services who own your content and do what they want with it (like deleting it even if you don’t want to, thanks archive.org for storing things anyways). And Jeremy shares his first website version. If you are considering going to the upcoming beyond tellerand in Düsseldorf (which you should), be aware that there’s an accompanying IndieWebCamp happening.
[00:48:23] Useless Design Patterns
We’re talking about false assumptions of security which often have heavy impact on usability. Like on login screens when there’s only a generic error message not saying if username or password is wrong. We speak about if passwords should be shown by default to avoid the ‘confirm password’ fields and typing errors and most of the time people are in private and if not, they should be able to switch to hidden type mode. We also talk about captchas which are non-sense. In fact we should always ask ourselves why are we doing this or wait a minute, is this really a good idea? And test with real users to figure out what works and what doesn’t. Because assumptions by us is often simply wrong..

[01:13:15] Keine Schaunotizen

Responsible Web Components
In another brilliant article by Jeremy we learn how web components can be used as a means of extending existing elements rather than replacing them. See web components as an enhancement!
Multiplexing with SPDY and HTTP/2
Guy Bedford talks about multiplexing with SPDY and HTTP/2 in his talk.
FiyMyJS for Sublime
Can’t remember your team’s coding guidelines? Use them automaticlaly with Addy Osmani’s Sublime plugin.
HTTPs and web performance
Dean Hume explains how HTTPS influences the performance of your website.
Iterators gonna iterate
Iterators are a new JS language feature which appear in the recent Chrome releases. Jake Archibald describes how they work.
24 Ways
In its tenth year 24 ways is till one of the online christmas calendars which you have to visit.

Revision 199: Simplifizierung und Code-Refactoring Methodik

13. Dezember 2014 | 2 Kommentare

Schepp, Peter, Hans und Anselm haben in dieser Revision zwar keinerlei News oder Links zu vermelden, geben aber dafür ihr bestes, um ein bisschen in die Zukunft zu sehen und Methoden zur Refakturierung von Code zu analysieren.

Schaunotizen

[00:00:23] Simplifizierung
Nach Jahren des Aufrüstens sehen wir einen Trend zur Simplifizierung des Front-End Workflows. Hans klärt in seinem anfänglichen Plädoyer auf, was der aktuelle Status ist, was die Probleme und Unterschiede zwischen klassischen Präprozessoren und Postprozessoren sind und fragt sich, ob ein Tool wie Pleeease vielleicht sogar Sass ablösen könnte? Wir diskutieren und orakeln gemeinsam, wie die Zukunft aussehen kann und kommen zum Schluss, dass das Programmier-Business manchmal durchaus mit der Mode-Industrie zu vergleichen ist.
[00:30:20] Code Refactoring Methoden
Anselm fragt den Rest, wie sie an Refactoring von Code herangehen. Peter ist der festen Überzeugung, dass es hier nur eine einzige Möglichkeit gibt: Die alten Tests nehmen und darauf den Code neu schreiben. Gibt es keine Tests, müssen andere Prinzipien herhalten, wie sie Hans und Schepp pflegen. So muss man oft auf Grund verschiedener Gegebenheiten leider auf bestehende Tests verzichten und sich selbst eine Lösung ausdenken. Schepp nutzt dabei auch oft Tools wie seine IDE PHP Storm, JSHint und Code-Style-Checker für halbautomatisiertes Anpassen an Codestandards. Immer hilft jedenfalls der direkte Vergleich des alten Stands zum neuen. Auch visuelle Regression Tests mit Hilfe von Screenshots und Diff-Tools können vor allem CSS und HTML Refactorings unterstützen. Und zu guter letzt wünschen wir uns noch einen HTML Regression-Checker als Tool für Markup-Refactorings.

Revision 198: Workflow, Fokus, Shapes

7. Dezember 2014 | Keine Kommentare

Mit fast voller Mannschaft, ergänzt durch Sven Wolfermann (maddesigns.de, @maddesigns) ackerten wir uns durch drei Themen. News und Links gab es diesmal nicht.

Schaunotizen

[00:00:20] Git, Grunt/Gulp, Compass, SASS/LESS Workflow im Team
Ein Hörer hat sich gewünscht, dass wir über „Git, Grunt/Gulp, Compass, SASS/LESS und den Workflow im Team“ sprechen, was wir uns nicht zweimal sagen lassen. Rodney schlägt auf und berichtet vom seinem Arbeitssetup, bestehend aus Git, Grunt, Sass, Stash und Jenkins. Für den Workflow kommt Gitflow zu Einsatz. Rodney legt Wert auf die Feststellung, dass er Git wie von Gott gewollt mit rohen Konsolen-Befehlen bändigt, während die verweichlichten Kollegen auf Gitflow-Aliases oder gar GUIs wie Source Tree oder gar Tower zurückgreifen. Hans berichtet ebenfalls von seinen Erfahrungen mit dem Gitflow-Workflow. Man ist sich einig: die Arbeit mit Pull Requests fürt zu höherer Codequalität, weniger Bugs und besserem Wissensaustausch im Team. Die unvermeidliche Diskussion Grunt vs. Gulp halten wir mit etwas Mühe im Rahmen (denn so wichtig ist das Build-Tool gar nicht) und sprechen am Ende noch noch über Best Practices beim Code-Review und dem Umgang mit QA.
[00:33:18] Rodneys Zwischenbericht aus dem Focusing-Schützengraben
Seit Monaten verbrennt Rodney Zeit damit, in Browsern zu ermitteln, welche Elemente fokussierbar und antabbar (nicht das gleiche!) sind und welche es sein sollten. Zusammenfassung: Alles ist kaputt, nichts funktioniert. Nur wenn man auf einer statischen Webseite einfach Links/Inputs durchtabben möchte, klappt alles einigermaßen, doch alles, was auch nur etwas komplizierter ist, endet im Chaos. Browser scrollen ungefragt (und uneinheitlich), das Verhalten bei Image Maps und SVG-Elementen ist uneinheitlich und generell machen keine zwei Browser irgendwo das gleiche. Und noch schlimmer: die Spezifikationen sind zu schlecht, als dass man den Browsern daraus einen Strick drehen könnte …
[01:10:11] CSS Shapes
Sven hat über CSS Shapes geschrieben und gibt uns einen kurzen Überblick. Das neue CSS-Feature erlaubt es, Textfluss an einer nicht-quadratischen Form auszurichten. Es funktioniert zur Zeit in Chrome, Opera und Safari, für eine Firefox-Implementierung kann man seine Stimme erheben. Es gibt auch einen Polyfill, von dem Sven jedoch nicht restlos überzeugt ist – Progressive Enhancement ist der bessere Weg.

Revision 197: Responsive Images, IE 12 und Links

23. November 2014 | Keine Kommentare

Der ewig optimistische Sonnenschein Schepp und Miese-Peter nahmen für diese Revision verschiedene neue Produkte unter die Lupe, die Webentwicklern in Zukunft Arbeit abnehmen (für Responsive Images) oder (in Form einer neuen IE-Version) aufbürden könnten. Außerdem gibt es reichlich Links.

Schaunotizen

[00:00:21] Responsive Images Specification and Real-World Scenarios
Von den Machern von WURFL (einer Datenbank rund um User Agent Strings inkl. Browsermetriken): WIT, ein Service für Responsive Images. Weil die normalen Responsive Images nicht ganz einfach zu nutzen sind, erzeugt WIT ganz einfach aus einer Basis-Bilddatei mehrere Varianten für Responsive Images. Nach der Vorstellung des Dienstes debattieren Peter und Schepp, ob WIT ein Zwischenschritt ist oder eine fertige Lösung für auch die ferne Zukunft sein kann. Auch das Konkurrenzprodukt Akamai Image Converter lassen wir nicht unerwähnt.
[00:28:33] Neues aus dem Hause Microsoft
Aus einem langen Blogpost erfahren wir neues über einen möglichen IE 12. Nach ein wenig Geunke über Windows- und IE-Versionen arbeiten wir uns durch die neuen Features. So wird Preserve-3D für Transforms unterstützt, Content Security Policy 1.0 ist ebenso an Bord (in Revision 124 ausführlich besprochen) wie erste Spuren von Media Queries Level 4. Peter erzählt, wie die Gamepad API früher war und wozu man WAV-Support für <audio> würde haben wollen – beides steckt auch im neuen IE. Zuletzt werden auch Selection API sowie zahlreiche ES6-Features-Features unterstützt. Wem das noch nicht reicht: Wünsche bitte in der IE Platform Suggestion Box einwerfen. Auch nicht unerwähnt soll Remote IE bleiben, eine Art Browserstack für IE.

[00:57:37] Keine Schaunotizen

All About Angular 2.0
Ein langer Artikel beantwortet alle Fragen zu AngularJS 2.0.
Dealing With Compiled Files in Git
Einckecken oder nicht einchecken, das ist hier die Frage.
Pleeease
Ein CSS-Post-Processor mit Inlining-Superkräften!
ChromeDevTools auf Twitter
Bitte verfolgen Sie unauffällig.
Luke Wroblewski: Mobile Navigation, Conversion, Input, & More
„.. two and a half hour seminar on optimizing mobile experiences for conversion using design.“.

Revision 196: Interview mit Tim Kadlec

17. November 2014 | Keine Kommentare

Unser Freund Marc bietet uns auf seiner Beyond Tellerrand Konferenz immer einen Spot zur Aufnahme <3. Auch auf der ersten Berliner Konferenz haben wir gemeinsam mit Performance-Optimierer Tim Kadlec eine Folge eingetütet. Anselm, Schepp und Hans löchern ihn mit unangenehmen Fragen zu den Themen Cartoons, Mittlerer Westen und Reisen.

Caution for all the Haters: Diese Revision ist auf ENGLISCH.

Schaunotizen

[00:00:30] Interview mit Tim Kadlec
Wie jeder Gast stellt auch Tim sich vor und erklärt, wie es dazu kam, dass er heutzutage ein Performance-Papst ist. Tims Vortrag zum Thema Perceived Performance ist unser Einstieg in die Schnittmenge zwischen datengetriebener, entwicklungsorientierter Performance-Analyse und dem Verhalten, dass der Endbenutzer empfindet. Tim schildert seine Erfahrungen als Entwickler und wie wir Ladegeschwindigkeiten und das Erlebnis des Benutzers von Webseiten und Applikationen verbessern können. Für Entwickler ist es schwierig “Performance” als solches an Stakeholder und Manager zu verkaufen, meint Hans. Wo liegen die Business-Values, wie lassen sich diese belegen? Tims Perspektive ist es, dass Zahlen manchmal nicht entscheidend sind, sondern gerade auch das Verhalten der Applikation eine große Rolle spielt, um den Benutzer bei Laune zu halten. Ein Thema, welches wir schon öfter besprochen haben, ist das Performance Budget. Tim ist einer der großen Fürsprecher solch eines Wertes. Wir fragen, was ist eigentlich sinnvoll und wie kommen wir zu unseren Werten. Abschließend gehen wir auf die aktuellen Entwicklungen in der Performance-Optimierung ein und diskutieren die zukunftsweisenden Technologien Service Workers, HTTP2, Offline und mehr.

Revision 195: Web Crypto API und Firefox Developer Edition

11. November 2014 | Keine Kommentare

Wer etwas auf sich hielt, war diese Woche auf der Beyond Tellerrand. Übrig blieben nur Peter und Stefan, die sich Tim Taubert von Mozilla in die Sendung holten um kräftig über die Web Crypto API abzunerden.

[00:00:17] News

Update aus der Google Webmaster-Zentrale
Google verlangt jetzt explizit Zugriff auf JS, CSS und Bilder.
HTML5 ist Webstandard
Das W3C hat HTML 5.0 zur Recommendation erhoben. Peter ordnet diesen Schritt in seinem Blog etwas ein.

Schaunotizen

[00:01:02] Web Crypto API
Unser Gast Tim Taubert (@ttaubert, timtaubert.de) werkelt als Firefox-Entwickler im berliner Mozilla-Büro und hat sich in letzter Zeit intensiv mit der Web Crypto API befasst, die wir lang und breit durchsprechen. Nach Kenntnisnahme allgemeiner Kritikpunkte und Use Cases geht es in die technischen Details: kryptographisch sichere Zufallszahlengeneratoren (und der Vergleich mit Math.random()), unterstützte Hash-Algorithmen (und die Diskussion über die Unterstützung veralteter Algorithmen), Hash-based message authentication codes, PBKDF2 (und warum Langsamkeit ein Feature sein kann) und AES sind nur einige Aspekte rund um die neue API. Allgemeiner gibt Tim auch Tipps zur Crypto-Bullshit-Erkennung für Webentwickler und fordert eine Art jQuery für Crypto (auch wenn das Epic Fails der Marke Heartbleed (XKCD) nach sich ziehen könnte). Die größte Baustelle rund um die Crypto-API ist neben der überschaubaren Browserunterstützung vor allem das Fehlen einer nennenswerten Crypto-JS-Community und damit auch das Fehlen von bewärten Libraries.
[01:06:19] Firefox Developer Edition
Mozilla rebrandet den Aurora-Branch als Firefox Developer Edition. Tim erklärt kurz die Hintergründe zu diesem Schritt.

[01:15:12] Keine Schaunotizen

Reducing JavaScript Bloat with Shoestring
Shoestring ist ein leichtgewichtiger jQuery-Ersatz aus der Feder der Filament Group (d.h. ausnamsweise von Leuten, die sowas auch wirklich können). Tim Kadlec stellt die Library in einem kleinen Blogpost vor.

Revision 194: Kompression und Links

9. November 2014 | Keine Kommentare

Es war mal wieder an der Zeit, ein althergebrachtes Thema aus aktuellem Anlass aufzuwärmen. Und so begab es sich, dass seine Heiligkeit Performance-Papst Schepp I. den Novizen Hans und Peter die Kompressions-Leviten las.

Schaunotizen

[00:00:14] Compressing the Web
Ein Artikel aus dem IEInternals-Blog ist uns Anlass genug, um ausgiebig über Datenkompression zu sprechen – was komprimiert man wie, was besser nicht, und wie geht man vor? Hans und Peter outen sich als Snippets-in-Htaccess-Paster (mit z.B. HTML5 Boilerplate als Quelle). Ausgiebig vergleichen wir Deflate, Gzip, bzip2 und Zopfli und philosophieren über die Kosten-Nutzen-Relation der verschiedenen Techniken. Mit dem Angriff von Tools wie grunt-contrib-compress sollte der Arbeitsaufwand wieder in Ordnung kommen. Zum Schluss streifen wir noch die Zukunft von neuen Bildformaten, von HTTP und des Mobilfunknetzes.

[00:32:47] Keine Schaunotizen

fnordware/AdobeWebM
WebM plug-ins für alle möglichen Adobe-Programme.
In the DOM, no one will hear you scream
Security-Guru Mario Heiderich watet durch die besonders ekelhaften Teile des DOM.

Revision 193: Rückschau border:none

8. November 2014 | 2 Kommentare

Mit Themen und Personal war es diemal nicht so dicke, weswegen kurzerhand Peter eine Gast zum Thema border:none 2014 ausquetschte.

Schaunotizen

[00:01:15] border:none 2014

Eric (Mediengestalter-Auzi, Twitter, Webseite) war auf der Konferenz border:none zu Gast und erzählt ein wenig wie es war. Das Thema der Konferenz ist die Dezentralisierung des Webs (siehe Revision 190) und wird in Talks und Creator Units (Workshops) bearbeitet. Eric hat sich in der Creator Unit mit Jeremy Keith mit ganz konkreten Techniken zur Dezentalisierung (IndieAuth, Webmeintion via Webmeintion.io) auseinandergesetzt. Fazit: Dezentalisieren ist kein Hexenwerk!

[00:26:04] Keine Schaunotizen

pelias/pelias
Open-Source Geocoder mit offenen Daten.

Revision 192: Komplizierte Job-Titel und Webfonts-Performance

26. Oktober 2014 | 1 Kommentar

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.