Большую часть рабочего времени мы занимаемся не написанием новой функциональности, а тестированием, исправлением ошибок, рефакторингом. При этом писать классные фичи всем нравится гораздо больше, чем искать причину очередного хитроумного бага. Как сделать так, чтобы ошибок стало меньше, и мы могли тратить время на то, что доставляет удовольствие?

1. Верстальщик должен быть
ленивый
Тимофей Чаптыков
t.chaptykov@2gis.ru @chaptykov

3. Holy war

4. — What are you doing when you don’t code?
— Testing and debugging.
“
4

5. Поддержка браузеров
5

6. Yes, cap!

7. Поддержка браузеров → «На всякий случай»
7

8. /* Префиксы */
.class {
-khtml-border-radius: 10px;
border-radius: 10px;
}

9. 6 посещений за прошедший месяц на 2gis.ru
9

10. ~ 0.00% согласно Google Analytics
10

11. ~ 128 МБ трафика
11

12. /* Градиенты */
.class {
background: #000;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIH
htbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMT
AwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbm
VhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3
BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2
Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3
RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPg
ogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD
0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz
4KPC9zdmc+);
background: -moz-linear-gradient(top, #000 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, #000), color-stop(100%, #fff));
background: -webkit-linear-gradient(top, #000 0%, #fff 100%);
background: -o-linear-gradient(top, #000 0%, #fff 100%);
background: -ms-linear-gradient(top, #000 0%, #fff 100%);
background: linear-gradient(to bottom, #000 0%, #fff 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000',
endColorstr='#fff', GradientType=0);
}

13. /*
Firefox 16+ (13 версий назад), Chrome 26+ (10),
Safari 6.1+ (2), Opera 12.1+ (8), IE10+ (2),
iOS, Android, Opera Mobile, Android Chrome, IE Mobile,
IE9- не взрываются, просто показывают сплошной фон
*/
.class {
background: #000;
background: linear-gradient(to bottom, #000, #fff);
}

14. <!-- Метатеги -->
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="cleartype" content="on">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, height=device-height,
initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"t;
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="imagetoolbar" content="black-translucent">
<meta http-equiv="msthemecompatible" content="no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<!-- ... -->

15. Поддержка браузеров → Рискованные решения
15

16. Flexbox на мобилках
16

17. Нужно ли это
17

18. Нужно ли это → JS-анимация
18

19. Нужно ли это → Кастомизация форм
19

20. Элементы интерфейса должны быть родными для браузера и системы
20

22. Готовые решения
— Chosen
— Select2
— LinkSelect
— Image Combo Box
— QuickSelect
— тысячи их
22

23. Килобайты
84 КБ
jquery.js
27 КБ+
chosen.js
11 КБ+
chosen.css
122 КБ=
23

24. Оверкил
— подгрузка вариантов;
— Поиск по элементам;
— поддержка письма справа-налево.
24

25. Пишем сами

26. Optgroup

27. Много текста

28. Скролл

29. Управление с клавиатуры
29

30. Баги, баги

33. В реальной жизни

34. Можно было так

35. Или даже так

36. Меньше контроля
36

37. Больше, больше контроля

38. Меньше контроля → Baron
38

39. Много контроля
39

41. Проблемы подхода
— разные устройства ввода;
— разная частота событий;
— инерция и другие особенности платформ.
41

42. Мало контроля
42

44. Baron
— Статья на хабре: habrahabr.ru/company/2gis/blog/169359/
— Видео с Fronttalks: vimeo.com/74930126
— Исходный код: github.com/Diokuz/baron
44

45. Меньше контроля → Mindmap
45

47. Много контроля
47

51. Мало контроля
51

52. <!-- Структура -->
<h1>Mindmap root</h1>
<ol>
<li>
Element
<ol>
<li>Element</li>
<li>Element</li>
<!-- ... -->
</ol>
</li>
<!-- ... -->
</ol>

53. <!-- Узлы -->
<h1>Mindmap root</h1>
<ol>
<li>
Element
<ol>
<li>Element</li>
<li>Element</li>
<!-- ... -->
</ol>
</li>
<!-- ... -->
</ol>

54. <!-- Список дочерних узлов -->
<h1>Mindmap root</h1>
<ol>
<li>
Element
<ol>
<li>Element</li>
<li>Element</li>
<!-- ... -->
</ol>
</li>
<!-- ... -->
</ol>

55. <!-- Список дочерних узлов -->
<h1>Mindmap root</h1>
<ol>
<li>
Element
<ol>
<li>Element</li>
<li>Element</li>
<!-- ... -->
</ol>
</li>
<!-- ... -->
</ol>

56. <!-- Немного БЭМ -->
<h1 class="node node_root">Mindmap root</h1>
<ol class="children">
<li class="children__item">
<div class="node">Element</div>
<ol class="children">
<li class="children__item">
<div class="node">Element</div>
</li>
<li class="children__item">
<div class="node">Element</div>
</li>
<!-- ... -->
</ol>
</li>
<!-- ... -->
</ol>

57. /* Все позиционирование двумя CSS-правилами */
.node {
display: inline-block;
vertical-align: middle;
}
.children {
display: inline-block;
vertical-align: middle;
list-style: none;
}

60. Добавляем стили для псевдоэлементов
60

62. Бонусы
— Мало весит;
— везде работает;
— вектор;
— можно напечатать.
62

64. Меньше контроля → Photor
64

66. // Вписываем фотографию в произвольный блок
function fitImage() {
// ...
}
// Resize
// Debounce|Throttle
// On load
// Все равно не заработает для скрытых блоков

67. /* Вписываем фотографию в произвольный блок */
.image {
background-size: contain;
}
@media (max-width: 400px) {
.image {
background-size: cover;
}
}

69. /* Неожиданный бонус */
.image {
background-size: contain;
background-attachment: fixed;
}

71. Photor
github.com/2gis/photor
71

72. Пат
72

73. Ахтунг
— Прогрессбар на загрузку файлов;
— визуальные редакторы;
— и т. д.
73

74. Заключение
74

75. Как писать меньше кода
— Смотреть на статистику;
— не поддерживать в отдельных модулях браузеры и устройства,
которые не поддерживает продукт в целом;
— сохранять нативные механизмы;
— меньше контроля на своей стороне. Тяжелая работа — браузеру.
75

76. Думайте про фичу, а не про код
76

78. Тимофей Чаптыков
t.chaptykov@2gis.ru
@chaptykov
78