Катерина Міщенко, "Верстальник — теж людина"

Editor's Notes

1. На самом деле, все что будет сказано дальше, применимо к совершенно любому разработчику. Но я буду говорить в контексте маркап разработки. Потому как  markup developer на большом long-term проекте, это скорее исключение, чем обычная ситуация.
2. Всем привет. Я меня зовут Катя. Я работаю в компании Sigma Software и занимаюсь тем, что развиваю компетенцию HTML/CSS разработки. 
3. Я уже вот как десять лет занимаюсь версткой и последние пять - именно в Сигме. И знаете, за это время это дело не перестало мне нравиться -  я люблю кодить, общаться с дизайнерами, работать над дизайн системами, собирать кастомные UI фреймворки для проектов.  Для кого-то десять лет в верстке звучит странно. Наверно, вы захотите спросить меня “Что она там так долго делает? Почему не ушла во фронтенд как все нормальные люди?” Так вот. Я тоже задавала себе эти вопросы. И когда большинство моих коллег переходили из верстки в JS, я загадала, что я могу добиться успеха в том, что получается у меня лучше всего, и для этого не нужно гнаться  за новыми трендами.
4. Поэтому сегодня я бы хотела поделиться своим опытом и лайфхаками, как стать ценным и востребованным верстальщиком на любом проекте, не меняя кардинально сферу деятельности. Тем более, что спрос на хороших толковых верстальщиков будет всегда.
5. Мне почему-то всегда попадались такие ребята, которые говорили, что они ушли из верстальщиков в разработчики, чтобы не верстать. И пока они учили программирование, HTML и CSS уже перестали быть им интересны, в вебе появилось столько всего нового, что разобраться во всем этом новом становится очень сложно. Я искренне верю в то, что как бы быстро не работал бекенд, какой бы модный и классный вы бы не написали  фронтенд, все впечатление портится, если сайт или приложение криво сверстано или, не дай бог, разваливается.
6. Такова природа человека, чтобы добиться хорошего результата, нужно сфокусироваться на чем-то одном. Так и случилось, что основная моя круг рабочих интересов - это верстка и все что с ней соприкасается. Ведь ни один фронтендщик или бекендщик не сверстает макет лучше, чем верстальщик. Просто потому, что это не их компетенция. 
7. И поэтому считаю, что верстальщик точно такая же боевая единица на проекте, и его вклад не менее значимый, чем вклад фронтенда с бекендом, как это принято считать. Так вот. Как я говорила ранее, я занимаюсь развитием компетенции HTML/CSS Мы постоянно собеседуем ребят на позицию HTML/CSS разработчиков и знаете, должна вам признаться, что очень сложно сейчас найти хорошего верстальщика.
8. Мы стремимся выпускать качественные с точки зрения дизайна и функционала продукты -   хотим создавать красивые сайты и приложения, со сложным лайаутом, анимациями, чтобы css файлы были сложены по феншую и все это соответствовало последним трендам разработки.  И поэтому в Сигме мы построили  такой процесс, где верстальщик с самого начала проекта работает в команде вместе с дизайнерами, разработчиками, тестировщиками  под чутким руководством проджект менеджера.  Верстальщик - первый человек, который валидирует макеты от дизайнера в начале разработки  и определяет возможные риски реализации, что в свою очередь помогает дизайнеру как можно раньше внести правки, а проекту - сэкономить время на переделки.  Кроме этого, наши ребята берут на себя большую часть работы по созданию статических компонентов и шаблонов внутри приложений для JS фреймворков. И при таком подходе на проекте, разработчики только биндят данные и допиливают функционал. Вместе с тем, верстальщики создают кастомные UI фреймворки для будущих проектов наших клиентов, работают над созданием дизайн систем, модернизируют огромные энтерпрайз приложения, которые раз в несколько лет нуждаются в рефакторинге кода и редизайне.  И конечно же, работают над всеми сайтами Sigma Software и не только.
9. Так как мы аутсорс компания, общение с заказчиком неизбежно.  И тут мы сталкиваемся с проблемой, что нам очень сложно найти верстальщика на проект, который бы не только хорошо верстал, но и был с достаточно хорошим уровнем английского, чтобы общаться с клиентом напрямую, приходить с предложениями по улучшению архитектуры сайтов, приложений, чего угодно, чтобы мог готовить эстимейты, пропоузалы и всякое такое. Другими словами, с хорошими навыками soft скилов. На самом деле, сейчас очень много говорят о важности софт скиллов для разработчиков. Но по какой-то, непонятной мне причине, верстальщики не обращают внимания на этот момент. К нам на интервью приходит очень много ребят, которые и подходят нам по техническим навыкам, но из-за того, что у них не было опыта работы в команде, они не писали писем, не брали на себя ответственность за принятие решений на проекте - мы не можем их взять, потому как им будет сложно интегрироваться в команду и нам приходится им отказывать
10. У меня есть предположение, основанное на моем жизненном опыте, что есть какой-то у верстальщиков комплекс “недо-разработчика”.  Когда ты вроде и делаешь что-то, но и не программист.  (Да? Потому что HTML - это язык разметки ) И вот все то, что как бы должен знать разработчик, меня не касается.  Как мне кажется, может быть поэтому все так и рвутся из верстальщиков в свитчеры- фронтендщики/бекендщики, чтобы стать уже наконец-то программистами.  Вот тогда-то они запишутся на курсы английского, научатся делать эстимейты, закладывать риски  в проекты, будут работать в команде, будут приходить к дизайнеру и говорить, что вот ты нарисовал макет, где в таблице 4 колонки, но у нас их  будет больше, и они не помещаются все на экране и давай с этим что-то делать. А пока я верстальщик, я просто наверстаю страничку как нарисовал дизайнер, а дальше там что хотите, то и делайте.  Я могу только догадываться, что движет этими ребятами, но после огромного количества проведенных интервью, я для себя определила три типа верстальщиков-соискателей: 
11. Первый, это те ребята, которые приходят в верстку не тем, чтобы становиться классным специалистом, и вообще им это не особо нравится, но они понимают, что без знаний HTML/CSS дальше никуда.  Для них это простой старт айтишной карьеры; но они уже знают, что фронтендщики получают больше, чем верстальщики. И вот я сейчас тут немного дивы подучу и пойду дальше.  Обычная ситуация, когда приходит такой кандидат со своими амбициями на собеседование на позицию верстальщика, и прям с порога говорит: ”хочу быть фронтендщиком, Какие курсы тут у вас есть?” А сам из бутстрапа только сетку на проектах юзал. Второй, это ребята с хорошими техническими навыками, но которые не работали в команде. Им проще справляться с задачами самостоятельно. отдельно от команды разработчиков (я имею ввиду такие компании, где верстка - это сервис) Но такие верстальщики не всегда понимают важность этапа верстки на проекте. Ребятам сложно оценить свой вклад в проект, понять свою значимость, они не получают обратной связи от команды -  вообще, то ли они делают. Работа превращается в конвейер из макетов и сверстанных страниц, Им сложно адаптироваться в большой команде, осознавать, что планирование и ретроспективы это часть работы над проектом процесса. И наконец третий.  Кандидаты, которые приходят в поисках новых нетривиальных задач.  Они не боятся браться за сложные проекты и разбираться с версткой под любую из технологий, они проактивные и коммуникабельные; Они классные специалисты, очень любознательны и любят то, что делают, стараются вникать в бизнес потребности клиента, умеют презентовать себя и компанию, и вкладываются в задачу немножко больше, чем от них ожидают.  Таких ребят их очень мало и мы стараемся их не упускать. Это те, за которыми на большом рынке кандидатов, компании будут бороться, чтобы заполучить его себе.  И я прекрасно понимаю, что возможно все сидящие в зале захотят так надолго связать свою карьеру с версткой. Я хотела бы сказать, что я бесконечно восхищаюсь теми ребятами, у которых получилось сменить сферу деятельности. Они прошли очень сложный путь. И я тут не для того, чтобы его обесценить.
12. Скорее, своим докладом я хотела бы поддержать тех, у кого не получилось этого сделать и открыть новые горизонты для тех, кто думает, что всю жизнь будет верстать одни сайты. Знаете, когда мои друзья, с которыми я начинала свой путь разработчика, уходили учить JS - переходили во фронтенд, у меня тоже было желание уйти вслед за ними.  И я много раз садилась читать книги по джаваскрипту, проходить курсы, учиться по видео урокам на ютубе и я постоянно бросала, потому что чисто психологически это было очень сложно.  Я думала так - с одной стороны у меня есть работа, которая у меня получается и которую я люблю, а с другой, я почему-то решила, что мне нужно выучить этот джаваскрипт, который на самом деле, мне нафиг не нужен, просто потому, что кто-то сказал, что так надо.  Мне очень повезло попасть в компанию, где руководители стараются прислушиваться к своим сотрудникам и помогают им с развитием их идей. 
13. Мы не сразу пришли к тому, чтобы привлекать верстальщиков со старта проекта.  До этого верстка была и сервисом, и саппортом разработчиков, которые приходили к нам за фиксами за три дня до релиза. В такие моменты мы не совсем не понимали, почему сразу не сделать хорошо, не позвать верстальщика, который сразу сделает нормально, без багов.  Мы старались подключаться на любые задачи, где нужно было что-то пофиксить, или переделать. Мы боролись со стереотипами, что верстальщики работают только с хтмл-файлами и не разберутся  в дотнет приложении. Но с каждым успешным релизом, мы заработали доверие менеджеров и проектной команды, вместе с тем разбирались в новых технологиях, развивая компетенцию и расширяя возможности для привлечения верстальщика на проект.  А мы еще работаем вместе с дизайнерами (мы с ними один отдел), и нам гораздо проще с ними коммуницировать и разруливать какие-то вопросы по макетам, чем, образно говоря, удаленному разработчику. В итоге, как верстальщик может помочь проекту: Сайт/приложение будет максимально похоже на дизайн, который купил клиент Верстальщик построит максимально гибкий лайаут и в приложении можно будет добавлять или убирать блоки и оно не будет разваливаться Все стили будут аккуратно разложены по файлам и в них будет просто разобраться  Он напишет документацию по UI компонентам Разработчикам не нужно будет верстать самостоятельно. Есть ответственный человек за поддержку UI всего проекта. Добавить сюда знание английского и навыки коммуникации, и за вами выстроится очередь из менеджеров и проектов. А с проектами, у нас, слава богу, проблем нет.
14. И если вы до сих пор считаете, что верстка сайтов это все, чем может заниматься верстальщик, то на самом деле это не все. Может быть, тебе кажется, что ты сверстал все сайты мира, но, как минимум, есть еще веб приложения, дизайн системы и нужно помочь другу-разработчику вот список всего, что  должен знать и уметь верстальщик в 2020 году
15. Английский  - откроет для вас в разы больше достойных предложений на рынке, потому как вы сможете самостоятельно общаться с клиентом, выяснять детали проекта и все такое прочее. Большие компании очень любят ребят. 
16. Навыки коммуникации - письменной и устной, стараться разрешать конфликты мирным путем
17. Верстальщик должен уметь работать в команде, поддерживать тиммейтов, быть проактивным и понимать бизнес потребности клиента
18. Markup for CMS - WordPress, Drupal, Magento - очень важно понимать принцип работы CMS и их специфику, для того, чтобы процесс имплементации проходил с наименьшей потерей качества и доделками на стейдже  Shopify - продающий лендинг. Когда нужно простое решение для e-commerce за небольшие деньги. У Shopify прекрасная документация,  в ней не сложно разобраться даже верстальщику без особых навыков программирования Design system - создание дизайн систем, которые соответствуют business needs клиента, а также кастомизация UI фреймворков Markup for JS frameworks - Angularjs, Vue, React - верстальщик должен знать их на уровне создания статических компонентов и шаблонов. Markup for backend - тоже самое относится и к бекенду - PHP, .NET, Java Понимание принципов юзабилити и дизайн паттернов - для того, чтобы вносить какие-то минорные правки в UI проекта без привлечения дизайнера и без потери консистентности в проекте Верстальщик должен уметь делать оценку работ по макетам, без макетов, учитывать технические особенности реализации, закладывать все возможные риски, изучать требования, спецификации для того, чтобы во-первых иметь полное понимание функциональности, в во-вторых, оценка была максимально точной Уметь грамотно описывать скоуп работ, писать документацию по UI части приложения и его структуре
19. И технические скилы Создание мастер лайаута для веб приложений Semantic coding - семантическую верстку пока еще никто не отменял Pixel-perfect - не только для лендингов, но и для веб приложений тоже Web Accessibility -  сейчас это маст для всех проектов для стран Европейского Союза, Великобритании, Америки и Канады.  Performance optimization - оптимизация графики, стилей, js файлов, а также оптимизация DOM элементов на странице для улучшения скорости загрузки приложений CSS Animations -  если они существуют, значит это кому-нибудь нужно)) Landings - построение сложных и нестандартных лейаутов. Я выношу это отдельным пунктом, так как это несколько отличается от верстки дашбордов, где нужен компонентный подход Как видите, это не есть какой-то рокет сайнс.  Но жизнь показывает, что очень редко в других компаниях у верстальщиков есть возможность работать со всем из этого списка. 
20. Поэтому я призываю всех верстальщиков, если у вы чувствуете, что у вас есть силы и желание развиваться в любом из направлений, не бойтесь приходить к своему руководителю со своими идеями.  Во-первых, пока вы молчите, он думает, что вас все устраивает и ему незачем что-то менять. А во-вторых, возможно именно вы будете развивать новое направление в своей компании. 
21. Верстка она ж тем и прекрасна, что находится на пересечении всего: дизайна, бизнес анализа, прототипирования, фронтенда, бэкенда, менеджмента и у вас есть миллион возможностей проявить себя!