adn@it'summer - Как ленивые фронтенды себе жизнь упрощают
TRANSCRIPT
![Page 1: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/1.jpg)
КАК ЛЕНИВЫЕ ФРОНТЕНДЫ СЕБЕ ЖИЗНЬ УПРОЩАЮТ
adn.agency
![Page 2: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/2.jpg)
2Боль
1. Огромные CSS файлы
2. Невозможно переиспользовать код
3. Сложности поддержки проектов
4. Склеивание и минификация файлов
5. Префиксы для css3
6. Работа со спрайтами
7. Невозможность использовать новые фичи javasccript
![Page 3: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/3.jpg)
3
Препроцессоры. Зачем эти сложности?
![Page 4: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/4.jpg)
4Переменные
![Page 5: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/5.jpg)
5Вложенность
![Page 6: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/6.jpg)
6Миксины
![Page 7: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/7.jpg)
7Миксины с правилами
Результат выполнения
![Page 8: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/8.jpg)
8Импорты
![Page 9: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/9.jpg)
9Проблемы, о которых мы уже забыли
1. Огромные CSS файлы
2. Невозможно переиспользовать код
3. Сложности поддержки проектов
![Page 10: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/10.jpg)
10Немного о PostCSS
1. Это не препроцессор
2. Это не пост процессор
3. Это новый подход к работе с css
![Page 11: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/11.jpg)
11Autoprefixer
https://github.com/postcss/autoprefixer
Автоматически добавляет префиксы
Результат выполнения
![Page 12: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/12.jpg)
12Short
https://github.com/jonathantneal/postcss-short
Мощный PostCSS плагин, позволяющий сокращать написание CSS кода.
Результат выполнения
![Page 13: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/13.jpg)
13CSS Next
http://cssnext.io/
Позволяет использовать возможности CSS-4 уже сегодня.
Кастомные селекторы
Улучшенный синтаксис медиа-запрос
![Page 14: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/14.jpg)
14CSS Next
http://cssnext.io/
Позволяет использовать 10 различных CSS фильтров:
‣ grayscale
‣ sepia
‣ saturate
‣ hue-rotate
‣ invert
‣ opacity
‣ brightness
‣ contrast
‣ blur
‣ drop-shadow
.blur {
filter: blur(4px);
}
![Page 16: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/16.jpg)
16package.json
Список зависимостей, которые нужно установить
![Page 17: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/17.jpg)
17Gruntfile
Файл конфигурации
http://gruntjs.com/
Подключение плагинов
Конфигурация каждойзадачи
![Page 22: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/22.jpg)
22grunt-contrib-watch
Отслеживает изменения файлов и запускает нужные задачи
https://github.com/gruntjs/grunt-contrib-watch
Определяем отслеживание изменения LESS файлов и запускаем необходимые задачи
![Page 23: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/23.jpg)
23grunt-svg-sprite
Генерирует SVG спрайт
https://www.npmjs.com/package/grunt-svg-sprite
![Page 24: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/24.jpg)
24grunt-spritesmith
Генерирует PNG спрайт
https://github.com/Ensighten/grunt-spritesmith
![Page 26: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/26.jpg)
26grunt-babel
Позволяет использовать ES6
https://github.com/babel/grunt-babel
![Page 27: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/27.jpg)
27Еще раз вспомним для чего это все нужно
1. Огромные CSS файлы
2. Невозможно переиспользовать код
3. Сложности поддержки проектов
4. Склеивание и минификация файлов
5. Префиксы для css3
6. Работа со спрайтами
7. Невозможность использовать новые фичи javasccript
![Page 28: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/28.jpg)
28
БЭМ - что это и зачем?
![Page 29: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/29.jpg)
29БЭМ - что это и зачем?
1. Разработчик должен понимать свой код и код любого программиста в команде БЭМ-проекта.
2. Любой блок кода может быть использован повторно
3. Работая в одной команде, разработчики, менеджеры, дизайнеры и верстальщики должны называть одни и те же вещи одинаково.
4. Команды могут обмениваться специалистами для реализации какой-то конкретной функциональности.
5. Порог входа при переходе на новый проект должен быть снижен за счет одинаковой структуры организации всех БЭМ-проектов и одинаковых правил именования всех сущностей.
![Page 30: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/30.jpg)
30Структура элемента
Самый высокий уровень абстракции компонента..block
Дочерний элемент .block помогающий поддерживать его целостность..block__element
Другое состояние или версия .block..block--modifier
![Page 31: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/31.jpg)
31БЭМ vs Каскадирование
Специфичность данного селектора очень велика.
Как обрабатывает «машина» код в этом случае: сначала все <a>, потом <a>, вложенные в <li> и так далее.
«Выравниваем» специфичность между элементами DOM.
Обработка <a class="top-menu-item__link">. То есть браузер сразу же нашел ссылку по селектору .top-menu-item__link.
![Page 32: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/32.jpg)
32
Не заморачивайтесь,упрощайте процесс разработки
![Page 33: Adn@it'summer - Как ленивые фронтенды себе жизнь упрощают](https://reader033.vdocuments.net/reader033/viewer/2022051404/58ecfe471a28ab02448b4575/html5/thumbnails/33.jpg)
Технический директор ADN digital studio
Михаил Полев [email protected]
Спасибо за внимание!
goo.gl/948xcb
Ссылка на презентацию: