Обновить
436.53

Веб-разработка *

Делаем веб лучше

Сначала показывать
Порог рейтинга

Коллеги, всем привет!

За годы менторства по Angular (в том числе в HTML Academy) я заметил одну системную проблему: студенты и даже миддлы часто знают синтаксис RxJS, но не понимают реактивного мышления. В итоге мы получаем subscribe внутри subscribe и императивную лапшу.

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

Курс бесплатный. Делал для себя и студентов, но теперь делюсь со всеми.

Буду рад фидбеку и баг-репортам (проект активно допиливаю).

Ссылка на курс: https://rxjs-course-avy.web.app/

Теги:
+5
Комментарии1

Команда разработчиков Chrome собрала на одной странице все крупные изменения в CSS за 2025 год. У каждой новой фичи есть подробное описание, интерактивная демонстрация, примеры кода и информацию о поддержке в основных браузерах.

Теги:
0
Комментарии0

Массовая замена HTML-разметки в Sublime Text с помощью RegExp

При работе с HTML часто возникает рутинная задача: есть десятки однотипных элементов, которые нужно заменить на реальную разметку. Делать это вручную - долго и рискованно, также можно легко допустить ошибку.

В моём случае это были заглушки вида:

<p>Image 1</p>
<p>Image 2</p>
<p>Image 3</p>

Нужно было превратить их в теги изображений, сохранив номера файлов изображений.

Почему не руками

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

  • ошибиться в номере изображения

  • забыть закрыть тег

  • нарушить единообразие разметки

Поэтому логичнее использовать инструменты, которые уже есть в редакторе.

Решение через Sublime Text и RegExp

В Sublime Text есть мощный поиск и замена с поддержкой регулярных выражений. Этого более чем достаточно для задачи.

Открываем HTML-файл и вызываем панель замены:

  • Ctrl + H (Windows / Linux)

  • Cmd + Alt + F (macOS)

Обязательно включаем режим Regular Expression (иконка .*).

Шаблон поиска

<p>Image (\d+)</p>

Разберём выражение:

  • <p>Image — фиксированная часть

  • (\d+) — группа захвата, которая находит любое число

  • </p> — закрывающий тег

Число внутри скобок сохраняется как первая группа.

Шаблон замены

<img src="images/\1.jpg">

Здесь \1 — ссылка на первую группу захвата из шаблона поиска. На её место подставляется найденное число.

В результате:

  • Image 1images/1.jpg

  • Image 12images/12.jpg

Проверка и замена

Перед массовой заменой полезно нажать Find All, чтобы убедиться, что совпадения находятся только там, где нужно.

После этого можно смело использовать Replace All — Sublime Text заменит все подходящие строки за один шаг.

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

Несколько моментов, о которых легко забыть:

  • если не включить RegExp, \1 подставлен не будет

  • в Sublime используется именно \1, а не $1

  • шаблон чувствителен к пробелам и регистру

Альтернативы

Для подобных задач подойдут и другие инструменты:

  • sed в терминале

  • массовая генерация HTML через bash-циклы

  • аналогичная замена в VS Code

Но если файл уже открыт в Sublime Text, RegExp — самый быстрый вариант.

Вывод

Регулярные выражения в Sublime Text позволяют эффективно автоматизировать рутинные правки HTML без дополнительных скриптов и плагинов. Даже простые приёмы вроде групп захвата экономят время и снижают количество ошибок.

Дополнительно

Более подробная пошаговая инструкция с ориентацией на новичков опубликована в моём блоге:

https://kodprog.ru/kak-bystro-zamenit-tekst-na-tegi-img-v-sublime-text

Теги:
0
Комментарии3

Метод registerListeners() в CMSPlugin в плагинах планируется удалить в Joomla 7.0.

