Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

May 01, 2016 Revision 260: Spezifikations-Neuheiten
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 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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
48 min
May 01, 2016 Revision 260: Spezifikations-Neuheiten
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 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.
48 min
April 18, 2016 Revision 259: React Entwicklung und Frontend Einstieg
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
43 min
April 18, 2016 Revision 259: React Entwicklung und Frontend Einstieg
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.
43 min
April 17, 2016 Revision 258: Das npm Debakel und warum wir so lahme Seiten bauen
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.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 31 min
April 17, 2016 Revision 258: Das npm Debakel und warum wir so lahme Seiten bauen
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.
1 hr 31 min
March 30, 2016Revision 257: Contentful – Das API-first CMS
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:
die Content Delivery API, deren Inhalte vom Fastly CDN ausgeliefert werden
die Content Management API, das mehrbenutzer- und rechte-/rollenfähig ist
die Images API, die Bilder per URL-Parameter resizen, croppen und dekorieren kann und auf Amazons CloudFront CDN aufsetzt
die neue Widgets API, mit der sich das Backend-Interface um selbstentwickelte Eingabefelder aufbohren lässt
und über die Content Preview API, über die man eine Vorschau seiner Inhalte an der Content Delivery API vorbei abruft.
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!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
54 min
March 30, 2016 Revision 257: Contentful – Das API-first CMS
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:
die Content Delivery API, deren Inhalte vom Fastly CDN ausgeliefert werden
die Content Management API, das mehrbenutzer- und rechte-/rollenfähig ist
die Images API, die Bilder per URL-Parameter resizen, croppen und dekorieren kann und auf Amazons CloudFront CDN aufsetzt
die neue Widgets API, mit der sich das Backend-Interface um selbstentwickelte Eingabefelder aufbohren lässt
und über die Content Preview API, über die man eine Vorschau seiner Inhalte an der Content Delivery API vorbei abruft.
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!
54 min
March 21, 2016 Revision 256: Arbeiten mit einem CMS – Berichte aus der Praxis
Zur Revision 256 ergab es sich, dass wir uns eine ganze Sendung lang einer Hörerfrage widmeten, welche uns im Rahmen der Revision 253 – CMS, CMS, CMS! gestellt wurde.
Schaunotizen
[00:00:36] Hörerfrage CMS-Workflow
Ein Hörer, Tilman, fragte, wie wir denn mit unterschiedlichen Bereichen bei der Webseiten-Entwicklung umgehen, wenn wir mit Content Management Systemen arbeiten. Wir sprechen darüber, welche CMS wir verwenden, welche Rollen wir in diesen Projekten einnehmen und wie wir moderne Frontends im Zusammenspiel mit fast jedem CMS bauen können.
[00:51:39] Keine Schaunotizen
Styling broken Images
Bilder, die nicht geladen werden können, sehen meistens etwas „zerschossen“ aus. Mithilfe dieses Tutorials lässt sich da Abhilfe schaffen.
Material Conference 2016 in Island
Dieses Jahr wird erstmalig die Material Conference stattfinden. Eine Konferenz, die das Web als „Material“ untersucht. Die Veranstalter brauchen eure Hilfe und haben eine Kickstarter Campaign ins Leben gerufen. Schaut’s euch mal an.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
55 min
March 21, 2016 Revision 256: Arbeiten mit einem CMS – Berichte aus der Praxis
Zur Revision 256 ergab es sich, dass wir uns eine ganze Sendung lang einer Hörerfrage widmeten, welche uns im Rahmen der Revision 253 – CMS, CMS, CMS! gestellt wurde.
Schaunotizen
[00:00:36] Hörerfrage CMS-Workflow
Ein Hörer, Tilman, fragte, wie wir denn mit unterschiedlichen Bereichen bei der Webseiten-Entwicklung umgehen, wenn wir mit Content Management Systemen arbeiten. Wir sprechen darüber, welche CMS wir verwenden, welche Rollen wir in diesen Projekten einnehmen und wie wir moderne Frontends im Zusammenspiel mit fast jedem CMS bauen können.
[00:51:39] Keine Schaunotizen
Styling broken Images
Bilder, die nicht geladen werden können, sehen meistens etwas „zerschossen“ aus. Mithilfe dieses Tutorials lässt sich da Abhilfe schaffen.
Material Conference 2016 in Island
Dieses Jahr wird erstmalig die Material Conference stattfinden. Eine Konferenz, die das Web als „Material“ untersucht. Die Veranstalter brauchen eure Hilfe und haben eine Kickstarter Campaign ins Leben gerufen. Schaut’s euch mal an.
55 min