Дизайн

🛠 День 10: Разработка полным ходом.

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

📱 Мобильная версия

• Полнофункциональный интерфейс на телефоне- Можно создавать формы и просматривать ответы прямо с телефона

🔧 Конструктор форм

• Drag & Drop

• Автосохранение

• Заголовки (title, description)

• Брендинг: обложка, логотип (картинка, текст или эмодзи)

• 20+ типов полей: текст, email, телефон, рейтинги, файлы, дата, время

• Бизнес-поля: ИНН, ОГРН, КПП, БИК, СНИЛС, паспорт - с валидацией и проверкой хеша

• Рейтинги: 1-5 звёзд, 1-10

🌐 Переводы

• Уже есть RU / EN- Скоро сделаем ещё 48 языков

🗂 Папки и доступы

Папки с правами доступа - удобно делиться с командой

Уровни доступа:

• Владелец - полный контроль

• Администратор - всё, кроме удаления папки

• Редактор - формы и ответы

• Редактор форм - только формы

• Оператор - только просмотр/обновление ответов

• Платежи - доступ только к платежам

📋 Управление формами

• Поиск, фильтрация, сортировка

• Дублирование и удаление

• Шаблоны

🔗 Публикация

• Короткие ссылки (/f/abc1234)

• QR-коды

• Виджет для встраивания в сайт (iframe)

• SEO-метатеги

• Превью формы в соцсетях (OG, Twitter) с картинкой

• SSR-рендеринг форм

📊 Ответы и аналитика

• Фильтрация по дате, форме, IP

• Экспорт ответов в CSV

📎 Файлы

• Поддержка 20+ форматов

• Превью: изображения, PDF, CSV, текст и др.

Как я случайно сделал ферму в Telegram с помощью ИИ

— История одного бота, картошки и чёртовой тыквы

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

Но началось всё, как ни странно, с Таро. Да-да, карт Таро. Тех самых.

Первая попытка: гадать и страдать

Где-то в начале года я решил сделать Telegram-бота, который бы умел раскладывать карты Таро, делать натальные карты и выдавать предсказания на день. Казалось бы, звучит просто. Особенно если рядом есть ChatGPT, который может на ходу генерировать описания карт и писать код на Node.js.

Зарядка с утра: — GPT, напиши функцию для расчёта Луны в Скорпионе. — GPT, как сделать inline-кнопки в grammY? — GPT, почему Heroku опять всё уронил?

И вот бот заработал. Люди заходят, тянут карту дня, шлют благодарности… и уходят. На следующий день — снова тяни карту. Через неделю — всё. Надоело.

Я понял: бот с Таро работает, но удержать людей в нём сложно. Там нет жизни. Там нет... морковки.

А потом я вспомнил старую ферму

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

И вот я подумал: а что, если скрестить эту старую добрую механику с Telegram-ботом?

Чтобы всё было просто:

• Никаких установок

• Играть можно прямо в чате

• И чтобы всегда был шанс насадить кукурузу, а не просто наслаждаться жизнью

Начало новой жизни

Запустил первого бота. Добавил регистрацию, посадку капусты и сбор. Подключил базу PostgreSQL. Всё это — руками и с подсказками ИИ (да здравствует Cursor AI, GPT и граммY).

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

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

Что дальше?

Это только начало. Я хочу рассказать:

• Как ИИ помогает не сойти с ума, когда у тебя 500+ игроков и баг в 3 ночи

• Как запускались тыквенные фестивали и почему это был трэш

• Как устроен баланс в экономике фермы

• И как создать клановую систему, когда никто не читает туториал

Если интересно — подписывайся на продолжение. А если хочешь сам потыкать бот — вот: 👉 Веселая Ферма

Следующая часть будет про то, как я балансировал экономику в игре, используя google sheet, интуицию и крик в подушку, почему Доярка Жанна названа в честь жадной хозяйки квартиры, и откуда взялся Председатель СНТ в образе Якубовича.

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