Этот метод регистрирует устаревшие слушатели событий в диспетчере, имитируя работу плагинов Joomla! 3.x и ниже для Joomla 4+. По умолчанию этот метод ищет все общедоступные методы, название которых начинается с on. Он регистрирует лямбда-функции (замыкания), которые пытаются преобразовать аргументы отправленного события в аргументы вызова метода и вызвать ваш метод on<Нечто>. Результат передаётся обратно событию в его аргумент result.

Теперь этот слой совместимости с устаревшей Joomla 3 помечен к удалению в Joomla 7.0, которая должна выйти осенью 2027 года. Это означает, что те уникальные расширения от Joomla 2.5 / Joomla 3, которые ещё работали на Joomla 4-6 скорее всего окончательно перестанут работать на Joomla 7. Предполагается, что активные разработчики планомерно и постепенно избавляются от технического долга и обновляют свои расширения 😎

Чат русскоязычного Joomla-сообщества.

Теги:
+1
Комментарии0

Совет по Joomla: использовать выключенное состояние для кнопок в списках элементов админки - listCheck().

Мы добавляем в тулбар панели администратора Joomla некую кнопку, которая что-то делает со списком id выделенных элементов и ajax-запросом отсылаем их в свой плагин. Но нам надо предупредить нажатия на кнопку в тех случаях, когда ни один элемент не был выбран. Для этого можно написать свою проверку на js. А можно воспользоваться встроенной в Joomla.

Добавить кнопку в тулбар Joomla 6.

use Joomla\CMS\Toolbar\Button\BasicButton;
use Joomla\CMS\Language\Text;

// ниже по коду, где-нибудь в плагине на onAfterDispatch()
// Предварительно проверяем в каком компоненте мы находимся по option из $app->getInput()
// пример из плагина, поэтому $this->getApplication()
$app = $this->getApplication();
// Берём текущий тулбар
$toolbar = $app->getDocument()->getToolbar('toolbar');

// Создаём кнопку
$button = (new BasicButton('send-to-indexnow'))
    ->text(Text::_('PLG_WTINDEXNOWSWJPROJECTS_BUTTON_LABEL'))
    ->icon('fa-solid fa-arrow-up-right-dots')
    ->onclick("window.wtindexnowswjprojects()");

// Добавляем кнопку в тулбар
$toolbar->appendButton($button);

Заблокировать кнопку тулбара Joomla, если не выбраны элементы списка.

Теперь нам надо проверить находимся ли мы в списке. Делаем это по view из $app->getInput().

if(in_array($app->getApplication()->getInput()->get('view'),
            ['categories','documentation','projects','versions'])
  ) {
        $button->listCheck(true);
}

И если мы в списке - используем метод $button->listCheck(true), который сделает проверку за нас. Если ни один элемент не выбран - кнопка в тулбаре Joomla будет заблокирована и JS-обработчик не будет вызван. Этот метод есть у всех классов кнопок, наследующих класс \Joomla\CMS\Toolbar\ToolbarButton.

Теги:
0
Комментарии0

Участие в нескольких проектах снижает результаты работы — так ли это?

На одной из конференций прозвучал тезис: заказчику необходимо держать аутсорс-команду full-time. Потому что, работая на нескольких проектах одновременно, разработчики меньше погружаются в контекст каждой задачи, что в итоге сказывается на качестве кода и проекта в целом.

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

Почему спрашиваю?

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

Вопрос к сообществу:

Правда ли, что разработчик, участвующий в нескольких проектах part-time, будет менее эффективен, допустит больше багов и в целом ухудшит качество релизов? Или это миф, и всё зависит от процессов, коммуникации и личной организованности?

Теги:
+5
Комментарии17

Этот финт сэкономит вам время и нервы

Хочу написать о финте, который позволит вам сохранить нервы и сэкономить время. Правда некоторые (многие, почти все) впадают в ступор от него. Поэтому тут использована КДПВ с поста. Я наверно чувак слева.

А именно добавление первым условием if единицы:

if (1
    && $cond1
    && $cond2
    && $cond3
)

