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

PostCSS был переведен c line/column на offset.

Теперь надо такую же задачу сделать для [SugarSS], парсера альтернативного синтаксиса для PostCSS. Этот синтаксис строится на отступах — как Sass в SCSS. Поэтому он имеет другой парсер.

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

KeyUX — JS-библиотека, которая добавляет хороший UX работы с клавиатуры на сайт.

Один из паттерном — группы фокуса, когда :focus внутри какой-то группы (например, вкладок или меню) перемещается стрелками, а не Tab.

KeyUX добавялет такое поведение смотря на свойство role, но эти роли ограничены и не подходят для всех сценариев. В веб-сообществе есть идея добавить свойство focusgroup в спецификацию HTML для таких вещей.

Задача — добавить ограниченную поддержку focusgroup в дополнение к role.

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

Browserslist предупреждает, когда caniuse-lite (с базой браузеров) давно не обновляли.

Надо в это предупреждение добавить время с последнего обновления caniuse-lite. За время последнего обновления можно взять время последнего релиза браузера в базе данных.

Browserslist: caniuse-lite is 15 month old. Time to run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme

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

PostCSS, в случае синтаксической ошибки, показывает строку, где она произошла.

Но если это минифицированный CSS-файл, то всё его содержимое будет в одну строчку и ошибка заполняет весь экран консоли.

В таком случае надо выводить лишь 20 символов до начала ошибки и 20 символов после конца.

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

Вышла новая библиотека для работы с цветов в JS.

Нужно попробовать перевести рендер графиков в цветовом миксере OKLCH на неё.

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

KeyUX добавляет на сайт обработку событий с клавиатуры, чтобы пользоваться сайтом с клавиатуры было удобнее.

У нас есть набор функций, но нет видео, которое бы показывало их в действии.

Нужно помочь сделать запись экрана.

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

Нужно добавить поддержку ⌘+Z и ⌘+Shift+Z в OKLCH Color Picker. Пользователь должен иметь возможность отменить и повторить последние изменение цвета.

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

Bun — альтернатива Node.js и npm. В том числе, она может устанавливать JS-зависимости, создавая свой собственный bun.lockb файл.

В Browserslist есть скрипт update-browserslist-db, который обновляет caniuse-lite в проекте, чтобы использовалась свежая база данных браузеров.

Сейчас update-browserslist-db поддерживает только npm, pnpm, yarn. Нужно добавить поддержку Bun.

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

Tinybench — минималистичная система бенчмарков для Node.js. Она отлично вписывается в философию Nano ID, так как имеет мало зависимостей.

Нужно попробовать перевести бенчмарк Nano ID с benchmark на tinybench.

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

KeyUX добавляет на сайт обработку событий с клавиатуры, чтобы пользоваться сайтом с клавиатуры было удобнее.

Например, он добавляет для списков с role="menu" (табы, меню навигации) навигацию стрелочками. Так, вместо огромного списка для Tab-навигации, у нас выделяются изолированные блоки, между которыми мы перемещаемся Tab-ом, а внутри — стрелочками.

Но такая навигация нужна не только role="menu", но и многим другим role (но у каждой немного отличается поведение, будьте внимательны).

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

KeyUX добавляет на сайт обработку событий с клавиатуры, чтобы пользоваться сайтом с клавиатуры было удобнее.

Например, KeyUX автоматически находит, какую кнопку нужно нажать при нажатии горячий клавиши, в зависимости от aria-keyshortcuts у кнопок.

Сейчас KeyUX ищет самую первую кнопку с нужным aria-keyshortcuts, но это не работает для списка, где у каждого элемента своя кнопка с одной и той же горячей клавишей.

<li tabindex="0">
  Item 1
  <button aria-keyshortcuts="v">Validate</button>
</li>
<li tabindex="1">
  Item 1
  <button aria-keyshortcuts="v">Validate</button>
</li>

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

KeyUX добавляет на сайт обработку событий с клавиатуры, чтобы пользоваться сайтом с клавиатуры было удобнее.

Например, он добавляет для списков с role="menu" (табы, меню навигации) навигацию стрелочками. Так вместо огромного списка для Tab-навигации у нас получается такие изолированные блоки — между которыми мы перемещаемся Tab-ом, а внутри стрелочками.

Но сейчас у нас нет одной удобной функции, которая требуется для role="menu".

Нужно чтобы, когда пользователь начал вводить первые буквы элемента списка, фокус переместился на этот элемент. Примерно, как работает <select> или Ariakit.

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

postcss-dark-theme-class позволяет переключать тему сайта через установку HTML-класса в JS и описывать в CSS темную тему в @media (prefers-color-scheme: dark).

