HTML

Завал задач и поиски спасения

Итак, дело было так. Очередной завал на работе, куча задач, мозг кипит. Вспомнил про технику Помодоро — это когда работаешь 25 минут, потом 5 минут отдыхаешь. Простая штука, но реально помогает не выгорать.

Полез искать нормальный таймер в интернете и... знакомая история:

• Либо убого простые

• Либо перегруженные фигнёй

• Либо на английском

• Либо платные

• Либо ещё регистрацию просят

В общем, типичная ситуация: "Да я сам лучше сделаю!" Но проблема в том, что фронтенд я знаю на уровне "поменять текст на странице через консоль разработчика до перезагрузки".

Вспомнил про хайповую штуку

Тут я вспомнил про так называемый "вайб-кодинг" с нейросетями. Да, знаю, что многие к этому относятся скептически, но решил попробовать. Открыл Claude и написал примерно так:

"Старина, сделай мне HTML-страничку с таймером Помодоро. Нужно: таймер на 25 минут, задачи можно добавлять, статистика какая-нибудь и чтоб пикал когда время вышло."

И тут началось волшебство! Claude выдал мне полноценный рабочий прототип. Причём не просто "Hello World", а реально функциональную штуку😉:

• Нормальным таймером

• Возможностью добавлять задачи

• Статистикой

• Звуками

Меня понесло

Ну и дальше меня, конечно, понесло:

• А можешь добавить сохранение в Local Storage?

• А сделай звуки покруче

• А перекрась вот это в зелёный

• А добавь настройки времени

• А мобильную адаптивность

Claude всё это выполнял как послушный джуниор! За час у меня был готов довольно приличный таймер.

Реакция коллег

Показал результат фронтенд-разрабам на работе со словами: "Смотрите, что я за час накатал, вообще без знаний!"

Их реакция:

• 😳 (удивление)

• 🤔 (изучают интерфейс)

• 😯 (ещё больше удивления)

• Нефига себе, ништяк получилося! Реально работает!

Решил довести до ума

После такой реакции подумал: "А почему бы не довести это до продакшена?" И понеслось...

Сейчас можете посмотреть результат: pomo25.ru

Что в итоге получилось:

Для тех, кто хочет настроить под себя:

• Настраиваемые интервалы (любое время, какое хочешь!)

• 10 типов звуков + можно загрузить свой

• Ручное сохранение настроек

• Push-уведомления в браузере

Для обычных людей:

• Добавляешь задачи и следишь за прогрессом

• Видишь статистику: сколько помидорок сделал

• Не забываешь делать перерывы

• Задачи сохраняются автоматически

Про дизайн (не кидайтесь тапками)

Отдельно про дизайн. Да, я знаю, что он специфический. Это не потому что у меня нет вкуса (хотя может и нет 😅), а потому что я специально попросил Claude сделать что-то в стиле киберпанка 90-х.

Получилось ярко, кислотно, с неоновыми цветами и пиксельными эффектами. Возможно, не всем зайдёт, но зато запоминается!

Телеграм-версия

Потом решил пойти дальше и сделал версию для Телеграма: @pomo25_bot

Плюсы:

• Данные синхронизируются через облако Телеграма

• Уведомления приходят от самого Телеграма

• Работает на телефоне как нативное приложение

Минусы:

• Не работает в фоне (об этом ниже)

Проблема с фоновой работой

Единственное, что не смог победить — работу в фоне на мобилках.

Проблема в том, что:

1. Телеграм Web Apps работают в WebView

2. При сворачивании приложения WebView приостанавливается

3. JavaScript перестаёт выполняться

4. Service Workers в WebView работают криво

5. iOS вообще жёстко блокирует фоновые скрипты

В итоге при сворачивании таймер автоматически ставится на паузу. Для полноценной работы в фоне нужно было бы нативное приложение.

Опыт работы с нейросетями

Claude: король прототипирования

В начале Claude был просто космос:

• Быстро понимает что нужно

• Генерирует рабочий код

• Хорошо итерируется

• Не задаёт лишних вопросов

Но потом начались проблемы

Когда проект разросся, Claude начал путаться:

• Исправляет одно, ломает другое

• Забывает контекст больших файлов

• Приходилось делать бэкапы в гите постоянно

Попробовал ChatGPT — ещё хуже! То ли ленился и отвечал "попробуйте перезагрузить страницу", то ли чинил совсем не там, где надо, вообще не понимая что происходит в коде.

Gemini спас ситуацию

Тогда попробовал новый Gemini (у него миллион токенов контекста). И охренел!

Gemini смог:

• Прочитать ВЕСЬ проект целиком

• Найти реальные причины багов

• Переписать проблемные части

• Почистить код от мусора

Реальная польза

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

• Реально стал делать перерывы (раньше мог 3 часа сидеть не вставая)

• Лучше планирую время на задачи

• Меньше выгораю от сложных задач

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

Мораль истории

Современные нейросети действительно могут сильно понизить порог входа в разработку. Даже если ты не знаешь React/Vue/Angular, можно создать полезную штуку.

Но есть нюансы:

• Для прототипов ИИ идеален

• Для больших проектов нужно понимать что делаешь

• Разные ИИ лучше для разных задач

• Git обязателен при работе с ИИ

Итог

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

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

Кто-то ещё экспериментировал с ИИ-разработкой? Поделитесь в комментах!

P.S. Если найдёте баги или будут идеи, пишите. Обратная связь очень ценна!

UPD: Забыл добавить — если кто захочет посмотреть, что получилось: pomo25.ru и @pomo25_bot в Телеграме!

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

В общем сайт конечно ещё в разработке, информация обновляется по мере поступления (так называемые «записки» на скачки), видео из того что под рукой оказалось (2-ое, под названием «Приз Большой летний», искренне рекомендую к просмотру со звуком ;).

Буду рада всем посетителям, их оценкам и замечаниям. 🤗

Попробую выложить название сайта здесь, надеюсь это не запрещено..

www.lug-race.ru

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

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

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

Но если вы создаете игру не на базе html-страниц и сайта, то вместо фразы "которая будет запускаться с html-сайта", вам надо указать типа-платформу игры, или ее среду разработки.

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

ПРАКТИКА.
Вот полный пример запроса для нейросети, чтобы создать саму примитивную игру, которая запускается в виде веб-страницы в браузере.

ЗАПРОС:
Напиши для каждого файла код игры которая будет запускаться с html-сайта. Суть игры следующая.

Объект-игрок, вид которого задается файлом"image1", управляется при помощи клавиш. Клавиши-стрелки определяют направление стороны движения объекта-игрока.

В пространстве игры, рандомно расположены объекты-препятствия, внешний вид которых задается файлом "image2".

Если Объект-игрок задевает объекты-препятствия, то Объект-игрок отскакивает в сторону.

Фон игры задается файлом "image3".

Код созданный для каждого файла, полностью вставляете в текстовый редактор (например Блокнот), и сохраняете с тем названием и расширением, который указала нейросеть.

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

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