Working Draft

Wöchentlicher News-Podcast für Webdesigner und -entwickler

Spenden für Soundqualität!

Unsere Aufnahmen werden optimiert mit Auphonic.
Dort könnt Ihr uns Processing-Time kaufen.

Alternativ findet Ihr uns jetzt auch auf Patreon:

Become a Patron!

Ihr sucht neue Kollegen? 🤔 Wir suchen Sponsoren!

Als Podcast versuchen wir die Qualität der Aufnahmen hoch zu halten. Dafür verwenden wir Equipment und Tools, die nicht kostenlos sind. Und jede Folge kostet Zeit: Aufnehmen, Schneiden und Shownotes schreiben, Gäste und Termine koordinieren.

Mit rund 15.000 Downloads pro Folge im Schnitt haben wir auch Herausforderungen im Hosting zu bewältigen.

Um diese Kosten decken zu können, suchen wir Sponsoren. Wir glauben, dass unser Podcast eine gute Plattform ist, um darüber gleichgesinnte Programmierkollegen als Verstärkung für Euer Team zu finden. Wenn Ihr das auch so seht, dann sprecht doch mal mit Euren Chefs. Bei Interesse, kontaktiert uns per E-Mail: sponsoring@workingdraft.de.

Revision 364: Katastrophen und Paranoia

4. November 2018 | Keine Kommentare

Hans, Peter und Stefan nehmen einen aktuellen GitHub Ausfall zum Anlass um über Katastrophen und deren Vermeidung zu reden.

Schaunotizen

[00:00:09] Keine Panik!
Bei GitHub fliegen ein paar Datenbanken in die Luft, und schon steht das halbe Internet. Damit man in solchen Fällen trotzdem immer noch fröhlich „shippen“ kann, liegt vor allem an guten Ausfall-Plänen und sauberer Kommunikationsstrategie. Wir reden über War Room meetings, Umgängen mit AWS Ausfällen, wie wir Dank Artifactor Dingen wie dem Left-Pad Gate aus dem Weg gehen kann. Wir spannen den Bogen zu persönlichen Backup-Strategien und hören uns Peters Backup-Pläne an, und was wir mit 14 Jahre alten Cloud-E-Mail Postfächern tun sollten.

Flattr this!

Revision 363: Und ihr so?

27. Oktober 2018 | Keine Kommentare

Stefan, Schepp und Peter starteten mit dem Plan, ein wenig von aktuellen Webtech-Herausforderungen in ihrer alltäglichen Arbeit zu erzählen. Aus Zeitgründen hat es nur für für die Berichte von zwei von drei Personen gereicht.

Schaunotizen

[00:00:20] Woran arbeiten wir gerade?

Schepp werkelt am Frontend der Rheinischen Post (und anderen Zeitungen aus dem Verlag), während Stefan sich für Dynatrace betätigt. Seine Hauptaufgabe besteht darin, das alte GWT-Frontend durch Angular zu ersetzen, v.A. durch eine Onboarding-Prozedur. Wie betrachten die beachtliche öffentliche Komponentensammlung von Dynatrace und philosophieren über die Seltenheit von Greenfield-Projekte verglichen mit heroischen Migrationen. Davon kann auch Schepp ein Lied singen, der nicht nur die neueste Version der RP mitgebaut hat, sondern die Idee dahinter auch Nicht-Frontendlern und übergeordneten Stakeholdern kommunizieren musste. Heraus kam ein skinbares Designsystem, das vielseitig eingesetzt wird (man vergleiche rp-online.de mit wz.de). Am Ende kommen wir zu einer Diskussion rund um Werbung, JavaScript-Werbemittel, die Advertising Bubble und beenden die Sendung bevor Peter eine Gelegenheit hatte, von seinen Kämpfen mit dem CSSOM zu berichten (siehe auch: JSSS).

[01:10:07] Keine Schaunotizen

DACHFest 2018
Schepp bewirbt das DACHfest 2018 am 10. und 11. November in München.

Flattr this!

Revision 362: Künstliche Intelligenz

19. Oktober 2018 | Keine Kommentare

Nächster Halt des Hype-Train: der Bahnhof Workingdaft-Süd! Damit uns keine Verzögerungen im Betriebsablauf heimsuchen stellt Gast Tobias Oberrauch (Xing, Twitter), seines Zeichens KI-Consultant, für uns die Weichen in Sachen künstlicher Intelligenz.