В CSS скоро добавится новый способ указывать варианты для светлой и темной темы через light-dark():

a {
  color: light-dark(black, white);
}

Нужно добавить в плагин поддержку этой новой функции, чтобы плагин генерировал CSS вида:

:where(html.is-dark) a {
  color: black;
}
:where(html.is-dark) a {
  color: white;
}

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

Size Limit — это CLI-приложение для Node.js.

Сейчас оно использует CommonJS с require(). Нужно переписать его на ES-модули с import. Поскольку Jest плохо работает с ESM, нужно будет еще переписать тесты на Vitest.

Польза: строка в резюме, которая показывает знание Node.js.

uvu — минималистичная система юнит-тестов для Node.js.

Для нее есть плагин для ESLint — eslint-plugin-uvu/. В этом плагине есть правило uvu/prefer-is-for-primitives; ему нужно добавить возможность авто-исправления кода при запуске eslint --fix.

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

uvu — минималистичная система юнит-тестов для Node.js. Самый простой тест в ней выглядит так:

import { test } from 'uvu'

test('something', () => {
  …
})

test('another', () => {
  …
})

test.run()

В конце каждого файла с тестами нужно писать test.run(), чтобы каждый файл теста был само-исполняемым файлом (node index.test.js). Но test.run() легко забыть.

Надо написать правило в eslint-plugin-uvu, которое будет предупреждать пользователя о забытом test.run().

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

uvu — минималистичная система юнит-тестов для Node.js. Самый простой тест в ней выглядит так:

import { test } from 'uvu'

test('something', () => {
  …
})

test('another', () => {
  …
})

test.run()

Можно заставить uvu выполнять только один тест (например, для целей отладки), заменив test() на test.only(). Но легко потом забыть заменить test.only() на test() обратно.

Надо написать правило в eslint-plugin-uvu, которое будет предупреждать пользователя о забытом test.only(). Правило не надо делать auto-fixable, иначе во время отладки тестов test.only() будет убираться по сохранению файла.

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

В Node.js можно добавлять node:-префикс, чтобы показать, что мы имеем в виду встроенный в Node.js модуль, а не npm-пакет.

import { writeFileSync } from 'node:fs'

Но при разработке легко забыть добавить этот префикс. Хочется иметь правило в ESLint, которое будет гарантировать, что префикс есть во всех нужных местах.

Такое правило есть в eslint-plugin-unicorn, но этот плагин идет с множеством лишних подзависимостей. Хочется иметь какое-то минималистичное решение.

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

PostCSS-плагин postcss-dark-theme-class позволяет сделать темную и светлую тему для сайта полностью на CSS.

Для этого он копирует содержимое @media (preferred-color-scheme: dark) в html.is-dark.

Нужно добавить поддержку @media (preferred-color-scheme: light).

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

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

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

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

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

Nano Stores Persistent — умный стор, который синхронизирует данные с localStorage.

В современных браузерах есть Back-Forward Cache, который позволяет восстанавливать страницу из кэша при нажатии кнопок Назад/Вперед. Он сохраняет на диск снимок памяти страницы и при нажатии Назад мгновенно показывает страницу из кэша.

Но если на следующей странице пользователь изменил что-то в localStorage, то при нажатии Назад страница восстановится из кэша, но данные в умном сторе останутся старыми. Нужно добавить среду для тестирования и событие pageshow, которое будет доставать обновление из localStorage.

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

Nano Stores I18n имеет функцию param() для создания строк перевода, в которых есть параметры:

export const messages = i18n('post', {
  published: params<{ at: string }>('Was published at {at}')
})

Сейчас нужно явно указывать (через <{ at: string }>), какие параметры есть в строке перевода.

Но новый TypeScript умеет парсить строки и выводить типы из них.

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

pnpm умеет выполнять скрипты параллельно (и даже дает крутой UI для объединения вывода):

❯ pnpm test
> pnpm run --recursive --include-workspace-root /^test:/

Scope: all 2 workspace projects
. test:js$ eslint .
└─ Running...
. test:styles$ stylelint **/*.css **/*.svelte
└─ Done in 640ms
. test:types$ tsc --noEmit
└─ Done in 72ms
. test:audit$ pnpm audit --prod
│ No known vulnerabilities found
└─ Done in 3s1s
web test:run$ c8 pnpm unit
└─ Done in 3.6s
│ • • • •   (4 / 4)
└─ Done in 3.1s
web test:check$ svelte-check
│ svelte-check found 0 errors and 0 warnings
└─ Done in 1.7s

Этот инструмент создавался в основном с прицелом на запуск одной и той же задачи в нескольких проектах монорепозитория (аргумент --recursive). Однако, его можно использовать и в одном проекте (--parallel), запуская задачи через регулярные выражения (/^test:/).

