Юрий Артюх, CEO/CTO в CodeRiver(http://riverco.de/) - студии, которая занимается исключительно фронтендом. Юра верстает быстрее, чем рисуются макеты, умеет мыслить как пиксель и стримит по воскресеньям.

https://www.facebook.com/akella
https://twitter.com/akella
https://github.com/akella

Как научиться делать такие сайты, которые берут SiteOfTheDay на Awwwards.com?
Из моего опыта это обычно много страданий и много общения с дизайнером. Невозможно сделать такой сайт, не пойдя на компромиссы.

«Не помню, чтобы хоть какой-то из сайтов, с которыми я работал, взявших SiteOfTheDay, был закончен в сроки и безболезненно запущен»

awwwards
Не помню, чтобы хоть какой-то из сайтов, с которыми я работал, взявших SiteOfTheDay, был закончен в сроки и безболезненно запущен. Это всегда нарушение планов и посиделки до ночи.

Какие основные критерии оценки для SiteOfTheDay?
Ох, если бы знал, я же не судья. Насколько я вижу, это новый взгляд на какую-то анимацию. Анимация уже могла где-то быть, но тут она применена в новом контексте и как-то необычно выглядит, поэтому это часто связано с WebGL(https://ru.wikipedia.org/wiki/WebGL). Ведь шейдеры можно использовать по-разному, и одна и та же идея может быть по-разному применена. А иногда побеждают просто аккуратные и красивые сайты, не думаю, что WebGL сам по себе им так важен.

Начиная верстать, ты пишешь сначала разметку и потом стили, или ты делаешь это блоками?
Обычно я полностью делаю HTML для всей странички, потом вырезаю картинки из макета и после пишу стили.

В 2018 pre/post-processor-ы или vanilla CSS?
В 2018 году я все-еще выбираю препроцессоры и постпроцессоры, уже несколько лет эта схема для меня работает. Sass + PostCSS - наиболее удобная схема, которая решает за разработчика наибольшее количество проблем. Тебе меньше приходится думать, чтобы писать свой код. Препроцессоры решают за тебя проблему использования всяких переменных и прочего, а постпроцессоры решают за тебя проблему с префиксами, минификацией и так далее.

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

На самом деле, верстка для меня заключается уже в написании кода, поэтому все вопросы, которые связаны с пониманием работы, я задаю на этапе просмотра макета. До начала работы с ним пытаюсь узнать у дизайнера: есть ли нужные иконки, ассеты, как должна работать та или иная анимация, как эта анимация должна работать в адаптивном состоянии, как это все должно работать при разных контекстах верстки. Один и тот же блок может быть на разных страницах, но работать по-разному. Все эти пункты необходимо выяснить до начала верстки.

Сколько за свою практику ты сверстал макетов?
Помню, что в 2011-м году их было больше, чем 1000, и я перестал считать. Сейчас моя команда верстает в год около 500 проектов.

Сколько у тебя человек в команде?
Я и 18 человек, 4 из которых менеджеры.

«Главный продукт моей команды - это код»

Что входит в обязанности CTO в твоей компании?
СТО для меня - культура кода плюс новые специализации, которые я могу привносить в команду, тот же WebGL или специфические анимации. Поскольку главный продукт моей команды - это код, для меня важно, чтобы код был хорошим.
Также поддерживаю шаблон, по которому происходит верстка, обучаю лучшим практикам и современным технологиям свою команду.

«СТО для меня - культура кода плюс новые специализации»

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

«Чем больше ты знаешь, тем дороже ты стоишь»

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

Вот на этой границе, на которой ты уже можешь работать бекендером, и пролегает правда.

Слышал, вы делаете верстку в виде компонентов популярных фреймворков, Angular, React, Vue, как выглядит этот процесс?
Как правило, когда речь идет о работе с фреймворками, то все сводится к работе через API. Мы верстаем макет, разбивая его на компоненты. Нам дают REST endpoint’ы, которые мы подключаем, и таким образом оживляем макет, когда надо подключаем state manager.

3 современных тренда во фронтенде от Юры Артюха

  • Когда-то трендом был responsive design, а сейчас это само собой разумеется. Я бы объединил все тренды, касающиеся JS и его best practices (ESLint, test utils), в один общий тренд.

  • Вторым трендом я бы выделил легкую неразбериху - где же наконец-таки писать CSS? Стоит ли писать его в JS? В каком формате писать? Сейчас все пишут по-разному, может так и надо, но по крайней мере есть какая-то активность в этом сегменте.

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

Почему WebGL только недавно стал популярным?
API для работы с WebGL уже довольно давно не менялся. Наверное, дело в том, что видео карты стали, в целом, хорошими и ушли старые девайсы, на которых была проблемная поддержка WebGL. Сейчас невозможно найти девайсы, где вообще не поддерживался бы WebGL. Там могут быть мелкие нюансы, но практически везде, на любом мобильном телефоне WebGL будет работать. Плюс порог входа в эту технологию есть, потому что люди, делающие крутые анимации на сайтах, чаще являются бывшими разработчиками игр, нежели бывшими верстальщиками.

Как ты подбираешь темы для стримов?
Изначально эта стримерская тема появилась из того, что я заходил на сайт, видел анимацию и не понимал: как она сделана, на каких технологиях, как я могу ее повторить. Если в верстке чаще всего ты понимаешь, как это сверстано, то в таких эффектах совершенно непонятно. Мне было интересно декомпилировать и разбираться, как что сделано. Теперь у меня накапливаются какие-то сайты, на которых увидел интересную мне анимацию. Сейчас я добавляю сайт с анимацией в список, и перед стримом, просматриваю этот список, выбираю ту, с которой мне удалось разобраться, и рассказываю о ней.

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

«Как только понимаю, как сделана анимация, она становится моей анимацией, и я могу ее при всех реализовать на стриме»

Что входит в подготовку к стриму?
В среднем, это несколько часов. В подготовку входит примерная реализация анимации. Чтобы она работала, в каком-то отдельном виде, я не делаю ее идеальной, я не делаю ее чистой, но мне надо разобраться, как она сделана. Как только понимаю, как сделана анимация, она становится моей анимацией, и я могу ее при всех реализовать на стриме.

Опиши процесс декомпиляции анимации
Сначала я пытаюсь понять, какая технология задействована: это фреймворк или не фреймворк. Можно сделать по поиску ключевых слов в исходниках. Это может быть какой-то Three.js(https://threejs.org/) или шейдеры. Потом я делаю преттифай для кода, чтобы прочитать структурно, и после уже - нахожу непосредственно место, где реализована эта анимация. А найти я пытаюсь по-разному. Если я вижу, что там задействована картинка, - я ищу где используется url этой картинки. Если математическая функция, то я пытаюсь найти части этой функции, или я просто ищу похожие переменные - пытаюсь угадать, как человек мог бы назвать эти переменные.

«Чем больше изучаю, тем легче мне становится разбираться с новыми сайтами»

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

Ты делал сайт ukr.net, какие это были деньги на тот момент?
Помню купил себе mp3-плейер, крутой на то время mp3-плейер iRiver. Это был 2005 год, я был студент, и мой кассетный walkman устарел :). О боже какой я старый.

Сколько времени ты делал Kremlin.ru?
Проекты такого размера делаются долго. Обычно у тебя нет всех макетов сразу и есть долгий процесс принятия решений, поэтому разработка затягивается.

Сколько тебе заплатили за сайт Kremlin.ru?
На те деньги я смог купить себе новый топовый macBook.

Откуда никнейм «akella_»?
В детстве любил играть в игру «Корсары», и ее разработчиком была компания «Акелла». Также мне нравился образ волка из книги про Маугли. Хотя в книге «Маугли» Акелла пишется с одной Л, это я уже узнал потом.

Девиз по жизни
Мне нравится фраза Гомера Симпсона: «Попытка - первый шаг к провалу».

cssing.org.ua - жив?
Он, как блог Шредингера, - пока я его не открываю, он вроде как жив. Как только я его открою и вижу сколько там уже нет постов, он мертв. Это архив моих заметок, я могу посмотреть, каким я был 10 лет назад, но, к сожалению, сейчас редко туда пишу.

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

Что сложнее всего дается новичкам в верстке?
Есть несколько моментов, которые начинающим верстальщикам сложнее всего переступить.

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

Как ты борешься с выгоранием?
Я «шпилю» на компе, иногда куда-то уезжаю и отключаюсь. Все еще мечтаю, что я уеду куда-то без ноутбука, но такого пока ни разу не было.

«Все еще мечтаю, что я уеду куда-то без ноутбука, но такого пока ни разу не было»

Как стать разработчиком, который каждый год проводит отпуск с моделями?
К сожалению, эта ниша уже занята, поэтому никак. ;-)

Сериал, который тебя впечатлил?
Это будет тривиальный ответ, но мне понравился «West World», он действительно крутой. Кстати, мне зашел и первый и второй сезон.

Книги, которые повлияли на твою жизнь?

  • Одна из первых «Хроники Нарнии» Клайва Льюиса, которые я еще в школе прочитал.
  • Вторая книга, которая понравилась, была к концу школы. Она была не художественной, но она нормализовала мою личность - «Философские сказки» Николая Козлова.
  • Третья - «Автостопом по Галактике». Нравится, как пишет Дуглас Адамс.

«Если бы у меня был сын, я бы с удовольствием отдал его на мех-мат»

Нужна ли математика фронтенд девелоперу?
В чистом виде встречаю ее очень редко. Я воспринимаю математику, как описание каких-то идей. И фактически то, что я учил в универе - это множество различных идей на языке математики. Мне рассказывали, как можно реализовать какие-то абстракции, и когда ты знаешь много таких идей-абстракций тебе потом легче строить свои абстракции. Если бы у меня был сын, я бы с удовольствием отдал его на мех-мат. Он мог бы быть кем угодно после этого, но закончить факультет полезная штука.

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

Как готовишься к докладу?
Подготовка занимает до месяца, но в чистом времени - это неделя или последние несколько дней. Как правило, сложнее всего найти тему.

«Я еще не видел ни одного специалиста, который ходил бы на конференции и ему это как-то навредило»

Зачем людям ходить на конференции?
Мне кажется, во-первых, это тусовка. А тусовка дает тебе возможность сравнить свои знания и проблемы со знаниями и проблемами других людей и понять актуально ли то, что тебя заботит. Также способ узнать: что сейчас в тренде, какие технологии нужно учить чтобы через год быть востребованным специалистом. Плюс, я еще не видел ни одного специалиста, который ходил бы на конференции и ему это как-то навредило.

«Мой уровень счастья не зависит от того, где я нахожусь. Ты можешь быть счастлив и доволен жизнью в любом месте»

Почему ты до сих пор остаешься в Украине?
Нравится Киев, здесь очень красивые девушки, очень зелено. И я в какой-то момент понял - мой уровень счастья не зависит от того, где я нахожусь. Ты можешь быть счастлив и доволен жизнью в любом месте.

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

В ближайшее время на каких конференциях тебя можно будет увидеть?
Планирую 21 сентября выступить в Минске на CSSMinksJS (http://css-minsk-js.by/) и расскажу что-то на LvivCSS(http://lvivcss.com.ua/) 10-11 ноября по Львове.