I continue posting beautiful shaders examples to CodePen. I started with colorful ones and now the time has come for monochrome ones. They look very futuristic, and I associate them with Sci-Fi movies.
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!
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.
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.
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.
Winter is a good time to update the boilerplates. So I started to develop a new boilerplate for promotional websites - Promo Core. It’s similar to html-template, but it’s not based on Muilessium anymore. I already included gulp plugins for generating SVG placeholders and documentation and I think I’ll add more tools to it in the future. The Promo Core is designed for static promotional websites, so there are no SPA frameworks in it by default and some architecture patterns looks too simple, but I use my previous experience and I think that is we need to develop such websites. Maybe I’m wrong. Anyway, the alpha version of the boilerplate is ready and I pushed in to GitHub. Feel free to use it for your projects, and please, open an issue in its repository if you’ll find a bug in it.
Today I would like to present my new article about Golden Canon grid. It’s not about the golden ratio, not about the history of book printing, but about websites. The modern CSS gives us a possibility to work with such grids without pain. CSS grid layout is the very powerful tool in this case. I explained how to use it when building promotional websites.
I answer questions on toster.ru and every week I see questions about interactive maps there. A lot of beginners don’t understand how to create them. So I wrote a tutorial for them. I used SVG, leader-line.js and hammer.js to create an interactive plan with hover effects, arrows and popups. I hope it’ll be helpful.
I wrote a post about my latest book on Medium. This is my first post there, but I already fell in love with the editor of stories. It’s very useful. But anyway, this small article is a presentation of my book about pyramid of adaptation. I explained what it is, why I published it and why I distribute its pdf version for free.