Your SlideShare is downloading. ×
0
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Тимофей Чаптыков «Верстальщик должен быть ленивый»
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

182

Published on

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

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

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

  • Be the first to like this

No Downloads
Views
Total Views
182
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×