Не работают две вещи:

• Если это один проект, а не монорепо, то аргумент --parallel запрещено использовать.
• --parallel не включает красивый UI, как на примере выше с --recursive.

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

Сайт PostCSS имеет страницу с API всех классов.

Мы генерируем эту страницу с помощью скрипта из AST TypeDoc. Но, недавно, генерация сломалась после того, как:

1. Мы перешли на хитрый экспорт типов, чтобы починить TypeScript без breaking change.
2. В новой версии TypeDoc немного поменялся AST.

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

Цветовой миксер OKLCH показывает отдельно 3D-модель цветового пространства и 3 среза. Хотелось бы соединить срезы с 3D-моделью.

Например, можно нарисовать тонкую линию на 3D-модели — там, где находятся текущие срезы.

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

В цветовом миксере OKLCH самая долгая операция — рисование на <canvas>. Сейчас это происходит в том же потоке, в котором работает браузер, поэтому пользователь может видеть «фризы».

Задача состоит в том, чтобы добавить Web Worker и перенести рисование по <canvas> в OffscreenCanvas. Сложность в том, что браузер Safari до сих пор не поддерживает OffscreenCanvas: для него нужно будет сохранить старый подход с главным потоком.

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

В цветовом миксере OKLCH самая долгая операция — рисование на <canvas>. Есть идея, как ее ускорить: несколько веб-воркеров будут генерировать ImageBitmap для своей части графика.

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

В нашем цветом миксере OKLCH мы показываем цветовое пространство OKLCH в виде 3-х срезов. Но само пространство трехмерное. Хочется добавить 3D-отображение с возможностью покрутить его мышкой.

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

«Diamond problem», или проблема ромбовых зависимостей — это непредсказуемое поведение реактивных сторов, у которых зависимости строятся так:

┏━▶ C ━┓
┃      ▼
A      D
┃      ▲
┗━▶ B ━┛

В «правильных» системах, при изменении стора A, сначала пересчитываются сторы B и C, и только потом D.

В Nano Stores обнаружена проблема с тем, что при некоторых ситуациях пересчет идет непредсказуемо. Нужно разобраться и придумать решение.

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

Browserslist Lint — инструмент проверки конфига Browserslist на популярные ошибки.

Было бы хорошо добавить автоматическое исправление ошибок в JS API и использовать его на сайте Browserslist.

Как исправлять каждое правило:

• missedNotDead: добавить not dead в конец запроса.
• countryWasIgnored: добавить >0.3% в начало (или заменить другой запрос >x%).
• limitedBrowsers: добавить в конец 2 versions, not dead.
• alreadyDead: убрать найденные мёртвые браузеры.

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

Нужно выпустить npm-пакет, который можно будет запустить через npx.

После запуска он будет проходить по всем переданным файлам, искать в них цвета в форматах типа #cc0000, rgb(255, 255, 255), hsl(0 10 10 / 0.2), и заменять их на цвет в формате oklch().

