Год верстки

Откровения начинающего верстальщика

tl;dr как хокку
Дизайн изучал много лет.
Порхнул журавль в небе.
Радует сердце верстка.

Давайте сразу договоримся

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

Заголовок вышел немного пафосным, виной тому мое графоманство, но это не умаляет его сути.

Шесть лет я работал дизайнером. И вот на следующий день я закрыл photoshop и принял серьезное решение расстаться с дизайном и стать веб-разработчиком.

Причины и мотивация

После переезда из маленького Магнитогорска в белокаменную изменился привычный образ жизни. Москва меняет людей. Хочешь ты этого или нет. Я стал иначе смотреть на жизнь в целом и это отразилось на моем отношении к работе. Все нижеперечисленное носит исключительно субъективный характер и справедливо только относительно моего случая.

  • Разочаровался (это мягко сказано) в бизнес-процессах выстроенных вокруг веб-дизайна в России. Слишком много человеческого фактора присутствует в конечном результате дизайна. Со временем стало понятно, что хочу работу, в которой процесс зависит от меня и у конечного результата может быть только две сущности это либо работает, либо нет, а не «может поставим банер с кошечкой» и «давайте шрифтами поиграем».

  • В связи с первым пунктом, я понял, что мой поезд творчества набирает скорость и покидает перрон. Надо было срочно сдавать билет. Результат становился все хуже, роста не было, мотивация уже догорала. Нельзя было задерживаться на поприще дизайна. Особенно когда настигнет кризис среднего возраста и надо будет подводить какие-то итоги: "мне 36, у меня все впереди", я бы не хотел его встречать с нелюбимой работой и неудавшейся карьерой.

  • Со временем системное мышление стало преобладать над творческим. В работе захотелось того же самого.

  • Мое желание постоянно оптимизировать рабочие процессы наконец-то полностью раскрылось в новой стезе.

  • Мне всегда нравилось печатать. Лол.

Нельзя просто взять и сменить профессию.

С дизайнера на программиста.

Я прекрасно понимал, что не стану junior-программистом за 3-4 месяца, а становится быдло-кодером на похапэ не было моей заветной мечтой. Так или иначе мне надо было сразу начать зарабывать, нельзя было простаивать (дело происходит в Москве на съемной квартире), а от дизайна уже тошнило. Поэтому был выбран путь наименьшего сопротивления. Я решил постигать азы веб-разработки именно с верстки, все-таки невысокий порог вхождения (только вот не надо кидаться ссаными тряпками) и это визуальная составляющая сайта, что естественно близко мне по духу, как бывшему дизайнеру. С начала добиться каких-то успехов в frontend, а потом уже смотреть куда бы я хотел двигаться дальше. Может и тут остаться.

Этот год был для меня бешенным в плане поглощения и усвоения новой информации. Надо было погрузиться в абсолютно новый для меня мир веб-разработки. Посмотреть на сайты с другой стороны, узнать что происходит с макетом, когда я передаю его веб-разработчику. Начать изучать с нуля все технологии, о которых я когда-либо слышал и которые оживляли мои картинки. Пока я там в photoshop’e калякал и попивал латтэ, веб-разработка развивалась бешененными темпами. Чего только стоит, еще продолжающаяся, история успеха javascript.

Первым делом из закладок ушли дизайн-сайты. На смену Dribbble, Behance, Pinterest пришли Reddit, Github, Habrahabr (хотя я его и раньше читал, но теперь это уже были более специфичные темы). Перестал обсуждать новые работы Лебедева и подарил планшет сестре. В твиттере кардинально изменились подписки, если раньше это были дизайнеры и дизайн-агреггаторы, то теперь это стали известные русские и зарубежные frontend-разработчики. Твиттер для меня до сих пор остается лучшим местом для получения информации и общения с видными деятелями в мире разработки.

Я сразу понял, чтобы добиться каких-то успехов и призвания, нельзя заниматься версткой абы как: «лишь бы отображалось» или «в любой непонятной ситуации ставь overflow hidden». На тот момент я уже наблюдал верстаков в своем окружении и понимал, что так верстают только мудаки. За такую верстку умные люди в лицо кулаком дают. И я стал изучать. Смотрел как это делают другие, задавал дурацкие вопросы, просматривал исходники всяких крутых веб-сервисов, часами сидел в developer tools и пытался понять почему именно так сделано, почему именно так класс назвали, почему именно эту технику применили. Очень помогли видео с субботников Яндекса.

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

