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

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-игр и интеграции с игровыми движками.

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

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 служит полигоном для тестирования новых подходов к ИИ-ассистированному креативному процессу. Результаты могут быть интегрированы в

Как правильно внедрить SRI и обезопасить свой проект от атак через CDN?

Subresource Integrity (SRI) — это функция безопасности, которая позволяет браузерам проверять, не были ли данные, загруженные посредством CDN, изменены. SRI — важный инструмент для повышения безопасности веб-приложений. Он защищает от атак, в которых злоумышленник может внедрить вредоносный код в сторонние ресурсы.

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

Вышла новая версия браузерного расширения SiteAnalyzer SEO Tools с интеграцией данных из панели Яндекс Вебмастера – доступно отображение позиций сайтов и прочих метрик по разделам «Мониторинг запросов», «Клики в поиске», «Внешние ссылки», «Страницы в поиске», «Исключенные страницы», «Динамика ИКС» через API Яндекса.

• Мониторинг запросов. Раздел мониторинга отображает динамику позиций популярных поисковых запросов из панели Яндекс Вебмастера, но в более удобном виде, чем это реализовано в Яндексе.

• Клики в поиске. Данный раздел содержит список URL вашего сайта и статистику кликов по данным ссылкам.

• Внешние ссылки. Раздел внешних ссылок отображает список всех найденных Яндексом ссылок на ваш сайт в виде «Источник -> Целевой URL», а также дату первого обнаружения внешних ссылок и дату их последнего обхода.

• Страницы в поиске. Данный раздел отображает актуальные страницы сайта, проиндексированные Яндексом и участвующие в поиске. Помимо самих URL, также отображаются заголовки TITLE и дата их последнего посещения ботом Яндекса.

• Исключенные страницы. Это страницы сайта, по какой-либо причине исключенные из поиска Яндекса. Данные страницы не участвуют в ранжировании.

• Динамика ИКС. Данный раздел отображает историю параметра ИКС вашего сайта как на графике, так и в виде таблицы.

Установка

Установить расширение можно совершенно бесплатно через Chrome Web Store.

Napkin AI обновила алгоритмы генерации интеллект-карт с адаптивным редактированием

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

Технические улучшения

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

Ключевые технические особенности:

• Парсинг иерархических структур из неструктурированного текста

• Автоматическое определение уровней детализации и сложности

• Динамическая адаптация макета без перестроения DOM-структуры

• Поддержка экспорта в векторные форматы (SVG, PDF)

Алгоритм адаптивного редактирования

Основная техническая проблема традиционных систем mind mapping — необходимость полной перерисовки при изменении узлов из-за сложных зависимостей. Napkin AI решает это через алгоритм сохранения топологии.

Принцип работы:

1. Система создает граф связей независимо от визуального представления

2. При редактировании изменяется только содержимое узлов

3. Макет автоматически перестраивается с сохранением общей структуры

4. Алгоритм балансировки распределяет элементы без пересечений

Архитектура системы

Napkin AI состоит из нескольких модулей: анализатора текста, генератора визуальных схем и рендеринга. Анализатор использует NLP-модели для извлечения ключевых концепций и их связей.

Компоненты обработки:

• Text Parser — выделение сущностей и связей

• Layout Engine — размещение элементов с минимизацией пересечений

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

• Export Module — конвертация в различные форматы

Типы генерируемых структур

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

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

Сравнение с существующими решениями

Отличия от классических mind mapping инструментов:

• Автоматическая генерация структуры из текста vs ручное создание

• Сохранение макета при редактировании vs полная перерисовка

• ИИ-определение оптимального формата vs фиксированные шаблоны

Конкуренты и позиционирование:

• XMind, MindMeister — ручное создание карт

• Lucidchart — фокус на диаграммах процессов

• Miro — collaborative whiteboarding

• Napkin AI — автоматическая генерация из текста

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

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

• Визуализация архитектуры систем из технической документации

• Создание диаграмм зависимостей проектов

• Генерация схем API и data flow

Для технических писателей:

• Структурирование сложных технических концепций

• Создание диаграмм для документации

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

Ограничения и особенности

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

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

Интеграция и API

Платформа предоставляет REST API для интеграции с внешними системами. Поддерживается импорт из популярных форматов (Markdown, JSON) и экспорт в векторные и растровые форматы.

Доступные интеграции:

• Google Docs через расширение

• Slack для создания визуализаций в чатах

• Notion для встраивания интерактивных диаграмм

• API для кастомных приложений

Система предлагает бесплатный план с ограничениями на количество генераций в месяц. Платные планы включают дополнительные стили, приоритетную обработку и API-доступ.

Представлен инструментарий Stupid Meter для оценки в реальном времени работы крупных языковых моделей, включая OpenAI GPT-5, Anthropic Claude Opus 4 и Google Gemini 2.5 Pro. Система непрерывно запускает более 140 тестов, проверяя корректность, стабильность, эффективность и способность к восстановлению после ошибок. Результаты отображаются на виде таблице, показывающем текущее состояние моделей.

Также Stupid Meter анализирует затраты на выполнение задач. В расчёт берутся не только цены API, но и количество попыток, необходимых для получения правильного ответа. Таким образом, более дорогая модель может оказаться выгоднее «дешёвой», если справляется быстрее. Исходный код проекта на GitHub: AI Stupid Meter - API Server и AI Stupid Meter - Web Frontend.

Figma запустила альфа-версию "Prompt to edit" — редактирование дизайна текстовыми командами

Figma объявила о запуске закрытой альфы функции "Prompt to edit", позволяющей редактировать дизайны через естественные языковые команды. Новая возможность доступна для 5000 пользователей платных планов и включает массовое редактирование, автоматическое создание вариаций и генерацию компонентов.

Функциональные возможности

"Prompt to edit" позволяет выполнять сложные операции редактирования через текстовые инструкции. Система понимает контекст дизайна и может применять изменения к множественным элементам одновременно.

Основные возможности включают:

• Массовое редактирование — изменение нескольких фреймов одной командой

• Вставка контента — добавление изображений и текста по промпту

• Быстрый ресайз — автоматическая генерация мобильных версий

• Создание вариаций — переключение между светлой и темной темой

• Генерация UI с нуля — создание новых компонентов текстовыми описаниями

Доступ и ограничения

Альфа-тестирование ограничено 5000 участниками с платными аккаунтами. Подать заявку могут только администраторы команд Professional плана (до 20 пользователей) или организаций Enterprise/Organization планов.

Требования для участия:

• Полная лицензия на платном плане

• Заявка подается администратором команды/организации

• Согласие с условиями Early Access Program

• Пользователи Starter и Education планов исключены

Figma подчеркивает, что заполнение формы не гарантирует участие, а отбор не зависит от порядка подачи заявок.

Техническая реализация

Функция интегрирована непосредственно в интерфейс Figma без необходимости внешних плагинов или расширений. Это обеспечивает бесшовную интеграцию с существующими рабочими процессами дизайнеров.

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

