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 в Телеграме!