Токены, библиотека компонентов, Storybook, доступность и версии.
Практика. Сделать 5 компонентов (кнопка, поле, модальное окно, выпадающий список, тост) с доступностью, темами на токенах и историями в Storybook.
Практика. Вынести UI-кит в отдельный пакет с semver, автоматической публикацией, скриншотными тестами и описанием процесса изменений.
Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.
Дизайн-система — общий язык дизайна и кода: токены (цвета, типографика, отступы) в CSS-переменных, библиотека компонентов с доступностью из коробки, документация и песочница (Storybook), версионирование по semver с журналом изменений и процесс — кто владеет…
Полный разборТокены — именованные значения дизайна: цвета, размеры шрифтов, отступы, радиусы, тени, длительности анимаций. Есть базовые (blue-600 = #2563eb) и семантические (color-accent, color-text-muted, space-md), компоненты используют только семантические. Токены…
Полный разборStorybook — песочница, где компоненты разрабатывают и показывают изолированно от приложения: каждая история (story) — компонент в конкретном состоянии (обычная кнопка, загрузка, ошибка, длинный текст). Он служит живой документацией для дизайнеров и…
Полный разборCSS Modules — обычный CSS-файл, классы которого сборщик превращает в уникальные имена (.title → Card_title__x7a2) и отдаёт объектом: styles.title. Стили изолированы без соглашений об именах, остаются статическим CSS — быстро и кэшируется. CSS-in-JS…
Полный разборДоступность — возможность пользоваться интерфейсом людям с нарушениями зрения, слуха, моторики, когнитивными особенностями, а также всем в неудобных условиях (солнце, одна рука). Стандарт — WCAG (уровень AA — обычная цель). Основы: семантическая разметка…
Полный разборПосле собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.