Woohoo! I wrote 1000 answers to questions on qna.habr.com (ex. toster.ru, the Russian alternative to StackOverflow). I don’t know, if it’s a lot or a little, but these answers helped me to learn, how to explain things in simple words, and they made me a reputation as a programmer. I think the 1000th answer is a good anniversary to celebrate!
Summer is a good time to learn something new. Especially if the all interesting places are under quarantine. Sometimes learning can be hard. It happens if you are trying to dive into a new subject without any preparation. The better idea is to learn subjects, which are connected somehow to the skills you already have. So, I created a skills map for myself. I never thought that all things I’m interested in are connected, but they are. Now I see where I have possibilities to improve myself and open new opportunities. I highly recommend to do the same thing for everyone.
Received a new badge from GitHub and figured out that I’m the Arctic Code Vault Contributor now. Wow! It’s interesting, but… Sometimes I’m ashamed of the code I wrote a year ago and now my sources will be saved for 1000 years. Oops. Anyway, the ideas and the project itself are impressive. Now I’m waiting for the same archive program for CodePen.
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.
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.