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

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

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

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

Фронт: Ускорить OkColor

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

OkColor — это Figma-плагин для работы с OKLCH.

Но этот color picker не использует оптимизации color picker’а Марсиан, поэтому работает медленно. В итоге автору пришлось снизить разрешение <canvas>, что заметно.

Нужно перенести оптимизации из color picker’а Марсиан и поднять разрешение.

Польза: строка в резюме, которая покажет знание API Figma и сложных JS-задач.

  1. Форкнуть OkColor.
  2. Разобраться, как запускать локальную версию плагина в Figma.
  3. Начать считать, сколько времени уходит на отрисовку <canvas> и выводить это в консоль.
  4. Изучить рассказ об оптимизации OKLCH color picker’а Марсиан.
  5. Посмотреть, какие оптимизации используются в текущем коде Марсиан. Как минимум, изучите файлы view/chart/ и lib/workers.ts.
  6. Изучить код OkColor на простые ошибки производительности и исправить их.
  7. Перенести оптимизации из кода Марсиан. Начать стоит с ImageData и избегания множественной конвертации, как в generateGetPixel().
  8. Попробовать перенести отрисовку одного <canvas> по частям в нескольких Web Worker.
  9. Отправить pull request, добавив cc @ai в описание.
Посмотреть решение