Сообщество - Web-технологии

Web-технологии

534 поста 5 786 подписчиков

Популярные теги в сообществе:

1

Telegram Stars и n8n: Как я накодил платежную систему через Cursor за вечер (и выложил в Open Source)

Где-то 2 года назад, команда Telegram выкатили Telegram Stars. "Звездочки", которыми можно оплачивать цифровые товары. На момент написания этой статьи, за окном конец 2025 и меня посещает мысль: окей, у меня есть парочка ботов на n8n, в целом, я не против, чтобы они приносили деньги. Где тут кнопка "Принять бабло?"

Спойлер: её нет.

Команда n8n делает хороший продукт, но они не всегда успевают за скоростью релизов телеграма (это моя гипотеза, как на самом деле – не знаю). Штатная нода умеет отправлять сообщения, кнопки, картинки, но как только дело доходит до sendInvoice или обработки preCheckoutQuery… всё, приехали. Либо пиши HTTP Request с кучей параметров и изучай документацию API, либо… страдай. Ну и ещё приходится в таком кейсе палить свой токен бота.

Был ещё один путь. Решил закрыть гештальт, сделать свой первый Open Source вклад и заодно протестировать подход Vibe кодинг.

Vibe Coding? Чего?

Кратко про вайб-кодинг: это когда ты не пишешь код символ за символом, а "вайбишь" с ИИ-ассистентом (в моем случае – Cursor), объясняя ему, что ты хочешь получить на выходе. Ты архитектор, AI строитель.

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

Пройдусь буквально по верхам, что именно мне помогло:

  • MCP Content7 (документация по n8n) + дока по стилю UI от авторов n8n

  • Пример реализации custom ноды от другого автора

Возможно, дочитав до этого момента, вы можете задаться вопросом. "Постой, ты хочешь сказать, что навайбкодил то, что связанно с деньгами/платежами. Автор вообще в своём уме? Какой нафиг доверие всему этому?!"

И… отчасти вы правы. Я хоть и большую часть своей карьеры был (и чуть-чуть продолжаю им быть) как QA, знаю там про тестирование и качество, но никогда и нигде не утверждал и не буду утверждать, что тут всё работает как часы. Я тестировал получившийся код, и этот же код использую в своих проектах. Также в каждой ноде есть дисклеймер о том, что могут быть ошибки и что используйте на свой страх и риск.

В любом случае, я предоставлю вам "базу", всё под лицензией MIT, поэтому если уж хотите энтерпрайз – всё в ваших руках.

Что получилось: n8n-nodes-telegram-stars

Я собрал кастомную ноду, которая оборачивает основные методы Payments API Телеграма по работе с звёздами.

🔗 GitHub: Vlad-Loop/n8n-nodes-telegram-stars

📦 NPM: n8n-nodes-telegram-stars

Она не идеальна, местами может быть сыровата (это v1 всё таки), но она закрывает главную боль – монетизация ботов без кода (почти).

Что умеет эта штука?

• Send Invoice: Генерирует счет на оплату. Указываем цену, валюту (XTR), описание и юзер получает красивую плашку "Заплати мне за столько звёзд".

• Answer Pre-Checkout Query: Самая важная часть. Перед тем как списать деньги, Телеграм стучится к боту: "Эй, всё норм? Деньги брать?". Если вы не ответите за 10 секунд – платеж отменится. Нода позволяет дать ответ, либо отказ.

• Refund Star Payment: Если вы честный человек (или просто накосячили), деньги можно вернуть одной кнопкой. Рефанды – это база для роста лояльности.

• Get Transactions: Посмотреть историю транзакций и баланс бота. Полезно для админки.

• Get Bot Balance: Ну, тут понятно. Чтобы греть душу цифрами.

Как это работает "под капотом"? (Разбор воркфлоу)

Давайте уйдем от теории к практике. Я собрал тестовый сценарий (вот тут можно найти ссылку на него), который делает полный цикл покупки.В n8n всё крутится вокруг логики. Вот как выглядит типичный флоу оплаты "Звездами":

1. Триггер и Роутинг

У нас есть стандартный Telegram Trigger. Он ловит всё. Дальше стоит Switch (или Router), который смотрит, что прилетело. В моем примере я разделил логику на:

/donate – хочу купить.

/refund – верните деньги (тест механики).

/bot_balance – чекнуть баланс.

И самое важное: системные события оплаты.

2. Выставление счета (Invoice)

Юзер пишет /donate. Мы дергаем мою кастомную ноду с методом sendInvoice.Price Amount: 10 звезд.

Payload: Уникальный ID заказа (я туда зашил message_id, но по-хорошему там должен быть ваш internal order ID). Юзер видит кнопку "Pay 10 Stars". Нажимает.

