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 266: TypeScript

29. Juni 2016 | Keine Kommentare

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 | 2 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!

Revision 262: News, Glücksrad, Links

16. Mai 2016 | 2 Kommentare

In Ermangelnung großer Themen ließen Stefan, Schepp, Peter und Anselm mal wieder das Glücksrad rotieren.

[00:00:15] News

Geolocation API removed from unsecured origins in Chrome 50
Ab jetzt gibt es Ortung nur noch mit HTTPS.

[00:00:46] Glücksrad

window.open()
Popups, blast from the past! Wir erinnern uns an die seltsamen Parameter dieser Funktion (die interessanterweise in einer CSS-Spezifikation festgehalten sind) sowie an rel=noopener.
CSS Marquee Module Level 3
Stellt sich raus: das gibt‘s gar nicht.
CSS Scroll Snap Points
Kurze Diskussion über Sinn und Zweck der Scroll Snap Points, die zwei verschiedenen Spezifikationsversionen und Vorreiterrolle des IE.
Microdata
Erfolgloser Versuch, zwischen Microformats, RDFa und HTML5-Microdata den Überblick zu behalten. Anschließende Grundsatzdebatte über Semantik (und JSON-LD), SEO (und schema.org) und Standards.
CSS Round Display
Wurde bereits in Revision 236 für mehr so mittelgut befunden.
a href=“https://www.w3.org/TR/css3-hyperlinks/“>CSS3 Hyperlink Presentation Module
Ein weiterer ad acta gelegter Spezifikationsentwurf.
Cascading Style Sheets, level 1
Wir bewundern das revolutionäre Frühwerk der Standards-Entwicklung.

[00:53:33] Keine Schaunotizen

Caching best practices & max-age gotchas
Jake Archibald in gewohnt lehrreich-humorvollem Stil.

Revision 261: SVG Icons, Element/Container Queries

16. Mai 2016 | 1 Kommentar

Anselm, Schepp und Stefan nehmen sich zwei herumsurrende Artikel als Anstoß für ein ausgedehntes Plaudern aus dem Nähkästchen.

Schaunotizen

[00:00:27] Converting Font Icons to SVG
Sara Soueidan erklärt den Icon Fonts den Tod mit diesem ausführlichen Migrations-Guide. Wir sprechen über unsere Erfahrungen und den Problemchen, loben aber auch gleichzeitig neue Workflows und ein viel „sauberes“ Entwicklungserlebnis.
[00:25:20] Container Queries: Once more unto the breach
Media Queries sind fein, man stößt allerdings schnell an seine Grenzen wenn man nicht das gesamte Bild betrachten möchte, sondern im Detail pro Komponente das Look and Feel bestimmen möchte. Container Queries sind der Titel einer neuen Spezifikation, die sich genau um solche Dinge kümmern wollen. Wir erklären warum die ehemals genannten „Element Queries“ nun anders heißen, welches grundlegende Problem mit dieser Neubenamsung umgangen wird und wie man sie heute schon einsetzen kann. Schepp zum Beispiel schwört auf diesen Polyfill.

[00:51:21] Keine Schaunotizen

Hotel
Hotel lässt alle eure Entwicklungsserver und die damit verbundenen Host-Einträge bequem über eine Weboberfläche verwalten.
Riot.js
Eine User Interface Bibliothek, die sich an React hält aber mit deutlich geringerem Footprint auskommt.
Stylefmt
Coding Guidelines sind wichtig, sie einzuhalten kann schwer sein. Stylefmt formatiert eure Stylesheets nach einem festgelegten Regelwerk. Pre-Commit-Hook, und fertig ist die Einheitlichkeit.
Rollupify
Rollup ist groß. Browserify ist groß. Beides zusammen gibt laut Engineering-Meister Rodney in seinem Projekt über 40% Platzeinsparung. Hossa!

Revision 260: Spezifikations-Neuheiten

1. Mai 2016 | 1 Kommentar

Zwei Änderungen in der Spezifikation sorgen für den nötigen Gesprächsstoff in der nächsten Stunde. Rodney, Hans und Stefan stellen sich Fragen zur HTML Sektionierung und JavaScript Modulen.

Schaunotizen

