1 / 46

Инструменты для увеличения продуктивности при работе над фронт-эндом

Инструменты для увеличения продуктивности при работе над фронт-эндом. Роман В. iBEC Systems, июль 2012. О чём пойдёт речь. Редактор кода HTML5 Boilerplate Препроцессоры CSS. Редактор кода. Редактор кода. Текстовый редактор IDE Что-то ещё (командная строка?)

noah
Download Presentation

Инструменты для увеличения продуктивности при работе над фронт-эндом

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

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

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

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

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

  7. HTML5 Boilerplate

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

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

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

  11. X-UA-Compatible <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> • chrome=1: если в IE установлено расширение ChromeFrame, использовать его • IE=edge: использовать последнюю доступную версию рендеринга документа в IE, а не Compatibility mode • Не нравится валидатору, но лечится добавлением одной строки в .htaccess

  12. UTF-8 <meta charset="utf-8"> • В HTML5 можно писать так, без ненужных аттрибутов, которыебраузеры и так игнорировали

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

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

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

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

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

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

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

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

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

  22. Слабые стороны CSS (2) • Разбиение CSS на несколько файлов • Хорошо для разделения логики • global.css • print.css • typography.css • buttons.css • ... • Каждый @import или <link rel=“stylesheet” > означает дополнительный HTTP-запрос

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

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

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

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

  27. Фичи: Переменные @my_blue: #4e6cb0; // LESS $my_blue: #4e6cb0; // Sass my_blue = #4e6cb0; // Stylus $primary_color: $my_blue; h1 { color: $primary_color; }

  28. Фичи: Переменные (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);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  44. Дебаг • ПлагинFireSassдля Firebug compass watch <path> --debug-info

  45. Полезные ссылки и туториалы HTML5 Boilerplate • HTML5 Boilerplate website • Видео внизу страницы Sass • Sass website • Sass Reference • http://css-tricks.com/sass-vs-less/ • http://verekia.com/slides/css-preprocessors • Конвертер из LESS в Sass • Compass website

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

More Related