1 заметка с тегом

jquery

Что должен знать фронтэнд разработчик?

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

Меня часто спрашивают, что нужно изучить, чтобы начать работать как верстальщик или фронтэндер, и по статистике, в моем FAQ одноимённый вопрос один из самых популярных.

Это стало мотивацией написать пост-инструкцию о том, как стать востребованным фронтэнд разработчиком, использующим современные инструменты для работы над проектом как одному, так и в команде.

Инструкция в некоторой мере повторяет мой путь, что гарантирует как минимум 25$ рейт для человека, который основательно и дисциплинированно пройдет по ней(это мой фактический по часовой рейт на бирже на момент написания статьи).

Примечание: Я неспроста выбрал именно такой порядок изучения, и поэтому желательно придерживаться именно такой последовательности, не перепрыгивая через пункты, если вы не владеете ими на необходимом уровне. Это не касается пунктов 0 и 3.

Если у какого-либо пункта стоит невысокий показатель важности, это не значит, что его нужно пропускать, просто незнание этого пункта усложняет процесс разработки в той или иной степени.

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

0. Английский язык

Сложность 3/10
Важность 10/10

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

В случае с фундаментальными книгами, типа JavaScript. Definite Guide — вы с лёгкостью найдёте локализованную версию, но если это статьи из блогов, новостных сайтов или тематических сообществ, то как минимум перевод вы увидите через некоторый период после публикации, а как максимум его просто не будет.

Если уж говорить о видеокурсах, ответах на вопросы на StackOverflow и дискуссиях в сообществах — перевода можно и не ждать с 99% вероятностью.

Английский язык также пригодится при общении с клиентами из разных стран.

DuoLingo

Основы грамматики, начальный словарный запас, тестирование своих навыков

LinguaLeo

То же что и на Дуолинго, с хорошим упором на проработку словарного запаса и аудирования. Пригодится для того, чтобы стало проще изучать материалы по видеокурсам.

• Технические статьи

Можно начинать изучать технические статьи и видеоуроки из списка ниже, держа под рукой словарь. Первой технической книгой, которую я читал на английском языке была ФЛЭНАГАН РУБИ, поначалу я заглядывал в словарь по несколько раз на страницу, но уже к середине книги я отложил его и скорость моего чтения и усваивания информации возросла. Техническая литература ПРОЩЕ художественной, а учитывая, что подобные книги как минимум на треть состоят из фрагментов кода, порог вхождения в мир технической литературы снижается пропорционально.

• Переводы

Только через 2 года после того, как я научился читать техническую литературу я открыл для себя способ, очень хорошо прокачивающий знание языка — перевод. Когда мы читаем на английском, смысл сам приходит в голову без литературной подачи на родном языке. Но когда вы пытаетесь переводить это так, чтобы грамотно и красиво изложить для последующего прочтения, включается противоположный навык — англо-русский перевод.
Он поможет более корректно понимать информацию, что особенно важно при общении с заказчиками.

1. HTML/CSS

Сложность 4/10
Важность 10/10

HTML и CSS это язык разметки и таблицы стилей. Ключевая связка не только для фронтэндера, но и для веб-разработчика/веб-дизайнера.

Так как это не языки программирования, понять принцип и сделать первую HTML страничку очень просто, вы сможете сделать это буквально через пару часов после знакомства с ними.

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

Но отчаиваться не стоит, главное — заложить прочный фундамент понимания как это работает, а дальше просто практиковаться, держа под рукой справочник с перечислением тэгов, селекторов и свойств.

HTMLAcademy

Лучший русскоязычный ресурс по изучению разработке, и в то же время лучший способ быстро понять принципы вёрстки, а также начать привыкать к тэгам, свойствам и значениям.
Интерактивное обучение с интересными задачами не дадут вам заскучать. А после прохождения бесплатных курсов вы скорее всего захотите купить подписку на сайте(300₽), которая даёт доступ к изучению дополнительных тем.

• Codeschool, FreeCodeCamp, Codecademy

CS
FCC
Codecademy
На этих ресурсах тоже есть курсы по вёрстке, они несколько уступают HTMLAcademy, но всё же тоже дают некую базу. Ресурсы перечислены в порядке убывания качества информации.

• Справочники, спецификации

HTML Book
W3C Schools
MDN
Подробное описание всех CSS селекторов
Сюда вы будете заглядывать, чтобы подглядеть параметры свойств и аттрибуты тэгов.

• Практика

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

2. Twitter Bootstrap

Сложность 2/10
Важность 7/10

Самый популярный css-фреймворк, и скорее всего первый фреймворк на вашем пути.
Bootstrap — это набор стилей, а также JavaScript ШТУЧЕК, которые ускорят вашу разработку.

Существует множество других css-фреймоворков, но владеть Bootstrap'ом должен каждый веб-разработчик или веб-дизайнер.

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

Когда вы будете выходить из разряда джуниора на вышестоящий уровень, нужно будет научиться собирать его из исходников, оставляя лишь те части, которые вам понадобятся в проекте. К этому можно будет вернуться 6 пункта из этого списка.

• Документация

Bootstrap 3
Bootstrap 4 alpha

Курс на CodeSchool

• Другие CSS-фреймворки

Foundation
Semantic UI
сравнение

3. Работа с командной строкой и системами контроля версий(СКВ)

Сложность 5/10
Важность 9/10

Для полноценного воркфлоу вы должны уметь пользоваться командной строкой и СКВ хотя бы на среднем уровне.

Использование git-репозиториев избавит вас от опасений что-то случайно удалить из проекта, в разы увеличит удобство при работе в команде разработчиков, также я пользуюсь GitHub Pages, чтобы показывать процесс работы клиенту, размещая проект в приватном репозитории, но хостя страницы для доступа по ссылке.

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

