F.a.q для новичков в web-программировании / как начинать / front-end

Интро​

Этот FAQ посвящен вкату во фронтенд-разработку. Данное вступление было составлено со слов уже опытных скриптовоенов для неуверенных в себе инфантилов. Прежде, чем задать очередной глупый вопрос — прочитай.
В 2017 фронтенд-разработчик — это продвинутый формошлеп, который, в основном, копается в JS. Это не значит, что изучать верстку не обязательно — даже если на работе верстать не будете, на собеседовании обязательно спросят какую-нибудь фигню.

Что нужно знать на позицию фронтенд-разработчика начально-среднего уровня:

• HTML + CSS
• JS с ES6-синтаксисом
• Фреймворк_нейм. Лучший выбор для новичка по прежнему React. Еще есть Vue, но работы сильно меньше, и знаний в процессе изучения получите сильно меньше. Если генетика одарила вас железобетонной силой воли — можно потыкать Angular 5(ха).

Попутно изучается работа с эмулятором терминала ("пресвятая консолечка"), git, инструменты сборки (как минимум webpack, желательно пощупать gulp), npm|yarn.

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

Спойлер: Ответы на самые популярные вопросы:

Ответы на самые популярные вопросы:

Можно

Можно.

Можно.

В любой цивилизованной стране 25 лет - это начало самостоятельной жизни, но забитые СНГ-омежки продолжают думать, что к 25 надо уже родить 3 детей, взять ипотеку и построить карьеру, после чего сдохнуть, ведь биологическая программа выполнена, родина-мать не забудет, а дети продолжат заданную линию поведения.

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

Да. В обозримые n лет была, есть и будет. В России это чуть ли не единственный рынок на котором сейчас растут зарплаты.

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

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

Много. В среднем, путь с нуля до уровня более-менее шарящего реактодебила/вьюдераста потребуется около года.

Можете, но это вряд ли будет эффективно.

Мы тоже такое слышали, но обычно под "портфолио" понимают профиль на гитхабе и ссылочки на завершенные/активные проекты (если позволяет NDA|заказчик). В принципе, если не лень — можно даже простенький сайтецкий о себе забацать.

Жизнь сложнее конструктора.

Верстка​

Основы
Что нужно знать:

• HTML:
  • Структура документа
  • Разметка
  • Тэги
  • Атрибуты
• CSS:
  • Основные селекторы (без фанатизма)
  • Основные свойства (отступы, размеры, цвет, шрифты и прочее)
  • Наследование свойств, каскад, вложенность
  • Основы сетки: блочная модель, флоаты, инлайн-блоки
  • Свойства position
• Все вместе:
  • Типовая разметка текста
  • Картиночки, ссылочки
  • Таблички, списочки
  • Формы, инпуты, лэйблы

Итого
Умение сверстать простенькую статику, без новомодных фич, без семантики, модульности, бэмов, шмэмов, респонсивности и прочего.

На все про все около месяца.

Где учить, что читать?

• Старт: интерактивные курсы хтмл академии: https://htmlacademy.ru/program бесплатных вполне хватит, но можно и оплатить подписку (лучше не надо).
• http://htmlbook.ru/
• https://webref.ru/
• Базовый интенсив все той же академии (брать на торрентах)

Не стоит увлекаться просмотром сотен тысяч курсов, вебинаров, туториалов и прочему. Как правило хтмл академии + хтмлбука более, чем достаточно для усвоения азов верстки.

Очень подробный верстка-гайдлайн
Стоит как минимум бегло просмотреть и прикинуть, что к чему: http://webmasters.teamdev.com/

​

Верстка advanced
​

Что нужно знать:

• HTML5:
  • "Новые" тэги
  • "Новые" атрибуты
  • Формы и инпуты
  • SVG
  • Семантика
• CSS:
  • Продвинутые селекторы (опять же без фанатизма, но знать полезно)
  • Градиенты, трансформации, анимации, переходы и прочие приколюхи
  • Флексы, гриды
  • Респонсив ("адаптивность")
  • Любой CSS фреймворк (bootstrap / foundation)
  • SVG
• О дивный новый мир:
  • Автоматизация (галп, нпм / йарн + скрипты)
  • Организация структуры проекта
  • Препроцессоры (любой на выбор)
  • Какой-нибудь template engine (pug, как один из самых популярных)
  • Работа в терминале (да, анон, удаляй свой github desktop, вот прямо сейчас)
