#дайджест_технологий

В нашей команде появилось новое регулярное мероприятие, в рамках которого разработчики обсуждают одно или несколько решений/инструментов, которые могут быть применимы для Дизайн-Системы или других наших сайд-проектов. По итогу нашей встречи мы резюмируем результат в короткий отчет, который будем публиковать сюда. Первым инструментом для обзора стал Blitz.JS. Вся команда очень вдохновилась представленным решением и нам захотелось поскорей его опробовать в бою. Возможно до конца года нам это удастся 🤞

#дайджест_технологий

Blitz.JS — полноценный fullstack-toolkit для Next.JS. Эквивалент Ruby on Rails, но для JavaScript и React. Вы получаете все самое лучшее от Next.js и все, что нужно для создания полнофункционального приложения.

Плюшки Blitz.JS:
- в новых проектах по дефолту настроены все скучные вещи по типу Prettier, Eslint и Jest
- Zero-API — собственный транспортный протокол, основаный на удаленном вызове процедур, который абстрагирует уровень API. Разработчику не нужно возиться с REST или GraphQL API. Blitz позволяет писать функции, которые запускаются на сервере и импортировать их в ваши компоненты React
- Authentication — из коробки в Blitz.JS есть функционал для управления сессиями пользователей. Авторизация, аутентификация, сбор пароля и восстановления пароля, всё есть. Также можно с легкостью добавить авторизацию через социальные сети и сторонние сервисы, используя стратегии Pasport.JS
- Data Layer — для работы с данными в Blitz.JS используется Prisma 2. Prisma — Это современная ОРМ для Node.JS и Typescript. Она упрощает подключение к БД, выполнение запросов, миграции и моделирование БД

Blitz.JS — очень мощный, многогранный инструмент, который делает за нас большую часть работы. Позволяет быстро и качественно создавать приложения, где в основе будут заложены современные подходы и решения. Немаловажно отметить возможность легкого масштабирования приложения — важный, но зачастую пропущенный параметр, особенно при быстрой разработке и создании MVP

Релиз 7.0.0

Аллоха! Мы обновили версию React, выкатили множество багфиксов и доработок, внимательно почитайте анонс

Изменения:

— React. Обновлена версия react на 18.2.0 и другие зависимые библиотеки. Ко многим компонентам добавлен в явном виде параметр children.

— Checkbox. Отступы приведены к макетам в фигме. Толщина линий теперь всегда 2px. Переделаны ховеры

— RadioButton. Отступы приведены к макетам в фигме. Толщина линий теперь всегда 2px

— Breadcrumbs. Добавлен ховер, дропдаун с крошками заменен на размер small

— TextArea. Изменен отступ от хинта до счетчика, добавлены параметры: hideLabel, placeholder, size

— Switch. Исправлена центровка текста для размера small

— Input. Для всех видов инпутов изменен цвет текста плейсхолдера на transparent 10. Изменены дефолтный лейблы InputEmail: Электронная почта, InputPhone: Номер телефона

— Stepper. Изменен отступ от текста до кнопок: для medium 4, для small 2

— InputNumberStepper. Исправлено отображение длинных чисел

— Select. Исправлены ошибки: при включенном автокомплите первый клик открывает список и только второй даёт вводить текст, лейбл дергается при клике по селекту, состояние открытого селекта теперь соответствует состоянию инпута в фокусе, открытый дропдаун теперь перекрывает хинт, добавлено описание параметра icon

- EditableText. Исправлена работа параметра value

BREAKING CHANGE В ВЕРСИИ 7.0.0

— Tooltip. Убраны параметры hint, hintSide, image, imageSide. Добавлен размер small. Параметры приведены к единому формату нейминга по компонентам header -> title, text -> subtitle

— TabsClassic переименован в Tabs. Внутренние компоненты, соответственно: TabsClassicGroup -> TabsGroup, TabsClassicItem -> TabsItem, TabsClassicPanel -> TabsPanel. Изменен отступ между табами в размере medium на 40px, добавлены параметры icon и iconPosition

— TabsItem. Добавлен параметр dotEnabled для отображения точки рядом с табом

— Chip. Изменен фон выбранного задизейбленного чипа, отступы в группе чипсов, значения параметра view теперь default и contrast

— TagItem переименован в Tag

Новый компонент

— Popover. Как и тултип, всплывает в указанную сторону при ховере или клике, но может содержать любой контент. Внутренние отступы настраиваются, стрелку-указатель можно скрывать

Изменения в версии 6.3.0 (Выходила ранее, в канале не публиковали, исправляемся)

— DropdownMenu. Добавлены параметры: isOpen по аналогии с Dropdown; isMultiselect и колбэк-функция onMultiselect, которые отвечают за возможность множественного выбора; icon для добавления одинаковой иконки для всех опций; isSelectedTextColored, который отвечает за выделение текст элемента при выборе

— Select, Multiselect. Добавлен параметры: virtualScroll — включает виртуальный скролл; autocomplete — внутри передается колбэк onChange, который принимает поисковую строку из инпута. Добавлена возможность асинхронной загрузки данных

— TagGroup. Добавлен параметр showOnlyInput — отвечает за отображение в конце группы тегов инпута для ввода текста. Добавлена колбек-функция onChangeInput, вызываемая при введении данных в инпут

Привет! Сегодня немного обновили библиотеку Atomaro Web

Изменения:

— Popover готов в коде и вышел из статуса «В разработке», можно смело использовать в проектах

— Компоненты InputEmail и InputPhone удалены из дизайн-библиотеки — они, по сути, дублируют компонент Input и редко используются дизайнерами.

— В Tooltip название параметра header переименовано в title, а text в subtitle для единобразия названий параметров в похожих компонентах (например в Notification)

Релиз 7.1.0

И выпустили пачку горячих обновлений для разработчиков

Изменения:

— Checkbox. Добавили новый параметр labelColor, который позволяет задавать цвет лейбла

— InputDate. Добавили возможность задавать начало периода в одном году, а конец в другом (оказалось, что раньше так не срабатывало, все починили). Исправили отображение дат с заданными minDate/maxDate и прочие неприятные баги отображения

— PickerDate. Добавили callback-функции onChangeMonth, onChangeYear, которые возвращают соответствующие значения при выборе месяца или года

Новый компонент:

— InputTime. Похож на InputDate, только для ввода времени

А вы используете наш аватар мэйкер?
https://design.rt.ru/tools_public/avatarmaker/

Салют! Парочка нанорелизов с быстрыми фиксами

Релиз 7.1.2, 21 0ктября

— InputTime. Добавлен раздел Basic в сторибук, убраны лишние пропсы

— InputDate. Исправлена работа компонента с включенным пропсом isRange при выборе одинаковых дат

— Select. Добавлен ререндер при изменении options

Релиз 7.1.1, 19 0ктября

— Checkbox. Исправлен импорт внутри компонента, из-за него возникала ошибка всего кита

Друзья, в Arti режим совместного редактирования работает сейчас некорректно. Это связано с новыми сертификатами от правительства, которые внедрили в ПЦП. Сертификаты лучше в плане инфо-беза и защищенности данных. Но проблема в том, что все современные браузеры эти сертификаты не знают. Чтобы сайт работал корректно, сертификат нужно устанавить себе на компьютер. Единственный браузер в котором этот сертификат стоит по-умолчанию — Яндекс браузер, то бишь отечественный, в нём всё работает норм. Мы понимаем что это неудобно.
В ближайшее время мы обновим Арти, чтобы он работал стабильно на всех браузерах, без лишних телодвижений.

Апдейт ARTi

Починили совместное использование, доски снова открываются быстро.
Попробовать бесплатно без регистрации и смс https://design.rt.ru/tools_public/arti

Привет! Это канал бесплатного проекта онлайн-доски Арти https://design.rt.ru/tools_public/arti
Здесь мы будем делиться новостями и планами развития проекта.
Арти — это сайд-проект команды Дизайн-системы Ростелекома, который мы запустили для себя и сотрудников ртк ит, как простую замену миро.
В Арти можно проводить мастер-классы, ретроспективы, стратегии, вести документирование встреч. А также: рисовать роадмапы и схемы, прототипы интерфейсов, CJM, и слайды для презентаций.

Текущий функционал:
1. бесконечный холст;
2. сквозное шифрование;
3. совместное редактирование;
4. инструменты рисования: фигуры, текст, карандаш, стрелки;
5. все операции на горячих клавишах;
6. уникальные url зашифрованных досок;
7. «вечные» доски.