Спустя 26 лет чуть не истёк срок действия домена half-life3.com. Домен был создан ещё в 1999 году и раньше перенаправлял на сайт The Orange Box. Однако 28 июня домен прекращал своё существование, из-за чего некоторые фанаты начали бить тревогу и даже связались со службой поддержки Valve, которая сообщила, что домен в безопасности — его продлили некоторое время назад.

Представлен сайт, где можно летать по миру на самолётике — благодаря Google Картам. Города полностью трёхмерные — для полётов доступны Париж, Токио, Рио, Брюссель и другие города.

Додекаэдр из символов для мини-игры "Игра с Нулём»".

Бросаешь 12-гранный кубик: на 11 гранях - ресурсы, а на одной - полное обнуление прогресса в основной игре. Рискнули бы?

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

        // Verteсes
        Vector3[] verts = new Vector3[] {
            new Vector3(0.577350f, 0.577350f, 0.577350f),   // v1
            new Vector3(0.577350f, 0.577350f, -0.577350f),  // v2
            new Vector3(0.577350f, -0.577350f, 0.577350f),  // v3
            new Vector3(0.577350f, -0.577350f, -0.577350f), // v4
            new Vector3(-0.577350f, 0.577350f, 0.577350f),  // v5
            new Vector3(-0.577350f, 0.577350f, -0.577350f), // v6
            new Vector3(-0.577350f, -0.577350f, 0.577350f), // v7
            new Vector3(-0.577350f, -0.577350f, -0.577350f),// v8
            new Vector3(0, 0.934172f, 0.356822f),           // v9
            new Vector3(0, 0.934172f, -0.356822f),          // v10
            new Vector3(0, -0.934172f, 0.356822f),          // v11
            new Vector3(0, -0.934172f, -0.356822f),         // v12
            new Vector3(0.356822f, 0, 0.934172f),           // v13
            new Vector3(0.356822f, 0, -0.934172f),          // v14
            new Vector3(-0.356822f, 0, 0.934172f),          // v15
            new Vector3(-0.356822f, 0, -0.934172f),         // v16
            new Vector3(0.934172f, 0.356822f, 0),           // v17
            new Vector3(0.934172f, -0.356822f, 0),          // v18
            new Vector3(-0.934172f, 0.356822f, 0),          // v19
            new Vector3(-0.934172f, -0.356822f, 0)          // v20
        };

        // Calc edges
        const float edgeLength = 0.7136f;
        const float epsilon = 0.0001f;
        var edges = new List<(int a, int b)>();
        Vector3 v1, v2;
        float dx, dy, dz, dist;

        // Check all pairs of vertices
        for (int i = 0; i < verts.Length; i++)
            for (int j = i + 1; j < verts.Length; j++) {
                v1 = verts[i];
                v2 = verts[j];
                dx = v2.x - v1.x;
                dy = v2.y - v1.y;
                dz = v2.z - v1.z;
                dist = Mathf.Sqrt(dx * dx + dy * dy + dz * dz);
                if (Mathf.Abs(dist - edgeLength) < epsilon) 
                    edges.Add((i, j));
            }

        // Faces
        int[,] facesIDS = new int[12, 5] {
            { 0, 16, 1, 9, 8 },
            { 12, 0, 16, 17, 2 },
            { 8, 0, 12, 14, 4 },
            { 1, 16, 17, 3, 13 },
            { 9, 1, 13, 15, 5 },
            { 10, 11, 3, 17, 2 },
            { 2, 12, 14, 6, 10 },
            { 3, 11, 7, 15, 13 },
            { 6, 14, 4, 18, 19 },
            { 4, 8, 9, 5, 18 },
            { 5, 15, 7, 19, 18 },
            { 6, 19, 7, 11, 10 }};

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

МойОфис Frontend&UX Talks уже начался!

Самое время смотреть и задавать вопросы спикерам в чате митапа!

Митап посвящен главным вызовам и проблемам в сложных интерфейсах. Спикеры расскажут о самых разных аспектах фротенда в 2025 году: от айтрекинга и других методов исследований до реактивного программирования и СSS-спецификаций.

