Перевод статьи «Here Are 6 Front-End Challenges to Code».
Фронтенд-разработка это дело сложное, но постоянная практика позволит вам превратиться в настоящего мастера. То есть, чтобы стать эффективным «решателем проблем» в сфере фронтенда, нужно просто постоянно что-то строить и решать как можно больше задач.
Представляем вам 6 небольших проектов для отработки навыков фронтенд-разработки, взяться за которые можно хоть сегодня.
1. Форма для кредитной карты
Фантастическая форма для кредитной карты с плавным и приятным взаимодействием. Функционал включает форматирование номера, валидацию и автоматическое определение типа карты. Пример с отзывчивым дизайном создан на Vue.js.
Посмотреть код можно здесь.
Отрабатываемые навыки
- Обработка и валидация форм
- Управление прослушивателями событий (например, когда меняются поля, должны выводиться значения на кредитной карте).
- Понимание расположения и отображения элементов на странице, в частности, наложения кредитной карты на форму.
2. Гистограмма с нуля
Гистограмма (или столбчатая диаграмма) это диаграмма, в которой данные представлены в виде столбцов, причем длина или высота столбцов пропорциональна величинам, которые они отображают.
Столбцы могут располагаться как вертикально, так и горизонтально.
Отрабатываемые навыки
- Отображение данных структурированным и легким для понимания образом.
- Опционально: использование элемента <canvas> и отрисовка элементов с его помощью.
Данные по количеству населения в мире с разбивкой по годам можно найти здесь.
3. Анимированное сердечко Twitter
Twitter представил эту прекрасную анимацию еще в 2016 году. И поскольку сегодня она все еще радует глаз, почему бы не попробовать создать такую самостоятельно?
Отрабатываемые навыки
- Изучение работы атрибута CSS keyframes.
- Манипуляции с HTML-элементами, анимация элементов.
- Сочетание в работе JavaScript, HTML и CSS.
4. GitHub-репозитории с функционалом поиска
Не открою Америку, если скажу, что GitHub-репозитории это в общем-то просто разрекламированный список.
Наша задача — отобразить репозитории и дать возможность пользователю отфильтровать их. Для извлечения репозиториев пользователя используйте официальный GitHub API.
Отрабатываемые навыки
- Получение данных из API.
- Отображение данных, полученных через API.
- Фильтрация и вывод релевантных данных в соответствии с условиями поиска.
- Опционально: используйте v4 API, созданный с применением GraphQL.
5. Чат в стиле Reddit
Чаты это эффективный способ коммуникации, простой в использовании. Но что на самом деле стоит за современными чатами? WebSockets!
Отрабатываемые навыки
- Использование WebSockets, обеспечение возможности коммуникации в режиме реального времени и обновление данных.
- Изучение разных уровней прав пользователя (например, собственник канала чата играет роль админа (admin), а другие люди в чате это простые пользователи (user)).
- Валидация форм и их обработка. Помните, что chat box для отсылки сообщений это элемент input.
- Обеспечение возможности для пользователя создавать чат или присоединяться к чату.
- Изучение работы системы личных сообщений. Пользователи должны иметь возможность общаться друг с другом приватно. То есть, вам нужно будет устанавливать WebSocket-соединение между двумя пользователями.
6. Навигация, как на Stripe.com
Уникальной эту навигацию делает то, что всплывающий контейнер подгоняется под его содержимое.
Отрабатываемые навыки
- Комбинирование CSS-анимаций и переходов.
- Перекрестно затухающий контент (сross-fading) и применение класса active к элементу, в отношении которого выполняется наведение мыши.
Попробуйте сделать это самостоятельно, но если вам все же пригодилась бы помощь, вот пошаговое руководство.
Заключение
Спасибо за внимание! Надеюсь, вы найдете в этом списке задачу по своему вкусу. Помните, что нет никакого короткого пути к тому чтобы стать хорошим программистом. Единственный способ приобрести и отточить нужные навыки — создавать как можно больше всего.
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]