Тема достаточно освещенная, но для меня, как новичка в мире Mac OS X - очередное маленькое открытие. Вопрос связан с одной небольшой проблемой - выбором файловой системы для флешек.

Для пары Windows + Linux обычным решением является файловая система NTFS. Обе операционные системы с ней прекрасно работают - чтение+запись.

Для пары Mac OS X + Linux такой выбор не подойдет, так как NTFS в Mac OS X имеет поддержку только чтения. Для записи нужно ставить сторонний софт, типа Paragon. Это не является решением - нужна нативная поддержка в обеих системах.

Решением является файловая система ExFAT. В Mac OS X у нее есть поддержка “из коробки”. В Linux поддержки “из коробки” нет - но проблема решается установкой дополнительных пакетов (как почти всегда).

Более того, в Сети пишут о системе ExFAT как изначально созданной для флеш-накопителей. Что она умеет бережно относится к флешкам и поддерживает размер более 4Gb.

Все отлично - ставлю ее на обе свои флешки: Apacer 8Gb и Transcend 16Gb. Начну с более сложного - с системы Linux.

ExFAT - установка в Linux

Для включения поддержки файловой системы в Linux нужно установить пару пакетов -

1

exfat-fuse

1

exfat-utils

$ sudo apt-get install exfat-fuse exfat-utils

Скажу, что приведенная выше команда на моей системе Linux Mint 17 Cinnamon оказалась действенной - все пакеты установились без проблем и поддержка ExFAT в системе появилась сразу же.

В Интернете почти на всех ресурсах приведена другая команда для установки пакетов

1

exfat-fuse

1

exfat-utils

$ sudo add-apt-repository ppa:relan/exfat
$ sudo apt-get update
$ sudo apt-get install fuse fuse-exfat exfat-utils

Однако, эта команда на моей системе не запустилась - выдала ошибку ключа при подключении репозитория

1

ppa:relan/exfat

Все - дело сделано. Теперь отформатирую флешку под файловую систему ExFAT в Linux.