Сам митап разделен на две категории: JavaScript и UX. В каждой из них, помимо наших специалистов, есть ребята и из других компаний: Лаборатория Касперского, Контур, Alpha Research Center. Всего на встрече будет семь докладов – их расписание можно посмотреть здесь.

Смотрите митап прямо здесь:

Также трансляцию можно смотреть на Youtube и ВК.

Заинтересовало? Тогда скорее переходите в чат митапа. Здесь можно задать вопросы спикерам, и получить раньше остальных доступ к записи выступлений :)

Как студенты с айтрекером изучали наш текстовый редактор

Июнь стал месяцем айтрекинга в UX-команде МойОфис. Сначала у нас прошло совместное исследование со студентами ВШЭ, а в ближайшие дни мы проведем крупный митап, где поговорим о создании и анализе сложных интерфейсов, в том числе с помощью технологий отслеживания взгляда.

Важный анонс: 26 июня пройдет онлайн-митап МойОфис Frontend&UX Talks, на котором JS-еры, дизайнеры, продакты и аналитики соберутся, чтобы обсудить все насущные проблемы и нюансы современного фронтенда. Кроме наших экспертов, на митапе будут ребята из Лаборатории Касперского, Контура и Alfa Research Center!

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

Еще немного о совместном исследовании со студентами:

4 июня в нашем петербургском офисе прошла презентация результатов совместного исследования с лабораторией социальной и когнитивной информатики ВШЭ в рамках учебного сотрудничества. Студенты курса «Айтрекинг в UX-аналитике» провели глубокое тестирование текстового редактора МойОфис 3.4 с обновлённым интерфейсом.

Методология:

• Определили самые востребованные задачи у студентов и на их основе составили задания.

• Использовали носимый open-source айтрекер PupilLabs.

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

Ключевые результаты:

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

2. Получили оценки пользователей: лёгкость и чёткость интерфейса.

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

4. Выявлены новые точки роста для развития продукта

P.S. Большая благодарность Елене Артёменко из лаборатории социальной и когнитивной информатики ВШЭ за эту коллаборацию! А если хотите узнать больше о фронтенде и UX-исследованиях — ждем вас 26 июня на Frontend&UXTalks!

Опубликована база по веб-разработке от Microsoft. В учебном курсе от компании представлено 24 урока, где разбирается всё от основ веба, работы браузеров, сетевых протоколов до HTML, CSS и JS. Всё обучение ориентировано на практику. После каждого раздела есть тесты и интерактивные кодинг-задачи. Также есть несколько пет-проектов, которые можно реализовать после обучения и положить себе в портфолио.

Британское правительство потратило более £500 тысяч на обновление логотипа сайта gov.uk, ограничившееся сменой цвета и перемещением точки. Новое оформление, разработанное агентством M&C Saatchi, вызвало насмешки чиновников и критику со стороны общественных организаций.

20+ кейсов с изображениями в ChatGPT. Или экономим 100,000₽+ на дизайнерах

Так как в пост можно загрузить только одну фотографию, то я все упаковал в большую статью https://habr.com/ru/articles/920274/

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

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

Внутри статьи ⤵️

Мои примеры с лампой-кроликом — взял один объект из комнаты и показал 10+ способов его использования

• Превратил в робота-маскота

• Сделал комиксы про морковку

• Создал стикерпак для Telegram

• Нарисовал карточки товаров

• Сгенерировал 3D-версии

В статье рассказал подробно, что все еще плохо работает в генерациях

❌ Плохо работает с кириллицей (артефакты в тексте)
❌ Галлюцинирует на сложных сценах
❌ Точечные правки работают коряво
❌ Лица меняются между итерациями
❌ Размываются мелкие детали

Так как в пост можно загрузить только одну фотографию, то я все упаковал в большую статью https://habr.com/ru/articles/920274/

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

Код.

JavaScript, дизайн-системы и рок-н-ролл — что такое фронтенд в 2025 году? 

Что происходит, когда в одном месте собираются JS-еры, UX-дизайнеры и исследователи? Получается Frontend&UX Talks!

Без сложных интерфейсов в фронтенде сегодня никуда: продукты становятся все масштабнее, а требования – все выше. Для всего этого нужны свежие и эффективные решения, которые ускорят разработку, и помогут провести релевантные UX-исследования.

Чтобы обсудить эти темы, мы в МойОфис пригласили ребят из разных компаний: Alfa Research Center, Лаборатория Касперского и Контур.

Всего на митапе будет 7 докладов, где расскажем:

• как реактивное программирование и RxJS меняет разработку – и какие у него есть нюансы;

• какие свежие css-спецификации могут упростить ежедневный кодинг;

• как «редизайнить» сложные интерфейсы: рассказ на личном опыте переосмысления визуала настольных редакторов практически с нуля;

• что за методы UX-исследований использует финтех сегодня – и какие из них можете перенять и вы :)

и многое другое, что поможет в работе со сложными интерфейсами!

Если тебе близки эти темы — приходи 26 июня в 15:00. Регистрация и подробности по ссылке.

Обновил сайт знакомств для айтишников

Наконец-то!
Уже 13 лет бесплатно ищет половинки. И без рекламы.

Ушел с jquery и bootstrap - перешел на alpine и tailwindcss.
Поменял дизайн на более современный и удобный, как мне кажется.

Знакомства для айтишников - просто наберите в поисковике (он всегда первый), ссылку не буду давать.

Как было раньше можно посмотреть в архиве интернета, с 2012 года.

Часть 2: итоги недели разработки вайбкодинга с агентами

Прошлый пост тут

1️⃣ Текущий прогресс по xsoulspace.dev привел к тому, что обнаружил что есть закономерность какие именно модели хороши для использования в проектировании layout страницы (спойлер - не записал какие 🤦‍♂️ кажется использовал Claude 4.0 thinking + Gemini 2.5 Pro).

Что попробовал сделать : нарисовал простой wireframe image -> сконвертировал в ACSII art, и затем скормил LLM для более корректного восприятия layout.

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

2️⃣обновил все flutter библиотеки, last answer, word by word, budget app до flutter 3.8 - пользовался агентами в окошках. В некоторых случаях правил руками, но в большей части работал по принципу PDSA (Plan Do Study Act), где я разрабатывал план, а агент по нему шел, потому изучал результаты и т.д.
Вывод - нужно сильнее нарабатывать промпты.

3️⃣внезапно получил спам-рассылку-письмо с возможностью потестить on device API для того чтобы запускать модели. Чтобы потетстить решил запилить новое приложение для работы с промптами - действовал по принципу:

1. Идея и этические принципы

2. Палитра и дизайн система на основе идеи и принципов

3. План работы

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

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

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

Хотелось сделать нечто среднее между игрой и обычным интерфейсом, но пока не получилось.

4️⃣Создал детальный план и начал прорабатывать новую систему сохранения данных. Для меня это оказалось большой проблемой - потому что Hive, Isar на flutter перестали поддерживаться, а другие библиотеки неудобно использовать (где-то перешел на Sembast).

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

Поэтому решил объединить все идеи и написать одну библиотеку которая будет из коробки давать синхронизацию с гитом, github и папками. Так надеюсь удастся побороть проблему долговечности и надежности хранения данных.
Пока агенты имплементировали 4 этапа из 5 (основную логику провайдеров данных), и как итог - собрал отдельное тестовое приложение (todo), чтобы протестировать работу (отдельный скриншот), понять недостатки и как можно быстрее завершить библиотеку чтобы начать интеграцию во все проекты. Это важно, потому что при одновременной интеграции сразу будет понятно что работает, а что нет, и таким образом будет проще получать feedback и развивать библиотеку качественно.

Спасибо за ваше время и хорошего дня!

p.s.:

Бумаги которые claude нашел по теме и одновременно не по теме)

• Towards Aligned Layout Generation via Diffusion Model with Aesthetic Constraints https://arxiv.org/abs/2402.04754