В чат @arti_board_chat можно писать вопросы или предлагать улучшения.

К нашей команде присоединились тестировщицы!

Таня Ильющенко и Юля Дельнова теперь занимаются QA в проекте дизайн-системы: поиском багов и несоответствий и тестированием всех изменений. Мы задали девочкам несколько вопросов, чтобы познакомиться.

– Таня, Юля, как видите свою миссию на проекте?
🔹Юля: Сломать всё, что можно сломать!
🔸Таня: И сделать так, чтобы дизайн-система не попала в канал UI фэйл 😛

– Что стало вашей первой задачкой?
🔸Таня: Мы начали с налаживания процесса QA вместе с ребятами и нашим лидом Никитой Орловым, чтобы все issues в GitLab проходили этап тестирования перед включением в релиз.
🔹Юля: Ещё мы сопоставили компоненты в Storybook и Figma – заметили, что некоторых компонентов в Figma не хватает, и решили с этим разобраться. А сейчас занимаемся тестированием компонента Input Card.

– Какие впечатления сложились о дизайн-системе?
🔸Таня: Дизайн-система — интересный проект со своими особенностями тестирования. Например, нужно правильно выстроить последовательность проверки разных источников, так как компоненты есть и в Storybook, и в Figma, и в коде.
🔹Юля: Ещё нам очень понравилась сама команда – никакой бюрократии, дружеская атмосфера, живые обсуждения. И все включают камеры на встречах!
🔸Таня: Да, все ребята активные, интересные, всегда готовы помочь. Очень рады стать частью команды!

Мы уверены, что благодаря Тане и Юле качество дизайн-системы будет расти от релиза к релизу. Если же какой-то баг всё-таки проскочит мимо девочек, его можно зарепортить в наш GitLab или описать в чате — мы обязательно посмотрим и ответим!

Новости Дизайн-системы Атомаро

1. Тестировщицы навалили багов на новый компонент InpudCard. Все рады, особенно Дима Уткин, который его делал.
2. Работы по темизации Дизайн-системы для Спектра идут вовсю. Токенизировали Checkbox и уже заканчиваем RadioButton. На следующей неделе приступаем к Input.
3. Проконсультировали проект Датапорт по разработке собственного ui-kit на Vue.js + рассказали про наши планы на следующий год по написанию универсального кита на WebComponents.
4. Выпустили патч для 5-ой версии ДС — помощь команде Ключ, которая пока не готова технически переезжать на 7-ю актуальную версию ДС.
5. Проводим внутри команды регулярный дайджест технологий, на котором начали разбирать компоненты на предмет качества кода, архитектуры, структуры, и дальнейшей масштабируемости. Это позволит заранее определить возможности улучшения Дизайн-системы.
6. Планируем в декабре провести крекер на Ростелеком про цикл жизни дизайн-систем.

Дайджест новостей недели

🔹Протестировали новый компонент InputCard, зарепортили баги и перешли к тестированию SegmentedControl
🔹Закончили токенизирование в коде компонента RadioButton и приступили к компоненту Switch
🔹Переосмысливаем компонент Input как в дизайне, так и в коде, чтобы его можно было легко кастомизировать с минимальным количеством токенов
🔹Лечим баги в компоненте Tree
🔹Долго собираем релиз 7.1.4, где должны решить проблемы с DropdownMenu и Multiselect. В релизе 6.3.0 мы перенесли логику множественного выбора из Multiselect в DropdownMenu, вылезло много багов. Решили откатить доработку, но так как она затрагивает много других компонентов, а после 6.3.0 было много изменений, это заняло некоторое время. Но основные проблемы решили и сейчас находимся на финальной стадии тестирования релиза

Как мы ищем дизайнера в команду

Дизайн-система развивается, пользователей становится больше, растёт и бэклог задач по дизайну. Месяц назад мы поняли, что команде нужен ещё один дизайнер, и начали искать людей под наши требования.

1. Понимание специфики дизайн-систем