Влияние на рабочие процессы

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

Потенциальные применения:

• Быстрое создание адаптивных версий интерфейсов

• Массовое обновление стилей в больших проектах

• Генерация A/B-тестовых вариаций

• Автоматизация рутинных операций дизайна

Конкуренция и позиционирование

Figma первой среди крупных дизайн-платформ интегрировала полноценное текстовое редактирование. Конкуренты вроде Adobe XD и Sketch пока предлагают лишь базовые ИИ-функции.

Это решение укрепляет позиции Figma как технологического лидера в области collaborative design и может стать конкурентным преимуществом в борьбе за корпоративных клиентов.

Монетизация и перспективы

На этапе альфа-тестирования функция бесплатна, но Figma планирует объявить модель ценообразования при широком релизе. Вероятно, "Prompt to edit" станет premium-функцией для Enterprise-клиентов.

Стратегические цели:

• Повышение продуктивности дизайнеров

• Снижение барьера входа для non-designers

• Интеграция в workflow DevOps команд

• Автоматизация design system maintenance

Технологические вызовы

Основные сложности связаны с пониманием дизайнерского контекста и намерений пользователя. ИИ должен корректно интерпретировать команды типа "сделать более современным" или "адаптировать под мобильные".

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

Сколько раз ваш бот соврал клиенту? Как вы тестируете свои ИИ сервисы?

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

Но когда дело доходит до AI ботов или ассистентов, многие дают слабину. Или просто не понимают как эффективно проверить, что бот корректно отрабатывает задачи.

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

1. Создать список из 10-15 эталонных вопросов, на которые бот должен ответить с точностью 100% согласно поставленной задаче или обновлению в релизе.

2. Создать список из 10-15 фейковых вопросов и сценариев диалога, на которые бот должен отвечать не выходя за рамки сценария.

Включить вопросы в обязательные тест-кейсы и прогонять с периодичностью n-дней.

От TODO-листа к анимационному шедевру

Начал разбираться с Motion для React, но оказалось, что свежих обзорных статей почти нет? В нашей статье полный обзор библиотеки Motion — идеального инструмента для создания современных UI-анимаций. Внутри:

• Разбор ключевых motion-компонентов.

• Практические примеры кода с плавной анимацией TODO-листа.

• Как настроить анимации появления, исчезновения и перетаскивания элементов.

• Советы по оптимизации с LazyMotion и управлению анимациями через хуки.

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

В статье «Попробовал библиотеку Motion в React: делюсь обзором» есть примеры кода, GIF-анимации и описание хуков, которых, достаточно, чтобы понять Motion, и, возможно, попробовать его руками, сэкономив время на чтении документации.

Как триггерить события для плагинов на манер Joomla 5+?

В Joomla 6 должны удалить метод triggerEvent(), с помощью которого раньше вызывались события для плагинов. Теперь чтобы в своём коде вызвать событие для плагина и получить от него результаты нужно:

• создать объект класса события

• передать в него именованные параметры

use Joomla\CMS\Event\AbstractEvent;
use Joomla\CMS\Factory;
use Joomla\CMS\Plugin\PluginHelper;

// Грузим плагины нужных групп
PluginHelper::importPlugin('system');
// Создаём объект события
$event = AbstractEvent::create('onAfterInitUniverse', [
    'subject' => $this,
    'data'    => $data, // какие-то данные
    'article' => $article, // ещё материал вдовесок
    'product' => $product, // и товаров подвезли
]);
// Триггерим событие
Factory::getApplication()->getDispatcher()->dispatch(
    $event->getName(), // Тут можно строку передать 'onAfterInitUniverse'
    $event
);
// Получаем результаты
// В случае с AbstractEvent это может быть не 'result',
// а что-то ещё - куда сами отдадите данные.
// 2-й аргумент - значение по умолчанию, 
// если не получены результаты
$results = $event->getArgument('result', []);

Плюсы такого подхода - вам не нужно запоминать порядок аргументов и проверять их наличие. Если вы написали свой класс события, то в плагине можно получать аргументы с помощью методов $event->getArticle(), $event->getData(), $event->getProduct() и подобными - реализуете сами под свои нужды.

Если такой класс события написали, то создаёте экземпляр своего класса события и укажите его явно в аргументе eventClass

use Joomla\Component\MyComponent\Administrator\Event\MyCoolEvent;

$event = MyCoolEvent::create('onAfterInitUniverse', [
    'subject'    => $this,
    'eventClass' => MyCoolEvent::class, // ваш класс события
    'data'       => $data, // какие-то данные
    'article'    => $article, // ещё материал вдовесок
    'product'    => $product, // и товаров подвезли
]);

Ожидаемо, что класс вашего события будет расширять AbsractEvent или другие классы событий Joomla.

🙁 Есть неприятный нюанс - нельзя просто так вызывать событие и ничего не передать в аргументы. Аргумент subject обязательный. Но если вы всё-таки не хотите туда ничего передавать - передайте туда пустой stdClass или объект Joomla\registry\Registry.

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

EasyP – тулбокс для работы с ProtoBuf⁠⁠

easyp – пакетный менеджер, билд-система и линтер для .proto файлов.
Хоть easyp и написан на #go 😱, одна из его фишек в том – что вы можете использовать любые плагины для генерации финального кода: он может быть хоть на #python, хоть на #rust.

Если много используете ProtoBuf – обязательно для ознакомления!

Пример конфигурации:

# Секция для правил линтера:
lint:
  use:
    - DEFAULT

# Секция с зависимостями:
deps:
  - github.com/googleapis/googleapis
  - github.com/grpc-ecosystem/grpc-gateway@v2.20.0

# Секция для правил сборки и генерации итоговых файлов:
generate:
  plugins:
    - name: go
      out: .
      opts:
        paths: source_relative
    - name: go-grpc
      out: .
      opts:
        paths: source_relative
        require_unimplemented_servers: false

Прощайте огромные Makefile с кучей скриптов для сборки.

Проект: https://github.com/easyp-tech/easyp

Документация: https://easyp.tech

Может ли кто-нибудь создать Википедию Вселенной, других цивилизаций?

По стилю - современная Википедия (или похоже), но разных миров и как будто с информацией из условного 100к-ого года нашей эры, где человечество выжило и знает намного больше о Вселенной. Например, чтобы Проксима b была с картой, историей и т.д.

Да, есть много фантастики, но целая фантастическая Википедия - этого у нас пока нет. Есть множество Вики по различным сюжетам, но это не то же самое. В "Википедии Вселенной" может быть надпись, которую видят все новые пользователи: "Что, если бы мы знали намного больше о Вселенной? Если бы у нас были Википедии других цивилизаций? Этот проект - фантазия людей и ИИ на тему", а дальше или случайная генерация одной из "Википедий будущего", или несколько на выбор, или одна.

Мемо: в ожидании Python 3.14

Финальный релиз Python 3.14 запланирован на 7 октября 2025. Уже вышел RC2 (14 августа), а финальный кандидат RC3 ожидается 16 сентября.
Этот пост — краткая шпаргалка, чтобы помнить, какие изменения стоит протестировать и чего ждать в новой версии.

