# Дневник разработки: YouTube Previewer

Цель: создать локальный инструмент для предпросмотра превью YouTube-видео (заголовки, миниатюры, названия каналов) для главной страницы и сайдбара. Превью должны выглядеть точно так же, как на настоящем ютубе: в уменьшенном виде и наложенным таймкодом в правом нижнем углу. Слишком длинные заголовки должны обрезаться точно так же как на настоящем ютубе (в правильном месте и с многоточием в конце).


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

## Этап 1: Старт и базовый функционал (T + 00:00 — 00:10), где T это момент создания первого коммита
**Что пытались сделать:**
Создать локальный инструмент для предпросмотра превью YouTube-видео (заголовки, миниатюры, названия каналов) для главной страницы и сайдбара.
Добавили возможность загрузки локальных картинок через обычный выбор файла (кнопка "Open") и Drag-and-Drop изображений из операционной системы в окно браузера.

## Этап 2: Стилизация и первые "затыки" (T + 00:54 — 01:21)
**Что пытались сделать:**
Улучшить внешний вид и сделать его точно таким же, как на настоящем YouTube.

**С какими багами/затыками столкнулись:**
- Стандартные шрифты выглядели не так, как на YouTube.
- Заголовки сливались, шрифт был слишком жирным и не имел правильных отступов (сайдбар "наезжал" на края). Что очень критично т.к. нужно показать как должно выглядеть на реальном ютубе без тестовых загрузок видео на сам ютуб, чтобы не срабатывали его спам-фильтры, вызывающие временный теневой бан. 
- В коде закралась опечатка в стандартном названии канала ("Hacker Lifestyle" вместо правильного "Hacker's LifeStyle").

**Какие решения/костыли помогли:**
- Добиться правильного отображения с правильными шрифтами и отступами помогло использование ии-агентом браузера для инспектирования кода реального ютуба и извлечения оттуда CSS-правил и шрифтов.
- Подключили `Google Fonts (Roboto)` для аутентичного вида.
- Применили быстрый хотфикс (`hotfix`): принудительно снизили `font-weight` для заголовков на главной и в сайдбаре, добавили `padding-right` для заголовка сайдбара, чтобы он не прилипал к краю.
- Исправили дефолтное название канала.
- Сделали точно такую же обрезку длинных заголовков, как на настоящем ютубе.

## Этап 3: Доработка отображения времени (T + 01:41 — 01:55)
**Что пытались сделать:**
Улучшить бейджи с продолжительностью видео (добавить часы\*).

\* hours, помимо minutes и seconds.

**Что сделали:**
Сначала просто добавили часы (hours) в сайдбар и обновили плейсхолдеры. Затем поняли, что это нужно не всегда, и реализовали опцию-переключатель (toggle) для отображения/скрытия часов в бейджах. Т.е. переключение между форматами ЧЧ:ММ:СС и ММ:СС.

## Этап 4: Масштабирование до мульти-слотов (T + 34:56 — 35:05)
**Что пытались сделать:**
Перейти от одиночного ввода к системе из трех отдельных слотов превью, чтобы можно было сравнивать сразу несколько вариантов.

**С какими багами/затыками столкнулись:**
- При добавлении трех слотов старая верстка начала разваливаться. Элементы не выстраивались правильно, рамки и отступы применялись криво.

**Какие решения/костыли помогли:**
- Человек-оператор дал в контекст id коммита, а которым отображение не было сломано, чтобы вернуть его, сохранив новую возможность с тремя слотами для превью.
- **Рефакторинг структуры:** Пришлось обернуть элементы сайдбара и главной страницы в новые родительские `div`-контейнеры. Это позволило корректно применить рамки (`border`) и отступы (`padding`).
- **Смена Layout'а:** Изменили `flex-direction` элементов главной страницы с колонки (`column`) на оборачиваемую строку (`wrapping flex row`), чтобы превью выстраивались как карточки.
- Сделали отдельные области для Drag-and-Drop и загрузки файлов для каждого слота отдельно. Добавили стили для этих областей, чтобы было видно, куда перетаскивать файл. Сделали кнопки "Open" для выбора файлов в каждом слоте как альтернативу загрузке файлов перетаскиванием.

## Этап 5: UX-улучшения и борьба с артефактами (T + 35:21 — 35:42)
**Что пытались сделать:**
Сделать инструмент удобнее для пользователя (копирование текстов) и подчистить код.

**С какими багами/затыками столкнулись:**
- В HTML-коде откуда-то появились лишние обратные кавычки (backticks), которые могли ломать рендер или просто мусорили в разметке (вероятно, артефакты от прошлых генераций кода LLM).

