Виджет для Logux — Cult of Martians

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

Помог Сергей Лысенко

Фронт: Добавить поддержку color-adjust в Автопрефиксер

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

CSS-свойство color-adjust из черновика CSSWD работает в webkit-браузерах через свойство -webkit-print-color-adjust.

Нужно добавить поддержку этого свойства в Автопрефиксер.

Польза: написать в резюме, что сделали минорный релиз Автопрефиксера.

Прочитать о -webkit-print-color-adjust и color-adjust. Узнать, кто их поддерживает и, примерно, с какой версии. Начальные ссылки есть в issue Автопрефиксера.
Послать PR в caniuse с данными о префиксах и поддержке разными браузерами. В конце PR написать /cc @ai.
Форкнуть Автопрефиксер.
Добавить даннные в data/prefixes.js.
Добавить новый хак в lib/hacks/. Сделать в нем замену имени свойства по примерам других хаков.
Загрузить новый хак в lib/prefixes.js.
Добавить тестовые CSS в test/cases/.
Добавить тест использующий эти тестовые CSS в test/autoprefixer.test.js.

Посмотреть решение

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

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

Помог Алексей Комаров

Фронт: Сделать калькулятор вероятность коллизии NanoID

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

NanoID — JavaScript-библиотека для генерации случайных ID. Как и у UUID, есть определенная вероятность того, что будет сгенерированы два одинаковых ID.

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

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

Изучить, как нужно считать вероятность генерации одинаковых ID и количество случайных бит.
Сделать статичную страницу, где у пользователя будет спрашиваться длина ID, сколько ID генерируется в час, алфавит. В итоге будет выводиться, как много лет пройдет перед тем, как вероятность получить одинаковый ID в двух документах будет больше, чем 1%.
При загрузке страницы эти поля должны быть сразу заполнены какими-то стандартными данными (длина и алфавит по умолчанию для NanoID, 1000 ID в час).
Добавить на страницу краткое описание NanoID и описание того, что делает калькулятор.
Добавить пример кода: как генерировать ID в NanoID с выбранным алфавитом и длиной. Если алфавит стандартный, нужно использовать require('nanoid'), для нестандартного — require('nanoid/generate').
Постараться сделать страницу красиво. Указать межстрочный интервал, выбрать шрифт, выделить главное.

Посмотреть решение

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

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

Помогли Никита Мишарин Александр Шагов

Бэк: Isolator: инструмент для отслеживания побочных эффектов внутри транзакций БД

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

Необходимо написать инструмент для Ruby-стека, который будет отслеживать выполнение потенциально опасных действий внутри транзакции БД (например, HTTP-запросов или отправки фоновых задач в очередь).

Польза: разобраться в том, как работают популярные ORM и другие библиотеки для работы с «внешним миром»; написать инструмент, которым будет активно пользоваться Ruby-сообщество.

Постановка задачи

Основная задача — подсказать разработчику, что внутри транзакции выполняется какая-то небезопасная операция.

Например:

# вызов HTTP
User.transaction do
  user = User.new(user_params)
  user.save!
  # происходит вызов внешнего API
  PaymentsService.charge!(user)
end

# создание фоновой задачи
User.transaction do
  user.update!(confirmed_at: Time.now)
  UserMailer.successful_confirmation(user).deliver_later
end

В случае, если в итоге наша транзакция не будет зафиксирована («закоммичена»), может нарушится согласованность данных в нашей бизнес-логике — и другие ошибки (так как эти операции не откатятся).

Что именно отслеживать?

HTTP вызовы (посмотрите на sniffer)
Отправка в очередь фоновых задач (но только в том случае, когда для хранения очереди используется не БД)
Что еще? Все перечислить невозможно, поэтому необходимо предусмотреть интерфейс/инструкцию для расширения (регистрации произвольных проверок)

Как уведомлять?

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

выбрасывать исключения (удобно при разработке и тестировании)
при использовании в стейджинг-окружении нужно иметь возможность посылать уведомления во внешний мир (например, через uniform_notifier)

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

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

