Подборка лучших ресурсов для обучения JavaScript.

Наткнулся тут на сайте proglib.io на очень интересную подборку ресурсов для всех желающих начать изучать JavaScript. Лично для меня, тема крайне актуальная, потому не смог удержаться и решил разместить данный текст у себя (разумеется со ссылкой на первоисточник), чтобы не плодить и без того огромную коллекцию закладок в моём браузере Safari.

Погружение в язык

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

Видео-уроки по ES6

Современные JavaScript Junior, возможно, никогда не сталкивались с цепочками прототипов и асинхронными «велосипедами». Сейчас на фронтенде правит бал стандарт ES6. Смотрите один из самых лучших курсов в рунете от CodeDojo:

Основы

Про то, что происходит под капотом, тоже нельзя забывать. Разобраться с конструкторами и прототипами поможет видеокурс freeCodeCamp и этот плейлист loftblog:

DOM

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

Книги

Держите лучшие в мире книги для JavaScript Junior, если вы еще не успели изучить их от корки до корки:

• JavaScript: сильные стороны, Дуглас Крокфорд
• Выразительный JavaScript, Марейн Хавербек
• Серия You Don’t Know JS (англ.)
• JavaScript. Подробное руководство, Дэвид Флэнаган
• Человеческий JS (англ.), Henrik Joreteg
• DOM Просветление (англ.), Cody Lindley.

Онлайн-учебники

90% русскоязычных джуниоров учат JavaScript по учебнику Ильи Кантора. А вот еще один отличный ресурс с классической структурой «от простого к сложному».

Полезные статьи

Листание популярных интернет-сайтов IT-тематики – важная часть образования JavaScript Junior. Чтение статей помогает:

• найти наглядные объяснения сложных понятий в JavaScript Garden
• разобраться в новых концепциях языка
• разобраться в старых концепциях языка
• узнать о подводных камнях на чужом опыте (async/await)
• обнаружить скрытые фичи
• составить план дальнейшего обучения
• и даже понять регулярные выражения.

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

Последнее прибежище разработчика – документация языка. Вам придется обращаться к ней не раз, поэтому будьте знакомы, Mozilla Developer Network. А здесь вы можете узнать немного о темной стороне спецификации.

Инструменты и инфраструктура

Для эффективной и быстрой разработки важно обустроить удобную рабочую среду. Все современные проекты используют сборщики и системы контроля версий. JavaScript Junior должен в этом разбираться.

Node и сборщики файлов

Великолепный скринкаст Ильи Кантора введет вас в курс дела и поможет освоиться с платформой Node.js:

После этого можно переходить к изучению сборщиков: Gulp или Webpack на том же канале.

А вот несколько полезных статей для начала:

• Gulp для самых маленьких
• Webpack за 15 минут
• Введение в философию Webpack

Git

Git – самая популярная система контроля версий, она используется во многих проектах, поэтому JavaScript Junior должен в ней разбираться. Основные сведения можно почерпнуть из книги Pro Git или видео-курса по основам Git. А эта замечательная интерактивная игра поможет разобраться с моделями ветвления.

Шпаргалки по командам сэкономят ваше время:

• Шпаргалка по Git, в которой представлены основные команды
• Cистема контроля версий Git: расширенная шпаргалка
• Гайды по работе с Git.

Отладка кода

Отладка – неотъемлемая часть программирования. Главный помощник JavaScript джуниора – консоль разработчика Google Chrome. Чем быстрее вы с ней подружитесь, тем эффективнее будет ваша работа. В помощь вам короткое, но очень информативное видео от школы Hillel:

Фреймворки

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

React

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

Еще пара статей по Redux с примерами:

• Руководство по Redux: пишем первое Redux-приложение
• Redux на практике: осваиваем действия в приложении

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

Angular

Еще один популярный фреймворк, с которым может встретиться JavaScript Junior. Не путайте AngularJS (он уже устарел) и просто Angular. Проект активно развивается, выходят новые версии. Чтобы не потеряться в них, держите постоянно обновляющийся учебник. А если вы знаете английский, то обязательно посмотрите скринкаст по Angular 6. В качестве шпаргалки вполне подойдет этот конспект по Angular 5.

Священная война фреймворков в самом разгаре. Если вы еще не сделали свой выбор, возможно эта статья поможет Angular vs. React: что лучше для веб-разработки?

Vue.js

• Видео-курс по Vue.js с нуля
• 5 практических примеров использования Vue.js
• и классный семинар от Дмитрия Лаврика.

Практика для JavaScript Junior

Самое сложное для джуниора – превратить теоретические знания в практические умения. Вот несколько материалов вам в помощь:

• Каверзные вопросы и задачи по JavaScript из собеседований
• Где JavaScript джуну получать тестовые задания для практики?
• JavaScript. Решение задач из собеседований
• Большой плейлист с практическими упражнениями на JS.

А лучше всего создайте свою игру. Это полезно и интересно.

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