**Какие решения/костыли помогли:**
- Вычислили и удалили лишние обратные кавычки (`fix: remove extraneous backticks`).
- Написали функционал удобного копирования и вставки (Copy & Paste) для полей ввода заголовков, при помощи кнопок и хоткеев, чтобы не приходилось перепечатывать текст вручную.
- Обновили дефолтные цифры просмотров, сделав их одинаковыми во всех трех слотах.

## Этап 6: Финальный лоск и настройки отображения (T + 36:43 — 38:07)
**Что пытались сделать:**
Дать пользователю больше контроля над внешним видом предпросмотра и задокументировать проект.

**Что сделали:**
- Добавили чекбокс для переключения макета главной страницы между "строкой" (row) и "колонкой" (column).
- Сдалали наглядное обозначение каждого слота своим персональным цветом, чтобы было проще ориентироваться.
- Написали и обновили `README.md`, явно указав пользователям, что файл нужно открывать просто через браузер. Добавили лицензию GPLv3.

---

# Дневник разработки: Сайт-визитка (Portfolio)

Помимо самого инструмента, мы разработали сайт-визитку для демонстрации проектов. 
Отсчет времени (T') ведется с момента первого коммита в репозиторий `Antony-hash512.github.io`.

## Этап 1: Создание основы сайта (T' + 00:03 — 00:11)
**Что пытались сделать:**
Создать современную и стильную страницу-визитку (`index.html`), которая бы презентовала разработчика и его стек технологий.

**Что сделали:**
- Перенесли файлы проекта `YouTube Previewer` в корень репозитория.
- Разработали премиальный дизайн в стиле "Glassmorphism" с использованием темной темы, градиентных фоновых элементов (blobs) и эффекта размытия.
- Данные о технологиях (Arch Linux, Rust, Godot и т.д.) перенесли из `README.aboutme.md`.
- Интегрировали бейджи с иконками через `skillicons.dev`.

## Этап 2: Интеграция проектов через HTML-обёртки (T' + 00:13 — 00:23)
**Что пытались сделать:**
Сделать красивые страницы для документации (`youtube-preview.md`) и дневника разработки (`dev_diary.md`), чтобы они выглядели как часть сайта, а не просто сырые текстовые файлы на GitHub.

**Что сделали:**
- Решили использовать библиотеку `marked.js` для динамического рендеринга Markdown прямо в браузере.
- Создали `youtube-preview.html` и `dev_diary.html`. Эти страницы загружают `md`-файлы "на лету" и применяют к ним стили нашего сайта.
- Добавили кнопки возврата на главную страницу и ссылки на сырые (`Raw`) версии файлов, сохранив Markdown как единственный источник истины.

## Этап 3: Мультиязычность и глубокие ссылки (T' + 00:33 — 00:45)
**Что пытались сделать:**
Сделать дневник разработки доступным для англоязычной аудитории и позволить делиться прямыми ссылками на нужный язык.

**Что сделали:**
- ИИ-ассистент перевёл текст дневника на английский язык (`dev_diary_en.md`).
- На страницу `dev_diary.html` добавили минималистичный переключатель **RU / EN**.
- Реализовали чтение URL-параметров (`?lang=en` или `?lang=ru`) с помощью JavaScript (`URLSearchParams`).
- Настроили автоматическое обновление URL в строке браузера без перезагрузки страницы (через `history.pushState`) при клике на переключатель языков.

## Этап 4: Интеграция мультимедиа (T' + 02:30 — 02:35)
**Что пытались сделать:**
Встроить демонстрационное видео с YouTube в дневник разработки, добавив возможность его сворачивать/разворачивать.

**С какими багами/затыками столкнулись:**
- Изначально видео было скрыто, и при загрузке страницы не отображалось, так как атрибут `src` в `iframe` был пустым (попытка "ленивой" загрузки). 

**Какие решения/костыли помогли:**
- Создали контейнер с плавными CSS-анимациями (`max-height` и `opacity`) для эффекта схлопывания.
- Установили классы `expanded` и `active` по умолчанию в HTML и сразу прописали ссылку в `src`, чтобы плеер был готов к работе с первой секунды.
- Добавили синхронизацию текста на кнопке ("Показать видео" / "Скрыть видео") с учетом текущего языка прямо при загрузке страницы.

## Этап 5: Соответствие веб-стандартам и исправление CSS-предупреждений (T' + 02:55)
**Что пытались сделать:**
Устранить предупреждение линтера, связанное со свойством `background-clip` при создании градиентного текста.

**Что сделали:**
- Выяснили, что свойство `-webkit-background-clip: text` является экспериментальным (вендорным префиксом).
- Для обеспечения кроссбраузерной совместимости и следования веб-стандартам добавили официальное свойство `background-clip: text` во все файлы, где используется градиентный текст (`dev_diary.html`, `youtube-preview.html`, `index.css`).