npx convert-to-oklch **/*.css

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

postcss-load-config использует Jest для юнит-тестов. Но из-за слабой поддержки ESM в Jest, проект не может добавить поддержку ESM-конфигов.

Нужно перевести проект на uvu.

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

В новом CSS для указания цвета есть функции lch(), lab(), oklch() и oklab(). Проблема в том, что в этих функциях можно указать цвет, который не будет виден для глаза или для конкретного монитора. В Stylelint (линтер для CSS) надо добавить новое правило, чтобы предупреждать, что цвет вышел за пределы.

Цвета можно разделить на:

1. Видимые на sRGB-мониторах (старые обычные цвета).
2. Видимые на P3-мониторах. Таких мониторах сейчас очень мало. Правила с такими цвета надо оборачивать в @media (color-gamut: p3).
3. Видимые на Rec2020-мониторах. Таких мониторов пока нет на рынке. Но на будущее их можно указать, обернув правила в @media (color-gamut: rec2020).
4. Цвета, не видимые глазом человека.

Если цвет в невидимом спектре или вне sRGB, но не обернут в медиа-выражение — правило должно возвращать предупреждение.

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

node-build — скрипт для сборки версий Node.js. Он используется в разных менеджерах контроля версий Node.js, например, в asdf.

Когда выходит новая версия Node.js, бот nodenv-bot присылает PR в node-build с файлами новой версии. Есть пример такого PR. К сожалению, у мейнтейнеров может ути несколько дней, чтобы вмержить его.

Можно добавить скрипт в GitHub Action CI, который будет автоматически мержить PR от nodenv-bot после прохождения тестов.

Польза: получить опыт работы с CI.

Нужно добавить типы в culori, библиотеку для работы с цветом.

Автор библиотеки хотел бы добавить типы не через .d.ts-файлы, а через JSDoc-комментарии в JS-файлах.

Польза: получить опыт работы с TypeScript.

Сейчас logux.org использует Parcel для сборки сайта — он генерирует HTML-шаблон и ассеты, которые потом наполняет другой скрипт.

Нужно перевести проект на Vite — чтобы увеличить скорость сборки и уменьшить размер node_modules.

Польза: получить open source портфолио на Node.js.

Сейчас postcss.org использует Parcel для сборки сайта — он генерирует HTML-шаблон и ассеты, которые потом наполняет другой скрипт.

Нужно перевести проект на Vite — чтобы увеличить скорость сборки и уменьшить размер node_modules.

Польза: получить open source портфолио на Node.js.

Astroturf страдает от большого количества зависимостей. В node_modules он занимает 18 МБ и загружает под сотню подзависимостей.

Кажется, что их не должно быть сложно почистить.

Польза: получить open source портфолио на Node.js.

Нужно обновить pino в Logux Server. Главная проблема в том, что нужно переписать humanFormatter на Pino Transports.

Польза: получить open source портфолио на Node.js.

Сейчас Nano Stores I18n загружает все переводы для выбранного языка сразу. Разработчик должен передать функцию вида:

get (locale) {
   return fetch(`/translations/${locale}.json`)
}

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

Например, разработчик может ввести правило давать имена компонентам (которые используются в функции перевода) вида main/post или settings/user. Переводы он тоже будет хранить блоками, объединяя компоненты с одинаковым префиксом: translations/ru/main.json или translations/settings/ru.json.

В get I18n будет передавать имена всех компонентов, для которых не хватает перевода. Тогда разработчик может передать такую функцию:

get (locale, components) {
   return Promise.all(
    components
      .map(name => name.split('/')[0])
      .unique()
      .map(chunk => fetch(`/translations/${locale}/${chunk}.json`))
  )
}

Польза: получить open source портфолио на JS.

lint-staged позволяет запускать тесты/форматеры на измененных файлах в pre-commit-хуке.

Это отличный инструмент, но 7 МБ много для ее простой утилитарной функции. Хочется иметь минималистичный аналог, пусть и ценой потери функционала.

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

1. Ваш инструмент будет запускать, например, simple-git-hooks.
2. Инструмент находит, какие файлы изменены в коммите.
3. Инструмент берет конфиг и получает список команд для паттерна файлов вида "*.js": ["eslint", "prettier"].
4. Запускает указанные команды.

Чем можно пожертвовать:

1. Поиском конфига. Пусть путь к конфигу будет указываться в конфиге simple-git-hooks вида "pre-commit": "./node_modules/.bin/nano-staged ./package.json".
2. Поддержкой частично добавленных файлов, когда коммитят только несколько строк через git add -p — для них можно не запускать скрипты (предупредив об этом в документации и в выводе в консоль при коммите).
3. Вывод в терминал можно сделать сильно проще.
4. Можно даже просить пользователя указать прямой путь к исполняемому файла обработчика: "*.js": "./node_modules/.bin/prettier".

Задача — создать новый проект минималистичного аналога lint-staged.

Польза: получить open source портфолио на JS.

Nano Stores I18n — библиотека для перевода приложений.

Есть интересная идея: добавить процессоры в переводы. Например, на базе этих препроцессоров можно сделать смену перевода при смене ширины экрана.

// stores/i18n.js
import { atom, onMount } from 'nanostores'
import { createI18n, sizePreprocessor } from '@nanostores/i18n'

const screenSize = atom('big')
onMount(screenSize, () => {
  let media = window.matchMedia('(min-width: 600px)')
  function check () {
    screenSize.set(media.matches ? 'big' : 'small')
  }
  media.addEventListener('change', check)
  () => {
    media.removeEventListener('change', check)
  }
})

size.setSource(screenSize)

export const i18n = createI18n(locale, {
  get: …,
  preprocessors: [
    sizePreprocessor
  ]
})

Надо отправить PR в Nano Stores I18n с реализацией препроцессоров.

Польза: получить open source портфолио на JS.

Я медленно начал переводить свои проекты на фреймворк тестов uvu. Предлагается помочь с переходом репозитория Browserslist на uvu.

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

Я медленно начал переводить свои проекты на фреймворк тестов uvu. Предлагается помочь с переходом репозитория PostCSS на uvu.

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

Когда Size Limit проверяет размер библиотеки, он собирает ее с помощью webpack, чтобы оценить влияние добавления библиотеки на webpack-проект.

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

Нужно создать плагин для Size Limit, который будет использовать esbuild вместо webpack.

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

Сейчас @size-limit/webpack весил 70 МБ. Большая часть размера идет от функций, которые очень редко нужны — опции --why и поддержки CSS.

Нужно вынести их в отдельные плагины @size-limit/webpack-why и @size-limit/webpack-css.

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

Разработчики часто допускают ошибку в настройке сборки и запускают PostCSS без плагинов или опции parser и stringifier. В этом случае PostCSS ничего полезного не делает, но потребляет ресурсы на ненужный парсинг CSS.

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

Мы можем убрать это предупреждение, если ничего не будем делать в этом случае.

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

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

• ID клиента вида 10:FnXaqDxY.
• Action ID вида 1487805099387 10:FnXaqDxY 0 (в середине содержит ID клиента).
• action.id у action с type logux/processed и logux/undo.

Нужно добавить цветовой код (например, 3 цвета на ID клиента и 5 цветов на Action ID), чтобы можно было быстро искать связанные записи в логе.

Задача требует дизайн-похода: не просто реализовать код, а попробовать разные варианты, чтобы найти самый полезный.

Польза: получить open source портфолио на Node.js.

Logux Server по WebSocket получает набор операций от клиента, и для каждой операции вызывает callback, переданный разработчиком.

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

Нужно добавить последовательную обработку операций в виде очереди.

Задача сложная — требует изменить несколько проектов и хорошо продумать все необычные сценарии.

Польза: получить open source портфолио на Node.js.

Yaspeller позволяет проверить орфографию в документации проекта через сервисы Яндекса.

Он занимает в node_modules 3,6 МБ, что много для такого простого инструмента.

Кажется, что можно легко уменьшить размер раза в 2, проанализировав зависимости.

Польза: получить open source портфолио на Node.js.

Если в конфиге PostCSS написать tailwindcss() вместо tailwindcss, то плагин будет инициироваться много раз, что плохо влияет на производительность.

Надо исследовать причину такого поведения и предложить решение.

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

Недавно выпущенная библиотека AnyCable JS является альтернативой стандартному пакету из Rails (@rails/actioncable). Она предоставляет более современный API и новые возможности для написания WebSocket-приложений, использующих Action Cable или AnyCable.

В AnyCable JS понятие канала абстрагировано от транспортного слоя (сокетов), что позволяет рассматривать классы каналов как обычные JS-классы. В свою очередь, это открывает возможности для создания инструментов unit-тестирования каналов — это мы и предлагаем попробовать реализовать.

Польза: получить опыт работы с JS/TS, разобраться в том, как устроены клиентские библиотеки для работы с Action Cable, принести пользу Rails-сообществу.

Надо сделать npm-пакет, который расширяет Nano Colors парсером строки с особым языком для указания цвета:

import { colorize } from "nanocolors-template";

colorize`
CPU: {red ${cpu.totalPercent}%}
RAM: {green ${(ram.used / ram.total) * 100}%}
DISK: {yellow.bold ${(disk.used / disk.total) * 100}%}
`;

Польза: получить open source портфолио на Node.js.

С Browserslist можно использовать команду команду npx browserslist --update-db, чтобы обновить версию caniuse-lite в текущем проекте. Эта команда не поддерживала Yarn 2.

В Yarn 3 добавили команду yarn up -R caniuse-lite, которая сама может обновить все вложенные зависимости.

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

Autoprefixer неправильно обрабатывает ::file-selector-button. На входящий CSS:

input::file-selector-button {
  color: black;
}

input:hover::file-selector-button {
  color: white;
}

Autoprefixer выдает:

input:hover::-webkit-file-upload-button {
  color: white;
}

input:hover::file-selector-button {
  color: white;
}

input:hover::file-selector-button {
  color: white;
}

Хотя должен:

input::-webkit-file-upload-button {
  color: black;
}

input::file-selector-button {
  color: black;
}

input:hover::file-selector-button {
  color: white;
}

input:hover::file-selector-button {
  color: white;
}

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

PostCSS 8.1 неправильно обрабатывает CSS:

.stuff {
  .foo {
    svg {
      display: none;
    }
    .bar {
      display: inline;
    }
  }
}

Получается:

.stuff .foo .stuff svg {
  display: none;
}
.stuff .foo .stuff .bar {
  display: inline;
}

А должно:

.stuff .foo svg {
  display: none;
}
.stuff .foo .bar {
  display: inline;
}

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

У Size Limit используется больше 100 под-зависимостей. Согласно npm.anvaka.com, большинство под-зависимостей идут от read-pkg-up и ora, которые не настолько полезны, чтобы мириться с таким их количеством.

Нужно заменить их на аналоги.

Польза: получить open source портфолио на Node.js.

Nano ID генерирует случайные ID, поэтому случайность влияет на тесты. В итоге, иногда не вызывается строка 50 в async/index.js, и тесты падают из-за недостаточного покрытия.

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

Польза: получить open source портфолио на Node.js, строка в резюме с PR в популярный проект.

postcss-nested неправильно работает с 3-м уровнем вложенности:

.text {
  &:hover {
    border-color: red;
    &:before {
      color: red;
    }
  }
}

Польза: получить open source портфолио на Node.js, строка в резюме с PR в популярный проект.

Сообщение dir-dependency используется PostCSS-плагинами, чтобы сообщить сборщику о том, что нужно следить за добавлением файлов в папке. Например, потому что плагин читает из папки список миксинов.

result.messages.push({
  type: "dir-dependency",
  plugin: "postcss-import",
  dir: "/imported",
  glob: "**/*.css",
  parent: result.opts.from,
});

