placeholder Collection of pieces preview
Published on
placeholder The pyramid of adaptation - post preview

As you possibly know, I have 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 in Russian will be distributed for free for non-commercial purposes and you can download it here.

Read more

Winter is coming...

It's time to create a Christmas tree with Three.js!

Check out my article about it (in Russian) and the source code!

Published on
placeholder One background for multiple divs - post preview

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.

Read more
Published on
placeholder Naming of the matrices in three.js - post preview

Most of the books on computer graphics include a scheme of the OpenGL/WebGL transformation pipeline. There are four fundamental transforms in it - a model transform, a view transform, a projection transform and a viewport transform. When I started learning three.js I was confused, because it uses several naming conventions at once. It’s really hard to understand who is who, especially for beginner. I painted this diagram to explain to myself what names have matrices in CG theory, what names three.js passes to the shaders and what names we have in javascript for the same matrices. I hope this cheat sheet will be helpful not for me only.

Read more
Published on
placeholder 300 pens on CodePen - post preview

Three years ago I switched to front-end development and started learning HTML and CSS. 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.

Read more
Published on
placeholder Snowfaaall - post preview

I didn’t participate in challenges for 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. It’s easy for me to write examples like this snowfall nowadays, but there were times when I thought that this is kind of magical. Anyway, this animation is nice. Check out it on CodePen!

Read more

Learning WebGL?

Looking for a step-to-step tutorial without mathematics?

Check out my article about WebGL shaders with examples adapted especially for UI developers (in Russian)!

Published on
placeholder Texture projection - post preview

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.

Read more
Published on
placeholder Earthquakes map - post preview

A couple of days ago I received the email with the rules for the #codepenchallenge. I started writing the demo for it, but it was getting bigger and bigger. So I pushed it to GitHub repo instead. This is a WebGL globe with points for all earthquakes with magnitude more than 5 which happened last year. The live demo is here. This is an alpha version, so I recommend to use Google Chrome.

Read more

Pet projects

placeholder Muilessium preview
16  3 

Simple UI framework. RSCSS, REM-based sizes, fluid typography and other nice ideas. This website is powered by it.