Пепелсбей.net http://pepelsbey.net Sat, 27 Jun 2009 08:33:29 +0000 http://wordpress.org/?v=2.8.1-beta2 en hourly 1 TextMate Zen Coding 1.3 http://pepelsbey.net/2009/06/textmate-zen-coding/ http://pepelsbey.net/2009/06/textmate-zen-coding/#comments Sat, 27 Jun 2009 08:33:29 +0000 pepelsbey http://pepelsbey.net/?p=451 Логичным этапом после всех мечтаний про Zen Coding 2.0 стало написание документации по элементам, селекторам, свойствам и сокращениям.

На основе этой документации, пакеты Zen HTML и Zen CSS для редактора TextMate были обновлены до версии 1.3. Это обновление стало не столько исправлением ошибок в версиях 1.2, сколько подготовкой для перехода к версии 2.0. Тут вам и HTML 5, и CSS 3 и много других исправлений. А именно:

]]> Логичным этапом после всех мечтаний про Zen Coding 2.0 стало написание документации по элементам, селекторам, свойствам и сокращениям.

На основе этой документации, пакеты Zen HTML и Zen CSS для редактора TextMate были обновлены до версии 1.3. Это обновление стало не столько исправлением ошибок в версиях 1.2, сколько подготовкой для перехода к версии 2.0. Тут вам и HTML 5, и CSS 3 и много других исправлений. А именно:

Zen HTML

Набор элементов новой версии пакета создан на основе черновика HTML 5, плюс элемент <acronym>, который был исключён из HTML 5. Немного был изменён принцип именования шаблонов — сначала идёт версия языка, а потом уже тип:

  1. html:4t = HTML 4.01 Transitional
  2. html:4s = HTML 4.01 Strict
  3. html:5 = HTML 5
  4. html:xt = XHTML 1.0 Transitional
  5. html:xs = XHTML 1.0 Strict
  6. html:xxs = XHTML 1.1 Strict

Также добавлен новый шаблон страницы html:5:

  1. <!DOCTYPE HTML>
  2. <html lang="ru-RU">
  3. <head>
  4. <title></title>
  5. <meta charset="UTF-8">
  6. </head>
  7. <body>
  9. </body>
  10. </html>

Ещё один шаг к большей доступности пакета состоит в том, что теперь все элементы можно набирать как по псевдонимам, так и по полному имени:

  1. bq → <blockquote></blockquote>
  2. blockquote → <blockquote></blockquote>

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

Все элементы, которые имеют особенность много раз повторяться строка за строкой, теперь имеют механизм, который позволяет после написания первой строки сразу же приступать к написанию второй — достаточно нажать Tab после одного из следующих закрывающих тегов: </p>, </li>, </tr>, </th>, </td> или </option>.

Элемент <div> теперь разворачивается с атрибутами class и id более логично, раньше вместо точки использовалась собачка:

  1. div. → <div class=""></div>
  2. div# → <div id=""></div>

В список автоматических парных подстановок были добавлены русские кавычки: «„“». Теперь при наборе первой из них, автоматически будет подставляться и вторая.

HTML-элементы теперь сгруппированы на основе спецификации, поэтому навигация через меню «Bundles» теперь организована не по алфавиту, а по группам.

Zen CSS

Набор свойств в этом пакете основан на черновике спецификации CSS 3 и в дальнейшем будет обновляться, в зависимости от реализации в браузерах и решений, что принимает CSS WG. Этот пакет оптимизация коснулась в большей степени.

Основной файл настроек языка был взят из самой последней версии оригинального пакета CSS и модифицирован для полного соответствия CSS 3:

  • HTML-селекторы: 99, вместо прежних 76-ти
  • Псевдо-классы: 24, вместо прежних 5-ти
  • Свойства: 169, вместо прежних 125-ти
  • Значения: 160, вместо прежник 138-ми

Это значит, что все новые свойства и значения из черновика CSS 3 будут правильно подсвечиваться. Исключением станут вендорные свойства и значения, в частности, с префиксами. Их полезно отличать от остального массива кода. Также было модифицировано регулярное выражение, которое отвечает за HTML-селекторы, теперь подсвечиваться будут как строчные, так и прописные имена.

Всем свойствам, отвечающим за позиционирование (top, right, bottom, left) были присвоены однобуквенные сокращения: t, r, b, l. Соответственно, для свойства border теперь используется сочетание bd, по аналогии с bg для background. Да, стало длиннее, да, придётся привыкать, но общая логичность решения повысилась.

Короткое сочетание z вернулось и свойству z-index, которое близко к тем обнобуквенным, что отвечают за позиционирование. Поэтому свойство zoom, о котором мы когда-нибудь забудем, отправлено в zoo и открывается сразу со значением, равным единице.

