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
Shaders examples: Part V - post preview

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!

Read more
Published on
Shaders examples: Part IV - post preview

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.

Read more
Published on
Shaders examples: Part III - post preview

The show goes on! Three more examples are on CodePen now. These pens are the examples of usage of shader material with point cloud. Also, you can find a nice trick in them - I used third dimension to create 2D animations. It’s much easier than puzzle out all the math to calculate such animations in two-dimensional space.

Read more
Published on
Shaders examples: Part I - post preview

I played with vertex shaders recently and in addition to my main task I got a number of beautiful effects for default geometries in Three.js. I don’t know where I can use them in production and I made a decision to share them to CodePen. Enjoy them!

Read more
  Published on
Guitarix Presets Collection - post preview

I returned to playing electric guitar recently and this is a good reason to share some presets for guitarix I created. The first bank in the collection includes the emulation of the Fender ‘65 Deluxe Reverb combo with a Cry Baby, Tube Screamer and Digital Delay. I created the presets in this bank using my Jagmaster with vintage humbuckers and they give a very nice sound for it. If you’re looking for an example of presets for guitarix - just check out them.

Read more
Published on
ABCDE - post preview

This time I created an example of responsive infographics with hexagons. Probably you’ve already seen the similar design concepts. This one doesn’t work in IE/Edge because I used clip-path with polygon to create the hexagonal elements, but if you need to support these browsers, you can simply replace the clip-path solution with SVG images.

Read more
Published on
ABCD - post preview

A couple of days ago I found an interesting question on Habr Q&A. A man asked how to create a design concept with HTML and CSS. It’s a common question for this website and the concept looked simple, but nobody knew how to create it. The thing is the sides of the triangles in the concept must be parallel on all screen sizes, not only on fullhd. I accepted the challenge and created a prototype for modern browsers. It looks like we can’t create such design using CSS only, even for evergreen browsers, so I used JS to calculate the widths of the triangles based on the heights of the cards. But maybe someone will invent a new CSS trick for this type of calculations.

Read more

Pet projects

Muilessium preview

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

Promo Core preview

Boilerplate for static promotional websites. Pug, LESS, PostCSS, ES6+, Gulp, Webpack, BrowserSync, ESLint, Stylelint, auto-generated docs...