Convert a Chrome Timeline data to a GIF (video)

Recently the ability to record a Filmstrip was added to Chrome.

Now it’s available in Canary and Dev Channel versions of the Chrome Browser as DevTools experiment and is supposed to be enabled by default in one of the next versions of Chrome.

To enable it:

  • Open chrome://flags/#enable-devtools-experiments page in Chrome and activate the “Enable Developer Tools experiments” flag
  • Reload Chrome
  • Open the DevTools Settings
  • Select the “Experiments” tab
  • Press “SHIFT” button 6 times :wink: to show hidden DevTools experiments
  • Check the “Filmstrip in Network and Timeline Panel” checkbox
  • Reload (open/close) the DevTools
  • In the “Timeline” check the “Screenshots” checkbox

manual

After that during the timeline recording screenshots would be automatically included and shown in the DevTools.

That functionality is really useful for step-by-step debugging any UI effects, animations, changes during the debug process and many other purposes.

Only one missed functionality for me so far- ability to save a recording as video/GIF.

There are many reasons to have such functionality:

  • Making quick video demos (effects, functionality etc.);
  • Small tutorials (click button 1, then 2…)
  • To make a video of existing problems. E.g. tester want to raise a bug and add a video. Usually some third party apps are used but now ability to use Chrome instead of them sounds really nice;

So I created a project where anyone can convert a saved Chrome Timeline Data to a GIF (video):

Demo

Check the code on Github

...

Passing data from Sass to JavaScript: sass-to-js

The idea

Once I needed to add component to show controls like the following: control

The number of sections in it had to be configurable. To do it usually you can add two config variables: one in Sass, one in JavaScript.

But I wanted to have config only in one place and reuse it in the second. That’s how the idea to pass data from Sass to JavaScript came to me.

Demo

...