Необходимо предусмотреть работу с различными ORM адаптерами (начать можно с ActiveRecord).
Подключение должно быть максимально простым и не требовать явного указания, с каким ORM интегрироваться — то есть, достаточно просто сделать require "isolator" (или добавить в Gemfile).
Сообщение об ошибке должно указывать, где именно вызывается опасный метод в приложении; также было бы полезно показывать, где была инициирована транзакция.

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

Форкнуть проект isolator на GitHub.
Реализовать необходимый функционал.
Сделать Pull Request.

Посмотреть решение

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

Помощь запрашивал Кирилл Кузнецов

Бэк: Добавить поддержку Chef Client 13 в кукбук для управления БД PostgreSQL: postgresql_lwrp

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

postgresql_lwrp — самый удобный и гибкий кукбук для системы управления конфигурациями Chef, обеспечивающий установку и настройку БД PostgreSQL.

Нужно обеспечить его работу в Chef Client версии 13.

Польза: возможность попрактиковаться в написании кукбуков Chef, разобраться в особенностях Chef 13.

Этот кукбук создавался и активно развивался в период, когда самой свежей версией Chef client была 12-я. Релиз 13-й версии принес много нововведений, в том числе ломающих совместимость. Необходимо обновить код кукбука с учетом этих нововведений.

В процессе работы потребуется разобраться со списком сторонних кукбуков, от которых зависит postgresql_lwrp. Возможно, потребуется их замена или полный рефакторинг соответствующих мест, так как они тоже могут быть несовместимы с Chef Client 13.

Может быть удобнее выполнять задание, если сразу сделать отдельные Test Kitchen suites, использующие свежий Chef Client 13. Test Kitchen suites для Chef Сlient 12 стоит сохранить, чтобы проверять обратную совместимость: 12-я версия все еще активно используется в старых инсталляциях.

Что нужно сделать:

Форкнуть наш форк или оригинальный репозиторий от Express 42 кукбука на GitHub.
Реализовать необходимый функционал.
Добавить новые тесты.
Сделать Pull Request.

Посмотреть решение

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

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

Помог Михаил Мандронов

Бэк: Поддержка Excon для Sniffer

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

Sniffer – это гем для логирования и анализа HTTP-траффика, который поддерживает большинство ruby-библиотек для работы с HTTP-запросами.

Hеобходимо добавить поддержку Excon.

Польза: получить опыт разработки gem’ов, разобраться в принципах работы с HTTP-запросами в Ruby, помочь полезному проекту

Что нужно сделать:

Форкнуть проект Sniffer на GitHub.
Реализовать необходимый функционал.
Написать тесты.
Сделать Pull Request.

Посмотреть решение

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

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

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

Фронт: Добравить поддержку конфига в Size Limit

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

Прямо сейчас Size Limit читает свои настройки из package.json. Но было бы хорошо добавить поддержку отдельного файла настроек, например, .size-limit с JSON внутри.

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

Изучить cosmiconfig. Понять, подходит ли он для задачи.
Форкнуть size-limit.
Исправить ./cli.js для использования с cosmiconfig (или написать код поиска файла настроек самому, если cosmiconfig не подходит).
Добавить тесты.
Добавить документацию.

Посмотреть решение

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

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

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

Фронт: Добравить запрос по году релиза в Browserslist

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

Browserslist — инструмент для Autoprefixer и Babel для выбора браузеров, которые нужно поддерживать в проекте.

Есть хорошая идея добавить запрос вида since 2013 для выбора версий браузеров, вышедших с 2003 года.

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

Форкнуть caniuse-lite.
Добавить в src/packer/agents.js копирование release_date из caniuse-db/fulldata-json/data-2.0.json.
Добавить тесты в src/agents.test.js.
Отправить pull request, упомянув в описании @ai @ben-eb.
Форкнуть browserslist.
Добавить в QUERIES новый запрос.
Добавить тесты на новый запрос.
Написать в документации о новом запросе.
Отправить pull request.