И я верстал. Каждый день. Даже если не было макетов, искал на themeforest превьюхи в нормальном качестве и верстал их. Мне нравилось верстать, мне нравилось учиться чему-то новому каждый день. Это настроение сохранилось и по сей день.

Javascript и все-все-все

Я узнал что у меня, есть огромная семья, и тропинка, и лесок, в npm каждый колосок. Целый год я знакомился с новыми технологиями и вот их небольшой чарт. Список идет в порядке возрастания того, как технология меня впечатлила:

  • Препроцессоры: Jade, Haml, Sass, Stylus. Где-то через месяц, как я начал активно верстать, я понял что так дальше не может продолжаться, руки стачивал по локоть при написании сложных селекторов и закрытии тэгов. Я был уверен, что можно упростить написание, что можно писать быстрее и понятнее, что можно избавиться от лишнего синтаксического мусора. Тогда я познакомился с Sass. A потом и с Jade, с его возможностью локально инклудить — это вообще пушка. Даже если в проекте две страницы, я все равно использую препроцессоры.

  • Методологии: BEM, OOCSS, SMACSS. Когда начинаешь пользоваться препроцессорами на каком-то интуитивном уровне понимаешь, что файлы необходимо дробить и тогда приходят первые зачатки методологии, пусть и топорные: отделить хидер от футера. Без методологии верстальщик заблудится в трех span’ах.

  • Task-runners: Grunt & Gulp. Через два месяца я понял, что запускать guard livereload не самый лучший помошник в локальной разработке. И я познакомился с Grunt. Он до сих пор классный, но я перебрался на Gulp из-за скорости и возможности писать таски на нормальном js.

  • Javascript. Одним словом я хотел бы обозначить данный пункт. То что происходит в мире javascript вдохновляет меня каждый день. Node.js, Angular, Backbone, Browserify, Three.js, d3.js, этот список можно продолжать бесконечно. Только я подумал о необходимой библиотечке для внедрения в разработку, а она уже появилась в npm.

  • Unix-way. Я сейчас не имею ввиду саму идеологию, а таким образом назвал пункт, который повлиял на меня больше остальных. Когда-то давно, когда я стал дизайнером, я очень полюбил продукцию компании Apple, а конкретно Mac OS. Для меня это самая удобная система, и при этом она не оставляет равнодушным мои эстетствующие чувства. Но когда я начал заниматься разработкой и познал для себя чудесный мир unix, я заново открыл для себя Mac OS. Никогда не думал, что под капотом может быть также прекрасно как и снаружи. Этот пункт необходимо разделить на несколько подпунктов, потому что все нижеописанное требует отдельного внимания:

    • Unix Shell. Это вообще какое-то волшебство. Романтика из фильмов про хакеров. После знакомства с оным, GUI для меня стал каким-то недоразвитым ребенком. Не надо мои слова воспринимать категорично, просто со временем я себя поймал на том, что большинство рутинных действий в системе: создать папки, файлы, переместить, не говоря уже о подключении к удаленным сервакам, я начал делать в терминале. Это быстрее, удобнее, без тысячи окон, работа в система становится осознанной и прозрачной, rm -rf становится не так страшен. В итоге я, как и все нормальные хипстеры, остановился на iterm + zsh + oh-my-zsh.

    • Vim. Эту чудную печатную машинку я хотел бы отдельно выделить. И все потому, что когда ты большую часть времени проводишь в консоли (запуск тасков, создание файлов), ты понимаешь, а почему бы собственно и не редактировать все тут же? И я познакомился с Vim, научился работать в нем и мне нравится. Не холивара для, если вам нужна IDE пользуйтесь ей. Vim — это просто эффективный текстовый редактор.

    • Git. Хотел бы я чтобы в дизайне было подобное. Это бы так упростило работу. Вообще шикарная вещь. Спасибо Линусу Торвальдсу за нашу счастливую разработку.

В этом списке отсутствуют такие банальные вещи как: html, css. Для моей профессии это хлеб и масло. Эти технологии надо просто знать. За ними надо следить, пробовать новые штуки, читать изменения в спецификациях, чтобы всегда оставаться в теме. Особенно важно знать и уметь применять их до того как воспользуетесь препроцессорами. Тоже самое справедливо насчет javascript, никакого coffeescript пока домашку не сделал.

Ну и что в итоге?

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

Дизайнер, который смог.