Фронтенд

Уже 3000+ пользователей у нашего расширения Core Web Vitals Test!

Продолжаем расти 🚀.

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

Что происходит с JavaScript-кодом внутри V8?

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

Интересно, что невалидные программы, вроде...

const = = ;

...ещё не выдадут ошибку на данном этапе. Сканер спокойно разобьет нашу программу на токены и отдаст дальше, ведь проверка синтаксической корректности не его зона ответственности. Это зона ответственности Parser, который способен выявить все синтаксические ошибки.

Кстати, одна из ключевых особенностей Parser — генерация Abstract Syntax Tree, которое затем используется для создания байт-кода внутри Ignition. На основе полученных токенов из Scanner генерируется дерево, в котором каждый узел отражает языковую конструкцию: идентификатор, оператор, выражение или функцию.

Например, для кода...

const sum = (a, b) => a + b;

...мы получим следующее дерево:

VariableDeclaration (const)└── VariableDeclarator    ├── Identifier: sum    └── ArrowFunctionExpression        ├── Params        │   ├── Identifier: a        │   └── Identifier: b        └── BinaryExpression (+)            ├── Identifier: a            └── Identifier: b

Об остальном, что происходит на этапах лексического анализа и синтаксического анализа в V8, читайте в статье «Что происходит с вашим JavaScript-кодом внутри V8. Часть 1».

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

Начну как всегда из далека:
В последнее время, так как вместо человека теперь LLM чаще всего обращается к сайтам и приложениям, становится популярно добавлять специально написанные для llm страницы (как раньше sitemap, только теперь md файлы)

Это даже стало правилом для MCP серверов - например Cline добавляет только те MCP сервера, которые LLM может поставить в one shot или имеют llm-install.md файл.

По сути, кажется это становится файлом установки для llm - то есть, llm, следуя инструкциям этого файла ставит и конфигурирует MCP сервер на компьютере (прям как раньше, люди скачивали и устанавливали на windows).

Уязвимостей тут может быть много (потому что промпт может быть corrupt), но если следить за процессом и обязательно проверять команды исполнения - why not?

А теперь - представляете что можно сделать это для любого пакета и любого языка?

То есть, есть библиотека например для интеграции авторизации. Вместо того, чтобы разворачивать её вручную, автор библиотеки может написать llm-install и агент, имея контекст проекта в котором он работает, может целиком его развернуть!🙌
Креды например строго хранить в отдельном фале, не давать доступ (например использовать cursorignore etc..) и такие пакеты можно интегрировать как клиенту и бекенду!

И тоже самое можно применить и для удаления! И таким образом весь процесс интгерации станет больше как лего plug & play 🤩

Game changer?:)

🦥 RxJS defer — ленивая инициализация Observable

defer — это фабрика, которая создает Observable только при подписке, а не во время объявления. Идеально подходит для:

• HTTP-запросов (чтобы избежать преждевременного выполнения)

• динамических данных (которые должны быть свежими при каждой подписке)

• условных потоков (когда Observable зависит от состояния времени выполнения)

📌 Основные варианты использования

1. Свежие данные при каждой подписке

   const freshData$ = defer(() => of(Date.now()));

   // Новая временная метка при каждой подписке()

2. Работа с изменяемым состоянием

   const token$ = defer(() => of(localStorage.getItem('token')));

   // Всегда получает текущий токен, даже если обновлен

3. Условные наблюдаемые

   const api$ = defer(() => isLoggedIn ? http.get('/user') : http.get('/guest') );

4. Генерация случайного значения

   const random$ = defer(() => of(Math.random()));

   // Новое случайное число на подписку

🚫 Ограничения defer

• нет кэширования → используйте shareReplay, если вам нужно повторно использовать результаты.

• нет отмены запроса → объедините с switchMap/takeUntil для управления отменой

⚡Когда следует выбирать defer вместо обычных наблюдаемых?

• данные должны быть свежими при каждом subscribe()

