Scroll-Linked Animations with CSS Scroll-Timeline (CSS Conf Colombia)

I just finished giving a lightning talk at the wonderful CSS Conf Colombia covering Scroll-Linked Animations with CSS @scroll-timeline. Really enjoyed giving a talk again after all this time, especially with this great vibe they have going on and the afterparty in gather.town (skribbl FTW!).

You can find the slides embedded below:

Source materials for the slides are my two posts on Scroll-Linked Animations:

  1. Part 1: Intro + Basic Scroll-Linked Animations
  2. Part 2: Scroll-Linked Animations with Element-Based Offsets

I’ll try to see if I can get a hold of the recording to embed here.

Thanks to the organisers for having me, and thanks to the attendees for watching me speak. I hope you all had fun attending this talk. I know I had making it (and whilst bringing it forward) 🙂

💁‍♂️ If you are a conference or meetup organiser, don’t hesitate to contact me to come speak at your event.

~

Did this help you out? Like what you see?
Thank me with a coffee.

I don't do this for profit but a small one-time donation would surely put a smile on my face. Thanks!

☕️ Buy me a Coffee (€3)

To stay in the loop you can follow @bramus or follow @bramusblog on Twitter.

Learning from W3C MiniApps

Recently the W3C announced MiniApps:

MiniApp as a new form of mobile application, leveraging both Web technologies (especially CSS and JavaScript) as well as capabilities of native application.

I was a bit confused about them at first, and thought they were directly competing with PWAs. Thankfully Thomas Steiner chimed in, referring to a whole presentation on MiniApps he made.

Enlightening stuff. A video recording + transcript are also available.

Learning from MiniApps: Slides →
Learning from MiniApps: Video + Transcript →

When in doubt, trust the browser

Presentation by Pieter Beulque, as given at the most recent FronteersBE meetup, in which he builds a Tweet Embed using Web Components’ Custom Elements.

As a front-end developer, you’re always confronted with making choices. In this talk I cover the benefits you get for free when considering W3C standards or standard browser API’s instead of reaching for the latest framework or library.

💡 To format the time, he uses the previously covered Intl.RelativeTimeFormat API, which will be part of ES2020.

When in doubt, trust the browser →

Demystifying the future of CSS with sparkles of JS

At the recent JSConf.be conference here in Belgium, Ibe Vanmeenen gave a very nice talk introducing Houdini.

CSS as a language is at the brink of a great revolution. Once such a closed and magical language, it will open up to you and your creativity in all it's glory. CSS will become an easy to expand and polypill language, all while keeping the performance at an up-high. All hail Houdini!

The talk itself has a very nice build-up, and Ibe’s a great speaker. Highly recommended!

Demystifying the future of CSS with sparkles of JS →

V8 internals for JavaScript developers: Arrays

This presentation demonstrates how learning just a little bit about JavaScript engine internals can help you improve the run-time performance of your JavaScript code — not just in V8 specifically, but across all JavaScript engines!

A written version is also available.

Tame your Service Worker before your Progressive Web App go into the wild

Slidedeck by Maxim Salnikov:

With great power comes great responsibility – trivially, but true: I’ll show the examples of how easy the “Progressive” part of the PWA term could become “Regressive”, how to fix this, and how to test our Service Worker before deploying your app. First, we’ll go through the well-known PWA functionality (App Shell, Offline Cache, Push) with focusing on the pitfalls we could easily get into, and how to avoid these. Next, I’ll expand your horizons with the new PWA features, like Foreign fetch, Periodic sync, Navigation Preloads. And again – “handle with care”. I’ll share the points we have to pay attention to, as well as best practices.