• CreatiLayout: Siamese Multimodal Diffusion Transformer for Creative Layout-to-Image Generation https://arxiv.org/abs/2412.03859

• Future of edge and on-device AI in gaming https://inworld.ai/blog/ml-advancements-that-will-make-on-device-ai-possible

• MobileExperts: A Dynamic Tool-Enabled Agent Team in Mobile Devices https://arxiv.org/abs/2407.03913

• From Cloud to Edge: Rethinking Generative AI for Low-Resource Design Challenges https://arxiv.org/html/2402.12702v1

• Generative Artificial Intelligence-Enabled Facility Layout Design Paradigm https://www.mdpi.com/2076-3417/15/10/5697

Как дизайнеру найти первую работу без опыта и связей

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

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

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

1. Найти подходящую компанию. Рекомендую обратить внимание на стартапы и компании, где еще нет дизайнера. Стартапы можно найти на Product Radar, а с неудобными сервисами мы сталкиваемся по жизни – им и можно предложить свои услуги.

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

3. Упаковка опыта. Не нужно ждать завершения проекта, чтобы упаковать его в портфолио. Лучше публиковать небольшие задачи сразу. Пример: доработка регистрации, улучшение личного кабинета, добавление фильтров в таблицу заказов. 

4. Параллельный поиск. Вместе с работой над проектом нужно делать по 10-20 откликов в день. Регулярно пополняемое портфолио в этом поможет. Откликаться можно на крупных площадках, как HeadHunter и LinkedIn, и более нишевых – Getmatch, каналы и чаты.

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

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

Попробую публиковать серию постов про мои новые эксперименты с вайбкодингом.

Не использую v0, bolt - так как они совсем почти no-code + генерят react приложения, а мне интересно сейчас проработать поработать с Dart проектами.

Начал с крафта нового сайта для xsoulspace.dev (мой основной сайт по проектам, давным давно писал на flutter и очень давно не обновлял).

Основная идея в том, чтобы:

1. Как можно больше проработать паттернов вайбкодинга

2. Как можно качественнее научиться работать с дизайнерской точки зрения

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

Пока что удалось сделать немного - восстановил навыки промптинга (которые прокачивал в прошлом году)

Восстановил часть промптов которые были раскиданы по проектам.

Частично удалось распараллелить работу (используя окна и табы агентов в cursor) и научиться давать относительно автономные задачи (по принципу PDSA (Plan Do Study Act))..

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

Пока что было две идеи:

1. Сделать в виде интерактивной игры (получились вырвиглазные кнопки

2. Каким-то образом придумать бенто..

Спасибо за ваше время и хорошего дня!

P.s.: почему-то на хабре нельзя загрузить больше одной картинки в пост:(

P.p.s.: почему-то нельзя опубликовать публикацию если хоть раз проставил галочку запланировать..

Сжимаем видое без потери качества — релизнулся топовый компрессор SqueezeVid:

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

• Работает со всеми популярными форматами, включая MP4, MOV и AVI.

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

• Вся обработка происходит локально, прямо на ПК пользователя

• Без ограничений, без регистрации, бесплатно.

Почему мы решили делать именно Конструктор форм?

Т.к. мы пилим продукты и нам важна Обратная связь от пользователей - мы ее собираем в Google Forms, они оч крутые, но есть пара нюансов:

1) Обработка персональных данных по закону должна быть в РФ. Штраф до 500к рублей! И т.к. мы хотим делать бизнес на РФ - нам нужно использовать оператора из РФ. 

2)  Мы сейчас собрали таблицу куда приходят все “Данные” от наших иностранных пользователей. 

У нас сейчас 6 таблиц, только с 3 расширений, дальше будет больше. 

Ходить по страницам не так удобно как у всех топовых сервисов по созданию форм. 

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

3) Уведомления в телеграм.

4) Встроить оплату и другие виджеты.

5) Кастомные домены.

Почему все сообщества инди-хакеров в России платные?

Давайте создадим свое бесплатное комьюнити для всех 👇👇👇