1. Свободная многопоточность (Free-Threaded Python, без GIL)

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

# Включение free-threaded режима при сборке
# ./configure --disable-gil
import threading

def cpu_bound_task(n):
    return sum(i*i for i in range(n))

threads = [threading.Thread(target=cpu_bound_task, args=(10**6,)) for _ in range(4)]
[t.start() for t in threads]
[t.join() for t in threads]

Free-Threaded Python теперь не будет экспериментальным и будет официально поддерживаться, но пока пока будет являться опциональным, по умолчанию остаётся GIL.

2. Отложенная оценка аннотаций типов

Зачем нужно: ускорение работы и избавление от кавычек при forward references. Появился новый модуль annotationlib для работы с аннотациями.

# from __future__ import annotations
import annotationlib

class Node:
    def __init__(self, value: int, next: Node | None = None):
        self.value = value
        self.next = next

print(annotationlib.get_annotations(Node.__init__))

Аннотации больше не обрабатываются при определении функций, классов и модулей. Они сохраняются в специальных функциях аннотирования и обрабатываются при необходимости.
Импорт from future import annotations можно удалить при поддержке Python 3.14 и новее.

3. Template-строки (t-строки)

Зачем нужно: безопасное форматирование строк, полезное для веба и DSL, расширение возможностей f-строк.

name = "<script>alert('xss')</script>"
age = 25

tpl = t"Hello {name}, you are {age}"
safe = tpl.format(name=escape_html(name), age=age)
print(safe)

4. Zstandard-сжатие

Зачем нужно: современный алгоритм сжатия, быстрее gzip и удобнее для больших блоков данных.

import compression.zstd

data = b"Large dataset" * 1000
compressed = compression.zstd.compress(data, level=3)
decompressed = compression.zstd.decompress(compressed)

print(f"Ratio: {len(data) / len(compressed):.2f}")

5. Удалённая отладка процессов

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

import sys
import pdb

# Подключение отладчика к работающему процессу
sys.remote_exec("""
import pdb; pdb.set_trace()
""", target_pid=12345)

# Безопасное выполнение кода в удаленном процессе
result = sys.remote_exec("print('Debug info:', some_variable)", target_pid=12345)

6. Экспериментальный JIT-компилятор

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

# Включается флагом при запуске
# python --jit script.py

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# JIT автоматически оптимизирует "горячие" функции
result = fibonacci(35)  # Заметно быстрее с JIT

7. REPL с подсветкой синтаксиса

Зачем нужно: удобнее писать и отлаживать код прямо в интерактивной оболочке.

>>> def hello(name: str) -> str:
...     return f"Hello, {name}!"
>>> hello("World")
'Hello, World!'

Что стоит попробовать?

1. Потестировать free-threaded режим на CPU-нагруженных задачах.

2. Перейти на новый синтаксис аннотаций без кавычек.

3. Проверить t-строки в веб-шаблонах и DSL.

4. Протестировать zstd для больших массивов данных.

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

Подробнее на python.org: What’s new in Python 3.14

Раскопал интересный тип поля в Joomla - Groupedlist.

В процессе работы над компонентом нужно разделить опции выпадающего списка на группы. Я писал ранее как это сделать просто в коде тут: статья, пост.

Но как сделать такой список для использования в описаниях форм в xml? Первой мыслью было сделать свой тип поля, расширяющий стандартный \Joomla\CMS\Form\Field\ListField. Однако, в ядре Joomla нашёлся уже готовый класс поля для группированных списков \Joomla\CMS\Form\Field\GroupedlistField. Он расширяет напрямую FormField и имеет 2 метода - getGroups() и getInput().

В getInput() вызывается метод getGroups() для получения массивов с группами опций и его можно было спокойно заменить на getcollectLayoutData(), где этой работе самое и место, но это не слишком принципиально. И там и там работа делается. Поэтому нас интересует именно метод getGroups().

Мы создаём свой класс поля, расширяем GroupedlistField. Делаем обязательно свой $type для поля и реализуем метод getGroups(). Всё.

<?php
use Joomla\CMS\Form\Field\GroupedlistField;
use Joomla\CMS\HTML\HTMLHelper;

class ServerschemelistField extends GroupedlistField
{
    // type совпадает с именем файла и класса
    // без суффикса 'Field'
    protected $type = 'Serverschemelist';

    /**
     * Method to get the field options.
     *
     * @return  array  The field option objects.
     *
     * @throws  Exception
     *
     * @since  1.0.0
     */
    protected function getGroups(): array
    {
        // наши группы
        $group1 = [];
        $group2 = [];
        // Собираем первую группу опций
        foreach ($data as $item) {
            $optionattr = [];
            // Атрибуты для <option>
            if ($something_happend) {
                $optionattr['option.attr'] = [
                    'selected' => 'selected',
                    'onclick'  => 'earthQuake()',
                    'showon'   => 'field1:value1000',
                ];
            }

            $group1[] = HTMLHelper::_(
                'select.option',
                $item->option_value,
                $item->option_label_text,
                $optionattr
            );
        }
        // Аналогично собираем $group2
        // ...
        $groups = [
            ['Имя группы 1'] = $group1,
            ['Имя группы 2'] = $group2,
        ];
        // В parent::getGroups() будут значения
        // из xml-описания формы, если они есть.
        // Соединяем их с нашими.
        return array_merge(parent::getGroups(), $groups);
    }
}

В видео поговорим про то, как отключить табы в vscode, и как навигироваться по файлам без них. Отформатируем визуальное отображение одного оставшегося таба. А еще бонусом расскажу про Cooklang – язык для кулинарии и разметки рецептов.

Какие способы навигации удобнее табов? Будем использовать cmd+p для Command Pallete, cmd+d для Open Recent, alt+<right> и alt+<left> для навигации по позициям курсора в разных файлах.

Конфиг выпуска:

{
  "workbench.editor.showTabs": "single",
  "workbench.editor.showIcons": false,
  "workbench.editor.labelFormat": "medium",
  "breadcrumbs.enabled": false,
}

Горячие клавиши:

{
  {
      "key": "alt+left",
      "command": "workbench.action.navigateBack"
  },
  {
      "key": "ctrl+-",
      "command": "-workbench.action.navigateBack"
  },
  {
      "key": "alt+right",
      "command": "workbench.action.navigateForward"
  },
  {
      "key": "ctrl+shift+-",
      "command": "-workbench.action.navigateForward"
  },
  {
      "key": "cmd+d",
      "command": "workbench.action.quickOpenPreviousRecentlyUsedEditorInGroup",
      "when": "!activeEditorGroupEmpty"
  },
  {
      "key": "ctrl+tab",
      "command": "-workbench.action.quickOpenPreviousRecentlyUsedEditorInGroup",
      "when": "!activeEditorGroupEmpty"
  },
}

Полный конфиг: https://github.com/sobolevn/dotfiles

