Working Draft

Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNewsTechnologyEducationHow ToTech News
Download on the App Store

Working Draft episodes

  • Revision 310: Service Worker – Bericht aus der Praxis
    Weil Schepp sich in letzter Zeit auch mit Service Workern beschäftigt hat, und weil sowohl Microsoft als auch Apple an ihnen arbeiten, ließen Hans und Anselm sich von ihm ein paar Erfahrungen aus der Praxis berichten.
    Schaunotizen
    [00:00:14] Service Worker
    Schepp berichtete, wir es Service Worker in erster Linie zur Steigerung der Ladezeiten, wie auch zur Offlinifizierung einsetzt. Nicht ohne sich dabei in einem asynchronen Script-Dschungel zu verstricken, dem man am besten mit async/await-Konstrukten entgegentritt. Hilfreich beim Einarbeiten in das Thema sind verschiedene Online-Tutorials, Howtos und Tools, als da wären:
    Das Service Worker Cookbook
    Lighthouse (auch als CLI, mit mehr Freiheiten)
    sonar
    PWA Builder
    Die Service Worker Toolbox und ihre verschiedenen Cache-Strategien
    Alexander Pope: ServiceWorkers Outbreak: index-sw-9a4c43b4b47781ca619eaaf5ac1db.js | JSConf EU 2017
    [00:31:07] Keine Schaunotizen
    You’re Offline
    Max Böck beschäftigt sich als einer von wenigen mit der Frage, wie eine UI reagieren sollte, wenn man offline geht.
    How many users resize their browser?
    Zitat: „TL;DR: 2-3% of users resize their browser, and you should care.“
    Performance and Resilience: Stress-Testing Third Parties
    Harry Roberts erklärt, wie man die Auswirkungen von 3rd Party Scripten auf die eigene Webseite analysiert und quantifiziert, und wie man die eigene Seite gegen Ausfälle bei externen Anbietern abhärtet.
    36 min
  • Revision 309: Kein Thema

    Themen? Wer braucht denn schon Themen!

    Schaunotizen
    [00:00:20] Kein Thema
    Stefan, Schepp und (vor allem) Peter geben sich der freien Webtech-Assoziation hin und fordern allerlei. Unter anderem wünschen wir uns Ersatz für allerlei etablierte Tools, DOM-Diffing jenseits des Main-Threads und vieles andere. Zur Sprache kommen außerdem die ausgetüftelten Performance-Optimierungen von Lo-Dash

    Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

    1 hr 3 min
  • Revision 309: Kein Thema
    Themen? Wer braucht denn schon Themen!
    Schaunotizen
    [00:00:20] Kein Thema
    Stefan, Schepp und (vor allem) Peter geben sich der freien Webtech-Assoziation hin und fordern allerlei. Unter anderem wünschen wir uns Ersatz für allerlei etablierte Tools, DOM-Diffing jenseits des Main-Threads und vieles andere. Zur Sprache kommen außerdem die ausgetüftelten Performance-Optimierungen von Lo-Dash
    1 hr 3 min
  • Revision 308: CSS mit Sven Wolfermann

    Von CSS-Guru Sven Wolfermann (Webseite, Twitter) ließen sich Hans und Peter erzählen, was denn modernes CSS so alles zu leisten im Stande ist.

    Schaunotizen
    [00:00:57] CSS-Features, die man heutzutage verwenden muss
    Zu den Must-Haves im Jahr 2017 gehören ganz klar Flexbox, calc() und rem – wer hier noch zu den Oldschool-Alternativen Float-Layout, Kopfrechnen und em zurückgreifen will, braucht dafür sehr gute Gründe. Ebenfalls mittlerweile zu 100% im Browser-Mainstream angekommen sind background-position mit vier Werten, currentColor (v.a. zum Styling von SVG-Icons), user-select (noch mit Vendor-Prefix) und die noch immer völlig unterbewerteten CSS-Counter.
    [00:23:40] Features die man Real-Life verwenden kann
    Neben den gut unterstützten Viewport-Units vw/vh/vmin/vmax sind auch die weniger weit verbreiten Font-Detail-Properties font-feature-settings, font-stretch, font-size-adjust, font-variant-alternates und font-kerning brauchbar, denn wenn die mal nicht funtkionieren fällt es kaum jemandem auf. overflow-wrap als Ergänzung zu hyphens ist ebenso weit verbreitet wie Unicode Range, Writing Mode, Custom Properties, Feature Queries (@supports), Object-Fit und position:sticky. Auch einige wenige Features aus Media Queries Level 4 funktionieren in modernen Browsern bereits.
    [01:03:18] Zukunftsaussichten und Wünsche
    Neben dem frommen Wunsch, dass sich allerlei bekannte Features möglichst schnell durchsetzen mögen (Grid, Shapes, Blend-Modes, filter) ist Sven besonders scharf auf font-display und line-height-step. Beim Styling von Inputs gibt es Fortschritte, aber auch da sehen wir noch Luft nach oben. Letzter Wunsch: die color()-Funktion möge sich zeitnah durchsetzen!

    Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

    1 hr 25 min
  • Revision 308: CSS mit Sven Wolfermann
    Von CSS-Guru Sven Wolfermann (Webseite, Twitter) ließen sich Hans und Peter erzählen, was denn modernes CSS so alles zu leisten im Stande ist.
    Schaunotizen
    [00:00:57] CSS-Features, die man heutzutage verwenden muss
    Zu den Must-Haves im Jahr 2017 gehören ganz klar Flexbox, calc() und rem – wer hier noch zu den Oldschool-Alternativen Float-Layout, Kopfrechnen und em zurückgreifen will, braucht dafür sehr gute Gründe. Ebenfalls mittlerweile zu 100% im Browser-Mainstream angekommen sind background-position mit vier Werten, currentColor (v.a. zum Styling von SVG-Icons), user-select (noch mit Vendor-Prefix) und die noch immer völlig unterbewerteten CSS-Counter.
    [00:23:40] Features die man Real-Life verwenden kann
    Neben den gut unterstützten Viewport-Units vw/vh/vmin/vmax sind auch die weniger weit verbreiten Font-Detail-Properties font-feature-settings, font-stretch, font-size-adjust, font-variant-alternates und font-kerning brauchbar, denn wenn die mal nicht funtkionieren fällt es kaum jemandem auf. overflow-wrap als Ergänzung zu hyphens ist ebenso weit verbreitet wie Unicode Range, Writing Mode, Custom Properties, Feature Queries (@supports), Object-Fit und position:sticky. Auch einige wenige Features aus Media Queries Level 4 funktionieren in modernen Browsern bereits.
    [01:03:18] Zukunftsaussichten und Wünsche
    Neben dem frommen Wunsch, dass sich allerlei bekannte Features möglichst schnell durchsetzen mögen (Grid, Shapes, Blend-Modes, filter) ist Sven besonders scharf auf font-display und line-height-step. Beim Styling von Inputs gibt es Fortschritte, aber auch da sehen wir noch Luft nach oben. Letzter Wunsch: die color()-Funktion möge sich zeitnah durchsetzen!
    1 hr 25 min
  • Revison 308: CSS mit Sven Wolfermann
    Von CSS-Guru Sven Wolfermann (Webseite, Twitter) ließen sich Hans und Peter erzählen, was denn modernes CSS so alles zu leisten im Stande ist.
    Schaunotizen
    [00:00:57] CSS-Features, die man heutzutage verwenden muss
    Zu den Must-Haves im Jahr 2017 gehören ganz klar Flexbox, calc() und rem – wer hier noch zu den Oldschool-Alternativen Float-Layout, Kopfrechnen und em zurückgreifen will, braucht dafür sehr gute Gründe. Ebenfalls mittlerweile zu 100% im Browser-Mainstream angekommen sind background-position mit vier Werten, currentColor (v.a. zum Styling von SVG-Icons), user-select (noch mit Vendor-Prefix) und die noch immer völlig unterbewerteten CSS-Counter.
    [00:23:40] Features die man Real-Life verwenden kann
    Neben den gut unterstützten Viewport-Units vw/vh/vmin/vmax sind auch die weniger weit verbreiten Font-Detail-Properties font-feature-settings, font-stretch, font-size-adjust, font-variant-alternates und font-kerning brauchbar, denn wenn die mal nicht funtkionieren fällt es kaum jemandem auf. overflow-wrap als Ergänzung zu hyphens ist ebenso weit verbreitet wie Unicode Range, Writing Mode, Custom Properties, Feature Queries (@supports), Object-Fit und position:sticky. Auch einige wenige Features aus Media Queries Level 4 funktionieren in modernen Browsern bereits.
    [01:03:18] Zukunftsaussichten und Wünsche
    Neben dem frommen Wunsch, dass sich allerlei bekannte Features möglichst schnell durchsetzen mögen (Grid, Shapes, Blend-Modes, filter) ist Sven besonders scharf auf font-display und line-height-step. Beim Styling von Inputs gibt es Fortschritte, aber auch da sehen wir noch Luft nach oben. Letzter Wunsch: die color()-Funktion möge sich zeitnah durchsetzen!
    1 hr 25 min
  • Revision 307: HEIF, Bildformate und -optimierung

    Hans und Anselm quatschen in bestem Wissen und doch einiger Ausführlichkeit über Bildformate und Bildoptimierung auf Webseiten und geben wertvolle Tipps für Webentwickler und Designer, um bessere Bildqualität bei geringer Dateigröße auszuliefern. Alles mit praktischen Tipps und nicht nur Theorie.

    Schaunotizen
    [00:00:13] Bildformate und -optimierung
    Angesichts der Tatsache, dass Apple im Herbst mit HEIF ein ganz neues Bildformat an die Massen bringen wird, sehen wir uns gewillt, noch einmal für fast alle gängigen Probleme und Herausforderungen im Alltag des Webentwicklers und Designers Lösungen zu finden und Empfehlungen zu geben. Wir sprechen über Barrierefreiheit, Suchmaschinenoptimierung, Bildoptimierung auf dem eigenen Rechner oder dem Server und generelle Workflows und Ideen, um auch Kunden mitzugeben, wie Bilder optimiert werden können.
    [00:52:32] Keine Schaunotizen
    sonar
    sonar ist ein absolut umfangreiches, flexibles Linting-Tool für Webseiten mit Dutzenden an Anwendungsszenarien.

    Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

    57 min
  • Revision 307: HEIF, Bildformate und -optimierung
    Hans und Anselm quatschen in bestem Wissen und doch einiger Ausführlichkeit über Bildformate und Bildoptimierung auf Webseiten und geben wertvolle Tipps für Webentwickler und Designer, um bessere Bildqualität bei geringer Dateigröße auszuliefern. Alles mit praktischen Tipps und nicht nur Theorie.
    Schaunotizen
    [00:00:13] Bildformate und -optimierung
    Angesichts der Tatsache, dass Apple im Herbst mit HEIF ein ganz neues Bildformat an die Massen bringen wird, sehen wir uns gewillt, noch einmal für fast alle gängigen Probleme und Herausforderungen im Alltag des Webentwicklers und Designers Lösungen zu finden und Empfehlungen zu geben. Wir sprechen über Barrierefreiheit, Suchmaschinenoptimierung, Bildoptimierung auf dem eigenen Rechner oder dem Server und generelle Workflows und Ideen, um auch Kunden mitzugeben, wie Bilder optimiert werden können.
    [00:52:32] Keine Schaunotizen
    sonar
    sonar ist ein absolut umfangreiches, flexibles Linting-Tool für Webseiten mit Dutzenden an Anwendungsszenarien.
    57 min
  • Revision 306: Accessibility und CSS Grids

    Mit Manuel Matuzović von den Webclerks gehen wir in den Themen Accessibility und CSS Grids in ein Nachspiel und ergänzen frühere Folgen. Von der Stammpartie mit dabei: Schepp, Hans und Stefan.

    Schaunotizen
    [00:03:07] Mit einfachen Mitteln Accessibility verbessern
    Manuel gibt in seinen Artikeln und Beispielen einen guten Rundumschlag zum Thema Barrierefreiheit. Wir unterhalten uns über seine Artikel, sowie etliche weitere Quellen, die uns in Accessibility noch weiterhelfen können. Zu empfehlen sind die A11ycasts von Google, den in die Jahre gekommenen aber immer noch gültigen Eintrag im YUI Theatre (2, 3) und Heydons Inclusive Components wenns um SPAs geht. Manuel hat auf Codepen noch weitere Beispiele. Außerdem sehen wir uns den Focus Ring genauer an und lassen alte Diskussionen über das lang-Attribut erneut aufkochen, so wie damals im HTML 5 Boilerplate, Hans und Anwesende erinnern sich.
    [00:52:49] Grid auto layout
    CSS Grid ist nun auch in den Preview Versionen von Edge verfügbar und damit beinah flächendeckend. Wir schauen uns ein wichtiges Feature im Vergleich zur IE10+ Version an, nämlich Auto Layout. Und erklären damit auch gleich ein paar Grundkonzepte, basierend auf Stefans Artikel. Unser Grundsatz: Grid kann man schon gut jetzt einsetzen, vor allem wenn man nicht die ganze Magie benötigt. Für den Schuß Extra-Magie gibt es gute Fallbacks
    [01:16:18] Keine Schaunotizen
    place-items
    Zentrieren in einer CSS Shorthand. Lässt glatt die Hölle zufrieren.
    space-evenly
    Eine neue Raumverteilung für Flexbox.
    Service Workers Outbreak
    Fesches Video von der JSConf EU zum Thema Service Workers.
    Parsing JavaScript: Better lazy than eager
    Die Münchner V8 Garde wieder in bester Form: Marja Hölltä erklärt JavaScript Parsing Interna.

    Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/

    1 hr 20 min
  • Revision 306: Accessibility und CSS Grids
    Mit Manuel Matuzović von den Webclerks gehen wir in den Themen Accessibility und CSS Grids in ein Nachspiel und ergänzen frühere Folgen. Von der Stammpartie mit dabei: Schepp, Hans und Stefan.
    Schaunotizen
    [00:03:07] Mit einfachen Mitteln Accessibility verbessern
    Manuel gibt in seinen Artikeln und Beispielen einen guten Rundumschlag zum Thema Barrierefreiheit. Wir unterhalten uns über seine Artikel, sowie etliche weitere Quellen, die uns in Accessibility noch weiterhelfen können. Zu empfehlen sind die A11ycasts von Google, den in die Jahre gekommenen aber immer noch gültigen Eintrag im YUI Theatre (2, 3) und Heydons Inclusive Components wenns um SPAs geht. Manuel hat auf Codepen noch weitere Beispiele. Außerdem sehen wir uns den Focus Ring genauer an und lassen alte Diskussionen über das lang-Attribut erneut aufkochen, so wie damals im HTML 5 Boilerplate, Hans und Anwesende erinnern sich.
    [00:52:49] Grid auto layout
    CSS Grid ist nun auch in den Preview Versionen von Edge verfügbar und damit beinah flächendeckend. Wir schauen uns ein wichtiges Feature im Vergleich zur IE10+ Version an, nämlich Auto Layout. Und erklären damit auch gleich ein paar Grundkonzepte, basierend auf Stefans Artikel. Unser Grundsatz: Grid kann man schon gut jetzt einsetzen, vor allem wenn man nicht die ganze Magie benötigt. Für den Schuß Extra-Magie gibt es gute Fallbacks
    [01:16:18] Keine Schaunotizen
    place-items
    Zentrieren in einer CSS Shorthand. Lässt glatt die Hölle zufrieren.
    space-evenly
    Eine neue Raumverteilung für Flexbox.
    Service Workers Outbreak
    Fesches Video von der JSConf EU zum Thema Service Workers.
    Parsing JavaScript: Better lazy than eager
    Die Münchner V8 Garde wieder in bester Form: Marja Hölltä erklärt JavaScript Parsing Interna.
    1 hr 20 min