• Не помешает:
  • Умение самостоятельно размечать и реализовывать динамические штуки (слайдер, например)
  • Примерное понимание как работает js || jq

На все про все: еще месяц-два-три в худшем случае.

Итого получаем:
Готовую личинку верстальщика, которая сможет заверстать статику любой сложности по данному макету. Теоретически можно работать за дошираки.

• Продолжаем: интерактивные курсы хтмл академии https://htmlacademy.ru/program читаем про флексы, препроцессоры и т.п. Материалы платных интерактивов можно погуглить.
• http://htmlbook.ru/
• https://webref.ru/
• Продвинутый интенсив академии-2016/2017 - можно поискать на трекерах.
• Верстка по БЭМ на примерах: http://habrahabr.ru/post/203440/
• http://ru.bem.info/ - документация БЭМ от Яндекса
• http://getbootstrap.com/ - Бутстрап. Полезная штука, кто бы что ни говорил.
• http://habrahabr.ru/post/114256/ - чеклист верстки. Несколько устарел, но, в целом, актуален.
• http://habrahabr.ru/hub/webdev/ - тематический хаб, иногда проскальзывают полезные публикации.
• Документация препроцессоров: http://sass-lang.com/ http://lesscss.org/ http://stylus-lang.com/

Дополнительные ресурсы, которые могут быть полезными на данном этапе:

• http://tympanus.net/codrops/ - еженедельная подборка новостей
• http://www.smashingmagazine.com/ - многое отсюда так или иначе переведено на русский, ресурс полезный для развития
• http://css-tricks.com/ - много готовых шаблонов для решения часто встречающихся задач
• http://codepen.io/ - ресурс с кучей интересных примеров кода
• http://www.html5rocks.com/en/ - туториалы от гугла
• http://frontender.info - неплохой ресурс, но редко обновляется
• http://nicothin.pro/page/console-windows
• http://nicothin.pro/page/kak-komfortno-rabotat-s-github-v-konsoli-windows
• Материалы интенсивов академии: https://github.com/tsergeytovarov/htmlacademy-basic-additional-material
• Материалы от teamtreehouse, любезно слитые аноном (англ): https://mega.nz/#!PgRiXJLK!Ske0xNBPaC9Rm_3mV9c5Zoz6rD5Yna-V7pI-yzJOB_A

Книги надо выбирать индивидуально. Если по HTML/CSS, то желательно, чтобы книга была не старше 2012 года, ну или хотя бы переиздана. Читай все что интересно. В любом случае это будет полезно.

• http://frontendbookshelf.ru/ - список полезных книг. Большинство актуальны, можно выбрать по языку, технологии и конкретному уровню знаний. Первооочередную литературу желательно брать оттуда.
• http://scanlibs.com/ что-то типа хранилища айти книг. Скачать книги можно бесплатно. Там есть много всего. Если в свободном доступе не найдете, попробуйте поискать там.

• Вполне годные макеты можно найти здесь: http://freebiesbug.com/psd-freebies/
• Используй гугл

В чем угодно. Универсальный выбор - Atom | VSCode, в них можно будет полноценно продолжать работать при переходе на жс+фреймворки. Для тех, у кого дрова вместо рабочей станции подойдет Sublime. А вообще даже NP++ подойдет.

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

JavaScript

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

Что нужно знать

• Версия языка — ES6+
• Инструмент для сборки — Webpack
• Фреймворк — React + Redux | Vue + Vues | Angular5 для любителей экстремальных видов самоудовлетворения

Основы
Лучший учебник на JavaScript на русском языке — Кантор(кликабельно). Ультраплатиновая ультрагоднота. Особое внимание следует уделить первой части, которая рассказывает непосредственно про язык, посколько DOM, события и другие API браузера про которые рассказано во второй части, абстрагируются фреймворком. Английская версия(кликабельно) поддерживается автором в более актуальном состоянии, рекомендуется читать ее.

Нужно выполнять все задания. Это сложно, вы будете много ошибаться, это нормально. Что-то не получается? Не вычисляются фибоначчи? Рекурсия не рекурсирует? Отвлекитесь, отдохните, перечитайте теорию, попробуйте снова. Составьте алгоритм псевдокодом или вовсе своими словами.

Кантора можно разнообразить видосами и другими сайтами. Одна и та же вещь, объясненная много раз разными словами, становится понятнее:

