Перевод статьи «9 Awesome Projects You Can Build With Vanilla JavaScript».
Скажем откровенно: не важно, сколько книг по программированию вы прочли, сколько видео просмотрели и сколько подкастов прослушали — если вы хотите стать лучшим разработчиком, вам нужно непрерывно практиковаться.
В мире фронтенда существует множество фреймворков, например, React, Angular, Vue — и это лишь небольшая толика. Каждый из них прекрасен, без них фронтенд-разработка не достигла бы современных высот. Но все эти фреймворки, несмотря на существующие между ними различия, имеют и нечто общее: все они основаны на JavaScript. Да, старый добрый JS!
Не сомнений, что сегодня в web правит JavaScript. И каждый фронтенд-разработчик, не важно, опытный он или только начинающий свою карьеру, обязательно должен знать основы JavaScript, HTML и CSS.
Фреймворки приходят и уходят, а JavaScript остается!
Поэтому я решил составить небольшой список из девяти прекрасных проектов, которыми вы можете заняться, чтобы освежить свои навыки, узнать что-нибудь новое о JS и сохранить релевантный уровень знаний в 2020 году и дальше. Все эти проекты можно создать на чистом JavaScript (плюс HTML и CSS в разных пропорциях). Вы можете добавить их в свое портфолио, показывать рекрутерам или потенциальным работодателям, а также забросить в свой аккаунт на GitHub в качестве «справочников» для будущих работ.
Сразу проясню: цель этих проектов не в том, чтобы обучить вас всем премудростям JavaScript. Для этого есть специальные прекрасные курсы, раскрывающие все темы от А до Я. Здесь речь идет о создании каких-то вещей. О том, чтобы приложить руки к чему-то практическому. О выработке мышечной памяти.
Примечание редакции. Все видео в статье — на английском языке. Если знаете этот язык хоть немного, просмотр подобных туториалов в том числе поможет вам расширить свой словарный запас. Но если вы пока не можете уследить за объяснениями на английском, можно просто воспользоваться списком идей.
Если вы прям сейчас хотите попробовать свои силы в JavaScript, попробуйте пройти тест в 20 вопросов по результатам которого вы сможете понять, стоит ли вам изучать этот язык самому или же пойти на курсы по программированию. Вопросы довольно сложные для новичка. Но проходной балл доступный.
ПРОЙТИ ТЕСТ
1. Приложение для медитации
Это приложение, предлагающее эмбиент-звуки для медитации. Пользователи могут выбирать различные таймеры и звуки.
В прилагаемом туториале используется ванильный JavaScript, как раз то, что нам нужно. Кроме того, вы научитесь манипуляциям со звуком и видео при помощи JS.
Голос инструктора четкий, а инструкции просты для понимания.
2. Виртуальная клавиатура
Это проект по созданию виртуальной клавиатуры с нуля. Используются ванильный JS, HTML и CSS. Приложение предназначено в т.ч. для использования в браузере; оно должно быть отзывчивым и пригодным для управления касаниями.
Мне нравится оригинальность этого проекта. Раньше мне не доводилось создавать виртуальную клавиатуру, так что создание ее лишь на JavaScript, HTML и CSS было для меня отличным опытом.
Что касается видео, то голос инструктора четкий, да и объясняет он довольно хорошо.
3. Корзина покупок eCommerce
Здесь мы создаем корзину покупок, которая может использоваться в онлайн-магазинах и на сайтах электронной коммерции. В работе применяются все те же ванильный JS, HTML и CSS. Для хранения информации о продуктах инструктор использует Contentful — headless CMS. Научиться работать с headless CMS вообще и с Contentful в частности не является основной целью проекта, но это хороший сервис, так что вы не пожалеете, увидев его в действии.
Запись туториала очень длинная. С одной стороны, это впечатляет, но с другой — довольно утомительно. Голос инструктора четкий и понятный. Иногда немного сложно уследить за мыслью, но это можно объяснить сложностью проекта.
4. Приложение для прогноза погоды
При создании этого приложения, помимо обычного набора технологий, используется Dark Sky API — для сбора информации о погоде. Так что это отличная возможность научиться взаимодействовать с APIs.
Такое приложение может хорошо подойти для портфолио. Если вы взялись за первый проект нашего списка, то инструктор вам уже знаком, и я лишь отмечу, что это видео тоже отличается прекрасным качеством. Похоже, он в самом деле умеет учить, причем делает это понятно и не скучно.
5. Issue-трекер
В этом проекте нужно создать issue-трекер, который может использоваться для отслеживания проблем (например, с программными продуктами) на любом сайте. Он также может стать хорошим пополнением для вашего портфолио.
У инструктора есть ясное понимание того, что он хочет создать. Голос четкий и понятный, а проект годится и для начинающих.
6. PIN Pad
Это проект по созданию клавиатуры для ввода PIN-кода в браузере (с функционалом проверки PIN-кода на корректность). В этом туториале инструктор применят исключительно ванильный JS, HTML и CSS.
Я считаю, что это очень креативный учебный проект для показа, на что способен ванильный JavaScript. Инструктор проделал хорошую работу: все объясняется очень четко, за мыслью легко уследить.
7. Целевая веб-страница (лендинг)
Брэд покажет вам, как создать интерактивный лендинг, показывающий время и имя пользователя. Для хранения имени приложение использует локальное хранилище.
Брэд известен качеством своих туториалов. Именно этот — довольно короткий, и я бы сказал, что он простоват. Но зато в нем используются исключительно JavaScript, HTML и CSS.
8. Игра «Камень, ножницы, бумага»
Создание игр может быть интересным способом изучить что-нибудь. JavaScript предлагает широкие возможности по созданию браузерных игр. В этом учебном проекте вы создадите классическую игру «камень, ножницы, бумага».
Инструктор провел отличную работу по созданию туториала. Видео вышло увлекательным.
9. Игра «крестики-нолики»
Это проект по созданию игры в крестики-нолики. Задача интересная, но вместе с тем и сложная, потому что здесь используются основы ИИ и алгоритмы. Но помимо этого все создается на старых добрых JS, HTML и CSS.
Проект имеет хороший размер и понятную структуру. Работать над ним интересно. Голос инструктора четкий, за мыслью уследить легко. Объяснения очень хорошие, так что с созданием игры все должны справиться.
Вот и все. Я уверен, что вам уже не терпится взяться за эти отличные туториалы. Но я хотел бы еще кое-что сказать. Просмотр видео и параллельное написание кода это хороший способ изучать что-то новое и набивать руку. Но вы получите куда больше пользы от создания проектов, если внесете в них что-нибудь свое. Вы ведь вполне можете их улучшить, изменить, скомбинировать. Можно сделать и еще лучше: построить собственный проект, по ходу дела документируя свою работу. Так вы и сами многому научитесь, и другим поможете.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
отлично, спасибо огромное за ссылки для изучения пригодится!