- Заголовки могут состоять из не более, чем двух строк, остальное обрезается многоточием. Так и не смог придумать решения для этой задачи, натыкался на подобное решение, но оно работает так себе
- Адаптивная типографика
На ширинах между 768px и 1000px шрифт указан в .vw. Не нашел этому иного применения, ибо не все шрифты в макете растут пропорционально и местами это выглядит стремно
Высчитывал по формуле
(высота шрифта / ширина вьюпорта) * 100
- Дополнительно подключил скрипт
modernizr
для поддержки webp в фоновых изображениях - Верстка попадает в макет только на мобильной версии. Дальше идет мое знакомство с гридами
- Очень хотел сделать все иконки через SVG-спрайт, но пошел дальше ибо это не часть задания. Это бы упростило управление над карточками с
type: critical
. Менялось бы толькоfill
и не нужно было бы подгружать новую иконку каждый раз
- Пока нормально осилил только горизонтальный скролл, остальные жесты требуют доработки
- Клонируем себе репозиторий с тестовыми видео-потоками, запускаем из него локальный сервер
git clone https://github.com/mad-gooze/shri-2018-2-multimedia-homework.git
cd shri-2018-2-multimedia-homework
npm ci
npm start
Теперь HLS-видеопоток стримится через порт :9191
- Клонируем мой репозиторий с домашним заданием, так же запускаем из него локальный сервер
git clone [email protected]:nikkypizza/shri-2018-II-task-1.git
cd shri-2018-II-task-1
git checkout task-multimedia
npm ci
gulp
Открываем браузер на странице http://localhost:3000/ заходим во вкладку "Видеонаблюдение" из шапки страницы.
-
Страница-вкладка в интерфейсе умного дома "Видеонаблюдение":
На десктопе сетка состоит из трех колонок, на планшете из двух колонок и из одной колонки на мобильных ширинах. На странице выведены 4 видео-превью. Клик по превью дает ему абсолютное позиционирование и разворачивает его на ширину
95vw
, заголовок списка камер заменяется на название выбранной камеры. На видео появляются контролы, а под ним появляется панель управления видео с кнопкой "Показать все камеры" для возврата к обычной сетке. Анимации реализованы через CSS. Сперва экспериментировал со скрыванием панели управления с помошьюtransform: translateY
, но с этим методом возникали накладки сz-index
, потому решил делать через комбинациюopacity
+class=«visually-hidden»
; При инициализации видео-стримов на каждое видео дополнительно навешиваетсяtitle
с описанием камеры. Ширина95vw
и такая сетка выбраны для более-менее адаптивной верстки на всех ширинах вьюпорта. -
Фильтры для видео:
В панели управления под развернутым видео есть возможность регулировать его яркость и контрастность. Для этого использовал CSS-свойства
filter: brightness
иfilter: contrast
-
Анализатор звука:
Анализатор громкости находится под регулировками фильтров на панели управления. Реализовал его только под первым видео. Планировал реализовать под всеми но из-за спешки мой обработчик клика на превью превратился в магическую кнопку невероятной мощи, а рефакторить его поведение времени не осталось 🌀 UPD: После рефакторинга анализатор работает под каждым видео
Страница "Видеонаблюдение" работает в актуальной версии Chrome на десктопе и на Android. Для проигрывания HLS-потока на платформах без нативной поддержки HLS использую библиотеку hls.js.
Анимация разворачивания видео проседает до ~30fps на треть секунды при CPU 6x slowdown. Все остальное время держится около 50-60 fps. Выглядит она не вери найс, но я рад, что работает на всех ширинах и что сделал сам :)
Так же добавил сворачивание развернутого видео по ESC. Под конец хотел переделать карточки так, чтобы по ним можно было гулять табом и открывать по нажатию с клавиатуры, но дописать не успел.
Версия Node JS проекта - 8.11.3.
Файлы задания лежат в папке node-hw
.
Запуск сервера:
npm i
node node-hw/index.js
- Сервер запускается на 8000 порту.
- По роуту
http://localhost:8000/status
— выдается время, прошедшее с запуска сервера в формате hh:mm:ss. Для упрощения выведения времени использовалmoment
. - По роуту
http://localhost:8000/api/events
- на экран выводится содержимое файла events.json, использованное в первом задании на адаптивную верстку. - По иным роутам возвращается сообщение об ошибке 404.
- При передаче get-параметра
type=info
иtype=critical
происходит фильтрация по этим типам. При иных get-параметрах выводится сообщение об ошибке 400.
В отчёте отразить
1.Трудоёмкость перевода проекта на TypeScript. Самые сложные моменты в работе.
2.Какие в процессе перевода были найдены ошибки.
3.Решили ли вы вливать данный PR, или предпочитаете работать с JavaScript? Почему?
- Если знать как устроен TypeScript, то скорее всего перевод небольшого проекта с js на ts не должен занимать много времени. Мне же потребовалось много усилий чтобы разобраться с синтаксисом, множеством ограничений и в добавок пересесть с SublimeText3 на VSCode.
- Во многих местах пришлось явно указать типы переменных, чтобы математические операции проходили проверку. Обнаружил, что единажды вызывал анонимную функцию с аргументом.
- Не уверен, что хочу вливать PR в мастер, но с TS хочу разобраться детальнее, когда не будет спешки за дедлайнами. Мне нравится, что в коде на TS при первом взгляде можно гораздо лучше понять что происходит. Должно быть это супер-удобно в командной работе над большими проектами.
-
Команда
npm run compile-ts
запускает по очереди компиляцию логики страницы, потом компиляцию задания по ноде. Скомпилированые файлы прогоняются черезeslint
и приземляются в свои исходные папки в формате.js
. -
Команда
npm run watch
запускает локальный dev-сервер и мониторит изменения.ts
,.scss
,.html
файлов и при изменении компилирует нужные.
Скомпилированые .js
файлы работают без ошибок, однако при самой компиляции возникает одна ошибка которую я еще не сообразил как разрешить:
error TS2686: 'Hls' refers to a UMD global, but the current file is a module. Consider adding an import instead.
Если добавлять import Hls from "hls.js"
то выходит следующее:
error TS1192: Module '"/Users/npb-main/Documents/GIT/yandex-hw/node_modules/@types/hls.js/index"' has no default export.
Пока не разобрался как корректно собирать все модули в один без ошибок, но работа в процессе
- Изменен контраст текста и блока с критическим состоянием. Теперь они проходят по требованиям контраста
WCAG AAA
. Из-за этого стало сложнее отличить текущую страницу в навигации от остальных. Решил добавить текущему элементуnav
небольшую тень. - Добавлены
aria-label
на все инпуты и кнопки. Добавленыtitle
на все кнопки без содержания на случай, если поведение кнопки не очевидно пользователю по ее виду. - На странице с видеонаблюдением добавлена возможность табать и открывать видео с клавиатуры с помощью
SPACE
илиENTER
. - Убраны атрибуты
href
со ссылок на текущую страницу в<header>
. Чтобы не давать пользователю ложное чувство того, что они куда-то ведут. - Перепроверил валидность страниц после изменений. На странице с видеонаблюдением имеется предупреждение об использовании
<script type="module">
, но с этим пока можно жить. Исправлю его позже как проведу рефакторинг js кода.
Итого: поднял показатель в Chrome DevTools Audit
с 62 до 100, избавился от 36 ошибок и 10 алертов в Wave.
При выполнении задания руководствовался:
- материалами из лекции
- подсказками в
Chrome DevTools Audit
- вкладкой
Поддержка доступности
в Firefox - генератором HTML-Дерева
- порталом Веблайнд
До этого был в курсе про доступность(Академия - сила), но слишком сильно не углублялся. Тема мне интересна, буду изучать ее дальше. Считаю, что каждый разработчик должен уметь в доступность и понимать, что он окружен людьми, которые на него не похожи.