Использование финта дает нам возможность:
1. Быстро выключать фичу заменой 1 на 0:

if (0
    && $cond1
    && $cond2
    && $cond3
)

2. Быстро выключать любое условие в PhpStorm через горячие клавиши:

if (1
//    && $cond1
    && $cond2
    && $cond3
)

Без этого финта мы не можем быстро выключить первое условие.
Нам приходится делать примерно такую фигню, манипулируя с двумя строками и целясь в &&:

if (
    /*$cond1
    &&*/ $cond2
    && $cond3
)

Или такую:

if (
    $cond2
    && $cond3
)

3. Быстро добавлять новое первое условие:

if (1
    && $cond2
    && $cond3
)

легко превращается в:

if (1
    && $cond1 // в изменениях одна строка
    && $cond2
    && $cond3
)

4. Быстро дублировать любое условие.

5. Быстро менять порядок условий.

6. Также у нас будет чистый diff git-а при удалении/добавление первого условия.
Тут должен быть рисунок удаления с финтом и без, рисунок добавления с финтом и без.
Также при конфликте у нас будет более простое его решение, если нужно просто добавить оба условия.

Данный финт сродни правилу хорошего тона добавлять после последнего элемента массива запятую.
Это дает нам возможность при добавлении работать только с одной строкой. Добавлять горячими клавишами дублирования строк, в diff опять же будет только 1 строка, а также при конфликте слияний просто применяем обе строки и не нужно проставлять запятые, а то код упадет.

Теги:
+10
Комментарии14

[ВИДЕО] AmoCRM + Joomla: быстрая настройка интеграции. Библиотека WT AmoCRM.

- Как быстро настроить интеграцию AmoCRM и сайта на Joomla?

- использовать PHP библиотеку WT AmoCRM для Joomla, которая предполагает использование её разработчиками. А разработчики могут написать любое количество плагинов и решений по интеграции и автоматизации AmoCRM и Joomla.

Смотреть видео на:

Содержание:

  • 00:15 - что такое эта библиотека и как она работает? Тех.ликбез.

  • 03:00 - установка с сайта или с GitHub

  • 04:00 - собственно установка и настройка интеграции.

  • 05:10 - создание внешней интеграции в интерфейсе AmoCRM

  • 08:05 - что-то пошло не так... Почему и как исправить (случай с пересозданием интеграции)

  • 08:48 - успешное подключение к AmoCRM

  • 11:11 - как понять что всё работает?

  • 11:50 - демонстрация работы: отправка заказа из компонента интернет-магазина RadicalMart в AmoCRM

  • 14:20 - потенциальные возможности по автоматизации бизнес-процессов в связке Joomla с AmoCRM

Страница расширения

Скачать с GitHub

Есть ряд готовых решений для интеграции:

Теги:
0
Комментарии0

Представлен ИИ-сервис Vibetest Use, который тестирует сайты на прочность и ищет уязвимости. Параллельно запускаются сразу несколько проверок с помощью ИИ, которые ищут ошибки, битые ссылки или проблемы в дизайне. Работает на базе Claude. В качестве альтернативы можно запустить с бесплатным API от Google через Cursor.

Теги:
0
Комментарии1

Человек на GitHub ускорил Joomla в 600 раз на объёме 150к+ материалов в 1700+ категориях.

На старте его сайт на Joomla 3 вообще не смог обновиться на Joomla 5. Пришлось делать экспорт/импорт материалов. Проделав всё это он запустил-таки этот объём данных на Joomla 5. Тестовый скрипт грузил 200 материалов из этого объёма всего за 94 секунды ))) А главная страница с категориями грузилась 20 секунд.

Добавив индекс для таблицы #__content

CREATE INDEX idx_catid_state ON #__content (catid, state);

он сократил время загрузки категорий до 1 секунды. Затем наш герой решил поковырять SQL-запрос в ArticleModel, который отвечает за выборку материалов. И решил заменить тип JOIN на STRAIGHT_JOIN для категорий.