Посмотреть решение

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

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

Помог Алексей Комаров

Фронт: Улучшить поддержку Grid Layout от IE в Autoprefixer

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

Autoprefixer умеет вставлять -ms- префиксы для CSS Grid Layout, заменяя синтаксис, но эта поддержка очень ограничена. Есть мнение, что ее можно улучшить.

Польза: разобраться в Grid Layout, принять участие в большом open-source проекте.

Посмотреть примеры в issue.
Почитать документацию по указанным свойствам Grid Layout.
Сравнить с документацией на свойства IE/Edge.
Форкнуть autoprefixer.
Новые сойства добавить в data/prefixes.js, если их там еще нет.
В lib/hacks создать/добавить логику изменения синтаксиса.
Добавить новые примеры в test/cases/grid.*.

Посмотреть решение

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

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

Помог Игнат Закревский

Бэк: OmniAuth-стратегия для входа через новый eBay OAuth API

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

Необходимо разработать OmniAuth-стратегию для входа в приложения на Ruby с учетной записью eBay в виде отдельного гема.

Сейчас есть гемы, которые реализуют вход через метод Auth’n’auth (например, подзаброшенный гем omniauth-ebay), а через метод OAuth — нет. (Технически оба метода работают по протоколу OAuth, что вносит путаницу).

Для работы с новыми REST API eBay пользователь должен входить именно через новый метод входа.

Польза: возможность разобраться, как же работает ~~вход через соцсети~~ протокол OAuth и библиотека OmniAuth.

Решение: итоговая реализация основана на решении Игната Закревского, но и Андрей Падерин и Илья Долгирев прислали рабочие решения, за что им выражается благодарность.

Что нужно реализовать:

Ruby gem с OmniAuth-стратегией и тестами на взаимодействие с eBay.

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

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

Документация начинается здесь и продолжается здесь.

Примечание: После успешной аутентификации пользователя на стороне eBay, у нас нет никакой информации, кто же к нам пришел. Для этих целей провайдеры обычно предоставляют так называемый UserInfo endpoint, но проблема в том, что в новых eBay REST API такого нет. Поэтому для получения информации необходимо делать запрос к методу getUser старого Trading API с указанием нового токена заголовке X-EBAY-API-IAF-TOKEN (мы пишем это здесь, потому что в документации этого не найти).

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

Форкнуть проект omniauth-ebay-oauth
Реализовать необходимую функциональность.
Создать pull request.

Посмотреть решение

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

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

Помог Николай Сверчков

Бэк: Clowne: инструмент для клонирования моделей

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

Необходимо написать инструмент для клонирования моделей (например, Active Record) с гибкими настройками. Существующие гемы (deep_clonable и amoeba), к сожалению, неудобны при работе со сложной бизнес-логикой и завязаны на ActiveRecord.

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

Что должен уметь Clowne?

Конфигурация логики клонирования на уровне модели через DSL c поддержкой наследования

class PostCloner < Clowne::Cloner
  # клонировать все ассоциированные объекты
  include_all
  
  # клонировать указанную ассоциацию
  include_association :comments
  
  # указать scope для ассоциации
  include_association :comments, -> { where('created_at > ?', 1.year.ago) }
  # или именнованный scope
  include_association :comments, :this_year
  
  # исключить ассоциацию (если она была добавлена через include_all или в родительском конфиге)
  exclude_association :likes
  
  # обнулить поля
  nullify :external_id, :modified_at, :modified_by
  
  # пользовательский блок, вызываемый в конце клонирования
  finalize do |source, record|
     # ...
  end
end

Для клонирования объекта вызываем:

cloned_post = PostCloner.call(post)

Поддержка контекста

# Дополнительно указываем контекст и произвольные параметры
cloned_post = PostCloner.call(post, for: :another_user, user_id: 123)

