Ivan Bogachev

Creative frontend developer



Arcs and Bezier curves

Arcs and Bezier curves

Here is another demo with Bezier curves. I created it for my students as an additional example for my articles on math for UI developers.

The Pen by Ivan Bogachev (@sfi0zy).

Avatars Generator

Avatars Generator

Several years ago I created Ucavatar. It’s a simple tool, its only purpose is to create geometric patterns on a canvas for future usage as avatars. But it’s boring. I have been thinking for a while about the similar tool, but with funny faces, and now I found time for making it. Check it out on CodePen and feel free to use it in your projects.

The Pen by Ivan Bogachev (@sfi0zy).

Techno Bird

Techno Bird

In the latest article I explained how to use matrices for making 3D scenes. A couple of days later I thought it’ll be a good idea to create an additional interactive demo for my students. And there it is. I don’t know if this thing has its own name in programming or mathematics, but I call it “techno bird”. This variation of it is written in VanillaJS and GLSL and work in all modern browsers. At least it should, I haven’t tested it really. But its main purpose is to illustrate the principles from my article, so if it works in Chrome - it’s enough.

The Pen by Ivan Bogachev (@sfi0zy).

Math for UI developers 2: Matrices

Math for UI developers 2: Matrices

The second lecture on mathematics for front-end developers has been published. I explained how to make 3D scenes with our own hands, without Three.js or other heavy tools, and how to create filters for images. Hope it’ll be helpful.

Web Standards 247

Web Standards 247

I took part in the Web Standards podcast. We discussed the recent front-end news and my articles on habr.com.

Math for UI developers

Math for UI developers

I published the first lecture in the series of lectures on mathematics for UI developers. This subject is not the most important thing for our job, and a lot of programmers didn’t learn it even in school, but if you create custom projects with WebGL or animations, you need it. I don’t know when I’ll publish the rest of the articles in this series, it requires a lot of time to convert them into the text format, but I hope I complete the set in this year

Magical thinking

Magical thinking

I published an article about magical thinking in my blog on Medium. It contains my personal observations and thoughts from other people with schizotypal disorder from countries of the former USSR. The information in the article shouldn’t be generalized for all patients with the same disorder or for people outside this region, but it’s still can be useful for psychologists.

Mastering CSS animations

Mastering CSS animations

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 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 various “impossible” cases and what methods of their creation should be inspected when your mastering your skills.

16 types of programmers

16 types of programmers

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…

Borders and Gradients

Borders and Gradients

The development of custom borders for the 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 borders for one of my answers on Habr Q&A.

The Pen by Ivan Bogachev (@sfi0zy).