DEV Community: Aleś Karoza

Go offline

Aleś Karoza — Fri, 02 May 2025 12:10:30 +0000

I mean, really. Read a physical book, not an e-book. Go to a live show of an artist or a band. Go for a walk. Attend an organ concert. Really.

I spend most of my time online, looking at the screen. But the best parts of my day are mostly offline. I love watching how birds eat treats from the feeder outside my window. I enjoy sitting on a bench and watching the ducks chill on the pond. I love walking and feeling the sunlight on my skin. I cherish intimate moments with my wife. I enjoy dining out at nice places.

None of this is online.

AI's Negative Expectations

Aleś Karoza — Wed, 13 Nov 2024 11:31:31 +0000

In the past, whenever I saw an AI button in a program, I wanted to at least try how it worked. And almost always, it performed quite poorly and was incapable of solving my real tasks.

Over time, I accumulated so much of this experience that now, when I see yet another AI feature in some service, my main interest is simply to close it as quickly as possible and use the core part of the service where AI hasn’t interfered yet.

The key is not to forget to occasionally check whether AI is still incapable or has actually learned something because negative assumptions don’t lead to progress.

Tabs are cool

Aleś Karoza — Fri, 11 Mar 2022 03:37:37 +0000

I like tabs in a browser. The main feature of tabs are launching two different instances of the one web app.
And I dislike it when developers broke this feature. In Telegram web app I cannot run two tabs, because of "Such error, many tabs". But I need many tabs when I copy some information from notes to my public channel or personal messages.

Tabs are a reason why I use web apps against desktop apps. I like when developers add tabs to desktop apps also. We have tabs in Total Commander and Figma.
But we have no tabs in Notion, and this is a reason why I use the web version of Notion even the web is much slower than the desktop app.

Local time of employees in Notion

Aleś Karoza — Thu, 30 Dec 2021 01:38:48 +0000

Companies that have many employees working remotely, it's important to know the time of employees in their local time zone.

Unfortunately, Notion doesn't have a function to display UTC time, but a little magic and here's the formula:

formatDate(dateAdd(dateSubtract(now(), toNumber(formatDate(now(), "Z")), "hours"), prop("UTC"), "hours"), "HH:mm")

UTC is the column that contains the difference between the employee's local time and Greenwich Mean Time. In the table, this column can be hidden.

The formula is used to get the UTC time:

dateSubtract(now(), toNumber(formatDate(now(), "Z")), "hours")

The magic is hidden here: formatDate(now(), "Z"), Z is the time zone in ISO 8601. Our timezone is subtracted from our local time, thus obtaining UTC (GMT) time.

Generated ringtone

Aleś Karoza — Thu, 15 Jul 2021 11:53:49 +0000

Users use default ringtones. As a result, a huge number of people have the same ringtone.

It would be nice to generate each user his own ringtone, so that he does not choose it himself, but it is different from everyone else. It is not right to have half of the people in a subway car reaching for their phones if one of the passengers rings.

If the user doesn't like the ringtone, they tap "Don't like it, next." Other ways to select the generated ringtone are also possible.

The main thing is that each user is given a fairly unique ringtone. Mubert has been able to generate music for a long time, to implement the idea we just need to tweak the algorithms in the direction of tunes better suited for the call.

Альтернативы RGB

Aleś Karoza — Wed, 30 Jun 2021 17:15:43 +0000

Люди знают о цветовом кодировании RGB, где через смесь красного (Red), зелёного (Green) и синего (Blue), смешивается нужный цвет и отображается на экране. Печатники и дизайнеры знают о CMYK (Cyan, Magenta, Yellow, Key color), который применяется для печати на белом, а последний из цветов отвечает за чёрный.

Но это не единственные способы закодировать цвет, например можно отойти от смешивания цветов, как это сделано в цветовой системе HSV, где Hue — цветовой тон, Saturation — насыщенность цвета, т.е. чем больше параметр, тем ближе к чистому цвету, а чем меньше, тем к нейтральному серому, а Value — значение, которое отвечает за яркость, чем выше, тем светлее, чем ниже, тем темнее. Также эту систему называют HSB, из-за Brightness.

Но сейчас будем говорить о цветовой системе Lab, которая учитывает человеческое восприятие и решает задачи, которые так просто не решаются в RGB. И немного об Lch.

Проблема грязных градиентов

Если построить градиент от одного цвета к другому в RGB, то с некоторыми цветами получится красиво, а с некоторыми полное уродство. Связано это с самим устройством цветового пространства RGB.

Между двумя цветами образуется какой-то странный и неестественный серый. Можно добавить промежуточный цвет, чтобы сделать красоту, но этот цвет сложно подобрать, чтобы он выглядел естественно.

Тут и помогает цветовая система Lab, учитывающее цветовое восприятие глазами человека.

