Revision 411: Web Animations

02/06/20 • 59 min

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

Schaunotizen

Links

Vorherige Episode

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!

Nächste Episode

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.

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.