3. Pre-Checkout

Как только юзер нажал "Оплатить", Телеграм шлет апдейт типа pre_checkout_query. Здесь многие спотыкаются на HTTP-запросах. В моем воркфлоу стоит фильтр: если пришел pre_checkout_query — отправляем его в ноду с методом answerPreCheckoutQuery. Всё. Телеграм получил "ОК" и списал звезды у юзера.

Небольшой поучительный кейс. Когда это может быть полезно: например юзер около 5-ти месяцев назад, в вашем боте решил купить какую-либо услугу, у вас тогда это стоило 10 звёзд. Время идёт, инфляция съедает даже звёзды, цены растут. Теперь ваша услуга стоит 20 звёзд. Но у пользователя есть сообщение, кнопка, где цена 10. Он нажимает и если у вас нет никакого фильтра на этапе Pre-Checkout – он заплатит 10 звезд и получит услугу. Я например поставил у себя в ботах сверку даты, что если с момента создания сообщения с кнопкой оплаты и фактического получения события о проверке оплаты прошло больше 10 минут – не принимаю оплату и отправляю новое сообщение с кнопкой оплаты, где потенциально может быть новая цена.

4. Успешная оплата и… Возврат?

После списания прилетает successful_payment. Тут мы радуемся, записываем charge_id в базу (или в Google Sheets, максимально не советую, но знаю, что в комьюнити n8n есть и такие любители подобного) и выдаем юзеру его цифровой товар.А если нужно вернуть? Я добавил логику: берем charge_id из успешной оплаты, скармливаем ноде с методом refundStarPayment – и деньги возвращаются юзеру. Мгновенно.

Почему не просто HTTP Request?

Можно же через обычный HTTP Request ноду дергать API Телеграма. Можно. Но:

  • Вам нужно каждый раз гуглить структуру JSON-пейлоада. Ну либо держать в блокноте или как пример.

  • Вам нужно помнить названия эндпоинтов.

  • Это выглядит грязно в редакторе.

  • Ваш токен в 90% случаев будет торчать "наружу". Поделится с другом или коллегой примером вашего воркфлоу, ну мягко говоря не получится.

Кастомная нода дает вам красивый UI с полями. Вы выбираете "Refund", вставляете ID, и всё работает. Это экономит когнитивное топливо. А мы тут за автоматизацию, чтобы меньше думать о рутине.

Как установить?

Если у вас self-hosted n8n (а мы же тут все серьёзные ребята и топим за local-first, да?), то идем в: Settings → Community Nodes → Install → вбиваем n8n-nodes-telegram-stars.

Если у вас Cloud-версия… ну, напишите в саппорт n8n, чтобы они разрешили кастомные ноды, или поднимайте свой инстанс. Docker-контейнер поднимается за 5 минут, не ленитесь. Вот тут писал гайд, как это сделать.

Про то, как дебажить и создать связь напрямую с инстансом n8n на устройстве – всё есть на страничке гитхаб.

Выводы и философия

Этот кейс для меня не только про "прикрутить платежку". Это про то, как меняется разработка. Раньше создание такой ноды заняло бы у меня несколько выходных с чтением доков по TypeScript и архитектуре n8n. С Cursor я сделал основной функционал за вечер.

А ещё, для меня наступает удивительное время, когда барьер между "Идея" и "Готовый инструмент" стирается. Если вам чего-то не хватает в вашем инструменте автоматизации – не ждите вендора. Возьмите AI, возьмите бойлерплейт и сделайте сами.

Ну и качайте ноду, пробуйте. Если найдете баги (а они там есть, я уверен) – велкам в Issues на гитхабе или пишите пулл-реквесты. Open Source в моём понимании, всё же больше уходит в коллективный разум.

P.S. Какой самый странный процесс вы пытались монетизировать в боте? Расскажите в комментах, оценим или восхитимся.

Показать полностью 2
10

Параллельные процессы в n8n: как обрабатывать сотни задач, не дожидаясь Timeout

Ваш сценарий в n8n отлично работал на 10 задачах, но «завис» на 1000? Если процесс выполняется часами, а в логах маячит ошибка Timeout, виноват, скорее всего, стандартный узел Loop Over Items.

Этот узел надёжен, но работает последовательно: берёт один элемент, прогоняет по всей цепочке, ждёт — и только потом берёт следующий. Если каждая итерация из-за медленного API занимает 5–10 секунд, обработка 1000 элементов растянется на несколько часов.

Проблема в цифрах: почему последовательный цикл – это медленно

Представим три задачи разной длительности:

  • Задача 1: 5 секунд.

  • Задача 2: 7 секунд.

  • Задача 3: 6 секунд.

