воскресенье, 21 июня 2026 г.

MindMap: архитектор мыслей, собранный на коленке

MindMap: архитектор мыслей, собранный на коленке


Сервис визуализации структур, который появился потому, что его не было


Что это такое

MindMap — веб-сервис для построения интеллект-карт. Иерархии, перекрёстные связи, заметки, цвета, иконки. Всё в браузере, без установки, без регистрации для знакомства, с регистрацией для сохранения.

Адрес: mindmap.coopteam.ru


Зачем ещё один mindmap-сервис

Затем, что существующие либо платные, либо требуют аккаунт в чужом облаке, либо хранят данные непонятно где. А здесь:

  • Данные лежат в JSON. Экспортировал — забрал с собой.
  • Черновики пишутся в localStorage браузера. Закрыл вкладку — открыл, продолжил.
  • Код открыт для инспекции (да, это vanilla PHP и jQuery — без модных стеков).

Что умеет

Структура:

  • Иерархические связи (родитель → потомок) — сплошные линии
  • Cross-links между любыми узлами — пунктирные, с настраиваемыми якорями
  • Сворачивание веток, drag-n-drop узлов, перенос между ветками

Редактирование:

  • Заметки к узлам (стикер в углу — индикатор)
  • Цветовая маркировка (9 цветов + сброс)
  • Иконки Font Awesome 6 (120+ в галерее, можно ввести класс вручную)
  • Чекбоксы для отметок

Навигация:

  • Горячие клавиши: Ctrl+S (сохранить), Ctrl+N (новая), Tab (ребёнок), Enter (брат), Delete (удалить)
  • Undo/Redo на 100 шагов с сохранением в localStorage
  • Поиск по узлам (Ctrl+F)
  • Перетаскиваемый тулбар (горизонтальный/вертикальный)

Сохранение:

  • Автосохранение при простое (3 минуты)
  • Экспорт/импорт JSON
  • Лимит 25 диаграмм на пользователя (настраивается)

Интерфейс:

  • Светлая и тёмная темы
  • Адаптивная вёрстка
  • Пан со скроллом (зажать и тянуть пустое место)

Техническая сторона

