blossom

Мотивация#

Идея создать библиотеку для манипуляций с цветами появилась далеко не сразу. Изучив основы CSS, познакомился с различными способами задавать цвета. Чаще всего встречались HEX и RGB значения, и для меня было большим открытием случайно познакомиться с HSL, который, к слову, тоже широко поддерживался и оказался заметно интуитивнее. С целью получше ознакомиться с устройством различных цветовых моделей и для облегчения подбора цветов в своих проектах решил создать собственный конвертер цветов.

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

Спустя некоторое время, пришёл к мысли написать конвертер снова. В этот раз пришло осознание важности отделения логики работы с цветами должна от отображения. До сего момента мои проекты не имели подобного разделения, компоненты интерфейса наполнялись бизнес-логикой и спустя какое-то время проекты было попросту невозможно поддерживать. Подобная участь постигла первую итерацию проекта numbers, из-за чего пришлось забросить его дальнейшую разработку и начинать с нуля.

Работа над конвертером цветов началась с разработки отдельной библиотеки, которую планировалось опубликовать на npm, а в последствии использовать её при разработке веб-приложения.

Референс#

Попытавшись написать код для будущей библиотеки, появилось ощущение тупика. Как должен был выглядеть интерфейс? Какой функционал необходим? На тот момент код выглядел лишь как набор функций для перевода из некоторой системы в другую. По этой причине для написания библиотеки решил не “изобретать велосипед” вслепую, а взглянуть на уже существующее решение и использовать его как референс. Впоследствии, данный способ зарекомендовал себя в дальнейшем в изучении чего-то нового. Повторяя осмысленно, шагая “по протоптанной дорожке” в краткие сроки удаётся научиться чему-то новому.

Для референса был выбран замечательный пакет colord. Взглянув на документацию, и, что важно, на исходный код — меня буквально осенило. Все цвета можно связать воедино посредством RGB, благодаря чему интерфейс библиотеки становился намного проще и функциональнее. Конечно, можно выделить и недостатки в таком подходе, например, потерю точности, но в последствии их можно было доработать.

Точка отсчёта#

По сути, blossom является в некотором роде форком проекта colord, на тот момент мне не пришло в голову сделать полноценный форк и работать уже отталкиваясь от него. По каким-то неведомым причинам на тот момент казалось, если я сделаю форк и начну писать код там, то это сделает моё “обучение через копирование” менее эффективным. По итогу, проект имеет некоторые различия в наименования методов, функционале и стиле кода, так как писался с чистого листа.

Работа над данным проектом является точкой отсчёта многих серьёзных перемен:

• пришло осознание важности написания модульных тестов и первая практика их написания;
• знакомство с инструментарием линтера в проекте и важностью его использования в публичных и командных проектах;
• понимание поддержки “единого стиля” кода при работе в open source проектах;
• знакомство с процессом публикации пакетов на npm;
• знакомство с процессом CI/CD и написанием первых workflow;

Список можно продолжать, и сейчас уже кажется, будто нельзя не знать вышеперечисленного и начинать работу над каким-либо проектом. До момента, как я познакомился с проектом colord и “препарировал” его, можно уверенно сказать, разработчиком я и не был и только наконец-то начинал им становиться.

Опыт в open-source#

В процессе работы заметил, что в проекте не хватает плагина для поддержки цветового пространства CMYK; colord использовал систему плагинов для добавления части малоиспользуемого функционала. Разобравшись с системой, решил попробовать добавить плагин недостающего цветового пространства. По правде говоря, мой код не соблюдал стиля, выдержанного в проекте, тем не менее, автор помог доработать моё решение и добавил плагин в проект.

Это был мой первый pull request, ощущалось крайне волнительно, присутствовал страх нажать не куда-то не туда и сделать что-то не так. Не гладко, но всё прошло успешно. В последствии, поработал ещё над несколькими плагинами для проекта, процесс стал более привычным и понятным. Можно сказать, “отдал долг” проекту, благодаря которому узнал много нового и сильно вырос как разработчик.

Текущее состояние#

На данный момент blossom не поддерживается. Долгое время пытался к нему вернуться, планировалось переработать и упростить интерфейс. До сих пор присутствует желание переработать систему плагинов, однако со временем так и не пришла идея, как решить некоторые проблемы, приходившие с изменениями.

Время неумолимо двигалось вперёд, в CSS начали появляться функции color-mix() и relative color syntax, позволявшие решать множество проблем, ради решения которых и создавался мой проект.

Возможно, в будущем ещё вернусь к работе на blossom, но вряд ли в самое ближайшее время.