• cоздание наблюдаемого стоит дорого и должно быть отложено

• поток зависит от изменяемых условий (флаги функций, статус аутентификации и т. д.)

Больше об 🅰️ngular в моём Telegram-канале

Написали подробный разбор запуска второго продукта в рамках челленджа 12 проектов за 12 месяцев - браузерное расширение Save Emails from Gmail as PDF.

В статье рассказали про:

• выбор идеи,

• разработку,

• SEO и размещение на UGC-платформах,

• текущее кол-во пользователей.

👉🏻 https://habr.com/ru/articles/915050/

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

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

📅 Дата: 05.06.2025

⏰ Время: 17:00-19:00 (Мск)

Содержание:

✔️ Архитектура

✔️ Solid

✔️ Grasp

👨‍🎓 Спикер: Щербаков Александр — эксперт в области фронтенд-разработки.

✍️ Записаться на вебинар

Несмотря на кадровый голод в IT занято огромное количество лишних людей деятельность которых в общем-то бесполезна. А все что бесполезно как известно приносит только вред. Возьмем к примеру новомодную отрасль UI/UX которая по задумке должна улучшать пользовательский опыт - так называемый "экспириенс". На планете существует целый зоопарк разных форматов дат: 1 ноября 2000, 01.11.2000 и т.д и т.п. Это мелочь, но и в мелочах можно тот самый "экспириенс" взять да и улучшить. И он был повсеместно "улучшен" до формата "3 года назад". Как правило без какой либо возможности вернуть нормальную дату.

Теперь просто хочется простереть руки к небу и крикнуть за что это мне?

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

Верстаем письмо на React, чтобы оно корректно отображалось во всех почтовых клиентах

Чтобы свёрстанные письма хорошо выглядели на десктопе и мобильных, нужно знать, как почтовые клиенты поддерживают возможности CSS и HTML. И на практике это не всегда просто. Например, Gmail отбрасывает атрибут style целиком, если встречает в нём цвет, заданный как rgb. В итоге даже в 2025 году вёрстка писем нередко сводится к написанию таблиц и атрибутов наподобие align, valign, bgcolor и т.д.

Вдобавок, после отправки письмо нельзя поправить, как страницу на сайте, и это тоже добавляет сложности.

Наша команда решила оценить для создания писем библиотеку React Email. Она предоставляет компоненты, которые генерируют HTML и CSS для корректного отображения во всех почтовых клиентах. Письмо можно посмотреть в браузере и отправить на почту. Под капотом всё равно останутся таблицы, но писать их руками не придётся.

На примере отправки через сервис Yandex Postbox покажем, как это работает.

Начало работы. Установим библиотеку @react‑email/components и клиент для работы с почтовым сервисом AWS SESv2 — Postbox поддерживает эту версию клиента.

npm install @aws-sdk/client-sesv2 @react-email/components

Создадим компонент, который будет генерировать письмо:

email.tsx
import * as React from 'react';
import { Button, Html } from '@react-email/components';

export function Email(props) {
   const { url } = props;

   return (
       <Html lang="en">
           <Button href={url}>Click me</Button>
       </Html>
   );
}

Больше компонентов — в документации.

Создание аккаунта в облаке

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

2. Назначим сервисному аккаунту роль postbox.sender.

3. Для отправки письма с помощью SDK создадим статический ключ доступа. Важно надёжно сохранить идентификатор и секретный ключ. После того как вы закроете окно, параметры секретного ключа станут недоступны.

Отправка письма. Ключи доступа можно передать в конструктор SESv2Client явно, как показано ниже, указать их в переменных окружения или использовать конфигурацию AWS CLI.

import { render } from '@react-email/components';
import type { SendEmailCommandInput } from '@aws-sdk/client-sesv2';
import { SendEmailCommand, SESv2Client } from '@aws-sdk/client-sesv2';
import { Email } from './email';
import React from 'react'


