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

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

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

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

Фронт: Добавить предупреждения grid-area в Autoprefixer

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

Autoprefixer старается конвертировать Grid Layout для Internet Explorer. Некоторые пользователи делают ошибку и пишут grid-area и grid-row и/или grid-column в одном и том же правиле (это бессмысленно).

Надо показывать предупреждение, если в одном правиле есть grid-area и grid-row или grid-column.

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

  1. Форкнуть Autoprefixer.
  2. Добавить тесты.
  3. Добавить код предупреждений в Processor.

— Можно мне взять эту задачу?

Все задачи на этой странице еще не решены. Если задача вам интересна — берите и смело делайте. Спрашивать разрешения и становиться в очередь не нужно. Даже если кто-то сделает задачу быстрее вас, не останавливайтесь — ваше решение может быть лучше. Это Open Source!

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

Фронт: Убрать Cairo из postcss-conic-gradient

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

postcss-conic-gradient — полифил для конических градиентов в CSS.

Он генерирует SVG-картинку для градиента и вставляет эту каринку в CSS как data:uri. Для генерации изображения он сейчас использует Cairo — бинарную зависимость, которую надо отдельно ставить в систему.

Нужно заменить Cairo на какую-то другую библиотеку на чистом JavaScript или вручную генерировать SVG.

Польза: получить опыт работы с графикой в JavaScript, улучшить очень полезный полифил.

  1. Изучить текущий код.
  2. Найти способы сгенерировать SVG на чистом JS.
  3. Форкнуть postcss-conic-gradient и исправить его.

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

Фронт: Добавить предупреждения Grid Layout в Autoprefixer

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

Autoprefixer старается конвертировать Grid Layout для Internet Explorer. Однако свойства align-content, align-items, justify-content и justify-items нельзя сконвертировать.

Надо показывать предупреждение, если в одном правиле есть display: grid или display: inline-grid и свойства из списка выше.

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

  1. Форкнуть Autoprefixer.
  2. Добавить тесты.
  3. Добавить код предупреждений в Processor.

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

Фронт: Не показывать предупреждения Autoprefixer в @supports

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

Autoprefixer старается конвертировать Grid Layout для Internet Explorer. Если он не может это сделать, он показывает предупреждения.

Но иногда предупреждения не имеют смысла — например, если свойство и так внутри проверки @supports:

@supports (grid-template-columns: repeat(auto-fill, 200px)) {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}

Надо добавить код, отключащий предупреждения, если среди родителей узла есть @supports с похожим значением (например, тоже содержащим слово auto).

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

  1. Форкнуть Autoprefixer.
  2. Добавить тесты.
  3. Исправить код предупреждений в Processor.

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

Бэк: Исправить реакцию на неизвестное событие в Logux Rails

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

Logux Rails — gem, позволяющий связать Logux-сервер и приложение на Ruby on Rails. В каталоге app/logux/ разработчик описывает права доступа и контроллеры для разных типов событий от Redux и подписок.

Если разработчик не создал обработчик для какого-то события или подписки, gem выбросит ошибки NoPolicyError и NoActionError. Вместо этого нужно в ответ выдавать ['unknownAction', meta.id] или ['unknownChannel', meta.id].

Польза: получить open source портфолио в Ruby, научиться работать с Logux.

  1. Форкнуть Logux Rails.
  2. Убрать выбрасивание ошибки NoActionError. Иногда имеет смысл не иметь код в app/logux/actions для события.
  3. Для неизвестного события вместо NoPolicyError писать ['unknownAction', meta.id].
  4. Для неизвестной подписки вместо NoPolicyError писать ['unknownChannel', meta.id].
  5. Обновить тесты.

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

Бэк: Добавить Logux.undo() в Logux Rails

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

Logux Rails — gem, позволяющий связать Logux-сервер и приложение на Ruby on Rails. В каталоге app/logux/ разработчик описывает права доступа и контроллеры для разных типов событий от Redux и подписок.

Logux умеет откатить любое событие, которое было создано клиентом или отправлено с сервера. Для этого нужно сгенерировать особое событие. Нужно перенести эту логику в Rails в метод Logux.undo().

Польза: получить open source портфолио в Ruby, научиться работать с Logux.

  1. Форкнуть Logux Rails.
  2. Изучить JS-версию метода.
  3. Переписать на Ruby; this.log.add() заменить на Logux.add().
  4. Покрыть тестами.

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

Бэк: Добавить rake-задачи в Logux Rails

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

Logux Rails — gem, позволяющий связать Logux-сервер и приложение на Ruby on Rails. В каталоге app/logux/ разработчик описывает права доступа и контроллеры для разных типов событий от Redux и подписок.