Стек сознательно минималистичный:

  • Backend: чистый PHP 8+, файловое хранилище (storage/{login}/diagrams/*.json), сессии в файлах
  • Frontend: jQuery 3.7.1 + jQuery UI 1.13.3 + jsPlumb 2.15.6
  • Без фреймворков, без сборщиков, без npm install на час

Архитектура модульная: store.js (состояние), renderer.js (DOM), connector.js (линии), menu.js (контекстное меню), history.js (undo/redo). Каждый модуль — IIFE с публичным API.

Это не значит, что подход идеален. Это значит, что он понятен и поддерживаем одним человеком без когнитивного коллапса.


Как это создавалось

Методом вайб-кодинга. Основная часть кода написана в диалоге с Qwen AI за несколько сессий. Человек формулировал требования, уточнял архитектуру, правил баги. AI генерировал код, предлагал решения, объяснял jsPlumb.

Результат: рабочий сервис без классической разработки «по ТЗ → дизайн → бэкенд → фронтенд → тестирование». Вместо этого — итеративный диалог, где каждый коммит обсуждался.

Это не отменяет необходимости понимать, что делаешь. Но снижает порог входа для тех, кто хочет инструмент, а не карьеру фронтендера.


Для кого

  • Участники кооператива — для визуализации процессов, структур, обучающих материалов
  • Разработчики Cyclos — чтобы рисовать архитектуры интеграций
  • Все остальные — если нужна простая mindmap без подписки

Дисклеймер

Сервис предоставляется «как есть». Ответственность за сохранность данных — на пользователе. Экспортируйте JSON периодически. Бесперебойная работа не гарантируется, но планируется.


Связанные проекты экосистемы CoopTeam

  • СЭП «Регион» (coopteam.ru) — основная платформа кооперации
  • ADVIZOR (advizor.coopteam.ru) — сервисный центр AI
  • Информационный портал (info.coopteam.ru) — новости и курсы
  • Игры НКПС (игры.нкпс.рф) — браузерные игры

Создано ПК НКПС © 2026

четверг, 9 ноября 2023 г.

Как перевести страницу с сохранением html разметки

 Добрый день, друзья !

Одна из задач, которые выглядят легко, но на практике не имеют решения - это перевод html документа с сохранением тегов.

И хотя , казалось бы, есть гугл-переводчик, yandex-переводчик и тысячи их, но проблема в том, что прочитать документ в переводе вы можете , а вот сохранить его в переводе не получается.

Сложность кроется в том, что перевод "зашит" в собственную html-конфигурацию переводчика и обрастает кратно большим кодом, а кроме этого сам перевод подается "на лету" и не сохраняется в файл.

Частично помог решить проблему ChatGPT, но работает криво и приходится терять время на "уговоры" и правильное составление промпта.

Но я нашел решение. И делюсь лафхаком с вами.

От вас, взамен, мне нужна подписка.

Я пишу о кооперативах, частных локальных валютах, смежном с этими темами ПО - Cyclos 4 PRO, личном опыте в web-инжениринге и просто об интересных мне вещах.

Подписались? Хорошо, поехали.

Итак, как же переводить с сохранением html-разметки?

Я использую браузер Brave (chrome) и вся работа проходит в браузере.

Объясняю на примере перевода книги "Ch@nging Money". Книга скачана у меня давно и состоит из отдельных 41-го html-файлов.

Книгу я "залил" к себе на хост, но не принципиально. Просто мне так удобнее.

Готовый код я формирую в отдельный единый html-файл на шаблоне FullscreenBookBlock в виде web-book. Поинтересуйтесь по адресу : https://regionorsk.tk/wp/book_1

Порядок действий таков :

Открываю страницу в браузере. В хроме уже "зашит" переводчик. Жмем его и переводим страницу.

Важно пролистать страницу до конца, если она длинная, потому что перевод подается "на лету" , как я говорил выше.

Теперь выделяем текст на переведенной странице. Можно cntrl+a, затем cntrl+c

Вот теперь "финт ушами", современные браузеры берут текст со страницы вместе с форматированием и html-кодом.

Открываем любой онлайн html редактор. Я нашел https://editorhtmlonline.com/ru/ И вставляем текст в поле визуального редактирования.

Добрый день, друзья ! Одна из задач, которые выглядят легко, но на практике не имеют решения - это перевод html документа с сохранением тегов.-2

Все. Готово. Справа вы видите готовый код. Можете его "очистить" от классов - иногда нужен чистый код, а можете взять с классами, потому что они содержат стили встроенные в код. И тогда вы просто переводите страницу вместе со всеми css-плюшками и js-инструментами.

При этом отсекаются "навески" гугл,яндекс и прочих переводчиков до чистого кода.

А кто хочет посмотреть как делается- смотрим https://youtu.be/LddonqvKKuI

Кооператив и гражданская экономика :

https://regionorsk.tk сайт кооператива

https://reg-orsk.tk портал городской локальной кооперативной экономики

https://ruscoop.tk национальная кооперативная платежная система

понедельник, 30 октября 2023 г.

Телеграм бот "InvestCoin.TK"

 Доброго времени суток!

(Пусть снобы оббурчаться, мы любим это приветствие в интернете)

Представляю вам бот поддержки сайта https://InvestCoin.tk, который сам по себе имеет ряд ярких возможностей.

Оригинал статьи на ДЗЕН

Потестировать и пользоваться ботом можно по адресу https://t.me/posterictkbot

Что может делать этот бот ?
- получать текущий курс BTC
- автоматически подавать 4 раза в день курс BTC.
- автоматически подавать 3 раза в день новости о BTC
- немного поболтать или иногда давать реплику в вашу группу
- создавать адреса BTC
- проверять баланс адресов BTC

Открыв в Telegram приложении этот бот мы увидим традиционную заставку и приветствие. В первоначальном меню у бота две команды /start и /help

Управление ботом реализовано 2-х уровневым меню, что само по себе уже не тревиально. По команде /help бот ответит выводом меню 2-го уровня , где и предложит нам пользовательское меню. Это позволяет не перегружать интерфейс бота.

Попробуем вывести, используя первую команду, курс биткоина.

Отлично. Работает !!!

Уже не плохо.

Не менее интресен блок команд связанных с блокчейном биткоина. Смело линкаем по команде /list_btc_menu и видим субменю команд работы с адресами биткоина. Их создание и замена.

При создании адреса, адрес сохраняется за пользователем и меняется при следующем создании.

Так же важно сохранить все секретные и приватные ключи адреса , для того, что бы исключить потерю контроля за адресом и иметь возможность работать с ним.

Смотрим пример.

Остальные меню - это информационные модули. Их мы не будем обозревать - посмотрите сами. Есть и интересное в них. Но... обратите внимание на раздел управления подписками.

АВТОМАТИЧЕСКАЯ подача курса в бот , при активации подписки.

Начнем с того, что на момент написания статьи , бот подает все подписки БЕСПЛАТНО.

Просто вошли в меню и активировали подписку автоподачи курса. Всё ! Теперь 4 раза в сутки бот будет сообщать вам курс биткоина.

Меню управление подписками в боте

Бот прекрасно работает в группах. Хотя и с усеченным функционалом. Да оно и понятно , несколько человек "забьют" всю ленту просто тыкая по командам бота.

Ну, собственно ...

А...

Стоп...

Есть плюшка. Если вы обратитесь к боту не командой, а простым сообщением, то бот немного с вами поболтает афоризмами и простыми ответами.

Побеседуйте с ним, Ему скучно.

Теперь все.

Удачи! Благ и сбычи мечт.