const sesClient = new SESv2Client({
   region: 'ru-central1',
   endpoint: 'https://postbox.cloud.yandex.net',
});

const emailHtml = await render(<Email url="https://example.com"/>);
const emailText = await render(<Email url="https://example.com"/>, {
   pretty: true,
   plainText: true,
});

const email: SendEmailCommandInput = {
   Content: {
       Simple: { 
           Body: {
               Html: {
                   Data: emailHtml,
               },
               Text: {
                   Data: emailText,
               },
           },
           Subject: {
               Data: 'Тестовое письмо',
           },
       },
   },
   Destination: {
       ToAddresses: [
           'bob@example.com'
       ],
   },
   FromEmailAddress: 'Alice <alice@example.com>',
}

const command = new SendEmailCommand(email);

const result = await sesClient.send(command);
console.log(result);

Чтобы удобно запускать скрипт, установим tsx loader:

npm install --save-dev tsx

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

AWS_ACCESS_KEY_ID=... AWS_SECRET_ACCESS_KEY=... node --import @nodejs-loaders/tsx index.tsx

В консоли увидим ответ от Postbox. Если письмо отправлено успешно, то в ответе будет MessageId.

{
 '$metadata': {
   httpStatusCode: 200,
   requestId: undefined,
   extendedRequestId: undefined,
   cfId: undefined,
   attempts: 1,
   totalRetryDelay: 0
 },
 MessageId: 'D8BT2CX3IDK2.2HZQ4CE0E8CRL@ingress1-sas'
}

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

ИИ-агенты могут убить привычный нам Интернет, e-commerce и заодно порушить весь рекламный рынок

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

Но с приходом в нашу жизнь ИИ-агентов эта модель устаревает:

• ИИ-агенты не реагируют на рекламу так, как люди. Они не подвержены эмоциям, не кликают на баннеры и не нуждаются в вдохновляющих слоганах.

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

• Сайты становятся интерфейсом для ботов, а не для людей: ИИ-агенты требуют структурированных данных, а не красивых витрин и описаний.

И по мере того, как ИИ-агенты будут все чаще совершать покупки в интернете вместо нас, встает вопрос изменений не только привычной инфраструктуры E-commerce, но и в ценности диджитал рекламы в сети.

Руководители e-commerce-компаний уже называют массовое появление ИИ-агентов «экзистенциальной угрозой» для всей отрасли. Стартап New Gen предлагает решение, позволяющее адаптироваться к этой новой реальности, предоставляя разные интерфейсы для людей и агентов, что помогает брендам хоть на первых порах не потерять позиции на рынке электронной коммерции.

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

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

А еще в этом же видео профессор Эндрю Ын говорит о подходе "кубиков Лего", как о современном принципе построения сложных систем из множества готовых инструментов и модулей, о чем я буквально на днях писал на Хабре, правда в другом контексте, как о способе создавать и монетизировать свои микро-продукты.

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

Контент сайтов будет генерироваться ИИ в реальном времени под конкретного пользователя или агента. А интерфейсы станут «невидимыми», взаимодействие будет происходить через голос, а там глядишь и через нейроинтерфейсы.

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

Опять попробовали React Native и снова решили, что не хотим его внедрять у себя 🧐

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

Перед нашей командой стояла задача: написать код один раз, собрать под три платформы и встроить в существующие нативные и веб-приложения. Решили поэкспериментировать с React Native: до этого мы «щупали» фреймворк в 2018-м, но делали новое приложение, опыта разработки SDK у нас не было. Отправились гуглить и узнавать, как это сделать. Начали с разработки под Android, потом подключили в веб, и уже финально — iOS, в котором практически всё заработало по дефолту.

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

Вот что мы поняли при разработке:

● Обязательно нужна единая дизайн-система под все три платформы под React Native и библиотека компонентов. А ещё — команда из фронтенд и мобильных разработчиков под iOS и Android: одни будут поддерживать часть React Native, которая относится к нативной платформе, другие — писать бизнес-логику и UI.

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