// ->from($db->quoteName('#__content', 'a'))
->from(
    $db->quoteName('#__content', 'a')
    . ' STRAIGHT_JOIN ' . $db->quoteName('#__categories', 'c')
    . ' ON ' . $db->quoteName('c.id') . ' = ' . $db->quoteName('a.catid')
)
// ->join('LEFT', $db->quoteName('#__categories', 'c'), $db->quoteName('c.id') . ' = ' . $db->quoteName('a.catid'))

Что сократило загрузку 200 материалов из 150к с 94 секунд до 5. К слову сказать, боевой сайт на Joomla 3 крутится на 12CPU 64GB рамы. А все манипуляции с кодом он делает на базовом 1CPU 1GB сервере и замеры скорости даны именно для базового сервера.

Но это всё в дискуссии, хотя в идеале должно вылиться в Pull Requests. Дальнейшие его изыскания и результаты можно поглядеть в дискуссии на GitHub. Это ещё не конец.

Мы - Open Source сообщество, где никто никому ничего не должен. Джунгли. Но человек ищет пути оптимизации Joomla и предлагает решения. Если оказать поддержку и предложить помощь хотя бы с тестированием самых разнообразных сценариев, то возможно эти улучшения смогут войти в ядро. Пусть не быстро, пусть через несколько лет, пусть не все, но войдут. Достаточно предложить руку помощи и приложить немного усилий.

Дискуссию на GitHub можно почитать здесь.

Теги:
Рейтинг0
Комментарии0

Представлен открытый проект релейного компьютера 1961 года Minivac 601, работающий в браузере (код на GitHub). До появления микрочипов компьютеры строились на основе механических реле. Это рабочая модель Minivac 601, образовательного компьютера, разработанного Клодом Шенноном.

Теги:
Всего голосов 5: ↑4 и ↓1+4
Комментарии1

Представлена шпаргалку по JavaScript. Внутри есть всё для изучения, проверки себя и прокачки навыков до уровня сеньора: основы и теория, поиск и выбор элементов, CSS, AJAX и база по DOM, формы и ввод данных, общие проверки , разметка и текстовое содержание, документ, область просмотра, переходы и удобный поиск по всем темам.

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии1

Обработка HTTP ответа в Joomla 6+. Изменения по сравнению с Joomla 3 - Joomla 5.

В Joomla для выполнения внешних запросов из PHP к сторонним API используется класс Joomla\Http\Http напрямую или же Joomla\Http\HttpFactory, который возвращает для работы преднастроенный по умолчанию класс Http. О работе с HTTP-запросами подробно рассказывалось в статье 2021 года Создание внешних запросов с использованием HttpFactory (Joomla) (на Хабре), (на сайте автора). Некоторые изменения касаются работы с ответами на запросы. Например, наш запрос:

use Joomla\Http\HttpFactory;

$http = (new HttpFactory)->getHttp($options, ['curl', 'stream']);
$response = $http->get('https://any-url.ru/api/any/endpoint');

Раньше можно было получить код ответа или тело ответа как свойство $response - $response->code или $response->body. Однако, Joomla, начиная с Joomla 4 во многом переходит на стандарты PSR. В частности для работы с HTTP-ответами - на PSR-7. Также хорошая статья на Хабре о PSR-7: PSR-7 в примерах.

Прямое обращение к свойствам code, headers, body объявлено устаревшим в Joomla 6.0.0 и обещают удалить в Joomla 7.0.0.

Вместо этого нужно работать с HTTP-ответом по стандартам PSR-7.

Код ответа.
Было $response->getContents(). Стало $response->getStatusCode().

Заголовки ответа.

Было $response->headers. Стало $response->getHeaders().

Тело ответа.

Было $response->body. Стало (string)$response->getContents().