Нужно добавить две rake-задачи:

  1. rake logux:actions — чтобы вывести action.type, которые ожидают все обработчики событий из app/logux/actions.
  2. rake logux:channels — чтобы вывести все подписки, которые ожидают обработчики подписок из app/logux/channels.

Польза: получить open source портфолио в Ruby, разобраться с Rake, научиться работать с Logux.

  1. Форкнуть Logux Rails.
  2. Изучить пример приложения.
  3. Найти способ собрать список всех обработчиков событий из app/logux/actions. Сгенерировать, какой action.type они ждут.
  4. Найти способ, собрать список всех обработчиков подписок из app/logux/channels. Сгенерировать, какой action.channel они ждут.
  5. Создать файл lib/rake/logux_tasks.rb.
  6. Добавить задачи logux:actions и logux:channels.
  7. Покрыть задачи тестами.

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

Бэк: Добавить strong params в Logux Rails

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

Logux Rails — gem, позволяющий связать Logux-сервер и приложение на Ruby on Rails. В каталоге app/logux/ разработчик описывает права доступа и контроллеры для разных типов событий от Redux и подписок.

Нужно, чтобы в Logux::Actions работала та же фильтрация входящих параметров, что и в контроллерах Rails.

Польза: получить open source портфолио в Ruby, научиться работать с Logux.

  1. Форкнуть Logux Rails.
  2. Прочитать про strong params: причины, документацию, API.
  3. Разобраться, как strong params подключаются к контроллерам Rails.
  4. Подключить их так же в Logux::Actions.
  5. Покрыть тестами.

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

Бэк: Улучшить логер в Logux Rails

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

Logux Rails — gem, позволяющий связать Logux-сервер и приложение на Ruby on Rails. В каталоге app/logux/ разработчик описывает права доступа и контроллеры для разных типов событий от Redux и подписок.

Нужно улучшить вывод gem’а в консоль согласно списку в issue.

Польза: получить open source портфолио в Ruby, опыт работы с логером в Rails, научиться работать с Logux.

  1. Форкнуть Logux Rails.
  2. Изучить список улучшений.
  3. Изучить, как в Rails принято подсвечивать вывод в консоли.
  4. Найти подсветку синтаксиса для JSON.
  5. Улучшить вывод.

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

Бэк: Генерировать meta.id в Logux Rails

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

Logux Rails — gem, позволяющий связать Logux-сервер и приложение на Ruby on Rails. В каталоге app/logux/ разработчик описывает права доступа и контроллеры для разных типов событий от Redux и подписок.

Каждое событие в Logux имеет уникальный ID в meta.id. Но пока Logux Rails не умеет генерировать этот ID.

Польза: получить open source портфолио в Ruby, научиться работать с Logux.

  1. Форкнуть Logux Rails.
  2. Изучить JS-версию генератора ID.
  3. При старте сервера сгенерировать уникальный node_id вида server:#{ nanoid(8) }.
  4. При генерации события в Logux.add() ставить ему meta.id.
  5. Покрыть тестами.

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

Бэк: Улучшить ответ при ошибке в Logux Rails

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

Logux Rails — gem, позволяющий связать Logux-сервер и приложение на Ruby on Rails. В каталоге app/logux/ разработчик описывает права доступа и контроллеры для разных типов событий от Redux и подписок.

Сейчас при ошибке gem всегда выдает ['error'] в ответ. Нужно возвращать ['error', meta.id, error_stack] или ['error', auth_id, error_stack].

Польза: получить open source портфолио в Ruby, научиться работать с Logux.

  1. Форкнуть Logux Rails.
  2. Изучить текий способ обработки ошибок.
  3. Изменить обработку ошибок, чтобы знать, какая команда из command_params вызвала ошибку.
  4. Для ошибки во время команды action нужно писать в ответ ['error', meta.id, error_stack].
  5. Для ошибки во время команды auth нужно писать в ответ ['error', chunk.auth_id, e.backtrace.join("\n")].
  6. Убедиться, что ошибка в одной команде не мешает обработать остальные команды.
  7. Обновить тесты.

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

Фронт: Перезапустить easings.net

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

Easings.net — каталог easing-функций. Easing-функции — очень важный элемент анимаций, поэтому многие разработчики посещают этот сайт, чтобы правильно подобрать анимацию на веб-странице.

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

  1. Изучить текущий сайт.
  2. Изучить, что надо переделать, а что оставить.
  3. Придумать дизайн и нарисовать его набросок.
  4. Опубликовать набросок вашего дизайна в комментариях к issue.
  5. После одобрения дизайна, форкнуть репозиторий и написать новый код.
  6. Отправить новый код в pull request.

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

Бэк: ActiveRecord: ленивая предзагрузка ассоциаций

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