Репозиторий react-bits содержит тысячи анимированных компонентов на React для создания веб-проектов и интерфейсов, а также большое количество элементов — кнопки, карточки, меню, необычные курсоры, анимированные списки и декоративные фишки. Каждый из компонентов можно протестировать в браузере — проверить работу и то, как он будет смотреться в вебе. Элементы интегрируются в проект за один клик.

Лайфхак по нейронкам №89: лоцируй связанный код

Когда-то писал о подходах, которые в эру нейронок получили еще аргументов к применению: WYNWYN и Vertical Slice – принципам, говорящим, что надо писать только то, что нужно и там где нужно.

Недавно работал с кодовой базой, где код обработки http запросов (авторизация, пойти в бд, посчитать что-то, сделать запрос в стороннюю систему, смерджить результат и отдать) лежал в папках по категории (все обращения в бд в одной папке, все модели в другой, все обращения к API в третьей, все операции по мерджу в четвертой, и т.д.).

Когда я пытался попросить нейронку (платные Claude, Codex, Gemini) что-то сделать с этими ручками, то для решения ей приходилось каждый раз собирать полный контекст папок, и как только она осознавала бесполезность сего предприятия, резко обрезала контекст, недобирала нужного кода и отвечала нерабочим куском галлюцинации.

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

Решил сделать эксперимент: сложил весь связанный код в одно место (причем не ctrl-c-v, а ctrl-x-v), запустил нейронку и да, она сначала прочитала весь связанный код из папок, и уже после пыталась добирать доп контекст из сторонних, но теперь ответы и код были почти 100% попаданием в мой запрос (опять же, в меру их текущих возможностей).

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

И тут важно сделать несколько умозаключений:

• Если нейронке НЕ дать хороший контекст, она отвечает абсолютным бредом, поэтому, если есть желание пользоваться благами ИИ, самая важная задача – создавать условия при которых она будет получать только нужные данные

• Лоцирование связанного кода – одно из прекрасных решений этой задачи

• На самом деле, для людей это работает точно так же – иметь возможность зайти в одно место и прочитать весь связанный код – ускоряет и улучшает итоговый результат, который выдают ~кожаные мешки~ мы

Как вы действуете, если кодовая база разбросана по проекту и нет возможности собрать ее в одном месте, а контекст нейронки надо задать?

Калькулятор для бэклога: как пользовательский опыт может влиять на продуктовую приоритезацию

Собрались как-то UX-исследователь и эксперт по клиентскому опыту RUTUBE и решили разработать методологию, чтобы обосновано отвечать на вопрос: «Почему вы считаете, что именно это важно для пользователей?». Что из этого получилось, смотрите в выступлении на конференции Research Expo.

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

Больше о том, как разрабатывают медиасервисы, читайте в телеграм-канале Смотри за IT. Там делимся опытом и рассказываем о жизни в цифровых активов «Газпром-Медиа Холдинга» таких, как PREMIER, RUTUBE и Yappy.

HR-собеседование: почему не стоит задавать технические вопросы

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

На остальных собеседованиях меня спрашивали про ООП, связи таблиц в базе данных и типы данных в JS. На первый вопрос я уже могу не помнить ответа, так как пишу на функциях 5 лет. Второй вопрос — вообще не мой конек. Третий — вроде имеет смысл, но что HR этим проверяет? 🤔

HR-собеседование важно, но его цель — не в проверке технических навыков, а в оценке личных качеств. Когда HR начинает спрашивать про фреймворки или синтаксис, это пустая трата времени для всех. 🕐

Почему технические вопросы на HR-этапе — это плохо?

1. HR может неправильно оценить ответ. Если кандидат скажет что-то сложное, HR не поймет, правда это или блеф. Если ответ будет неверным, HR может пропустить хорошего специалиста. 😕

2. Создаётся ложное впечатление о компании. Кандидат думает: «Если HR лезет в технические детали, что будет на реальном собеседовании?» 😲 Это отпугивает сильных разработчиков, которые ценят время. ⏰

3. HR-этап должен фильтровать другое. Мотивация, ожидания по зарплате, готовность к условиям работы (офис, гибрид, удалёнка). Умение коммуницировать, работать в команде, адаптироваться к процессам. 💼

Вывод

HR-собеседование должно помочь кандидату и компании понять, подходят ли они друг другу по культуре, запросам и ценностям, а не проверять знание фреймворков. Оставьте техническую часть технарям. 🛠️

Представлена библиотека красочных анимаций на чистом JS для разных проектов All-in-one animation engine. Все анимации интегрируются за один клик и разобраны по типам: скроллбары, загрузчики, меню, переходы, счётчики или просто стилизованные элементы.

WT Yandex map items v.2.1.0 модуль для Joomla.

Выводит материалы Joomla в виде меток на Яндекс.Карты. Используется API 3.0.

v.2.1.0. Что нового?

Сохранение последнего вида карты.
Добавлены новые опции, позволяющие как для одного экземпляра модуля, так и для всех сохранять на устройстве пользователя последний использованный центр (координаты) и масштаб (zoom) карты. Это позволит открыть карту в том же месте после обновления страницы или при повторном открытии браузера.

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

CSS классы для маркеров карты.
Всем маркерам карты добавлен CSS-класс wt-yandex-map-items-marker. Для просмотренных маркеров (по которым кликали) добавляется CSS-класс wt-yandex-map-items-marker-viewed, что позволит выделять просмотренные маркеры с помощью стилей в CSS-файлах вашего шаблона. Также для контейнеров маркеров ymaps на карте добавлены data-атрибуты: data-module-id - id модуля и data-marker-id - id маркера.

Обработка GET-параметров в URL.

Карта может реагировать на GET-параметры в url:

• map[zoom] - устанавливает параметр масштаба.

• map[center_latitude] и map[center_longitude] - широта и долгота центра карты.

• map[marker_id] - id маркера, на котором центрируется карта. Таким образом вы можете создавать ссылку на карту с указанием конкретного маркера, на котором карта сфокусируется после загрузки маркеров. Например, https://site.ru/map?map[marker_id]=18465. Или же ссылку с указанием конкретных координат: https://site.ru/map?map[zoom]=16&map[center_latitude]=51.529706&map[center_longitude]=46.033922

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

GitHub расширения

Видео-обзор на Youtube

Видео-обзор на VK Видео

Видео-обзор на Rutube

Как сделать так, чтобы дизайнер и фронтендер не ругались

Противостояние дизайнеров и разработчиков носит уже почти легендарный характер. Этой теме посвящены десятки статей, видосов и докладов. Однако мы в компании уверены: чтобы лучше понимать друг друга, нужно просто следовать элементарным правилам.

1. Больше общаться.

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

Кроме того, если подключать фронтендера на этапе разработки прототипа, он сразу сможет подсказать, что будет сделать легко, а что сложно.

2. Следить за актуальностью UI-кита.

