Инструменты для увеличения продуктивности при работе над фронт-эндом Роман В. iBEC Systems, июль 2012

О чём пойдёт речь Редактор кода Редактор кода HTML5 BoilerplateHTML5 Boilerplate Препроцессоры CSSПрепроцессоры CSS

Редактор кода

Текстовый редактор Текстовый редактор IDEIDE Что-то ещё (командная строка?)Что-то ещё (командная строка?) Стоит изучить и настроить под себя как можно лучше Стоит изучить и настроить под себя как можно лучше –Поставить классный скин/подсветку кода –Горячие клавиши –Сниппеты –Плагины (!)

Плагины Программисты умный (ленивый) народ Программисты умный (ленивый) народ Под любую задачу есть свой инструмент Под любую задачу есть свой инструмент Пишутся для своего подхода к разработке Пишутся для своего подхода к разработке Что-то может не подойти нам Что-то может не подойти нам Что-то заставит пересмотреть и изменить свой процесс Что-то заставит пересмотреть и изменить свой процесс

Полезные плагины (Sublime Text 2) Zen CodingZen CodingZen CodingZen Coding –Туториал на русском на chrono.kz Туториал на русском на chrono.kz Туториал на русском на chrono.kz Подсветка ошибок в реальном времени (PHP, JS, CSS)Подсветка ошибок в реальном времени (PHP, JS, CSS) –SublimeLinter SublimeLinter Работа с FTP, SVN, Git Работа с FTP, SVN, Git –FTPSync, SVN, Git, Tortoise FTPSyncSVNGitTortoiseFTPSyncSVNGitTortoise AlignmentAlignmentAlignment Sidebar EnhancementsSidebar EnhancementsSidebar EnhancementsSidebar Enhancements CodeIntel – у меня так и не заработал на Win 7CodeIntel – у меня так и не заработал на Win 7CodeIntel

HTML5 Boilerplate

HTML5 что?.. HTML5 BoilerplateHTML5 Boilerplate Коллекция best practices для скорого начала работ над фронт-эндом Коллекция best practices для скорого начала работ над фронт-эндом Чтобы не начинать совсем с чистого листа Чтобы не начинать совсем с чистого листа Фундамент для сайта/веб-приложения Фундамент для сайта/веб-приложения Не просто reset.css, но и не CSS- фреймворк Не просто reset.css, но и не CSS- фреймворк Не зависит от выбранного CSS- фреймворка Не зависит от выбранного CSS- фреймворка

Что он в себя включает?

Условные комментарии для IE Не нужно выносить все стили для IE в отдельные файлы:Не нужно выносить все стили для IE в отдельные файлы:.navigation { margin: 10px 25px; }.lt-ie8. navigation { margin: 15px 30px; }

X-UA-Compatible –chrome=1 : если в IE установлено расширение Chrome Frame, использовать его –IE=edge : использовать последнюю доступную версию рендеринга документа в IE, а не Compatibility mode –Не нравится валидатору, но лечится добавлением одной строки в.htaccess

UTF-8 В HTML5 можно писать так, без ненужных аттрибутов, которые браузеры и так игнорировалиВ HTML5 можно писать так, без ненужных аттрибутов, которые браузеры и так игнорировали

jQuery include Либо с Google CDN, либо с локальной копии Либо с Google CDN, либо с локальной копии Protocol-relative URL, поддерживается всеми браузерамиProtocol-relative URL, поддерживается всеми браузерами

Modernizr JS-библиотекаJS-библиотека Определяет, какие возможности HTML5 и CSS3 поддерживает браузер клиента Определяет, какие возможности HTML5 и CSS3 поддерживает браузер клиента После проверки добавляет CSS-классы к элементу После проверки добавляет CSS-классы к элементу

Modernizr (2) Тесты на поддержку конкретной фичи для подгрузки polyfill-скрипта:Тесты на поддержку конкретной фичи для подгрузки polyfill-скрипта:Modernizr.load({ test: Modernizr.geolocation, test: Modernizr.geolocation, yep : 'geo.js', yep : 'geo.js', nope: 'geo-polyfill.js' nope: 'geo-polyfill.js'}); Коллекция полифиллов Коллекция полифиллов Коллекция полифиллов Коллекция полифиллов

.htaccess Настройки для внешних файлов CSS и шрифтов Настройки для внешних файлов CSS и шрифтов GzipGzip Заголовки истечения срока годности разных файлов для кэширования Заголовки истечения срока годности разных файлов для кэширования и т.д.и т.д.