Schaunotizen

[00:00:54] KI und ML
Tobias gibt uns einen High-Level-Einstieg in künstliche Intelligenz, neuronale Netze und maschinelles Lernen (in den Geschmacksrichtungen supervised, reinforcement und unsupervised). Wir quatschen unter anderm über die Möglichkeiten und Grenzen bei Bilderkennung, autonomem fahren und von KI allgemein. Als Bastler interessiert uns natürlich besonders, wie man neuronale Netze reparieren kann (schwierig) oder sie sich selbst basteln kann. Tobias empfehlt für lezteres Tensor Flow, Keras und Kaggle. Mit diesen und ähnlichen Tools lässt sich eine Reihe anstellen, wie sowohl die KI-Experimente von Google als auch diverse KI-Fails (u.A. von Google, Amazon, YouTube) belegen.

[00:00:55:00] Keine Schaunotizen

Neural Network Playground
Spielplatz für einfache KI-Experimente.
Cloud-Lernen mit Google und Microsoft
Die wolkigen Lösungen der großen Anbieter
Algorithmia Algorithms
Marktplatz für KI-Algorithmen.
Teach Yourself Deep Learning with TensorFlow and Udacity
Kurs von Google
First Steps with tensorflow.js
Tutorial für Machine Learning im Browser
Introduction to Machine Learning for Coders
Ein weiteres ML-Tutorial
Tickets für die dotJS und dotCSS abzugeben!
Meldet euch bei Hans wenn ihr Interesse habt!

Flattr this!

Revision 361: Idle Until Urgent

8. Oktober 2018 | Keine Kommentare

Wie es der Zufall wollte, trafen sich Hans, Schepp und Peter an einem Aufnahmetag in Köln. So kam es zu einer jener seltenen Revisionen ohne laggende VOIP-Software. Trotzdem ging es am Ende ging dann doch wieder um Performance und fittere Frontend-Frameworks.

Schaunotizen

[00:00:41] Performance und intelligentere Frameworks
Unter dem Label Idle Until Urgent stellt Philip Walton einen neuen Ansatz zur Initialisierung von Frontend-Komponenten vor. Das Prinzip scheint uns vielversprechend zu sein, weswegen wir auführlich über den Ansatz, unsere eigenen Erfahrungen mit vergleichbaren Patterns und die jeweils verwendeten APIs (DOMContentLoaded, Mutation Observer, Intersection Observer, getBoundingClientRect()) fachsimpeln. Da die manuelle Implementierung solcher Patterns aber immer recht mühsam ist, fordern wir ihre Implementierung in den JavaScript-Frameworks der Zukunft. React Fiber und worker-dom gehen grob in uns genehme Richtungen.

Flattr this!

Revision 360: CSS-Gate

3. Oktober 2018 | Keine Kommentare

Stefan und Peter haben für diese Revision als Entschuldigung vorzubringen, dass der eine als frischgebackener Papa und der andere als überarbeiteter Erklärbär Schlafdefizite aufweisen, bei denen ein Bailout dringend angebracht gewesen wäre. Stattdessen gibt’s einen Podcast.

Schaunotizen

[00:00:16] CSS-Gate
Der äußerest umtriebige Max Stoiber (u.A. Autor von Styled Components) hat mit einem harmlos anmutenden Quiz eine mittelschwere Kontroverse rund um CSS, die Daseinsberechtigung von CSS und das Ansehen von CSS-Schreibern ausgelöst. Beim folgenden Fehlversuch, aus der Kontroverse irgendeine Art von Lehre zu ziehen, ranten wir unter anderem über den Webkongress Erlangen, React (und die Spinner die’s nutzen), Next.js, Material UI und speziell Peters Meinung dazu und das unausweichliche Paretoprinzip

Flattr this!

Revision 359: HTML/CSS für EPUB und Print Stylesheets

27. September 2018 | Keine Kommentare

Wisst ihr, wo semantisches (X)HTML, CSS und ganz, ganz, ganz viel Responsive Design unglaublich wichtig ist? Bei Büchern! Jedes EPUB ist im Grunde ein gezipptes Bündel an Web Dokumenten, für euren Lesespaß optimiert. Wie sehr sich diese Ausprägung der Web Technologien allerdings vom Rest der weiten Web Welt unterscheidet, erklären Sven Wolfermann und Robert Weber.

