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.

Sponsoren gesucht!

Als Podcast versuchen wir die Qualität der Aufnahmen hoch zu halten. Dafür verwenden wir Tools, die nicht kostenlos sind. Auch unser Aufnahme-Equipment kostet Geld.

Mit rund 15.000 Downloads pro Folge im Schnitt haben wir Herausforderungen im Hosting zu bewältigen, vor allem der Traffic ist recht hoch.

Um diese Kosten decken zu können, suchen wir Sponsoren. Wenn ihr unseren Podcast gut findest, sprecht mit euren Chefs. Bei Interesse, kontaktiert uns per E-Mail: sponsoring@workingdraft.de.

Revision 357: Der JAMStack

18. September 2018 | Keine 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 | 3 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 | 1 Kommentar

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

Revision 354: Babel-Presets und Konferenzen

29. August 2018 | 3 Kommentare

Hans, Peter und Stefan erkunden Details von Babels Zukunftsplanung und bewerben in dreister Form Konferenzen, Konferenz-Ersatzveranstaltungen und Workshops.

Schaunotizen

[00:00:10] Removing Babel’s Stage Presets
Babel plant, Presets (gemäß der Stages des TC39-Prozesses gebündelte Implementierungen neuer ESScript-Features) abzuschaffen. Bei der Diskussion dieser Nachricht kommt heraus, dass wir kaum Presets benutzen, sondern eher Einzelfeatures wie Object Spread und Class Properties nachrüsten. Wir sprechen über unsere Transpiler-Nutzung im Wandel der Zeit, Babel als Experimentier-Plattform für z.B. den Pipeline Operator, über Smoosh Gate und Modul-Bundler wie Parcel und Webpack. Im übrigen sind wir der Auffassung, dass wir alle dem Babel-Macher Henry Zhu für eine harte Arbeit ein mehr Geldeinheiten rüberschieben sollten!

[00:37:19] Keine Schaunotizen

NightlyGrill
Das beste Event, dass man anstelle einer Konferenz besuchen könnte.
OAuth2 Workshop am 18.10.
Lasst euch in Nürnberg von Aaron Parecki erleuchten!
Webkongress Erlangen
Gemütliche Konferenz im gemütlichen Erlangen.

Flattr this!

Revision 353: Kommunikation in (agilen) Teams

20. August 2018 | 1 Kommentar

In dieser Revision widmen wir uns mal einem Soft-Skill und reden über Herausforderungen bei der Kommunikation im Team und darüber, wie gute Kommunikation aussehen kann. Als Fachmann für diese Themen haben wir uns Coder & Kommunikations-Coach Marcel Koch (@_mknet_) in die Sendung geholt.

Schaunotizen

[00:00:50] Kommunikation im Team
Während unserer Unterhaltung erwähnten wir folgende Publikationen:

[01:11:42] Keine Schaunotizen

transform
Ein Online-Transformationstool zur Umwandlung von Daten in zahlreiche Formate
belly
„Git shortcuts for common tasks“

Flattr this!

Revision 352: TypeScript 3.0

16. August 2018 | Keine Kommentare

Hans, Peter und Stefan nehmen den aktuellen Release von TypeScript 3.0 her um über ihre Erfahrungen mit dem Thema zu plaudern. Querbeet, von einsteigerfreundlich bis zu unverschämt fortgeschritten.

Schaunotizen

[00:00:17] TypeScript 3.0
Die dritte Version von TypeScript ist da, und bringt gar nicht mal so viele Features mit sich. Das liegt zum einen daran, dass TypeScript bewusst und richtig auf semantische Versionierung pfeifft (jedes Release ist ein breaking change) und lieber durchzählt. So kann man auch einfach mal einen „unknown“ Typ reinschmuggeln oder die React Unterstützung verbessern. In unserer Elaboration reden wir über mapped types, conditional types und wie union types sowieso alles einfacher machen. Nach einem kurzen Ausflug zu ParcelJS, JSX und eierlegenden Wollmilchtools schließen wir auch ab mit einer kleinen Diskussion zu Typsystemen im Allgemeinen, und Type Aliases vs Interfaces im Konkreten. Zuviel des Guten? Wir revisionieren gerne noch einmal Schritt für Schritt.

Keine Schaunotizen

Type Zoo
Fesche Typoperatoren im Stile von Readonly, Partial und Pick.
Typelevel TS
Type level Programmmierung.
Typical
Experimentelle Typ primitive.
TypeScript oddities
Ein Vortrag von Stefan zu TypeScript und Schrägheiten, die auftreten können.

Flattr this!

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 | Keine Kommentare

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!