Тимофей Чаптыков «Верстальщик должен быть ленивый»

1,080 views

Published on

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

Published in: Software
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,080
On SlideShare
0
From Embeds
0
Number of Embeds
551
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Тимофей Чаптыков «Верстальщик должен быть ленивый»

  1. 1. Верстальщик должен быть ленивый Тимофей Чаптыков t.chaptykov@2gis.ru @chaptykov
  2. 2. Holy war
  3. 3. — What are you doing when you don’t code? — Testing and debugging. “ 4
  4. 4. Поддержка браузеров 5
  5. 5. Yes, cap!
  6. 6. Поддержка браузеров → «На всякий случай» 7
  7. 7. /* Префиксы */ .class { -khtml-border-radius: 10px; border-radius: 10px; }
  8. 8. 6 посещений за прошедший месяц на 2gis.ru 9
  9. 9. ~ 0.00% согласно Google Analytics 10
  10. 10. ~ 128 МБ трафика 11
  11. 11. /* Градиенты */ .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); }
  12. 12. /* 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); }
  13. 13. <!-- Метатеги --> <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"> <!-- ... -->
  14. 14. Поддержка браузеров → Рискованные решения 15
  15. 15. Flexbox на мобилках 16
  16. 16. Нужно ли это 17
  17. 17. Нужно ли это → JS-анимация 18
  18. 18. Нужно ли это → Кастомизация форм 19
  19. 19. Элементы интерфейса должны быть родными для браузера и системы 20
  20. 20. Готовые решения — Chosen — Select2 — LinkSelect — Image Combo Box — QuickSelect — тысячи их 22
  21. 21. Килобайты 84 КБ jquery.js 27 КБ+ chosen.js 11 КБ+ chosen.css 122 КБ= 23
  22. 22. Оверкил — подгрузка вариантов; — Поиск по элементам; — поддержка письма справа-налево. 24
  23. 23. Пишем сами
  24. 24. Optgroup
  25. 25. Много текста
  26. 26. Скролл
  27. 27. Управление с клавиатуры 29
  28. 28. Баги, баги
  29. 29. В реальной жизни
  30. 30. Можно было так
  31. 31. Или даже так
  32. 32. Меньше контроля 36
  33. 33. Больше, больше контроля
  34. 34. Меньше контроля → Baron 38
  35. 35. Много контроля 39
  36. 36. Проблемы подхода — разные устройства ввода; — разная частота событий; — инерция и другие особенности платформ. 41
  37. 37. Мало контроля 42
  38. 38. Baron — Статья на хабре: habrahabr.ru/company/2gis/blog/169359/ — Видео с Fronttalks: vimeo.com/74930126 — Исходный код: github.com/Diokuz/baron 44
  39. 39. Меньше контроля → Mindmap 45
  40. 40. Много контроля 47
  41. 41. Мало контроля 51
  42. 42. <!-- Структура --> <h1>Mindmap root</h1> <ol> <li> Element <ol> <li>Element</li> <li>Element</li> <!-- ... --> </ol> </li> <!-- ... --> </ol>
  43. 43. <!-- Узлы --> <h1>Mindmap root</h1> <ol> <li> Element <ol> <li>Element</li> <li>Element</li> <!-- ... --> </ol> </li> <!-- ... --> </ol>
  44. 44. <!-- Список дочерних узлов --> <h1>Mindmap root</h1> <ol> <li> Element <ol> <li>Element</li> <li>Element</li> <!-- ... --> </ol> </li> <!-- ... --> </ol>
  45. 45. <!-- Список дочерних узлов --> <h1>Mindmap root</h1> <ol> <li> Element <ol> <li>Element</li> <li>Element</li> <!-- ... --> </ol> </li> <!-- ... --> </ol>
  46. 46. <!-- Немного БЭМ --> <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>
  47. 47. /* Все позиционирование двумя CSS-правилами */ .node { display: inline-block; vertical-align: middle; } .children { display: inline-block; vertical-align: middle; list-style: none; }
  48. 48. Добавляем стили для псевдоэлементов 60
  49. 49. Бонусы — Мало весит; — везде работает; — вектор; — можно напечатать. 62
  50. 50. Меньше контроля → Photor 64
  51. 51. // Вписываем фотографию в произвольный блок function fitImage() { // ... } // Resize // Debounce|Throttle // On load // Все равно не заработает для скрытых блоков
  52. 52. /* Вписываем фотографию в произвольный блок */ .image { background-size: contain; } @media (max-width: 400px) { .image { background-size: cover; } }
  53. 53. /* Неожиданный бонус */ .image { background-size: contain; background-attachment: fixed; }
  54. 54. Photor github.com/2gis/photor 71
  55. 55. Пат 72
  56. 56. Ахтунг — Прогрессбар на загрузку файлов; — визуальные редакторы; — и т. д. 73
  57. 57. Заключение 74
  58. 58. Как писать меньше кода — Смотреть на статистику; — не поддерживать в отдельных модулях браузеры и устройства, которые не поддерживает продукт в целом; — сохранять нативные механизмы; — меньше контроля на своей стороне. Тяжелая работа — браузеру. 75
  59. 59. Думайте про фичу, а не про код 76
  60. 60. Тимофей Чаптыков t.chaptykov@2gis.ru @chaptykov 78

×