Loop Over Items выполнит их одну за другой.
Общее время: 5 + 7 + 6 = 18 секунд.

Для трёх задач это не страшно. Для трёхсот, ну почти полтора часа.

Быстрое, но плохое решение: асинхронный вызов

Что если использовать узел Execute Workflow для вызова дочернего сценария и отключить опцию Wait for Subworkflow? Тогда основной процесс не будет ждать и сразу перейдёт к следующей задаче.

Проблема: главный сценарий завершится за пару секунд, но мы потеряем контроль. Непонятно, когда задачи будут выполнены, как собрать результаты и были ли ошибки. Это не автоматизация, а запуск процессов «вслепую».

Redis как диспетчер задач

Чтобы управлять параллельными процессами, нужен внешний координатор. С этой ролью отлично справляется Redis. Мы будем использовать его для двух вещей:

  1. Очередь задач: список ID всех задач.

  2. Флаги состояния: ключи для отслеживания статуса каждой задачи ( false, true).

Архитектура состоит из трёх сценариев: Оркестратор, Воркер и Наблюдатель.

Оркестратор (главный сценарий)
Не выполняет работу сам, а только раздаёт её:

  1. Получает список задач.

  2. Для каждой задачи создаёт запись в Redis: добавляет ID в очередь и ставит статус false. Нижняя ветка на скриншоте выше.

  3. Вызывает дочерний сценарий-воркер (асинхронно, без ожидания).

  4. Когда все задачи розданы, вызывает Наблюдателя и ждёт его завершения.

Как быстро установить Redis в ваш n8n через Coolify можете почитать у меня тут. Сам процесс установки займёт не более 5 минут. Про сам Coolify и почему он отлично сочетается с n8n писал ранее отдельный лонг.

Воркер (дочерний сценарий)
Рабочая лошадка. Его логика проста:

  1. Получает на вход ID задачи.

  2. Выполняет тяжёлую работу: запрашивает API, обрабатывает файлы.

  3. После завершения обновляет статус задачи в Redis на done.

Наблюдатель (дочерний сценарий)
Контролёр. Его задача — дождаться завершения всех работ:

  1. Получает из Redis полный список ID задач.

  2. Запускает цикл проверки статусов.

  3. Если хотя бы одна задача ещё в статусе false, ждёт 0,1 секунд и проверяет снова.

  4. Как только все статусы – true, Наблюдатель завершает работу, а вместе с ним и Оркестратор.

Теперь мы точно знаем, когда вся партия задач обработана. Общее время выполнения равно времени самой долгой задачи, а не их сумме. Наши три задачи выполнятся примерно за 7–8 секунд вместо 18.

Скачать получившееся workflow можно здесь.

Подводные камни

  • Псевдопараллельность. В стандартном режиме main n8n выполняет задачи в одном потоке. Выигрыш достигается за счёт асинхронных операций, например, ожидания ответа от API. Для реальной параллельности на уровне CPU нужен режим queue с несколькими воркерами.

  • Внешняя зависимость. Redis нужно развернуть и поддерживать.

  • Обработка ошибок. Если воркер упадёт, его статус останется false. Наблюдатель зациклится. Нужен механизм таймаутов или статус failed.

  • Нагрузка. Не запускайте 10 000 воркеров одновременно. Группируйте задачи в пакеты по 10 - 50 штук, чтобы не исчерпать лимиты памяти сервера.

Автор, ты не пробовал подключить RabbitMQ?

Полостью согласен, всё что выше – не самый идеальный вариант реализации) Решил попробовать, такой подход, так как нагрузка на CPU не более 5% и не более 10 мб по RAM (в простое вообще по 0 в CPU/RAM). Если смотреть в сторону RabbitMQ, то там чисто на простое уже от 100 мб и какая никакая нагрузка на CPU. По сути там уже полноценный переход на event-систему контроля.

Обязательно в дальнейшем рассмотрим вариант с использованием RabbitMQ!

Вывод

Стандартный цикл хорош для небольшого числа быстрых операций. Как только задачи становятся долгими, а их количество растёт, переходите на асинхронную модель с внешним координатором вроде Redis. Это сократит время выполнения с часов до минут.

Показать полностью 6
1

Minimal vscode: убираем / кастомизируем status bar

В статусбаре в vscode – очень много всего: как полезного, так и лишнего.

Сегодня посмотрим, как можно его кастомизировать:

- Можно просто спрятать (как делаю я)

- Можно очень детально кастомизировать

- Можно перенести часть его функций в плагины

И вот тут главная фича vscode выходит наружу – у нас ведь просто браузер с html / css / js.

А значит, мы можем использовать css и js для кастомизации всего!

И оно будет работать одинаково даже в cloud версиях IDE.

В выпуске:

- Будем писать CSS для удаления лишнего из status bar

- И создавать локальные плагины на #javascript для кастомизации поведения редактора

Впереди еще пара взрывающих мозг видосов, будем и дальше превращать vscode в Черный Квадрат Малевича!

Ссылка на конфиги: https://github.com/sobolevn/the-best-python-course/tree/main...

Показать полностью
10

«Интернет тормозит!»: чем реально проверить скорость (кроме Speedtest)

Привет, Пикабу!

Решил запилить небольшой, но (надеюсь) полезный пост. Тут на днях интернет начал лагать, полез по привычке на Speedtest, а он то ли намертво висит, то ли цифры какие-то с потолка показывает. Надоело, и я решил глянуть, а чем у нас в рунете вообще скорость меряют.

(Сразу скажу, пост не рекламный, ссылок прямых не будет, гуглится все за секунду по названиям).

1. OpenSpeedTest.ru

Начну сразу с фаворита, на который случайно наткнулся. На вид — простенький, но по факту мужики заморочились.

  • Во-первых, он на чистом HTML5. Это значит, что он заведется вообще на всем, хоть на телеке, хоть на холодильнике, если там есть браузер.

  • Во-вторых, (для тех, кто шарит) он показывает джиттер. Если по-простому — это «дрожание» пинга. Если у вас лагает в играх или сыпется картинка на видеозвонке, а пинг при этом низкий — виноват, скорее всего, он.

  • В-третьих, там есть выбор сервера, CLI (консольная утилита для админов) и даже какие-то рейтинги провайдеров. И все это без единого рекламного баннера. Не знаю, на чем они зарабатывают, но респект.

2. 2ip.ru

Ну, это классика, «олдскул». Думаю, все его знают. Это не просто спидтест, а целый комбайн: тут тебе и IP твой покажут, и на спам-листы проверят.

  • Главная фишка, ради которой туда стоит лезть, — отзывы. Можно вбить свой адрес и почитать, что соседи про вашего провайдера думают. Иногда очень познавательно.

  • Из минусов — он дико перегруженный. Пока найдешь нужную кнопку, сломаешь глаза об десять баннеров. Но как «справочник» по провайдерам — вещь.

3. Яндекс.Интернетометр

Этот вариант для самых ленивых. Буквально. Одна желтая кнопка на весь экран.

  • Нажал, подождал 10 секунд, получил цифры. Все.

  • Никакого выбора сервера, никаких джиттеров. Просто, быстро, по-яндексовски. Если нужно просто «в целом» прикинуть, сойдет.

4. Тест от вашего провайдера (Ростелеком, МТС и т.д.)

У каждого крупного провайдера есть свой измеритель. Он нужен ровно для одного: для разговора с техподдержкой.

  • Когда звонишь им и жалуешься на скорость, они первым делом просят замерить «у них». Этот тест показывает скорость не до «всего интернета», а до их собственного сервера.

  • Если даже на их тесте скорость ниже тарифа — это 100% их косяк, и у вас есть железобетонный аргумент. В остальных случаях они скажут, что «проблемы на внешних каналах».

Короче, итог:

  • Реально померить + доп. фишкиOpenSpeedTest.ru.

  • Почитать отзывы соседей2ip.ru.

  • Нажать одну кнопку — Яндекс.Интернетометр.

  • Поругаться с техподдержкой — тест на сайте провайдера.

А вы чем пользуетесь? Накидайте в комменты, может, я что-то упустил.

Показать полностью
6

Как подружить редактор Gutenberg с подсветкой синтаксиса Prism в WordPress

Дисклеймер. На pikabu нет редактора кода, поэтому код картинками, но в конце я дам ссылку на github, откуда можно будет скопировать блоки кода.


Когда мы создаем контент WordPress, чаще всего используем редактор Gutenberg. Он появился в версии WordPress 5.0 (в декабре 2018 года) и заменил старый добрый TinyMCE. TinyMCE был текстовым редактором из эпохи Web 1.0: над полем <textarea> находились простые кнопки вроде «жирный», «курсив» и «ссылка». Весь текст хранился одной сплошной лентой HTML-кода, и переместить блок или вставить что-то посередине было крайне (sic!) неудобно. Кроме того, TinyMCE не поддерживал адаптивную 12-колоночную разметку, которая стала стандартом де-факто во времена Web 2.0, поэтому сложные макеты приходилось строить вручную с помощью HTML и CSS.


Gutenberg — редактор нового поколения

Gutenberg решил эти проблемы. Теперь каждая часть страницы существует как блок — заголовок, параграф, цитата, изображение, таблица или фрагмент кода живут отдельно. Это делает редактирование проще, а страницы — гибкими и адаптивными.

