100 episodes

Der wöchentliche News-Podcast für Webdesigner und -entwickler.
Supported uns bei Patreon: https://patreon.com/workingdraft

Working Draft » Podcast Feed Peter Kröner, Hans Christian Reinl, Rodney Rehm, Stefan Baumgartner, Kahlil Lechelt und Christian Schaefer

    • Technology

Der wöchentliche News-Podcast für Webdesigner und -entwickler.
Supported uns bei Patreon: https://patreon.com/workingdraft

    Revision 412: Veröffentlichung von JS-Libraries

    Revision 412: Veröffentlichung von JS-Libraries

    Hans und Peter hatten diesmal das Vergnügen, sich mit dem langjährigen Podcast-Hörer Tobias Barth (freischaffender Frontend- und gelegentlicher Node-Entwickler, zu finden in Web, Twitter und auf Dev.to) über die Prozesse und Tools rund um die Veröffentlichung von JavaScript-Paketen austauschen zu dürfen.

    .ionos a.message_link {
    margin: 0 0 1rem; width: 100%;
    border-bottom: 0;
    display: block;
    }
    .ionos a.message_link img {
    margin: 0 auto;
    }


    Unser Sponsor

    Hier kannst du mehr über IONOS erfahren.

    Schaunotizen

    [00:02:45] Veröffentlichung von Libraries

    Die Perspektiven eines kleinen Startups (Peter und Hans mit Warhol.io) und Tobias (MediaMarkt/Saturn) bzgl. Library-Entwicklung und -Veröffentlichung prallen aufeinander! Neben offensichtlichen Fragen wie Dependencies vs. Selbstschreiben (vgl. Revision 397 zu Preact) geht auch um das Handwerk des NPM-Paket-Veröffentlichens mit Semver (bevorzugt mit automatischen Versionsnummern via standard-version und/oder semantic-release) und dem publish-Kommando. Die kniffligen Entscheidungen im Library-Build-Prozess nehmen besonderes Gewicht ein: wie genau passen TypeScript, Babel, Rollup (vgl. Revision 405), Webpack und ähnliche Tools in den Prozess? Was bewirken die Felder main, browser, module und types in der package.json? Am Ende dürfen Verweise auf ein paar Alltags-Helfer nicht fehlen, allen voran das Link-Kommendo (gibt es für NPM wie auch für yarn), die Peer Dependencies, das Dedupe-Kommando und allgemeine Tools wie Prettier, ESLint, Travis, Circle CI, Greenkeeper und Dependabot.

    • 1 hr 3 min
    Revision 411: Web Animations

    Revision 411: Web Animations

    Schepp und Stefan bekommen heute Verstärkung von Lisi Linhart, ihres Zeichens Webentwicklerin und Dozentin an der FH Salzburg, die uns einen ausführlichen und genauen Rundumschlag in Sachen Web Animation gibt.
    Schaunotizen

    [00:00:27] Web Animations
    Die Wege im Web zu animieren sind vielseitig. Wir beginnen unsere Reise bei den Einstiegsdrogen wie CSS Transitions und Animations, die zwar limitiert, aber doch für viele Dinge schön ausreichend sind. Den weiteren Weg gehen wir zur Web Animations API, sehr ählich zu CSS Animations, aber in JavaScript und deshalb über den property-Animationen erhaben. Wem das nicht ausreicht, kann sich in die weite Welt der SVG und Canvas Animationen trauen, und zahlreiche Tools wie Greensock und ähnliches ausprobieren. Zum Abschluß gehen wir in Richtung Animations-Tools, Export-Möglichkeiten, das CSS Houdini Animation Worklet und geben zahlreiche Resourcen und Erfahrungsberichte. Links gibt’s übrigens eine Menge, deswegen bitte schnell in die nächste Sektion um den zahlreichen Namen zu folgen!

    Links

    Pratical Web Animation – Script’20
    Lisis Vortrag auf der Script’19. Ein prima Überblick mit zahlreichen Beispielen
    Awesome Web Animation
    Das Infoportal für alle, die animieren wollen. Bücher, Artikel, Tutorials, Tools
    Keyframe.rs
    Livestreams von Animationsexperten
    CSS Animations vs Web Animations API
    Wann das eine, wann das andere?
    GSAP Codepen Collection
    Zahlreiche Pens zu dem auf Greensock basierten Animations-Plugin
    GSAP 3
    Was kann GSAP 3 eigentlich?
    Houdini’s Animation Worklet
    Detaillierte Beschreibung auf Googles Webdeveloper Info-Seiten
    Tween.js
    Tweening in JavaScript
    Fabric.js
    Eine Zeichenbibliothek für Canvas
    Pixel.js
    Eine Game Engine für Canvas
    Phaser
    Noch ein Gaming Framework
    Scroll-linked Animation
    Ein Proposal zur Animations-API die auf Scroll Offsets reagiert
    Spirit
    Ein Timeline-Tool für Web Animationen
    Tumult Hype
    Noch ein Animations-Tool
    Lottie
    After Effect Animationen exportieren, mobile und im Web verwenden!
    Uni Salzburg auf der OTS Conf
    Lisis Fachhochschule gut präsentiert
    Der Bauer
    Vor 20 Jahren im Browser, jetzt als Artefakt auf YouTube
    Barcamp: The next Wek
    2x im Jahr ein fesches, web-affines Barcamp kurz vor dem wundervollen Salzburg

    • 59 min
    Revision 410: Cliqz Browser and Search Engine

    Revision 410: Cliqz Browser and Search Engine

    In München steht ein Softwarehaus — Eins, Zwei, Browser!
    Die Bringen einen Browser raus — Eins, Zwei, Browser
    Mit einer Suchmaschine dran — Eins, Zwei, Browser
    Die alles kann, was Google kann
    Doch an die Daten kommt kein andrer ran
    Der Browser ist auch superschnell
    Nur wie ist das Geschäftsmodell?

    For all our English listeners (and everybody else who is scratching their head due to their lack of knowledge in Bavarian folklore — who could blame you?!): Welcome to the most recent revision of Working Draft, where Krzysztof Modras is telling us how to build your own browser based on Firefox. He also answers the most burning question: why does Europe need its own search engine.
    Show Notes

    [00:01:00] Cliqz
    Cliqz is a browser with an integrated search engine. It shall deliver the same user experience as Google’s ecosystem, but with a strong focus on privacy. Cliqz is based on Firefox, and Krzysztof is telling us how to contribute to the Firefox project, how to write your own UI using web technologies, and what challenges you have to face. We also take a good deal to talk about privacy. Why a European privacy-first search engine matters and what trackers and third-party spyware can do to you. We also referenced the iOS version of their browser as well as their very thorough and interesting to read tech blog. Enjoy!

    • 1 hr 5 min
    Revision 409: Style Containment und Display Lock API

    Revision 409: Style Containment und Display Lock API

    Leise rendert der Schnee bei dieser in der Vorweihnachtszeit aufgenommenen Revision … und damit er das auch halbwegs zügig macht, sprechen Schepp und Peter über zwei Features, die Webentwicklern bessere Kontrolle über das Browser-Rendering geben.

    a.message_link {
    float: right;
    margin: 1rem 2rem; width: 100%; width: 300px;
    border-bottom: 0;
    }



    Unser Sponsor

    ABOUT YOU ist eines der am schnellsten wachsenden E-Commerce-Unternehmen in Europa mit Hauptsitz in Hamburg. Derzeit ist der Fashion Online Shop in zehn europäischen Märkten vertreten. Die Plattform verarbeitet täglich mehr als 300 Millionen API-Aufrufe und hat insgesamt 15 Millionen aktive Nutzer.
    Da das Unternehmen weiterhin schnell wächst, ist ABOUT YOU immer auf der Suche nach neuen, motivierten Talenten. Derzeit sind z.B. Full Stack Developer, Frontend Developer, Dart / Flutter Developer, Quality Assurance Engineer, Project Manager und andere aufregende Führungspositionen frei.
    Hört sich spannend an? Bewirb Dich jetzt unter aboutyou.com/bewerben.


    Schaunotizen

    [00:01:40] CSS Containment

    CSS Containment ist mittlerweile ein solider Webstandard (fast jedenfalls) sowie vergleichsweise gut unterstützt und vielerorts gut erklärt, aber eine Auffrischung lohnt sich. Schepp und Peter sprechen über die contain-Eigenschaft und ihre diversen Werte, display:contents (Draft, CanIUse) und position:sticky
    [00:25:12] Display Locking

    Es gibt einen Entwurf für eine API, die viele Performance-Use-Cases für Intersection Observers abdeckt und dabei noch besser ist! Wir vergleichen das vorgeschlagene rendersubtree-Attribut mit display: none (und klassischem Lazy Loading) sowie Origin Trials mit Vendor Prefixes. Am Ende phantasieren wir ein wenig über einen Polyfill für rendersubtree und eine Layout-Performance-Test-Seite im Stile von JSPerf.

    [00:52:44] Keine Schaunotizen

    Videos der Performance.now()
    Schepp war auf der jüngsten Installation der Web-Performance-Konferenz und empfiehlt zahlreiche Talks.

    • 55 min
    Revision 408: Ember.js

    Revision 408: Ember.js

    Hans und Peter lassen sich von Jessica Jordan (Web, Twitter), ihres Zeichens Software-Engineer bei simplabs und Autorin für The Ember Times alles zum unterschätzen JavaScript-Framework Ember.js erzählen!

    .ionos a.message_link {
    margin: 0 0 1rem; width: 100%;
    border-bottom: 0;
    display: block;
    }
    .ionos a.message_link img {
    margin: 0 auto;
    }


    Unser Sponsor

    Hier kannst du mehr über IONOS erfahren.

    Schaunotizen

    [00:00:00] Ember.js
    Wir lernen wirklich alles über Ember, das sich als ein Framework für komplexe Web Apps beschreiben lässt, bei dem vieles Out of the Box mitgeliefert wird. Von den Anfängen (Talk zu Embers jüngerer Geschichte von Katie Gengler) mit Tilde, Yehuda Katz und Tom Dale bis hin zur jüngsten Octane Editon des Framworks lassen wir nichts aus. Es geht um Entwicklung, Community, Dokumentation, das Ember Tearning Team, The Ember Times, Core-Features und Third-Party-Addons (wie ember-concurrency, EmberCLI Mirage und ember-cli-materialize). Außerdem geht es natürlich um technische Grundkonzepte wie die Struktur einer Ember-App, Routes, die Umsetzung des MVC-Konzepts, Ember Data, Scaffolding, Embers Template-Sprache Handlebars (speziell Helpers und die neue Angle Bracket Syntax nebst Polyfill) Glimmer.js und TypeScript-Support. Am Ende dürfen die Veranstaltungshinweise auf die EmberConf, das EmberFest und das Ember-Meetup Berlin nicht fehlen.

    • 1 hr 19 min
    Revision 407: Micro Frontends mit Project Mosaic

    Revision 407: Micro Frontends mit Project Mosaic

    Nachdem alle Co-Hosts der Reihe nach, aufgrund von verschiedenen dringenden Gründen, ausfielen, interviewte Kahlil im Alleingang Vanessa Böhnert zum Thema Micro Frontends.

    a.message_link {
    float: right;
    margin: 1rem 2rem; width: 100%; width: 400px;
    border-bottom: 0;
    }



    Unser Sponsor

    Storyblok is a Headless Content Management System that provides developers with all the flexibility they need to build reliable and fast websites whilst giving content creators with no coding skills the ability to edit content independently of the developer. Thanks to the headless approach your content can not only be used for one website, which is the case if you use a monolithic CMS like WordPress. Storyblok empowers you to use your content on iOS and Android apps, as well as any other platform of choice (IoT, smartwatch, AR/VR) through Application Programming Interfaces (“APIs”).
    You can read more about Storyblok and use their free plan, reach them on Twitter or in their live chat.


    Schaunotizen

    [00:03:06] Project Mosaic, aka Mosaic 9 & Micro-Frontends
    Vanessa erzählt uns kurz was sie mit Mosaic 9 zu tun hat. Danach geht es erstmal darum was Micro-Frontends überhaupt sind, in welchem Fall man diese einsetzen möchte und wie man das machen kann. Ein Mosaic 9 Crash-Kurs kommt dabei natürlich nicht zu kurz. Vanessa erklärt uns, wie sie die verschiedenen Software Projekte aus denen Mosaic 9 besteht, selber bei der Arbeit einsetzt.

    • 1 hr 29 min

Top Podcasts In Technology

Listeners Also Subscribed To