Ручной деплой — это всегда лотерея. Забытый npm run build перед копированием файлов, кеш старой версии на сервере, тесты которые «ну и так понятно что работает». В какой-то момент надоело играть в эту игру и я собрал нормальный пайплайн на GitHub Actions.
Публикации · Страница 4
Продолжаю развивать интерактивную карту маршрутных сетей авиакомпаний. В этот раз — две заметные вещи: переписал 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 и примеры под реальные задачи (темы, градиенты, доступность, печать).
Пакет css-magic-gradient генерирует линейные, радиальные и конические CSS-градиенты по базовому цвету и опциям, во Vue 3 композиции принимают ref цвета и опций и возвращают вычисляемую строку — при смене темы или выборе цвета градиент обновляется сам, без ручных подписок и watchers.
Один раз описать брейкпоинты — и во всём приложении использовать реактивные флаги «мобилка / планшет / десктоп» без ручных подписок на matchMedia. Как устроен пакет responsive-media, кастомные брейкпоинты с ориентацией и aspect-ratio и плагин для Vue 3 — в одном посте.
Библиотека rest-pipeline-js помогает описывать цепочки REST-запросов с паузами, retry, кэшем и лимитами — в посте разбираем сценарии от простой пошаговой загрузки до автоматического подбора авиарейса и готового предложения для шаблона, плюс плагины для Vue 3 и React с примерами кода.
На toolz.macrulez.ru скоро станет больше инструментов — рассказываю, какие модули добавлю следующими и как сгруппирую их, чтобы меню не раздувалось.
Больше никакого ручного переименования десятков картинок после сжатия — разбираемся, как новые шаблоны в Image Compressor автоматически приводят имена файлов к нужному виду на лету.
Теперь в Image Compressor и Tiny SVG можно не только сжимать изображения пачками, но и редактировать саму очередь на лету — добавлять новые файлы и удалять лишние без перезапуска всего процесса. В статье разбираем, как эта мелочь по интерфейсу заметно упрощает подготовку ассетов для веба.
Краткий обзор возможностей трёх инструментов на toolz.macrulez.ru — сжатие растровых картинок с разными кодеками и настройками, оптимизация SVG и конструктор CSS-градиентов. Что можно настроить, как смотреть результат и как обрабатывать файлы пачками.
Переехал с «голого» Vue 3 и Vite на Nuxt с полноценным SSR для macrulez.ru — без переписывания проекта с нуля.
В посте показываю, как аккуратно натянуть Nuxt поверх существующей архитектуры, завести server API‑прокси, настроить метаданные и деплой через PM2.
Обновил rest-pipeline-js: теперь core, Vue и React вынесены в отдельные точки входа (rest-pipeline-js, rest-pipeline-js/vue, rest-pipeline-js/react) — сборки чище и без лишних зависимостей. В посте показал, что именно поменялось, как мигрировать импорты и привёл примеры для базового использования, Vue и React.