В рамках данного задания вам необходимо реализовать три задачи, за каждую из которых вы получаете по баллу. При этом внутри задач 2 и 3 вы можете выбрать подзадачу, которую хотите реализовать.
Проект становится больше и с CSS появляются проблемы: БЭМ не решает проблему изоляции стилей и button написанный вами и button вашего соседа влияют друга на друга. Переведите проект на использование CSS модулей, но не забывайте о терминах и правилах, которые ввела БЭМ методология, они помогут и дальше поддерживать ваши стили в чистоте и порядке.
Динамическая природа JavaScript играет злую шутку с программистами. Они начинают забывать с каким типом данных работают, опечатываются, допускают глупые логические ошибки. Чтобы предотвратить эту проблему переведите проект на использование TypeScript вместо JavaScript.
В документации Create React App вы найдёте ответы на все вопросы о том как добавить в свой проект CSS Modules и TypeScript.
Некоторые приложения имеют специальный "ночной" режим, чтобы глаза не уставали при долгой работе за экраном. Добавьте на страницу возможность переключать светлую тему оформления на темную и обратно. Переключатель должен находиться в шапке и при нажатии на него вся страница меняет цветовую гамму на темную. Требования: Фон страницы должен поменяться на темный, цвет текста на светлый, логотип должен стать белым, если есть картинки со светлым фоном - нужно затемнить. Если есть иконки, то они должны стать светлыми. Также проверьте, что текст читаемый и достаточно контрастный.
Задание со звездочкой: Сделать так, чтобы после перезагрузки страницы, выбранная тема, сохранялась.
При совершении некоторых действий нужно отдельно убедиться, не ошибся ли пользователь. Вам необходимо при удалении писем добавить модальное окно, в котором вы подтверждаете действие пользователя. Для реализации данного поведения необходимо использовать элемент <dialog>. Если задание вам кажется слишком простым, то это не так, ведь многие браузеры не поддерживают этот элемент, а работать должно не только в последнем Chrome.
Нужно добавить в интерфейс Accessibility. Подробнее что это можно узнать из лекции. Да, мы будем проверять эту домашку Screen Reader'ом.
Сверху у вас есть поле с поиском. Настало время его оживить. Ожидаемое поведение данного контрола – вы вводите текст, в списке писем остаются только те письма, которые содержат в теме/авторе/тексте письма заданный текст. Для того чтобы запустить поиск не нужно нажимать Enter или отдельную кнопку, нужно чтобы он работал практически мгновенно после нажатия клавиши, но при этом оптимально с точки зрения JS. Так же нужно показывать спиннер внутри поля, пока у вас идёт фильтрация. Контрол должен корректно работать даже тогда, когда у вас в почтовом ящике больше 10 тысяч разных писем.
Иногда появляется необходимость искать письма не только по какому-то конкретному тексту, но и по дате сообщения. Добавьте на страницу календарь, с возможностью выбора периода дат. Вы можете использовать любой календарь на react, который подходит под задачу. При выборе дат в календаре, должны выводиться только письма, пришедшие в эти даты. Так же должна быть возможность сбросить фильтры. Работа с фильтрами должна органично вписатсься в остальную фуникцональность — фильтр по тексту, выделение писем и т.д. Не забудьте, про UX: если пользователь что-то сделал не так, не нашлось писем — он должен понимать что происходит.
Писем в почтовом ящике может накопиться очень много (особенно если это уведомления от Github о новых правках работ от студентов в группе). Представьте, что писем сотни, а может и вовсе тысячи. Веб-интерфейс может к этому и не быть готов. Вам предстоит столкнуться с вопросом оптимизации рендеринга большого списка писем. Хорошенько подумайте о том, как можно отрендерить список из 1 000 писем и сделать это не более чем за 500 миллисекунд. 🔥
Дедлайн по всем 3-м заданиям – 4 мая. В PR указывайте явно какие подзадачи вы взяли в работу, чтобы нам не пришлось гадать.
Форкните репозиторий itmo2019/task6.
Склонируйте форк и установите зависимости:
git clone https://github.com/<username>/task6/
cd task6
npm installWebStorm включает в себя всё необходимое для работы.
Для VSCode рекомендуется установить следующие плагины:
Вызываются следующим образом: npm run <command>
| Команда | Действие |
|---|---|
| dev | Запуск приложения в режиме разработки |
| test | Запуск тестов |
| build | Сборка скриптов, стилей и других ресурсов для production |
| lint | Проверка кода на потенциальные ошибки и соответствие стилю |
| lint-fix | Исправление ошибок выявленных в процессе проверки |
| format | Форматирование кода |
Особенности команд:
dev— Вызывает скрипт start из react-scripts, который, в свою очередь, запускаетwebpackиwebpack-dev-server. Самwebpackвыполняет сборку скриптов, стилей и других ресурсов (картинки, шрифты, etc...), аwebpack-dev-serverраздаёт полученные артефакты сборки, обновляет их в режиме реального времени при изменении исходного кода.test— Запускаетjestв режимеwatch. Он, в свою очередь, запускает тесты, которые затрагивают изменившийся код. Подробнее можно прочитать здесь.build— Вызывает скрипт build из react-scripts. Он выполняет сборку скриптов, стилей и ресурсов также как иstart, но применяет различные оптимизации.lint— Запускает eslint, используется конфиг основанный на популярном наборе правил от airbnb.lint-fix— Запускает eslint с флагом--fix. Исправляет все ошибки, для которых есть возможность автоматического фикса, остальные же требуют ручной обработки.format— Запускает утилиту prettier, которая приводит весь код к единому стилю.
Перед отправкой решения рекомендуется применять команды lint-fix и format.
- React 🇺🇸
- React 🇷🇺
- Create React App 🇺🇸
- TypeScript Handbook 🇺🇸