ДЕНЬ 139

Переписал все запросы на context, так как мне это показалось намного удобнее. Теперь нет огромного кода с запросом в компоненте — все они хранятся отдельно и просто берутся с помощью useContext. После этого все действия на странице отображаются сразу же (добавление, удаление, редактирование).

Также хочу сделать, чтобы добавление задачи отображалось динамически у другого пользователя (например, в другом браузере).

P.S. Контента долго не было, так как постоянно был в разъездах и крайне мало находился в городе.

ДЕНЬ 140

Пытаюсь сделать вебсокет для динамического обмена тасками между пользователями (в моём случае — вкладками или браузерами).

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

Столкнулся с проблемой: когда страница рендерится, сначала рендерится компонент с вызовом функции для получения всех тасок из базы, который находится в контексте. Мне же нужно, чтобы эта функция запускалась при открытии вебсокета. НО вебсокет — на контексте, и все функции с базой тоже в контексте, соответственно они конфликтуют, и ничего не выходит.

Есть вариант попробовать вынести все функции с базой отдельно — должно прокатить.

Как таковой вебсокет получился: новая таска передаётся, и всё нормально, но пока не отображается у другого пользователя.

ДЕНЬ 141

   Вынес все функции с базой и вебсокетом в отдельные файлы, чтобы избежать конфликтов и это у меня получилось(отчасти). Очень тупил с диспатчем для обращения к базе, пытался в отдельном файле с запросами к БД сделать, но спустя некоторое время понял, что это максимально тупо и вот тут мне впервые пригодился метод .then для асинхронной операции, чтобы передать результат в вебсокет. Также столкнулся с ошибкой, связанной с назначением айдшника, но об этом в видео.

Также пробовал писать бэк на C#, но об этом чуть позже

ДЕНЬ 142
До конца доделал проект. Теперь все работает как и задумывалось. По факту осталось два контекста, но рендер задач идет непосредственно с самого контекста вебсокета, а не локального контекста. В локальном фактически сборка всех функций(функции для базы данных и для вебсокета).

Уже есть идея для нового проекта, но сначала надо сделать макет в фигме для удобства

ДЕНЬ 143
    Макет в Фигме уже готов, осталось пару моментов доделать, и можно будет верстать, но перед этим нужно изучить Laravel.

   На русскоязычном YouTube мало информации о том, как подружить React и Laravel с конкретными примерами сайтов, поэтому нашёл какой-то курс от индуса.

ДЕНЬ 144

🎨 Tailwind CSS
Попробовал писать стили на Tailwind. В чем-то это удобно - не нужно создавать лишние CSS-файлы. Но есть и минусы: иногда накапливается слишком много классов для одного элемента, а стили могут не применяться как надо (хотя это решается добавлением ! перед классом).

⚙️ Laravel + OSPanel
Установил Laravel и OSPanel. Пока фреймворк запускается только через php artisan serve, но это не совсем то, что нужно. Планирую настроить через OSPanel, чтобы бэкенд работал через домен и имитировал реальный хостинг. В дальнейшем, на этот шаблон будет сделана база, чтобы создать полноценную регистрацию и авторизацию пользователей

🔥 WebStorm
Перешел на WebStorm. Показался намного удобнее и функциональнее. Не нужно ставить кучу плагинов - всё необходимое уже есть из коробки.

ДЕНЬ 145
Пока была неделя практики сделал сайт на реакте, возможно, в дальнейшем буду дорабатывать этот сайт и доводить до ума(подключать базу, добавлять больше страниц и тд), но пока нет на это времени.

https://holman52.github.io/Guitar-SP/

Что касается регистрации и авторизации, то уже есть апишка к фронту, но пока на фронте работает только авторизация. Было много ошибок с osp, но об этом позже видос выложу

День 146

✅ Сделал полностью API на Laravel, но с фронтом связал только авторизацию. Была куча проблем с Open Server. Сначала два дня мучился с тем, что неправильно указывал версию PHP в проекте (в Laravel думал, что PHP: 8.2, а оказывается, можно использовать версии от 8.2, то есть 8.4 тоже подойдет). Потом возникли проблемы с драйверами pgsql, и я перешел на MySQL — возникла такая же проблема. В итоге полностью переустановил Open Server, и все стало нормально.

