Я долго думал, с чего начать этот канал.

Наверное, честнее всего — с простого: я frontend-разработчик, который строит проекты, ошибается, учится, переделывает, снова запускает и постепенно растёт.

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

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

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

Этот канал — мой публичный дневник разработчика.

Если тебе интересно наблюдать, как frontend-разработчик строит проекты с нуля, растёт в процессе и делится всем по-настоящему — добро пожаловать.

Начинаем.

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

Перед тем как собирать новую фичу, я стараюсь накидать маленькую таблицу состояний: loading, empty, error, success, disabled, submitting. Без этого почти любая задача сначала кажется простой, а потом внезапно расползается на кучу мелких правок.

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

С тех пор как я начал выписывать состояния заранее, фичи стали собираться спокойнее. Меньше хаоса, меньше “ой, это тоже надо учесть”, меньше ощущения, что интерфейс разваливается от каждой новой проверки.

Это мелочь, но она реально экономит время. Особенно в тех задачах, которые на старте выглядят “ну там на пару часов”.

Шаблон, который можно прогнать перед любой UI-задачей:

Фича:
Главное действие пользователя:
Что видит пользователь, если данных ещё нет:
Что видит пользователь, если данные пустые:
Что видит пользователь, если запрос упал:
Что происходит во время отправки:
Когда кнопки/поля должны быть disabled:
Что меняется после успешного действия:
Как выглядит самый неприятный крайний сценарий:

Иногда 3 минуты с этим шаблоном экономят больше, чем ещё один быстрый рефактор после релиза.

Один из самых дорогих багов во frontend иногда выглядит как обычная кнопка.

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

Я всё чаще замечаю, что много “сложных” багов на самом деле не про архитектуру, а про отсутствие базовой защиты в момент действия. Если кнопка запускает важный запрос, у неё почти всегда должно быть состояние loading и блокировка повторного клика до завершения.

Это мелочь, но именно такие мелочи делают интерфейс взрослым. Пользователь не думает про isSubmitting, он просто чувствует: продукт собран аккуратно.

Action Block

Готовый каркас для кнопки с защитой от повторной отправки:

import { useState } from "react";

export function SaveButton() {
const [isSubmitting, setIsSubmitting] = useState(false);

const handleClick = async () => {
if (isSubmitting) return;

try {
setIsSubmitting(true);
await saveData();
} finally {
setIsSubmitting(false);
}
};

return (
<button onClick={handleClick} disabled={isSubmitting}>
{isSubmitting ? "Сохраняю..." : "Сохранить"}
</button>
);
}

async function saveData() {
await new Promise((resolve) => setTimeout(resolve, 1200));
}

Мини-проверка, где это стоит добавить сегодня:

отправка форм
оплата
удаление
сохранение настроек
генерация через AI
любые действия, где повторный клик создаёт дубль или ломает порядок

Давно хотел пысать свой какой-то кастомный mcp. Сегодня решил написать его, он нужен был для того чтобы chatgpt сразу брал мои задания из мудла и решал их🏆.

Спойлер не получилос. Почему? Да потому-что надо выключить vpn😁. Не стал забывать головому этим и попробовал работать через локалную модел🔝.

Резултать есть. Но вам же интересно какие трудности были. Да было одна проблема сайт sdo.tusur.ru при входе просит регистрироватся в profile.tusur.ru и только потом вернутся. Но к этому я пришел через 2 часа борбой🤼‍♂️ с chatgpt. но в целом результат не плохой. Создаль репу в гитхабе отправил его туда.

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

Кому интересно можеть скачать и настроить под себя в целом нечего сложного чтобы переписать под свой мудл. Главное надо знать что спрашивать у нейронки😎

https://github.com/tab11pm/sdo-mcp

Заметил, что многие до сих пор проходят мимо NotebookLM, хотя для учёбы и разбора материалов это один из самых недооценённых AI-инструментов.

Если коротко: это бесплатный инструмент от Google, который работает не “из головы”, а по источникам, которые вы сами загрузили.

Например, можно закинуть туда лекции, PDF, Google Docs, презентации, YouTube-видео или просто текст, а потом спрашивать по ним как у преподавателя:
“объясни проще”, “сделай краткий конспект”, “что важно к экзамену?”, “где я могу ошибиться?”

Но самое интересное не только в чате.

NotebookLM может превратить ваши материалы в:

презентацию
тесты и карточки для проверки
ментальную карту
аудиообзор
video overview с narrated slides

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

Главное правило: загружайте хорошие источники.
Чем точнее материалы, тем полезнее ответы.

Мини-промпт для NotebookLM:

Проанализируй все загруженные источники как преподаватель.
Сделай:
1. краткий конспект по главным темам
2. список понятий, которые нужно выучить
3. 10 вопросов для самопроверки
4. объяснение самых сложных моментов простыми словами
5. план подготовки на 3 дня

Оставлю также шпаргалку

За последние 11 дней я поймал странное ощущение: я уже не просто использую AI, а собираю вокруг себя маленькую систему агентов🏆

Что уже автоматизировал:
Агент смотрит моё расписание на timetable.tusur.ru, переносит пары и задачи в TickTick, собирает меню на завтра и делает список покупок😎
Но самое важное для студента: он умеет заходить в Moodle и работать с заданиями почти без моего участия😏

Для этого я сделал кастомный MCP, о котором уже говорил в прошлых постах🔝 Через него агент логинится, читает информацию, скачивает нужные файлы и дальше сам разбирается с задачей.

В коде тоже поменялся подход. Сейчас использую скиллы GSD и Superpowers, чтобы агент меньше галлюцинировал и писал строго то, что нужно. Они не мешают друг другу, а скорее задают нормальные правила работы. И вот это реально меняет разработку. Раньше я был человеком, который пишет код👨‍💻
Сейчас я всё больше оператор: говорю, что добавить, что убрать, где проверить и что переделать😈

Вчера за день собрал себе маленький аналог OneSec под Android.

Не потому что хотел сделать “стартап”. Просто мне нужна была конкретная функция: перед открытием соцсетей остановиться на пару секунд и спросить себя, я реально туда иду или просто по привычке.

Готовые приложения есть, но там подписки, ограничения, чужая логика и не всегда то поведение, которое нужно именно мне. Поэтому решил попробовать вайбкодинг: описал идею, разобрался с Android-нюансами, собрал MVP под себя.

В итоге уже работает перехват соцсетей, экран паузы, блокировка на время, дневной лимит открытий, статистика и автосборка APK через GitHub Actions.

Главный вывод не в том, что “теперь все должны писать свои приложения”.

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

И это очень меняет ощущение от технологий 🙂