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

Автор оригинала: Indrek Lasn
  • Перевод
image


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


Layer


image

www.reddit.com/r/layer

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

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

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

Squoosh


image

squoosh.app

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

Гифка на 20 мб
image

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

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

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

Калькулятор


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

image

jarodburchill.github.io/CalculatorReactApp

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

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

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


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

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

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

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

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


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

image

Spotify

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

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

P.S.


Какие проекты вы бы предложили «повторить» самостоятельно, чтобы прокачать свое мастерство?
Edison
351,86
Изобретаем успех: софт и стартапы
Поделиться публикацией

Комментарии 14

    –2
    А в чём смысл прятать 5-метровую гифку в спойлер и подписывать её «Гифка на 20 мб»? От этого размер вообще никак не меняется, только неудобней становится. Есть предложение предшествующую ей картинку убрать, а её как раз оставить на виду
      0
      у меня она почему-то 21,7 мб

      image
        –2
        Это всё равно не придаёт смысла спойлеру
        +4

        Смысл в том чтобы на мобилке не жрать трафик для тех кому эта гифка не нужна.

          –2
          Мы находимся на хабре в 2019 году, откуда бы взяться таким технологиям?) Страница на мобилке весит 60МБ независимо от того, в спойлере картинки или нет (хабр не умеет подгружать их при раскрытии спойлера и грузит всегда).
            0

            Раньше было лучше (с) И картинки в спойлерах не грузились пока не появятся. Сейчас увы так и есть :(

        +2
        Простенький чат :)
          +2
          Какой смысл советовать писать свой гугл, не объяснив как это делать? Зато пример калькулятора есть в статье, показательно.
            0
            Наверное, в заголовке пропущено слово «веб» или «фронтенд». Есть такие проекты как компиляторы, или например загрузчики различных ОС, которые полезно повторить самому, но на js делать непрактично.
              +1
              компиляторы <...> на js делать непрактично

              Вот тут я бы поспорил.
              Современный фронтенд очень сильно построен вокруг JS-to-JS компиляции, написанной на том же самом JS (см. babel). Или вокруг CSS-to-CSS компиляции, написанной на JS (см. PostCSS).
              Так что знание того, как работают компиляторы и как их писать на JS, может быть очень даже полезно. :)

                +2
                Хорошо, с компиляторами я, конечно же, погорячился. Строго говоря, JS-to-JS — это source-to-source компиляция (или транспиляция), я же имел ввиду компиляцию в машинный код (хотя, конечно же, разница не такая уж и большая).
              +2
              Как по мне сейчас важно уметь писать агрегаторы. Например что то связанное с недвижкой или объявлениями. Намного практичнее чем хранить пиксели от пользователей. А калькулятор и туду лист это про пощупать немного технологию…
                +1
                Заодно и регулярки на таких проектах подтянуть можно.
                0
                Layer — это сообщество, где каждый может нарисовать пиксель на общей «доске». Оригинальная идея родилась на Reddit. Сообщество r/Layer — это метафора совместного творчества, что каждый может быть творцом и вносить вклад в общее дело.

                Описание говорит о r/place, как раз таки там каждый юзер рисует пиксель раз в сколько-то секунд. А r/layer — про рисование своих картинок на отдельных слоях.

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое