I just released the PromoCore v1.0.0. It’s a boilerplate for static promotional websites. Pug, LESS, PostCSS, Babel, linters, docs, detailed logs, etc. Everything you need to start a project is here. And the structure of the project is included too. Events manager, files structure and factory for components, singletons and wrappers for dependencies and polyfills, flags for features, etc. I tried to get all my experience in creative front-end development and create the one boilerplate to rule them all. I included the things, which I always use, and I don’t included old tricks for IE and awkward HTML templates for SEO. Just the core of the website. Feel free to use it for your projects or just for inspiration.

For a long time I wanted to made an experiment. I have an idea to combine Delaunay triangulation, clip-path, and my CSS demos with multiple backgrounds. Finally, I found a time to make it. The performance of this combination is not good, but it was expected. Clip-path property seems very heavy in terms of performance optimization. But the animation I got can be used for small pictures. It works well enough. Feel free to add it to your projects and share it with your co-workers if you like it.

5 years ago I switched from C/C++ and programming in *nix environments to Javascript and became a frontend developer. And now, looking back, I can say these were interesting years. I learned a lot, I have grown from a kid, who didn’t know how to write basic HTML layout, to a professional in creative frontend. From the first days I wanted to make beautiful things, not only UI, but animations, complex designs, 3D presentations e.t.c. Later, I started teaching to understand things in computer graphics and math in a more serious way. My first demos on CodePen look awkward now, but they were pretty cool then. Five years ago people didn’t know the tricks, how to create such things. It’s funny, but I can say “I was painting in CSS before it became mainstream” and it’ll be completely true. Anyway, It’s a good point to take a little break and then return to frontend with new ideas.

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.