Решили с @dusjads поучаствовать в контесте квизлета.

Придумали 2 идеи игры:

1. Загадывается случайное слово. Можно вводить любые слова и смотреть, насколько они далеки по смыслу от загаданного.
Например, если загадано слово “кошка”, то “вода” будет далеко, “собака” ближе, “тигр” — совсем близко.
Для визуализации хотелось отмечать слова точками на карте. Если “кошка” где-то в Мюнхене, то “вода” — в Сиднее, “собака” — в Киеве, “тигр” — во Франкфурте.

Для реализации просто строить эмбеддинг, считая word2vec от слов, между векторами считать расстояние, понижать размерность от нескольких сотен до 2 измерений t-distributed stochastic neighbor embedding’ом, рисовать на react-globe.gl’e. Но кажется, такая идея не очень вписывается в формат квизлета, так что решили выбрать вторую.

2. Менее алгоритмическая, но людям было интереснее играть: загаданы N слов длины M, получается сетка M*N. Дальше слова разбиваются на случайные полимино, перемешиваются, цель игры — собрать слова снова.
Первый прототип уже был играбельным, так что остановились на этом.
Казалось, что займёт такая игра пару вечеров — механик мало, всё понятно, писать на Реакте в 2023 должно быть приятно. Оказалось, что гидрация и регегидрация — не панацея, и сейчас хочется просто пойти писать на Vanilla JS / Svelte / htmx. 🙃
Сегодня допишу тесты, завтра напишу про оптимизаци (отдельное спасибо Дане за советы про Next — очень помог)!

Поиграть можно тут (пишите фидбек)!

Видео нарендерил в remotion’e — оказалось удобно, переиспользовал половину компонентов из игры, 90% анимаций — интерполяция каких-то свойств по кардру.

Картинки нарисовал в фигме и анимировал в лотти.

Сама игра написана на реакте, на nextjs, zustand для работы со стейтом, dndkit.com для drag'n'drop'a, jest для тестов, cypress для e2e-тестов. Написал игру довольно быстро, потом посмотрел на производительность в Lighthouse — 27/100. Спасибо Дане за подсказки про оптимизацию фронта.

1. Next использует гидрацию — рендерит статическую страницу, которая показывается пользователю, а потом начинает выполняться JS. Для начальных компонентов (попап и сетка) сверстал статические заглушки (noscript вместо лотти, сетка без логики).
2. Компоненты, которые долго не будет видно вроде результаты игры вынес в ssr: false, чтобы они рендерились, когда игра закончится.
3. Самая популярная библиотека для popup-ов работала плохо, так что переписал всё на html5-dialog.
4. Добавил мемоизацию всем компонентам.
5. Lottie анимации — JSON, описывающий все SVG-трансформации, попробовал сжать их gzip’ом — получилось около 90% оптимизации.
6. Оказалось, что большая часть бандла — проигрыватель lottie-анимаций. Переделал всё на dotlottie, который умеет проигрывать только noscript-анимации. После этого всё уже было оранжево-зелёным, только советовало мне уменьшить размер бандла.
7. Пошёл смотреть минифицированный бандл глазами — огромная часть была занята quizlet-колодами (для игры нужно всего несколько карточек). Вынес всю эту логику в api-route, чтобы они не включались в бандл.

После этого performance score стал близким к 100, так что я успокоился. Отдельно пришлось развлекаться с e2e тестами: drag'n'drop то не регистрировал перетаскивание фигур, то отпускание.

Делали недавно с Даней flowcast — приложение, которое берёт популярные новости, классифицирует по тегам и переделывает в короткие подкасты.

- Новости брали с eventregistry.org
- GPT с промптом Imagine you are a popular podcast host. Read the provided article. Summarize it to a long standalone text, make it engaging for listeners генерирует более-менее короткий текст и одно предложение, описывающее картинку к новости
- Stable Diffusion использует предложение из предыдущего пункта как промпт и генерирует картинку к новости
- Выбирали из кучи вариантов генерации аудио: play.ht и elevenlabs.io — очевидные фавориты, но в итоге остановились на unrealspeech.com — адекватное качество + 1млн символов бесплатно

Приложение написали на Flutter’e — мне очень нравится, но надо привыкнуть к огромной вложенности компонентов. Стейт менеджмент обычно сильно отличается от стандартных frontend-подходов. Riverpod и Bloc сильно спасают, но надо привыкнуть. Производительность получается хорошая. Очень жду, когда доделают impeller под android — анимации совсем будут летать. Даня, кажется, так и не разделил мою любовь и всё ещё предпочитает RN (может, он напишет в комментариях своё мнение).
Сгенерированные аудио и картинки хранили в бэкблейзе — всё храню там, так и не приблизился к лимиту файлов, дают интерфейс S3, так что пользоваться приятно, особенно, если кэшировать всё сверху cloudflare.
Для базы данных пользовались supabase.com — интерфейс похож на firebase, внутри Postgres (концепция firebase мне давно перестала нравиться, а фаундеры супабейса показались очень приятными ребятами).

Так в итоге и не придумали, как нормально запустить приложение. Пару дней назад на PH появился hearbitz.app — похожая концепция, но приложения у них не нашёл, только сайт — посмотрим, что получится у них. 🙂