• Codecademy — бесплатный интерактивный курс.
• Treehouse и Codeschool — тоже интерактивные курсы, платные.
• Канал LearnCode.academy — Очень годный канал (англ). Смотреть ES5 и ES6.

Основной справочник по JS — Mozilla Developer Network. Хотите почитать про промисы — пишите в гугле promises mdn.

Тут должно быть продолжение про JS, но оно куда-то убежало. Ждём его все вместе.


Дополнительно
​

Английский

Нужен. Большая часть самых клевых материалов - на английском, большая часть влиятельных / шарящих людей в коммьюнити - не из СНГ и общаются на английском или своем родном. Плюс это нехилый бонус к трудоустройству.

Ниже будет подборка ответов / материалов по англйискому от анонов, за что им спасибо.

Практикой и погружением:

• Приложения на смартфон Duolingo и Memrise. Первый бесплатен, второй платен, но бесплатной версии более чем достаточно. У Duolingo есть и веб-версия
• Чтение англоязычного интернета. Даже банальной Википедии будет достаточно. Еще можно читать газеты и издания мирового уровня типа:
• vox
• economist
• NYT
• BBC
• spectrum
• combinator
• Фильмы на английском с сабами
• Игры на английском с сабами
• Интерфейс во всех приложениях на английском

Для грамматики подойдет курс от Полиглот 16 уроков. Еще стоит отметить простой переводчик по клику для хрома LinguaLeo. Другое полезное расширение - Grammarly, смотрит за правильностью того как ты пишешь на английском и высвечивает ошибки, неправильную грамматику, подсказывает правильный порядок слов и так далее. А ещё он может показывать значение слова по клику, с полноценной выдачей о значении этого слова.

Читать поначалу можно словарём - Chrome, Google Dictionary дополнение. Кликанье на все непонятные слова во время чтения/раздумья над смыслом статьи должно стать привычкой.

Обычно сначала трудно но через пару недель чувствуешь результат, потом уже стабильное улучшение.

Прочие мелочи

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

Скажем так: лишним не будет, но и без него frontend разработчик не чувствует себя ущербным. Полезными будут знания дискретной математики, теории чисел и графов, а также основы теории алгоритмов (впрочем, это уже CS). Все это вполне изучается самостоятельно в свободное время. Для практики в этом деле лучше использовать Python: он более строгий, лаконичный и понятный. Хотя и на ES6 получаются очень даже красивые решения всяких олимпиадных задачек.

Фрилансить версталой - гиблое дело. Да и вообще фрилансить без опыта работы - гиблое дело. Да и вообще фрилансить в 2017 - гиблое дело. Адская конкуренция, кривые ТЗ, неадекватные заказчики, баны на апворках и прочие прелести ждут. Но никто не мешает попробовать.

FAQ полностью открыт для доработок и редактирования, присылайте предложения. Обоснованные правки будут внесены.

​

 

некоторым будем полезно

 

Ну что, 2018 начался, погружаемся в мир веб-программирования)

 

Сделали бы такой тутор по C# :D
По написанию софта

 

Поддерживаю

 

Не в каждом проекте просто формочку и элементы перетягивать)

 

плюсую выше , шарп сейчас актуален)

 

Очень полезная тема, узнал для себя как лучше двигаться в изучение

 

Можно еще добавить полезный сайтик - https://repl.it
Если не знаете что делать, не приходит в голову с чего начать? То тут люди создают классы и вы можете вступать в них, и решать задачки, прям на сайте.
Поддерживаются очень много ЯП, CSS и прочие

 

Так то интересно:)

 

Во многих видео уроках ни всегда рассказываю понятно (Много лишнего смотрел когда css учил)

 

Посоветовал бы для изучения JS hexlet, если не жалко около 1к в месяц и конечно codewars.
И лично мое мнение, раз уже 2018 год, во всю процветают чатики в телеги по нужным тебе тематикам, то можно смело залетать в чаты верстки/js, ну вы поняли. Та же нетлогия выложила список чатов. И с самим процессом самообразования затягивать надолго тоже не стоит, идти на стажировку или джуном пробовать.

 

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

Автор очень слабо или вообще не упоминает (прощу прощения, если я не заметил) про код стайл и доступность интерфейсов.

Спойлер: Code style

Код стайл очень важен. Особенно для новичка, который еще не понимает "как надо". Если не уделить этому в начале, дальше переучивать себя очень трудно будет (скажу по своему опыту).