В тело ответа теперь приходит не строка, а поток - объект класса Laminas\Diactoros\Stream. Поэтому его нужно привести к строке (если это json, к примеру): (string)$response->getContents(). Чаще всего в коде Joomla встречается именно такой вариант. Однако, есть и вариант с перемещением указателя чтения на начало потока:

// Получили ответ в виде потока
$stream = $response->getBody();
// "перемотали" на начало
$stream->rewind();
// Получили строковый ответ
$json = $stream->getContents();

В итоге результат одинаковый.

Telegram чат русскоязычного Joomla-сообщества.

Теги:
Всего голосов 2: ↑1 и ↓10
Комментарии0

Ближайшие события

minimal vscode - гайд по кастомизации vscode: чистим status bar, пишем плагины на #javascript

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

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

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

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

И вот тут главная фича vscode выходит наружу – у нас ведь просто браузер с html / css / js. А значит, мы можем использовать css и js для кастомизации всего! И оно будет работать одинаково даже в cloud версиях IDE.

В выпуске:

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

"custom-ui-style.stylesheet": {
  "#status\\.problems": {
    "visibility": "hidden !important",
    "display": "none !important",
  }
}
  • И создавать локальные плагины на #javascript для кастомизации поведения редактора

function updateColumnPosition() {
    const positionLabel = document.querySelector(
      '#status\\.editor\\.selection .statusbar-item-label',
    )
    if (!positionLabel || !positionLabel.textContent) {
      // It might not exist for some reason ¯\_(ツ)_/¯
      return
    }

    const currentLine = document.querySelector(
      '.line-numbers.active-line-number',
    )

    // Now we would have the column position instead of the active line number:
    const colNumber = positionLabel.textContent.match(/Col (\d+)/)
    currentLine.textContent = colNumber[1]
}

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

Теги:
Всего голосов 2: ↑2 и ↓0+2
Комментарии2

Мой опыт в вайб-кодинге: AI-инструменты для создания приложений и первой игры-змейки! 🚀😂

Несколько месяцев назад я был на онлайн-мастерклассе по вайб-кодингу, где мы знакомились с разными AI-инструментами для создания приложений, игр и других задач через описательные промпты и автоматизированный кодинг. Это был крутой опыт, где мы не писали код вручную, а "вибили" идеи, и AI генерировал всё за нас.

В мастерклассе мы работали с такими инструментами:

  • Cursor: Сначала мы использовали его для базового редактирования кода с AI-подсказками. Мы создавали простые веб-страницы, описывая дизайн и функционал в чате, и Cursor генерировал HTML/CSS/JS, а потом помогал отлаживать баги. Этот инструмент больше всего используется в сочетании с моделями вроде Claude Sonnet для генерации и редактирования кода.

  • Harvi-pro и Harvi code: Этот инструмент мы применяли для интеграции GPT-моделей в кастомные приложения. Мы строили AI-ассистентов для обработки запросов, например, простого бота для рекомендаций, задавая промпты на русском, и Harvi-pro автоматизировал backend, а Harvi code помогал с генерацией и интеграцией кода в связке. Эти инструменты больше всего используются в сочетании с ChatGPT, VS Code и Cursor для создания GPT-ассистентов.

  • Lovable: Здесь фокус был на быстрой сборке мобильных приложений. Мы пробовали создавать чат-боты и простые утилиты, просто описывая UI и логику в естественном языке, и Lovable строил полноценный прототип с деплоем. Этот инструмент больше всего используется в сочетании с Cursor для прототипирования приложений и UI-дизайна.

  • Bolt: С Bolt мы экспериментировали с веб-разработкой в браузере. Мы создавали динамичные сайты, как лендинги или формы, просто загружая скриншоты или описывая "виб", и он генерировал код с мгновенным превью. Этот инструмент больше всего используется в сочетании с браузером и другими AI-инструментами вроде Cursor для быстрого создания прототипов веб-приложений.

  • KiloCode: В нём мы работали как в VS Code с AI-агентом. Мы автоматизировали задачи, такие как генерация скриптов для обработки данных, и KiloCode сам проверял код, запускал тесты и исправлял ошибки. Этот инструмент больше всего используется в сочетании с VS Code и JetBrains IDE для автономной разработки и автоматизации задач.