Плагин postcss-mixins использует только сообщение depenency для использованных файлов, но не dir-dependency для папок, где он ищет файлы с миксинов.

Польза: получить open source портфолио на Node.js, строка в резюме с PR в популярный проект.

Web Manifest — это JSON-файл, который описывает иконки и настройки для интеграции веб-приложения в браузер и ОС.

Из-за ссылок на иконки, нельзя взять просто статичный JSON-файл — ссылки на иконки надо взять из webpack, чтобы они содержали cache buster и прошли через loader’ы.

Польза: получить open source портфолио на Node.js.

lint-staged со всеми зависимостями занимает 21 МБ на диске:

$ mkdir test && cd test
$ yarn add lint-staged
$ du -sh node_modules
21M	node_modules

Главная причина — огромное, глубокое дерево зависимостей.

Задача — заменить зависимости с кучей подзависимостей на минималистичные альтернативы. Совсем простые зависимости реализовать заново в проекте.

Польза: получить open source портфолио на Node.js, строка в резюме с PR в популярный проект.

В старых версиях postcss-loader, postcss была в зависимостях пакета. Теперь она в peerDependencies — пользователь должен поставить postcss сам в свой проект паралелльно с postcss-loader.

Многие пользователи пропустили это в списке изменений postcss-loader. Из-за особенностей работы npm, у них может устанавливаться postcss неожиданных версий. Часто это оказывается старая PostCSS 7, которая отказывается работать с новыми плагинами и путает пользователей.

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

