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 351: JavaScript und die Google Suche

13. August 2018 | 1 Kommentar

Schepp und Stefan haben sich Verstärkung aus Zürich geholt. Martin Splitt, seit kurzem Dev Rel bei Google für die Google Suche, klärt einige Mythen auf.

Schaunotizen

[00:00:54] Die Google Suche
Der Googlebot, der Seiten in Googles Suchindex aufnimmt, hat JavaScript aktiviert. Soviel ist soweit bekannt. Doch was bedeutet das im Detail? Martin gibt uns Auskunft über Browserversion, Feature Set, das Vorgehen des Google Bots bei Links und weiteres. Wir erfahren, welche Voodoo Tricks so gar nichts bewirken und worauf man tatsächlich schauen muss, wenn Google die Seite indizieren soll. Als Hilfe gibt’s Werkzeuge wie die bekannte Search Console formerly known as Webmaster tools und den weniger bekannten Mobile Friendly Test

Flattr this!

Revision 350: HTTP Header

9. August 2018 | Kommentare deaktiviert für Revision 350: HTTP Header

Hans, Schepp und Peter fanden sich zusammen um einfach mal eine komplette Revision über nichts anderes als HTTP-Header zu quatschen!

Schaunotizen

[00:00:10] HTTP-Header
Bei der Besprechung des geplanten feature-policy-Headers, der helfen soll Third-Party-Scripts einzuhegen, erfährt Peter von der Existenz des Google Tag Managers. Weitere security-relevante Header sind CSP und CORS (wobei hier besonders die praktischen Umgehungs-Proxies zu beachten sind) sowie service-worker-allowed und x-frame-options. Ebenfalls in die gleiche Kerbe schlagend, aber nicht ganz so umfassend unterstützt werden auf die eine oder andere Weise DNT und der prähistorische P3P-Header. Das Thema der effizienten Ressourcenübermittlung wird über Link, Cache Digests, Client Hints sowie Prefetch, Preload und Preconnect bedient. Als finalen Geheimtipp verweist Schepp auf Transfer-Encoding: chunked und dazugehörige Fußangeln.

Flattr this!

Revision 349: Serverseitige Entwicklung mit Node

25. Juli 2018 | 2 Kommentare

Der Schepp, Rodney und Hans sprechen über die Entwicklung von serverseitigen Applikationen mit Node.

Unser Sponsor

Diese Folge wird gesponsert vom neuen CV-Tool “GravityCV”, für einfaches, flexibles und schnelles erstellen und versenden Deines Lebenslaufs.

“GravityCV” – Professionelles Design & hoher Datenschutz für dein CV.
Kostenlos anmelden unter gravitycv.com.

Schaunotizen

[00:01:27] CLI Tools
Selbstgeschriebene Command Line Interface (CLI) Tools sind hilfreich, wenn man viel auf der Command Line unterwegs ist. Mit Node kann man eigene Tools sehr einfach schreiben. Wir erklären wie und welche Module dabei helfen können. Hier eine Auswahl der genannten:

  • Meow – Argument Parsing
  • opn – Liest einzelne Dateien oder Websites
  • ora – Aktivitätsindikator (Spinner)
  • prompt – Abfragen von User-Input
  • shelljs – Einheitliche Command Line API für Windows, Linux und Mac
  • as-table – Tabellarische Daten ausgeben
  • decompress und archiver – Einfacher Umgang mit zip, tar und Co.
  • keytar – Lokaler Passwort-Speicher

Zur Installation eines eigenen CLI kann man einfach ein Paket von NPM installieren oder direkt von GitHub per entsprechendem Command:

npm install -g git+ssh://@github.com:username/repository.git
[00:20:40] Serverseitige Services
Natürlich sprechen wir auch drüber, wie man einen Service mit Node bauen kann. Wir haben alle mehr oder minder viel Erfahrung damit und diskutieren über unsere Ansätze. Grundsätzlich sind wir der Meinung, dass Services sich immer an die 12 Factors halten sollten.
Einige Tools die wir empfehlen:

Flattr this!

Revision 348: Performance in 2018

25. Juli 2018 | Kommentare deaktiviert für Revision 348: Performance in 2018

Kollege Sven Wolfermann kommt zu Besuch und erläutert mit uns den Stand der Performance Optimierungen im Jahr 2018.

Schaunotizen

