День 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. Проблему, кажется, решил, но осадочек остался.

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

ДЕНЬ 147-154

🎯 АКТИВНО ИЗУЧАЮ БЭКЕНД

✅ Уже готовый фронтенд:
• Регистрация / Авторизация 📝
• Кабинет администратора 👨‍💼
• Кабинет пользователя 👤
• Страница заказа 🛒
• Страница подсчёта заказа 🧮

🎓 ПЛАНИРУЮ СДЕЛАТЬ ВСЁ "ПО УМНОМУ":
Работа через токен🔑
Middleware для проверки ролей 🛡️
Динамический доступ в зависимости от роли:
👤 Пользователь → только свои страницы
👨‍💼 Админ → доступ ко всем страницам
Защита от несанкционированного доступа 🚫
(пользователь не сможет попасть на страницу админа)

📚 ОБУЧЕНИЕ:
Обучаюсь по урокам индуса с ютуба, очень годный контент у него, уже не первый раз смотрю, на русскоязычном ютубе мало подходящего контента.

ДЕНЬ 155-162

📚Обучение:
Посмотрел несколько часовых видео по Laravel. Активно пытаюсь применять знания без GPT, чисто через документацию

🛡️ Основные трудности:
Сложности возникли с middleware — написание кастомного middleware под определённую роль пользователя в базе данных и на обработку данных, получаемых с апи

Нужно разобраться с:
● Проверкой ролей
● Защитой маршрутов
● Правильной архитектурой доступа

⏱️ В условиях ограниченного времени:
За 3 часа успел сделать:
✅ Полностью регистрацию и авторизацию
✅ Отображение всех ошибок валидации с бэкенда на фронте
✅ Защищённые маршруты на фронтенде

📊 Нужно больше практики, чтобы укладываться в такие сроки, так как необходимо за это время сделать ещё следующие требования:

Отображение задач:
👨‍💼 У админа — всех задач
👤 У пользователя — только своих задач
Функционал:
✏️ Редактирование задач
📋 История задач
🔄 Обновление статусов
Безопасность:
🛡️ Защищённые маршруты для страниц на фронте
🔒 Защищённые API-эндпоинты на бэкенде
🚫 Чёткое разделение прав доступа

🚀 Нашёл полезную статью про защищённые маршруты в React Router!

📚 Вот что в ней есть:
1️⃣ Создание универсального компонента для защищённого маршрута
2️⃣ Маршруты только для аутентифицированного пользователя
3️⃣ Маршруты, зависящие от роли (админ, пользователь, гость)

🔗 Статья тут: React Router 6: частные маршруты

ДЕНЬ 171-178
Отбор прошел, теперь региональный этап

📋 ФОРМАТ РЕГИОНАЛЬНОГО ЭТАПА:
Этап разделён на три модуля, каждый — 6 часов ⏳:
🔸 Модуль А — Вёрстка на HTML и CSS
🔸 Модуль Б — Серверная часть
🔸 Модуль С — Клиентская часть

🎨 МОДУЛЬ А: ВЁРСТКА (6 ЧАСОВ)
За отведённое время удалось сверстать:
🔸 Главная страница
🔸 Логин
🔸 Регистрация
🔸 Профиль пользователя
🔸 Админ-панель
🔸 Каталог
🔸 Слайдер
🔸 Несколько анимаций

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

🛠️ ПРОЕКТ ПО ЗАДАЧАМ:
Почти готов! Осталось доделать:
🔹 Вывод ошибок более аккуратно
🔹 Сверстать модальное окно для создания задачи

Если получиться найти сервер под бэк, то сможете затестить

интересный ответ с 200 статусом конечно

День 179–186

Углублённо изучал Laravel. Разбирался с написанием связей в моделях, чтобы удобно соединять таблицы при запросах в контроллере.
Попробовал реализовать приведение картинки к формату JPG и размеру 300×300. В готовом пакете это делается одной строкой, но по регламенту нельзя использовать сторонние сервисы — пришлось писать на чистом PHP, вышло около 30 строк.

Пощупал canvas в React — тег для рисования фигур, текста, картинок, только кодом. Впервые пригодилась геометрия, чтобы создавать разные формы.

P.s: так как мобильный инет у нас глушат, а провести мне его не могут, то чуть чуть с задержкой пост

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

WebStorm лучшая IDE

Открыл один и тот же проект в WebStorm и vs code, только vs code все нормально делает, а вебшторм марасит, но работает

День 187-194

На этой был региональный этап. За 6 часов на каждый модуль успел сделать следующее:

Модуль А: Выполнил всё задание. Были небольшие недочёты по дизайну, но в целом некритично.

Модуль Б: Не сделал админку. REST API сделал почти полностью, кроме создания номера сертификата.

Модуль С: Был макет с HTML + CSS и готовые API для запросов. Успел реализовать регистрацию, авторизацию, вывод всех публичных досок, вывод своих досок, создание доски, возможность поделиться по email и генерацию ссылки для просмотра, защищенный маршрут для своих досок(только для авторизованных пользователей).

В двух последних модулях можно было сделать лучше. В модуле Б облажался тем, что начал с REST API, а не с админки. В модуле С неудачно разбил на компоненты(надо было навигацию и подвал сайта разбить на компоненты, но мне показалось, что это будет долго и нецелесообразно) и были проблемы с модальными окнами.

Результаты станут известны 5 марта.
В комментарии прикреплю файл с заданиями, кому интересно.