[00:00:20] H1-H6 statt beliebiger Sektionsverschachtelungen
Die wunderbaren Möglichkeiten des HTML5 Outlining Algorithmus. Großartiges wurde von ihm erwartet, die Implementierung auf Seiten der Werkzeugshersteller und Webseiten-Entwickler hält sich allerdings in Grenzen. Schade, wie wir finden. Wir resümieren über unsere eigene Verwendung und hinterfragen den Entscheid, ob es gut ist die <section> Verschachtelung als Best Practice Beispiel aus der Spezifikation zu nehmen. Denn nach einem Herausnehmen folgt meistens ein Vergessen …
[00:26:57] Adding JavaScript modules to the web platform
JavaScript Module! Wir reden hier nicht von Entwicklungsmustern oder Werkzeugs-Gedöhns, sondern vom echten Zeug: JavaScript Module im Browser. Was bringt die Spezifikation, warum hat es so lange gedauert, und wie schaut die Zukunft damit aus. Rodney steht unseren Fragen Rede und Antwort.

[00:44:26] Keine Schaunotizen

JS Kongress
In München steht ein Kongresshaus. Eins, zwei, JavaScript. 2 Tage, 16 Speaker, Brezen. Stefan ist dort.
Service Worker Toolbox
Die Service Worker Toolbox bringt Express-ähnliches Routing und Standardfunktionalität wie „Netzwerk zuerst! Cache danach!“. Erleichtert die Arbeit für Standard-Tasks.
EmberConf 2016
Das Stefan nicht alleine mit seiner Ember.js Freude ist zeigen die Videos der EmberConf. Mindestens 20 andere Menschen auf diesem Erdball nutzen das Framework. Leute, die gerne mehr darüber lernen wollen, sollen sich diese Case Studies sehr detailliert anschauen.

Revision 259: React Entwicklung und Frontend Einstieg

18. April 2016 | 5 Kommentare

Da die Stammbesetzung diesmal extrem spärlich besetzt und zudem unsere Themenauswahl begrenzt war, lud sich Anselm für die Sendung Max Stoiber ein, um über React Entwicklung und den mittlerweile nicht mehr so einfachen Einstieg in die Front-end Entwicklung zu sprechen.

[00:00:54] News

Grunt 1.0.0
Endlich ist die stabile Version 1.0.0 von Grunt veröffentlicht worden, die jede Menge Bugs behebt und Kleinigkeiten verbessert.

Schaunotizen

[00:02:10] React Boilerplate
Wir nehmen das von Max entwickelte React Boilerplate als Anlass, um über React Application Development zu sprechen und kämmen hier den gesamten Stack durch: Wir beginnen bei Erleichterungen im Workflow, Refactoring hin zu allumfassenden Components und die Erfahrung, die Max machen konnte. Wir sprechen über Component Generators, Server-Side Rendering, CSS Modules und versuchen zu lösen, warum so viele React Applications nur mittelmäßigen Code ausgeben.
[00:22:10] „… nobody has a clue what they’re doing”
ist ein Statement von Max, als er von einem Junior-Developer gefragt wurde, ob er sich auf eine Stelle bewerben solle, weil er die Anforderungen nicht ganz erfüllen könne. Wir sprechen über den Einstieg in die Frontend Entwicklung, die heutigen Hürden dabei und warum es
wohl keinen Frontend Entwickler geben wird, der von sich behaupten kann, alles zu wissen. Abschließend sehen wir in die Zukunft und erzählen, wie wir uns diese vorstellen.

[00:41:29] Keine Schaunotizen

Why you should enforce Dangling Commas for Multiline Statements
Max hat uns noch einen Link mitgebracht, in dem erklärt wird, warum Dangling Commas durchaus sinnvoll sein können.

Revision 258: Das npm Debakel und warum wir so lahme Seiten bauen

17. April 2016 | 8 Kommentare

Schepp, Peter und Anselm erklären nochmal, was beim npm-Gate so abging und warum wir endlich mal vorher nachdenken sollten, wie wir Tools und Workflows aufbauen, statt erst dann, wenn es zu spät ist. Und danach nehmen wir uns gleich noch ein Thema vor, was nach wie vor spannend bleibt: Warum bauen wir so lahme Seiten, vor allem für mobile Endgeräte?

[00:00:11] News

Developers can run Bash Shell and user-mode Ubuntu Linux binaries on Windows 10
Was sollen wir noch dazu sagen, außer: Endlich! Und: Das ist großartig!

Schaunotizen