class PostCloner < Clowne::Cloner
  ...
  # в конфигурации описываем именнованный контекст
  context :another_user do
    nullify :user_id
    
    # в модификаторах ассоциаций имеем доступ к доп. параметрам
    include_association :likes, -> (params) { where.not(user_id: params[:user_id]) }
    
    # и в finalize
    finalize do |source, record, params|
      record.user_id = params[:user_id]
    end
  end
end

# Только произвольные параметры
cloned_post = PostCloner.call(post, user_id: 123)

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

# По умолчанию для модели Comment
class CommentCloner < Clowne::Cloner
  ...
end

class SimpleCommentCloner < Clowne::Cloner
  ...
end

class PostCloner < Clowne::Cloner
  include_associations :comments, clone_with: SimpleCommentCloner
end

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

class Post < ActiveRecord::Base
  # Явно указать класс клонера
  clone_with ArticleCloner
end

post.clone(params) == ArticleCloner.call(post, params)

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

Форкнуть проект clowne на GitHub.
Реализовать необходимый функционал.
Сделать Pull Request.

Посмотреть решение

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

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

Помог Юрий Лебедев

Бэк: Active Record JSONB ассоциации

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

Необходимо реализовать возможность хранить данные для ассоциаций (внешние ключи) в поле колонки типа JSONB (PostgreSQL), сохранив при этом большую часть функционала ассоциаций Active Record.

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

Часть 1. Все яйца в одну корзину.

Рассмотрим простой пример:

class Profile < ActiveRecord::Base
  # передаём дополнительную опцию `store`,
  # которая указывает, что мы хотим хранить ключ
  # не в отдельной колонке ("user_id"),
  # а в jsonb-колонке "extra".
  belongs_to :user, store: :extra
end

class SocialProfile < ActiveRecord::Base
  belongs_to :user, store: :extra
end

class User < ActiveRecord::Base
  # в обратной связи указываем, что связь через store.
  # Вопрос: можно ли опустить явное указание того,
  # что используется store, и "узанавать" его из связяннoй модели?
  has_one :profile, foreign_store: :extra
  has_many :social_profiles, foreign_store: :extra
end

Этот функционал позволяет хранить информацию о разных ассоциациях в одной JSONB колонке.

Что мы хотим?

Поддержка стандартного функционала ассоциаций (опции foreign_key, inverse_of и т.д.)
Рабочий preload / includes:

User.all.includes(:profile)
#=> SELECT * FROM users
#=> SELECT * FROM profiles where extra->>'user_id'::int IN (...)

Рабочий eager_load / joins.
Поддержка создания/удаления подходящих индексов в миграциях:

add_reference :profiles, :users, store: :extra, index: true

Часть 2. Много-Много.

Используя JSONB, мы можем реализовать связь многие-ко-многим без промежуточной таблицы (если, например, количество связей небольшое):

class Label < ActiveRecord::Base
  # в поле extra['user_ids'] мы будем хранить массив id пользователей,
  has_and_belongs_to_many :users, store: :extra
end

class User < ActiveRecord::Base
  # здесь список лейблов в extra['label_ids']
  has_and_belongs_to_many :labels, store: :extra
end

С точки зрения API функционал должен повторять имеющийся для HABTM.

Также было бы неплохо ответить на вопрос – в каких случаях выгоднее использовать такой подход вместо классического?

Лучшим ответом на этот вопрос будет предъявление бенчмарков и их результатов.

Посмотреть решение

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

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

Помог Руслан Гафуров

Бэк: Поддержка Fabrication в TestProf

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

TestProf – это набор инструментов для профилирования тестов, который включает в себя FactoryProf, анализатор использования фабрик в тестах.

Необходимо добавить поддержку Fabrication (альтернатива FactoryGirl) в FactoryProf: сбор общей статистики по использованию фабрик, построение factory flame графиков.

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

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

Ознакомиться с более подробным описанием задачи или обсудить на GitHub.
Форкнуть проект test-prof на GitHub.
Реализовать необходимый функционал.
Сделать Pull Request.