👨‍💻 Сейчас работаю над WebSocket через Laravel Reverb. Суть в том, что имеется пять панелей, на которых нужно запускать определенную игру (URL) от админа. Пока разобрался, как это выглядит по структуре, осталось только написать код. На данный момент я только подключил WebSocket, но пока не понятно, почему сообщение, которое должен выводить WebSocket, отсутствует.

ДЕНЬ 147

Полностью реализовал вебсокет на Laravel Reverb! Было очень много ошибок:

🔧 Проблемы, с которыми столкнулся:
1. Конфликт протоколов — Vite работал на http, а Open Server на https 🌐 
2. Ошибка подключения к приватному каналу 🔒 
3. Ошибка при подключении к каналу присутствия 👥 
4. Узнал, что StrictMode в React может дважды отправлять запросы ⚠️ (так делать не стоит)

📡 Тестирование:
Сначала работал с публичным каналом — отправка сообщений работала идеально ✅. Но с приватным каналом возникли сложности...

🔐 Особенности приватного канала:
- Пользователь обязательно должен пройти аутентификацию 🛡️
- Написал кастомный контроллер, который проверяет:
  - Наличие токена 🔑
  - Корректность названия панели (сравнение с БД) 📋
- Только после успешной проверки происходит подключение к каналу ✅

💡 Важное отличие Reverb: 
Данные для аутентификации передаются только в заголовках, а не в параметрах (в отличие от Pusher).

👁️ Канал присутствия для администратора: 
Логика аналогична приватному каналу, но возникла ошибка 500 ❌. Долго искал проблему — оказалось, модель должна наследоваться от Authenticatable:

// Правильно ✅
class Panel extends Authenticatable

// Неправильно ❌
class Panel extends Model

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

🎯 Итог: 
Много нового узнал о Laravel, теперь пишу код увереннее!

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

🔬 Сейчас активно изучаю Module Federation
Документация есть, но она ориентирована на Webpack, а не на Vite — предстоит разобраться!

По большей части фиксил ошибки, мог несколько дней возиться с одной и той же ошибкой, поэтому контента особо не было, думал немного поменять концепцию постов, так как дни уже кажутся неактуальными

Завершение года. Итоги и движение вперёд. 📅✨

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

Прежде всего, от всей души поздравляю вас с наступающим Новым годом. 🥂
Желаю вам не просто успехов, а того самого понимания, куда и зачем двигаться. Желаю проектов, которые дадут вам колоссальный опыт и приведут к успеху. Желаю баланса между работой и жизнью, где есть место и глубокой концентрации, и тишине. 🕊️

Личная ретроспектива: год фокуса 🎯
Этот год для меня прошёл под знаком целенаправленного изучения. Я меньше говорил и больше делал, концентрируясь на фундаменте.
🔹 React. Погружение в декларативную парадигму и экосистему. Это был переход от «как сделать» к «как описать состояние интерфейса».
🔹 Проектирование баз данных. Самый консервативный и критически важный пласт. Учился не просто создавать таблицы, а выстраивать связи, думать о целостности данных и последствиях решений.
🔹 Вход в бэкенд на Laravel. Осознание полного цикла. Реализация вебсокета для live-взаимодействия стала точкой, где фронтенд и бэкенд перестали быть абстракциями и стали единым механизмом. ⚙️
🔹 Инструменты стилизации. От ручного CSS через SCSS к утилитарному подходу Tailwind. Это исследование разных философий визуального конструирования.
Это был год «под капотом». Год, когда хотелось разобраться в том, как всё устроено на самом деле.

Вектор на новый год: от потребления к отдаче 📤
Глубокое погружение необходимо, но у него есть побочный эффект — замыкаешься в мире своего образования. План на предстоящий год — сменить акцент.
Накопленным опытом, мыслями и неочевидными инсайтами имеет смысл делиться. Поэтому в новом году я намерен уделять больше времени созданию контента. Не только технического, но и о процессе, об организации мышления, о вызовах. Цель — не получать, а участвовать в диалоге, формируя более осмысленную профессиональную среду вокруг. 💬

ВСЕХ С НОВЫМ ГОДОМ🎄❄️☃️

Сижу, делаю бэкенд под готовый фронт. Всё должно быть просто: composer install и поехали. Но нет.

В свойствах папки стоит «Полный доступ», а терминал говорит: «Только для чтения». Зависимости не ставятся, нервы тратятся.

В такие моменты понимаешь, почему кто-то раз и навсегда переходит на Linux. Там бы так не поступили.

P.S. Проблему, кажется, решил, но осадочек остался.

Ох уж эта валидация