Мне больше всего понравилось создание игр — это был мой первый опыт в такой сфере (я впал в детство и создал всеми известную игру змейку, в которую добавил несколько персонажей с уровнями сложности с боссом Пэкмена и Марио 😂).

Теги:
Всего голосов 12: ↑4 и ↓8-4
Комментарии5

Лучший стэк для запуска MVP SaaS-стартапа в РФ на 2025 год.

Вот наш боевой стэк, который мы сейчас используем для разработки SaaS-стартапа.

Проверено на собственной шкуре!

Frontend:

- NextJS 15 (+React 19, Turbopack, Server Actions) - актуальный стек для веб-приложений.

- Shadcn UI (сделана на Tailwind) - библиотека UI-компонентов, чтобы сделать крутой интерфейс без дизайнеров.

- Netlify - бесплатный хостинг для тестовой версии продукта.

Backend:

Supabase:

- База данных

- Database SQL Functions (функции сразу в базе PostgreSQL)

- Edge Functions (серверные функции на TypeScript)

Nextauth:

- Авторизация

Инфраструктура:

Kubernetes:

- Репликация БД и сервисов на 3-х Worker-нодах

- Rollout-обновления без простоя

- Политики безопасности и изоляция

- CI/CD из GitHub.

+ Пароли/ключи в KeePass XC.

Инструменты:

- IDEA Ultimate - среда разработки

- Cursor - для вайбкодинга (чистый, без всяких инфоцыганских MCP)

- DBeaver - для работы с БД

- GitHub - репозиторий

Платежка

- Robokassa (РФ + иностранные платежи)

Лендинг + блог

- Tilda (проще сделать сайт на конструкторе, чем все это вайбкодить)

Как мы все настроили

- Развернули проект в облачном хостинге в РФ, чтобы хранить данные в соответствии со 152 ФЗ. Выбрали хостинг с k0s, потому что он дешевле классического k8s.

- Supabase поставили на свой сервер (Cloud не подходит, так как данные хранятся не в РФ).

- Настроили регулярные бэкапы (хотя мы еще не релизились, но 1 раз у нас уже отлетали жесткие диски).

Почему именно такой стэк?

- Проще работать с технологиями, которые ты уже хорошо знаешь.

- Нам важна надежность, быстрое переключение новых версий на проде без простоя и возможность разделить продукт на версию под РФ и "мир".

- Для работы в РФ нужно хранить персональные данные в РФ и избегать трансграничной передачи данных.

- Конструктор сайтов как простой и недорогой вариант для лендингов и блога. Чтобы не вайбкодить целую CMS.

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

А какие технологии используете вы для разработки MVP?

Теги:
Всего голосов 3: ↑2 и ↓1+1
Комментарии7

Joomla 6: Автоматические обновления ядра в Joomla.

В октябрьском номере официального журнала Joomla - Joomla Community Magazine вышла статья David Jardin, где рассказывается о внедрении функционала автоматического обновления ядра Joomla.

❓ Почему сейчас? Joomla же жила как-то 20 лет без автоматических обновлений?

Это оказалась самая востребованная за последнее время от пользователей Joomla функция. Но, основная причина внедрения - проблемы безопасности.

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

Анализ патча, понимание проблемы и разработка скрипта требуют времени. И если владелец сайта не обновит его до истечения этого срока, сайт может быть взломан. А хакеры действуют быстро! Для критических, легко эксплуатируемых уязвимостей речь идёт о временном окне в 10–12 часов — и этого времени явно недостаточно, чтобы все успели обновить свои сайты.

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

От первых идей до реализации прошло 5 лет. И здесь можно вспомнить, как в Joomla 5.1 внедрили TUF - The Update Framework, позволяющий устанавливать защищённое соединение между сайтом и сервером обновлений и исключает возможность supply chain attack (атаки на цепочку поставок).