Schaunotizen

[00:02:00] EPUB, Mobi und PDF
In E-Books stecken Webtechnologien. Und zwar eine ganze Menge. Sven und Robert erklären wie man von Word Dokumenten (dem Verlags-Format Nummer 1) zu semantischen HTML Dokumenten kommt, und welche Werkzeuge es dafür benötigt. Danach hören wir uns an, wie man das ganze in ein EPUB Format bringt und wo sich die E-Reader von den Webbrowsern unterscheiden. Dabei lernen wir von Mammoth, Cheerio, den Standards für Publikationen mit Web Technologien, PrinceXML und DocRaptor. Weitere Infos gibt’s zu EPUB, EPUB 3.1, CSS Paged Media Module Level 3 und CSS Books. Anschließend sehen wir uns an, wie man mit Print Stylesheets tatsächlich sowas wie Bücher produzieren kann, die direkt in den Druck gehen. Wahrscheinlich hatten die Belesenen von euch eines der Bücher sogar schon in der Hand.

Flattr this!

Revision 358: Web Bluetooth & Web USB

23. September 2018 | Keine Kommentare

As Schepp was left alone by his co-moderators (due to valid reasons) he reached out to Niels Leenheer in order to chat a bit about the Web Bluetooth and Web USB APIs. And as you might already have guessed this episode is in English :)

Shownotes

[00:02:25] Web Bluetooth
We talk about how Bluetooth is structured and how we see it and interface it from the browser. We mantion the GATT standard/protocol and how you can find many devices documented in the OpenGATT Registry. We talk about LEGO stuff that can be remotely controlled via Web Bluetooth, like the LEGO Batmobile (hardware / demo) or the LEGO Tracked Racer which you combine with an SBrick Bluetooth receiver in order to then control it with the help of sbrick.js. We also talked about „the physical web“ in the form of Bluetooth beacons, and we talked about beacons that can run JavaScript on themselves! If you prefer Bluetooth-interfacable microcontrollers, then you might wanna have a look at the Espruino and its Bluetooth extension. And then finally, we also talked about Web USB and how there are security considerations to be made.

[01:05:41] Links

Videos of Niels doing weird things
Namely: Fun with Bluetooth!
Fronteers Conference 2018: October 4th/5th in Amsterdam
One of the oldest and still one of the best frontend conferences in Western Europe! Non-profit and again with an amazing and diverse lineup. Although this time in a new venue in order to be able to offer more seats. Check it out, Western Germans…
performance.now() Conference: November 8th/9th, Amsterdam
The first edition of many more to come, this conference fills the vacuum that Velocity created and features a breath-taking array of webperf speakers. Don’t miss this once in a lifetime lineup!

Flattr this!

Revision 357: Der JAMStack

18. September 2018 | 3 Kommentare

Ein Artikel aus grauer Vorzeit (also Februar) veranlasst uns mal den JAMStack genauer zu beleuchten.

Schaunotizen

[00:00:17] JAMStack
JAM steht für „JavaScript, APIs und Markup“ und bezeichnet statisch generierte Seiten, die mit Serverless/Microservices/Cloud-Funktionen um dynamische Inhalte angereichert werden. Mit einher gehen eine ganze Reihe an Technologien, die es zu verstehen und zu verwenden gilt. Statt großen CMS Monolithen bedient man sich einem Baukasten an verschiedenen Technologien um das gleiche Ergebnis zu erzielen:

  • Generatoren wie Jekyll mit Liquid, Gatsby.js und React sorgen für generiertes HTML
  • Cloudfunktionen wie Azure Functions oder Dienste wie Disqus helfen bei dynamischen Inhalten.
  • Build-Services wie Travis CI bauen die Seite, IFTTT sorgt für entsprechende Trigger
  • Man schreibt Markdown in Git Repos, oder bedient sich einem Headless CMS wie Storyblok
  • Man hostet auf GitHub Pages, oder irgendeinem anderen CDN

Schnelle Auslieferung und bombensichere Websites sind die Folge. Dienste wie Netlify kümmern sich dabei von Cloud-Funktionen, Build Services und Hosting über alles.

