color-value-tools вырос из простого конвертера цветовых форматов в полноценный инструментарий: CSS Color Level 4, перцептивная интерполяция, цветовые гармонии, симуляция дальтонизма, WCAG-доступность, генераторы и CLI — всё в одном пакете без зависимостей.
Публикации · Страница 4
Небольшой npm-пакет без зависимостей, который точно знает, на каком устройстве работает ваш код — с поддержкой React, Vue и Node.js.
Написал собственный npm-пакет для локализации Vue 3, потому что устал каждый раз копировать один и тот же бойлерплейт из проекта в проект. ICU-плюрализация, lazy loading, метаданные локалей, форматирование дат и валют, Vite-плагин и CLI — всё из коробки.
Вышла новая версия библиотеки responsive-media. Полный рефакторинг на абстрактный базовый класс, container queries через ResizeObserver, богатый subscription API, хелперы для упорядоченных брейкпоинтов, готовые пресеты Tailwind / Bootstrap / Accessibility, интеграция с React 18+, синхронизация CSS-переменных, DOM-события и многое другое.
Крупное обновление библиотеки для оркестрации REST API запросов. Параллельные шаги, глобальный middleware, pause/resume, экспорт и восстановление состояния — и заодно закрыт ряд неприятных багов, которые тихо жили в коде с самого начала.
На toolz.macrulez.ru появился новый модуль — Stronghold. Это генератор криптографически стойких паролей с полным контролем над набором символов, длиной, количеством вариантов и дополнительными ограничениями. Все операции выполняются в браузере — никакие данные не покидают устройство. Поддерживает латиницу, кириллицу и спецсимволы, показывает оценку надёжности в битах энтропии и позволяет сохранить результат в текстовый файл.
Реализовал запись положения камеры в URL, восстановление вида при открытии ссылки и конвертацию координат камеры между плоской картой и глобусом. Разобрал несколько нетривиальных проблем с таймингом инициализации и вынес всю логику в отдельный Pinia-стор.
Обновил клиентскую архитектуру карты: перешёл с «сырых» API-объектов на модели Airport и Company, а также внедрил многоуровневое кеширование данных. В статье разобрал, как это упростило код, ускорило интерфейс и позволило безопасно кешировать каталог авиакомпаний/аэропортов с автоматической инвалидиацией по версии данных (newest_update). Есть практические фрагменты кода: нормализация моделей, lazy enrich и версионирование кеша.
Новый каталог авиакомпаний и аэропортов позволяет исследовать маршрутные сети без необходимости знать IATA-код — достаточно выбрать букву, кликнуть на перевозчика и увидеть все его направления прямо на карте.
Ручной деплой — это всегда лотерея. Забытый npm run build перед копированием файлов, кеш старой версии на сервере, тесты которые «ну и так понятно что работает». В какой-то момент надоело играть в эту игру и я собрал нормальный пайплайн на GitHub Actions.
Продолжаю развивать интерактивную карту маршрутных сетей авиакомпаний. В этот раз — две заметные вещи: переписал 2D-режим на Three.js и добавил удобный способ выбирать авиакомпанию прямо из карточки аэропорта.
Проект airlines.macrulez.ru изначально строился вокруг 2D-карты: тайлы, canvas, кривые Безье. Всё это описано в предыдущей статье. Но плоская карта с проекцией Меркатора неизбежно искажает маршруты — особенно дальние перелёты, которые в реальности идут через Арктику. Логичным следующим шагом стало добавление интерактивного 3D-глобуса.
Рассказываю, как с нуля построил интерактивную карту маршрутных сетей авиакомпаний: сгенерировал собственные тайлы из GeoJSON, собрал данные о 885 авиакомпаниях из открытых источников и написал REST API с PostgreSQL. Маршруты рисуются на canvas без картографических библиотек — только Vue 3 и кривые Безье.
Новый модуль Fav Icona в составе toolz.macrulez.ru закрывает задачу, с которой сталкивается каждый вебмастер при запуске проекта: подготовка полного набора favicon-файлов для всех платформ. Один SVG или PNG на входе — готовый пакет с десятком файлов, манифестом и HTML-кодом на выходе.
Библиотека color-value-tools — один набор утилит для разбора, конвертации и манипуляции цветом: hex, RGB, HSL, HSV, Lab, LCH, CMYK, яркость, смешивание и контраст по WCAG. В посте — зачем выносить работу с цветом в отдельный слой, обзор API и примеры под реальные задачи (темы, градиенты, доступность, печать).