Помимо этого в пакет была внесена некоторая вендорная специфика: вроде -ms-filter, display:-moz-inline-box, -webkit-box-shadow и некоторых других. Эти свойства также будут обновляться, в зависимости от поддержки новых экспериментальных свойств в различных браузерах.

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

  1. q:ru → quotes:'\00AB' '\00BB' '\201E' '\201C';
  2. q:en → quotes:'\201C' '\201D' '\2018' '\2019';

…а нажатая после символа ; клавиша Tab создаст строку для нового правила.

Кто здесь?

Сейчас пакеты проекта Zen Coding существуют в двух основных ветках:

  • Первая ветка использует для работы с сокращениями внутренние возможности редактора и существует в виде отдельных пакетов для каждого языка:
  • Вторая ветка является единым пакетом и использует для работы с сокращениями скрипт, написанный Сергеем Чикуёнком на JavaScript, а затем портированный для Python:
    • Zen Coding для редактора TextMate
    • Zen Coding для редактора Aptana
    • Zen Coding для редактора Coda

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

Несмотря на некоторую запутанность с ветками, пакеты продолжают развиваться, более того — планируется написание Zen HTML для UltraEdit и Zen CSS для возрождённого TopStyle 4.

Установка пакетов

Последние версии всех пакетов по-прежему можно скачать со страницы проекта на Google Code. Речь же пойдёт о специфике установки пакетов для редактора TextMate.

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

Если вы уже использовали предыдущие версии пакетов для TextMate, включая бета-версии пакетов 1.3 с Google Code, то пакеты нужно будет обновить прямой заменой файлов. Иначе, попытки смёржить две разные версии приведут к непредсказуемым последствиям. Итак, нужно сделать следующее:

  1. Закрыть TextMate
  2. Зайти в папку: ~/Library/Application Support/TextMate/Bundles/
  3. Удалить старые пакеты Zen-CSS и Zen-HTML
  4. Скопировать в эту папку новые пакеты

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

]]> http://pepelsbey.net/2009/06/textmate-zen-coding/feed/ 23 В чём мать родила http://pepelsbey.net/2009/04/as-my-mother-bore-me/ http://pepelsbey.net/2009/04/as-my-mother-bore-me/#comments Wed, 08 Apr 2009 13:02:37 +0000 pepelsbey http://pepelsbey.net/?p=450 CSS Naked Day

Традиционно раздеваемся, подставляя бледные тела страниц под весеннее солнце. CSS Naked Day покажет, кто чего стоит.

]]> http://pepelsbey.net/2009/04/as-my-mother-bore-me/feed/ 15 Zen Coding 2.0. Концепт http://pepelsbey.net/2009/04/zen-coding-concept/ http://pepelsbey.net/2009/04/zen-coding-concept/#comments Thu, 02 Apr 2009 15:19:15 +0000 pepelsbey http://pepelsbey.net/?p=447 На текущем этапе развития пакеты расширений Zen Coding для редактора TextMate зашли в тупик.

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

Главная проблема текущей реализации Zen Coding состоит в ограничениях, которые накладывает внутренний механизм работы бандлов в TextMate:

  • Все шаблоны нужно хранить в отдельных сущностях, что приводит к чрезвычайно трудоёмкому процессу изменения каких-то концептуальных механизмов. Самый яркий пример — переменная TM_CSS_SPACE, для её внедрения пришлось вручную перелопатить порядка 250 шаблонов.
  • Работа с выборкой из выделения или текущей строки нужных переменных далека от совершенства и просто не позволяет получить каки-то элементы без дополнительных скриптов.

Самым логичным выходом из данной ситуации, на мой взгляд, является написание какой-то отдельной обёртки, которая будет содержать в себе библиотеку всех элементов, вызываться по клавише Tab, анализировать контекст применения и уже делать всё, что нужно, невзирая на ограничения встроенных в TextMate механизмов.

Что же планируется сделать:

]]> На текущем этапе развития пакеты расширений Zen Coding для редактора TextMate зашли в тупик.

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

Главная проблема текущей реализации Zen Coding состоит в ограничениях, которые накладывает внутренний механизм работы бандлов в TextMate:

  • Все шаблоны нужно хранить в отдельных сущностях, что приводит к чрезвычайно трудоёмкому процессу изменения каких-то концептуальных механизмов. Самый яркий пример — переменная TM_CSS_SPACE, для её внедрения пришлось вручную перелопатить порядка 250 шаблонов.
  • Работа с выборкой из выделения или текущей строки нужных переменных далека от совершенства и просто не позволяет получить каки-то элементы без дополнительных скриптов.

Самым логичным выходом из данной ситуации, на мой взгляд, является написание какой-то отдельной обёртки, которая будет содержать в себе библиотеку всех элементов, вызываться по клавише Tab, анализировать контекст применения и уже делать всё, что нужно, невзирая на ограничения встроенных в TextMate механизмов.

Что же планируется сделать:

Zen HTML