Посмотреть решение

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

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

Помог Илья Долгирев

Бэк: Интеграция EventProf и Minitest

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

EventProf – один из инструментов, входящих в состав TestProf. На данный момент работает “из коробки” только с фреймворком RSpec.

Необходимо реализовать интеграцию Minitest и EventProf.

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

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

Ознакомиться с более подробным описанием задачи или обсудить на GitHub.
Форкнуть проект test-prof на GitHub.
Реализовать необходимый функционал.
Сделать Pull Request.

Посмотреть решение

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

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

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

Форкнуть logux-status.
Изучить status.js и как он используется в badge.js.
Изменить код внутри sync.on('state', …), чтобы connecting передавался в callback не сразу, а только если он не изменилася за 100 мс.
Добавить тесты.

Посмотреть решение

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

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

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

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

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

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

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

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

Форкнуть logux-sync.
Изучить документацию по API.
Добавить в reconnect.js код, который при событии online пробует подключиться снова.
Добавить тесты.

Посмотреть решение

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

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

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

Фронт: Опция 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.

Форкнуть logux-core.
Добавить опцию keepLast в Log#add().
Добавить тесты.

Посмотреть решение

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

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

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

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

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

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

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

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

Форкнуть yandex-speller.
Изучить lib/post.js.
В случае ошибки ETIMEDOUT делать еще 2 попытки.

Посмотреть решение

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

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

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

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

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

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

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

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

Форкнуть logux-core.
Сгенерировать документацию — yarn run docs.
Изучить API Store из docs/Store.html.
Изучить текущие тесты test/memory-store.test.js.
Форкнуть logux-client.
Изучить текущие тесты test/indexed-store.test.js.
Форкнуть logux-store-tests.
Создать тесты для всего API Store внутри функции eachTest в index.js по примеру теста is a object.
Удалить тест is a object.
Подключить ваш форк logux-store-tests в форк logux-core — в package.json можно указывать версию из GitHub.
Проверить, что MemoryStore проходит новые тесты. Почистить старые тесты от уже ненужных тестов API.
Подключить ваш форк logux-store-tests в форк logux-client.
Проверить, что IndexedStore проходит новые тесты. Почистить старые тесты от уже ненужных тестов API.
Отправить Pull Request всех трех проектов.

Посмотреть решение

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

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

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

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

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

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

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

Форкнуть logux-server.
Изучить, как можно заменять вывод Bunyan на примере bunyan-format.
Запустить ./test/__snapshots__/show.js и посмотреть все варианты вывода сервера.
Изучить формат Human в reporters/human.
Сделать модуль для Bunyan, который брал бы объект текущего bunyan-лога у Logux и выводил его в формате Human. Убедиться, что вывод полностью совпадает с текущим форматом Human.
Покрыть этот модуль тестами.
Переписать 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)

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

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

Форкнуть проект rspec-sqlimit.
Реализовать необходимый функционал.
Сделать Pull Request.

Посмотреть решение

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

Бэк: Утилита для запуска WebSocket-клиентов с поддержкой сценариев

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

Необходимо разработать Ruby-инструмент (CLI) для выполнения сценариев взаимодействия WebSocket-клиентов с сервером.

Утилита может быть использована как для blackbox-тестирования (в том числе и нагрузочного) WebSocket-приложений, так и просто в качестве удобного консольного клиента при разработке.

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

Решение: итоговая реализация основана на решениях Кирилла Архипова и Сергея Елушева, за что им выражается особая благодарность.

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

Рассмотрим два примера. Предположим, что наш сервер — это Action Cable.

Пример №1

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

клиент отправляет сообщение серверу;
сервер в ответ отправляет такое же сообщение клиенту.

Запуск сценария будет производиться так:

$ wsdirector echo.yml ws://localhost:3444/cable

Здесь ws://localhost:3444/echo – путь к нашему WS-приложению, а echo.yml – файл сценария, который может выглядеть так:

