Fish Shell- the missing config

After a long time using usual the Mac terminal I came to understanding that more advanced tool is needed for many common aspects of daily work.

For example: some commands autosuggestions which will remember your previous commands and be smart enough to repeat them depending on a situation. Another requirement from a UI-lover part of my soul- good syntax highlighting.

The best, if such tool wouldn’t require much time for setup and configuration to start working out of the box.

After some research I settled on 2 options: fish shell and Z shell (zsh). Either are worth and have their advantages/disadvantages.

I decided to try Fish Shell as one of my biggest requirements installation without need of long configuration. It’s really something Fish was designed for.

...

Native CSS Scroll Snap Points

Scrolling effects are increasingly popular these days.

Scroll snapping is used widely for a better separation of the provided content (vertical full height pages) or, for example, to emulate galleries behavior.

There are many popular plugins (fullPage.js, jQuery.panelSnap, jQuery Scrollify etc.) which provide such functionality.

Can you imagine how easy would be creating such effects using CSS only?

Meet the CSS Scroll Snap Points specification!

Demo

...

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 😉 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

...