Контент должен одинаково хорошо выглядеть на любых устройствах — от телефона до широкоформатного монитора. Когда сайт не адаптируется к экрану, текст «плывёт», изображения обрезаются, а таблицы вылезают за границы блока. Решается это с помощью адаптивной разметки, которая автоматически перестраивается под ширину экрана.

В основе такой разметки лежит 12-колоночная сетка. Она стала стандартом благодаря фреймворкам вроде Bootstrap и Foundation, и Gutenberg использует тот же принцип: ширина контейнера делится на 12 равных частей (по 8.33 % каждая), из которых можно собрать практически любую компоновку:

1 колонка → [████████████] 100%
2 колонки → [██████][██████] 6/6
3 колонки → [████][████][████] 4/4/4 4
4 колонки → [███][███][███][███] 3/3/3/3

На мобильных устройствах колонки выстраиваются вертикально — контент остаётся читаемым при любой ширине экрана.

Внутри Gutenberg эта идея реализована через блок “Колонки” (Columns), который автоматически подстраивает расположение элементов под ширину окна.
На уровне HTML это контейнеры с классами wp-block-columns и wp-block-column, а за выравнивание отвечает Flexbox:

контейнер

контейнер

По сути, Gutenberg автоматически создаёт гибкий контейнер, который можно делить на нужное количество колонок. При уменьшении экрана колонки становятся вертикальными — и это достигается не JavaScript-скриптами, а чисто с помощью CSS.

css

css

Одна и та же страница выглядит корректно и на телефоне, и на мониторе — без единой строчки JavaScript.

Но из всех возможностей редактора сейчас нас интересует всего один элемент — блок кода. Он используется, когда нужно показать пример программы, скрипта, конфигурации или команды терминала. Технически это простой HTML-контейнер: <pre> ... </pre>

Gutenberg и TinyMCE отображают его одинаково — как текст, набранный моноширинным шрифтом (чаще всего Consolas, Courier New или Monaco). Без подсветки, без нумерации строк, без выделения синтаксиса. Это решение логично — большинству пользователей подсветка не нужна, а включи её для всех, и редактор стал бы сложнее и тяжелее. Но если вы публикуете примеры кода, инструкции или статьи для разработчиков, то отсутствие подсветки делает материал трудно читаемым. В этом случае на помощь приходит библиотека Prism.js, которая решает проблему просто и изящно.

Мне, почему-то кажется, что программисты Pikabu работают на Gutenberg. А потому, что в Gutenbergе нет подсветки синтаксиса языков программирования. Сейчас я покажу, как решить этот вопрос без установки внешних плагинов. Нам понадобятся: Prism.js, Prism.css 👇👇👇👇


Prism.js — библиотека для подсветки кода

Prism.js — лёгкая и быстрая библиотека, созданная специально для подсветки синтаксиса на веб-страницах. Она не перегружает редактор и делает статьи с кодом читаемыми и профессионально оформленными. Таже она не требует серверных модулей и работает полностью в браузере: скрипт на JavaScript анализирует содержимое тегов <pre><code>..., а таблица стилей prism.css раскрашивает ключевые слова, строки, комментарии и другие элементы кода.

По сути, Prism делает для веб-страниц то же, что IDE делает для программистов — делает код понятным и визуально структурированным.
Поддерживаются десятки языков программирования — от HTML, CSS и JavaScript до Python, PHP и Go — и множество плагинов: нумерация строк, подсветка отдельных строк, отображение языка, копирование в буфер, тёмные и светлые темы.

Пример разметки:

После подключения Prism.js и Prism.css этот код автоматически подсвечивается в браузере, без дополнительного вмешательства.

Библиотека особенно хорошо сочетается с Gutenberg, потому что не требует изменения самого редактора — она работает уже на этапе отображения статьи, обрабатывая всё, что находится между тегами <pre> и <code>.


Что такое тема в WordPress и почему работать нужно через дочернюю.

В WordPress тема — это набор файлов, которые определяют внешний вид сайта: шаблоны страниц, стили оформления, типографику, шапку и подвал, поведение меню и многое другое. Проще говоря, именно тема отвечает за то, как ваш сайт выглядит и реагирует на действия пользователя. Тему можно установить прямо из админки — Внешний вид → Темы → Добавить— или загрузить архив вручную в папку /wp-content/themes/. После активации она начинает управлять всей визуальной частью сайта.

Однако вносить правки напрямую в файлы темы — плохая идея. Как только разработчики выпустят обновление родительской темы, WordPress заменит старые файлы новыми, и все ваши изменения будут утеряны. Вся. написанное вами в functions.php или CSS-правило в style.css исчезнут после обновления.

