Интерфейсы · логика · взаимодействие
Сложная задача.
Понятный интерфейс.
Превращаю продуктовые сценарии в веб-приложения: продумываю состояния, собираю компоненты и проверяю поведение на реальных действиях.
Разобрать проектРабочая доскаЗадачи проекта
Структура компонентовГотово / интерфейс
Фильтрация задачВ работе / поведение
Навигация с клавиатурыГотово / доступность
Сценарии ошибокВ работе / состояния
Веб-приложение / рабочая доска
Всё нужное.
В поле зрения.
Задача интерфейса — помочь команде понять, что уже сделано и что требует внимания. Фильтр меняет список сразу, а состояние выбранной кнопки доступно и для скринридера.
01
Моя роль
Структура интерфейса, компоненты списка, фильтрация и состояния элементов управления.
02
Что важно в реализации
Предсказуемое поведение, семантические кнопки, видимый фокус и адаптация к узкому экрану.
03
Что можно проверить
Переключите фильтр выше. Кнопками можно пользоваться мышью, касанием или клавиатурой.
За интерфейсом
Ясность
внутри.
Фильтрация по состоянию задачи
const visibleTasks = tasks.filter(task => {
return filter === 'all'
|| task.state === filter;
});
// Один источник состояния.
// Отображение следует за выбором пользователя.В портфолио разработчика важны работающий интерфейс, личный вклад и объяснение технических решений.
Хочу своё портфолио ↗