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