Once

[ЧЕРНОВИК] Atom для домохозяек

2015-09-10T02:24:00.002+03:00

Существует достаточно большое количество разных и полезных текстовых редакторов/IDE/полу-IDE, под стать каждому. В этой заметке буду рассказывать об Atom-е. Это, можно сказать, полу-IDE-шный редактор на стероидах (плагинах), написан с испольованием движка хрома (браузера). Написан GitHub-овцами, между прочим.

Я думаю он бы здорово подошёл бы для экспериментов с gulp и git.

Установка и настройка всё

Скачивать конечно же лучше с оффициальной страницы https://atom.io/.

Вот так выглядит Atom по-умолчанию

Настраивать там особо нечего, можно пробежаться по параметрам конфигурации, тему там поменять и т.д. File > Settings или <Ctrl> + <,>

Можно пройтись по настройкам, выбрать то, что больше подходит под себя, на первый взгляд. На самом деле ничего особенного, по сравнению с такими же IDE-подобными редакторами (напр. Brackets).

Здесь стоит обратить внимание на разделы Packages и Install - это доступ к установленным плагинам, и к каталогу плагинов, где можно найти необходимые/недостающие.

Особенности

Command Palette

Отличительной особенностью является палитра комманд (вызывается Ctrl+Shift+P - можно перебиндить)

Пользователи SublimeText могут сразу узнать откуда росли ноги ~~и грязно выругаться за плагиат~~.
Здесь представлен быстрый доступ практиески ко всем комманадам/меню редактора. Просто начинайте вводить желаемую комманду и Atom подскажет подходящие по нечёткому поиску.
Довольно удобно, если начать пользоваться.

Multi Cursor

Тоже не новая функциональность, но по-прежнему находит своих поклонников.
К сожалению в Atom-е реализована не совсем удобно - горячие клавиши Alt+Ctrl+стрелка уже занята под переворачивание экрана в Windows :).
Мне лично больше нравится подход, как Notepad++ - <Alt> + Клик мыши.
Ну что ж, в любом случае, комбинацию клавиш можно перебиндить.

Пара примеров- мульти-редактировани и -выделение. Сразу извиняюсь за вырожденные примеры, люди при своём уме такого не далают (я о префиксе moz- перед background).

Панели

Вертикальные-горизонтальные панели - тоже удобная возможность. Ctrl+K стрелка.

Больше комманд в меню: View > Panes.

Заготовки (сниппеты/snippets)

Сниппеты - это своеобразные шаблоны:сокращения конструкций. Напр: набор букв fri раскрывается в for (i=0; i++; i<_) или подобное.

Atom имеет встроенную поддержку сниппетов (реализовано в виде плагина). Все сниппеты привязаны к определённым языкам (синтаксису) - т.е. html-евские не будут доступны в css-файлах (если, конечно, не переопределить).
<Alt>+<Shift>+<S> - показать все доступные сниппеты для текущего синтаксиса (языка).

Для полного счастья, можно добавить плагин css-snippets.

Поиск

Поиск в Atom умеет разное:

Поиск/Замена в текущем файле: Ctrl+F / Alt+Ctrl+F
Поиск/Замена по всему проекту: Ctrl+Shift+F
Палитра открытых файлов: Ctrl+B
Нечёткий поиск файлов: Ctrl+P/Ctrl+T

За этот функционал отвественны плагины по-умолчанию find-and-replace и fuzzy-finder.

Плагины

Расширений в виде плагинов здесь под любых любителей фломастеров, ими-то мы и займёмся.
В первую очередь что-нибдь для вёрстки. На самом деле, до-устанавливать не много, потому как основная функциональность (подсветка синтаксиа / автодополнение) работают "из коробки" для основных языков/синтаксиса.

Linter

https://atom.io/packages/linter
Этот базовый верхнеуровневый API для подсветки/вывода lint-сообщений (валидация на лету).

К нему нужно до-установить linter-друганов под те языки, которые нам нужны: https://atomlinter.github.io/.

Например вот эти:

linter-csslint
обёртка над csslint.
linter-scss-lint
Для этого "другана" нужен ruby с жемом scss_lint (gem install scss_lint). В Windows это немного проблематичнее, но если надо, то не думаю, что станет проблемой.
linter-9e-sass Вот этот красавец, обещал многое, но скрэшил мне Atom. Советую пока не устанавливать, пока не вылечатся.
linter-jscsОбёртка над jscs. Проверяет CodingStyle.
Полезный плагин, 'подсвечивает' JavaScript, НО всякие jQuery, Gulp, Node.js всё ещё не умеет, в связи с чем подчёркивает красным то, что не должен :(.
Подход такой - если копаемся много в JS, то это полезный плагин, если нет - будет только мешать.
linter-jshint
Обёртка над jshint - статический анализатор JS-кода.
linter-tidy
обёртка над tidy-html5
этот плагин будет проганять html через tidy - довольно старый проект (последний коммит 2009 годом, да ещё и на SourceForge). В общем, мне немного страшно за то, что он напроверяет там, но подключим на всякий случай, посмотрим, сам-то плагин - свежий
linter-htmlhint
это обёртка над htmlhint свежий, поддерживаемый проект, я склонен доверять.

Управление через палитру комманд (Ctrl+Shift+P):

по <Alt>+<Shift>+<.> переключиться на следующую ошибку. Все остальные комманды можно забиндить по желанию.

Да и в общем, настройки каждого пдагина (если такие есть), можно найти в File > Settings > Packages.

atom-beautify

https://atom.io/packages/atom-beautify
Этот плагин наводит красоту в вашем коде, по заданным настройкам - убирает лишние пробелы, строки, конвертирует кавычки, проставляет точку-с-запятой, и.т.д. Поддерживает огромное количество языков из коробки (ничего доустанавливать не нужно).
Советую пересмотреть настройки плагина, и выбрать желаемое поведение.

Вызов плагина либо через панель комманд, либо через через контекстное меню, либо горячей клавишей Alt+Ctrl+B

css comb

Comb - сортирует/группирует CSS свойства, удаляет лишние пробелы и т.д. Функционал пересекается с предыдущим плагином.
Здесь аж целая пачка плагинов:

css-comb

atom-css-comb

atom-csscomb

csscomb

Все они так или иначе используют http://csscomb.com/ поэтому функционал практически у всех одинаковый, даже горячие клавиши.

Во всех этих плагинах можно задать желаемый comb-конфиг, в системном каталоге, в текущем проекте, и т.д. Сам-же comb-конфиг можно сгенерировать на сайте http://csscomb.com/config, ответив на 24 вопроса, в стиле "какой вариант для вас лучше". У меня получился вот такой .csscomb.json https://gist.github.com/Jinnmv/a9d6a5347186771a8101

Мне приглянулся csscomb - там нет ничего лишнего, он вычитывает конфиг из корня каталога и радует результатми. Большего мне не нужно.

Autocomplete

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

language-SCSS
обеспечивает лучшую поддержку SCSS, сниппеты и автодополнения в том числе
autocomplete-html-entities
добавляет поддержку автодополнения специальных символов HTML, таких как напр. &

autocomplete-paths
даёт возможность использовать пути к файлам в автодоплнении

Обычно окно автодополнения появляется по мере необходимости автоматически, но если его внезапно нет, то по Ctrl+Space оно появляется. Клавишами Up/Down осуществляется навигация по вариантам дополнений, а по Tab или Enter - выбор нужного варианта.

Всякая мелочь

Unit Converter https://atom.io/packages/atom-css-unit-converter

Конвертирует px в em, pt, и обратно, и другие размерности.

У него так же есть интерактивный конвертер (диалоговое окно), которе можно вызвать, либо из меню, либо из палитрый комманда, либо по сочетанию клавих Alt+C C.

И так же будет полезно знать пару горячих клавиш: Alt+C E - px -> em, Alt+C R - px -> rem.

Мне жутко не понравилось то, что он самостоятельно не умеет определять текущую размерность. Т.е. нельзя "сконвертировать то, что под курсором в em", необходимо обязательно указать, что мы конвертируем px в em (или что там у нас).

quick-editor https://atom.io/packages/quick-editor

Подсмотрели в Brackets, ну и хорошо. Плагин позволяет "на месте" редактировать стиль, который находится под курсором в HTML (см. гифку ниже).

Горячая клавиша Ctrl+Shift+E.

w3c-validator https://atom.io/packages/w3c-validation
Этот плагин заливает текущий файл на w3c-vlaidator и показывает на панели результаты валидации. Должно быть полезно для тех, кто печётся об этом. Но у меня были проблемы с HTML, где doctype указан html. Вроде как проблемы в зависимом плагине, но не было времени/желания разобраться и зарепортить.

color-picker https://atom.io/packages/color-picker

Как по мне, довольно полезный инструмент, помогает подобрать нужный цвет и заполяет его hex код в любом формате. Alt+Ctrl+C

minimap https://atom.io/packages/minimap
Ещё один плагин появившийся благодаря SublimeText. Он показывает небольшую мини-карту текущего файла, с возможностью быстрого скролла к искомому участку, что значительно упрощает навигацию по большим файлам.

file-type-icons https://atom.io/packages/file-type-icons
Показывает иконки типов файлов возле имени, в дереве.

Git

В плане интеграции с системой контроля версий git, в Atom-е не так много всего из коробки, практически нечего. Что довольно-таки странно, учитывая, кто его создатели.
Но, в топ-е плагинов всегда висит git-plus, merge-conflicts, советую всё ставить.

git-plus https://atom.io/packages/git-plus

даёт возможность выполнять git комманды непосредственно в Atom-е. Напр. Add, Commit, Push, Checkout, и т.д.
Там много всего хорошего, советую открыть его страницу (ссылка вверху), или настройки плагина непосредственно в Atom-е и почитать.

Своя палитра комманд вызывается по Ctrl+Shift+H. Но и по стандартному Ctrl+Shift+P тоже находится.

git-log https://atom.io/packages/git-log
Этот плагин показывает более удобоваримый лог git, чем предыдущий плагин.

merge-conflicts https://atom.io/packages/merge-conflicts
С этим инструментом гораздо проще решать merge-конфликты, которые неизбежны, при работе над проектом в комманде. На гифке внизу, в общем-то, всё показано.

pigments

https://atom.io/packages/pigments
Очень полезный плагин для тех, кто использует пре-процессоры и заботится о чистоте кода и пере-использовании кода.

Pigments: Show Palette - показывает палитру цветов, используемых в проекте - какие цвета, где используются. Это имеет отношение только к файлам пре-процессоров (LESS, Sass, SCSS, Stylus).

Pigments: Find Colors - индексирует все css- и пре-процессорные файлы и показывает карту использования цветов.

Pigments: Convert To.. - конвертирует цвета в hex/rgb.rgba. Вызывается либо в контекстном меню, либо через палитру комманд.

atom-build

TBD

Комбинации Клавиш

Ctrl+T fuzzy finder
Ctrl+Shift+P command palette
Ctrl + / - comment/uncomment
Alt+Ctrl+M - select between brackets
Ctrl+G - jump to specific line
Ctrl+Shift+U - encoding
Ctrl+F - search
Alt+Ctrl+F - replace
Ctrl+Shift+F - search in project

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

Оффициальный сайт Атом: https://atom.io/
CSS Comb http://csscomb.com/

[ЧЕРНОВИК] Git, Github и Github pages или "Маленькое чёрное платье"

2015-08-06T10:20:00.000+03:00

У каждой женщины должно быть маленькое чёрное платье (c) Так и каждый уважающий себя web-разработчик должен уметь пользоваться такими инструментами как git и github.

Эта статья, назовём её второй, об азах работы с системой контроля версий. Первая вот здесь.
И как всегда один нюанс - всё это дело под Windows (таково пожелание клиента :( ).

Немного теории

VCS (version control system) - система контроля версий, основная задача которой вести учёт всех изменений в коде проекта сделанных разными участниками. Она позволяет посмотреть всю историю изменений каждого файла (кто/когда/что).
Да, никто не мешает и одному пользоваться системой контроля версий - следить за самим собой. Да и основная цель использования системы контроля версий, в нашем случае - это разработка одного проекта из разных мест (дом-работа).

Бывают централизованные и распределённые системы контроля версий. Git относится к распределённым. Для наших задач, конечно же лучше подошла бы централизованная, но ~~мы упоротые~~ нам так удобнее, из-за github хостинга.

Популярные распределённые vcs:

git
hg (mercurial)

Популярне централизованные vcs:

Git, к стати, изначально писался Линусом Торвальдсом (автором ядра Линукс), для хранения иходных текстов ядра, потому как его не устраивал тот теущий инструмент (не вспомню название), которым они пользовались до этого. Перевод интервью на Geektimes.

Подготовка

Сразу к практике.

Github

Регистрируемся на https://github.com/
GitHub - это условно-бесплатный хостинг git-репозиториев, который даёт ещё много приятных плюшек (вики, баги, пулл-реквесты, итд).
Создаём новый репозиторий

Public - потому как за закрытые репозитории нужно платить. Но нам же нечего стесняться, ведь так?
Здесь можно выбрать автоматическое создание README, пригодится.

Отлично, теперь у нас есть свой личный кусочек пространства. На этом пока можно остановиться.

Windows Git

MSYSGIT
Хоть Git и был написан под Linux-ом для использования под Linux-ом, но всё же есть более-менее адекватный варинат под Windows https://msysgit.github.io/index.html.
Cкачиваем, устанавливаем. Next > Next > Next.
Можно остановить внимание на следующих скринах:

"Направо пойдёшь, коня потеряешь" (с).

использовать git только из собственной коммандной строки;
использовать git ещё и в системной коммандной строке (та, которая cmd);
использовать git и кучу Unix-овых утилит в коммндной строке Windows (перепишет стандартные встроенные).

Рекомендую либо первый, либо второй пункт. Если не будет желания ковырять консольные комманды git - то первый, если будет - то второй.

Line-end-инги - попаболь и холивар всех времён:

Чекаут - windows style (CR+LF), коммит в репозиторий в Unix style (LF);
Чекаут как есть, коммит в Unix style;
Чекаут как есть, коммит как есть.

(по простому: Windows использует два символа для переноса строки, а Unix-семья - один).
Рекомендую второй.

Далее он попросит около 100 Мб свободного места и притащит с собою друганов - разные полезные unix-утилиты (mingw).

TortoiseGit
И для облегчения жизни новичкам советую доустановить TortoiseGit https://code.google.com/p/tortoisegit/. Он даст более наглядное представление что происходит и более тесную интеграцию с проводником Windows.
Устанавливаем методом Next > Next > Next.

Необходимо выполнить первоначальную настройку утилиты. К настройкам TortoiseGit можно добраться либо из контекстного меню TortoiseGit > Settings, либо из меню "Пуск"

Необходимо указать своё имя и адрес электронной почты (просто для справки).

Public/Private Keys

Для дальнейшей работы с внешним репозиторием Git (GitHub), необходимо сгенерировать пару публичного и приватного ключей. По этой паре ключей внешний репозиторий (сервер) сможет вас опознать со 146% точностью.

Для этого в меню "Пуск" необходимо найти и запустить PuTTYgen.

Нажмите кнопку Generate и бурно по-двигайте мышью для создания хаотичной атмосферы.

Здесь можно изменить название (комментарий) ключа и задать пароль (пароль можно и не указывать, на свой страх и риск).

В верхнем секции нам показали публичный ключ, его можно (и нужно) скопировать на сервер (внешний репозиторий - GitHub). Приватный ключ не показывают, на то он и приватный. И вообще, приватный ключ желательно, чтобы лежал в укромном, но доступном месте. Если до него доберутся злоумышленники, то ваше зашифрованное/защищённое соединение перестанет быть таковым.

Жмём кнопки Save public key, Save private key и сохраняем ключи. Желательно использовать директорию %HOME%/.ssh (напр. C:/Users/Anton/.ssh).

Теперь в меню Conversion > Export OpenSSH key и выбираем каталог (тот же).

Рекомендуемые имена файлов (чтобы потом меньше проблем было):

публичный ключ: id_rsa.pub
приватный ключ PuTTY: id_rsa.ppk
приватный ключ (стандартный ssh): id_rsa

Теперь можно скопировать пуьличный ключ из верхней секции (он совпадает с сохранённым) и добавить его в список авторизированных на GitHub (верхний правй угол > Settings > SSH Keys > Add SSH Key), название (title) может быть произвольным.

Можно закрывать генератор.

А теперь все вместе

Попробуем завести теперь это всё вместе. Для этого на GitHub-е откроем созданные раннее репозиторий, найдём в правой части URL, по которому можно достучаться до него:

скопируем адрес

Далее вызываем контекстное меню в необходимом каталоге 'Git Clone...'

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

Если к ключу был задан пароль - здесь его попросят ввести.

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

Готово.

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

Git и TortoiseGit

Добавим несколько файлов в каталог.
Теперь для того, чтобы добавить их в индекс репозитория, необходимо git-у об этом явно укзать - самое проще из контекстного меню по файлам/каталогу.

Здесь либо Git Add all files now, либо TortoiseGit > Add... Выбираем все файлы и Ок.

Теперь они находятся в индексе, и Git за ними следит.

Далее необходимо "закоммитить" изменения - сохранить в локальном репозитории. Это гарантия того, что ваши изменения останутся сохранены в репозитории.
Git Commit -> 'master'...

Желательно взять за правило ВСЕГДА оставлять комментарий о том, что коммитися. И один коммит на одно логическое изменение.

Эти изменения остались в локальном репозитории. Для того, чтобы отправить их на удалённый репозиторий (GitHub) необходимо выполнить операцию Push.

Это можно сделать сразу после коммита, в окошке отчёта:

Либо из контекстного меню Git Sync...

нажать на кнопку Push.

Всё, теперь эти изменения можно увидать в GitHub-е. .. и начать работать с ним.

Промежуточное заключение

Теперь свою работу в нескольких местах можно строить таким образом: на одном рабочем месте: Update (Pull), Commit, Commit, Push. на другом: Update (Pull), Commit, Commit, Push, и т.д.

Git

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

По-большому счёту следущая часть будет вольным переводом туториала https://git-scm.com/docs/gittutorial. Вместо него можно почитать что-то в роде http://rogerdudler.github.io/git-guide/index.ru.html на русском языке.
В дальнейшем большинство операций будет производится в консоли git, которая должна была установится вместе с MSYSGIT и быть доступна либо в меню пуск, либо в контекстном меню.
Отважным любителям консоли под Windows возможно будет интересно попробовать один из проектов улучшенного терминала:

ConEmu https://conemu.github.io/en/
Console2 (к сожалению единственное место, как оффициальный сайт указан SourceForge, который в последнее время протух, то ссылку на него давать не буду - без труда найдёте сами)

Первое, что необходимо сделать, перед началом работы - указать Имя и e-mail, если этого не было сделано раньше:

$ git config --global user.name "Your Name Comes Here"
$ git config --global user.email you@yourdomain.example.com

Для создания новго репозитория (совсем нового), используется команда

$ git init

Теперь можно добавить желаемые файлы в папку репозитория (создать/скопировать/распаковать). И добавить их в репозиторий git

$ git add .

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

$ git add file1 file2 file3

Теперь эти фалы помещены git-ом во временное хранилище (index). Для того что бы добавленные файлы попали в репозиторий, необходимо выполнить

$ git commit

это перенесёт все содержимое идексов в репозиторий (сделает снимок) и запросит комментарий к коммиту.
Для того, что бы коммитить сразу с комментарием:

$ git commit -m '<your comment>'

По-идее это будет первые коммит, первый слепок репозитория.

Первые изменения
Можно создать несколько файлов и добавить их репозиторий.
Посмотреть разницу между последним закоммиченным слепком и текущим индексом:

$ git diff --cached

Та же комманда без --cached покажет изменения, не добавленные в индекс.

$ git commit -m '<message>'

добавит изменения в репозиторий.

Можно упростить путь помещения файла в репозиторий:

$ git commit -a

добавит файл и закоммитит сразу.

История изменений
Для просмотра истории коммитов
$ git log

ключ -p покажет и непосредственно сами изменения (текст) между коммитами:
$ git log -p

Ветвления
Ветвления (или бранчевания / бранчи) - это одно из самых основных инструментов git. Бранчи позволяют создать копию репозитория рядом с текущей версией, для каких-то изменений/экспериментов, а потом их объединить.
Варинатов использования этой возможности довольно много, на нём можно построить целый процесс разработки продукта. В этой статье описан один из них http://habrahabr.ru/post/106912/.

$ git branch

покажет список всех веток в текущем репозитории по-умолчанию основная ветка - master.
Для создания новой ветки необходимо выполнить следующую комманду:

$ git branch feature1

переключит репозиторий на ветку feature1

Далее можно внести некоторые изменения, закоммитить в ветке feature1 и объединить изменения с master:


$ git checkout master


$ git merge feature1

Тут можно удалить бранч feature 1


$ git branch -d feature1

Если буду не объединённые изменения, вас об этом предупредят. Для удаления ветки "без вопросов" необходимо использовать ключ -D

$ git branch -D feature1

-- ... --

GitHub Pages

Есть в GitHub такая замечательная функциональность, как GitHubPages - это возможность бесплатно крутить свою статику на GitHub, рядом со своим репозиторием.

В разделе своего репозитория, справа выбрать Settings > Options (первая секция) > прокрутить до GitHub Pages и нажать Launch automatic page generator. Далее можно не заморачиваться, Next > Next, выбираем шаблон, мне понравился Minimal. Тут без разницы какой выбрать, потом его всё-равно можно/нужно будет править. > Publish Page.

Теперь на удалённом репозитории для нас была создана отдельная ветка (gh-pages) со статикой, которую собственно, можно тепреь изменять как нам захочется. Это будет, в каком-то роде, визитной карточкой репозитория. Адрес, по которому GitHub будет хостить эту статику будет: https://<username>.github.io/<RepoName>, ну он там в любом случае напишет точный url, когда создаст.

Для того, чтобы переключить локальный репозиторий на другую ветку в TortoiseGit, выбрать в контекстном меню репозитория TortoiseGit > Switch/Checkout...

и выбрать gh-pages.

Таким же образом можно будет вернуться в Master.

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

...

Полезные ссылки:
Оффициальный сайт Git: https://git-scm.com
Толковая документация по Git [EN]: https://git-scm.com/doc
Git для Windows: https://msysgit.github.io/index.html
Tortoise Git: https://code.google.com/p/tortoisegit/
Книга Pro Git: https://git-scm.com/book/ru/v2
Статья "Удачная модель ветвления для Git": http://habrahabr.ru/post/106912/
https://gist.github.com/cobyism/4730490
https://git-scm.com/docs/gittutorial
http://githowto.com/ru

P.S.: Написано специально для Серёги и Жеки.

Последний рабочий день месяца SQL (Oracle)

2015-07-13T16:23:00.002+03:00

Стала необходимость определить, является ли заданная дата последним рабочим днём месяца средствами SQL (Oracle). Довольно нетрививальная задачка.

Вот что нарылось:

var psysdate varchar2; exec :psysdate := to_date('01-MaY-2015','dd-mon-yyyy'); select decode( rtrim(to_char(last_day(:psysdate),'DAY')), 'SATURDAY',last_day(:psysdate)-1, 'SUNDAY',last_day(:psysdate)-2, last_day(:psysdate) ) business_date, to_char( decode( rtrim(to_char(last_day(:psysdate),'DAY')), 'SATURDAY',last_day(:psysdate)-1, 'SUNDAY',last_day(:psysdate)-2, last_day(:psysdate) ),'DAY' ) business_day from dual;

BUSINESS_DATE BUSINESS_DAY ------------- ------------ 29-May-2015 FRIDAY

via: http://oracle.ittoolbox.com/groups/technical-functional/oracle-db-l/how-to-get-the-last-business-day-of-a-month-2086576

Gulp для статики

2015-07-13T15:25:00.001+03:00

Статья описывает пошаговую настройку Gulp для обслуживания статических web-страничек (вёрстка).
Один нюанс - эту всю прелесть будем заводить под Windows (таково пожелание клиента :( ).

Необходим поставить Node.js.

Проще всего это сделать с оффициального сайта https://nodejs.org/, и нажать большую зелёную кнопку [Install].
Скачать инсталлятор и установить методом Next > Next > Next...
!!!Важно: не забыть проверить, что среди компонентов для установки выбраны npm package manager и Add to PATH.

Создать в папке с проектом два каталога _src и _dist.
В _src будут "исходные" файлы (каталоги js, css, img, sass), в _dist - скомпилированный проект с минифицированными стилями/картинками/итд.
Здесь необходимо создать два тектовых файла:
package.json - настройка проекта для node.js,
gulpfile.js - файл-сценарий для gulp.
Примеры можно взять здесь https://gist.github.com/Jinnmv/1c058a65bda7d9adad22
Пора запустить коммандную строку <win>+<r> cmd,
зайти в папку с проектом
- D:
- cd Projects\Static01
В коммандной строке:

npm install --global gulp gulp-autoprefixer gulp-imagemin gulp-livereload gulp-minify-css gulp-rename gulp-replace gulp-sass gulp-sourcemaps gulp-watch
npm - node package manager, пакетный менеджер node. Данная комманда установит указанные модели/пакеты node.js глобально - т.е. в C:\User\..\AppData\..

npm link
эта комманда сделает сслыки на все необходимые пакеты (указанные в package.json) из глобально установленных (дабы не занимать лишнее место на диске).
если что-то пошло не так, можно прибегнуть к простому методу:

npm install

Готово. Теперь можно запустить gulp и наслаждаться магией (gulp в коммандной строке)

Для полного счастья было бы здорово установить плагин LiveReload для Хрома

Теперь можно открывать файлик из _src/index.html в хроме, и наслаждаться автоматичексим обновлением страницы при изменении файлов проекта.

P.S.: Написано специально для Серёги.

UPD: список изменений:

gulpfile.js переписан так, что он теперь работает с вложенными папками внутри _src и восстанавливает их иерархию в _dist
из css-файлов (не-пожатых) удалется строка с указанием sourcemap, потому как sourcemap не будет в _dist (не умеет смысла).
Теперь поломан livereload, потому как непонятно какую из вложенных папок слушать. Буду искать решение.

TODO: Добавить локальный мини-сервер + livereload. Перенос шрфитов + генерация css.

Снижение уровня свопинга

2010-10-17T00:45:00.006+03:00

Если вы заметили, что система (касается *nux-like ОС) использует swap (раздел подкачки) чаще ожидаемого, то не стоит расстраиваться раньше времени. Есть простой способ настроить частоту свопинга (сбрасывания страниц памяти в своп).

swappiness

Существует параметр ядра swapiness, который отвечает за агрессивность свопинга. Его значения от 0 до 100 - уровень свободной памяти (в процентах), при котором система начинает активно сбрасывать своп. 0 - использовать своп, только в критических ситуациях, 100 - использовать как можно чаще.
По-умолчанию это значение равно 60.

Посмотреть текущее значение параметра:

$ cat /proc/sys/vm/swappiness

Для изменения значения "на лету":

# echo 20 > /proc/sys/vm/swappiness

или

# sysctl -w vm.swappiness=20

Для того, что бы установить значение swapiness при загрузке, необходимо в файл /etc/sysctl.conf добавить/изменить следующее:

vm.swappiness=20

vfs_cache_pressure

Ещё один немаловажный параметр ядра - vfs_cache_pressure. Он отвечает за размер выделяемой памяти под кеширование дисковых операций.
0 - не кешировать ничего.
100 - значение по-умолчанию.
>100 - агрессивно кешировать дисковые операции.

Вот здесь, предлагают путём экспериментов выяснить оптимальное для вас значение. Я выбрал 50.

Просмотр текущего значения:

$ cat /proc/sys/vm/vfs_cache_pressure

Изменить "на лету":

# echo 50 > /proc/sys/vm/vfs_cache_pressure

или

# sysctl -w vm.vfs_cache_pressure=50

Для установки значения vfs_cache_pressure при загрузке, добавить/изменить в файле /etc/sysctl.conf:

vm.vfs_cache_pressure=50

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

Вертикальные вкладки

2010-09-18T16:35:00.002+03:00

В данной статье я подробно рассмотрю процесс предоставления информации на странице, с помощью вкладок. А конкретнее, речь будет идти о, не совсем стандартных, но очень удобных, вертикальных вкладках.

ВкладкиW - очень удобное средство навигации и предоставления информации на сайте. Сам часто удивлялся на сколько удобно пользоваться сайтами, разделы которых предоставлены в виде вкладок. Секрет успеха этого "компонента" просто - "Вкладки самоочевидны и дают ощущение физического пространства", сказал Стив Круг в своей знаменитой книге "... не заставляйте меня думать". Вопросу вкладок посвящены 87-94 страницы. Настоятельно рекомендую ознакомиться с данной книгой автора, уверен, так или иначе она будет вам полезна.

Теперь о реализации. Есть множество способов быстро создать вкладки, в основном они отличаются в зависимости начального подхода к написанию сайта. Вот примеры некоторых реализаций:

asp.net: http://www.asp.net/ajax/ajaxcontroltoolkit/samples/tabs/tabs.aspx
gwt: http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/ui/TabBar.html
jQuery: http://docs.jquery.com/UI/Tabs

Но я оттолкнусь от более простого варианта - каркас на HTML+CSS, механика на JavaScript (да, здесь без клиентских скриптов не обойтись). В таком случае можно будет глубже понять и прочувствовать механику работы и реализацию подобных элементов интерфейса.
Для упрощения работы с js скриптами, я буду использовать известную библиотеку jQuery.

Каркас и раскраска

Для начала, набросаем скелет будущей панели с вкладками.
Рассмотрев прототип будущей страницы, можно сказать, что основных составляющих будет две - корешок вкладки и её содержимое. В выбранном ключе реализации они могут находиться где-угодно на странице и как-угодно удалённые друг от друга. Я хочу сделать вкладки с вертикально расположенными корешками. Корешками будут картинки.

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>"CSS : Неизвестное об известном", часть 5, вертикальные вкладки</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <div id="content"> <div id="tab-container"> <div style="display: block;" id="general"> <pre>Задумались ли вы в своей работе, ...</pre> </div> <div style="display: none;" id="participants"> <pre>Ах, друг мой, молодость тебе нужна, ...</pre> </div> <div style="display: none;" id="feedbacks"> <pre>Пергаменты не утоляют жажды. ...</pre> </div> </div> <div id="tab-headers"> <ul> <li><a href="#general"><img src="process.png" class="sidebar-button-icon" alt="Training Types" /></a></li> <li><a href="#participants"><img src="users.png" class="sidebar-button-icon" alt="Training Types" /></a></li> <li><a href="#feedbacks"><img src="comments.png" class="sidebar-button-icon" alt="Training Types" /></a></li> </ul> </div> </div> </body> </html>

В теле каждой "будущей" вкладки, я написал отрывки из "Фауста".

Далее можно приступать к раскрашиванию макета CSS-ом.

<link href="style.css" rel="stylesheet" type="text/css" />

- добавить в тег title.

Для начала, необходимо расставить по местам главные блоки tab-container и tab-headers.

#tab-container { float: left; margin-right: -80px; width: 100%; } #tab-headers { float: right; width: 80px; }

для "резиновой" разметки сайта и прибивания дива к правому краю, используются отрицательный правый отступ, величиной с ширину правого div'а, 80px.

Скрыть содержимое всех вкладок, кроме первой: <div style="display: block;" и <div style="display: none;" соотв.

Далее следует обратить внимание на организацию закладок, выполненых в виде списка ul-li тегами, следуя семантической вёрстке.

Посмотрим на CSS-оформление заголовков вкладок

#tab-headers > ul { list-style: none; padding: 0px; margin-top: 20px; }

list-style: none отключает рисование маркеров напротив элементов списка.
вертикальный отступ в 20 px, имеет отношение лишь к общему оформлению.

#tab-header > ul > li > a { display: block; } #tab-header > ul > li > a:focus { outline: 0; }

Для того что бы ссылка занимала всё пространство тега li. И для того, что бы при получении фокуса, некоторые сообразительные браузеры не рисовали точечную обводку ссылки.

Определимся с цветовым оформлением. Будем использовать в основном два цвета, #EEEEEE - для основного фона, #444444 - для фона вкладок.
А при наведении мыши на вкладку, она подсвечивается основным фоновым цветом. Текущая выбранная вкладка то же. Но для того, что бы как-то различать и управлять текущей вкладкой - выделим класс selected. Тогда:

#tab-headers > ul > li.selected, #tab-headers > ul > li:hover { background-color: #EEEEEE; }

а в селектор #tab-headers добавим background-color: #444444;
и

#content { background-color: #EEEEEE; }

Осталось описать стиль для пиктограмм и текста на теле вкладок

img.sidebar-button-icon { border: none; margin: 8px; } #tab-container pre { font-size: 1em; font-family: sans serif, arial; margin-left: 20px; }

и можно смотреть на результат.

Доработка JavaScript-ом

Далее очень просто, при помощи jQueryW библиотеки расширения JavaScriptW, можно заставить работать вкладки.

<script src="jquery.js" type="text/javascript" charset="utf-8"></script>

или

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

и напишем простенький скрипт:

<script type="text/javascript"> $(document).ready(function(){ var tabContainers = $('#tab-container > div'); tabContainers.hide().filter(':first').show(); $('#tab-headers ul li a').click(function () { tabContainers.hide(); tabContainers.filter(this.hash).show(); $('#tab-headers ul li').removeClass('selected'); $(this).parent().addClass('selected'); return false; }).filter(':first').click(); }); </script>

С начала определяем tabContainer, как #tab-container > div, и показываем, из всего набора div-ов, первый. Далее вешаем на #tab-headers ul li a обработчик события onClick. Он будет, с начала прятать все табы, а потом показывать тот, на который ведёт вкладка (они связаны одинаковыми id и якорем). Потом всё просто: убираем со всех #tab-headers ul li, класс selected, и ставим его на li текущей вкладки. Ну и в конце "как бы" нажимаем на первую вкладку (для того, что бы при загрузке всегда была выбрана первая вкладка).

Смотрим на результат.

В общем-то получилось то, что хотелось. Но чего-то не хватает... Как по мне, то теней под выбранной вкладкой.

Добавление тени

Опишем класс, который поможет это реализовать:

#tab-headers > ul > li.selected + li { box-shadow: inset 0 10px 8px -8px #000000; -moz-box-shadow: inset 0 10px 8px -8px #000000; -webkit-box-shadow: inset 0 10px 8px -8px #000000; }

здесь использован box-shadow из спецификации CSS3.

inset: указывает, что мы описываем внутреннюю тень;
0: смещение по оси X;
10px: смещение по оси Y;
8px: плотность размытия тени;
-8px: увеличение тени (в нашем случае - уменьшение) относительно размеров самого объекта.

И получим практически то, что хотели, но с двумя проблемами:

при наведении на вкладку с тенью, тень остаётся (смотрится некрасиво).
при выборе последней вкладки, под нею тень не появляется.

Первая проблема решается отключением тени при li.selected + li:hover:

#tab-headers > ul > li.selected + li:hover { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }

А для решения второй, прийдётся пойти на некоторую хитрость. Добавим в конец ul, ещё один замыкающий пустой li элемент. И назначим ему класс tab-last.

<li class="tab-last"> </li>

Опишем поведение класса:

#tab-headers > ul > li.tab-last:hover { background-color: inherit; }

Внимание! описание класса tab-last, необходимо сделать после li:hover.

Вот практически всё. Осталась одна мелкая недоработка, при наведении мыши на тень последней вкладки (которой является tab-last), она исчезает.
Исправляется она изменением селектора

#tab-headers > ul > li.selected + li:not(tab-last):hover { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }

Теперь тень будет убираться под элементом списка, если он следует за текущим выбранным (класс selected) и при этом не является последним (псевдо-элементом).

И конечный вариант.

Нарезка файлов 7-zip'ом

2010-09-15T15:29:00.005+03:00

Часто возникает необходимость разбить файл на куски определённого размера. Например, при записи больших файлов на "флешку" с файловой системой FAT32, которая не поддерживает файлы, размером больше 4 Гб.

Варианты решения:

Можно прибегнуть к помощи специализированных программ. Но тут возникает неудобство в том плане, что в случае переноса большого файла на другой компьютер, то эта специализированная программа должна быть установлена на нём.
Если это видео-файл, то его можно разрезать кодеком.
Разбить файл на части, при помощи архиватора.

Вот последним пунктом мы и займёмся.
Выбор среди архиваторов пал на 7-zip, как один из самых мощных кроссплаформенных архиваторов с открытым исходным кодом.

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

$ 7z a -tzip -mx=0 -v4g Archive_Name.zip Video_File.avi

a: выполнять операцию добавления файлов в архив, грубо говоря - архивирование
-tzip: архивировать в zip
-mx=0: уровень сжатия 0, т.е. без сжатия
-v4g: разбивать на части, каждый кусок, размером в 4 Гб
Archive_Name.zip: имя файла-назначения, название архива с расширением. Будьте внимательны, .zip само не добавится
Video_File.avi: имя файла(ов)-целей. Можно использовать маски * и ?

Когда необходимо провести "нарезку" нескольких файлов, можно выстроить ряд из команд 7z a ..., разделяемых знаком удвоеного амперсанта && (работает только в -nix системах).

SSH туннелирование, при помощи C#

2010-09-03T00:35:00.003+03:00

Ситуация: необходимо получить доступ к БД, которая находится на сервере. На первый взгляд ничего сложного: узнаём порт, который слушает сервер БД, и коннектимся. Но сервер БД слушает localhost порт, а провайдер категорически не хочет открывать порт сервера БД на внешку, в чём я его поддерживаю.

Существует множество способов решить данную проблему, и один из них - создание SSH-туннеля между сервером и клиентом.

картинки взяты с какой-то статьи о remote-debugging'е ZendFramework и немного подправлены

Под *nix системами решение простое:

$ ssh -f -N -L 5432:localhost:5432 username@host

-f: оставить соединение в фоне
-N: не выполнять никаких команд
-L: выполнить "проброс" портов в формате port:host:hostport

Для удалённого SSH-соединения во все времена выручал пресловутый PuTTY. Он же и умеет делать SSH-туннели.

Но поставлять стороннее приложение, хоть оно и opensource, с продуктом, только для создания SSH-туннеля и проброски портов - “не спортивно”. Нужно научить наше приложение самому поднимать SSH соединение.

Известно, что в составе библиотек .NET Framework нет инструментов для работы с SSH-протоколом.
После непродолжительного "гугления" можно обнаружить две разработки, которые не требуют от вас много денежных знаков: Granados и SharpSSH.

Что касается первого, то меня огорчило три вещи:

совсем невменяемая документация;
запутанная структура проекта;
возраст (последние изменения датированы апрелем 2004 года);

Второй же, в отмену, имеет и хорошую документацию (+ блог автора, Тамир Гал) и внятную структуру проекта. Хоть новизной так же не блещет. Помимо этого у проекта есть форк SharpSSH2. Отличия от "папки":

переведён на .NET Framework 3.5;
дополнительные настройки компрессии;
дополнительные опции шифрования AES;
пачка мелких "энхансов".

Сам по-себе SharpSSH, по заявлению автора, является ни чем иным, как переписанным JSch проектом с Java на C#.

Для начала работы, нам необходимо подключить библиотеку SharpSSH и её namespace.

using SharpSsh;

Также необходимо будет реализовать простенький интерфейс:

public interface UserInfo { /// <summary> /// Returns the user passphrase (passwd for the private key file) /// </summary> String getPassphrase(); /// <summary> /// Returns the user password /// </summary> String getPassword(); /// <summary> /// Prompt the user for a password /// </summary> bool promptPassword(String message); /// <summary> /// Prompt the user for a passphrase (passwd for the private key file) /// </summary> bool promptPassphrase(String message); /// <summary> /// Prompt the user for a Yes/No input /// </summary> bool promptYesNo(String message); /// <summary> /// Show messages /// </summary> void showMessage(String message); }

Примерно вот так:

public class MyUserInfo : UserInfo { private String passphrase; public MyUserInfo (String Passphrase) { passphrase = Passphrase; } public String getPassword() { return null; } public bool promptYesNo(String str) { return true; } public String getPassphrase() { return passphrase; } public bool promptPassphrase(String message) { return true; } public bool promptPassword(String message) { return true; } public void showMessage(String message) { // MessageBox.Show(message); // Console.WriteLine(message); } }

ненужные методы я грубо закрыл return true;

Далее в коде создадим

Session session; Channel channel; JSch jsch; jsch = new JSch(); const String PrivateKeyFile = "id_dsa"; jsch.addIdentity(PrivateKeyFile); const String host = "host.com"; const String user = "user"; const String passphrase = "Passphrase"; //Create a new SSH session session = jsch.getSession(user, host, 22); session.setPortForwardingL(5432, "localhost", 5432); //Username and password will be given via UserInfo interface. UserInfo ui = new MyUserInfo(passphrase); session.setUserInfo(ui); //Connect to remote SSH server session.connect(); //Open a new Shell channel on the SSH session channel = session.openChannel("shell"); //Connect the channel channel.connect(); //Wait till channel is closed while (!channel.isClosed()) { System.Threading.Thread.Sleep(500); }

Ну а дальше "причёсываем" код, добавляем try-catch, где надо и т.п.

Получаем малой кровью, очень даже неплохой SSH-туннель, средствами C#.

Извлечение звуковой дорожки

2010-08-08T23:41:00.006+03:00

Все мы много раз сталкиваемся с потребностью извлечь звуковую дорожку из любимого фильма, клипа ...
В мире windows, это было просто сделать при помощи VirtualDub, которая обычно идёт в месте с популярным паком кодеков K-Lite Codec Pack.

Как же поступить, если вы в -nix стране?

ffmpeg - шустрый аудио/видео конвертер, обычно предустановлен во всех дистрибутивах. Ну либо доустановить его не является проблемой.

$ ffmpeg -i input_file.avi audio_dump.mp3

с заданным (128 kbps) битрейтом:

$ ffmpeg -i input_file.avi -ab 128 audio_dump.mp3

mplayer - известный проигрыватель. Известен тем, что не требовательный к ресурсам и всеядный. Кроме того он тоже способен помочь нам справиться с задачей.

$ mplayer -dumpaudio input_file.avi -dumpfile audio_dump.mp3

Breadcrumbs в Nautilus. Если не работают

2010-08-04T21:40:00.011+03:00

Увидел как-то красоту breadcrumbs. Ну "красота" эта на любителя, но мне понравилось.

Наверное уже ни для кого не секрет, что подобное достигается установкой nautilus-elementary (nautilus-mod) и GTK-шной темы elementary.

Для арчеводов всё решается установкой пакетов nautilus-elementary и elementary-mod-gtk-theme из AURa.

Для арчефобов практически так же give-nautilus-elementary-breadcrumbs или Nautilus Elementary Breadcrumbs For Any Theme.

Но столкнулся со странной проблемой: заветных "хлебных крошек" так и не было в соотв. месте nautilus'а.
Предваряя глупые вопросы скажу, что заветную кнопку 'Edit Location' я жмакал, без толку естественно.

Я поначалу долго страдал, потом свыкся. :(

Недавно наткнулся на решение своей проблемы. Может кому поможет:

запускаем gconf-editor (доустанавливаем недостающие пакеты, если необходимо);
двигаемся по дереву apps > nautilus > preferences > always_use_location_entry;
убираем галочку;
радуемся;

Всплывающие подсказки на CSS

2010-06-20T01:03:00.000+03:00

В третьей по счёту статье, я бы хотел описать использование CSS для создания всплывающих подсказок (в простонародье - «хинт» или «тултип», hint и tooltip соотв.). На самом деле всё просто, и подход основывается на предыдущей статье о динамическом отображении элементов на странице.

Каркас и раскраска

Для примера возьмём шаблон гриды из первой статьи.

Общая идеология создания тултипов — держать неподалёку от «субъекта» скрытый div с, собственно, подсказкой и показывать её при наведении курсора на элемент/строку в таблице.

Например, имея вот такую строку:

<td>1</td><td>Расстрелять нельзя помиловать</td><td>135</td>

сделать вот так:

<td>1</td> <td> Расстрелять нельзя помиловать <div class="hint">Давайте знакомиться, я ваша первая всплывающая подсказка</div> </td> <td>135</td>

грубо конечно, неплохо было бы текст в ячейке («Расстрелять нельзя помиловать») тоже взять в какой-нибудь div, p или ещё что-то, но ведь ничего страшного не произойдёт, если этого не сделать ;)

.hint { font-size: 0.8em; background-color: #FFD672; border: 1px solid #8A5802; visibility: hidden; position: relative; left: 10px; width: 100px; } .grid tr:hover .hint { visibility: visible; z-index: 100; }

Надеюсь здесь ничего объяснять не надо. Единственное, что для вас может быть новым, так это z-index. Это свойство отвечает за то, в каком слое (по счёту) отображается элемент. Больше число — ближе к глазу пользователя, если можно так сказать. 0-ой уровень — уровень всех элементов по-умолчанию.

читаем:

Забегу наперёд и скажу, что в таком случае вы столкнётесь с проблемой, если ещё не успели догадаться о чём я. При появлении подсказки, строка таблицы будет раздвигаться на высоту самой подсказки. Можно конечно воспользоваться max-height для строки, но как показывает практика, это не панацея. Поэтому поступим следующим образом — заключим содержимое ячейки в отдельный div с фиксированной высотой:

<td>1</td> <td> <div class="limiter"> Расстрелять нельзя помиловать <div class="hint">Давайте знакомиться, я ваша первая всплывающая подсказка</div> </div> </td> <td>135</td> .limiter { height: 19px; vertical-align: text-top; }

Должно выглядеть вот так. Eсли рассмотреть под микроскопом, то увидим следующее:

Что же, с этой несложной задачей справились. Теперь хотелось бы навести красоту, а именно — добавить прозрачность и тень нашим подсказкам.

Прозрачность и тени

Вот здесь есть небольшая проблемка, маленькая, очень. Дело в том, что утверждённый w3c стандарт CSS2.1 не предусматривает свойств, отвечающих за прозрачность (можно конечно баловаться полу-прозрачным png-пикселем, но это... уж извините, называется страдать #censored#), а CSS3 ещё не готов (на момент написания статьи). Вот на этом месте хотелось бы остановиться немного подробнее.

Пока CSS3 в статусе драфта (черновика), нету единой спецификации, как такой эффект (прозрачность) должен описываться и реализовываться, поэтому создатели браузеров «рисуют» прозрачность, кто как считает правильным. Поэтому будем пытаться описать нашу прозрачность всеми возможными способами для всех браузеров, что бы «работало везде».

добавим в .grid tr:hover .hint строчки:

opacity: 0.8; /* CSS3 */ -moz-opacity: 0.8; /* Mozilla Firefox */ filter: alpha(opacity=80); /* IE6/7 */ -ms-filter: "alpha(opacity=80)"; /* IE8 */

Теперь можем наслаждаться красивыми полупрозрачными всплывающими подсказками над строчками таблицы.

Остались тени (добавить к классу .hint):

box-shadow: 1px 1px 2px #000000; -moz-box-shadow: 1px 1px 2px #000000; -webkit-box-shadow: 1px 1px 2px #000000;

Цель статьи достигнута. Как видите — обошлись без единой строчки скриптов.

Скажу ещё немного о CSS3 — это новая версия стандарта каскадных таблиц стилей, которую ждут дизайнеры, верстальщики и все, кто хоть как-то интересуется развитием IT-идустрии, интернета и сайто-строения. Обещают очень много новых фич, которые позволят отказаться от многих тривиальных JS. Например тени, колонки текста, перенос длинных слов, подгружаемые шрифты и много-много-много ещё. Все уважающие себя браузеры борятся за лейбочку «CSS3-compatible», хоть он ещё и драфт, ну и правильно. Многие web-разработчики уже вовсю применяют «вкусности» нового стандарта. Более подробно можно почитать:

http://www.w3.org/TR/css3-roadmap/
http://www.css3.com/
http://www.css3.info/
ну или банальное гугление вам в помощь ;)

Но и это не всё («Никогда не останавливайся на достигнутом» - ну и не будем ;)). Хочется показать замечательный эффект плавного изменения прозрачности (fade-effect).

Анимация

Используем CSS-свойство -webkit-transition для webkit-browsers-only (Safari, Chrome). Да, вы правильно поняли, увидеть как это работает вы сможете только в браузерах на webkit движке (http://webkit.org/, http://en.wikipedia.org/wiki/WebKit).

.hint { font-size: 0.8em; background-color: #FFD672; border: 1px solid #8A5802; visibility: hidden; position: relative; left: 10px; width: 100px; opacity: 0.0; /* CSS3 */ filter:alpha(opacity=0); /* IE */ -moz-opacity: 0.0; /* Mozilla Firefox */ -webkit-transition: -opacity 0.0s ease-out; } .grid tr:hover .hint { visibility: visible; opacity: 0.8; /* CSS3 */ -moz-opacity: 0.8; /* Mozilla Firefox */ filter:alpha(opacity=80); /* IE6/7 */ -ms-filter:"alpha(opacity=80)"; /* IE8 */ -webkit-transition-duration: 0.35s; z-index: 100; }

Главная идея — установить для невидимой подсказки прозрачность=0 по-умолчанию, а при появлении плавно изменять её до нужных нам 0.8 при помощи -webkit-transition-duration, в нашем случае задержка 0,35 сек.

Profit.

Как добиться подобного эффекта в других браузерах (если это возможно), разбирайтесь/ищите сами, моя задача была повернуть вашу голову в нужное направление, а дальше «Сам любий, сам» :).

Динамическое отображение с CSS

2010-04-22T00:24:00.013+03:00

Вот и пришло время второй статьи, посвящённой использованию CSS. К этому времени у меня нашлась цитата об актуальном использовании JS: «Если же вы пишете web-приложение, то постарайтесь вообще не выполнять ресурсоёмких операций на клиенте, по крайней мере продолжительное время, поскольку в Javascript до сих пор нет единого стандарта для создания многопоточности, и весь код исполняется в однопоточном режиме, что также может вызывать существенную задержку в обработке событий ». Не, подумайте, я не противник JS, как такового, я сам его использую и даже чаще, чем хотелось бы. Я за актуальное его использование и экономию вычислительных ресурсов клиентских машин.

Продолжу тему статьи, динамическое отображение. Все вы часто видели эффекты появления/исчезновения элементов web-страниц по какому-то событию. Обычно это было движение мышью. С большинстве случаев это реализуется при помощи JS, и реализуется достаточно просто — парой событий onmousover и onmouseout. Ну это и дети в песочнице знают, а вот то, что этот функционал можно заменить грамотным использованием знают не все. Да не все, судя по количеству избыточных скриптов на страницах.

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

<table class="grid"> <thead> <tr> <th>#</th><th>Goods</th><th>Price</th><th style="width: 40px;">Order</th> </tr> </thead> <tbody> <tr> <td>1</td><td>Клей для носа</td><td>44.12</td><td><input type="submit" value="+" /></td> </tr> <tr> <td>2</td><td>Кофрик подмышковый</td><td>13.11</td><td><input type="submit" value="+" /></td> </tr> <tr> <td>3</td><td>Северный джигит</td><td>13.56</td><td><input type="submit" value="+" /></td> </tr> <tr> <td>4</td><td>Туфля без задника</td><td>42.31</td><td><input type="submit" value="+" /></td> </tr> <tr> <td>5</td><td>Бинокль "Соседка"</td><td>58.00</td><td><input type="submit" value="+" /></td> </tr> </tbody> </table>

ну и стили:

body {     font-family: sans-serif; } .grid, td, th {     border-collapse: collapse;    border: 1px solid #A4BED4;
} .grid th {     background-color: #A4BED4; }.grid tr {     background-color: #F0F8FF; }

.grid tr:hover {     background-color: #E3EFFF; }

Перед вами самая привычная грида с заказом товаров. Кнопка «+» добавляет товар в корзину покупок (функционал допишите сами по необходимости). Что мне не нравится в такой странице — изобилие этих ненужных кнопок. Ведь для заказа товара, нам совершенно нет необходимости держать их перед глазами. А скорее наоборот, показывать их только при необходимости.

Давайте сделаем это:

для начала спрячем кнопку по-умолчанию

.grid tr input { visibility: hidden; }

заметьте — в таком примере, будут спрятаны все input-контролы в строке (tr), если вас это не устраивает, вы должны подписать input'ту свой класс и тогда поменять строчку на .grid tr .your-class.

теперь покажем по наведению курсора на строку таблицы:

.grid tr:hover input { visibility: visible; }

Проверяем. Радуемся.

"Enjoy", как я люблю писать на доске в списке практических заданий.

Теперь другой пример, когда нам нужно заказать какое-то определённое количество товара (шт.)

<table class="grid"> <thead> <tr> <th>#</th><th>Lunch</th><th>Count</th><th>Price</th> </tr> </thead> <tbody> <tr> <td>1</td><td>Вареники с каротшкой</td><td>1</td><td>18.75</td> </tr> <tr> <td>2</td><td>Борщ со сметаной</td><td>4</td><td>7.19</td> </tr> <tr> <td>3</td><td>Солянка мясная</td><td>1</td><td>9.35</td> </tr> <tr> <td>4</td><td>Курица гриль</td><td>2</td><td>27.45</td> </tr> <tr> <td>5</td><td>Перец острый</td><td>0</td><td>0.58</td> </tr> </tbody> </table>

body {     font-family: sans-serif; } .grid, td, th {     border-collapse: collapse;    border: 1px solid #A4BED4;
} .grid th {     background-color: #A4BED4; }.grid tr {     background-color: #F0F8FF; }

.grid tr:hover {     background-color: #E3EFFF; }

Замечательно. Надеюсь у вас получилось то же, что и у меня.

Скажу честно, это пример с моей практики, но я сделал ещё в разы сложнее ;).

Вернёмся к нашему примеру, добавим в третье поле три div-а:

<div class="button"><a href="#">-</a></div> <div class="field">4</div> <div class="button"><a href="#">+</a></div>

задумка сделать вот такой Up-Down «контрол»

Реакцию на нажатие ссылок уж потрудитесь описать сами, если вам это нужно. Думаю вот тут без JS или AJAX или... (нужное впишите) не обойтись.

Подпишем кнопки классом button, а поле с цифрой field и придадим желаемый внешний вид:

.grid .button, div.field { float: left; border: 1px solid #A4BED4;
height: 22px;
}

тут в общем-то всё ясно, кроме свойства float. Ему будет посвящена одна из следующих статей (ссылка) о макетизации страницы при помощи div-ов. Для текущей статьи будет достаточно сказать, что float: left заставит элементы прижиматься друг к другу слева.

Ну а для особо любознательных:

.grid .button { width: 22px; test-align: center;
background-color: #E6E6FA; visibility: hidden;
}

По-умолчанию кнопка скрыта visibility: hidden;

.grid .button a { text-decoration: none; display: block;
}

Два очень важных свойства стиля ссылки <a... Первое уберёт надоедливое нижнее подчёркивание со ссылки при наведении курсора мыши. Второе заставит элемент отображаться блоком — занимать всё предоставленное пространство в рамках контейнера (определение display: block крайне неточное, но этого будет достаточно, что бы донести суть в рамках этой статьи), это нам даст полезный результат — нажатие мыши будут обрабатываться, как нажатие на ссылку когда курсор находиться над контейнером, даже необязательно над самой ссылкой.

Блок «почемучек»:

.grid .field { width: 22px; text-align: center;
}

тут всё понятно

и..., как всегда — завершающий штрих:

.grid tr:hover .button { visibility: visible;
}

Показывает кнопку, при наведении курсора мыши на строку таблицы.

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

Таким образом мы решаем массу задач:

скрываем от пользователя ненужные ему элементы страницы и показываем в тот момент, когда это нужно. Это создаёт впечатление интерактивности страницы. Да и вообще страницы смотрится «легче» и воспринимается проще.
отказываемся от JS, в которых не было необходимости.
получаем более простой код страницы.
ну и в конце-то концов красуемся своими навыками в CSS.

Mouse Hovering

2010-04-02T01:40:00.035+03:00

Эта статья будет открывать цикл публикаций о вёрстке в блоге.

Цель данных публикаций показать красоту и гибкость каскадных таблиц стилей (далее CSS) в верстке веб-страниц. Полагаю все уже давно знакомы с понятием CSS, зачем они и как с ними работать, я же покажу нетривиальное использование стилей, для «облегчения» страниц от javascript-ов. Я давно уже придерживаюсь javascript-less написания страниц, и вам советую. Нужно взять за правило, что JS встраивать в страницу нужно только тогда, когда в этом есть действительно необходимость, и по-другому никак не обойтись. Можно долго спорить об этой строчке, начинать holy-war, и всё такое, но это моё мнение и я постараюсь вам его аргументировать.

Начнём с самых простых вещей — подсветка элементов за указателем мыши.

Все, наверное, неоднократно наблюдали на сайтах этот занимательный эффект, ни для кого не секрет, что он добивается встраиванием JS в страницы. Наша задача будет добиться того же, только при помощи CSS-only. И так, приступим.

Предположим у нас есть до боли стандартная таблица:

<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>"CSS : Неизвестное об известном", часть 1, подсветка</title> </head> <body> <table class="grid"> <thead> <tr> <th>#</th><th>Data</th><th>Value</th> </tr> </thead> <tbody> <tr> <td>1</td><td>Расстрелять нельзя помиловать</td><td>135</td> </tr> <tr> <td>2</td><td>Военный долг</td><td>889</td> </tr> <tr> <td>3</td><td>А может быть</td><td>356</td> </tr> <tr> <td>4</td><td>Здание сохранения здоровья</td><td>231</td> </tr> <tr> <td>5</td><td>Самосвала</td><td>058</td> </tr> </tbody> </table> </body> </html>

Я сразу задал таблице класс grid, сейчас мы его и поднастроим так, что бы табличка была красивой.

table.grid, td, th { font-family: sans-serif; border-collapse: collapse; border: 1px solid #A4BED4; } table.grid th { background-color: #A4BED4; } table.grid tr { background-color: #F0F8FF; }

Табличка

Маленький фокус:

table.grid tr:hover { background-color: #E3EFFF; }

Теперь можно наслаждаться красивой подсветкой строк за курсором в таблице.

Если захочется «ховерить» ячейки — достаточно поменять строку на table.grid td.hover.

Это было очень просто, я предупреждал.

Настоятельно рекомендую почитать статью: w3.org: Selectors.

и на закуску w3schools: CSS :hover pseudo-class, w3schools: CSS Pseudo-classes.