Ivan Bogachev

Most of young frontend developers don’t know how to use CSS animations. I know, they say that they read docs on MDN or had been practicing with “fadeIn”, “fadeOut” animations and so on. But if you give them a really complicated animation, they can’t transform it into the code. They don’t even understand how to start. Sometimes they say that it’s impossible to create one or another animation. I assume it’s because they have mental blocks which are saying what they can do with CSS and what they can’t. So, I wrote an article on habr.com to break these mental blocks. I got a number of examples from CodePen (some of them are mine, some are just popular examples from other authors) and explain the things inside them. I showed how to use CSS animations in different “impossible” cases and what methods of their creation should be inspected when your mastering your skills.

A few days ago I published a little bit provocative article about the types of programmers. It looks funny, I used comic faces and some humor, but it’s very serious, actually. I drew people’s attention to the problem of the team management when the team includes developers with different psychological profiles. The thing is that when we make wrong choices and force an employee to work with another employee with specific behavior, which contradict with the beliefs or habitual models of the behavior of the first one, the productivity of the both employees becomes greatly reduced. They work slowly, they lose their energy, they make a lot of mistakes and increase the time of the development of the product. On the other side, when we let employees with specific pairs of psychological profiles work together, their productivity grows up. I wanted to ask people to share their experience on this subject, and shared my own book about human behavior to them. Unfortunately, the audience didn’t understand the purpose of the article. But despite this, I think that this publication and the question I asked are very important. Maybe I just asked it in the wrong place…

The development of custom borders for HTML elements always was a nightmare for junior developers. The main thing is that such elements usually must be responsive, their sizes must depend on the content inside. The old-school solution with an image in the background of the element is not responsive. It works sometimes, but not always. In more complicated cases we have two opinions: use border images or draw everything with CSS gradients. I like the second one. I use it in most cases because usually the borders in my designs are not so complex. I don’t see any reason to create a lot of images for them. Anyway, I created a cute example of such border to use it in my answer to this question.

Full screen sliders with various background animations based on the standard geometries are very popular nowadays. Recently I found a question about them on Habr Q&A and I thought “why not create it?”. And I created an example of such animations with anime.js. It’s easy, but the effect looks pretty nice and contemporary.

I transformed one of my recent examples from CodePen into a small javascript library - Shaders Gallery. Feel free to use it in your projects!

How to obtain the mouse within a shader using Three.js? How to load multiple textures with promises? How to calculate ratios of everything to create full screen backgrounds with non-distorted parts? How to create amazing transitions between images in WebGL? Check out my new demos on CodePen to find the answers!

This time I shared a pen with an example of usage of the noise generator. This pen includes a sea of particles with random waves on it. The usage of such generators is a very important technique for creative frontend developers, so, despite the fact that it’s only one pen here, I think this part of shaders collection is as important as the other parts.

The show goes on! Three more examples are on CodePen now. These pens are the examples of usage of shader material with point cloud. Also, you can find a nice trick in them - I used third dimension to create 2D animations. It’s much easier than puzzle out all the math to calculate such animations in two-dimensional space.

I continue posting beautiful shaders examples to CodePen. I started with colorful ones and now the time has come for monochrome ones. They look very futuristic, and I associate them with Sci-Fi movies.

I played with vertex shaders recently and in addition to my main task I got a number of beautiful effects for default geometries in Three.js. I don’t know where I can use them in production and I made a decision to share them to CodePen. Enjoy them!