[00:00:47] Left-Pad / npm-Gate
Der Entwickler eines npm Moduls für eine Left-Pad Function hat selbiges ge-unpublished und damit das halbe Internet kaputt gemacht. Da leider Babel und viele andere Projekte dieses als Dependency verwendeten, schlugen sofort alle CI Systeme fehl. Daraus entstand eine hitzige Debatte um kleine Module in JavaScript, npm und Workflows an sich. Wir sprechen darüber und versuchen herauszufinden, wie wir robustere Workflows bauen können ohne Module nur zu copy-pasten. Seitdem gibt es eine neue npm unpublish policy, Lösungs-Ansätze und auch direkt neue npm Problemchen. Aber da wäre ja auch noch Bower und auch sowas wie das relativ unbekannte IPFS, was sich ziemlich gut als distributed package manager eignen würde.
[00:28:38] The Chrome Distortion: how Chrome negatively alters our expectations.
Diesen doch sehr fraglichen Artikel-Titel haben wir zum Anlass genommen, zu hinterfragen, warum wir überhaupt feststellen können, dass mobile Browser langsam sind und ob das überhaupt die Ursache des Problems ist? Wir kommen selbstverständlich zu einem ganz anderen Schluss, denn wir bauen einfach immer unnötig größere Seiten, mit vielen unnötigen Spielereien. Trotzdem versuchen wir, unsere Verantwortung dann am Ende auf die Browser zu schieben, einfach um uns besser zu fühlen. Letztendlich sprechen wir auch noch über Projektmanagement und Verantwortung als Entwickler, sowie Hardware, die Nicht-Entwickler besitzen.

[01:28:48] Keine Schaunotizen

link rel=noopener
Ein neues Attribut, um zu verhindern, dass window.opener durch nutzergenerierten Inhalt missbraucht werden kann.
A kick-start into server push
Ein leicht verständlicher Artikel zum Thema Server Push.
Node.green
Eine coole tabellarische Aufstellung, welches ECMA-Script Feature in welcher Node Version unterstützt wird.
Referrer and cache control APIs for fetch()
Auch wenn es noch ein klein wenig dauert, bis zum Firefox 48 Release, finden wir diese Features äußerst hilfreich und ihr könnt gleich mal anfangen, das zu nutzen.

Revision 257: Contentful – Das API-first CMS

30. März 2016 | 5 Kommentare

Es war mal wieder an der Zeit, dass wir uns Gäste zur Verstärkung ins virtuelle Studio holen. Nachdem sich die letzten Revisionen viel um Content Management Systeme die Arbeit als Frontend-Entwickler mit ihnen gedreht haben, lag es nahe, dass wir uns mal mit den Leuten hinter dem rein API-basierten „headless“ CMS Contentful unterhalten. Aus Berlin zugeschaltet waren Rouven Weßling und Thomas Scholtes.

Wir redeten über die Idee hinter dem CMS und seine Aufteilung in ein Multiuser-Fähiges Backend und fünf Teil-APIs:

Wir erfuhren außerdem weitere schöne Details, nämlich dass Contentful Mehrsprachigkeit, respektive Lokalisierbarkeit ermöglicht. Und auch dass man mit Hilfe der Content Delivery Sync API seine Daten zur Offline-Speicherung im Client regelmäßig abgleichen kann. Wohlwollend nahmen wir zur Kenntnis, dass Rich Content ausschließlich im Markdown-Format verarbeitet wird. Mehrere Seiten lassen sich mit Hilfe von Spaces unter einem Account betreiben. Volltextsuchen sind dank der Search API leicht zu implementieren. Und es lassen sich Webhooks einrichten, die jedes Mal getriggert werden, wenn Inhalte aktualisiert wurden.

Wer nun Blut geleckt hat: Contentful bietet für den schnellen Einstieg eine Reihe von fertigen SDKs und Plugins für JavaScript und alle gängigen serverseitigen Sprachen sowie für diverse Frameworks, native Plattformen und statische Seitengeneratoren.

Zu guter Letzt wiesen wir noch auf ein interessantes Gast-Posting im Firmenblog hin, wo beschrieben wird, wie man mit Contentful und Snipcart sogar ein Shopsystem abbilden kann.

Der einzige Nachteil, den wir während des ganzen Gesprächs an dem CMS ausmachen konnten: Durch die Art und Weise des Hostings lässt sich nicht sicherstellen, dass Inhalte ausschließlich in Europa gespeichert sind (zumindest derzeit).

Wir sind beeindruckt. Salespitch bestanden!