Gregory's ServerСайт цветового миксера OKLCH — мой любимый тип приложений, которое кажутся очень простыми, но внутри спрятано куча хитростей.
В этом треде буду собирать различные хаки проекте.
 4 comments
2. При наведении на Злых марсиан, они начинают моргать. Как сделать, чтобы моргание выглядело естественно — без машинного паттерна повторений? С помощью Принципа Цикад с анимацией на разных простых числах https://github.com/evilmartians/oklch-picker/blob/main/view/main/index.css#L122-L172 3. Для OKLCH-миксера мы сделали хорошую поддержку читалок экрана. Если ты не видишь цвет, то тебе тем более нужна предсказуемая мат. модель работы с цветом (как OKLCH). Поддержка читалок — не просто следование a11y-рекомендациям, а именно что продумать UX. Когда меняешь C или L, то можешь выйти за пределы возможностей текущих мониторов. С читалкой это можно не заметить, так как фокус в текстовом поле. И мы сделали невидимое поле с aria-live="polite", чтобы читалка говорила про выход за охват 4. Цвета контролов в миксере OKLCH зависят от выбранного цвета. При этом сохраняется хороший контраст. Потому что мы берём Hue из текущего цвета и подставляем Lightness и Chroma. И полученные цвета ставим из JS в CSS Custom Properties. https://github.com/evilmartians/oklch-picker/blob/main/stores/accent.ts |
1. Нажав L вы переместите фокус в поле яркости.
Но код учитывает, если вы забыли переключить рассадку и нажали клавишу L в русской или арабской раскладке.
Для этого мы сначала ищем по e.key (зависит от раскладки), и если не находим, то смотрим в e.code (не зависит).
Код написан так, чтобы горячие клавиши работали даже с экзотичными раскладками типа Dvorak и всяких кастомных, где цифры вводятся через модификатор на буквах
https://github.com/evilmartians/oklch-picker/pull/144#issuecomment-2143902380
1. Нажав L вы переместите фокус в поле яркости.
Но код учитывает, если вы забыли переключить рассадку и нажали клавишу L в русской или арабской раскладке.
Для этого мы сначала ищем по e.key (зависит от раскладки), и если не находим, то смотрим в e.code (не зависит).
Код написан так, чтобы горячие клавиши работали даже с экзотичными раскладками типа Dvorak и всяких кастомных, где цифры вводятся через модификатор на буквах