Это база. Чтобы всем было удобно работать, в макете должен быть UI-кит. Разработчик сразу будет видеть, какие шрифты и UI-элементы возникнут в проекте. И конечно, UI-кит важно оперативно обновлять и сообщать об этом отделу фронтенда.

3. Внедрять общий процесс на всех уровнях.

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

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

Совет по Joomla: расположение полей Form в параметрах модулей и плагинов.

Обычно поля настроек модулей и плагинов идут столбиком - сверху вниз. Название поля находится слева, а само поле - справа. В вёрстке админки мы видим div.control-group, в котором находятся label и поле. Посмотрим как можно просто кастомизировать админку.

Название поля НАД полем - parentclass="stack".

Если в XML-манифесте модуля или плагина добавить к полю атрибут parentclass, то мы можем указывать любые CSS-стили для div.control-group. Если указать CSS-класс stack, то название поля встанет над самим полем. Это удобно для больших сабформ - экономится место на экране.

<field type="text"
     name="map_center"
     label="MOD_WTYANDEXMAPITEMS_MAP_CENTER"
     description="MOD_WTYANDEXMAPITEMS_MAP_CENTER_DESC"
     default="51.533562, 46.034266"
     hint="51.533562, 46.034266"
     parentclass="stack"
/>

2 и более полей в ряд в параметрах модуля/плагина - классы span-*

Мы можем 2 или 3 небольших поля поставить рядом (для десктопов). Табы настроек являются grid-сеткой из 4-х колонок. Для поля можно указать ширину в виде количества колонок. Нам нужно в parentclass добавить класс span-*-inline. Допустимы числа от 1 до 4.

span-1-inline - поле будет шириной в 1 колонку сетку. span-4-inline - ширина в 4 колонки, равносильно поведению по умолчанию. Этот код выведет 2 поля в админке в параметрах модуля рядом на десктопах. Поскольку используется также класс stack - название поля будет над самим полем.

<field type="list"
     name="map_zoom"
     label="MOD_WTYANDEXMAPITEMS_MAP_ZOOM"
     default="7"
     parentclass="stack span-2-inline"
     filter="integer">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="21">21</option>
</field>
<field type="list"
     name="map_type"
     label="MOD_WTYANDEXMAPITEMS_MAP_TYPE"
     parentclass="stack span-2-inline"
     default="scheme">
          <option value="scheme">MOD_WTYANDEXMAPITEMS_MAP_TYPE_MAP</option>
          <option value="satellite">MOD_WTYANDEXMAPITEMS_MAP_TYPE_SATELLITE</option>
</field>

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

Совет по Joomla: расположение полей Form в параметрах модулей и плагинов.

Обычно поля настроек модулей и плагинов идут столбиком - сверху вниз. Название поля находится слева, а само поле - справа. В вёрстке админки мы видим div.control-group, в котором находятся label и поле. Посмотрим как можно просто кастомизировать админку.

Название поля НАД полем - parentclass="stack".

Если в XML-манифесте модуля или плагина добавить к полю атрибут parentclass, то мы можем указывать любые CSS-стили для div.control-group. Если указать CSS-класс stack, то название поля встанет над самим полем. Это удобно для больших сабформ - экономится место на экране.

<field type="text"
     name="map_center"
     label="MOD_WTYANDEXMAPITEMS_MAP_CENTER"
     description="MOD_WTYANDEXMAPITEMS_MAP_CENTER_DESC"
     default="51.533562, 46.034266"
     hint="51.533562, 46.034266"
     parentclass="stack"
/>

2 и более полей в ряд в параметрах модуля/плагина - классы span-*.

Мы можем 2 или 3 небольших поля поставить рядом (для десктопов). Табы настроек являются grid-сеткой из 4-х колонок. Для поля можно указать ширину в виде количества колонок. Нам нужно в parentclass добавить класс span-*-inline. Допустимы числа от 1 до 4.

• span-1-inline - поле будет шириной в 1 колонку сетку.

• span-4-inline - ширина в 4 колонки, равносильно поведению по умолчанию.

Этот код выведет 2 поля в админке в параметрах модуля рядом на десктопах. Поскольку используется также класс stack - название поля будет над самим полем.

<field type="list"
     name="map_zoom"
     label="MOD_WTYANDEXMAPITEMS_MAP_ZOOM"
     default="7"
     parentclass="stack span-2-inline"
     filter="integer">
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="21">21</option>
</field>
<field type="list"
     name="map_type"
     label="MOD_WTYANDEXMAPITEMS_MAP_TYPE"
     parentclass="stack span-2-inline"
     default="scheme">
          <option value="scheme">MOD_WTYANDEXMAPITEMS_MAP_TYPE_MAP</option>
          <option value="satellite">MOD_WTYANDEXMAPITEMS_MAP_TYPE_SATELLITE</option>
</field>

Я узнал о... #3: DevOps фреймворк DORA

DORA - это DevOps фреймворк из 4-х метрик, которые помогают оценить эффективность и качество релизного процесса.

Фреймворк придумала компания с таким же названием (DevOps Research and Assessment). Скорее всего, чтобы проще продавать свой консалтинг. В 2018-м году эту компанию купил Google Cloud и сделал своей... командой.

Вообще, про эти метрики в том или ином виде я знал. Но не знал, как они систематизированы и по-умному называются.

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

1) Частота деплоя (deployment frequency)

Показывает, насколько адекватный уровень автоматизированного тестирования. И умеет ли команда релизить точечно, а не сразу всё.

Критерии:

• отлично: несколько раз в день;

• хорошо: раз в 1-7 дней;

• средне: несколько раз в месяц;

• плохо: реже, чем раз в месяц.

2) Время от коммита до деплоя (Lead Time)

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

Критерии:

• отлично: меньше дня;

• хорошо: от 1-го до 7 дней;

• средне: 7-30 дней (*по оценке компании DORA, я бы сказал, что это плохой результат);

• плохо: дольше месяца.

3) % сбоев после релиза (Change Failure Rate)

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

Критерии (% релизов, которые привели к сбою):

• отлично: <5%;

• хорошо: <10%;

• средне: <15%;

• плохо: >15%.

4) Скорость восстановления (Mean Time To Recovery)

Показывает, как быстро мы поднимаем прод, если он сломался (упал, пришёл DDOS, выключились сервера). А ещё, умеем ли мы определять и измерять сбои. Упавшим продомом считается или факт того, что существенная часть системы недоступна, или коммит с hotfix'ом.

Критерии (как быстро поднимаем прод):

• отлично: меньше часа;

• хорошо: меньше дня;

• средне: меньше дня;

• плохо: больше дня.

Когда это нужно?

Для себя я выделил три критерия, когда эти метрики имеет смысл считать:

1. Когда есть конкретный продукт в активной стадии развития с постоянной командой хотя бы из 3-5 разработчиков. Т.е. это не что-то, что получает несколько фич в месяц или находится в стадии активного саппорта.

2. Когда компания большая, в которой появилось много команд с продуктами и нужно выстроить хоть какое-то понимание в среднем по компании. Вот тут, кстати, важно не начать погоню за метриками, т.к. все внутренние проекты живут в своём темпе. Нельзя выставить одинаковые метрики всем поголовно в качестве KPI.