# приветственное сообщение от Action Cable
- receive:
    # если поле data – объект, то
    # предполагаем, что это json
    data:
      type: "welcome"
# подписка на канал и ожидание подтверждения
- send:
    data:
      command: "subscribe"
      identifier: "{\"channel\":\"TestChannel\"}"
- receive:
    data:
      type: "subscription_confirmation"
      identifier: "{\"channel\":\"TestChannel\"}"
- send:
    data:
      command: "message"
      identifier: "{\"channel\":\"TestChannel\"}"
      data: "{\"text\": \"echo\",\"action\":\"echo\"}"
- receive:
    data:
      identifier: "{\"channel\":\"TestChannel\"}"
      message: "{\"text\": \"echo\"}"

В случае возникновения ошибки на каком-либо шаге, скрипт должен завершаться с ненулевым статусом (exit code) и выводить в STDERR информацию о том, на каком этапе сценария произошел сбой.

Пример №2

Давайте рассмотрим более интересный случай с несколькими клиентами с отличающимся поведением.

все клиенты подключаются к серверу и подписываются на канал;
клиенты X отправляют сообщение;
все клиенты должны получить такое число сообщений, сколько у нас клиентов X.

Кроме того, нам бы хотелось, чтобы мы могли легко конфигурировать число клиентов:

Наша команда будет выглядеть так:

$ wsdirector -s 10 broadcast.yml ws://localhost:3444/cable

А файл сценария broadcast.yml:

# сценарий публикующего клиента
- client:
    # :scale – это параметр переданный в команде через -s
    # multiplier говорит, сколько нам нужно таких клиентов 
    # (коэффициент "размножения")
    multiplier: ":scale"
    actions:
      # приветственное сообщение от Action Cable
      - receive:
          data:
            type: "welcome"
      # подписка на канал и ожидание подтверждения
      - send:
          data:
            command: "subscribe"
            identifier: "{\"channel\":\"TestChannel\"}"
      - receive:
          data:
            type: "subscription_confirmation"
            identifier: "{\"channel\":\"TestChannel\"}"
      # важный момент – ждём, пока все клиенты достигнут этой точки в сценарии
      - wait_all
      # отправляем сообщение в канал
      - send:
          data:
            command: "message"
            identifier: "{\"channel\":\"TestChannel\"}"
            data: "{\"text\": \"hello\", \"action\":\"broadcast\"}"

# сценарий обычного клиента
- client:
    # слушателей мы хотим в 10 раз больше
    multiplier: ":scale * 10"
    actions:
      # аналогичные действия для подписки на канал пропустим (кстати, как бы нам их переиспользовать?)
      ...
      - wait_all
      - receive:
          # каждый клиент должен получить сообщение от каждого публикующего клиента
          multiplier: ":scale"
          data:
            identifier: "{\"channel\":\"TestChannel\"}"
            message: "{\"text\": \"hello\"}"

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

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

Код Action Cable каналов из примеров – gist.

Для реализации веб-сокет клиента можно использовать gem websocket-client-simple, а также посмотреть примеры его использования в Rails или Lite Cable.

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

Форкнуть проект wsdirector на GitHub.
Реализовать необходимый функционал.
Сделать Pull Request.

Посмотреть решение

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

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

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

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

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

Необходимо разработать инструмент (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.

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

Форкнуть проект evil-seed на GitHub.
Реализовать необходимый функционал.
Сделать 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 и создании виджетов.

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

Посмотреть решение

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

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

Форкнуть Browserslist.
Придумать, как тестировать ./cli.js. Например, можно его вызывать с помощью spawn().
Покрыть тестами.

Посмотреть решение

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

Форкнуть logux-status.
Сделать у всех текстов в log.js префикс Logux:.
Найти надежный способ определения того, поддерживает ли браузер цветной вывод.
Подсветить префикс Logux: фирменным желтым фоном с логотипа Logux.
Подсветить жирным node ID, имя состояния и тип action в сообщениях.
Добавить во второй аргумент опцию отключения подсветки.
Добавить тесты к опции и определению подсветки.
Добавить абзац про подсветку в документацию.

Посмотреть решение

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

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

Форкнуть logux-server.
Сменить настройки ESLint на eslint-config-logux/node4.
Обновить синтаксис везде, где ESLint скажет.

Посмотреть решение

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

Форкнуть logux-server.
Заменить в проекте ws на uws.
Проверить все тесты и починить проблемы.

Посмотреть решение

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

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

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

Бэк: Поддержка ассоциаций в 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).

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