[00:00:50] Performance
Gemeinsam mit Sven diskutieren wir, was man heutzutage alles machen soll und kann, um die Geschwindigkeit der Webseiten zu verbessern. Wir beginnen einsteigerfreundlich mit diversen Werkzeugen wie Webpagetest, und gehen dann auf neue Browserfeatures ein, die uns die Optimierung einfacher machen. Mit dabei sind preload und ES Module. In Sachen Fonts besprechen wir Variable Fonts, Subfont und das neue font-display property. Außerdem gibt’s einen Rundumschlag über Lazy Loading, u.a. mit der Intersection Observer API.

[01:21:54] Keine Schaunotizen

To push or not to push.
Der Patrick Hamann kennt sich halt mit HTTP/2 super gut aus. Zeigt er auch hier.
performance.now()
Performance Konferenz (!) in Amsterdam (!!) mit Steve Souders (!!!) und Paul Irish (!!!!) und noch vielen, vielen anderen? Fixbesuch im November.
Google Workbox
Die Workbox hilft prima, wenn man offlinefähige Websites und PWAs machen will.
PWA Builder
Noch ein wenig einfacher und oft ausreichend ist Microsofts PWA Builder.

Flattr this!

Revision 347: OAuth

23. Juli 2018 | 2 Kommentare

Die Revision 347 steht ganz im Zeichen der Autorisierung mit OAuth. Zumindest sprechen wir viel über OAuth. Und zwar mit Johannes Pichler, der bei karriere.at als Backend-Entwickler unterwegs ist.

Schaunotizen

[00:01:13] Was ist OAuth?
Johannes erklärt erst mal was OAuth ist und bringt uns das Thema der Autorisierung näher. Wir lernen JSON Web Tokens kennen.
[00:12:36] Security, Anwendungsfälle und Implementierungen
Wir sprechen über Praktikabilität, Sicherheit und weitere Punkte einer guten Autorisierung. Darüber hinaus sprechen wir ein Praxis-Beispiel durch und schauen auf Implementierungen von Dienstleistern wie Facebook und Google.

Keine Schaunotizen

code.talks 2017 – Protect your API with OAuth2
Ein gutes Intro zu OAuth2.

Flattr this!

Revision 346: Wie optimiere ich meine Bilder fürs Web?

22. Juli 2018 | 2 Kommentare

Einige Jahre nach der ersten Sendung (158) mit Trivago- und Ex-Akamai Performance-Experte Tobias Baldauf (Twitter, GitHub) ist es wieder so weit: Tobias besucht uns und gibt sein Wissen preis. Dieses mal besprechen wir sehr gezielt das Thema Bildoptimierungen.

Schaunotizen

[00:01:36] SQIP – aktueller Status, die Zukunft
SQIP ist eine Rendering-Technologie, die auf SVG basiert. Diese ermöglicht es kleine Platzhalter-Bilder zu erstellen und auszuliefern, bevor das eigentliche Bild geladen ist. Es gibt einige Implementierungen in CMS, wie Gatsby und Kirby.
[00:13:55] Progressives Image Encoding
Abseits von SQIP, sprechen wir über Bild-Encodings, die Bilder schneller rendern. Dazu zählt Progressive JPEG.
Weitere Links:

[00:55:04] Web Performance Budgets != Fixed Thresholds
Web Performance Budgets sind sehr beliebt, sollten aber keine festen Thresholds haben, argumentiert Tobias.
[01:04:32] UX: Web Performance und Revenue Impact
Oft ist die Erwartung, dass man durch Bildkompression bessere Performance erreicht und somit Nutzer mehr durch Bildgalerien klicken. Nachforschungen von Trivago zeigen allerdings, dass die Benutzer einige Zeit brauchen, bis die bessere Performance beim Benutzer verstanden ist. Das bedeutet also: Geduld, Kadenz beachten, User in Kohorten einteilen.
[01:11:35] Ein Ausblick auf die Bildalgorithmen der Zukunft
Wir sprechen über die Zukunft und schauen auf die zunehmende Fragmentierung im Image-Format-Markt. Tobias skizziert Custom Decoder für Bilder mit WebAssembly.

[01:23:28] Keine Schaunotizen

Neue WebPerf Conferences in Europa: DeltaV
Es gibt wieder eine Konferenz in Europa die sich mit dem Thema Web Performance beschäftigt.