Нам хочется найти человека, который быстро освоится с процессами и приступит к задачам. Для этого нужен опыт работы с дизайн-системами: не только с созданием компонентов в Figma, но и подготовкой их спецификаций, передачей разработчикам и проведением дизайн-ревью. Первые собеседования показали, что многие называют дизайн-системами простые UI-киты. Почему это не так, можно узнать в статье нашего продакт-оунера Дениса Пушкаря. А мы теперь отдельно уточняем опыт кандидата до собеседования.

2. Хороший UI и системное мышление

Если UI-навыки можно понять по портфолио, то системное мышление проверяется только на интервью. Нам важно, чтобы кандидат умел критически анализировать процессы и не стеснялся проявлять инициативу. Мы задаём вопросы про процессы на текущем месте работы, пытаемся определить роль кандидата в них, узнаём, предлагал ли он улучшения.

3. Софт-скиллы

В нашей команде тёплая атмосфера — нам важно открытое общение, готовность делиться опытом и учиться новому. На собеседовании мы оцениваем, впишется ли кандидат в команду и будет ли ему комфортно с нами. В отличие от проверки технических навыков, оценку софт-скиллов тяжело формализовать. Поэтому мы стараемся разделять зоны ответственности: один собеседующий глубоко проверяет хард-скиллы, а другой фокусируется на гибких навыках.

Кандидат уже принял оффер. Но наша дизайн-студия всегда ищет таланты и кроме уже стандартного для IT соцпакета (премии, ДМС и разные компенсации) даёт возможность стать частью большого коммьюнити талантливых дизайнеров — узнавать новое, делиться своим опытом, а заодно и прокачивать навыки самопрезентации на лекциях и воркшопах. Чтобы стать частью нашей команды, присылайте ваши резюме и портфолио на Design.job@rt.ru

Дайджест новостей недели

🔹Завершили токенизацию компонентов Switch и Input
🔹Токенизируем компонент DropdownMenu и дорабатываем его функционально: пункты меню можно будет группировать и отделять линией, у каждой группы появится заголовок. Также предусмотрели контейнеры, в которые можно будет поместить другие элементы (например, поле поиска или кнопку) и расширить возможности DropdownMenu под разные продукты
🔹Продолжаем тестировать компонент SegmentedControl, доделываем пул тест-кейсов по компоненту InputCard в Figma
🔹Наш продакт-оунер Денис Пушкарь выступил на онлайн-митапе SuperJob и рассказал про цикл жизни дизайн-систем
🔹Пообщались с командой дизайн-системы МТС — обсудили общие боли, планы и технические решения. Вышло очень плодотворно и интересно!
🔹Тимлид разработки Дима Шевченко и аналитик Юля Берникова из нашей команды выпустились из Школы тимлида РТК ИТ. А Дима ещё и стал лучшим учеником своего класса — поздравляем! 🥳

У нас вышла статья на хабре про то, как Дизайн-система повлияла на цифровую трансформацию Ростелекома

https://habr.com/ru/company/rostelecom/blog/706288/

Релиз 7.2.0

Привет! Включаемся в рабочий режим после праздников и начинаем год с обновлений — допилили два новых компонента, исправили баги, поработали над улучшением документации в сторибуке

Новые компоненты
— InputCard: поле ввода номера банковской карты
— SegmentedControl: группа кнопок-сегментов для переключения состояний или смены контента

Изменения
— InputDate. Исправлена критическая ошибка, приводившая к падению приложения, при параметре isRange=true и изменении первой даты периода
— Multiselect. Исправлена работа колбэк-функции при удалении тега. Добавлены параметры dropdownClassName, dropdownStyle — они отвечают за стилизацию DropdownMenu в компоненте
— Select. Исправлено поведение параметра dropdownStyle, при котором стили применялись к Input

Изменения в Storybook
— Переименованы примеры с Basic на Examples
— Добавлен пример импорта компонента
— Блок ShowCode раскрыт по умолчанию
— Для ShowCode включено динамическое отображение. В некоторых компонентах показывается весь код
— Options в ArgTypes вынесены из Control
— Убран код, потерявший актуальность (промоакция с футболкой)
— В Textarea убрана неиспользуемая переменная hideLabel внутри компонента

Релиз 7.2.1

Не останавливаемся, сразу чиним то, что сломали в предыдущем релизе =) Константин Поленков, спасибо за моментальный фидбек! 💚

Изменения
— Dependencies. Добавлена библиотека card-validator в зависимости