• Codeschool

Git Path
На кодскуле есть ветка посвященная git и github, очень подробно разбираются все моменты, первый курс из четырёх доступен без платной подписки.

ProGit 2

Переведённая на русский язык версия популярного учебника.

• Курс по основам командной строки

Command Line Power User
Серия бесплатных уроков, чтобы получить их — нужно оставить свой почтовый адрес.

4. JavaScript

Сложность 8/10
Важность 8/10

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

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

• Codeschool

JS Path
Множество отличных курсов в специальной ветке, посвященной языку.
(CoffeeScript, Node, Express можно пропустить, если вы пока не хотите писать бэкенд)

Learn JavaScript

Замечательный источник для изучения, да ещё и на русском языке. На мой взгляд не имеет аналогов. В конце каждой темы есть задачки на отработку.

• Книги

Носорог
Выразительный JS
Good parts

• JS Right Way

Лучшие практики языка

Ооочень много всякого разного

Задачки по JS

FreeCodeCamp

Основной упор ресурса идёт как раз на JavaScript, очень много задач как алгоритмического характера так и практического(т. н. Ziplines).
Можно получить бесплатный сертификат, а также поработать в опен-сорс проектах.

5. Gulp, Webpack

Сложность 5/10
Важность 9/10

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

Webpack не совсем является таск-раннером, в отличии от Gulp, это более сложный инструмент дающий уникальные возможности при разработке.

Я выбрал именно эти 2 инструмента, потому что они самые передовые в своей отрасли, а также не исключают друг друга.

• Илья Кантор

Gulp
Webpack
Замечательные бесплатные видеокурсы посвященные обоим инструментам научат вас пользоваться ими на хорошем уверенном уровне.

Официальная документация Webpack

Разбор сложных моментов Webpack

6. Препроцессоры

Сложность 2/10
Важность 8/10

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

Код с использованием препроцессоров Jade и Stylus

Код написанный на чистом HTML и CSS

Я думаю, визуальная разница очевидна.

Помимо отличий в синтаксисе, препроцессоры также дают возможность использовать наследование, переменные, циклы, функции, миксины и многие другие фичи, упрощающие жизнь верстальщика.

Существует множество препроцессров, я предпочитаю использовать Jade и Stylus, они позволяют мне не писать лишние символы в проекте, поддерживая код чистым и легкочитаемым.

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

Курс Sass на Codeschool

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

• Официальные источники с документацией

Sass(SCSS)
LESS
Stylus
Jade

7. jQuery, jQuery UI, основы AJAX/JSON

Сложность 7/10
Важность 9/10

jQuery — самая популярная библиотека для JavaScript, она значительно упрощает работу с DOM-элементами, обменом данными с сервером(AJAX/JSON) и другими каждодневными задачами.

jQuery UI — это набор функций, предоставляющих различные визуальные эффекты, стоит научиться ими пользоваться, чтобы не изобретать каждый раз новые и не всегда надёжные решения.

Ваше приложение уже живое и интерактивное, но оно также должно уметь управлять данными. Поэтому в этом этапе я предлагаю научиться работать с AJAX, так как это самый популярный метод для обмена данными.

В очередной раз несколько курсов на CodeSchool

Официальная документация jQuery

Официальная документация jQuery UI

Примеры использования jQuery(тут же есть и AJAX)

Курс на Codecademy

Кратко о JSON

8. ES2015(ES6)

Сложность 4/10
Важность 7/10

Ecmascript2015 — новый стандарт языка JavaScript, добавляющий синтаксический сахар и дающий новые возможности.

Если вы купили подписку на CodeSchool, то наверняка видели раздел посвященный этому стандарту, если нет, можно посмотреть это:

Статья на CSS-Tricks

Нужно знать, что ES2015 синтаксис не полностью поддерживается современными браузерами, поэтому код приходится компилировать, для этого нужно использовать Gulp или Webpack из пункта 5.

9. Тесты

Сложность 5/10
Важность 6/10

Я не буду много говорить о тестах, просто посмотрите этот видеоролик:

10. JS-фреймворки

Сложность 9/10
Важность 9/10

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

Для эффективной работы вышеупомянутых действий необходимо использовать фреймворки. Фреймворки бывают разные, но самые популярные сейчас это React, Angular 1-2, Vue, Ember. Все они относительно похожи, но имеют свои особенности. Вам стоит выбрать понравившиеся и развиваться в них.

P.S. React это не совсем фреймворк, фактически это библиотека для рендеринга данных, но он часто используется в таком контексте, а связка с использованием Redux/Flux и других архитектур позволяет реализовывать любые хотелки клиента.

Официальный туториал по Angular 1.x
Документация Angular 2
Официальный туториал React
Раздел JS на CodeSchool

Содержит много курсов по фреймворкам, скоро появится курс по Angular 2. Я думаю, Backbone можно не рассматривать, ну а курсы по Angular и React пройти надо.
Кстати, первый курс по Angular полностью бесплатный.

Вопросы на собеседование по Angular 1.x
Шпаргалка по React


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

http://frontendbookshelf.ru

https://frontendfront.com
https://new.vk.com/jsraccoon
https://css-tricks.com
https://scotch.io/
http://www.unheap.com/

https://medium.com/@rajaraodv/webpack-the-confusing-parts-58712f8fcad9#.a4tu4t2iq
https://github.com/bolshchikov/js-must-watch
http://www.clock.co.uk/blog/javascript-frameworks-in-2016
https://egghead.io/series/getting-started-with-redux
http://codepen.io/enxaneta/full/adLPwv/

Благодарю за внимание, если вам понравилась эта статья — сделайте репост и напишите комментарий :)

2016   code   css   english   es6   frontend   git   html   jquery   js   learn