Neben all dem Lob schauen wir aber auch auf die Schattenseiten und zeigen, was alles schiefgehen kann, wenn man mit der Skalierung nicht mehr nachkommt.

[00:43:50] Keine Schaunotizen

TypeScript & Babel 7
TypeScript hat zwar einen eigenen Transpiler, kann aber nun auch als Preset für Babel verwendet werden. Falls ihr euren bestehenden Stack mit Type-Checking anreichern wollt.
A tour of Javascript timers on the web
Das Thema mit JavaScript Zeit-Funktionen (setTimeout, …) ist ja einfach, oder? Nolan Lawson zeigt was alles dahinter steckt.

Flattr this!

Revision 356: Neues vom Chrome-Browser!

17. September 2018 | 4 Kommentare

Chrome hat ein paar neue Features, die in keinem anderen Browser funktionieren und für die es noch nicht mal anständige Spezifikationen gibt. Natürlich ist das für Schepp, Hans und Peter Anlass zu einer ganzen neuen Revision!

Schaunotizen

[00:00:30] Lazy Loading
Wir besprechen sowohl Lazy Loading an sich als auch die Implementierung des lazyload-Attributs für Bilder und Iframes. Themenverwandt ist auch das asynchrone Dekodieren von Bildern, für das es sogar schon Spezifikationstext gibt!
[00:14:47] intrinsicsize-Attribut
Nicht mit den CSS-Werten für Intrinsic Sizing zu verwechseln, erlaubt ein neues Attribut die Angabe von intrinsischen Maßen für HTML-Medien wie Bilder und Videos. So lässt sich springender Content im Responsive Design besser bändigen, als mit CSS-Hacks wie max-width:100% und erzwungenen Seitenverhältnissen.
[00:24:43] Kein JavaScript mehr mit 2G?
Kontrovers: Mobile Chrome könnte demnächst bei 2G-Verbindungen JavaScript deaktivieren! Damit könnte Progressive Enhancement wieder zum Thema werden, falls nicht (wie Peter postuliert) einerseits PWA zur Abwehr des Problems taugen oder das Problem selbst vom technischen Fortschritt aufgefressen wird. In Zuge dieser Besprechung streifen wir Client Hints, die Network Information API und erwähnen einen Artikel, der beschreibt wie
HTTPS Satteliteninternet drastisch verlangsamt.

Flattr this!

Revision 355: Apache Kafka

10. September 2018 | 3 Kommentare

„Kafka ist eine Bosna mit einer Käsekrainer“. Oder doch ein deutschsprachiger Schriftsteller der sich in riesige Käfer verwandeln konnte? Immerhin kommen Zoowärter vor. Und was haben die Apachen damit zu tun? Fragen über Fragen. Antworten liefert „Old Firehand“ Simon Streubel, der von seinem ganz besonders käferlosen „Simons Traum“ erzählt und Hans und Stefan durch Begrifflichkeiten und Funktionsweisen führt. Prostmahlzeit.

Schaunotizen

[00:00:26] Kafka
Kafka ist ein Distributed Publish-Subscribe Message Broker, der ursprünglich von LinkedIn entwickelt wurde und 2014 bei Apache untergekommen ist. Das System liefert einen bequemen weg von Daten auf der einen Seite rein (Producer), und optimiert auf der anderen Seite wieder raus (Consumer). Die Verteilung sorgt für hohe Skalierbarkeit und ist daher super für Microservices geeignet. Der Zookeeper kümmert sich darum, dass alle Knoten und Quellen miteinander auch sprechen können. Ein eigenes Datenformat wie AVRO hilft zusätzlich dabei Daten sauber zu serialisieren. Die entstehenden Datenströme werden bequem mit reaktiven Stream APIs konsumiert. Zuviel an Begrifflichkeiten? Die Lücken im Text füllt unsere aktuelle Episode. Die Löcher in den Bäuchen die österreichische Kafka. Hans verlost dazu sogar etwas am Ende der Revision.

[00:53:57] Keine Schaunotizen

Kafka Tool
Das Kafka Tool ist ein Tool für Kafka. In der Form einer grafischen Benutzeroberfläche.
Sinek
Sinek bringt Kafka nach Node.js.

Flattr this!