Omatsuri: бесплатный инструмент с открытым исходным кодом для упрощения фронтенд-разработки

С Новым годом, друзья! 

Сегодня мы поговорим об одном из самых интересных инструментов, которые я видел за последнее время. Omatsuri — это открытая платформа, состоящая из 12 удобных утилит для повседневных задач разработчика. Сайт omatsuri.app ^[1] выполнен в минималистичном стиле и предлагает интуитивно понятный интерфейс. Это инструмент, который явно создан «с душой» для тех, кто ценит функциональность и простоту.

Давайте рассмотрим несколько примеров.

Генератор треугольников (Triangle Generator)

Создание треугольников в CSS — одна из тех задач, которые часто раздражают из-за необходимости тонкой настройки. Omatsuri избавляет вас от головной боли ^[2].

Вот как это работает:

• Выберите направление треугольника.

• Настройте размеры и цвета — можно воспользоваться готовыми пресетами или задать параметры вручную.

• Получите готовый код в форматах CSS, SCSS или JSS.

Недостаток: приходится копировать разные части кода по отдельности.

 Генератор градиентов (Gradient generator)

Когда нужен красивый градиентный фон, часто приходится искать примеры или вдохновение. Забудьте про это! Здесь всё легко:

• Выберите направление.

• Отрегулируйте угол с помощью ползунка.

• Скопируйте готовый CSS или JavaScript.

Разделители для страниц (Page Dividers)

Иногда хочется добавить на сайт разделители в виде волн или диагоналей, но это сложно реализовать вручную. Omatsuri предлагает несколько стильных вариантов.

• Выберите тип разделителя (волны, диагонали, треугольники).

• Скопируйте код или скачайте готовый SVG-файл.

Недостаток: доступно ограниченное количество стилей. Для большего выбора рекомендую shapedivider.app ^[3].

Автоматическая генерация кода для keydown

Если вы работаете с событиями клавиатуры, этот инструмент станет вашим помощником.

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

Особенно полезно для работы с сочетаниями клавиш.

Предпросмотр значений CSS-свойства cursor

CSS-свойство cursor имеет больше значений, чем мы обычно используем в работе. Omatsuri предоставляет удобный инструмент для их изучения и тестирования.

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

• Нажмите, чтобы скопировать значение.

Коллекция специальных символов (Symbols Collection)

Если вам когда-либо приходилось искать редкие символы для кода или дизайна, вы знаете, как сложно это бывает. С помощью Omatsuri можно быстро найти нужный символ.

Omatsuri — это бесплатный инструмент с открытым исходным кодом, который уже получил более 2,7 тыс. звезд на GitHub. Вот ссылки, которые вам пригодятся:

• Репозиторий: github.com/rtivital/omatsuri ^[4]

• Официальный сайт: omatsuri.app ^[1]

Эта утилита не только упрощает вашу работу, но и помогает сосредоточиться на главном. Если вы разработчик, вам точно стоит попробовать Omatsuri. Удачи в новом году! 🎉