3. Когда СТО\CIO нужны хоть какие-то метрики для отчётности. Чтобы объяснить инвесторам или нетехнической части C level'a, что в компании или команде хороший DevOps процесс (или, наоборот, плохой).

DORA метрики измеряются через GitLab или почти любую другую систему CI \ CD. GitLab умеет считать всё это из коробки. За исключением, наверное, падения прода (что тоже можно добавить вручную или вебхуками \ alert manager'ами).

---

Мой Telegram канал про разработку.
Мой open source проект для бекапа PostgreSQL - GitHub.

Просмотр кода в интерфейсе Amvera Cloud

Мы сделали возможность просмотра содержимого файлов репозитория в интерфейсе.

Раньше было сложно понять, какая версия файла загружена в облако. 

Теперь можно зайти в файл в разделе Репозиторий и посмотреть его содержимое.

Amvera – облако для простого запуска проектов со встроенным CI/CD (деплой идёт через Git или загрузку файлов в интерфейсе). C Amvera вам не нужно думать о настройке NGINX, виртуальных машин и другой инфраструктуры.

Unit-тесты во фронтенде: развеиваем мифы

После статьи о навыках джуниоров многие не согласились с моей оценкой unit-тестов. Давайте посмотрим, где они действительно полезны, а где создают иллюзию ценности.

Если вы начинающий разработчик, вас наверняка убеждали:
«Без unit-тестов никуда! Всё должно быть покрыто тестами!»
Но так ли это на самом деле?

Где unit-тесты полезны:

• Бизнес-логика и утилиты (форматирование данных, расчёты)

• Кастомные хуки (управление состоянием, формы)

• Критичные функции (редкий зверь во фронтенде)

Где они бесполезны (и даже вредны):

• UI-компоненты (скриншотные тесты часто ломаются из-за изменений вёрстки)

• API с моками (моки не показывают реальное поведение сервера)

• Тестирование библиотек (проверяете чужой код)

Что использовать вместо?

1. Интеграционные тесты — проверяют реальные сценарии

2. Zod для валидации API — предотвращает ошибки из-за неожиданных данных

3. Ручные проверки — быстрее и точнее, чем скриншотные тесты

Для джуниора unit-тесты — не приоритет. Важнее:

• Глубокое изучение фреймворка

• Умение работать с API

• Навык чтения и отладки кода

Не стоит тратить время на «тесты ради тестов». Сосредоточьтесь на том, что действительно поможет в работе.

Представлен открытый проект Open Lovable, который клонирует любые сайты за один клик. Не надо учить дизайн и разметку — система генерит любые лендинги и сайты. Работает просто — получает URL и выдаёт результат. Можно контролировать стили и редактировать проект прямо на ходу — достаточно вписывать команды в чат с нейросетью. Сервис полностью клонирует ресурсы — от дизайна и разметки до бизнес-логики и всего функционала. Внутри — самые хайповые и мощные нейронки прямо сейчас — GPT-5, Claude 4.1, Grok 4 или Gemini 2.5 Pro. Код Open Lovable лежит тут. В вебе доступен — здесь.

В SpaceWeb запустили конструктор сайтов с ИИ

Новый день – новый релиз! Сегодня рассказываем о новой фиче — интегрировали в конструктор сайтов SpaceWeb искусственный интеллект. В обновленной версии можно быстро запустить сайт и подготовить референсы для клиентских проектов. Интерфейс генератора сайтов максимально удобен и интуитивен: с помощью функции перетаскивания и поддержки искусственного интеллекта можно легко настроить сайт под свои нужды и сделать его уникальным. 

Что делает ИИ в конструкторе?

• Генерирует контент: автоматически создает заголовки, тексты и разделы сайта.

• SEO-оптимизирует: формирует мета-заголовки, мета-описания и ключевые слова, помогая продвигать сайт в поисковых системах.

• Обновляет и редактирует сайт: быстро и легко вносит изменения в структуру, контент и оформление.

• Адаптирует веб-ресурс под задачи бизнеса: в конструктор встроено 200 шаблонов, среди которых обязательно найдется подходящий.

В конструктор также интегрированы инструменты для онлайн-торговли, есть большой выбор плагинов, подключена защита от DDoS уровня L3-L4, автоматически фильтрующая трафик от сетевых и транспортных атак. Создавать сайты можно сразу на нескольких языках, благодаря автоматической поддержке более 50 языков. Тарификация зависит от числа сайтов, объема диска и количества шаблонов. Протестировать новый сервис можно уже сейчас на сайте.

А вы уже пробовали запустить свой проект с помощью бесплатного объема облачных ресурсов Evolution free tier?

Тогда поделитесь опытом и мнением — опрос займет не больше 5-7 минут.

Пройти опрос 👈

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

Текущие условия:

• виртуальная машина в конфигурации 2vCPU, 4 ГБ RAM, диск 30 ГБ;

• ежемесячный объем хранилища S3 — 15 ГБ, 100 000 операций PUT/POST/LIST, 1 000 000 операций GET/HEAD, 10 ТБ исходящего трафика;

• ежемесячный объем ресурсов для запуска контейнеров — 120 vCPU x час, 480 ГБ RAM х час.

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

Узнать больше про free tier и попробовать 🕹️

Обновлён бесплатный учебник по JavaScript. Проект полностью на русском языке. Там собрано всё: от основ синтаксиса до замыканий и ООП, событий, промисов и других сложных концепций. В каждой главе десятки примеров кода — не понять материал просто невозможно. Есть много задач и контрольных как после глав, так и после больших разделов.

Почему я больше никогда не буду использовать сервис bitly?

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

Long story short: помогают тут ребятам с одним оффлайн проектом, нужно было быстро сделать QR код для флайеров, google выдает миллион сервисов для генерации, выбрал первый попавшийся “Create Your Free QR Codes”.  Удачно все сделал, заказали флаеры, не смотря на то, что по пути на каждому этапе было Free через 2 недели (когда уже все напечатано) прилетает вежливое “Oh no! Your Dynamic QR Codes will expire in 3 days”. И конечно же он перестанет работать если не заплатить ($20/month). 

Масштаб “потерь” - $40, но я готов заплатить $200 чтобы объяснить они строян бизнес на скаме и для кармы это вредно. 

Конечно же я не один такой, и большинство “сжимают зубы” и платят.  Например на редите 230 комментариев. 

Как вы поступаете в такой сиутации?  Я как-то с детства считаю что нельзя потокать и платить. 

Мои действия:

✅ никогда в жизни ни на одном из моих проектов не будет использоваться сокращалка Bitly

✅ написал далобу в FTC

✅ написал отзыв на Google Maps (там таких много)

☑️ найду и напишу отзывы на других сервисах

✅ попрошу вас помочь мне и присоединиться

P.S. Ресеч показал, что это не просто какие-то горе стартаперы, а проект компании Bitly (рейтинг 1.6 на Trustpilot).

Если вам нечем заняться и вам не сложно уделить 2-5 минут своего времени. 

Промпт для генерации отзыва:

Write a concise, neutral review of qr-code-generator.com (Bitly) in plain, easy-to-read language, 80-120 words. Context: It appears in Google for queries like "free qr code generator." During setup, the process is presented as free; any expiration notice, if present, seems absent or buried in terms. About 14 days later, the QR may be deactivated behind a paywall, leaving printed materials unusable unless payment is made to reactivate. The system does not allow converting that now paid QR to a free static code or redirecting it without payment. Many users report similar experiences online, including numerous Reddit comments. Keep the tone calm, factual, and non-accusatory. Do not include personal info or insults. Write in your own words.

Места куда стоит запостить отзыв:

- Google Maps (Bitly Office Google Maps)

- Trust Pilot

- G2

- Capterra

P.P.S. Есть кто-то из СМИ хочет изучить эту историю и написать подробнее - я буду рад ответить на вопросы и предоставить материалы. 

P.P.P.S. Особенно иронично выглядит позиция “Head of Happiness” в подписи письма

#justice 

Вам не нужен Activity Bar в vscode!

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

Раз. Убираем Activity Bar. В нем есть три типа иконок: нужные нам часто, нужные иногда, совсем ненужные. Логика такая: для нужных мы создаем горячие клавиши (или пользуемся существующими). Для средне-нужных используем cmd+p и выбор команды. Ненужными – не пользуемся :)

