Представлен сайт, где можно летать по миру на самолётике — благодаря 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.
Провели психологические опросы до и после заданий (спойлер: уровень стресса участников не изменился) и когнитивное интервью после.
Ключевые результаты:
Проявилась часть проблем, о которых мы уже знали и исправили в версии редактора 3.5. Например, более удобное выделение ячеек таблицы без лишнего клика.
Получили оценки пользователей: лёгкость и чёткость интерфейса.
Подтвердилась необходимость в новом поиске по функциям, к которому прибегали участники, когда что-то не получалось найти, или они не знали, как выполнить задачу.
Выявлены новые точки роста для развития продукта
P.S. Большая благодарность Елене Артёменко из лаборатории социальной и когнитивной информатики ВШЭ за эту коллаборацию! А если хотите узнать больше о фронтенде и UX-исследованиях — ждем вас 26 июня на Frontend&UXTalks!
Опубликована база по веб-разработке от Microsoft. В учебном курсе от компании представлено 24 урока, где разбирается всё от основ веба, работы браузеров, сетевых протоколов до HTML, CSS и JS. Всё обучение ориентировано на практику. После каждого раздела есть тесты и интерактивные кодинг-задачи. Также есть несколько пет-проектов, которые можно реализовать после обучения и положить себе в портфолио.
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 для того чтобы запускать модели. Чтобы потетстить решил запилить новое приложение для работы с промптами - действовал по принципу:
Идея и этические принципы
Палитра и дизайн система на основе идеи и принципов
План работы
Имплементация через агентов + доп ресерчи чтобы агенты понимали какую информацию брать.
Удалось собрать прототип за 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 и очень давно не обновлял).
Основная идея в том, чтобы:
Как можно больше проработать паттернов вайбкодинга
Как можно качественнее научиться работать с дизайнерской точки зрения
Научиться учить агента новой информации (новый пишу на jaspr - а на нем крайне мало информации - и скорее всего не обучалась ни одна модель, поэтому вайбкодить на нем тяжело - если агенту дать задачу без правил и промптов - он не сможет завершить задачу и закопается в ошибках).
Пока что удалось сделать немного - восстановил навыки промптинга (которые прокачивал в прошлом году)
Восстановил часть промптов которые были раскиданы по проектам.
Частично удалось распараллелить работу (используя окна и табы агентов в cursor) и научиться давать относительно автономные задачи (по принципу PDSA (Plan Do Study Act))..
Исходный код открытый, поэтому буду делиться результатами когда завершу делать :) (надеюсь что скоро)
Пока что было две идеи:
Сделать в виде интерактивной игры (получились вырвиглазные кнопки
Каким-то образом придумать бенто..
Сложность с бенто и с игрой в том, что если всем моделям тяжело делать даже по картинке ассимитричные вещи и то, на чем они не обучались.
Некоторый текст и данные на картинке ниже абстрактные.
Спасибо за ваше время и хорошего дня!
P.s.: почему-то на хабре нельзя загрузить больше одной картинки в пост:(
P.p.s.: почему-то нельзя опубликовать публикацию если хоть раз проставил галочку запланировать..
Ближайшие события
Сжимаем видое без потери качества — релизнулся топовый компрессор SqueezeVid:
Сжимает видео, не теряя ни единого пикселя — качество останется на высочайшем уровне.
Работает со всеми популярными форматами, включая MP4, MOV и AVI.
Можно конвертировать ролик в нужный формат и даже контролировать степень сжатия.
Вся обработка происходит локально, прямо на ПК пользователя
Без ограничений, без регистрации, бесплатно.
Почему мы решили делать именно Конструктор форм?
Т.к. мы пилим продукты и нам важна Обратная связь от пользователей - мы ее собираем в Google Forms, они оч крутые, но есть пара нюансов:
1) Обработка персональных данных по закону должна быть в РФ. Штраф до 500к рублей! И т.к. мы хотим делать бизнес на РФ - нам нужно использовать оператора из РФ.
2) Мы сейчас собрали таблицу куда приходят все “Данные” от наших иностранных пользователей.
У нас сейчас 6 таблиц, только с 3 расширений, дальше будет больше.
Ходить по страницам не так удобно как у всех топовых сервисов по созданию форм.
Мы хотим видеть одну таблицу с сортировкой по последним и фильтрами по всем ответам/заявкам.
3) Уведомления в телеграм.
4) Встроить оплату и другие виджеты.
5) Кастомные домены.
Почему все сообщества инди-хакеров в России платные?
Давайте создадим свое бесплатное комьюнити для всех 👇👇👇
🖼 🚀 Я почти всегда выбираю ISR в Next.js для контентных сайтов.
Вот почему:
SSR:
- Каждый запрос = генерация страницы
SSG:
- Обновить контент = пересобрать весь проект
- При 1000+ страниц билдится часами
ISR - лучший вариант:
- Не генерит страницы сразу. Только по запросу.
- Ключевой параметр: revalidate - определяет, как часто Next.js должен перегенерировать страницы.
Например revalidate: 60 - страница обновляется раз в 60 сек, а между этим - юзер видит кэш из памяти.
Для некоторых контентных сайтов норма обновления данных 8-24 часа. Данные будут в оперативной памяти все это время.
💡 Фишка для SEO:
После деплоя (CI/CD) - страницы прогреваются скриптом, чтобы не ждать первого захода.
Это нужно чтобы поисковые боты видели всегда лучшую версию сайта, а не ждали прогрузки кеша.
📌 Вывод:
Если тебе не нужен real-time обновления сайта - ISR закрывает почти все потребности.
А чем пользуешся ты? Пиши 👇
Представлен сервис для удаления фона с необычным дизайном — ваша фотка буквально отправляется в стирку. Работает просто: закидываете картинку в машину, пару секунд наблюдаете за гипнотизирующим барабаном и забираете PNG-шку. Дизайнеры познают дзен — здесь.
Apple выпустила тактильный трейлер фильма F1, улучшенный с помощью вибраций iPhone.
Если у вас iPhone под управлением iOS 18.4 или более поздней версии, на вкладке Apple TV Plus приложения TV теперь есть трейлер предстоящего фильма Брэда Питта F1, который теперь улучшен с помощью вибраций, создаваемых современным компонентом Taptic Engine в iPhone.
Пользователи могут не только почувствовать обороты двигателя болида F1, но и более тонкие события в трейлере, такие как щелчок ремня безопасности и нажатие кнопок на рулевом колесе.
«В одной компании я была свидетелем того, как сотрудник в свой первый день вышел перепарковать автомобиль и не вернулся. Причина: новичка не познакомили с командой, не назначили наставника, не объяснили, чем ему предстоит заниматься. Вместо этого HR-менеджер привел его в опенспейс и оставил на несколько часов без внимания… За это время сотрудник решил, что это не его компания. И я его не осуждаю😅»
Это история из статьи Гузель «Онбординг здорового дизайнера» — дизайнера внутренних продуктов в Альфа-Банке. Не так давно она сама стала наставником для новичка и чтобы ситуация из истории не повторилась, сделала онбординг-страничку, где собрала всё, что может помочь в адаптации.
И благодаря доке новичок не сбежал, а прошел онбординг весело и бодро.
А в статье поделилась шаблоном этой странички.
Заходите, читайте, берите на вооружение, шаблон работает.