В ActiveRecord предусмотрено несколько методов для предварительной загрузки ассоциированных записей (такие как includes, eager_load и другие). Это позволяет выгружать данные, избегая так называемой проблемы N+1 запросов.

В некоторых случаях мы не знаем заранее, какие ассоциации нам понадобятся при выполнении запроса (простой пример — работа с GraphQL).

Приходится либо предзагружать лишние данные (например, указывая все ассоциации в includes), либо использовать альтернативные подходы, такие как batch loading.

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

Польза: детально узнать, как работает Rails и ActiveRecord изнутри, принести пользу Rails-сообществу.

Пример работы

class User < ApplicationRecord
  has_many :posts
end

class Post < ApplicationRecord
  has_many :comments
  belongs_to :user
end

class Comment < ApplicationRecord
  belongs_to :user
  belongs_to :post
end

# Инициируем выборку: выгружаем пользователей с публикациями,
# комментариями и авторами комментариев
users = User.lazy_preload(posts: { comments: :user } ).limit(10)

# Будет выполнен один запрос
#=> SELECT * FROM users LIMIT 10
users.each do |user|
  # Запрос на загрузку постов будет выполнен при первом
  # обращении к ассоциации на любом пользователе,
  # но записи будут загружены сразу для всех пользователей
  #
  # SELECT * FROM posts WHERE user_id in (...)
  user.posts.each do |post|
    p post.title
  end
end

# Комментарии не будет предзагружены, так как мы к ним не обращались.

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

Фронт: Сделать хороший дизайн главной страницы postcss-preset-env

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

Скоро postcss-preset-env заменит cssnext и станет одним из «главных» плагинов PostCSS.

У плагина есть сайт, но его главная страница совсем не информативная.

Задача подойдет, если вы больше фокусируетесь на дизайне и CSS.

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

  1. Форкнуть репозиторий сайта.
  2. Переключиться в ветку jonathantneal.
  3. Подумать, как кратко объяснить, о чем этот плагин, чем он лучше cssnext, чем он может быть полезен разработчикам. Отдельно можно сравнить его с некоторыми функциями Sass и провести ассоциацию с CoffeeScript и Babel.
  4. Если есть вопросы по тому, как лучше рассказать о плагине или чем он лучше — спросить в чате PostCSS или лично Ситника.
  5. Добавить больше примеров и текста на главную.

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

Бэк: Добавить поддержку Plezi/Iodine в LiteCable

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

LiteCable – это альтернативная реализация фреймворка ActionCable из Rails, совместимая с ActionCable-клиентами, но при этом имеющая минимум зависимостей.

Необходимо добавить в LiteCable интеграцию с Plezi (Iodine) “из коробки” (по аналогии с тем, как это сделано для AnyCable).

Польза: познакомиться и научиться работать с новым веб-сервером для Ruby приложений (Iodine); разобраться во внутреннем устройстве real-time фреймворков.

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

Iodine – это новый веб-сервер для Ruby приложений (альтернатива Unicorn/Puma/etc), спроектированный специально для работы с большим количеством одновременных подключений (например, веб-сокетов).

LiteCable реализует бизнес-логику работы с сокетами (“каналы”) и предоставляет API для интеграции с непосредственно сервером (на данный момент “из коробки” доступна интеграция с AnyCable.

Задача состоит в том, чтобы сделать использование Iodine в качестве сервера для LiteCable возможным и максимально простым.

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

Вместо “голого” Iodine можно сделать интеграцию с Plezi – микро-фреймворком для работы с веб-сокетами.

Информацию о внутреннем устройстве подписок можно посмотреть тут.

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

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

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

Фронт: Событийная архитектура PostCSS

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

Нужно придумать новый API для плагинов PostCSS — чтобы они все работали вместе, в одном цикле прохода по AST-дереву.

Задание сложное. Оно меньше про код и больше про переговоры, анализ и архитектуру. Но зато дает максимальное количество опыта.

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

Сейчас каждый плагин PostCSS проходит по AST-дереву CSS каждый раз заново. В итоге нельзя делать вложенные функции, и при большом количестве плагинов сильно проседает производительность.

У Babel есть более правильный visitor API: когда плагины подписываются на какие-то типы узлов. А внутри PostCSS запускается один проход по дереву, который в нужных местах дергает подписанные плагины.

Первый этап:

  1. Придумать такой API.
  2. Сделать пару примеров псево-кода: как API будет использоваться в простейших плагинах?
  3. Отправить эти примеры Андрею (Gist или проект на GitHub).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Например:

  • «сколько было комментариев к постам о проекте с момента последнего релиза»;
  • «сколько уникальных пользователей комментировали посты о проекте».

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

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

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