КОГО ТЫ ИЗ СЕБЯ СТРОИШЬ: ФРОНТЕНД РАЗРАБОТЧИК vol.2

image

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

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

ШАГ 4 – JQUERY ПЛАГИНЫ

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

ШАГ 5 – В ЧЕМ ПИСАТЬ?

Этот вопрос может возникнуть на любом этапе вашего погружения в профессию. Ответ на него сможете дать только вы. Пробуйте разные варианты: с чем вам будет работать наиболее удобно и комфортно, то и используйте. Я могу лишь немного посоветовать. Во-первых, я бы условно разделил редакторы на два типа: редакторы для быстрого кодирования и редакторы для проектов. Первые предназначены для случаев, когда вам нужно быстренько что-то написать либо поправить (ими могут быть даже простые текстовые редакторы наподобие «Блокнота»). Вторые же – для разработки больших проектов и использования всевозможных дополнений в функционале (ими могут выступать интегрированная среда разработки (IDE)).

Разберемся с первыми. В самом начале своего пути мне очень понравился редактор Brackets, но когда проекты становились все крупнее и крупнее, я понял, что его функционала начинает не хватать, а для быстрого кодирования он перестал подходить из-за медленной работы. Я попробовал Sublime Text, но почему-то он меня не зацепил, хоть его быстродействие на высоте. Также очень хороший редактор Atom, но в нем довольно запутанная система горячих клавиш. Сейчас же я использую Microsoft Visual Studio Code, который для меня оказался самым приятным объединением всех лучших качеств предыдущих продуктов.

В качестве IDE я использую WebStorm, который имеет огромное количество разнообразных настроек рабочей области, подсветки синтаксиса, интеграций с различными технологиями и т.д. Также очень хороший продукт Microsoft Visual Studio, но, к сожалению, он отсутствует на MacOS (к этой теме я еще вернусь в следующих шагах).

ШАГ 6 – ДРУГИЕ НЕОБХОДИМЫЕ ИНСТРУМЕНТЫ

Помимо средств разработки, нам как фронтендщикам необходимо ознакомиться с инструментами, которые использует наш друг – дизайнер, а это скорее всего будут Adobe Photoshop (для растровой графики и макетов веб-страниц) и Adobe Illustrator (также макетов веб-страниц и для векторной графики). А если дизайнер не просто ваш друг, а лучший друг, то он будет использовать Sketch или Figma (это редакторы векторной графики, которые предназначены специально для создания макетов сайтов и приложений).

Ошибочно преуменьшать роль дизайнера в создании сайта, ведь, по сути, фронтендщики – воплотители его безумных идей. Так же ошибочно называть веб-разработчиков веб-дизайнерами, так как мы с вами разрабатываем и кодируем, а непосредственный дизайн веб-страниц это задача “промышленного дизайна” и его адепта – веб-дизайнера.

Знать все вышеперечисленные программы досконально вам не требуется. Необходимо понимание некоторых основных принципов работы и умение прочитать что же там надизайнил дизайнер. Рекомендую освоить прекрасный инструмент Zeplin, который поможет вам в этом самом прочтении макетов.

Также не забудьте, что в вашей обойме должны быть самые популярные браузеры – Google Chrome, Mozilla Firefox, Edge и Safari (тут возникает небольшая проблема, ведь Edge нет под MacOS и Apple перестали выпускать Safari под Windows, поэтому желательно придумать вариант обхода данной загвоздки путем поиска дополнительных инструментов (BrowserStack), либо установки виртуальной машины). Стоит отметить, что одинаковые браузеры работают по-разному на разных операционных системах. Да-да, кроссбраузерная верстка еще та шельма.

ШАГ 7 – CSS-фреймворки

Следующим шагом является освоение вашего первого фреймворка. Фреймворк – это уже заготовленный набор правил для разработки ваших веб-страниц. В последнее время их становится все больше и больше, но принцип работы и функционал у них довольно схожий. Самыми популярными из них являются Bootstrap, Foundation Semantic-UI. Принципы их работы уже являются негласным стандартом. Освоение их будет огромным плюсом в понимании верстки и построении разных элементов, таких как «футер», «хэдер», «меню», «основной контент», расстановка блоков, колоночной вёрстки и т.д. Попутно вы ознакомитесь с приципами работы адаптивной верстки, что сейчас является стандартом для всех сайтов.

Официальные сайты фреймворков содержат в себе довольно подробные инструкции по использованию и примеры, так что проблем с освоением возникнуть не должно. К тому же у Bootstrap и Foundation довольно активное сообщество, поэтому ответы на возникающие вопросы будет довольно просто найти.

Очень легко подсесть на «иглу» фреймворков и применять только их, но я бы посоветовал со временем от них отказаться в пользу собственным наработкам и использованию более точечных плагинов. Например, у вас одностраничный сайт, где используется только слайдер и модальное окно. Использовать для таких целей огромные и увесистые фреймворки совсем не обязательно. На данный момент в своей работе я использую только сетку от Bootstrap 4 не подключая его скрипты и другой функционал.

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