Ivan Bogachev

Creative frontend developer



The presentation of the pyramid of adaptation

The presentation of the pyramid of adaptation

I wrote a post about my latest book. This small article is a presentation of my book about the pyramid of adaptation. I explained what it is, why I published it and why I distribute its pdf version for free.

The pyramid of adaptation

The pyramid of adaptation

As you possibly know, I have some mental problems. In particular, some my emotions were gone. I must observe other people a lot to copy their behavior and integrate myself into society. I did it for years and I got a system of human behavior in my head. I thought it’s time to make a book about it and the book has been printed. It’s called “The pyramid of adaptation” (“Пирамида адаптации” in Russian). The PDF version of the first edition will be distributed for free for non-commercial purposes.

Free PDF versions of my books

Free PDF versions of my books

Good news! My collections of pieces for children and for music school students and my flamenco guitar method are available as PDF files now. Feel free to download them.

Let's talk about writing

Let's talk about writing

Today is a special day. My first interview as an author has been published. In this conversation I and other authors are talking about writing articles on programming and other IT topics.

One background for multiple divs

One background for multiple divs

I see a lot of frontend developers which are tempted to create monstrous solutions, even if they don’t need to. I’m not sure, if it happens because a lot of people don’t know basic CSS or they think it’s cool to do everything with WebGL, but it happens too often to be a coincidence. Todays demo is pretty simple, but it can show you how to split an image between multiple divs with pure CSS.

The Pen by Ivan Bogachev (@sfi0zy).

UPD: Ana Tudor created a more complex version of this effect for images of any aspect ratio. It also has parameters for panels. It may be hard to understand its logic, but it’s really really cool.

The Pen by Ivan Bogachev (@sfi0zy).

UPD: Check out the speed coding of this example on the FreeFrontend YouTube channel:

300 pens on CodePen

300 pens on CodePen

Three years ago I switched from the C/C++ world to the front-end development. Up to this day I shared interesting examples on CodePen. Not every day, of course, but often. Several days ago their number reached 300. Looking back, I can say that it was a good time. Painting with CSS, canvas animations and WebGL shaders, SVG hacks… There are no impossible design ideas for me now. I can create everything, it’s only a matter of time. I think it’s a good idea to celebrate this anniversary. Feel free to use my pens - all of them are distributed under the MIT license.

Snowfaaall

Snowfaaall

I didn’t participate in any challenges for the programmers for a long time, but yesterday I decided to take part in the current weekly #codepenchallenge. It’s called “B and W and A”. What is the best thing to do with the letter “A”? Of course, construct snowflakes. So, I did it. This pen reminded me of those times when I created things just for fun. Anyway, this animation is nice. Check it out on CodePen!

The Pen by Ivan Bogachev (@sfi0zy).

Texture projection

Texture projection

Texture projection is the one of the most powerful tricks in WebGL. It can be used in different situations. I don’t know why I still haven’t published any pens with it. But today I corrected this mistake. Here are two demos - the first one is for the ordinary texture projection and the second one for the “sticky” projection.

The Pen by Ivan Bogachev (@sfi0zy).

The Pen by Ivan Bogachev (@sfi0zy).

Another scroll animation

Another scroll animation

Just another scroll animation. It’s based on this one, but it works in the opposite direction.

The Pen by Ivan Bogachev (@sfi0zy).

Menu concept

Menu concept

Yesterday I found a question on Habr Q&A about the menu from the old version of the URSA Major Supercluster website. Their original menu uses canvas and I wanted to create something similar, but without it. This demo is for the desktops only, but I think it’s easy to create some fallbacks for the small screens and touch screens.

The Pen by Ivan Bogachev (@sfi0zy).