Для создания такого красивого градиента заходим на Lch and Lab colour and gradient picker и выбираем два цвета, между которыми надо сделать переход и нужное количество ступеней, семи обычно хватает.

Далее копируем цвета рядом с колонкой Lab и переносим в свой редактор, делая линейный градиент из выбранного количества шагов. Получается красота.

Сама система Lab устроена довольно сложно, но суть в том, что светлота задаётся через L, а цветовые показатели через координаты a и b. Внутри там страшные формулы, ведь система делалась для людей, а не компьютеров, зато очень кайфовый результат. Главное запомнить, что в Lab всегда получаются крутые градиенты, и грамотно это применять.
Также для красивых градиентов создали Gradient Generator Tool, который не использует Lab или Lch, но избегает грязных цветов в центре RGB-спектра.

Изменить цвет, не меняя яркость и насыщенность

Очень часто надо сделать элементы разных цветов, но с одинаковой насыщенностью и яркостью, для этого в редакторе цвета дизайнер двигает полоску цветового тона снизу, не трогая положение кружочка вверху.

Но как это делать автоматически, ведь в системе RGB меняется значение каждой координаты при перемещении ползунка. Здесь на помощь приходят радиальные системы кодирования цвета, где цвет задаётся одной координатой, а не несколькими, например уже известная HSV, а также HSL. И радиальная версия Lab, которая называется Lch.

Рассмотрим реальный кейс

Задача: для пользователей одной роли должны генерироваться светлые аватарки с тёмными буквами, а для другой роли тёмные с белыми буквами.
Решение: копируем один из цветов в дизайне, переводим в HSL (Hue, Saturation, Lightness). HSL используем потому, что этот стандарт поддерживается в CSS.

Теперь меняя Hue, мы можем менять цвет, сохраняя светлость и насыщенность. Для светлого фона HSL: [0°–360°], 100%, 78%, а для тёмного HSL: [0°–360°], 100%, 30%. Параметр Hue можно генерировать из хэш-функции названия, либо из количества символов в названии.

Вывод

Нужно знать об альтернативных системах цвета и использовать там, где это нужно.

Ссылки по теме

http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker — сайт для создания Lch и Lab градиентов, в данный момент не работает

https://web.archive.org/web/20201112011026/http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker — веб-архив сайта выше

https://learnui.design/tools/gradient-generator.html — Gradient Generator Tool для создания красивых градиентов с экспортом в SVG и CSS
https://jsfiddle.net/vis4/fsvVM/ — инструмент для создания Lch-градиентов

https://bl.ocks.org/mbostock/3014589 — описание цветовых пространств с примером кода

https://youtu.be/kmlb272BAdo?t=81 — видео Ильи Бирмана о применении цветовой модели Lab в дизайне транспортных схем

https://en.wikipedia.org/wiki/HSL_and_HSV — статья о цветовом пространстве HSL на английской Википедии

https://en.wikipedia.org/wiki/CIELAB_color_space — статья о Lab

https://en.wikipedia.org/wiki/CIELUV#Cylindrical_representation_.28CIELCH.29 — статья о Lch

https://en.wikipedia.org/wiki/Hash_function — статья о хэш-функции

Типографика для самых маленьких

Aleś Karoza — Wed, 30 Jun 2021 16:43:07 +0000

Статья предназначена не для дизайнеров, а для совсем начинающих или любителей. Рассматриваем только основы, без погружения.

Шрифт

Старайтесь использовать шрифты без засечек, откажитесь от избитых красивеньких шрифтов, вроде Comic Sans, Lobster и прочих. Шрифты, с которыми не ошибёшься: PT, Noto, Inter и Montserrat.

ЗАГЛАВНЫЙ НАБОР

Избегайте заглавный набор. Если используете заглавный набор, то делайте Р А З Р Я Д К У между буквами. Это необходимо, чтобы компенсировать разницу в геометрии букв. Не должно быть такого, что в одном месте символы почти слипаются, а в другом образуется дыра.

к и т а й с к и й н а б о р

Не делайте разрядку в строчном наборе, так любят делать китайцы, которые ничего не понимают в европейской типографике. Можно изменять расстояние между буквами на 5-10% в некоторых случаях, но не более.

Пространство

Надписи не должно быть тесно в выделенном для неё месте.

Близкие по логике блоки должны быть сближены в графике. Расстояние между текстом и его заголовком должно быть меньше, чем расстояние до следующего заголовка.

Межстрочное расстояние должно быть больше межбуквенного, но не слишком.

Заключение

Ни одно из этих правил не является обязательным. Часто даже очень профессиональные дизайнеры их нарушают. Но одно дело нарушать правила осознанно для достижения нужного эффекта, а другое — уродовать окружающий мир по незнанию.