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

February 28, 2018 Revision 330: Geolocation API und das HTML Dialog-Element
Diesmal haben wir ohne Gast in einer kompakten Ausgabe mit dem Schepp, Rodney und Hans über die Problematik der Geolocation API und das Dialog-Element gesprochen.
Schaunotizen
[00:00:18] Geolocation API
Hans beschäftigte sich in der näheren Vergangenheit mit der Usability der Geolocation API. Wir unterhalten uns über die notwendigen Schritte um die Adresse eines Nutzers auszulesen, sofern diese/r zustimmt. In diesem Kontext sprechen wir auch über die Usability und User Experience der Web Permission API.
[00:17:40] HTML Dialog-Element
Mit Dialogen auf Webseiten ist das so eine Sache: Als Entwickler hat man ziemlich viel zutun, um ein Dialog-Element auch aus Accessibility-Sicht einigermaßen benutzbar zu machen. Nun soll dies durch das bereits lange Zeit in der Spezifikation befindliche native HTML-Element verbessert werden. Wird das gelingen? Wo liegen die Probleme mit dem Element? Rodney klärt auf.
Keine Links
38 min
February 18, 2018 Revision 329: Actor Model und CSS Paint API
Schepp, Hans, Anselm und Peter durften diesmal Surma (Web, Twitter) begrüßen und sich mit ihm einmal quer durch den zukünftigen Web-Stack philosophieren.
[00:01:00] News
Using page speed in mobile search ranking
Es ist offiziell: Ladegeschwindigkeit wirkt sich ab Juli auf die Suchaschinen-Platzierung aus.
Schaunotizen
[00:02:37] Performance und das Actor Model
Inspiriert von Sprachen wie Erlang, Elixir und Pony hat sich Surma mit dem Actor Model beschäftigt und das Ergebnis seiner Überlegungen auch aufgeschrieben. Actor sind Prozesse, die lokalen State haben und über Messages mit anderen Actors kommunizieren können. Im Browser ließe sich dieses Konzept z.B. mit Web Workers umsetzen – da ein Worker exakt einen OS-Thread in Anspruch nimmt, bietet es sich an, für den korrekt dimensionierten Worker-Pool die Anzahl der Cores im Rechner mit navigator.hardware_concurrency zu ermitteln. Die Kommunikation ließe sich mit einer Library wie Comlink umsetzen und der Main-Thread könnte zu einem reinen UI-Rendering-Thread herabgestuft werden. Außerdem sprechen wir noch über hyperHTML, litHTML, Service Worker, was Spiele-Entwickler für ein Startup tun könnten und gleiten langsam in das Thema Houdini über.
[00:48:34] Houdini und die CSS Paint API
Neu in Chrome (Version 65) ist jetzt eine erste Implementierung der CSS Paint API. Dieses erste Feature aus dem Houdini-Projekt (erklärt von Bruce Lawson in Revision 250) ermöglicht DIY-CSS-Painting – Surma erklärt die Details. Außerdem kommen wir noch auf den Canvas Super Cookie zu sprechen, der in Revision 319 Thema war.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 8 min
February 18, 2018 Revision 329: Actor Model und CSS Paint API
Schepp, Hans, Anselm und Peter durften diesmal Surma (Web, Twitter) begrüßen und sich mit ihm einmal quer durch den zukünftigen Web-Stack philosophieren.
[00:01:00] News
Using page speed in mobile search ranking
Es ist offiziell: Ladegeschwindigkeit wirkt sich ab Juli auf die Suchaschinen-Platzierung aus.
Schaunotizen
[00:02:37] Performance und das Actor Model
Inspiriert von Sprachen wie Erlang, Elixir und Pony hat sich Surma mit dem Actor Model beschäftigt und das Ergebnis seiner Überlegungen auch aufgeschrieben. Actor sind Prozesse, die lokalen State haben und über Messages mit anderen Actors kommunizieren können. Im Browser ließe sich dieses Konzept z.B. mit Web Workers umsetzen – da ein Worker exakt einen OS-Thread in Anspruch nimmt, bietet es sich an, für den korrekt dimensionierten Worker-Pool die Anzahl der Cores im Rechner mit navigator.hardware_concurrency zu ermitteln. Die Kommunikation ließe sich mit einer Library wie Comlink umsetzen und der Main-Thread könnte zu einem reinen UI-Rendering-Thread herabgestuft werden. Außerdem sprechen wir noch über hyperHTML, litHTML, Service Worker, was Spiele-Entwickler für ein Startup tun könnten und gleiten langsam in das Thema Houdini über.
[00:48:34] Houdini und die CSS Paint API
Neu in Chrome (Version 65) ist jetzt eine erste Implementierung der CSS Paint API. Dieses erste Feature aus dem Houdini-Projekt (erklärt von Bruce Lawson in Revision 250) ermöglicht DIY-CSS-Painting – Surma erklärt die Details. Außerdem kommen wir noch auf den Canvas Super Cookie zu sprechen, der in Revision 319 Thema war.
1 hr 8 min
February 06, 2018 Revision 328: Web Components
In dieser Revision war Working-Draft-Alumnus Kahlil (Webseite, Twitter, Podcast) zu Gast um mit Hans und Peter über Web Components zu plaudern.
[00:00:45] News
Service Worker landen in Safari und Edge
Jeweils in den neuen Preview-Builds.
Schaunotizen
[00:01:08] Web Components
Inspiriert durch einen Artikel von Mikeal Rogers berichtet Kahlil von seiner Begeisterung für Web Components. Neben konkreten Webstandards wie Custom Elements, Shadow DOM, Template-Elementen und HTML Imports (RIP) und Tools im Stile von Polymer und dem CDN unpkg treibt uns auch die Frage nach dem Warum und den möglichen Vorteilen von Web Components um. Während Kahlil in Web Components, kombiniert mit modernen Template-Libraries (lit-html, hyperHTML/viperHTML) bzw. Data Binding für Template Elemente (wie in Revision 319 besprochen) eine Alternative zu bzw. neue Basis für Frontend-JS-Frameworks sieht – zu nennen wären neben Polymer X-Tag und Stencil – ist Peter weniger euphorisch. Die durch Web Components hergestellte Interoperabilität von Komponenten kann ein großes Plus sein (EA-Erfahrungsbericht bei der Polymer-Conf), doch wie oft sich das wirklich positiv zu Buche schlägt, bleibt dahingestellt. Peter setzt selbst Web Components ein (html-import, scoped-style), sieht sie jedoch nur als eine für sehr bestimmte Anwendungsfälle brauchbare HTML-Abstraktion, quasi das jQuery-Plugin 2.0.
[01:02:48] Keine Schaunotizen
Native form validation
PPK wendet sich gewohnter Detailversessenheit der Funktionsweise und der Browserunterstützung von HTML5-Formularvalidierung zu.
Reactive Podcast
Kahlils Podcast: „Three friends talk about tech, culture and software development“
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 5 min
February 06, 2018 Revision 328: Web Components
In dieser Revision war Working-Draft-Alumnus Kahlil (Webseite, Twitter, Podcast) zu Gast um mit Hans und Peter über Web Components zu plaudern.
[00:00:45] News
Service Worker landen in Safari und Edge
Jeweils in den neuen Preview-Builds.
Schaunotizen
[00:01:08] Web Components
Inspiriert durch einen Artikel von Mikeal Rogers berichtet Kahlil von seiner Begeisterung für Web Components. Neben konkreten Webstandards wie Custom Elements, Shadow DOM, Template-Elementen und HTML Imports (RIP) und Tools im Stile von Polymer und dem CDN unpkg treibt uns auch die Frage nach dem Warum und den möglichen Vorteilen von Web Components um. Während Kahlil in Web Components, kombiniert mit modernen Template-Libraries (lit-html, hyperHTML/viperHTML) bzw. Data Binding für Template Elemente (wie in Revision 319 besprochen) eine Alternative zu bzw. neue Basis für Frontend-JS-Frameworks sieht – zu nennen wären neben Polymer X-Tag und Stencil – ist Peter weniger euphorisch. Die durch Web Components hergestellte Interoperabilität von Komponenten kann ein großes Plus sein (EA-Erfahrungsbericht bei der Polymer-Conf), doch wie oft sich das wirklich positiv zu Buche schlägt, bleibt dahingestellt. Peter setzt selbst Web Components ein (html-import, scoped-style), sieht sie jedoch nur als eine für sehr bestimmte Anwendungsfälle brauchbare HTML-Abstraktion, quasi das jQuery-Plugin 2.0.
[01:02:48] Keine Schaunotizen
Native form validation
PPK wendet sich gewohnter Detailversessenheit der Funktionsweise und der Browserunterstützung von HTML5-Formularvalidierung zu.
Reactive Podcast
Kahlils Podcast: „Three friends talk about tech, culture and software development“
1 hr 5 min
January 31, 2018 Revision 327: UI-Engineering
Nachdem wir das Thema „Zusammenarbeit von Designern und Entwicklern“ in Revision 312 schon besprochen hatten legen wir diesmal noch eine Schippe drauf. Unsere Gäste Dennis Reimann (Webseite, Twitter) und Jan Persiel (Webseite, Twitter) nehmen sich dieses Problems auf ihre eigene Weise an und berichten uns von ihrem Kampf für interdisziplinäres UI-Engineering.
Schaunotizen
[00:02:00] Zusammenarbeit von Designern und Entwicklern
Softwareentwickler Dennis Reimann und Designer Jan Persiel sind die Köpfe hinter uiengineering.de, einer Initiative für die Verbesserung der Zusammenarbeit zwischen Design und Entwicklung. Unter dem Schlagwort #uiengineering werden Best Practices verbreitet, gegen die Trennung der Gewerke agitiert und interdisziplinäre Ansätze für UI-Engineering gefordert. Dennis und Jan plaudern über die Grundlagen von gutem UI-Engineering, die Arbeit in Greenfield- und Brownfield-Projekten, über Prototyping (mit Papier und Whiteboard), den Umgang mit besonders schwierigen Fällen (Personen und Unternehmen), den ROI von UI-Engineering (mit Trivago als einem von vielen Beispielen) Style Tiles, Tools und die Umsetzung von UI-Engineering in Agenturarbeit und Produktentwicklung. Und fällt noch der Name UIengine, das Ein Werkzeug zum Erzeugen und Verwalten eines Design Systems ist und von Jan und Dennis entwickelt wurde.
[01:15:00] Keine Schaunotizen
I’m harvesting credit card numbers and passwords from your site. Here’s how.
Spoiler: npm install
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 18 min
January 31, 2018 Revision 327: UI-Engineering
Nachdem wir das Thema „Zusammenarbeit von Designern und Entwicklern“ in Revision 312 schon besprochen hatten legen wir diesmal noch eine Schippe drauf. Unsere Gäste Dennis Reimann (Webseite, Twitter) und Jan Persiel (Webseite, Twitter) nehmen sich dieses Problems auf ihre eigene Weise an und berichten uns von ihrem Kampf für interdisziplinäres UI-Engineering.
Schaunotizen
[00:02:00] Zusammenarbeit von Designern und Entwicklern
Softwareentwickler Dennis Reimann und Designer Jan Persiel sind die Köpfe hinter uiengineering.de, einer Initiative für die Verbesserung der Zusammenarbeit zwischen Design und Entwicklung. Unter dem Schlagwort #uiengineering werden Best Practices verbreitet, gegen die Trennung der Gewerke agitiert und interdisziplinäre Ansätze für UI-Engineering gefordert. Dennis und Jan plaudern über die Grundlagen von gutem UI-Engineering, die Arbeit in Greenfield- und Brownfield-Projekten, über Prototyping (mit Papier und Whiteboard), den Umgang mit besonders schwierigen Fällen (Personen und Unternehmen), den ROI von UI-Engineering (mit Trivago als einem von vielen Beispielen) Style Tiles, Tools und die Umsetzung von UI-Engineering in Agenturarbeit und Produktentwicklung. Und fällt noch der Name UIengine, das Ein Werkzeug zum Erzeugen und Verwalten eines Design Systems ist und von Jan und Dennis entwickelt wurde.
[01:15:00] Keine Schaunotizen
I’m harvesting credit card numbers and passwords from your site. Here’s how.
Spoiler: npm install
1 hr 18 min
January 22, 2018Revision 326: TYPO3 Performance
Anselm und Stefan begrüßen heute TYPO3 Experten Marcus Schwemer um den Performance-Krücken von TYPO3 auf die Spur zu kommen.
Schaunotizen
[00:01:10] TYPO3 Performance
TYPO3 Performanceprobleme sind wie Oger: Sie haben Schichten, und es wachsen weiße Härchen aus ihnen wenn man sie zu lange in der Sonne legt. Deshalb zwiebelt Marcus die Probleme in sieben Schichten auf und erklärt mit Erfahrung und ganzheitlichem Blick, was man alles tun kann:
Auslieferung: TYPO3 Kniffe für das ausliefern der Assets
Frontend: Vieles, für das man Frontend Worklfows braucht, geht auch mit einer Prise TypoScript
TYPO3 Cache: Die umfangreiche Cache-API und die damit verbundenen Cache-Stores für Zwischenergebnisse von Teilbereichen
Extensions: Kein TYPO3 Projekt ohne Erweiterungen. Die bringen wieder einen ganzen Sack an eigenen Performanceproblemen mit
Das CMS an sich: Mal eine Woche lang CMS aktualisieren? Zahlt sich aus!
Services: PHP7.x ist nicht nur superschnell, sondern auch Basis für TYPO3 8. NGINX soll auch ganz gut sein
Hardware: Virtualisierung macht flexible Architekturen möglich.
Nachdem aller guten Schichten sieben sind, gibt es nach dem Rundumschlag noch den generellen Hinweis: Der Teufel steckt im Detail. Diese und weitere Tipps gibt es auch auf Marcus‘ Blog.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 25 min
January 22, 2018 Revision 326: TYPO3 Performance
Anselm und Stefan begrüßen heute TYPO3 Experten Marcus Schwemer um den Performance-Krücken von TYPO3 auf die Spur zu kommen.
Schaunotizen
[00:01:10] TYPO3 Performance
TYPO3 Performanceprobleme sind wie Oger: Sie haben Schichten, und es wachsen weiße Härchen aus ihnen wenn man sie zu lange in der Sonne legt. Deshalb zwiebelt Marcus die Probleme in sieben Schichten auf und erklärt mit Erfahrung und ganzheitlichem Blick, was man alles tun kann:
Auslieferung: TYPO3 Kniffe für das ausliefern der Assets
Frontend: Vieles, für das man Frontend Worklfows braucht, geht auch mit einer Prise TypoScript
TYPO3 Cache: Die umfangreiche Cache-API und die damit verbundenen Cache-Stores für Zwischenergebnisse von Teilbereichen
Extensions: Kein TYPO3 Projekt ohne Erweiterungen. Die bringen wieder einen ganzen Sack an eigenen Performanceproblemen mit
Das CMS an sich: Mal eine Woche lang CMS aktualisieren? Zahlt sich aus!
Services: PHP7.x ist nicht nur superschnell, sondern auch Basis für TYPO3 8. NGINX soll auch ganz gut sein
Hardware: Virtualisierung macht flexible Architekturen möglich.
Nachdem aller guten Schichten sieben sind, gibt es nach dem Rundumschlag noch den generellen Hinweis: Der Teufel steckt im Detail. Diese und weitere Tipps gibt es auch auf Marcus‘ Blog.
1 hr 25 min
January 14, 2018Revision 325: Die Web Audio API
Dieses Mal hatten wir Jan Krutisch zu Gast, der mit uns einen Ausflug in die Welt der Synthesizer und Audioeffekte unternahm. Thema war nämlich die Web Audio API, mit der Jan das Glück hat, sich immer wieder beschäftigen zu dürfen, etwa in Form des liv3c0ders oder der Novation Circuit Components.
Schaunotizen
[00:02:53] Die Web Audio API
Wir lernen, dass die Web Audio API einem Fließband-System ähnelt: Gespeist wird es aus einer Ton-Quelle (MP3 oder Oszillator), die im Folgenden durch beliebige viele angestöpselte Modifikator-Stationen verändert wird, bevor das Resultat dann ausgegeben wird. Im einfachsten Fall kommt dabei Kunst heraus, im besten Fall ein Produkt für den Musikbereich, wie Ableton Learning Music oder Loop Drop. Folgende verlinkenswerte Stichworte fielen im Verlauf unseres Gesprächs:
Die Web Midi API: Dank Ihr lassen sich angeschlossene Keyboards & Co zum Steuern der Web Audio API nutzen
Tone.js: Ein Framework zur Audio-Erzeugung, das auf Web Audio API aufsetzt
Little Bits Korg Synth Kit: Ein Baukastensystem, mit dem sich schnell die Grundlagen von Synthesizern lernen lassen
Paul Adenot: Elements of Dance Music – JSConf.Asia 2015: Welche musikalischen Muster gibt es, die in Web Audio angewandt zu gefälliger Musik führen?
Chrome Developers: Web Audio (Part 1 und Part 2): Web Audio Tutorial von Chris Wilson
A Tale of Two Clocks – Scheduling Web Audio with Precision: Wie Web Audio seine eigene Systemuhrzeit hat
Die Web Audio Slack Gruppe: Wer sich über die Web Audio API austauschen möchte ist hier richtig
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
57 min