Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"
•
0 likes•629 views
2 июля 2012, Я.Субботник в Екатеринбурге Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса" О докладе: «Куда идём мы с Пятачком, большой-большой секрет, и не расскажем мы о нём...», но сегодня мы расскажем куда идёт верстка и верстальщики Яндекса, какими современными технологиями мы уже пользуемся, а на какие активно засматриваемся.
Report
Share
Олег Мохов "Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса"
- 1. Куда идём мы с Пятачком, или О том, куда движется вёрстка и верстальщики Яндекса. Олег Мохов Верстальщик Я.Субботник, Екатеринбург, 2 июля 2011 года
- 6. 6
- 7. Вышел в 2001 году Очень много проблем и неподдерживаемых решений Доля в рунете 2.6% и продолжает снижаться 6
- 8. Вышел в 2006 году Проблемы почти те же Доля в рунете 5.7% 7
- 9. 8
- 10. FF4 IE 8
- 11. 9
- 12. 4 элемента 9
- 13. 4 элемента разные решения в разных ситуациях 9
- 14. 4 элемента разные решения в разных ситуациях время на внедрить и протестировать 9
- 15. 4 элемента разные решения в разных ситуациях время на внедрить и протестировать удар по скорости рендеринга 9
- 16. 10
- 18. Chrome Firefox Opera IE 12
- 19. 13
- 20. CSS3 свойства HTML5 Не фиксим png24 В разных браузерах может различаться порядок блоков 13
- 21. CSS3 14
- 22. CSS3 border-radius border-image gradients transitions flexbox ... 14
- 23. FF IE 15
- 24. border-radius + before: FF IE 15
- 25. border-radius + before: нет уголка FF IE 15
- 26. border-radius + before: нет png24 fix нет уголка FF IE 15
- 27. 16
- 28. FF IE 17
- 29. FF IE placeholder 17
- 30. 18
- 31. 18
- 32. + transition 18
- 33. + transition 18
- 35. Доклад Олега Мохова на Я.Субботнике в Киеве http://video.yandex.ru/users/ya-events/view/276/ 20
- 36. Тачевая вёрстка
- 37. 22
- 38. iOS Android 23
- 39. Доклад Владимира Гриненко на Я.Субботнике в Киеве http://video.yandex.ru/users/ya-events/view/277/ 24
- 40. Каждый верстальщик Яндекса будет заниматься тачевой вёрсткой 25
- 41. Хочется всё и сразу 26
- 42. Производительность Хочется всё и сразу 26
- 43. На сервере 27
- 44. На сервере • Обфускация 27
- 45. На сервере • Обфускация • Уменьшение количества запросов к серверу 27
- 46. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок 27
- 47. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок • Правильные http-заголовки 27
- 48. На сервере • Обфускация • Уменьшение количества запросов к серверу • Оптимизация картинок • Правильные http-заголовки 27
- 49. На клиенте 28
- 50. На клиенте • Не использовать каскад 28
- 51. На клиенте • Не использовать каскад • Не селектить по тегам 28
- 52. На клиенте • Не использовать каскад • Не селектить по тегам • Растягивать DOM вширь, а не вглубь 28
- 53. Конкретнее 29
- 54. Конкретнее • png24 спрайты с фильтром тормозят в IE 29
- 55. Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF 29
- 56. Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF • box-shadow inset с шириной > 10px тормозит 29
- 57. Конкретнее • png24 спрайты с фильтром тормозят в IE • много селекторов + способны повесить FF • box-shadow inset с шириной > 10px тормозит • transition цвета даёт большую нагрузку на процессор 29
- 58. 30
- 59. Обнаружили и исследовали 31
- 60. Исследовали и обнаружили 31
- 62. Чего исследовать? • CSS-свойства 32
- 63. Чего исследовать? • CSS-свойства • Сочетание свойств друг с другом 32
- 64. Чего исследовать? • CSS-свойства • Сочетание свойств друг с другом • Как правильно строить DOM 32
- 65. Чего исследовать? • CSS-свойства • Сочетание свойств друг с другом • Как правильно строить DOM • Разные форматы графики 32
- 66. Выяснили 33
- 67. Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях 33
- 68. Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях • data:uri картинки рендерятся так же быстро, как и обычные картинки 33
- 69. Выяснили • CSS3 свойства зачастую сильно быстрее экстра разметки, но не во всех случаях • data:uri картинки рендерятся так же быстро, как и обычные картинки • Псевдоселекторы быстрее с указанием имени элемента (.link:hover → a.link:hover) 33
- 70. Доклад Михаила Корепанова на Я.Субботнике в Киеве http://video.yandex.ru/users/ya-events/view/275/ 34
- 71. Куда мы идём? 35
- 72. Куда мы идём? • Новые технологии и graceful degradation 35
- 73. Куда мы идём? • Новые технологии и graceful degradation • Тачевая вёрстка 35
- 74. Куда мы идём? • Новые технологии и graceful degradation • Тачевая вёрстка • Ускорение рендеринга 35
- 76. Самоускорение
- 77. CodeStyle 38
- 78. Группировка CSS-свойств • шрифт • позиционирование • отображение • размеры • таблицы/списки • текст • цвета/эффекты 39
- 79. .b-switcher__tumbler { width: 33px; height: 13px; margin: 0 5px; display: -moz-inline-box; display: inline-block; vertical-align: middle; text-align: left; border: 1px solid #bbb5b3; background: #a1a1a1; -moz-border-radius: 3px; /* Firefox */ -webkit-border-radius: 3px; /* Safari, Chrome */ border-radius: 3px; -moz-box-shadow: inset -2px 2px 3px 0 #666; /* Firefox */ -webkit-box-shadow: inset -2px 2px 3px 0 #666; /* Safari, Chrome */ box-shadow: inset -2px 2px 3px 0 #666; }
- 80. CSSComb http://csscomb.ru/ 41
- 81. ZenCoding 42
- 82. ZenHTML 43
- 83. ZenHTML div.my1 + div.my2 > ul > li * 5 43
- 84. ZenHTML <div class='my1'></div> <div class='my2'> <ul> <li></li><li></li><li></li><li></li><li></li> </ul> </div> 43
- 85. ZenCSS po:r → position: relative po:a → position: absolute po:s → position: static f:l → float: left f:r → float: right 44
- 86. ZenCSS po:r 45
- 87. ZenCSS por 46
- 88. ZenCSS por → position: relative poa → position: absolute pos → position: static fl → float: left fr → float: right 47
- 89. HayakuBundle po:r + por 48
- 90. HayakuBundle por;fl;tal;m0 49
- 91. HayakuBundle position: relative; float: left; text-align: left; margin: 0; 49
- 92. HayakuBundle margin-left: 10px margin-left: 1.1em 50
- 93. HayakuBundle margin-left: 10px 1 margin-left: 1.1em 50
- 94. HayakuBundle margin-left: 10px 2 margin-left: 1.1em 50
- 95. HayakuBundle https://github.com/kizu/Hayaku.tmbundle https://twitter.com/#!/HayakuBundle 51