Кастомные настройки для горячих клавиш для управления разными View (плюс к стандратным):

[
    {
        "key": "shift+cmd+g",
        "command": "workbench.view.scm",
        "when": "workbench.scm.active"
    },
    {
        "key": "ctrl+shift+g",
        "command": "-workbench.view.scm",
        "when": "workbench.scm.active"
    },
    {
        "key": "shift+cmd+o",
        "command": "outline.focus"
    }
]

Два. Убираем Side Bar. Большую часть времени он не нужен. В основном нам просто нужно читать и реже писать код. Зачем нам Side Bar? Убирается основной по cmd+b, а второй по cmd+alt+b.

Но если оставить Side Bar справа, то его появление / скрытие будет двигать код. Что будет мешать. Потому – убираем его вправо.

Настройки:

{
    "workbench.activityBar.location": "hidden",
    "workbench.sideBar.location": "right"
}

Три. И не забудьте поместить Command Palette в центр рабочей области. Так будет удобнее: появяться она будет сразу перед глазами. Просто перетаскиваем мышкой.

Ссылка со всеми материалами: https://github.com/sobolevn/the-best-python-course/blob/main/minimal_vscode Там будет много полезного.

Говорим на языке событий: что даёт ивент-шторминг и как его правильно провести

Привет! Я Иван Чернов, системный архитектор, в этом посте расскажу про ивент-шторминг.

В Островке есть набор сервисов, который разбит на логические блоки так, чтобы в рамках блока можно было итерировать: Островок, Островок B2B и Островок Командировки. При этом запускать новые фичи, которые будут сквозь эти слои прорезаться. 

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

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

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

На этих циклах фокусируемся на доске в Miro во время встречи. 

В ивент-шторминге 3 этапа: 

1. Сейлзы выстраивают по циклам цепочку событий: от «клиента у нас ещё нет» до «клиент нас окончательно покинул». Даже в простых цепочках 20–30 действий. В готовом таймлайне есть happy pass: клиент успешно прошёл весь путь. И альтернативные пути: что-то пошло не так.

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

3. Выявляем, какие агрегаты работают с событием. Мапим команды: клиент регистрируется, в работе участвует команда регистрации. 

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

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

Поделюсь советами, как круто провести ивент-шторминг.

Онлайн-формат

● Для проведения онлайн достаточно доски в Miro.

● Разбивайте встречу на три части, каждая встреча — один этап.

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

● Максимум людей для успешной фасилитации онлайн — 8–10 человек.

Подбор людей и подготовка

● Соотношение участников: 70% бизнеса, 30% разработки.

● Ищите представителей бизнеса в оргчате выбранного домена: спрашивайте у руководства, «кто тут самый инициативный».

● Вам нужны работники «с полей», которые лучше всего шарят в процессах, и тимлиды первого уровня.

● Берите людей из разных направлений домена. 

● Бизнес-участники должны понимать: ивент-шторминг — процесс обучения, они эксперты, а разработка — ученики. Им нужно говорить на своём языке, а не подстраиваться под разработку.

● Дайте участникам базовый словарь. Четыре самых важных слова: актор, команда, событие, термин.

● Важны вводные по времени и цели: на сессию уйдёт суммарно 6–8 часов, она даст единое понимание процессов.

Фасилитация

● На старте не бойтесь повторить все вводные.

● Дайте сейлзсам 10 минут на то, чтобы каждый выстроил индивидуальный таймлайн, дальше начинайте мёржить таймлайны с общим обсуждением.

● Событие — факт в прошедшем времени, его не отмотать. Следите, чтобы так и записывали. 

● Первым делом простройте happy pass, иначе у вас не выстроится цельное видение процесса. Альтернативные ветки обозначьте на первом этапе, а достраивайте на втором, проверяя таймлайн с конца.

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

● Организуйте пост-процессинг: важно передать разработке результаты, объяснить, какие процессы у нас уже верно реализованы, а где нужно обновление и дополнительное внедрение.

Как провести идеально бесполезное собеседование для фронтендера!

Шаг 1: Берем «элитный» шаблон Яндекс.Мультитрека.

Шаг 2: Удаляем всё ценное — оставляем только хаотичный набор вопросов.

Шаг 3: Делаем вид, что это «специально под вакансию» (спойлер: одни и те же 40 вопросов получают все — от стажера до лида).

Главные хиты программы:

— «Назови 5+ способов центрировать div» (ведь React-лид должен уметь это с закрытыми глазами). — «Расскажи про Event Loop как стихотворение» (иначе как проверить лидерские качества?). — «SOLID наизусть, включая историю создания каждого принципа». — Секретный прием: задаем общие вопросы, но с видом эксперта ждем «правильного» ответа (который знает только интервьюер).

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

Гарантированный результат:

• Кандидат либо засыпает, либо пишет гневный пост.

• Ваша компания экономит на зарплатах — никто не доходит до оффера.

• Вы получаете статус «самое запоминающееся собеседование в карьере». Если узнали свою компанию — не переживайте, вы не одиноки в этом увлекательном квесте!

minimal vscode: открываем окна

Нет, не от духоты, ее в видео как раз не будет 🌚️️️️
Видео короткое, динамичное, практичное.

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

1. Её поставить

2. Научиться её открывать

3. Располагать её на рабочем пространстве

Мой конфиг: https://github.com/sobolevn/dotfiles

В видео поговорили про: hotkey managers, тайлы, всякие красивости для macos.

Менеджеры горячих клавиш:

• jumpapp для Linux: https://github.com/mkropat/jumpapp и https://linux.die.net/man/1/wmctrl