Очевидно, что самым удобным синтаксисом для работы HTML-деревом является CSS-синтаксис. Самым ярким примером его использования является механизм CSS Query широко распространённый в современных JS-фреймворках. В них на всю катушку использются не только все селекторы выборки из CSS 3, но и другие кастомные штуки вроде :even, :not, :enabled и другие. И хорошо было бы использовать этот механизм выборки не только в CSS и JS, но и при написании HTML-кода.

Проанализировав типичные ситуации, возникающие при написании HTML, я пришёл к следующей группе базовых селекторов и их псевдонимов:

  • ID: E#name
  • Класс: E.name
  • Вложенность: E>E
  • Братство: E+E
  • Повторение: E*N, простой псевдоним братского E*3 = E+E+E
  • Разворачивание: E+, сложный псевдоним группы селекторов E+ = E>E+…

Базовые селекторы атрибутов id и class:

  1. div#name → <div id="name"></div>
  2. div.name → <div class="name"></div>
  3. div.one.two → <div class="one two"></div>
  4. div#name.name → <div id="name" class="name"></div>

Базовые селекторы E>E и E+E и их сочетания:

  1. bq>p →
  2. <blockquote>
  3. <p></p>
  4. </blockquote>
  6. p+p →
  7. <p></p>
  8. <p></p>
  10. ul>li+li →
  11. <ul>
  12. <li></li>
  13. <li></li>
  14. </ul>

Псевдонимы базовых — E*N и E+:

  1. p*2 →
  2. <p></p>
  3. <p></p>
  5. ul>li*2 →
  6. <ul>
  7. <li></li>
  8. <li></li>
  9. </ul>
  11. dl+ →
  12. <dl>
  13. <dt></dt>
  14. <dd></dd>
  15. </dl>

По сути, селектор E+ не является точным указанием на структуру желаемого дерева, скорее это псевдоним к шаблону, то есть псевдоним dl+ равносилен dl>dt+dd, а table+ равносилен table>tr>td. Помимо этого, стоит понимать разницу между базовым селектором E+E и псевдонимом E+ — в первом случае это обозначение следования друг за другом, а во втором это признак разворачиваемого шаблона.

Кажется, что подобным способом можно развернуть всё дерево документа, но это не так. Подобный синтаксис не предусматривает ветвление — углублять дерево можно только в одном направлении, т.е. вложить в одного родителя двух и более детей можно, но развить вложенность можно только для последнего из них. По идее, можно было бы придумать какую-то группировку, но это, во-первых, будет сильно противоречить CSS-синтаксису, а во-вторых, не настолько востребованно.

Чуть более сложный пример:

  1. div#page>h3.title+ul>li.item*3>a →
  2. <div id="page">
  3. <h3 class="title"></h3>
  4. <ul class="menu">
  5. <li class="item"><a href="#"></a></li>
  6. <li class="item"><a href="#"></a></li>
  7. <li class="item"><a href="#"></a></li>
  8. </ul>
  9. </div>

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

Zen CSS

Этот пакет ожидают менее серьёзные изменения. Основные усилия будут направлены на следующее:

  • Более логичную и удобную систему псевдонимов и предустановленных шаблонов.
  • Поддержку всех актуальных CSS-свойств, присутствующих в черновике CSS 3 и уже реализованных в браузерах, в частности, с вендорными префиксами.
  • Организация автоматической сортировки свойств в специфическом порядке.

Список актуальных свойств был составлен при помощи фильтрации полного списка существующих в CSS 3 свойств. В итоге из 255 наименований осталось только 131 свойство, для каждого из которых был придуман короткий псевдоним mt → margin-top, а также набор шаблонов f+ → font:1em Arial,sans-serif.

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

  1. Позиционирование
  2. Поведение и свойства блока
  3. Размерность блока
  4. Цветовое оформление
  5. Специальные типы содержимого
  6. Текст
  7. Визуальные свойства
  8. Печать

Логика группировки основывается на двух главных принципах:

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

Внутри блоков логика «от глобального к частному» сохраняется, но начинает работать ещё один механизм, сортирующий подобные свойства в таком порядке, в котором их принято упоминать в сокращённой записи:

  1. font:bold italic small-caps 1em sans-serif;
  2. font-weight:bold;
  3. font-style:italic;
  4. font-variant:small-caps;
  5. font-size:1em;
  6. font-family:sans-serif;

Тоже самое и со свойствами, относящимися к четырём сторонам объекта: за основу взят принцип TRouBLe или Top Right Bottom Left, который используется в сокращённой записи:

  1. #box {
  2. position:absolute;
  3. top:1px;
  4. right:2px;
  5. bottom:3px;
  6. left:4px;
  7. padding:1px 2px 3px 4px;
  8. padding-top:1px;
  9. padding-right:2px;
  10. padding-bottom:3px;
  11. padding-left:4px;
  12. }

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

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