Присоединиться к обсуждению задачи на GitHub.
Форкнуть проект logidze.
Реализовать необходимый функционал.
Сделать Pull Request.

Посмотреть решение

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

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

Нужно форкнуть postcss.org.
Изучить Phenomic и найти место для скрипта Gitter.
Отправить pull request.

Посмотреть решение

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

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

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

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

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

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

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

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

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

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

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

Посмотреть решение

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

Помощь запрашивал Эмиль Кашкевич

Бэк: Поддержка Yarn для npmdc

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

Сейчас gem npmdc проверяет наличие установленных npm-пакетов и соответствие их версий на основе файла package.json.

Нужно добавить поддержку Yarn.

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

Как это работает сейчас:

Разбираем файл package.json и строим по нему дерево зависимостей с указанием версии.
Разбираем содержимое папки node_modules.
Для каждого пакета проверяем его наличие в папке node_modules и соответствие версии, указанной в package.json.
Генерируем отчет и показываем его по завершению операции и/или в процессе выполнения (в зависимости от выбранного formatter’а).

Что нужно сделать:

Добавить в конфиг опцию для выбора пакетного менеджера (NPM/Yarn).
Если выбран Yarn, использовать yarn check:
- следует предусмотреть отсутствие установленного Yarn;
- следует предусмотреть путь к исполнительному файлу Yarn на случай, если пользователь планирует использовать глобально установленную версию;
- вывод отчета проверки yarn check следует привести в соответствие с текущим форматом.
Отобразить используемый пакетный менеджер в сообщениях об ошибках и подсказках.
Добавить тесты.
Добавить информацию о новом функционале в документацию.

Посмотреть решение

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

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

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

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

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

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

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

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

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

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

Посмотреть решение

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

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

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

Фронт: 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"
]
}

Нужно форкнуть Browserslist.
Найти, где Browserslist ищет и загружает текущий конфиг.
Добавить туда поиск и проверку package.json. Этот файл должен также рекурсивно искаться во всех родительских папках.
Если в одной и той же папке находится package.json с нужным ключем и browserslist — выкидывать ошибку, так как ситуация потенциально опасная.
Добавить тесты на обычный случай и на случай с конфликтом конфигов. Конфиги для тестирования можно разместить в папке test/fixtures.
Рассказать о новой функции в документации.

Посмотреть решение

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

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

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

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

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

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

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

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

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

[development]
last 1 version

[production]
last 2 versions
> 1 %

Нужно форкнуть Browserslist.
Добавить опцию env в API Browserslist.
По умолчанию, ставить env в значение process.env.BROWSERSLIST_ENV, process.env.NODE_ENV или "development".
Исправить парсер конфига, чтобы он поддерживал главы вида [name].
Если глава не указана, парсить как "defaults".
Выбирать список браузеров из конфига в соответствии с env. Если главы, указанной в env, нет, то брать "defaults".
Добавить тесты для всех описанных выше случаев.
Рассказать о новой функции в документации.

Посмотреть решение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ознакомиться с более подробным описанием задачи на GitHub.
Форкнуть проект logidze.
Реализовать необходимый функционал.
Сделать Pull Request.

Посмотреть решение

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

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

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

Фронт: SugarSS в Sublime Text

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

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

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

Посмотреть, как в плагине уже сделали поддержку PostCSS из синтакса SCSS.
Скопировать файл синтаксиса Sass и модифицировать его для SugarSS.
Сделать Pull Request.
Написать Ситнику свой ник в Твиттере и ВК (если есть) для анонса.