Почему важен?

• Если вы работаете в команде, и ваши товарищи не могут понять зачем этот модуль или эта функция, то чаще всего это ваш косяк.
• Портфолио обычно смотрят все же перед тем, как пригласить вас на собеседование.
• Решили тестовое? Все верно, но у вас *цензура*код? Будьте готовы, что вас скорее всего не примут.

Спойлер: Пример из жизни

Есть функция отвечающая за сбор лисенеров модуля формы. bindEvents. Вроде все норм, но когда ты на продакшене собираешь весь код и вдруг видишь ошибку:
"Ошибка Name в bindEvents". И не ясно что именно и какие лисенеры биндит эта функция. Все? Определенные, какие?
Назови ты bindFormEvents или subscribeToFormEvents и станет чуть проще.

Как же избежать этого?

Спойлер: JSDoc

Документировать код, решение части проблемы. Как документировать? - // (ваш кэп) или JSDoc. Что такое JSDoc вы можете почитать в интернете подробно. Кратко - генератор документации. Примеры моего использования вы можете всегда попросить у меня в телеге или тут, в личных сообщениях.

Спойлер: Спагетти - код

Антипатерн.
Спагетти - код описан в википедии неплохо, но вас никто не ограничивает только этим ресурсом.

Спойлер: Даешь функциям корректные имена

Называть функции правильно, чтобы содержал глагол. function1 - фигня. printNames - топ.
Пример

Спойлер: Массивы - это множественное число

Массивы во множественном числе.

Спойлер: UPPER_SNAKE_CASE for Const

Константы большими буквами + UPPER_SNAKE_CASE

Код:

const MAX_HEIGHT = 400;
const EARTH_RADIUS = 6370;

Задавайте константы в начале вашего кода.

Спойлер: Удаляйте обработчики если они уже не нужны

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

Защита от memory-leak
Кол-во обработчиков подвешенных на глобальную область видимости не должно возрастать. Например, если подвешивается обработчик, который следит за перемещением курсора по экрану, то он должен подвешиваться и отвешиваться в нужный момент. В случае если обработчик на document только подвешивается это может свидетельствовать о проблеме бесконечного создания обработчиков и потенциальной утечке памяти.

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

Спойлер: CamelCase

Вики
Название переменных, параметров, свойств начинается со строчной буквы и записываются в нотации CamelCase.

Спойлер: Модульность

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

Код:

use strict';

(function () {
  window.load = function (url, onLoad) {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener('load', onLoad);

    xhr.responseType = 'json';
    xhr.open('GET', url);
    xhr.send();
  };
})();

Спойлер: textContent

Для вставки пользовательских строк (имён, фамилий и т.д.) textContent
Никакого innerHTML
Защита от XSS-атак, а также изменения исходных данных, запутывание пользователя и прочее

Спойлер: Функции

Функция должна выполнять 1 - 2 задачи, не более.
Названия функций желателно деражть единообразно. Функциональное выражение или Функциональное объявление

Код:

// Неправильно:

var doSomethingElse = function () {
  // function body
};

function doSomething() {
  // function body
}
// Правильно:

var doSomething = function () {
  // function body
};

var doSomethingElse = function () {
  // function body
};
или

function doSomething() {
  // function body
}

function doSomethingElse() {
  // function body
}

Никаких var knopka = document.querySelector('.knopka-odin'); Понятные названия, без транслита. Учите английский.

Спойлер: ESLint

Используйте ESLint. Пожалуйста. Он решит очень много проблем.

Спойлер: Доступность

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

Спойлер: Материалы

Жми сюда!
Людоедский интерфейс
Почему я не могу пользоваться твоим сайтом?
Фокус помогает

Спойлер: Оптимизация загрузки

Не у всех хороший интернет, запомните. Экономьте трафик на мобилках и зарядку.
Оптимизируйте скорость загрузки всего что можно (глупо звучить, да?)

Спойлер: JavaScript

Минификация не зло.
При сборке Gulp или самому через сайт
Выбор за вами.

Спойлер: CSS

Сборка Gulp
Онлайн

Спойлер: HTML

Сборка Gulp
Онлайн

Спойлер: Image

Сборка Gulp
Онлайн

Спойлер: SVG

Сборка Gulp
Sprite

Спойлер: WebP

Данный формат плохо поддерживается. Он новый, весит мало, запомните это.
Сборка Gulp

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