codeguida talk #1 - Олег Соломка (mo.js)

{full-post-img}

Всім привіт! Знайомимо ваз з новою рубрикою codeguida talk, в якій ми будемо розмовляти з цікавими людьми зі світу ІТ. І сьогодні такою людиною є Олег Соломка - фронт-енд розробник із Донецька, творець популярної бібліотеки mo.js.

Розпочнемо з такого провокаційного питання: SVG чи іконкові шрифти?

:) SVG. Хороший вопрос, в свое время я потратил где-то полтора года чтобы сейчас мой ответ был SVG. Тогда иконочные шрифты были явлением повсеместным, но меня это очень не устраивало. Но еще больше это не устраивало дизайнера с которым я работал. Шрифты очень плохо рендерятся (если рендеряться вообще), приходилась кучу всего попробовать чтобы прийти к чему-то стоящему с SVG.

До речі, можливо поділишся секретом як саме використовуєш SVG(спрайти, можливо якісь махінації із gulp, тощо)?

Конечно. Я использую тег для вставки иконок в HTML. Ты скорее всего слышал о таком подходе - это как спрайт, только не нужно париться с заданием координат иконки. Это так же позволяет использовать CSS стили (возможности немного шире чем у шрифтов), это надежнее шрифтов, немного лучше семантика и accesibility. А еще можно использовать js и делать отзывчивые иконки. Ну и это намного проще. Собственно к этому всему я в свое время и пришел. Позже даже поделился находкой на codrops, но подход получил популярность после того как Крис(Chris Coyier) написал об этом. За что ему большое спасибо. Вообщем считаю это своей маленькой революцией (или эволюцией :) ).

Ну ми почали так жваво і відразу в бій. Хотілося б трішки забігти на початок. Як ти прийшов в ІТ? Чому саме фронт-енд, чи можливо ти не тільки фронт-ендер?

Я закончил Донецкий Национальный Технический Университет по направлению компьютерная инженерия, так что работаю по специальности. Наверное. Наверное, потому что фронт-энд своеобразная ниша, тут не выйдет быть просто программистом или инженером, нужно еще понимать, например, типографику, иметь навыки дизайна (как визуального так и ux) и еще кучу всего. То есть я не знаю чего больше в моей нынешней профессии — технического или не технического. Скорее всего пополам. Этим мне фронт-энд и нравится - такой своеобразный баланс между работой правого и левого полушария.

Тобто ти також цікавишся дизайном, маю на увазі чи сам малюєш? Зокрема моушн-дизайн?

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

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

{full-post-img}

Ось так поступово ми підійшли до твого головного творіння(якщо не так - поправ) - mo.js. Якось я вже розповідав про анонс в нашому Фронт-енд дайджесті. Можеш розповісти в двох словах, що це за штука?

mo.js это сокращение от motion.js, а mojs на современном сленговом языке значит "много классных штук" собственно этим и является библиотека - набором модулей и утилит для работы с моушн-графикой и анимацией. Это если в двух словах. Если взять немного обширнее, то современный дизайн интерфейсов сильно шагнул вперед за последние пару лет и анимация стала его неотъемлемой его частью. А инструменты для веба нет. Основная задача решаемая современными инструментами — это анимирование изменения состояния элемента с заданной функцией смягчения(easing) из нескольких типов. То если мы до сих пор имеем дело с наследием $.animate. Как-то скучно. Пришло время веселья - пора шагнуть вперед :) . Дело в том, что существует огромная параллельная индустрия такая же как, к примеру, проектирование бaз данных, ну или авиапром — моушн графика, где люди только и занимаются анимацией и уже достигли громадных успехов. mojs призвана перенять опыт и добавить много интересного в то как мы делаем анимацию в вебе и в общем понимаем анимацию. Интересно что официального релиза еще не было, на сайте всего один туториал, но большое количество людей уже пользуются библиотекой и даже пишут о ней туториалы.

Так, твоя бібліотека спричинила справжній резонанс. Більше 6тис. зірок в GitHub, туторіали по mo.js на Codrops. А також недавно CSS Design Awards вибрала тебе як Best Code Wranglers of 2015. І все це неймовірно захоплююче! Але...зайшовши на сайт mo.js, я помітив не активну вкладку API в меню, я думаю на даний момент багато людей цікавиться коли відбудеться офіційний реліз і з"явиться документація?