Чтобы избежать этого, в WordPress предусмотрен безопасный механизм — дочерние темы. Дочерняя тема наследует всё содержимое родительской, но хранит собственные правки отдельно. Таким образом, вы можете обновлять родительскую тему сколько угодно, а весь ваш код, настройки и стили останутся нетронутыми. Создать дочернюю тему просто. В каталоге /wp-content/themes/ создайте папку, например mytheme-child, и добавьте в неё файл style.css с базовым описанием. Важно: параметр Template должен точно совпадать с названием папки родительской темы.

style.css

style.css

1. Theme Name

Это отображаемое имя темы.
Оно появится в панели администратора WordPress в разделе Внешний вид → Темы.
Можно написать что угодно — главное, чтобы название было понятным и уникальным.
Пример: Theme Name: Neve Child


2. Template

Это самое важное поле во всём блоке.
Оно говорит WordPress, от какой родительской темы наследуется данная дочерняя тема.
Значение должно в точности совпадать с именем папки родительской темы (а не с её названием в админке).
Например: если родительская тема находится по пути `/wp-content/themes/mytheme/`
то в поле должно стоять:
Template: mytheme

Если ошибиться — WordPress не распознает родителя, и дочерняя тема просто не активируется.

3. Version

Это внутренний номер версии вашей темы — для порядка и контроля изменений.
WordPress не использует это поле функционально, но оно помогает вести версионирование и отличать ваши обновления.

  • Обязательные поля: Theme Name, Template

  • Необязательное, но полезное: Version

  • Дополнительно можно добавить Description, Author, Author URI, Tags, License и т. д.

Далее создайте functions.php и подключите стили родительской темы, а затем — свои собственные.

functions.php

functions.php

После этого активируйте дочернюю тему в разделе “Внешний вид → Темы” — и с этого момента работайте только с ней, ваши изменения будут защищены: даже если родительская тема обновится до новой версии, код в дочерней теме не исчезнет и продолжит работать без изменений.


Как подключить Prism.js к WordPress

По сути, Prism делает для веб-страниц то же самое, что делают IDE для программистов — делает код понятным и визуально структурированным. Поддерживаются десятки языков программирования (от HTML, CSS и JavaScript до Python, PHP и Go) и множество плагинов: нумерация строк, подсветка конкретных строк, отображение языка, копирование в буфер, тёмная и светлая темы.


Все действия выполняются в❗ дочерней теме❗, чтобы при обновлении родительской вы не потеряли свой код.


Подключить Prism.js к WordPress можно в несколько шагов — быстро и без плагинов.

Шаг 1. Скачиваем сборку

Сайт: https://prismjs.com/download.html

чекбоксы выбора языков для вкючения их подсветки

чекбоксы выбора языков для вкючения их подсветки

Настройка сборки

Раздел Download состоит из нескольких блоков.

- Compression level. Выберите параметр Minified — это минимизированная версия библиотеки, она весит меньше и загружается быстрее.
- Core. Этот блок включён по умолчанию и обязателен — он содержит основное ядро библиотеки Prism.
- Languages. Выберите языки, для которых хотите включить подсветку синтаксиса.
Рекомендуемый набор:

  • HTML (Markup)

  • CSS

  • JavaScript

  • PHP

  • Python

  • JSON

При необходимости добавьте другие языки — например, Bash, SQL, C-like, Markdown, YAML, Go и т.д.

Plugins.
Вы можете добавить дополнительные функции.
Наиболее полезные из них:

  • Line Numbers — нумерация строк

  • Toolbar — панель инструментов

  • Copy to Clipboard Button — кнопка для быстрого копирования кода

  • (опционально) Show Language — отображение языка над блоком

  • (опционально) Highlight Lines — подсветка отдельных строк


Скачивание файлов

После того как вы выбрали нужные компоненты, прокрутите страницу вниз и нажмите две кнопки:

  • DOWNLOAD JS — чтобы скачать файл prism.js

  • DOWNLOAD CSS — чтобы скачать файл prism.css

Оба файла необходимо поместить в папку вашей дочерней темы, например:
/wp-content/<themes>/<my-child-theme>/prism.js
/wp-content/<themes>/<my-child-theme>/prism.css

Подключение файлов в WordPress

Когда файлы prism.js и prism.css размещены в папке дочерней темы, их нужно подключить.
Для этого откройте файл functions.php вашей темы и добавьте следующий код:

Добавляем автоматическую нумерацию строк

Чтобы не добавлять класс вручную, используем фильтр WordPress, который добавит его ко всем блокам кода:

Экранируем HTML-символы

Если в коде встречаются символы < или >, браузер может попытаться интерпретировать их как HTML-теги. Чтобы этого избежать, добавим фильтр, который заменяет эти символы на безопасные HTML-сущности при сохранении поста:

5. Добавляем стили оформления

Добавьте в style.css дочерней темы:

Показать полностью 13
1
Вопрос из ленты «Эксперты»

Дом.ру не может восстановить доступ к услугам

В прошлый четверг пропал пропал доступ к интернету и соответственно к ТВ на всех устройствах в доме, 3 раза связывался с техподдержкой, бесполезно, пришел мастер, проверил оборудование, сказал все исправно, но отсутствует связь с какими то серверами, то есть на пределенное время после перезагрузки роутера начинает работать выборочно на одном из устройств либо на телефоне, либо на компьютере, но через некоторое время опять связь пропадает. Мастер сказал, что это уже 5ый случай в Тюмени и кому-то смогли восстановить, а кому-то нет, може есть здесь кто то, кто сталкивался с подобной проблемой, понимаю, что самый простой выход поменять провайдера, но выбор не велик - альтернатива только МТС и Билайн…

Вопрос

А на какой самый интересный или каверзный вопрос вы долго искали качественный и подробный ответ в Гугле или Яндексе, но самый лучший ответ вам написал в конце концов чат GPT или другой подобный ИИ?

4

Гайд по Coolify: Как развернуть n8n и Supabase на одном VPS за вечер

Современная разработка и автоматизация — это жонглирование десятком вкладок и сервисов. Ваш n8n работает в одном месте, база данных Supabase — в другом, фронтенд — в третьем. Даже если вы используете бесплатные тарифы, вы постоянно сталкиваетесь с их ограничениями: то база данных "засыпает" из-за неактивности, то ваш воркфлоу отключается, а главное — ваши данные и логика разбросаны по чужим платформам.

Мне захотелось вернуть контроль. Чтобы все мои сервисы жили на моем (тут конечно можно поспорить) железе, управлялись из единой панели и не требовали от меня быть DevOps-гуру. Так я пришел к Coolify — open-source PaaS-платформе, которая превращает ваш VPS в удобный инструмент управления для всех ваших проектов.

В этом гайде я по шагам покажу, как я развернул на одном сервере полный стек для своих AI-проектов: n8n для автоматизации, Supabase для данных (включая векторные) и как всем этим управляет Coolify.

Что такое Coolify и зачем он нужен

Если вы когда-либо пытались запустить что-то на "голом" VPS, вы возможно знаете эту боль: Docker, Nginx, SSL-сертификаты, переменные окружения, CI/CD... Coolify берет все это на себя, выступая в роли вашего личного DevOps-ассистента.

Что это дает на практике:

Полный контроль и владение данными. Все ваши данные, код и воркфлоу находятся на вашем сервере. Вы не зависите от чужих тарифных планов, политики конфиденциальности или внезапных изменений в работе сервиса.

Для легальной автоматизации, интеграций и сбора пользовательских данных российским проектам и разработчикам нельзя хранить и обрабатывать любые пользовательские базы вне России — только на VPS или выделенном сервере, физически размещённом в РФ.

Надежность и работа 24/7. Self-host n8n гарантирует, что ваши автоматизации работают круглосуточно.

Простота управления. Вы подключаете свой GitHub-репозиторий или выбираете сервис из каталога, нажимаете "Deploy", и Coolify делает все остальное: собирает Docker-образ, настраивает прокси, выпускает SSL-сертификат и запускает приложение.

Разумная экономия. Когда ваши проекты растут, один мощный VPS часто оказывается выгоднее, чем несколько облачных сервисов с аналогичными ресурсам

Когда аренда VPS оправдана? Мой стек: n8n + Supabase

Покупать сервер ради одного Telegram-бота — избыточно. Но как только ваши амбиции растут, self-host становится единственным верным решением. Мой ключевой сценарий — создание продвинутых AI-автоматизаций.

  • n8n — это мозг. Он будет обрабатывать логику, общаться с AI-моделями и внешними API. На своем сервере он работает 24/7, что критично для вебхуков и фоновых задач.

  • Supabase — это память. Он будет хранить данные пользователей, логи, а главное — векторные представления для RAG-сценариев. Вы избавляетесь от ограничений бесплатного облачного тарифа (вроде «засыпания» базы данных) и получаете полный контроль над своей информацией.

Self-host версия Supabase уже содержит расширение pgvector. Это значит, что вы можете хранить и обычные, и векторные данные в одной и той же PostgreSQL базе! Вам не нужен отдельный сервис вроде Qdrant или Pinecone для большинства задач.

Минимальные требования к VPS для такого стека:
Для комфортной работы Coolify, n8n и Supabase на одном сервере я рекомендую начинать с конфигурации:

  • CPU: 2 CPU

  • RAM: 4 ГБ

  • Диск: 30 ГБ NVMe SSD

