Блог Леонида Лукина, страница 5

  • Web-технологии
    Bourbon - SASS библиотека для быстрого создания дизайна сайтов

    Для начала - что такое Bourbon (Бурбон). Bourbon - это простая и очень "легкая" (в смысле размера в байтах) библиотека mixin-ов для SASS (некий аналог Compass). Другими словами, это возможность легко и просто делать сложные вещи на CSS (естественно, если для генерации CSS вы используете именно SASS). Использовать ее можно в любых веб-проектах, особенно же удобно использовать его в связке с Ruby on Rails.

    В каких браузерах может работать эта библиотека:

    Chrome 26+
    Firefox 29+
    Internet Explorer 9+
    Opera 15+
    Safari 6.1+

    Другими словами, сейчас Бурбон будет работать практически у всех.

    Установка Bourbon

    Установка может быть легко проведена используя менеджер пакетов RubyGems: 

    $ gem install bourbon

    Альтернативно Бурбон можно поставить и при помощи Bower: 

    $ bower install bourbon

    Ставим файлы библиотеки в текущую директорию (вы уж сами решите, в какой папке проекта вам удобно их хранить): 

    $ bourbon install

    Все установлено, теперь для использования библиотеки миксинов сделайте импорт в начале вашего стилевого файла: 

    @import "bourbon/bourbon";

    Примечание: строго не рекомендуетя изменять файлы библиотеки Bourbon для того, чтобы потом иметь возможность обновлять ее без особых проблем: 

    $ bourbon update

    Установка Bourbon в Ruby on Rails 3+ проект

    Для Рельсов установка Bourbon еще быстрее и проще. Пишем в Gemfile проекта: 

    gem 'bourbon'

    Запускаем: 

    $ bundle install

    Перезапускаем сервер и переименовываем application.css в application.scss (если этого не было сделано ранее): 

    $ mv app/assets/stylesheets/application.css 
     app/assets/stylesheets/application.scss

    Удаляем все(!!!) директивы Sprockets в application.scss и в дальнейшем используем только нативный импорт SASS - директиву @import.

    Импортируем Bourbon в самом начале application.scss. Все другие стилевые файлы приложения можно будет импортировать уже только после импорта Bourbon: 

    @import "bourbon";
@import "home";
@import "users";

    Использование Bourbon

    Очень большое преимущество возникает при использовании Bourbon не саму по себе, как библиотеку, а как "опорный" код для Neat (CSS/SASS-фреймворк для создания макетов страниц, гридов), Bitters (скаффолд для быстрого создания дизайна страниц) и Refills (готовые шаблонные компоненты элементов веб-страниц), совместное использование которых дает такой же результат, как и использование CSS-фреймворков аналогов: 960 Grid System, Twitter Bootstrap, Foundation и пр. И группа Bourbon/Neat/Bitters/Refills имеет множество преимуществ перед конкурентами - логичная и стройная семантика, скорость разработки, гибкость, оптимальный-минимальный объем кода на выходе, легкость поддержки кода и пр.

    Об этих фреймворках я еще расскажу в будущем, но вернемся сугубо к Бурбону.

    Маленький пример использования. Допустим нам необходимо сделать красивую кнопку. Пишем просто HTML код кнопки: 

    <button>Pill Button</button>

    А в стилевом файле подгружаем для нее соответствующий миксин от Бурбона: 

    button {
 @include button(pill);
}

    И на выходе получаем кнопку вида:

    Различные интересные миксины, на которые стоит обратить внимание

    Animation - различные виды и типа CSS-анимации

    Background - сложные случае указания фона
    Background Image - фоновые изображения
    Border Image - изображения в качестве рамки элемента
    Font Face - задание шрифтов для текста
    Image Rendering - оптимизация скорости загрузки изображения на веб-страницу
    Linear Gradient - реализация линейного градиента методами CSS
    Radial Gradient - аналогично, но радиальный градиент
    Border Radius - создание скругленных рамок
    Triangle - создание треугольников на CSS

    Список всех остальных максинов от Bourbon, SASS-функций и SASS-плагинов этой библиотеки можно посмотреть по ссылке, указанной ниже.

    Полезные ссылки


    Опубликовано: 08.06.2015Категория: Web-технологииКомментарии: 0
  • Web-технологии
    Определение типа устройства пользователя и разрешения экрана при помощи JavaScript

    <script>
  var agent = navigator.userAgent;
  var isWebkit = (agent.indexOf("AppleWebKit") > 0);
  var isIPad = (agent.indexOf("iPad") > 0);
  var isIOS = (agent.indexOf("iPhone") > 0 || agent.indexOf("iPod") > 0);
  var isAndroid = (agent.indexOf("Android") > 0);
  var isNewBlackBerry = (agent.indexOf("AppleWebKit") > 0 && agent.indexOf("BlackBerry") > 0);
  var isWebOS = (agent.indexOf("webOS") > 0);
  var isWindowsMobile = (agent.indexOf("IEMobile") > 0);
  var isSmallScreen = (screen.width < 767 || (isAndroid && screen.width < 1000));
  var isUnknownMobile = (isWebkit && isSmallScreen);
  var isMobile = (isIOS || isAndroid || isNewBlackBerry || isWebOS || isWindowsMobile || isUnknownMobile);
  var isTablet = (isIPad || isMobile && !isSmallScreen);