Я работаю над документацией. Постоянно. Параллельно переписываю код что-бы он был более читаем и покрыт комментариями, совершенствую архитектуру. В течении месяца планирую выпустить еще сразу два туториала о разных модулях. В то же время появиться и описание API для тех же модулей. То есть я планирую вот так вот, частями, делать релиз документации - шаг за шагом добавляя новый контент. Всегда можно мне написать если есть какой-то вопрос по API или еще что - лучше всего в issues репозитория или в твиттере, я всегда открыт для помощи. Пользуюсь случаем чтобы пригласить всех желающих поучаствовать в проекте, всегда требуются свободные руки и головы.

Чи були якісь цікаві історії під час процесу створення бібліотеки? І взагалі скільки часу пішло на її розробку?

Первый комит был сделан почти 2 года назад. За это время много изменилось и мне нравиться видеть то во что формируется библиотека. Если бы работать над библиотекой фултайм это конечно сильно ускорило бы процесс, но пока увы. Может в будущем получится запустить фандрайзинг для развития проекта, что даст возможность уделять ему все свое время. Сейчас только мысли, время покажет.

Як я зрозумів, ти родом із Донецька. Цікаво як склалась твоя доля після тих самих всім відомих обставин?

Я всегда работал удаленно, потому как, работа это то что ты делаешь, а не то где ты находишься. Этот факт дал мне возможность в нужный момент уехать и забрать с собой девушку. С тех пор так и кочуем - немного пожили в Турции, немного в Украине, немного в Европе. Сейчас собираюсь мигрировать в США и уже даже получил гринкарту. Пока что так.

Вспомнил историю во время разработки, которая может показаться интересной. Когда мне нужно было придумать малый логотип для библиотеки (задумывалось иметь 2 - один большой и один малый), я взял за основу символ ∘, который используется в математике для обозначения композиции. Так как символ является кругом, то есть радиус относиться к длине окружности как Пи (а число Пи бесконечно) этот символ обозначал такую себе бесконечную композицию что подходило для моих нужд. Я решил пойти дальше и сделал соотношение внешнего и внутреннего круга так же равным Пи. В итоге получил идеальное обозначение цикла - композиции бесконечно повторяющейся как во времени так и внутри себя. Символ показался мне достаточно глубоким, с ним я и запустил первую версию сайта.

Через несколько дней мне написал Murat Pak. Оказалось что он известный моушн-графер и использовал этот символ уже как одиннадцать лет. Когда он создавал этот символ для себя, он подходил с другой стороны, но интересно что в итоге символ получился именно таким же, как и у меня. Для него он так же символизировал цикл и как он говорил "perfection". Ещё оказалось что я следил за одной из его работ - archilect - искусственный интеллект который ищет эстетические изображения на tumblr и делает с ними твиты. В зависимости от реакции аудитории -- комментариев, лайков и ретвитов -- он учится понимать что нравиться людям, и учитывает это для последующих поисков. А ещё оказалось что Мурат живёт в Турции (а я тогда ежу почти два года жил в Турции). Вообщем сплошная мистика вышла. Так вот. Он писал мне с просьбой поменять логотип или как-то его изменить. И я ему уступил. Подумал что я проект ещё даже не выпустил, а он за одиннадцать лет с огромными аудиториями взаимодействовал за этим логотипом, а тут другой моушн-графикс проект и с тем же символом. Вообщем так мы с Муратом и познакомились. С тех пор у mojs на логотипе красуется дельта.

В такие моменты задумываешься насколько тесен наш мир и действительно ли существует океан идей, который выплескивается на людей во время штормов.

А чим ти нині займаєшся, звісно, окрім mo.js? Ти сказав про віддалену роботу, для мене завжди була цікава така ідея, як працювати віддалено і при цьому постійно з певною періодичністю жити в різних країнах/містах, але чи то не вистачає рішучості, чи то професійних навичок. Розкажи, як тобі в такому режимі життя, які плюси/мінуси? І ти працюєш на фрілансі чи в якійсь команді?

