Нам нужны твои мозги

Хотите расти как разработчик и найти крутую работу? Не протирайте штаны — займитесь Open Source проектами. Так легче всего попасть в лучшие команды разработчиков и положить себе в резюме настоящий проект, вместо нелепых «примеров кода». Но найти подходящий проект для участия сложно. Начинаются лень и отговорки, а за ними — отсутствие профессионального роста, критики по-настоящему крутых программистов, уныние и застой.

На Cult of Martians мы собираем интересные задачи для современных веб-программистов. Можно выбрать подходящую по сложности, продолжительности и специализации. Задачи не выдуманы «из воздуха» — каждая решает насущную проблему, и решить ее можно через создание нового Open Source проекта или улучшение существующего. Решайте задачи, прокачивайтесь, присылайте решение на оценку. Лучших могут пригласить к себе на работу компании, программистам которых понравится ваше решение.

В работе 0Короткие 0Длинные 0Сделано 216
Помощь запрашивал
Андрей Ситник
 Андрей Ситник
Помог
Евгений Шкодин
 Евгений Шкодин

Фронт: Виджет для Logux

Для новичков, задача на неделю

Нужно сверстать виджет статуса синхронизации по макетам Антона Ловчикова.

Польза: принять участие в разработке Logux; получить больше опыта в webpack и создании виджетов.

  1. Скачать макеты.
  2. Изучить макеты Badges.png и Badges usage.svg.
  3. Форкнуть logux-status.
  4. Добавить badge.js с функцией badge. Она должна принимать Client и объект настроек.
  5. Она должна возвращать функцию-отписку, при вызове которой виджет удаляется из DOM.
  6. В настройках можно указывать местоположение виджета (в каком углу экрана), стили (Inline Styles) для разных состояний и текст выводимый в виджете.
  7. В состоянии synchronized виджет не виден.
  8. Если клиент перешёл в состояние disconnected, нужно отобразить «Нет интернета» в виджете.
  9. В состоянии wait — добавить «Ваши данные не сохранены».
  10. В состоянии connecting и sending нужно показывать «Сохраняю ваши данные», но только если предыдущее состояние было wait.
  11. Если мы показывали «Сохраняю ваши данные», то при переходе в synchronized, нужно на пару секунд показать «Ваши данные сохранены».
  12. При ошибках wrong-protocol или wrong-subprotocol нужно показывать «Обновите страницу».
  13. При любой другой ошибке — обычный красный виджет.
  14. В файлах badge/ru.js и badge/en.js нужно указать текст по умолчанию.
  15. Стили по умолчанию нужно указать в badge/default.js. SVG-иконки подключать через require('./icon.svg'). Учесть, что стили на странице могут быть любыми, так что лучше сбросить наследуемые свойства.
  16. Добавить виджет в test/demo. Результат можно посмотреть, запустив yarn run demo.
  17. Добавить модульные тесты на функцию.
  18. Добавить документацию в README.md.
Посмотреть решение