1. Если версия postcss().version 7, то пытаемся найти package.json.
2. package.json можно искать только в текущей папке (process.cwd()).
3. Если в package.json нет postcss в dependencies или devDependencies, то выводим ошибку, требуя явно установить postcss.
4. Если postcss в прямых зависимостях есть, то ставим глобальный флаг, чтобы не запускать проверку снова.

Польза: получить open source портфолио на Node.js, строка в резюме с PR в популярный проект.

На сайте Logux есть раздел с API веб-клиента и node-сервера. Сейчас боковое меню разбито на категории: классы, функции, переменные.

API-страницы можно сделать удобнее для изучения Logux, если сгруппировать классы и функции по смыслу. Например:

• Node API: Server, Tests, Core, Others.
• Web API: State, React, Vue, Client, Tests, Core, Others.

Польза: получить open source портфолио на Node.js.

В сообществе разработчиков есть много инструментов для установки Git-хуков. Хуже и лучше, медленнее и быстрее, некоторые с существенными ограничениями. Например, марсиане создали быстрый и фичастый Lefthook, который мы используем в коммерческих проектах, больших и маленьких.

Возникла идея создать альтернативу средству с максимальными возможностями: микро-менеджер Git-хуков, для «легких» frontend open source проектов. Под капотом — лишь запуск lint-staged. Без парсинга конфигов в рантайме, с минимумом или совсем без зависимостей и лишь парой дополнительных строк в package.json:

  "simple-pre-commit": "npx lint-staged",

Польза: внести вклад в дело уменьшения коллективного размера node_modules. Получить open source портфолио на Node.js.

Сейчас Logux Server использует Yargs, чтобы работать с CLI-аргументами и выводить --help.

Но у Yargs некрасивый вывод --help — хочется, как минимум, разделить блоки цветом.

Кроме CLI-аргументов, Logux Server получает настройки через переменные среды и опции JS API. Хочется упростить код, совместив обработку всех элементов.

Польза: получить open source портфолио на Node.js.

У Browserslist есть свой конфиг, в файлах  .browserslistrc или browserslist.

