- PVSM.RU - https://www.pvsm.ru -

Ещё 5 дерзких тренировочных проектов для разработчика (Layer, Squoosh, Калькулятор, Website Crawler, Music Player )

image

Продолжаем серию проектов для тренировки.

Layer

image

www.reddit.com/r/layer [6]

Layer — это сообщество, где каждый может нарисовать пиксель на общей «доске». Оригинальная идея родилась на Reddit. Сообщество r/Layer — это метафора совместного творчества, что каждый может быть творцом и вносить вклад в общее дело.

Чему вы научитесь создавай свой проект Layer:

  • Как работают JavaScript canvas, умение оперировать canvas — критически важный навык во многих приложениях.
  • Как координировать user permissions (пользовательские разрешения). Каждый пользователь может рисовать один пиксель раз в 15 минут и при этом не надо логиниться.
  • Создавать cookie sessions.

Squoosh

image

squoosh.app [7]

Squoosh — это приложение по сжатию изображений с множеством продвинутых опций.

Гифка на 20 мб

image

Создавая свою версию Squoosh вы научитесь:

  • Как работать с размерами изображений
  • Освоите основы Drag‘n’Drop API
  • Разберетесь как работают API и еvent listeners
  • Как загружать и экспортировать файлы

Примечание: компрессор изображений локален. Не обязательно отсылать дополнительные данные на сервер. Можно иметь компрессор у себя, а можно на сервер, на ваш выбор.

Калькулятор

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

image

jarodburchill.github.io/CalculatorReactApp [8]

Создавая свой калькулятор вы научитесь:

  • Работать с числами и мат операциями
  • Попрактикуетесь с event listeners API
  • Как располагать элементы, разберетесь со стилями

Crawler (Поисковый движок)

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

image
Поисковик Гугла

Чему научитесь, создавая свой поисковик:

  • Как работают краулеры
  • Как индексировать сайты и как их ранжировать по рейтингу и репутации
  • Как хранить индексированные сайты в базе данных и как работать с базой данных

Музыкальный плеер (Spotify, Apple Music)

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

image

Spotify

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

  • Как работать с API. использовать API от Spotify или Apple Music
  • Как проигрывать, останавливать или перематывать на следующию/предыдущую композицию
  • Как менять громкость
  • Как управлять маршрутизацией пользователей и историей браузера

P.S.

Какие проекты вы бы предложили «повторить» самостоятельно, чтобы прокачать свое мастерство?

Автор: rishat_edison

Источник [9]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/335440

Ссылки в тексте:

[1] 9 проектов для оттачивания Front-End мастерства: https://habr.com/ru/company/edison/blog/474230/

[2] Шесть задачек для Front-End разработчика: https://habr.com/ru/company/edison/blog/473894/

[3] Занимательная практика для разработчика: https://habr.com/ru/company/edison/blog/472168/

[4] 8 учебных проектов: https://habr.com/ru/company/edison/blog/344006/

[5] Еще список проектов, на чем потренироваться: https://habr.com/ru/company/edison/blog/430126/

[6] www.reddit.com/r/layer: https://www.reddit.com/r/layer/

[7] squoosh.app: https://squoosh.app/

[8] jarodburchill.github.io/CalculatorReactApp: https://jarodburchill.github.io/CalculatorReactApp/

[9] Источник: https://habr.com/ru/post/474444/?utm_campaign=474444&utm_source=habrahabr&utm_medium=rss