Алло, таланты!

Сейчас я продемонстрировал вам концепцию будущих пакетов Zen Coding. Для дальнейших шагов по её реализации осталось только найти соавтора или соавторов, которые согласны не только помочь мне реализовать эту функциональность, но и, возможно, заняться поддержкой, развитием и портированием пакетов для других редакторов. Большая часть алгоритмов написана, остальная дописывается и ждёт своего часа, чтобы быть реализованной в пакетах Zen Coding не только для TextMate, но и для всех редкторов, что поддерживают плагины: Coda, Espresso, IntelliJ IDEA и многих других.

Если вы используете TextMate, знаете на хорошем уровне какой-нибудь скриптовый язык вроде Python, Ruby, Perl или даже PHP, и хотите написать что-нибудь такое или портировать Zen Coding для своего любимого редактора — смелее, пишите мне: pepelsbey@gmail.com.

Проект по-прежнему планируется держать на Google Code, но помимо этого будет открыт отдельный сайт с документацией и примерами — zen-coding.ru

Как обычно, с интересом жду ваших мнений по поводу озвученной концепции развития пакетов Zen Coding.

]]> http://pepelsbey.net/2009/04/zen-coding-concept/feed/ 44 Яндекс.Субботник в Киеве http://pepelsbey.net/2009/03/yandex-sabbath-kiev/ http://pepelsbey.net/2009/03/yandex-sabbath-kiev/#comments Tue, 31 Mar 2009 15:56:53 +0000 pepelsbey http://pepelsbey.net/?p=448 Что ж, праздник приходит и к нашим украинским коллегам — 25 апреля Яндекс.Субботник приедет в Киев с гастролями. Программа, в основном, повторяет первое московское мероприятие, однако, насколько мне известно, точной копией не является — как минимум, докладчики учтут все вопросы и пожелания, что прозвучали после первого выступления.

Итак, участники: симферопольцы Вадим Макишвили с моноспектаклем «Вёрстка в IntelliJIDEA» и Виталий Харисов с развитем темы универсальной вёрстки, ваш покорный слуга со второй версией доклада «С ножом против паровоза» и целых два доклада про API Яндекс.Карт от Александра Тармолова: один обзорный, второй — в виде мастер-класса.