Build-script (Apache Ant) Комбинирует и ужимает JS, CSSКомбинирует и ужимает JS, CSS Оптимизирует картинки (JPG, PNG)Оптимизирует картинки (JPG, PNG) Удаляет development-only код (console.log, тесты, профайлинг)Удаляет development-only код (console.log, тесты, профайлинг) От базового до аггрессивного сжатия HTMLОт базового до аггрессивного сжатия HTML Делает проверку имён файлов для возможности тяжёлого кэширования (до года)Делает проверку имён файлов для возможности тяжёлого кэширования (до года) Обновляет HTML, прописывая имена новых ужатых js- и css-файлов Обновляет HTML, прописывая имена новых ужатых js- и css-файлов Обновляет HTML, заставляя использовать мини- версию jQuery Обновляет HTML, заставляя использовать мини- версию jQuery Tutorial и WikiTutorial и WikiTutorialWikiTutorialWiki

Прочее Асинхронная подгрузка Гугл Аналитикс Асинхронная подгрузка Гугл Аналитикс IE6 background cacheIE6 background cache IE6 прозрачность в PNGIE6 прозрачность в PNG Стили для печати Стили для печати Стили-хелперы (image-replacement, hidden, clearfix)Стили-хелперы (image-replacement, hidden, clearfix) Файлы для тестирования (QUnit)Файлы для тестирования (QUnit) И т.д.И т.д.

Препроцессоры CSS

О чём поговорим? Чего не хватает CSSЧего не хватает CSS Фичи препроцессоров Фичи препроцессоров Распространённые заблуждения о них Распространённые заблуждения о них Что выбрать?Что выбрать?

Слабые стороны CSS Изменить основной цвет на сайте Изменить основной цвет на сайте –Ссылки –Бэкграунды –Кнопки –Тени Каждое изменение требует времени Каждое изменение требует времени Если стили разбиты на несколько файлов, усложняется поддержка CSS-кода Если стили разбиты на несколько файлов, усложняется поддержка CSS-кода Противоречит принципу DRY: в JS или PHP мы бы уже давно задали константу или написали функцию Противоречит принципу DRY: в JS или PHP мы бы уже давно задали константу или написали функцию

Слабые стороны CSS (2) Разбиение CSS на несколько файлов Разбиение CSS на несколько файлов Хорошо для разделения логики Хорошо для разделения логики –global.css –print.css –typography.css –buttons.css –... или означает дополнительный HTTP-запрос или означает дополнительный HTTP-запрос

Слабые стороны CSS (3) Низкое реюзабилити Низкое реюзабилити Все вендор-префиксы приходится прописывать вручную Все вендор-префиксы приходится прописывать вручную -webkit-border-radius: 10px; -moz-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; border-radius: 10px;

И каждый из них хорош

Препроцессоры что это? LESS, Sass, Stylus, Closure StylesheetsLESS, Sass, Stylus, Closure Stylesheets Практически тот же CSSПрактически тот же CSS Добавлены новые конструкции для реализации новых возможностей:Добавлены новые конструкции для реализации новых возможностей: –Переменные –Функции –Условные операторы –Циклы –И т.д. В конечном счёте всё написанное компилируется в самый обычный CSS-файлВ конечном счёте всё написанное компилируется в самый обычный CSS-файл

Возможности препроцессоров Основные фичи есть во всех препроцессорах Основные фичи есть во всех препроцессорах Они не добавляют новых возможностей (например, графических эффектов)Они не добавляют новых возможностей (например, графических эффектов) Улучшают наш рабочий процесс Улучшают наш рабочий процесс

Фичи: #4e6cb0; // LESS $my_blue: #4e6cb0; // Sass my_blue = #4e6cb0; // Stylus my_blue = #4e6cb0; // Stylus $primary_color: $my_blue; h1 { color: $primary_color; }

Фичи: Переменные (2) Другие примеры (не только цвета):Другие примеры (не только цвета): $font: Arial, Helvetica, sans-serif; $images-path:../img/; $font-size: 1.5em; $margin: 20px; $width: 80%; width: $width; background-image: url(#{$images-path}bg.png);

Фичи: Операции и цветовые функции Математические функции:Математические функции: width: 25px * px / 2 – 50px; // 100px color: # #666; // #FF6699 Цветовые функции:Цветовые функции: $light_blue : lighten($my_blue, 20%); $flashy_blue: saturate($my_blue, 50%); Свои функции: Свои my_func($param1, $param2) $param1 * $param2 - 10; }

Фичи: Mixins Функции, как lighten, возвращают значение Функции, как lighten, возвращают значение Миксины ничего не возвращают, только выдают CSS:Миксины ничего не возвращают, только выдают border-radius($radius = 10px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; border-radius: $radius;}.button border-radius(4px); }

