Ребрендинг
Image: http://www.MarkMushakian.com
в продакшене
П̼͕͕͇̰̘р͉͉̝̮͔я̟̫͎͚͖м̙о̼̬̮̲̯ ̝в͈͇̪͚̘̣̩ ͓̟ͅп̜͔͖р̗̮̺о͙̥̮̝̭͍д̯ак̥̱̟ш̞͈̣̥͈ен̙̟̝е̳̝̟̝ ̪̼͇̪̩̦͚
͕̰͚͇ч̜̪͓̫̝о͔̱̣̟͎͕ ̬̜̮̬̥с͔̞̱͓и̙̲р̺̗̪̟̜̺ь̳ё̮͚з̦н͇͓о̯?
̤̯̖̜̩̖̱м͓͔̪̤̟̺̲ы̼̰̰̬̬̣͕ ̰̖̩̜в̹̰͎̪с̖̮̱̘̰е ͔͇̲̗̻͎͇у͉̤͕ͅͅм͓̪р̙̘̙ём̟̪̪
͈͇͔̥͍̳̬т̱͓а̯̦̭̤͙к͚̭н̫͕̖̤и̬̞͚л̬̘ь̥̮̹̭̗ͅз̝̞я̙̝̹!
͙к̪͎̭у͓̮д̖̫̣͈̹̭̦а̖̤см͕̻̭͎ͅо̭̥̥̗т̜̩̠͕̤͚р̯̞̗̭е̳̱̞̼̭̤л̬̱͔̳͓̟в̗͍͍а̙̗̤̱̥̫̮ш͔̹С̥̜̜̞͓Т̞̭̬̭̣͇О̩̮
Кто этот чувак?
Кто этот чувак?
Много миллионов MAU
Много стран мира
Старые технологии
Нонейм проект
* на самом деле нет
OpenSource GPLv3**
** мне нельзя на него ссылаться, ищите сами
*
*** нет, это не Microsoft
***
Поддержка браузеров
Страшная табличка
| Browser | Versions | Total share in global traffic |
|---|---|---|
| Google Chrome | 28+ | 49.4% |
| Safari | 7+ | 12.6% |
| YaBrowser | 15+ | 9.85% |
| Android Browser | 4.0+ | 5.46% |
| Firefox | 42+ | 5% |
| Opera | 33+ | 2.96% |
| Internet Explorer | 11+ | 2.5% |
| Opera Mini | 7+ | 1.72% |
азиатский рынок
Смотри доклад с RejectJS 2015
Более 90% подписано на мобильные планы
Почти 80% - пользователи мобильного интернета
Телефоны уровня "тлен"
DEvSIGN
Design
DICTIONARY
Style Guide
Цвета
Типографика
Компоненты
Контейнеры
Все размеры
Комбинации
Примеры кода
Вертикальное выравнивание
Согласованные отступы
Переполнение текста
Раскладка компонента
Вертикальный
ритм
Контейнеры
Что можно улучшить?
Раскладка - отдельными классами
Более специфичные контейнеры
"Типизированные" дырки
Flexbox
такое...
Frame + GRoup + Block
Компоненты
Чего должно быть в наборе
breadcrumbs
Buttons
icons
headers
Inputs
Labels
Overlays
Dialogs
Размеры и "оси"
! всё responsive по-умолчанию
1D:
2D:
Behave:
xnarrow
narrow
wide
xwide
full-width
xshort
short
tall
xtall
full-height
xsmall
small
large
xlarge
non-responsive
active
inactive
disabled
Косяки
Использовать inline-block тяжело!
Всегда помни о Baseline
ascenders/descenders
Proxima NOVA - пиксельный ад
Утром Vertical Rhythm - вечером стулья
Вертикальный ритм
Поддерживаемое
Одинаково везде
Наводим марафет
Software Design в моём CSS!
Унифицированный словарь
Простые правила
Инкапсуляция
Контекстонезависимый CSS
Позволяет лёгкую компоновку стилей
"Легкоусвояемая" архитектура
Чем так хорош BEM?
Контейнеры - почти монады
Feature-Oriented Design
Modifiers algebras
SRP
OCP
ISP
DSL
Modifiers == Specialization
DRY
Parameterized dimemsions
.sg-badge {
@include component;
@include fixText($badgeFontSize);
@include uppercaseText;
overflow: visible; // allow badges align as text
min-height: 0;
height: auto;
border-radius: $badgeFontSize;
font-weight: $fontWeightBold;
padding: 3px 6px;
background-color: $badgeDefaultBackgroundColor;
color: $badgeDefaultColor;
&--error {
background-color: $badgeErrorBackgroundColor;
color: $badgeErrorColor;
}
&--warning {
background-color: $badgeWarningBackgroundColor;
color: $badgeWarningColor;
}
&--with-animation {
transform: scale(0);
animation: sgBadgeAnimation 0.6s 2s forwards;
}
}FOD
.
.
.
.
.
.
.
.
Parameterization + Vector
Specialization
SRP
OCP
.
.
.
.
.
Код фриз
Фича флаги
Один новый "рынок"
Работаем над деталями
CI + CD
CDN
Infinite caching
Plain HTML + SCSS
Dev env mimics prod
Счастливые
Разработчики
дизайнеры
менеджеры
Пользователи
в шоке
Ну такое...
Другие Пользователи
Я ТВОЯ ТРУБА ШАТАЛ!
Технологии сложны
заботьтесь о пользователях
Frontend == FUN
Спасибо за внимание!
Style Guide
By Alexey Migutsky
Style Guide
OdessaJS 2016