Результаты нашего эксперимента

Хоть и ушло на работу с React Native несколько кварталов, мы решили не внедрять его. Было ли нам обидно? Нет, потому что благодаря эксперименту мы:

✔ Закрепили опыт, что фронтенд-разработчики могут писать на React Native.

✔ Поняли, как всё работает изнутри, какие у фреймворка плюсы и минусы.

Будет ли применимо для нас в будущем — время покажет. Возможно, для новых продуктов это рабочая схема, сейчас — экономически неоправданно.

😎 Кастомный signal в Angular

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

И вот, как-то я в очередной раз писал подобные строки:

isOpened = signal(false);

toggle() {

  this.isOpened.update(value => !value);

}


#isOpenedEffect = effect(() => {

  console.log('New state:', this.isOpened())

})

- и подумал: 'Было бы удобно, если бы был булевый signal с методом toggle'

В этом не было прям сильной необходимости, однако было бы немного удобнее (процентов на 10 😅). И появилась идея написать свой сигнал (реализация на фото)

Пример, согласен, так себе. 

👍🏼 меньше кода, более аккуратно

👎🏼 всей команде придется подстроится

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

💬 А какого сигнала не хватает вам?

Больше об 🅰️ngular в моём Telegram-канале

Google выпустила свой бесплатный генератор сайтов и приложений Stitch:

• генерит простые, но стильные дизайны; 

• под капотом мощнейшая модель Gemini; 

• экспорт в Figma буквально парой кликой 

• есть специальная фича Copy to Figma; 

• любой элемент можно отредактировать.

RxJS: Почему shareReplay(1) может вызывать утечки памяти

Если вы используете shareReplay(1) в RxJS, будьте осторожны — в некоторых случаях это может привести к утечкам памяти! Давайте разберёмся, почему так происходит и как это исправить.

❌ Проблема с shareReplay(1). По умолчанию:

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

• Не отписывается от источника, когда никто не слушает (например, interval, Subject, HTTP-запросы)
  Это означает, что данные могут накапливаться, а ненужные Observable продолжают работать в фоне

✅ Решение: shareReplay({ bufferSize: 1, refCount: true })

• Добавление refCount: true решает проблему:

• Автоматически отписывается, когда не остаётся подписчиков

• Очищает буфер, предотвращая утечки памяти

💡 Ключевые выводы:

1. shareReplay(1) - Может оставлять "висящие" подписки

2. shareReplay({ bufferSize: 1, refCount: true }) - Безопасная альтернатива

Я обнаружил эту проблему во время code review вчера, а впервые узнал о ней из видео Dmytro Mezhenskyi.

🔗 P.S. Самое время быстро исправить это в наших проектах!)

Больше об 🅰️ngular в моём Telegram-канале

"mergeMap: Секрет управления параллелизмом в RxJS"

Вы знаете mergeMap, concatMap, exhaustMap и switchMap — но знали ли вы, что только один из них принимает второй аргумент?

👉 mergeMap уникален благодаря параметру concurrent, который ограничивает параллельные подписки. Это как "регулятор скорости" для ваших Observable.

_____

Пример использования (контролируемая загрузка файлов):

Представьте, что вам нужно:
1️⃣ Обработать несколько файлов
2️⃣ Избежать перегрузки браузера/API
3️⃣ Сохранить порядок загрузки

В этом случае второй аргумент mergeMap становится незаменимым:

from(fileList).pipe(
  mergeMap(
    file => uploadFile(file), // функция загрузки
    3                        // одновременно только 3 файла
  )
).subscribe();

_____

Преимущества mergeMap с concurrent:
✅ Предотвращает перегрузку API
✅ Оптимизирует нагрузку на сеть
✅ Сохраняет отзывчивость интерфейса
_____

Знали ли об этой возможности? 😉

Больше об Angular в телеграмм-канале

Управление методами в зависимости от окружения в 🅰️ngular