About Working Draft

From the publisher's feed

Working Draft ist der deutschsprachige Podcast für Frontend-Entwicklung, Webdesign und UI Engineering.

More shows like Working Draft

Bits und so by Undsoversum GmbH

Bits und so

26 Listeners

Freak Show by Metaebene Personal Media - Tim Pritlove

Freak Show

9 Listeners

AstroGeo - Geschichten aus Astronomie und Geologie by Karl Urban und Franziska Konitzer

AstroGeo - Geschichten aus Astronomie und Geologie

3 Listeners

Geschichten aus der Geschichte by Richard Hemmer und Daniel Meßner

Geschichten aus der Geschichte

177 Listeners

c’t uplink - der IT-Podcast aus Nerdistan by c’t Magazin

c’t uplink - der IT-Podcast aus Nerdistan

9 Listeners

Stay Forever - Retrogames & Technik by Stay Forever Team

Stay Forever - Retrogames & Technik

34 Listeners

Logbuch:Netzpolitik by Metaebene Personal Media - Tim Pritlove

Logbuch:Netzpolitik

5 Listeners

programmier.bar – der Podcast für App- und Webentwicklung by programmier.bar

programmier.bar – der Podcast für App- und Webentwicklung

0 Listeners

Podcasts von Tichys Einblick by Tichys Einblick

Podcasts von Tichys Einblick

21 Listeners

eat.READ.sleep. Der Podcast, der das Lesen feiert. by NDR

eat.READ.sleep. Der Podcast, der das Lesen feiert.

24 Listeners

Finanzen ganz einfach - von Saidi, Sophie & Emil by Finanztip

Finanzen ganz einfach - von Saidi, Sophie & Emil

8 Listeners

Lanz + Precht by ZDF, Markus Lanz & Richard David Precht

Lanz + Precht

325 Listeners

{ungeskriptet} - Der Meinungsfreiheit verpflichtet. by Ben Berndt

{ungeskriptet} - Der Meinungsfreiheit verpflichtet.

45 Listeners

KI-Update – ein heise-Podcast by Isabel Grünewald, heise online

KI-Update – ein heise-Podcast

9 Listeners

Engineering Kiosk by Wolfgang Gassler, Andy Grunwald

Engineering Kiosk

0 Listeners