Об особенностях реализации и требованиях к сайту читаем подробнее в статье на JCM.

Теги:
Всего голосов 2: ↑2 и ↓0+2
Комментарии0

Gambo AI — платформа создания игр с автоматической генерацией ассетов и монетизацией

Стартап Gambo AI представил no-code платформу для создания игр по текстовым запросам. Система автоматически генерирует все игровые ассеты — графику, анимации, звуки, музыку — и собирает их в готовую играбельную игру за несколько минут.

Архитектура генерации контента

Gambo AI использует мультимодальный подход для создания игрового контента. Платформа анализирует текстовый промпт и генерирует соответствующие ассеты через специализированные ИИ-модели для каждого типа контента.

Генерируемые компоненты:

  • Графические ассеты — спрайты персонажей, тайлсеты, объекты окружения

  • Анимации — покадровая анимация персонажей и эффектов

  • Аудио контент — фоновая музыка и звуковые эффекты

  • Игровая логика — механики взаимодействия и правила геймплея

  • Карты уровней — автоматическая генерация игровых локаций

Технология "vibe coding"

Компания позиционирует свой подход как "vibe coding" — создание игр на основе общего описания атмосферы и концепции. Система интерпретирует нечеткие описания типа "ретро-аркада с пиксельной графикой" в конкретные технические решения.

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

Встроенная система монетизации

Gambo AI интегрирует рекламную систему напрямую в процесс создания игр. Пользователи могут добавлять рекламные блоки одной командой в промпте, что обеспечивает "day-one monetization".

Возможности монетизации:

  • Автоматическая интеграция рекламных сетей

  • Настройка частоты показа рекламы

  • A/B-тестирование рекламных форматов

  • Аналитика доходов в реальном времени

Примеры сгенерированных игр

На платформе представлены игры различных жанров: от аркадных шутеров до dating-симуляторов. Система создает игры разных жанров — аркады, головоломки, платформеры, симуляторы знакомств с уникальными игровыми механиками.

Технические характеристики игр:

  • HTML5/WebGL рендеринг для кросс-платформенности

  • Адаптивный интерфейс под различные разрешения

  • Поддержка мультиплеера для некоторых жанров

  • Интеграция с социальными сетями для шеринга

Редактор карт и ассетов

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

Редактор будет поддерживать drag-and-drop интерфейс, систему слоев для организации ассетов и preview в реальном времени.

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

Текущая версия генерирует преимущественно 2D-игры в пиксельной стилистике. Сложные 3D-проекты с продвинутой физикой пока не поддерживаются.

Ограничения платформы:

  • Ограниченный набор игровых жанров

  • Базовые ИИ-противники без сложного поведения

  • Отсутствие продвинутых визуальных эффектов

  • Ограниченная кастомизация игровых механик

Конкуренция на рынке

Gambo AI конкурирует с другими no-code игровыми движками типа GameMaker Studio, Construct 3, но выделяется полной автоматизацией создания ассетов через ИИ.

Сравнение с конкурентами:

  • GameMaker Studio — профессиональный инструмент с ручным созданием ассетов

  • Construct 3 — визуальное программирование с импортом графики

  • Gamine AI — аналогичная ИИ-платформа с фокусом на скорость

  • Gambo AI — полная автоматизация + встроенная монетизация

Модель доступа

Платформа предлагает freemium-модель с базовыми возможностями бесплатно и расширенным функционалом в платной подписке. Бесплатный план включает ограниченное количество генераций в месяц.

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

Перспективы развития

Развитие Gambo AI направлено на расширение жанрового разнообразия и улучшение качества генерируемого контента. Планируется добавление поддержки 3D-игр и интеграции с игровыми движками.

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

Теги:
Всего голосов 2: ↑0 и ↓2-2
Комментарии0

Google Labs запустила Mixboard — ИИ-платформу для создания интерактивных мудбордов

