Инструменты Front-End разработчика. Современные инструменты для Front End разработки
В эту прекрасную пятницу осмелюсь предложить хабрасообществую небольшую подборку приложений, предназначенных для увеличения продуктивности во время работы с фронтэндом. Если ваш любимый апп здесь не представлен - добро пожаловать в комментарии!
Этот прекрасный генератор форм поможет вам в создании красивейших CSS логин-боксов и прочих input вещей, при минимальных временных затратах. Помимо форм на сайте этого проекта можно создавать и другие не менее красивые CSS элементы, в том числе кнопки и ленты.
Для любителей Twitter Bootstrap был создан этот генератор, благодаря которому вы сможете легко изменять начальные настройки стилей и приступить к прототипированию.
Переключатели и тумблеры на чистом CSS. Очень качественно и просто.
Colllor генерирует гармонирующую цветовую палитру на основе заданного цвета. Позволяет избежать эффекта «вырвиглаз» в ваших проектах, и при этом использовать широкий набор цветов.
Компрессия для ваших CSS и JavaScript файлов без забот и проблем.
Полезная утилита, синхронизирующая вносимые через FireBug изменения с CSS файлами. Можете представить, какое количество времени вы себе сэкономите.
Этот сайт поможет вам отсортировать CSS по заданным критериям, приоритетам, селекторам и так далее. Очень удобная вещь.
Генератор индикаторов загрузки для AJAX и jQuery. Легок в использовании и кастомизации.
Этот тул поможет вам сгенерировать симпатичную ленточку. Ну вы понимаете, что я имею ввиду - они нынче повсюду.
Проект typecast предназначен для шрифтовых экспериментов. 30 секунд на регистрацию, и у вас в арсенале довольно сильный инструмент, позволяющий делать всевозможные операции со шрифтами, и того как вы найдете свою идеальную комбинацию, все экспортируется в CSS. Ну разве не прекрасно.
Множество иконок и пиктограм для CSS использования на вашем сайте. Выбираете интересующие, смотрите preview и скачиваете. Все просто.
Удобнейший апп для создания спрайтов. Просто перетаскиваете необходимые изображения, кликаете Generate и получаете sprite sheet. Пока работает только в Chrome Firefox.
Если вы делаете responsive проект, то здесь вы можете проверить как он будет выглядеть на экранах различных устройств.
Хотите легко и непринужденно создавать анимации с CSS? Тогда вам по ссылке. Задаете направление, координаты, смотрите анимацию и скачиваете исходный код.
Еще один инструмент для работы с CSS спрайтами. Тоже drag"n"drop интерфейс, но мне он кажется по-симпатичнее.
Если вы любитель препроцессора LESS, то возможно вам будет интересен этот инструмент, конвертирующий из CSS в LESS одним кликом.
Отличный генератор бэкграундов. Огромный выбор текстур, эффектов и возможностей по их модификации.
SnipSave
Этот сайт предлагает вам хранить все свои CSS сниппеты в одном месте. У себя в библиотеке, то есть. Приятный интерфейс, работается с удовольствием.
Prefixr
Приложение от Jeffrey Way помогает быстро решать проблемы кроссбраузерности. Вы можете писать CSS код только под один браузер, затем пропускать его через Prefixr, и он будет генерировать недостающий код для верного отображения в других браузерах.
HTML5 PLease
Можно назвать этот проект онлайн-помощником по HTML5. Сомневаетесь в использовании конкретного нового тега? Сайт подскажет, стоит ли его использовать. И если стоит, то как именно.
Рано или поздно любой разработчик сталкивается с вопросом, какие инструменты лучше всего подходят для его работы. Выбор хороших инструментов позволит существенно увеличить производительность разработки и повысить качество кода. В данной статье мы рассмотрим используемые нами средства при разработке frontend-части наших проектов, также организации самого процесса.
Инструменты.
Профессионала своего дела отличает не только качество его работы, но и выбор инструментов, которые он использует.
Текстовый редактор
Стоит начать с текстового редактора. Большинство людей не пользуют его и на 50% от возможностей. Скорее всего, если вы пользуетесь чем-то лучшим блокнота, то вам могут быть доступны такие возможности как:
- Zen Coding
Позволит вам быстро создавать html-разметку. Экономит время и позволят постигнуть особый дзен. (Прочитать про то, что это такое, можно на этой странице).
- Live Templates
Нам часто приходится набивать одни и теже конструкции: объявление функций, объектов, конструкций языка. Live Templates позволит автоматизировать рутинный набор шаблонных кусков кода и сконцентрировать внимание на более важных кусках приложения. Ко всему прочему вы можете легко расширить набор шаблонов, создав их для фреймворков, которые чаще всего используете.
- File Templates
Шаблоны файлов позволят вам быстро разворачивать новые модули проекта. И также, как и в случае с Live Templates обычно можно расширять набор шаблонов необходимыми.
- Live Edit
Наличие такой функции у редактора позволит не обновлять браузер при верстке макета после каждой правки — это действие автоматизируется!
Отличный текстовый редактор, который можно рекомендовать — Sublime Text 2 . Поддержка плагинов на все случаи жизни, подсветка кода, кроссплатформенность — все это делает его отличным редактором для использования. К тому же он бесплатный.
Но для действительно крупных проектов мы используем PHPStorm /WebStorm от JetBrains. Эти продукты обеспечивают разработчика всем необходимым функционалом, особенностями, описанными выше, а также отсвечиванием кода и зависимостей между всеми файлами проекта.
Как SublimeText, так и PHPStorm поддерживают множество комбинаций клавиш, зная которые можно ускорить и упростить редактирование текста. Изучить комбинации можно используя сервис Shortcut Foo . Обучение проходит в игровой форме, так что это отличный способ совместить приятное с полезным.
Технологии
Используйте те технологии, которые позволят писать меньше кода для достижения того же результата. Однако помните, что поддержка получаемого кода должна выходить как можно дешевле.
К примеру хорошей практикой является использование sass/less, которые расширяют привычные нам css добавляя такие удобные механизмы, как переменные. После того, как ваши файлы стилей готовы, достаточно запустить программу-процессор, которая переведет sass/less в обычный css.
Использование БЭМ-методологии поможет крупным поектам не погрязнуть в коде верстке. Четкие разделение стилей на отдельные файлы и структуризаия их внутри каталогов позволит тратить меньше времени на поддержку кода. Основные принципы БЭМа можно прочитать . Также существует набор инструментов под названием bem-tools , который позвоялет быстро разворачивать файлы стилей.
Workflow
Отлаженный процесс разработки кода повышает скорость работы и ее качество.
Для обеспечения праллельной работы команды разработчиков используются стоит использовать стандартные средства, такие как git (про успешный git workfow можно прочить ). Для координации выполнения задач применяется система багтреккинга, к примеру Jira и Redmine .
Деплой проекта
Для разворачивания готового приложения на боевой среде мы используем Jenkins . Его задача — забрать из репозитория актуальную версию, и после окончания процесса сборки и подготовки файлов она должна вылить результаты на серверы. Для обеспечения этих процессов используется phing .
Остался открытым вопрос подготовки проекта к выливке. Для фронтенда на локальной среде разработки это обычно:
- Транслирование sass/less в css
- Контроль зависимостей
- Конкатенация файлов
- Проведение автотестов
Для продакшен-версии подготовка также включает в себя:
- Минификацию файлов
- Обфускация кода
- Оптимизацию изображений
Автоматизация всех этих действий — первостепенная задача, которую необходимо решить для организации оптимального процесса разработки.
Для выполнения данных задач мы используем проект Yeoman . Данный инструмент позволяет построить на своей основе весь процесс workflow frontend-разработки. Он реализует все указанные выше пункты.
Разработка с помощью Yeoman
Также Yeoman позволяет на своей основе построить весь процесс разработки фронтенда. С его помощью можно быстро развернуть структуру папок для типовых проектов. Для этого достаточно в папке проекта ввести команду:
yeoman init
Запустится диалог, после ответов на вопросы которого в каталоге развернутся служебные папки и файлы.
Помимо этого Yeoman позволяет указывать тип проекта. В таком случае он подготовит дерево папок и файлов для указанного фреймворка.
Выше было указано про такой удобный инструмент, как Live Edit. Так вот, Yeoman запускает веб-сервер для Ваших приложений с реализацией Live Edit. Для этого нужно вызвать команду:
yeoman server
Через пару секунд откроется окно браузера с запущенным приложением. Теперь любые изменения в html, css или js-файлах будут сразу же отображаться в браузере. Ваши sass-файлы также будут компилироваться в css после каждого их сохранения.
В данном материале, я хочу представить список инструментов которые помогают мне при разработке клиентской части приложения, сайта. Речь идет о Front-End разработки.
Кто такой Front-End разработчик?
После того, как сгенерировали необходимый шаблон время наступает верстать и работать с таблицей стилей.
Работа с CSS.
Есть очень много иструментов, генераторов для работы с CSS. Некоторые из них собраны вот в этой статье "Подборка генераторов CSS".
Сайт: http://habrahabr.ru/post/118056
В своей работе я сипользую только один генератор, это расширение CSSsir для браузера Mozilla Firefox. Простой и удобный в использовании инструмент, позволяющий в несколько кликов генерировать кросс-браузерный код основных CSS-свойств. Данный CSS3 генератор будет полезен не только web-мастерам и дизайнерам, но и обычным пользователям.
Сайт: https://addons.mozilla.org/ru/firefox/addon/csssir
Справочник CSS
Работа с динамикой сайта JavaScript и jQuery
Сервисы по работе с API jQuery.
jQuery Cheatsheet - Oscar Otero
JQuery Cheatsheet в HTML со ссылками на оригинальной документацию API. Удобен тем что собрано все в одном мсете, можно выбирать версии jQuery библиотеки и просмотреть какая версия что поддерживает. Описание фунций открывает в новом окне оригинальной документации.
Редактор «Нетологии» Светлана Шаповалова разбирается в том, кто такой фронтенд-разработчик, что он должен уметь (или не должен), и за что ему платят прекрасную зарплату (или не очень).
Кто такой фронтенд-разработчик
Согласно ежегодному исследованию StackOverflow, самая популярная профессия среди пользователей сервиса в 2017 году - это Web developer. Именно в эту категорию входят все фронтенд-разработчики.
Данные StackOverflow
Если зайти на первый попавшийся сайт по поиску работы, например, на hh.ru, создастся впечатление, что - это специалист-хамелеон.
Начинается все с путаницы в названиях вакансий: можно встретить и «front-end developer», и «front end разработчик», и «фронтендщик», и «фронтенд девелопер», и «web developer», и «фронтенд-разработчик». Иногда даже можно увидеть какого-нибудь «веб-верстальщика» с требованиями под фулстак-разработчика. Реакция на это одна: WTF?!
Беда в том, что часть работодателей не отличают (или не хотят отличать) верстальщика от фронтенд-разработчика, - это понятно по описанию вакансий. Разберемся, какие умения отделяют фронтенд-разработчика от «верстака» (верстальщики, не обижайтесь, вы тоже хорошие).
Верстальщик - боец узкого фронта. Его задача - сверстать полученный от дизайнера макет, используя HTML+CSS. Он, возможно, немного умеет в JavaScript, но чаще ограничивается умением прикрутить какой-нибудь плагин jQuery.
Фронтенд-разработчик не просто верстает макеты. Он хорошо знает JavaScript, разбирается во фреймворках и библиотеках (и активно юзает часть из них), понимает, что находится «под капотом» на серверной стороне. Его не пугают препроцессоры и сборщики LESS, SASS, GRUNT, GULP, он умеет работать с DOM, API, SVG-объектами, AJAX и CORS, может составлять SQL-запросы и копаться в данных. Получается сборная солянка навыков, к которым добавляется понимание принципов UI/UX-проектирования, адаптивной и отзывчивой верстки, кросс-браузерности и кросс-платформенности, а иногда и навыков мобильной разработки.
Фронтендщик в обязательном порядке умеет работать с контролем версий (Git, GitHub, CVS и т. д.), использовать графические редакторы, «играть» с шаблонами различных CMS.
Еще крайне желательно знать английский язык, чтобы не переводить спецификацию в Гугл-переводчике, уметь работать в команде, иногда мультиязычной, разбираться в веб-шрифтах, ну и понимать тестировщиков и сам процесс тестирования.
Итак, какие технологии должен освоить фронтенд-разработчик:
- HTML и CSS (в том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills)
- Препроцессоры CSS (Sass, Less, Stylus и т. д.)
- JavaScript
- Популярные фреймворки и библиотеки: jQuery, Angular.JS, React.JS, Backbone.js и т. д.)
- OOCSS / BEM / SMACSS
- HTML5 API
- ECMAScript 6
- Популярные CMS (WordPress, Drupal, Joomla и т.д.)
- Понимать и разбираться в серверных технологиях (Node.js, PHP, Ruby, .NET и т. д.)
- Инструменты дебаггинга (Chrome Dev Tools, Firebug и прочие)
- JavaScript транспайлеры (Babel)
- Инструменты контроля версий (Git, GitHub, CVS и т. д.)
- Базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB и т. д.)
- Графические редакторы (Photoshop, Illustrator и т. д.)
- кросс-браузерная и кросс-платформенная разработка;
- прогрессивное улучшение и изящная деградация;
- мобильная разработка;
- адаптивная и отзывчивая верстка;
- веб-шрифты;
- принципы SEO-оптимизации.
Что говорит статистика
Какие технологии и инструменты чаще всего используют фронтенд-разработчики? Во-первых, трудно представить фронтендщика, не умеющего в JavaScript. Это подтверждают опросы:- по данным StackOverflow, JavaScript в списке инструментов фронтенда лидирует с огромным отрывом (90,5%)
- исследование компании O"Reilly, проведенное среди европейских программистов в конце 2016 года, тоже ставит JavaScript на первое месте.
Данные StackOverflow
Если сгруппировать самые популярные инструменты в стеки, то получим такую ситуацию:
Данные StackOverflow
А набор самых популярных фреймворков и библиотек всех разработчиков выглядит следующим образом (см. иллюстрацию). Приятно видеть среди этого списка инструменты фронтенда:
Данные StackOverflow
Карьерный путь и зарплата фронтенд-разработчика
Карьерный путь фронтендера обычно начинается с верстальщика - это самый логичный и общепринятый вариант. Сначала изучается связка , затем на нее «наслаиваются» знания , библиотек и фреймворков. Будущий специалист также изучает ключевые понятия построения серверной части, добавляет сюда инструменты, необходимые для выбранной специализации. Затем все это шлифуется умением работать с контролем версий, графическими редакторами и пониманием принципов .Бывают и иные варианты. Если начинающий программист изначально знает, в какой сфере планирует развиваться, ничто не мешает ему изучать ключевой стек технологий сразу, а не по частям. Все зависит от целей и времени, которыми располагает будущий фронтендщик. Любой вариант приемлем, лишь бы на выходе получился толковый специалист.
У готового фронтенд-разработчика в целом есть три основных варианта развития:
- горизонтальный (совершенствоваться как специалист, тем самым постоянно повышая свою стоимость на рынке труда);
- вертикальный (расти по карьерной лестнице);
- диверсификационный (освоение смежных специальностей, превращение в фулстака и переквалификация).
Какой из них выбрать - зависит лишь от самого специалиста и его пожеланий/навыков.
Касаемо зарплат фронтенд-разработчиков: здесь, как и во всей IT-индустрии, нет единого стандарта оплаты. Все зависит от навыков и умения подать себя. Ну, и от везения иногда:)
Средняя зарплата фронтенд-специалиста по России, рублей/месяц
Средняя зарплата фронтенд-специалиста по Москве, рублей/месяц
По данным «Моего круга»
Традиционно годовая зарплата фронтенд-разработчиков в США чуть выше, чем по России. Однако, если вы работаете в филиале иностранной компании - вам такой разрыв, скорее всего, не страшен.
По данным PayScale
Как стать фронтенд-разработчиком
Для начала снять розовые очки. Обучение - это труд и самодисциплина. Большинство начинающих айтишников отсеиваются на этапе «хочу стать программистом и получать зарплату в долларах, но не думал, что придется так много учиться». Уникальность программирования и вообще любой айтишной специальности в постоянном самообучении. В этом и сложность, и прелесть IT-сферы. Если вас это не пугает - круто! У вас есть все шансы стать отличным специалистом.Главное правило будущего специалиста - ставить реальные цели в процессе обучения. В этом поможет планирование. Составьте список инструментов, которые планируете изучить, и держите его перед глазами.
Тем, кто стартует с нуля, надо начинать с и освоить их на уровне идеальной верстки PSD-макетов. На этом этапе также надо научиться работать с текстовыми и графическими редакторами и знать основные принципы дизайна (как плюс). Затем взяться за JavaScript: синтаксис, архитектура и возможности языка. Освоить популярные фреймворки и библиотеки, параллельно полюбить системы контроля версий и какой-нибудь из популярных таскраннеров. Добавить препроцессоры и фреймворки CSS, разобраться в серверных технологиях. А дальше можно пить смузи на Бали шлифовать полученные знания до бесконечности.
Примерный путь начинающего фронтенд-разработчика.
У вас он будет свой.
Пройти этот путь можно как в одиночку, так и с наставниками (вузы, курсы). Вот какие самые популярные форматы обучения разработчиков по версии StackOverflow:
Данные StackOverflow
На первом месте находятся онлайн-курсы, за них проголосовали 64,7% опрошенных разработчиков, затем идут: самообучение по книгам, офлайн-курсы, опенсорс-разработка и лагери программирования. Интересно, что высшее образование (Master’s degree) стоит практически на последнем месте.
Вывод
- это универсальный солдат. Он и макет заверстает, и веб-приложение построит, и серверную часть, если надо, освоит. Знать надо немало: HTML, CSS, JavaScript, библиотеки и фреймворки JS, препроцессоры и фреймворки CSS, системы контроля версий и таскраннеры, технологии бэкенда, юнит-тестирование и многое другое.Кроме того, нелишними будут soft skills: взаимодействие с людьми и работа в команде, умение наладить эффективный workflow и решать поставленные задачи наиболее оптимальным способом. Не обойтись без уверенных знаний английского языка.
Оплата труда фронтенд-специалиста вполне себе достойная, и чем больше навыков - тем выше шансы получить «жирный» оклад.
Стать фронтенд-разработчиком может каждый, кто не пасует перед самообучением: как мы выяснили, полагаться на вузовское образование сложно. Идеальный вариант - различные онлайн и офлайн-курсы + литература по теме, практика и великий Гугл.
«Нетология» запускает полноценную программу подготовки фронтенд-специалистов - . Это 6-месячный курс, посвященный базовым технологиям фронтенд-разработки: HTML и CSS, JavaScript, Web API, AJAX, веб-сокеты, библиотека React.
По итогу курса студенты создадут собственное одностраничное веб-приложение. Обучение ведут 10 практикующих фронтенд-специалистов - это позволяет получить всестороннее понимание инструментов и задач фронтенд-разработки. В течение всего обучения студенты получат не менее 100 практических заданий, максимально близких к «боевым», и реализуют 3 проекта среднего объема и 1 полноценный проект в качестве дипломной работы.
Все студенты, успешно окончившие курс, получают удостоверение о повышении квалификации установленного образца и фирменный диплом «Нетологии».
P.S. Как вы считаете, какие знания жизненно необходимы фронтенд-разработчику, а какие можно осваивать по мере надобности?