• AutoHotkey для Windows: https://autohotkey.com

• whkd для Windows: https://github.com/LGUG2Z/whkd

• skhd для macos: https://github.com/koekeishiya/skhd

• skhd-zig для macos: https://github.com/jackielii/skhd.zig

Тайловые менеджеры:

• macos: https://github.com/rxhanson/Rectangle мой конфиг: https://github.com/sobolevn/dotfiles/blob/master/config/RectangleConfig.json

• macos более продвинутая альтернатива: https://github.com/ianyh/Amethyst

• самая продвинутая альтернатива для macos: https://github.com/koekeishiya/yabai

• Windows: https://github.com/LGUG2Z/komorebi

• Linux: ТЫСЯЧИ ИХ

Полезности:

• Top Notch для macos: https://topnotch.app

• HazeOver для macos: https://hazeover.com/ru

• Brewfile: https://docs.brew.sh/Brew-Bundle-and-Brewfile мой конфиг: https://github.com/sobolevn/dotfiles/blob/master/Brewfile

Представлена бесплатная платформа Pagy, которая позволяет создавать лендинги и небольшие веб-проекты за секунды. Работает в браузере и собирает сайты или визитки без привлечения дизайнера, верстальщика. Не требует никакой установки ПО. Все просто: выбираете шаблон и сразу его редактируете, пишите текст, вставляете ссылки и пикчи. Ни одной строчки кода писать не нужно, хостинг не требуется. Есть аналитика метрик сайта и сотни уже готовых дизайнов от разрабов и коммьюнити.

Чужой товарный знак в TITLE вашего сайта: есть ли риск судебного иска?

Сайт - средство привлечения клиентов и сопровождения продаж. Инструмент мощный, но зависимый: нужна поисковая оптимизация, иначе сайт затеряется среди миллиарда похожих ресурсов.

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

Место страницы сайта в поисковой выдаче выше за счет текста внутри элемента TITLE.

 Элемент TITLE размещается вверху кода веб-страницы между служебными символами <title></title>. Внутри элемента - текст, который отражает ключевую мысль всего контента страницы.

Пользователю не виден код сайта, но код видит поисковый робот. Он переходит на веб-страницу, изучает сведения внутри TITLE и помещает ссылку на эту страницу в выдачу по соответствующему запросу пользователя. Повыше.

В чем проблема? Давайте на примере.

Сайт моей адвокатской практики включает страницу "Главная", которая знакомит с моей юридической помощью: сообщает предложение, показывает его ценность, описывает пользу для каждого профиля и так далее.

Моя специализация - юридическая помощь по интеллектуальной собственности. Поэтому в код элемента TITLE этой веб-страницы я поместил ключевую мысль: "Защита интеллектуальной собственности | Адвокат С.В. Пропастин".

Поисковый робот считывает код и учитывает текст из TITLE при выдаче ссылки на веб-страницу. По запросу пользователя "защита интеллектуальной собственности".

Я порылся в реестре товарных знаков Роспатента и нашел комбинированный товарный знак условного конкурента. На нем изображены щит и словосочетание: Патентное бюро "Защита интеллектуальной собственности" (заявка 2019763408).

Ключевая мысль "защита интеллектуальной собственности" в TITLE кода моего сайта и словесный элемент товарного знака бюро сильно похожи!

Отсюда вопрос -

Застрахован ли я от судебного иска на том лишь основании, что фрагмент чужого товарного знака прописан в невидимом для пользователя месте - коде сайта?

Вопрос не праздный.

Гипотетически я могу отбирать клиентов у бюро: пользователи ищут в интернете именно бюро, за счет моего title наталкиваются на мой сайт и переходят на него, оценивают преимущества и обращаются ко мне за помощью.

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

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

Ответ на вопрос мне не нравится, но истина дороже -

Маскировка чужого товарного знака в элементе TITLE кода веб-страницы не защищает меня от иска правообладателя знака. Почему?

1. Товарный знак включает словесный элемент "защита интеллектуальной собственности". Ключевая мысль в TITLE моего сайта тоже сформулирована в словесной форме с таким же наполнением.

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

2. Один из способов использования товарного знака - его размещение в сети "Интернет".

Сайты являются обязательным звеном этой сети. Без них линии связи теряют смысл: нечего соединять. Именно использование товарного знака без согласия его владельца - повод для судебного иска.

3. Без специальных сервисов элемент TITLE в коде сайта невидим пользователю. Но именно в случае с TITLE пользователь видит результат исполнения кода, так как ключевая мысль:

1) выводится в виде заголовка и подсвечивается системой на странице выдачи по поисковому запросу;

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

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

Интересно, вы проговариваете в процессе SEO тему использования чужих товарных знаков?

Хотите подтянуть свои знания Go?

Тогда новый бесплатный курс для вас!

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

Если вы уже знакомы с Go, но не хватает практики, приглашаем пройти новый курс в Академии Selectel. С ним вы научитесь писать простые сервисы на Go и использовать его в некоторых рабочих задачах, а еще получите большую подборку ресурсов для погружения в этот язык. 

Несколько материалов для старта.

• Как написать свой REST API на Go? Разрабатываем сокращатель ссылок. Делимся пошаговой инструкцией, как написать REST API сервис URL Shortener и развернуть готовое приложение на сервере.

• Fuzzing-тесты в Go после v1.18. Рассказываем, как устроено fuzzing-тестирование в Go и как проверить функцию на корректную валидацию данных.

• Создаем сервис авторизации. Пошаговое руководство по написанию полноценного gRPC-сервиса с архитектурой на Go.

Открыть курс →

Находки на рыбалке: FastStream! Сходили с автором половить рыбу и пожарить всякое вкусное на углях. И пока было время – говорили про программирование.

Для тех, кто еще не успел познакомиться с новинкой, рассказываю: FastStream – аналог FastAPI, но для работы с событиями в брокерах / очередях.

Пример:

from faststream import FastStream
from faststream.kafka import KafkaBroker

broker = KafkaBroker("localhost:9092")
app = FastStream(broker)

@publisher("another-topic")
@subscriber("first-topic")
async def handle(user: str) -> str:
     return f"Hi, {user}!"

Что делает данный код? Читает сообщения из first-topic, парсит из них поле user типа str, выполняет вашу логику обработки, отправляет новое сообщение в another-topic. Просто? Удобно? Да!

Что нам дает такой подход?

• Декларативное описание, чего мы хотим. Не надо руками создавать коннекты и рулить потоком выполнения

• AsyncAPI документацию (аналог OpenAPI в вебе)

• Удобное тестирование

• Кучу других плюшек!

Внутри видео обсудили:

• Детали работы DI фастстрима

• Встроенное Observability

• Open Tracing

• Сообщество фреймворка (тут не будет проблемы "одного автора", сообщество живет!)

• Отличия от Celery: почему интструменты совсем разные?

Репозиторий: https://github.com/ag2ai/faststream
Документация: https://faststream.ag2.ai

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