Reflecting on 2020

Every year I’m late with the year review. Next year I shall start it at the beginning of December. Anyway, I’ll try to reflect briefly on what happened this year. Here is some of the things that I’ve done this year:

I’ve improved my coding skills. Launched a new portfolio site — my first published project built with Svelte, which proved to be awesome.

Also, I’ve developed new plugins and published some improvements to existing ones. Overall, all 10 of my plugins were installed more than 20 000 times.

I’ve started my effort to share more. That included being more active and open on Twitter, sharing some of my progress and results.

Additionally, I’ve started my blog. Writing online is still quite hard for me, but it is an important goal, and I’m planning to continue.

I’ve also started to work on my public speaking. At the beginning of the year, before lockdown, I was helping to host the Svelte Society meetup. Also, recently I had a chance to share some of my experience on the Friends of Figma online meetup. (I’ll share the video when it’s published)

Surprisingly, quarantine gave me a chance to get in shape. I’ve lost about 10 kg of extra weight and got into biking to stay sane. Made 717 km this year, which is maybe not a lot, but I still find it quite a good start.

•••

This year has plenty of setbacks, especially near the end of it, and I expect 2021 to also be pretty harsh for me. Nevertheless, I’m hopeful for what happens next. Here are some things I’m planning to focus on:

Find a full-time job, finally. The companies I was speaking to end up hiring someone else, so if you are looking for a Product Designer, take a look at this thread of mine.

Keep improving my coding skills. For now, I’m confident that I can eventually build what I have in mind, but it is still a painfully slow process. I hope to reach the point when I can experiment and iterate effortlessly.

Keep sharing. Although it is still painful to put things out there, I believe that learning in public is a great concept that brings a lot of benefits in a long run.

Collaborate more! I’d love to try working with developers on personal projects. If you are a developer, and need help from a designer for your product, or would love to work with me on some of my ideas, please contact me! Especially if you use, or want to try Svelte.

Publish a paid product. I was thinking about it for quite a long time and in the next year, I hope to finally jump on the indie-making train and publish some real product.

That’s all! Happy New Year!

No comments 191 2020 2020 life me

Twitter’s biased cropping algorithm

A wonderful story unfolds on Twitter now. You can post pictures there, and a preview of them appears in the timeline. And so Twitter made a special algorithm that selects what part of the image to show in the preview. So, if the image proportions differ from the preview proportions, the algorithm not only takes the upper left pixels from the image but also analyzes it and shows the “most important” part of the image. For example, text or a person’s face if it is in the picture.

And that’s where the fun starts. After many experiments, Twitter users have found out that regardless of the location in the picture, the algorithm prefers to show white people over black people, (even cartoon ones) men over women, the entire set of human biases.

https://twitter.com/NotAFile/status/1307337294249103361

The whole twitter is now buzzing about racism in the algorithms – the company should “fix the algorithm.” Of course, it would be great if the algorithms do not adopt human prejudices, but this problem is a complex one with no simple solution, and most importantly, lies outside the objective reality plane. Even if we assume that Twitter will manage to make the algorithm absolutely neutral (which is not an easy task by itself), it still has to choose which of the two people to show, and there will always be someone who will be dissatisfied with the choice, or find it biased.

In this situation, I am most amazed by the fact that all this problem could have been avoided long before it occurred by simply... not cropping the photos in the first place! For users, this feature does not add a lot of value to the product, and the only reason it may exist is to increase the artificial “interaction with media content” metrics within the company. If people can not see the whole picture in the preview, they will click on it more often, increasing the juicy “engagement”.

So, instead of adding “background-size: contain;” to CSS and show a preview of the entire image, the company invented the problem, solved it with the help of Machine Learning™, and got a disproportionately more complex one with the scandal at the top.

Curiously enough, from now on, it is not so easy for Twitter to move on and just remove the algorithm as a whole — now it may look like an attempt to “run away from the problem” or “unwillingness to make the algorithm less biased.” A representative of the company has already stated that they will conduct more research and invest more time and resources to solve the problem, which could easily not exist.

I would say, this is a great example of why one should be careful when adding complexity to the system – especially where it could be avoided.

No comments 216 2020 algorithm bias people twitter

Figma plugin: Restore Image Dimensions

Today I’ve published another utility plugin for Figma: Restore Image Dimensions. In this post, I will show why I make it and how it works.

Sometimes you paste the image in Figma and then resize it. Figma still stores the image in its original size, but you can not access it from the editor. So if you need to restore the original dimensions, you stuck.
There is a hack to do that by exporting an image from the “code” tab and downloading it from there. It works when you just need the original picture, but if you need to export it with tweaks you have to download it, and then upload it back, this time being conscious about not resizing it.

With this plugin, you can restore image size at any point with one command. It will resize the image back, and (if it was cropped in Figma) filling options will be returned to “fill”.

