/shri-2018-II-task-1

Основное репо для заданий ШРИ

Primary LanguageCSS

Задание 1 — «Адаптивная вёрстка»

  • Заголовки могут состоять из не более, чем двух строк, остальное обрезается многоточием. Так и не смог придумать решения для этой задачи, натыкался на подобное решение, но оно работает так себе
  • Адаптивная типографика На ширинах между 768px и 1000px шрифт указан в .vw. Не нашел этому иного применения, ибо не все шрифты в макете растут пропорционально и местами это выглядит стремно Высчитывал по формуле (высота шрифта / ширина вьюпорта) * 100
  • Дополнительно подключил скрипт modernizr для поддержки webp в фоновых изображениях
  • Верстка попадает в макет только на мобильной версии. Дальше идет мое знакомство с гридами
  • Очень хотел сделать все иконки через SVG-спрайт, но пошел дальше ибо это не часть задания. Это бы упростило управление над карточками с type: critical. Менялось бы только fill и не нужно было бы подгружать новую иконку каждый раз

Задание 2 — «Работа с сенсорным пользовательским вводом»

  • Пока нормально осилил только горизонтальный скролл, остальные жесты требуют доработки

Задание 3 - "Мультимедиа"

Как запустить

  1. Клонируем себе репозиторий с тестовыми видео-потоками, запускаем из него локальный сервер
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

  1. Клонируем мой репозиторий с домашним заданием, так же запускаем из него локальный сервер
git clone git@github.com:nikkypizza/shri-2018-II-task-1.git
cd shri-2018-II-task-1
git checkout task-multimedia
npm ci
gulp

Открываем браузер на странице http://localhost:3000/ заходим во вкладку "Видеонаблюдение" из шапки страницы.

Что сделано

  1. Страница-вкладка в интерфейсе умного дома "Видеонаблюдение":

    На десктопе сетка состоит из трех колонок, на планшете из двух колонок и из одной колонки на мобильных ширинах. На странице выведены 4 видео-превью. Клик по превью дает ему абсолютное позиционирование и разворачивает его на ширину 95vw, заголовок списка камер заменяется на название выбранной камеры. На видео появляются контролы, а под ним появляется панель управления видео с кнопкой "Показать все камеры" для возврата к обычной сетке. Анимации реализованы через CSS. Сперва экспериментировал со скрыванием панели управления с помошью transform: translateY, но с этим методом возникали накладки с z-index, потому решил делать через комбинацию opacity + class=«visually-hidden»; При инициализации видео-стримов на каждое видео дополнительно навешивается title с описанием камеры. Ширина 95vw и такая сетка выбраны для более-менее адаптивной верстки на всех ширинах вьюпорта.

  2. Фильтры для видео:

    В панели управления под развернутым видео есть возможность регулировать его яркость и контрастность. Для этого использовал CSS-свойства filter: brightness и filter: contrast

  3. Анализатор звука:

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

Страница "Видеонаблюдение" работает в актуальной версии Chrome на десктопе и на Android. Для проигрывания HLS-потока на платформах без нативной поддержки HLS использую библиотеку hls.js.

Анимация разворачивания видео проседает до ~30fps на треть секунды при CPU 6x slowdown. Все остальное время держится около 50-60 fps. Выглядит она не вери найс, но я рад, что работает на всех ширинах и что сделал сам :)

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

Задание 4 — «Node JS»

Версия 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.

Задание 5 — «Типизация»

В отчёте отразить
1.Трудоёмкость перевода проекта на TypeScript. Самые сложные моменты в работе.
2.Какие в процессе перевода были найдены ошибки.
3.Решили ли вы вливать данный PR, или предпочитаете работать с JavaScript? Почему?
  1. Если знать как устроен TypeScript, то скорее всего перевод небольшого проекта с js на ts не должен занимать много времени. Мне же потребовалось много усилий чтобы разобраться с синтаксисом, множеством ограничений и в добавок пересесть с SublimeText3 на VSCode.
  2. Во многих местах пришлось явно указать типы переменных, чтобы математические операции проходили проверку. Обнаружил, что единажды вызывал анонимную функцию с аргументом.
  3. Не уверен, что хочу вливать 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.

При выполнении задания руководствовался:

  1. материалами из лекции
  2. подсказками в Chrome DevTools Audit
  3. вкладкой Поддержка доступности в Firefox
  4. генератором HTML-Дерева
  5. порталом Веблайнд

До этого был в курсе про доступность(Академия - сила), но слишком сильно не углублялся. Тема мне интересна, буду изучать ее дальше. Считаю, что каждый разработчик должен уметь в доступность и понимать, что он окружен людьми, которые на него не похожи.