Тимофей Чаптыков «Верстальщик должен быть ленивый»
- 1. Верстальщик должен быть ленивый Тимофей Чаптыков t.chaptykov@2gis.ru @chaptykov
- 3. Holy war
- 4. — What are you doing when you don’t code? — Testing and debugging. “ 4
- 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
- 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. Скролл
- 30. Баги, баги
- 33. В реальной жизни
- 34. Можно было так
- 35. Или даже так
- 38. Меньше контроля → Baron 38
- 41. Проблемы подхода — разные устройства ввода; — разная частота событий; — инерция и другие особенности платформ. 41
- 42. Мало контроля 42
- 44. Baron — Статья на хабре: habrahabr.ru/company/2gis/blog/169359/ — Видео с Fronttalks: vimeo.com/74930126 — Исходный код: github.com/Diokuz/baron 44
- 45. Меньше контроля → Mindmap 45
- 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; }
- 72. Пат 72
- 73. Ахтунг — Прогрессбар на загрузку файлов; — визуальные редакторы; — и т. д. 73
- 74. Заключение 74
- 75. Как писать меньше кода — Смотреть на статистику; — не поддерживать в отдельных модулях браузеры и устройства, которые не поддерживает продукт в целом; — сохранять нативные механизмы; — меньше контроля на своей стороне. Тяжелая работа — браузеру. 75
- 76. Думайте про фичу, а не про код 76