The plugin also works with the frames and vectors — basically anything that can have image fill. In this case, the vector object will be resized to match the original dimensions of the image. And, of course, the plugin works well with multiple objects, so you can resize multiple images at once.

Install plugin here.

No comments 428 2020 figma figma plugins image resize

3 types of marketing strategies

Let’s talk about marketing strategies. Every time you advertise your product, your message generally falls into one of these categories:

Communicating values

Clear and straightforward, you present to your customers a way to solve the problems they have.

Selling the dreams

This way you show to customers who they could be if only they used your product. In a way, they are not buying from you your product but a desire of being a better person. Your product just a way to achieve that dream.

Making the noise

This one seems less effective but most commonly used. It’s based on the fact that the human brain is prefers something familiar over something unknown. It works fine when your product doesn’t have strong advantages over the competitors, for example in FMCG, but often it is not enough.

Making the noise is not even making customers want your product, It just informs them it’s out there, which is also good but clearly not as effective as the first two.

This one is almost impossible to fuck it up. Even if you failed to communicate anything about your product, while you put your name and logo out there you at least created some “brand awareness”. And a lot of companies keep doing it even though they could do much better following the first two strategies.

The takeaway here is simple: if you are not put enough thoughts in your message it would automatically downgrade to just making the noise. To make your advertisement more effective make sure you are either communicating values, or selling the dreams.

No comments 170 2020 dreams marketing noise product values

Stages of developing sense of taste

We are not born with a sense of taste, but it develops over time under certain conditions, even if we do not think about it. However, it is possible to help this process if you like.

If you want to develop a sense of taste in a certain area, here is my understanding of the stages you have to go through.

For starters, there’s a good trick to determine how well your sense of taste is already developed in a certain area. I looked it up from Ludwig Bystronovsky, it sounds like this: “If you find that most things in a certain area are fine, you haven’t formed a sense of taste in it yet”.

The names are arbitrary, there is no clear moment of transition from one stage to another:

1. Stage of accumulation

First, you need to be concerned about quantity more than quality. It is not so important to find only good examples, there are much fewer of them than you need now. The amount of information you consume is most important at the beginning of the journey.

No neural network will learn to distinguish a dog from a cat based on two dozen pictures, even if they are the best pictures. The same thing is going on in our minds, we just need more data. Look at everything that comes up on the subject, do it every day.

Look at it this way – we can only appreciate the good in contrast to the bad. When we are just starting to study something, we just don’t have enough bad examples in our pocket to compare with. The stage of accumulation allows us, among other things, to get such luggage.

2. The curating phase

After a while you will notice that you begin to have preferences, something will start to seem trivial or boring, somewhere you will notice poor quality. And you will start to find certain things pleasing. The taste is beginning to form.

At this stage, you may have role models – people whose taste you are already able to appreciate, and whom you trust in judgment.

Now you not only absorb everything new but also evaluate it by comparing it with your accumulated luggage. This is the time when you start filtering the incoming flow, leaving only the best.

Here some people are hurrying to broadcast their newfound wisdom and state their tastes as rules. Such “rules” can be categorical and sharp in judgment, and often promote the one and only correct order of things.

The key is not to block the flow of various information, continuing to receive not only what seems to be “right” for now. Even when the taste is already developed, inspiration is still important.

3. Stage of principles

Finally, when the luggage of inspiration has been accumulated and opinions – sometimes quite intuitive – have been formed, the time comes when you want to formulate the difference between good and bad, to formalize your empirical experience in some more verbal form.

Unlike the “rules” from the previous stage, principles usually operate on a slightly different level of abstraction, and profess a more relaxed approach to beauty and correctness. It is more observations than manifestos.

Such principles, despite the authors’ desire to share them with the world, are more useful for themselves than for beginners in the field. Of course, directions and recommendations can help beginners move a little faster, but they alone are not enough to develop taste by trying to mechanically determine what is good and what is not, following some formulas.

At the beginning of the journey, it is more useful to take the principles formed by the experts as remarks and notes to apply to your own experience, rather than as instructions and guidelines on what is right and beautiful.

No comments 164 2020 life taste

New site

Well, world is gone mad with quarantine but at least times of total lockdown is the time when you totally have no excuse to not working on portfolio.

So, here it is, I have published first version of my new site:

I was playing with Svelte for quite some time now, but it is the first time when I have actually published something build with it — all site is build on Sapper and exported statically. I’ve learned a lot, and overall I very pleased with the experience. Great tool for not making things complex where things not have to be complex.

I also decided to try Tailwind CSS, and it was quite nice experience as well. At first you have to switch to documentation now and then, but as soon as you remembered most often used utility names, working with styling becomes way easier, since you don’t have to switch from HTML-mode to CSS-mode constantly.

Now, as I’m going to publish some more cases soon, I’m probably have to update process of deploying.

No comments 241 2020 me svelte tailwindcss this site