</script>

    Опубликовано: 19.04.2015Категория: Web-технологииКомментарии: 0
  • Ruby on Rails
    Как правильно перейти на новую версию Ruby on Rails

    Ниже приведена "шпаргалка" на тему перевода Ruby on Rails проекта на новую верисю Rails. Итак, по шагам:

    1. Сначала желательно обновить Ruby gem менеджер: 

    $ gem update --system

    2. Указываем новый gemset для новой версии Rails в .ruby-gemset (если вы используете такую схему указания гемсетов). При этом новую версию Rails можно уточнить тут - https://rubygems.org/gems/rails) 

    название-приложения-rails-версия

    3. Создаем новый gemset (для этого можно просто выйти и снова войти в папку приложения) 

    $ cd .

    4. Обновить версию Rails в Gemfile 

    gem 'rails', '4.2.1'

    5. Обновить все темы, сначала удалить файл Gemfile.lock, а потом запустив команду 

    bundle install

    6. Теперь нужно обязательно не забыть обновить конфигурационный файлы Rails: 

    $ bin/rake rails:update

    При этом не стоит бездумно переписывать файлы конфигурации, так как в них содержатся внесенные вами ранее изменения. Для отслеживания изменений используйте клавишу d. Если изменения коснутся данных, внесенных вами - придется потом снова их вводить! Сохраняйте информацию по этим изменениям заблаговременно!!!

    Опубликовано: 29.03.2015Категория: Ruby on RailsКомментарии: 0
  • Web-технологии
    Google Analytics фильтр - не учитывать мои посещения

    Распространенная задача для настройки Google Analytics - как не учитывать свои посещения при анализе статистики сайта. Как вообще "отбрасывать" данные о посещении сайта вашими сотрудниками из вашего офиса? Смотрим короткий видео-урок по настройке нужного фильтра Google Analytics:

    Опубликовано: 28.02.2015Категория: Web-технологииКомментарии: 1
  • Изучение английского языка
    Как принято здороваться по английски

    А вот это точно нужно знать, ибо говорить "здорово", "привет" и пр., находясь в англоязычных странах, приходится чуть ли не по сотни раз на дню. И делать это нужно непринужденно и уверенно, чтобы, во-первых, сразу наладить контакт, а, во-вторых, не показаться невежливым. Хотите стать экспертом в этом вопросу за считанные минуты? Смотрим обучающий видео-урок на тему "Как здороваться по английски" и разбираемся во всех этих "Hey", "Hi", "Hello", "Greetings", "How are you?", "How are you doing?" и так далее и так далее. Смотрим, повторяем, используем!!!

    P.S. Не забываем при этом улыбаться!!! Ведь это тоже очень важная часть ритуала английского приветствия!!!

    Опубликовано: 17.11.2014Категория: Изучение английского языкаКомментарии: 1