Я работаю на фултайме в Нью-Йоркской фирме которая занимается социальной аналитикой для больших компаний(b2b). Плюсов в удаленной работе множество, основной - ты не привязан к рабочему месту, все что тебе нужно для работы это ноутбук и интернет. Из минусов это наверное то что нужно быть дисциплинированным и постоянно подталкивать себя. Для некоторых людей это проблема. Ну и ещё когда работаешь удаленно нужно прилагать больше усилий чтобы быть в курсе того что происходит в команде. Как ни крути, когда ты находишься в офисе ты постоянно в теме, например когда ты обедаешь, хочешь или нет -- но ты хотя бы краем уха слышишь то, что происходит. При удаленной работе такого нет, но это все решаемо, при желании. Сейчас все более компаний дают возможность сотрудникам работать удаленно, понимая что человек работает намного эффективнее когда находиться в удобном для него месте. А ещё это сохраняет кучу времени и сил, так как тебе не нужно тратить по 2 часа в день(в лучшем случае) на дорогу в офис и обратно. Сколько всего можно сделать за за эти 2 часа! Например учиться, ведь это главное условие для того чтобы быть в тонусе для человека IT.

Так як на мене, самоосвіта і саморозвиток - це взагалі основна складова ІТ. І от власне нас читає чимало новачків, що ти порадиш тим хто б хотів досягти такого рівня як в тебе? Можливо даси якісь джерела для вивчення або ж поради?

Новичкам я бы посоветовал не гнаться за новомодными фреймворками, а инвестировать свое время в базовые и фундаментальные вещи. Изучайте протоколы, архитектуру приложений, паттерны, особенности языка на котором пишете. На собеседовании вас вряд ли спросят что-то по ангуляру или реакту, зато почти обязательно будет вопрос про то, почему в js область видимости лексическая или что такое LHS lookup.

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

Еще посоветовал бы обратить внимание на функциональное программирование - такой свод математических правил для написания надежных и легко понимаемых приложений. Использование математики внутри вычислительных машин - хорошая идея, как по мне. Из последних прочитанных книг для себя отметил серию You Don't Know JS и Mostly Adequate Guide to FP. Кстати, вот и еще один совет - учите английский язык - это обязательное условие, так как вся IT жизнь происходит на этом языке. Еще могу посоветовать завести твиттер и следить там за умными парнями по интересам - так вы точно ничего не будете пропускать из новостей IT мира.

Так же помните, что гений это 2% таланта и 98% пота, так что прийдется много работать. Но не уделяйте все время только работе, найдите какое-нибудь отвлеченное хобби, лучше всего подвижное - уж слишком неподвижная у нас профессия. И не будьте занудой - делайте неожиданные для себя вещи, к примеру, сорвитесь и сходите на танцы, - почувствуйте себя бревном - в таком не удобном для себя положении быстрее всего растешь - мозгу просто приходиться создавать новые нейронные связи. Вообщем постоянно выталкиваете себя из уютной коробочки с монитором.

І на останок: яким ти бачиш майбутнє фронт-енду?

В скором времени веб приложения начнут на полную конкурировать с нативными.

В ближайшем будующем мы увидим рассвет стандарта Web components, популярность наберут Installable Web apps. Если говорить про 2016 год, то это год Service Workers и Web Assembly. Лично я, также надеюсь увидеть в этом году финальную верисию стандарта SVG2, где огромное внимание уделяется анимации.

Несмотря на то что HTTP2 наполную войдет в нашу жизнь, препроцессоры, средства автоматизации и сборщики все так же остануться популярными.

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

В ближайшем будующем популярность наберут новые форматы изображений, такие как FLIF, который уже показывает себя лучше чем WebP. Это позволить нам иметь один файл для всех наших изображений разного размера и уже в CSS решать насколько качественно его подгружать в том или инном месте(partial load).

Что же касается CSS, то самый ожидаемый стандарт это CSS Grid а так же нативные CSS модули.

На цьому все. Сподіваюсь було цікаво і корисно. Не забувайте фоловити Олега в соцмережах @legomushroom та слідкувати за mo.js