Фичи: Вложенные правила.pop {.pop {}.pop-btn {=>.pop.pop-btn {} }}.link {.link {} &:hover {=>.link:hover {} }} Не делайте вложенность более 4 уровней Не делайте вложенность более 4 уровней

Фичи: Импорты и минимизация Импорты выглядят точно так же, как и в простом CSSИмпорты выглядят точно так же, как и в простом CSS Работают без ущерба производительности Работают без ущерба layout/two-column; Конечный CSS может быть как чистым, так и минимизированным Конечный CSS может быть как чистым, так и минимизированным #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font- weight:bold;text-decoration:underline} #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font- weight:bold;text-decoration:underline}

Заблуждение: "Мой бэкэнд должен быть на Руби или на Node.js!" Sass написан на RubySass написан на Ruby LESS и Stylus написаны на JavaScriptLESS и Stylus написаны на JavaScript Это не значит, что Ruby и Node.js нужны на продакшен-сервере для использования препроцессоров Это не значит, что Ruby и Node.js нужны на продакшен-сервере для использования препроцессоров Они нужны на компьютере разработчика Они нужны на компьютере разработчика

Заблуждение: Их сложно установить!" На Линуксе и Node.js, и Ruby устанавливаются одной командой На Линуксе и Node.js, и Ruby устанавливаются одной командой На Винде скачивается инсталлятор, Next, Next, Next и вуаля На Винде скачивается инсталлятор, Next, Next, Next и вуаля На Маке Ruby уже предустановлен, с Node.js тоже проблем нет На Маке Ruby уже предустановлен, с Node.js тоже проблем нет

Заблуждение: Их сложно установить! (2) gem install sass sass watch : sass watch : gem install compass compass create compass create compass watch compass watch

Заблуждение: Twitter Bootstrap использует LESS, он лучше!" По словам создателя TB, LESS был выбран потому что:По словам создателя TB, LESS был выбран потому что: –Он компилировался быстрее, чем Sass (скорее всего, уже неправда, потому что у Sass есть кэширование) –Они друзья с создателем LESS, поэтому он может попросить его быстро добавить какую-то фичу или исправить баг А вообще, есть Twitter Bootstrap на SassА вообще, есть Twitter Bootstrap на Sass

Какой препроцессор выбрать? У Sass есть полноценные условные операторы и операторы циклов, у LESS только guarded mixinsУ Sass есть полноценные условные операторы и операторы циклов, у LESS только guarded mixins В LESS невозможна интерполяция названий свойств CSS:В LESS невозможна интерполяция названий свойств CSS: padding-#{$name}: $value; Как результат этого, у Sass есть Compass, для LESS его невозможно сделать Как результат этого, у Sass есть Compass, для LESS его невозможно сделать

Какой препроцессор выбрать? (2) LESSSass.module-a {/* */}.module-b {.module-a;.module-a; border: 0; border: 0;} /* --- Результат --- */.module-a { /* Все стили.module-a */ } /* Все стили.module-a */ }.module-b { /* Все стили.module-a */ border: 0; /* Все стили.module-a */ border: 0;}.module-a {/* border: 0; border: 0;} /* --- Результат --- */.module-a,.module-b { /* Все стили.module-a */ /* Все стили.module-a */}.module-b { border: 0; border: 0;}

Какой препроцессор выбрать? (3) Активность разработки:Активность разработки:

Какой препроцессор выбрать? (4)

Sass 2 синтаксиса 2 синтаксиса –.scss : новый, почти как просто CSS –.sass : более ранняя версия, подход схож с CoffeeScript Огромный набор крутых фич с Compass Огромный набор крутых фич с Compass Помимо своих прямых обязанностей даёт широкий простор для фантазии Помимо своих прямых обязанностей даёт широкий простор для фантазиипростор для фантазиипростор для фантазии

Compass По сути, набор миксинов и других хелперов:По сути, набор миксинов и других хелперов: –CSS3 –Типографика –Спрайты –Много чего compass/css3/border-radius;.button border-radius(10px); }

Прибитый футер на Compass демонстрация

Дебаг Плагин FireSass для Firebug Плагин FireSass для Firebug compass watch --debug-info

Полезные ссылки и туториалы HTML5 Boilerplate HTML5 Boilerplate website Видео внизу страницы Sass Sass websiteSass websiteSass websiteSass website Sass ReferenceSass ReferenceSass ReferenceSass Reference Конвертер из LESS в Sass Конвертер из LESS в Sass Compass website

Спасибо за внимание! Вопросы?