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

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

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

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Игорь Лобанов Игорь ЛобановИгорь Лобанов

Фронт: Убрать CoreJS из EmojiMart

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

EmojiMart — один из лучших контролов для выбора эмодзи. Сейчас у него в зависимостях есть огромный core-js. Эта зависимость нужна для поддержки ES2016+ в IE. Но, судя по всему, они загружают такую большую зависимость ради пары строк кода.

Нужно убрать core-js и починить работу в IE более простыми способами.

Польза: получить опыт оптимизации размера проекта.

  1. Форкнуть emoji-mart.
  2. Создать ветку.
  3. Установить зависимости с помощью yarn install.
  4. Запустить build:example и открыть example/index.html в IE. Убедиться, что всё сейчас работает.
  5. Убрать все импорты core-js из проекта.
  6. Запустить build:example и открыть example/index.html в IE. Найти ошибки.
  7. Переписать проблемные места на ES5. Например, заменив for (item of array) на for (var i = 0; i < array.length; i++).
  8. Если перепистаь на ES5 не получается, импортировать только нужные файлы из core-js.
  9. Если core-js оказался не нужен, с помощью yarn удалить core-js из зависимостей.
  10. Запустить npx size-limit и обновить лимит размера в package.json.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Никита Филатов Никита ФилатовНикита Филатов

Фронт: Уменьшить размер EmojiMart

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

EmojiMart — один из лучших контролов для выбора эмодзи. Но сейчас они собирают всё с помощью webpack. В итоге, если пользователь подключает emoji-mart и core-js, у него в сборке оказывается два core-js — один пользовательский и второй от EmojiMart.

Нужно переделать сборку с webpack на просто Babel, сохраняя древовидную структуру. После чего добавить плагин для вырезания propTypes.

Польза: получить опыт оптимизации размера проекта.

  1. Форкнуть emoji-mart.
  2. Создать ветку.
  3. С помощью yarn удалить webpack и webpack-bundle-analyzer из зависимостей.
  4. Переписать задачи build:dist и watch, чтобы они использовали Babel вместо webpack. Можно сразу вызывать babel-cli из package.json или изменить скрипты в scripts/.
  5. Изменить main и size-limit в package.json на использование dist/index.js вместо dist/emoji-mart.js.
  6. Добавить плагин babel-plugin-transform-react-remove-prop-types.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Игорь Дерябин Игорь ДерябинИгорь Дерябин

Фронт: Задержка при состоянии connecting в Logux Status

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

Logux Status показывает состояние синхронизации. Функция status() является фундаментом, чтобы построить свой UI состояния синхронизации.

Одни из шагов синхронизации — connecting и connectingAfterWait. Они говорят о том, что Logux пытается подключится к серверу.

Когда нет Wi-Fi, состояния connecting и connectingAfterWait отображаются слишком быстро — всего на 1—10 мс. В итоге интерфейс неприятно мигает.

Польза: принять участие в разработке Logux.

  1. Форкнуть logux-status.
  2. Изучить status.js и как он используется в badge.js.
  3. Изменить код внутри sync.on('state', …), чтобы connecting передавался в callback не сразу, а только если он не изменилася за 100 мс.
  4. Добавить тесты.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Владимир Боровик Владимир БоровикВладимир Боровик

Фронт: Переподключать Logux при появлении связи

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

Logux, при разрыве связи, раз в несколько секунд пытается подключиться снова.

Браузеры посылают событие online при появлении связи. Мы можем запускать попытку связи чуть раньше.

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

  1. Форкнуть logux-sync.
  2. Изучить документацию по API.
  3. Добавить в reconnect.js код, который при событии online пробует подключиться снова.
  4. Добавить тесты.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Игорь Дерябин Игорь ДерябинИгорь Дерябин

Фронт: Опция keepLast для Logux

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

Logux хранит события в логе. Чтобы чистить лог, он использует понятие «смысла жизни». У каждого события есть «смысл жизни» — массив строк. В любой момент разработчик может убрать смысл жизни у события. Как только у события не остается смыслов жизни, оно удаляется.

Однако, на практике, часто нужно одно и то же действие — хранить в логе только одно событие какого-то типа. Для этого приходится часто повторять один и тот же код:

log.add(
  { type: 'app/A' },
  { reasons: ['app/lastA'] }
).then(meta => {
  log.removeReason('app/lastA', { maxAdded: meta.added - 1 })
})

Этот код добавляет в лог событие со смыслом жизни app/lastA и удаляет этот смысл у всех предыдущих событий.

Код приходится писать слишком часто. Стоит добавить опцию keepLast, которая бы делала то же самое.

log.add(
  { type: 'app/A' },
  { keepLast: 'app/lastA' }
)

Польза: принять участие в разработке Logux.

  1. Форкнуть logux-core.
  2. Добавить опцию keepLast в Log#add().
  3. Добавить тесты.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Алексей Никифоров Алексей НикифоровАлексей Никифоров

Фронт: Делать несколько попыток при ошибке связи в Yaspeller

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

Yaspeller — JS-утилита, которая проверяет орфографию, посылая запрос на сервера Яндекса. Интернет не всегда стабилен — иногда запрос заканчивается ошибкой связи.

Нужно исправить Yaspeller, чтобы он, в случае ошибки, делал еще 2 запроса и только потом возвращал ошибку.

Польза: получить опыт разработки под Node.js.

  1. Форкнуть yandex-speller.
  2. Изучить lib/post.js.
  3. В случае ошибки ETIMEDOUT делать еще 2 попытки.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Константин Мамаев Константин МамаевКонстантин Мамаев

Фронт: Общие тесты для хранилища лога Logux

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

Logux может хранить лог в разных хранилищах — в памяти или IndexedDB. На подходе SQL-хранилище.

Сейчас у каждого хранилища свои тесты — много тестов дублируются. Нужно создать общие тесты для всех хранилищ.

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

  1. Форкнуть logux-core.
  2. Сгенерировать документацию — yarn run docs.
  3. Изучить API Store из docs/Store.html.
  4. Изучить текущие тесты test/memory-store.test.js.
  5. Форкнуть logux-client.
  6. Изучить текущие тесты test/indexed-store.test.js.
  7. Форкнуть logux-store-tests.
  8. Создать тесты для всего API Store внутри функции eachTest в index.js по примеру теста is a object.
  9. Удалить тест is a object.
  10. Подключить ваш форк logux-store-tests в форк logux-core — в package.json можно указывать версию из GitHub.
  11. Проверить, что MemoryStore проходит новые тесты. Почистить старые тесты от уже ненужных тестов API.
  12. Подключить ваш форк logux-store-tests в форк logux-client.
  13. Проверить, что IndexedStore проходит новые тесты. Почистить старые тесты от уже ненужных тестов API.
  14. Отправить Pull Request всех трех проектов.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Антон Артамонов Антон АртамоновАнтон Артамонов

Фронт: Перенести все логи Logux Server на Bunyan

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

Сейчас у Logux Server два типа логов — Human и Bunyan. Но можно сильно упростить код, если генерировать формат Human из Bunyan.

Польза: принять участие в разработке Logux; получить опыт разработки на Node.js и Bunyan.

  1. Форкнуть logux-server.
  2. Изучить, как можно заменять вывод Bunyan на примере bunyan-format.
  3. Запустить ./test/__snapshots__/show.js и посмотреть все варианты вывода сервера.
  4. Изучить формат Human в reporters/human.
  5. Сделать модуль для Bunyan, который брал бы объект текущего bunyan-лога у Logux и выводил его в формате Human. Убедиться, что вывод полностью совпадает с текущим форматом Human.
  6. Покрыть этот модуль тестами.
  7. Переписать reporters/human, чтобы он использовал новый модуль. Проверить, что старые тесты проходят.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Козин Андрей КозинАндрей Козин

Помог Владимир Катюрин Владимир КатюринВладимир Катюрин

Бэк: Привязка параметров запроса к отчету rspec-sqlimit

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

Необходимо доработать сообщение об ошибке RSpec-матчера exceed_query_limit из гема rspec-sqlimit таким образом, чтобы показывать выполненные SQL запросы вместе с их переменными.

Польза: возможность сделать первый вклад в Open Source проект (особенно если вы не знаете, с чего начать). Попутно можно познакомиться с механизмами ActiveSupport Notifications и Instrumentation, разобраться в устройстве матчеров RSpec.

RSpec матчер rspec-sqlimit публикует сообщение об ошибке (превышение лимита SQL запросов) в следующем виде:

require "rspec-sqlimit"

RSpec.describe "N+1 safety" do
  it "doesn't send unnecessary requests to db" do
    expect { User.create(name: "Joe") }.not_to exceed_query_limit(1)
  end
end
Failure/Error: expect { User.create }.not_to exceed_query_limit(0).with(/INSERT/)

  Expected to run maximum 0 queries that match (?-mix:INSERT)
  The following 1 queries were invoked among others (see mark ->):
     1) begin transaction (0.072 ms)
  -> 2) INSERT INTO "users" ("name") VALUES (?) (0.368 ms)
     3) commit transaction (147.559 ms)

В текстах запросов выше знаком (?) отмечены непривязанные параметры.

Эти параметры содержатся под ключом :binds (отдельно от текста запроса) в данных, передаваемом хуком sql.active_record.

Необходимо извлечь параметры запроса из данных и добавить их к сообщению об ошибке, чтобы оно обрело следующий вид:

Failure/Error: expect { User.create }.not_to exceed_query_limit(0).with(/INSERT/)

  Expected to run maximum 0 queries that match (?-mix:INSERT)
  The following 1 queries were invoked among others (see mark ->):
     1) begin transaction (0.072 ms)
  -> 2) INSERT INTO "users" ("name") VALUES ("Joe") (0.368 ms)
     3) commit transaction (147.559 ms)

Это позволит точнее анализировать, что “пошло не так” при прогоне теста, быстрее находить ошибки, вызывающие лишние запросы к базе данных.

Инструкции по выполнению

  1. Форкнуть проект rspec-sqlimit.
  2. Реализовать необходимый функционал.
  3. Сделать Pull Request.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Виктор Пасынок Виктор ПасынокВиктор Пасынок

Фронт: Навигация стрелками на сайте Stylelint

Для новичков, задача на пару дней

У Stylelint есть сайт со списком правил. Они перечисленны списком, но их сложно читать последовательно — нет ссылок на следующее и предыдущее правило.

Польза: получить опыт в JS.

  1. Изучить код сайта и понять, где формируется список правил.
  2. Форкнуть репозиторий с сайтом. Создать ветку.
  3. Добавить на страницу правила ссылку на следующее и предыдущее правило.
  4. Добавить JS-код, который будет слушать нажатия на клавиши и переключать страницы по нажатию на стрелки на клавиатуре.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Вова Дем Вова ДемВова Дем

Помог Андрей Новиков Андрей НовиковАндрей Новиков

Бэк: Инструмент для создания частичного, анонимизированного дампа базы данных

Для продвинутых, задача на неделю

Необходимо разработать инструмент (gem) для создания частичного, анонимизированного дампа базы данных Rails (ActiveRecord) приложения.

Это позволит нам использовать на тестовых серверах данные, максимально приближенные к боевым, но при этом не делать полный дамп (который может быть очень большим). Дополнительно в целях безопасности мы также хотим анонимизировать часть данных (персональные данные и т.п.).

Польза: возможность познакомится с внутренностями ActiveRecord, попрактиковаться в написании Ruby gems и написать инструмент, которым будет активно пользоваться сообщество.

Почему ActiveRecord?

Решение подобной задачи в общем случае (на уровне самой БД) потребует от нас ручного описания связей между данными и постоянной актуализации этих связей.

Наличие же ORM решает эту проблему практически полностью (если все необходимые данные смоделированы с помощью этой ORM).

Как это должно работать?

В первую очередь нам необходимо описать, какие именно данные мы хотим выгрузить и какие изменить. Выглядеть это может так (для структуры приложения, описанной здесь):

EvilSeed.configure do |config|
  # Указываем корневые/начальные объекты – те, которые мы хотим выгрузить, со всеми
  # связанными данными.
  #
  # Первый аргумент – название модели, второй – условия для выборки
  config.root("Forum", id: 42) do |r|
    # мы хотим исключить некоторые ассоциации
    # для этого можем использовать регулярные выражения,
    # по которым будет матчится путь к ассоциации.
    #
    # путь к ассоциации – это строка, составленная из названий ассоциаций, по которым мы пришли,
    # разделенных точкой, где первая часть – это название модели.
    #
    # пример: "forum.users.questions"
    r.exclude(
      [
        # мы не хотим дампить настройки трекинг-пикселей
        /\btracking_pixels\b/
      ]
    )

    # кроме того, мы можем ограничить количество выгружаемых объектов ассоциации;
    # например, не более 100 элементов для всех
    r.limit_associations_size(100)

    # для конкретной ассоциации по пути
    r.limit_associations_size(10, "forum.questions")

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

  # системные модели, например, роли
  config.root("Role") do |r|
    # исключаем все ассоциации
    r.exclude(/.*/)
  end

  # Преобразование атрибутов – это глобальная настройка
  config.customize("User") do |u|
    # ставим всем пользователям одинаковый пароль
    u["encrypted_password"] = encrypt("qwerty")
  end

  # Анонимизация – это синтаксический сахар для преобразования,
  # который может использовать, например, Faker для генерации данных
  config.anonymize("User")
    name { Faker::Name.name }
    email { Faker::Internet.email }
  end
end

Запускать будем следующим образом:

EvilSeed.dump("path/to/file")

Советы по реализации

Язык реализации: Ruby.

Инструкции по выполнению

  1. Форкнуть проект evil-seed на GitHub.
  2. Реализовать необходимый функционал.
  3. Сделать Pull Request.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Козин Андрей КозинАндрей Козин

Помог Тимур Рамазанов Тимур РамазановТимур Рамазанов

Бэк: Policy Object Pattern

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

В GitHub-репозитории tram-policy опубликована документация к gem, реализующему базовый класс для контексто-специфичных валидаторов в Ruby. В описании приводится мотивация, примеры интерфейса и поддерживаемых фич; дан список классов и объектов, составляющих публичный интерфейс. Сейчас репозиторий содержит только документацию без какого-либо кода (помимо тривиальных объявлений).

Задача состоит в том, чтобы полностью разработать gem в соответствии с описанием.

Польза: возможность попрактиковаться в написании gem’ов, реализовать один из базовых паттернов разработки средствами чистого Ruby (попутно сняв «ауру магизма» с валидаторов, как мы привыкли к ним в Rails), познакомиться с классической библиотекой I18n, создать простыми средствами один из базовых компонентов для сложных Rails/PORO приложений.

Решение: Второе и третье места с благодарностью за участие в разработке достаются Анастасии Власовой и Сергею Чечаеву, также предложившим свои решения.

Задача должна быть по силам новичку с базовыми знаниями Ruby и фреймворка RSpec.

Обратите внимание на то, что все необходимые зависимости уже объявлены в спецификации (файл .tram-policy.gemspec) и Gemfile gem’а. Не добавляйте новых зависимостей сверх указанных. Поскольку речь идет о публичной библиотеке, код должен быть хорошо покрыт тестами.

Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Евгений Шкодин Евгений ШкодинЕвгений Шкодин

Фронт: Виджет для 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.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Максим Гатилин Максим ГатилинМаксим Гатилин

Фронт: Генератор настроек Stylelint

Для новичков, задача на пару дней

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

Надо создать такой же для Stylelint. Только показывать настройки прямо в процессе.

Польза: получить реальный сайт в резюме, получить опыт в JS.

  1. Изучите Stylelint и выберите пару самых простых настроек.
  2. Создайте новый репозиторий.
  3. Выберите любой сборщик, JS-фреймворк. Например, webpack и React или Vue.js.
  4. Сделайте одностраничный сайт. Справа вопрос — слева файл настроек. Когда пользователь отвечает на вопрос, в настроки добавляется выбранное правило.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Антон Артамонов Антон АртамоновАнтон Артамонов

Фронт: Bunyan-формат в Logux Server

Для новичков, задача на пару дней

Bunyan становится форматом логов де-факто в Node.js. Для удобной интеграции с инфраструктурой в Logux Server нужно добавить поддержку этого формата.

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

  1. Форкнуть logux-server.
  2. Добавить опцию для смены формата лога.
  3. Скопировать reporters/human в reporters/bunyan — заменить код, сохранив API. Общий код можно вынести в reporters/common.js.
  4. В server.js загружать разные файлы reporters в зависимости от опции.
  5. Покрыть тестами каждый репортер и то, что сервер слушается опции.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помогла Жулдуз Жанкенова Жулдуз ЖанкеноваЖулдуз Жанкенова

Фронт: Тесты для Browserslist CLI

Для новичков, задача на пару дней

Browserslist используют Автопрефиксер, ESLint и Babel. У него есть консольный интерфейс. Но он не покрыт тестами — регулярно в нем находят проблемы.

Польза: получить больше опыта в тестировании.

  1. Форкнуть Browserslist.
  2. Придумать, как тестировать ./cli.js. Например, можно его вызывать с помощью spawn().
  3. Покрыть тестами.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Алексей Кузнецов Алексей КузнецовАлексей Кузнецов

Фронт: Страница тестирования Logux Status

Для новичков, задача на пару дней

Для UI-функций недостаточно модульного тестирования. В Logux Status нужна страница, где можно было бы в реальности посмотреть на все его возможности.

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

  1. Форкнуть logux-status.
  2. Сделать скрипт запуска dev-сервера webpack с одной HTML-страницей.
  3. Для нее написать JS-файл, который брал бы Logux Client и подключал бы его к ServerSync через LocalPair.
  4. Подключить к клиенту все функции Logux Status.
  5. На страницу добавить чекбокс «Connected».
  6. На страницу добавить кнопки «Error after 3 seconds» и «Send server error after 3 seconds».
  7. На страницу добавить кнопку «Add action to log». Сразу ставить действиям reasons: ['test'] в метадату.
  8. На страницу добавить кнопку «Clean actions».
  9. Сделать, чтобы JS вставлялся внутрь HTML так, чтобы все было в одном файле.
  10. Мы потом выложим эту страницу на GitHub Pages. Так что на ней нужно написать коротко о Logux и о том, что страница тестирует все функции Logux Status. И не забыть поместить логотип Logux, чтобы было красиво.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Роман Фурсов Роман ФурсовРоман Фурсов

Фронт: Цвета в логере Logux

Для новичков, задача на пару дней

В Logux Status есть log(), который выводит в консоль информацию о том, что происходит с Logux. Вывод идет обычным текстом, хотя Chrome уже поддерживает цветной вывод.

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

  1. Форкнуть logux-status.
  2. Сделать у всех текстов в log.js префикс Logux:.
  3. Найти надежный способ определения того, поддерживает ли браузер цветной вывод.
  4. Подсветить префикс Logux: фирменным желтым фоном с логотипа Logux.
  5. Подсветить жирным node ID, имя состояния и тип action в сообщениях.
  6. Добавить во второй аргумент опцию отключения подсветки.
  7. Добавить тесты к опции и определению подсветки.
  8. Добавить абзац про подсветку в документацию.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Владимир Трухин Владимир ТрухинВладимир Трухин

Фронт: Отображать ошибки с Logux-сервера на клиенте

Для новичков, задача на пару дней

Logux-сервер работает с клиентом по веб-сокету. При ошибке сервера, клиент не отобразит страницу с ошибкой, как было бы с PHP или Ruby on Rails.

Поэтому надо добавить способ отображения серверной ошибки к консоли браузера.

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

  1. Форкнуть logux-protocol.
  2. Добавить в описание протокола команду ["debug", string type, any data].
  3. Форкнуть logux-sync.
  4. Добавить в BaseSync метод sendDebug() для отправки команды и событие debug при получении команды.
  5. Добавить тесты для новых возможностей.
  6. Форкнуть logux-server.
  7. Добавить в BaseServer метод debugError(error), который отправит всем клиентам команду debug с типом error и stacktrace.
  8. Добавить в Server автоматический вызов debugError при ошибке, если this.env равен development.
  9. Добавить тесты на новую логику сервера.
  10. Форкнуть logux-client.
  11. При получении события debug с ошибкой, выводить ее в консоль, помечая, что это ошибка сервера. Желательно, чтобы ошибка показывалась как обычная JS-ошибка со стандартным UI для stacktrace.
  12. Добавить тесты на вывод ошибки.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Роман Фурсов Роман ФурсовРоман Фурсов

Фронт: Добавить ES2015+ в конфиг ESLint для Logux

Для новичков, задача на пару дней

Logux написан на ES5, чтобы работать в браузере без компиляции. Но Logux Server не будет работать в браузере. Минимальной версией node.js будет 4, так что его можно переписать на ES6.

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

  1. Форкнуть eslint-config-logux.
  2. Создать файл node4.js, где подключить node/no-deprecated-api и node/no-unsupported-features (для node.js 4) из eslint-plugin-node.
  3. Добавить в node4.js правила, которые обяжут использовать ES6-функции, достпуные в node.js 4.
  4. Разделить документацию на инструкции для index.js и для node4.js.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Андрей Мануйлов Андрей МануйловАндрей Мануйлов

Фронт: Логер в Logux Status

Для новичков, задача на пару дней

Logux Status — это подборка методов отображения статуса синхронизации в браузере. Нужно добавить вывод процесса синхронизации через console.log.

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

  1. Форкнуть logux-status.
  2. Добавить log.js с функцией log. Она должна принимать Sync.
  3. Она должна возвращать функцию-отписку, при вызове которой логгер перестанет работать.
  4. Если был передан не Sync, а объект со свойством sync (например, Logux Client), то брать Sync оттуда.
  5. Написать код подписки на connect, state, error и clientError. По этим событиям выводить в консоль браузера, что происходит с Logux.
  6. Написать код подписки на add у sync.log. Выводить в консоль информацию о новом событии в логе.
  7. Добавить тесты для этой функции.
  8. Добавить ее в index.js и добавить тесты на то, что она там есть.
  9. Добавить документацию в README.md.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Константин Епишев Константин ЕпишевКонстантин Епишев

Фронт: Перевести Logux-сервер на ES6

Для новичков, задача на пару дней

Logux написан на ES5, чтобы работать в браузере без компиляции. Но Logux Server не будет работать в браузере. Минимальной версией node.js будет 4, так что его можно переписать на ES6.

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

  1. Форкнуть logux-server.
  2. Сменить настройки ESLint на eslint-config-logux/node4.
  3. Обновить синтаксис везде, где ESLint скажет.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Андрей Мануйлов Андрей МануйловАндрей Мануйлов

Фронт: Привлекать внимание при ошибке в Logux Status

Для новичков, задача на пару дней

Logux Status — это подборка методов отображения статуса синхронизации в браузере. Нужно добавить смену <title> при ошибке, чтобы подсветить вкладку в браузере.

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

  1. Форкнуть logux-status.
  2. Добавить attention.js с функцией attention. Она должна принимать Sync.
  3. Она должна возвращать функцию-отписку, при вызове которой смена <title> перестанет работать.
  4. Если был передан не Sync, а объект со свойством sync (например, Logux Client), то брать Sync отткуда.
  5. Написать код подписки на событие error и при любом событии, кроме timeout, добавлять к <title> * и убирать ее при открытии вкладки (через Page Visibility API).
  6. Добавить тесты для этой функции.
  7. Добавить её в index.js и добавить тесты на то, что она там есть.
  8. Добавить документацию в README.md.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Андрей Мануйлов Андрей МануйловАндрей Мануйлов

Фронт: Смена favicon в Logux Status

Для новичков, задача на пару дней

Logux Status — это подборка методов отображения статуса синхронизации в браузере. Нужно добавить смену favicon при онлайне, офлайне и ошибке.

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

  1. Форкнуть logux-status.
  2. Добавить favicon.js с функцией favicon. Она должна принимать Sync и набор ссылок на favicon для обычного состояния, офлайна и ошибки.
  3. Она должна возвращать функцию-отписку, при вызове которой смена favicon перестает работать.
  4. Если был передан не Sync, а объект со свойством sync (например, Logux Client), то брать Sync отткуда.
  5. Написать код подписки на событие state и смену обычный/офлайн favicon.
  6. Написать код подписки на событие error и при любом событии, кроме timeout, сменять иконку на иконку ошибки.
  7. Добавить тесты для этой функции.
  8. Добавить её в index.js и добавить тесты на то, что она там есть.
  9. Добавить документацию в README.md.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Владимир Трухин Владимир ТрухинВладимир Трухин

Фронт: Подтверждения закрытия вкладки в Logux Status

Для новичков, задача на пару дней

Logux Status — это подборка методов отображения статуса синхронизации в браузере. Нужно добавить подтверждение закрытия вкладки при неотправленных событиях в логе.

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

  1. Форкнуть logux-status.
  2. Добавить confirm.js с функцией confirm. Она должна принимать Sync и текст предупреждения (с текстом по умолчанию).
  3. Она должна возвращать функцию-отписку, по вызове которой предупреждение перестает работать.
  4. Если был передан не Sync, а объект со свойством sync (например, Logux Client), нужно брать Sync отткуда.
  5. Написать код подписки на событие state, чтобы при наличии неотправленных событий в onbeforeunload предупреждать пользователя, что не все данные успели синхронизироваться.
  6. Добавить тесты для этой функции.
  7. Добавить ее в index.js и добавить тесты на то, что она там есть.
  8. Добавить документацию в README.md.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Антон Савоськин Антон СавоськинАнтон Савоськин

Фронт: Перевести Logux-сервер на µWS

Для новичков, задача на пару дней

Logux-сервер сейчас использует пакет ws для работы с веб-сокетами. Но пакет uWebSockets гораздо быстрее.

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

  1. Форкнуть logux-server.
  2. Заменить в проекте ws на uws.
  3. Проверить все тесты и починить проблемы.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Вова Дем Вова ДемВова Дем

Помог Тимур Рамазанов Тимур РамазановТимур Рамазанов

Бэк: Поддержка ассоциаций в Logidze

Для уверенных в себе, задача на неделю

Библиотека Logidze позволяет работать с версиями объектов ActiveRecord моделей и историей их изменений.

Необходимо расширить эту интеграцию, добавив поддержку ассоциаций.

Польза: возможность познакомится с внутренностями ActiveRecord и научиться с ними работать.

Примеры работы, или что делать?

Предположим, что у нас есть две модели:

class Post < ActiveRecord::Base
  has_many :comments
  has_logidze
end

class Comment < ActiveRecord::Base
  belongs_to :post
  has_logidze
end

Мы хотим, чтобы при работы с версиями одной модели, соответствующие ассоциации (те, для которых включено версионирование) также подгружались для соответствующей отметки во времени. Пример:

# 2017-01-19
post = Post.create!(post_params)

# 2017-01-22
comment = post.comments.create(body: 'My comment')

# 2017-01-24
comment.update!(body: 'New text')

# смотрим пост до обновления комментария (первый случай)
old_post = post.at('2017-01-23')

# сам пост в этот момент не менялся, но у нас есть ассоциация, которая поменялась
old_post.comments.first #=> 'My comment'

# для более старой версии комментариев не было (второй случай)
very_old_post = post.at('2017-01-20')
very_old_post.comments.size #=> 0

Подводные камни и вопросы для обсуждения

1) В первом случае объект old_post – это тот же самый объект post, так как Logidze возвращает сам объект, если не было изменений с указанного времени. Но для корректной загрузки ассоциаций нам необходимо знать о времени.

Можно изменить это поведение и возвращать объект, который знает о запрашиваемом времени; либо оставить это на откуп разработчикам и советовать им использовать touch: true, чтобы в родительской модели всегда были изменения.

2) Сохранение прошлой версии должно сохранять и соответствующие ассоциации, но только при явном указании:

# не сохраняет старые версии ассоциаций
old_post.save!

post.undo!

# сохраняет предыдущие версии ассоциаций
old_post.save!(associations_versions: true)

post.undo!(old_post.save!(associations_versions: true))

Для обновления ассоциаций мы можем использовать встроенный механизм – ActiveRecord::AutosaveAssociation.

Нужно только научиться включать и выключать его (в случае, если была использована опция autosave: true) самостоятельно.

Во втором случае (very_old_post) нужно также учесть и удаление записей.

Идеи реализации

Нам необходимо уметь вклиниваться в процесс загрузки ассоциаций для объекта, добавляя вызов метода at(time) на загруженных объектах (см. ActiveRecord#associtaion и ActiveRecord::Associations::Association#load_target).

При этом нужно учитывать, какие ассоциации имеют версионирование (т.е. has_logidze).

Инструкции по выполнению

  1. Присоединиться к обсуждению задачи на GitHub.
  2. Форкнуть проект logidze.
  3. Реализовать необходимый функционал.
  4. Сделать Pull Request.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Павел Ковалев Павел КовалевПавел Ковалев

Фронт: Перевести Logux-сервер на снимки Jest

Для новичков, задача на пару дней

Logux-сервер сейчас использует свою систему снимков для тестирования. Но у Jest уже есть хорошая система снимков. Нужно перенести тесты на них.

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

  1. Прочитать про снимки Jest.
  2. Форкнуть logux-server.
  3. Перевести test/server.test.js и test/reporter.test.js на снимки Jest. Файлы test/snapshots/reports.js и test/servers/servers.js можно перенести в тесты — они больше не нужны отдельно.
  4. Сделать команду yarn run snapshots, которая вызовет jest -u, а потом выведет снимки в консоль — с ее помощью будет удобно смотреть, что сервер будет выводить в консоль во время работы.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Григорий Мороз Григорий МорозГригорий Мороз

Фронт: Понятные ошибки в Logux-сервере

Для новичков, задача на пару дней

Нужно вывести подробное описание по самым распространенным ошибкам запуска Logux-сервера и объяснить что делать, чтобы их исправить.

Польза: принять участие в разработке Logux.

  1. Форкнуть logux-server.
  2. Добавить в server.js перехват ошибки при вызове метода listen().
  3. Найти, как определять ошибки вида «порт занят другой программой» и «у вас нет прав использовать порт меньше 1024».
  4. Создать файл error-helper.js, который будет форматировать и выводить подобные ошибки при запуске сервера. Пример можно посмотреть в reporter.js.
  5. Написать понятный текст для каждой ошибки — что произошло и как исправить. Текст должен быть понятен начинающему программисту.
  6. Добавить тесты.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Павел Ковалев Павел КовалевПавел Ковалев

Фронт: Настройки Logux-сервера через аргументы и переменные среды

Для новичков, задача на пару дней

Сейчас порт, хост и пути к TLS-ключам можно задать только в коде сервера. Нужно добавить в Logux-сервер чтение CLI-аргументов и переменных среды.

Польза: принять участие в разработке Logux; разобраться в Logux-сервере.

  1. Форкнуть logux-server.
  2. Добавить метод options = BaseServer#loadOptions(process, defaults). В нем брать настройки из аргументов --port/-p, --host/-h, --key/-k, --cert/-c и переменных среды LOGUX_PORT, LOGUX_HOST, LOGUX_KEY и LOGUX_CERT.
  3. На параметр --help выводить справку по аргументам, переменным среды и завершать работу.
  4. Добавить тесты для этого метода.
  5. Добавить интеграционное тестирование в test/servers/.
  6. Использовать этот метод в app.listen() в примере кода сервера в README.md.
  7. Добавить описание аргументов и переменных среды в README.md.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Денис Раслов Денис РасловДенис Раслов

Фронт: Проверка сообщений в Logux

Для новичков, задача на пару дней

Нужно добавить в Logux Sync код, который будет проверять формат и типы принятых сообщений.

Польза: принять участие в разработке Logux; разобраться с его протоколом.

Общее правило в разработке серверов — данные клиента не должны вызвать ошибку и падение сервера. Но сейчас Logux Sync не проверяет входящие сообщения. Например, что в сообщении ["ping"] отсутствует число.

В итоге, ошибка в реализации клиента или действия злоумышленика способны привести к падению сервера. Проблема отягощается отсутствием проверки типов в JS.

Нужно добавить проверку типов в Logux Sync. Желательно не использовать большие библиотеки, так как Logux Sync используется и на клиенте.

  1. Изучить возможные сообщения в протоколе Logux.
  2. Форкнуть logux-sync.
  3. Добавить код проверки. Возможно, имеет смысл вынести его в отдельный файл. При неправильном сообщение возвращать ошибку wrong-format, как это делается в BaseSync#onMessage.
  4. Добавить тесты.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помогла Наталия Короткова Наталия КоротковаНаталия Короткова

Фронт: Добавить кнопку Gitter на postcss.org

Для новичков, задача на пару дней

PostCSS использует чат Gitter для помощи разработчикам. У сервиса появился скрипт для добавления чата на любой сайт. Надо добавить его на postcss.org.

Польза: получить опыт с React и красивую строку в резюме.

Сайт postcss.org написан на Phenomic, специальном React-фреймворке для статичных сайтов.

Но скрипт Gitter — не компонент React, а обычный скрипт. Главный вопрос — где их совместить.

  1. Нужно форкнуть postcss.org.
  2. Изучить Phenomic и найти место для скрипта Gitter.
  3. Отправить pull request.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Олег Алешкин Олег АлешкинОлег Алешкин

Фронт: Парсер PostCSS для синтаксиса Sass

Для уверенных в себе, задача на месяц

PostCSS имеет сменные синтаксисы. Это особо полезно для Stylelint, чтобы проверять исходники. Сейчас можно работать с Less и SCSS.

Нужно взять dart-sass и сделать на его основе парсер синтаксиса Sass, который использует отступы.

Польза: познакомиться с командой Sass; многие крупные проекты смогут использовать ваш проект для Stylelint.

dart-sass — это официальный парсер Sass, написанный на Dart. Его можно скопилировать в JS, поэтому он уже есть на npm.

Самый надежный способ — взять этот парсер, получить Sass AST и сконвертировать его в PostCSS AST.

  1. Изучить dart-sass в поисках API, чтобы отпарсить строку в AST.
  2. Если такого API нет, то нужно создать задачу в их репозитории и упоминять там @ai. Если стесняетесь языка — напишите Ситнику, он поможет.
  3. Сделать проект postcss-sass и использовать этот API. Пример конвертирования AST можно посмотреть в postcss-csso.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помогла Анна Столяр Анна СтолярАнна Столяр

Фронт: Перенести проверку протокола в клиент Logux

Для новичков, задача на пару дней

Нужно добавить на клиент предупреждение о нешифрованом веб-сокете в продакшене. Убрать эти ограничения на сервере.

Польза: принять участие в разработке Logux и разобраться с его внутренним устройством.

Веб-сокеты практически бессмысленно использовать без шифрования — старые прокси будут резать непонятный им трафик. Использование WebSockets поверх TLS (wss://) решает проблемы со старыми прокси.

Чтобы пользователи потом не жаловались, мы принуждаем их сразу использовать wss:// в продакшене. Но текущая проверка протокола на стороне сервера не очень оправдана — TLS часто реализуется на уровне nginx.

  1. Форкнуть logux-client.
  2. Выводить подробное предупреждение, если адрес сервера использует ws:// вместо wss:// а домен не равен 127.0.0.1, localhost, ip6-localhost, ::1 и не размещен в зоне .dev.
  3. Перед выводом предупреждения проверять, что в браузере есть console.warn.
  4. Добавить тесты, создав mock на console.warn.
  5. Форкнуть logux-server.
  6. Убрать проверку SSL is required in production mode.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Никита Гусаков Никита ГусаковНикита Гусаков

Фронт: ES5-плагин для ESLint

Для новичков, задача на пару дней

Нужно написать eslint-plugin-es5 с правилами для ESLint для проверки того, что в коде не используется ES2016.

Польза: получить опыт расширения ESLint, поучаствовать в проекте Logux.

Logux не использует Babel. Поскольку часть кода будет работать в старых браузерах, при разработке Logux мы используем ES5.

Есть опасность, что по привычке в код попадет какая-то функция из ES2016 — тесты на Node.js пройдут, а после релиза в Сафари все сломается.

  1. Прочитать документацию по разработке плагинов ESLint.
  2. Создать проект eslint-plugin-es5. Например, скопировать структуру eslint-plugin-babel.
  3. Создать правило по запрету const и let (за основу можно взять правило no-var).
  4. Создать правило по запрету стрелочных функций (на основе prefer-arrow-callback).
  5. Добавить тесты на оба правила.
  6. Выложить проект на npm.
  7. Прислать pull request в eslint-config-logux.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Олег Алешкин Олег АлешкинОлег Алешкин

Фронт: Загрузка статистики для Browserslist

Для новичков, задача на пару дней

Автопрефиксер, Stylelint, babel-preset-env и cssnext используют Browserslist, чтобы пользователь мог разом указывать список браузеров, которые нужно поддерживать в этом проекте.

Browserslist поддерживает указание браузеров по проценту рыночной доли. Можно указывать реальную статистику пользователей сайта, чтобы точнее считать долю.

Нужно добавить поддержку файла browserslist-stats.json для указания статистики сайта.

Польза: сделать функцию, которой будут пользоваться куча веб-разработчиков.

  1. Нужно форкнуть Browserslist.
  2. Найти, где Browserslist ищет и загружает текущий конфиг.
  3. На основе этого кода пытаться также найти файл browserslist-stats.json. Учтите, что он может быть выше или ниже, чем обычный файл browserslist.
  4. Грузить этот файл той же логикой, что сейчас обрабатывает опцию stats.
  5. Если указана опция stats или process.env.BROWSERSLIST_STATS, то искать browserslist-stats.json не нужно.
  6. Добавить тесты.
  7. Рассказать о новой функции в документации.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Степан Кузьмин Степан КузьминСтепан Кузьмин

Фронт: Browserslist и package.json

Для новичков, задача на пару дней

Автопрефиксер, Stylelint, babel-preset-env и cssnext используют Browserslist, чтобы пользователь мог разом указывать список браузеров, которые нужно поддерживать в этом проекте.

Нужно доработать Browserslist, чтобы он смотрел не только в browserslist, но и в ключ browserslist в package.json.

Польза: сделать функцию, которой будут пользоваться многие веб-разработчики. Эта функция будет использоваться в create-react-app Дэна Абрамова.

Формат package.json ожидается примерно такой:

{
"name": "my-app",
"private": true,
"dependencies": { },
"browserslist": [
 "last 1 version",
 "ie 10"
]
}
  1. Нужно форкнуть Browserslist.
  2. Найти, где Browserslist ищет и загружает текущий конфиг.
  3. Добавить туда поиск и проверку package.json. Этот файл должен также рекурсивно искаться во всех родительских папках.
  4. Если в одной и той же папке находится package.json с нужным ключем и browserslist — выкидывать ошибку, так как ситуация потенциально опасная.
  5. Добавить тесты на обычный случай и на случай с конфликтом конфигов. Конфиги для тестирования можно разместить в папке test/fixtures.
  6. Рассказать о новой функции в документации.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Максим Семенов Максим СеменовМаксим Семенов

Фронт: Среды в Browserslist

Для новичков, задача на пару дней

Автопрефиксер, Stylelint, babel-preset-env и cssnext используют Browserslist, чтобы пользователь мог разом указывать список браузеров, которые нужно поддерживать в этом проекте.

Нужно доработать Browserslist, чтобы в browserslist можно было указывать отдельный список для production и development среды.

Польза: сделать функцию, которой будут пользоваться многие веб-разработчики. Эта функция будет использоваться в create-react-app Дэна Абрамова.

Формат browserslist станет примерно такой:

[development]
last 1 version

[production]
last 2 versions
> 1 %
  1. Нужно форкнуть Browserslist.
  2. Добавить опцию env в API Browserslist.
  3. По умолчанию, ставить env в значение process.env.BROWSERSLIST_ENV, process.env.NODE_ENV или "development".
  4. Исправить парсер конфига, чтобы он поддерживал главы вида [name].
  5. Если глава не указана, парсить как "defaults".
  6. Выбирать список браузеров из конфига в соответствии с env. Если главы, указанной в env, нет, то брать "defaults".
  7. Добавить тесты для всех описанных выше случаев.
  8. Рассказать о новой функции в документации.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Вова Дем Вова ДемВова Дем

Помог Тимур Рамазанов Тимур РамазановТимур Рамазанов

Бэк: Фильтрация полей для версионирования в Logidze

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

В библиотеку Logidze нужно добавить функционал фильтрации полей, учитываемых при версионировании.

Это позволит уменьшить размер лога, а значит расход ресурсов и время на обработку.

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

Как это должно работать?

Есть два противоположных подхода к фильтрации данных: белый список и черный список.

В первом случае мы явно указываем, какие поля хотим добавить в лог:

$ rails generate logidze:model Post --only="title,user_id,tags"

Во втором — поля, которые мы хотим исключить из версионирования:

$ rails generate logidze:model Post --except="created_at,updated_at"

Инструкции по выполнению

  1. Ознакомиться с более подробным описанием задачи на GitHub.
  2. Форкнуть проект logidze.
  3. Реализовать необходимый функционал.
  4. Сделать Pull Request.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Макс Ларионов Макс ЛарионовМакс Ларионов

Фронт: SugarSS в Sublime Text

Для новичков, задача на пару дней

Нужно добавить поддержку синтаксиса SugarSS в плагин PostCSS для Sublime Text.

Польза: очень простая задача, чтобы разобраться в опенсорсе; позволит понять, как устроен Sublime Text внутри; попасть в анонсы PostCSS.

  1. Посмотреть, как в плагине уже сделали поддержку PostCSS из синтакса SCSS.
  2. Скопировать файл синтаксиса Sass и модифицировать его для SugarSS.
  3. Сделать Pull Request.
  4. Написать Ситнику свой ник в Твиттере и ВК (если есть) для анонса.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Бэк: Добавить новые источники данных в Ossert: StackOverflow

Для уверенных в себе, задача на несколько дней

Нужно добавить в Ossert новые источники данных. Отличным кандидадатом с достаточно богатым API является StackOverflow.

Это позволит охватить еще один важный аспект развития Open-Source библиотек — доступность и объем поддержки, а также заинтересованность в них.

Польза: возможность научиться работать с API StackOverflow и узнать больше о метриках и способах измерения зрелости свободного ПО.

Как это должно работать?

На данный момент сбор информации уже работает для Rubygems, Github и Bestgems. Необходимо совместимым образом организовать сбор с новых источников.

Советы по реализации

За основу предлагается взять любой из существующих классов для сбора в Ossert. Например, Ossert::Fetch::Rubygems, и реализовать класс, осуществляющий сбор интересной информации:

module Ossert
  module Fetch
    class StackOverflow
      def initialize(project)
        ...
      end

      def process
        # Метод сбора основных метрик по проекту
      end
    end
  end
end

Для начала, вам потребуется вникнуть в проблему, решаемую проектом — оценку зрелости свободного ПО.

Для этого нужно проанализировать возможность API вашего источника данных и выбрать:

  1. параметры для сбора;
  2. полезные метрики, которые можно измерить на их основании.

Например:

  • «сколько было вопросов по проекту на StackOverflow»;
  • «какой процент отвеченных вопросов на StackOverflow».

А затем, конечно, организовать сбор этих метрик и параметров.

Инструкции по выполнению

  1. Форкнуть проект Ossert на Github.
  2. Реализовать необходимый функционал.
  3. Сделать Pull Request.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.

Помощь запрашивал Андрей Ситник Андрей СитникАндрей Ситник

Помог Евгений Жаров Евгений ЖаровЕвгений Жаров

Фронт: Тестирование CSS-минификаторов

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

Нужно сделать скрипт, который будет брать пару популярных сайтов (типа GitHub) и на их верстке тестировать все минификаторы с помощью gemini или подобного тестирования по скриншотам. Результатом работы будет HTML страница с результатами каждого минификатора.

Польза: разобраться в тестировании по снимкам; познакомиться со всеми разработчиками CSS-минификаторов; строчка в резюме о том, что на качество всех CSS-минификаторов повлияли лично вы.

В качестве примера можно посмотреть на css-minification-benchmark.

  1. Нужно создать GitHub-проект.
  2. Загрузить через npm самые популярные CSS-минификаторы (можно взять все, что использует css-minification-benchmark).
  3. Подобрать известные сайты для тестирования. Нужно взять как хорошие проекты (вроде сайта Github), так и написанные грязно. Еще желательно взять какой-то проект со стилями в опенсорсе.
  4. Написать скрипт, который загрузит свежие стили и HTML этих сайтов.
  5. Написать скрипт, который который прогонит стили через все минификаторы.
  6. Написать скрипт, который запустит тестирование по скриншотами.
  7. Написать скрипт, который сгенерирует HTML-страницу с результатами для каждого минификатора.
Знаете, как решить эту задачу лучше или элегантнее? Оставьте ссылку на свое решение в комментариях.