Для этого сначала нахожу, где она расположена в файловой системе (в моем случае это устройство

1

/dev/sdb1

$ sudo fdisk -l

… и затем произвожу форматирование флешки командой:

$ sudo mkfs.exfat -n large_flash /dev/sdb1

где ключ

1

-n

Форматирование происходит буквально за пару секунд, ждать не придется. Первая флешка готова и операция форматирования выполнена под Linux.

ExFAT - форматирование под Mac OS X

Как уже говорилось мною выше, система Mac OS X имеет нативную поддержку файловой системы ExFAT. То есть, ничего дополнительно ставить не придется - все готово “из коробки”.

Операции по форматированию накопителей и другим действиям с жесткими дисками производится в стандартной утилите “Disk Utility”.

Вставляю вторую флешку и запускаю “Disk Utility”:

Разобраться с работой этой утилиты нетрудно, но вкратце опишу.

Слева находиться окно со всеми подключенными дисками, которые утилита сумела обнаружить.

Справа на вкладке “Erase” производиться настройка и выполнение форматирования (в терминологии Mac OS X форматирование называется “Erase”). В списке “Format” выбирается нужная файловая система (кстати, выбор небогатый).

В списке “Name” выбирается диск, который будет форматироваться. Там же находиться одноименная кнопка “Erase” для запуска форматирования.

Ниже располагается информативное (я был приятно впечатлен объемом и качеством подачи информации в нем) окно, в котором можно увидеть всю информацию по подключенному диску. Внимательный читатель заметит, что флешка у меня уже отформатирована в ExFAT - обзор делал “по горячим следам”.

В принципе - и все. Осталось нажать кнопку “Erase” и моя флешка отформатируется под систему ExFAT.

Если ее открыть в Finder, то теперь мне будут доступны как чтение с нее, так и запись на нее.

Заключение

Вот так “неожиданно” я решил проблему совместимости флешки под Mac OS X и Linux. Более того, данная система ExFAT является разработкой Microsoft, поэтому с ее поддержкой в Windows вообще нет проблем.

А если учитывать обещанный создателями ExFAT бережный способ обращения с флеш-накопителями, то этому решению вообще цены нет.

На этом все.

В данном примере рассмотрим создание parallax с эффектом вертикального скроллинга. Это самый популярный вид parallax’а для страниц типа Landing Page.

Создавать эффект будет с помощью скрипта Parallax.js. По странному стечению обстоятельств данный скрипт имеет точно такое же имя, что и скрипт из предыдущего примера - “Parallax.js - создаем простой parallax”. Однако, это разные скрипты и авторы у них разные; данный скрипт расположен на странице GitHub по адресу - Parallax.js.

Домашняя страничка скрипта выполнена также с эффектом parallax - Simple Parallax Scrolling.

Parallax.js - создаем HTML-разметку

Разметка для скрипта Parallax.js проста. Это обычный блок, который может быть

1

div

1

section

1

class="parallax-window"

1

data-parallax="scroll"

1

data-image-src="images/one.jpg"

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

• 1	data-natural-width

  - реальная ширина изображения

• 1	data-natural-height

  - реальная высота изображения

Ниже приведу созданные мною четыре блока

1

section

<!-- begin one -->
<section data-parallax="scroll" data-image-src="images/one.jpg" class="parallax-window">
  <div class="wrap one">
    <h1>Welcome to Parallax!</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus consequatur, nulla neque voluptatum deserunt at voluptatibus eos. Magni sapiente rem, suscipit assumenda provident, quaerat doloribus libero? Eaque doloremque, quo sequi!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nemo cum, dignissimos blanditiis iusto quasi, quis! Ducimus aperiam sunt libero deleniti numquam rerum esse architecto, officiis amet, officia recusandae aut.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque reiciendis vitae, amet! Quas saepe consequuntur, nisi quia, cupiditate dignissimos laborum incidunt soluta repellat, libero id quibusdam mollitia maiores omnis tempore.</p>
  </div>
</section>
<!-- end one -->

<!-- begin two -->
<section data-parallax="scroll" data-image-src="images/two.jpg" class="parallax-window">
  <div class="wrap two">
    <h2>Parallax is great!</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi accusamus deserunt ipsum nesciunt odit vero corporis eaque, quibusdam, enim, beatae, repellendus iusto. Amet corporis beatae, inventore officiis est aut. Ab!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime possimus sint a facere dignissimos! Labore at, beatae consequuntur corporis perspiciatis! Asperiores illum esse repellat veniam vero totam debitis! Quos, consectetur.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, totam maxime dolorum similique, ipsa a. Ea illo eligendi, ex, officia id eum sit sint nobis aperiam, error nihil ab dolorum.</p>
  </div>
</section>
<!-- end two -->

<!-- begin three -->
<section data-parallax="scroll" data-image-src="images/three.jpg" class="parallax-window">
  <div class="wrap three">
    <h3>Parallax is easy!</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque quia ex doloremque et, eum soluta culpa ipsum placeat consectetur, error at, accusamus iure! Doloribus corporis, earum quo modi omnis hic.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum ab distinctio omnis repellendus exercitationem maiores ad sed, deleniti dolorem tempore praesentium nobis suscipit nihil quidem qui nostrum debitis ipsam culpa.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, repellendus, qui. Aspernatur reiciendis eligendi, totam eaque iusto illo officia. Facere dicta harum, dolore sit perferendis in neque mollitia eligendi dignissimos?</p>
  </div>
</section>
<!-- end three -->

<!-- begin four -->
<section data-parallax="scroll" data-image-src="images/four.jpg" class="parallax-window">
  <div class="wrap">
    <h4>Let's start use it!</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius ab voluptates alias corporis, laborum provident corrupti assumenda dignissimos vel repellendus obcaecati, aspernatur earum ipsum rem. Voluptatum ipsum nostrum in! Rerum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit alias illum minus asperiores culpa, modi veritatis quibusdam, aperiam accusantium repellendus at possimus qui cupiditate dolorem quod accusamus a. Mollitia, repudiandae.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio quo nulla officia sapiente a tenetur maxime sunt mollitia accusantium aut, eius minus maiores fugit necessitatibus obcaecati ex eos quibusdam sequi.</p>
  </div>
</section>
<!-- end four -->

Parallax.js - стилизация страницы

Стилизацию страницы буду выполнять на Sass/Compass с использованием вертикального ритма “Vertical Rhythm” - в данном случае он подойдет как раз к месту, как мне кажется:

@import "compass";
@import "compass/reset";

$base-font-size: 24px;
$base-line-height: 36px;
$rhythm-unit: "rem";
$rem-with-px-fallback: true;

@include establish-baseline;

.parallax-window {
  min-height: 1080px;
  background: transparent;
  .wrap{
    margin-top: 100px;
    text-align: center;
    width: 1200px;
    margin: 0 auto;
    @include leader($lines: 7, $property: padding);
    p{
      @include rhythm-margins;
    }
    h1{
      @include adjust-font-size-to(2.074rem);
    }
    h2{
      @include adjust-font-size-to(1.728rem);
    }
    h3{
      @include adjust-font-size-to(1.44rem);
    }
    h4{
      @include adjust-font-size-to(1.2rem);
    }
    &.one{
      text-align: center;
      color: rgba(255,255,255,.8);
    }
    &.two{
      text-align: left;
      color: rgba(0, 0, 0, .8);
    }
    &.three{
      text-align: right;
      color: rgba(255, 255, 255, .8);
    }
  }
}

В этом коде наиболее важными строками являются две - без них скроллинга не получиться:

.parallax-window {
  min-height: 1080px;
  background: transparent;
  ...

Parallax.js - добавление Javascript

Разметка и стили готовы - осталось подключить скрипт Parallax.js и библиотеку jQuery:

jQuery “забираем” с Google, а скрипт Parallax.js - с GitHub-страницы проекта - Parallax.js. Все это “добро” пихаем в самый низ, подвал HTML-документа - перед закрывающим тегом

1

</body>

В дальнейшие украшательства вдаваться не буду - это дело техники. Мне важен сам принцип создания parallax с эффектом вертикального скроллинга.

В принципе, у меня все готово для того, чтобы полюбоваться результатом. Открываю страницу в браузере и любуюсь (не забывая скролить саму страницу):

Отлично! Получился прямо таки совсем неплохой parallax с вертикальным скроллингом. Готовый пример со всеми исходниками можно посмотреть на GitHub - Parallax.js Scrolling.

Небольшой обзор новой для меня темы - создание эффекта

1

parallax

на странице сайта. Вместе с вами буду учиться создавать такой эффект и начну с самого простого - Parallax.js.

Чтобы посмотреть, что примерно мы должны в результате получить, посмотрим на домашнюю страницу этого проекта - Parallax.js. Исходный код скрипта и документация расположена на GitHub - Parallax.js

Кратко о parallax

Что такое

1

parallax

1

parallax

1

parallax

1

landing page

Способов реализации

1

parallax

Одним из преимуществ метода на основе скрипта Parallax.js является то, что в этом случае не требуется библиотеки jQuery. Скрипт может работать и с ней, но ее присутствие совсем необязательно. Получается выгода в весе страницы и скорости ее загрузки в браузере.

Parallax.js - начальная разметка

HTML-разметка для нашего будущего

1

parallax

1

ul

1

li

Еще одним обязательным атрибутом для элементов списка

1

li

1

data-depth

Внутрь элементов списка помещается изображение, которое будет анимироваться с помощью эффекта

1

parallax

Ниже приведен пример такой разметки:

<ul id="scene">
  <li class="layer" data-depth="0.10">
    <img src="images/one.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/two.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.20">
    <img src="images/three.png" height="100" width="100" alt="Image" />
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/four.png" height="100" width="100" alt="Image" />
  </li>
</ul>

Parallax.js - стилизация parallax

Произведем небольшую стилизацию нашего будущего

1

parallax

1

ul

@import "compass/";
@import "compass/reset";

#scene{
  width: 95%;
  margin: 20px auto 0;
  min-height: 775px;
  background: url(../images/bg.jpg) 0 0 no-repeat;
  img{
    display: inline-block;
    width: 100px;
    height: 100px;
    @include border-radius(50%);
  }
  img[src="images/one.png"]{
    margin: 200px 0 0 200px;
  }
  img[src="images/two.png"]{
    margin: 200px 0 0 1000px;
  }
  img[src="images/three.png"]{
    margin: 500px 0 0 700px;
  }
  img[src="images/four.png"]{
    margin: 600px 0 0 300px;
  }
}

Parallax.js - добавляем javascript

Наш

1

parallax

Тут все просто. Первой строкой подключается файл скрипта Parallax.js. Второй строкой сначала в теле документа отыскивается элемент с идентификатором

1

scene

1

scene

1

parallax

1

scene

Все - смотрим результат:

Достаточно подвигать мышью над фотографией красавчика на заднем плане, чтобы увидеть, как разноцветные кружки перемещаются с разной скоростью.

Мы получили эффект parallax.

Ниже приведен полный код HTML и CSS рассмотренного нами примера:

<ul id="scene">
  <li class="layer" data-depth="0.10">
    <img src="images/one.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/two.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.20">
    <img src="images/three.png" height="100" width="100" alt="Image"
  </li>
  <li class="layer" data-depth="0.80">
    <img src="images/four.png" height="100" width="100" alt="Image"
  </li>
</ul><!-- scripts -->

@import "compass";
@import "compass/reset";

scene{
width: 95%;
 margin: 20px auto 0;
 min-height: 775px;
 background: url(../images/bg.jpg) 0 0 no-repeat;
 img{
 display: inline-block;
 width: 100px;
 height: 100px;
 @include border-radius(50%);
 }
 img[src="images/one.png"]{
 margin: 200px 0 0 200px;
 }
 img[src="images/two.png"]{
 margin: 200px 0 0 1000px;
 }
 img[src="images/three.png"]{
 margin: 500px 0 0 700px;
 }
 img[src="images/four.png"]{
 margin: 600px 0 0 300px;
 }
}

Полный исходный код примера можно посмотреть на GitHub - Parallax.js

С недавних пор (чуть больше двух недель) я стал счастливым обладателем Mac OS X. Если быть точнее - это iMac (21.5-inch, Mid 2014).

Неделю чувствовал себя не своей “тарелке” под ним, еще неделю привыкал. Потом все уже пошло по накатанной - система хороша, ничего не скажешь. Для работы - лучше не придумаешь.

Но речь в этой статье не о прелестях Mac OS X - их и без меня (с моими скромными талантами) превознесли до небес. Тема этой небольшой статьи - маленькое приложение Spectacle. Эта небольшая программка призвана улучшить-ускорить-облегчить работу в оконной среде Mac, служа в качестве менеджера этих самых окон.

Другими словами - Spectacle - это оконный менеджер для Mac OS X. Это приложение является не единственным в своем роде. Существуют еще программы - платная (и самая известная) - Divvy, также платная (стоит целых 2$) - BetterSnapTool и бесплатная - BetterTouchTool. Однако, Spectacle (в отличие от Divvy, которая стоит $13.99) - бесплатен.

Проживает программка по адресу - Spectacle. Домашняя страничка приложения очень проста - также, как и само приложение. Кстати, там же можно полюбоваться демо - что умеет делать данная программа.

Установка Spectacle

Установка программы Spectacle под Mac OS X стандартная. Скачиваем с официального сайта архив приложения, распаковываем его и перетаскиваем программку в папку “Applications”.

Настройки Spectacle

При запуске программы Spectacle она появиться в области индикаторов строки меню в виде значка:

При щелчке мыши на нем откроется длинный список загадочных клавиатурных сокращений. Эти сокращения можно редактировать, если открыть окно настроек программы:

Там же расположен checkbox - “Launch Spectacle at login” - думаю, все понятно и в переводе не нуждается.

Управление окнами с помощью Spectacle

Чтобы разобраться, что это за клавиатурные сокращения, достаточно пять минут поиграться с ними и все станет понятно. Выберем любое приложение (в моем случае это будет окно Terminal) в качестве подопытного кролика и будем нажимать hotkeys.

Следующие hotkeys заставят окно терминала занимать ровно половину экрана монитора, смещаясь при этом в нужную сторону:

• занять левую половину окна — ⌥⌘←
• занять правую половину окна — ⌥⌘→
• занять верхнюю половину окна — ⌥⌘↑
• занять нижнюю половину окна — ⌥⌘↓

Нижеследующие hotkeys заставят окно терминала “побегать” по углам экрана монитора. То есть, поместиться в нужный угол экрана, при этом размер окна останется без изменения:

• сместиться в левый верхний угол — ⌃⌘←
• сместиться в правый верхний угол — ⌃⌘→
• сместится в нижний левый угол — ⌃⇧⌘←
• сместиться в нижний правый угол — ⌃⇧⌘→

Еще пара полезных команд для управления окном:

• окно программы по центру экрана - ⌥⌘C
• окно во всю ширину экрана - ⌥⌘F

Программа Spectacle умеет перемещать окно приложения таким образом, чтобы оно занимало ровно треть площади экрана монитора. Сочетание - ⌃⌥→ заставит окно перемещаться сперва вертикально, а потом горизонтально по экрану, при этом занимая треть площади. Сочетание - ⌃⌥← заставит окно двигаться в обратном порядке. Попробуйте у себя - интересный эффект получается.

Изменение размера окна приложения достигается с помощью двух сочетаний клавиш:

• увеличение размера окна - ⌃⌥⇧→
• уменьшение размера окна - ⌃⌥⇧←

Перемещение окна между виртуальными дисплеями:

• переместить окно на следующий дисплей - ⌃⌥⌘→
• переместить окно на предыдущий дисплей - ⌃⌥⌘←

Очень полезной и приятной (а более того - нужной) особенностью Spectacle является то, что программа запоминает местоположение и размер окна для каждого приложения. В следующий раз, когда запуститься (например, у меня - окно терминала) приложение, его окно расположиться точно в нужном месте экрана монитора.

Если нужно сбросить настройки для окна проложения, то для этого существует комбинация - ⌥⌘Z. Вернуть обратно настройки для окна приложения - ⌥⇧⌘Z.

Заключение о Spectacle

Программа Spectacle мне понравилась однозначно. Первый фактор - она бесплатна. Второй - она (можно сказать) незаменима для удобной настройки workflow.

Первое упоминание об этой программе я увидел у Sorax. До этого пытался “подружиться” с Divvy, которую рекомендовали ребята из Loftblog. Однако, как-то не получилось у меня с ней работать.

А вот Spectacle понравилась с первого взгляда. Как мне кажется, из программа разряда “must have”.

Рассмотрим вопрос автоматизации действий в программе Photoshop.

Тема статьи перекликается с предыдущей статей “Macros в Sublime Text 3”, посвященной макросам в Sublime Text.

В Adobe Photoshop также имеется инструмент для записи макросов, только называется он по другому - Actions (Операции). Но от смены названия суть не меняется.

С помощью Actions (Операции) в Photoshop можно записать последовательность действий, а потом запускать их на выполнение каждый раз, когда это понадобиться.

Для чего нужны Actions (Операции) верстальщику? Не поверите, но это очень удобная вешь, которая значительно ускоряет работу в Photoshop. В частности, можно ускорить нарезку изображений из psd-макета.

Буквально за месяц до этого я приобрел лицензию на плагин PNG Hat для автоматизации вырезания картинок:

Так вот - я просто на тот момент не знал о существовании макросов в Photoshop! Actions - это намного круче, чем PNG Hat.

Но меньше слов - больше дела. Приступим к изучению Actions (Операции) в Photoshop на простом примере. Создадим макрос для вырезания и экспорта картинок из psd-макета.

Actions - где они живут

Все

1

actions

1

actions

По умолчанию, в Photoshop уже есть готовые операции

1

actions

Actions в Photoshop не могут жить вне набора операций (правильно такой набор называется “Set”). На скриншоте как раз показаны два таких набора (“Set”) - один от Photoshop, второй - мой собственный.

Внизу палитры расположены шесть кнопок управления

1

actions

• остановка записи

  1

  action

• запуск записи

  1

  action

• воспроизведение записанного

  1

  action

• создание нового набора

  1

  actions

• создание нового

  1

  action

Создаем новую операцию action

В палитре “Операции” кликаем на кнопке “Создать новый набор”. В диалоговом окне вводим название нового набора - “Export-Images-to-Web”, затем сохраняем его.

Созданный набор операций (“Set”) готов, но он пока пустой, в нем нет ни одной операции (

1

action

В самом левом столбце палитры можно напротив каждого Set’а ставить или убирать галочки, тем самым включая или отлючая данный набор операций (

1

actions

Треугольнички напротив названия Set’а разворачивают или сворачивают данный набор операций (

1

actions

1

actions

Предварительно откроем в Photoshop любой psd-макет, из которого можно экспортировать изображения для будущего HTML-шаблона. В палитре “Слои” заранее выделим слой с изображением, которое будем экспортировать (отключим все эффекты данного слоя, если они есть):

И нажмем кнопку “Создать новую операцию” в палитре “Операции”. Откроется диалоговое окна настройки будущей операции (

1

action

В этом окне указываем имя для будущей операции (

1

action

Кнопка “Записать” запускает процесс записи макроса. Внизу панели “Операции” кнопочка “Запись операции” станет красной, что напоминает о том, что запись пошла! С этого момента все мои действия будут запоминаться программой Photoshop, поэтому буду внимательным.

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

• дублирование активного слоя
• отрезка прозрачных пикселов (

  1

  trimming

  )
• сохранение полученной картинки для Web
• закрытие нового документа без его сохранения

Не забываем нажать кнопочку “Остановить запись”. В принципе, все мои действия очень легко прочитать внутри самой операции (

1

action

Настройка операции (action)

По большому счету, созданная мною операция полностью готова к работе. Можно ради любопытства выбрать любой другой слой с изображением и нажать клавишу F3. Произойдет практически мгновенное экспортирование изображения в этом слоя для Web.

Но что может не устраивать нас в этой операции? Все, кроме одного - возможность самому выбирать, куда Photoshop должен сохранять экспортируемое изображение.

Для этой цели существует колоночка с пустыми квадратиками напротив каждого действия в записанной мною операции (

1

action

Если навести курсор мыши на любой из них, то всплывающий tooltip подскажет, что это - “Возможность установки или отмены установки диалогового окна”.

К слову сказать, все операции (

1

actions

• автоматические (без вмешательства пользователя)
• полуавтоматические (с частичным вмешательством пользователя)

Нам как раз нужно из автоматической операции (

1

action

Делается это очень просто - достаточно кликнуть мышью в нужном окошке:

Попробуем снова экспортировать изображение по нажатию клавиши F3. Вуаля - видим, что открылось окно Photoshop, в котором можем задать параметры для экспорта изображения. И в том числе - куда необходимо сохранять изображение:

Заключение

На этом можно закончить тему создания операций (actions) в Photoshop. На самом деле эта тема большая и достаточно сложная. Я видел даже специальный курс для дизайнеров по написанию actions под Photoshop.

Но для верстальщика нет необходимости создавать большие и сложные операции. Поэтому этого уже достаточно для ускорения и облегчения своей работы. Попробуйте - оно того стоит!

На этом все.