Google представила экспериментальную платформу Mixboard для визуального концептинга с поддержкой ИИ-генерации изображений. Сервис объединяет функциональность интерактивной доски с возможностями новой модели редактирования изображений Nano Banana, позволяя создавать и миксовать визуальный контент через естественные языковые команды.

Архитектура и функциональность

Mixboard построена на базе Google Labs как экспериментальная платформа для исследования применений генеративного ИИ в креативных процессах. Система использует открытый canvas-интерфейс с интегрированными возможностями генерации и редактирования изображений.

Основные технические возможности:

  • Генерация изображений из текстовых промптов

  • Редактирование через естественные языковые команды

  • Пакетная генерация связанного контента по теме

  • Комбинирование и миксование загруженных изображений

  • Контекстная генерация текста на основе визуального контента

Модель Nano Banana

Ключевая техническая особенность — интеграция новой модели редактирования изображений Nano Banana. Модель позволяет вносить точечные изменения в существующие изображения через текстовые команды без перегенерации всего контента.

Возможности Nano Banana:

  • Локальные изменения в определенных областях изображения

  • Комбинирование элементов из разных источников

  • Адаптация стиля и цветовой схемы

  • Сохранение общей композиции при внесении изменений

Интерфейс и workflow

Платформа предлагает два способа создания проектов: генерация с нуля из текстового промпта или использование готовых шаблонов. Система автоматически предлагает релевантные визуальные элементы и позволяет создавать вариации одним кликом.

Функции интерфейса:

  • Drag-and-drop размещение элементов на canvas

  • Инструменты "regenerate" и "more like this" для создания вариаций

  • Импорт собственных изображений с возможностью ИИ-обработки

  • Экспорт готовых мудбордов в различных форматах

Сравнение с конкурентами

Mixboard позиционируется как альтернатива Pinterest и Canva с акцентом на ИИ-ассистированное создание контента. В отличие от коллажного подхода Pinterest, платформа генерирует оригинальный визуальный контент без зависимости от существующих изображений.

Отличия от аналогов:

  • Pinterest — курирование существующего контента vs генерация нового

  • Canva — шаблонный дизайн vs свободное концептирование

  • Miro — collaborative whiteboarding vs ИИ-ассистированная визуализация

  • Figma — UI/UX дизайн vs креативное исследование идей

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

Платформа находится в публичной бета-версии с доступом только для пользователей из США. Это связано с ограничениями генеративных ИИ-моделей Google и требованиями локального законодательства по контенту.

Система работает через веб-интерфейс без возможности офлайн-использования. Качество генерации зависит от специфичности промптов и может требовать итеративного уточнения для достижения желаемого результата.

Практические применения

Для дизайнеров:

  • Быстрое создание концептуальных мудбордов

  • Исследование визуальных направлений проекта

  • Генерация альтернативных вариаций дизайн-решений

Для маркетологов:

  • Создание визуальных концепций кампаний

  • Тестирование креативных подходов

  • Подготовка материалов для брифинга агентствам

Для разработчиков продуктов:

  • Визуализация пользовательских сценариев

  • Создание референсов для UI/UX команды

  • Исследование визуальной идентичности продукта

Интеграция с экосистемой Google

Mixboard требует Google-аккаунт и интегрируется с другими сервисами Google Labs. Платформа использует инфраструктуру Google Cloud для генерации и обработки изображений, что обеспечивает масштабируемость и производительность.

Техническая интеграция:

  • Синхронизация проектов через Google Drive

  • Возможность встраивания в Google Slides и Docs

  • API для интеграции с внешними инструментами

  • Discord-сообщество для обратной связи и обновлений

Перспективы развития

Как экспериментальный продукт Google Labs, Mixboard служит полигоном для тестирования новых подходов к ИИ-ассистированному креативному процессу. Результаты могут быть интегрированы в

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии0
1
23 ...

Вклад авторов