Ivan Bogachev

I created yet another CSS loader. And one more. I can’t stop. I got the idea, experimented with it and asked myself - maybe send it to CodePen? And yes, I created my own collection of loaders. Some of them are pretty heavy, they are more like concepts for inspiration, but some are CSS-only and can be used in production.

At the beginning of my programmer’s career, I created a program for displaying fractals. I was very slow, of course. As I remember, it used WinApi to draw an image pixel by pixel in the window. But the fractals themselves made an impression on me. And it was the first “real” program I made. It gave me motivation to continue studying. Recently, I have a thought, that it’ll be a good idea to show my students the same program, but written in javascript and GLSL. So I created a couple of demos - one for the standard Mandelbrot set and another for the animated Julia set. I hope they’ll help my students too.

Some time ago I posted an example of the background image for multiple elements. This time I used the same ideas to create a nice concept of animation for two images. Similar effects usually use WebGL, and I wanted to check if it’s possible to recreate them with CSS. I used 25 elements, animating at the same time, but it’s still has a good performance. I didn’t expect this, really. It’s a good point to start a new series of CSS experiments. Follow me on CodePen to not miss them!

I received an interesting question recently. Another developer asked about horizontal scroll and different effects attached to it. He shows me a video concept of some gallery and I thought that it’s worth it to create an example of something similar. So I did it. It looks like Locomotive Scroll works strange in the CodePen`s iframes, sometimes it stucks, but it’s expected. Iframes and custom scroll have always been a bad combination. But the whole demo is pretty nice in my opinion. Feel free to open it on CodePen and use it for your experiments too.

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. It’s simple, but it looks so nice. I can’t stop myself from sharing it.

Last months I spent a lot of time at home. It’s not bad though, but my research slowed down. I need to freshen up. But we have a big problem nowadays - all interesting places are still closed or restricted, and it looks like the lockdown will be prolonged for months. I find a way out - photography. It’s a reason for me to go for a walk. I don’t need to wear a mask everywhere on the street, and it helps to get new impressions. Also, I started to fill up my Instagram profile with a new photos from my small “travels” around Moscow and I want to share them with you.

I like to work with creative designers. I like to convert their ideas to HTML and CSS. I think that every professional front-end developer must be able to do it. It’s our job after all. But I look at questions on Habr Q&A and I see people asking about these designs almost every day. I expect to see beginners, the programmers with a year of experience, but I don’t expect these questions from the seniors. But they are there. And a lot of comments like “it’s impossible to create this thing, you should just fire your designer”. I think I’ll write a big article with lifehacks for such tasks in the future, but not now. This time I created just the one example of the responsive custom border. It looks simple, but it’s not. You’ll find the SVG filter for creating a border with padding for the shape of free form in the sources.

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.

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. Check out this demo on CodePen and follow me to not miss the future updates!

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.