Бывают случаи, когда нужно, чтобы определенные методы работали только:

• 🛠️ В dev-режиме (например, фича-тогглы, дебаг-логи, экспериментальные функции)

• 🚀 В prod-режиме (аналитика, мониторинг, продакшен-логика)

Вместо того чтобы писать if (isDevMode()) {...} везде, можно использовать декораторы Angular для более чистого и декларативного подхода.

_____

Одно из решений:

export function EnvMode(mode: 'dev' | 'prod') { return function (_: unknown, __: string, descriptor: PropertyDescriptor) { const originalMethod = descriptor.value; descriptor.value = function (...args: unknown[]) { const shouldExecute = mode === 'dev' ? isDevMode() : !isDevMode(); if (!shouldExecute) return; return originalMethod.apply(this, args); }; return descriptor; }; }

_____

Как использовать:

@EnvMode('dev') public setFeatureToggle(): void { // Сработает только в dev-режиме } @EnvMode('prod') public sendAnalytics(): void { // Сработает только в prod-режиме }

_____

🤔 А вы создавали кастомные декораторы? Зачем?

Больше про Angular в тг канале

Я сделал своего первого Telegram-бота — WebCheck. Мониторинг сайтов прямо в Telegram⁠⁠

Привет!

Меня зовут Александр, и я решил поделиться с вами своим первым публичным Telegram-ботом.
Я давно хотел реализовать что-то полезное и практичное — в итоге получилось то, чем сам теперь пользуюсь каждый день.

Знакомьтесь: WebCheck — бот, который следит за доступностью сайтов, SSL-сертификатами и доменами.

🧠 Что умеет бот

• Проверяет, доступен ли сайт (HTTP-код);

• Показывает, сколько дней осталось до окончания SSL-сертификата;

• Проверяет, когда истекает регистрация домена;

• Присылает уведомление, если:

  • сайт стал недоступен;

  • до окончания SSL-сертификата осталось 14 дней или меньше;

  • до окончания регистрации домена осталось 14 дней или меньше;

• Позволяет экспортировать логи и список сайтов в CSV;

• Есть админ-интерфейс для контроля всех добавленных сайтов.

⚙️ Как пользоваться

1. Открываете бота 👉 @ITSync_WebCheckBot

2. Жмёте «Start» или пишете /start

3. Просто отправляете ссылку на сайт (например: example.com, ozon.ru или https://wildberries.ru)

4. Получаете оповещения, если с ресурсом что-то не так

Бот абсолютно бесплатный, ничего не требует — просто добавил сайт, и бот сам всё контролирует.

👨‍💻 Технически

Бот написан на Python с использованием:

• aiogram v3

• PostgreSQL

• APScheduler

• Shell-команд (whois, curl, openssl) для большей точности

Контейнеризирован в Docker, база хранится вне контейнера, а вся логика максимально простая и прозрачная.

🔐 А ещё я сделал бот для дешифровки VNC

Если вдруг работаете с .vnc файлами или UltraVNC — может пригодиться мой мини-инструмент:
@DecryptVNC_bot — он расшифровывает VNC-пароли прямо в Telegram.

🙏 Буду рад, если протестируете

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

Спасибо, что прочитали.
Бот тут 👉 @ITSync_WebCheckBot
И ещё один на всякий 👉 @DecryptVNC_bot

🚀 291 установка за месяц. Как мы запустили браузерное расширение «Rar File Opener»

Расскажу про создание нового продукта — расширения для открытия RAR-архивов прямо в браузере. Простое решение проблемы, когда средствами ОС RAR не открыть.

Результаты за 30 дней:

- 291 установка

- 185 активных пользователей

Все это без каких-либо вложений в маркетинг.

Как мы это сделали?

1️⃣ Нашли идею в https://chrome-stats.com.

2️⃣ Проверили запросы в Google и Chrome Store. Люди ищут способы извлечения RAR архивов по запросам "rar extractor", "rar file opener" и т.д. Конкуренция в Chrome Store при этом низкая.

3️⃣ Разработали простое расширение, которое:

- Открывает RAR прямо в браузере (а также ZIP, 7z, TAR, GZ, TAR.GZ и другие форматы)

- Не крадёт данные (работает локально)

- Работает с несколькими архивами

У нас процесс уже отлажен:

✅ Разработали MVP

✅ Сделали иконки, промо картинки и лендинг

✅ Сделали SEO-описание + перевод на 55 языков

✅ Тесты и фикс багов

На все 3-4 недели.

Копаем ил дальше в поисках идеи нового продукта! 😁

Инди-хакеры: стартапы из 💩 и 🥢 - канал про то, как два простых IT-шника запускают стартапы без инвестиций и смузи.

Angular Hack: Цикл без данных (в тэмплейте)

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

Вот мой способ (по крайней мере, я нигде такого не видел):

@for (_ of [].constructor(10); track $index) {
<div class="item"></div>
}

Используется Array.constructor, чтобы создать пустую массив фиксированной длины, который @for может перебрать по индексам.

Плюсы ✅

• Чудо-код (удивит коллег)

• Минимум кода (не нужно объявлять массив в компоненте)

Минусы ⚠️

• Чудо-код (может ненадолго ввести в ступор чающего код человека)

Конечно, можно просто использовать Array.from({length: 10})... но так все делают, не интересно)

Норм тема? Как считаете?

Эвристики Нильсена помогали нам строить интерфейсы прошлого.
Но с приходом ИИ, интерфейс это результат.

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

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

Я собрал 10 новых эвристик — ориентиров, по которым сегодня должен проектироваться каждый современный продукт.

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

Новые Эвристики

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

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

Введение

ИИ-технологии радикально изменили не только способ решения задач, но и глубинные ожидания пользователей. Современный пользователь — это человек с новой "прошивкой": он уже знает, как быстро и эффективно может быть выполнена задача, если задействован ИИ. Он ждёт не функциональности, а результата. Не интерфейса, а исполнения. Не фич, а магии.

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

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

1. Результат вместо функции

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

Продукт не инструмент — он должен полностью решать задачу.

2. Мгновенная реакция как базовый UX

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

Если пользователь может подумать: "почему это ещё не сделано?" — вы уже опоздали.

3. Нулевая кривая обучения

Продукт должен быть понятен с первого контакта. Объяснение это уже трение.

Лучший онбординг — это его отсутствие.

4. Контекст из коробки

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

Контекст — это теперь задача системы, а не человека. Это задача и ответственность продукта, а не пользователя.

5. Адаптация, а не навигация

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

Нет смысла в грамотной структуре продукта, если есть интуитивный маршрут.

6. Автоматизация на лету

Повторяемые действия должны исчезнуть. Если пользователь должен делать что-то повторно, значит, система не справилась. Рутина не должна даже возникать. Пользователь ждёт, что система предположит следующий шаг и выполнит его.

Максимальная автоматизация — не функция, а базовое обязательство продукта.

7. Оплата за результат, а не доступ

Модель монетизации должна соответствовать восприятию ценности. Пользователь хочет платить за решенные задачи, а не за лицензии или фичи. 

Деньги платят не за возможности, а за результаты.

8. Минимизация интерфейса

Интерфейс не должен быть в фокусе. Лучший интерфейс — это невидимый интерфейс, максимально простой интерфейс.

Чем меньше пользователю приходится изучать интерфейс, тем лучше продукт.

9. Проактивная коммуникация

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

Пассивный продукт — это продукт прошлого.

10. В ожидании чуда

Пользователь запоминает продукты, которые сделали больше, чем он ожидал. Пользователь хочет не просто "удобства", а лёгкого чуда. Это рождает вау-эффект, лояльность и доверие.

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

***

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

За два года научился проектировать и создавать новые продукты за 6 дней с помощью нейросетей, теперь всем показываю как я это делаю => 6 дней