Flattr this!

Revision 345: DevOps – Kubernetes, VMs und Co.

9. Juli 2018 | 3 Kommentare

Zur aktuellen Sendung ist Frederic Hemberger (Web, Twitter) zu Gast, der erst kürzlich mit uns über die Beziehung von DevOps zur Täglichen Arbeit als Webentwickler gesprochen.

Heute sprechen wir über Container-Software wie VMs, Docker und Kubernetes und wie diese ineinander greifen.

Keine News

Schaunotizen

[00:00:34] DevOps – Was sind eigentlich diese Container (und mehr)?
Erst mal müssen wir klären, was es mit diesen Container-basierten Systemen eigentlich auf sich hat und wie Docker dieses System umsetzt. Dazu sprechen wir über Virtual Machines und wie diese sich im Gegensatz zu Docker positionieren. Danach gibt Frederic uns einen Einblick in Kubernetes und was das System tut.

Keine Schaunotizen

KubeWeekly
DER wöchentliche Newsletter rund um Kubernetes.
KubeCon’18 EU
Präsentationen und Videos der KubeCon 2018 EU.
Kubernetes Forum
Für alle, die mal was diskutieren wollen (zum Thema Kubernetes).

Flattr this!

Revision 344: ReactPHP

17. Juni 2018 | Kommentare deaktiviert für Revision 344: ReactPHP

Hans und Peter fragten in dieser Revision Christian Lück (Web, Github, Twitter), seines Zeichens einer der Maintainer von React PHP, zu seinem Lieblingsthema aus.

Schaunotizen

[00:00:43] ReactPHP
ReactPHP ist ein Open-Source-Projekt, das aus Node.js bekannte Konzepte (v.a. asynchrones IO) für PHP umsetzt. Ein Use Case hierfür wäre alles, was mit Kommunikation und Datenströmen zu tun hat, für 0815-Webseiten eignet sich ReactPHP nicht so sehr (und es würde bei traditionellen Hostern auch nicht ohne weiteres funktionieren). Und so quatschten wir über Streaming-APIs, Event Loops, Streams, Promises, synchrone und asynchrone Funktionen in PHP …

Flattr this!

Revision 343: Neue Features für JavaScript

15. Juni 2018 | 1 Kommentar

Inspiriert von einem vergleichsweise dünnen Artikel über ein paar unspektakuläre JS-Neuerungen diskutierten Schepp, Hans, Stefan und Peter ihre persönlichen Favoriten in der JS-Feature-Pipeline.

Schaunotizen

[00:00:12] Kommende JavaScript-Features
Wir bespechen sowohl kommende Features die wir gut finden als auch einige, die uns nicht zusagen. Im einzelnen kommen zur Sprache:

Flattr this!

Revision 342: Was gibt es Neues in Laravel?

13. Juni 2018 | Kommentare deaktiviert für Revision 342: Was gibt es Neues in Laravel?

Nachdem wir in Revision 147 schon einmal über das PHP Framework Laravel gesprochen haben, dachten wir uns, es sei langsam mal wieder Zeit für eine Auffrischung.

Deshalb ist in dieser Revision Johannes Pichler unser Gast und wir sprechen gemeinsam über die Neuerungen und technischen Gegebenheiten von Laravel.

Schaunotizen

[00:02:00] Laravel

Johannes erklärt, was es seit der Revision 147 alles Neues zum Thema Laravel gibt. Wir sprechen über Bootstrapping, Facades, Collections, Events, Queues und vieles mehr.

Anhand eines praktischen Beispiels hangeln wir uns an einer Umsetzung einer Applikation entlang:

  • REST Schnittstelle fürs Frontend
  • Datenhaltung in DB mit Produkten, User, Metadaten
  • User Daten kommen von Schnittstelle und können gecacht werden
  • Übergeben von Daten an Payment Schnittstelle

Darüber hinaus sprechen wir über die Möglichkeiten, Laravel fürs Frontend einzusetzen.

Weitere Links:

[00:55:14] Keine Schaunotizen

Laravel Docs
Viele gute Videos zum Thema Laravel und rund ums Thema. Ideal für jeden Einsteiger und auch Fortgeschrittene.
Laracasts
Viele gute Videos zum Thema Laravel und rund ums Thema. Ideal für jeden Einsteiger und auch Fortgeschrittene.

Flattr this!