Authors of Doka articles explain how code works. Usually the best way to do it is to demonstrate, not tell. Code examples — demos — are in-built into the articles as a little fully-functioning web-pages via iframe. They can be either static or interactive.

My job is to design these examples so they look consistent and as a natural part of the site. I have to both design and code for this, and this is what I like to do best :)

This demo is availible here.

I treat these code examples as an infographics, meaning they have to show things, not describe with words only. Pretty often I have to dig into the subject first, so to know what should be explained and how it is done best.

In the next example, I cut everything except for the CSS-property which is explained, its values, and effect it makes.

This demo can be found here.

The documentation resource is mostly used by desktop users. However, «Doka» is adaptive and availible for mobile use. My code examples are adaptive too.

By this day I designed more than 350 examples. Most of them are simple, but sometimes a demo can be an entire web-app.

For example, next demo is dedicated to creating an infinite dash scroll, as ones we know by social media. The article author called it a «switter», which sounds similar to both «twitter» and «sweater» in Russian, so I designed it as a sweater :)

You can see this demo here.

Code samples were scattered in personal accounts of authors when I joined this project. It was hard to see a whole picture back when, so I had to design them one by one. Later I figured out the patterns: which UI elements are used most and how they work better in this project.

Naturally I came to the idea of creating a design system. I knew this tool would ease and fasten my job.

Today the design system is published and is availible for authors and contributors. The system contains all the typical UI elements and code for them.

There is an article about creating Doka design on habr (RU).

I keep working on this project. My part can be seen on doka.guide.