Data driven by corrupt data

Every time you analyse data, it’s useful to ask yourself what conclusions you can actually draw from it. However, it is often important to take a step back and check the data itself.

Here is an example somewhat anecdotal, but well illustrating the problem:

Imagine making any conclusions from the data obtained in this way. It does not matter what results we’ll get at the end of the experiment — the data is doomed anyway. We have no idea what customers meant by clicking on this buttons.

But if you think about it, even if you remove all the ambiguity from the interface of this questionnaire, we still won’t get accurate data. Now it will be the answers of only people who decided to press the button, which also does would not reflect reality.

In this case, to get the real data is very simple — just stand up with the counter, and calculate manually. Of course, this happens rarely, and we have to make all sorts of assumptions from the data. However, before you do them, it is important to make sure first that the data is generally suitable to do so.

No comments 228 2018

Remapping arrows on mac

This note is based on this post by Nikita Prokopov, so you may want to read it first.

In a nutshell: when you are in the “print mode” (typing or programming), every time you need to reach arrows or backspace you have to remove your hand from the original position and then return it back. It’s almost imperceptible, but breaking the focus and reduces the speed of work.

As a solution, Nikita made a configurator for the Karabinierer elements — open-source application, which allows you to remap keys on the keyboard to use Capslock as a modifier. In his edition, arrows are reassigned to Caps Lock + IJKL, and the backspace to Caps Lock + H. He also suggested Locking the original keys to get used to using new ones.

Nikita’s version

I already tried to do this with less low-level remappers, and I was happy to set up Nikita’s configuration. However, it quickly became clear that something is missing.

Firstly, there is one more key, which is quite far to reach, but which is just as important when you write — enter. So, my optimal layout would be this:

I assigned Caps Lock + O, to enter, and re-assigned the backspace to Caps Lock + U. (It would be clear why a bit later)

Now, in “print mode” everything is fine: you can write, erase, move to the next line. Particularly nice that all other cursor modifiers continue to work — you can select text with a Shift and navigate by words with the alt.

But...

Often you have to work in «Design mode» when one hand is located on the mouse, and the other — on shortcuts. In this case, the problem is even worse, because now if you need to use the arrows, you either have to drop the mouse and grab the keys, and then move back, or remove the left hand from the shortcuts and try to press the arrows with my left hand. Same with backspace and enter. The situation is even worse than in print mode, and our new shortcuts do not help at all.

It would be ideal to be able to press these buttons with your left hand, without removing your hands from the shortcuts area. Fortunately, now we already have a convenient modifier, so we can duplicate similar block of keys in “shortcut area”, so now arrows would be also on Caps Lock + WASD, Bacspace on Caps Lock + Q and enter on Caps Lock +E, like this:

Now you can easily operate with the keys of both the left and right hand. The whole set in the collection looks like this.

Karabinier elements allows you to configure complex modifications with setup json files, which you need to put at:

~/.config/karabiner/assets/complex_modifications

Alternatively, after installing the Carabinieri Elements you can simply click on the link below, that will download my setup file to the correct directory, so you will only have to enable or disable the required key groups as desired:

You can turn on options separately, or make changes to the file in order to extend or change your setup. File on GitHub page

Give it a try!

Install settings

No comments 2698 2018 arrows design mac

Sketch change text plugin

Sometimes, when designing in Sketch it handy to change several text layers at once. In general, you could use symbols for same elements, but sometimes it not possible or simply not worth it.

I’ll show you how I faced the problem with changing texts, and end up with writing sketch plugin. For my font design practice, I need to check, how some glyphs look like in several different typefaces. So I make some text layers with different typefaces selected. But now, every time I need to check some other glyphs I have to cycle through all the layers to change a value to the new one — not cool at all.

My first attempt to fix this problem was making symbols from these layers. Now I still had to insert a new value into every layer, but at least I can just copy-paste it into overrides without manually selecting every layer. Better, but still not cool.

On this point, I’ve decided, that ability to change several texts at once would be handy not only in this case, but in everyday work too, so I’ve decided to make a plugin for it.

Here is how it works now:

You just selecting multiple layers, hit a shortcut, and type or past new value. Notice, that if you already have the same value in every selected layer, the plugin will show it in a placeholder, so you can edit it instead of re-typing from scratch (handy for minor changes, like typos).

It also works with groups, so you don’t have to select layers, just select group and it will change the value of every single text layer in it. Despite that, you still can isolate some of the selected layers by making layer name starting with the hyphen.

So, if you find it helpful please try it out, and share it with friends

It’s available via Runner plugin, or on GitHub page: https://github.com/vdmp/bunch-text-chcange-sketch-plugin

2 comments 1462 2018 design plugin shortcut sketch

First step

So here it is, shiny new blog in English!

I will irregularly post here some announcements about my projects, thoughts on design, and maybe something else, let’s see.

No comments 169 2018