Посмотреть решение

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

Помощь запрашивал Сергей Долганов

Помог Дмитрий Тонконогов

Бэк: Добавить новые источники данных в 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 вашего источника данных и выбрать:

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

Например:

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

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

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

Форкнуть проект Ossert на Github.
Реализовать необходимый функционал.
Сделать Pull Request.

Посмотреть решение

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

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

Помог Кирилл Садовник

Бэк: Инструмент для тестирования совместимости для AnyCable

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

Нужно написать скрипт (и упаковать его в гем), который позволит проводить аттестационное тестирование (от англ. “conformance testing”) приложений-серверов для AnyCable.

Это повысит скорость и удобство разработки новых реализаций серверов, а также поможет поддерживать актуальность текущих реализаций.

Польза: возможность подробно изучить ActionCable и AnyCable, попрактиковаться в написании гемов и написать инструмент, которым будет активно пользоваться сообщество.

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

Предполагается простой и удобный интерфейс:

$ anycablebility http://localhost:3244/cable

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

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

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

В качестве начальных сценариев для тестирования можно взять приемочные тесты для демо-приложения.

В качестве DSL для написания сценариев и их запуска рекомендуется использовать RSpec.

Для непосредественного взаимодействия с сервером через веб-сокеты можно воспользоваться гемом action_cable_client.

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

Форкнуть проект anycablebility на Гитхабе.
Реализовать необходимый функционал.
Сделать Pull Request.

Посмотреть решение

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

Помощь запрашивал Сергей Долганов

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

Бэк: API Endpoint Sampler

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

Пусть существует Rails приложение с некоторым HTTP API. Будем каждый URL этого API считать эндпоинтом, например:

GET /api/v1/projects/:project_id/notes
GET /api/v1/projects/:project_id/notes/:note_id
POST /api/v2/projects
PUT /api/v3/projects/:project_id

Что хочется получить:

Gem для сбора, просмотра и тэгирования проб (пар запрос/ответ) определенных эндпоинтов HTTP API произвольного Rails-приложения. Тэгом считать произвольную строку.

Что нужно реализовать:

Gem, умеющий следующее:

Собирать пробы (пары запрос/ответ) с заданных эндпоинтов, сохранять их в соответствии с правилами:
- Пробой считать кортеж из:
  - даты-времени;
  - URL запроса;
  - HTTP метода;
  - параметров запроса;
  - тела запроса;
  - тела ответа;
  - набора тэгов.
- Лимитировать сбор проб: не более Y проб за время X;
- Автоматически очищать устаревшие пробы по мере получения свежих;
- Оказывать минимальное влияние на скорость выполнения самого запроса Rails приложением;
- Хранение организовать на PostgreSQL.
Задавать базовую конфигурацию:
- Ограничение на список эндпоинтов в целом (например, через regexp);
- Черный список эндпоинтов;
- Сколько запросов хранить по каждому эндпоинту;
- Как долго хранить пробу;
- Сохранять за время X не более Y проб.
Конфигурировать обработчики для назначения тегов в момент сбора (например, через lambda функции):
```
Sampler.configure do |config|
  config.tag_with "slow", ->(request) { request.time > 200 }
end
```
Просматривать сохраненные пробы, с возможностями:
- Получения списка доступных эндпоинтов приложения (ограниченных в соответствии с конфигурацией) с количеством имеющихся по ним проб;
- Получения сводной таблицы проб по эндпоинту с фильтрацией по тэгам (одному или нескольким) (id, timestamp, params, тэги, ссылки на просмотр тела запроса и ответа);
- Удаления одной или нескольких проб;
- Просмотра тел запроса и ответа пробы;
Устанавливаться в произвольное Rails приложение. Сделать можно, например, так:
```
rails generate api:sampler:install
```

Посмотреть решение

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

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

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

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

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

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

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

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

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

Посмотреть решение

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