Планы по развитию toolz
toolz.macrulez.ru: какие модули добавлю дальше
На toolz.macrulez.ru уже есть три инструмента — сжатие растровых картинок, оптимизация SVG и конструктор CSS-градиентов. О том, что они умеют, я написал в отдельном посте. Здесь — план расширения: какие ещё модули хочу сделать и как их сгруппировать, чтобы не раздувать меню и чтобы связанный функционал жил под одной «крышей». Всё по-прежнему в браузере, без отправки данных на сервер.
Почему не дюжина отдельных инструментов
Изначально набросал список из двенадцати кандидатов: конвертер цветов, проверка контраста, палитра из картинки, генераторы meta и JSON-LD, минификатор кода, Base64, box-shadow, border-radius, стрелки, фавиконки, QR, UUID и хеши. Сразу стало ясно, что двенадцать пунктов в навигации — перебор, да и часть утилит логично объединить. Кто-то приходит «подобрать цвет и проверить контраст» — это один сценарий; кто-то «сгенерировать meta и JSON-LD» — тоже одна история про `
». Поэтому я сгруппировал кандидатов в шесть модулей с внутренними вкладками или разделами: один пункт в меню — несколько режимов внутри, как уже сделано в Gradient Fabric с типами градиентов и превью.Критерии такие: польза без установки и регистрации, связь с веб-разработкой (результат сразу в вёрстку или конфиг), модуль остаётся инструментом, а не приложением, и связанные вещи объединяются в один модуль.
1. Цвет и контраст
Один модуль на всё, что связано с цветом: конвертация форматов, проверка контраста для доступности и палитра из изображения. Переключение — вкладками.
Конвертер — ввод в одном формате (hex, rgb/rgba, hsl/hsla, при желании CMYK), вывод во всех сразу; палитра-превью на светлом и тёмном фоне; копирование в виде CSS-переменной или для SCSS/конфига темы.
Контраст — два цвета (фон и текст), коэффициент по WCAG, индикация AA/AAA для обычного и крупного текста, превью образца текста; опционально подсказка «осветлить/затемнить на N%».
Палитра из изображения — загрузка картинки, извлечение 3–8 доминантных цветов (с опцией «только центр» или вся область), блоки с hex/rgb и копированием, экспорт списка для CSS-переменных или темы.
В итоге одна точка входа для переноса цвета из макета в код, проверки доступности и подбора схемы по референсному изображению. Приоритет высокий, объём средний.
2. Мета и разметка
Всё, что обычно кладётся в <head> для SEO и превью в соцсетях — в одном модуле с двумя разделами.
Meta и Open Graph — форма: title, description, URL страницы, URL картинки, при желании keywords, автор, имя сайта. На выходе блок тегов: базовые meta, Open Graph, Twitter Card; копирование целиком или разбивка на «базовые» и «социальные».
JSON-LD (Schema.org) — выбор типа (Article, Product, Organization, WebPage, при желании BreadcrumbList, FAQPage), форма с полями под тип, валидация и подсказки по формату. Вывод валидного JSON в <script type="application/ld+json"> с подсказкой, куда вставить.
Сначала сделаю раздел Meta/OG — он проще и нужен чаще; JSON-LD добавлю следом в том же модуле.
3. Код и данные
Минификация/форматирование и Base64 — два раздела в одном модуле. Оба сценария частые: «привести кусок кода в порядок» и «заинлайнить картинку».
Минификатор / форматер — CSS, HTML, JSON (вкладки). Кнопки «минифицировать» и «форматировать»; для JSON — базовая валидация с подсветкой ошибки. Вывод в поле с копированием.
Base64 — загрузка одного или нескольких изображений (PNG, JPEG, WebP, GIF, по возможности SVG); для каждого data URI и копирование; отображение размера и предупреждение при большом объёме; опционально вывод url(data:...) для CSS.
Приоритет высокий, реализация относительно простая.
4. CSS-эффекты
Модуль в духе Gradient Fabric: визуальные конструкторы с превью и копированием готового CSS. Три раздела — тень, скругление и стрелки.
Тень (box-shadow) — несколько «слоёв» тени (смещение X/Y, размытие, распространение, цвет, inset). Превью блока на нейтральном фоне, переключатель светлая/тёмная тема, итоговая строка с копированием.
Скругление (border-radius) — настройка по углам (4 поля в px или %) или ellipse; превью в реальном времени, вывод свойства и копирование.
Стрелки — типы: треугольник (хвостики тултипов, дропдауны), шеврон (хлебные крошки, пагинация, «назад/вперёд»), при желании двойная линия и др. Восемь направлений: вверх, вниз, влево, вправо и четыре по диагонали под 45°. Стиль: заливка или контур, цвет, толщина контура. Размер в px. Превью на фоне и опционально «стрелка у края блока» для тултипа. Вывод CSS (border-trick, clip-path или псевдоэлемент) и при необходимости фрагмент HTML.
Стрелки, тени и скругления постоянно нужны в тултипах, дропдаунах и навигации — один модуль закрывает три задачи. Приоритет высокий.
5. Фавиконки
Отдельный модуль без объединения: одна чёткая задача. Загрузка картинки (лучше SVG с прозрачностью) → генерация размеров 16×16, 32×32, 48×48, 180×180 (Apple Touch), 192×192, 512×512 → скачивание архивом или по одному. Плюс вывод фрагмента HTML с <link rel="icon"> и apple-touch-icon и при желании кусок для manifest.webmanifest. Часто нужно при запуске нового сайта или ребрендинге — приоритет высокий.
6. Генераторы
Мелкие утилиты под одной крышей: QR-код и UUID/хеши. Отдельные модули для них не хочется — слишком простые сценарии.
QR-код — ввод URL или текста, настройки размера и цвета модулей/фона, превью, скачивание PNG или SVG.
UUID и хеши — генерация одного или нескольких UUID v4 с копированием; поле ввода строки → MD5, SHA-1, SHA-256 (и при желании ещё варианты), копирование, опционально кодировка hex/base64.
Приоритет средний, делаю после более приоритетных модулей.
Очерёдность
Сводка по модулям и фазам:
| Модуль | Что внутри | Приоритет | Фаза |
|---|---|---|---|
| Цвет и контраст | Конвертер, контраст, палитра из изображения | высокий | 1 |
| Мета и разметка | Meta/OG, JSON-LD | высокий | 1–2 |
| Код и данные | Минификатор/форматер, Base64 | высокий | 1 |
| CSS-эффекты | box-shadow, border-radius, стрелки | высокий | 1–2 |
| Фавиконки | Набор размеров и HTML | высокий | 2 |
| Генераторы | QR, UUID, хеши | средний | 2 |
Первая фаза — цвет и контраст (можно начать с конвертера и проверки контраста), мета и разметка (хотя бы Meta/OG), код и данные целиком, при наличии времени — CSS-эффекты (хотя бы тень и стрелки). Вторая — фавиконки, генераторы, при необходимости доработка JSON-LD, палитры из изображения, border-radius и дополнительных типов стрелок. Третья — по отзывам и новые идеи (например, что-то для анимаций или разбор package.json).
Итог
План такой: шесть новых модулей вместо дюжины отдельных инструментов. Внутри каждого — вкладки или разделы для связанных функций, навигация остаётся компактной. По мере реализации буду обновлять этот пост или писать отдельные заметки о том, что уже выкатил.