Uibook — инструмент для визуального тестирования React-компонентов с медиа-запросами

[astec]

На английском статью можно для коллег?

[KillBill]

Скоро переведу :)

[Bhudh]

TL;DR, но кратенькое замечание: при нейминге продукта очень полезно его (name) произносить, а не просто лепить хайповые буковки.
Представьте — Вы разговариваете с русским клиентом и произносите: «Сейчас я Вам уибук…»

[justboris]

Вроде же это читается как "юай-бук"

[Bhudh]

А GUI читается исключительно как «джыюай».
Блаженны, кто верует.

[4tlen]

Напишите uibook и gui так, чтобы не было смешно русскоговорящим малолеткам и понятно всем остальным. Спасибо.

[Bhudh]

Хотя бы UI Book, чтобы было видно, что это точно UI.
Строчные буквы в слитном слове не сильно вызывают желание спеллинга.
И зря Вы про малолеток: не знают, как английские буквы читаются, не только они, но и вполне взрослые люди, не знающие английского. Откуда-то же взялись "эс как доллар" и "вэ как галочка".

[i_surin]

а почему решили использовать border для выделения активных элементов? есть же outline с которым вёрстка не будет путешествовать в разные стороны

[KillBill]

Если речь про режим редактирования текста, то там, конечно, используется `outline`. Но есть зелёная рамка вокруг всего рабочего пространства, она сделана через `border`, так как иначе она окажется снаружи. Можно сделать тенями, но зачем?

[4tlen]

Тени не ломают флоу. Меньше беспокойства.

[justboris]

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

[kashey]

Просто открываем и просматриваем подряд все компоненты

Вот так делать не надо. Этот момент следует автоматизировать и показывать визуальные дифы, если они есть.

[Iskin]

Да, автоматическое визуальное тестирование — правильная вещь. Но в рамках этой статьи не важно кто именно смотрит изменения. Для тестирования по скриншотам всё равно нужны такие же страницы UiBook со всеми состояниями.

Но у нас чуть сложнее — мы используем UiBook ещё и для тестирования анимаций. У нас есть страницы, который постоянно крутят анимации:
amplifr.com/uikit/#MobileLayout:ru