НОВОСТИ [Перевод] Задачки для фронтенд-тренировки: клоны CodeSandbox, Robinhood, Whoishiring, Stackoverflow

[Alvaros]

Предлагаем вашему вниманию идеи/задачи (не решения) для самостоятельного изучения и оттачивания мастерства.

График цен на акции в стиле Robinhood

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

You must be registered for see links

может быть чрезвычайно полезен.

Чему вы научитесь, построив график цен на акции в стиле Robinhood:

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

Вы можете

You must be registered for see links

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

Клон CodeSandbox


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

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

Чему вы научитесь, создав клон CodeSandbox:

• Как рендерить и запускать HTML, CSS и JavaScript внутри браузера.
• Как осуществлять перезагрузку с отображением изменения в реальном времени как в редакторе, так и в полном просмотре.
• Как сгенерировать встраиваемый URL. Встраивание позволяет включить сендбокс в документацию, сообщение в блоге или на сайте, используя iframe (или куда угодно, где есть поддержка Embedly, например Medium, Reddit, Trello и Notion). Вы можете показывать только код, предварительный просмотр или все вместе.

Клон Whoishiring


Whoishiring представляет наиболее релевантные вакансии в виде карты. Соискатели легко могут находить работодателей в наиболее привлекательном для них месте.

Чему вы научитесь, создав клон Whoishiring:

• Как работать с разными картами и рисовать на них.
• Работе со сложной версткой, например, с картой и боковой навигацией которые должны быть синхронизированы.
• Работе с базой данных для получения заданий. Я бы посоветовал использовать фиктивные данные, так как это всего лишь клон, ваша цель – отточить навыки фронтендера.

Клон Stackoverflow (только вопросы и ответы)


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

Stackoverflow — это огромный сайт, так что не пытайтесь клонировать его целиком. Начните с вопросов и ответов. Дайте пользователям возможность задавать вопросы, отвечать на них, и ставить теги.

Чему вы научитесь, построив клон StackOverflow.

• Работе с базой данных, такой как PostgreSQL или MongoDB. Вопросы и ответы должны сохраняться в базе данных и извлекаться из нее всякий раз, когда кто-то открывает ваш клон StackOverflow.
• Тегированию сообщений и реализации поиска с индексированием. Вы должны обеспечить лаконичный, но всесторонний поиск для пользователей. Также нужно реализовать возможность осуществлять поиск по вопросам и ответам с помощью простых ключевых слов вроде [react] или [javascript].

Монитор времени работы сайта


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

Чему вы научитесь, создав клон монитора времени работы:

• Работе с терминалом. Как пользоваться командной строкой и проверять статус сайта. Если сайт возвращает код 200, ничего не делайте. Если он вернет код 404 или 500, сообщите об этом по электронной почте.
• Построению графиков. Все хотят пользоваться интуитивно понятными и свежо выглядящими приложениями. Создавайте красивые графики для отображения состояния сервера.

Маятник Ньютона на CSS


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

Чему вы научитесь, построив клон маятник Ньютона:

• Работе с keyframe в CSS и созданию анимаций.

Если вы решите использовать Canvas в JavaScript, то это здорово.

Узнайте подробности, как получить востребованную профессию с нуля или Level Up по навыкам и зарплате, пройдя платные онлайн-курсы SkillFactory:

• You must be registered for see links
  (8 месяцев)

еще курсы

• You must be registered for see links
  (12 недель)
• You must be registered for see links
  (12 месяцев)
• You must be registered for see links
  (9 месяцев)
• You must be registered for see links
  (9 месяцев)
• You must be registered for see links
  (12 месяцев)

Полезное

• You must be registered for see links
• You must be registered for see links
• You must be registered for see links
• You must be registered for see links
• You must be registered for see links