До встречи в Киеве!

]]> http://pepelsbey.net/2009/03/yandex-sabbath-kiev/feed/ 9 Даркбокс 2 http://pepelsbey.net/2009/02/darkbox-2/ http://pepelsbey.net/2009/02/darkbox-2/#comments Thu, 19 Feb 2009 01:26:14 +0000 pepelsbey http://pepelsbey.net/?p=446
  • Загрузчик
  • Кнопка слева
  • Кнопка справа

    • Жизнь выдвигает новые требования, поэтому некоторые решения получают продолжение. Итак, перед вами продолжение экспериментов над одним простым, но очень полезным способом красиво открывать одиночные картинки. Более подробно об изначальной проблеме и первом варианте решения читайте в заметке «Даркбокс», а сейчас поговорим о даркбоксе номер два.

    Для начала пример — Даркбокс 2, всё в одном файле.

    ]]>
  • Загрузчик
  • Кнопка слева
  • Кнопка справа

    • Жизнь выдвигает новые требования, поэтому некоторые решения получают продолжение. Итак, перед вами продолжение экспериментов над одним простым, но очень полезным способом красиво открывать одиночные картинки. Более подробно об изначальной проблеме и первом варианте решения читайте в заметке «Даркбокс», а сейчас поговорим о даркбоксе номер два.

    Для начала пример — Даркбокс 2, всё в одном файле.

    Что нового, с виду

    • Картинка большей ширины или высоты чем окно, будет автоматически подогнана под его размеры, чтобы пользователь не испугался и смог нажать заветный крестик. Попробуйте сильно уменьшить размер окна и снова открыть картинку.
    • Датчик загрузки во всех нормальных браузерах, кроме Opera, обзавёлся скруглёнными уголками благодаря свойству border-radius.
    • Крестики закрытия картинки теперь располагаются в наиболее удобных местах, в зависимости от платформы: на Маке — слева, на PC — справа.
    • Теперь любой этап жизни даркбокса можно прервать при помощи клавиши Esc, на случай если вы передумали или кликнули случайно.

    Что нового, технически

    Ну а чисто технически изменений не слишком много. В целом, код подрос примерно на сорок строк, большую часть из которых занимает мудрёное вписывание картинки в размеры окна. Помимо этого, сделана попытка сохранять создаваемый для дарбокса объект, чтобы клонировать и использовать его повторно для всех картинок. Не уверен, что это сильно повысило производительность, но попытка сделана:

    1. if(!$('div.darkbox-frame').length) {
    2. darkbox = $('<div class="darkbox-frame">…').appendTo('body');
    3. }
    4. var frame = darkbox.clone().appendTo('body');

    Совместимость у скрипта прежняя, разве что тестирование в IE5 привело к JS-ошибке, но дело, скорее всего, в текущей версии jQuery. Думаю, что отряд не заметит потери бойца. Ну а Opera традиционно заставила прямо-таки создать картинку, а не просто приделать атрибут src к уже имеющемуся коду.

    Другая проблема в IE, что тянется ещё с прошлой версии, случается во время анимации прозрачности блока с чёрным фоном от 0 до 50%. Суть её такова, что если описывать прозрачность в CSS при помощи filter:alpha(opacity=N), то блок при появлении становится чёрным, потом абсолютно прозрачным и только потом начинается анимация. Видно это всего долю секунды, но осадочек остаётся. Трюк в стиле добавим немного абсурда, когда прозрачность добавляется к блоку при помощи JS, сработал, но снизил производительность всего решения. Поэтому вопрос открыт.

    С интересом жду ваших мнений, замечаний и предложений. Разработка даркбокса продолжается…

    ]]>     http://pepelsbey.net/2009/02/darkbox-2/feed/ 29     С ножом против паровоза http://pepelsbey.net/2009/02/with-knife-against-train/ http://pepelsbey.net/2009/02/with-knife-against-train/#comments Sun, 15 Feb 2009 03:24:30 +0000 pepelsbey http://pepelsbey.net/?p=444 Вашему вниманию предлагается видеозапись презентации «С ножом против паровоза», прозвучавшей на Яндекс.Субботнике 31 января этого года. Речь в ней идёт о нарезке и оптимизации изображений для вёрстки. Длительность доклада вместе с вопросами — 1 час 12 минут, размер видео порядка 270 МБ.

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

    Для лучшего понимания, доступен оригинал презентации: С ножом против паровоза (PDF, 4.5 МБ). Все видео-версии докладов, прозвучавших на встрече, находятся на Яндекс.Видео, а в полном качестве — на сайте Яндекса.

    ]]>     http://pepelsbey.net/2009/02/with-knife-against-train/feed/ 57     Яндекс.Субботник http://pepelsbey.net/2008/12/sabbath-yandex-sabbath/ http://pepelsbey.net/2008/12/sabbath-yandex-sabbath/#comments Wed, 24 Dec 2008 10:48:53 +0000 pepelsbey http://pepelsbey.net/?p=436 Похоже, что череда новогодних подарков стартовала раньше, чем ожидалось — теперь у нас есть новое бесплатное образовательное мероприятие под названием Яндекс.Субботник.

    Основа программы — доклады суровых крымских специалистов по клиентской разработке: Виталия Харисова, Вадима и Наталии Макишвили. Далее следуют доклады из не менее суровой северной столицы: Евгения Фирсова с деплойментом вёрстки и ваш покорный слуга с… да, «с ножом против паровоза». Ну и конечно первое публичное выступление по API Яндекс.Карт от Фёдора Голубева.

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

    Однако это не повод отчаиваться — все материалы и видеозаписи выступлений будут опубликованы вскоре после завершения мероприятия. А всем, кто не успел зарегестрироваться — я уверен — повезёт в следующий раз…

    А для тех, кому всё-таки повезло, предлагаю свою версию программы выступления, которую можно удобно распечатать: Яндекс.Субботник — Программа.

    ]]>     http://pepelsbey.net/2008/12/sabbath-yandex-sabbath/feed/ 10     Даркбокс http://pepelsbey.net/2008/11/darkbox/ http://pepelsbey.net/2008/11/darkbox/#comments Thu, 20 Nov 2008 12:49:32 +0000 pepelsbey http://pepelsbey.net/?p=404 К счастью, прошли времена, когда для загрузки картинки разработчики открывали отдельное окно браузера. У нас нынче вебдваноль, поэтому открывать отдельные окна это моветон, а современные JS-фрейворки дают возможность показать картинку по-настоящему красиво без особых сложностей.

    И вроде решений для этого написано уйма — бери, да используй. Но вот беда — все они сделаны по принципу «plug-n-play», мол подключай и не парься. В итоге эти решения снабжены всевозможными фичами, которые позволяют открывать окошки с любым содержимым, передвигаться по галерее при помощи клавиатурных сокращений и многое-многое другое. Классно, ведь! Нет? Ну, не совсем — в итоге код такого плагина распухает от всех этих возможностей, которыми никто не будет пользоваться, и непонятных HTML-шаблонов, содержащих сомнительный код — и тут же стили к нему. А вот это уже не слишком классно…

    Если страдать синдромом аккуратизма определённой тяжести, то подход «а всё равно это JS, какая нафиг разница» становится совсем неприемлем. А переписывание чужих решений практически равноценно написанию собственного — чем, собственно, я и занялся при подготовке новой версии этого сайта.

    Начиналось всё с простых, но очень правильных принципов:

    • Данные, т.е. картинка, — в HTML
    • Оформление — в CSS
    • Динамика — в JS, с полной обратной совместимостью

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

    Даркбокс — пример работы, весь код в одном файле.

    ]]>     К счастью, прошли времена, когда для загрузки картинки разработчики открывали отдельное окно браузера. У нас нынче вебдваноль, поэтому открывать отдельные окна это моветон, а современные JS-фрейворки дают возможность показать картинку по-настоящему красиво без особых сложностей.

    И вроде решений для этого написано уйма — бери, да используй. Но вот беда — все они сделаны по принципу «plug-n-play», мол подключай и не парься. В итоге эти решения снабжены всевозможными фичами, которые позволяют открывать окошки с любым содержимым, передвигаться по галерее при помощи клавиатурных сокращений и многое-многое другое. Классно, ведь! Нет? Ну, не совсем — в итоге код такого плагина распухает от всех этих возможностей, которыми никто не будет пользоваться, и непонятных HTML-шаблонов, содержащих сомнительный код — и тут же стили к нему. А вот это уже не слишком классно…

    Если страдать синдромом аккуратизма определённой тяжести, то подход «а всё равно это JS, какая нафиг разница» становится совсем неприемлем. А переписывание чужих решений практически равноценно написанию собственного — чем, собственно, я и занялся при подготовке новой версии этого сайта.

    Начиналось всё с простых, но очень правильных принципов:

    • Данные, т.е. картинка, — в HTML
    • Оформление — в CSS
    • Динамика — в JS, с полной обратной совместимостью

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

    Даркбокс — пример работы, весь код в одном файле.

    Принципы работы

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

    Контейнер для открытия картинки представляет собой блок вырванный из потока и спозиционированный при помощи position:fixed. Внутри него расположено само полупрозрачное затемнение и блок загрузчика с крутящимся псевдо-датчиком загрузки. Все эти объекты создаются динамически и складываются в нужном порядке:

    1. <div class="popup-frame">
    2. <div class="popup-shadow"></div>
    3. <div class="popup-loader"></div>
    4. </div>

    Это дело красиво появляется и дальше в загрузчик вкладываются пока невидимые картинка и кнопка закрытия. Атрибут src берётся из href ссылки, alt из её title:

    1. <img src="…" alt="…"/>
    2. <span title="Закрыть"></span>

    Сразу после загрузки нашей картинки, загрузчику выдаётся класс popup-loaded, который отключает датчик загрузки. Дальше он плавно меняет свои размеры, смещение, прозрачность и, наконец, ещё раз сменив класс на popup-canvas, показывает нам картинку. А на тень, кнопку и Esc вешается обработчик закрытия всей этой красоты.

    Таким образом, всё оформление, что не участвует в анимации, применяется при помощи CSS-классов, а не присутствует в JS явно, как очень любят делать все плагинописатели.

    Неизбежное исключение

    Да, чуть было не забыл про IE. Данному скрипту удалось угодить всем его актуальным версиям, начиная с 5.5 и заканчивая 8.0. Проблемы с position:fixed для IE6 и младше решаются при помощи expression:

    1. * HTML BODY {
    2. background:url(about:blank) fixed;
    3. }
    4. * HTML .popup-frame {
    5. position:absolute;
    6. top:expression(0+(
    7. (e=document.documentElement.scrollTop)
    8. ?e:document.body.scrollTop)+'px');
    9. }

    Правило background:url(about:blank) fixed задаёт пустое фиксированное изображение для того, чтобы позиционирование блока в IE6 работало плавно, без рывков. Прозрачность для всех версий IE решается при помощи filter:alpha(opacity=N), а использование PNG-24 картинки для кнопки, столь же традиционно лечится для IE6 с помощью AlphaImageLoader.

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

    Итак, перед вами не претендующее на красоту и универсальность, однако, простое и эффективное решение для открытия картинок в стиле вебдваноль. Если кому-то пригодится — буду только рад.

    19 декабря 2008: благодаря внимательности читателей, поправлены некоторые ошибки в IE6, в частности — методика борьбы с дрожащим фоном и expression теперь универсальны и работают как в Standard Mode, так и в Quirks Mode.

    19 февраля 2009: внимание, вышла вторая версия Даркбокса, которая и рекомендуется к использованию.

    ]]>     http://pepelsbey.net/2008/11/darkbox/feed/ 47     Zen Coding 1.2 http://pepelsbey.net/2008/11/zen-coding-1-2/ http://pepelsbey.net/2008/11/zen-coding-1-2/#comments Sat, 15 Nov 2008 00:39:52 +0000 pepelsbey http://pepelsbey.net/?p=406 Очередная порция исправлений ошибок, новых возможностей и прочих приятных изменений пакетов Zen CSS и Zen HTML, а также новый способ их распространения.

    Главное изменение связано с открытием филиала проекта на Google Code — Zen Coding. Теперь следить за появлением новых версий станет проще, а получить их можно будет двумя способами: по старинке — скачав и распаковав архив, либо при помощи svn, что позволит удобно следить за внесёнными изменениями.

    ]]>     Очередная порция исправлений ошибок, новых возможностей и прочих приятных изменений пакетов Zen CSS и Zen HTML, а также новый способ их распространения.

    Главное изменение связано с открытием филиала проекта на Google Code — Zen Coding. Теперь следить за появлением новых версий станет проще, а получить их можно будет двумя способами: по старинке — скачав и распаковав архив, либо при помощи svn, что позволит удобно следить за внесёнными изменениями.

    С первым способом всё понятно — архиватором умеют пользоваться все, поэтому вы знаете, что делать с последними версиями пакетов на странице загрузки. Второй способ чуть сложнее: если вы работаете под Mac OS X, то всё необходимое для работы с svn в вашей системе уже есть, однако можно пойти дальше и установить замечательное приложение Versions или воспользоваться встроенной поддержкой svn в редакторе Coda. Я же опишу простейший способ — при помощи Терминала, стандартной программы Mac OS X.

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

    1. cd ~/Desktop/
    2. svn co http://zen-coding.googlecode.com/svn/trunk/ .

    Если же вы работаете под Windows, то могу предложить вам воспользоваться утилитой TortoiseSVN — тоже не менее простой в обращении. Так, с контролем версий разобрались, переходим к списку изменений:

    Zen HTML

    Система комбинаций E+n, которая разворачивала селекторы с необходимым количеством детей (от одного до пяти) была полностью заменена техникой, которая позволит быстрее набирать любые последовательности списков для элементов <li>, <th>, <td> и <option>. Суть техники заключается в том, что нажатие клавиши Tab после каждого закрывающего элемента будет создавать новую строку и следующую пару элементов. Таким образом, кобинация li Tab Значение Tab Tab Значение создаст нам такую конструкцию:

    1. <li>Значение</li>
    2. <li>Значение</li>

    Поясню: первый Tab создаст нам первый <li>, второй выведет курсор за его пределы, а нажатый тут же третий, создаст новую строку со вторым <li>. Так можно продолжать довольно долго, процесс завораживает своей простотой. Далее — небольшие изменения:

    • Элемент <br> теперь можно вставить не только комбинацией br+Tab, но и более удобной и понятной Shift+Enter.
    • Для оборачивания выделенного фрагмента в нужный элемент, появились сочетания Ctrl+W — для однострочного заворачивания и Ctrl+Shift+W — для многострочного. По умолчанию, оборачивающим элементом становится <div>, но вы тут же можете изменить его, причём сразу в открывающем и закрывающем тегах.

    Zen CSS

    Новая версия этого пакета также обзавелась механизмом быстрого набора длинного списка свойств, без необходимости вручную создавать новую строку. Теперь по сочетанию ;+Tab, т.е. после каждого закрытого правила, автоматически вставляется перевод строки. Например, комбинация fl:l Tab Tab b:n Tab Tab c Tab создаст нам следующий код:

    1. float:left;
    2. border:none;
    3. color:#FFF;

    То есть: первый Tab создаёт свойство, а следующий новую строку и всё по новой. Если же свойство разворачивается с предустановленными значениями, то вам сначала придётся пройтись по ним, а потом уже выйти за пределы правила и создать новую строку.

    Также, по многочисленным заявкам, была введена специальная переменная, которая регламентирует появление пробела в правиле после двоеточия и до значения. Таким образом, вы можете продолжать использовать все удобства этого пакета, не меняя коренным образом свои правила форматирования кода. Устанавливается эта переменная настройках TextMate: Preferences → Advanced → Shell Variables → Variable: TM_CSS_SPACE, Value: [пробел]. Далее — небольшие изменения:

    • Для свойств top, right, bottom и left всё-таки были введены сокращения: t, r, bo и l, соответственно. Символ b остался за свойством border по причине многочисленных сочетаний с ним связанных, а так же более частой употребимости.
    • Регулярное выражение, подсвечивающее HTML-селекторы в CSS-коде, стало регистронезависимым, поэтому теперь подсвечивается как строчное, так и прописное их написание. Что опять же добавляет пакету гибкости.
    • Для более точной и логичной работы всех предусмотренных подстановок, было удалено автоматическое дополнение двоеточия точкой с запятой — :;. В ситуации, когда пакет предлагает все необходимые своства и значения, данная потеря не кажется мне столь ощутимой.

    Итак, напоминаю — пакеты теперь можно скачать на странице проекта в Google Code или через svn-репозитарий, а я с интересом жду ваших отзывов, замечаний и, самое главное, — предложений.

    ]]>     http://pepelsbey.net/2008/11/zen-coding-1-2/feed/ 26     Коробка с cюрпризами http://pepelsbey.net/2008/11/surprise-box/ http://pepelsbey.net/2008/11/surprise-box/#comments Fri, 07 Nov 2008 02:29:07 +0000 pepelsbey http://pepelsbey.net/?p=362 Сначала мы боялись, потом вроде взяли себя в руки, приняв происходящее за простые и понятные фокусы. Сегодня пришло время удивляться снова — фокусы IE8 с переключением режимов рендеринга оказались хитрее, чем казалось поначалу. Что же мы знаем про магическую директиву X-UA-Compatible?

    • Эта директива в виде элемента <meta> должна присутствовать в документе.
    • В ней должно быть указано одно из двух типов значений: IE=x, где x — это обозначение желаемой версии движка или специальное ключевое слово EmulateIE7.
    • …и, в общем-то, всё.

    Давайте проверим, скормив IE8 простой документ:

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
    4. <head>
    5. <title>IE=x</title>
    6. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    7. <meta http-equiv="X-UA-Compatible" content="IE=x"/>
    8. <style type="text/css">
    9. BODY[class*='page'] {
    10. background:#090; /* IE8 и прочие современные */
    11. }
    12. *:first-child+HTML .page {
    13. background:#FC0; /* IE7, исключительно */
    14. }
    15. * HTML .page {
    16. background:#C00; /* IE6 и младше */
    17. }
    18. </style>
    19. </head>
    20. <body class="page"></body>
    21. </html>
    ]]>     Сначала мы боялись, потом вроде взяли себя в руки, приняв происходящее за простые и понятные фокусы. Сегодня пришло время удивляться снова — фокусы IE8 с переключением режимов рендеринга оказались хитрее, чем казалось поначалу. Что же мы знаем про магическую директиву X-UA-Compatible?

    • Эта директива в виде элемента <meta> должна присутствовать в документе.
    • В ней должно быть указано одно из двух типов значений: IE=x, где x — это обозначение желаемой версии движка или специальное ключевое слово EmulateIE7.
    • …и, в общем-то, всё.

    Давайте проверим, скормив IE8 простой документ:

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
    4. <head>
    5. <title>IE=x</title>
    6. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    7. <meta http-equiv="X-UA-Compatible" content="IE=x"/>
    8. <style type="text/css">
    9. BODY[class*='page'] {
    10. background:#090; /* IE8 и прочие современные */
    11. }
    12. *:first-child+HTML .page {
    13. background:#FC0; /* IE7, исключительно */
    14. }
    15. * HTML .page {
    16. background:#C00; /* IE6 и младше */
    17. }
    18. </style>
    19. </head>
    20. <body class="page"></body>
    21. </html>

    Меняя значение IE=x последовательно — 8, 7, 6 — мы переключаем режимы рендеринга IE и получаем такой светофор:

    • IE8
    • IE7
    • IE6

    Красивую расцветку обеспечили нам специальные CSS-фильтры для каждой версии IE:

    • E[att*='val'] — IE8 и прочие современные браузеры, селектор выборки подстрок атрибутов из черновика CSS 3. Да-да, из черновика, который IE8 не собирался поддерживать…
    • *:first-child+HTML E — IE7, исключительно. Просто милый хак, в очередной раз обыгрывающий странное понимание разработчиками IE понятия корневой элемент.
    • * HTML E — IE6 и младше, знаменитый Star HTML Hack, что бы мы без него делали.

    Ну что — пока без сюрпризов, почти скучно. А давайте-ка подключим к документу фавиконку. Вставим её куда-нибудь в элемент <head>, произвольно:

    1. <head>
    2. <title>IE=x</title>
    3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    4. <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
    5. <meta http-equiv="X-UA-Compatible" content="IE=x"/>
    6. </head>

    …и вот здесь начинается самое интересное — все документы позеленели, при любых значениях IE=x. И это фактически означает то, что IE8 просто перестал воспринимать директиву X-UA-Compatible.

    Нет, дело совсем не в фавиконке. Дело в новом расположении элемента <meta> с нашей чудо-директивой. Теперь мета-информация о режиме рендеринга документа становится известна после появления первых элементов самого документа и успешно игнорируется.

    В ходе тестов выяснилось, что предшествовать директиве могут только мета-элементы и <title> — по сути тоже часть мета-описания документа. Все остальные варианты расположения директивы делают её абсолютно неработоспособной.

    Эксперименты это конечно хорошо, но хочется знать наверняка, поэтому полчаса копания в MSDN дали однозначный ответ в статье «Defining Document Compatibility» — все предположения оказались верны:

    Являясь регистронезависимым, заголовок X-UA-compatible, тем не менее, должен находиться в секции HEAD страницы перед всеми остальными элементами, за исключением title и других мета-элементов.

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

    ]]>     http://pepelsbey.net/2008/11/surprise-box/feed/ 16