Serg Hospodarets Blog

Serg Hospodarets blog

Front-End frontiers
Serg Hospodarets
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.

...
Read full post  >
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

...
Read full post  >
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
...
Read full post  >