Этого хватит для стабильной работы и небольших RAG-проектов.

Шаг 1: Установка Coolify

Процесс до смешного прост. Берем чистый VPS с Ubuntu 22.04 LTS и root-доступом.

1. Подключаемся по SSH и запускаем одну команду:

curl -fsSL https://cdn.coollabs.io/coolify/install.sh | bash

Этот скрипт сделает все за вас: установит Docker, создаст необходимые директории и запустит контейнеры с Coolify.

2. Первый вход и настройка домена.

После установки перейдите по адресу

http://ВАШ_IP:8000

Сразу же создайте аккаунт администратора. Затем в настройках укажите ваш домен (например, coolify.yourdomain.com), и Coolify автоматически выпустит для него SSL-сертификат.

3. Настройка уведомлений.

Идем в Notifications → Telegram и подключаем своего бота. Теперь Coolify будет присылать вам уведомления о статусе деплоя, падениях сервисов и других важных событиях. Вы всегда будете в курсе, что происходит с вашими проектами.

Шаг 2: Деплоим сервисы в один клик

Установка n8n

  1. В Coolify создаем новый проект.

  2. Нажимаем "Add Resource" и в каталоге находим готовый шаблон "n8n with PostgreSQL". Это важно — n8n будет хранить свои воркфлоу в надежной базе данных, а не в SQLite (менее надёжная штука в долгосрочной перспективе).

  3. В настройках ресурса переходим в Configuration → General и указываем домен, например n8n.yourdomain.com.

  4. Важный момент — управление версией. По умолчанию n8n установится с тегом latest. Это рискованно для прода. Чтобы зафиксировать стабильную версию, перейдите в настройки и измените Docker Image Tag с n8nio/n8n:latest на конкретную версию, например, n8nio/n8n:1.110.1.

  5. Нажимаем Deploy. Через пару минут ваш личный n8n будет доступен по указанному домену.

  6. Создаем админскую учётную запись уже внутри самого n8n.

Готово. Ваш n8n работает и готов к созданию воркфлоу. Но здесь важно сделать шаг назад и поговорить о границах применимости этого инструмента.

n8n — это гениальный инструмент для MVP и внутренних автоматизаций, но он может стать источником боли в критически важных production-системах. Я подробно разбирал эту дилемму ранее, собрал основные проблемы (от "засыпающих" вебхуков до отладки сложных сценариев) и четко разграничил, когда n8n — идеальный выбор, а когда нужно сразу смотреть в сторону кода. Почитайте, это сэкономит вам кучу нервов в будущем: n8n — это лучший MVP и худший продакшн.

Установка Supabase

Здесь все еще проще.

  1. В том же проекте нажимаем "Add Resource".

  2. В каталоге выбираем "Supabase". Это готовый стек из десятка контейнеров (база данных, API-шлюз, аутентификация и т.д.), который Coolify развернет и свяжет за вас.

  3. Указываете домен для панели управления Supabase, жмете Deploy.

  4. После деплоя, вам нужно будет лишь зайти в переменные окружения и запомнить SERVICE_SUPABASESERVICE_KEY (пригодится потом при подключении Credentials).

  5. Логин и пароль для входа в панель управления Supabase: Admin User & Password.

Готово. У вас есть свой собственный, полностью независимый Supabase с pgvector на борту.

Пример добавления Credentials в n8n

Credentials в n8n — это безопасно сохраненные данные аутентификации, которые используются для подключения к внешним сервисам. Они защищают конфиденциальную информацию (API-ключи, токены, пароли) и позволяют переиспользовать их в разных workflows.

  1. Откройте n8n и в левом меню выберите Credentials

  2. Нажмите кнопку Create в верхнем левом углу

  3. Выберите credential из выпадающего списка

  4. В поиске найдите и выберите Supabase

  5. Укажите Host и Service Role Secret (его можно найти в переменных окружения в самом Coolify, см раздел выше)

Вы — хозяин своей инфраструктуры

Coolify — для меня оказался интересным инструментом. Он возвращает вам, разработчику или энтузиасту, контроль над своими проектами, не требуя взамен глубоких знаний DevOps.

За один вечер вы можете развернуть на относительно недорогом VPS мощнейший стек, который раньше потребовал бы нескольких облачных сервисов и сложной настройки:

  • Управляемая PaaS-платформа (Coolify)

  • Сервис автоматизации, работающий 24/7 (n8n)

  • Полноценная база данных с поддержкой векторного хранения (Supabase)

Это идеальная песочница для экспериментов, надежная база для ваших pet-проектов.

А вы уже пробовали подобные решения? Какие инструменты используете для управления своими серверами? Поделитесь опытом в комментариях!

Показать полностью 3
Отличная работа, все прочитано!