Нужно добавить подсветку синтаксиса для этого конфига в GitHub.

# Comment
defaults

# Not keyword
not dead

# Market share with %
> 10%
< 1.5% in US
>= .5%

# Rare queries
maintained node versions
supports es6-module

# Extend keyword
extend @company/browserslist-config

# Direct versions
Chrome 50
Firefox ESR
Safari TP
OperaMini all

# Block header
[production]
# and keyword
Edge > 40 and Edge < 43
# or/, keywords
IE 11 or IE 10, ie 9

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

У Browserslist есть свой конфиг, в файлах  .browserslistrc или browserslist:

# Comment
defaults

# Not keyword
not dead

# Market share with %
> 10%
< 1.5% in US
>= .5%

# Rare queries
maintained node versions
supports es6-module

# Extend keyword
extend @company/browserslist-config

# Direct versions
Chrome 50
Firefox ESR
Safari TP
OperaMini all

# Block header
[production]
# and keyword
Edge > 40 and Edge < 43
# or/, keywords
IE 11 or IE 10, ie 9

Нужно добавить подсветку синтаксиса для этого конфига для Visual Studio Code. Как минимум, нужно подсветить:

1. Комментарии (начинаются с #).
2. Номера версий (включая all, esr и tp).
3. Проценты (50%, 0.5%, .5%).
4. Ключевые слова (not, and, or, extends и ,).
5. Имена браузеров.
6. Заголовки ([production]).

Задача «творческая»: дополнения к этому списку или другие подходы к подсветке приветствуются.

Польза: получить опыт разработки для VS Code, добавить строку в резюме с инструментом для популярного проекта.

Многие JavaScript-библиотеки используют process.env.NODE_ENV, чтобы включать инструменты разработчика или дополнительные проверки на этапе разработки:

if (process.env.NODE_ENV !== "production") {
  heavyArgsCheck(args);
}

Webpack и другие сборщики умеют вырезать такие конструкции в фронтенд-библиотеках. Но новые сборщики созданные с прицелом на ES-модулей полагаются на package.exports.production вместо process.env.NODE_ENV.

Нужно добавить в dual-publish конвертацию process.env.NODE_ENV в package.exports.production.

Польза: расширить open source портфолио в Node.js.

Browserslist использует caniuse-lite как базу данных актуальных браузеров. Эту базу данных надо регулярно обновлять; есть команда npx browserslist --update-db, которая сама обновляет версию базы данных в lock-файле.

Но многие пользователи волнуются о том, как обновление может повлиять на поддержку браузеров. Хочется добавить сравнение «было/стало»:

Current version: 1.0.30001148
New version: 1.0.30001154
Removing old caniuse-lite from lock file
Installing new caniuse-lite version
$ yarn install
caniuse-lite has been successfully updated

Target browser changes:
- chrome 67
+ chrome 80

Польза: расширить open source портфолио в Node.js, добавить строку в резюме с PR в популярный проект.

В экосистеме PostCSS есть плагин postcss-nested для добавления в CSS синтакса вложенных правил (в духе SCSS).

Сейчас postcss-nested некорретно работает, если другие свойства идут после вложенного правила.

.foo {
  a: 1;
  &bar {
    b: 2;
  }
  b: 1;
}

.foo {
  a: 1;
  b: 1;
}
.foobar {
  b: 2;
}

В этом примере b: 1 из .foo после компиляции оказалось выше b: 2 из .foobar.

Правильный результат:

.foo {
  a: 1;
}
.foobar {
  b: 2;
}
.foo {
  b: 1;
}

Польза: получить open source портфолио на Node.js, строка в резюме с PR в популярный проект.

Сейчас Logux Server использует Bunyan для записи лога. pino совместим на 90% с Bunyan API, но гораздо быстрее.

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

Нужно добавить новый аргумент: size-limit --watch, который будет следить за изменением файлов и заново запускать Size Limit.

Можно следить только за изменением JS-файлов, package.json и конфига Size Limit, игнорируя node_modules.

Польза: опыт работы с JavaScript в большом опенсорс-проекте.

Browserslist берет данные Can I Use из пакета caniuse-lite. Многие команды его не обновляют и данные last 2 version становятся устаревшими. Сейчас Browserslist определяет, что данные устарели и выводит предупреждение.

К сожалению, npm и Yarn не дают готовые инструменты для обновления версий в глубине дерева зависимостей.

Польза: опыт работы с JavaScript в большом опенсорс-проекте, строка в резюме с PR в известный проект.

Сейчас PostCSS сохраняет строку и колонку каждого токена. Но команде Sass для совместимости нужна позиция в CSS-строке (offset) вместо строки и колонки. Можно перевести токенайзер на offset, а строку/колонку вычислять. Это упростит токенайзер и уменьшит расход памяти.

Польза: опыт работы с JavaScript в большом опенсорс-проекте, строка в резюме с PR в известный проект.

Инструмент print-snapshots печает Jest snapshots.

Нужно добавить два параметра, --update и --watch, для обновления snapshots и запуска обновления snapshots при изменении JS-файлов в проекте.

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

Надо сделать Autoprefixer умнее и генерировать только -moz- внутри выражения @-moz-document.

  body {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  }

  @-moz-document domain('example.com') {
    body {
-    -webkit-appearance: none;
        -moz-appearance: none;
             appearance: none;
    }
  }

Польза: опыт работы с JavaScript в большом опенсорс-проекте, строка в резюме с PR в известный проект.

clean-publish — CLI-инструмент по очистке npm-пакета от лишних конфигов перед публикацией.

Он берет текущий проект, копирует во временную папку, чистит и вызывает npm publish на очищенную временную папку.

Нужно добавить опцию beforeScript, которая перед вызовом npm publish вызовет какой-то другой скрипт, передав туда путь ко временной папке как аргумент.

"clean-publish": {
  "beforeScript": "esm-compiler"
}

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

Gitter Sidecar — виджет чата для open source-проектов. Его использует PostCSS и Logux.

В виджете оказалось много лишнего кода. 17 KB кода, скорее всего, можно ужать до 5-10 KB.

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

Estimo запускает JS-файл в Puppeteer (Chrome без UI) и сообщает, сколько потребовалось времени на компиляцию и запуск файла. Size Limit использует его для оценки времени выполнения JS-бандла.

Puppeteer очень долго скачивает сборку Chrome. В 1.0 Estimo перешел на Puppeteer Core и самм начал искать и скачивать Chrome. В итоге, если у пользователя уже установлен браузер Chrome, Estimo может использовать его.

Однако, код поиска и скачивания Chrome работает плохо, особенно на Travis CI. Нужно переписать код и исправить ошибки.

Польза: получить глубокий опыт в работе Puppeteer.

Size Limit собирает JavaScript-библиотеку с помощью webpack, чтобы потом проверить результирующий размер.

Иногда непонятно, почему получился именно такой размер — хотелось бы посмотреть содержимое сборки. Для этого можно добавить аргумент --save-bundle ./dir в CLI.

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

Documentation.js — прекрасная замена мертвому JSDoc. Но все темы для него довольно плохие.

Самое грустное, что для проекта сделали отличную тему documentation-theme-light, но она не закончена.

Нужно добавить JS-скрипты генерации HTML и, опционально, чуть отполировать тему.

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

В CLI Size Limit нужно добавить опцию size-limit --json, которая будет менять формат вывода на JSON:

[
  {
    "name": "index.js",
    "passed": true,
    "size": 1024,
    "loading": 0.05,
    "running": 0.1
  }
]

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

PostCSS парсит значения CSS Custom Properties как обычные значения в CSS-свойствах. Оказалось, что по спецификации там могут быть { и другие символы.

/* Валидный CSS */
html {
  --bracket-block: {1, 2, 3};
  --JSON: [1, "2", {"three": 3}, [4]];
  --javascript: function(rule) { console.log(rule) };
}

Нужно изменить парсер, чтобы правильно обрабатывать CSS Custom Properties.

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

В Logux Server надо провести рефакторинг, переведя код на новый синтаксис JavaScript. Поскольку мы теперь требуем Node.js >= 10, Promise можно заменить на async/await.

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

В Autoprefixer нужно добавить поддержку нового свойства — mask-composite.

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

Nano ID — это очень маленькая библиотека, где идет борьба за каждый байт. Во многих файлах Nano ID есть строка алфавита. Одна из техник оптимизации — менять порядок символов в алфавите так, чтобы он повторял слова из JS-кода. Тогда gzip работает более эффективно.

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

Польза: получить опыт в JavaScript и оптимизации.

Autoprefixer старается конвертировать Grid Layout для Internet Explorer. Эту функцию надо явно активировать, передавая опцию grid: true.

Не у всех пользователей есть возможность выставить опции для Autoprefixer. Надо сделать включение функции с помощью комментария /* autoprefixer grid: on */.

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

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

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

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

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

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

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

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

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

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

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

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

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

Nano ID генерирует случайные ID. Так как идентификаторы полностью случайные, частью буквенно-цифрового идентификатора может стать обсценное слово.

Нужно создать nanoid-good, который будет проверять ID на плохие слова и, если надо, генерировать ID еще раз.

Польза: получить больше опыта в JavaScript и пополнить open-source портфолио.